Jak zaplanować dział HTML i CSS? Przykładowa kolejność lekcji

Dział o HTML i CSS najłatwiej zepsuć kolejnością: układ (Flexbox, Grid) przed model pudełkowy, responsywność przed układem, formularze przed podstawami dokumentu. Uczniowie kończą wtedy z poczuciem, że „CSS nie działa”, choć brakuje im fundamentów. Poniżej plan 18 lekcji z zależnościami i niewielki program, który wyznacza poprawną kolejność, liczy czas i sprawdza własny układ nauczyciela.

Materiał jest przeznaczony dla nauczyciela. Założenia: każda lekcja trwa jedną godzinę lekcyjną (projekt — dwie), nauka odbywa się dwie godziny tygodniowo, a zależności są propozycją — inna kolejność też może być uzasadniona. Lekcje poniżej to opublikowane na blogu materiały z zadaniami i rozwiązaniami.

Przygotowanie stanowisk

Potrzebny jest Python 3 i edytor lub IDLE. Rozpakuj pakiet z sekcji materiałów do osobnego folderu i uruchamiaj skrypty z tego folderu. Program uruchomisz przez Run → Run Module albo poleceniem python start.py, python3 start.py lub py start.py.

Cele i plan lekcji

Po zajęciach uczeń potrafi:

• ułożyć dział HTML i CSS w kolejności uwzględniającej zależności;
• policzyć liczbę godzin i tygodni;
• sprawdzić własny układ lekcji pod kątem zależności;
• wskazać, które lekcje zależą od wybranego tematu.

Plan 18 lekcji

Razem 19 godzin, czyli 10 tygodni przy dwóch godzinach tygodniowo (bez godzin na sprawdziany i powtórki).

Zasady kolejności

• Struktura i nagłówki przed listami, linkami i formularzami.
• Podstawy CSS (selektory, kolory) przed układem: model pudełkowy → display → Flexbox → Grid i media queries.
• Responsywność (media queries) dopiero po poznaniu układów.
• Projekt łączy semantykę, formularze, obrazy, typografię, kolory, układ i responsywność.

Co robi program

Funkcja kolejnosc wybiera w każdym kroku lekcję, której wszystkie zależności są już zrealizowane; naruszenia wykrywa lekcje stojące przed swoimi zależnościami. Po zamianie lekcji „Listy” i „Tabele” program wskazuje naruszenie: „Tabele” stoją przed „Listami”, od których zależą.

Sprawdziany

Zaplanuj sprawdzian po HTML (np. Sprawdzian HTML i CSS — dwa warianty z kluczem) oraz ocenę projektu na końcu działu (Jak oceniać projekt strony internetowej — karta kryteriów).

Zadania

Zadanie 1. Kolejność. Wyznacz poprawną kolejność lekcji i policz lekcje, godziny i tygodnie przy 2 godz./tydz.

Zadanie 2. Własny układ. Zamień miejscami „Listy” i „Tabele” i sprawdź naruszone zależności.

Zadanie 3. Zależności. Wypisz lekcje zależne od „Flexboxa” i sprawdź, że zależność pierwszej lekcji od projektu tworzy cykl.

Dla chętnych: ułóż plan skrócony do 12 godzin i uzasadnij, które lekcje pominiesz.

Rozwiązanie i wyniki

# Plan dzialu: lekcja -> (godziny, lekcje, ktore musza byc wczesniej)
PLAN = {
    "Pierwsza strona": (1, []),
    "Struktura dokumentu": (1, ["Pierwsza strona"]),
    "Naglowki i akapity": (1, ["Pierwsza strona"]),
    "Listy": (1, ["Naglowki i akapity"]),
    "Linki": (1, ["Naglowki i akapity"]),
    "Obrazy": (1, ["Linki"]),
    "Tabele": (1, ["Listy"]),
    "Formularze": (1, ["Naglowki i akapity"]),
    "Semantyczny HTML": (1, ["Struktura dokumentu", "Naglowki i akapity"]),
    "CSS od podstaw": (1, ["Naglowki i akapity"]),
    "Model pudelkowy": (1, ["CSS od podstaw"]),
    "Kolory": (1, ["CSS od podstaw"]),
    "Typografia": (1, ["CSS od podstaw"]),
    "Display": (1, ["Model pudelkowy"]),
    "Flexbox": (1, ["Display"]),
    "Grid": (1, ["Flexbox"]),
    "Media queries": (1, ["Flexbox"]),
    "Projekt strony": (2, ["Semantyczny HTML", "Formularze", "Media queries", "Grid", "Obrazy", "Typografia", "Kolory"]),
}


