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 @@ + + + + + + Gestylte Box + + +
+

Willkommen!

+ Dies ist die umgebende einfache Box.
Innere Box (oben)
Innere Box (unten)
+
+ + diff --git a/web/13/demos/01_styles_simplebox.css b/web/13/demos/01_styles_simplebox.css new file mode 100644 index 0000000..d35a556 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/web/13/demos/02_boxes.html b/web/13/demos/02_boxes.html new file mode 100644 index 0000000..6d037a8 --- /dev/null +++ b/web/13/demos/02_boxes.html @@ -0,0 +1,26 @@ + + + + + + Gestylte Box + + +

Verschiedene Boxen

+
+

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.

+
+ + diff --git a/web/13/demos/02_styles_boxes.css b/web/13/demos/02_styles_boxes.css new file mode 100644 index 0000000..c64f78d --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/web/13/demos/03_centered.html b/web/13/demos/03_centered.html new file mode 100644 index 0000000..e126265 --- /dev/null +++ b/web/13/demos/03_centered.html @@ -0,0 +1,31 @@ + + + + + + Zentrierung mit CSS + + + + +
+
+ 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. +
+
+

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.

+
+
+ + + \ No newline at end of file diff --git a/web/13/demos/03_styles_centered.css b/web/13/demos/03_styles_centered.css new file mode 100644 index 0000000..3e32729 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/web/13/demos/04_positioning.html b/web/13/demos/04_positioning.html new file mode 100644 index 0000000..220bd2f --- /dev/null +++ b/web/13/demos/04_positioning.html @@ -0,0 +1,13 @@ + + + + + + Absolute Positionierung + + +
+
+
+ + \ No newline at end of file diff --git a/web/13/demos/04_styles_positioning.css b/web/13/demos/04_styles_positioning.css new file mode 100644 index 0000000..3e4085e --- /dev/null +++ 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%; +} \ No newline at end of file diff --git a/web/13/demos/05_Lieblingsbuecher.html b/web/13/demos/05_Lieblingsbuecher.html new file mode 100644 index 0000000..6a21bc0 --- /dev/null +++ b/web/13/demos/05_Lieblingsbuecher.html @@ -0,0 +1,67 @@ + + + + + + + Meine Lieblingsbücher + + + + +
+ Buecher +
+ + + +
+

Lieblingsbücher

+ +
+ Die + Einladung +
+
+ Sebastian Fitzek +
+ ca. 400 +
+
+ Monster +

+ Nele Neuhaus +
+ ca. 560 +
+
+ Eine Frage + der Chemie

+ Bonnie Garmus +
+ ca. 464 +
+ +
+ Die Waffen + des Lichts

+ Ken Follett
+ ca. 880 +
+
+ + + + \ No newline at end of file diff --git a/web/13/demos/05_styles_Lieblingsbuecher.css b/web/13/demos/05_styles_Lieblingsbuecher.css new file mode 100644 index 0000000..f865c52 --- /dev/null +++ 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%; +} \ No newline at end of file diff --git a/web/13/demos/img/buecher.png b/web/13/demos/img/buecher.png new file mode 100644 index 0000000..a8340d2 Binary files /dev/null and b/web/13/demos/img/buecher.png differ diff --git a/web/13/labor/13_aufgaben.md b/web/13/labor/13_aufgaben.md new file mode 100644 index 0000000..c059756 --- /dev/null +++ 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 `
`-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 `
`-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. \ No newline at end of file diff --git a/web/13/labor/uebung01.png b/web/13/labor/uebung01.png new file mode 100644 index 0000000..9b5fcb7 Binary files /dev/null and b/web/13/labor/uebung01.png differ diff --git a/web/13/labor/uebung02.png b/web/13/labor/uebung02.png new file mode 100644 index 0000000..3ab91c3 Binary files /dev/null and b/web/13/labor/uebung02.png differ