(X)HTML-Workshop 1
Sonderzeichen und Hyperlinks
Wir erstellen eine neue Datei mit dem Namen andereseite.html und speichern sie im selben Ordner wie die Datei eineseite.html. Setzen Sie folgende Zeilen ein:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd">
<html>
<head>
<title>Textauszeichnung</title>
</head>
<body>
<p>Ä Ö Ü<br />
ä ö ü<br />
ß & ©</p>
<p>Ä Ö Ü<br />
ä ö ü<br />
ß & ©</p>
<p>Und hier ist ein <a href="eineseite.html">Hyperlink</a> zu einem anderen Dokument</p>
<p>Und hier ist ein <a href="#anker">Hyperlink</a> zu einem Anker ganz unten auf dieser Seite<br />
<br />
Setzen Sie hier noch ganz ganz viele <br />
hin!!! (Damit die Seite ganz ganz lang wird.) <br />
<br />
<a name="anker" id="anker">Das ist der Anker</a></p>
</body>
</html>
Nanu! Die ersten Zeilen sehen im Browser ja völlig vermurkst aus! (Diese Zeichen werden manchmal als Gremlins bezeichnet) Das Problem liegt darin, daß der Browser lediglich den ASCII Zeichensatz interpretiert und Sonderzeichen speziell maskiert werden müssen. Dazu wird eine das Zeichen bezeichnende Buchstabenkette mit maximal 4 Elementen ein Kaufmannsund ( & ) vorgestellt. Mit dem Semikolon ( ; ) wird die Maskierung beendet. Mit etwas Phantasie kann man die Maskierungen ganz gut interpretieren und sich merken. ä bedeutet z.B. Klein a Umlaut, ß bedeutet Sz Ligatur (ß) usw. Setzen Sie auch mal folgende Maskierungen ein: < (Less Than), > (Greater Than), & (Ampersand) und (Non Breaking SPace, sehr wichtig!). Damit kennen Sie schon die für den deutschen Sprachraum wichtigsten Maskierungen.
Das Charakteristische an Hypertextdokumenten ist, das sie nichtlineares Lesen bzw. Erarbeitung von Information ermöglichen. Dieses wird durch Hyperlinks erreicht, die auf andere Dokumente oder Anker (darunter ist ein Zielpunkt zu verstehen) verweisen. Das ist der Clou bei dem Netz für das wir uns mit XHTML beschäftigen.
In XHTML wird beides, Verweisziel und Verweis, mit dem <a> (Anchor, Anker) Tag erzeugt. Ermöglicht wird diese Ambivalenz (Mehrdeutigkeit) durch die bereits Eingangs erwähnten Attribute (Eigenschaften) die man einem Tag anfügen kann. So bestimmt das Attribut href=" " das Ziel des Verweises der mit dem Attribut id=" " für das Dokument eindeutig benannt wird. Das Attribut name=" " ist nicht XML konform und kommt hier nur noch vor, um Abwärtskompatibilität zu gewährleisten.
Mit einem Hyperlink kann man in XHTML nicht nur auf einen Anker im aktuellen Dokument springen sondern auch auf einen Anker eines weiteren. Beispiel <a href="eineseite.html#anker">...</a>. Dieser Link muß dort aber auch tatsächlich vorhanden sein. Das richten Sie jetzt aber schon mit "Links" ein. Bei der Gelegenheit können Sie ja direkt auch einen Verweis zurück auf die Datei andereseite.html anlegen.
Und, funktioniert es? wenn nicht: Prüfen Sie nach ob beide Dateien im gleichen Ordner gespeichert sind. Ist die Schreibweise korrekt? Attribute dürfen bis auf den Unterstrich ( _ ) keine Sonderzeichen vorweisen. Gibt es Zahlen- oder Buchstaben -dreher? Generell am sichersten: Dateinamen, Verweisziele und Attributwerte immer mit Copy and Paste einsetzen. Haben Sie die Datei nach den Änderungen auch gesichert.
So, jetzt reicht´s für´s Erste! Meine Empfehlung: Laden sie sich die HTML4 Referenz selfhtml7.0 (Achtung: beschreibt nicht den aktuellen Standart!) aus dem Internet und schauen Sie sich mal die möglichen Attribute zu den Tags <body> und <p> an. Experimentieren Sie mit dem gerade erworbenen Wissen. Betrachten Sie Ihre Seiten mit verschiedenen Browsern. Machen Sie Fehler! Und: Sesamstraßen Prinzip beachten (Wer nicht Fragt, bleibt dumm!).
Einleitung
Die XHTML Dokumentstruktur
Überschriften und Absätze
Sonderzeichen und Hyperlinks
|