Balise Var HTML | Programmation HTML | Développement web

Introduction

La balise <var> est utilisée en HTML pour représenter une variable dans un programme ou une équation mathématique. Elle fonctionne de manière similaire à la balise <strong> ou <em>, mais au lieu d'attirer l'attention sur le texte, elle affiche le contenu textuel en tant que variable.

Dans ce laboratoire, vous allez apprendre à créer une variable dans un fichier HTML à l'aide de la balise <var>.

Note : Vous pouvez pratiquer la programmation dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Cliquez 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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) 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{{"Déclarations de variables HTML"}} html/head_elems -.-> lab-70879{{"Déclarations de variables HTML"}} html/text_head -.-> lab-70879{{"Déclarations de variables HTML"}} html/para_br -.-> lab-70879{{"Déclarations de variables HTML"}} html/text_dir -.-> lab-70879{{"Déclarations de variables HTML"}} html/layout -.-> lab-70879{{"Déclarations de variables HTML"}} html/doc_flow -.-> lab-70879{{"Déclarations de variables HTML"}} html/inter_elems -.-> lab-70879{{"Déclarations de variables HTML"}} html/custom_attr -.-> lab-70879{{"Déclarations de variables HTML"}} end

Configure le fichier HTML

Créez un nouveau fichier nommé index.html et ajoutez le code HTML suivant pour configurer la structure de base du document.

<!doctype html>
<html>
  <head>
    <title>HTML Var Tag Lab</title>
  </head>
  <body>
    <h1>Création d'une variable en HTML à l'aide de la balise Var</h1>
  </body>
</html>

Créer une variable à l'aide de la balise `<var>`

Pour créer une variable en HTML, vous devez utiliser la balise <var>. Ajoutez le code HTML suivant pour créer une variable nommée userName dans une phrase.

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

La balise <var> entoure le nom de variable userName. Cette balise peut être utilisée pour représenter une variable dans un contexte de programmation ou une variable dans une équation mathématique.

Styliser la variable

La balise <var> a un style italique par défaut. Cependant, vous pouvez ajouter des propriétés CSS à cette balise pour modifier son apparence. Ajoutez le CSS suivant pour rendre le texte de la variable gras et souligné.

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

Afficher la valeur d'une variable

Vous pouvez également utiliser la balise <var> pour afficher la valeur d'une variable en passant la valeur de la variable sous forme de texte. Ajoutez le code suivant pour afficher la valeur de userName.

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

Utilisation d'attributs globaux

La balise <var> prend en charge les attributs globaux tels que class, id et style. Vous pouvez ajouter ces attributs pour définir les propriétés CSS du texte de la variable ou pour accéder à la variable à l'aide de JavaScript. Ajoutez le code suivant pour définir la classe et l'ID de la balise <var>.

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

Utilisation d'attributs d'événement

Vous pouvez également utiliser des attributs d'événement tels que onclick et onmouseover pour déclencher des événements lorsque le texte de la variable est cliqué ou survolé. Ajoutez le code suivant pour afficher un message d'alerte lors du clic sur le texte de la variable.

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

Récapitulatif

Dans ce laboratoire, vous avez appris à créer une variable en HTML à l'aide de la balise <var> et à styliser la variable à l'aide de propriétés CSS. Vous avez également appris à afficher la valeur d'une variable et à utiliser des attributs globaux et d'événement avec la balise. Grâce à ces connaissances, vous pouvez désormais créer des variables dans vos documents HTML et personnaliser leur apparence à l'aide de CSS.

Déclarations de variables HTML