2. Afficher ses propres images

Nous avons appris à utiliser des images en utilisant leur URL, mais je vous ai dit que si l’image changeait d’adresse, elle ne s’afficherait plus. Il faut donc la télécharger en un lieu fixe pour être sûr qu’elle ne bouge pas, et avoir la main dessus.

Dans un premier temps, je vous propose de créer un dossier “assets” dans le dossier de notre site. Il contiendra tous les éléments multimédias dont nous aurons besoin.

Ensuite, trouvons une image qui nous intéresse (sur Pixabay de préférence). Je vais prendre par exemple une photo de Bulbizarre. Et une fois qu’on l’a choisie, il faut faire clic-droit > enregistrer sous. Choisissez le dossier “assets” et renommez l’image comme vous le souhaitez.

TODO => screenshots

Maintenant qu’on a notre image dans le dossier “assets”, on peut retourner dans notre code et créer une balise “img”, avec son attribut “src”. Même si la méthode est différente, on utilise la même balise, et le même attribut. La seule chose qui va changer, c’est l’adresse qu’on va renseigner dans “src”. Effectivement, plutôt que de donner une adresse Internet (avec le préfixe http:// ou https://), on va donner une adresse sur notre ordinateur. Je vais vous expliquer ça tout de suite.On va utiliser ce qu’on appelle le chemin relatif. C’est à dire qu’on va partir de notre fichier index.html, et on va parcourir notre arborescence de dossiers pour arriver jusqu’à notre image bulbizarre.png. Dans un premier temps, il faut donc tracer le chemin :

TODO : Je ferai bien un screen avec le chemin ensuite, par rapport à ce que tu dis en dessous qui est top.

Pour l’instant, nous sommes dans index.html. Pour rejoindre bulbizarre.png, il faut aller dans le dossier assets. Il y a quelques règles pour se déplacer dans les dossiers :

  • le / permet de rentrer dans un dossier
  • le . permet de remonter d’un dossier
  • Conséquence logique : ”.” + “/” revient au même dossier.

On ne commence jamais le chemin par un slash.

Ça n’est sans doute pas très clair, mais en montrant quelques exemples, ça devrait venir. Dans notre cas, on veut d’abord rejoindre notre dossier assets. Il est au même niveau que notre index.html, donc pas besoin de “/” ni de “.”. Il suffit d’écrire “assets” au début de notre chemin pour le rejoindre. 

Mais maintenant qu’on est au niveau du dossier assets, on veut rentrer à l’intérieur. Il faut donc utiliser le “/”. Notre adresse est donc “assets/” pour l’instant. Mais il pourrait y avoir plusieurs fichiers à l’intérieur d’assets. il faut donc préciser son nom : bulbizarre.png. Notre adresse est donc “assets/bulbizarre.png”.

Je vais vous montrer un second cas où on utilise le ”.”. Imaginons qu’on soit dans cette situation :

On est dans index.html, et on veut dans un premier temps remonter « à la surface » de Fichiers HTML. Pour ça, on utilise le « . ». Ensuite, on va rejoindre assets, qui se trouve maintenant au même niveau que nous. Il faut donc d’écrire « assets », puis rentrer à l’intérieur avec “/”. Et enfin, à ne pas oublier, le nom du fichier : « bulbizarre.png ». Ça nous donne cette adresse : « .assets/bulbizarre.png »

Maintenant que vous savez utiliser le chemin relatif, il vous suffit de rentrer l’adresse de votre fichier comme valeur de l’attribut « src », et normalement, tout fonctionnera à merveille.

La balise “img” possède également un attribut “alt”. Vous pouvez y entrer le texte que vous voulez, c’est ce qui sera écrit à la place de l’image si elle ne s’affiche pas pour une raison ou pour une autre. Ça permet aussi de donner un nom à l’image, ce qui peut aider pour le référencement.

Comme d’habitude, je vous propose de remplacer les images qu’on a ajoutées au chapitre précédent par des images téléchargées. Vous savez maintenant utiliser les images de deux manières, et vous pouvez vous servir du chemin relatif pour aller chercher un fichier sur votre ordinateur. Il nous servira aussi pour les vidéos et l’audio. Mais avant cela, j’ai remarqué que l’icône à côté de notre “title” est assez moche. En fait c’est l’icône par défaut. Il serait grand temps de le changer, après tout, c’est une image comme les autres !