Images JPG
Images GIF
Images PNG
Exemple
<!DOCTYPE html>
<html>
<body>
<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">
</body>
</html> Essayez vous - même » Toujours spécifier la largeur et la hauteur d'une image. Si ne sont pas spécifiées largeur et la hauteur, la page clignote pendant le chargement de l'image.
HTML Images Syntaxe
En HTML, les images sont définies avec le <img> tag.
La <img> tag est vide, il contient uniquement des attributs, et ne dispose pas d' une balise de fermeture.
Le src attribut spécifie l'URL (web address) de l'image:
<img src=" url " alt=" some_text ">L' alt Attributs
L' alt attribut spécifie un texte alternatif pour une image, si l'image ne peut pas être affichée.
L' alt attribut fournit des informations alternatives pour une image si un utilisateur pour une raison quelconque ne peut pas voir ( à cause de connexion lente, une erreur dans le src attribut, ou si l'utilisateur utilise un lecteur d'écran).
Si un navigateur ne peut pas trouver une image, il affiche le texte alt:
Exemple
<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> Essayez vous - même » L' alt attribut est requis. Une page Web ne sera pas correctement valider sans elle.
Les lecteurs d'écran HTML
Un lecteur d'écran est un logiciel qui peut lire ce qui est affiché sur un écran.
Les lecteurs d'écran sont utiles pour les personnes aveugles, ayant une déficience visuelle ou des difficultés d'apprentissage.
Les lecteurs d'écran peuvent lire l' alt attribut.
Taille de l'image - Largeur et Hauteur
Vous pouvez utiliser le style de l' attribut pour spécifier la largeur et la hauteur d'une image.
Les valeurs sont exprimées en pixels (use px after the value) :
Exemple
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> Essayez vous - même » Vous pouvez également utiliser la width et la height des attributs. Ici, les valeurs sont spécifiées en pixels par défaut:
Largeur et Hauteur ou style?
Les deux la largeur, la hauteur et les attributs de style sont valables dans la dernière norme HTML5.
Nous vous suggérons d' utiliser le style de l' attribut. Il empêche feuilles de styles de changer la taille d'origine des images:
Exemple
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
</body>
</html> Essayez vous - même » Images dans un autre dossier
Si non spécifié, le navigateur attend de trouver l'image dans le même dossier que la page Web.
Cependant, il est courant de stocker des images dans un sous-dossier. Vous devez alors inclure le nom du dossier dans le src attribut:
Exemple
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> Essayez vous - même » Images sur un autre serveur
Certains sites Web stockent leurs images sur les serveurs d'images.
En fait, vous pouvez accéder à des images depuis une adresse web dans le monde:
Les images animées
La norme GIF permet des images animées:
Exemple
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;"> Essayez vous - même » Notez que la syntaxe d'insérer des images animées est pas différent des images non animées.
L'utilisation d'une image comme lien
Pour utiliser une image comme un lien, il suffit d' imbriquer le <img> balise dans la <a> tag:
Exemple
<a href="default.html">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a> Essayez vous - même » Ajouter "border:0;" pour éviter IE9 (and earlier) d'afficher une bordure autour de l'image.
image flottante
Utilisez la propriété CSS float pour laisser flotter l'image.
L'image peut flotter à droite ou à gauche d'un texte:
Exemple
<p>
<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.
</p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.
</p> Essayez vous - même » Maps image
Utilisez le <map> balises pour définir une carte-image. Une image de la carte est une image avec des zones réactives.
Le name attribut de la <map> balise est associée à la <img> attribut usemap s » et crée une relation entre l'image et la carte.
La <map> balise contient un certain nombre de <area> balises, qui définit les zones cliquables dans l'image-carte:
Exemple
<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map> Essayez vous - même » Résumé du chapitre
- Utilisez le code HTML <img> élément pour définir une image
- Utilisez le code HTML src attribut pour définir l'URL de l'image
- Utilisez le code HTML alt attribut pour définir un texte alternatif pour une image, si elle ne peut pas être affichée
- Utiliser le code HTML width et la height des attributs pour définir la taille de l'image
- Utiliser les CSS width et la height des propriétés pour définir la taille de l'image (alternatively) en (alternatively)
- Utilisez le CSS float propriété de laisser flotter l'image
- Utilisez le code HTML <map> élément pour définir une carte-image
- Utilisez le code HTML <area> élément pour définir les zones cliquables dans la carte d'image
- Utilisez le code HTML <img> élément de usemap attribuer à pointer vers une carte-image
Chargement des images prend du temps. Les grandes images peuvent ralentir votre page. Utiliser des images soigneusement.
Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4» Exercice 5 » Exercice 6»
Mots-clés de l'image HTML
| Marque | La description |
|---|---|
| <img> | Définit une image |
| <map> | Définit une carte-image |
| <area> | Définit une zone cliquable à l'intérieur d'une carte-image |