XHTML

XHTML
INTRODUCCIÓN
XHTML (eXtensible Hyper Text Markup Language) es una extensión del HTML, cuyo objetivo
es adaptarse al proyecto W3C (World Wide Web Consortium).
W3C
http://www.W3C.org
Se trata por tanto de hacer documentos Web donde la información y la forma de presentarla
quedan claramente separadas, de modo que XHTML transmite la información que contiene un
documento, dejando el aspecto a las Hojas de Estilo (CSS) y la interactividad o funcionalidad a
JavaScript.
Consiste en una sintaxis mucho más rígida que la de HTML de modo que todas las etiquetas o tag
(entre paréntesis angulares) van siempre en minúscula, siempre hay una de apertura <etiqueta>
y otra de cierre </etiqueta>, aunque existen algunas con una sola etiqueta diferente <etiqueta
/>. Hay que tener en cuenta que muchas de las etiquetas se complementan con atributos.
REGLAS DEL XHTML
1. Un documento no puede tener etiquetas abiertas, deben ir acompañadas de su

correspondiente etiqueta de cierre.
2. Las etiquetas que definen un único elemento deben cerrarse a sí mismas añadiendo al final
de la misma un espacio y una barra /. Por ejemplo <hr />.
3. Las diferentes etiquetas deben estar debidamente anidados, de forma que se cierre cada
etiqueta en orden inverso al de apertura.
<table><tr><td>Estamos dentro de una celda</td></tr></table>
4. Todas las etiquetas y los atributos que las acompañan deben escribirse siempre en
minúscula.
5. Los valores de los diferentes atributos de una etiqueta deben aparecer siempre entre
comillas.
<table width=”90%” border=”1”>
EL DOCUMENTO.
La Declaración del Tipo del Documento (DTD) es obligatoria en XHTML. Y tenemos tres
opciones de DTD:
- Strict
- Transitional
- Frameset
o Estricto (Strict). Se busca una estructura limpia y clara, dejando el aspecto y maquetación
a las CSS (Hojas de Estilo). No se pueden usar etiquetas como <bicolor> o <center>.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtmli/DTD/xhtml1-strict.dtd”>
o Transicional (Transitional). Cuando lo que buscamos es describer la presentación de los
documentos por medio de etiquetas. Es recomentdable cuando no hay posibilidad de
utilizar CSS. Contiene todas las características del tipo Strict, pero añade características
orientadas a la presentación.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtmli/DTD/xhtml1- transitional.dtd”>
o Marcos (Frameset). Se trata de una variante de la transicional, que permite la

estructuración en marcos del documento.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”

“http://www.w3.org/TR/xhtmli/DTD/xhtml1- frameset.dtd”>
La codificación por defecto de un documento es UNICODE UTF-8. Para evitar problemas con
algunos caracteres en castellano, en la definición de sitios estrictos se recomienda usar la
codificación ISO-8859-1.
<?XML version=”1.0” encoding=”iso-8859-1”?>
Si el DTD no es estricto es recomendable incluir la siguiente meta:
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1” />
En la etiqueta HTML es necesario indicar el lenguaje en el que está escrito el documento, por
ejemplo:
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”sp” lang=”sp” >
Hay navegadores que no admiten estos atributos para el lenguaje, aunque no hay ningún
problema al usarlos.
LA CABECERA DE LA PÁGINA.
Se define entre las etiquetas <head> y </head> y va a contener información sobre el documento,
toda ella opcional aunque al menos la primera no debería obviarse:
- Título.
- Vínculos a hojas de estilo o script.
- Instrucciones meta con información sobre el documento.
El título va entre las etiquetas <title> y </title>. Se muestra en la página y también se utiliza
para referirla cuando es localizada por cualquiera de los buscadores de Internet.
Las etiquetas META aportan información sobre el sitio y sobre el autor de la página, orientada
principalmente a los directorios y motores de búsqueda en la Red, así como algunas instrucciones
de configuración del sitio. Carecen de etiqueta de cierre por lo que su formato es, <meta … /> .
Algunos ejemplos del uso de meta los vemos a continuación:
Definir el autor del documento

