Co je web a jak funguje

Luboš Kudláček 8. 2. 2010     Rubrika:  Tvorba webu   

Pochopení základního principu je velmi důležité. Co to je vlastně ta webová stránka, proč se zobrazí v prohlížeči uživatele a jakým způsobem?

Webová stránka je dokument – hypertextový dokument. Stejně jako můžete dokument vytvořit v aplikaci Microsoft Word a bude mít příponu DOC, případně DOCX, dokument „webová stránka“ má příponu HTML, HTM či jiné. Je přenášena ze serveru na základě požadavku uživatele na její adresu.

Takže přesněji. Internet je síť propojených počítačů. Na pevném disku jednoho počítače jsou uloženy dokumenty (hypertextové dokumenty) a odtud se po síti načítají do prohlížeče čtenáře, který je chce zobrazit. Zobrazí je zadáním jejich URL adresy a prohlížeč je potom vykreslí jak je mu nadiktováno pomocí HTML značek ukrytých v hypertextovém dokumentu.

A ještě jednou. Pokud napíšete v obyčejném textovém editoru slovo „Ahoj“, uložíte soubor a jeho příponu změníte z TXT na HTML, máte hypertextový dokument. Ten umístíte někam na server/webhosting a zařídíte připojení adresy (pořídíte si doménové jméno, např. www.netzin.cz). Za předpokladu, že dokument pojmenujete pozdrav.html, pak když kdokoli ve svém prohlížeči zadá adresu http://www.netzin.cz/pozdrav.html, uvidí na obrazovce monitoru vámi napsané slovo „Ahoj“.

(Z adresy je patrné, že soubor je přenášen přes protokol http:// – všechny webové stránky jsou přenášeny právě tímto způsobem.)

Podstatné je, že tímto způsobem můžete vytvořit opravdu web, i když slovo Ahoj pochopitelně nestačí. Prohlížeči uživatele je totiž potřeba sdělit, jakým způsobem má toto slovo vykreslit, jak ho má vlastně zobrazit, aby to nebylo tak nudné. K tomu slouží značkovací jazyk HTML (HyperText Markup Language). Stačí, když slovo Ahoj vložíte mezi dva tagy (tak se říká těm HTML značkám), přičemž každý tag je uzavřen ve špičatých závorkách.

Potom tedy stačí, když vaše slovo uzvařete třeba takto:

<p>
Slovo – text
</p>

A hned to znamená, že váš text je v odstavci, neboť tag <p> je právě odstavec.

Aby toho nebylo málo, přichází na řadu styly (CSS). Těmi můžete prohlížeči čtenáře zase říct, jak ten odstavec vlastně vypadá. Jak je vzdálen od textu nad a pod ním, nebo třeba jakou v něm má barvu písmo či jaké má celý odstavec pozadí (barva, obrázek). A další věci.

Až budete psát skutečné webové stránky, bude mít každá ve zdrojovém kódu (to jsou ty tagy a text) hlavičku a v ním bude připojen odkaz na stylopis. Opět stačí, když v obyčejném textovém editoru vytvoříte soubor třeba s názvem styl a jeho příponu změníte z TXT na CSS.

Tip: všechny názvy souborů se z praktických důvodů píšou malými písmeny a bez diakritiky!

Do něj potom napíšete třeba:

p {color:blue}

A písmo v odstavci bude mít modrou barvu.

To je tedy naprostý základ tvorby webu. Můžete používat všelijaké aplikace, které HTML značky píšou za vás (wysiwyg editory), nebo rovnou pro svůj web použijete hotovou webovou aplikaci (redakční systém), ale pokud nebudete rozumět tomu, co opravdu děláte, v budoucnu zjistíte, že vám to při tvorbě opravdového webového projektu chybí.

Nepodceňujte základy, pokud chcete úspěšný web.

Seznam HTML tagů k dalšímu studiu najdete na Jakpsatweb.cz, my se budeme v tomto rychlokurzu věnovat pouze těm nejdůležitějším.