Rozpoczynanie przygody z tworzeniem stron internetowych może wydawać się skomplikowane, ale zapewniam Cię, że z HTML-em jest to prostsze, niż myślisz. HTML to fundament, "szkielet" każdej strony, bez którego internet, jaki znamy, po prostu by nie istniał. W tym przewodniku pokażę Ci krok po kroku, jak stworzyć swoją pierwszą, działającą stronę internetową, dając Ci solidne podstawy do dalszego rozwoju w świecie web developmentu.

Zanim zaczniesz kodować: Czym jest HTML i co przygotować?

Zanim zagłębisz się w pisanie kodu, warto zrozumieć, czym właściwie jest HTML. Wyobraź sobie HTML jako szkielet budynku to on definiuje strukturę, układ pomieszczeń i to, gdzie znajdą się ściany czy okna. W świecie internetu HTML (HyperText Markup Language) to język znaczników, który służy do tworzenia struktury i treści stron internetowych. Dzięki niemu przeglądarki internetowe wiedzą, co jest nagłówkiem, co akapitem, gdzie znajduje się obrazek, a gdzie link. Bez niego Twoja strona byłaby tylko nieuporządkowanym zlepkiem tekstu.

Jedyne narzędzie, którego potrzebujesz na start: Wybór edytora kodu

Prawda jest taka, że do pisania kodu HTML wystarczyłby Ci nawet prosty Notatnik systemowy. Jednak dla wygody i efektywności pracy, zwłaszcza na początku, zdecydowanie polecam skorzystanie z bardziej zaawansowanych, a co najważniejsze darmowych edytorów kodu. To narzędzia, które znacząco ułatwią Ci naukę i sprawią, że kodowanie będzie przyjemniejsze. Oto moje rekomendacje:

• Visual Studio Code (VS Code): To mój osobisty faworyt. Jest niezwykle popularny i oferuje mnóstwo funkcji, takich jak podświetlanie składni, automatyczne domykanie tagów, sugestie kodu oraz bogaty ekosystem rozszerzeń, które przyspieszą Twoją pracę.
• Sublime Text: Lekki, szybki i bardzo konfigurowalny edytor, ceniony za swoją wydajność i prostotę.
• Atom: Edytor stworzony przez GitHub, również oferujący podświetlanie składni i wiele rozszerzeń, z naciskiem na łatwą personalizację.

Wybierając jeden z nich, zyskasz nieocenione wsparcie, które pozwoli Ci skupić się na nauce samej składni HTML, zamiast na drobnych błędach.

Struktura folderu projektu: Jak zorganizować pliki, by uniknąć chaosu?

Dobra organizacja to podstawa w każdym projekcie, a w programowaniu jest to szczególnie ważne. Zanim zaczniesz pisać kod, stwórz na swoim komputerze jeden, główny folder dla Twojej pierwszej strony internetowej. Nazwij go na przykład "moja-pierwsza-strona" lub "projekt-html". Dlaczego to takie ważne? Gdy Twoja strona zacznie się rozrastać, dojdą do niej obrazki, pliki CSS ze stylami czy skrypty JavaScript. Trzymanie wszystkiego w jednym, dedykowanym miejscu zapobiegnie bałaganowi i ułatwi zarządzanie projektem. Oto przykład prostej struktury:

moja-pierwsza-strona/
├── index.html
├── images/
│ └── moj-obrazek.jpg
└── css/ └── style.css

Na początek wystarczy sam plik `index.html` w głównym folderze.

Twoja pierwsza strona HTML: Przewodnik krok po kroku

Teraz, gdy masz już przygotowane narzędzia i wiesz, jak zorganizować pliki, przejdźmy do sedna stworzenia Twojej pierwszej strony HTML.

Krok 1: Stworzenie i zapisanie pliku index.html

1. Otwórz swój edytor kodu: Uruchom Visual Studio Code, Sublime Text lub Atom.
2. Stwórz nowy plik: Zazwyczaj znajdziesz opcję "New File" w menu "File" lub użyj skrótu klawiaturowego (np. Ctrl+N lub Cmd+N).
3. Zapisz plik: To jest kluczowy moment. Wybierz "Save As" (Zapisz jako) z menu "File". Przejdź do folderu, który stworzyłeś dla swojego projektu (np. "moja-pierwsza-strona"). Nazwij plik index.html. Upewnij się, że rozszerzenie pliku to .html, a nie .txt. To właśnie rozszerzenie informuje przeglądarkę, że ma do czynienia z dokumentem HTML.

