31.08.2014 Views

2004 / 13-14 červenec - stulik.cz

2004 / 13-14 červenec - stulik.cz

2004 / 13-14 červenec - stulik.cz

SHOW MORE
SHOW LESS

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

• Téma čísla: Technologie webových stránek<br />

Čitelný a přesto mocný<br />

Nejdůležitější myšlenkou u vzniku značkovacích<br />

jazyků (ML – Markup Language) byla<br />

čitelnost. I text, který je složitě označkován,<br />

musí být čitelný a upravitelný v libovolném<br />

textovém editoru. Protikladem jsou třeba<br />

binární formáty MS Office.<br />

Základem ML (a tedy i HTML) je i to, že<br />

značkování neslouží k popisu vzhledu, ale jen<br />

struktury. Už od první verze ale jazyk HTML<br />

obsahoval i několik značek pro vizuální formátování<br />

(např. pro tučné písmo). Tato<br />

nejednotnost vedla ke stavu, kdy dnes stránky<br />

jejich tvůrci formátují pomocí tabulek,<br />

barev, fontů atd. Pro vytvoření jednoduché<br />

stránky se tento postup sice hodí, ale z hle-<br />

Vpozadí všech webových stránek diska větších projektů je cestou do<br />

stojí slovo hypertext. Vzniklo horoucích pekel.<br />

dokonce ještě dřív, než idea<br />

I zde se však našlo řešení. První<br />

World Wide Webu (www). Už kroky omezující možnosti HTML<br />

v šedesátých letech minulého přišly v roce 1996, kdy byla definována<br />

století začali vědci pracovat na způsobu<br />

„řetězení“ textových informací. Problém<br />

tzv. nelineárního spojování dokumentů<br />

(tedy dokumentů, které mohou libovolně<br />

odkazovat na ostatní dokumenty) zpracoval<br />

Theodor Nelson, který také poprvé použil<br />

slovo hypertext.<br />

Mezitím se pracovalo rovněž na popisu<br />

samotného textu, přesněji řečeno jeho<br />

struktury. V roce 1986 vznikl jazyk SGML<br />

(Standard Generalized Markup Language),<br />

který se dokonce stal normou pro popis<br />

dokumentů.<br />

verze 3.2 (dodnes hojně<br />

využívaná). Zároveň vznikly CSS<br />

(Cascading Style Sheets) verze<br />

1.0 (o CSS si můžete přečíst více<br />

například na straně 90). Právě<br />

CSS slouží k popisu vizuálních<br />

vlastností, zatímco HTML se má<br />

věnovat pouze popisu struktury.<br />

Poslední verze HTML 4.01 jde<br />

v tomto směru ještě dál.<br />

Posledním krokem k „vyčištění“<br />

webu je specifikace XHTML 1.0<br />

(eXtensible), která je na tvůrce World Wide Web znamená v překladu celosvětová pavučina<br />

Pronikněte webu<br />

pod kůži<br />

Pavel Nygrýn<br />

Z čeho se skládají webové stránky<br />

Většina uživatelů počítačů zná webové stránky jen ze zobrazení v prohlížeči.<br />

Pokud se ale chcete pustit do tvorby vlastního webu, je nutné vědět, jak vypadají<br />

stránky z druhé strany.<br />

Téma čísla<br />

Grafika pro web 21<br />

Web a normy 22<br />

Jednoduchá stránka 23<br />

Dynamický web 25<br />

Sláva zkratky www začala v mezinárodních<br />

laboratořích CERN ve Švýcarsku. Zde se<br />

objevila skutečná potřeba sdílení dokumentů<br />

a jejich provázanosti. Tim Berners-Lee spojil<br />

značkovací jazyk a ideu hypertextu a v letech<br />

1989–1991 se mu podařilo vytvořit první<br />

verzi jazyka HTML (Hypertext Markup Language),<br />

vyvinout potřebné servery a vytvořit<br />

také prohlížeč (pouze v textovém režimu).<br />

Dalšími významnými milníky byl příchod<br />

grafického prohlížeče Mosaic v roce 1993<br />

a poté příchod firmy Netscape. Do HTML<br />

přibyla možnost vkládat obrázky, vytvářet<br />

tabulky a tím vznikly webové stránky vypadající<br />

v podstatě tak, jak je známe dnes.<br />

mnohem přísnější. Není v ní možné zapomínat<br />

na ukončování značek, ty jsou vždy<br />

párové a nesmí se křížit, parametry musí být<br />

v uvozovkách. Stále ale jde o čistý text.<br />

Základní stavební kameny<br />

Webová stránka, tedy HTML dokument, je<br />

