HTML M

Conceptos bsicos
HTML es un lenguaje o cdigo utilizado para crear pginas web. Este cdigo fue creado
por Tim Berners-Lee en el ao de 1991. A travs de este lenguaje que utiliza
directivas
o etiquetas es cmo podemos, usando un visualizador, crear nuestras pginas web.

HTML significa Lenguaje de Marca de Hipertextos (Hyper Text Markup Language),
hipertexto es un conjunto de textos o subtextos vinculados a travs de enlaces.
El cdigo HTML indica al navegador
de internet los formatos de textos, imgenes,
multimedia, etc.
El cdigo html se genera a travs del uso de <directivas> o <etiquetas>, las directivas se
colocan dentro de los signos < >, esto indica al navegador cuando inicia o termina una
instruccin.
Una directiva o etiqueta puede ser abierta o cerrada, aunque la mayora de los
visualizadores en la actualidad ya dan por hecho donde termina la instruccin, esto es, la
dan por terminada cuando se inicia otra, es importante como todo lenguaje saber cules
son etiquetas abiertas y cules son cerradas, para escribir de manera correcta.
Etiquetas Abiertas: Se colocan al inicio de nuestra indicacin, no es necesario

cerrarlas, por ejemplo:
<BR> indica dar un salto de lnea.
<HR> indica colocar una lnea o regla.
Etiquetas Cerradas: Se colocan al inicio para indicar la accin y se cierran al final

de la instruccin, acompaada del smbolo
/.
Por ejemplo:
<FONT> </FONT> Indica donde empieza y termina el tipo de fuente.
<BODY></BODY>Indica donde empieza y donde termina el contenido de la web.
Las etiquetas pueden escribirse con maysculas o minsculas, usan el idioma ingls y si no
est bien escrito el visualizador las ignora.
Atributos
Cdigo HTML
CECyT GONZALO VZQUEZ VELA
Adems de la instruccin establecida por etiquetas, cada etiqueta tiene atributos. Los
atributos sirven para modificar los parmetros establecidos o las caractersticas de las
etiquetas.
Por ejemplo
la etiqueta ALIGN (alineacin) sirve para alinear un texto o una
imagen, por default siempre se alinea a la izquierda, pero si deseamos cambiar la

alineacin del texto o imagen debemos de cambiar los atributos: ALIGN=CENTER
indica que la alineacin del prrafo o imagen ser al centro.
FONT FACE=ARIAL SIZE=5 COLOR=BLUE En este caso la etiqueta es FONT y sus
atributos: face es el tipo de fuente Arial, size es el tamao indicado que ser 5, y
color ser el color de la fuente,azul.
Para crear una web solo basta el uso adecuado de las etiquetas, un procesador de textos
bsicos como el bloc de notas y un visualizador como Internet Explorer Firefox.
Para generar tu cdigo html y crear tu web debes de considerar lo siguiente:
Existe una estructura bsica que nos permite indicar que es una pgina web.
Las etiquetas como mencionamos pueden
escribirse con maysculas o
minsculas pero sin errores gramaticales.
Tanto las etiquetas como los atributos usan el idioma ingls o cdigos establecidos
(por ejemplo para el color)
En ocasiones los valores de los atributos pueden ser sensibles a las maysculas, por
ejemplo en el nombre de un archivo o estilo de una fuente.
Los nombres de las etiquetas o directivas no pueden contener espacios.
Los valores de los atributos pueden contener espacios si est encerrado entre
comillas por ejemplo: <Font face=Century Gothic>
Los visualizadores de pginas ignoran los espacios en blanco o enters, para crear
espacios en blanco o saltos de lnea hay que utilizar los caracteres especiales o las
etiquetas especficas.
La primera etiqueta en abrir es la ltima en cerrar.
Los visualizadores ignoran las etiquetas o atributos mal escritos o desconocidos

para el visualizador.
Parara disear una web debes de considerar lo siguiente:
La primera pgina debe de ser el ndice o pgina principal que lo identifique

como el documento inicial de un sitio.
Cdigo HTML
Las pginas Web relacionan entre s a travs de ligas, links o hipervnculos.
Para guardar los documentos y archivos que conforman la pgina web es

necesario crear una carpeta y guardar toda la informacin dentro de la misma
carpeta.
Se guarda el documento como Documento Texto (en el block de notas o en

wordpad) con la extensin htm esto nos permite generar un archivo con el icono
de pgina web, por ejemplo PAGINA 1.htm
Una vez creadas la pgina web se puede visualizar en un buscador, se puede

trabajar sin conexin.
La pgina Web mostrar en su contenido el texto o imgenes establecidas en el

cuerpo (BODY) de nuestra pgina. El ancho de nuestra pgina ser el indicado a
travs de los botones de control del tamao de la ventana, esta permitir ajustar el
texto en forma automtica.
Si se desea modificar el contenido de la pgina se debe abrir la pgina y en el

