Webdesign-Workshop
von Wolfgang Bergt

Wolfdesign

Links und Anker

zur Startseite
zurück Inhaltsübersicht weiter

 

Inhalt

Was sind Links?
Aussehen
Links als Text
Links aus Bild und Text
Links innerhalb einer Seite
interne Links
externe Links
Sprungziel
Link-Validatoren
Zusammenfassung
Quellen
 

Was sind Links?

Links, insbesonder Hyperlinks, sind das wichtigste an HTML. Links sind Querverweise auf Folgeseiten.

Die Leistungsfähigkeit von Hypertext kommt dadurch zustande, dass man nicht schreiben muss: "siehe Seite soundso", sondern dass der Leser mit einem Mausklick dort hin und auch wieder zurück (!) springen kann.

Die Verbindungen zu anderen Textstellen und vor allem auch anderen Dokumenten heißen Links. Hypertext wird vor allem, aber nicht nur, im WWW genutzt. Ein Link wird prinzipiell mit dem HTML-Tag <a href="..."> eingeleitet und mit </a> abgeschlossen.

zum Anfang

Aussehen

Normalerweise erkennt man einen Link daran, dass der Mauszeiger im Browser zu einer mit dem Finger zeigenden Hand wird. Die Stellen auf dem Bildschirm sind üblicherweise leicht zu erkennen. Im Text ist meist das Wort oder der Textteil andersfarbig und unterstrichen dargestellt. Da sich viele Anwender darauf verlassen, sollte man deshalb bei der Textformatierung auf das Unterstreichen verzichten, wenn dort kein Link vorgesehen ist.

zum Anfang

Links als Text

Folgender Textteil ist ein Hyperlink zu einer Datei im selben Ordner: Grundlagen

Der Quelltext dazu sieht so aus:
<a href="grund.htm">Grundlagen</a>

Zwischen den beiden Teilen des a-Tags steht steht der Textteil, der als Link wirken soll. Mit dem Attribut href=" " wird die anzuzeigende Datei angegeben.

Liegt die Datei nicht im selben Ordner, dann muss der richtige Pfad angegeben werden. Eine Ordnerebene zurück kommt man mit ../. Hier ein Beispiel: Zusammenfassung

Der Quelltext dazu sieht dann so aus:
<a href="../checks/lk-check.htm">Zusammenfassung</a>

zum Anfang

Links aus Bild und Text

Als Link muss man nicht immer nur Textteile benutzen. Man kann auch eine Grafik zwischen den beiden Teilen des a-Tags aufrufen:

Link als Grafik
Auch das Bild ist ein Link.

Der Quelltext dazu sieht so aus:
<a href="lk-check.htm"><img src="../beispiele/formate/rostock.jpg" border="0" width="200" height="150" alt="Link als Grafik" /><br />Auch das Bild ist ein Link.</a>

Wenn man im Quelltext zwischen dem img-Tag und dem folgenden Text oder auch nur vor dem </a> einen Zeilenumbruch einfügt, kann es zu einem hässlichen unvermittelten Strich neben der Grafik kommen. Das Attribut border="0" sorgt dafür, dass kein farbiger Rand erscheint, der möglicherweise nicht zu der Grafik passt.

zum Anfang

Links innerhalb einer Seite

Man kann in eine Seite Anker mit dem a-Tag einfügen. Hier wirkt z. B der Anker <a name="Anker"> </a>
Nun kann man genau hier hin springen und nicht nur an den Anfang der Datei. Dazu ergänzt man hinter dem Dateinamen nach einer Raute den Namen des Ankers (wenn es nicht sogar wie in folgendem Beispiel um die selbe Datei geht):

Springe zum Anker namens Anker!
Springe zum Anker namens Bild in dieser Datei!

Der Quelltext dazu sieht so aus:
<a href="link.htm#Anker">Springe zum Anker namens Anker!</a>
<br /><a href="#Bild">Springe zum Anker namens Bild in dieser Datei!</a>


zum Anfang

interne Links

Ich empfehle, dass man alle Dateien, die zu einer WebSite gehören - auch die Grafiken -, gemeinsam auf einem Datenträger speichert. Dann funktionieren alle Links in gleicher Weise, auch wenn man die Site auf die Festplatte, auf eine CD oder auf den Internet-Server gelegt hat.

Um das zu garantieren, sollte man alle Links nur mit relativen Pfadangaben versehen, also keinesfalls Laufwerksnamen und ähnliches benutzen.

zum Anfang

externe Links

Für externe Links gibt man die Dateipfade absolut an. Hinzu kommt noch, dass auch das Protokoll genannt werden muss, mit dem der Link funktionieren soll.

Link zu einer Quelle auf einer Festplatte:
<a href="file///C:/websites/beispiel/link.htm">Hyperlink</a>

Link zu einer Quelle im Internet:
<a href="http//:www.bergt.de">Hyperlink</a>

Link für einen e-Mail-Aufruf:
<a href="mailto:bergt-seminar@gmx.de">Hyperlink</a>

zum Anfang

Sprungziel

Mit dem Attribut target="Sprungziel" wird das Sprungziel genannt. Das ist z. B. unbedingt notwendig, wenn das Fenster in Frames unterteilt ist und die HTML-Seite nicht in dem selben Frame erscheinen soll.

Mit dem Attribut target="_blank" wird die Seite in einem neuen Fenster geöffnet, so dass der Besucher nicht ganz von unserer Seite weg geführt wird.

Mit dem Attribut target="extern" wird die Seite auch in einem neuen Fenster geöffnet, allerdings alle externen Seiten in dem selben, so dass nicht immer jeweils ein weiteres neues Fenster geöffnet wird.

zum Anfang

Link-Validatoren

Tote Links sind kein Ruhmesblatt für den Autor. Natürlich kann man Tippfehler machen, so dass der Link nicht funktioniert. Dann ist man selbst schuld. Aber man kann auch nicht garantieren, dass alle externen Links, die beim Erstellen der Seite noch in Ordnung waren, auch später noch aktiv sind.

Mit Hilfe von Link-Validatoren, die man kostenlos im Internet findet, kann man die Links überprüfen lassen.

zum Anfang

Zusammenfassung

Link-Checkliste

zum Anfang

Quellen



zum Seitenanfang zum Workshop-Anfang zur Inhaltsübersicht