La balise img
Objectif
Découvrir et utiliser la balise img.
Méthode : Mise en situation
Il est possible d'ajouter des images à une page HTML. Pour ceci, il existe une balise dédiée que nous allons découvrir.
Définition : La balise <img>
Une image est insérée avec la balise <img> en indiquant avec l’attribut src “source” le chemin de l’image sous forme d’URL, et avec l’attribut ‘alt’ une description textuelle de l'image.
La balise <img> peut avoir divers attributs facultatifs. Seul l'attribut ‘src’ est obligatoire.
<img src="img_girl.jpg" alt="Girl in a jacket">
Il existe d’autres attributs qui peuvent être utilisés dans différents cas. Tels que :Height /Width: Défini les dimensions de l’image.
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Title: contient une information optionnelle sur l’image qui s’affichera au survol de la souris.
<img src="renard.png" alt="Renard en promenade" title="Renard qui se promene" >
srcset : Cet attribut prend en valeur une liste de fichiers image avec leur “width descriptor” (soit leur largeur exprimée avec un w) séparés par une virgule. Exemple :
<img
src="mon-fichier-image.jpg"
srcset="mon-fichier-image-300.jpg 300w, mon-fichier-image-600.jpg 600w"
alt="mon-fichier-image.jpg"
>Avec le code ci-dessus, le navigateur va savoir qu’il dispose de 2 images (une de 300px de large et l’autre de 600px) et va faire en sorte d’afficher celle qui correspondra le plus à la largeur de l’écran.
Remarque :
On peut ne pas inclure l'image mais mettre le lien vers cette image, ou mieux vers la page Web contenant cette image. Par exemple :
<a href="http://www.autresite.com/lapage.html">Autresite.com</a>
Syntaxe : À retenir
Afin d'ajouter des images à la page HTML, il faut utiliser la balise <img> accompagnée d’au moins les attributs src et alt.