HTML od podstaw — w stronę INF.03
Każdy temat ma tę samą budowę: krótkie wyjaśnienie, potem przykład z gotowym kodem (rozwiń, żeby zobaczyć) a obok analogiczne zadanie — bez gotowego rozwiązania, do zrobienia samodzielnie tą samą metodą.
Szkielet dokumentu HTML
Każdy dokument zaczyna się deklaracją <!DOCTYPE html> (mówi przeglądarce, że to HTML5), potem jest znacznik <html lang="pl">, a wewnątrz niego dwie części: <head> (informacje o stronie, niewidoczne na ekranie) i <body> (cała widoczna treść).
Najkrótszy poprawny dokument HTML5: deklaracja, język, kodowanie znaków, tytuł karty i jeden nagłówek w treści.
Kod
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Moja strona</title>
</head>
<body>
<h1>Cześć, świecie!</h1>
</body>
</html>Stwórz od zera plik index.html z minimalnym szkieletem. W tytule karty wpisz swoje imię, a w <body> jeden nagłówek <h1> z napisem „Cześć, to moja pierwsza strona”.
// napisz kod samodzielnie, korzystając z przykładu obok
Tak wygląda szkielet gotowy pod projekt egzaminacyjny: meta viewport (responsywność), podłączony arkusz stylów i skrypt na końcu body (żeby HTML był już wczytany, zanim JS zacznie go szukać).
Kod
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Projekt INF.03</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Witaj na stronie</h1>
<script src="script.js"></script>
</body>
</html>Rozbuduj plik z poprzedniego zadania: dodaj <meta name="viewport"...>, podłącz (jeszcze nieistniejący) plik style.css przez <link> oraz dodaj na końcu body podłączenie pustego pliku script.js.
Nagłówki i akapity
Nagłówki <h1>–<h6> tworzą hierarchię ważności treści (na stronie powinien być tylko jeden <h1>). Zwykły tekst wstawiamy w akapitach <p>. <br> łamie linię wewnątrz elementu, a <hr> rysuje poziomą linię oddzielającą treść.
Strona z jednym tytułem głównym (h1), dwoma podtytułami sekcji (h2) i po jednym akapicie pod każdym z nich.
Kod
<h1>Mój blog o podróżach</h1>
<h2>Wakacje w górach</h2>
<p>W tym roku spędziliśmy tydzień w Tatrach, wędrując po szlakach
i podziwiając widoki ze szczytów.</p>
<h2>Wyjazd nad morze</h2>
<p>Latem odwiedziliśmy Bałtyk - plaża, spacery i lody
każdego dnia.</p>Stwórz stronę o swoim hobby: jeden h1 z tytułem, dwa h2 (np. dwa różne aspekty hobby), a pod każdym po jednym akapicie z opisem.
Adres rozbity na kilka linii za pomocą <br> wewnątrz jednego akapitu, a pod spodem <hr> oddzielający kolejną informację.
Kod
<p>
Jan Kowalski<br>
ul. Szkolna 12<br>
00-950 Warszawa
</p>
<hr>
<p>Telefon kontaktowy: 501 234 567</p>Zrób wizytówkę: jeden akapit z imieniem, nazwą firmy i adresem rozbitym na 3 linie przez <br>, potem <hr>, a pod nim drugi akapit z adresem e-mail.
Formatowanie tekstu
<strong> oznacza ważność (zwykle pogrubienie), <em> oznacza nacisk (zwykle kursywa), <mark> podświetla fragment, <blockquote> to cytat blokowy, a <code> oznacza fragment kodu w tekście.
Zdanie z jednym słowem pogrubionym (ważność) i jednym w kursywie (nacisk).
Kod
<p>
HTML to <strong>podstawa</strong> każdej strony internetowej,
a nauczenie się go jest <em>naprawdę</em> proste.
</p>Napisz zdanie o zaletach nauki HTML, w którym jedno słowo jest pogrubione (strong), a inne w kursywie (em).
Cytat w blockquote, jedno podświetlone słowo (mark) i nazwa znacznika zapisana jako code.
Kod
<blockquote>
Nauka to jedyna rzecz, której umysł nigdy nie ma dość,
nigdy się jej nie boi i nigdy jej nie żałuje.
</blockquote>
<p>Najważniejszy znacznik strony to <mark>nagłówek</mark>,
zapisywany jako <code><h1></code>.</p>Wstaw dowolny cytat z podręcznika lub książki w blockquote, a w osobnym akapicie podświetl jedno słowo za pomocą mark i zapisz nazwę jednego znacznika HTML jako code.
Listy
<ul> to lista nieuporządkowana (punktory), <ol> to lista uporządkowana (numery), a każdy element listy to <li>. Listy można zagnieżdżać jedna w drugiej. <dl>/<dt>/<dd> to lista definicji: pojęcie i jego opis.
Lista zakupów jako lista nieuporządkowana.
Kod
<h2>Lista zakupów</h2>
<ul>
<li>Chleb</li>
<li>Mleko</li>
<li>Jajka</li>
<li>Masło</li>
</ul>Zrób listę uporządkowaną (ol) z co najmniej 4 krokami dowolnego prostego przepisu kulinarnego.
Lista zagnieżdżona: kategorie, a w każdej z nich podkategorie jako lista wewnątrz elementu li.
Kod
<ul>
<li>Owoce
<ul>
<li>Jabłka</li>
<li>Banany</li>
</ul>
</li>
<li>Warzywa
<ul>
<li>Marchew</li>
<li>Ziemniaki</li>
</ul>
</li>
</ul>Zrób listę definicji (dl/dt/dd) z trzema pojęciami związanymi z HTML (np. „znacznik”, „atrybut”, „element”) i krótkim wyjaśnieniem każdego.
Linki i kotwice
<a href="..."> tworzy link. Atrybut target="_blank" otwiera go w nowej karcie, mailto: i tel: otwierają program pocztowy/telefon. Kotwica wewnętrzna to link do id elementu na tej samej stronie: href="#id".
Link zewnętrzny otwierany w nowej karcie oraz link do adresu e-mail.
Kod
<a href="https://pl.wikipedia.org" target="_blank">Wikipedia</a>
<a href="mailto:kontakt@szkola.pl">Napisz do nas</a>Stwórz link do strony dowolnej szkoły, otwierany w nowej karcie, oraz link tel: do numeru telefonu 501234567.
Menu z kotwicami prowadzącymi do sekcji tej samej strony, plus link „na górę” na końcu.
Kod
<nav>
<a href="#o-mnie">O mnie</a>
<a href="#umiejetnosci">Umiejętności</a>
</nav>
<h2 id="o-mnie">O mnie</h2>
<p>...treść...</p>
<h2 id="umiejetnosci">Umiejętności</h2>
<p>...treść...</p>
<a href="#o-mnie">↑ Powrót na górę</a>Zrób 3 sekcje na stronie („O mnie”, „Umiejętności”, „Kontakt”, każda z innym id) i menu na górze strony z linkami-kotwicami do wszystkich trzech.
Obrazy i grafika
<img src="..." alt="..."> wstawia obraz. Atrybut alt jest obowiązkowy (opis dla czytników ekranu i na wypadek, gdy obraz się nie wczyta). width/height ustalają rozmiar. <figure> z <figcaption> łączy obraz z jego podpisem.
Pojedynczy obraz z opisowym alt i ustaloną szerokością.
Kod
<img src="gory.jpg" alt="Widok na Tatry o zachodzie słońca" width="400">Wstaw obraz (dowolna nazwa pliku) z sensownym, opisowym atrybutem alt i szerokością 300 pikseli.
Obraz połączony z podpisem za pomocą figure/figcaption.
Kod
<figure>
<img src="wykres.png" alt="Wykres sprzedaży w 2025 roku" width="350">
<figcaption>Rys. 1 — Sprzedaż w poszczególnych miesiącach 2025 r.</figcaption>
</figure>Zrób prostą galerię z 3 obrazów, każdy w osobnym figure z własnym figcaption.
Tabele
Tabelę tworzy <table>, wiersze <tr>, komórki nagłówkowe <th>, a zwykłe komórki <td>. <thead>/<tbody>/<tfoot> dzielą tabelę logicznie. colspan scala komórki w poziomie, rowspan w pionie.
Prosta tabela ocen z nagłówkiem (thead) i ciałem (tbody).
Kod
<table>
<thead>
<tr>
<th>Imię i nazwisko</th>
<th>Ocena</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jan Kowalski</td>
<td>4</td>
</tr>
<tr>
<td>Anna Nowak</td>
<td>5</td>
</tr>
</tbody>
</table>Zrób tabelę planu lekcji: nagłówek z dniami tygodnia (poniedziałek–piątek), a poniżej co najmniej 3 wiersze z godzinami i nazwami przedmiotów.
Nagłówek scalony przez colspan oraz komórka scalona w pionie przez rowspan.
Kod
<table>
<tr>
<th colspan="2">Dane ucznia</th>
</tr>
<tr>
<td rowspan="2">Klasa 3A</td>
<td>Jan Kowalski</td>
</tr>
<tr>
<td>Anna Nowak</td>
</tr>
</table>Zrób tabelę cennika z dwiema kategoriami produktów (np. „Napoje” i „Przekąski”), gdzie nazwa kategorii jest scalona przez rowspan obejmujący kilka pozycji z tej kategorii.
Formularze — pola tekstowe
Formularz zaczyna <form>. Pola tekstowe to <input type="text/email/password/number">. Każde pole powinno mieć powiązany <label for="id"> (klik w etykietę ustawia focus na polu). Przycisk to <button>.
Pole tekstowe z etykietą, tekstem podpowiedzi (placeholder) i przyciskiem.
Kod
<form>
<label for="imie">Imię:</label>
<input type="text" id="imie" name="imie" placeholder="Wpisz imię">
<button type="button">Wyślij</button>
</form>Zrób formularz z polem type="email" z powiązaną etykietą i placeholder, oraz przyciskiem „Zapisz się”.
Pole liczbowe z ograniczonym zakresem (min/max) i wymagane (required).
Kod
<label for="wiek">Wiek:</label>
<input type="number" id="wiek" name="wiek" min="15" max="100" required>Zrób pole type="password" z etykietą, atrybutem minlength="8" i required.
Formularze — wybór z listy
radio (kilka pól o tej samej name, tylko jedno można zaznaczyć) i checkbox (dowolnie wiele naraz) to pola wyboru. <select> z <option> to lista rozwijana, <textarea> to wieloliniowe pole tekstowe. <fieldset>+<legend> grupują powiązane pola.
Grupa radio buttonów (dokładnie jeden wybór) opisana przez fieldset/legend.
Kod
<fieldset>
<legend>Poziom zaawansowania</legend>
<label><input type="radio" name="poziom" value="Początkujący" checked> Początkujący</label>
<label><input type="radio" name="poziom" value="Średni"> Średni</label>
<label><input type="radio" name="poziom" value="Zaawansowany"> Zaawansowany</label>
</fieldset>Zrób grupę co najmniej 3 checkboxów (np. wybór umiejętności) w fieldset z opisową legend.
Lista rozwijana select z kilkoma opcjami.
Kod
<label for="kraj">Kraj:</label>
<select id="kraj" name="kraj">
<option value="">-- Wybierz --</option>
<option value="Polska">Polska</option>
<option value="Niemcy">Niemcy</option>
</select>Zrób pole textarea z etykietą „Wiadomość”, atrybutami rows="4" i maxlength="200".
Elementy semantyczne HTML5
<header>, <nav>, <main>, <section>, <article>, <aside>, <footer> nadają strukturze strony znaczenie — zamiast wszystkiego w samych divach, mówimy przeglądarce i czytnikom ekranu, czym jest dana część.
Podstawowy szkielet semantyczny: nagłówek z nawigacją, treść główna, stopka.
Kod
<header>
<h1>Moja strona</h1>
<nav>
<a href="#">Start</a>
<a href="#">O mnie</a>
</nav>
</header>
<main>
<p>Główna treść strony...</p>
</main>
<footer>
<p>© 2026 Moja strona</p>
</footer>Rozbuduj powyższy szkielet o <aside> obok main, zawierający listę 3 poleconych linków.
main podzielony na section, a wewnątrz sekcji osobne article na każdy samodzielny wpis.
Kod
<main>
<section>
<h2>Najnowsze wpisy</h2>
<article>
<h3>Pierwszy wpis</h3>
<p>Treść pierwszego wpisu...</p>
</article>
<article>
<h3>Drugi wpis</h3>
<p>Treść drugiego wpisu...</p>
</article>
</section>
</main>Zrób stronę bloga: header z tytułem, main z jedną section „Najnowsze wpisy” zawierającą 2 article (każdy z własnym h3 i akapitem), oraz footer.
Div, span, klasy i id
<div> to uniwersalny kontener blokowy (używany, gdy żaden element semantyczny nie pasuje), <span> to kontener liniowy (do owinięcia fragmentu tekstu). Atrybut class może powtarzać się na wielu elementach (i element może mieć kilka klas naraz), a id musi być unikalny na całej stronie.
div jako „karta” z dwiema klasami naraz (rozdzielonymi spacją).
Kod
<div class="karta wyrozniona">
<h3>Laptop Dell</h3>
<p>Cena: 3200 zł</p>
</div>Zrób div „karta produktu” z dwiema klasami: karta i promocja, zawierający nazwę produktu i cenę.
span do podświetlenia fragmentu zdania inną klasą oraz element z unikalnym id.
Kod
<p id="powitanie">
Witaj, <span class="wazne">Kowalski</span>! Masz
<span class="liczba">3</span> nowe wiadomości.
</p>Napisz akapit z dwoma fragmentami tekstu owiniętymi w span o różnych klasach, a samemu akapitowi nadaj unikalny id.
Mini-projekt: strona wizytówka
To zadanie łączy wszystko z poprzednich sekcji: nagłówki, listy, tabelę, formularz, obrazy i strukturę semantyczną. Brak tu gotowego rozwiązania — to samodzielny projekt, rozpisany na kroki.
Cel: jednostronicowa wizytówka osobista z nawigacją, sekcją o sobie, umiejętnościami, dostępnością w tabeli i formularzem kontaktowym.
Krok 1 — nagłówek i nawigacja. Dodaj <header> z <h1> (Twoje imię i nazwisko) oraz <nav> z linkami-kotwicami do trzech sekcji: „O mnie”, „Umiejętności”, „Kontakt”.
Krok 2 — sekcja „O mnie”. W <main> dodaj <section id="o-mnie"> z nagłówkiem h2, akapitem o sobie oraz zdjęciem w figure+figcaption.
Krok 3 — sekcja „Umiejętności”. Dodaj <section id="umiejetnosci"> z listą ul zawierającą co najmniej 4 umiejętności.
Krok 4 — tabela dostępności. W tej samej sekcji dodaj tabelę z dniami tygodnia i godzinami, kiedy jesteś dostępny/a (np. na korepetycje albo konsultacje).
Krok 5 — sekcja „Kontakt”. Dodaj <section id="kontakt"> z formularzem: pole na imię, pole email, pole textarea na wiadomość i przycisk „Wyślij”.
Krok 6 — panel boczny. Dodaj <aside> z linkami do mediów społecznościowych (linki zewnętrzne z target="_blank") oraz linkiem tel:.
Krok 7 (dodatkowo). Dodaj <footer> z informacją o prawach autorskich i linkiem „↑ Powrót na górę” prowadzącym z powrotem do header.
Typowe zadania egzaminacyjne
Od tego miejsca sekcje odpowiadają zadaniom, jakie realnie pojawiają się na egzaminie praktycznym INF.03: zbudowanie semantycznego szkieletu strony, formularz z wieloma typami pól naraz, tabele z danymi (cenniki, harmonogramy) oraz strona z galerią i nawigacją kotwicową. Ten sam układ co wcześniej — przykład z gotowym kodem obok zadania do samodzielnego wykonania.
Semantyczny szkielet strony
Egzamin niemal zawsze każe zbudować pełny szkielet strony z konkretnymi wymaganiami co do treści: ile linków w nawigacji, jakie sekcje w środku, co ma się znaleźć w stopce. Mechanika jest zawsze taka sama — header / nav / main / aside / footer — zmienia się tylko konkretna treść.
Szkielet sklepu internetowego: nagłówek z nazwą firmy i menu nawigacyjnym z czterema linkami-kategoriami.
Kod
<header>
<h1>Sklep Komputerowy XYZ</h1>
<nav>
<a href="#laptopy">Laptopy</a>
<a href="#monitory">Monitory</a>
<a href="#akcesoria">Akcesoria</a>
<a href="#kontakt">Kontakt</a>
</nav>
</header>Zrób header z h1 „Szkoła Językowa ABC” i nav zawierającym 5 linków-kotwic do kategorii kursów (np. angielski, niemiecki, hiszpański, dla dzieci, kontakt).
Pełny układ: main z dwiema sekcjami, aside z promocjami i footer z danymi kontaktowymi.
Kod
<main>
<section id="o-firmie">
<h2>O firmie</h2>
<p>Działamy na rynku od 2010 roku...</p>
</section>
<section id="oferta">
<h2>Nasza oferta</h2>
<p>Sprzedajemy sprzęt komputerowy...</p>
</section>
</main>
<aside>
<h2>Promocje</h2>
<ul>
<li>Laptop -15%</li>
<li>Myszka gratis</li>
</ul>
</aside>
<footer>
<p>ul. Handlowa 5, Warszawa | tel. 501 234 567</p>
</footer>Zrób main z sekcjami „O firmie” i „Nasza oferta”, aside z listą „Najczęściej wybierane kursy” oraz footer z adresem i numerem telefonu.
Formularz egzaminacyjny
Typowy formularz na egzaminie łączy kilka różnych typów pól naraz. Kluczowa zasada: każde pole ma swój id, a powiązany z nim <label for="..."> ma dokładnie tę samą wartość — bez tego formularz traci na dostępności, a często i punkty na egzaminie.
Formularz rejestracyjny: imię, e-mail, hasło i zgoda w postaci checkboxa, wszystko w fieldset.
Kod
<form>
<fieldset>
<legend>Rejestracja</legend>
<label for="imie">Imię:</label>
<input type="text" id="imie" name="imie" required>
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" required>
<label for="haslo">Hasło:</label>
<input type="password" id="haslo" name="haslo" minlength="8" required>
<label>
<input type="checkbox" id="zgoda" name="zgoda" required>
Akceptuję regulamin
</label>
<button type="submit">Zarejestruj</button>
</fieldset>
</form>Zrób formularz zamówienia: select z nazwą produktu (min. 3 opcje), pole number na ilość (z min="1"), textarea na uwagi do zamówienia i przycisk „Zamawiam”.
Formularz z grupą radio (sposób dostawy) oraz atrybutami required wymuszającymi wypełnienie.
Kod
<fieldset>
<legend>Sposób dostawy</legend>
<label><input type="radio" name="dostawa" value="Kurier" checked> Kurier</label>
<label><input type="radio" name="dostawa" value="Paczkomat"> Paczkomat</label>
<label><input type="radio" name="dostawa" value="Odbiór osobisty"> Odbiór osobisty</label>
</fieldset>Zrób grupę co najmniej 3 checkboxów „Dodatki do zamówienia” w fieldset oraz osobny select „Metoda płatności” z co najmniej 3 opcjami.
Tabela danych (cennik, harmonogram)
Egzamin bardzo lubi tabele z konkretnymi danymi — cenniki, harmonogramy, wyniki. Częsty dodatek to tfoot z podsumowaniem (np. sumą) w komórce scalonej przez colspan, albo rowspan grupujący kilka wierszy pod wspólną kategorią.
Cennik usług z thead, tbody i wierszem podsumowania w tfoot (etykieta scalona przez colspan).
Kod
<table>
<thead>
<tr><th>Usługa</th><th>Cena</th><th>Czas</th></tr>
</thead>
<tbody>
<tr><td>Strzyżenie</td><td>40 zł</td><td>30 min</td></tr>
<tr><td>Farbowanie</td><td>120 zł</td><td>90 min</td></tr>
</tbody>
<tfoot>
<tr><td colspan="2">Łączny czas obu usług</td><td>120 min</td></tr>
</tfoot>
</table>Zrób harmonogram zajęć: kolumny „Przedmiot”, „Dzień”, „Godzina”, co najmniej 5 wierszy z danymi w tbody.
Tabela z rowspan grupującym kilka wierszy pod jedną wspólną kategorią wiekową.
Kod
<table>
<tr><th>Kategoria</th><th>Zawodnik</th><th>Wynik</th></tr>
<tr>
<td rowspan="2">Junior</td>
<td>Jan Kowalski</td><td>12.4 s</td>
</tr>
<tr>
<td>Piotr Nowak</td><td>12.9 s</td>
</tr>
</table>Zrób tabelę cennika biletów na wydarzenie: nazwa wydarzenia scalona rowspan-em obejmującym dwa wiersze — bilet normalny i ulgowy, każdy z osobną ceną.
Galeria i nawigacja kotwicowa
Częsty wymóg egzaminacyjny: strona-katalog, gdzie miniaturki obrazów są jednocześnie linkami — do pełnej wersji obrazu albo do sekcji ze szczegółami — a menu nawigacyjne pozwala szybko przeskoczyć do dowolnej części strony.
Obraz w figure, cały obraz jest linkiem (img owinięty w a) do pliku w pełnym rozmiarze.
Kod
<figure>
<a href="produkt1-pelny.jpg">
<img src="produkt1-miniatura.jpg" alt="Klawiatura mechaniczna RGB" width="200">
</a>
<figcaption>Klawiatura mechaniczna RGB</figcaption>
</figure>Zrób galerię 4 produktów (obraz + figcaption z nazwą), gdzie każdy obraz jest linkiem-kotwicą do osobnej sekcji na tej samej stronie ze szczegółowym opisem tego produktu.
Menu nawigacyjne z kotwicami do 4 sekcji, plus link „na górę” umieszczony na końcu strony.
Kod
<nav>
<a href="#galeria">Galeria</a>
<a href="#opis">Opis</a>
<a href="#cennik">Cennik</a>
<a href="#kontakt">Kontakt</a>
</nav>
<!-- ...treść stron... -->
<a href="#top">↑ Powrót na górę</a>Rozbuduj powyższe menu o piąty punkt „Opinie” i dodaj odpowiadającą mu sekcję id="opinie" gdzieś dalej na stronie.
Projekt egzaminacyjny: strona wielosekcyjna
Zadanie łączy wszystko z bloku egzaminacyjnego: semantyczny szkielet, tabelę, formularz, galerię i nawigację kotwicową w jednym, spójnym projekcie. Jak w mini-projekcie z sekcji 11 — brak gotowego rozwiązania, tylko kroki do samodzielnej realizacji.
Cel: strona internetowa lokalnej kawiarni z menu, galerią, formularzem rezerwacji stolika i danymi kontaktowymi.
Krok 1 — nagłówek i nawigacja. Dodaj <header id="top"> z h1 (nazwa kawiarni) i nav z kotwicami do sekcji: Menu, Galeria, Rezerwacja, Kontakt.
Krok 2 — sekcja „Menu”. Dodaj <section id="menu"> z tabelą cennika: kolumny „Kategoria”, „Danie”, „Cena”, z thead/tbody i wierszem podsumowania w tfoot (scalonym przez colspan).
Krok 3 — sekcja „Galeria”. Dodaj <section id="galeria"> z co najmniej 4 zdjęciami wnętrza/dań, każde w figure z figcaption.
Krok 4 — sekcja „Rezerwacja”. Dodaj <section id="rezerwacja"> z formularzem: imię (text), data (date), godzina (time), liczba osób (number, min="1"), uwagi (textarea) i przycisk „Zarezerwuj”.
Krok 5 — panel boczny. Dodaj <aside> z godzinami otwarcia w formie listy definicji (dl/dt/dd, dzień → godziny) oraz linkiem tel: do rezerwacji telefonicznej.
Krok 6 — stopka. Dodaj <footer id="kontakt"> z adresem, linkami do mediów społecznościowych (target="_blank") i linkiem „↑ Powrót na górę” do #top.
Krok 7 (dodatkowo). Dodaj sekcję „Opinie klientów” z co najmniej dwoma cytatami w blockquote, każdy podpisany imieniem gościa w <cite>.
To już komplet materiału
Szesnaście sekcji: dwanaście od szkieletu dokumentu po mini-projekt z podstawowymi znacznikami, a kolejne pięć — wyróżnione czerwienią i osobnym blokiem — to zadania typowe dla egzaminu praktycznego INF.03 (semantyczny szkielet strony, formularze, tabele danych, galeria z nawigacją i pełny projekt egzaminacyjny). Najlepiej działa to tak: przeczytaj przykład, rozwiń kod dopiero gdy utkniesz, a zadanie obok zrób samodzielnie w osobnym pliku .html.