9. základy tvorby www stránek. 9.1 základní požadavky...

23
9. Základy tvorby WWW stránek. 9.1 Základní požadavky tvorby WWW stránek Pro tvorbu WWW stránek existují specializované programy, obdobně jako pro tvorbu dokumentů jiných typů. V případě WWW dokumentů je situace poněkud jednodušší, protože základní datový formát WWW dokumentu je formát HTML, který je ve své podstatě čistě textovým formátem. Proto není nutné pro přípravu těchto souborů použít nějaký speciální program - stačí použít jakýkoliv, i nejjednodušší textový editor, jako je např. Notepad (Poznámkový blok), základní součást OS MS Windows. Při tomto způsoby tvorby HTML dokumentu ovšem musí autor znát všechny kódy a parametry formátu HTML a společně se zdrojovými texty je do dokumentu zapsat ručně. Druhou možností je použít tzv. editor HTML. To je typ programu specializovaného na tvorbu dokumentů HTML, který obsahuje přímo řadu pomůcek usnadňujících tuto práci. Editorů HTML dnes existuje velké množství a to i jako tzv. freeware. Specializované editory HTML lze rozdělit do dvou základních skupin podle toho zda umožňují či neumožňují práci v tzv. „WYSIWYG" módu - tvorbu WWW stránek přímo v podobě, jak jsou zobrazovány webovým prohlížečem, bez nutné znalosti příkazů HTML. Do skupiny editorů, které „WYSIWYG" mód podporují patří např. editor MS FrontPage či Macromedia Dreamveawer MX. Práce je s nimi snadná i pro začátečníky, kteří kód HTML neovládají, mnohdy však vytváří velmi složitý výstupní soubor HTML, který je později velmi obtížné editovat. V případě editorů nepodporujících „WYSIWYG" mód je nutno pracovat přímo s kódem HTML, konečný výsledek editace je nutno zjistit za pomoci prohlížeče. Příkladem takového editoru je program HomeSite. Většina profesionálních tvůrců webových stránek kombinuje oba postupy - základ stránky vytvoří ve vizuálním editoru, a poté stránku dolaďují již ručně. Existuje i další způsob tvorby webových stránek, který je založen na možnosti běžných kancelářských programů ukládat dokumenty ve formátu HTML. Tuto funkci obsahují programy balíku Microsoft Office, konkrétně Word, Excel i PowerPoint. Webový prohlížeč umí přímo zobrazovat i jiné typy souborů než jen HTML. Samotné WWW stránky mohou být ve formátu .PHP či .ASP, což jsou dynamicky generované stránky z databázového systému. Prohlížeče však také umí zobrazit jakýkoli textový soubor (.txt soubory), obrázek nebo přehrát animaci. Do prohlížečů navíc existuje spousta tzv. zásuvných modulů (plug-ins), které umožní přímo načíst i další typy dat. Webová grafika je podstatnou a dnes již neodmyslitelnou součástí profesionálních i amatérských WWW stránek. Grafika se nepřipravuje v editorech HTML, ale v grafických editorech, příkladem může být Adobe Photoshop. Jazyk HTML sám neumí obrázky upravovat či „formátovat“; jeho schopnosti spočívají pouze v umístění obrázku do daného místa a určení jeho velikosti. Všechny další vlastnosti a parametry obrázku určujeme při jeho vytvoření grafickým editorem. Ve svých počátcích byly WWW stránky statické a jednosměrné - uživateli ukázaly svůj obsah a neumožnily provádět nic víc. Dnešní moderní web ale umí s uživatelem komunikovat - například zobrazí seznamy zboží, formuláře a uživatel vybírá, zaškrtává, zadává své vzkazy, které pak přijímá webový server a dále je zpracovává. Důležitým obohacením možností tvorby přehledných webových stránek jsou tzv. rámy. Rámy umožňují rozdělit stránku na několik nezávislých oken. Některá okna pak zůstávají neměnná, ty pak obsahují informace, které jsou neustále k dispozici. V dalších oknech, se naopak informace mění, podle výběru, který provedeme v neměnném okně. Další skupinou nových možností WWW stránek jsou formuláře. Většinou slouží k vyplněnějakých údajů a umožňují tak komunikaci mezi uživatelem a serverem. Tato funkce je realizována pomocí programu, kterému se říká script.

Upload: others

Post on 12-Aug-2020

0 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: 9. Základy tvorby WWW stránek. 9.1 Základní požadavky ...fch.upol.cz/skripta/intz/Interw_9.pdf · Než začneme WWW stránky vytvářet, musí nám být zcela jasné, kdo je

9. Základy tvorby WWW stránek.

9.1 Základní požadavky tvorby WWW stránekPro tvorbu WWW stránek existují specializované programy, obdobně jako pro tvorbudokumentů jiných typů. V případě WWW dokumentů je situace poněkud jednodušší, protožezákladní datový formát WWW dokumentu je formát HTML, který je ve své podstatě čistětextovým formátem. Proto není nutné pro přípravu těchto souborů použít nějaký speciálníprogram - stačí použít jakýkoliv, i nejjednodušší textový editor, jako je např. Notepad(Poznámkový blok), základní součást OS MS Windows. Při tomto způsoby tvorby HTMLdokumentu ovšem musí autor znát všechny kódy a parametry formátu HTML a společně sezdrojovými texty je do dokumentu zapsat ručně.Druhou možností je použít tzv. editor HTML. To je typ programu specializovaného na tvorbudokumentů HTML, který obsahuje přímo řadu pomůcek usnadňujících tuto práci. EditorůHTML dnes existuje velké množství a to i jako tzv. freeware. Specializované editory HTML lze rozdělit do dvou základních skupin podle toho zdaumožňují či neumožňují práci v tzv. „WYSIWYG" módu - tvorbu WWW stránek přímov podobě, jak jsou zobrazovány webovým prohlížečem, bez nutné znalosti příkazů HTML.Do skupiny editorů, které „WYSIWYG" mód podporují patří např. editor MS FrontPage čiMacromedia Dreamveawer MX. Práce je s nimi snadná i pro začátečníky, kteří kód HTMLneovládají, mnohdy však vytváří velmi složitý výstupní soubor HTML, který je později velmiobtížné editovat. V případě editorů nepodporujících „WYSIWYG" mód je nutno pracovatpřímo s kódem HTML, konečný výsledek editace je nutno zjistit za pomoci prohlížeče.Příkladem takového editoru je program HomeSite. Většina profesionálních tvůrců webovýchstránek kombinuje oba postupy - základ stránky vytvoří ve vizuálním editoru, a poté stránkudolaďují již ručně. Existuje i další způsob tvorby webových stránek, který je založen na možnosti běžnýchkancelářských programů ukládat dokumenty ve formátu HTML. Tuto funkci obsahujíprogramy balíku Microsoft Office, konkrétně Word, Excel i PowerPoint.Webový prohlížeč umí přímo zobrazovat i jiné typy souborů než jen HTML. Samotné WWWstránky mohou být ve formátu .PHP či .ASP, což jsou dynamicky generované stránkyz databázového systému. Prohlížeče však také umí zobrazit jakýkoli textový soubor (.txtsoubory), obrázek nebo přehrát animaci. Do prohlížečů navíc existuje spousta tzv. zásuvnýchmodulů (plug-ins), které umožní přímo načíst i další typy dat.Webová grafika je podstatnou a dnes již neodmyslitelnou součástí profesionálních iamatérských WWW stránek. Grafika se nepřipravuje v editorech HTML, ale v grafickýcheditorech, příkladem může být Adobe Photoshop. Jazyk HTML sám neumí obrázkyupravovat či „formátovat“; jeho schopnosti spočívají pouze v umístění obrázku do danéhomísta a určení jeho velikosti. Všechny další vlastnosti a parametry obrázku určujeme při jehovytvoření grafickým editorem.Ve svých počátcích byly WWW stránky statické a jednosměrné - uživateli ukázaly svůj obsaha neumožnily provádět nic víc. Dnešní moderní web ale umí s uživatelem komunikovat -například zobrazí seznamy zboží, formuláře a uživatel vybírá, zaškrtává, zadává své vzkazy,které pak přijímá webový server a dále je zpracovává. Důležitým obohacením možností tvorby přehledných webových stránek jsou tzv. rámy.Rámy umožňují rozdělit stránku na několik nezávislých oken. Některá okna pak zůstávajíneměnná, ty pak obsahují informace, které jsou neustále k dispozici. V dalších oknech, senaopak informace mění, podle výběru, který provedeme v neměnném okně.Další skupinou nových možností WWW stránek jsou formuláře. Většinou slouží k vyplněnínějakých údajů a umožňují tak komunikaci mezi uživatelem a serverem. Tato funkce jerealizována pomocí programu, kterému se říká script.

Page 2: 9. Základy tvorby WWW stránek. 9.1 Základní požadavky ...fch.upol.cz/skripta/intz/Interw_9.pdf · Než začneme WWW stránky vytvářet, musí nám být zcela jasné, kdo je

2

Při „brouzdání" po WWW můžete narazit na stránky, na nichž se pohybují obrázky, blikajínápisy, či se střídavě zobrazuje text. To byl právě spuštěn nějaký applet. Applet je v podstatěprogram, který byl napsán v jazyce Java. Tento program se načítá spolu s dokumentem dopočítače a kde se současně spouští. Při opuštění stránky skončí svou činnost i applet (pokud seovšem nespustil ve zvláštním okně). Problémem však zůstává, že takový applet nemusí býtúplně neškodný program. Může to být tzv. trojský kůň, tedy program, který vykoná něcoúplně jiného, než od něho požadujete. Může dokonce poškodit vaše data. Z tohoto důvoduexistuje v prohlížečích možnost zakázat spouštění těchto appletů. Sami se tedy můžemerozhodnout, zda při prohlížení neznámých stránek dáme přednost bezpečnosti a spouštěníappletů zakážeme, nebo budeme obdivovat stránky v plné kráse i s applety.S rozvojem využívání Internetu se ukázala potřeba statické webové stránky rozhýbat ještěvíce. Používané HTML i přes standard čtvrté generace nezvládá běžné náležitosti ze světaDTP, jako je přesné umísťování objektů na pixelové úrovni či překrývání objektů. Mnohaautorům rovněž vadí, že i přes možnost skriptování přes JavaScript či Visual Basic Script jestránka po natažení do prohlížeče v podstatě neměnná, její změna je možná jen opětovnýmnahráním celé stránky. Účinným prostředkem na uvedené problémy se stává dynamickýHTML, který nabízí právě to, co dosud běžnému HTML chybí:

• přesné umístění objektů

• interaktivita stránky, jejíž obsah se dynamicky mění podle chování uživatele

• překrývání objektů

• řízené animace a další významné pomůcky.

Zavedením těchto možností se HTML dostává na úroveň multimediálních aplikací anabourává ustálený názor na vzhled webových stránek. Přesto DHTML není úplnounovinkou. Základními stavebními kameny DHTML jsou totiž kaskádové styly CSS askriptovací jazyky JavaScript či Visual Basic Script. DHTML je tedy kombinace objektůtvořených pomocí CSS a scriptovacího jazyka, který řídí jejich chování na obrazovce.Užitečné informace a novinky pro tvůrce WWW stránek lze nalézt na mnohých webovýchserver na Internetu, za všechny alespoň http://www.microsoft.com/cze/msdn.

