1. Tvorba web stránok

2. Tvorba web stránok Cieľ:
Oboznámenie s problematikou tvorby WWW stránok z pohľadu tvorcu a zároveň aj z pohľadu zadávateľa.
Základné pojmy používané pri návrhu a tvorbe WWW stránok
Súčasné technológie a programy pre návrh a tvorbu vlastnej WWW stránky.

3. Prezentácia firmy na webe
Účel prezentácie
Informácie o firme
Reklama na internete
Komunikácia zo zákazníkom
Predaj tovaru zákazníkovi

4. Úspešnosť prezentácie
Pre úspech firmy na Internete je dôležité:
Ako nájsť firmu – kontakt, mapka
Kvalitný a správne napísaný obsah
Prehľadný dizajn bez zbytočností
Dobrá a kvalitná web prezentácia musí zákazníka zaujať, musí udržať jeho pozornosť na web stránke a prinútiť ho, aby klikol na ďalšie odkazy, ktoré sú na web stránke prítomné.

5. Úspešnosť prezentácie
Kritériá:
Vysoko kvalitný obsah – „content is king“, čiže mať správne informácie na správnom mieste a v pravý čas.
Jednoduché použitie – jasná a jednoduchá navigácia uľahčujúca využívanie webstránky.
Rýchle otváranie a sťahovanie informácií na stránke – návštevníci neradi čakajú!
Pravidelná aktualizácia – pravidelné aktualizovanie obsahu stránky.

6. Priority pre tvorbu webstránky
Môžu sa líšiť medzi firmami, avšak medzi hlavné ciele a úlohy existencie webstránky patrí budovanie vzťahu so zákazníkmi založené na týchto krokoch:
Získanie zákazníka – návštevník stránky sa stane vašim zákazníkom.
Udržanie zákazníka – zabezpečenia opakovaných nákupov.
Zvýšenie predaja (cross-selling) – zákazník kupuje aj iné vaše produkty.

7. Prístupnosť web stránok
Prístupnosť web stránok znamená, že musíme počítať z možnosťou, že nie všetci návštevníci našej web stránky majú technické či zdravotné možnosti také, aby sa mohli oboznámiť s kompletným obsahom našej prezentácie.
Príklady:
FLASH, prístup pre mobilné telefóny, vreckové počítače, ...
Pruchy zraku – veľkosť písma, kontrastné farby, myslieť na použitie čítačiek textu, lúp, ...

8. Podklady pre web prezentáciu
Vhodne a správne použitá webová prezentácia môže byť pre firmu veľkým plus. Treba si však vždy dopredu premyslieť, pre akú cieľovú skupinu zákazníkov má byť naša web prezentácia určená.
Príprava podkladov pre web prezentáciu je tiež dôležitým medzistupňom ku kvalitnej a navštevovanej web stránke. Treba počítať s tým, že návštevníka web stránky musíme zaujať, nesmieme ho znechutiť predkladaním dlhého a nezáživného textu.
Napríklad zoznam výrobkov by mal byť doplnený vždy obrázkom a stručnou informáciou o cene výrobku a niekoľkými najdôležitejšími parametrami.
K web stránke patrí neodmysliteľne aj vizuálna časť. Podrobné informácie (väčšia fotografia, či viac fotografií, podrobné parametre výrobku atď.), môžu byť uložené na samostatnej web stránke.

9. Podklady pre web prezentáciu
Profil firmy
Tu umiestnime základné informácie o firme, prípadne ďalšie informácie o štruktúre firmy a jej hospodárení (ktoré by mohli byť zaujímavé pre potencionálneho obchodného partnera).
Výrobný program/Produkty/Predmet obchodovania/Služby
Informácie o výrobkoch, ktoré firma vyrába, či s ktorými obchoduje, prípadne o službách, ktoré firma poskytuje.
Kontakt
Informácie o možnostiach kontaktu – kde je možné nájsť firmu, jej pobočky, kontaktné telefónne či faxové čísla, adresy a podobne. Túto časť je vhodné doplniť mapkou.

10. Rozvrhnutie obsahu na WWW stránke
Usporiadanie jednotlivých prvkov na web stránke je dôležité z hľadiska prehľadnosti a prístupnosti.
umiestnenie navigačného menu,
grafických prvkov,
obsahu.
Pred samotnou realizáciou web stránky by sme si mali urobiť niekoľko náčrtov, ako si predstavujeme rozloženie obsahu na web stránke.

11. Webdizajn
Webový dizajn alebo webový design alebo webdesign je súhrnom výsledných spracovaní návrhov a požiadaviek pre koncept, funkčné riešenie a vzhľad webovej lokality, ktorý má byť funkčne spôsobilý pre zobrazenie a interpretáciu webovými prehliadačmi, alebo inými grafickými užívateľskými rozhraniami (skr.: GUI - "graphical user interface").
Prvé čo si návštevník stránky všimne je prirodzene vzhľad stránky: rozvrhnutie jednotlivých častí, farebnosť, obrázky, animácie, atď. - jedným slovom webdizajn. Práve toto vytvára prvý – najdôležitejší dojem.

