Ligas HTML

Las ligas las puedes encontrar en cualquier página web y estas ayudan a los usuarios a pasar de una página a otra haciendo clic en ellas.

Ligas HTML - Hipervínculos

Las ligas son hipervínculos. Un hipervínculo es un texto o una imagen al que se puede dar clic y pasar a otra página.

Ligas HTML - Sintaxis

En HTML las ligas son definidas con la etiqueta <a>.

<a href="/url">Esto es un liga</a>

Ejemplo:

<a href="http://www.tutoriales.exasoluciones.com/">Visita nuestro Tutorial HTML</a>

El atributo href especifica la dirección destino (http://www.tutoriales.exasoluciones.com). El texto ligado es la parte visible (Visita nuestro Tutorial HTML) y al darle clic a este texto ligado, nos enviara a la dirección especificada.

Nota: El texto ligado no necesariamente tiene que ser texto, puede ser también una imagen o cualquier elemento HTML.

Ligas locales

En el ejemplo anterior usamos una url absoluta, es decir, la dirección completa del dominio (http://www.tutoriales.exasoluciones.com), así podemos usar la dirección de cualquier sitio en la web (www.google.com.mx por ejemplo).

Una liga local, es una liga al mismo servidor y se especifica con una URL relativa, es decir, sin el "http://www".

<p href="/index.php">Inicio</a>

Ligas HTML - Colores

Cuando pasas el puntero del mouse sobre una liga, dos cosas normalmente pasan:

• El puntero del mouse (flecha) cambia a una pequeña mano.
• El color del texto del elemento cambia de color.

Por defecto, los navegadores web muestran las ligas como esto:

• Una liga no visitada es mostrada con un subrayado y en color azul.
• Una liga visitada es mostrada con un subrayado y en color púrpura.
• Una liga activa es mostrada con un subrayado y en color rojo.

Se puede cambiar los colores predeterminados usando los estilos CSS:

<style>
  a:link {
    color: green;
    background-color: transparent;
    text-decoration: none;
  }
  a:visited {
    color: pink;
    background-color: transparent;
    text-decoration: none;
  }
  a:hover {
    color: red;
    background-color: transparent;
    text-decoracion: underline;
  }
  a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
  }
</style>

Ligas HTML - El atributo target

El atributo target especifica en donde se abrirá el documento de la liga.

En este ejemplo abrirá el documento de la liga en una nueva ventana del navegador web o en una nueva pestaña.

<a href="http://www.tutoriales.exasoluciones.com" target="_blank">Visítanos...</a>

Si el sitio esta fijado con un frame, puedes usar el target _top para salir del frame y mostrar el siguiente documento en toda la ventana.

Ejemplo:

<a href="http://www.tutoriales.exasoluciones.com/" target="_top">Tutorial HTML</a>

Ligas HTML - Imágenes como ligas

Es muy común usar imágenes como ligas, ejemplo:

<a href="/index.php">
  <img src="/logo.png" alt="Tutorial HTML" style="width: 42px; height: 42px; border="0">
</b>

Nota: Se define el borde en 0 para prevenir que navegadores antiguos (como internet explorer 9 y anteriores) muestren un borde alrededor de la imagen.

Ligas HTML - Creando un Marcador

Los marcadores en HTML son usados para permitir a los visitantes saltar a una parte específica de la página web. Los marcadores son muy prácticos sobre todo cuando la página es muy larga.

Para hacer un marcador, debes primero crear el marcador y después crear una liga a éste. Cuando la liga es cliqueada, la página se desplazará a la locación del marcador.

Ejemplo:

Primero creamos un marcador con el atributo id.

<h2 id="notas">Use la sección notas</h2>

a continuación agregamos una liga que apunte al marcador ("Use la sección notas"), esto en la misma página:

<a href="#notas">Visite la sección Notas</a>

o también se puede agregar la liga al marcador desde otra página:

<a href="/index.html#notas">Visite la sección Notas</a>

Resumen del Capitulo

• Use el elemento HTML <a> para definir una liga.
• Use el atributo HTML href para definir la dirección de la liga.
• Use el atributo HTML target para definir en donde va a abrir el documento de la liga.
• Use el elemento HTML <img> (dentro del elemento <a>) para usar una imagen como liga.
• Use el atributo HTML id (id="valor")para definir un marcador en una página.
• Use el atributo HTML href (href="#valor") para ligarlo a un marcador.