Po vytvoření WWW stránek však činnost jejich editora nekončí. Je třeba vytvořené stránkytzv. vystavit, umístit je na počítač provozující software zvaný WWW server, z něhož jej paknačítají a prohlížejí další uživatelé Internetu. K dispozici jsou jak volně šiřitelné programystejně jako komerční produkty firem světového jména (obvykle oplývající bohatými funkcemia možnostmi nastavení oproti jejich freewareovým obdobám). Nelze poskytnout jednoznačný návod k tomu, jak nejlépe vytvářet WWW stránky; záleží tojednak na jejich typu a účelu, jednak na schopnostech a také osobním vkusu tvůrce. Někdo sespokojí s tím, že prostě zformátuje text ve Wordu a bude jej ukládat ve formátu HTML, jinývyužije možností programu, jako je FrontPage, a někdo další se naučí syntaxi příkazů HTMLa bude pracovat přímo s nimi.

Page 3: 9. Základy tvorby WWW stránek. 9.1 Základní požadavky ...fch.upol.cz/skripta/intz/Interw_9.pdf · Než začneme WWW stránky vytvářet, musí nám být zcela jasné, kdo je

3

9.2 Základní zásady tvorby WWW stránek

Web má nejen svá pravidla, svůj jazyk a jeho přesnou syntaxi, ale také své zásady. Jak se píšev jednom z nejlepších internetových časopisů HotWired, „Nové médium si vyžaduje novémyšlení" - a vskutku, na tvorbu webu není možné aplikovat postupy a ideje známé z médiapapírového.Zásady tvorby WWW stránek představují soubor doporučení a zkušeností, které vedou ktomu, aby byly vytvořené stránky účelné, zajímavé, a aby proto byly často navštěvovány.Samotná znalost syntaxe jazyka HTML či práce s editorem nestačí - tak jako nestačí naučit sepsát k tomu, aby se z negramotného člověka stal spisovatel.V první řadě si musíme uvědomit, že většina uživatelů brouzdajících Internetem hledáinformace. Chtějí například získat podrobné informace o produktech či službách, nebo si jechtějí zakoupit, přečíst si nejčerstvější zprávy, zahrát si hru nebo se na něco zeptat. Den odedne je Internet čím dál silnějším prostředkem, který je schopen těmto lidem pomoci, protožejeho obsah je čím dál důmyslnější a úplnější. Problém je ale v tom, že při zvětšování objemudat se Internet stává stále více nepřehledný. Každý server provází uživatele novýmnavigačním procesem, aby člověk našel informace, které hledá. Vyhledávací nástroje nalézajítisíce informací. Často se stává, že než si uživatel najde to, co hledá, je to již zastaralé.Nejdůležitější, co můžeme udělat při počátečních krocích plánování tvorby WWW stránek, jerozhodnout, co hodláme zveřejňovat, jak tyto informace vhodně uspořádat a jak zajistit, abybyly tyto informace úplné a aktuální. Důkladným plánováním lze vytvořit úspěšný web, kterýbude pro naše cílové publikum užitečný.Postup při tvorbě plánu obsahové náplně WWW stránek odpovídá níže uvedenému schematu:

1. Položte si vhodné otázky ohledně vaší firmy, vašich zákazníků a vašeho webu.2. Definujte své poselství. (Zdůrazněte, co chcete sdělit.)3. Utřiďte informace do logických skupin.4. Definujte technické požadavky na to, co chcete publikovat.5. Zaveďte proces průběžné aktualizace obsahu.6. Zvažte způsob prezentace7. Naplánujte proces editace webu.

Zohlednění cílové skupiny čtenářů WWW stránekNež začneme WWW stránky vytvářet, musí nám být zcela jasné, kdo je bude navštěvovat aproč. Na základě těchto úvah vytvoříme stránky a podřídíme je určitým pravidlům, neobráceně. Zní to zcela samozřejmě, ale podíváme-li se na spoustu nevhodně vytvořenýchstránek, samozřejmé to určitě není. Webové stránky lze tedy rozdělit do několika typů, znichž se každý řídí jinými pravidly:

1. Stránky nabízející přímé služby či prodej produktů. Jako v obchodě: vše stručné,zřetelně viditelné, umístěné po ruce. Nákup musí být snadný - zaškrtnout, co chci, koliktoho chci a stisknout tlačítko (obvykle Koupit), které realizuje transakci. Stránka musíbýt na první pohled srozumitelná, měla by obsahovat dostatek informací o produktu (tohlavně), dále by neměla by obsahovat velké množství grafiky a dalších (obvyklezbytečných) ozdůbek; měla by být i krátká, jinak bude potenciální zákazník neustálerolovat stránkou tam a zpět. 2. Prezentujeme produkty. Velmi časté jsou „komerční" stránky, které mají významjakýchsi produktových prospektů umístěných na Internetu. Srovnání je na místě - zde by

Page 4: 9. Základy tvorby WWW stránek. 9.1 Základní požadavky ...fch.upol.cz/skripta/intz/Interw_9.pdf · Než začneme WWW stránky vytvářet, musí nám být zcela jasné, kdo je

4

měly být stručné informace, fotografie, tabulky a informace obsáhlejší. Pro přilákánípozornosti je dobré použít efektní, ale maličkou animací, atraktivní grafiku a spíše sporétexty. Velké množství stránek podrobností, jako jsou například technické popisy,neumisťujeme nikdy do hlavní stránky produktu, ale vytvoříme na ně odkaz. Tytostránky by také měly být krátké, v ideálním případě by se měly vejít do jediného oknaprohlížeče bez rolování. Můžeme samozřejmě dávat k dispozici i rozsáhlé materiály proopravdové zájemce, jako je videoklip, zvuková ukázka atd.; vždy ale formou odkazů ztéto stránky. Dobré je uživatele povzbudit ke zpětné reakci a dotazu; kdo se táže, jakokdyby už nakoupil - proto umísťujeme na každou stránku s produktovou prezentacíalespoň odkaz na e-mailovou adresu prodejce.3. Poskytujeme pouze informace. Příklad nekomerčních stránek, živených buďproužkovou inzercí nebo přímo sponzorovaných. Jedná se o stránky velmi užitečné ačasto navštěvované - čtenář dobře ví, že zde má zadarmo informace, které by si jindemusel koupit, a že se jedná o zdroj nezávislý. Z toho důvodu mohou být stránky delší apodrobnější, efektní grafika a animace by se zde ani vyskytovat neměla - čtenář chcečíst a potřebuje k tomu klidnou stránku. Pochopitelně to neznamená, že by stránkyneměly být estetické — je to stejné, jako když připravujeme barevný časopis a chcemelákat čtenáře. I další srovnání s časopisem sedí: lze využít vícesloupcovou sazbu, kde jev jednom sloupci (centrálním či levém) hlavní text (stránka se pak lépe čte), po stranáchjsou různé odkazy, citáty nebo menší obrázky. Používáme členění a typografie: nadpisy,řezy písem.

Dobrý vydavatel před sebou vidí každou minutu své práce svou cílovou skupinu, okruh lidídefinovaný podle řady kritérií, pro který své médium připravuje a vydává. Žádný vydavatel sinedělá iluze, že obsáhne všechny čtenáře ve své zemi; většina z nich bojuje o nepatrnéprocento z celkového počtu a nejinak je tomu i u Internetu. Naše WWW stránky mohousledovat a číst různé uživatelské skupiny. První jsou zaměstnanci naší firmy a jejíspolupracovníci. Technicky jsme pak v prostředí zvaném Intranet a ne Internet, ale tonevadí: web je zde samozřejmě stejný. Nicméně jeho cílová skupina je velice specifická, aproto musí být i jinak připravený. Hlavní je účelnost, můžeme zapomenout na efekty, cílem jeukázat informace stejně přehledně a rychle jako na firemní nástěnce. Jsou-li však čtenáři našizákazníci, platí zde jiné zákony - musíme je vtáhnout do děje a nedopustit, aby stránkyopustili buď znuděni formou, obsahem či dlouhým hledáním toho, co potřebují. Musíme dálerozlišovat, zda cílíte svoje stránky na profesionály nebo na lidi teprve se s Internetemobeznamující - je to stejný rozdíl, jako když se připravuje slabikář či vysokoškolskéskriptum. Velmi dobré je dát na úvodní stránku odkaz do části věnované začátečníkům (o čemje tento server, struktura navigace, základní poučky atd.).

Velikost stránek a propustnost sítíNávrhář internetové stránky musí neustále svádět těžký boj mezi touhou na jedné straněvytvořit stránku co nejpestřejší a nejefektnější a na druhé straně mezi technickýmischopnostmi svých čtenářů tyto stránky v rozumném čase z Internetu načíst. Pokud vytvářímewebové stránky zaměřené na širokou veřejnost, znamená to, že jejich teoretická nejvyššírychlost přenosu dat bývá 2-3 kilobajty za sekundu. Průměrná běžná přenosová rychlostdosažená v praxi bývá kvůli ucpaným linkám ale podstatně menší. Samozřejmě existujívýjimky: uživatelé na stejné univerzitní páteři s megabitovými rychlostmi, časy mimo špičku,uživatelé připojení rychlými pevnými linkami; to jsou však zatím výjimky. Znamená to, že přinávrhu stránek musíme velmi šetřit velikostí dat - zejména na často navštěvovanýchstránkách, jako jsou titulní stránky (index.html), je doslova každý kilobajt dobrý. Znamená to,že načítaná stránka by celá včetně obrázků neměla přesáhnout 100-150 kB, ale raději méně -

Page 5: 9. Základy tvorby WWW stránek. 9.1 Základní požadavky ...fch.upol.cz/skripta/intz/Interw_9.pdf · Než začneme WWW stránky vytvářet, musí nám být zcela jasné, kdo je

5

mysleme na to při návrhu a hlavně při umísťování obrázků. Částečné řešením, jak urychlitzobrazování je vytvářet stránky obsahující nezávislé (nevnořené) tabulky, které se rychlejinačtou a objeví se také rychleji v prohlížeči. Ale stále platí — takový obrázek o velikosti 10-12 kB je na pováženou a musíme mít zvláštní důvod k tomu, aby na stránce byl.S výše uvedeným problémem omezené propustnosti internetových linek souvisí i důrazkladený na maximální jednoduchost stránek. Je to téměř neuvěřitelné, ale toto pravidlo platístále více a stále přísněji. Významným specifikem Internetu se stal fakt, že uživatel věnujewebové stránce velmi krátkou pozornost - mnohem kratší než článku v časopisu, mnohemkratší než článku v knize. WWW stránka se tak skoro blíží televizi - uživatel se musí „podívata vidět", nesmí být nucen ke zdlouhavému zkoumání, rolování, manipulování se stránkou atd.Tvrdí se, že maximální doba zkoumání nové stránky je deset sekund - pokud uživatel nezískápřesný dojem, o čem stránka je a co mu nabízí, klepne na „Zpět" nebo zavře prohlížeč.Zjednodušení dále znamená, že je nutné velmi pečlivě zvažovat délku stránky, tj. kolik„monitorů na sobě" by stránka vyžadovala k zobrazení. Ideální je, když se vejde dorozumného rozlišení (dnes již většina uživatelů používá 1024x768 bodů) celá; a ve většiněpřípadů by neměla přesáhnout jedno stisknutí klávesy PageDown.

