Medien und Informatik verstehen

Webseiten mit HTML und Quarto

Richard Conrardy

25.11.2026

Kompetenzindikator

• MI.1.3: Die Schülerinnen und Schüler können Gedanken, Meinungen, Erfahrungen und Wissen in Medienbeiträge umsetzen und unter Einbezug der Gesetze, Regeln und Wertesysteme auch veröffentlichen.
  • MI.1.3.f: können Medien nutzen, um ihre Gedanken und ihr Wissen vor Publikum zu präsentieren und/oder zu veröffentlichen; können Wirkungen eigener Medienbeiträge einschätzen und bei der Produktion entsprechend berücksichtigen.
  • MI.1.3.g: können mit eigenen und fremden Inhalten Medienbeiträge herstellen und berücksichtigen dabei die rechtlichen Rahmenbedingungen sowie Sicherheits- und Verhaltensregeln.
  • MI.1.3.h: können allein und in Arbeitsteams mit medialen Möglichkeiten experimentieren und sich darüber austauschen.

Heute wird aus einem Gegenstand im Schulhaus ein verständlicher Medienbeitrag. Der technische Weg führt von einfachen HTML-Strukturen zu einer vorbereiteten Quarto-Website. Entscheidend ist dabei nicht die technische Raffinesse, sondern eine gute, verantwortbare Erklärung für ein bestimmtes Publikum.

Drei Ebenen

1. Gegenstand verstehen
2. Beitrag für ein Publikum gestalten
3. Kleine Webseite erstellen

Wie wird aus einem Gegenstand ein verständlicher, verantwortungsvoller Medienbeitrag?

Die Leitfrage begleitet den ganzen Nachmittag. Sie verbindet Beobachten, fachliches Erklären, Bildgestaltung, technische Umsetzung und Verantwortung beim Veröffentlichen.

Eine Kiste

Ein banaler Gegenstand?

Was könnte man daran erklären?

Sammeln Sie Fragen und Bemerkungen für einen Medienbeitrag.

Wenn möglich eine reale RAKO-Box vorne zeigen. Es geht zuerst nicht um richtige Antworten, sondern um präzise Fragen: Material, Form, Rippen, Masse, Stapelbarkeit, Beschriftung, Transport, Herstellung, Einsatz. Fragen sichtbar sammeln.

Genau hinschauen

	Beispiel
Beobachtung	Die Seitenwand hat Rippen.
Vermutung	Die Rippen erhöhen vermutlich die Stabilität.
geprüfte Erklärung	Die Rippen versteifen die Wand gegen Verformung.

Sichtbares Beschreiben ist noch kein fachlich geprüftes Erklären.

Die Tabelle langsam lesen und die Unterschiede herausarbeiten. Eine Bewertung wie «nachhaltiger als Karton» oder eine Handlungsanweisung wie «nicht überladen» sind nochmals andere Aussageformen. In den Gruppen sollen Vermutungen später ausdrücklich markiert und überprüfbare Quellen gesucht werden.

Gleiche Box, anderer Beitrag

Ziel	Leitfrage
erklären	Warum ist die Box stabil?
instruieren	Wie stapelt man sie sicher?
überzeugen	Warum ein einheitliches Boxensystem?
hinterfragen	Wann ist Kunststoff ökologisch sinnvoll?

Auftrag: Wählt eine Absicht. Formuliert dazu eine Frage, die ein bestimmtes Publikum beantworten können soll.

Arbeitet zu zweit oder zu dritt. Entscheidet euch für eine der vier Absichten oder wählt eine eigene. Formuliert eine konkrete Frage und nennt Publikum sowie ein passendes Bild. Anschliessend kurz vergleichen: Wie verändern sich Sprache, Bilder, Quellen und Ton? Damit wird deutlich, dass Gestaltung immer mit einer kommunikativen Absicht beginnt.

Publikum und Wirkung

Für wen schreiben wir?

