Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Lenguaje HTML
Manual de lenguaje HTML a través de ejemplos
- 1
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
Lenguaje HTML
1.Introducción............................................................................................................................................4
2.Texto básico............................................................................................................................................6
Cabeceras, <H1>,<H2>,..,<H6>............................................................................................................6
Párrafos y saltos de linea <p>, <br>......................................................................................................7
Formatos básicos, <b>, <i>, <pre> y lineas <hr>.................................................................................9
Caracteres especiales é, ©,.............................................................................................12
Atributos de <body>............................................................................................................................13
Fuentes <FONT>.................................................................................................................................15
Líneas horizontales <hr>.....................................................................................................................17
Etiquetas no estándar...........................................................................................................................18
3.Imágenes...............................................................................................................................................20
Insertar imágenes en un documento<img>..........................................................................................20
Imagen como fondo de página............................................................................................................21
4.Enlaces..................................................................................................................................................23
Enlaces o hipervínculos a otras páginas.<a>.......................................................................................23
Atributos de body para hipervinculos..................................................................................................24
Enlaces internos en una página............................................................................................................25
5.Listas.....................................................................................................................................................28
Listas no numeradas o desordenadas <ul>, <li>.................................................................................28
Listar ordenadas...................................................................................................................................29
Listas anidadas....................................................................................................................................31
6.Tablas....................................................................................................................................................33
Tablas simples <TABLE>, <TR>, <TD>...........................................................................................33
Atributos de las tablas.........................................................................................................................35
Uniendo celdas: Colspan y Rowspan..................................................................................................36
Etiquetas de zona de tabla: <TH>, <THEAD>, <TBODY>, <TFOOT>............................................39
Tablas anidadas...................................................................................................................................41
Maquetación de documentos con tablas..............................................................................................43
7.Formularios...........................................................................................................................................48
Formularios básico: <FORM>, <INPUT>, texto y botones...............................................................48
Formularios maquetados en una tabla y <TEXTAREA>....................................................................49
Listas desplegables <SELECT>, <OPTION>.....................................................................................51
Campos tipo CHECKBOX y RADIO.................................................................................................53
Campos ocultos y de envío de ficheros...............................................................................................57
Otros elementos: imágenes, <LEGEND>, <LABEL>........................................................................58
8.Marcos...................................................................................................................................................61
Definición de Marcos o Frames: <FRAMESET>, <FRAME> y <NOFRAMES>............................61
Marcos o Frames en columnas............................................................................................................63
- 2
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
- 3
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
</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:
Introducción - Introducción 5
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
... y la definición del juego de caracteres que necesita la pagina (depende del idioma)
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
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. Los navegadores se tragan cualquier cosa y suelen ser
tolerantes aún así una cabecera correcta puede ser determinante en ocasiones para que el navegador
sepa lo que tiene que hacer.
Importantemezclando
Las etiquetas HTML pueden escribirse en mayusculas o minusculas o
ambas, el navegador las interpretara igual. Por ejemplo:
<Body> = <body> = <BODY>
De todas formas conviene acostumbrarse a usar las minúsculas ya que en el estandar XHTML actual
se deben usar las minúsculas.
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:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</body>
</html>
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>
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:
<h1>Formatos básicos</h1>
<br>
Esta asignatura me tiene <b>negro</b> <br>
<h3>Frase celebre</h3>
persona</i><br>
Bill Gates
</p>
</body>
</html>
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.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 04 :: La vista ::</title>
<!-- Aquí se configura el juego de caracteres de la página -->
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<!-- La prueba del oftalmólogo con cabeceras -->
<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>
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:
● á = á
● é = é
● í = í
● ó = ó
● ú = ú
● Á = Á
● É = É
● Í = Í
● Ó = Ó
● Ú = Ú
● ñ = ñ
● Ñ = Ñ
● © = ©
● € = €
● ¿ = ¿
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:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 00 :: Caracteres especiales ::</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<h1>ñ ˜ © > < ®
ü</h1>
</body>
</html>
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
documento. Veamos su uso:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 01 :: Atributos de <body> : Colores ::
</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</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 i = 0;
return 1;
}
</pre>
</body>
</html>
Y este sería el resultado:
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>.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 02 :: Jugando con las fuentes ::</title>
<!-- Con la etiqueta FONT podemos aplicar distintos formatos al texto como color,
tamaño, fuente, etc -->
<font size="14" color="aqua">AQUA</font>
<font size="14" color="black">BLACK</font>
<font size="14" color="blue">BLUE</font>
<br><br>
<font color="red" face="Verdana">Esto lo pongo en rojo y con fuente Verdana usando
<FONT></font>
<br><br>
<!--
La etiqueta font esta desfasada y conviene no usarla
¿Con qué la sustituimos? con <DIV>
-->
<!-- Con la etiqueta DIV se crean bloques de contenido HTML al que se le pueden
aplicar estilos -->
<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>
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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 03 :: Lineas horizontales ::</title>
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:
</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<h1 align="center">Etiquetas fuera del estándar</h1>
<!-- El explorer es capaz de interpretar esta etiqueta para reproducir sonido -->
<h1>El sonido de fondo: etiqueta <bgsound></h1>
<bgsound src="sonido.wav" loop="10">
</body>
</html>
Y este sería el resultado:
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.
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:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 06 :: Imágenes ::</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<h1 align="center">Insertando imágenes en un documento HTML</h1>
<div align="center">
Esto que se ve aquí es el logotipo
<!-- Un archivo de imagen se mete simplemente con la etiqueta SRC -->
<img src="logo-cuatrovientos.gif" border=0 title="logotipo modificado">
del instituto Cuatrovientos
</div>
<br>
<br>
<div align="center">
Esto que se ve aquí es el logotipo
<!-- Un archivo de imagen se mete simplemente con la etiqueta SRC -->
<img src="logo-cuatrovientos.gif" border=0 title="logotipo" align="middle">
del instituto Cuatrovientos
</div>
<br>
<div align="center">
Esto que se ve aquí es el logotipo
<!-- Un archivo de imagen se mete simplemente con la etiqueta SRC -->
<img src="logo-cuatrovientos.gif" border=0 title="logotipo" align="middle"
height="300" width="600">
del instituto Cuatrovientos
</div>
<br>
</body>
</html>
<!-- Para meter una imagen de fondo usamos la propiedad background -->
<body background="logo-cuatrovientos.gif">
</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.
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.
<h1>Enlaces o HIPERVINCULOS</h1>
<br>
<br>
<!-- Para poner enlaces a otras webs se mete una URL completa -->
<a href="http://www.google.es">Ir a Google</a>
</body>
</html>
Y este sería el resultado:
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...)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 01 :: Atributos de <body> para
hipervinculos ::</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<!--
Atributos para BODY
link: color de los enlaces que no se han pinchado
vlink: color para los enlaces ya visitados
alink: color para los enlaces activos
-->
<body link="red" vlink="green" alink="black">
<H1>
Color de los hipervinculos y tipos
</H1>
</body>
</html>
En la definición del anchor no hay porque poner texto. Como se puede apreciar, el enlace interno va
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:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 02 :: Enlaces internos del documento ::
</title>
<!-- Aquí se configura el juego de caracteres de la página -->
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</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>
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.
<h1>Listas simples</h1>
</body>
</html>
Y este sería el resultado:
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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 04 :: Listas ordenadas ::</title>
<!-- Aquí se configura el juego de caracteres de la página -->
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<h1>Una lista ordenada: <ol></h1>
<!-- metemos una linea horizontal sin efecto 3D gracias al atributo shade -->
<hr noshade>
<font size="6+">
Ingredientes para un gazpacho
<ol>
<li>Tomates</li>
<li>Pepino</li>
<li>Pimiento verde</li>
<li>Ajo</li>
<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 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.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 04 :: Listas anidadas ::</title>
<!-- Aquí se configura el juego de caracteres de la página -->
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<h1>Una lista ordenada: <ol></h1>
<!-- metemos una linea horizontal sin efecto 3D gracias al atributo shade -->
<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>
Y este sería el resultado:
Existen otro tipo de listas, las de definiciones (<dl>) pero su uso es muy poco habitual.
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.
</tr>
<tr>
<!-- Y cada celda con la etiqueta TD -->
<td>Juan</td>
<td>Palomo</td>
<td>33445532L</td>
<td>34</td>
</tr>
<tr>
<!-- Cada celda con la etiqueta TD -->
<td>Darth</td>
<td>Vader</td>
<td>66666666H</td>
<td>26</td>
</tr>
<tr>
<!-- Cada celda con la etiqueta TD -->
<td>Miguel</td>
<td>Indurain</td>
<td>45326853X</td>
<td>39</td>
</tr>
</table>
</body>
</html>
</body>
</html>
</body>
</html>
<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>
<hr size="1" color="black">
<tbody>
<tr>
<!-- Cada celda con la etiqueta TD -->
<td>Darth</td>
<td>Vader</td>
<td>66666666H</td>
<td>26</td>
</tr>
<tr>
<!-- Y cada celda con la etiqueta TD -->
<td>Juan</td>
<td>Palomo</td>
<td>33445532L</td>
<td>34</td>
</tr>
<tr>
<!-- Cada celda con la etiqueta TD -->
<td>Darth</td>
<td>Vader</td>
<td>66666666H</td>
<td>26</td>
</tr>
<tr>
<!-- Cada celda con la etiqueta TD -->
<td>Miguel</td>
<td>Indurain</td>
<td>45326853X</td>
<td>39</td>
</tr>
</tbody>
</table>
</body>
</html>
Tablas anidadas
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:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 04 :: Tablas dentro de tablas</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
</tr>
</table>
</body>
</html>
Para la maquetación o diseño general de las paginas web se pueden utilizar entre otras soluciones las
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.
Veamos un simple ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 05 :: Maquetación con TABLAS</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
</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.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 06 :: Maquetación con TABLAS</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body leftmargin="0" topmargin="0">
</body>
</html>
Y este sería el resultado:
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.
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:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 00 :: Mi primer formulario ::</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<h2>Se utilizan las etiquetas <INPUT> con atributos type, name y value</h2>
<hr size="1" color="black">
</body>
</html>
Ahora vamos a ver las listas que se ve
Y este sería el resultado:
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.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 01 :: Un formulario maquetado ::
</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<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>
<!-- Al final siempre se meten los botones de envio y reset-->
<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>
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.
<h2>Listas</h2>
<hr size="1" color="black">
<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>
<!-- Los campos de texto con mas de una linea se hacen con TEXTAREA -->
<td><textarea name="descripcion">Contenido inicial...</textarea></td>
</tr>
<tr>
<td>Estado civil:</td>
<!-- Las listas se hacen con <SELECT> y <OPTION> -->
<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>
<!-- Las listas se hacen con <SELECT> y <OPTION> -->
<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>
<tr>
<!-- Al final siempre se meten los botones de envio y reset-->
</table>
</form>
</body>
</html>
Y este sería el resultado:
</optgroup>
<optgroup label="Amiguitas">
<option value="3">Bea</option>
<option value="4">Nerea</option>
<option value="5">Raquel</option>
<optgroup label="Malvados">
<option value="6">Lord Beider</option>
<option value="7">Lord Maula</option>
</optgroup>
</select>
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
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:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 03 :: Checkbox y Radiobuttons::</title>
<h2>Checkbox y Radiobuttons</h2>
<hr size="1" color="black">
<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>
<!-- Los campos de texto con mas de una linea se hacen con TEXTAREA -->
<td><textarea name="descripcion">Contenido inicial...</textarea></td>
</tr>
<tr>
<td>Posesiones:</td>
<!-- Los checkbox se hacen con el tipo "checkbox" -->
<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>
<!-- Los radiobuttons se hacen con el tipo radio -->
<!-- Todos los elementos deben tener el mismo "name" -->
<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>
<!-- Al final siempre se meten los botones de envio y reset-->
<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>
Formularios - 56
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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"
<tr>
<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>
<!-- Este campo permite seleccionar y enviar un fichero -->
<td><input type="file" name="fichero" value=""></td>
</tr>
<tr>
<!-- Al final siempre se meten los botones de envio y reset-->
<td><input type="submit" name="boton_submit" value="Enviar"></td>
<td><input type="reset" name="boton_vaciar" value="Vaciar"></td>
</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.
<tr>
<!-- En lugar de poner un texto simple se puede meter dentro de label
Relacionamos el label con el input a traves de los atributos for e
id
</table>
</form>
</legend>
</body>
</html>
Y este sería el resultado:
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.
<!-- Para hacer una pagina con frames primero hay que crear la pagina en la que
se definen los FRAMES. En esa página se especifica el numero de frames,
la direccion de la pagina de cada frame, la anchura, etc..
-->
<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>
Y este sería el resultado:
<!-- Para hacer una pagina con frames primero hay que crear la pagina en la que
se definen los FRAMES. En esa página se especifica el numero de frames,
la direccion de la pagina de cada frame, la anchura, etc..
-->
<frameset cols="20%,20%,20%,20%,20%" border="5" frameborder="2">
<frame src="menu.html" name="menu">
<frame src="principal.html" name="principal">
<frame src="menu.html" name="menu">
<frame src="principal.html" name="principal">
<frame src="menu.html" name="menu">
<noframes>
Lo sentimos pero su navegador no soporta FRAMES
</noframes>
</frameset>
</html>
Este sería el resultado:
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:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 01 :: FRAMES anidados ::</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<!-- Para hacer una pagina con frames primero hay que crear la pagina en la que
se definen los FRAMES. En esa página se especifica el numero de frames,
la direccion de la pagina de cada frame, la anchura, etc..
-->
<frameset rows="20%,80%" border="5" frameborder="2">
<frame src="cabecera.html" name="cabecera">
<noframes>
Lo sentimos pero su navegador no soporta FRAMES
</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.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 03 :: FRAMES anidado + NORESIZE ::</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<!-- Para hacer una pagina con frames primero hay que crear la pagina en la que
se definen los FRAMES. En esa página se especifica el numero de frames,
la direccion de la pagina de cada frame, la anchura, etc..
-->
<frameset rows="20%,80%" border="5" frameborder="2" >
<frame src="cabecera.html" name="cabecera" noresize >
</html>
Y este sería el resultado:
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:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 04 :: La etiqueta IFRAME ::</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</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>
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>
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.
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.
<!-- Esta primera especifica que el contenido es texto html y que debe
usarse el juego de caracteres iso-8859-1 -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- Este meta sirve para influir en el protocolo HTTP metiendo cabeceras -->
<META http-equiv="Expires" content="Mon, 11 Aug 2005 16:12:03 GMT">
<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>
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>
<!-- Las etiquetas invisibles META se meten en la cabecera -->
<!-- Esta primera especifica que el contenido es texto html y que debe
usarse el juego de caracteres iso-8859-1 -->
<!-- Este meta sirve para influir en el protocolo HTTP metiendo cabeceras -->
<!-- En este caso para redirigir la peticion a otra pagina en 3 segundos-->
<meta HTTP-EQUIV="refresh" CONTENT="3; URL=dire_html05.html">
</body>
</html>
10.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: <b> debe cerrarse con </b>
● Los atributos deben tener algún valor entre comillas: por ejemplo esto no es válido
<select name=”nombre” multiple>
● La anidación de etiquetas debe ser coherente.
Conviene ir conociendo este estándar ya que es probable que la tendencia sea converger hacia los
contenidos XML. Con este estándar el consorcio web trata de que se separe la estructura del documento
del contenido, y facilitar por ejemplo que un mismo documento se pueda adaptar a distintos
dispositivos: ordenadores, móviles, etc..
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>
Las etiquetas individuales que debieran cerrarse serían:
● <hr />
● <img src=”foto.gif” />
● <br />
● <meta ... />
XHTML - XHTML 72
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
11.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
META charset , content, dir, http_equiv, lang, name, scheme Metainformacion de la página
class, dir, id, lang, onClick, onDblClick, onKeyDown,
Contenido alternativo para
onKeyPress, onKeyUp, onMouseDown,
NOFRAMES navegadores que no soporten
onMouseMove, onMouseOut, onMouseOver,
los frames o marcos
onMouseUp, style, title
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..)
onMouseMove, onMouseOut, onMouseOver,
onMouseUp, shapes, standby, style, tabindex, title, type,
usemap, vspace, width
class, compact, dir, id, lang, onClick, onDblClick,
onKeyDown, onKeyPress, onKeyUp, onMouseDown,
OL Lista ordenada
onMouseMove, onMouseOut, onMouseOver,
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,
onKeyPress, onKeyUp, onMouseDown,
P Parrafo
onMouseMove, onMouseOut, onMouseOver,
onMouseUp, style, title
PARAM named property value
class, dir, id, lang, onClick, onDblClick, onKeyDown,
onKeyPress, onKeyUp, onMouseDown,
PRE Texto preformateado
onMouseMove, onMouseOut, onMouseOver,
onMouseUp, style, title, width
Q short inline quotation
S D Texto subrayado
Salida/output de un programa,
SAMP
scripts, etc..
SCRIPT Scripts
12.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
Aplicado a
Her
Valor (Por Porcentajes Grupo de
Nombre Valores eda
inicial defecto: (Defecto: N/D) medios
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
Valor (Por Porcentajes Grupo de
Nombre Valores eda
inicial defecto: (Defecto: N/D) medios
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
Valor (Por Porcentajes Grupo de
Nombre Valores eda
inicial defecto: (Defecto: N/D) medios
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
Valor (Por Porcentajes Grupo de
Nombre Valores eda
inicial defecto: (Defecto: N/D) medios
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
<length> | <percentage> | auto positioned
'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
Valor (Por Porcentajes Grupo de
Nombre Valores eda
inicial defecto: (Defecto: N/D) medios
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
Valor (Por Porcentajes Grupo de
Nombre Valores eda
inicial defecto: (Defecto: N/D) medios
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
Valor (Por Porcentajes Grupo de
Nombre Valores eda
inicial defecto: (Defecto: N/D) medios
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
<length> | <percentage> | auto positioned
'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
Valor (Por Porcentajes Grupo de
Nombre Valores eda
inicial defecto: (Defecto: N/D) medios
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
<length> | <percentage> | auto positioned
'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
Valor (Por Porcentajes Grupo de
Nombre Valores eda
inicial defecto: (Defecto: N/D) medios
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
13.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