Sprawdzian HTML i CSS — dwa warianty z kluczem

Sprawdzian praktyczny polega na zbudowaniu małej strony od zera: struktura dokumentu, treść z listą i tabelą, zewnętrzny arkusz stylów i podstawy dostępności. Uczeń oddaje dwa pliki — index.html i style.css. Wariant A dotyczy pracowni robotyki, wariant B klubu szachowego; oba mają tę samą trudność i punktację, ale inne dane i nazwy klas, więc uczniowie siedzący obok siebie nie mogą po prostu przepisać pracy.

Zestaw jest przeznaczony na 45 minut w klasie, która przerobiła podstawy HTML (nagłówki, listy, tabele, odnośniki, obrazy) i pierwsze lekcje CSS (selektory, kolory, odstępy). Do pracy wystarczą edytor tekstu i przeglądarka.

Jak użyć zestawu

1. Wydrukuj kartę dla wariantu A i wariantu B. Połowie klasy daj A, drugiej połowie B — wydruki różnią się nagłówkiem i danymi.
2. Do folderu każdego ucznia skopiuj logo.svg z pakietu. Uczniowie nie dostają niczego więcej: pliki index.html i style.css tworzą sami.
3. Po sprawdzianie uruchom skrypt sprawdz_strone.py na pracy ucznia. Wypisze listę kryteriów z oznaczeniem spełnione lub nie. To pomoc przy ocenianiu, nie ocena: skrypt nie widzi np. czytelności kodu czy zasadności komentarza.
4. Punkty przyznaj według klucza poniżej. Skala ocen jest propozycją — dopasuj ją do zasad oceniania obowiązujących w szkole.

Pamiętaj, że prace uczniów są ich własnością i danymi szkolnymi: nie publikuj ich ani nie przesyłaj do narzędzi zewnętrznych bez zgody. Skrypt działa lokalnie i niczego nie wysyła.

Polecenie dla ucznia — wariant A (Pracownia robotyki)

Utwórz w folderze plik index.html i style.css. Plik logo.svg jest już w folderze.

Zadanie 1 (4 pkt). Struktura dokumentu. Dokument ma deklarację typu, język polski (lang="pl"), kodowanie UTF-8 i tytuł strony zawierający słowo „Robotyka”.

Zadanie 2 (6 pkt). Treść. Na stronie umieść:

• jeden nagłówek h1 o treści „Pracownia robotyki”;
• akapit z dwoma zdaniami o pracowni;
• nagłówek h2 „Co robimy?” i listę nieuporządkowaną z czterema pozycjami;
• nagłówek h2 „Terminy” i tabelę z wierszem nagłówkowym (Dzień, Godzina) oraz trzema wierszami danych;
• obraz logo.svg z tekstem alternatywnym;
• odnośnik „Zobacz kurs HTML w TablicaPro” do adresu https://tablicapro.pl/kursy/html.

Zadanie 3 (7 pkt). Arkusz stylów. W osobnym pliku style.css, podłączonym do strony, ustaw:

