COMPUTERWORLD
Specializovaný týdeník o výpočetní technice
o Internetu
(CW 11/96)

Quo vadis HTML?

Jiří Kosek ml.

V poslední době se všude hodně mluví o Internetu. Pokud se však na Internet zeptáte člověka příliš nepostiženého počítači, představí si pod tímto pojmem s největší pravděpodobností pouze službu WWW (World Wide Web). Zejména díky své popularitě se nyní WWW velmi rychle vyvíjí -- snaží se tak uspokojit stále nové požadavky uživatelů. Prvkem, který asi nejvíce ovlivňuje možnosti celé služby WWW, je jazyk HTML (Hypertext Markup Language) používaný pro tvorbu WWW-stránek. V článku se proto zaměříme na historii i poslední trendy ve vývoji HTML. Základní informace o WWW a HTML může vážený čtenář nalézt například v těchto článcích: Internetovská brašna s nářadím (CW 40/95), HTML zatím není kosmická technika (CW 26/95).

Místo úvodu trocha historie

Aby naše povídání nebylo vytrženo z kontextu, podívejme se nejprve na historii vývoje HTML. První definici jazyka HTML vytvořil v roce 1991 Tim Berners-Lee jako součást projektu WWW, který měl umožnit vědcům zabývajícím se fyzikou vysokých energií, komunikaci a sdílení výsledků výzkumů po celém světě. Ne náhodou proto celý projekt vznikal v CERNu (Centre Européenne de Rechere Nucléaire, Evropské centrum jaderného výzkumu), který leží na švýcarsko-francouzských hranicích nedaleko Ženevy. Verze HTML z tohoto období je známá pod označením HTML 0.9. Umožňovala text rozčlenit do několika logických úrovní, použít několik druhů zvýraznění textu, zařadit do textu odkazy a obrázky.

Berners-Lee při návrhu HTML nepředpokládal, že by autoři WWW-stránek museli tento jazyk znát. První verze WWW-softwaru byla napsána pro operační systém NextStep a obsahovala jak prohlížeč, tak i integrovaný editor WWW-stránek. Když však Marc Anderssen se svými kolegy z NCSA (National Center for Supercomputing Applications) psali známý prohlížeč Mosaic, považovali za příliš obtížné implementovat do programu rovnou i editor HTML. Patrně díky tomuto rozhodnutí a tomu, že ne každý provozuje na svém počítači NextStep, je dnes jazyk HTML tak známý. Požadavky uživatelů na WWW vzrůstaly a tak producenti různých prohlížečů obohacovali HTML o některé nové prvky. Aby byla zachována kompatibilita mezi jednotlivými modifikacemi HTML, vytvořil Berners-Lee pod hlavičkou IETF (Internet Engineering Task Force) návrh standardu HTML 2.0, který zahrnoval všechny v té době běžně používané prvky HTML. Verze HTML 2.0 má zároveň dvě úrovně. První z nich (Level 1) pouze málo rozšiřuje předchozí verzi HTML. Level 2 navíc definuje práci s formuláři. HTML 2.0 již plně vyhovuje normě SGML (ISO 8879 z roku 1986).

Další rozšíření jazyka známá jako HTML+ zahrnují zejména rozšíření HTML o vytváření tabulek a matematických vzorců. Rovněž se zde objevují prvky, které umožňují precizněji kontrolovat výsledný vzhled textu -- lepší obtékání obrázků textem, styly dokumentů. Dave Raggett z laboratoří Hawlett-Packard formalizoval HTML+ a vytvořil jeho deklaraci DTD (Document Type Declaration) v jazyku SGML (Standard Generalized Markup Language) -- na jaře roku 1995 tak vznikl návrh standardu HTML 3.0. Některé jeho prvky, jako např. tabulky, jsou již podporovány novějšími verzemi prohlížečů Mosaic a NetScape. Kompletní podporu pro všechny rysy HTML 3.0 zatím nabízí pouze prohlížeč Arena. Ten je bohužel k dispozici pouze pro operační systémy typu Unix.

CGI-skripty

Služba WWW patří k jedné z nejnovějších. Kromě toho, že v podobě hypertextových odkazů přinesla do světa Internetu nový rozměr, umožnila svojí koncepcí zastřešení mnoha dalších služeb v jednom klientském programu (WWW-prohlížeči). Většina WWW-prohlížečů umožňuje pracovat i jako klient Gopheru, síťových news a FTP. To je umožněno tím, že v prohlížeči jsou kromě HTTP (Hypertext Transfer Protocol) implementovány i další aplikační protokoly (např. NNTP -- Net News Transfer Protocol, FTP -- File Transfer Protocol).

