Lenguaje HTML - Pello Xabier

Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
Lenguaje HTML
Manual de lenguaje HTML a travs de ejemplos +
referencia rpida de etiquetas y propiedades de las
hojas de estilos CSS2
Instituto Cuatrovientos Pamplona/Iruea

http://www.cuatrovientos.org
Autor: Pello Xabier Altadill Izura
Asignatura: DIRE
http://dire.cuatrovientos.org
Distribuido bajo licencia Copyleft.
http://creativecommons.org/licenses/by/2.0/es/legalcode.es
Lenguaje HTML
1.Introduccin............................................................................................................................................3
2.Texto bsico............................................................................................................................................5
Cabeceras, <H1>,<H2>,..,<H6>............................................................................................................5
Prrafos y saltos de linea <p>, <br>......................................................................................................6
Formatos bsicos, <b>, <i>, <pre> y lineas <hr>.................................................................................7
Caracteres especiales é, ©,.............................................................................................10
Atributos de <body>............................................................................................................................11
Fuentes <FONT>.................................................................................................................................12
Lneas horizontales <hr>.....................................................................................................................14
Etiquetas no estandar...........................................................................................................................15
3.Imgenes...............................................................................................................................................17
Insertar imgenes en un documento<img>..........................................................................................17
Imagen como fondo de pgina............................................................................................................18
4.Enlaces..................................................................................................................................................20
Enlaces o hipervnculos a otras pginas.<a>.......................................................................................20
Atributos de body para hipervinculos..................................................................................................21
Enlaces internos en una pgina............................................................................................................22
5.Listas.....................................................................................................................................................25
Listas no numeradas o desordenadas <ul>, <li>.................................................................................25
Listar ordenadas...................................................................................................................................26
Listas anidadas....................................................................................................................................27
6.Tablas....................................................................................................................................................29
Tablas simples <TABLE>, <TR>, <TD>...........................................................................................29
Atributos de las tablas.........................................................................................................................31
Uniendo celdas: Colspan y Rowspan..................................................................................................33
Etiquetas de zona de tabla: <TH>, <THEAD>, <TBODY>, <TFOOT>............................................35
Tablas anidadas...................................................................................................................................38
Maquetacin de documentos con tablas..............................................................................................40
7.Formularios...........................................................................................................................................45
Formularios bsico: <FORM>, <INPUT>, texto y botones...............................................................45
Formularios maquetados en una tabla y <TEXTAREA>....................................................................46
Listas desplegables <SELECT>, <OPTION>.....................................................................................47
Campos tipo CHECKBOX y RADIO.................................................................................................50
Campos ocultos y de envo de ficheros...............................................................................................53
Otros elementos: imgenes, <LEGEND>, <LABEL>........................................................................54
8.Marcos...................................................................................................................................................57
Definicin de Marcos o Frames: <FRAMESET>, <FRAME> y <NOFRAMES>............................57
Marcos o Frames en columnas............................................................................................................59

Marcos o Frames anidados..................................................................................................................60
Marcos internos: <IFRAME>.............................................................................................................62
9.Etiquetas META....................................................................................................................................64
Ejemplos bsicos, <META>...............................................................................................................64
Redireccin automtica: refresh..........................................................................................................65
10.Hojas de estilos...................................................................................................................................67
Insercin de estilos <STYLE>............................................................................................................67
Hojas de estilos externas, <LINK>.....................................................................................................68
Clases de estilos y atributo class.........................................................................................................69
Identificador de estilos y atributo ID...................................................................................................72
Pseudo-clases :hover, :visited, :link, :active........................................................................................74
Estilos en listas....................................................................................................................................77
Estilos en formularios..........................................................................................................................79
Maquetacin con bloques <DIV> y estilos.........................................................................................82
Resumen de aplicacin de estilos CSS................................................................................................84
11.XHTML...............................................................................................................................................88
12.Referencia HTML...............................................................................................................................89
13.Referencia CSS2.................................................................................................................................93
14.Bibliografa, enlaces..........................................................................................................................107
1.Introduccin
HTML: HyperText Markup Language
HTML es un lenguaje de marcas para crear documentos de hipertexto, el formato ms extendido y
fundamental de la World Wide Web. Se basa en una serie de marcas que aportan propiedades a su
contenido, como por ejemplo:
<b>Esto seria un texto en negrita</b>
<a href=http://www.google.es>Enlace a google</a>
Como se puede ver, aadiendo las marcas <b> y <a> damos al texto simple el formato o la utilidad que
queramos.
HTML hunde sus raices en un lenguaje de proposito mas general llamado SGML. Con la red Internet
en funcionamiento desde hacia dcadas, ya en el ao 1991 y en el mbito de la comunidad cientfica
Tim Berneers Lee popone la idea de crear una red de paginas entrelazadas. En 1993 se termina de
desarrollar el primer navegador llamado Mosaic, que era capaz de interpretar el lenguaje hipertexto y
mostrarlo de manera visual. Y el lenguaje que se empleo y se emplea para los documentos de la web es
el HTML.
A partir de ah surgieron nuevos navegadores (Netscape, mas tarde Internet Explorer), y nuevas
especificaciones del lenguaje HTML. Surgieron lenguajes para dar una apariencia dinamica y mas
capacidad de interaccin con el usuario como javascript, VBScript, los objetos embebidos en paginas
como los applets, activeX, flash, etc..
Pero al margen de todos los aadidos el lenguaje HTML ha seguido siendo lo mismo: un lenguaje para
crear documentos, que nada tiene que ver con un lenguaje de programacin al uso. Actualmente la
especificacion de HTML se encuentra en la versin 4.01 y paralelamente han ido surgiendo otros
lenguajes como XHTML y mecanismos de formato como las hojas de estilos CSS. Quien marca (nunca
mejor dicho) las pautas y las normas del estndar es la W3C o Consorcio de la WWW.
Para estar al da de los cambios en especificaciones, ver ejemplos, etc no esta dems visitar su pgina
web: http://www.w3.org
Un documento HTML no es ms que un archivo de texto con las marcas que dicta el estndar.
Bsicamente suele estar formado por una cabecera y un cuerpo con el contenido de la pgina que ve el
usuario. Existen editores sofisticados tipo WYSIWYG (=lo que ves es lo que consigues, son editores
visuales como Dreamweaver, Mozilla-composer, Nvu, Frontpage, ...), pero una pgina simple se puede
crear con un editor de texto cualquiera.
Introduccin - Introduccin
Veamos la primera pgina HTML con las etiquetas mas bsicas:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 00 :: Mi primera página :</title>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>

Una página HTML<br>
<br>
</body>
</html>
Sencillo no?
Primero se especifica el tipo de documento (<!DOCTYPE...>), y seguidamente se van metiendo las
marcas o tags HTML para definir la pgina. En general todas las marcas que se abren se tienen que
cerrar manteniendo el orden y la jerarqua. En los documentos se empieza por <HTML> y se acaba con
</HTML>. La cabecera empieza con <HEAD> y termina con </HEAD>. Y lo mismo con la etiqueta
<BODY>. Las etiquetas a su vez pueden tener atributos que dan mayores opciones al formato y al
comportamientos de las mismas (colores, tamaos, anchura, altura, etc...)
Esto sera lo que veramos en el navegador:
Primera pgina
Introduccin - Introduccin
2.Texto bsico
Bien, ya sabemos que es un documento HTML y conocemos las etiquetas bsicas para crear uno:
La definicin de tipo de documento:
La cabecera con su titulo...

<title>DIRE - 2º DAI :: HTML :: 01 :: Página con cabeceras::</title>
... y la definicin del juego de caracteres que necesita la pagina (depende del idioma)
Podemos saltarnos esas especificacin y la pgina aparentemente sera la misma, pero si queremos
asegurarnos que la pgina se vea correctamente en cualquier navegador de cualquier ordenador de
cualquier lugar del mundo conviene no obviarlas.
Las etiquetas HTML pueden escribirse en mayusculas o minusculas o
Importantemezclando
ambas, el navegador las interpretara igual. Por ejemplo:
<Body> = <body> = <BODY>
Texto bsico - Texto bsico

Bueno, una vez que la cabecera esta completa, ya podemos meter contenido dentro de las etiquetas
body, En esta captulo veremos las etiquetas, marcas o tags ms bsicas para el contenido de tipo texto.
En un documento HTML como poco podemos meter texto. Existen unas etiquetas bsicas para poner
encabezados, marcar parrafos, meter saltos de linea, etc...Cabeceras <H1>,<H2>,..,<H6>
Cabeceras, <H1>,<H2>,..,<H6>
Con las etiquetas de cabecera podemos crear ttulos, de mayor (<H1>) a menor tamao (<H6>).
Veamos un ejemplo sencillo:
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 01 :: Página con cabeceras::</title>

</head>
<body>


<h1>Esto es una cabecera de tamaño 1</h1>
</body>
</html>
Y este sera el resultado:
Texto bsico - Cabeceras, <H1>,<H2>,..,<H6>
Prrafos y saltos de linea <p>, <br>

A la hora de meter cantidades de texto grandes conviene meter saltos de linea u organizar el texto en
parrafos, como poco para facilitar la lectura. En HTML se pueden crear prrafos con la etiqueta <p> y
meter saltos de linea con la etiqueta <br>
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 02 :: Párrafos y saltos de linea ::
</title>
</head>
<body>
<h1>Párrafos y saltos de linea</h1>

<p>Internet: Internet se define generalmente como la red de redes mundial.
Las redes que son parte de esta red se pueden comunicar entre sí
a través de un protocolo denominado, TCP/IP (Transmission Control
Protocol/ Internet Protocol). Fue concebida a fines de la década
de 1960 por el Departamento de Defensa de los Estados Unidos; más
precisamente,
por la ARPA. Se la llamó primero ARPANET y fue pensada
para cumplir
funciones de investigación</p>
Texto bsico - Prrafos y saltos de linea <p>, <br>

<p> Según una revista alemana de informática, sólo con
cambiar 2 bytes del archivosetupreg.hiv de los archivos del CD de Windows
convierte nuestro Windows XP Home en Professional. </p>

Preparados para el salto<br>
Y otro salto<br>
Y ahora triple salto<br>
<br>
<br>
Alehop!
</body>
</html>
Veamos como quedara el documento:
Formatos bsicos, <b>, <i>, <pre> y lineas <hr>

Muchas veces es necesario dar cierto formato para resaltar o diferenciar el texto. Los mas bsicos, la
negrita y la cursiva se consiguen con <b> e <i> respectivamente.
Tal y como se ve en el siguiente ejemplo:
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 03 :: Formatos básicos::</title>
Texto bsico - Formatos bsicos, <b>, <i>, <pre> y lineas <hr>

9

</head>
<body>
<h1>Formatos básicos</h1>

<br>
Esta asignatura me tiene <b>negro</b> <br>
<h3>Frase celebre</h3>
<p>
<i>640Kb de memoria es más que suficiente para cualquier
persona</i><br>
Bill Gates
</p>

<hr>
<pre>
La World Wide Web (del inglés, Telaraña Mundial), la Web WWW,
es un sistema de hipertexto que funciona sobre Internet.
Para ver la información se utiliza una aplicación llamada navegador
web para extraer elementos de información (llamados "documentos" o
"páginas web")
de los servidores web (o "sitios") y mostrarlos en la pantalla del usuario.
El usuario puede entonces seguir hiperenlaces que hay en la página
a otros documentos o incluso enviar información al servidor para
interactuar
con él.
Y en esta asignatura nos moveremos por la WWW.
</pre>
</body>
</html>
En este documento se ven otras etiquetas:

<hr>: crea una linea horizontal en la pgina, muy til para dividir el documento.
<pre>: nos permite introducir un texto ya formateado (con sus saltos, sus tabulaciones, sus espacios)
y al mostrarlo visualmente se respeta ese formato. Muy til por ejemplo para meter texto largo sin
tener que preocuparse por saltos de linea ni nada, o para meter codigo de programas, etc..
Esto es lo que veramos:

10
El siguiente ejemplo trata de emular una prueba de visin de un oftalmlogo. Se puede hacer de
muchas maneras (con tamaos de fuentes, con estilos), pero aqu se crea simplemente con cabeceras.
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 04 :: La vista ::</title>
</head>
<body>

<center>
<h1>N G H I</h1>
<h2>E T Q W</h2>
<h3>C V G Y</h3>
<h4>L K Y R</h4>
<h5>W T O V</h5>
<h6>Z N M W</h6>
</center>
</body>
</html>

11
Y as es como quedara:
Caracteres especiales é, ©,..

