Jak zbudować stronę z arkusza egzaminacyjnego

W każdym arkuszu INF.03 jest część „Witryna internetowa”: opis bloków strony i ich zawartości, np. „w banerze nagłówek pierwszego stopnia o treści…”, „lista numerowana z pozycjami…”, „obraz ryba.jpg z tekstem alternatywnym…”, „formularz z polem numerycznym i przyciskiem…”. Ten kurs uczy zamieniać takie zdania na znaczniki HTML.

<!-- wymaganie: „w banerze nagłówek pierwszego stopnia o treści Portal dla wędkarzy” -->
<header>
  <h1>Portal dla wędkarzy</h1>
</header>

Jak korzystać z kursu

• Lekcje idą po kolei: podstawy, tekst, odnośniki i obrazy, listy i tabele, układ strony, formularze, multimedia, a na końcu cała strona jak na egzaminie.
• Prawie każda lekcja ma ćwiczenie. Piszesz HTML, podgląd odświeża się w trakcie pisania, a „Sprawdź” bada zbudowaną stronę: czy są właściwe znaczniki, atrybuty i treść. Pod zadaniem możesz rozwinąć listę potrzebnych znaczników.
• Pod lekcjami są pytania „Sprawdź się”. Najpierw odpowiedz sam, dopiero potem rozwiń przykładową odpowiedź.
• Co kilka lekcji czeka zadanie praktyczne (Z1–Z7). Robisz je w edytorze na swoim komputerze i krok po kroku budujesz jedną witrynę: stronę klubu turystycznego „Szlak”. Po skończeniu oznacz zadanie jako zrobione.
• W podglądzie obrazy zastępują plansze z nazwą pliku, a odnośniki i formularze nie przenoszą na inną stronę, tylko pokazują na dole, dokąd by prowadziły i jakie dane by wysłały.
• Wygląd strony (kolory, czcionki, ramki) to CSS: kurs „CSS od podstaw”. Ustawianie bloków obok siebie: kurs „Układ strony: float i flex”.
• Postęp i twoje szkice zapisują się w tej przeglądarce.

Czym jest HTML i gdzie go pisać

HTML (HyperText Markup Language) to język, w którym zapisuje się strony internetowe. HyperText to tekst z odnośnikami do innych dokumentów, a Markup Language to język znaczników, czyli sposób oznaczania fragmentów treści. HTML nie jest językiem programowania: nie ma zmiennych, warunków ani pętli. Opisuje tylko strukturę: mówi przeglądarce, że ten fragment jest nagłówkiem, ten akapitem, a ten odnośnikiem.

Przeglądarka nie wyświetla znaczników. Odczytuje je, żeby zdecydować, jak pokazać treść.

Trzy warstwy strony

Tim Berners-Lee wymyślił WWW w 1989 roku. Po wersjach HTML 2, 3.2, 4.01 i XHTML w 2014 roku standardem został HTML5. Dziś HTML rozwija się jako „żywy standard” (HTML Living Standard), poprawiany na bieżąco przez organizację WHATWG, więc „HTML6” nie będzie.

Edytor i pierwsza strona

Wystarczy dowolny edytor tekstu. Wygodniej pisze się w edytorze dla programistów, np. Visual Studio Code albo Notepad++: kolorują składnię i podpowiadają znaczniki. Edytorów „wizualnych”, w których się klika zamiast pisać, unikaj: na egzaminie liczy się kod, który rozumiesz.

1. Utwórz nowy plik i wpisz kod strony.
2. Zapisz go z rozszerzeniem .html (np. index.html) i kodowaniem UTF-8. .htm działa tak samo, ale przyjęło się .html.
3. Otwórz plik w przeglądarce dwuklikiem albo przeciągając go na okno.
4. Po każdej zmianie zapisz plik (Ctrl+S) i odśwież kartę (F5).

Zaglądanie do kodu strony

• Ctrl+U: źródło strony, czyli dokładnie ten tekst, który jest w pliku.
• F12 albo prawy przycisk myszy → „Zbadaj”: narzędzia deweloperskie. Zakładka Elementy pokazuje drzewo, które przeglądarka zbudowała z kodu, już po poprawieniu błędów. Możesz tu na próbę zmieniać tekst i style; zmiany znikną po odświeżeniu.

Struktura dokumentu HTML

Treść otaczają znaczniki: otwierający <p> i zamykający </p>. Razem z treścią tworzą element. Każdy dokument HTML5 ma ten sam szkielet; warto umieć napisać go z pamięci:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Schronisko Łapa</title>
  <link rel="stylesheet" href="styl.css">
</head>
<body>
  <h1>Schronisko Łapa</h1>
  <p>Adoptuj psa albo kota.</p>
</body>
</html>

Co może być w head

Drzewo dokumentu

Elementy są zagnieżdżone: jeden leży w drugim. Przeglądarka buduje z nich drzewo, w którym head i body są dziećmi html.

Elementy i atrybuty

Element to wszystko od znacznika otwierającego do zamykającego, razem z treścią. Elementy można zagnieżdżać, a obowiązuje zasada pudełek: element otwarty jako ostatni zamyka się jako pierwszy. <p><strong>…</strong></p> jest dobrze, <p><strong>…</p></strong> źle.

• Elementy puste nie mają treści ani znacznika zamykającego: br, hr, img, input, meta, link. Zapis z ukośnikiem <br /> też jest poprawny; wymaga go dopiero XHTML.
• Nie pomijaj znaczników zamykających. Przeglądarka często „dopisze” brakujące </p>, ale w złożonym kodzie efekt bywa nieprzewidywalny, a walidator zgłosi błąd.
• Wielkość liter w nazwach elementów nie ma znaczenia (<P> = <p>), ale standardem jest zapis małymi literami.

Atrybuty

Atrybuty przekazują dodatkowe informacje o elemencie. Zapisuje się je w znaczniku otwierającym jako nazwa="wartość", oddzielone spacjami.

Atrybuty pasujące do każdego elementu (id, class, style, title, lang, hidden) to atrybuty globalne. Pozostałe mają sens tylko przy konkretnych elementach: src przy akapicie nic nie da.

