Videos eBook Forum Kontakt

jetzt Videos kaufen
zum Lernen von HTML,
CSS und Webdesign

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign

Lösung Sprungmarken/Sprunglinks

Im Beispiel wird die HTML-Seite „über mich“ mit viel Inhalt ergänzt.

In der Mitte kommt die Überschrift

<h2 id="mitte">dies ist die Mitte</h2>

Ganz oben wird der Link erstellt, der diese Überschrift anspringt

<p>Direkt zur <a href="#mitte">Mitte</a> springen</p>

Klickt nun jemand auf den Link, wird direkt ab der Überschrift „dies ist die Mitte“, der Inhalt der Seite angezeigt. Zusätzlich ist oben in der URL sichtbar, dass nach der bekannten URL die Raute mit der eindeutigen Benennung die URL ergänzt. Dazu später mehr.

Das Gleiche machen wir nun für den Link am Ende im Text. Am Ende setzen wir ein Link

<a href="#anfang">ab zum Anfang</a>

Und nun ganz oben in unserem HTML-Code diese eindeutige Benennung verwenden. Zur Erinnerung: wir können jedes HTML-Element mit dem Attribut „id“ ergänzen. Unser erster HTML-Befehl über unserem Inhalt ist <body>. Genau diesen ergänzen wird um die id=“anfang“:

<body id="anfang">

Somit funktioniert der Sprung von ganz unten an den Anfang bzw. vom Anfang in die Mitte – immer vorausgesetzt wir haben genügend Text, damit wir auch scrollen müssen. Zur Not einfach das Browserfenster kleiner ziehen.

Grafiken als Sprungmarken

Wir sind bei den Sprungmarken nicht auf Text als Links beschränkt. Genauso können wir auch eine Grafik als Link machen:

<a href="#anfang"><img src="pfeilhoch.gif"></a>

So wird beispielsweise der Pfeil unten auf unserer HTML-Seminar-Seite umgesetzt.

Ergänzung: Sprung auf eine andere Seite auf eine definierte Sprungmarke

Auch von einer anderen Datei kann direkt die Sprungmarke angesprungen werden. Unser Sprungziel ist auf der HTML-Seite „ueber-mich.htm“ gesetzt. Erstellen wir nun z.B. auf der Startseite „index.htm“ einen Link:

Ab zur <a href="ueber-mich.htm#mitte">Mitte von über mich</a>

Es wird also der normale Link auf eine andere Seite ergänzt über #mitte und das Ganze funktioniert schon. Einfach mal probieren.

weitere eigene Projekte: