Ścieżki do plików w HTML

Wprowadzenie

Żeby obrazki, pliki CSS lub dokumenty działały poprawnie, musisz dobrze podać ścieżki do plików. To częste źródło błędów na początku nauki.

---

Teoria / Wyjaśnienia

• Ścieżki mogą być bezwzględne (np. https://example.com/obrazek.png) albo względne względem bieżącego pliku.
• Najczęstsze typy ścieżek względnych:
  • plik.html – plik w tym samym folderze,
  • folder/plik.html – plik w podfolderze,
  • ../plik.html – plik katalog wyżej,
  • ../img/obrazek.png – plik w folderze img katalog wyżej.
• W HTML ścieżki wykorzystujesz m.in. w:
  • <img src="...">,
  • <link rel="stylesheet" href="...">,
  • <a href="...">.

---

Praktyczne przykłady

Przykład

<!-- Plik w tym samym folderze -->
<a href="cv.pdf">Pobierz CV</a>

<!-- Obrazek w podfolderze img/ -->
<img src="img/logo.png" alt="Logo strony">

<!-- Plik CSS w folderze css/ katalog wyżej -->
<link rel="stylesheet" href="../css/style.css">

<!-- Bezwzględny adres do zasobu w sieci -->
<img src="https://example.com/banner.png" alt="Baner z internetu">

---

Ćwiczenie

1. Przygotuj prostą stronę z:
   • obrazkiem z folderu img/,
   • odnośnikiem do pliku PDF,
   • podpiętym arkuszem stylów z folderu css/.
2. Użyj ścieżek względnych zamiast pełnych adresów URL.
3. Zmień strukturę folderów i popraw ścieżki tak, aby nadal działały.