In dieser Unterrichtseinheit lernen die Schüler:innen die Grundlagen der Webprogrammierung kennen. Sie erfahren, wie Webseiten mit HTML strukturiert, mit CSS gestaltet und mit JavaScript interaktiv gemacht werden. Am Ende der Einheit sind die Schüler:innen in der Lage, einfache Webseiten zu erstellen und zu gestalten.
Aufgaben und Ziele
Schüler:innen verstehen die Struktur von HTML-Dokumenten und können grundlegende HTML-Tags verwenden.
Schüler:innen können CSS anwenden, um das Aussehen von Webseiten zu gestalten.
Schüler:innen lernen die Grundlagen von JavaScript und können einfache interaktive Funktionen auf Webseiten implementieren.
Schüler:innen erstellen ein kleines Webprojekt, das die erlernten Konzepte kombiniert.
Aufgabe: Erstelle eine “Über mich” Seite mit Text und einem Bild.
▶️ Live Server nutzen
HTML Datei im Browser live anzeigen lassen.
“localhost” URL verstehen
Änderungen im Editor werden automatisch im Browser aktualisiert.
W3Schools (HTML Intro)
Die Seite W3Schools ist eine hervorragende Ressource zum Lernen von Webtechnologien. Sie bietet interaktive Tutorials und Beispiele für HTML, CSS und JavaScript.
Ziel: Komplexere Inhalte strukturieren und darstellen.
🗒️ Listen (w3schools)
Unordered Lists <ul> und List Items <li>.
Ordered Lists <ol>.
Verschachtelte Listen.
🗄️ Tabellen (w3schools)
Aufbau: <table>, <tr>, <th>, <td>.
🔳 Container
Der <div> Tag als Container für Bereiche.
Der <span> Tag für Inline-Elemente.
Praxis: Erweitere die “Über mich” Seite um eine Tabelle (z.B. Stundenplan) und eine Liste (z.B. Hobbies).
W3Schools (HTML Tables)
Die Seite W3Schools ist eine hervorragende Ressource zum Lernen von Webtechnologien. Sie bietet interaktive Tutorials und Beispiele für HTML, CSS und JavaScript.
Ziel: Die erstellten HTML-Seiten optisch ansprechend gestalten.
👾 CSS Syntax (w3schools)
Selektoren (Element, ID, Class).
Einbinden von CSS: Inline, Internal (<style>), External (.css Datei).
🎨 Farben und Hintergründe
color, background-color.
Hex-Codes und Farbnamen.
🔳 Box Model
Verstehen von margin, border, padding und content.
Praxis: Erstelle eine externe CSS-Datei und style die “Über mich” Seite (Farben, Schriftarten, Ränder).
CSS Box Model
W3Schools (Styles)
Die Seite W3Schools ist eine hervorragende Ressource zum Lernen von Webtechnologien. Sie bietet interaktive Tutorials und Beispiele für HTML, CSS und JavaScript.
W3Schools (CSS)
Die Seite W3Schools ist eine hervorragende Ressource zum Lernen von Webtechnologien. Sie bietet interaktive Tutorials und Beispiele für HTML, CSS und JavaScript.
Die Seite W3Schools ist eine hervorragende Ressource zum Lernen von Webtechnologien. Sie bietet interaktive Tutorials und Beispiele für HTML, CSS und JavaScript.
Bootstrap Cheatsheet
Einführung JavaScript
Ziel: Erste Schritte in der Programmierung von Logik auf Webseiten.
Variablen sind wie Kisten, in denen man Daten speichert.
let score = 0; // Eine Variable erstellen und Wert 0 zuweisen.const pi = 3.14; // Eine Konstante, die sich nicht verändern darf.
📢 Ein- und Ausgabe
console.log("Hallo"); //schreibt Nachrichten in die Entwickler-Konsolealert("Fehler!"); //öffnet ein Popup-Fenster.prompt("Dein Name?"); //fragt den Benutzer nach einer Eingabe.
Die Seite W3Schools ist eine hervorragende Ressource zum Lernen von Webtechnologien. Sie bietet interaktive Tutorials und Beispiele für HTML, CSS und JavaScript.
Übung: Der Konsolen-Taschenrechner
Erstelle ein einfaches Skript, das zwei Zahlen vom Benutzer abfragt, diese umwandelt und alle vier Grundrechnungsergebnisse in der Konsole anzeigt.
Erstelle eine HTML-Datei mit einem <script> Bereich.
Nutze prompt(), um die Zahlen zu erfragen. Wichtig:prompt liefert Text zurück, nutze Number(), um damit rechnen zu können.
Gib die Ergebnisse mit console.log() aus.
Lösung:
<script> // 1. Eingabe holen und in Zahlen umwandeln let zahl1 = Number(prompt("Bitte erste Zahl eingeben:")); let zahl2 = Number(prompt("Bitte zweite Zahl eingeben:")); let summe = zahl1 + zahl2; let differenz = zahl1 - zahl2; let produkt = zahl1 * zahl2; let quotient = zahl1 / zahl2; // 2. Rechnen und Ausgeben console.log(`Deine Zahlen: ${zahl1} und ${zahl2}`); console.log(`Summe (+): ${summe}`); console.log(`Differenz (-): ${differenz}`); console.log(`Produkt (*): ${produkt}`); console.log(`Quotient (/): ${quotient}`);</script>
Drücke im Browser F12 und klicke auf den Tab “Konsole”, um das Ergebnis zu sehen.
Übung: Einfache Schleifen
Schreibe ein JavaScript-Programm, das die Zahlen von 1 bis 100 in der Konsole ausgibt.
Erweiterung (FizzBuzz):
Wenn die Zahl durch 3 teilbar ist, gib “Fizz” aus.
Wenn die Zahl durch 5 teilbar ist, gib “Buzz” aus.
Wenn sie durch 3 und 5 teilbar ist, gib “FizzBuzz” aus.
Lösung:
for (let i = 1; i <= 100; i++) { if (i % 3 === 0 && i % 5 === 0) { console.log("FizzBuzz"); } else if (i % 3 === 0) { console.log("Fizz"); } else if (i % 5 === 0) { console.log("Buzz"); } else { console.log(i); }}
Ziel: Interaktive Webseiten erstellen/Interagieren mit Website Elementen
🖱️ Zugriff auf Elemente (DOM)
Um HTML-Elemente mit JavaScript zu verändern, müssen wir sie zuerst finden.
document.getElementById('id'): Findet ein Element anhand seiner einmaligen ID.
document.querySelector('.klasse'): Findet das erste Element mit einer bestimmten CSS-Klasse.
⚡ Events (Ereignisse)
JavaScript reagiert auf Benutzeraktionen.
onclick: Wenn ein Element angeklickt wird.
onmouseover: Wenn die Maus über ein Element fährt.
🎨 Style verändern
Man kann CSS-Eigenschaften direkt in JS ändern: element.style.color = "red";.
Übung: Der "Disco-Button"
Erstelle eine Webseite mit einem Button. Wenn man auf den Button klickt, soll sich die Hintergrundfarbe der Seite zufällig ändern.
Erstelle einen Button im HTML (<button>).
Schreibe eine JavaScript Funktion changeColor().
Nutze Math.random(), um zufällige Werte für Rot, Grün und Blau (RGB) zu erzeugen.
Setze die Hintergrundfarbe des body auf diesen neuen Wert.
Lösung:
<button onclick="changeColor()">Farbe ändern</button><script> function changeColor() { // Zufallszahlen zwischen 0 und 255 generieren let r = Math.floor(Math.random() * 256); let g = Math.floor(Math.random() * 256); let b = Math.floor(Math.random() * 256); // CSS String zusammenbauen: "rgb(100, 50, 200)" let farbe = "rgb(" + r + "," + g + "," + b + ")"; // Hintergrundfarbe des Bodys ändern document.body.style.backgroundColor = farbe; }</script>
Ziel: Anwendung des Gelernten in einem kleinen Projekt.
LVL 1: Portfolio Seite erweitern
Füge weitere Seiten hinzu (z.B. Projekte, Kontakt).
Verwende CSS für ein einheitliches Design.
Anleitung: Portfolio
Struktur anlegen:
Erstelle neben deiner index.html eine neue Datei namens projekte.html. Kopiere das HTML-Grundgerüst (!DOCTYPE, html, head, body) dort hinein.
Navigation bauen:
Damit man zwischen den Seiten wechseln kann, brauchen beide Dateien ein Menü ganz oben im <body>:
Design verbinden (CSS):
Erstelle eine style.css Datei. Binde diese in beiden HTML-Dateien im <head> ein:
<link rel="stylesheet" href="style.css">.
Styling:
Definiere nun in der CSS-Datei Regeln für body (Hintergrundfarbe, Schriftart) und nav (z.B. Hintergrundfarbe der Leiste), damit deine Website wie aus einem Guss wirkt.
LVL 2: Cookie-Clicker Spiel
Erstelle ein einfaches Spiel, bei dem Nutzer durch Klicken Punkte sammeln.
Verwende JavaScript, um Punkte zu zählen und anzuzeigen.
Anleitung: Clicker-Game
HTML (Das Spielfeld):
Du brauchst eine Anzeige für die Punkte und einen Button zum Klicken. Wichtig sind die IDs, damit JavaScript die Elemente findet.
CSS (Das Aussehen):
Mache den Button groß und platziere alles mittig (text-align: center; im body).
JavaScript (Die Logik):
Erstelle im <script>-Bereich (oder in einer .js Datei) folgende Logik:
// 1. Variable für den Punktestandlet punkte = 0;// 2. Elemente aus dem HTML holenlet button = document.getElementById("klickButton");let anzeige = document.getElementById("anzeige");// 3. Was passiert beim Klicken?button.addEventListener("click", function() { punkte = punkte + 1; // Punkte erhöhen anzeige.innerText = punkte; // Text auf der Seite aktualisieren});
LVL 3: Interaktive To-Do Liste
Erstelle eine einfache To-Do Liste mit HTML, CSS und JavaScript.
Aufgaben hinzufügen, entfernen und als erledigt markieren.
Anleitung: To-Do Liste
HTML Aufbau:
Wir brauchen ein Eingabefeld, einen “Hinzufügen”-Button und eine leere Liste (<ul>).
JavaScript Funktionen:
Wir schreiben eine Funktion, die ausgeführt wird, wenn der Button gedrückt wird.
function neueAufgabe() { // 1. Text aus dem Eingabefeld holen let text = document.getElementById("eingabe").value; // Sicherheitscheck: Ist Text leer? if (text === "") return; // 2. Neues Listen-Element (<li>) bauen let li = document.createElement("li"); li.innerText = text; // Feature: Beim Anklicken durchstreichen (CSS Klasse 'done' nötig) li.addEventListener("click", function() { li.style.textDecoration = "line-through"; }); // Feature: Mit Doppelklick löschen li.addEventListener("dblclick", function() { li.remove(); }); // 3. Das neue Element in die <ul> einhängen document.getElementById("aufgabenListe").appendChild(li); // 4. Eingabefeld leeren document.getElementById("eingabe").value = "";}
Bonus (LocalStorage):
Um Daten zu speichern, schau dir den Befehl localStorage.setItem("key", "wert") an. Das erfordert aber, dass du die Liste als Array in Javascript speicherst!
©️ e-teaching.org
