Inhalt
Aufgabenstellung
Erstelle eine HTML Seite mit einem Formular. Das Formular kann zum Beispiel ein Gewinnspiel oder die Bestellseite eines Pizzalieferanten sein.
1. Funktionalität
Das Formular muss mindestens folgende Felder enthalten:
- Checkboxen mit mind. 3 Auswahlmöglichkeiten
- Mind. 3 Textfelder
- Dropdown-Feld (
select→option) - Abschicken Button
- Zurücksetzen Button
Die Formulardaten sollen per post an https://services.htl-futurezone.at/checkform/ geschickt werden. Mit dieser URL kann einfach überprüft werden, ob die Inhalte aller Elemente richtig übergeben
werden.
2. Aussehen mit CSS
Die Seite ist mit CSS ansprechend zu gestalten.
Beispielhafte Umsetzung (Design und Inhalt können gerne adaptiert werden)
3. Zusatz
Adaptiere das Design mithilfe von Media Queries so, dass es auch auf mobilen Endgeräten wie z.B. Smartphones gut dargestellt wird.
Abgabe
Abgabeplattform
Die Plattform der Abgabe wird im Unterricht besprochen.
Abgabe über Teams
Eine .zip-Datei mit allen Dateien und Verzeichnissen. Entpacke die Datei vorher testweise auf deinem Rechner. Der entpackte Inhalt muss vom Browser geöffnet und fehlerfrei dargestellt werden können.
Abgabe über Repl.it
Alternativ kann die Abgabe über replit.com erfolgen.
Bewertungskriterien
- Umfang und Komplexität
- Seitenstruktur (Dateien und Ordner)
- Sauberkeit des Quelltextes
- Dateigröße der Bilder (Dateigröße von Bildern, die zu groß sind, mithilfe von Photoshop verkleinern)
- Darstellung auf unterschiedlichen Bildschirmgrößen (Media Queries)
Ressourcen
- w3schools.com - Formulare
- Mozilla.org - Das Form-Element
- Mozilla.org - Die Input-Elemente
- Mozilla.org - Positionierung mit CSS
- Mozilla.org - Beginners Guide to Media Queries
- Aufgabe 1 - HTML-Portfolio
- Aufgabe 2 - CSS-Portfolio
- Aufgabe 3 - Formulare
- Aufgabe - Wiederholung HTML und CSS