Absolute und relative Pfade

Verwendung

Pfade werden an vielen Stellen verwendet: In einem C# Programm um anzugeben welche Datei gelesen werden soll. Auf der Kommandozeile für fast jeden Befehl.

Auch URLs, die Adressen von Webseiten, enthalten einen Pfad:

https://web-development.ct.fh-salzburg.ac.at/dateisystem/absolut-relativ/

Die URL besteht aus zwei Teilen. Der erste Teil gibt den Namen des Servers an:

web-development.ct.fh-salzburg.ac.at

Der zweite Teil ist eine Pfadangabe in der Schreibweise von Linux und MacOS:

/dateisystem/absolut-relativ/

Eine Webseite, zwei URLs

Betrachten wir ein ganz einfaches Beispiel: Eine Webseite die ein Bild und einen Link enthält:

    <img src="you-are-here.svg">
    inspired by <a href="https://onbeing.org/poetry/lost/">Lost</a>

Demo

Hier werden zwei Arten von URLs verwendet:

für das Bild eine relative URL you-are-here.svg
für den Link eine absolute URL https://onbeing.org/poetry/lost/

Absolute URLs

Die URL stellt den gesamten Weg dar, wie man zur Webseite kommt:

https://onbeing.org/poetry/lost/

Verwende das Protokoll HTTPS
auf dem Computer mit dem Namen onbeing.org
findest du die Webseite mit dem Pfad /poetry/lost/

Relative URLs

Die relative URL you-are-here.svg ist einfach ein Dateiname. D.h. die Datei des Bildes befindet sich im selben Ordner wie das HTML Dokument.

Bei den relativen URLs muss man die URL des enthaltenden Dokuments und die relativen URLs “zusammen—addieren”, um zu einer absoluten URL zu kommen.

Die Demo-Webseite oben findet man unter der URL

https://web-development.ct.fh-salzburg.ac.at/images/dateisystem/here.html

Um das Bild zu finden ersetzen wir nur den Teil nach dem letzten Schrägstrich:

https://web-development.ct.fh-salzburg.ac.at/images/dateisystem/you-are-here.svg

Relative URLs an anderer Stelle

Wird das Dokument an eine andere Stelle verschoben, und ändert sich damit die Ausgangs-URL, dann ist das Ergebnis anders.

https://users.ct.fh-salzburg.ac.at/~bjelline/index.html
                                           + you-are-here.svg  =
https://users.ct.fh-salzburg.ac.at/~bjelline/you-are-here.svg

Damit das Bild noch richtig angezeigt wird, muss man also die Bilddatei wieder in denselben Ordner legen, wo auch die HTML-Datei liegt.

Teste die Seite: https://users.ct.fh-salzburg.ac.at/~bjelline/index.html

Relative URLs mit Ordnernamen

Relative URLs können selbst wieder Ordnernamen enthalten:

https://users.ct.fh-salzburg.ac.at/~bjelline/bilder/index.php
                                                 +  img/altai-small.jpg
https://users.ct.fh-salzburg.ac.at/~bjelline/bilder/img/altai-small.jpg

Teste die Seite: https://users.ct.fh-salzburg.ac.at/~bjelline/bilder/index.php

Relative URLs mit Punkt-Punkt

Zwei Punkte als Ordnernamen bedeuten dabei: „raus aus dem aktuellen Ordner“:

https://users.ct.fh-salzburg.ac.at/~bjelline/bilder/img/
                                                 +      ../index.php =
https://users.ct.fh-salzburg.ac.at/~bjelline/bilder/index.php

Diese Schreibweise erlaubt auch sehr umständliche Formulierungen (mit Redundanz):

https://users.ct.fh-salzburg.ac.at/~bjelline/bilder/img/
                                                 +      ../../bilder/index.php =
https://users.ct.fh-salzburg.ac.at/~bjelline/bilder/index.php

Teste die Seite: https://users.ct.fh-salzburg.ac.at/~bjelline/bilder/img/

Alles nur im Client

All diese Berechnungen finden im Webbrowser statt. Erst wenn der Browser die vollständige absolute URL berechnet hat kann er sie laden.

Übung

Überlege: wo in meinem Dateisystem will ich die Übung machen? Lege dafür einen neuen Ordner an
Gehe zu https://web-development.ct.fh-salzburg.ac.at/images/dateisystem/here.html
Lade die HTML-Datei herunter, nenne sie here.html
Lade das Bild herunter
teste ob die lokale Version der Webseite im Browser funktioniert

Mach Unfug mit der Webseite:

Verschiebe das Bild in einen Unter-Ordern bilder/“
was musst du in der HTML Datei ändern, damit die Seite wieder funktioniert?
Verändere den Text in der HTML Datei
Verändere eine Farbe im Bild
Verschiebe die HTML-Datei in eine Unterordner, das Bild in den Hauptordner des Projekte.
was musst du in der HTML Datei ändern, damit die Seite wieder funktioniert?

Check / Interview mit einer zweiten Person:

Auf die Frage: wo hast du die Webseite gespeichert … kannst du den Pfad des Ordner nennen?
In der Anleitung stand here.html als Dateiname … hast du wirklich diesen Namen verwendet?
Funktioniert die Webseite in der letzten Version?