Wie man auf externe Seiten verlinkt, ist vielen klar. Auch auf unterschiedliche Seiten einer Website zu verlinken scheint oft nicht das Problem zu sein.

tinybuttons

Ich wurde nun schon des öfteren gefragt, wie man denn innerhalb einer Seite an verschiedene Stellen verlinken kann. Ich werde versuchen, das hier hoffentlich gut verständlich zu erläutern. Profi´s brauchen hier also nicht unbedingt weiter zu lesen. Der Artikel richtet sich eher an Einsteiger, an Leute die mit (X)HTML nix am Hut haben und vor allem auch an Menschen, die einfach nicht die Zeit haben, sich mit solchen Sachen lange auseinanderzusetzen.

Die Anleitung bezieht sich auf Joomla 1.5 und den darin enthaltenen Standard-Editor Tiny MCE 2.0, kann aber auch mit Joomla 1.0 und auch mit anderen Editoren nachvollzogen werden. Ich gehe auch kurz auf den Quelltext ein, so daß auch Liebhaber von statischen Seiten nicht zu kurz kommen.

Na dann mal los...

Anker und verlinken!

Wie die Überschrift schon verrät, geht es hier um Anker und um´s verlinken.

Ich erlaube mir zu Beginn, hier gleich ein Beispiel zu konstruieren.

Ein Klick auf einen der folgenden Punkte soll direkt zum passenden Absatz innerhalb dieser Seite führen. Von dort aus soll ein Link wieder hier zum Seitenbeginn führen.

Überschrift 1

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Überschrift 2

Überschrift 3

Logischerweise muss es einen Link und dazu das passende Sprungziel geben. Die Überschrift hier soll also verlinkt werden zu dem entsprechenden Absatz. Am Ende des Absatzes soll ein Link wieder zu genau der passenden Überschrift führen.

Die Überschrift muss also hier Link und Sprungziel gleichermaßen sein. Ich markiere nun die erste Überschrift und bemühe dann meinen Editor. Dort verwende ich das Anker-Symbol.

Hier kann man glaube ich ganz gut erkennen, wo im Editor Tiny MCE der Anker zu finden ist.

Nachdem ich also auf den Anker geklickt habe, erscheint folgendes Fenster:

Viel gibt es ja nicht einzustellen, wie man sieht. Aber beim Vergeben einer Bezeichnung für den Anker, sollte man doch ein paar Dinge beachten.

Es wird zwischen Groß- und Kleinschreibung unterschieden. Am besten schreibt man immer alles klein. Und man sollte nicht irgendwelche beliebigen Zeichen und vor allem keine Sonderzeichen zwischen den einzelnen Wörtern verwenden. Der Unterstrich hier ist erlaubt. Ebenso ein Bindestrich oder ein Punkt. Für den Namen sollte man also nur unsere gebräuchlichen lateinischen Schriftzeichen sowie die arabischen Zahlen verwenden, dann macht man nichts falsch. Auch die typischen deutschen Umlaute sollte man am besten vermeiden, obwohl das mit XHTML inzwischen durchaus erlaubt ist. Alte HTML-Versionen erlauben es zum Beispiel nicht. Hier müsste man diese Buchstaben über die UTF-8 Kodierung ausdrücken. Für ein "ö" also "%B3%B6". Wozu sollte man sich solch eine Mühe machen.

Ich gebe hier also "erster_punkt" ein und klicke auf Aktualisieren. Bei den anderen Überschriften gehe ich genauso vor. Im Editor sieht man jetzt vor jeder Überschrift dieses kleine Anker-Symbol.

In Joomla 1.0 steht dieses Symbol auf der rechten Seite, was aber irrelevant ist.

Die Überschriften sind jetzt also verankert mit den Bezeichnungen erster_punkt, zweiter_punkt und dritter_punkt. Also erstelle ich jetzt die Absätze, von wo aus dann diese Überschriften angesprungen werden können. Außerdem bekommen die Absätze auch jeweils eine Überschrift, welche verankert wird. Vorher kommt aber noch ein wenig Beispieltext in die Seite, damit man den Effekt auch schön sehen kann. Der erste Absatz kann auch von hier angesprungen werden.

Jetzt kommt erst einmal etwas Beispieltext.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Jetzt kommen die Absätze!!!

Dieser erste Absatz wurde mit Klick auf den ersten Punkt ganz oben auf der Seite angesprungen.