12. Dizajn webstránky
Úvod do web dizajnu Pri tvorbe webstránky vychádzame z hlavných komponentov, ktoré budú bližšie vysvetlené.
Dizajn webstránky = Funkčnosť + Obsah + Forma + Usporiadanie + Interakcia

13. Dôležité postupy Jednotný dizajn
Hoci úlohou webstránky nie je len komunikácia so zákazníkom, jej obsah musí byť jednotný s ostatnými komunikačnými nástrojmi vašej spoločnosti, on-line ako aj offline. Nakoľko vaši zákazníci môžu nakupovať obidvoma spôsobmi, vaša marketingová komunikácia to musí zohľadniť. Veľakrát sa stáva, že zákazník získava informácie o vašom produkte na internete a nákup uskutoční v kamennom obchode.

14. Dôležité postupy Personalizácia webstránky
Už Dale Carnegie opakoval starú múdrosť, že: „Slovo, ktoré nám najkrajšie znie, je naše meno,“ preto pamätať si meno zákazníka a jeho potreby je osobná vec, ktorá pomáha budovať zákaznícke vzťahy. V offline marketingu vzťahov, kde sme s klientom v osobnom kontakte, sa to zdá byť jednoduchšie, avšak pomocou personalizácie na webstránke to vieme taktiež docieliť. Takáto personalizácia webstránky sa dá dosiahnuť tak, že každý návštevník bude mať zobrazené iné informácie ako:
Meno zákazníka alebo spoločnosti (oslovenie po vstupe na stránku)
Dátum a čas
Krajina pôvodu
Zákaznícke preferencie (zákazník si zadefinuje, ktoré informácie chce zobrazovať)
Novinky a posledné udalosti
Usporiadanie a výber vhodných prvkov je potrebný, ale čo dodá vášmu webu originalitu je to, akým spôsobom sa prihovoríte návštevníkom vášho webu.

15. Dôležité postupy Vizuálny dizajn webstránky
Samotný dizajn sa skladá z niekoľkých častí, ktoré by sme mali brať do úvahy, pokiaľ chceme vytvoriť skutočne atraktívnu stránku.
Estetika = Grafika + Farebnosť + Štýl + Rozvrhnutie a typografia
Pri tvorbe webstránky si tvorca musí uvedomiť, že všetky tieto časti majú spolu vytvárať nerušený a estetický obraz. Príliš veľa grafiky spomaľuje načítavanie stránky, príliš veľa textu nezaujme a nezladená farebnosť pôsobí rušivo. Štýl a celkové rozvrhnutie webstránky (text, grafika) môže návštevníka ihneď upútať, a to ešte predtým, ako získal samotnú hľadanú informáciu, ale platí to aj opačne. Typ písma je veľmi dôležitý pre čitateľnosť obsahu stránky, pričom sa vyberá zo základných tzv. systémových fontov (Arial, Verdana, Tahoma) a kvôli čitateľnosti je nutné zamyslieť sa aj nad ich veľkosťami v rôznych rezoch (tenké, kurzíva, tučné, úzke, veľmi tučné). Samotná grafika nie je samoúčelná, má zaujať, ale nie odpútať pozornosť od odovzdávanej informácie.

16. Základný dizajn stránky
Hlavné prvky, ktoré by nemali chýbať na každej stránke, tvoriace základné rozvrhnutie (layout) stránky:
Názov spoločnosti a logo (v pravom alebo ľavom hornom rohu)
Hlavné menu (top menu) pre základnú navigáciu
Päta stránky (spodná časť ) – informácie o autorstve, právne vyhlásenia, identifikácia tvorcov, administrátorský kontakt atď.

17. Hlavné menu
Položky hlavného menu musia mať jasný názov (napr. informácia o produkte), ktorý sa opakuje v samotnej textovej časti webstránky, nasledovaný konkrétnym textom, obrázkami.
Je len na nás, ako sa rozhodneme usporiadať tieto prvky, ale prehľadnosť, čitateľnosť a samotná ergonómia stránky by mali mať prednosť pred ľúbivou grafikou, ktorá však potlačí informačnú hodnotu.

18. Pohyb na stránke a jej štruktúra
Cieľom je, aby sa návštevníci opätovne vracali na vašu webstránku. Tento cieľ sa vám podarí zabezpečiť pomocou jednoduchej a prehľadnej štruktúry. Pohyb (navigácia) na stránkach je uľahčená, pokiaľ sú jednotlivé prvky usporiadané logicky a prehľadne dodávajú záujemcovi informácie. Medzi základné pravidlá navigácie (pohybu) zákazníka po stránke patrí:
Jednoduchosť (keep it simple) – nepoužívajte príliš veľa tlačidiel, odporúča sa maximálne sedem položiek.
Konzistentnosť (be consistent)– rovnaké menu a štruktúra na všetkých podstránkach – hlavné časti webstránky musia zostať zachované.
Orientačné body (signposts) – návštevník musí vždy vedieť, kde v štruktúre podstránok sa nachádza, a ako sa jednoducho dostane na hlavnú stránku.

19. Korporátny dizajn
Rovnako ako tlačové materiály aj Vaša web stránka by mala byť v štýle Vašej spoločnosti. Preto pri tvorbe web stránok dbáme na striktné dodržanie corporate identity.
Korporátna identita je marketingový nástroj.
Korporátna identita je komplexný prístup, ktorý zahŕňa korporátne správanie sa zainteresovaných, korporátnu komunikáciu a korporátny dizajn.
Korporátny dizajn je tiež označovaný ako jednotný vizuálny štýl.

20. Korporátny dizajn - l o g o t y p
L o g o t y p je základným prostriedkom vizuálneho štýlu, aj keď sám o sebe je viac estetickým ako funkčným a praktickým prvkom. Svoju primárnu funkciu jasne, zrozumiteľne a dôstojne reprezentovať nadobúda počas svojej existencie, kedy ho obohacujú príbehy a skúsenosti. Tomuto procesu „udomácnenia sa“ logotypu v povedomí širšej verejnosti výrazne napomáha dizajn manuál. Dizajn manuál je návod na použitie, návod ako s logotypom pracovať a spravidla tak trochu aj „šlabikár grafickej gramotnosti“.

21. Príklady štandardne používaných rozvrhnutí web stránky
Trojstĺpcové rozvrhnutie web stránky:
Hlavička web stránky (v angličtine header)
Ľavé menu
Obsah web stránky (alebo tiež telo web stránky)
Pravé menu
Pätička web stránky (v angličtine footer)

22. Príklady štandardne používaných rozvrhnutí web stránky
Dvojstĺpcové rozvrhnutie web stránky (menu môže byť aj napravo):
Hlavička web stránky (v angličtine header)
Pätička web stránky (v angličtine footer)
Ľavé menu
Obsah web stránky (alebo tiež telo web stránky)

23. Príklady štandardne používaných rozvrhnutí web stránky
Jednostĺpcové rozvrhnutie web stránky (menu môže byť aj napravo):
Hlavička web stránky (v angličtine header)
Pätička web stránky (v angličtine footer)
Menu
Obsah web stránky (alebo tiež telo web stránky)

24. Zdroje http://www.estranky.sk/galeriavzhladov#galerie

25. Prostriedky
Pri tvorbe webového dizajnu využívame:
Značkovacie jazyky [Markup languages] (napríklad HTML, XHTML a XML)
Webové štýly [Style sheet languages] (napríklad CSS a XSL)
Skriptovanie na strane klienta [Client-side scripting] (napríklad JavaScript)
Skriptovanie na strane servera [Server-side scripting] (napríklad PHP a ASP)
Databázy [Database technologies] (napríklad MySQL a PostgreSQL)
Multimédia [Multimedia technologies] (napríklad Flash)
Samozrejme, existuje množstvo iných kódovaní, jazykov a možností ako zapísať stránku, no tieto sú asi najpoužívanejšie a najrozšírenejšie.
Webové stránky môžu byť statické, alebo môžu byť naprogramované ako dynamické stránky, ktoré sa automaticky prispôsobujú vzhľadom alebo obsahom, v závislosti na množstve faktorov.

26. Ako spracovať grafický návrh do podoby web stránky?
Človek, ktorý navrhuje grafický vzhľad (grafik), má odlišnú úlohu od človeka, ktorý grafický návrh spracúva do podoby (X)HTML a CSS (webdizajnér). Pre tvorbu grafického návrhu je nutný určitý talent, fantázia a samozrejme veľmi dobrá znalosť grafických editorov. Pre spracovanie grafického návrhu do výslednej podoby je nevyhnutná aspoň základná znalosť práce s niektorým z bitmapových grafických programov, umožňujúcich tvorbu a úpravu obrázkov. Predložený grafický návrh slúži v podstate len ako vzor. Z neho môže webdizajnér podľa vlastnej úvahy vyberať farby a grafické prvky, ktoré sa na výslednej web stránke opakujú a zapracovať ich do (X)HTML a CSS.
Ideálnym riešením je spojenie role grafika a webdizajnéra do jednej osoby, toto však nie je možné vždy dosiahnuť. Žiaľ, je len málo dobrých grafikov, ktorí sú zároveň dobrými webdizajnérmi.

