Themen

Projekte

Links

Software

Themen

Erste Schritte mit CSS

Theoretische Informatik

Seriöses HTML

Vorwort: Webstandards

In den letzten Jahren haben Webstandards immer mehr an Bedeutung gewonnen. Dahinter verbergen sich bestimmte Regeln nach denen sich korrekte (wohlgeformte) Webseiten erstellen lassen. Das es solche Regeln gibt, ist unter anderem deswegen wichtig, damit verschiedene Browser Webseiten auch gleich (einheitlich) darstellen können. In der Vergangenheit musste wegen des Fehlens solcher Standards oft mehrere Versionen einer Webseite für verschiedene Browser entwickelt werden. Seit Ende der Neunziger Jahre haben sich feste Standards etabliert und werden durch das W3C ständig weiterentwickelt.

Web Standards Project

HTML 4.01 "Transitional"

Es ist für alle Beteiligten das Beste, wenn wir dem Browser von Anfang an sagen, welche HTML-Variante wir bei der Erstellung benutzt haben. Wenn wir dies tun, weiß der Browser genau, wie er mit der Seite umgehen soll, und die Seite wird genau so dargestellt, wie wir es erwarten.

Dazu müssen wir lediglich eine Zeile an den Anfang unserer HTML-Dateien setzen. So sieht die Zeile aus:

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

Bitte aus dieser Textdatei kopieren!

Man nennt diese Zeile eine Dokumenttyp-Definition (Document Type Definition), weil sie dem Browser den Dokumenttyp angibt. Bei der Dokumenttyp-Definition handelt es sich nicht um ein HTML-Dokument. Die einzelnen Bestandteile der Dokumenttyp-Definition haben folgende Bedeutung:

<!DOCTYPE ... >	sagt dem Browser, dass nun eine Dokumenttyp-Definitionn anfängt
HTML	das bedeutet, dass <html> das Wurzelelement des Dokuments ist
PUBLIC	wir verwenden die öffentliche Version des HTML 4.01 Standards
"-//W3C//DTD HTML 4.01 Transitional//EN"	dieser Teil gibt den offiziellen Bezeichner für den Standard den wir verwenden
"http://www.w3.org/TR/html4/loose.dtd"	hier wird auf die Datei verwiesen, die diesen bestimmten Standard defniert

Dokumenttyp-Definitionen braucht man nicht auswendig zu lernen!

Probelauf mit DOCTYPE

Wir wollen die DOCTYPE-Anweisung zunächst mal unserer KopfüBar-Seite hinzufügen:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>KopfüBar</title>
  </head>
  <body>
    <h1>Willkommen in der neuen und verbesserten KopfüBar</h1>
    <img src="bilder/getraenke.gif">
    <p>
      Kommen Sie einfach mal vorbei. Bei uns finden Sie jeden Abend erfrischende
      <a href="getraenke/elixir.html">Elixire</a>, 
      Unterhaltung, und vielleicht interessiert Sie auch die eine oder andere Runde
      <em>Dance, Dance, Revolution</em>. Wireless-Zugang ist jederzeit verfügbar,
      aber BSIEWSM (Bringen Sie Ihren eigenen Webserver mit).
    </p>
    <h2>Wegweiser</h2>
    <p>
      Sie finden uns unmittelbar im Zentrum der Altstadt von Webville.
      Falls Sie Probleme haben uns zu finden, werfen
      Sie einen Blick auf unsere
      <a href="info/wegbeschreibung.html">Wegbeschreibung</a>.
      Kommen Sie mal vorbei!
    </p>
  </body>
</html>

bar.html

So weit so gut, aber woher weiß man nun, dass eine Seite dem angegebenen Standard entspricht?

W3C-Validator

Das Überprüfen einer Seite auf Standard-Konfirmität nennt man validieren. Auf den Webseiten des W3C findet sich dazu ein Validierungsdienst (W3C-Validator). Der W3C-Validator bietet 3 Möglichkeiten an, HTML-Quelltext zu übermitteln:

