Textformatierungs-Tags

HTML stellt verschiedene Textformatierungs-Tags zur Verfügung, mit denen Hervorhebungen, Unterstreichungen oder Durchstreichungen nach Bedarf hinzugefügt werden können.

Die Tags <strong> und <em> dienen zur Hervorhebung von Text. Das <strong>-Tag stellt Text fett dar und signalisiert besondere Wichtigkeit, während das <em>-Tag Text kursiv darstellt und eine Betonung anzeigt.

Das <u>-Tag unterstreicht Text, um visuelle Klarheit zu schaffen und wichtige Informationen hervorzuheben. Die Unterstreichung sollte jedoch sparsam eingesetzt werden, um eine Überfrachtung des Textes zu vermeiden.

Das <s>-Tag streicht Text durch und kennzeichnet damit Löschungen oder Irrelevanz. Es wird häufig verwendet, um anzuzeigen, dass bestimmter Text entfernt wurde oder nicht mehr gültig ist.
Beispiel:

Im obigen Beispiel:

• Die Tags <strong> und <em> heben Text hervor, wobei <strong> den Text fett und <em> ihn kursiv darstellt;
• Das <u>-Tag unterstreicht den Text und hebt ihn visuell hervor;
• Das <s>-Tag streicht den Text durch und kennzeichnet ihn als gelöscht oder irrelevant.

Links

Links, auch als Hyperlinks bezeichnet, ermöglichen es Nutzern, zwischen Webseiten, Ressourcen und verschiedenen Kommunikationsformen zu navigieren. In HTML werden Links mit dem <a>-Tag (Anker) erstellt.

<a href="href-value">some text</a>

Das href-Attribut im <a>-Tag gibt das Ziel des Links an. Es kann verschiedene Arten von URLs akzeptieren, darunter:

• Absolute URLs: Geben die vollständige Adresse der verlinkten Ressource einschließlich des Protokolls an (z. B. "https://www.example.com");
• Telefon-URLs: Ermöglichen es Nutzern, direkt aus dem Browser heraus Anrufe zu tätigen. Formatiert als "tel:phone-number". Es ist wichtig, die Ländervorwahl anzugeben und Sonderzeichen oder Leerzeichen aus der Telefonnummer zu entfernen (z. B. "tel:+123456789");
• E-Mail-URLs: Ermöglichen es Nutzern, beim Anklicken eine E-Mail zu verfassen. Formatiert als "mailto:email-address". Es ist wichtig, die vollständige E-Mail-Adresse nach mailto: anzugeben (z. B. "mailto:example@example.com").

Beispiel:

Im obigen Beispiel:

• Das <a>-Tag erstellt Hyperlinks mit unterschiedlichen Zielen;
• Das href-Attribut gibt verschiedene URLs an, einschließlich absoluter URLs, Telefonnummern und E-Mail-Adressen.

Weitere nützliche Attribute

Das <a>-Tag verfügt über mehrere Attribute, mit denen die Eigenschaften eines Hyperlinks festgelegt werden können. Zu den gängigen Attributen gehören:

• target="_blank": Gibt an, wo das verlinkte Dokument geöffnet werden soll. "_blank" öffnet den Link in einem neuen Fenster oder Tab;
• download: Gibt an, dass das Ziel beim Klicken auf den Hyperlink heruntergeladen wird. Dieses Attribut kann einen Wert haben, um den Dateinamen für das Speichern der Ressource festzulegen.

Beispiel:

In diesem Beispiel:

• Das href-Attribut gibt die URL der verlinkten Ressource an;
• Das target-Attribut öffnet den Link in einem neuen Fenster oder Tab.

Schaltflächen

Das <button>-Tag erstellt anklickbare Schaltflächen auf Webseiten. Es ermöglicht den Nutzern, mit der Webseite zu interagieren, indem Aktionen wie das Absenden eines Formulars oder das Ausführen von JavaScript-Code ausgelöst werden. Auch wenn JavaScript in diesem Kurs nicht im Fokus steht, ist es wichtig zu wissen, dass diese Möglichkeit besteht.

Arten von Schaltflächen

• Standard-Schaltfläche (<button type="button">): Eine universell einsetzbare Schaltfläche für verschiedene Aktionen auf der Webseite, wie das Auslösen von JavaScript-Funktionen oder das Navigieren zu einer anderen Seite;
• Absende-Schaltfläche (<button type="submit">): Wird innerhalb eines Formulars verwendet, um die Formulardaten an einen Server zu senden;
• Zurücksetzen-Schaltfläche (<button type="reset">): Wird innerhalb eines Formulars verwendet, um die Felder des Formulars auf ihre Standardwerte zurückzusetzen.

Beispiel:

Im obigen Beispiel:

• Die erste Schaltfläche ist eine Standardschaltfläche mit einem onclick-Attribut, das beim Klicken eine Warnmeldung auslöst;
• Die zweite Schaltfläche ist eine Absende-Schaltfläche, die die Formulardaten an den Server sendet;
• Die dritte Schaltfläche ist eine Zurücksetzen-Schaltfläche, die die Formularfelder auf ihre Standardwerte zurücksetzt.

Video-Tutorial