Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- modul:ffit:css:learningunits:lu01:aufgaben:display [2024/08/29 08:45] – kdemirci
+++ modul:ffit:css:learningunits:lu01:aufgaben:display [2024/08/29 08:57] (aktuell) – kdemirci
@@ Zeile 1: / Zeile 1: @@
 ====== LU01.A01 - CSS Grundlagen ======
+===== Aufgabe 1: Grundlagen =====
+==== Ausgangslage ====
+Sie haben die Grundlagen gelesen.
+==== Aufgabenstellung ====
+  - Beschreiben Sie den Unterschied zwischen Block- und Inline-Elementen in HTML und geben Sie jeweils ein Beispiel für ein Block-Element und ein Inline-Element an.
+  - Ändern Sie das Anzeigeverhalten eines Elements mit der CSS-Eigenschaft "display" von "block" auf "inline" und umgekehrt. Erläutern Sie, wie sich das Layout des Elements ändert.
+==== Rahmenbedingungen ====
+^ Was ^ Beschreibung ^
+| Produkt: | - |
+| Zeit: | 10 Min. |
+| Sozialform: | Einzel- oder Partnerarbeit |
+| Arbeitsmittel: | Unterrichtsunterlagen, HTML-Editor, Browser |
+===== Aufgabe 2: Anwendung =====
+==== Ausgangslage ====
+Sie haben die Grundlagen gelesen.
+==== Aufgabenstellung ====
+  - Erstellen Sie die Dokumente `index.html` und `style.css`.
+  - Kopieren Sie die folgende Vorlage in Ihre Dokumente:<code html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+    <div class="container">
+        <div class="logo">Item 1</div>
+        <div class="nav">
+            <div class="nav-item">Item 1</div>
+            <div class="nav-item">Item 2</div>
+            <div class="nav-item">Item 3</div>
+        </div>
+    </div>
+</body>
+</html>
+</code>
+  - Verlinken Sie das `syle.css` in Ihrem HTML-Dokument.
+  - Gestalten Sie Ihr HTML-Dokument gemäss Vorgabe. {{:modul:ffit:css:learningunits:lu01:aufgaben:vorgabe.png?800|}}
+==== Rahmenbedingungen ====
+^ Was ^ Beschreibung ^
+| Produkt: | HTML-Seite mit CSS Flexbox |
+| Zeit: | 15 Min. |
+| Sozialform: | Einzel- oder Partnerarbeit |
+| Arbeitsmittel: | Unterrichtsunterlagen, HTML-Editor, Browser |