Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

Link zu der Vergleichsansicht

Beide Seiten, vorherige Überarbeitung Vorherige Überarbeitung
Nächste Überarbeitung		 Vorherige Überarbeitung
gf_informatik:web_sca:websites [2025-03-03 12:35] – [Kontrolle über einzelne Flex-Items] scagf_informatik:web_sca:websites [2025-03-25 11:07] (aktuell) – [Auftrag: Dies und das] sca
Zeile 1: Zeile 1:
 ====== - Websites ====== ====== - Websites ======
 +
 +<nodisp 2>
 +++++Änderungen für 2026/27|
 +
 +   * HTML / CSS etwas ausbauen vor dem Website Projekt
 +     * id/class offiziell einbauen
 +     * Flexbox
 +
 +++++
 +</nodisp>
  
 ++++Lernziele| ++++Lernziele|
Zeile 12: Zeile 22:
    * Wissen, wofür **CSS** steht und wozu man es benötigt.    * Wissen, wofür **CSS** steht und wozu man es benötigt.
    * Die Fachbegriffe von CSS kennen.    * 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:
    4. Schreibe jetzt den **Code** für deine Website.    4. Schreibe jetzt den **Code** für deine Website.
    5. **Abgabe:**    5. **Abgabe:**
-      1. Erstelle ein *Zip-File* aus deinem Projektordner. +      1. Erstelle ein **Zip-File** aus deinem Projektordner. 
-      2. Sende dieses per Teams-Chat an den Lehrer. +      1. Zip mit deinem Namen und Klasse **benennen** im Format `fritz_meier_1mh`. 
 +      1. Abgabe per **Teams-Abgabe**. 
  
 === Kriterien === === Kriterien ===
Zeile 438: Zeile 455:
 if (x > 0) { if (x > 0) {
     console.log("Zahl positiv");     console.log("Zahl positiv");
-} else if (x == 0) {+} else if (x === 0) {
     console.log("Zahl Null");     console.log("Zahl Null");
 } else { } 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 JavaScript-Code eine Variable, z.B. `counter`, die zählt, wie oft man bereits geklickt hat.
    * Erstelle im HTML einen Button.    * 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.    * ... eine Funktion im JavaScript-Code aufgerufen, die die Variable `counter` um $1$ erhöht.
    * Vergesse auch nicht, den `counter` anzuzeigen.    * Vergesse auch nicht, den `counter` anzuzeigen.
Zeile 555: Zeile 572:
 ==== Flexbox ==== ==== Flexbox ====
  
 +{{youtube>phWxA89Dy94?}}
 === Getting Started === === Getting Started ===
  
Zeile 667: Zeile 685:
 } }
 </code> </code>
 +
 +**Flex-shrink** bestimmt, ob ein Element schrumpfen darf, wenn nicht genug Platz da ist.
 +<code css>
 +.item {
 +  flex-shrink: 0; /* Verhindert das Schrumpfen */
 +}
 +</code>
 +Je grösser der angegebene Wert, desto *schneller schrumpft* es im Vergleich zu den anderen Elementen.
 +
 +**Flex-basis** legt die Grundgrösse eines Elements fest.
 +
 +<code css>
 +.item {
 +  flex-basis: 100px; /* Jedes Item startet mit 100px Breite */
 +}
 +</code>
 +
 +=== Beispiel: Mehrere Bilder nebeneinander ===
 +
 +Im folgenden Beispiel werden drei Bilder nebeneinander platziert.
 +
 +**HTML:**
 +<code html>
 +<div class="container">
 +    <img src="image_1.jpg" alt="Image 1">
 +    <img src="image_2.jpg" alt="Image 2">
 +    <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>
 +
 +
 ==== Grid Layout ==== ==== Grid Layout ====
  
  • gf_informatik/web_sca/websites.1741005313.txt.gz
  • Zuletzt geändert: 2025-03-03 12:35
  • von sca