Dominando la Medición Escalar en HTML

Introducción

La etiqueta HTML <meter> se utiliza para mostrar una medición escalar dentro de un rango conocido. Puede representar valores fraccionarios así como valores escalares.

En este laboratorio, aprenderá a usar la etiqueta <meter> en HTML con su sintaxis y atributos. También verá un ejemplo básico para ilustrar la funcionalidad de la etiqueta <meter>.

Nota: Puede practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Configurar el archivo HTML

En este paso, cree un archivo HTML llamado index.html y agregue la estructura básica de HTML.

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

Agregar la etiqueta al archivo HTML

En este paso, agregue la etiqueta <meter> al archivo HTML con sus atributos value, max y min.

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

Agregar una etiqueta para la etiqueta

En este paso, agregue una etiqueta para la etiqueta <meter> para brindar una mejor accesibilidad.

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

Agregar un rango bajo a la etiqueta

En este paso, agregue el atributo low para especificar el rango que debe considerarse como un valor bajo.

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

Agregar un rango alto a la etiqueta

En este paso, agregue el atributo high para especificar el rango que debe considerarse como un valor alto.

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

Agregar un valor óptimo a la etiqueta

En este paso, agregue el atributo optimum para establecer el valor óptimo del medidor.

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

Termina el archivo HTML

En este paso, termine el archivo HTML agregando una etiqueta de cierre para las etiquetas <body> y <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>

Resumen

En este laboratorio, aprendiste cómo usar la etiqueta HTML <meter> para mostrar mediciones escalares dentro de un rango conocido. Viste cómo agregar la etiqueta <meter> a un archivo HTML y usar sus atributos para especificar el rango de valores que deben considerarse bajo, alto y óptimo. También agregaste una etiqueta a la etiqueta <meter> para una mejor accesibilidad. Ahora puedes usar la etiqueta <meter> para mostrar mediciones escalares en tus documentos HTML.