Kursinhalt
Html-Grundlagen
Html-Grundlagen
HTML-Dokumentenstruktur
Zunächst erkunden wir die Struktur eines HTML-Dokuments.
HTML-Dokumentstruktur
Jedes HTML-Dokument muss einer konsistenten Struktur folgen. Die hier aufgeführten Elemente bilden die Grundlage für die Organisation von Inhalten, die Definition der Seitenstruktur und die Verbesserung der Benutzererfahrung im Web.
html-Tag
Der <html>-Tag ist das Wurzelelement eines HTML-Dokuments. Alle anderen Elemente werden innerhalb davon geschrieben. Der öffnende <html>-Tag markiert den Beginn des HTML-Dokuments, während der schließende </html>-Tag das Ende markiert.
Beispiel:
head-Tag
Der <head>-Tag enthält Metainformationen über das HTML-Dokument, wie Titel, Zeichencodierung und externe Ressourcen wie Stylesheets und Skripte. Er enthält keine Inhalte, die direkt für den Benutzer auf der Webseite sichtbar sind.
Beispiel:
Erklärung:
- Der
<title>-Tag definiert den Titel einer Webseite. Er wird in der Titelleiste des Webbrowsers oder im Browser-Tab angezeigt. Der Titel einer Seite gibt einen kurzen Überblick über deren Inhalt, was es den Benutzern erleichtert, den Zweck der Seite zu verstehen und effizienter durch mehrere Tabs zu navigieren; <meta charset="UTF-8">ist verantwortlich für die Angabe der Zeichencodierung, die in einem HTML-Dokument verwendet wird. Diese Zeichencodierung bestimmt, wie Webbrowser Text interpretieren und anzeigen;- Einige gängige Meta-Tags sind:
<meta name="description" content="Kurze Beschreibung der Seite">: Bietet eine prägnante Beschreibung des Seiteninhalts, die in den Suchmaschinenergebnissen erscheinen kann;<meta name="keywords" content="Schlüsselwort1, Schlüsselwort2, ...">: Gibt Schlüsselwörter an, die für den Seiteninhalt relevant sind, um die Suchmaschinenoptimierung (SEO) zu verbessern;<meta name="viewport" content="width=device-width, initial-scale=1.0">: Definiert die Viewport-Einstellungen für responsives Design, um eine ordnungsgemäße Skalierung auf verschiedenen Geräten sicherzustellen.
body-Tag
Der <body>-Tag enthält den Hauptinhalt, der für Benutzer auf einer Webseite sichtbar ist. Dieser Inhalt umfasst Text, Bilder, Links, Formulare und andere Elemente, mit denen Benutzer interagieren können, während sie die Website besuchen. Im Wesentlichen enthält der <body>-Tag das, was Benutzer sehen und mit dem sie interagieren, wenn sie eine Website durchsuchen.
Beispiel:
Dokumenttyp-Deklaration
Die Dokumenttyp-Deklaration informiert den Webbrowser über die in dem Dokument verwendete HTML-Version. Diese Deklaration stellt sicher, dass der Webbrowser das Dokument korrekt rendert, indem er dem angegebenen HTML-Standard folgt. Für HTML5-Dokumente lautet die Doctype-Deklaration <!DOCTYPE html>.
Beispiel:
Ergebnisstruktur
Um alles zusammenzufassen, lassen Sie uns alle Elemente, die wir betrachtet haben, sammeln und in ein einzelnes HTML-Dokument kombinieren.
Unten sehen Sie, wie das HTML-Dokument im Webbrowser erscheint.
Video-Tutorial
1. Welches Tag ist das Wurzelelement eines HTML-Dokuments?
2. Was enthält das <head>-Tag?
3. Was definiert das <title>-Tag?
4. Was ist der Zweck des <body>-Tags?
Danke für Ihr Feedback!
