Übung 4: Tabellen, FTP-Upload

Arbeite auf dem Laufwerk P: im Verzeichnis P:\Informatik\Block 3 - HTML und CSS\Lektion 04\

Aufgabe 1: Persönliche index-Seite (index.html)

  1. Arbeite in Visual Studio Code.
    "Open Folder" –> Gehe ins Verzeichnis P:\Informatik\Block 3 - HTML und CSS\ hinein.
    Es sollten deine bisherigen Arbeiten angezeigt werden.
  2. Erstelle einen neuen Unterordner Lektion 04 und dort drin eine neue HTML-Datei index.html
  3. Füge die Grundstruktur ein und erstelle eine Tabelle mit deinen persönlichen Daten.
  4. Die Tabelle verfügt über folgende Attribute:
    • Rahmen von 1
    • Breite von 30%
    • Cellpadding von 8
  5. Erstelle unten eine h2-Überschrift Meine Übungen und darunter einen Paragraphen mit dem Inhalt Persönlichkeiten der Informatik. Dort soll später ein Link zur Aufgabe 3 erscheinen.

Screenshot

Aufgabe 2: FTP-Upload

➡ Anleitung FileZilla.pdf

  1. Öffne FileZilla und logge dich mit den Benutzerdaten ein, die dir deine Lehrperson zur Verfügung stellt.
  2. Navigiere in der linken Fensterhälfte (= lokale Verzeichnisse auf dem KSSB-PC) zum Verzeichnis aus Aufgabe 1.
  3. Lade deine Datei index.html hoch. Sie solle in der Verzeichnisstruktur in der rechten Fensterhälfte (= KSSB-Server) angezeigt werden.
  4. Öffne im Browser (z.B. Chrome) deine Website-URL (verwende deinen Benutzernamen mit vorangehender Tilde)
    http://kssb.ch/~meinname/

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.