 Verweise auf Anker im HTML-Dokument
Der Beginn einer angezeigten HTML-Seite steht gewöhnlich am oberen Rand des Browserfensters. Gegebenenfalls wird ein Scrollbar eingeblendet, der es ermöglicht nach unten zu scrollen um den Seiteninhalt weiter unten einsehbar zu machen.
|
|
seiteninterner Link auf einen Anker - Sprungmarke
UPDATE 20.12.2010 Verhalten des IE9, Sprungziel mit "ID"
Es ist ebenfalls möglich, gleich beim Aufruf oder mit einem seiteninternen Link zu einer bestimmten Position innerhalb der Seite zu springen. Dann wird diese Position am oberen Fensterrand angezeigt, bzw. vom Browser der Seiteninhalt nach oben verschoben. Ausnahme: Die Seite ist nicht so 'lang', dass er den Rest das Fenster füllen würde.
Diese Links führen zu seiteninternen Sprungmarken
Das war bekannt: Manche Browser haben Schwierigkeiten, zu Ankern zu springen, die innerhalb einer Tabelle notiert sind. Nach einem Fehlerreport und Eingrenzung des Problems fand ich heraus, dass der IE9 genau dieses Verhalten zeigt.
Links auf Sprungmarken innerhalb eines HTML-Dokuments
Sie können Verweise zu bestimmten Stellen in einem anderen HTML-Dokument oder auch innerhalb des gleichen HTML-Dokuments notieren. Dazu ist es notwendig, diese Sprungstelle zu kennzeichnen. Einen solchen internen Zielpunkt nennt man "Anker". 
Auf solche seiteninternen Verweise treffen Sie in längeren Dokumenten recht häufig: Im Seitenkopf gibt es dann Verweise, von denen Sie auf die Themenabsätze springen können.
Andere finden Sie eigentlich auf jeder Seite! Darüber denkt ein Besucher nicht weiter nach, setzt ihn aber beinahe voraus:
Den 'Nach-oben-Verweis, den Sie häufig am unteren Ende einer Seite vorfinden.
Dazu wurde im Dokument oben, gleich hinter dem einleitenden <body>-Tag ein 'Anker' definiert, auf den dieser Link dann verweist. Man benötigt also
- einen Link
- zugehörigen Anker
Anwendung finden solche internen Verweise oft in einer Übersicht der Unterthemen, deren Links direkt zu den (Ankern) der entsprechenden Abschnitte verweisen. Beispiel:
Anker definieren
Ein Anker wird mit Hilfe von a-Tags notiert. Das notwendige Attribut dazu ist name="xxxx". Den Namen für den Anker können Sie (beinahe) frei wählen.
<a name="ziel01">hier ist das Sprungziel 01</a>
Ergebnis: hier ist das Sprungziel 01
Der Bereich zwischen einleitendem und schließendem Tag darf leer bleiben.
Tipp: Lassen Sie den Bereich zwischen einleitendem und schließendem Tag nicht leer!
<a name="ziel01"> ? </a>
Das kann bei einigen Browsern zu Fehlern führen. Wenn Sie das Sprungziel unsichtbar definieren wollen, setzen Sie ein Transparentes Pixel (Größe 1x1) hinein. Das erspart Ihnen auch den Verlust einer Zeilenhöhe (eben nur einen Punkt hoch). <br> nicht vergessen!
transparentes Pixel (durchsichtiges Gif-Image) zum Download (rechtsklicken). Das Transpixel habe ich hier auf 10 x 10 Pixel gestreckt.
UPDATE Sprungziel mit "ID"
Regeln für HTML 4
Bei HTML 4 können Anker alleine mit dem Universalattribut "id" anstelle eines Link-Elements [a] mit einem name-Attribut notiert werden. Dies hat einige Vorteile, denn Sie können bereits vorhandenen Elementen, z.B. Überschriften, id-Attribute zuweisen. Damit kann das HTML-Tag für das a-Element als Anker eingespart werden.
<h1 id="ankername">Text Überschrift</h1>
Link definieren
Ein interner Link wird mit Hilfe van a-Tags notiert. Das notwendige Attribut dazu ist href="#ankername". Dem Ankernamen wird ein Gatter (#) vorangestellt.
<a href=" #ziel01 ">zum Sprungziel 01</a>
seiteninternen Verweis definieren
Ein dokumentinterner Verweis wird mit Hilfe van <a>-Tags notiert. Das Verweisziel ist allerdings hier nicht eine Datei sondern der Anker. Dem Ankernamen wird ein Gatterzeichen ( # ) vorangestellt.
Vor dem Ankernamen das Gatterzeichen # notieren
<a href="#ziel01">springe zu Ziel 01</a>
|
|
Sprung auf einen Anker in anderen HTML-Dokumenten
Ein Verweis kann auch auf einen Anker innerhalb einer anderen Datei erfolgen. Dann wird zuerst das neue Dokument geladen, dann der Sprung an die entsprechende Stelle innerhalb der Datei eingeleitet.
der Dateiname und #Ankername wird notiert.
<a href="datei02.htm#ankername"> Textlink </a>
Beim Verweis zu einem Anker innerhalb einer anderen Datei wird zuerst der Dateiname notiert. Hinter dem Dateinamen folgt das Gatterzeichen # und der Ankername.
|
|
Beispiel:  Springe zur Datei 'Links Grundlagen', Kapitel 'Attribut Class'
relativer Link:
<a href="verweise-intro.htm#class"> Textlink </a>
absoluter Link:
z.B. für die Domain 'www.irgendwas.de'
<a href="http://www.irgendwas.de/verweise-intro.htm#class"> Textlink </a>
Beispiel - seiteninterner Sprung
Beim Klick auf diesen internen Verweis wird die Seite innerhalb des Fensters so verschoben, dass der Anker (das Sprungziel) am oberen Fensterrand zu sehen ist.
 Sprung zum Anker 'ziel01'
Informationen zur relativen Adressierung finden Sie auf der Seite:
 relative Links in HTML-Dokumenten
Informationen zur absoluten Adressierung finden Sie auf der Seite:
absolute Links in HTML-Dokumenten
Weitere Beispiele zu Pfadangaben finden Sie auf der Seite:
Pfadangaben bei Verweisen
Zum Thema Angaben für das Anzeigeziel (Target) lesen Sie die Informationen auf der Seite:
Targetangaben für Links
Links ohne Unterstrich, mit Rahmen oder Hintergrundgrafik? Mehr dazu auf der Seite:
Links ohne Unterstrich
|
Home • Verweise • Interne Links
Link definieren