Jak na webové stránky

Jednoduchý úvod do psaní kódu internetových stránek

Začínáme: jak fungují webové stránky

Fungují jednoduše. Celosvětová organizace W3C vyvíjí řadu způsobů, jak zapisovat informace a zároveň je zobrazovat na Internetu. Na Internetu si stránku pomocí tohoto způsobu vytvořenou stáhnete do počítače a vás internetový prohlížeč ji přeloží do lehce čitelné podoby. To může udělat proto, že kodér ji předtím napsal v jazyce, kterému prohlížeč rozumí. Tyto jazyky se budeme učit.

Popravdě řečeno, nejde o jazyky. Jazyky se totiž pojí s programováním, a to my dělat nebudeme. My pouze napíšeme prohlížeči návod, jak naši stránku vykreslit na monitoru. Budeme mu proto sdělovat dva typy informací. První se bude týkat toho, co píšeme (obsah), druhý se bude týkat způsobu robrazení (grafika). Tomuto rozlišení se říká oddělení obsahu od formy.

Obsah

Forma

Příklad oddělení obsahu od formy

Konkrétně jde o to, že v jednom souboru (tzv. HTML soubor) napíšete text se značkami, které úsekům stránky dávají určitý význam, odlišují ho. Například takto:

  1. <h1>Sklady a parkoviště</h1>
  2. <p class="nabizime">Nabízíme pronájem skladů a parkovišť a zajišťujeme kompletní logistický servis pro menší firmy</p>
  3. <h2>Novinky</h2>
  4. <p>Dne 21. 2. 2007 jsme do firmy přikoupili nový automobil pro <em>objíždění zákazníků<em>, BMW X3.</p>
V druhém souboru (tzv. CSS soubor) pak definujete, jak se výše napsaný kód zobrazí v prohlížeči. Například takto:
  1. h1 {text:align: center;}
  2. .nabizime {font-style: italic;}
  3. h2 {background: gray; padding: .5em;}
  4. p {line-height: 1.3;}

Podívejte se, jak to vypadá v praxi.

A nyní se tedy podívejte na nejlepší příklad tohoto oddělení obsahu od formy (význam tohoto bude osvětlen dále). Jde o projekt css Zen Garden. Kdosi napsal XHTML stránku a řekl, ať k ní lidé posílají CSS soubory a obrázky, aby jedna stálá stránka nabývala různých forem.

 

Zpět nahoru

Proč se to učit

Rozumět tomu, jak se píší webové stránky, je řemeslo jako každé jiné. Někdo umí pokrýt střechu taškami, někdo umí napsat kód, který v internetovém prohlížeči ukáže tabulku a obrázky. Taková znalost se hodí, ne?

Zpět nahoru

Paradox a demotivace

Tento projekt poskytuje návod k začátkům práce s webovými stránkami. Přesněji řečeno, ukáže vám, jak na webových stránkách zobrazit nějaké informace. Této práci se ale neříká programování; program je v porovnání s naším zamýšleným výtvorem poněkud vyspělejší tvor.

Jak už to v počítačovém světě chodí, existují programy a mašinky, které oono zobrazování udělají za vás. I já píšu tento text ve vizuálním editoru. Píšu jako ve Wordu a prográmek za mě přidá potřebné značky. Říkáte si, proč se mám tedy nějaké kódy učit...? Odpověď je ale nasnadě: Učte se je proto, že kdybyste nerozuměli základům, tak ani nevíte, jak vygenerovaný kód z těch šikovných prográmků použít. Nemluvě o tom, že každý takový prográmek trochu zlobí a je třeba často něco doupravit ručně.

Až po pár hodinách porozumíte všem na těchto stránkách, vesele si stáhnete potřebné programy a tvorba webových stránek vám půjde pěkně od ruky. Předtím je ale třeba trochu teorie.

Zpět nahoru

Seznam pojmů

XHTML
The Extensible HyperText Markup Language. Jeho pomocí můžeme psát webové stránky. Odlišuje mezi jednotlivými částmi stránky, a proto můžeme v CSS souboru nastavit jejich vzhled. Soubor XHTMl poznáte podle přípony .html, která vychází ze staršího jazyku HTML. Jeho nadřazená verze, XML, umožňuje kvalitnější práci s označováním částí stránky. Článek o XHTMl a XML a specifikace od W3C.
CSS
Cascading Style Sheets, kaskádové styly. Umožňují nastavit vzhled stránky. Je to jeden nebo více souborů, které se příkazem načítají do stránek XHTML a mají příponu .css. Úvod do CSS a specifikace W3C

Zpět nahoru

© Radovan Fišer