Projekt:2018/HTML Diff 8.1: Unterschied zwischen den Versionen
Jneug (Diskussion | Beiträge) Markierungen: Mobile Bearbeitung Mobile Web-Bearbeitung |
Jneug (Diskussion | Beiträge) |
||
| (14 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
== Projektziel == | == 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 | 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 [https://diff.ngb.schule/ diff.ngb.schule] ansehen. | Die Ergebnisse des letzten Schuljahres könnt ihr unter [https://diff.ngb.schule/ diff.ngb.schule] ansehen. | ||
| Zeile 9: | Zeile 9: | ||
{{Kasten|'''Abgabe der Steckbriefe''' | {{Kasten|'''Abgabe der Steckbriefe''' | ||
Abgabe der Steckbriefe ist am '''Do., 29.11.2018''' im Tauschordner. Wer Probleme mit der Abgabe im Tauschordner hat, der kann die Dateien bis '''Fr., 30. | Abgabe der Steckbriefe ist am '''Do., 29.11.2018''' im Tauschordner. Wer Probleme mit der Abgabe im Tauschordner hat, der kann die Dateien bis '''Fr., 30.11.2018 um 23:59 Uhr''' per Mail an [mailto:schule@neugebauer.cc schule@neugebauer.cc] schicken. | ||
''Abzugeben ist der komplette HTML-Ordner, inklusive der Unterordner "bilder" und " | ''Abzugeben ist der komplette HTML-Ordner, inklusive der Unterordner "bilder" und "css" mit ihren Inhalten.'' (Am besten in Form einer [[wikipedia:ZIP-Dateiformat|ZIP-Datei]].) | ||
[[Datei:Icon Warning.png|24px|class=alert-icon|link=]] Achtet darauf, dass die Abgabe alle wichtigen Dateien enthält! Alle Bilder müssen im Unterordner "bilder" abgegelgt sein, alle CSS-Dateien im Ordner "css". Bewertet wird das abgegebene Produkt, nicht der Zustand auf eurem Rechner. Testet eurer Seite also gegebenenfalls vorher auf anderen Computern. | |||
|Farbe={{Farbe:Warnung}}}} | |Farbe={{Farbe:Warnung}}}} | ||
| Zeile 27: | Zeile 29: | ||
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: | 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 von Textelementen (z.B. Textfarbe, Unterstreichungen, ...) | ||
Optional können diese Elemente in den Steckbrief eingebaut werden: | Optional können diese Elemente in den Steckbrief eingebaut werden: | ||
# [https://link.ngb.schule/css-pseudoklassen Formatierung mit Pseudoselektoren] (z.B. Links mit :visited, Änderungen mit :hover, ...) | |||
# Multimedia-Objekte (z.B. Videos, Audio, interaktive Elemente, ...) | # Multimedia-Objekte (z.B. Videos, Audio, interaktive Elemente, ...) | ||
# Strukturierungselemente ( | # Strukturierungselemente (<div>, Navigationselemente, ...) | ||
# Formulare | # Formulare | ||
# Icons (z.B. [https://www.font-awesome.com Font Awesome]) | # Icons (z.B. [https://www.font-awesome.com Font Awesome]) | ||
| Zeile 39: | Zeile 41: | ||
== Hilfreiche Links == | == Hilfreiche Links == | ||
=== Links aus dem Unterricht === | |||
* [https://link.ngb.schule/html-bailey Baileys Homepage] | |||
* [https://link.ngb.schule/html-takota Takotas Homepage] | |||
* [https://link.ngb.schule/html-steckbrief Arbeitsauftrag HTML-Steckbrief] | |||
* [https://link.ngb.schule/html-neue-tags Einführung neuer HTML-Tags] | |||
* [https://link.ngb.schule/html-tabellen Beispiel einer HTML-Tabellen] | |||
* [https://link.ngb.schule/css-uebersicht Übersicht von CSS-Eigenschaften] | |||
* [https://link.ngb.schule/css-pseudoklassen Einführung zu CSS-Pseudoklassen] | |||
=== Weiterführende Links === | |||
* [https://www.phase5.info/ Phase5 HTML-Editor] | |||
* [https://www.html-seminar.de/html-editor.htm Einführung in den Phase5 HTML-Editor] | * [https://www.html-seminar.de/html-editor.htm Einführung in den Phase5 HTML-Editor] | ||
* [https://link.ngb.schule/html-steckbrief Online HTML-Editor zum Ausprobieren neuer Elemente] | * [https://link.ngb.schule/html-steckbrief Online HTML-Editor zum Ausprobieren neuer Elemente] | ||
Aktuelle Version vom 24. November 2018, 11:53 Uhr
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.
Abgabe der Steckbriefe
Abgabe der Steckbriefe ist am Do., 29.11.2018 im Tauschordner. Wer Probleme mit der Abgabe im Tauschordner hat, der kann die Dateien bis Fr., 30.11.2018 um 23:59 Uhr per Mail an schule@neugebauer.cc schicken.
Abzugeben ist der komplette HTML-Ordner, inklusive der Unterordner "bilder" und "css" mit ihren Inhalten. (Am besten in Form einer ZIP-Datei.)
Achtet darauf, dass die Abgabe alle wichtigen Dateien enthält! Alle Bilder müssen im Unterordner "bilder" abgegelgt sein, alle CSS-Dateien im Ordner "css". Bewertet wird das abgegebene Produkt, nicht der Zustand auf eurem Rechner. Testet eurer Seite also gegebenenfalls vorher auf anderen Computern.
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, ...)
Optional können diese Elemente in den Steckbrief eingebaut werden:
- Formatierung mit Pseudoselektoren (z.B. Links mit :visited, Änderungen mit :hover, ...)
- Multimedia-Objekte (z.B. Videos, Audio, interaktive Elemente, ...)
- Strukturierungselemente (<div>, Navigationselemente, ...)
- Formulare
- Icons (z.B. Font Awesome)
Bewertung
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.
Hilfreiche Links
Links aus dem Unterricht
- Baileys Homepage
- Takotas Homepage
- Arbeitsauftrag HTML-Steckbrief
- Einführung neuer HTML-Tags
- Beispiel einer HTML-Tabellen
- Übersicht von CSS-Eigenschaften
- Einführung zu CSS-Pseudoklassen