• Cudzysłowy: wartość ze spacją bez cudzysłowu się rozpada. W <a href=moja strona.html> adresem będzie tylko moja. Gdy wartość zawiera cudzysłów podwójny, otocz ją pojedynczymi: title='Nazywają go "Wilk"'.
• Atrybuty logiczne działają samą obecnością: disabled, required, checked, hidden. disabled="false" nadal wyłącza pole.

Wizytówka klubu

Czas: 25 minZakres: podstawyForma: pierwsza strona od zera

Przygotuj folder projektu i pierwszą stronę klubu turystycznego „Szlak”. Na tym projekcie zbudujesz wszystkie kolejne zadania praktyczne. Pracujesz w edytorze na swoim komputerze.

Założenia

• Folder szlak, w nim plik index.html i podfolder img z dowolną kwadratową ikonką favicon.png.
• Poprawny szkielet HTML5: język polski, kodowanie UTF-8, znacznik viewport.
• Tytuł karty „Klub turystyczny Szlak”; na karcie widać favicon.
• W head opis strony: „Klub turystyczny z Płocka: wyjazdy, zapisy i galeria zdjęć.”
• W treści nagłówek pierwszego stopnia „Klub turystyczny Szlak” i akapit z opisem klubu (2–3 zdania z polskimi znakami).
• Po najechaniu kursorem na akapit z opisem pojawia się dymek „Działamy od 2015 roku”.
• Pod opisem pozioma linia, a pod nią akapit z adresem w dwóch wierszach: „ul. Tumska 1” i „09-400 Płock”.
• Na końcu odnośnik „Polskie Towarzystwo Turystyczno-Krajoznawcze” do https://www.pttk.pl.
• Nazwy elementów i atrybutów małymi literami, wartości atrybutów w cudzysłowach.

Ocenie podlega

• strona otwiera się poprawnie, polskie znaki wyświetlają się bez błędów,
• tytuł i favicon są widoczne na karcie,
• dymek działa,
• adres jest w dwóch wierszach jednego akapitu,
• wszystkie elementy są poprawnie zagnieżdżone i zamknięte.

Nagłówki i akapity

Nagłówki mają sześć stopni, od h1 (najważniejszy) do h6. Razem tworzą konspekt strony, jak spis treści w książce. Stopień oznacza ważność, nie rozmiar; rozmiar ustawia się w CSS. Arkusz pisze „nagłówek pierwszego stopnia”, „nagłówek trzeciego stopnia” i to od razu mówi, który znacznik wybrać.

• Na stronie powinien być jeden h1: główny temat strony.
• Nie przeskakuj stopni: po h2 idzie h3, nie h5.
• Nie używaj nagłówka tylko po to, żeby pogrubić albo powiększyć tekst. Za duży nagłówek zmniejszasz stylem, a nie zamieniasz h2 na h4.

Akapity i białe znaki

p to akapit: zaczyna się w nowej linii, a przeglądarka dodaje odstęp nad nim i pod nim. Przeglądarka zwija białe znaki: kilka spacji i enterów w kodzie zamienia na jedną spację. Wyjątkiem jest pre (tekst sformatowany), który zachowuje spacje i podziały wierszy i pisze czcionką o stałej szerokości.

Wyróżnienia w tekście i encje

Wewnątrz akapitu można wyróżnić słowa. Część znaczników niesie znaczenie, część tylko wygląd:

strong i b wyglądają tak samo, podobnie em i i. Różnicę słyszy czytnik ekranu, który zmienia intonację, i widzi wyszukiwarka. Na co dzień wybieraj strong i em. Gdy arkusz każe „pogrubić” albo „pochylić” tekst, egzaminator przyjmie oba zapisy, a gdy wprost wymienia znacznik, użyj tego.

Komentarze

Komentarz <!-- … --> może mieć wiele wierszy i służy do notatek albo do tymczasowego „wyłączenia” fragmentu kodu. Nie da się go zagnieździć: pierwsze --> kończy komentarz.

Encje: znaki specjalne

Znak < w treści przeglądarka bierze za początek znacznika. Takie znaki zapisuje się encjami: nazwą &nazwa; albo numerem &#numer;. Nazwy encji rozróżniają wielkość liter.

Encjami zapiszesz też symbole matematyczne (∑, ∞) i litery greckie (α, Ω). Emoji to zwykłe znaki Unicode: można je wkleić albo wpisać numerem, np. 😀 to 😀. Zachowują się jak tekst.

Kodowanie znaków

Komputer przechowuje znak jako liczbę, a kodowanie mówi, która liczba to który znak. ASCII ma tylko 128 znaków, bez polskich liter. ISO-8859-2 i Windows-1250 dodały znaki środkowoeuropejskie, ale każde inaczej. UTF-8 obejmuje niemal wszystkie znaki świata i to jego zawsze używasz: <meta charset="utf-8"> w kodzie i zapis pliku w UTF-8 w edytorze.

Adres URL może zawierać tylko znaki ASCII; resztę przeglądarka zamienia na % i cyfry szesnastkowe. Spacja to %20, a „ł” to %C5%82. Dlatego pliki nazywaj bez spacji i polskich znaków.

Cytaty, skróty, kontakt i kod

Kod komputerowy

• <kbd>: klawisze, które naciska użytkownik.
• <samp>: to, co wypisał program.
• <var>: zmienna we wzorze albo programie.
• <code>: fragment kodu. Dłuższy kod umieszcza się w pre z code w środku, żeby zachować wcięcia. Znaki < i > w pokazywanym kodzie zapisuje się encjami.

Relacja z wyprawy

Czas: 35 minZakres: tekstForma: strona tekstowa

Utwórz w folderze szlak plik relacja.html z relacją z klubowego wyjazdu w Bieszczady. Treść wymyśl sam; liczy się poprawne oznaczenie każdego fragmentu. Nie używaj CSS.

Założenia

