Informatik · Klasse 8 · Web-Technologien: Eigene Inhalte gestalten · 2. Halbjahr

Bilder und Links in HTML

Die Schülerinnen und Schüler integrieren Bilder und Hyperlinks in ihre HTML-Dokumente.

• KMK Bildungsstandards
• KMK: Sekundarstufe I - Implementieren
• KMK: Sekundarstufe I - Kommunizieren und Kooperieren

Über dieses Thema

Das Thema Bilder und Links in HTML ermöglicht Schülerinnen und Schüler der Klasse 8, interaktive und visuell ansprechende Webseiten zu gestalten. Sie lernen, Bilder mit dem <img>-Tag und dem src-Attribut einzubinden sowie Hyperlinks mit dem <a>-Tag zu erstellen. Ein zentraler Aspekt ist der Umgang mit relativen und absoluten Pfaden: Relative Pfade beziehen sich auf die Dateistruktur des Projekts, absolute auf vollständige URLs. Fehlerhafte Pfade führen zu nicht ladenden Bildern oder defekten Links, was die Benutzerfreundlichkeit stark mindert. Durch praktische Implementierung in bestehenden HTML-Seiten üben die Schülerinnen und Schüler, wie Inhalte die Nutzererfahrung verbessern.

Im Rahmen der Einheit Web-Technologien und der KMK-Standards für Sekundarstufe I fördert dieses Thema Kompetenzen im Implementieren digitaler Inhalte sowie im Kommunizieren und Kooperieren. Schülerinnen und Schüler erwerben systematisches Denken, indem sie Struktur, Pfade und Funktionalität verknüpfen. Sie beurteilen, wie fehlerfreie Links die Navigation erleichtern und Kooperation in Projekten unterstützen.

Active Learning ist hier besonders wirksam, da Schülerinnen und Schüler direkt mit Dateien experimentieren, Fehler wie broken images beobachten und korrigieren können. Solche hands-on-Aktivitäten machen Pfadkonzepte greifbar, fördern Problemlösung und erhöhen die Motivation durch sichtbare Erfolge.

Leitfragen

1. Implementieren Sie Bilder und Links in eine bestehende HTML-Seite.
2. Erklären Sie die Bedeutung von relativen und absoluten Pfaden für Links und Bilder.
3. Beurteilen Sie die Auswirkungen von fehlerhaften Links auf die Benutzerfreundlichkeit einer Webseite.

Lernziele

• Schülerinnen und Schüler demonstrieren die Einbindung von Bildern mit dem `<img>`-Tag und dem `src`-Attribut in eine HTML-Seite.
• Schülerinnen und Schüler erstellen Hyperlinks mit dem `<a>`-Tag, um externe und interne Ressourcen zu verknüpfen.
• Schülerinnen und Schüler erklären den Unterschied zwischen relativen und absoluten Pfaden für Bilder und Links.
• Schülerinnen und Schüler analysieren die Auswirkungen von fehlerhaften Pfadangaben auf die Funktionalität einer Webseite.

Bevor es losgeht

Grundlagen der HTML-Struktur

Warum: Schüler müssen die grundlegende Syntax von HTML-Tags und die Bedeutung von Elementen verstehen, um Bilder und Links korrekt einfügen zu können.

Dateisysteme und Ordnerstrukturen

Warum: Ein Verständnis dafür, wie Dateien in Ordnern organisiert sind, ist notwendig, um relative und absolute Pfade für Bilder und Links zu begreifen.

Schlüsselvokabular

Hyperlink	Ein Link, der es Benutzern ermöglicht, von einer Webseite zu einer anderen zu navigieren oder zu einem anderen Abschnitt derselben Seite zu springen.
src-Attribut	Das Attribut im `<img>`-Tag, das den Pfad zur Bilddatei angibt, die angezeigt werden soll.
relativer Pfad	Ein Pfad, der die Position einer Datei oder eines Bildes relativ zum aktuellen Speicherort angibt, z.B. `bilder/logo.png`.
absoluter Pfad	Ein vollständiger Pfad zu einer Datei oder Webseite, der mit einem Protokoll (wie `http://` oder `https://`) beginnt oder ein Wurzelverzeichnis angibt, z.B. `/bilder/logo.png` oder `https://www.beispiel.de/bilder/logo.png`.
Broken Image	Ein Bild, das auf einer Webseite nicht angezeigt werden kann, oft verursacht durch einen falschen Pfad oder eine nicht existierende Datei.

Vorsicht vor diesen Fehlvorstellungen

Häufige Fehlvorstellung

Absolute Pfade sind immer besser als relative.

Was Sie stattdessen lehren sollten

Absolute Pfade funktionieren nur auf spezifischen Servern, relative machen Projekte portabel. Active Learning mit Dateiordnern zeigt Schülerinnen und Schülern direkt, wie relative Pfade unabhängig vom Standort laden, und fördert Experimentieren mit Ordnerstrukturen.

Häufige Fehlvorstellung

Bilder laden immer, auch bei falschem Pfad.

Was Sie stattdessen lehren sollten

Falsche Pfade erzeugen broken-image-Symbole, was die Seite unansehnlich macht. Pair-Tests im Browser machen diesen Fehler sichtbar und lehren schnelle Diagnose durch Pfadüberprüfung.

