Eine Website ist ein Ordner voller Dateien

Die Kino-Website ist fertig, und es ist Zeit, sie online zu stellen, damit jeder sie auf jedem Computer oder Handy öffnen kann, nur indem er ihre Adresse eintippt. In dieser Lektion machst du die Website bereit, lädst sie auf einen Server und bekommst eine Adresse, die du an deine Freunde schicken kannst.

Zuerst ein Blick darauf, was du hochladen wirst. Eine Website ist ein Ordner voller Dateien. Unserer hat drei: index.html, programm.html und style.css. Der ganze Ordner kommt auf einen Server, und die Browser der Besucher laden die Dateien von dort herunter, wie du in der ersten Lektion des Lernpfads gesehen hast. Zwei Regeln sorgen dafür, dass die Website auch dort weiter funktioniert:

Die Startseite heißt index.html. Wenn jemand nur die Adresse einer Website öffnet, etwa https://www.example.com/, ohne Dateinamen am Ende, schickt der Server die Datei index.html. Eine Startseite mit dem Namen, sagen wir, start.html würde sich nur öffnen, wenn man ihren Namen an die Adresse hängt.
Pfade zu den eigenen Dateien der Website sind relativ. href="style.css" (oder href="./style.css") bedeutet „die Datei style.css im selben Ordner wie diese Seite“, wie du aus der Übung Relative Links im HTML-Kurs weißt. Wohin der Ordner auch kommt, die Dateien darin bleiben nebeneinander, sodass relative Pfade auf deinem Computer und auf dem Server gleichermaßen funktionieren.

Auf deinem Computer hat jede Datei auch einen vollständigen Pfad, zum Beispiel C:\Users\anna\Documents\kino\style.css unter Windows. Und wenn du eine Seite von deinem Computer öffnest, zeigt die Adressleiste des Browsers etwas wie file:///C:/Users/anna/Documents/kino/programm.html. Es ist leicht, so einen Pfad in einen Link zu kopieren, und auf deinem Computer funktioniert der Link sogar. Aber nur dort: Der Server hat kein Laufwerk C: mit Annas Dokumenten, und die Browser der Besucher können nicht in deinen Computer schauen.

Im Editor hat die Startseite des Kinos genau diesen Fehler. Die Vorschau funktioniert hier wie ein Server, deshalb hat die Seite ihre Stile verloren, und die Links zum Programm führen ins Leere.

Anweisungen

Korrigiere in index.html den Pfad des Stylesheets, damit die Seite ihre Stile zurückbekommt.
Korrigiere auch die zwei Links zur Programmseite. Probiere sie dann in der Vorschau aus.

ZurückWeiter

Eine Website ist ein Ordner voller Dateien

Die Startseite heißt index.html. Wenn jemand nur die Adresse einer Website öffnet, etwa https://www.example.com/, ohne Dateinamen am Ende, schickt der Server die Datei index.html. Eine Startseite mit dem Namen, sagen wir, start.html würde sich nur öffnen, wenn man ihren Namen an die Adresse hängt.
Pfade zu den eigenen Dateien der Website sind relativ. href="style.css" (oder href="./style.css") bedeutet „die Datei style.css im selben Ordner wie diese Seite“, wie du aus der Übung Relative Links im HTML-Kurs weißt. Wohin der Ordner auch kommt, die Dateien darin bleiben nebeneinander, sodass relative Pfade auf deinem Computer und auf dem Server gleichermaßen funktionieren.

Im Editor hat die Startseite des Kinos genau diesen Fehler. Die Vorschau funktioniert hier wie ein Server, deshalb hat die Seite ihre Stile verloren, und die Links zum Programm führen ins Leere.