La cabecera de la página se utiliza para agrupar información sobre ella, como puede ser el título.
Está formada por las etiquetas <head> y </head>. La etiqueta <head> va justo debajo de la etiqueta
<html> tal como vimos.
Por ejemplo:
<html>
<head>
...
</head>
...
</html>
Entre las etiquetas <head> y </head>, las etiquetas que podemos encontrar y más se utilizan son:
<link>, <style>, <script> (estas etiquetas las veremos más adelante),
<meta> y la etiqueta
<title> que te explicamos a continuación.
Título de la página <title>
El título de la página es el que aparecerá en la parte superior de la ventana del navegador, cuando la página esté cargada en él.
Para asignar un título a una página es necesario escribir el texto deseado entre las etiquetas <title> y </title>.
Estas etiquetas han de estar dentro de la cabecera, es decir, entre las etiquetas <head> y </head>.
Por ejemplo:
<html>
<head>
<title>
Curso de HTML
</title>
</head>
...
</html>
La etiqueta <meta>
La etiqueta <meta> se utiliza para añadir información sobre la página. Esta información puede ser utilizada por los buscadores, aunque debido al abuso que se hizo de esta característica, Google anunció que no las usa más para indexar los sitios.
A través de esta etiqueta pueden especificarse los atributos name y content. El atributo name indica el tipo de información, y el atributo content indica el valor de dicha información.
Para indicar el tipo de información podemos utilizar cualquier palabra que deseemos, como puede ser "Autor", "Palabras clave", "Descripción", etc. Pero debido a que la mayoría de buscadores están en inglés, es preferible que el tipo de información se especifique en inglés.
Los tipos de información más utilizados son los siguientes:
author: Autor de la página
classification Palabras para clasificar la página en los buscadores
description Descripción del contenido de la página
generator Programa utilizado para crear la página
keywords Palabras clave
La etiqueta <meta> no necesita etiqueta de cierre. Para cada etiqueta <meta> solo es posible indicar un tipo de información y su valor, pero es posible insertar varias etiquetas <meta> en un mismo documento.
La etiqueta <meta> ha de estar entre las etiquetas <head> y </head>.
Por ejemplo, el siguiente código indica que el autor de la página es ifee, que la página trata sobre un curso de HTML y especifica algunas palabras clave a ser consultadas por los buscadores:
<html>
<head>
...
<meta name="author" content="ifee">
<meta name="description" content="Curso de HTML">
<meta name="keywords" content="código HTML etiqueta página web curso">
</head>
...
La etiqueta <meta> también se utiliza para indicarle al navegador alguna información o alguna acción que debe realizar. En este caso se utiliza el atributo http-equiv, en lugar del atributo name.
Por ejemplo, imaginemos que por algún motivo queremos que nuestra página se actualice automáticamente cada 30 segundos. En ese caso, deberíamos utilizar la acción Refresh (actualizar). Podríamos utilizar el siguiente código:
<html>
<head>
...
<meta http-equiv="Refresh" content="30">
</head>
...
Ahora imaginemos que hemos cambiado la dirección en la que se encuentra nuestra página web, y queremos que cuando algún usuario visite la página en la dirección antigua, a los 5 segundos el navegador lo redirija automáticamente a la dirección nueva. En ese caso podríamos insertar el siguiente código en la página que se encuentra en la dirección antigua:
<html>
<head>
...
<meta http-equiv="Refresh" content="5; URL=http://www.superpagina.com/index.htm">
</head>
...
De este modo, el navegador realizaría la función de actualizar la página, pero cargando la que se encontrara en la nueva dirección (URL=http://www.superpagina.com/index.htm).
Volviendo al <body> los hiperenlaces
Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado o seleccionado lleva a otra URL.
Aquellos elementos (texto, imágenes, archivos a descargar. etc.) sobre los que se desee insertar un enlace han de encontrarse entre las etiquetas <a> y </a>.
A través del atributo href se especifica la página a la que está asociado el enlace, la página que se visualizará cuando el usuario lo seleccione, por ejemplo, haciendo un clic sobre él con el mouse.
Por ejemplo, para insertar el enlace:
Visita cursodesarrolloweb.blogspot.com
Se escribe:
<a href="http://cursodesarroloweb.blogspot.com">Visita cursodesarrolloweb.blogspot.com</a>
Tipos de referencias
Existen diferentes formas de expresar una referencia a una página a través del atributo href.
Referencia absoluta:
Conduce a una ubicación externa al sitio en el que se encuentra el documento. La ubicación es en Internet, en este caso hay que empezar la referencia por http:// , el nombre del dominio y algunas veces el nombre de la página. Si no se escribe el nombre de la página se cargará la página de inicio asociada al dominio.
Por ejemplo, "http://www.pagina.com" tendrá el mismo efecto que "http://www.pagina.com/index.htm"
Como dijimos arriba, para insertar el enlace:
Visita cursodesarrolloweb.blogspot.com
Se escribe:
<a href="http://cursodesarroloweb.blogspot.com">Visita cursodesarrolloweb.blogspot.com</a>
Referencia relativa al sitio:
Conduce a un documento situado dentro del mismo sitio que el documento actual. Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un objetivo común, estando todos ellos dentro de una misma carpeta, conocida como carpeta raíz del sitio.
Por ejemplo, teniendo en cuenta que el documento t_4_1.htm se encuentra directamente dentro de la carpeta raíz del sitio, para insertar el enlace:
Enlace a Tema 4: Hiperenlaces
Habría que escribir:
<a href="/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>
Observa como aparece el símbolo "/" delante del nombre del documento. Esta barra inclinada indica la carpeta raíz del sitio. Si el documento t_4_1.htm se encontrara, por ejemplo, dentro de una carpeta llamada tema4, y esta estuviera dentro de la carpeta raíz del sitio, habría que escribir:
<a href="/tema4/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>
Referencia relativa al documento:
Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo del directorio en el que se encuentra el actual.
Por ejemplo, teniendo en cuenta que el documento t_4_1.htm se encuentra dentro de la misma carpeta que el documento actual, para insertar el enlace:
Enlace a Tema 4: Hiperenlaces
Habría que escribir:
<a href="t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>
Observa que en este caso no aparece el símbolo "/" delante del nombre del documento. Si el documento t_4_1.htm se encontrara, por ejemplo, dentro de una carpeta llamada tema4, y esta estuviera dentro de la misma carpeta que el documento actual, habría que escribir:
<a href="tema4/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>
Punto de fijación (ancla):
Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el vínculo debe ser "nombre_de_documento#nombre_de_punto".
Por ejemplo, para insertar el enlace:
Punto de fijacion Tipos de enlaces
Habría que escribir:
<a href="t_4_1.htm#tipos">Punto de fijacion Tipos de enlaces</a>
Teniendo en cuenta que el documento se llama t_4_1.htm y el punto de fijación se llama tipos.
Otros tipos de enlaces
Existen otros tipos de enlaces que no conducen a otra página web, los veremos a continuación:
Correo electrónico:
Abre la aplicación de correo para escribir un correo electrónico, cuyo destinatario será el especificado en el enlace. Para ello la referencia del vínculo debe ser "mailto:direcciondecorreo".
Por ejemplo, para insertar un enlace que permita enviar un correo electrónico a cursosifee, tal como este:
e-mail para info@cursosifee.com
Habría que escribir:
<a href="mailto:info@cursosifee.com">e-mail para IFEE</a>
Después de hacer clic en el enlace se abrirá el cliente de correo con la pantalla para redactar un nuevo mensaje y con el campo destinatario rellenado con la dirección de correo. Podemos hacer que esté rellenado algún campo más como es el asunto. En este caso habría que escribir:
<a href="mailto:info@cursoifee.com?subject=el asunto del mensaje">e-mail para IFEE</a>
Vínculo a archivos para descarga:
El valor del atributo href normalmente será una página web (con extensión htm, html, asp, php, etc) pero también puede ser un archivo comprimido, una planilla de cálculo, un documento de texto, un documento con extensión pdf. Cuando el enlace no es a una página Web nos aparecerá el cuadro de diálogo que seguro habrás visto alguna vez en el que el navegador le pide al usuario permiso para descargar el archivo en tu computadora.
Para nombrar el fichero podemos utilizar según el caso, una referencia externa, una referencia relativa al sitio o una referencia relativa al documento.
Por ejemplo, en la carpeta donde se encuentra esta página tenemos el fichero Word carta.doc y queremos que nuestros visitantes puedan visualizar e incluso descargar el fichero en su disco duro, en este caso definiremos el enlace:
Seleccionar aqui para descargar el archivo
De la siguiente forma:
<a href="carta.doc" tarjet=_blank >Seleccionar aqui para descargar el archivo</a>
En este caso hemos utilizado una referencia relativa al documento ya que la carta se encuentra en la misma carpeta que nuestra página.
Vínculo vacío:
Al pulsar sobre un enlace vacío no se abre ninguna página ni archivo, pero el formato es el mismo que el de cualquier otro enlace. El vínculo debe ser el símbolo almohadilla "#".
Por ejemplo, para insertar el enlace vacío:
vinculo vacio
Se escribe:
<a href="#">vinculo vacio</a>
Este tipo de enlace resulta útil para trabajar con comportamientos javascript.
No hay comentarios:
Publicar un comentario