Häufige Fehlvorstellung

Links funktionieren nur zu Internetseiten.

Was Sie stattdessen lehren sollten

Lokale Dateien und relative Pfade zu Ordnern sind ebenso möglich. Gruppenaufgaben mit lokalen Links demonstrieren dies praxisnah und klären den Kontext von Web vs. lokal.

Ideen für aktives Lernen

Paararbeit: Persönliche Startseite erweitern

Jede Paarung erhält eine Basis-HTML-Seite. Fügen Sie ein eigenes Bild mit relativem Pfad ein und verlinken Sie es zu einer lokalen Datei. Testen Sie im Browser und korrigieren Sie Pfadfehler gemeinsam.

30 Min.·Partnerarbeit

Lernen an Stationen: Pfad-Challenges

Richten Sie Stationen ein: relative Pfade zu Bildern, absolute Links zu Webseiten, gemischte Pfade und Fehlerdiagnose. Gruppen rotieren, dokumentieren Erfolge und Probleme an jeder Station.

45 Min.·Kleingruppen

Whole Class: Link-Quiz und Review

Projektieren Sie eine fehlerhafte Webseite. Die Klasse identifiziert broken Links und Bilder gemeinsam, schlägt Korrekturen vor und implementiert sie live im Editor.

20 Min.·Ganze Klasse

Individual: Portfolio mit Medien

Jeder Schüler erstellt eine HTML-Seite mit drei Bildern und zwei Links zu eigenen Arbeiten. Verwenden Sie relative Pfade und testen Sie Portabilität durch Kopieren des Ordners.

50 Min.·Einzelarbeit

Bezüge zur Lebenswelt

• Webentwickler bei Online-Shops wie Zalando nutzen Bilder und Links, um Produkte zu präsentieren und Kunden durch den Kaufprozess zu leiten. Sie müssen sicherstellen, dass alle Bilder korrekt geladen werden und die Links zu den Produktseiten funktionieren, um den Umsatz zu maximieren.
• Journalisten und Redakteure bei Nachrichtenportalen wie Spiegel Online verwenden Bilder und Links, um Artikel visuell ansprechend zu gestalten und zusätzliche Informationen oder Quellen anzubieten. Korrekte Links sind essenziell, um die Glaubwürdigkeit zu wahren und den Lesern den Zugang zu weiterführenden Inhalten zu ermöglichen.

Ideen zur Lernstandserhebung

Lernstandskontrolle

Geben Sie jedem Schüler ein HTML-Fragment mit einem fehlerhaften Bild- oder Link-Pfad. Bitten Sie die Schüler, den Fehler zu identifizieren und den korrekten Pfad (relativ oder absolut) anzugeben, damit das Element korrekt angezeigt wird.

Kurze Überprüfung

Stellen Sie den Schülern eine einfache HTML-Struktur mit Platzhaltern für Bilder und Links. Bitten Sie sie, die entsprechenden Tags und Attribute einzufügen und dabei relative Pfade zu verwenden, um auf Bilder in einem Unterordner `assets` zu verweisen.

Gegenseitige Bewertung

Die Schüler arbeiten in Paaren an einer einfachen Webseite. Ein Schüler fügt Bilder ein, der andere Links. Anschließend tauschen sie die Seiten und prüfen gegenseitig die korrekte Implementierung der Pfade und Tags. Sie geben sich Feedback zu maximal zwei Verbesserungspunkten.

Häufig gestellte Fragen

Wie bindet man Bilder in HTML ein?

Verwenden Sie das <img>-Tag mit src-Attribut, z. B. <img src="bild.jpg" alt="Beschreibung">. Geben Sie relative Pfade wie "images/foto.jpg" für Ordner an. Das alt-Attribut sorgt für Barrierefreiheit. Testen Sie immer im Browser, um Ladeprobleme früh zu erkennen. Dies verbindet Syntax mit praktischer Funktionalität.

Was ist der Unterschied zwischen relativen und absoluten Pfaden?

Relative Pfade starten vom HTML-Dokument aus, z. B. "bild.jpg" oder "../bild.jpg". Absolute Pfade sind vollständige Adressen wie "https://example.com/bild.jpg". Relative eignen sich für Projekte, absolute für externe Ressourcen. Active Experimente mit Ordnern zeigen Portabilitätsvorteile relatives Pfades.

Wie wirkt sich ein fehlerhafter Link auf die Webseite aus?

Fehlerhafte Links führen zu 404-Fehlern oder nicht ladenden Inhalten, was Nutzer frustriert und die Glaubwürdigkeit mindert. Schülerinnen und Schüler lernen durch Tests, dass gute Pfade Navigation erleichtern. Überprüfen Sie Pfade systematisch und nutzen Sie Browser-Developer-Tools für Diagnose.

Wie unterstützt Active Learning beim Lernen von HTML-Bildern und Links?

Active Learning aktiviert Schülerinnen und Schüler durch direkte Bearbeitung von Dateien und sofortiges Testen im Browser. Sie entdecken Fehler wie broken images selbst, diskutieren Lösungen in Gruppen und iterieren Designs. Dies stärkt Problemlösung, macht Syntax greifbar und verbindet Theorie mit sichtbaren Ergebnissen in 45-minütigen Sessions.