Apprendre le HTML : URL absolue et URL relative

Publié le - Mis à jour le 02-10-2017

Avant de t’expliquer comment insérer des images et comment créer des liens, je dois d’abord t’expliquer la différence entre une URL absolue et une URL relative.

Une URL absolue indique le chemin complet, qui commence toujours par « http:// ». Une URL relative, en revanche, ne commencera jamais par « http:// ». Elle n’indique que le chemin relatif de la ressource sur le serveur, soit relativement à la page dans laquelle on l’écrit, soit relativement à la racine du site. La racine du site est le dossier qui contient l’ensemble du site, l’ensemble de ses sous-dossiers et fichiers.

Les URL relatives sont surtout utilisées pour faire des liens internes ou appeler des images à l’intérieur d’un même site web.
 

L’arborescence d’un site web

Sans doute t’est-il déjà arrivé de créer des dossiers sur ton ordinateur pour classer tes documents. Si tu fais des photos, peut-être as-tu par exemple créé un dossier (ou répertoire) que tu as nommé « photos » et dans lequel tu as créé des sous-dossiers pour classer tes photos par années : un dossier « 2010 », un dossier « 2011 », etc.

dossiers arborescence

Les fichiers d’un site web sont classés de la même façon. On met souvent par exemple toutes les images d’un site dans un répertoire « images » ou dans des sous-répertoires permettant de les classer plus finement, par exemple aussi par années ou par thèmes. L’ensemble des répertoires et des sous-répertoires crée une arborescence à plusieurs niveaux. On utilise aussi la métaphore de l’arbre généalogique et des liens de parenté pour exprimer leurs rapports, de la même façon qu’on l’utilise, comme on l’a déjà vu, pour désigner les rapports d’imbrication des balises dans une page HTML (c’est pour cela par exemple que l’on parle de racine du site pour le dossier contenant tous les autres dossiers du site et l’ensemble de ses fichiers).
 

Les URL relatives

Une URL relative indique soit le chemin dans cette arborescence entre la page dans laquelle on l’écrit (la page courante) et la ressource qu’elle cible, soit le chemin dans cette arborescence entre la racine du site et cette ressource.

Prenons pour exemple de ressource une image qu’on appellera « exemple.jpg » pour illustrer d’abord le premier cas, c’est-à-dire l’écriture d’URL relatives au fichier courant :

  • Si l’image est au même niveau dans l’arborescence que la page courante, l’URL de l’image sera simplement le nom du fichier :
  1. exemple.jpg
  • Si l’image est dans un répertoire nommé « images » au même niveau que la page, on écrira l’URL de la manière suivante :
  1. images/exemple.jpg
  • Si l’image est dans un sous-répertoire « 2013 » du même répertoire « images » :
  1. images/2013/exemple.jpg
  • parent du répertoire courant) :
  1. ../exemple.jpg
  • Si l’image est dans un sous-répertoire nommé « images », répertoire différent mais de même niveau que celui dans lequel se trouve la page (on dit qu’elle se trouve dans un répertoire frère) :
  1. ../images/exemple.jpg

En ce qui concerne l’écriture d’URL relatives à la racine du site, celle-ci commence toujours par une barre oblique et fait suivre l’ensemble des dossiers enfants dans lesquels figure la ressource :

  1. /dossier/2013/exemple.jpg

Ce chemin n’est plus relatif au fichier courant mais à la racine du site, il s’écrira donc toujours de la même façon que le dossier courant se trouve lui-même dans le sous répertoire « 2013 », dans un sous-répertoire frère « 2012 » ou n’importe où ailleurs dans l’arborescence du site.

Auteur :

Recommandations