Tag Var HTML | Programação HTML | Desenvolvimento Web

Introdução

A tag <var> é utilizada em HTML para representar uma variável em um programa ou em uma equação matemática. Ela funciona de forma semelhante às tags <strong> ou <em>, mas em vez de enfatizar o texto, ela mostra o conteúdo textual como uma variável.

Neste laboratório, você aprenderá como criar uma variável dentro de um arquivo HTML usando a tag <var>.

Nota: Você pode praticar a codificação em index.html e 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

Crie um novo arquivo chamado index.html e adicione o seguinte código HTML para configurar a estrutura básica do documento.

<!doctype html>
<html>
  <head>
    <title>HTML Var Tag Lab</title>
  </head>
  <body>
    <h1>Creating a Variable in HTML Using the Var Tag</h1>
  </body>
</html>

Criar uma Variável Usando a Tag `<var>`

Para criar uma variável em HTML, você precisa usar a tag <var>. Adicione o seguinte código HTML para criar uma variável chamada userName dentro de uma frase.

<p>The current user is <var>userName</var>.</p>

A tag <var> envolve o nome da variável userName. Essa tag pode ser usada para representar uma variável em um contexto de programação ou uma variável em uma equação matemática.

Estilizar a Variável

A tag <var> possui um estilo itálico padrão. No entanto, você pode adicionar propriedades CSS a esta tag para alterar sua aparência. Adicione o seguinte CSS para deixar o texto da variável em negrito e sublinhado.

<style>
  var {
    font-weight: bold;
    text-decoration: underline;
  }
</style>

Exibir o Valor de uma Variável

Você também pode usar a tag <var> para exibir o valor de uma variável, passando o valor da variável como texto. Adicione o seguinte código para exibir o valor de userName.

<p>The current user is <var>John Doe</var>.</p>

Usando Atributos Globais

A tag <var> suporta atributos globais como class, id e style. Você pode adicionar esses atributos para definir as propriedades CSS do texto da variável ou para acessar a variável usando JavaScript. Adicione o seguinte código para definir a classe e o id da tag <var>.

<p>
  The current user is <var class="user-name" id="current-user">John Doe</var>.
</p>

Usando Atributos de Evento

Você também pode usar atributos de evento como onclick e onmouseover para acionar eventos quando o texto da variável é clicado ou o mouse passa por cima. Adicione o seguinte código para exibir uma mensagem de alerta ao clicar no texto da variável.

<p>The current user is <var onclick="alert('User clicked!')">John Doe</var>.</p>

Resumo

Neste laboratório, você aprendeu como criar uma variável em HTML usando a tag <var> e como estilizar a variável usando propriedades CSS. Você também aprendeu como exibir o valor de uma variável e como usar atributos globais e de evento com a tag. Com este conhecimento, você agora pode criar variáveis em seus documentos HTML e personalizar sua aparência usando CSS.

Declarações de Variáveis HTML