HTML-Links: Externe und interne Hyperlinks erstellen

Einführung

Willkommen zum HTML-Links-Labor! Hyperlinks sind das Fundament des World Wide Web und ermöglichen es Benutzern, zwischen Seiten und Ressourcen zu navigieren. In HTML werden Links mit dem <a> (Anchor)-Tag erstellt.

In diesem Labor lernen Sie die wesentlichen Fähigkeiten zum Erstellen und Verwalten von Links. Sie beginnen mit der Erstellung eines einfachen externen Links und lernen dann, wie Sie ihn in einem neuen Browser-Tab öffnen. Danach erstellen Sie einen internen Link, der zu einem anderen Abschnitt auf derselben Seite springt. Schließlich fügen Sie einem Link einen Tooltip für eine bessere Benutzererfahrung hinzu.

Sie werden mit einer index.html-Datei im WebIDE arbeiten. Sie können Ihre Änderungen live sehen, indem Sie im LabEx-Interface zum Tab "Web 8080" wechseln.

Legen wir los!

Fügen Sie ein Tag mit dem href-Attribut für einen externen Link hinzu

In diesem Schritt erstellen Sie Ihren ersten Hyperlink. Der <a>-Tag, der für "Anchor" (Anker) steht, wird zur Definition eines Hyperlinks verwendet. Das wichtigste Attribut des <a>-Elements ist href, das die Ziel-URL des Links angibt.

Fügen wir einen Link zur LabEx-Website hinzu.

Öffnen Sie zuerst die Datei index.html im Dateiexplorer auf der linken Seite des WebIDE.

Suchen Sie nun das Element <h2>Section 1</h2> und fügen Sie den folgenden <a>-Tag innerhalb des <p>-Tags direkt danach ein.

<a href="https://labex.io">Visit LabEx</a>

Der Body Ihrer index.html-Datei sollte nun wie folgt aussehen. Beachten Sie den neuen Link innerhalb des ersten Abschnitts.

<body>
  <h1>Welcome to the HTML Links Lab</h1>
  <p>
    This page will be used to practice creating different kinds of HTML links.
  </p>

  <nav>
    <!-- Navigation links will be added here -->
  </nav>

  <div class="section">
    <h2>Section 1</h2>
    <p>
      <a href="https://labex.io">Visit LabEx</a>
    </p>
  </div>

  <div class="section">
    <h2>Section 2</h2>
    <p>
      This is the section we will link to from the top of the page. It is placed
      far down to demonstrate the page jump effect.
    </p>
  </div>
</body>

Nachdem Sie den Code hinzugefügt haben, speichern Sie die Datei (Strg+S oder Cmd+S). Wechseln Sie dann zum Tab "Web 8080", um Ihren neuen Link anzuzeigen. Ein Klick darauf bringt Sie zur LabEx-Homepage.

Setzen Sie das target-Attribut auf _blank für einen neuen Tab

In diesem Schritt lernen Sie, wie Sie einen Link in einem neuen Browser-Tab öffnen lassen. Standardmäßig öffnen sich Links im selben Tab. Um dieses Verhalten zu ändern, verwenden wir das target-Attribut.

Das Setzen von target="_blank" weist den Browser an, das verlinkte Dokument in einem neuen Tab oder Fenster zu öffnen. Dies ist eine gängige Praxis für externe Links, da es den Benutzer auf Ihrer Website hält und ihm gleichzeitig den Besuch der externen Ressource ermöglicht.

Lassen Sie uns den Link ändern, den Sie im vorherigen Schritt erstellt haben. Fügen Sie das Attribut target="_blank" zum <a>-Tag hinzu.

<a href="https://labex.io" target="_blank">Visit LabEx</a>

Der erste Abschnitt Ihrer aktualisierten index.html-Datei sollte nun diesen geänderten Link enthalten:

<div class="section">
  <h2>Section 1</h2>
  <p>
    <a href="https://labex.io" target="_blank">Visit LabEx</a>
  </p>
</div>

Speichern Sie die Datei und wechseln Sie zum Tab "Web 8080". Wenn Sie nun auf den Link "Visit LabEx" klicken, sollte er sich in einem neuen Browser-Tab öffnen, während Ihr Laborumgebungs-Tab geöffnet bleibt.

Erstellen Sie einen internen Link mit href zu einem ID-Anker

In diesem Schritt erstellen wir einen internen Link, auch bekannt als "Seitenanker" oder "Sprunglink". Diese Links ermöglichen es Benutzern, zu einem bestimmten Teil derselben Seite zu springen, was für lange Dokumente sehr nützlich ist.

