Etiqueta Var de HTML | Programación HTML | Desarrollo web

Introducción

La etiqueta <var> se utiliza en HTML para representar una variable en un programa o una ecuación matemática. Funciona de manera similar a la etiqueta <strong> o <em>, pero en lugar de enfatizar el texto, muestra el contenido textual como una variable.

En este laboratorio, aprenderás a crear una variable dentro de un archivo HTML utilizando la etiqueta <var>.

Nota: Puedes 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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/TextContentandFormattingGroup -.-> html/para_br("Paragraphs and Line Breaks") html/TextContentandFormattingGroup -.-> html/text_dir("Text Direction") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70879{{"Declaraciones de variables en HTML"}} html/head_elems -.-> lab-70879{{"Declaraciones de variables en HTML"}} html/text_head -.-> lab-70879{{"Declaraciones de variables en HTML"}} html/para_br -.-> lab-70879{{"Declaraciones de variables en HTML"}} html/text_dir -.-> lab-70879{{"Declaraciones de variables en HTML"}} html/layout -.-> lab-70879{{"Declaraciones de variables en HTML"}} html/doc_flow -.-> lab-70879{{"Declaraciones de variables en HTML"}} html/inter_elems -.-> lab-70879{{"Declaraciones de variables en HTML"}} html/custom_attr -.-> lab-70879{{"Declaraciones de variables en HTML"}} end

Configurar el archivo HTML

Crea un nuevo archivo llamado index.html y agrega el siguiente código HTML para configurar la estructura básica del 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>

Crear una variable utilizando la etiqueta `<var>`

Para crear una variable en HTML, debes utilizar la etiqueta <var>. Agrega el siguiente código HTML para crear una variable llamada userName dentro de una frase.

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

La etiqueta <var> envuelve el nombre de la variable userName. Esta etiqueta se puede utilizar para representar una variable en un contexto de programación o una variable en una ecuación matemática.

Dar estilo a la variable

La etiqueta <var> tiene un estilo cursiva predeterminado. Sin embargo, puedes agregar propiedades CSS a esta etiqueta para cambiar su apariencia. Agrega el siguiente CSS para que el texto de la variable sea negrita y subrayado.

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

Mostrar el valor de una variable

También puedes utilizar la etiqueta <var> para mostrar el valor de una variable pasando el valor de la variable como texto. Agrega el siguiente código para mostrar el valor de userName.

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

Usando atributos globales

La etiqueta <var> admite atributos globales como class, id y style. Puedes agregar estos atributos para definir las propiedades CSS del texto de la variable o para acceder a la variable mediante JavaScript. Agrega el siguiente código para establecer la clase y el id de la etiqueta <var>.

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

Usando atributos de eventos

También puedes utilizar atributos de eventos como onclick y onmouseover para desencadenar eventos cuando se hace clic o se pasa el cursor sobre el texto de la variable. Agrega el siguiente código para mostrar un mensaje de alerta al hacer clic en el texto de la variable.

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

Resumen

En este laboratorio, aprendiste cómo crear una variable en HTML utilizando la etiqueta <var> y cómo dar estilo a la variable utilizando propiedades CSS. También aprendiste cómo mostrar el valor de una variable y cómo utilizar atributos globales y de eventos con la etiqueta. Con este conocimiento, ahora puedes crear variables en tus documentos HTML y personalizar su apariencia utilizando CSS.

Declaraciones de variables en HTML