Homepapa-Logo Home Einleitung Grundlagen Elemente und Attribute HTML-Dokumente strukturelles Markup Site Management Hyperlinks Bilder und Grafiken ohne Fehl und Tadel Beispiel mit Fehlern die Regeln DOCTYPE strict transitional frameset HTML 5 sauberes HTML W3C validiert Spezialfälle Tabellen Formulare Schlussbemerkungen
Schlagwortregister
Übungs-Übersicht
Übungs-Dateien

HTML und XHTML

ohne Fehl und Tadel

Saubermann

sauberes HTML

Wie gehen wir nun vor, um ein sauberes, gültiges HTML-Dokument zu erstellen?

Hier empfehle ich aus pragmatischen Gründen, von der einfacheren Schreibweise für HTML5 zu profitieren. Wir werden also zwar mit XHTML arbeiten, aber uns das Leben etwas einfacher machen.

  1. Als erstes erstellen wir unsere Seiten also nach den Regeln von XHTML strict. Die Übungsdokumente dieses Kurses jedenfalls sind allesamt XHTML strict.
  2. Nun stellst du die Dokumenttype-Definition an den Anfang deines HTML-Textes, noch vor das einleitende <html>-Tag. Damit weiss jeder Browser, der diese Seite anzeigen muss, an welche Regeln er sich zu halten hat.
    Hier greifen wir also auf HTML5 zurück und verwenden die einfach <!DOCTYPE>-Anweisung, die HTML5 bedeutet.

    Übung 30

    Mach das gleich mal für unsere Einstiegsseite index.html.

    Die DOCTYPE-Angabe für HTML 5 hast du ja soeben angetroffen. Stell sie einfach an den Anfang des Dokumentes.

    Wir werden das dann brauchen können, wenn wir diese Seite validieren lassen.

  3. Wenn dein Browser diese Seite anfordert, dann kriegt er einen langen Strom von Bits, die er als Zeichen zu interpretieren versucht. Das geht ziemlich lange gut, aber es gibt einzelne Bit-Kombinationen, die je nach Sprache ein anderes Zeichen bedeuten, also mehrdeutig sind. Dazu gehören Umlaute, aber auch einige Sonderzeichen wie z.B. das Ausrufezeichen. Damit der Browser weiss, welche Bedeutung gewünscht ist, sollte man ihm das Character Encoding nennen, sonst besteht die Gefahr, dass Umlaute, Akzente und einzelne Sonderzeichen nicht so erscheinen, wie man es sich wünscht. Die entsprechende Angabe macht man, indem man im <head>-Bereich eine <meta>-Anweisung einfügt. in unserem Fall enpfiehlt sich

    <meta charset="utf-8" />

    (Übrigens hätte sowas under einem der komplizierteren Doctypes etwa so ausgesehen:

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    Da haben wir's unter HTML5 schon wieder etwas einfacher)

    Wichtig ist, dass du für deine Seiten tatsächlich den UTF-8-Zeichensatz verwendest — das kannst du normalerweise in deinem Editor (z.B. Notepad++) einstellen.

    Übung 31

    Mach das nun und kopiere die oben gezeigte <meta>-Anweisung in den <head>-Bereich der Seite index.html, am besten gleich hinter (aber nicht in!) das <title>-Element.

    Nun müsste der Anfang deines Dokumentes etwa so aussehen:

    <!DOCTYPE html>
    <html>
    <head>
    <title>die Pfefferschote</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="style_sheets/stylesheet.css">
    </head>
    

Damit haben wir alle Vorkehrungen für sauberes HTML getroffen.

Übung 32

Mach das nun für all unsere Übungsdokumente. Da beide Angaben, der Doctype und das Character Encoding, nicht vom Speicherort der Seite abhängen, kannst du sie einfach kopieren.

Homepapa
März 2004
Vorheriger Abschnitt:
HTML 5
Nächster Abschnitt:
W3C validiert