Ten artykuł to kompleksowy, praktyczny przewodnik dla początkujących, który krok po kroku wyjaśnia, jak stworzyć spójną stronę internetową składającą się z wielu podstron HTML. Dowiesz się, jak poprawnie zorganizować pliki, zbudować nawigację i połączyć wszystkie elementy w działającą całość, co jest kluczowe dla każdego, kto stawia pierwsze kroki w tworzeniu stron.

Zacznijmy od fundamentów: Przygotowanie do stworzenia strony z podstronami

Zanim zaczniemy pisać kod, potrzebujemy kilku podstawowych narzędzi. Na pewno przyda Ci się dobry edytor kodu, taki jak Visual Studio Code, który oferuje podświetlanie składni i wiele przydatnych rozszerzeń. Oczywiście, niezbędna będzie także przeglądarka internetowa (np. Chrome, Firefox), aby na bieżąco podglądać efekty naszej pracy.

Dobra organizacja plików i folderów to podstawa każdego projektu webowego. Wyobraź sobie, że budujesz dom musisz mieć plan i odpowiednio posegregowane materiały. W przypadku strony internetowej, główny folder projektu powinien zawierać plik index.html, który będzie naszą stroną główną. Obok niego znajdą się wszystkie podstrony, takie jak o-nas.html czy kontakt.html. Dla większego porządku, warto stworzyć także opcjonalne podfoldery: css na arkusze stylów, js na skrypty JavaScript oraz images na grafikę. Dzięki temu, nawet przy rozbudowanym projekcie, łatwo odnajdziesz potrzebne pliki.

• Główny folder projektu/
  • index.html (strona główna)
  • o-nas.html (podstrona "O nas")
  • kontakt.html (podstrona "Kontakt")
  • oferta.html (podstrona "Oferta")
  • css/ (folder na pliki CSS)
    • style.css
  • images/ (folder na obrazy)
  • js/ (folder na skrypty JavaScript)

Anatomia strony HTML: Krótkie przypomnienie kluczowych znaczników

Każdy dokument HTML5 zaczyna się od deklaracji </code>, która informuje przeglądarkę o wersji języka. Następnie mamy główny znacznik , w którym zagnieżdżone są dwie sekcje: i . Sekcja zawiera metadane strony (np. tytuł, kodowanie znaków), które nie są widoczne bezpośrednio na stronie, ale są kluczowe dla jej działania i SEO. Natomiast cała widoczna zawartość strony, od nagłówków po stopki, znajduje się w sekcji .

Współczesne strony internetowe opierają się na semantycznych znacznikach HTML5, które znacznie poprawiają czytelność kodu i są lepiej interpretowane przez wyszukiwarki. Dzięki nim, ja i inni deweloperzy, możemy łatwiej zrozumieć strukturę strony, a roboty indeksujące lepiej ją skategoryzować. To naprawdę ważne!

• : Reprezentuje nagłówek strony lub sekcji. Często zawiera logo, tytuł strony i nawigację.
• : Służy do grupowania głównych linków nawigacyjnych.
• : Zawiera główną, unikalną treść dokumentu. Na każdej stronie powinien być tylko jeden znacznik
  .
• : Grupuje tematycznie powiązane treści w dokumencie.
• : Reprezentuje samodzielną, niezależną treść, taką jak wpis na blogu czy artykuł.
• : Reprezentuje stopkę strony lub sekcji, często zawiera informacje o prawach autorskich, linki do polityki prywatności czy dane kontaktowe.

Krok 1: Tworzenie strony głównej serca Twojego projektu

Zaczynamy od pliku index.html, który jest absolutnie kluczowy. To właśnie ten plik jest domyślnie ładowany przez serwery, gdy ktoś wpisuje adres Twojej domeny. Można powiedzieć, że to wizytówka Twojej strony i punkt wejścia dla większości użytkowników. Dlatego tak ważne jest, aby był dobrze zorganizowany i zawierał podstawową strukturę, którą będziemy powielać na innych podstronach.

     

 
 
Witaj na Mojej Stronie!
  
 
 
 
Odkryj naszą ofertę
 
Jesteśmy firmą z pasją, która tworzy innowacyjne rozwiązania dla Twojego biznesu. Zapraszamy do zapoznania się z tym, co mamy do zaoferowania.
 
 
 
Dlaczego my?
 
Stawiamy na jakość, doświadczenie i indywidualne podejście do każdego klienta.
 
 
 

Pierwsze linki: Jak dodać odnośniki, które (na razie) prowadzą donikąd?

Zauważyłeś pewnie, że w sekcji nawigacji użyłem atrybutu href="#". To bardzo przydatna sztuczka! Symbol # oznacza, że link prowadzi do bieżącej strony, ale nie przewija jej do żadnego konkretnego elementu. Jest to doskonały sposób na zaplanowanie struktury menu, zanim jeszcze stworzymy faktyczne podstrony. Dzięki temu od razu widzimy, jak będzie wyglądać nasza nawigacja, nawet jeśli linki nie są jeszcze funkcjonalne. To pozwala mi na wczesne testowanie układu i estetyki.

Krok 2: Czas na podstrony jak sklonować i dostosować kolejne sekcje?