Hypertextové odkazyDalším výrazným rysem WWW stránek je možnost umísťování odkazů do webových stránek- jak textových, tak obrazových - je mimořádně lákavá a při dobrém provedení také velmiužitečná. Odkaz sděluje „zde se dozvíte něco více" k danému tématu, pojmu, vlastnímu jménuatd. Hypertextové odkazy, které mohou mířit na jiná místa aktuálního dokumentu nebo dozcela jiných dokumentů, sice nenahradí práci s rejstříkem či doporučenou literaturou, ale jsou-li aplikovány správně, ušetří čas a práci. Umísťování odkazů do textu ale není zcelajednoznačné. Pokud se uživatel uprostřed věty „odklikne" jinam, je vyrušen z půlky věty čimyšlenky, a je navíc možné, že se už nikdy nevrátí zpět, protože na lezl odkaz natolikzajímavý, že pokračuje v brouzdání úplně jinde - což si jistě nepřejete. Řešení se nabízí -otevřít stránku do nového okna, ale uživatelé to nemají příliš rádi. Odkazy v textu navíc takéruší čitelnost; v běžně černém textu se objevují modrá podtržená slova, což nepřispívá snadnésrozumitelnosti a čitelnosti stránky. Zajímavou metodou, kterou se tyto problémy alespoňčástečně řeší či obcházejí, je umísťování odkazů na kraj stránky, i včetně stručného vysvětlení- asi jako když se v knize umísťují anotace na spodek stránky. Čtenář tak není odváděn přímood čtení a může se až po „zkonzumování" celé stránky vrátit k anotacím, u kterých je přímouvedeno vysvětlení.I umísťování odkazů se řídí určitými pravidly (nebo spíše zásadami):

1. Tvořte text tak, jako kdyby v něm nebyly žádné odkazy. Odkazy jsou čitelné jižstandardně používanou modrou barvou a podtržením, není zapotřebí na ně v textupoukazovat.

2. Odkazy neplýtvejte a myslete na jejich vhodnou délku. Samozřejmě není obtížnévytvořit v každé větě hned několik odkazů, dnes už má skoro cokoli svou podobu naInternetu; umísťujte odkazy pouze na ty prvky, které mají podstatný význam pro danýtext. Odkaz by se neměl vléci přes mnoho slov, protože podtržení a jiná barva zhoršuječitelnost.

3. Odkaz je současně zvýrazněním: myslete na to a vhodně to využívejte. 4. Využívejte kaskádové styly k tomu, abyste k jednotlivým odkazům doplnili

„bublinovou nápovědu", tak můžete zrealizovat, aby mohl čtenář zjistit bližšíinformace k odkazu dříve, než na něj klepne.

Page 6: 9. Základy tvorby WWW stránek. 9.1 Základní požadavky ...fch.upol.cz/skripta/intz/Interw_9.pdf · Než začneme WWW stránky vytvářet, musí nám být zcela jasné, kdo je

6

Začlenění obrázkůŽe máme obecně usilovat o co nejmenší velikost obrázků (ovšem aby současně splnily svůjúčel), už bylo psáno výše. Existuje však několik triků týkajících se umísťování jižvytvořených obrázků do WWW stránek.

1. Nezapomeňte na přidávání parametrů HEIGHT, WIDTH, a BORDER tj. informací ovelikosti a orámování obrázku, už do HTML kódu. Je to samozřejmě trochu prácenavíc, ale prohlížeč tak může ihned vykreslit rámeček a pokračovat se zobrazovánímtextu. Při zdlouhavém načítání musíte uživatele nějak zabavit - provedete to tím, že semu rychle zobrazí text, (který může číst) a mezitím se natahují obrázky. Pokudnebudete specifikovat parametry HEIGHT a WIDTH, musí se prohlížeč znovu dotázatna webový server a „sáhnout" si přímo do souborů obsahujících tyto obrázky, abyzjistil jejich velikost a ještě před jejich načtením vykreslil rámeček příslušné velikosti.Navíc, v takovém případě bude text na stránce uživateli poskakovat, což jenepříjemné.

2. Nezapomínejte nikdy na alternativní popis k obrázku, tj. parametr <...ALT=„popis"...>u tagu Image. Řada uživatelů vypíná obrázky kvůli rychlejšímu načítání; pokud jsouobrázky současně i odkazy, je toto doslova povinné. Uživatelé tak zjistí, co se zaodkazem skrývá dříve, než na něj klepnou. Pokud předpokládáte, že určité procentouživatelů vašeho webu bude pro čtení používat textové prohlížeče, je ALT nezbytný.

3. Neodkazujte se nikdy na grafiku, která je na jiných serverech WWW. Prohlížeč musíustanovit nové spojení, což může trvat velmi dlouho a zcela zbytečně to prodlužujenačítání. Říká se, že každé nové spojení může prodloužit načítání stránky až o jednu,dvě sekundy, někdy i více. Odkažte se na obrázky (obecně na jakékoli soubory) najiných serverech jen tehdy, jedná-li se o velmi velké (řádově megabajtové) soubory anemáte-li na vlastním serveru místo; upozorněte na to ovšem své čtenáře.

4. Pokud chcete pracovat s vodorovnými oddělovacími linkami, vždy zapřemýšlejte,jestli není lepší použít běžný tág HR, který nevyžaduje žádné čtení dat z Internetu.Nastudujte si parametry HR a zjistíte, že lze vytvářet řadu typů těchto čar a že efektvůbec nemusí být obligátní a nudný.