<meta name="author" content="Juan Pérez" />
Definir el programa con el que se ha creado el documento
<meta name="generator" content="WordPress 2.4.4" />
Definir la codificación de caracteres del documento
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
Definir el copyright del documento
<meta name="copyright" content="misitio" />
Definir el comportamiento de los buscadores
<meta name="robots" content="index, follow" />
Definir las palabras clave que definen el contenido del documento
<meta name="keywords" content="diseño, css, hojas de estilos, web, html" />
Definir una breve descripción del sitio
<meta name="description" content="Artículos sobre diseño web, usabilidad y

accesibilidad" />
Finalmente otras etiquetas utilizadas en la cabecera de la página Web son:

<link … />
<script … />
La etiqueta <link … /> permite enlazar con un archivo externo, como por ejemplo una hoja de
estilo o también objetos:
<link rel="stylesheet" href="#" type="text/css" media="screen" />

<link rel="stylesheet" href="#" type="text/css" media="print" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="#" />
La etiqueta <script … /> se utiliza para insertar código de otro lenguaje, normalmente se hace
en forma de archivo externo:
<script src="#" type="text/javascript"></script>
EL CUERPO DE LA PÁGINA.
Se define entre las etiquetas <body> y </body> y su contenido será el documento que muestre el
navegador en pantalla. Su contenido puede ser texto, imágenes, enlaces, tablas, listas, etc.
- Título.
- Vínculos a hojas de estilo o script.
- Instrucciones meta con información sobre el documento.
UN PRIMER DOCUMENTO XHTML.
Para navegar por la Red (Internet) es preciso utilizar unos programas llamados navegadores o
browser, como Mozilla Firefox o Microsoft Explorer entre otros. Estos programas interpretan las
etiquetas HTML (por extensión también las XHTML) de las páginas visitadas y muestran
adecuadamente su contenido. Por tanto, podemos decir que los documentos HTML están hechos
para ser visualizados en pantalla mediante los navegadores.
Eso es para visualizarlos, pero a la hora de crearlos es preciso utilizar un editor, que puede ser un
editor de texto plano (como el bloc de notas de Windows) o un editor Web (como HTML Kit),
aunque también existen programas que permiten guardar cualquier documento como una página
HTML (por ejemplo Microsoft Word, FrontPage, Dreamweaver, Componer, etc.), estos últimos
suelen presentar un entorno de diseño bastante elaborado.
En cualquier caso está claro que usaremos un programa para crear las páginas Web y otro para
visualizarlas. Además hay que tener presente que cada objeto (imagen, animación, gráfico,
sonido, etc. ) que queramos incluir en una página Web, debemos aportarlo como un archivo al
que se hace referencia desde la página, por lo que lo habitual es crear una carpeta (o varias) cuyo
contenido sean precisamente esos objetos que vamos a incluir en la página.
Para crear nuestro primer documento XHTML, vamos a utilizar el siguiente ejemplo:
<?xml version="1.0" encoding="ISO-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>Titulo de la pagina, aparecerá en la barra azul de título </title>
</head>
<body>
<h1>Título principal de la página</h1>
<p>Primer documento XHTML. Hola mundo</p>
</body>
</html>
Basta con seleccionar el código anterior y copiar, para a continuación abrir el editor en cuestión
(por ejemplo Bloc de Notas de Windows) y pegarlo. Hay que tener en cuenta que el sangrado de
líneas se pierde al copiarlo y que sólo lo utilizamos para facilitar la lectura a quienes lo usen, pero
al navegador le da igual que vaya todo en una misma línea o sin ningún tipo de sangrado. De
modo que si quieres hacer más legible el código de tus páginas tendrás que especificar los
márgenes izquierdos de las líneas de forma manual.
Una vez copiado el código es necesario guardarlo en un archivo con extensión HTML, y para ello
debemos indicar dónde vamos a guardarlo, es decir, la carpeta de destino. Es preciso realizar esta
acción con el máximo cuidado para posteriormente poder localizar el documento y poder
visualizarlo con el navegador. Si no sabemos dónde se ha guardado o con qué nombre se ha
guardado, será compleja su localización. Por ello te recomiendo que eches un vistazo a la
siguiente imagen y pongas atención a la hora de guardar el documento.
Una vez guardado, vamos a proceder a visualizarlo. Para ello basta con abrir cualquier carpeta y
buscar la carpeta en la que hemos guardado el documento (en la imagen de ejemplo la carpeta es
“Ejercicios HTML”). Una vez situados en esa carpeta sólo es preciso hacer doble clic sobre el
archivo a visualizar (en nuestro ejemplo sería “primera.html”) y automáticamente se abrirá el
navegador con la página que acabamos de crear. El resultado puedes verlo en la siguiente imagen.
Pero, ¿qué estamos viendo? Introduzcamos algunos comentarios en la imagen para aclarar un
poco el resultado obtenido como una página Web.
Realmente no se parece en nada al código que hemos utilizado para su creación, pero este es su
resultado en un navegador de Internet. Este será el proceso que debes seguir cada vez que vayas a
crear una página Web o documento HTML:
1. Escribir el código en un editor texto.
2. Guardar el documento en un archivo con extensión “.html” en una carpeta conocida.
3. Visualizar en el navegador ese documento haciendo doble clic sobre el archivo.
LA PLANTILLA DE DOCUMENTO.
Lo ideal en estos casos es crear una plantilla para todos los documentos de modo que evitemos
cometer errores al teclear y ganemos en rapidez de creación, sólo habrá que tener mucho cuidado
a la hora de guardar para no perder la plantilla.
<?xml version="1.0" encoding="ISO-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title> Teclear aquí el título de la página. </title>
</head>
<body>
<h2> Título que va a encabezar la página. </h2>
<p> Texto de la página organizado en párrafos.</p>
</body>
</html>
Este será la estructura básica de cualquiera de los documentos HTML que hagamos, aunque
evidentemente debe ser completada con nuevas etiquetas y el contenido que queremos mostrar en
la página. A continuación veamos las diferentes opciones que tenemos para presentar el contenido
de una página, que estará compuesto por texto, imágenes, enlaces, sonidos y cualquier otro objeto
que se incluya.
TIPOS DE TEXTO
En una página Web o documento HTML el texto debe ser escaso, el exceso de texto aumenta el
tamaño de las páginas y dificulta la comunicación y atractivo que se busca. Además es necesario
distribuirlo en párrafos, listas o tablas, destacar partes de texto e incluso definir diferentes títulos.
Las principales etiquetas XHTML relacionadas con el formato del texto, son las siguientes:
Etiquetas de línea: mantienen el formato de la línea tras su uso.

