HTML od Podstaw: Szybki Przewodnik

Witajcie w kompleksowym przewodniku HTML dla początkujących! 🎉 Ten wpis powstał specjalnie dla moich studentów, ale każdy, kto chce poznać lub uporządkować wiedzę o HTML, znajdzie tu coś dla siebie. HTML (HyperText Markup Language) to fundament każdej strony internetowej. Bez niego nie ma internetu, jaki znamy. Zacznijmy!

Czym Jest HTML?

HTML to język znaczników, nie język programowania. Co to oznacza?

🏗️ Pozwala opisać strukturę informacji zawartych na stronie
🎯 Mówimy przeglądarce co ma wyświetlić: "wyświetl nagłówek", "wyświetl paragraf", "wyświetl link"
📝 Nie piszemy w nim algorytmów czy logiki

Historia w Pigułce

Rok	Wersja	Kluczowe Zmiany
1991	HTML 1.0	Pierwsze znaczniki (22 tagi)
1995	HTML 2.0	Formularze, tabele
1997	HTML 4.0	CSS, skrypty, accessibility
2014	HTML5	Semantyczne tagi, multimedia, API
Teraz	HTML Living Standard	Żyjący standard (Living Standard)

💻 HTML narodził się z potrzeby, a nie dla zysku. Fizyk Tim Berners-Lee stworzył go w 1991 roku w CERN, aby naukowcy mogli w końcu łatwo dzielić się wynikami badań.

Anatomia Dokumentu HTML

Każdy dokument HTML ma identyczną strukturę. To jak szkielet - zawsze taki sam:

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Moja Pierwsza Strona</title>
  </head>
  <body>
    <h1>Witaj, świecie!</h1>
    <p>To jest mój pierwszy dokument HTML.</p>
  </body>
</html>

Rozbijmy to na Czynniki Pierwsze:

<!DOCTYPE html> - Deklaracja typu dokumentu (mówi przeglądarce: "to HTML5!")
<html lang="pl"> - Korzeń dokumentu (atrybut lang poprawia SEO i accessibility)
<head> - Metadane (informacje o stronie, niewidoczne dla użytkownika)
<body> - Treść strony (wszystko, co widzi użytkownik)

Znaczniki (Tags) - Twoje Narzędzia Pracy

Struktura Znacznika

<tag atrybut="wartość">Treść</tag>

Rodzaje znaczników:

Znaczniki parowe (Elementy standardowe): <p>tekst</p>, <div>...</div>, <h1>...</h1>
Znaczniki samozamykające (Elementy puste): <img />, <br />, <input />

Najważniejsze Znaczniki Tekstowe

Nagłówki (h1-h6)

<h1>Najważniejszy nagłówek (tylko jeden na stronie!)</h1>
<h2>Nagłówek sekcji</h2>
<h3>Podsekcja</h3>
<h4>Mniejszy nagłówek</h4>
<h5>Jeszcze mniejszy</h5>
<h6>Najmniejszy</h6>

Złota zasada SEO: 💡 Jedna strona = jeden <h1>. Nagłówki muszą być hierarchiczne (nie przeskakuj z h1 na h4).

Paragrafy i Formatowanie

<p>To jest paragraf. Zawiera zwykły tekst.</p>
<p>Możemy <strong>pogrubić tekst</strong> lub <em>pochylić go</em>.</p>
<p>Możemy też dodać <mark>podświetlenie</mark> lub <del>przekreślenie</del>.</p>

Różnica między <strong> a <b>:

<strong> = semantyczne pogrubienie (ważne dla SEO!)
<b> = tylko wizualne pogrubienie

Listy - Uporządkuj Swoją Treść

Lista Nieuporządkowana (wypunktowana)

<ul>
  <li>Kawa</li>
  <li>Herbata</li>
  <li>Sok</li>
</ul>

Rezultat:

Kawa
Herbata
Sok

Lista Uporządkowana (numerowana)

<ol>
  <li>Otwórz edytor</li>
  <li>Napisz kod HTML</li>
  <li>Zapisz jako .html</li>
  <li>Otwórz w przeglądarce</li>
</ol>

Rezultat:

Otwórz edytor
Napisz kod HTML
Zapisz jako .html
Otwórz w przeglądarce

Linki - Połącz stwoje strony

Linki to serce internetu. Bez nich każda strona byłaby samotną wyspą.

Podstawowa Składnia

<!-- Podstawowy Odnośnik -->
<a href="https://google.com">Przejdź do Google</a>
<!-- Odnośnik z Atrybutami -->
<a href="https://github.com" target="_blank" rel="noopener noreferrer">
  GitHub (nowa karta)
</a>

Atrybuty linków:

href - dokąd prowadzi link
target="_blank" - otwórz w nowej karcie
rel="noopener noreferrer" - bezpieczeństwo (zawsze używaj z target="_blank")

Rodzaje Linków

<!-- Link zewnętrzny (absolutny) -->
<a href="https://example.com">Strona zewnętrzna</a>

<!-- Link wewnętrzny (relatywny) -->
<a href="/about.html">O nas</a>

<!-- Link do sekcji na stronie -->
<a href="#kontakt">Skocz do kontaktu</a>

<!-- Link email -->
<a href="mailto:hello@example.com">Napisz do nas</a>

<!-- Link telefon -->
<a href="tel:+48123456789">Zadzwoń</a>

Obrazy - Dodaj Elementy Wizualne

<img src="/images/logo.png" alt="Logo firmy XYZ" width="300" height="200" />

Atrybut alt jest OBOWIĄZKOWY! ⚠️

Dlaczego?

Accessibility - czytniki ekranu odczytają opis dla osób niewidomych
SEO - Google indeksuje obrazy po alt (obecnie również wizualnie)
Fallback - jeśli obraz się nie załaduje, użytkownik zobaczy opis

