DEV Community

André MABUTWA for KADEA ACADEMY

Posted on • Updated on

comment utiliser la balise img et ses attributs afin d'ajouter des images sur une page html?

1.Insertion des images aux pages html
Pour insérer une image en HTML, il faut utiliser la balise < img > et préciser la source du fichier image avec l'attribut « src ». Le code HTML est le suivant : < img src="URL source" >.
2.les attributs de la balise “img”
a.L'attribut src
L'attribut src est le seul attribut indispensable pour faire fonctionner la balise HTML : il est nécessaire et suffisant. C'est en effet l'attribut source qui permet d'indiquer à la machine le chemin à suivre pour récupérer le fichier image à afficher sur la page web. La source est au choix : l'URL du site tiers d'où provient l'image, ou le nom du fichier image préalablement enregistré dans le répertoire ou un sous-répertoire de la page HTML.
Exemple de code pour insérer une image issue d'une banque d'images, avec la balise img src HTML, sous un paragraphe de texte :
< p >Voici le paragraphe de texte< /p >
< img src="https://banque.images.com/image-de-paragraphe.jpeg" >
b.L'attribut alt
L'attribut alt n'est pas nécessaire, mais recommandé.
Cet attribut permet d'afficher du texte lorsque l'image ne se charge pas, quelle qu'en soit la raison.
Le texte alternatif décrit l'image, permettant aux logiciels de lecture d'écran de traduire le visuel à l'oral à destination des visiteurs malvoyants.
L'attribut alt permet à Google Images d'indexer le visuel sur les mots-clés renseignés, contribuant ainsi à améliorer le référencement naturel de la page web. À noter que dans le même objectif, il est judicieux de nommer le fichier image source à l'aide de mots-clés pertinents.
Pour insérer une image HTML avec un texte alternatif : < img src="https://banque.images.com/image-de-paragraphe.jpeg" alt="texte alternatif" >
c.Les attributs height et width
Ces attributs permettent de changer la taille de l'image, en hauteur et en largeur. Pour redimensionner l'image en langage HTML, il faut renseigner les valeurs en pixels ou en pourcentage dans la balise img src : < img src="https://banque.images.com/image-de-paragraphe.jpeg" alt="texte alternatif" width=100% height=10% >.
d.L'attribut title
L'attribut title permet d'animer l'image : tant que le visiteur du site pointe sa souris sur le visuel, une bulle d'information apparaît. Pour afficher du texte au survol de l'image : < img src="https://banque.images.com/image-de-paragraphe.jpeg" alt="texte alternatif" width=100% height=10% title="bulle d’aide" >.

Top comments (0)