• Klasse
• neue Lehrpersonen
• Eltern
• Hausdienst
• fachlich interessierte Jugendliche

Was darf ich voraussetzen? Was muss ich erklären?

Die Zielgruppe muss nicht gross sein; sie muss konkret sein. Dieselbe Erklärung kann für eine fünfte Klasse anders aufgebaut sein als für den Hausdienst oder eine Schulleitung.

Eine Absicht haben

Ein Medienbeitrag soll beim Publikum etwas auslösen.

Darum braucht er eine Absicht.

Ein Beitrag kann informieren, erklären, instruieren, überzeugen, warnen oder dokumentieren. Es darf Nebenwirkungen geben; trotzdem braucht die Seite eine dominante Absicht – sonst fehlen Auswahlkriterien für Inhalt und Gestaltung.

Zielgruppenwechsel

Eine Feuerschutztür trennt Brandabschnitte und darf nicht blockiert werden.

Formuliert den Satz für:

• eine 5. Klasse
• neue Lehrpersonen
• ein Schild direkt an der Tür

Vergleichen: Was wurde vereinfacht, ergänzt oder zugespitzt? Nicht nach «schön» urteilen, sondern nach Zweck und Zielgruppe.

HTML, CSS und JavaScript

HTML beschreibt, was etwas ist.

HTML beschreibt Überschriften, Absätze, Bilder und Links. CSS gestaltet die Darstellung. JavaScript reagiert auf Eingaben oder verändert die Seite. Der Browser kann eine HTML-Datei auch ohne CSS und JavaScript öffnen.

HTML: Inhalt und Struktur

<!doctype html>
<html lang="de">
<head><meta charset="utf-8"><title>Meine Seite</title></head>
<body>
  <!-- Ein Absatz ist sichtbarer Inhalt. -->
  <p>Das ist meine Webseite.</p>
</body>
</html>

Im Browser: Das ist meine Webseite.

Dieses Beispiel ist vollständig: Als index.html gespeichert, lässt es sich direkt im Browser öffnen. head enthält Metadaten und den Titel des Browser-Tabs; im body steht der sichtbare Inhalt. Der HTML-Kommentar wird im Browser nicht angezeigt und erklärt hier den Code.

CSS: Aussehen

/* Dieser Absatz wird blau und gut lesbar. */
p {
  color: #145a8d;
  font-family: sans-serif;
}

Hallo in Blau!

Der Codeblock zeigt normales CSS für eine Datei style.css. Das Ergebnis steht direkt darunter. Dort verwenden wir ausnahmsweise das style-Attribut, damit die Beispielgestaltung nur dieses eine Element betrifft und nicht in die Foliengestaltung eingreift.

JavaScript: Verhalten

<!-- Beim Klick ändert JavaScript den Text. -->
<button
  style="padding: 0.5rem 1rem;"
  onclick="this.textContent = 'Danke!'">
  Klick mich
</button>

Das Ergebnis steht direkt unter dem Code und kann angeklickt werden. Das onclick-Attribut enthält JavaScript, das auf den Klick reagiert und den Text der Schaltfläche ändert. Für grössere Projekte würde JavaScript normalerweise in einer separaten Datei stehen. Es genügt hier das Prinzip: HTML = Inhalt, CSS = Aussehen, JavaScript = Verhalten.

Mit KI eine Mini-Seite verstehen

Lasst eine KI eine kleine index.html mit Inline-CSS und JavaScript erstellen.

Dann erklärt ihr euch gegenseitig:

• Was ist Inhalt?
• Was gestaltet CSS?
• Was löst JavaScript aus?

Arbeitsauftrag: «Erstelle eine sehr einfache Webseite über eine Feuerschutztür mit einem Absatz, einer Farbe und einer Klick-Reaktion. Verwende Kommentare, Inline-CSS und JavaScript.» Die Gruppen dürfen den Code übernehmen, müssen ihn aber Zeile für Zeile prüfen, im Browser testen und mindestens eine sichtbare Änderung selbst vornehmen. Ziel ist nicht, KI-Code unkritisch zu nutzen, sondern seine Funktion zu verstehen.

