Image HTML
- Page précédente Lien HTML
- Page suivante Tableau HTML
En utilisant HTML, vous pouvez afficher des images dans un document.
Exemple
- Insérer une image
- Cet exemple montre comment afficher des images sur une page web.
- Insérer une image à partir de différents emplacements
- Cet exemple montre comment afficher des images provenant d'autres dossiers ou serveurs sur une page web.
Étiquette d'image (<img>) et attribut source (Src)
Dans l'HTML, l'image est définie par l'étiquette <img>.
<img> est un étiquette vide, ce qui signifie qu'elle ne contient que des attributs et n'a pas de balise de fermeture.
Pour afficher une image sur une page, vous devez utiliser l'attribut source (src). src signifie "source". La valeur de l'attribut source est l'adresse URL de l'image.
La syntaxe pour définir une image est :
<img src="url" />
L'URL indique l'emplacement de stockage de l'image. Si l'image nommée "boat.gif" se trouve dans le répertoire "images" de www.codew3c.com, son URL est http://www.codew3c.com/images/boat.gif.
Le navigateur affiche l'image à l'endroit où se trouve l'étiquette d'image dans le document. Si vous placez l'étiquette d'image entre deux paragraphes, le navigateur affichera d'abord le premier paragraphe, puis l'image, et enfin le second paragraphe.
Remplacer les attributs de remplacement (Alt)
L'attribut alt est utilisé pour définir une série de textes de remplacement prédéfinis pour l'image. La valeur de l'attribut de texte de remplacement est définie par l'utilisateur.
<img src="boat.gif" alt="Big Boat">
Lorsque le navigateur ne peut pas charger l'image, l'attribut de texte de remplacement peut informer les lecteurs de l'information perdue. Dans ce cas, le navigateur affichera ce texte de remplacement à la place de l'image. Il est une bonne habitude d'ajouter l'attribut de texte de remplacement à toutes les images de la page, ce qui aide à afficher l'information de manière plus efficace et est très utile pour ceux qui utilisent des navigateurs en texte pur.
Principales considérations - Conseils utiles :
Si un fichier HTML contient dix images, alors pour afficher correctement cette page, il faut charger onze fichiers. Le chargement des images prend du temps, donc notre conseil est : utiliser les images avec précaution.
Plus d'exemples
- Image de fond
- Cet exemple montre comment ajouter une image de fond à une page HTML.
- Aligner l'image
- Cet exemple montre comment aligner une image dans le texte.
- Flottant l'image
- Cet exemple montre comment faire flotter une image à gauche ou à droite du paragraphe.
- Ajuster la taille de l'image
- Cet exemple montre comment ajuster la taille de l'image.
- Afficher du texte de remplacement pour l'image
- Cet exemple montre comment afficher du texte de remplacement pour une image. Lorsque l'image ne peut pas être chargée par le navigateur, l'attribut de texte de remplacement informe les lecteurs de l'information perdue. Il est une bonne habitude d'ajouter l'attribut de texte de remplacement à toutes les images de la page, ce qui aide à afficher l'information de manière plus efficace et est très utile pour ceux qui utilisent des navigateurs en texte pur.
- Créer un lien d'image
- Cet exemple montre comment utiliser une image comme lien.
- Créer une carte graphique
- Cet exemple montre comment créer une carte graphique avec des zones cliquables. Chaque zone est un lien hypertexte.
- Convertir une image en carte graphique
- Cet exemple montre comment convertir une image ordinaire en carte graphique.
Balise d'image
| Balise | Description |
|---|---|
| <img> | Définir l'image. |
| <map> | Définir la carte graphique. |
| <area> | Définir la zone cliquable de la carte graphique. |
- Page précédente Lien HTML
- Page suivante Tableau HTML
