Websiteentwicklung: XHTML: Erste Seite

Websiteentwicklung XHTML Erste Seite

Ein leeres Dokument erstellen

Starten Sie Ihren Editor und erstellen Sie ein leeres Dokument. Speichern Sie das leere Textdokument mit der Endung .xhtml ab und öffnen Sie es mit Ihrem Browser (Darstellungsprogramm).

Jetzt sehen Sie die Darstellung einer leeren Seite.

Weil es sich bei XHTML um ein XML-Format handelt, ist eine leere Seite per Definition kein XML-Dokument und damit auch kein XHTML-Dokument. Ein korrekt funktionierendes Programm zur Interpretation (XML-parser) wird bei der leeren Seite eine Fehlermeldung ausgeben - das wäre dann die 'korrekte' Interpretation einer leeren Seite und ein deutliches Zeichen dafür, dass das leere Dokument von einem geeigneten Programm interpretiert wird. Erscheint keine Fehlermeldung, wird vermutlich kein XML--parser zur Darstellung verwendet und das Programm ist entweder umzukonfigurieren oder ein geeigneteres Programm zu verwenden.

Ferner kann es (bei Verwendung des Microsoft Internet Explorer, älter als Version 9) passieren, dass beim Öffnen der XHTML-Datei die Meldung angezeigt wird, dass Sie zunächst ein Programm zum Öffnen auswählen müssen. Sie haben dann die Möglichkeit, ein geeigneteres Programm wie einen neueren Browser auszuwählen. Würde stattdessen die Dateiendung (wie bei HTML) auf ".html" gesetzt, wäre die Folge, dass das Dokument statt als XHTML nun als HTML interpretiert wird. In dem Fall wäre die Mühe um XHTML vergeblich gewesen und es wäre dann angebracht, ein HTML-Dokument und kein XHTML-Dokument zu schreiben.

Wahl und Angabe der Kodierung

Ein generelles Problem der Speicherung von Information mit elektronischen Formaten bleibt dem Autor auch bei XML und XHTML nicht erspart. Dies betrifft die Festlegung, welche Zeichen welcher Binärdarstellung zugeordnet werden sollen. Auf tieferliegende Standards soll hier nicht weiter eingegangen werden. Bereits auf Ebene der direkten Eingabe von Text hat ein Autor die Wahl zwischen diversen Kodierungen. Für weite Teile der Welt hat sich mittlerweile eine Kodierung als sehr nützlich erwiesen, die UTF-8 genannt wird. Mit dieser Kodierung lassen sich sehr viele Zeichen direkt hinschreiben. Aus diesem Grunde wird auch für XML-Dokumente festgelegt, dass, sofern der Autor oder eine andere Autorität nichts anderes festlegt, das Dokument als mit UTF-8 kodiert angesehen werden soll.

Von daher empfiehlt es sich dem Anfänger also, um möglichst viele Probleme zu umgehen, am Texteditor einzustellen, dass UTF-8 zur Kodierung des Dokumentes verwendet werden soll. Falls der Texteditor dies vorsieht, sollte auch die Verwendung eines 'BOM' (Bytereihenfolge-Markierung, englisch: byte order mark) dort deaktiviert werden, um mögliche Fehlerquellen von vorne herein auszuschließen. Bei UTF-8 wird ganz allgemein gar kein 'BOM' benötigt, lediglich bei UTF-16, daher wäre die Angabe allgemein überflüssig, bei XML-Dokumenten sogar problematisch.

Natürlich sollte einem späteren Darstellungsprogramm dann noch die Information gegeben werden, dass es sich bei dem Dokument wirklich um ein XML-Dokument handelt. Dazu und zur Angabe der Kodierung sollte immer in der ersten Zeile eines jeden XHTML-Dokumentes eine sogenannte XML-Verarbeitungsanweisung notiert werden. Im einfachsten Falle einer Kodierung in UTF-8 muss diese Kodierung nicht gesondert angegeben werden. Somit kann in die erste Zeile einfach geschrieben werden:

<?xml version="1.0" ?>

