Volitelný seminář: Didaktické využívání internetu

Seminární úkol:

S využitím podkladů, které získáte ve škole v 1. až 5. ročníku, vytvořte jednoduchou webovou stránku (www stránku), na níž bude prezentována žákovská práce, práce skupiny žáků, výsledek projektu apod.

Umístěním této stránky na vzdělávacím portálu ÚPPPV KMEN (adresa URL http://kmen.uhk.cz) se všechny publikované informace (texty, obrázky) stanou snadno dostupné každému, kdo má možnost připojit se na internet.

Tento způsob didaktického využívání internetu využívá dva principy:

1. Žáci jsou zainteresováni na vytvoření příspěvků na web, což je pro naprostou většinu z nich samo o sobě silnou motivací.

2. Učitelky a učitelé se mohou nechat inspirovat nejrůznějšími nápady, které na internetu naleznou a mohou zkusit podobné projekty realizovat ve své třídě.

K vytvoření webových stránek se používají různé programy. Například i pomocí textového editoru Word je možné webovou stránku vytvořit.

Pro začátek je však vhodné ukázat, jak lze jednoduchou webovou stránku vytvořit s minimálními znalostmi jazyka HTML. Tento způsob se také použije při zpracování seminárního úkolu.

Základem vytváření webových stránek je programovací jazyk HTML (HyperText MarkUp Language = nadtextový značkovací jazyk). Říká se o něm, že je „složitě jednoduchý“. Text napsaný tímto jazykem podle přesně stanovených zásad internetový prohlížeč (např. Microsoft Internet Explorer) "přečte" a zobrazí jako normální stránky s textem, obrázky, animacemi apod., jak je známe z internetu.

Jak jazyk HTML vypadá a jakým způsobem slouží k vytváření webových stránek je nejlepší ukázat na konkrétních příkladech.

Budeme používat jednoduchý textový editor "poznámkový blok". V něm napíšeme nejprve prostý text. Jak má text ve skutečnosti vypadat, kde mají být odstavce, kde bude vložen obrázek apod., to určí zvláštní značky - výrazy jazyka HTML, tak zvané tagy.

Aby prohlížeč rozpoznal, co je tag a co je skutečný text, píší se tagy v lomených závorkách <>. Na české klávesnici použijeme k napsání závorek pravý Alt + příslušnou závorkou označené klávesy nad ním.

Při vytváření webové stránky v poznámkovém bloku se při psaní tagů mohou používat buď velká nebo malá písmena.

Stránka, která se má zobrazit na internetu jako webová stránka, má danou základní strukturu:

<html>

<head>

<title> Záhlaví - název stránky </title>

</head>

<body> Zde je tzv. tělo stránky, obsahující text, tabulky, obrázky apod.

</body>

</html>

Z výše uvedeného by mělo být zřejmé, že stránka je ohraničena dvěma tagy. Prvním tagem <html> začíná, druhý tag </html>, který obsahuje lomítko (/), stránku ukončuje. Jedná se o tzv. párový tag.
Nejprve se prohlížeči dá příkaz "zobraz jako www stránku", na konci je značka, kterou stránka končí.

Další párové tagy slouží ke změnám vzhledu zobrazovaného textu:

Chceme-li mít na www stránce nějaký text tučným písmem, vloží se tag . Kde tučné písmo končí, vloží se tag . Podobně použijeme párové tagy pro vytvoření kurzívy ..... nebo podtrženého písma ... . Chceme-li text umístit na střed stránky, použijeme párový tag <center> ..... </center>.

Existují také nepárové tagy: Například po tagu se text zobrazí na novém řádku, tag je příkaz k vytvoření nového odstavce, napíšeme li <hr>, vytvoří se vodorovná čára.

Základní úkoly:

1. Na svém disku G:\ si vytvořte novou složku "DIDVIN".

2. Otevřete poznámkový blok, v menu Úpravy nastavte "zalamování řádků".

3. Zapište párové tagy vytvářející základní strukturu dokumentu HTML:

<html>

<head>

<title>pokus1</title>

</head>

<body>

</body>

</html>

4. Do "těla" stránky (mezi tagy <body> a </body>) vymyslete a napište libovolný text – několik řádků, třeba si zhodnoťte dosavadní průběh dnešního dne (pište jen prostý text, bez odstavců).

5. Do textu vložte tagy, kde chcete mít nový řádek a kde chcete udělat odstavec .

6. Do textu vložte párové tagy kterými vyznačíte, kde chcete mít tučný text , kurzívu a kde podtržený text , nezapomeňte zvolenou úpravu vždy ukončit.

7. Udělejte vodorovnou čáru <hr> a připište dvě tři věty o tom, jak vás tato práce baví.

8. Klikněte na Soubor, Uložit jako, otevřete si složku "DIDVIN" na disku G:\ a tam uložte napsaný text jako soubor pokus.html.

9. Když se znova podíváte do složky "DIDVIN", měl by tam být soubor pokus.html s malou ikonkou která označuje, že tento soubor lze otevřít v programu Internert Explorer.

10. Klikněte na pokus.html a divte se.

Pokračování: Upravujeme text

Postup při úpravě textu na webové stránce:

1. Otevřeme stránku

2. V horním řádku: Zobrazit, kliknout na „zdrojový kód“ a objeví se text psaný v HTML v „poznámkovém bloku“.

3. Zde můžete pomocí vkládání tagů dělat různé úpravy, změny se projeví na webové stránce.

4. Uložit provedené změny, vypnout poznámkový blok. Objeví se původní www stránka.

5. Stisknout tlačítko „Obnovit“, na www stránce se objeví úpravy.

Častěji používané tagy k úpravě písma:

Velikost písma:

Nadpisy: <h1> text text text</h1> 1 … největší 6 … nejmenší

text text

1 … nejmenší, 7 … největší

Barva písma:

text text

red, blue, green, yellow apod.

Používají se rovněž speciální znakové řady, např. "#F5F89E" je barva světle žlutá

Různé druhy písma:

Například Courier (psací stroj), barva zelená, velikost 6:

text text text

Seznamy:

<ol> … </ol> nečíslovaný seznam (s odrážkami)

<ul> … </ul> číslovaný seznam

<li> položka seznamu (nepárový tag)

Vkládání obrázků (z internetu)

Kliknout na obrázek na webové stránce pravým tlačítkem, uložit jako …, zvolit název a umístění obrázku, například do nějaké složky na disku G:\ (zvolte nejlépe složku DIDVIN)

Úprava obrázků (velikost, kontrast, jas, barvy… ve „Fotoeditoru“

Vkládání obrázků na webovou stránku

parametry umístění obrázků: align=left, align=center, align=right

zobrazovaná velikost obrázku width= … šířka, height= … výška

Celý zápis pro vložení obrázku:

Obrázky, které se mají zobrazit na webové stránce, musí být ve stejné složce, jako řídící soubor html.

Jak to udělat, aby se malý obrázek na webové stránce zvětšil?

Ve složce musíme mít dva obrázky: malý (obrmaly.jpg) a velký (obrvelky.jpg)

Jak se dělá zvětšení obrázku, tzn. po kliknutí na "obrmaly.jpg" se zobrazí nové okno "obrvelky.jpg":

Velikost obrvelky: width=480 heigh=340 až w=625 h=426 (velikost malého obrázku na stránce se upraví sama ) 650 x 440

Další témata a zajímavosti:

Jak se udělá barevné pozadí stránky:

Pokyn se dává do úvodu těla stránky, lze zadávat názvy barev („green“, „yellow“ nebo číselné kódy barev, např.:

<body bgcolor="#F5F89E"> to je světle žluté pozadí, příjemné pod fotky

Hyperlink – odkaz na cokoliv na internetu, na disku :

<a href="http://... adresa URL ..."> ...adresa URL ...</a>

Komentář, který se na www stránce nezobrazí: <!—komentář-->

Mezera v textu: < >

DALŠÍ ZAJÍMAVOSTI

Velké možnosti nabízí využívání multimediálních prostředků.

Na stránku můžete umístit odkaz na hudební sekvenci. Aby se skladba skutečně přehrála, musí být počítač je vybaven zvukovou kartou s připojenými reproduktory.

Nejprve se umístí do složky, kde je soubor html, soubor se zvukovou sekvencí, například hudba.mid.

Odkaz je stejný, jako v případě odkazu na jinou stránku apod:

<a href=“hudba.mid“>Název skladby</a>

Můžete připravit třídní stránku (fotografie dětí, krátký text apod.) a tuto stránku při jejím otevření na internetu podbarvit hudbou. Tak, jako je například barevné pozadí stránky žluté, může mít stránka „zvukové“ pozadí.

Postup umístění hudby na pozadí je jednoduchý: Do složky, kde je soubor html, se umístí soubor se zvukovým záznamem (například hudba.rmi). V hlavičce dokumentu (mezi tagy <head> a </head>) se vloží tag, který dá pokyn příslušnou hudbu přehrávat:

V tomto případě parametr loop“-1“ určuje, že se hudební sekvence hraje stále dokola. Parametr loop“0“ určuje, že se sekvence přehraje pouze jednou.

Příslušný soubor html si můžete upravit kdekoliv.

K přezkoušení potřebujete počítač, který má zvukovou kartu a dále reproduktory (sluchátka). Na výsledek své práce je možné se podívat například na mediální učebně, kde vám sluchátka zapůjčí.

Trošku víc práce dá umístit na internet písničku, kterou děti zazpívají. Princip je stejný, jako při umístění odkazu na hudbu na www stránce (viz výše).

Nejprve musíte příslušnou sekvenci vyrobit: Nahrávka z magnetofonového pásku se pomocí vhodného programu digitalizuje a na tento soubor se v dokumentu html odkáže, např:

<a href=“pisnicka.mid“>Písnička</a>

Nutno dát pozor, aby velikost hudebního souboru nepřesáhla únosnou mez.

Pokud potřebujete zařídit, aby se návštěvník stránky z jejího konce dostal rychle na začátek, stačí vložit následující tag:

<A HREF="#top">ZPĚT NAHORU</a>

Na stránce se objeví nápis ZPĚT NAHORU a stačí na něj kliknout.

Upozornění: Pracujeme se soubory a složkami umístěnými na vlastním disku G:\