Ü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 erhält ca. einen Drittel der html-Dateien.
  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\

Aufgabe 1: Visual Studio Code

  1. Öffne Visual Studio Code
  2. "Open Folder" –> Gehe ins Verzeichnis P:\Informatik\Block 3 - HTML und CSS\Lektion 03\ hinein.

    Links wird die Verzeichnisstruktur angezeigt:
  3. Öffne die erste html-Datei.
  4. Lass dir die html-Datei im Browser anzeigen per Klick auf Run > Run Without Debugging   (wähle Chrome aus). Tastenkombination: Ctrl + F5
  5. Der Debug-Modus sollte per Klick auf das rote Rechteck wieder beendet werden.

Aufgabe 2

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 2b

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 3

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 4

Die Bilder in den Portraits sind online verlinkt (via http://...). Sie sollen nun auf die Festplatte heruntergeladen werden.

  1. Erstelle innerhalb P:\Informatik\Block 3 - HTML und CSS\Lektion 03\ ein Unterverzeichnis mit dem Namen Bilder  (Beachte den Grossbuchstaben!). Du kannst in Visual Studio Code machen, nämlich per Rechtsklick auf die Verzeichnisstruktur –> New Folder
  2. Öffne jede Portraitseite und lade im Browser die Bilddatei herunter. Verschiebe die Datei vom Download-Order in dein Verzeichnis Bilder. Falls die Grafik nicht geladen werden kann, lade ein Ersatzbild herunter und verwende dieses.
  3. Ändere bei <img> im Attribut src den Link. Tipp: Du brauchst kein https:// mehr. Stattdessen schreibst du den Namen des Unterverzeichnisses gefolgt von einem Slash / und dem Bildnamen, z.B. 
    <img src="Bilder/bild.jpg" />

    Vergleiche auch Theorie 2 >> img