Ankerpunkte setzen 2

17:53Uhr

Inhalt

Überarbeiteter Artikel

– Was sind Ankerpunkte eigentlich? –
– Erklärung –
– Beispiel –
– Aufbau (Verweis) –
– Aufbau (Ankerpunkt) –
– Kompatibilität –
– Mein Tipp –
– Abschluss –
– Wer Bloggt hier –
– Kommentare –

– | Mobile-Navigation | –
(springt beim betrachten dieser Seite im hochformat, zur Seiten / Blog-Navigation)

Vorwort

Heute möchte ich dem Einen oder Anderen unter Euch,
erklären wie man Ankerpunkte in einem (X)HTML Dokument setzt.

Ich versuche alles so verständlich wie möglich zu erklären,
sollten dennoch Verständnisprobleme oder Fragen entstehen,
so helfe ich gerne weiter.

… hol Dir etwas zu Trinken,
denn dieses Thema ist „Staub-trocken“

Viel Spaß beim ausprobieren

Was sind Ankerpunkte eigentlich?

kurze Erklärung

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

– Inhaltsverzeichnis –

Erklärung:

(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 –

Beispiel:

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

Bla (Punkt 2) <--- so landet man hier #02

blablablablablabla
blablablablablabla
blablablablablabla
blablablablablabla
blablablablablabla
top

Bla (Punkt 3) <--- so landet man hier #03

blablablablablabla
blablablablablabla
blablablablablabla
blablablablablabla
blablablablablabla
top

– Inhaltsverzeichnis –

Aufbau
– Verweis –

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>

– Inhaltsverzeichnis –

Aufbau
– Ankerpunkt –

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>

– Inhaltsverzeichnis –

Kompatibilität

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.

– Inhaltsverzeichnis –

Mein Tipp:

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)

– Inhaltsverzeichnis –

Abschluss

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“

– Inhaltsverzeichnis –

Werbung

<br />

mehr

Das könnte Dich auch Interessieren:

Favicon einbinden
read more …

Wer Bloggt hier?

über den Autor

Hier erfährst Du mehr über mich:

Profil – Beiträge – Fotos

Jetzt Bist Du gefragt …

Wie hat Dir dieser Artikel gefallen?
Hinterlasse Deine Spuren.
Artikel wie diese, leben von Kommentaren, Lob & Kritik.
Hast Du vielleicht Verbesserungsvorschläge?
Sag uns Deine Meinung, Teile oder Like uns.

Wir würden uns freuen,
wenn auch Du Dich hier verewigen magst.