Tutoriel HTML / XHTML

HTML

Découvez les bases de HTML et XHTML dans ce tutoriel.

HTML5 CSS Dreamweaver Bootstrap PHP

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

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

Image stockée sur un serveur

Exemple

Bootstrap
<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

Contact Contactez moi
<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>