Documentos de Académico
Documentos de Profesional
Documentos de Cultura
es
Introduccin a
XHTML
Javier Eguluz Prez
Introduccin a XHTML
www.librosweb.es
Introduccin a XHTML
Captulo 1. Introduccin ............................................................................................................................. 5
1.1. Qu es HTML?........................................................................................................................................ 5
1.2. Breve historia de HTML ........................................................................................................................... 5
1.3. Especificacin oficial................................................................................................................................ 7
1.4. HTML y XHTML ........................................................................................................................................ 7
1.5. HTML y CSS .............................................................................................................................................. 8
Captulo 2. Caractersticas bsicas .............................................................................................................. 9
2.1. Lenguajes de etiquetas ............................................................................................................................ 9
2.2. El primer documento HTML .................................................................................................................. 10
2.3. Etiquetas y atributos.............................................................................................................................. 13
2.4. Elementos HTML.................................................................................................................................... 16
2.5. Sintaxis de las etiquetas XHTML ............................................................................................................ 19
Captulo 3. Texto .......................................................................................................................................21
3.1. Estructurar............................................................................................................................................. 22
3.2. Marcado bsico de texto ....................................................................................................................... 26
3.3. Marcado avanzado de texto .................................................................................................................. 32
3.4. Espacios en blanco y nuevas lneas ....................................................................................................... 35
3.5. Codificacin de caracteres..................................................................................................................... 44
Captulo 4. Enlaces ....................................................................................................................................47
4.1. URL......................................................................................................................................................... 47
4.2. Enlaces relativos y absolutos ................................................................................................................. 50
4.3. Enlaces bsicos ...................................................................................................................................... 54
4.4. Enlaces avanzados ................................................................................................................................. 59
4.5. Otros tipos de enlaces ........................................................................................................................... 61
4.6. Ejemplos de enlaces habituales............................................................................................................. 63
Captulo 5. Listas .......................................................................................................................................67
5.1. Listas no ordenadas ............................................................................................................................... 67
5.2. Listas ordenadas .................................................................................................................................... 68
5.3. Listas de definicin ................................................................................................................................ 70
Captulo 6. Imgenes y objetos..................................................................................................................73
6.1. Imgenes ............................................................................................................................................... 73
6.2. Mapas de imagen .................................................................................................................................. 76
6.3. Objetos .................................................................................................................................................. 78
Captulo 7. Tablas......................................................................................................................................81
7.1. Tablas bsicas ........................................................................................................................................ 82
7.2. Tablas avanzadas ................................................................................................................................... 93
Captulo 8. Formularios .............................................................................................................................99
8.1. Formularios bsicos ............................................................................................................................... 99
8.2. Formularios avanzados ........................................................................................................................ 107
8.3. Otros elementos de formulario ........................................................................................................... 110
Captulo 9. Estructura y layout ................................................................................................................118
Captulo 10. Metainformacin.................................................................................................................121
www.librosweb.es
Introduccin a XHTML
10.1. Estructura de la cabecera .................................................................................................................. 121
10.2. Metadatos ......................................................................................................................................... 122
10.3. DOCTYPE............................................................................................................................................ 124
Captulo 11. Otras etiquetas importantes ................................................................................................127
11.1. Comentarios ...................................................................................................................................... 127
11.2. JavaScript........................................................................................................................................... 127
11.3. CSS ..................................................................................................................................................... 129
11.4. Iframes............................................................................................................................................... 129
11.5. Otras etiquetas .................................................................................................................................. 131
Captulo 12. Accesibilidad........................................................................................................................134
12.1. Requisitos del nivel A de accesibilidad .............................................................................................. 134
Captulo 13. Validacin............................................................................................................................136
13.1. Validacin con Dreamweaver ............................................................................................................ 136
13.2. Validador del W3C ............................................................................................................................. 138
13.3. Otros validadores .............................................................................................................................. 139
Captulo 14. Fragmentos de cdigo..........................................................................................................142
14.1. Documento XHTML............................................................................................................................ 147
14.2. Cabecera XHTML ............................................................................................................................... 148
14.3. Tabla .................................................................................................................................................. 148
14.4. Formulario ......................................................................................................................................... 149
Captulo 15. Ejercicios resueltos ..............................................................................................................151
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 (http://www.w3.org/) ,
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.
www.librosweb.es
Captulo 1. Introduccin
Introduccin a XHTML
El primer documento formal con la descripcin de HTML se public en 1991 bajo el nombre
"HTML Tags" (http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/
Tags.html) (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 (http://www.ietf.org/) (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 (http://www.w3.org/) (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 (http://www.whatwg.org/)
(Web Hypertext Application Technology Working Group).
La actividad actual del WHATWG se centra en el futuro estndar HTML 5, cuyo primer borrador
oficial (http://www.w3.org/TR/html5/) se public el 22 de enero de 2008. Debido a la fuerza de
las empresas que forman el grupo WHATWG y a la publicacin de los borradores de HTML 5.0,
en marzo de 2007 el W3C decidi retomar la actividad estandarizadora de HTML
(http://www.w3.org/2007/03/html-pressrelease) .
De forma paralela a su actividad con HTML, W3C ha continuado con la estandarizacin de
XHTML, una versin avanzada de HTML y basada en XML. La primera versin de XHTML se
denomina XHTML 1.0 y se public el 26 de Enero de 2000 (y posteriormente se revis el 1 de
Agosto de 2002).
www.librosweb.es
Introduccin a XHTML
Captulo 1. Introduccin
XHTML 1.0 es una adaptacin de HTML 4.01 al lenguaje XML, por lo que mantiene casi todas sus
etiquetas y caractersticas, pero aade algunas restricciones y elementos propios de XML. La
versin XHTML 1.1 ya ha sido publicada en forma de borrador y pretende modularizar XHTML.
Tambin ha sido publicado el borrador de XHTML 2.0, que supondr un cambio muy importante
respecto de las anteriores versiones de XHTML.
www.librosweb.es
Captulo 1. Introduccin
Introduccin a XHTML
Actualmente, entre HTML 4.01 y XHTML 1.0, la mayora de diseadores escogen XHTML. En un
futuro cercano, si los diseadores deben elegir entre HTML 5 y XHTML 1.1 o XHTML 2.0, quizs
la eleccin sea diferente.
www.librosweb.es
Introduccin a XHTML
Introduccin a XHTML
<parrafo>
Contenido de texto con <importante>algunas palabras</importante> resaltadas de forma
especial.
</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 sistemas electrnicos. La principal desventaja es que pueden
aumentar mucho el tamao del documento, por lo que en general se utilizan etiquetas con
nombres muy cortos.
10
www.librosweb.es
Introduccin a XHTML
El cuerpo (llamado body en ingls) contiene todo lo que el usuario ve en su pantalla y la cabecera
(llamada head en ingls) contiene todo lo que no se ve (con la nica excepcin del ttulo de la
pgina, que los navegadores muestran como ttulo de sus ventanas).
A continuacin se muestra el cdigo HTML de una pgina web muy sencilla:
<html>
<head>
<title>El primer documento HTML</title>
</head>
<body>
<p>El lenguaje HTML es <strong>tan sencillo</strong> que
prcticamente se entiende sin estudiar el significado
de sus etiquetas principales.</p>
</body>
</html>
www.librosweb.es
11
Introduccin a XHTML
Figura 2.3. Aspecto que muestra el primer documento HTML en cualquier navegador
Si ya ests viendo tu primera pgina HTML en el navegador, prueba a pulsar sobre el men Ver
> Cdigo fuente y podrs ver el cdigo HTML de la pgina que est cargada en el navegador. De
hecho, puedes ver el cdigo HTML de cualquier pgina de Internet mediante la opcin Ver >
Cdigo fuente. Prueba a ver el cdigo HTML de tu pgina preferida y vers cuantas etiquetas
puede llegar a tener una pgina compleja.
Volviendo al cdigo HTML del primer ejemplo, es importante conocer las tres etiquetas
principales de un documento HTML (<html>, <head>, <body>):
<html>: indica el comienzo y el final de un documento HTML. Ninguna etiqueta o
contenido puede colocarse antes o despus de la etiqueta <html> (con una sola excepcin
que se ver ms adelante). En el interior de la etiqueta <html> se definen la cabecera y el
cuerpo del documento HTML y todo lo que se coloque fuera de la etiqueta <html> se
ignora.
<head>: delimita la parte de la cabecera del documento. La cabecera contiene informacin
sobre el propio documento HTML, como por ejemplo su ttulo y el idioma de la pgina. Los
contenidos indicados en la cabecera no son visibles para el usuario, con la excepcin de la
etiqueta <title>, que se utiliza para indicar el ttulo del documento y que los navegadores
lo visualizan en la parte superior izquierda de la ventana del navegador (si no te has fijado
anteriormente, vuelve a abrir el primer ejemplo en cualquier navegador y observa dnde
se muestra el ttulo de la pgina).
<body>: delimita el cuerpo del documento HTML. El cuerpo encierra todos los contenidos
que se muestran al usuario (prrafos de texto, imgenes, tablas). En general, el <body> de
un documento contiene cientos de etiquetas HTML, mientras que el <head> no contiene
ms que unas pocas.
Figura 2.4. Esquema de las etiquetas principales que contiene un documento HTML
Ejercicio 1
Determinar el cdigo HTML correspondiente a la siguiente pgina:
12
www.librosweb.es
Introduccin a XHTML
Figura 2.5. Pgina HTML sencilla que resalta algunas partes del texto
Pistas: <em> y <del>
13
Introduccin a XHTML
<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
www.librosweb.es
Introduccin a XHTML
Atributo
Descripcin
id =
"texto"
class =
"texto"
style =
"texto"
title =
"texto"
La mayora de pginas web actuales utilizan los atributos id y class de forma masiva. Sin
embargo, estos atributos slo son realmente tiles cuando se trabaja con CSS y con Javascript.
2) Atributos para internacionalizacin: los utilizan las pginas que muestran sus contenidos
en varios idiomas o aquellas que quieren indicar de forma expltica el idioma de sus contenidos:
Atributo
Descripcin
lang = "codigo de
idioma"
xml:lang = "codigo de
idioma"
dir
Indica la direccin del texto (til para los idiomas que escriben de derecha
a izquierda)
En las pginas XHTML, el atributo xml:lang tiene ms prioridad que lang y es obligatorio
incluirlo siempre que se incluye el atributo lang.
Como la palabra internacionalizacin es muy larga, se suele sustituir por la abreviatura i18n
(el nmero 18 se refiere al nmero de letras que existen entre la letra i y la letra n de la palabra
internacionalizacin).
3) Atributos de eventos: slo se utilizan en las pginas web dinmicas creadas con JavaScript.
Atributo
Descripcin
Cada vez que el usuario pulsa una tecla, mueve su ratn o pulsa cualquier botn del ratn, se
produce un evento dentro del navegador. Utilizando JavaScript y los atributos anteriores, es
posible responder de forma adecuada a cada evento.
4) Atributos para los elementos que pueden obtener el foco:
Cuando el usuario selecciona un elemento de la interfaz de una aplicacin, se dice que "el
elemento tiene el foco del programa". Si por ejemplo un usuario pincha con su ratn sobre un
cuadro de texto y comienza a escribir, ese cuadro de texto tiene el foco del programa, llamado
www.librosweb.es
15
Introduccin a XHTML
"focus" en ingls. Si el usuario selecciona despus otro elemento, el elemento original pierde el
foco y el nuevo elemento es el que tiene el foco del programa.
Los elementos de las pginas web tambin pueden obtener el foco de la aplicacin (en este caso,
el foco del navegador) y HTML define algunos atributos especficos para controlar cmo se
seleccionan los elementos.
Atributo
Descripcin
accesskey =
"letra"
tabindex =
"numero"
onfocus,
onblur
Controlan los eventos JavaScript que se ejecutan cuando el elemento obtiene o pierde el
foco
Cuando se pulsa repetidamente la tecla del tabulador sobre una pgina web, el navegador
selecciona de forma alternativa todos los elementos de la pgina que se pueden seleccionar
(principalmente los enlaces y los elementos de formulario). El atributo tabindex permite alterar
el orden en el que se seleccionan los elementos, por lo que es muy til cuando se quiere
controlar de forma precisa cmo se seleccionan los campos de un formulario complejo.
Por su parte, el atributo accesskey permite establecer una tecla para acceder de forma rpida a
cualquier elemento. Aunque la tecla de acceso rpido se establece mediante HTML, la
combinacin de teclas necesarias para activar ese acceso rpido depende del navegador. En el
navegador Internet Explorer se pulsa la tecla ALT + la tecla definida; en el navegador Firefox se
pulsa Alt + Shift + la tecla definida; en el navegador Opera se pulsa Shift + Esc + la tecla
definida; en el navegador Safari se pulsa Ctrl + la tecla definida.
En el resto de la documentacin, se emplearn las palabras "bsicos", "i18n", "eventos" y
"foco" respectivamente para referirse a cada uno de los grupos de atributos comunes definidos
anteriormente.
16
www.librosweb.es
Introduccin a XHTML
El texto encerrado por la etiqueta es opcional, ya que algunas etiquetas de HTML no pueden
encerrar ningn texto. El siguiente esquema muestra un elemento HTML, formado por una
etiqueta <p>, atributos y contenidos de texto:
La siguiente imagen muestra cmo visualizan los navegadores el cdigo HTML anterior
(mediante CSS se han aadido bordes que muestran el espacio ocupado por cada elemento):
www.librosweb.es
17
Introduccin a XHTML
18
www.librosweb.es
Introduccin a XHTML
Este tipo de atributos en los que el nombre coincide con su valor no son muy habituales.
www.librosweb.es
19
Introduccin a XHTML
Adems de estas cinco restricciones bsicas, XHTML incluye otros cambios ms avanzados
respecto a HTML:
1. Antes de acceder al valor de un atributo, se eliminan todos los espacios en blanco que se
encuentran antes y despus del valor. Adems, se eliminan todos los espacios en blanco
sobrantes dentro del valor de un atributo. En otras palabras, si en el interior de un
atributo se incluyen varios espacios en blanco seguidos, se eliminan todos salvo un
nico espacio en blanco utilizado para separar las diferentes palabras.
2. Como se explicar ms adelante al hablar de la etiqueta <script>, el cdigo JavaScript
debe encerrarse entre unas etiquetas especiales (<![CDATA[ y ]]>) para evitar que el
navegador interprete de forma errnea caracteres como & y <.
3. Las pginas XHTML deben prescindir del atributo name para identificar de forma nica a
los elementos. En su lugar, siempre debe utilizarse el atributo id. De hecho, en la
versin 1.0 del estndar XHTML, el atributo name se ha declarado obsoleto para las
etiquetas a, applet, form, frame, iframe, img y map.
20
www.librosweb.es
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
Captulo 3. Texto
Introduccin a XHTML
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
22
www.librosweb.es
Introduccin a XHTML
Captulo 3. Texto
<p>
Prrafos
Atributos comunes
Atributos
especficos
Tipo de elemento
Bloque
Descripcin
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 que se les
pueden asignar los atributos comunes de HTML bsicos, de internacionalizacin y de eventos.
www.librosweb.es
23
Captulo 3. Texto
Introduccin a XHTML
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:
<h1>
Atributos comunes
Atributos
especficos
Tipo de elemento
Bloque
Descripcin
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>
<body>
<h1>Titular de la pgina</h1>
<p>Prrafo de introduccin...</p>
<h2>La primera sub-seccin</h2>
<p>Prrafo de contenido...</p>
24
www.librosweb.es
Introduccin a XHTML
Captulo 3. Texto
<h2>Otra subseccin</h2>
<p>Ms prrafos de contenido...</p>
</body>
</html>
www.librosweb.es
25
Captulo 3. Texto
Introduccin a XHTML
Figura 3.5. Ejemplo de uso de las etiquetas h1, h2, h3, h4, h5 y h6
<em>
nfasis
Atributos comunes
Atributos
especficos
Tipo de elemento
En lnea
Descripcin
26
www.librosweb.es
Introduccin a XHTML
Captulo 3. Texto
<strong>
nfasis ms acentuado
Atributos comunes
Atributos
especficos
Tipo de elemento
En lnea
Descripcin
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
Captulo 3. Texto
Introduccin a XHTML
28
www.librosweb.es
Introduccin a XHTML
Captulo 3. Texto
www.librosweb.es
29
Captulo 3. Texto
<ins>
Atributos comunes
Atributos
especficos
Introduccin a XHTML
Insercin
bsicos, i18n y eventos
cite = "url" - Indica la URL de la pgina en la que se puede obtener ms
informacin sobre el motivo por el que se realiz la modificacin.
datetime = "fecha" - Especifica la fecha y hora en la que se realiz el cambio
Tipo de elemento
Bloque y en lnea
Descripcin
<del>
Atributos comunes
Atributos
especficos
Borrado
bsicos, i18n y eventos
cite = "url" - Indica la URL de la pgina en la que se puede obtener ms
informacin sobre el motivo por el que se realiz la modificacin.
datetime = "fecha" - Especifica la fecha y hora en la que se realiz el cambio
Tipo de elemento
Bloque y en lnea
Descripcin
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">
marcas hipertextuales</ins>) es un lenguaje de marcacin diseado para estructurar
textos y
presentarlos en forma de hipertexto.</p>
</body>
</html>
30
www.librosweb.es
Introduccin a XHTML
Captulo 3. Texto
<blockquote>
Citas
Atributos comunes
Atributos especficos
Tipo de elemento
Bloque
Descripcin
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>
www.librosweb.es
31
Captulo 3. Texto
Introduccin a XHTML
<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
www.librosweb.es
Introduccin a XHTML
<abbr>
Captulo 3. Texto
Abreviaturas
Atributos comunes
Atributos
especficos
Tipo de elemento
En lnea
Descripcin
Se emplea para marcar las abreviaturas del texto y proporcionar el significado de esas
abreviaturas
<acronym>
Acrnimos o siglas
Atributos comunes
Atributos
especficos
Tipo de elemento
En lnea
Descripcin
Se emplea para marcar las siglas o acrnimos del texto y proporcionar el significado de
esas siglas
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>
<p>El lenguaje <acronym title="HyperText Markup Language">HTML</acronym> es
estandarizado
por el <acronym title="World Wide Web Consortium">W3C</acronym>.</p>
</body>
</html>
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:
www.librosweb.es
33
Captulo 3. Texto
Introduccin a XHTML
<dfn>
Definicin
Atributos comunes
Atributos
especficos
Tipo de elemento
En lnea
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:
34
www.librosweb.es
Introduccin a XHTML
<cite>
Captulo 3. Texto
Cita
Atributos comunes
Atributos
especficos
Tipo de elemento
En lnea
Descripcin
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
Captulo 3. Texto
Introduccin a XHTML
<br>
Nueva lnea
Atributos comunes
bsicos
Atributos
especficos
Tipo de elemento
Descripcin
36
www.librosweb.es
Introduccin a XHTML
Captulo 3. Texto
La etiqueta <br> es una de las pocas etiquetas especiales de HTML. La particularidad de <br> es
que es una etiqueta vaca, es decir, no encierra ningn texto. De esta forma, la etiqueta debe
abrirse y cerrarse de forma consecutiva: <br></br>.
En estos casos, HTML permite utilizar un atajo para indicar que una etiqueta se est abriendo y
cerrando de forma consecutiva: <br/> (tambin se puede escribir como <br />).
Utilizando la etiqueta <br> se puede rehacer el ejemplo anterior para que respete las lneas que
forman el segundo prrafo:
<html>
<head>
<title>Ejemplo de etiqueta br</title>
</head>
<body>
<p>Este primer prrafo no contiene saltos de lnea ni otro tipo de espaciado.</p>
<p>Este segundo prrafo s que contiene saltos <br/>
de <br/>
lnea <br/>
y
otro
tipo
de
espaciado.</p>
</body>
</html>
El navegador ahora s que muestra correctamente las nuevas lneas que se queran insertar:
www.librosweb.es
37
Captulo 3. Texto
Introduccin a XHTML
Ahora el navegador s que muestra correctamente los espacios en blanco (y las nuevas lneas)
del segundo prrafo:
38
www.librosweb.es
Introduccin a XHTML
Captulo 3. Texto
Cada texto solamente equivale a un espacio en blanco, por lo que se deben escribir tantos
seguidos como espacios en blanco seguidos existan en el texto.
Ms adelante se profundiza en el origen de y se comprender por qu es necesario
incluir esa sucesin tan extraa de caracteres cada vez que se quiere incluir un espacio en blanco
adicional.
Ejercicio 3
Determinar el cdigo HTML que corresponde al siguiente documento:
www.librosweb.es
39
Captulo 3. Texto
<pre>
Introduccin a XHTML
Texto preformateado
Atributos comunes
Atributos
especficos
Tipo de elemento
Bloque
Descripcin
Muestra el texto que encierra tal y como est escrito (respetando los espacios en
blanco)
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:
40
www.librosweb.es
Introduccin a XHTML
Captulo 3. Texto
www.librosweb.es
41
Captulo 3. Texto
Introduccin a XHTML
<code>
Cdigo fuente
Atributos comunes
Atributos
especficos
Tipo de elemento
En lnea
Descripcin
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>
42
www.librosweb.es
Introduccin a XHTML
Captulo 3. Texto
www.librosweb.es
43
Captulo 3. Texto
Introduccin a XHTML
Carcter
Descripcin
Traduccin
<
<
less than
>
>
more than
&
&
ampersand
ampersand
"
"
quotation mark
comillas
44
www.librosweb.es
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:
45
Captulo 3. Texto
Introduccin a XHTML
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>
Si se utilizan las entidades HTML en vez de los caracteres problemticos, es indiferente pasar de
una codificacin de caracteres a otra diferente. En la Wikipedia se puede consultar la lista
completa de las 252 entidades HTML definidas (http://en.wikipedia.org/wiki/
List_of_XML_and_HTML_character_entity_references) .
46
www.librosweb.es
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
47
Captulo 4. Enlaces
Introduccin a XHTML
Protocolo (http://): el mecanismo que debe utilizar el navegador para acceder a ese
recurso. Todas las pginas web utilizan http://. Las pginas web seguras (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
%3A
48
www.librosweb.es
Introduccin a XHTML
Captulo 4. Enlaces
%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:
<!-- URL problemtica -->
http://www.ejemplo.com/ruta/espaol.html
<!-- URL correcta -->
http://www.ejemplo.com/ruta/espa%F1ol.html
www.librosweb.es
49
Captulo 4. Enlaces
Introduccin a XHTML
50
www.librosweb.es
Introduccin a XHTML
Captulo 4. Enlaces
recurso enlazado. En concreto, para que una URL relativa sea til es imprescindible conocer la
URL del origen del enlace.
Las URL relativas se construyen a partir de las URL absolutas y permiten prescindir de la parte
del protocolo, del nombre del servidor e incluso de parte o toda la ruta del recurso enlazado.
Aunque las URL relativas pueden ser difciles de entender para los que comienzan con HTML,
son tan tiles que todos los sitios web las utilizan.
Imagina que dispones de una pgina publicada en http://www.ejemplo.com/ruta1/ruta2/
pagina1.html y quieres incluir en ella un enlace a otra pgina que se encuentra en
http://www.ejemplo.com/ruta1/ruta2/pagina2.html. Como las URL identifican de forma nica a
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 navegador 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).
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.
www.librosweb.es
51
Captulo 4. Enlaces
Introduccin a XHTML
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
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
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:
Origen
52
http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html
www.librosweb.es
Introduccin a XHTML
Captulo 4. Enlaces
Recurso
enlazado
URL absoluta
http://www.ejemplo.com/ruta1/pagina2.html
URL relativa
../../pagina2.html
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
Si se intentan subir ms niveles jerrquicos de los que es posible, el navegador ignora todos los
../ sobrantes. Si la pgina que tiene el enlace es http://www.ejemplo.com/ruta1/ruta2/ruta3/
pagina1.html y la URL relativa que se incluye es ../../../../../pagina2.html, el navegador
realmente la interpreta como ../../../pagina2.html.
Como el objetivo de las URL relativas es crear URL ms cortas y sencillas que las URL absolutas,
este mtodo slo se puede utilizar cuando el origen y el destino se encuentran cerca, porque de
otro modo la URL relativa se complica demasiado.
3) El destino del enlace se encuentra cerca de su origen y en un nivel inferior
Este caso es muy similar al anterior, pero ms sencillo. Si el recurso enlazado se encuentra en
algn directorio inferior al que se encuentra el origen, slo es necesario indicar el nombre de los
directorios a los que debe entrar el navegador.
Origen
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
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
Recurso Pgina web llamada pagina2.html y que se encuentra en un directorio inferior llamado ruta6
enlazado que est dentro del directorio ruta5 y que a su vez est dentro del directorio ruta4
URL
http://www.ejemplo.com/ruta1/ruta2/ruta3/ruta4/ruta5/ruta6/pagina2.html
absoluta
www.librosweb.es
53
Captulo 4. Enlaces
URL
relativa
Introduccin a XHTML
ruta4/ruta5/ruta6/pagina2.html
http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html
Recurso
enlazado
Pgina web llamada pagina2.html y que se guarda en un directorio llamado ruta7 que se
encuentra en la raz del servidor
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...
...slo consiste en el
nombre de un
recurso
...comienza por /
En cualquier otro
caso
...aadiendo el protocolo, servidor y ruta completa del origen del enlace, a la que se
aade la ruta incluida en la URL relativa
54
www.librosweb.es
Introduccin a XHTML
<a>
Atributos comunes
Atributos
especficos
Captulo 4. Enlaces
Enlaces
bsicos, i18n, eventos y foco
name = "texto" - Permite nombrar al enlace para que se pueda acceder desde
otros enlaces
href = "url" - Indica la URL del recurso que se quiere enlazar
Tipo de elemento
En lnea
Descripcin
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>
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.
www.librosweb.es
55
Captulo 4. Enlaces
Introduccin a XHTML
<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>
...
<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>
...
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>
...
56
www.librosweb.es
Introduccin a XHTML
Captulo 4. Enlaces
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
57
Captulo 4. Enlaces
Introduccin a XHTML
58
www.librosweb.es
Introduccin a XHTML
Captulo 4. Enlaces
<a>
Atributos comunes
Enlaces
bsicos, i18n, eventos y foco
name = "texto" - Permite nombrar al enlace para que se pueda acceder desde
otros enlaces
href = "url" - Indica la URL del recurso que se quiere enlazar
hreflang = "codigo_idioma" - Idioma del recurso enlazado
Atributos
especficos
Tipo de elemento
En lnea
Descripcin
Idioma
Variacin idiomtica
en
Ingls
en-US
Ingls
Estados Unidos
es
Espaol
es-ES
Espaol
Espaa
es-AR
Espaol
Argentina
www.librosweb.es
59
Captulo 4. Enlaces
Introduccin a XHTML
60
www.librosweb.es
Introduccin a XHTML
Captulo 4. Enlaces
www.librosweb.es
61
Captulo 4. Enlaces
<script>
Atributos comunes
Introduccin a XHTML
Cdigo ejecutable
src = "url" - Indica la direccin del archivo que contiene el cdigo
Atributos
especficos
Tipo de elemento
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.
62
www.librosweb.es
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.
<link>
Atributos comunes
Atributos
especficos
Enlazar recursos
bsicos, i18n y eventos
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
Tipo de elemento
Etiqueta vaca
Descripcin
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.
Al pulsar el enlace anterior desde cualquier pgina web, se vuelve directamente a la pgina de
inicio, home o pgina principal del sitio web.
www.librosweb.es
63
Captulo 4. Enlaces
Introduccin a XHTML
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
64
www.librosweb.es
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).
www.librosweb.es
65
Captulo 4. Enlaces
Introduccin a XHTML
href="http://www.ejemplo.com/manual/espanol.html" />
</head>
4.6.10. Indicar que existe una versin de la pgina preparada para imprimir
<head>
<title>Manual</title>
<link media="print" title="El manual en PDF"
type="application/pdf"
rel="alternate"
href="http://www.ejemplo.com/manual/manualcompleto.pdf" />
</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.
66
www.librosweb.es
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
Tipo de elemento
Bloque
Descripcin
<li>
Atributos comunes
Atributos
especficos
Tipo de elemento
Bloque
Descripcin
www.librosweb.es
67
Captulo 5. Listas
Introduccin a XHTML
<li>Inicio</li>
<li>Noticias</li>
<li>Artculos</li>
<li>Contacto</li>
</ul>
</body>
</html>
68
www.librosweb.es
Introduccin a XHTML
<ol>
Captulo 5. Listas
Lista ordenada
Atributos comunes
Atributos
especficos
Tipo de elemento
Bloque
Descripcin
www.librosweb.es
69
Captulo 5. Listas
Introduccin a XHTML
<dl>
Lista de definicin
Atributos comunes
Atributos
especficos
Tipo de elemento
Bloque
Descripcin
<dt>
Atributos comunes
Atributos
especficos
Tipo de elemento
Bloque
Descripcin
Se emplea para definir los trminos de los elementos de una lista de definicin
<dd>
Lista de definicin
Atributos comunes
Atributos
especficos
Tipo de elemento
Bloque
Descripcin
Se emplea para indicar las definiciones de los elementos de una lista de definicin
70
www.librosweb.es
Introduccin a XHTML
Captulo 5. Listas
<dt>XML</dt>
<dd>Lenguaje basado en SGML y que se emplea para describir datos</dd>
<dt>RSS</dt>
<dt>GML</dt>
<dt>XHTML</dt>
<dt>SVG</dt>
<dt>XUL</dt>
<dd>Lenguajes derivados de XML para determinadas aplicaciones</dd>
</dl>
</body>
</html>
www.librosweb.es
71
Captulo 5. Listas
Introduccin a XHTML
72
www.librosweb.es
Introduccin a XHTML
<img>
Atributos comunes
Imagen
bsicos, i18n y eventos
src = "url" - Indica la URL de la imagen que se muestra
alt = "texto" - Descripcin corta de la imagen
Atributos
especficos
longdesc = "url" - Indica una URL en la que puede encontrarse una descripcin
ms detallada de la imagen
name = "texto" - Nombre del elemento imagen
height = "unidad_de_medida" - Indica la altura con la que se debe mostrar la
imagen (no es obligatorio que coincida con la altura original de la imagen)
width = "unidad_de_medida" - Indica la anchura con la que se debe mostrar la
imagen (no es obligatorio que coincida con la anchura original de la imagen)
Tipo de elemento
Descripcin
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 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" />
www.librosweb.es
73
Introduccin a XHTML
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.
<img src="/imagenes/foto1.jpg" alt="Fotografa de un paisaje" width="200" height="350"
/>
<img src="/imagenes/foto2.jpg" alt="Fotografa de un atardecer en la playa" width="330"
height="220" />
74
www.librosweb.es
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
75
Introduccin a XHTML
Figura 6.1. Nueva pgina del portfolio que muestra la imagen de cada uno de los proyectos
76
www.librosweb.es
Introduccin a XHTML
<map>
Mapa de imagen
Atributos comunes
Atributos
especficos
name = "texto" - Nombre que identifica de forma nica al mapa definido (es
obligatorio indicar un nombre nico)
Tipo de elemento
Bloque y en lnea
Descripcin
<area>
Atributos comunes
Atributos
especficos
Tipo de elemento
Etiqueta vaca
Descripcin
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>
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:
www.librosweb.es
77
Introduccin a XHTML
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:
<object>
Atributos comunes
Objeto
bsicos, i18n y eventos
data = "url" - Indica la URL de los datos que utiliza el objeto
Atributos
especficos
Tipo de elemento
Bloque y en lnea
Descripcin
78
www.librosweb.es
Introduccin a XHTML
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>:
<param>
Parmetros de un objeto
Atributos comunes
id
Atributos
especficos
Tipo de elemento
Etiqueta vaca
Descripcin
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.
www.librosweb.es
79
Introduccin a XHTML
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.
<embed>
Atributos comunes
Embeber objetos
bsicos, i18n y eventos
src = "url" - Indica la URL del archivo u objeto que se incluye en la pgina
Atributos
especficos
Tipo de elemento
Bloque
Descripcin
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.
80
www.librosweb.es
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:
www.librosweb.es
81
Captulo 7. Tablas
Introduccin a XHTML
solucin correcta para definir la estructura de las pginas consiste en la utilizacin de hojas de
estilos CSS.
Si se visualiza el cdigo anterior en cualquier navegador, se obtiene una tabla como la que
muestra la siguiente imagen:
82
www.librosweb.es
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>.
<table>
Tabla
Atributos comunes
Atributos
especficos
Tipo de elemento
Bloque
Descripcin
www.librosweb.es
83
Captulo 7. Tablas
<tr>
Introduccin a XHTML
Fila de tabla
Atributos comunes
Atributos
especficos
Tipo de elemento
Bloque
Descripcin
<td>
Atributos comunes
Celda de tabla
bsicos, i18n y eventos
abbr = "texto" - Permite definir el contenido de la celda (se emplea sobre todo
con los navegadores de voz utilizados por personas discapacitadas)
Atributos
especficos
headers = "lista_de_id" - Indica las celdas que actan como cabeceras 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
Tipo de elemento
Bloque
Descripcin
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.
84
www.librosweb.es
Introduccin a XHTML
Captulo 7. Tablas
<th>
Atributos comunes
Atributos
especficos
headers = "lista_de_id" - Indica las celdas que actan como cabeceras para
esta celda (los ttulos de las columnas y filas). Se indica como una lista de 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
Tipo de elemento
Bloque
Descripcin
Se emplea para definir las celdas que son cabecera de una fila o de una columna de la
tabla
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 o de la columna (<th scope="row"> y <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>.
<caption>
Atributos comunes
Atributos
especficos
Tipo de elemento
En lnea
Descripcin
Ejercicio 11
Determinar el cdigo HTML necesario para crear la tabla que se muestra en la siguiente imagen:
www.librosweb.es
85
Captulo 7. Tablas
Introduccin a XHTML
86
www.librosweb.es
Introduccin a XHTML
Captulo 7. Tablas
www.librosweb.es
87
Captulo 7. Tablas
Introduccin a XHTML
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>
Sin embargo, si se utiliza el cdigo anterior, el navegador visualiza de forma incorrecta la tabla,
ya que las tablas en HTML deben disponer de una estructura regular. En otras palabras, todas las
filas de una tabla HTML deben tener el mismo nmero de columnas. Por lo tanto, si una fila debe
mostrar menos columnas, se fusionan mediante el atributo colspan, que indica el nmero de
columnas simples que va a ocupar una determinada celda.
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>.
88
www.librosweb.es
Introduccin a XHTML
Captulo 7. Tablas
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>
89
Captulo 7. Tablas
Introduccin a XHTML
90
www.librosweb.es
Introduccin a XHTML
Captulo 7. Tablas
</tr>
</table>
</body>
</html>
www.librosweb.es
91
Captulo 7. Tablas
Introduccin a XHTML
<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:
92
www.librosweb.es
Introduccin a XHTML
Captulo 7. Tablas
www.librosweb.es
93
Captulo 7. Tablas
Introduccin a XHTML
<thead>
<tbody>
<tfoot>
Cabecera de tabla
Seccin de una tabla
Pie de tabla
Atributos comunes
Atributos
especficos
Tipo de elemento
Bloque
Descripcin
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:
94
www.librosweb.es
Introduccin a XHTML
Captulo 7. Tablas
El cdigo HTML necesario para crear la tabla de la imagen anterior hace uso de las etiquetas
<thead>, <tbody> y <tfoot>:
<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>
www.librosweb.es
95
Captulo 7. Tablas
Introduccin a XHTML
</html>
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>:
96
www.librosweb.es
Introduccin a XHTML
Captulo 7. Tablas
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>:
97
Captulo 7. Tablas
Introduccin a XHTML
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.
98
www.librosweb.es
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:
www.librosweb.es
99
Captulo 8. Formularios
Introduccin a XHTML
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).
<form>
Atributos comunes
Formulario
bsicos, i18n y eventos
action = "url" - Indica la URL que se encarga de procesar los datos del
formulario
method = "POST o GET" - Mtodo HTTP empleado al enviar el formulario
Atributos
especficos
Tipo de elemento
Bloque
Descripcin
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".
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
100
www.librosweb.es
Introduccin a XHTML
Captulo 8. Formularios
<input>
Atributos comunes
Control de un formulario
bsicos, i18n, eventos y foco
type = "text | password | checkbox | radio | submit | reset |
file | hidden | image | button" - Indica el tipo de control que se incluye
en el formulario
name = "texto" - Asigna un nombre al control (es imprescindible para que el
servidor pueda procesar el formulario)
value = "texto" - Valor inicial del control
size = "unidad_de_medida" - Tamao inicial del control (para los campos de
texto y de password se refiere al nmero de caracteres, en el resto de controles se
refiere a su tamao en pxel)
Atributos
especficos
Tipo de elemento
Descripcin
A continuacin se muestran ejemplos para los diez controles que permite definir la etiqueta
<input>:
Cuadro de texto:
www.librosweb.es
101
Captulo 8. Formularios
Introduccin a XHTML
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 ).
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.
102
www.librosweb.es
Introduccin a XHTML
Captulo 8. Formularios
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.
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 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" ... .
www.librosweb.es
103
Captulo 8. Formularios
Introduccin a XHTML
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.
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.
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.
104
www.librosweb.es
Introduccin a XHTML
Captulo 8. Formularios
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.
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
www.librosweb.es
105
Captulo 8. Formularios
Introduccin a XHTML
/>
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 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:
106
www.librosweb.es
Introduccin a XHTML
Captulo 8. Formularios
www.librosweb.es
107
Captulo 8. Formularios
Introduccin a XHTML
<fieldset>
Agrupacin de campos
Atributos comunes
Atributos
especficos
Tipo de elemento
Bloque
Descripcin
108
www.librosweb.es
Introduccin a XHTML
<legend>
Captulo 8. Formularios
Atributos comunes
Atributos
especficos
Tipo de elemento
En lnea
Descripcin
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.
Afortunadamente, el lenguaje HTML incluye una etiqueta denominada <label> y que se utiliza
para establecer el ttulo de cada campo del formulario. Su definicin formal es la siguiente:
www.librosweb.es
109
Captulo 8. Formularios
<label>
Atributos comunes
Atributos
especficos
Introduccin a XHTML
Tipo de elemento
En lnea
Descripcin
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" />
Utilizando la etiqueta <label>, cada campo de formulario puede disponer de su propio ttulo:
<label for="nombre">Nombre</label> <br/>
<input type="text" id="nombre" name="nombre" value="" />
<label for="apellidos">Apellidos</label> <br/>
<input type="text" id="apellidos" name="apellidos" value="" />
<label for="dni">DNI</label> <br/>
<input type="text" id="dni" 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.
110
www.librosweb.es
Introduccin a XHTML
Captulo 8. Formularios
<textarea>
Atributos comunes
rea de texto
bsicos, i18n, eventos y foco
rows = "numero" - Nmero de filas de texto que mostrar el textarea
Atributos
especficos
Tipo de elemento
En lnea
Descripcin
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.
www.librosweb.es
111
Captulo 8. Formularios
Introduccin a XHTML
112
www.librosweb.es
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>:
<select>
Atributos comunes
Lista desplegable
bsicos, i18n y eventos
size = "numero" - Nmero de filas que se muestran de la lista (por defecto slo
se muestra una)
Atributos
especficos
Tipo de elemento
En lnea
Descripcin
<option>
Atributos comunes
Atributos
especficos
value = "texto" - El valor que se enva al servidor cuando el usuario elige esa
opcin
Otros: label, disabled
Tipo de elemento
Descripcin
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:
www.librosweb.es
113
Captulo 8. Formularios
Introduccin a XHTML
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:
114
www.librosweb.es
Introduccin a XHTML
Captulo 8. Formularios
<optgroup label="Navegadores">
<option value="Internet Explorer" selected="selected">Internet Explorer</option>
<option value="Firefox">Firefox</option>
<option value="Safari">Safari</option>
<option value="Opera">Opera</option>
<option value="Other">Otro</option>
</optgroup>
</select>
</form>
La etiqueta <optgroup> permite agrupar opciones relacionadas dentro de una lista desplegable.
Su definicin formal se muestra a continuacin:
<optgroup>
Atributos comunes
Atributos
especficos
Tipo de elemento
Descripcin
Se emplea para definir una agrupacin lgica de opciones de una lista desplegable
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
115
Captulo 8. Formularios
Introduccin a XHTML
116
www.librosweb.es
Introduccin a XHTML
Captulo 8. Formularios
www.librosweb.es
117
Introduccin a XHTML
118
www.librosweb.es
Introduccin a XHTML
<div>
Divisiones
Atributos comunes
Atributos
especficos
Tipo de elemento
Bloque
Descripcin
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:
...
<div id="contenedor">
<div id="cabecera">
www.librosweb.es
119
Introduccin a XHTML
...
</div>
<div id="contenido">
<div id="menu">
..
</div>
...
</div>
<div id="pie">
...
</div>
</div>
...
120
www.librosweb.es
Introduccin a XHTML
<head>
Atributos comunes
Atributos
especficos
Cabecera
i18n
profile = "url" - Especifica la URL del perfil o perfiles que utilizan los
metadatos
lang = "codigo_de_idioma" - Especifica el idioma principal de los contenidos
de la pgina
Tipo de elemento
Descripcin
www.librosweb.es
121
Introduccin a XHTML
La etiqueta <title> permite establecer el ttulo de la pgina. Los navegadores muestran este
ttulo como ttulo de la propia ventana del navegador. Los buscadores utilizan este ttulo como
ttulo de sus resultados de bsqueda.
Por lo tanto, el valor de <title> no slo es importante para los usuarios, sino que tambin es
importante para que los usuarios encuentren las pginas a travs de los buscadores. Un error
comn de muchos sitios web es mostrar un ttulo genrico e idntico para todas las pginas web
del sitio. Sin embargo, la recomendacin es que cada pgina debera mostrar un ttulo corto,
adecuado, nico y que describa inequvocamente los contenidos de la pgina.
Todas las pginas HTML deben tener definido un ttulo y slo uno, por lo que todas las pginas
web deben incluir obligatoriamente una etiqueta <title>, cuya definicin formal se muestra a
continuacin:
<title>
Atributos comunes
i18n
Atributos
especficos
Tipo de elemento
Descripcin
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>
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>.
122
www.librosweb.es
Introduccin a XHTML
<meta>
Atributos comunes
Metadatos
i18n
name = "texto" - El nombre de la propiedad que se define (no existe una lista
oficial de propiedades)
Atributos
especficos
Tipo de elemento
Descripcin
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" />
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
123
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 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.
124
www.librosweb.es
Introduccin a XHTML
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
125
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.
126
www.librosweb.es
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 navegadores
www.librosweb.es
127
Introduccin a XHTML
<noscript>
Atributos comunes
Atributos
especficos
Tipo de elemento
Bloque
Descripcin
128
www.librosweb.es
Introduccin a XHTML
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>
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
www.librosweb.es
129
Introduccin a XHTML
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.
130
www.librosweb.es
Introduccin a XHTML
<iframe>
Atributos comunes
Atributos
especficos
Tipo de elemento
Bloque y en lnea
Descripcin
Se emplea para incluir en la pgina un marco que muestra otro documento HTML
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
Tipo de elemento
Bloque
Descripcin
131
Introduccin a XHTML
<address>
<a href="../People/Raggett/">Dave Raggett</a>,
<a href="../People/Arnaud/">Arnaud Le Hors</a>,
contact persons for the <a href="Activity">W3C HTML Activity</a><br/>
$Date: 1999/12/24 23:37:50 $
</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.
<hr>
Lnea horizontal
Atributos comunes
Atributos
especficos
Tipo de elemento
Bloque
Descripcin
La siguiente imagen muestra el aspecto con el que los navegadores muestran por defecto las
lneas horizontales creadas con <hr>:
132
www.librosweb.es
Introduccin a XHTML
www.librosweb.es
133
Introduccin a XHTML
134
www.librosweb.es
Introduccin a XHTML
1.1 Proporcionar un texto alternativo para todas las imgenes, objetos y otros elementos no
textuales (mediante los atributos alt y longdesc).
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
135
Introduccin a XHTML
136
www.librosweb.es
Introduccin a XHTML
www.librosweb.es
137
Introduccin a XHTML
138
www.librosweb.es
Introduccin a XHTML
www.librosweb.es
139
Introduccin a XHTML
140
www.librosweb.es
Introduccin a XHTML
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
141
Introduccin a XHTML
142
www.librosweb.es
Introduccin a XHTML
www.librosweb.es
143
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:
144
www.librosweb.es
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
145
Introduccin a XHTML
Figura 14.6. Propiedades (nombre, descripcin y contenido) del fragmento de cdigo propio
En este caso, se trata de un fragmento de cdigo que inserta un bloque completo de cdigo
XHTML. Tambin es posible crear fragmentos que aaden cdigo XHTML antes y despus del
texto que ha sido seleccionado previamente.
Una vez creado el snippet, ya se puede insertar en cualquier zona de la pgina XHTML
simplemente pulsando dos veces sobre su nombre:
146
www.librosweb.es
Introduccin a XHTML
www.librosweb.es
147
Introduccin a XHTML
14.3. Tabla
Las tablas XHTML complejas estn formadas por cabecera, pie y uno o ms cuerpos. Adems, es
necesario incluir atributos como summary y scope 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>
148
www.librosweb.es
Introduccin a XHTML
<th scope="col"></th>
<th scope="col">Cabecera columna 1</th>
<th scope="col">Cabecera columna 2</th>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Cabecera fila 1</th>
<td>...</td>
<td>...</td>
</tr>
<tr>
<th scope="row">Cabecera fila 2</th>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
14.4. Formulario
Los formularios complejos agrupan sus campos mediante las etiquetas <fieldset> y <legend>.
Adems, cada campo debe incluir su ttulo mediante la 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=""/>
www.librosweb.es
149
Introduccin a XHTML
150
www.librosweb.es
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
151
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 Transitional//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.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>
152
www.librosweb.es
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
153
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>
154
www.librosweb.es
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>
www.librosweb.es
155
Introduccin a XHTML
<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><a href="../imagenes/proyecto1.png" title="Imagen del Proyecto 1" type="image/
png">Ver imagen del Proyecto 1</a></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><a href="../imagenes/proyecto2.png" title="Imagen del Proyecto 2" type="image/
png">Ver imagen del Proyecto 2</a></p>
</body>
</html>
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>
156
www.librosweb.es
Introduccin a XHTML
<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>
</ul>
</body>
</html>
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>
www.librosweb.es
157
Introduccin a XHTML
<dt><em>Fax</em></dt>
<dd>900 900 900</dd>
</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">
158
www.librosweb.es
Introduccin a XHTML
15.12. Ejercicio 12
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/
DTD/xhtml1-strict.dtd">
www.librosweb.es
159
Introduccin a XHTML
160
www.librosweb.es
Introduccin a XHTML
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>
www.librosweb.es
161
Introduccin a XHTML
<tr>
<th scope="row" abbr="Colores disponibles">Colores</th>
<td>
<img src="imagenes/color_blanco.png" alt="Color blanco" />
</td>
<td>
<img src="imagenes/color_negro.png" alt="Color blanco" />
<img src="imagenes/color_verde.png" alt="Color verde" />
<img src="imagenes/color_azul.png" alt="Color azul" />
<img src="imagenes/color_rosa.png" alt="Color rosa" />
</td>
<td>
<img src="imagenes/color_negro.png" alt="Color negro" />
</td>
<td colspan="2">
<img src="imagenes/color_blanco.png" alt="Color blanco" />
<img src="imagenes/color_negro.png" alt="Color negro" />
</td>
</tr>
<tr>
<th scope="row" abbr="Tamao de pantalla">Pantalla</th>
<td colspan="3">LCD de 3 cm (diagonal) con retroiluminacin</td>
<td colspan="2">LCD de 6 cm (diagonal) con retroiluminacin</td>
</tr>
<tr>
<th rowspan="2" scope="row" abbr="Tiempo de carga">Tiempo de carga</th>
<td rowspan="2" colspan="3">Unas 3 horas</td>
<td colspan="2">Unas 4 horas</td>
</tr>
<tr>
<td colspan="2">Unas 2 horas para alcanzar el 80% de la capacidad</td>
</tr>
</table>
</body>
</html>
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>
162
www.librosweb.es
Introduccin a XHTML
<h3>Rellena tu CV</h3>
<form action="/php/insertar_cv.php" method="post" enctype="multipart/form-data">
Nombre <br/>
<input type="text" name="nombre" value="" size="20" maxlength="30" />
<br/>
Apellidos <br/>
<input type="text" name="apellidos" value="" size="50" maxlength="80" />
<br/>
Contrasea <br/>
<input type="password" name="contrasena" value="" maxlength="10" />
<br/>
DNI <br/>
<input type="text" name="dni" value="" size="10" maxlength="9" />
<br/>
Sexo <br/>
<input type="radio" name="sexo" value="hombre" checked="checked" /> Hombre <br/>
<input type="radio" name="sexo" value="mujer" /> Mujer
<br/><br/>
Incluir mi foto <input type="file" name="foto" />
<br/><br/>
<input name="suscribir" type="checkbox" value="suscribir" checked="checked"/>
Suscribirme al boletn de novedades
<br/><br/>
<input type="submit" name="enviar" value="Guardar cambios" />
<input type="reset" name="limpiar" value="Borrar los datos introducidos" />
</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>
www.librosweb.es
163
Introduccin a XHTML
164
www.librosweb.es
Introduccin a XHTML
<option
<option
<option
<option
<option
<option
<option
<option
<option
<option
<option
<option
<option
</select>
value="37">Salamanca</option>
value="38">Santa Cruz de Tenerife</option>
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>
www.librosweb.es
165
Introduccin a XHTML
</body>
</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>
166
www.librosweb.es
Introduccin a XHTML
<option value="25">25%</option>
</select>
<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
167