Quarto und Feldauftrag

Von HTML zu Quarto

Markdown · YAML · Bilder

↓

Quarto erstellt HTML

↓

Webseite im Browser

Quarto nimmt technische Routine ab: Seitengerüst, Navigation, Layout, Inhaltsverzeichnis und einheitliches Design. Es entscheidet aber nicht, was wichtig oder korrekt ist, ob Bilder sinnvoll gewählt sind, ob Rechte geklärt sind oder ob das Publikum etwas versteht.

Derselbe Inhalt, knapp notiert

---
title: "Warum ist diese Box gerippt?"
---

![Graue Kunststoffbox mit Rippen.](bilder/rako.jpg)

## Beobachtung
Die Seitenwände sind gerippt.

Quarto ist produktiver als reines HTML – HTML bleibt die Grundlage.

Die vorbereitete Projektstruktur verschiebt den Schwerpunkt bewusst auf Auswahl, Erklärung, Bilder, Alternativtexte, Quellen und Wirkung. Keine Zeit für das Konfigurieren einer Website verlieren.

Eure Website

schulhaus-technik/
├── _quarto.yml
├── index.qmd
├── gruppe-01.qmd
├── gruppe-02.qmd
└── bilder/

Jede Gruppe erstellt eine Frage – eine Seite.

Pflichtbestandteile der Gruppenseite: Titel als Frage, mindestens zwei eigene Bilder, Alternativtexte, Bildlegende, kurze Erklärung, Quellenhinweis sowie Sicherheits- oder Handlungshinweis.

Auftrag: Schulhaus erklärt

Bildet Dreiergruppen und erstellt einen Medienbeitrag zu einem Gegenstand oder System im PH-Gebäude.

1. Wählt ein erklärbares Phänomen.
2. Formuliert eine Leitfrage für ein bestimmtes Publikum.
3. Dokumentiert mit Übersicht, Details und Kontext.
4. Trennt Beobachtung, Vermutung und überprüfte Information.
5. Erstellt daraus eine verständliche Quarto-Seite.

Mögliche Gegenstände: Feuerschutztür, Lüftung, Arbeitsbank, Access Point, Nähmaschine, Beamer oder Fluchtwegmarkierung. Nicht gesucht ist «Hier ist ein Gegenstand», sondern eine beantwortbare Frage wie «Warum darf diese Tür nicht blockiert werden?» oder «Warum gibt es hier einen Luftauslass?»

45 Minuten im Schulhaus

Fachlichkeit

beobachten und prüfen

Dokumentation

fotografieren und notieren

Redaktion

für Publikum schreiben

Nach 15 Minuten Rollen wechseln.

Jede Gruppe sammelt mindestens fünf Erklärfragen, wählt eine Leitfrage und bestimmt Zielpublikum sowie Kommunikationsziel. Notiert wichtigste Beobachtung, unsichtbare Zusammenhänge, offene Prüffragen und das, was nicht gezeigt werden darf. Fotografiert eine Übersicht, zwei bis vier Details und ein Kontextbild. Bildinformationen gleich notieren: Was ist zu sehen, wozu dient das Bild, wer hat es wann aufgenommen? Nichts fotografieren, das Personen, Zugangsdaten, Schlüssel, private Bildschirme, vertrauliche oder sicherheitskritische Informationen zeigt. Nichts blockieren, öffnen, ausschalten oder in Betrieb setzen.

Material zu einer Geschichte ordnen

Erst ordnen, dann schreiben

Was wissen wir sicher?

Was klingt nur plausibel?

Was müssen wir noch belegen?

