Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- modul:ffit:css:learningunits:lu01:aufgaben:display [2024/08/29 08:23] – angelegt kdemirci
+++ modul:ffit:css:learningunits:lu01:aufgaben:display [2024/08/29 08:57] (aktuell) – kdemirci
@@ Zeile 1: / Zeile 1: @@
-====== LU01.A01 ======
+====== LU01.A01 - CSS Grundlagen ======
 ===== Aufgabe 1: Grundlagen =====
 ==== Ausgangslage ====
-Sie haben die [CSS Display Teil 1 - Grundlagen](./content.php?top=1&file=themen/02_display/theorie.md) gelesen.
+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.
+  - 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.
+  - Ä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 ====
@@ Zeile 22: / Zeile 22: @@
 ==== Aufgabenstellung ====
-. Erstellen Sie die Dokumente `index.html` und `style.css`.
+  - Erstellen Sie die Dokumente `index.html` und `style.css`.
-. Kopieren Sie die folgende Vorlage in Ihre Dokumente:
+  - Kopieren Sie die folgende Vorlage in Ihre Dokumente:<code html>
-<code html>
 <!DOCTYPE html>
 <html lang="en">
@@ Zeile 43: / Zeile 42: @@
 </html>
 </code>
-. Verlinken Sie das `syle.css` in Ihrem HTML-Dokument.
+  - Verlinken Sie das `syle.css` in Ihrem HTML-Dokument.
-. Gestalten Sie Ihr HTML-Dokument gemäss Vorgabe.
+  - Gestalten Sie Ihr HTML-Dokument gemäss Vorgabe. {{:modul:ffit:css:learningunits:lu01:aufgaben:vorgabe.png?800|}}
-{{:modul:ffit:css:learningunits:lu01:aufgaben:vorgabe.png?400|}}
-<a id="rahmenbedingungen-1"></a>
+==== Rahmenbedingungen ====
-#### Rahmenbedingungen
+^ Was ^ Beschreibung ^
-Was | Beschreibung
+| Produkt: | HTML-Seite mit CSS Flexbox |
---- | ---
+| Zeit: | 15 Min. |
-Produkt: | HTML-Seite mit CSS Flexbox
+| Sozialform: | Einzel- oder Partnerarbeit |
-Zeit: | 15 Min.
+| Arbeitsmittel: | Unterrichtsunterlagen, HTML-Editor, Browser |
-Sozialform: | Einzel- oder Partnerarbeit
-Arbeitsmittel: | Unterrichtsunterlagen, HTML-Editor, Browser