27. Jazyk XHTML a štýlové predpisy CSS
HTML – HyperText Markup Language – posledná oficiálna špecifikácia jazyka HTML je dostupná vo verzii 4.1, na stránkach organizácie World Wide Web Consortium (W3C)
XHTML – Extensible HyperText Markup Language – v prípade XHTML tu máme verziu 1.0, ktorá sa ďalej delí na 3 základné vetvy (ktoré sú určené pre prechod z HTML na XHTML)
XHTML 1.0 Strict – Túto verziu použijeme, pokiaľ chceme mať web založený na značkách určujúcich štruktúru stránky, bez použitia značiek, ktoré sú používané pre úpravu vzhľadu stránky. Miesto týchto značiek budeme používať jazyk pre popis vzhľadu značiek - Cascading Style Sheet (CSS), za pomoci ktorých budeme popisovať typy písma, farby a celkové usporiadanie jednotlivých prvkov web stránky. – Použitie tejto verzie je dnes odporúčané.
XHTML 1.0 Transitional – Túto verziu používajú ľudia, ktorí potrebujú rýchlo modernizovať staršie web stránky a doplniť do nich novú funkčnosť, ako sú napríklad CSS štýly. Táto verzia je prakticky totožná z HTML vo verzii 4.1 Pokiaľ chcete mať web stránku použiteľnú aj v starších prehliadačoch a pritom napísanú v XHTML, môžete použiť aj značky popisujúce vzhľad stránky.
XHTML 1.0 Frameset – Túto verziu použijete, pokiaľ chcete vo svojej web stránke použiť rámy (používať rámy sa už dnes neodporúča, keďže jestvuje množstvo efektívnejších metód, ako dosiahnuť na web stránke podobnú funkčnosť.)

28. XHTML
XHTML nie je programovací jazyk, ako sa mnohí mylne domnievajú. XHTML je jazyk, ktorý slúži na popis toho, ako má vyzerať výsledné zobrazenie textu v prehliadači internetových stránok. Značky jazyka XHTML, zapísané v texte, číta prehliadač takto:
„tu začni písať nadpis najvyššej úrovne, tu ukonči písanie nadpisu najvyššej úrovne, tu začni písať odstavec, tu začni písať šikmé písmo, tu ukonči písanie šikmého písma, tu choď na ďalší riadok, tu vlož obrázok s alternatívnym textom “Obrázok“, tu ukonči odstavec...“

29. XHTML V reálnom jazyku XHTML by predchádzajúci zápis vyzeral takto:
<h1>nadpis najvyššej úrovne</h1>
<p>odstavec <em>šikmé písmo</em><br />
<img src=“obrazok.jpg“ alt=“Obrázok“></p>

30. XHTML A zobrazený v prehliadači internetových stránok zasa takto:
Tomuto spôsobu spracovávania jazyka XHTML hovoríme interpretácia (čítanie a spracúvanie), a tomu, ako prehliadač web stránku zobrazuje na svojej zobrazovacej ploche, hovoríme renderovanie (zobrazovanie).
Toto nám hneď napovedá, že výsledné zobrazenie web stránky záleží len a len od toho, akým spôsobom prehliadač jednotlivé značky interpretuje a zobrazí. Každý prehliadač má vlastný spôsob, ktorým spracúva web stránku, a preto môžeme nájsť drobné rozdiely v zobrazení tej istej web stránky v rôznych prehliadačoch.

31. Základné pravidlá pre zápis značiek jazyka XHTML (HTML)
Zápis párových značiek jazyka XHTML (HTML) Značka jazyka XHTML strong (dôraz na označený text, vizuálne vyjadrený hrubým písmom) použitá vo web stránke vyzerá takto: <strong>zdôraznený text</strong> Každá značka jazyka XHTML vždy začína znakom < (menší) a končí znakom > (väčší). Použitá značka strong je značka párová (jazyk XHTML obsahuje párové a nepárové značky) – to znamená, že len text, ktorý je medzi začiatočnou značkou <strong> a zakončovacou značkou </strong> (všetky párové zakončovacie značky sa začínajú </ a končia >) bude zdôraznený – zobrazený hrubým písmom. Toto platí pre všetky párové značky!
všetky značky majú nejaký význam – strong, z angličtiny znamená silný; br, pochádza so skratky break (rozbiť, v tomto kontexte to znamená „rozbiť“ vetu na dva riadky).

32. Základné pravidlá pre zápis značiek jazyka XHTML (HTML)
Zápis nepárových značiek jazyka XHTML (HTML)
V jazyku XHTML však existujú aj značky, ktoré sú nepárové. Sú to značky, ktoré neurčujú vzhľad nejakej časti textu, ale plnia inú úlohu. Tieto značky musíme v jazyku XHTML zapisovať trochu iným spôsobom. Príklad – značka br (break), ktorá určuje, kde má prejsť zobrazovanie textu v prehliadači na nový riadok:
<br />
Ďalšími podobnými značkami sú img pre vloženie obrázku (image), hr pre vloženie vodorovnej oddeľovacej čiary (horizontal rule) a ďalšie.

