Hauptmenü

Untermenü

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.

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