5. Nenechejte se unést obrazovým pozadím. Samozřejmě zde hraje roli móda - před párlety bylo obrazové pozadí ještě poměrně módní, dnes je naopak módní jednolitá bílá čičerná barva a spíše práce s typografií. Nezapomeňte na to, že i když je obrázek vpozadí velmi malý, (musí se naskládat na obrazovku i stokrát a výsledné překreslovánístránky (to nemá nic společného s načítáním z Internetu, ale s rychlostí počítače a jehografického subsystému) je pomalé či trhané. Od obrázkových pozadí se dnes ustupuje- dlaždice poskládaná na celé stránce totiž ve většině případů velmi komplikujeorientaci v textu.

6. Pokud vytváříte třeba archiv fotografií, nedávejte do stránky mnoho velkých obrázků -stránka se pak dlouho načítá a to nemá nikdo rád. Ideální je, když si obrázky vnějakém grafickém editoru zmenšíte na přijatelný rozměr a poté je umístíte v počtu10-20 obrázků na stránku a to tak, aby klepnutí na malý obrázek (náhled) otevřeloobrázek ve skutečné velikosti (nejlépe v novém okně).

7. Obsahují vaše stránky příliš mnoho animovaných ikon spřátelených serverů?Nahraďte je textovými odkazy - zaberou méně místa, působí mnohem méně rušivě amůžete tak zkrátit velikost stránky třeba o 15 kB, což už stojí za úvahu.

Specifickým a kdysi značně populárním druhem navigačního prostředku a současně webovégrafiky jsou tzv. imagemapy, na konkrétní místo citlivé obrázky. Jedná se obvykle o většíobrázky, kde klepnutí na různá místa zprostředkovává odkazy na různé stránky. Uživatel takmnohdy potřebuje nemalou intuici, aby zjistil, jak se vlastně dostat dál.

Page 7: 9. Základy tvorby WWW stránek. 9.1 Základní požadavky ...fch.upol.cz/skripta/intz/Interw_9.pdf · Než začneme WWW stránky vytvářet, musí nám být zcela jasné, kdo je

7

Dnes se imagemapy příliš nepoužívají a ani se jejich používání nedoporučuje. Web stále vícea více míří k přímočarosti (což nemusí vždy znamenat jednoduchost), uživatel by neměl býtpříliš nucen k tomu, aby přemýšlel, kdepak jsou ty odkazy skryty. Konečně, imagemaps jsouskoro vždy velké obrázky (desítky kilobajtů) a to je druhý významný fakt, který hovoří protinim.

Orientace na WWW stránceVětšina webových stránek je křižovatkou uživatelových cest s několika rozcestníky. Způsobyjejich definování a značení jsou zejména u důležitých, centrálních stránek velice podstatné, ataké zde platí několik důležitých zásad:

1. U dlouhých dokumentů přetékajících přes několik stránek (několikrát „PageDown")hrozí, že čtenář ztratí orientaci. Udělejte na začátku takového dokumentu obsah(nadpisy jednotlivých částí— kapitolky) a proveďte jeho provázání pomocí odkazů.Člověk je zvyklý na stránky v knize — každá stránka je pochopitelnou a stravitelnoujednotkou, na rozdíl od jediného dlouhého hada obsáhlého internetového dokumentu.Stránkujte jej také — například oddělovacími linkami s tím, že na začátku každé„stránky" je uveden skok na začátek, může zde být i číslování. Druhou možností jetakovýto dokument rozsekat na více samostatných webových stránek; to je sicepřehledné, ale každá stránka se musí načítat zvlášť a jsme tak velmi daleko od„listování" knihou.

2. Základní navigační rozcestníky by u jakýchkoli stránek, které se nevejdou na jednuobrazovku, měly být na začátku i na konci dokumentu. Musíte svým čtenářůmneustále zpříjemňovat práci s vašimi stránkami - pokud budou muset vždy po přečtenídokumentu rolovat na jeho začátek, aby se dostali někam dál, zřejmě vás nebudoupříliš milovat. Pokud máte v horní části stránky komplikované navigační prvky(obrázky), můžete umístit na spodní část pouze jejich zjednodušenou verzi. Pokud jenavigace vašeho webu komplikovaná a obsahuje příliš mnoho částí, udělejte tzv. mapuwebu, pomocí které může uživatel ihned skočit až na poslední úroveň vnoření.

3. Neumísťujte na vaše stránky tlačítka či odkazy typu Zpět, Předchozí nebo Další.Tlačítko Zpět je úplně zbytečné, každý je má v prohlížeči zabudováno; navíc stejněnevíte, odkud se čtenář na stránku dostal, takže se tento odkaz může minoutzamýšleným účinkem. Pokud máte dokument strukturovaný do více stránek, jerozumnější pojmenovávat odkazy způsobem Pokračování na straně 4 nebo Nazačátek článku či Na úvodní stránku. Nepředpokládejte automaticky, že čtenář oka-mžitě pronikne do vámi navržené struktury dokumentu.

4. Pokud používáte grafické odkazy (tlačítka), nezapomínejte nikdy na alternativní textpro ty uživatele, kteří mají vypnutou grafiku.

5. U vícestránkových dokumentů nezapomínejte na název webové stránky - tag TITLE.U běžných stránek si ho uživatelé často nevšímají, tady je šikovným pomocnýmnavigačním prvkem, který je neustále zobrazen v hlavní liště okna. Měl by tedy znítnapř. „Průvodce galerií - stránka 3", nikoli jen stále „Průvodce galerií".

6. Vyšší školou kvalitní navigace bohatými stránkami je vyhledávání podle klíčovýchslov. Každé webové sídlo mající stovky stran by mělo vyhledávání obsahovat a totovyhledávání by mělo být k dispozici na všech stránkách, nikoli jen na hlavní, vstupnístránce.

Bezpečnost WWW stránekInternetu, je široce otevřený systém a tak vše, co se na něm objeví je dáno všanc hackerůmcelého světa. Případů probourání se přes bezpečnostní hráze jsou denně stovky - stačí se

Page 8: 9. Základy tvorby WWW stránek. 9.1 Základní požadavky ...fch.upol.cz/skripta/intz/Interw_9.pdf · Než začneme WWW stránky vytvářet, musí nám být zcela jasné, kdo je

8

podívat na seznamy odchytnutých hesel na některá „privátní" webová sídla, které jsou denněna Internetu k nalezení. Uvažujte o následujícím:

1. Co s privátními materiály? Řada firem si plete Internet s Intranetem a publikuje naněm privátní, vnitrofiremní materiály, které jsou chráněny heslem nebo jsou pouze vadresářích, ke kterým nevede odkaz. Snaha zpřístupnit tyto materiály všem kancelářímfirmy je chvályhodná, ale třeba právě toto je případ, na který čeká vaše konkurence,zatím neúspěšná v nasazení fyzického špióna do vašich řad. Odchytnutí hesla neníúplně jednoduché a vetřelec k tomu skutečně musí najmout hackera, ale mohli byste sedivit, o kolik jednodušší metody mohou být také funkční. Jsou pod heslem přístupnávšechna privátní data nebo jen vstupní stránka? Je tak snadné vyslat na daný webrobota, který prozkoumá veškerá data v adresářích a hezky je zaindexuje, takže jsou kdispozici na jediné klepnutí - ochrana tím, že umístíte data do dokumentů, na kterénevedou odkazy, je zcela naivní. Současný stav bezpečnosti na Internetu není přílišpříznivý publikování zcela tajných materiálů - ty by měly zůstat vždy v dostatečněchráněné lokální síti. Ostatní privátní dokumenty se dají šířit jednoduššími cestami,např. pravidelným rozesíláním elektronickou poštou v zašifrované podobě.

2. Oddělte vnitřní síť od vnější. Prostředky pro ochranu vnitřní sítě před vetřelci zInternetu, tzv. firewally, stále ještě nejsou ve všech případech zavedeny - jedná sečasto o nákladné programy a jejich implementace také nebývá jednoduchá. Bezfirewallu byste však neměli mít firemní síť připojenou k Internetu ani na minutu!

3. I proti robotům se dá bránit. Jistě máte řadu důvodů k tomu, aby vám autonomníprogramy prohledávaly a indexovaly data na vašem webovém serveru. Pomoc jepoměrně snadná: umístěte do kořenového adresáře webového serveru souborrobots.txt, který obsahuje jména souborů na vašem webu, u kterých si nepřejete, abyje prohledávací stroje indexovaly.

9.3 Základní zásady správy WWW stránekProtože WWW stránky jsou na Internetu vystaveny celému světu, je třeba udržovat jev takovém pořádku, abychom se jako jejich tvůrci nemuseli záhy za jejich obsah stydět:

1. Pečlivě testujte platnost veškerých odkazů, které na svých stránkách vytvoříte.Neplatné odkazy jsou velice nepříjemné a také cosi vypovídají o vaší pečlivosti - cosiznačně nelichotivého. Nemusíte vše kontrolovat ručně, existují editory (např. v knizepopsaný program HomeSite), které jsou schopny veškeré odkazy prověřitautomaticky. Mnoho webových serverů umožňuje nahradit standardní stránku schybovou hláškou 404 za vlastní stránku v designu webu, kde třeba můžete uživatelipoděkovat, že našel neplatný odkaz.

2. Ověřujte i správnou syntaxi HTML. To, že se na stránce v prohlížeči cosi objeví a žese to dokonce blíží vašim záměrům, ještě neznamená, že je HTML syntaxe správná.Důsledkem pak mohou být špatně zobrazené stránky v jiných prohlížečích; měli byste,pokud jste opravdu pečlivými autory, ověřovat zobrazení stránek alespoň v posledníchverzích Internet Exploreru a Netscape Navigatoru.

3. Ověřujte aktuálnost a datujte poslední obnovení stránek. Důležité stránky by měly mítna svém konci či nejlépe hned na začátku stránky poznámku „Naposledy upravenodne... či Aktualizace..."; pomůže to v orientaci vám i návštěvníkům těchto stránek.

4. Dejte svým uživatelům zpětnou vazbu. Je rozumné dát na důležité stránky odkaz naautora či odpovědného správce těchto stránek (odkaz typu „mailto:jmeno@adresa")anebo nějaký kontaktní formulář pro rychlý vzkaz; uvidíte, jak často vás právě čtenářivašich stránek upozorní na nalezené chyby.

Page 9: 9. Základy tvorby WWW stránek. 9.1 Základní požadavky ...fch.upol.cz/skripta/intz/Interw_9.pdf · Než začneme WWW stránky vytvářet, musí nám být zcela jasné, kdo je

9

NetiquetteDodržování „netiquette", jakýchsi pravidel vytříbeného chování, už není jen věcí osobníslušnosti. Vypovídá také velice silně o zkušenosti autora příslušných stránek. Opět několikzásad:

1. Pozor na autorská práva a ochranné známky. Pokud budete vystavovat materiál, jehožautorem je někdo jiný, je nutné získat povolení od autora, jinak porušujete autorskýzákon. Používáte-li firemní nebo produktové známky, které jsou chráněny, připojtepříslušné ochranné známky. Vyhněte se možnosti záměny těchto označení soznačením vašich vlastních produktů. Je zdvořilé požádat o svolení autora stránkypřed tím, než umístíte ze své stránky odkaz na jeho stránku; není to samozřejmě nutnéu komerčních stránek, nicméně u privátních, osobních stránek to doporučujeme.

2. Neurážejte žádného z potenciálních čtenářů. I když je váš materiál zaměřený pouze naurčitou skupinu lidí, buďte opatrní, abyste se nedotkli ostatních - rasových menšin,nemocných lidí atd.

Autorská práva na InternetuObecné povědomí o autorských právech na Internetu je velice nízké. Hlavní zásady jejichdodržování lze shrnout do několika bodů:

1. U jmen produktů, obrázků atd. nemusí být explicitně umístěna značka pro ochrannouznámku ©, ® či TM. Toto platilo dříve, ale Bernská konvence o autorských právech defacto definuje, že „všechno je chráněno, pokud není výslovně řečeno jinak“.

2. Pokud chcete chránit vaše vlastní produkty a autorská díla poněkud silnější ochranou,můžete použít ochrannou známku, a to buď ve formě: © nebo „Copyright“, nikoliformou „(C)“. Vždy musí být uvedeno datum a jméno autora; často přidávané znění„Veškerá práva vyhrazena" („AU rights reserved“) je dnes archaické a bez významu.

3. Autorskou ochranu porušujete i v tom případě, když přebíráte autorské materiály ašíříte je zdarma. Stejně jsou autorsky chráněny materiály ve „veřejných" oblastechInternetu, jako je Usenet (News), i když to tam není explicitně řečeno! Usenet adiskusní skupiny lze chápat pouze jako transportní médium a kopírovací médium,které funguje stejné na příkazy lidí, a pouze lidé mohou zneužít autorsky chráněnémateriály.

4. Lze využívat citací z děl jiných autorů, ale s opatrností, I citování může porušitautorský zákon; citovat by se měly pouze krátké výseky z díla, měly by být vždykomentovány či jinak doprovázeny; nesmí se citovat více, než potřebujete ke splněnísvého cíle, který sám neporušuje autorský zákon. Citací nesmíte poškodit komerčníhodnotu díla; citování celých děl už není citování, ale nelegální kopírování.

5. Skutečnosti, fakta nemohou být chráněny autorsky - ovšem to, jak je vyjádříte apodáte, chráněno je.

6. Autorská ochrana se u současných děl časem neztrácí, není zapotřebí ji obnovovat.Nemůžete získat autorská práva na cizí dílo například tím, že od něj „odvodíte" dílosvé (zákon na „odvozování" pamatuje).

Je dobré si však pamatovat, že v případě soudních sporů může strana, která se cítí poškozena,žalovat pouze úhradu prokázaných škod a je její povinností tuto škodu dokázat.

Vhodné uspořádání WWW stránekV případě rozsáhlejšího uspořádání našeho webového projektu s větším počtem stránek jetřeba pečlivě promyslet hierarchii těchto stránek. Základní koncept pyramidy je jasný -existuje jedna centrální, „domovská" stránka (obvykle s názvem index.html nebo default.html

Page 10: 9. Základy tvorby WWW stránek. 9.1 Základní požadavky ...fch.upol.cz/skripta/intz/Interw_9.pdf · Než začneme WWW stránky vytvářet, musí nám být zcela jasné, kdo je

10

- tuto stránku prohlížeč automaticky načte z daného adresáře, když nezadáte žádné jméno), natéto stránce jsou odkazy na druhou úroveň stránek, na této druhé úrovni na třetí atd. I zde jetřeba myslet na důležité zásady:

1. l. Umístěte co nejvíce důležitého obsahu již na hlavní stránku. Vždy se snažte, abyčtenář musel používat co nejméně klepnutí, než se dostane k tomu, co chce zobrazit.Každé klepnutí na odkaz je nepříjemností, za kterou může následovat ažněkolikaminutové čekání při načítání, což odrazuje od dalšího prohlížení. Zcelachybné je například vytvoření první stránky (obvykle obsahující jenom obrázek), kteráje pouze vstupní - tedy kde je pouze sdělení typu „Vítejte“ či „Vejděte“. Hlavnístránka stejně tak nemůže být plná odkazů, stala by se velice nepřehlednou; umístěteproto odkazy do horní řádky či úzkého levého sloupce a do hlavního prostoru stránkyjiž vložte obsah, a to ten nejzajímavější, který na svém webu máte.

2. Čím méně pater má hierarchie, tím lépe. Čtenář by se měl dostat k podstatnémusubjektu hned na první pokus, měl by se tedy nalézat ve druhém patře hierarchie.Pokud váš web obsahuje služby z velice různých oblastí, uvažujte o zřízení virtuálníchprostorů, které by se těmto oblastem výlučně věnovaly. Předpokládejte, že web vašífirmy (www.firma.cz) je vstupní branou do několika oddělení: průvodcem filmovýminovinkami, sportovním zpravodajstvím a cestovní kanceláří. Místo hierarchie, kdy setato oddělení rozčleňují v hlavní stránce a mají pak své „domovské" stránky až nadruhé úrovni, je rozumné zřídit weby například s názvy film.firma.cz, sport.firma.cz atravel.firma.cz; vytvoření těchto webových prostorů je zcela ve vaší moci a ne-potřebujete k tomu souhlas centrálního správce domén (a taky to nic nestojí).

3. Čím méně textu, tím lépe. I když je web jako stvořený k publikování, má jednupodstatnou nevýhodu: lidé neradi čtou písmena z obrazovky, spíše jí brouzdají,přeskakují texty apod. Pokud je to možné, zmenšete množství základního textu adoplňte spíše řadu nadpisů, sloganů, citátů v postranních sloupcích, fotografií a jinégrafiky. Do knihy nebo i do novin je člověk zvyklý se v klidu začíst; nad počítačem(notabene připojeným k lákavému Internetu) spíše nedočkavě poposedává a máneustále chuť přeskakovat dál, konzumovat po malých částech. I tehdy, jste-livydavatelem a „písmena" jsou vaším denním chlebem, je vhodné koncipovat webovéčlánky jinak než v časopisu - web je odlišné médium a platí zde jiná pravidla než učasopisů, takže pouhé zrcadlení časopiseckých článků je spíše nešvarem a šetřením nanesprávném místě. Webové stránky jsou kratší, častěji prostřídané obrázky či jinougrafikou, obsahují více sloganů a nadpisů.

Zohlednění typu prohlížeče při tvorbě WWW stránek

Poměrně nepříjemnou skutečností je, že uživatelé Internetu používají nejrůznější programy kjeho prohlížení, navíc běžící na různých platformách - nemusí to být tedy jen PC, ale takéstroje Unix (zejména na univerzitách) a řídce počítače Macintosh. Různé prohlížeče majírůzné schopnosti a není proto vždy nejmoudřejší připravovat stránky tak, jak to odpovídáschopnostem toho nejvyspělejšího prohlížeče.Zatím lze doporučit neoptimalizovat stránky pro žádný z obou nejrozšířenějších prohlížečů,spíše se držet standardu HTML definovaného organizací W3C - tj. standardu HTML 4.01. Vnašich zemích měl v roce 2001 již dominantní podíl Internet Explorer (kolem 80-85 %).Zbytek uživatelů pracoval s prohlížečem fy Netscape a asi 1 % podílu používalo prohlížečOpera. Uživatele starších verzí těchto nejrozšířenějších prohlížečů, které mají problémyzejména s kaskádovými styly CSS, asi již dnes nemá smysl brát při tvorbě moderních WWWstránek v úvahu. Jednak tvoří jen nepatrnou část uživatelů a jednak kvalita WWW stránek byomezením moderních prvků silně ztratila.

Page 11: 9. Základy tvorby WWW stránek. 9.1 Základní požadavky ...fch.upol.cz/skripta/intz/Interw_9.pdf · Než začneme WWW stránky vytvářet, musí nám být zcela jasné, kdo je

11

9.4 Základní protokoly a standardy používané při tvorbě a provozu WWW stránek

World Wide Web neboli WWW je množina internetových protokolů a softwaru a slouží kprezentaci informací ve formátu hypertextu. Prvním grafickým webovým prohlížečem bylMosaic, který byl vytvořen v národním superpočitačovém centru (National Center forSupercomputing Applications, NCSA). K oblibě Webu přispěl velkou měrou právě on.Vlastní technologii Webu vytvořil v roce 1989 Timothy Bemers-Lee, který působil vEvropském centru pro jaderný výzkum CERN. Dnešní vývoj standardů souvisejících sWebem řídi konzorcium World Wide Web Consortium (W3C).Hypertext slouží k vytváření dokumentů, které se prostřednictvím takzvaných linku (odkazů)odkazují na jiné dokumenty. Takovéto propojení dokumentuje velice snadno pochopitelné ipro úplné nováčky. Web byl na Internetu jedním z prvních protokolů, které umožňují rychlé aefektivní procházení velkého množství nesekvenčně uložených informací pomocí hypertextu.Uživatel si tedy nemusí pamatovat žádné záhadné příkazové řádky protokolu FTP (FileTransfer Protocol); k prohlížení souboru skutečně stačí klepnout myší na názorný odkaz vzobrazené stránce. Člověk může tedy na Internetu snadno získat libovolné informace anepotřebuje k tomu odborné vzdělání v informatice.Pro sestavování dat a vlastní přenos využívá Web existující protokoly, a sice MIME(Multipurpose Internet Mail Extensions) a TCP/IP (Transmission Control Protocol/IntemetProtocol). Pod Web se do jednotného prostředí integrují také služby dalších stávajícíchprotokolů, jako je například FTP a Telnet. Speciálně pro Web pak byly vyvinuty adresy URL(Uniform Resource Locator), protokol HTTP (Hypertext Transfer Protocol), jazyk HTML(Hypertext Markup Language) a rozhraní CGI (Common Gateway Interface).

Adresa URLZkratka URL neboli Uniform Resource Locator („jednotný lokátor zdrojů") představujeadresu síťového zdroje neboli prostředku. Adresa URL se jistým způsobem podobá jménusouboru, obsahuje však také jméno serveru a informace o typu síťového protokolu, jenž danýprostředek využívá. V některých případech obsahují adresy URL také uživatelské jméno adalší speciální argumenty a volby konkrétního protokolu.Na webových stránkách slouží adresy URL k propojení s ostatními stránkami. Mezi adresamiURL najdeme celou řadu dalších běžných síťových příkazů, ukazatele na soubory načítanéprotokolem FTP, odkazy na diskusní skupiny Usenet (to je celosvětová síť unixovýchsystémů, která definuje různé specializované zájmové diskusní skupiny a používá se jakobulletin board), zprávy news, dotazy Finger a Gopher a řadu dalších.Všechny tyto informace existovaly na Internetu i před vynálezem adres URL; s adresamiURL se však mnohem snáze vkládají do dokumentů, odkud je mohou využívat jiné programy,a zejména důležité informace se dostávají do prostředí propojeného hyperlinky. V době, kdyadresy URL neexistovaly, bylo skutečně značně nepohodlné zapisovat všechny informace oserveru, souborech, protokolu atd. spolu s argumenty příkazu; zejména pro uživatele, kteříbyli v Internetu nováčky, to bylo opravdovým utrpením. Díky adresám URL se dnes naInternetu mohou používat příkazy na bázi hypertextu, s nimiž se pracuje velice snadno.Adresu URL můžeme rozdělit na následující dvě části:

<schéma>:<jméno podle daného schématu>

kde <schéma> je jméno použitého protokolu nebo schématu „http", „ftp" atd.), zatímcoformát druhé části, <jméno podle daného schématu>, je různý a závisí na konkrétnímschématu.

Velká část schémat pro adresy URL definuje takovýto formát:

Page 12: 9. Základy tvorby WWW stránek. 9.1 Základní požadavky ...fch.upol.cz/skripta/intz/Interw_9.pdf · Než začneme WWW stránky vytvářet, musí nám být zcela jasné, kdo je

12

<protokol>://<uživatel>:<heslo>@<hostitel>:<port>/<cesta>

kde <uživatel> je uživatelské jméno, pokud je v daném případě nezbytné (například u přenosusouborů protokolem FTP s neanonymním přihlášením), <heslo> je heslo tohoto uživatele(uživatelského jména), <hostitel> je doménové jméno síťového hostitele, například„fantomas.com", nebo adresa protokolu Internet Protocol (IP adresa) v číselné notaci tvarux.x.x.x, <port> představuje číslo portu IP, k němuž se uživatel hodlá připojit (pokud toto číslonení zadáno, předpokládá se implicitní hodnota definovaná protokolem) a <cesta> označujedata spojená s adresou URL, nejčastěji ve formě podadresář/jméno souboru.Celá adresa URL jedné webové stránky pak může vypadat třeba takto:

http://www.fantomas.com/info/ mafie.html

Z textu „http" zde vyplývá, že daná adresa URL používá protokol HTTP. Další část adresyURL je „www.fantomas.com“; ta označuje jméno serveru, k němuž se uživatel hodlá připojit.Poslední část je „/info/mafie.html", což je podadresář a jméno souboru s dokumentem HTML,který již tvoří hledanou webovou stránku.

Nejběžnější schémata adres URL:

Schéma Popis

http Protokol HTTP (Hypertext Transfer Protocol)

https Protokol HTTP s šifrováním v zabezpečené vrstvě SSL (SecureSockets Layer)

mailto E-mailová adresa

FTP Protokol FTP (File Transfer Protocol)

finger Protokol Finger

gopher Protokol Gopher

wais Systém WAIS (Wide Area Information Server)

news Zprávy Usenet news

nntp Zprávy Usenet přenášené protokolem NNTP (Network News TransferProtocol)

snews Zprávy Usenet přes protokol NNTP šifrovaný vrstvou SSL

file Jméno souboru definované hostitelem

jdbc Databázový objekt Java Database Connector

IRC Relace protokolu IRC (Internet Relay Chat)

telnet Interaktivní relace Telnet

tn3270 Interaktivní relace terminálu IBM 3270

afs Globální jména souborů podle systému AFS (Andrew Filé Systém)

nfs Jména souborů podle systému NFS (Network Filé Systém)

cid Identifikátor obsahu Content-ID (zprávy orientované na Content-ID)

mid Identifikátor zprávy Message-ID (zprávy orientované na Message-ID)

Page 13: 9. Základy tvorby WWW stránek. 9.1 Základní požadavky ...fch.upol.cz/skripta/intz/Interw_9.pdf · Než začneme WWW stránky vytvářet, musí nám být zcela jasné, kdo je

13

Adresy URL se však dají zapisovat také ve zkrácené podobě - například„http://www.fantomas.com“. Takováto adresa ukazuje na „domovskou stránku“ příslušnéhoserveru. Pro podadresáře, ke kterým uživatel nezadá žádné konkrétní jméno souboru, definujíservery implicitní jméno souboru (často je to například „default.html“ nebo „index.html“.Uprotokolu FTP platí podobná syntaxe. Webové prohlížeče k adresám URL bez explicitnězadaného prefixu automaticky doplňují prefix http://, takže výše uvedenou adresu lzejednoduše zadat „www.fantomas.com“.Informace o protokolu se zpravidla uvádějí přímo v doménovém jménu hostitele. Server FTPurčité společnosti se tak například může jmenovat ftp.fantomas.com, zatímco server HTTPstejné společnosti se bude jmenovat nejspíše www.fantomas.com. S adresami URL se všakoba servery mohou shodně jmenovat pouze fantomas.com. Odpovídající informace okonkrétním protokolu, přes který uživatel přistupuje ke zdrojům na tomto serveru uloženým,se pak zapíší na začátek adresy URL, například ftp://fantomas.com/tajné/akce.txt nebohttp://fantomas.com/.Přesná syntaxe adresy URL je závislá na konkrétním schématu URL. V protokolu HTTP setak například znakem „#“ za jménem souboru HTML označuje kotva neboli přesné místo vdokumentu. Adresa URL „http://www.fantomas.com/foo/hoho.html#varování“ představujetedy odkaz na sekci „varování“ dokumentu hoho.html.Adresa URL nemusí obsahovat pouze jméno podadresáře a souboru; může vyjadřovat takédalší informace o požadovaném zdroji. Adresa URL protokolu NNTP má například takovýtotvar:

nntp://<hostitel>:<port>/<diskusní skupina>/<článek>

kde <diskusní skupina> je jméno otevírané diskusní skupiny a <článek> označuje konkrétnípožadovaný článek.Obecně smí adresy URL obsahovat pouze alfanumerické znaky, protože většina speciálníchznaků je vyhrazena nebo není bezpečná pro přímý zápis. Vyhrazenými znaky jsou „;“, „/“,„?“, „:“, „@“, „=“, „&“. Nebezpečné znaky jsou pak „>“, „<“, „"“, „#“, „%“, „{„, „}“, „|“,„\“. „A“, „~“, „[“, „]“, „’“.Jestliže jméno zdroje obsahuje znak, který je vyhrazený nebo který se nenachází v základníznakové sadě US-ASCII, musí se jméno pro adresu URL kódovat. Při kódování adresy URLse každý takovýto znak nahradí třemi novými znaky, a sice symbolem procenta (%) a dvěmahexadecimálními číslicemi, které reprezentují hodnotu příslušného znaku.

Protokol HTTPProtokol HTTP představuje mezi webovými protokoly nejdůležitější metodu přenosu dat meziserverem a klientem. Je to poměrně jednoduchá metoda. Před vznikem protokolu HTTP bylnejdůležitějším vstupně výstupním protokolem pro přenos souborů protokol FTP.HTTP je malý rychlý protokol vstupně výstupního charakteru, který rozumí adresám URL aje určen pro hypertextová a hypermediální prostředí. Na rozdíl od protokolu FTP je anonymní(bezstavový) a má jen několik příkazů neboli metod. Protokol HTTP využívá standarduMIME a díky němu se dá rozšiřovat o formáty různých médií a pro různé účely.HTTP je protokol typu klient/server a pracuje v modelu požadavek/odpověď. Klient HTTPnebo uživatelský agent (často je jim webový prohlížeč) zadá adresu URL, připojí se k serveruHTTP a vyžádá si určitý zdroj, jako například dokument HTML.V celém modelu požadavků a odpovědi se vyžádaná data obaluji podle standardu MIME.Datový přenos mezi klientem a serverem připomíná svým charakterem e-mailovoukomunikaci. Skládá se z dat (které zde tvoři tělo zprávy) a metadat (těmi jsou hlavičky zpráv).Protokol HTTP přenáší data ve formátu MIME a metadata obsahují informace, které jsounutné pro vlastní přenos dat mezi serverem a klientem HTTP. Protokol HTTP však implicitně

Page 14: 9. Základy tvorby WWW stránek. 9.1 Základní požadavky ...fch.upol.cz/skripta/intz/Interw_9.pdf · Než začneme WWW stránky vytvářet, musí nám být zcela jasné, kdo je

14

předpokládá binární spojení, s nimiž standard MIME (ve své podobě s omezením 7bitovýche-mailových brán) pracovat nedokáže.V komunikaci protokolem HTTP vystupují obvykle klienti HTTP (ty představují webovéprohlížeče) a servery HTTP (čili webové servery). Mezi nimi se mohou nacházet proxyservery nebo brány, které se vůči koncovému klientovi chovají jako server a vůči jinémuserveru jako klient. Cílem této operace brány je pochopitelně zpracování původníhopožadavku klienta (bránou může být například firewall mezi Internetem a podnikovýmintranetem).Komunikace mezi klienty a servery HTTP probíhá obvykle protokolem TCP/IP, a to na portu80, který je v protokolu TCP přiřazen implicitně právě protokolu HTTP. V adrese URL jevšak možné zadat i jiný port. Protokol HTTP navíc není nikterak závislý na projektu TCP/IP adokáže pracovat i s jinými spolehlivými protokoly.Webový prohlížeč často zobrazuje stránku, která se skládá z několika dílčích objektů.Příkladem může být hlavní dokument HTML a vložené obrázky (jako jsou soubory typu GIF,JPEG, PNG a další). Většina klientů protokolu HTTP načte prvotní dokument HTML vjednom vláknu provádění (s jedním spojením na server) a pro načtení zbývajících potřebnýchsouborů spustí několik různých vláken (přičemž každé z nich si vytvoří svoje vlastní spojeníse serverem). Spojení iniciuje klient při odeslání požadavku a ukončuje je server spolu sezaslanou odpovědí.Požadavky na zprávy HTTP odesílá normálně klient HTTP a odpovídá na ně server HTTP.Zprávy požadavků mají část Request-Line, která obsahuje vlastní požadavek, podobně zprávys odpovědí mají část Status-Line, která definuje odpověď a tělo zprávy (neboli entitu) svlastními daty.

Příkazy protokolu httpVe srovnání s jinými I/O protokoly má protokol HTTP jen několik málo příkazů, kterým setaké říká metody. Jen tři z nich - konkrétně GET, HEAD a POST - musí povinně obsahovatkaždá implementace protokolu. Protokol definuje kromě těchto základních ještě čtyři dalšímetody - PUT, DELETE, LINK a UNLINK - ty se však již tak často neimplementuji.

Příkaz GETPříkaz GET načte zdroj ze serveru a odešle jej klientovi. Syntaxe příkazu vypadá takto:

GET<URL>HTTP/1.0S pomocí hlavičky If-Modified-Since je dále možné implementovat „podmíněný příkazGET", kdy se určený síťový zdroj načte, jen pokud byl v době od zadaného datamodifikován.

Příkaz HEADPříkaz HEAD se do značné míry podobá příkazu GET, nevrací ale soubor zadanýadresou URL, nýbrž pouze metainformace o této adrese. Odpověď tedy neobsahuježádné tělo. Klient použije příkaz HEAD místo příkazu GET například při testovánídostupnosti nebo změn adresy URL.

Příkaz POSTZatímco příkazy GET a HEAD slouží k načtení informací ze serveru, příkazem POST sedata posílají opačným směrem - z klienta na server. Většina webových dokumentů jeurčena pouze pro čtení a uživatelé s webovým prohlížečem žádné nové soubory naserver nezasílají. Uživatel ale může vyplnit určitý formulář (například objednávku podle

Page 15: 9. Základy tvorby WWW stránek. 9.1 Základní požadavky ...fch.upol.cz/skripta/intz/Interw_9.pdf · Než začneme WWW stránky vytvářet, musí nám být zcela jasné, kdo je

15

katalogu); informace zapsané do takovéhoto formuláře HTML odesílá klient HTTP naserver HTTP právě příkazem POST.

Příkaz PUTPříkaz PUT je méně obvyklý než příkaz POST (a nebývá tak běžně podporován). Sloužík odesíláni dat z klienta HTTP na server HTTP.

Příkaz DELETEPříkazem DELETE žádá klient HTTP svůj server HTTP o odstranění zadaného URL. Sohledem na anonymitu klientů HTTP a vzhledem k obecné povaze Webu, který je určenspíše pro čtení, není příliš běžně podporován.

Příkaz LINK

Příkaz LINK slouží k propojení určité adresy URL s jinými zdroji. Není příliš běžněpodporován.

Příkaz UNLINKPříkaz UNLINK odpojuje danou adresu URL od jiných zdrojů. Není příliš běžněpodporován.

Protokol HTTP definuje určitou množinu stavových kódů, kterým musí klienti i servery připřenosu zpráv porozumět. Každý stavový kód protokolu HTTP se skládá z číselné hodnoty atextového řetězce, který může obsahovat doplňující metainformace. Tyto stavové kódydefinuje přitom samotná specifikace protokolu HTTP; další stavové kódy může definovatkonkrétní aplikace.Zprávy protokolu HTTP obsahují různá pole hlavičky, která se mohou používat vpožadavcích a odpovědích. Některá z nich jsou určena výhradně klientským požadavkům,jiné odpovědím ze serveru. Některé pak určití klienti nebo určité servery nepodporují. Popistěchto polí přesahuje rámec této příručky.

Aktuální verzí protokolu HTTP je verze 1.1. Tuto verzi podporuji všichni nejdůležitějšíklienti (webové prohlížeče) a webové servery. Protokol HTTP l. l popisuje podrobnějidokument RFC 2068. Rozdíly HTTP verze 1.1 oproti verzi 1.0 sledují zejména lepší rychlostzpracování. (Podrobné informace o zvýšení výkonu a o případových studiích najdete naadrese http://www.w3.org/Protocols/HTTP/Performance.) Mezi tyto změny patří:

• Trvalá spojení. Při provozu protokolu HTTP l. l se vytváří méně spojení protokoluTCP než u verze HTTP 1.0. Protokol HTTP 1.0 totiž vždy vytvoří a zruší samostatnéspojení TCP zvlášť pro každý požadavek aplikace HTML. Spojení TCP, která sevytvářejí v protokolu HTTP 1.1, trvají oproti tomu i přes několik požadavků. Takto semůže několik požadavků přenášet po jediném segmentu TCP. Trvalá spojení vedoutaké k lepšímu výkonu než rozšířeni HTTP od Netscape, kterému se říká „Keep Alive"(ponechat naživu), protože zejména při komunikaci s proxy servery pracujiefektivněji.

• Protokol HTTP 1.1 podporuje komprimaci a dekomprimaci dat, takže soubory se dajímezi klientem a serverem přenášet v komprimované podobě. Tím se výrazně snižujezátěž sítě.

• Virtuální hostitelé. U protokolu HTTP 1.1 může mít jediný webový server (s jedinouIP adresou) více různých doménových jmen. K- této situaci dochází v poslední době

Page 16: 9. Základy tvorby WWW stránek. 9.1 Základní požadavky ...fch.upol.cz/skripta/intz/Interw_9.pdf · Než začneme WWW stránky vytvářet, musí nám být zcela jasné, kdo je

16

velice často, protože poskytovatelé služeb Internetu (ISP) vytvářejí na svých serverechvíce domén.

• HTTP 1.1 podporuje více různých jazyků.• Protokol HTTP umožňuje přenos intervalu bajtů, při němž se přenáší jen vybraný úsek

souboru nebo dokumentu. Tato vlastnost má smysl zejména při přerušeném spojeníTCP; takto nemusíme znovu přenášet celý dokument od začátku. Přenos stačíopakovat jen od posledního známého kontrolního bodu.

Standard HTML jazykaJazyk HTML (Hypertext Markup Language, hypertextový značkovací jazyk) představujejednoduchý datový formát a jednoduchý značkovací jazyk pro hypertext na WWW. SouboryHTML bývají často statické dokumenty; prostřednictvím brán (např. rozhraní CGI) můžejazyk HTML reprezentovat i dynamická data, jako jsou informace z databází. Jazyk HTML je zjednodušenou verzí obecného jazyka SGML (Standard Generalized MarkupLanguage), který je formálním systémem pro definici dokumentů. Značkování jazyka HTMLje velice jednoduché, přesto je ale pro reprezentaci těch nejběžnějších typů dokumentůnaprosto dostatečné. Jako typ média Internet Media Type a typ obsahu MIME Content Typese jazyk HTML označuje symbolem „text/html“. Dokumenty založené na jazyku HTML sepropojují hyperlinky (reprezentovány adresami URL) a odesílají se protokolem HTTP.Stejně jako celý Internet se i HTML vyvíjí velice rychle a má v každém roce několikdoplnění. HTML řídí konsorcium W3 (www.w3-org). Na jeho webové stránce lze vždy naléztúdaje o tom, která verze je v současné době v platnosti. Internet se ale vyvíjí živelně aobdobně je tomu i s HTML. Má to své výhody i nevýhody - vývoj je rychlejší, než kdyby bylsešněrován přísnými pravidly a termíny, a na druhé straně si nikdy nemůžete být jisti tím, coje vlastně uznávaným standardem. Řada počítačových firem (zejména Microsoft a Netscape)přidává své vlastní dodatky a rozšíření k HTML a usiluje o jejich standardizaci; existují tedy iverze HTML, které ještě nejsou oficiálně posvěcené organizací W3C. Řada takovýchtorozšíření existuje ve formě tzv. draftu čili návrhu. Návrh je dán veřejně k dispozici a a po jehootestování je výsledně organizací W3C v původní podobě či s opravami zafixován.Historie standardizace HTML má vezní ve verzi 3.0, která byla vytvořena v roce 1996 sběrema utříděním nesčíslných návrhů především samotných uživatelů webu a autorů HTML, jakož imenších vývojářských firem. Vzhledem k dominanci firem Microsoft a Netscape v oblastiprohlížečů, které tento standard víceméně ignorovaly a připravily každá svůj vlastní, vzniklaverze s označením 3.2. jako kompromis mezi oběma přístupy. Do léta roku 1997 tato verzevíceméně platila, ale současně se již pracovalo na nové verzi. Ta vstoupila do povědomí v létě1997 jako návrh (draft) standardu HTML 4.0 a na rozdíl od předchozích verzí se na něm velcívývojáři spolu s konsorciem W3 sjednotili. V prosinci roku 1997 pak byla tato verzeschválena a v současné době již všeobecně platí. Konzorcium W3C zpřístupnilo dálevalidační službu jazyka HTML. Pomocí této služby můžeme ověřit, jestli daný obsah v jazyceHTML odpovídá standardu HTML 4.0. Podrobnosti jsou na adrese http://validator.w3.org.

Speciální znakyJazyk HTML definuje některé znaky jako vyhrazené. V textu nebo v adrese URL se protomusí namísto těchto znaků zapisovat odpovídající textový řetězec nebo číselný řetězec, kterýuvádí následující tabulka.

Page 17: 9. Základy tvorby WWW stránek. 9.1 Základní požadavky ...fch.upol.cz/skripta/intz/Interw_9.pdf · Než začneme WWW stránky vytvářet, musí nám být zcela jasné, kdo je

17

Speciální znaky kódu HTML

Znak Textovýřetězec

Číselnýřetězec

Popis

HT není &#9; TabulátorLF není &#10; Posun vozíku (přechod na nový řádek)CR není &#13; Návrat vozíku (konec řádku)SP není &#32; MezeraNBSP &nbsp; &#160; Nezlomitelná (pevná) mezera" &quot; &#34; Uvozovky& &amp; &#38; Ampersand< &lt; &#60; Symbol menší než> &gt; &#62; Symbol větší než® &reg; &#174; Symbol registrované ochranné známky© &copy; &#169; Symbol autorských práv (copyright)<libovolný> &#<číslo>; Libovolná číselná hodnota kódu ISO 8859-1

ZnačkyJazyk HTML popisuje dokument a vymezuje jeho části pomocí značek - tagů (tags). Značkytak vytvářejí záhlaví, odstavce, seznamy, definuji formátování a popisují hyperlinky.V definici značky se nerozlišuje velikost písmen.Většina značek jazyka HTML se zapisuje ve dvojicích (párové tagy). Každá takováto dvojicese skládá z počáteční značky a z koncové značky. Počáteční značku ohraničují symboly „<“ a„>“, koncovou ohraničují symboly „</“ a „>“. Například zobrazení textu „Ahoj“ tučnýmpísmem v jazyce HTML zapíšeme dvojicí značek:

<B>Ahoj</B>

Některé značky jsou nepárové. Příkladem může být značka <BR>, která do stránky vložíexplicitní zalomení řádku. Do dokumentů HTML můžeme zapisovat také komentáře. Začínajíznaky „<!—“ a končí znaky „-->“.

Rozvržení dokumentu HTMLDokumenty HTML mají určité formální rozvržení, jako například:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Fina"!//EN"><HTML><HEAD><TITLE><!-- titul dokumentu --></TITLE><!-- další hlavičky --></HEAD><BODY><!-- tělo dokumentu --></BODY></HTML>

Page 18: 9. Základy tvorby WWW stránek. 9.1 Základní požadavky ...fch.upol.cz/skripta/intz/Interw_9.pdf · Než začneme WWW stránky vytvářet, musí nám být zcela jasné, kdo je

18

Hlavička <!DOCTYPE> se používá ve stránkách podle definice HTML od verze 3.2. Dvojiceznaček <HTML> a </HTML> vymezuje celý dokument. Další dvojicí je značka<HEAD></HEAD>, která identifikuje metadata celého dokumentu a obsahuje značky<TITLE></TITLE> (obsahují název dokumentu). Poslední dvojicí této kategorie je<BODY></BODY>, která ohraničuje vlastn data dokumentu. Podrobnější popis značekHTML bude uveden v dalších kapitolách věnovaných tvorbě HTML dokumentů.

Rozhranní CGIRozhraní CGI (Common Gateway Interface) je na platformě nezávislé rozhraní, nad nímžpracuje software spojený se serverem HTTP. Představuje propojení mechanismem brány meziservery jiných protokolů než HTTP a daty jiných tvarů. Jedním z nejoblíbenějších foremrozhraní CGI je databázová brána, která se používá pro webovou reprezentaci dat uložených vdatabázi.Proces rozhraní CGI bývá často samostatnou aplikací; vykonává jej vždy server HTTP.Aplikaci rozhraní CGI spouští klient HTTP, a to zadáním adresy URL, která na danouaplikaci CGI ukazuje. Server HTTP zavolá určenou aplikaci CGI a její výstup vrátí klientoviHTTP. Standard CGI definuje rozhraní mezi serverem HTTP a aplikacemi CGI, tedy podobupříkazového řádku, parametrů (proměnných prostředí), vstupů a výstupů.Ve spojení s rozhraním CGI se velice často používá softwaru orientovaného na skripty,zejména pak jazyka Perl, takže aplikacím rozhraní CGI se běžně říká skripty CGI.Příkladem adresy URL, která se odkazuje na aplikaci CGI bez parametrů, může být takovýtozápis:

http://www.fantomas.com/cgi-bin/mafie.cgi

Jestliže na konec takovéto adresy zapíšeme otazník (?) a za něj hodnoty argumentů, předámetím do aplikace CGI parametry, například:

http://www.fantomas.com/cgi-bin/mafie.cgi?a=l

Hodnoty parametrů se do aplikace v jazyce C předávají prostřednictvím obvyklých argumentůargc a argv funkce main().Data se ze serveru HTTP předávají do aplikace CGI prostřednictvím proměnných prostředí(environ-ment variables). Z programu napsaného v jazyce C se k těmto proměnným prostředípřistupuje pomocí běhové funkce jazyka C getenvQ.Rozhraní CGI umožňuje klientům spouštění programů, které posléze běží na serveru. Připsaní aplikací CGI i při jejich provozu je proto nutné učinit jistá bezpečnostní opatření.Klientům HTTP tak nesmí být přístupný žádný nebezpečný software a aplikace rozhraní CGInesmí obsahovat bezpečnostní díry; všechny tyto kontroly musí zajistit administrátor serveru.

Page 19: 9. Základy tvorby WWW stránek. 9.1 Základní požadavky ...fch.upol.cz/skripta/intz/Interw_9.pdf · Než začneme WWW stránky vytvářet, musí nám být zcela jasné, kdo je

19

9.5 WYSIWYG editory pro tvorbu WWW stránek

Pracovat přímo s editory přímo v jazyce HTML není úplně vhodný postup pro začátečníky, timohou používat zdrojový kód HTML pouze k úpravě již existujících stránek, které předemvytvoří jinak. Vhodným nástrojem pro tento případ jsou WYSIWYG editory WWW stránek,které mnozí poskytovatelé připojení nabízejí přímo na svých webových serverech svýmuživatelům pro vytvoření vlastních webových prezentací. K dispozici jsou ovšem i samostatnéeditory podporující tento mód editace a to ať již freewareové (většinou s jednoduchýmrozhranním a nepříliš velkým výběrem funkcí) tak i komerční placené. Do první skupiny patřínapř. CoffeeCup HTML Express (lze jej získat na adrese http://www.coffeecup.com/), českýH-Brouczek získatelný na brouckuv.webpark.cz, rovněž plně český Devil's HTMLPad( htmlpad.zde.cz ) nebo jednoduchý Actual Drawing (www.pysoft.com ). Do druhé skupinypak mimo Macromedia Home Site (www.macromedia.com ) rovněž již zmíněný MicrosoftFrontPage, který je uceleným kompletem programů pro autory WWW stránek i správceWWW serverů.Aplikace je primárně určena především k tvorbě a údržbě mnohdy velmi složité strukturyWWW stránek i k práci s jednotlivými soubory a složkami. FrontPage obsahuje i nástroj provytváření a aktualizování kanálu, který má být součástí vašeho webu (viz PUSH technologie).Dále je tu samozřejmě možnost přímo jednotlivé stránky WWW vytvářet. WYSIWYG editorpro jejich přípravu od A až po Z je vám plně k dispozici. Svými funkcemi, možnostmi ivzhledem a organizací menu a jednotlivých nástrojů se velmi podobá textovému editoruWord. I způsob práce s jednotlivými dokumenty je dost podobný práci s dokumenty Wordu .Spolu s FrontPage verze 2000 je možné nainstalovat i Personal Web Server. Jak již názevnapovídá, jedná se o skutečný (i když poněkud zjednodušený) webový server. Jakéhosi„mladšího bratříčka" velkého Microsoft Internet Information Serveru. Instalátor FrontPage2000 nabízí i celou řadu dalších aplikací a doplňků, které pomohou při práci na webu. Jelikožje FrontPage 2000 aplikací z rodiny Office 2000, je zde kupříkladu i Office Tools obsahujícítřeba Clip Gallery, Themes nebo třeba Visual Basic Script Help. Na tomto profesionálnímeditoru si ukážeme základy použití editoru WYSIWYG pro tvorbu WWW stránek.

FrontPage 2000Po spuštění FrontPage 2000 se objeví okno programu s nabídkou ihned začít vytvářet stránkuWWW. Nejprve je však lépe vytvořit celý nový web, jehož součástí taková stránka bude.V menu File vybereme položku New a následně potom Web. FrontPage 2000 vám nabídnestejnojmenné okno s jednou jedinou záložkou Web Site. Zde můžeme zvolit hned z několikatypů různých webů od jediné stránky až po rozsáhlý firemní web.V sekci Options můžeme nastavit lokaci našeho nového webu (Specify the location of thenew web). Zde můžeme uvést buď cestu k některé složce na našem lokálním disku, neboadresu některého serveru WWW. Samozřejmě k takovému serveru musíme mít přístup(přístupové jméno a heslo) a musí zde být nainstalovány tzv. FrontPage Extensions. Bezsplnění těchto podmínek není možné na tomto serveru vytvořit nový FrontPage Web. Postisku tlačítka OK, je nový web je vytvořen a můžeme s ním začít pracovat.FrontPage 2000 umožňuje nejen nový web vytvořit, ale již vytvořený web otevřít a dále jejupravovat. Z menu File vybereme položku Open Web. Zde zvolíme složku, ve které je nášrozpracovaný web uložený. FrontPage2000 jej otevře a můžeme začít s jeho úpravou.Další možnost nabízí položka Import... z menu File. Je to prostředek, který umožní „převést"již existující strukturu nějakého webu do podoby FrontPage Webu. Tato volba je velmiužitečná kupříkladu ve chvíli, kdy chceme k další správě našeho (již vytvořeného) webupoužívat FrontPage 2000. V tom případě tedy vybereme tuto volbu. FrontPage 2000 nabídne

Page 20: 9. Základy tvorby WWW stránek. 9.1 Základní požadavky ...fch.upol.cz/skripta/intz/Interw_9.pdf · Než začneme WWW stránky vytvářet, musí nám být zcela jasné, kdo je

20

v tomto případě Import wizard. Jeho prostřednictvím lze importovat již vytvořený web nejenz lokálního disku, ale i ze vzdáleného serveru WWW.

Základní obrazovka editoru FrontPage 2000 s nabídkou vytvoření nového webu

Z menu File jsme tedy vybrali položku New a následně potom položku Web. Z nabízenýchmožností pak Personal Web. Tedy jakýsi model „soukromého, osobního" webu. Zachovalijsme pojmenování, které pro tento web FrontPage 2000 nabídl, myweb6, a ponechali jsmebeze změny i umístění do adresáře na WWW-serveru na našem lokálním disku. Jakmile všepotvrdíme, otevře se hlavní okno FrontPage 2000 a nabídne nám jeden ze šesti možnýchpohledů na právě vytvořený web.

Page 21: 9. Základy tvorby WWW stránek. 9.1 Základní požadavky ...fch.upol.cz/skripta/intz/Interw_9.pdf · Než začneme WWW stránky vytvářet, musí nám být zcela jasné, kdo je

21

Horní část tohoto okna tvoří hlavní menu aplikace. Hned pod ním nalezneme lištu, kteráumožňuje rychlý přístup k nejčastěji používaným nástrojům FrontPage 2000. Mnohemzajímavější je ovšem další část okna. Po jeho levé straně je jakési „menu", prostřednictvímněhož můžete přepínat mezi jednotlivými pohledy na strukturu našeho webu. Zbytek oknavyplňuje právě aktuální vybraný pohled.

Vlastní tvorba WWW stránky ve FrontPage 2000Již na začátku bylo řečeno, že FrontPage 2000 je editor WYSIWYG. Nemusíme tedy vůbecnic vědět o syntaxi jazyka HTML, abychom vytvořili slušné WWW stránky. Celý vzhledaplikace i práce s ní se velmi podobá textovému editoru Word 2000. Jednoduše píšeme text,který má být součástí vaší stránky WWW, vkládáte do ní tabulky, obrázky. Chceme-liněkterou větu zvýraznit, označíte ji a zvolíte klávesovou zkratku Ctrl+B, nebo stiskneteodpovídající tlačítko Bold (úplně stejně jako v textovém editoru) a FrontPage 2000 se postaráo to, aby dané slovo či věta byly zapsány tučným písmem. FrontPage 2000 automatickyvytváří, podle toho jaký prvek do stránky vložíte, jaké použijete písmo atd., odpovídající kód.V horní části okna je nabídka, která obsahuje všechny příkazy potřebné k ovládání celéaplikace. Pod tímto menu je lišta nástrojů obsahující tlačítka, prostřednictvím nichž můžetepracovat s nejčastěji používanými funkcemi programu. Najdeme zde i rolovací nabídky provýběr fontu a stylu textu. Velký prostor pak zabírá vlastní pracovní plocha editoru.Prostřednictvím tří záložek v její spodní části můžeme přepínat mezi editací stránky WWW(Normal), zobrazením kódu HTML takové stránky (HTML) a náhledem na stránku vprohlížeči (Preview). Spodní část okna aplikace tvoří stavová lišta. Kromě klasickýchinformací zde nalezneme také velmi užitečný údaj. Ten říká, jak asi dlouho bude trvat načteníprávě editované stránky, pokud je uživatel, který se na stránku dívá, připojen k Internetu28,8 Kb linkou. Ovšem pozor, tento údaj je pouze orientační a může se značně lišit, zejménapodle toho, jak rychlou má uživatel linku , v kterou denní či noční dobu se na takovou stránkuWWW bude dívat atd.Pracovat s FrontPage 2000 je opravdu snadné. Ten kdo někdy měl možnost seznámit se stextovým editorem (nejlépe Word), nebude mít téměř žádné potíže při vytváření vlastníWWW stránky. Většina věcí se zde dá provést bezprostředně jen klepnutím na správné

Page 22: 9. Základy tvorby WWW stránek. 9.1 Základní požadavky ...fch.upol.cz/skripta/intz/Interw_9.pdf · Než začneme WWW stránky vytvářet, musí nám být zcela jasné, kdo je

22

tlačítko, či nastavením několika málo položek v některém z dialogových oken. Vlastnosti celéstránky se např. nastavují z nabídky File přes položku Page Properties. FrontPage má ovšem i funkce, které v editoru Word standardně nejsou. Typickým příklademje nástroj pro vložení linky. Za nadpis je potřeba vložit vodorovnou linku. V menu Inserttedy vybereme položku Horizontal Line. FrontPage 2000 okamžitě vloží do stránky linku.Teď musíme nastavit vzhled této linky. Poklepejme na ni tedy kurzorem myši, případně jioznačíme a stiskneme klávesy Alt+Enter. Okno Horizontal Line Properties umožňuje zadatnejen délku linky (Width) v procentech (vzhledem k aktuální velikosti stránky) - Percentof Window nebo absolutně v obrazových bodech - Pixels, ale také šířku (Height), zarovnání(Alignment), barvu (Color) a způsob zobrazení linky (Solid Line).Odkazy se vytváří velmi jednoduše tak, že označíme text, který má sloužit jako odkaz astiskneme tlačítko Create Hyperlink. V následujícím dialogovém okně pak zadáme soubor,na který má daný hypertextový odkaz ukazovat či můžeme přímo zadat URL vzdálenéhoserveru, kam náš odkaz míří.Protože základní formátování toku textu v HTML souborech má jen omezené možnosti,využívá se pro jeho rozšíření tabulek. Stiskneme tlačítko Insert Table. Vybereme např. třisloupce a dva řádky a FrontPage 2000 vloží do stránky tabulku podobně jako to dělá Word.Po jednotlivých políčkách tabulky se lze pohybovat pomocí klávesy Tab. Můžeme do nichvepisovat text, vkládat obrázky atd. Samozřejmě můžeme také měnit šířku jednotlivýchsloupců a řádků tabulky. Nastavíme kurzor tak, aby byl na spojnici mezi jednotlivýmibuňkami. Teď myší jednoduše buď roztáhneme, nebo zmenšíme velikost příslušného řádku čisloupce tabulky. Při nastavení kurzoru tak, aby byl uvnitř některé buňky tabulky a výběrupoložky Table Properties z menu Table, můžeme nastavit vlastnosti globálně pro celoutabulku. Tabulka má být např. za všech okolností vycentrovaná, nastavíme tedy Alignmentna Center. Aby nebyly vidět obrysy tabulky, hodnota Border Size musí být rovna 0.Změníme i hodnoty u položek Cell Padding, zde musí být zadána 0, druhá položka CellSpacing bude mít hodnotu 8. Dialogové okno Table Properties umožňuje nastavit přesně ivelikost tabulky. Šířka tabulky (Specifi Width) je nastavena na 500. Tato hodnota může být,podobně jako u vodorovné linky (Horizontal Line), buď absolutní, v obrazových bodech (inPixels), nebo relativní v procentech (in Percent). Výšku tabulky (Height) není třebanastavovat, protože tabulka bude automaticky zvětšena nebo zmenšena podle textu a obrázků,které ji budou vyplňovat. Toto okno umožňuje nastavit i další vlastnosti tabulky, jako je barvapozadí tabulky (Background Color), případně obrázek, který toto pozadí bude tvořit (UseBackground Image), stejně tak i barvu rámečku, který tvoří obrysy tabulky (Border). Velmiužitečné je zde tlačítko Apply. Jakmile provedeme změny v nastavení vlastností tabulky, stačístisknout toto tlačítko a FrontPage 2000 nové hodnoty „aplikuje“.

Vložení obrázkuDo již vytvořené tabulky můžeme mimo text vložit i obrázek a tak jej podstatně lépezakomponovat do stránky, než to umožňují základní nástroje HTML jazyka. Nastavíme-likurzor do příslušné buňky a stiskneme tlačítko Insert Image, objeví se možnost výběruobrázků pro vložení, které nabízí přímo FrontPage, ale je samozřejmě možné vybrat i zcelajiný obrázek uložený na lokálním pevném disku či přímo naskenovat do stránky obrázekpomocí zabudovaného Twain driveru. Vložený obrázek lze dále upravovat (přes menuPicture Properties), co se týká jeho formátu uložení, průhlednosti, či můžeme přidatpopisku. Pokud bude obrázek současně hypertextovým odkazem, lze i tuto funkci nastavitpřes záložku Default Hyperlink.

Page 23: 9. Základy tvorby WWW stránek. 9.1 Základní požadavky ...fch.upol.cz/skripta/intz/Interw_9.pdf · Než začneme WWW stránky vytvářet, musí nám být zcela jasné, kdo je

23

Tvorba rámůDůležitou součástí moderního webu jsou již zmíněné rámy (rámce, frames), které výrazněpřispívají k přehlednému uspořádání většího počtu stránek v rámci jednoho webu. Pro tvorburámů má FrontPage vlastní nástroj, na který se odkazujeme přes položku Frame. Po otevřenítéto položky vybereme např. New a z následujícího okna záložku Frame Page. Pak jiždostaneme nabídku, jak by mohla naše stránka vypadat a můžeme začít s její editací. Protvorbu a vlastnosti rámu nabízí FrontPage nepřeberné možnosti včetně okamžité kontrolyvýsledku naší práce ve formě náhledu stránky včetně rámů v ní obsažených.