HTML Erste Schritte – Lektion 4 – Links (Hyperlinks)
Wir sind bei den Grundlagen von HTML angekommen, nämlich bei den Hyperlinks (oder einfach Links). Links sind eine Methode, um Verbindungen zwischen verschiedenen Inhalten herzustellen. Angenommen, Sie haben 100.000 Textdateien. Würden Sie dafür ein Inhaltsverzeichnis erstellen, und in jedem Inhaltsverzeichnis stünden 200 Beschreibungen, bräuchten Sie 500 Inhaltsverzeichnisse. Um alle 500 Inhaltsverzeichnisse durchzusehen und die gewünschte Information zu finden, würde viel Zeit vergehen. Wie machen Links unser Leben einfacher?
Links verbinden zwei HTML-Dokumente beliebig miteinander, wobei jedes HTML-Dokument einen eindeutigen Namen besitzt. Somit kann man von einem Dokument zu zehn weiteren verwandten, beliebten Dokumenten wechseln, was die Chancen erhöht, die gesuchten Informationen zu finden.
Das gleiche Prinzip gilt für Websites. Webseiten haben eindeutige Namen, URLs (Uniform Resource Locator – einheitlicher Ressourcen-Lokator). Einzigartige Seitennamen, auf die wir verlinken wollen, schreiben wir in das <a></a>-Tag. Allgemein sieht der Code so aus:
<a href="einzigartiger_pfad">Linktext</a>
In diesem Code ist href ein Attribut des A-Tags. Was Attribute sind, haben wir bereits in der vorherigen Lektion behandelt. Erstellen wir nun eine weitere Datei im gleichen Ordner, in dem sich index.html befindet. Nennen wir sie file.html und geben folgenden Code ein:
<html>
<head>
<title>Mein zweites HTML-Dokument</title>
</head>
<body>
<h1>Mein zweites HTML-Dokument</h1>
</body>
</html>
Und in index.html schreiben wir folgenden Code:
<html>
<head>
<title>Mein erstes HTML-Dokument</title>
</head>
<body>
<h1>Mein erstes HTML-Dokument</h1>
<p>
<a href="file.html">Link zum zweiten Dokument</a>
</p>
</body>
</html>
Wenn Sie nun index.html im Browser öffnen, sehen Sie einen Link, der auf file.html verweist. Üben wir das Schreiben von Pfaden. Wenn beide Dateien im selben Ordner liegen, schreiben wir einfach den Dateinamen ins href-Attribut, und der Browser versteht, dass sich die Datei im gleichen Ordner befindet. Aber was, wenn wir die Dateien nicht im gleichen Ordner speichern wollen? Dann helfen relative Pfade.
Relative Pfade
Relative Pfade heißen so, weil der Pfad relativ zur aktuellen Datei bestimmt wird. Erstellen wir einen Ordner files im Verzeichnis von index.html. Verschieben wir file.html in diesen Ordner. Nun kann der Browser den Link aus index.html nicht mehr finden, weil sich die Datei verschoben hat.
Jetzt schreiben wir den Pfad relativ zu index.html. Um einen Ordner anzugeben, benutzen wir den Schrägstrich /. Zum Beispiel:
/Program Files/MSOffice/
Der Pfad zum Ordner files relativ zu index.html lautet:
./files/
Fügen wir den Dateinamen an:
./files/file.html
Jetzt ändern wir den Pfad im index.html wie folgt:
<html>
<head>
<title>Mein erstes HTML-Dokument</title>
</head>
<body>
<h1>Mein erstes HTML-Dokument</h1>
<p>
<a href="./files/file.html">Link zum zweiten Dokument</a>
</p>
</body>
</html>
Speichern Sie index.html und laden Sie die Seite im Browser neu (die Seite index.html muss geöffnet sein). Der Link zu file.html funktioniert wieder. Beachten Sie auch, dass Sie schreiben können:
<a href="files/file.html">Link zum zweiten Dokument</a>
Der Browser versteht den Link auch ohne ./ . Wenn Sie jedoch schreiben:
<a href="/files/file.html">Link zum zweiten Dokument</a>
ist das kein korrekter Pfad, da dieser absolut angegeben ist, nicht relativ zu index.html. Für relative Pfade verwenden Sie also ./ oder beginnen Sie direkt mit dem Pfad.
Nun machen wir einen Rücklink von file.html zu index.html. Beginnen wir mit der Angabe, dass der Pfad relativ ist:
./
Wir müssen angeben, dass die Datei eine Ebene höher liegt, also aus dem Ordner files heraus. Dafür benutzen wir ../ (zwei Punkte gefolgt von einem Schrägstrich).
./../
Wäre in files noch ein weiterer Unterordner mit einer HTML-Datei, wäre der Pfad aus dieser Datei ./../../ (für jede Ebene ../).
Fügen wir den Dateinamen index.html an:
./../index.html
Wir fügen den Pfad in file.html ein:
<html>
<head>
<title>Mein zweites HTML-Dokument</title>
</head>
<body>
<h1>Mein zweites HTML-Dokument</h1>
<p>
<a href="./../index.html">Link zum ersten Dokument</a>
</p>
</body>
</html>
Sie können jetzt zwischen den Seiten hin- und herwechseln. Beobachten Sie, wie sich die URLs im Browser ändern.
Kehren wir nun zu den Pfaden zurück, die mit einem Schrägstrich beginnen, aber ohne Punkt. Das sind absolute Pfade.
Absolute Pfade
Absolute Pfade werden im Internet verwendet. Zum Beispiel werden in Drupal alle Seiten aus der Datei index.php geladen. Wenn wir / schreiben, bezieht sich das auf index.php. Wird der absolute Pfad lokal auf Ihrem Rechner in index.html verwendet, beginnt er im Wurzelverzeichnis Ihres Laufwerks. Auf Websites sind absolute Pfade praktisch, weil relative Pfade bei Verschiebung von Dateien oder Ordnern kaputtgehen können, während absolute Pfade unverändert bleiben.
Absolute Pfade beginnen mit / oder mit dem Domainnamen, z.B. https://drupalbook.org/ru/. Browser erkennen beides als absolute Pfade. Beispiele für absolute Pfade:
/index.html
/files/file.html
/files2/file2.html
Um von index.html und file.html auf file2.html zu verlinken, ist der Link gleich, auch wenn sich die Dateien in unterschiedlichen Ordnern befinden:
<a href="/files2/file2.html">Link</a>
Dieser Link funktioniert sowohl in index.html als auch in file.html und kann auch innerhalb von file2.html verwendet werden, um auf sich selbst zu verweisen.
Attribut target
Das target-Attribut ist wichtig, wenn ein Link auf eine andere Website führt. Es legt fest, wie der Link geöffnet wird:
_blank – in neuem Fenster oder Tab;
_self – im gleichen Fenster (Standard);
_parent – im übergeordneten Frame (Frames sind veraltet, AJAX ist moderner);
_top – hebt alle Frames auf und öffnet die Seite im gesamten Browserfenster (ohne Frames wirkt wie _self).
Meistens wird _blank verwendet, da _self Standard ist und oft nicht angegeben wird.
<a href="/files2/file2.html" target="_blank">Link</a>
Attribut rel
Das rel-Attribut beschreibt die Beziehung (relation) zwischen dem aktuellen Dokument und dem verlinkten Dokument. Am häufigsten wird rel="nofollow" verwendet, um Suchmaschinen wie Google oder Yandex anzuweisen, diesen Link nicht zu indexieren. Zum Beispiel bei externen Links ist es sinnvoll, rel="nofollow" und target="_blank" zu setzen.
<a href="/files2/file2.html" target="_blank" rel="nofollow">Link</a>