aiMOOC

Web-Oberflächen mit HTML CSS und JavaScript entwickeln

QR-Code

Einleitung

Du entwickelst eine barrierearme lokale Messwertansicht für ein ungefährliches Lehrbauteil. Die App zeigt ausschließlich erfundene Prüfwerte und läuft im Browser ohne Server, Maschinenkontakt, echtes Messgerät oder kostenpflichtiges KI-Konto. Du übst, eine Oberfläche verständlich zu gliedern, mit der Tastatur zu bedienen, bei kleinen Bildschirmen zu lesen und fremde Texte sicher darzustellen. Die Prüfung dieser drei Kriterien ist wichtiger als dekorative Effekte.

Zielgruppe: Auszubildende im 1. bis 2. Ausbildungsjahr. Voraussetzung: Dateien, Ordner und einfache Einheiten (etwa Newton) verstehen; keinerlei Programmiererfahrung nötig. Lernprodukt: drei lokale Dateien, eine dokumentierte Testliste und die begründete Analyse eines Fehlerfalls. Zeitbedarf: ungefähr vier bis sechs Lerneinheiten einschließlich Transfer. Alle Lehrdaten sind synthetisch. Dies ist ein unabhängiges Bildungsangebot ohne offizielle Liebherr- oder IHK-Zertifizierung.

Vorwissen aktivieren: Öffne, sofern erreichbar, die bereits vorhandene Grundlage. Notiere einen Satz dazu, was eine Datei, eine Einheit und eine Benutzeroberfläche ist. Der Inhalt dieser verlinkten Seite war am Recherchetag technisch nicht abrufbar; deshalb wird hier keine konkrete Vorleistung daraus behauptet. Du kannst ohne diesen externen Link weiterarbeiten.

Arbeitsregel: Öffne alle Übungsdateien lokal in einem modernen Browser. Nutze fiktive Prüfwerte und teste nur die Anzeige, niemals reale Geräte, Maschinensteuerung oder Sicherheitsfreigaben. Externe Medien sind freiwillige Ergänzungen; alle Kernschritte stehen als Text hier.

Bild: HTML und CSS sind verschiedene Schichten der Benutzeroberfläche. Quelle und Lizenz siehe OER.

Vom Dokument zur bedienbaren Oberfläche

HTML ordnet Inhalte sinnvoll

HTML (Hypertext Markup Language) beschreibt die Bedeutung und Struktur von Inhalten. Ein Element besteht oft aus einem Start- und einem End-Tag. Für eine verständliche App verwendest du beispielsweise eine Überschrift, erklärende Absätze, ein beschriftetes Eingabefeld und einen echten Schaltknopf. Semantisch heißt: Der Browser und unterstützende Technik können die Rolle erkennen. Ein als Schaltknopf gestylter Absatz ist kein gleichwertiger Ersatz für ein echtes button-Element.

Denkmodell: HTML = Was ist der Inhalt? CSS = Wie wird er dargestellt? JavaScript = Was passiert bei einer Aktion? Erkläre diese Trennung an einer Prüfwertanzeige mit Zahlenwert, Einheit, Hinweistext und Aktion.

Bild: Ein Dokumentenbaum (DOM). Jede Verzweigung steht für eine Beziehung zwischen HTML-Elementen.

CSS gestaltet, ohne die Bedeutung zu ersetzen

CSS (Cascading Style Sheets) bestimmt etwa Farben, Abstände, Schriftgrößen und einspaltige oder mehrspaltige Darstellung. Ein Selektor wählt Elemente aus; eine Eigenschaft wie color oder padding verändert ihre Darstellung. Responsiv bedeutet, dass das Layout auf unterschiedliche verfügbare Breiten reagiert. Farben allein dürfen keine Bedeutung tragen: Schreibe zu einem auffälligen Messwert zusätzlich eine verständliche Statusmeldung.

Bild: Das Kastenmodell trennt Inhalt, Innenabstand, Rahmen und Außenabstand.

Bild: Eine Oberfläche kann denselben Inhalt auf unterschiedlich breiten Displays anordnen.

JavaScript reagiert auf Ereignisse