<b> … </b> Resalta el contenido en negrita.
<u> … </u> Añade el atributo subrayado el contenido.
<i> … </i> Añade el atributo cursiva al contenido.
<strong> … </strong> Contenido al que se le quiere dar más fuerza.
<em> … </em> Agrega énfasis al contenido.
<address> … </address> El texto se representa como una dirección
<code> … </code> Destaca el texto como código
<sup> … </sup> Superíndice
<sub> … </sub> Subíndice
Etiquetas de bloque: cuando se utilizan cambia de línea.

<p> … </p> Definición de párrafo
<cite> … </cite> Cita de textos
<blocquote> … </blocquote> Texto entre comillas
<pre> … </pre> Texto preformateado
<hx> … </hx> Títulos, x varía de 1 a 6
LISTAS NUMERADAS Y CON VIÑETAS
Una técnica muy utilizada en páginas Web es la utilización de listas de elementos enumerados, ya
que de este modo se aclara la forma de mostrar la información y facilita la visualización de la
página al mostrarla más estructurada.
Hay varias formas de representar las listas en XHTML, pueden ser numeradas (ordenadas), de
viñetas (desordenadas) o de definiciones.
Listas numeradas Listas de viñetas Listas de definiciones

<ol> <li> … <ul> <li> … <dl> <dt> <dd> …
<ol> <ul> <dl>
<li>Manzana</li> <li>Tomate</li> <dt>Zumo</dt>
<li>Plátano</li> <li>Lechuga</li> <dd>Fruta exprimida</dd>
<li>Naranja</li> <li>Aguacate</li> <dt>Ensalada</dt>
<li>Melón</li> <li>Zanahoria</li> <dd>Verdura troceada</dd>
</ol> </ul> </dl>
1. Manzana o Tomate Zumo

