Leçons de niveau 12

Extensible Hypertext Markup Language/Images

Une page de Wikiversité.
Sauter à la navigation Sauter à la recherche
Début de la boite de navigation du chapitre
Images
Icône de la faculté
Chapitre no 7
Leçon : Extensible Hypertext Markup Language
Chap. préc. :Éléments de présentation
Chap. suiv. :Tableaux
fin de la boite de navigation du chapitre
Icon falscher Titel.svg
En raison de limitations techniques, la typographie souhaitable du titre, « Extensible Hypertext Markup Language : Images
Extensible Hypertext Markup Language/Images
 », n'a pu être restituée correctement ci-dessus.

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[modifier | modifier le wikicode]

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[modifier | modifier le wikicode]

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[modifier | modifier le wikicode]

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[modifier | modifier le wikicode]

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.