Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.
| Beide Seiten, vorherige Überarbeitung Vorherige Überarbeitung Nächste Überarbeitung | Vorherige Überarbeitung | ||
| gf_informatik:web_sca:websites [2025-03-06 15:13] – [Beispiel: Mehrere Bilder nebeneinander] sca | gf_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 | ||
| + | |||
| + | ++++ | ||
| + | </ | ||
| ++++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. |
| - | | + | |
| + | 1. Abgabe | ||
| === Kriterien === | === Kriterien === | ||
| Zeile 438: | Zeile 455: | ||
| if (x > 0) { | if (x > 0) { | ||
| console.log(" | console.log(" | ||
| - | } else if (x == 0) { | + | } else if (x === 0) { |
| console.log(" | console.log(" | ||
| } 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. | ||
sca