noboevbo/pmhs_htmlcss_dungeon

PMHS - JavaScript Dungeon

Anleitung zum Hinzufügen neuer Aufgaben

1. Im Unterodner aufgaben die Datei 00_template.html kopieren und unter neuem Aufgabennamen einfügen
2. Im Template die TODOs (Anleitung erstellen + externe JS Check Datei (js/exercises/aufgabenname.js) einbinden)
3. Im Ordner js/exercises/ das Template kopieren und unter neuem Aufgabennamen einfügen und den Check implementieren
4. In der Datei js/jsdungeon.js das Array exerciseList um die neue Aufgabe (Aufgabenname == Dateiname) erweitern

Tipp Generell:

https://www.w3schools.com/html/default.asp durchschauen, jede Seite verstehen

Was muss vermittelt werden?

• Begrifflichkeiten (semantische Tags, responsive layouts, Block vs Inline, ...)
• HTML Tags generell
• Boxmodell!
• CSS (hauptsächlich richtung Farben, Typo, Border, Margin, Padding, ...)
• Barrierefreiheit (img alt usw.)

TODOs

DEL / INS synonyme, auch nochmal bei i, em usw. checken

Aufgaben in Kategorien ordnen (nach https://www.on-design.de/tutor/html5_css3/referenzen/vokabel.html)? Head Elemente Body Elemente Block Elemente (Strukturgebend) Formular Elemente Tabellen Elemente Inline-Block Elemente Inline Elemente Zeichenformate / semantische Textauszeichnung logische Zeichenformate Semantische Blockelemente (section, nav, article, ...) Eingebettete Inhalte (audoi video, HTML5 kram halt)

Semantische vs nicht semantische Elemente (https://www.w3schools.com/html/html5_semantic_elements.asp) Responsive (Viewport, bilder width, max width, relativ vs absolut, responsive font size, media queries)

TODOs

• ABI Prüfungen: Inline styles vs externe styles?
• Aufgabe Text Styles (Farbe, Größe, Sans / Serif / Webfonts?!)
• Aufgabe Text Farbe (Hintergrund, Vordergrund, Verläufe?)
• Aufgabe Boxmodell (Farben, inline, block, Margin, Padding, Border) -> Inhalte EK: https://www.bildungsplaene-bw.de/site/bildungsplan/get/documents_E1712659558/lsbw/Bildungsplaene-BERS/MediaCenter/bg/bg_neu2016/TG/BG2-TG_Computertechnik-LPH-5-2016_16_3951.pdf

Seitenbeschreibungssprache – Dateistruktur – Sprachelemente – Datenausgabe HTML5 Dokumententyp, Dateikopf, Dateikörper Text, Listen, semantische Tags, Tabellen, Links, Bilder, Sound, Video Online (Upload), Offline

Formatierungssprache – Sprachelemente

– Gestaltung – Layout CSS3 Regeln, Selektoren, Einbinden in HTML5,
Inline- und Blockelemente Text (Schriftart, -größe), Farben, Hintergründe Boxmodell

Datenausgabe – Datenhandling

– Datenübertragung

Dateiformate, Pfadangaben, Adressierung, URL Upload, Download, Datenübertragungsrate

Aknowledgments

shimmer by airtone (c) copyright 2022 Licensed under a Creative Commons Attribution (3.0) license. http://dig.ccmixter.org/files/airtone/64622