Ten artykuł to praktyczny przewodnik dla początkujących, który krok po kroku wyjaśni, jak stworzyć drugą stronę HTML i połączyć ją ze stroną główną. Dowiesz się, jak zbudować podstawową nawigację w swojej witrynie, co jest fundamentalną umiejętnością w tworzeniu każdej strony internetowej. Z mojego doświadczenia wynika, że to właśnie ten moment, kiedy zaczynamy myśleć o kilku stronach, otwiera przed nami prawdziwe możliwości tworzenia rozbudowanych serwisów.

Dlaczego jedna strona to za mało? Krótkie wprowadzenie do witryn wielostronicowych

Zastanawiałeś się kiedyś, dlaczego większość stron internetowych, które odwiedzasz, nie składa się tylko z jednej, długiej strony? Odpowiedź jest prosta: organizacja i użyteczność. Tworzenie witryn wielostronicowych to absolutna podstawa, jeśli chcesz, aby Twój projekt był funkcjonalny i przyjazny dla użytkownika. Wyobraź sobie, że wszystkie informacje o firmie, jej ofercie, danych kontaktowych i galerii zdjęć są na jednej, niekończącej się stronie to byłby koszmar nawigacyjny!

Dzięki podziałowi treści na oddzielne podstrony, użytkownik może łatwo znaleźć to, czego szuka, bez konieczności przewijania kilometrów tekstu. To znacznie poprawia doświadczenie użytkownika (UX), a także pozwala na przedstawienie bardziej szczegółowych informacji w zorganizowany sposób. Typowe podstrony, które często tworzymy, to na przykład "O nas", gdzie opowiadamy historię firmy, "Kontakt" z formularzem i danymi, "Oferta" prezentująca produkty czy usługi, a także "Galeria" ze zdjęciami. Każda z nich ma swój cel i swoją treść, a ich połączenie tworzy spójną całość.

Krok 1: Tworzymy plik dla Twojej drugiej strony prościej niż myślisz!

Zaczynamy od podstaw, czyli od stworzenia nowego pliku HTML. To jest naprawdę proste i nie wymaga żadnych zaawansowanych narzędzi. Wystarczy edytor tekstu, taki jak Visual Studio Code, Sublime Text, czy nawet zwykły Notatnik.

1. Stwórz nowy plik: W tym samym folderze, w którym masz już swój plik `index.html` (czyli stronę główną), utwórz nowy plik. Nazwij go na przykład `o-nas.html`. Ważne jest, aby oba pliki znajdowały się w tym samym katalogu to uprości późniejsze linkowanie.
2. Dodaj podstawową strukturę HTML: Każdy nowy plik HTML musi zawierać podstawową strukturę dokumentu. Skopiuj poniższy kod i wklej go do swojego nowo utworzonego pliku `o-nas.html`. Zwróć uwagę na tag `

   

 
Witaj na stronie "O nas"!
 
Tutaj znajdziesz informacje o naszej firmie.

Teraz masz już dwa niezależne pliki HTML. Prawda, że to było proste? Ale jak sprawić, żeby "wiedziały" o swoim istnieniu? O tym właśnie za chwilę!

Magia łączenia, czyli jak sprawić, by strony "wiedziały" o swoim istnieniu

Kluczem do łączenia stron w HTML jest znacznik ``, czyli tak zwana kotwica (ang. anchor). To on odpowiada za tworzenie hiperłączy, które przenoszą użytkownika z jednej strony na drugą. Najważniejszym atrybutem znacznika `` jest `href` (ang. Hypertext Reference), który określa cel linku czyli adres strony, do której chcemy przekierować użytkownika.

Aby połączyć Twoją stronę główną (`index.html`) z nowo utworzoną podstroną (`o-nas.html`), musisz dodać link na stronie głównej. Otwórz plik `index.html` i w sekcji `

` dodaj coś takiego:

O nas

Teraz, gdy otworzysz `index.html` w przeglądarce, zobaczysz tekst "O nas", który będzie działał jako link. Kliknięcie w niego przeniesie Cię do pliku `o-nas.html`.

Jednak, co jeśli użytkownik znajdzie się na stronie "O nas" i będzie chciał wrócić do strony głównej? Musimy dodać link powrotny! Otwórz plik `o-nas.html` i w sekcji `

