XHTML
heißt eXtensible HyperText Markup Language, also eine Sprache, um Hypertexte mit
Markierungen zu versehen. (Genau genommen ist (X)HTML ein SGML-DocumentType.)
HyperText ist einfach normaler Text (für Informatiker: Knoten),
der Verbindungen (für Informatiker: Kanten) zu anderen Dokumenten
hat. So entsteht ein richtiges Netz (für Informatiker: Graph)
von Dokumenten, das sich World
Wide Web nennt. Den Verbindungen kann man durch einfaches Auswählen
nachgehen.
XHTML sieht zuerst mal wie ganz normaler Text aus. Und das ist es eigentlich
auch. Nur dass dazwischen spezielle Zeichenketten auftauchen, die
die XHTML-Befehle darstellen.
XHTML-Befehle werden auch als Tags bezeichnet. Tags fangen immer
mit einem Kleinerzeichen (<) an, dann kommt der Name des Tags
und zum Abschluss kommt ein Größerzeichen (>),
also etwa so: <name>.
Es gibt Tags, die mitten im Text auftauchen (sie werden als leere Tags
bezeichnet) und andere, die einen Teil des Textes umschließen. Dazu
gibt es neben dem schon beschriebenen Opening Tag noch einen Closing
Tag, der sich von ersterem nur durch einen Slash ( /) vor
dem Namen unterscheidet: </name>. Leere Tags können entweder durch
das entsprechende Closing Tag oder aber in einer verkürzten Schreibweise
geschlossen werden. Dazu wird der Slash vor das schließende Größerzeichen geschrieben (<name />)
Außerdem gibt es noch Tags, die Attribute haben, mit denen man das
Verhalten des Tags beeinflussen kann. Solche Attribute stehen zwischen
dem Namen und dem Größerzeichen und werden durch Leerzeichen
voneinander getrennt. Attribute haben zusätzlich noch einen
Wert, dieser wird mit einem Gleichheitszeichen an das Attribut angehängt und durch in doppelte Anführungszeichen umschlossen:
<name attrib="Wert">. Tags und Attribute werden in XHTML grundsätzlich klein geschrieben. Die Werte dürfen natürlich auch Großbuchstaben enthalten.
Ein ganz komplizierter Tag würde also so aussehen:
|
<name attrib1="Wert1" attr2="Wert2">
Irgendwelcher Text
</name>
|
|
Da XHTML-Dateien XML-Dokumente sind, kann der verwendete Zeichensatz im XML-Prolog angegeben werden.
Dies ist vor allem dann sinnvoll, wenn man Sonderzeichen verwendet. Unterstützt der gewählte
Zeichensatz die im Text verwendeten Sonderzeichen nicht, dürfen diese auch nicht
verwendet werden. Das heißt zunächst, dass keine Umlaute direkt in den Text geschrieben werden dürfen.
Um dennoch Umlaute und Sonderzeichen im Text unterzubringen, werden
so genannte Entities verwendet, die eine Umschreibung für Umlaute sind.
Achtung SGML-Freaks: Entities sind eigentlich SGML-Makros, können
aber nicht als solche verwendet werden, da die Browser keinen SGML-Parser
haben, sondern nur bestimmte vordefinierte Entities verstehen.
Entities fangen mit einem Ampersand (&) an, dann folgt
der Name der Entity, abgeschlossen mit einem Semikolon (;).
Der Ampersand selber hat dann natürlich auch eine eigene Entity; ebenso
braucht man für das Größer- und das Kleinerzeichen auch
eigene Entities.
ä: ä ö: ö ü: ü
ß: ß
Ä: Ä Ö: Ö Ü: Ü
&: & <: < >: >
|
Der prinzipielle Aufbau eines Dokuments
|
|
Bei XML und damit auch bei XHTML geht alles ganz hierarchisch zu. Wie jedes XML-Dokument fängt
auch ein XHTML-Dokument mit einem XML-Prolog an. In diesem werden der Dokumententyp und die Version der Dokumentenbeschreibungssprache
identifiziert; dies ist insbesondere deshalb wichtig, weil es mehrere HTML/XHTML-Versionen gibt.
Das eigentliche Dokument wird durch <html>-Tags (Root-Element) umschlossen und gliedert sich
dann in einen Header
und einen Body. Im Root-Element muss immer der Namensraum des Dokumentes durch ein xmlns-Attribut deklariert werden.
Der Header
wird durch <head>-Tags begrenzt. Hier stehen allgemeine
Informationen über das Dokument. Der Body ist der eigentliche
Informationsträger,
er wird durch <body>-Tags umschlossen und enthält all
das, was später zur Anzeige kommen soll.
Ein typisches Dokument sollte also so aussehen:
|
XML-Prolog
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
Header-Elemente
</head>
<body>
Body-Elemente
</body>
</html>
|
|
Jedes XML-Dokument beginnt mit einem XML-Prolog. In diesem werden Angaben zur Version, zum verwendeten
Zeichensatz (optional) und zur Kodierung der Zeichen (optional) gemacht. Zusätzlich folgt noch die
Angabe, welche Grammatik diesem Dokument zugrunde liegt.
|
<?xml version="1.0" charset="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
Im Header stehen Informationen über das Dokument. Es handelt
sich vor allem um Meta-Informationen, die dem Browser etwas über das
Dokument erzählen; wie es heißt, wer es gemacht hat und vieles
mehr.
Das wichtigste Element im Header ist der Titel des Dokuments. Er wird
mit <title> gekennzeichnet. Der Titel sollte ein Dokument
auch außerhalb seines Kontextes kennzeichnen, er wird z.B. für
die Anzeige in der History oder der Hotlist benutzt. Er sollte,
allein stehend, eine Aussage über das Dokument geben, anhand der man
das Dokument identifizieren, unter der man sich etwas vorstellen kann.
Insbesondere sollte man Titel wie "Einführung", "Überblick"
oder "Meine Homepage" meiden - das sind Überschriften!
Weitere wichtige Elemente sind das <link>- und das <meta>-Element,
sie sollen hier aber nicht in aller Ausführlichkeit
behandelt werden. Vielmehr sei die wichtigste Anwendung herausgegriffen,
nämlich die Kennzeichnung des Urhebers eines Dokuments. Dazu erhält
der <meta>-Tag ein Attribut (name)
mit dem Wert "author", es kennzeichnet also, wer das Dokument
"gemacht" hat. Der Autor wird dann in einem zusätzlichen Attribut content
aufgeführt
Der Header ist mit <head>-Tags geklammert. Ein typischer
Header könnte also so aussehen:
|
<head>
<title>Dokument-Titel</title>
<meta name="author" content="Max Mustermann">
</head>
|
|
Im Body steht der Inhalt des Dokuments, also all das, was angezeigt
werden soll. Dies kann zunächst mal ganz normaler Text sein.
Dabei muss auf Zeilenumbrüche und ähnliches nicht geachtet
werden, dafür sorgt nämlich der Browser oder WWW-Client.
Und da jeder Browser anders funktioniert, andere Zeichensätze oder
Fenstergrößen hat, sollte man auch tunlichst vermeiden, irgendwelche
Annahmen darüber zu treffen.
Einfacher Text wird auf Dauer langweilig, sieht unattraktiv aus und
vermittelt auch nicht das, was man vermitteln möchte. Deshalb gibt
es in HTML zusätzliche Tags, mit denen man etwas über die Struktur
und den Inhalt des Dokuments aussagen kann. Diese Struktur wird
dann vom Browser in ein Layout übertragen, das aber von Browser
zu Browser unterschiedlich sein kann. Man sollte beim Schreiben eines HTML-Dokuments
also immer darauf achten, dass es von unterschiedlichen Programmen
ganz unterschiedlich dargestellt werden kann und daher keine Annahmen darüber
treffen.
HTML-Tags dienen also nur einer semantischen Gliederung des Dokuments
und geben dem Browser Hinweise über den Inhalt, die dieser dann in
eine seinem Benutzer angenehme Darstellung übersetzt.
HTML stellt sechs verschiedene Levels von Überschriften zur Verfügung,
die mit den Tags <h1> bis <h6> markiert werden.
Ein mit einer Überschrift versehener Text sähe also so aus:
|
<h1>Überschrift</h1>
|
|
Ein einziger riesiger Text ist auch nicht so toll, deswegen lässt
er sich in einzelne Abschnitte unterteilen. Dazu dient der <p>-Tag,
der Abschnitte umfasst, so dass diese bei der Darstellung leicht voneinander abgesetzt werden.
|
<p>Ganz viel Text.</p>
<p>Noch mehr Text.</p>
|
|
Abschnitte werden i.A. durch einen Abstand voneinander getrennt. Ab
und an kann es notwendig werden, eine neue Zeile anzufangen, ohne einen
Abstand zu erzeugen; für diesen Zeilenumbruch dient der <br />-Tag.
Eine deutlichere Trennung mehrerer unabhängiger Teile eines Dokuments
kann man durch das Einsetzen einer horizontalen Linie erreichen. Sie wird
mit dem <hr />-Tag erzeugt.
Eine besondere Art des Abschnitts ist ein Zitat oder ein Beispiel.
Hierzu dienen die <blockquote>-Tags. Zitate und Beispiele werden oft eingerückt
dargestellt. Ein Beispiel für ein Zitat:
|
<p>Einfacher Text</p>
<blockquote>
<p>Zitierter Text</p>
</blockquote>
<p>Weiterer Text</p>
|
|
Manche Informationen lassen sich besser als eine Auflistung denn als
fließender Text präsentieren. HTML bietet hierzu drei grundlegende
Listentypen an. Der einfachste Typ ist die ungeordnete Liste, was jetzt
aber nicht heißt, dass die Listenelemente wild durcheinander
angezeigt werden; dies soll lediglich ausdrücken, dass die Liste
keine definierte Abfolge darstellt. Eine solche Liste wird durch <ul>-Tags
begrenzt, die einzelnen Listenelemente werden durch <li>
umgeben:
|
<ul>
<li>Ein Eintrag</li>
<li>Noch ein Eintrag</li>
</ul>
|
|
Für eine definierte Abfolge, wie sie z.B. in einer Gebrauchsanweisung
auftaucht, steht die geordnete Liste zu Verfügung. Der Browser sorgt
dabei dafür, dass dies auch zum Ausdruck kommt (z.B. durch fortlaufende
Nummern vor den Einträgen). Eine geordnete Liste funktioniert genau
wie eine ungeordnete, nur ist jetzt <ol> statt <ul>
zu verwenden.
Der dritte Typ unterscheidet sich von den vorherigen dadurch, dass
ein Eintrag jetzt aus zwei Teilen besteht: einem Eintrag und einer zugehörigen
Beschreibung. Eine solche Liste lässt sich als Glossar u.ä.
verwenden. Das Schlüsselwort wird dabei durch <dt>
eingeleitet, die zugehörige Erklärung durch <dd>:
|
<dl>
<dt>Ein Eintrag</dt>
<dd>und der zugehörige Text</dd>
<dt>Ein anderer Eintrag</dt>
<dd>und der dazugehörige Text</dd>
</dl>
|
|
Mit den Tabellen in XHTML kann man natürlich Tabellen darstellen,
klar. Leider werden sie jedoch sehr häufig gar nicht dafür eingesetzt,
sondern vielmehr dafür, das Layout einer XHTML-Seite
zu steuern. Dies ist aber bei Verwendung von CSS zur Layoutgestaltung nicht nötig und gilt als schlechter Stil.
Eine Tabelle wird mit dem Tag <table> begonnen und mit
</table> abgeschlossen. Dieses Tag hat eine Reihe von Attributen,
auf die wir hier nicht vertiefend eingehen wollen. Als Beispiel soll lediglich
das Attribut border dienen. Damit lässt sich die Strichbreite
der Tabelle einstellen. Werden Tabellen zur Layout-Gestaltung missbraucht, wird dieses Attribut auf Null gesetzt,
so dass die Tabelle nicht als Tabelle erscheint.
Die Tabelle wird dann aufgebaut aus Zeilen und Zellen (nicht etwa aus
Spalten, wie man denken könnte; Zellen sind flexibler). Eine Zeile
wird mit dem Tag <tr> begonnen und auch wieder mit </tr>
abgeschlossen. In dieser Zeile werden dann Zellen erzeugt. Es gibt zwei Arten von
Zellen, die normalen Zellen, die mit dem Tag <td>Text</td>
für table data cell erzeugt werden, und die hervorgehobenen Zellen, die
table header cell, die mit <th>Text</th>
erzeugt werden. Auch diese Tags haben eine Reihe von Attributen.
Eine einfache Tabelle könnte so definiert sein:
|
<table border="2">
<tr><th>Name</th><th>Alter</th></tr>
<tr><td>Marko</td><td>28</td></tr>
</table>
|
|
Nähere Erläuterungen zur Verwendung von Tabellen findet Ihr in der
prInt-Dokumentation HTML-Tabellen.
Natürlich sind in HTML auch Texthervorhebungen möglich, um die Struktur eines
Textes herauszustellen oder Teile hervorzuheben. Ursprünglich wurden dazu meist direkte Textformatierungen
eingesetzt, wie kursiver Text (<i>), fetter Text (<b>),
unterstrichener Text (<u>) oder Schreibmaschinentext (<tt>). Heutzutage werden diese
Formatierungen durch CSS ersetzt. Man verwendet dann Tags wie <em> (Hervorhebung) und <strong> (Betonung), deren konkrete Darstellung in CSS-Anweisungen festgelegt wird.
Beim Übertragen fertiger ASCII-Dokumente nach HTML kommt es oft
vor, dass man einen schön gesetzten Text wie z.B. eine Tabelle
hat, die durch den automatischen Umbruch oder durch die proportionalen
Zeichensätze zerstört würde. Für solche Fälle
stehen die <pre>-Tags zur Verfügung, die einen Text
in einem nichtproportionalen Zeichensatz darstellen und vorgegebene Zeilenumbrüche
beachten:
|
<pre>Die erste Zeile
Die letzte Zeile</pre>
|
|
Das interessanteste an Hypertext sind die Hyperlinks, also die Verbindungen
zu anderen Dokumenten. Das Tag <a> erzeugt einen Link zu einer anderen
Seite. Dieses Tag macht HTML HyperText-fähig. Dem Attribut href wird
eine URL zugewiesen, welcher der Browser folgt, wenn der Text zwischen
dem <a> und dem </a> Tag angeklickt wird. Es muss nicht unbedingt
ein Text sein, mit dem ein Link verknüpft ist, dies können auch
Bilder etc. sein. Ein Beispiellink zu einer anderen Seite könnte z.B.
so aussehen:
|
<a href="http://www.uni-hamburg.de/">Uni-Hamburg</a>
|
|
Als "Image" können GIF- (Graphics Interchange Format / 1987
entwickelt von CompuServe), JPEG- (Joint Photographic Experts Group) oder PNG- (Portable Network Graphic)
Dateien in die WWW-Seite eingebunden werden. Nähere Informationen
(z.B. zu den einzelnen möglichen Optionen) sollte man sich aus einer
aktuellen Dokumentation zu XHTML (im Netz verfügbar) besorgen. Die
einfache Syntax sieht so aus:
|
<img src="ImageName" alt="eine textuelle Beschreibung" />
|
|
wobei ImageName der Dateiname oder die Adresse mit dem Dateinamen des
Bildes ist.
Kommentare in HTML werden zwischen <!-- und -->
eingeschlossen.
| Mi 12-16 Uhr
| Raum: B-201 und RZ
| Start: 05.04.2006
|
Eine Veranstaltung des Arbeitsbereichs Verteilte Systeme und Informationssysteme (VSIS)
|
|
Letzte Änderung : 06.04.2005 - 10:31
EMail: prInt06@vsis.informatik.uni-hamburg.de
