Ścieżki względne i bezwzględne w HTML

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Ścieżka w HTML określa położenie pliku, np. arkusza CSS, obrazu lub skryptu JavaScript. Najczęściej występuje w atrybutach href oraz src.

Ścieżka względna

Ścieżka względna jest liczona od miejsca, w którym znajduje się aktualny plik HTML.

Przykład struktury:

www/
├── html/
│   └── index.html
└── style/
    └── styl.css

Jeśli plik index.html znajduje się w folderze html, a arkusz styl.css w folderze równoległym style, trzeba najpierw wyjść poziom wyżej, a potem wejść do folderu style:

<link rel="stylesheet" href="../style/styl.css">

Znaczenie zapisu:

  • ../ — przejście do katalogu nadrzędnego,
  • style/ — wejście do katalogu style,
  • styl.css — wskazanie pliku CSS.

Ścieżka bezwzględna od katalogu głównego serwera

Ścieżka zaczynająca się od / jest liczona od katalogu głównego witryny na serwerze WWW, a nie od bieżącego pliku.

Przykład:

<link rel="stylesheet" href="/style/styl.css">

Oznacza plik styl.css w katalogu style znajdującym się bezpośrednio w katalogu głównym witryny.

Typowy błąd egzaminacyjny

Nie należy mylić katalogu projektu z katalogiem głównym adresu URL. Folder www zwykle jest katalogiem głównym serwera, więc w adresie strony często nie zapisuje się /www/.

Poprawne określenie ścieżki zależy od położenia pliku HTML względem pliku CSS.