Enlaces, imágenes y rutas

Una ruta describe la relación entre archivos, no la ubicación de tu ordenador. Si index.html está en la carpeta raíz y img/mapa.png dentro de img, la ruta relativa es estable al mover el proyecto completo. El texto alternativo debe explicar la función de una imagen informativa.

Ejemplo resuelto

Una tarjeta enlaza al horario y muestra un mapa esquemático guardado en el proyecto.

<a href="horario.html">Consultar el horario completo</a>
<img src="img/mapa.png" alt="Mapa del recorrido desde la biblioteca hasta la sala 2">

1. Comprueba que horario.html está junto a index.html.

2. Cuenta una carpeta para llegar a img desde el archivo actual.

3. Escribe un alt útil, no el nombre del archivo.

4. Activa el enlace y revisa que abre el destino esperado.

Error frecuente: usar C:\\Users\\... como src. Corrígelo con rutas relativas del proyecto y barras /.

Pruébalo

Crea un enlace a contacto.html y una imagen img/puerta.png con descripción funcional.

Comprueba tu resultado

El enlace debe resolver a un archivo del proyecto y el alt debe describir qué aporta la imagen, no decir solo “imagen”.

Si el mapa es necesario para orientarse, escribe junto a él instrucciones del recorrido; el texto breve del alt solo anuncia su propósito. Para una imagen exclusivamente decorativa usa alt="", conservando el atributo.