• Szkielet jak w zadaniu Z1, tytuł karty „Relacja: Bieszczady 2026”.
• Na początku kodu komentarz z imieniem autora i datą, niewidoczny na stronie.
• Nagłówek pierwszego stopnia z tytułem relacji i trzy części z nagłówkami drugiego stopnia: „Dzień 1”, „Dzień 2”, „Wnioski”; w każdej co najmniej jeden akapit.
• W tekście: ważne ostrzeżenie (znaczeniowo), słowo z akcentem, fragment wyróżniony jak zakreślaczem i zmiana godziny zbiórki pokazana jako treść usunięta i wstawiona.
• Wysokość szczytu z jednostką zapisana tak, że liczba i „m n.p.m.” nie rozdzielą się przy łamaniu wiersza.
• Temperatura ze znakiem stopnia wstawionym encją, np. „4°C”.
• Cytat przewodnika jako osobny blok ze źródłem w atrybucie oraz krótki cytat wpleciony w zdanie.
• Skrót „PTTK” z pełną nazwą w dymku.
• Lista rzeczy do plecaka wyrównana spacjami w dwóch kolumnach (np. „czołówka 1 szt.”), wyświetlana dokładnie tak, jak w kodzie.
• Na końcu dane kontaktowe organizatora w elemencie na kontakt i linijka „© 2026 Klub turystyczny Szlak” ze znakiem zapisanym encją.

Ocenie podlega

• hierarchia nagłówków bez przeskakiwania stopni,
• znaczniki dobrane do znaczenia treści, a nie tylko do wyglądu,
• poprawne encje i twarda spacja,
• lista do plecaka zachowuje wyrównanie,
• komentarz niewidoczny na stronie.

Atrybut style, kolory i dołączanie CSS

Atrybut style nadaje wygląd jednemu elementowi. Jego wartość to deklaracje CSS właściwość: wartość; rozdzielone średnikami.

<h1 style="color: DarkGreen; text-align: center;">Klub Szlak</h1>
<p style="background-color: #FDF0EA; font-family: Verdana, sans-serif;">Zapisy do piątku.</p>
<p style="font-size: 20px; border: 2px solid Tomato;">Tekst z ramką</p>

Zapis kolorów

• Nazwa: przeglądarki znają około 140 nazw, np. Tomato, DodgerBlue, SlateGray. Wielkość liter nie ma znaczenia.
• RGB: rgb(czerwony, zielony, niebieski), każda składowa od 0 do 255, razem ponad 16 milionów kolorów. rgb(0, 0, 0) to czerń, trzy równe wartości dają szarość.
• HEX: #RRGGBB, te same składowe szesnastkowo od 00 do FF (255). Skrót #F00 = #FF0000.
• HSL: hsl(odcień, nasycenie, jasność). Odcień to kąt na kole barw (0 czerwony, 120 zielony, 240 niebieski). Jasność 0% to zawsze czerń, 100% biel.
• RGBA, HSLA: czwarta wartość to krycie, od 0 (przezroczysty) do 1 (pełny kolor).

Trzy sposoby dołączenia CSS

<!-- 1. w atrybucie style jednego elementu -->
<h1 style="color: DarkGreen;">Klub Szlak</h1>

<!-- 2. element style w head -->
<style>
  h1 { color: DarkGreen; }
</style>

<!-- 3. zewnętrzny plik, podłączony w head -->
<link rel="stylesheet" href="css/styl.css">

Najczęściej używa się zewnętrznego pliku: jeden arkusz obsługuje wszystkie podstrony, więc jedna zmiana zmienia całą witrynę. Plik CSS zawiera tylko reguły, bez HTML. „Kaskadowe” oznacza, że style się nakładają: ustawienia z body dziedziczą elementy w środku, a przy konflikcie wygrywa reguła bardziej szczegółowa; styl w atrybucie style jest silniejszy niż arkusz.

Kolory odnośników

Domyślnie odnośnik nieodwiedzony jest niebieski i podkreślony, odwiedzony fioletowy, a w chwili kliknięcia czerwony. Zmieniają to stany odnośnika w CSS, w kolejności :link, :visited, :hover, :active; inaczej późniejsza reguła przykryje wcześniejszą.

a:link    { color: DarkGreen; text-decoration: none; }
a:visited { color: Olive; }
a:hover   { color: Tomato; text-decoration: underline; }
a:active  { color: Red; }

Odnośniki

Odnośnik (hiperłącze) to znacznik a (od anchor, kotwica) z atrybutem href. Tekst między znacznikami jest tym, co się klika.

<a href="kontakt.html">Kontakt</a>
<a href="https://www.pttk.pl" target="_blank" rel="noopener">PTTK w nowej karcie</a>
<a href="mailto:zapisy@szlak.pl?subject=Zapisy">Napisz do nas</a>
<a href="tel:+48241234567">Zadzwoń</a>
<a href="regulamin.pdf" download>Pobierz regulamin</a>

Atrybuty odnośnika

• target: gdzie otworzyć stronę. _self (domyślnie) w tej samej karcie, _blank w nowej karcie lub oknie, _parent i _top dotyczą stron w ramkach iframe. Arkusz pisze wtedy „otwierany w nowej karcie” albo „w nowym oknie”.
• rel="noopener" przy _blank odcina nowej karcie dostęp do twojej strony.
• download: przeglądarka pobierze plik zamiast go otworzyć.
• title: dymek z informacją, dokąd prowadzi odnośnik.
• Odnośnikiem może być obraz (img wewnątrz a), a w HTML5 nawet cały blok, np. karta z obrazem i tekstem.

Zakładki: odnośnik do miejsca na stronie

Najpierw elementowi nadajesz id, potem odnośnik prowadzi do niego przez #. Tak buduje się spis treści długiej strony.

<a href="#tatry">Przejdź do wyjazdu w Tatry</a>
...
<h2 id="tatry">Tatry: sierpień</h2>

Ścieżki do plików

Ścieżka mówi przeglądarce, gdzie leży plik: strona, obraz, arkusz, skrypt. Weźmy taki projekt:

szlak/
├── index.html
├── css/
│   └── styl.css
├── img/
│   ├── logo.png
│   └── galeria/
│       └── tarnica.jpg
└── wyjazdy/
    ├── tatry.html
    └── pieniny.html

Ten sam plik wskazujesz różnie, zależnie od tego, w której stronie piszesz ścieżkę:

<!-- w pliku index.html -->
<img src="img/galeria/tarnica.jpg" alt="Tarnica o świcie">
<a href="wyjazdy/tatry.html">Tatry</a>

<!-- w pliku wyjazdy/tatry.html -->
<img src="../img/galeria/tarnica.jpg" alt="Tarnica o świcie">
<a href="../index.html">Strona główna</a>
<link rel="stylesheet" href="../css/styl.css">

Obrazy

Obraz wstawia element pusty img. Plik wskazuje src, a alt opisuje go słowami.

<img src="zdjecia/pies.jpg" alt="Pies Burek" width="300">

