Co je to HTTP a HTML?

- předchozí článek - následující článek - obsah - úvodní stránka -

Linuxové noviny 03-04/99

Marek Sezemský, 20. března 1999

Toto měl být původně článek o programování CGI z jazyka C. Vzhledem k tomu, že jsem "kratší seznámení s HTTP a HTML" poněkud přetáhl, rozhodl jsem se k radikálnímu zásahu a jeden článek rozdělil na dva kusy. Tohle můžete brát jako zjednodušený popis toho, jak je možné, že Netscape (pro zatvrzelé Lynx) zobrazuje webové stránky plné grafiky (už ne Lynx :-) a odkazů.

Samo sebou, že po dočtení se můžete pustit i do druhé části, a to do popisu knihovny cgihtml pro zpracování formulářů na Internetu (prostě programování CGI).

Jen tak mimochodem: nekladu si za cíl popisovat vše úplně technicky a přesně, možná někde "odlítnu", takže se prosím, vážení odborníci, moc nezlobte.

Co je HTTP?

HTTP (HyperText Transfer Protocol) je protokol (podobně jako FTP a další), který se používá na Internetu snad nejčastěji. Pomocí něj putují data od webového serveru k vám domů. Jeho činnost je následující: po navázání spojení k serveru (např. www.linux.cz) klient (Netscape, Lynx) odešle tzv. požadavek (request), který vypadá takto:

GET /index.html HTTP/1.1
Connection: close
User-agent: Lynx/2.8
<prázný řádek>