Die Gruppen sichten die Bilder, löschen klar misslungene Aufnahmen und markieren Vermutungen. Dann klären sie die wichtigste Aussage, offene Fragen und Sicherheitsaspekte. Fachlich vorsichtige Formulierungen sind besser als unbelegte Gewissheiten.

Storyboard: eine Frage gut beantworten

1. Frage als Titel
2. Bild und Kurzantwort
3. Beobachtung und Erklärung
4. Bedeutung und sicher handeln
5. Quellen und Bildnachweise

Regel: Eine kleine Webseite erklärt nicht alles. Sie beantwortet eine Frage gut. Diese Struktur zuerst auf Papier oder in Notizen festlegen, erst danach die Quarto-Seite füllen.

Gute Leitfragen

• Was macht ein Access Point – und was nicht?
• Warum darf diese Tür nicht blockiert werden?
• Wie entsteht aus zwei Fäden eine Naht?
• Warum hält eine Arbeitsbank ein Werkstück fest?
• Warum gibt es hier einen Luftauslass?

Die Beispiele zeigen die gewünschte Präzision: keine Gegenstandssammlung, sondern eine verständliche, beantwortbare Frage. Die Gruppe entscheidet sich nun verbindlich für eine Leitfrage.

Veröffentlichen und prüfen

Social Media verändert den Beitrag

Kürzer. Schneller. Weiter.

Ein Link, ein Bild und eine Überschrift entscheiden oft, ob jemand weiterliest.

Eine Website kann über soziale Medien sehr schnell Aufmerksamkeit erhalten. Das verändert die Gestaltung: Titelbild, Überschrift und erster Satz müssen verständlich sein, ohne zu täuschen. Gleichzeitig kann eine verkürzte Darstellung Kontext verlieren. Die Gruppen sollen ihren ersten Bildschirm als Social-Media-Vorschau mitdenken.

Vor dem Teilen

Frage	Prüfen
Darf ich das Bild verwenden?	Urheberschaft und Lizenz
Darf die Person sichtbar sein?	Einwilligung und Kontext
Ist die Behauptung belastbar?	Quelle und Beleg

Keine Rechtsvorlesung, sondern drei praktische Prüfungen. Eigene Bilder sind am einfachsten, aber auch sie dürfen niemanden ungewollt zeigen oder Sicherheitsprobleme schaffen. Bei fremdem Material sind Urheberrecht, Lizenz und Quellenangabe relevant. Technische Aussagen nicht als Tatsachen ausgeben, wenn sie nur Vermutungen sind.

Leseauftrag: «Doppelgänger»

Übungsblatt

Lest die Einleitung und die Grafik auf den Seiten 3–5.

1. Wie gelangen Menschen von Social Media auf eine Zielseite?
2. Welche Elemente sollen Vertrauen erzeugen?
3. Welche Verantwortung haben Plattformen, Absender und Publikum?

Arbeitszeit: etwa 10 Minuten, zunächst allein lesen, dann zu zweit austauschen. Der Bericht des Bayerischen Landesamts für Verfassungsschutz dokumentiert die Kampagne «Doppelgänger»: gefälschte Profile und nachgeahmte Nachrichtenwebseiten leiteten über klickbare Inhalte auf Desinformation weiter. Der Auftrag nutzt nur die Einleitung und das Ablaufdiagramm; technische Details zu Servern sind nicht Gegenstand der Sitzung.

Desinformation erkennen

Quelle prüfen

Kontext suchen

Nicht vorschnell weiterverbreiten

Die drei Fragen sind eine erste Orientierung, kein vollständiger Faktencheck. Wer ist der Absender? Passt die Adresse zur bekannten Redaktion? Gibt es unabhängige Quellen und den ursprünglichen Kontext? Auffällige Inhalte nicht durch unreflektiertes Weiterteilen verstärken. Die Erkenntnisse verbinden sich direkt mit den eigenen Medienbeiträgen: klare Quellen, kein irreführender Titel, nachvollziehbare Bildnachweise.

Webseite produzieren

