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:38] – [Kontrolle über einzelne Flex-Items] scagf_informatik:web_sca:websites [2025-04-28 11:44] (aktuell) – [Kriterien] 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 359: Zeile 376:
    * Startseite muss `index.html` heissen.    * Startseite muss `index.html` heissen.
    * Alle Dateien der Website befinden sich im gleichen Ordner. Keine Unterordner!    * Alle Dateien der Website befinden sich im gleichen Ordner. Keine Unterordner!
-   * Darf keine absoluten Pfade enthalten. Korrekt: `<img src="my_image.png">` (relativer Pfad), Falsch: `<img src="C:\Benutzer\Fritz\Schule\Informatik\Web\Rezept\my_image.png">` (absoluter Pfad).+   * Darf **keine absoluten Pfade** enthalten. Korrekt: `<img src="my_image.png">` (relativer Pfad), Falsch: `<img src="C:\Benutzer\Fritz\Schule\Informatik\Web\Rezept\my_image.png">` (absoluter Pfad). 
 +   * **Keine Umlaute und Leerschläge in Filenamen:** Achte darauf, dass in Filenamen z.B. von Bildern ja *keine* Leerschläge und Umlaute wie ä,ö,ü vorkommen! Benenne deshalb das Bild `Der König.jpg` um in `der_koenig.jpg`.
  
 === Bewertung === === Bewertung ===
Zeile 438: Zeile 456:
 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 536:
    * 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 573:
 ==== Flexbox ==== ==== Flexbox ====
  
 +{{youtube>phWxA89Dy94?}}
 === Getting Started === === Getting Started ===
  
Zeile 683: Zeile 702:
 } }
 </code> </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.1741005516.txt.gz
  • Zuletzt geändert: 2025-03-03 12:38
  • von sca