El documento HTML: estructura de una página web

Estructura del documento

La estructura de un documento HTML consta de una etiqueta inicial qeu describe el tipo de documento (html, versión) y varias secciones o partes, en HTML tiene este aspecto:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">

<HTML>

<HEAD>

<title>titulo de la página</title>

</HEAD>

contenido de la página

</body>

</html>

En el tipo de documento deberemos especificar a que estándar del HTML responde nuestra página entre una de las siguientes opciones:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">

Cumple el estándar HTML 2.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

Cumple el estándar HTML 3.2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://w3.org/TR/REC-html40/loose.dtd">

Cumple el estándar HTML 4.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://w3.org/TR/REC-html40/strict.dtd">

Cumple el estándar HTML 4.0 y no contiene además elementos desaconsejables

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://w3.org/TR/REC-html40/frameset.dtd">

Es una definición de marcos que cumple el estándar HTML 4.0

El HTML 4.0 considera desaconsejables aquellos elementos que, aún siendo soportados, han sido sustituidos por otros más actuales y, por ello, es posible que sean eliminados del estándar HTML en el futuro.

Tipo de documento

HTML y standard que sigue

Cabecera Head
Definiciones, enlaces, recursos

Cuerpo: Body
La parte visible, el contenido

La cabecera: head

Suele ser el lugar más indicado para colocar aquellos elementos de la página que no alteren el contenido de la misma, aunque si la forma de presentarlo y su comportamiento. Es por eso que es el lugar más recomendable para colocar los scripts y las hojas de estilo, como veremos en los capítulos correspondientes.

Hay también otro elemento interesante que podremos incluir en nuestras cabeceras. Cuando especificamos una URL relativa en un enlace, en principio es para acceder a una página situada en nuestro mismo servidor. Sin embargo, si especificamos:

<base href="http://www.misitio.com/">

Ahora todas nuestras URLs relativas se encontrarán dentro del servidor http://www.misitio.com

La cabecera o seccion heading, contiene información sobre la página y elementos auxilaires como estilos o scripts.

Meta Name

Además del título de la página, uno de los elementos que se pueden incluir aquí son los META. Entre otras cosas, sirven para indicar propiedades de la página como pueda ser el nombre de su autor. Por ejemplo,

<meta name="generator" content="Mozilla/4.03 [es] (Win95; I) [Netscape]">

nos indicaría la herramienta con que hemos creado la página (en este caso la versión 4.03 en español para Windows 95 del Composer de Netscape). Como veréis el uso es muy simple, en name colocamos el nombre de la etiqueta y en content colocamos su valor, ambos entre comillas y con el signo igual por delante.
Estas son las propiedades más comunes:

Name	Content
`author`	Autor de la página.
`classification`	Palabras que permite clasificar la página dentro de un buscador jerárquico (como Yahoo).
keywords	Palabras clave por las que encontrarán la página en los buscadores. Google no le hace mucho caso.
generator	Herramienta utilizada para hacer la página.
`Descripción`	Descripción del contenido de la página. Google le hace bastante caso.

Los meta están dirigidos a los robots que analizan las páginas para mostar contenido.

Son usadas por las redes sociales para mostrar resúmenes de las paginas que se comparten en posts.

Meta Http-Equiv

Son etiquetas usadas también para dar información al navegador y complementan las etiquetas Meta vistas en el apartado anterior. En algunos casos existen etiquetas Meta Name y http-equiv similares. Su uso es similar a las etiquetas Meta Name, por ejemplo:

<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">

La única diferencia está en que en lugar de name usamos http-equiv, el resto es igual. Cuando el contenido conste de más de varios valores, estos se separan con ; (punto y coma). Veamos algunos tipos:

HTTP-EQUIV	CONTENT
`expires`	Fecha desde la que la página debe ser recargada por los navegadores
pragma	El contenido debe ser no-cache y sirve para que el navegador no guarde la página en el ordenador del internauta.
Content-Language	Idioma en el que está escrita la página. Se usan las iniciales como: es_ES: español España, en_US: ingles americano...
Refresh	Indica al navegador el tiempo (en segundos) que debe esperar para recargar la página automáticamente y la página a la que debe ir. Ambos datos se separan con un punto y coma.
Content-Type	Tipo de documento y juego de caracteres usado. Lo habitual es colocar el valor: text/html; charset=iso-8859-1 Si n o se usa los caracteres especiales (letras acentuadas, ñ) pueden quedar ilegibles .

No todas las etiquetas Meta son obligtorias, realmente ninguna lo es.

El cuerpo: body

El cuerpo es el contenido de la página propiamente dicho, o sea, lo que se ve, en él es donde se colocarán prácticamente todos los elementos que vamos a ir viendo por este manual. Los atributos que admite esta etiqueta <body>:

Atributos de body
`background`	Coloca una imagen como fondo de la página.
`bgcolor`	Define el color de fondo de la página.
bgproperties	Cuando es igual a FIXED el gráfico definido como fondo de la página permanecerá inmóvil aunque utilicemos las barras de desplazamiento.
`text`	Color del texto.
`link`	Color de un enlace no visitado (por defecto azul).
`vlink`	Color de un enlace ya visitado (por defecto púrpura).
`alink`	Color que toma un enlace mientras lo estamos pulsando (por defecto rojo).
`leftmargin topmargin`	Número de pixels que dejará de margen entre el borde de la ventana y el contenido de la página.
`marginwidth marginheight`	Equivalentes a los anteriores, pero éstos funcionan en Netscape.

No resulta recomendable cambiar los colores del texto y enlaces a no ser que exista alguna dificultad al leerlos por haber cambiado el fondo, ya que en muchas ocasiones el usuario ha podido cambiarlos en las opciones de su navegador y estarán ya a su gusto.