|
|
|
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://
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.
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.
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:
| |
So sieht's im Browser aus:
|
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.
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:
| |
So sieht's im Dokument aus:
|
"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.
So sieht der Quelltext aus:
| |
So sieht's im Dokument aus:
|
Probier den Link im Beispiel links aus. Lass das neue Fenster offen und hol dieses Fenster wieder in den
Vordergrund.
So sieht der Quelltext aus:
| |
So sieht's im Dokument aus:
|
Dann probier den Link im Beispiel rechts 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.
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.
So sieht der Quelltext aus:
| |
So sieht's im Dokument aus:
|
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".
So sieht der Quelltext aus:
| |
So sieht's im Dokument aus:
|
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.
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.
So sieht der Quelltext aus:
| |
So sieht's im Dokument aus:
|
Wie du siehst, ist von der Textmarke nichts zu sehen.
So sieht der Quelltext aus:
| |
So sieht's im Dokument aus:
|
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!
So sieht der Quelltext aus:
| |
So sieht's im Dokument aus:
|
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.
Nicht immer ist das Ziel eines Links eine HTML-Seite oder eine Textmarke in einer HTML-Seite mit einer http-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.
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.
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: