Webová šablona 1

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 ikonka 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 ikonka 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

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Můžete používat následující HTML značky a atributy: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>