Witaj w świecie tworzenia stron internetowych! Jeśli zastanawiasz się, jak rozbudować swoją witrynę o nowe treści, ten praktyczny przewodnik krok po kroku pokaże Ci, jak samodzielnie dodać nową podstronę HTML. Dowiesz się, jak stworzyć plik, połączyć go z resztą strony i zintegrować z menu nawigacyjnym, nawet jeśli dopiero zaczynasz swoją przygodę z kodowaniem. Z mojego doświadczenia wiem, że to jeden z pierwszych, ale i najważniejszych kroków w budowaniu funkcjonalnej i przyjaznej użytkownikowi witryny.

Zanim zaczniesz: Fundamenty, które musisz przygotować

Zanim zanurkujemy w kod, musimy upewnić się, że masz przygotowane odpowiednie narzędzia i rozumiesz podstawowe zasady organizacji plików. Wierzę, że dobra organizacja to podstawa każdego projektu, a w tworzeniu stron internetowych jest to szczególnie ważne, aby uniknąć frustracji i błędów w przyszłości.

Czego potrzebujesz do stworzenia pierwszej podstrony? Niezbędne narzędzia

Na szczęście, aby zacząć tworzyć strony HTML, nie potrzebujesz drogiego oprogramowania. W zasadzie wystarczą Ci trzy rzeczy:

1. Edytor tekstu: To program, w którym będziesz pisać swój kod. Zdecydowanie polecam darmowe i potężne narzędzia takie jak Visual Studio Code (mój osobisty faworyt), Sublime Text lub Notepad++. Oferują one podświetlanie składni, autouzupełnianie i wiele innych funkcji, które znacznie ułatwiają pracę. Możesz oczywiście użyć nawet zwykłego Notatnika, ale będzie to mniej wygodne.
2. Przeglądarka internetowa: Do testowania swoich stron. Dowolna nowoczesna przeglądarka, taka jak Google Chrome, Mozilla Firefox, Microsoft Edge czy Safari, będzie idealna. Pamiętaj, aby regularnie odświeżać stronę w przeglądarce po każdej zmianie w kodzie.
3. Podstawowa wiedza o systemie plików: Czyli umiejętność tworzenia folderów i plików na Twoim komputerze. To naprawdę wszystko!

Jak wygląda prawidłowa struktura folderów na stronie? Planowanie przed kodowaniem

Prawidłowa struktura folderów to klucz do utrzymania porządku i łatwej nawigacji w projekcie. Wyobraź sobie, że budujesz dom nie rzucasz wszystkich materiałów w jedno miejsce, prawda? Podobnie jest ze stroną internetową. Z mojego doświadczenia wynika, że uporządkowana struktura zapobiega błędom, takim jak niedziałające linki czy brak stylów, i ułatwia późniejsze rozwijanie witryny.

Typowa, prosta struktura dla statycznej strony internetowej może wyglądać tak:

• mojastrona/ (główny folder projektu)
  • index.html (strona główna)
  • o-nas.html (przykładowa podstrona)
  • kontakt.html (kolejna podstrona)
  • /css/ (folder na pliki CSS)
    • style.css
  • /js/ (folder na pliki JavaScript, jeśli będziesz ich używać)
    • script.js
  • /images/ (folder na pliki graficzne)
    • logo.png
    • hero-image.jpg

Jak widzisz, każdy typ zasobów ma swoje miejsce. To znacznie ułatwia zarządzanie projektem i szybkie odnajdywanie potrzebnych plików.

Krok 1: Tworzenie nowego pliku narodziny Twojej podstrony

Teraz, gdy masz już przygotowane narzędzia i wiesz, jak powinna wyglądać struktura projektu, przejdźmy do sedna stworzenia Twojej pierwszej nowej podstrony. To jest moment, w którym zaczynasz budować coś namacalnego!

Jak poprawnie utworzyć i nazwać plik HTML?

Proces jest prosty:

1. Otwórz swój ulubiony edytor tekstu (np. Visual Studio Code).
2. Utwórz nowy plik (zazwyczaj "Plik" -> "Nowy plik" lub Ctrl+N/Cmd+N).
3. Zapisz go od razu. To bardzo ważne! Wybierz "Plik" -> "Zapisz jako..." (lub Ctrl+S/Cmd+S).

Tutaj pojawia się kluczowa kwestia: nazewnictwo pliku. Zawsze stosuj następujące zasady:

• Małe litery: Wszystkie nazwy plików i folderów pisz małymi literami. Systemy operacyjne i serwery różnie traktują wielkość liter (np. O-NAS.html i o-nas.html to dla nich dwa różne pliki!), co może prowadzić do błędów 404.
• Myślniki zamiast spacji: Nigdy nie używaj spacji w nazwach plików. Zamiast tego używaj myślników (-). Np. o-nas.html, a nie o nas.html.
• Rozszerzenie `.html`: Upewnij się, że plik ma rozszerzenie `.html` (lub `.htm`). To informuje przeglądarkę, że ma do czynienia z dokumentem HTML.
• Opisowe nazwy: Nadawaj plikom nazwy, które jasno opisują ich zawartość, np. kontakt.html, uslugi.html, galeria.html.

Na przykład, jeśli tworzysz podstronę "O nas", nazwij ją o-nas.html.

Gotowy szkielet HTML5: Skopiuj ten kod, by zacząć

Każdy dokument HTML5 powinien zaczynać się od podstawowego "szkieletu". To fundament, na którym będziesz budować całą treść. Skopiuj poniższy kod i wklej go do swojego nowo utworzonego pliku o-nas.html:

   

  
Witaj na stronie O nas!
 
To jest nowa podstrona.

Co oznaczają te linijki kodu?

• </code>: Deklaruje, że jest to dokument HTML5.
• : Główny element HTML, informujący przeglądarkę o języku strony (tutaj polskim).
• : Zawiera metadane o stronie, które nie są bezpośrednio widoczne dla użytkownika, ale są ważne dla przeglądarek i wyszukiwarek.
• : Określa kodowanie znaków, aby polskie znaki (ą, ę, ć itp.) wyświetlały się poprawnie.
• : Ważne dla responsywności strony na różnych urządzeniach.
• : Tytuł strony, który pojawia się w zakładce przeglądarki. To bardzo ważne dla SEO!
• : Tutaj znajduje się cała widoczna zawartość Twojej strony tekst, obrazy, linki, itp.

Gdzie zapisać nowy plik, aby wszystko działało?

Zgodnie z omówioną wcześniej strukturą folderów, nowy plik o-nas.html najlepiej zapisać bezpośrednio w głównym folderze projektu, obok pliku index.html. Jeśli masz bardzo dużą witrynę i chcesz pogrupować podstrony tematycznie, możesz stworzyć dla nich osobne podkatalogi (np. mojastrona/oferta/webdesign.html), ale na początek trzymaj się prostszej struktury.

Upewnij się, że plik jest zapisany w odpowiednim miejscu, zanim przejdziesz dalej. To klucz do tego, by linki działały poprawnie!

Krok 2: Magia łączenia, czyli jak sprawić, by strony się widziały

Stworzenie podstrony to jedno, ale sprawienie, by użytkownicy mogli na nią trafić, to już inna sprawa. Tutaj wkracza do akcji linkowanie serce nawigacji po każdej stronie internetowej. Bez linków Twoja strona będzie zbiorem odizolowanych dokumentów, a przecież chcemy, aby stanowiła spójną całość.

Znacznik `` i atrybut `href` Twój klucz do nawigacji

Za tworzenie linków w HTML odpowiada znacznik , czyli "anchor" (kotwica). Najważniejszym jego atrybutem jest href (hypertext reference), który wskazuje adres docelowy linku. To właśnie w nim podajesz, dokąd ma prowadzić kliknięcie.

Podstawowa składnia wygląda tak:

Tekst, który jest linkiem

Tekst lub element umieszczony między a staje się klikalny.

