032.1 Lektion 1

Zertifikat:

Web Development Essentials

Version:

1.0

Thema:

032 HTML-Dokument-Markup

Lernziel:

032.1 Aufbau eines HTML-Dokuments

Lektion:

1 von 1

Einführung

HTML (HyperText Markup Language) ist eine Auszeichnungssprache, die Webbrowsern mitteilt, wie Webseiten zu strukturieren und anzuzeigen sind. Die aktuelle Version ist 5.0 aus dem Jahr 2012. Die HTML-Syntax wird vom World Wide Web Consortium (W3C) definiert.

HTML ist Grundwissen in der Webentwicklung, da es die Struktur und einen großen Teil des Aussehens einer Website bestimmt. Für eine professionelle Beschäftigung mit Webentwicklung ist HTML definitiv ein guter Ausgangspunkt.

Aufbau eines HTML-Dokuments

Eine einfache HTML-Seite hat die folgende Struktur:

<!DOCTYPE html>
<html>
  <head>
    <title>My HTML Page</title>
    <!-- This is the Document Header -->
  </head>

  <body>
    <!-- This is the Document Body -->
  </body>
</html>

Schauen wir uns dies im Detail an!

HTML-Tags

HTML verwendet Elemente und Tags zur Beschreibung und Formatierung von Inhalten. Tags bestehen aus spitzen Klammern um einen Tag-Namen, zum Beispiel <title>. Beim Tag-Namen wird nicht zwischen Groß- und Kleinschreibung unterschieden, obwohl das World Wide Web Consortium (W3C) empfiehlt, in den aktuellen Versionen von HTML Kleinbuchstaben zu verwenden. Diese HTML-Tags dienen dem Aufbau von HTML-Elementen. Das Tag <title> ist ein Beispiel für ein öffnendes Tag (opening tag) eines HTML-Elements, das den Titel eines HTML-Dokuments definiert. Ein Element hat jedoch zwei weitere Komponenten. Ein vollständiges <title>-Element sieht wie folgt aus:

<title>My HTML Page</title>

Hier ist My HTML Page der Inhalt oder Content des Elements, während </title> als schließendes (closing) Tag dient, des markiert, dass dieses Element vollständig ist.

Note	Nicht alle HTML-Elemente müssen geschlossen sein; in solchen Fällen spricht man von leeren (empty), selbstschließenden (self-closing) oder void Elementen.

Hier sind die anderen HTML-Elemente aus dem vorherigen Beispiel:

<html>: Schließt das gesamte HTML-Dokument ein. Es enthält alle Tags, aus denen die Seite besteht. Es zeigt auch an, dass der Inhalt dieser Datei in HTML geschrieben ist. Das entsprechende schließende Tag ist </html>.
<head>: Ein Container für alle Meta-Informationen über die Seite. Das entsprechende schließende Tag dieses Elements ist </head>.
<body>: Ein Container für den Seiteninhalt und seine strukturelle Darstellung. Das entsprechende schließende Tag ist </body>.

Die Tags <html>, <head>, <body> und <title> sind sogenannte Skelett-Tags, die die Grundstruktur eines HTML-Dokuments bilden. Sie teilen dem Webbrowser insbesondere mit, dass er eine HTML-Seite liest.

Note	Das einzige dieser HTML-Elemente, das für die Validierung eines HTML-Dokuments erforderlich ist, ist das Tag `<title>`.

Jede HTML-Seite ist also ein wohlstrukturiertes Dokument, das man auch als Baum mit dem Element <html> als Wurzel des Dokuments darstellen kann — die Elemente <head> und <body> sind demnach die ersten Äste. Das Beispiel zeigt, dass man Elemente verschachteln kann: Das Element <title> ist etwa in das Element <head> eingebettet, das wiederum im Element <html> liegt.

Um sicherzustellen, dass HTML-Code lesbar und wartbar ist, sollten Sie alle HTML-Elemente richtig und in der richtigen Reihenfolge schließen. Webbrowser können Ihre Website zwar möglicherweise immer noch wie erwartet darstellen, aber die falsche Verschachtelung von Elementen und deren Tags ist eine häufige Ursache für Fehler.