Existen una serie de caracteres que no se pueden meter dentro del texto en un docuemento HTML. Son
todos aquellos que se salen del alfabeto ingls las ees y las acentuaciones de cualquier tipo como las
tildes espaolas. Para poder sacar esos caracteres HTML dispone de unas constantes especificas que
nos permiten incluirlos en el documento. Esas constantes comienzan por el simbolo & y terminan con
el ;. Estos son los ms usados:
á =
é =
í =
ó =
ú =
Á =
É =
Í =
Ó =
Ú =
Texto bsico - Caracteres especiales é, ©,..
12
ñ =
Ñ =
© =
€ =
Existen ms caracteres especiales y la mayora de ellos se insertan usando un cdigo hexadecimal.
En la siguiente pgina podemos ver su uso:

<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 00 :: Caracteres especiales ::</title>
</head>
<body>
<h1>Caracteres especiales</h1>
<h1>á é í ó ú</h1>
<h1>ñ &tilde; © > < ®
ü</h1>
</body>
</html>
Y as es como los veramos:
Atributos de <body>
Como decamos en la introduccin, la etiquetas HTML pueden ir acompaadas de atributos. En el caso
de la etiqueta body esos atributos marcan propiedades fundamentales como los colores de todo el
Texto bsico - Atributos de <body>
13

documento. Veamos su uso:
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 01 :: Atributos de <body> :
Colores ::</title>
</head>
<body bgcolor="green" text="white">
<H1>
El color de fondo se establece con bgcolor y el texto con text
</H1>
<pre>
#include <stdio.h>
int main (int argc, char *argv[], envp *char[]) {
int i = 0;
printf("Esto es codigo C\n");
return 1;
}
</pre>
</body>
</html>
Texto bsico - Atributos de <body>
14
Fuentes <FONT>
Mediante la etiqueta FONT, en desuso segn el estndar, podemos aplicar modificaciones al texto de
un documento HTML. Los atributos de la etiqueta FONT giran en torno al formato de fuente como el
tamao, el color, la familia de fuente, etc...
Hoy en da es mejor aplicar estilos dentro de bloques <DIV> o <SPAN>.
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 02 :: Jugando con las fuentes ::</title>
</head>
<body bgcolor="black" text="white">
<h1>Jugando con las FUENTES</h1>

<font size="14" color="aqua">AQUA</font>
<font size="14" color="black">BLACK</font>
Texto bsico - Fuentes <FONT>
15

<font
<font
<font
<font
<font
<font
<font
<font
<font
<font
<font
<font
<font
<font
size="14"
size="14"
size="14"
size="14"
size="14"
size="14"
size="14"
size="14"
size="14"
size="14"
size="14"
size="14"
size="14"
size="14"
color="blue">BLUE</font>
color="fuchsia">FUCHSIA</font><br>
color="gray">GRAY</font>
color="green">GREEN</font>
color="lime">LIME</font>
color="maroon">MAROON</font><br>
color="navy">NAVY</font>
color="olive">OLIVE</font>
color="purple">PURPLE</font>
color="red">RED</font><br>
color="SILVER">SILVER</font>
color="TEAL">TEAL</font>
color="yellow">YELLOW</font>
color="white">WHITE</font><br>
<br><br>
<font color="red" face="Verdana">Esto lo pongo en rojo y con fuente Verdana usando
<FONT></font>
<br><br>
<!-La etiqueta font esta desfasada y conviene no usarla
Con qu la sustituimos? con <DIV>
-->

<div style="color:red; font-family:verdana">
Esto lo pongo en rojo y en Verdana usando la etiqueta <DIV> y su atributo
style
</div>
</body>
</html>
Texto bsico - Fuentes <FONT>
16
Lneas horizontales <hr>

En ocasiones puede resultar interesante dividir partes de documento de manera rapida y simple con una
liena horizontal. HTML tiene una etiqueta para la linea : HR
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 03 :: Lineas horizontales ::</title>
</head>
<body>
<h1>Jugando con lineas horizontales</h1>
<h2>Linea normal <hr></h2>
<hr>
<h2>Linea coloreada <hr color="red"></h2>
<hr color="red">
<h2>Linea corta y coloreada <hr color="green" width="80%"></h2>
Texto bsico - Lneas horizontales <hr>
17

<hr color="green" width="75%">
<h2>Linea gorda (en pixels) y coloreada <hr color="red" size="15"></h2>
<hr color="red" size="15">
<hr color="blue" size="1">
<h2>Linea corta, alineada y coloreada <hr color="green" align="right"
width="80%"></h2>
<hr color="green" align="right" width="75%">
</body>
</html>
Etiquetas no estndar
Existen una serie de etiquetas no especificadas por el estndar que los navegadores han incluido en la
interpretacin del HTML. Es mejor evitar este tipo de etiquetas ya que no se puede asegurar la
compatibilidad con todos los navegadores. A continuacin vemos algunos ejemplos:
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 05 :: Etiquetas no estándar ::
Texto bsico - Etiquetas no estndar
18

</title>
</head>
<body>
<h1 align="center">Etiquetas fuera del estándar</h1>


<marquee><h2>Esto es un <marquee> Y NO ES ESTÁNDAR</h2></marquee>

<h1>El sonido de fondo: etiqueta <bgsound></h1>
<bgsound src="sonido.wav" loop="10">
</body>
</html>
Texto bsico - Etiquetas no estndar
19
3.Imgenes
Insertar imgenes en un documento es muy simple, no hay mas que crear una etiqueta img y especificar
el nombre de archivo de imagen que nos interesa. Hay que tener mucha precaucin con los nombres de
ficheros ya que un error de cualquier tipo provoca que la imagen no se cargue correctamente (cuidado
con la las maysculas y minsculas).
Conviene recordar tambin que las imgenes pueden cargar mucho un documento HTML hasta el
punto de hacer la descarga de una pgina ms lenta o ralentizar el navegador. Por eso conviene no
utilizar archivos de imgenes muy grandes (mas all de 300K por ejemplo) y en cualquier caso
retocarlas para que no sean muy pesadas: reducir tamao, reducir colores, cambiar formato, etc..
Los formatos ms habituales para la web son gif, jpg y png. El gif es ms peculiar ya que permite
efectos como la transparencia y las imgenes animadas. El jpg comprime las imgenes y facilita que las
pginas sean ms ligeras, aunque no es un formato del todo libre; para eso ya esta el png.
Insertar imgenes en un documento<img>

Es muy sencillo, basta con poner la etiqueta <img src=nombre.gif> y la imagen se incluir en el
documento. La etiqueta tiene atributos para poner borde a la imagen(border), cambiar el tamao (height
y witdth), ponerle un titulo (title), un texto alternativo si la imagen no sale (alt).
Veamos un ejemplo simple:
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 06 :: Imágenes ::</title>
</head>
<body>
<h1 align="center">Insertando imágenes en un documento HTML</h1>
<div align="center">
Esto que se ve aquí es el logotipo

<img src="logo-cuatrovientos.gif" border=0 title="logotipo modificado">
del instituto Cuatrovientos
</div>
<br>
<br>
<img src="logo-cuatrovientos.gif" border=0 title="logotipo" align="middle">
Imgenes - Insertar imgenes en un documento<img>

20

</div>
<br>
<img src="logo-cuatrovientos.gif" border=0 title="logotipo" align="middle"
height="300" width="600">
</div>
<br>
</body>
</html>
Imagen como fondo de pgina

Basta con usar el atributo background aunque an as no da mucho juego. Por eso conviene usar las
hojas de estilos que veremos ms adelante.
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 07 :: Fondo de página ::</title>
</head>

<body background="logo-cuatrovientos.gif">
<h1 align="center">Una imagen como fondo de documento</h1>
Imgenes - Imagen como fondo de pgina
21

</body>
</html>
Con una imagen grande tambin se pueden definir reas con las etiquetas <map> y <area> con las que
determinadas partes de la imagen pueden enlazar a pginas distintas, o invocar funciones distintas.
Crear una imagen con zonas con un editor de texto simple es bastante complejo, es mejor usar un editor
WYSIWYG.
Imgenes - Imagen como fondo de pgina
22
4.Enlaces
Los enlaces. Los links o hipervnculos son el fundamento de la World Wide Web. Con ellos se enlaza
un documento tras otro, se enlazan contenidos como imgenes, msica, vdeos, etc... Crear un enlace es
muy sencillo. Basta con usar la etiqueta <a> y especificar un destino.
Enlaces o hipervnculos a otras pginas.<a>

Mediante la etiqueta <a href=direccion>contenido enlazado</a> se pueden crear enlaces. El
contenido enlazado no tiene porque ser un texto, puede ser cualquier elemento de un documento HTML
como imgenes, tablas, filas, bloques div, etc...
Veamos un ejemplo simple:
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 00 :: Enlaces ::</title>
</head>
<body>
<h1>Enlaces o HIPERVINCULOS</h1>
<h1><a href="http://www.w3.org">texto enlazado<A></h1>
<a href="dire_html00.html">Enlace a si misma</a>

<br>
<br>

<a href="http://www.google.es">Ir a Google</a>
</body>
</html>
Enlaces - Enlaces o hipervnculos a otras pginas.<a>

23
Atributos de body para hipervinculos

Los hipervnculos pueden mostrar distintos colores aparte de los predeterminados. Estos colores pueden
ser distintos dependiendo de las circunstancias de la navegacin (un enlace ya visitado, activo, etc...)
En el siguiente ejemplo vemos el uso de esos atributos y adems una serie de URL que se pueden crear
(a sitios ftp, para escribir correo, etc...)
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 01 :: Atributos de <body> para
hipervinculos ::</title>
</head>
<!-Atributos para BODY
link: color de los enlaces que no se han pinchado
vlink: color para los enlaces ya visitados
alink: color para los enlaces activos
-->
<body link="red" vlink="green" alink="black">
<H1>
Color de los hipervinculos y tipos
</H1>
<a href="dire_html01.html">Enlace a si mismo</a> <br> <br>
<a href="http://www.barrapunto.org">Ir a BARRAPUNTO</a> <br> <br>
<a href="http://www.barrapunto.org">Ir a SLASHDOT</a> <br> <br>
Enlaces - Atributos de body para hipervinculos
24

<a href="ftp://ftp.rediris.es">Ir a SERVIDOR FTP REDIRIS</a> <br> <br>

<a href="mailto:direccion@cambiame.com">Escribeme un correo</a><br>
<a href="mailto:direccion@cambiame.com?subject=me gusta tu web">Escribeme un
correo con asunto incluido</a> <br> <br>
Pincha en la imagen para ir a cuatrovientos
<a href="http://www.cuatrovientos.org"><img src="logo-cuatrovientos.gif"
title="4vientos"></a>
</body>
</html>
Enlaces internos en una pgina

Un enlace interno, tambin llamados inline, sirve para desplazarnos dentro de un mismo documento de
un punto a otro. Es muy prctico en caso de pginas largas donde necesitamos movernos de un extremo
a otro de manera rpida y fcil.
Para crear un enlace interno se necesitan dos elementos:
La definicin del anchor : <a name=arriba>Esto es arriba</a>
El enlace a ese anchor: <a href=#arriba>subir arriba</a>
En la definicin del anchor no hay porque poner texto. Como se puede apreciar, el enlace interno va
Enlaces - Enlaces internos en una pgina
25

precedido del smbolo #. Si metemos un enlace a un documento externo y queremos dirigirnos a una
parte concreta tambin podemos especificar el anchor como por ejemplo:
http://www.cuatrovientos.org/documento.html#abajo
Veamos un ejemplo:
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 02 :: Enlaces internos del documento ::
</title>
</head>
<body>
<a name="arriba">Estamos arriba</a>
<div align="center"><h1>Enlaces internos del documento</h1></div>
<h1>Marcamos una zona del documento con <a name="nombre"> zona
</a></h1>
<h1>Y la enlazamos con <a href="#nombre"> ir a zona </a></h1>
<br>
<a href="#abajo">Quiero ir abajo!!</a>

<pre>
Winamp 5.05:
* Security bug fix
* Fix for upside down videos through DirectShow
Winamp 5.0:
* Support for classic Winamp 1.x/2.x/2.9x skins and Winamp 3 ("Modern") skins
* Support for classic Winamp 1.x/2.x/2.9x skins and Winamp 3 ("Modern") skins
.... etc
</pre>
<a name="abajo">Estamos abajo</a> <br>
<a href="#arriba">Quiero ir arriba!!</a>
</body>
</html>
26
27
5.Listas
Las listas son otro elemento bsico de cualquier documento. HTML provee varias opciones para crear
listas tanto ordenadas como desordenadas. Las listas se basan en dos etiquetas: <ul> o <ol> para el
comienzo y final de la lista (segn sean ordenadas o desordenadas) y <li> para cada uno de los
elementos de la lista.
Listas no numeradas o desordenadas <ul>, <li>

