Tvorba WWW str

1
Tvorba WWW stránekÚVOD

• IKT 4.rocník

2
Obsah

• Webová (HTML)stránka
• Kód HTML
• Tvorba HTML kódu
• Webové prohlížece
• Základní termíny v HTML
• Struktura webové stránky

3
Webová (HTML)stránka

• HTML stránka je textový soubor obohacený o tagy a
  atributy, které urcují význam textu a vzhledu
  celé stránky
• Soubory mají príponu htm, html a slouží jako
  návod pro sestavení webové stránky
• Adresárová struktura
• hlavní adresár WEB
• - index.htm (default.html)
• - první.htm zdrojový kód
• - druha.htm
• podadresáre IMAGE
• - FOTO binární data
• - DOCUMENT

4
Webová stránka

• vznikla roku 1989 ve výzkumném stredisku CERN v
  Ženeve (tedy k výzkumným úcelum)
• Autor Tim Berners Lee (prišel na to jak vzájemne
  provázat pomocí odkazu více dokumentu na ruzných
  pocítacích a potom vytvorili první prohlížec
  pomocí kterého se mohli dokumenty snadno
  prohlížet a precházet od jednomu dokumentu k
  druhému)
• O standarty HTML stará konsorcium W3C
• doporucuje nové standarty HTML a tagy které by
  se meli a které nemeli používat
• Jazyk HTML se neustále vyvíjí, standardní verze
  HTML 3.2, 4, 4.1, a XHTML 1.0, XHTML 2

5
Kód HTML

• H hyper
• T text
• M markup
• L language
• HTML je znackovací (nikoliv programovací) jazyk
• Kód popisuje grafickou podobu stránky v
  prohlížeci
• Má textový formát, na binární data jen odkazuje
• Má presnou syntaxi, kterou je duležité dodržovat
  a zároven se prizpusobuje

6
Tvorba HTML kódu

• ASCII textový editor - POZNÁMKOVÝ BLOK
• - WordPad
• - MS WORD
• Editor HTML kódu
• - editory WYSIWIG
• - MS FrontPage
• - Max html Beauty
• - 1st page 2000
• - HTML builder XP
• - editory pracující s kódem
• - Allaire HomeSite

7
WYSIWYG

• What
• You
• See
• Is Co vidíš, to dostaneš.
• What
• You
• Get

8
Webové prohlížece

• Program zobrazující webové stránky
• Dekóduje HTML kód
• Prevádí HTML kód do grafické podoby
• MS Internet Explorer
• Netscape Navigator
• Opera
• Mozilla

9
SHRNUTÍ 1Co bude potreba?

• jednoduchý textový editor ASCII
• poznámkový blok (notepad)
• editory s podporou HTML
• MS FrontPage
• strukturní editor
• Allaire HomeSite
• internetový prohlížec
• Internet Explorer, Mozilla, Opera a Netscape

10
SHRNUTÍ 2Co nebude potreba?

• pripojení k internetu, www stránky mužete
  vytváret a publikovat z jiného pocítace s
  pripojením.
• pro umístení stránek na internet nebudete
  potrebovat vlastní domému, protože freeweby vám
  poskytnou prostor pro vaše stránky zdarma.
• na vytvárení www stránek není potreba výkonný
  pocítac klidne postací i starší.

11
Základní termíny v HTML

• TAG - Základní znacka jazyka html zapisuje se do
  lt gt (je vetší a je menší)
• ATRIBUT je zapsán prímo do tagu a nastavuje
  nejakou jeho vlastnost
• ELEMENT - vše mezi úvodním a ukoncovacím tagem
• ltpgttento text je tedy elementlt/pgt
• lth1gtnadpis je také elementlt/h1gt

12
Struktura webové stránky

• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
  Transitional//EN"gtlthtmlgtltheadgt      
  lttitlegttitulek html dokumentult/titlegtlt/headgtltbod
  ygt telo stránky (vše co se na stránce
  zobrazí)lt/bodygtlt/htmlgt
• index.htm index.htm

13
Verze HTML

• První rádka
• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
  Transitional//EN"gt
• urcuje o jakou verzi HTML se jedná
• lthtmlgtltheadgt       lttitlegttitulek html
  dokumentult/titlegtlt/headgtltbodygt telo stránky
  (vše co se na stránce zobrazí)lt/bodygtlt/htmlgt

14
Webová stránka

• Celá stránka se zacíná párovým tagem lthtmlgt a
  ukoncuje se tagem lt/htmlgt
• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
  Transitional//EN"gt
• lthtmlgtltheadgt       lttitlegttitulek html
  dokumentult/titlegtlt/headgtltbodygt telo stránky
  (vše co se na stránce zobrazí)lt/bodygtlt/htmlgt

15
Hlavicka

• HTML se skládá z hlavicky a hlavicka se zapisuje
  mezi párové tagy ltheadgt a lt/headgt
• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
  Transitional//EN"gtlthtmlgt
• ltheadgt       lttitlegttitulek html
  dokumentult/titlegtlt/headgt
• ltbodygt telo stránky (vše co se na stránce
  zobrazí)
• lt/bodygtlt/htmlgt

16
Telo stránky

• HTML se skládá z tela stránky a telo stránky se
  zapisuje mezi párové tagy ltbodygt a lt/bodygt (telo
  stránky je vše co se na stránce zobrazí)
• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
  Transitional//EN"gtlthtmlgtltheadgt      
  lttitlegttitulek html dokumentult/titlegtlt/headgt
• ltbodygt vše co se na stránce zobrazí
• lt/bodygt
• lt/htmlgt

17
Nadpis stránky

• V hlavicce se urcuje název stránky a zapisuje se
  mezi
• párové tagy lttitlegt a lt/titlegt
• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
  Transitional//EN"gtlthtmlgtltheadgt
•        lttitlegttitulek html dokumentult/titlegtlt/hea
  dgtltbodygt telo stránky (vše co se na stránce
  zobrazí)lt/bodygtlt/htmlgt

18
SHRNUTÍ 3Struktura webové stránky?

• Webová stránka lthtmlgt, lt/htmlgt
• Hlavicka ltheadgt, lt/headgt
• Titulek lttitlegt, lt/titlegt
• Telo ltbodygt, lt/bodygt
• Vše psát na nové rádky