Aufgabe:

  1. Füge mindestens zwei Links in eine Box ein.

  2. Ein Link soll zu einer anderen Seite im Projekt führen, der andere zu einer externen Webseite.

  3. Ändere die Linktexte kreativ, z. B. kleine Easter-Eggs.

  4. Überprüfe im Browser, dass die Links funktionieren.

Erklärung:

Links verbinden Seiten oder führen zu externen Ressourcen. Sie werden mit <a>-Elementen erstellt:

<a href="ziel.html">Linktext</a>

  • href = Ziel des Links

  • Text zwischen <a> und </a> wird als klickbarer Link angezeigt

Zwei Linkarten:

  1. Externe Links (https://…)

    • Führen zu Webseiten im Internet

    • Beispiel: https://www.wikipedia.org

    • Öffnen eine neue Webseite, außerhalb des eigenen Projekts

  2. Interne Links (seite2.html)

    • Führen zu anderen HTML-Dateien innerhalb des Projekts

    • Nützlich, um mehrere Seiten miteinander zu verbinden

Technische Umsetzung:

1.Externer Link (öffnet eine Webseite im Internet):

<a href="https://example.com">Geheime Karte</a>

  • Öffnet die Webseite im Browser

<a href="seite2.html">Portal öffnen</a>

  • Öffnet eine andere HTML-Datei innerhalb des Projekts

  • Die Datei muss im gleichen Ordner wie index.html liegen oder der Pfad angepasst werden.

Projektstruktur-Beispiel:

projektordner/
│
├─ index.html
├─ seite2.html
├─ style.css
└─ bilder/

3. Zweite HTML-Seite erstellen (seite2.html)

  1. Erstelle im gleichen Ordner wie index.html eine neue Datei namens seite2.html.
  2. Öffne die Datei im Editor und schreibe den Grundaufbau:
    <!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Geheime Mission</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Geheime Mission</h1>
  <p>Hier verbirgt sich ein kleines Easter-Egg.</p>
</body>
</html>
  3. Speichere die Datei. Jetzt funktioniert der interne Link in index.html.

4. Links in eine Box einfügen

<section class="box">
  <h2>Mission Links</h2>
  <p>
    <a href="seite2.html">Portal öffnen</a><br>
    <a href="https://example.com" target="_blank">Geheime Karte</a>
  </p>
</section>

Grundlegende Fachkonzepte (zum Merken)

HTML-Link (<a>)

  • Verbindet Webseiten oder externe Ressourcen

  • Text zwischen den Tags = klickbarer Link

Interner Link

  • Verweist auf Dateien innerhalb des Projekts

  • Vorteil: Navigation zwischen mehreren Seiten

Externer Link

  • Verweist auf Webseiten im Internet

  • Vorteil: Inhalte können verlinkt werden, die nicht lokal gespeichert sind

Pfad / Path

  • Gibt den Speicherort der verlinkten Datei an

  • Beispiele:

    • seite2.html → gleiche Ebene

    • pages/seite2.html → Unterordner

target="_blank"

  • Öffnet den Link in einem neuen Browser-Tab

  • Praktisch für externe Webseiten

Last modified: Tuesday, 16 December 2025, 9:19 AM