English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Les pages web riches et variées que nous voyons aujourd'hui sont grâce à l'utilisation des images. Avant, les pages web du réseau étaient entièrement en texte, très monotones, ce qui montre l'importance de l'image dans la conception du site web. Vous pouvez insérer des images dans une page html, et les formats d'image couramment utilisés sur le web sont jpg, png, gif, etc.
!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Base Tutorial(oldtoolbag.com)</title> </head> <body> <h2>default picture</h2> <img border="0" src="/run/html/default.jpg" alt="default" width="304"height="228"> </body> </html>Tester pour voir ‹/›
Insérer une image
Ce exemple montre comment afficher des images dans une page web.
Insérer une image depuis différents emplacements
Ce 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.)
Dans HTML, l'image est définie par le balise <img>.
<img> est un balise 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 de définition de l'image est :
<img src="url" alt="some_text">
L'URL indique l'emplacement de stockage de l'image. Si l'image nommée "default.jpg" se trouve dans www.w3dans le répertoire images de codebox.com, son URL est https://fr.oldtoolbag.com/run/html/default.jpg.
Le navigateur affiche l'image à l'endroit où l'étiquette d'image apparaît 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.
L'attribut alt est utilisé pour définir une série de textes substitués préalables 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 informe le lecteur des informations perdues. Dans ce cas, le navigateur affichera ce texte alternatif à 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 à mieux afficher les informations et est très utile pour ceux qui utilisent des navigateurs en texte pur.
height (hauteur) et width (largeur) attributs sont utilisés pour définir la hauteur et la largeur de l'image.
Les valeurs par défaut des attributs sont en pixels :
<img src="pulpit.jpg" alt="Pulpit rock" width="304" hauteur="228">
Conseil : spécifier la hauteur et la largeur de l'image est une bonne habitude. Si les dimensions de l'image sont spécifiées, la page sera chargée avec les dimensions spécifiées. Si la taille de l'image n'est pas spécifiée, il peut y avoir des dommages à la mise en page globale de la page HTML lors du chargement de la page.
Attention : si un fichier HTML contient dix images, il est nécessaire de charger 11 un fichier. Le chargement d'une image prend du temps, donc notre conseil est : utilisez les images avec parcimonie.
Attention : lors du chargement de la page, veillez à insérer le chemin d'accès à l'image de la page. Si l'emplacement de l'image ne peut pas être configuré correctement, le navigateur ne peut pas charger l'image, et l'étiquette d'image affichera une image cassée.
Aligner l'image
Ce exemple démontre comment aligner une image dans le texte.
Flottante image
Ce exemple démontre comment faire flotter une image à gauche ou à droite du paragraphe.
Configurer le lien d'image
Ce exemple démontre comment utiliser une image comme lien.
Créer une carte d'image
Ce exemple montre comment créer une carte d'image avec des zones cliquables. Chaque zone est un lien hypertexte.
| Balise | Description |
| <img> | Définir l'image |
| <map> | Définir la carte graphique |
| <area> | Définir la zone cliquable de la carte graphique |