HTML - Elemente - Links
1. Aufbau
Alle Links haben einen einheitlichen Aufbau: [Link [Zielfenster]] [Inhalt] [Linkende]. Die Syntax sieht
prinzipiell so aus:
<a href="[link]" target="[_xxx]">Linkinhalt</a>
Das <a ...> teilt dem Browser mit, dass nun ein Link beginnt. Mit dem Attribut href geben wir den
Pfad zum Sprungziel an, mit target sagen wir dem Browser, wo er diese neue Seite öffnen soll, der Linkinhalt, ist
letztendlich das, worauf man klicken muss, um dorthin zu gelangen und das </a> sagt dem Browser, dass der
Link nun zu Ende ist.
2. href
Diese Attribut (hypertext reference) macht aus einem Verweis erst einen richtigen Link. Es gibt dabei drei Möglichkeiten. Man setzt absolute bzw. relative Pfade oder einen Link auf eine Stelle innerhalb einer HTML-Seite. Normalerweise sieht das dann so aus:
<a href="meine_seite.htm">Meins</a>
<a href="http://www.deins.de/deine_seite.htm">Deins</a>
Anstelle eines Textes kann man auch ein Bild einbauen. Dazu setzt man einfach das <img>-Tag zwischen das
<a>-Tag:
<a href="blabla.htm">
<img src="blabla.gif" width="40" height="20" alt="blabla">
</a>
Leider hat das Bild dann einen hässlichen blauen Rahmen, aber keine Sorge, den bekommen wir spielend leicht weg, und zwar mit CSS, also später.
3. Sprungmarken
Nehmen wir mal an, wir haben einen sehr sehr langen Textblock, bei dem man sehr sehr viel scrollen muss. Diesen Block teilt man nun in
kleine Häppchen auf und am Anfang eines jeden Absatzes setzt man eine Sprungmarke. Das geschieht mit dem Attribut name.
<a name="marke_1">Titel von Absatz 1</a>
... Text von Absatz 1 ...
<a name="marke_2">Titel von Absatz 2</a>
... Text von Absatz 2 ...
Nun kann man innerhalb dieses langen Dokuments Links auf die einzelnen Sprungmarken setzen und zwar folgendermaßen.
<a href="#marke_1">Hier springe ich zu Absatz 1</a>
Außerdem funktioniert das auch bei Verlinkungen von anderen Seiten aus.
<a href="meine_seite.htm#marke_1">Meins</a>
Wichtig ist der Lattenzaun vor dem Zielnamen. Will man einfach einen Link "nach oben" setzen reicht ein
<a href="#">nach oben</a>
völlig aus.
Natürlich kann man eine Sprungmarke auch "unsichtbar" machen. Dafür muss man zwischen dem <a>-Tag
einfach keinen Inhalt einbauen.
<a name="marke_1"></a>
Ein wichtiger Hinweis
Mittlerweile sollte man nicht mehr mit name arbeiten, sondern mit id. Das funktioniert genau so gut und hat den Vorteil, dass
HTML-Validatoren rummeckern, wenn ein Element zwei Mal vorkommt.
4. target
Damit wird das Zielfenster des Links festgelegt. Es gibt dero Vieren, aber wir brauchen eigentlich nur zwei.
_blank= öffnet ein neues Browserfenster_self= öffnet den Link im selben Browserfenster (Standard, muss nicht angegeben werden)_parent,_top= beziehen sich auf Frames, also igittigitt pfui bäh
5. Tabulator-Reihenfolge
Moderne Browser erlauben es, die einzelnen Links mit der Tabulator-Taste anzuspringen. Normalerweise geschieht das in
der Reihenfolge des Auftretens. Mit dem Attribut tabindex kann man die Reihenfolge beeinflussen, also zum
Beispiel
<a href="meine_seite.htm" tabindex="1">Meins</a>
<a href="deine_seite.htm" tabindex="2">Deins</a>
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt