🔗 Hyperlinks in HTML

💡 Was du heute lernst:
Wie du Links erstellst - die Grundlage des Internets!

📌 Die Grundstruktur eines Links

Ein Link ist wie ein Zauberportal - du klickst und kommst woanders hin!

<a href="Zieladresse">Klickbarer Text</a>

📌 Die Bestandteile:
a = Anker (anchor)
href = Hypertext REFerence - das Ziel des Links
"Zieladresse" = Wohin der Link führt
Klickbarer Text = Was der Besucher sieht

🌍 1. Externe Links (zu anderen Webseiten)

<a href="https://www.google.de">Zu Google</a>

🔗 Zu Google

💡 Tipp: target="_blank" öffnet den Link in einem neuen Tab

📁 2. Interne Links (zu eigenen Seiten)

Link zu einer anderen Seite im gleichen Ordner:

Link zu einer Seite in einem Unterordner:

<a href="unterseiten/impressum.html">Impressum</a>

Link zu einer Seite im übergeordneten Ordner:

<a href="../index.html">Zur Startseite</a>

📧 3. E-Mail-Links

<a href="mailto:deine@email.de">Schreib mir eine E-Mail</a>

📧 Schreib mir eine E-Mail

<a href="mailto:deine@email.de?subject=Frage zur Webseite">Frage per E-Mail</a>

📧 Frage per E-Mail (mit Betreff)

🖼️ 4. Links zu Bildern und Dateien

<a href="mein_bild.jpg">Mein Bild anzeigen</a>

🖼️ Zufälliges Bild anzeigen

<a href="dokument.pdf">PDF-Dokument öffnen</a>

🏷️ 5. Links mit Beschreibung (title)

<a href="https://www.google.de" title="Hier kannst du alles suchen">Google</a>

Google

💡 Fahre mit der Maus über den Link → der Tooltip erscheint!

🔄 6. Verschiedene Link-Typen im Überblick

Link-Typ	Syntax	Beispiel
Extern	`href="https://..."`	Google
Intern	`href="seite.html"`	Nach oben
E-Mail	`href="mailto:..."`	E-Mail
Bild	`href="bild.jpg"`	Bild
Mit Beschreibung	`title="Beschreibung"`	Google

🎯 Übungsaufgabe

✏️ Aufgabe 1 - Deine Linksammlung:

Erstelle eine Seite mit:

3 externen Links zu deinen Lieblingsseiten
1 Link zu einer internen Seite (z.B. "Über mich")
1 E-Mail-Link
1 Link zu einem Bild
Bei jedem Link eine title-Beschreibung

✏️ Aufgabe 2 - Navigation:

Erstelle eine Navigationsleiste mit Links zu:

Startseite
Über mich
Meine Hobbys
Kontakt

Verwende dafür eine ungeordnete Liste (<ul>).

📋 Zusammenfassung

Das ist die wichtigste HTML-Struktur für Links!