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.
Ajoutez une balise au fichier. Placez la balise après l'élément sous lequel vous souhaitez 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.
Ajouter le alt attribuer à votre balise. En HTML5, l'attribut alt est obligatoire. Utilisez cet attribut pour décrire l'image au cas où elle ne pourrait pas se charger. Si une image ne peut pas se charger, le navigateur affiche le texte que vous entrez après l'attribut alt. De plus, l'attribut alt est important pour les logiciels de lecture d'écran utilisés par les personnes malvoyantes. Le logiciel lit le texte dans l'attribut alt afin que la personne ayant une déficience visuelle qui consulte votre site Web puisse entendre ce qui est dans l'image même si elle ne peut pas la voir.
Spécifiez les dimensions de l'image en pixels avec le la taille 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 se sépare au fur et à mesure que l'image se charge et agrandit l'espace. Avec les dimensions spécifiées, le navigateur laisse exactement le bon espace entre les autres éléments de la page pour que l'image se remplisse une fois le chargement terminé.
Testez votre code pour vous assurer que l'image s'affiche au bon endroit en ouvrant votre fichier HTML dans un navigateur.
Utilisez CSS pour déplacer une image vers la gauche ou la droite de l'écran ou pour que le texte l'entoure. 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 hauteur ou largeur. Vous pouvez également utiliser CSS pour spécifier la hauteur et la largeur; par exemple, avec une image de 100 par 100 pixels, utilisez l'attribut style: style="height: 100px; largeur: 100 pixels."
Faites de l'image un 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.
N'utilisez pas l'attribut alt pour essayer d'améliorer le référencement de votre page. Les moteurs de recherche savent depuis longtemps que certains concepteurs de sites Web essaient de remplir l'attribut alt de mots-clés supplémentaires et, par conséquent, ignorent le texte de l'attribut alt.
