Accueil > html > xhtml-inserer-une-image

{ Insérer une image dans une page }

Introduction

<img />

Les attributs

src : spécifier la source de l'image

Le plus important de tous ! Vous pouvez bien évidemment utilisé des url externes comme source mais il est tout de même recommandé d'utiliser des images hébergés sur votre site directement.

<img src="../images/mon-image.png" />

alt : spécifier le texte alternatif

Alt comme alternatif c'est le texte qui s'affichera si l'image ne peut pas être affichée

<img src="../images/mon-image.png" alt="mon image" />

width : appliquer une largeur à l'image

La largeur de l'image peut être indiquée en px ou en % si vous ne précisez rien le navigateur utilisera les pixels

<img src="../images/mon-image.png" alt="mon image" width="300px" />

height : définir la hauteur de l'image

Même commentaire que pour la largeur

<img src="../images/mon-image.png" alt="mon image" width="300px" height="180px" />
{

Note du chef : Les attributs "height" et "width" peuvent être déterminés automatiquement grâce à PHP, si vous voulez savoir comment, jetez un oeil au tutoriel Récupérer automatiquement la taille d'une image

}

class : appliquer une classe à l'image

<img src="../images/mon-image.png" alt="mon image" width="300" height="180" class="galerie" />