Textový editor Word standardně ukládá soubory s příponou doc, ale umí pracovat i s mnoha dalšími datovými typy, např. se soubory htm a html. To jsou soubory klasických www stránek. Hned na počátku je potřeba zdůraznit, že Word je sice špičkový textový editor, ale pro vytváření internetových stránek je nevhodný. V naší výuce jej používáme jen proto, že se tvorbou webových stránek zabýváme pouze okrajově a v hodinách nemáme prostor na probírání specializovaných programů, jako je např. Front Page od Microsoftu.

 
Klasické www stránky jsou obyčejné soubory s příponou htm nebo htlm, které jsou vzájemně propojeny hypertextovými odkazy. Tlačítka a obrázky si můžeme nakreslit i v aplikaci Malování nebo stáhnout z internetu. Při vytváření skutečných stránek pozor na to, aby obrázky byly konverzí převedeny na datový typ jpg nebo gif. Při stahování čehokoliv z internetu pozor na autorská práva.
Aby se po zadání www adresy stránka automaticky zobrazila (bez zadání jména souboru), musíme pro její pojmenování použít defaultní (určený výchozí) název. Nejčastěji to je index.htm, index.html, defaul.htm nebo default.html. POZOR - protože stránky musíme přenést na cizí server, musíme v nich důsledně dodržovat relativní adresování!!  K zviditelnění stránek na internetu je stačí tzv. publikovat na nějakém internetovém serveru. Publikování = pojmenování kopírování na www server, např. pomocí Total Commanderu s využitím funkce FTP přenos. Připojovací parametry určuje provozovatel námi vybraného webhostingového serveru.
Pro zdárné vytváření stránek je vhodné zalistovat v sešitu a zopakovat si pojmy: provider, free webhosting, doménová adresa, doména 2. řádu, relativní adresování, jména souborů, struktura složek, hypertextový odkaz, browser, poštovní klient.
K procvičení problematiky použijeme příklad s pracovním názvem Rybička. V tomto příkladu nejde o vytvoření graficky dokonalé webové stránky. K tomu by bylo potřeba mnoha desítek hodin práce s podstatně dokonalejšími nástroji než je Word. Příklad je zaměřen tak, aby byl co nejjednodušší a vysvětlil základní problémy při vytváření stránek.

 
Vytvořte pomocí textového editoru Word kopii webové stránky podle ukázky v příloze (nebo ještě lépe podle funkční ukázky výsledek). Startovací soubor uložte podle předpisu C:\system\kos\rybicka\index_vasetrida.htm. Startovací soubor obsahuje nadpis - název firmy, pod ním je vložen animovaný obrázek animovana_rybicka.gif a další běžné identifikační údaje o firmě. Emailová adresa je uvedena jako hypertextový odkaz, který po klepnutí automaticky spustí poštovního klienta s vyplněnou e-adresou příjemce. Dole je umístěn hypertextový odkaz na další stránku s aktuální nabídkou rybiček, a odkaz pro návrat zpět na web SZeŠ.
Podstránka C:\system\kos\rybicka\katalog\katalog_vasetrida.htm obsahuje aktuální nabídku rybiček . Stránka obsahuje nadpis a kromě textového popisu rybiček i náhledové obrázky příslušného druhu. Klepnutím na obrázek se náhled zvětší. V dolní části stránky je umístěno tlačítko zpět které uživatele přepne zpět na zobrazení homepage.

 
POZOR - příklad řeší v učebnách více tříd najednou. Aby nedocházelo k mazání práce různých studentů pracujících na stejném počítači, odlišují se jimi vytvářené soubory dodatkem "_třída", např. index_3a.htm (třída BEZ tečky). Jména společných grafických prvků zůstávají beze změny.
Pro urychlení práce jsou základní grafické prvky připraveny v počítačové síti ve složce \\Internet\vyuka\word\rybicka  (pokud příklad řešíte z domova stáhněte si obrázky z tohoto manuálu pomocí pravého tlačítka myši). Ukázka připravené grafiky v pořadí: animovana_rybicka.gif, karas_nahled.jpg, skalar_nahled.jpg, zpet.gif, skalar.jpg (zmenšeno), karas.jpg (zmenšeno).
             
   
    
  
Zajímavost: později si nezapomeňme všimnout toho, že po zabarvení pozadí bude rybička plavat stále na pozadí tvořeném aktuální barvou pozadí - je využito speciality gif souborů - práce s transparentní barvou!
Vzorové řešení je vztaženo k třídě 3.A, ostatní třídy musí případná jména souborů mírně modifikovat.
  
  
Postup:
1.Vytvoření struktury složek
Libovolným způsobem, např. s pomocí Total Commanderu vytvořte složku C:\system\kos\rybicka a do ní zanořte složku katalog a grafika (pokud složky vytvořila předcházející třída vy již nevytváříte nic).
 