33. Základné pravidlá pre zápis značiek jazyka XHTML (HTML)
Zápis parametrov (atribútov) značiek jazyka XHTML (HTML) Ďalšou vecou, ktorú si musíme pri zápise značiek jazyka XHTML ukázať, sú parametre (atribúty) značky. Ako príklad si uvedieme značku pre vloženie obrázku – img: <img src=”obrazok.jpg” alt=”Obrázok” title=”PLEASE ADOPT FIREFOX!” /> Značka img hovorí – sem sa vloží obrázok, parameter src (source) udáva zdroj, v ktorom sa uvádza meno obrázku a prípadne celá cesta k obrázku (kde, v ktorom adresári na vzdialenom web serveri sa nachádza obrázok). Značka jazyka XHTML môže mať aj viac parametrov ako jeden – v našom prípade sú to parametre alt (alternatívny text, ktorý sa použije v prípade, keď nie je možné zobraziť obrázok, alebo v prípade, keď stránku číta špeciálna čítačka pre zrakovo postihnutých) a title (text v tejto značke uvádza podrobnejší popis obsahu obrázku, ktorý sa zobrazí, keď podržíme kurzor na obrázku). Parameter musí byť vždy uvedený v úvodzovkách!

34. Základné pravidlá pre zápis značiek jazyka XHTML (HTML)
Zanorenie párových značiek jazyka XHTML (HTML) Značky jazyka XHTML je možné vkladať jednu do druhej (zanoriť ich), ale treba pri tom dodržiavať určité pravidlá. Nesprávne: <strong> <em>Tento text je zobrazený hrubým a šikmým písmom.</strong> </em> Správne: <em>Tento text je zobrazený hrubým a šikmým písmom.</em> </strong> Znamená to, že sa značky nesmú navzájom krížiť. Párové značky zanorené do seba sa musia zakončovať v opačnom poradí, než v akom sa začínali (čiže posledná vložená značka sa musí zakončiť prvá). Zle zapísané značky jazyka XHTML sťažujú prehliadaču proces čítania a zobrazovania web stránky!

35. Základná štruktúra XHTML (HTML) dokumentu
Každý HTML dokument má predpísanú základnú štruktúru – kostru dokumentu. HTML dokument je celý ohraničený (zanorený) v párovej značke <html>...</html>, ktorá obsahuje hlavičku dokumentu <head>...</head> a telo dokumentu <body>...</body>.
<!DOCTYPE html PUBLIC “-//IETF//DTD HTML 4.01//EN“>
<html>
<head>
<title> ... titulka stránky ... </title>
... ostatné prvky hlavičky ...
</head>
<body>
... viditeľný obsah dokumentu (telo dokumentu) ...
</body>
</html>

36. Základná štruktúra XHTML (HTML) dokumentu
Aby boli spracovateľné aj staršie HTML dokumenty, tak značky <html>,</html> <head>,</head> <body>,</body> nemusia byť zapísané vždy – prehliadače si dokážu poradiť aj s dokumentom bez týchto značiek. Samozrejme, pokiaľ sa vytvára nový HTML dokument, je vhodné dodržiavať túto základnú štruktúru.
Jazyk HTML nie je citlivý na veľkosť písma – to znamená, že všetky značky by mohli byť zapísané aj veľkými písmenami (<html> ako <HTML> a pod.). V jazyku XHTML však už toto neplatí, a preto je jediný perspektívny spôsob, ako zapisovať značky jazyka HTML v použití malých písmen.

37. XHTML dokument
Každý XHTML dokument má predpísanú základnú štruktúru – kostru dokumentu. XHTML dokument je celý ohraničený (zanorený) v párovej značke <html>...</html>, ktorá obsahuje hlavičku dokumentu <head>...</head> a telo dokumentu <body>...</body>.
<?xml version=“1.0“ encoding=“windows-1250“?>
<!DOCTYPE html PUBLIC “-//IETF//DTD XHTML 1.0 Strict//EN“ “
<html xmlns=“ xml:lang=“sk“ lang=“sk“>
<head>
<meta http-equiv=“content-type“
content=“text/html; charset=windows-1250“ />
<meta http-equiv=“content-language“ content=“sk“ />
<title> ... titulka stránky ... </title>
... ostatné prvky hlavičky ...
</head>
<body>
... viditeľný obsah dokumentu (telo dokumentu) ...
</body>
</html>
Značky <html>,</html> <head>,</head> <body>,</body> musia byť zapísané vždy (to znamená, že nesmú byť vynechané). Značky musia byť zapísané malými písmenami.

38. Štýlové predpisy (štýly) CSS
  Kaskádové štýly alebo CSS [URL3] (skratka z angl. Cascading Style Sheets) je všeobecné rozšírenie (X)HTML o možnosti opisu vzhľadu textu základnými parametrami bežného DTP (skratka z angl. Desktop publishing je označenie pre celý proces spracovania grafického návrhu na počítači až po export súboru pre tlač). Štýly umožňujú oddeliť štruktúru HTML alebo XHTML od vzhľadu stránky.
