Czym są ścieżki względne w HTML?
Ścieżka względna określa położenie pliku względem dokumentu, w którym jest użyta. W HTML stosuje się ją np. w atrybutach href i src, aby wskazać arkusz CSS, obraz, skrypt JavaScript lub inną podstronę.
Jeżeli plik index.html znajduje się bezpośrednio w folderze Strona, a arkusz CSS jest w podfolderze style, poprawny zapis to:
<link rel="stylesheet" href="./style/default.css">
Można też zapisać krócej:
<link rel="stylesheet" href="style/default.css">
Oba zapisy oznaczają: „wejdź z bieżącego folderu do folderu style i znajdź plik default.css”.
Najważniejsze oznaczenia
./— bieżący folder, czyli folder, w którym znajduje się aktualny plik HTML,../— folder nadrzędny, czyli jeden poziom wyżej,folder/plik.css— plik w podfolderze,/folder/plik.css— ścieżka od katalogu głównego serwisu, a nie od bieżącego pliku.
Czego unikać?
W kodzie strony internetowej nie należy odwoływać się do plików przez lokalne ścieżki systemu Windows, np. c:/style/default.css albo c:\style\default.css. Taka ścieżka może działać tylko na komputerze autora, ale nie na serwerze ani u użytkownika odwiedzającego stronę.
W adresach internetowych stosuje się ukośnik /, a nie ukośnik wsteczny znany z Windows.
Przykład struktury
Strona/
├── index.html
└── style/
└── default.css
Poprawne podłączenie CSS w index.html:
<link rel="stylesheet" type="text/css" href="./style/default.css">