Comunidad de diseño web y desarrollo en internet

Estructura XHTML

La ciencia es aquello que entendemos lo suficiente como para explicárselo a un ordenador. El arte es todo lo demás.
Prólogo de A=B Donald Knuth, científico de la computación

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 un documento XHTMl es la que marca la codificación. ¿Qué es esto? Simplemente formato en el que se guardan los caracteres en el archivo. La codificación estándar es la Unicode (utf-8) y soporta caracteres de todas las lenguas: occidentales, griegos, chinos, árabes, japoneses, coreanos... )

Existen multitud de codificaciones, en su mayoría Criaturas del Mal. Deberías usar siempre la Unicode. ¿La razón? Échale un vistazo a este apéndice.

Asegúrate de que el editor de textos que uses te guarda el archivo en formato Unicode (normalmente es una opción a elegir en el cuadro de diálogo de Guardar como).

Al grano, hay que escribir esto:

No somos masocas, así que no nos lo tenemos que aprender de memoria. Simplemente copia y pega.

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

Esa etiqueta es de XML, por eso tiene esa forma tan “rarita”. No volveremos a usar ese tipo de etiquetas en nuestro documento. La línea anterior tiene que aparecer al principio de todo el documento, antes que ninguna otra. Lo que pasa es que da problemas si trabajamos con PHP3. Si usas 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 del head sería:

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

Escoge la opción que quieras, pero sólo una. Por cierto, por motivos de espacio, la línea aparece cortada. No importa, porque el navegador interpreta los saltos de línea como si fueran 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.

Y por cierto, muchos espacios en blanco seguidos se interpretan como si sólo hubiera uno.

El DOCTYPE

Lo siguiente que toca es indicar el DOCTYPE. Se encarga de decirle al navegador qué demonios contiene el archivo que está abriendo. Nosotros usaremos la especificación XHTML 1.0 Strict, que es esta:

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

Después del DOCTYPE tenemos a la cabecera y al cuerpo encerrado entre las etiquetas <html> y </html>.

El elemento raíz (HTML)

El resto de nuestro documento tiene que ir dentro de la etiqueta <html>. Pero en esa etiqueta debemos indicar una serie de cosas, como que nuestro documento es XHTML y qué lengua estamos usando. 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. Podéis ver algunos otros códigos en la siguiente tabla.

Los trekkies pueden escribir en su lengua con el código x-klingon. ¡Exigimos quenya ya!

Lengua Código
Castellano es
Catalán ca
Gallego gl
euskera eu
   
Inglés en
Francés fr
Alemán de
Japonés ja

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>. El título de la web aparece en la barra de título de la ventana del navegador, es el nombre por defecto que aparece si añadimos a favoritos la página, etc. Quedaría así:

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

El sangrado no es obligatorio, pero sí que viene muy bien para aclararnos con el código

El cuerpo (BODY)

Por último, nos encontramos con el cuerpo, encerrado entre <body> y </body>, y que contiene toda la “chicha”. Quedaría tal que así:

<body>
Aquí va el cuerpo de la web
</body>

La plantilla

Recopilando todo, nos quedaría algo como esto:

<!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>
<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>

Y está pidiendo a gritos que guardes una copia en un archivito llamado plantilla.html para usos posteriores.

 

Información adicional

Contenido publicado bajo licencia Creative Commons. Belén Albeza (BenKo)

Si tienes alguna pregunta de este ejemplo; puedes hacerla aqui en los foros.