Syntaxe des images en HTML
En HTML, les images sont définies avec la
balise <img>.
La balise <img>
est vide, elle ne contient que des attributs et n'a pas de balise de fermeture.
L'attribut src spécifie l'URL (adresse Web)
de l'image
<img src="url" alt="Nom
de l’image "style="width:width;height:height;">
L'attribut alt :
L'attribut alt fournit un texte
alternatif pour une image, si l'utilisateur pour une raison quelconque ne peut
pas le voir (en raison d'une connexion lente, une erreur dans l'attribut src
ou si l'utilisateur utilise un lecteur d'écran).
Si un navigateur ne peut pas trouver une
image, il affichera la valeur de l'attribut alt:
<img src="nomimg.gif" alt="HTML5
Icon"style="width:128px;height:128px;">
Lorsque l’image est non trouvé, le navigateur
affiche :
HTML5Icon
L'attribut alt est requis. Une
page Web ne sera pas validée correctement sans elle.
Lecteurs d'écran HTML
Un lecteur d'écran est un logiciel qui lit le
code HTML, convertit le texte et permet à l'utilisateur d'écouter le contenu.
Les lecteurs d'écran sont utiles pour les personnes aveugles, malvoyantes ou
handicapées d'apprentissage
Taille de l'image - width et height -
Vous pouvez utiliser l'attribut style pour
spécifier la largeur et la hauteur d'une image.
Les valeurs sont spécifiées en pixels
(utilisez px après la valeur):
<img src="html5.gif" alt="HTML5
Icon" style="width:128px;height:128px;">
Vous pouvez également utiliser les attributs
largeur et hauteur. Par défaut, les valeurs sont spécifiées en pixels:
<img src="html5.gif" alt="HTML5
Icon" width="128"height="128">
Largeur et hauteur, ou
style?
Les attributs
width, height et style sont valides en HTML5.
Cependant, nous
vous suggérons d'utiliser l'attribut style. Il empêche les feuilles de styles
internes ou externes de modifier la taille d'origine des images:
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>
<img src="web.jpg" alt="web"style="width:128px;height:128px;">
<img src="web.jpg" alt="web" width="128"height="128">
</body>
</html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>
<img src="web.jpg" alt="web"style="width:128px;height:128px;">
<img src="web.jpg" alt="web" width="128"height="128">
</body>
</html>
Donne le résultat
suivant :
Images dans un autre dossier
S'il n'est pas
spécifié, le navigateur s'attend à trouver l'image dans le même dossier que la
page Web.
Cependant, il est
fréquent de stocker des images dans un sous-dossier. Vous devez ensuite inclure
le nom du dossier dans l'attribut src:
<img src="/images/html5.gif" alt="HTML5
Icon"style="width:128px;height:128px;">
Images sur un autre serveur
Certains sites Web
stockent leurs images sur des serveurs d'images.
En fait, vous
pouvez accéder aux images de n'importe quelle adresse Web dans le monde:
<img src="http://www.monsite.com/images/monimg.jpg" alt="monsite">
Image flottante
Utilisez la
propriété flottante CSS pour laisser flotter l'image vers la droite ou vers la
gauche d'un texte:
<p><img src=" web.jpg " alt="web"style="float:right;width:42px;height:42px;"> L'image flottera à droite du texte.</p>
<p><img src=" web.jpg " alt="web "style="float:left;width:42px;height:42px;">
<p><img src=" web.jpg " alt="web "style="float:left;width:42px;height:42px;">
L'image flottera
à gauche du texte.</p>
Cartes d'images
Utilisez la balise <map>
pour définir une image-carte. Une image-map est une image avec des zones
cliquables.
L'attribut name de
la balise <map> est associé à l'attribut usemap de <img> et crée
une relation entre l'image et la carte.
La balise <map>
contient un certain nombre de balises <area> qui définissent les zones
cliquables dans l'image-map:
<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>
<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>
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean. 
Leave a Comment