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>

und

1. 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>