Tvorba webové stránky v HTML a CSS

Žáci v 8. ročníku vytvoří jednoduchou webovou stránku: zvolí značky HTML podle účelu dokumentu, například pro nadpis, odstavec, seznam, odkaz nebo obrázek, a pomocí CSS upraví její vzhled, například barvu, písmo, okraje a rozložení. Důležitá je srozumitelnost pro uživatele: čitelná hierarchie, dostatečný kontrast a logické pořadí informací.

HTML popisuje strukturu a význam částí stránky, CSS určuje jejich vzhled. Žáci si stránku prohlédnou v prohlížeči a ověří, zda nadpisy člení text, odkazy vedou na správné místo a obrázky mají smysluplný alternativní text. Výstup INF-INF-004-ZV9-012 se zde uplatňuje při výběru nástrojů a prostředí pro tvorbu a prohlížení stránky i při ukládání souborů podle jejich vlastností.

Učení navazuje na kódování textu a obrazu i práci se soubory: značka vyjadřuje význam části dokumentu a soubory .html a .css obsahují text, který prohlížeč zpracuje a zobrazí. Žáci posoudí, zda stránka dává smysl i 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 a soubor obrázku
• Počítačové sítě a způsob připojení — prohlížeč, adresa a stažený soubor
• Programy a soubory — uložení, přípona a otevření souboru v jiném programu

Klíčové pojmy

HTML

Značkovací jazyk, který popisuje strukturu a význam částí stránky, například nadpisu, odstavce nebo seznamu.

Značka a element

Značka vyznačuje část dokumentu; element tvoří značka či značky spolu s obsahem. Prohlížeč podle nich rozpozná roli dané části.

CSS

Jazyk pravidel, který určuje vzhled prvků stránky. Pravidlo pomocí selektoru vybírá prvky a přiřazuje jim vlastnosti.

Selektor

Určuje, na které prvky se pravidlo CSS vztahuje, například podle značky nebo třídy. Pokud neodpovídá zamýšleným prvkům, styl se na ně neuplatní.

Účel dokumentu

Účel a čtenář stránky ovlivňují volbu značek a rozložení, například hierarchii nadpisů, čitelnost textu a srozumitelnost odkazů.

Relativní cesta

Cesta k obrázku nebo souboru CSS se vztahuje k umístění stránky a musí odpovídat skutečnému názvu a umístění souboru.

Kontrola v prohlížeči

Stránku je třeba zkontrolovat po zobrazení v prohlížeči a při čtení; samotné otevření souboru nepotvrzuje, že vše funguje správně.

Časté miskoncepce

• Častá chyba

  Žák zapisuje do HTML například „barva: modrá“ nebo hledá značku, která obarví text, a čeká, že se jeho vzhled změní.

  Jak na to

  Porovnejte stejný odstavec nejprve označený značkou <p> a potom doplněný pravidlem CSS pro p. Žák vysvětlí, co určuje strukturu a co vzhled.

• Častá chyba

  Obrázek nebo styly CSS se nezobrazí, protože v kódu je uveden jiný název souboru či složky, než jaké jsou na disku.

  Jak na to

  Porovnejte cestu v kódu se skutečným umístěním souboru a zkontrolujte název i příponu. Opravte chybu a stránku znovu načtěte.

• Častá chyba

  Žák považuje velký tučný text za nadpis, i když je v HTML označen jako odstavec <p> a jeho vzhled mění CSS.

  Jak na to

  Nechte spolužáka určit strukturu podle značek h1, h2 a p, aniž by stránku viděl. Vysvětlete, že vzhled sám nevyjadřuje význam prvku.

• Častá chyba

  Žák upraví soubor v editoru, ale v prohlížeči vidí starou verzi, protože změny neuložil nebo stránku neobnovil.

  Jak na to

  Zaveďte postup: uložit soubor a obnovit stránku v prohlížeči. Ověřte, že je otevřený správný soubor a že se změny uložily.

Jak učit

2–3 hodiny

1. Evokace: Žáci porovnají dvě krátké stránky se stejným textem, jednu tvořenou jen odstavci a druhou členěnou nadpisy a seznamem. Rozhodnou, ve které se informace hledají snáz, a vysvětlí proč.
2. Uvědomění: Společně vytvořte základní strukturu HTML, propojte ji s externím souborem CSS a doplňte obrázek se správnou cestou. Žáci upraví stránku podle jejího účelu.
3. Reflexe: Žáci si navzájem prohlédnou stránky a pojmenují nejasné místo, například nadpis, odkaz nebo nedostatečný kontrast. Autor provede jednu úpravu a zkontroluje výsledek v prohlížeči.

Nápady na aktivity

• Miniprojekt: Stránka o školní akci s termínem, seznamem, odkazem a jedním obrázkem. Žáci volí značky podle účelu, upraví barvy a mezery v CSS a nechají spolužáka zkontrolovat srozumitelnost.
• Oprava nefunkční stránky: Žáci hledají chybnou cestu k obrázku, nesprávně propojený soubor CSS nebo nadpis označený jako odstavec a zdůvodní opravu.

Hodnocení

Žák odevzdá soubory .html a .css. Použije značky odpovídající významu obsahu, oddělí strukturu od vzhledu a ověří, že obrázek a odkaz fungují. Stručně vysvětlí, jak volba rozložení podporuje účel stránky.

Na cizí stránce žák rozliší strukturu HTML od vzhledu nastaveného v CSS a navrhne jednu konkrétní úpravu, která zlepší čitelnost.

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 Tvorba webové stránky v 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 Tvorba webové stránky v 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 15

• 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

• Poslechové cvičení

  Vícehlasý dialog s namluvenými hlasy a navázanými otázkami k poslechu.

  5–30 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