HTML: Hiperenlaces 1

Hiperenlaces en HTML

Vamos a ver qué son los hiperenlaces, para qué sirven y cómo crearlos, ya que son un elemento esencial para cualquier página web.

Hiperenlace <a>

Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo.

Aquellos elementos (texto, imágenes, 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 haga clic en el enlace.

La sintaxis para establecer un enlace es: <a href="destino">texto</a>.



Donde destino es el documento con el que se enlaza y texto es la palabra o palabras que, al pulsar, nos llevan a ese destino (también puede ser una imagen).

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://personal.telefonica.terra.es/web/iestomasyvaliente" tendrá el mismo efecto que "http://personal.telefonica.terra.es/web/iestomasyvaliente/index.html".

Por ejemplo, para insertar el enlace:

Visita la página Web de Google

Hay que escribir:

<a href="http://www.google.es">Visita la página Web de Google </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, supongamos 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

Hay 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 tema 4, y ésta estuviera dentro de la carpeta raíz del sitio, hay que escribir:

<a href="/tema 4/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

Hay 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 tema 4, y esta estuviera dentro de la misma carpeta que el documento actual, hay que escribir:

<a href="tema 4/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>

Punto de fijación:

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 fijación Tipos de enlaces

Hay que escribir:

<a href="t_4_1.htm#tipos">Punto de fijación 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.

Destino del enlace

El destino del enlace determina en qué ventana va a ser abierta la página vinculada, y se especifica a través del atributo target al que se le puede asignar los siguientes valores:

_blank: Abre el documento vinculado en una ventana nueva del navegador.

_parent: Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre.

_self: Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo.

_top: Abre el documento vinculado en la ventana completa del navegador.

No te preocupes si no te queda del todo claro para qué sirve cada una de estas opciones de destino, ya que se volverán a ver en el tema de Marcos. De momento sólo te interesa retener la opción _blank y _self.

Para insertar el enlace:

Visita www.google.es en una ventana nueva

Hay que escribir:

<a href="http://www.google.es" target ="_blank">Visita www.google.es en una ventana nueva</a>

Es interesante utilizar esta opción cuando la página de destino está fuera de nuestro sitio para que cuando el usuario cierre la ventana del explorador, se encuentre automáticamente en la página desde la que había salido (que vuelva a nuestro sitio).

Formato de los enlaces

En general, un texto que tiene un vínculo asociado suele aparecer subrayado. Cuando el vínculo está definido sobre una imagen, en el borde aparecen una serie de puntitos al pulsar sobre ella. Cuando el vínculo está definido sobre una zona de una imagen (un mapa), aparece el contorno de esa zona.

Aquí tienes dos vínculos similares de ejemplo:

Como puedes ver, la segunda imagen que hace de vínculo contiene un recuadro alrededor.

Esto ocurre debido a que se ha establecido un borde para la imagen, como veremos más adelante.

Tanto si el vínculo se asigna a un texto como a una imagen, el cursor cambia de forma al situarse encima del vínculo. Suele adquirir la apariencia de una mano señalando.

Normalmente los vínculos de texto cambian de color cuando el enlace ha sido ya pulsado o cuando el puntero del ratón se posiciona sobre él, estos cambios están predefinidos en cada navegador, pero nosotros podemos cambiar esos colores.

Los colores de los vínculos pueden especificarse a través de las propiedades de la página, en la etiqueta <body>. Estos colores se asignan a través de los atributos link (vínculo), alink (vínculo activo), y vlink (vínculo visitado).

o link permite determinar el color de los enlaces sin visitar (enlace que no ha sido pulsado ninguna vez).

o alink permite determinar el color del enlace activo (enlace que acaba de ser pulsado).

o vlink permite determinar el color de los enlaces visitados (enlaces que ya han sido pulsados).

Por ejemplo, al insertar el siguiente código:
...
<body link="#FF0000" vlink="#FF0099" alink="#FF9900">
...
<a href="http://www.google.es" target ="_blank">www.google.es</a>
...
Mientras no se visite la página www.google.es, el enlace será de color rojo (#FF0000).

Mientras la página www.google.es sea la última visitada, el enlace será de color fucsia (#FF0099).
Cuando se haya visitado la página www.google.es, el enlace será de color naranja (#FF9900).