Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- informatik:html-css:box-modell [2020/02/04 17:41] – angelegt jonathan.pfeiffer
+++ informatik:html-css:box-modell [2025/03/08 15:01] (aktuell) – [Bearbeiten - Panel] jonathan.pfeiffer
@@ Zeile 1: / Zeile 1: @@
 ====== Box-Modell ======
+<accordion>
-<tabbox Box-Modell>
+<panel type="primary" title="Box-Modell">
 Eine HTML-Webseite besteht aus rechteckigen Kästchen (Box). **Alle** Texte und Grafiken einer Webseite liegen in solchen Kästchen oder Boxen.
@@ Zeile 8: / Zeile 8: @@
 Die Abbildung zeigt eine schematische Darstellung des Box-Modells.\\
 \\
-{{:informatik:css-box-modell.png?538|}}
+{{:informatik:html-css:css-box-modell.png?538|}}
+</panel>
-<tabbox Begriffe>
+<panel type="primary" title="Begriffe">
 Fast alle HTML-Elemente haben die **Eigenschaften** width, height, padding, border und margin.\\
 ^ Englisch       ^ Deutsch                                                  ^
@@ Zeile 19: / Zeile 21: @@
 | margin | Außenabstand, Rand                                                  |
-<tabbox #1>
+</panel>
-<html>
-<iframe src="https://learningapps.org/watch?app=5701530" style="border:0px;width:100%;height:500px" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
-</html>
+<panel type="success" title="Aufgabe #1">
-<tabbox Inhaltsbereich>
+{{url>https://learningapps.org/watch?app=5701530 80%,600px|iFrame not installed}}
+</panel>
+<panel type="primary" title="Inhaltsbereich">
 Text und Grafiken stehen im **Inhaltsbereich** eines Elements, dessen Breite mit width und dessen Höhe mit height definiert wird. Wenn diese Angaben nicht explizit im Stylesheet auftauchen, gelten die folgenden Grundregeln:\\
   * Ohne Angabe von ''width'' werden Block-Elemente so breit wie das umgebende Element.
@@ Zeile 33: / Zeile 40: @@
 \\
 \\
-{{:informatik:css:css-box-modell-begriffe.png?400|}}
+{{:informatik:html-css:css-box-modell.png?538|}}
-<tabbox #2>
+</panel>
-<html>
-<iframe src="https://learningapps.org/watch?app=5701484" style="border:0px;width:100%;height:500px" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
-</html>
-<tabbox Innenabstand>
+<panel type="success" title="Aufgabe #2">
+{{url>https://learningapps.org/watch?app=5701484 80%,600px|iFrame not installed}}
+</panel>
+<panel type="primary" title="Innenabstand">
 Nach dem Inhaltsbereich folgt in jeder Box der Innenabstand (''padding''). Das padding liegt innerhalb der Box und übernimmt die Hintergrundfarbe des Inhaltsbereichs. \\
 \\
@@ Zeile 55: / Zeile 65: @@
 \\
 \\
-{{:informatik:css:css-box-modell-begriffe.png?400|}}
+{{:informatik:html-css:css-box-modell.png?538|}}
-<tabbox Rahmen>
+</panel>
+<panel type="primary" title="Rahmen">
 Um das padding legt sich der Rahmen (''border''), der Rand der Kiste, der eine eigene Breite (width), Linienart (style) und Farbe (color) annehmen kann.\\
@@ Zeile 68: / Zeile 80: @@
 \\
 \\
-{{:informatik:css:css-box-modell-begriffe.png?400|}}
+{{:informatik:html-css:css-box-modell.png?538|}}
-<tabbox Außenabstand>
+</panel>
+<panel type="primary" title="Außenabstand">
 Jede Box kann einen Außenabstand (''margin'') haben, der ebenfalls für alle vier Seiten einzeln definiert werden kann:
@@ Zeile 85: / Zeile 100: @@
 \\
 \\
-{{:informatik:css:css-box-modell-begriffe.png?400|}}
+{{:informatik:html-css:css-box-modell.png?538|}}
-<tabbox #3>
+</panel>
-<html>
+<panel type="success" title="Aufgabe #3">
-<iframe src="https://learningapps.org/watch?app=5706584" style="border:0px;width:100%;height:500px" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
+{{url>https://learningapps.org/watch?app=5706584 80%,600px|iFrame not installed}}
-</html>
-<tabbox #4>
-<WRAP center round todo 80%>
-  * Öffne das Thimble Projekt. https://thimbleprojects.org/jonathanpf/561117
-  * Verändere die Werte bei margin und padding. Spiele mit den Werten und beobachte die Veränderungen.
-  * Bekommen ein Gefühl für das Box-Modell.
-</WRAP>
-<tabbox Gesamtbreite>
+</panel>
+<panel type="primary" title="Gesamtbreite">
@@ Zeile 125: / Zeile 134: @@
 | + margin-right    | + 10px  |
 | + margin-left    | + 10px  |
-| Gesamtbreite der Box    | 780px  |
+| = Gesamtbreite der Box    | = 780px  |
-<tabbox #5>
+</panel>
-<html>
+<panel type="success" title="Aufgabe #4">
-<iframe src="https://learningapps.org/watch?app=5706469" style="border:0px;width:100%;height:500px" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
+{{url>https://learningapps.org/watch?app=5706469 80%,600px|iFrame not installed}}
-</html>
-<tabbox #6>
-<WRAP center round important 60%>
+</panel>
-Um die unten angeführte Learningapp bearbeiten zu können, musst du folgenden Link aufrufen: [[https://thimbleprojects.org/jonathanpf/560287]]
-</WRAP>
+<panel type="success" title="Aufgabe #5">
-\\
-<html>
-<iframe src="https://learningapps.org/watch?app=5701822" style="border:0px;width:100%;height:500px" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
-</html>
-\\
-<tabbox #7>
 **Wiederholung zu CSS**\\
 \\
-<html>
+{{url>https://learningapps.org/watch?v=p6it8umi317 80%,600px|iFrame not installed}}
-<iframe src="https://learningapps.org/watch?v=p6it8umi317" style="border:0px;width:100%;height:500px" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
-</html>
+</panel>
-<tabbox Links>
-  * [[https://little-boxes.de/lb1/7.2-das-box-modell-in-der-uebersicht.html]]
+</accordion>
-</tabbox>