men ver seleccionar la opcin Cdigo fuente, esto nos llevar al block de notas,
se hacen los cambios, guardamos y cerramos el block de notas y actualizamos la
pgina web con el botn de Actualizar de la barra o tambin si oprimes F5.
Cdigo HTML
Estructura basica de un documento html
La estructura bsica de un documento escrito en HTML contendra bsicamente

las siguientes etiquetas:
<HTML> Inicio de la pgina
<HEAD> Cabecera
<TITLE> Titulo del documento
</TITLE> Cierre ttulo del documento.
</HEAD> Cierre de cabecera.
<BODY> Inicio del cuerpo del documento: texto, tablas, imgenes, etc.
</BODY> Cierre del cuerpo de la pgina.
</HTML> Cierre o final de la pgina.
Cabecera y ttulo del documento

<HEAD></HEAD>
La etiqueta <HEAD></HEAD> delimita el inicio del documento. Dentro de <head> es
importante definir el ttulo de la pgina por medio de la etiqueta <TITLE></TITLE>. Este ttulo
ser el que aparezca en la barra de nuestro navegador de nuestras pginas Web.
Ejemplo:
<HEAD><TITLE>Las Drogas en Mxico </TITLE></HEAD>
Cuerpo del documento

<Body></Body>
La etiqueta Body (Cuerpo) es la que nos permite incluir dentro de ella todo el contenido
que se ver a travs de visualizador en la pantalla, o sea en nuestra pgina web.
Body es una etiqueta cerrada <BODY></BODY>
Cdigo HTML
Los siguientes son atributos de la etiqueta Body es decir modifican o especifican las
caractersticas, al ser atributos de body van dentro de la etiqueta <Body>
Atributo
Background="URL\imagen"
Bgcolor=COLOR o CODIGO
Text=COLOR o CODIGO
Alink=COLOR o CODIGO
Link=COLOR o CODIGO
Vlink=COLOR o CODIGO
Bgproperties=FIXED
Accin
Coloca una imagen de
fondo a nuestra pgina
Deber usar imgenes
tipo:jpg, gif,jpeg, tif
Indica un color para el fondo
de nuestra pgina.
Indica un color para el texto
que incluyamos en nuestro
documento. Por defecto es
negro. Solo se ve alterado
cuando se usa <Font>.
Indica el color de los enlaces
activos, es decir, los enlaces
seleccionados con un clic
sostenido.
Indica el color de los textos
que dan acceso a un
enlace. Por defecto es azul.
Indica el color de los textos
que dan acceso a un enlace
que ya hemos visitado con
nuestro navegador. Por
defecto es prpura.
El parmetro fixed,
inmoviliza el fondo de la
pgina con respecto al
desplazamiento del texto.
Solo funciona con Internet
Explorer.
Ejemplo:
Background=imagen1.jpg
Bgcolor=purple
Bgcolor= #74DF00
Text=orange
Text=#DF0174
Alink=red
Alink= #088A08
Link=purple
Link=#DF0174
Vlink=yellow
Link=#DF0101
Bgproperties=fixed
Ejemplo
<Body bgcolor=black text=yellow Alink=#088A08 link=#DF0174 link=#6E6E6E>
El cdigo hexadecimal usa 3 colores: rojo, verde y azul. El cdigo de color se antecede
del smbolo #.
Ejemplos:
#000000 Negro
#FF0000 Rojo
#00FF00 Verde
#0000FF Azul
#FFFFFF Blanco
Las primeras dos cifras corresponde al color Rojo, las dos siguientes al Verde y las dos
ltimas al color Azul. El cdigo hexadecimal incluye toda la gama de tonalidades.
Ejemplo de la estructura bsica
Cdigo HTML
Espacios y Saltos de lnea

En HTML los espacios entre caracteres con barra espaciadora no existen, solo reconoce
un espacio, si deseas ms espacios hay que usar el comando &nbsp por cada uno de los
espacios que desees colocar.
Para indicar un salto de lnea se utiliza la etiqueta <BR>, cada BR indica un enter o punto y
aparte.
Cdigo HTML
Formato de prrafo
Prrafos <P></P>
Es una etiqueta cerrada, se abre al inicio del prrafo y se cierra al finalizarlo. El atributo
para prrafo es ALIGN, ALIGN nos permite cambiar la alineacin de un texto:
Atributo
Accin
Align=LEFT/RIGHT/CENTER
Alinea el prrafo a la izquierda (left), a la derecha (right) o al

centro (center).
Ejemplo:
<p align=right>
Ejemplo
Se vera como
<P Align=right>Mxico Mgico.</P>
Mxico Mgico
<P Align=center> Mxico Mgico</P>
Mxico Mgico
Regla
<HR>
Coloca una lnea horizontal en nuestra pgina, estas lneas, son muy usadas para dividir
secciones de textos. La etiqueta es:
Atributo
Accin
ALIGN=LEFT/RIGHT/CENTER
Alinea lnea a la izquierda (left), a la

derecha (right) al centro (center).
Align=Left
Indica el grosor de la lnea en pixeles.

SIZE=PIXELES
WIDTH=PIXELES o %
COLOR=COLOR o CODIGO
Size=15
Indica el ancho de la lnea en tanto por

