XHTML
Aus Wikibooks
Hinweis: Dieses Buch wird von Websiteentwicklung: XHTML abgelöst. Verbessern sie aus diesem Grund das Buch Websiteentwicklung: XHTML anstelle von diesem hier.
Die eXtensible HyperText Markup Language (XHTML) ist die auf XML basierende Weiterentwicklung der HyperText Markup Language (HTML). Sie dient zur strukturierten Gestaltung von Webseiten und wurde vom World Wide Web Consortium (W3C) entwickelt. Weitere Informationen finden sich im Internet unter http://www.w3.org/MarkUp/.
Inhaltsverzeichnis |
[Bearbeiten] Einleitung - Der Weg von HTML zu XHTML
HTML, also die HyperText Markup Language wurde Hand in Hand mit dem World Wide Web (WWW) am CERN entwickelt. Maßgeblich für die Entwicklung beider Techniken war Tim Berners-Lee. Der ursprüngliche Sinn von HTML war nicht die grafische Gestaltung von Internetseiten, sondern die Zuordnung semantischer Informationen zu einzelnen Dokumentteilen. So gibt es in HTML z.B. Elemente zur Auszeichnung von Absätzen, Überschriften uvm. Anfangs gab es in HTML noch keine gestalterischen Möglichkeiten, doch mit der Zeit hielten auch grafische Elemente Einzug in die späteren Versionen von HTML. So ging die ursprünglich geplante Trennung von Inhalt und Design immer mehr verloren.
2000 wurde die letzte Version von HTML - HTML 4.01 - in XML neu definiert. Das Ergebnis ist XHTML. Der Vorteil dieser Neuimplementierung ist, dass XHTML-Dokumente mit allen aktuellen XML-Parsern validiert werden können. Anders als die SGML-Parser heutiger Webbrowser sind die XML-Parser nicht fehlertolerant. Dies bringt es mit sich, daß ein XHTML-Dokument alle Regeln von XML befolgen muss, da der Browser es sonst weder parsen noch anzeigen kann.
[Bearbeiten] XHTML und HTML
Wie oben schon erwähnt ist der große Unterschied zu HTML der, dass XHTML auf XML basiert, also auch alle Grundeigenschaften von XML erbt. Zum Beispiel müssen in XHTML alle Tags klein geschrieben werden. Wo es in HTML noch keinen Unterschied machte, ob man <BR>, <Br> oder <br> schreibt, muss man in XHTML zwingend <br/> oder <br /> schreiben, um ein gültiges Dokument zu erhalten.
Ein weiterer Unterschied ist, dass es nicht mehr wie bei HTML erlaubt ist, Tags nicht zu schließen. Das heißt z.B dass ein Listenelement-Tag <li> immer mit dessen End-Tag </li> geschlossen werden muss. Wenn es keinen Inhalt gibt, wie bei <hr>, <br> oder auch bei <img src="...">, wird einfach am Ende des Tags ein / eingefügt. Die Tags sehen dann folgendermaßen aus: <hr/>, <br/> oder <img src="..."/>. Wenn man ein besonderes Augenmerk auf die richtige Darstellung bei älteren Programmen legt, sollte man vor dem Schrägstrich ein Leerzeichen einfügen (<br />). Manche Browser erkennen die Tags nur mit diesem Leerzeichen richtig. Gemäß der Spezifikation sind beide Versionen gültig.
[Bearbeiten] Basis-Tags
Das hier sind die Tags, die benötigt werden, um eine minimale HTML-Seite zu erstellen.
<html> </html>
Genauso wie mit regulären HTML Seiten sind alle anderen Tags zwischen diesen Tags zu finden, z.B.:
<head> </head>
<title> </title>
<body> </body>
Hier ein Beispiel für eine minimale XHTML-Seite:
<?xml version="1.0" encoding="iso-8859-1"?>
<!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> Eine kleine Beispielseite </title>
</head>
<body>
<p> Hallo Welt !!! </p>
</body>
</html>
Der Text vor dem <html> Tag ist die Dokumenttypdefinition. Wir werden darauf weiter unten näher eingehen. Es bezeichnet gewissermaßen nur, um was für ein Dokument es sich handelt und nach welchen Richtlinien es notiert ist. Die erste Zeile ist beispielsweise für den Server interessant, der damit weiß, inwiefern er die Datei behandeln soll.
Mit diesen Basis-Tags lässt sich nun bereits ein beliebig langer Text im Internet veröffentlichen.
[Bearbeiten] Text-Tags
[Bearbeiten] Bild- und Link-Tags
[Bearbeiten] Listen-Tags
[Bearbeiten] Tabellen-Tags
Eine Tabelle bietet für websites reichhaltige Möglichkeiten. Der klassische Sinn einer Tabelle ist natürlich geordnete Informationen in für Andere übersichtlicher Art und Weise darzustellen. Andererseits bieten sie nun nicht (mehr?) nur die Möglichkeit Informationen, sondern auch zB die Struktur einer website zu sortieren und an Ort und Stelle zu halten, dazu aber später mehr.
Eine einfache Tabelle hat folgende Struktur:
<table> <tr> <th>Überschrift Spalte 1</th> <th>Überschrift Spalte 2</th> </tr> <tr> <td>Zeile 1 Spalte 1</td> <td>Zeile 1 Spalte 2</td> </tr> <tr> <td>Zeile 2 Spalte 1</td> <td>Zeile 2 Spalte 2</td> </tr> </table>
Damit erzielt man folgende Ausgabe:
| Überschrift Spalte 1 | Überschrift Spalte 2 |
| Zeile 1 Spalte 1 | Zeile 1 Spalte 2 |
| Zeile 2 Spalte 1 | Zeile 2 Spalte 2 |
Die einzelnen Elemente bedeuten dabei wie folgt: <table> ("Tabelle") steht für den Anfang der Tabelle, dementsprechen deutet </table> auf das Ende einer Tabelle hin. Alles, was sich dazwischen befindet, ist Bestandteil der Tabelle. Ebenso befindet sich alles zwischen <tr> und </tr> ("Table Row", "Tabellenzeile") in einer Zeile. Der Inhalt zwischen <td> und </td> ("Table Data", "Tabellendaten") ist nun der eigentliche Inhalt einer Tabellenzelle. Die Tags <th> und </th> sind eine Spezialform von <td> und </td> und bezeichnen die Titelzeile der Tabelle ("Table Head", "Tabellenkopf").
Beim Bau einfacher Tabellen muss unbedingt beachtet werden, dass grundsätzlich gleiche Anzahl von Datenfelder in den Reihen vorkommen. Ansonsten kann es zu unkontrollierten Darstellungen kommen, obwohl es im Einzelfall auch korrekte Ergebnisse liefern kann.
Möchte man diesen Zustand allerdings provozieren, um beispielsweise eine Tabellenzelle über zwei Spalten hinweg zu ziehen, so geht dies natürlich auch. Dazu müssen den einzelnen Tags, die ihren Grundzustand verlassen sollen, noch Argumente hinzugefügt werden.
<td rowspan="n">Text</td> <td colspan="n">Text</td>
Dabei sagt das Argument (n) grundsätzlich aus wieviele entsprechende Spalten (colspan) oder Zeilen (rowspan) zusammengefasst werden sollen. Auch hier muss wieder die Anzahl der Inhalte beachtet werden, aber diesmal unter Berücksichtigung der Tatsache, dass vereinzelte Felder mehr als eine Fläche einnehmen.
| Überschrift Spalte 1 | Überschrift Spalte 2 |
| Zeile 1 Spalte 1 | Zeile 2 Spalte 2 |
| Zeile 2 Spalte 1 und 2 | |
| Überschrift Spalte 1 | Überschrift Spalte 2 |
| Zeile 1 und 2 Spalte 1 | Zeile 1 Spalte 2 |
| Zeile 2 Spalte 2 |