2. Plátano o Lechuga Fruta exprimida
3. Naranja o Aguacate Ensalada
4. Melón o Zanahoria Verdura troceada
Como podemos observar en los ejemplos del cuadro, la forma de representar la información es
muy clara cuando se utilizan listas, especialmente en las definiciones no es preciso especificar
cuál es el término y cuál la definición.
Podemos utilizar el atributo type para cambiar el sistema de numeración de las listas ordenadas
(los valores soportados por type son: A, a, I y 1, que es el que toma por defecto) y las viñetas en
las listas desordenadas (los valores soportados son: cicle, disc y square). Sin embargo el cambio
de estas propiedades son parte del diseño por lo que no sería correcto su uso en un documento
strict. Más adelante veremos que con el uso de hojas de estilo CSS, podremos usar aún más
tipos, y manteniendo la correcta separación del contenido y el diseño del documento.
<ol type="a">...</ol>
<ul type="circle">...</ul>
<ol type="A">...</ol>
<ul type="disc">...</ul>
<ol type="I">...</ol>
<ul type="square">...</ul>
<ol type="1">...</ol>
Una técnica muy interesante es el anidamiento de listas, en la que una lista puede ser un item de
otra lista de cualquier otro tipo.
<ol> 1. Agua mineral.

<li>Agua mineral.</li>
<li>Café, té e infusiones</li> 2. Café, té e infusiones
<li>Refresco con o sin gas</li> 3. Refresco con o sin gas
<li>Zumo de frutas.</li>
<li>Combinados: 4. Zumo de frutas.
<dl> 5. Combinados:
<dt>Sangría</dt>
<dd>Vino, canela y frutas. </dd> Sangría
<dt>Gazpacho</dt> Vino, canela y frutas.
<dd>Hortalizas trituradas.</dd>
<dt>Batido</dt> Gazpacho
<dd>Leche, frutas y helados.</dd> Hortalizas trituradas.
</dl>
</li> Batido
<li>Aperitivos: Leche, frutas helados.
<ul>
<li>Cerveza.</li> 6. Aperitivos:
<li>Martini.</li> o Cerveza.
<li>Tinto de verano.</li>
<li>Vinos: o Martini.
<ol> o Tinto de verano.
<li>Ribera Duero.</li>
<li>Rioja.</li> o Vinos:
<li>Jerez.</li> 1. Ribera Duero.
<li>Cava</li>
<li>Chacolí.</li> 2. Rioja.
<li>Sidra.</li> 3. Jerez.
<li>Lambrusco.</li>
<li>Riveiro.</li> 4. Cava
</ol> 5. Chacolí.
</li>
</ul> 6. Sidra.
</li> 7. Lambrusco.
</ol>
8. Riveiro.
Con la técnica de anidamiento podemos estructurar las páginas de modo que el usuario reciba
información de la página antes incluso de leerla.
TABLAS
Otra forma de estructurar la información en las páginas es mediante el uso de tablas. Las tablas
son una interesante herramienta para el marcado de información tabular, otros usos y abusos
(como maquetación y diseño) se desaconsejan encarecidamente. De nuevo: mantener por
separado, el diseño del contenido.
Podemos representar tablas con o sin borde, con una fila, o una columna, o con varias de cada
una de ellas. Incluso podemos crear tablas dentro del contenido de una celda de otra tabla, con lo
que conseguimos representar tablas multidimensionales, que en determinadas situaciones puede
ser especialmente útil.
Tabla de una sola fila y varias columnas, con y sin borde:

<table border=0> <table border=1>
<tr> <tr>
<td>Lunes.</td> <td>Lunes.</td>
<td>Martes.</td> <td>Martes.</td>
<td>Miércoles.</td> <td>Miércoles.</td>
<td>Jueves.</td> <td>Jueves.</td>
<td>Viernes.</td> <td>Viernes.</td>
</tr> </tr>
</table> </table>
Tabla de una sola columna y varias filas, con y sin borde:

