← Retour au sommaire
📁
Architecture & chemins de fichiers
Apprends à bien ranger ton projet et à naviguer entre les fichiers
Débutant
Essentiel
Pratique
?
Pourquoi bien organiser ses fichiers ?
Un site web, c'est rarement un seul fichier. On a du HTML, du CSS, du JavaScript, des images... Si tout est mélangé au même endroit, c'est le bazar ! Bien organiser ses fichiers dans des dossiers, c'est comme ranger sa chambre : on retrouve tout facilement, et on ne casse rien en cherchant.
Désorganisé 😵
index.html
style.css
script.js
photo.jpg
logo.png
contact.css
contact.html
banniere.jpg
Bien rangé 😎
index.html
contact.html
📁 Assets/
📁 css/
📁 js/
📁 img/
A
L'architecture classique d'un projet web
Voici la structure la plus utilisée quand on commence un site web. C'est une convention : la plupart des développeurs organisent leurs projets de cette façon, ce qui permet de s'y retrouver facilement même sur le projet d'un autre !
mon-site/
│
├── index.html
├── contact.html
│
└── 📁 Assets/
├── 📁 css/
│ ├── style.css
│ └── contact.css
│
├── 📁 js/
│ └── script.js
│
└── 📁 img/
├── logo.png
├── banniere.jpg
└── photo-equipe.jpg
💡index.html est toujours le nom de la page d'accueil. C'est une convention universelle : quand un navigateur ouvre un dossier, il cherche automatiquement un fichier nommé index.html !
C
C'est quoi un chemin de fichier ?
Un chemin (ou path en anglais) indique où se trouve un fichier, comme une adresse. Il y a deux types de chemins : absolu (l'adresse complète depuis la racine) et relatif (l'adresse depuis l'endroit où tu te trouves).
Chemin absolu
C:/mon-site/Assets/css/style.css
L'adresse complète depuis le début. Fonctionne partout, mais inutilisable sur un autre ordinateur ou en ligne.
Chemin relatif ✓
Assets/css/style.css
L'adresse depuis le fichier actuel. Fonctionne partout, même en ligne. C'est celui qu'on utilise toujours !
⚠En développement web, on utilise toujours les chemins relatifs. Les chemins absolus comme C:/Users/... ne fonctionneront pas quand ton site sera mis en ligne !
L
Comment lire et écrire un chemin ?
Le chemin se lit comme des indications sur un plan : chaque élément séparé par un / est soit un dossier à traverser, soit le fichier final à atteindre.
Décomposition du chemin : Assets/css/style.css
Assets
/
css
/
style.css
→ Entrer dans le dossier Assets, puis dans le dossier css, puis prendre le fichier style.css.
Décomposition du chemin : Assets/img/logo.png
Assets
/
img
/
logo.png
→ Entrer dans le dossier Assets, puis dans le dossier img, puis prendre le fichier logo.png.
<!-- Dans index.html (au niveau racine) -->
<link rel="stylesheet" href="Assets/css/style.css">
<img src="Assets/img/logo.png" alt="Logo">
<script src="Assets/js/script.js"></script>
💡Quand le fichier HTML est au même niveau que le dossier Assets, le chemin commence directement par Assets/. Pas besoin d'écrire le nom du dossier du projet !
..
Monter d'un niveau avec ..
Que se passe-t-il si ton fichier HTML n'est pas à la racine du projet, mais dans un sous-dossier ? Il faut alors remonter d'un niveau avant de descendre vers Assets. C'est à ça que sert .. (deux points) !
mon-site/
├── index.html
├── 📁 pages/
│ └── contact.html
└── 📁 Assets/
└── 📁 css/
└── style.css
| Depuis quel fichier ? |
Chemin vers style.css |
Pourquoi ? |
index.html
(racine du projet) |
Assets/css/style.css |
Assets est juste à côté, on y va directement. |
pages/contact.html
(dans le dossier pages/) |
../Assets/css/style.css |
.. remonte dans mon-site/, puis on entre dans Assets/. |
Décomposition de ../Assets/css/style.css
..
/
Assets
/
css
/
style.css
→ Remonter d'un dossier (..), puis entrer dans Assets, puis dans css, puis prendre style.css.
<!-- Dans pages/contact.html -->
<link rel="stylesheet" href="../Assets/css/style.css">
<img src="../Assets/img/logo.png" alt="Logo">
<script src="../Assets/js/script.js"></script>
💡Chaque .. remonte d'un niveau. Si ton fichier est deux niveaux trop bas, tu écrirai ../../Assets/... pour remonter deux fois !
R
Les notations à connaître
Voici les trois écritures utilisées dans les chemins relatifs :
| Notation | Signification | Exemple |
|---|
Assets/ |
Descendre dans le dossier Assets (qui est au même niveau) |
Assets/css/style.css |
./ |
Le dossier actuel (optionnel, rarement utilisé) |
./Assets/css/style.css |
../ |
Remonter d'un dossier parent |
../Assets/css/style.css |
../../ |
Remonter de deux dossiers parents |
../../Assets/img/logo.png |
/ |
La racine du serveur (début absolu) |
/Assets/css/style.css |
E
Exemple complet : naviguer entre les pages
Les chemins relatifs servent aussi pour les liens entre pages HTML avec la balise <a>. Voici comment lier les pages selon leur position :
mon-site/
├── index.html
├── 📁 pages/
│ ├── contact.html
│ └── apropos.html
└── 📁 Assets/
├── 📁 css/ style.css
├── 📁 js/ script.js
└── 📁 img/ logo.png
<!-- Dans index.html → vers les sous-pages -->
<a href="pages/contact.html">Contact</a>
<a href="pages/apropos.html">À propos</a>
<!-- Dans pages/contact.html → retour à l'accueil -->
<a href="../index.html">Accueil</a>
<!-- Dans pages/contact.html → vers apropos (même dossier) -->
<a href="apropos.html">À propos</a>
💡Deux fichiers dans le même dossier se lient directement par leur nom : apropos.html, sans aucun chemin. C'est le cas le plus simple !
Assets/css/style.cssDepuis la racine : descendre directement
../Assets/css/style.cssDepuis un sous-dossier : remonter d'abord
pages/contact.htmlLien vers une page dans un sous-dossier
../index.htmlLien vers la page parente
!
Les erreurs les plus courantes
Voici les fautes que tout le monde fait au début — et comment les éviter !
❌ Majuscules/minuscules incorrectes
href="assets/css/style.css" ← faux si le dossier s'appelle "Assets"
href="Assets/css/style.css" ← correct
Les noms de fichiers et dossiers sont sensibles à la casse. Assets ≠ assets.
❌ Oublier le .. quand on est dans un sous-dossier
href="Assets/css/style.css" ← faux depuis pages/contact.html
href="../Assets/css/style.css" ← correct
Si le fichier est dans un sous-dossier, il faut remonter avec .. avant d'aller chercher Assets.
❌ Espaces dans les noms de fichiers
src="Assets/img/ma photo.jpg" ← l'espace pose problème
src="Assets/img/ma-photo.jpg" ← utiliser des tirets
Ne mets jamais d'espaces dans les noms de fichiers ou de dossiers. Utilise des tirets ou des underscores.
✓
Résumé : l'architecture à retenir
Crée toujours ton projet avec cette structure. Tu peux la copier à chaque nouveau projet !
mon-site/
├── index.html
│
└── 📁 Assets/
├── 📁 css/
│ └── style.css
├── 📁 js/
│ └── script.js
└── 📁 img/
└── logo.png
💡Dans VS Code, tu vois l'arbre de tes fichiers dans la colonne de gauche. Clique droit sur un dossier pour créer un nouveau fichier ou un nouveau sous-dossier directement !
Tu as compris comment organiser un projet ? Bravo ! 🎉
Teste tes connaissances avec les exercices !
Passer aux exercices →
Exercice 1 : reconstruire l'arbre de fichiers
Exercice 2 : écrire le bon chemin selon la position