Stránky mají URL a URI

HTTP

Jak jsme uvedli v minulém odstavci, nyní si povíme o Hypertext Transfer Protocolu, tedy protokolu, podle nějž se přenáší hypertext. Existují dvě verze tohoto protokolu (1.0 a 1.1). Ta první je poněkud jednodušší, nicméně nám bude stačit povědět si o ní. HTTP 1.0 je popsán v RFC 1945. Přenáší data v podobě holého textu, tedy snadno napsatelného a současně snadno čitelného kýmkoliv včetně nezvaných návštěvníků. Server přijímá požadavky obvykle na portu 80 a komunikace má tvar požadavek - odpověď - konec spojení. Z tohoto schématu plyne, že klient naváže spojení, řekne své požadavky, server mu odpoví a spojení končí.

Klient, který je "na tahu" při spojení jako první, může v rámci svého požadavku specifikovat verzi protokolu, kterou chce komunikovat, říci své jméno, přijatelná kódování znaků (charset), domácí jazyk a zejména údaj o stránce, kterou chce zobrazit.

Server v rámci odpovědi určuje zejména stav spojení, údaj o místním čase, své jméno (čím přesnější údaje v tomto směru poskytne, tím méně práce máte s hackováním dotyčného serveru), různé rady zejména ohledně cachovatelnosti stránky, údaj o délce dat, která budou následovat (mimochodem občas servery udají špatné číslo) a typ dat, která se budou přenášet.

Příklad:

   GET / HTTP/1.0
   User-agent: Hlawa, wokko, prsty

   HTTP/1.1 200 OK
   Date: Sun, 05 Oct 2003 16:16:39 GMT
   Server: Apache/1.3.26 (Unix) Debian GNU/Linux mod_gzip/1.3.19.1a
   CSacek/2.1.9 PHP/4.1.2 mod_ssl/2.8.9 OpenSSL/0.9.6g
   Vary: Accept-Charset,Accept-Language
   Content-Length: 3084
   Connection: close
   Content-Type: text/html; charset=iso-8859-2

   ...

Server říká, že požadavek jej uvedl do stavu 200 (tedy v pořádku, odpověď bude následovat), následně určuje místní čas, své jméno a údaje o svých zvláštních schopnostech (že umí PHP, SSL, žije na Debian GNU/Linuxu...), říká, že jsme neurčili jazyk, ve kterém dáváme stránkám přednost, ani oblíbené kódování (charset). Následně slibuje, že data jsou dlouhá 3084 (mimochodem jsou na místě tří teček příklad ukončujících opět po prázdném řádku), pak ještě server říká, že spojení se má po průtoku dat uzavřít a že data jsou text prokládaný HTML tagy v kódování ISO-8859-2.

Toto by mělo být téměř vše, co o HTTP potřebujeme.

Možnosti tvorby webových stránek

Jak jsme dříve již naznačili, webová stránka není nic jiného, než soubor (obvykle textový), který má obvykle jen tu zvláštní vlastnost, že se k němu lze dostat určitým "zvláštním" způsobem, můžeme jej však prohlížet i lokálně (tedy na místním stroji), což je z výukových důvodů mnohem výhodnější, jelikož se člověk nemusí zabývat složitým konfigurováním a odhadováním, pod jakým URI se jeho stránka skrývá.

V dnešní době jsou dvě základní možnosti, jak si počínat, chceme-li vytvořit webovou stránku. Buďto můžeme využít různých automatů generujících HTML (například Frontpage, HoT MetaL, či ne dvakrát nepodobný produkt organizace Netscape). Tyto nástroje mají výhodu, že vygenerují kód téměř komukoliv s minimálními znalostmi. Nevýhodou těchto automatů je zoufale neefektivní a mnohdy nefunkční kód (který vyústí v to, co jsme si představovali obvykle na jednom až dvou prohlížečích správných verzí), nemožnost vyrobený kód ručně netriviálně modifikovat (přesněji dá značné množství práce vyznat se v tom, co automat vygeneroval a vygenerovaný text natolik opracovat, aby odpovídal našim novým představám), navíc automaty těžko vygenerují stránku, která se bude mět hýbat (tedy třeba skript). A právě skriptování je naší motivací, ač se k nim letos příliš nedostaneme.

