Andere Webseiten verlinken

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:
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 <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.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:

<a href="news.html">Hier geht es zur Newsseite</a>

Fügen Sie einen entsprechenden Link auf die Startseite in der Datei news.html ein.
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-bash auswählen
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:

<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 1234asdf entsprechend 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. Rücken Sie dabei den Code sauber ein, z.B. wie folgt:

  Hier noch ein paar Links
  <ul>
    <li><a href="....">bla bla</a></li>
    <li><a href="....">bla bla</a></li>
  </ul>

Speichern, hochladen, testen.

Bild verlinken

Ein Bild kann wie folgt eingebunden werden:

<img src="pfad/zum/bild.jgp">

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 32×32 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.

Table of Contents