Manual de HTML: Enlaces

Enlaces

Un enlace o hipervínculo es un texto, botón o imagen que al clickarlo nos lleva a una dirección URL.

• <a></a>

  La etiqueta <a> (Anchor, ancla) indica un enlace o hipervínculo cuya URL apunta a otra página web, a otra ubicación dentro de la misma página, a un servidor FTP o a cualquier otro recurso.

  Un enlace puede tener cuatro estados diferentes:

  • enlace sin visitar: enlace que aún no ha sido clickado (por defecto color azul y subrayado).
  • enlace visitado: enlace que ya ha sido activado con anterioridad (por defecto color morado).
  • enlace sobrepasado: enlace sobre el que estamos pasando el ratón.
  • enlace activo: enlace que está siendo clickado.

  Atributos:

  • href: URL del recurso al cual hace referencia el hipervínculo.
  • name: especifica la referencia de llamada en anclajes en la misma página.
  • target: destino del enlace. Valores:
    • _self: el documento se cargará en la página actual (valor por defecto).
    • _parent: el documento se cargará en el frame padre.
    • _top: el documento se cargará en la pantalla actual ocupando toda la ventana.
    • _blank: el documento se abrirá en una nueva ventana del navegador.
    • "nombre_ventana": el documento se cargará en el frame con ese nombre.
  • tittle: texto descriptivo del destino del enlace o de la funcionalidad del mismo, que aparecerá cuando el ratón se posicione sobre el enlace, en forma de bocadillo explicativo.

  Propiedades CSS:

  • font-family: fuente
  • font-size: tamaño de la fuente
  • color: color
  • text-decoration: rayado (ninguno (none), subrayado por abajo (underline)
  • background: color del fondo

  Se pueden especificar diferentes estilos CSS para cada uno de los estados de un enlace utilizando las pseudo-clases de los enlaces (debe respetarse este orden para que funcionen adecuadamente):

  a:link    { color: red }    /* enlace sin visitar */
  a:visited { color: blue }   /* enlace visitado */
  a:hover   { color: yellow } /* enlace sobrepasado */
  a:active  { color: lime }   /* enlace activo */

Ejemplo: este código:

<style>
#links .external {
  background: transparent url(/icon_external.png) no-repeat scroll 100% 45%;
  padding-right: 12px;
}
</style>
<div id="links">
  <a class="external" href="http://hola.org">hola.org</a>
</div>

... se ve así:

hola.org

Cómo usar los enlaces

• Enlaces a recursos que se encuentran en Internet

  La URL apunta a un recurso de Internet:

  <a href="http://www.domain.com/">home de domain.com</a><br />
  <a href="ftp://ftp.domain.com/pub/">ftp de domain.com</a><br />
  <a href="http://www.domain.com/images/ejemplo.jpg">una imagen</a>

• Enlace con un recurso del propio sitio web

  Podemos usar la URL absoluta:

  <a href="http://www.domain.com/index.html">pagina principal</a><br>

  ... o la URL relativa:

  <a href="/index.html">pagina principal</a><br>

• Volver a cargar la propia página

  Si queremos volver a cargar la propia página dejaremos href vacío (recarga la página y va al inicio):

  <a href="">Recargar la pagina (va al inicio)</a>

  ... que se ve así:

  Recargar la pagina (va al inicio)

  Para subir al inicio de la página sin volver a cargarla usaremos la almohadilla "#":

  <a href="#">Subir al inicio de la pagina sin volver a cargarla</a>

  ... que se ve así:

  Subir al inicio de la pagina sin volver a cargarla
• Enlace con un punto de la misma página

  Para poner un enlace a un punto de la misma página previamente tendremos que definir un anclaje con el atributo name:

  <a name="top"></a>

  Tras lo cual ya podemos enlazar ese punto utilizando en la URL una almohadilla "#":

  <a href="#top">volver arriba</a>

• Enlace con un punto de una página desde otra página

  Para poner un enlace a un punto de otra página marcado con un anclaje haremos:

  <a href="/index.html#top">pagina principal, arriba</a>

• Anular la funcionalidad de un enlace

  Se puede anular la funcionalidad de un enlace añadiendo al código del evento onClick la instrucción return false. De esta forma no iremos a la página referenciada en href:

  <a href="enlaces.html" onclick="return false">anulado</a>

• Enlaces que pasan parámetros

  Para pasar parámetros a la página destino en el enlace se pone el parámetro a continuación de la dirección, precedido por un "?":

  <a href="/index.html?var=texto">Pasar 1 parametro</a>

  Si queremos pasar varios parámetros los separaremos con un "&":

  <a href="/index.html?var1=texto1&var2=texto2">Pasar 2 parametros</a>

  Para volver a cargar la propia página pasándole 1 parámetro, emplearemos:

  <a href="?var=texto">Recargar y pasar 1 parametro</a>

• Enlaces que envían un email

  Utilizando en el enlace mailto: se abrirá el programa de correo que el usuario tenga instalado y aparecerá ya relleno el campo correspondiente al "destinatario":

  <a href="mailto:[email protected]">email</a><br>

  Si además queremos que rellene el campo "asunto", le pasaremos el parámetro subjet:

  <a href="mailto:[email protected]?subjet=vacaciones">email</a><br>

  Para especificar los "destinatarios de una copia" usaremos el parámetro cc:

  <a href="mailto:[email protected]?subjet=vacaciones&cc=bob">email</a><br>

• Capturar eventos con enlaces

  Los eventos de los enlaces son muy útiles cuando algún elemento de nuestra página no soporta el evento que queremos capturar. Los enlaces soportan casi todos los eventos que existen en HTML, cosa que podemos utilizar para extender la captura de eventos a elementos que no los soportan. En realidad no es dicho elemento el que captura el evento sino el enlace que lo contiene, pero el resultado final es el mismo.

  Por ejemplo, supongamos una imagen definida de la siguiente manera:

  <img src="/images/yahoo.gif" onblur="alert('evento capturado')" />

  No ocurre nada porque una imagen así definida no puede recibir ni perder el foco, por lo que no soporta los eventos onFocus (salta al recibir el foco el elemento) ni onBlur (salta al perder el foco el elemento). A pesar de ello, una imagen puede ser activada mediante esos eventos usando un enlace. Para ello, metemos la imagen dentro de un enlace, colocamos en él el evento y problema solucionado (utilizaremos onclick="return false" para anular la funcionalidad del enlace y que podamos clickarlo sin activarlo):

  <a href="#" onclick="return false" onblur="alert('evento capturado')">
    <img src="/images/yahoo.gif" />
  </a>

  Si el evento a capturar es precisamente onclick haremos lo siguiente:

  <a href="#" onclick="alert('evento capturado'); return false">
    <img src="/images/yahoo.gif" />
  </a>