• dla body kolor tekstu #1f2937 i tło #f3f6fb;
• dla h1 kolor #1e3a8a;
• klasę .wyroznienie (tło #dbeafe, odstęp wewnętrzny 16 px) i nadaj ją akapitowi z opisem pracowni;
• dla tabeli zwinięte obramowania (border-collapse: collapse) i obramowanie komórek 1 px;
• dla odnośnika kolor #1e3a8a, a po najechaniu (:hover) kolor #0f172a.

Zadanie 4 (3 pkt). Jakość i dostępność. Obraz ma opisowy tekst alternatywny, tekst odnośnika jest zrozumiały bez kontekstu (nie „kliknij tutaj”), a nagłówki następują po sobie w logicznej kolejności (h1, potem h2).

Polecenie dla ucznia — wariant B (Klub szachowy)

Utwórz w folderze plik index.html i style.css. Plik logo.svg jest już w folderze.

Zadanie 1 (4 pkt). Struktura dokumentu. Dokument ma deklarację typu, język polski (lang="pl"), kodowanie UTF-8 i tytuł strony zawierający słowo „Szachy”.

Zadanie 2 (6 pkt). Treść. Na stronie umieść:

• jeden nagłówek h1 o treści „Klub szachowy”;
• akapit z dwoma zdaniami o klubie;
• nagłówek h2 „Czym się zajmujemy?” i listę nieuporządkowaną z czterema pozycjami;
• nagłówek h2 „Turnieje” i tabelę z wierszem nagłówkowym (Data, Miejsce) oraz trzema wierszami danych;
• obraz logo.svg z tekstem alternatywnym;
• odnośnik „Poznaj kurs CSS w TablicaPro” do adresu https://tablicapro.pl/kursy/css.

Zadanie 3 (7 pkt). Arkusz stylów. W osobnym pliku style.css, podłączonym do strony, ustaw:

• dla body kolor tekstu #1f2937 i tło #fdf6e3;
• dla h1 kolor #7c2d12;
• klasę .ogloszenie (tło #fde68a, odstęp wewnętrzny 16 px) i nadaj ją akapitowi z opisem klubu;
• dla tabeli zwinięte obramowania (border-collapse: collapse) i obramowanie komórek 1 px;
• dla odnośnika kolor #7c2d12, a po najechaniu (:hover) kolor #0f172a.

Zadanie 4 (3 pkt). Jakość i dostępność. Obraz ma opisowy tekst alternatywny, tekst odnośnika jest zrozumiały bez kontekstu (nie „kliknij tutaj”), a nagłówki następują po sobie w logicznej kolejności (h1, potem h2).

Klucz i punktacja (oba warianty)

Zwróć uwagę na rozdzielenie dwóch rodzajów błędów. Strona z pięknym wyglądem, ale bez lang i alt, traci punkty z zadań 1 i 4; strona z poprawnym HTML, ale z arkuszem wpisanym w atrybutach style, nie dostaje punktów za podłączony style.css.

Proponowana skala ocen

To tylko propozycja; progi dla oceny celującej i innych ustal zgodnie ze Statutem lub Wewnątrzszkolnym Ocenianiem w swojej szkole.

Przykładowe rozwiązanie — wariant A

<!doctype html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Robotyka — pracownia szkolna</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <img src="logo.svg" alt="Logo pracowni robotyki: ramię robota nad planszą" width="96" height="96">
  <h1>Pracownia robotyki</h1>
  <p class="wyroznienie">Spotykamy się po lekcjach w sali 12. Budujemy i programujemy małe roboty.</p>
  <h2>Co robimy?</h2>
  <ul>
    <li>Składamy roboty z zestawów.</li>
    <li>Programujemy czujniki.</li>
    <li>Rozwiązujemy zadania logiczne.</li>
    <li>Przygotowujemy pokazy dla szkoły.</li>
  </ul>
  <h2>Terminy</h2>
  <table>
    <tr><th>Dzień</th><th>Godzina</th></tr>
    <tr><td>Poniedziałek</td><td>15:00</td></tr>
    <tr><td>Środa</td><td>15:00</td></tr>
    <tr><td>Piątek</td><td>14:00</td></tr>
  </table>
  <p><a href="https://tablicapro.pl/kursy/html">Zobacz kurs HTML w TablicaPro</a></p>
</body>
</html>

body {
  color: #1f2937;
  background: #f3f6fb;
  font-family: system-ui, sans-serif;
}

h1 {
  color: #1e3a8a;
}

.wyroznienie {
  background: #dbeafe;
  padding: 16px;
}

table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid #94a3b8;
  padding: 6px 12px;
}

a {
  color: #1e3a8a;
}

a:hover {
  color: #0f172a;
}

Rozwiązanie wariantu B ma tę samą budowę: zmieniają się teksty, tytuł (np. „Szachy — klub szkolny”), klasa .ogloszenie i kolory z polecenia. Pełne pliki obu wariantów są w pakiecie.

Typowe błędy uczniów w tym zestawie

Materiały do pobrania

• Pakiet: karty wariantów A i B, klucz, rozwiązania, logo i skrypt kontrolny
• Karta ucznia — wariant A
• Karta ucznia — wariant B
• Klucz odpowiedzi dla nauczyciela

Materiały są dostępne bez logowania, więc klucz i zadania są publiczne. Zestaw służy do ćwiczenia, powtórki i przykładowego sprawdzianu; jeśli ma zostać użyty jako sprawdzian, zmień dane i nazwy klas albo dopisz własny wariant C. Skrypt sprawdz_strone.py wymaga Pythona 3.

Co dalej?

Po sprawdzianie dobrym krokiem są formularze i układ strony: zobacz lekcję o formularzach HTML oraz Flexbox z zadaniami. Pełną ścieżkę HTML od podstaw po przygotowanie do egzaminu obejmuje kurs HTML w TablicaPro, a arkusze stylów — kurs CSS.

Źródła: elementy HTML w MDN, alt obrazu w specyfikacji HTML oraz selektory CSS w MDN.