Ścieżki względne vs. bezwzględne: Której użyć i dlaczego to ważne?

To jeden z najczęstszych punktów, w których początkujący popełniają błędy. Zrozumienie różnicy między ścieżkami względnymi a bezwzględnymi jest fundamentalne dla prawidłowego linkowania.

• Ścieżki bezwzględne (absolutne): To pełne adresy URL, zaczynające się od protokołu (np. https://). Używasz ich, gdy linkujesz do stron zewnętrznych lub gdy chcesz być absolutnie pewien, że link zadziała niezależnie od tego, gdzie znajduje się plik, z którego linkujesz. Przykład:

  Przejdź do Google
  O nas (link bezwzględny)
  

• Ścieżki względne (relatywne): To adresy, które wskazują lokalizację pliku w stosunku do pliku, w którym się aktualnie znajdujesz. Są one zdecydowanie zalecane do linkowania wewnętrznego w obrębie Twojej witryny! Dlaczego? Bo jeśli zmienisz nazwę domeny lub przeniesiesz całą stronę na inny serwer, linki względne nadal będą działać, ponieważ "względna" relacja między plikami pozostaje taka sama. Przykład:

  • Jeśli linkujesz z index.html do o-nas.html (oba w tym samym folderze):

    O nas
    

  • Jeśli linkujesz z index.html do pliku style.css (który jest w folderze css/):

  • Jeśli linkujesz z o-nas.html (w głównym folderze) do pliku logo.png (w folderze images/):

  • Jeśli linkujesz z pliku webdesign.html (który jest w folderze oferta/) z powrotem do index.html (który jest folder wyżej):

    Strona główna
    

    Dwa kropki (..) oznaczają "idź folder wyżej".

Zawsze staraj się używać ścieżek względnych dla linków wewnętrznych!

Praktyczny przykład: Link ze strony głównej do podstrony i z powrotem

Spójrzmy na praktyczne zastosowanie. Załóżmy, że masz plik index.html (strona główna) i właśnie stworzyłeś o-nas.html.

W pliku index.html, w sekcji , dodaj link do nowej podstrony:

Witaj na naszej stronie głównej! Chcesz dowiedzieć się więcej o nas?

Następnie, w pliku o-nas.html, dodaj link powrotny do strony głównej:

Witaj na stronie O nas!
Jesteśmy firmą z pasją... Wróć do strony głównej.

Zapisz oba pliki, otwórz index.html w przeglądarce i przetestuj linki. Powinny działać bez zarzutu!

Krok 3: Dodajemy podstronę do menu, by użytkownik ją znalazł

Linkowanie pojedynczych fragmentów tekstu to dobry początek, ale aby Twoja strona była naprawdę funkcjonalna, nowa podstrona musi znaleźć się w głównym menu nawigacyjnym. To kluczowy element, który pozwala użytkownikom łatwo poruszać się po całej witrynie. Z mojego doświadczenia wiem, że intuicyjne menu to podstawa dobrego User Experience (UX).

Jak zbudowane jest typowe menu w HTML? Struktura `nav` i `ul/li`

Standardowe menu nawigacyjne w HTML wykorzystuje semantyczne znaczniki, które pomagają przeglądarkom i wyszukiwarkom zrozumieć strukturę strony. Najczęściej spotkasz się z taką konstrukcją:

• : Semantyczny znacznik wskazujący, że zawartość w nim to główna nawigacja strony.
• (unordered list): Lista nieuporządkowana, idealna do grupowania elementów menu.
• (list item): Każdy element listy, czyli pojedynczy link w menu.
• : Sam link, który omówiliśmy w poprzednim kroku.

Taka struktura jest łatwa do ostylowania za pomocą CSS, aby wyglądała jak poziome lub pionowe menu.

Wklejamy nowy link: Praktyczny przykład aktualizacji nawigacji

Jeśli masz już takie menu na swojej stronie głównej (index.html) i chcesz dodać do niego link do nowej podstrony o-nas.html, wystarczy wstawić nowy element