Gérer les fichiers

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.

1. 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.
2. À 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 :

1. 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.
2. 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 ou mon_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 :

1. 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 dossier site-test.
2. 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 dossier site-test.
3. 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 dossier site-test.
4. 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 dossier site-test.

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 ? ».

1. Copiez l'image que vous avez choisie dans votre répertoire images.
2. 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> 

3. 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 dossier images et ce dossier se situe dans le même dossier qu'index.html. Pour parcourir l'arborescence des fichiers depuis index.html jusqu'à l'image, le chemin qu'on utilisera sera images/votre-fichier-image. Par exemple, si vous avez une image nommée firefox-icon.png, le chemin à utiliser sera images/firefox-icon.png.
4. Insérez le chemin vers le fichier image dans le code HTML, entre les guillemets dans src="".
5. 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 de site-test et que mon-image.png se situe à l'intérieur de site-test, vous pouvez faire référence à votre image mon-image.png depuis index.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.

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 :