Teraz, gdy mamy już solidny szkielet strony głównej, tworzenie podstron będzie dziecinnie proste. Najefektywniejszym sposobem jest po prostu skopiowanie pliku index.html i zmiana jego nazwy, na przykład na o-nas.html. Dzięki temu automatycznie zachowujemy spójną strukturę nagłówka (

Po skopiowaniu pliku index.html do o-nas.html, musimy oczywiście zmienić jego zawartość. Skupiamy się na sekcji

     

 
  
 
 
 
Nasza historia i misja
  
Jesteśmy zespołem pasjonatów z wieloletnim doświadczeniem w branży. Naszą misją jest dostarczanie innowacyjnych rozwiązań, które przekraczają oczekiwania klientów.
 
 
 
Nasz zespół
  
Poznaj ludzi, którzy stoją za sukcesem naszej firmy. Każdy z nas wnosi unikalne umiejętności i perspektywę.
 
 
 

W ten sam sposób możesz stworzyć kolejne podstrony, takie jak kontakt.html czy oferta.html. Zawsze pamiętaj o zmianie tytułu i treści w sekcji

Krok 3: Magia łączenia jak sprawić, by nawigacja ożyła

Teraz dochodzimy do sedna, czyli do ożywienia naszej nawigacji. Sekret tkwi w atrybucie href znacznika . Zamiast używać href="#", teraz wpiszemy tam dokładne nazwy plików naszych podstron. Jeśli wszystkie pliki (index.html, o-nas.html, kontakt.html, oferta.html) znajdują się w tym samym głównym folderze, wystarczy podać samą nazwę pliku, np. O nas. To jest przykład ścieżki względnej, która jest najprostsza i najbardziej efektywna dla plików w tej samej lokalizacji. Ja zawsze staram się używać ścieżek względnych, bo są bardziej elastyczne i łatwiejsze do zarządzania.

Kiedy już poprawisz wszystkie linki w menu nawigacyjnym w pliku index.html, musisz wykonać jeden, absolutnie kluczowy krok: skopiuj dokładnie ten sam kod menu (całą sekcję

Przeczytaj również: Kolor tła HTML z CSS: 3 metody, gradienty i sekrety pro dewelopera

Najczęstsze pułapki i błędy: Jak ich unikać, tworząc stronę z podstronami?

Nawet doświadczonym deweloperom zdarzają się błędy, a początkujący często wpadają w te same pułapki. Najczęstszym problemem są niedziałające linki. Zazwyczaj wynika to z prostych przeoczeń. Zawsze upewnij się, że nazwa pliku w atrybucie href jest identyczna z faktyczną nazwą pliku na dysku. Literówka, nawet mała, może sprawić, że link nie zadziała. Zwróć też uwagę na wielkość liter, bo na niektórych serwerach ma to znaczenie.

• Literówki w nazwach plików: Sprawdź dokładnie, czy nazwa pliku w href zgadza się z nazwą pliku na dysku (np. o-nas.html vs. onas.html).
• Błędne ścieżki dostępu: Jeśli pliki są w podfolderach, upewnij się, że ścieżka jest poprawna (np. strony/o-nas.html lub ../index.html).
• Brak spójnego menu: Zapominanie o skopiowaniu zaktualizowanego menu do wszystkich podstron to częsty błąd.
• Niespójne nazewnictwo: Unikaj spacji i polskich znaków w nazwach plików używaj małych liter i myślników (np. o-nas.html zamiast O Nas.html).

Kolejną ważną kwestią jest spójność wizualna. Aby wszystkie podstrony wyglądały tak samo (te same czcionki, kolory, układ), musimy użyć zewnętrznego arkusza stylów CSS. Tworzymy jeden plik, np. style.css (w podfolderze css), a następnie podłączamy go do sekcji każdego pliku HTML. Dzięki temu jedna zmiana w pliku CSS automatycznie zaktualizuje wygląd wszystkich podstron. To ogromna wygoda i standard w branży!

Co dalej? Rozwijaj swoją nową stronę internetową

Gratulacje! Właśnie stworzyłeś swoją pierwszą spójną stronę internetową z podstronami i działającą nawigacją. To solidne fundamenty. Następnym krokiem jest stylizacja za pomocą CSS. Zewnętrzny plik style.css, który już podłączyłeś, to miejsce, gdzie nadasz swojej stronie wygląd: zmienisz kolory, czcionki, rozmiary, układ elementów. Na przykład, możesz dodać prosty styl, aby nagłówki były czerwone:

/* W pliku css/style.css */
h1, h2 { color: #FF0000; /* Czerwony kolor */ font-family: Arial, sans-serif;
}

Pamiętaj, że to, czego się nauczyłeś, to podstawa. W miarę zdobywania doświadczenia, prawdopodobnie zaczniesz eksplorować bardziej zaawansowane techniki, takie jak responsywny design (aby strona dobrze wyglądała na różnych urządzeniach) czy interaktywność za pomocą JavaScriptu. Warto też wiedzieć, że większe projekty często korzystają z systemów zarządzania treścią (CMS), takich jak WordPress, które budują strony w oparciu o szablony. Jednak nawet te zaawansowane narzędzia opierają się na tych samych fundamentach HTML, CSS i JavaScript, które właśnie poznałeś. Trzymaj tak dalej!