ciento en funcin del ancho de la ventana
del navegador: 25%,50%,etc. en pixeles
Width=75%
Define el color de la lnea en cdigo o la

palabra en ingls.
Color=Blue
Cdigo HTML
Ejemplo:
<HR align= center size=20 width=50% color=blue>
Formato de texto
Cabeceras
<Hn></Hn>
Las cabeceras son estilos de textos prediseados, por lo tanto usan tipos de fuentes y
tamaos preestablecidos.
Hay seis tipos de cabeceras (tamaos de letra):
<H1>,<H2>,<H3>,<H4>,<H5> y <H6>
Es una etiqueta cerrada. El texto que escribamos entre el inicio y el fin de la etiqueta ser
el afectado por las cabeceras.
La cabecera <H1> ser la que muestre el texto en mayor tamao.
Ejemplo
Se vera como
<H1>Mxico Mgico</H1>
Mxico Mgico
<H2> Mxico Mgico </H2>
Mxico Mgico
Mxico Mgico
Mxico Mgico
<H5> Mxico Mgico </H5> Mxico Mgico

<H6> Mxico Mgico </H6> Mxico Mgico
Cdigo HTML
Estilos de texto
Para aplicar estilos de texto (negrilla, subrayado, etc) tenemos varias etiquetas.
Efecto
Etiqueta
Ejemplo
Texto en negrita
<B></B>
<B>Mis amigos </B>
Mis amigos
Texto en cursiva
<I></I>
<I> Pgina </I>
Mis amigos
Texto ms
grande
<BIG></BIG>
<BIG> Pgina </BIG>
Mis amigos
Texto subrayado
<U></U>
<U> Pgina </U>
Mis amigos
Texto tachado
<S></S>
<S> Pgina </S>
Mis amigos
Texto con
parpadeo (solo
en Firefox)
<BLINK></BLI
NK>
<BLINK>Texto
animado</BLINK>
Las palabras Texto

animado parpadean en
pantalla
Texto en
superndice
<SUP></SUP>
m<SUP>3</SUP>
m3
Texto en
subndice
<SUB></SUB>
H<SUB> 2 </SUB>O
H2O
Texto centrado
<CENTER></C
ENTER>
<CENTER> Animales
</CENTER>
Animales
Tipo, tamao y color de fuente <Font> </Font>

La etiqueta <Font> nos sirve para dar las caractersticas al texto (tipo de fuente, color, y
tamao) es una etiqueta cerrada, afecta todo el texto que se encuentra entre la
etiqueta, es necesario cerrarla para delimitar el cambio de fuente.
Atributo
Face=Nombre de la fuente
Accin
Ejemplo
Establece el tipo de fuente, no

todos los tipos de fuentes son
aceptados por el visualizador por
eso es necesario hacer pruebas.
Face=Times New Roman
Si la fuente tiene ms de dos
palabras es necesario poner el
nombre entrecomillado y
respetando las maysculas.
Size=Tamao
Color=cdigo de color
El tamao de la fuente es de 1 a
7, se usa el signo + o para
establecer tamaos intermedios.
Size=5
Asigna un color a la fuente,

puede ser el nombre del color
escrito en ingls o el cdigo
hexadecimal correspondiente.
Color=#5E610B
Cdigo HTML
Ejemplo:
<Font face=Times New Roman size=5 color=#3B0B39
Cdigo HTML
Fuente base
<basefont>
La etiqueta <basefont> es una etiqueta abierta que se escribe inmediatamente debajo
de la etiqueta <Body>.
Esta etiqueta establece un tamao, un color y un tipo de letra de base para todo el
documento. Utiliza los mismos atributos que utiliza la etiqueta FONT. La podemos usar
cuando la mayora de nuestro texto tiene el formato que asignamos y as solo cambiar en
las en las lneas que deseamos con otro formato.
Esta etiqueta solo respeta el tipo de fuente y color dentro de tablas, pero no el tamao
de la fuente, en este caso debemos indicar en la celda el tamao del texto.
Ejemplo:
Cdigo HTML
Cdigo HTML
Marquesina
<Marquee> </Marquee>
Una marquesina es un texto o imagen animada, es una etiqueta cerrada. Funciona
nicamente con Ms-Explorer. Sus atributos deben de estar dentro de la etiqueta
<Marquee> y son los siguientes:
Atributo
Accin
Ejemplo
Bgcolor =cdigo de color
Indica el color del fondo de la

marquesina
Bgcolor=blue
Direction =LEFT/RIGHT
Height =nmero %
Width = nmero %
Loop =nmero/infinite
Scrolldelay =nmero
Scrollamount=nmero
Behavior=ALTERNATE/SCROLL/SLIDE
Indica en que direccin se

