Enlaces e imágenes

¡Bienvenido a tu siguiente paso en desarrollo web! Hasta ahora, tus páginas quizá se veían como documentos de texto simples. Hoy vamos a cambiar eso. Los enlaces son las funciones esenciales que realmente convierten a la World Wide Web en una "web". En esta lección aprenderás a conectar páginas entre sí y a darles vida con imágenes.

¡Vamos allá!

Crear hipervínculos (la etiqueta <a>)

Para crear un enlace en HTML, usamos lo que se llama una etiqueta "anchor", escrita como <a>. Por sí sola, esta etiqueta no hace mucho, porque debes decirle al navegador exactamente a dónde debe ir el enlace.

Esto lo hacemos con un atributo. Piensa en un atributo como una instrucción especial que se escribe dentro de una etiqueta HTML. En los enlaces, el atributo obligatorio se llama href, que significa referencia de hipertexto. El atributo href contiene la dirección de destino.

Así se escribe un enlace de texto simple:

<a href="https://www.example.com">¡Visita nuestro sitio web!</a>

En este ejemplo, el texto "¡Visita nuestro sitio web!" se vuelve clicable, y href le dice al navegador a dónde llevar al usuario.

Agregar imágenes (la etiqueta <img>)

Los sitios web serían bastante aburridos sin imágenes. Para agregar una imagen, usamos la etiqueta de imagen, escrita como <img>.

A diferencia de la etiqueta anchor, la etiqueta de imagen es "autocontenida", también conocida como elemento vacío. Esto significa que no envuelve texto, por lo que no necesita una etiqueta de cierre </img>. Simplemente coloca la imagen directamente en la página.

La etiqueta <img> necesita dos atributos muy importantes para funcionar correctamente:

• src (Source): Le dice al navegador dónde se encuentra exactamente el archivo de imagen.
• alt (Texto alternativo): Es una descripción escrita de la imagen.

¿Por qué alt es tan importante? ¡Siempre debes incluir el atributo alt! Si la imagen falla o tarda demasiado en cargar, el navegador mostrará ese texto en su lugar. Y más importante todavía: ofrece accesibilidad esencial para tu sitio. Las personas con discapacidad visual dependen de lectores de pantalla para escuchar las páginas web, y el texto alt describe la imagen de forma segura.

Así se ve una etiqueta de imagen completa:

<img src="puppy.jpg" alt="Un cachorro golden retriever esponjoso jugando en el césped.">

El gran concepto: rutas absolutas vs. relativas

Cuando usas un atributo href o src, le estás dando al navegador una "ruta" para encontrar un archivo específico. Hay dos tipos principales de rutas, y entender su diferencia es un gran paso para principiantes.

Rutas absolutas Piensa en una ruta absoluta como una dirección postal completa. Una dirección real incluye país, estado, ciudad, calle y número para ubicar un punto exacto. En la web, una ruta absoluta siempre empieza con un protocolo como https:// e incluye el dominio completo del sitio. Se usan cuando quieres enlazar a sitios completamente distintos.

Rutas relativas Piensa en una ruta relativa como dar indicaciones para caminar desde donde estás ahora. En vez de una dirección completa, puedes decir "ve a la habitación de al lado" o "sube un piso". En la web, las rutas relativas se usan para enlazar archivos o imágenes que viven dentro de tu propio proyecto.

Por ejemplo, si tienes una imagen guardada en una carpeta "images" justo al lado de tu página actual, puedes usar una ruta relativa así:

<img src="./images/pic.jpg" alt="Un atardecer hermoso.">

./ simplemente le dice al navegador que empiece a buscar en la carpeta actual.

Imágenes clicables

Ahora que ya sabes crear enlaces e imágenes, puedes combinarlos. Si quieres que una imagen funcione como botón y lleve al usuario a otra página, solo tienes que envolver la etiqueta <img> dentro de una etiqueta <a>.

Aquí tienes un ejemplo rápido de una imagen clicable:

<a href="https://www.example.com">
  <img src="./images/button.png" alt="Haz clic aquí para visitar a nuestro patrocinador.">
</a>

Resumen

¡Muy buen trabajo! Ya desbloqueaste la capacidad de conectar páginas web y mostrar contenido visual. Repasemos los puntos clave:

• Hipervínculos: Usa la etiqueta <a> con el atributo href para crear enlaces de texto.
• Imágenes: Usa la etiqueta autocontenida <img> con el atributo src para mostrar imágenes.
• Accesibilidad: Incluye siempre texto alt descriptivo en tus imágenes para lectores de pantalla y seguridad.
• Rutas absolutas: Usa direcciones completas (https://...) para apuntar a otros sitios web.
• Rutas relativas: Usa rutas locales (./...) para apuntar a archivos dentro de tu propio proyecto.
• Imágenes clicables: Puedes hacer que una imagen sea clicable colocando un elemento <img> dentro de un elemento <a>.