Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Introduccion XHTML
Introduccion XHTML
es
Introduccin a
XHTML
Javier Eguluz Prez
Introduccin a XHTML
Esta versin impresa se cre el 20 de febrero de 2008 y todava est incompleta. La versin ms actualizada de los contenidos de este libro se puede
encontrar en http://www.librosweb.es/xhtml
Si quieres aportar sugerencias, comentarios, crticas o informar sobre errores,
puedes contactarnos en contacto@librosweb.es
www.librosweb.es
Introduccin a XHTML
Introduccin a XHTML
4.6.9. Indicar que existe una versin de la pgina en otro idioma .....................67
4.6.10. Indicar que existe una versin de la pgina preparada para imprimir ......68
4.6.11. Indicar que existe una pgina que es ndice de la pgina actual .............68
Captulo 5. Listas........................................................................................... 69
5.1. Listas no ordenadas ................................................................................ 69
5.2. Listas ordenadas ..................................................................................... 70
5.3. Listas de definicin.................................................................................. 72
Captulo 6. Imgenes y objetos ..................................................................... 76
6.1. Imgenes .............................................................................................. 76
6.2. Mapas de imagen .................................................................................... 79
6.3. Objetos ................................................................................................. 81
Captulo 7. Tablas.......................................................................................... 85
7.1. Tablas bsicas ........................................................................................ 86
7.2. Tablas avanzadas.................................................................................... 97
Captulo 8. Formularios ............................................................................... 104
8.1. Formularios bsicos............................................................................... 104
8.2. Formularios avanzados .......................................................................... 113
8.3. Otros elementos de formulario ................................................................ 117
Captulo 9. Estructura y layout .................................................................... 125
Captulo 10. Metainformacin...................................................................... 128
10.1. Estructura de la cabecera ..................................................................... 128
10.2. Metadatos .......................................................................................... 129
10.3. DOCTYPE ........................................................................................... 131
Captulo 11. Otras etiquetas importantes .................................................... 134
11.1. Comentarios ....................................................................................... 134
11.2. JavaScript .......................................................................................... 134
11.3. CSS................................................................................................... 136
11.4. Iframes.............................................................................................. 137
11.5. Otras etiquetas ................................................................................... 138
Captulo 12. Accesibilidad ........................................................................... 141
12.1. Requisitos del nivel A de accesibilidad .................................................... 141
Captulo 13. Validacin................................................................................ 143
13.1. Validacin con Dreamweaver ................................................................ 143
13.2. Validador del W3C ............................................................................... 145
13.3. Otros validadores ................................................................................ 146
Captulo 14. Fragmentos de cdigo ............................................................. 149
14.1. Documento XHTML .............................................................................. 154
14.2. Cabecera XHTML ................................................................................. 155
14.3. Tabla ................................................................................................. 155
14.4. Formulario ......................................................................................... 156
Captulo 15. Ejercicios resueltos.................................................................. 158
www.librosweb.es
Introduccin a XHTML
Captulo 1. Introduccin
Captulo 1. Introduccin
1.1. Qu es HTML?
Definindolo de forma sencilla, HTML es lo que se utiliza para crear todas las pginas
web de Internet. Ms concretamente, HTML es el lenguaje con el que se escriben la
mayora de pginas web.
Los diseadores utilizan el lenguaje HTML para crear sus pginas web, los programas que
utilizan los diseadores generan pginas escritas en HTML y los navegadores que utilizamos los usuarios muestran las pginas web despus de leer su contenido HTML.
Aunque HTML es un lenguaje que utilizan los ordenadores y los programas de diseo, es
muy fcil de aprender y escribir por parte de las personas. En realidad, HTML son las siglas de HyperText Markup Language y ms adelante se ver el significado de cada una
de estas palabras.
El lenguaje HTML es un estndar reconocido en todo el mundo y cuyas normas define un
organismo sin nimo de lucro llamado World Wide Web Consortium, ms conocido como
W3C. Como se trata de un estndar reconocido por todas las empresas relacionadas con
el mundo de Internet, una misma pgina HTML se visualiza de forma muy similar en
cualquier navegador de cualquier sistema operativo.
El propio W3C define el lenguaje HTML como un lenguaje reconocido universalmente y
que permite publicar informacin de forma global. Desde su creacin, el lenguaje HTML
ha pasado de ser un lenguaje utilizado exclusivamente para crear documentos electrnicos a ser un lenguaje que se utiliza en muchas aplicaciones electrnicas como buscadores, tiendas online y banca electrnica.
Introduccin a XHTML
Captulo 1. Introduccin
El primer documento formal con la descripcin de HTML se public en 1991 bajo el nombre "HTML Tags" (Etiquetas HTML) y todava hoy puede ser consultado online a modo de
reliquia informtica.
La primera propuesta oficial para convertir HTML en un estndar se realiz en 1993 por
parte del organismo IETF (Internet Engineering Task Force). Aunque se consiguieron
avances significativos (en esta poca se definieron las etiquetas para imgenes, tablas y
formularios) ninguna de las dos propuestas de estndar, llamadas HTML y HTML+ consiguieron convertirse en estndar oficial.
En 1995, el organismo IETF organiza un grupo de trabajo de HTML y consigue publicar, el
22 de septiembre de ese mismo ao, el estndar HTML 2.0. A pesar de su nombre, HTML
2.0 es el primer estndar oficial de HTML.
A partir de 1996, los estndares de HTML los publica otro organismo de estandarizacin
llamado W3C (World Wide Web Consortium). La versin HTML 3.2 se public el 14 de Enero de 1997 y es la primera recomendacin de HTML publicada por el W3C. Esta revisin
incorpora los ltimos avances de las pginas web desarrolladas hasta 1996, como applets
de Java y texto que fluye alrededor de las imgenes.
HTML 4.0 se public el 24 de Abril de 1998 (siendo una versin corregida de la publicacin original del 18 de Diciembre de 1997) y supone un gran salto desde las versiones
anteriores. Entre sus novedades ms destacadas se encuentran las hojas de estilos CSS,
la posibilidad de incluir pequeos programas o scripts en las pginas web, mejora de la
accesibilidad de las pginas diseadas, tablas complejas y mejoras en los formularios.
La ltima especificacin oficial de HTML se public el 24 de diciembre de 1999 y se denomina HTML 4.01. Se trata de una revisin y actualizacin de la versin HTML 4.0, por lo
que no incluye novedades significativas.
Desde la publicacin de HTML 4.01, la actividad de estandarizacin de HTML se detuvo y
el W3C se centr en el desarrollo del estndar XHTML. Por este motivo, en el ao 2004,
las empresas Apple, Mozilla y Opera mostraron su preocupacin por la falta de inters del
W3C en HTML y decidieron organizarse en una nueva asociacin llamada WHATWG (Web Hypertext Application Technology Working Group).
La actividad actual del WHATWG se centra en el futuro estndar HTML 5, cuyo primer borrador oficial se public el 22 de enero de 2008. Debido a la fuerza de las empresas que
Introduccin a XHTML
Captulo 1. Introduccin
www.librosweb.es
Introduccin a XHTML
Captulo 1. Introduccin
www.librosweb.es
Introduccin a XHTML
Introduccin a XHTML
<parrafo>
Contenido de texto marcado mediante <importante>etiquetas</importante>.
</parrafo>
HTML es un lenguaje de etiquetas (tambin llamado lenguaje de marcado) y las pginas web habituales estn formadas por cientos o miles de pares de etiquetas. De hecho, las letras ML de la sigla HTML significan markup language, que es como se denominan en ingls a los lenguajes de marcado. Adems de HTML, existen muchos otros lenguajes de etiquetas como XML, SGML, DocBook y MathML.
La principal ventaja de los lenguajes de etiquetas es que son muy sencillos de leer y escribir por parte de las personas y de los ordenadores. La principal desventaja es que pueden aumentar mucho el tamao del documento, por lo que en general se utilizan etiquetas con nombres muy cortos.
www.librosweb.es
10
Introduccin a XHTML
Figura 2.3. Aspecto que muestra el primer documento HTML en cualquier navegador
www.librosweb.es
11
Introduccin a XHTML
Figura 2.4. Esquema de las etiquetas principales que contiene un documento HTML
Ejercicio 1
Determinar el cdigo HTML correspondiente a la siguiente pgina:
www.librosweb.es
12
Introduccin a XHTML
Figura 2.5. Pgina HTML sencilla que resalta algunas partes del texto
Pistas: <em> y <del>
www.librosweb.es
13
Introduccin a XHTML
De esta forma, utilizando la misma etiqueta <a> para todos los enlaces de la pgina, se
puede indicar para cada uno la direccin a la que debe apuntar.
<html>
<head>
<title>Ejemplo de atributos en las etiquetas</title>
</head>
<body>
<p>
Los enlaces son muy fciles de indicar:
<a>Soy un enlace incompleto, porque no tengo direccin de destino</a>.
<a href="http://www.google.com">Este otro enlace apunta a la pgina de Google</a>.
</p>
</body>
</html>
14
Introduccin a XHTML
hacerlo cada vez que se explica una nueva etiqueta. Los atributos comunes se dividen en
cuatro grupos segn su funcionalidad:
1) Los atributos bsicos se utilizan prcticamente en todas las etiquetas de las pginas
HTML habituales, aunque slo son realmente tiles cuando se utiliza CSS y/o JavaScript.
Atributos bsicos
Atributo
id =
texto
class =
texto
Descripcin
Identifica de forma nica a cada elemento dentro de una pgina HTML
style =
estilos
CSS
title =
texto
2) Algunas pginas muestran contenidos en varios idiomas, por lo que existen atributos
que se utilizan para indicar el idioma de cada elemento de la pgina.
Atributos para internacionalizacin (i18n)
Atributo
lang = codigo de
idioma
Descripcin
Indica el idioma del elemento mediante un cdigo predefinido
xml:lang = codigo Indica el idioma del elemento. Tiene ms prioridad que lang y es obligatorio
de idioma
dir
Permite indicar la direccin del texto (til para los idiomas que escriben de
derecha a izquierda)
Descripcin
onclick, ondblclick,
onmousedown, onmouseup,
www.librosweb.es
15
Introduccin a XHTML
onmouseover, onmousemove,
onmouseout, onkeypress,
onkeydown, onkeyup
Descripcin
accesskey Permite definir una tecla de acceso rpido a un elemento HTML. Si el usuario pulsa de
= letra forma simultnea la tecla ALT y esa tecla, se selecciona el elemento
tabindex
=
numero
onfocus,
onblur
Establece la posicin del elemento en el orden de tabulacin del documento (el orden
en el que el elemento se selecciona cuando el usuario pulsa repetidamente la tecla del
tabulador). Debe tener un valor entre 0 y 32.767
Se emplean para definir las funciones JavaScript que se ejecutan cuando el elemento
obtiene o pierde el foco
16
Introduccin a XHTML
www.librosweb.es
17
Introduccin a XHTML
www.librosweb.es
18
Introduccin a XHTML
Los elementos de bloque definidos por HTML son: address, blockquote, center, dir, div,
dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, nos-cript, ol, p,
pre, table, ul.
Los siguientes elementos tambin se considera que son de bloque: dd, dt, frame-set, li,
tbody, td, tfoot, th, thead, tr.
Los siguientes elementos pueden ser en lnea y de bloque segn las circunstancias: button, del, iframe, ins, map, object, script.
19
Introduccin a XHTML
<dl compact="compact">...</dl>
www.librosweb.es
20
Introduccin a XHTML
Captulo 3. Texto
Captulo 3. Texto
La mayor parte del contenido de las pginas HTML habituales est formado por texto, llegando a ser ms del 90% del cdigo de la pgina. Por este motivo, es muy importante
conocer los elementos y etiquetas que define HTML para el manejo del texto.
El lenguaje HTML incorpora al tratamiento del texto muchas de las ideas y normas establecidas en otros entornos de publicacin de contenidos. De esta forma, HTML define etiquetas para estructurar el contenido en secciones y prrafos y define otras etiquetas
para marcar elementos importantes dentro del texto.
La tarea inicial del editor de contenidos HTML consiste en estructurar el texto original definiendo sus prrafos, titulares y ttulos de seccin, como se muestra en la siguiente
imagen:
www.librosweb.es
21
Introduccin a XHTML
Captulo 3. Texto
3.1. Estructurar
La forma ms sencilla de estructurar un texto consiste en separarlo por prrafos.
Adems, HTML permite incluir ttulos que delimitan cada una de las secciones.
3.1.1. Prrafos
Una de las etiquetas ms utilizadas de HTML es la etiqueta <p>, que permite definir los
prrafos que forman el texto de una pgina. Para delimitar el texto de un prrafo, se encierra ese texto con la etiqueta <p>, como muestra el siguiente ejemplo:
<html>
<head>
<title>Ejemplo de texto estructurado con prrafos</title>
</head>
<body>
<p>Este es el texto que forma el primer prrafo de la pgina.
Los prrafos pueden ocupar varias lneas y el navegador se encarga
www.librosweb.es
22
Introduccin a XHTML
Captulo 3. Texto
Prrafos
Atributos
comunes
Atributos
especficos
Los prrafos creados con HTML son elementos de bloque, por lo que siempre ocupan toda
la anchura de la ventana del navegador. Adems, no tienen atributos especficos, pero s
www.librosweb.es
23
Introduccin a XHTML
Captulo 3. Texto
que se les pueden asignar los atributos comunes de HTML bsicos, de internacionalizacin y de eventos.
3.1.2. Secciones
Las pginas HTML habituales suelen tener una estructura ms compleja que la que se
puede crear solamente mediante prrafos. De hecho, es habitual que las pginas se dividan en diferentes secciones jerrquicas.
Los ttulos de seccin se utilizan para delimitar el comienzo de cada seccin de la pgina.
HTML permite crear secciones de hasta seis niveles de importancia. De esta forma, aunque una pgina puede definir cualquier nmero de secciones, slo puede incluir seis niveles jerrquicos.
Las etiquetas que definen los ttulos de seccin son <h1>, <h2>, <h3>, <h4>, <h5> y <h6>.
La etiqueta <h1> es la de mayor importancia y por tanto se utiliza para definir los titulares
de la pgina. La importancia del resto de etiquetas es descendiente, de forma que la etiqueta <h6> es la que se utiliza para delimitar las secciones menos importantes de la
pgina.
A continuacin se muestra la definicin formal de la etiqueta <h1>, siendo idntica la definicin del resto de etiquetas referidas a los ttulos de seccin:
Tabla 3.2. Etiqueta h1
h1
Atributos
comunes
Atributos
especficos
Al igual que la etiqueta <p>, las etiquetas de ttulo de seccin son elementos de bloque y
no tienen atributos especficos.
Las etiquetas <h1>, ..., <h6> definen ttulos de seccin, no secciones completas. Por este
motivo, no es necesario encerrar los contenidos de una seccin con su etiqueta correspondiente. Solamente se debe encerrar con las etiquetas <h1>, ..., <h6> los ttulos de cada seccin.
El siguiente ejemplo muestra el uso de las etiquetas de ttulo de seccin:
<html>
<head>
<title>Ejemplo de texto estructurado con secciones</title>
</head>
www.librosweb.es
24
Introduccin a XHTML
Captulo 3. Texto
<body>
<h1>Titular de la pgina</h1>
<p>Prrafo de introduccin...</p>
<h2>La primera sub-seccin</h2>
<p>Prrafo de contenido...</p>
<h2>Otra subseccin</h2>
<p>Ms prrafos de contenido...</p>
</body>
</html>
www.librosweb.es
25
Introduccin a XHTML
Captulo 3. Texto
Figura 3.5. Ejemplo de uso de las etiquetas h1, h2, h3, h4, h5 y h6
em
nfasis
Atributos
comunes
Atributos
especficos
www.librosweb.es
26
Introduccin a XHTML
strong
nfasis ms acentuado
Atributos
comunes
Atributos
especficos
Captulo 3. Texto
La etiqueta <em> marca un texto indicando que su importancia es mayor que la del resto
del texto. La etiqueta <strong> indica que un determinado texto es de la mayor importancia dentro de la pgina. Ejemplo:
<html>
<head>
<title>Ejemplo de etiqueta em y strong</title>
</head>
<body>
<p>El lenguaje HTML permite marcar algunos segmentos de texto
como <em>muy importantes</em> y otros segmentos como <strong>los
ms importantes</strong>.</p>
</body>
</html>
Por defecto, los navegadores muestran los elementos <em> en cursiva para hacer evidente su importancia y muestran los elementos <strong> en negrita, para indicar que son los
ms importantes:
www.librosweb.es
27
Introduccin a XHTML
Captulo 3. Texto
Ejercicio 2
Estructurar y marcar el texto proporcionado para que el navegador lo muestre con el aspecto de la siguiente imagen:
www.librosweb.es
28
Introduccin a XHTML
Captulo 3. Texto
ins
Insercin
Atributos
comunes
www.librosweb.es
29
Introduccin a XHTML
ins
Captulo 3. Texto
Insercin
cite = "url" - Indica la URL de la pgina en la que se puede obtener ms
Atributos
especficos
del
Atributos
comunes
Borrado
bsicos, i18n y eventos
cite = "url" - Indica la URL de la pgina en la que se puede obtener ms
Atributos
especficos
Las dos etiquetas cuentan con los mismos atributos especficos, que opcionalmente se
pueden aadir para proporcionar ms informacin sobre los cambios realizados. El atributo cite se emplea para indicar la direccin de un documento externo en el que se puede encontrar ms informacin relacionada con la insercin o el borrado de texto. El atributo datetime puede utilizarse para indicar la fecha y la hora en la que se realiz cada
cambio.
Ejemplo:
<html>
<head><title>Ejemplo de etiqueta ins y del</title></head>
<body>
<h3>Ejemplo de etiqueta ins y del</h3>
<p>El HTML, acrnimo ingls de Hyper Text Markup Language (lenguaje de
< del datetime="20061025" cite="http://www.librosweb.es/mas_informacion.html">marcado
de
hipertexto</ del> < ins datetime="20061026" cite="http://www.librosweb.es/
mas_informacion.html">
www.librosweb.es
30
Introduccin a XHTML
Captulo 3. Texto
blockquote
Citas
Atributos
comunes
www.librosweb.es
31
Introduccin a XHTML
Captulo 3. Texto
blockquote
Citas
Atributos
especficos
Se emplea para indicar que el texto que encierra es una cita textual de otro
texto externo
Al igual que <ins> y <del>, la etiqueta <blockquote> permite indicar mediante el atributo
cite la direccin de un documento del que se ha extrado la cita. Ejemplo:
<html>
<head><title>Ejemplo de etiqueta blockquote</title></head>
<body>
<p>Segn el W3C, el valor del
atributo <em>cite</em> en las etiquetas <strong>blockquote</strong> tiene el
siguiente significado:</p>
<blockquote cite="http://www.w3.org/TR/html401/struct/text.html">"El valor de este
atributo
es una direccin URL que indica el documento original de la cita."</blockquote>
</body>
</html>
32
Introduccin a XHTML
Captulo 3. Texto
Para indicar de forma clara que el texto es una cita externa, los navegadores muestran
por defecto el texto del elemento <blockquote> con un gran margen en la parte izquierda.
abbr
Abreviaturas
Atributos
comunes
Atributos
especficos
acronym
Acrnimos o siglas
Atributos
comunes
Atributos
especficos
En ambos casos, el atributo title se puede utilizar para incluir el significado completo de
la abreviatura o sigla. Ejemplo:
<html>
<head>
<title>Ejemplo de etiqueta acronym</title>
</head>
<body>
www.librosweb.es
33
Introduccin a XHTML
Captulo 3. Texto
La mayora de navegadores muestran por defecto un borde inferior punteado para todos
los elementos <abbr> y <acronym>. Al posicionar el puntero del ratn sobre la palabra subrayada, el navegador muestra un pequeo recuadro (llamado tooltip en ingls) con el
valor del atributo title:
dfn
Definicin
Atributos
comunes
Atributos
especficos
34
Introduccin a XHTML
Captulo 3. Texto
dfn
Definicin
Descripcin
El siguiente ejemplo muestra cmo se utiliza la etiqueta <dfn> para incluir la definicin
completa de una palabra cuyo uso no es habitual fuera de los mbitos mdicos y
psicolgicos:
<p>Con estos sntomas, podra tratarse de un caso de <dfn title="Imagen o sensacin
subjetiva,
propia de un sentido, determinada por otra sensacin que afecta a un sentido
diferente">sinestesia</dfn></p>
Por ltimo, HTML incluye una etiqueta que se puede utilizar para marcar un texto como
una citacin:
Tabla 3.11. Etiqueta cite
cite
Cita
Atributos
comunes
Atributos
especficos
En ocasiones, no est clara la diferencia entre <cite> y <blockquote>. Una buena regla
para recordar la diferencia entre ambas es que <cite> hace referencia a quien se cita y
<blockquote> contiene la propia cita. Ejemplo:
Como dijo <cite>Mahatma Gandhi</cite>:
<blockquote>
Vive como si fueras a morir maana y aprende como si fueras a vivir para siempre.
</blockquote>
www.librosweb.es
35
Introduccin a XHTML
Captulo 3. Texto
www.librosweb.es
36
Introduccin a XHTML
br
Nueva lnea
Atributos
comunes
bsicos
Atributos
especficos
Captulo 3. Texto
El navegador ahora s que muestra correctamente las nuevas lneas que se queran
insertar:
www.librosweb.es
37
Introduccin a XHTML
Captulo 3. Texto
Ahora el navegador s que muestra correctamente los espacios en blanco (y las nuevas lneas) del segundo prrafo:
www.librosweb.es
38
Introduccin a XHTML
Captulo 3. Texto
www.librosweb.es
39
Introduccin a XHTML
Captulo 3. Texto
pre
Texto preformateado
Atributos
comunes
Atributos
especficos
Muestra el texto que encierra tal y como est escrito (respetando los espacios
en blanco)
www.librosweb.es
40
Introduccin a XHTML
Captulo 3. Texto
<html>
<head><title>Ejemplo de etiqueta pre</title></head>
<body>
<pre>
La etiqueta pre
respeta los espacios en blanco
y
muestra el texto
tal y como
est escrito
</pre>
<p>
La etiqueta pre
respeta los espacios en blanco
y
muestra el texto
tal y como
est escrito
</p>
</body>
</html>
El ejemplo anterior incluye el mismo texto (con espacios en blanco y varias lneas) dentro
de una etiqueta <pre> y dentro de una etiqueta <p>. Las diferencias visuales en un navegador son muy evidentes:
www.librosweb.es
41
Introduccin a XHTML
Captulo 3. Texto
El primer texto se ve en pantalla tal y como se ha escrito, respetando todos los espacios
en blanco y todas las nuevas lneas. El segundo texto se ve como un prrafo normal, ya
que HTML ha eliminado todos los espacios en blanco sobrantes. Los elementos <pre> son
especiales, ya que los navegadores les aplican las siguientes reglas:
Mantienen todos los espacios en blanco (tabuladores, espacios y nuevas lneas)
Muestra el texto con un tipo de letra especial, denominado de ancho fijo, ya
que todas sus letras son de la misma anchura
No se ajusta la longitud de las lneas (las lneas largas producen un scroll horizontal en la ventana del navegador)
Esta ltima caracterstica diferencia por completo a los prrafos de los elementos <pre>.
Como se ha visto, los navegadores ajustan la anchura de los prrafos de texto para que
ocupen todo el tamao de la ventana. Sin embargo, los elementos <pre> se muestran tal
y como son originalmente, por lo que una lnea muy larga dentro de un elemento <pre>
provoca que la anchura de la pgina sea superior a la anchura de la ventana del
navegador.
Si en el ejemplo anterior se aade ms texto al final de la segunda lnea (para producir
una lnea larga), el navegador muestra un scroll horizontal ya que el texto completo no
cabe en el tamao de la ventana y las lneas de los elementos <pre> nunca se ajustan.
42
Introduccin a XHTML
Captulo 3. Texto
code
Cdigo fuente
Atributos
comunes
Atributos
especficos
En la mayora de pginas web, no tiene sentido utilizar la etiqueta <code>. Sin embargo,
en muchas pginas web tcnicas que incluyen listados de programas, trozos de cdigo o
etiquetas HTML, lo correcto es emplear la etiqueta <code>.
Ejemplo:
<html>
<head><title>Ejemplo de etiqueta code</title></head>
<body>
< code>
La etiqueta code
no respeta los espacios en blanco
</ code>
<p>La etiqueta code es similar a la
etiqueta pre, sobre todo en el formato
del texto.</p>
</body>
</html>
www.librosweb.es
43
Introduccin a XHTML
Captulo 3. Texto
www.librosweb.es
44
Introduccin a XHTML
Captulo 3. Texto
Carcter
Descripcin
Traduccin
<
<
less than
>
>
more than
&
&
ampersand
ampersand
"
quotation mark
comillas
www.librosweb.es
45
Introduccin a XHTML
Captulo 3. Texto
(espacio en blanco)
non-breaking space
espacio en blanco
'
apostrophe
apstrofo
Para mostrar correctamente el texto anterior en una pgina HTML, se debe sustituir cada
carcter especial por su entidad HTML:
<p>Los caracteres <, >, " y & pueden dar problemas con los textos en
HTML</p>
Ejercicio 5
Determinar el cdigo HTML que corresponde al siguiente documento:
Por otra parte, los caracteres propios de los idiomas diferentes al ingls tambin pueden
ser problemticos. El motivo es que desde que se crea una pgina web hasta que llega al
navegador del usuario, intervienen numerosos procesos:
El diseador crea la pgina web con su editor HTML (por ejemplo Dreamweaver).
Si se trata de una aplicacin dinmica, el programador recorta la pgina HTML
del diseador y la mezcla con el resto del cdigo de la aplicacin (por ejemplo
PHP).
El servidor web almacena las pginas HTML estticas o el cdigo de la aplicacin
web y sirve las pginas solicitadas por los usuarios.
El usuario solicita y visualiza las pginas web a travs de su navegador.
www.librosweb.es
46
Introduccin a XHTML
Captulo 3. Texto
Si en todos los procesos anteriores se utiliza la misma codificacin de caracteres, los caracteres propios de los idiomas se pueden escribir directamente:
<p>Este prrafo contiene caracteres acentuados y se almacena en formato UTF-8</p>
La palabra prrafo del ejemplo anterior incluye la letra . Si el editor HTML del diseador
utiliza la codificacin UTF-8, el entorno de desarrollo del programador tambin utiliza
UTF-8, el servidor web sirve las pginas con esa codificacin y el navegador del usuario
es capaz de visualizar las pginas con formato UTF-8, el texto anterior se ver correctamente en el navegador del usuario.
Sin embargo, muchas veces no es posible que todos los procesos involucrados utilicen la
misma codificacin de caracteres. Por limitaciones tcnicas o por decisiones de los diseadores y programadores, los textos pueden pasar de codificacin UTF-8 a codificacin
ISO-8859 en cualquier momento. Si se produce este cambio sin realizar una conversin
correcta, el navegador del usuario mostrar caracteres extraos en todos los acentos y
en todas las letras como la .
La solucin ms sencilla para asegurar que todos estos caracteres potencialmente problemticos se van a visualizar correctamente en el navegador del usuario consiste en
sustituir cada carcter problemtico por su entidad HTML:
Entidad
Carcter
Descripcin
Traduccin
ñ
Ñ
á
a acute
é
e acute
í
i acute
ó
o acute
ú
u acute
Á
A acute
É
E acute
Í
I acute
Ó
O acute
Ú
U acute
€
euro
As, el prrafo de texto del ejemplo anterior, se podra escribir de la siguiente manera:
<p>Este párrafo contiene caracteres acentuados y se almacena en formato UTF-8</p>
www.librosweb.es
47
Introduccin a XHTML
entidades
HTML
Captulo 3. Texto
definidas
se
puede
consultar
en
http://en.wikipedia.org/wiki/
List_of_XML_and_HTML_character_entity_references
www.librosweb.es
48
Introduccin a XHTML
Captulo 4. Enlaces
Captulo 4. Enlaces
El lenguaje de marcado HTML se defini teniendo en cuenta algunas de las caractersticas
que existan en ese momento para la publicacin digital de contenidos. Entre los conceptos utilizados en su creacin, se encuentra el mecanismo de hipertexto.
De hecho, las letras HT de la sigla HTML significan hipertexto (hypertext en ingls),
por lo que el significado completo de HTML podra traducirse como lenguaje de marcado
para hipertexto.
El uso del sistema de hipertexto para crear documentos interactivos que proporcionan informacin adicional cuando se solicita, es una de las claves del xito del lenguaje HTML.
El elemento principal del hipertexto es el hiperenlace, tambin llamado enlace web o
simplemente enlace.
Los enlaces se utilizan para establecer relaciones entre dos recursos. Aunque la mayora
de enlaces relacionan pginas web, tambin es posible enlazar otros recuros como imgenes, documentos y archivos.
Una caracterstica que no se suele tener en cuenta en los enlaces es que estn formados
por dos extremos y un sentido. En otras palabras, el enlace comienza en un recurso y
apunta hacia otro recurso. Cada uno de los dos extremos se llaman anchors en ingls,
que se puede traducir literalmente como anclas.
4.1. URL
Antes de empezar a incluir enlaces en las pginas HTML creadas, es necesario comprender y dominar el concepto de URL. El acrnimo URL (del ingls Uniform Resource Locator) hace referencia al identificador nico de cada recurso disponible en Internet. Las URL
son esenciales para crear los enlaces, pero tambin se utilizan en otros elementos HTML
como las imgenes y los formularios.
Cada pgina web que est publicada en Internet tiene un nombre nico que permite diferenciarla de las dems. Ese nombre nico es la URL de la pgina y coincide con la direccin que muestra el navegador para esa pgina. Si se accede a la pgina principal de
Google, la direccin que muestra el navegador es:
http://www.google.com
www.librosweb.es
49
Introduccin a XHTML
Captulo 4. Enlaces
(por ejemplo las de los bancos y las de los servicios de email) utilizan https://
(se aade una letra s).
Servidor (www.librosweb.es): simplificando mucho su explicacin, se puede decir
que se trata del ordenador en el que se encuentra guardada la pgina que se quiere acceder.
Ruta (/xhtml/capitulo4.html): camino que se debe seguir, una vez que se ha llegado al servidor, para localizar la pgina concreta que se quiere acceder.
Por lo tanto, las URL no slo identifican de forma nica a cada recurso de Internet, sino
que tambin proporcionan la informacin necesaria para poder llegar hasta ese recurso.
Aunque la mayora de URL son similares a la mostrada anteriormente, las URL pueden
llegar a ser muy complejas y estar formadas por ms partes:
http://www.456bereastreet.com/archive/200606/
?title=standards_compliant_websites#comments
Carcter codificado
%2F
%3F
www.librosweb.es
50
Introduccin a XHTML
Captulo 4. Enlaces
%3A
%40
%3D
&
%26
%22
%5C
%60
%7E
(espacio en blanco)
%20
Por otra parte, aunque ya es posible que las URL contengan caracteres vlidos en cualquier idioma, an no es completamente seguro utilizar estos caracteres en las URL. Si se
utilizan letras como , , o , es posible que algunos navegadores no las interpreten de
forma correcta.
La solucin consiste en codificar todos los caracteres que no existen en ingls. La siguiente tabla muestra la codificacin de los caracteres ms utilizados:
Carcter original
Carcter codificado
%F1
%D1
%E1
%E9
%ED
%F3
%FA
%C1
%C9
%CD
%D3
%DA
%E7
%C7
Teniendo en cuenta las dos tablas anteriores de codificacin de caracteres, es fcil crear
las URL correctas sin caracteres problemticos:
www.librosweb.es
51
Introduccin a XHTML
Captulo 4. Enlaces
www.librosweb.es
52
Introduccin a XHTML
Captulo 4. Enlaces
los recursos de Internet y proporcionan la informacin necesaria para llegar hasta ellos,
el enlace debera utilizar la URL completa de la segunda pgina.
Las URL completas tambin se llaman URL absolutas, ya que el navegador no necesita
disponer de informacin adicional para localizar el recurso enlazado. Si se utilizan siempre las URL absolutas, los enlaces estn completamente definidos.
Sin embargo, escribir siempre las URL completas es bastante aburrido, cuesta mucho
tiempo y hace imposible cambiar la ubicacin de los contenidos de un sitio web. Por ese
motivo, casi todos los sitios web de Internet utilizan URL relativas siempre que es
posible.
Una URL relativa es una versin abreviada de una URL absoluta. Su objetivo es eliminar
todas las partes de la URL absoluta que se pueden adivinar a partir de la informacin de
contexto de la pgina web. En otras palabras, las URL relativas aprovechan la inteligencia
de los navegadores para crear URL incompletas que los navegadores pueden completar
deduciendo la informacin que falta.
Considerando de nuevo el ejemplo anterior, la URL a la que se quiere enlazar utiliza el
mismo protocolo y se encuentra en el mismo servidor que la pgina origen, por lo que la
URL relativa puede prescindir de esas partes:
URL absoluta: http://www.ejemplo.com/ruta1/ruta2/pagina2.html
URL relativa: /ruta1/ruta2/pagina2.html
En el ejemplo anterior, las dos URL son equivalentes porque cuando no se indica el protocolo y el servidor de una URL, los navegadores suponen que son los mismos que los de
la pgina origen. Por lo tanto, cuando el naveagdor encuentra la URL /ruta1/ruta2/pagina2.html, realiza el siguiente proceso:
1. La URL no es absoluta, por lo que tengo que determinar la URL absoluta a partir
de la URL relativa para poder cargar el recurso enlazado.
2. A la URL relativa le falta el protocolo y el servidor, por lo que supongo que son
los mismos que los de la pgina origen (http:// y www.ejemplo.com).
www.librosweb.es
53
Introduccin a XHTML
Captulo 4. Enlaces
3. Aado las partes que faltan a la URL relativa y as obtengo la URL absoluta:
http:// + www.ejemplo.com + /ruta1/ruta2/pagina2.html = http://www.ejemplo.com/
ruta1/ruta2/pagina2.html.
Aunque el ejemplo mostrado es el caso ms sencillo de URL relativa, existen otros casos
ms avanzados en los que se prescinde de parte o toda la ruta del recurso que se enlaza.
A continuacin es muestran los cuatro tipos diferentes de URL relativas:
1) El origen y el destino del enlace se encuentran en el mismo directorio
Si desde una pgina web se quiere enlazar un recurso que se encuentra en el mismo directorio del servidor, la URL relativa puede prescindir de todas las partes de la URL absoluta salvo el nombre del recurso enlazado.
Origen
http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html
Recurso enlazado Pgina web llamada pagina2.html y que se encuentra en el mismo directorio
URL absoluta
http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina2.html
URL relativa
pagina2.html
Cuando el navegador encuentra una URL relativa que slo consiste en el nombre de un
recurso, supone que el protocolo, servidor y directorio del recurso enlazado son los mismos que los del origen del enlace.
2) El destino del enlace se encuentra cerca de su origen y en un nivel superior
En este caso, el recurso que se enlaza no est en el mismo directorio que el origen del
enlace pero s que est cerca y en algn directorio superior. La ruta de la URL relativa
debe indicar de alguna manera que es necesario subir un nivel en la jerarqua de directorios para llegar hasta el recurso.
Para indicar al navegador que debe subir un nivel, se incluyen dos puntos y una barra
(../) en la ruta del recurso enlazado. De esta forma, cada vez que aparece ../ en una
URL relativa, significa que se debe subir un nivel.
Origen
http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html
Recurso
enlazado
URL absoluta
http://www.ejemplo.com/ruta1/ruta2/pagina2.html
URL relativa
../pagina2.html
llamado ruta2
Cuando el navegador encuentra la URL relativa ../pagina2.html, sabe que para encontrar el recurso enlazado (pagina2.html) tiene que subir un nivel desde el lugar en el que
se encuentra esa URL relativa. La pgina que incluye esa URL se encuentra en el directorio ruta1/ruta2/ruta3, por lo que subir un nivel equivale entrar en el directorio ruta1/
ruta2.
De la misma forma, si el destino se encuentra un par de niveles por encima, se debe incluir ../ dos veces seguidas:
www.librosweb.es
54
Introduccin a XHTML
Captulo 4. Enlaces
Origen
http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html
Recurso
enlazado
URL absoluta
http://www.ejemplo.com/ruta1/pagina2.html
URL relativa
../../pagina2.html
llamado ruta1
Adems de subir niveles, tambin se puede entrar en otros directorios para obtener los
recursos:
Origen
http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html
Recurso
enlazado
URL
absoluta
http://www.ejemplo.com/ruta4/pagina2.html
URL
relativa
../../ruta4/pagina2.html
http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html
Recurso
enlazado
URL absoluta
http://www.ejemplo.com/ruta1/ruta2/ruta3/ruta4/pagina1.html
URL relativa
ruta4/pagina2.html
llamado ruta4
De la misma forma, se pueden indicar varios directorios seguidos para que el navegador
descienda jerrquicamente por la estructura de directorios:
Origen
http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html
www.librosweb.es
55
Introduccin a XHTML
Captulo 4. Enlaces
ruta4/ruta5/ruta6/pagina2.html
http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html
Recurso
enlazado
URL
absoluta
http://www.ejemplo.com/ruta7/pagina2.html
URL
relativa
/ruta7/pagina2.html
Cuando la URL relativa comienza por /, el navegador considera que es la ruta completa
comenzando desde la raz del servidor, por lo que slo le aade el protocolo y el nombre
del servidor origen.
A continuacin se resumen los cuatro posibles casos de URL relativas y el procedimiento
que sigue el navegador para convertirlas en URL absolutas:
Si la URL relativa... El navegador la transforma en URL absoluta...
...slo consiste en
el nombre de un
recurso
www.librosweb.es
56
Introduccin a XHTML
En cualquier otro
caso
Captulo 4. Enlaces
Enlaces
Atributos
comunes
Atributos
especficos
El atributo ms importante de la etiqueta <a> es href, que se utiliza para indicar la URL a
la que apunta el enlace. Cuando el usuario pincha sobre un enlace, el navegador se dirige
a la URL del recurso indicado mediante href. Las URL de los enlaces pueden ser absolutas, relativas, internas y externas.
Con la definicin anterior, para crear un enlace que apunte a la pgina principal de Google solamente habra que incluir lo siguiente en un documento HTML:
<a href="http://www.google.com">Pgina principal de Google</a>
Como el atributo href indica una URL, un enlace puede apuntar a cualquier tipo de recurso al que pueda acceder el navegador. El siguiente enlace apunta a una imagen, que se
mostrar en el navegador cuando el usuario pinche sobre el enlace:
<a href="http://www.ejemplo.com/fondo_escritorio.jpg">Imagen interesante para un fondo
de escritorio</a>
De la misma forma, los enlaces pueden apuntar directamente a documentos PDF, Word,
etc.
<a href="http://www.ejemplo.com/informe.pdf">Descargar informe completo [PDF]</a>
<a href="http://www.ejemplo.com/informe.doc">Descargar informe completo [DOC]</a>
Un truco muy til con los enlaces es el uso de URL relativas para poder volver al inicio del
sitio web desde cualquier pgina web interior:
<a href="/">Volver al inicio</a>
www.librosweb.es
57
Introduccin a XHTML
Captulo 4. Enlaces
El enlace anterior utiliza una URL relativa con una ruta que apunta directamente a la raz
del servidor. Para obtener la URL absoluta, el navegador aade el mismo protocolo y el
mismo nombre de servidor de la pgina en la que se encuentra el enlace. El resultado es
que cuando se pincha ese enlace, siempre se vuelve al inicio del sitio web, independientemende de la pgina en la que se incluya el enlace.
El otro atributo bsico de la etiqueta <a> es name, que permite definir enlaces dentro de
una misma pgina web. Si una pgina es muy larga, puede ser til mostrar enlaces de tipo Saltar hasta la segunda seccin, Volver al principio de la pgina, etc.
Este tipo de enlaces son especiales, ya que la URL de la pgina siempre es la misma para
todas las secciones y por tanto, debe aadirse otra parte a las URL para identificar cada
seccin.
<a name="primera_seccion"></a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris id ligula eu felis
adipiscing ultrices. Duis gravida leo ut lectus. Praesent condimentum mattis ligula.</p>
...
<a name="segunda_seccion"></a>
<p>Pellentesque malesuada. In in lacus. Phasellus erat erat, lacinia a, convallis eu,
nonummy et, odio. Aenean urna elit, ultrices id, placerat varius, facilisis eget,
dolor.</p>
...
El atributo name permite crear enlaces vacos que hacen referencia a secciones dentro
de una misma pgina. Una vez definidos los enlaces vacos, es posible crear un enlace
que apunte directamente a una seccin concreta de una pgina:
<!-- Enlace normal a la pgina -->
<a href="http://www.ejemplo.com/pagina1.html">Enlace a la pgina 1</a>
<!-- Enlace directo a la segunda seccin de la pgina -->
<a href="http://www.ejemplo.com/pagina1.html#segunda_seccion">Enlace a la seccin 2 de
la pgina 1</a>
La sintaxis que se utiliza con estos enlaces es la misma que con los enlaces normales,
salvo que se aade el smbolo # seguido del nombre de la seccin a la que se apunta.
Cuando el usuario pincha sobre uno de estos enlaces, el navegador accede a la pgina
apuntada por la URL y baja directamente a la seccin cuyo nombre se indica despus del
smbolo #.
Tambin es posible utilizar este tipo de enlaces con URL relativas en una misma pgina.
El siguiente ejemplo aade enlaces de tipo Volver al inicio de la pgina en varias
secciones:
<a name="inicio"></a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris id ligula eu felis
adipiscing ultrices. Duis gravida leo ut lectus. Praesent condimentum mattis ligula.</p>
<a href="#inicio">Volver al inicio de la pgina</a>
...
www.librosweb.es
58
Introduccin a XHTML
Captulo 4. Enlaces
Los enlaces directos a secciones tambin funcionan con el atributo id de cualquier elemento. El siguiente ejemplo es equivalente al ejemplo anterior:
<h1 id="inicio">Ttulo de la pgina</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris id ligula eu felis
adipiscing ultrices. Duis gravida leo ut lectus. Praesent condimentum mattis ligula.</p>
<a href="#inicio">Volver al inicio de la pgina</a>
...
<p>Pellentesque malesuada. In in lacus. Phasellus erat erat, lacinia a, convallis eu,
nonummy et, odio. Aenean urna elit, ultrices id, placerat varius, facilisis eget,
dolor.</p>
<a href="#inicio">Volver al inicio de la pgina</a>
...
El nombre de la seccin que se indica despus del smbolo # puede utilizar el valor de los
atributos id de cualquier elemento. De hecho, se recomienda utilizar los atributos id de
los elementos ya existentes en la pgina en vez de crear enlaces vacos de tipo <a
name=nombre_seccion></a>.
Ejercicio 6
A partir de la estructura de directorios y archivos indicada en la siguiente imagen:
www.librosweb.es
59
Introduccin a XHTML
Captulo 4. Enlaces
60
Introduccin a XHTML
Captulo 4. Enlaces
Enlaces
Atributos
comunes
Atributos
especficos
de contenido que se enlaza (imgenes, archivos, etc.) para que pueda preparase en caso de que no entienda ese contenido
rel = "tipo_de_relacion" - Describe la relacin del documento actual
con el recurso enlazado
rev = "tipo_de_relacion" - Describe la relacin del recurso enlazado
con el documento actual
charset = "tipo_de_charset" - Describe la codificacin del recurso
enlazado
Idioma
Variacin idiomtica
en
Ingls
en-US
Ingls
Estados Unidos
es
Espaol
www.librosweb.es
61
Introduccin a XHTML
Captulo 4. Enlaces
es-ES
Espaol
Espaa
es-AR
Espaol
Argentina
www.librosweb.es
62
Introduccin a XHTML
Captulo 4. Enlaces
script
Cdigo ejecutable
Atributos
comunes
Atributos
especficos
www.librosweb.es
63
Introduccin a XHTML
script
Captulo 4. Enlaces
Cdigo ejecutable
type = "tipo_de_contenido" - Permite "avisar" al navegador sobre el tipo
de cdigo que se incluye (normalmente JavaScript)
defer = "defer" - El cdigo no va a modificar el contenido de la pgina
web
charset = "tipo_de_charset" - Describe la codificacin del cdigo
enlazado
Tipo de elemento Bloque y en lnea (tambin puede ser una etiqueta vaca)
Descripcin
El atributo type que se utiliza habitualmente para los archivos JavaScript es text/javascript. El atributo src es el equivalente del atributo href de los enlaces normales. La
URL indicada en el atributo src puede ser absoluta o relativa.
Adems de enlazar un archivo JavaScript externo, la misma etiqueta <script> tambin
permite incluir en la pgina web un bloque de cdigo JavaScript:
<html>
<head>
<script type="text/javascript">
//<![CDATA[
window.onload = function() { alert("La pgina se ha cargado completamente"); }
//]]>
</script>
</head>
<body>
...
</body>
</html>
Cuando se incluye cdigo JavaScript en la propia pgina web, se debe insertar dentro de
una seccin especial llamada CDATA. Cuando el navegador encuentra una seccin que comienza por <![CDATA[ y termina por ]]>, no procesa sus contenidos en busca de posibles
errores XHTML. De esta forma, se pueden construir pginas XHTML vlidas y cdigo JavaScript correcto (ms adelante se profundiza en el concepto de validacin de pginas).
Los caracteres // al comienzo y al final de la seccin CDATA son necesarios para los navegadores que no son capaces de procesar correctamente estas secciones.
www.librosweb.es
64
Introduccin a XHTML
Captulo 4. Enlaces
La etiqueta <script> (tanto cuando enlaza, como cuando incluye directamente el cdigo)
puede aparecer en cualquier parte del documento HTML, aunque normalmente se incluye
dentro de la cabecera de la pgina (<head>...</head>).
La segunda etiqueta para enlazar recursos es <link>, que permite enlazar y relacionar la
pgina web con otros recursos externos.
Tabla 4.4. Etiqueta link
link
Enlazar recursos
Atributos
comunes
Atributos
especficos
Los siguientes con el mismo significado que para la etiqueta "a": charset,
href, hreflang, type, rel y rev
media = "tipo_de_medio" - Indica el medio para el que debe aplicarse la
relacin
Al contrario que <script>, la etiqueta <link> solamente se puede incluir dentro de la cabecera del documento. Se pueden aadir tantas etiquetas <link> como hagan falta, pero
siempre dentro de <head>...</head>.
El atributo media hace referencia al medio para el que es vlida la relacin con el recurso
enlazado. Los medios disponibles tambin estn estandarizados, siendo los ms comunes
screen para los contenidos mostrados en pantalla, print para las impresoras y handheld
para los dispositivos mviles.
El uso habitual de la etiqueta <link> es el de enlazar las hojas de estilos CSS utilizadas
por las pginas web:
<head>
...
<link rel="stylesheet" type="text/css" href="/css/comun.css" />
</head>
En este caso, es habitual establecer los atributos rel y type para indicar el tipo de recurso enlazado y su relacin con la pgina web. La URL del recurso enlazado se indica en el
atributo href, que admite tanto URL absolutas como relativas.
www.librosweb.es
65
Introduccin a XHTML
Captulo 4. Enlaces
Al pulsar el enlace anterior desde cualquier pgina web, se vuelve directamente a la pgina de inicio, home o pgina principal del sitio web.
Todas las opciones anteriores se pueden combinar entre s para realizar ejemplos ms
avanzados. Aunque el uso de mailto: puede parecer una ventaja, su uso est desaconsejado. Si se incluye una direccin de correo electrnico directamente en una pgina web,
es muy probable que en poco tiempo esa direccin de email se encuentre llena de correo
electrnico basura o spam, ya que existen programas automticos encargados de rastrear sistemticamente todas las pginas web de Internet para encontrar direcciones de
correo electrnico vlidas.
La forma de mostrar las direcciones de correo electrnico en las pginas web consiste en
incluir la direccin en una imagen o indicarla de forma que solamente los usuarios puedan entenderlo:
<p>La
<p>La
<p>La
<p>La
<p>La
direccin
direccin
direccin
direccin
direccin
de
de
de
de
de
correo
correo
correo
correo
correo
es
es
es
es
es
www.librosweb.es
66
Introduccin a XHTML
Captulo 4. Enlaces
Aunque en principio la imagen debera ser de tipo .ICO (formato grfico de los iconos),
algunos navegadores soportan favicons en otros formatos grficos ms habituales (como
por ejemplo .PNG).
67
Introduccin a XHTML
Captulo 4. Enlaces
type="text/html"
rel="alternate"
hreflang="es"
href="http://www.ejemplo.com/manual/espanol.html" />
</head>
4.6.11. Indicar que existe una pgina que es ndice de la pgina actual
<head>
<title>Manual Captulo 5</title>
<link rel="start" title="El ndice del manual"
type="text/html"
href="http://www.ejemplo.com/manual/indice.html" />
</head>
Ejercicio 7
Enlazar el favicon en todas las pginas del ejercicio 6 y aadir todos los atributos posibles a los
enlaces.
www.librosweb.es
68
Introduccin a XHTML
Captulo 5. Listas
Captulo 5. Listas
En ocasiones, es posible agrupar determinadas palabras o frases en un conjunto de elementos que tienen ms significado de forma conjunta. El men de navegacin de un sitio
web por ejemplo est formado por un grupo de palabras. Aunque cada palabra por separado tiene sentido, de forma conjunta constituyen el men de navegacin de la pgina,
por lo que su significado conjunto es mayor que por separado.
El lenguaje HTML define tres tipos diferentes de listas para agrupar los elementos: listas
no ordenadas (se trata de una coleccin simple de elementos en la que no importa su orden), listas ordenadas (similar a la anterior, pero los elementos estn numerados y por
tanto, importa su orden) y listas de definicin (un conjunto de trminos y definiciones similar a un diccionario).
ul
Lista no ordenada
Atributos
comunes
Atributos
especficos
li
Atributos
comunes
Atributos
especficos
www.librosweb.es
69
Introduccin a XHTML
Captulo 5. Listas
<html>
<head><title>Ejemplo de etiqueta UL</title></head>
<body>
<h1>Men</h1>
<ul>
<li>Inicio</li>
<li>Noticias</li>
<li>Artculos</li>
<li>Contacto</li>
</ul>
</body>
</html>
www.librosweb.es
70
Introduccin a XHTML
Captulo 5. Listas
En todos estos casos, la lista ms adecuada es la lista ordenada, que se define mediante
la etiqueta <ol>. Los elementos de la lista se definen mediante la etiqueta <li>, la misma
que se utiliza en las listas no ordenadas.
Tabla 5.3. Etiqueta ol
ol
Lista ordenada
Atributos
comunes
Atributos
especficos
www.librosweb.es
71
Introduccin a XHTML
Captulo 5. Listas
dl
Lista de definicin
Atributos
comunes
Atributos
especficos
72
Introduccin a XHTML
dt
Atributos
comunes
Atributos
especficos
Captulo 5. Listas
Se emplea para definir los trminos de los elementos de una lista de definicin
dd
Lista de definicin
Atributos
comunes
Atributos
especficos
www.librosweb.es
73
Introduccin a XHTML
Captulo 5. Listas
www.librosweb.es
74
Introduccin a XHTML
Captulo 5. Listas
Ejercicio 9
Determinar el cdigo HTML que corresponde a la siguiente lista anidada compleja
www.librosweb.es
75
Introduccin a XHTML
img
Imagen
Atributos
comunes
Atributos
especficos
Los dos atributos requeridos son src y alt. El atributo src es similar al atributo href de
los enlaces, ya que establece la URL de la imagen que se va a mostrar en la pgina. Las
URL indicadas pueden ser absolutas o relativas. El atributo alt proporciona un texto
www.librosweb.es
76
Introduccin a XHTML
alternativo a la imagen. La finalidad del atributo alt es describir muy brevemente la imagen a la que hace referencia (la descripcin debe ser menor que 1.024 caracteres).
Ejemplo sencillo para incluir una imagen:
<img src="logotipo.gif" alt="Logotipo de Mi Sitio" />
Como es una etiqueta vaca, <img> no tiene etiqueta de cierre, pero debe cerrarse para
que el documento XHTML sea vlido. Como ya se explic anteriormente, la forma de cerrar una etiqueta vaca es mediante el smbolo /> al final de la etiqueta.
HTML no impone ninguna restriccin sobre el formato grfico que se puede utilizar en las
imgenes, por lo que en principio la etiqueta <img> puede incluir cualquier formato grfico existente. Sin embargo, si la imagen utiliza un formato poco habitual, todos o algunos
navegadores no sern capaces de mostrar esa imagen.
La recomendacin es utilizar uno de los tres siguientes formatos grficos que entienden
todos los navegadores modernos: GIF, JPG y PNG. El nico inconveniente con estos formatos es que Internet Explorer 6 y las versiones anteriores no muestran correctamente
las imgenes en formato PNG con transparencia de 24 bits (lo que se conoce como canal
alpha).
El atributo longdesc no se utiliza de forma habitual, pero permite indicar una URL en la
que se puede mostrar ms informacin sobre la imagen. Como la informacin adicional
suele ser en forma de texto, es algo muy til cuando la imagen es compleja para describirla y la persona que accede al contenido tiene algn tipo de discapacidad visual:
<img src="/imagenes/proyecto1.png" alt="Imagen del Proyecto 1" longdesc="/portfolio/
proyecto1.html" />
<img src="/imagenes/proyecto2.jpg" alt="Imagen del Proyecto 2"
longdesc="/mas_informacion.html" />
En el ejemplo anterior, las dos imgenes se encuentran en el mismo directorio del servidor (/imagenes/). Se trata de una estrategia habitual en la mayora de sitios web: guardar todas las imgenes de contenido en un directorio especial independiente del resto de
contenidos HTML. Adems, el directorio siempre suele llamarse de la misma manera:
imagenes o images en ingls.
Los atributos width y height se utilizan para indicar la anchura y altura con la que se
muestran las imgenes, por lo que son los ms contradictorios. Como ya se ha comentado, HTML estructura de forma correcta los contenidos de la pgina y CSS define el aspecto grfico con el que se muestran los contenidos. En principio, la anchura y la altura con
la que se muestra una imagen es parte de su aspecto grfico, por lo que debera ser propio de CSS y no de XHTML.
Sin embargo, en la prctica no es viable establecer la anchura y altura de todas las imgenes de contenidos mediante CSS. Si el sitio web dispone de muchas imgenes, la sobrecarga de estilos diferentes que debera definir CSS sera contraproducente. Por este
motivo, los atributos width y height son la excepcin a la norma de que el cdigo HTML
no haga referencia al aspecto de los contenidos.
www.librosweb.es
77
Introduccin a XHTML
Si el valor del atributo width o height se indica mediante un nmero entero, se sobreentiende que hace referencia a la unidad de medida pxel. Por tanto, en el ejemplo anterior,
la primera foto se muestra con una anchura de 200 pxel y una altura de 350 pxel.
Tambin es posible indicar la anchura y altura en forma de porcentaje. En este caso, el
porcentaje hace referencia a la altura/anchura del elemento en el que est contenida la
imagen. Si la imagen no se encuentra dentro de ningn otro elemento, hace referencia a
la anchura/altura total de la pgina.
<div>
<img src="/imagenes/foto1.jpg" alt="Fotografa de un paisaje" width="30%"
height="350" />
</div>
El ejemplo anterior mezcla los dos tipos de medidas que se pueden utilizar, para indicar
que la foto tiene una anchura igual al 30% de la anchura del elemento <div> que la contiene y una altura de 350 pxel.
La anchura/altura con la que se muestra una imagen no tiene que coincidir obligatoriamente con la anchura/altura real de la imagen. Sin embargo, cuando estos valores no
coinciden, las imgenes se muestran deformadas y el aspecto final es muy desagradable.
Ejercicio 10
Modificar la pgina de ndice del portfolio de los ejercicios 6 y 7 para mostrar directamente las imgenes de los proyectos.
www.librosweb.es
78
Introduccin a XHTML
Figura 6.1. Nueva pgina del portfolio que muestra la imagen de cada uno de los proyectos
www.librosweb.es
79
Introduccin a XHTML
map
Mapa de imagen
Atributos
comunes
Atributos
especficos
area
Atributos
comunes
Atributos
especficos
coords = "lista de nmeros" - Se trata de una lista de nmeros separados por comas que representan las coordenadas del rea. Rectangular =
X1,Y1,X2,Y2 (coordenadas X e Y del vrtice superior izquierdo y coordenadas X e Y del vrtice inferior derecho). Circular = X1,Y1,R (coordenadas X e
Y del centro y radio del crculo). Poligonal = X1,Y1,X2,Y2,...,XnYn (coordenadas de los vrtices del polgono. Si las ltimas coordenadas no son iguales que las primeras, se cierra automticamente el polgono uniendo ambos
vrtices)
Se emplea para definir las distintas reas que forman un mapa de imagen
Si una imagen utiliza un mapa de imagen, debe indicarlo mediante el atributo usemap. El
valor del atributo debe ser el nombre del mapa de imagen definido en otra parte del mismo documento HTML:
<img src="mapa_mundo.gif" usemap="#continentes" />
...
<map name="continentes">
...
</map>
www.librosweb.es
80
Introduccin a XHTML
Las reas se definen mediante el atributo shape que indica el tipo de rea y coords que es
una lista de coordenadas cuyo significado depende del tipo de rea definido. El enlace de
cada rea se define mediante el atributo href, con la misma sintaxis y significado que para los enlaces normales.
El siguiente ejemplo muestra una imagen sencilla en la que se han definido cuatro regiones correspondientes a las cuatro figuras geomtricas que muestra:
6.3. Objetos
Adems de las imgenes, HTML permite incluir en las pginas web otros elementos mucho ms complejos, como applets de Java y vdeos en formato QuickTime o Flash. La
mayora de este tipo de contenidos no los interpreta el navegador directamente, sino que
hace uso de pequeos programas llamados plugins y que se encargan de tratar con este
tipo de elementos complejos.
La etiqueta <object> es la que permite embeber o incluir en las pginas HTML cualquier
tipo de contenido complejo:
Tabla 6.4. Etiqueta object
object
Objeto
Atributos
comunes
www.librosweb.es
81
Introduccin a XHTML
object
Objeto
data = "url" - Indica la URL de los datos que utiliza el objeto
classid, codebase, codetype - Informacin especfica que depende del
Atributos
especficos
tipo de objeto
height = "unidad_de_medida" - Indica la altura con la que se debe mostrar el objeto
width = "unidad_de_medida" - Indica la anchura con la que se debe mostrar el objeto
El atributo data se emplea para indicar la URL del recurso que se va a incluir. El atributo
type indica el tipo de contenido incluido. El propio estndar de HTML incluye ejemplos de
uso de esta etiqueta. Incluir un vdeo en formato MPEG:
<object data="PlanetaTierra.mpeg" type="application/mpeg" />
A los objetos tambin se les puede pasar informacin adicional en forma de parmetros
mediante la etiqueta <param>:
Tabla 6.5. Etiqueta param
param
Parmetros de un objeto
Atributos
comunes
id
Atributos
especficos
www.librosweb.es
82
Introduccin a XHTML
param
Parmetros de un objeto
Uno de los principales inconvenientes de <object> es la forma de incluir vdeos en formato Flash en las pginas HTML. Si se utiliza el siguiente cdigo:
<object data="nombre_video.swf" type="application/x-shockwave-flash"></object>
El elemento anterior es correcto desde el punto de vista tcnico, pero provoca que algunos navegadores como Internet Explorer no visualicen el vdeo hasta que se ha descargado completamente. Si se trata de un vdeo largo, esta solucin no es vlida para el
usuario.
Por este motivo, se utiliza una solucin alternativa para incluir vdeos Flash en las pginas HTML: el uso de la etiqueta <embed>. Aunque esta solucin funciona correctamente,
no se trata de una solucin vlida desde el punto de vista del estndar de XHTML, por lo
que las pginas que incluyan esta solucin no pasarn correctamente el proceso de
validacin.
Tabla 6.6. Etiqueta embed
embed
Embeber objetos
Atributos
comunes
Atributos
especficos
www.librosweb.es
83
Introduccin a XHTML
Este es el motivo por el que los sitios web ms populares de vdeos en formato Flash proporcionan un cdigo similar al siguiente para incluir sus vdeos en las pginas HTML:
<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/MsH0rBWCYjs"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/MsH0rBWCYjs" type="application/
x-shockwave-flash" wmode="transparent" width="425" height="350"></embed>
</object>
Una vez ms, se debe tener en cuenta que la solucin anterior de utilizar la etiqueta <embed> es correcta desde el punto de vista del usuario (no tiene que esperar a que el vdeo
se descargue completamente para poder verlo) pero no es una solucin tcnicamente vlida, ya que la etiqueta <embed> no es parte del estndar XHTML.
www.librosweb.es
84
Introduccin a XHTML
Captulo 7. Tablas
Captulo 7. Tablas
Desde sus primeras versiones, HTML incluy el soporte para crear tablas de datos en las
pginas web. Adems de ser sencillo, el modelo definido por HTML es muy flexible y bastante completo.
Las tablas en HTML utilizan los mismos conceptos de filas, columnas, cabeceras y ttulos
que los que se utilizan en cualquier otro entorno de publicacin de documentos:
85
Introduccin a XHTML
Captulo 7. Tablas
recomendable. El motivo es que se complica en exceso el cdigo HTML y su mantenimiento es muy complejo. La solucin correcta para definir la estructura de las pginas consiste en la utilizacin de hojas de estilos CSS.
www.librosweb.es
86
Introduccin a XHTML
Captulo 7. Tablas
Figura 7.2. Ejemplo de tabla sencilla creada con las etiquetas table, tr y td
La etiqueta <table> encierra todas las filas y columnas de la tabla. Las etiquetas <tr>
(del ingls table row) definen cada fila de la tabla y encierran todas las columnas. Por
ltimo, la etiqueta <td> (del ingls table data cell) define cada una de las columnas de
las filas, aunque realmente HTML no define columnas sino celdas de datos.
Al definir una tabla, se debe pensar en primer lugar en las filas que la forman y a continuacin en las columnas. El motivo es que HTML procesa primero las filas y por eso las
etiquetas <tr> aparecen antes que las etiquetas <td>.
Tabla 7.1. Etiqueta table
table
Tabla
Atributos
comunes
Atributos
especficos
www.librosweb.es
87
Introduccin a XHTML
Captulo 7. Tablas
tr
Fila de tabla
Atributos
comunes
Atributos
especficos
td
Celda de tabla
Atributos
comunes
Atributos
especficos
para esta celda (los ttulos de las columnas y filas). Se indica como una lista
de valores del atributo "id" de celdas
scope = "col, row, colgroup, rowgroup" - Indica las celdas para las
que esta celda ser su cabecera. Ej: scope="col" indica que esta celda es la
cabecera de todas las dems celdas que estn en la misma columna
colspan = "numero" - Nmero de columnas que ocupa esta celda
rowspan = "numero" - Nmero de filas que ocupa esta celda
Se emplea para definir cada una de las celdas que forman las filas de una
tabla, es decir, las columnas de la tabla
De todos los atributos disponibles para las celdas, los ms utilizados son rowspan y colspan, que se emplean para construir tablas complejas como las que se ven ms adelante.
Entre los dems atributos, slo se utiliza de forma habitual el atributo scope, sobre todo
con las celdas de cabecera que se ven a continuacin.
Normalmente, algunas de las celdas de la tabla se utilizan como cabecera de las dems
celdas de la fila o de la columna. En este caso, HTML define la etiqueta <th> (del ingls table header cell) para indicar que una celda es cabecera de otras celdas.
Tabla 7.4. Etiqueta th
www.librosweb.es
88
Introduccin a XHTML
Captulo 7. Tablas
th
Atributos
comunes
Atributos
especficos
scope = "col, row, colgroup, rowgroup" - Indica las celdas para las
que esta celda ser su cabecera. Ej: scope="col" indica que esta celda es la
cabecera de todas las dems celdas que estn en la misma columna
colspan = "numero" - Nmero de columnas que ocupa esta celda
rowspan = "numero" - Nmero de filas que ocupa esta celda
Descripcin
Los atributos de la etiqueta <th> son idnticos que los atributos definidos para la etiqueta
<td>. En este caso, el atributo ms utilizado es scope, que permite indicar si la celda es
cabecera
de
la
fila
de
la
columna
(<th
scope=row>
<th
scope=col>
respectivamente).
Por otra parte, HTML define la etiqueta <caption> para establecer la leyenda o ttulo de
una tabla. La etiqueta debe colocarse inmediatamente despus de la etiqueta <table> y
cada tabla slo puede incluir una etiqueta <caption>.
Tabla 7.5. Etiqueta caption
caption
Atributos
comunes
Atributos
especficos
Ejercicio 11
Determinar el cdigo HTML necesario para crear la tabla que se muestra en la siguiente imagen:
www.librosweb.es
89
Introduccin a XHTML
Captulo 7. Tablas
www.librosweb.es
90
Introduccin a XHTML
Captulo 7. Tablas
www.librosweb.es
91
Introduccin a XHTML
Captulo 7. Tablas
La primera fila de la tabla est formada slo por una columna, mientras que la segunda
fila est formada por dos columnas. En principio, podra pensarse en utilizar el siguiente
cdigo HTML para definir la tabla:
<table>
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
<td>C</td>
</tr>
</table>
www.librosweb.es
92
Introduccin a XHTML
Captulo 7. Tablas
En el ejemplo anterior, la celda de la primera fila debe ocupar el espacio de dos columnas
simples, por lo que el cdigo HTML debe ser <td colspan=2>A</td>.
De forma equivalente, si se quiere disear una tabla HTML que fusiona filas como la de la
siguiente imagen:
De forma anloga a la fusin de columnas del ejemplo anterior, la fusin de filas debe indicarse de forma especial. Como las tablas HTML tienen que ser regulares, todas las columnas deben tener el mismo nmero de filas. As, si en el ejemplo anterior se utilizara
el siguiente cdigo:
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>
www.librosweb.es
93
Introduccin a XHTML
Captulo 7. Tablas
va a ocupar dos filas, de manera que todas las columnas de la tabla cuenten con el mismo nmero de filas.
Utilizando los atributos rowspan y colspan, es posible disear tablas tan complejas como
las que se muestran en los siguientes ejemplos.
Ejemplo de fusin de mltiples columnas:
94
Introduccin a XHTML
Captulo 7. Tablas
<td colspan="4">F</td>
</tr>
<tr>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
</tr>
</table>
</body>
</html>
95
Introduccin a XHTML
Captulo 7. Tablas
<td>D</td>
</tr>
<tr>
<td rowspan="2">E</td>
<td>F</td>
<td rowspan="3">G</td>
</tr>
<tr>
<td>H</td>
</tr>
<tr>
<td>I</td>
<td>J</td>
<td>K</td>
</tr>
</table>
</body>
</html>
Ejercicio 13
Determinar el cdigo HTML necesario para crear la tabla que se muestra en la siguiente imagen:
www.librosweb.es
96
Introduccin a XHTML
Captulo 7. Tablas
www.librosweb.es
97
Introduccin a XHTML
Captulo 7. Tablas
thead
tbody
tfoot
Cabecera de tabla
Seccin de una tabla
Pie de tabla
Atributos
comunes
Atributos
especficos
www.librosweb.es
98
Introduccin a XHTML
thead
tbody
tfoot
Captulo 7. Tablas
Cabecera de tabla
Seccin de una tabla
Pie de tabla
Se emplean para agrupar varias filas en una cabecera (thead) un pie (tfoot) o
una seccin (tbody) de una tabla
Cada tabla puede contener solamente una cabecera y un pie, pero puede incluir un nmero ilimitado de secciones. Si se define una cabecera y/o un pie, las etiquetas <thead>
y/o <tfoot> deben colocarse inmediatamente antes que cualquier etiqueta <tbody>.
La siguiente imagen muestra una tabla avanzada con cabecera, pie y una seccin de
datos:
99
Introduccin a XHTML
Captulo 7. Tablas
<html>
<head><title>Ejemplo de tabla avanzada</title></head>
<body>
<h3>Anlisis de ventas</h3>
<table summary="Anlisis de ventas anuales">
<caption>Anlisis de ventas anuales</caption>
<thead>
<tr>
<th rowspan="2" scope="col">AO</th>
<th colspan="4" scope="col">Expansin de ventas</th>
</tr>
<tr>
<th scope="col">Producto A</th>
<th scope="col">Producto B</th>
<th scope="col">Producto C</th>
<th scope="col">Producto D</th>
</tr>
</thead>
<tfoot>
<tr>
<th rowspan="2" scope="col">AO</th>
<th scope="col">Producto A</th>
<th scope="col">Producto B</th>
<th scope="col">Producto C</th>
<th scope="col">Producto D</th>
</tr>
<tr>
<th colspan="4" scope="col">Expansin de ventas</th>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">N-3</th><td>-</td><td>-</td><td>-</td><td>-</td>
</tr>
<tr>
<th scope="row">N-2</th><td>3</td><td>5</td><td>8</td><td>4</td>
</tr>
<tr>
<th scope="row">N-1</th><td>4</td><td>4</td><td>7</td><td>3</td>
</tr>
<tr>
<th scope="row">N</th><td>5</td><td>7</td><td>6</td><td>2</td>
</tr>
</tbody>
</table>
</body>
</html>
www.librosweb.es
100
Introduccin a XHTML
Captulo 7. Tablas
Aunque al principio resulta extrao, el elemento <tfoot> siempre se escribe antes que
cualquier elemento <tbody> en el cdigo HTML. De hecho, si la etiqueta <tfoot> aparece
despus de un elemento <tbody>, la pgina no se considera vlida.
La etiqueta <tbody> permite realizar agrupaciones de filas, pero en ocasiones se necesitan agrupar columnas. Aunque su uso no es muy comn, HTML define dos etiquetas similares para agrupar columnas: <col> y <colgroup>.
La etiqueta <col> se utiliza para asignar los mismos atributos a varias columnas de forma
simultnea. De esta forma, la etiqueta <col> no agrupa columnas, sino que slo asigna
atributos comunes a varias columnas.
La siguiente imagen muestra una tabla que hace uso de la etiqueta <col>:
scope="col">AO</th>
scope="col">Producto
scope="col">Producto
scope="col">Producto
scope="col">Producto
www.librosweb.es
A</th>
B</th>
C</th>
D</th>
101
Introduccin a XHTML
Captulo 7. Tablas
</tr>
</thead>
<tbody>
<tr>
<th scope="row">N-3</th><td>-</td><td>-</td><td>-</td><td>-</td>
</tr>
<tr>
<th scope="row">N-2</th><td>3</td><td>5</td><td>8</td><td>4</td>
</tr>
<tr>
<th scope="row">N-1</th><td>4</td><td>4</td><td>7</td><td>3</td>
</tr>
<tr>
<th scope="row">N</th><td>5</td><td>7</td><td>6</td><td>2</td>
</tr>
</tbody>
</table>
Por otra parte, la etiqueta <colgroup> se emplea para agrupar de forma estructural varias
columnas de la tabla. La forma habitual de indicar el nmero de columnas que abarca la
agrupacin es utilizar el atributo span, que establece el nmero de columnas de cada
agrupacin.
La siguiente imagen muestra una tabla avanzada con una agrupacin de columnas realizada con la etiqueta <colgroup>:
102
Introduccin a XHTML
Captulo 7. Tablas
A</th>
B</th>
C</th>
D</th>
<tbody>
<tr>
<th scope="row">N-3</th><td>-</td><td>-</td><td>-</td><td>-</td>
</tr>
<tr>
<th scope="row">N-2</th><td>3</td><td>5</td><td>8</td><td>4</td>
</tr>
<tr>
<th scope="row">N-1</th><td>4</td><td>4</td><td>7</td><td>3</td>
</tr>
<tr>
<th scope="row">N</th><td>5</td><td>7</td><td>6</td><td>2</td>
</tr>
</tbody>
</table>
El uso de las etiquetas <col> y <colgroup> no est muy extendido, debido a que la mayora de navegadores no soportan muchas de sus funcionalidades.
www.librosweb.es
103
Introduccin a XHTML
Captulo 8. Formularios
Captulo 8. Formularios
HTML es un lenguaje de marcado cuyo propsito principal es el de estructurar los contenidos de los documentos y pginas web. Adems, HTML tambin incluye elementos para
crear aplicaciones web. De esta forma, HTML permite incluir formularios en las pginas
para que los usuarios interacten con las aplicaciones web.
Desde formularios sencillos como los que utilizan los buscadores hasta formularios complejos para darse de alta en algn servicio, HTML incluye los suficientes elementos como
para crear cualquier formulario complejo.
Figura 8.1. Formulario sencillo definido con las etiquetas form e input
El cdigo HTML necesario para definir el formulario anterior se muestra a continuacin:
<html>
<head><title>Ejemplo de formulario sencillo</title></head>
<body>
<h3>Formulario muy sencillo</h3>
<form action="http://www.librosweb.es/maneja_formulario.php" method="post">
Escribe tu nombre:
<input type="text" name="nombre" value="" />
www.librosweb.es
104
Introduccin a XHTML
Captulo 8. Formularios
<br/>
<input type="submit" value="Enviar" />
</form>
</body>
</html>
La etiqueta <form> encierra todos los contenidos del formulario (botones, cuadros de texto, listas desplegables) y la etiqueta <input> permite definir varios tipos diferentes de
elementos (botones y cuadros de texto).
Tabla 8.1. Etiqueta form
form
Formulario
Atributos
comunes
Atributos
especficos
data" - Tipo de codificacin empleada al enviar el formulario al servidor (slo se indica de forma explcita en los formularios que permiten adjuntar
archivos)
accept = "tipo_de_contenido" - Lista separada por comas de todos los
tipos de archivos aceptados por el servidor (slo para los formularios que
permiten adjuntar archivos)
Otros: accept-charset, onsubmit, onreset
La mayora de formularios utilizan slo los atributos action y method. El atributo action
indica la URL de la aplicacin del servidor que se encarga de procesar los datos introducidos por los usuarios. Esta aplicacin tambin se encarga de generar la respuesta que
muestra el navegador.
El atributo method establece la forma en la que se envian los datos del formulario al servidor. Este atributo hace referencia al mtodo HTTP, por lo que no es un concepto propio
de HTML. Los dos valores que se utilizan en los formularios son GET y POST. De esta forma, casi todos los formularios incluyen el atributo method=get o el atributo
method=post.
www.librosweb.es
105
Introduccin a XHTML
Captulo 8. Formularios
Al margen de diferencias tcnicas, el mtodo POST permite el envo de mucha ms informacin que el mtodo GET. Adems, los datos enviados mediante GET se ven en el navegador (se aaden al final de la URL de la pgina), mientras que los datos enviados mediante POST no se pueden ver tan fcilmente.
Si no sabes que mtodo elegir para un formulario, existe una regla general que dice que
el mtodo GET se debe utilizar en los formularios que no modifican la informacin (por
ejemplo en un formulario de bsqueda). Por su parte, el mtodo POST se debera utilizar
cuando el formulario modifica la informacin original (insertar, modificar o borrar alguna
informacin).
El ejemplo ms comn de formulario con mtodo GET es el de los buscadores. Si realizas
una bsqueda con tu buscador favorito, vers que las palabras que has introducido en tu
bsqueda aparecen como parte de la URL de la pgina de resultados.
Del resto de atributos de la etiqueta <form>, el nico que se utiliza ocasionalmente es
enctype. Este atributo es imprescindible en los formularios que permiten adjuntar archivos, que deben indicar que su codificacin es <form enctype=multipart/form-data>
Por otra parte, los elementos que incluyen los formularios, como por ejemplo los botones
y los cuadros de texto, tambin se denominan campos de formulario y controles de
formulario. La etiqueta <input> se emplea para crear diez tipos de controles diferentes.
Por este motivo, la definicin formal de <input> y su lista de atributos es bastante
extensa:
Tabla 8.2. Etiqueta input
input
Control de un formulario
Atributos
comunes
Atributos
especficos
www.librosweb.es
106
Introduccin a XHTML
input
Captulo 8. Formularios
Control de un formulario
disabled = "disabled" - El control aparece deshabilitado y su valor no se
enva al servidor junto con el resto de datos
readonly = "readonly" - El contenido del control no se puede modificar
src = "url" - Para el control que permite crear botones con imgenes, indica la URL de la imagen que se emplea como botn de formulario
alt = "texto" - Descripcin del control
A continuacin se muestran ejemplos para los diez controles que permite definir la etiqueta <input>:
Cuadro de texto:
Se trata del elemento ms utilizado en los formularios. En el caso ms sencillo, se muestra un cuadro de texto vaco en el que el usuario puede escribir cualquier texto:
El atributo type es lo que diferencia cada uno de los diez controles que se pueden crear
con la etiqueta <input>. Para los cuadros de texto, su valor es text. El atributo name es el
ms importante en los campos del formulario. De hecho, si un campo no incluye el atributo name, sus datos no se envan al servidor. El valor que se indica en el atributo name es
el nombre que va a utilizar la aplicacin del servidor para obtener el valor de este campo
de formulario.
Cuando el usuario pulsa el botn de envo del formulario, el navegador enva los datos a
una aplicacin del servidor para que procese la informacin y genere una respuesta adecuada. En el servidor, la aplicacin que procesa los datos debe obtener en primer lugar toda la informacin introducida por el usuario. Para ello, utiliza el valor del atributo name
para referirse a cada control del formulario y para obtener sus datos.
Como el valor del atributo name se utiliza en aplicaciones programadas, es esencial ponerse de acuerdo con el programador de la aplicacin, no se debe modificar su valor sin modificar la aplicacin y no se deben utilizar caracteres problemticos en programacin (espacios en blanco, acentos y caracteres como o ).
www.librosweb.es
107
Introduccin a XHTML
Captulo 8. Formularios
El atributo value se emplea para establecer el valor inicial del cuadro de texto. Si se crea
un formulario para insertar datos, los cuadros de texto deberan estar vacos. Por lo tanto, o no se aade el atributo value o se incluye con un valor vaco value=. Si por el
contrario se crea un formulario para modificar datos, lo lgico es que se muestren inicialmente los datos guardados en el sistema. En este caso, el atributo value incluir el valor
que se desea mostrar: <inpu type=text name=nombre value=Juan Prez />.
Si no se especifica un tamao, el navegador muestra el cuadro de texto con un tamao
estndar adecuado. El atributo size permite establecer el tamao, en caracteres, con el
que se mostrar el cuadro de texto. Su uso es imprescindible en muchos formularios, en
los que algunos campos como la direccin deben mostrar ms caracteres de lo normal
(<input size=100 ...) y otros campos como el cdigo postal deben mostrar menos caracteres de lo normal (<input size=5...).
Adems de controlar el tamao con el que se muestra un cuadro de texto, tambin se
puede limitar el tamao del texto introducido. El atributo maxlength permite establecer el
mximo nmero de caracteres que el usuario puede introducir en un cuadro de texto. Su
uso es imprescindible para campos como el cdigo postal, el nmero de la Seguridad Social y cualquier otro dato con formato predefinido y limitado.
Por ltimo, el atributo readonly permite que el usuario pueda ver los contenidos del cuadro de texto pero no pueda modificarlos. El atributo disabled deshabilita un cuadro de
texto de forma que el usuario no pueda modificarlo y adems, el navegador no enva sus
datos al servidor.
Cuadro de contrasea
La nica diferencia entre este control y el cuadro de texto normal es que el texto que se
escribe en un cuadro de contrasea no se ve por pantalla. En su lugar, los navegadores
ocultan el texto utilizando asteriscos o crculos, por lo que es ideal para escribir contraseas y otros datos sensibles.
Contrasea <br/>
<input type="password" name="contrasena" value="" />
Cambiando el valor del atributo type por password se transforma el cuadro de texto normal en un cuadro de contrasea. Todos los dems atributos se utilizan de la misma forma y tienen el mismo significado.
Checkbox
Los checkbox o casillas de verificacin son controles de formulario que permiten al usuario seleccionar y deseleccionar opciones individualmente. Aunque en ocasiones se
muestran varios checkbox juntos, cada uno de ellos es completamente independiente del
www.librosweb.es
108
Introduccin a XHTML
Captulo 8. Formularios
resto. Por este motivo, se utilizan cuando el usuario puede activar y desactivar varias opciones relacionadas pero no excluyentes.
El valor del atributo type para estos controles de formulario es checkbox. El valor del atributo value no es el valor que se muestra por pantalla al usuario. El valor de value, junto
con el valor del atributo name, es la informacin que se enva al servidor. Si no se aade
un texto al lado de la etiqueta <input /> del checkbox, el usuario slo ve un pequeo
cuadrado sin ninguna informacin relativa a la finalidad de ese checkbox.
Si se quiere mostrar inicialmente seleccionada alguna opcin, se puede utilizar el atributo
checked. Como los atributos en XHTML no pueden tener valores vacos (en HTML s), el
resultado es bastante redundante: <input type=checkbox checked=checked ....
Radiobutton
Los controles de tipo radiobutton son similares a los controles de tipo checkbox, pero
presentan una diferencia muy importante: son mutuamente excluyentes. Los radiobutton
se utilizan cuando el usuario solamente puede escoger una opcin entre las distintas opciones relacionadas que se le presentan. Cada vez que se selecciona una opcin, automticamente se deselecciona la opcin que estaba seleccionaba hasta ese momento.
Sexo <br/>
<input type="radio" name="sexo" value="hombre" checked="checked" /> Hombre <br/>
<input type="radio" name="sexo" value="mujer" /> Mujer <br/>
El valor del atributo type para estos controles de formulario es radio. Debido a su comportamiento mutuamente excluyente, se debe indicar de alguna manera los radiobutton
que estn relacionados. As, el navegador ser capaz de deseleccionar una opcin de un
grupo de radiobutton cuando se seleccione otra opcin.
www.librosweb.es
109
Introduccin a XHTML
Captulo 8. Formularios
La forma de indicar que varios radiobutton pertenecen al mismo grupo consiste en asignar el mismo valor al atributo name de todos esos radiobutton, tal y como se muestra en
el cdigo HTML del ejemplo anterior.
Botn de envo de formulario
La mayora de formularios dispone de un botn para enviar los datos introducidos al servidor y as obtener una respuesta adecuada.
El valor del atributo type para este control de formulario es submit. El navegador se encarga de enviar automticamente los datos cuando el usuario pincha sobre este tipo de
botn. El valor del atributo value es el texto que muestra el botn. Si no se establece el
atributo value, el navegador muestra el texto predefinido Enviar consulta.
Botn de reseteo del formulario
Aunque su uso ha disminuido notablemente, este tipo de botn permite borrar todos los
datos introducidos en el formulario.
El valor del atributo type para este control de formulario es reset. El navegador se encarga de borrar automticamente toda la informacin cuando el usuario pulsa este tipo de
botn. El atributo value se puede utilizar para cambiar el texto predefinido del botn, que
en este caso es Restablecer.
Ficheros adjuntos
Algunos formularios permiten incluir archivos para subirlos al servidor. Aunque desde el
punto de vista de HTML y del navegador no existe ninguna limitacin en el nmero de archivos que se pueden adjuntar, en los tipos de archivos que se pueden adjuntar o en su
tamao total, todos los servidores aaden restricciones por motivos de seguridad.
www.librosweb.es
110
Introduccin a XHTML
Captulo 8. Formularios
El valor del atributo type para este control de formulario es file. El navegador se encarga de mostrar un cuadro de texto donde aparece el nombre del archivo seleccionado y un
botn que permite navegar por los directorios y archivos del ordenador del usuario.
Si se incluye un control para adjuntar archivos en el formulario, es imprescindible aadir
el atributo enctype al formulario, de forma que la etiqueta <form> debe contener el atributo enctype=multipart/form-data. Si no se aade este atributo, los archivos adjuntos
no se envan al servidor.
Campo oculto
Los campos ocultos incluyen informacin que se enva al servidor junto con el resto de
datos del formulario.
El valor del atributo type para este control de formulario es hidden. Los campos ocultos
no se muestran por pantalla, de forma que el usuario desconoce que el formulario los incluye. En general, los campos ocultos se utilizan para guardar informacin que necesita
el servidor pero que no es necesario o no es posible que la establezca el usuario.
Botn de imagen
Los botones de los formularios tambin se pueden mostrar con imgenes.
/>
El valor del atributo type para este control de formulario es image. Este tipo de control
permite cambiar por completo el aspecto con el que se muestran los botones del formulario, ya que los navegadores muestran la imagen cuya URL se indica en el atributo src
en vez de los botones habituales.
Su principal ventaja es que permite personalizar por completo la esttica de los botones
y mostrarlos con un aspecto homogneo en todos los navegadores. El principal
www.librosweb.es
111
Introduccin a XHTML
Captulo 8. Formularios
inconveniente es que ralentiza la carga del formulario y que si se quiere modificar su valor, es necesario crear una nueva imagen.
Botn
Adems de los botones para enviar y borrar datos, existe otro tipo de botones que es
muy til cuando se programan aplicaciones web con JavaScript.
El valor del atributo type para este control de formulario es button. Si pruebas a pulsar
un botn de este tipo, vers que el navegador no hace nada: no enva los datos al servidor y no borra los datos introducidos. Este tipo de botones slo son tiles si se utilizan
junto con JavaScript, de forma que se pueda definir la accin que se ejecuta cuando se
pulsa el botn.
Ejercicio 14
Determinar el cdigo HTML necesario para crear el formulario que se muestra en la siguiente imagen:
www.librosweb.es
112
Introduccin a XHTML
Captulo 8. Formularios
www.librosweb.es
113
Introduccin a XHTML
Captulo 8. Formularios
fieldset
Agrupacin de campos
Atributos
comunes
Atributos
especficos
www.librosweb.es
114
Introduccin a XHTML
legend
Atributos
comunes
Atributos
especficos
Captulo 8. Formularios
A continuacin se muestra el cdigo HTML del formulario correspondiente a la imagen anterior y que hace uso de <fieldset> y <legend> para agrupar los campos del formulario:
<form action="maneja_formulario.php" method="post">
<fieldset>
<legend>Datos personales</legend>
Nombre <br/>
<input type="text" name="nombre" value="" />
<br/>
Apellidos <br/>
<input type="text" name="apellidos" value="" />
<br/>
DNI <br/>
<input type="text" name="dni" value="" size="10" maxlength="9" />
</fieldset>
<fieldset>
<legend>Datos de conexin</legend>
Nombre de usuario<br/>
<input type="text" name="nombre" value="" maxlength="10" />
<br/>
Contrasea<br/>
<input type="password" name="password" value="" maxlength="10" />
<br/>
Repite la contrasea<br/>
<input type="password" name="password2" value="" maxlength="10" />
</fieldset>
</form>
La etiqueta <fieldset> agrupa todos los controles de formulario a los que encierra. El navegador muestra por defecto un borde resaltado para cada agrupacin. La etiqueta <legend> se incluye dentro de cada etiqueta <fieldset> y establece el ttulo que muestra el
navegador para cada agrupacin de elementos.
Por otra parte, todos los controles de formulario salvo los botones presentan una carencia muy importante: no disponen de la opcin de establecer el ttulo o texto que se muestra junto al control. En el cdigo HTML del ejemplo anterior, el nombre de cada campo se
incluye en forma de texto normal, sin ninguna relacin con el campo al que hace
referencia.
www.librosweb.es
115
Introduccin a XHTML
Captulo 8. Formularios
label
Atributos
comunes
Atributos
especficos
El nico atributo que suele utilizarse con la etiqueta <label> es for, que indica el identificador del campo de formulario para el que esta etiqueta hace de ttulo.
En el anterior ejemplo, el nombre de los campos de formulario se inclua mediante un
texto normal:
Nombre <br/>
<input type="text" name="nombre" value="" />
Apellidos <br/>
<input type="text" name="apellidos" value="" />
DNI <br/>
<input type="text" name="dni" value="" size="10" maxlength="9" />
La principal ventaja de utilizar <label> es que el cdigo HTML est mejor estructurado y
se mejora su accesibilidad. Adems, al pinchar sobre el texto del <label>, el puntero del
ratn se posiciona automticamente para poder escribir sobre el campo de formulario seleccionado. Este comportamiento es especialmente til para los campos de tipo radiobutton y checkbox.
www.librosweb.es
116
Introduccin a XHTML
Captulo 8. Formularios
textarea
rea de texto
Atributos
comunes
Atributos
especficos
www.librosweb.es
117
Introduccin a XHTML
textarea
Captulo 8. Formularios
rea de texto
cols = "numero" - Nmero de caracteres que se muestran en cada fila del
textarea
Otros: name, disabled, readonly, onselect, onchange, onfocus, onblur
Los atributos ms utilizados en las etiquetas <textarea> son los que controlan su anchura
y altura. La anchura del rea de texto se controla mediante el atributo cols, que indica
las columnas o nmero de caracteres que se podrn escribir como mximo en cada fila.
La altura del rea de texto se controla mediante rows, que indica directamente las filas de
texto que sern visibles.
El principal inconveniente de los elementos <textarea> es que el lenguaje HTML no permite limitar el nmero mximo de caracteres que se pueden introducir. Mientras los elementos <input type=text> disponen del atributo maxlength, las reas de texto no disponen de un atributo equivalente, por lo que slo es posible limitar el nmero de caracteres mediante su programacin con JavaScript.
Por otra parte, el otro control disponible para los formularios es el de las listas
desplegables:
www.librosweb.es
118
Introduccin a XHTML
Captulo 8. Formularios
www.librosweb.es
119
Introduccin a XHTML
Captulo 8. Formularios
Los tres tipos de listas desplegables se definen con la misma etiqueta <select> y cada
elemento de la lista se define mediante la etiqueta <option>:
Tabla 8.7. Etiqueta select
select
Lista desplegable
Atributos
comunes
Atributos
especficos
option
Atributos
comunes
Atributos
especficos
La inmensa mayora de listas desplegables que utilizan las aplicaciones web son simples,
por lo que el cdigo HTML habitual de las listas desplegables es:
<label for="so">Sistema operativo</label> <br/>
<select id="so" name="so">
www.librosweb.es
120
Introduccin a XHTML
<option
<option
<option
<option
<option
</select>
Captulo 8. Formularios
La etiqueta <select> define la lista y encierra todas las opciones que muestra la lista. Cada una de las opciones de la lista se define mediante una etiqueta <option>. El atributo
value de cada opcin es obligatorio, ya que es el dato que se enva al servidor cuando el
usuario enva el formulario. Para seleccionar por defecto una opcin al mostrar la lista, se
aade el atributo selected a la opcin deseada.
Por otra parte, las listas desplegables permiten agrupar sus opciones de forma que el usuario pueda encontrar fcilmente las opciones cuando la lista es muy larga:
121
Introduccin a XHTML
Captulo 8. Formularios
La etiqueta <optgroup> permite agrupar opciones relacionadas dentro de una lista desplegable. Su definicin formal se muestra a continuacin:
Tabla 8.9. Etiqueta optgroup
optgroup
Atributos
comunes
Atributos
especficos
El nico atributo que suele utilizarse con la etiqueta <optgroup> es label, que indica el
nombre de cada agrupacin. Los navegadores muestran de forma destacada el ttulo de
cada agrupacin, de forma que el usuario pueda localizar ms fcilmente la opcin
deseada.
Ejercicio 15
Determinar el cdigo HTML necesario para crear el formulario que se muestra en la siguiente imagen:
www.librosweb.es
122
Introduccin a XHTML
Captulo 8. Formularios
Ejercicio 16
Determinar el cdigo HTML necesario para crear el formulario que se muestra en la siguiente imagen:
www.librosweb.es
123
Introduccin a XHTML
Captulo 8. Formularios
www.librosweb.es
124
Introduccin a XHTML
www.librosweb.es
125
Introduccin a XHTML
div
Divisiones
Atributos
comunes
Atributos
especficos
El nombre div viene de divisin, ya que esta etiqueta define zonas o divisiones dentro de
una pgina HTML. En cualquier caso, casi todos los diseadores web utilizan la palabra capas en vez de divisiones. Aunque se trata de un error grave (las capas se crean mediante una propiedad de CSS llamada z-index) es preferible seguir llamando capas a
las zonas definidas con la etiqueta <div> para poder entenderse con el resto de
diseadores.
Todas las pginas web complejas que estn bien diseadas utilizan decenas de etiquetas
<div>. Con mucha diferencia, los atributos ms utilizados con esta etiqueta son id (para
identificarlo de forma nica) y class (para aplicarle estilos mediante CSS).
No se va a profundizar en el proceso de disear una pgina web mediante <div>, ya que
no es posible disear una pgina web compleja utilizando elementos <div> pero sin utilizar hojas de estilos CSS.
Por ltimo, si observas el cdigo HTML de algunas pginas web complejas, vers que la
mayora utilizan los mismos nombres para identificar sus divisiones. Los nombres ms
comunes, y sus equivalentes en ingls, se muestran a continuacin:
contenedor (wrapper) suele encerrar la mayor parte de los contenidos de la pgina y se emplea para definir las caractersticas bsicas de la pgina: su anchura,
sus bordes, imgenes laterales, si se centra o no respecto de la ventana del navegador, etc.
cabecera (header) que incluye todos los elementos invariantes de la parte superior de la pgina (logotipo, imagen o banner, cuadro de bsqueda superior, etc.)
contenido (content) engloba el contenido principal del sitio (la zona de noticias,
la zona de artculos, la zona de productos, etc. dependiendo del tipo de sitio web)
menu (menu) se emplea para agrupar todos los elementos del men lateral de navegacin de la pgina
pie (footer) que incluye todos los elementos invariantes de la parte inferior de la
pgina (aviso de copyright, poltica de privacidad, trminos de uso, etc.)
lateral (sidebar) se emplea para agrupar los elementos de las columnas laterales y secundarias de la pgina.
De esta forma, el esqueleto de una pgina HTML compleja suele ser similar al siguiente:
www.librosweb.es
126
Introduccin a XHTML
...
<div id="contenedor">
<div id="cabecera">
...
</div>
<div id="contenido">
<div id="menu">
..
</div>
...
</div>
<div id="pie">
...
</div>
</div>
...
www.librosweb.es
127
Introduccin a XHTML
head
Cabecera
Atributos
comunes
i18n
profile = "url" - Especifica la URL del perfil o perfiles que utilizan los
Atributos
especficos
metadatos
lang = "codigo_de_idioma" - Especifica el idioma principal de los contenidos de la pgina
www.librosweb.es
128
Introduccin a XHTML
title
Atributos
comunes
i18n
Atributos
especficos
Por ltimo, la etiqueta <head> permite definir en el atributo profile la URL de un documento externo que contiene el perfil de los metadatos de la cabecera. Los blogs creados
con el programa WordPress incluyen por ejemplo el siguiente perfil en su cabecera:
<head profile="http://gmpg.org/xfn/11">
...
</head>
El documento http://gmpg.org/xfn/11 es un perfil que define atributos adicionales para establecer la relacin entre sitios web.
10.2. Metadatos
Una de las partes ms importantes de la metainformacin incluida en la pgina son los
metadatos. Gracias a los metadatos es posible incluir cualquier informacin relevante sobre la propia pgina.
La especificacin oficial de HTML no define la lista de metadatos que se pueden incluir,
por lo que las pginas tienen libertad absoluta para definir los metadatos que consideren
adecuados. La etiqueta empleada para la definicin de los metadatos es <meta>.
www.librosweb.es
129
Introduccin a XHTML
meta
Metadatos
Atributos
comunes
i18n
name = "texto" - El nombre de la propiedad que se define (no existe una
lista oficial de propiedades)
content = "texto" - El valor de la propiedad definida (no existe una lista
Atributos
especficos
de valores permitidos)
http-equiv = "texto" - En ocasiones, reemplaza al atributo name y lo
emplean los servidores para adaptar sus respuestas al documento
scheme = "texto" - Indica el esquema que se debe emplear para interpretar el valor de la propiedad
Los metadatos habituales utilizan solamente los atributos name y content para definir el
nombre y el valor del metadato:
<meta name="author" content="Juan Prez" />
No obstante, algunas etiquetas <meta> muy utilizadas hacen uso del atributo http-equiv.
Este atributo se utiliza para indicar que el valor establecido por este metadato puede ser
utilizado por el servidor al entregar la pgina al navegador del usuario. El siguiente metadato indica al servidor que el contenido de la pgina es cdigo HTML y su codificacin de
caracteres es UTF-8:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
El atributo scheme no suele utilizarse, aunque permite proporcionar informacin de contexto para que el navegador interprete correctamente el valor del metadato. En el siguiente ejemplo, el atributo scheme indica al navegador que el valor del metadato hace referencia al cdigo ISBN:
<meta scheme="ISBN" name="identificador" content="789-1392349610">
Aunque no existe una lista oficial con los metadatos que se pueden definir, algunos de
ellos se utilizan en tantas pginas que se han convertido prcticamente en un estndar.
A continuacin se muestran los metadatos ms utilizados:
Definir el autor del documento
<meta name="author" content="Juan Prez" />
www.librosweb.es
130
Introduccin a XHTML
10.3. DOCTYPE
Los documentos XHTML siguen una estructura similar al resto de documentos creados
con el lenguaje XML. Uno de los conceptos fundamentales de XML es la utilizacin del
DTD o Document Type Definition (Definicin del Tipo de Documento).
Un DTD es el conjunto de normas y restricciones que se definen para fijar la sintaxis que
deben cumplir los documentos de un determinado tipo. Si por ejemplo se define un DTD
para los documentos relacionados con libros, se puede fijar como norma que cada libro
tenga un ttulo y slo uno, que tenga uno o ms autores, que la informacin sobre el nmero de pginas pueda ser opcional, etc.
El conjunto de normas, obligaciones y restricciones que se deben seguir al crear un documento de un determinado tipo, se recogen en su correspondiente DTD.
Para las pginas y documentos XHTML tambin se ha definido un DTD, en el que se definen las etiquetas que se pueden utilizar, los atributos de cada etiqueta y el tipo de valores que puede tener cada atributo.
En realidad, existen varios DTD diferentes definidos para crear documentos HTML y
XHTML. Para la versin XHTML 1.0 existen tres DTD definidos, que se indican mediante
un etiqueta especial llamada doctype.
La etiqueta doctype es el nico elemento que se incluye fuera de la etiqueta <html> de la
pgina. De hecho, la declaracin del doctype es lo primero que se debe incluir en una pgina web, antes incluso que la etiqueta <html>.
El uso de un doctype no es un concepto fcil de entender, pero es imprescindible para
crear pginas web correctas y vlidas, como se ver ms adelante. Por el momento, lo
www.librosweb.es
131
Introduccin a XHTML
nico que debes tener en cuenta es que las pginas web deben indicar de forma clara las
normas que se han seguido para crear su cdigo HTML.
Aunque las pginas web creadas con XHTML siguen el estndar oficial XHTML definido por
el W3C, existen tres variantes del mismo estndar. Por ese motivo las pginas web deben indicar la variante que estn utilizando mediante la declaracin del doctype.
Los tres DTD o modelos definidos para las pginas web XHTML se muestran a
continuacin:
XHTML 1.0 Estricto
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Se trata de la variante con las normas ms estrictas y las restricciones ms severas. Las
pginas web que incluyan este doctype, no pueden utilizar atributos relacionados con el
aspecto de los contenidos, por lo que requiere una separacin total de cdigo HTML y estilos CSS.
XHTML 1.0 Transitorio
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Se trata de una variante menos estricta que la anterior, ya que permite el uso de algunos
atributos HTML relacionados con el aspecto de los elementos.
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Esta ltima variante la utilizan las pginas que estn formadas por frames, una prctica
completamente desaconsejada y que hoy en da slo utilizan los sitios web obsoletos.
Si no tienes claro el DTD que ms te conviene, deberas utilizar el XHTML 1.0 transitorio,
ya que es ms fcil crear pginas web vlidas. Si tienes conocimientos avanzados de
XHTML, puedes utilizar XHTML 1.0 estricto.
Junto con el DOCTYPE apropiado, tambin es necesario que las pginas web indiquen el
namespace asociado. Un namespace en un documento XML permite diferenciar las etiquetas
y atributos que pertenecen a cada lenguaje.
Si en un mismo documento se mezclan etiquetas de dos o ms lenguajes derivados de
XML (XHTML y SVG por ejemplo) y que tienen el mismo nombre, no se podra determinar
a qu lenguaje pertenece cada etiqueta y por tanto, no se podra interpretar esa etiqueta
o ese atributo. Los namespaces se indican mediante una URL.
El namespace que utilizan todas las pginas XHTML (independientemente de la versin y
del DOCTYPE) es http://www.w3.org/1999/xhtml y se indica de la siguiente manera:
<html xmlns="http://www.w3.org/1999/xhtml">
...
</html>
De esta forma, es habitual que las pginas XHTML comiencen con el siguiente cdigo:
www.librosweb.es
132
Introduccin a XHTML
El cdigo anterior es mucho ms complicado que una simple etiqueta <html>. Sin embargo, para crear pginas XHTML correctas y que superen el proceso de validacin que se
muestra en los captulos siguientes, es obligatorio que comiencen de esa manera.
Afortunadamente, si utilizas un editor avanzado como Dreamweaver para crear las pginas, todo el cdigo anterior se incluye de forma automtica. Si creas las pginas a mano,
slo tienes que copiar y pegar ese cdigo en cada nueva pgina.
www.librosweb.es
133
Introduccin a XHTML
Los comentarios de HTML puede ocupar tantas lneas como sea necesario. Sin embargo,
los comentarios no se pueden anidar, es decir, no se puede incluir un comentario dentro
de otro comentario.
11.2. JavaScript
Como ya se explic en captulos anteriores, la etiqueta <script> se utiliza para enlazar
archivos JavaScript externos y para incluir bloques de cdigo JavaScript en las pginas.
Sin embargo, algunos navegadores no disponen de soporte completo de JavaScript, otros
www.librosweb.es
134
Introduccin a XHTML
navegadores permiten bloquearlo parcialmente e incluso algunos usuarios bloquean completamente el uso de JavaScript porque creen que as navegan de forma ms segura.
En estos casos, es habitual que si la pgina web requiere JavaScript para su correcto funcionamiento, se incluya un mensaje de aviso al usuario indicndole que debera activar
JavaScript para disfrutar completamente de la pgina. El siguiente ejemplo muestra una
pgina web que requiere JavaScript cuando se accede con JavaScript activado y cuando
se accede con JavaScript completamente desactivado.
Imagen de www.Netvibes.com con JavaScript activado
noscript
Atributos
comunes
Atributos
especficos
www.librosweb.es
135
Introduccin a XHTML
noscript
Descripcin
De esta forma, incluir un mensaje de aviso que solamente sea visible en los navegadores
que tienen bloqueado JavaScript es tan sencillo como incluir la etiqueta <noscript> dentro del <body>.
<head> ... </head>
<body>
<noscript>
<p>Bienvenido a Mi Sitio</p>
<p>La pgina que ests viendo requiere para su funcionamiento el uso de JavaScript.
Si lo has deshabilitado intencionadamente, por favor vuelve a activarlo.</p>
</noscript>
</body>
11.3. CSS
Algunos de los atributos ms utilizados en la creacin de pginas web son id, class y
style. Estos tres atributos estn muy relacionados con CSS, sobre todo class y style.
El atributo id se emplea para asignar un identificador nico a cada elemento de la pgina, lo que es til tanto para aplicar estilos CSS a ese elemento como para programar
aplicaciones con JavaScript.
Por otra parte, el atributo class se emplea para definir la clase CSS que se aplicar a un
elemento. La clase CSS es el nombre que se utiliza para referirse a un estilo concreto
dentro de la hoja de estilos CSS:
<p class="resumen">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Maecenas at diam id enim viverra semper. Nulla id urna. Donec sodales.</p>
El prrafo del ejemplo anterior se mostrar por pantalla con el aspecto definido por el estilo llamado resumen y que se incluye en la hoja de estilos CSS enlazada por la pgina
web.
El atributo style se emplea para definir estilos CSS directamente sobre los elementos
HTML, tal y como se muestra en el siguiente ejemplo:
<p>Algunas palabras de esta frase se muestran de <span style="color:red">color
rojo</span></p>
No se debe confundir el atributo style con la etiqueta <style> que se explic anteriormente. La etiqueta <style> se utiliza para incluir bloques de cdigo CSS:
<head>
...
<style type="text/css">
span {color:red;}
</style>
</head>
www.librosweb.es
136
Introduccin a XHTML
11.4. Iframes
Aunque su uso no es muy comn, la etiqueta <iframe> puede ser muy til en determinadas ocasiones. La etiqueta <iframe> permite insertar un documento HTML dentro de otro
documento HTML. Un iframe puede considerarse como un agujero que se abre en una
pgina web y a travs del cual se muestra otra pgina web.
En ocasiones se utiliza para mostrar contenidos externos al sitio web como si fueran parte del mismo sitio. Otra veces se emplea para incluir una aplicacin comn a varios sitios
web de una misma empresa.
La pgina principal de Google Analytics emplea un <iframe> para incluir en un pequeo
recuadro la pgina correspondiente a la validacin de usuario.
iframe
Atributos
comunes
bsicos
Atributos
especficos
www.librosweb.es
137
Introduccin a XHTML
iframe
El siguiente ejemplo define la altura y anchura del iframe, indica la URL que se debe
mostrar y mediante el atributo scrolling se indica que el iframe no debe mostrar barras
de scroll ni siquiera en el caso de que el contenido mostrado no quepa en el iframe
definido:
<iframe src="/ruta/documento.html" width="250" height="250" scrolling="no" />
address
Direcciones
Atributos
comunes
Atributos
especficos
138
Introduccin a XHTML
Telfono y Fax
</address>
Hasta hace unos aos, la etiqueta <hr> era una de las ms utilizadas, ya que permite
mostrar una lnea horizontal de separacin. Sin embargo, hoy en da apenas se utiliza, ya
que se considera un elemento puramente esttico, del que no debera preocuparse HTML
y para el que CSS ofrece alternativas mucho mejores.
Tabla 11.4. Etiqueta hr
hr
Lnea horizontal
Atributos
comunes
Atributos
especficos
La siguiente imagen muestra el aspecto con el que los navegadores muestran por defecto
las lneas horizontales creadas con <hr>:
www.librosweb.es
139
Introduccin a XHTML
www.librosweb.es
140
Introduccin a XHTML
www.librosweb.es
141
Introduccin a XHTML
2.1 Asegurar que toda la informacin que utilice el color como elemento informativo pueda ser entendida por las personas o dispositivos que no pueden distinguir los colores.
4.1 Marcar claramente (mediante los atributos lang y xml:lang) las variaciones del idioma del texto o de los elementos textuales (<caption>) respecto del idioma principal de la
pgina.
6.1 El documento debe poder leerse completamente cuando no se utilicen hojas de
estilos.
6.2 La informacin equivalente para los contenidos dinmicos debe adaptarse a los cambios de los contenidos dinmicos.
7.1 Ningn elemento debe parpadear en la pantalla.
14.1 El contenido del sitio se debe escribir con un lenguaje sencillo y limpio.
Si se utilizan mapas de imagen
1.2 Proporcionar un enlace textual por cada una de las regiones del mapa de imagen.
9.1 Utilizar mapas de imagen en el cliente, en vez de mapas de imagen de servidor.
Si se utilizan tablas
5.1 Utilizar cabeceras de fila y de columna.
5.2 Si la tabla tiene varios niveles de cabeceras, utilizar las agrupaciones disponibles
(<thead>, <tfoot>).
Si se utilizan frames
12.1 Indicar un ttulo a cada frame para su identificacin y facilitar la navegacin.
Si se utilizan applets y scripts
6.3 Asegurar que la pgina tambin se pueda utilizar cuando no se ejecutan los applets y
los scripts. Si no es posible, proporcionar informaciones equivalente o pginas alternativas que sean accesibles.
Si se utilizan contenidos multimedia (audio y vdeo)
1.3 Incluir una descripcin textual del contenido multimedia.
1.4 Para los contenidos basados en vdeo o animaciones, sincronizar las alternativas textuales con la presentacin.
Si no se pueden cumplir los anteriores requisitos
11.4 Proporcionar una pgina alternativa con la mayor cantidad posible de contenidos y
que cumpla con los requisitos anteriores.
La lista completa con los 65 requisitos de los tres niveles de accesibilidad se puede consultar en http://www.w3.org/TR/WCAG10/full-checklist.html
www.librosweb.es
142
Introduccin a XHTML
www.librosweb.es
143
Introduccin a XHTML
www.librosweb.es
144
Introduccin a XHTML
www.librosweb.es
145
Introduccin a XHTML
Validate by URI, permite escribir la URL de la pgina que se quiere validar. Esta
opcin es la ms sencilla para validar las pginas que ya estn publicadas en
Internet.
Validate by File Upload, muestra un formulario mediante el que se puede subir
el archivo HTML correspondiente a la pgina que se quiere validar. Esta opcin es
la mejor para validar las pginas web que has desarrollado y que an no has publicado en Internet.
Validate by Direct Input, permite validar cdigo HTML de forma directa. Se trata de la opcin ms rpida para validar trozos o pginas HTML completas. Esta
opcin es la mejor cuando ests desarrollando las pginas y quieres asegurarte
que el cdigo sea vlido.
La siguiente imagen muestra el resultado de la validacin de la pgina principal de Google realizada mediante la opcin Validate by URI:
146
Introduccin a XHTML
www.librosweb.es
147
Introduccin a XHTML
Si pulsas dos veces sobre el icono, aparece una nueva ventana en la que se muestra la
lista completa de errores, el lugar exacto en el que se han producido y las posibles soluciones para corregirlos.
Para ver directamente el nmero de errores de la pgina, puedes pulsar el botn derecho
del ratn sobre el icono del validador y seleccionar la opcin Show y despus Icon and
Text. Despus de activar esta opcin, cada vez que cargues una pgina web se muestra
toda la informacin de validacin.
Aunque existen muchos otros validadores, el uso de Firefox junto con Html Validator es
la nica alternativa que permite validar las pginas web sin esfuerzo. Abriendo cualquier
pgina en el navegador Firefox, es posible visualizar al instante si la pgina es vlida o
no y el nmero de errores que se han encontrado.
www.librosweb.es
148
Introduccin a XHTML
www.librosweb.es
149
Introduccin a XHTML
www.librosweb.es
150
Introduccin a XHTML
Figura 14.3. Creando una nueva carpeta para guardar los fragmentos de cdigo propios
Una vez escrito el nombre de la nueva carpeta, el aspecto que muestra la ventana de
snippets es el siguiente:
www.librosweb.es
151
Introduccin a XHTML
Figura 14.4. Nueva carpeta creada para guardar los fragmentos de cdigo propios
4) Para crear un fragmento de cdigo propio, se pulsa sobre el pequeo icono que simboliza un nuevo fragmento:
www.librosweb.es
152
Introduccin a XHTML
www.librosweb.es
153
Introduccin a XHTML
www.librosweb.es
154
Introduccin a XHTML
14.3. Tabla
Reescribir el cdigo XHTML de una tabla avanzada es una tarea tediosa, ya que incluye
secciones de cabecera y de pie, celdas que pueden ser cabecera de columna o de fila e
informacin para mejorar la accesibilidad.
<table summary="Descripcin de la tabla y su contenido">
<caption>Ttulo de la tabla</caption>
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Cabecera columna 1</th>
<th scope="col">Cabecera columna 2</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="col"></th>
www.librosweb.es
155
Introduccin a XHTML
14.4. Formulario
La clave de un formulario XHTML correcto reside en agrupar los campos del formulario
(etiquetas <fieldset> y <legend>) y en incluir las etiquetas de cada campo (etiqueta <label>).
<form id="identificador" method="post" action="" enctype="multipart/form-data">
<fieldset>
<legend>Ttulo del formulario</legend>
<label for="campo_texto">Campo de texto</label>
<input id="campo_texto" name="campo_texto" type="text" maxlength="255" value=""/>
156
Introduccin a XHTML
checked="checked"/>
<label for="campo_check">Campo check 1</label>
<input id="boton_enviar" type="submit" value="Enviar formulario" />
</fieldset>
</form>
www.librosweb.es
157
Introduccin a XHTML
15.2. Ejercicio 2
<!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" lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>El ingenioso Hidalgo Don Quijote de la Mancha, Captulo VIII</title>
</head>
<body>
<h1>Del buen suceso que el valeroso don Quijote tuvo en la espantable y jams imaginada
aventura de los molinos de viento, con otros sucesos dignos de felice recordacin</h1>
<p>de <strong>Miguel de Cervantes Saavedra</strong></p>
<p>En esto, descubrieron treinta o cuarenta molinos de viento que hay en aquel campo;
y, as como don Quijote los vio, dijo a su escudero:</p>
<p>-La ventura va guiando nuestras cosas mejor de lo que acertramos a desear, porque
ves all, amigo Sancho Panza, donde se descubren treinta, o pocos ms, desaforados
gigantes, con quien pienso hacer batalla y quitarles a todos las vidas, con cuyos
despojos comenzaremos a enriquecer; que sta es buena guerra, <strong>y es gran
servicio de Dios quitar tan mala simiente de sobre la faz de la tierra.</strong></p>
<p>-<strong>Qu gigantes?</strong> -dijo Sancho Panza.</p>
<p>-Aquellos que all ves -<em>respondi su amo</em>- de los brazos largos, que los
suelen tener algunos de casi dos leguas.</p>
www.librosweb.es
158
Introduccin a XHTML
<p>-Mire vuestra merced -<em>respondi Sancho</em>- que aquellos que all se parecen
<strong>no son gigantes</strong>, sino molinos de viento, y lo que en ellos parecen
brazos son las aspas, que, volteadas del viento, hacen andar la piedra del molino.</p>
<p>-Bien parece -respondi don Quijote- que no ests cursado en esto de las aventuras:
ellos son gigantes; y si tienes miedo, qutate de ah, y ponte en oracin en el espacio
que yo voy a entrar con ellos en fiera y desigual batalla.</p>
</body>
</html>
15.3. Ejercicio 3
<!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" lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Espacios en blanco arbitrarios</title>
</head>
<body>
<h1>Espacios en blanco</h1>
<p>A veces, es importante poder escribir algunos espacios en blanco:</p>
<pre>
p
em
strong
blockquote
</pre>
bloque
en linea
en lnea
bloque
</body>
</html>
15.4. Ejercicio 4
<!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" lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>El rtico ha perdido el 14% de su hielo marino perenne en un solo ao</title>
</head>
<body>
<h1>El rtico ha perdido el 14% de su hielo marino perenne en un solo ao</h1>
<p><strong>WASHINGTON.-</strong> El hielo perenne del rtico se redujo en un 14%
www.librosweb.es
159
Introduccin a XHTML
15.5. Ejercicio 5
<!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" lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>La etiqueta blockquote</title>
</head>
<body>
<h1>Sintaxis de la etiqueta <blockquote></h1>
<p>
La sintaxis de la etiqueta <blockquote> se muestra a continuacin: <br/><br/>
<blockquote cite="<em>...direccion original de la cita...</em>">Texto
que se cita</blockquote>
</p>
</body>
</html>
15.6. Ejercicio 6
Pgina principal
<!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" lang="es" xml:lang="es">
www.librosweb.es
160
Introduccin a XHTML
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Mi Sitio</title>
</head>
<body>
<h1>Mi Sitio</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis posuere
justo. Nam vel neque. Proin sagittis mauris sit amet nisl. Sed ipsum. Aliquam vitae
justo.</p>
<h2>Ultimos proyectos</h2>
<p>Etiam consectetuer, mauris vitae cursus scelerisque, dui turpis dignissim justo, et
euismod enim odio sit amet erat. Aliquam dui ligula, porttitor eu, facilisis vitae,
ornare sed, tortor.</p>
<p><a href="portfolio/indice.html" title="Ultimos proyectos realizados por Mi
Sitio">Acceder a los ultimos proyectos de Mi Sitio</a></p>
</body>
</html>
www.librosweb.es
161
Introduccin a XHTML
<h3>Proyecto 2</h3>
<p>Etiam consectetuer, mauris vitae cursus scelerisque, dui turpis dignissim justo, et
euismod enim odio sit amet erat.</p>
<p><a href="../imagenes/proyecto2.png" title="Imagen del Proyecto 2">Ver imagen del
Proyecto 2</a></p>
</body>
</html>
15.7. Ejercicio 7
Pgina principal
<!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" lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<title>Mi Sitio</title>
</head>
<body>
<h1>Mi Sitio</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis posuere
justo. Nam vel neque. Proin sagittis mauris sit amet nisl. Sed ipsum. Aliquam vitae
justo.</p>
<h2>Ultimos proyectos</h2>
<p>Etiam consectetuer, mauris vitae cursus scelerisque, dui turpis dignissim justo, et
euismod enim odio sit amet erat. Aliquam dui ligula, porttitor eu, facilisis vitae,
ornare sed, tortor.</p>
<p><a href="portfolio/indice.html" title="Ultimos proyectos realizados por Mi
Sitio">Acceder a los ultimos proyectos de Mi Sitio</a></p>
</body>
</html>
162
Introduccin a XHTML
15.8. Ejercicio 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" lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Lista simple anidada</title>
</head>
<body>
<h1>Men</h1>
<ul>
<li>Inicio</li>
<li>
<strong>Noticias</strong>
<ul>
<li><a href="#" title="Ver las noticias ms recientes">Recientes</a></li>
www.librosweb.es
163
Introduccin a XHTML
15.9. Ejercicio 9
<!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" lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Lista compleja anidada</title>
</head>
<body>
<h1>Men</h1>
<ul>
<li>Inicio</li>
<li>
<strong>Noticias</strong>
<ul>
<li><a href="#" title="Ver las noticias ms recientes">Recientes</a></li>
<li><strong><a href="#" title="Ver las noticias ms ledas">Ms
ledas</a></strong></li>
<li><a href="#" title="Ver las noticias ms valoradas">Ms valoradas</a></li>
</ul>
</li>
<li>
Artculos
<ol>
<li><strong>XHTML</strong></li>
<li>CSS</li>
<li>JavaScript</li>
<li>Otros</li>
</ol>
</li>
<li>
Contacto
<dl>
<dt><em>Email</em></dt>
<dd><strong>nombre@direccion.com</strong></dd>
<dt><em>Telfono</em></dt>
<dd>900 900 900</dd>
<dt><em>Fax</em></dt>
<dd>900 900 900</dd>
www.librosweb.es
164
Introduccin a XHTML
</dl>
</li>
</ul>
</body>
</html>
15.10. Ejercicio 10
Pgina principal del portfolio
<!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" lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
<title>Mi Sitio</title>
</head>
<body>
<p><a href="portfolio/indice.html" title="Pgina principal de Mi Sitio"
rel="index">Volver a la pagina principal</a></p>
<h1>Ultimos proyectos</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis posuere
justo. Nam vel neque.</p>
<h3>Proyecto 1</h3>
<p>Etiam consectetuer, mauris vitae cursus scelerisque, dui turpis dignissim justo, et
euismod enim odio sit amet erat.</p>
<p><img src="../imagenes/proyecto1.png" title="Imagen del Proyecto 1" /></p>
<h3>Proyecto 2</h3>
<p>Etiam consectetuer, mauris vitae cursus scelerisque, dui turpis dignissim justo, et
euismod enim odio sit amet erat.</p>
<p><img src="../imagenes/proyecto2.png" title="Imagen del Proyecto 2" /></p>
</body>
</html>
15.11. Ejercicio 11
<!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" lang="es" xml:lang="es">
www.librosweb.es
165
Introduccin a XHTML
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ejemplo de tabla sencilla</title>
</head>
<body>
<h1>Su pedido</h1>
<table>
<tr>
<th scope="col">Nombre producto</th>
<th scope="col">Precio unitario</th>
<th scope="col">Unidades</th>
<th scope="col">Subtotal</th>
</tr>
<tr>
<td>Reproductor MP3 (80 GB)</td>
<td>192.02</td>
<td>1</td>
<td>192.02</td>
</tr>
<tr>
<td>Fundas de colores</td>
<td>2.50</td>
<td>5</td>
<td>12.50</td>
</tr>
<tr>
<td>Reproductor de radio & control remoto</td>
<td>12.99</td>
<td>1</td>
<td>12.99</td>
</tr>
<tr>
<th scope="row">TOTAL</th>
<td>-</td>
<td>7</td>
<td><strong>207.51</strong></td>
</tr>
</table>
</body>
</html>
15.12. Ejercicio 12
<!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" lang="es" xml:lang="es">
www.librosweb.es
166
Introduccin a XHTML
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ejemplo de tabla avanzada</title>
</head>
<body>
<h1>Resultado de la bsqueda</h1>
<table summary="Tabla con los datos de los resultados de la bsqueda">
<caption>Resultado de la bsqueda</caption>
<tr>
<th abbr="Imagen del producto" scope="col">Imagen</th>
<th abbr="Datos del producto" scope="col">Datos</th>
</tr>
<tr>
<td>
<img src="imagenes/portatil.png" alt="Imagen del ordenador porttil" />
</td>
<td>
<h4><a href="#" title="Ver ms informacin sobre el porttil">Porttil - 3 GHz 4 GB RAM</a></h4>
<p><a href="#" title="Comprar el porttil">Comprar:</a> <del>2.990 €</del>
<strong>2.599 €</strong></p>
</td>
</tr>
<tr>
<td><img src="imagenes/videocamara.png" alt="Imagen de la videocmara" /></td>
<td>
<h4><a href="#" title="Ver ms informacin sobre la videocmara">Videocmara Alta definicin 1080p - 60 GB</a></h4>
<p><a href="#" title="Comprar la videocmara">Comprar:</a> <del>1.099
€</del> <strong>999 €</strong></p>
</td>
</tr>
<tr>
<td><img src="imagenes/tv.png" alt="Imagen del televisor" /></td>
<td>
<h4><a href="#" title="Ver ms informacin sobre el televisor">Televisor - 46" Full HD</a></h4>
<p><a href="#" title="Comprar el televisor">Comprar:</a> <del>1.999 €</del>
<strong>1.799 €</strong></p>
</td>
</tr>
<tr>
<td><img src="imagenes/movil.png" alt="Imagen del mvil" /></td>
<td>
<h4><a href="#" title="Ver ms informacin sobre el mvil">Mvil - 3G - Wi-Fi - 8
GB</a></h4>
<p><a href="#" title="Comprar el mvil">Comprar:</a> <del>399 €</del>
<strong>349 €</strong></p>
www.librosweb.es
167
Introduccin a XHTML
</td>
</tr>
</table>
</body>
</html>
15.13. Ejercicio 13
<!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" lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ejemplo de tabla compleja</title>
</head>
<body>
<h3>Comparativa de reproductores MP3</h3>
<table summary="Tabla comparativa de las caractersticas tcnicas de los reproductores
MP3">
<caption>Tabla comparativa de las caractersticas tcnicas de los reproductores
MP3</caption>
<tr>
<th></th>
<th abbr="Reproductor mini" scope="col" colspan="3">
<img src="imagenes/mp3_pequeno_blanco.png" alt="Imagen del reproductor MP3
pequeo de color blanco" />
<img src="imagenes/mp3_pequeno_negro.png" alt="Imagen del reproductor MP3 pequeo
de color negro" />
<br/><strong>MP3 mini</strong>
</th>
<th abbr="Reproductor estndar" scope="col" colspan="2">
<img src="imagenes/mp3_grande_blanco.png" alt="Imagen del reproductor MP3 grande
de color blanco" />
<img src="imagenes/mp3_grande_negro.png" alt="Imagen del reproductor MP3 grande
de color negro" />
<br/><strong>MP3 grande</strong>
</th>
</tr>
<tr>
<th scope="row" abbr="Capacidad">Capacidad de almacenamiento</th>
<td>4GB <br/> (1.000 canciones)</td>
<td>8GB <br/> (2.000 canciones)</td>
<td>16GB <br/> (4.000 canciones)</td>
<td>30GB <br/> (7.500 canciones)</td>
<td>80GB <br/> (20.000 canciones)</td>
</tr>
<tr>
www.librosweb.es
168
Introduccin a XHTML
15.14. Ejercicio 14
<!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" lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Rellena tu CV</title>
</head>
<body>
<h3>Rellena tu CV</h3>
www.librosweb.es
169
Introduccin a XHTML
</form>
</body>
</html>
15.15. Ejercicio 15
<!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" lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Rellena tu CV</title>
www.librosweb.es
170
Introduccin a XHTML
</head>
<body>
<h3>Rellena tu CV</h3>
<form action="/php/insertar_cv.php" method="post" enctype="multipart/form-data">
<fieldset>
<legend>Datos personales</legend>
<label for="provincia">Provincia</label> <br/>
<select id="provincia" name="provincia">
<option value="" selected="selected">- selecciona -</option>
<option value="01">lava/Araba</option>
<option value="02">Albacete</option>
<option value="03">Alicante/Alacant</option>
<option value="04">Almera</option>
<option value="33">Asturias</option>
<option value="05">vila</option>
<option value="06">Badajoz</option>
<option value="07">Balears (Illes)</option>
<option value="08">Barcelona</option>
<option value="09">Burgos</option>
<option value="10">Cceres</option>
<option value="11">Cdiz</option>
<option value="39">Cantabria</option>
<option value="12">Castelln/Castell</option>
<option value="51">Ceuta</option>
<option value="13">Ciudad Real</option>
<option value="14">Crdoba</option>
<option value="15">Corua (A)</option>
<option value="16">Cuenca</option>
<option value="17">Girona</option>
<option value="18">Granada</option>
<option value="19">Guadalajara</option>
<option value="20">Guipzcoa/Gipuzkoa</option>
<option value="21">Huelva</option>
<option value="22">Huesca</option>
<option value="23">Jan</option>
<option value="24">Len</option>
<option value="27">Lugo</option>
<option value="25">Lleida</option>
<option value="28">Madrid</option>
<option value="29">Mlaga</option>
<option value="52">Melilla</option>
<option value="30">Murcia</option>
<option value="31">Navarra</option>
<option value="32">Ourense</option>
<option value="34">Palencia</option>
<option value="35">Palmas (Las)</option>
<option value="36">Pontevedra</option>
<option value="26">Rioja (La)</option>
<option value="37">Salamanca</option>
<option value="38">Santa Cruz de Tenerife</option>
www.librosweb.es
171
Introduccin a XHTML
<option
<option
<option
<option
<option
<option
<option
<option
<option
<option
<option
</select>
value="40">Segovia</option>
value="41">Sevilla</option>
value="42">Soria</option>
value="43">Tarragona</option>
value="44">Teruel</option>
value="45">Toledo</option>
value="46">Valencia/Valncia</option>
value="47">Valladolid</option>
value="48">Vizcaya/Bizkaia</option>
value="49">Zamora</option>
value="50">Zaragoza</option>
<br/><br/>
<label for="fecha_dia">Fecha de nacimiento</label> <br/>
<input type="text" size="3" maxlength="2" id="fecha_dia" name="fecha_dia" />
de
<select id="fecha_mes" name="fecha_mes">
<option value="1">Enero</option>
<option value="2">Febrero</option>
<option value="3">Marzo</option>
<option value="4">Abril</option>
<option value="5">Mayo</option>
<option value="6">Junio</option>
<option value="7">Julio</option>
<option value="8">Agosto</option>
<option value="9">Septiembre</option>
<option value="10">Octubre</option>
<option value="11">Noviembre</option>
<option value="12">Diciembre</option>
</select>
de
<input type="text" size="5" maxlength="4" id="fecha_ano" name="fecha_ano" />
<br/><br/>
<label for="temasDeInteres">Temas de inters</label> <br/>
<select multiple="multiple" size="5" id="temasDeInteres" name="temasDeInteres">
<option value="3105">Administracin de bases de datos</option>
<option value="3106">Anlisis y programacin</option>
<option value="3107">Arquitectura</option>
<option value="3108">Calidad</option>
<option value="3109">ERP, CRM, Business Intelligence</option>
<option value="3110">Gestin de proyectos</option>
<option value="3111">Hardware, redes y seguridad</option>
<option value="3112">Helpdesk</option>
<option value="3113">Sistemas</option>
<option value="3114">Telecomunicaciones</option>
</select>
</fieldset>
</form>
</body>
www.librosweb.es
172
Introduccin a XHTML
</html>
15.16. Ejercicio 16
<!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" lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Informacin sobre el producto</title>
</head>
<body>
<h3>Informacin sobre el producto</h3>
<form action="/php/insertar_subasta.php" method="post" enctype="multipart/form-data">
<fieldset>
<legend>Datos bsicos</legend>
<label for="nombre">Nombre</label> <br/>
<input type="text" name="nombre" id="nombre" size="50" maxlength="250" />
<br/><br/>
<label for="descripcion">Descripcin</label> <br/>
<textarea name="descripcion" id="descripcion" cols="40" rows="5"></textarea>
<br/><br/>
Foto <input type="file" name="foto" />
<br/><br/>
<input name="contador" type="checkbox" value="si" /> Aadir contador de visitas
</fieldset>
<fieldset>
<legend>Datos econmicos</legend>
<label for="precio">Precio</label>
<input type="text" size="5" id="precio" name="precio" /> €
<label for="impuestos">Impuestos</label>
<select id="impuestos" name="impuestos">
<option value="4">4%</option>
<option value="7">7%</option>
<option value="16">16%</option>
<option value="25">25%</option>
</select>
www.librosweb.es
173
Introduccin a XHTML
<br/><br/>
<label>Promocin</label> <br/>
<input type="radio" name="promocion" value="ninguno" checked="checked" /> Ninguno
<br/>
<input type="radio" name="promocion" value="portes" /> Transporte gratuito <br/>
<input type="radio" name="promocion" value="descuento" /> Descuento 5%
</fieldset>
</form>
</body>
</html>
www.librosweb.es
174