Druhou možností je napsat stránku ručně v nějakém textovém editoru, který podporuje ukládání ve formátu holého textu. Proč zrovna ve formátu holého textu? Protože HTTP přenáší data ve formátu holého textu. Tato druhá možnost nás tedy bude zajímat.

Základy HTML

Nyní si konečně odpovězme na sžíravou otázku, jak vlastně vypadá webová stránka. Již jsme implicitně sdělili, že obsahuje holý text proložený řídícími strukturami. Řídícími strukturami jsou v tomto případě tzv. tagy, které se poznají podle toho, že začínají menšítkem (<) a končí většítkem (>). Například takto: <HTML>

Tagy nesou obvykle informaci o tom, jak text naformátovat, nebo říkají, že na jejich místě má být něco jiného, než obyčejný text, tedy například tlačítko. Jelikož na tlačítku obvykle chceme mít nějaký nápis, je potřeba umožnit prostrkat některá data dovnitř tagů. Toto děláme pomocí tzv. atributů. Jak tedy obecně vypadá HTML-tag? Je zahájen znakem menšítka, následuje jméno tagu (které určuje, co chceme dělat), za jménem následuje mezera a posloupnost přiřazení do atributů, tedy název atributu, rovnítko, hodnota atributu, toto případně několikrát zopakováno a tag je ukončen znakem většítka.
Příklad: <input type="text" name="jmeno" value="nikde nic">
Na příkladu vidíme tag jménem input, jemuž nastavujeme atributy type, name a value. Hodnoty atributů je potřeba dávat do uvozovek kdykoliv obsahují nealfanumerické znaky (tedy něco jiného, než malou anglickou abecedu a arabske číslice bez mezer). Má určité výhody uzavírat hodnoty atributů do uvozovek vždy. Například po čase člověka napadne hodnotu změnit, přidá do hodnoty třeba mezery a pak se diví, proč to nefunguje.

U některých tagů vidíme před jménem tagu znak lomítka (např. </HTML>). Pak se jedná o tagy ukončovací. Existují jen k tagům, které něco otevírají, v našem příkladu se jednalo o tagy, které zahajují, resp. ukončují blok HTML.

Jelikož norem HTML existuje několik ( 2.0, 3.2, 4.0...), musíme říci, jakou normu a případně i jakou její část míníme v následujícím dokumentu použít. Nás bude zajímat zejména norma HTML 4.0, která specifikuje hned tři typy dokumentu.

Nejpřísnější část normy (nadále budeme normou mínit normu HTML 4.0) tvoří striktní doctype (tedy typ dokumentu). Chceme-li dodržovat tento, dáme to najevo následujícím meta-tagem:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
Tento typ dokumentu nám umožňuje použít všechny položky definované normou, kromě rámečků (framů) a zamítnutých atributů (zamítnuté atributy jsou takové, které se v HTML vyskytovaly a patrně pro kompatibilitu s normou 3.2 jsou ještě zachovány, v příštích verzích HTML se už ale vyskytovat nemusí).

Chceme-li použít zamítnuté atributy, je pro nás připraven přechodný typ dokumentu, jehož použití dáme najevo takovýmto prvním řádkem stránky:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">
Chceme-li použít druhdy poměrně oblíbené rámečky (framy), použijeme rámečkový typ dokumentu:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"       "http://www.w3.org/TR/html4/frameset.dtd">

Za tímto úvodním řádkem (obsah druhých uvozovek, tedy URI souboru definujícího typ dokumentu můžeme vynechat) je na čase zahájit sekci obsahující HTML tagem <HTML>. Až dojdeme k názoru, že už toho bylo dost, HTML ukončíme tagem </HTML>.

