6x bewertet

Anker

von Larita  |  09.01.2008 um 18:12 h
Html Grundlagen
Typ: Html Grundlagen
Stufe:Einfach
Ü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



6 Kommentare




Nekoji

Sehr schön erklärt! :)
am 09.01.2008 um 18:25 Uhr


Ein Anker ist sogar optionaler Bestandteil eines uniform resource locators (URL).
Und zeigt noch tiefer auf die Quelle eines Textes.

Wie gesagt, wird damit sogar direkt zum Text gesprungen.
Die Ankerangabe in der URL wird nicht
via http an den Server gesendet sondern ist
eine Anweisung an den Browser,
lässt sich noch erwähnen.
am 12.01.2008 um 14:32 Uhr


Sehr schön erklärt 6 Herzchen Smilie
am 23.01.2008 um 20:54 Uhr


Larita

Vielen Dank. Auch für die zusätzlichen Informationen Smilie Ich editier das noch bei Gelegenheit.
LG Larita
am 02.02.2008 um 18:59 Uhr


neontrauma

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".
am 08.02.2008 um 14:54 Uhr


Larita

@ neontrauma: da kenn ich mich nun nicht so aus Smilie wenn ich jetzt also das name-attribut durch id ersetze, funktioniert alles, wie gehabt? Dann editier ich das nämlich noch mal Smilie
am 09.02.2008 um 15:11 Uhr