Lección 5: URLs y enlaces

URLs: La dirección de los recursos en la web

Antes de aprender sobre enlaces, es crucial entender qué son las URLs y cómo funcionan.

¿Qué es una URL?

URL significa "Uniform Resource Locator" (Localizador Uniforme de Recursos). Es la dirección única que se le da a cada recurso en la web, ya sea una página web, una imagen, un video, etc.

Anatomía de una URL

Una URL típica se compone de varias partes:

URL

https://www.ejemplo.com:8080/ruta/pagina.html?parametro1=valor1¶metro2=valor2#seccion

Esquema o protocolo: "https://" - Define cómo se accederá al recurso.
Subdominio: "www" - Una subdivisión del dominio principal.
Dominio: "ejemplo.com" - El nombre único del sitio web.
Puerto: ":8080" - Opcional, especifica el puerto de conexión.
Ruta: "/ruta/pagina.html" - La ubicación específica del recurso en el servidor.
Parámetros de consulta: "?parametro1=valor1¶metro2=valor2" - Datos adicionales enviados al servidor.
Fragmento: "#seccion" - Referencia a una parte específica de la página.

Tipos de URLs

Existen dos tipos principales de URLs:

URLs absolutas: Proporcionan la dirección completa del recurso, incluyendo el protocolo y el dominio.
URLs relativas: Dan la ubicación de un recurso en relación con la página actual.

Enlaces HTML: Conectando la web

Anatomía de un enlace HTML

En HTML, los enlaces se crean con la etiqueta <a> (de "anchor" o ancla). El atributo más importante de esta etiqueta es href, que especifica el destino del enlace.

HTML

<a href="https://www.ejemplo.com">Visita Ejemplo.com</a>

Enlaces internos

Los enlaces internos apuntan a otras partes del mismo documento o sitio web. Pueden usar URLs relativas:

HTML

<a href="contacto.html">Contacto</a>
<a href="#seccion1">Ir a Sección 1</a>

Enlaces externos

Los enlaces externos apuntan a otros sitios web y generalmente usan URLs absolutas:

HTML

<a href="https://www.wikipedia.org">Wikipedia</a>

Enlaces a direcciones de correo electrónico

Puedes crear enlaces que abran el cliente de correo electrónico del usuario:

HTML

<a href="mailto:ejemplo@correo.com">Enviar email</a>

Atributo target

El atributo target controla cómo se abre el enlace:

HTML

<a href="https://www.ejemplo.com" target="_blank">Abrir en nueva pestaña</a>

Enlaces relativos

Los enlaces relativos son muy útiles para vincular páginas dentro de tu propio sitio web. Aquí hay algunos ejemplos:

Enlace a una página en el mismo directorio: <a href="acerca.html">Acerca de</a>
Enlace a una página en un directorio que contiene al directorio en el que está esta página: <a href="../pagina_arriba.html">Página arriba</a>
Enlace a una página en un subdirectorio que está contenido en el directorio en el que está la página: <a href="subdirectorio1/pagina_abajo.html">Página abajo</a>

Buenas prácticas para la creación de enlaces

Usa texto descriptivo para los enlaces.
Evita usar "haz clic aquí" como texto del enlace.
Considera la accesibilidad al crear enlaces.
Es una buena práctica abrir enlaces internos en la misma ventana y abrir enlaces externos en una nueva ventana.

Ejercicios prácticos

Ejercicio 1: Enlace externo en nueva ventana

Crea un enlace a https://ceibal.edu.uy que se abra en una nueva ventana.

Ejercicio 2: Ancla dentro de la página

Crea un ancla en el siguiente párrafo con el id "mi-ancla" y luego crea un enlace que apunte a esa ancla.

Ejercicio 3: Enlace relativo en el mismo directorio

Crea un enlace a una página llamada acerca.html que estaría en el mismo directorio que el archivo desde el que se enlaza.

Ejercicio 4: Enlace relativo a un directorio que contiene al directorio actual

Crea un enlace a una página llamada pagina_arriba.html que estaría en el directorio que contiene al directorio actual.

Ejercicio 5: Enlace relativo a un subdirectorio

Crea un enlace a una página llamada pagina_abajo.html que estaría en un subdirectorio llamado subdirectorio1.