Maîtriser la mesure scalaire HTML

Introduction

La balise HTML <meter> est utilisée pour afficher une mesure scalaire dans une plage connue. Elle peut représenter des valeurs fractionnaires ainsi que des valeurs scalaires.

Dans ce laboratoire, vous allez apprendre à utiliser la balise <meter> en HTML avec sa syntaxe et ses attributs. Vous verrez également un exemple de base pour illustrer la fonctionnalité de la balise <meter>.

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.

Configurez le fichier HTML

Dans cette étape, créez un fichier HTML appelé index.html et ajoutez la structure HTML de base.

<!doctype html>
<html>
  <head>
    <title>HTML Meter Tag Lab</title>
  </head>
  <body></body>
</html>

Ajoutez la balise au fichier HTML

Dans cette étape, ajoutez la balise <meter> au fichier HTML avec ses attributs value, max et min.

<meter value="50" min="0" max="100"></meter>

Ajoutez une étiquette pour la balise

Dans cette étape, ajoutez une étiquette pour la balise <meter> pour améliorer l'accessibilité.

<label for="meter">My Meter:</label>
<meter id="meter" value="50" min="0" max="100"></meter>

Ajoutez une plage basse à la balise

Dans cette étape, ajoutez l'attribut low pour spécifier la plage qui doit être considérée comme une valeur basse.

<label for="meter">My Meter:</label>
<meter id="meter" value="50" min="0" max="100" low="30"></meter>

Ajoutez une plage haute à la balise

Dans cette étape, ajoutez l'attribut high pour spécifier la plage qui doit être considérée comme une valeur haute.

<label for="meter">My Meter:</label>
<meter id="meter" value="50" min="0" max="100" low="30" high="80"></meter>

Ajoutez une valeur optimale à la balise

Dans cette étape, ajoutez l'attribut optimum pour définir la valeur optimale de la jauge.

<label for="meter">My Meter:</label>
<meter
  id="meter"
  value="50"
  min="0"
  max="100"
  low="30"
  high="80"
  optimum="50"
></meter>

Terminez le fichier HTML

Dans cette étape, terminez le fichier HTML en ajoutant une balise de fermeture pour les balises <body> et <html>.

<!doctype html>
<html>
  <head>
    <title>HTML Meter Tag Lab</title>
  </head>
  <body>
    <label for="meter">My Meter:</label>
    <meter
      id="meter"
      value="50"
      min="0"
      max="100"
      low="30"
      high="80"
      optimum="50"
    ></meter>
  </body>
</html>

Résumé

Dans ce laboratoire, vous avez appris à utiliser la balise HTML <meter> pour afficher des mesures scalaires dans une plage connue. Vous avez vu comment ajouter la balise <meter> à un fichier HTML et utiliser ses attributs pour spécifier la plage de valeurs qui devrait être considérée comme basse, haute et optimale. Vous avez également ajouté une étiquette à la balise <meter> pour une meilleure accessibilité. Maintenant, vous pouvez utiliser la balise <meter> pour afficher des mesures scalaires dans vos documents HTML.

Mesure scalaire HTML