This is an old revision of the document!
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
linksan. - Öffnen Sie dieses Verzeichnis mit Visual Studio Code (Menü File→Open Folder).
- Legen Sie einen neue Datei mit Namen
index.htmlan:
- In der neuen Datei, schreiben Sie ein Ausrufezeichen
!und wählen SieEmmet Abbreviation, um das Grundgerüst einer HTML-Datei zu erzeugen. - Passen Sie den Seitentitel an (zwischen den <title>-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.htmlan. - Passen Sie Titel und Text kurz an.
Direkte, relative Verlinkung
- In der Datei
index.htmlverlinken Sie die News-Seite im Seitentext (noch vor dem schliessenden </body>-Tag) wie folgt:
<a href="news.html">Hier geht es zur Newsseite</a>
- Fügen Sie einen entsprechenden Link auf die Startseite in der Datei
news.htmlein. - Speichern Sie Ihre Dateien mit CtrlS. Ungespeicherte Dateien sind wie folgt mit einem fetten Kreis gekennzeichnet:
- Öffnen Sie in Visual Studio Code ein git-bash Terminal (Evtl. erst Menü→Terminal→New Terminal), dann im Drop-Down Menu
git-bashauswählen
- Laden Sie die Seite mit dem Kommando
upload.bashhoch. - 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:
<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>
- 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
1234asdfentsprechend angepasst werden muss.
<a href="../../1234asdf/links">Eine weitere empfehlenswerte Seite!</a>
- 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.
- Speichern, hochladen, testen.