MODUŁ 01 · LEKCJA 1.1

Jak działa internet i co to jest HTML?

✓ Darmowy ⏱ ~10 min 🔰 Poziom: zero
💡
Co osiągniesz w tej lekcji?
Zrozumiesz czym jest HTML i jak przeglądarka (Chrome, Firefox) zamienia plik tekstowy na stronę którą widzisz.

Jak działa strona internetowa?

Wyobraź sobie, że strona internetowa to jak przepis kulinarny. Przepis opisuje słowami co zrobić i z czego — a kucharz (czyli przeglądarka) odczytuje ten przepis i przygotowuje gotowe danie (stronę którą widzisz).

Plik HTML to właśnie taki "przepis" — piszesz w nim co ma być na stronie i jak ma być ułożone. Przeglądarka go czyta i wyświetla wynik.

Co to jest HTML?

HTML to skrót od HyperText Markup Language — po polsku: język znaczników hipertekstu. Brzmi strasznie, ale w praktyce to po prostu:

HTML = instrukcja dla przeglądarki
Mówisz przeglądarce: "tu ma być nagłówek", "tu ma być akapit", "tu ma być obrazek".

Twój pierwszy kod HTML

Każdy plik HTML wygląda tak samo — ma obowiązkowy "szkielet". Oto on:

📄 moja-strona.html 
<!DOCTYPE html>
<html lang="pl">

  <head>
    <meta charset="UTF-8">
    <title>Moja pierwsza strona</title>
  </head>

  <body>
    <h1>Witaj świecie!</h1>
    <p>To jest moja pierwsza strona.</p>
  </body>

</html>

Co robi każda linijka? 🔍

Przejdziemy przez każdą linię — bez pomijania czegokolwiek:

<!DOCTYPE html>
Deklaracja typu dokumentu. Mówi przeglądarce: "hej, to jest nowoczesny HTML5". Zawsze musi być jako pierwsza linijka. Pisz ją zawsze, nie zastanawiaj się dlaczego — to obowiązek.
<html lang="pl">
Otwieramy dokument HTML. Atrybut lang="pl" mówi przeglądarce że strona jest po polsku — pomaga to wyszukiwarce i czytnikom ekranu dla osób niewidomych.
<head> … </head>
Głowa strony — niewidoczna część. Tu wpisujesz informacje O stronie: tytuł w zakładce, podłączenie CSS, ikonka strony. Użytkownik tego nie widzi na samej stronie, ale przeglądarka używa tego do działania.
<meta charset="UTF-8">
Kodowanie znaków. Dzięki temu polskie litery (ą, ę, ó, ź…) wyświetlają się poprawnie. Bez tego zobaczysz krzaczki zamiast liter. Zawsze wpisuj.
<title>…</title>
Tytuł zakładki przeglądarki. To tekst który widzisz na górze przeglądarki i w wynikach Google. Ważny dla SEO.
<body> … </body>
Ciało strony — to co widzi użytkownik. Wszystko co chcesz pokazać na stronie wpisujesz właśnie tutaj: tekst, obrazki, przyciski, menu.
<h1>…</h1>
Nagłówek główny. Największy tytuł na stronie. Powinien być tylko jeden na całej stronie. Jak tytuł rozdziału w książce.
<p>…</p>
Akapit tekstu. p od angielskiego paragraph. Każdy blok tekstu powinien być w osobnym znaczniku <p>.
💡 Zauważ wzorzec!
Każdy znacznik otwierasz: <p> i zamykasz: </p> (z ukośnikiem). Treść jest między nimi. Prawie każdy tag HTML działa w ten sposób.

Jak to uruchomić?

  1. Otwórz Notatnik (Windows) lub TextEdit (Mac)
  2. Wklej powyższy kod
  3. Zapisz plik jako index.html (ważne: rozszerzenie .html, nie .txt)
  4. Kliknij dwukrotnie na plik — otworzy się w przeglądarce
  5. 🎉 Widzisz "Witaj świecie!" — to Twoja pierwsza strona!
