[XHTML] XHTML desde cero

Introducción:

Este es el primer artítulo de un tutorial que cubre cómo realizar webs usando una de las tecnologías estándares del W3C: el XHTML. En este mismo blog iré escribiendo también tutoriales de CSS, que es la otra tecnología necesaria para hacer páginas web.

Para entender este tutorial no hace falta tener conocimientos previos, así que lo único que necesitas es:

• Un editor de texto plano: si usas Windows, te sirve el Bloc de Notas. Ten cuidado con algunos procesadores de texto como el Word, ya que da formato (negritas, fuentes, etc) al código y no queremos eso. Si usas Linux, tienes muchas alternativas: Kate, Vim, Emacs, Joe, etc.



• Un navegador que funcione bien y cumpla los estándares: el Firefox, por ejemplo. Es multiplataforma, libre, y muy bueno.



• Un navegador que funcione mal, tenga todo el mundo, y pase de los estándares. Quien-tú-ya-sabes (su nombre está escrito en la Lengua Negra, que no pronunciaré aquí).

Es muy recomendable que tengas a mano un navegador y el editor de texto para ir probando en el acto los ejemplos que aparecen aquí. Escribir código es la única manera de aprender.

¿Qué es el XHTML?

XHTML significa eXtensible HyperText Markup Language y es la versión modernizada del clásico HTML, pero compatible con XML.

Es un lenguaje semántico, lo que quiere decir que definimos qué significan las cosas en lugar de qué aspecto tienen. Por ejemplo, si tenemos el título de nuestra página, en lugar de decir "Lo quiero grande y con letras rojas", le indicamos al navegador que "Este es el título de la página. Haz algo para que destaque". Y no nos importa nada qué es ese "algo".

Bueno, en realidad sí que nos importa, pero es que el aspecto de las cosas las controlamos mediante las hojas de estilo (CSS).

¿Y eso del CSS?

CSS son las siglas de Cascading Style Sheets y son un regalo del cielo. Si el documento XHTML está bien estructurado, podemos cambiar totalmente su apariencia sin tocar ni una sola línea de código en el archivo .html. Esto nos permite separar el contenido del aspecto, y es de gran importancia.

Si quieres ver un ejemplo de cómo con el mismo código XHTML y diferentes hojas de estilo se consiguen resultados radicalmente diferentes, puedes echar un vistazo al Zen Garden o al Proyecto Camaleón.

¿Cómo funciona el XHTML?

XHTML está basado en etiquetas. Una etiqueta tiene esta forma:

<etiqueta>Aquí algo dentro</etiqueta>

Volvemos al ejemplo anterior de nuestro título: la etiqueta para poner el título principal en la página es <h1>. Entonces nos quedaría:

<h1>What is the Matrix?</h1>

Como ves, <h1> marca el inicio de la etiqueta, mientras que </h1> se encarga de cerrarla. Sin embargo, hay etiquetas que funcionan con una sola parte, y son así:

[color=green]<etiqueta />[/color]

Observa el espacio en blanco que hay entre el nombre de la etiqueta y la barra /. Es muy importante para que los navegadores antiguos no se vuelvan locos.

Hay etiquetas que pueden modificarse mediante atributos. Ahora mismo no hace falta entender qué hacen, ya lo veremos más adelante. Sólo quédate con cómo van escritos:

<etiqueta atributo="valor">

Por último, un par de reglas que siguen las etiquetas: siempre en minúsculas y los atributos entre comillas. Esto es una diferencia respecto al HTML, ya que con él podíamos poner atributos con o sin comillas y no importaba si escribíamos en mayúsculas o minúsculas.

¿Pero para hacer webs no se usa el Frontpage?

Sí. También puedes freir huevos con aceite para el coche.

Mi amigo que es diseñador usa el Dreamweaver

El Macromedia Dreamweaver es un editor WYSIWYG muy extendido. Y bastante bueno, por cierto. El problema es que nos permite hacer webs sin tocar nada de código.

Sí, eso es un problema. Genera código basura y no tenemos control sobre lo que hacemos. Así que antes de usar Dreamweaver o algo similar, tenemos que aprender a hacer las webs nosotros solos. Que quede claro que es mi opinión y no Ley Divina (todo se andará  ).