Pomocou štýlov môžeme meniť tieto základné atribúty vzhľadu jednotlivých prvkov na stránke:
vonkajšie odsadenie od okraja (margin),
okraj (border) (jeho vzhľad, farbu, hrúbku...),
vnútorné odsadenie od okraja (padding),
písmo (font) (jeho typ, veľkosť, hrúbku...),
pozadie (background) (farbu, obrázok a jeho umiestnenie na pozadí...),
pozíciu prvku v stránke (position) (spolu s určením rozmerov prvku to
poskytuje zaujímavé možnosti pre stavbu web stránky),
ďalšie možnosti...

39. Základné pravidlá pre použitie CSS štýlov
Štýlový predpis (popis vzhľadu (X)HTML prvku na stránke) je možné vložiť do (X)HTML tromi rôznymi spôsobmi.
Vkladanie CSS ako parametru značky (X)HTML
Do každej značky jazyka (X)HTML môžeme za pomoci parametru style doplniť jej štýlový predpis.
<h1 style=”color : blue;”>Nadpis odstavca</h1>
<p style=”color : green;”>Odstavec…</p>
V je použité CSS pre nastavenie farby nadpisu na modrú a pre nastavenie farby písma v odstavci na zelenú. CSS sa dá používať aj týmto spôsobom, ale je to ten najmenej efektívny spôsob. Ďalej si popíšeme efektívnejšie (a správnejšie) spôsoby použitia CSS.

40. Základné pravidlá pre použitie CSS štýlov
Vkladanie CSS do hlavičky dokumentu (X)HTML
<head>
...
<style type="text/css">
h1 { color : blue; }
p { color : green; }
</style>
</head>
V príklade sme použili CSS pre rovnaký účel ako v predchádzajúcom príklade (vkladanie CSS ako parametru značky (X)HTML) s tým rozdielom, že takýto zápis predpisuje všetkým nadpisom h1 a všetkým odstavcom p, ktoré sa nachádzajú v tele stránky rovnaký štýl – farbu písma.

41. Základné pravidlá pre použitie CSS štýlov
Vkladanie CSS z externého súboru
Obsah externého súboru styl_stranky.css:
/* externy CSS subor */
h1 { color : blue; }
p { color : green; }
Aby sme tento štýlový predpis mohli v stránke použiť, musíme v hlavičke web stránky zapísať:
<head>
...
<link rel="stylesheet" type="text/css" href="styl_stranky.css" />
</head>
Základné pravidlá pre použitie CSS štýlov: Tento spôsob je podobný predošlému (vkladanie CSS do hlavičky dokumentu (X)HTML) s tým rozdielom, že externý súbor môžeme rovnakým spôsobom vložiť do súboru každej (X)HTML stránky. Potom sa každá zmena, ktorú v tomto súbore štýlového predpisu urobíme, prejaví na zobrazení každej (X)HTML stránky. Toto je najvýhodnejší spôsob, ako CSS môžeme v našich stránkach používať. Predchádzajúce dva sú vhodné na testovanie, prípadne tam, kde nie je nutné používať rovnaký štýl na viacerých web stránkach. Znaky /* a */ sú použité pre ohraničenie odstavca s poznámkou, ktorá nemá vplyv na nastavenie štýlov (X)HTML dokumentu.

42. Zdroje (z ktorých je možné vychádzať pri štúdiu CSS a (X)HTML)
Online zdroje
WEB stránka Jak psát web [URL5], je vhodným zdrojom informácií pre začiatočníkov, čo sa týka práce s (X)HTML a CSS, ale aj v ďalších oblastiach. Mgr. Ľuboš Kmeťko zasa vypracoval a dal k dispozícii kurz Internet a tvorba www stránok [URL6]. Ďalšie tri odkazy na seriály pochádzajú zo servera Interval, ktorý sa tematicky zameriava práve na tvorbu web stránok [URL7], [URL8], [URL9]. Posledný odkaz je priamo od tvorcov štandardov (X)HTML a CSS – World Wide Web Consortium [URL10] – organizácie, ktorá zastrešuje štandardizáciu a ďalší vývoj web technológií.
Odporučená literatúra
Kniha HTML a XHTML, začíname programovat [1], ktorú napísal Slavoj Písek, vás uvedie do sveta tvorby web stránok. Kniha CSS pro zelenáče [2] od Martina Snížka je vhodná pre začiatočníkov, ktorý ešte len do tajov CSS prenikajú. Knihy XDHTML [3] a XCSS [4], ktoré napísal Pavol Mikle sú veľmi vhodným zdrojom informácií pre toho, kto už vie s (X)HTML a CSS pracovať a potrebuje doplňujúci zdroj informácií.

43. Optimalizácia pre vyhľadávače - SEO
Optimalizácia pre vyhľadávače alebo SEO (z ang. search engine optimization) je súbor techník na zlepšenie pozície, na ktorej sa optimalizovaná webstránka zobrazí vo výsledkoch vyhľadávania v internetových vyhľadávačoch. SEO zahŕňa linkbuilding, linkbaiting, social media marketing, virálny marketing, on-line PR v kombinácii so sémantickým kódovaním webu.
Kľúčové slová sú najdôležitejšou časťou SEO, postup ako optimalizovať konkrétne webové stránky pre vyhľadávače. SEO sa klasifikuje na techniky, ktoré spoločnosti prevádzkujúce vyhľadávače odporúčajú na vylepšenie svojej pozície, tzv. White hat SEO a techniky, ktoré zakazujú, tzv. Black hat SEO. Vyhľadávacie služby sa snažia Black hat SEO zamedzovať.

