HTML-Kurs für Karl – Teil 2: Das a-Tag (Externe Links & Anchor)

Exkurs 1: Was steht da eigentlich in der Adresszeile?

Bevor wir externe Webseiten verlinken, müssen wir verstehen, wie der Browser sie findet. Das Geheimnis liegt in der URL (Uniform Resource Locator), umgangssprachlich auch einfach "Webadresse" genannt.

So sieht eine typische Browseradresszeile aus:

https://wiki.selfhtml.org/wiki/HTML/Elemente/a?parameter1=test&parameter2=test2

Diese lange Kette lässt sich in logische Einzelteile zerlegen:

Bestandteil	Beispiel aus der Zeile	Erklärung
HTTP-Protokoll	`https://`	Die "Sprache", in der Server und Browser miteinander reden. Das "s" steht für "secure" (sicher/verschlüsselt). Erklärt in Exkurs 2.
Domain / Host	`wiki.selfhtml.org`	Der Name des Servers bzw. der Website, auf der die Inhalte liegen.
Pfad	`/wiki/HTML/Elemente/a`	Der genaue Ort (wie ein Ordnerpfad auf deinem Computer), wo das HTML-Dokument liegt. Hier mit der Besonderheit, dass am Ende kein ".html" steht, weil es vermutlich ein PHP-Script ist.
Parameter	`?parameter1=test&parameter2=test2`	Zusatzinformationen, die mit einem `?` eingeleitet werden, nennt man GET-Parameter. Sie übergeben Daten an die Webseite (z. B. Suchbegriffe oder Filter). Einzelne Parameter werden mit einem `&` getrennt.

Exkurs 2: Was ist das HTTP-Protokoll und warum ist es bei externen Links so wichtig?

Das HTTP-Protokoll (Hypertext Transfer Protocol) ist die "Sprache", mit der dein Webbrowser und der Webserver miteinander kommunizieren. Es regelt, wie Daten im Internet angefordert und übertragen werden.

Die Kommunikation folgt immer dem Prinzip von Anfrage (Request) und Antwort (Response):

Anfrage: Du klickst einen Link. Dein Browser fragt beim Server: "Gib mir bitte die HTML-Datei!"
Antwort: Der Server sucht die Datei und schickt sie zurück: "Alles klar, hier ist sie!"

HTTP vs. HTTPS

Heute siehst du fast nur noch https://. Das S steht für Secure (sicher). Im Gegensatz zum alten HTTP werden hier alle Daten (wie Passwörter oder Formulardaten) abhörsicher verschlüsselt übertragen.

⚠️ Warum ist das Protokoll bei externen Links so wichtig?

Wenn du zu einer externen Webseite verlinkst, musst du das Protokoll (https://) zwingend mitschreiben! Warum? Der Browser muss wissen, ob es sich um einen absoluten oder relativen Link handelt:

Mit Protokoll (Richtig): Schreibst du href="https://google.com", weiß der Browser: "Ah, ich muss meine aktuelle Webseite komplett verlassen und eine neue Anfrage an das weltweite Netz schicken!"
Ohne Protokoll (Falsch): Schreibst du nur href="google.com", denkt der Browser, das sei eine lokale Datei auf deinem eigenen Server! Befindest du dich auf meinprojekt.de, versucht der Browser die Datei meinprojekt.de/google.com aufzurufen. Das führt unweigerlich zu einem Fehler (404 Not Found).

Die wichtigsten HTTP-Methoden (Möglichkeiten)

Ein Browser kann nicht nur Daten abrufen, sondern auch senden. Dafür nutzt er verschiedene Methoden:

Methode	Bedeutung	Typischer Einsatzbereich
`GET`	Daten abrufen	Eine normale Website oder ein Bild laden. Parameter hängen offen an der URL.
`POST`	Daten senden	Ein Kontaktformular abschicken oder ein Passwort beim Login absenden (Daten sind unsichtbar im Hintergrund).
`PUT` / `PATCH`	Daten ändern	Ein bereits bestehendes Benutzerprofil aktualisieren.
`DELETE`	Daten löschen	Einen Post oder ein Konto vom Server entfernen.

HTTP-Statuscodes (Antworten des Servers)

Der Server schickt bei jeder Antwort eine dreistellige Nummer mit, um zu zeigen, ob alles geklappt hat:

200 OK: Alles super, die Daten kommen!
301 Moved Permanently: Die Seite ist dauerhaft auf eine neue URL umgezogen.
404 Not Found: Fehler von dir! Die Webadresse ist falsch oder die Seite gibt es nicht mehr.
500 Internal Server Error: Fehler vom Server! Auf der Gegenseite ist etwas abgestürzt oder überlastet.

Verlinkung zu einer externen Webseite

Um nun von deiner eigenen Seite genau auf diese Beispiel-URL zu verlinken, nutzt du wieder das <a>-Tag mit dem Attribut href. Wenn sich die Seite jedoch in einem neuen Tab öffnen soll, was bei externen Links üblich ist, fügst du das Attribut target="_blank" hinzu.

Code-Beispiel:

<a href="https://selfhtml.org" target="_blank">Hier geht es zu SelfHTML</a>

Exkurs 3: Das target-Attribut

Mit dem Attribut target bestimmst du, wo der Link geöffnet werden soll:

target="_blank": Öffnet die verlinkte Seite in einem komplett neuen Browsertab oder Fenster. Das ist super für externe Seiten, damit die Besucher deine Webseite nicht ganz verlassen.
target="_self": Öffnet die verlinkte Seite im selben Tab. Dies ist das Standardverhalten von jedem Browser. Weil es ohnehin automatisch passiert, musst du es nicht extra in den Code schreiben und kannst es einfach weglassen.

Teil 3: Verlinkungen innerhalb einer Seite (Anchor / Sprungmarken)

Manchmal sind Webseiten sehr lang. Damit der Nutzer nicht ewig scrollen muss, kannst du "Anker" (engl. Anchor) setzen. Das funktioniert über das Attribut name beim <a>-Tag. Angesprungen wird dieser Anker über das Raute-Symbol (#).

Strukturelles Beispiel:

Hier siehst du, wie ein Dokument mit einem Inhaltsverzeichnis aufgebaut ist, das zu 3 Textabschnitten springt und am Ende wieder nach oben führt:

<!-- Das Inhaltsverzeichnis ganz oben -->
<a name="oben"></a> <!-- Hier ist der Anker für ganz oben -->

<h2>Inhaltsverzeichnis</h2>
<ul>
    <li><a href="#abschnitt1">Gehe zu Abschnitt 1</a></li>
    <li><a href="#abschnitt2">Gehe zu Abschnitt 2</a></li>
    <li><a href="#abschnitt3">Gehe zu Abschnitt 3</a></li>
</ul>

<!-- Die Textabschnitte weiter unten -->
<h3><a name="abschnitt1">Abschnitt 1: Einleitung</a></h3>
<p>Hier steht der Text zur Einleitung...</p>

<h3><a name="abschnitt2">Abschnitt 2: Hauptteil</a></h3>
<p>Hier steht der Text zum Hauptteil...</p>

<h3><a name="abschnitt3">Abschnitt 3: Schlusswort</a></h3>
<p>Hier steht das Schlusswort...</p>

<!-- Zurück nach oben -->
<p><a href="#oben">zum Inhaltsverzeichnis</a></p>

Was passiert hier genau?

Wenn du dir das obige Beispiel anschaust, siehst du das Zusammenspiel aus zwei wichtigen Elementen:

Der Anker (Das Ziel): Mit <a name="abschnitt1">...</a> schlägst du quasi einen unsichtbaren Pflock im Dokument ein. Das Attribut name="..." vergibt einen eindeutigen Namen für genau diese Stelle auf der Seite.
Der Sprung-Link (Der Auslöser): Im Inhaltsverzeichnis nutzt du das bekannte href-Attribut, setzt aber eine Raute (#) vor den Namen: href="#abschnitt1". Die Raute signalisiert dem Browser: "Achtung, verlasse nicht die Seite, sondern suche auf dieser aktuellen Seite nach dem Anker mit dem Namen 'abschnitt1' und scrolle sofort dorthin!"

Wichtig: Der Name beim Anker (name="xyz") wird komplett ohne Raute geschrieben. Die Raute wird nur im Inhaltsverzeichnis beim Link (href="#xyz") verwendet, um den Sprungbefehl zu aktivieren!

🛠️ Praktische Aufgabe für Karl

Erweitere nun dein bestehendes Lernprojekt um das Gelernte. Es gibt zwei To-Dos für dich:

In der bestehenden index.html:
Erweitere dein Menü in der unsortierten Liste (<ul>) um zwei externe Links und einen lokalen Link:
- Link 1: Führt zur SelfHTML-Beispiel-URL (siehe oben) mit der Beschriftung "Hilfe zu A-Tags".
- Link 2: Führt direkt zu Google und führt beim Anklicken sofort eine Suche nach "HTML A-Tag" aus. Tipp: Verwende hierfür diesen URL-Anhang: /search?q=HTML+A-Tag.
- Link 3 (lokal): Verlinke auf eine neue, lokale Datei namens glossar.html mit dem Link-Text "Glossar".
Erstelle die neue Datei glossar.html:
Diese Seite soll wie folgt aufgebaut sein:
- Eine Hauptüberschrift Glossar.
- Ein Inhaltsverzeichnis als unsortierte Liste, die zu den drei Tag-Überschriften "DIV", "SPAN" und "A" springt.
- Darunter die drei Abschnitte. Nutze dafür die <a name="xy">-Anker für die Überschriften, damit man vom Inhaltsverzeichnis dorthin springen kann.
- Nutze die unten bereitgestellten Erklärungstexte für die Tags.
- Ganz am Ende der Seite soll ein Link "zurück zum Inhaltsverzeichnis" stehen und natürlich ein Link zu deiner Startseite.

Die vorzugebenden Erklärungstexte für dein Glossar:

DIV: Das Divisor-Element (kurz für Division) teilt die Webseite in logische Bereiche auf. Es verhält sich wie ein Block-Element.
SPAN: Das Span-Element wird verwendet, um Textabschnitte innerhalb einer Zeile (Inline-Element) zu markieren oder zu gruppieren.
A: Das Anchor-Element (Anker) dient zur Erstellung von Hyperlinks zu anderen Webseiten oder internen Sprungmarken.

💡 Hilfe benötigt? Hier geht's zur Auflösung der Aufgabe (aber erst selbst versuchen! 😉)

So sieht deine erweiterte `index.html` aus:

...
    <ul>
        <!-- Hier stehen deine bisherigen Menüpunkte in der Liste -->
        <li><a href="https://selfhtml.org" target="_blank">Hilfe zu A-Tags</a></li>
        <li><a href="https://google.com" target="_blank">Google-Suche nach HTML A-Tag</a></li>
        <li><a href="glossar.html">Zum Glossar</a></li>
    </ul>
...

So sieht z.B. deine neue `glossar.html` aus:

<!DOCTYPE html>
<html>
<head>
    <title>Glossar</title>
</head>
<body>

    <!-- Anker für den Anfang der Seite -->
    <a name="glossar-start"></a>

    <h1>Glossar</h1>

    <h2>Inhaltsverzeichnis</h2>
    <ul>
        <li><a href="#tag-div">DIV (Divisor)</a></li>
        <li><a href="#tag-span">SPAN</a></li>
        <li><a href="#tag-a">A (Anchor)</a></li>
    </ul>

    <hr>

    <h3><a name="tag-div">DIV (Divisor)</a></h3>
    <p>Das Divisor-Element (kurz für Division) teilt die Webseite in logische Bereiche auf. Es verhält sich wie ein Block-Element.</p>

    <h3><a name="tag-span">SPAN</a></h3>
    <p>Das Span-Element wird verwendet, um Textabschnitte innerhalb einer Zeile (Inline-Element) zu markieren oder zu gruppieren.</p>

    <h3><a name="tag-a">A (Anchor)</a></h3>
    <p>Das Anchor-Element (Anker) dient zur Erstellung von Hyperlinks zu anderen Webseiten oder internen Sprungmarken.</p>

    <hr>

    <p><a href="#glossar-start">zurück zum Inhaltsverzeichnis</a></p>
    <p><a href="index.html">Zurück zur Startseite</a></p>

</body>
</html>