Projektaufgabe HTML

Aufteilung des Projekts

Wann?: bis zum 29.05.2023, 23:59 Uhr
Was?: Erarbeitung der notwendigen Befehle, Erstellung einer eigenen Webseite
Wer?: Der gesamte Kurs / Abgabe zu zweit möglich
Bewertung?: Projektaufgabe entspricht der letzten Klausur

Aufgabe

Erstellt 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>

und

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>