Una preguntilla...

¿Has mirado primero en Google? 
Es muy listo y lo sabe (casi) todo. Si aun así no te aclaras, puedes dejar un comentario en alguno de los posts del tutorial o escribirme un e-mail. Es mejor que escribas un comentario, porque así todos lo vemos y todos aprendemos.


XHTML de una maldita vez II: Estructura de un documento XHTML

Este capítulo es tremendamente aburrido, pero muy importante. No es muy largo, así que presta atención. Ahora aprenderemos a formar el esqueleto de nuestros archivos para poder usarlo más adelante a modo de plantilla.

La codificación

La primera línea que debemos tener en nuestro documento XHTML es la que marca la codificación. ¿Qué es esto? Simplemente el formato en el que guardamos nuestro archivo. La codificación estándar es la Unicode (UTF-8) y soporta caracteres de todas las lenguas: occidentales, griegos, chinos, árabes, japoneses, coreanos...). Asegúrate de que el editor de textos que uses te guarda el archivo en formato Unicode (si usas Bloc de Notas, puedes elegir la codificación en el cuadro de diálogo de Guardar como...). Al grano, tenemos que escribir esto:

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

Esta línea tiene que aparecer al principio de todo el documento, antes que ninguna otra. Lo que pasa es que da problemas si trabajamos con PHP. Si usas un script PHP, la etiqueta que marca el inicio del script puede ser <?, así que los navegadores se hacen un lío. ¿La solución? Podemos omitir esa línea del principio y declarar la codificación dentro de la sección HEAD (ahora veremos qué es eso). Si elegimos esto último, la línea a incluir dentro de HEAD sería:

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

Escoge la opción que quieras, pero sólo una. Obviamente no somos masocas, así que no nos tenemos que aprender esto de memoria. Simplemente, copia y pega.

El DOCTYPE

El DOCTYPE se encarga de decirle al navegador qué demonios contiene el archivo que está abriendo. El DOCTYPE se pone a continuación de la codificación (si elegimos ponerla arriba del todo) o al principio del documento (si elegimos poner la codificación dentro del HEAD). En cuanto a nuestro DOCTYPE, nosotros usaremos la especificación XHTML 1.0 Strict, que es esta (existen otras):

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

Como ves, esta etiqueta no lleva la barra / de cierra. Es la única, así que no te malacostumbres. Por motivos de espacio en el blog, la línea del DOCTYPE aparece cortada. No importa, porque el navegador interpreta los saltos de línea en el código como espacios en blanco. En realidad, podríamos escribir todo el archivo XHTML en una sola línea. O cada palabra en una línea diferente.

Después del DOCTYPE, tenemos a la cabecera y al cuerpo encerrados entre las etiquetas

<html>

y

</html>

El elemento raíz (HTML)

Después del DOCTYPE, viene nuestro documento, que tiene que ir dentro de la etiqueta <html>. Pero en esa etiqueta tenemos que indicar una serie de cosas, como que nuestro documento es XHTML y la lengua que utilizamos. Si escribimos en castellano, nos quedaría así:

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

Las letras es son el código de la lengua castellana. Las otras lenguas del Estado son: ca (catalán), gl (gallego) y eu (vasco). Puedes consultar el listado entero de códigos en esta página. Ah, y si tienes la desgracia de ser trekkie, puedes escribir en tu lengua con el código x-klingon (¡exigimos quenya ya!).

La cabecera (HEAD)

La cabecera contiene información que no forma parte del contenido de la página en sí, como el título, vínculos a hojas de estilos CSS, información para robots de búsqueda, scripts, etc. Por ahora nos quedaremos sólo con el título de la página. La cabecera va encerrada entre <head> y </head>, mientras que para el título usamos la etiqueta <title>:

<head>
<title>Título de la web</title>
</head>

El cuerpo (BODY)

Por último, nos encontramos con el cuerpo, que va dentro de <body> y </body>, y que contiene toda la "chicha" de nuestra web. Quedaría tal que así:

<body>
Aquí va el contenido
</body>

Nuestra plantilla

Haciendo una recopilación, tendríamos algo tal que así:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="es" lang="es">

<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Título de la web</title>
</head>

<body>
Aquí va el contenido
</body>

</html>