Contenu du cours
Essentiels HTML
Essentiels HTML
3. Images et Médias
Images
Images
Les images jouent un rôle crucial 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 :
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 est affiché si l'image ne peut pas être chargée ou à des fins d'accessibilité.
Avant d'explorer un exemple concret, comprenons les attributs essentiels de la balise img
et comment ils influencent son contenu.
Attributs d'image
src
: Spécifie la source (URL) du fichier image. Cet attribut est requis pour que la balise<img>
affiche l'image ;alt
: Fournit un texte alternatif pour l'image. Le texte spécifié dans l'attributalt
est affiché si l'image ne peut pas être chargée ou à des fins d'accessibilité. Il est essentiel pour les utilisateurs qui peuvent utiliser des lecteurs d'écran ou dans des situations où l'image ne peut pas être affichée ;width
: Spécifie la largeur de l'image en pixels ou en pourcentage du conteneur parent ;height
: Spécifie la hauteur de l'image en pixels ou en pourcentage du conteneur parent ;title
: Fournit des informations supplémentaires sur l'image. Il est souvent affiché sous forme d'infobulle lorsque l'utilisateur survole l'image.
Exemple :
index.html
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
1. Quelle balise est utilisée pour insérer des images dans un document HTML ?
2. Quel attribut est requis pour la balise <img>
afin d'afficher l'image ?
3. Que fournit l'attribut alt
pour une image ?
4. Que se passe-t-il si l'image spécifiée dans l'attribut src
ne peut pas être chargée ?
Tout était clair ?
Merci pour vos commentaires !
Section 3. Chapitre 1