Krok 2: Wklejenie magicznej formuły, czyli podstawowego szkieletu dokumentu

Każda strona HTML5 powinna zaczynać się od pewnego standardowego zestawu tagów. To minimalny szkielet, który przeglądarka potrzebuje, aby poprawnie zinterpretować Twoją stronę. Wklej poniższy kod do swojego pliku index.html:

Co oznaczają te linijki?

• </code>: To deklaracja typu dokumentu. Informuje przeglądarkę, że ma do czynienia z dokumentem HTML5.
• : Główny kontener dla całej strony. Atrybut lang="pl" wskazuje, że język treści strony to polski, co jest ważne dla dostępności i SEO.
• : Sekcja "głowy" dokumentu. Zawiera metadane o stronie informacje, które nie są bezpośrednio widoczne dla użytkownika, ale są ważne dla przeglądarki i wyszukiwarek.
• : Niezwykle ważny tag! Definiuje kodowanie znaków jako UTF-8, co zapewnia poprawne wyświetlanie polskich liter (ą, ę, ć, ł itd.).
• : Ten tag pomaga w responsywności strony, informując przeglądarkę, jak skalować stronę na różnych urządzeniach mobilnych.
• : Określa tytuł strony, który pojawia się na karcie przeglądarki lub w wynikach wyszukiwania.
• : Sekcja "ciała" dokumentu. To tutaj umieszczasz całą widoczną treść swojej strony tekst, obrazy, linki, listy itp.

Krok 3: Dodanie pierwszego tekstu i tytułu strony

Teraz dodajmy coś, co będzie widoczne! Wewnątrz tagu wklej prosty akapit tekstu, a także zmień tytuł strony w sekcji :

    

 
Witaj świecie! To jest moja pierwsza strona internetowa, którą stworzyłem samodzielnie.
 

Zapisz zmiany w pliku (Ctrl+S lub Cmd+S).

Krok 4: Uruchomienie strony w przeglądarce i efekt "Wow!"

To jest moment, na który czekałeś! Zobaczmy Twoją stronę w akcji.

1. Otwórz folder projektu: Przejdź do folderu "moja-pierwsza-strona" na swoim komputerze.
2. Otwórz plik index.html: Po prostu dwukrotnie kliknij na plik index.html. Automatycznie otworzy się on w Twojej domyślnej przeglądarce internetowej (Chrome, Firefox, Edge itp.).

Gratulacje! Powinieneś zobaczyć swoją pierwszą, działającą stronę internetową z tekstem "Witaj świecie! To jest moja pierwsza strona internetowa, którą stworzyłem samodzielnie." oraz tytułem "Witaj Świecie! Moja Pierwsza Strona HTML" na karcie przeglądarki. Ten moment, kiedy widzisz efekt swojej pracy, jest naprawdę satysfakcjonujący i motywujący do dalszej nauki!

Anatomia strony HTML: Kluczowe znaczniki

Teraz, gdy masz już swoją pierwszą stronę, przyjrzyjmy się bliżej najważniejszym elementom, które pozwolą Ci budować bardziej złożone struktury.

Głowa i ciało dokumentu: Rola sekcji `` i ``

Jak już wspomniałem, sekcja to "głowa" Twojej strony. Zawiera ona metadane informacje o dokumencie, które nie są bezpośrednio wyświetlane na stronie. To tutaj umieszczasz tytuł strony (), deklarację kodowania znaków (), linki do zewnętrznych plików CSS (stylów) oraz skryptów JavaScript, a także inne metatagi ważne dla wyszukiwarek (SEO) czy udostępniania strony w mediach społecznościowych. To taka "kuchnia" strony, gdzie dzieje się wiele ważnych rzeczy, ale której nie widać z zewnątrz.

Z kolei sekcja to "ciało" Twojej strony, czyli wszystko, co użytkownik widzi i z czym może interaktywnie działać. To tutaj umieszczasz całą treść: nagłówki, akapity, obrazy, linki, listy, tabele, formularze i wiele innych. Możesz myśleć o tym jak o wnętrzu budynku to przestrzeń, w której znajdują się wszystkie meble, dekoracje i funkcjonalne elementy, z których korzystają mieszkańcy.

