Introduction
La balise HTML <figcaption> est utilisée pour fournir des légendes pour le contenu à l'intérieur de l'élément <figure>. Dans ce laboratoire, vous allez apprendre à utiliser la balise <figcaption> pour ajouter des légendes à vos images.
Note: Vous pouvez pratiquer la programmation dans
index.htmlet apprendre Comment écrire du HTML dans Visual Studio Code. Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.
Ajout de l'image et de la légende
Ouvrez le fichier index.html dans votre éditeur de texte préféré et écrivez la structure HTML de base. Ajoutez la déclaration <DOCTYPE>, les balises <html>, <head> et <body>.
- À l'intérieur de la balise
<body>, créez un élément<figure>avec une balise d'image à l'intérieur. Vous pouvez utiliser n'importe quelle image de votre choix. Par exemple :
<figure>
<img src="your-image-url-here" alt="Your image description" />
</figure>
- Maintenant, ajoutez une balise
<figcaption>immédiatement après la balise<img>pour fournir une légende pour l'image. Par exemple :
<figure>
<img src="your-image-url-here" alt="Your image description" />
<figcaption>Image caption goes here</figcaption>
</figure>
- Enregistrez vos modifications dans le fichier
index.htmlet ouvrez-le dans votre navigateur web. Vous devriez maintenant voir l'image avec sa légende en dessous.
Styliser la légende
Par défaut, la balise
<figcaption>est un élément de niveau de bloc qui occupe toute la largeur de l'élément parent. Vous pouvez styliser la légende à l'aide de CSS pour ajuster sa position, sa police, sa couleur, etc.Ajoutez le code CSS suivant à la section
<head>de votre fichierindex.htmlpour changer la police, la taille de police et la couleur de la légende :
figcaption {
font-family: Arial, sans-serif;
font-size: 18px;
color: #555;
}
- Vous pouvez également changer la position de la légende en utilisant CSS pour ajuster les propriétés de marge et de remplissage de la balise
<figcaption>. Par exemple :
figcaption {
margin-top: 10px;
padding: 5px;
}
Ajout de plusieurs images et légendes
Vous pouvez ajouter plusieurs images et légendes à une seule page web en répétant les étapes précédentes. Créez simplement un nouvel élément
<figure>avec une balise<img>et une balise<figcaption>pour chaque image.Enregistrez vos modifications dans le fichier
index.htmlet rafraîchissez la page web. Vous devriez maintenant voir toutes vos images avec leurs légendes en dessous.
Résumé
La balise HTML <figcaption> est un outil puissant pour fournir des légendes d'images dans vos pages web. En utilisant cette balise, vous pouvez rendre vos images plus accessibles et conviviales pour votre public. N'oubliez pas de styliser vos légendes à l'aide de CSS pour qu'elles aient également un aspect formidable!
