Übersichtlichkeit ist auf einer Website - egal welches Thema sie primär behandelt - sehr wichtig, wenn man einen Besucher "behalten" will. Dafür gibt es mehrere Methoden, ich möchte euch hier eine sehr einfache Variante vorstellen: den Anker.
Wie erstellt man einen Anker mit HTML - Einen Schritt zurück - Was ist erstmal ein Anker?
Ein Anker ist eine nützliche Spielerei, die bessere Übersicht bei langen Texten garantiert und optionaler Bestandteil eines uniform resource locators (URL).
Hier seht ihr dazu ein Beispiel. Klickt man einen der drei Links mit der Maus an, so gelangt man zu der entsprechenden Textstelle mitten im Dokument.
Das ist ganz praktisch, wenn man z.B. eine Geschichte lesen möchte. Man muss nicht jedesmal scrollen, sondern kann das gewünschte Kapitel einfach in der Liste auswählen.
Btw.: Wikipedia bedient sich ebenfalls solcher Anker. So kann der Leser schnell die gewünschte Information haben, ohne vorher einen seitenlangen Text lesen zu müssen. Dabei wird die Ankerangabe in der URL nicht via http an den Server gesendet sondern ist
eine direkte Anweisung an den Browser.
Genug geredet, was ein Anker ist, müsste nun klar sein. Nun zeig ich euch, wie ihr einen erstellt. Und wie versprochen, es wird wirklich ganz einfach.
Als erstes öffnet ihr euer HTML-Dokument. Wo ihr den ersten Teil eures Ankers platziert, ist eigentlich egal, der Übersicht wegen, sollte es am Beginn des Dokuments sein.
Ihr nutzt folgenden Code:
<a href="#LINKNAME">LINK-TITEL</a> Das Rautezeichen "#" müsst ihr auf jeden Fall lassen. Bei LINKNAME könnt ihr eine beliebige Bezeichnung für den Link wählen. Machts nur nicht zu kompliziert ˆ_ˆ Passt auf, dass ihr im selben Dokument nicht zweimal die selbe Bezeichnung wählt.
LINK-Titel könnt ihr ebenfalls verändern. So wird der Link dann vom Browser angezeigt.
Jetzt der zweite Teil:
<a name="LINKNAME"></a> Diesen Code fügt ihr dort ein, wo der Leser "hinspringen" soll. Dieser Teil wird auch "Textmarke" genannt. Ihr könnt den Link auch beschriften, viell. mit einer Überschrift, aber unbedingt notwendig ist es nicht.
 | Wichtig!: |
In XHTML Strict wird das name-Attribut hier nicht mehr erlaubt, stattdessen verlangt es bei Ankern eine ID. Also schreibt man einfach anstelle von name="linkname" eben id="linkname". (Danke an neontrauma für diesen Hinweis)
Eigentlich wars das schon, damit kann man natürlich ein schönes Inhaltsverzeichnis erstellen, dass zudem noch äußerst professionell wirkt.
Damit dürfte - hoffe ich - alles erklärt sein, wenn trotzdem Fragen sind, fragt ˆ_ˆ
LG Lara
Nekoji
Sehr schön erklärt! :)