Několik roků vyučuji základy tvorby internetových stránek v jazyce HTML. Někteří kolegové sice tvrdí, že je to úplně zbytečné, nebo že je vhodnější učit pomocí FrontPage. Svoji metodu a její výhody se tedy pokusím obhájit. O samotné HTML v ní totiž ani nejde…
Upozorňuji pro jistotu hned v počátku, že nejde o bezduché biflování tagů a že časem žáci přecházejí na non-WYSIWYG editor. Výuka probíhá v osmých třídách (volitelný předmět) a letos také u žáků sedmé třídy s rozšířenou výukou IT.
1. Začínáme s Poznámkovým blokem
HTML aneb rozumíme příponám
Pro první krůčky používáme Poznámkový blok. Žáci jsou seznámeni se základní kostrou HTML stránky a principem jazyka – že v podstatě popisuje vzhled stránky. V souvislosti s používanými příponami .htm či .html je nutné žákům vysvětlit, jak tyto soubory uložit v Poznámkovém bloku, který standardně nabízí příponu .txt. I když žáci vědí o existenci různých formátů (a s tím souvisejících přípon) souborů, přece jen pro řadu z nich není samozřejmé nad tímto problémem uvažovat, k čemuž jsou díky tomuto postupu nuceni.
Jednoduché formátování aneb ukládáme změny
Poté, co mají uložený svůj pokusný soubor, vyzkouší si formátování textu, jako např. tučný řez, kurzivu atd. K tomu si přidáme možnost měnit barvu pozadí stránky, textu na stránce nebo jen části textu pomocí tagu font. V této části žáci experimentují s různým barevným nastavením a postupně „vstřebávají“ postup, při němž změnu ve stránce musí uložit, přepnout se do okna s prohlížečem, aktualizovat a prohlédnout změnu. Tento zdánlivě jednoduchý postup je dosti užitečný, protože řada žáků nemá zažito přepínaní mezi aplikacemi (často jsou zvyklí aplikaci vypnout místo minimalizovat nebo zapnout znova, když už minimalizovaná je).
Tabulky aneb orientujeme se v kódu
Další na řadě jsou tabulky. Zřejmě je možné volit i jiné pořadí, ale připadne mi, že oproti obrázkům nebo odkazům je zatím jednodušší pohybovat se v rámci jednoho souboru, a získat tak jistou rutinu v psaní kódu. U tabulek vynechávám pro počátek použití sloupců a řádků záhlaví z důvodů zjednodušení. Také parametry jako šířka, okraje a další jsou přidávány postupně. Na tabulce mají opět příležitost se „vyřádit“, protože parametrů je k dispozici dostatek, a pokud se jedná o naprosté začátečníky (což platí v 99 %), tak v rámci první vlny nadšení jim řádění chvíli vydrží.
Obrázky aneb rozumíme cestě k souboru
Pak přicházejí na řadu obrázky. Pořád mi připadnou jednodušší než pochopení odkazů. Jak asi většina čtenářů ví, je definice tagu jednoduchá. Složitější (alespoň pro žactvo) je použití. Problém je, že žáci (a myslím, že i obyčejní uživatelé) díky „oknům“ nemají zažitý pojem „cesta“ a také s ním nedokáží spolehlivě pracovat. V případě primitivního editoru ovšem nezbývá, než cestu k obrázku vypsat ručně, což při někdy složitých názvech adresářů může být problém.
Z tohoto důvodu jsou vyzvání, aby si obrázek vybrali a poté zkopírovali do adresáře s pokusným html souborem. Procvičí si tedy další činnost. Poté je psaní celé cesty odbouráno a stačí psát odkazy relativně (včetně adresáře umístěného v adresáři s html souborem, a tedy relativní odkaz na adresář a s tím spojené záležitosti).
Přesto ještě nejsou vyřešeny všechny problémy. I když žáci vědí o existenci gif nebo jpg soboru, většinou nejsou nuceni mezi nimi rozlišovat. Pokud jsou Windows nastavena na skrytí přípon známého typu, příponu ignorují poměrně snadno. Naštěstí ji neignoruje prohlížeč a je tu další vedlejší produkt: uvědomění si, že není obrázek jako obrázek. Při použití „klikacího“ editoru html by na tento a mnoho jiných problémů vůbec nedošlo, což by byla škoda.
Odkazy aneb myslíme hypertextově
No a nejtěžší na konec: odkazy. Zdánlivě jednoduchá věc, kterou většina používá téměř denně, tedy klepání na odkaz a následné načtení jiné stránky, dokáže při manuálním vytváření pěkně zamotat hlavu. Ne nutně všem, ale procento žáků zírajících a žádajících o pomoc bývá zde nejvyšší. Nejen že je nutno vytvořit další html soubor (s tím je často spojený pro mne nepochopitelný problém žáků – jak se má nový soubor jmenovat?). Dalším oříškem je uvědomit si, z kterého souboru a na který se odkazuje. Když k tomu přidáme nepřesnosti vzniklé psaním kódu, je to dost náročné.
Radost, kterou úspěšní žáci mají, pokud jim odkazy fungují, je veliká. Většinou v této fázi dostanou za úkol stvořit více souborů a z jednoho se na všechny ostatní odkazovat.
2. Za odměnu HTML editor
Moje první WWW prezentace
Po projití těchto základních částí obvykle dostanou za úkol vytvořit prezentaci v HTML na zvolené téma. Protože již mají představu, jak asi HTML stránka vypadá, na tvorbu prezentace jim nabídnu HTML editor, který za ně udělá „špinavou práci“, jako tvorbu kostry dokumentu, nalinkování obrázků a vůbec umožní všechny tagy zadat kliknutím myši, ovšem s tím, že žáci pořád vidí jen HTML kód. Editor používám freewarový, s jednoduchým ovládáním. Část žáků si sice editor na disketě odnáší domů a pak do školy chodí s pracemi hotovými, což mírně nabourává plán práce, ale jsou i horší problémy :-).
Na internet!
Další kroky už se liší podle složení jednotlivých skupin. Podle zájmů žáků je seznámím s možností vystavit své stránky na serverech podporujících freehosting (většina má už někde schránku, ke které pár MB prostoru dostali). Práce je už velmi individuální, protože každý potřebuje poradit se svým webem.
Buď v této fázi nebo i předtím (hodně se přizpůsobuji složení žáků) je nutné vysvětlit také omezení obrázků na rozumnou velikost, rozdílu použití gif a jpg a dalších věcí, které si individuálně žáci vyžádají sami, protože „to někde viděli“a chtěli by to taky tak. Např. obrázek jako odkaz, rámce a další.
Ve fázi odkazů a obrázků mají žáci k dispozici seznam základních prvků jazyka HTML na papíře formátů A4 a několik příruček v elektronické podobě stažených z internetu. Papír s tagy jim nedávám hned od začátku z důvodů udržení jisté celistvosti hodiny, která v dané fázi je důležitější než vyzkoušení jednoho tagu navíc a okamžité snaze některých jedinců nacpat do stránky všechno najednou (uvědomuji si, že mohu být nařčen z otíraní zvídavých, ale v praxi je to ověřené).
3. Závěr: HTML je motivací
Jako jeden z největších přínosů práce s HTML tímto způsobem (tedy bez Frontpage a spol.) považuji upevnění základních návyků práce s PC, např. „jak jsem to vlastně pojmenoval“ a „kam jsem to uložil“, schopnost práce s více aplikacemi najednou a mnoho dalších. Je to vlastně praktický úkol skládající se s více činností, které musí žák komplexně zvládnout. O HTML samotné pak vlastně ani nejde, ale bez něj by se žáci k výše zmiňovaným činnostem museli nutit uměle.
Pavel Netušil
0 komentářů:
Okomentovat