Eine besondere Erwähnung verdient schließlich die Doctype-Deklaration ganz oben in der Struktur des Beispieldokuments. <!DOCTYPE> ist kein HTML-Tag, sondern eine Anweisung für den Webbrowser, die die im Dokument verwendete HTML-Version angibt. In der zuvor gezeigten grundlegenden HTML-Dokumentstruktur steht <!DOCTYPE html> — damit ist angezeigt, dass dieses Dokument HTML5 nutzt.

HTML-Kommentare

Bei der Erstellung einer HTML-Seite ist es gute Praxis, Kommentare in den Code einzufügen, um die Lesbarkeit zu verbessern und den Zweck größerer Codeblöcke zu beschreiben. Ein Kommentar steht zwischen den Tags :

<!-- This is a comment. -->

<!--
    This is a
    multiline
    comment.
-->

Das Beispiel zeigt, dass HTML-Kommentare in einer einzigen Zeile stehen, sich aber auch über mehrere Zeilen erstrecken können. In jedem Fall hat dies zur Folge, dass der Text zwischen  vom Webbrowser ignoriert und daher in der HTML-Seite nicht angezeigt wird. Daraus folgt, dass die im vorangegangenen Abschnitt gezeigte HTML-Basisseite keinen Text anzeigt, da die Zeilen  und  nur zwei Kommentare sind.

Warning

Kommentare können nicht verschachtelt werden.

HTML-Attribute

HTML-Tags können ein oder mehrere Attribute enthalten, um Einzelheiten des HTML-Elements anzugeben. Ein einfaches Tag mit zwei Attributen hat die folgende Form:

<tag attribute-a="value-a" attribute-b="value-b">

Die Attribute müssen immer im öffnenden Tag stehen.

Ein Attribut besteht aus einem Namen, der die zu setzende Eigenschaft angibt, einem Gleichheitszeichen und dem gewünschten Wert in Anführungszeichen. Sowohl einfache als auch doppelte Anführungszeichen sind zulässig, es wird jedoch empfohlen, im gesamten Projekt durchgängig einfache oder doppelte Anführungszeichen zu verwenden. Es ist wichtig, einfache und doppelte Anführungszeichen bei einem einzelnen Attributwert nicht zu mischen, da der Webbrowser diesen sonst nicht als Einheit erkennt.

Note

Sie können eine Art von Anführungszeichen ohne Probleme in die andere Art einschließen. Wenn Sie zum Beispiel ' in einem Attributwert verwenden müssen, können Sie diesen Wert in " einschließen. Um jedoch dieselbe Art von Anführungszeichen innerhalb des Wertes zu verwenden, die Sie auch für die Umschließung des Wertes nutzen, setzen Sie " für " und ' für '.

Bei Attributen unterscheidet man Kernattribute und spezifische Attribute, die wir uns im Folgenden ansehen.

Kernattribute

Kernattribute sind solche, die in jedem HTML-Element zur Verfügung stehen. Das sind:

title: Beschreibt den Inhalt des Elements. Sein Wert wird oft als Tooltip angezeigt, der erscheint, wenn der Benutzer den Mauszeiger über das Element bewegt.
id: Verknüpft einen eindeutigen Bezeichner mit einem Element. Dieser Bezeichner muss innerhalb des Dokuments eindeutig sein. Das Dokument ist nicht valide, wenn mehrere Elemente dieselbe id haben.
style: Weist dem Element grafische Eigenschaften (CSS-Stile) zu.
class: Gibt eine oder mehrere Klassen für das Element in einer durch Leerzeichen getrennten Liste von Klassennamen an. Diese Klassen können in CSS-Stylesheets referenziert werden.
lang: Gibt die Sprache des Elementinhalts unter Verwendung der zweistelligen ISO-639-Standard-Sprachcodes an.

Note	Als Entwickler können Sie Informationen über ein Element in einem data-Attribut ablegen, das durch Voranstellen des Präfixes `data-` vor dem Attributnamen definiert ist, z.B. `data-additionalinfo`. Sie weisen diesem Attribut einen Wert zu, wie jedem anderen Attribut auch.

