Wprowadzenie do HTML

Co to jest HTML? 🤔

HTML to język znaczników używany do tworzenia stron internetowych.

Co możesz dzięki niemu zrobić?

Tworzyć strukturę strony
Dodawać obrazy, linki, formularze i inne elementy

Pełna nazwa: HyperText Markup Language (Hipertekstowy Język Znaczników)

Łatwy do nauki! To podstawa do dalszej nauki webdevu.

Ciekawostka: HTML powstał w 1991 roku. Teraz mamy wersję HTML5!

📚 Ten poradnik to nauka przez przykłady.

Z czego składa się dokument HTML? 🧩

Każda strona HTML to jak budowla z klocków LEGO:

Deklaracja DOCTYPE – mówi przeglądarce, jakiej wersji HTML5 używasz
<html> – główny kontener (wszystko w środku!)
<head> – metadane, tytuł, style, skrypty (to, czego nie widać na stronie)
<body> – cała widoczna treść: tekst, obrazy, linki, przyciski

Przykład

<!DOCTYPE html>
<html>
  <head>
    <title>Moja pierwsza strona HTML</title>
  </head>
  <body>
    <h1>Witaj na mojej stronie!</h1>
    <p>To jest mój pierwszy dokument HTML.</p>
  </body>
</html>

Podgląd kodu w VSCode — Podgląd kodu HTML w VSCode (podświetlanie składni)

Podgląd strony w przeglądarce — Efekt działania kodu w przeglądarce

Co oznaczają te elementy? 🕵️‍♂️

<!DOCTYPE html> – informuje przeglądarkę, że to HTML5 (nie zamyka się!)
<html> – główny kontener, bez niego strona nie działa
- <head> – metadane, tytuł, style, skrypty (niewidoczne na stronie)
  - <title> – tytuł strony na karcie przeglądarki (krótki i opisowy)
- <body> – cała widoczna treść
  - <h1> – nagłówek główny (najważniejszy, tylko raz na stronę)
  - <p> – paragraf, grupuje tekst w akapity

Znaczniki HTML – buduj stronę jak z klocków! 🧱

Znaczniki (elementy) to podstawowe cegiełki HTML. Każdy ma swoją rolę – jak okno, drzwi czy ściana w domu.

Wyglądają tak:

<znacznik>Treść</znacznik>

Większość znaczników ma otwierający i zamykający tag oraz treść pomiędzy nimi.

Przykłady:

<p>To jest paragraf.</p>

<h1>To jest nagłówek 1 poziomu.</h1>

Są też znaczniki, które się nie zamykają:

<br>

<img >

albo deklaracja na górze:

<!DOCTYPE html>

Ciekawostka: Znacznik <img> ma atrybuty, np. src, które przekazują mu dodatkowe informacje!

Atrybuty – supermoce znaczników! ⚡

Atrybuty to dodatkowe informacje dla znacznika. Dzięki nim możesz np. ustawić źródło obrazka:

<img src="obrazek.jpg">

src="obrazek.jpg" mówi przeglądarce, skąd pobrać obraz.

Element	Opis	Przykład
`<h1>`	Nagłówek pierwszego poziomu	`<h1>Tytuł</h1>`
`<p>`	Paragraf (akapit)	`<p>To jest paragraf.</p>`
`<a>`	Link do innej strony lub zasobu	`<a href="https://...">Link</a>`
`<img>`	Obrazek	`<img src="obrazek.jpg">`
`<br>`	Łamanie linii (break)	`<br>`
`<ul>`	Lista nieuporządkowana	`<ul>...</ul>`
`<li>`	Element listy	`<li>Punkt</li>`
`<strong>`	Pogrubienie tekstu	`<strong>ważne</strong>`
`<em>`	Pochylenie tekstu (emfaza)	`<em>ważne</em>`
`<!DOCTYPE>`	Deklaracja typu dokumentu	`<!DOCTYPE html>`

