Ten artykuł to praktyczny przewodnik dla początkujących, który krok po kroku wyjaśnia, jak stworzyć prostą stronę internetową, używając wyłącznie języka HTML. Dowiesz się, od czego zacząć, jakie narzędzia są potrzebne i jak zbudować swój pierwszy projekt od podstaw.

Dlaczego HTML to fundament, od którego warto zacząć?

Zacznijmy od podstaw. HTML, czyli HyperText Markup Language, to język znaczników, który stanowi absolutny fundament każdej strony internetowej. To właśnie HTML definiuje strukturę i treść, którą widzisz w przeglądarce. Wyobraź sobie stronę internetową jako budynek HTML jest jego szkieletem. Bez niego nie ma ścian, podłóg ani dachu. To on mówi przeglądarce, co jest nagłówkiem, co akapitem, gdzie znajduje się obrazek, a gdzie link. Zrozumienie HTML to pierwszy i najważniejszy krok w świecie tworzenia stron.

HTML, CSS i JavaScript: Trzy filary internetu

Często początkujący mylą HTML z CSS i JavaScriptem, ale to trzy zupełnie różne, choć współpracujące ze sobą technologie. Pozwól, że wyjaśnię różnice, używając prostej analogii:

• HTML (HyperText Markup Language): To jak szkielet i konstrukcja budynku. Odpowiada za strukturę strony i jej treść gdzie są nagłówki, paragrafy, obrazy, linki.
• CSS (Cascading Style Sheets): To jak wystrój wnętrz i elewacja. Odpowiada za wygląd strony kolory, czcionki, rozmiary, marginesy, układ elementów. Bez CSS strona wyglądałaby bardzo surowo i nieatrakcyjnie.
• JavaScript: To jak instalacje i automatyka w budynku. Odpowiada za interaktywność i zachowanie strony dynamiczne elementy, animacje, formularze, reakcje na kliknięcia użytkownika.

Jak widzisz, każda z tych technologii ma swoją unikalną rolę, ale razem tworzą kompletną i funkcjonalną stronę internetową.

Czy w 2026 roku tworzenie stron w samym HTML ma jeszcze sens?

Absolutnie tak! Mimo że nowoczesne strony internetowe niemal zawsze wykorzystują również CSS i JavaScript, to właśnie HTML5 jest wciąż aktualnym standardem i niezmienną podstawą. Bez HTML żadna strona nie może istnieć. Zrozumienie jego zasad, znaczników i semantyki jest kluczowe, jeśli chcesz w ogóle myśleć o dalszym rozwoju w kierunku front-endu. Nie da się budować skomplikowanych konstrukcji, nie znając podstawowych praw fizyki. Tak samo nie da się tworzyć zaawansowanych aplikacji webowych, nie opanowując HTML.

Twój warsztat pracy na start: Jakie narzędzia są niezbędne?

Dobra wiadomość jest taka, że do rozpoczęcia przygody z HTML nie potrzebujesz żadnych drogich ani skomplikowanych narzędzi. Wystarczą Ci dwie podstawowe, darmowe rzeczy:

1. Edytor tekstu: To program, w którym będziesz pisać swój kod HTML.
2. Przeglądarka internetowa: To program, w którym będziesz oglądać efekty swojej pracy (np. Google Chrome, Mozilla Firefox, Microsoft Edge).

I to tyle! Naprawdę, to wszystko, czego potrzebujesz na początek.

Wybór edytora kodu: Czy zwykły Notatnik wystarczy?

Technicznie rzecz biorąc, możesz pisać kod HTML nawet w zwykłym Notatniku (na Windowsie) czy TextEdit (na macOS). Na samym początku, aby zrozumieć, że kod to po prostu tekst, może to być nawet pouczające. Jednak szybko zauważysz, że takie proste edytory nie oferują żadnych udogodnień. Nie podpowiadają znaczników, nie kolorują składni, nie wskazują błędów. Dlatego moim zdaniem, warto od razu sięgnąć po coś bardziej zaawansowanego.

Visual Studio Code jako rekomendacja dla początkujących

Moja osobista rekomendacja dla każdego początkującego to Visual Studio Code (VS Code). Jest to darmowy, potężny i niezwykle popularny edytor kodu, używany przez miliony deweloperów na całym świecie. Dlaczego VS Code?

