6. HyperlinksLinks sind der wichtigste Bestandteil des Internets. Mit ihnen kommen wir von Seite zu Seite und machen das „WorldWideWeb“ zu dem, was es ist.
Hyperlinks können zu internen Seiten, externen Seiten, eMail-Adressen sowie Dokumenten (also Bilder, PDFs usw.) verweisen.
Der grundsätzliche
Aufbau eines Links ist wie folgt:
- Code:
-
<a href=“Linkziel“>Linktext</a>
Als Linktext kann natürlich jeder beliebige Text verwendet werden, Bilder können auch verlinkt werden. Bei “Linkziel“ wird der Pfad oder die URL des verlinkten Dokumentes angegeben.
Man unterscheidet hierbei zwischen
absoluten und relativen Pfaden.
Absolute Pfade beinhalten die komplette URL, z.B.:
- Code:
-
http://www.otaku-welt.de/homepage-hilfe/tipps-tricks.html
Ein
relativer Pfad ist wie folgt aufgebaut und ist abhängig vom Ausgangsdokument:
- Code:
-
homepage-hilfe/tipps-tricks.html
Ich denke die absoluten Pfade sind eindeutig, auf die relativen werde ich noch etwas genauer eingehen. Zu diesem Zweck habe ich hier mal einen Ausschnitt meiner Dateistruktur skizziert.
Man erkennt in er ersten Ebene den Ordner „homepage-hilfe“ sowie die Datei „homepage-hilfe.html“. In der zweiten Ebene, im oben genannten Ordner befinden sich die Dateien „favicon.html“, „favicon.jpg“, „meta-tags.html“ usw.
Wird eine Datei mit einem Dokument verlinkt, das sich in der gleichen Ebene/im
gleichen Ordner befindet, muss nur der Dateiname als Linkziel angegeben werden:
- Code:
-
<a href=“favicon.html“>Linktext</a>
Möchte ich von der Seite homepage-hilfe.html auf favicon.html verlinken (also
in einen Ordner), so muss der relative Pfad so aussehen:
- Code:
-
<a href=“homepage-hilfe/favicon.html“>Linktext</a>
Damit ruft der Browser den Ordner „homepage-hilfe“ auf und sucht sich dort die Datei raus.
Wenn nun die Seite homepage-hilfe.html von der Datei favicon.html verlinkt werden soll (also
in einen Überordner), sieht der relative Pfad so aus:
- Code:
-
<a href=“../homepage-hilfe.html“>Linktext</a>
../ ist die Anweisung, in den darüberliegenden Ordner (in unserem Fall also die oberste Ebene) zu springen und dort die Datei aufzurufen. Sollte sich das Dokument mehrere Ordner über der Ausgangsdatei befinden, kann man das ../ natürlich auch mehrmals hintereinander schreiben – für jeden Ordner ein mal:
../../../ wären also 3 Ordner.
WYSIWYG-Editoren editieren diese relativen Pfadangaben automatisch.
Auf meiner Beispielseite habe ich mal das Wort „Ausbildung“ beispielhaft mit dem Wikipedia-Artikel verlinkt:
Natürlich kann man auch festlegen,
wie und wo der Link geöffnet wird. Dazu gibt’s das Attribut
Target. Folgende Werte können zugewiesen werden:
_blank -> Verweis öffnet sich im neuen Fenster
_self -> Verweis öffnet sich im aktuellen Fenster (Standardeinstellung)
_parent -> Verweis öffnet sich bei Framesets im darüber liegenden Fenster
_top -> Verweis öffnet sich bei Framesets im obersten Fenster
Soll ein Link also in einem neuen Fenster geöffnet werden, sieht das Ganze so aus:
- Code:
-
<a href=“Linkziel“ target=“_blank“>Linktext</a>
Zusätzlich zu den „normalen“ Links, gibt es 2 interessante und hilfreiche Arten von Links:
eMaillinks sowie
Links innerhalb einer HTML-Seite
.
Ergänzt man die href-Anweisung um ein
mailto, wird aus dem Link eine Verknüpfung mit einer
eMail-Adresse. Wenn dieser geklickt wird, öffnet sich das eMail-Programm des Nutzers - z.B. Outlook oder Thunderbild - und es kann eine eMail verfasst werden.
Ein eMail-Link sieht also so aus:
- Code:
-
<a href=“mailto:name@provider.de“>eMail senden</a>
Dieser Link kann erweitert und ein Betreff vorgegeben werden:
- Code:
-
<a href=“mailto:name@provider.de?subject=Betreff“>eMail senden</a>
Innerhalb einer HTML-Seite können sogenannte
Anker definiert und aufgerufen werden. So kann schnell z.B. zurück zum Anfang einer Seite „gesprungen“ werden.
An jeder beliebigen Stelle der Seite kann ein Anker gesetzt werden:
- Code:
-
<a name=“name_des_ankers“></a>
Wird dieser Tag direkt unter das <body> geschrieben, „springt“ man durch den Link ohne die Seite neu laden zu müssen direkt zurück an den oberen Rand der Seite.
Der Link, um zum Anker zu springen sieht dann so aus:
- Code:
-
<a href=“#name_des_ankers“>Linktext</a>
Der Name eines Ankers kann natürlich frei vergeben werden. Jedoch sollte auf Großschreibung, Umlaute, Sonder- sowie Leerzeichen verzichtet werden. Vergebt logische Ankernamen, da sie bei Klick in der Adressleiste des Browser angezeigt werden (also kein Schmuddelkram
).
~~~
So, Teil 6 ist geschafft
Aufmerksame Kursteilnehmer haben vielleicht festgestellt, dass ich nicht wie geplant "Listen & Aufzählungen" durchgenommen habe. Das kommt dann aber im nächsten Teil dran
Wer Fragen hat, kann die ganz einfach hier im Forum (einfach auf "antworten" klicken, auch als Gast) loswerden oder mir eine eMail schicken.
Startseite Otaku-Welt.de 
