Listy uporządkowane i nieuporządkowane — karta pracy HTML

Plan spotkania, spis materiałów, słowniczek pojęć — większość treści w internecie to listy. HTML ma dla nich osobne znaczniki, dzięki którym przeglądarka, czytnik ekranu i wyszukiwarka wiedzą, że to lista, a nie kilka przypadkowych akapitów. Na lekcji uczniowie budują trzy rodzaje list: numerowaną, wypunktowaną z zagnieżdżeniem i listę opisów.

Scenariusz jest przeznaczony na 45 minut dla klasy po pierwszej lekcji HTML — na przykład po pierwszej stronie HTML.

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:

• użyć ol dla list, w których kolejność ma znaczenie, i ul dla pozostałych;
• wstawić elementy wyłącznie jako li bezpośrednio wewnątrz ol lub ul;
• zagnieździć listę wewnątrz elementu li;
• zapisać listę opisów dl z parami dt (pojęcie) i dd (opis).

Trzy rodzaje list

• ol (*ordered list*) — lista numerowana; wybieramy ją, gdy kolejność ma znaczenie (kroki, ranking).
• ul (*unordered list*) — lista wypunktowana; kolejność nie jest ważna (materiały, składniki).
• dl (*description list*) — lista opisów: pary dt (pojęcie) i dd (opis).

Elementy ol i ul to wyłącznie li. Lista zagnieżdżona nie jest dzieckiem listy zewnętrznej, tylko znajduje się wewnątrz li, do którego należy:

<ul>
  <li>Zadania do samodzielnej pracy
    <ul>
      <li>Zadanie podstawowe</li>
    </ul>
  </li>
</ul>

Wygląd list (rodzaj punktorów, odstępy) zmienia się w CSS, nie w HTML — nie wolno robić „listy” z akapitów i ręcznie wpisanych myślników, bo przeglądarki i czytniki ekranu jej nie rozpoznają.

Zadania

Zadanie 1. Lista numerowana. Pod nagłówkiem „Plan spotkania” wstaw ol z czterema punktami: powitanie i sprawdzenie obecności, przypomnienie poprzedniej lekcji, nowe zadanie, podsumowanie.

Zadanie 2. Lista zagnieżdżona. Pod nagłówkiem „Materiały” wstaw ul z trzema punktami (prezentacja, zadania do samodzielnej pracy, karta pracy). Pod punktem o zadaniach zrób listę zagnieżdżoną z dwoma elementami: zadanie podstawowe i zadanie dla chętnych.

Zadanie 3. Lista opisów. Pod nagłówkiem „Słowniczek” wstaw dl z dwoma pojęciami (lista numerowana, lista wypunktowana) i opisami.

Dla chętnych: zmień typ numeracji w pierwszej liście na litery (atrybut type="a") i zacznij numerację od 3 (atrybut start="3"); sprawdź, jak zachowa się przeglądarka.

Rozwiązanie i wyniki

<!doctype html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Koło informatyczne — listy</title>
</head>
<body>
  <main>
    <h1>Koło informatyczne</h1>

    <h2>Plan spotkania</h2>
    <ol>
      <li>Powitanie i sprawdzenie obecności</li>
      <li>Przypomnienie poprzedniej lekcji</li>
      <li>Nowe zadanie</li>
      <li>Podsumowanie</li>
    </ol>

    <h2>Materiały</h2>
    <ul>
      <li>Prezentacja z zajęć</li>
      <li>Zadania do samodzielnej pracy
        <ul>
          <li>Zadanie podstawowe</li>
          <li>Zadanie dla chętnych</li>
        </ul>
      </li>
      <li>Karta pracy</li>
    </ul>

    <h2>Słowniczek</h2>
    <dl>
      <dt>Lista numerowana</dt>
      <dd>Lista, w której kolejność elementów ma znaczenie.</dd>
      <dt>Lista wypunktowana</dt>
      <dd>Lista, w której kolejność elementów nie ma znaczenia.</dd>
    </dl>
  </main>
</body>
</html>

Sprawdź stronę w przeglądarce: pierwsza lista ma numery 1–4, druga punktory, a w niej druga lista z mniejszymi punktorami; słowniczek pokazuje pojęcia i wcięte opisy. Struktura rozwiązania została sprawdzona automatycznym parserem HTML (liczby elementów, zagnieżdżenie, parzystość dt i dd); wygląd w przeglądarce nie był sprawdzany automatycznie.

Typowe błędy

Pytania kontrolne i punktacja

1. Kiedy wybierzesz ol, a kiedy ul?
2. Gdzie umieszcza się listę zagnieżdżoną?
3. Jakie znaczniki tworzą listę opisów?

Odpowiedzi: ol — gdy kolejność ma znaczenie, ul — gdy nie ma. Wewnątrz elementu li, którego dotyczy. dl z parami dt (pojęcie) i dd (opis).

Proponowana punktacja (razem 10 punktów): zadanie 1 — ol 1 pkt, cztery li 1 pkt; zadanie 2 — ul z trzema punktami 1 pkt, lista zagnieżdżona w li 2 pkt; zadanie 3 — dl 1 pkt, dwie pary dt i dd 2 pkt; poprawny zapis całej struktury 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 tabele, linki i stylowanie list w CSS. Ten materiał rozwija dział o podstawach HTML w kursie HTML w TablicaPro, gdzie znajdziesz prezentacje, ćwiczenia i testy do prowadzenia lekcji.

Źródła techniczne: listy w MDN oraz element dl. Zobacz też lekcję o tabelach HTML.