Les principaux médias sur le Web
<img> qui est un élément à fermeture automatique – auto-englobant (il ne comporte qu’une balise d’ouverture).L’attribut src définit l’emplacement de l’image. Comme pour les liens, vous pouvez utiliser des URL relatives ou absolues.
- mon-premier-site-web
- home.html
- soyuz-spacecraft.jpg
<p>
Regardez cet atterrissage de vaisseau spatial !
<br>
<img src="soyuz-spacecraft.jpg">
</p>Dimensions
Chaque image a 2 dimensions : une largeur et une hauteur. L’image de vaisseau spatial précédemment montrée a une largeur de 394 pixels et une hauteur de 284.
Lors de l’insertion d’une image au format HTML, il n’est pas nécessaire de spécifier ses dimensions : le navigateur l’affiche automatiquement en taille réelle.
Si vous souhaitez modifier les dimensions d’une image, même si cela est possible en HTML, il est recommandé d’utiliser CSS, comme nous le verrons dans les chapitres suivants.
Block or inline?
Bien qu’une image ait une largeur et une hauteur et soit visuellement un grand rectangle, une image n’est pas un élément de bloc HTML, mais bien un élément en ligne.
Cela est dû au fait que l’élément <img> est un élément à fermeture automatique – auto-englobants : il ne peut techniquement contenir aucun autre élément HTML et est donc considéré comme un élément en ligne, comme <a>, <strong> ou <em>.
Ce comportement en ligne peut avoir des résultats inattendus :
<p>
Il y a une grenouille
<img src="frog.jpg">
au milieu du paragraphe !
</p>Parce qu’en HTML, le contenu est roi, les images seront affichées quelle que soit la disposition originale que cela pourrait induire, et ce, de manière réfléchie.
Téléchargez les images (clic-droit – enregistrer sous) afin de mettre les exemple en pratique :