Veamos un ejemplo de listas simples.
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 03 :: Listas ::</title>
</head>
<body>
<h1>Listas simples</h1>
En este curso aprenderás
<ul type="square">
<li>HTML</li>
<li>Javascript</li>
<li>Lenguaje ASP</li>
<li>Lenguaje PHP</li>
<li>Plataforma .NET</li>
</ul>
<h1>Probad atributo type con valores: disc, circle, square</h1>

<ul type="circle" compact>
<li>HTML</li>
<li>Javascript</li>
<li>Lenguaje ASP</li>
<li>Lenguaje PHP</li>
<li>Plataforma .NET</li>
</ul>
</body>
</html>
Listas - Listas no numeradas o desordenadas <ul>, <li>

28
Listar ordenadas
Mediante la etiqueta <ol> podemos definir una lista pero ordenada. En las listas ordenadas se incluyen
nmeros u otras formas de orden como a, b, c,... El modo de numerar se aplica con el atributo type
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 04 :: Listas ordenadas ::</title>
</head>
<body>
<h1>Una lista ordenada: <ol></h1>

<hr noshade>
<font size="6+">
Ingredientes para un gazpacho
<ol>
<li>Tomates</li>
<li>Pepino</li>
<li>Pimiento verde</li>
<li>Ajo</li>
Listas - Listar ordenadas
29

<li>Cebolla</li>
<li>Unas migas</li>
<li>Sal vinagre y aceite</li>
</ol>
</font>
<hr>
<h1>Probar atributo type de <ol> con estos valores</h1>
<font size="6+">
<ul>
<li>A</li>
<li>a</li>
<li>I</li>
<li>i</li>
<li>1</li>
</ul>
</font>
</body>
</html>
Listas - Listar ordenadas
30
Listas anidadas
Las listas tambin se pueden anidar unas dentro de otras. Se puede hacer que la numeracin siga la
lgica de listas y sublista? segn el estndar de CSS2 si, pero lo cierto es que al probarlo en distintos
navegadores no queda muy claro.
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 04 :: Listas anidadas ::</title>
</head>
<body>
<h1>Una lista ordenada: <ol></h1>

<hr noshade>
<font size="6+">
Índice del libro
<ol type="1">
<li>Tema1</li>
<ol type="1">
<li>Subtema1</li>
<li>Subtema2</li>
<ol type="a">
<li>Subtemaa</li>
<li>Subtemab</li>
</ol>
<li>Subtema3</li>
</ol>
<li>Tema2</li>
<li>Tema3</li>
<li>Tema4</li>
<ol type="1">
<li>Subtema1</li>
<li>Subtema2</li>
<li>Subtema3</li>
</ol>
<li>Tema5</li>
<li>Tema6</li>
<li>Tema7</li>
</ol>
</font>
</body>
</html>
Listas - Listas anidadas
31
Existen otro tipo de listas, las de definiciones (<dl>) pero su uso es muy poco habitual.
Listas - Listas anidadas
32
6.Tablas
Las tablas en HTML sirven, como es lgico, para mostrar informacin de manera ordenada pero
tambin se usan como herramienta de maquetacin bsica. A travs de las tablas anidadas podemos
dividir el documento en varias partes ordenadas como mens laterales, cabeceras, etc...
Por qu necesitamos una herramienta para maquetar?
La disposicin (layout) de los elementos en un documento HTML es seguida: si vamos metiendo
elementos (imgenes, prrafos, tablas)estos se pondrn uno detrs de otro sin control alguno de los
elementos. Con las tablas, como veremos en uno de los ejemplos podremos controlar la disposicin de
todos los elementos de la pgina, y aplicar distintos estilos.
Tablas simples <TABLE>, <TR>, <TD>

Para crear una tabla se utilizan tres etiquetas:
<TABLE> : esta etiqueta sirve para definir la tabla
<TR> : esta enmarca una fila
<TD>: y esta enmarca una celda
Por tanto para crear una tabla bsica debemos crear las etiquetas <TABLE>, por cada fila la etiqueta
<TR> y dentro de cada fila metemos las <TD> para especificar las celdas. Por defecto debemos meter
el mismo numero de celdas en cada fila ya que eso marca el numero de columnas de la tabla. Si
queremos unir columnas o filas haremos uso del atributo colspan y rowspan.
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 00 :: Tablas ::</title>
</head>
<body>
<h1>Tablas HTML</h1>
<h2>Se utilizan las etiquetas <table>, <tr> y <td></h2>
<hr size="1" color="black">


<table border="1">

<tr>

<td>Nombre</td>
<td>Apellidos</td>
<td>DNI</td>
<td>Edad</td>
Tablas - Tablas simples <TABLE>, <TR>, <TD>
33

</tr>
<tr>
<td>Juan</td>
<td>Palomo</td>
<td>33445532L</td>
<td>34</td>
</tr>
<tr>

<td>Darth</td>
<td>Vader</td>
<td>66666666H</td>
<td>26</td>
</tr>
<tr>
<td>Miguel</td>
<td>Indurain</td>
<td>45326853X</td>
<td>39</td>
</tr>
</table>
</body>
</html>
Y esto es lo que se vera
Tablas - Tablas simples <TABLE>, <TR>, <TD>
34
Atributos de las tablas

Las tablas cuentas con una serie de atributos para controlar tanto el aspecto visual (colores, tamaos,..)
como otras caractersticas propias de las tablas como el espacio entre celdas, los bordes, etc.
En el siguiente ejemplo se muestra el uso de alguno de estos atributos.
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 01 :: Atributos para tablas ::</title>
</head>
<body>
<h1>Atributos para Tablas HTML</h1>
<h2><TABLE></h2>
<font size="+2">
<ul>
<li>Borde (border=1)</li>
<li>cellspacing="0"</li>
<li>cellspadding="0"</li>
<li>width="80%"</li>
<li>align="center"</li>
</ul>
</font>

<table border="1" cellspacing="1" cellspadding="1" width="80%" align="center">
<tr bgcolor="blue" style="color:white">
<td>Nombre</td>
<td>Apellidos</td>
<td>DNI</td>
<td>Edad</td>
</tr>
<tr>
<td>Juan</td>
<td>Palomo</td>
<td>33445532L</td>
<td>34</td>
</tr>
<tr>
<td>Darth</td>
<td>Vader</td>
<td>66666666H</td>
<td>26</td>
</tr>
<tr>
Tablas - Atributos de las tablas
35

<td>Miguel</td>
<td>Indurain</td>
<td>45326853X</td>
<td>39</td>
</tr>
</table>
</body>
</html>
Uniendo celdas: Colspan y Rowspan

En ocasiones puede interesar unir celdas o columnas en una tabla, tanto por esttica como por
funcionalidad. Eso se consigue mediante los atributos colspan y rowspan; su aplicacin parece simple
pero hay que tener claro lo que se tiene y lo que se quiere conseguir, sobretodo si se hace con un editor
no-visual. Las herramientas WYSIWYG facilitan enormemente la tarea de fusin de celdas.
Veamos unos ejemplos sencillos.
Tablas - Uniendo celdas: Colspan y Rowspan
36

<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 02 :: Colspan y rowspan ::</title>
</head>
<body>
<h1>Uniendo celdas con colspan y rowspan</h1>
<h2>Efecto del colspan</h2>



<td rowspan="3">No se sabe</td>
</tr>
<tr>
<td>Darth</td>
<td>Vader</td>
<td>66666666H</td>
</tr>
<tr>
<td>Miguel</td>
<td>Indurain</td>
<td>45326853X</td>
</tr>
</table>
</body>
</html>
Y este sera el resultado de la unin:
38
Etiquetas de zona de tabla: <TH>, <THEAD>, <TBODY>, <TFOOT>

Estas etiquetas aparentemente no hacen nada, pero no es as. <THEAD>, <TBODY>, <TFOOT> se
utilizan para marcar filas concretas de la tabla como parte de la cabecera, el cuerpo o el pi de la tabla.
En el caso de <TH> su comportamiento es como el de una celda <TD> aunque se usa en la cabecera de
las tablas.
Como poco son muy tiles para aplicar estilos diferenciados en cada zona de la tabla. Las tablas
siempre suelen tener un color de fondo distinto el la cabecera o en el pie de tabla.
Aparte de eso, si se imprime un documento HTML con una tabla muy grande se conseguir un efecto
sorprendente: si el listado de la tabla ocupa varias paginas, el encabezado y el pie de las tablas
aparecer en todas ellas para facilitar el significado de cada campo.
Veamos un simple ejemplo:
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 03 :: Etiquetas dentro de las tablas ::
</title>
</head>
<body>
<h1>Etiquetas para delimitar partes de la tabla</h1>
Tablas - Etiquetas de zona de tabla: <TH>, <THEAD>, <TBODY>, <TFOOT>

39

<h2><TABLE></h2>
<font size="+2">
<ul>
<li>TH : equivalente a TD</li>
<li>THEAD : etiqueta para contener las filas de cabecera</li>
<li>TBODY : etiqueta para contener las filas del cuerpo de la tabla</li>
<li>TFOOT : etiqueta para contener el pie de tabla</li>
</ul>
</font>
<thead style="color:red; font-weight: bold">
<tr>
<td>Nombre</td>
<td>Apellidos</td>
<td>DNI</td>
<td>Edad</td>
</tr>
</thead>
<tbody>
<tr>
<td>Darth</td>
<td>Vader</td>
<td>66666666H</td>
<td>26</td>
</tr>
<tr>
<td>Juan</td>
<td>Palomo</td>
<td>33445532L</td>
<td>34</td>
</tr>
<tr>
<td>Darth</td>
<td>Vader</td>
<td>66666666H</td>
<td>26</td>
</tr>
<tr>
<td>Miguel</td>
<td>Indurain</td>
<td>45326853X</td>
Tablas - Etiquetas de zona de tabla: <TH>, <THEAD>, <TBODY>, <TFOOT>

40

<td>39</td>
</tr>
</tbody>
<tfoot style="font-weight:bold;color: white; background: black">
<tr>
<td colspan="4" align="center">Pie de tabla</td>
</tr>
</tfoot>
</table>
</body>
</html>
Tablas anidadas
Tablas - Tablas anidadas
41
Las posibilidades de anidacin de elementos en un documento HTML son infinitas y con las tablas no
poda ser menos. De hecho la maquetacin con etiquetas <TABLE> deriva siempre en tablas anidadas.
Veamos un ejemplo:
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 04 :: Tablas dentro de tablas</title>
</head>
<body>
<h1>Anidando tablas</h1>
<table border="2" cellspacing="1" cellspadding="1" width="80%"
align="center">
height="80%"

<tr>
<!-Donde se mete el contenido en las tablas? dentro de las celdas: TD
-->
<td style="vertical-align: bottom;" valign="bottom">
<table width="80%" height="90%" border="2">
<tr>
<td>celda1</td>
<td>celda2</td>
<td><img src="logo-cuatrovientos.gif" title=""></td>
</tr>
<tr>
<td>Ir a <a href="http://www.google.es">google</a></td>
<td>Celda3</td>
<td align="center" valign="center">
<table border="1" width="90%">
<tr>
<td>1</td>
<td>2</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</td>
</tr>
</table>
Tablas - Tablas anidadas
42

</td>
</tr>
</table>
</body>
</html>
Maquetacin de documentos con tablas

Para la maquetacin o diseo general de las paginas web se pueden utilizar entre otras soluciones las
Tablas - Maquetacin de documentos con tablas
43

tablas HTML. Es la forma ms sencilla ya que no requiere conocimientos de hojas de estilos. Se suele
partir de tablas que ocupan todo el espacio de pgina y de ah se pasa a tablas que definen partes ms
concretas de la misma.
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 05 :: Maquetación con TABLAS</title>
</head>
<body>
<h1>Las tablas como herramienta de maquetación</h1>
<table border="2" cellspacing="1" cellspadding="1" width="100%" height="80%"
align="center">
<tr>
<td height="10%" width="20%"> </td>
<td width="60%"><h1>Cabecera</h1></td>
<td width="20%"> </td>
</tr>
<tr>
<td height="80%">MENU<br>LATERAL</td>
<td align="center" valign="center"><h1>CONTENIDO CENTRAL</h1></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="center">© 2005 - Pello Xabier Altadill</td>
<td> </td>
</tr>
</table>
</body>
</html>
Y este sera el resultado
44
En el proceso de diseo de la pgina conviene usar tablas con borde para no perder de vista los limites
de la tabla y sus celdas. Los editores WYSIWYG en su caso suelen mostrar la estructura de tablas con
lneas discontinuas.
Veamos ahora otro ejemplo en el que ya se aplican colores para ir dando forma concreta a la pgina.
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 06 :: Maquetación con TABLAS</title>
</head>
<body leftmargin="0" topmargin="0">
<table border="2" cellspacing="1" cellspadding="1" width="100%"
align="center">
height="80%"
45

