Comment insérer une image avec HTML

Pimentez vos sites Web en y ajoutant des images. Vous pouvez insérer des images dans des fichiers HTML à l'aide de balise, que vous utilisez pour spécifier l'emplacement de l'image sur Internet, la hauteur et la largeur de l'image et le texte alternatif qui s'affiche si l'image ne se charge pas ou si quelqu'un utilise un lecteur d'écran pour afficher la page. Les trois types de fichiers image couramment utilisés sur le Web sont GIF, PNG et JPEG.

Étape 1

Ouvrez le fichier HTML de la page Web à laquelle vous souhaitez ajouter une image dans un éditeur de texte tel que le Bloc-notes ou un logiciel de développement Web.

Étape 2

Ajouter un balise au fichier. Placez la balise après l'élément sous lequel vous voulez qu'une image apparaisse lorsque le fichier HTML est ouvert dans un navigateur. La balise n'a pas de balise de fermeture distincte. Dans la balise, vous devez spécifier la source de l'image que vous souhaitez afficher en tapant l'emplacement de l'image sur Internet avec le src attribut. Si l'image est stockée dans le même dossier que le fichier HTML, saisissez le nom et l'extension de l'image. Si l'image est stockée ailleurs, saisissez l'URL complète de l'image.

Étape 3

Ajoutez la alt attribut à votre tag. En HTML5, l'attribut alt est obligatoire. Utilisez cet attribut pour décrire l'image au cas où elle ne pourrait pas être chargée. Si une image ne peut pas être chargée, le navigateur affiche le texte saisi après l'attribut alt. De plus, l'attribut alt est important pour les logiciels de lecture d'écran utilisés par les personnes ayant une déficience visuelle. Le logiciel lit le texte dans l'attribut alt afin que la personne malvoyante qui consulte votre site Web puisse entendre le contenu de l'image même si elle ne le voit pas.

Étape 4

Spécifiez les dimensions de l'image en pixels avec la hauteur et largeur les attributs. Si vous ne spécifiez pas les dimensions, le navigateur ne sait pas combien d'espace laisser à l'image lors du chargement de la page. Cela se traduit par un chargement saccadé de la page, car le texte se charge en premier, laissant un petit espace pour l'image, puis saute à mesure que l'image se charge et provoque l'expansion de l'espace. Avec les dimensions spécifiées, le navigateur laisse exactement la bonne quantité d'espace entre les autres éléments de la page pour que l'image se remplisse une fois le chargement terminé.

Étape 5

Testez votre code pour vous assurer que l'image s'affiche au bon endroit en ouvrant votre fichier HTML dans un navigateur.

Astuce

Utilisez CSS pour déplacer une image vers la gauche ou la droite de l'écran ou pour l'envelopper de texte. Par exemple, vous pouvez utiliser style="float:left;" ou style="float:right;" dans la balise.

Si vous ne connaissez pas à la fois la hauteur et la largeur d'une image, vous pouvez utiliser uniquement l'attribut height ou width seul. Vous pouvez également utiliser CSS pour spécifier la hauteur et la largeur; par exemple, avec une image de 100 x 100 pixels, utilisez l'attribut style :style="height:100px;width:100px."

Transformez l'image en lien cliquable en plaçant la balise dans une paire de balises "a href". Par exemple, si vous souhaitez qu'une image soit liée à Facebook, saisissez ce qui suit.

Avertissement

N'utilisez pas l'attribut alt pour essayer de booster le référencement de votre page. Les moteurs de recherche savent depuis longtemps que certains concepteurs de sites Web essaient de bourrer l'attribut alt avec des mots-clés supplémentaires et ignorent donc le texte de l'attribut alt.