Poniżej ten sam obraz trzy razy: z właściwą ścieżką, ze złą ścieżką i tekstem alternatywnym oraz ze złą ścieżką bez niego.

Formaty

Podpis i obraz jako odnośnik

<figure>
  <img src="zdjecia/pies.jpg" alt="Pies Burek">
  <figcaption>Burek, 3 lata</figcaption>
</figure>

<!-- miniatura otwiera duże zdjęcie -->
<a href="kot-duzy.png"><img src="kot-maly.png" alt="Kot Mruczek"></a>

Obraz w tle i opływanie tekstem

Obraz, który ma być tłem elementu, ustawia CSS, a nie img: background-image: url('img/gory.jpg'), z background-size: cover (wypełnia cały element) i background-repeat: no-repeat. Styl float: left albo right stawia obraz przy krawędzi, a tekst go opływa.

Mapa obrazu i element picture

Na jednym obrazie można wyznaczyć kilka klikalnych obszarów, np. na mapie szlaków. Obraz wskazuje mapę atrybutem usemap (z kratką), a mapa map (z name bez kratki) zawiera obszary area.

<img src="mapa.png" alt="Mapa szlaków w Bieszczadach" usemap="#szlaki" width="600" height="400">

<map name="szlaki">
  <area shape="rect" coords="40,30,220,140" href="relacja.html#dzien-1" alt="Wetlina">
  <area shape="circle" coords="410,220,60" href="relacja.html#dzien-2" alt="Tarnica">
  <area shape="poly" coords="300,300,380,350,320,390" href="relacja.html" alt="Ustrzyki Górne">
</map>

Współrzędne liczy się w pikselach od lewego górnego rogu obrazu. Odczytasz je w dowolnym programie graficznym; Paint pokazuje je na pasku stanu.

Element picture

picture podaje kilka wersji obrazu, a przeglądarka bierze pierwszą pasującą. Na końcu zawsze stoi zwykły img: to on wyświetla obraz, ma alt i jest wersją zapasową.

<picture>
  <source media="(min-width: 800px)" srcset="img/gory-szerokie.jpg">
  <source type="image/avif" srcset="img/gory.avif">
  <img src="img/gory.jpg" alt="Grań Tatr o zachodzie słońca">
</picture>

Podstrony, galeria i mapa

Czas: 50 minZakres: style, odnośniki, ścieżki, obrazyForma: witryna z kilku podstron

Rozbuduj witrynę klubu o wspólny arkusz stylów, menu łączące podstrony, galerię zdjęć i klikalną mapę.

Założenia