tvořena hlavičkou, ve které jsou uvedeny<br />

obecné informace (jako např. název stránky)<br />

a vlastním tělem dokumentu. To může být<br />

v nejjednodušším případě tvořeno holým<br />

neformátovaným textem. Ano, i takto jednoduchá<br />

může být webová stránka.<br />

Obvykle se ale text nějak člení, už od<br />

verze 1.0 jsou podporovány víceúrovňové<br />

nadpisy. Nejvýznamnější nadpis tedy bude<br />

v textu vypadat takto: Významný<br />

den. Text v odstavci uzavřete mezi <br />

a a základní formátování je hotovo.<br />

HTML je ale jazykem, který ignoruje tzv.<br />

bílá místa – zejména mezery a konce řádků.<br />

Je tedy zbytečné snažit se vzhled textu upravit<br />

těmito prvky, naopak si můžete pomocí<br />

řádkování upravit zdrojový text tak, aby se<br />

vám dobře upravoval. Pokud chcete vytvořit<br />

nový řádek i jinde, než na konci odstavce,<br />

potřebujete značku .<br />

Kdekoli v textu může být umístěn<br />

onen slavný hypertextový odkaz. V nejjednodušším<br />

případě vypadá třeba takto:<br />

web<br />

Computeru. Značka a má tedy parametr<br />

href, který ukazuje, kam bude návštěvník po<br />

klepnutí na web Computeru přesměrován.<br />

Nezávislé obrázky<br />

Protože je dokument tvořen jen textem, není<br />

možné přímo do něj vložit obrázky. Ty se<br />

připojují značkou .<br />

Obrázek je tedy umístěn pomocí odkazu<br />

na soubor. Má to několik výhod. Stránka se<br />

zobrazuje velmi rychle, protože je možné<br />

nejprve načíst text a teprve poté stahovat<br />

podstatně větší obrázek. Stejný obrázek<br />

může být použit na několika místech na<br />

stránce nebo na několika stránkách a prohlížeč<br />

ho musí stáhnout jen jednou.<br />

Tímto způsobem je také možné připojit<br />

obrázek z libovolného místa na<br />

internetu. Zkuste třeba .<br />

Značka img může obsahovat i parametry<br />

určující velikost obrázku nebo popisek, který<br />

se zobrazí v textovém prohlížeči.<br />

Podobným způsobem, tedy odkazem na<br />

soubor, lze do stránek vkládat další objekty –<br />

k tomu slouží značka object, jíž můžete do<br />

stránek vložit prakticky vše, od jednoduchého<br />

obrázku, přes video až po složitý skript.<br />

Aktivní weby<br />

Se samotným HTML ovšem vystačíte pouze<br />

v případě, že vaše stránky nejsou aktivní,<br />

jsou jen statickým textem. Aktivitu jim ale<br />

můžete jednoduše přidat pomocí skriptování<br />

na straně klienta (tedy prohlížeče). Pomocí<br />

Javascriptu či VBScriptu je možné vytvořit<br />

různé webové kalkulačky, efektní nabídky<br />

a podobné vylomeniny.<br />

Skripty na straně klienta ale nemohou<br />

komunikovat s okolím a tedy ani s ostatními<br />

soubory. Pro tvorbu dynamických stránek<br />

• Vytvořit osobní webové stránky<br />

není nic složitého<br />

proto potřebujete skriptování na straně<br />

serveru. Teprve s ním získáte možnost tvořit<br />

nejen webové stránky, ale spíše webové<br />

aplikace. Skripty ve spolupráci s databází<br />

dokáží vytvořit diskusní fórum, webový<br />

obchod a v případě, že komunikují i s dalšími<br />

programy, můžete vyrobit třeba web zobrazující<br />

polohu vašeho auta se zabudovaným<br />

systémem GPS.<br />

Zatímco tvorba webové stránky je jednoduchá<br />

a pomocí několika příkladů ji zvládne<br />

každý, tvorba skriptů už vyžaduje programátorské<br />

znalosti. Na druhou stranu může<br />

být Javascript dobrým místem pro vstup do<br />

programování. Nepotřebujete žádný speciální<br />

editor ani překladač, vstup i výstup je<br />

jednoduchý a vaše programy vám zcela jistě<br />

nenabourají celý systém. Chcete-li se o programování<br />

pro web dozvědět více, přečtěte si<br />

článek na straně 25.<br />

p11633q<br />

20 • Computer <strong>13</strong>-<strong>14</strong>/04<br />

• Příští test bude v sekci Uživatel: Které herní zařízení je nejšikovnější?

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!