JavaScript verändert den sichtbaren Inhalt beispielsweise nach einem Klick. Ein Ereignis ist eine Aktion, etwa das Aktivieren eines Buttons. Das DOM (Document Object Model) ist die Schnittstelle, über die JavaScript HTML-Elemente auswählen und verändern kann. Ein Ereignislistener (event listener) führt beim Ereignis eine Funktion aus. Eine Funktion bündelt Anweisungen. Für die erste App reichen drei Schritte: Element finden, Ereignis beobachten und Text einsetzen.

Verständnishilfe: Stell dir HTML als beschriftetes Schaubild, CSS als dessen Layout und JavaScript als Regeln für aktualisierte Inhalte vor. Vertiefung: Warum sollte der Messwert auch ohne Farben oder Animationen verständlich bleiben?

Geführtes Projekt: Lokale Messdaten-App

Auftrag und synthetische Daten

Ein fiktives Lehrbauteil P-01 wird in einer Simulation mit 12,4 N bewertet, P-02 mit 13,8 N. Beide Werte sind für dieses frei erfundene Übungsbeispiel als „Übungswert“ gekennzeichnet. Es existieren keine realen Grenzwerte, keine Sicherheitsentscheidung und keine Sensorverbindung. Die App zeigt jeweils eine Übungsmessung und erlaubt, einen beliebigen Hinweistext sichtbar zu machen.

Dateistruktur: Erstelle einen Ordner messwert-app und darin die Dateien index.html, style.css und app.js. Du brauchst nur einen Texteditor und einen Browser. Speichere die Dateien als UTF-8. Vorgehen: Übertrage die folgenden drei Quelltexte; die Zeichen < und > sind im Kurs als lesbare HTML-Tags dargestellt und müssen im Editor als tatsächliche Winkelklammern eingegeben werden.

Datei index.html: verständliche Struktur

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Lokale Übungsmesswerte</title>
  <link rel="stylesheet" href="style.css">
  <script src="app.js" defer></script>
</head>
<body>
  <main class="karte">
    <h1>Messwertansicht – Simulation</h1>
    <p>Nur erfundene Werte, keine Geräteverbindung.</p>
    <button id="wechseln" type="button">Nächsten Übungswert zeigen</button>
    <h2>Aktueller Übungswert</h2>
    <p id="wert">12,4 N</p>
    <p id="kennung">Lehrbauteil P-01 – Übungswert</p>
    <label for="notiz">Fremden Hinweistext testweise anzeigen</label>
    <input id="notiz" type="text" maxlength="160" value="Probe & Test">
    <button id="anzeigen" type="button">Hinweis sicher anzeigen</button>
    <p id="ausgabe" role="status" aria-live="polite">Noch keine Notiz gezeigt.</p>
  </main>
</body>
</html>

Erklärung: main markiert den zentralen Inhalt. label ist mit dem Eingabefeld verknüpft. button bietet eine eingebaute Tastaturbedienung. role="status" und aria-live="polite" können unterstützende Technik über aktualisierte Meldungen informieren; ihre tatsächliche Wirkung muss getestet werden. Die HTML-Konstruktion selbst ist keine Sicherheitsfreigabe.

Datei style.css: gut lesbar und anpassbar

