Images

Les images jouent un rôle essentiel dans l'amélioration de l'attrait visuel et la transmission d'informations sur les pages web. En HTML, les images sont insérées à l'aide de la balise <img>.

Insertion d'images

La balise <img> est utilisée pour insérer des images dans un document HTML. Contrairement à la plupart des balises HTML, la balise <img> n'a pas de balise de fermeture et est auto-fermante.
Exemple :

<img src="image.jpg" alt="Description of the image">

Dans l'exemple ci-dessus :

• La balise <img> est utilisée pour insérer une image ;
• L'attribut src spécifie la source (URL) du fichier image ;
• L'attribut alt fournit un texte alternatif pour l'image. Ce texte s'affiche si l'image ne peut pas être chargée ou à des fins d'accessibilité.

Avant d'examiner un exemple concret, il convient de comprendre les attributs essentiels de la balise img et leur impact sur son contenu.

Attributs d'image

1. src : Spécifie la source (URL) du fichier image. Cet attribut est requis pour que la balise <img> affiche l'image ;
2. alt : Fournit un texte alternatif pour l'image. Le texte spécifié dans l'attribut alt s'affiche si l'image ne peut pas être chargée ou à des fins d'accessibilité. Il est essentiel pour les utilisateurs utilisant des lecteurs d'écran ou dans les situations où l'image ne peut pas être affichée ;
3. width : Spécifie la largeur de l'image en pixels ou en pourcentage du conteneur parent ;
4. height : Spécifie la hauteur de l'image en pixels ou en pourcentage du conteneur parent ;
5. title : Fournit des informations supplémentaires sur l'image. Il est souvent affiché sous forme d'infobulle lorsque l'utilisateur survole l'image.
   Exemple :

Dans l'exemple ci-dessus :

• La balise <img> insère une image sur une page web ;
• L'attribut src spécifie l'URL source du fichier image ;
• L'attribut alt définit le texte alternatif pour l'image ;
• L'attribut width définit la largeur de l'image ;
• L'attribut height définit la hauteur de l'image ;
• L'attribut title fournit des informations supplémentaires sur l'image.

Tutoriel vidéo