Jak zadbać o polskie znaki? Potęga metatagu charset="UTF-8"

Pewnie zastanawiasz się, dlaczego tak bardzo podkreślałem znaczenie tagu . Otóż bez niego, polskie znaki takie jak ą, ę, ć, ł, ń, ó, ś, ź, ż mogłyby wyświetlać się jako dziwne krzaczki lub znaki zapytania. Dzieje się tak, ponieważ przeglądarka nie wie, jakiego kodowania znaków używasz. Ustawienie charset="UTF-8" w sekcji rozwiązuje ten problem, informując przeglądarkę, aby użyła uniwersalnego kodowania UTF-8, które obsługuje wszystkie znaki z różnych języków świata. To jedna z najczęstszych pułapek dla początkujących, więc pamiętaj o niej zawsze! (Więcej o tym znajdziesz w sekcji FAQ).

Hierarchia jest ważna: Jak poprawnie używać nagłówków od `` do ``

Nagłówki w HTML (od

Główny tytuł strony
Pierwsza sekcja
Jakiś tekst w pierwszej sekcji.
Podsekcja w pierwszej sekcji
Tekst w podsekcji.
Druga sekcja
Jakiś tekst w drugiej sekcji.

Akapity, pogrubienia i kursywa: Podstawowe formatowanie tekstu

Oprócz nagłówków, do formatowania tekstu służą inne, równie ważne tagi:

• (paragraph): Służy do tworzenia akapitów tekstu. Każdy akapit powinien znajdować się w osobnym tagu
  .
• lub (bold): Używane do pogrubiania tekstu. Różnica semantyczna: oznacza, że tekst jest ważny lub ma duże znaczenie, podczas gdy służy głównie do wizualnego pogrubienia bez dodatkowego znaczenia semantycznego. Dla większości przypadków polecam .
• lub (italic): Używane do kursywy. Różnica semantyczna: oznacza nacisk (emphasized text), a służy do wyróżnienia tekstu (np. nazwy gatunków, terminy techniczne) bez dodatkowego nacisku. Podobnie jak wyżej, jest często preferowane.

To jest zwykły akapit tekstu.
Ten tekst jest bardzo ważny.
Ten tekst jest podkreślony kursywą.

Ożywiamy treść: Linki, obrazy i listy

Statyczny tekst to dopiero początek. Prawdziwa moc stron internetowych tkwi w możliwości łączenia treści, dodawania elementów wizualnych i uporządkowywania informacji.

Tworzenie klikalnych odnośników za pomocą znacznika ``

Linki, czyli odnośniki, to serce internetu. Dzięki nim możesz nawigować między stronami. Tworzy się je za pomocą znacznika (anchor) z kluczowym atrybutem href (hypertext reference), który wskazuje adres URL, do którego ma prowadzić link. Tekst umieszczony między tagami otwierającym i zamykającym będzie widoczny i klikalny.

Odwiedź Google w poszukiwaniu informacji.
Przejdź do strony O nas (link wewnętrzny).

Wstawianie grafiki na stronę: Znacznik `` i kluczowy atrybut `alt`

Obrazy wzbogacają każdą stronę. Do ich wstawiania służy znacznik . Jest to tag samodomykający się, co oznacza, że nie potrzebuje oddzielnego tagu zamykającego (np. ). Kluczowe atrybuty to src (source), który wskazuje ścieżkę do pliku obrazu, oraz alt (alternative text), który jest tekstem alternatywnym wyświetlanym, gdy obraz się nie załaduje lub jest czytany przez czytniki ekranowe dla osób niewidomych. Atrybut alt jest niezwykle ważny dla dostępności i SEO.

Porządkowanie informacji: Tworzenie list wypunktowanych i numerowanych

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

• Listy nieuporządkowane (unordered lists): Używają tagu
  i są wyświetlane z punktorami.
• Listy uporządkowane (ordered lists): Używają tagu
  i są wyświetlane z numerami.

Każdy element listy, niezależnie od typu, jest umieszczany w tagu

Moje ulubione owoce:
 
Jabłka
 
Banany
 
Pomarańcze
 
Kroki do sukcesu:
 
Ucz się HTML
 
Ucz się CSS
 
Ucz się JavaScript