E-Learning-Module für Lehrkräfte

Geordnete Moodle-Vorlagen zu Mathematik, Informatik und Chemie mit Vorschau, Quelltext und Exportmöglichkeit.

Informatik · E-Phase

Test-Überschrift in h1

Webentwicklung: HTML/CSS

Hinweis für Moodle

In Moodle ein Text- und Medienfeld anlegen, über Ansicht → Quellcode wechseln, den Quelltext einfügen und anschließend Bilder/Abschnitte anpassen. Bildplatzhalter markieren Stellen, an denen eigenes Material, GeoGebra-Screenshots oder Buchausschnitte eingefügt werden können.

Vorschau

So wirkt das Modul ungefähr in Moodle

Test-Überschrift in h1

Lehrkräfte-Hinweis zum Einsatz

Dieses Modul ist als Lehrkräfte-Ansicht vorbereitet. Die Inhalte können in Moodle als Text- und Medienfeld eingefügt und anschließend an Lerngruppe, Buchseite, Aufgabenstellung und vorhandene Materialien angepasst werden.

InformatikE-PhaseWebentwicklung: HTML/CSS

Einsatz: als Lernpfad, Übungsmodul, Wiederholung oder vorbereitete Unterrichtssequenz.
Anpassung: Abschnitte, Aufgaben und Lösungen können direkt im Quellcode ergänzt oder gekürzt werden.
Assets: Bildplatzhalter bewusst durch eigenes Material, GeoGebra-Screenshots oder lizenzrechtlich passende Abbildungen ersetzen.

Differenzierte Hilfen

Die Hilfen sind bewusst sichtbar als feste Sections angelegt, damit sie in Moodle ohne JavaScript, Buttons oder Aufklappfunktionen funktionieren.

Hilfe A – Einstieg

Formuliere zuerst in eigenen Worten, worum es in Test-Überschrift in h1 geht. Markiere Schlüsselbegriffe, bekannte Größen, Operatoren und unklare Stellen.

Hilfe B – Vorgehen

Arbeitsprozess strukturieren: Problem verstehen, Eingaben/Strukturen identifizieren, Lösung in kleine Teilschritte zerlegen und Ergebnis testen.

Hilfe C – Vertiefung

Vertiefung: Lösung erweitern, Fehlersuche dokumentieren, Code/Struktur erklären und eine alternative Umsetzung vergleichen.

Schritt-für-Schritt-Vorgehen / Erwartungshorizont

Diese Vorlage kann als Erwartungshorizont, Musterlösung oder Hilfekarte genutzt werden.

Aufgabe lesen und Zielprodukt bestimmen.
Eingaben, Daten, HTML-Struktur, Klassen oder Objekte identifizieren.
Lösung in kleine Teilschritte zerlegen.
Zwischenergebnisse testen, Fehler systematisch suchen und korrigieren.
Endergebnis erklären und mögliche Erweiterung notieren.

Überschrift h1 mit der id "ueberschrift"

Überschrift h2 mit der id "ueberschrift"

Überschrift h3 mit der id "ueberschrift"

Das ist Text, der im div mit der id "container" steht.

Das ist Text, der im div mit der Klasse "divklasse" steht.

Das ist eine Überschrift h1 mit der Klasse "divklasse" steht.

Das ist eine Überschrift h2 mit der Klasse "divklasse" steht.

Link zu Google

Aufgabenbereich

Beschreibe, welche Veränderungen das CSS-Sheet vornimmt.

Beschreibe, welche Hierarchie zwischen Elemente ohne Klassen/IDs, Klassen und IDs existieren. Was geht vor?

Beschreibe, wann IDs greifen und wann Klassen greifen (siehe h1)

Lade die CSS-Datei herunter: Download und binde sie in ein neues html-Dokument ein. Füge weitere html-Elemente hinzu, um alle Anpassungen des CSS Sheets zu realisieren.

Schaue die Seite Link aufrufen an. Schreibe ein CSS-Dokument, dass diese Anpassungen realisiert.

Copy-Paste

Moodle-Quelltext

