ndice
introduccin ............................................................................................ 1
etiquetas de edicin de texto ................................................................. 5
formato de caracteres ............................................................................ 5
formato de prrafos ............................................................................... 7
listas........................................................................................................ 8
enlaces .................................................................................................... 9
body ...................................................................................................... 10
imgenes .............................................................................................. 11
tablas .................................................................................................... 12
marcos .................................................................................................. 15
etiquetas de cabecera .......................................................................... 17
ndice ...................................................................................................... 1
introduccin
estructura de los documentos HTML
<html>
<head>
<title>ttulo</title>
...
</head>
<body>
....
</body>
</html>
principio de documento
principio de cabecera
fin de cabecera
principio de cuerpo
fin fr cuerpo
etiquetas
Todas las etiquetas en HTML estn encerradas entre los smbolos < y >. Se
cierran con el nombre de la etiqueta precedido con el smbolo /. Las etiquetas
afectan al cdigo delimitado por la apertura y el cierre de la etiqueta.
atributos
Muchas etiquetas tienen atributos, los cuales modifican el funcionamiento de la
misma. Estos se ponen de esta forma:
<etiqueta atributo1=valor1 atributo2=valor2 ...>
....
</etiqueta>
En el cierre slo se cierra la etiqueta.
comentarios
Es texto que no aparece en la pgina, sino que sirve para informarnos a nosotros
mismos. Se coloca:
<!-.....
-->
smbolos especiales
El texto del documento HTML es problemtico ya que numerosos servidores no
pueden almacenar cdigos extendidos de texto (como los smbolos , , o ,
por ejemplo). Por eso se utilizan cdigos. Los cdigos se colocan con el smbolo
&, seguido del nombre del cdigo y finalizado con el punto y coma. Los ms
utilizados son:
á
é
í
ó
ú
Á
É
Í
Ó
Ú
ñ
Ñ
<
&
¿
ü
<
&
>
¡
Ü
>
€
"
"
º
ª
©
™
 : (espacio
obligatorio)
£
½
¼
¾
colores
Muchas etiquetas indican colores. Hay dos formas de indicar el color. Por el
nombre (blue, yellow, silver,...) o por el cdigo. El cdigo son seis cifras
hexadecimales, donde las dos primeras indican el nivel de rojo, las dos siguientes
el de verde y las dos ltimas el de azul. Ejemplo: #33CC66.
Slo hay 216 colores seguros en Internet. Son colores que, en teora, se ven
igual en cualquier sistema operativo.
Los nombres de colores ms populares son:
Nombre
black
teal
Cdigo de color
#000000
#008080
blue
navy
lime
white
purple
yellow
olive
red
maroon
gray
fuchsia
green
silver
aqua
#0000FF
#000080
#00FF00
#FFFFFF
#800080
#FFFF00
#808000
#FF0000
#800000
#808080
#FF00FF
#008000
#C0C0C0
#00FFFF
Color mostrado
Negro
Teal (Marrn
claro)
Azul
Azul marino
Lima
Blanco
Prpura
Amarillo
Oliva
Rojo
Marrn
Gris
Fucsia
Verde
Plata
Agua
cierre no
netscape 1
microsoft 1
html 1
cierre no
netscape 1
microsoft 1
html 1
Salto de lnea.
<hr>
noshade
netscape 1
microsoft 1
html 3.2
netscape 1
microsoft 1
html 3.2
width=tamao
align=alineacin
netscape 1
microsoft 1
html 3.2
netscape no
microsoft 4
html no
netscape 1
microsoft 1
html 3.2
color=cdigo de color
Color de la lnea.
size=n
Grosor de la lnea
ejemplo
<hr width=300 noshade align=left size=5 color=blue>
<pre>
cierre s
netscape 1
microsoft 1
html 1
Hace que el texto aparezca con los espacios y tabulaciones que se crearon en el
diseo.
formato de caracteres
<strong>
cierre s
netscape 1
microsoft 1
html 1
netscape 1
microsoft 1
html 1
<b>
cierre s
<em>
cierre s
netscape 1
microsoft 1
html 1
<i>
cierre s
netscape 1
microsoft 1
html 1
microsoft 3
html 3.2
<u>
cierre s
netscape 3
<big>
cierre s
netscape 1
microsoft 1
html 3.2
<small>
cierre s
netscape 2
microsoft 3
html 3.2
<sub>
cierre s
netscape 2
microsoft 3
html 3.2
cierre s
netscape 2
microsoft 3
html 3.2
cierre s
netscape 3
microsoft 3
html 3.2
microsoft 1
html 3.2
Subndice
<sup>
Superndice
<s> o <strike>
<font>
cierre s
netscape 1
size=tamao
netscape 1
microsoft 1
html 3.2
Indica el tamao. Puede ser absoluto (7) o relativo (+2). Los tamaos van de 1 a
7. Indicar +2 como tamao significa subir dos tamaos a la letra.
netscape 1
microsoft 1
html 3.2
color=cdigo
netscape 2
microsoft 3
html 3.2
Color del texto. Los colores se pueden indicar con su nombre, valor hexadecimal
o valor RGB. (Ver apndice sobre colores al final del manual).
point-size=Tamao
netscape 2
ejemplo
<font color=#66666 size=4 face=arial, helvetica>
<basefont>
cierre s
netscape 1
microsoft 1
html 3
Es idntica a font, slo que funciona para el texto por defecto de la pgina web.
Hoy en da su uso es casi nulo, ya que est casi eliminada debido a los estilos.
size=tamao
netscape 1
microsoft 1
html 3
Indica el tamao. Puede ser absoluto (7) o relativo (+2). Los tamaos van de 1 a
7. Indicar +2 como tamao significa subir dos tamaos a la letra.
netscape no
microsoft 4
html 4
color=cdigo
netscape no
microsoft 3
html 4
Color del texto. Los colores se pueden indicar con su nombre, valor hexadecimal
o valor RGB. (Ver apndice sobre colores al final del manual).
formato de prrafos
<p>
cierre s
netscape 1
microsoft 1
html 1
Etiqueta de prrafo normal. Hace que el texto que est contenido en esta
etiqueta sea considerado un prrafo. A ese texto se le colocar un salto de
prrafo al final (normalmente este salto equivale en espacio a colocar dos
etiquetas <br>)
align=alineacin
netscape 1
microsoft 1
html 3.2
<hx>
cierre s
netscape 1
microsoft 1
html 1
Etiqueta de cabeceras (de ttulos) en realidad son seis, h1, h2, h3, h4, h5 y h6.
Cuanto mayor es el nmero indica que mayor nivel de ttulo dentro del
documento ocupa.
align=alineacin
netscape 1
microsoft 1
html 3.2
<blockquote>
cierre s
netscape 1
microsoft 1
html 1
Coloca los prrafos en modo anotacin, es decir les hace una sangra.
<center>
cierre s
netscape 1
microsoft 1
html 3.2
<div>
cierre s
netscape 1
microsoft 1
html 3.2
Potentsima etiqueta que demuestra su potencial cuando se usa con las hojas de
estilo. Sin embargo en el estndar HTML, contiene el atributo align (ver etiqueta
p) que permite especificar alineacin izquierda, centrada o derecha a los prrafos
inmersos en la etiqueta.
listas
ul
cierre s
netscape 1
microsoft 1
html 1
microsoft 1
html 1
type=tipo
Indica que tipo de bolo se usar. Posibilidades:
Circle. Crculo {
Disk. Disco z
Square. Cuadrado
<ol>
cierre s
netscape 1
start=n
netscape 1
microsoft 1
html 1
Indica al navegador que inicie la lista por el nmero indicado. El nmero debe
indicarse en la forma arbiga (1, 2, 3, ...) aunque la lista, por ejemplo, muestre
letras.
type=tipo
netscape 1
A. Letras maysculas
a. Letras minsculas
1. Nmeros arbigos
I. Romanos en maysculas
microsoft 1
html 3.2
i. Romanos en minsculas
li
cierre s
netscape 1
microsoft 1
html 1
value=n
netscape 1
microsoft 1
html 3.2
type=tipo
netscape 1
microsoft 1
html 3.2
enlaces
<a>
cierre s
netscape 1
microsoft 1
html 1
href=URL
netscape 1
microsoft 1
html 1
name=nombre
netscape 1
microsoft 1
html 1
target=destino
netscape 2
microsoft 3
html 3.2
body
Esta etiqueta tiene mltiples atributos que se enumeran a continuacin:
bgcolor=cdigo color
netscape 1
microsoft 1
html 3.2
netscape 1
microsoft 1
html 3.2
text=cdigo color
Especifica un color para el texto normal de la pgina. Ese color tiene efecto para
todo el texto excepto para el que se indique otro color mediante la etiqueta font.
background=URL
netscape 1
microsoft 1
html 3.2
Especifica una imagen de fondo, la cual se repetir hasta llenar todo el fondo.
link=cdigo color
netscape 1
microsoft 1
html 3.2
microsoft 1
html 3.2
microsoft 1
html 3.2
microsoft 1
html 3.2
vlink=cdigo color
netscape 1
alink=cdigo color
netscape 1
alink=cdigo color
netscape 1
leftmargin=n
netscape 5
microsoft 3
html no
Pxeles que se dejan en el margen izquierdo. (por defecto se suelen dejar unos
10).
rightmargin=n
netscape 5
microsoft 3
html no
Pxeles que se dejan en el margen derecho. (por defecto se suelen dejar unos
10).
bottommargin=n
netscape 5
microsoft 4
html no
Pxeles que se dejan en el margen superior. (por defecto se suelen dejar unos
10).
topmargin=n
netscape 5
microsoft 3
html no
Pxeles que se dejan en el margen inferior. (por defecto se suelen dejar unos 10).
10
scroll=yes|no netscape no
microsoft 4
html no
imgenes
<img>
cierre no
netscape 1
microsoft 1
html 1
src =URL
netscape 1
microsoft 1
html 1
Atributo obligatorio que indica la direccin de la imagen. Puede ser una URL
relativa o absoluta.
align=Alineacin
netscape 1
microsoft 1
html 1
Left. Izquierda
Right. Derecha
Top. Arriba
Bottom. Abajo
Middle. Mitad
de
de
de
de
de
de
de
ejemplo
ejemplo
ejemplo
ejemplo
ejemplo
ejemplo
ejemplo
texto
texto
texto
texto
texto
texto
texto
Alineacin left
de
de
de
de
de
de
de
ejemplo
ejemplo
ejemplo
ejemplo
ejemplo
ejemplo
ejemplo
Alineacin right
lowsrc=URL
netscape 3
microsoft 4
html no
border =pxeles
netscape 1
11
microsoft 1
html 1
width=anchura
Ancho de la imagen. Puede indicarse en pxeles o en porcentaje.
height=altura
Altura de la imagen. Puede indicarse en pxeles o en porcentaje.
hspace=pixeles
Espacio en pxeles que la imagen dejar a su izquierda y derecha.
vspace=pixeles
Espacio en pxeles que la imagen dejar arriba y abajo.
alt=texto
netscape 1
microsoft 1
html 1
tablas
Las tablas son elementos que estn compuestos de filas y columnas. Se emplean
para conseguir maquetaciones complejas. Formato:
<table> principio de la tabla
<tr> primera fila
<th>contenido de la celda</th> celda de cabecera
...
<td>contenido de la celda</td> primera celda
<td> contenido de la celda</td> segunda celda
...resto de celdas....
</tr>
<tr>
<td>...</td>
....
</tr>
....resto de filas....
</table>
<table>
cierre s
netscape 1
microsoft 1
html 3.2
align=alineacin
netscape 1
microsoft 1
html 3.2
microsoft 1
html 3.2
width=ancho
netscape 1
12
height=altura
netscape 1
microsoft 1
html 3.2
netscape 1
microsoft 3
html 3.2
cellpadding=pxeles
Indica el espacio interior en las tablas (desde el borde de las celdas a el texto).
cellspacing=pxeles
netscape 1
microsoft 3
html 3.2
netscape 1
microsoft 1
html 3.2
border=pxeles
Indica el nmero de pxeles que mide el borde. Un valor 0 indica que no hay
borde.
bordercolor=cdigo color
netscape 4
microsoft 3
html 4
netscape 4
microsoft 3
html no
background=URL
Especifica una imagen de fondo, la cual se repetir hasta llenar toda la tabla.
bgcolor=cdigo color
netscape 3
microsoft 4
html 4
<tr>
cierre s
netscape 1
microsoft 1
html 3.2
height=altura
netscape no
microsoft 4
html no
netscape 4
microsoft 4
html 4
align=alineacin
Indica la alineacin horizontal del contenido de las celdas de la fila (left, center o
right)
valign=alineacin
netscape 4
microsoft 4
html 4
Indica la alineacin horizontal del contenido de las celdas de la fila. Puede ser top
(alineacin superior), middle (alineacin media) o bottom (alineacin inferior).
bgcolor=cdigo color
netscape 3
microsoft 4
html 4
netscape 4
microsoft no html no
background=URL
Especifica una imagen de fondo, la cual se repetir hasta llenar toda la fila.
bordercolor=cdigo color
netscape no
13
microsoft 4
html no
<td>
cierre s
netscape 1
microsoft 1
html 3.2
Indica el principio de una celda de una tabla. TD es una etiqueta interior a TR.
width=altura
netscape no
microsoft 4
html no
rowspan=n
Hace que la celda se combine a travs del nmero de filas indicadas por n. As
<TD rowspan=4>. Hace que la celda se una con las tres filas siguientes,
formando una celda que ocupar 4 filas.
colspan=n
Hace que la celda se combine a travs del nmero de columnas indicadas por n.
As <TD colspan=4>. Hace que la celda se una con las tres columnas siguientes,
formando una celda que ocupar 4 columnas.
<table width="350" height="200">
<tr height="80">
<td rowspan=2 bgcolor="#808080"> </td>
<td bgcolor=#cccccc> </td>
<td bgcolor="#333333"> </td>
</tr>
<tr height="120">
<td colspan="2" bgcolor="#666666"> </td>
</tr>
</table>
Ese cdigo da como resultado esta tabla:
align=alineacin
netscape 1
microsoft 1
html 3.2
14
valign=alineacin
netscape 1
microsoft 1
html 3.2
Indica la alineacin horizontal del contenido de la celda. Puede ser top (alineacin
superior), middle (alineacin media) o bottom (alineacin inferior).
bgcolor=cdigo color
netscape 3
microsoft 3
html 3.2
netscape no
microsoft 3
html no
background=URL
Especifica una imagen de fondo, la cual se repetir hasta llenar toda la celda.
bordercolor=cdigo color
netscape no
microsoft 4
html no
<th>
cierre s
netscape 1
microsoft 1
html 3.2
Define una celda de cabecera. Normalmente estas celdas son reconocidas como
ttulos de tabla por los navegadores y stos colocan como formato, su contenido
en negrita.
marcos
Los marcos permiten realizar pginas complejas en las cuales, el rea de la
ventana se divide en zonas. Cada zona (marco) muestra el contenido de una
determinada pgina.
Su ventaja est en que al cargar una pgina, slo se modifica un marco y no
todos. Su desventaja est es que slo los navegadores modernos son capaces de
usarles y en que hay muchas operaciones que no funcionan correctamente en
estas pginas.
Un problema grave ocurre cuando se intenta localizar una pgina con marcos
desde un buscador. Los buscadores desglosan cada pgina que forma el conjunto
de marcos (a fin de cuentas una pgina de marcos en realidad muestra varias
pginas a la vez) con lo que al hacer clic se muestra una pgina y no todo el
conjunto; con lo que la composicin original de la pgina se pierde.
Por todo ello este tipo de pginas tiene muchos detractores. Pese a todo,
una pgina de marcos posee el siguiente formato:
<html>
<head>
<title>Ttulo de la pgina</title>
....
</head>
<frameset ...posicin de los marcos...>
<frame src=URL primer marco name=nombremarco>
<frame src=URL segundo marco name=nombremarco>
...
</frameset>
<noframes>
<body>
15
<frameset>
cierre s
netscape 2
microsoft 3
html 4
rows=especificacin de filas
netscape 2
microsoft 3
html 4
cols=especificacin de filas
netscape 2
microsoft 3
html 4
frameborder=yes|no
netscape 3
microsoft 3
html no
16
border=tamao
netscape 3
microsoft 4
html no
microsoft 4
html no
bordercolor=color
netscape 3
<frame>
cierre s
netscape 2
microsoft 3
html 4
src=URL
netscape 2
microsoft 3
html 4
name=nombre
netscape 2
microsoft 3
html 4
Nombre del marco. Se utiliza para identificar cada marco. El atributo target de la
etiqueta a utiliza este nombre para mostrar un enlace en un determinado marco.
noresize
netscape 2
microsoft 3
html 4
No permite el cambio de tamao del marco. El tamao del marco ser fijo y el
usuario no podr cambiarlo.
scrolling=Yes|No|Auto
netscape 2
microsoft 3
html 4
etiquetas de cabecera
Van colocadas en el apartado HEAD.
base
cierre no
netscape 1
microsoft 1
html 1
href=URL
netscape 1
microsoft 1
html 1
target=destino
netscape 2
microsoft 3
html 4
Indica cul es el destino por defecto de los hipervnculos para todos los
enlaces. (Ver etiqueta A).
17
meta
Se coloca en la cabecera y sirve para indicar informacin sobre la propia pgina
(lenguaje, autor, caducidad, ...). No es parte del estndar HTML, pero s es
recomendable su utilizacin. Ejemplos:
<meta name=author content=Jorge Sanchez>
<meta name=generator content=Homesite 5>
<meta name=lang content=es>
<meta name=description content=Pgina sobre Palencia>
<meta name=keywords content=Palencia, Castilla,
monumentos, ciudad, castellana, carrin>
En todos los ejemplos anteriores, se utiliza con el atributo name. Sin embargo,
esta etiqueta puede realizar operaciones http con ayuda de su atributo httpequiv. Ejemplos:
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1"> <!codificacin espaola -->
<meta http-equiv="Content-Language" content="es-ES">
<!lenguaje espaol de Espaa -->
<meta http-equiv="Refresh" content="3">
<!La pgina se recarga cada tres segundos-->
<meta http-equiv="Refresh"
content="3;URL=http://www.elpais.es>
<!A los tres segundos se carga lapgina de EL Pas-->
<meta http-equiv="PICS-Label"
content='(PICS-1.1 "http://www.classify.org/safesurf/" l gen
true for "http://www.w3.org" by "philipd@w3.org" r (SS~~000
1 SS~~100 1))' >
<!Informacin sobre el contenido de la pgina-->
<meta http-equiv="Page-Enter"
content="revealTrans(Duration=3.0,Transition=2)">
<!Realiza un efecto de transicin de 3 segundos al entrar
en la pgina. Slo funciona en Explorer-->
<meta http-equiv="Page-Exit"
content="revealTrans(Duration=3.0,Transition=2)">
<!Realiza un efecto de transicin de 3 segundos al salir de
la pgina. Slo funciona en Explorer-->
18