Links in HTML

Grundlegende Links

Links werden mit dem <a>-Element (Anchor) erstellt:

<a href="https://www.example.com">Besuche Example.com</a>

Relative und absolute Pfade

<!-- Absolute URL -->
<a href="https://www.example.com/seite.html">Absolute URL</a>

<!-- Relative URL (im gleichen Verzeichnis) -->
<a href="seite.html">Relative URL</a>

<!-- Relative URL (in einem Unterverzeichnis) -->
<a href="unterordner/seite.html">Seite im Unterordner</a>

<!-- Relative URL (im übergeordneten Verzeichnis) -->
<a href="../seite.html">Seite im übergeordneten Ordner</a>

Link-Attribute

<!-- Link in neuem Tab öffnen -->
<a href="https://www.example.com" target="_blank">In neuem Tab öffnen</a>

<!-- Tooltip beim Hover -->
<a href="https://www.example.com" title="Besuche Example.com">Hover für mehr Info</a>

<!-- E-Mail-Link -->
<a href="mailto:mail@example.com">E-Mail senden</a>

<!-- Telefon-Link -->
<a href="tel:+491234567890">Anrufen</a>

<!-- Download-Link -->
<a href="dokument.pdf" download>PDF herunterladen</a>

Fragment-Identifier (Anker innerhalb der Seite)

<!-- Sprungmarke definieren -->
<h2 id="abschnitt2">Abschnitt 2</h2>

<!-- Link zur Sprungmarke -->
<a href="#abschnitt2">Zu Abschnitt 2 springen</a>

<!-- Link zu einer Sprungmarke auf einer anderen Seite -->
<a href="seite.html#abschnitt3">Zu Abschnitt 3 auf anderer Seite</a>

Übung: Navigation erstellen

Aufgabe: Navigation und Verlinkung für den Blog erstellen

1. Aktualisieren Sie alle bisherigen Seiten Ihres Blogs (index.html, ueber-mich.html, interessen.html), indem Sie einen Navigationsbereich hinzufügen:

   • Erstellen Sie am Anfang jeder Seite ein Navigationsmenü mit Links zu allen anderen Seiten
   • Das Menü soll immer die gleichen Links enthalten (Startseite, Über mich, Interessen, Blogbeiträge)

2. Erstellen Sie eine neue Seite “blog.html” mit:

   • Der gleichen Grundstruktur und Navigation wie die anderen Seiten
   • Einer Hauptüberschrift “Meine Blogbeiträge”
   • Mindestens 3 Blog-Artikel-Vorschauen mit:
     • Einer Überschrift als Link zu einem vollständigen Artikel
     • Einem kurzen Vorschautext
     • Einem “Weiterlesen…”-Link, der zum vollständigen Artikel führt

3. Erstellen Sie für jeden Blogartikel eine eigene HTML-Datei:

   • z.B. “artikel1.html”, “artikel2.html”, “artikel3.html”
   • Jeder Artikel soll die Navigation enthalten
   • Der vollständige Artikeltext sollte mehrere Absätze umfassen
   • Fügen Sie am Ende jedes Artikels einen “Zurück zur Übersicht”-Link ein

4. Auf der Interessen-Seite:

   • Fügen Sie bei mindestens 3 Ihrer Interessen Links zu externen Ressourcen hinzu
   • Diese Links sollen in neuen Tabs geöffnet werden (target=“_blank”)

5. Auf der “Über mich”-Seite:

   • Erstellen Sie ein Inhaltsverzeichnis am Anfang der Seite mit Ankerlinks zu den verschiedenen Abschnitten
   • Fügen Sie Sprungmarken (IDs) zu den Abschnitten hinzu
   • Erstellen Sie am Ende jedes Abschnitts einen “Nach oben”-Link

6. Erstellen Sie eine Kontakt-Seite “kontakt.html” mit:

   • Der gleichen Navigation wie die anderen Seiten
   • Einer E-Mail-Verknüpfung (mailto:)
   • Einem Telefon-Link (tel:) (Sie können eine fiktive Nummer verwenden)
   • Einem Link zum Herunterladen einer Beispiel-Datei (z.B. einer Visitenkarte oder eines Lebenslaufs)

Bonus

Erstellen Sie eine “breadcrumb”-Navigation auf allen Unterseiten, die den Pfad von der Startseite zur aktuellen Seite zeigt (z.B. “Startseite > Blog > Artikel 1”). Gestalten Sie die Breadcrumb-Navigation mit Unicode-Zeichen als Trennelemente (z.B. » oder ›) und verlinken Sie alle Elemente ausser der aktuellen Seite.