HTML (MuyBueno)

Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
Lenguaje HTML
Manual de lenguaje HTML a través de ejemplos +
referencia rápida de etiquetas y propiedades de las
hojas de estilos CSS2
Instituto Cuatrovientos – Pamplona/Iruñea

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
- 1
Lenguaje HTML
1.Introducción............................................................................................................................................3
2.Texto básico............................................................................................................................................5
Cabeceras, <H1>,<H2>,..,<H6>............................................................................................................5
Párrafos y saltos de linea <p>, <br>......................................................................................................6
Formatos básicos, <b>, <i>, <pre> y lineas <hr>.................................................................................7
Caracteres especiales é, ©,.............................................................................................10
Atributos de <body>............................................................................................................................11
Fuentes <FONT>.................................................................................................................................12
Líneas horizontales <hr>.....................................................................................................................14
Etiquetas no estandar...........................................................................................................................15
3.Imágenes...............................................................................................................................................17
Insertar imágenes en un documento<img>..........................................................................................17
Imagen como fondo de página............................................................................................................18
4.Enlaces..................................................................................................................................................20
Enlaces o hipervínculos a otras páginas.<a>.......................................................................................20
Atributos de body para hipervinculos..................................................................................................21
Enlaces internos en una página............................................................................................................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
Maquetación de documentos con tablas..............................................................................................40
7.Formularios...........................................................................................................................................45
Formularios básico: <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 envío de ficheros...............................................................................................53
Otros elementos: imágenes, <LEGEND>, <LABEL>........................................................................54
8.Marcos...................................................................................................................................................57
Definición de Marcos o Frames: <FRAMESET>, <FRAME> y <NOFRAMES>............................57
Marcos o Frames en columnas............................................................................................................59
- 2
Marcos o Frames anidados..................................................................................................................60

Marcos internos: <IFRAME>.............................................................................................................62
9.Etiquetas META....................................................................................................................................64
Ejemplos básicos, <META>...............................................................................................................64
Redirección automática: refresh..........................................................................................................65
10.Hojas de estilos...................................................................................................................................67
Inserción 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
Maquetación con bloques <DIV> y estilos.........................................................................................82
Resumen de aplicación de estilos CSS................................................................................................84
11.XHTML...............................................................................................................................................88
12.Referencia HTML...............................................................................................................................89
13.Referencia CSS2.................................................................................................................................93
14.Bibliografía, enlaces..........................................................................................................................107
- 3
1.Introducción
HTML: HyperText Markup Language
HTML es un lenguaje de marcas para crear documentos de hipertexto, el formato más 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, añadiendo 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 décadas, ya en el año 1991 y en el ámbito de la comunidad científica
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 interacción con el usuario como javascript, VBScript, los objetos embebidos en paginas
como los applets, activeX, flash, etc..
Pero al margen de todos los añadidos el lenguaje HTML ha seguido siendo lo mismo: un lenguaje para
crear documentos, que nada tiene que ver con un lenguaje de programación al uso. Actualmente la
especificacion de HTML se encuentra en la versión 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 estándar es la W3C o Consorcio de la WWW.
Para estar al día de los cambios en especificaciones, ver ejemplos, etc no esta demás visitar su página
web: http://www.w3.org
Un documento HTML no es más que un archivo de texto con las marcas que dicta el estándar.
Básicamente suele estar formado por una cabecera y un cuerpo con el contenido de la página 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 página simple se puede
crear con un editor de texto cualquiera.
Introducción - Introducción 4
Veamos la primera página HTML con las etiquetas mas básicas:

<!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 página. En general todas las marcas que se abren se tienen que
cerrar manteniendo el orden y la jerarquía. 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, tamaños, anchura, altura, etc...)
Esto sería lo que veríamos en el navegador:
Primera página
Introducción - Introducción 5
2.Texto básico
Bien, ya sabemos que es un documento HTML y conocemos las etiquetas básicas para crear uno:
La definición de tipo de documento:
La cabecera con su titulo...

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

