3024383
/
development-ib-fork
forked from WEB-IB-SS26/development-ib
1
1
Fork 0
Code Pull Requests Activity

12: Demos und Labor

main
Teena Steger 2026-06-09 15:20:43 +02:00
parent 676543db83
commit c0fd502a41
19 changed files with 560 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/12/demos/01_inline.html 100644
View File

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

29
web/12/demos/02_stylesheet.css 100644
View File

@ -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;
}

16
web/12/demos/02_stylesheet.html 100644
View File

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

26
web/12/demos/03_pseudoklassen.css 100644
View File

@ -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;
}

18
web/12/demos/03_pseudoklassen.html 100644
View File

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

71
web/12/demos/04_nikolaus_bad.html 100644
View File

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

29
web/12/demos/04_styles_nikolaus_bad.css 100644
View File

@ -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;
}

71
web/12/demos/05_nikolaus_good.html 100644
View File

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

30
web/12/demos/05_styles_nikolaus_good.css 100644
View File

@ -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;
}

15
web/12/demos/06_cascading.html 100644
View File

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

15
web/12/demos/06_styles_cascading.css 100644
View File

@ -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; */
}

28
web/12/demos/07_fonts.html 100644
View File

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

53
web/12/demos/07_styles_fonts.css 100644
View File

@ -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;
}

BIN
web/12/demos/fonts/Roboto-Regular.woff2 100644
View File

Binary file not shown.

BIN
web/12/demos/fonts/RobotoCondensed-Bold.otf 100644
View File

Binary file not shown.

62
web/12/labor/12_aufgaben.md 100644
View File

@ -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!:

26
web/12/labor/bunt.html 100644
View File

@ -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="loesungen/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">Dieser Absatz ist pink.</p>
<p class="neon">Dieser Absatz ist magenta.</p>
<h2>Alles in Grün-Tönen</h2>
<p class="frosch">
<span class="blatt">Hier ist alles greenyellow.</span>
<br>
<br>
<span class="blatt">Auch der Bereich zwischen dem Text.</span>
</p>
</body>
</html>

61
web/12/labor/nachricht.html 100644
View File

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

BIN
web/12/labor/uebung02.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 355 KiB