Sedan/ifg-html-vorlage
2
0
Fork 0
mirror of https://git.schule.click/GymSedan/ifg-html-vorlage.git synced 2025-11-04 03:49:22 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Aufgabe für 2023/24 gelöscht.

Browse source
This commit is contained in:
Daniel Spittank 2023-08-13 14:37:49 +02:00
parent 60774a9c0a
commit c8bbafb244
1 changed files with 0 additions and 160 deletions
Download patch file Download diff file Expand all files Collapse all files

160
aufgabe.html
View file

@ -1,160 +0,0 @@
<!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>
<dl>
<dt>Wann?</dt>
<dd>bis zum 29.05.2023, 23:59 Uhr</dd>
<dt>Was?</dt>
<dd>Erarbeitung der notwendigen Befehle, Erstellung einer eigenen Webseite</dd>
<dt>Wer?</dt>
<dd>Der gesamte Kurs / Abgabe zu zweit möglich</dd>
<dt>Bewertung?</dt>
<dd>Projektaufgabe entspricht der letzten Klausur</dd>
</dl>
<h2>Aufgabe</h2>
<p>Erstellt 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>