Ejemplo de Enlaces, Ligas O Hipervinculos En HTML
Los enlaces, ligas o hipervínculos son elementos fundamentales de Internet. Nos permiten navegar dentro de páginas web, hacia otras páginas y por supuesto a recursos y documentos. A continuación, te mostramos todo lo que debes saber para crear y utilizar enlaces en HTML para conectar distintas páginas y recursos de manera efectiva y accesible.
Contenido del artículo
- • ¿Qué es un enlace, liga o hipervínculo en HTML?
- • Ejemplo de liga a página web
- • Ejemplo de liga a archivo multimedia
- • Ejemplo de hipervínculo a correo electrónico
- • Enlaces ancla dentro de la misma página
- • Ejemplo enlaces internos en el mismo documento HTML
- • Ejemplo de hipervínculo en una nueva ventana o pestaña
- • Atributos adicionales
¿Qué es un enlace, liga o hipervínculo en HTML?
Un enlace, liga o hipervínculo son sinónimos y básicamente es un elemento donde simplemente haciendo clic te lleva a otro lugar de Internet. Los enlaces pueden llevar a otras páginas web, archivos multimedia, direcciones de correo electrónico, entre otros.
Para poner un enlace o liga, se utiliza la etiqueta <a>. La etiqueta <a> permite enlazar a otro archivo o página dentro o fuera de nuestro sitio web. El atributo href es el encargado de especificar la dirección URL del recurso al que se enlaza.
Ejemplo de liga a página web
En este ejemplo, creamos un enlace simple que dirige a una página web externa:
<html>
<body>
<a href="https://www.ejemplo.com"> Visita nuestro sitio web </a> </body>
</html>
Ejemplo de liga a archivo multimedia
En este ejemplo, mostramos cómo crear enlaces para descargar archivos multimedia como imágenes y documentos PDF:
<html>
<body>
<a href="imagen.jpg" download>Descargar imagen</a> <br>
<a href="documento.pdf" download>Descargar documento PDF</a>
</body>
</html>
El atributo download indica al navegador que debe descargar el archivo en lugar de navegar hacia él.
Ejemplo de hipervínculo a correo electrónico
Al dar clic en un enlace, podemos hacer que se abra el correo electrónico del usuario. En este ejemplo, creamos un enlace que abre el cliente de correo electrónico predeterminado del usuario con una dirección de correo electrónico predefinida:
<html>
<body>
<a href="mailto:ejemplo@correo.com">
Envíanos un correo electrónico </a>
</body> </html>
Enlaces ancla dentro de la misma página
Puedes enlazar a elementos específicos en la misma página utilizando el atributo id en el elemento de destino y referenciándolo en el atributo href con un hash (#) seguido del identificador.
Ejemplo enlaces internos en el mismo documento HTML
En este ejemplo, creamos enlaces que permiten al usuario navegar entre diferentes secciones de la misma página. Lo que sucede es un efecto de "scroll" dentro del mismo documento. Por ejemplo, la tabla de contenidos de esta página está construida con el siguiente código:
<html>
<body>
<h2 id="seccion1">Sección 1</h2> <p>Contenido de la sección 1...</p>
<h2 id="seccion2">Sección 2</h2> <p>Contenido de la sección 2...</p>
<a href="#seccion1">Ir a la Sección 1</a> <br>
<a href="#seccion2">Ir a la Sección 2</a>
</body>
</html>
Ejemplo de hipervínculo en una nueva ventana o pestaña
En ocasiones, es posible que desees abrir un enlace en una nueva ventana o pestaña del navegador. Para lograr esto, utiliza el atributo target con el valor _blank:
<html>
<body>
<a href="https://www.ejemplo.com" target="_blank"> Visita nuestro sitio web en una nueva pestaña </a>
</body>
</html>
El valor _blank indica al navegador que abra el enlace en una nueva ventana o pestaña.
Atributos adicionales
Es posible agregar más atributos a los enlaces para mejorar la accesibilidad y la experiencia del usuario. Por ejemplo, puedes agregar el atributo title para proporcionar información adicional sobre el enlace, y el atributo rel para especificar la relación entre el documento actual y el enlace.
<html>
<body>
<a href="https://www.ejemplo.com" target="_blank" title="Visita nuestro sitio web" rel="noopener noreferrer"> Visita nuestro sitio web en una nueva pestaña </a>
</body>
</html>
El atributo title proporciona información adicional al usuario al pasar el mouse sobre el enlace. El atributo rel con los valores noopener y noreferrer mejora la seguridad al abrir enlaces en una nueva ventana o pestaña.
¿Cómo citar? Pichardo, A. & Del Moral, M. (s.f.). Ejemplo de Enlaces, Ligas O Hipervinculos En HTML.Ejemplo de. Recuperado el 31 de Agosto de 2023 de https://www.ejemplode.com/17-html/33-ejemplo_de_enlaces_ligas_o_hipervinculos_en_html.html
Últimos 10 comentarios