Organisation des fichiers d'un site internet
Un site internet va être composé de plusieurs fichiers différents: des fichiers html, des scripts, des images, des feuilles de styles css. Selon les architecture et les librairies qu'on utilise, il n'est pas rare qu'un site internet comporte des milliers de fichiers. Il est donc très important de se donner une bonne structure pour nous aider à nous y retrouver facilement.
Comment organiser mes fichiers
On va se créer un répertoire principal qui va contenir tous les fichiers de notre site internet, appelons le par exemple mon_site. Directement dans se répertoire on va y créer les fichiers html dont un qui se nommera index.html et qui sera la porte d'entrée de notre site. On dira que c'est fichiers sont à la racine du projet, ils sont au niveau le plus bas du répertoire de base.
Ensuite on va créer un sous-répertoire assets. Dans ce répertoire on va stocker toutes les images, polices de caractères, vidéos, etc. Une bonne pratique est de créer dans assets des sous-répertoires pour chacune des catégories de ressources (les images par exemple). Ensuite, on va stocker les feuilles de styles et les scripts Javascript dans des sous-répertoires séparées créés à la racine du projet. Au final on aura une structure qui ressemble à ceci:
{.center .shadow}
Vous êtes libres d'adapter cette structure selon vos goûts et besoins. L'important est d'avoir un fichier index.html à la racine du site et de bien séparer les différentes ressources.
Chemin relatif vers les ressources
Quand on indique le chemin vers une ressource de notre site, une image par exemple, c'est important de donner le chemin relatif vers cette ressource et non son chemin absolu. En donnant le chemin relatif, la ressource va toujours être détectée même si le site change d'emplacement ou qu'on le met en ligne. Le chemin absolu indiquera où trouver le fichier à partir de la racine du disque où il est stocké, tandis qu'avec le chemin relatif on démarre à l'emplacement du fichier dans lequel on est.
Attention
Utilisez toujours les chemins relatifs pour les ressources de votre site.
Un petit exemple pour être plus clair, prenons la structure de projet de l'image plus haut. Le projet est dans le répertoire mon_site qui est lui situé sur le disque c dans le répertoire www. Je veux depuis mon fichier index.html accéder à l'image licorne.png située dans le répertoire images.
- Le chemin absolu : c:/www/mon_site/assets/images/licorne.png, on donne le chemin complet depuis la racine du disque.
- Le chemin relatif depuis index.html : assets/images/licorne.png, en partant de l'emplacement du fichier index.html, on descend dans les sous-répertoires assets et images pour trouver le fichier.
Vous comprendrez que si on déplace le dossier mon_site à un autre endroit que dans le répertoire www, l'image ne sera plus trouvée avec le chemin absolu.
On peut aussi "remonter" un répertoire en ajoutant .. . Un autre exemple, depuis le fichier style.css, je veux atteindre la même image de licorne. Si on regarde la structure, je dois remonter d'un répertoire pour revenir à la racine du projet et ensuite descendre dans les répertoires assets et images. En me servant des .. je n'ai qu'à faire ceci : ../assets/images/licorne.png