Norma rozděluje tagy na povinné (ty, které musíme uvést tam, kde je chceme obvykle proto, že prohlížeč nemá mnoho šancí správnou polohu tagu uhodnout), nepovinné (volitelné - ty si prohlížeč může nekonfliktně domyslet, pokud je uvedeme, slouží ke kontrole, že opravdu píšeme to, co si myslíme a ne něco jiného) a zakázané (ty, které použít nesmíme). Odkud se berou zakázané tagy? Jsou to typicky některé koncové tagy. Například chceme-li zlomit řádek, použijeme tagu <bg>. Co by ale tak mohlo znamenat </br>? Že by začátek konce? Proto je tag </br> zakázaný. Ještě než přejdeme k výkladu smyslu a významu jednotlivých tagů, řekněme si, že HTML je (kromě metatagu určujícího typ dokumentu) case-insensitive, tedy takové, že nezáleží na velikosti písmen, tedy <HTML> znamená totéž, co třeba <htML>. Toto přestane být pravda ve chvíli, kdy opustíme HTML a začneme se zabývat kupříkladu skriptovacími jazyky. Mimochodem tagy <HTML> i </HTML> jsou volitelné, místo, kde by měly být prohlížeč snadno odhalí. Pokud například použijeme tag </HTML>, ujasníme si, kde podle nás stránka končí a nemělo by se nám stát, že za tímto tagem budou ještě jakékoliv znaky, které si přejeme zinterpretovat.

Rovnou se zamysleme nad tím, jak se pozná, že je stránka napsaná správně. Že by certifikátem správnosti bylo, že existuje prohlížeč, který ji zobrazí? Nebo snad dokonce nějaký konkrétní? V žádném případě. Při tvorbě webových stránek je potřeba mít na paměti, že web je tu kvůli sdílení informací mimo jiné s lidmi, kteří žijí na strojích jiných druhů, než jsou PC, kde zákonitě používají jiné prohlížeče, navíc dnešní prohlížeče budou za 5 let zastaralé a my bychom asi chtěli, aby naše stránky vydržely déle, než týden, tedy do vydání nové verze jednoho konkrétního prohlížeče. Aby nedbalou prací návrhářů webových stránek zbytečně netrpěli uživatelé, norma specifikuje, že nekorektní HTML smí prohlížeč zobrazit naprosto libovolně. Čili žádným prohlížečem nezjistíme, zda je stránka v pořádku, nebo ne. Proto existují automaty zvané validatory. Jeden takový (ne zcela podlézavý, zato ale autoritativní) provozuje W3Consortium, které je autorem specifikace HTML 4.0, což mu dává právo posuzovat, co je správně a co ne. Doporučuji validator používat, minimálně dokud má opodstatněné připomínky. Naprasit stránky není umění, problém je potom udržet je funkční, protože kdo kupříkladu vynechá koncový tag seznamu s tím, že jeho prohlížeč si ho domyslí správně a na ostatních, že nezáleží, může být snadno nepříjemně překvapen, protože dnes to sázecí algoritmus odhadne správně, zítra pod dojmem zlozvyků jiných pisatelů třeba ne.

Hlavička stránky

Webová stránka sestává z hlavičky a těla. Hlavičku zahajujeme tagem <HEAD>. Do hlavičky strkáme zejména titulek (popisek stránky), můžeme do ní dát údaj o použitém kódování znaků, ale norma toto nedoporučuje, jelikož kódování určuje autoritativně server, nikoliv stránka. Počáteční i koncový tag hlavičky je volitelny (prohlížeč si je dosadí), pokud je ovšem člověk vynechá, hůř se ladí chyby typu tagu zatoulaného z těla do hlavičky.

Do hlavičky musíme (povinně) dát titulek. Každá stránka podle normy musí mít titulek. Titulek se zahajuje tagem < TITLE > a ukončuje pomocí tagu </TITLE >. Oba tyto tagy jsou (narozdíl od všech předešlých) povinné. Absence kteréhokoliv ústí v chybné HTML!

Dále do hlavičky dáváme tag <META>, jehož nastudování necháváme na čtenářově libovůli. Je to tag širokého leč ne příliš typického použití. Lze jím kupříkladu určit kódování, ale jak již bylo řečeno, není nutné (a ani doporučené) tuto metodu používat, protože o kódování stránky má autoritativně rozhodnout server.

