<< 15.Internet a služby Internetu | Témata VYT | 17.Počítačová komunikace a sítě >>

16. Tvorba WWW prezentace

  • služba WWW, HTML, editory , struktura stránky, možnosti rozložení informací
  • struktura webové prezentace, navigace, grafika a design prezentace

Služba WWW

  • WWW - World Wide Web - celosvětová informační internetová služba
  • Web - prezentace instituce, firmy, osoby ... formou www stránek
  • Doména - popisná adresa webového místa
    • generické, národní, druhého a třetího řádu - COM, INFO, CZ, UK, DE, SPSNOME.CZ, INFO.SPSNOME.CZ
    • registrátor - registrace, správa - správce domény - NIC.CZ, DOMENY.CZ, ENDORA.CZ ...
  • Webhosting - diskový prostor serveru poskytovatele pro vystavení souborů prezentace

HTML

  • hypertextový značkovací jazyk pro tvorbu www stránek - Hypertext Markup Language
  • Tagy - normalizované značky pro formátování a rozložení obsahu webové stránky
    • většina tagů párové značky - <p> ...text... </p> příklad vyznačení textového odstavce
  • Atributy - vlastnosti tagů - <font color="red" face="Arial"> červené písmo, font Arial

Typy značek

  • Stylové - <B>, <I>, <U>, <FONT>, <STYLE>, <BR>
  • Strukturální - <HEAD>, <BODY>, <H1> ...<H6>, <P>, <UL>, <OL>, <LI>, <TABLE>, <TR>, <TD>
  • Informační - <!DOCTYPE>, <HTML>, <TITLE>, <META>, <!-- komentář -->

HTML editory

  • editory kódu - PsPad, Code Lobster, HomeSite
    • šablony kódu, doplňování a kontrola kódu, barevné zvýraznění
  • vizuální editory - MS FrontPage, SharePoint Designer, Adobe DreamWeaver
    • šablony vzhledu, vizuálním (wysiwyg) prostředí, automatické generování kódu

Struktura stránky

  • Hlavička <head> ... </head>
    • informace pro prohlížeč, vyhledávače a webový server
    <title> - titulek
    <meta ....> - znaková sada, jazyk, popis, klíčová slova ...
    <link ....> - připojení stylů a skriptů
    <style ...> - definice stylů stránky
  • Tělo <body> ... </body>
    • Hypertextový odkaz
    <A href="http://google.cz">Vyhledávač</A>
    • Obrázek
    <IMG src="logo.gif">
Zvětšit

Rozložení obsahu stránky

  • Rámce - zobrazení obsahu více stránek v jednom - záhlaví, menu, obsah
    • zastaralé řešení, jediná adresa pro všechny stránky, problémy s vyhledáváním informací
  • Tabulky - rozložení obsahu do buněk tabulky
    • pomalejší načítání stránek, omezené možnosti nastavení vzhledu
    • <table><tr><td>1.buňka</td><td>2.buňka</td></tr><tr><td>3.buňka</td><td>4.buňka</td></tr></table>
  • Bloky řízené kaskádovými styly - moderní řešení s možností nastavení designu
    • využití bloků <div> a pravidel kaskádových stylů - position, width, height, float ...
    • připojení CSS pravidel
      • přímé - atribut style v HTML tagu - <H1 style="color:red; font-weight:bold;">
      • stránkové - tag style v hlavičce stránky - <STYLE H1 {color:red; font-size:20px;} />
      • externí - připojení souboru css pomocí tagu <LINK .... href="styl.css" />

Webová prezentace

Struktura webu

Zvětšit

Navigace webu

  • Hypertextové odkazy - tlačítka menu, texty a obrázky pro zobrazení jiné www stránky
    • <a href="adresa_odkazu">Text odkazu</a>

Design webu

  • Obrázky - úsporná grafika - JPG, GIF, PNG
    • <img src=obrazek.jpg" />
  • Pravidla CSS3
    • barevné přechody, průhlednost, stíny, animace menu
  • Javascript
    • využití javascriptových knihoven - JQuery, MooTools
    • fotogalerie, animace, formuláře

Školní stránky

RSS