<tr
bgcolor="red" style="color:white">
<td height="10%" width="20%"> </td>
<td width="60%"><h1>Cabecera</h1></td>
<td width="20%"> </td>
</tr>
<tr>
<td height="80%" bgcolor="red" style="color:white" align="left"
valign="top">
<table style="font-size:24" border="1" width="90%" style="color:white"
>
<tr><td>MENU1</td></tr>
</table>
</td>
<td align="left" valign="center"><h1>CONTENIDO CENTRAL</h1></td>
<td> </td>
</tr>
<tr>
<td bgcolor="red" style="color:white"> </td>
<td align="center">© 2005 - Pello Xabier Altadill</td>
<td> </td>
</tr>
</table>
</body>
</html>
46
47
7.Formularios
Si queremos crear aplicaciones web serias los formularios son imprescindibles; de hecho,qu son las
mayoras de las aplicaciones web sino conjuntos de formularios? Veamos como se define un formulario
y los elementos de formulario uno por uno.
Formularios bsico: <FORM>, <INPUT>, texto y botones

Un formulario HTML debe encerrarse con las etiquetas <FORM> y a partir de ah debe conter uno o
mas campos cuyo valor ser enviado por el formulario a una pgina de destino.
Los campos se crean en su mayora con etiquetas INPUT de distinto tipo y se les pueden aadir botones
para facilitar su envo, cancelacin o cualquier otro tipo de accin que le asociemos.
Veamos un ejemplo de formulario muy simple:
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 00 :: Mi primer formulario ::</title>
</head>
<body>
<h1>Formularios <FORM></h1>
<h2>Se utilizan las etiquetas <INPUT> con atributos type, name y value</h2>


<form name="Formulario" method="POST" action="dire_html00.html">
Login: <input type="text" name="login" value=""><br>
Password: <input type="password" name="password" value=""><br>

<input type="submit" name="boton_submit" value="Enviar">
<input type="reset" name="boton_vaciar" value="Vaciar">
</form>
</body>
</html>
Ahora vamos a ver las listas que se ve
Formularios - Formularios bsico: <FORM>, <INPUT>, texto y botones

48
Formularios maquetados en una tabla y <TEXTAREA>

Como se ha comentado en el tema anterior, las tablas son muy utiles para confeccionar el diseo de una
pgina pero adems en el caso de los formularios nos sirven para poner los campos y sus etiquetas de
forma ordenada.
Se consigue un efecto ms profesional, como se ve en el siguiente ejemplo. De paso se presenta el tipo
de campo <TEXTAREA>: este campo tiene etiqueta propia y no se define con INPUT.
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 01 :: Un formulario maquetado ::
</title>
</head>
<body>
Formularios - Formularios maquetados en una tabla y <TEXTAREA>

49

<h2>Campos de texto y MAQUETACIÓN de formularios</h2>

<table border="1">
<tr>
<td>Login:</td>
<td><input type="text" name="login" value=""></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password" value=""></td>
</tr>
<tr>
<td>Descripcion:</td>
<td><textarea name="descripcion"></textarea></td>
</tr>
<tr>
<td><input type="submit" name="boton_submit" value="Enviar"></td>
<td><input type="reset" name="boton_vaciar" value="Vaciar"></td>
</tr>
</table>
</form>
</body>
</html>
Este sera el resultado, se ve un formulario ms centrado.
Formularios - Formularios maquetados en una tabla y <TEXTAREA>

50
Listas desplegables <SELECT>, <OPTION>

Ahora Las listas desplegables ofrecen una serie de opciones de las que el usuario debe elegir alguna.
Dependiendo de el numero de elementos que pueda seleccionar (nico o mltiple) la lista puede
aparecer con aspecto distinto. Las de eleccin nica se muestran replegadas y las de eleccin mltiple
se pueden mostrar abiertas. En cualquier caso ls dos se crean las etiquetas <SELECT> para definir la
lista y <OPTION> para cada elemento de la misma.
recordar que en cada elemento de una lista (<OPTION>) hay
ImportantedosEs importante
valores: el que se muestra al usuario y se ve en la pgina y el atributo
value que es quien tiene el valor efectivo de cada opcin (es el valor que se enva con el formulario).
No tienen por qu coincidir el uno con el otro.
Veamos un ejemplo de uso de listas:
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 02 :: Listas ::</title>
</head>
Formularios - Listas desplegables <SELECT>, <OPTION>

51

<body>
<h2>Listas</h2>

<table border="1">
<tr>
<td>Login:</td>
</tr>
<tr>
<td>Password:</td>
</tr>
<tr>

<td><textarea name="descripcion">Contenido inicial...</textarea></td>
</tr>
<tr>
<td>Estado civil:</td>

<td>
<select name="estado">
<option value="0">CASADO</option>
<option value="1">SOLTERO</option>
<option value="2">CON NOVIA</option>
<option value="3">PROMISCUO</option>
<option value="4">VIVO EN PECADO</option>
</select>
</td>
</tr>
<tr>
<td>Aficiones:</td>

<td>
<select name="aficiones" multiple size="5">
<option value="0">IR AL CINE</option>
<option selected value="1">IR A CLASE</option>
<option value="2">LEER</option>
<option value="3">COMER</option>
<option value="4">NO HACER NADA</option>
<option value="5">NADAR</option>
<option value="6">HACER DEPORTE</option>
</select>
</td>
</tr>
Formularios - Listas desplegables <SELECT>, <OPTION>

52

<tr>
</tr>
</table>
</form>
</body>
</html>
Campos tipo CHECKBOX y RADIO

Estos campos son habituales en cualquier entorno visual: generalmente se presentan en grupos aunque
tambin pueden ir solos. En cualquier caso la funcionalidad es distinta: los checkbox (de forma
Formularios - Campos tipo CHECKBOX y RADIO
53

cuadrada) permiten ms de una seleccin y los radio en cambio solo permiten una.
A la hora de definir un grupo de checkbox y radios hay que tener mucho cuidado con el atributo name
ya que todos los elementos de un grupo de checkbox o radios deben compartir el atributo name. As es
como se asocian. El valor real que se enva en el formulario es un array que especifica el value y si esta
chequeado el campo o no (true o false).
Otra cosa a tener en cuenta es que debemos meter una etiqueta aparte para que acompae a estos
elementos ya que por si solos no muestran ningn texto.
Veamos un ejemplo:
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 03 :: Checkbox y Radiobuttons::</title>
</head>
<body>
<h2>Checkbox y Radiobuttons</h2>
<table border="1">
<tr>
<td>Login:</td>
</tr>
<tr>
<td>Password:</td>
</tr>
<tr>
</tr>
<tr>
<td>Posesiones:</td>


name="posesion" value="Casa"> Casa<BR>
name="posesion" value="Ordenador">
name="posesion" value="Coche"> Coche<BR>
name="posesion" value="Moto"> Moto<BR>
name="posesion" value="Bicicleta">
54

</tr>
<tr>
<td>SEXO:</td>


<td>
<INPUT type="radio" name="sexo" value="Male"> Hombre<BR>
<INPUT type="radio" name="sexo" value="Female"> Mujer<BR>
<INPUT type="radio" name="sexo" value="Raro"> Raaaaro<BR>
</td>
</tr>
<tr>
</tr>
</table>
</form>
</body>
</html>
55
Formularios -
56
Campos ocultos y de envo de ficheros

Un campo habitual en los formularios de aplicaciones web es el de tipo hidden u oculto. Este es como
un campo de texto con la excepcin de que no se ve en el navegador. Pero sirve para almacenar datos
que deben enviarse con el formulario.
Otro campo til es el de envo de ficheros o tipo file. Permiten al usuario seleccionar un fichero de su
ordenador para enviarlo como parte del formulario. Es muy habitual en aplicaciones de webmail para
aadir ficheros adjuntos o en foros para aadir avatars.
Hay que tener en cuenta que si se enva un fichero con un formulario debe
Importantedefinirse
el formulario con algunas variantes en sus atributos:
enctype="multipart/form-data"
Vemoslo en este ejemplo:

<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 04 :: Envio de ficheros y campos hidden ::
</title>
</head>
<body>
<h2>INPUT TYPE: file y hidden</h2>
<legend> ACCESO AL SISTEMA

<form name="Formulario" method="POST" action="dire_html04.html"
enctype="multipart/form-data">

<input type="hidden" name="codigo" value="32454325">
<table border="1" align="center">
<tr>
Formularios - Campos ocultos y de envo de ficheros

57

<td>Login</td>
<td><input type="text" name="login" value="" id="idlogin"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" value=""
id="idpassword"></td>
</tr>
<tr>
<td>Enviar fichero</td>

<td><input type="file" name="fichero" value=""></td>
</tr>
<tr>
</tr>
</table>
</form>
</legend>
</body>
</html>
Y esto es lo que se ve. En los campos tipo file se puede apreciar que el interprete de HTML (el
navegador), aade un botn para la seleccin de un fichero.
Otros elementos: imgenes, <LEGEND>, <LABEL>

Estos elemento se asocian a los formularios aunque no es muy habitual verlos.
Formularios - Otros elementos: imgenes, <LEGEND>, <LABEL>
58

Los legend se usan para enmarcar: no son mas que un texto con un marco. En el ejemplo anterior se
puede ver uno, en concreto es lo que pone ACCESO AL SISTEMA.
Los label sirven para poner un texto que acompae a un campo de formulario. Es raro verlos aunque
pueden ser tiles como poco para aplicarles estilos.
Veamos un ejemplo:
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 05 :: Otros elementos::</title>
</head>
<body>
<h2>Otros elementos: legend, label, image</h2>
<legend> ACCESO AL SISTEMA
<table border="1" align="center">
<tr>

<td><label for="idlogin" accesskey="L">Login</label></td>
<td><input type="text" name="login" value="" id="idlogin"></td>
</tr>
<tr>
<td><label for="idpassword" accesskey="P">Password</label></td>
<td><input type="password" name="password" value=""
id="idpassword"></td>
</tr>
<tr>
<td><input type="image" name="boton_submit" src="logocuatrovientos.gif" alt="Enviar"></td>
</tr>
</table>
</form>
</legend>

59
</body>
</html>

60
8.Marcos
Los marcos o frames sirven para dividir el navegador en varias partes y mostrar distintos documentos
HTML en cada una de ellas. Hay quien dice que estn en desuso aunque siempre pueden ser tiles en
determinadas circunstancias.
Definicin de Marcos o Frames: <FRAMESET>, <FRAME> y <NOFRAMES>

Para hacer una pgina con marcos lo primero que hay que hacer es crear la pgina que los contiene: esa
pagina es muy simple, no tiene ms que la etiqueta HTML, la cabecera y un titulo y la etiqueta
<FRAMESET>. Y no debe tener la etiqueta body.
Dentro del frameset se define la disposicin de los marcos y la pgina que debe contener cada uno de
ellos, cada uno de ellos se especifica en la etiqueta <FRAME>.
Cmo se marca el numero de frames y el espacio que van a ocupar? Mediante el atributo rows o cols.
Ese atributo contiene una lista de porcentajes o tamaos por cada frame (separados por coma).
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 00 :: Mi primera página con
FRAMES::</title>
</head>

<frameset rows="20%,80%" border="5" frameborder="2">
<frame src="menu.html" name="menu">
<frame src="principal.html" name="principal">
<noframes>
Lo sentimos pero su navegador no soporta FRAMES
</noframes>
</frameset>
</html>
Marcos - Definicin de Marcos o Frames: <FRAMESET>, <FRAME> y <NOFRAMES>

61
Esta sera la pgina del la parte superior

<html>
<head>
FRAMES::</title>
</head>
<body bgcolor="red">
<table width="100%" border="1">
<tr style="font-size:54pt;color:white">
<td style="font-size:14pt">Opción
</tr>
</table>
</body>
</html>
1</td>
2</td>
3</td>
4</td>
5</td>
6</td>
7</td>
Marcos - Definicin de Marcos o Frames: <FRAMESET>, <FRAME> y <NOFRAMES>

62

Y esta la pgina de la parte inferior.
<html>
<head>
FRAMES::</title>
</head>
<body bgcolor="green">
<div style="font-size:54pt;color:white" align="center">
Esta es la pagina principal
</div>
</body>
</html>
Marcos o Frames en columnas

Veamos un ejemplo de frames pero formando columnas.
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 01 :: FRAMES columnas ::</title>
</head>
-->
<frameset cols="20%,20%,20%,20%,20%" border="5" frameborder="2">
<noframes>
</noframes>
</frameset>
</html>
Este sera el resultado:
Marcos - Marcos o Frames en columnas
63
Marcos o Frames anidados