* { box-sizing: border-box; }
body { margin: 0; font: 1rem/1.5 system-ui, sans-serif; color: #172235; background: #f5f7fa; }
.karte { width: min(100% - 2rem, 46rem); margin: 2rem auto; padding: 1.25rem; background: white; border: 1px solid #62748a; border-radius: .5rem; }
button, input { display: block; max-width: 100%; width: 100%; margin: .6rem 0 1rem; padding: .75rem; font: inherit; }
button { color: white; background: #123d72; border: 2px solid #123d72; border-radius: .4rem; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid #ae4100; outline-offset: 3px; }
#wert { font-size: clamp(1.5rem, 5vw, 2.5rem); font-weight: 700; overflow-wrap: anywhere; }
#ausgabe { overflow-wrap: anywhere; }
@media (max-width: 28rem) { .karte { margin: 0 auto; padding: 1rem; border-radius: 0; } }

Erklärung: rem orientiert sich an der Grundschriftgröße, max-width begrenzt überbreite Elemente und overflow-wrap lässt lange Zeichenfolgen umbrechen. Die Fokusumrandung zeigt, welches Steuerelement per Tastatur aktiv ist. Die media-Regel passt bei geringer Breite den Außenabstand an. Farbkontrast muss trotzdem mit einer geeigneten Prüfhilfe kontrolliert werden.

Datei app.js: ohne unsichere HTML-Einfügung

const daten = [
  { id: "P-01", wert: 12.4 },
  { id: "P-02", wert: 13.8 }
];
let index = 0;
const wert = document.getElementById("wert");
const kennung = document.getElementById("kennung");
const ausgabe = document.getElementById("ausgabe");
function zeigen() {
  const eintrag = daten[index];
  wert.textContent = eintrag.wert.toLocaleString("de-DE", { minimumFractionDigits: 1, maximumFractionDigits: 1 }) + " N";
  kennung.textContent = "Lehrbauteil " + eintrag.id + " – Übungswert";
}
document.getElementById("wechseln").addEventListener("click", function () {
  index = (index + 1) % daten.length;
  zeigen();
});
document.getElementById("anzeigen").addEventListener("click", function () {
  ausgabe.textContent = document.getElementById("notiz").value;
});
zeigen();

Erklärung: Ein Array enthält zwei künstliche Datensätze; index verweist auf die aktuelle Zeile. Mit % beginnt die Folge nach dem letzten Datensatz wieder vorne. toLocaleString formatiert die Zahl für die deutsche Darstellung. textContent überträgt die Eingabe als Text und nicht als interpretierbaren HTML-Code. Verwende hier gerade nicht innerHTML für fremden Text. Fremd kann eine Testeingabe von einer anderen Person oder eine später eingelesene Datei bedeuten, ohne dass reale persönliche Daten benutzt werden.

Erster Funktionstest: Öffne index.html per Doppelklick lokal. Aktiviere den ersten Button zweimal: Nach P-02 erscheint wieder P-01. Schreibe in das Notizfeld die Testzeichenfolge <img src=x onerror=alert(1)> und aktiviere den zweiten Button. Erwartung: Die Zeichenfolge wird als sichtbarer Text ausgegeben; es erscheint kein Bild und es wird keine Script-Aktion ausgeführt. Schließe daraus nicht, dass die gesamte App schon gegen alle Sicherheitsprobleme geprüft sei.

Erweitern statt kopieren

Ändere jetzt selbstständig die fiktiven Kennungen und Werte, aber keine Einheit ohne Erläuterung. Ergänze eine kurze Beschreibung, welche Zahl gerade angezeigt wird, und notiere die gewählte Darstellung. Hilfestufe A: Ändere zuerst nur Texte im HTML. Hilfestufe B: Verändere das CSS und teste auf kleiner Breite. Vertiefung: Welche Validierung wäre notwendig, wenn Werte später aus einer Datei statt aus dem festen Array kämen?

Video als Ergänzung: Ein deutschsprachiger CSS-Grundkurs wurde im YouTube-Suchindex unter dem nachfolgenden Titel gefunden; direkte Abspielbarkeit und regionale Verfügbarkeit ließen sich am 22.10.2026 nicht zuverlässig bestätigen. Der Kurs bleibt ohne Video vollständig nutzbar.

Video: „CSS KURS in 40 Minuten“, Kanal „Programmieren lernen“, veröffentlicht 07.05.2022; optional, nicht zum Bestehen erforderlich.

Barrierearm prüfen: Tastatur und kleine Anzeigen

Prüfung A: Tastaturbedienung

Eine gute Oberfläche lässt sich ohne Maus bedienen. Starte mit dem Fokus außerhalb des Formulars, drücke mehrfach Tab und beobachte die Reihenfolge: zuerst der Button für den nächsten Wert, dann das Notizfeld, anschließend der Button für die Textausgabe. Shift+Tab kehrt die Richtung um; Enter oder Leertaste aktiviert je nach Element einen Button. Prüfe, ob jede Aktion erreichbar ist, ob die orangefarbene Fokusmarkierung sichtbar ist und ob du nirgendwo „gefangen“ bleibst. Schreibe das Ergebnis als Bestanden / Nicht bestanden / Nicht geprüft und begründe es.

Fehlerfall: Eine bloß anklickbare span-Fläche mit JavaScript-Klickereignis ist ohne weitere Arbeit womöglich nicht fokussierbar und keine native Schaltfläche. Entscheidung: Verwende im Basisfall button, weil er Tastatur- und Rollenverhalten mitbringt; ergänzende ARIA-Attribute ersetzen keine passende HTML-Semantik. Ausführlicher Standard: WCAG 2.2, insbesondere 2.1.1 Tastatur.

Bild: Tastaturbedienung ist ein eigenständiger Test und keine Nebensache.

Prüfung B: kleine Breite und Vergrößerung

Stelle im Browser eine kleine Ansichtsbreite von ungefähr 320 CSS-Pixeln ein, alternativ die Entwicklertools mit schmalem Viewport. Wiederhole die Prüfung mit starker Vergrößerung. Akzeptanzkriterium: Alle Bedienelemente bleiben sichtbar, Inhalte gehen nicht verloren, längere Notizen sind lesbar, der normale Text benötigt keine zusätzliche horizontale Scrollbewegung. Die WCAG-Regel 1.4.10 „Reflow“ enthält Ausnahmen für Inhalte, die sachlich eine zweidimensionale Anordnung erfordern; unsere einfache Messwertansicht benötigt das nicht.

Fehlerfall: Ein festes width: 900px für die Karte erzeugt auf einem schmalen Gerät unnötiges seitliches Scrollen. Entscheidung: Die Karte hat eine flexible Breite, die Eingabefelder höchstens 100 Prozent Breite. Prüfe zusätzlich Textvergrößerung und Kontrast, denn responsives CSS allein garantiert noch keine vollständige Barrierefreiheit.

Prüfung C: Ausgabe fremder Texte

Tippe nacheinander die fiktiven Eingaben Montage & Prüfung, sehrsehrsehrlangeprobeohneleerzeichen und <b>Warnung</b> ein. Beobachte: Sonderzeichen und Markup-Zeichen müssen als Text und lange Eingaben trotz enger Anzeige lesbar bleiben. Entscheidend ist die Zuweisung über textContent, die Eingaben nicht als HTML parst. Nicht verwenden: innerHTML mit ungeprüften Eingaben. Das Risiko heißt Cross-Site Scripting (XSS): Fremder Inhalt könnte sonst im falschen Kontext als ausführbarer Seitencode wirken. textContent löst nicht alle Sicherheitsfragen, etwa unsichere URLs oder später verwendete Datenflüsse.

Fehlerfall und Erklärung: Ersetzt du die Textzuweisung durch innerHTML, kann die Eingabe HTML-Elemente erzeugen. Stelle den Unterschied ausschließlich in einer isolierten, ungefährlichen Lernsimulation dar und führe keine fremden Skripte oder reale Angriffe aus. Gib anschließend begründet an, warum die sichere Textzuweisung die passende Entscheidung ist.

Qualität, Grenzen und dokumentierter Transfer

Dreifacher Abnahmetest mit Belegen

Lege eine Prüftabelle mit den Spalten Test, Vorgehen, Erwartung, Beobachtung, Ergebnis und Begründung an. Trage die drei verpflichtenden Fälle ein:

Tastaturbedienung: Alle Buttons und das Eingabefeld mit Tab, Shift+Tab und Enter oder Leertaste bedienen; Fokus erkennbar und kein Tastaturfang.
Responsives Webdesign: Kleine Ansicht um 320 CSS-Pixel und vergrößerte Schrift prüfen; keine verdeckten Elemente oder unnötiges horizontales Scrollen.
Cross-Site Scripting: Fremde Probezeichen als Text ausgeben; kein Einfügen als HTML und keine unerwartete Ausführung.

Ergänze zu jedem Fall einen absichtlich fehlerhaften Gegenentwurf in Worten, die wahrscheinliche Ursache und einen begründeten Korrekturschritt. Ein dokumentierter Fehlversuch ist wertvoller als eine ungeprüfte Behauptung „funktioniert“.

Animation: Ein sichtbarer Darstellungswechsel zeigt, dass HTML-Inhalt und CSS-Styling auseinanderfallen können. Für die Lernziele genügt die textliche Beschreibung.

Fehler erkennen und sinnvoll eingrenzen

Wenn ein Button nichts tut: Kontrolliere den Dateinamen app.js, den Pfad, die Entwicklerkonsole und die Schreibweise der id. Wenn die Seite ungestaltet ist: Prüfe den Dateinamen style.css und den link-Verweis. Wenn Notizen abgeschnitten sind: Untersuche feste Breiten, fehlenden Umbruch und Zoom. Wenn eine Notiz als Fettschrift interpretiert wird: Suche nach innerHTML statt textContent. Formuliere die Fehlerdiagnose in der Folge Beobachtung – Hypothese – Prüfung – Änderung – erneute Prüfung.

Von der Lern-App zur verantworteten Anwendung

Eine lokale HTML-Datei kann auf einem Schulrechner ohne Benutzerkonto laufen; sie stellt aber keinen sicheren Messbetrieb, keine persistente Datenspeicherung und keine geprüfte Produktsoftware dar. Übertrage das Bedienkonzept nur theoretisch auf ein Anzeige-Dashboard für fiktive Werte wie Temperatur, Laufzeit oder Stromstärke; die passenden Einheiten und Grenzwerte dürfen nicht geraten werden. Für echte Produkte wären außerdem Fachfreigaben, Bedrohungsmodell, Datenschutz, Tests mit assistiven Technologien, Versionskontrolle und Zuständigkeiten erforderlich. Nichts in diesem Kurs steuert Maschinen oder ersetzt Sicherheitsprüfungen.

Zukunftsakzent: Zugängliche, sichere Bedienung ist ein Qualitätsmerkmal technischer Apps. Wenn KI beim Programmieren hilft, prüfe die Ausgabe fachlich, teste sie selbst und gib keine Geheimnisse, persönlichen Daten oder Freigaberechte in unzuverlässige Eingaben. Das NIST-Profil AI 600-1 (Juli 2024) behandelt Risiken generativer KI; die MCP-Sicherheitshinweise im Pfad 2026-07-28 behandeln insbesondere Berechtigungen und Angriffswege bei verbundenen Werkzeugen. Beide sind Hintergrund für sichere KI-Workflows, keine HTML-Lernnorm und keine Sicherheitszertifizierung dieser Übungsapp.

Zusätzliches Video: Ein deutschsprachiger Überblick „Programmieren lernen für Anfänger – Webentwicklung in 45 Minuten“ ist als YouTube-Metadatensatz verzeichnet (NetLamp, 07.11.2020); die unmittelbare Abspielbarkeit ließ sich nicht bestätigen. Alle Lernschritte stehen daher vollständig im Text.

Interaktive Aufgaben

Quiz: Prüfe dein Wissen

Wähle die fachlich passende Antwort. Nach jeder Auswahl gibt das MOOCwiki-Quiz eine Rückmeldung; die Antworten werden hier nicht als separate Lösungsliste vorweggenommen.

Welche Aufgabe übernimmt HTML im lokalen Messwertprojekt? (Die Bedeutung und Struktur der Inhalte festlegen) (!Die gemessene Kraft am Sensor abfragen) (!Die Farbe der Bildschirmhardware verändern) (!Die JavaScript-Datei automatisch testen)

Welches HTML-Element ist für eine aktivierbare Aktion besonders geeignet? (button) (!span ohne zusätzliche Eigenschaften) (!br) (!meta)

Wozu dient eine CSS-Media-Regel im Beispiel? (Das Layout an kleinere verfügbare Breiten anpassen) (!Prüfwerte mit einem Messgerät aufnehmen) (!JavaScript dauerhaft ausschalten) (!Text als vertraulich einstufen)

Was verändert der Klick auf Nächsten Übungswert zeigen? (Den Index des fiktiven Datensatzes und die angezeigten Texte) (!Den Messwert eines realen Lehrbauteils) (!Die Berechtigung für Sicherheitsfreigaben) (!Eine zentral gespeicherte Datenbank)

Wie wird fremder Hinweistext hier sicher als Klartext angezeigt? (Mit der DOM-Eigenschaft textContent) (!Mit ungeprüftem innerHTML) (!Mit dem Ersetzen von button durch span) (!Mit einer festen Kartenbreite)

Welche Beobachtung spricht für gute Tastaturbedienbarkeit? (Alle Aktionen sind erreichbar und der Fokus bleibt sichtbar) (!Nur mit der Maus kann man zwischen Messwerten wechseln) (!Ein blinkendes Bild ersetzt den Fokus) (!Das Eingabefeld ist mit Tab nicht erreichbar)

Was ist bei etwa 320 CSS-Pixeln Breite für diese Ansicht wichtig? (Alle Inhalte und Aktionen bleiben ohne unnötiges horizontales Scrollen nutzbar) (!Die komplette Oberfläche erhält eine feste Breite von 900 Pixeln) (!Die Schaltflächen werden versteckt) (!Die Messwerteinheit verschwindet)

Welcher Zusatz erhöht die Verständlichkeit eines farbigen Prüfhinweises? (Eine klare textliche Statusangabe) (!Nur die Farbe ohne Beschriftung) (!Eine automatisch startende Animation) (!Eine verdeckte Fehlermeldung)

Welche Aussage ist für die lokale Übungsapp zutreffend? (Sie zeigt künstliche Werte und trifft keine reale Freigabeentscheidung) (!Sie ist bereits als Prüfmittel zertifiziert) (!Sie sendet jeden Wert an eine Maschine) (!Sie erfüllt automatisch sämtliche Barrierefreiheitsregeln)

Wie begründest du einen gefundenen Darstellungsfehler fachgerecht? (Mit Beobachtung, Ursache, Korrektur und erneutem Test) (!Mit der Behauptung dass auf meinem Bildschirm alles stimmt) (!Mit dem Löschen der gesamten Dokumentation) (!Mit dem stillen Ersetzen der Prüfdaten durch reale Werte)

Memory

Finde jeweils einen Fachbegriff und die genau zugehörige Erklärung.

Semantik	Inhalt und Rolle eines Elements verständlich auszeichnen
Selektor	Bestimmen welche Elemente eine CSS-Regel betrifft
DOM	Programmierbare Darstellung der Dokumentstruktur
Ereignis	Auslöser einer programmierten Reaktion
Textausgabe	Nicht vertrauenswürdige Zeichen ohne HTML-Auswertung darstellen
Fokus	Momentan per Tastatur angesprochenes Bedienelement

Drag-and-Drop

Ordne die Maßnahmen ihrem Zweck zu.

Richtige Maßnahme	Zweck
Label mit Eingabefeld verbinden	Eingabe verständlich benennen
Sichtbare Fokusumrandung	Tastaturnavigation nachvollziehbar machen
Flexible Kartenbreite	Kleine Anzeigen besser unterstützen
Fremdtext mit textContent einsetzen	HTML-Interpretation vermeiden
Nach Korrektur erneut testen	Fehlerbehebung nachvollziehbar belegen

Kreuzworträtsel

Gesucht sind sechs einzelne Fachwörter ohne Leerzeichen.

Browser	Programm zum Öffnen und Bedienen lokaler Webdokumente
Tastatur	Eingabegerät für Tab und Enter
Quelltext	Lesbare Anweisungen in den drei Projektdateien
Kontrast	Unterschied zwischen Vordergrund und Hintergrund für Lesbarkeit
Ereignis	Anlass für die Reaktion einer JavaScript-Funktion
Validierung	Gezielte Prüfung ob eine Eingabe eine Vorgabe erfüllt

LearningApps

Hier findest du ergänzende Suchergebnisse für passende Zuordnungs- und Wiederholungsaufgaben; deren Inhalte sind unabhängig erstellt und müssen vor Nutzung auf Richtigkeit geprüft werden. Offline-Alternative: Verwende das Memory und die Zuordnung direkt oben.

Lückentext

Ergänze die Fachbegriffe aus dem Unterricht; pro Satz fehlt genau ein Begriff.

Die Struktur einer Seite beschreibst du mit

.

Die Darstellung der Karte steuerst du mit

.

Einen Klick behandelst du mit

.

Ein echtes Bedienelement für eine Aktion ist der

.

Die programmierbare Baumdarstellung einer Seite heißt

.

Mit der Taste

wechselst du den Fokus.

Bei schmalen Ansichten hilft ein

Layout.

Nicht vertrauenswürdige Zeichen werden sicher mit

eingesetzt.

Eine farbige Kennzeichnung ergänzt du durch einen verständlichen

.

Zur Begründung einer Korrektur dokumentierst du den

.

Offene Aufgaben

Leicht

HTML: Markiere in der Beispielseite Überschrift, Absatz, Beschriftung, Eingabefeld und Button; erkläre ihre Aufgaben in eigenen Worten.
CSS: Ändere Schriftgröße und Innenabstand der Karte, ohne Bedeutung oder Tastaturfunktion zu verlieren; dokumentiere die sichtbare Veränderung.
JavaScript: Übertrage zwei weitere ausschließlich erfundene Werte in das Array; erkläre den Wechselmechanismus mündlich oder schriftlich.
Tastaturbedienung: Führe eine Bedienfolge ohne Maus aus und notiere die Reihenfolge sowie eine Beobachtung zum Fokus.

Standard

Responsives Webdesign: Vergleiche zwei Ansichtsbreiten und eine Vergrößerung; protokolliere mindestens drei Beobachtungen mit einer begründeten Anpassung.
Websicherheit: Teste harmlose Sonderzeichen und als Text geschriebenes HTML-Markup; erkläre den Unterschied zwischen textContent und innerHTML, ohne realen Schadcode auszuführen.
Benutzeroberfläche: Entwirf auf Papier eine zweite Messwertansicht für fiktive Temperaturen; beschrifte Einheit, Navigation und Status verständlich.
Softwaretest: Erstelle aus den drei Pflichtkriterien eine Tabelle mit Erwartung, Beobachtung, Ergebnis und Korrekturmaßnahme.

Schwer

Barrierefreiheit: Beurteile, welche Prüfungen für WCAG 2.2 Tastaturbedienbarkeit und Reflow das Beispiel abdeckt und welche es noch nicht abdeckt; begründe Grenzen.
Fehleranalyse: Simuliere in einer Kopie eine feste Kartenbreite, erkläre das Scheitern auf schmalem Display und dokumentiere eine prüfbare Reparatur.
Datensicherheit: Entwirf eine Eingabeprüfung für hypothetisch importierte fiktive Messwerte einschließlich Typ, Bereich und Fehlertext; verwende keine echten Gerätedaten.
Projektarbeit: Entwickle eine eigene barrierearme Anzeige für drei erfundene Prüfwerte und verteidige deine Entscheidungen zur Tastatur, kleinen Ansicht und sicheren Textanzeige.

Lernkontrolle

Semantisches HTML: Begründe anhand der Beispiel-App, weshalb ein echtes Button-Element gegenüber einer rein klickbaren Textfläche geeigneter ist.
Responsive Gestaltung: Erkläre am Fehlerfall einer festen Breite, warum ein großes Desktopfenster kein hinreichender Test ist.
DOM: Beschreibe den Datenfluss vom Klick über den Array-Index bis zur aktualisierten Textanzeige.
Cross-Site Scripting: Beurteile die Ausgabe eines fremden Teststrings über textContent und nenne eine Sicherheitsfrage, die dadurch noch nicht gelöst ist.
Barrierearmut: Vergleiche zwei Oberflächen mit gleichem Zahlenwert, aber unterschiedlichen Beschriftungen und Fokusmarkierungen; begründe die bessere Lösung.
Qualitätssicherung: Entwerfe einen Wiederholungstest nach einer gezielten CSS-Änderung und beschreibe ein nachvollziehbares Bestehenskriterium.

Lernnachweis

Einzureichen oder vorzuführen: Der Ordner mit index.html, style.css und app.js, ausschließlich synthetische Daten, eine kleine Skizze der Bedienoberfläche, ein kommentiertes Prüftabelle-Protokoll und eine kurze Fehlerfallbegründung. Eine reine Bildschirmaufnahme ist als Lernnachweis nicht ausreichend.

Bewertungsraster (vier Kriterien, jeweils 0 bis 3 Punkte): (1) HTML, CSS und JavaScript nachvollziehbar getrennt und funktionsfähig; (2) alle Elemente per Tastatur erreichbar, Fokus sichtbar; (3) kleine Ansicht lesbar und bedienbar; (4) fremder Testtext wird ohne HTML-Interpretation ausgegeben und die Begründung benennt verbleibende Grenzen. 0 = nicht gezeigt, 1 = ansatzweise, 2 = überwiegend belastbar, 3 = selbstständig demonstriert und begründet. Ergänzende Pflicht: Zu jedem der letzten drei Kriterien ein reproduzierbarer Test und ein erklärter Fehlerfall. Die Bewertung ist eine didaktische Rückmeldung, keine Prüfung durch IHK, Unternehmen oder Zertifizierungsstelle.

Selbstreflexion: Welche Entscheidung hast du verändert, nachdem ein Test scheiterte? Welche Annahme musst du vor einer echten technischen Anwendung fachlich absichern? Kannst du das Produkt jemandem mit eingeschränkter Mausnutzung erklären?

OER und Wikipedia

Recherche- und Versionsstand: 22. Oktober 2026. Webstandards und Dokumentationen ändern sich; überprüfe die aktuelle Fassung, bevor du Funktionen in einer echten Anwendung einsetzt. Die hier genannten Quellen sind offene Lern- und Dokumentationsressourcen, keine pauschale Freigabe für Fremdinhalte. Verweise wurden thematisch geprüft; die ursprüngliche MOOCwiki-Grundlagenseite war bei der Recherche nicht abrufbar.

Fachquellen:

MDN: HTML als Grundlage für Barrierefreiheit – semantische Elemente und Bedienbarkeit, abgerufen 22.10.2026.
MDN: Node.textContent – sichere Textzuweisung im DOM, abgerufen 22.10.2026.
MDN: Cross-Site Scripting – Einordnung des Risikos; Schutz ist kontextabhängig, abgerufen 22.10.2026.
W3C: WCAG 2.2 – Kriterien 2.1.1 Tastatur und 1.4.10 Reflow, Fassung 2.2, abgerufen 22.10.2026.
NIST AI 600-1: Generative AI Profile – Juli 2024, KI-Risikomanagement als Zukunftskontext, nicht als Webdesign-Zertifizierung.
MCP: Security Best Practices – Dokumentationspfad 2026-07-28; für sichere KI-Werkzeugverbindungen, nicht für den Offline-Betrieb erforderlich.
Vorhandene MOOCwiki-Grundlage – als Vorwissensangebot verlinkt, Abruf bei der Recherche technisch fehlgeschlagen.

Wikimedia Commons – geprüfte Dateiseiten, Urheber und angegebene Lizenz:

Eingesetztes Medium	Dateiseite	Urheberschaft	Lizenz laut Dateiseite
File:CSS3 and HTML5 logos and wordmarks.svg	Dateiseite	daPhyre	CC BY 3.0
File:DOM tree.svg	Dateiseite	Lubaochuan	CC BY-SA 4.0
File:CSS-Box-Modell.png	Dateiseite	Bagok	CC BY-SA 3.0
File:Responsive Web Design for Desktop, Notebook, Tablet and Mobile Phone.png	Dateiseite	Muhammad Rafizeldi	CC BY-SA 3.0
File:Icon Typing on keyboard - RWiC.png	Dateiseite	Mam'Gobozi Design Factory (MDF)	CC BY-SA 4.0
File:Flash of unstyled content (FOUC) while loading a HTML, CSS page.gif	Dateiseite	Joao.pimentel.ferreira	CC0 1.0

Medienhinweis: Diese Bilder und die GIF-Animation sind auf Wikimedia Commons veröffentlicht; beachte die verlinkten Urheber- und Lizenzangaben und mögliche Aktualisierungen. Für Menschen ohne Bildzugang stehen die Bildbeschreibungen und alle fachlichen Erklärungen im Kurstext.

Externe Lernvideos (optional, nicht offen lizenziert behauptet):

CSS KURS in 40 Minuten, Kanal Programmieren lernen, Veröffentlichung laut indexiertem Metadatensatz 07.05.2022. Urheberrechte verbleiben bei den Rechteinhabern; direkte Abspielbarkeit/regionaler Zugriff am 22.10.2026 nicht abschließend verifizierbar.
Programmieren lernen für Anfänger – Webentwicklung in 45 Minuten, Kanal NetLamp (German), veröffentlicht laut indexiertem Metadatensatz 07.11.2020. Lizenz nicht als OER bestätigt; Abrufbarkeit möglicherweise eingeschränkt.

Alternative ohne externe Medien: Bearbeite die drei lokalen Beispiel-Dateien, den dreifachen Test und die Aufgaben direkt nach den schriftlichen Anleitungen. Es ist keine Registrierung nötig.

Wikipedia zum Weiterlesen:

Die eingebettete Wikipedia-Seite ist ergänzend; du kannst auch ohne Einbettung arbeiten. Prüfe Wikipedia-Aussagen gegen die oben verlinkte Fachdokumentation.