HaTMatiLka
Lekce 2
Lekce Nejjednodušší stránka
Tak, jako je tradičním začátečnickým programem „Hello, world!”, je tradičním začátkem HaTMatiLky prázdná stránka. To je tak: aby prohlížeč poznal, že má tu čest s HTML, musí stránka obsahovat příslušnou hlavičku. Pokud ji nemá, je považována za prostý, neformátovaný text a také tak zobrazena (většinou černý text na šedém pozadí). Proto je potřeba i prázdnou stránku formátovat. K tomu slouží tagy, tedy formátovací příkazy. Píší se do ostrých závorek (mezi znaménka větší/menší). Ve zdrojovém tvaru (tedy tak, jak se píše) vypadá stránka takto:
                    
<HTML>
  <Head>
    <Title> Titulek </Title>
  </Head>
  <Body>
    Hello, world!
  </Body>
</HTML>
<HTML>…</HTML>
Označuje dokument HTML. Všechno před tím je považováno za neformátovaný text.
<Head>…</Head>
Hlavička dokumentu. Sem se umísťují části, které nejsou přímo součástí stránky (nejsou vidět) — například titul stránky.
<Title>…</Title>
Titulek. Bude zobrazen v záhlaví okna (zcela nahoře).
<Body>…</Body>
Tělo dokumentu. Mezi tyto tagy je umístěn text dokumentu (a vše, co má být vidět).
vokaž

Koumavé duše zajisté zjistily, že tento příklad neukazuje skutečně nejjednodušší stránku. Popravdě řečeno, lze vynechat titulek, možná celou hlavičku… Ještě, když vynechám ukončení stránky (</Body></HTML>), zobrazí se stránka správně. To proto, že obecně není zaručeno, že do prohlížeče dorazí celá (úplná) stránka a tak si program poradí i s tím, co mu dorazilo, byť to nemá konec. (Ostatně, jsou stránky na Internetu, kde člověk ani na konec nečeká.)

Domácí úkol:
Zredukovat dokument „jak jen to jde”. Nápis Hello! se však musí zobrazit správně.


Hello, world! — podruhé

Předchozí příklad byl dost hanebný. Vlastně bylo těžké odlišit HaTMatiLku od obyčejného textu. Což je mi skvělou záminkou k vylepšování. Předně: šedivý (nebo jaký) podklad se mi nelíbí. Představuji si velký žlutý nápis na černé ploše. Ne úplně navrchu a hlavně — uprostřed řádku. (To si navymýšlím…) A taky by neškodilo, udělat pod ním nějakou čáru, podtržení, prostě to oddělit.

Ano, to je správný postup. Nejdřív je potřeba si vymyslet jak má stránka vypadat a teprve potom se snažit, aby tak skutečně vypadala. Bezhlavé zkoušení všeho možného, vede k šeredným, nepřehledným a přeplácaným stránkám; tomu se pokusíme vyhnout.

                    
<HTML>
  <Head>
    <Title> HTML - 2.2 </Title>
  </Head>
  <Body bgcolor="000000" text="FFFF00">

	<center>
	<font size="+4">
		<br>
		<br>
		<br>
		<br>
		Hello, world!
		<br>
		<hr>

	</font>
	</center>

  </Body>
</HTML>
<font>…</font>
Nastavení písma (fontu). Parametry:
size= velikost
color= barva
<br>
Line break., zlom řádku, nový řádek.
<hr>
Horizontal line, vodorovná čára. Odděluje části stránky. (Pozor, svislá čára neexistuje!)
<center>…</center>
Zarovnání doprostřed, vystředění.
Parametry „těla dokumentu”
Tag <Body> může mít několik parametrů. Zde použité jsou
bgcolor= pozadí (papír, podklad) dokumentu; barva stránky
text= barva písma
vokaž
Barvy, barvičky

Stránka získala na barevnosti. Jak je v příkladu vidět, barvy se zadávají jakýmsi kódem. (Dále budu psát RRGGBB nebo rrggbb, protože jde o zápis RGB.) Tím není nic jiného, než hexadecimální (šestnáctkový) zápis složek Red-Green-Blue, ze kterých se skládají všechny barvy na obrazovce. Někdy se této „trojici dvojic” říká triplet.

Stručně lze říct, že každá dvojice čísel (00..FF) označuje úroveň jedné složky, 00 znamená, že tato část v barvě chybí, FF značí, že více jí už být nemůže. Takže 000000 je černá (žádná ze složek tu není zastoupena) a FFFFFF je bílá (svítí, co to jde).

Pro přehlednost nabízím ukázku:
  červená žlutá zelená azurová modrá fialová bílá
světlá FF0000
XXXX
FFFF00
XXXX
00FF00
XXXX
00FFFF
XXXX
0000FF
XXXX
FF00FF
XXXX
FFFFFF
XXXX
tmavší AA0000
XXXX
AAAA00
XXXX
00AA00
XXXX
00AAAA
XXXX
0000AA
XXXX
AA00AA
XXXX
AAAAAA
XXXX
tmavá 880000
XXXX
888800
XXXX
008800
XXXX
008888
XXXX
000088
XXXX
880088
XXXX
888888
XXXX
temná 440000
XXXX
444400
XXXX
004400
XXXX
004444
XXXX
000044
XXXX
440044
XXXX
444444
XXXX

Kromě tohoto krkolomného zápisu je definováno dalších šestnáct barev „slovně”: Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow a Aqua.

Přestože barvy se zadávají True color, zobrazují se podle schopností monitoru. Ostatně, pokud používáte Windows v šestnácti barvách, zcela jistě vidíte, o čem mluvím. Proto jest záhodno barvami šetřit a vždy si rozmyslet, jako to bude vypadat šestnáctibarevně!

Domácí úkol:
Vyzkoušet v dokumentu z druhého příkladu různé barevné kombinace. Nalézt takovou, která se dobře čte, která dobře vypadá.

Obsah
Lekce 1

prostá stránka
příklad
úkol 1
Hello!
příklad
barvy
úkol 2

Lekce 3 Lekce 4
Lekce 5
Lekce 6
Lekce 7
Lekce 8
Lekce 9
Lekce 10
Lekce 11
Lekce 12

 Lekce 3
© Robert R. Šimek, 1997