Inhalt
Aufgabenstellung
Es soll ein einfacher Blog umgesetzt werden.
Beispielhafte Umsetzung
1. Thema
Wähle ein Thema aus, zu dem die diesem Blog erstellen möchtest (z.B. Mode, Technologie, Sport, Musik, Gaming, …).
2. Seitenstruktur
Der Blog besteht aus mindestens 6 Seiten:
- Startseite
- Author/in (Über mich)
- Impressum
- Detailseite für Beitrag eins
- Detailseite für Beitrag zwei
- Detailseite für Beitrag drei
3. Erstellen der Startseite
Erstelle ein Dokument für die Startseite des Blogs: index.html
Die Startseite soll aus folgenden Bereichen bestehen:
- Navigation
- Erstelle einen Navigation, die auf die 3 Seiten Startseite, Über mich und Impressum verlinkt.
- Diese Navigation soll dann auf allen Seiten eingebunden werden
- Header
- Mit ansprechendem Bild zum Thema
- Vorschau von mind. 3 Beiträgen
- Mit Vorschaubild, Überschrift, Einleitungstext und Link auf die Detailseite
- Footer
- Link mit deiner E-Mail Adresse, Adresse, etc.
Verwende semantische Container, um die Website richtig zu strukturieren.
4. Erstellen der weiteren Seiten
Erstelle die restlichen Seiten und befülle sie mit Inhalten. Folgende Elemente sollten in jedem Fall vorkommen:
- Textauszeichnungen (Überschriften, Absätze, Zitate, …)
- Bilder
- Tabellen
- Listen
- Links
5. Zusatz
Erweitere die Website nach Belieben (z.B.: erstelle ein Logo und verwende es als Link für die Startseite).
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
- 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 - HTML Basics
- Mozilla.org - Document and website structure
- w3schools.com - Semantische Elemente
- Aufgabe 1 - HTML-Portfolio
- Aufgabe 2 - CSS-Portfolio
- Aufgabe 3 - Formulare
- Aufgabe - Wiederholung HTML und CSS