Gérer les fichiers

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.

  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.

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

  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 !

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

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.

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 :

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,