Los marcos se pueden anidar, como no poda ser menos. Dentro de un frameset se puede meter otro
frameset y crear una estructura tpica como esta:
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 01 :: FRAMES anidados ::</title>
</head>
-->
<frameset rows="20%,80%" border="5" frameborder="2">
<frame src="cabecera.html" name="cabecera">
<frameset cols="20%,80%" border="5" frameborder="2">
<frame src="lateral.html" name="lateral">
</frameset>
Marcos - Marcos o Frames anidados
64

<noframes>
</noframes>
</frameset>
</html>
Esta sera la misma pero usando atributos NORESIZE. Sirve para que el usuario no pueda cambiar de
tamao los marcos.
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 03 :: FRAMES anidado + NORESIZE ::</title>
</head>
-->
<frameset rows="20%,80%" border="5" frameborder="2" >
<frame src="cabecera.html" name="cabecera" noresize >
<frameset cols="20%,80%" border="5" frameborder="2" >
<frame src="lateral.html" name="lateral" noresize>
</frameset>
<noframes>
</noframes>
</frameset>
</html>
Marcos - Marcos o Frames anidados
65
Marcos internos: <IFRAME>

Los IFRAMES son marcos internos en una pgina, esto es, una pgina HTML puede contener otra en
un IFRAME. El efecto que se crea es como el de un textarea que contiene HTML. Su uso esta en
entredicho por los problemas de seguridad que puede suponer (hubo un exploit muy popular que haca
uso de los IFRAMES). De hecho, si un documento HTML (una pgina web o un correo electrnico)
con IFRAMES pasa por un filtro de seguridad puede que este elimine o desarme las etiquetas
IFRAME.
En fin, veamos un ejemplo:
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 04 :: La etiqueta IFRAME ::</title>
</head>
<div style="bgcolor:red;bgcolor:white;font-size:25pt">
Esto es un IFRAME, una etiqueta con polemica.<br>
Es un frame interno<br>
<iframe src="pagina.html"><iframe>
</div>
<hr>
<iframe src="contenido.html">
</iframe>
</html>
Marcos - Marcos internos: <IFRAME>
66

Este sera el contenido del frame interno:
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 05 :: Contenido de pruebas ::</title>
</head>
<body bgcolor="maroon" text="white" link="grey">
<pre>
<h1>Menú</h1>
<img src="logo-cuatrovientos.gif" border="0">
<a href="http://www.restauranteotzarreta.com">Ir a restaurante</a>
Coctail de Bienvenida
Platos de Ibericos
Ensalada de mariscos
Bogavante a la plancha
Hongos en hojaldre
Cazuelita de kokotxas
Rodaballo asado con papas
Sorbete de limon al cava
Corazon de solomillo al Oporto
Natillas
</pre>
</body>
</html>
Y este sera el resultado
67
Veamos ahora ver las listas
68
9.Etiquetas META
Las META son etiquetas que se incluyen en el documento y estn dedicadas a describir distintos
aspectos generales del documento, como el juego de caracteres que necesita la pgina como la
descripcin del mismo, el autor, el programa que se ha utilizado para editarlo, etc...
Son etiquetas que se meten en la cabecera (<HEAD>) no se ven en el navegador aunque si se pueden
hacer notar.
Ejemplos bsicos, <META>

Entre las etiquetas ms tiles de cara a colgar la pgina en internet se podran citar keywords (palabras
clave que identifican el docuemto) y description (una breve descripcin del mismo). A la hora de colgar
una pgina en internet las araas, bots o rastreadores pasarn por nuestra pgina y mirarn en estas
etiquetas para sacar informacin; cuando alguien busque informacin sobre algo que hayamos puesto
en estas etiquetas ser ms fcil que encuentre nuestra pgina.
Veamos unos ejemplos de etiquetas:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<META name="keywords" content="cuatrovientos, instituto, enseanza">
<META name="description" lang="es"
content="Esta es la pagina del instituo cuatrovientos bla la...">

<META http-equiv="Expires" content="Mon, 11 Aug 2005 16:12:03 GMT">

<META name="Author" lang="es" content="Pello Xabier Altadill">

<META NAME="generator" CONTENT="Microsoft Emacs editor">

<META name="copyright" content="© Pello Xabier Altadill.">
<META name="date" content="2004-12-09T09:14:23+00:00">
Etiquetas META - Ejemplos bsicos, <META>
69

<title>Desarrollo de aplicaciones Web :: 2º DAI :: Etiquetas META </title>
</head>
<body>
<h1>El instituto Cuatrovientos</h1>
<i>
Cuatrovientos es una cooperativa de profesionales, lo que facilita las claves para
que seamos capaces de promover un modelo educativo atravesado por proyectos
interdisciplinares que ponen en contacto la vida con la escuela y la empresa y
enriquecido por la voluntad permanente de superación.
</i>
<hr width="80%">
<h2>Servicios a la mano</h2>
<b>Artean</b><p>
Departamento de actividades externas del Instituto. Un mundo de relaciones con las
empresas: prácticas en empresas (FCT), búsqueda o mejora de empleo,
cursos de formación, información y orientacion laboral.</p>
<b>Salas Informáticas</b><p>
El Instituto Cuatrovientos cuenta con 12 salas de ordenadores conectadas en red,
con equipos informáticos y tecnología de última
generación.
</p>
<p>
El ordenador es una herramienta habitual de trabajo, en cualquier etapa educativa.
</p>
</body>
</html>
Redireccin automtica: refresh

Un efecto muy elegante para crear un splash-screen o pgina de presentacin es hacer un refresh de una
pgina. Mediante una etiqueta META podemos provocar que una pgina cargue otro pasados unos
segundos. Puede ser otra pgina distinta o la misma (un truco habitual en retransmisiones de partidos de
ftbol a travs de pginas web). En muchos casos tambin se usa para que simplemente se actualice la
pgina cada x-tiempo.
Veamos como se hace:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>


Etiquetas META - Redireccin automtica: refresh
70

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


<meta HTTP-EQUIV="refresh" CONTENT="3; URL=dire_html05.html">
<title>Desarrollo de aplicaciones Web :: 2º DAI :: Etiquetas META:
refresh</title>
</head>
<body>
<h1>Saltando a cuatrovientos...</h1>
<a href="dire_html05.html">(Si no ve la pagina pulse aqui)</a>
</body>
</html>
Etiquetas META - Redireccin automtica: refresh
71
10.Hojas de estilos
Las hojas de estilos o CSS (Cascading Style Sheets) son un estndar de la W3C para aplicar distintos
estilos, formatos y caractersticas a los documentos como HTML.
En la practica son ficheros de texto en los que se van definiendo propiedades concretas para los
elementos de la pgina. Esto ahorra mucho trabajo y espacio en el desarrollo de pginas ya que no es
necesario que a cada elemento de una pgina le tengamos que especificar una y otra vez que use
determinado color o determinada fuente; y adems un mismo estilo se puede aplicar a muchas pginas.
Insercin de estilos <STYLE>

Para ir familiarizndonos con las hojas de estilos veamos la forma ms simple de aplicarlos: dentro de
la misma pgina. Para ello, dentro de la cabecera metemos la etiqueta <STYLE>, y dentro de ella las
definiciones de estilos.
La forma ms simple de aplicar estilos es nombrar una etiqueta y aadirle estilos:
/**
* Esto es un comentario dentro la hoja de estilos
*/
H1
{color: red; font-family: Arial;
Cada estilo va encerrado entre {} y dentro de las llaves cada uno de ellos se separan con punto y
coma.
En el apndice de estilos se muestra un listado de todas la posibilidades.
Veamos el ejemplo ms simple:
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 00 :: Aplicando estilos ::</title>

<style type="text/css">
BODY {color: white; background-color: gray }
H1
{color: red
}
PRE {color: black; font-size: 14pt }
</style>
</head>

<body bgcolor="green">
<h1>Esto es una página con estilos CSS</h1>
<br>
Hojas de estilos - Insercin de estilos <STYLE>
72

<pre>
La definición de estilos se puede meter entre las etiquetas <head>
de esta manera:
BODY {color: white; bgcolor: green }
H1
{color: red
}
PRE {color: black; bgcolor: gray }
</style>
</pre>
</body>
</html>
Y esto veramos en la pgina
Hojas de estilos externas, <LINK>

En la mayora de los casos conviene definir la hoja de estilos en un fichero aparte. Este sera un fichero
de texto con extensin css. Es habitual que en las webs existan directorios para alojar los estilos, al
igual que pasa con los fichero de javascript o las imgenes.
Veamos como se adjunta un fichero de estilo a una pgina:
Hojas de estilos - Hojas de estilos externas, <LINK>

73

<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 0 :: Hoja de estilos externa ::</title>

<LINK rel="stylesheet" href="dire.css" type="text/css">
</head>
En este caso esta ultima, la concreta. La pantalla sale gris.
-->
<body bgcolor="gray">
<h1>Esto es una página con estilos CSS</h1>
<br>
<p>
<pre>
Ahora la hoja de estilos esta definida en un fichero
externo. Ese fichero es un fichero de texto que puede
contener comentarios para facilitar la comprension de
la hoja.</pre><p>
<p>Este podria ser su aspecto:
<pre>
BODY {color: white; background-color: green }
H1
{color: red
}
PRE {color: black; background-color: gray }
</style>
<pre>
</p>
</body>
</html>
Y esta sera la hoja de estilos correspondiente:

/* Hoja de estilos bsica para dire
creada por Pello Xabier Altadill
*/
BODY {
color: white;
}
H1
background-color: green
{
color: red
}
Hojas de estilos - Hojas de estilos externas, <LINK>

74

P
{
color: black;
font-size: 14pt
}
Clases de estilos y atributo class

Bien , ya hemos visto que se pueden aplicar distintos estilos a las etiquetas de un documento. Pero qu
pasa cuando necesitas crear un prrafo de un estilo y otro prrafo de otro? En ese caso se pueden definir
estilos tipo class.
Los estilos class se definen poniendo un punto por delante de un nombre arbitrario:
.miestilo {
color: black;
font-size: 14pt
}
Y entonces ese estilo se puede aplicar a cualquier etiqueta o elemento del documento usando el atributo
class y poniendole el nombre del estilo que hemos definido.
Veamos un ejemplo:
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 02 :: CLASS:estilos agrupados ::</title>
-->
<LINK rel="stylesheet" href="dire_clases.css" type="text/css">
</head>
-->
<body>
<h1>Estilos CSS: las clases</h1>
<p>Dentro de la hoja se pueden aplicar distintos estilos
segun la clase de etiqueta. La clase de <em>cualquier</em>
se puede especificar con el atributo <b>class</b>
</p>
<p>En el fichero CSS una clase se define con un nombre precedido por un punto
como por ejemplo:<br>
<b>.parrafo_especial<b> { color: green; font-style: italic }
Hojas de estilos - Clases de estilos y atributo class
75

</p>
<h2>Etiquetas <pre> con distinta clase</h2>
<p class="parrafo_especial">
Este es el parrafo con la con el estilo <b>parrafo_especial</a><br>
especificado en la hoja de estilos.
<p>
<p class="parrafo_azul">
Este en cambio es un parrafo con el estilo <b>parrafo_azul</b><br>
que tiene propiedades muy distintas.
</p>
</body>
</html>
Esto se vera en el navegador:
76
Y esta sera la hoja de estilos

*/
BODY {
color: gray; background-color: white
}
/* Un mismo estilo puede servir para dos o mas etiquetas */
H1, H2
{
color: red
}
.parrafo_especial
{
color: green;
font-size: 10pt;
77

font-style: italic
}
.parrafo_azul
{
color: blue;
font-size: 16pt
}
Identificador de estilos y atributo ID

Cada elemento de una pgina HTML puede tener un atributo id que lo identifique de manera
inequvoca en todo el documento. Ese identificador nos puede servir para muchas cosas, las habituales
son para acceder desde cdigo javascript a travs del ID, y tambin la aplicacin de estilos propios para
un solo elemento.
En ese caso se emplea el smbolo # delante del nombre de estilo.
Veamos un ejemplo concreto. En este documento hay ms de un elemento que tiene el atributo ID, y en
su hoja de estilos se aplican modificaciones a travs del valor de ID.
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 03 :: ID: estilos especificos ::</title>
-->
<LINK rel="stylesheet" href="dire_ids.css" type="text/css">
</head>
-->
<body>
<h1>Estilos CSS: los ID</h1>
<p>Dentro de la hoja se pueden aplicar estilos a etiquetas muy concretas
a traves del atributo <b>ID</b>.
</p>
<h2>Etiquetas <p> con distinto ID de estilo</h2>
<p id="definicion">En el fichero CSS un estilo para los ID se define con un
nombre precedido por una almohadila como por ejemplo:<br>
<b>#menucentral<b> { color: green; font-style: italic }
</p>
Hojas de estilos - Identificador de estilos y atributo ID

78

<p id="parrafo_especial">
Este es el parrafo con la con el estilo <b>#parrafo_especial</b><br>
especificado en la hoja de estilos. Se aplica con el atributo <b>id</b><br>
<p id="parrafo_especial">
<p>
</body>
</html>
Esto veramos en el navegador:
Esta sera la hoja de estilos:

Hojas de estilos - Identificador de estilos y atributo ID
79

*/
BODY {
}
H1, H2
{
color: red
}
/* Para los ID se usa la # */
#parrafo_especial {
color: green;
font-size: 14pt;
font-style: italic
}
#definicion
{
color: black;
font-size: 16pt;
font-style: bold
}
Pseudo-clases :hover, :visited, :link, :active

