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:12] – [Flexbox] 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 554: Zeile 571:
 Für beide Methoden ist es üblich, mit dem **div**-Tag zu arbeiten. Dieses wird verwendet, um einen Block von Inhalten zu *gruppieren* und zu *strukturieren*. Es hat keine eigene Bedeutung oder Standardformatierung, dient aber als Container für andere Elemente und ermöglicht eine gezielte Gestaltung mit CSS oder eine Manipulation mit JavaScript. Für beide Methoden ist es üblich, mit dem **div**-Tag zu arbeiten. Dieses wird verwendet, um einen Block von Inhalten zu *gruppieren* und zu *strukturieren*. Es hat keine eigene Bedeutung oder Standardformatierung, dient aber als Container für andere Elemente und ermöglicht eine gezielte Gestaltung mit CSS oder eine Manipulation mit JavaScript.
 ==== Flexbox ==== ==== Flexbox ====
 +
 +{{youtube>phWxA89Dy94?}}
 +=== Getting Started ===
  
 Es erlaubt eine einfache und flexible Anordnung von Elementen in einer Zeile oder Spalte. Es erlaubt eine einfache und flexible Anordnung von Elementen in einer Zeile oder Spalte.
Zeile 573: Zeile 593:
 </code> </code>
 Nun werden die drei Elemente nicht mehr untereinander sondern nebeneinander angezeigt. Die Items können nun über ihren eigenen Selektor gestylt werden. Nun werden die drei Elemente nicht mehr untereinander sondern nebeneinander angezeigt. Die Items können nun über ihren eigenen Selektor gestylt werden.
 +
 +=== Ausrichtung ===
  
 Flexbox arbeitet mit zwei Achsen: Einer **Hauptachse** und einer **Kreuzachse**. Standardmässig zeigt die Hauptachse horizontal nach rechts und die Kreuzachse vertikal nach unten. Elemente werden der *Hauptachse* entlang angeordnet. Man kann die beiden Achsen auch vertauschen und umdrehen: Flexbox arbeitet mit zwei Achsen: Einer **Hauptachse** und einer **Kreuzachse**. Standardmässig zeigt die Hauptachse horizontal nach rechts und die Kreuzachse vertikal nach unten. Elemente werden der *Hauptachse* entlang angeordnet. Man kann die beiden Achsen auch vertauschen und umdrehen:
 <code css> <code css>
 .container{ .container{
 +    display: flex;
     flex-direction: column; /* row, row-reverse, ... */     flex-direction: column; /* row, row-reverse, ... */
 } }
 </code> </code>
-**Ausrichtung:** Inhalt wird standardmässig links- und oben-bündig ausgerichtet. Dies kann man wie folgt anpassen:+ 
 +Inhalt wird standardmässig links- und oben-bündig ausgerichtet. Dies kann man wie folgt anpassen:
 <code css> <code css>
 .container{ .container{
-    justify-content: center; /* Ausrichten entlang Hauptachse */+    display: flex; 
 +    justify-content: center; /* Ausrichten entlang Hauptachse */     
 +    height: 80vh; /* Setzt Höhe des Containers auf 80% Fenstergrösse */
     align-items: center; /* Ausrichten entlang Kreuzachse */     align-items: center; /* Ausrichten entlang Kreuzachse */
 } }
Zeile 603: Zeile 629:
 |center |Mittig ausgerichtet| |center |Mittig ausgerichtet|
 |baseline |Orientierung an der Textbasis| |baseline |Orientierung an der Textbasis|
 +Achtung, damit man zum Beispiel etwas in der Mitte des Fensters platzieren kann, muss man dem Container eine genügend hohe Hohe verleihen, z.B. mit `height: 80vh;`.
 +
 +=== Flex-Wrap ===
 +
 +Standardmässig werden alle Elemente auf *einer Zeile* dargestellt. Mit *flex-wrap* kann man sie umbrechen:
 +
 +<code css>
 +.container {
 +    display: flex;
 +    flex-wrap: wrap; /* Erlaubt Zeilenumbruch */
 +    align-content: center; /* nur aktiviert falls flex-wrap: wrap */
 +}
 +</code>
 +
 +^Wert^Beschreibung^
 +|nowrap (Standard) |Alle Elemente bleiben in einer Zeile|
 +|wrap |Elemente umbrechen in die nächste Zeile|
 +|wrap-reverse |Umbruch, aber in umgekehrter Reihenfolge|
 +
 +Falls `flex-wrap: wrap;`, so wird die Ausrichtung entlang der Kreuzachse mit `align-content` anstelle `align-items` festgelegt.
 +
 +=== Social Distancing ===
 +
 +Zwischen den Elementen fügt man wie folgt einen **Abstand** hinzu:
 +<code css>
 +.container {
 +    display: flex;
 +    gap: 3em;
 +}
 +</code>
 +
 +=== Kontrolle über einzelne Flex-Items ===
 +
 +**Flex-grow** bestimmt, wie viel Platz ein Element im Vergleich zu anderen einnimmt. Im folgenden Beispiel teilen sich alle Items den gesamten zur Verfügung stehenden Platz zu gleichen Teilen:
 +<code css>
 +.item{
 +    flex-grow: 1
 +}
 +</code>
 +Falls ebenfalls der gesamte Platz gebraucht werden soll, das dritte Element aber doppelt so breit sein soll wie das erste, so schreibt man:
 +<code html>
 +<div class="container">
 +    <div class="item" id="item-1">Element 1</div> <!-- jedes Element erhält eigene ID um einzeln anzusprechen -->
 +    <div class="item" id="item-2">Element 2</div>
 +    <div class="item" id="item-3">Element 3</div>
 +</div>
 +</code>
 +
 +<code css>
 +#item-1{
 +    flex-grow: 1;
 +}
 +#item-3{
 +    flex-grow: 3;
 +}
 +</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.1741003976.txt.gz
  • Zuletzt geändert: 2025-03-03 12:12
  • von sca