Spezifische Attribute

Andere Attribute sind spezifisch für jedes HTML-Element. Das Attribut src eines HTML-Elements <img> gibt beispielsweise die URL eines Bildes an. Es gibt noch viele weitere spezifische Attribute, die in den folgenden Lektionen behandelt werden.

Dokumentkopf

Der Dokumentkopf oder Head definiert Metainformationen über die Seite und wird durch das Element <head> definiert. Standardmäßig zeigt der Webbrowser die Informationen im Head nicht an. Es ist zwar möglich, das <head>-Element auch für auf der Seite sichtbare Elemente zu nutzen, aber das ist keine gute Praxis.

Titel

Den Titel des Dokuments geben Sie mit dem Element <title> an. Der zwischen den Tags definierte Titel erscheint in der Titelleiste des Webbrowsers und ist der vorgeschlagene Name für das Lesezeichen, wenn Sie ein Lesezeichen für die Seite setzen. Er erscheint auch in den Suchergebnissen der Suchmaschinen als Titel der Seite.

Hier ein Beispiel für dieses Element:

<title>My test page</title>

Das <title>-Tag ist in allen HTML-Dokumenten obligatorisch und sollte in jedem Dokument nur einmal vorkommen.

Note	Verwechseln Sie den Titel des Dokuments nicht mit der Überschrift der Seite, die im Hauptteil steht.

Metadaten

Das <meta>-Element dient der Angabe von Metainformationen, die den Inhalt eines HTML-Dokuments näher beschreiben. Es ist ein selbstschließendes Element ohne schließendes Tag. Neben den Kernattributen, die für jedes HTML-Element gültig sind, erlaubt das Element <meta> auch die folgenden Attribute:

name: Bestimmt, welche Metadaten in diesem Element beschrieben werden. Beliebige benutzerdefinierte Werte sind möglich, aber häufig verwendete Werte sind author, description und keywords.
http-equiv: Liefert einen HTTP-Header für den Wert des Attributs content. Ein üblicher Wert ist refresh, den wir später erläutern. Ist dieses Attribut gesetzt, sollte das Attribut name nicht gesetzt werden.
content: Setzt den mit dem Attribut name oder http-equiv verbundenen Wert.
charset: Gibt die Zeichenkodierung für das HTML-Dokument an, z.B. utf-8, um es auf Unicode Transformation Format — 8 Bits zu setzen.

Autor, Beschreibung und Schlüsselwörter hinzufügen

Mit dem <meta>-Tag geben Sie zusätzliche Informationen über den Autor der HTML-Seite an und beschreiben den Inhalt der Seite wie folgt:

<meta name="author" content="Name Surname">
<meta name="description" content="A short summary of the page content.">

Versuchen Sie, eine Reihe von Schlüsselwörtern, die sich auf den Inhalt der Seite beziehen, in die Beschreibung aufzunehmen. Diese Beschreibung ist oft das erste, was ein Nutzer sieht, wenn er mit einer Suchmaschine navigiert.

Um den Suchmaschinen weitere Schlüsselwörter zur Verfügung zu stellen, fügen Sie das folgende Element hinzu:

<meta name="keywords" content="keyword1, keyword2, keyword3, keyword4, keyword5">

Note

In der Vergangenheit gaben Spammer Hunderte von Schlüsselwörtern und Beschreibungen ein, die nichts mit dem eigentlichen Inhalt der Seite zu tun hatten, so dass diese auch bei Suchanfragen erschien, die nichts mit den gesuchten Begriffen zu tun hatten. Heutzutage sind die <meta>-Tags von untergeordneter Bedeutung und werden nur noch zur Konsolidierung der auf der Webseite behandelten Themen verwendet, so dass es nicht mehr möglich ist, die neuen und ausgefeilteren Algorithmen der Suchmaschinen in die Irre zu führen.

Eine HTML-Seite umleiten und ein Zeitintervall zur Aktualisierung festlegen

