Estructura de los Documentos

[anterior] [índice] [siguiente]

Los documentos en formato HTML son un conjunto de elementos anidados. En el nivel más alto nos encontramos el elemento HTML (marca inicial <HTML> y final </HTML>) que consta de dos partes: cabecera y cuerpo.

La cabecera se emplea para proporcionar información acerca del documento, mientras que el cuerpo contiene el texto de la página, es decir, la información que se va a presentar al usuario. En el cuerpo se pueden incluir todo tipo de elementos y marcas.

No es mala idea diseñarse una plantilla para desarrollar siempre a partir de ella. Además del esqueleto de la página (marcas de texto HTML, cabecera y cuerpo) podemos incluir en ella otras informaciones que siempre queramos que aparezcan (tanto comentarios como elementos del cuerpo o la cabecera). Prácticamente todos lo editores específicos permiten el uso de plantillas y macros para introducir información útil, como, por ejemplo, la fecha de la última modificación. La siguiente página puede ser un buen punto de partida:

<!DOCTYPE HTML PUBLIC "-//ITEF//DTD HTML 2.0//EN">  <HTML> <HEAD> <TITLE></TITLE>  </HEAD> <BODY>  <HR> <HR>  </BODY> </HTML>

Los datos adicionales dependerán del autor. La cabecera y pie pueden ser útiles para dar a todas las páginas el mismo aspecto, aunque dependerán de que la persona que escribe las páginas lo considere necesario.

Entraremos ahora en la descripción de los elementos que pueden aparecer en la cabecera y el cuerpo:

Cabecera
Cuerpo
Encabezados
Definición de Bloques
Listas
Marcado Lógico de Frases
Marcado Tipográfico de Frases
Marcado de Anclaje de Hiperenlaces
Imágenes

Cabecera

La cabecera es una colección de información acerca del documento. Las marcas de principio y fin son <HEAD> y </HEAD>.

La cabecera puede contener los siguientes datos, sin importar el orden en que aparezcan:

Título (TITLE). Indica el nombre del documento, los visores lo emplean generalmente como etiqueta de la ventana. Este campo es el único obligatorio en la cabecera.
Dirección de base (BASE). Proporciona una dirección de base para interpretar los enlaces relativos cuando el documento se lee fuera de su contexto (por ejemplo cuando está guardado en un disco).
El documento es un índice (ISINDEX). Si se pone la palabra clave ISINDEX, el cliente interpretará que la página es un índice y permitirá al usuario introducir palabras clave para buscarlas.
Enlaces relacionados (LINK). En la cabecera podemos incluir varios enlaces relacionados con el documento como versiones anteriores, dirección del autor, etc.
Metainformación (META). Este campo sirve para proporcionar información sobre el documento que no pueda ser expresada en los campos anteriores. La información se escribe usando pares nombre/valor que pueden ser empleados para dos propósitos:
1. Proporcionar datos al servidor de HTTP para que genere campos de cabecera (como, por ejemplo, la fecha de caducidad de un documento que se actualiza periódicamente) o,
2. Para que un usuario incluya información adicional sobre el documento, como palabras clave o el nombre del autor.
Para la primera función se emplean atributos del tipo HTTP-EQUIV y para la segunda los del tipo NAME. En ambos casos, el valor se asigna en el campo CONTENT. Un ejemplo del primer caso sería:

<META HTTP-EQUIV ="Expires" CONTENT="Dec 1996">

Y del segundo:

<META NAME="Autor" CONTENT="Plo+Serg">

El atributo NAME se refiere a nombres elegidos al azar por el usuario, mientras que HTTP-EQUIV significa que el valor tiene una cabecera equivalente real en el protocolo HTTP.
Siguiente Identificador (NEXTID). En la actualidad este campo ya no se usa, lo empleaban los editores de HTML para asignar nombres a documentos de forma automática.

Cuerpo

Como ya hemos dicho, el cuerpo contiene el texto de la página que se va a presentar al usuario. Las marcas de principio y fin del cuerpo son <BODY> y </BODY> respectivamente.

A continuación, describiremos los elementos que pueden aparecer en el cuerpo, clasificados por categorías.

Encabezados

Los encabezados se emplean para dividir los documentos en secciones, o más concretamente para marcar los títulos de esas secciones. Las marcas son del tipo <H#>Título</H#>, donde # puede ser un numero cualquiera entre 1 y 6.