Pokud bychom však chtěli do celosvětové sítě WWW zapojit i jiné služby (např. vlastní databáze, objednávkovou službu apod.), standardní aplikační protokoly Internetu nám mnoho nepomohou. Vznikl proto standard CGI (Common Gateway Interface), který umožňuje službu WWW rozšířit až tam, kam sahá naše fantazie a programátorské dovednosti. Abychom si mohli vysvětlit princip CGI, popíšeme si nejprve způsob, jakým se z WWW-serverů na obrazovku počítače dostávají běžné HTML-dokumenty. Pokud vzneseme požadavek (buď jeho přímým zadáním, nebo aktivováním odkazu) na určitý dokument, např. http://do.ma.in/direc/tory/file.html, prohlížeč pomocí protokolu HTTP naváže spojení se serverem s doménovou adresou do.ma.in a požádá ho o soubor file.html umístěný v adresáři direc/tory. Server před tento soubor doplní řádku:

Content-type: text/html

následovanou prázdnou řádkou a vše odešle zpět pomocí protokolu HTTP prohlížeči, který se postará o správné zobrazení hypertextového dokumentu.

Pokud by však soubor file.html byl spustitelný (to určují atributy souboru v rámci operačního systému), hovoříme o tzv. CGI-skriptu. Výše popsaný proces se pak změní v tom, že prohlížeči nebude zasílán samotný obsah souboru, ale to, co program s daným jménem vyšle na standardní výstup.

CGI-skripty tudíž mohou být psány v libovolném jazyce, který umožňuje pracovat se standardním výstupem. Vzhledem k tomu, že většina WWW-serverů pracuje pod OS UNIX, jsou CGI-skripty nejčastěji psány v jazycích C nebo Perl nebo v příkazovém shellu.

Tímto způsobem lze vytvářet CGI-skripty, jejichž výsledky nelze uživatelem ovlivnit. Používají se zejména pro generování statistik přístupu k serveru a jednotlivým dokumentům apod. -- jedná se tedy o informace, které se v čase mění, ale jejichž struktura a obsah nezávisí na požadavcích uživatele.

O možnosti vytváření CGI-skriptů, které lze uživatelsky ovlivňovat, si povíme v bezprostředně následující části článku.

Formuláře

Formuláře jsou součástí HTML od verze 2.0. Umožňují na WWW-stránce definovat formulář, který uživatel může po vyplnění odeslat na WWW-server.

Formulář si můžeme představit jako běžný dialogový box, který známe např. z Windows. Podobné jsou i prvky, které mohou být na formuláři umístěny:

* vstupní pole pro řádku textu;
* vstupní pole pro heslo (při zápisu jsou znaky na obrazovce nahrazovány hvězdičkou);
* checkbuttons -- zaškrtávací tlačítka, kterých může být zaškrtnuto libovolně mnoho najednou;
* radiobuttons -- zaškrtávací tlačítka, vybráno může být pouze jedno z celé skupiny;
* obrázky s odečítáním polohy kliknutí;
* tlačítko pro odeslání formuláře;
* tlačítko pro nastavení původních hodnot ve formuláři;
* vstupní pole pro víceřádkový text;
* seznamy hodnot k výběru -- podobné jako checkubuttons, hodnoty jsou však prezentovány jako seznam;
* skrytá pole -- ta se na formuláři nezobrazují, ale jsou přenášena na server (mohou sloužit k uložení pomocných identifikačních údajů).

Definice formuláře v HTML-dokumentu se provádí pomocí elementu FORM. Mezi <FORM> a </FORM> se umístí definice jednotlivých tlačítek a vstupních polí. U samotného elementu FORM je zapotřebí určit metodu zpracování formuláře a CGI-skript, který bude údaje vyplněné do formuláře zpracovávat.

Metody pro předání údajů existují dvě: GET a POST. Při tvorbě samotného formuláře nás jejich odlišnosti nemusejí zajímat, ty jsou podstatné až pro příslušný CGI-skript. Při použití metody GET jsou informace z formuláře předány pomocí environment-proměnné QUERY_STRING, v případě metody POST jsou informace z formuláře předány na standardní vstup skriptu. Pro větší formuláře je tedy z důvodů různých omezení WWW-serverů a operačních systémů nutno použít metodu POST.

Ač může celý mechanizmus vypadat poměrně komplikovaně, je jeho praktická implementace mnohdy velmi snadná. Ukážeme si jednoduchý příklad, jak vytvořit WWW-formulář, který zpřístupní službu Finger (zjištění skutečného jména uživatele na základě e-mailové adresy).

HTML dokument se vstupním formulářem:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<HTML>
<HEAD>
<TITLE>Brána pro službu Finger</TITLE>
</HEAD>

