3. HTML – Kostra dokumentu

  • Každý HTML dokument má svou strukturu.
  • Jedná se zejména o definici hlavičky dokumentu a o definici samotné stránky.

HTML

  • Je párový tag, který ohraničuje celý dokument.
  • Dává prohlížeči vědět, kde začíná a končí HTML dokument.
  • Každá stránka by měla obsahovat na začátku <HTML> a na úplném konci </HTML>

HEAD

  • Každý HTML dokument obsahuje tzv. hlavičku.
  • Je určena znakem na začátku <HEAD> a na konci </HEAD>
  • V hlavičce bývá zahrnut titulek WWW stránky.

TITLE

  • Mezi párovým tagem TITLE  je uveden titulek hlavičky.
  • Bude v okně prohlížeče napsán v modrém pruhu
  • Měl by co nejlépe vystihovat obsah stránky

BODY

  • Párový tag
  • Mezi tagy BODY se nachází samotné tělo stránky
  • Tag BODY obsahuje několik atributů, které významně ovlivňují vzhled stránky
  • BACKGROUND – definuje adresu obrázku, který bude použit jako pozadí stránky

Příklad: <BODY BACKGROUND=“nazev obrazku.jpg“>

  • BGCOLOR – definuje, která bude použita jako pozadí stránky

Příklad: <BODY BGCOLOR=“black“>

  • TEXT – definuje barvu TEXTU, která bude použita na celou stránku

Příklad: <BODY TEXT=“yellow“>

  • V tagu BODY může být použito několik atributů za sebou

Příklad: <BODY BGCOLOR=“black“ TEXT=“blue“>

Úkoly:

​Příklad 1.1

  1. Vytvořte v programu poznámkový blok kostru dokumentu.
  2. Titulek pojmenujte jako první úkol.
  3. Do těla WWW stránky zkopírujte libovolný článek stažený z internetu.
  4. Úkol ulož do složky WWW jako priklad_1_1.html

Příklad 1.2

  1. Přepracujte předchozí úkol dle zadaných instrukcí a uložte ho opět  do složky WWW  jako priklad_1_2.html
  2. Změňte barvu písma odstavce
  3. Změňte barvu pozadí stránky

Příklad 1.3

  1. Přepracujte předchozí úkol dle zadaných instrukcí a uložte ho opět  do složky WWW  jako priklad_1_3.html
  2. Vlož na pozadí stránky libovolný (vhodný) obrázek stažený z internetu

Až budeš mít všechny úkoly, přihlas se ke kontrole. Budu chtít vidět:

a) v dokumentech ve složce s tvým příjmením vytvořenou složku WWW a v ní složku příklad 1

b) ve složce příklad 1 tři dokumenty

priklad_1_1.html

priklad_1_2.html

priklad_1_3.html + obrázek pro pozadí stránky

HTML Rozcestník