Las pseudo clases van un poco ms all de los estilos y nos permiten controlar elementos
circunstanciales de la pgina HTML. Por ejemplo si queremos distinguir si un enlace ya ha sido
visitado, si un enlace esta activo o mejor an, si queremos distinguir cuando el ratn se encuentra sobre
el enlace (:hover) para aplicarle distintos estilos: usamos las pseudoclases.
Las palabras :hover, :visited, :link, :active son pseudoclases que se pueden aadir a los estilos para
controlar esas circunstancias.
Veamos un ejemplo con una serie de enlaces:
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 04 :: Pseudo Clases ::</title>
-->
<LINK rel="stylesheet" href="dire_pseudoclases.css" type="text/css">
Hojas de estilos - Pseudo-clases :hover, :visited, :link, :active

80

</head>
-->
<body>
<h1>Estilos CSS: las PSEUDO CLASES</h1>
<p>A un estilo se le pueden aplicar pseudoclases con lo que se consiguen
efectos dinamicos. El ejemplo tipico es el de los enlaces.<br>
<br>
A:link<br>
A:hover<br>
A:visited<br>
A:active<br>
</p>
<h2>Etiquetas <A> con pseudo clases</h2>
<table class="bordeschulos">
<tr>
<td>
<a href="http://www.google.es">Google</a>
</td>
<td>
<a href="http://www.lycos.com">Lycos</a>
</td>
</tr>
<tr>
<td>
<a href="http://www.flickr.com">Flickr</a>
</td>
<td>
<a href="http://www.w3.org">W3consortium</a>
</td>
</tr>
<tr>
<td>
<a href="http://www.cuatrovientos.org">Cuatrovientos</a>
</td>
<td>
<a href="dire_html04.html">yo mismo</a>
</td>
</tr>
</body>
</html>
Este sera el resultado, que conviene probar en un navegador;

81
En la hoja de estilos se ve el estilo aplicado a cada enlace y sus diferentes estados:

*/
BODY {
}
A
{
color: red;
font-size: 16pt;
text-decoration: underline
}
/* Este es como el de antes */

A:link
{
color: red;

82

font-size: 16pt;
text-decoration: underline
}
/* a:hover se aplica a enlaces sobre el que ponemos el raton */
A:hover
{
color: red;
font-size: 16pt;
font-style: bold;
text-decoration: none
}
/* a:active se aplica a enlaces activos */
A:active
{
color: blue;
font-size: 16pt;
font-style: bold;
}
/* a:active se aplica a enlaces ya visitados */
A:visited
{
color: gray;
font-size: 16pt;
font-style: bold;
}
/* Este es como el de antes */
A:focus:link
{
color: red;
background: black;
font-size: 45pt;
text-decoration: none
}
H1, H2
{
color: red
}
/* Un estilo de borde especial que aplicaremos a la tabla */
.bordeschulos {
border-style: dashed;
border: 4;
}
#parrafo_especial
{
color: green;
font-size: 14pt;
font-style: italic
}
#definicion
{
color: black;
font-size: 16pt;

83

font-style: bold
}
Estilos en listas
Las listas tambin tienen su hueco entre las propiedades de las hojas de estilos. Una de las ms
conocidas es la de cambiar el smbolo que marca el inicio de cada elemento de la lista.
Veamos un ejemplo:
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 05 :: Aplicando
estilos a listas ::</title>
-->
<link rel="stylesheet" href="dire_listas.css" type="text/css">
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
</head>
<body>
<h1>Estilos CSS a listas</h1>
<p>
Con la hoja de estilos se puede cambiar el formato de listas, tanto la
numeracion como el icono.</p>
<p></p>
<h2>Propiedad: list-style-image: url("fichero.gif")</h2>
<ul class="listaschulas">
<li><a href="http://www.google.es">Google</a></li>
<li><a href="http://www.lycos.com">Lycos</a></li>
<li><a href="http://www.flickr.com">Flickr</a></li>
<li><a href="http://www.w3.org">W3consortium</a></li>
<li><a href="http://www.cuatrovientos.org">Cuatrovientos</a></li>
<li><a href="dire_html04.html">yo mismo</a></li>
</ul>
<hr>
</body>
</html>
Y este sera el resultado en el navegador:
Hojas de estilos - Estilos en listas
84
Esta sera la hoja de estilo:

/* Hoja de estilos bsica para dire creada por Pello Xabier Altadill*/
body {
color: red;
font-size: 20pt;
}
/* Definimos un tipo especial para los formularios.*/
.listaschulas {
list-style-image: url("boton.gif");
font-color: black;
font-family: 'Arial, Verdana';
}
Estilos en formularios
Hojas de estilos - Estilos en formularios
85

Los formularios con sus lineas y sus colores grises pueden romper el diseo de una pgina HTML. Pero
gracias a los estilos podemos adecuar los formularios tanto en lineas como en colores, salindonos as
de interfaces muy repetitivos.
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 07 :: Aplicando estilos a formularios ::
</title>
-->
<link rel="stylesheet" href="dire_formularios.css" type="text/css">
</head>
<body>
<h1>Estilos CSS para formularios</h1>
<hr>
<form name="Formulario" method="post" action="dire_html02.html" class="borderojo">
<table class="especial">
<tbody>
<tr>
<td>Login:</td>
<td><input name="login" value="" type="text" ></td>
</tr>
<tr>
<td>Password:</td>
<td><input name="password" value="" type="password"></td>
</tr>
<tr>
</tr>
<tr>
<td>Posesiones:</td>
 <td>
<input name="posesion" value="Casa" type="checkbox"> Casa<br>
<input name="posesion" value="Ordenador" type="checkbox"> Ordenador<br>
<input name="posesion" value="Coche" type="checkbox"> Coche<br>
<input name="posesion" value="Moto" type="checkbox"> Moto<br>
<input name="posesion" value="Bicicleta" type="checkbox"> Bicicleta<br>
</td>
</tr>
<tr>
<td>SEXO:</td>


<td>
<input name="sexo" value="Male" type="radio">Hombre<br>
<input name="sexo" value="Female" type="radio">Mujer<br>
86

<input name="sexo" value="Raro" type="radio">Raaaaro<br>
</td>
</tr>
<tr>
<td><input name="boton_submit" value="Enviar" type="submit"></td>
<td><input name="boton_vaciar" value="Vaciar" type="reset"></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
Y en el navegador veramos lo siguiente:
87

Esta sera la hoja de estilos para ese formulario con colores tan patrios.
/* Hoja de estilos bsica para dire creada por Pello Xabier Altadill*/
body {
color: red;
}
/* Definimos un tipo especial para los formularios.*/
.especial {
border-top: dashed;
border-bottom: dashed;
border-right: dashed;
border-left: dashed;
font-color: red;
font-size: 8pt;
border-bottom: thick solid red
}
/* Creamos un borde de un pixel y punteado */

FORM > INPUT,TEXTAREA {
border: 1px dashed red;
color: green;
}
H1 { border-bottom: thick solid red }
Maquetacin con bloques <DIV> y estilos

En lugar de utilizar tablas para el diseo general de la pgina, se pueden definir bloques DIV con un
posicionamiento concreto. Resulta menos engorroso que las tablas, y es la tendencia actual en cuanto a
desarrollo de pginas.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD> <TITLE>Bloques</TITLE>
<STYLE type="text/css">
BODY { height: 8.5in }
#cabecera { position: fixed;
width: 100%;
height: 15%;
top: 0;
right: 0;
bottom: auto;
left: 0;
background-color: green;
}
Hojas de estilos - Maquetacin con bloques <DIV> y estilos

88

#lateral { position: fixed;
width: 10em;
height: auto;
top: 15%;
right: auto;
bottom: 100px;
left: 0;
background-color: yellow;
}
#principal { position: fixed;
width: auto;
height: auto;
top: 15%;
right: 0;
bottom: 100px;
left: 10em;
background-color: maroon;
}
#pie { position: fixed;
width: 100%;
height: 100px;
top: auto;
right: 0;
bottom: 0;
left: 0;
background-color: red;
}
</STYLE>
</HEAD>
<BODY>
<DIV id="cabecera"> Cabecera </DIV>
<DIV id="lateral"> Lateral </DIV>
<DIV id="principal"> Principal </DIV>
<DIV id="pie"> Fondo </DIV>
</BODY>
</HTML>
Y este sera el resultado en el navegador:
Hojas de estilos - Maquetacin con bloques <DIV> y estilos

89
Resumen de aplicacin de estilos CSS

En el siguiente esquema se resume de forma agrupada el uso que se hace de los estilos. Para una visin
mas exhaustiva de cada propiedad se puede echar un vistazo al apndice de este documento.
Propiedades especficas de fuente

font
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
Hojas de estilos - Resumen de aplicacin de estilos CSS

90

font-weight
Propiedades especficas de texto

letter-spacing
text-align
text-decoration
text-indent
text-shadow
text-transform
white-space
word-spacing
Propiedades especficas de color y fondo

background
background-attachment
background-color
background-image
background-position
background-positionX
background-positionY
background-repeat
Propiedades especficas de borde

border, border-bottom, border-left, border-top, border-right
border-style, border-bottom-style, border-left-style, border-top-style, border-right-style
border-width, border-bottom-width, border-left-width, border-top-width, border-right-width
border-color, border-bottom-color, border-left-color, border-top-color, border-right-color
Propiedades especficas de dimensin

height
width
line-height
max-height

91

max-width
min-height
min-width
Propiedades especficas de margen

margin, margin-bottom, margin-left, margin-top, margin-right
Propiedades especficas de padding

padding, padding-bottom, padding-left, padding-top, padding-right
Propiedades especficas de listas

list-style
list-style-position
list-style-type
marker-offset
Propiedades especficas de posicionamiento

position
top
left
bottom
right
vertical-align
z-index
clip
overflow
overflow-x
overflow-y
Propiedades especficas de outline

outline-color, outline-style, outline-width
Propiedades especficas de tabla

border-collapse
border-spacing

92

caption-side
empty-cells
table-layout
Propiedades especficas de clasificacin

clear
display
float
visibility
Propiedades especficas de internacionalizacin

direction
unicode-bidi
Propiedades especficas de longitud

Absolute Lengths
Relative Length

93
11.XHTML
Ms all del estndar HTML y basndose en los principios de XML ha surgido un nuevo tipo de
documento: XHTML. Aparentemente el cdigo no cambia mucho respecto a la sintaxis de HTML,
aunque para que un documento sea vlido debe cumplir los requisitos mnimos de XML:
Debe tener un ttulo
Todas las etiquetas deben cerrarse
Los atributos deben tener algn valor
Conviene ir conociendo este estndar ya que es probable que la tendencia sea converger hacia los
contenidos XML.
Veamos un simple ejemplo. Obsrvese el cambio en la definicin de tipo de documento (DTD), la
declaracin como documento XML, y el hecho de que incluso las etiquetas que no tienen etiqueta de
cierre (como <hr>), se cierran aadiendo la /.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="author" content="Pello Xabier Altadill" />
<meta name="keywords" content="Ejemplo pagina xhtml" />
<meta http-equiv="content-language" content="es-es" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Ejemplo de pagina XHTML</title>
</head>
<body>
<div>
<h1>Super ejemplo de pagina XHTML</h1>
Aqui se cierran todas las etiquetas.
<hr />
</div><p>Bueno, no parece complicado.</p>
</body>
</html>
XHTML - XHTML
94
12.Referencia HTML
Una referencia de las etiquetas HTML extrado de la especificacin de la w3c, a la que se han aadido
los atributos y eventos disponibles.
Nombr
Atributos
Des
uso
accesskey, charset, class, coords, dir, href, hreflang, id,

lang, name, onBlur, onClick, onDblClick, onFocus,
onKeyDown, onKeyPress, onKeyUp, onMouseDown,
onMouseMove, onMouseOut, onMouseOver,
onMouseUp, rel, rev, shape, style, tabindex, target, title,
type
Descripcin
Anchor o enlace
abbreviated form (e.g., WWW,

HTTP, etc.)
ABBR
ACRONYM
Acrnimo
ADDRESS
Direccin del autor

