<< 10.Počítačová grafika a multimédia | Témata IT | 12.OS Windows >>

11. Webová prezentace

  • Základní pojmy - WWW, HTML, web, hosting a doména
  • HTML - tagy a atributy, značky pro formátování, odkazy, obrázky, tabulky
  • Webová stránka - struktura a prvky stránky, uspořádání webu
  • Tvorba webu - HTML editory, přístupnost webu, návštěvnost webu

Základní pojmy

  • WWW - World Wide Web - celosvětová informační internetová služba
  • HTML - Hypertext Markup Language - hypertextový vyznačovací jazyk
  • 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

  • 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ář -->
  • Hypertextové odkazy - tlačítka menu, texty a obrázky pro zobrazení jiné www stránky
    • <a href="adresa_odkazu">Text odkazu</a>
  • Obrázky - úsporná grafika - JPG, GIF, PNG
    • <img src=obrazek.jpg" />
  • Tabulky - uspořádání obsahu webové stránky
    • <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>

Webová stránka

  • Struktura
    • 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

Tvorba webu

  • HTML editory
    • editory kódu - PsPad, HTML Edit, 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
  • Přístupnost webu
    • obsah - zajímavost, přehlednost, čitelnost a vzhled
    • validita - zápis kódu podle norem HTML, stejné zobrazení v různých prohlížečích
    • dostupnost - zajímavá adresa, optimalizace pro vyhledávače, registrace v katalozích
    • ovladatelnost - přehlednost, jednoduchost, logika, plná kontrola uživatele
  • Návštěvnost webu
    • SEO - Search Engine Optimization - optimalizace kódu pro vyhledávače
      • informace pro vyhledávače v hlavičkách - Titulek, Popis, Klíčová slova
      • registrace do vyhledávačů a katalogů - Google, Seznam, Centrum, Jyxo
      • soubory map stránek webu - website.xml

Školní stránky

RSS