Prosta strona internetowa nie wymaga od razu frameworków, serwera ani zaawansowanej wiedzy programistycznej. Wystarczy edytor kodu, przeglądarka i dobrze ułożony dokument HTML, a potem odrobina CSS, żeby całość wyglądała jak prawdziwa witryna. Pokażę, jak przygotować plik, dodać treść, zadbać o wygląd, sprawdzić stronę na telefonie i opublikować ją w internecie.

Co naprawdę jest potrzebne do stworzenia strony HTML

HTML to język znaczników, który opisuje strukturę dokumentu. Dzięki niemu przeglądarka wie, co jest nagłówkiem, akapitem, obrazem, linkiem albo formularzem. Sam HTML nie odpowiada jednak za pełny wygląd witryny. Do tego służy CSS, a do dynamicznych zachowań, takich jak rozwijane menu czy walidacja formularza, używa się zwykle JavaScriptu.

Na początek nie potrzebujesz płatnego programu. Ja najczęściej polecam bezpłatny edytor kodu z kolorowaniem składni oraz dowolną nowoczesną przeglądarkę. Możesz też użyć zwykłego Notatnika, ale przy większej liczbie znaczników szybko zacznie brakować podpowiedzi, automatycznego formatowania i kontroli błędów.

Na etapie nauki możesz pracować całkowicie lokalnie, czyli otwierać plik bezpośrednio na komputerze. Hosting nie jest potrzebny do pisania kodu. Przydaje się dopiero wtedy, gdy strona ma być dostępna publicznie pod własnym adresem.

Jak utworzyć pierwszy plik i nadać mu poprawną strukturę

Utwórz folder, na przykład moja-strona, a w nim plik o nazwie index.html. Ta nazwa jest powszechnie używana jako plik startowy witryny. Zwróć uwagę, żeby system nie zapisał dokumentu jako „index.html.txt”. W systemie Windows warto włączyć wyświetlanie rozszerzeń plików.

Poniższy fragment pokazuje podstawową zawartość strony. Przeglądarka rozpozna deklarację HTML5, kodowanie znaków, tytuł karty oraz główną treść dokumentu.

  
Pracownia fotografii
  
Zdjęcia, które opowiadają historię.



  
Oferta
  
Wykonuję sesje portretowe i produktowe.

Znaczniki zapisane w nawiasach ostrych tworzą elementy dokumentu. Element nagłówka h1 powinien opisywać główny temat strony, a kolejne poziomy, takie jak h2 i h3, porządkują dalszą treść. Nie wybieraj nagłówka tylko dlatego, że ma większy rozmiar. Za wygląd odpowiada CSS, a hierarchia nagłówków powinna wynikać z logiki tekstu.

Aby zobaczyć efekt, zapisz plik i otwórz go dwukrotnym kliknięciem. Po każdej zmianie odśwież stronę w przeglądarce. To prosty cykl pracy, który bardzo dobrze działa przy pierwszych projektach: edytujesz, zapisujesz, odświeżasz i sprawdzasz.

Jak ułożyć treść, żeby strona była czytelna

Dobra strona HTML nie jest przypadkowym zbiorem akapitów. Treść warto podzielić na logiczne części, używając elementów takich jak header, nav, main, section, article i footer. Dzięki temu kod jest łatwiejszy do rozwijania, a technologie wspomagające mogą lepiej odczytać układ witryny.

Przeczytaj również: Jak zrobić hiperłącze w HTML - proste przykłady i wskazówki

Najważniejsze elementy treści

• h1 oznacza główny temat strony i zwykle występuje raz.
• h2 oraz h3 dzielą materiał na sekcje i podsekcje.
• p służy do zwykłych akapitów.
• ul lub ol porządkują listy punktowane i numerowane.
• a tworzy odnośniki do innych podstron lub miejsc w dokumencie.
• img dodaje obraz, który powinien mieć opis alternatywny.