Mit dem <meta>-Tag sorgen Sie auch dafür, dass eine HTML-Seite nach einer bestimmten Zeit (hier nach 30 Sekunden) automatisch neu lädt:

<meta http-equiv="refresh" content="30">

Oder Sie leiten die Webseite nach einer angegebenen Zeitspanne mit folgendem Code auf eine andere Webseite um:

<meta http-equiv="refresh" content="30; url=http://www.lpi.org">

In diesem Beispiel erfolgt die Umleitung nach 30 Sekunden von der aktuellen Seite zu http://www.lpi.org. Die Werte sind beliebig. Wenn Sie zum Beispiel content="0; url=http://www.lpi.org" angeben, erfolgt die Weiterleitung sofort.

Zeichenkodierung festlegen

Das Attribut charset gibt die Zeichenkodierung für das HTML-Dokument an. Ein gängiges Beispiel ist:

<meta charset="utf-8">

Dieses Element gibt an, dass die Zeichenkodierung des Dokuments utf-8 ist, ein universeller Zeichensatz, der praktisch alle Zeichen aller Alphabete enthält. Mit diesem Element vermeiden Sie Probleme bei der Darstellung einiger Zeichen, die bei der Verwendung anderer Zeichensätze wie ISO-8859-1 (das lateinische Alphabet) auftreten können.

Weitere nützliche Beispiele

Zwei weitere nützliche Anwendungen des <meta>-Tags sind:

Cookies setzen, um einen Website-Besucher zu verfolgen.
Kontrolle über den Viewport (den sichtbaren Bereich einer Webseite innerhalb eines Webbrowser-Fensters), der von der Bildschirmgröße des Benutzergeräts (z.B. eines Mobiltelefons oder eines Computers) abhängt.

Diese beiden Beispiele gehen jedoch über den Rahmen dieser Prüfung hinaus und seien daher Ihrer Neugier überlassen.

Geführte Übungen

Geben Sie für jedes der folgenden Tags das entsprechende schließende Tag an:

<body>

<head>

<html>

<meta>

<title>
Was ist der Unterschied zwischen einem Tag und einem Element? Verwenden Sie diesen Eintrag als Referenz:

<title>HTML Page Title</title>
Zwischen welchen Tags sollten Sie einen Kommentar platzieren?
Was ist ein Attribut? Geben Sie einige Beispiele für das <meta>-Tag.

Offene Übungen

Erstellen Sie ein einfaches HTML Version 5 Dokument mit dem Titel “My first HTML document” und nur einem Absatz im Body, der den Text “Hello World” enthält. Verwenden Sie das Absatz-Tag <p> im Textkörper.
Fügen Sie den Autor (“Kevin Author”) und die Beschreibung (“This is my first HTML page.”) des HTML-Dokuments hinzu.
Fügen Sie die folgenden Schlüsselwörter für das HTML-Dokument hinzu: “HTML”, “Example”, “Test” und “Metadata”.
Fügen Sie das Element <meta charset="ISO-8859-1"> in die Kopfzeile des Dokuments ein und ändern Sie den Text “Hello World” in Japanisch (“こんにちは世界”). Was geschieht? Wie lösen Sie das Problem?
Nachdem Sie den Text des Absatzes wieder in “Hello World” geändert haben, leiten Sie die HTML-Seite nach 30 Sekunden nach https://www.google.com um und fügen einen Kommentar in die Kopfzeile des Dokuments ein, der darauf hinweist.

Zusammenfassung

In dieser Lektion haben Sie gelernt:

Rolle von HTML
HTML-Skelett
HTML-Syntax (Tags, Attribute, Kommentare)
HTML-Head
Meta-Tags
Wie man ein einfaches HTML-Dokument erstellt

Die folgenden Begriffe wurden in dieser Lektion behandelt:

<!DOCTYPE html>: Das Deklarations-Tag.
<html>: Der Container für alle Tags, aus denen die HTML-Seite besteht.
<head>: Der Container für alle Head-Elemente.
<body>: Der Container für alle Body-Elemente.
<meta>: Das Tag für Metadaten, mit dem Sie zusätzliche Informationen für die HTML-Seite angeben (z.B. Autor, Beschreibung und Zeichenkodierung).