<table border='0'> <table border='1'>
<tr> <tr>
<td>Primer Trimestre.</td> <td>Primer Trimestre.</td>
</tr> </tr>
<tr> <tr>
<td>Segundo Trimestre.</td> <td>Segundo Trimestre.</td>
</tr> </tr>
<tr> <tr>
<td>Tercer Trimestre.</td> <td>Tercer Trimestre.</td>
</tr> </tr>
</table> </table>
Estos ejemplos son de una sola dimensión (una fila o una columna), pero evidentemente podemos
construir tablas de dos dimensiones, por ejemplo el siguiente ejemplo muestra cuatro filas con
seis columnas cada una de ellas, con borde sencillo:
<table border='1'>
<tr>
<td>Trimestres / Dias</td>
<td>Lunes.</td>
<td>Martes.</td>
<td>Miércoles.</td>
<td>Jueves.</td>
<td>Viernes.</td>
</tr>
<tr>
<td>Primer Trimestre.</td>
<td>1.</td>
<td>2.</td>
<td>3.</td>
<td>4.</td>
<td>5.</td>
</tr>
<tr>
<td>Segundo Trimestre.</td>
<td>6.</td>
<td>7.</td>
<td>8.</td>
<td>9.</td>
<td>10.</td>
</tr>
<tr>
<td>Tercer Trimestre.</td>
<td>11.</td>
<td>12.</td>
<td>13.</td>
<td>14.</td>
<td>15.</td>
</tr>
</table>
También es posible incluir tablas como contenido de una celda, de ese modo ganamos
profundidad y simulamos múltiples dimensiones. En el siguiente ejemplo incluimos una tabla
como contenido de las casillas 1, 10 y 12.
<table border='1'>
<tr>
<td>Trimestres / Dias</td>
<td>Lunes.</td>
<td>Martes.</td>
<td>Miércoles.</td>
<td>Jueves.</td>
<td>Viernes.</td>
</tr>
<tr>
<td>Primer Trimestre.</td>
<td>1.
<table border='1'>
<tr>
<td>mañana.</td>
<td>tarde.</td>
<td>noche.</td>
</tr>
</table>
</td>
<td>2.</td>
<td>3.</td>
<td>4.</td>
<td>5.</td>
</tr>
<tr>
<td>Segundo Trimestre.</td>
<td>6.</td>
<td>7.</td>
<td>8.</td>
<td>9.</td>
<td>10.
<table border='1'>
<tr>
<td>mañana.</td>
</tr>
<tr>
<td>tarde.</td>
</tr>
<tr>
<td>noche.</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Tercer Trimestre.</td>
<td>11.</td>
<td>12.
<table border='1'>
<tr>
<td>F1 C1.</td>
<td>F1 C2.</td>
<td>F1 C3.</td>
</tr>
<tr>
<td>F2 C1.</td>
<td>F2 C2.</td>
<td>F2 C3.</td>
</tr>
<tr>
<td>F3 C1.</td>
<td>F3 C2.</td>
<td>F3 C3.</td>
</tr>
</table>
</td>
<td>13.</td>
<td>14.</td>
<td>15.</td>
</tr>
</table>
IMÁGENES
Además de texto, podemos incorporar al contenido de nuestros documentos XHTML archivos de

imágenes que pueden contener fotografías, dibujos, diagramas, etc.
Hay una seria discusión acerca de que formato de imágenes es conveniente utilizar para el
empleo en la Web, que incluye temas variados y complejos cómo: algoritmos de compresión de
imágenes, patentes, calidad, y compatibilidad. Existen tres formatos principales de imagen para
su utilización en la Web (GIF, JPG y PNG), para conocer algo más de cada uno de ellos te
recomiendo que consultes los siguientes artículos de la Wikipedia:
• PNG. (Portable Network Graphics) formato gráfico basado en un algoritmo de
compresión sin pérdida para mapas de bits no sujeto a patentes.
• JPEG. (Joint Photographic Experts Group) es un algoritmo diseñado para comprimir
imágenes con 24 bits de profundidad o en escala de grises.
• GIF. (Compuserve GIF o Graphics Interchange Format) es un formato gráfico utilizado
ampliamente en la World Wide Web, tanto para imágenes como para animaciones.
El elemento para insertar imágenes es img. Su principal atributo es src (source). Este atributo
lleva como valor la dirección (relativa o absoluta) de la ubicación de la imagen.
Ejemplo de uso de img:
<img src="colores.png" alt="Colores para mezclar." />
El atributo alt, este debe explicar en palabras el contenido de la fotografía. Los navegadores
basados en texto mostrarán el valor del atributo en vez de la imagen, otros para no videntes
podrían leer y reproducir con un sintetizador el valor del atributo. Es muy recomendable su uso,
ya que además si la imagen por cualquier motivo no puede ser mostrada, se presentará el valor de
alt en su lugar.
Un comportamiento similar presenta el atributo title, que muestra una pequeña etiqueta con el
texto especificado, cuando el puntero se detiene sobre la imagen.
<img src="colores.png"
alt="Colores para mezclar."
title="Amarillo, Azul y Rojo" />
También es posible ajustar el tamaño de la imagen al contenido de la página cambiando los

