Comment sont organisés les fichiers d’un site

Pourquoi un site contient autant de fichiers

Vous téléchargez une sauvegarde de votre site ou ouvrez le gestionnaire de fichiers de votre hébergeur. Vous découvrez des dossiers, des images, des fichiers HTML, CSS et JavaScript, des réglages aux noms inconnus et parfois des milliers d’éléments.

Cette vue peut être déroutante. Une page visible peut dépendre d’une feuille de style, de plusieurs images, d’un script, d’une police et de fichiers que le serveur utilise avant de répondre. Tout ne forme donc pas une seule page facile à reconnaître.

L’objectif n’est pas d’apprendre à tout modifier. Il est d’abord de savoir ce que vous regardez, de repérer les grandes familles de fichiers et d’éviter une suppression qui rendrait le site incomplet.

Fichiers, dossiers et arborescence

Un fichier contient une information ou des instructions. Une image, une feuille de style, un script, une page HTML, un document PDF, une police ou une archive sont des fichiers.

Un dossier sert à organiser des fichiers, mais aussi d’autres dossiers. On trouve souvent des dossiers nommés images, styles, scripts, pages, telechargements ou sauvegardes.

L’ensemble forme une arborescence. Comme dans un meuble de classement, le dossier principal est le meuble, les sous-dossiers sont les tiroirs et les chemises, puis les documents sont les fichiers. Cette image aide à se repérer, avec une limite : un site peut charger des fichiers qui viennent de plusieurs endroits, pas seulement d’un même dossier.

Comprendre le chemin d’un fichier

Un chemin indique où se trouve un fichier dans l’arborescence. Dans images/logo.png, le fichier se nomme logo.png et il se trouve dans le dossier images. Les barres séparent les dossiers traversés.

assets/css/styles.css passe d’abord par assets, puis par css. Son extension .css indique qu’il s’agit généralement d’une feuille de style. De même, documents/tarifs.pdf désigne un document dans un dossier de documents.

Un chemin relatif est compris par rapport à l’emplacement du fichier qui le mentionne. Un chemin absolu part d’un point de référence plus global, par exemple la racine d’un site ou une adresse complète. Au début, retenez surtout qu’un chemin permet à un fichier d’en retrouver un autre.

Les extensions les plus courantes

L’extension est la partie située après le dernier point du nom. Elle donne une indication sur le format, sans suffire à expliquer le rôle exact du fichier dans votre site.

Vous rencontrerez aussi du .png, .svg ou .avif pour les images, du .xml et parfois des fichiers sans extension. Sur le serveur, du PHP, des modèles et des fichiers de configuration peuvent participer à la préparation d’une page.

Les fichiers reçus par le navigateur

Le navigateur peut recevoir du HTML, du CSS, du JavaScript, des images, des polices, des vidéos ou des documents publics. Il assemble ces ressources pour afficher la page que le visiteur a demandée.

Le guide Du navigateur au serveur décrit ce trajet. Ici, retenez que le navigateur ne reçoit pas forcément tous les fichiers du site, mais seulement les ressources nécessaires à cette visite.

Les fichiers utilisés par le serveur

Certains fichiers restent sur le serveur. Il peut s’agir de code PHP, de réglages, de modèles, de scripts serveur, de dépendances, de secrets, de journaux ou de sauvegardes. Le serveur peut les utiliser pour préparer une réponse, puis envoyer seulement le résultat utile au navigateur.

Cette distinction dépend de la technologie et de sa configuration. Elle ne constitue pas une règle absolue, mais elle explique pourquoi un visiteur ne doit pas pouvoir télécharger chaque élément présent dans un compte d’hébergement.

Site statique et site dynamique

Dans un site statique, les fichiers de page existent déjà ou sont générés avant la visite. Le serveur envoie alors des fichiers prêts à servir. Cela n’empêche pas le site d’avoir des interactions, par exemple un menu ou un formulaire géré avec JavaScript.

Dans un site dynamique, une partie de la page peut être préparée lorsque la demande arrive. Le serveur peut consulter une base de données, appliquer une logique, puis produire une réponse. Les frameworks modernes mélangent souvent ces approches selon les pages et les besoins.

Exemple d’un site statique

Dans cet exemple, index.html est souvent la page d’accueil dans un hébergement statique classique. Les autres fichiers HTML correspondent à des pages. Le dossier assets rassemble les ressources partagées : styles, scripts et images. Cette organisation est fréquente, mais elle n’est pas universelle.

Exemple d’un CMS

Un CMS comme WordPress contient généralement beaucoup plus de fichiers. On y trouve les fichiers du cœur, les thèmes, les extensions, les médias envoyés, la configuration et parfois un cache. Les pages et les articles peuvent aussi être conservés dans une base de données.

Il n’est pas utile de mémoriser les dossiers exacts maintenant. Le guide consacré à WordPress expliquera plus tard comment ses fichiers et sa base de données travaillent ensemble.

Exemple d’une application moderne

Un projet Astro, Next.js ou similaire peut contenir du code source, des composants, des pages, des styles, des fichiers publics, des réglages, des dépendances, des fichiers générés et un résultat de compilation. Cette arborescence sert d’abord à construire le projet.

Tous les fichiers du projet ne sont pas forcément envoyés tels quels sur le serveur public. Certains sont utilisés seulement pour fabriquer une version finale plus compacte et adaptée au navigateur.

Fichiers publics et privés

Les fichiers publics peuvent être affichés ou téléchargés par le navigateur : images, CSS, JavaScript côté client et documents volontairement partagés. Les fichiers privés comprennent plutôt la configuration, les secrets, les sauvegardes, les journaux, les clés et du code interne selon la technologie.

Un fichier placé au mauvais endroit peut devenir accessible publiquement. Une configuration exposée, une sauvegarde téléchargeable, une clé API visible, des données personnelles ou une archive oubliée peuvent alors créer un risque sérieux.

Noms de fichiers et casse

Logo.png et logo.png peuvent être considérés comme deux fichiers différents, notamment sur de nombreux serveurs Linux. Une image peut donc fonctionner sur un ordinateur puis manquer en ligne si le chemin ne respecte pas exactement les majuscules et minuscules.

Préférez des noms simples, cohérents et explicites, comme logo-atelier-martin.webp. Les espaces, accents, caractères spéciaux et noms très longs compliquent parfois les liens et les transferts.

Avant de modifier ou supprimer

Fichiers et base de données

Les fichiers peuvent contenir le code, le design, les images, les extensions et les réglages. Une base de données peut contenir les articles, les pages, les comptes, les réglages, les commandes, les formulaires et d’autres contenus structurés.

Pour un site dynamique, une sauvegarde complète doit souvent inclure les fichiers et la base de données. La différence sera expliquée en détail dans le prochain guide.

Ce qu’il faut retenir

• Une page visible dépend souvent de plusieurs fichiers et parfois de données.
• Les dossiers organisent les fichiers sous forme d’arborescence, et les chemins permettent de les retrouver.
• Le navigateur reçoit les ressources publiques nécessaires, tandis que le serveur peut utiliser d’autres fichiers en interne.
• Un site statique et un site dynamique peuvent organiser et préparer leurs pages différemment.
• Un nom exact, un bon emplacement et une sauvegarde comptent avant toute modification.

Questions fréquentes