Sección Head

SECCIÓN HEAD

Como ya se avanzó en la introducción, esta sección, a diferencia de la sección BODY, posee una serie de etiquetas que no se van a ver en el trabajo final pero, aún así, tienen gran importancia, como vamos a ir viendo ya pispo.

La etiqueta <TITLE>, con su cierre </TITLE>, sirve para poner título a la página y es eso que se ve arriba del navegador, en color blanco con fondo azul, donde ahora mismo se ve "Sección Head - Microsoft Internet Explorer". Y es lo que van a ver los usuarios si añaden tu página a sus Favoritos.

<HTML>
<HEAD>
<TITLE> Mi Titulillo Marchoso </TITLE>
</HEAD>
<BODY>
.....
</BODY>
</HTML>

Si lo has hecho bien podrás ver tu absurdo título.

La siguiente etiqueta es <META> (meta-information) que se usa para dar información de nuestro documento, por lo que no se cierra. Es donde buscan los buscadores como Google y otros. También sirve para redireccionar nuestra página hacia otro sitio web, para indicar al navegador que ha caducado y para ir directamente, cuando entramos en la página, a descargar algo.

Puede llevar el atributo NAME con CONTENT y/o el atributo HTTP-EQUIV, también con CONTENT, además, podemos poner todas las que queramos. Quedaría algo así:

Y/O bien quedaría:

<META NAME="generator" CONTENT="El programa que sea">
Esto le dice al navegador que el programa usado para hacer mi página es tal o cual. Observa que lo que hay entrecomillado va en inglés. En ocasiones, lo que va en CONTENT se puede poner en español, siempre que indiquemos al navegador el lenguaje usado por medio del atributo LANG con valores EN-US para inglés y ES para español.

<META NAME="author" CONTENT="mi nombre">
Indica el nombre del autor del documento, en este caso, yo mismo.

<META NAME="keywords" CONTENT="Web Page, Tutorial, Tutorials HTML, Short Manual">
Indica a los buscadores (a algunos) palabras clave, como las que ponemos nosotros para buscar algo. Os aconsejo que también pongáis los plurales. Deben ir separadas por comas y deben de estar en el texto, lógicamente. También podemos ponerlas en español:
<META NAME="keywords" LANG="es" CONTENT="Página web, Tutorial, Tutoriales HTML, Manual Sencillo">

<META NAME="description" CONTENT="descripción del sitio web">
Ponemos una descripción del sitio web.

<META HTTP-EQUIV="refresh" CONTENT="n; URL=http://dirección/">
Esto hace que al entrar en una página tarde "n" segundos en redireccionarse (así se dice) a la dirección marcada tras el URL. Algunos navegadores no lo implementan por lo que es conveniente poner, además, un enlace por si esto fallara (ya veremos los enlaces más adelante).
Pulsa aquí para comprobar como funciona.

<META HTTP-EQUIV="refresh" CONTENT="n; URL=http://archivo.zip/">
Esto hace que al entrar en una página tarde "n" segundos en ir a descargar el archivo en formato exe, pdf o zip (los más corrientes), apareciendo un cuadro de diálogo que te pedirá si lo abres o lo guardas.
Pulsa aquí para comprobar como funciona.

<META HTTP-EQUIV="expires" CONTENT="Tue, 20 Aug 2004 16:30:00 GMT">
La página que contenga esto caduca en esa fecha y hora de modo que el navegador, después de esa fecha, tendrá que cargar una nueva copia, no pudiendo usar la que tenía hasta esos momentos en el caché.

Una cosa curiosa, que sólo funciona en el Explorer, es la transición entre las distintas páginas. Observa como funciona cuando entras y cuando sales de la página pulsando el botón de retroceso (en este caso, como lo que queremos ver es una transición, no se pone el TARGET=_blank, además no funcionaría si lo ponemos). Pulsa aquí .

El código es de un tal George Chiang.

Haz tus pruebas, hay muchas transiciones distintas.

Las etiquetas <STYLE> y <SCRIPT> las veremos cuando lleguemos a las hojas de estilo. Aquí sólo decir que se sitúan también en la cabecera.

La etiqueta <LINK> proporciona un método para definir relaciones con otros documentos y recursos (se usa poco).

Lleva como atributos:

HREF con la ruta del recurso, por ejemplo, el enlace a una hoja de estilo.

REL (relation) que indica el tipo de enlace entre mi documento y el recurso especificado en el atributo HREF (mi hoja de estilo, por ejemplo).
<LINK HREF="miestilo.css" REL="stylesheet" TYPE="text/css">

REV (reverse relation) que define una relación inversa, es decir, se pone un LINK de un documento con otro y en el otro un LINK con el primero. Así en uno ponemos:
<LINK REL="alternate" href="otro.htm" title="descripción">

Y en el otro:
<LINK REV="alternate" href="uno.htm" title="descripción">

REV=made, se utiliza normalmente para identificar el e-mail del autor o su página:
<LINK REV="made" href="mailto:fran12@terra.es">

REL=top, que indica que el enlace se refiere el punto más alto de la jerarquía.

REL=contents, enlaza con un documento que ofrece una tabla de contenidos.

REL=index, ofrece un índice del documento actual.

REL=glossary, referencia un documento que ofrece un glosario de términos.

REL=copyright, los derechos de autor del documento actual.

REL=next, referencia el siguiente documento en una navegación guiada.

REL=previous, el documento previo.

REL=help, referencia un documento que ofrece ayuda.

REL=search, va a una página para realizar búsquedas.

Y hay más...

Uno particularmente curioso es la capacidad de poner un icono de nuestro gusto cuando añadimos la página a "Favoritos". Para ello sólo hay que crear un icono de, como mucho 16×16, darle el nombre "favicon.ico" y poner en el LINK:

<LINK REL="shortcut icon" HREF="favicon.ico">, si está en el mismo sitio que el index, sino hay que poner la ruta.

Y quedará tan bonita como lo que aparece si agregas esta página a tus "Favoritos". Lógicamente debería haberlo puesto en la primera página de mi tutorial pero para el ejemplo nos vale así. Sólo funciona con Explorer.