186 lines
6.4 KiB
HTML
186 lines
6.4 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="de">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<title>HTML-Projektaufgabe</title>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: sans;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.content {
|
||
|
|
margin: 30px auto;
|
||
|
|
max-width: 700px;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1, h2, h3 {
|
||
|
|
color: darkblue;
|
||
|
|
}
|
||
|
|
a {
|
||
|
|
color: darkorange;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
dl {
|
||
|
|
background-color: lightgray;
|
||
|
|
padding: 10px;
|
||
|
|
border-color: darkgray;
|
||
|
|
border-style: double;
|
||
|
|
border-radius: 10px;
|
||
|
|
max-width: 80%;
|
||
|
|
}
|
||
|
|
dt {
|
||
|
|
font-weight: 700;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="content">
|
||
|
|
<h1>Projektaufgabe HTML</h1>
|
||
|
|
|
||
|
|
<h2>Aufteilung des Projekts</h2>
|
||
|
|
<h3>Phase 0</h3>
|
||
|
|
<dl>
|
||
|
|
<dt>Wann?</dt>
|
||
|
|
<dd>bis zum 23.12.2021</dd>
|
||
|
|
<dt>Was?</dt>
|
||
|
|
<dd>Einführung ins Thema, Grundstruktur, einfaches CSS</dd>
|
||
|
|
<dt>Wer?</dt>
|
||
|
|
<dd>Der gesamte Kurs</dd>
|
||
|
|
<dt>Bewertung?</dt>
|
||
|
|
<dd>SoMi</dd>
|
||
|
|
</dl>
|
||
|
|
|
||
|
|
<h3>Phase 1</h3>
|
||
|
|
<dl>
|
||
|
|
<dt>Wann?</dt>
|
||
|
|
<dd>bis zum 16.01.2022, 19 Uhr</dd>
|
||
|
|
<dt>Was?</dt>
|
||
|
|
<dd>Erstellung einer eigenen Webseite, Aufgabe siehe unten</dd>
|
||
|
|
<dt>Wer?</dt>
|
||
|
|
<dd>Jede(r) für sich</dd>
|
||
|
|
<dt>Bewertung?</dt>
|
||
|
|
<dd>Kursarbeit</dd>
|
||
|
|
</dl>
|
||
|
|
|
||
|
|
<h3>Phase 2</h3>
|
||
|
|
<dl>
|
||
|
|
<dt>Wann?</dt>
|
||
|
|
<dd>bis ca. Ende Februar</dd>
|
||
|
|
<dt>Was?</dt>
|
||
|
|
<dd>Erweitere Strukturen, Gestaltung und Programmierung</dd>
|
||
|
|
<dt>Wer?</dt>
|
||
|
|
<dd>Der gesamte Kurs / Gruppen</dd>
|
||
|
|
<dt>Bewertung?</dt>
|
||
|
|
<dd>SoMi (Präsentation)</dd>
|
||
|
|
</dl>
|
||
|
|
|
||
|
|
<h2>Aufgabe für Phase 1</h2>
|
||
|
|
<p>Erstelle eine einfache Webseite, zu einem frei gewählten Thema, die die folgenden Anforderungen erfüllt.</p>
|
||
|
|
<ul>
|
||
|
|
<li>Die Seite muss aus <b>mindestens vier Dateien</b> bestehen, davon müssen mindestens <b>zwei HTML-Dateien</b> sein.</li>
|
||
|
|
<li>Die Seiten müssen <b>verlinkt</b> 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).</li>
|
||
|
|
<li>Es müssen <b>Überschriften, Absätze und Listen</b> verwendet werden.</li>
|
||
|
|
<li>Es sollen einfache <b>CSS-Style</b> verwendet werden. Dazu gehören Farben, Schriften, Rahmen usw.</li>
|
||
|
|
<li>Für eine gute Bewertung: Der HTML-Code muss fehlerfrei sein. Das lässt sich leicht mit dem <a href="https://validator.w3.org">W3 Validator</a> überprüfen. Wie das geht, steht <a href="https://www.html-seminar.de/validieren-html-seite.htm">hier</a> genau erklärt.</li>
|
||
|
|
<li>Optional: Verwendet weitere Elemente (Videos, Tabellen, …) oder Stile (Hintergrundbilder). Wie das geht, findet ihr z.B. im Index von <a href="https://wiki.selfhtml.org/">SelfHTML</a>. </li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<h2>Kurze Wiederholung</h2>
|
||
|
|
<h3>Die Grundstruktur</h3>
|
||
|
|
Die Grundstruktur einer HTML-Datei findet ihr im Verzeichnis "grundstruktur" unter dem Namen <a href="grundstruktur/index.html">"index.html"</a>.
|
||
|
|
|
||
|
|
<h3>Absätze</h3>
|
||
|
|
<pre><p>Ein Text in einem Absatz.</p></pre>
|
||
|
|
|
||
|
|
<h3>Überschriften</h3>
|
||
|
|
Es gibt sechs verschiedene Überschriftenlevel von h1 bis h6. Dabei ist h1 die höchste (größte)
|
||
|
|
und h6 die niedrigste (kleinste).
|
||
|
|
<pre><h1>Text</h1></pre>
|
||
|
|
|
||
|
|
<h3>Textformat</h3>
|
||
|
|
<em>Kursiv</em>
|
||
|
|
<pre><em>Text</em></pre>
|
||
|
|
|
||
|
|
<strong>Fett</strong>
|
||
|
|
<pre><strong>Text</strong></pre>
|
||
|
|
|
||
|
|
<u>Unterstrichen</u>
|
||
|
|
<pre><u>Text</u></pre>
|
||
|
|
|
||
|
|
Fließtext für CSS-Stil
|
||
|
|
<pre><span>Text</span></pre>
|
||
|
|
|
||
|
|
Block für CSS-Stil
|
||
|
|
<pre><div>Text</div></pre>
|
||
|
|
|
||
|
|
<h3>Listen</h3>
|
||
|
|
Es gibt
|
||
|
|
<ul>
|
||
|
|
<li>unsortierte (ul, mit Punkten)
|
||
|
|
<pre>
|
||
|
|
<ul>
|
||
|
|
<li>erster</li>
|
||
|
|
<li>zweiter</li>
|
||
|
|
<li>dritter</li>
|
||
|
|
</ul></pre>
|
||
|
|
</li>
|
||
|
|
</ul>und
|
||
|
|
<ol>
|
||
|
|
<li>sortierte Listen (ol, mit Nummern).
|
||
|
|
<pre>
|
||
|
|
<ol>
|
||
|
|
<li>erster</li>
|
||
|
|
<li>zweiter</li>
|
||
|
|
<li>dritter</li>
|
||
|
|
</ol></pre></li>
|
||
|
|
</ol>
|
||
|
|
|
||
|
|
<h3>Bilder</h3>
|
||
|
|
|
||
|
|
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.
|
||
|
|
|
||
|
|
<pre><img src="apfelmus.jpg" alt="Ein beschreibender Text, der statt dem Bild angezeigt werden kann." /></pre>
|
||
|
|
|
||
|
|
<h3>
|
||
|
|
CSS
|
||
|
|
</h3>
|
||
|
|
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:
|
||
|
|
<pre>
|
||
|
|
<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>
|
||
|
|
</pre> <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>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|