Vous allez découvrir maintenant comment insérer des images dans vos pages X.H.T.M.L. : de quoi les égayer un peu !

Une image

On utilise une balise unique <img/> qu'on met entre les balises de paragraphe <p> et </p>. Pour indiquer le chemin vers l'image, on utilise l'attribut src :

<p>
<img src="images/monimage.jpg"/>
</p>

Le chemin peut être relatif ou absolu, comme vous le voulez.

Une alternative à l'image

Si jamais il y a un problème avec votre image, que le navigateur ne peut pas l'afficher, il serait bien mieux d'afficher un texte alternatif la décrivant...! C'est possible grâce à l'attribut alt de la balise <img /> :

<p>
<img src="images/monimage.jpg" alt="Ceci représente une voiture."/>
</p>

Définir une taille précise

On peut également choisir une taille pour son image grâce aux attributs width pour la largeur et height pour la hauteur. Imaginons par exemple que notre image fasse 500 pixels de largeur et 600 pixels de hauteur :

<p>
<img src="images/monimage.jpg" alt="Une image de voiture" width="500px" height="600px"/>
</p>

Une info-bulle

Exactement de la même manière que pour les liens, il est possible en ajoutant l'attribut title de préciser le texte de la bulle d'aide qui apparaîtra au survol de l'image par la souris.

<p>
<img src="images/monimage.jpg" alt="Une image de voiture" width="500px" height="600px" title="Une voiture rouge que j’ai inventée"/>
</p>

Faites bien attention à écrire "pixels" de manière réduite px, sinon votre navigateur n'y comprendra rien !

Voilà, vous pouvez désormais illustrer vos pages avec de belles images !! Vous apprendrez au prochain chapitre à manipuler les tableaux.