XHTML - obaľovacie značky: DIV, SPAN a značky obrázkov: IMG

Peter Druska  /  29. 12. 2006, 00:00

Dnes si povieme o značkách, ktoré uzatvárajú nami špecifikovaný obsah. Taktiež o značkách, ktoré umožňujú do stránok pripojiť obrázky. Píšu sa do elementu <body>..</body>.

Obaľovacie značky

Jedná sa o takzvané neškodné značky. Sú to párová značka div a párová značka span.

Párová značka span

Je to riadková značka, ktorá navonok nijak uzavretý „text“ neformátuje. Uzatvára, obaľuje sa do nej nejaká textová informácia v riadku. Teda napríklad: 

<span>Tento text je obalený</span>, ďalej nasleduje "čistý" text.

Zobrazenie: Tento text je obalený, ďalej nasleduje "čistý" text.

Ako vidno (a zopakujem to ešte raz), táto značka nijak neformátuje text. Len ho obaľuje. Určite si každý povie: „no dobre, ale na čo to je, keď to nijak neformátuje text?“ Teoreticky sa nemusí používať vôbec, no je to silný nástroj pri CSS štýlovaní webových stránok.

Text uzavretý v tejto značke môže byť ľubovoľne dlhý. Môže sa zdať, že je to aj viac riadkov. Vtedy to vyzerá, akoby bol do značky span uzavretý blok: 

  <span>Lorem ipsum dolor sit amet, consectetuer
  adipiscing elit. In sed erat. Integer dolor est,
  suscipit vitae, hendrerit quis, convallis ut, sem.
  Nunc vestibulum lacinia pede. Vestibulum ante
  ipsum primis in faucibus orci luctus et ultrices
  posuere cubilia Curae; Nulla viverra leo aliquam
  orci.</span>

Tu si ale treba dávať pozor. Do tejto značky môžeme (ak nastane taká situácia) uzatvárať len riadkové značky – a, del, span, ... Nikdy nie blokové – hr, div, p, h1, ...

Prejdime ďalej.

Párová značka div

Je to bloková značka, ktorá navonok nijak neformátuje text, len uzatvára viac častí. Slúži na to isté, ako značka span, no obaľuje viac riadkov, ako jeden – obaľuje blok. Obsah za týmto elementom sa zalomí na nový riadok. A v tom bloku môžu byť ľubovoľné iné značky, riadkové i blokové. Miestami sa tvári ako samostatný odsek, no nie je odsekom. Napríklad: 

<div>
  
  <h4>Nadpis 4. úrovne</h4>
  <p>
    Text v odseku 1.
  </p>
  <p>
    Text v odseku 2.
  </p>
  
</div>

<div>

  <p>
    Text v ďalšom odseku.
  </p>
  
</div>

Vykreslenie:

Nadpis 4. úrovne

Text v odseku 1.

Text v odseku 2.

Text v ďalšom odseku.

Vyzerá to dosť neprakticky, ale keď sa naučíte možnosti formátovania webových stránok zistíte, že je to silný nástroj práve z hľadiska toho, že viac elementov na stránkach môžete naraz presúvať, upravovať pozadie, farbu písma, ... A to práve vďaka CSS.

S týmito značkami treba ale zaobchádzať veľmi opatrne, pretože sa môže stať aj to, že kód sa stane neprehľadným.

Nepárová značka obrázku – img s atribútmi src="" a alt=""

Webové stránky dnes už nie sú len čistý text a hypertext. Určite si viete dobre predstaviť na stránkach aj nejaký ten obrázok. Aj ich značky sa píšu do elementu <body>..<body>.

Značkou img sa do stránok vkladajú obrázky. Atribúty, ktoré musíme do tejto značky napísať sú src="" a alt="".

Atribút src="" svojim obsahom hovorí, na akej adrese má prehliadač obrázok hľadať. Atribút alt="" popisuje daný obrázok, pokiaľ sa nezobrazí. Túto možnosť uvítajú hlavne ľudia, ktorí majú pri surfovaní vypnuté obrázky (čo je dosť bežné kvôli rýchlosti načítania stránok). Ďalej to ocenia tí, čo surfujú s textovými prehliadačmi alebo s hlasovými čítačkami (väčšinou zrakovo hendikepovaní ľudia): 

<img src="/favicon.ico" alt="Favikona Inet.sk" />

<img src="../obrazky/kvet-moj-najmilsi.png" alt="kvet" />

Vykreslenie: Favikona Inet.sk kvet

Favikona, nápis in, sa pri zapnutých obrázkoch zobrazí. Druhý obrázok, kvet-moj-najmilsi.png, sa nezobrazí ani pri zapnutých obrázkoch, pretože neexistuje. Zobrazí sa jeho popis, ktorý sme napísali do atribútu alt="".

Ďalší text za obrázkami sa nezalamuje na nový riadok, zobrazuje sa za nimi, ako keby to bol normálny text.

Ďakujem za pozornosť.

Neprehliadnite: