HTML - Textlinks

Anchor-Tag

Das Anchor-Tag, dargestellt durch <a>, ist das wichtigste HTML-Element zum Erstellen von Textlinks. Um einen Textlink zu erstellen, müssen Sie den Text oder Inhalt, den Sie anklickbar machen möchten, in das <a>-Tag einschließen. Hier ist das grundlegende Format des Anchor-Tags:

<a href="ziel-url">Linktext</a>

Das <a>-Tag hat mehrere Attribute, die Sie verwenden können, um das Verhalten und Aussehen des Links zu ändern. Das wichtigste Attribut ist href, das die Ziel-URL des Links festlegt.

Um einen Textlink zu erstellen, der auf die Startseite einer Website verweist, würden Sie folgenden Code verwenden:

<a href="https://www.beispiel.de">Besuchen Sie Beispiel.de</a>

Wenn ein Benutzer auf den Linktext "Besuchen Sie Beispiel.de" klickt, wird er zur festgelegten URL, in diesem Fall "https://www.beispiel.de", weitergeleitet.

Href-Attribut

Das href-Attribut wird verwendet, um die Ziel-URL eines Textlinks festzulegen. Der Wert des href-Attributs kann entweder eine absolute oder eine relative URL sein.

Eine absolute URL ist eine vollständige Webadresse, die das Protokoll (z.B. "https://"), den Domainnamen und den Pfad zur spezifischen Seite oder Ressource enthält. Absolute URLs werden verwendet, wenn auf externe Websites oder Seiten außerhalb der eigenen Website verlinkt wird.

Eine relative URL hingegen ist ein Pfad, der relativ zur aktuellen Seite oder Website ist. Relative URLs werden verwendet, wenn auf Seiten oder Ressourcen innerhalb der eigenen Website verlinkt wird. Sie enthalten nicht das Protokoll oder den Domainnamen.

Beispiele für absolute und relative URLs:

Bei der Verwendung relativer URLs ermittelt der Browser die vollständige URL, indem er den relativen Pfad mit der URL der aktuellen Seite kombiniert.

Das href-Attribut kann auch verwendet werden, um auf E-Mail-Adressen mit dem mailto:-Protokoll zu verlinken oder um Telefonanrufe mit dem tel:-Protokoll zu starten.

Durch die Verwendung des Anchor-Tags und des href-Attributs können Sie anklickbare Textlinks erstellen, die es Benutzern ermöglichen, zu verschiedenen Seiten, Abschnitten oder Ressourcen innerhalb Ihrer Website oder externer Websites zu gelangen.

Links in einem neuen Fenster oder Tab öffnen

Standardmäßig öffnet sich die verlinkte Seite im gleichen Browserfenster oder Tab, wenn ein Benutzer auf einen Textlink klickt, und ersetzt die aktuelle Seite. Es kann jedoch Situationen geben, in denen Sie möchten, dass sich die verlinkte Seite in einem neuen Fenster oder Tab öffnet, sodass der Benutzer die aktuelle Seite geöffnet lassen kann.

Um dies zu erreichen, können Sie das target-Attribut im Anker-Tag verwenden. Das target-Attribut gibt an, wo das verlinkte Dokument geöffnet werden soll. Um einen Link in einem neuen Fenster oder Tab zu öffnen, setzen Sie den Wert des target-Attributs auf "_blank".

<a href="https://www.example.com" target="_blank">Besuchen Sie Example.com</a>

In diesem Fall öffnet sich die verlinkte Seite in einem neuen Browserfenster oder Tab, wenn ein Benutzer auf den Link "Besuchen Sie Example.com" klickt, abhängig von den Browsereinstellungen des Benutzers.

Es ist wichtig zu beachten, dass das Öffnen von Links in neuen Fenstern oder Tabs sparsam und nur bei Bedarf eingesetzt werden sollte, da es das Browsererlebnis des Benutzers stören kann, wenn es zu häufig verwendet wird.

Verlinken auf einen bestimmten Teil derselben Seite

Manchmal möchten Sie vielleicht auf einen bestimmten Abschnitt oder Teil derselben Seite verlinken, damit Benutzer schnell zu diesem Abschnitt springen können, ohne manuell scrollen zu müssen. Dies ist sehr nützlich für lange Seiten mit vielen Abschnitten oder für die Erstellung eines Inhaltsverzeichnisses.

Um auf einen bestimmten Teil derselben Seite zu verlinken, müssen Sie das id-Attribut verwenden, um Anker zu erstellen, und dann mit dem #-Symbol gefolgt vom id-Wert auf diese Anker verlinken.

Geben Sie zunächst dem Element, auf das Sie verlinken möchten, ein eindeutiges id-Attribut. Wenn Sie beispielsweise eine Überschrift haben, auf die Sie verlinken möchten, können Sie ihr ein id-Attribut wie folgt geben:

<h2 id="abschnitt1">Abschnitt 1</h2>

Erstellen Sie als Nächstes einen Textlink, der mit dem #-Symbol gefolgt vom id-Wert im href-Attribut auf den Anker verweist:

<a href="#abschnitt1">Gehe zu Abschnitt 1</a>

Wenn ein Benutzer auf den Link "Gehe zu Abschnitt 1" klickt, scrollt die Seite zu dem Element mit der id "abschnitt1".

Sie können mehrere Anker auf derselben Seite erstellen und mit ihren id-Werten darauf verlinken. So können Benutzer einfach zu verschiedenen Abschnitten der Seite navigieren, indem sie Textlinks verwenden.

Durch die Verwendung des target-Attributs und das Verlinken auf bestimmte Teile derselben Seite mit Ankern und dem id-Attribut können Sie ein benutzerfreundlicheres Navigationssystem für eine Website erstellen.

Link-Zustände

Links in HTML können in vier verschiedenen Zuständen existieren:

1. Standard: Der Standardzustand eines Links ist, wie er erscheint, wenn er nicht vom Benutzer interagiert wird.

2. Hover: Der Hover-Zustand wird ausgelöst, wenn der Benutzer den Mauszeiger über den Link bewegt, ohne darauf zu klicken.

3. Aktiv: Der aktive Zustand wird ausgelöst, wenn der Benutzer auf den Link klickt und die Maustaste gedrückt hält.

4. Besucht: Der besuchte Zustand gilt für Links, die der Benutzer bereits angeklickt und besucht hat.

Um diese verschiedenen Link-Zustände zu gestalten, können Sie CSS-Pseudoklassen verwenden. Pseudoklassen sind Schlüsselwörter, die Sie einem Selektor hinzufügen können, um einen speziellen Zustand des ausgewählten Elements anzugeben. Die Pseudoklassen für Link-Zustände sind:

a:link {
  color: blue;
  text-decoration: none;
}

a:visited {
  color: purple;
}

a:hover {
  color: red;
  text-decoration: underline;
}

a:active {
  color: green;
}

Gestaltung von Links mit CSS

Zusätzlich zur Gestaltung von Link-Zuständen können Sie CSS verwenden, um das Aussehen von Links an das Design Ihrer Website anzupassen. Einige gängige CSS-Eigenschaften zur Gestaltung von Links sind:

a {
  color: #333;
  text-decoration: none;
  font-weight: bold;
  background-color: #f0f0f0;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

a:hover {
  background-color: #333;
  color: #fff;
}

Durch die Kombination der Gestaltung von Link-Zuständen und die Verwendung von CSS-Eigenschaften zur Anpassung des Aussehens von Links können Sie ansprechende und benutzerfreundliche Textlinks erstellen, die die Navigationserfahrung auf Ihrer Website verbessern.