Aby stworzyć podstronę w HTML, należy przygotować osobny plik HTML reprezentujący dodatkową treść w obrębie serwisu i połączyć go ze stroną główną oraz innymi podstronami za pomocą odpowiednich hiperłączy. Poniżej znajdziesz szczegółowy poradnik wraz z przykładami praktycznymi, które sprawdzą się zarówno w prostych, jak i nieco bardziej zaawansowanych projektach.
Co to jest podstrona?
Podstrona to osobny dokument HTML, będący częścią większego serwisu internetowego. Najczęściej stanowi rozwinięcie lub uzupełnienie treści strony głównej, np. „O nas”, „Oferta”, „Kontakt”, opis produktu czy artykuł blogowy.
Krok 1 – Przygotowanie struktury plików
Na początku utwórz główny katalog na swoją stronę, np. mojastrona, w którym będą wszystkie pliki serwisu.
Przykład struktury:
mojastrona/
│
├── index.html <-- Strona główna
├── o-nas.html <-- Podstrona o firmie
├── kontakt.html <-- Podstrona z kontaktem
└── images/ <-- Katalog na obrazki
Krok 2 – Tworzenie podstrony w HTML
Każda podstrona to osobny plik HTML. Na przykład, jeśli chcesz stworzyć podstronę „O nas”, przygotuj plik o-nas.html.
Przykład pliku podstrony –
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>O nas – Moja Strona</title>
<meta name="description" content="Dowiedz się więcej o naszej firmie.">
</head>
<body>
<h1>O nas</h1>
<p>Jesteśmy firmą z wieloletnim doświadczeniem...</p>
<a href="index.html">Powrót do strony głównej</a>
</body>
</html>
Krok 3 – Dodanie linków do podstron
Aby użytkownik mógł przejść ze strony głównej na podstronę, należy dodać na stronie głównej (index.html) hiperłącze –
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Moja Strona</title>
</head>
<body>
<h1>Witamy na naszym serwisie!</h1>
<nav>
<ul>
<li><a href="o-nas.html">O nas</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</nav>
<p>Tu znajdziesz najważniejsze informacje...</p>
</body>
</html>
Analogicznie, na każdej podstronie warto umieścić link powrotny do strony głównej lub do innych istotnych części serwisu.
Krok 4 – Praktyczne zastosowania podstron
Podstrony są niezbędne w każdym większym serwisie. Oto kilka przykładów użycia:
- Opis wycieczki turystycznej – plik
lanzarote.htmlopisuje wyspę Lanzarote; na stronie głównej wystarczy dodać link „Lanzarote” prowadzący do tej podstrony; w samej podstronie można dodać również ikonę lub link powrotny do strony głównej. - Modułowa rozbudowa treści – każda usługa, produkt czy artykuł może mieć własną podstronę, np.
usluga1.html,artykuł-2025.html; - Blog i aktualności – każdy wpis to oddzielny plik HTML, spięty wspólną nawigacją.
Krok 5 – Wewnętrzne linkowanie i nawigacja
Dobre praktyki sugerują, aby wewnętrzne linkowanie umożliwiało użytkownikowi swobodne przechodzenie między podstronami. Możesz zaprojektować menu w formie listy, przycisków lub grafiki.
Przykład menu wspólnego dla wszystkich podstron:
<nav>
<ul>
<li><a href="index.html">Strona główna</a></li>
<li><a href="o-nas.html">O nas</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</nav>
Aby łatwo aktualizować menu na wszystkich podstronach, można wykorzystać rozwiązania serwerowe (np. PHP includes) lub narzędzia automatyzujące, choć w podstawowych projektach HTML menu zwykle powiela się ręcznie.
Krok 6 – Rozszerzenia – ład i SEO
Każda podstrona powinna mieć unikalny tytuł (<title>) i opis (<meta name="description">), co poprawia widoczność strony w wyszukiwarkach oraz wygodę użytkownika.
Fragment <head> na podstronie:
<head>
<meta charset="utf-8">
<title>Oferta – Moja Strona</title>
<meta name="description" content="Oferta naszej firmy – sprawdź szczegóły.">
</head>
Zaawansowane możliwości
- Podstrony dynamiczne – w większych serwisach stosuje się generowanie podstron dynamicznie, np. z wykorzystaniem PHP lub CMS (WordPress, Joomla), ale sama koncepcja jest taka sama – każda treść dostępna jest pod osobnym adresem URL;
- Komponenty wspólne – aby uniknąć powielania kodu (np. menu, stopki), można w zaawansowanych projektach korzystać z szablonów lub wstawek serwerowych (SSI, PHP).
Najczęstsze błędy
- Niepołączenie podstron ze sobą – użytkownik nie może wrócić na stronę główną,
- Błędy w ścieżkach do plików (np. literówki, złe rozszerzenia),
- Powielanie tych samych tytułów (
<title>) na wszystkich stronach.
Podsumowanie –
Tworzenie podstron w HTML sprowadza się do przygotowania osobnych plików, umiejętnego ich połączenia za pomocą linków wewnętrznych oraz dbania o przejrzystość nawigacji i metadata. Nawet w prostym projekcie daje to uporządkowaną i łatwą w rozbudowie strukturę serwisu internetowego.
