Textové elementy

Ako už bolo spomenuté, základom každej webovej stránky je vo väčšine text. Základný element pre text je odstavec (paragraph), ktorý určuje značka (tag) <p>. Každý tag v jazyku HTML sa začína zatvoreným zobáčikom (<) a končí sa otvoreným (>). Medzi tieto dva znaky sa zadáva identifikátor značky, v našom prípade písmeno p (paragraph). V jazyku HTML sa značky (tagy) rozdeľujú na párové a nepárové. Párové sú tie, ktoré musia mať značku aj na začiatku elementu a aj na konci. Nepárové sú tie, kde stačí použiť značku iba na začiatku elementu, pred určením jeho obsahu. Náš text obalený v elemente paragraf bude teda vyzerať nasledovne. Na začiatku bude zatvorený zobáčik, písmeno p a otvorený zobáčik. To je začiatočný tag pre paragraf. Za ním nasleduje ľubovoľný text. Koniec paragrafu označíme uzatvorením nášho párového tagu. Rozdiel medzi otvárajúcim tagom a zatvárajúcim je, že za prvým zobáčikom nasleduje lomítko (/ - slash), čiže to bude vyzerať </p>. Kód nášho elementu paragraf bude teda vyzerať takto:

<p>Toto je nasa prva webstranka!</p>

Keď kliknete na tlačítko pre načítanie nášho kódu (See result), v pravom bloku sa oproti kódu z predchádzajúcej kapitoly nič nezmení, výsledok bude rovnaký. Vizuálne to vyzerá rovnako, ale v praxi (v kóde) je to iné, pretože náš text je vnorený do elementu typu paragraf, s ktorým budeme neskôr vedieť viac pracovať. Keby sme si text z predchádzajúceho príkladu skopírovali viackrát za sebou, rovnako by vyzeral aj vo výsledku. Ak by sme ale skopírovali text obalený v elemente typu paragraf viackrát za sebou, výsledok by už vyzeral odlišne. Element typu paragraf má tú vlastnosť, že za sebou zalomí riadok. To znamená, že ak dáme za sebou viac paragrafov, každý nasledujúci sa začne na novom riadku. Skúste zadať dva paragrafy po sebe.

<p>Toto je nasa prva webstranka!</p>
<p>Toto je uz na novom riadku</p>

Za zalomením riadkov v texte je troška viac teórie, vo veľkej miere to bude závisieť od dizajnu a rozmerov elementov na stránke, to je ale jazyk CSS ku ktorému sa dostaneme v ďalšom semestri. Možno vás napadlo, že čo keď chceme mať dlhší text v jednom elemente typu paragraf, ale chceme konkrétne na jednom mieste zadefinovať, aby sa daný text začal na novom riadku. To sa dá docieliť pomocou značky br (break – zalomiť). Tento tag je na rozdiel od paragrafu nepárový, takže nie je nutné daný tag aj uzavrieť. Po zadaní tagu <br> kdekoľvek na stránke ide nasledujúci obsah do nového riadku. Ak napríklad zadáme tieto tagy viackrát po sebe, toľkokrát sa aj zalomí riadok. V nasledujúcom riadku si vyskúšame oba prípady, skúste si teda tento kód:

<p>Toto je nas dlhy text. <br> Tuto vetu chceme mat na novom riadku.</p>
Tento text nie je v paragrafe.
<br>
<br>
<br>
Tento je o dva riadky nizsie.

Ako prvé sa zobrazí náš paragraf, za ktorým sa zalomí riadok, takže text mimo elementu bude v novom riadku. Značkou br v strede paragrafu sme prikázali, aby sa na danom mieste zalomil riadok a tým pádom sa nasledujúci obsah zobrazil na novom riadku. Za textom mimo paragrafu sme trikrát použili značku br, to znamená, že sa trikrát posunieme na nový riadok. Keďže náš text nie je v paragrafe, prvé br nás dá iba do nového riadku a nasledujúce dva nám spravia dva przádne riadky. Pri tomto elemente by som upozornil na jeden dôležitý fakt. Prehliadače v kóde jazyka HTML ignorujú viacnásobné medzery a nové riadky (enter v texte – nový odstavec). To znamená, že ak si náš kód odriadkujeme v súbore .html alebo v našom prípade v simulátore alebo použijeme viac medzier, aj tak sa text zobrazí za sebou a bude sa brať iba prvá medzera. Viacnásobné medzery (niekedy keď chceme použiť tabulátor) a takisto nové riadky v texte budú ignorované. Pozrite sa na názornú ukážku. Tieto dva rôzne kódy, aj keď sú napísané rôzne, budú vyzerať vo výsledku úplne rovnako:

Kód 1:

<p>
Veta cislo 1.
Veta na novom riadku. 
 Tato veta nech je odsadena, dali sme medzery na zaciatok.
</p>


<p>
Tento paragraf chceme dat o dva riadky nizsie.
</p>

Kód 2:

<p>Veta cislo 1. Veta na novom riadku. Tato veta nech je odsadena, dali sme medzery na zaciatok.</p><p>Tento paragraf chceme dat o dva riadky nizsie.</p>

Ako je vidieť na druhom kóde, prehliadač sleduje znak po znaku. Ak dorazí na medzeru, berie iba jednu, ďalšie ostatné neberie. Takisto nemusí byť každý tag na novom riadku, kľudne môžú ísť aj za sebou v jednom, pretože je kód čítaný znak po znaku od hore dole. Ak chceme zachovať formátovanie (spôsob zápisu, čiže medzery a nové riadky) vo výsledku, môžeme na to použiť značku pre (preformatted – preformátovaný). Text v tomto elemente sa zobrazí so zachovaním počtu medzier a taktiež akceptuje nové riadky. Náš text z predchádzajúcej ukážky sa teda za použitia tohto elementu zobrazí tak, ako si to želáme:

<pre>
Veta cislo 1.
Veta na novom riadku.
     Tato veta nech je odsadena, dali sme medzery na zaciatok.
</pre>