Die Kodierung kann man auch angeben, was nützlich sein kann, um sich selbst daran zu erinnern, was man beim Erstellen der Datei für eine Kodierung verwendet hat:

<?xml version="1.0" encoding="UTF-8" ?>

Da es in diesem Kapitel mehr um die Praxis und das erste Erfolgserlebnis geht, soll hier nicht weiter auf solche Formalien eingegangen werden. Details dazu stehen im Kapitel über Kopfdaten.

Das XML-Dokument

Jetzt möchten Sie aber nicht eine Fehlermeldung oder eine leere Seite anzeigen lassen, sondern eine Seite, in der auch etwas Text steht. Gehen Sie dazu zurück zu Ihrem Editor mit dem leeren Dokument. Sie könnten jetzt irgendeinen Text in das Dokument schreiben, speichern und das Resultat mit dem Browser betrachten. Normalerweise wird jetzt eine Fehlermeldung angezeigt. Das liegt daran, dass der XHTML-Standard einen bestimmten Aufbau des Dokuments verlangt. XHTML gehört zur Familie der XML-Formate. Bei diesen wird die Struktur mit Elementen gekennzeichnet, welche wiederum mit spitzen Klammern '<' und '>' als solche gekennzeichnet werden.

Als XML-Format ist es notwendig, dass ein Wurzelelement vorhanden ist, welches alle anderen, gegebenenfalls vorhandenen Elemente umschließt. Aus historischen Gründen heißt dies bei XHTML html.

<?xml version="1.0" encoding="UTF-8" ?>
<html>

</html>

Der jeweilige Bereich des Elementes wird mit Anfangs- und Endmarkierungen gekennzeichnet, also <html> als die Anfangsmarkierung und </html> als die Endmarkierung. Details bezüglich der genauen Syntax finden sich im Kapitel Syntax. Damit ist bereits ein XML-Dokument notiert.

Das XHTML-Dokument

Dies reicht allerdings nicht für ein gültiges XHTML-Dokument. Im Wurzelelement muss es einen Kopf-Bereich (Element head) mit Informationen zum Dokument und einen Körper-Bereich (Element body) mit dem Inhalt der Seite geben.

In das Wurzelelement html kommen alle Elemente und Texte.

Der Kopf-Bereich

Im html-Bereich kommt nun als erstes der Kopf-Bereich, der mit dem Element head erstellt wird. XHTML schreibt weiterhin vor, dass im Element head ein Element title stehen muss, welches wiederum einfachen Text enthält.

Der Dokumenttitel title ist der Text, der bei Darstellungsprogrammen mit graphischer Ausgabe zumeist oben in der Titelleiste des Fenster (und auch in Reitern) angezeigt wird. Im Sinne einer globalen Überschrift können Darstellungsprogramme mit Textausgabe dies auch über dem sonstigen Inhalt abgesetzt notieren. Es gibt keine genauen Definitionen, wie ein Titel dargestellt werden sollte. Primär soll der Titel das Dokument repräsentieren, ähnlich wie das bei einem Buchtitel der Fall ist. Dieser Text wird von Darstellungsprogrammen meist auch als Titel für Lesezeichen verwendet, wenn der Nutzer dies nicht ändert. Sie sollten daher den Titel sorgfältig auswählen und darauf achten, dass er den Inhalt der Seite möglichst exakt beschreibt. Details dazu stehen im Kapitel über Kopfdaten.

Das Kopfbereich sieht damit wie folgt aus:

<head>
   <title>Titel des Dokumentes</title>
</head>

Die Einrückungen im XHTML-Quelltext haben keine Auswirkungen auf die Darstellung der Seite. Sie dienen nur der besseren Lesbarkeit für den Autor.

Der Körper-Bereich

Nach der Endmarkierung von head gibt es den Körper der Datei mittels des Elementes body. Je nach der Version von XHTML ist es entweder zwingend erforderlich oder dringend geboten, dass jeglicher Inhalt von body wiederum in bestimmten Elementen steht, das sind entweder Überschriften, Listen oder sogenannte Blockelemente. Ohne hier genauer auf die Funktion einzugehen, soll das Element h1 für eine Überschrift und p im body verwendet werden, um etwas Text notieren zu dürfen.

