HTML Grundlagen: Links auf Sprungziele mit <a href="#Sprungmarke">Linktext</a>
- Text fett drucken (STRONG vs. B)
- Text kursiv drucken (EM vs. I)
- Text unterstreichen (INS vs. U)
- Text durchstreichen (DEL vs. S)
- Text tiefstellen oder hochstellen (SUB vs. SUP)
- Text kleiner oder größer anzeigen (SMALL oder BIG)
- Zitate erstellen (BLOCKQUOTE vs. Q)
- Tabellen erstellen
- Listen erstellen (UL vs. OL)
- Bereiche festlegen (DIV vs. SPAN)
Inhaltsübersicht HTML Grundlagen
Text formatieren
Ankerlinks erstellen und Sprungziele definieren
Oft ist es auf einer Seite mit viel Inhalt notwendig oder sinnvoll, mit einem Link direkt zu einem Sprungziel innerhalb der Seite zu springen. Damit ein Anker-Link sichtbar funktioniert, muss auf der Seite genügend Inhalt vorhanden sein. Das heißt, es müsste normalerweise gescrollt werden, um den gewünschten Abschnitt zu sehen.
Das HTML Tag <a href="URL#Sprungmarke"> wird als »Sprungbefehl« benutzt. Dabei ist das Rautezeichen # wichtig. Es zeigt dem Web-Browser an, dass er auf der Seite zu der Sprungmarke springen soll. Die Angabe der URL kann weggelassen werden, wenn sich das Sprungziel auf der aktuellen Seite befindet.
Für das Springen zu einer Sprungmarke müssen zwei Bedingungen erfüllt sein.
Was ist ein Sprung-Link?
Ein Sprung-Link unterscheidet sich nur wenig vom bereits bekannten HTML Hyperlink.
Bei der Benennung des Sprungziels kann ein beliebiger Name vergeben werden.
Der Name für die eindeutige ID ist beliebig wählbar. Er darf nur die Buchstaben a – z, A – Z und die Ziffern 0 – 9 enthalten. Das erste Zeichen muss ein Buchstabe sein.
Zusätzlich sind der Bindestrich '-' und der Unterstrich '_' erlaubt.
Leerzeichen, Umlaute und Sonderzeichen sind nicht erlaubt.
Zwischen Groß- und Kleinschreibung wird unterschieden.
Der Name darf nur einmal pro Webseite vergeben werden.
Verweis auf einen Anker auf der gleichen Seite
Ein Verweis auf einen Anker im gleichen HTML-Dokument wird durch folgenden Code erzeugt:
<a href="#AnkerName">LinkText</a>Gib für AnkerName den Namen an, den Du für den Anker verwenden möchtest. Beachte die oben genannten Einschränkungen für die Benennung eines Sprungziels.
Gib für LinkText den Text an, der auf deiner Webseite angezeigt werden soll. Hier sind auch Leerzeichen, Sonderzeichen und Umlaute erlaubt.
Verweis auf einen Anker auf einer anderen Seite
Ein Verweis auf einen Anker in einem anderen HTML-Dokument wird mit folgendem Code erzeugt:
<a href="URL#AnkerName">LinkText</a>URL kann eine andere Datei deiner Website sein oder eine Datei, die auf einem anderen Server liegt. Ankerlink
Zwischen URL und und #AnkerName darf kein Leerzeichen stehen.
Gib für AnkerName den Namen an, den Du für den Anker verwenden möchtest. Beachte die oben genannten Einschränkungen für die Benennung des Sprungziels.
Gib für LinkText den Text an, der auf deiner Webseite angezeigt werden soll. Hier sind auch Leerzeichen, Sonderzeichen und Umlaute erlaubt.
Sprungmarke setzen
Damit der Anker-Link funktioniert, muss jetzt noch die Sprungmarke gesetzt werden. Überschriften und Zwischenüberschriften gliedern einen Text und informieren darüber, wovon ein Textabschnitt handelt. Der Anker zu einem Textabschnitt oder Absatz wird häufig auf die zugehörige Überschrift gesetzt.
<h2 id="AnkerName">Das ist die Überschrift für den Abschnitt</h2><h2> … </h2> bezeichnet eine Überschrift 2. Ordnung
(Englisch Heading) .Das Sprungziel muss nicht unbedingt eine Überschrift sein. Das Attribut id="AnkerName" kann für jedes beliebige HTML-Element benutzt werden. Sinnvoll sind insbesondere die Überschriften H1 bis H6 und P für Absätze.
Für AnkerName musst Du den Namen angeben, den Du im Anker-Link für den Anker gewählt hast. Achte auf die korrekte Schreibweise, denn Groß- und Kleinschreibung wird unterschieden.