Bilder und Links in HTMLAktivitäten & Unterrichtsstrategien
Aktives Lernen funktioniert hier besonders gut, weil Schülerinnen und Schüler sofort sehen können, wie ihre Code-Entscheidungen die Webseite beeinflussen. Fehlerhafte Pfade führen zu sichtbaren Problemen wie fehlenden Bildern oder nicht funktionierenden Links, was direktes Feedback gibt und das Verständnis vertieft.
Lernziele
- 1Schülerinnen und Schüler demonstrieren die Einbindung von Bildern mit dem `<img>`-Tag und dem `src`-Attribut in eine HTML-Seite.
- 2Schülerinnen und Schüler erstellen Hyperlinks mit dem `<a>`-Tag, um externe und interne Ressourcen zu verknüpfen.
- 3Schülerinnen und Schüler erklären den Unterschied zwischen relativen und absoluten Pfaden für Bilder und Links.
- 4Schülerinnen und Schüler analysieren die Auswirkungen von fehlerhaften Pfadangaben auf die Funktionalität einer Webseite.
Möchten Sie einen vollständigen Unterrichtsentwurf mit diesen Lernzielen? Mission erstellen →
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.
Vorbereitung & Details
Implementieren Sie Bilder und Links in eine bestehende HTML-Seite.
Moderationstipp: Beobachten Sie während der Paararbeit, wie die Schülerinnen und Schüler ihre Dateistrukturen organisieren und Pfade diskutieren, um gezielt Fragen zu stellen, die ihr Verständnis vertiefen.
Setup: Präsentationsbereich im vorderen Teil des Raumes oder mehrere Lernstationen
Materials: Themen-Zuweisungskarten, Vorlage zur Unterrichtsplanung, Feedbackbogen für Mitschüler, Materialien für visuelle Hilfsmittel
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.
Vorbereitung & Details
Erklären Sie die Bedeutung von relativen und absoluten Pfaden für Links und Bilder.
Moderationstipp: Stellen Sie bei den Stationen sicher, dass jede Gruppe unterschiedliche Pfad-Konstellationen ausprobiert, damit sie die Unterschiede zwischen relativen und absoluten Pfaden selbst erleben.
Setup: Im Raum verteilte Tische/Stationen
Materials: Stationskarten mit Arbeitsanweisungen, Unterschiedliche Materialien je Station, Timer für die Rotation
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.
Vorbereitung & Details
Beurteilen Sie die Auswirkungen von fehlerhaften Links auf die Benutzerfreundlichkeit einer Webseite.
Moderationstipp: Im Link-Quiz achten Sie darauf, dass die Schülerinnen und Schüler nicht nur Antworten geben, sondern auch ihre Lösungswege erklären, um ihr Denken nachvollziehbar zu machen.
Setup: Präsentationsbereich im vorderen Teil des Raumes oder mehrere Lernstationen
Materials: Themen-Zuweisungskarten, Vorlage zur Unterrichtsplanung, Feedbackbogen für Mitschüler, Materialien für visuelle Hilfsmittel
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.
Vorbereitung & Details
Implementieren Sie Bilder und Links in eine bestehende HTML-Seite.
Setup: Präsentationsbereich im vorderen Teil des Raumes oder mehrere Lernstationen
Materials: Themen-Zuweisungskarten, Vorlage zur Unterrichtsplanung, Feedbackbogen für Mitschüler, Materialien für visuelle Hilfsmittel
Dieses Thema unterrichten
Erfahrene Lehrkräfte beginnen mit konkreten Beispielen aus dem Alltag der Schülerinnen und Schüler, etwa lokalen Ordnerstrukturen auf Schulrechnern. Vermeiden Sie abstrakte Erklärungen zu Pfaden, sondern lassen Sie die Schülerinnen und Schüler selbst experimentieren. Nutzen Sie Fehler als Lerngelegenheit, indem Sie gemeinsam im Browser prüfen, warum ein Bild nicht lädt oder ein Link nicht funktioniert.
Was Sie erwartet
Erfolgreiches Lernen zeigt sich darin, dass die Schülerinnen und Schüler Bilder und Links korrekt in HTML integrieren und dabei bewusst zwischen relativen und absoluten Pfaden wählen. Sie können Fehler selbstständig identifizieren und lösen sowie ihre Webseiten auf Benutzerfreundlichkeit überprüfen.
Diese Aktivitäten sind ein Ausgangspunkt. Die vollständige Mission ist das Erlebnis.
- Vollständiges Moderationsskript mit Lehrkraft-Dialogen
- Druckfertige Schülermaterialien, bereit für den Unterricht
- Differenzierungsstrategien für jeden Lerntyp
Vorsicht vor diesen Fehlvorstellungen
Häufige FehlvorstellungWährend der Stationenarbeit mit Pfad-Challenges beobachten Sie, dass Schülerinnen und Schüler annehmen, absolute Pfade seien immer besser.
Was Sie stattdessen lehren sollten
Lassen Sie die Schülerinnen und Schüler ein Projekt von einem USB-Stick auf einen Server kopieren und beide Versionen testen, um zu sehen, wie relative Pfade unabhängig vom Speicherort funktionieren.
Häufige FehlvorstellungWährend der Paararbeit zur persönlichen Startseite bemerken Sie, dass Schülerinnen und Schüler glauben, Bilder würden auch bei falschen Pfaden immer angezeigt.
Was Sie stattdessen lehren sollten
Fordern Sie die Paare auf, im Browser gezielt falsche Pfade einzutippen und die Auswirkungen (broken-image-Symbole) zu dokumentieren, um den Fehler sichtbar zu machen.
Häufige FehlvorstellungWährend der Gruppenaufgaben zu lokalen Links denken einige Schülerinnen und Schüler, Links funktionierten nur zu Internetseiten.
Was Sie stattdessen lehren sollten
Geben Sie den Gruppen die Aufgabe, Links zu lokalen Dateien in verschiedenen Ordnern zu erstellen und zu testen, um den Unterschied zwischen Web- und lokalen Links zu verdeutlichen.
Ideen zur Lernstandserhebung
Nach der Stationenarbeit erhalten die Schülerinnen und Schüler ein HTML-Fragment mit einem fehlerhaften Pfad. Sie identifizieren den Fehler und korrigieren ihn, um zu zeigen, dass sie relative und absolute Pfade unterscheiden können.
Während der Paararbeit zur persönlichen Startseite geben Sie den Schülerinnen und Schülern eine einfache HTML-Struktur mit Platzhaltern für Bilder in einem Unterordner. Sie fügen die korrekten <img>-Tags mit relativen Pfaden ein und erklären ihre Wahl.
Nach der Paararbeit tauschen die Schülerinnen und Schüler ihre Webseiten und prüfen gegenseitig die korrekte Implementierung von Bildern und Links. Sie geben sich Feedback zu zwei konkreten Verbesserungspunkten, etwa Pfadkorrekturen oder Tag-Syntax.
Erweiterungen & Unterstützung
- Fordern Sie schnelle Schülerinnen und Schüler auf, eine komplexere Webseite mit mehreren Unterordnern und gemischten Pfadtypen zu erstellen.
- Bei Unsicherheiten erhalten Schülerinnen und Schüler ein Arbeitsblatt mit Schritt-für-Schritt-Anleitungen für relative Pfade in verschachtelten Ordnern.
- Vertiefen Sie das Thema, indem Sie die Schülerinnen und Schüler eine einfache Navigation mit internen Links zu verschiedenen Abschnitten derselben Seite erstellen lassen.
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. |
Vorgeschlagene Methoden
Planungsvorlagen für Digitale Welten Gestalten: Informatik
Mehr in Web-Technologien: Eigene Inhalte gestalten
Das Internet und das World Wide Web
Die Schülerinnen und Schüler unterscheiden zwischen dem Internet als Infrastruktur und dem World Wide Web als Dienst.
2 methodologies
HTML: Die Struktur des Webs
Die Schülerinnen und Schüler lernen die grundlegende Syntax von HTML und erstellen einfache Webseiten mit Text und Überschriften.
2 methodologies
Listen und Tabellen in HTML
Die Schülerinnen und Schüler strukturieren Informationen mit geordneten und ungeordneten Listen sowie einfachen Tabellen.
2 methodologies
Einführung in CSS: Styling für das Web
Die Schülerinnen und Schüler lernen die Grundlagen von CSS zur visuellen Gestaltung von HTML-Elementen kennen.
2 methodologies
CSS-Selektoren und Eigenschaften
Die Schülerinnen und Schüler wenden verschiedene CSS-Selektoren an und gestalten Elemente mit grundlegenden Eigenschaften.
2 methodologies
Bereit, Bilder und Links in HTML zu unterrichten?
Erstellen Sie eine vollständige Mission mit allem, was Sie brauchen
Mission erstellen