Webdesign: HTML a CSS

Žáci v 8. ročníku sestaví jednoduchou webovou stránku: zvolí značky HTML podle účelu dokumentu (nadpis, odstavec, seznam, odkaz, obrázek) a upraví vzhled pomocí CSS (barva, písmo, okraje, rozložení). Cílem není „hezká stránka za každou cenu“, ale srozumitelný dokument pro uživatele — čitelná hierarchie, kontrast a logické pořadí informací.

HTML popisuje strukturu a význam částí stránky, CSS odděluje vzhled. Žák ověří výsledek v prohlížeči: zda nadpisy skutečně člení text, zda odkazy vedou tam, kam slibují, a zda obrázky mají smysluplný alternativní text. Výstup INF-INF-004-ZV9-012 sem vstupuje jako volba nástroje a prostředí (editor, prohlížeč, uložení souborů) podle vlastností, ne jako sestavování sítě.

Jednotka navazuje na kódování textu a obrazu a na práci s dokumenty: značka je dohoda o významu, soubor .html/.css je text, který prohlížeč vykreslí. Hodina končí krátkou kontrolou „dává stránka smysl někomu jinému?“.

Předpoklady

• Kódování dat pro uložení a přenos — textový soubor a význam kódu
• Kódování obrazu: pixely a barvy — barva, kontrast, soubor obrázku
• Počítačové sítě a způsob připojení — prohlížeč, adresa, stažený soubor
• Programy a soubory — uložení, přípona, otevření v jiném programu

Klíčové pojmy

HTML

Značkovací jazyk: popisuje strukturu stránky (nadpis, odstavec, seznam), ne vzhled.

Značka a element

Párová značka obklopuje obsah; prohlížeč podle ní pozná roli části dokumentu.

CSS

Pravidla vzhledu (selektor a vlastnosti) oddělená od struktury HTML.

Selektor

Určuje, na které prvky se pravidlo vztahuje (značka, třída); neshoda = „styly nefungují“.

Účel dokumentu

Volba značek a rozložení podle čtenáře: hierarchické nadpisy, čitelný text, srozumitelné odkazy.

Relativní cesta

Odkaz na obrázek nebo CSS musí sedět na složku, kde soubor opravdu leží.

Kontrola v prohlížeči

Stránka se posuzuje vykreslením a čtením, ne jen podle toho, že soubor „jde otevřít“.

Časté miskoncepce

• Častá chyba

  Žák píše do HTML „barva: modrá“ nebo nové „značky na vzhled“ a čeká, že se text obarví.

  Jak na to

  Ukaž stejný odstavec: nejdřív jen <p>, pak jedno pravidlo v CSS na p. Žák musí říct, co je struktura a co vzhled.

• Častá chyba

  „Obrázek / CSS nefunguje“ — v kódu je jiný název souboru nebo jiná složka než na disku.

  Jak na to

  Otevři složku vedle editoru, porovnej písmeno po písmenu název a příponu; oprav cestu, znovu načti stránku.

• Častá chyba

  Velký tučný text považuje za nadpis, i když je to jen <p> se stylem.

  Jak na to

  Nech spolužáka zavřít oči a říct strukturu jen podle značek h1–h2–p; víst, že vzhled nenahrazuje význam.

• Častá chyba

  Mění soubor v editoru a diví se, že v prohlížeči je starý vzhled (neuloženo nebo nestisknuto obnovení).

  Jak na to

  Ritualizuj: uložit → obnovit kartu; zkontroluj čas uložení souboru a že je otevřený tentýž soubor.

Jak učit

2–3 hodiny

1. Evokace: žáci porovnají dvě krátké stránky stejného textu — jedna jen odstavce, druhá s nadpisy a seznamem — a řeknou, která se dá rychleji přečíst.
2. Jádro: společně postavte kostru HTML, přidejte externí CSS (barva, písmo, okraj) a jeden obrázek se správnou cestou; žáci upraví stránku podle zadaného účelu.
3. Reflexe: výměna obrazovek — spolužák najde, co je nejasné (nadpis, odkaz, kontrast); autor opraví jednu věc a znovu ověří v prohlížeči.

Nápady na aktivity

• Miniprojekt: stránka ke školní akci (termín, seznam, odkaz, jeden obrázek) — značky podle účelu, barvy a mezery v CSS, kontrola spolužákem.
• Oprava „rozbité“ stránky: špatná cesta k obrázku, CSS v jiném souboru, nadpis jako odstavec; žáci najdou a zdůvodní opravu.

Hodnocení

Žák odevzdá .html a .css: smysluplné značky, oddělený vzhled, funkční obrázek/odkaz; ústně řekne, proč zvolil rozložení.

Krátká kontrola: na cizí stránce určí strukturu vs. vzhled a navrhne jednu úpravu pro čitelnost.

Související témata

• Dokumenty, prezentace a typografie
• Kódování obrazu: bitmapa a vektor
• Počítačové sítě a způsob připojení
• Chování na internetu a digitální identita
• Návrh zabezpečení zařízení a systémů
• Výběr hardwaru a softwaru

