Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

XHTML-Übung: Anker und Sprungmarken definieren

Posted by sura1 - 21. Juli 2008

Bookmark and Share

Anker (Sprungmarken) definieren:

Ein Anker bezeichnet eine Sprungmarke innerhalb eines HTML-Dokuments.

Sie können innerhalb einer HTML-Datei Anker definieren. Dann können Sie Verweise zu solchen Ankern setzen, um einen Sprung genau an die Ankerstelle innerhalb der Datei zu veranlassen. Der Verweis kann in der gleichen Datei stehen. Dann wird einfach ein Sprung innerhalb der angezeigten Seite ausgeführt. Der Verweis kann aber auch in einer anderen Datei stehen. Dann wird die Zieldatei geladen, und der Browser springt, sobald er die Stelle mit dem Anker geladen hat, an die entsprechende Stelle innerhalb der Datei.

Ein Anker wird genau wie ein Verweis mit Hilfe des a-Elements erzeugt. Der Unterschied besteht darin, dass kein Attribut href notiert wird, sondern stattdessen ein Attribut name. Ein kompletter Anker sieht also so aus:

<a name=“ankername“>…</a>

Inhalt des Ankers

Was Sie zwischen <a name=“ankername“> und </a> als Inhalt notieren, ist das Sprungziel für Verweise, die zu diesem Anker führen. Es ist durchaus erlaubt, einen leeren Anker zu notieren, also <a name=“ankername“></a>. Einige ältere Browser führen Verweise zu leeren Ankern jedoch nicht aus, weshalb es besser ist, den Anker immer um einen konkreten Inhalt zu setzen.

Wenn Sie also beispielsweise eine Überschrift als Anker definieren wollen, was ja durchaus typisch ist, dann notieren Sie wie im obigen Beispiel in der Überschrift den Anker und darin den Text der Überschrift.

Hierzu zwei vollständige Beispiele:

1) Anker_1.html

Zu Beginn des Dokumentes steht ein Anker mit der id=“oben“. Dann folgen vier Punkte innerhalb einer ungeordneten Liste mit Links zu #kapitel1, #kapitel2, #kapitel3, #kapitel4. Darunter befinden sich 4 Absätze mit eben diesen Ankern.

So kann man mit einem Klick auf die einzelnen Kapitel zu den entsprechenden Stellen im Dokument springen, d.h. das Fenster wird nach unten gescrollt. Das funktioniert jedoch nur, wenn das Browserfenster kleiner ist als der dargestellte Inhalt. Am Ende eines jeden Kapitels befindet sich der Verweis wieder nach oben.

Zur Formatierung habe ich in den Beispielen im Head-Bereich ein CSS eingebaut:

Die Hintergrundfarbe des body ist #000 (schwarz), die Schriftfarbe ist ein helles Grau (color: #bfbfbf), der Innenabstand beträgt 20px (padding: 20px).

Über die in der Klammer angeführten CSS-Befehle (ul, ul li a, ul li a:hover, .top a, .top a:hover) werden die Anker und Sprungmarken optisch aufgewertet.

Fertiges Beispiel: Bitte Link oder Grafik anklicken!

Link: anker_1.html

Quellcode: hier anklicken!!

1) Anker_2.html

Beispiel Nr. 2 ist im Prinzip genauso aufgebaut wie Beispiel Nummer 1. Die einzige Ausnahme findet sich im eingebetteten CSS. Innerhalb des body-tags (Hintergrundfarbe: background-color: 3f3f3f) gibt es eine div-Box mit der id=“wrapper“.

Diese hat eine Breite von 800 px (width: 800px) und wird über die Außenabstände margin (20px auto) mittig auf der Webseite angeordnet; außerdem erhält diese einen Rand in der Breite von 4px (border: 4px solid #fff;), eine Hintergrundfarbe (background-color: #000;), eine eigene Schriftfarbe (color: #bfbfbf) und einen Innenabstand von 20px (padding: 20px).

Durch diese zusätzliche Formatierung im Stylesheet ist es für Sie nicht mehr notwendig, das Browserfenster zu verkleinern, wenn Sie die Funktionsweise von Ankern innerhalb einer Datei sehen möchten. Sie klicken auf eines der vier Kapitel in der ungeordneten Liste am Seitenanfang und gelangen durch diese Sprungmarken sofort zur gesuchten Textstelle.

Fertiges Beispiel: Bitte Link oder Grafik anklicken!

Link: anker_2.html

Quellcode: hier anklicken!!

Download Beispieldateien: (9,50 KB zip-Datei) – Bitte Download-Button anklicken!!

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

 
%d Bloggern gefällt das: