Bienvenue dans cet article où nous allons aborder la gestion des fichiers. Pour que les fichiers puissent interagir entre eux, il est essentiel de spécifier leur chemin d’accès, c’est-à-dire la route qu’un fichier doit emprunter pour localiser un autre fichier. Pour illustrer cela, nous utiliserons un peu de HTML dans notre fichier index.html afin d’afficher l’image que nous avons choisie dans l’article “Quel aspect pour votre site web ?”.
Les étapes à suivre
- Copiez l’image que vous avez choisie précédemment dans votre dossier images.
- Ouvrez le fichier index.html et insérez le code suivant exactement comme indiqué. Ne vous préoccupez pas de sa signification pour le moment, nous verrons les structures plus en détail ultérieurement.
- La ligne contenant
<img src="" alt="Mon image de test">représente le code HTML qui insère une image dans la page. Il est nécessaire d’indiquer à HTML l’emplacement de l’image. Cette image se trouve à l’intérieur du dossier images, qui se situe dans le même dossier que index.html. Pour parcourir l’arborescence des fichiers depuis index.html jusqu’à l’image, vous devez utiliser le chemin images/votre-fichier-image. Par exemple, si l’image s’appelle firefox-icon.png, le chemin sera images/firefox-icon.png. - Insérez le chemin vers le fichier image dans le code HTML, entre les guillemets de src=””.
- Enregistrez votre fichier HTML puis chargez la page dans votre navigateur (double-cliquez simplement sur le fichier). Vous devriez maintenant voir une nouvelle page web affichant l’image !
Quelques règles générales
Voici quelques règles générales à connaître concernant les chemins de fichier :
- Pour utiliser un fichier se trouvant dans le même répertoire que le fichier HTML, il suffit d’utiliser le nom du fichier comme chemin (par exemple mon-image.jpg).
- Pour faire référence à un fichier se trouvant dans un sous-répertoire, il suffit d’écrire le nom du répertoire, suivi d’une barre oblique (/), puis du nom du fichier. Par exemple : mon-sous-repertoire/mon-image.jpg.
- Pour faire référence à un fichier se trouvant dans le répertoire parent par rapport au fichier HTML, il faut utiliser deux points (..). Par exemple, si votre fichier index.html se trouve dans un sous-dossier de site-test et que mon-image.jpg se trouve à l’intérieur de site-test, vous pouvez faire référence à votre image mon-image.jpg depuis index.html en écrivant ../mon-image.jpg.
- Ces différentes règles peuvent être combinées autant de fois que nécessaire. Par exemple : ../sous-dossier/autre-sous-dossier/mon-image.jpg.
C’est tout ce que vous devez savoir pour le moment. Amusez-vous bien en gérant vos fichiers !
