Witaj w praktycznym przewodniku, który krok po kroku pokaże Ci, jak stworzyć swoją pierwszą stronę internetową w języku HTML. Nie potrzebujesz do tego zaawansowanej wiedzy ani płatnych narzędzi wystarczy chęć do nauki i podstawowy edytor tekstu. Moim celem jest, abyś po lekturze tego artykułu zobaczył działający efekt swojej pracy bezpośrednio w przeglądarce.

HTML: Dlaczego wciąż jest absolutnym fundamentem każdej strony w Internecie?

Z mojego doświadczenia jako twórcy stron internetowych wiem, że choć technologii przybywa, to HTML pozostaje niezmiennym kręgosłupem każdej witryny. Bez niego nie byłoby struktury, treści ani sensu w tym, co widzimy w przeglądarce. To absolutna podstawa, od której zaczyna się każda przygoda z tworzeniem stron.

Co to jest HTML i dlaczego nie jest to "programowanie"?

HTML, czyli HyperText Markup Language, to standardowy język znaczników, który służy do tworzenia i strukturyzowania treści na stronach internetowych. Często spotykam się z pytaniem, czy HTML to język programowania. Odpowiedź jest prosta: nie. HTML nie jest językiem programowania, ponieważ nie pozwala na tworzenie logiki, algorytmów czy interaktywnych funkcji w taki sposób, jak robią to języki takie jak JavaScript czy Python.

Zamiast tego, HTML używa znaczników (tagów), aby opisać strukturę dokumentu. Mówiąc prościej, to jak pisanie przepisu kulinarnego wskazujesz, co jest nagłówkiem, co akapitem, gdzie ma być obrazek, a gdzie link. To język, który daje przeglądarce instrukcje, jak ma wyświetlić Twoją treść. Uważam, że zrozumienie tej różnicy jest kluczowe, aby nie zniechęcić się na starcie zbyt wysokimi oczekiwaniami.

Szkielet, mięśnie i skóra: Jak HTML, CSS i JavaScript tworzą całość?

Aby lepiej zrozumieć rolę HTML, lubię posługiwać się analogią do ludzkiego ciała. Wyobraź sobie, że:

• HTML to szkielet: Definiuje strukturę strony gdzie są nagłówki, akapity, listy, obrazy. Bez szkieletu ciało nie miałoby kształtu.
• CSS (Cascading Style Sheets) to mięśnie i skóra: Nadaje stronie wygląd kolory, czcionki, rozmieszczenie elementów, tła. To CSS sprawia, że szkielet staje się estetyczny i przyjemny dla oka. Bez niego strona byłaby szarym, nieuporządkowanym tekstem.
• JavaScript to układ nerwowy i ruch: Dodaje interaktywność i dynamikę. Dzięki niemu strona reaguje na działania użytkownika wyskakują okienka, zmienia się treść, animują elementy. To on sprawia, że strona "żyje".

Te trzy technologie działają razem, tworząc kompletne i funkcjonalne strony internetowe. Zaczynamy od HTML, bo to fundament, na którym budujemy całą resztę.

Narzędzia, których potrzebujesz do startu (i wszystkie są darmowe!)

Jedną z najlepszych wiadomości dla początkujących jest to, że do rozpoczęcia przygody z HTML nie potrzebujesz żadnych drogich licencji czy skomplikowanego oprogramowania. Wszystko, co jest Ci potrzebne, jest dostępne za darmo, a wiele z tych narzędzi masz już prawdopodobnie na swoim komputerze.

Prosty Notatnik czy zaawansowany edytor? Co wybrać na początek?

Na absolutny początek, aby poczuć, jak to jest pisać kod, wystarczy prosty edytor tekstu. Jeśli używasz Windowsa, będzie to klasyczny Notatnik. Użytkownicy macOS mogą skorzystać z TextEdit. Ważne, aby upewnić się, że edytor zapisuje pliki jako czysty tekst, bez dodatkowego formatowania (np. jak w Wordzie). To najprostszy sposób, aby zacząć bez instalowania czegokolwiek. Z mojego doświadczenia wiem, że pierwsze "Hello World" w Notatniku daje ogromną satysfakcję!

Polecane edytory kodu: Visual Studio Code i Notepad++

Gdy już poczujesz się pewniej z podstawami, gorąco polecam przesiadkę na dedykowane edytory kodu. Są one darmowe, a znacząco ułatwiają pracę. Do najpopularniejszych należą:

• Visual Studio Code (VS Code): To mój osobisty faworyt i jeden z najpotężniejszych edytorów na rynku. Jest darmowy, dostępny na wszystkie systemy operacyjne i oferuje mnóstwo rozszerzeń.
• Notepad++: Lekki i szybki edytor, bardzo popularny wśród użytkowników Windowsa.
• Sublime Text: Płatny, ale z darmową wersją testową, która działa bez ograniczeń czasowych. Ceniony za szybkość i minimalistyczny interfejs.

