Jak na rychlé seznámení s HTML kódem

Při vzdálené výuce jsem se ve dvou výběrových kurzech nedostal k online hodinám, a tak jsem se dostal před problém, jak žákům na dálku (a naštěstí poté i normálně) rychle přiblížil webovou stránku a její kódování.

V dnešní době už mi nepřijde úplně praktické, abych žáky nutil vytvářet stránky v klasickém HTML editoru. Na druhou stranu, přestože se u většiny moderních redakčních systémů nesetkají s editorem HTML, přijde mi praktické, když se žáci s kódem setkají a budou schopni se v něm zorientovat a dešifrovat některé HTML tagy. K tomuto účelu mě napadly dva přístupy a dva nástroje.

Vyrábíme fake news za pomoci funkce prozkoumat v chrome

První nápad, který mi pomohl přiblížit problematiku zdrojového kódu bylo vytvoření smyšlené zprávy na českém zpravodajském serveru s využitím funkce prozkoumat v Chrome. Myšlenka byla jednoduchá. Internetový prohlížeč měli k dispozici všichni žáci mého kurzu a prohlížeč založený na Chromiu využívali všichni. Pokud si žáci označí libovolný prvek stránky a kliknou pravým tlačítkem myši, daná část stránky se zobrazí v Nástrojích pro vývojáře a žáci vidí v kódu označenou část stránky. Pokud ji žáci změní (přepíšou), přepíše se i část kódu. Obdobně i poměrně snadno naleznou obrázek, který mohou zaměnit za svůj podvržený. V momentě, kdy změnu provedou, překreslí se část stránky. Pokud se cokoli nepovede, stačí jen znovu načíst stránku a začít odznovu.

Je třeba vybrat si zpravodajský web, který se sám aktivně v pravidelných intervalech neaktualizuje, jinak může vaše žáky čekat nepříjemné překvapení v podobě automaticky přepisovaných změn.

Žáci tak jednoduše identifikují části kódu a zároveň zjistí, jak snadné je vytvořit PrintScreen s podvrženou zprávou, která pak na internetu žije svým vlastním životem.

Wysiwyg editor online naučí rozpoznávání jednotlivého textu

Druhý nástroj, který mi při seznamování s HTML pomohl, byl online HTML editor na webu https://htmlg.com/html-editor/. Krása editoru je v její přístupnosti. Žákům stačí internetová služba a mohou začít tvořit. Buď mohou vkládat v levé části jednotlivé prvky a pozorovat, jak se vytváří HTML kód stránky, nebo do pravého panelu vkládat kód a pozorovat, jak se tvoří webová stránka.

K čemu konkrétně jsem se využil já?

První hodinu měli žáci za úkol vytvořit jednoduché představení místa jejich snů, včetně práce s obrázky a odkazy.

Druhou hodinu jsem připravil jako pro suplujícího kolegu a tak jsem řešil jako Google dokument pro Učebnu, kde žáci mi žáci svého bádání zapisovali do souboru.

Závěrem

Ani jeden z nástrojů není sám o sobě převratný. Mým cílem bylo najít metodu, která seznámí s HTML kódem žáky, kteří se s kódem nikdy předtím nesetkali a se kterými jsem díky absenci online hodin u kurzu neměl příliš mnoho šancí zjistit, jejich dovednosti a zápal pro informatiku. Na druhou stranu žáci zvládli Prozkoumávat pomocí nástrojů pro vývojáře bez potíží na dálku, s druhým nástrojem pak bez potíží pracoval i kolega, který běžně pracuje s počítačem jen jako uživatel.