• Jest darmowy i dostępny na wszystkie popularne systemy operacyjne (Windows, macOS, Linux).
• Oferuje kolorowanie składni, co sprawia, że kod jest znacznie czytelniejszy.
• Posiada funkcję autouzupełniania, która znacząco przyspiesza pisanie kodu.
• Ma ogromną liczbę rozszerzeń (dodatków), które ułatwiają pracę (np. Live Server do podglądu strony na żywo).
• Ma wsparcie dużej społeczności, co oznacza mnóstwo poradników i rozwiązań problemów.

To naprawdę świetny wybór na start i na długie lata programistycznej kariery.

Jak skonfigurować środowisko pracy w 5 minut?

Skonfigurowanie VS Code do pracy z HTML jest dziecinnie proste. Oto krótki przewodnik:

1. Pobierz i zainstaluj Visual Studio Code: Wejdź na oficjalną stronę code.visualstudio.com i pobierz instalator dla swojego systemu operacyjnego. Proces instalacji jest standardowy.
2. Stwórz nowy folder na projekty HTML: Na pulpicie lub w dowolnym innym miejscu na dysku stwórz nowy folder, np. "Moje_Strony_HTML". To będzie Twoje centrum dowodzenia dla wszystkich projektów.
3. Otwórz folder w VS Code: Uruchom VS Code, przejdź do "File" (Plik) -> "Open Folder..." (Otwórz folder...) i wybierz stworzony przed chwilą folder.
4. Stwórz nowy plik z rozszerzeniem `.html`: W VS Code, w panelu po lewej stronie, kliknij ikonę "New File" (Nowy plik) i nazwij go np. `index.html`. Rozszerzenie `.html` jest kluczowe! Mówi ono systemowi i przeglądarce, że to plik HTML.
5. Otwórz plik `.html` w przeglądarce: Po zapisaniu pliku, możesz go otworzyć bezpośrednio z folderu, klikając dwukrotnie. Domyślnie otworzy się w Twojej przeglądarce internetowej.

Gratulacje! Masz już gotowe środowisko do pisania swojej pierwszej strony HTML.

Szkielet strony: Odkrywamy anatomię dokumentu HTML

Każdy dokument HTML5 ma obowiązkową, podstawową strukturę, którą można nazwać jego "szkieletem". To jest punkt wyjścia dla każdej strony. Oto jak wygląda:

</code>










Kod HTML to jak szkielet budynku definiuje jego konstrukcję i rozmieszczenie elementów, zanim jeszcze dodamy ściany (CSS) czy instalacje (JavaScript).

Przyjrzyjmy się teraz poszczególnym elementom tego szkieletu.

Sekcja ``: Co kryje się "za kulisami" Twojej strony?

Sekcja `

• ``: Ten tag informuje przeglądarkę o kodowaniu znaków użytych na stronie. UTF-8 to standard i zapewnia prawidłowe wyświetlanie wszystkich znaków, w tym polskich liter (ą, ę, ć, ł itd.). Bez tego tagu możesz mieć problemy z "krzaczkami".
• ``: Tekst umieszczony w tym tagu to tytuł Twojej strony, który pojawia się w zakładce przeglądarki. Jest również bardzo ważny dla SEO (pozycjonowania w wyszukiwarkach).

Sekcja ``: Gdzie umieszczać całą widoczną treść?

Sekcja `` to serce Twojej strony, jeśli chodzi o widoczną treść. Wszystko, co chcesz, aby użytkownik zobaczył nagłówki, paragrafy, obrazy, linki, listy, formularze musi znajdować się wewnątrz znaczników `` i ``. To tutaj będziesz spędzać najwięcej czasu, budując zawartość swojej witryny.

Znaczenie deklaracji `` i atrybutu `lang="pl"`

Dwa małe, ale ważne elementy, które często są pomijane przez początkujących:

• ``: To nie jest znacznik HTML, ale deklaracja typu dokumentu. Musi być zawsze na samej górze pliku. Informuje przeglądarkę, że ma do czynienia z dokumentem HTML5. Bez tej deklaracji przeglądarka może próbować renderować stronę w "trybie zgodności", co może prowadzić do nieoczekiwanych problemów z wyglądem.
• `lang="pl"` w tagu ``: Ten atrybut określa główny język treści strony. Jest ważny dla wyszukiwarek (pomaga im zrozumieć, w jakim języku jest strona), dla narzędzi do tłumaczenia oraz dla technologii wspomagających, takich jak czytniki ekranowe dla osób niewidomych. W naszym przypadku ustawiamy go na "pl" dla języka polskiego.

Podstawowe znaczniki HTML, które musisz poznać

Skoro mamy już szkielet, czas na "cegiełki", czyli podstawowe znaczniki HTML, które pozwolą Ci zbudować widoczną treść. To absolutne minimum, które każdy początkujący powinien opanować.

Nagłówki `