2.Kopírování základních grafických prvků
Spusťte Total Commander a nastavte levý panel na server s připravenou grafikou.
Pravý panel nastavte na složku grafika a nakopírujte do ní animovana_rybicka.gif a zpet.gif.
Pravý panel nastavte na složku katalog a nakopírujte do ní fotografie rybiček a jejich náhledy. Nakonec nastavte oba panely TC na disk C: a ukončete tuto aplikaci.
 
3.Vytvoření startovacího souboru
Spusťte Word a nejlépe ihned použijte funkci Soubor-Uložit jako HTML (nebo stránku www, záleží na verzi Wordu, pokud na vašem PC tato funkce náhodou není, úplně stejně funguje Soubor-Uložit jako s nastavením typu souboru na html). Soubor uložíme pod jménem index_3a.htm do složky rybicka, kódování potvrdíme středoevropské. Přechodem do html dokumentu se zároveň trochu změní ovládací prostředí Wordu.
 
Protože v tomto souboru je umístěn hypertextový odkaz na další stránku, bude z důvodu urychlení práce nejlepší ihned vytvořit druhý soubor opětovným použitím Soubor-Uložit jako a stejný soubor uložit podle předpisu c:\system\kos\rybicka\katalog\katalog_3a.htm. Rozbalením menu Soubor a vybráním index_3a z historie naposledy editovaných souborů se vrátíme k prvnímu ukládanému souboru.
 
Zvolte vhodnou velikost a typ písma a vytvořte nadpis homepage Rybička s.r.o., vycentrujte ho a přesuňte kurzor na další řádek.
!Odlišnost od Wordu: Stlačením odskočí kurzor příliš nízko, mezi nadpisem a následujícím obrázkem by vznikla nepřiměřená mezera. Zkuste stlačit , to jsou finty bez kterých se neobejde žádný tvůrce webových stránek.
 
Nyní vložte obrázek animované rybičky funkcí Vložit-Obrázek-Ze souboru. Samozřejmě musíte určit který obrázek se má vložit a kde se nachází.. Pokud si již nepamatujeme strukturu složek podíváme se do bodu 1 a 2. Po vložení zjistíme, že se obrázek nepohybuje. To je v pořádku, Word je textový editor a ne browser. Stlačením  přesuneme kurzor o řádek níže a vhodnou velikostí fontu napíšeme prodej akvarijních rybiček. Dále kombinací stlačení  a posunujeme kurzor po ploše stránky a dopíšeme zbývající identifikační údaje firmy.
 
Zajímavost: po zapsání emailové adresy (a stlačení mezerníku) se tato automaticky změní na hypertextový odkaz spouštějící poštovního klienta (klasicky Outlook Express). Pokud by náhodou bylo potřeba hypertextový odkaz odstranit, stačí jej označit a pravým tlačítkem myši  zvolit funkci Hypertextový odkaz - Upravit hypertextový odkaz a ručně odmažeme zápis v políčku (v jiných verzích Wordu mohou být funkce pojmenovány částečně odlišně).
 
Na dolním okraji homepage je uveden odkaz na podstránku katalog.htm. Napíšeme text Aktuální nabídka, tento nápis označíme a klepneme na tlačítko Vložit hypertextový odkaz . Nyní zbývá "pouze" ukázat a klepnout na soubor který má být propojen. K tomu je určeno tlačítko procházet. Problém je v tom, že musíte kontrolovat, zda máte aktivní funkci používat relativní adresování. Příslušná funkce musí být zatržena ve volbě v levém dolním rohu. Automat někdy zklame, nezbývá než adresu napsat ručně.
Základem úspěchu je dokonalá znalost struktury složek a jmen souborů. Protože jsme oboje vlastnoručně před chvílí vytvořili tak by v tom neměl být problém. Protože pracujeme se souborem index_3a tak pracovním adresářem je c:\system\kos\rybicka. Relativní odkaz na soubor s katalogem je katalog\katalog_3a.htm.
 
Úplně dole je odkaz pro návrat na stránky, ze kterých byla ukázka zpuštěna. Napíšeme text Zpět na podporu výuky, označíme a nadefinujeme hypertextový odkaz. Protože se ale tentokrát jedná o stránky na cizím serveru, nelze použít tlačítko procházet. Do příslušné kolonky musíme ručně vepsat kompletní URL požadovavé stránky, včetně jména souboru http://www.sszeme-cestesin.cz/06_podpora_vyuky/podpora_vyuky.htm.
 
Vzorová stránka má pozadí barevné. To zajistíme funkcí Formát - Pozadí a vybereme například barvu Bledě modrá. 
Na závěr klepneme na tlačítko uložit.
 
  
4.Vytvoření souboru s nabídkou rybiček
Rozbalíme menu Soubor a v historii editovaných souborů vybereme katalog_3a.htm případně jej otevřeme jinak. Stejně jako v předcházející stránce nastavíme pozadí na bledě modrou barvu a vytvoříme vhodnou velikostí nadpis. 
 
Pod nadpisem vložíme tabulku 2x2, nejlépe s využitím tlačítka Vložit tabulku . Do její první buňky vložíme náhled rybičky karas. Vložený náhled označíme klepnutím levého tlačítka myši a panelu nástrojů zvolíme Vložit hypertextový odkaz (případně lze provést prvým tlačítkem z pohotovostního menu) a nadefinujte relativní odkaz na zvětšený obrázek. Protože ten se nachází ve stejné složce je odkaz jednoduchý, jen uvedeme jméno souboru karas.jpg. Do vedlejší buňky v tabulce zapíšeme textové údaje o rybičce karas. 
 
Zajímavost: Pokud na www stránky vkládáme velké fotografie je taktické v hypertextech odkazovat přímo na ně a ne obrázky vkládat do samostatných html souborů. Moderní browser např. IE 6.0 je potom schopen je automaticky zmenšit podle rozlišení vašeho monitoru na maximum volné pracovní plochy, což v druhém případě není možné a uživatel při prohlížení musí nepříjemně rolovat.
 
Pro urychlení řešení nyní vynecháme fotografii skalára a pod tabulku vložíme tlačítko zpet.gif. Na něm nadefinujeme hypertextový odkaz  ..\index_3a.htm pro návrat na homepage.
 
Na závěr stránku uložíme. Dále můžeme zkusit jak stránka funguje, hypertextové odkazy jsou již aktivní. Ale není dobré se radovat předčasně. To, že něco funguje na našem PC vůbec neznamená, že to bude fungovat i na internetu! Proto nyní ukončete práci s Wordem, výsledky naší práce si ověříme v nefalšovaném browseru.
 
 
5.Ověření funkčnosti stránky
Vypneme Word a spustíme Internet Explorer. Zvolíme funkci Soubor-Otevřít, tlačítko procházet. Otevřeme index_3a.htm a vyzkoušíme funkčnost vytvořených stránek. Pokud něco není v pořádku, minimalizujeme IE,  spustíme Word a zjednáme nápravu - nezapomínáme opravené soubory ukládat. A že browser má tlačítko Aktualizovat nebo Obnovit již víme dávno.
 
 
6.Dokončení příkladu, náměty k experimentování
Při vytváření www stránek se často používá k vybarvení textura (napodobení skutečného materiálu - mramor, dřevo, látka...). Vyzkoušejme Formát- Pozadí- Vzhled výplně, karta Textura. Texturu musíme volit s citem - většinou způsobí podstatné zhoršení čitelnosti textů.
 
Dále vyzkoušejme u části textů vyměnit bezpatkový font Arial za patkový Times new Roman. Čitelnost textů a estetický vzhled se pravděpodobně asi taktéž zhorší.
 
Nyní samostatně přidejte údaje o rybičce skalár.
 
Pokud některé pracoviště úlohu vyřeší rychleji než ostatní, nakreslete si ve volném čase v Malování své tlačítko zpet.bmp a použijte jej, případně si ho v Zoner Viewru konverzí převeďte na soubor typu gif. Dále můžete vytvořit logo na homepage.
 
 
7.Doporučení pro využití získaných poznatků v praxi
Skutečné www stránky musíme umístit na nějaký hostingový server. Pro experimentování vystačí freehosting. Stránky sem můžeme publikovat pomocí sharewareového programu Total Commander, který najdeme na CD v počítačovém časopise (např.PC Wordl), nebo si ho stáhneme z internetu. Parametry pro sestavení relace (připojení) získáme při zaregistrování freehostingu. Vhodný free server lze vyhledat např. pomocí www.seznam.cz. V každém případě získáme www adresu v doméně nějakého vyššího řádu. Pokud potřebujeme mít adresu v doméně druhého řádu musíme si ji zakoupit (=pronajmout). Potom ale již freehosting moc nepřichází v úvahu a dostáváme se do světa komerce.
 
V každém případě znovu a znovu zdůrazňuji nutnost relativního adresování mezi jednotlivými webovými stránkami. Ani kontrola v browseru na našem PC neodhalí všechny nedostatky. Když už budeme mít něco publikováno na internetu, požádáme kamaráda ať prohlédne náš výtvor ze svého počítače. Opět jako v browseru platí, že pokud je vše v pořádku na našem počítači, ostatní uživatelé mohou mít na svých monitorech něco jiného!
 
A nezapomínejme, že naše stránky si budou prohlížet uživatelé s nejrůznějším rozlišením na monitoru. Musíme to zajistit tak, aby se stránky nedeformovaly.
 
A ještě jsem nezdůrazňoval problematiku českých znaků. Stejně jako u emailů platí, že čeština není světovým jazykem který kraluje internetu. Uživatelé z ciziny mohou vidět místo písmen čtverečky (v nejlepším případě).
 
A když už se rozhodneme pro profi hosting, budeme si muset nejprve vybrat mezi hostingem na Windows 2003 serveru nebo na Linuxu.
 
Další problémy spojené s vytvářením webových stránek raději nebudu uvádět, abych případné zájemce o podrobnější zvládnutí problematiky neodradil hned v začátku :-).