Die Seite steht schon online, dann reicht es die URL der Seite anzugeben (Validate by URL).
Man lädt die HTML-Datei per Forumlar hoch (Validate by File Upload).
Man kopiert einfach den Quelltext der HTML-Datei in ein Formularfeld (Validate by Direct Input).

Der W3C-Validator liefert für die KopfüBar-Seite folgendes Ergebnis.

Offensichtlich gibt es tatsächlich ein Problem mit unserer Seite in Bezug auf die zu verwendende Zeichencodierung.

Die Zeichencodierung teilt dem Browser mit, welche Zeichen in der Seite verwendet werden. So können Seiten beispielsweise mit der Codierung für deutsche, englische, chinesische, arabische und eine Vielzahl anderer Zeichen geschrieben werden. Der Browser erkennt den zu verwendenden Zeichensatz nicht selbst! In diesem Fall geht er einfach von der Zeichencodierung "utf-8" aus. Die Zeichen in der Datei sind aber anders codiert, so dass die deutschen Sonderzeichen für ungültig gehalten werden. Also müssen wir den zu verwendenden Zeichensatz explizit angeben und das geht mit Hilfe einer weiteren Zeile Code und dem meta-Element.

Für Deutsch oder andere westeuropäische Sprachen muss folgendes <meta>-Tag eingefügt werden:

Die Zeile kommt als erstes Element in das <head>-Element einer Seite. Schauen wir und das <meta>-Tag etwas genauer an:

meta	bedeutet, dass wir dem Browser etwas ÜBER die Seite sagen
http-equiv="Content-Type"	wir sagen etwas über den Inhaltstyp unserer Seite
content=	im content-Attribut geben wir Informationen zum Inhaltstyp an
"text/html; charset=ISO-8859-1"	und das ist der neue Teil, der dem Browser mitteilt, dass wir die Zeichenkodierung ISO-8859-1 verwenden

Okay, fügen wir die Zeile unserem KopfüBar-Dokument hinzu und schauen, was der Validator sagt:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>KopfüBar</title>
  </head>
  <body>
    <h1>Willkommen in der neuen und verbesserten KopfüBar</h1>
    <img src="bilder/getraenke.gif">
    <p>
      Kommen Sie einfach mal vorbei. Bei uns finden Sie jeden Abend erfrischende
      <a href="getraenke/elixir.html">Elixire</a>, 
      Unterhaltung, und vielleicht interessiert Sie auch die eine oder andere Runde
      <em>Dance, Dance, Revolution</em>. Wireless-Zugang ist jederzeit verfügbar,
      aber BSIEWSM (Bringen Sie Ihren eigenen Webserver mit).
    </p>
    <h2>Wegweiser</h2>
    <p>
      Sie finden uns unmittelbar im Zentrum der Altstadt von Webville.
      Falls Sie Probleme haben uns zu finden, werfen
      Sie einen Blick auf unsere
      <a href="info/wegbeschreibung.html">Wegbeschreibung</a>.
      Kommen Sie mal vorbei!
    </p>
  </body>
</html>

bar.html

Und hier das Validator-Ergebnis.

Eine Kleinigkeit hat der Validator noch auszusetzen. Er vermisst das alt-Attribut beim <img>-Tag. In HTML 4.01 müssen wir zu jedem <img>-Element ein alt-Attribut defnieren. Mit Hilfe dieses Attributs stellen wir eine kurze Bildbeschriftung zur Verfügung, die zum Beispiel an Stelle des Bildes angezeigt wird, wenn dieses nicht geladen werden kann.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>KopfüBar</title>
  </head>
  <body>
    <h1>Willkommen in der neuen und verbesserten KopfüBar</h1>
    <img src="bilder/getraenke.gif" alt="Getränke">
    <p>
      Kommen Sie einfach mal vorbei. Bei uns finden Sie jeden Abend erfrischende
      <a href="getraenke/elixir.html">Elixire</a>, 
      Unterhaltung, und vielleicht interessiert Sie auch die eine oder andere Runde
      <em>Dance, Dance, Revolution</em>. Wireless-Zugang ist jederzeit verfügbar,
      aber BSIEWSM (Bringen Sie Ihren eigenen Webserver mit).
    </p>
    <h2>Wegweiser</h2>
    <p>
      Sie finden uns unmittelbar im Zentrum der Altstadt von Webville.
      Falls Sie Probleme haben uns zu finden, werfen
      Sie einen Blick auf unsere
      <a href="info/wegbeschreibung.html">Wegbeschreibung</a>.
      Kommen Sie mal vorbei!
    </p>
  </body>