` - `

`: Jak poprawnie hierarchizować treść?

Nagłówki służą do strukturyzowania treści i nadawania jej hierarchii. Mamy ich sześć poziomów, od `

` (najważniejszy) do `

` (najmniej ważny). Ważne jest, aby używać ich zgodnie z ich przeznaczeniem, a nie tylko do formatowania tekstu (do tego służy CSS!).

To jest główny nagłówek strony

Pamiętaj, że na stronie powinien być tylko jeden `

`

Paragrafy `

` i linki ``: Podstawy tekstu i nawigacji

Paragrafy to podstawowy sposób na umieszczanie bloków tekstu na stronie. Znacznik `

` tworzy nowy akapit.

Linki (hiperłącza) to to, co sprawia, że internet jest "siecią". Znacznik `` służy do tworzenia linków. Kluczowym atrybutem jest `href`, który określa adres docelowy linku.

Odwiedź moją ulubioną stronę!

Możesz również dodać atrybut `target="_blank"` aby link otwierał się w nowej karcie przeglądarki.

Odwiedź moją ulubioną stronę!

Jak wstawić obrazek `` i dlaczego atrybut `alt` jest kluczowy?

Obrazki ożywiają stronę. Znacznik `` służy do wstawiania obrazów. Jest to znacznik samodomykający się, co oznacza, że nie ma znacznika zamykającego ``.

Kluczowe atrybuty to:

• `src`: Określa źródło pliku obrazu (ścieżkę do niego).
• `alt`: To tekst alternatywny, który wyświetla się, gdy obrazek się nie załaduje, lub jest czytany przez czytniki ekranowe. Jest niezwykle ważny dla dostępności (osoby niewidome) i SEO (wyszukiwarki "rozumieją", co jest na obrazku).

Pamiętaj, aby plik `moj-obrazek.jpg` znajdował się w tym samym folderze co Twój plik HTML, lub podaj do niego poprawną ścieżkę.

Listy `

` i `

`: Porządkowanie informacji w czytelny sposób

Listy to świetny sposób na uporządkowanie informacji. Mamy dwa główne typy:

• `
  ` (unordered list): Lista nienumerowana, czyli z punktorami.
• `
  ` (ordered list): Lista numerowana.

Każdy element listy musi być umieszczony w znaczniku `

Lista nienumerowana:

Lista numerowana:

Kontenery `

` i ``: Kiedy i jak grupować elementy?

Znaczniki `

` i `` to ogólne kontenery, które nie mają własnego, semantycznego znaczenia. Służą głównie do grupowania elementów, aby później łatwiej było je stylizować za pomocą CSS lub manipulować nimi za pomocą JavaScriptu.

• `
  `: Jest to element blokowy. Oznacza to, że domyślnie zajmuje całą dostępną szerokość i tworzy nową linię przed i po sobie. Używamy go do grupowania większych sekcji strony.
• ``: Jest to element liniowy. Nie tworzy nowej linii i zajmuje tylko tyle miejsca, ile potrzebuje jego zawartość. Używamy go do grupowania mniejszych fragmentów tekstu wewnątrz akapitów.


Moja sekcja


To jest ważny fragment tekstu w paragrafie.



Stwórzmy pierwszą stronę WWW: Praktyczny tutorial krok po kroku

Teoria to jedno, ale praktyka to podstawa! Teraz, gdy znasz już podstawowe znaczniki i strukturę dokumentu HTML, czas na stworzenie Twojej pierwszej, prostej strony internetowej. To moment, aby zastosować całą zdobytą wiedzę.

Krok 1: Stworzenie pliku `index.html` i podstawowej struktury

