Podstrona HTML nie wymaga skomplikowanego systemu ani specjalnego programu. W praktyce tworzysz osobny plik .html, uzupełniasz go treścią i łączysz ze stroną główną za pomocą odnośnika. Pokażę, jak zrobić podstronę w HTML, jak uporządkować pliki, poprawnie zbudować menu, testować ścieżki oraz przygotować stronę do publikacji.

Podstrona HTML zaczyna się od osobnego pliku

Podstrona to po prostu oddzielny dokument HTML należący do tej samej witryny. Strona główna zwykle nosi nazwę index.html, a kolejne pliki mogą nazywać się na przykład o-nas.html, oferta.html albo kontakt.html.

Nie tworzę podstrony przez dopisanie specjalnego polecenia do pliku głównego. Najprościej jest utworzyć nowy plik tekstowy, zapisać go z rozszerzeniem .html i umieścić w folderze projektu. Dopiero link w menu sprawia, że użytkownik może do niego przejść.

Do napisania prostej podstrony wystarczy Notatnik, choć wygodniejszy będzie edytor kodu, na przykład Visual Studio Code. Program nie tworzy strony za nas, ale podświetla składnię i pomaga szybciej zauważyć brakujący znak lub błędną nazwę pliku.

Jak przygotować strukturę plików bez bałaganu

Na początek dobrze przyjąć prosty układ folderów. Dzięki temu łatwiej znaleźć dokument, podłączyć arkusz stylów i przenieść całość na hosting.

moja-strona/
├── index.html
├── o-nas.html
├── kontakt.html
├── css/
│   └── style.css
└── obrazy/
    └── logo.png

Jeżeli podstrony są nieliczne, mogą znajdować się w głównym folderze obok index.html. Przy większym projekcie można utworzyć katalog podstrony, ale wtedy trzeba pamiętać o poprawnych ścieżkach do arkusza CSS i obrazów.

Nazwy plików zapisuję małymi literami, bez polskich znaków i spacji. Zamiast O Nas.html lepiej użyć o-nas.html. To drobna zasada, która ogranicza problemy po publikacji na serwerze, gdzie wielkość liter w nazwach często ma znaczenie.

Jak stworzyć pierwszą podstronę krok po kroku

Załóżmy, że chcę dodać stronę „O nas”. Tworzę plik o-nas.html i wstawiam do niego podstawowy szkielet dokumentu. W przykładzie pomijam zewnętrzne elementy dokumentu, żeby skupić się na kodzie widocznym na stronie.

  
O nas
  
Tworzymy proste rozwiązania dla małych firm.

  Wróć na stronę główną

Najważniejszy jest unikalny nagłówek h1, który mówi, czego dotyczy dana strona. Tytuł w elemencie pojawia się na karcie przeglądarki, a opis meta może pomóc wyszukiwarce i użytkownikowi zrozumieć zawartość podstrony.

W prawdziwym projekcie każda podstrona powinna zachować ten sam układ menu, stopki i arkusza CSS. Zmieniam głównie treść środkowej części, a elementy wspólne kopiuję z gotowego dokumentu. Przy kilku plikach to szybkie rozwiązanie, choć przy większej witrynie lepiej użyć systemu szablonów albo CMS-a.

Jak połączyć podstronę ze stroną główną

Do przechodzenia między plikami służy element anchor, czyli znacznik . Atrybut href wskazuje nazwę lub ścieżkę do dokumentu, który ma się otworzyć.

Ten fragment można wkleić zarówno do index.html, jak i do pozostałych podstron. Dzięki temu użytkownik nie trafia w ślepy zaułek i może przejść do najważniejszych części serwisu z każdego miejsca.

Ścieżki do plików w tym samym folderze

Jeżeli oba dokumenty znajdują się w jednym katalogu, wystarczy podać nazwę pliku, na przykład href="kontakt.html". To tak zwana ścieżka względna. Nie wpisuję tu pełnego adresu witryny, bo podczas pracy lokalnej strona może jeszcze nie mieć domeny.

Ścieżki do podfolderów i powrót poziom wyżej

Przy takim układzie:

index.html
podstrony/
  oferta.html

link ze strony głównej do oferty będzie wyglądał tak:

Oferta

Z kolei z pliku podstrony/oferta.html do strony głównej trzeba cofnąć się o jeden poziom:

Strona główna

W praktyce większość błędów z niedziałającymi podstronami wynika właśnie z niepoprawnej ścieżki. Jeżeli przeglądarka pokazuje błąd 404 albo pustą stronę, najpierw sprawdzam nazwę pliku, wielkość liter i położenie folderu.

Jak zachować spójny wygląd i dobrą użyteczność

