Skočit na obsah

Tvorba WWW prezentace

OSNOVA

  1. Struktura HTML stránky
  2. Prvky jazyka HTML
  3. Nástroje pro tvorbu stránek
  4. Struktura webové prezentace
  5. Navigace
  6. Grafika prezentace

HTML - HyperText Markup Language - hypertextový značkovací jazyk

Máte zájem o tvorbu webových stránek případně potřebujete vylepšit své online podnikání? Kontaktujte mě na martin.buchta@gmail.com

Struktura HTML stránky

HTML stránka – textový dokument s příponou htm(l) obsahující prvky jazyka HTML

Struktura

Prvky jazyka HTML

  • HTML znakčka=tag
  • Slouží pro definování, jak se má obsah zobrazit
  • Zapisují se do závorek < >, většina prvků je párových
  • tagy mohou kromě jména prvku obsahovat řadu atributů a samotný text
  • příklad: <jméno_prvku> ... </jméno_prvku> nebo <jméno_prvku jméno_atributu="hodnota"> ... </jméno_prvku> nebo <jméno_prvku>
  • Struktura - <html>, <head, ><body>, <!--Komentář-->
  • Hlavička -  HEAD
  • Obsah stránky - BODY
    • Písmo - <b>/<strong>, <i>/<em>, <u>
    • Text - <h1>, <h2> ... <h6>, <p>, <span>, <br />, <hr />
    • Bloky - <div>
    • Seznamy - <ul>, <ol>, <li>
    • Hypertextové odkazy - <a>
    • Obrázky - <img src="adresa obrázku" alt=“popis obrázku“ />
    • Tabulky - <table>, <tr>, <td>
    • Styly -  <style> (definice stylu: v samotné stránce<style type="text/css"><!-- tady je pak definice css--> ;
      odkaz na samostatný soubor se stylem: <link rel="stylesheet" href="styly.css" type="text/css" />)

Nástroje pro tvorbu stránek

  • Textové editory – Poznámkový blok, PSPad, Notepad++, HomeSite
  • Wysiwyg editory – What you see is what you get - "co vidíš, to dostaneš" – NVU, MS Frontpage->MS Expression , Adobe Dreamweaver
  • Online generátory
    • blog – bloguje.cz, estranky.cz, blogspot.com
    • web - Google Page Creator, FCK Editor
  • Generátory webů - Xara Webstyle, Incomedia Website

Struktura webové prezentace

struktura stránky

Grafika webové prezentace

JPG

  • ztrátová komprese
  • ideální na fotky a barevně pestré obrázky

GIF

  • pouze 256 barev, neztrátová komprese, průhlednost
  • ovládací prvky, jednoduché animace

PNG

  • slučuje výhody GIFu a JPEGu, neztrátová komprese, průhlednost a průsvitnost, malá velikost
  • v IE6 průhlednost nefunguje => málo použivaný

Navigace webové prezentace

  • základní stavební prvek každé webové prezentace
  • umožňuje návštěvníkovi rychlou orientaci v obsahu
  • hierarchická struktura
  • řadit položky od nejdůležitějších po méně důležité

Rozdělení navigace

  • Základní – menu po pravé/lévé straně, případně
  • Kontextová – odkazy na podobné téma
  • Drobečková – zobrazuje názvy nadřazených sekcí, pro orientaci kde se nacházíte a rychlé vrácení zpět
  • Mapa webu - vizuální pohled na strukturu celého webu
  • Rejstřík – obdoba mapy webu, jen jsou odkazy řazeny abecedně
  • Vyhledávání – nutnost pro větší weby