Rutas de archivo

Insertar una imagen en el documento HTML

Para insertar una imagen dentro de una página web con HTML debemos utilizar la etiqueta <img>, la cual, no tiene etiqueta de cierre.
Generalmente, la imagen se encontrará en el mismo servidor donde se almacenan nuestras páginas HTML. Los formatos clásicos son los archivos con extensiones gif, jpg y png.
La sintaxis de esta etiqueta es:
<img src="imagen.jpg" alt="texto descriptivo"> 

Como mínimo, debemos emplear los atributos src y alt de la etiqueta HTML img.
<img> viene de image
src viene de source
alt viene de alternative

Atributo src

En el atributo src indicamos la ruta y el nombre del archivo de imagen.
Es muy recomendable no emplear ni espacios, ni símbolos, ni tildes, ni eñes ni mayúsculas en los nombres de archivo para evitar dificultades.
Si la imagen se encuentra en el mismo directorio donde se almacena la página HTML, con indicar el nombre de archivo es suficiente, en ese caso, como se ve en el ejemplo, no es necesario indicar ninguna ruta de carpetas.

Atributo alt

El atributo alt lo usamos para especificar un texto que verán los usuarios cuando la imagen no se pueda mostrar.
También es lo que lee una aplicación de lectura de pantalla como las que usan las personas deficientes visuales e invidentes, de modo que el texto debe describir el contenido de la imagen.

Uso de la ruta y forma de referenciar a los archivos

Rutas relativas

Si la imagen se encontrara en una subcarpeta llamada imagenes, la ruta para obtenerla sería:
<img src="imagenes/imagen.jpg" alt="Imagen">

Es decir, anteponemos al nombre del archivo de la imagen el nombre de la carpeta y la barra /.
Si la imagen se encuentra en una carpeta padre de donde se encuentra la página HTML, la sintaxis será:
<img src="../imagen.jpg" alt="imagen">

Es decir, le anteponemos .. y la barra / al nombre del archivo de la imagen.
Los dos puntos seguidos, por tanto, sirven para dirigirnos a una capeta padre. De tal modo que si tuviéramos que subir dos niveles quedaría así:
<img src="../../imagen.jpg" alt="imagen">

En la imagen anterior nos encontramos en articulo1.html y debemos subir dos niveles para llegar a la imagen.
Por último, si queremos acceder a una imagen que se encuentra en una carpeta llamada imagenes y el archivo HTML desde el que referenciamos en otra carpeta que está al mismo nivel que la de imágenes, primero deberíamos subir un nivel y luego acceder a la carpeta imágenes, quedando del siguiente modo:
<img src="../imagenes/imagen.jpg" alt="imagen">

Esta forma de emplear rutas de archivos es por referencias relativas, es decir, que determinamos la ruta respecto al elemento desde el que solicitamos el recurso externo.