Modul 3: Bilder und Links

lock
Bevorstehend

Bringe Leben in deine Webseite mit Bildern und Navigation

Ziele dieses Moduls
  • Sie koennen Bilder einbinden und Links mit relativen und absoluten Pfaden erstellen
    Anwenden

Webseiten ohne Bilder und Links wären langweilig! In diesem Modul lernst du, wie du Bilder einbindest und Links erstellst - die Grundbausteine des 'World Wide Web'.

Bilder einbinden

Mit dem <img>-Tag fügst du Bilder ein. Wichtig: Dieses Tag hat keinen Closing-Tag!

Wichtige Attribute:

  • src - Der Pfad zum Bild (erforderlich)
  • alt - Alternativtext für Screenreader und falls das Bild nicht lädt (erforderlich!)
  • width und height - Grösse des Bildes (optional)
<!-- Bild aus dem gleichen Ordner -->
<img src="portrait.jpg" alt="Mein Portrait">

<!-- Bild aus Unterordner -->
<img src="bilder/landschaft.jpg" alt="Berglandschaft" width="600">

<!-- Bild von externer Quelle -->
<img src="https://picsum.photos/400/300" alt="Zufallsbild" width="400">

Links erstellen

Mit dem <a>-Tag (anchor) erstellst du Links. Das href-Attribut gibt das Ziel an.

Arten von Links:

  • Externe Links: https://example.com (mit Protokoll)
  • Relative Links: kontakt.html oder ../index.html (zu anderen Seiten deiner Website)
  • Anker-Links: #top (zu einem Bereich auf der gleichen Seite)
  • E-Mail-Links: mailto:info@example.com
<!-- Externe Links -->
<a href="https://wikipedia.org">Wikipedia besuchen</a>
<a href="https://youtube.com" target="_blank">YouTube (neuer Tab)</a>

<!-- Relative Links (zu anderen Seiten deiner Site) -->
<a href="index.html">Zur Startseite</a>
<a href="galerie/fotos.html">Zur Galerie</a>

<!-- Bild als Link -->
<a href="grosse-version.jpg">
    <img src="thumbnail.jpg" alt="Klick für grosse Version">
</a>

Challenge

Übung: Deine Foto-Galerie

Erstelle eine einfache Galerie-Seite mit folgenden Elementen:

  • Eine <h1> mit dem Titel deiner Galerie (z.B. 'Meine Reisefotos')
  • Mindestens 4 Bilder mit beschreibenden alt-Texten
  • Unter jedem Bild eine kurze Beschreibung in einem <p>-Tag
  • Eine Navigation am Anfang mit Links zu 3 Bereichen (z.B. 'Natur', 'Städte', 'Menschen')

Bilder-Tipp: Du kannst kostenlose Platzhalter-Bilder verwenden: https://picsum.photos/400/300 (die Zahlen sind Breite/Höhe).

Note

Wichtig: Der alt-Text ist nicht optional! Er macht deine Webseite zugänglich für Menschen mit Sehbehinderung und hilft Suchmaschinen, deine Bilder zu verstehen.

Bonus-Challenge: Versuche, deine Bilder so zu verlinken, dass beim Klick eine grössere Version geöffnet wird.