====== Bilder auf der hello-Webseite ======
Zeitaufwand: Maximal 5 Minuten:
Suchen oder erstellen Sie zwei Bilder in kleinerer Auflösung. Bedingung ist, dass die Bilder auf einer Webseite verwendet werden dürfen (Copyright).

Geeignete Quellen:
  * https://commons.wikimedia.org/wiki/MediaWiki
  * KI generierte Bilder

===== Bilder im html einbinden =====
Im Verzeichnis hello (auf Ihrem Computer) legen Sie ein neues Verzeichnis ''images'' an.

Kopieren/Verschieben/Speichern Sie Ihre beiden Bilder in das Verzeichnis ''images''. Bennen Sie die Dateien gegebenenfalls so um, dass keine Grossbuchstaben, Leerschläge oder Sonderzeichen vorkommen. 

In der Datei ''index.html'' fügen Sie an geeigneter Stelle folgende Tags hinzu und passen Sie die Dateinamen und Quelleninformation an:
<code html>
<img src="images/landschaft.jpg">
<p>Quelle: <a href="https://example.com/link/zum/bild.jpg">Autor</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0">CC BY-SA 4.0</a>, via grosses Internet</p>
</code>

Auf Wikimedia Commons kann der Quellenhinweis direkt generiert und eingebunden werden:
{{:lehrkraefte:blc:informatik:glf24:web:pasted:20250317-143446.png}}

===== Alles hochladen =====
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 können Sie dann mit 
<code bash>
upload.bash
</code>

den ganzen Ordner hochladen (und die Berechtigungen auf dem Server automatisch anpassen).
===== Testen =====
Überprüfen Sie, ob die Bilder korrekt auf Ihrer Webseite angezeigt werden. Laden Sie Ihre Seite im Browser neu (Ctrl-Shift-R).


===== Probleme mit Berechtigungen =====
<code bash>
ssh ofi chmod -R a+rx hello 
</code>
===== Wer hat schon fertig? =====
Folgendes Bash-Script kann auf den Server kopiert (z.B. in eine Datei ''img.bash'') und dort ausgeführt werden mit ''bash img.bash''
<code bash>
for i in /srv/www/ofi/2025/2aLS/*/hello/index.html; do
       for img in `sed -ne 's/.*src=\"\([^"]*\)\".*/\1/p' < $i`; do
               stat --printf '%U %n\n' `dirname $i`/$img
       done
done
</code>