El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

Los hipervínculos son una de las características más fundamentales y poderosas de HTML, ya que permiten conectar diferentes páginas web y recursos en la web. En esta lección, aprenderás cómo crear y utilizar hipervínculos en tus documentos HTML.

Conceptos Clave

Etiqueta <a>: La etiqueta <a> (anchor) se utiliza para definir un hipervínculo.
Atributo href: El atributo href (hypertext reference) especifica la URL del destino del enlace.
Texto del Enlace: El texto que aparece entre las etiquetas de apertura y cierre <a> es el texto que se muestra como el enlace clicable.

Estructura Básica de un Hipervínculo

La estructura básica de un hipervínculo en HTML es la siguiente:

<a href="URL_del_destino">Texto del Enlace</a>

Ejemplo Práctico

Vamos a crear un hipervínculo que enlace a la página principal de Wikipedia:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejemplo de Hipervínculo</title>
</head>
<body>
    <p>Visita la <a href="https://www.wikipedia.org/">página principal de Wikipedia</a> para obtener más información.</p>
</body>
</html>

En este ejemplo:

La etiqueta <a> define el hipervínculo.
El atributo href contiene la URL https://www.wikipedia.org/.
El texto "página principal de Wikipedia" es el texto clicable del enlace.

Tipos de Enlaces

Enlaces Absolutos

Un enlace absoluto contiene una URL completa, incluyendo el protocolo (http, https, etc.). Por ejemplo:

<a href="https://www.google.com">Google</a>

Enlaces Relativos

Un enlace relativo apunta a una ubicación en relación con el documento actual. Por ejemplo, si tienes una estructura de carpetas como esta:

/mi-sitio
    /index.html
    /contacto.html

Puedes crear un enlace relativo desde index.html a contacto.html así:

<a href="contacto.html">Contacto</a>

Enlaces de Anclaje

Los enlaces de anclaje permiten saltar a una sección específica dentro de la misma página o a otra página. Utilizan el símbolo # seguido del ID del elemento de destino. Por ejemplo:

<a href="#seccion1">Ir a la Sección 1</a>

<h2 id="seccion1">Sección 1</h2>
<p>Contenido de la Sección 1</p>

Abrir Enlaces en una Nueva Pestaña

Para abrir un enlace en una nueva pestaña, puedes usar el atributo target con el valor _blank:

<a href="https://www.wikipedia.org/" target="_blank">Wikipedia en una nueva pestaña</a>

Ejercicio Práctico

Ejercicio 1: Crear un Enlace Absoluto

Crea un archivo HTML que contenga un enlace absoluto a tu sitio web favorito.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Enlace Absoluto</title>
</head>
<body>
    <p>Visita <a href="https://www.ejemplo.com">mi sitio web favorito</a>.</p>
</body>
</html>

Ejercicio 2: Crear un Enlace Relativo

Supongamos que tienes dos archivos HTML en la misma carpeta: index.html y about.html. Crea un enlace en index.html que apunte a about.html.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Enlace Relativo</title>
</head>
<body>
    <p>Conoce más sobre nosotros en nuestra <a href="about.html">página de información</a>.</p>
</body>
</html>

Ejercicio 3: Crear un Enlace de Anclaje

Crea un enlace que salte a una sección específica dentro de la misma página.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Enlace de Anclaje</title>
</head>
<body>
    <p><a href="#seccion2">Ir a la Sección 2</a></p>

    <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>
</body>
</html>

Conclusión

En esta lección, has aprendido cómo crear hipervínculos utilizando la etiqueta <a> y el atributo href. También has visto cómo crear enlaces absolutos, relativos y de anclaje, así como abrir enlaces en una nueva pestaña. Practica creando diferentes tipos de enlaces para familiarizarte con su uso y mejorar la navegación en tus páginas web.

En la próxima lección, aprenderemos cómo añadir imágenes a nuestras páginas HTML.

Creando Hipervínculos

Conceptos Clave

Estructura Básica de un Hipervínculo

Ejemplo Práctico

Tipos de Enlaces

Enlaces Absolutos

Enlaces Relativos

Enlaces de Anclaje

Abrir Enlaces en una Nueva Pestaña

Ejercicio Práctico

Ejercicio 1: Crear un Enlace Absoluto

Ejercicio 2: Crear un Enlace Relativo

Ejercicio 3: Crear un Enlace de Anclaje

Conclusión

Curso de HTML

Módulo 1: Introducción a HTML

Módulo 2: Formateo de Texto en HTML

Módulo 3: Enlaces y Medios en HTML

Módulo 4: Tablas en HTML

Módulo 5: Formularios en HTML

Módulo 6: Elementos Semánticos de HTML5

Módulo 7: Técnicas Avanzadas de HTML

Módulo 8: Integración de HTML y CSS

Módulo 9: Diseño Web Responsivo

Módulo 10: Mejores Prácticas y Accesibilidad

Módulo 11: Proyecto: Construyendo un Sitio Web Completo