Jestli si chcete vyzkoušet chování web serveru, zkuste si tohle napsat do telnetu, který spustíte jako telnet www.někde.cz 80, což vám otevře spojení na server přes port 80 (neboli http). Ale zpátky k tématu: První řádek je povinný. Udává metodu přenosu (jedno z GET/POST/HEAD: tyto metody jsou z hlediska CGI podrobně rozebrány v Popis knihovny cgihtml, aneb jak na CGI z C), cestu k souboru (/index.html, /, /archiv, atd.) a verzi protokolu HTTP (zde 1.1). Další řádky jsou nepovinné, ale uvedl jsem asi ty nejfrekventovanější. Pokud má Connection hodnotu Keep-alive, server po vyřízení požadavku (tj. odeslání souboru neuzavírá spojení, ale čeká na další požadavek. Při hodnotě close se spojení uzavře. Takže keep-alive vám šetří čas a tak trochu i peníze. Pomocí User-agent klient identifikuje sám sebe. Další možné parametry jsou např. Last-Modified - datum modifikace souboru (pro účely cache), příjímané typy dat (Accept-Content), a další. Zde platí, že co server nezná, ignoruje. Poslední prázdný řádek je povinný, jinak by server nepoznal, kde klient zakončí své přání. Po ukončení požadavku (oním prázdným řádkem) server odešle odpověď (reply). Ta má tento tvar:

HTTP/1.1 200 OK
Content-length: 120
Content-type: text/html
<prázdný řádek>
<...vlastní data (soubor)...>

První řádek vrací verzi HTTP na serveru (zde opět 1.1), kód chyby resp. úspěchu (200) a textový popis ke kódu (zde "OK"). Číselných kódů je mnoho, ale dají se rozlišit pomocí stovek: kódy 1xx jsou informativní, 2xx značí úspěch, 3xx je přesměrování, 4xx chyba ze strany klienta a 5xx chyba serveru. Content-length je délka odeslaných dat. Počítá se bez délky hlavičky (takže po prázdném řádku - prostě pouze data). Content-type je typ dat. text/html je HTML soubor, text/plain je čistý ASCII text. image/gif a image/jpeg jsou obrázky. Těchto typů je opravdová spousta a v různých situacích lze použít i masku: takže image/* znamená "všechny obrázky". Důležité je i to, že klient nerozlišuje příponu u souborů, takže pokud si řeknete např. "http://www.sezi.cz/cgi-bin/counter", můžete si natáhnout obrázek (počitadlo), ale i jinou stránku apod. Nyní se podíváme, co se skrývá za typem text/html.

Co je HTML?

HTML je HyperText Markup Language, neboli hypertextový jazyk značek (tagů). Je to formát souborů používaných převážně na Internetu. Do takového souboru můžete vložit odkaz na jiný soubor, měnit formátování, vkládat obrázky a spoustu dalších věcí. Tyto věci provádíte pomocí tzv. značek (tagů). Většina těchto tagů je párová (budu používat anglický tag místo české značky, připadá mi to lepší). Na jazyce HTML je krásné to, že to co neznáte (nezná prohlížeč), prostě ignoruje. Takže text v dokumentu je vždy zobrazen, ale pokud máte starší verzi prohlížeče, přijdete např. o speciální formátování, efekty nebo různé blbinky se scripty (JavaScript). Na škodu je to tehdy, když máte někde překlep (místo <form> třeba <dorm>) a HTML stránka se vám chová poněkud divně. Nejkratší HTML dokument vypadá takhle:

<html>
<head> <title> Titulek stránky </title> </head>
<body bgcolor="Barva pozadí" text="Barva textu"\
    link="Barva odkazů">
...text dokumentu...
</body>
</html>

Jako barva se uvádí anglický název (white, black), nebo hexadecimální vyjádření #RRGGBB. Např. modrá je tedy #0000FF. Mezi další tagy patří nadpisy:

<h1> text nadpisu </h1>
<h2> text nadpisu </h2>
...
<h5> text nadpisu </h5>
<h6> text nadpisu </h6>

Styl <h1> je největší (má tučné veliké fonty), a <h6> nejmenší (opravdu malinký). Odsazení nového řádku se provádí tagem <br>, nový odstavec vytvoříme pomocí <p>. Odkaz na jiný soubor (dokument) vložíme pomocí:

<a href="http://adresa.cz/soubory/soubor.html"\
  >Podtržený text odkazu</a>

Adresu u href tvoří tzv. URL (tuším Universal Resource Locator), což je jakoby adresa dokumentu. Je tvořena protokolem (http://, ftp://), serverem adresa.cz a souborem /soubory/soubor.html. Jednoduché jako facka. Podobně jako odkaz vložíme i obrázek. Všimněte si parametru alt: jeho hodnota je v úvozovkách, aby bylo jasné, ze víceslovný text není další parametr. To platí v celém HTML. Kde jsou mezery, tam taky uvozovky.

<img src=http://adresa.cz/obrazek.jpg\
 width=sirka height=vyska alt="Textový
popisek obrázku">

Šířka a výška jsou v pixelech. Jako obrázky na webu se používají (takřka jedinně) GIF a JPEG. Chystá se i nový PNG, ale bohužel se přes své kvality zatím moc nerozšířil. Onen alt obsahuje text, který je "pod obrázkem" - tedy pokud se jej např. nepodaří načíst. S grafikou buďte velice střídmí: foto autora ve formátu A4 je sice věc hezká, ale nikdo nemusí čekat půl hodiny na 100 kilo, aby viděl ten váš ksi** ;-). Pokud už neco používáte, nezapomeňte na to, že web je tady hlavně pro informace, pak pro Linux, a naposled pro modelky :-).

Seznamy vytvoříte snadno (když místo <ul> použijete <ol>, dostanete číslovaný seznam):

<ul>
  <li>Položka 1
  <li>Položka 2
  <li>Položka 3
</ul>

Formuláře

Nejdůležitější v HTML, pokud se díváme z pohledu CGI, jsou formuláře. Formulář začíná párovou značkou <form>. Její parametry jsou action, který obsahuje URL na CGI program, který bude zpracovávat data z prvků formuláře. Dále je to položka method, která udává způsob dopravení dat k CGI. Zde se používá get nebo post. Výhody a nevýhody obou si popíšeme ve článku Popis knihovny cgihtml, aneb jak na CGI z C. Pro vstupní prvky formuláře (např. textový řádek, přepínač, či jednoduché menu) se používá značka <input>. Jejím parametrem jsou type, name a popř. value. Parametr type udává typ vstupu (text / heslo / tlačítko / checkbox / radiobox). name je jméno pro hodnotu, na které se odkazujeme z CGI. Do value můžete zadat počáteční hodnotu vstupu. Vše objasní příklad (z kterého určitě mnohé další pochytíte). Jako první si rozebereme jednoduchý dotazník: od uživatele (surfaře Internetem) si zjistíme nějaké informace (jméno, věk, pohlaví...) a případně zapíšeme na serveru do souboru. Zdrojový formulář by vypadal asi tak, jako na výpisu Příklad formuláře.

(nezapomeňte, že se to celé musí vložit někam do html souboru, tohle by nemělo být jako samostatný soubor (už pro tu estetiku :-)).

<form action=/cgi-bin/test.cgi method=post>  <dl> <dt> Jméno <dd> <input type=text name=jmeno value="Pepa Novák"> <dt> Věk <dd> <input type=text name=vek value=21> <dt> Pohlaví <dd> <input type=radiobox name=pohlavi value=muz> Muž <br> <input type=radiobox name=pohlavi value=zena checked> Žena <br> <dt> Zájmy <dd> <input type=checkbox name=zajmy value=sport checked> Sport <br> <input type=checkbox name=zajmy value=tv> Televize <br> <input type=checkbox name=zajmy value=sex checked> Sex <br> <input type=checkbox name=zajmy value=pc> Počítače <br> <dt> Vlastním Internet <dd> <select size=1 name=inet> <option value=domov>Doma <option value=skola>Ve škole <option value=prace selected>V práci </select> <dt> Poznámky <dd>  <textarea name=pozn cols=20 rows=10>Komentář, připomínky, atd.</textarea> <dt> <dd> <input type=submit value=" odeslat "> <input type=reset value=" vymazat "> </dl> </form>

Výpis č. 1: Příklad formuláře

Tímto bychom měli pojmy jako HTTP a HTML rozebrané. Pokud se chcete tomuto tématu věnovat i nadále, doporučuji studium RFC dokumentů. Pro HTTP/1.0 a HTML 2.0 (poslední verze jsou 1.1(1.2?) a 4.0) jsem nějaká (značně obstarožní) RFC našel u sebe v archiváliích, takže se můžete kochat: http://www.sps-jia.cz/~sezi/rfc-1945-http.txt a http://www.sps-jia.cz/~sezi/rfc-1866-html.txt.

Mimochodem: Na mé homepage jsem umístil příklady k tomuto článku spolu s testovacími CGI programy, takže pokud se chcete kouknout, jak vypadá takový http://www.sps-jia.cz/~sezi/form1.html, dle libosti.

- předchozí článek - následující článek - obsah - úvodní stránka -