Aufgabe: Komprimieren, strukturieren, veröffentlichen

Schritt 1: Dateien herunterladen

Laden Sie aus dem Moopaed-Kurs die beiden Dateien homepage.zip und unzip.php herunter.

Schritt 2: Entpacken der ZIP-Datei lokal

Entpacken Sie homepage.zip auf Ihrem Rechner. Dadurch wird eine Ordnerstruktur mit HTML-Dateien und Unterordnern wie assets/css erzeugt.

Verwenden Sie ein geeignetes Programm wie den integrierten Entpacker (Windows/Mac) oder 7-Zip.

ZIP Entpacken

Schritt 3: Redundanz im HTML verringern

Öffnen Sie die Datei index.html im Editor und betrachten Sie die eingebetteten CSS-Styles innerhalb der HTML-Tags:


<h1 style="font-family: Arial; font-size: 30px; color: red;">Wartungsseite</h1>

Diese Stil-Informationen sind mehrfach identisch. Das ist redundant.

Exkurs: HTML & CSS

Lagern Sie CSS-Anweisungen in eine zentrale Datei stylesheet.css aus:


h1 {
  font-family: Arial;
  font-size: 30px;
  color: red;
}

Fügen Sie diesen Verweis in den <head>-Bereich Ihrer index.html ein:


<link rel="stylesheet" href="assets/css/stylesheet.css">

Schritt 4: Webseite personalisieren

Gestalten Sie die index.html und kontakt.html individuell (z. B. Farben, Texte, Schriftarten, Hintergrundbild).

Optional: Fügen Sie eigene Bilder in den assets/img/-Ordner hinzu und passen Sie das Layout an.

Schritt 5: Webseite erneut komprimieren

Komprimieren Sie den gesamten Inhalt Ihres Webprojekts wieder als homepage.zip. Der Name muss exakt so lauten.

Schritt 6: FileZilla installieren

Laden Sie das Programm FileZilla herunter und installieren Sie es.

FTP-Zugangsdaten:

Schritt 7: FTP-Upload

Verbinden Sie sich mit FileZilla zum Server. Navigieren Sie im rechten Fenster zu /.

Erstellen Sie dort einen Ordner mit Ihrem Tandemnamen (nur Kleinbuchstaben, keine Umlaute, keine Leerzeichen).

Laden Sie homepage.zip und unzip.php in Ihren Ordner hoch.

FTP Upload

Schritt 8: Webseite online entpacken

Rufen Sie in Ihrem Browser folgende Adresse auf (ersetzen Sie „tandemname“ mit Ihrem Ordnernamen):

https://itfranke.org/tandemname/unzip.php

Dadurch wird homepage.zip entpackt. Anschließend sollten Sie unzip.php löschen, um Fehlzugriffe zu vermeiden.

Schritt 9: Webseite veröffentlichen

Öffnen Sie im Browser: https://itfranke.org/tandemname/index.html

Posten Sie Ihre URL im Padlet unseres Kurses.