Aunque el estándar no lo especifica, es recomendable usar los niveles en orden, es decir, después de un encabezado de nivel uno deberemos usar encabezados de nivel dos para las subsecciones y no saltar directamente al tres o al cuatro, por ejemplo.

La representación de los encabezados depende del visor, generalmente se representan en negrita y van cambiando de tamaño y espacios antes y después, de más a menos, en función del nivel (el nivel uno es el mayor).

Ejemplo:

<H1>Don Quijote de la Mancha</H1> <H2>Capítulo 1</H2> <P>En un lugar de la Mancha de cuyo nombre no quiero acordarme …

Definición de Bloques

Para definir y separar bloques de texto se emplea una serie de marcas que definen párrafos, texto preformateado o bloques con un significado especial como direcciones o citas. También, y aunque no son propiamente para definir bloques, hablamos en este punto de dos marcas especiales, una para representar saltos de línea y otra que inserta una línea horizontal. Ambas permiten dividir el texto, por lo que las hemos incluido aquí.

Las marcas de bloque son:

<P> para separar párrafos. Dado que para el HTML todo el texto es continuo, necesitamos algún mecanismo para indicar el principio y fin de un párrafo. Las marcas inicial y final son <P> y </P>, aunque generalmente sólo se emplea la inicial, terminando el mismo cuando encontramos cualquier elemento que cause un salto de línea.
<PRE> para texto preformateado. Esta marca se emplea para texto escrito en tipo de letra de caja fija (mono-espaciada) y dentro del bloque marcado los saltos de línea sí son respetados. Dentro de estos elementos se pueden emplear anclajes y marcado tipográfico, pero no elementos que definan formato de párrafo (como marcas de párrafo, encabezados, etc.).
El elemento acepta el atributo opcional WIDTH, que indica el máximo número de caracteres por línea para que el visor ajuste el tamaño y tabulación del texto.
Además de la marca PRE existen dos elementos muy similares a él: EXP (ejemplo) y LISTING (listado), que no permiten ningún tipo de elemento anidado. Dado que con PRE podemos obtener el mismo resultado, no es recomendable el uso de estas marcas.
<ADDRESS>, empleada para indicar que un texto representa una dirección o una firma. Generalmente se representa en cursiva y puede estar tabulado.
<BLOCKQUOTE>, que indica que un texto es una cita de otra fuente. Se suele representar con tabulaciones a izquierda y derecha y en cursiva. En sistemas que no permiten representar cursivas se puede emplear algún tipo de símbolo al principio de las líneas, de manera similar a lo que se hace en las réplicas o citas (quote) del correo electrónico.
<BR>. Este elemento sólo tiene marca inicial y se usa para que el visor termine la línea en el punto en el que encuentre el salto.
<HR>. Al igual que la anterior, sólo consta de una marca inicial. Se emplea para presentar una línea horizontal en el texto, ya sea usando caracteres o un gráfico, dependiendo del visor.

Listas

En realidad, también son marcas que permiten definir bloques, pero con características especiales. Las listas se emplean para presentar de forma ordenada una serie de líneas.

En función de su carácter lógico se distinguen los siguientes tipos de lista:

Lista desordenada, <UL> (Unordered List).
Lista ordenada, <OL> (Ordered List).
Directorio, <DIR> (Directory).
Menú, <MENU> (Menu).
Lista de definición, <DL> (Definition List).

Exceptuando las listas de definición, el marcado de las líneas es igual en todos los casos: poniendo <LI> para marcar el principio de cada una, la línea termina cuando aparece un nuevo símbolo <LI> o se cierra la lista.

Para las listas de definición se emplean las marcas <DT> (Definition Term) y <DD> (Definition Data) para cada término y su correspondiente definición. Se pueden poner varios términos antes de una definición (marcas <DT>), pero no dos definiciones para un solo término.

Un ejemplo sería:

Esto es una lista desordenada: <UL> <LI>Primer elemento <LI>Segundo elemento </UL> Esto es una definición: <DL> <DT>Perro <DD>Animal al que el hombre tiene la fea costumbre de morder </DL>

Marcado Lógico de Frases

Existen multitud de marcas para indicar que una palabra o frase tiene una connotación especial.

Los elementos son:

