Maîtrise des listes de définition HTML

Introduction

Dans ce laboratoire, vous allez apprendre à utiliser la balise HTML <dfn> pour créer une liste de définitions qui met en évidence les termes définis. La balise <dfn> est couramment utilisée dans les tutoriels et les sites web éducatifs pour offrir une expérience utilisateur interactive et informative.

Note: Vous pouvez pratiquer la programmation dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Cliquez 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.

Configuration du fichier HTML

Créez un nouveau fichier nommé index.html et ouvrez-le dans votre éditeur de code préféré.
Ajoutez la structure HTML de base à votre fichier.

<!doctype html>
<html>
  <head>
    <title>Liste de définitions HTML</title>
  </head>
  <body></body>
</html>

Création de la liste de définitions

À l'intérieur de l'élément <body>, créez un élément <dl> pour contenir votre liste de définitions.
À l'intérieur de l'élément <dl>, créez un ensemble de paires terme/définition en utilisant respectivement les éléments <dt> et <dd>.

<body>
  <dl>
    <dt><dfn>HTML</dfn></dt>
    <dd>
      HyperText Markup Language est le langage standard pour créer des pages
      web.
    </dd>
    <dt><dfn>CSS</dfn></dt>
    <dd>
      Cascading Style Sheets est utilisé pour décrire la présentation d'un
      document écrit dans un langage de balisage.
    </dd>
    <dt><dfn>JavaScript</dfn></dt>
    <dd>
      Un langage de script utilisé pour créer et contrôler le contenu dynamique
      d'un site web.
    </dd>
  </dl>
</body>

Dans cet exemple, nous utilisons la balise <dfn> pour mettre en évidence les termes et les rendre plus saillants.

Ajout d'un tool-tip

Pour ajouter un tool-tip à chaque terme, incluez un attribut title à l'intérieur des éléments <dfn>.

<dt><dfn title="HyperText Markup Language">HTML</dfn></dt>
<dd>
  HyperText Markup Language est le langage standard pour créer des pages web.
</dd>

L'attribut title créera un tool-tip qui affichera le terme complet lorsque l'utilisateur passera la souris au-dessus.

Personnalisation du style CSS

Par défaut, la balise <dfn> a un style de police italique. Cependant, vous pouvez personnaliser les styles en utilisant CSS.
Ajoutez les styles CSS suivants à votre fichier.

<style>
  dfn {
    font-style: italic;
    color: blue;
  }
  dt {
    font-weight: bold;
  }
</style>

Les styles ci-dessus définiront le style de police de <dfn> en italique et la couleur de police en bleu. Le poids de police de <dt> est également changé en gras.

Sommaire

Dans ce laboratoire, vous avez appris à utiliser la balise HTML <dfn> pour créer une liste de définitions avec des termes mis en évidence et des tooltips. En utilisant la balise <dfn>, vous pouvez rendre votre contenu éducatif plus interactif et visuellement attrayant pour l'utilisateur.

Terme de définition HTML

Introduction

Pratique immédiate, aucun setup requis.

Configuration du fichier HTML

Création de la liste de définitions

Coder directement depuis le tutoriel.

Ajout d'un tool-tip

Personnalisation du style CSS

Passez de la théorie à la pratique.

Sommaire