Die Gruppenseite

---
title: "Warum darf diese Tür nicht blockiert werden?"
---

![Feuerschutztür im Korridor.](bilder/gruppe-02/tuer.jpg)

## Kurz erklärt
Diese Tür hilft, Feuer und Rauch zurückzuhalten.

## Was sieht man?
...

Jetzt die vorbereitete Quarto-Struktur öffnen. Die Gruppe füllt ihre eigene Seite. Als Reihenfolge empfiehlt sich: Titel und Kurzantwort, dann die Bilder einfügen und beschriften, danach Erklärung, Sicherheitsaspekt und Quellen.

Das muss eure Seite können

• Frage als Titel und eine Kurzantwort
• zwei eigene Bilder mit Alternativtext und Bildlegende
• Erklärung, Sicherheitshinweis sowie Quellen

Nicht erlaubt: unbelegte technische Behauptungen, sichtbare Personen ohne Einwilligung, vertrauliche Informationen oder Bilder ohne erkennbare Erklärfunktion. Eigene Fotos sind am einfachsten; auch diese dürfen aber keine problematischen Inhalte zeigen.

Wirkungstest

Tauscht eure Seite mit einer anderen Gruppe.

1. Was ist die zentrale Aussage?
2. Welches Bild hilft am meisten?
3. Was bleibt unklar oder unbelegt?

Dann: 5 Minuten verbessern.

Die Testgruppe arbeitet ohne mündliche Erklärung der Autorengruppe. Wer noch Zeit hat, ergänzt: Für wen ist die Seite gedacht? Was soll man danach wissen oder tun? Das Feedback bleibt konkret und kurz.

Wege zu einer Website

Lösung	Gut geeignet für
Quarto	strukturierte Inhalte und wiederverwendbare Vorlagen
WordPress	Website im Browser gestalten und verwalten
Google Sites	schnell gemeinsam eine einfache Seite erstellen

Es gibt nicht die eine richtige technische Lösung. Quarto passt gut, wenn eine vorbereitete Struktur, Dateien und nachvollziehbarer Text im Mittelpunkt stehen. WordPress ermöglicht das Gestalten und Verwalten im Browser und bietet viele Erweiterungen. Google Sites reduziert die technische Einstiegshürde bei einfachen gemeinsamen Seiten. In allen Fällen bleiben Zielgruppe, Bilder, Quellen, Datenschutz und Wirkung eine Aufgabe der Autorinnen und Autoren.

Transfer in die Sek I

Wählt einen Gegenstand im Schulhaus. Erstellt eine kleine Webseite, die eine klare Frage für ein bestimmtes Publikum beantwortet.

Der Schülerauftrag lässt sich je nach Fach mit Technik, Natur und Mensch, Gestalten oder Sprachunterricht verbinden. Eigene Bilder, Rechte und Sicherheit sowie ein Wirkungstest gehören zwingend dazu. Die technische Einstiegshürde bleibt durch eine vorbereitete Quarto-Struktur klein.

Munkelrunde: Was ist noch offen?

Sammelt zu dritt offene Fragen für den Transfer in die Sek I.

Ordnet sie einer dieser Kategorien zu:

• Zeit und Material
• technische Unterstützung
• Datenschutz und Rechte
• fachliche Begleitung

Wählt eine Frage, die wir gemeinsam klären.

Die Munkelrunde ist ein kurzer, offener Abschluss: Gruppen notieren oder flüstern zunächst ihre offenen Fragen zusammen. Danach trägt jede Gruppe genau eine zentrale Frage bei. Gemeinsam unterscheiden: Was ist direkt lösbar? Was braucht eine schulinterne Regelung? Was sollte vor einer Durchführung mit Schülerinnen und Schülern geklärt werden?

Rechtliches

Urheberrecht

• Bilder wie das links: CC BY Soco St via SVG Repo
• Eigene Slides unter CC BY-SA 4.0

Literatur