SESION 3: HIPERENLACES

HIPERENLACES

 

 

Hiperenlace  <A>

Un Hiperenlace es un elemento de la página que hace que el navegador acceda a otro recurso, otra página Web, un archivo, etc...
Para incluir un Hiperenlace se utiliza la directiva <A></A>. El texto o imagen que se encuentre dentro de los límites de esta directiva será sensible, esto quiere decir que si pulsamos con el raton sobre el, se realzará la función de hiperenlace indicada por la directiva <A></A>. Si el Hiperenlace esta indicado por un texto, este aparecerá subrayado y en distinto color, si se trata de una imagen, esta aparecerá con un borde rodeándola. Esta directiva tiene el parámetro href que indica el lugar a donde nos llevará el Hiperenlace si lo pulsamos.
<a href="URL" title="título del enlace" class="clase del enlace">etiqueta del enlace</a>

Tipos de referencia

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.aulaclic.com" tendrá el mismo efecto que "http://www.aulaclic.com/index.htm"
Para insertar el enlace:
Visita www.aulaclic.com
Habría que escribir:
<a href="http://www.aulaclic.com">Visita www.aulaclic.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:
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:
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>

Destino del enlace

Como recordarás, en el tema de hipervínculos vimos los posibles destinos de los enlaces. Estos destinos podían ser _blank, _parent, _self, y _top. Vamos a recordar para qué servía cada uno de ellos, ya que ahora que sabes trabajar con marcos te serán más fáciles de entender.
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, lo cual quiere decir que los marcos de la ventana desaparecerán al abrir el vínculo en ella.
Además de estos destinos para los enlaces, también podrás utilizar los nombres de los distintos marcos de la página. Por ejemplo, si tuvieramos un marco con el nombre marcoderecho, podríamos insertar el enlace:
<a href="http://www.bykevinxd.com" target="marcoderecho">Aulaclic en el marco derecho</a>

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 imágen, 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. 

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).
link permite determinar el color de los enlaces sin visitar (enlace que no ha sido pulsado ninguna vez).
alink permite determinar el color del enlace activo (enlace que acaba de ser pulsado).
vlink permite determinar el color de los enlaces visitados (enlaces que ya han sido pulsados).

Puntos de fijacion - Anclas

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:

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. 

Al final de este tema verás cómo definir el punto de fijación. 

Otros tipos de enlace

Los enlaces son los elementos que nos permiten navegar por las páginas HTML y son tan importantes que la web no tendría sentido sin ellos. Dedicaremos varios capítulos a explorar los distintos tipos de enlaces, sus usos y diversos consejos para hacer páginas navegables.

 Enlaces en HTML
Vemos qué son los enlaces en HTML y los distintos tipos. 

 Enlaces internos
Los enlaces HTML que se hacen con otras partes de la misma página. 

  Enlaces locales
Enlaces HTML con otras páginas del mismo sitio web. 

Enlaces externos, de correo y hacia archivos
Vemos tres tipos de enlaces. Los dirigidos a otras páginas de otros webs, a direcciones de correo y a ficheros externos. Entrar

Atributo nofollow en los enlaces
El atributo rel=nofollow, de los enlaces, sirve para que los buscadores no continúen reastreando a partir de esos enlaces. 

Tutorial sobre Otros tipos de enlace