Uczen siedzacy przy komputerze i piszacy kod HTML w edytorze tekstowym

HTML dla początkujących – jak zacząć tworzyć strony internetowe krok po kroku

HTML jest podstawowym językiem znacznikowym używanym do tworzenia stron internetowych – każda strona, którą widzisz w przeglądarce, jest zbudowana na fundamencie kodu HTML. Nauka HTML to pierwszy krok każdego początkującego programisty, który chce rozumieć, jak działa sieć. W tym artykule poznasz strukturę pliku HTML, najważniejsze znaczniki, zasady tworzenia formularzy oraz różnicę między HTML, CSS i JavaScript. Kod HTML jest czytelny dla ludzi i maszyn jednocześnie, co sprawia, że nauka programowania od HTML jest logicznym punktem startowym. Poniżej znajdziesz kompletny przewodnik krok po kroku – od pustego pliku tekstowego do działającej strony w przeglądarce.

Spis treści

Czym jest HTML i do czego służy?

HTML (HyperText Markup Language) to język znacznikowy służący do opisywania struktury stron internetowych. Pełna nazwa – HyperText Markup Language – wskazuje na dwie kluczowe cechy: dokumenty HTML mogą zawierać hiperłącza („HyperText”) i używają znaczników do oznaczania treści („Markup Language”). HTML nie jest językiem programowania – nie wykonuje obliczeń ani nie podejmuje decyzji. Jego zadaniem jest poinformowanie przeglądarki internetowej, co jest nagłówkiem, co akapitem, co obrazem, a co odnośnikiem.

Przeczytaj  12 Najczęstszych Problemów z Komputerem i Jak Je Rozwiązać Samemu

Tworzenie stron internetowych zaczyna się od kodu HTML, który tworzy szkielet każdego dokumentu dostępnego w sieci. Konsorcjum W3C (World Wide Web Consortium), kierowane przez twórcę sieci Tim Berners-Lee, odpowiada za standardy języka HTML od 1994 roku. Aktualna specyfikacja HTML5 jest utrzymywana przez grupę roboczą WHATWG (Web Hypertext Application Technology Working Group). Przeglądarka internetowa odczytuje plik HTML i na podstawie użytych znaczników wyświetla sformatowaną stronę – bez HTML żadna strona nie mogłaby istnieć w takiej formie, jaką znamy.

Jak działa plik HTML – struktura dokumentu

Plik HTML to zwykły plik tekstowy zapisany z rozszerzeniem .html (np. `index.html`), który przeglądarka internetowa interpretuje jako dokument hipertekstowy. Struktura każdego dokumentu HTML opiera się na czterech obowiązkowych elementach: deklaracji DOCTYPE, elemencie html, sekcji head oraz sekcji body. Deklaracja DOCTYPE informuje przeglądarkę o wersji języka znacznikowego – w HTML5 jest to prosta linia ``. Element html obejmuje cały dokument. Sekcja head zawiera informacje niewidoczne dla użytkownika, takie jak tytuł strony i kodowanie znaków. Sekcja body zawiera wszystkie treści widoczne na stronie.

Kiedy piszesz kod HTML i zapisujesz plik z rozszerzeniem .html, każda przeglądarka – Google Chrome, Mozilla Firefox, Microsoft Edge – potrafi otworzyć ten plik bez dodatkowego oprogramowania. Separacja między sekcją head (metadane) a sekcją body (treść) to fundament organizacji każdego dokumentu HTML. Początkujący programista, który rozumie tę separację, jest w stanie szybko rozbudowywać swoje pierwsze strony.

Co to jest znacznik HTML i jak go zapisać?

Znacznik HTML (ang. tag) to para nawiasów kątowych otaczających nazwę elementu, która informuje przeglądarkę o roli danego fragmentu treści.

Każdy element HTML składa się ze znacznika otwierającego i znacznika zamykającego. Znacznik otwierający ma postać ``, a znacznik zamykający – `` (z ukośnikiem przed nazwą). Treść między nimi tworzy zawartość elementu.

„`html

To jest akapit tekstu.

To jest blok grupujący treść.
„`

