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.

Stellen Sie die HTML-Datei ein

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 Sie eine Variable mit dem `-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.

Stylisieren Sie die 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>

Zeigen Sie den Wert einer Variable an

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>

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

Verwendung 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