Home > Actualidad > Pressroom

Cómo usar rutas absolutas y rutas relativas

Cómo usar rutas absolutas y rutas relativas

Comparte esta noticia Enlace permanente

Los enlaces de Internet están formados por una serie de rutas (también conocidos con el término inglés ‘path’), donde se le indica la dirección a la que tiene que ir el navegador cuando pulsamos sobre ese link. Nos podemos encontrar dos tipos de rutas distintas:

- Ruta absoluta: Incluye el nombre del dominio.

Ejemplo: ‘https://www.hostalia.com/contratacion/openxchange/’

-Ruta relativa: Sólo indica el orden de directorios.

Ejemplo: ‘/contratacion/openxchange/’

 

Las rutas relativas son importantes cuando estás creando tu web, porque te permite comprobar los enlaces en los entornos de desarrollo y producción, o facilitar la migración de tu web a otro dominio, como te explicamos más adelante.

Ver White Paper: ‘Cómo usar rutas absolutas y rutas relativas’

 

rutas-relativas-absolutas-blog-hostalia-hosting

 

 

 

Rutas absolutas

ruta-absoluta-blog-hostalia-hosting

 

Estas rutas son las que mejor son entendidas por los usuarios, ya que en ellas se indica la url completa, incluyendo el dominio. Por ejemplo, la siguiente url:

http://www.hostalia.com/img/banners/banner-contacto-multiplan.png

Es la url hacia la imagen “banner-contacto-multiplan.png” que se encuentra ubicada dentro del subdirectorio “banners”, dentro de “img”, que a su vez está dentro del directorio raíz.

Las rutas absolutas se utilizan cuando queremos enlazar algún recurso que se encuentra hospedado en otra máquina o en otra web. También puede ser utilizado para vínculos locales, pero se desaconseja utilizar este método en estos casos, ya que si migramos el contenido a otro dominio se romperán todos los vínculos de las rutas absolutas locales, lo que afectará a nuestro posicionamiento web.

En formato HTML sería escribiría de la siguiente forma.

<a href=“http://www.hostalia.com”>Hostalia</a>

 

En este caso, siempre debemos poner al principio de la url “http” o “https”, ya que si no se pusiera los navegadores lo interpretan como un enlace relativo, e intentarían buscar el recurso en el propio dominio.

 

Rutas relativas

ruta-relativa-blog-hostalia-hosting

 

Se trata del tipo de ruta más utilizado, y recibe el nombre de relativa porque hace referencia a un archivo o directorio en relación a la posición actual donde nos encontremos.

La principal ventaja que ofrece este tipo de rutas es que facilita mucho el mantenimiento de una web, permitiendo mover el contenido de un dominio a otro sin tener que hacer ningún cambio en las rutas. En el caso de las absolutas, cambiar de dominio conlleva tener que modificar todas las rutas absolutas para indicarle el nombre del nuevo dominio.

Ahora veamos algunos ejemplos de uso de rutas relativas. Supongamos que partimos de la siguiente estructura:

rutas-directorios-blog-hostalia-hosting

 

1.- Enlace hacia un archivo que está en el mismo directorio

Supongamos que queremos añadir un link en el archivo “pedido.html” que enlace con el archivo “tienda.html” que están dentro del directorio “tienda“. Al estar los dos recursos en el mismo sitio, lo único que tendríamos que hacer sería añadir en el enlace la ruta “tienda.html“. A continuación os dejamos el código HTML que habría que utilizar:

<a href=“tienda.html”>Tienda</a>

archivos-mismo-directorio-blog-hostalia-hosting

 

 

2.- Crear un enlace hacia un archivo que está en una subcarpeta del mismo nivel

En este caso supongamos que queremos añadir un enlace en “pedido.html” que apunte hacia el archivo “registro.html” que está dentro del subdirectorio “clientes”. En este caso, la ruta relativa hacia ese archivo sería la siguiente: “clientes/registro.html”. Si lo pasamos a HTML nos quedaría algo similar a lo siguiente.

<a href=“clientes/registro.html”>Registro</a>

archivo-misma-subcarpeta-blog-hostalia-hosting

Como podéis ver, hemos hecho uso de la barra diagonal (/) con la que indicamos que tiene que bajar un nivel en la jerarquía de carpetas.

 

3.- Enlazar hacia un archivo que se encuentra en un nivel superior

Supongamos que ahora queremos poner un enlace en nuestra página “pedido.html” que vaya al “index.html” de nuestro portal y que se encuentra en un nivel superior al nuestro. En este caso, la ruta relativa a utilizar sería “../index.html”. En formato HTML quedaría de la siguiente forma.

<a href=”../index.html”>Index</a>

archivo-nivel-superior-blog-hostalia-hosting

En este caso podéis ver que hacemos uso de dos puntos y una barra oblicua (../) que nos permite subir un nivel en la jerarquía de carpetas.

Si tuviéramos que subir varios niveles, se podría utilizar la estructura “../” tantas veces como nos hiciera falta. Por ejemplo, supongamos que queremos añadir en “registro.html” un enlace a nuestro “index.html”, la url relativa a utilizar sería “../../index.html”. En formato HTML quedaría de la siguiente forma.

<a href=”../../index.html”>Index</a>

 

4.- Enlazar hacia un archivo que se encuentra en una subcarpeta distinta

Supongamos que en este caso queremos enlazar en el archivo “pedido.html” el recurso “producto.html” que se encuentra en otra subcarpeta distinta a donde está el archivo “pedido.html”. En este caso, la ruta relativa a utilizar sería: “../productos/producto.html”. En formato HTML quedaría de la siguiente forma.

<a href=“../productos/producto.html”>Producto</a>

archivo-otra-subcarpeta-blog-hostalia-hosting

En este caso lo que hacemos es utilizar “../” para subir un nivel, para después hacer uso de “productos/” para entrar dentro de la carpeta donde se encuentra el archivo “producto.html”.

 

5.- Rutas relativas a la raíz del sitio

Indica la ruta completa desde la raíz de un sitio web hasta el archivo que queremos enlazar. Las rutas relativas de este tipo siempre comenzará con una barra (/) que hace referencia al directorio raíz del sitio. Por poner un ejemplo, “/tienda/clientes/registro.html” es un enlace relativo a la raíz del sitio, ya que como podemos ver, empieza con una barra y recorre todas las carpetas y subcarpetas del árbol hasta llegar al recurso en cuestión.

ruta-relativa-raiz-blog-hostalia-hosting

Con la creación de este White Paper hemos pretendido aclararos las ideas sobre los enlaces absolutos y relativos que forman parte de cualquier página web.