• 1. Introducción
• 2. Fichero XHTML, editor y navegador web
• 3. Etiquetas
• 4. Primer documento XHTML
• 5. Ejemplo

1. Introducción

XHTML significa lenguaje de marcado de hipertexto extendido.

Se utiliza para generar documentos y contenidos de hipertexto generalmente publicados en la WEB. Es además una reformulación del lenguaje HTML que se puede jactar de ser ahora compatible con XML.

Un lenguaje de marcado nos permite dejar indicaciones (marcas) en un documento que sirven para diferenciar distintos tipos de contenidos, estructuras o secciones. Por ejemplo hay marcas (elementos, etiquetas) que pueden "marcar" qué es un título, y su lugar en una jerarquía de importancia, o advertir que una palabra debe estar enfatizada, o bien que una oración es además un enlace hacia otro recurso.

Todo esto, es posible de marcar sin ambiguedades con el correcto uso de XHTML.

Otra de sus virtudes es que está ideado para mantener una saludable separación entre el contenido y el diseño. Es decir, que uno no afecte al otro, y se puedan modificar independientemente.

A medida que avancen y conozcan la aplicación de CSS (hojas de estilo) a los documentos notarán tal separación de manera evidente.

El XHTML está diseñado para que sea funcional no sólo a los navegadores sino a varios dispositivos WEB (teléfonos móviles, portátiles, etc). A lo largo de este manual haremos uso del término agente de usuario para referirnos a estos dispositivos capaces de interpretar documentos XHTML.

Antes de seguir puedes recorrer estos enlaces en la Wikipedia para tener una introducción más amplia y conocer algo sobre la historia de estos lenguajes:

• Lenguajes de Marcado
• SGML
• HTML
• XML
• XHTML
• CSS
• W3C (World Wide Web Consortium)

NOTA: A lo largo de éste manual muchas palabras apuntarán a la enciclopedia libre Wikipedia y a otros sitios, en un intento de poder ofrecer mayor información o ampliar explicaciones sobre temas y conceptos que escapan al alcance de los objetivos de este manual.

2. Fichero XHTML, editor y navegador web

El fichero de un documento XHTML, en sí, es un archivo de texto plano generalmente con alguna de estas extensiónes: .html, .htm, o bien .xhtml. Los agentes de usuario interpretan estos archivos y procesan el código para mostrarlos en pantalla.

Es conveniente que a medida que aparezcan ejemplos, practiquen escribiendo sus propios documentos XHTML. Pueden editar los ficheros utilizando un editor de textos planos y para poder visualizar los resultados del documento un navegador web (o cualquier otro agente de usuario que interprete XHTML).

Utilicen el editor que ustedes quieran, y al guardarlo se recomienda elegir algunda de estas extensiones, para que su sistema operativo reconozca rápidamente el tipo de fichero (.html, .htm, .xhtml.)

La elección del agente de usuario es menos trivial y se presta a discusión ya que por ejemplo algunos navegadores no cumplen de manera apropiada con los estándares (recomendaciones) que la W3C propone y que intenta respetar este manual.

Personalmente opto por elegir Mozilla Firefox o Konqueror, puedes utilizar el que tú quieras pero asegurate de que cumpla minimamente con los estándares para que los ejemplos aquí presentados funcionen de manera apropiada.

3. Etiquetas

En la escritura de los documentos nos valdremos de etiquetas (marcas) como principal elemento de sintaxis, que para diferenciarse del contenido, están encerradas por paréntesis angulares.

Ejemplo del uso de etiquetas, con el elemento p (párrafo):

<p>Contenido del parrafo</p>

<p> marca el inicio de la sección que contendra un párrafo, </p> marca el final del párrafo. Toda etiqueta abierta debe ser cerrada escribiendose de nuevo con el agregado de una barra entre la palabra y el parentesis de angular de apertura.

Algunos elementos que no llevan contenido se nos permite escribirlos de manera tal que la apertura y el cierre se representan con una única etiqueta. El elemento br utilizado para el salto de línea, se puede escribir así <br /> que es una simplificación de la forma también válida: <br></br>.

NOTA: Es importante notar el espacio que queda entre el fin de la palabra y la barra, en la versión resumida, de esta manera se conserva compatibilidad con algunos agentes de usuario que no reconocen la etiqueta sin ese espacio.

Las etiquetas de apertura pueden contener atributos que especifican características particulares de ésta. Los atributos tienen un nombre seguido de un igual y entre comillas el valor de tal atributo.

Ejemplo del elemento a con atributos:

<a href="http://www.example.com">Example</a>

La etiqueta es <a>, el atributo es href y el valor es http://www.example.com. Con esta etiqueta se construyen los vínculos. Tanto los elementos, cómo los atributos y valores, deben escribirse en letras minúsculas. Los valores de los atributos van obligatoriamente entre comillas (incluso cuando estos valores sean números).

