HaTMatiLka
Lekce 3
Lekce

Text v HaTMatiLce nebývá nečleněný, jednolitý, dlouhý blok od začátku až k úplnému konci. Často jde o články, oddělené nadpisy.

Nadpisy
Původní použití formátu HTML bylo publikování vědeckých článků. Ty se skládaly z textu, nadpisů, podnadpisů a pod-podnadpisů.

Prosím, všimněte si krásy češtiny! Nad písmem je nad-pis. Pod ním je pod-nad-pis. Pod ním by byl pod-pod-nad-pis. Mezi nad-pisem a pod-nad-pisem by měl být nad-pod-nad-pis… Půlení intervalu. :-)

Velikost nadpisů
Přehled nadpisů:

<H1>…</H1>

<H2>…</H2>

<H3>…</H3>

<H4>…</H4>

<H5>…</H5>
<H6>…</H6>
Normální písmo bez jakéhokoliv dalšího formátování. (To aby byl vidět ten rozdíl.)

Samozřejmě, že hlavní nadpis by měl být největší, další úrovně by měly být menší a menší… Základních úrovní je šest. Nadpisy jsou uzavřeny do párového tagu <H>…</H>, podle úrovně označovaného jako <H1>…</H1> až <H6>…</H6>.

Jak přesně bude nadpis vypadat záleží hlavně na nastavení browseru toho, kdo si stránku prohlíží. (Jak je to na vašem prohlížeči je vidět v rámečku vpravo — doufám.) Většině prohlížečů stačí zadat jméno (typ) písma pro základní text a ostatní se přizpůsobí samo. Jinde lze zadat pro nadpisy extra písmo a Mosaic dokonce potřebuje nastavit každou úroveň zvlášť. A to nemluvím o exotických browserech, s nimiž, snad, nepřijdete do styku. (Jedna výjimka: kdo se připojuje k Internetu přes Video OnLine, dostane i firemní prohlížeč, který je však lépe zahodit! ;-)

Zarovnání nadpisů
Kromě velikosti se mohou nadpisy lišit i tím, kam budou zarovnány. Původní, vědecké nadpisy článků a odstavců, byly prostě zarovnány doleva a stačilo to. Jakmile však HaTMatiLka pronikla mezi širší okruh uživatelů, bylo záhodno, aby mohly být nadpisy zarovnané pěkně uprostřed řádku. Nebo vpravo (ale to téměř není potřeba). Proto byl do tagu <H> přidán paramter Align, který může být left (normální nadpis vlevo), center (nadpis pěkně uprostřed) či right (pro netypické nadpisy při pravém okraji.)

Zarovnání nadpisů:
<H5 align="left">…</H5>
Nadpis byl zarovnán doleva.
<H5 align="center">…</H5>
Nadpis byl zarovnán doprostřed.
<H5 align="right">…</H5>
Nadpis byl zarovnán doprava.

Je dobré si uvědomit, že centrování nadpisů není absolutní, střed mezi pravým a levým okrajem stránky, ale prostředek mezi okraji řádku, tedy například od obrázku vpravo k tabulce vlevo. V praxi tak mohou být nadpisy několika odstavců pěkně rozházené, místo, aby „zařezávaly” jeden pod druhým.

Nadpisy u pravého okraje jsou zajímavým efektem. Běžný čtenář totiž čeká nadpisy tam, kde je zvyklý. Pravá strana dokumentu je však „prázdnější” a nadpis tak dostatečně vynikne.

Okolo nadpisu (nahoře i dole) bývá vynechané místo (asi tak na jeden řádek). Za nadpisem není proto třeba uvádět zlom řádku tagem <br>.

Vodorovné čáry

Tento efekt byl použit v minulé lekci, takže jej není třeba zvlášť představovat. Tagem <hr> snadno a rychle vyrobíme instantní linku od pravého okraje k levému. Ne vždy však potřebujeme právě takovou.

Proto je možné čáru všelijak zkracovat, natahovat a barvit. Následující příklad poměrně dobře ukazuje, co všechno si můžeme s obyčejnou horizonrální linkou dovolit.

Příklad
                    
<H1 align="right">Čáry a čárky</H1>
<hr width="50%" align="right">

<hr noshade width="13%"  color="FF0000" size="1">
<hr noshade width="38%"  color="FF8800" size="3">
<hr noshade width="61%"  color="FFFF00" size="5">
<hr noshade width="79%"  color="88FF00" size="7">
<hr noshade width="92%"  color="00FF00" size="9">
<hr noshade width="99%"  color="00FF88" size="10">
<hr noshade width="99%"  color="00FFFF" size="10">
<hr noshade width="92%"  color="0088FF" size="9">
<hr noshade width="79%"  color="0000FF" size="7">
<hr noshade width="61%"  color="8800FF" size="5">
<hr noshade width="38%"  color="FF00FF" size="3">
<hr noshade width="13%"  color="FF88FF" size="1">

<hr width="50%" align="left">
<H1 align="left">Čáry a čárky</H1>

<hr>
noshade
Vyrobí nestínovanou, „placatou” čáru.
size="nn"
Síla (tloušťka) čáry.
width="nn"
Šířka čáry v bodech nebo (radši) procentech width="nn%".
align="left|center|right"
Zarovnání vlevo|doprostřed|vpravo (doprostřed se zadávat nemusí).
color="RRGGBB"
Definuje barvu čáry a má stejný efekt, jako parametr noshade.
vokaž

Příklad byl poněkud zkrácen, jak si zajisté všimli ti, kdo si spočítali čáry v ukázce a v příkladu.

Domácí úkol:

Nastal ten správný čas na založení si vlastní homepage, tedy domovské stránky.

Tato stránka nechť je uložena v souboru index.htm ve veřejném adresáři (aby i ostatní viděli, jak má taková stránka vypadat;-). Jméno v záhlaví stránky by mělo být stejné, jako jméno či přezdívka autora.

Na stránce by měly být základní osobní údaje (jméno, příjmení, přezdívka, věk…) To vše v horní části stránky.

Oddělovač. (Pro nedůvtipné: čára :-))

Krátký text na téma „Kdo jsem, co dělám a co mám rád(a)” — aby každý věděl, s kým má tu čest.

To prozatím stačí, další vylepšení přijdou v lekcích příštích.

Obsah
Lekce 1
Lekce 2

nadpisy
čáry <HR>
příklad
úkol

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

 Lekce 4
© Robert R. Šimek, 1997