Vom Code zur Webseite
HTML beschreibt die Bedeutung eines Inhalts. CSS legt fest, wie dieser Inhalt aussieht. Gute Webseiten sind auĂerdem ĂŒbersichtlich, tastaturbedienbar und auf kleinen Bildschirmen lesbar.
Lernziele und Arbeitsauftrag
Du erstellst eine kleine, verstĂ€ndliche Webseite und ĂŒberprĂŒfst sie selbststĂ€ndig.
- Verwende Ăberschrift, AbsĂ€tze, Liste und einen sinnvollen Button.
- Gestalte Hintergrund, Textfarbe und Abstand mit CSS.
- Teste die Seite mit Tastatur und schmalem Browserfenster.
- ErklÀre am Ende, welche Aufgabe HTML und welche Aufgabe CSS hat.
Formulare, Barrierefreiheit und responsive Gestaltung
Formulare sammeln Eingaben. Ein label gehört immer zu einem input, damit auch Screenreader und Tastatur-Nutzer wissen, was einzutragen ist. Eingaben mĂŒssen verstĂ€ndlich beschriftet und vor dem Absenden geprĂŒft werden.
Barrierefreiheit bedeutet, dass möglichst viele Menschen eine Webseite nutzen können. Dazu gehören ausreichende Kontraste, sinnvolle Ăberschriften, sichtbare FokuszustĂ€nde, Tastaturbedienung, verstĂ€ndliche Fehlermeldungen und Alternativtexte fĂŒr informative Bilder.
Responsive Design passt Layout und Schrift an unterschiedliche Bildschirmbreiten an. Flexible Spalten, relative GröĂen und Media Queries verhindern horizontales Scrollen am Smartphone.
Mini-Editor
VerĂ€ndere den Code und beobachte die Vorschau. Schreibe anschlieĂend eine eigene kleine Infoseite zu einem Thema aus Digitale Grundbildung.
HTML oder CSS?
Ordne die Aufgabe dem richtigen Bereich zu.
Interaktives Formular: Barrierefrei planen
FĂŒlle eine kurze Projektanfrage aus. Die Seite prĂŒft, ob alle Pflichtfelder verstĂ€ndlich ausgefĂŒllt sind.
Projektauftrag
- Erstelle eine Seite mit Ăberschrift, Text, Liste und einer Frage.
- Gestalte sie mit mindestens drei CSS-Regeln.
- PrĂŒfe, ob die Seite auch am Handy lesbar ist.
- Teste die Tastaturbedienung und ergÀnze sinnvolle Alternativtexte, falls du Bilder verwendest.