http://jendryschik.de

UX, Usability und Webstandards

Suche
SucheMenü

Schritt 1: XHTML-Grundgerüst

Hinweis: Diese »Einführung in XHTML, CSS und Webdesign« ent­spricht der zwei­ten Auf­lage des gleich­na­mi­gen Buches, das im Dezem­ber 2008 im Ver­lag Addison-Wesley erschie­nen ist. Die Inhalte sind mittlerweile veraltet, fast alles hat sich weiterentwickelt. Seit einigen Jahren gibt es HTML5, von XHTML redet niemand mehr, und auch die Entwicklung und Unterstützung von CSS ist um Einiges weiter. Auch fast alle Grundlagentexte müsste man schon lange fortschreiben. Falls Sie die Texte dennoch lesen möchten, behalten Sie das bitte im Hinterkopf.

Zurück zur Startseite und zum Inhaltsverzeichnis des Buchs

Die Kochbar realisieren wir mit XHTML 1.0 Strict. Der Entwurf ist einfach genug, um eine bestmögliche Trennung von Struktur und Darstellung zu ermöglichen.

Die globale Struktur eines XHTML-Dokuments beschreibe ich in Kapitel 4.2. Darauf aufbauend sieht das XHTML-Grundgerüst der Homepage (und aller weiteren Seiten) wie folgt aus:

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  <head>
    <title>Kochbar</title>
  </head>
    
  <body>
  </body>
</html>
Listing 8.1: Grundgerüst der Kochbar-Homepage

Nun fehlen noch wichtige Metaangaben (siehe Kapitel 4.5). Wir müssen die Zeichenkodierung angeben und sollten die Möglichkeit nutzen, Informationen für Suchroboter und Suchmaschinen hinzuzufügen.

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Kochbar</title>

    <meta name="author-personal" content="Michael Jendryschik" />
    <meta name="author-mail" content="mailto:michael@jendryschik.de" />
    
    <meta name="description" content="Vorstellung der Kochbar in Musterstadt mit Informationen zur Küche, dem Biergarten sowie dem Rezept des Tages." />
    
    <meta name="language" content="de" />
    <meta name="robots" content="index, follow" />
  </head>

  <body>
  </body>
</html>
Listing 8.2: Grundgerüst mit Metaangaben

Auf weitere Metaangaben verzichten wir zunächst. Bisher haben wir kein Stylesheet eingebunden, also brauchen wir auch keine Stylesheetsprache anzugeben. Schlagwörter können wir bei Bedarf später hinzufügen.

Übung: XHTML-Grundgerüst erstellen

  1. Fügen Sie das erweiterte Grundgerüst in Ihre index.html ein, wobei Sie natürlich Ihren Namen und Ihre E-Mail-Adresse bei den Metaangaben notieren. Sie können sich die Listings von der Seite http://jendryschik.de/wsdev/einfuehrung/buch/ herunterladen und den Quelltext daraus kopieren, aber der Lerneffekt ist größer, wenn Sie ihn abschreiben.

    Bitte übertragen Sie auch alle Leerzeilen und Einrückungen. Gewöhnen Sie sich schon zu Beginn an, den Quelltext sauber und übersichtlich zu strukturieren. Das wird für Sie nützlich sein, wenn Sie sich nach einiger Zeit wieder Ihrem Quelltext widmen, aber auch für Kollegen, die Ihrer Arbeit ergänzen oder weiterführen wollen und sich in Ihren Dokumenten zurechtfinden müssen.

    Es gibt unterschiedliche Wege, Quelltextzeilen einzurücken. Manche Webautoren rücken mit Tabulatoren ein, andere mit Leerzeichen. Ich bevorzuge die Einrückung mittels zweier Leerzeichen und habe meinen Editor entsprechend konfiguriert. In UltraEdit finden Sie die Einstellung in den Optionen im Unterpunkt »Editor > Zeilenumbruch/Tabulatoren«. Aktivieren Sie die Option »Leerzeichen anstelle von Tabulatoren verwenden« und vergeben Sie den Tabstoppwert 2 sowie 2 bei »Leerzeichen für Einzug«. Falls Sie einen anderen Editor verwenden, schauen Sie, ob Sie ihn ähnlich konfigurieren können.

  2. Speichern Sie die Änderungen.

  3. Betrachten Sie das Ergebnis im Browser. Sie sehen eine Darstellung wie in Abbildung 8.6: ein leeres Browserfenster mit dem Titel »Kochbar«.


Abb. 8.6: Schritt 1

Unser Grundgerüst steht. Nun können wir anfangen, uns um die Auszeichnung der Inhalte zu kümmern. Dabei gehen wir einfach von oben nach unten vor: Fangen wir also an mit dem Logo, dem Kochbar-Schriftzug.