Samo działające menu nie wystarczy. Podstrona powinna wyglądać jak część jednej witryny, dlatego wszystkie dokumenty podłączam do tego samego arkusza CSS.

W przypadku pliku znajdującego się w folderze podstrony ścieżka może wymagać cofnięcia o poziom:

Poza wyglądem liczy się też semantyka. Menu umieszczam w

Nie ukrywam, że początkujący często skupiają się na kolorach, a pomijają wygodę korzystania ze strony. Tymczasem czytelne menu, kontrast tekstu i wersja mobilna mają większe znaczenie niż efektowna animacja.

Przeczytaj również: Jak stworzyć szablon HTML od podstaw kompletny przewodnik dla początkujących

Unikalna treść na każdej stronie

Nie kopiuję tego samego tekstu do wszystkich dokumentów. Podstrona „Kontakt” powinna zawierać dane kontaktowe lub formularz, „Oferta” opis usług, a „O nas” informacje o firmie. Każda z nich powinna mieć jeden główny temat i własny tytuł.

Jeżeli strona ma być widoczna w wyszukiwarce, warto przygotować również odrębny opis meta oraz przyjazną nazwę pliku. Adres o-nas.html jest dla człowieka bardziej zrozumiały niż page2.html, a sama nazwa od razu wyjaśnia zawartość.

Jak sprawdzić podstronę przed publikacją

Najpierw otwieram lokalnie plik index.html w przeglądarce i klikam każdy element menu. Testuję też przejście z podstrony z powrotem na stronę główną, bo często poprawny link działa tylko w jedną stronę.

• Sprawdź, czy plik ma rozszerzenie .html, a nie .txt.
• Otwórz wszystkie linki i zobacz, czy prowadzą do właściwych dokumentów.
• Zweryfikuj, czy obrazy i arkusz CSS ładują się na każdej podstronie.
• Zmniejsz szerokość okna i sprawdź wygląd na ekranie telefonu.
• Poszukaj literówek w tytule, nagłówkach i opisach.

Przy pracy lokalnej wystarczy dwukrotne kliknięcie pliku. Do większych projektów wygodniejszy jest prosty lokalny serwer, ponieważ zachowuje się podobnie do hostingu i pozwala wcześniej wykryć problemy ze ścieżkami.

Po zakończeniu testów przesyłam cały folder na hosting, zwykle przez panel usługodawcy albo klienta FTP. Trzeba zachować taką samą strukturę katalogów jak na komputerze. Jeśli plik znajduje się w innym miejscu niż w projekcie lokalnym, odnośniki mogą przestać działać.

Najczęstsze błędy przy tworzeniu podstron

Pierwszy błąd to zapisanie pliku jako kontakt.html.txt. System może ukrywać znane rozszerzenia, dlatego warto włączyć ich wyświetlanie lub sprawdzić nazwę w edytorze kodu.

Drugi problem to różnica między Kontakt.html a kontakt.html. Na niektórych komputerach oba zapisy mogą wydawać się równoważne, ale serwer często rozpoznaje je jako dwa różne pliki. Stosowanie małych liter od początku oszczędza sporo nerwów.

Zdarza się też, że menu na stronie głównej jest poprawne, ale na podstronie użyto tej samej ścieżki do CSS lub obrazów. Wtedy strona wygląda na „rozsypaną”, mimo że sam HTML działa. W takiej sytuacji trzeba sprawdzić, z którego folderu rozpoczyna się ścieżka.

Nie polecam również tworzenia osobnych, zupełnie różnych wersji menu dla każdej podstrony. Przy trzech plikach może to jeszcze przejść, ale przy dziesięciu szybko pojawiają się niespójności. Lepiej utrzymywać jeden wzorzec nawigacji i aktualizować go konsekwentnie.

Prosty sposób na uporządkowaną witrynę HTML

Najbezpieczniejszy schemat jest prosty: utwórz plik podstrony, skopiuj podstawową strukturę, zmień tytuł i treść, dodaj link w menu, a potem przetestuj wszystkie ścieżki. Do małej wizytówki lub projektu edukacyjnego taki zestaw w zupełności wystarczy.

Jeżeli witryna zaczyna rosnąć, samodzielne kopiowanie kodu przestaje być wygodne. Wtedy warto rozważyć generator stron statycznych, system szablonów albo CMS, który automatycznie powiela menu i stopkę. Na start nie komplikowałbym jednak rozwiązania. Dobrze nazwane pliki, poprawne linki i spójny CSS robią największą różnicę.

Podstrona HTML jest więc osobnym dokumentem, a nie specjalnym typem elementu ukrytym w stronie głównej. Gdy uporządkujesz pliki i nauczysz się świadomie korzystać ze ścieżek względnych, możesz rozbudować prosty dokument do pełnej, logicznie połączonej witryny.