atributos de ancho (width) y alto (height).
title="Amarillo, Azul y Rojo"
width="100"
height="100" />
Si se ausenta alguno de estos dos atributos, el otro se ajusta automáticamente, manteniendo el

aspecto proporcionado de la imágen.
width="100" />
También podemos deformar una imagen forzando los valores de estos atributos.
width="300"
height="100" />
El elemento img también soporta los atributos align (situación horizontal; izquierda, centrada o
derecha) y valign (situación vertical; arriba, media o baja) aunque su uso no es recomendado, y
es mejor utilizar la propiedad float de CSS. Sin embargo esta propiedad aún no es soportada por
todos los navegadores.
width="100"
align="left"
valign=”middle” />
width="100"
align="right"
valign=”top” />
width="100"
align="center"
valign=”middle” />
width="100"
align="left"
valign=”bootom” />
Es preferible utilizar el atributo style para acomodar las imágenes en nuestra página, porque
presenta mayores posibilidades, entre ellas podemos destacar float para alineación:
style=“float:left” o también style=“float:right”
HIPERENLACES
Los enlaces son los que hacen que naveguemos por la Web, es decir que vayamos saltando por
diferentes páginas de un mismo sitio, o de sitios externos. La etiqueta utilizada para crear un
vínculo es a (ancla o anclaje).
No necesariamente un enlace apuntará a una página Web, puede por ejemplo apuntar a una
imagen, a cualquier otro tipo de archivo, a un correo electrónico o incluso puede apuntar a hacia
otros sectores de la misma página (previamente marcando estos sectores).
Veamos un ejemplo sencillo:
<a href="http://www.misitio.com">Ejemplo</a>
En el navegador lo que veremos será: Ejemplo. La dirección http://www.misitio.com es el valor