</HEAD> - končíme s hlavičkou.

Tělo dokumentu

Tělo dokumentu tvoří "to, co prohlížeč zobrazí". Zahajuje se nepovinným tagem <body>, ukončuje se opět nepovinným tagem </body> Tag BODY disponuje oproti dosud uvedeným tagům značným množstvím atributů. Tyto atributy ovlivňují vzhled celého těla. Uveďme si ty nejdůležitější:

• background=URI - určuje obrázek na pozadí,
• text=color - barva textu (následující atributy mají syntax naprosto stejnou, proto uvedeme jen jejich názvy),
• bgcolor - barva pozadí,
• link - barva odkazů,
• vlink - barva navštívených odkazů,
• alink - barva vybraného odkazu,
• ...

Dále má (tentokrát nezamítnuté) atributy onload, onclick, onmousedown, onmouseover, což jsou události pro účely skriptování. Do těchto atributů se přiřazuje obvykle Javascriptový kód, který se má provést nastane-li příslušná událost.

Jinak si ještě připomeňme, že to, že jsou atributy zamítnuté, znamená jen tolik, že je nesmíme použít při striktním typu dokumentu.

Příklad -- takhle může vypadat jednoduchá webová stránka obsahující jen titulek a text:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Studie populační dynamiky...</TITLE>
</HEAD>
<BODY bgcolor="blue" text="black"
link="red" alink="fuchsia" vlink="maroon">
... tělo dokumentu ...
</BODY>
</HTML>

V příkladu vidíme na začátku odkaz k tomu, že používáme přechodný typ dokumentu, následuje začátek HTML, hlavička, v hlavičce titulek, pak tělo, o kterém říkáme, že pozadí má být modré, text černý, odkazy červené, aktivní odkazy v barvě fuchsia a navštívené odkazy v barvě jménem maroon. Tělo dokumentu sestává z textu "... tělo dokumentu ...". Nyní se můžeme podívat, jak bude taková stránka vypadat.

Základní formátování textu

Jak jsme si řekli na začátku, stránka nepopisuje své přesné vzezření, to je záležitostí prohlížeče, obsahuje jen pokyny pro vlastní vysázení. Jelikož každý monitor je jiný, znamená to mimo jiné, že prohlížeč musí ignorovat původní formátování textu co do vynechání mezer a konců řádků. Chceme-li si tudíž vynutit konec odstavce, nestačí znak konce řádku (a mimochodem znaků pro konec řádku je několik a nebylo by tudíž jasné, podle které zvyklosti se má prohlížeč řídit). Proto text rozdělíme do odstavců a každý odstavec zahájíme tagem <p>. Chceme-li odstavec ukončit, použijeme tag </p>. Odstavec má otevírací tag povinný (bez něj odstavec nevyrobíme), koncový tag volitelný (čili jej můžeme vynechat, interpret jej doplní na nejzazší místo, kam půjde). Tag p má několik atributů, zejména je důležitý atribut align, kterým se určuje, zda se má odstavec zarovnat doleva, doprava (align=left, align=right)...

Nechceme-li ukončovat odstavec, ale jen zlomit řádek uvnitř odstavce, použijeme tag <br>. Tento tag vynutí řádkový zlom. Oproti novému odstavci neumožňuje například změnu zarovnání, mimo to jeho koncový tag </br> je zakázaný (tzn. nesmí se používat, protože nemá dobrý smysl).

Vkládání obrázků

src

určuje URI, ze kterého se má obrázek stáhnout (povinný),

alt

alternativní text pro neobrázkové prohlížeče (rovněž povinný),

onClick

ovladač událostí pro účely skriptování - vyvolá se, pokud se klikne myší nad obrázkem,

onMouseOver

opět ovladač, tentokrát událost spočívá v prostém najetí myší nad obrázek,

a další...

Odkazy

