Zoznam, typy zoznamov, vzhľad kódu

Ďalší element, ktorý si predstavíme, je zoznam (list). Poznáme ho zo štandardných textových dokumentov (vo worde), kedy sa často využíva na vymenovanie položiek nejakého zoznamu. Jednotlivé položky sú niekedy očíslované (vymenované s poradovým číslom), niekedy obsahujú písmená v poradí z abecedy a niekedy sú len jednoducho odsadené (medzerou/tabulátorom) s pomlčkou. Pre tento prvok, ako aj pre jeho jednotlivé položky (položka – item), existuje v jazyku HTML špeciálna značka. Použitie tohto elementu je na jednej strane rovnaké, ako ho poznáme z textových dokumentov (ako súčasť textu), ale používa sa aj na iné účely. Kaďže obsahom tagu pre položku zoznamu môže byť čokoľvek (čiže aj iný element), využíva sa spravidla na prvky na stránke, ktoré sú svojim spôsobom podobné a viackrát sa opakujú. Jednotlivé časti stránky, sú obalené tagom pre položku zo zoznamu a ako celok je to v tagu pre zoznam. Význam a dôvody tohto použitia pochopíme troška neskôr, nateraz nám to stačí iba vedieť...

Ako už bolo spomenuté, položky v zozname môžu byť bez nejakého špeciálneho označenia určujúceho ich poradie, čiže nezoradené, ale aj zoradené. Podľa toho, aký zoznam chceme použiť, sa líši aj tag v jazyku HTML. Na začiatok si ukážeme jednoduchý nezoradený zoznam, ktorého párová značka je ul (unordered list – nezoradený zoznam). Obsahom tohto tagu je ľubovoľný počet položiek, ktoré majú párovú značku li (list item – položka zoznamu). Obsahom tagu li môže byť obyčajný text alebo hociktorý iný element (obrázok, link...). V nasledujúcej ukážke použijeme nezotriedený zoznam (ul) s tromi položkami (li), v ktorých bude obyčajný text v odstavci (p) :

V lietadle sa stretne :
<ul>
    <li>American</li>
    <li>Rus</li>
    <li>Slovak</li>
</ul>

Ako je vidieť vo výsledku, jednotlivé položky obsahujú pred sebou bodku a sú odsadené zľava. V obsahu tagov pre položku zoznamu sme použili jednoduchý text. Na začiatku sme si povedali, že obsahom tohto tagu môže byť ktorýkoľvek element. Mohli by sme tým pádom vytvoriť zoznam obrázkov, zoznam odstavcov (p) alebo zoznam odkazov. Práve posledný spomenutý prípad sa využíva pomerne často. Ak si predstavíte štandardný vzhľad stránky, v jej hornej alebo v ľavej bočnej časti sa zvyčajne nachádza navigačné menu. Obsahuje položky/tlačítka, ktoré nás presmerujú na ostatné časti stránky (jej podstránky). Tieto položky sú v podstate odkazy a často je samotné menu vytvorené pomocou zoznamu.

Poďme si to ale vyskúšať pre lepšie pochopenie. Vytvoríme si zoznam, ktorého položky budú odkazy na iné stránky. Nezaoberajte sa zatiaľ tým, že náš výsledok vyzerá škaredo a že od menu na skutočnej stránke to má ďaleko. Dôležitá je momentálne funkcionalita, vzhľad (dizajn) budeme upravovať čoskoro a potom pochopíte, že to, čo si skúšame už v týchto kapitolách, sú v podstate časti skutočných webstránok. Aby sme troška okorenili naše ukážky, poďme si našu úlohu troška skomplikovať. Možno ste si niekedy všimli, že keď sa niekedy myšou zobrazíme nad nejakú položku, rozbalí sa ďalšie menu a niekedy ešte aj v tom menu obsahuje nejaká položka ďalšie podpoložky. Tieto položky sú v podstate sami o sebe ďalším menu. Slovom menu v tomto prípade nemyslíme nič iné ako zoznam. Nasledujúca ukážka obsahuje tri položky zoznamu s odkazom a posledná položka bude obsahovať v sebe ďalšie položky (sama o sebe bude ďalšie menu) :

<ul>
    <li>
        <a href="http://www.google.sk" target="_blank">
            Google
        </a>
    </li>

    <li>
       <a href="http://www.sme.sk" target="_blank">
          Sme
       </a>
    </li>
    <li>
       <a href="http://www.youtube.com" target="_blank">
          You Tube
       </a>
    </li>
    <li> 
       <a href="http://sport.aktuality.sk/" target="_blank">
          Sport
       </a>
       <ul>
          <li>
             <a href="http://www.nhl.com" target="_blank">
                 NHL
             </a>
           </li>
           <li>
              <a href="http://www.hokej.sk/nhl/" target="_blank">
                Hokej
              </a>
           </li>
       </ul>
    </li>
</ul>

Na tejto ukážke by som rád poukázal na jednu vec. Všimnite si, ako sú v kóde jednotlivé riadky odsadené tabulátorom (často 4 medzery). Niektoré z nich majú iba jeden tabulátor (tab), niektoré dva a niektoré viac. Spôsob zápisu kódu je čisto individuálna vec programátora. Ako sme si už povedali na začiatku, viacnásobné medzery a nové riadky sa v kóde nijako neodzrkadlia (pokiaľ to nie je v elemente pre). To znamená, že je na programátorovi, ako si kód medzerami, novými riadkami a tabmi upraví, aby bol preňho ľahko čitateľný. Nemusíte dávať nové riadky tam, kde ich dávam ja a takisto nemusíte dávať taby tam, kde ja, kľudne môžete používať estetickú úpravu kódu, ako vám vyhovuje. Ešte aby som sa vrátil k tabom, štandardne sa zadáva klávesou tab (využíva sa napríklad na prepínanie okien). Neskôr budeme písať kód v programoch, ktoré budú tabulátor akceptovať. V našom simulátore to zatiaľ možné nie je, tak používajte 4 medzery. Prečo je to ale dobré? Pozrite sa na tieto tri rôzne zápisy toho istého kódu a povedzte, ktorá sa vám ľahšie prečíta :