<div style="font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; line-height:1.6; color:#1f2933; max-width:1100px; margin:0 auto;">
<h1> Test-Überschrift in h1 </h1><section style="background:#f8fafc; border:1px solid #d9e2ec; border-radius:12px; padding:1rem; margin:1rem 0;"><h2 style="margin-top:0; color:#0f172a;">Lehrkräfte-Hinweis zum Einsatz</h2>
<p>Dieses Modul ist als <strong>Lehrkräfte-Ansicht</strong> vorbereitet. Die Inhalte können in Moodle als Text- und Medienfeld eingefügt und anschließend an Lerngruppe, Buchseite, Aufgabenstellung und vorhandene Materialien angepasst werden.</p>
<p><span style="display:inline-block; background:#e2e8f0; color:#334155; border-radius:999px; padding:0.2rem 0.6rem; font-size:0.85rem; font-weight:700; margin:0 0.35rem 0.35rem 0;">Informatik</span><span style="display:inline-block; background:#e2e8f0; color:#334155; border-radius:999px; padding:0.2rem 0.6rem; font-size:0.85rem; font-weight:700; margin:0 0.35rem 0.35rem 0;">E-Phase</span><span style="display:inline-block; background:#e2e8f0; color:#334155; border-radius:999px; padding:0.2rem 0.6rem; font-size:0.85rem; font-weight:700; margin:0 0.35rem 0.35rem 0;">Webentwicklung: HTML/CSS</span></p>
<ul>
<li><strong>Einsatz:</strong> als Lernpfad, Übungsmodul, Wiederholung oder vorbereitete Unterrichtssequenz.</li>
<li><strong>Anpassung:</strong> Abschnitte, Aufgaben und Lösungen können direkt im Quellcode ergänzt oder gekürzt werden.</li>
<li><strong>Assets:</strong> Bildplatzhalter bewusst durch eigenes Material, GeoGebra-Screenshots oder lizenzrechtlich passende Abbildungen ersetzen.</li>
</ul></section><section style="background:#ecfeff; border-left:8px solid #0891b2; border-radius:12px; padding:1rem; margin:1rem 0;"><h2 style="margin-top:0; color:#0f172a;">Differenzierte Hilfen</h2>
<p>Die Hilfen sind bewusst sichtbar als feste Sections angelegt, damit sie in Moodle ohne JavaScript, Buttons oder Aufklappfunktionen funktionieren.</p>
<div style="background:white; border:1px solid #cbd5e1; border-radius:10px; padding:0.8rem 1rem; margin:0.8rem 0;"><h3 style="margin-top:0;">Hilfe A – Einstieg</h3><p>Formuliere zuerst in eigenen Worten, worum es in <strong>Test-Überschrift in h1</strong> geht. Markiere Schlüsselbegriffe, bekannte Größen, Operatoren und unklare Stellen.</p></div>
<div style="background:white; border:1px solid #cbd5e1; border-radius:10px; padding:0.8rem 1rem; margin:0.8rem 0;"><h3 style="margin-top:0;">Hilfe B – Vorgehen</h3><p>Arbeitsprozess strukturieren: Problem verstehen, Eingaben/Strukturen identifizieren, Lösung in kleine Teilschritte zerlegen und Ergebnis testen.</p></div>
<div style="background:white; border:1px solid #cbd5e1; border-radius:10px; padding:0.8rem 1rem; margin:0.8rem 0;"><h3 style="margin-top:0;">Hilfe C – Vertiefung</h3><p>Vertiefung: Lösung erweitern, Fehlersuche dokumentieren, Code/Struktur erklären und eine alternative Umsetzung vergleichen.</p></div></section><section style="background:#f5f3ff; border-left:8px solid #6d28d9; border-radius:12px; padding:1rem; margin:1rem 0;"><h2 style="margin-top:0; color:#0f172a;">Schritt-für-Schritt-Vorgehen / Erwartungshorizont</h2><p>Diese Vorlage kann als Erwartungshorizont, Musterlösung oder Hilfekarte genutzt werden.</p><ol><li>Aufgabe lesen und Zielprodukt bestimmen.</li><li>Eingaben, Daten, HTML-Struktur, Klassen oder Objekte identifizieren.</li><li>Lösung in kleine Teilschritte zerlegen.</li><li>Zwischenergebnisse testen, Fehler systematisch suchen und korrigieren.</li><li>Endergebnis erklären und mögliche Erweiterung notieren.</li></ol></section>
<h1 id="ueberschrift"> Überschrift h1 mit der id "ueberschrift"</h1>
<h2 id="ueberschrift"> Überschrift h2 mit der id "ueberschrift"</h2>
<h3 id="ueberschrift"> Überschrift h3 mit der id "ueberschrift"</h3>
<div id="container"> 
		Das ist Text, der im div mit der id "container" steht.
	</div>
<div class="divklasse"> 
		Das ist Text, der im div mit der Klasse "divklasse" steht.
	</div>
<h1 class="divklasse"> 
		Das ist eine Überschrift h1 mit der Klasse "divklasse" steht.
	</h1>
<h2 class="divklasse" id="ueberschrift"> 
		Das ist eine Überschrift h2 mit der Klasse "divklasse" steht.
	</h2>
<a href="https://www.google.de" target="_blank">Link zu Google</a>
<h3> Aufgabenbereich 
<div class="aufgaben">
<ol>
<li> Beschreibe, welche Veränderungen das CSS-Sheet vornimmt. </li>
<li> Beschreibe, welche Hierarchie zwischen Elemente ohne Klassen/IDs, Klassen und IDs existieren. Was geht vor? </li>
<li> Beschreibe, wann IDs greifen und wann Klassen greifen (siehe h1) </li>
<li> Lade die CSS-Datei herunter: <a download="" href="https://harzenetter.eu/styles-e-phase.css"> Download</a> und binde sie in ein neues html-Dokument ein. Füge weitere html-Elemente hinzu, um alle Anpassungen des CSS Sheets zu realisieren.</li>
<li> Schaue die Seite <a href="https://harzenetter.eu/i-e-html-test-dokument.html" target="_blank"> Link aufrufen</a> an. Schreibe ein CSS-Dokument, dass diese Anpassungen realisiert. </li>
</ol>
</div></h3>
</div>