Introdução
A tag HTML <meter> é usada para exibir uma medição escalar dentro de um intervalo conhecido. Ela pode representar valores fracionários, bem como valores escalares.
Neste laboratório, você aprenderá como usar a tag <meter> em HTML com sua sintaxe e atributos. Você também verá um exemplo básico para ilustrar a funcionalidade da tag <meter>.
Nota: Você pode praticar a codificação em
index.htmle aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.
Configurar o arquivo HTML
Nesta etapa, crie um arquivo HTML chamado index.html e adicione a estrutura HTML básica.
<!doctype html>
<html>
<head>
<title>HTML Meter Tag Lab</title>
</head>
<body></body>
</html>
Adicionar a tag <meter> ao arquivo HTML
Nesta etapa, adicione a tag <meter> ao arquivo HTML com seus atributos value, max e min.
<meter value="50" min="0" max="100"></meter>
Adicionar um rótulo para a tag <meter>
Nesta etapa, adicione um rótulo para a tag <meter> para fornecer melhor acessibilidade.
<label for="meter">My Meter:</label>
<meter id="meter" value="50" min="0" max="100"></meter>
Adicionar um valor mínimo (low) à tag <meter>
Nesta etapa, adicione o atributo low para especificar o intervalo que deve ser considerado como um valor baixo.
<label for="meter">My Meter:</label>
<meter id="meter" value="50" min="0" max="100" low="30"></meter>
Adicionar um valor máximo (high) à tag <meter>
Nesta etapa, adicione o atributo high para especificar o intervalo que deve ser considerado como um valor alto.
<label for="meter">My Meter:</label>
<meter id="meter" value="50" min="0" max="100" low="30" high="80"></meter>
Adicionar um valor ideal (optimum) à tag <meter>
Nesta etapa, adicione o atributo optimum para definir o valor ideal do medidor.
<label for="meter">My Meter:</label>
<meter
id="meter"
value="50"
min="0"
max="100"
low="30"
high="80"
optimum="50"
></meter>
Finalizar o arquivo HTML
Nesta etapa, finalize o arquivo HTML adicionando as tags de fechamento para as tags <body> e <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>
Resumo
Neste laboratório, você aprendeu como usar a tag HTML <meter> para exibir medições escalares dentro de um intervalo conhecido. Você viu como adicionar a tag <meter> a um arquivo HTML e usar seus atributos para especificar o intervalo de valores que devem ser considerados baixo (low), alto (high) e ótimo (optimum). Você também adicionou um rótulo (label) à tag <meter> para melhor acessibilidade. Agora você pode usar a tag <meter> para exibir medições escalares em seus documentos HTML.
