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