Der Überschrift "Dieser erste Absatz" wird jetzt ein Anker verpasst, also ganz so wie vorhin für die erste Überschrift. Den Anker nenne ich "absatz1". Jetzt muss ich noch die Überschrift 1 ganz oben im Artikel mit diesem Anker absatz1 verlinken. Ich markiere dazu wieder die Überschrift 1. Das kleine Ankersymbol darf aber auf keinen Fall mit markiert werden, sonst wird dabei ein falscher Code erzeugt. Der Anker ist ja schon gesetzt, also muss ich hier nur noch verlinken. Dazu verwende ich das Ketten-Symbol aus dem Editor. Hier also das linke Symbol.

Dann erscheint das übliche Fenster mit den Optionen zum Verlinken.

linkoption Hier muss ich nur bei Anker rechts auf den kleinen Pfeil klicken. Dort sind alle bisher definierten Anker aufgelistet. Ich wähle also absatz1. Die Adresse wird automatisch eingefügt. Im selben Fenster/Frame, das passt auch so. Also nur noch auf Einfügen klicken und fertig.

Jetzt will ich aber noch von diesem Artikel aus zurück zur ersten Überschrift kommen. Dazu habe ich hier nach dem Platzhaltertext wieder einen Link eingefügt. Also einfach "Zurück zum ersten Punkt" geschrieben. Ich markiere diesen Text und verlinke diesen jetzt mit dem Anker der ersten Überschrift. Also wieder das Kettensymbol und diesmal wähle ich als Anker "erster_punkt".

Das mache ich jetzt mit allen Überschriften und Absätzen bei Beachtung der Ankernamen so und bin damit schon fertig.

Achtung!!! Hier geht die Anleitung noch weiter, bitte klicken... Aber bitte erst den Link "Zurück zum ersten Punkt" nach dem Platzhaltertext beachten.

Hier noch ein wenig Platzhaltertext.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur

Zurück zum ersten Punkt.

Der zweite Absatz wurde mit Klick auf den zweiten Punkt ganz oben auf der Seite angesprungen.

Hier wieder ein wenig Platzhaltertext.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur

Zurück zum zweiten Punkt.

Der dritte Absatz wurde mit Klick auf den dritten Punkt ganz oben auf der Seite angesprungen.

Hier wieder ein wenig Platzhaltertext.

Zurück zum dritten Punkt.

Fortsetzung!!!

Hier geht es weiter...

Wenn man sich jetzt den Quelltext für die Überschrift 1 ansieht, findet man folgendes:

<a name="erster_punkt"></a><a href="#absatz1">Der erste Punkt</a>

und so weiter...

Der Anker bekommt mit "a name" seine Bezeichnung. Mit "a href" wird auf den Anker "absatz1" verlinkt. Dann folgt der Text der Überschrift, also "Der erste Punkt". Außen herum hat die Überschrift ein <li>, ist also eigentlich eine ungeordnete Liste. Das habe ich jetzt hier nicht notiert, weil unwichtig für das Beispiel. Man könnte aber genausogut eine echte Überschrift zb. mit <h1> verankern und verlinken. Die Tags sollten dann aber immer Außen sein.

Es wird hier das name Attribut verwendet. Aber bereits seit HTML4 verwendet man eigentlich das id Attribut. Trotzdem sind eigentlich alle Browser mit dem name-Attribut zufrieden. Wer es ganz perfekt machen möchte, kann aber auch beide Attribute verwenden. Das geht dann leider mit manchen Editoren nicht per Klick auf einen Button. Hier müsste man also den Quelltext selbst ändern. Das könnte dann für den Anker der ersten Überschrift so aussehen:

<a id="erster_punkt" name="erster_punkt">Der erste Punkt</a>

Und für den Anker der ersten Überschrift mit Verlinkung so:

<a id="erster_punkt" name="erster_punkt"><a/><a href="#absatz1">Der erste Punkt</a>

Ich hoffe das war nicht zu umständlich erzählt, denn eigentlich ist es ganz einfach. Und möchte man einfach am Ende einer Seite grundsätzlich ganz nach oben verweisen, dann reicht auch ein leerer Anker. Also

Nach Oben!!!

Verlinken innerhalb einer Seite mit Anker

Wie man auf externe Seiten verlinkt, ist vielen klar. Auch auf unterschiedliche Seiten einer Website zu verlinken scheint oft nicht das Problem zu sein.

Anker und verlinken!

Jetzt kommen die Absätze!!!

Fortsetzung!!!