Przykładowa sekcja oferty może wyglądać tak:

  
Usługi
  

    
Sesje portretowe
    
Zdjęcia produktów
    
Reportaże z wydarzeń
  

Przy obrazach nie pomijaj atrybutu alt. Powinien krótko opisywać zawartość grafiki, na przykład „portret kobiety w studio”. Jeśli obraz pełni wyłącznie funkcję dekoracyjną, pusty atrybut alt jest lepszy niż przypadkowy opis. To drobny szczegół, który wpływa na dostępność i jakość strony.

Linki powinny informować, dokąd prowadzą. Tekst „kliknij tutaj” niewiele mówi, natomiast „zobacz cennik sesji” jest zrozumiały także poza pełnym kontekstem akapitu. W praktyce właśnie takie małe decyzje odróżniają uporządkowaną stronę od dokumentu stworzonego wyłącznie na szybko.

Jak dodać wygląd za pomocą CSS

Czysty HTML jest funkcjonalny, ale zazwyczaj wygląda surowo. CSS pozwala ustawić kolory, szerokości, odstępy, kroje pisma i układ elementów. Najlepiej utworzyć osobny plik style.css, ponieważ oddzielenie treści od prezentacji ułatwia późniejsze zmiany.

Przykładowy arkusz może nadać stronie prosty, nowoczesny wygląd:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #202124;
  background: #f4f6f8;
}

header,
main,
footer {
  width: min(92%, 960px);
  margin: 0 auto;
}

header {
  padding: 64px 0 32px;
}

main {
  padding: 24px 0 64px;
}

h1,
h2 {
  line-height: 1.2;
}

footer {
  padding: 24px 0;
  border-top: 1px solid #d7dce1;
}

Arkusz trzeba połączyć z dokumentem HTML za pomocą elementu linkującego styl. Jeśli po zapisaniu nie widzisz zmian, najpierw sprawdź nazwę pliku i ścieżkę do niego. Literówka w nazwie style.css jest jednym z najczęstszych powodów, dla których początkujący widzą wyłącznie biały dokument.

Nie zaczynałbym od dziesiątek efektów i animacji. Największą różnicę zwykle robią dobrze dobrane odstępy, czytelny kontrast, ograniczona liczba kolorów i sensowna szerokość tekstu. Strona może wyglądać profesjonalnie bez skomplikowanych sztuczek.

Jak sprawić, żeby strona działała na telefonie

W 2026 roku projektowanie wyłącznie pod ekran komputera jest złym założeniem. Strona powinna reagować na szerokość ekranu, czyli stosować responsywny układ. Pomaga w tym meta viewport oraz elastyczne jednostki, takie jak procenty, rem i vw, zamiast sztywnych szerokości ustawionych w pikselach.

Prosta reguła CSS może zmienić układ elementów na mniejszych ekranach:

.cards {
  display: flex;
  gap: 24px;
}

.card {
  flex: 1;
  padding: 24px;
  background: white;
}

@media (max-width: 700px) {
  .cards {
    flex-direction: column;
  }

  header {
    padding-top: 36px;
  }

  h1 {
    font-size: 2rem;
  }
}

Po dodaniu stylów sprawdź stronę nie tylko przez zmniejszanie okna, lecz także w narzędziach deweloperskich przeglądarki. Przetestuj co najmniej szerokości około 360, 768 i 1280 pikseli. Zwróć uwagę na nachodzące na siebie elementy, zbyt mały tekst, poziome przewijanie i przyciski, w które trudno trafić palcem.

Responsywność nie oznacza, że każda wersja musi wyglądać identycznie. Na telefonie menu może być prostsze, kolumny mogą układać się pionowo, a duże zdjęcia powinny zmniejszać się wraz z ekranem. Liczy się wygoda korzystania, nie kopiowanie układu jeden do jednego.

Jak dodać obrazy, formularz i podstawową interakcję