<BODY>
<'H1>Vyhledání skutečného jména na základě e-mailu</H1>
<'FORM METHOD="GET" ACTION="http://do.ma.in/cgi-bin/fingergw">
<P>E-mail adresa: <INPUT NAME="email" SIZE=40>
<P><INPUT NAME="Vyhledej" TYPE=SUBMIT>
</FORM>
</BODY>
</HTML>

Brána pro službu Finger

Vyhledání skutečného jména na základě e-mailu

E-mail adresa:

Atribut ACTION u elementu FORM určuje skript, kterému se předají údaje z formuláře. V našem případě bude požadovaná e-mailová adresa uložena v proměnné QUERY_STRING. Údaje z formuláře jsou pro tyto potřeby upraveny následně: (1) mezery jsou nahrazeny znakem "+"; (2) jednotlivé položky formuláře jsou odděleny znakem "&"; (3) obsahy jednotlivých položek jsou uloženy jako název položky=obsah položky. V našem případě bude řetězec QUERY_STRING obsahovat něco jako: email=blabla@lalala&submit=..., kde blabla@lalala je požadovaná e-mailová adresa. Jak by mohl vypadat CGI-skript fingergu si ukážeme zapsáno například v UNIXovém shellu sh. Ukázka je však tak jednoduchá, že k jejímu pochopení stačí povrchní znalost libovolného programovacího nebo makro jazyka:

echo "Content-type: text/plain"
echo
finger `echo "$QUERY_STRING" | cut -c7- | cut -f1 -d"&"`

První řádek skriptu zapíše na standardní výstup (ten je posílán prohlížeči) typ zasílaného sdělení -- v našem případě využíváme toho, že prohlížeče umějí zobrazit i čistý ASCII-text. Další řádka oddělí identifikaci formátu zprávy od jejího vlastního těla, které je tvořeno výstupem programu finger, kterému je jako parametr předána požadovaná e-mailová adresa (ta je z tvaru "email=blabla@lala&submit=..." získána pomocí dvou volání příkazů cut, která nejprve oseknou text "email=" a poté všechny znaky, které jsou za znakem "&" včetně).

Interaktivní mapy

Interaktivní mapy jsou dalším rysem, který přináší verze HTML 2.0. V předešlých verzích šlo obrázek použít pouze celý jako odkaz na jiný dokument. Nyní může prohlížeč zaslat serveru souřadnice kurzoru myši, na kterých se myš nacházela v okamžiku kliknutí. K tomu slouží atribut ISMAP elementu IMG:

<A HREF="http://do.ma.in/cgi-bin/imagemap"><IMG ISMAP SRC="http://do.ma.in/info/icons.gif">

V případě, že uživatel klikne např. na levý horní roh obrázku, zašle se na server požadavek:

http://do.ma.in/cgi-bin/imagemap?0,0 - tj. vyvolá se CGI-skript imagemap, kterému se v environment-proměnné předají souřadnice x a y oddělené čárkou.

Takovéto mapy se nejčastěji používají pro implementaci různých nabídkových lišt, které obsahují ikony. Při vytváření vlastních WWW-stránek bychom si však měli uvědomit, že ne všichni používají grafické prohlížeče, a kromě ikonek zahrnout na stránku i odkazy pomocí běžných textových prvků jazyka.

V současnosti existuje několik nástrojů, které usnadňují vytváření interaktivních map a jejich ošetření ve skriptech.

HTML 3.0

Další požadavky, které byly na HTML kladeny, se promítly do návrhu verze 3.0, která je zpětně kompatibilní s verzí předešlou. Navíc přidává zejména možnost tvorby tabulek, obtékání textu kolem obrázků a sazbu matematických vzorců. Mezi další možnosti patří např. možnost vytváření nástrojových lišt, jednotného podkladu pod celou stránkou a poznámek pod čarou.

Tabulkami se v našem článku zabývat nebudeme -- podíváme se na tematiku, které v tisku ještě tolik prostoru věnováno nebylo -- styly dokumentů a sazbu matematických vzorců.

Hierarchický systém stylů

Zejména díky tomu, že služba WWW začala pronikat i do komerční oblasti, začínaly se ozývat hlasy pro zavedení nějakého mechanizmu, který by umožnil precizněji řídit výslednou grafickou a typografickou úpravu WWW-stránek. Tento požadavek je však v rozporu s původní myšlenkou jazyka HTML -- ten je zcela nezávislý na platformě a konkrétní zobrazení dokumentů ponechává plně na prohlížeči a možnostech jeho hostitelského systému.

Aby tato velmi užitečná vlastnost HTML byla zachována vznikl hierarchický systém stylů (Cascading Style Sheets). Ten umožňuje pomocí jednoho nového elementu