forked from WEB-IB-SS26/development-ib
13: Demos und Labor
parent
836d4c9098
commit
d4d1fcef14
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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%;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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%;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
|
|
@ -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.
|
||||
|
||||
|
||||
|
||||
*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.
|
||||
|
||||
|
||||
|
||||
#### Hinweise
|
||||
1. Sie dürfen `1cm` in `1px` darstellen.
|
||||
2. Die Farben dürfen frei gewählt werden.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
Loading…
Reference in New Issue