Los enlaces en XHTML

Imprimir

La incorporación del hipertexto fue una de las claves del éxito del lenguaje HTML, ya que permitió crear documentos interactivos que proporcionan información adicional cuando se solicita. El elemento principal del hipertexto es el "hiperenlace", también llamado "enlace" o simplemente "link".

Los enlaces (links o anclas) son los responsables de que naveguemos por la Web, es decir, que vayamos saltando por diferentes páginas de un mismo sitio, o de sitios externos. Esta es la característica más atractiva y seguramente la más importante de los documentos (X)HTML dando la posibilidad de organizar la información en distintas páginas html enlazadas, de forma que el usuario pueda seleccionar la que más le interese en cada momento y moverse libremente de unas a otras rápidamente.enlaces

La etiqueta utilizada para crear un vínculo es <a>...</a>, es decir, todo aquello que aparece entre las etiquetas y se considera un enlace o hipervínculo.

  • Normalmente suele utilizarse texto o imágenes como enlaces.
  • Con un vínculo o link podemos apuntar (señalar) a:
    • Otra página .html del mismo sitio
    • Otra página .html de otro sitio
    • Una zona determinada de una página .html del mismo o distinto sitio.
    • Un elemento multimiedia (imagen, sonido o vídeo)
    • Un archivo cualquiera (pdf, rar, txt, ...)
    • Un servidor de correo electrónico
    • Un servidor FTP
    • etc...

Normalmente, los hiperenlaces aparecen subrayados y con un color distinto al resto del texto. Además suelen cambiar de aspecto al colocar el cursor sobre ellos,  al hacer clic y al visitar la página que señala, todo esto proporciona información al usuario.

Poner un "link" en una palabra o frase:
<a href="http://www.wikipedia.org">toda esta frase es un enlace</a>
Poner un "link" en una imagen:

<a href="http://www.wikipedia.org"><img src="/i2011/logo_wiki.jpg" /></a>

Tipos de enlaces:

Normalmente una página web tiene numerosos enlaces. Cuando se pincha sobre algunos enlaces, el navegador abandona el sitio web para acceder a páginas que se encuentran en otros sitios web. Estos enlaces se llaman "enlaces externos". Sin embargo, la mayoría de enlaces de un sitio web apuntan a páginas del propio sitio web, por lo que se denominan "enlaces internos". También podemos poner enlaces a un lugar de la misma página o a un lugar de otra página, estos enlaces se llaman "enlaces de posición".

Un ejemplo sería cualquier enlace de esta web a otra web es externo. Y un enlace a un artículo de esta misma web es interno.

Además de internos/externos, otra característica que diferencia a los enlaces es si el enlace es absoluto o relativo. Las URL absolutas incluyen todas las partes de la URL (protocolo, servidor y ruta) por lo que no se necesita más información para llegar al lugar enlazado.

Un ejemplo de enlace absoluto es cuando aparece http://www.dominio.com/..., mientras que un enlace relativo NO comienza con  http://www... sino directamente en un determinado directorio, esto lo observamos porque el enlace empieza con barra inclinada / o directamente el nombre del recurso.

Las URL relativas prescinden de algunas partes de las URL para hacerlas más breves. Cuando utilizamos este tipo de enlaces es necesario disponer de información adicional para obtener el recurso enlazado. En concreto, para que una URL relativa sea útil es imprescindible conocer la URL del origen del enlace.

Hay que destacar que en este caso hacer enlaces absolutos (escribiendo la dirección completa) funcionará también, pero tiene el inconveniente de que si necesitamos trasladar nuestro sitio o otro servidor nos veremos obligados a cambiar todos los enlaces que aparezcan en todas nuestras páginas Web.

lin_posEnlaces a un lugar del mismo documento

Los enlaces normalmente se utilizan para hacer referencia a una página distinta de la que los contiene. Sin embargo, se pueden utilizar para hacer referencia a un determinado punto en la misma página (previamente debemos marcar esta zona), ofreciendo así una forma sencilla de desplazamiento dentro de un mismo documento largo.

Un enlace a un punto del mismo documento consta de dos partes: una referencia y un destino. El destino se identifica por un nombre (utilizando el atributo "id" dentro de la etiqueta a, o también "name" por compatibilidad con navegadores antigüos). La referencia hará alusión al nombre del destino, de forma que cuando se seleccione el enlace, el navegador obtendrá el nombre, lo buscará en el resto del documento y una vez encontrado el destino identificado por ese nombre, mostrará la página a partir de este punto en adelante.

La forma de definir un enlace a un punto del mismo documento es:

  • Para la referencia: <a href="#nombre_ancla">texto del enlace</a>
  • Para el destino: <a id="nombre_ancla"></a>.

Como puede observarse, en ambos casos se utiliza la etiqueta <a>, pero en el caso de la referencia, el nombre al que hace alusión va precedido del símbolo almohadilla #. Algunos, a las marcas de destino las llaman "anclas".

En una página html se pueden incluir varias referencias a distintos puntos del documento o se pueden incluir varias referencias a la misma marca destino (p. ej. al inicio del documento).

La etiqueta <a> tiene un atributo de importante valor semántico, llamado "title". El atributo title sirve para específicar una pequeña descripción del sitio que estamos enlazando. Los navegadores suelen desplegar en la parte inferior un "cartelito amarillo" con el valor de este atributo cuando el usuario señala con el mouse el enlace. Esto es de gran ayuda a los usuarios, que decidirán si seguir el enlace o no.

Forma de utilizarlo:internos_rel3

Abrir enlace en nueva ventana

Otro atributo frecuentemente utilizado es el destino en enlaces externos, llamado "target" con el valor "_blank" (abrir en nueva ventana), al utilizarlo nos aseguramos que se pierde nuestro enlace a nuestro sitio web.

Ejemplo:
internos_rel4

aula_virtual_3con14

Utilidades

imprescindibles FireFox Google Chrome Opera Safari Acrobat Reader 7zip Flash Player Java FileHippo

Visitas...

TOTAL168543