Differences

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

--- lehrkraefte:blc:informatik:glf24:web:seiten-verlinken [2025/04/22 08:16] – created Ivo Blöchliger
+++ lehrkraefte:blc:informatik:glf24:web:seiten-verlinken [2025/04/22 08:52] (current) – [Bild verlinken] Ivo Blöchliger
@@ Line 21: / Line 21: @@
 </code>
   * Fügen Sie einen entsprechenden Link auf die Startseite in der Datei ''news.html'' ein.
-  * Speichern Sie Ihre Dateien mit <key>Ctrl</key><key>s</key>. Ungespeicherte Dateien sind wie folgt gekennzeichnet: {{:lehrkraefte:blc:informatik:glf24:web:pasted:20250422-101344.png}}
+  * Speichern Sie Ihre Dateien mit <key>Ctrl</key><key>s</key>. Ungespeicherte Dateien sind wie folgt mit einem fetten Kreis gekennzeichnet: {{:lehrkraefte:blc:informatik:glf24:web:pasted:20250422-101344.png}}
-  * Öffnen Sie in Visual Studio Code ein git-bash Terminal (Evtl. erst Menü->Terminal->New Terminal) {{:lehrkraefte:blc:informatik:glf24:web:pasted:20250422-101522.png}}
+  * Öffnen Sie in Visual Studio Code ein git-bash Terminal (Evtl. erst Menü->Terminal->New Terminal), dann im Drop-Down Menu ''git-bash'' auswählen {{:lehrkraefte:blc:informatik:glf24:web:pasted:20250422-101522.png}}
   * Laden Sie die Seite mit dem Kommando ''upload.bash'' hoch.
   * Betrachten Sie Ihre Seite online und überprüfen Sie, ob die Links auch funktionieren.
+===== Absolute Verlinkung =====
+  * Finden Sie jemanden, der auch schon obige Links-Seiten hochgeladen haben.
+  * Verlinken Sie die entsprechende(n) Startseite(n) mit absolutem Link auf ihrer News-Seite wie folgt:
+<code html>
+<a href="https://ofi.tech-lab.ch/2025/2aLS/AB_HIER_MUSS_DIE_ADRESSE_ANGEPASST_WERDEN">Spannende Seite zum Thema XY (bitte keine Namen nennen).</a>
+</code>
+  * Speichern Sie die Seite, laden Sie die Seite hoch und testen Sie!
+==== Relative Verlinkung ====
+  * Finden Sie eine weitere Seite links-Seite und verlinken Sie diese folgendermassen (wobei natürlich das Verzeichnis ''1234asdf'' entsprechend angepasst werden muss.
+<code html>
+<a href="../../1234asdf/links">Eine weitere empfehlenswerte Seite!</a>
+</code>
+  * Speichern, hochladen, testen.
+  * Können Sie die Funktionsweise des obigen Links erklären?
+===== Links in eine Liste packen =====
+  * Schreiben Sie Ihre Link-Liste zwischen <ul> und </ul> Tags, und jeder Link zwischen <li> und </li> Tags. Rücken Sie dabei den Code sauber ein, z.B. wie folgt:
+<code html>
+  Hier noch ein paar Links
+  <ul>
+    <li><a href="....">bla bla</a></li>
+    <li><a href="....">bla bla</a></li>
+  </ul>
+</code>
+  * Speichern, hochladen, testen.
+===== Bild verlinken =====
+Ein Bild kann wie folgt eingebunden werden:
+<code html>
+<img src="pfad/zum/bild.jgp">
+</code>
+wobei der Pfad weggelassen werden kann, wenn das Bild im gleichen Verzeichnis liegt. Sonst lohnt es sich, alle Bilder in einem Unterverzeichnis ''images'' oder ''bilder'' zu speichern und diese dann entsprechend zu verlinken.
+  * Erstellen Sie ein Bild mit der Grösse 32x32 Pixel mit einem Pfeil nach links (oder sonst ein Symbol für "zurück"). Nennen Sie die Datei "back.png".
+  * In der Datei ''news.html'', fügen Sie das Pfeilbild ein und verlinken es auf ''index.html'', indem Sie es mit entsprechenden <a>-Tags umgeben.
+  * Speichern, hochladen, testen.