Aby podpiąć podstronę w HTML, należy przygotować osobne pliki HTML dla każdej sekcji serwisu oraz połączyć je między sobą za pomocą odnośników (linków). Poniżej znajdziesz szczegółowy przewodnik, przykłady kodu oraz dobre praktyki organizacji plików i folderów.
Struktura plików i folderów
Utwórz folder, który będzie zawierał wszystkie pliki serwisu, np. moja-strona. W nim umieść:
index.html– strona główna,about.html– strona “O nas”,services.html– strona z ofertą lub usługami,contact.html– strona kontaktowa,style.css– plik ze stylami (opcjonalnie).
Dla bardziej rozbudowanych projektów warto trzymać podstrony w osobnych folderach z plikiem index.html w każdym z nich (zamiast, np., about.html) – jest to często stosowana praktyka w nowoczesnych serwisach internetowych.
Przykładowa struktura:
moja-strona/
│
├── index.html
├── o-nas/
│ └── index.html
├── uslugi/
│ └── index.html
├── kontakt/
│ └── index.html
└── style.css
Tworzenie podstrony
Każda podstrona to osobny plik HTML (lub plik index.html w osobnym folderze). Przykład prostego pliku podstrony:
o-nas/index.html
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>O nas | Moja Strona</title>
<link rel="stylesheet" href="../style.css">
</head>
<body>
<nav>
<a href="../index.html">Strona główna</a>
<a href="../o-nas/index.html">O nas</a>
<a href="../uslugi/index.html">Usługi</a>
<a href="../kontakt/index.html">Kontakt</a>
</nav>
<h1>O nas</h1>
<p>Poznaj naszą firmę...</p>
</body>
</html>
Dodawanie odnośników do podstron
Do nawigacji między podstronami wykorzystuje się element <a> (anchor, link):
<a href="about.html">O nas</a>
<a href="services.html">Usługi</a>
<a href="contact.html">Kontakt</a>
Jeśli podstrony są w osobnych folderach:
<a href="o-nas/index.html">O nas</a>
<a href="uslugi/index.html">Usługi</a>
<a href="kontakt/index.html">Kontakt</a>
Dobre praktyki – nawigacja i czytelność
- Umieść elementy nawigacji (linki do podstron) w każdej podstronie, np. w
<nav>, żeby użytkownik łatwo wracał do interesujących go sekcji, - Stosuj przejrzyste, opisowe nazwy plików i folderów,
- Jeśli korzystasz z folderów i plików index.html, adresy są krótsze i czytelniejsze (np.
domena.pl/o-nas/zamiastdomena.pl/o-nas.html).
Przykład – pełna strona z podstronami
Strona główna: index.html
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Moja Strona</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<a href="index.html">Strona główna</a>
<a href="o-nas/index.html">O nas</a>
<a href="uslugi/index.html">Usługi</a>
<a href="kontakt/index.html">Kontakt</a>
</nav>
<h1>Witaj na naszej stronie!</h1>
<p>Tutaj znajdziesz najważniejsze informacje.</p>
</body>
</html>
Wszystkie podstrony powinny mieć identyczny blok nawigacyjny, by utrzymać spójność serwisu.
Rozwijanie nawigacji
Gdy podstron przybywa, warto zastosować menu rozwijane lub oddzielną stronę typu “Spis treści”, gdzie umieścisz linki do wszystkich kluczowych sekcji.
Wskazówki zaawansowane
- Jeśli korzystasz z większej liczby podstron i folderów, możesz również stosować ścieżki względne (
../kontakt/index.html) lub absolutne (/kontakt/index.html); - W nowoczesnych projektach HTML wspiera się dynamiczne generowanie podstron (np. przez PHP, frameworki JavaScript), ale podstawowe łączenie w statycznym HTML jest bezpośrednie i nie wymaga dodatkowego zaplecza technicznego.
Podsumowanie
Aby poprawnie podpiąć podstronę w HTML –
- Każdą podstronę zapisuj jako osobny plik HTML lub index.html w dedykowanym folderze,
- Łącz podstrony linkami
<a href="ścieżka">tekst</a>, - Umieść linki odsyłające do wszystkich sekcji w widocznym i powtarzalnym miejscu (najczęściej w nagłówku lub bocznym pasku),
- Zachowuj logiczną strukturę folderów i czytelne nazwy plików.
Stosując powyższe wskazówki, stworzysz czytelną i łatwą w utrzymaniu stronę internetową z dowolną liczbą podstron.
