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