44. SEO ON PAGE faktory: OFF PAGE faktory: kvalitný názov web stránky
meta riadky: popis, kľúčové slová, iné meta riadky
použitie kľúčových slov na stránke
kód web stránky, odkazová stránka
architektúra stránky a obsahu
textové odkazy, popularita odkazov, popularita obrázkových odkazov
telo web stránky
odkazy v anchor texte, popularita externých odkazov
rozmanitosť odkazových zdrojov
použitie: Frames, JavaScript a Flash
OFF PAGE faktory:
kvalita domény / URL
Mapa stránok, PageRank
kvalitné spätné odkazy
návštevnosť stránky

45. Etická a neetická optimalizácia
Niektoré metódy optimalizácie vyhľadávače penalizujú znižovaním pozície webovej stránky vo výsledkoch, pretože používajú neetické metódy, ako spamdexovanie, alebo techniky nazývané čierny klobúk (z ang. black hat).Napríklad použijú biely text na bielom pozadí, za účelom zvýšenia pozície vo vyhľadávaní. No Google takéto techniky nemá rád, a preto tieto weby potrestá banom PageRanku teda napr. stránka mala PR4 a po neetických technikách má PR0. Takéto bany Google niekedy robí aj na stránkach, ktoré zobrazujú reklamu naposledy spoločnoť Directo global a na tých, ktoré predávajú odkazy. Ale iba niekedy.
Etická optimalizácia zahrňuje použitie legitímnych techník na zlepšenie čitateľnosti stránky, jej správna a logická štrukturalizácia a správne použitie tagov HTML, XHTML a/alebo XML.

46. Redakčné systémy - CMS
CMS – administračné rozhranie na správu obsahu web stránky. V ňom je možné upravovať štruktúru web stránky, texty, obrázky.
CMS sa vyznačuje najmä:
vždy aktuálnymi informáciami,
jednoduchým vkladaním, upravovaním textov, vkladaním obrázkov a tvorbou on-line katalógov,
možnosťou vytvorenia kompletnej fotogalérie pre každý produkt,
možnosťou správy produktov v internetových obchodoch,
neobmedzeným počtom podstránok,
hromadným oslovovaním zákazníkov, atď.

47. CMS Redakčný systém je možné použiť pre firemné prezentácie
internetový obchod
internetové aplikácie
portálové riešenia
intranetové informačné riešenia
Vlastnosti CMS systému
je šetrný - neplatíte za aktualizácie, obsah si viete zmeniť sami
je efektívny - šetrí váš čas, obsah viete zmeniť okamžite
je prispôsobivý - systém sa prispôsobuje vašej stránke, nie stránka systému
je pohodlný - prístup k systému máte kdekoľvek a kedykoľvek
je bezpečný - zabezpečenie prístupu k údajom
je progresívny - posunie pozíciu web stránky do popredia

48. Ako skutočne získať pravidelných zákazníkov pomocou webu - zhrnutie
Kvalitný obsah
Jasná a jednoduchá navigácia
Prístupnosť web stránky
Rýchle otváranie a sťahovanie informácií na stránke
Pravidelná aktualizácia
Personifikácia
Otestované fakty pre úspešnosť webu:

49. Rady pre začiatočníkov
Verešovský Marcel: Dizajn webstránky. URL:
Marika Schvarczová: Seriál Ako sa dostať na web 1. časť, URL:

50. Umiestnenie web stránok
Pre umiestnenie hotovej web stránky existuje viacero možností:
poskytovatelia web priestoru zdarma ( )
platení poskytovatelia web priestoru,
vlastný web server.

51. Programy pre tvorbu web stránok
Pre tvorbu web stránok existujú aj špecializované nástroje – editory web stránok. V podstate je možné vytvoriť web stránku bez akejkoľvek znalosti HTML. To je však veľmi zjednodušený pohľad na vec. Aby sme web stránku dokázali naozaj efektívne vytvoriť, potrebujeme poznať množstvo vecí, ktoré s tvorbou web stránok súvisia. Príkladom môže byť napríklad využitie formulárov. Áno, v editore web stránok dokážete naklikať pekný formulár, ale aby sa dal naozaj používať, musíte poznať spôsob, akým treba jednotlivé formulárové prvky pomenovať, poslať, nehovoriac o ich spracovaní. V každom prípade aj pri použití niektorého z editorov web stránok je nutné, aby sme poznali základné princípy a pravidlá tvorby web stránok – základné HTML značky, spôsob ich zápisu, ich parametre a podobne.