` dodaj:

Strona główna

W ten sposób stworzyłeś dwukierunkowe połączenie między Twoimi stronami. To jest właśnie fundament nawigacji w każdej witrynie internetowej!

Najczęstsze pułapki i błędy, na które musisz uważać

Jako ktoś, kto widział wiele początkowych projektów, mogę powiedzieć, że pewne błędy powtarzają się nagminnie. Pamiętaj, że diabeł tkwi w szczegółach, a w kodzie HTML nawet najmniejsza literówka może sprawić, że coś nie zadziała.

• Literówki to Twój wróg numer jeden! Jeśli nazwa pliku to `o-nas.html`, a w atrybucie `href` wpiszesz `o_nas.html` lub `onas.html`, link po prostu nie zadziała. Przeglądarka wyświetli wtedy błąd "404 Not Found", ponieważ nie będzie w stanie znaleźć wskazanego zasobu. Zawsze dokładnie sprawdzaj pisownię nazw plików i wartości atrybutów `href`. To jedna z najczęstszych przyczyn frustracji początkujących!
• Tajemnica ścieżek względnych. Właśnie użyłeś ścieżki względnej (np. `href="o-nas.html"`). Oznacza to, że przeglądarka szuka pliku `o-nas.html` w tym samym folderze, w którym znajduje się aktualnie wyświetlany plik. To najlepsza metoda do linkowania wewnętrznego w ramach jednego projektu. Dlaczego? Bo sprawia, że Twoja strona jest przenośna. Jeśli kiedyś przeniesiesz cały folder z projektem na inny serwer lub do innej lokalizacji na dysku, linki nadal będą działać, ponieważ relacja między plikami pozostaje taka sama. Unikaj na tym etapie ścieżek bezwzględnych (np. `href="C:/moj_projekt/o-nas.html"`), bo te działają tylko na Twoim komputerze!
• Błędy zagnieżdżenia i zamykania tagów. Pamiętaj, że każdy otwarty tag HTML (np. ``, `

  `, `

  `) musi zostać poprawnie zamknięty (np. `

  `, ``, ``). Niewłaściwe zagnieżdżenie tagów lub ich brakujące zamknięcie może spowodować, że przeglądarka źle zinterpretuje strukturę strony, co prowadzi do nieprzewidywalnych problemów z wyświetlaniem. Dobry edytor kodu często pomaga w ich wykrywaniu, ale zawsze warto samemu zwracać na to uwagę.

Idziemy o krok dalej: budowa spójnej nawigacji na całej stronie

Kiedy masz już kilka podstron, naturalnym krokiem jest stworzenie spójnego menu nawigacyjnego. Do tego celu w HTML służy semantyczny znacznik `

Najczęściej menu nawigacyjne tworzy się za pomocą nieuporządkowanej listy (`

`) z elementami listy (`
• `), z których każdy zawiera link (``). Oto przykład, jak mogłoby wyglądać takie menu, zawierające linki do strony głównej, strony "O nas" i hipotetycznej strony "Kontakt":

  Aby zapewnić spójność i ułatwić użytkownikom poruszanie się po Twojej witrynie, ten sam blok kodu nawigacji powinien być skopiowany i wklejony na każdej podstronie. Umieść go zazwyczaj na początku sekcji `

  `, zaraz po nagłówku lub logo strony. Dzięki temu, niezależnie od tego, na której podstronie się znajdzie, użytkownik zawsze będzie miał dostęp do wszystkich kluczowych sekcji Twojej witryny.

  Co dalej? Twoja droga po stworzeniu drugiej strony HTML

  Gratulacje! Właśnie stworzyłeś swoją pierwszą witrynę wielostronicową i opanowałeś podstawy nawigacji. To duży krok! Ale to oczywiście nie koniec Twojej przygody z web developmentem. Oto kilka pomysłów na to, co możesz zrobić dalej, aby rozwijać swoje umiejętności:

  1. Otwieranie linków w nowej karcie: Czasem chcesz, aby kliknięcie w link nie zamykało Twojej strony, ale otwierało nową kartę w przeglądarce. Służy do tego atrybut `target="_blank"`. Pamiętaj jednak, aby dla bezpieczeństwa zawsze dodawać również atrybut `rel="noopener noreferrer"`, szczególnie przy linkach do zewnętrznych stron. Chroni to Twoich użytkowników przed potencjalnymi atakami phishingowymi.

  Otwórz w nowej karcie

  2. Stylizowanie za pomocą CSS: Twoje linki i menu nawigacyjne na razie wyglądają dość prosto, prawda? To dlatego, że HTML odpowiada za strukturę i treść, a za wygląd CSS (Cascading Style Sheets). Następnym naturalnym krokiem jest nauka podstaw CSS, aby nadać Twojej nawigacji i całej stronie atrakcyjny wygląd. Możesz zmienić kolory, czcionki, dodać efekty najechania myszką (hover) i wiele więcej. CSS to potężne narzędzie, które całkowicie odmieni Twoje projekty. Zachęcam Cię do dalszej nauki w tym kierunku to naprawdę satysfakcjonujące, gdy widzisz, jak Twoje strony nabierają życia!