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.
Weiterempfehlen • Social Bookmarks • Vielen Dank
Bitte unterstützen Sie dieses Projekt
Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).
Spenden
Sie können uns eine Spende über PayPal zukommen lassen.
Weiterempfehlungen
Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.
Bücher über Amazon
Bestellen Sie Bücher über folgende Links bei Amazon:
Vielen Dank für Ihre Hilfe
-
E-Books zum Kurs
von HTML-Seminar.deE-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.
Mehr Details
-