Pojetí hypertextu jakožto prostředí usnadňující asociaci představ nás nutí stránky provazovat. Neustále přidávat odkazy z jedné do druhé, z druhé do třetí a občas i do kruhu. Odkaz můžeme vložit přes určitý kus stránky (k němuž se odkaz váže). Odkaz zahajujeme tagem a a že zahajujeme odkaz a kam má ukazovat řekneme pomocí atributu href. Abychom nechodili zbytečně kolem horké kaše, následuje příklad:
Nezajímavý text < a href="http://www.google.com"> se zajímavým odkazem. </a>
se zobrazí asi takto:
Nezajímavý text se zajímavým odkazem.

Určujeme-li URI, můžeme použít buďto absolutního určení (to je použito na příkladu), nebo relativního. Relativní nezačíná určením požadovaného protokolu a odkazuje vždycky na stroj, z něhož jsme stránku stáhli do adresáře, z něhož stránka přišla. Výhody relativních odkazů jsou zjevné. Použijeme-li vhodně relativních odkazů, můžeme stránky stěhovat mezi stroji i adresáři. Naopak použijeme-li absolutních odkazů, budeme třeba jen při přesunu do jiného adresáře všechny odkazy překopat. Proto je rozumné absolutní odkazy používat téměř jen při odkazu na jiný stroj.

Seznamy

Seznamy nám umožňují určitým sofistikovaným způsobem formátovat text. Použijeme jich kupříkladu při výčtu nějakých možností. V HTML je možno použít tři základní typy seznamů. Nečíslované, číslované a definiční.

• Číslovaný seznam zahajujeme tagem <OL>,
• atributem start určujeme, od jakého čísla se má začít (např. <ol start="10"> zahájí seznam číslovaný od desítky).
• atributem type říkáme, jaké číslování se má použít (např. velkým A řekneme, že chceme číslovat velkými písmeny latinské abecedy, číslicí jedna, že chceme číslovat arabskými číslicemi, malým i vynutíme pseudořímská čísla malou latinkou...
• jednotlivé položky seznamu zahajujeme tagem <li> a ukončujeme </li>,
• seznam ukončujeme tagem </ol,
• všechny uvedené tagy kromě </li> jsou povinné, </li> je volitelné.

Podobná pravidla platí pro nečíslované seznamy s tím, že otevírací (a tudíž i ukončovací) tag seznamu se nejmenuje OL, nýbrž UL a pozbývá smyslu atribut start.

Chceme-li udělat seznam víceúrovňový, zanořujeme tagy OL resp. UL do sebe. Musíme však dát pozor, aby se nám položky seznamů nepropletly, tedy abychom dříve, než zahájíme další položku vnějšího (dřívěji zahájeného) seznamu, ukončili vnořený seznam.

Příklad:

Program schůze:
<ol> <li> Projev předsedy,</li>
<li> Projev čestného předsedy,</li>
<li> Projevy ostatních důležitých funkcionářů:
<ul> <li>náměstka,
	<li>tajemníka,
	<li>druhého náměstka,</ul>
<li> Různé a závěr </ol>

1. Projev předsedy,
2. Projev čestného předsedy,
3. Projevy ostatních důležitých funkcionářů:
   • náměstka,
   • tajemníka,
   • druhého náměstka,
4. Různé a závěr

Definiční seznamy nám umožňují definovat pojmy. Jména tagů jsou popsána definičním seznamem, co se s ním dá dělat tudíž posuďte sami:

Tag <dt>

zahajuje seznam,

Tag <dt>

zahajuje definovaný výraz,

Tag <dd>

uvádí definující text.

Uvedené tagy jsou povinné, tag </dl>, který ukončuje definiční seznam je rovněž povinný, ostatní ukončovací tagy jsou volitelné.

Příklad:

Organizace:
<dl><dt> Ředitel </dt><dd> Ing. Zlatomil Korytář,</dd>
<dt>Náměstek </dt><dd> Karel Důležitý,</dd>
<dt>Uklízečka </dt><dd> Jarmila Umáčená.</dd></dl>

Ředitel

Ing. Zlatomil Korytář,

Náměstek

Karel Důležitý,

Uklízečka

Jarmila Umáčená.

Cvičení: Zkoušejte vytvořit jednoduché stránky obsahující odkazy, obrázky, seznamy a vůbec vše, co jsme dosud probrali.