Nadpisy a formátovanie textu

Najčastejším obsahom webových stránok je text. Text by mal byť spravidla obalený v elemente p, ktorý je na to určený. Rád by som upozornil na fakt, že jednotlivé elementy neslúžia len na prehľadnosť kódu pre tvorcu webstránky (programátora), ale aj na určenie typu elementu. Webstránka je čítaná (skúmaná) vyhľadávačmi (napríklad Google). Vyhľadávač danú stránku číta, analyzuje, aké elementy obsahuje a ukladá si o nej informácie. Na to je dobré naučiť sa správne používať tagy od začiatku, aby sme tým docielili správne štruktúrovanú webovú stránku.

Každý text (článok), ale v podstate aj webstránka alebo jej podstránka by mala mať svoj nadpis, ktorý ju jednoznačne identifikuje. Keďže vieme, že text by mal byť v elemente p, mohli by sme jednoducho našu webstránku, ktorá by obsahovala nejaký článok s nadpisom, naprogramovať takto:

<p>Nadpis clanku</p>
<br>
<p>Toto je text nasho clanku</p>

Pre nadpisy však existuje v jazyku HTML samostatná párová značka h (heading), ktorá dáva najavo, že daný text je nadpis. Keďže však článok, webstránka alebo daná podstránka má vo väčšine viac nadpisov a podnadpisov, táto značka sa používa spolu s číslom od 1 do 6. Dané číslo uvádza jednak veľkosť textu nadpisu a na druhej strane jeho dôležitosť (úroveň). Menšie číslo znamená vyššiu dôležitosť, takže napríklad h1 je najväčší nadpis na stránke (hlavný nadpis – prvý nadpis) a mal by byť spravidla na stránke iba jeden. Tag h2 určuje nadpis druhej kategórie (podnadpis), h3 menší a tak ďalej. Štandardný článok by mohol vyzerať nakódovaný takto:

<h1>1 Hlavny nadpis clanku</h1>
<p>Uvod k clanku ...</p>
<br>
<h2>1.1 Prvy podnadpis</h2>
<p>Clanok k prvemu podnadpisu</p>
<br>
<h3>1.1.1 Nadpis tretej kategorie</h3>
<p>Clanok k nadpisu tretej kategorie</p>
<br>
<h2>1.2 Druhy podnadpis</h2>
<p>A tak dalej</p>
<br>
<h4>Nadpis stvrtej kategorie</h4>
<h5>Nadpis piatej kategorie</h5>
<h6>Nadpis siestej kategorie</h6>

Možno ste si všimli zopár vecí rozdielnych od textu, ktorý sme mali iba v značke p. Ako už bolo spomenuté, každý rôzny nadpis (h1, h2...) má inú veľkosť podľa dôležitosti (kategórie) nadpisu. Druhá vec je, že text v nadpise je automaticky tučný (bold), tak ako to spravidla býva vo väčšine textových dokumentov pre zvýraznenie dôležitosti textu (nadpisu). Posledná vec za zmienku je, že text rovnako ako značka p za sebou zalomí riadok. Okrem toho je vidieť aj malú medzeru – odsadenie (niečo ako riadkovanie vo Worde) medzi riadkom, na ktorom je text v nadpise a medzi riadkom, na ktorom je text napríklad v paragrafe. Túto medzeru v sebe defaultne (prednastavene) obsahuje aj značka p. Prečo to tak je a ako to zmeníme, sa dozvieme v časti jazyka CSS, nateraz nám to iba stačí vedieť. Názorný rozdiel je vidno na tomto príklade:

<h3>Nadpis h3</h3>
<p>Text v p</p>
text bez elementu
<br>
text bez elementu na novom riadku
<p>Text v p</p>

Ako je vidieť vo výsledku tohto kódu, za nadpisom a aj za paragrafom je medzera aj medzi riadkami, narozdiel od textu bez elementu oddeleného značkou br. Vrátil by som sa ešte k tomu, že text v nadpise ja tučný. Niekedy je praktické mať časť textu zvýraznenú aj v rámci textu. Používame to na zvýraznenie nejakej časti textu na znázornenie dôležitosti, resp. dôležitosti oproti ostatnému textu. Tučnosť písma vieme zabezpečiť párovou značkou b (bold). Text, ktorý chceme mať tučným formátom, iba obalíme do tejto značky. Podobne sa používa aj značka i pre kurzívu (italic – naklonené písmo) a ako poslednú si ukážeme značku mark (marked) pre zvýraznený text (highlight – ako zvýraznovačkou v skriptách). Poďme si to vyskúšať:

<p>
Normalny text, <b>tato cast je tucna (zvyraznena).</b>
</p>
<p>
Normalny text, <i>tato cast je kurzivou (italic).</i>
</p>
<p>
Normalny text, <mark>tato cast je zvyraznena (marked).</mark>
</p>
<p>
Normalny text, <b><i><mark>moze to byt aj spolu (marked).</mark></i></b>
</p>