Spezielle Textauszeichnung

Textformatierungstags

HTML bietet mehrere Textformatierungstags, mit denen Sie Text nach Bedarf hervorheben, unterstreichen oder durchstreichen können.

Die Tags <strong> und <em> werden verwendet, um Text zu betonen. Das <strong>-Tag rendert Text fett, was auf starke Wichtigkeit hinweist, während das <em>-Tag Text kursiv rendert, was auf Betonung hinweist.

Das <u>-Tag unterstreicht Text, um visuelle Klarheit zu bieten und wichtige Informationen hervorzuheben. Verwenden Sie jedoch Unterstreichungen sparsam, um den Text nicht zu überladen.

Das <s>-Tag streicht Text durch, was auf Löschung oder Irrelevanz hinweist. Es wird häufig verwendet, um zu zeigen, dass bestimmter Text entfernt wurde oder nicht mehr gültig ist.
Beispiel:

Im obigen Beispiel:

• Die <strong>- und <em>-Tags betonen den Text, 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 zeigt damit Löschung oder Irrelevanz an.

Links

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

Das href-Attribut innerhalb des <a>-Tags gibt das Ziel des Links an. Es kann verschiedene Arten von URLs akzeptieren, einschließlich:

• Absolute URLs: Geben die vollständige Adresse der verlinkten Ressource an, einschließlich des Protokolls (z.B. "https://www.example.com");
• Telefon-URLs: Ermöglichen es Benutzern, direkt aus dem Browser heraus Anrufe zu tätigen, wenn sie angeklickt werden. Formatiert als "tel:phone-number". Es ist wichtig, die Landesvorwahl einzuschließen und alle Sonderzeichen oder Leerzeichen aus der Telefonnummer zu entfernen (z.B. "tel:+123456789");
• E-Mail-URLs: Ermöglichen es Benutzern, E-Mails zu verfassen, wenn sie angeklickt werden. 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 verschiedenen Zielen;
• Das href-Attribut gibt verschiedene URLs an, einschließlich absoluter URLs, Telefonnummern und E-Mail-Adressen.

Andere nützliche Attribute

Das <a>-Tag hat mehrere Attribute, die verwendet werden können, um Hyperlink-Eigenschaften anzugeben. Einige häufige Attribute sind:

• 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 heruntergeladen wird, wenn der Benutzer auf den Hyperlink klickt. Dieses Attribut kann einen Wert haben, um den Dateinamen für das Speichern der Ressource anzugeben.

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.

Buttons

Der <button> Tag erstellt klickbare Schaltflächen auf Webseiten. Er ermöglicht es Benutzern, mit der Webseite zu interagieren, indem Aktionen wie das Absenden eines Formulars oder das Ausführen von JavaScript-Code ausgelöst werden. Obwohl wir uns in diesem Kurs nicht auf JavaScript konzentrieren werden, ist es wichtig zu wissen, dass eine solche Möglichkeit besteht.

Arten von Buttons

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

Beispiel:

Im obigen Beispiel:

• Der erste Button ist ein Standard-Button mit einem onclick-Attribut, das beim Klicken einen Alarm auslöst;
• Der zweite Button ist ein Submit-Button, der die Formulardaten an den Server sendet;
• Der dritte Button ist ein Reset-Button, der die Formularfelder auf ihre Standardwerte zurücksetzt.

Video-Tutorial