Inhalt
Aufgabenstellung
Der bereits erstellte HTML-Blog soll mittels Stylesheets anschaulich dargestellt werden. Der Fantasie sind keine Grenzen gesetzt:
Beispielhafte Umsetzung
1. Einbinden der Dateien
Erstelle nur eine CSS-Datei und binde diese per link im Header aller HTML-Dateien ein.
2. Selektoren
Verwende unterschiedliche Selektoren, je nach Anforderung:
- Tag-Selektoren, z.B.:
h1 { ... } - Klassen-Selektoren, z.B.:
.rot { ... } - ID-Selektoren, z.B.:
#container { ... } - Pseudo-Selektoren, z.B.:
a:hover { ... } - Kombinationen daraus, z.B.:
ul.menu li a:hover { ... }
3. Stylen der Seite
Verwende benutzerdefinierte Styles mindestens für folgende Elemente:
- Textauszeichnungen (Überschriften, Absätze, Zitate, …)
- Bilder
- Beispielhafte Umsetzung der Seite mittels CSS
- Tabellen
- Listen
- Links
- Navigation
- Semantische Elemente (Footer, Header, …)
4. Zusatz
Style die Website so, dass sie auch von Mobilgeräten vernünftig dargestellt werden können.
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)
Ressourcen
- Mozilla.org - CSS Basics
- Mozilla.org - CSS Selectors
- Mozilla.org - Layout mit CSS
- w3schools.com - CSS Selectors
- w3schools.com - CSS Website Layout (old school)
- Aufgabe 1 - HTML-Portfolio
- Aufgabe 2 - CSS-Portfolio
- Aufgabe 3 - Formulare
- Aufgabe - Wiederholung HTML und CSS