Un site web est composé de nombreux fichiers : des fichiers pour le contenu textuel, d'autres pour le code, des feuilles de styles, des médias, etc. Lors de la construction d'un site web, ces fichiers doivent être organisés et rangés sur votre ordinateur afin qu'ils puissent interagir les uns avec les autres et que le contenu s'affiche correctement. Une fois que c'est fait, vous pourrez alors uploader ces fichiers sur un serveur. Dans cet article, vous verrez comment mettre en place une organisation adaptée pour les fichiers de votre site web.
Où placer votre site web sur votre ordinateur ?
Lorsque vous travaillez sur votre site web sur votre propre ordinateur, tous les fichiers liés au site devraient être présents dans un dossier dont le contenu reflète la structure des fichiers sur le serveur. Ce dossier peut être n'importe où sur votre ordinateur, l'idéal étant qu'il soit simple à retrouver, par exemple sur votre Bureau ou dans votre dossier personnel, voire à la racine du disque dur.
- Sélectionnez un endroit où enregistrer vos projets de sites web. À cet emplacement, créez un dossier appelé
projets-web
(vous pouvez utiliser le nom que vous souhaitez). C'est dans ce dossier que vous placerez vos différents projets de sites web. - À l'intérieur de ce dossier, créez un autre dossier pour y enregistrer votre premier site web. Vous pouvez appeler ce dossier
site-test
ou avec le nom que vous voulez.
Un rapide aparté sur la casse et l'espacement
Vous aurez remarqué que les exemples utilisés pour les noms des dossiers ou des fichiers étaient tous en minuscules et sans espace. Il est généralement conseillé d'avoir des noms sans majuscule et sans espace car :
- De nombreux ordinateurs, notamment les serveurs web, sont sensibles à la casse. Par exemple, si vous placez une image pour votre site à l'emplacement
site-test/MonImage.jpg
et que, dans un autre fichier, vous faites référence àtest-site/monimage.jpg
, cela ne fonctionnera pas. - Les navigateurs, les serveurs web et les différents langages de programmation ne gèrent pas tous les espaces de la même façon. Par exemple, si vous utilisez un espace dans le nom du fichier, certains systèmes considèreront que le nom du fichier correspond en fait aux noms de deux fichiers. Certains serveurs remplaceront les blancs dans le nom du fichier avec « %20 » (le code de caractère pour représenter les espaces dans les URI) : ce qui cassera tous vos liens. Pour cette raison, il est préférable d'utiliser des tirets ou des tirets bas (underscores) :
mon-fichier.html
oumon_fichier.html
.
Pour ces raisons, il est préférable d'écrire les noms des fichiers et dossiers en minuscules et sans espace à moins que vous soyez sûr-e de ce que vous faites. Cela vous permettra d'éviter certains problèmes.
Quelle structure mettre en place pour votre site web ?
Cela dit, regardons la structure que notre site devrait avoir. Il y a certains éléments qu'on retrouve quasiment dans tous les sites web : un fichier d'index HTML, des dossiers pour les images, les scripts et les feuilles de styles. Nous allons donc commencer par créer :
index.html
: Ce fichier contiendra généralement le contenu de votre page d'accueil, c'est-à-dire le texte et les images que les gens verront lorsqu'ils arriveront sur votre site. Dans votre explorateur de fichier ou dans votre éditeur de texte, créez un fichier nomméindex.html
puis enregistrez le dans votre dossiersite-test
.- Un dossier
images
: Ce dossier contiendra les différentes images utilisées pour votre site. Créez un répertoire nomméimages
à l'intérieur de votre dossiersite-test
. - Un dossier
styles
: Ce dossier contiendra le code CSS utiliser pour mettre en forme le contenu de votre site (par exemple pour définir les couleurs à utiliser pour le texte et l'arrière-plan). Créez un dossier appeléstyles
à l'intérieur de votre dossiersite-test
. - Un dossier
scripts
: Ce dossier contiendra le code JavaScript qui est utilisé pour ajouter des fonctionnalités interactives sur votre site (par exemple, des boutons qui permettent de charger des données lorsqu'on clique dessus). Créez un dossier appeléscripts
à l'intérieur de votre dossiersite-test
.
Note : Sur Windows, vous aurez peut être des problèmes pour voir le nom entier des fichiers. En effet, Windows possède une option, activée par défaut, qui Masque les extensions pour les types de fichiers connus. Cette option peut être désactivée en allant dans l'explorateur Windows puis dans l'option Options des dossiers..., il faut alors décocher la case Masquer les extensions pour les types de fichier connus puis valider en cliquant sur OK. Pour plus d'informations sur votre version de Windows, n'hésitez pas à utiliser votre moteur de recherche favori !
Les chemins de fichiers
Pour que les fichiers puissent communiquer et s'utiliser les uns les autres, il faut fournir un chemin vers les fichiers qu'on souhaite utiliser. Nous allons illustrer cela avec un peu de HTML que nous allons écrire dans index.html
pour que la page affiche l'image qu'on a choisie dans l'article « Quel sera l'aspect de votre site web ? ».
- Copiez l'image que vous avez choisie dans votre répertoire
images
. - Ouvrez le fichier
index.html
avec votre éditeur de texte puis insérez le code suivant. Ne vous préoccupez pas trop du contenu pour le moment, nous verrons ce que ça signifie par la suite.<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ma page de test</title> </head> <body> <img src="" alt="Mon image de test"> </body> </html>
- La ligne qui contient
<img src="" alt="Mon image de test">
correspond au code HTML qui insère une image dans la page. Pour que cela fonctionne, il faut que nous indiquions où l'image se situe dans le code HTML. Cette image est à l'intérieur du dossierimages
et ce dossier se situe dans le même dossier qu'index.html
. Pour parcourir l'arborescence des fichiers depuisindex.html
jusqu'à l'image, le chemin qu'on utilisera seraimages/votre-fichier-image
. Par exemple, si vous avez une image nomméefirefox-icon.png
, le chemin à utiliser seraimages/firefox-icon.png
. - Insérez le chemin vers le fichier image dans le code HTML, entre les guillemets dans
src=""
. - Sauvegardez votre fichier HTML puis chargez la page dans votre navigateur (il suffit de double-cliquer sur le fichier dans votre explorateur). Vous devriez obtenir une nouvelle page web, qui affiche votre image !
Quelques règles générales à propos des chemins de fichier :
- Pour utiliser un fichier qui est dans le même répertoire que le fichier HTML, il suffit d'utiliser le nom du fichier pour le chemin (par exemple
mon-image.jpg
). - Pour faire référence à un fichier dans un sous répertoire, on écrira le nom du répertoire, suivi d'une barre oblique (slash) suivi du nom du fichier. Par exemple :
mon-sous-repertoire/mon-image.jpg
. - Pour faire référence à un fichier qui se situe dans le répertoire parent par rapport au fichier HTML, il faut écrire deux points. Par exemple, si votre fichier
index.html
se situe dans un sous-dossier desite-test
et quemon-image.png
se situe à l'intérieur desite-test
, vous pouvez faire référence à votre imagemon-image.png
depuisindex.html
en écrivant../mon-image.png
. - Ces différentes règles peuvent être combinées autant que nécessaire : par exemple
../sous-dossier/autre-sous-dossier/mon-image.png
.
Pour le moment, c'est tout ce qu'il y a à savoir.
Note : Le système de fichiers Windows utilise des barres obliques inversées (backslash : « \ ») pour organiser les fichiers au lieu d'utiliser des barres obliques (slash : « / ») avec par exemple C:\windows
. Cela n'a pas d'importance pour développer un site web, même sur Windows, les fichiers Web utilisent des barres obliques simples (« / ») et ce sont toujours elles qu'il faudra utiliser.
Autre chose ?
C'est tout ce qu'il y a à faire pour le moment en ce qui concerne les fichiers. Votre arborescence de fichier devrait ressembler à cela :