desplaza el texto, hacia la
izquierda (left) o hacia la derecha
(right)
Indica la altura de la marquesina
en puntos o porcentaje en
funcin de la ventana del
navegador.
Indica el ancho de la marquesina
en puntos o porcentaje en
funcin de la ventana del
navegador
Indica el nmero de veces que se
desplazar el texto por la
marquesina antes de detenerse.
Define la velocidad del texto que
est dentro de la marquesina. A
menor numeracin, mayor
velocidad.
Define la cantidad de pxeles que
queremos que se desplace el
texto en cada movimiento.
A mayor nmero avanza ms
rpido
Este atributo controla el
movimiento de la marquesina, sus
valores pueden ser:
ALTERNATE la marquesina se
mueva de un lado a otro.
SCROLL la marquesina sale y
entra
SLIDE la marquesina se detiene
cuando llega al lado opuesto.
Direction=left
Height=10%
Height=35
Widht=50%
Width=400
Loop=5
Loop=infinite
Scrolldelay=10
(ms rpido)
Scrolldelay=200
(ms lento)
Scrollamount="3"
(menor desplazamiento)
Scrollamount=75
(mayor desplazamiento
Behavior=Alternate
Cdigo HTML
Ejemplo
<MARQUEE bgcolor = #FFFFFF width = 50% scrolldelay =250> Bienvenidos </MARQUEE>
Formatos de imagen
<IMG>
Para colocar una imagen se usa la etiqueta <IMG> es una etiqueta abierta.
Es recomendable guardar las imgenes en la misma carpeta en donde se guarda la web,
de lo contrario es posible que no la muestre.
Si la imagen est en otra carpeta es necesario indicar la direccin (URL) en donde se
encuentra y asegurarse que siempre se tenga esta carpeta.
Hay dos formatos de imgenes que todos los navegadores modernos reconocen. Son las
imgenes GIF,TIP, PNG y JPG. Por lo general las imgenes de paint (mapa de bits) no se
usan pues su tamao es muy grande y tardan mucho en cargarse.
Ejemplo
Atributo
src=URL\imagen
Accin
Indica el nombre del archivo grfico a

mostrar
src=recursos\caballo.jpg
src=dibujo.png
alt=Texto
Mostrara el texto indicado mediante una

descripcin sensible al mouse.
<img src=caballo.jpg
Align=TOP / MIDDLE /
BOTTOM/RIGHT/LEFT
Indica cmo se alinear el texto que siga a la

imagen. TOP alinea el texto con la parte
superior de la imagen, MIDDLE con la parte
central, y BOTTOM con la parte inferior, RIGHT
y LEFT. Si quiere centrar la imagen deber
usar la etiqueta <CENTER></CENTER>
alt=Pura sangre>
Align=Right
Align=Top
Border =nmero
Indica el grosor del borde de la imagen en

pixeles.
Indica el alto de la imagen en pixeles o en
porcentaje. Se usa para variar el tamao de
la imagen original.
Height=25%
Height =nmero %
Indica el ancho de la imagen en pixeles o en

porcentaje. Se usa para variar el tamao de
la imagen original.
Width=75%
Width=numero %
Hspace =nmero
Indica el nmero de espacios horizontales, en

pixeles, que separarn la del imagen texto
que la siga y la anteceda.
Border=15%
Height=300
Width=600
Hspace=50
Cdigo HTML
Indica el nmero de pixeles verticales que

separaran la imagen del texto que le siga y la Vspace=15
anteceda.
Ejemplo:
<IMG Src=Animales\jaguar.jpg alt=En peligro width=250 height=250 vspace=40 hspace=15
border=10>
Vspace =nmero
Cuando la imagen no se muestra es que el URL o direccin en donde el navegador la

busca no es la correcta.
El siguiente es un ejemplo del uso de tamao y posicin de imagen con respecto al texto:
El siguiente es un ejemplo del uso de imgenes:
Cdigo HTML
Cdigo HTML
Cdigo HTML
Listas
Existen tres tipos de listas:
Numeradas <OL>
Sin numerar <UL>
Definicin <DL>
LISTAS NUMERADAS <OL></OL>

Se usa la etiqueta <OL> para iniciar la lista se auxilia de la etiqueta <LI> para indicar
cada uno de los elementos y la etiqueta </OL> para cerrar el listado.
Atributo
Accin
start=nmero
Indica que nmero ser el primero de la Ejemplo:

lista. Si no se indica se entiende que
star=4
empezar por el nmero 1
Empezar el listado en
el 4
type =tipo
Indica el tipo de numeracin utilizada.

type=A
Si no se indica se entiende que ser
una lista ordenada numricamente.
Los tipos posibles son :
1 = Nmeros arbigos (1,2,3,4, etc.)
a = Letras minsculas. (a,b,c,d, etc.)
A = Letras maysculas. (A,B,C,D, etc.)
i = Nmeros romanos en minsculas.
(i.ii,iii,iv,v, etc.)
I = Nmeros romanos en maysculas.
(I,II,III,IV,V, etc.)
LISTAS SIN ORDENAR O DE VIETAS
<UL> </UL>
Las listas sin numerar representan los elementos de la lista con una vieta o marca que
antecede a cada uno de ellos.
Se usa la etiqueta <UL> para iniciar la lista, la etiqueta <LI> para indicar cada uno de los
elementos y la etiqueta </UL> para cerrar el listado.
Atributo
Type=tipo
Accin
Indica el tipo de vieta, pueden
ser disk , circle o square. Los
valores de type, con lo que el
topo o marca puede ser un
disco, un circulo o un cuadrado.
Ejemplo
Type=Circle
Cdigo HTML
Cdigo HTML
Cdigo HTML
LISTA DE DEFINICIN
<DL></DL>
Las listas de definicin muestran los elementos tipo Diccionario, o sea, trmino y definicin.
Se utiliza para ellas la etiqueta <DL> al iniciar la lista y la etiqueta</DL> para cerrar el
listado.
Adems se integran dos etiquetas ms:
<DT> para indicar el trmino y
<DD> para indicar la definicin del trmino
Cdigo HTML
Cdigo HTML
LISTAS ANIDADAS
Es posible crear lista anidada, es decir una lista dentro de otra lista, para esto basta con
tomar en cuenta la secuencia del listado y considerar que cada lista en forma individual
debe abrirse y cerrarse.
Un ejemplo de un listado anidado es:
Cdigo HTML
Cdigo HTML
Tablas
Para crear una tabla es necesario varias etiquetas:< TABLE> en donde se establecen los
atributos generales de la tabla, <TR> que establece los atributos para las filas que
conforman las tablas, y <TD> para cada celda de la tabla:
<TABLE></TABLE>
Las tablas son de gran ayuda para distribuir los elementos en nuestra web: textos,
imgenes, listados, etc. Los parmetros opcionales de esta etiqueta son:
Atributo
Accin
Alinea la tabla con
Align=Center
respecto del texto que
ALIGN=LEFT/RIGHT/CENTER/JUSTUFY
lo rodea, pueden ser
LEFT, RIGHT, CENTER y
JUSTIFY.
Asigna una imagen de Background=Fondo1.jpg
Background=URL\imagen
fondo especificando
el URL
Bgcolor=Black
Asigna un color de
Bgcolor=cdigo de color
fondo a la tabla
Indica el ancho del
borde de la tabla en
puntos
Especifica el color del
borde de la tabla.
Indica el espacio en
puntos que separa
luna celda de otra.
Indica el espacio en
puntos que separa el
borde de cada celda
y el contenido de
esta.
Border=16
Width=75%
Width=numero %
Indica el ancho de la
tabla en % p pixeles.
De no indicarlo el
ancho de la tabla se
ajusta al contenido.
Height=1200
Height=numero %
Indica la altura de la
tabla en puntos o en
porcentaje. De no
colocar alto, este se
ajusta al contenido.
Border=nmero
Bordercolor=cdigo o color
Cellspacing =nmero
Cellpadding = numero
Bordercolor=Yellow
Cellspacing=20
Cellspacing=30
Cdigo HTML
Cabecera de la tabla:
<TH></TH>
Indica una celda de cabecera o de ttulos de columna, es decir, el contenido ser
resaltado en negrita y en un tamao ligeramente superior al normal. Los parmetros
opcionales son:
Atributo
Accin
Align=LEFT/RIGHT/CENTER/JUSTIFY
Este atributo especifica la alineacin del

texto de las celdas, sus valores pueden ser
LEFT, RIGHT, CENTER y JUSTIFY.
Especifica el archivo de imagen de fondo

de las celdas
Bgcolor=cdigo o color
Especifica el color de fondo de las celdas
Especifica el color del borde de las celdas
Colspan=nmero
Valign=TOP/MIDDLE/ BOTTOM
Indica el nmero de columnas que

ocupar la celda (combinar celdas). Por
defecto ocupa una sola columna.
Indica la alineacin vertical del contenido
de la celda, en la parte superior (TOP), en
la inferior (BOTTOM), o en el centro
(MIDDLE).
Rowspan=nmero
Indica el nmero de filas que ocupar la

celda. Por defecto ocupa una sola fila
Height=nmero %
Indica la altura de las celdas en puntos o

en porcentaje. Se ajusta automticamente
al contenido de las celdas.
Width=nmero %
Indica la anchura de la columna en puntos

o en porcentaje. Se ajusta
automticamente al contenido
Cdigo HTML
Filas
<TR></TR>
Las tablas estn formadas por filas para ello se usa esta etiqueta
La etiqueta <TABLE>, encierra a la directiva< TR>
Esta etiqueta define el comienzo y fin de una fila en la tabla, para cada fila habr <tr>,
esta etiqueta debe cerrase al terminar la fila.
Atributo
Accin
Este atributo especifica la alineacin del texto de
las celdas, sus valores pueden ser LEFT, RIGHT,
CENTER y JUSTIFY.
Especifica el archivo de imagen de fondo,
mediante un URL para la fila.
Especifica el color de fondo para la fila.
Especifica el color del borde de la fila.
Datos de la tabla (celda)

<TD></TD>
La etiqueta <TD> </TD> definen las caractersticas de cada celda, en las celdas van los
contenidos de las tablas: imgenes o textos, los <td> deben cerrarse para limitar la celda
y a su vez, se encuentran incluidos en los <TR>.
Atributo
Accin
Este atributo especifica la alineacin del texto

que se encuentra dentro de la calda, sus
valores pueden ser LEFT, RIGHT, CENTER y
JUSTYFY.
Especifica el archivo de imagen de fondo,

mediante un URL para la celda.
Especifica el color de fondo para la celda.
Bordercolor= cdigo de color
Especifica el color del borde de la celda.
Colspan=nmero
Especifica el nmero de columnas que ocupar

la celda, su valor es numrico.
Cdigo HTML
Height=nmero %
Rowspan=nmero
Valign=BASELINE/BOTTOM/MIDDLE/TOP
Width= numero %
EJEMPLO DE TABLAS
Indica la altura de la celda en pxeles o en

valores de porcentaje.
Especifica el nmero de filas que ocupar la
celda, su valor es numrico.
Ajusta los elementos de la celda de una forma
vertical, sus valores pueden ser BASELINE,
BOTTOM, MIDDLE Y TOP.
Indica la anchura de la celda en pxeles o en
valores de porcentaje.
Cdigo HTML
Cdigo HTML
Enlaces
Un enlace puede ser una porcin de texto, una imagen o una porcin de una imagen,
realmente un enlace, puede ser casi cualquier elemento de bloque.
Un enlace es ms conocido por su nombre en ingls (link) y al punto final de un enlace se
le denomina ancla (anchor).
La forma general de un enlace es:
<A #REF=Destino del enlace>Texto o imagen de la pgina que servir de enlace </A>
Cdigo HTML
ENLACES INTERNOS O LOCALES

La etiqueta que nos permite hacer enlaces internos o locales es:
<A> </A> (Ancla)

Este elemento se utiliza para indicar una parte de la pgina web, generalmente texto o
imgenes, que ser un enlace a determinada parte de nuestro documento pgina, se
utiliza cuando la pgina es grande y se desea un acceso ms rpido a un tema
ATRIBUTO
ACCIN
Href=#nombre
Indica el URL de enlace.
Name=nombre
Indica un nombre para los enlaces Locales.
Title=texto
Proporciona una descripcin del enlace si se mantiene el ratn un

momento sobre el hipertexto.
Y recuerde que para los enlaces en la directiva body se haban especificado las
directivas:
ATRIBUTO
Alink= cdigo de color
Link=cdigo de color
Vlink=cdigo de color
ACCIN
Este atributo asigna el color a los enlaces activos, es decir,
enlaces seleccionados con un clic sostenido.
Asigna un color a los enlaces en la pgina web si no se
define un color el valor por defecto ser el azul.
Define el color de un enlace ya visitado su valor por defecto
es el violeta.
Los enlaces locales se consiguen utilizando el atributo NAME, este sera un ejemplo.
<A NAME=INICIO></A> A esta seccin de entrada le dimos el nombre de INICIO y la
directiva:
<A HREF=#CONTINUAR>Haz click para continuar </A> indica la otra seccin a la que
ligara el enlace.
Para completar el enlace se debe de establecer una entrada con el nombre que le dimos
en este caso de CONTINUAR que esta en la seccin a donde llevar el enlace con la
directiva:
<A NAME=CONTINUAR></A> e indicar el regreso que es la seccin inicial con la directiva
<A HREF=#INICIO>Haz click para REGRESAR</A>
Cdigo HTML
Cdigo HTML
Cdigo HTML
ENLACES GLOBALES O EXTERNOS

Llamaremos enlaces globales, a los enlaces que son fuera de nuestra pgina a otras
pginas aunque pertenezcan a un mismo sitio.
En estos enlaces no se usa la etiqueta Name ni el #
Existen tres casos de enlaces globales o externos:
I.-A otro documento del mismo u otro sitio.
<A HREF=URL> Texto o imagen de la pgina que servir de enlace </A>
Ejemplo fuera del sitio:
<A HREF=http://www.google.com.mx>Quieres realizar bsquedas </A>
Si esta dentro del mismo sitio es:
<A HREF=nombre de la pgina>Texto que servir de enlace</A>
Ejemplo:
<A HREF=listas1.htm> Deseas conocer las actividades</A>
Si se desea regresar por ejemplo:
<A HREF=enlaces.htm>REGRESAR</A>
II.- Usar una imagen como hipervnculo:
<A HREF=hojaweb.htm><IMG SRC=imagen.gif></A>
<a href=paleontologa.htm><img src=trilobite.jpg></A>
III.- A un correo electrnico
<A HREF=mailto:direccin email>Texto del enlace</A>
Ejemplo:
Cdigo HTML
Cdigo HTML
Insercin de sonido y msica

SONIDO DE FONDO
Nuestra pgina Web puede tener un sonido que se active al entrar en la pgina. Esta
caracterstica de Ms Explorer utiliza la etiqueta <BGSOUND> y tiene los siguientes
parmetros:
ATRIBUTO
ACCIN
Src=archivo
Indica el nombre del archivo que contiene

el sonido (.waw, .mid).
Loop=nmero / infinite
Indica el nmero de veces que se

reproducir el sonido. Si se indica infinite, el
sonido se reproducir de forma continua
hasta que abandonemos la pgina
Determina el volumen de reproduccin del

sonido, y que puede variar entre 0 y 100. En
Volumen=nmero
caso de Internet Explorer, el valor del
volumen por defecto es 50 en plataformas
PC
Un ejemplo de esta etiqueta sera :
<BGSOUND src= "yesterday.mid" loop= infinite >
Otro ejemplo es:

<bgsound src=tiburon.mid loop=infinite>
Para insertar sonido en una pgina la etiqueta es:
<A HREF=nombre del archivo.wav>Texto de enlace</A>
Ejemplo:
<A HREF=Perro.WAV>Este es el ladrido de un perro </A>
Cdigo HTML
Marcos
Las frames o marcos se usan para para dividir la pantalla principal del navegador en
varias ventanas, independientes una de otra, es decir el contenido que se muestra puede
ser manipulado por nosotros mostrando pginas web diferentes en cada momento.
Por lo general los marcos o frames se utilizan en la pgina principal (denominada en la
mayora de los casos index) para distribuir contenidos a travs de un ndice general.
<FRAMESET> </FRAMESET>
ATRIBUTO
ACCIN
Rows=pixeles % de la pantalla
Indica el tamao de los frames en puntos o

porcentaje. La posicin de los frames es en
filas.
Cols=pixeles % de la pantalla
Indica el tamao de los frames en puntos o

porcentaje. La posicin de los frames es en
columnas.
<FRAMESET rows = "25%,50%,25%">

<FRAMESET cols = "120,*,100">
Border=pixeles
Indica el ancho del borde del marco en

pixeles
Bordercolor=color
Indica el color del borde
En caso de utilizar rows los tamaos de las frames se entienden indicados de arriba a
abajo, es decir, el primer valor ser el asignado a la ventana superior, el segundo a la
ventana inmediatamente inferior, etc...
En el caso de cols los tamaos se aplican de izquierda a derecha.
Cdigo HTML
Ejemplo:
Cdigo HTML
<FRAME>
Establece las propiedades de los marcos o frames. Es necesario determinar las
caractersticas de cada uno de los frames.
La definicin de las frames debe ir antes de la definicin del cuerpo <body> de
documento
ATRIBUTO
name="nombre"
src="URL"
marginwidth=nmero.
ACCIN
Asigna el nombre del marco o frame
El frame mostrar en principio el contenido del
documento HTML que se indica.
Indica el margen izquierdo y derecho de la
ventana en puntos.
marginheight=nmero
Indica el margen superior e inferior de la ventana
en puntos.
scrolling="yes / no / auto".
Coloca o no una barra de desplazamiento a la
ventana en el caso de que la pgina que se
cargue en ella no quepa en los lmites de la
ventana. el valor " yes " muestra siempre la barra de
desplazamiento, " no " no la muestra nunca (la
zona de la pgina que no quepa en la ventana no
la veremos), y " auto " la muestra solo en caso de
que sea necesario para poder ver la pgina
noresize
border=nmero
Fija el tamao de la ventana y no puede ser

modificado.
Indica el ancho del borde que separara un frame
del otro Si se indica cero (0) no se mostrara borde
entre las frames.
Cdigo HTML
Ejemplo:
Cdigo HTML
<TARGET>
Al usar los frames, si deseamos cambiar el contenido de ellos a travs de ligas o
hipervnculos desde la misma ventana principal, se utiliza la etiqueta
<A href= > </A> junto con la etiqueta Target.
ATRIBUTO
ACCIN
target="nombre del frame"
Muestra el Hyperenlace en el frame o marco que

se indica.
target="_blank"
Abre una nueva copia del navegador y muestra

el Hyperenlace en ella.
target="_self"
Se muestra el Hyperenlace en el frame o marco

activo
target="_parent".
El Hyperenlace se muestra en el <FRAMESET>

definido anteriormente al actual. Si no hay ningn
<FRAMESET> anterior se muestra a pantalla
completa suprimiendo todas los frame de la
pantalla
target="_top".
Suprime todas las frames de la pantalla y muestra

el Hyperenlace a pantalla completa
Cdigo HTML
Cdigo HTML
Resumen de etiquetas
ACCIN
ETIQUETA
Inicio de la pgina
<HTML> </HTML>
Cabecera de la pgina
<HEAD> </HEAD>
Ttulo de la pgina
<TITLE> </TITLE>
Cuerpo de la pgina
<BODY> </BODY>
Espacio o salto
<BR>
Prrafo
<P> </P>
Align (left, right, center, justify)
Regla
<HR>
Align (left, right, center),noshade, size, width, color
Texto con formato de

cabecera
<H1></H1>
H tiene valor de 1 a 7
Centrar
<CENTER> </CENTER>
Texto en Negritas
<B> </B>
Texto ms grande
<BIG> </BIG>
Texto en Cursiva
<I> </I>
Texto tachado
<S> </S>
Texto ms pequeo
<SMALL> </SMALL>
Subndice
<SUB> </SUB>.
Superndice
<SUP> </SUP>.
Texto Subrayado
<U> </U>
Fuente
<FONT> </FONT>
Imagen
<IMG>
Marquesina
<MARQUEE>
</MARQUEE>
Lista sin numerar

Elemento de la lista
Lista numerada
Elemento de la lista
Descripcin del trmino
<UL> </UL>
<LI>
<OL> </OL>
<LI>
<DL> </DL>
<DT>
<DD> </DD>
ATRIBUTO
Background, bgcolor, alink, link, vlink, text
Color, face, size

Src, align ( bottom, left, middle, right y top) alt, border , height,
width, hspace, vspace , usemap
Height, width, hspace, loop, scrollamount, scrolldelay, vspace,
behavior (alternate, scroll, slide), bgcolor; direction ( left, right,
top, up y down)
Type (circle, disc, square)
Start, type (1,I,A,a,i)
Ttulo de la tabla
<CAPTION> </CAPTION>
Tabla
<TABLE> </TABLE>
Cabecera de la tabla
(solo 1era.fila)
<TH> </TH>
Fila en tabla
<TR> </TR>
Dato de celda
<TD> </TD>
Enlace
<A> </A> (Ancla)
Sonido
<BGSOUND>
Src, Balance, loop, volume
Video
<img dynsrc>
Loop, height, width, start=fileopen start=mouseover
Align (left, right, center);background, bgcolor ,border,

bordercolor ,cellpadding,cellspacing, height,width
Align (left, right, center y justyfy) background, bgcolor,
bordercolor, colspan, height, width, rowspan, valign (baseline,
bottom, middle y top)
Background, bgcolor, bordercolor, align (center, right,
justify,left)
Align (left, right, center y justyfy), background, bgcolor,
bordercolor, colspan, rowspan, height, width, valign (baseline,
bottom, middle y top)
name, href
Cdigo HTML

HTML M

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML M

Uploaded by

Copyright:

Available Formats

Conceptos bsicos

o etiquetas es cmo podemos, usando un visualizador, crear nuestras pginas web.

de internet los formatos de textos, imgenes,

Etiquetas Abiertas: Se colocan al inicio de nuestra indicacin, no es necesario

Etiquetas Cerradas: Se colocan al inicio para indicar la accin y se cierran al final

CECyT GONZALO VZQUEZ VELA

la etiqueta ALIGN (alineacin) sirve para alinear un texto o una

imagen, por default siempre se alinea a la izquierda, pero si deseamos cambiar la

Las etiquetas como mencionamos pueden

escribirse con maysculas o

minsculas pero sin errores gramaticales.

Los nombres de las etiquetas o directivas no pueden contener espacios.

La primera etiqueta en abrir es la ltima en cerrar.

Los visualizadores ignoran las etiquetas o atributos mal escritos o desconocidos

Parara disear una web debes de considerar lo siguiente:

La primera pgina debe de ser el ndice o pgina principal que lo identifique

CECyT GONZALO VZQUEZ VELA

Las pginas Web relacionan entre s a travs de ligas, links o hipervnculos.

Para guardar los documentos y archivos que conforman la pgina web es

Se guarda el documento como Documento Texto (en el block de notas o en

Una vez creadas la pgina web se puede visualizar en un buscador, se puede

La pgina Web mostrar en su contenido el texto o imgenes establecidas en el

Si se desea modificar el contenido de la pgina se debe abrir la pgina y en el

CECyT GONZALO VZQUEZ VELA

Estructura basica de un documento html

La estructura bsica de un documento escrito en HTML contendra bsicamente

Cabecera y ttulo del documento

Cuerpo del documento

CECyT GONZALO VZQUEZ VELA

CECyT GONZALO VZQUEZ VELA

Espacios y Saltos de lnea

CECyT GONZALO VZQUEZ VELA

Alinea el prrafo a la izquierda (left), a la derecha (right) o al

<P Align=right>Mxico Mgico.</P>

<P Align=center> Mxico Mgico</P>

Alinea lnea a la izquierda (left), a la

Indica el grosor de la lnea en pixeles.

Indica el ancho de la lnea en tanto por

Define el color de la lnea en cdigo o la

CECyT GONZALO VZQUEZ VELA

<H2> Mxico Mgico </H2>

<H3> Mxico Mgico </H3>

<H4> Mxico Mgico </H4>

<H5> Mxico Mgico </H5> Mxico Mgico

CECyT GONZALO VZQUEZ VELA

<B>Mis amigos </B>

<I> Pgina </I>

<BIG> Pgina </BIG>

<U> Pgina </U>

<S> Pgina </S>

Las palabras Texto

Tipo, tamao y color de fuente <Font> </Font>

Establece el tipo de fuente, no

Asigna un color a la fuente,

CECyT GONZALO VZQUEZ VELA

CECyT GONZALO VZQUEZ VELA

CECyT GONZALO VZQUEZ VELA

CECyT GONZALO VZQUEZ VELA

Bgcolor =cdigo de color

Indica el color del fondo de la

Indica en que direccin se

CECyT GONZALO VZQUEZ VELA

Indica el nombre del archivo grfico a