Maintenant que nous avons vu les différents formats d'images qui sont disponibles en HTML, nous allons voir comment les utiliser. Et plus particulièrement, comment insérer des images dans nos pages web.
Pour insérer une image dans une page web on utilise la balise <img ... />. Il s'agit d'un balise orpheline (comme <br />) donc vous n'aurez pas besoin de l'ouvrir et de la fermer comme les autres balises.
En revanche il faut indiquer deux attributs à cette balise image pour qu'elle fonctionne correctement :
L'attribut SRC, c'est la source de votre image. En d'autres termes il s'agit de l'mplacement de votre fichier image. Vous pouvez utiliser les formes complètes (http://webtuto.weebly.com/image.jpg) ou les formes partielles (dossier/image.jpg).
L'attribut ALT, c'est littéralement le texte alternatif. Normalement vous ne le verrez pas, mais ce n'est pas une raison pour délaisser cet attribut. Si votre image ne se charge pas pour une raison ou pour une autre, c'est ce texte qui sera affiché.
Il est important de bien mettre vos images au sein de paragraphes HTML ou de divs (que nous verrons plus loin) afin d'avoir une page HTML correctement structurée.
Voici un exemple d'image en HTML :
<img src="image.jpg" alt="mon image" />
Le tout dans un paragraphe de préférence.
Sachez que l'on peut également ajouter des infobulles à nos images, comme pour les liens, et ce à l'aide la l'attribut TITLE. Celui marche exactement de la même manière que lorsque nous l'avons abordé lors du chapitre sur les liens.
Sachez que vous pouvez très bien faire une image-lien, c'est à dire une image qui se comporte comme un lien (qui amène à une destination lors du clic). Pour cela il suffit de mettre l'image dans la partie texte de la balise lien (A).