del atributo href, la palabra Ejemplo, encerrada entre <a> y </a>, es lo que suele llamarse el
“anchor text” y es el contenido que será visible en el navegador.
Para crear un enlace hacia un correo electrónico debemos apuntar en el valor del atributo href
hacia una dirección de correo electrónico, pero es importante agregar al principio de la
dirección el mailto: que vendría a representar el protocolo (http://, ftp://, etc).
Ejemplo:
<a href="mailto:micorreo@misitio.com">Correo de ejemplo</a>
Como en el caso anterior, veremos en nuestro navegador: Correo de ejemplo. Si prueban el enlace
seguramente su navegador disparará el cliente de correo por defecto.
Si quieres saber más sobre que URLs puedes poner en el valor del atributo href puedes leer el
artículo de la Wikipedia, Uniform Resource Locator.
Muchas veces para enlaces entre páginas del mismo sitio y que tengan el mismo dominio, no
hace falta utilizar enlaces absolutos. Por ejemplo si estamos en la página www.ejemplo.com y
queremos enlazar con un documento que se encuentra en un subdirectorio a
www.ejemplo.com/tema5/Apartado1.html podemos crear un enlace de la siguiente manera:
<a href="tema5/apartado1.html">Apartado 5.1</a>
Hay que destacar que en este caso hacer enlaces absolutos (escribiendo la dirección completa)
funcionará también.
NOTA: Algunos buscadores recomiendan utilizar enlaces absolutos siempre que

sea posible, para mejorar la indexación por parte de sus motores.
También podemos crear marcas (algunos las llaman anclas) y enlaces para poder navegar en la
misma página, sistema muy útil para crear un índice entre documentos largos.
La marca se realiza mediante el atributo id o name de la etiqueta a:
<h2> <a id="punto1"/> Apartado 1. Introducción. </h2>
<h2> <a name="punto1"/> Apartado 1. Introducción. </h2>
Algunos navegadores no reconocen el atributo id dentro de los hiperenlaces, por lo que se

recomienda el uso de name para esta situación.
Hemos establecido un ancla llamada punto1 a la altura del título Apartado1 ahora nos hará falta
colocar un enlace desde otro sector de la página que apunte hacia esa ancla. Para esto:
<a href="#punto1"> Ir a la Introducción del tema. </a>
Es preciso destacar la presencia de la almohadilla (#), para indicar que se trata de un enlace
dentro del mismo documento.
La etiqueta a tiene un atributo de importante valor semántico, title. Este atributo sirve para
especificar una pequeña descripción del sitio al que estamos enlazando, en forma de pequeña
etiqueta amarilla con el valor de este atributo cuando el usuario se detiene con el ratón sobre el
enlace.
<a href="#punto1" title=”Enlace al Punto 1” > Ir a la Introducción. </a>

EJERCICIOS:
1º/ Construye una página Web XHTML (TextoEj1TuNombre.html) con el texto de un

diálogo, entre dos personajes que forman parte de un chiste. El título principal del chiste irá en
<h1>, el texto del narrador irá en texto normal (entre párrafos <p>), el de un personaje con
<address> y el de otro con <code>, (también dentro de párrafos). Al final debes firmar con tu
nombre y apellidos dentro de la etiqueta <cite>.
2º/ Construir una página Web con código XHTML (ListaEj2TuNombre.html), con el título
LISTAS en <h1>, que construya tres listas, una de cada tipo:
- Una ordenada con los diez libros que has leído, por orden de preferencia. El primero será
el preferido.
- Otra de viñetas con al menos cinco películas que has visto últimamente.
- Y una con definiciones de utensilios que podemos encontrar habitualmente en la cocina,
explicando cuál es su utilidad.
Recuerda firmar con tu nombre y apellidos dentro de la etiqueta <cite>.
3º/ Crear un documento XHTML (TablaEj3TuNombre.html), con título GASTOS

SEMANALES en <h1>, que utilice una tabla de dos dimensiones para representar los gastos
semanales que tienes, especificando imprescindibles y extras para cada día de la semana, puedes
seguir el modelo del siguiente ejemplo:
Tipo LUN MAR MIE JUE VIE SAB DOM
Imprescindibles 2 2 2 2 2 0 5
Extras 0 1 3 0 15 15 5
Al pie del documento firma con tu nombre y apellidos dentro de la etiqueta <cite>.
4º/ Busca en Internet cinco imágenes relacionadas con el deporte (cualquier tipo de deporte) y
crea una página Web (ImagenEj4TuNombre.html) en la que aparezca cada una de las
imágenes dos veces, con diferentes tamaños y sin perder la proporcionalidad. Junto a cada
imagen debe aparecer un texto comentando su contenido, utiliza para ello el atributo style en cada
una de ellas. No olvides firmar con tu nombre y apellidos dentro de la etiqueta <cite>.
5º/ Construye un documento (IndiceEj5TuNombre.html) a modo de índice con enlaces a

cada uno de los ejercicios anteriores y cinco enlaces de Internet a páginas relacionadas con
vacaciones, pueden ser destinos turísticos, viajes, hoteles, etc. Cada enlace debe ir acompañado
de un texto indicando qué podemos encontrar en el mismo o explicando para qué es útil. Firma
con tu nombre y apellidos dentro de la etiqueta <cite>.
6º/ Crea un documento (TotalEj6TuNombre.html) que contemple todos los elementos

utilizados en los ejercicios anteriores. El tema será la historia de España y mostrará una lista con
cinco ítems, una tabla de dos dimensiones, dos imágenes, cinco enlaces y texto que explique lo
que se pretende en cada uno de los citados elementos, debes utilizar al menos tres estilos
diferentes sobre el texto. Firma con tu nombre y apellidos dentro de la etiqueta <cite>.
Enlaces sobre el tema en Internet:
XHTML
Manual XHTML
http://manual-xhtml.blogspot.com/
XHTML Básico. Manual del SIDAR

http://www.sidar.org/recur/desdi/traduc/es/xhtml/xhtml-basic.html
Guía Breve del XHTML. Del W3C

http://www.sidar.org/recur/desdi/traduc/es/xhtml/xhtml-basic.html
Guía de referencia XHTML. Del W3C

http://www.w3c.es/Divulgacion/GuiasReferencia/XHTML1/
Introducción a XHTML. LibrosWeb.

http://www.librosweb.es/xhtml/
Validador XHTML. Para comprobar si una página cumple con las normas de código XHTML.
http://validator.w3.org/

XHTML

Загружено:

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

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

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

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

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

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

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

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

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

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

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

XHTML

Загружено:

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

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

XHTML

REGLAS DEL XHTML

1. Un documento no puede tener etiquetas abiertas, deben ir acompañadas de su

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

o Marcos (Frameset). Se trata de una variante de la transicional, que permite la

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”

<?XML version=”1.0” encoding=”iso-8859-1”?>

Si el DTD no es estricto es recomendable incluir la siguiente meta:

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1” />

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”sp” lang=”sp” >

Definir el autor del documento

Definir el programa con el que se ha creado el documento

<meta name="generator" content="WordPress 2.4.4" />

Definir la codificación de caracteres del documento

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

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

Definir el copyright del documento

<meta name="copyright" content="misitio" />

Definir el comportamiento de los buscadores

<meta name="robots" content="index, follow" />

Definir las palabras clave que definen el contenido del documento

<meta name="keywords" content="diseño, css, hojas de estilos, web, html" />

Definir una breve descripción del sitio

<meta name="description" content="Artículos sobre diseño web, usabilidad y

Finalmente otras etiquetas utilizadas en la cabecera de la página Web son:

<link rel="stylesheet" href="#" type="text/css" media="screen" />

<link rel="alternate" type="application/rss+xml" title="RSS" href="#" />

UN PRIMER DOCUMENTO XHTML.

<?xml version="1.0" encoding="ISO-8859-1"?>

<?xml version="1.0" encoding="ISO-8859-1"?>

Etiquetas de línea: mantienen el formato de la línea tras su uso.

Etiquetas de bloque: cuando se utilizan cambia de línea.

Listas numeradas Listas de viñetas Listas de definiciones

1. Manzana o Tomate Zumo

<ol> 1. Agua mineral.

Tabla de una sola fila y varias columnas, con y sin borde:

Tabla de una sola columna y varias filas, con y sin borde:

Además de texto, podemos incorporar al contenido de nuestros documentos XHTML archivos de

<img src="colores.png" alt="Colores para mezclar." />

También es posible ajustar el tamaño de la imagen al contenido de la página cambiando los

Si se ausenta alguno de estos dos atributos, el otro se ajusta automáticamente, manteniendo el

Veamos un ejemplo sencillo:

En el navegador lo que veremos será: Ejemplo. La dirección http://www.misitio.com es el valor

<a href="mailto:micorreo@misitio.com">Correo de ejemplo</a>

<a href="tema5/apartado1.html">Apartado 5.1</a>

NOTA: Algunos buscadores recomiendan utilizar enlaces absolutos siempre que

La marca se realiza mediante el atributo id o name de la etiqueta a:

<h2> <a id="punto1"/> Apartado 1. Introducción. </h2>

<h2> <a name="punto1"/> Apartado 1. Introducción. </h2>

Algunos navegadores no reconocen el atributo id dentro de los hiperenlaces, por lo que se

<a href="#punto1"> Ir a la Introducción del tema. </a>

<a href="#punto1" title=”Enlace al Punto 1” > Ir a la Introducción. </a>

1º/ Construye una página Web XHTML (TextoEj1TuNombre.html) con el texto de un

3º/ Crear un documento XHTML (TablaEj3TuNombre.html), con título GASTOS

5º/ Construye un documento (IndiceEj5TuNombre.html) a modo de índice con enlaces a

6º/ Crea un documento (TotalEj6TuNombre.html) que contemple todos los elementos

XHTML Básico. Manual del SIDAR

Guía Breve del XHTML. Del W3C

Guía de referencia XHTML. Del W3C

Introducción a XHTML. LibrosWeb.

Вам также может понравиться