Jak zrobić stronę internetową w HTML? Poradnik od podstaw

Witaj na blogu programisty. Jeśli chcesz stworzyć swoją pierwszą stronę internetową, HTML jest najlepszym miejscem startu. Nie potrzebujesz drogiego programu, zaawansowanego komputera ani gotowego systemu CMS. Wystarczy prosty edytor kodu, przeglądarka i chęć testowania. Dzięki temu szybko zobaczysz, jak z kilku znaczników powstaje działająca strona.

W tym poradniku przeprowadzę Cię przez cały proces krok po kroku. Zobaczysz, jakie pliki przygotować, jak wygląda podstawowy szkielet HTML, gdzie dodać treść, menu oraz stopkę, a także jak użyć CSS, aby strona nie była tylko białym dokumentem z tekstem. Po drodze poznasz dobre praktyki, które ułatwią Ci dalszą naukę tworzenia stron internetowych.

Streszczenie artykułu:

• Dowiesz się, czym jest HTML i dlaczego warto zacząć właśnie od niego.
• Przygotujesz folder projektu oraz pliki index.html i style.css.
• Napiszesz podstawowy szkielet strony internetowej.
• Dodasz nagłówek, menu, treść, linki i stopkę.
• Ostylizujesz stronę za pomocą prostych reguł CSS.
• Sprawdzisz, jak uniknąć typowych błędów początkujących.

Ten artykuł jest dla Ciebie, jeśli dopiero zaczynasz naukę tworzenia stron, chcesz wykonać prostą stronę na informatykę, planujesz zrozumieć podstawy HTML i CSS albo chcesz świadomie wejść w świat frontend developmentu bez przeskakiwania najważniejszych fundamentów.

Czym jest HTML i dlaczego warto od niego zacząć?

HTML to język znaczników, który pozwala opisać strukturę strony internetowej. To właśnie dzięki niemu przeglądarka wie, gdzie znajduje się nagłówek, akapit, obrazek, link, lista lub stopka. HTML nie odpowiada za efektowne animacje ani za logikę aplikacji, ale bez niego trudno mówić o prawdziwym tworzeniu stron.

Kiedy zaczynasz od HTML, uczysz się fundamentów internetu. Widzisz, jak dokument jest zbudowany od środka i rozumiesz, dlaczego przeglądarka wyświetla konkretny element w konkretnym miejscu. To ważne, ponieważ później łatwiej będzie Ci pracować z CSS, JavaScriptem, frameworkami oraz systemami CMS.

Prosta strona w HTML nie musi być idealna wizualnie. Na początku ważniejsze jest to, abyś zrozumiał zależność między kodem a efektem w przeglądarce. Dzięki temu nie uczysz się na pamięć przypadkowych fragmentów, tylko zaczynasz myśleć jak twórca stron.

HTML warto połączyć z CSS już na pierwszym etapie nauki. HTML tworzy strukturę, a CSS odpowiada za wygląd. Dzięki temu możesz zmieniać kolory, szerokości, odstępy, rozmiary tekstu oraz rozmieszczenie elementów. To prosty sposób, aby Twoja pierwsza strona zaczęła wyglądać bardziej czytelnie.

Jakie narzędzia są potrzebne do stworzenia strony w HTML?

Do stworzenia pierwszej strony wystarczy Ci edytor tekstu i przeglądarka internetowa. Możesz użyć systemowego Notatnika, ale wygodniejszym wyborem będzie edytor kodu, na przykład Visual Studio Code lub Notepad++. Takie narzędzia podświetlają składnię, pomagają zauważyć błędy i ułatwiają pracę z wieloma plikami.

Przeglądarka, taka jak Chrome, Firefox, Edge lub Safari, posłuży Ci do sprawdzania efektów. Nie musisz od razu kupować hostingu ani domeny. Stronę możesz uruchomić lokalnie, klikając dwukrotnie plik index.html. Dopiero gdy zechcesz pokazać ją innym osobom w internecie, potrzebny będzie serwer.

Na start przygotuj prostą strukturę projektu. Najlepiej utwórz jeden folder, w którym znajdą się wszystkie pliki. Dzięki temu unikniesz problemów ze ścieżkami do arkusza CSS, grafik i podstron. Porządek w projekcie jest ważny nawet wtedy, gdy tworzysz tylko ćwiczeniową stronę.

Przygotuj następujące pliki:

• index.html, czyli główny plik strony.
• style.css, czyli arkusz stylów odpowiedzialny za wygląd.
• omnie.html, jeśli chcesz dodać prostą podstronę.
• Folder img, jeśli planujesz używać własnych obrazów.

