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í:

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í:

    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í:

  • 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:fj@hotmail.com">email</a><br>

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

    <a href="mailto:fj@hotmail.com?subjet=vacaciones">email</a><br>

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

    <a href="mailto:fj@hotmail.com?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>

Recursos

Artículos en la categoría "Manual de HTML"

  1. Manual de HTML: Cómo tener una web
  2. Manual de HTML: Cabecera
  3. Manual de HTML: Estilos CSS
  4. Manual de HTML: Cajas (div)
  5. Manual de HTML: Texto
  6. Manual de HTML: Glosarios y Listas
  7. Manual de HTML: Enlaces
  8. Manual de HTML: Tablas
  9. Manual de HTML: Imágenes
  10. Manual de HTML: Frames (marcos)
  11. Manual de HTML: Colores HTML
  12. Manual de HTML: Colores seguros para la web
  13. Manual de HTML: Formularios
  14. Manual de HTML: Fuentes
  15. Manual de HTML: Objetos
  16. Manual de HTML: Eventos y scripts
  17. Manual de HTML: Caracteres especiales
  18. Manual de HTML: Unidades
  19. Manual de HTML: URL encoding
  20. Manual de HTML: Responsive Web Design (diseño web adaptativo)
  21. Manual de HTML: Geolocalización HTML5 en aplicaciones web