Differences

This shows you the differences between two versions of the page.

--- lehrkraefte:blc:informatik:glf24:web:hello-css [2025/03/26 18:47] – [Direkte Kind-Elemente] Ivo Blöchliger
+++ lehrkraefte:blc:informatik:glf24:web:hello-css [2025/04/03 08:35] (current) – [Aber mit Style bitte] Ivo Blöchliger
@@ Line 9: / Line 9: @@
   * Öffnen Sie das entpackte Verzeichnis (Folder) ''style'' mit Visual Studio Code.
   * Öffnen Sie in VSCode ein Terminal und navigieren Sie mit ''cd ..'' in darüberliegende Vezeichnis
-  * Kopieren Sie das Verzeichnis style mit allen Dateien mit ''scp -r style ofi:.''  Lassen Sie das Terminal offen!
+  * Kopieren Sie das Verzeichnis style mit allen Dateien:
-  * Öffnen Sie Ihre neue Webseite im Browser
+     * Falls noch nicht erledigt: bitte erst die [[https://fginfo.ksbg.ch/dokuwiki/doku.php?id=lehrkraefte:blc:informatik:glf24:web:scp-workaround|Datei ''upload.bash'' installieren]].
+     * In VSCode, öffnen Sie ein Terminal, und dann ein neues Terminal mit ''git-bash''. {{:lehrkraefte:blc:informatik:glf24:web:pasted:20250403-095623.png}}
+     * Im git-bash Terminal von VSCode (im Ordner style!) können Sie dann folgdendem Kommando den ganzer Ordner ''style'' hochladen:
+<code bash>
+upload.bash
+</code>
+  * Öffnen Sie Ihre neue Webseite im Browser (passen Sie die Webadresse auf den Ordern style an)
   * Studieren Sie den HTML-Code und finden Sie die entsprechenden Element auf der Seite.
   * Studieren Sie die Datei ''style.css'', ändern Sie diese geringfügig und laden Sie Ihre Seite nochmals hoch (Pfeiltaste nach oben holt das letzte Kommando).
@@ Line 57: / Line 63: @@
 ===== Weitere Formatierungen =====
+Für einige der Aufgaben werden Sie nicht darum herumkommen, nach Informationen im Internet zu suchen. Verwenden Sie dazu unbedingt auch den Suchterm ''css''.
+Um die Entwicklung zu Vereinfachen und zu Beschleunigen, installieren Sie die Visual Studio Code Extension «Live Server». Damit können Sie einen Webserver lokal auf Ihrem Computer starten, also Bonus wird die Seite automatisch neu geladen, sobald Sie eine Datei speichern.
+Benutzen Sie auch die Entwicklertools im Browser (<key>F12</key>-Taste). Damit können Sie direkt auf der Webseite CSS-Einträge manipulieren und verschiedene Dinge noch schneller testen. Vergessen Sie aber nicht, die Änderungen in die Datei ''style.css'' zu übertragen und die Datei zu speichern.
+  * Hinterlegen Sie alle Elemente der Klasse ''fake'' mit rotem Hintergrund.
+    * Bonus: ''fake'' soll mit der Schrift Comic Sans dargestellt werden.
+  * Die Katzenbilder sollen einen hellen Hintergrund und einen Rahmen mit Schatten erhalten.
+  * Die Katzenbilder sollen alle gleich gross sein.
+  * Die News-Einträge sollen wie die Katzenbilder als Kacheln erscheinen.
+  * Laden Sie am Schluss Ihre Webseite auf den Webserver.