Na początku nie komplikuj projektu. Jeden plik HTML i jeden plik CSS w zupełności wystarczą, aby zrozumieć podstawy. Gdy nauczysz się tworzyć proste elementy, możesz dodać kolejne podstrony, obrazy, formularze i bardziej rozbudowane menu.

Jak przygotować pierwszy plik HTML?

Najpierw utwórz folder projektu, na przykład moja-strona. W środku utwórz plik index.html. To standardowa nazwa pliku głównego, którą serwery internetowe rozpoznają jako stronę startową. Następnie otwórz plik w edytorze kodu i wklej podstawowy szkielet dokumentu.

Podstawowy dokument HTML składa się z deklaracji typu dokumentu, znacznika html, sekcji head oraz sekcji body. W sekcji head umieszczasz informacje techniczne, a w sekcji body treść widoczną dla użytkownika. To rozróżnienie jest bardzo ważne, ponieważ pomaga utrzymać porządek w kodzie.

Przykładowy szkielet strony wygląda tak:

<!doctype html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <title>Moja pierwsza strona</title>
</head>
<body>
  <h1>Witaj na mojej stronie</h1>
  <p>To jest moja pierwsza strona internetowa w HTML.</p>
</body>
</html>

Zwróć uwagę na lang="pl", ponieważ informuje przeglądarkę i wyszukiwarki, że strona jest w języku polskim. Ważny jest też zapis utf-8, który pozwala poprawnie wyświetlać polskie znaki. Linia z style.css łączy stronę z arkuszem stylów.

Po zapisaniu pliku otwórz go w przeglądarce. Zobaczysz nagłówek i krótki akapit. To bardzo prosty efekt, ale właśnie w ten sposób działa większość nauki frontendu. Piszesz kod, zapisujesz plik, odświeżasz przeglądarkę i sprawdzasz, co się zmieniło.

Jak dodać strukturę strony, menu i stopkę?

Sama treść to za mało, aby strona była wygodna w użyciu. Potrzebujesz podstawowej struktury, która pomoże użytkownikowi zrozumieć, gdzie się znajduje i jak może przejść do innych części witryny. Najprostszy układ może zawierać nagłówek, menu, główną treść i stopkę.

Do budowania bloków możesz użyć znacznika div, choć z czasem warto poznawać także znaczniki semantyczne, takie jak header, nav, main i footer. Na początku div jest jednak wystarczający, bo łatwo nadać mu klasę i ostylizować go w CSS.

Przykład prostej struktury strony:

<!doctype html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <title>Moja pierwsza strona</title>
</head>
<body>
  <div class="top">
    <h1>Moja strona</h1>
  </div>

  <div class="menu">
    <a href="index.html">Strona główna</a>
    <a href="omnie.html">O mnie</a>
  </div>

  <div class="content">
    <h2>Witaj na mojej stronie</h2>
    <p>Uczę się tworzyć strony internetowe w HTML i CSS.</p>
  </div>

  <div class="footer">
    Moja strona internetowa 2026
  </div>
</body>
</html>

Linki tworzysz za pomocą znacznika a. Atrybut href wskazuje miejsce, do którego użytkownik zostanie przeniesiony po kliknięciu. Może to być inna podstrona, adres zewnętrzny albo wybrana sekcja tej samej strony.

Dzięki klasom, takim jak top, menu, content i footer, możesz później łatwo zmienić wygląd każdego bloku. To lepsze rozwiązanie niż mieszanie treści i wyglądu w jednym miejscu. Od początku uczysz się oddzielać strukturę od prezentacji, co jest jedną z najważniejszych zasad tworzenia stron.

Jak dodać CSS i poprawić wygląd strony?

CSS sprawia, że Twoja strona zaczyna wyglądać bardziej estetycznie. Możesz ustawić tło, marginesy, ramki, kolory, szerokość treści, wielkość tekstu oraz odstępy między elementami. Nawet kilka prostych reguł potrafi zmienić surowy dokument HTML w czytelną stronę.

Utwórz plik style.css w tym samym folderze, w którym znajduje się index.html. Następnie upewnij się, że w pliku HTML masz poprawne połączenie z arkuszem stylów. Odpowiada za to linia <link rel="stylesheet" href="style.css">, która znajduje się w sekcji head.

Przykładowy kod CSS:

body {
  background: #f4f4f4;
  margin: auto;
  max-width: 1000px;
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

.top {
  background: #dddddd;
  border: 2px solid #bbbbbb;
  padding: 30px;
  margin: 20px 0;
  text-align: center;
}

.menu,
.footer {
  background: #eeeeee;
  border: 2px solid #cccccc;
  padding: 12px;
  text-align: center;
}

.menu a {
  color: #6b1d1d;
  font-weight: bold;
  margin: 0 10px;
  text-decoration: none;
}

.content {
  background: #ffffff;
  padding: 20px;
  margin: 20px 0;
}

Najważniejsze właściwości CSS, które warto znać na start:

• background ustawia tło elementu.
• margin dodaje odstęp na zewnątrz elementu.
• padding dodaje odstęp wewnątrz elementu.
• border tworzy ramkę.
• color zmienia kolor tekstu.
• font-size zmienia rozmiar tekstu.
• text-align ustawia wyrównanie treści.

Po zapisaniu pliku CSS odśwież stronę w przeglądarce. Jeśli nic się nie zmieniło, sprawdź nazwę pliku, rozszerzenie i ścieżkę w href. Bardzo częsty błąd początkujących to zapisanie pliku jako style.css.txt, przez co przeglądarka nie widzi arkusza stylów.

Jak stworzyć drugą podstronę w HTML?

Gdy masz już stronę główną, możesz dodać kolejną podstronę. Najłatwiej skopiować plik index.html, wkleić go w tym samym folderze i zmienić nazwę kopii na omnie.html. Następnie zmień tytuł, nagłówek H1 oraz treść w sekcji głównej.

Dzięki temu nie musisz pisać całej struktury od zera. Zachowujesz to samo menu, ten sam wygląd i tę samą stopkę. To naturalny sposób pracy przy prostych stronach statycznych. Musisz tylko pamiętać, że jeśli zmienisz menu, trzeba poprawić je w każdym pliku HTML osobno.

Przykład podstrony omnie.html:

<!doctype html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <title>O mnie</title>
</head>
<body>
  <div class="top">
    <h1>O mnie</h1>
  </div>

  <div class="menu">
    <a href="index.html">Strona główna</a>
    <a href="omnie.html">O mnie</a>
  </div>

  <div class="content">
    <h2>Kim jestem?</h2>
    <p>Nazywam się Jan i uczę się tworzenia stron internetowych.</p>
    <p>Na tej stronie opisuję swoje pierwsze kroki w HTML i CSS.</p>
  </div>

  <div class="footer">
    Moja strona internetowa 2026
  </div>
</body>
</html>

Po zapisaniu pliku kliknij link O mnie w menu strony głównej. Jeśli przeglądarka pokazuje błąd, sprawdź, czy nazwa pliku w href jest identyczna z nazwą pliku w folderze. Wielkość liter, polskie znaki i spacje mogą powodować problemy, dlatego najlepiej używać prostych nazw bez ogonków.

Z czasem możesz rozwinąć projekt o kolejne podstrony, na przykład kontakt.html, projekty.html lub blog.html. Każda z nich może korzystać z tego samego arkusza CSS, dzięki czemu cała witryna zachowa spójny wygląd.

Czego unikać podczas tworzenia pierwszej strony?

Najczęstszym błędem jest brak porządku w plikach. Jeśli raz zapiszesz obraz w jednym folderze, arkusz CSS w innym, a plik HTML jeszcze gdzie indziej, szybko pogubisz się w ścieżkach. Na początku trzymaj wszystko w jednym projekcie i nazywaj pliki jasno oraz konsekwentnie.

Drugim problemem jest kopiowanie dużych fragmentów kodu bez zrozumienia. Możesz korzystać z przykładów, ale po każdym wklejeniu sprawdź, co robi dany znacznik i dana właściwość CSS. W przeciwnym razie strona może działać przypadkiem, a Ty nie będziesz wiedzieć, jak ją naprawić.

Unikaj też zbyt wielu kolorów, fontów i efektów. Pierwsza strona powinna być przede wszystkim czytelna. Jasne tło, kontrastowy tekst, proste menu i logiczna struktura są ważniejsze niż ozdobniki. Użytkownik ma szybko zrozumieć, gdzie kliknąć i co przeczytać.

Przed publikacją sprawdź szczególnie:

• Czy plik główny nazywa się index.html.
• Czy arkusz CSS jest poprawnie podłączony.
• Czy linki prowadzą do istniejących plików.
• Czy polskie znaki wyświetlają się prawidłowo.
• Czy strona jest czytelna na telefonie.
• Czy wszystkie znaczniki HTML są domknięte.

Warto także otworzyć stronę w kilku przeglądarkach i zmniejszyć szerokość okna. Dzięki temu zobaczysz, czy treść nadal wygląda poprawnie. Nawet prosta strona powinna być przygotowana z myślą o użytkownikach komputerów i smartfonów.

Jak opublikować stronę HTML w internecie?

Gdy strona działa lokalnie, możesz pokazać ją innym osobom. Do tego potrzebujesz hostingu, czyli miejsca na serwerze, oraz domeny, jeśli chcesz mieć własny adres. W przypadku nauki możesz skorzystać z darmowego hostingu albo prostych platform do publikowania statycznych stron.

Publikacja polega zwykle na przesłaniu plików na serwer. Możesz użyć programu FTP, na przykład FileZilla, albo panelu plików dostępnego u dostawcy hostingu. Najważniejsze jest to, aby plik index.html trafił do głównego katalogu strony, ponieważ to on zostanie otwarty jako pierwszy.

Jeśli korzystasz z hostingu, zwróć uwagę na strukturę katalogów. Pliki HTML, CSS i obrazy muszą zachować poprawne ścieżki. Jeśli lokalnie obraz był w folderze img, taki sam folder powinien znaleźć się na serwerze. W przeciwnym razie przeglądarka nie znajdzie pliku.

Na późniejszym etapie możesz zainteresować się GitHub Pages, Netlify lub Vercel. To wygodne rozwiązania dla statycznych stron HTML, CSS i JavaScript. Dzięki nim nauczysz się także podstaw pracy z repozytorium, wersjonowaniem kodu i wdrażaniem projektu online.

Podsumowanie

Stworzenie strony internetowej w HTML jest prostsze, niż może się wydawać, ale wymaga cierpliwości i regularnego testowania. Zaczynasz od folderu projektu, tworzysz plik index.html, dodajesz podstawowy szkielet dokumentu, uzupełniasz treść i łączysz stronę z arkuszem style.css. To niewiele plików, ale właśnie na nich opiera się Twoje pierwsze praktyczne zrozumienie działania stron internetowych.

Najważniejsze jest to, aby nie skupiać się wyłącznie na efekcie wizualnym. Na początku uczysz się struktury, poprawnego zapisu, linkowania plików i rozdzielania HTML od CSS. Gdy opanujesz te podstawy, łatwiej przejdziesz do responsywności, JavaScriptu, formularzy, dostępności i bardziej zaawansowanych projektów. Traktuj pierwszą stronę jak fundament, na którym zbudujesz kolejne umiejętności.

FAQ – Najczęściej zadawane pytania

Czy można zrobić stronę HTML w Notatniku?

Tak, możesz zrobić stronę HTML w zwykłym Notatniku. Musisz jednak zapisać plik z rozszerzeniem .html, a nie .txt. Wygodniejszym rozwiązaniem będzie edytor kodu, ponieważ podświetla składnię i pomaga szybciej zauważyć błędy.

Czy do stworzenia strony HTML potrzebuję internetu?

Nie, prostą stronę możesz stworzyć i uruchomić lokalnie na komputerze. Internet będzie potrzebny dopiero wtedy, gdy zechcesz pobrać narzędzia, użyć zewnętrznych zasobów albo opublikować stronę online.

Czym różni się HTML od CSS?

HTML odpowiada za strukturę strony, czyli nagłówki, akapity, linki, obrazy i inne elementy. CSS odpowiada za wygląd, czyli kolory, odstępy, ramki, szerokości, fonty i rozmieszczenie elementów.

Dlaczego moja strona nie widzi pliku CSS?

Najczęściej problemem jest zła nazwa pliku, błędna ścieżka albo zapisanie pliku jako style.css.txt. Sprawdź, czy plik CSS znajduje się w tym samym folderze co index.html i czy w HTML masz zapis href="style.css".

Czy jedna strona może mieć kilka plików HTML?

Tak, każda podstrona może być osobnym plikiem HTML. Możesz mieć na przykład index.html, omnie.html i kontakt.html. Wszystkie te pliki mogą korzystać z jednego arkusza style.css.

Czy HTML wystarczy do stworzenia nowoczesnej strony?

Sam HTML wystarczy do stworzenia prostej statycznej strony, ale nowoczesne witryny zwykle korzystają też z CSS i JavaScriptu. HTML jest jednak koniecznym fundamentem, bez którego trudno rozwijać się jako frontend developer.