Bis hierher ist allerdings nicht klar, ob es sich um beliebiges XML handelt oder wirklich um XHTML. Um letzteres festzulegen, ist im Wurzelelement html der Namensraum von XHTML anzugeben. Neben Elementen kennt XML noch Attribute, die in der Anfangsmarkierung eines Elementes notiert werden. Das Attribut xmlns dient der Angabe eines solchen Namensraumes und ist eine spezielle Konstruktion in XML, die keiner Definition in einem speziellen Format wie XHTML bedarf. Der Namensraum von XHTML ist dabei ein spezieller Wert dieses Attributes, der zusammen mit XHTML festgelegt wurde. Insgesamt sieht die Angabe des Namensraumes wie folgt aus:

xmlns="http://www.w3.org/1999/xhtml"

Beachten Sie, dass zwischen html und xmlns noch ein Leerzeichen stehen muss. Solche Attribute stehen immer in der Anfangsmarkierung und nie in der Endmarkierung eines Elementes. Sie werden mit Leerzeichen vom Elementnamen oder voneinander getrennt. Der Wert des Attributes, hier der Namensraum, wird nach einem Gleichheitszeichen in doppelten oder einfachen Anführungszeichen notiert.

Innerhalb von h1 und p im body-Element können Sie nun irgendeinen Text schreiben, er sollte dann angezeigt werden.

Versionsangabe

Mittlerweile gibt es einige verschiedene Versionen von XHTML. Je nach Version sind darin einige Strukturen definiert oder eben auch nicht. Daher kann man die Version angeben. Teilweise erfordert das recht komplizierte Konstruktionen, die man einfach ins Dokument kopieren kann. Zum Glück allerdings liegt bei der neuesten Version von XHTML auch die einfachste Versionskennung vor. Dazu wird einfach zusätzlich zu dem Attribut xmlns ein Attribut version im Wurzelelement html notiert und zwar so:

version="XHTML+RDFa 1.1"

Weitere Möglichkeiten und Details finden sich im Kapitel über Kopfdaten.

Prototyp einer XHTML-Datei

Somit ergibt sich also als Prototyp einer XHTML-Datei:

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml" version="XHTML+RDFa 1.1">
<head>
   <title>Titel des Dokumentes</title>
</head>
<body>
  <h1>Hallo Welt</h1>
  <p>Ein (sinnvoller) Gedanke könnte hier notiert werden.</p>
</body>
</html>

Zusammenfassung

1. Zu Beginn des Dokumentes sollte eine XML-Verarbeitungsanweisung stehen, als im einfachsten Falle <?xml version="1.0" ?>
2. Ein Bereich wird mit Elementen notiert, dazu dienen Elementmarkierungen.
3. Eine Elementmarkierung (englisch: 'tag') wird mit spitzen Klammern gekennzeichnet, die Anfangsmarkierung: <element>
4. Jedes Element muss abgeschlossen werden. Dies geschieht mit einer Endmarkierung. Diese sieht ähnlich aus wie die Anfangsmarkierung, jedoch steht zwischen der öffnenden Klammer und dem Namen noch ein Querstrich: </element>
5. Eine Seite hat einen globalen html-Bereich, das Wurzelelement (englisch: root element), in welches alle anderen Angaben kommen.
6. Im Wurzelelement ist der Namensraum von XHTML zu notieren. Auch eine Versionsangabe sollte im Dokument vorhanden sein.
7. Eine Seite ist zusätzlich in einen Kopf- und einen Körper-Bereich unterteilt.
8. Ein Attribut ist ein Zusatz zu einem Element, welches die Bedeutung näher festlegt.

Wenn Sie sich diese Merksätze eingeprägt haben, kennen Sie schon die wichtigsten Grundlagen von XHTML.

Aufgabe 2

Versuchen Sie jetzt, die drei Bereiche zu definieren. Geben Sie der Seite den Titel "Meine erste Seite" und lassen Sie "Hallo Welt!" im Darstellungsprogramm anzeigen.

Lösung

Hinweise

Zurück zu Beschreibung | Hoch zu Hoch zu XHTML | Vor zu Syntax