5. La etiqueta HEAD
Como vimos en el tema 3, una página web se componen de dos grandes bloques, la cabecera o head y el cuerpo o body. Mientras que el body, es la parte que contiene los elementos que se van a mostrar en la página. La cabecera o head, contiene la información general de la página.
Aunque no lo parezca esta etiqueta puede ser tan importante como otras. Sus principales funciones son:
- Contiene la información general del documento.
- Incluye la información para los buscadores
- En ella hacemos referencia a archivos externos vinculados al domcumento.
Vamos pues a explicar las distintas etiquetas que nos podemos encontrar en el head:
- La etiqueta <title></title>
Entre estas etiquetas debemos colocar el título de nuestra página. Este aparecera en la pestaña del navegador y el que utiliza los buscadores para mostrar nuestra página en los listados de resultados. Tenemos que intentar que sea lo más descriptivo posible del contenido de la página y que no contenga caracteres especiales " : * | ^".
<title>Curso de Xhtml Básico</title>
- La etiqueta <base>
Con esta etiqueta podemos definir la localización de los enlaces y archivos a los que hacemos referencia en nuestra página. Si no se especifica, el navegador toma como referencia el lugar donde se encuentra nuestra página web.
<base href="http://www.servidor.es/archivos/" />
- La etiqueta <meta>
Con la etiqueta meta establecemos la descripción y características generales de la página y sirve de referencia a los buscadores para recoger esa información.
Esta etiqueta tiene dos atributos principales:
name o http-equiv: El nombre de la propiedad.
content: Donde definimos la propiedad
Las propiedades más comunes para los buscadores son:
- content-type
- Keywords o palabras clave
- Description o breve descripción
- Author
- Robot
- Revisit
- refrest
La propiedad content-type sirve para establecer el grupo de caracteres que vamos a utilizar en nuestra página.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
En la propiedad Keywords establecemos las palabras clave por las que deseamos que nos encuentren en los buscadores. Debemos intentar que sean al menos 20 y deben estar separadas por comas.
<meta name="keywords" content="curso,diseño,web,básico,xhtml,css,jquery,página" />
En description pondremos un breve descripción que complemente al título.
<meta name="description" content="Página dedicada a la enseñanza del lenguaje Xhtml y css, desde un nivel básico, para principiantes" />
En author se indicara el nombre del author de la página.
<meta name="author" content="infogranadatk" />
En robot colocaremos las instruccciones para los robots de los buscadores. Aqui les indicaremos que indexen los contenidos o que no, etc.. Sus posibles valores son:
- index/noindex: Aqui le indicamos si queremos que indexe los contenidos o no.
- all/none: Aqui le indicamos que se indexen todos los archivos o no se indexe ninguno.
- follow/nofollow: Se le indica si deseamos que sigan los enlaces de nuestra página o no.
<meta name="robot" content="all, index, follow" />
Con revisit le indicamos a los robot de busqueda cada cuando deseamos que visiten de nuevo nuestra página.
<meta name="revisit" content="7 days"/>
Con refresh hacemos un redireccionamiento a otra página o refrescamos la página en el intervalo de tiempo que establescamos en la propiedad.
Aqui establecemos que refresque la página cada 5 segundos
<meta http-equiv="refresh" content="5" />
Aqui establecemos que se redireccione la página a www.otradireccion.com a los 5 segundos.
<meta http-equiv="refresh" content="5";URL="http://www.otradireccion.com">
- Etiquetas para vincular archivos
Archivos CSS
<link href="estilos.css" rel="stylesheet" type="text/css" />
Archivos .js
<script type="text/javascript" src="js/jquery.js"></script>
Código para definir un icono para la barra de navegación
<link rel="shortcut icon" hreft="icono.ico" />