Jak wyjść z folderu w ścieżce pliku w HTML?

Aby wyjść z folderu w ścieżce pliku w HTML, stosuje się znaki dwóch kropek z ukośnikiem: ../. Tego typu ścieżki określa się mianem ścieżek względnych, a ich główną zaletą jest możliwość dynamicznego przemieszczania się między katalogami bez konieczności podawania pełnej (bezwzględnej) lokalizacji pliku.

Podstawy: co oznacza ../?

• ../ – wywołanie tego symbolu w ścieżce oznacza „przejdź o jeden poziom katalogów wyżej”, czyli do katalogu nadrzędnego względem miejsca, w którym znajduje się aktualny plik HTML;
• możesz używać wielu kolejnych ../, aby przechodzić przez kilka poziomów katalogów w górę.

Przykłady zastosowań

Przykład 1 – Najprostsze wyjście o jeden poziom wyżej

Załóżmy, że masz taką strukturę plików:

www/
├── index.html
└── images/
    └── logo.png
└── about/
    └── kontakt.html

W pliku about/kontakt.html chcesz umieścić obrazek logo.png z katalogu images.

Kod HTML –

<img src="../images/logo.png" alt="Logo firmy"> 

Wyjaśnienie –
../ wychodzi z katalogu about do katalogu głównego www, a następnie przechodzi do katalogu images i wskazuje plik logo.png.

Przykład 2 – Wyjście o kilka poziomów wyżej

Struktura katalogów:

projekt/
└── app/
    └── views/
        └── users/
            └── profile.html
    └── assets/
        └── img/
            └── avatar.png

Chcesz załadować avatar.png w pliku profile.html.

Kod HTML –

<img src="../../../assets/img/avatar.png" alt="Avatar użytkownika"> 

Wyjaśnienie –

• każde ../ przesuwa cię o jeden katalog wyżej,
• z users do views,
• z views do app,
• z app do projekt,
• następnie wskazujesz ścieżkę do pliku obrazka.

Przykład 3 – Przejście „w bok” – do folderu siostrzanego

Struktura:

root/
├── documents/
│   └── notes.html
└── uploads/
    └── file.pdf

Chcesz linkować z documents/notes.html do pliku uploads/file.pdf.

Kod HTML –

<a href="../uploads/file.pdf">Pobierz plik PDF</a> 

Wyjaśnienie –
najpierw wychodzisz z documents do root (../), potem przechodzisz do uploads/ i wskazujesz plik PDF.

Najczęstsze błędy

• Używanie backslash (\) zamiast slash (/) – w kodzie HTML i na serwerach należy używać ukośnika /, nie backslash\; ten drugi jest charakterystyczny wyłącznie dla systemów Windows i nie działa poprawnie w przeglądarkach;
• Podawanie absolutnej ścieżki lokalnej – w HTML nigdy nie podawaj ścieżki typu C:\folder, bo przeglądarka nie znajdzie takiego pliku na serwerze.

Podsumowanie najważniejszych zasad

• ../ wychodzi o jeden poziom wyżej w strukturze katalogów;
• wielokrotne użycie pozwala przemieszczać się przez wiele katalogów nadrzędnych;
• ścieżki względne są elastyczne i zalecane do linków oraz zasobów wewnątrz projektu;
• używaj slasha (/) do oddzielania folderów w ścieżce pliku HTML.

Stosując powyższe zasady, możesz bez problemu odwoływać się do plików umieszczonych w innych częściach struktury katalogów strony internetowej i bezpiecznie „wychodzić” z folderów za pomocą ../ w ścieżkach.