Los elementos soportan anidamiento (con algunas condiciones que ya conoceremos).

Ejemplo de anidamiento con los elementos a e img:

<a href="http://www.example.com"><img src="ejemplo.gif"/></a>

El enlace que en el ejemplo anterior se lo habíamos aplicado a la palabra Example ahora se lo aplicamos a una segunda etiqueta ( img ) la cual tiene la finalidad de mostrar imagenes, por lo que que la etiqueta más externa (elemento a) convierte a la imagen en un vínculo.

4. Primer documento XHTML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--Este es un comentario y no sera tomado en cuenta por el navegador -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>Titulo de la pagina</title>
</head>
<body>
<p>Primer documento XHTML, es decir un, Hola mundo</p>
</body>
</html>

Analicemos el código línea a línea:

<?xml version="1.0" encoding="UTF-8"?>

Es una declaración XML, dónde específicamos el atributo enconding con el valor UTF-8. Este debería ser suficiente en la mayoría de los casos. Si quieres conocer el por qué, puedes investigar más sobre: la codificación de caracteres y UTF-8 en la Wikipedia.

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

Este es el encabezado que deberían llevar todos los documentos XHTML1.0 estríctos acordes a las específicaciones de la W3C. Es un aviso para que el agente de usuario sepa que tipo de documento va a interpretar. Para ser más específicos diremos que al ser un documento de tipo strict.dtd, los elementos utilizados serán sólo los incluídos en el lenguaje XHTML 1.0. Si utilizaramos etiquetas antiguas y declararamos el documento cómo estricto, no podríamos validar nuestra página XHTML.

NOTA: Fijarse además que hay un salto de línea a la mitad de la etiqueta, este no es interpretado y tampoco lo es en el contenido a menos que lo explicitemos con la etiqueta <br />. Simplemente se incluyen saltos de línea para hacer el código más legible.

Hay otros dos tipos de documentos que mantienen compatibilidad con HTML 4 y soporte de frames, que no tratermos en este manual, ya que prefirero explicar un uso más estrícto del lenguaje.

Declaración de documentos Transitional:

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

Declaración de documentos Frameset:

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

Como dije trataremos de concentrarnos en los documentos declarados como estríctos.

<!--Este es un comentario y no sera tomado en cuenta por el navegador -->

Los comentarios comienzan con <!-- y terminan con --> (los saltos de línea no los quiebran). No son tomados en cuenta por el agente de usuario, es decir no se interpretan (por lo que no se representan) y se utilizan frecuentemente para hacer aclaraciones en el código.

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

Aquí damos comienzo al documento XHTML, todo documento debe llevar esta etiqueta de apertura ( <html> ) y al finalizar debemos escribir la etiqueta de cierre que en el ejemplo se encuentra al final del código ( </html> ). Además aparecen 3 atributos, el primero específica el tipo de documento, y el segundo y el tercero deben llevar como valores el código del lenguaje en el que será escrito. Para la lengua castellana este valor es es. Puedes averiguar los códigos de otras lenguas.

<head>
<title>Titulo de la pagina</title>
</head>

Con la etiqueta de apertura <head>comienza lo que se llama el encabezado de las páginas web, aquí se dan ciertas específicaciones y otra META información acerca del documento que ya veremos con más detalle. Pero entre ellas está el elemento utilizado en el ejemplo, mediante las etiquetas <title></title>, que encierran el título de la página. Los navegadores suelen mostrarlo cómo título de la ventana. También es utilizada por los buscadores cuando presentan resultados de los documentos a sus usuarios.

<body>
<p>Primer documento XHTML, es decir un, Hola mundo</p>
</body>

El cuerpo que comienza con <body> contiene todo el contenido que será representado por el agente de usuario. En nuestro ejemplo sólo utilizamos una etiqueta más, <p> que sirve para encerrar párrafos.

NOTA: Cada elemento puede ser un elemento de bloque o de línea (block e inline respectivamente). p es un elemento de tipo block ya que rompe la línea en el lugar dónde es incluído y crea su propio bloque, agregando un salto de línea por encima y por debajo de sus etiquetas de apertura y cierre. Otros elementos, cómo el elemento strong, son inline ya que pueden insertarse sin romper la línea.

Cerrando el cuerpo (</body>) y el documento XHTML (</html>) conseguimos nuestra primer página.

Al probar el ejemplo sólo veran el texto del párrafo, mas o menos así:

Primer documento XHTML, es decir un, Hola mundo

5. Ejemplo

VER EJEMPLO01.html

NOTA: Haciendo click en el ejemplo consultaran el ejemplo, pero interpretado por el navegador. Pueden descargarlo para ver su código fuente.