ifg-html-vorlage/aufgabe.html

186 lines
6.4 KiB
HTML
Raw Normal View History

2022-01-11 02:45:05 +01:00
<!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>&lt;p&gt;Ein Text in einem Absatz.&lt;/p&gt;</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>&lt;h1&gt;Text&lt;/h1&gt;</pre>
<h3>Textformat</h3>
<em>Kursiv</em>
<pre>&lt;em&gt;Text&lt;/em&gt;</pre>
<strong>Fett</strong>
<pre>&lt;strong&gt;Text&lt;/strong&gt;</pre>
<u>Unterstrichen</u>
<pre>&lt;u&gt;Text&lt;/u&gt;</pre>
Fließtext für CSS-Stil
<pre>&lt;span&gt;Text&lt;/span&gt;</pre>
Block für CSS-Stil
<pre>&lt;div&gt;Text&lt;/div&gt;</pre>
<h3>Listen</h3>
Es gibt
<ul>
<li>unsortierte (ul, mit Punkten)
<pre>
&lt;ul&gt;
&lt;li&gt;erster&lt;/li&gt;
&lt;li&gt;zweiter&lt;/li&gt;
&lt;li&gt;dritter&lt;/li&gt;
&lt;/ul&gt;</pre>
</li>
</ul>und
<ol>
<li>sortierte Listen (ol, mit Nummern).
<pre>
&lt;ol&gt;
&lt;li&gt;erster&lt;/li&gt;
&lt;li&gt;zweiter&lt;/li&gt;
&lt;li&gt;dritter&lt;/li&gt;
&lt;/ol&gt;</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>&lt;img src="apfelmus.jpg" alt="Ein beschreibender Text, der statt dem Bild angezeigt werden kann." /&gt;</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>
&lt;style&gt;
div.pinkeBox {
width: 100px;
height: 100px;
background-color: pink;
border-style: solid;
border-color: purple;
border-width: 5px;
border-radius: 10px;
}
&lt;/style&gt;
&lt;div class="pinkeBox"&gt;
&lt;/div&gt;
</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>