HTML-HyperLinks

HyperLink ersetzt das aktuelle Dokument

◀   In den Rahmen links ist eine Mini-Webseite mit einem HyperLink eingebettet.
• Mit Klick auf den Link wird das aktuelle Dokument (die Demo-Seite) durch das angegebene Ziel ersetzt.
• Das Ziel ist in diesem Fall eine weitere Mini-Webseite, die entweder mit Klick oder automatisch nach 10 Sekunden zum (ersten) verweisenden Dokument zurückkehrt.

Mit Klick auf diesen Link wird die Demo-Webseite in ein eigenes Browser-Tab geladen.


Man kann einen HyperLink um fast jedes andere HTML-Objekt legen und mit Klick auf das Objekt die Funktion auslösen. Bedingung: Das eingeschlossene Objekt muss sichtbar sein, damit man es sehen und anklicken kann.
Beispiel:
<a href="hyperlink_ziel_1.html"> </a>
In diesem Fall wurde ein HyperLink mit dem gleichen VerweisZiel um ein <img>-Element (Bild) gelegt.

HyperLink öffnet ein neues Browser-Tab

◀   In diesen Rahmen ist eine Mini-Webseite mit einem HyperLink eingebettet.
• Mit Klick auf den Link bleibt das aktuelle Dokument (die Demo-Seite) geladen, der Browser öffnet das angegebene Ziel - je nach Einstellung - in einem neuen Tab oder Fenster.
• Das Ziel ist in diesem Fall eine weitere Mini-Webseite, die sich entweder mit Klick oder automatisch nach 10 Sekunden selbst schließt.

Mit Klick auf diesen Link wird die Demo-Webseite in ein eigenes Browser-Tab geladen.


Verwenden sie diese Version (nur dann), wenn sie glauben, dass die BesucherInnen die aktuelle Webseite nicht verlassen wollen und mit dem Link lediglich zusätzliche Informationen sehen wollen.

In diesem Web erhalten Links auf andere Seiten des gleichen Webs kein target-Attribut oder (gleichbedeutend) das Attribut target="_self"
Solche Links werden mit einem → Pfeil bezeichnet, z.B. → HTML.

Links, die auf externe Webseiten führen, erhalten hier meist das Attribut target="_blank", z.B. zum Thema HyperLinks (Wikipedia)

HyperLink steuert einen Rahmen

◀   In den Rahmen links ist eine Mini-Webseite eingebettet.

• Die Demo-Links befinden sich in diesem Beispiel hier auf der parent-Webseite:
• Mit Klick auf einen der Links wird der Inhalt des <iframe>-Elements (Innenrahmen) ausgetauscht. In den 3 Mini-Webseiten sind ebenfalls Links enthalten, die man alternativ zum Austausch verwenden kann.


So sieht der HTML-Quelltext für einen HyperLink auf übergeordneten parent-Webseite aus:
<a href="hyperlink_b.html" target="if3"> </a>
Das HTML <a>-Element erhält im target-Attribut den Namen des <iframe>-Elements.

HyperLink zu einem ⚓ Anker

Navigation zu einem Anker:
So sieht der HTML-Quelltext für einen HyperLink zu einem Anker auf der gleichen Webseite aus:
<a href="#top">Anfang</a>
Der Wert des href-Attributs beginnt mit einem #-Zeichen, danach folgt der genaue Name des Ankers.

Der HyperLink zum Ende dieser Seite sieht ähnlich aus:
<a href="#bot">Ende</a>

Auf allen Seiten dieses Webs sind rechts neben dem Anfang jedes Kapitels Links zum Seiten-Anfang angebracht. Das sind zahlreiche praktische Beispiele zu diesem Thema. Die Dreiecke werden mit dem → Unicode-Zeichen U+25B2 erzeugt.

Ein HyperLink kann auch zu einem Anker auf einer anderen Webseite führen. Dazu trägt man in das href-Attribut den Pfad ein, gefolgt vom Anker. Beispiel:
<a href="demo.html#bot">
Zum Ende der Seite HTML-Übersicht
</a>

HyperLink startet Javascript

◀   In den Rahmen links ist eine Mini-Webseite eingebettet.

• Mit Klick auf den Link wird die als VerweisZiel angegebene → Javascript-Funktion gestartet.
• Die Funktion öffnet in diesem einfachen Fall ein kleines Alarm-Fenster.
• Der Quelltext der Javascript-Funktion ist in einem <script>-Element in der Mini-Webseite enthalten.

Mit Klick auf diesen Link wird die Demo-Webseite in ein eigenes Browser-Tab geladen.
Mit Klick auf diesen Link wird die Javascript-Funktion der eingebetten Mini-Webseite von hier (dem parent-Dokument) gestartet.


So sieht der HTML-Quelltext jenes HTML-HyperLinks aus, welcher die Javascript-Funktion startet:
<a href="javascript:hallo()"> </a>
Das Verweis-Ziel muss mit javascript: beginnen und danach den genauen Namen der Funktion angeben. Die folgenden runden Klammern sind obligatorisch: Sie bleiben leer oder können Argumente enthalten und damit Daten an die Funktion übergeben.

Eine Alternative zum Starten von → Javascript-Programmen bietet das onclick-Attribut. Man kann es an fast alle HTML-Elemente binden.

HyperLink 'Zurück'

Zurück