Bueno, una vez que la cabecera esta completa, ya podemos meter contenido dentro de las etiquetas
body, En esta capítulo veremos las etiquetas, marcas o tags más básicas para el contenido de tipo texto.
En un documento HTML como poco podemos meter texto. Existen unas etiquetas básicas 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 títulos, de mayor (<H1>) a menor tamaño (<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 sería el resultado:
Texto básico - Cabeceras, <H1>,<H2>,..,<H6> 7

Párrafos 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 párrafos 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 básico - Párrafos y saltos de linea <p>, <br> 8

<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 quedaría el documento:
Formatos básicos, <b>, <i>, <pre> y lineas <hr>
Muchas veces es necesario dar cierto formato para resaltar o diferenciar el texto. Los mas básicos, 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 básico - Formatos básicos, <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 página, 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 veríamos:

10
El siguiente ejemplo trata de emular una prueba de visión de un oftalmólogo. Se puede hacer de
muchas maneras (con tamaños 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 quedaría:
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 inglés las eñes y las acentuaciones de cualquier tipo como las
tildes españolas. 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 más usados:
● á = á
● é = é
● í = í
● ó = ó
● ú = ú
● Á = Á
● É = É
● Í = Í
● Ó = Ó
● Ú = Ú
Texto básico - Caracteres especiales é, ©,..

12
● ñ = ñ
● Ñ = Ñ
● © = ©
● € = €
Existen más caracteres especiales y la mayoría de ellos se insertan usando un código hexadecimal.
En la siguiente página 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 veríamos:
Atributos de <body>
Como decíamos en la introducción, la etiquetas HTML pueden ir acompañadas de atributos. En el caso
de la etiqueta body esos atributos marcan propiedades fundamentales como los colores de todo el
Texto básico - 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 básico - Atributos de <body> 14

Fuentes <FONT>
Mediante la etiqueta FONT, en desuso según el estándar, podemos aplicar modificaciones al texto de
un documento HTML. Los atributos de la etiqueta FONT giran en torno al formato de fuente como el
tamaño, el color, la familia de fuente, etc...
Hoy en día 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 básico - Fuentes <FONT> 15

<font size="14" color="blue">BLUE</font>

<font size="14" color="fuchsia">FUCHSIA</font><br>
<font size="14" color="gray">GRAY</font>
<font size="14" color="green">GREEN</font>
<font size="14" color="lime">LIME</font>
<font size="14" color="maroon">MAROON</font><br>
<font size="14" color="navy">NAVY</font>
<font size="14" color="olive">OLIVE</font>
<font size="14" color="purple">PURPLE</font>
<font size="14" color="red">RED</font><br>
<font size="14" color="SILVER">SILVER</font>
<font size="14" color="TEAL">TEAL</font>
<font size="14" color="yellow">YELLOW</font>
<font size="14" 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>


<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 básico - Fuentes <FONT> 16

Líneas 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 básico - Líneas 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 estándar
Existen una serie de etiquetas no especificadas por el estándar que los navegadores han incluido en la
interpretación del HTML. Es mejor evitar este tipo de etiquetas ya que no se puede asegurar la
compatibilidad con todos los navegadores. A continuación vemos algunos ejemplos:

<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 05 :: Etiquetas no estándar ::
Texto básico - Etiquetas no estándar 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 básico - Etiquetas no estándar 19

3.Imágenes
Insertar imágenes 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 precaución con los nombres de
ficheros ya que un error de cualquier tipo provoca que la imagen no se cargue correctamente (cuidado
con la las mayúsculas y minúsculas).
Conviene recordar también que las imágenes pueden cargar mucho un documento HTML hasta el
punto de hacer la descarga de una página más lenta o ralentizar el navegador. Por eso conviene no
utilizar archivos de imágenes muy grandes (mas allá de 300K por ejemplo) y en cualquier caso
retocarlas para que no sean muy pesadas: reducir tamaño, reducir colores, cambiar formato, etc..
Los formatos más habituales para la web son gif, jpg y png. El gif es más peculiar ya que permite
efectos como la transparencia y las imágenes animadas. El jpg comprime las imágenes y facilita que las
páginas sean más ligeras, aunque no es un formato del todo libre; para eso ya esta el png.
Insertar imágenes 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 tamaño (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">
Imágenes - Insertar imágenes 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 página

Basta con usar el atributo background aunque aún así no da mucho juego. Por eso conviene usar las
hojas de estilos que veremos más 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>
Imágenes - Imagen como fondo de página 21

</body>
</html>
Con una imagen grande también se pueden definir áreas con las etiquetas <map> y <area> con las que
determinadas partes de la imagen pueden enlazar a páginas 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.
Imágenes - Imagen como fondo de página 22

4.Enlaces
Los enlaces. Los links o hipervínculos son el fundamento de la World Wide Web. Con ellos se enlaza
un documento tras otro, se enlazan contenidos como imágenes, música, vídeos, etc... Crear un enlace es
muy sencillo. Basta con usar la etiqueta <a> y especificar un destino.
Enlaces o hipervínculos a otras páginas.<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 imágenes, 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 hipervínculos a otras páginas.<a>

23
Atributos de body para hipervinculos
Los hipervínculos pueden mostrar distintos colores aparte de los predeterminados. Estos colores pueden
ser distintos dependiendo de las circunstancias de la navegación (un enlace ya visitado, activo, etc...)
En el siguiente ejemplo vemos el uso de esos atributos y además 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>

<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 página

Un enlace interno, también llamados inline, sirve para desplazarnos dentro de un mismo documento de
un punto a otro. Es muy práctico en caso de páginas largas donde necesitamos movernos de un extremo
a otro de manera rápida y fácil.
Para crear un enlace interno se necesitan dos elementos:
La definición del anchor : <a name=”arriba”>Esto es arriba</a>
El enlace a ese anchor: <a href=”#arriba”>subir arriba</a>
En la definición del anchor no hay porque poner texto. Como se puede apreciar, el enlace interno va
Enlaces - Enlaces internos en una página 25

precedido del símbolo #. Si metemos un enlace a un documento externo y queremos dirigirnos a una
parte concreta también 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>


5.Listas
Las listas son otro elemento básico 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 (según 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
números 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 también se pueden anidar unas dentro de otras. ¿Se puede hacer que la numeración siga la
lógica de listas y sublista? según el estándar 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 lógico, para mostrar información de manera ordenada pero
también se usan como herramienta de maquetación básica. A través de las tablas anidadas podemos
dividir el documento en varias partes ordenadas como menús laterales, cabeceras, etc...
¿Por qué necesitamos una herramienta para maquetar?
La disposición (layout) de los elementos en un documento HTML es seguida: si vamos metiendo
elementos (imágenes, párrafos, tablas)estos se pondrán uno detrás de otro sin control alguno de los
elementos. Con las tablas, como veremos en uno de los ejemplos podremos controlar la disposición de
todos los elementos de la página, 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 básica 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 vería
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, tamaños,..)
como otras características 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 estética como por
funcionalidad. Eso se consigue mediante los atributos colspan y rowspan; su aplicación 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 fusión 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 sería el resultado de la unión:

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 anidación de elementos en un documento HTML son infinitas y con las tablas no
podía ser menos. De hecho la maquetación 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%" height="80%"

align="center">

<tr>

<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>
Maquetación de documentos con tablas
Para la maquetación o diseño general de las paginas web se pueden utilizar entre otras soluciones las
Tablas - Maquetación de documentos con tablas 43

tablas HTML. Es la forma más sencilla ya que no requiere conocimientos de hojas de estilos. Se suele
partir de tablas que ocupan todo el espacio de página y de ahí se pasa a tablas que definen partes más
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>

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 sería el resultado

En el proceso de diseño de la página 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
líneas discontinuas.
Veamos ahora otro ejemplo en el que ya se aplican colores para ir dando forma concreta a la página.
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 06 :: Maquetación con TABLAS</title>
</head>
<body leftmargin="0" topmargin="0">

align="center">

<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>


7.Formularios
Si queremos crear aplicaciones web serias los formularios son imprescindibles; de hecho,¿qué son las
mayorías de las aplicaciones web sino conjuntos de formularios? Veamos como se define un formulario
y los elementos de formulario uno por uno.
Formularios básico: <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 página de destino.
Los campos se crean en su mayoría con etiquetas INPUT de distinto tipo y se les pueden añadir botones
para facilitar su envío, cancelación o cualquier otro tipo de acción 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 básico: <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 diseño de una
página pero además en el caso de los formularios nos sirven para poner los campos y sus etiquetas de
forma ordenada.
Se consigue un efecto más 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 sería el resultado, se ve un formulario más 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 múltiple) la lista puede
aparecer con aspecto distinto. Las de elección única se muestran replegadas y las de elección múltiple
se pueden mostrar abiertas. En cualquier caso lás dos se crean las etiquetas <SELECT> para definir la
lista y <OPTION> para cada elemento de la misma.
ImportantedosEs importante recordar que en cada elemento de una lista (<OPTION>) hay
valores: el que se muestra al usuario y se ve en la página y el atributo
“value” que es quien tiene el valor efectivo de cada opción (es el valor que se envía 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
también pueden ir solos. En cualquier caso la funcionalidad es distinta: los checkbox (de forma
Formularios - Campos tipo CHECKBOX y RADIO 53

cuadrada) permiten más de una selección 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 envía 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 acompañe a estos
elementos ya que por si solos no muestran ningún 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>

<td>
<INPUT type="checkbox" name="posesion" value="Casa"> Casa<BR>
<INPUT type="checkbox" name="posesion" value="Ordenador">
Ordenador<BR>
<INPUT type="checkbox" name="posesion" value="Coche"> Coche<BR>
<INPUT type="checkbox" name="posesion" value="Moto"> Moto<BR>
<INPUT type="checkbox" name="posesion" value="Bicicleta">
Bicicleta<BR>
</td>

</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>

Formularios - 56
Campos ocultos y de envío 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 excepción 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 envío 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
añadir ficheros adjuntos o en foros para añadir avatars.
Importantedefinirse
Hay que tener en cuenta que si se envía un fichero con un formulario debe
el formulario con algunas variantes en sus atributos:
enctype="multipart/form-data"
Veámoslo 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 envío 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), añade un botón para la selección de un fichero.
Otros elementos: imágenes, <LEGEND>, <LABEL>

Estos elemento se asocian a los formularios aunque no es muy habitual verlos.
Formularios - Otros elementos: imágenes, <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 acompañe 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="logo-
cuatrovientos.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 están en desuso aunque siempre pueden ser útiles en
determinadas circunstancias.
Definición de Marcos o Frames: <FRAMESET>, <FRAME> y <NOFRAMES>

Para hacer una página con marcos lo primero que hay que hacer es crear la página que los contiene: esa
pagina es muy simple, no tiene más 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 disposición de los marcos y la página que debe contener cada uno de
ellos, cada uno de ellos se especifica en la etiqueta <FRAME>.
¿Cómo 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 tamaños 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 - Definición de Marcos o Frames: <FRAMESET>, <FRAME> y <NOFRAMES>

61
Esta sería la página 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 1</td>
</tr>
</table>
</body>
</html>
Marcos - Definición de Marcos o Frames: <FRAMESET>, <FRAME> y <NOFRAMES>

62
Y esta la página 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 sería el resultado:
Marcos - Marcos o Frames en columnas 63

Marcos o Frames anidados
Los marcos se pueden anidar, como no podía ser menos. Dentro de un frameset se puede meter otro
frameset y crear una estructura típica 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 sería la misma pero usando atributos NORESIZE. Sirve para que el usuario no pueda cambiar de
tamaño 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 página, esto es, una página 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 hacía
uso de los IFRAMES). De hecho, si un documento HTML (una página web o un correo electrónico)
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 sería 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 sería el resultado

Veamos ahora ver las listas

9.Etiquetas META
Las META son etiquetas que se incluyen en el documento y están dedicadas a describir distintos
aspectos generales del documento, como el juego de caracteres que necesita la página como la
descripción 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 básicos, <META>
Entre las etiquetas más útiles de cara a colgar la página en internet se podrían citar keywords (palabras
clave que identifican el docuemto) y description (una breve descripción del mismo). A la hora de colgar
una página en internet las arañas, bots o rastreadores pasarán por nuestra página y mirarán en estas
etiquetas para sacar información; cuando alguien busque información sobre algo que hayamos puesto
en estas etiquetas será más fácil que encuentre nuestra página.
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, enseñanza">
<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 básicos, <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>
Redirección automática: refresh
Un efecto muy elegante para crear un splash-screen o página de presentación es hacer un refresh de una
página. Mediante una etiqueta META podemos provocar que una página cargue otro pasados unos
segundos. Puede ser otra página distinta o la misma (un truco habitual en retransmisiones de partidos de
fútbol a través de páginas web). En muchos casos también se usa para que simplemente se actualice la
página cada x-tiempo.
Veamos como se hace:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>


Etiquetas META - Redirección automática: 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 - Redirección automática: refresh 71

10.Hojas de estilos
Las hojas de estilos o CSS (Cascading Style Sheets) son un estándar de la W3C para aplicar distintos
estilos, formatos y características 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 página. Esto ahorra mucho trabajo y espacio en el desarrollo de páginas ya que no es
necesario que a cada elemento de una página le tengamos que especificar una y otra vez que use
determinado color o determinada fuente; y además un mismo estilo se puede aplicar a muchas páginas.
Inserción de estilos <STYLE>

Para ir familiarizándonos con las hojas de estilos veamos la forma más simple de aplicarlos: dentro de
la misma página. Para ello, dentro de la cabecera metemos la etiqueta <STYLE>, y dentro de ella las
definiciones de estilos.
La forma más simple de aplicar estilos es nombrar una etiqueta y añadirle 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 apéndice de estilos se muestra un listado de todas la posibilidades.
Veamos el ejemplo más 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 - Inserción 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 veríamos en la página
Hojas de estilos externas, <LINK>
En la mayoría de los casos conviene definir la hoja de estilos en un fichero aparte. Este sería un fichero
de texto con extensión css. Es habitual que en las webs existan directorios para alojar los estilos, al
igual que pasa con los fichero de javascript o las imágenes.
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 sería la hoja de estilos correspondiente:

/* Hoja de estilos básica para dire
creada por Pello Xabier Altadill
*/
BODY {
color: white; background-color: green
}
H1 {
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 párrafo de un estilo y otro párrafo 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 vería en el navegador:

Y esta sería 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;

font-style: italic
}
.parrafo_azul {
color: blue;
font-size: 16pt
}
Identificador de estilos y atributo ID
Cada elemento de una página HTML puede tener un atributo id que lo identifique de manera
inequívoca en todo el documento. Ese identificador nos puede servir para muchas cosas, las habituales
son para acceder desde código javascript a través del ID, y también la aplicación de estilos propios para
un solo elemento.
En ese caso se emplea el símbolo # delante del nombre de estilo.
Veamos un ejemplo concreto. En este documento hay más de un elemento que tiene el atributo ID, y en
su hoja de estilos se aplican modificaciones a través 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 veríamos en el navegador:
Esta sería 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 más allá de los estilos y nos permiten controlar elementos
circunstanciales de la página HTML. Por ejemplo si queremos distinguir si un enlace ya ha sido
visitado, si un enlace esta activo o mejor aún, si queremos distinguir cuando el ratón se encuentra sobre
el enlace (:hover) para aplicarle distintos estilos: usamos las pseudoclases.
Las palabras :hover, :visited, :link, :active son pseudoclases que se pueden añadir 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 sería 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 también tienen su hueco entre las propiedades de las hojas de estilos. Una de las más
conocidas es la de cambiar el símbolo 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 sería el resultado en el navegador:
Hojas de estilos - Estilos en listas 84

Esta sería la hoja de estilo:

/* Hoja de estilos básica 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 diseño de una página HTML. Pero
gracias a los estilos podemos adecuar los formularios tanto en lineas como en colores, saliéndonos 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>

<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 veríamos lo siguiente:

Esta sería la hoja de estilos para ese formulario con colores tan patrios.
/* Hoja de estilos básica 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 }
Maquetación con bloques <DIV> y estilos
En lugar de utilizar tablas para el diseño general de la página, 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 páginas.
<!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 - Maquetación 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 sería el resultado en el navegador:
Hojas de estilos - Maquetación con bloques <DIV> y estilos

89
Resumen de aplicación de estilos CSS

En el siguiente esquema se resume de forma agrupada el uso que se hace de los estilos. Para una visión
mas exhaustiva de cada propiedad se puede echar un vistazo al apéndice de este documento.
● Propiedades específicas de fuente

font
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
Hojas de estilos - Resumen de aplicación de estilos CSS

90
font-weight
● Propiedades específicas de texto
letter-spacing
text-align
text-decoration
text-indent
text-shadow
text-transform
white-space
word-spacing
● Propiedades específicas de color y fondo
background
background-attachment
background-color
background-image
background-position
background-positionX
background-positionY
background-repeat
● Propiedades específicas 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 específicas de dimensión
height
width
line-height
max-height

91
max-width
min-height
min-width
● Propiedades específicas de margen
margin, margin-bottom, margin-left, margin-top, margin-right
● Propiedades específicas de padding
padding, padding-bottom, padding-left, padding-top, padding-right
● Propiedades específicas de listas
list-style
list-style-position
list-style-type
marker-offset
● Propiedades específicas de posicionamiento
position
top
left
bottom
right
vertical-align
z-index
clip
overflow
overflow-x
overflow-y
● Propiedades específicas de outline
outline-color, outline-style, outline-width
● Propiedades específicas de tabla
border-collapse
border-spacing

92
caption-side
empty-cells
table-layout
● Propiedades específicas de clasificación
clear
display
float
visibility
● Propiedades específicas de internacionalización
direction
unicode-bidi
● Propiedades específicas de longitud
Absolute Lengths
Relative Length

93
11.XHTML
Más allá del estándar HTML y basándose en los principios de XML ha surgido un nuevo tipo de
documento: XHTML. Aparentemente el código no cambia mucho respecto a la sintaxis de HTML,
aunque para que un documento sea válido debe cumplir los requisitos mínimos de XML:
● Debe tener un título
● Todas las etiquetas deben cerrarse
● Los atributos deben tener algún valor
Conviene ir conociendo este estándar ya que es probable que la tendencia sea converger hacia los
contenidos XML.
Veamos un simple ejemplo. Obsérvese el cambio en la definición de tipo de documento (DTD), la
declaración como documento XML, y el hecho de que incluso las etiquetas que no tienen etiqueta de
cierre (como <hr>), se cierran añadiendo 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 extraído de la especificación de la w3c, a la que se han añadido
los atributos y eventos disponibles.
Des
Nombr Atributos Descripción
uso
accesskey, charset, class, coords, dir, href, hreflang, id,
lang, name, onBlur, onClick, onDblClick, onFocus,
onKeyDown, onKeyPress, onKeyUp, onMouseDown,
A Anchor o enlace
onMouseMove, onMouseOut, onMouseOver,
onMouseUp, rel, rev, shape, style, tabindex, target, title,
type
abbreviated form (e.g., WWW,
ABBR
HTTP, etc.)
ACRONYM Acrónimo
ADDRESS Dirección del autor
Des
APPLET uso
Applet de java
accesskey, alt, class, coords, dir, href, id, lang, nohref,

notab, onBlur, onClick, onDblClick, onFocus,
AREA Área de un mapa de imagen
onMouseUp, shape, style, tabindex, taborder , target ,
title, type
class, dir, id, lang, onClick, onDblClick, onKeyDown,
onKeyPress, onKeyUp, onMouseDown,
B Texto en negrita
onMouseUp, style, title
BASE href, target URI base del documento
BASEFONT E D Tamaño base de la fuente
BDO I18N BiDi over-ride
BIG Texto de tamaño grande
cite, class, dir, id, lang, onClick, onDblClick,
BLOCKQUOTE long quotation
BODY El cuerpo del documento
BR class, clear, id, style, title Salto de linea forzado
Referencia HTML - Referencia HTML 95

accesskey, class, dir, disabled, id, lang, name, onBlur,

onClick, onDblClick, onFocus, onKeyDown,
BUTTON onKeyPress, onKeyUp, onMouseDown, botón
onMouseUp, style, tabindex, title, type, value
align, class, dir, id, lang, onClick, onDblClick,
CAPTION Título de tabla
onMouseUp, style, title, valign
onMouseDown, onMouseMove, onMouseOut, Abreviatura de <DIV
CENTER D
onMouseOver, onMouseUp, style, title align=”center”>
CITE cita
CODE Código de programa
align, char, charoff, class, dir, id, lang, onClick,
onDblClick, onKeyDown, onKeyPress, onKeyUp,
COL onMouseDown, onMouseMove, onMouseOut, Columna de tabla
onMouseOver, onMouseUp, span, style, title, valign,
width
COLGROUP onMouseDown, onMouseMove, onMouseOut, Grupo de columnas de tabla
onMouseOver, onMouseUp, span, style, title, valign,
width
DD descripción de definición
DEL Texto eliminado
DFN Listado de directorio
DIR D
align, class, dir, id, lang, nowrap, onClick, onDblClick,
onKeyDown, onKeyPress, onKeyUp, onMouseDown, Contenedor de lenguaje o estilo
DIV
onMouseMove, onMouseOut, onMouseOver, generico
class, compact, dir, id, lang, onClick, onDblClick,
DL Lista de definiciones
onMouseUp, style, title, type


onKeyPress, onKeyUp, onMouseDown, Termino de una lista de
DT
onMouseMove, onMouseOut, onMouseOver, definiciones
EM Énfasis
onKeyPress, onKeyUp, onMouseDown, Grupo de controles de un
FIELDSET
onMouseMove, onMouseOut, onMouseOver, formulario
FONT class, color, dir, face, id, lang, size, style, title D Formato de fuente
accept, action, charset, class, dir, enctype, id, lang,
method, name, onClick, onDblClick, onKeyDown,
FORM onKeyPress, onKeyUp, onMouseDown, Formulario interactivo
onMouseUp, onReset, onSubmit, style, target, title
bordercolor, class, frameborder, id, longdesc,
FRAME marginheight, marginwidth, name, noresize, scrolling, Marco o subventana
src, style, title
border, bordercolor, class, cols, frameborder ,
FRAMESET División de ventana
framespacing, id, onLoad, onUnload, style, title
H1 Cabecera (la más grande)
H2 Cabecera
align, class, dir, id, lang, onClick, onDblClick,
H3 onKeyDown, onKeyPress, onKeyUp, onMouseDown, Cabecera
H4 onMouseMove, onMouseOut, onMouseOver, Cabecera
H5 Cabecera
H6 Cabecera (la más pequeña)
HEAD Cabecera del documento
align, class, color , dir, id, lang, noshade, onClick,
HR Linea horizontal
onMouseDown, onMouseMove, onMouseOut,
onMouseOver, onMouseUp, size, style, title, width
Elemento raiz del documento
HTML
HTML
I Estilo de texto en cursiva
align, class, frameborder, height, id, longdesc,
IFRAME marginheight, marginwidth, name, scrolling, src, style, Marco o frame interno
title, width

align,alt, border, class, controls , dir, dynsrc , height,

hspace, id, ismap, lang, longdesc, loop , lowsrc , name ,
onAbort, onClick, onDblClick, onError, onKeyDown,
IMG onKeyPress, onKeyUp, onLoad, onMouseDown, Imágenes insertadas
onMouseUp, src, start , style, title, usemap, vspace,
width
accept, accesskey, align, alt, border , checked, class, dir,
disabled, id, lang,
maxlength, name, notab , onBlur, onChange, onClick,
INPUT onDblClick, onFocus, onKeyDown, onKeyPress, Campo o control de formulario
onKeyUp, onMouseDown, onMouseMove,
onMouseOut, onMouseOver, onMouseUp, onSelect,
size, src, tabindex, taborder , title, type, usemap, value
INS Texto insertado
ISINDEX E D Prompt de una única línea
Texto que debe ser insertado
KBD
por el usuario
accesskey, class, dir, for, id, lang, onBlur, onClick,
onDblClick, onFocus, onKeyDown, onKeyPress, Etiqueta de un campo de
LABEL
onKeyUp, onMouseDown, onMouseMove, formulario
onMouseOut, onMouseOver, onMouseUp, style, title
accesskey, align, class, dir, id, lang, onClick,
onDblClick, onKeyDown, onKeyPress, onKeyUp, Título o leyenda de un grupo de
LEGEND
onMouseDown, onMouseMove, onMouseOut, campos
onMouseOver, onMouseUp, style, title
LI Elemento de lista
onMouseUp, style, title, type, value
charset, class, dir, href, hreflang, id, lang, media,
onClick, onDblClick, onKeyDown, onKeyPress,
LINK onKeyUp, onMouseDown, onMouseMove, Enlace independiente del medio
onMouseOut, onMouseOver, onMouseUp, rel, rev,
style, target, title, type
class, dir, id, lang, name, onClick, onDblClick,
onKeyDown, onKeyPress, onKeyUp, onMouseDown, Mapa de imágenes del lado
MAP
onMouseMove, onMouseOut, onMouseOver, cliente
MENU D Lista de menu

META charset , content, dir, http_equiv, lang, name, scheme Metainformacion de la página
Contenido alternativo para
NOFRAMES navegadores que no soporten
los frames o marcos
Contenido alternativo para
NOSCRIPT navegadores que no soporten
scripts.
align, archive, border, class, classid, codebase,
codetype, data, declare, dir, height, hspace, id, lang,
name, notab, onClick, onDblClick, onKeyDown,
Objeto embebido generico
OBJECT onKeyPress, onKeyUp, onLoad, onMouseDown,
(flash, activeX, etc..)
onMouseUp, shapes, standby, style, tabindex, title, type,
usemap, vspace, width
OL Lista ordenada
onMouseUp, start, style, title, type
OPTGROUP Grupo de opciones
class, dir, disabled, id, label, lang, onClick, onDblClick,
onKeyDown, onKeyPress, onKeyUp, onMouseDown, Opción seleccionable de una
OPTION
onMouseMove, onMouseOut, onMouseOver, lista
onMouseUp, selected, style, title, value
align, class, dir, id, lang, onDblClick, onKeyDown,
P Parrafo
PARAM named property value
PRE Texto preformateado
onMouseUp, style, title, width
Q short inline quotation
S D Texto subrayado
Salida/output de un programa,
SAMP
scripts, etc..
SCRIPT Scripts

class, dir, disabled, id, lang, multiple, name, onBlur,

onChange, onClick, onDblClick, onFocus,
SELECT onKeyDown, onKeyPress, onKeyUp, onMouseDown, Lista o select de formularios
onMouseUp, size, style, tabindex, title
SMALL Estilo de texto pequeño
Contenedor de lenguaje o estilos
SPAN
generico
STRIKE D Texto rayado
STRONG Énfasis más fuerte
STYLE dir, lang, media, title, type Información de estilo
SUB Subtexto
SUP superscript
align, background, bgcolor, border, bordercolor,
bordercolordark , bordercolorlight , cellpadding,
cellspacing, class, cols, dir, frame, height, hspace , id,
lang, nowrap , onClick, onDblClick, onKeyDown,
TABLE Tabla
onMouseUp, rules, style, summary, title, valign , vspace
, width
TBODY Cuerpo de tabla
onMouseOver, onMouseUp, style, title, valign
abbr, align, background, bgcolor, bordercolor,
bordercolordark, bordercolorlight, char, charoff, class,
colspan, dir, headers, height, id, lang, nowrap, onClick,
TD onDblClick, onKeyDown, onKeyPress, onKeyUp, Celda de una tabla
onMouseOver, onMouseUp, rowspan, scope, style, title,
valign, width
accesskey, class, cols, dir, disabled, id, lang, name,
onBlur, onChange, onClick, onDblClick, onFocus,
TEXTAREA Campo de texto multinea
onMouseUp, onSelect, readonly, rows, style, tabindex,
title, wrap
TFOOT Pie de tabla
onMouseOver, onMouseUp, style, title,valign

TH ver TD Celda de cabecera de tabla

THEAD Cabecera de tabla
onMouseOver, onMouseUp, style, title, valign
TITLE Título de documento
align, background, bgcolor, bordercolor,
bordercolordark, bordercolorlight , char, charoff, class,
dir, id, lang, nowrap, onClick, onDblClick,
TR Fila de una tabla
onMouseUp, style, title, valign
Estilo de texto de teletipo o
TT
monoespaciado
U D Estilo de texto subrayado
UL Lista desordenada
onMouseUp, style, title, type
Instacia de una variable de
VAR
argumento de program

13.Referencia CSS2
Esta sería la referencia de propiedades de las hojas de estilos.
Extraída de la especificación de CSS2 de la w3c.
Aplicado a
Her
Valor (Por Porcentajes Grupo de
Nombre Valores eda
inicial defecto: (Defecto: N/D) medios
do?
todos)
<angle> | [[ left-side | far-left |
left | center-left | center |
'azimuth' center-right | right | far-right | center yes aural
right-side ] || behind ] |
leftwards | rightwards | inherit
['background-color' ||
'background-image' || allowed on
'background' 'background-repeat' || XX no 'background- visual
'background-attachment' || position'
'background-position'] | inherit
'background-
scroll | fixed | inherit scroll no visual
attachment'
'background-
<color> | transparent | inherit transparent no visual
color'
'background-
<uri> | none | inherit none no visual
image'
[ [<percentage> | <length> ]
block-level
'background- {1,2} | [ [top | center | bottom] refer to the size
0% 0% and replaced no visual
position' || [left | center | right] ] ] | of the box itself
elements
inherit
'background- repeat | repeat-x | repeat-y | no-
repeat no visual
repeat' repeat | inherit
see
[ 'border-width' || 'border-style'
'border' individual no visual
|| <color> ] | inherit
properties
'table' and
'border-collapse' collapse | separate | inherit collapse 'inline-table' yes visual
elements
see
<color>{1,4} | transparent |
'border-color' individual no visual
inherit
properties
Referencia CSS2 - Referencia CSS2 102

Aplicado a
Her
Nombre Valores eda
do?
todos)
'table' and
'border-spacing' <length> <length>? | inherit 0 'inline-table' yes visual
elements
see
'border-style' <border-style>{1,4} | inherit individual no visual
properties
'border-top'
see
'border-right' [ 'border-top-width' || 'border-
individual no visual
'border-bottom' style' || <color> ] | inherit
properties
'border-left'
'border-top-
color' 'border-
the value of
right-color'
<color> | inherit the 'color' no visual
'border-bottom-
property
color' 'border-
left-color'
'border-top-
style' 'border-
right-style'
<border-style> | inherit none no visual
'border-bottom-
style' 'border-
left-style'
'border-top-
width' 'border-
right-width'
<border-width> | inherit medium no visual
'border-bottom-
width' 'border-
left-width'
see
'border-width' <border-width>{1,4} | inherit individual no visual
properties
refer to height
<length> | <percentage> | auto positioned
'bottom' auto no of containing visual
| inherit elements
block
'table-
top | bottom | left | right |
'caption-side' top caption' yes visual
inherit
elements
block-level
'clear' none | left | right | both | inherit none no visual
elements

Aplicado a
Her
Nombre Valores eda
do?
todos)
block-level
'clip' <shape> | auto | inherit auto and replaced no visual
elements
depends on
'color' <color> | inherit yes visual
user agent
[ <string> | <uri> | <counter> |
:before and :
attr(X) | open-quote | close-
'content' empty string after pseudo- no all
quote | no-open-quote | no-
elements
close-quote ]+ | inherit
'counter- [ <identifier> <integer>? ]+ |
none no all
increment' none | inherit
[ <identifier> <integer>? ]+ |
'counter-reset' none no all
none | inherit
[ 'cue-before' || 'cue-after' ] |
'cue' XX no aural
inherit
'cue-after' <uri> | none | inherit none no aural
'cue-before' <uri> | none | inherit none no aural
[ [<uri> ,]* [ auto | crosshair |
default | pointer | move | e-
resize | ne-resize | nw-resize | visual,
'cursor' auto yes
n-resize | se-resize | sw-resize | interactive
s-resize | w-resize| text | wait |
help ] ] | inherit
all elements,
'direction' ltr | rtl | inherit ltr yes visual
but see prose
inline | block | list-item | run-in
| compact | marker | table |
inline-table | table-row-group |
table-header-group | table-
'display' inline no all
footer-group | table-row | table-
column-group | table-column |
table-cell | table-caption | none
| inherit
<angle> | below | level | above
'elevation' level yes aural
| higher | lower | inherit
'table-cell'
'empty-cells' show | hide | inherit show yes visual
elements

Aplicado a
Her
Nombre Valores eda
do?
todos)
all but
positioned
'float' left | right | none | inherit none elements and no visual
generated
content
[ [ 'font-style' || 'font-variant' ||
'font-weight' ]? 'font-size' [ /
see allowed on
'line-height' ]? 'font-family' ] |
'font' individual yes 'font-size' and visual
caption | icon | menu |
properties 'line-height'
message-box | small-caption |
status-bar | inherit
[[ <family-name> | <generic-
depends on
'font-family' family> ],]* [<family-name> | yes visual
user agent
<generic-family>] | inherit
yes,
the
com
<absolute-size> | <relative- pute refer to parent
'font-size' size> | <length> | medium d element's font visual
<percentage> | inherit valu size
e is
inhe
rited
'font-size-adjust' <number> | none | inherit none yes visual
normal | wider | narrower |
ultra-condensed | extra-
condensed | condensed | semi-
'font-stretch' normal yes visual
condensed | semi-expanded |
expanded | extra-expanded |
ultra-expanded | inherit
'font-style' normal | italic | oblique | inherit normal yes visual
'font-variant' normal | small-caps | inherit normal yes visual
normal | bold | bolder | lighter |
'font-weight' 100 | 200 | 300 | 400 | 500 | 600 normal yes visual
| 700 | 800 | 900 | inherit

Aplicado a
Her
Nombre Valores eda
do?
todos)
all elements
but non-
replaced
inline
<length> | <percentage> | auto
'height' auto elements, no see prose visual
| inherit
table
columns,
and column
groups
refer to width
'left' auto no of containing visual
| inherit elements
block
'letter-spacing' normal | <length> | inherit normal yes visual
refer to the font
normal | <number> | <length> |
'line-height' normal yes size of the visual
<percentage> | inherit
element itself
elements
[ 'list-style-type' || 'list-style-
with
'list-style' position' || 'list-style-image' ] | XX yes visual
'display: list-
inherit
item'
elements
with
'list-style-image' <uri> | none | inherit none yes visual
'display: list-
item'
elements
'list-style- with
inside | outside | inherit outside yes visual
position' 'display: list-
item'
disc | circle | square | decimal |
decimal-leading-zero | lower-
roman | upper-roman | lower-
elements
greek | lower-alpha | lower-
with
'list-style-type' latin | upper-alpha | upper-latin disc yes visual
'display: list-
| hebrew | armenian | georgian |
item'
cjk-ideographic | hiragana |
katakana | hiragana-iroha |
katakana-iroha | none | inherit

Aplicado a
Her
Nombre Valores eda
do?
todos)
refer to width
'margin' <margin-width>{1,4} | inherit XX no of containing visual
block
'margin-top'
refer to width
'margin-right'
<margin-width> | inherit 0 no of containing visual
'margin-bottom'
block
'margin-left'
elements
with
'marker-offset' <length> | auto | inherit auto no visual
'display:
marker'
'marks' [ crop || cross ] | none | inherit none page context N/A visual, paged
all elements
except non-
replaced refer to height
<length> | <percentage> | none
'max-height' none inline no of containing visual
| inherit
elements and block
table
elements
all elements
except non-
replaced refer to width
<length> | <percentage> | none
'max-width' none inline no of containing visual
| inherit
elements and block
table
elements
all elements
except non-
replaced refer to height
<length> | <percentage> |
'min-height' 0 inline no of containing visual
inherit
elements and block
table
elements
all elements
except non-
replaced refer to width
<length> | <percentage> | UA
'min-width' inline no of containing visual
inherit dependent
elements and block
table
elements

Aplicado a
Her
Nombre Valores eda
do?
todos)
block-level
'orphans' <integer> | inherit 2 yes visual, paged
elements
see
[ 'outline-color' || 'outline-style' visual,
'outline' individual no
|| 'outline-width' ] | inherit interactive
properties
visual,
'outline-color' <color> | invert | inherit invert no
interactive
visual,
'outline-style' <border-style> | inherit none no
interactive
visual,
'outline-width' <border-width> | inherit medium no
interactive
block-level
visible | hidden | scroll | auto |
'overflow' visible and replaced no visual
inherit
elements
refer to width
'padding' <padding-width>{1,4} | inherit XX no of containing visual
block
'padding-top'
refer to width
'padding-right'
<padding-width> | inherit 0 no of containing visual
'padding-bottom'
block
'padding-left'
block-level
'page' <identifier> | auto auto yes visual, paged
elements
'page-break- auto | always | avoid | left | block-level
auto no visual, paged
after' right | inherit elements
'page-break- auto | always | avoid | left | block-level
auto no visual, paged
before' right | inherit elements
'page-break- block-level
avoid | auto | inherit auto yes visual, paged
inside' elements
see descriptions
[ [<time> | <percentage>]{1,2} depends on of 'pause-
'pause' no aural
] | inherit user agent before' and
'pause-after'
depends on
'pause-after' <time> | <percentage> | inherit no see prose aural
user agent
depends on
'pause-before' <time> | <percentage> | inherit no see prose aural
user agent

Aplicado a
Her
Nombre Valores eda
do?
todos)
<frequency> | x-low | low |
'pitch' medium yes aural
medium | high | x-high | inherit
'pitch-range' <number> | inherit 50 yes aural
<uri> mix? repeat? | auto |
'play-during' auto no aural
none | inherit
all elements,
static | relative | absolute | fixed but not to
'position' static no visual
| inherit generated
content
[<string> <string>]+ | none | depends on
'quotes' yes visual
inherit user agent
'richness' <number> | inherit 50 yes aural
refer to width
'right' auto no of containing visual
| inherit elements
block
<length>{1,2} | auto | portrait | the page
'size' auto N/A visual, paged
landscape | inherit context
normal | none | spell-out |
'speak' normal yes aural
inherit
elements that
have table
'speak-header' once | always | inherit once yes aural
header
information
'speak-numeral' digits | continuous | inherit continuous yes aural
'speak-
code | none | inherit none yes aural
punctuation'
<number> | x-slow | slow |
'speech-rate' medium | fast | x-fast | faster | medium yes aural
slower | inherit
'stress' <number> | inherit 50 yes aural
'table' and
'table-layout' auto | fixed | inherit auto 'inline-table' no visual
elements

Aplicado a
Her
Nombre Valores eda
do?
todos)
depends on
left | right | center | justify | user agent block-level
'text-align' yes visual
<string> | inherit and writing elements
direction
no
none | [ underline || overline || (see
'text-decoration' none visual
line-through || blink ] | inherit pros
e)
refer to width
<length> | <percentage> | block-level
'text-indent' 0 yes of containing visual
inherit elements
block
none | [<color> || <length> no
<length> <length>? ,]* (see
'text-shadow' none visual
[<color> || <length> <length> pros
<length>?] | inherit e)
capitalize | uppercase |
'text-transform' none yes visual
lowercase | none | inherit
refer to height
'top' auto no of containing visual
| inherit elements
block
normal | embed | bidi-override | all elements,
'unicode-bidi' normal no visual
inherit but see prose
baseline | sub | super | top | inline-level refer to the
text-top | middle | bottom | and 'table- 'line-height' of
'vertical-align' baseline no visual
text-bottom | <percentage> | cell' the element
<length> | inherit elements itself
visible | hidden | collapse |
'visibility' inherit no visual
inherit
[[<specific-voice> | <generic-
depends on
'voice-family' voice> ],]* [<specific-voice> | yes aural
user agent
<generic-voice> ] | inherit
<number> | <percentage> |
refer to
'volume' silent | x-soft | soft | medium | medium yes aural
inherited value
loud | x-loud | inherit
block-level
'white-space' normal | pre | nowrap | inherit normal yes visual
elements

Aplicado a
Her
Nombre Valores eda
do?
todos)
block-level
'widows' <integer> | inherit 2 yes visual, paged
elements
all elements
but non-
replaced
refer to width
<length> | <percentage> | auto inline
'width' auto no of containing visual
| inherit elements,
block
table rows,
and row
groups
'word-spacing' normal | <length> | inherit normal yes visual
positioned
'z-index' auto | <integer> | inherit auto no visual
elements

14.Bibliografía, enlaces
Bibliografía
● 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
Bibliografía, enlaces - Bibliografía, enlaces 112

HTML (MuyBueno)

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

HTML (MuyBueno)

Загружено:

Авторское право:

Доступные форматы

Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML

Instituto Cuatrovientos – Pamplona/Iruñea

Autor: Pello Xabier Altadill Izura

Distribuido bajo licencia Copyleft.

Marcos o Frames anidados..................................................................................................................60

Veamos la primera página HTML con las etiquetas mas básicas:

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

Esto sería lo que veríamos en el navegador:

La cabecera con su titulo...

Texto básico - Texto básico 6

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

<h1>Esto es una cabecera de tama&ntilde;o 1</h1>

<h2>Esto es una cabecera de tama&ntilde;o 2</h2>

<h3>Esto es una cabecera de tama&ntilde;o 3</h3>

<h4>Esto es una cabecera de tama&ntilde;o 4</h4>

<h5>Esto es una cabecera de tama&ntilde;o 5</h5>

<h6>Esto es una cabecera de tama&ntilde;o 6</h6>

Y este sería el resultado:

Texto básico - Cabeceras, <H1>,<H2>,..,<H6> 7

Párrafos y saltos de linea <p>, <br>

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

<h1>P&aacute;rrafos y saltos de linea</h1>

Texto básico - Párrafos y saltos de linea <p>, <br> 8

<p> Seg&uacute;n una revista alemana de inform&aacute;tica, s&oacute;lo con

Formatos básicos, <b>, <i>, <pre> y lineas <hr>

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

Texto básico - Formatos básicos, <b>, <i>, <pre> y lineas <hr>

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

<!-- Formatos básicos de texto

<p> <i>640Kb de memoria es m&aacute;s que suficiente para cualquier

Y en esta asignatura nos moveremos por la WWW.

En este documento se ven otras etiquetas:

Esto es lo que veríamos:

Texto básico - Formatos básicos, <b>, <i>, <pre> y lineas <hr>

Texto básico - Formatos básicos, <b>, <i>, <pre> y lineas <hr>

Y así es como quedaría:

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

Texto básico - Caracteres especiales &eacute;, &copy;,..

En la siguiente página podemos ver su uso:

<h1>&aacute; &nbsp; &eacute; &nbsp; &iacute; &nbsp; &oacute; &nbsp; &uacute;</h1>

Y así es como los veríamos:

Texto básico - Atributos de <body> 13

documento. Veamos su uso:

int main (int argc, char *argv[], envp *char[]) {

printf("Esto es codigo C\n");

Y este sería el resultado:

Texto básico - Atributos de <body> 14

<h1>Jugando con las FUENTES</h1>

Texto básico - Fuentes <FONT> 15

<font size="14" color="blue">BLUE</font>&nbsp;&nbsp;

Y este sería el resultado:

Texto básico - Fuentes <FONT> 16

Líneas horizontales <hr>

<h1>Jugando con lineas horizontales</h1>

<h1>Esto es una cabecera de tamaño 1</h1>

<h2>Esto es una cabecera de tamaño 2</h2>

<h3>Esto es una cabecera de tamaño 3</h3>

<h4>Esto es una cabecera de tamaño 4</h4>

<h5>Esto es una cabecera de tamaño 5</h5>

<h6>Esto es una cabecera de tamaño 6</h6>

<h1>Párrafos y saltos de linea</h1>

<p> Según una revista alemana de informática, sólo con

<p> <i>640Kb de memoria es más que suficiente para cualquier

Caracteres especiales é, ©,..

Texto básico - Caracteres especiales é, ©,..

<h1>á é í ó ú</h1>

int main (int argc, char argv[], envp char[]) {

<font size="14" color="blue">BLUE</font>

<h2>Linea normal <hr></h2>

<h1><a href="http://www.w3.org">texto enlazado<A></h1>

<h1>Y la enlazamos con <a href="#nombre"> ir a zona </a></h1>

En este curso aprenderás

<h2>Se utilizan las etiquetas <table>, <tr> y <td></h2>