1. Podstawowa struktura dokumentu HTML

~12–15 min poziom: początkujący

W internecie wszystko zaczyna się od HTML. To właśnie HTML mówi przeglądarce: „tu jest tekst, tu zdjęcie, tu przycisk”. Bez poprawnej struktury strona może się rozsypać albo w ogóle nie wyświetlić.

W tej pierwszej lekcji nauczysz się tworzyć minimalny, poprawny szkielet dokumentu HTML – taki, od którego zaczyna prawie każda strona na świecie.

Minimalny, poprawny dokument HTML

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Moja pierwsza strona</title>
  </head>
  <body>
    <h1>Witaj świecie!</h1>
    <p>To jest moja pierwsza strona.</p>
    <!-- komentarz np. autor strony -->
  </body>
</html>

Popularny błąd początkujących: zapominanie <!DOCTYPE html>
Wtedy przeglądarka włącza „quirks mode” → strona może wyglądać dziwnie i nie działać responsywnie.

Moja pierwsza strona

https://example.com/

Witaj świecie!

To jest moja pierwsza strona.

Najważniejsze elementy wyjaśnione

<!DOCTYPE html> – mówi przeglądarce: „to jest HTML5”
<html lang="pl"> – korzeń dokumentu + język strony
<meta charset="utf-8"> – poprawne wyświetlanie polskich znaków
<meta name="viewport"...> – poprawne wyświetlanie na telefonach
<title> – tytuł w zakładce przeglądarki
<head> – metadane (niewidoczne na stronie)
<body> – wszystko, co widzisz
– notatki dla Ciebie, niewidoczne na stronie

Ważne: <html>, <head> i <body> dzielą dokument na trzy wyraźne warstwy – to podstawa semantycznego HTML.

Do zapamiętania: Zawsze zaczynaj od <!DOCTYPE html> i dodawaj lang="pl" – to podstawa poprawnego kodu.

Zadanie na teraz

Stwórz plik index.html, wklej kod, zmień tytuł oraz tekst w <h1> i <p> na coś swojego. Dodaj swoje imię jako komentarz na samym początku pliku (zaczyna się od <!-- ). Otwórz plik w przeglądarce.

Następna lekcja

2. Nagłówki, akapity i formatowanie tekstu

[ Miejsce na reklamę ]