Projektaufgabe HTML
+ +Aufteilung des Projekts
+Phase 0
+-
+
- Wann? +
- bis zum 23.12.2021 +
- Was? +
- Einführung ins Thema, Grundstruktur, einfaches CSS +
- Wer? +
- Der gesamte Kurs +
- Bewertung? +
- SoMi +
Phase 1
+-
+
- Wann? +
- bis zum 16.01.2022, 19 Uhr +
- Was? +
- Erstellung einer eigenen Webseite, Aufgabe siehe unten +
- Wer? +
- Jede(r) für sich +
- Bewertung? +
- Kursarbeit +
Phase 2
+-
+
- Wann? +
- bis ca. Ende Februar +
- Was? +
- Erweitere Strukturen, Gestaltung und Programmierung +
- Wer? +
- Der gesamte Kurs / Gruppen +
- Bewertung? +
- SoMi (Präsentation) +
Aufgabe für Phase 1
+Erstelle eine einfache Webseite, zu einem frei gewählten Thema, die die folgenden Anforderungen erfüllt.
+-
+
- Die Seite muss aus mindestens vier Dateien bestehen, davon müssen mindestens zwei HTML-Dateien sein. +
- Die Seiten müssen verlinkt sein, d.h. dass sie entweder per Klick auf einen Link von den anderen Dateien aus aufrufbar sein müssen, oder direkt eingebunden sein (z.B. ein Bild). +
- Es müssen Überschriften, Absätze und Listen verwendet werden. +
- Es sollen einfache CSS-Style verwendet werden. Dazu gehören Farben, Schriften, Rahmen usw. +
- Für eine gute Bewertung: Der HTML-Code muss fehlerfrei sein. Das lässt sich leicht mit dem W3 Validator überprüfen. Wie das geht, steht hier genau erklärt. +
- Optional: Verwendet weitere Elemente (Videos, Tabellen, …) oder Stile (Hintergrundbilder). Wie das geht, findet ihr z.B. im Index von SelfHTML. +
Kurze Wiederholung
+Die Grundstruktur
+ Die Grundstruktur einer HTML-Datei findet ihr im Verzeichnis "grundstruktur" unter dem Namen "index.html". + +Absätze
+<p>Ein Text in einem Absatz.</p>+ +
Überschriften
+ Es gibt sechs verschiedene Überschriftenlevel von h1 bis h6. Dabei ist h1 die höchste (größte) + und h6 die niedrigste (kleinste). +<h1>Text</h1>+ +
Textformat
+ Kursiv +<em>Text</em>+ + Fett +
<strong>Text</strong>+ + Unterstrichen +
<u>Text</u>+ + Fließtext für CSS-Stil +
<span>Text</span>+ + Block für CSS-Stil +
<div>Text</div>+ +
Listen
+ Es gibt +-
+
- unsortierte (ul, mit Punkten)
+
+<ul> + <li>erster</li> + <li>zweiter</li> + <li>dritter</li> +</ul>
+
+
-
+
- sortierte Listen (ol, mit Nummern).
+
+<ol> + <li>erster</li> + <li>zweiter</li> + <li>dritter</li> +</ol>
+
Bilder
+ + Bilder fügt man mit dem Image-Tag (img) ein. Mit dem Attribut "src" gibt man die Quelle an. Das kann nur der Dateiname sein, wenn die Datei im selben Verzeichnis liegt, ein vollständiger Pfad, z.B. bilder/fotos/meinfoto.jpg, oder eine Internetadresse. + +<img src="apfelmus.jpg" alt="Ein beschreibender Text, der statt dem Bild angezeigt werden kann." />+ +
+ CSS +
+ Cascading Style Sheets stehen in einem Style-Tag im Kopfbereich (head) des Dokuments. Sie werden durch den Bezeichner des zu formatierenden Elements und einige Formatierungsanweisungen in geschweiften Klammern angegeben. Beispiel: +
+<style>
+ div.pinkeBox {
+ width: 100px;
+ height: 100px;
+ background-color: pink;
+ border-style: solid;
+ border-color: purple;
+ border-width: 5px;
+ border-radius: 10px;
+ }
+</style>
+
+…
+
+<div class="pinkeBox">
+
+</div>
+
+
+
+
+
+
+