Anime & Manga
Anime-ABC Eventkalender Haarfarben	Reviews Shopping-Guide Zeichenkurs

Japanisch
Aussprache Knigge Namensanhängsel	Rezepte Schriftsysteme Vokabeln

4 You
Awards Gewinnspiel GFX	Homepage Hilfe Site of the Month Tutorials

Fun
Fanfic & Fanart Fehlerbild	Nami Otaku Comic Zum Schmunzeln

Otaku-Welt.de
About Webmiss Awards 4 me Crew Kontakt	Link me Partner / werden? Updates Wie alles begann...

Tutorials – Webdesign

Farben | Listen & Aufzählungen

6. Hyperlinks

Links 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:

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

HTML-Code:

http://www.otaku-welt.de/homepage-hilfe/tipps-tricks.html

Ein relativer Pfad ist wie folgt aufgebaut und ist abhängig vom Ausgangsdokument:

HTML-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:

HTML-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:

HTML-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:

HTML-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:

HTML-Code:

<a href="Linkziel" target="_blank">Linktext</a>

Zusätzlich zu den "normalen" Links, gibt es 2 interessante und hilfreiche Arten von Links: eMail-Links 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:

HTML-Code:

<a href="mailto:name@provider.de">eMail senden</a>

Dieser Link kann erweitert und ein Betreff vorgegeben werden:

HTML-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:

HTML-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:

HTML-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 ;) ).

nach oben