Następna lekcja: Twój pierwszy plik →
MODUŁ 01 · LEKCJA 1.2

Struktura tagów — jak czytać kod HTML?

✓ Darmowy ⏱ ~8 min

Skoro wiesz już co to HTML, czas zrozumieć jak działa każdy znacznik (tag) i jak je łączyć.

Budowa znacznika (tagu)

<p class="opis">Tekst akapitu</p>
↑
Otwarcie tagu
↑
Nazwa tagu
↑
Atrybut
↑
Treść
↑
Zamknięcie

Tagi można zagnieżdżać

Wewnątrz tagów możesz umieszczać inne tagi — to się nazywa zagnieżdżanie. Ważna zasada: zamykaj tagi w odwrotnej kolejności niż je otwierałeś.

Zagnieżdżanie tagów
<!-- DOBRZE — zamknięcia w odwrotnej kolejności -->
<p>
  To jest <strong>ważny</strong> tekst.
</p>

<!-- ŹLE — przekrzyżowane zamknięcia -->
<p>
  To jest <strong>błąd</p></strong>
</p>
← Poprzednia Następna: Nagłówki →
MODUŁ 02 · LEKCJA 2.1

Nagłówki h1–h6, akapity i tekst

✓ Darmowy ⏱ ~12 min

Nagłówki — hierarchia tytułów

HTML ma 6 poziomów nagłówków. Działają jak rozdziały i podrozdziały w książce:

Nagłówki h1–h6
<h1>Tytuł strony — największy</h1>
<h2>Sekcja — np. "O mnie"</h2>
<h3>Podsekcja</h3>
<h4>Mniejszy podtytuł</h4>
<h5>Rzadko używany</h5>
<h6>Najmniejszy nagłówek</h6>
h1 — Tytuł strony
h2 — Sekcja
h3 — Podsekcja
h4 — Podtytuł
h5 — Rzadko używany
h6 — Najmniejszy
🚨 Ważna zasada: Na jednej stronie używaj <h1> tylko raz — to główny tytuł. Resztę sekcji zaznaczaj przez <h2>, <h3>… Google to sprawdza!

Formatowanie tekstu

Podstawowe formatowanie
<strong>Pogrubiony tekst</strong>
<em>Pochylony (kursywa)</em>
<u>Podkreślony</u>
<br> <!-- Nowa linia (bez zamknięcia!) -->
<hr> <!-- Pozioma linia —————— -->
← Poprzednia Następna: CSS →
MODUŁ 03 · LEKCJA 3.1

CSS — jak sprawić żeby strona wyglądała ładnie?

✓ Darmowy ⏱ ~15 min

HTML daje strukturę — CSS daje wygląd. Jeśli HTML to szkielet budynku, CSS to farba, meble i dekoracje.

Jak podłączyć CSS?

Podłączanie pliku CSS
<head>
  <!-- Podłączamy zewnętrzny plik CSS -->
  <link rel="stylesheet" href="style.css">
</head>

Pierwsza reguła CSS

📄 style.css
/* Selektor — wybieramy co zmieniamy */
h1 {
  color: purple;        /* kolor tekstu */
  font-size: 48px;     /* rozmiar czcionki */
  text-align: center; /* wyśrodkowanie */
}

p {
  color: #666666;     /* szary tekst — zapis hex */
  line-height: 1.6;   /* odstęp między liniami */
}
color: purple;
Kolor tekstu. Możesz pisać po angielsku (red, blue, green) albo jako kod hex (#ff0000 = czerwony).
font-size: 48px;
Rozmiar czcionki. px = piksele. Im więcej, tym większy tekst. Typowy tekst na stronie to 16px.
text-align: center;
Wyrównanie tekstu. Opcje: left (domyślnie), center, right, justify (jak w gazecie).
line-height: 1.6;
Odstęp między liniami. Bez jednostki (1.6 = 160% rozmiaru czcionki). Zalecane 1.5–1.7 dla czytelności.
← Poprzednia Sprawdź Bibliotekę →