Hyperlinks

Hyperlinks, meistens einfach "Links" genannt, sind das, was dem Internet zum Erfolg verholfen hat. Alles was du bisher gelernt hast, könnte man (bis auf die animierten GIFs) auch auf Papier gedruckt realisieren. Bei Selfhtml hab ich die schöne und passende Formulierung gelesen, dass Hyperlinks der intelligente Mehrwert des World Wide Web sind. Stell dir vor, du liest etwas im Buch Namibiasite, Kapitel Photoshow, Seite 100 aus der Bibliothek www.friedels-home.de nach. Ausgerechnet bei dem Teil, der dich interessiert steht dann der Verweis "vergleiche auch Seite start, Kapitel cela im Buch tour von Alfred Topf, erhältlich in der Bibliothek www.natron.net. Dann weißt du zwar, dass es da ein Buch gibt wo du nachlesen kannst, du hast das Buch aber nicht und kommst nicht ohne weiteres an die Informationen. Im Internet ist das praktischer. Die Seite 100 ist eine HTML-Seite und die gesamte Quellenangabe ist eine URL. Sie lautet "http://www.friedels-home.de/Namibiasite/Photoshow/Fotoseiten/100.htm". Der Verweis könnte dann so aussehen: "Diese Bilder sind in der Pension Cela in Windhoek gemacht worden.". Wenn du jetzt auf Pension Cela klickst, siehst du die Stelle an der du weiter nachlesen kannst. Du brauchst also nicht in eine dir bisher unbekannte Bibliothek, brauchst nicht das entsprechende Buch zu suchen, brauchst nicht nach der Seite zu suchen, und auch nicht die Stelle auf der Seite, wo das gesuchte steht. Außerdem kann ich als Autor dieser Seite festlegen, ob du die neue Seite zusätzlich zu dieser, statt dieser oder eingebaut in diese sehen kannst.

Das Grundprinzip des Hyperlinks ist recht einfach und immer gleich:<a href="Ziel">angezeigter Text</a>. a steht dabei für anchor. Das ist englisch und heißt "Anker". href steht für hyper reference. hyper ist - nein, nicht englisch - griechisch und heißt "übermäßig" oder "mehr als". reference heißt natürlich "Referenz" (englisch). Die Unterschiede zwischen den verschiedenen Links bestehen also nur darin, wohin sie verweisen, wo das Ziel dargestellt werden soll, und in welchem Text der Link eingebaut ist. Es muss sich dabei übrigens nicht um einen Text handeln, es geht auch mit einem Bild oder einem Teil davon.

Angabe der Adresse

Die Adresse zu der gesprungen werden soll wird genau so gemacht, wie auch die Bilder referenziert werden. Du kannst den Pfad also auch hier relativ oder absolut angeben.

Textlink auf eine HTML-Seite

Beschäftigen wir uns zuerst mit dem einfachsten Fall, nämlich dass das Verweisziel eine HTML-Seite ist, es egal ist wo die Seite angezeigt wird und der Link in ganz normalem Text eingebaut werden soll.

So sieht der Quelltext aus:

Hier steht normaler Text.
<a href="http://www.friedels-home.de/index.html">
Hier gibt's Infos für Homepagebauer.
</a>

Hier steht normaler Text.

So sieht's im Browser aus:

Hier steht normaler Text. Hier gibt's Infos für Homepagebauer. Hier steht normaler Text.

Ich habe in den Link im Beispiel zusätzlich die Anweisung eingebaut, das Verweisziel in einem neuen Fenster zu öffnen, damit dieses Fenster offen bleibt.

Du siehst, dass der Hyperlink farblich hervor gehoben ist. Normalerweise ist der "normale" Text schwarz und der Hyperlink blau. Wenn du das Ziel schon besucht hast ist der Linktext violett. Normalerweise ist der Linktext unterstrichen. Außerdem verändert der Mauszeiger, wenn er sich über einem Link befindet, sein Aussehen. Die einzelnen Farben sind von der Einstellung der Browsers und von deinen Vorgaben abhängig. Über diese Vorgaben reden wir später. Du kannst natürlich die Schriftfarbe des Linktextes genau so verändern, wie es bei Zeichenformatierung beschrieben ist. Das ist aber nicht sinnvoll, weil sich dann dieser Link anders verhält als die anderen Links. Es ist wichtig, dass sich dein Besucher auf deiner Seite leicht zurecht findet und Links gleich als solche erkennt. Aus diesem Grund sollte man auch nie etwas unterstreichen wenn es kein Link ist. Man nennt unterstrichene Texte, die dadurch aussehen wie wenn sie Links enthalten würden, "Scheinlinks". Die Unterstreichung erfüllt seinen Zweck, nämlich die Übersichtlichkeit durch das Hervorheben des Textes zu erhöhen, meist nicht. Statt dessen wird der Besucher durch den Scheinlink irritiert. Zum Hervorheben des Textes gibt es andere Möglichkeiten, wie Fettdruck, kursiven Text, andere Schriftart, -farbe und/oder -größe.

Link mit Angabe des Darstellungsziels

Wie ich schon geschrieben habe, habe ich im Beispiel oben festgelegt, dass das Verweisziel in einem eigenen Fenster gezeigt werden soll. Das macht man so:

So sieht der Quelltext aus:

<a href="http://www.friedels-home.de/index.html" target="_blank">
Hier gibt's Infos für Homepagebauer.</a>

So sieht's im Dokument aus:

Hier gibt's Infos für Homepagebauer.

"target" ist englisch und heißt "Ziel". "blank" heißt "leer". Das Darstellungsziel wird immer in Anführungszeichen notiert. "_blank" ist dabei eine Zielbezeichnung, die geschützt ist. Das heißt, sie ist im HTML-Standard festgelegt. Sie öffnet immer ein neues Fenster für das Verweisziel. Statt "_blank" kannst du auch z.B. "ljgljffg" verwenden. Dann öffnet der Browser ein Fenster für das Verweisziel und nennt es "ljgljffg". Wenn dann ein weiterer Link das selbe Darstellungsziel angibt, wird die neue Seite wieder in diesem Fenster namens "ljgljffg" angezeigt wenn es noch offen ist.


<a href="html23/01.htm" target="ljgljffg">
Klicke diesen Link an, lass das Fenster im Hintergrund offen, hol den Kurs in den Vordergrund und mach im Kurs weiter.
</a>
Klicke diesen Link an, lass das Fenster im Hintergrund offen, hol den Kurs in den Vordergrund und mach im Kurs weiter.

Probier den Link im Beispiel aus. Lass das neue Fenster offen und hol dieses Fenster wieder in den Vordergrund.

Dann probier den Link im Beispiel unten aus. In dem Fenster, das im ersten Link für die Seite "html23/01.htm" geöffnet wurde, wird jetzt die Seite "html23/02.htm" angezeigt. Du kannst das Fenster "ljgljffg" jetzt wieder zu machen.

<a href="html23/02.htm" target="ljgljffg">
Wenn du hier klickst ändert sich der Inhalt des neuen Fensters.
</a>
Wenn du hier klickst ändert sich der Inhalt des neuen Fensters.

Sei also vorsichtig mit der Vergabe von Fensternamen. Wenn dein Besucher im Hintergrund schon ein Fenster mit dem selben Namen offen hat, wird dessen Inhalt durch deinen Link ersetzt. Man sollte Namen wie z.B. "neufenster" aus diesem Grund vermeiden. Du kannst davon ausgehen, dass dein Besucher das Fenster im Hintergrund offen hatte, weil er den alten Inhalt noch sehen wollte. Fensternamen sollten nur aus Ziffern, Buchstaben und dem Binde- und Unterstrich bestehen. Sie dürfen nicht mit einem Binde- oder Unterstrich anfangen.

Natürlich kann man die neue Seite auch statt der aktuellen anzeigen.

<a href="html23/03.htm" target="_self">
Wenn du hier klickst wird die neue Seite statt dieser angezeigt.
</a>
Wenn du hier klickst wird die neue Seite statt dieser angezeigt.

Da diese Seite in einem Frameset (was das ist erfährst du noch) angezeigt wird, wurde auch die neue Seite so angezeigt. Sie wurde ja statt dieser angezeigt. "self" ist englisch und heißt "selbst" oder "die selbe".

<a href="html23/04.htm" target="_top">
Wenn du hier klickst wird die neue Seite im ganzen Fenster angezeigt.
</a>
Wenn du hier klickst wird die neue Seite im ganzen Fenster angezeigt.

Natürlich ist es auch möglich, die neue Seite im ganzen Fenster an zu zeigen.

"top" heißt oben. Die neue Seite wird also in der obersten Instanz der aktuellen Anzeigehierarchie angezeigt. Das ist das ganze Browserfenster.

Es gibt noch mehr geschützte Zielbezeichnungen als "_blank", "_self" und "_top". Die werden aber nur im Zusammenhang mit Frames benutzt und werden deshalb auch dort erklärt.

Textlink auf eine Textmarke

Du hast bestimmt schon bemerkt, dass bei manchen Links nicht einfach die entsprechende Seite gezeigt wird, sondern eine bestimmte Stelle auf der Seite. Dazu ist es notwendig, dass das Sprungziel in der neuen Seite entsprechend markiert wurde und einen Namen hat, damit der Browser die Stelle aufrufen kann. So eine Markierung nennt man Textmarke.

Hier steht normaler Text.
<a name="Textmarkenname">Hier ist die Textmarke</a>.
Hier steht normaler Text.
Hier steht normaler Text. Hier ist die Textmarke. Hier steht normaler Text.

Wie du siehst, ist von der Textmarke nichts zu sehen.

<a href="html23/05.htm#xyz" target="_self">
Dieser Link führt zur Textmarke namens xyz auf der Seite html23/05.htm
</a>
Dieser Link führt zur Textmarke namens xyz auf der Seite html23/05.htm

Der Link muss dann auf diese Stelle verweisen. Ich habe extra eine ganze Seite bla bla geschrieben, damit du das ausprobieren kannst.

An das Verweisziel wird also einfach # und der Name der Textmarke angehängt. Vorsicht! Wenn der Name der Textmarke falsch (geschrieben) ist, wird die ganze Seite nicht angezeigt!

Link in einer Grafik

<a href="html23/04.htm" target="_self">
<img border="0" src="../../Bilder/1smile.gif" width="32" height="32">
</a>

Nicht nur Texte können Links enthalten. Was zwischen <a href="Ziel"> und </a> steht, wird in der Seite dargestellt.

Wie du siehst kann man Links, die in Bildern enthalten sind, nicht auf Anhieb erkennen. Man erkennt sie nur am veränderten Mauszeiger. Textlinks werden etwa 10 mal so oft angeklickt wie Links, die in Bildern enthalten sind! Das liegt nicht nur daran, dass sie normalerweise leichter als Link zu erkennen sind, sondern auch daran, dass sie im Gegensatz zu Bildern viel früher angezeigt werden und daran, dass sie meist mehr darüber aussagen, was den Besucher auf der neuen Seite erwartet.

Wenn du beim Bild nicht border="0" angibst, bekommt das Bild automatisch einen Rahmen in Linkfarbe. Das heißt blauer Rahmen bei unbesuchtem Link und violetter Rahmen bei besuchtem Link. Das hat zwar auch Vorteile, sieht aber oft nicht gut aus.

Besondere Links

Nicht immer ist das Ziel eines Links eine HTML-Seite oder eine Textmarke in einer HTML-Seite mit einer http-Adresse.

Link zu einer FTP-Adresse

FTP-Adressen unterscheiden sich von "normalen" http-Adressen zunächst dadurch, dass sie eben nicht nach dem Schema http://Domainname/Subdomainname/Verzeichnisname/Seitenname aufgebaut sind. Ein Beispiel für eine solche Adresse ist ftp://ftp.microsoft.com/. Das ftp:// verrät, dass das Ziel auf einem FTP-Server liegt. FTP steht dabei für File Transfer Protocol. Nicht alle Browser können auf diese Seite zugreifen. Wenn der Browser es kann, ist es trotzdem nur möglich, wenn man eine Berechtigung für diese Seiten hat oder wenn der Betreiber es so eingerichtet hat, dass man automatisch eine Gastberechtigung bekommt. Wenn die Adresse zu einem Verzeichnis führt (z.B. ftp://ftp.microsoft.com/) bekommt man den Inhalt des Verzeichnisses angezeigt, wie wenn das Verzeichnis auf dem eigenen Rechner liegen würde. Die enthaltenen Dateien kannst du nur downloaden oder öffnen. Auch HTML-Seiten, die dort liegen, werden normalerweise nicht automatisch angezeigt.

Link zu einer Gopher- oder Telnet-Adresse oder einer Newsgroup

Das werde ich hier nicht beschreiben. Das hat in einem HTML-Crashkurs nix zu suchen. Infos darüber findest du z.B. bei Selfhtml auf dieser Seite.

Link zu einer https-Adresse

Eine https-Adresse ist eine ganz normale http-Adresse, bei der die Datenübertragung vom Server zum Browser und umgekehrt verschlüsselt statt findet. Das wird z.B. beim Internetbanking oder bei Online-Kreditkartenzahlungen verwendet.

Weiter geht's mit Emaillinks.


Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: