Links HTML

Los enlaces se encuentran en casi todas las páginas web. Los enlaces permiten a los usuarios hacer clic de una página a otra.

HTML Links – Hyperlinks

Los enlaces HTML son denominado hiperenlaces o hyperlinks. Puedes hacer clic en un link para saltar a otro documento. Cuando mueves el mouse sobre un enlace, la flecha del mouse se convertirá en una pequeña mano.

Nota: Un enlace no tiene que ser texto. Puede ser una imagen o cualquier otro elemento HTML.

Sintaxis de los enlaces

Los hiperenlaces son definidos con la etiqueta <a>.

Ejm

<a href="url">link text</a>

Ejm

<a href="https://websarrolladores.com/html/">Visita nuestro tutorial HTML</a>

El atributo href especifica la dirección de destino (https://websarrolladores.com/html/) del enlace. El texto del enlace es la parte visible. Al hacer clic en el texto del enlace, se redirigirla al documento vinculado.

Enlaces locales

El ejemplo anterior utiliza una URL absoluta (una dirección web completa). Un enlace local (enlace en el mismo website) es especificado con una URL relativa (sin https://www…).

Ejm

<a href="html_images.asp">HTML Images</a>

Enlaces HTML – El atributo ‘target’

El atributo target especifica donde se abre el documento al que apunta. Puede tener uno de los siguientes valores:

  • _blank: abre el documento al que apunta en una nueva ventana o pestaña.
  • _self: abre el documento en la misma ventana / pestaña de la cual fue clocado (es el valor por defecto).
  • _parent: abre el documento vinculado en el marco primario.
  • _top: abre el documento vinculado en el cuerpo completo de la ventana.
  • framename: Abre el documento vinculado en un marco con nombre.

Este ejemplo abrirá el documento vinculado en una nueva ventana / pestaña del navegador:

Ejm

<a href="https://websarrolladores.com/" target="_blank">Visita Websarrolladores</a>

Consejo: Si tu página web está bloqueada en un marco, puedes usar target = “_ top” para salir del marco.

Enlaces HTML – Imágenes como enlaces

Es bastante común utilizar imágenes como enlaces.

Ejm

<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>

Nota: borde: 0; se agrega para evitar que IE9 (y versiones anteriores) muestren un borde alrededor de la imagen (cuando la imagen es un enlace).

Botón como un enlace

Para usar un botón HTML como enlace es necesario añadir algo de código Javascript. JavaScript te permite especificar qué sucede en ciertos eventos, como hacer clic en un botón:

Ejm

<button onclick="document.location = 'default.asp'">Tutorial HTML</button>

Ejm completo

<!DOCTYPE html>
<html>
<body>

<h2>Botón como un enlace</h2>

<p>Haz clic en el botón para ir a la página por defecto.</p>

<button onclick="document.location = 'default.asp'">Tutorial HTML</button>

</body>
</html>

title en enlaces

El atributo title especifica información adicional sobre un elemento. La información se muestra con mayor frecuencia como texto de información sobre herramientas cuando el mouse se mueve sobre el elemento.

Ejm

<a href="https://websarrolladores.com/html/" title="Ve a la sección HTML">Visita nuestro tutorial HTML</a>

Rutas externas

Páginas externas pueden ser referenciadas con una URL completa o con una url relativa a la página concreta. Este ejemplo utiliza una URL completa para vincular a una página web:

Ejm

<a href="https://websarrolladores.com/html/default.asp">tutorial HTML</a>

Este ejemplo enlaza a una página ubicada en la carpeta html en el sitio web actual.

Ejm

<a href="/html/default.asp">tutorial HTML</a>

El siguiente ejm vincula un enlace a una página localizada en la misma carpeta de la página actual.

Ejm

<a href="default.asp">tutorial HTML</a>

Resumen

  • Utilizamos la etiqueta <a> para definir un enlace.
  • Usamos el atributo href para definir la dirección del enlace.
  • Usamos el atributo target para definir donde se abrirá el documento vinculado.
  • Usamos el elemento <img> (dentro del elemento <a>) para utilizar una imagen como un enlace.