• Struktura: index.html, relacja.html (z Z2) i nowy galeria.html w folderze głównym; css/styl.css; cztery dowolne zdjęcia w img/galeria/ i obraz mapy img/mapa.png.
• Wszystkie trzy podstrony mają podłączony ten sam arkusz. W arkuszu kolor tła strony zapisany szesnastkowo, kolor tekstu w RGB, kolor nagłówków nazwą.
• Odnośniki nieodwiedzone bez podkreślenia, po najechaniu kursorem inny kolor i podkreślenie; stany we właściwej kolejności.
• Na górze każdej podstrony menu z odnośnikami „Start”, „Relacja”, „Galeria” (ścieżki względne).
• W relacja.html części dni mają identyfikatory dzien-1 i dzien-2; na index.html odnośnik „Zobacz relację z Tarnicy” prowadzi wprost do drugiego dnia.
• Na index.html odnośnik do e-maila na zapisy@szlak.pl z tematem „Zapisy” i odnośnik do połączenia telefonicznego.
• galeria.html: nagłówek z obrazem w tle wypełniającym cały blok (wysokość 200 px); pod nim 4 zdjęcia szerokości 300 px z opisowym tekstem alternatywnym; każde zdjęcie otwiera pełny plik w nowej karcie.
• Pod galerią część „Mapa wyjazdu” z obrazem mapy i dwoma obszarami: prostokątnym (do relacja.html#dzien-1) i okrągłym (do relacja.html#dzien-2), każdy z tekstem alternatywnym.

Ocenie podlega

• menu działa na każdej podstronie, bez błędnych ścieżek,
• jeden arkusz obsługuje wszystkie podstrony,
• poprawne stany odnośników,
• zdjęcia mają sensowne teksty alternatywne i otwierają się w nowej karcie,
• oba obszary mapy prowadzą do właściwych miejsc relacji,
• witryna działa po otwarciu z dysku (żadna ścieżka nie zaczyna się od /).

Listy

HTML ma trzy rodzaje list. Punktowana (w arkuszach też „nienumerowana”) ul: zbiór bez znaczącej kolejności. Numerowana ol: kroki, ranking, instrukcja. Opisowa dl: pojęcia z objaśnieniami. Pozycje ul i ol to li, a w ul i ol nie może stać nic poza li.

<ul>
  <li>Pieczywo</li>
  <li>Nabiał</li>
</ul>

<ol type="A">
  <li>Wybierz produkty</li>
  <li>Zapłać</li>
</ol>

Lista zagnieżdżona

Podlista leży wewnątrz pozycji li, przed jej znacznikiem zamykającym. Częsty błąd to wstawienie ul między dwa li. Przeglądarka sama zmienia punktor podlisty (z kropki na kółko).

<ul>
  <li>Owoce
    <ul>
      <li>Jabłka</li>
      <li>Gruszki</li>
    </ul>
  </li>
</ul>

Lista opisowa

dl (description list) składa się z par: dt to pojęcie, dd jego opis (domyślnie z wcięciem). Nadaje się do słowniczków, FAQ i zestawień „cecha: wartość”.

Tabele

Tabela służy do danych, które mają wiersze i kolumny: harmonogramu, cennika, wyników. Składa się z wierszy tr, a wiersze z komórek: th (nagłówkowa) albo td (zwykła). Kolumny nie mają własnego znacznika, wynikają z liczby komórek w wierszu.

<table>
  <caption>Cennik wypożyczalni</caption>
  <thead>
    <tr><th scope="col">Rower</th><th scope="col">Godzina</th><th scope="col">Doba</th></tr>
  </thead>
  <tbody>
    <tr><td>Górski</td><td>15 zł</td><td>60 zł</td></tr>
    <tr><td>Miejski</td><td>10 zł</td><td>40 zł</td></tr>
  </tbody>
</table>

Ramki i odstępy to CSS

Tabela w HTML nie ma ramek. W ćwiczeniach ramki dodaje styl podglądu, a na stronie robi to arkusz:

table, th, td {
  border: 1px solid #999999;
  border-collapse: collapse;   /* jedna linia zamiast podwójnych ramek */
}
table { width: 100%; }
th, td { padding: 8px 12px; }  /* odstęp treści od ramki */
tr:nth-child(even) { background-color: #F5F6F8; }  /* co drugi wiersz */
tr:hover { background-color: #FFF3C4; }           /* wiersz pod kursorem */

Bez border-collapse: collapse każda komórka ma własną ramkę i między komórkami widać podwójne linie. Stary atrybut border="1" działa, ale w HTML5 jest przestarzały.

Scalanie komórek

Komórka może zająć kilka kolumn (colspan) albo kilka wierszy (rowspan). Za każdą zajętą kolumnę albo wiersz trzeba usunąć jedną komórkę, inaczej tabela się „rozjedzie”.

• colspan="2": komórka zajmuje swoje miejsce i miejsce następnej w tym samym wierszu. W wierszu piszesz o jedną komórkę mniej.
• rowspan="2": komórka zajmuje też miejsce w wierszu poniżej. W następnym wierszu pomijasz komórkę w tej kolumnie.
• Sprawdzaj, licząc: każdy wiersz musi dać tyle samo kolumn, wliczając komórki z colspan i te, które „wchodzą” z góry przez rowspan.

Harmonogram wyjazdów

Czas: 40 minZakres: listy i tabeleForma: tabela i listy

Dodaj do witryny podstronę wyjazdy.html z harmonogramem wyjazdów na 2026 rok i informacjami praktycznymi. Dopisz ją do menu na wszystkich podstronach.

Założenia

• Tabela z podpisem „Harmonogram wyjazdów 2026” i kolumnami: Miesiąc, Kierunek, Liczba dni, Trudność, Cena; nagłówki w thead, oznaczone jako nagłówki kolumn.
• W tbody pięć wyjazdów; dwa odbywają się w tym samym miesiącu, a nazwa miesiąca jest wtedy jedną komórką na dwa wiersze.
• Wiersz podsumowania w tfoot: „Łącznie dni” zajmuje dwie pierwsze kolumny, suma dni stoi w kolumnie „Liczba dni”, a dwie ostatnie kolumny wypełnia jedna pusta komórka.
• Kolumna „Cena” ma inne tło niż pozostałe, ustawione grupą kolumn.
• W arkuszu: tabela na całą szerokość, pojedyncze ramki 1 px, dopełnienie komórek 8 px, tło nagłówków, co drugi wiersz treści w innym kolorze, podświetlenie wiersza pod kursorem.
• Pod tabelą lista punktowana „Co zabrać” z kwadratowymi punktorami; pozycja „Ubrania” ma zagnieżdżoną listę z trzema pozycjami.
• Lista numerowana „Jak się zapisać” z czterema krokami i druga lista „Po wyjeździe”, której numeracja zaczyna się od 5.
• Słowniczek z pojęciami grań, przełęcz, szlak jako lista opisowa.

Ocenie podlega

• poprawna liczba komórek w każdym wierszu (nic nie „wystaje”),
• scalenia zgodne z opisem,
• co drugi wiersz wyróżniony selektorem, a nie klasami w HTML,
• podlista zagnieżdżona we właściwym miejscu,
• numeracja drugiej listy od 5,
• nowa podstrona jest w menu wszystkich stron.

Bloki, klasy i identyfikatory

Każdy element ma domyślny sposób wyświetlania:

• Blokowy zaczyna się w nowej linii i zajmuje całą szerokość: div, p, h1–h6, ul, ol, li, table, form, header, section, footer.
• Liniowy (inline) płynie w tekście jak słowo w zdaniu: span, a, strong, em, img, code, label, input, button.

div to blok bez znaczenia ani wyglądu: pojemnik do grupowania elementów, któremu wygląd i miejsce nadaje CSS. span to jego odpowiednik w wierszu tekstu, do wyróżnienia kilku słów. Kilka bloków obok siebie układa display: flex na wspólnym rodzicu (starsze sposoby: float, inline-block).

• Element liniowy nie powinien zawierać blokowego: <span><div>…</div></span> to błąd. Wyjątkiem jest a, który w HTML5 może obejmować całe bloki.
• Blok nie powinien leżeć w akapicie: <p><div>…</div></p> przeglądarka rozbije na dwa osobne elementy.

class i id

<div id="oferta">
  <div class="karta promocja">
    <h3>Rower miejski</h3>
    <p>Cena: <span class="cena">1599 zł</span></p>
  </div>
</div>

• Identyfikator: co najmniej jeden znak, bez spacji, wielkość liter ma znaczenie (Menu i menu to dwa różne). Nie zaczynaj od cyfry. Najbezpieczniej: małe litery, cyfry i myślniki, np. dzien-2.
• Reguła z #id jest silniejsza niż reguła z klasą.
• style="color: DarkRed" to styl tylko dla tego elementu; używaj wyjątkowo.

Znaczniki semantyczne HTML5

Element semantyczny ma nazwę, która mówi, czym jest jego treść. form, table czy article od razu mówią, co zawierają; div i span nic. Na ekranie bloki semantyczne wyglądają jak div, ale czytnik ekranu pozwala przeskoczyć od razu do main albo nav, wyszukiwarka rozumie strukturę, a kod czyta się łatwiej.

section czy article? Zapytaj: czy ten fragment miałby sens wyrwany ze strony, np. udostępniony osobno? Jeśli tak, to article (aktualność, wpis). Jeśli to część większej całości, to section (część „Kontakt”, rozdział). Oba można zagnieżdżać: sekcja „Aktualności” zawiera kilka artykułów. header i footer mogą wystąpić wiele razy, np. w każdym article.

Strona responsywna

Strona responsywna dobrze wygląda na każdym ekranie, od telefonu po duży monitor. Nie robi się osobnej wersji mobilnej: ta sama strona sama się dopasowuje. Po stronie HTML wystarczą dwa elementy, resztę robi CSS.

1. Znacznik viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Bez niego telefon udaje ekran o szerokości około 980 px i pomniejsza całą stronę, a tekst robi się mikroskopijny. width=device-width każe użyć prawdziwej szerokości ekranu, a initial-scale=1.0 ustawia powiększenie na 100%.

2. Obrazy, które się skalują

img {
  max-width: 100%;
  height: auto;
}

max-width: 100% pozwala obrazowi się zmniejszać, ale nie powiększy go ponad oryginał (width: 100% rozciągnąłby mały obraz i go rozmył). height: auto zachowuje proporcje. Różne pliki dla różnych ekranów podaje picture.

3. Media queries

#lewy  { width: 30%; }
#prawy { width: 70%; }

@media screen and (max-width: 700px) {
  .kolumny { flex-direction: column; }  /* kolumny jedna pod drugą */
  #lewy, #prawy { width: 100%; }
}

Reguły w @media działają tylko przy spełnionym warunku. Zapisuj je na końcu arkusza: mają tę samą siłę co wcześniejsze reguły, więc wygrywają dzięki temu, że stoją niżej. Jednostka vw to 1% szerokości okna (font-size: 6vw), ale na telefonie tekst może zrobić się za mały. Wersję mobilną sprawdzisz w narzędziach deweloperskich: Ctrl+Shift+M włącza tryb urządzenia. Gotowe klasy do responsywnych układów mają frameworki, np. Bootstrap.

Układ strony z bloków

Czas: 60 minZakres: układ stronyForma: zadanie w stylu arkusza

Przebuduj index.html według poniższych założeń, używając znaczników semantycznych, klas i identyfikatorów. Style zapisz w css/styl.css.

┌──────────────────── header ────────────────────┐
│  logo, h1                                      │
├───────────────────── nav ──────────────────────┤
│  menu                                          │
├─────── aside ───────┬──────── main ────────────┤
│  panel boczny       │  section                 │
│                     │    article               │
│                     │    article               │
├──────────────────── footer ────────────────────┤
│  kontakt, ©                                    │
└────────────────────────────────────────────────┘

Założenia

• Baner to header o identyfikatorze baner: logo i nagłówek pierwszego stopnia, ciemnozielone tło, biały tekst, wysokość 120 px.
• Menu to nav z listą odnośników do wszystkich podstron, ułożonych poziomo, bez punktorów, z odstępem 20 px.
• Pod menu dwie kolumny: lewa aside o identyfikatorze lewy (30% szerokości) z nagłówkiem „Najbliższy wyjazd” i artykułem z ilustracją z podpisem oraz datą zapisaną z atrybutem w formacie maszynowym; prawa main o identyfikatorze prawy (70%) z częścią „Aktualności”.
• W „Aktualnościach” trzy wpisy jako osobne artykuły klasy karta (ramka, dopełnienie, odstęp między kartami); jeden ma dodatkowo klasę wyrozniona z żółtym tłem.
• W jednym wpisie cena wyróżniona kolorem przez element liniowy klasy cena, bez łamania wiersza.
• Pod aktualnościami część „Pytania” z dwoma pytaniami, których odpowiedzi rozwijają się po kliknięciu, bez JavaScriptu.
• Stopka footer o identyfikatorze stopka: wyśrodkowana informacja o prawach autorskich.
• Przy szerokości do 700 px kolumny leżą jedna pod drugą na całą szerokość, a obrazy nie wychodzą poza swój blok.

Ocenie podlega

• układ zgodny ze schematem, kolumny 30% i 70%,
• znaczniki semantyczne użyte zgodnie ze znaczeniem,
• identyfikatory unikalne, klasy łączone na jednym elemencie,
• menu w poziomie, bez punktorów,
• poprawne zachowanie na wąskim ekranie (tryb urządzenia),
• żadnych tabel ani pustych elementów użytych do budowy układu.

Formularz i pola

Formularz zbiera dane i wysyła je do skryptu na serwerze (na egzaminie zwykle PHP). Całość obejmuje form, a w nim są pola i przycisk wysyłania.

<form action="zapisz.php" method="post">
  <label for="imie">Imię</label>
  <input type="text" id="imie" name="imie">

  <label for="wiek">Wiek</label>
  <input type="number" id="wiek" name="wiek" min="16" max="99">

  <button type="submit">Zapisz</button>
</form>

Atrybuty form

GET czy POST

• name to nazwa danej po stronie serwera: w PHP odczytasz ją jako $_POST['imie']. Dane idą jako pary nazwa=wartość, a pole bez name nie zostanie wysłane.
• id służy przeglądarce: łączy pole z etykietą <label for="imie">. Kliknięcie etykiety ustawia kursor w polu, a czytnik ekranu wie, jak pole się nazywa. Zwykle id i name mają tę samą wartość.
• button wysyła formularz domyślnie. To samo robi <input type="submit" value="Zapisz">, gdzie napis jest w value.

Typy pól input

Domyślny typ to text. Nowsze typy dają gotowe kontrolki (kalendarz, suwak, wybór koloru), sprawdzają dane przy wysyłaniu, a na telefonie otwierają dopasowaną klawiaturę. Wygląd kontrolek różni się między przeglądarkami.

Przyciski opcji, listy wyboru i przyciski

Przyciski opcji i pola wyboru

Przyciski opcji (radio) o tym samym name tworzą grupę, w której zaznacza się jeden; wysyłana jest wartość value zaznaczonego. Pola wyboru (checkbox) są niezależne, można zaznaczyć dowolnie wiele. checked zaznacza pole na starcie.

<input type="radio" id="s" name="rozmiar" value="S"> <label for="s">S</label>
<input type="radio" id="m" name="rozmiar" value="M" checked> <label for="m">M</label>

<input type="checkbox" id="newsletter" name="newsletter">
<label for="newsletter">Chcę dostawać newsletter</label>

Lista rozwijana, podpowiedzi i pole wielowierszowe

• select z option: lista rozwijana. selected wybiera opcję na starcie, size="3" pokazuje trzy pozycje naraz, multiple pozwala wybrać kilka (z Ctrl). optgroup label="…" grupuje opcje. option bez value wysyła swój tekst.
• datalist: lista podpowiedzi dla pola input, połączona atrybutem list. W przeciwieństwie do select można wpisać też własną wartość.
• textarea: pole wielowierszowe. Rozmiar: rows i cols. Ma znacznik zamykający, a domyślną treść wpisuje się między znaczniki, nie w value.
• fieldset i legend: grupa powiązanych pól z ramką i tytułem.
• output: miejsce na wynik obliczenia wykonanego skryptem.

Przyciski

button może zawierać tekst, obraz albo ikonę; input type="submit" tylko tekst. disabled wyłącza przycisk.

Atrybuty pól i sprawdzanie danych

Atrybuty pól określają wartość początkową, ograniczenia i zachowanie. Wiele z nich przeglądarka sprawdza sama przy próbie wysłania. W podglądzie kliknij „Sprawdź” z pustym albo złym kodem pocztowym, a potem z dobrym, i zobacz, które pola zostały wysłane.

Atrybuty form… na polach i przyciskach

form="id-formularza" łączy z formularzem pole leżące poza form. Przycisk wysyłania może mieć własne formaction, formmethod, formtarget i formnovalidate, gdy dwa przyciski mają robić różne rzeczy:

<form id="zgloszenie" action="zapisy.php" method="post">
  <input type="email" name="email" required>
  <button type="submit">Wyślij zgłoszenie</button>
  <button type="submit" formaction="szkic.php" formnovalidate>Zapisz szkic</button>
</form>
<input type="text" name="uwagi" form="zgloszenie">

Formularz zapisów na wyjazd

Czas: 50 minZakres: formularzeForma: formularz w stylu arkusza

Utwórz podstronę zapisy.html z formularzem zgłoszenia na wyjazd i dodaj ją do menu. Formularz wysyła dane metodą POST do zapisy.php (samego skryptu nie piszesz).

Założenia

• Formularz obsługuje wysyłanie pliku; przeglądarka może podpowiadać wcześniej wpisane wartości.
• Grupa „Dane uczestnika” z tytułem: imię i nazwisko (wymagane, najwyżej 60 znaków, kursor w tym polu po wczytaniu strony), e-mail (wymagany), telefon (9 cyfr, z opisem formatu w komunikacie o błędzie), data urodzenia (nie później niż 31.12.2010), kod pocztowy w formacie 00-000.
• Grupa „Wyjazd”: lista rozwijana z kierunkami w grupach „Góry” (Tatry, Bieszczady, Pieniny) i „Inne” (Mazury, Roztocze), domyślnie Bieszczady; liczba osób od 1 do 4, domyślnie 1; nocleg do wyboru jednokrotnego: schronisko lub namiot; sprzęt do wyboru wielokrotnego: kijki, raki, śpiwór; suwak „Kondycja” od 1 do 5.
• Pole „Kod klubowy” z wartością SZLAK-26, którego nie da się zmienić, ale które jest wysyłane.
• Ukryte pole zrodlo z wartością strona.
• Pole wielowierszowe „Uwagi” (4 wiersze) z podpowiedzią w pustym polu.
• Pole „Zdjęcie legitymacji” przyjmujące tylko obrazy.
• Wymagane pole zgody „Akceptuję regulamin” z odnośnikiem do regulaminu (PDF w nowej karcie).
• Trzy przyciski: „Wyślij zgłoszenie” (wysyła), „Wyczyść” (przywraca wartości początkowe) i „Zapisz szkic” (wysyła do szkic.php bez sprawdzania pól).
• Każde pole ma powiązaną etykietę i atrybut name.

Ocenie podlega

• poprawne atrybuty formularza (adres, metoda, wysyłanie plików),
• przeglądarka blokuje wysłanie przy pustych polach wymaganych i złym formacie telefonu albo kodu,
• nocleg pozwala wybrać jedną opcję, sprzęt kilka,
• kliknięcie tekstu każdej etykiety zaznacza odpowiednie pole,
• kod klubowy nie jest edytowalny, ale trafia na serwer,
• „Zapisz szkic” działa także przy pustych polach wymaganych.

Dźwięk, wideo i ramki

HTML5 odtwarza multimedia bez wtyczek (dawniej potrzebny był np. Flash). Bez atrybutu controls nie ma przycisków i nie da się sterować odtwarzaniem.

<video width="400" controls muted poster="img/plakat.jpg">
  <source src="wideo/wyjazd.mp4" type="video/mp4">
  <source src="wideo/wyjazd.webm" type="video/webm">
  Przeglądarka nie obsługuje wideo
</video>

<audio controls>
  <source src="audio/relacja.mp3" type="audio/mpeg">
  <source src="audio/relacja.ogg" type="audio/ogg">
  Przeglądarka nie obsługuje dźwięku
</audio>

Kilka source z różnymi formatami: przeglądarka weźmie pierwszy, który umie odtworzyć. Tekst po ostatnim source pokazuje się tylko w przeglądarce, która nie zna video albo audio. Dźwięk to najczęściej MP3, rzadziej OGG i WAV. Przy jednym pliku wystarczy <audio src="plik.mp3" controls>.

YouTube, mapy i inne strony w ramce

Filmu z YouTube nie wstawia się przez video, bo to nie twój plik, tylko cudza strona z własnym odtwarzaczem. Używa się iframe, ramki z osadzoną stroną. Adres znajdziesz pod filmem: Udostępnij → Umieść. Tak samo osadza się mapę Google albo formularz z innej witryny. title opisuje zawartość ramki dla czytników ekranu.

<iframe width="320" height="180"
        src="https://www.youtube.com/embed/…"
        title="Film z wyjazdu"
        allowfullscreen></iframe>

JavaScript, SVG i canvas

HTML i JavaScript

JavaScript dodaje stronie zachowanie: reakcje na kliknięcia, obliczenia, zmiany treści bez przeładowania. Ten kurs uczy HTML, ale warto wiedzieć, jak oba języki się łączą. Kliknij przyciski w podglądzie.

• Atrybuty zdarzeń, np. onclick, onchange, onmouseover, uruchamiają kod wpisany wprost w atrybucie.
• script zawiera kod albo przez src wskazuje plik .js: <script src="js/skrypt.js"></script>, podobnie jak link wskazuje plik CSS.
• document.getElementById("…") znajduje element po id; dlatego identyfikatory są tak ważne dla skryptów.
• noscript pokazuje treść tylko przy wyłączonym JavaScripcie.
• Skrypt na końcu body (albo w head z atrybutem defer) nie blokuje wyświetlania strony.

SVG i canvas

svg opisuje rysunek kształtami zapisanymi w kodzie: circle, rect, line, polygon, path, z wypełnieniem fill i obrysem stroke. canvas to pusty prostokąt, na którym rysuje dopiero JavaScript.

Cała strona jak na egzaminie

Arkusz opisuje stronę w punktach: najpierw ogólne wymagania (język, kodowanie, tytuł, arkusz stylów), potem bloki po kolei i ich zawartość. Pisz w tej samej kolejności i odhaczaj punkty.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>Wędkowanie</title>
  <link rel="stylesheet" href="styl.css">
</head>
<body>
  <header>
    <h1>Portal dla wędkarzy</h1>
  </header>
  <section id="lewy">
    <!-- zawartość bloku lewego -->
  </section>
  <section id="prawy">
    <!-- zawartość bloku prawego -->
  </section>
  <footer>
    <p>Stronę wykonał: 00000000000</p>
  </footer>
</body>
</html>

1. Najpierw szkielet z pustymi blokami i komentarzami. Otwórz go w przeglądarce.
2. Potem zawartość bloków, jeden po drugim. Treść kopiuj z pliku tekstowego, jeśli arkusz go dołącza.
3. Po każdym bloku odśwież stronę (F5) i porównaj z obrazem w arkuszu.
4. Na końcu wróć do listy wymagań i sprawdź każde: plik, alt, treść, atrybuty, kolejność.

Wymagania arkusza a znaczniki HTML

Arkusz opisuje stronę słowami. Ta tabela tłumaczy najczęstsze sformułowania na znaczniki.

Częste błędy

• Niezamknięty znacznik albo zamknięcie w złej kolejności. Pomaga równe wcinanie kodu.
• Brak cudzysłowu zamykającego w atrybucie: reszta linii staje się wartością atrybutu.
• li poza listą, tr poza tabelą, td wprost w table.
• Inna treść niż w arkuszu: literówka, brak polskiej litery, dodatkowe słowo.
• Ścieżka do obrazu z literą dysku albo złym rozszerzeniem.

Dostępność, walidacja i XHTML

Strony odwiedzają też osoby niewidome i słabowidzące, poruszające się tylko klawiaturą albo z wolnym łączem. Dostępność (accessibility, w skrócie a11y) to nie dodatek, tylko skutek poprawnie napisanego HTML.

Lista kontrolna

• alt przy każdym obrazie (pusty alt="" dla ozdobnych) i lang w html.
• label powiązany z każdym polem formularza przez for i id.
• Logiczna hierarchia nagłówków, bez przeskakiwania stopni.
• Znaczniki semantyczne (nav, main, header, footer) zamiast samych div.
• Wystarczający kontrast tekstu i tła; jasnoszary tekst na białym tle jest dla wielu osób nieczytelny.
• Stronę da się obsłużyć samą klawiaturą: Tab przechodzi między odnośnikami i polami w sensownej kolejności.

Walidacja

Przeglądarki są wyrozumiałe: niezamknięty znacznik czy powtórzony id często niczego widocznie nie psują, ale powodują trudne do znalezienia błędy. Dlatego kod sprawdza walidator W3C (validator.w3.org): wklej kod w zakładce „Validate by Direct Input” albo wgraj plik. Najczęstsze błędy: niezamknięty lub źle zagnieżdżony element, powtórzony id, brak alt, brak lang, literówka w nazwie znacznika. Gdy błędów jest dużo, poprawiaj od góry pliku: jeden niezamknięty element często wywołuje kilka kolejnych. Na egzaminie nie ma internetu, więc ćwicz walidację wcześniej.

Dobre nawyki

• Spójne wcięcia (2 spacje na poziom): od razu widać, co jest w czym.
• Małe litery w znacznikach i atrybutach, wartości w cudzysłowach.
• Nazwy plików małymi literami, bez spacji i polskich znaków (galeria-zdjec.html, nie Galeria Zdjęć.html).
• Przed oddaniem pracy usuń zakomentowane fragmenty i puste elementy.

HTML a XHTML

XHTML to HTML zapisany według ścisłych reguł XML. Warto go znać, żeby rozpoznać starszy kod.

Pisz od razu według reguł XHTML (małe litery, domknięte elementy, cudzysłowy): to przenośny styl, który działa wszędzie.

Projekt końcowy: witryna klubu turystycznego

Czas: 90 minZakres: cały kursForma: projekt końcowy

Dopracuj całą witrynę „Szlak” tak, żeby przechodziła walidację, była dostępna i miała spójny, czytelny kod.

Założenia

• Co najmniej pięć podstron z poprzednich zadań (index.html, relacja.html, galeria.html, wyjazdy.html, zapisy.html) połączonych jednym menu w nav na każdej z nich.
• Każda podstrona ma w head tytuł opisujący jej zawartość (na każdej inny) i opis meta.
• Na stronie głównej część z filmem z wyjazdu (własny plik albo osadzony z YouTube) i proste logo SVG narysowane wprost w kodzie.
• Wszystkie obrazy mają sensowny alt, wszystkie pola formularza powiązane etykiety, a html ma lang="pl".
• Żaden identyfikator nie powtarza się na stronie; hierarchia nagłówków na każdej podstronie jest logiczna.
• Witryna działa na ekranie szerokości 375 px (tryb urządzenia): bez poziomego przewijania, menu i kolumny jedna pod drugą.
• Kod każdej podstrony przechodzi walidator W3C bez błędów.
• Spójne wcięcia, małe litery w znacznikach, bez zakomentowanych fragmentów i zbędnych elementów.

Ocenie podlega

• wynik walidatora dla każdej podstrony,
• działające menu i odnośniki między podstronami,
• zachowanie na wąskim ekranie,
• zgodność z listą kontrolną dostępności,
• czytelność i spójność kodu.

Quiz

Pytania w stylu części pisemnej egzaminu. Po kliknięciu odpowiedzi zobaczysz wyjaśnienie.

Ściąga

Szkielet

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tytuł</title>
  <link rel="stylesheet" href="styl.css">
</head>
<body> … </body>
</html>

Tekst

Atrybuty i kolory

Odnośniki, ścieżki, obrazy

Listy i tabele

Formularze

Bloki

header · nav · main · section · article · aside · footer · figure · details/summary · time · div (blok bez znaczenia) · span (fragment w wierszu) · id jeden na stronie, class wiele, kilka klas po spacji · viewport w head.