Cómo crear ENLACES en HTML

Enlaces

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.

Enlaces HTML - Hipervínculos

  • Los enlaces HTML son hipervínculos.
  • Puedes hacer clic en un enlace y saltar a otro documento.
  • Cuando mueves el mouse sobre un enlace, la flecha del mouse se convertirá en una pequeña mano.
  • No todos los enlaces son texto, las imágenes también pueden ser enlaces

Enlaces HTML - Sintaxis

Los hipervínculos se definen con la etiqueta <a>

El atributo href especifica la dirección de destino del enlace.

See the Pen HTML | 1.10 - Enlaces - 1 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

El atributo target

El atributo target especifica dónde abrir el documento vinculado. Puede tener uno de los siguientes valores:

  • _blank - Abre el documento en una nueva ventana o pestaña
  • _self: abre el documento vinculado en la misma ventana / pestaña en la que se hizo clic (este es el que usa por defecto)
  • _parent - Abre el documento vinculado en el marco primario
  • _top: abre el documento en la ventana completa
  • nombre del marco: abre el documento vinculado en un marco con nombre

See the Pen HTML | 1.10 - Enlaces - 2 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Imágenes como enlaces

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

See the Pen HTML | 1.10 - Enlaces - 3 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

El atributo title en los enlaces

El atributo title especifica información adicional sobre un elemento. La información se muestra cuando pasamos el mouse por encima del elemento.

See the Pen HTML | 1.10 - Enlaces - 4 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Colores

Por defecto, los enlaces en todos los navegadores son:

  • Un enlace no visitado está subrayado y azul
  • Un enlace visitado está subrayado y morado
  • Un enlace activo está subrayado y rojo

Se puede cambiar los colores predeterminados usando CSS.

See the Pen HTML | 1.10 - Enlaces - colores by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 También usando CSS puedes hacer que un enlace tenga estilo de botón.

See the Pen HTML | 1.10 - Enlaces - como botón by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Enlaces a marcadores

Los marcadores HTML se utilizan para saltar a partes específicas de la página web.

Pueden ser útiles si una página web es muy larga.

Cuando se hace clic en el enlace, la página se desplazará hacia abajo o hacia arriba a la ubicación con el marcador.

See the Pen HTML | 1.10 - Enlaces - 5 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Resumen

  • <a> para definir un enlace
  • El atributo href para definir la dirección del enlace
  • El atributo target para definir dónde abrir el documento.
  • <img> (dentro de <a>) para usar una imagen como enlace

¿Quieres más?

Si estás interesado en el mundo de la programación y el desarrollo web, te recomiendo que te suscribas a mi canal de youtube donde tienes mucho más contenido gratuito

IR AL CANAL

¿Quieres convertirte en desarrollador web? [GRATIS]

Déjame aquí tu mejor email y te mandaré un curso para que puedas empezar en el desarrollo web totalmente GRATIS!

¡Prometo no enviarte SPAM! Sólo cosas relevantes que te interesen.