HTML Image
Exemple en ligne
Insérer une image
Cet exemple montre comment afficher une image sur une page web.
À partir de différents emplacements
Cet exemple montre comment afficher des images provenant d'autres dossiers ou serveurs sur une page web.
(Vous pouvez trouver plus d'exemples en bas de cette page.)
Image HTML - Balise d'image ( <img> ) et attribut source (Src)
En HTML, l'image est définie par la balise <img>.
<img> est une balise vide, ce qui signifie qu'elle contient uniquement des attributs et n'a pas de balise de fermeture.
Pour afficher une image sur la page, vous devez utiliser l'attribut source (src). La valeur de l'attribut src est l'adresse URL de l'image.
La syntaxe pour définir une image est :
L'URL fait référence à l'emplacement où l'image est stockée. Si l'image nommée "pulpit.jpg" se trouve dans le répertoire www.example.com/images, son URL seraithttp://www.example.com/images/pulpit.jpg。
Le navigateur affichera l'image à l'endroit où la balise d'image apparaît dans le document. Si vous placez la balise d'image entre deux paragraphes, le navigateur affichera d'abord le premier paragraphe, puis l'image, et enfin le second paragraphe.
HTML
L'attribut Alt est utilisé pour définir une chaîne de texte de remplacement préétablie pour l'image.
La valeur de l'attribut de texte de remplacement est définie par l'utilisateur.
Lorsque le navigateur ne peut pas charger l'image, l'attribut de texte de remplacement indique au lecteur quelles informations ont été perdues. À ce moment, le navigateur affichera ce texte alternatif à la place de l'image. C'est une bonne habitude d'ajouter des attributs de texte de remplacement aux images de la page, ce qui aide à mieux afficher les informations et est très utile pour ceux qui utilisent uniquement des navigateurs textuels.
Image HTML - Définir la hauteur et la largeur de l'image
Les attributs height et width sont utilisés pour définir la hauteur et la largeur de l'image.
L'unité par défaut des valeurs d'attribut est le pixel :
Remarque :C'est une bonne habitude de spécifier la hauteur et la largeur de l'image. Si l'image spécifie sa hauteur et sa largeur, la page conservera la taille spécifiée lors du chargement. Si l'image ne spécifie pas sa taille, le chargement de la page peut entraîner la destruction de la mise en page globale de la page HTML.
Conseils de base - Conseils utiles :
Remarque :Si un fichier HTML contient dix images, pour afficher correctement cette page, il est nécessaire de charger 11 fichiers. Le chargement des images prend du temps, donc notre suggestion est : utilisez les images avec parcimonie.
Remarque :Lorsque vous insérez des images dans la page, faites attention au chemin de l'image. Si la position de l'image n'est pas correctement définie, le navigateur ne peut pas charger l'image, et la balise image affichera une image brisée.
Plus d’exemples
Disposer les images
Cet exemple montre comment disposer des images dans du texte.
Image flottante
Cet exemple montre comment faire flotter des images à gauche ou à droite du paragraphe.
Définir un lien d'image
Cet exemple montre comment utiliser une image comme lien.
Créer une carte image
Cet exemple montre comment créer une carte image avec des zones cliquables. Chaque zone est un lien hypertexte.
Balise d'image HTML
| Balise | Description |
|---|---|
| <img> | Définir une image |
| <map> | Définir une carte image |
| <area> | Définir une zone cliquable dans une image map |