Te edytory oferują funkcje takie jak kolorowanie składni (różne części kodu mają różne kolory, co poprawia czytelność), autouzupełnianie (podpowiadanie znaczników i atrybutów) oraz formatowanie kodu. To wszystko sprawia, że pisanie HTML staje się znacznie przyjemniejsze i efektywniejsze.

Jaką rolę pełni przeglądarka internetowa w tym procesie?

Przeglądarka internetowa (np. Google Chrome, Mozilla Firefox, Microsoft Edge, Safari) jest Twoim "tłumaczem" i "wyświetlaczem". To ona bierze napisany przez Ciebie kod HTML i interpretuje go, zamieniając w to, co widzisz na ekranie nagłówki, akapity, obrazy i linki. Bez przeglądarki Twój kod pozostałby tylko plikiem tekstowym. To w niej będziesz podglądać efekty swojej pracy, więc upewnij się, że masz jedną z nich zainstalowaną i aktualną.

Twoja pierwsza strona HTML w 5 prostych krokach: Praktyczny poradnik

Teraz przechodzimy do sedna! Ta sekcja to serce naszego poradnika. Po wykonaniu poniższych pięciu kroków zobaczysz swoją pierwszą, działającą stronę internetową. Przygotuj swój edytor tekstu i zaczynajmy!

Krok 1: Stworzenie pliku, czyli jak poprawnie nazwać i zapisać dokument

1. Otwórz prosty edytor tekstu, na przykład Notatnik (Windows) lub TextEdit (macOS).
2. Zacznij od zupełnie pustego dokumentu.
3. Zaproponuj nazwę pliku, która będzie łatwa do zapamiętania, np. moja-pierwsza-strona.html. Bardzo często dla strony głównej używa się nazwy index.html.
4. Kluczowe jest rozszerzenie .html. To ono informuje system operacyjny i przeglądarkę, że mają do czynienia z dokumentem HTML.

Krok 2: Wklejenie szkieletu minimalna struktura każdego pliku HTML5

Każda poprawna strona HTML5 powinna zawierać minimalny "szkielet", który informuje przeglądarkę o podstawowej strukturze dokumentu. Wklej poniższy kod do swojego edytora:

Teraz wyjaśnijmy, co oznaczają poszczególne elementy tego szkieletu:

• </code>: To deklaracja typu dokumentu. Informuje przeglądarkę, że ma do czynienia z dokumentem HTML5. Zawsze umieszcza się ją na samym początku pliku.
• : Główny element, który obejmuje całą zawartość strony. Atrybut lang="pl" wskazuje, że język dokumentu to polski, co jest ważne dla wyszukiwarek i czytników ekranu.
• : Sekcja nagłówkowa dokumentu. Zawiera metadane, czyli informacje o stronie, które nie są bezpośrednio widoczne dla użytkownika.
• : Określa kodowanie znaków, co jest kluczowe dla poprawnego wyświetlania polskich liter (ą, ę, ć, itd.).
• : Ważne dla responsywności informuje przeglądarkę, aby strona była poprawnie skalowana na różnych urządzeniach (np. smartfonach).
• : Tekst umieszczony między tymi znacznikami pojawi się jako tytuł zakładki w przeglądarce.
• : To jest najważniejsza sekcja dla Ciebie! Tutaj umieszczasz całą widoczną dla użytkownika zawartość strony tekst, obrazy, linki, listy.

Krok 3: Dodanie pierwszych treści nagłówek i akapit

Teraz dodajmy coś widocznego! Wewnątrz znacznika , w miejscu komentarza , wklej poniższy kod:

 
Witaj na mojej pierwszej stronie!
 
To jest mój pierwszy akapit tekstu w języku HTML. Jestem dumny z tego, co tworzę!

Znacznik

Krok 4: Zapisanie pliku z rozszerzeniem .html

To bardzo ważny moment. Musisz zapisać swój plik z odpowiednim rozszerzeniem. Jeśli używasz Notatnika:

1. Wybierz z menu "Plik" -> "Zapisz jako...".
2. W oknie zapisu, w polu "Nazwa pliku", wpisz wybraną wcześniej nazwę, np. index.html.
3. Bardzo ważne: W polu "Typ pliku" zmień opcję z "Dokumenty tekstowe (*.txt)" na "Wszystkie pliki".
4. Kliknij "Zapisz".

