-Tags) z.B. Startseite anstatt Document. * Zwischen den <body>-Tags fügen Sie eine Titel ein, z.B. ''<h1>Startseite!</h1>'' * Und danach (aber vor dem schliessenden <body>-Tag) etwas Text. === news.html === * Im gleichen Verzeichnis, legen Sie wie oben eine Seite ''news.html'' an. * Passen Sie Titel und Text kurz an. ===== Direkte, relative Verlinkung ===== * In der Datei ''index.html'' verlinken Sie die News-Seite im Seitentext (noch vor dem schliessenden </body>-Tag) wie folgt: <code html> <a href="news.html">Hier geht es zur Newsseite</a> </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 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), 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.

====== Andere Webseiten verlinken ====== ===== Grundseiten ===== === index.html === * In einem geeigneten Verzeichnis (z.B. dort, wo Sie Ihre Dateien zum Informatik-Unterricht gespeichert haben), legen Sie ein neues Verzeichnis ''links'' an. * Öffnen Sie dieses Verzeichnis mit Visual Studio Code (Menü File->Open Folder). * Legen Sie einen neue Datei mit Namen ''index.html'' an: {{:lehrkraefte:blc:informatik:glf24:web:pasted:20250422-095338.png}} * In der neuen Datei, schreiben Sie ein Ausrufezeichen ''!'' und wählen Sie ''Emmet Abbreviation'', um das Grundgerüst einer HTML-Datei zu erzeugen. * Passen Sie den Seitentitel an (zwischen den -Tags) z.B. Startseite anstatt Document. * Zwischen den <body>-Tags fügen Sie eine Titel ein, z.B. ''<h1>Startseite!</h1>'' * Und danach (aber vor dem schliessenden <body>-Tag) etwas Text. === news.html === * Im gleichen Verzeichnis, legen Sie wie oben eine Seite ''news.html'' an. * Passen Sie Titel und Text kurz an. ===== Direkte, relative Verlinkung ===== * In der Datei ''index.html'' verlinken Sie die News-Seite im Seitentext (noch vor dem schliessenden </body>-Tag) wie folgt: <code html> <a href="news.html">Hier geht es zur Newsseite</a> </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 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), 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.