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

Comparte o guarda esta página