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 HTML+ formalizoval 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ý mechanismus 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>

Atribut ACTION u elmentu 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 fingergw 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"></A>

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 mechanismu, 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ém 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 <STYLE> nebo pomocí některého z přidaných atributů ke stávajícím elementům definovat způsob zobrazení některé z částí HTML-dokumentu. Vzhledem k tomu, že podle stávající definice HTML mají být neznámé entity a atributy prohlížečem ignorovány, je možné prohlížet stránky obsahující definice stylů i prohlížečem, který tuto vlastnost nepodporuje -- stránka se zobrazí tak, jako by žádnou definici stylů neobsahovala (pouze při použití elementu <STYLE> se objeví několik řádek s definicí stylu).

Styl stránky může být obsažen buď přímo ve WWW-stránce, nebo zde může být umístěn odkaz na soubor (ve formě URL), který definici stylu obsahuje. Definice stylu umožňuje pro každý element definovat např. velikost, typ a barvu písma, velikost okrajů a barvu pozadí. Typ písma není určován pomocí přesného názvu řezu písma, ale pomocí jistých metatypů -- např. pro řez existují možnosti pro výběr patkového, bezpatkového nebo monotypového písma či kurzívy; pro světlost písma (duktus) existuje sedm možných variant. Na prohlížeči pak je, aby zvolil dostupné písmo, které co nejvíce odpovídá požadavkům specifikovaným ve stylu. Tím je odstíněna závislost na nějaké konkrétní technologii jako je TrueType nebo ATM.

Zatím jsme se však nezmínili o tom, proč je systém stylů hierarchický. Důvody jsou v podstatě dva -- zajištění modularity a vyvážení vzhledu dokumentu podle přání uživatele a autora stránky. K jednomu dokumentu může být připojeno několik stylů, které se navzájem doplňují. Pokud by mezi styly nastal konflikt, zvolí se výsledný styl podle vah připojených k dokumentu. Uživatel si rovněž může vytvořit svůj vlastní preferovaný styl. Ten je pak vždy skombinován se stylem prohlížené stránky. V případě konfliktu má obecně přednost styl definovaný autorem stránky -- prohlížeč by však měl umět tuto vlastnost potlačit.

Na podrobné rozepisování všech možností stylů zde bohužel není dostatek místa, to však nemění nic na tom, že styly jsou navrženy jako velice pružný mechanismus, který velice jednoduše umožňuje specifikovat výsledný layout dokumentu.

Pro názornost si uvedeme jednoduchou ukázku. Předpokládejme, že budeme chtít, aby nadpisy 1. úrovně (H1) byly zobrazovány 12bodovým tučným bezpatkovým písmem v modré barvě. Ostatní atributy ponecháme na stylu, který je uložen někde v síti:

<STYLE>
 @import "http://style.com/basic"
 H1 {
     font-size: 12pt;
     font-family: helvetica;
     font-weight: bold;
     color: blue
    }
</STYLE>

Matematické vzorce

HTML obsahuje nový element <MATH>, který je určen pro vytváření matematických vzorců. Dá se říci, že je to po dlouhé době opět něco, z čeho budou mít užitek především vědečtí uživatelé služby WWW. K zápisu vzorců se používá makrojazyk, který vychází z TeXu, je však přizpůsoben normě SGML. Vzorce se tedy již nemusí do dokumentů vkládat jako obrázky ani jako textové "obludy" s mnoha úrovněmi vnořených závorek.

Pro názornou představu si uvedeme jednoduchý příklad:

<MATH>&int;{f(x)<over>1+x} dx</MATH>

který se vysází jako:

         /
        |  f(x)
        |------- dx
        | 1 + x
       /

Závěr

Zachytit podrobně všechny prvky, které se v HTML vyvíjely a vyvíjejí, by vydalo na celou knihu. Pokusil jsem se tedy shrnout alespoň ty nejvýraznější prvky, které jazyk obsahuje, ale nejsou ještě plně v povědomí všech tvůrců WWW-stránek.

Při tvorbě vlastních stránek můžeme počítat plně se všemi prvky HTML 2.0 -- ty podporuje naprostá většina prohlížečů. Nic tedy nestojí v cestě napojit do Internetu různé informační služby pomocí bran vytvořených přes vstupní formuláře a CGI-skripty. S podporou HTML 3.0 je situace poněkud horší -- většina běžně používaných prohlížečů podporuje pouze tabulky a několik dalších drobností. Styly a sazba matematiky jsou prozatím pouze experimentálně obsaženy v prohlížeči Arena. S jejich širším použitím můžeme počítat až po upřesnění návrhu HTML 3.0.

Již nyní se však můžeme radostně těšit na poněkud klidnější období. Zdá se, že návrh HTML 3.0 je dostatečně komplexní a konzistentní, aby nějakou dobu pokryl všechny požadavky. Vznikne zde tedy prostor pro vytvoření nejen prohlížečů splňujících plně standard, ale i komfortních nástrojů pro editaci HTML-dokumentů. HTML však i nadále zůstane dost jednoduchý na to, aby šel zapisovat přímo člověkem.

Nemusíme se však bát, že by se na poli služby WWW nedělo nic nového a překotného -- cesta, podobná té kterou podstoupil jazyk HTML, jistě čeká i na Javu a VRML.

S autorem článku se můžete spojit pomocí elektronické pošty na adrese jirka@kosek.cz. Pokud máte o problematiku WWW zájem, asi nejhlubší studnicí poznání Webu je domovská stránka http://www.w3.org/. Návrh specifikace HTML 2.0 je obsažen v RFC dokumentu číslo 1866; specifikace HTML 3.0 existuje ve formě draft-dokumentu. Tyto dokumenty jsou v Čechách zrcadleny např. na ftp-serveru ftp.vse.cz v adresáři /pub/docs.