Znajdź i popraw błędy w HTML — karta pracy z odpowiedziami

Umiejętność czytania cudzego (i własnego) kodu pod kątem błędów jest równie ważna jak pisanie nowego. Przeglądarki wybaczają bardzo wiele — poprawiają błędy po cichu — więc strona z błędami może „wyglądać dobrze” i nadal być niepoprawna. Na lekcji uczniowie dostają stronę z dziewięcioma błędami, szukają ich bez narzędzi, potem sprawdzają się z kluczem i poprawiają.

Scenariusz jest przeznaczony na 45 minut dla klasy po kilku lekcjach HTML — na przykład po lekcji o strukturze dokumentu i lekcji o dostępności. Najlepiej pracować w parach: jedna osoba szuka, druga weryfikuje.

Przygotowanie stanowisk

Potrzebne są przeglądarka i edytor tekstu (Notatnik++, VS Code lub podobny — nie Word). Rozpakuj pakiet z sekcji materiałów do osobnego folderu. W folderze start jest plik index.html z komentarzami zadań; otwierasz go w edytorze i w przeglądarce, a po każdej zmianie zapisujesz plik i odświeżasz stronę. Gotowe rozwiązanie jest w folderze rozwiazanie. Internet nie jest wymagany.

Cele i plan lekcji

Po zajęciach uczeń potrafi:

• znaleźć w kodzie typowe błędy strukturalne i dostępności;
• nazwać każdy błąd i wyjaśnić, jakie szkody wyrządza;
• poprawić kod i sprawdzić wynik w walidatorze lub narzędziach deweloperskich;
• wskazać, że przeglądarka nie zgłasza większości tych błędów.

Klucz odpowiedzi — dziewięć błędów

Jak szukać błędów

Czytaj kod od góry do dołu i sprawdzaj kolejne warstwy: szkielet dokumentu (doctype, lang, head), nagłówki, obrazy i linki, listy, identyfikatory i zagnieżdżenia. Pomagają narzędzia: walidator W3C (https://validator.w3.org) wskazuje błędy składni, a narzędzia deweloperskich i rozszerzenia do sprawdzania dostępności — braki alt, etykiet i pozostałe problemy. Żadne narzędzie nie zastępuje czytania kodu: np. alt="obraz" przejdzie automatyczną kontrolę, a jest bezwartościowy.

Zadania

Zadanie 1. Szukanie. Bez użycia narzędzi znajdź w projekcie startowym wszystkie błędy i zapisz je w tabeli: numer linii, nazwa błędu, krótkie uzasadnienie.

Zadanie 2. Poprawianie. Popraw każdy błąd. Dla obrazu napisz opisowy alt, a powtórzone identyfikatory zamień na unikalne.

Zadanie 3. Kontrola. Wklej poprawiony kod do walidatora W3C (lub zrób to z nauczycielem na projektorze) i zapisz, czy wynik jest czysty. Wskaż błędy, których przeglądarka nie zgłosiła na stronie.

Dla chętnych: dopisz do strony trzy własne błędy dla koleżanki lub kolegi i oddaj do znalezienia.

Rozwiązanie i wyniki

<!doctype html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>Koło informatyczne</title>
</head>
<body>
  <h1>Koło informatyczne</h1>
  <h2>Zapisy</h2>
  <img src="logo.svg" alt="Logo koła informatycznego" width="120" height="120">
  <ul>
    <li>Środa</li>
    <li>Piątek</li>
  </ul>
  <p id="sala">Sala 12</p>
  <p id="godzina">Godzina 15:30</p>
  <p><strong>Ważne</strong></p>
  <a href="kontakt.html">Kontakt</a>
</body>
</html>

Rozwiązanie zawiera poprawioną stronę. Automatyczny parser wykrył w projekcie startowym dokładnie dziewięć opisanych błędów, a w rozwiązaniu — żadnego z nich. Walidator W3C wymaga internetu i nie był tu uruchamiany; wygląd stron w przeglądarce nie był sprawdzany automatycznie.

Typowe błędy

Pytania kontrolne i punktacja

1. Dlaczego strona z błędami może wyglądać poprawnie?
2. Który z dziewięciu błędów dotyczy dostępności dla osób niewidomych?
3. Dlaczego id musi być unikalne?

Odpowiedzi: Bo przeglądarki cicho naprawiają wiele błędów. Brak alt w obrazie, brak lang oraz a bez href (a także struktura nagłówków). Bo identyfikator wskazuje jeden element (kotwice, label for, skrypty), a powtórzenie powoduje niejednoznaczność.

Proponowana punktacja (razem 10 punktów): zadanie 1 — dziewięć błędów 4 pkt (po 0,5 pkt za błąd, zaokrąglone do pełnych punktów), uzasadnienia 1 pkt; zadanie 2 — poprawny kod 3 pkt; zadanie 3 — kontrola walidatorem 1 pkt, błędy niezgłoszone przez przeglądarkę 1 pkt. Zadanie dla chętnych nie jest wymagane do pełnej oceny.

Materiały do pobrania

• Pakiet HTML: materiały do lekcji, rozwiązanie i karta pracy
• Karta pracy ucznia — otwórz i wydrukuj

Rozpakuj ZIP przed otwarciem plików. Materiały są dostępne bez logowania; publiczne rozwiązanie służy nauce i samodzielnemu sprawdzeniu, a nie poufnemu sprawdzianowi.

Co dalej?

Następny krok to projekt wielostronicowej witryny, w której te zasady stosujesz od początku. Ten materiał rozwija dział o jakości kodu HTML w kursie HTML w TablicaPro, gdzie znajdziesz prezentacje, ćwiczenia i testy do prowadzenia lekcji.

Źródła techniczne: walidator W3C oraz debugowanie HTML w MDN. Zobacz też lekcję o linkach.