HTML Image

Syntaxe

En HTML, les images sont définies avec la balise <img />.

Cette balise <img /> est une balise auto-fermante sans contenu. Elle contient uniquement des attributs:

Attributs

Les attributs de la balise <img> :

src : spécifie l'URL (adresse web) de l'image
alt : spécifie un texte de remplacement de l'image, si celle-ci ne peut pas être affichée.
style : permet de spécifier la largeur et la hauteur d'une image. Les valeurs sont indiquées en pixels (px utilisation après la valeur).
width et height : Alternativement à style, on peut utiliser les attributs width et height. (les valeurs sont indiquées en pixels par défaut)

Remarque :

La balise <img> est une balise "en ligne" : les images se positionnent naturellement les une à la suite des autres, sur la même ligne, dans le navigateur. Contrairement à la balise <p> qui est une balise de type "block" : les éléments se positionnent naturellement les uns en dessous des autres.

<!-- syntaxe minimale pour afficher une image (dans sa taille d'origine) -->
<img src="harley.png" />

<!-- Spécification de l'information alternative -->
<img src="harley.png" alt="le mythe Harley" />

Voir

Taille de l'image : width et height

Il est possible de redimensionner la taille de l'image en utilisant les attributs width et height. Il faut cependant faire attention à respecter la proportion de l'image sous peine de voir une image déformée.

<!-- Spécification de la taille (avec les dimensions réelles) -->
<img src="harley.png" width="264" height="152" alt="mon Harley" />

<!-- Spécification de la taille (avec les dimensions réelles) avec l'attribut style -->
<img src="harley.png" style="width:264px;height:152px" alt="mon Harley" />


<!-- ATTENTION AUX DEFORMATIONS -->

<!-- Spécification de la taille (non-respect des dimensions originales)-->
<img src="harley.png" width="500" height="152" alt="mon Harley" />
<img src="harley.png" width="100" height="152" alt="mon Harley" />



<!-- Il est préférable d'utiliser uniquement une dimension pour modifier la taille -->
<!-- l'autre dimension s'adape automatiquement -->

<img src="harley.png" width="500" alt="mon Harley" />
<img src="harley.png" height="152" alt="mon Harley" />

Voir

Image dans un autre dossier

Si le dossier n'est pas spécifié, le navigateur attend à trouver l'image dans le même dossier que la page Web.

Cependant, il est courant de stocker les images dans un sous-dossier. Vous devez ensuite inclure le nom du dossier dans l'attribut src.


<!-- l'image se trouve dans le dossier parent de la page (..) puis dans le dossier images -->
<img src="../images/harley.png" alt="mon Harley" />


<!-- l'image se trouve dans le dossier img situé à la racine du site -->
<img src="/img/java.png" alt="Java" />

		
<!-- l'image se trouve sur un autre serveur : on y accède par son adresse -->
<img src="http://www.uneplacepourledessert.com/images/fraisier/fraisier20.JPG" alt="miam !" />

Voir