Enlaces e imágenes: rutas, alt y formatos

Los enlaces convirtieron documentos aislados en LA web. Hoy aprendes a crearlos, a enlazar imágenes y — lo más importante — a entender las rutas: el concepto que hace tropezar a todo principiante exactamente una vez. La tuya será hoy, en ambiente controlado.

La etiqueta a: el hipervínculo

<!-- Enlace externo: URL completa, con https:// -->
<a href="https://developer.mozilla.org">Ir a MDN</a>

<!-- Enlace a otra página de TU sitio -->
<a href="contacto.html">Contacto</a>

<!-- Abrir en pestaña nueva (solo para sitios externos) -->
<a href="https://caniuse.com" target="_blank" rel="noopener">Can I Use</a>

El atributo href es el destino. Cuando uses target="_blank" (pestaña nueva), acompáñalo SIEMPRE de rel="noopener": evita que la página destino pueda manipular la tuya — un detalle de seguridad que muchos seniors olvidan.

Rutas: el mapa de tu proyecto

Imagina esta estructura de carpetas:

mi-sitio/
├── index.html
├── contacto.html
└── img/
  └── logo.png

Desde index.html, estas rutas apuntan al logo:

• img/logo.png — ruta relativa: "desde donde estoy, entra a img y toma logo.png".
• ./img/logo.png — igual que la anterior (./ = "aquí").
• ../ significa "sube una carpeta" — la usarás cuando el archivo que enlaza esté dentro de una subcarpeta.

Imágenes

<img
src="img/atardecer.webp"
alt="Atardecer naranja sobre el mar, con un velero en el horizonte"
width="800"
height="600"
>

Tres atributos no negociables:

1. src: la ruta a la imagen (todo lo que acabas de aprender aplica).
2. alt: descripción textual. La leen los lectores de pantalla, aparece si la imagen falla y la usa Google Imágenes. Escribe lo que le dirías por teléfono a alguien que no puede ver la foto. Si la imagen es puramente decorativa, usa alt="" (vacío pero presente).
3. width y height: el tamaño real. El navegador reserva el espacio antes de descargar la imagen y la página no "salta" mientras carga.

<a href="https://developer.mozilla.org" target="_blank" rel="noopener">
Este enlace abre MDN en otra pestaña
</a>
<p>Y esta imagen tiene una ruta rota — mira cómo el alt te salva:</p>
<img src="no-existe.webp" alt="Atardecer naranja sobre el mar" width="200" height="100">

body { font-family: system-ui; padding: 24px; color: #1e293b; }
a { color: #6D28D9; }

Mini-reto

Crea la estructura de carpetas del ejemplo (con cualquier imagen dentro de img/) y enlázala desde tu index.html con ruta relativa. Luego rómpela a propósito: renombra la carpeta img a fotos sin tocar el HTML, recarga, y observa el alt haciendo su trabajo.

Qué sigue

Ya tienes texto, enlaces e imágenes: los ladrillos. La próxima lección te enseña a organizarlos como un arquitecto: HTML semántico — la diferencia entre una página que Google entiende y una sopa de divs.