Lösungen zu den geführten Übungen

Geben Sie für jedes der folgenden Tags das entsprechende schließende Tag an:

<body>

</body>

<head>

</head>

<html>

</html>

<meta>

Keins

<title>

</title>
Was ist der Unterschied zwischen einem Tag und einem Element? Verwenden Sie diesen Eintrag als Referenz:

<title>HTML Page Title</title>

Ein HTML-Element besteht aus einem Anfangstag, einem Schlusstag und allem, was dazwischen liegt. Ein HTML-Tag dient dazu, den Anfang oder das Ende eines Elements zu markieren. Daher ist <title>HTML Page Title</title> ein HTML-Element, während <title> und </title> das Start- bzw. End-Tag sind.
Zwischen welchen Tags sollten Sie einen Kommentar platzieren?

Ein Kommentar steht zwischen den Tags  und kann in einer einzigen Zeile stehen oder sich über mehrere Zeilen erstrecken.
Was ist ein Attribut? Geben Sie einige Beispiele für das <meta>-Tag.

Ein Attribut dient dazu, ein HTML-Element genauer zu spezifizieren. Das <meta>-Tag zum Beispiel verwendet das Attributpaar name und content, um den Autor und die Beschreibung einer HTML-Seite hinzuzufügen. Mit dem Attribut charset geben Sie die Zeichenkodierung für das HTML-Dokument an.

Lösungen zu den offenen Übungen

Erstellen Sie ein einfaches HTML Version 5 Dokument mit dem Titel “My first HTML document” und nur einem Absatz im Body, der den Text “Hello World” enthält. Verwenden Sie das Absatz-Tag <p> im Textkörper.
```
<!DOCTYPE html>
<html>
  <head>
    <title>My first HTML document</title>
  </head>

  <body>
    <p>Hello World</p>
  </body>
</html>
```

Fügen Sie den Autor (“Kevin Author”) und die Beschreibung (“This is my first HTML page.”) des HTML-Dokuments hinzu.

<!DOCTYPE html>
<html>
  <head>
    <title>My first HTML document</title>
    <meta name="author" content="Kevin Author">
    <meta name="description" content="This is my first HTML page.">
  </head>

  <body>
    <p>Hello World</p>
  </body>
</html>

Fügen Sie die folgenden Schlüsselwörter für das HTML-Dokument hinzu: “HTML”, “Example”, “Test” und “Metadata”.

<!DOCTYPE html>
<html>
  <head>
    <title>My first HTML document</title>
    <meta name="author" content="Kevin Author">
    <meta name="description" content="This is my first HTML page.">
    <meta name="keywords" content="HTML, Example, Test, Metadata">
  </head>

  <body>
    <p>Hello World</p>
  </body>
</html>

Fügen Sie das Element <meta charset="ISO-8859-1"> in die Kopfzeile des Dokuments ein und ändern Sie den Text “Hello World” in Japanisch (“こんにちは世界”). Was geschieht? Wie lösen Sie das Problem?

Der japanische Text wird nicht korrekt angezeigt, da ISO-8859-1 eine Zeichenkodierung für das lateinische Alphabet definiert. Um den Text anzuzeigen, ändern Sie die Zeichenkodierung zum Beispiel zu UTF-8 (<meta charset="utf-8">).

Nachdem Sie den Text des Absatzes wieder in “Hello World” geändert haben, leiten Sie die HTML-Seite nach 30 Sekunden nach https://www.google.com um und fügen einen Kommentar in die Kopfzeile des Dokuments ein, der darauf hinweist..

<!DOCTYPE html>
<html>
  <head>
    <title>My first HTML document</title>
    <meta name="author" content="Kevin Author">
    <meta name="description" content="This is my first HTML page.">
    <meta name="keywords" content="HTML, Example, Test, Metadata">
    <meta charset="utf-8">
    <!-- The page is redirected to Google after 30 seconds -->
    <meta http-equiv="refresh" content="30; url=https://www.google.com">
  </head>

  <body>
    <p>Hello World</p>
  </body>
</html>