Otwórz Visual Studio Code (lub inny edytor kodu) i w folderze, który przygotowałeś, stwórz nowy plik o nazwie `index.html`. Następnie wklej do niego podstawową strukturę HTML5:

</code>










Zapisz plik (Ctrl+S lub Cmd+S).

Krok 2: Dodanie nagłówka, kilku akapitów i listy zainteresowań

Teraz wypełnij sekcję `` treścią. Dodaj nagłówek `

`, dwa akapity `

` i listę nienumerowaną `

` z kilkoma elementami `
• `. Twój kod powinien wyglądać tak:

  </code>








  Witaj na mojej pierwszej stronie!

  
  

  Cześć! Nazywam się Oskar Kwiatkowski i to jest moja pierwsza strona internetowa stworzona w czystym HTML.

  
  

  Uczę się programowania i jestem bardzo podekscytowany możliwościami, jakie daje tworzenie stron WWW.

  
  

  Moje zainteresowania:

  
  
  
  
• Programowanie


• Gry komputerowe


• Książki science-fiction







Zapisz plik.

Krok 3: Wstawienie zdjęcia i dodanie linku do ulubionej strony

Teraz dodajmy obrazek i link. Aby dodać obrazek, potrzebujesz pliku graficznego. Skopiuj dowolny obrazek (np. `zdjecie.jpg`) do tego samego folderu, w którym masz `index.html`. Następnie dodaj kod obrazka i linka:

</code>








Witaj na mojej pierwszej stronie!




Cześć! Nazywam się Oskar Kwiatkowski i to jest moja pierwsza strona internetowa stworzona w czystym HTML.




Uczę się programowania i jestem bardzo podekscytowany możliwościami, jakie daje tworzenie stron WWW.





Moje zainteresowania:





• Programowanie


• Gry komputerowe


• Książki science-fiction




Sprawdź mój profil na GitHubie!





Zastąp `TwojaNazwaUzytkownika` swoją rzeczywistą nazwą użytkownika na GitHubie (lub innym adresem).

Krok 4: Zapisanie pliku i otwarcie go w przeglądarce zobacz efekt!

Zapisz plik `index.html` po raz ostatni. Teraz przejdź do folderu, w którym go zapisałeś, i kliknij dwukrotnie na plik `index.html`. Powinien otworzyć się w Twojej domyślnej przeglądarce internetowej! Gratulacje! Stworzyłeś swoją pierwszą stronę WWW! Zobacz, jak wygląda, poeksperymentuj, zmień tekst, dodaj więcej elementów. To najlepszy sposób na naukę.

Semantyka w HTML5: Dlaczego jest ważna dla Google i użytkowników?

W HTML5 wprowadzono coś, co nazywamy semantyką. Oznacza to, że niektóre znaczniki mają wbudowane znaczenie, które opisuje rodzaj treści, którą zawierają. Na przykład, zamiast używać ogólnego `

` do wszystkiego, możemy użyć `









Pierwszy wpis na blogu




Treść mojego wpisu...







© 2026 Oskar Kwiatkowski





Jak poprawna struktura semantyczna wpływa na SEO Twojej strony?

Wyszukiwarki takie jak Google używają zaawansowanych algorytmów do analizowania treści stron internetowych. Gdy używasz znaczników semantycznych, dostarczasz im dodatkowego kontekstu. Na przykład, jeśli Google widzi linki wewnątrz znacznika `

Przykłady dobrego i złego użycia znaczników semantycznych

Aby lepiej zrozumieć, o co chodzi z semantyką, spójrzmy na proste przykłady:

Złe użycie (brak semantyki):




Moje Logo





Home | Kontakt





Tutaj wszystko jest w `

`, co nie mówi przeglądarce nic o funkcji tych elementów.

Dobre użycie (z semantyką):




Moje Logo








Home




Kontakt






W tym przykładzie `

` jasno wskazuje, że to nagłówek strony, a `

Unikaj pułapek: Najczęstsze błędy początkujących

Każdy początkujący popełnia błędy, i to jest całkowicie normalne. Ważne jest, aby wiedzieć, na co zwracać uwagę. Oto kilka najczęstszych pułapek, których możesz uniknąć:

Niezamykanie tagów: Dlaczego to psuje Twoją stronę?

To chyba najczęstszy błąd. Każdy znacznik otwierający (np. `

`) musi mieć swój znacznik zamykający (np. `