52. Programy pre tvorbu web stránok
Dá sa povedať, že web stránky sa dajú tvoriť v akomkoľvek jednoduchom textovom editore. Klasickým príkladom je Windows Notepad. Samozrejme je však ďaleko efektívnejšie použiť nástroj, ktorý je určený priamo ako pomôcka pre tvorbu web stránok.

53. Editory Poznáme dva základné typy editorov:
editory zdrojového kódu web stránok,
WYSIWYG (What You See Is What You Get – to, čo vidíš aj dostaneš) editory.

54. Editory zdrojového kódu
V podstate jestvuje niekoľko desiatok nástrojov určených ako pomôcka k editovaniu zdrojového kódu web stránok (HTML a CSS). Niektoré sú univerzálne editory, umožňujúce editovať nielen web stránky, ale aj množstvo ďalších typov súborov. V čom nám dokáže taký editor vlastne pomôcť? Tieto editory používajú na zvýšenie efektívnosti práce niekoľko nástrojov:
zvýraznenie farebnej syntaxe zdrojového kódu (syntax color highlighting),
automatické dopĺňanie značiek a ponuka parametrov značiek,
klávesové skratky (napríklad na hrubé, šikmé písmo či vloženie tzv. tvrdej medzery   ktorá slúži na typografické spojenie predložky so slovom),
otvorenie a editovanie súboru priamo zo vzdialeného web serveru,
a množstvo ďalších nástrojov.

55. Príklady na v praxi používané editory
Homesite – starší, ale stále veľmi obľúbený editor špecializovaný na tvorbu web stránok,
PSPad – univerzálny textový editor s množstvom nástrojov a pomôcok pre tvorbu web stránok ( – je ho možné používať zdarma,
a množstvo ďalších... (množstvo príkladov nájdete na serveri v sekcii Grafika-a-webdesign/Nastroje-webdesign/Editory-HTML/).

56. WYSIWYG editory
Výhodou WYSIWYG editorov je spôsob práce rovnaký ako napríklad v MS Word. Jednoducho píšete, zvýrazňujete text, nastavujete veľkosť písma, farby, vytvárate tabuľky – to všetko za pomoci výberov z menu. Každá zmena, ktorú urobíte, sa hneď zobrazí tak, ako bude vo výsledku zobrazená v prehliadačoch web stránok. Všetky zápisy do HTML kódu sa odohrávajú na pozadí – editor sám určí, ktorú značku má použiť pre požadované zobrazenie.

57. WYSIWYG editory
Pre profesionála je v oblasti WYSIWYG editorov výber jasný. Asi najdokonalejším nástrojom, spájajúcim všetky výhody textových editorov zdrojového kódu a WYSIWYG editorov s dokonalým zobrazením editovanej stránky je Macromedia (Adobe) Dreamweaver (v aktuálnej verzii 8). Microsoft ponúka ako konkurenciu pre Dreamweaver program Microsoft Expression Web Designer (predtým MS FrontPage). Tento program je celkom dôstojným súperom pre Dreamveawer a môže vám tiež celkom efektívne pri tvorbe web stránok pomôcť.

58.  WYSIWYG editory
Dreamweaver a Microsoft Expression Web Designer nie sú jedinými predstaviteľmi WYSIWYG editorov. Dokonca aj MS Word umožňuje uložiť editovaný dokument ako HTML – čím sa dá povedať, že dokáže podobné veci ako špecializované editory. Je to však naozaj núdzové riešenie. MS Word nedokáže pracovať so štýlmi a ním vytvorené stránky obsahujú veľmi neefektívny HTML kód – pre ďalšie úpravy v inom editore ako je MS Word nepoužiteľný.
V tejto kategórii samozrejme tiež existujú ďalšie nástroje, ale v tejto kapitole sme si chceli ukázať tie najlepšie a najdôležitejšie.

59. Zdroje
[URL1] WIKIPEDIA – Hypertext markup language [URL2] WIKIPEDIA – Extensible Hypertext Markup Language [URL3] WIKIPEDIA – Cascading Style Sheets [URL4] Quirksmode.ORG - The position declaration [URL5] Jak psát web [URL6] Kurz Internet a tvorba www stránok [URL7] Interval.CZ – XHTML - kompletní průvodce [URL8] Interval.CZ – Kaskádové styly - kompletní průvodce začátečníka [URL9] Interval.CZ – CSS2 - kaskádové styly druhé generace [URL10] World Wide Web Consortium (W3C) (v angličtine) [1] PÍSEK, S: HTML a XHTML, začínáme programovat. Praha : GRADA Publishing, s. ISBN [2] SNÍŽEK, M.: CSS pro zelenáče. Praha : Neocortex, s. ISBN [3] MIKLE, P.: XDHTML – HTML, XHTML, DHTML – úplná přesná referenční příručka. Brno : Zoner Press, s. ISBN [4] MIKLE, P.: XCSS – CSS1, CSS2, CSS3 – úplná přesná referenční příručka. Brno : Zoner Press, s. ISBN