Obrazy przechowuj w osobnym folderze, na przykład images, i używaj krótkich, opisowych nazw plików. W kodzie ścieżka powinna odpowiadać rzeczywistej strukturze katalogów. Jeśli plik znajduje się w folderze images, zapis images/portfolio.jpg będzie poprawny, a portfolio.jpg może już nie zadziałać.

Formularz kontaktowy można przygotować w HTML, ale sam formularz nie wysyła jeszcze wiadomości. Potrzebny jest mechanizm po stronie serwera albo zewnętrzna usługa. To ważne rozróżnienie, bo wiele osób zakłada, że po dodaniu przycisku „Wyślij” wiadomość automatycznie trafi do skrzynki.

  Imię
  

  Adres e-mail
  

  Wiadomość
  

  Wyślij wiadomość

JavaScript dodasz dopiero wtedy, gdy naprawdę jest potrzebny. Dla prostej wizytówki nie ma sensu obciążać strony rozbudowanymi bibliotekami. Najpierw poprawna struktura i czytelny interfejs, dopiero potem efekty, walidacja w czasie rzeczywistym czy dynamiczne komponenty.

Jak przetestować i opublikować gotową stronę

Przed publikacją przejrzyj stronę jak zwykły użytkownik. Kliknij każdy link, sprawdź formularz, otwórz obrazy, zmień szerokość okna i zobacz, czy tytuł karty opisuje właściwą podstronę. Dobrze jest także uruchomić walidator HTML oraz sprawdzić kontrast tekstu i widoczność elementów po przejściu klawiszem Tab.

Typowe błędy początkujących są dość powtarzalne:

• plik został zapisany z rozszerzeniem .html.txt,
• ścieżka do obrazu lub arkusza CSS jest niepoprawna,
• znacznik został otwarty, ale nie został zamknięty,
• na stronie brakuje tekstu alternatywnego przy obrazach,
• układ ma stałą szerokość i na telefonie pojawia się przewijanie poziome,
• formularz wygląda poprawnie, ale nie ma żadnej obsługi po stronie serwera.

Do publikacji potrzebujesz domeny oraz hostingu. Domena to adres strony, a hosting przechowuje jej pliki i udostępnia je przeglądarkom. Przy małej wizytówce wystarczy podstawowy pakiet współdzielony, który zwykle kosztuje około 100-300 zł rocznie. Trzeba jednak sprawdzić cenę odnowienia domeny, bo promocja w pierwszym roku może znacznie różnić się od późniejszej opłaty.

Jeśli tworzysz wyłącznie statyczną stronę, nie potrzebujesz od razu CMS-a ani rozbudowanego serwera. Własny kod daje więcej nauki i kontroli, ale wymaga ręcznego poprawiania treści. Kreator lub CMS przyspiesza publikację, za to ogranicza swobodę i może generować zbędny kod. Wybór zależy od tego, czy ważniejsza jest dla Ciebie nauka, szybkość czy łatwa edycja przez inne osoby.

Co rozwijać po pierwszej stronie HTML

Pierwszy projekt potraktuj jako działający prototyp, nie jako produkt końcowy. Kiedy strona już działa, dodaj osobny arkusz CSS, popraw wersję mobilną, uporządkuj nazwy plików i usuń nieużywane fragmenty. Dopiero później przejdź do Flexboxa, CSS Grid, JavaScriptu i narzędzi automatyzujących pracę.

Moim zdaniem najlepsza ścieżka nauki prowadzi przez kilka małych projektów. Zbuduj kolejno prostą wizytówkę, portfolio, stronę artykułu i formularz kontaktowy. Każdy z tych projektów ćwiczy inny element tworzenia witryn, a przy okazji pokazuje, że dobry kod nie musi być skomplikowany.

Najważniejsza zasada brzmi prosto: najpierw zadbaj o treść, strukturę i wygodę użytkownika, a dopiero potem o efektowne dodatki. Dzięki temu nawet niewielka strona napisana od podstaw będzie szybka, zrozumiała i gotowa do dalszego rozwoju.