Zdroje

• Rámcový vzdělávací program — prohledávání výstupů
• Ministerstvo školství — vzdělávací materiály
• Archiv iMyšlení NPI

Co pro vás ScioBot připraví k tématu Webdesign: HTML a CSS

Interaktivní aktivity, které žáci spustí na tabletu či tabuli, tisknutelné kartičky a hry pro celou třídu – každý formát na téma Webdesign: HTML a CSS jedním klikem.

Základní materiály

• Příprava na hodinu

  Kompletní příprava s cíli, průběhem a aktivitami.

• Pracovní list

  List s úlohami, klíčem a variantou.

• Písemka

  Časovaná písemka s body a variantami.

• Aktivita

  Aktivita do hodiny, kterou žáci hned spustí.

• Prezentace

  Sada slajdů k výkladu a procvičení.

• Kartičky

  Materiál k tisku (kartičky, plakát, pracovní list).

• QR hra

  Interaktivní hra k procvičení tématu.

Interaktivní aktivity 14

• Křížovka s tajenkou

  Legendová křížovka, kde se ve sloupci skrývá tajenka. Skvělá na opakování pojmů.

  10–20 min

• Kartičky

  Sada oboustranných kartiček na učení pojmů a definic. Žáci si je procvičí překlápěním.

  5–20 min

• Pexeso a spojovačka

  Dvojice kartiček s obrázky, pojmy nebo příklady. Spojovačka, pexeso i volné třídění – ideální na slovní zásobu i opakování.

  10–25 min

• Rozhodovačka

  Rychlé rozhodování mezi možnostmi s okamžitou zpětnou vazbou.

  5–12 min

• Otázky

  Sada otázek s výběrem odpovědí; jedna nebo více správných. Okamžitá sebekontrola.

  5–15 min

• Vpisování

  Žáci dopisují krátké odpovědi a ihned vidí, zda se trefili.

  5–15 min

• Rozřazovačka

  Žáci přetahují kartičky do správných kategorií.

  5–15 min

• Rozbory

  Žák přiřazuje značky k částem věty nebo výrazu — větné členy, slovní druhy, větné rozbory. Sebevyhodnocovací procvičování.

  10–20 min

• Označování

  Žáci označují správná slova přímo v textu.

  5–15 min

• Doplňování textu

  Žáci doplňují chybějící slova přímo do vět nebo krátkého textu.

  5–15 min

• Krok po kroku

  Žáci řadí kroky procesu do správného pořadí.

  5–15 min

• Popis obrázku

  Diagram s očíslovanými špendlíky. Žáci přiřazují popisky k částem obrázku — biologie, zeměpis, anatomie.

  5–15 min

• Přesouvání

  Žáci přetahují kartičky do přesně určených slotů.

  5–15 min

• Čtení s porozuměním

  Žáci čtou krátký text a odpovídají na otázky k jeho obsahu.

  10–25 min

K tisku a rozstříhání 8

• Páry

  Kartičky se dvěma polovinami, které k sobě patří (např. datum–událost). Žáci je vystřihnou a párovají.

  10–20 min

• Výběr z možností (s tajenkou)

  Kartičky s úlohami a třemi možnostmi. Písmena u správných odpovědí složí tajenku — žák si tak řešení zkontroluje sám.

  10–20 min

• Doplňování do vět

  Věty s výběrem ze dvou možností uvnitř — žák zakroužkuje správnou.

  10–20 min

• Hra Riskuj

  Kvízová hra se třemi podtématy a otázkami různé hodnoty — klasický formát Riskuj / Jeopardy.

  15–30 min

• Hra AZ kvíz

  28 otázek na hexagonální hrací pole — cílem je spojit všechny tři strany.

  15–35 min

• Označ správnou možnost

  Kartičky s otázkou a čtyřmi možnostmi — žák označí správnou (např. kolíčkem).

  10–20 min

• Já mám, kdo má …?

  Kartičky s tvrzením a otázkou — žáci je čtou v kruhu a hledají navazující odpověď.

  10–25 min

• Hádej, kdo jsem

  Kartičky s popisem osobnosti, věci nebo zvířete v 1. osobě — žáci tipují, o koho/co jde.

  10–25 min

Hry pro celou třídu 4

• AZ kvíz

  28 otázek na hexagonálním hracím poli — cílem je spojit všechny tři strany. Včetně náhradních ANO/NE otázek.

  15–35 min

• Riskuj

  Klasická hra se 5 kategoriemi a otázkami za 100–500 bodů — týmy soutěží o nejvyšší skóre.

  15–40 min

• Pexeso

  Klasické pexeso s 10 dvojicemi (pojem ↔ popis) — dva týmy se střídají a hledají shody.

  10–25 min

• Šarády

  Šarády se 12 úkoly (mluvení, kreslení, pantomima) — dva týmy hádají, kdo uhodne první, dostane bod.

  15–30 min

Očekávané výstupy