Inicio > Artículos > Manuales de Diseño > CSS

CSS

2. ESTRUCTURA XHTML

2.1. La codificación

La primera línea que debemos tener en un documento XHTML es la que marca la codificación. El 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… )

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).

Hay que escribir esto:
<?xml version ="1.0" encoding="UTF-8" ?>

La línea anterior tiene que aparecer al principio de todo el documento, antes que ninguna otra. Si usas PHP, la etiqueta que marca el inicio del script puede ser <?, así que los navegadores se hacen un lío. 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.

2.2. El DOCTYPE

Lo siguiente que toca es indicar el DOCTYPE. Se encarga de decirle al navegador qué 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.w3c.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>.

2.3. 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

2.4. 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

2.5. El cuerpo (BODY)

Por último, nos encontramos con el cuerpo, encerrado entre <body> y </body>, y que contiene toda la Información que de mostrará en el navegador. Quedaría así:

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

2.6. La plantilla

Recopilando todo, nos quedaría algo como esto:

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