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:
Ü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:
Ü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:
Ü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.