Maîtriser les légendes d'éléments HTML Figure

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.html et 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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/MultimediaandGraphicsGroup -.-> html/multimedia("Multimedia Elements") html/MultimediaandGraphicsGroup -.-> html/fig_cap("Figure and Caption Association") subgraph Lab Skills html/basic_elems -.-> lab-70757{{"Légende d'élément HTML Figure"}} html/head_elems -.-> lab-70757{{"Légende d'élément HTML Figure"}} html/multimedia -.-> lab-70757{{"Légende d'élément HTML Figure"}} html/fig_cap -.-> lab-70757{{"Légende d'élément HTML Figure"}} end

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.html et ouvrez-le dans votre navigateur web. Vous devriez maintenant voir l'image avec sa légende en dessous.

Stylisation de 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 fichier index.html pour 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.html et rafraîchissez la page web. Vous devriez maintenant voir toutes vos images avec leurs légendes en dessous.

Sommaire

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!