Übung 3: Seiten verlinken

In dieser Übung erstellen wir eine einfache Website, die aus mehreren Unterseiten besteht. Die Unterseiten sollen gegenseitig verlinkt werden.

Arbeite auf dem Laufwerk P: im Verzeichnis P:\Informatik\Block 3 - Webprogrammierung\Lektion 3\

Aufgabe 0: Organisation

Die html-Dateien eurer Informatiker:innen-Portraits liegen im Schülerlaufwerk bereit unter S:\spi-2x\1 Uebungen\Portraits Informatiker\

  1. Verschafft euch einen Überblick über die Personen und ordnet sie chronologisch ein.
  2. Jede Sitzreihe befasst sich mit einer "Epoche" und wählt die html-Dateien von 4 Persönlichkeiten aus dieser Zeit.
  3. Kopiere diese html-Dateien aus dem Laufwerk S: zu dir ins Laufwerk P: ins Verzeichnis P:\Informatik\Block 3 - HTML und CSS\Lektion 03\
  4. Öffne den oben genannten Ordner in Visual Studio Code.

Aufgabe 1

Auf jeder html-Seite soll oben eine einfache Navigation erscheinen:

  1. Gehe in Visual Studio Code zum HTML-Code der ersten Seite.
  2. Erstelle oberhalb der Hauptüberschrift eine h3-Headline "Navigation".
  3. Darunter sollen die anderen Portraits als klickbarer Link innerhalb eines Paragraphen auf einer Zeile abgedruckt werden.
    Verwende dafür sinngemäss folgenden Code: 
    <p>
	<a href="portrait1.html">Tim Berners-Lee</a>  |  
	<a href="portrait2.html">Mark Zuckerberg</a> 
</p>
  4. Sobald dein Code funktioniert, kopiere deine Navigation in die Zwischenablage und füge sie in alle anderen html-Dateien ein.

Aufgabe 1b

Erweitere die Navigation um diese Eigenschaft:

Die aktuelle/aktive Seite soll nicht mehr als Link erscheinen, sondern nur noch als fetter Text dortstehen.

Screenshot

Aufgabe 2

Füge in jede Unterseite mindestens ein passendes Emoji ein.

Tipp: Unter Windows 10 erscheint ein Emoji-Auswahlfenster per Klick auf  Win + .   (Windowstaste und Punkt)

Aufgabe 3 (personen.html)

  1. Wechsle wieder zu Visual Studio Code und erstelle eine neue HTML-Seite personen.html
  2. In dieser Seite soll eine Tabelle erscheinen mit den Persönlichkeiten aus Übung 3. Dort hast du ca. 4 HTML-Portrais verlinkt. Diese Informatiker:innen sollen nun in eine Tabelle eingefügt werden.
  3. Tabellenattribute: Rahmen 1, Cellpadding 8, Breite 80%
  4. Erstelle jeweils eine <th> mit dem Spaltennamen und füge folgende Spalten in die Tabelle ein:
    • Persönlichkeit
    • Lebensdaten
    • Errungenschaft
    • Link
  5. Wirf einen Blick in deine Übung 3 und füge deine Personen zeilenweise in die Tabelle ein.

Screenshot

Aufgabe 4: Portraits verlinken

  1. Erstelle in Lektion 03 einen Unterordner namens Portraits (mit Grossbuchstabe). Kopiere deine Portrait-Dateien aus Übung 3 dort hinein.
  2. Erstelle in geschichte.html (von vorheriger Aufgabe 3) einen Link zu der jeweiligen Portraitseite. Beachte, dass du den Namen des Unterordners Portraits bei href hinzufügen musst.