`), chyba że jest to znacznik samodomykający się (jak `` czy `
`). Jeśli zapomnisz zamknąć tag, przeglądarka będzie próbowała "zgadnąć", gdzie powinien się kończyć dany element, co często prowadzi do nieprzewidywalnego wyglądu strony lub nawet całkowitego jej "rozsypania". Zawsze sprawdzaj, czy wszystkie tagi są poprawnie zamknięte!

Mylenie ścieżek do plików (obrazków i linków)

Kolejny częsty problem to niepoprawne ścieżki w atrybutach `src` (dla obrazków) lub `href` (dla linków). Jeśli obrazek się nie wyświetla lub link nie działa, najpierw sprawdź ścieżkę! Pamiętaj o różnicy między:

• Ścieżkami względnymi: Odnoszą się do lokalizacji pliku względem aktualnego pliku HTML (np. `` jeśli obrazek jest w podfolderze `obrazki`).
• Ścieżkami absolutnymi: Pełny adres URL (np. ``).

Upewnij się, że nazwy plików i folderów są dokładnie takie same (uwzględniając wielkość liter!) jak w kodzie.

Używanie znaczników niezgodnie z ich przeznaczeniem (np. `

` do layoutu)

Kiedyś, w zamierzchłych czasach internetu, tabele (`

`) były używane do tworzenia układu (layoutu) stron. Dziś to poważny błąd semantyczny i praktyczny. Znacznik `` służy wyłącznie do wyświetlania danych tabelarycznych. Do tworzenia układu strony używamy CSS (np. Flexbox, Grid). Używanie znaczników zgodnie z ich przeznaczeniem jest kluczowe dla semantyki, dostępności i SEO.

Co dalej? Rozwój po opanowaniu podstaw HTML

Gratulacje! Opanowałeś podstawy HTML, stworzyłeś swoją pierwszą stronę i rozumiesz, dlaczego jest to fundament. Ale to dopiero początek ekscytującej podróży. Co dalej?

Czas na styl: Wprowadzenie do CSS i połączenie go z plikiem HTML

Następnym logicznym krokiem jest nauka CSS. To właśnie CSS sprawi, że Twoja strona przestanie wyglądać jak dokument tekstowy, a zacznie przypominać nowoczesną, atrakcyjną witrynę. Nauczysz się zmieniać kolory, czcionki, rozmiary, układać elementy obok siebie, tworzyć responsywne projekty, które dobrze wyglądają na każdym urządzeniu. CSS możesz połączyć z plikiem HTML na kilka sposobów, najczęściej poprzez znacznik `` w sekcji `

`, wskazujący na zewnętrzny plik `.css`:





Krok w stronę interaktywności: Czym jest JavaScript?

Po HTML i CSS przychodzi czas na JavaScript. To język programowania, który dodaje interaktywność i dynamikę do stron. Dzięki JavaScriptowi Twoja strona może reagować na działania użytkownika, wyświetlać animacje, sprawdzać poprawność formularzy, ładować treści bez przeładowywania strony i wiele, wiele więcej. To on sprawia, że strony są "żywe".

Przeczytaj również: Centrowanie obrazu HTML/CSS: Złoty standard i triki pro dewelopera

Gdzie opublikować swoją pierwszą stronę za darmo? (GitHub Pages, Netlify)

Gdy Twoja strona HTML (a później CSS i JavaScript) będzie gotowa, zechcesz ją pokazać światu! Na szczęście istnieje wiele darmowych opcji hostingu statycznych stron, które są idealne dla początkujących:

• GitHub Pages: Jeśli używasz GitHuba do przechowywania swojego kodu (co jest bardzo polecane!), możesz bardzo łatwo opublikować swoją stronę bezpośrednio z repozytorium.
• Netlify: To popularna platforma, która oferuje bardzo prosty proces publikacji statycznych stron. Wystarczy połączyć ją z repozytorium Git, a Netlify automatycznie wdroży Twoją stronę.
• Vercel: Podobnie jak Netlify, Vercel to kolejna świetna opcja do darmowego hostingu statycznych stron, również z łatwą integracją z Git.

Każda z tych platform pozwala na szybkie i bezpłatne umieszczenie Twojego projektu online, dzięki czemu możesz podzielić się nim ze znajomymi lub dodać do swojego portfolio.