V několika kapitolách si ukážeme, jak si můžete vytvořit Vaši první jednoduchou, ale moderní webovou šablonu za použití jazyků html a css.
Kapitola první – Nejnutnější základy
PSPad editor
Pro začátek budeme potřebovat editor pro psaní zdrojového kódu. Prozatím doporučuji tedy PSPad editor.
Ke stažení:
http://www.pspad.com/cz/
http://forum.pspad.com/read.php?6,64865
http://www.stahuj.centrum.cz/vyvojove_nastroje/www-tvorba/ostatni_editory/pspad/
Nainstalovat. Spustit.
Rozkliknout ikonku Otevřít nový soubor 
kliknutím na tu šipku dolu. Vybrat xhtml, nebo html. Je to to samé.
Na ploše vytvořit složku web. V PSPadu rozkliknout Soubor a zvolit Uložit jako…, přejmenovat na index.html a uložit do té složky web.
Znova rozkliknout Otevřít nový soubor a vybrat Cascading Style Sheet. Uložit jako style.css vše do té složky web/styly. Ano. Je třeba ještě vytvořit podsložku styly. Je to třeba do budoucna kvůli přehlednosti.
Propojení
Je třeba přepsat tu příšernost v index.html. Veškerý obsah smazat a nakopírovat tam toto:
<!doctype html> <html lang="cs"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="styly/style.css"> </head> <body> </body> </html>
K použití také zde:
http://moderniweb.com/vyuka/html5/sablona.html
Právě by mělo dojít k propojení index.html se style.css. Propojení zajišťuje řádek:
<link rel="stylesheet" href="styly/style.css">
Provedeme test. Otevřeme webový prohlížeč. Doporučuji Mozilla Firefox a pro přesnost při této výuce to bude dle mého i lepší, pokud budeme pro začátek používat stejný.
Ke stažení: http://www.mozilla.cz/stahnout/firefox/
V tomto prohlížeči otevřeme náš index.html. Měla by tam prozatím být bílá stránka.
Soubory z lekce ke stažení: lekce-1.zip