Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- gf_informatik:web_sca:websites [2025-03-06 15:04] – [Kontrolle über einzelne Flex-Items] sca
+++ gf_informatik:web_sca:websites [2025-03-25 11:07] (aktuell) – [Auftrag: Dies und das] sca
@@ Zeile 1: / Zeile 1: @@
 ====== - Websites ======
+<nodisp 2>
+++++Änderungen für 2026/27|
+   * HTML / CSS etwas ausbauen vor dem Website Projekt
+     * id/class offiziell einbauen
+     * Flexbox
+++++
+</nodisp>
 ++++Lernziele|
@@ Zeile 12: / Zeile 22: @@
    * Wissen, wofür **CSS** steht und wozu man es benötigt.
    * Die Fachbegriffe von CSS kennen.
-   * Mithilfe der wichtigsten CSS-Befehle eine Website stylen können.
+   * Mithilfe der wichtigsten CSS-Befehle eine Website stylen können:
-   * Mithilfe von `id` und `class` einzelne resp. ausgewählte Elemente stylen.
+     * Hintergrundfarbe
+     * Schriftfarbe
+     * Schriftart und Schriftgrösse
+     * Ränder
+     * Abstände
+     * Grösse von Bild
+   * Mithilfe von `id` oder `class` einzelne resp. ausgewählte Elemente stylen.
 ++++
@@ Zeile 347: / Zeile 363: @@
 . Schreibe jetzt den **Code** für deine Website.
 . **Abgabe:**
-. Erstelle ein *Zip-File* aus deinem Projektordner.
+. Erstelle ein **Zip-File** aus deinem Projektordner.
-. Sende dieses per Teams-Chat an den Lehrer.
+. Zip mit deinem Namen und Klasse **benennen** im Format `fritz_meier_1mh`.
+. Abgabe per **Teams-Abgabe**.
 === Kriterien ===
@@ Zeile 438: / Zeile 455: @@
 if (x > 0) {
     console.log("Zahl positiv");
-} else if (x == 0) {
+} else if (x === 0) {
     console.log("Zahl Null");
 } else {
@@ Zeile 518: / Zeile 535: @@
    * Erstelle im JavaScript-Code eine Variable, z.B. `counter`, die zählt, wie oft man bereits geklickt hat.
    * Erstelle im HTML einen Button.
-   * Über den Even `onclick` (ganz ähnlich wie `onchange` beim SBS) wird beim Klicken auf den Button ...
+   * Über den Event `onclick` (ganz ähnlich wie `onchange` beim SBS) wird beim Klicken auf den Button ...
    * ... eine Funktion im JavaScript-Code aufgerufen, die die Variable `counter` um $1$ erhöht.
    * Vergesse auch nicht, den `counter` anzuzeigen.
@@ Zeile 691: / Zeile 708: @@
 **HTML:**
 <code html>
-</code>
-**CSS:**
-<code css>
 <div class="container">
     <img src="image_1.jpg" alt="Image 1">
@@ Zeile 701: / Zeile 713: @@
     <img src="image_3.jpg" alt="Image 3">
 </div>
+</code>
+**CSS:**
+<code css>
+.container {
+    display: flex; /* Aktiviert das Flexbox-Layout */
+    flex-wrap: wrap; /* Erlaubt das Umbruchverhalten bei kleinen Bildschirmen */
+    justify-content: center; /* Zentriert die Bilder */
+    gap: 10px; /* Abstand zwischen den Bildern */
+}
+.container img {
+    width: 300px; /* Grösse der Bilder */
+}
 </code>