To są podstawowe elementy HTML, które będziesz często spotykać i używać podczas tworzenia stron internetowych.

FAQ – najczęstsze pytania o HTML

Czy muszę mieć specjalny program do HTML? Nie! Wystarczy Notatnik lub TextEdit, ale polecamy VSCode lub Notepad++ dla wygody.

Czy HTML działa bez internetu? Tak! Plik otwierasz lokalnie w przeglądarce.

Czy muszę coś instalować? Nie, ale edytor z podświetlaniem składni bardzo pomaga.

Jak sprawdzić błędy w kodzie?

Przeglądarka pokaże błąd w konsoli (F12)
Możesz użyć walidatorów online (np. https://validator.w3.org/)

Czy mogę pisać HTML na telefonie? Tak! Są aplikacje do edycji kodu na Androida/iOS (np. Acode, Juno, Kodex)

Jak uruchomić stronę na telefonie?

Prześlij plik HTML na telefon i otwórz w przeglądarce mobilnej

Czy mogę pisać HTML w chmurze?

Tak! Skorzystaj z edytorów online jak CodePen, repl.it, JSFiddle

Co robi przeglądarka? 🌐

Przeglądarka (np. Chrome, Firefox, Edge) to magiczny tłumacz kodu HTML na stronę, którą widzisz!

Jak to działa?

Pobiera kod HTML z serwera
Analizuje strukturę dokumentu
Wyświetla treść na ekranie
Obsługuje kliknięcia, wpisywanie tekstu itp.
Ładuje obrazki, style, skrypty

Bez przeglądarki kod HTML byłby tylko tekstem!

Jak przeglądarka widzi HTML? 👀

Przeglądarka widzi HTML jako drzewo elementów – niektóre są w środku innych, jak pudełka w pudełku!

<!DOCTYPE html>

<html>

<head>

<title>Moja pierwsza strona HTML</title>

</head>

<body>

<h1>Witaj na mojej stronie!</h1>

<p>To jest mój pierwszy dokument HTML.</p>

</body>

</html>

Historia HTML 📜

Historia HTML – dla ciekawych!

HTML ma już ponad 30 lat! Oto najważniejsze momenty w jego rozwoju:

Rok	Wydarzenie
1989	Tim Berners-Lee tworzy koncepcję World Wide Web
1991	Powstaje pierwszy szkic HTML autorstwa Tima Bernersa-Lee
1993	Dave Raggett przedstawia HTML+ (propozycja rozszerzeń)
1995	Grupa robocza HTML definiuje HTML 2.0 – pierwszy oficjalny standard
1997	W3C publikuje HTML 3.2 jako rekomendację
1999	W3C rekomenduje HTML 4.01 – duży krok naprzód
2000	Pojawia się XHTML 1.0 – HTML zgodny z XML
2008	WHATWG publikuje pierwszy szkic HTML5
2012	HTML5 staje się tzw. “Living Standard” (ciągle rozwijany)
2014	W3C oficjalnie rekomenduje HTML5
2016	HTML 5.1 jako kandydat na rekomendację W3C
2017	HTML5.1 i HTML5.2 stają się oficjalnymi rekomendacjami W3C
2019	W3C i WHATWG ogłaszają wspólną pracę nad jednym standardem HTML (“Living Standard”)
2024	HTML jest rozwijany wyłącznie jako “Living Standard” przez WHATWG – nie ma już numerowanych wersji, zmiany są wprowadzane na bieżąco

Ciekawostka:
HTML cały czas się rozwija! Najnowsze wersje wprowadzają nowe znaczniki, lepsze wsparcie dla multimediów i większą dostępność.

Uwaga: Po 2017 roku nie pojawiają się już nowe numerowane wersje HTML. Standard jest rozwijany na bieżąco przez WHATWG jako tzw. “żywy standard” (Living Standard), a zmiany są wprowadzane stopniowo, bez dużych, oficjalnych wydań.