Jeśli używasz bardziej zaawansowanego edytora, takiego jak VS Code, wystarczy wybrać "Zapisz jako..." i wpisać nazwę z rozszerzeniem .html edytor sam zadba o resztę.

Krok 5: Podgląd w przeglądarce zobacz efekt swojej pracy!

Gratulacje! Twój plik HTML jest gotowy. Teraz pora zobaczyć go w akcji:

1. Przejdź do folderu, w którym zapisałeś plik index.html.
2. Dwukrotnie kliknij na ikonę pliku index.html.
3. Plik powinien otworzyć się w Twojej domyślnej przeglądarce internetowej.

Powinieneś zobaczyć stronę z tytułem "Witaj na mojej pierwszej stronie!" i akapitem tekstu. Jeśli tak jest, to właśnie stworzyłeś swoją pierwszą stronę HTML! To ogromny sukces i jestem pewien, że poczułeś tę satysfakcję, którą ja czuję za każdym razem, gdy widzę efekty swojej pracy.

Ożywiamy treść: Jak dodawać kluczowe elementy na stronę?

Skoro masz już swój podstawowy szkielet, pora nauczyć się, jak wzbogacić go o więcej treści. Poniżej przedstawię Ci najczęściej używane znaczniki, które pozwolą Ci tworzyć bardziej rozbudowane i funkcjonalne strony. Pamiętaj, że wszystkie te elementy umieszczasz wewnątrz znacznika .

Nagłówki H1-H6: Jak poprawnie strukturyzować tekst?

Nagłówki (od

Główny tytuł strony
Podtytuł sekcji
Jakiś tekst pod podtytułem.
Nagłówek podsekcji
Kolejny akapit.

Akapity, pogrubienia i pochylenia: Podstawy formatowania tekstu

Już znasz znacznik

• : Służy do pogrubiania tekstu, nadając mu większe znaczenie semantyczne.
• : Służy do pochylania tekstu, również wskazując na nacisk lub wyróżnienie.

To jest zwykły akapit tekstu.
W tym akapicie chcę podkreślić ważność pewnych słów.
A tutaj pochylę tekst, aby nadać mu inny odcień znaczeniowy.

Jak wstawić klikalny link (odnośnik) do innej strony?

Linki to podstawa internetu. Tworzy się je za pomocą znacznika (od "anchor" kotwica) i atrybutu href (od "hypertext reference"), który określa adres docelowy linku.

Odwiedź moją ulubioną wyszukiwarkę: Google.
Możesz też sprawdzić  Wikipedię w nowej karcie.

Atrybut target="_blank" sprawia, że link otworzy się w nowej zakładce przeglądarki, co często jest dobrym pomysłem, gdy odsyłasz użytkownika do zewnętrznej witryny.

Dodawanie obrazka krok po kroku: Znaczniki `img`, `src` i kluczowy atrybut `alt`

Obrazy ożywiają stronę! Wstawiamy je za pomocą znacznika . Jest to znacznik samodomykający się, co oznacza, że nie potrzebuje znacznika zamykającego .

• src (source): Określa ścieżkę do pliku obrazka. Może to być adres URL (jak w przykładzie) lub ścieżka do pliku na Twoim komputerze.
• alt (alternative text): To kluczowy atrybut! Zawiera tekst alternatywny, który wyświetla się, gdy obrazek nie może zostać załadowany lub jest czytany przez czytniki ekranu dla osób niewidomych. Jest też ważny dla SEO (optymalizacji pod wyszukiwarki). Nigdy nie pomijaj atrybutu alt!

Powyżej znajduje się przykładowy obrazek.

Jeśli obrazek znajduje się w tym samym folderze co Twój plik HTML, możesz po prostu wpisać jego nazwę, np. .

Tworzenie list: Kiedy użyć wypunktowania (ul), a kiedy numerowania (ol)?

Listy są świetne do porządkowania informacji. HTML oferuje dwa główne typy list:

• (unordered list): Lista nieuporządkowana, czyli wypunktowana. Używaj jej, gdy kolejność elementów nie ma znaczenia.
• (ordered list): Lista uporządkowana, czyli numerowana. Używaj jej, gdy kolejność elementów jest ważna (np. kroki w instrukcji).

Każdy element listy (zarówno w

Moje ulubione owoce (lista nieuporządkowana):
 
Jabłka
 
Banany
 
Truskawki
 
Kroki do zrobienia kawy (lista uporządkowana):
 
Zagotuj wodę.
 
Wsyp kawę do filiżanki.
 
Zalej kawę gorącą wodą.
 
Dodaj cukier i mleko (opcjonalnie).

To jest akapit.
To powinien być drugi akapit.

To jest akapit.
To powinien być drugi akapit.

Ten tekst jest pogrubiony

Ten tekst jest pogrubiony