Die Programmiersprache → Javascript bietet die Möglichkeit, einen 'echten' Zurück-Link einzurichten. Im Objekt history werden alle vom Browser besuchten Web-Adressen gespeichert.
Je nach Einstellung des Browsers wird die history-Liste wieder gelöscht, z.B. (empfohlen) beim Schließen des Browser-Programms oder manuell zu jeder beliebigen Zeit.

• Javascript bietet die Methode history.back(), welche das aktuelle Dokument durch das unmittelbar zuvor besuchte ersetzt. Das ist sinnvoll, denn damit arbeitet auch der Zurück-Button des Browsers.
Man kann damit einen echten Zurück-Link programmieren
<a href="javascript:history.back()">Zur&uuml;ck</a>
und bei dieser Gelegenheit auch gleich den → Umlaut sauber codieren.

• Das ↑ erste Beispiel dieser Seite zeigt eine praktische Anwendung: Wenn man den Demo-Link anklickt, dann wird die angegebene Ziel-Seite geladen. Diese wendet nach 10 Sekunden die Methode history.back() an: Damit wird wieder die anfängliche Demo-Webseite geladen.

Browser-Programme bieten Möglichkeiten zur Änderung des Verhaltens beim Anklicken von Hyperlinks. Wenn ihr Browser bei einem der hier vorgestellten Beispiel nicht das erwartete Verhalten zeigt, dann kann man das meist durch geeignete Konfiguration ändern.

Hyperlink-Formatierung mit CSS

Mit → CSS-Technologie kann man das Aussehen von Links auf mehreren Ebenen programmieren:
• Ohne besondere Maßnahmen gelten die in der Konfiguration jedes Browsers festgelegten Regeln.
Mit einer zentralen StyleSheet-Datei kann man das Aussehen aller Links auf allen Seiten eines Webs festlegen.
Diese Methode ist zu bevorzugen.
In einem HTML <style>-Element kann man die Regeln für alle Links einer einzelnen Webseite festlegen.
Mit einem style-Attribut kann man das Aussehen jedes einzelnen Links ändern. Das sollte man möglichst vermeiden.
Details zur → Reichweite von CSS-Regeln



Je nach Browser werden Links unter bestimmten Bedingungen anders dargestellt, z.B. beim Überfahren (hover), beim Anklicken (active) oder nach dem Besuch des Verweis-Ziels (visited):



In diesem Web werden HyperLinks (HTML <a>-Elemente) mit 2 Regeln formatiert:
a{color:#00F; text-decoration:none;}
a:hover{color:#F00;}
Die CSS-Eigenschaft color erhält für alle Browser den Wert #00F ( Blau), die Unterstreichung text-decoration wird abgeschaltet.
Beim Überfahren eines Links wechselt die Text-Farbe auf #F00 ( Rot)

Details zu → Farben in CSS

Hyperlink--Icons


So werden verschiedene HyperLink-Typen in diesem Web dargestellt:
↑↓ Zu anderen Kapiteln auf der gleichen Webseite
→ Zu anderen Seiten des gleichen Webs
Zu Seiten anderer Webs



Zum Anlegen einer neuen Wiki-Seite muss man sich je nach Wiki anmelden (ausweisen) So wird die neue Wiki-Seite hergestellt:
Man legt einen Link an und gibt als Ziel eine noch nicht existierende Seite an. Dieser Link wird in roter Farbe angezeigt.
Mit Klick auf den roten Link wird die neue Seite automatisch erzeugt und man kann sie mit Inhalt füllen.
Sobald die neue Seite gespeichert ist, wird der Link dorthin in blauer Farbe angezeigt.



Symbol-Zeichen haben viele Vorteile:
Sie brauchen viel weniger Speicherplatz und Übertragungs-Zeit als Grafik-Dateien.
Man kann sie wie jedes andere Text-Zeichen formatieren und z.B. Größe oder Farbe mit CSS-Methoden einstellen:


Wenn man - was sinnvoll ist - das gleiche Icon mehrfach (z.B. für alle externen Links) verwendet, dann spielt die Datei-Größe eine untergeordnete Rolle: Die Grafik wird nur 1mal vom Webserver geladen und danach aus dem lokalen (Cache)-Speicher am eigenen PC verwendet.

Jede Grafik, die in den Fließtext eingebettet wird, sollte zur jeweiligen Schrift-Größe passen. Andernfalls wird jede Zeile, welche das Icon enthält, mit größerem Abstand angezeigt. Das hier verwendete Icon passt mit 10x10 Pixel Größe in jeden Text.

Details zur Verwendung von → Grafik in HTML und von 'mitfließenden' → Icons im Text.


Man verwendet ein Geschütztes Leerzeichen (Non-breakable space) zur Trennung von Symbol-Zeichen und Text, z.B.
Hier&nbsp;keine&nbsp;Trennung
Das funktioniert für Unicode-Symbole, nicht jedoch für Grafik-Icons.

Die CSS-Anweisung white-space:nowrap; unterbindet den Zeilen-Umbruch auch zwischen einer Grafik und einem Text:
<a href="ziel.html" style="white-space:nowrap;">
<img src="icon.png" /> Text
</a>

Verwenden sie diese CSS-Anweisung niemals (!) für einen längeren Text, sondern am besten nur zum Schutz eines einzigen Leerzeichens.