In diesem Tutorial wird erklärt, wie man Links setzen, innerhalb einer Seite durch Anker an verschiedene Stellen springen und E-Mailverknüpfungen einrichten kann. Die Einrichtung von Links bildet dabei für die beiden letzteren Punkte die Grundlage.




Man kann verschiedene Objekte der Seite zu einem Link umwandeln. Im Folgenden will ich ein Beispiel für einen Textlink und eines für einen Bildlink geben. Beginnen wir mit der Textvariante.

Code:


Innerhalb der ersten spitzen Klammern befindet sich unser Tag, der die Seite angibt, die geöffnet werden soll. In diesem Beispiel verlinken wir auf eine externe Seite und geben daher die volle URL an. Mit </a> wird der Link-Tag dann geschlossen. Alles was zwischen den beiden Tags steht, wird später der Link sein. In unserem Beispiel sollte das dann so aussehen.

Vorschau:
Ich bin der Textlink

Wie schon angekündigt, geht das auch mit Bildern. Der Quellcode sieht dann wie folgt aus:

Code:


Da alles, was zwischen den beiden a-Tags steht, als Link verwendet wird, können wir somit auch ohne große Umstände Bilder als Verlinkungen nehmen. In diesem Beispiel haben wir nun auf eine interne Seite verlinkt. Z.B. eine Seite auf unserem Webspace, die im gleichen Ordner liegt, wie die Seite mit dem Link. Aussehen könnte unser derzeitiger Link wie folgt:

Vorschau:



Wollen wir nun auf eine Seite innerhalb unseres Webspaces verlinken, die allerdings nicht im gleichen Ordner liegt wie die aufrufende Datei, so ist dies auch möglich.

Code:


Dieser Link verweist auf eine Seite, die in der Ordnerstruktur einen Ordner über der Aufrufenden liegt.

Hier verweisen wir auf eine Datei, die in einem Unterordner zur aufrufenden Seite liegt.




Nun können wir von einer Seite auf die nächste springen, doch was ist, wenn wir innerhalb ein und derselben Seite auch nach oben oder unten im Text springen möchten? Dazu müssen wir einen Anker setzen, der sich an der Stelle befinden muss, zu der unser Link später springen soll.

Code:


Ein Anker verlangt als Angaben einen Namen und eine ID, die man am besten meist gleich vergibt. Jedoch ist die ID das Ausschlaggebende, denn sie identifiziert den Anker. Der Text innerhalb der beiden Tags muss nicht angegeben werden. Man kann ihn auch einfach leer lassen, der Link springt dennoch an den Anker und zeigt alles an, was direkt unter dem Anker zu sehen ist.

Doch damit unser Sprung auch funktioniert müssen wir nun auch den passenden Link setzen. Dieser wird logischer Weise an einer ganz anderen Stelle in der Seite eingebaut, damit der Sprung sich auch lohnt. In unserem Beispiel verlinkt "top" über den Banner der Seite, so dass der Benutzer bequem mit einem Klick nach oben kommt.

Code:


Da wir nun innerhalb der Datei springen und keine andere Seite aufrufen, müssen wir vor der ID-Angabe unseres Ankers eine Raute eingeben, damit der Text innerhalb der Anführungszeichen als Anker-ID identifiziert wird.




Als letztes in diesem Tutorial wollen wir eine E-Mailverknüpfung erstellen. Diese funktioniert ähnlich einem normalen Link.

Code:


Anstatt einem anderen Seitennamen wird hier die E-Mailadresse zwischen die Anführungszeichen eingetragen, an welche die Mail verschickt werden soll. Direkt davor muss man „mailto:“ setzen, damit der folgende Text als E-Mailadresse und nicht als Seite identifiziert wird. Klickt man nun auf den Link „E-Mail schreiben“, so öffnet sich ein E-Mailfenster und man kann lostippen.

So, das war’s auch schon, ich hoffe ich konnte euch ein wenig weiterhelfen.

Grüsse
Tina


>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!