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

Anzeige


Werbung




mehr

Das könnte Dich auch Interessieren:

Favicon einbinden
Faviconread more …

Wer Bloggt hier?

über den Autor
Aheruion Hier erfährst Du mehr über mich:

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.

2 thoughts on “Ankerpunkte setzen

  1. Tobi Sp Reply Tobi Sp Aug 27,2014 18:23

    Jetzt weiß ich endlich was Ankerpunkte sind. Das gibt einem neu Möglichkeiten seine Texte zu formulieren da man auf Passagen an anderer Stelle verweisen kann. mal sehen ob ich das irgendwann in meinem Programm umsetzen kann.

    • Aheruion Reply Aheruion Aug 27,2014 19:30

      Freut mich, wenn es Dir geholfen hat.
      In der Tat kann man,
      gerade (sehr)lange Texte
      damit gut strukturieren.
      Ich hoffe,
      das die Umsetzung reibungslos verläuft.
      (Bei Fragen, stehe ich gerne zur Verfügung)

Leave a Reply