HTML Var-Tag | HTML-Programmierung | Webentwicklung

Einführung

Das <var>-Tag wird in HTML verwendet, um eine Variable in einem Programm oder einer mathematischen Gleichung darzustellen. Es funktioniert ähnlich wie das <strong>- oder <em>-Tag, aber statt Text zu betonen, zeigt es den textuellen Inhalt als Variable an.

In diesem Lab werden Sie lernen, wie Sie eine Variable in einer HTML-Datei mithilfe des <var>-Tags erstellen.

Hinweis: Sie können im index.html programmieren und lernen, wie Sie HTML in Visual Studio Code schreiben. Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Skills Graph

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

Einrichten der HTML-Datei

Erstellen Sie eine neue Datei mit dem Namen index.html und fügen Sie den folgenden HTML-Code hinzu, um die grundlegende Struktur des Dokuments einzurichten.

<!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>

Erstellen einer Variable mit dem `<var>`-Tag

Um eine Variable in HTML zu erstellen, müssen Sie das <var>-Tag verwenden. Fügen Sie den folgenden HTML-Code hinzu, um eine Variable namens userName innerhalb eines Satzes zu erstellen.

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

Das <var>-Tag umschließt den Variablennamen userName. Dieses Tag kann verwendet werden, um eine Variable in einem programmierenden Kontext oder eine Variable in einer mathematischen Gleichung darzustellen.

Stylen der Variable

Das <var>-Tag hat einen standardmäßigen kursiven Stil. Sie können jedoch CSS-Eigenschaften zu diesem Tag hinzufügen, um dessen Aussehen zu ändern. Fügen Sie den folgenden CSS-Code hinzu, um den Variablentext fett und unterstrichen zu gestalten.

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

Anzeigen des Werts einer Variablen

Sie können auch das <var>-Tag verwenden, um den Wert einer Variablen anzuzeigen, indem Sie den Variablenwert als Text übergeben. Fügen Sie den folgenden Code hinzu, um den Wert von userName anzuzeigen.

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

Verwenden globaler Attribute

Das <var>-Tag unterstützt globale Attribute wie class, id und style. Sie können diese Attribute hinzufügen, um die CSS-Eigenschaften des Variablentyps zu definieren oder um auf die Variable über JavaScript zuzugreifen. Fügen Sie den folgenden Code hinzu, um die Klasse und die ID des <var>-Tags festzulegen.

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

Verwenden von Ereignisattributen

Sie können auch Ereignisattribute wie onclick und onmouseover verwenden, um Ereignisse auszulösen, wenn der Variablentext angeklickt oder über dem Mauszeiger gehalten wird. Fügen Sie den folgenden Code hinzu, um eine Alert-Nachricht anzuzeigen, wenn der Variablentext angeklickt wird.

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

Zusammenfassung

In diesem Lab haben Sie gelernt, wie Sie in HTML eine Variable mit dem <var>-Tag erstellen und wie Sie die Variable mit CSS-Eigenschaften stylen. Sie haben auch gelernt, wie Sie den Wert einer Variable anzeigen und wie Sie globale und Ereignisattribute mit dem Tag verwenden. Mit diesen Kenntnissen können Sie jetzt Variablen in Ihren HTML-Dokumenten erstellen und deren Aussehen mit CSS anpassen.

HTML-Variablendeklarationen