1:
<ul>
    <li>
       <a href="http://www.google.sk" target="_blank">
          Google
       </a>
    </li>

    <li>
       <a href="http://www.sme.sk" target="_blank">
          Sme
       </a>
    </li>
</ul>
 
2:
<ul>
<li>
<a href="http://www.google.sk" target="_blank">Google</a>
</li>
<li>
<a href="http://www.sme.sk" target="_blank">Sme</a>
</li>
</ul>
 
3:
<ul><li><a href="http://www.google.sk" target="_blank">Google</a></li><li><a href="http://www.sme.sk" target="_blank">Sme</a></li></ul>

Pre mňa osobne je najvhodnejší prvý štýl. Tretí je jednoznačne najhoršie čitateľný a človek narýchlo nevidí, koľko prvkov zoznam má, čo je ich obsahom a podobne. Možno sa vám celkom pozdáva aj druhý štýl. Druhý štýl oproti tretiemu má samozrejme výhodu, že každý prvok (element/tag) je na novom riadku. Vďaka tomuto je jasne vidieť, ktoré elementy náš kód obsahuje a čo je ich obsahom. Prečo je ale lepšie aj kód odsadzovať zľava (používať taby)? Tento štýl má tú výhodu, že v programovaní budete často používať štruktúru, v ktorej nejaká časť kódu bude vnútrom nejakého iného kódu a nad tým bude ešte niečo nadradené. Podobne ako v našom prípade. Hlavný prvok je zoznam. Jeho prvky (li) sú jeho vnútrom, jeho obsahom, akokeby v ňom vnorené, zoznam je akokeby ich rodič (parent) a položky sú jeho deti (children). Podobne odkaz v položke zoznamu (a v li) je tiež obsahom li, jeho vnútrom. Koľko ale tabov dávať a podľa čoho? Spravidla sa počet tabov používa na základe úrovne kódu. V prvej ukážke kódu je najvrchnejší (najhlavnejší) element zoznam (ul), nad ním nie je nič, nie je ničím iným obalený, takže nepotrebuje žiadne taby pred sebou. V jeho vnútri sú však položky zoznamu (li), ktoré sú akokeby o jednu úroveň nižšie ako zoznam, pretože sú jeho obsahom, preto sme pre ne použili jeden tab (4 medzery). Všimnite si, že jednotlivé položky zoznamu majú pred sebou jeden tab, pretože prvky zoznamu sú na rovnakej úrovne. Druhý prvok (li) nie je nadradený ani podradený pod prvým prvkom (li), preto sú na rovnakej úrovni, akokeby myslenej čiare zľava, ktorá zarovnáva kód vďaka tabom. Odkaz v položke zoznamu (a v li) je odsadený dvomi tabmi, pretože nie je na rovnakej úrovni ako li, je jeho obsahom, jeho vnútrom, takže má tab navyše. Tento štýl je veľmi výhodný. Skúste si za sebou spraviť dva zoznamy (ul s li a odkazy v nich) a skúste si kód neodsadiť a odsasdiť. V odsadenom kóde bude jasne vidie, že sú zoznamy dva. V neodsadenom sa to na prvý pohľad bude zdať ako jeden zoznam, pretože v strede kódu sa na prvý pohľad stratí kód </ul><ul> určujúci ukončenie prvého zoznamu a začiatok druhého.

Vráťme sa ale k zoznamom. Druhý typ zoznamu je zotriedený zoznam, ktorý má párový tag ol (ordered list) a jeho prvky majú rovnakú značku ako aj nezotriedený zoznam li (list item). Zotriedený znamená, že jeho prvky nebudú mať pred sebou iba medzeru zľava a nejaký symbol (bodku) ako ul, ale budú pred sebou aj obsahovať číslo alebo písmeno určujúce ich poradie. Ak použijeme tag ol, jednotlivé položky budú očíslované arabskými číslicami (1., 2., 3., …). Toto správanie je defaultné (základné – prednastavené) :

Najpouzivanejsi prehliadac :
<ol>
    <li>Chrome</li>
    <li>Firefox</li>
    <li>Internet Explorer</li>
</ol>

Tag ol podporuje atribút type, ktorým určujeme, ako majú byť položky zoznamu označené. Defaultné správanie (arabské číslice), ako sme si ukázali v poslednej ukážke, predstavuje hodnota atribútu type 1 (type=“1“). Pre zotriedenie rímskymi číslicami môžeme použiť hodnotu veľké i (I) pre veľké rímske číslice a malé i (i) pre malé rímske číslice. Pre zotriedenie písmenami z abecedy používame hodnotu veľké A alebo malé a :

Najpouzivanejsi prehliadac :
<ol type="A">
    <li>Chrome</li>
    <li>Firefox</li>
    <li>Internet Explorer</li>
</ol>
<br>
Najpouzivanejsi prehliadac :
<ol type="i">
    <li>Chrome</li>
    <li>Firefox</li>
    <li>Internet Explorer</li>
</ol>