Que es una ruta

Una ruta es la forma de apuntar a un archivo o directorio en un sistema de archivos, es decir, señalar la ruta exacta donde esta ese archivo. Para apuntar al archivo hay que ir indicandole el camino con los nombres de los directorios hasta llegar al archivo que se quiere referenciar. Estos nombres estarán separados por un caracter delimitador que usualmente es la barra diagonal [/].

directorio1/directorio2/archivo.*

Ruta absoluta

Las rutas absolutas señalan la ubicación de un archivo desde el directorio raíz, incluyen todas las partes de la URL, con lo que no se necesita información adicional para referenciar la ruta.

Imagina que tienes esta página http://www.webDeEjemplo.com y has incluido otra página que se encuentra en http://www.webDeEjemplo.com/ruta1/ruta2/archivo.html, y quieres enlazar a esta última desde ruta1, para enlazarla deberias escribir la ruta completa que te acabo de mostrar, eso sería una ruta absoluta.

http://www.webDeEjemplo.com/ruta1/ruta2/archivo.html

Si en vez de un archivo HTML quisieras añadir una imagen que esta en el mismo directorio del ejemplo anterior, seria algo así.

<img src="http://www.webDeEjemplo.com/ruta1/ruta2/imagen.jpg">

Ruta relativa

Las rutas relativas señalan la ubicación de un archivo a partir de la posición de origen, estas prescinden de algunas partes de las URLS y las hacen más breves aunque es necesario disponer de información adicional para referenciarlas.

Imagina la misma página http://www.webDeEjemplo.com con la nueva página que se encuentra en http://www.webDeEjemplo.com/ruta1/ruta2/archivo.html, y quieres enlazar a esta última desde ruta1, entonces deberias escribir la ruta desde la posición donde te encuentras, en este caso ruta1, que no se cuenta porque estás en ella, para referenciarla escribirias esto, ruta2/archivo.html, eso sería una ruta relativa.

ruta2/archivo.html

Si en vez de un archivo HTML quisieras añadir una imagen que esta en el mismo directorio del ejemplo anterior, seria algo así.

<img src="ruta2/imagen.jpg">

Ahora imagina que estamos en ruta2 y el archivo al que queremos apuntar se encuentra dentro de ruta1, en este caso la ruta cambia, ya que partimos de un origen diferente, así si quisieramos apuntar a un archivo que se encuentra en ruta1 desde ruta2, tendriamos que apuntar primero un directorio hacia atrás, ya que ruta1 se encuentra por encima de ruta2, para eso utilizaremos dos puntos seguido de la barra diagonal ../.

../ruta2/archivo.html

Si en vez de un archivo HTML quisieras añadir una imagen que esta en el mismo directorio del ejemplo anterior, seria algo así.

<img src="../ruta2/imagen.jpg">

Si el archivo estuviera en el mismo directorio solo tendriamos que escribir su nombre y su extensión.

<img src="imagen.jpg">
Esto sirve tanto para imagenes como enlaces como cualquier etiqueta que necesite enrutar a un archivo concreto. Si el archivo, enlace, imagen, etc.. están en internet, es decir es un archivo externo, tan solo hay que copiar el URL que este en el navegador, los archivos externos a nuestra web son rutas absolutas, ya que requieren de todos los datos para referenciarlos.

Daniel Fernández Velázquez

Me encanta aprender y practicar la programación web, Autodidacta y apasionado de la tecnología.