|
Cursillo Villano veraniego
de HTML básico (3)
- No lo aprenderás todo... pero aprenderás ;) - |
Elementos de la cabecera de una página
Ya hemos visto que una página HTML está formada por dos secciones: cabecera y cuerpo. Sabemos que una cabecera es la que incluye información para el navegador, mientras que el cuerpo contiene la información que se desea mostrar al usuario. Comentábamos tambien que se estructura una página o documento HTML mediante etiquetas o marcas. Llegados a este punto tambien deberemos saber, que dichas etiquetas o marcas tienen unos atributos, que iremos conociendo a lo largo del cursillo, que servirán para parametrizar la etiqueta, en otras palabras, nos ayudarán a decirle a la etiqueta cómo queremos que se comporte cuando se ejecute. Hoy vamos a ver los elementos que componen la cabecera de una página HTML que siempre deben estar entre la etiqueta HEAD de apertura y cierre.
Uno de los elementos más habituales en la cabecera de una página es el título. Se puede dar un título a una página utilizando la etiqueta <title>, es la mas importante y frecuente. El efecto que tiene es doble. Por un lado, el título que le asignemos a una página aparecerá en la barra de título del navegador que se utilice para mostrar la página. Por otro lado, los buscadores de INTERNET utilizan la información del título para clasificar las páginas, por lo que conviene no poner un título a la ligera. No tiene limitación de caracteres, pero es aconsejable buscar títulos cortos y breves que identifiquen rápidamente la página. Si ponemos un título muy largo, la ventana del navegador sí es limitada y cortará lo que exceda su tamaño. De existir, sólo deberá aparecer un título por página y no puede haber otras etiquetas dentro de esta. Se estructura así:
<html>
<head>
<title>Aquí va el texto que
quiero que aparezca como título en el navegador</title>
</head>
<!--recordatorio de cómo poner un comentario-->
<body>
</body>
</html>
Otra etiqueta que se puede incluir en la cabecera de una página, pero que no suele ser habitual es <link>. Esta etiqueta permite crear barras de herramientas o menús en la ventana del navegador para diversos fines. La razón de su escaso uso no es otra que la falta de reconocimiento de la etiqueta por parte de los navegadores más comúnmente utilizados.
En la cabecera de la página también se puede incluir información sobre el contenido de la página y cómo debería manejarse. Para ello se dispone de la etiqueta <meta>. Con esta etiqueta, que no tiene equivalente de cierre, se puede incluir, por ejemplo, el autor de la página, el nombre del editor de HTML que se ha utilizado para diseñarla, una descripción breve de la página, etc. Los atributos mas usuales de esta etiqueta son name y content. Se estructura así (ponemos tres ejemplos y los tres podrían ponerse en el documento):
<html>
<head>
<title>Bienvenido a las páginas de Makynavaja</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta
name="keywords" content="astronomía,
astrofísica, biografías, seti, eclipse, formación, informatica, cursos,
empresas, diseño, web, noticias, citas">
<meta name="description" content="Web
de un grupo de formadores informáticos entusiastas de astrofísica y de
la cultura en general, con contenidos variados y actualizados, citas célebres,
biografías anécdoticas, el programa SETI, diseño gráfico y de web, noticías
para internautas y mucho más.">
</head>
<!--recordatorio de cómo poner un comentario-->
<body>
</body>
</html>
Expliquemos un poco los atributos que hemos puesto a la etiqueta META de los ejemplos anteriores:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> aquí le estamos indicando que el contenido está en la misma página, que éste está en texto, en lenguaje html y que estamos utilizando el juego de caracteres iso-8859-1.
<meta name="keywords" content="astronomía, astrofísica, biografías, seti, eclipse, formación, informatica, cursos, empresas, diseño, web, noticias, citas">, aquí con el atributo name le estamos definiendo que el contenido (content) de la etiqueta META, serán las palabras (keywords) claves por las que nos pueden encontrar los buscadores e indexadores de Internet.
<meta name="description" content="Web de un grupo de formadores informáticos entusiastas de astrofísica y de la cultura en general, con contenidos variados y actualizados, citas célebres, biografías anécdoticas, el programa SETI, diseño gráfico y de web, noticías para internautas y mucho más.">, en este caso, el atributo name está definiendo la descripción (description) de la página y que lo contendrá el atributo content.
Otro usos de ésta etiqueta es la de indicar documentos con "refresco automático". Si incluimos un vínculo sustituirá el documento que está en pantalla por el que ahora se indica, una vez transcurrido el tiempo en segundos que se le especifique. Esto es útil para redireccionar al usuario a una nueva dirección URL donde se encuentra la nueva versión actualizada de la página de forma automática o para páginas que cambian de contenido con mucha frecuencia. Lo haríamos así:
....
<head>
<title>Bienvenido a las páginas de Makynavaja</title>
<meta http-equiv="refresh" content="10;URL=http://www.villanos.net/maky">
</head>
....
<meta http-equiv="refresh" content="10;URL=http://www.villanos.net/maky"> con esto estamos indicando que cuando transcurran 10 segundos (content="10;) la página actual se "irá" o "refrescará" ( http-equiv="refresh") por la página que se le indica (URL="http://www.villanos.net/maky").
Por último otra etiqueta que podemos utilizar es <base>. Esta etiqueta nos permite definir la localización de páginas y elementos (ficheros, gráficos...) a los que haga referencia la página. Si no la ponemos, el navegador entenderá que los elementos se encuentran en el mismo lugar donde se haya la página Indice del curso. Esta etiqueta la volveremos a repasar conlos hiperenlaces. Si queremos utilizarla en HEAD, la estructuraríamos así:
....
<head>
<title>Bienvenido a las páginas de Makynavaja</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<base href=http://williamg.eresmas.com/index.htm>
</head>
....
Repasando, como hemos visto entre HEAD de apertura y cierre podemos utilizar tres etiquetas: <TITLE>...</TITLE>; <META> y<BASE>. También podemos utilizar: <LINK>, <ISINDEX> y <NEXTID> aunque no son frecuentes ni habituales.
 Indice del curso |
| Versión para imprimir | Hecho por escuela@villanos.net en 2000 |