[HTML/CSS] - 10. Comment ajouter des images en HTML

par Tychic Obanda

---

HTML | 189 commentaires

---

Nous sommes arrivé à un chapitre très utile en ce qui est de création des pages web : ajouter des images en HTML.

Au début de cette série de tutoriels, je vous avez dit qu"on pourrait même ajouter des images dans une page web et c"est ce que nous allons faire dans ce chapitre.

Balise <img /> pour les images

Pour ajouter une image en HTML, on utilise la balise <img /> qui est une balise orpheline.

Cette balise en elle seule, ne peut jamais ajouter une image dans une page web. Elle a toujours eu besoin des attributs que je vous laisse découvrir bientôt.

Les attributs de <img />

Plusieurs attributs peuvent accompagner la balise <img /> et je vais vous lister ces attributs ici.

• src : le premier attribut à connaître est src. Cet attribut précise la source ou le chemin de l"image. Quand vous utilisez l"attribut src, vous devez bien vérifier le chemin de l"image, le nom de l"image et son extension car à moindre, l"image ne sera pas affichée.

<img src="logo-243tech.png" />

• alt : le deuxième attribut est alt qui, sa valeur n"est rien d"autre qu"un texte qui décrit en quelques mots le contenu de l"image. Ce texte sera affiché dans le navigateur au cas où l"image n"est pas chargée et c"est aussi important de placer vos mots clés à l’intérieur de cet attribut.

<img src="logo-243tech.png" alt="Cette image contient le logo de 243tech" />

• title : l"attribut title permet d"afficher une infobulle quand on survole l"image.

<img src="logo-243tech.png" alt="Cette image contient le logo de 243tech" title="Cette image contient le logo de 243tech" />

• width et height : bien que la mise en forme d"une page web soit réservée à CSS, on peut aussi faire quelques mises en forme en HTML. Quand il s"agit de diminuer ou augmenter la largeur d"une image, on utilise l"attribut width. Et pour la hauteur, on utilise height.

<img src="logo-243tech.png" alt="Cette image contient le logo de 243tech" title="Cette image contient le logo de 243tech" width=100 height=100/>

Quelques conseils pour l"ajout des images en HTML

• Éviter de renommer les fichiers avec des caractères accentués
• Éviter des espaces dans le nom de fichiers. Remplacer les espaces par des undescore "-" .
• C"est conseiller de nommer les fichiers en lettres minuscules.

C"est tout pour ce chapitre. On se retrouve bientôt pour un nouveau chapitre auquel on verra comment insérer des vidéos et audio en HTML. Si vous avez des questions à poser, laissez-les en commentaire et je vais répondre.

---

• ← [HTML/CSS] - 10. Comment ajouter des images en HTML

• [HTML/CSS] - 1. Introduction →