Toutes les images que vous souhaitez lier dans votre site Web HTML doit d'abord être téléchargé au même endroit où vous envoyez le code HTML de la page Web, que le site soit hébergé sur un serveur Web auquel vous accédez par FTP ou vous utilisez un service d'hébergement Web. Si vous utilisez un service d'hébergement Web, vous utilisez probablement un formulaire de téléchargement fourni par le service. Ces formulaires se trouvent généralement dans la section administration de votre compte d'hébergement.
Le téléchargement de votre image sur le service d'hébergement n'est que la première étape. Ensuite, vous devez ajouter une balise dans le code HTML pour l'identifier.
Téléchargement d'images dans le même répertoire que le HTML
Vos photos peuvent se trouver dans le même répertoire que le HTML. Si c'est le cas:
- Téléchargez une image à la racine de votre site Web.
- Ajoutez une balise d'image dans votre code HTML pour pointer vers l'image.
- Téléchargez le fichier HTML à la racine de votre site Web.
- Testez le fichier en ouvrant la page dans votre navigateur Web.
La balise d'image prend le format suivant:
En supposant que vous téléchargez une photo de la lune avec le nom "lunar.jpg", la balise d'image prend la forme suivante:
La hauteur et la largeur sont facultatives mais recommandées. Ces valeurs par défaut sont en pixels mais peuvent également être exprimées en pourcentages:
La balise d'image ne nécessite pas de balise de fermeture.
Si vous créez un lien vers une image dans un autre document, utilisez des balises d'ancrage et imbriquez la balise d'image à l'intérieur.
Téléchargement d'images dans un sous-répertoire
Il est plus courant de stocker des images dans un sous-répertoire, généralement appelé Images. Afin de pointer vers des images dans ce répertoire, vous devez savoir où elles se trouvent par rapport à la racine de votre site Web.
La racine de votre site Web est l'endroit où l'URL, sans aucun répertoire à la fin, s'affiche. Par exemple, pour un site Web nommé "MyWebpage.com", la racine suit cette forme: http://MyWebpage.com/. Remarquez la barre oblique à la fin. C'est ainsi que la racine d'un répertoire est généralement indiquée. Les sous-répertoires incluent cette barre oblique pour montrer où ils se trouvent dans la structure de répertoires. L'exemple de site MyWebpage peut avoir la structure:
http://MyWebpage.com/ - le répertoire racine
http://MyWebpage.com/products/ — l'annuaire des produits
http://MyWebpage.com/products/documentation/ — le répertoire documentation sous le répertoire produits
http://MyWebpage.com/images/ - le répertoire des images
Dans ce cas, lorsque vous pointez sur votre image dans le répertoire images, vous écrivez:
C'est ce qu'on appelle le chemin absolu à votre image.
Problèmes courants avec les images qui ne s'affichent pas
Faire apparaître des images sur votre page Web peut être difficile au début. Les deux raisons les plus courantes sont que l'image n'a pas été téléchargée là où le code HTML pointe ou que le code HTML est écrit de manière incorrecte.
La première chose à faire est de voir si vous pouvez trouver votre image en ligne. La plupart des hébergeurs disposent d'un outil de gestion que vous pouvez utiliser pour voir où vous avez téléchargé vos images. Une fois que vous pensez avoir la bonne URL pour votre image, saisissez-la dans votre navigateur. Si l'image apparaît, alors vous avez le bon emplacement.
Vérifiez ensuite que votre code HTML pointe vers cette image. La façon la plus simple de le faire est de coller le URL de l'image que vous venez de tester dans l'attribut SRC. Re-télécharger la page et tester.
L'attribut SRC de votre balise d'image ne doit jamais commencer par C:\ ou alors déposer: Ceux-ci sembleront fonctionner lorsque vous testerez votre page Web sur votre propre ordinateur, mais tous ceux qui visitent votre site verront une image cassée. C'est parce que C:\ pointe vers un emplacement sur votre disque dur. Comme l'image est sur votre disque dur, elle s'affiche lorsque vous la visualisez, mais elle ne le sera pour personne d'autre.