Um einen internen Link zu erstellen, setzen Sie das href-Attribut auf ein Hash-Symbol (#), gefolgt von der id des Elements, zu dem Sie verlinken möchten. Zum Beispiel href="#section-name".

Fügen wir im <nav>-Element am Anfang unserer Seite einen Link hinzu, der zu "Section 2" springt.

Fügen Sie die folgende Zeile innerhalb des <nav>-Tags ein:

<a href="#section2">Jump to Section 2</a>

Der Navigationsbereich Ihrer index.html-Datei sollte nun wie folgt aussehen:

<nav>
  <!-- Navigation links will be added here -->
  <a href="#section2">Jump to Section 2</a>
</nav>

Speichern Sie die Datei und überprüfen Sie den Tab "Web 8080". Sie sehen den neuen Link oben. Wenn Sie ihn jetzt anklicken, passiert nichts, da wir den Zielanker noch nicht definiert haben. Das werden wir im nächsten Schritt tun.

Fügen Sie das id-Attribut zum Element für die Ankerung hinzu

Im vorherigen Schritt haben Sie einen Link erstellt, der auf #section2 verweist. Nun müssen Sie das Ziel für diesen Link erstellen. Dies geschieht durch die Verwendung des id-Attributs.

Das id-Attribut bietet eine eindeutige Kennung für ein HTML-Element auf einer Seite. Der Wert der id muss innerhalb des HTML-Dokuments eindeutig sein. Unser interner Link href="#section2" sucht nach einem Element mit id="section2".

Fügen wir diese id zum <h2>-Tag für Section 2 hinzu. Suchen Sie die folgende Zeile:

<h2>Section 2</h2>

Und ändern Sie sie, um das id-Attribut einzufügen:

<h2 id="section2">Section 2</h2>

Der zweite Abschnitt Ihrer aktualisierten index.html-Datei sollte nun wie folgt aussehen:

<div class="section">
  <h2 id="section2">Section 2</h2>
  <p>
    This is the section we will link to from the top of the page. It is placed
    far down to demonstrate the page jump effect.
  </p>
</div>

Speichern Sie die Datei und kehren Sie zum Tab "Web 8080" zurück. Klicken Sie auf den Link "Jump to Section 2" am oberen Rand der Seite. Der Browser sollte nun sanft zum "Section 2"-Überschrift scrollen.

In diesem letzten Schritt lernen Sie, wie Sie einem Link einen Tooltip hinzufügen. Ein Tooltip liefert zusätzliche, nicht wesentliche Informationen und erscheint typischerweise, wenn ein Benutzer mit der Maus über ein Element fährt. Dies kann die Zugänglichkeit und das Benutzererlebnis verbessern.

Wir können einem beliebigen Element, einschließlich eines Links, mithilfe des globalen title-Attributs einen Tooltip hinzufügen.

Fügen wir unserem externen Link zu LabEx einen beschreibenden Titel hinzu. Suchen Sie den Link, den Sie in den ersten beiden Schritten erstellt haben, und fügen Sie ihm ein title-Attribut hinzu.

<a href="https://labex.io" target="_blank" title="Go to the LabEx homepage"
  >Visit LabEx</a
>

Ihre endgültige index.html-Datei sollte nun alle Elemente enthalten, die wir während dieses Labs hinzugefügt haben. Der erste Abschnitt wird wie folgt aussehen:

<div class="section">
  <h2>Section 1</h2>
  <p>
    <a href="https://labex.io" target="_blank" title="Go to the LabEx homepage"
      >Visit LabEx</a
    >
  </p>
</div>

Speichern Sie die Datei ein letztes Mal. Gehen Sie zum Tab "Web 8080" und fahren Sie mit der Maus über den Link "Visit LabEx". Ein kleines Feld sollte erscheinen mit dem Text "Go to the LabEx homepage".

Zusammenfassung

Herzlichen Glückwunsch zum Abschluss des Labs! Sie haben die Grundlagen der Erstellung und Anpassung von Links in HTML gelernt.

In diesem Lab haben Sie geübt, wie Sie:

Das <a>-Tag mit dem href-Attribut verwenden, um externe Links zu erstellen.
Das target="_blank"-Attribut verwenden, um Links in einem neuen Tab zu öffnen.
Interne Seitenanker mit href="#id" für die Navigation innerhalb einer einzelnen Seite erstellen.
Das id-Attribut verwenden, um das Ziel für einen internen Link zu definieren.
Mit dem title-Attribut informative Tooltips zu Ihren Links hinzufügen, um eine bessere Benutzererfahrung zu erzielen.

Diese Fähigkeiten sind unerlässlich für den Aufbau von navigierbaren und benutzerfreundlichen Websites. Üben Sie weiter, um Ihre Kenntnisse in HTML zu vertiefen!

HTML-Links