<CITE>, indica que el texto es una cita (por ejemplo, de un título). Generalmente se representa en cursiva.
<CODE>, lo marcado es un ejemplo de código dentro del texto. Se representa usando un tipo de letra de caja fija.
<EM>, denota énfasis. Generalmente se representa con letra cursiva.
<KBD>, indica que el texto se introduce desde el teclado. Se representa usando un tipo de letra de caja fija.
<SAMP>, ejemplo, es decir, una secuencia de caracteres literales. Se representa usando un tipo de letra de caja fija.
<STRONG>, denota énfasis fuerte. Generalmente en negrita.
<VAR>, lugar de una variable, por ejemplo, la que se le pasa a un programa. Se representa usando un tipo de letra de caja fija.

Marcado Tipográfico de Frases

Se usan para indicar explícitamente el formato tipográfico de una palabra o frase.

Los formatos y sus marcas correspondientes son:

Negrita, <B></B>
Cursiva, <I></I>
Texto de teletipo (tipo de letra de caja fija) <TT></TT>

Aunque no están en el estándar, algunos visores pueden soportar otras marcas de formato tipográfico como <STRIKE> (texto tachado) o <U> (subrayado).

Marcado de Anclaje de Hiperenlaces

Un caso especial de marcado es el representado por el elemento <A>, que se emplea para indicar que un texto hace referencia a otro, es decir, está anclado mediante un hiperenlace.

Para el marcado se emplean la marca inicial con atributos, el texto a anclar y la marca final. Los atributos pueden ser:

HREF. El valor es el URI (Uniform Resource Identifier) del anclaje principal de un hiperenlace. El URI se puede referir a otro documento HTML, a un anclaje del mismo documento o a cualquier otro tipo de recurso (FTP, Gopher, etc.).
NAME. Nombra un anclaje para poder ser usado como anclaje principal de un hiperenlace, es decir, el punto nombrado puede ser referenciado desde otro anclaje que emplee el atributo HREF. Por ejemplo, si en el documento test.html incluimos un anclaje <A NAME="indice">Índice</A>, dentro del mismo lo podremos referenciar mediante <A HREF="#indice">Volver al índice</A>. Si queremos referirnos a ese punto dentro del documento desde otro documento que se encuentra en el mismo directorio, la referencia será <A HREF="test.html#indice">índice del test</A>.
TITLE. Sugiere un título para el recurso destino. Este atributo es sólo informativo y puede ser usado para que se visualice al colocarnos sobre el enlace o para nombrar recursos que no incluyen un título, como gráficos.
REL. relaciones descritas por el hiperenlace. El valor es una lista de nombres de relaciones separadas por blancos.
REV. Igual que REL pero en dirección contraria (si A se relaciona con B por X, un enlace de A a B con REL="X" expresa lo mismo que un enlace de B a A con REV="X").
URN. Especifica un identificador para el primer anclaje del hiperenlace. La sintaxis de los URN (Uniform Resource Namer) a_n no está especificada.
METHODS. Especifica métodos a usar para acceder al destino. Se escriben como una lista de palabras separadas por espacios y dependen del tipo de URI. Al igual que el elemento TITLE, son sólo orientativos para el visor.

Imágenes

Para incluir imágenes en documentos HTML se emplea la marca <IMG>. Esta marca puede tener los siguientes atributos:

SRC. Indica la fuente de la imagen, en realidad se trata de un enlace con el documento que contiene la imagen. En la práctica se suelen emplear sólo imágenes en formatos de mapa de bits como gif o jpeg.
ALT. Indica un nombre para referirnos a la imagen si ésta no se representa. Generalmente lo emplean los visores de solo texto o los visores gráficos cuando el usuario selecciona no cargar automáticamente las imágenes. Es el nombre que aparece habitualmente cuando interrumpimos la carga de una página o ésta se corta dejando imágenes sin traer.
ALIGN. Alineación de la imagen respecto al texto, puede tomar los valores: TOP (arriba), MIDDLE (en medio) o BOTTOM (abajo). En general, si no se especifica, los visores asumen BOTTOM.
ISMAP. Indica que la imagen es un mapa (lo veremos más adelante).

El único atributo imprescindible es el SRC (como es lógico, sin la imagen poca utilidad tiene la marca).

Una página con varias referencias a imágenes podría ser la siguiente:

<HTML> <HEAD> <TITLE>Página de prueba de imágenes</TITLE> </HEAD> <BODY> <IMG SRC="foto.gif" ALT="Foto" ALIGIN=MIDDLE> Este soy yo. <P>Selecciona lo que quieras de este mapa: <A HREF="/cgi-bin/imagemap/mapa"><IMG SRC="mapa.gif" ISMAP></A> </BODY> </HTML>

[anterior] [índice] [siguiente]