Merge remote-tracking branch 'upstream/main'

2026-06-18 18:43:40 +00:00 · 2026-06-18 18:43:40 +00:00 · 45a261c94a
parent 5bcd141d14 c60e067ee6
commit 45a261c94a
35 changed files with 1148 additions and 0 deletions
--- a/web/12/demos/01_inline.html
+++ b/web/12/demos/01_inline.html
@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8">
+    <title>Mein erstes CSS</title>
+  </head>
+  <body>
+    Dieser <span style="color:magenta; background-color:aquamarine;">Text</span> soll schöner werden.
+  </body>
+</html>
--- a/web/12/demos/02_stylesheet.css
+++ b/web/12/demos/02_stylesheet.css
@ -0,0 +1,29 @@
+body {
+    background-color: antiquewhite;
+}
+
+p {
+    color: blueviolet;
+}
+
+span {
+    color: chocolate;
+}
+
+#dritter-absatz {
+    color: green;
+}
+
+.gut-lesbar {
+    color:black;
+    background-color:white;
+}
+
+.schlecht-lesbar {
+    color:blue;
+    background-color: brown;
+}
+
+.klein {
+    font-size: small;
+}
--- a/web/12/demos/02_stylesheet.html
+++ b/web/12/demos/02_stylesheet.html
@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8">
+    <link href="02_stylesheet.css" rel="stylesheet">
+    <title>HTML mit CSS-Stylesheet</title>
+  </head>
+  <body>
+    <p>Dies ist ein Absatz.</p>
+    <p>Dies ist ein Absatz mit einer <span>Markierung</span> mittendrin.</p>
+     <p id="dritter-absatz">Dies ist ein Absatz mit einer Sprungmarke.</p>
+	<p class="gut-lesbar">Dies ist ein besonders gut lesbarer Text.</p>
+    <p class="schlecht-lesbar">Dies ist ein besonders schlecht lesbarer Text.</p>
+    <p class="gut-lesbar klein">Dies ist ein kleiner besonders gut lesbarer Text.</p>
+  </body>
+</html>
--- a/web/12/demos/03_pseudoklassen.css
+++ b/web/12/demos/03_pseudoklassen.css
@ -0,0 +1,26 @@
+/* Standard-Link (noch nicht besucht) */
+a:link {
+  color: #f56487;
+  text-decoration: none;
+}
+
+/* Bereits besuchter Link */
+a:visited {
+  color: purple;
+}
+
+/* Hover-Effekt */
+a:hover {
+  color: red;
+  text-decoration: underline;
+}
+
+/* Während des Klicks */
+a:active {
+  color: orange;
+}
+
+/* Tastaturfokus (Tab) */
+a:focus {
+  outline: 2px solid violet;
+}
--- a/web/12/demos/03_pseudoklassen.html
+++ b/web/12/demos/03_pseudoklassen.html
@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Link-Pseudoklassen</title>
+  <!-- CSS-Datei einbinden -->
+  <link rel="stylesheet" href="03_pseudoklassen.css">
+</head>
+<body>
+  <h1>Beispiel für Link-Pseudoklassen</h1>
+  <p>Probieren Sie die Links aus:</p>
+  <ul>
+    <li><a href="https://www.example.com">Unbesuchter Link</a></li>
+    <li><a href="https://www.wikipedia.org">Wikipedia</a></li>
+    <li><a href="https://www.mozilla.org">Mozilla</a></li>
+  </ul>
+</body>
+</html>
--- a/web/12/demos/04_nikolaus_bad.html
+++ b/web/12/demos/04_nikolaus_bad.html
@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link rel="stylesheet" href="04_styles_nikolaus_bad.css">
+	<title>Nikolaus-Lied</title>
+</head>
+
+<body>
+	<h1><span class="nikolaus-ueberschrift">Nikolaus</span>-Lied</h1>
+	<h2>Lasst uns froh und munter sein</h2>
+	<p>
+		<span class="strophe">
+			Lasst uns froh und munter sein
+			und uns recht von Herzen freun!
+		</span>
+		<span class="refrain">
+			Lustig, lustig, tralalala!
+			Bald ist <span class="nikolaus-refrain">Nikolaus</span>-Abend da,
+			bald ist <span class="nikolaus-refrain">Nikolaus</span>-Abend da!
+		</span>
+	</p>
+	<p>
+		<span class="strophe">
+			Dann stell’ ich den Teller auf,
+			<span class="nikolaus-strophe">Nikolaus</span> legt gewiss was drauf.
+		</span>
+		<span class="refrain">
+			Lustig, lustig, tralalala!
+			Bald ist <span class="nikolaus-refrain">Nikolaus</span>-Abend da,
+			bald ist <span class="nikolaus-refrain">Nikolaus</span>-Abend da!
+		</span>
+	</p>
+	<p>
+		<span class="strophe">
+			Wenn ich schlaf’, dann träume ich:
+			Jetzt bringt <span class="nikolaus-strophe">Nikolaus</span> was für mich.
+		</span>
+		<span class="refrain">
+			Lustig, lustig, tralalala!
+			Bald ist <span class="nikolaus-refrain">Nikolaus</span>-Abend da,
+			bald ist <span class="nikolaus-refrain">Nikolaus</span>-Abend da!
+		</span>
+	</p>
+	<p>
+		<span class="strophe">
+			Wenn ich aufgestanden bin,
+			lauf’ ich schnell zum Teller hin.
+		</span>
+		<span class="refrain">
+			Lustig, lustig, tralalala!
+			Bald ist <span class="nikolaus-refrain">Nikolaus</span>-Abend da,
+			bald ist <span class="nikolaus-refrain"><span class="nikolaus">Nikolaus</span></span>-Abend da!
+		</span>
+	</p>
+	<p>
+		<span class="strophe">
+			<span class="nikolaus-strophe">Nikolaus</span> ist ein guter Mann,
+			dem man nicht genug danken kann.
+		</span>
+		<span class="refrain">
+			Lustig, lustig, tralalala!
+			Bald ist <span class="nikolaus-refrain">Nikolaus</span>-Abend da,
+			bald ist <span class="nikolaus-refrain">Nikolaus</span>-Abend da!
+		</span>
+	</p>
+</body>
+
+</html>
--- a/web/12/demos/04_styles_nikolaus_bad.css
+++ b/web/12/demos/04_styles_nikolaus_bad.css
@ -0,0 +1,29 @@
+h1 {
+	color: goldenrod;
+}
+
+.refrain {
+	color: green;
+}
+
+.strophe{
+	color: darkred;
+}
+
+.nikolaus-ueberschrift{
+	color: goldenrod;
+	font-style: italic;
+	font-weight: bolder;
+}
+
+.nikolaus-refrain{
+	color: green;
+	font-style: italic;
+	font-weight: bolder;
+}
+
+.nikolaus-strophe{
+	color: darkred;
+	font-style: italic;
+	font-weight: bolder;
+}
--- a/web/12/demos/05_nikolaus_good.html
+++ b/web/12/demos/05_nikolaus_good.html
@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link rel="stylesheet" href="demo_styles_nikolaus_good.css">
+	<title>Nikolaus-Lied</title>
+</head>
+
+<body>
+	<h1><span class="nikolaus">Nikolaus</span>-Lied</h1>
+	<h2>Lasst uns froh und munter sein</h2>
+	<p>
+		<span class="strophe">
+		Lasst uns froh und munter sein
+		und uns recht von Herzen freun!
+		</span>
+		<span class="refrain">
+			Lustig, lustig, tralalala!
+			Bald ist <span class="nikolaus">Nikolaus</span>-Abend da,
+			bald ist <span class="nikolaus">Nikolaus</span>-Abend da!
+		</span>
+	</p>
+	<p>
+		<span class="strophe">
+		Dann stell’ ich den Teller auf,
+		<span class="nikolaus">Nikolaus</span> legt gewiss was drauf.
+		</span>
+		<span class="refrain">
+			Lustig, lustig, tralalala!
+			Bald ist <span class="nikolaus">Nikolaus</span>-Abend da,
+			bald ist <span class="nikolaus">Nikolaus</span>-Abend da!
+		</span>
+	</p>
+	<p>
+		<span class="strophe">
+		Wenn ich schlaf’, dann träume ich:
+		Jetzt bringt <span class="nikolaus">Nikolaus</span> was für mich.
+		</span>
+		<span class="refrain">
+			Lustig, lustig, tralalala!
+			Bald ist <span class="nikolaus">Nikolaus</span>-Abend da,
+			bald ist <span class="nikolaus">Nikolaus</span>-Abend da!
+		</span>
+	</p>
+	<p>
+		<span class="strophe">
+		Wenn ich aufgestanden bin,
+		lauf’ ich schnell zum Teller hin.
+		</span>
+		<span class="refrain">
+			Lustig, lustig, tralalala!
+			Bald ist <span class="nikolaus">Nikolaus</span>-Abend da,
+			bald ist <span class="nikolaus"><span class="nikolaus">Nikolaus</span></span>-Abend da!
+		</span>
+	</p>
+	<p>
+		<span class="strophe">
+		<span class="nikolaus">Nikolaus</span> ist ein guter Mann,
+		dem man nicht genug danken kann.
+		</span>
+		<span class="refrain">
+			Lustig, lustig, tralalala!
+			Bald ist <span class="nikolaus">Nikolaus</span>-Abend da,
+			bald ist <span class="nikolaus">Nikolaus</span>-Abend da!
+		</span>
+	</p>
+</body>
+
+</html>
--- a/web/12/demos/05_styles_nikolaus_good.css
+++ b/web/12/demos/05_styles_nikolaus_good.css
@ -0,0 +1,30 @@
+html {
+	font-size: 16px;
+}
+
+p {
+    font-size: 1.5em;
+}
+
+h1 {
+	color: goldenrod;
+}
+
+.refrain {
+	font-size: 1.2em;
+	color: green;
+}
+
+.strophe{
+	color: darkred;
+}
+
+.nikolaus{
+	font-size: 1.3em;
+	font-style: italic;
+	font-weight: bolder;
+}
+
+h1 .nikolaus{
+	box-shadow: 1px 1px 2px 3px darkgreen;
+}
--- a/web/12/demos/06_cascading.html
+++ b/web/12/demos/06_cascading.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+	<meta charset="UTF-8">
+	<link href="demo_styles_cascading.css" rel="stylesheet">
+	<title>Kaskaden</title>
+</head>
+
+<body>
+	<h1>Wie Kaskaden funktionieren</h1>
+	<p>Mit Kaskaden kann man sich zu viele feingranulare <span>Style-Klassen</span> sparen.</p>
+</body>
+
+</html>
--- a/web/12/demos/06_styles_cascading.css
+++ b/web/12/demos/06_styles_cascading.css
@ -0,0 +1,15 @@
+body {
+    color: blue;
+    font-size: small;
+}
+
+p {
+    color: cornflowerblue;
+    font-weight: bolder;
+    box-shadow: 2px 2px 5px red;
+}
+
+span {
+    font-size: large;
+    /* box-shadow: inherit; */
+}
--- a/web/12/demos/07_fonts.html
+++ b/web/12/demos/07_fonts.html
@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+	<meta charset="UTF-8">
+	<link href="demo_styles_fonts.css" rel="stylesheet">
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link
+		href="https://fonts.googleapis.com/css2?family=Barriecito&family=Noto+Color+Emoji&family=Noto+Emoji:wght@300..700&display=swap"
+		rel="stylesheet">
+	<title>Schriftgrößen in CSS</title>
+</head>
+
+<body>
+	<h1>Schriftgrößen in CSS</h1>
+
+	<h2 class="absatz-px">Dies ist ein Absatz mit <strong>18px</strong> Schriftgröße.</h2>
+	<p class="absatz-pt">Dies ist ein Absatz mit <strong>12pt</strong> Schriftgröße.</p>
+	<p class="absatz-rem">Dies ist ein Absatz mit <strong>1.5rem</strong> Schriftgröße.</p>
+	<p class="absatz-em">Dies ist ein Absatz mit <strong>1.5em</strong> Schriftgröße.</p>
+
+	<h1>Schriftstile in CSS</h1>
+	<h4>Dies ist eine Überschrift mit <strong>kursiver</strong> Schrift.</h4>
+	<p>Dies ist ein Absatz mit <strong>nicht kursiver</strong> Schrift.</p>
+</body>
+
+</html>
--- a/web/12/demos/07_styles_fonts.css
+++ b/web/12/demos/07_styles_fonts.css
@ -0,0 +1,53 @@
+/* @font-face {
+    font-family: 'Roboto Schrift';
+    src: 
+        url('fonts/Roboto-Regular.woff2') format('woff2'),
+        url('fonts/RobotoCondensed-Bold.otf') format('opentype');
+}
+
+body {
+    font-family: 'Roboto Schrift', serif;
+} */
+
+/* 
+body {
+  font-family: "Arial", serif;
+} */
+
+/* body{
+	font-family: Barriecito;
+} */
+
+.absatz-px {
+    font-size: 18px;
+}
+
+.absatz-pt {
+    font-size: 12pt;
+}
+
+strong {
+    font-weight: 800;
+}
+
+h4 strong {
+    font-style: italic;
+}
+
+/* Relative Schriftgröße mit rem (bezogen auf html-Größe) */
+html {
+    font-size: 16px;
+}
+
+.absatz-rem {
+    font-size: 1.5rem;
+}
+
+/* Relative Schriftgröße mit em (bezogen auf Eltern-Element: body) */
+body {
+    font-size: 14px;
+}
+
+.absatz-em {
+    font-size: 1.5em;
+}
--- a/web/12/demos/fonts/Roboto-Regular.woff2
+++ b/web/12/demos/fonts/Roboto-Regular.woff2
--- a/web/12/demos/fonts/RobotoCondensed-Bold.otf
+++ b/web/12/demos/fonts/RobotoCondensed-Bold.otf
--- a/web/12/labor/12_aufgaben.md
+++ b/web/12/labor/12_aufgaben.md
@ -0,0 +1,62 @@
+# Übungsblatt 12
+
+## 1. CSS-Übung: Selektoren
+
+**Aufgabenstellung**: Definieren Sie ein CSS-Stylesheet, das ein vorgegebenes HTML-Dokument einfärbt.
+
+#### Arbeitsschritte
+
+1. Verwenden Sie dazu das vorgebene HTML-Formular [bunt.html](bunt.html).
+2. Erstellen Sie ein Stylesheet und verlinken es im HTML.
+3. Setzen Sie die Hintergrundfarbe des Dokuments auf `slateblue`.
+4. Die Überschrift der ersten Ebene soll `lightcoral` sein.
+5. Alle Überschriften der zweiten Ebene sollen `whitesmoke` sein.
+6. Setzen Sie die restlichen Farben, wie der Text es fordert.
+
+## 2. CSS- und Javascript-Übung: Farben und Events
+
+**Aufgabenstellung**: Erstellen Sie eine interaktive Webseite, die nach Auswahl einer Farbe die Hintergrundfarbe verändert.
+
+#### Arbeitsschritte:
+
+1. Erstellen Sie eine HTML-Seite auf der ein Eingabefeld des Typs `color` zu sehen ist. Denken Sie auch an eine geeignete Beschriftung.
+2. Schreiben Sie ein Javascript-Programm, dass bei Auswahl einer Farbe
+	1. den Hintergrund der HTML-Seite anpasst
+	2. die gewählte Farbe in einer `alert`-Nachricht ausgibt
+
+#### Tipps
+- Setzen der Hintergrundfarbe [w3schools.com: Backgroundcolor](https://www.w3schools.com/jsref/prop_style_backgroundcolor.asp)
+- Auslesen der Farbauswahl [w3schools.com: Input Color](https://www.w3schools.com/jsref/prop_color_value.asp)
+
+## 3. CSS-Übung: Schrift
+
+**Aufgabenstellung**: Ergänzen Sie eine vorgegebene HTML-Seite um Schriftart, Farben und Schriftgrößen mit einem CSS-Stylesheet.
+
+#### Arbeitsschritte
+1. Erstellen Sie ein CSS-Stylesheet und binden Sie es in diese HTML-Seite ein: [Nachricht](nachricht.html).
+2. Verwenden Sie die Google Font "Open Sans".
+3. Setzen Sie die Basis-Schriftgröße (`<html>`) auf `16px`.
+4. Die Überschriften der ersten und zweiten Ebene sollen die Farbe `#005CA9` haben.
+5. Text der Klasse `headline` soll eine dunkelgraue Farbe haben und eine kleinere Schriftgröße als die Basis-Schrift haben.
+6. Text der Klasse `meta` soll eine hellgraue Farbe haben und eine kleinere Schriftgröße als `headline` haben. Außerdem soll der Text kursiv dargestellt werden.
+7. Text der Klasse `source` soll unterstrichen sein.
+8. Testen Sie, ob das relative Verhältnis der Schriftgrößen bestehen bleibt, wenn Sie die Basis-Schriftgröße anpassen (z.B. auf `10px`).
+
+## 4. CSS-Übung: Selektoren und Spezifität
+
+**Aufgabenstellung**: Untersuchen Sie das folgende HTML-Dokument mit dem zugehörigen CSS-Stylesheet und geben Sie zu jedem Kalendereintrag die *Hintergrundfarbe*, *Schriftfarbe* und *unterstrichen/nicht unterstrichen* an.
+
+![HTML mit CSS](uebung02.png)
+
+#### Antworten
+
+1. Termine: 
+2. 10k-Lauf:
+3. Elternabend:
+4. Wocheneinkauf:
+5. Yoga:
+6. Handball-Training:
+7. Mathearbeit:
+8. Fußball-Training:
+9. FCB vs. Eintracht:
+10. Pizza-Tag!:
--- a/web/12/labor/bunt.html
+++ b/web/12/labor/bunt.html
@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link rel="stylesheet" href="styles_uebung01.css">
+	<title>Buntes HTML</title>
+</head>
+<body>
+	<h1>Jetzt wird es bunt</h1>
+	<h2>Alles in Blau-Tönen</h2>
+	<span id="dark">Dieser Text ist darkblue.</span>
+	<br>
+	<span id="light">Dieser Text ist lightskyblue.</span>
+	<h2>Alles in Violett-Tönen</h2>
+	<p class="pastell">Der Hintergrund von diesem Absatz ist pink.</p>
+	<p class="neon">Der Hintergrund von diesem Absatz ist magenta.</p>
+	<h2>Alles in Grün-Tönen</h2>
+	<p class="frosch">
+		<span class="blatt">Der Hintergrund hier ist greenyellow.</span>
+		<br>
+		<br>
+		<span class="blatt">Auch der Bereich zwischen dem Text.</span>
+	</p>
+</body>
+</html>
--- a/web/12/labor/nachricht.html
+++ b/web/12/labor/nachricht.html
@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Tagesschau - Maschinenbau-Bilanz</title>
+</head>
+
+<body>
+	<p class="headline">Schlechte Jahresbilanz</p>
+	<h1>Maschinenbauer warnen die Politik</h1>
+	<p class="meta">Stand: 09.12.2025 12:32 Uhr</p>
+	<p class="summary">Der Branchenverband der Maschinenbauer zieht eine schlechte Jahresbilanz 2025. Der VDMA verlangt Reformen. Sonst
+		würden noch mehr Unternehmen abwandern. Vor allem der Mittelstand leidet unter den Standortbedingungen.</p>
+	<p class="meta">Von Axel J, SWR</p>
+	<p>
+		Julia Schnitzler schaut von ihrem Büro auf die Landstraße, die direkt an ihrem Unternehmen entlang führt. Von
+		hier
+		aus gehen die Spezialanlagen des Herstellers Strassburger Filter in alle Welt. Julia Schnitzler ist hier
+		geschäftsführende Gesellschafterin.
+	</p>
+	<p>"Wir sind aufgrund unserer Expertise international führend, aber es wird immer
+		schwerer. Der Standort Deutschland macht uns zu schaffen. Auch international wird das Geschäftsklima immer
+		rauer",
+		fasst die Geschäftsfrau ein ernüchterndes Jahr zusammen. "Unsere Exporte sind um mehr als zehn Prozent
+		zurückgegangen." Die Firma fertigt Filtrationssysteme für die Bereiche Pharma, Chemie und Kosmetik. Die Exporte
+		gehen vor allem nach Südostasien oder auch nach Nordamerika.
+	</p>
+	<h2>Druck durch chinesische Konkurrenz</h2>
+	<p>Im rheinhessischen Westhofen hat der Betrieb 50 Angestellte. Auch im chinesischen
+		Shanghai arbeiten zwei Spezialisten für das deutsche Unternehmen. China war lange ein starker Markt für den
+		deutschen Filterbauer. "Das hat sich geändert: Die Nachfrage ist zurückgegangen. Es gibt immer mehr chinesische
+		Wettbewerber, die in ihrem heimischen Markt bevorzugt werden", sagt Schnitzler. Qualitativ sei man noch ein
+		gutes
+		Stück voraus. Dafür seien die Chinesen bei den Preisen kaum noch zu schlagen. "Chinesische Firmen haben viel
+		niedrigere Energiepreise. Auch deshalb bieten sie Produkte an, die teils bis zu 75 Prozent billiger als unsere
+		Anlagen sind."</p>
+	<p>Die US-Zölle verschärften die Krise. "Dadurch wird alles noch komplizierter - und unsicherer. Viele
+		unserer Kunden warten erstmal ab. Wer weiß schon, was sich morgen wieder ändert." Pläne zur Verlagerung des
+		Betriebes in die USA habe sie nicht. Aber Schnitzler stellt fest: "Es wird einem in den USA aufgrund der neuen
+		Gesetzeslage inzwischen sehr einfach gemacht, eine Niederlassung zu gründen."
+	</p>
+	<p>Daheim setzen der Firma die
+		Standortbedingungen immer mehr zu. Vor allem die fehlenden Fachkräfte sind ein Problem. Beim Thema
+		Bürokratieabbau
+		schüttelt Julia Schnitzler fast schon resigniert den Kopf. "Alle reden davon, aber es wird immer mehr. Ständig
+		gibt
+		es neue Richtlinien", sagt die geschäftsführende Gesellschafterin "Ein Beispiel: Wenn wir ein bestimmtes Bauteil
+		in
+		einen Filter verbauen, ist das für die Verwaltung eine Kleinigkeit. Liefern wir es aber als Ersatzteil separat
+		aus,
+		entsteht ein enormer Dokumentationsaufwand. Das kostet Zeit, bindet Mitarbeiter und wird immer teurer. Dieses
+		Geld
+		fehlt dann woanders."
+	</p>
+
+	<p class="meta"><span class="source">Quelle</span>: www.tagesschau.de, abgerufen am 9.12.2025</p>
+</body>
+
+</html>
--- a/web/12/labor/uebung02.png
+++ b/web/12/labor/uebung02.png
--- a/web/13/demos/01_simplebox.html
+++ b/web/13/demos/01_simplebox.html
@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <link href="01_styles_simplebox.css" rel="stylesheet">
+  <title>Gestylte Box</title>
+</head>
+<body>
+  <div class="simple-box">
+    <h2>Willkommen!</h2>
+    Dies ist die umgebende <span class="mark">einfache</span> Box.<div class="oben">Innere Box (oben)</div><div class="unten">Innere Box (unten)</div>
+  </div>
+</body>
+</html>
--- a/web/13/demos/01_styles_simplebox.css
+++ b/web/13/demos/01_styles_simplebox.css
@ -0,0 +1,22 @@
+.simple-box {
+	background-color: #78abda;
+	font-family: Arial, sans-serif;
+
+	width: 300px;
+	height: 300px;
+	padding: 20px;
+	border: 2px solid #333;
+	border-radius: 10px;
+	margin: 30px;
+}
+
+.oben {
+	background-color: #e5f41d;
+	height: 20%;
+	margin-bottom: 15px;
+}
+.unten {
+	background-color: red;
+	height: 20%;
+	margin-top: 5px;
+}
--- a/web/13/demos/02_boxes.html
+++ b/web/13/demos/02_boxes.html
@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <link href="02_styles_boxes.css" rel="stylesheet">
+  <title>Gestylte Box</title>
+</head>
+<body>
+	<h2>Verschiedene Boxen</h2>
+  	<div class="box1">
+    	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+  	</div>
+	<div class="box2">
+    	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+  	</div>
+	<div class="box3">
+    	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+  	</div>
+	<div class="box4">
+    	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+  	</div>
+	<div class="box5">
+    	<p>MLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+  	</div>
+</body>
+</html>
--- a/web/13/demos/02_styles_boxes.css
+++ b/web/13/demos/02_styles_boxes.css
@ -0,0 +1,27 @@
+.box1 {
+	background-color: orange;
+}
+
+.box2 {
+	background-color: pink;
+	height: 500px;
+}
+
+.box3 {
+	background-color: turquoise;
+	height: 300px;
+	width: 300px;
+}
+
+.box4 {
+	background-color: slateblue;
+	width: 50%;
+	height: 30%;
+}
+
+.box5 {
+	background-color: beige;
+	width: 2em;
+	height: 5em;
+	overflow: hidden;
+}
--- a/web/13/demos/03_centered.html
+++ b/web/13/demos/03_centered.html
@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+	<meta charset="UTF-8">
+	<title>Zentrierung mit CSS</title>
+	<link rel="stylesheet" href="03_styles_centered.css">
+</head>
+
+<body>
+	<div class="outer-box">
+		<div class="centered-box">
+			Die Luft ist klar, die Nächte still, ein weißer Schleier deckt das Land. Die Kälte ruht, wie sie es will,
+				und malt mit Frost die Bäume zart.
+		</div>
+		<div class="centered-box">
+			<p>Ein Funken Glanz im Kerzenlicht, die Stille trägt ein sanftes Kleid. Der Winter zeigt sein stilles
+				Gesicht, und schenkt uns Ruhe, tiefe Zeit.</p>
+		</div>
+		<div class="centered-box">
+			<p>Die Flüsse ruhn in starrem Eis, ein Glitzern liegt auf jedem Zweig.
+				Der Winter hält das Land ganz leis, und schenkt ihm Schönheit ohne Gleich.</p>
+		</div>
+		<div class="centered-box">
+			<p>Ein Vogel zieht durch kalte Luft, sein Lied klingt fern und wunderbar.
+				Der Winter trägt den klaren Duft, und macht die Welt so rein und klar.</p>
+		</div>
+	</div>
+</body>
+
+</html>
--- a/web/13/demos/03_styles_centered.css
+++ b/web/13/demos/03_styles_centered.css
@ -0,0 +1,17 @@
+.outer-box {
+	width: 400px;
+	height: 400px;
+	background-color: #112588;
+
+	overflow: scroll;
+}
+
+.centered-box {
+	width: 200px;
+	background-color: #e8f1f2;
+	border: 4px solid #95d4ea;
+	padding: 15px;
+
+	text-align: center;
+	margin: auto;
+}
--- a/web/13/demos/04_positioning.html
+++ b/web/13/demos/04_positioning.html
@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<link href="04_styles_positioning.css" rel="stylesheet">
+		<title>Absolute Positionierung</title>
+	</head>
+	<body>
+		<div class="logo-container"></div>
+		<div class="navbar-container"></div>
+		<div class="content-container"></div>
+	</body>
+</html>
--- a/web/13/demos/04_styles_positioning.css
+++ b/web/13/demos/04_styles_positioning.css
@ -0,0 +1,35 @@
+.logo-container{
+	background-color: magenta;
+	position: absolute;
+
+	height: 8%;
+	width: 5%;
+	top: 0%;
+	left: 0%;
+
+	/* z-index: 1; */
+}
+
+.navbar-container{
+	background-color: orange;
+
+	height: 8%;
+	width: 95%;
+
+	position: absolute;
+	top: 0%;
+	left:5%;
+
+	/* z-index: 0; */
+}
+
+.content-container{
+	background-color: cyan;
+	position: absolute;
+
+	height: 92%;
+	width: 100%;
+
+	top: 8%;
+	left: 0%;
+}
--- a/web/13/demos/05_Lieblingsbuecher.html
+++ b/web/13/demos/05_Lieblingsbuecher.html
@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+	<meta charset="UTF-8">
+	<link href="05_styles_Lieblingsbuecher.css" rel="stylesheet">
+	<title>Meine Lieblingsbücher</title>
+</head>
+
+<body>
+
+	<div id="logo-container">
+		<img src="img/buecher.png" alt="Buecher">
+	</div>
+
+	<nav id="navbar-container">
+		<a href="#fitzek">Sebastian Fitzek</a>
+		<a href="#neuhaus">Nele Neuhaus</a>
+		<a href="#garmus">Bonnie Garmus</a>
+		<a href="#schlink">Bernhard Schlink</a>
+		<a href="#follett">Ken Follett</a>
+	</nav>
+
+	<div class="content-container">
+		<h1>Lieblingsbücher</h1>
+
+		<div id="fitzek" class="buch-element">
+			<a href="https://www.thalia.de/shop/home/artikeldetails/A1071531890" target="_blank">Die
+				Einladung</a>
+			<br>
+			<br>
+			Sebastian Fitzek
+			<br>
+			ca. 400
+		</div>
+		<div id="neuhaus" class="buch-element">
+			<a href="https://www.thalia.de/shop/home/artikeldetails/A1068434145" target="_blank">Monster</a>
+			<br><br>
+			Nele Neuhaus
+			<br>
+			ca. 560
+		</div>
+		<div id="garmus" class="buch-element">
+			<a href="https://www.thalia.de/shop/home/artikeldetails/A1062299989" target="_blank">Eine Frage
+				der Chemie</a><br><br>
+			Bonnie Garmus
+			<br>
+			ca. 464
+		</div>
+		<div id="schlink" class="buch-element">
+			<a href="https://www.thalia.de/shop/home/artikeldetails/A1069244098" target="_blank">Das späte
+				Leben</a><br><br>
+			Bernhard Schlink
+			<br>
+			ca. 240
+		</div>
+		<div id="follett" class="buch-element">
+			<a href="https://www.thalia.de/shop/home/artikeldetails/A1067829823" target="_blank">Die Waffen
+				des Lichts</a><br><br>
+			Ken Follett<br>
+			ca. 880
+		</div>
+	</div>
+
+</body>
+
+</html>
--- a/web/13/demos/05_styles_Lieblingsbuecher.css
+++ b/web/13/demos/05_styles_Lieblingsbuecher.css
@ -0,0 +1,68 @@
+body {
+	margin: 0;
+	padding: 0;
+}
+
+#logo-container {
+	background-color: cadetblue;
+	width: 10%;
+	height: 10%;
+	position: absolute;
+	top: 0%;
+	left: 0%;
+	/* z-index: 1; */
+}
+
+#logo-container img {
+	display: block;
+	height: 100%;
+	margin: auto;
+	/* z-index: 1; */
+}
+
+#navbar-container {
+	background-color: rgb(155, 207, 209);
+	width: 90%;
+	height: 10%;
+	position: absolute;
+	top: 0%;
+	left: 10%;
+}
+
+#navbar-container a,
+#navbar-container a:visited {
+	float: left;
+	width: 20%;
+	height: 100%;
+
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	text-decoration: none;
+	color: rgb(4, 60, 116);
+}
+
+#navbar-container a:hover {
+	background-color: rgb(225, 236, 236);
+}
+
+.content-container {
+	background-color: rgb(229, 228, 222);
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	top: 10%;
+	left: 0%;
+	text-align: center;
+}
+
+.buch-element {
+	display: block;
+	float: left;
+	background-color: rgb(210, 194, 168);
+	height: 150px;
+	width: 18%;
+	padding: 1.5em 0;
+	margin: 10px 1% 10px 1%;
+}
--- a/web/13/demos/img/buecher.png
+++ b/web/13/demos/img/buecher.png
--- a/web/13/labor/13_aufgaben.md
+++ b/web/13/labor/13_aufgaben.md
@ -0,0 +1,58 @@
+# Übungsblatt 13
+
+*Hinweise*:
+
+1. Aufgaben 1+2 werden erst im folgenden Labor besprochen und **müssen abgegeben** werden.
+2. Aufgaben 3+4 werden im Labor bearbeitet und besprochen, daher ist für diese **keine Abgabe** erforderlich.
+
+## 1. CSS und Javascript: Adventskalender
+
+*Abgabe erforderlich*
+
+**Aufgabenstellung**: Erstellen Sie einen einfachen Adventskalender in HTML, CSS und Javascript. 
+
+#### Arbeitsschritte
+1. Erstellen Sie eine HTML-Seite mit der Überschrift "Adventskalender".
+2. Es sollen 24 Kästchen (Türchen) auf der Webseite in ansprechenden/passenden Farben (Hintergrund und Rahmen) und Format zu sehen sein. Jedes Türchen trägt **in der Mitte** eine Nummer zwischen 1-24 als Inhalt.
+3. Die Türchen werden so angeordnet, dass jedes Element **links im Container ansetzt** und die folgenden Elemente direkt daneben erscheinen, bis die verfügbare Breite erschöpft ist.
+4. **Beim Klicken** auf ein Türchen wird zunächst geprüft, ob es überhaupt geöffnet werden darf (Türchen-Nummer mit heutigem Datum vergleichen). 
+5. Falls das Öffnen erlaubt ist, ändert sich die Hintergrundfarbe des Türchens und der Inhalt wird durch dieses Zeichen ausgetauscht: "\u{1F381}".
+6. Falls das Öffnen noch nicht erlaubt ist, erscheint eine Meldung "Noch schläft das Türchen – wie ein Geschenk unter dem Baum.".
+
+#### Hinweise
+1. Die Kästchen dürfen auch dynamisch erzeugt werden (mit Javascript).
+2. Für die Prüfung können Sie das `Date`-Objekt von Javascript verwenden.
+3. Um einem DOM-Element dynamisch eine CSS-Klasse hinzufügen können Sie die `classList`-API in Javascript verwenden.
+
+## 2. CSS-Übung
+
+*Abgabe erforderlich*
+
+**Aufgabenstellung**: Gestalten Sie das HTML-Formular zu Workshop-Anmeldung aus vorangegangen Übungsblättern individuell nach Ihren Ideen mit CSS.
+
+#### Arbeitsschritte
+1. Nehmen Sie folgendes HTML-Formular als Grundlage: [Workshop-Anmeldung](workshop-anmeldung.html). Gerne können Sie dieses erweitern oder anpassen.
+2. Sie können das folgende CSS-Stylesheet als Ausgangspunkt verwenden (freiwillig): [CSS-Stylesheet](styles_workshop.css). Hier sind ein paar Hilfestellungen zur Gestaltung von Checkbox, Radiobuttons und Select-Box bereits eingefügt (aus der Vorlesung nicht bekannt).
+3. Ergänzen Sie das Stylesheet und ggf. das HTML-Dokument, so dass ein ansprechendes Design entsteht. (Umfang/Detailgrad und Stil wählen Sie selbst.)
+
+## 3. CSS-Übung: Box-Modell
+
+*keine Abgabe erforderlich*
+
+**Aufgabenstellung**: Setzen Sie diese Skizze in HTML und CSS um. Alle wichtigen Maße und Angaben für Ihren `<div>`-Container sind vorgegeben.
+
+![Skizze mit Maßen](uebung01.png)
+
+*Hinweis:* Der gestrichelte Rahmen um den Text "Übung zum Box-Modell" dient nur der Veranschaulichung und soll in Ihrem Ergebnis NICHT angezeigt werden.
+
+## 4. CSS-Übung: Positionierung
+
+*keine Abgabe erforderlich*
+
+**Aufgabenstellung**: Setzen Sie diese Skizze in HTML und CSS um. Alle wichtigen Maße und Angaben für die verschiedenen `<div>`-Container sind vorgegeben.
+
+![Skizze mit Maßen](uebung02.png)
+
+#### Hinweise
+1. Sie dürfen `1cm` in `1px` darstellen.
+2. Die Farben dürfen frei gewählt werden.
--- a/web/13/labor/styles_workshop.css
+++ b/web/13/labor/styles_workshop.css
@ -0,0 +1,137 @@
+html {
+	font-size: 18px;
+}
+
+body {
+	font-family: "Sansation", serif;
+	background-color: #020617;
+	color: #cbd5e1;
+}
+
+form {
+	background-color: #0f172a;
+	border-radius: 15px;
+	border-color: #334155;
+	width: 40%;
+}
+
+fieldset {
+	border-style: solid;
+	border-color: #475569;
+	border-radius: 15px;
+	border-width: 1px;
+}
+
+legend {
+	color: #a78bfa;
+	font-size: 0.9rem;
+}
+
+label {
+	font-size: 0.8rem;
+	color: #cbd5e1;
+}
+
+input {
+	font-family: 'Sansation', sans-serif;
+	color: #ffffff;
+	background-color: #1e293b;
+	border-radius: 5px;
+	border-color: #475569;
+	border-style: solid;
+	border-width: 1px;
+	height: 2em;
+	width: 75%;
+}
+
+input:focus {
+	outline: none;
+	border-color: #7c3aed;
+	box-shadow: 0 0 0 1px #7c3aed;
+}
+
+input::placeholder {
+	font-family: "Orbitron", sans-serif;
+	color: #64748b;
+	font-size: 1em;
+	opacity: 0.5;
+}
+
+.submit-button {
+	font-family: "Sansation", serif;
+	font-size: 0.8em;
+	background-color: #9333ea;
+	border-color: #7c3aed;
+	height: 2.5rem;
+	width: 50%;
+}
+
+.styled-select {
+	appearance: none;
+	font-family: 'Sansation', sans-serif;
+	background-color: #1e293b;
+	color: #ffffff;
+	padding: 2px 4px;
+	border: 1px solid #334155;
+	border-radius: 4px;
+	font-size: 0.8rem;
+}
+
+.styled-checkbox {
+	appearance: none; /* WEB-IB: bisher unbekannt */
+	width: 1.2rem;
+	height: 1.2rem;
+	border: 1px solid #334155;
+	border-radius: 4px;
+	background-color: #1e293b;
+
+	vertical-align: middle; /* WEB-IB: bisher unbekannt */
+	cursor: pointer; /* WEB-IB: bisher unbekannt */
+	position: relative;
+}
+
+.styled-checkbox:checked {
+	background-color: #7c3aed;
+	border-color: #7c3aed;
+}
+
+.styled-checkbox:checked::after {
+	content: "\2713";
+	color: #ffffff;
+	font-size: 1rem;
+
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%); /* WEB-IB: bisher unbekannt */
+}
+
+.styled-radio {
+	appearance: none; /* WEB-IB: bisher unbekannt */
+	width: 1.2rem;
+	height: 1.2rem;
+	border: 1px solid #334155;
+	border-radius: 50%;
+	background-color: #1e293b;
+
+	vertical-align: middle;
+	position: relative;
+}
+
+.styled-radio:checked {
+	border-color: #7c3aed;
+	background-color: #7c3aed;
+}
+
+.styled-radio:checked::after {
+	content: "";
+	width: 0.8rem;
+	height: 0.8rem;
+	background-color: #ffffff;
+	border-radius: 50%;
+
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%); /* WEB-IB: bisher unbekannt */
+}
--- a/web/13/labor/uebung01.png
+++ b/web/13/labor/uebung01.png
--- a/web/13/labor/uebung02.png
+++ b/web/13/labor/uebung02.png
--- a/web/13/labor/workshop-anmeldung.html
+++ b/web/13/labor/workshop-anmeldung.html
@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+	<meta charset="utf-8">
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link
+		href="https://fonts.googleapis.com/css2?family=Sansation:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"
+		rel="stylesheet">
+	<link rel="stylesheet" href="styles_workshop.css">
+	<title>Workshop-Anmeldung</title>
+</head>
+
+<body>
+	<h1>Workshop-Anmeldung</h1>
+	<form action="https://web4-637691723779.europe-west1.run.app/registrierung" method="post">
+		<fieldset>
+			<legend>Persönliche Angaben:</legend>
+			<label for="vorname">Vorname:</label><br>
+			<input type="text" name="vorname" id="vorname" placeholder="Vorname" required><br>
+
+			<label for="nachname">Nachname:</label><br>
+			<input type="text" name="nachname" id="nachname" placeholder="Nachname" required><br>
+
+			<label for="email">E-Mail:</label><br>
+			<input type="email" name="email" id="email" autocomplete="email"><br>
+
+			<label for="telefon">Handynummer:</label><br>
+			<input type="tel" name="telefon" id="telefon" pattern="^01[5-7][0-9]{7,10}$"><br><br>
+		</fieldset>
+
+		<fieldset>
+			<legend>Kursauswahl:</legend>
+			<label for="kurs">Kurs:</label><br>
+			<input type="text" name="kurs" id="kurs" value="Webentwicklung Basics" readonly disabled><br><br>
+
+			<label for="sessions">Bevorzugte Sessions:</label><br>
+			<select id="sessions" name="sessions" class="styled-select"  multiple size="4">
+				<option value="vormittag">Vormittag</option>
+				<option value="nachmittag">Nachmittag</option>
+				<option value="abendsession">Abend</option>
+				<option value="wochenende">Wochenende</option>
+			</select><br>
+		</fieldset>
+
+		<fieldset>
+			<legend>Zusätzliche Optionen:</legend>
+			<input type="checkbox" id="agb" name="agb" class="styled-checkbox" required>
+			<label for="agb">Ich akzeptiere die Teilnahmebedingungen.</label><br>
+
+			<input type="checkbox" id="newsletter" name="newsletter" value="ja" class="styled-checkbox" >
+			<label for="newsletter">Newsletter abonnieren.</label><br>
+
+			<input type="checkbox" id="equipment" name="equipment" value="ja" class="styled-checkbox" >
+			<label for="equipment">Ich benötige spezielles Equipment.</label><br>
+		</fieldset>
+
+		<fieldset>
+			<legend>Teilnahmeformat:</legend>
+			Format wählen:<br>
+			<input type="radio" id="online" name="format" value="online" class="styled-radio" required>
+			<label for="online">Online</label><br>
+
+			<input type="radio" id="praesenz" name="format" value="praesenz" class="styled-radio">
+			<label for="praesenz">Präsenz</label><br>
+		</fieldset>
+		<br>
+		<input class="submit-button" type="submit" value="Jetzt anmelden">
+	</form>
+</body>
+
+</html>