Dies ist ein Absatz.
+Dies ist ein Absatz mit einer Markierung mittendrin.
+Dies ist ein Absatz mit einer Sprungmarke.
+ + + + + \ No newline at end of file diff --git a/web/12/demos/03_pseudoklassen.css b/web/12/demos/03_pseudoklassen.css new file mode 100644 index 0000000..2a3f717 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/web/12/demos/03_pseudoklassen.html b/web/12/demos/03_pseudoklassen.html new file mode 100644 index 0000000..899cf72 --- /dev/null +++ b/web/12/demos/03_pseudoklassen.html @@ -0,0 +1,18 @@ + + + + +Probieren Sie die Links aus:
++ + Lasst uns froh und munter sein + und uns recht von Herzen freun! + + + Lustig, lustig, tralalala! + Bald ist Nikolaus-Abend da, + bald ist Nikolaus-Abend da! + +
++ + Dann stell’ ich den Teller auf, + Nikolaus legt gewiss was drauf. + + + Lustig, lustig, tralalala! + Bald ist Nikolaus-Abend da, + bald ist Nikolaus-Abend da! + +
++ + Wenn ich schlaf’, dann träume ich: + Jetzt bringt Nikolaus was für mich. + + + Lustig, lustig, tralalala! + Bald ist Nikolaus-Abend da, + bald ist Nikolaus-Abend da! + +
++ + Wenn ich aufgestanden bin, + lauf’ ich schnell zum Teller hin. + + + Lustig, lustig, tralalala! + Bald ist Nikolaus-Abend da, + bald ist Nikolaus-Abend da! + +
++ + Nikolaus ist ein guter Mann, + dem man nicht genug danken kann. + + + Lustig, lustig, tralalala! + Bald ist Nikolaus-Abend da, + bald ist Nikolaus-Abend da! + +
+ + + \ No newline at end of file diff --git a/web/12/demos/04_styles_nikolaus_bad.css b/web/12/demos/04_styles_nikolaus_bad.css new file mode 100644 index 0000000..41461a5 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/web/12/demos/05_nikolaus_good.html b/web/12/demos/05_nikolaus_good.html new file mode 100644 index 0000000..fb6e364 --- /dev/null +++ b/web/12/demos/05_nikolaus_good.html @@ -0,0 +1,71 @@ + + + + + + + ++ + Lasst uns froh und munter sein + und uns recht von Herzen freun! + + + Lustig, lustig, tralalala! + Bald ist Nikolaus-Abend da, + bald ist Nikolaus-Abend da! + +
++ + Dann stell’ ich den Teller auf, + Nikolaus legt gewiss was drauf. + + + Lustig, lustig, tralalala! + Bald ist Nikolaus-Abend da, + bald ist Nikolaus-Abend da! + +
++ + Wenn ich schlaf’, dann träume ich: + Jetzt bringt Nikolaus was für mich. + + + Lustig, lustig, tralalala! + Bald ist Nikolaus-Abend da, + bald ist Nikolaus-Abend da! + +
++ + Wenn ich aufgestanden bin, + lauf’ ich schnell zum Teller hin. + + + Lustig, lustig, tralalala! + Bald ist Nikolaus-Abend da, + bald ist Nikolaus-Abend da! + +
++ + Nikolaus ist ein guter Mann, + dem man nicht genug danken kann. + + + Lustig, lustig, tralalala! + Bald ist Nikolaus-Abend da, + bald ist Nikolaus-Abend da! + +
+ + + \ No newline at end of file diff --git a/web/12/demos/05_styles_nikolaus_good.css b/web/12/demos/05_styles_nikolaus_good.css new file mode 100644 index 0000000..9e4a598 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/web/12/demos/06_cascading.html b/web/12/demos/06_cascading.html new file mode 100644 index 0000000..8d87ca7 --- /dev/null +++ b/web/12/demos/06_cascading.html @@ -0,0 +1,15 @@ + + + + + + +Mit Kaskaden kann man sich zu viele feingranulare Style-Klassen sparen.
+ + + \ No newline at end of file diff --git a/web/12/demos/06_styles_cascading.css b/web/12/demos/06_styles_cascading.css new file mode 100644 index 0000000..c5ce1ff --- /dev/null +++ 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; */ +} \ No newline at end of file diff --git a/web/12/demos/07_fonts.html b/web/12/demos/07_fonts.html new file mode 100644 index 0000000..e42ff6b --- /dev/null +++ b/web/12/demos/07_fonts.html @@ -0,0 +1,28 @@ + + + + + + + + + +Dies ist ein Absatz mit 12pt Schriftgröße.
+Dies ist ein Absatz mit 1.5rem Schriftgröße.
+Dies ist ein Absatz mit 1.5em Schriftgröße.
+ +Dies ist ein Absatz mit nicht kursiver Schrift.
+ + + \ No newline at end of file diff --git a/web/12/demos/07_styles_fonts.css b/web/12/demos/07_styles_fonts.css new file mode 100644 index 0000000..3e03fd3 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/web/12/demos/fonts/Roboto-Regular.woff2 b/web/12/demos/fonts/Roboto-Regular.woff2 new file mode 100644 index 0000000..79ba063 Binary files /dev/null and b/web/12/demos/fonts/Roboto-Regular.woff2 differ diff --git a/web/12/demos/fonts/RobotoCondensed-Bold.otf b/web/12/demos/fonts/RobotoCondensed-Bold.otf new file mode 100644 index 0000000..c2dc0e3 Binary files /dev/null and b/web/12/demos/fonts/RobotoCondensed-Bold.otf differ diff --git a/web/12/labor/12_aufgaben.md b/web/12/labor/12_aufgaben.md new file mode 100644 index 0000000..7e32d53 --- /dev/null +++ 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 (``) 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. + + + +#### 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!: \ No newline at end of file diff --git a/web/12/labor/bunt.html b/web/12/labor/bunt.html new file mode 100644 index 0000000..4ae8fa7 --- /dev/null +++ b/web/12/labor/bunt.html @@ -0,0 +1,26 @@ + + + + + + +Dieser Absatz ist pink.
+Dieser Absatz ist magenta.
+
+ Hier ist alles greenyellow.
+
+
+ Auch der Bereich zwischen dem Text.
+
Schlechte Jahresbilanz
+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.
+ ++ 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. +
+"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. +
+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."
+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." +
+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." +
+ + + + + \ No newline at end of file diff --git a/web/12/labor/uebung02.png b/web/12/labor/uebung02.png new file mode 100644 index 0000000..1843274 Binary files /dev/null and b/web/12/labor/uebung02.png differ