Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Lenguaje HTML - Pello Xabier PDF
Lenguaje HTML - Pello Xabier PDF
Lenguaje HTML
Manual de lenguaje HTML a travs de ejemplos +
referencia rpida de etiquetas y propiedades de las
hojas de estilos CSS2
Lenguaje HTML
1.Introduccin............................................................................................................................................3
2.Texto bsico............................................................................................................................................5
Cabeceras, <H1>,<H2>,..,<H6>............................................................................................................5
Prrafos y saltos de linea <p>, <br>......................................................................................................6
Formatos bsicos, <b>, <i>, <pre> y lineas <hr>.................................................................................7
Caracteres especiales é, ©,.............................................................................................10
Atributos de <body>............................................................................................................................11
Fuentes <FONT>.................................................................................................................................12
Lneas horizontales <hr>.....................................................................................................................14
Etiquetas no estandar...........................................................................................................................15
3.Imgenes...............................................................................................................................................17
Insertar imgenes en un documento<img>..........................................................................................17
Imagen como fondo de pgina............................................................................................................18
4.Enlaces..................................................................................................................................................20
Enlaces o hipervnculos a otras pginas.<a>.......................................................................................20
Atributos de body para hipervinculos..................................................................................................21
Enlaces internos en una pgina............................................................................................................22
5.Listas.....................................................................................................................................................25
Listas no numeradas o desordenadas <ul>, <li>.................................................................................25
Listar ordenadas...................................................................................................................................26
Listas anidadas....................................................................................................................................27
6.Tablas....................................................................................................................................................29
Tablas simples <TABLE>, <TR>, <TD>...........................................................................................29
Atributos de las tablas.........................................................................................................................31
Uniendo celdas: Colspan y Rowspan..................................................................................................33
Etiquetas de zona de tabla: <TH>, <THEAD>, <TBODY>, <TFOOT>............................................35
Tablas anidadas...................................................................................................................................38
Maquetacin de documentos con tablas..............................................................................................40
7.Formularios...........................................................................................................................................45
Formularios bsico: <FORM>, <INPUT>, texto y botones...............................................................45
Formularios maquetados en una tabla y <TEXTAREA>....................................................................46
Listas desplegables <SELECT>, <OPTION>.....................................................................................47
Campos tipo CHECKBOX y RADIO.................................................................................................50
Campos ocultos y de envo de ficheros...............................................................................................53
Otros elementos: imgenes, <LEGEND>, <LABEL>........................................................................54
8.Marcos...................................................................................................................................................57
Definicin de Marcos o Frames: <FRAMESET>, <FRAME> y <NOFRAMES>............................57
Marcos o Frames en columnas............................................................................................................59
1.Introduccin
HTML: HyperText Markup Language
HTML es un lenguaje de marcas para crear documentos de hipertexto, el formato ms extendido y
fundamental de la World Wide Web. Se basa en una serie de marcas que aportan propiedades a su
contenido, como por ejemplo:
<b>Esto seria un texto en negrita</b>
<a href=http://www.google.es>Enlace a google</a>
Como se puede ver, aadiendo las marcas <b> y <a> damos al texto simple el formato o la utilidad que
queramos.
HTML hunde sus raices en un lenguaje de proposito mas general llamado SGML. Con la red Internet
en funcionamiento desde hacia dcadas, ya en el ao 1991 y en el mbito de la comunidad cientfica
Tim Berneers Lee popone la idea de crear una red de paginas entrelazadas. En 1993 se termina de
desarrollar el primer navegador llamado Mosaic, que era capaz de interpretar el lenguaje hipertexto y
mostrarlo de manera visual. Y el lenguaje que se empleo y se emplea para los documentos de la web es
el HTML.
A partir de ah surgieron nuevos navegadores (Netscape, mas tarde Internet Explorer), y nuevas
especificaciones del lenguaje HTML. Surgieron lenguajes para dar una apariencia dinamica y mas
capacidad de interaccin con el usuario como javascript, VBScript, los objetos embebidos en paginas
como los applets, activeX, flash, etc..
Pero al margen de todos los aadidos el lenguaje HTML ha seguido siendo lo mismo: un lenguaje para
crear documentos, que nada tiene que ver con un lenguaje de programacin al uso. Actualmente la
especificacion de HTML se encuentra en la versin 4.01 y paralelamente han ido surgiendo otros
lenguajes como XHTML y mecanismos de formato como las hojas de estilos CSS. Quien marca (nunca
mejor dicho) las pautas y las normas del estndar es la W3C o Consorcio de la WWW.
Para estar al da de los cambios en especificaciones, ver ejemplos, etc no esta dems visitar su pgina
web: http://www.w3.org
Un documento HTML no es ms que un archivo de texto con las marcas que dicta el estndar.
Bsicamente suele estar formado por una cabecera y un cuerpo con el contenido de la pgina que ve el
usuario. Existen editores sofisticados tipo WYSIWYG (=lo que ves es lo que consigues, son editores
visuales como Dreamweaver, Mozilla-composer, Nvu, Frontpage, ...), pero una pgina simple se puede
crear con un editor de texto cualquiera.
Introduccin - Introduccin
Sencillo no?
Primero se especifica el tipo de documento (<!DOCTYPE...>), y seguidamente se van metiendo las
marcas o tags HTML para definir la pgina. En general todas las marcas que se abren se tienen que
cerrar manteniendo el orden y la jerarqua. En los documentos se empieza por <HTML> y se acaba con
</HTML>. La cabecera empieza con <HEAD> y termina con </HEAD>. Y lo mismo con la etiqueta
<BODY>. Las etiquetas a su vez pueden tener atributos que dan mayores opciones al formato y al
comportamientos de las mismas (colores, tamaos, anchura, altura, etc...)
Esto sera lo que veramos en el navegador:
Primera pgina
Introduccin - Introduccin
2.Texto bsico
Bien, ya sabemos que es un documento HTML y conocemos las etiquetas bsicas para crear uno:
La definicin de tipo de documento:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
... y la definicin 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 especificacin y la pgina aparentemente sera la misma, pero si queremos
asegurarnos que la pgina se vea correctamente en cualquier navegador de cualquier ordenador de
cualquier lugar del mundo conviene no obviarlas.
Las etiquetas HTML pueden escribirse en mayusculas o minusculas o
Importantemezclando
ambas, el navegador las interpretara igual. Por ejemplo:
<Body> = <body> = <BODY>
Cabeceras, <H1>,<H2>,..,<H6>
Con las etiquetas de cabecera podemos crear ttulos, de mayor (<H1>) a menor tamao (<H6>).
Veamos un ejemplo sencillo:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 01 :: Página con cabeceras::</title>
<!-- Aqu se configura el juego de caracteres de la pgina -->
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<!-- Al meter una cabecera el siguiente elemento ir en la prxima linea -->
<!-- El tamao de cabeceras va de ms grande a ms pequeo: 1,2,3,.. hasta 6 -->
<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>
</body>
</html>
El siguiente ejemplo trata de emular una prueba de visin de un oftalmlogo. Se puede hacer de
muchas maneras (con tamaos de fuentes, con estilos), pero aqu se crea simplemente con cabeceras.
<!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 pgina -->
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<!-- La prueba del oftalmlogo 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>
Y as es como quedara:
ñ =
Ñ =
© =
€ =
Existen ms caracteres especiales y la mayora de ellos se insertan usando un cdigo hexadecimal.
Atributos de <body>
Como decamos en la introduccin, la etiquetas HTML pueden ir acompaadas de atributos. En el caso
de la etiqueta body esos atributos marcan propiedades fundamentales como los colores de todo el
Texto bsico - Atributos de <body>
13
return 1;
}
</pre>
</body>
</html>
14
Fuentes <FONT>
Mediante la etiqueta FONT, en desuso segn el estndar, podemos aplicar modificaciones al texto de
un documento HTML. Los atributos de la etiqueta FONT giran en torno al formato de fuente como el
tamao, el color, la familia de fuente, etc...
Hoy en da es mejor aplicar estilos dentro de bloques <DIV> o <SPAN>.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 02 :: Jugando con las fuentes ::</title>
<!-- Aqu se configura el juego de caracteres de la pgina -->
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body bgcolor="black" text="white">
<h1>Jugando con las FUENTES</h1>
<!-- Con la etiqueta FONT podemos aplicar distintos formatos al texto como color,
tamao, fuente, etc -->
<font size="14" color="aqua">AQUA</font>
<font size="14" color="black">BLACK</font>
15
size="14"
size="14"
size="14"
size="14"
size="14"
size="14"
size="14"
size="14"
size="14"
size="14"
size="14"
size="14"
size="14"
size="14"
color="blue">BLUE</font>
color="fuchsia">FUCHSIA</font><br>
color="gray">GRAY</font>
color="green">GREEN</font>
color="lime">LIME</font>
color="maroon">MAROON</font><br>
color="navy">NAVY</font>
color="olive">OLIVE</font>
color="purple">PURPLE</font>
color="red">RED</font><br>
color="SILVER">SILVER</font>
color="TEAL">TEAL</font>
color="yellow">YELLOW</font>
color="white">WHITE</font><br>
<br><br>
<font color="red" face="Verdana">Esto lo pongo en rojo y con fuente Verdana usando
<FONT></font>
<br><br>
<!-La etiqueta font esta desfasada y conviene no usarla
Con qu la sustituimos? con <DIV>
-->
<!-- 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>
16
17
Etiquetas no estndar
Existen una serie de etiquetas no especificadas por el estndar que los navegadores han incluido en la
interpretacin del HTML. Es mejor evitar este tipo de etiquetas ya que no se puede asegurar la
compatibilidad con todos los navegadores. A continuacin vemos algunos ejemplos:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 05 :: Etiquetas no estándar ::
18
19
3.Imgenes
Insertar imgenes en un documento es muy simple, no hay mas que crear una etiqueta img y especificar
el nombre de archivo de imagen que nos interesa. Hay que tener mucha precaucin con los nombres de
ficheros ya que un error de cualquier tipo provoca que la imagen no se cargue correctamente (cuidado
con la las maysculas y minsculas).
Conviene recordar tambin que las imgenes pueden cargar mucho un documento HTML hasta el
punto de hacer la descarga de una pgina ms lenta o ralentizar el navegador. Por eso conviene no
utilizar archivos de imgenes muy grandes (mas all de 300K por ejemplo) y en cualquier caso
retocarlas para que no sean muy pesadas: reducir tamao, reducir colores, cambiar formato, etc..
Los formatos ms habituales para la web son gif, jpg y png. El gif es ms peculiar ya que permite
efectos como la transparencia y las imgenes animadas. El jpg comprime las imgenes y facilita que las
pginas sean ms ligeras, aunque no es un formato del todo libre; para eso ya esta el png.
21
Con una imagen grande tambin se pueden definir reas con las etiquetas <map> y <area> con las que
determinadas partes de la imagen pueden enlazar a pginas distintas, o invocar funciones distintas.
Crear una imagen con zonas con un editor de texto simple es bastante complejo, es mejor usar un editor
WYSIWYG.
22
4.Enlaces
Los enlaces. Los links o hipervnculos son el fundamento de la World Wide Web. Con ellos se enlaza
un documento tras otro, se enlazan contenidos como imgenes, msica, vdeos, etc... Crear un enlace es
muy sencillo. Basta con usar la etiqueta <a> y especificar un destino.
24
En la definicin del anchor no hay porque poner texto. Como se puede apreciar, el enlace interno va
Enlaces - Enlaces internos en una pgina
25
26
27
5.Listas
Las listas son otro elemento bsico de cualquier documento. HTML provee varias opciones para crear
listas tanto ordenadas como desordenadas. Las listas se basan en dos etiquetas: <ul> o <ol> para el
comienzo y final de la lista (segn sean ordenadas o desordenadas) y <li> para cada uno de los
elementos de la lista.
Listar ordenadas
Mediante la etiqueta <ol> podemos definir una lista pero ordenada. En las listas ordenadas se incluyen
nmeros u otras formas de orden como a, b, c,... El modo de numerar se aplica con el atributo type
<!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 pgina -->
<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>
29
30
Listas anidadas
Las listas tambin se pueden anidar unas dentro de otras. Se puede hacer que la numeracin siga la
lgica de listas y sublista? segn el estndar de CSS2 si, pero lo cierto es que al probarlo en distintos
navegadores no queda muy claro.
<!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 pgina -->
<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>
31
Existen otro tipo de listas, las de definiciones (<dl>) pero su uso es muy poco habitual.
32
6.Tablas
Las tablas en HTML sirven, como es lgico, para mostrar informacin de manera ordenada pero
tambin se usan como herramienta de maquetacin bsica. A travs de las tablas anidadas podemos
dividir el documento en varias partes ordenadas como mens laterales, cabeceras, etc...
Por qu necesitamos una herramienta para maquetar?
La disposicin (layout) de los elementos en un documento HTML es seguida: si vamos metiendo
elementos (imgenes, prrafos, tablas)estos se pondrn uno detrs de otro sin control alguno de los
elementos. Con las tablas, como veremos en uno de los ejemplos podremos controlar la disposicin de
todos los elementos de la pgina, y aplicar distintos estilos.
Por tanto para crear una tabla bsica debemos crear las etiquetas <TABLE>, por cada fila la etiqueta
<TR> y dentro de cada fila metemos las <TD> para especificar las celdas. Por defecto debemos meter
el mismo numero de celdas en cada fila ya que eso marca el numero de columnas de la tabla. Si
queremos unir columnas o filas haremos uso del atributo colspan y rowspan.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 00 :: Tablas ::</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<!-- Aqu empieza la pgina -->
<h1>Tablas HTML</h1>
<h2>Se utilizan las etiquetas <table>, <tr> y <td></h2>
<hr size="1" color="black">
33
34
35
36
37
38
Tablas anidadas
Tablas - Tablas anidadas
41
Las posibilidades de anidacin de elementos en un documento HTML son infinitas y con las tablas no
poda ser menos. De hecho la maquetacin con etiquetas <TABLE> deriva siempre en tablas anidadas.
Veamos un ejemplo:
<!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>
<!-- Aqu empieza la pgina -->
<h1>Anidando tablas</h1>
<!-- la tabla se encierra entre etiquetas TABLE-->
<table border="2" cellspacing="1" cellspadding="1" width="80%"
align="center">
height="80%"
42
43
44
En el proceso de diseo de la pgina conviene usar tablas con borde para no perder de vista los limites
de la tabla y sus celdas. Los editores WYSIWYG en su caso suelen mostrar la estructura de tablas con
lneas discontinuas.
Veamos ahora otro ejemplo en el que ya se aplican colores para ir dando forma concreta a la pgina.
<!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">
<!-- Aqu empieza la pgina -->
<table border="2" cellspacing="1" cellspadding="1" width="100%"
align="center">
height="80%"
45
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>
<tr><td>MENU2</td></tr>
<tr><td>MENU3</td></tr>
<tr><td>MENU4</td></tr>
<tr><td>MENU5</td></tr>
<tr><td>MENU6</td></tr>
<tr><td>MENU7</td></tr>
</table>
</td>
<td align="left" valign="center"><h1>CONTENIDO CENTRAL</h1></td>
<td> </td>
</tr>
<tr>
<td bgcolor="red" style="color:white"> </td>
<td align="center">© 2005 - Pello Xabier Altadill</td>
<td> </td>
</tr>
</table>
</body>
</html>
46
47
7.Formularios
Si queremos crear aplicaciones web serias los formularios son imprescindibles; de hecho,qu son las
mayoras de las aplicaciones web sino conjuntos de formularios? Veamos como se define un formulario
y los elementos de formulario uno por uno.
53
54
</body>
</html>
55
Formularios -
56
</body>
</html>
Y esto es lo que se ve. En los campos tipo file se puede apreciar que el interprete de HTML (el
navegador), aade un botn para la seleccin de un fichero.
</body>
</html>
8.Marcos
Los marcos o frames sirven para dividir el navegador en varias partes y mostrar distintos documentos
HTML en cada una de ellas. Hay quien dice que estn en desuso aunque siempre pueden ser tiles en
determinadas circunstancias.
1</td>
2</td>
3</td>
4</td>
5</td>
6</td>
7</td>
63
64
Esta sera la misma pero usando atributos NORESIZE. Sirve para que el usuario no pueda cambiar de
tamao 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 pgina 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 >
<frameset cols="20%,80%" border="5" frameborder="2" >
<frame src="lateral.html" name="lateral" noresize>
<frame src="principal.html" name="principal">
</frameset>
<noframes>
Lo sentimos pero su navegador no soporta FRAMES
</noframes>
</frameset>
</html>
65
</html>
66
67
68
9.Etiquetas META
Las META son etiquetas que se incluyen en el documento y estn dedicadas a describir distintos
aspectos generales del documento, como el juego de caracteres que necesita la pgina como la
descripcin del mismo, el autor, el programa que se ha utilizado para editarlo, etc...
Son etiquetas que se meten en la cabecera (<HEAD>) no se ven en el navegador aunque si se pueden
hacer notar.
69
<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>
70
<!-- 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">
<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>
71
10.Hojas de estilos
Las hojas de estilos o CSS (Cascading Style Sheets) son un estndar de la W3C para aplicar distintos
estilos, formatos y caractersticas a los documentos como HTML.
En la practica son ficheros de texto en los que se van definiendo propiedades concretas para los
elementos de la pgina. Esto ahorra mucho trabajo y espacio en el desarrollo de pginas ya que no es
necesario que a cada elemento de una pgina le tengamos que especificar una y otra vez que use
determinado color o determinada fuente; y adems un mismo estilo se puede aplicar a muchas pginas.
Cada estilo va encerrado entre {} y dentro de las llaves cada uno de ellos se separan con punto y
coma.
En el apndice de estilos se muestra un listado de todas la posibilidades.
Veamos el ejemplo ms simple:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 00 :: Aplicando estilos ::</title>
<!--Dentro de la cabecera podemos meter los estilos definidos -->
<style type="text/css">
BODY {color: white; background-color: gray }
H1
{color: red
}
PRE {color: black; font-size: 14pt }
</style>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<!-- En el body Se solapa la propiedad de fondo. Cual prevalece?
La hoja de estilos. Por tanto la pgina sale gris (gray)
-->
<body bgcolor="green">
<!-- Aqu empieza la pgina -->
<h1>Esto es una página con estilos CSS</h1>
Una página HTML<br>
<br>
72
</body>
</html>
background-color: green
{
color: red
}
{
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:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 02 :: CLASS:estilos agrupados ::</title>
<!--Dentro de la cabecera pordemos hacer mencion a una o ms
Hojas de estilos que usa la pgina
-->
<LINK rel="stylesheet" href="dire_clases.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<!-- En el body Se solapa la propiedad de fondo. Cual prevalece?
En este caso esta ultima, la concreta. La pantalla sale gris.
-->
<body>
<!-- Aqu empieza la pgina -->
<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 }
75
</body>
</html>
76
{
color: green;
font-size: 10pt;
77
{
color: blue;
font-size: 16pt
}
</body>
</html>
{
color: black;
font-size: 16pt;
font-style: bold
}
{
color: red;
font-size: 16pt;
text-decoration: underline
}
{
color: green;
font-size: 14pt;
font-style: italic
}
#definicion
{
color: black;
font-size: 16pt;
Estilos en listas
Las listas tambin tienen su hueco entre las propiedades de las hojas de estilos. Una de las ms
conocidas es la de cambiar el smbolo que marca el inicio de cada elemento de la lista.
Veamos un ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DIRE - 2º DAI :: HTML :: 05 :: Aplicando
estilos a listas ::</title>
<!--Dentro de la cabecera pordemos hacer mencion a una o ms
Hojas de estilos que usa la pgina
-->
<link rel="stylesheet" href="dire_listas.css" type="text/css">
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
</head>
<body>
<!-- Aqu empieza la pgina -->
<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>
84
Estilos en formularios
Hojas de estilos - Estilos en formularios
85
<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>
<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 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>
<!-- Los radiobuttons se hacen con el tipo radio -->
<!-- Todos los elementos deben tener el mismo "name" -->
<td>
<input name="sexo" value="Male" type="radio">Hombre<br>
<input name="sexo" value="Female" type="radio">Mujer<br>
86
</body>
</html>
87
11.XHTML
Ms all del estndar HTML y basndose en los principios de XML ha surgido un nuevo tipo de
documento: XHTML. Aparentemente el cdigo no cambia mucho respecto a la sintaxis de HTML,
aunque para que un documento sea vlido debe cumplir los requisitos mnimos de XML:
Conviene ir conociendo este estndar ya que es probable que la tendencia sea converger hacia los
contenidos XML.
Veamos un simple ejemplo. Obsrvese el cambio en la definicin de tipo de documento (DTD), la
declaracin como documento XML, y el hecho de que incluso las etiquetas que no tienen etiqueta de
cierre (como <hr>), se cierran aadiendo la /.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="author" content="Pello Xabier Altadill" />
<meta name="keywords" content="Ejemplo pagina xhtml" />
<meta http-equiv="content-language" content="es-es" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Ejemplo de pagina XHTML</title>
</head>
<body>
<div>
<h1>Super ejemplo de pagina XHTML</h1>
Aqui se cierran todas las etiquetas.
<hr />
</div><p>Bueno, no parece complicado.</p>
</body>
</html>
XHTML - XHTML
94
12.Referencia HTML
Una referencia de las etiquetas HTML extrado de la especificacin de la w3c, a la que se han aadido
los atributos y eventos disponibles.
Nombr
Atributos
Des
uso
Descripcin
Anchor o enlace
ABBR
ACRONYM
Acrnimo
ADDRESS
APPLET
Applet de java
AREA
Texto en negrita
BASE
href, target
BASEFONT
BDO
BIG
BLOCKQUOTE
BODY
BR
long quotation
95
BUTTON
botn
CAPTION
Ttulo de tabla
CENTER
Abreviatura de <DIV
align=center>
CITE
cita
CODE
Cdigo de programa
COL
Columna de tabla
COLGROUP
DD
descripcin de definicin
DEL
Texto eliminado
DFN
Listado de directorio
DIR
DIV
DL
Lista de definiciones
96
DT
EM
nfasis
FIELDSET
FONT
FORM
FRAME
Marco o subventana
FRAMESET
Divisin de ventana
H1
H2
H3
H4
H5
Formato de fuente
Formulario interactivo
H6
Cabecera
Cabecera
Cabecera
Cabecera
Cabecera (la ms pequea)
HEAD
HR
Grupo de controles de un
formulario
Linea horizontal
HTML
IFRAME
97
IMG
Imgenes insertadas
INS
ISINDEX
Texto insertado
E
KBD
LABEL
LEGEND
LI
LINK
MAP
MENU
Etiqueta de un campo de
formulario
Elemento de lista
Lista de menu
98
Metainformacion de la pgina
NOFRAMES
NOSCRIPT
OBJECT
OL
Lista ordenada
OPTGROUP
Grupo de opciones
OPTION
Parrafo
PARAM
PRE
Texto preformateado
Q
S
SAMP
SCRIPT
Texto subrayado
Salida/output de un programa,
scripts, etc..
Scripts
99
SELECT
SMALL
SPAN
STRIKE
STRONG
STYLE
Texto rayado
nfasis ms fuerte
Informacin de estilo
SUB
Subtexto
SUP
superscript
TABLE
TBODY
TD
TEXTAREA
TFOOT
Tabla
Cuerpo de tabla
Pie de tabla
100
THEAD
ver TD
Cabecera de tabla
TITLE
TR
Ttulo de documento
align, background, bgcolor, bordercolor,
bordercolordark, bordercolorlight , char, charoff, class,
dir, id, lang, nowrap, onClick, onDblClick,
onKeyDown, onKeyPress, onKeyUp, onMouseDown,
onMouseMove, onMouseOut, onMouseOver,
onMouseUp, style, title, valign
TT
U
UL
D
class, compact, dir, id, lang, onClick, onDblClick,
onKeyDown, onKeyPress, onKeyUp, onMouseDown,
onMouseMove, onMouseOut, onMouseOver,
onMouseUp, style, title, type
VAR
Lista desordenada
101
13.Referencia CSS2
Esta sera la referencia de propiedades de las hojas de estilos.
Extrada de la especificacin de CSS2 de la w3c.
Nombre
Valores
Valor
inicial
Aplicado a
(Por
defecto:
todos)
Her
Porcentajes
eda
(Defecto: N/D)
do?
Grupo de
medios
'azimuth'
'background'
['background-color' ||
'background-image' ||
'background-repeat' ||
XX
'background-attachment' ||
'background-position'] | inherit
no
'backgroundattachment'
scroll
no
visual
'backgroundcolor'
transparent
no
visual
'backgroundimage'
none
no
visual
'backgroundposition'
[ [<percentage> | <length> ]
{1,2} | [ [top | center | bottom]
|| [left | center | right] ] ] |
inherit
0% 0%
block-level
and replaced no
elements
'backgroundrepeat'
no
visual
'border'
see
[ 'border-width' || 'border-style'
individual
|| <color> ] | inherit
properties
no
visual
'border-color'
<color>{1,4} | transparent |
inherit
center
collapse
see
individual
properties
yes
'table' and
'inline-table' yes
elements
no
aural
allowed on
'backgroundposition'
visual
visual
visual
102
Nombre
Valor
inicial
Valores
Aplicado a
(Por
defecto:
todos)
Her
Porcentajes
eda
(Defecto: N/D)
do?
'table' and
'inline-table' yes
elements
Grupo de
medios
'border-style'
<border-style>{1,4} | inherit
see
individual
properties
no
visual
'border-top'
'border-right'
'border-bottom'
'border-left'
see
individual
properties
no
visual
'border-topcolor' 'borderright-color'
'border-bottomcolor' 'borderleft-color'
<color> | inherit
the value of
the 'color'
property
no
visual
'border-topstyle' 'borderright-style'
'border-bottomstyle' 'borderleft-style'
<border-style> | inherit
none
no
visual
'border-topwidth' 'borderright-width'
'border-bottomwidth' 'borderleft-width'
<border-width> | inherit
medium
no
visual
'border-width'
<border-width>{1,4} | inherit
see
individual
properties
no
visual
'bottom'
positioned
elements
no
'caption-side'
'tablecaption'
elements
yes
visual
'clear'
block-level
elements
no
visual
top
visual
refer to height
of containing
block
visual
103
Nombre
Valor
inicial
Valores
Aplicado a
(Por
defecto:
todos)
Her
Porcentajes
eda
(Defecto: N/D)
do?
block-level
and replaced no
elements
Grupo de
medios
'clip'
auto
'color'
<color> | inherit
depends on
user agent
'content'
all
'counterincrement'
[ <identifier> <integer>? ]+ |
none | inherit
none
no
all
'counter-reset'
[ <identifier> <integer>? ]+ |
none | inherit
none
no
all
'cue'
[ 'cue-before' || 'cue-after' ] |
inherit
XX
no
aural
'cue-after'
none
no
aural
'cue-before'
none
no
aural
'cursor'
yes
visual,
interactive
'direction'
'display'
no
all
'elevation'
yes
aural
'empty-cells'
yes
visual
ltr
show
yes
all elements,
yes
but see prose
'table-cell'
elements
visual
visual
visual
104
Nombre
Valores
Valor
inicial
Aplicado a
(Por
defecto:
todos)
Her
Porcentajes
eda
(Defecto: N/D)
do?
all but
positioned
elements and no
generated
content
Grupo de
medios
'float'
none
'font'
[ [ 'font-style' || 'font-variant' ||
'font-weight' ]? 'font-size' [ /
'line-height' ]? 'font-family' ] |
caption | icon | menu |
message-box | small-caption |
status-bar | inherit
see
individual
properties
yes
'font-family'
depends on
user agent
yes
visual
medium
yes,
the
com
pute refer to parent
d
element's font
valu size
e is
inhe
rited
visual
none
yes
visual
'font-size'
visual
allowed on
'font-size' and
'line-height'
visual
'font-stretch'
normal
yes
visual
'font-style'
yes
visual
'font-variant'
normal
yes
visual
'font-weight'
yes
visual
105
Nombre
Valores
Valor
inicial
Aplicado a
(Por
defecto:
todos)
Her
Porcentajes
eda
(Defecto: N/D)
do?
Grupo de
medios
'height'
all elements
but nonreplaced
inline
elements,
table
columns,
and column
groups
'left'
positioned
elements
'letter-spacing'
normal
yes
visual
'line-height'
yes
'list-style'
XX
elements
with
yes
'display: listitem'
visual
none
elements
with
yes
'display: listitem'
visual
outside
elements
with
yes
'display: listitem'
visual
elements
with
yes
'display: listitem'
visual
'list-styleposition'
'list-style-type'
no
see prose
visual
no
refer to width
of containing
block
visual
106
Nombre
'margin'
Valor
inicial
Valores
<margin-width>{1,4} | inherit
'margin-top'
'margin-right'
<margin-width> | inherit
'margin-bottom'
'margin-left'
Aplicado a
(Por
defecto:
todos)
Her
Porcentajes
eda
(Defecto: N/D)
do?
XX
no
refer to width
of containing
block
no
refer to width
of containing
block
'marker-offset'
auto
elements
with
'display:
marker'
'marks'
none
'max-height'
'max-width'
'min-height'
'min-width'
no
Grupo de
medios
visual
visual
visual
visual, paged
all elements
except nonreplaced
inline
no
elements and
table
elements
refer to height
of containing
block
visual
all elements
except nonreplaced
inline
no
elements and
table
elements
refer to width
of containing
block
visual
<length> | <percentage> |
inherit
all elements
except nonreplaced
inline
no
elements and
table
elements
refer to height
of containing
block
visual
UA
dependent
all elements
except nonreplaced
inline
no
elements and
table
elements
refer to width
of containing
block
visual
<length> | <percentage> |
inherit
107
Nombre
Valor
inicial
Valores
'orphans'
<integer> | inherit
'outline'
block-level
elements
Her
Porcentajes
eda
(Defecto: N/D)
do?
Grupo de
medios
yes
visual, paged
see
[ 'outline-color' || 'outline-style'
individual
|| 'outline-width' ] | inherit
properties
no
visual,
interactive
'outline-color'
invert
no
visual,
interactive
'outline-style'
<border-style> | inherit
none
no
visual,
interactive
'outline-width'
<border-width> | inherit
medium
no
visual,
interactive
'overflow'
'padding'
Aplicado a
(Por
defecto:
todos)
visible
block-level
and replaced no
elements
<padding-width>{1,4} | inherit XX
visual
no
refer to width
of containing
block
visual
no
refer to width
of containing
block
visual
'padding-top'
'padding-right'
<padding-width> | inherit
'padding-bottom'
'padding-left'
'page'
<identifier> | auto
auto
block-level
elements
yes
visual, paged
'page-breakafter'
auto
block-level
elements
no
visual, paged
'page-breakbefore'
auto
block-level
elements
no
visual, paged
'page-breakinside'
auto
block-level
elements
yes
visual, paged
'pause'
no
see descriptions
of 'pauseaural
before' and
'pause-after'
'pause-after'
depends on
user agent
no
see prose
aural
'pause-before'
depends on
user agent
no
see prose
aural
108
Nombre
Valor
inicial
Valores
Aplicado a
(Por
defecto:
todos)
Her
Porcentajes
eda
(Defecto: N/D)
do?
Grupo de
medios
'pitch'
yes
aural
'pitch-range'
<number> | inherit
50
yes
aural
'play-during'
auto
no
aural
'position'
'quotes'
depends on
user agent
yes
visual
'richness'
<number> | inherit
50
yes
aural
'right'
positioned
elements
no
'size'
the page
context
N/A
visual, paged
'speak'
yes
aural
elements that
have table
yes
header
information
aural
normal
all elements,
but not to
no
generated
content
visual
refer to width
of containing
block
visual
'speak-header'
once
'speak-numeral'
continuous
yes
aural
'speakpunctuation'
none
yes
aural
'speech-rate'
medium
yes
aural
'stress'
<number> | inherit
50
yes
aural
'table-layout'
auto
'table' and
'inline-table' no
elements
visual
109
Nombre
'text-align'
Valor
inicial
Valores
Aplicado a
(Por
defecto:
todos)
Her
Porcentajes
eda
(Defecto: N/D)
do?
Grupo de
medios
depends on
user agent block-level
and writing elements
direction
yes
visual
none
no
(see
pros
e)
visual
'text-indent'
<length> | <percentage> |
inherit
'text-shadow'
'text-transform'
capitalize | uppercase |
lowercase | none | inherit
'top'
positioned
elements
'unicode-bidi'
all elements,
no
but see prose
'vertical-align'
baseline
inline-level
and 'tablecell'
elements
'visibility'
inherit
'voice-family'
block-level
elements
yes
refer to width
of containing
block
visual
none
no
(see
pros
e)
visual
none
yes
visual
no
no
refer to height
of containing
block
visual
visual
refer to the
'line-height' of
the element
itself
visual
no
visual
[[<specific-voice> | <genericdepends on
voice> ],]* [<specific-voice> |
user agent
<generic-voice> ] | inherit
yes
aural
'volume'
<number> | <percentage> |
silent | x-soft | soft | medium |
loud | x-loud | inherit
medium
yes
refer to
aural
inherited value
'white-space'
normal
block-level
elements
yes
visual
110
Nombre
'widows'
Valor
inicial
Valores
<integer> | inherit
'width'
'word-spacing'
normal
'z-index'
auto
Aplicado a
(Por
defecto:
todos)
Her
Porcentajes
eda
(Defecto: N/D)
do?
block-level
elements
yes
all elements
but nonreplaced
inline
elements,
table rows,
and row
groups
no
positioned
elements
Grupo de
medios
visual, paged
refer to width
of containing
block
visual
yes
visual
no
visual
111
14.Bibliografa, enlaces
Bibliografa
Enlaces
http://www.w3.org
http://www.webdesign.org
http://www.cuatrovientos.org
http://dire.cuatrovientos.org
112