Cómo crear ENLACES en HTML

Logo de Cuarzo.dev
Cuarzo.dev

Recibe cada lunes y jueves un correo para ayudarte a impulsar tus habilidades de programación. Ofreciéndote consejos, tutoriales, recursos gratuitos, noticias relevantes y una comunidad comprometida. También tenemos memes 😏

Suscríbete Gratis

Si tienes alguna duda con el curso o te quedas en algún punto donde no sepas avanzar te puedes unir gratis a nuestra comunidad de discord y preguntar tus dudas, que la comunidad estará encantada de ayudarte.

Únete al discord

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

Al suscribirte estás aceptando los términos de uso y la política de privacidad. Puedes darte de baja en cualquier momento.

Libro No todo es programar de Kiko Palomares
Koding Beats