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:

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 xkosj06@vse.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.

© Ji°φ Kosek 1999