Již od základní školy nám vážení pedagogové vštěpovali do hlavy, že bychom při psaní slohové práce měli celý text vhodně rozdělit do několika odstavců. Odstavec je totiž základní jednotkou, která se využívá při logickém členění textu.
K rozdělení textu do odstavců se v HTML používá element
p. Prohlížeč před zobrazením
každého odstavce textu provádí následující úpravy:
-
všechny konce řádků převede na mezery;
-
pokud bezprostředně za sebou následuje více mezer, nahradí je mezerou jedinou;
-
nakonec takto získaný text odstavce zalomí tak, aby se vešel do okna prohlížeče.
Praktický důsledek tohoto postupu je, že mezi slova můžeme psát mezer kolik chceme, vždy se však zobrazí pouze jedna. Rovněž můžeme ukončovat řádky na libovolném místě – konce řádek v prohlížeči stejně budou většinou na jiných místech.
Tip
Pro větší přehlednost je vhodné odstavce kromě tagu <p> oddělovat i prázdnou řádkou. HTML
kód delších stránek pak bude mnohem přehlednější.
Abychom si vše demonstrovali, následující „hustá“ forma zápisu
<p>První odstavec.</p><p>Druhý je delší.</p><p>A třetí ihned následuje.</p>
dává v prohlížeči stejné výsledky jako tato přehlednější a místy trochu rozvláčná forma:
<p> První odstavec.</p> <p> Druhý je delší.</p> <p> A třetí ihned následuje. </p>
Vidíme tedy, že se mezera za počátečním tagem na konci řádky ignoruje. A obdobně se ignoruje i mezera na konci řádky, která předchází ukončovacímu tagu na další řádce.
Vždy je lepší zapisovat HTML kód přehledně, proto by většina profesionálů zapsala předchozí tři odstavce do dokumentu nejspíš takto:
<p>První odstavec.</p> <p>Druhý je delší.</p> <p>A třetí ihned následuje.</p>
To, že se text zarovnává podle aktuální velikosti okna, je
velice užitečná vlastnost – HTML dokument lze zobrazit na obrazovkách
s různým rozlišením a velikostí – počínaje 30″ monitorem
a konče displejem iPhone či jiného kapesního gadgetu. V některých
případech však potřebujeme, aby se řádka zalomila na určitém přesně
daném místě. Požadovaného efektu dosáhneme použitím tagu <br> v místě požadovaného zlomu. Malá
ukázka:
S naší firmou se můžete spojit na adrese<br> Židlička, a.s.<br> Kulatá 7<br> 379 12 Dolní Horní
dopadne v prohlížeči takhle:
V naší první stránce jsme kromě odstavců použili ještě
jeden element, který sloužil k členění dokumentu. Jednalo se
o element h1 použitý k vytvoření nadpisu.
HTML nám dává k dispozici nadpisy šesti úrovní. Nejdůležitější je
přitom nadpis první úrovně (h1) a nejméně
důležitý je nadpis šesté úrovně (h6). Nadpisy vyšší
úrovně (s nižším číslem) jsou obvykle zobrazovány větším
a výraznějším písmem. Nadpis můžeme obecně zapsat jako
<hn>text nadpisu</hn>
kde n je číslo úrovně od jedné do
šesti. Na obrázku 8 – „Ukázka všech šesti úrovní nadpisů“ si
můžeme prohlédnout, jak se jednotlivé úrovně nadpisů zobrazí
v prohlížeči. Pro procvičení si ukážeme i zápis
v HTML:
<!DOCTYPE html> <html> <head> <title>Ukázky nadpisů různých úrovní</title> </head> <body> <h1>H1 -- Nadpis první úrovně</h1> <h2>H2 -- Nadpis druhé úrovně</h2> <h3>H3 -- Nadpis třetí úrovně</h3> <h4>H4 -- Nadpis čtvrté úrovně</h4> <h5>H5 -- Nadpis páté úrovně</h5> <h6>H6 -- Nadpis šesté úrovně</h6> </body> </html>
První nadpis, který v dokumentu použijeme, by měl být
h1. Při následném jemnějším členění
dokumentu pomocí dalších úrovní nadpisů bychom neměli úrovně nadpisů
přeskakovat.
Varování
Používání nadpisů páté a šesté úrovně je poněkud problematické – zobrazují se většinou menším písmem než je běžné písmo textu odstavce. Dokument pak trošku ztrácí na přehlednosti. V těchto případech je zcela na místě zvážit možnost rozdělení jednoho dokumentu do několika samostatných. Tím snížíme počet použitých úrovní nadpisů o jeden. Měli bychom si zapamatovat, že příliš hluboká úroveň zanoření nadpisů v jednom dokumentu znesnadňuje orientaci v textu.
Tip
Je ustáleným zvykem, že první nadpis v dokumentu je totožný s titulkem (názvem) stránky. Výjimku tvoří dokumenty, které jsou částí nějaké větší ucelené skupiny dokumentů. Nadpis dokumentu by měl odpovídat názvu kapitoly nebo části a titulek by měl dokument identifikovat v širším kontextu. Pro titulek se osvědčilo použít název celé skupiny dokumentů doplněný o název aktuálního dokumentu.
Pokud chceme od sebe dvě části stránky oddělit opticky
výrazněji, můžeme použít tag <hr>.
Ten do stránky vloží horizontální čáru přes celou šířku okna
prohlížeče.
