Masz już plik index.html, ale chcesz dodać osobne „O mnie”, ofertę albo kontakt? Pytanie, jak zrobić podstronę w HTML, sprowadza się przede wszystkim do utworzenia drugiego dokumentu, poprawnego połączenia go z menu i zachowania spójnej struktury całej witryny. Pokażę prosty sposób, który działa zarówno lokalnie na komputerze, jak i po opublikowaniu plików na serwerze.

Podstrona HTML to osobny plik w strukturze witryny

Technicznie każda podstrona jest po prostu oddzielnym plikiem HTML. Strona główna najczęściej nazywa się index.html, a kolejne dokumenty mogą mieć nazwy takie jak o-nas.html, oferta.html lub kontakt.html.

Najprostszy układ projektu może wyglądać tak:

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

Nie trzeba instalować specjalnego systemu CMS ani skomplikowanego narzędzia. Wystarczy edytor kodu, na przykład Visual Studio Code, oraz przeglądarka. Z mojego doświadczenia wynika, że początkujący często szukają osobnego „trybu podstron”, chociaż w czystym HTML najważniejsza jest po prostu organizacja plików i ich wzajemne linkowanie.

Podstrona nie musi mieć identycznej treści jak strona główna. Powinna jednak zachować wspólne elementy, takie jak menu, logo, stopka i arkusz stylów. Dzięki temu użytkownik nie ma wrażenia, że nagle opuścił witrynę.

Utwórz nowy dokument i dodaj jego zawartość

W folderze projektu utwórz plik, na przykład o-nas.html. Nazwa powinna być krótka, zapisana małymi literami i pozbawiona polskich znaków. Zamiast moja historia.html lepiej użyć moja-historia.html, ponieważ spacje i nietypowe znaki łatwiej prowadzą do błędów w adresach.

W nowym dokumencie umieść treść charakterystyczną dla tej strony. Poniższy fragment pokazuje podstawową zawartość podstrony:

  
O nas
  
Poznaj historię naszej firmy i osoby tworzące zespół.

  
Czym się zajmujemy
  
Tworzymy rozwiązania technologiczne dla małych i średnich firm.

Każdy dokument powinien mieć jeden główny nagłówek h1, a dalsze części można porządkować za pomocą h2 i h3. Nie kopiuj bezmyślnie całej strony głównej. Skopiuj szablon układu, ale wymień tytuł, nagłówki, tekst i dane charakterystyczne dla nowej podstrony.

Jeżeli tworzysz dokument od zera, pamiętaj również o kodowaniu znaków, tytule strony i opisie. W praktyce każda podstrona powinna mieć własną treść w elementach title oraz meta description, ponieważ ułatwia to rozpoznanie strony w karcie przeglądarki i wynikach wyszukiwania.

Połącz stronę główną z podstroną

Samo utworzenie pliku nie wystarczy. Użytkownik musi mieć możliwość przejścia do niego z menu. Służy do tego element a oraz jego atrybut href:

Jeżeli wszystkie pliki znajdują się w jednym folderze, wystarczy podać nazwę pliku. Gdy podstrona jest umieszczona w katalogu, trzeba wskazać także jego nazwę:

Blog
Przeczytaj wpis

W drugą stronę działa to podobnie. Link z pliku znajdującego się w folderze blog do strony głównej będzie wyglądał tak:

Wróć na stronę główną

Fragment ../ oznacza przejście o jeden poziom wyżej. To jeden z najczęstszych punktów potknięcia. Jeśli link działa z index.html, ale przestaje działać z podfolderu, najpierw sprawdź właśnie położenie pliku względem celu.

Zachowaj wspólny wygląd wszystkich dokumentów

Podstrona może działać bez CSS, ale zwykle wygląda wtedy jak surowy dokument. Lepszym rozwiązaniem jest podłączenie tego samego arkusza stylów do każdego pliku. W dokumencie znajdującym się w głównym folderze ścieżka może wyglądać tak:

Dla pliku znajdującego się w katalogu blog trzeba cofnąć się o poziom:

To samo dotyczy obrazów. Z poziomu index.html obraz może być wskazany jako obrazy/logo.png, natomiast z pliku w folderze blog potrzebna będzie ścieżka ../obrazy/logo.png. Gdy grafika albo CSS nie wyświetlają się na podstronie, problem zwykle nie leży w samym stylu, tylko w błędnej ścieżce względnej.

Warto też zachować identyczne menu na każdej stronie. Przy dwóch lub trzech dokumentach można skopiować je ręcznie. Przy większej witrynie lepiej użyć generatora stron, systemu szablonów albo CMS-a, ponieważ ręczna edycja tego samego menu w kilkunastu plikach szybko staje się uciążliwa.

Sprawdź działanie i popraw typowe błędy

Przed publikacją otwórz index.html w przeglądarce i kliknij każdy element menu. Testuj także przycisk powrotu, obrazy i przejścia między folderami. Ja zwykle sprawdzam podstronę w dwóch etapach: najpierw lokalnie, a potem po umieszczeniu plików na serwerze, bo niektóre problemy ujawniają się dopiero po zmianie adresu bazowego.

Przeczytaj również: Czy HTML to język programowania? Klucz do zrozumienia web dev

Najczęstsze problemy z podstronami

• Błędne rozszerzenie - plik został zapisany jako o-nas.html.txt, ponieważ edytor ukrywa rozszerzenia.
• Różna wielkość liter - link prowadzi do O-NAS.html, a plik nazywa się o-nas.html. Na niektórych serwerach są to dwa różne adresy.
• Zła ścieżka - użyto o-nas.html, chociaż plik znajduje się w katalogu strony.
• Brak pliku na serwerze - podstrona działa na komputerze, ale nie została przesłana podczas publikacji.
• Niepoprawny CSS - arkusz stylów wskazuje lokalną ścieżkę, która nie istnieje na serwerze.

Dobrym zwyczajem jest używanie nazw bez spacji, polskich znaków i wielkich liter. Taki zapis jak kontakt.html jest prostszy do odczytania niż Kontakt dla Klientów.html. Jeśli projekt zaczyna rosnąć, uporządkuj go w katalogi i trzymaj jedną, konsekwentną konwencję nazewniczą.

Warto pamiętać, że HTML odpowiada za strukturę i przejścia między dokumentami, ale nie tworzy samodzielnie formularza wysyłającego wiadomości ani logowania użytkowników. Do takich funkcji potrzebne są dodatkowo JavaScript, backend lub zewnętrzna usługa. Dla zwykłej podstrony informacyjnej czysty HTML i CSS w zupełności wystarczą.

Najprostszy schemat rozbudowy własnej witryny

Jeśli tworzysz małą stronę, zacznij od układu index.html, o-nas.html i kontakt.html. Wspólne menu, jeden arkusz CSS oraz poprawne ścieżki dadzą Ci solidną bazę bez zbędnych narzędzi.

Najważniejsza zasada jest prosta: podstrona to nowy plik, a link to droga do tego pliku. Gdy pilnujesz nazw, folderów i względnych adresów, możesz rozbudowywać witrynę o kolejne sekcje bez przebudowywania całego projektu.