def kolejnosc(plan):
    """Jedna z poprawnych kolejnosci (sortowanie topologiczne); None, gdy zaleznosci tworza cykl."""
    zrobione, wynik = set(), []
    while len(wynik) < len(plan):
        gotowe = [l for l in plan if l not in zrobione and all(w in zrobione for w in plan[l][1])]
        if not gotowe:
            return None
        zrobione.add(gotowe[0])
        wynik.append(gotowe[0])
    return wynik


def naruszenia(plan, propozycja):
    pozycje = {l: i for i, l in enumerate(propozycja)}
    return [l + " przed " + w for l, (_, wymagane) in plan.items() for w in wymagane if pozycje[w] > pozycje[l]]


# Zadanie 1: kolejnosc i czas
proponowana = kolejnosc(PLAN)
print("Kolejnosc:", " > ".join(proponowana))
godziny = sum(h for h, _ in PLAN.values())
print("Lekcji:", len(PLAN), "| godzin:", godziny, "| tygodni przy 2 godz./tydz.:", -(-godziny // 2))

# Zadanie 2: kontrola wlasnego ukladu (zamiana dwoch lekcji miejscami)
wlasny = list(proponowana)
i, j = wlasny.index("Listy"), wlasny.index("Tabele")
wlasny[i], wlasny[j] = wlasny[j], wlasny[i]
print("Wlasny uklad ma naruszenia:", naruszenia(PLAN, wlasny))

# Zadanie 3: zaleznosci i cykl
zalezne = [l for l, (_, w) in PLAN.items() if "Flexbox" in w]
print("Zalezne od Flexbox:", zalezne)
print("Cykl w planie:", kolejnosc(dict(PLAN, **{"Pierwsza strona": (1, ["Projekt strony"])})) is None)

Program wypisze:

Kolejnosc: Pierwsza strona > Struktura dokumentu > Naglowki i akapity > Listy > Linki > Obrazy > Tabele > Formularze > Semantyczny HTML > CSS od podstaw > Model pudelkowy > Kolory > Typografia > Display > Flexbox > Grid > Media queries > Projekt strony
Lekcji: 18 | godzin: 19 | tygodni przy 2 godz./tydz.: 10
Wlasny uklad ma naruszenia: ['Tabele przed Listy']
Zalezne od Flexbox: ['Grid', 'Media queries']
Cykl w planie: True

Plan ma 18 lekcji i 19 godzin, czyli 10 tygodni. Zamiana „List” i „Tabel” narusza zależność „Tabele” → „Listy”. Od „Flexboxa” zależą „Grid” i „Media queries”.

Plik rozszerzenie.py (zadanie dla chętnych) wypisze:

10 9.5

Typowe błędy

Pytania kontrolne i punktacja

1. Dlaczego model pudełkowy jest przed Flexboxem?
2. Które lekcje zależą od Flexboxa?
3. Co oznacza naruszenie zależności w planie?

Odpowiedzi: Bo układ Flexbox zakłada rozumienie marginesów, odstępów i display. Grid i media queries. Że lekcja stoi przed tematem, na którym się opiera.

Proponowana punktacja (razem 10 punktów): zadanie 1 — kolejność i liczby 3 pkt; zadanie 2 — naruszenia 3 pkt; zadanie 3 — zależności i cykl 2 pkt; planowanie w pytaniach 2 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 planowanie działów Python i SQL oraz dobór sprawdzianów. Ten materiał rozwija dział o planowaniu nauczania programowania w kursie HTML w TablicaPro, gdzie znajdziesz prezentacje, ćwiczenia i testy do prowadzenia lekcji.

Źródła techniczne: sortowanie topologiczne w Wikipedii oraz MDN: nauka HTML. Zobacz też lekcję o planowaniu działu Python.