Verbindung zweier Seiten im HTML
HTML-Dokumente verknüpfen mit dem <a>-Tag
Lassen Sie uns nun durch ein recht einfaches Beispiel gehen, mit zwei HTML-Dokumenten auf Ihrer lokalen Platte. Sie brauchen Ihren Text-Editor und einen Web-Browser dafür, doch da beide Dokumente, mit denen Sie arbeiten, auf Ihrer lokalen Platte liegen, brauchen Sie nicht mit dem Netzwerk verbunden zu sein.
Zunächst erzeugen Sie zwei HTML-Dokumente und sichern sie in verschiedenen Dateien. Hier ist der Code der beiden HTML-Dateien, die ich mir für diesen Abschnitt ausgedacht und die ich menu.html und feeding.html genannt habe. Es macht wirklich nichts aus, wie Ihre Dokumente aussehen oder wie sie genannt werden, aber achten Sie darauf, Ihre eigenen Datei-Namen zu benutzen, wenn Sie mit diesem Beispiel fortfahren.
Die erste Datei heißt menu.html und sieht so aus:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>HTML Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<h1>
HTML Lernen - Grundlagen und Tutorials
</h1>
<p>
Lobortis porttitor himenaeos tristique ligula molestie ultricies ad feugiat nam aliquam, maecenas auctor magna dolor ex laoreet primis sapien metus quis, ipsum ullamcorper mauris dignissim nisl porta dictumst torquent scelerisque luctus.
</p>
<ul>
<li>Julius Caesar</li>
<li>Augustus</li>
<li>Tiberius</li>
<li>Gaius (Caligula)</li>
<li>Claudius</li>
<li>Nero</li>
</ul>
</body>
</html>
Die Liste der Menü-Punkte (Julius Caesar, Augustus usw.) werden später zu Verknüpfungen mit anderen Dokumenten. Im Augenblick aber schreiben Sie sie als normalen Text; Sie verwandeln sie erst später in Verknüpfungen.
Die zweite Datei, claudius.html, sieht so aus:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/transitional.dtd">
<html>
<head>
<title>HTML Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<h2>
Verbindung zweier Seiten im HTML
</h2>
<p>
Lobortis porttitor himenaeos tristique ligula molestie ultricies ad feugiat nam aliquam, maecenas auctor magna dolor ex laoreet primis sapien metus quis, ipsum ullamcorper mauris dignissim nisl porta dictumst torquent scelerisque luctus.
</p>
<h2>
Claudius is Poisoned
</h2>
<p>
Lobortis porttitor himenaeos tristique ligula molestie ultricies ad feugiat nam aliquam, maecenas auctor magna dolor ex laoreet primis sapien metus quis, ipsum ullamcorper mauris dignissim nisl porta dictumst torquent scelerisque luctus.
</p>
<p>
Zurück zur Startseite
</p>
</body>
</html>
Stellen Sie sicher, dass beide Dateien in demselben Verzeichnis oder Ordner gespeichert sind, und wenn Sie sie nicht menu.html und claudius.html genannt haben, merken Sie sich die Namen, denn Sie werden sie später brauchen.
Zuerst erzeugen Sie nun eine Verbindung von der Datei menu zur Datei claudius. Editieren Sie die Datei menu.html, und setzen Sie den Cursor auf die darauffolgende Zeile:
<li>claudius </li>
Verknüpfungs-Tags definieren nicht das Format des Textes selbst; lassen Sie also die Absatz-Kennungen in Ruhe, und fügen Sie das Verknüpfungs-Tag innerhalb des Absatzes ein.
Als Erstes fügen Sie die Verknüpfungs-Kennungen (die <a>- und </a>-Kennungen) vor und hinter den Text ein, den Sie als Verbindung (Link) benutzen wollen:
<li> <a> Claudius </a> </li>
Nun ergänzen Sie den Namen der Datei, mit der Sie eine Verbindung herstellen wollen, als den href-Teil der einleitenden Kennung. Schließen Sie den Namen in Gänsefüßchen ein (mit geraden Strichen ["] nicht mit gerundeten ["]), mit einem Gleichheitszeichen zwischen href und dem Namen. Beachten Sie, dass zwischen Groß- und Kleinschreibung unterschieden wird, und vergewissern Sie sich deshalb, den Datei-Namen genauso einzutippen, wie Sie ihn beim Abspeichern geschrieben haben (Claudius. html ist nicht das gleiche wie claudius.html; Groß- und Kleinschreibung beachten!). Hier habe ich feeding.html benutzt; wenn Sie einen anderen Datei-Namen verwendet haben, nehmen Sie diesen.
<li> <a href="claudius.html"> Claudius </a></li>
So, nun starten Sie Ihren Browser, wählen "Öffnen" (oder das passende Äquivalent) und öffnen die Datei menu.html. Der Absatz, den Sie für die Verknüpfung benutzt haben, sollte nun als Verbindung in einer anderen Farbe, unterstrichen oder sonstwie hervorgehoben angezeigt werden. Abbildung zeigt, wie das in Safari aussieht.
Und wenn Sie nun auf die Verknüpfung klicken, sollte Ihr Browser die Datei claudius.html laden und diese so anzeigen, wie es in Abbildung dargestellt wird.
Wenn Ihr Browser die Datei nicht finden kann, überprüfen Sie, ob der Name der Datei im href-Teil der Verknüpfungs-Kennung derselbe ist wie der Name der Datei auf Ihrer Platte und ob beide Dateien sich in demselben Verzeichnis befinden. Denken Sie daran, das Verknüpfungs-Tag mit der </a>-Kennung am Ende des Textes, der als Verbindung dient, abzuschließen. Und stellen Sie auch sicher, dass Sie Gänsefüßchen am Ende des Datei-Namens verwenden (es ist leicht, sie zu vergessen) und dass diese Gänsefüßchen von der gewöhnlichen, geraden Sorte sind. All diese Dinge können den Browser durcheinanderbringen und dazu führen, dass er die Datei nicht findet oder die Verknüpfung nicht richtig anzeigt.
Lassen Sie sich von der Groß-/Kleinschreibung nicht verwirren. Die Tags in HTML sind unabhängig davon, ob sie groß oder klein geschrieben werden. Datei-Namen dagegen beziehen sich auf Dateien, die sich irgendwo auf einem Web-Server befinden. Da die meisten Web-Server unter einem Betriebssystem laufen, das bei Datei-Namen zwischen Groß- und Kleinschreibung unterscheidet (zum Beispiel Unix oder Windows), sollten Sie sicherstellen, dass die Schreibung der Datei-Namen in Ihren Links korrekt ist.
Nun lassen Sie uns eine Verbindung feeding.html zurück zu menu.html erzeugen. Es gibt einen Absatz am Ende des Dokuments claudius.html, der für diesen Zweck gedacht ist:
<p>Zurück zur Startseite</p>
Ergänzen Sie die Verbindungs-Kennung mit der benötigten href in dieser Zeile wie hier, wobei menu.html die ursprüngliche Menü-Datei ist:
<p> <a href="menu.html">Zurück zur Startseite</a> </p>
Wenn Sie Tags innerhalb anderer Tags verwenden, achten Sie darauf, dass die abschließende Kennung jenes Tag abschließt, das Sie zuletzt geöffnet haben. Das heißt, Sie machen es so:
<p> <a> ... </a> </p>
und nicht so:
<p> <a> ... </p> </a>
Manche Browser könnten durcheinander kommen, wenn sich Kennungen derart überschneiden, daher ist es am besten, immer darauf zu achten, dass das zuletzt geöffnete Tag als Erstes wieder geschlossen wird.
Wenn Sie nun die Claudius-Datei erneut laden, wird die Verbindung aktiv sein, und Sie können zwischen der menu- und claudius-Datei hin- und herspringen, indem Sie diese Verknüpfungen auswählen.