Informatik · Klasse 8

Ideen für aktives Lernen

Bilder und Links in HTML

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.

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

• 20–50 Min.
• Partnerarbeit → Ganze Klasse
• 4 Aktivitäten

Aktivität 01

• Lernen durch Lehren
• 30 Min. · Partnerarbeit

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.

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.

Worauf zu achten ist

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.

• Verstehen
• Anwenden
• Analysieren
• Erschaffen
• Selbststeuerung
• Beziehungsfähigkeit

Aktivität 02

• Lernen an Stationen
• 45 Min. · Kleingruppen

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.

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.

Worauf zu achten ist

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.

• Erinnern
• Verstehen
• Anwenden
• Analysieren
• Selbststeuerung
• Beziehungsfähigkeit

Aktivität 03

• Lernen durch Lehren
• 20 Min. · Ganze Klasse

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.

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.

Worauf zu achten ist

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.

• Verstehen
• Anwenden
• Analysieren
• Erschaffen
• Selbststeuerung
• Beziehungsfähigkeit

Aktivität 04

• Lernen durch Lehren
• 50 Min. · Einzelarbeit

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.

Implementieren Sie Bilder und Links in eine bestehende HTML-Seite.

Worauf zu achten ist

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.

• Verstehen
• Anwenden
• Analysieren
• Erschaffen
• Selbststeuerung
• Beziehungsfähigkeit

Einige Hinweise zum Unterrichten dieser Einheit

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.

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.

---

Vorsicht vor diesen Fehlvorstellungen

• Während der Stationenarbeit mit Pfad-Challenges beobachten Sie, dass Schülerinnen und Schüler annehmen, absolute Pfade seien immer besser.

  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.

• Wä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.

  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.

• Während der Gruppenaufgaben zu lokalen Links denken einige Schülerinnen und Schüler, Links funktionierten nur zu Internetseiten.

  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.

---

In dieser Übersicht verwendete Methoden

• Lernen durch Lehren
• Lernen an Stationen