Ankerpunkte setzen 2

Ankerpunkte, engl. bookmarks (= Bucheinmerker, Seitenhalter) sind nichts anderes,
als markierte Stellen innerhalb eines Dokumentes,
die direkt angesteuert werden können.

(Beispiel-Einsatz für Ankerpunkte)

Du hast einen langen (Fließ)Text und möchtest diesen etwas strukturieren,
damit er für den Leser übersichtlicher wird,
so kannst Du im Kopf (Anfang) Deines Textes eine Art Inhaltsverzeichnis anlegen
und z.B. von da aus auf jede einzelne Zwischenüberschrift verweisen.

Das heißt;

Klickt jemand in Deinem Inhaltsverzeichnes einen Verweis an,
so springt das Dokument an genau diesen zuvor Markierten (Anker)Punkt,
ohne dieses erneut laden zu müssen.

Inhaltsverzeichnis

– Punkt 1 <--- Klickt man hier
– Punkt 2 <--- Klickt man hier
– Punkt 3 <--- Klickt man hier

usw …
(beliebig erweiterbar)



Bla (Punkt 1) <--- so landet man hier #01

blablablablablabla
blablablablablabla
blablablablablabla
blablablablablabla
blablablablablabla
top

Der Verweis ist wie folgt aufgebaut:

<a href=“#01″>…Verweis-Text…</a>

Um innerhalb eines Dokumentes einen Verweis zu einem vorhandenen Anker zu notieren,
gilt der eben erwähnte Aufbau.
Das Verweisziel beginnt also mit einer Raute ( # ),
unmittelbar gefolgt von dem Ankernamen ( 01 ).

Achtung:

Wenn der Verweis zu einem Anker in einem anderen Dokument führen soll,
wird zuerst das Dokument adressiert.
Hinter dem Dokument-Namen folgt die Raute ( # )
und dahinter der Ankername ( 01 ).

Beispiel:

<a href=“http://www.Deine-Website.de/#01″>…Verweis-Text…</a>

Der Ankerpunkt (Marker) ist wie folgt aufgebaut:

<a name=“01″>…</a>

Der Anker selbst,
wird durch das so genannte „a“ Element wie ein Verweis erzeugt.
Der Unterschied besteht jedoch darin,
das anstelle des „href“ Attributes ein Attribut-Name notiert wird.
In diesem Beispiel ist es „01“
Du kannst die „01“ beliebig (um)bennenen,
jedoch ein paar kleine Regeln gibt es zu hier beachten:

– Vergebe nicht zu lange Namen.
– Es dürfen auch keine deutschen Umlaute, Leer,- oder Sonderzeichen (eingeschränkt) enthalten sein.
– Benutze als Sonderzeichen im Namen höchstens
den Unterstrich ( _ ),
den Bindestrich ( – ),
den Doppelpunkt ( : )
oder den Punkt ( . ).

Es ist durchaus erlaubt, einen leeren Anker zu notieren.

Beispiel:

<a name=“01″></a>

Jedoch einige ältere Browser führen Verweise zu leeren Ankern nicht aus,
weshalb es besser ist, den Anker immer um einen konkreten Inhalt zu setzen.
(Was zwischen <a name=“01″> und </a> als Inhalt notiert wird,
ist das Sprungziel für Verweise, die zu diesem Anker führen.)

Achtung:

Das „a“ Element selber ist ein Inline-Element,
das keine Block-Elemente als Inhalt haben darf.
Wenn Du beispielsweise eine Überschrift als Anker definieren möchtest,
was ja durchaus typisch ist,
dann notiere die Elementverschachtelung immer in dieser Form:

Beispiel:

<h2><a name=“01″>Text der Überschrift</a></h2>

HTML selbst unterscheidet nicht zwischen Groß-/Kleinschreibung,
allerdings ist es in jedem Fall empfehlenswert,
Ankernamen bei Ankern und Verweisen genau gleich zu schreiben.
Einige Browser führen den Verweis nämlich nicht aus,
wenn der Ankername beim Anker und beim Verweis dorthin unterschiedliche Groß-/Kleinschreibung verwendet.

Wenn Du XHTML-Standard-konform arbeiten möchtest,
musst Du in jedem Fall auf einheitliche Groß-/Kleinschreibung achten,
da XHTML im Gegensatz zu HTML Groß-/Kleinschreibung streng unterscheidet.

Einige Browser, z.B. der Internet Explorer,
kennen auch „intern reservierte“ Ankernamen wie top.
Wenn Du also einen Verweis <a href=“#top“>…</a> notierst und kein Anker dieses Namens in dem Dokument existiert,
springt der Browser beim Ausführen des Verweises an den Anfang der Seite.

Achtung:

Manche Browser haben Schwierigkeiten,
zu Ankerpunkten zu springen die innerhalb einer Tabelle notiert sind.

Ich baue unter dem Ankerpunkt noch immer einen kleinen „Abstandshalter“,
in Form eines <br /> Tags, mit ein.
Das hat folgenden Hintergrund:
Mit diesem kleinen Tag,
springt der Verweis etwas zwischen Ankerpunkt und Zwischenüberschrift,
somit ist diese noch zu lesen.

Beispiel:

<a name=“01″></a> <--- Ankerpunkt
<br /> <--- "Abstandshalter" (hier landet man)
Bla <--- Zwischenüberschrift (ist dadurch noch zu Lesen)

Ich hoffe das Dir dieses kleine Tutorial weiterhelfen konnte.
(Das Inhaltsverzeichnis dient hier nur als ein Beispiel,
um die Verständlichkeit von Ankerpunkten zu verdeutlichen)
Es werden weitere Tutorials in dieser Richtung folgen.
Also „klick“ demnächst mal wieder vorbei
Du kannst auch einfach unseren RSS-Feed mitnehmen,
oder den Newsletter abonnieren
so bleibst Du immer „Up 2 Date“