Zum Inhalt

Lösung – Übung Pfade

Teil 1 – Lokale Pfade (Windows)

C:\Daten\
├── index.html
├── Bilder\
│   ├── Blume.jpg
│   └── test.html
└── CSS\
    └── main.css

  1. Absoluter Pfad von main.css: 

    C:\Daten\CSS\main.css

  2. Relativer Pfad von index.html zu Blume.jpg: 

    Bilder\Blume.jpg
    index.html liegt in C:\Daten\, das Bild liegt in C:\Daten\Bilder\.

  3. Absoluter Pfad von main.css zu Blume.jpg: 

    C:\Daten\Bilder\Blume.jpg

  4. Relativer Pfad von main.css zu Blume.jpg: 

    ..\Bilder\Blume.jpg
    main.css liegt in CSS\, also muss man mit .. eine Ebene hoch und dann in Bilder\.

  5. Relativer Pfad von test.html zu Blume.jpg: 

    Blume.jpg
    Beide Dateien liegen im gleichen Ordner C:\Daten\Bilder\.

  6. Relativer Pfad von index.html zu print.css: 

    CSS\print.css
    index.html liegt in C:\Daten\, print.css liegt in C:\Daten\CSS\.

Teil 2 – Linux-Serverpfade

/var/www/html/
├── index.php
├── assets/
│   ├── css/
│   │   └── style.css
│   └── images/
│       └── logo.png
└── wp-content/
    └── themes/
        └── mytheme/
            └── functions.php

  1. Absoluter Pfad von logo.png: 

    /var/www/html/assets/images/logo.png

  2. Relativer Pfad von index.php zu logo.png: 

    assets/images/logo.png

  3. Relativer Pfad von style.css zu logo.png: 

    ../images/logo.png
    style.css liegt in css/, also eine Ebene hoch (..) und dann in images/.

  4. Relativer Pfad von functions.php zu style.css: 

    ../../../assets/css/style.css
    Von mytheme/ → themes/ → wp-content/ → html/ (3x ..), dann assets/css/style.css.

Hinweis: functions.php liegt 3 Ebenen tief unter html/.

  1. Unterschied / vs ../:
  2. / am Anfang = absoluter Pfad – startet immer vom Root-Verzeichnis des Systems
  3. ../ = relativer Pfad – geht vom aktuellen Verzeichnis eine Ebene nach oben

Teil 3 – Webpfade (URL und Serverpfad)

Domain: ihreadresse.ch Lokaler Root-Pfad: /srv/var/www/htdocs

  1. Lokaler absoluter Pfad von Dokument.pdf: 

    /srv/var/www/htdocs/wp-content/uploads/2022/5/Dokument.pdf

  2. Lokaler absoluter Pfad von download.php: 

    /srv/var/www/htdocs/wp-content/plugins/neon/files/download.php

  3. URL von Dokument.pdf: 

    https://ihreadresse.ch/wp-content/uploads/2022/5/Dokument.pdf
    Der Document Root (htdocs) entspricht dem URL-Root / – alles davor ist für den Browser nicht sichtbar.

  4. URL von download.php: 

    https://ihreadresse.ch/wp-content/plugins/neon/files/download.php

  5. Relativer Pfad von download.php zu Dokument.pdf: 

    ../../../uploads/2022/5/Dokument.pdf
    Von files/ → neon/ → plugins/ → wp-content/ (3x ..), dann uploads/2022/5/Dokument.pdf.

  6. Bonusfrage – root-relative vs. relative Pfade:

Root-relative Pfade (/assets/css/style.css) funktionieren unabhängig davon, in welchem Ordner die aktuelle Datei liegt. Das ist besonders wichtig bei: - Mehreren verschachtelten Seiten (der relative Pfad wäre jedes Mal anders) - CMS-Systemen wie WordPress, wo URLs oft umgeschrieben werden - Deployment auf unterschiedliche Verzeichnistiefen

Der Nachteil: root-relative Pfade funktionieren nicht beim direkten Öffnen einer HTML-Datei im Browser (ohne Webserver).