Element `

` to przykład elementu blokowego – zajmuje całą szerokość i zaczyna nową linię. Element `` to przykład elementu liniowego – nie przerywa przepływu tekstu. Niektóre znaczniki są samozamykające, na przykład `
` (podział linii) lub `` (obraz) – nie posiadają znacznika zamykającego, ponieważ nie mają zawartości tekstowej. Znaczniki mogą posiadać atrybuty – dodatkowe właściwości zapisywane wewnątrz znacznika otwierającego, np. `

`.

Obowiązkowe elementy każdej strony – DOCTYPE, html, head, body

Minimalny szkielet poprawnego dokumentu HTML5 wygląda następująco:

Przeczytaj  Quizlet vs Anki - tabela porównawcza i który system fiszek wybrać w 2024 roku

„`html

Moja pierwsza strona

Witaj, świecie!

To jest moja pierwsza strona HTML.

„`

Rola każdego elementu jest ściśle określona:

  • `` – deklaracja informująca przeglądarkę, że dokument używa standardu HTML5. Musi znajdować się w pierwszej linii pliku.
  • `` – element główny obejmujący cały dokument. Atrybut `lang=”pl”` określa język strony, co jest ważne dla czytników ekranowych i wyszukiwarek.
  • `` – sekcja metadanych niewidocznych dla użytkownika. Zawiera tytuł, kodowanie i instrukcje dla przeglądarki.
  • `` – deklaracja kodowania znaków. UTF-8 obsługuje polskie litery (ą, ę, ó, ź, ż, ń, ć, ł, ś), bez tego znaki diakrytyczne mogą wyświetlać się nieprawidłowo.
  • ``</strong> – tytuł strony widoczny w zakładce przeglądarki i w wynikach wyszukiwania Google.</li> <li><strong>`<body>`</strong> – sekcja zawierająca całą treść widoczną dla użytkownika: nagłówki, akapity, obrazy, linki.</li> <h2 class="wp-block-heading"><span id="Jakie_narzedzia_sa_potrzebne_do_pisania_HTML">Jakie narzędzia są potrzebne do pisania HTML?</span></h2> <p>Do pisania kodu HTML wystarczą 2 narzędzia: <strong>edytor tekstu</strong> i <strong>przeglądarka internetowa</strong>. Nie trzeba instalować kosztownego oprogramowania ani środowiska serwerowego. Poniżej lista narzędzi wystarczających dla każdego początkującego programisty:</p> <p><strong>Edytory tekstu dla poczatkujących:</strong></p> <li><strong>Notatnik (Windows)</strong> – zainstalowany domyślnie, wystarczy do pierwszych ćwiczeń z tworzenia stron internetowych. Brak podświetlania składni to jedyna wada.</li> <li><strong>Notepad++</strong> – bezpłatny edytor tekstu dla systemu Windows z podświetlaniem składni HTML, numerowaniem linii i auto-uzupełnianiem znaczników. Rekomendowany dla uczniów zaczynających naukę programowania.</li> <li><strong>Visual Studio Code (VS Code)</strong> – bezpłatny edytor opracowany przez Microsoft, standard branżowy w 2025 roku. Oferuje podgląd na żywo, rozszerzenia i obsługę wielu języków. Dostępny na Windows, macOS i Linux.</li> <li><strong>Sublime Text</strong> – lekki edytor z szybkim ładowaniem, popularny wśród doświadczonych twórców stron.</li> <p><strong>Edytory online (bez instalacji):</strong></p> <li><strong>CodePen</strong> (codepen.io) – edytor w przeglądarce z natychmiastowym podglądem wyników.</li> <li><strong>JSFiddle</strong> (jsfiddle.net) – klasyczny edytor online, nie wymaga rejestracji.</li> <li><strong>Replit</strong> (replit.com) – pełne środowisko programistyczne w przeglądarce.</li> <p>Jeśli chcesz dowiedzieć się więcej o <a href="https://bibliotekawolontariatu.pl/?p=4284">edytory tekstu i formatowanie dokumentow</a>, możesz zapoznać się z naszym poradnikiem dotyczącym narzędzi biurowych.</p> <h2 class="wp-block-heading"><span id="Najwazniejsze_znaczniki_HTML_dla_poczatkujacych">Najważniejsze znaczniki HTML dla początkujących</span></h2> <p>Nauka języka znacznikowego HTML opiera się na znajomości kilkudziesięciu podstawowych znaczników, z których zaledwie 15-20 wystarczy do budowy pierwszych stron. Ta sekcja omawia najczęściej używane elementy: nagłówki, akapity, podziały linii, wyróżnienia tekstu, obrazy oraz odnośniki. Każdy kod HTML składa się z tych samych budulców, dlatego dobra znajomość podstawowego zestawu znaczników daje solidną podstawę do dalszej nauki programowania.</p> <h3 class="wp-block-heading">Znaczniki nagłówków, akapitów i podziału linii</h3> <p>Poniższa tabela przedstawia najważniejsze znaczniki używane przez każdego początkującego programisty:</p> <figure class="wp-block-table"><table style="width:100%;border-collapse:collapse;margin:1.5em 0;font-size:0.95em;box-shadow:0 2px 8px rgba(0,0,0,0.08);border-radius:8px;overflow:hidden"> <thead> <tr> <th style="background:#1a73e8;color:#fff;padding:12px 16px;text-align:left;font-weight:600;border:none">Znacznik</th> <th style="background:#1a73e8;color:#fff;padding:12px 16px;text-align:left;font-weight:600;border:none">Opis</th> <th style="background:#1a73e8;color:#fff;padding:12px 16px;text-align:left;font-weight:600;border:none">Przykład zastosowania</th> </tr> </thead> <tbody> <tr> <td style="padding:10px 16px;border-bottom:1px solid #e8e8e8">`<h1>`</td> <td style="padding:10px 16px;border-bottom:1px solid #e8e8e8">Nagłówek pierwszego poziomu (główny tytuł strony)</td> <td style="padding:10px 16px;border-bottom:1px solid #e8e8e8">Tytuł artykułu</td> </tr> <tr style="background:#f8f9fa"> <td style="padding:10px 16px;border-bottom:1px solid #e8e8e8">`<h2>`</td> <td style="padding:10px 16px;border-bottom:1px solid #e8e8e8">Nagłówek drugiego poziomu</td> <td style="padding:10px 16px;border-bottom:1px solid #e8e8e8">Tytuł sekcji</td> </tr> <tr> <td style="padding:10px 16px;border-bottom:1px solid #e8e8e8">`<h3>` do `<h6>`</td> <td style="padding:10px 16px;border-bottom:1px solid #e8e8e8">Nagłówki niższych poziomów</td> <td style="padding:10px 16px;border-bottom:1px solid #e8e8e8">Podsekcje</td> </tr> <tr style="background:#f8f9fa"> <td style="padding:10px 16px;border-bottom:1px solid #e8e8e8">`<p>`</td> <td style="padding:10px 16px;border-bottom:1px solid #e8e8e8">Akapit tekstu</td> <td style="padding:10px 16px;border-bottom:1px solid #e8e8e8">Treść artykułu</td> </tr> <tr> <td style="padding:10px 16px;border-bottom:1px solid #e8e8e8">`<br>`</td> <td style="padding:10px 16px;border-bottom:1px solid #e8e8e8">Podział linii (samozamykający)</td> <td style="padding:10px 16px;border-bottom:1px solid #e8e8e8">Nowa linia bez nowego akapitu</td> </tr> <tr style="background:#f8f9fa"> <td style="padding:10px 16px;border-bottom:1px solid #e8e8e8">`<strong>`</td> <td style="padding:10px 16px;border-bottom:1px solid #e8e8e8">Tekst pogrubiony (semantycznie ważny)</td> <td style="padding:10px 16px;border-bottom:1px solid #e8e8e8">Kluczowe słowo</td> </tr> <tr> <td style="padding:10px 16px;border-bottom:1px solid #e8e8e8">`<em>`</td> <td style="padding:10px 16px;border-bottom:1px solid #e8e8e8">Tekst pochylony (podkreślenie znaczenia)</td> <td style="padding:10px 16px;border-bottom:1px solid #e8e8e8">Tytuł książki, wyraz obcy</td> </tr> </tbody> </table></figure> <p>Przykład kodu HTML używającego tych znaczników:</p> <p>„`html</p> <h1><span id="Przepis_na_ciasto_czekoladowe">Przepis na ciasto czekoladowe</span></h1> <h2 class="wp-block-heading"><span id="Skladniki">Składniki</span></h2> <p><p>Do przygotowania ciasta potrzebujesz <strong>200 g czekolady</strong>.</p> <p>Czas pieczenia wynosi 40 minut.<br>Temperatura piekarnika: 180 stopni Celsjusza.</p> </p> <h2 class="wp-block-heading"><span id="Przygotowanie">Przygotowanie</span></h2> <p><p>Roztop czekoladę w kąpieli wodnej. Używaj <em>czekolady gorzkiej</em> dla najlepszego smaku.</p> „`</p> <h3 class="wp-block-heading">Jak dodać obraz i odnośnik do strony?</h3> <p><strong>Atrybut</strong> to dodatkowa właściwość znacznika, zapisywana w postaci `nazwa=”wartość”` wewnątrz znacznika otwierającego. Dwa najważniejsze znaczniki wymagające atrybutów to `<img>` (obraz) i `<a>` (odnośnik – link).</p> <p>Znacznik `<img>` wymaga dwóch atrybutów:</p> <li><strong>`src`</strong> – ścieżka do pliku graficznego (adres URL lub ścieżka lokalna)</li> <li><strong>`alt`</strong> – tekstowy opis obrazu, wymagany dla dostępności (czytniki ekranowe dla osób niewidzących odczytują ten tekst) oraz dla wyszukiwarek</li> <p>Znacznik `<a>` wymaga atrybutu:</p> <li><strong>`href`</strong> – adres URL, do którego prowadzi odnośnik</li> <p>„`html <img decoding="async" src="zdjecie-kota.jpg" alt="Rudo-biały kot siedzący na parapecie"></p> <p> <a href="https://www.w3schools.com" target="_blank" rel="noopener">Odwiedź W3Schools</a></p> <p> <a href="https://www.w3.org" target="_blank" rel="noopener">Strona konsorcjum W3C</a> „`</p> <p>Specyfikacja dostępności WCAG 2.1 (Web Content Accessibility Guidelines), opracowana przez W3C, nakazuje stosowanie atrybutu `alt` w każdym elemencie `<img>`. Brak tego atrybutu to jeden z najczęstszych błędów w kodzie HTML.</p> <h2 class="wp-block-heading"><span id="Jak_stworzyc_pierwsza_strone_HTML_8211_przyklad_krok_po_kroku">Jak stworzyć pierwszą stronę HTML – przykład krok po kroku</span></h2> <p>Stworzenie pierwszej strony HTML wymaga wykonania 6 kroków, które prowadzą od pustego edytora do działającej strony w przeglądarce.</p> <p><strong>Krok 1: Otwórz edytor tekstu.</strong> Uruchom Notepad++, VS Code lub zwykły Notatnik systemu Windows. Nie używaj edytorów formatujących tekstu (Microsoft Word), ponieważ dodają one ukryte znaczniki, które psują kod HTML.</p> <p><strong>Krok 2: Wpisz szkielet HTML5.</strong> Na początku każdego pliku HTML wpisz kompletny szkielet dokumentu z deklaracją DOCTYPE, elementem html, sekcją head (z meta charset UTF-8 i tytułem) oraz sekcją body. Minimalny szablon jest gotowy do rozbudowy.</p> <p><strong>Krok 3: Dodaj treść do sekcji body.</strong> Wewnątrz elementu `<body>` wpisz nagłówek `<h1><span id="_kilka_akapitow_i_dowolny_odnosnik_Kazdy_znacznik_otwierajacy_musi_miec_odpowiadajacy_znacznik_zamykajacy__Krok_4_Zapisz_plik_z_rozszerzeniem_html_Wybierz_8222Zapisz_jako8221_i_w_polu_nazwy_pliku_wpisz_indexhtml_Upewnij_sie_ze_typ_pliku_to_8222Wszystkie_pliki8221_nie_txt_Nazwa_indexhtml_to_konwencjonalna_nazwa_strony_glownej__Krok_5_Otworz_plik_w_przegladarce_Odszukaj_zapisany_plik_w_eksploratorze_plikow_i_kliknij_go_dwukrotnie_8211_przegladarka_otworzy_plik_bezposrednio_z_dysku_Zobaczysz_efekt_swojego_kodu_HTML_bez_potrzeby_serwera_internetowego__Krok_6_Edytuj_i_odswiezaj_Wprowadzaj_zmiany_w_edytorze_zapisuj_plik_CtrlS_i_odswiezaj_strone_w_przegladarce_F5_Ten_cykl_edycji_i_podgladu_jest_podstawowym_rytmem_pracy_kazdego_tworcy_stron__Kompletny_przyklad_kodu_HTML_pierwszej_strony__8222html____Moja_pierwsza_strona_HTML___Witaj_na_mojej_stronie">`, kilka akapitów `<p>` i dowolny odnośnik `<a>`. Każdy znacznik otwierający musi mieć odpowiadający znacznik zamykający.</p> <p><strong>Krok 4: Zapisz plik z rozszerzeniem .html.</strong> Wybierz „Zapisz jako” i w polu nazwy pliku wpisz `index.html`. Upewnij się, że typ pliku to „Wszystkie pliki” (nie .txt). Nazwa `index.html` to konwencjonalna nazwa strony głównej.</p> <p><strong>Krok 5: Otwórz plik w przeglądarce.</strong> Odszukaj zapisany plik w eksploratorze plików i kliknij go dwukrotnie – przeglądarka otworzy plik bezpośrednio z dysku. Zobaczysz efekt swojego kodu HTML bez potrzeby serwera internetowego.</p> <p><strong>Krok 6: Edytuj i odświeżaj.</strong> Wprowadzaj zmiany w edytorze, zapisuj plik (Ctrl+S) i odświeżaj stronę w przeglądarce (F5). Ten cykl edycji i podglądu jest podstawowym rytmem pracy każdego twórcy stron.</p> <p>Kompletny przykład kodu HTML pierwszej strony:</p> <p>„`html <!DOCTYPE html></p> <html lang="pl"> <head> <p><meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Moja pierwsza strona HTML

    Witaj na mojej stronie!

    To jest moja pierwsza strona stworzona w języku znacznikowym HTML.

    Tworzenie stron internetowych jest prostsze, niż myślałem.

    Moje hobby

    Lubię czytać, programować i gotować.

    Dowiedz się więcej o standardach HTML

    „`

    Podobnie jak poprawne formatowanie dokumentow tekstowych jest ważne w edytorach biurowych, tak poprawna struktura kodu HTML decyduje o tym, czy przeglądarka wyświetli stronę prawidłowo.

    Listy i tabele w HTML – jak je tworzyć?

    Lista nieuporządkowana (`

      `) używa punktorów, a lista uporządkowana (`
        `) używa numerów – to podstawowa różnica między dwoma typami list w HTML.

        Każdy element listy, niezależnie od jej rodzaju, jest zapisywany znacznikiem `

      1. `. Listy to jeden z najczęstszych elementów struktury strony internetowej – menu nawigacyjne, spisy treści i wyliczenia są zazwyczaj listami HTML.

        „`html

        • HTML
        • CSS
        • JavaScript

        1. Otwórz edytor tekstu
        2. Wpisz szkielet HTML5
        3. Zapisz plik jako index.html

    „`

    Tabele w HTML buduje się z trzech głównych znaczników: `

    ` (całość tabeli), `` (wiersz tabeli), `
    ` (komórka danych). Nagłówki kolumn oznacza się znacznikiem ``, który przeglądarka wyświetla pogrubioną czcionką.

    „`html

    Imię Wiek Miasto
    Anna 14 Kraków
    Marek 16 Warszawa

    „`

    Tabele HTML powinny być stosowane wyłącznie do prezentacji danych tabelarycznych – nie do układania elementów na stronie (do tego służy CSS).

    Formularze HTML – podstawy tworzenia pól i przycisków

    Formularz HTML to element strony internetowej umożliwiający użytkownikowi wprowadzanie danych, takich jak tekst, adres e-mail lub hasło.

    Formularz tworzony jest znacznikiem `

    `, który zawiera pola wejściowe (``), obszary tekstowe (`

    „`

    Pole `` służy do wpisywania tekstu, `` waliduje format adresu e-mail po stronie przeglądarki, a `` ukrywa wpisywane znaki. Przycisk `

    O Autorze

    Podobne wpisy