Zum Inhalt

Inhaltsverzeichnis • Teil 1 - Anfänger • Inhalte • Grundgerüst
⇦ Verweise / Layout ⇨
30.07.2014 07:51:01

Grundgerüst

Eine echte WebseiteMeta-TagsEntitiesAndere DoctypesHTML 4 TransitionalHTML 4 FramesetHTML 4 StrictXHTML 1 TransitionalXHTML 1 FramesetHTML 5PraxisZusammenfassung

Eine echte Webseite

Damit ein HTML-Validator unsere Seite als gültig erkennt, müssen wir sie noch mit einem allgemeinen HTML Grundgerüst ausrüsten.

Dieses Grundgerüst sollten sie in eine leere Datei einfügen und diese Datei als Basis für ihre Webseiten verwenden. So sparen sie sich das dauernde Nachschlagen nach der korrekten Syntax des HTML-Grundgerüstes.

Editor - Grundgerüst 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> ««
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Beschreibung der Seite</title>
  </head>

  <body>
    <!-- Hier stehen unsere HTML-Tags -->
  </body>
</html>
<!DOCTYPE ...>
Diese Zeile gibt den Umfang der HTML-Befehle für ein Dokument an. Anhand dieser DTD (document type defintion) kann der Browser oder Validator die Gültigkeit der HTML-Syntax überprüfen. Mehr dazu später.
<html> [s,a,w] … </html>
Dieses Tag umschließt die gesamte HTML-Seite. Nur der <!DOCTYPE> steht außerhalb.
<html xmlns="http://www.w3.org/1999/xhtml">
Wenn sie, wie hier geschehen, xHTML verwenden, müssen sie auch noch einen XML-Namensraum angeben. Dies ist eine Besonderheit von XML auf die ich im Rahmen dieses Buches nicht eingehen will.
<head> [s,a,w] … </head>
Der Kopf der Seite. Hier geben sie allgemeine Definitionen, Verweise und den Titel der Seite an.
<title> [s,a,w] … </title>
Der Titel der Seite. Diesen zeigt der Browser normalerweise oben rechts in der Fensterüberschrift an.
<body> [s,a,w] … </body>
Der Körper der Seite. Hier steht der eigentliche HTML-Text. Also alles was wir bisher ohne Grundgerüst in der Visitenkarte geschrieben haben.

Meta-Tags

In den sogennannten <meta> [s,a,w]-Tags geben sie besonderen Information für den Browser oder automatische Suchroboter an.

<meta name="author" content="Christian Hartnick" />
Kennzeichnet den Autor eines Dokumentes.
<meta name="robots" content="noindex" />
Mit dem Tag verweigern sie Suchrobotern optional das Auswerten dieses Dokuments.
<meta name="keywords" lang="de" content="Suchbegriffe, ..." />
Mit dem Tag können sie diesen Suchbegriffe vorgeben.
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
Legt den Typ und die Zeichenkodierung des Dokuments für HTML fest. Damit erscheinen jetzt auch Umlaute korrekt. Allerdings müssen sie darauf achten, dass ihr Editor auf „UTF-8“ eingestellt ist oder dies beim Speichern abfragt!

Referenz: Kopfdaten in Selfhtml

Entities

In alten HTML-Browsern und Versionen waren das "ß" - wie auch die Umlaute - nicht erlaubt. Sie mußten als sogenannte Entities kodiert werden. Mit der Zeichensatzkodierung UTF-8 hat sich das geändert.

Allerdings müssen sie die Sonderzeichen  < ,  >  und  &  nach wie vor als Entität schreiben, da diese ja innerhalb des HTML-Quelltextes eine besondere Bedeutung haben. Eine Liste aller Entities finden sie im Anhang: HTML-Entities.

Tabelle: Wichtige Entitäten
ZeichenEntität
<&lt;
>&gt;
&&amp;

Andere Doctypes

Im folgenden finden sie weitere Doctypes, die sie kennen sollten, aber in diesem Buch nicht verwendet werden:

HTML 4 Transitional

(Übergangsversion zur Kompatibilität)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Die Transitional-Variante enthält noch ältere Elemente wie <font>, <center> und <u> sowie Attribute wie bgcolor="", align="" und target="". Mit dieser DTD können auch Webautoren, die nicht Layout und Inhalt voneinander trennen, standardkonformes HTML schreiben.

Außerdem soll er sicherstellen, dass bestehende Webseiten weiterhin durch aktuelle Webbrowser angezeigt werden können.

HTML 4 Frameset

(Übergangsversion zur Kompatibilität)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

DTD für Framesets. Also für in mehrere Bereiche geteilte Webseiten. Diese Buch geht nicht näher auf Framsets ein, da sie einige grundsätzliche Nachteile haben. Siehe dazu: frameset und frames in selfhtml

HTML 4 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Diese DTD umfasst Elemente und Attribute, die zusammen mit Stylesheets Layout und Inhalt trennen. Text und Inline-Elemente müssen sich grundsätzlich innerhalb eines Block-Elements befinden, zum Beispiel in einem <p>-Element.

XHTML 1 Transitional

(Übergangsversion zur Kompatibilität)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

s. HTML Transitional - allerdings in xhtml-Syntax.

XHTML 1 Frameset

(Übergangsversion zur Kompatibilität)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Frameset DTD für XHTML 1.

HTML 5

<!doctype html>

Erfrischend einfach :-)

Praxis

Übung:

Speichern sie ihre Visitenkarte unter neuem Namen (Ab sofort solllten sie selbst daran denken). Fügen sie die bisherige Visitenkarte in den HTML-Rahmen ein und speichern sie sie.

Beachten Sie, dass jetzt auch die Sonderzeichen korrekt dargestellt werden!

(Beispiel 06_visitenkarte.html)

Anhang: Tastaturkommandos

Nach dem Einfügen des Grundgerüstes sieht die Seite wie im Beispiel 6 aus. Bis auf den Seitentitel oben links sollte sich an der Darstellung nichts getan haben. Jetzt können sie aber einen HTML-Validator über die Seite laufen lassen.

(Der allerdings für unser Beispiel noch einen Fehler ausgibt, da die horizontale Linie im Beispiel noch nicht HTML-konform ist.)

Sollten sie Fragen zum Grundgerüst haben, schauen sie sich erst einmal den Quellcode des Beispiels 6 an.

Zusammenfassung

⇦ Verweise / Layout ⇨
Nach oben