Des
uso
APPLET
Applet de java
AREA
accesskey, alt, class, coords, dir, href, id, lang, nohref,

notab, onBlur, onClick, onDblClick, onFocus,
onMouseUp, shape, style, tabindex, taborder , target ,
title, type
rea de un mapa de imagen
class, dir, id, lang, onClick, onDblClick, onKeyDown,

onKeyPress, onKeyUp, onMouseDown,
onMouseUp, style, title
Texto en negrita
BASE
href, target
BASEFONT
URI base del documento

D
Tamao base de la fuente
BDO
I18N BiDi over-ride
BIG
Texto de tamao grande
BLOCKQUOTE
cite, class, dir, id, lang, onClick, onDblClick,

BODY
BR
long quotation
El cuerpo del documento

class, clear, id, style, title
Referencia HTML - Referencia HTML
Salto de linea forzado
95
BUTTON
accesskey, class, dir, disabled, id, lang, name, onBlur,

onClick, onDblClick, onFocus, onKeyDown,
onMouseUp, style, tabindex, title, type, value
botn
CAPTION
align, class, dir, id, lang, onClick, onDblClick,

onMouseUp, style, title, valign
Ttulo de tabla
CENTER
onMouseDown, onMouseMove, onMouseOut,

onMouseOver, onMouseUp, style, title
Abreviatura de <DIV
align=center>
CITE
cita
CODE
Cdigo de programa
COL
align, char, charoff, class, dir, id, lang, onClick,

onDblClick, onKeyDown, onKeyPress, onKeyUp,
onMouseOver, onMouseUp, span, style, title, valign,
width
Columna de tabla
COLGROUP

onMouseOver, onMouseUp, span, style, title, valign,
width
Grupo de columnas de tabla
DD

descripcin de definicin
DEL
Texto eliminado
DFN
Listado de directorio
DIR

DIV
align, class, dir, id, lang, nowrap, onClick, onDblClick,

Contenedor de lenguaje o estilo

generico
DL
class, compact, dir, id, lang, onClick, onDblClick,

onMouseUp, style, title, type
Lista de definiciones
96
DT

Termino de una lista de

definiciones
EM
nfasis
FIELDSET

FONT
class, color, dir, face, id, lang, size, style, title
FORM
accept, action, charset, class, dir, enctype, id, lang,

method, name, onClick, onDblClick, onKeyDown,
onMouseUp, onReset, onSubmit, style, target, title
FRAME
bordercolor, class, frameborder, id, longdesc,

marginheight, marginwidth, name, noresize, scrolling,
src, style, title
Marco o subventana
FRAMESET
border, bordercolor, class, cols, frameborder ,

framespacing, id, onLoad, onUnload, style, title
Divisin de ventana
H1
H2
H3
H4
H5
Formato de fuente
Formulario interactivo
Cabecera (la ms grande)

align, class, dir, id, lang, onClick, onDblClick,
H6
Cabecera
Cabecera
Cabecera
Cabecera
Cabecera (la ms pequea)
HEAD
HR
Grupo de controles de un
formulario
Cabecera del documento

align, class, color , dir, id, lang, noshade, onClick,
onMouseOver, onMouseUp, size, style, title, width
Linea horizontal
Elemento raiz del documento

HTML
HTML

Estilo de texto en cursiva
IFRAME
align, class, frameborder, height, id, longdesc,

marginheight, marginwidth, name, scrolling, src, style,
title, width
Marco o frame interno
97
IMG
align,alt, border, class, controls , dir, dynsrc , height,

hspace, id, ismap, lang, longdesc, loop , lowsrc , name ,
onAbort, onClick, onDblClick, onError, onKeyDown,
onKeyPress, onKeyUp, onLoad, onMouseDown,
onMouseUp, src, start , style, title, usemap, vspace,
width
Imgenes insertadas
accept, accesskey, align, alt, border , checked, class, dir,

disabled, id, lang,
INPUT
maxlength, name, notab , onBlur, onChange, onClick,

onDblClick, onFocus, onKeyDown, onKeyPress,
onKeyUp, onMouseDown, onMouseMove,
onMouseOut, onMouseOver, onMouseUp, onSelect,
size, src, tabindex, taborder , title, type, usemap, value
Campo o control de formulario
INS
ISINDEX
Texto insertado
E
Prompt de una nica lnea

Texto que debe ser insertado
por el usuario
KBD
LABEL
accesskey, class, dir, for, id, lang, onBlur, onClick,

onDblClick, onFocus, onKeyDown, onKeyPress,
onMouseOut, onMouseOver, onMouseUp, style, title
LEGEND
accesskey, align, class, dir, id, lang, onClick,

onMouseOver, onMouseUp, style, title
LI

onMouseUp, style, title, type, value
LINK
charset, class, dir, href, hreflang, id, lang, media,

onClick, onDblClick, onKeyDown, onKeyPress,
onMouseOut, onMouseOver, onMouseUp, rel, rev,
style, target, title, type
MAP
class, dir, id, lang, name, onClick, onDblClick,

MENU

Etiqueta de un campo de
formulario
Ttulo o leyenda de un grupo de

campos
Elemento de lista
Enlace independiente del medio
Mapa de imgenes del lado

cliente
Lista de menu
98

META
charset , content, dir, http_equiv, lang, name, scheme
Metainformacion de la pgina
NOFRAMES

Contenido alternativo para

navegadores que no soporten
los frames o marcos
Contenido alternativo para
navegadores que no soporten
scripts.
NOSCRIPT
OBJECT
align, archive, border, class, classid, codebase,

codetype, data, declare, dir, height, hspace, id, lang,
name, notab, onClick, onDblClick, onKeyDown,
onKeyPress, onKeyUp, onLoad, onMouseDown,
onMouseUp, shapes, standby, style, tabindex, title, type,
usemap, vspace, width
OL

onMouseUp, start, style, title, type
Objeto embebido generico

(flash, activeX, etc..)
Lista ordenada
OPTGROUP
Grupo de opciones
OPTION
class, dir, disabled, id, label, lang, onClick, onDblClick,

onMouseUp, selected, style, title, value
align, class, dir, id, lang, onDblClick, onKeyDown,

Opcin seleccionable de una

lista
Parrafo
PARAM
PRE
named property value

onMouseUp, style, title, width
Texto preformateado
Q
S
SAMP
SCRIPT
short inline quotation

D
Texto subrayado
Salida/output de un programa,
scripts, etc..
Scripts
99
SELECT
class, dir, disabled, id, lang, multiple, name, onBlur,

onChange, onClick, onDblClick, onFocus,
onMouseUp, size, style, tabindex, title
Lista o select de formularios
SMALL
Estilo de texto pequeo

Contenedor de lenguaje o estilos
generico
SPAN
STRIKE
STRONG
STYLE
Texto rayado
nfasis ms fuerte
dir, lang, media, title, type
Informacin de estilo
SUB
Subtexto
SUP
superscript
TABLE
align, background, bgcolor, border, bordercolor,

bordercolordark , bordercolorlight , cellpadding,
cellspacing, class, cols, dir, frame, height, hspace , id,
lang, nowrap , onClick, onDblClick, onKeyDown,
onMouseUp, rules, style, summary, title, valign , vspace
, width
TBODY

onMouseOver, onMouseUp, style, title, valign
TD
abbr, align, background, bgcolor, bordercolor,

bordercolordark, bordercolorlight, char, charoff, class,
colspan, dir, headers, height, id, lang, nowrap, onClick,
onMouseOver, onMouseUp, rowspan, scope, style, title,
valign, width
TEXTAREA
accesskey, class, cols, dir, disabled, id, lang, name,

onBlur, onChange, onClick, onDblClick, onFocus,
onMouseUp, onSelect, readonly, rows, style, tabindex,
title, wrap
TFOOT

onMouseOver, onMouseUp, style, title,valign
Tabla
Cuerpo de tabla
Celda de una tabla
Campo de texto multinea
Pie de tabla
100

TH
THEAD
ver TD
Celda de cabecera de tabla

onMouseOver, onMouseUp, style, title, valign
Cabecera de tabla
TITLE
TR
Ttulo de documento
align, background, bgcolor, bordercolor,
bordercolordark, bordercolorlight , char, charoff, class,
dir, id, lang, nowrap, onClick, onDblClick,
onMouseUp, style, title, valign
Fila de una tabla
Estilo de texto de teletipo o

monoespaciado
TT
U
UL
D
onMouseUp, style, title, type
VAR
Estilo de texto subrayado
Lista desordenada
Instacia de una variable de

argumento de program
101
13.Referencia CSS2
Esta sera la referencia de propiedades de las hojas de estilos.
Extrada de la especificacin de CSS2 de la w3c.
Nombre
Valores
Valor
inicial
Aplicado a
(Por
defecto:
todos)
Her
Porcentajes
eda
(Defecto: N/D)
do?
Grupo de
medios
'azimuth'
<angle> | [[ left-side | far-left |

left | center-left | center |
center-right | right | far-right |
right-side ] || behind ] |
leftwards | rightwards | inherit
'background'
['background-color' ||
'background-image' ||
'background-repeat' ||
XX
'background-attachment' ||
'background-position'] | inherit
no
'backgroundattachment'
scroll | fixed | inherit
scroll
no
visual
'backgroundcolor'
<color> | transparent | inherit
transparent
no
visual
'backgroundimage'
<uri> | none | inherit
none
no
visual
'backgroundposition'
[ [<percentage> | <length> ]
{1,2} | [ [top | center | bottom]
|| [left | center | right] ] ] |
inherit
0% 0%
block-level
and replaced no
elements
refer to the size

visual
of the box itself
'backgroundrepeat'
repeat | repeat-x | repeat-y | norepeat

repeat | inherit
no
visual
'border'
see
[ 'border-width' || 'border-style'
individual
|| <color> ] | inherit
properties
no
visual
'border-collapse' collapse | separate | inherit
'border-color'
<color>{1,4} | transparent |
inherit
Referencia CSS2 - Referencia CSS2
center
collapse
see
individual
properties
yes
'table' and
'inline-table' yes
elements
no
aural
allowed on
'backgroundposition'
visual
visual
visual
102
Nombre
Valor
inicial
Valores
Aplicado a
(Por
defecto:
todos)
Her
Porcentajes
eda
(Defecto: N/D)
do?
'table' and
'inline-table' yes
elements
Grupo de
medios
'border-spacing' <length> <length>? | inherit
'border-style'
<border-style>{1,4} | inherit
see
individual
properties
no
visual
'border-top'
'border-right'
'border-bottom'
'border-left'
[ 'border-top-width' || 'borderstyle' || <color> ] | inherit
see
individual
properties
no
visual
'border-topcolor' 'borderright-color'
'border-bottomcolor' 'borderleft-color'
<color> | inherit
the value of
the 'color'
property
no
visual
'border-topstyle' 'borderright-style'
'border-bottomstyle' 'borderleft-style'
<border-style> | inherit
none
no
visual
'border-topwidth' 'borderright-width'
'border-bottomwidth' 'borderleft-width'
<border-width> | inherit
medium
no
visual
'border-width'
<border-width>{1,4} | inherit
see
individual
properties
no
visual
'bottom'
<length> | <percentage> | auto

auto
| inherit
positioned
elements
no
'caption-side'
top | bottom | left | right |

inherit
'tablecaption'
elements
yes
visual
'clear'
none | left | right | both | inherit none
block-level
elements
no
visual
top
visual
refer to height
of containing
block
visual
103
Nombre
Valor
inicial
Valores
Aplicado a
(Por
defecto:
todos)
Her
Porcentajes
eda
(Defecto: N/D)
do?
block-level
and replaced no
elements
Grupo de
medios
'clip'
<shape> | auto | inherit
auto
'color'
<color> | inherit
depends on
user agent
'content'
[ <string> | <uri> | <counter> |

:before and :
attr(X) | open-quote | closeempty string after pseudo- no
quote | no-open-quote | noelements
close-quote ]+ | inherit
all
'counterincrement'
[ <identifier> <integer>? ]+ |
none | inherit
none
no
all
'counter-reset'
[ <identifier> <integer>? ]+ |
none | inherit
none
no
all
'cue'
[ 'cue-before' || 'cue-after' ] |
inherit
XX
no
aural
'cue-after'
none
no
aural
'cue-before'
none
no
aural
'cursor'
[ [<uri> ,]* [ auto | crosshair |

default | pointer | move | eresize | ne-resize | nw-resize |
auto
n-resize | se-resize | sw-resize |
s-resize | w-resize| text | wait |
help ] ] | inherit
yes
visual,
interactive
'direction'
ltr | rtl | inherit
'display'
inline | block | list-item | run-in

