Benutzer:Jneug/Vorlagen/Steckbrief
Seite zum HTML-Projekt des Informatik Differenzierungskurses 8.1 im Schuljahr %%Schuljahr%%.
Projektziel
Erstellt alleine oder zu zweit einen Steckbrief von euch als HTML-Seite. Wenn ihr zu zweit arbeitet, dann könnt ihr entweder zwei einzelne Steckbriefe erstellen (zwei HTML-Dateien) oder euch gemeinsam auf einer HTML-Seite vorstellen.
Die Ergebnisse des letzten Schuljahres könnt ihr unter diff.ngb.schule ansehen.
Ablauf
Im Laufe des Unterrichts lernt ihr immer neue Elemente zur Gestaltung von HTML-Seiten kennen. Ihr werdet jedesmal Gelegenheit haben, das Gelernte in euren Steckbrief einzubauen. Am Ende sollte eure Seite möglichst viele der Elemente enthalten. Darunter werden unter anderem Tabellen, Bilder und Multimedia-Objekte sein.
Anforderungen
Jeder Steckbrief muss ein oder mehrere Vorkommen der folgenden im Unterricht behandelten Elemente enthalten:
- Tags zur Textauszeichnung
- Absätze
- Fett, Kursiv, Unterstreichungen, ...
- Überschriften
- Bilder
- Links
- Listen
- Tabellen
Außerdem muss der HTML-Steckbrief mit einer CSS-Datei verknüpft sein, welche verschiedene Elemente des Steckbriefs mit CSS-Regeln formatiert. Darunter sollen folgende Elemente sein:
- Formatierung von Textelementen (z.B. Textfarbe, Unterstreichungen, ...)
- Formatierung mit Pseudoselektoren (z.B. Links mit :visited, Änderungen mit :hover, ...)
Optional können diese Elemente in den Steckbrief eingebaut werden:
- Multimedia-Objekte (z.B. Videos, Audio, interaktive Elemente, ...)
- Strukturierungselemente (<div>, Navigationselemente, ...)
- Formulare
- Icons (z.B. Font Awesome)
Zusätzlich soll der Aufbau der HTML-Seite in Form eines Baumdiagramms dargestellt werden.
Bewertungskriterien
Bewertet wird die Vollständigkeit der Steckbriefe nach den obigen Vorgaben, Aufbau und Struktur des Quelltextes (wie ordentlich der Quelltext geschrieben ist) und wie sinnvoll die Inhalte des Steckbriefes sind.
Die Gruppe … | Mögliche Punkte |
---|---|
HTML-Elemente (P%) | |
… hat einen Textabsatz sinnvoll eingebaut. | X |
HTML-Quelltext (P%) | |
… strukturiert den Quelltext sinnvoll und übersichtlich. | X |
Inhalte (P%) | |
… hat relevante Informationen eingebaut und durch passende HTML-Elemente dargestellt. | X |
Baumdiagramm (P%) | |
… stellt die HTML-Struktur vollständig in einem Baumdiagramm dar. | X |
Punkte insgesamt: | XXX |
Hilfreiche Links
Links aus dem Unterricht
- Baileys Homepage
- Takotas Homepage
- Arbeitsauftrag HTML-Steckbrief
- Einführung neuer HTML-Tags
- Einführung von HTML-Tabellen
- Übersicht von CSS-Eigenschaften
- Einführung zu CSS-Pseudoklassen