Figure i Figcaption - Profesjonalne Podpisy

<figure>
  <img src="/chart.png" alt="Wykres sprzedaży 2024" />
  <figcaption>Rys. 1: Wzrost sprzedaży w Q1 2024</figcaption>
</figure>

Semantyczne Znaczniki HTML5

HTML5 wprowadził semantyczne tagi, które opisują znaczenie treści, nie tylko wygląd.

Struktura Semantyczna

<header>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/blog">Blog</a></li>
      <li><a href="/contact">Kontakt</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h1>Tytuł Artykułu</h1>
    <p>Treść artykułu...</p>
  </article>

  <aside>
    <h2>Powiązane artykuły</h2>
    <ul>
      <li><a href="#">Artykuł 1</a></li>
      <li><a href="#">Artykuł 2</a></li>
    </ul>
  </aside>
</main>

<footer>
  <p>&copy; 2025 Moja Firma. Wszelkie prawa zastrzeżone.</p>
</footer>

Co Dają Semantyczne Tagi?

Tag	Znaczenie
`<header>`	Nagłówek strony/sekcji
`<nav>`	Nawigacja
`<main>`	Główna treść strony (tylko jedna!)
`<article>`	Samodzielny kawałek treści (wpis, artykuł)
`<section>`	Sekcja tematyczna
`<aside>`	Treść poboczna (sidebar)
`<footer>`	Stopka strony/sekcji

Korzyści:

✅ Lepsze SEO (Google rozumie strukturę)
✅ Accessibility (czytniki ekranu wiedzą, co jest czym)
✅ Czystszy kod (natychmiast wiadomo, co robi każda sekcja)

Tabele - Uporządkowane Dane

Tabel używamy do danych tabelarycznych, nie do układania layoutu!

<table>
  <thead>
    <tr>
      <th>Język</th>
      <th>Rok Powstania</th>
      <th>Twórca</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>1991</td>
      <td>Tim Berners-Lee</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>1996</td>
      <td>Håkon Wium Lie</td>
    </tr>
    <tr>
      <td>JavaScript</td>
      <td>1995</td>
      <td>Brendan Eich</td>
    </tr>
  </tbody>
</table>

Formularze - Zbieraj Dane

Formularze to sposób, w jaki użytkownicy komunikują się z Twoją stroną.

<form action="/submit" method="POST">
  <label for="name">Imię:</label>
  <input type="text" id="name" name="name" required />

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required />

  <label for="message">Wiadomość:</label>
  <textarea id="message" name="message" rows="5"></textarea>

  <button type="submit">Wyślij</button>
</form>

Rodzaje Inputów

<!-- Tekst -->
<input type="text" />
<!-- Email (walidacja!) -->
<input type="email" />
<!-- Hasło (ukryte znaki) -->
<input type="password" />
<!-- Liczba -->
<input type="number" />
<!-- Data (picker!) -->
<input type="date" />
<!-- Checkbox -->
<input type="checkbox" />
<!-- Radio button -->
<input type="radio" />
<!-- Upload pliku -->
<input type="file" />

Dobre Praktyki HTML

1. Zawsze Używaj Semantycznych Tagów

❌ Źle:

<div class="header">
  <div class="navigation">...</div>
</div>

✅ Dobrze:

<header>
  <nav>...</nav>
</header>

2. Accessibility Jest Kluczowa

<!-- Zawsze dodawaj alt do obrazów -->
<img src="logo.png" alt="Logo firmy" />

<!-- Używaj label z inputami -->
<label for="username">Nazwa użytkownika:</label>
<input type="text" id="username" name="username" />

<!-- ARIA attributes dla interaktywnych elementów -->
<button aria-label="Zamknij okno">×</button>

Narzędzia dla Web Developera

Podstawowe:

VS Code - najczęściej używany edytor kodu 🚀
Chrome DevTools - inspekcja i debugowanie (F12)
Live Server - rozszerzenie VS Code do live reload

Zadania Praktyczne

Zadanie 1: Stwórz Swoją Wizytówkę

Utwórz stronę HTML z:

Nagłówkiem <h1> z Twoim imieniem
Paragrafem <p> z krótkim opisem
Listą <ul> Twoich umiejętności
Linkiem do GitHub/LinkedIn

Zadanie 2: Blog Post

Stwórz strukturę artykułu z:

Semantycznymi tagami (<article>, <header>, <footer>)
Przynajmniej 3 sekcjami (<section>)
Obrazkiem z <figure> i <figcaption>
Tabelą z danymi

Zadanie 3: Formularz Kontaktowy

Zbuduj formularz z polami:

Imię (text, required)
Email (email, required)
Wiadomość (textarea)
Checkbox zgody na RODO
Przycisk wysyłki

Podsumowanie

HTML to fundament web developmentu. Kluczowe punkty:

✅ HTML to język znaczników, nie programowania
✅ Struktura: <!DOCTYPE html> → <html> → <head> + <body>
✅ Używaj semantycznych tagów (lepsze SEO i accessibility)
✅ Waliduj kod i dbaj o czytelność

Kolejne Kroki

Po opanowaniu HTML, czas na:

CSS - stylowanie i layout
JavaScript - interaktywność
Frameworki (React, Next.js) - nowoczesne aplikacje

Przydatne Linki

MDN Web Docs - najlepsza dokumentacja HTML
W3Schools - interaktywne tutoriale
Can I Use - sprawdź wsparcie przeglądarek
HTML Living Standard - oficjalna specyfikacja

Pytania? Problemy? Napisz do mnie m@zeprzalka.com

Powodzenia w nauce! 🚀