| compact | marker | table |
inline-table | table-row-group |
table-header-group | tableinline
footer-group | table-row | tablecolumn-group | table-column |
table-cell | table-caption | none
| inherit
no
all
'elevation'
<angle> | below | level | above

level
| higher | lower | inherit
yes
aural
'empty-cells'
show | hide | inherit
yes
visual
ltr
show
yes
all elements,
yes
but see prose
'table-cell'
elements
visual
visual
visual
104
Nombre
Valores
Valor
inicial
Aplicado a
(Por
defecto:
todos)
Her
Porcentajes
eda
(Defecto: N/D)
do?
all but
positioned
elements and no
generated
content
Grupo de
medios
'float'
left | right | none | inherit
none
'font'
[ [ 'font-style' || 'font-variant' ||
'font-weight' ]? 'font-size' [ /
'line-height' ]? 'font-family' ] |
caption | icon | menu |
message-box | small-caption |
status-bar | inherit
see
individual
properties
yes
'font-family'
[[ <family-name> | <genericfamily> ],]* [<family-name> |

<generic-family>] | inherit
depends on
user agent
yes
visual
medium
yes,
the
com
pute refer to parent
d
element's font
valu size
e is
inhe
rited
visual
none
yes
visual
'font-size'
<absolute-size> | <relativesize> | <length> |

<percentage> | inherit
'font-size-adjust' <number> | none | inherit
visual
allowed on
'font-size' and
'line-height'
visual
'font-stretch'
normal | wider | narrower |

ultra-condensed | extracondensed | condensed | semicondensed | semi-expanded |
expanded | extra-expanded |
ultra-expanded | inherit
normal
yes
visual
'font-style'
normal | italic | oblique | inherit normal
yes
visual
'font-variant'
normal | small-caps | inherit
normal
yes
visual
'font-weight'
normal | bold | bolder | lighter |

100 | 200 | 300 | 400 | 500 | 600 normal
| 700 | 800 | 900 | inherit
yes
visual
105
Nombre
Valores
Valor
inicial
Aplicado a
(Por
defecto:
todos)
Her
Porcentajes
eda
(Defecto: N/D)
do?
Grupo de
medios
'height'

auto
| inherit
all elements
but nonreplaced
inline
elements,
table
columns,
and column
groups
'left'

auto
| inherit
positioned
elements
'letter-spacing'
normal | <length> | inherit
normal
yes
visual
'line-height'
normal | <number> | <length> |

normal
<percentage> | inherit
yes
refer to the font

size of the
visual
element itself
'list-style'
[ 'list-style-type' || 'list-styleposition' || 'list-style-image' ] |

inherit
XX
elements
with
yes
'display: listitem'
visual
none
elements
with
yes
'display: listitem'
visual
outside
elements
with
yes
'display: listitem'
visual
elements
with
yes
'display: listitem'
visual
'list-style-image' <uri> | none | inherit
'list-styleposition'
inside | outside | inherit
'list-style-type'
disc | circle | square | decimal |

decimal-leading-zero | lowerroman | upper-roman | lowergreek | lower-alpha | lowerlatin | upper-alpha | upper-latin disc
| hebrew | armenian | georgian |
cjk-ideographic | hiragana |
katakana | hiragana-iroha |
katakana-iroha | none | inherit
no
see prose
visual
no
refer to width
of containing
block
visual
106
Nombre
'margin'
Valor
inicial
Valores
<margin-width>{1,4} | inherit
'margin-top'
'margin-right'
<margin-width> | inherit
'margin-bottom'
'margin-left'
Aplicado a
(Por
defecto:
todos)
Her
Porcentajes
eda
(Defecto: N/D)
do?
XX
no
refer to width
of containing
block
no
refer to width
of containing
block
'marker-offset'
<length> | auto | inherit
auto
elements
with
'display:
marker'
'marks'
[ crop || cross ] | none | inherit
none
page context N/A
'max-height'
'max-width'
'min-height'
'min-width'
no
Grupo de
medios
visual
visual
visual
visual, paged
<length> | <percentage> | none

none
| inherit
all elements
except nonreplaced
inline
no
elements and
table
elements
refer to height
of containing
block
visual
<length> | <percentage> | none

none
| inherit
all elements
except nonreplaced
inline
no
elements and
table
elements
refer to width
of containing
block
visual
<length> | <percentage> |
inherit
all elements
except nonreplaced
inline
no
elements and
table
elements
refer to height
of containing
block
visual
UA
dependent
all elements
except nonreplaced
inline
no
elements and
table
elements
refer to width
of containing
block
visual
inherit
107
Nombre
Valor
inicial
Valores
'orphans'
<integer> | inherit
'outline'
block-level
elements
Her
Porcentajes
eda
(Defecto: N/D)
do?
Grupo de
medios
yes
visual, paged
see
[ 'outline-color' || 'outline-style'
individual
|| 'outline-width' ] | inherit
properties
no
visual,
interactive
'outline-color'
<color> | invert | inherit
invert
no
visual,
interactive
'outline-style'
<border-style> | inherit
none
no
visual,
interactive
'outline-width'
<border-width> | inherit
medium
no
visual,
interactive
'overflow'
visible | hidden | scroll | auto |

inherit
'padding'
Aplicado a
(Por
defecto:
todos)
visible
block-level
and replaced no
elements
<padding-width>{1,4} | inherit XX
visual
no
refer to width
of containing
block
visual
no
refer to width
of containing
block
visual
'padding-top'
'padding-right'
<padding-width> | inherit
'padding-bottom'
'padding-left'
'page'
<identifier> | auto
auto
block-level
elements
yes
visual, paged
'page-breakafter'
auto | always | avoid | left |

right | inherit
auto
block-level
elements
no
visual, paged
'page-breakbefore'
auto | always | avoid | left |

right | inherit
auto
block-level
elements
no
visual, paged
'page-breakinside'
avoid | auto | inherit
auto
block-level
elements
yes
visual, paged
'pause'
[ [<time> | <percentage>]{1,2} depends on

] | inherit
user agent
no
see descriptions
of 'pauseaural
before' and
'pause-after'
'pause-after'
<time> | <percentage> | inherit
depends on
user agent
no
see prose
aural
'pause-before'
<time> | <percentage> | inherit
depends on
user agent
no
see prose
aural
108
Nombre
Valor
inicial
Valores
Aplicado a
(Por
defecto:
todos)
Her
Porcentajes
eda
(Defecto: N/D)
do?
Grupo de
medios
'pitch'
<frequency> | x-low | low |

medium
medium | high | x-high | inherit
yes
aural
'pitch-range'
<number> | inherit
50
yes
aural
'play-during'
<uri> mix? repeat? | auto |

none | inherit
auto
no
aural
'position'
static | relative | absolute | fixed

static
| inherit
'quotes'
[<string> <string>]+ | none |

inherit
depends on
user agent
yes
visual
'richness'
<number> | inherit
50
yes
aural
'right'

auto
| inherit
positioned
elements
no
'size'
<length>{1,2} | auto | portrait |

auto
landscape | inherit
the page
context
N/A
visual, paged
'speak'
normal | none | spell-out |

inherit
yes
aural
elements that
have table
yes
header
information
aural
normal
all elements,
but not to
no
generated
content
visual
refer to width
of containing
block
visual
'speak-header'
once | always | inherit
once
'speak-numeral'
digits | continuous | inherit
continuous
yes
aural
'speakpunctuation'
code | none | inherit
none
yes
aural
'speech-rate'
<number> | x-slow | slow |

medium | fast | x-fast | faster |
slower | inherit
medium
yes
aural
'stress'
<number> | inherit
50
yes
aural
'table-layout'
auto | fixed | inherit
auto
'table' and
'inline-table' no
elements
visual
109
Nombre
'text-align'
Valor
inicial
Valores
left | right | center | justify |

<string> | inherit
none | [ underline || overline ||

'text-decoration'
line-through || blink ] | inherit
Aplicado a
(Por
defecto:
todos)
Her
Porcentajes
eda
(Defecto: N/D)
do?
Grupo de
medios
depends on
user agent block-level
and writing elements
direction
yes
visual
none
no
(see
pros
e)
visual
'text-indent'
inherit
'text-shadow'
none | [<color> || <length>

<length> <length>? ,]*
[<color> || <length> <length>
<length>?] | inherit
'text-transform'
capitalize | uppercase |
lowercase | none | inherit
'top'

auto
| inherit
positioned
elements
'unicode-bidi'
normal | embed | bidi-override |

normal
inherit
all elements,
no
but see prose
'vertical-align'
baseline | sub | super | top |

text-top | middle | bottom |
text-bottom | <percentage> |
<length> | inherit
baseline
inline-level
and 'tablecell'
elements
'visibility'
visible | hidden | collapse |

inherit
inherit
'voice-family'
block-level
elements
yes
refer to width
of containing
block
visual
none
no
(see
pros
e)
visual
none
yes
visual
no
no
refer to height
of containing
block
visual
visual
refer to the
'line-height' of
the element
itself
visual
no
visual
[[<specific-voice> | <genericdepends on
voice> ],]* [<specific-voice> |
user agent
<generic-voice> ] | inherit
yes
aural
'volume'
<number> | <percentage> |
silent | x-soft | soft | medium |
loud | x-loud | inherit
medium
yes
refer to
aural
inherited value
'white-space'
normal | pre | nowrap | inherit
normal
block-level
elements
yes
visual
110
Nombre
'widows'
Valor
inicial
Valores
<integer> | inherit
'width'

auto
| inherit
'word-spacing'
normal | <length> | inherit
normal
'z-index'
auto | <integer> | inherit
auto
Aplicado a
(Por
defecto:
todos)
Her
Porcentajes
eda
(Defecto: N/D)
do?
block-level
elements
yes
all elements
but nonreplaced
inline
elements,
table rows,
and row
groups
no
positioned
elements
Grupo de
medios
visual, paged
refer to width
of containing
block
visual
yes
visual
no
visual
111
14.Bibliografa, enlaces
Bibliografa
HTML&XHTML The definitive guide
Enlaces
http://www.w3.org
http://www.webdesign.org
http://www.cuatrovientos.org
http://dire.cuatrovientos.org
Distribuido bajo licencia Copyleft.

http://creativecommons.org/licenses/by/2.0/es/legalcode.es
Bibliografa, enlaces - Bibliografa, enlaces
112

Lenguaje HTML - Pello Xabier

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Lenguaje HTML - Pello Xabier

Cargado por

Copyright:

Formatos disponibles

Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML

Instituto Cuatrovientos Pamplona/Iruea

Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML

Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML

Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML

Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML

Veamos la primera pgina HTML con las etiquetas mas bsicas:

Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML

La cabecera con su titulo...

Texto bsico - Texto bsico

Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML

Y este sera el resultado:

Texto bsico - Cabeceras, <H1>,<H2>,..,<H6>

Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML

Prrafos y saltos de linea <p>, <br>

Texto bsico - Prrafos y saltos de linea <p>, <br>

Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML

Veamos como quedara el documento:

Formatos bsicos, <b>, <i>, <pre> y lineas <hr>

Texto bsico - Formatos bsicos, <b>, <i>, <pre> y lineas <hr>

Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML

En este documento se ven otras etiquetas:

Texto bsico - Formatos bsicos, <b>, <i>, <pre> y lineas <hr>

Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML

Texto bsico - Formatos bsicos, <b>, <i>, <pre> y lineas <hr>

Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML

Caracteres especiales &eacute;, &copy;,..

Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML

En la siguiente pgina podemos ver su uso:

Y as es como los veramos:

Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML

Y este sera el resultado:

Texto bsico - Atributos de <body>

Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML

Texto bsico - Fuentes <FONT>

Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML

Y este sera el resultado:

Texto bsico - Fuentes <FONT>

Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML

Lneas horizontales <hr>

Texto bsico - Lneas horizontales <hr>

Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML

Y este sera el resultado:

Texto bsico - Etiquetas no estndar

Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML

Y este sera el resultado:

Texto bsico - Etiquetas no estndar

Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML

Insertar imgenes en un documento<img>

Imgenes - Insertar imgenes en un documento<img>

Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML

Y este sera el resultado:

Imagen como fondo de pgina

Imgenes - Imagen como fondo de pgina

Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML

Imgenes - Imagen como fondo de pgina

Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML

Enlaces o hipervnculos a otras pginas.<a>

<a href="dire_html00.html">Enlace a si misma</a>

Y este sera el resultado:

Enlaces - Enlaces o hipervnculos a otras pginas.<a>

Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML

Atributos de body para hipervinculos

Enlaces - Atributos de body para hipervinculos

Caracteres especiales é, ©,..