Images en HTML

Dans ce tutoriel, nous allons voir comment insérer une image dans une page HTML

Quelques précisions sur les formats d'images

En HTML, nous ne pouvons pas insérer tout type d'images, seul les formats ci-dessous sont acceptés

Les formats acceptés

Format	Transparence	Version de HTML
jpg	Non	HTML4, XHTML, HTML5
gif	Oui + animation	HTML4, XHTML, HTML5
png	Oui	HTML4, XHTML, HTML5

Image qui se trouve dans mon site

Exemple

<img src="../../images/boostrap-logo.png" width="150" height="151" alt="Bootstrap" />

Image stockée sur un serveur

Exemple

<img src="http://www.conseil-webmaster.com/images/boostrap-logo.png" width="150" height="151" alt="Bootstrap" />

Les principaux attributs en HTML4

Cette liste n'est pas compléte, je vous donne les principaux !

Attribut	Desciption	Exemple
src	Le chemin où se trouve mon image	src="images/boostrap-logo.png.jpg"
width	La largeur de l'image	width="150
height	La hauteur de l'image	height="151"
alt	Affiche un texte de remplacement dans le cas ou l'image ne peut être lue	alt="Bootstrap"
class	Permet d'appliquer une classe CSS (Voir le tutoriel sur CSS)

En HTML5, les attributs width et height ne sont plus utilisés !

Lien hypertexte sur une image

Exemple

<a href="http://getbootstrap.com/" title="Bootstrap">

<img src="../../images/boostrap-logo.png" width="150" height="151" alt="Bootstrap" class="img-responsive" />

</a>

En savoir + sur les liens hypertextes

Zone cliquable sur une image

Dans l'image ci-dessous, seul le smartphone est cliquable.

Exemple

<img src="../../images/integrateur-web.jpg" alt="Contact" width="415" height="289" usemap="#Map" />

          

<map name="Map" id="Map">

<area shape="rect" coords="84,196,114,260" href="http://www.conseil-webmaster.com/lambert-christophe.php" target="_blank" alt="Contactez moi" />

</map>