modul:ffit:css:learningunits:lu01:aufgaben:display

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
modul:ffit:css:learningunits:lu01:aufgaben:display [2024/08/29 08:24] kdemircimodul:ffit:css:learningunits:lu01:aufgaben:display [2024/08/29 08:57] (aktuell) kdemirci
Zeile 3: Zeile 3:
 ===== Aufgabe 1: Grundlagen ===== ===== Aufgabe 1: Grundlagen =====
 ==== Ausgangslage ==== ==== 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 ==== ==== Aufgabenstellung ====
-1. 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. 
-2. Ä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 ==== ==== Rahmenbedingungen ====
Zeile 22: Zeile 22:
  
 ==== Aufgabenstellung ==== ==== Aufgabenstellung ====
-1. Erstellen Sie die Dokumente `index.html` und `style.css`. +  - Erstellen Sie die Dokumente `index.html` und `style.css`. 
-2. Kopieren Sie die folgende Vorlage in Ihre Dokumente: +  Kopieren Sie die folgende Vorlage in Ihre Dokumente:<code html>
-<code html>+
 <!DOCTYPE html> <!DOCTYPE html>
 <html lang="en"> <html lang="en">
Zeile 43: Zeile 42:
 </html> </html>
 </code> </code>
-3. Verlinken Sie das `syle.css` in Ihrem HTML-Dokument. +  - Verlinken Sie das `syle.css` in Ihrem HTML-Dokument. 
-4. 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+
  
  • modul/ffit/css/learningunits/lu01/aufgaben/display.1724912686.txt.gz
  • Zuletzt geändert: 2024/08/29 08:24
  • von kdemirci