Blokové a vnútroriadkové elementy

Doteraz sme si predstavovali niektoré elementy z jazyka HTML a skúšali, ako sa správne používajú, resp. zapisujú v jazyku HTML. Nebavili sme sa veľmi o štruktúre stránky a jednotlivých elementov, riešili sme len ich použitie. Myslím tým to, že sme neriešili, prečo nejaký element zabral celý riadok, niektorý zabral len toľko miesta koľko potreboval, prečo to je vľavo a podobne. Schválne som do toho nevŕtal skorej, pretože celkové fungovanie dizajnu, čiže rozdelenie plochy webstránky, rozmery a umiestnenie elementov a podobne je vec jazyka CSS, ktorý si preberieme už o chvíľu. Niektoré základy sa však dajú pochopiť už aj zo samotného jazyka HTML, resp. z defaultných nastavení (správaní) jednotlivých elementov.

Každý element (nadpis, odstavec, tabuľka...) v jazyku HTML sa zobrazuje nejakým spôsobom. Veľká väčšina prvkov sa zobrazuje dvomi štandardnými spôsobmi a to buď ako blok (block) alebo vo vnútri riadka (inline). Blokové elementy sú tie, ktoré zaberajú priestor ako blok (niečo ako obdĺžnik cez viacej riadkov stránky). Táto vlastnosť sa vyznačuje tým, že prvky začínajú vždy na novom riadku, čiže ak bol pred nimi v kóde nejaký iný element, blokový pred sebou zalomí riadok, ako keby tam bol tag br. Okrem toho zaberá tento element celú dostupú šírku, čiže je roztiahnutý od ľavého kraja až po pravý. V nasledujúcej ukážke budú jasné obidve tieto vlastnosti. Prvá vlastnosť (zalomenie riadku pred) je príčina toho, že text v elemente p sa zobrazí na novom riadku a nebude pokračovať v texte, ktorý máme na začiatku. Druhá vlastnosť spôsobí to, že samostantný text na konci sa zobrazí na ďalšom riadku, pretože za prvým odstavcom (p) nie je miesto, pretože zaberá celú šírku, aj keď ju nepotrebuje (aj keď je jeho text krátky, nezasahuje až po okraj, nepotrebuje celú šírku, ale element p ju aj tak zaberá) :

Toto je text <p>a tento text uz je v blokovom elemente.</p>
Tento text ide na novy riadok, lebo sa nezmesti vedla prveho p, pretoze zabera celu sirku.

Ďalší blokový element, ktorý už poznáme je nadpis (H1-H6). Tiež zaberie celú šírku a je vždy na novom riadku. Tie elementy, ktoré sa zobrazujú vo vnútri riadka, ako to už z názvu vyplýva, sa zobrazujú v aktuálnom riadku vo vnútri a zaberajú iba toľko miesta, koľko potrebujú. To znamená, že nejdú automaticky do nového riadka a ani nezaberajú celú dostupnú šírku, sú iba také veľké, aký je ich obsah. Medzi takéto elementy patrí tag a (odkaz) alebo aj img (obrázok):

Toto je text <a href="http://www.w3schools.com">odkaz v tom istom riadku</a> text za odkazom stale v tom istom riadku

Význam týchto dvoch rozdelení sa už čoskoro dozvieme na konci tejto kapitoly. Ešte predtým si ale predstavíme dva veľmi dôležité elementy. Prvý z nich je blokový a jeho párový tag je div (division – úsek/oddiel). Div je asi najpoužívanejší tag v tvorbe webstránok. Využíva sa totiž ako ohraničenie nejakého bloku/časti/kontajnera stránky. Vizuálne sa nijako neprejavuje, slúži v podstate na obalenie časti kódu a vytvorenie nejakej uzavretej/ucelenej sekcie. Predstavte si klasickú webstránku, kde je vo vrchnej časti logo, naľavo je menu, vpravo vedľa menu a pod hlavičkou sa nachádza obsah stránky a úplne na spodku je pätička stránky. Presne tieto štyri sekcie sú v kóde štyri hlavné divy, kde jeden predstavuje hlavičku (header), druhý menu, tretí obsah (content) a štvrtý pätičku (footer). Úplný význam, na čo sú takto jednotlivé časti kódu obalované do nejakého tagu, pochopíme o chvíľu v sekcii jazyka CSS. Teraz ale už vieme pochopiť aspoň základný význam a to je to, že element div je blokový. A aj to, že v kóde je to prehľadnejšie, pre každú sekciu máme vlastný div. Samozrejme div môže obsahovať ďalší div a tak ďalej, v praxi sa to aj tak používa. Stránka je rozdelená divmi na základé sekcie a potom aj každý základný div je rozdelený na menšie časti (kontajnery) – divy. Poďme si ale ukázať aspoň základnú vlastnosť a to je to, že to je blokový element. Predstavme si ,že máme v texte obrázok, ale nechceme, aby bol obtečený textom (aby text išiel okolo obrázka), ale aby bol text a obrázok oddelený, takže obrázok na novom riadku a text iba nad ním a pod ním (nie vedľa neho). V nasledujúcej ukážke si ukážeme tento príklad bez použitia tagu div a potom obrázok obalíme do tagu div a zabezpečíme, že bude uložený v bloku mimo textu:

Toto je nejaky dlhy text a obrazok v ramci textu
<img src="http://images.boomsbeat.com/data/images/full/30918/horse_2-jpg.jpg" height="200" width="200">
A toto je text za obrazkom
<br><br>
Toto je nejaky dlhy text a obrazok je v dive
<div>
    <img src="http://images.boomsbeat.com/data/images/full/30918/horse_2-jpg.jpg" height="200" width="200">
</div>
A toto je text za obrazkom

Druhý element, ktorý si ešte predstavíme, je naopak asi najpoužívanejší inline (v riadku) element a jeho párový tag je span (rozsah). Ak si pamätáte, pri tabuľke sme mali rowspan/colspan, čo značilo, koľko riadkov, resp. stĺpcov bude zlúčených do jednej bunky. V tomto prípade slovo span značí takmer to isté, jednoducho rozsah, ktorý bude obsah tohto tagu zaberať. Keďže je to inline element, jeho použitie nemá pre nás momentálne žiadny vizuálny efekt. Jeho využitie je najmä na kód, ktorý chceme mať zobrazený v riadku a chceme, aby zaberal iba toľko miesta, koľko potrebuje (základná vlastnosť inline zobrazovania elementov). Najčastejšie sa používa na obalenie textu, ktorý by bol v opačnom prípade bez tagu. Tým sa dostávame k skutočnosti, že by sme sa mali riadiť pravidlom, že žiadny obsah stránky by nemal byť mimo nejakého tagu. Ak chceme zobraziť na stránke text, obalíme ho buď do tagu p, ak chceme, aby bol samostatný (v odstavci/paragrafe) alebo ho obalíme tagom span. V nasledujúcej ukážke je aj nesprávne použitie textu (mimo tagu), aj správne (v spane) a rovno je už aj celý kód obalený do jedného divu aj s odsadzením (takto by to malo teoreticky vyzerať:) ):

<div>
     Tento text nie je v tagu, nie je to spravne.
    <p>
        Tento text je v elemente.
    </p>
    <span>
        Tu je nas odkaz:
        <a href="http://www.w3schools.com">Klikni!</a>
    </span>
</div>