🏠 Retour aux supports de cours

Les chemins relatifs

Souvent source d'erreurs, de pages introuvables, d'images manquantes ou de styles non appliqués, les règles d'écritures des chemins et url sont très importantes pour s’assurer que tout les liens se font correctement.

Prenons un répertoire de travail assez représentatif d'un projet web:

nom.ext → Chemin relatif vers un fichier local

Comme il s'agit d'un chemin relatif, la cible d'un fichier commence toujours depuis là où on se trouve. Dans le cas où l’image se trouve au même niveau que le fichier source (là où on appelle l’image), il suffit d’écrire le nom du fichier complet pour que l’image soit affichée.

<img src="**miaou.jpg**"
alt="Les chats sont mignons.">

Untitled

dossier/nom.ext → Répertoire enfant

On utilise le caractère / pour signifier qu'on descend dans un répertoire ou un sous-dossier. Cela permet d'accéder à des fichiers qui se trouvent dans des dossiers enfants du répertoire actuel.

Par exemple, si on veut lier une feuille de style CSS qui se trouve dans un dossier "css" Ă  partir du fichier HTML principal, on utiliserait :

<head>
	<link rel="stylesheet" href="**css/styles.css**" />
<head>

Il est ainsi possible d'accéder à un fichier dans un sous-dossier sur plusieurs niveaux:

<img src="**img/voyage/photo-3.jpg**" alt="Un chat qui dort.">

Untitled

../cible/nom.ext → Répertoire parent

On utilise la combinaison de caractère ../ pour remonter vers un répertoire parent.

Dans cet exemple, on se trouve dans le fichier pages/contact.html et on essaie de lier une image qui se trouve Ă  la racine du projet.

<img src="**../miaou.jpg**" alt="Les chats sont mignons.">

Il est aussi possible de combiner ces sélecteur ../ et /

Dans l’exemple suivant on souhaite atteindre une image chat-mignon.jpg qui se trouve dans le dossier img, depuis une page qui se trouve dans un dossier.

<img src="../img/chat-mignon.jpg" alt="Un chat qui dort.">

Untitled

/cible/nom.ext → Chemin absolu