Wir haben nun gelernt, einzelne HTML-Seiten zu erstellen und mit CSS ansprechend zu gestalten. Um aber eine richtige Website zu erstellen, benötigen wir mehrere Seiten, die untereinander durch Hyperlinks verlinkt werden sollen. Wie wir solche Hyperlinks erstellen, sehen wir nun.
Ein Tipp dazu noch vorweg. Wir sollten alle HTML-Dateien, die zu unserer Website gehören, in einem gemeinsamen Ordner speichern. Dies erleichtert das Erstellen von Hyperlinks. In der Vertiefung weiter unten wird zwar auch erklärt, wie man auf Dateien in anderen Ordnern verlinken kann, aber gerade bei den ersten Beispielen sollten wir uns das Leben nicht komplizierter machen als nötig.
Erste Beispiele
Einen Hyperlink markiert man mit dem Tag <a> </a>. (Das a steht für anchor.) Als Attribut href gibt man die Seite an, auf die man verweisen möchte. Zwischen <a> und </a> steht der Text, der durch Anklicken auf die entsprechende Seite führen soll. Das klingt zunächst etwas kniffelig, aber ein Beispiel macht es klarer:
Hier sehen wir das Resultat. Zur Probe kannst Du die Links tatsächlich anklicken!
Hier kannst Du dieses Beispiel im Browser vollständig anzeigen lassen!
Übungsaufgabe
Erstelle eine HTML-Seite mit zwei Links. Der erste Link soll zu einer anderen Deiner Seiten aus den Übungsaufgaben führen. Der zweite Link soll zu Moodle führen.
Links in neuem Tab/Fenster öffnen lassen
Manchmal möchten wir vielleicht, dass eine verlinkte Seite automatisch in einem neuen Tab oder Fenster geöffnet wird. (Ob es letzlich ein Tab oder Fenster sein wird, hängt von den Browsereinstellungen ab.) Dies sollten wir immer machen, wenn wir auf eine fremde Seite verlinken. So stellen wir sicher, dass ein Besucher weiterhin auch auf unserer Website bleibt. Wir erreichen dies durch die zusätzliche Angabe des Attributs target="_blank".
In diesem Beispiel wird die Seite des Ceci in einem neuem Tab geöffnet:
Darstellung im Browser:
Hier kannst Du dieses Beispiel im Browser vollständig anzeigen lassen!
Übungsaufgabe
Modifiziere Deine Links aus der letzten Aufgabe so, dass Moodle in einem neuem Tab geöffnet wirds.
Vertiefung: Auf Dateien eines anderen Ordners verlinken
Bei besonders großen Projekten kann es vorkommen, dass die HTML-Dateien in verschiedene Ordner aufgeteilt werden, damit man nicht den Überblick verliert. Für solche Fälle müssen wir wissen, wie wir auf eine Seite in einem anderen verlinken.
Vergleichsweise einfach ist der Fall, in dem wir auf eine Datei verweisen, die sich in einem Unterorder des Ordners befindet, in der sich die gerade aktuelle Datei befindet. Angenommen, die HTML-Datei, die wir gerade bearbeiten, befindet sich im Ordner HTML/ und wir möchten auf die Datei Beispiel01.html verlinken, die sich im Unterordner HTML/Beispiele/ befindet. (D.h. Beispiele/ ist im Ordner HTML/ enthalten.) Dann müssen wir dies durch href="/Beispiele/Beispiel01.html" angeben.
Nun könnte es auch sein, dass wir auf eine Datei verlinken wollen, sie sich im Oberordner befindet. Möchten wir etwa in der Datei Beispiele01.html im Ordner HTML/Beispiele/ auf die Datei Uebersicht.html im Ordner HTML/ verlinken, so müssen wir den Wechsel in den übergeordneten Ordner durch zwei Punkte angeben: href="../Uebersicht.html"
Der vielleicht kniffeligste Fall ist der, in dem wir auf einen anderen Unterordner des übergeordneten Ordners verweisen wollen, d.h., wir müssen zunächst in den Oberordner wechseln und von dort in einen anderen Unterordner. Nehmen wir an, wir wollen in der Datei Beispiele01.html im Ordner HTML/Beispiele/ auf die Datei Uebung01.html im Ordner HTML/Uebungen/ verlinken. Dann brauchen wir diese Angabe: href="../Uebungen/Uebung01.html"
Man kann übrigens nicht nur auf HTML-Dateien, sondern beispielsweise auch auf ein Bild verlinken. Dies könnte etwa in einer Fotogallerie interessant sein.
Hier sehen wir zwei Beispiele:
Hier können wir sie testen:
Hier kannst Du dieses Beispiel im Browser vollständig anzeigen lassen!
Übungsaufgabe
Analysiere die beiden Links aus dem letzten Beispiel im Hinblick darauf, wo sich die verlinkten Dateien aus Sicht der hier dargestellten HTML-Datei befinden.
Zusatzaufgabe
Erstelle in einem neuem Ordner eine HTML-Datei von der aus Du auf eine Deiner alten Seiten verlinkst.