Logo Matha

Cours

Blog

Classement

Besoin d'aide ?

Rejoins-nous ! actifs

Infos pratiques

html

Comprendre les liens relatifs et chemins absolus

Comment appeler des fichiers directement sur ton serveur ?

Alexandre Zana

Alexandre Zana

Fondateur @Matha

mer. 28

octobre 2020

3mn

de lecture

Le lien relatif

Lorsque tu as plusieurs fichiers sur ton serveur et que tu veux relier ces fichiers entre eux.

1
2
3
4
5
6
7
.
├── assets
│   ├── css
│   │   └── style.css
│   └── img
│       └── lion.jpg
└── index.html

Exemple :

  • Dans mon fichier index.html, je souhaite lier le fichier CSS.

  • Dans mon fichier style.css je souhaite avoir une image en arrière plan sur un élément CSS.

    body{ background-image:url('./../img/lion.jpg'); }

Des p'tits point, des p'tits points, toujours des p'tits points

Pour obtenir le bon fichier, on va devoir entrer le chemin exact vers le fichier. Un bon moyen mnémotechnique pour trouver ce dernier est d’appliquer la formule ci-dessous.

1) On récite le cheminement

  • Je suis dans le fichier style.css
  • Je remonte d’un dossier
  • Je vais dans le dossier img
  • Je choisis le fichier lion.jpg

On convertit ce cheminement en chemin relatif

  • A chaque fois que je dis » je suis » je mets un point.
  • A chaque fois que je dis » je remonte » je mets deux points.
  • A chaque fois que je dis » je vais dans le dossier » je mets le nom du dossier.
  • A chaque fois que je dis » je choisis le fichier » je mets le nom du fichier.

Entre chaque phrase, je mets un slash.

Ce qui donne :

1
./../img/lion.jpg

Plus simple non ?

Les chemins absolus

De temps en temps, on doit entrer le chemin absolu (c'est-à-dire depuis la racine )

C’est quoi la racine ? La racine, c’est l’entrée de ton système.

Sur Linux et Mac, c’est /, sur Windows ce serait C:/

Ensuite, on applique la même technique que pour les chemins relatifs.

Exemple :

1
/home/alex/web/monfichier.html

Pour aller plus loin, tu peux faire notre cours pour découvrir le code et les développeurs !

relatifabsolutepathhtml