+ 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..7fc95cb --- /dev/null +++ b/web/12/labor/bunt.html @@ -0,0 +1,26 @@ + + + + + + +Der Hintergrund von diesem Absatz ist pink.
+Der Hintergrund von diesem Absatz ist magenta.
+
+ Der Hintergrund hier ist 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 diff --git a/web/13/demos/01_simplebox.html b/web/13/demos/01_simplebox.html new file mode 100644 index 0000000..8eee711 --- /dev/null +++ b/web/13/demos/01_simplebox.html @@ -0,0 +1,14 @@ + + + + + +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.
+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.
+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.
+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.
+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.
+Ein Funken Glanz im Kerzenlicht, die Stille trägt ein sanftes Kleid. Der Winter zeigt sein stilles + Gesicht, und schenkt uns Ruhe, tiefe Zeit.
+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.
+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.
+
+