Ü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 - HTML und CSS\Lektion 03\

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.
  6. Lade deine html-Datei mit FileZilla zum Server hoch.

Screenshot

Aufgabe 4: Portraits verlinken

  1. Erstelle in Lektion 04 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.
  3. Lade alle Dateien hoch zum Server.