Gdy główna strona już działa, naturalnym kolejnym krokiem jest dodanie sekcji „O nas”, kontaktu albo osobnego poradnika. Właśnie wtedy pojawia się praktyczne pytanie, jak zrobić podstronę w html, połączyć ją z menu i uniknąć błędów prowadzących do pustej strony. Pokażę prostą strukturę plików, poprawne ścieżki, przykładowy kod oraz zasady, które przydadzą się zarówno przy małej stronie, jak i większym projekcie.

Podstrona to osobny plik, a nie specjalny znacznik

W klasycznej, statycznej witrynie podstrona jest po prostu drugim dokumentem HTML. Nie trzeba tworzyć do niej osobnej technologii. Tworzysz plik, dodajesz treść, a później wskazujesz go linkiem na stronie głównej.

Najprostszy projekt może wyglądać tak:

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

Plik index.html pełni zwykle funkcję strony głównej. Dokumenty o-nas.html i kontakt.html są podstronami, choć technicznie nie różnią się od strony startowej. Ich hierarchia wynika przede wszystkim z organizacji treści i sposobu linkowania.

W praktyce najłatwiej zacząć od skopiowania podstawowej struktury istniejącej strony. Na nowej podstronie zmieniasz tytuł, nagłówek oraz główną treść, ale zostawiasz wspólne menu i stopkę. Dzięki temu użytkownik nie ma wrażenia, że nagle trafił do zupełnie innego serwisu.

Utwórz plik i dodaj do niego link w menu

Najpierw otwórz edytor kodu, na przykład Visual Studio Code, i utwórz plik kontakt.html w tym samym folderze co index.html. Wstaw do niego treść podstrony, a potem zapisz plik dokładnie pod tą nazwą. Wielkość liter może mieć znaczenie po umieszczeniu witryny na serwerze, dlatego zapis Kontakt.html nie zawsze będzie równoważny z kontakt.html.

W pliku głównym dodaj odnośnik w menu:

A w nowym dokumencie umieść właściwą zawartość:

  
Kontakt
  
Napisz do nas, jeśli masz pytanie dotyczące projektu.

  

    kontakt@przyklad.pl
  

Element

Ja zwykle powtarzam menu na każdej statycznej podstronie. Przy dwóch lub trzech plikach jest to najprostsze i najbardziej przejrzyste rozwiązanie. Dopiero przy większej witrynie opłaca się użyć generatora stron, systemu CMS albo szablonów, które automatycznie wstawiają wspólne elementy.

Dobierz właściwą ścieżkę do pliku

Sam link może wyglądać poprawnie, a mimo to prowadzić do błędu 404. Powód najczęściej jest prosty: przeglądarka szuka pliku w innym folderze niż ten, w którym rzeczywiście go zapisano. Atrybut href określa ścieżkę od aktualnego dokumentu, a nie od całego projektu.

Przykładowa, bardziej uporządkowana struktura może wyglądać tak:

moja-strona/
├── index.html
├── kontakt.html
├── css/
│   └── style.css
└── blog/
    └── pierwszy-wpis.html

W tym układzie link z index.html do wpisu będzie miał postać blog/pierwszy-wpis.html. Natomiast link z pliku znajdującego się w folderze blog do kontaktu powinien wskazywać ../kontakt.html. Kropki w ścieżce nie są ozdobą, tylko informacją o przemieszczaniu się między poziomami folderów.

Podczas pracy lokalnej warto sprawdzić link dwukrotnie: kliknąć go z przeglądarki oraz porównać zapis w kodzie z faktyczną nazwą pliku. Na serwerze Linux wielkość liter bywa rozróżniana, więc odnośnik do Kontakt.html może nie otworzyć pliku zapisanego jako kontakt.html.

Zadbaj o własną treść, tytuł i wspólny styl

Każda podstrona powinna mieć konkretny cel. Strona kontaktowa powinna ułatwiać kontakt, podstrona „O nas” budować wiarygodność, a artykuł odpowiadać na jedno jasno określone zagadnienie. Samo skopiowanie tekstu z index.html i zmiana nagłówka stworzy dokument, ale nie stworzy dobrej podstrony.

W części przeznaczonej na informacje dokumentu ustaw indywidualny tytuł oraz podłącz ten sam arkusz CSS:

Unikalny tytuł pomaga odróżnić karty otwarte w przeglądarce, a opis porządkuje informację o zawartości strony. Nie należy jednak traktować tych elementów jak magicznego sposobu na widoczność w wyszukiwarce. Największą różnicę robi użyteczna treść, logiczna struktura i poprawne działanie witryny.

Wspólny arkusz CSS sprawia, że wszystkie dokumenty korzystają z tych samych reguł:

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  max-width: 960px;
  margin: 0 auto;
  padding: 24px;
}

nav a {
  margin-right: 16px;
}

main {
  padding-top: 32px;
}

Jeżeli podstrona leży w podfolderze, ścieżka do arkusza również musi uwzględniać jej położenie. Z pliku blog/pierwszy-wpis.html do arkusza w folderze css przejdziesz przez ../css/style.css. To drobny szczegół, ale właśnie on często sprawia, że nowa strona wyświetla się bez stylów.

Przetestuj podstronę i usuń typowe błędy

Po zapisaniu plików otwórz stronę główną w przeglądarce i przejdź przez całe menu. Sprawdź również przyciski powrotu, obrazy, arkusz stylów oraz widok na telefonie. Testowanie jednej ścieżki nie wystarczy, bo błąd w linku powrotnym może ujawnić się dopiero na drugiej podstronie.

Nie pomijaj atrybutu alt przy obrazach, używaj opisowych nazw plików i zachowuj jeden logiczny nagłówek główny dla każdej podstrony. Dla użytkownika korzystającego z klawiatury czytelna kolejność linków będzie ważniejsza niż efektowna animacja.

Trzeba też odróżnić zwykłą stronę statyczną od aplikacji korzystającej z CMS-a lub frameworka. W pierwszym przypadku tworzysz pliki ręcznie. W WordPressie czy innym systemie zarządzania treścią podstronę dodaje się zwykle w panelu administracyjnym, a kod HTML jest generowany przez szablon. Próba wrzucenia ręcznie utworzonego pliku do takiego systemu nie zawsze da oczekiwany efekt.

Mały projekt warto od początku budować z porządkiem

Do pierwszej podstrony wystarczą dwa pliki HTML, edytor kodu i przeglądarka. Najprostszy schemat to utworzenie dokumentu, dodanie do niego treści, połączenie go przez , a na końcu sprawdzenie wszystkich ścieżek.

Gdy projekt zacznie rosnąć, przenieś style do jednego arkusza, trzymaj obrazy i podstrony w opisanych folderach oraz stosuj konsekwentne nazewnictwo bez przypadkowych spacji i polskich znaków. Taki porządek oszczędza czas przy każdej kolejnej zmianie i sprawia, że rozbudowa prostej strony HTML nie zamienia się w walkę z niedziałającymi linkami.