</html>

bar.html

Und hier das End-Ergebnis.

HTML 4.01 "Strict"

Es gibt zwei DOCTYPEs, einen für diejenigen, die gerade zu HTML 4.01 wechseln, und einen strikteren DOCTYPE für die, die bereits mit dem Standard vertraut sind. Um von HTML 4.01 "Transitional" auf "Strict" zu wechseln, müssen wir den DOCTYPE "Strict" wählen. Von diesem Moment an geht der Validierer (und der Browser) davon aus, dass wir uns an die strengen Regeln halten, nach denen einiges an altem HTML nicht mehr zulässig ist. Der neue DOCTYPE sieht so aus:

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

Bitte aus dieser Textdatei kopieren!

Tauschen wir im obigen Beispiel die "Transitional"-DOCTYPE-Definition gegen die "Strict"-DOCTYPE-Definition bekommen wir folgende Fehlermeldung.

In der STRICT-Variante von HTML 4.01 gelten offenbar strengere Verschachtelungsregeln. Inline-Elemente, wie zum Beispiel Bilder, müssen innerhalb von Block-Elementen stehen. Verpacken wir das Bild also einfach ein ein <p>-Element.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>KopfüBar</title>
  </head>
  <body>
    <h1>Willkommen in der neuen und verbesserten KopfüBar</h1>
    <p>
      <img src="bilder/getraenke.gif" alt="Getränke">
    </p>
    <p>
      Kommen Sie einfach mal vorbei. Bei uns finden Sie jeden Abend erfrischende
      <a href="getraenke/elixir.html">Elixire</a>, 
      Unterhaltung, und vielleicht interessiert Sie auch die eine oder andere Runde
      <em>Dance, Dance, Revolution</em>. Wireless-Zugang ist jederzeit verfügbar,
      aber BSIEWSM (Bringen Sie Ihren eigenen Webserver mit).
    </p>
    <h2>Wegweiser</h2>
    <p>
      Sie finden uns unmittelbar im Zentrum der Altstadt von Webville.
      Falls Sie Probleme haben uns zu finden, werfen
      Sie einen Blick auf unsere
      <a href="info/wegbeschreibung.html">Wegbeschreibung</a>.
      Kommen Sie mal vorbei!
    </p>
  </body>
</html>

bar.html

Und hier das End-Ergebnis.

Einige Regeln für HTML 4.01 Strict

Jede Seite beginnt mit einer DOCTYPE-Angabe gefolgt von einem <html>-Element. Das <html>-Element muss immer das Wurzelelment einer Webseite sein. Das bedeutet alle anderen HTML-Elemente müssen in das <html>-Element verschachtelt werden.
Immer <head> und <body> verwenden! Nur das <head>- und das <body>-Element dürfen direkt im <html>-Element stehen. Jedes andere Element muss entweder im <head>-Element oder aber im <body>-Element stehen.
Zu einem <head>-Element gehört immer ein <title>-Element. Die Elemente <title>, <meta> und <style> dürfen nur im <head>-Element stehen.
Direkt im <body>-Element dürfen nur Block-Elemente stehen. Sämtliche Inline-Elemente sowie Text müssen in ein Block-Element eingeschlossen werden.
Das einzige, was in ein Inline-Element geschrieben werden darf, sind weitere Inline-Elemente, keine Block-Elemente.
In ein <p>-Element gehören keine weiteren Block-Elemente. Absätze sind für Text und Inline-Elemente.
Listenelemente gehören in Listen. Nur das <li>-Element ist innerhalb von <ul> und <ol> zulässig.
In einem <blockquote>-Element muss mindestens ein Block-Element stehen. Also Text und Inline-Elemente in ein Block-Element verpacken und dieses Block-Element dann in das <blockquote>-Element setzen.

» drucken: pdf | html