Zoznamy vo webstránke

Súčasťou textov na webových stránkach sú často aj zoznamy. Rozoznávame dva

druhy zoznamov: usporiadané a neusporiadané.

Usporiadaný zoznam
Tagy pre usporiadaný zoznam sú <ol></ol> . Vyznačuje sa nimi začiatok
a koniec usporiadaného zoznamu. Vo vnútri zoznamu sa nachádzajú položky.
Pre označenie jednotlivých položiek zoznamu sa používa tag <li></li>.
Usporiadaný zoznam sa zobrazuje so základným číslovaním od 1.... až do .....
podľa počtu položiek.

50
ELCT, s.r.o. IT+ Rozvoj IT zručností pre potreby trhu práce v Košickom kraji prostredníctvom
www.elct.sk/itplus vytvorenia a realizácie programov celoživotného vzdelávania (kód projektu: 312011D381)
www.esf.gov.sk Tento projekt sa realizuje vďaka podpore z Európskeho sociálneho fondu
www.minedu.gov.sk a Európskeho fondu regionálneho rozvoja v rámci Operačného programu Ľudské zdroje.
Zoznamy vo webstránke
Príklad: Zdrojový kód usporiadaného zoznamu v html:
<ol>
<li>lampu odpojíme od zásuvky</li>
<li>vykrútime žiarovku</li>
<li>vybalíme novú žiarovku</li>
<li>novú žiarovku nainštalujeme do lampy</li>
<li>lampu zapojíme do zásuvky a zapneme</li>
</ol>
51
ELCT, s.r.o. IT+ Rozvoj IT zručností pre potreby trhu práce v Košickom kraji prostredníctvom
www.elct.sk/itplus vytvorenia a realizácie programov celoživotného vzdelávania (kód projektu: 312011D381)
www.esf.gov.sk Tento projekt sa realizuje vďaka podpore z Európskeho sociálneho fondu
www.minedu.gov.sk a Európskeho fondu regionálneho rozvoja v rámci Operačného programu Ľudské zdroje.
Zoznamy vo webstránke
Neusporiadaný zoznam

Tagy pre neusporiadaný zoznam sú <ul></ul> . Vyznačuje sa nimi začiatok

a koniec neusporiadaného zoznamu. Vo vnútri zoznamu sa nachádzajú položky.
Pre označenie jednotlivých položiek zoznamu sa používa tag <li></li>.
Štandardne sa v neusporiadanom zozname pri položkách zobrazuje čierna
gulička. Samozrejme, pomocou CSS (kaskádové štýly) vieme zobraziť akúkoľvek
odrážku.

52
ELCT, s.r.o. IT+ Rozvoj IT zručností pre potreby trhu práce v Košickom kraji prostredníctvom
www.elct.sk/itplus vytvorenia a realizácie programov celoživotného vzdelávania (kód projektu: 312011D381)
www.esf.gov.sk Tento projekt sa realizuje vďaka podpore z Európskeho sociálneho fondu
www.minedu.gov.sk a Európskeho fondu regionálneho rozvoja v rámci Operačného programu Ľudské zdroje.
Zoznamy vo webstránke
Príklad: Zdrojový kód neusporiadaného zoznamu v html:
<ul>
<li>nové a vylepšené vlastnosti</li>
<li>kontrola pravopisu</li>
<li>podpora 327 jazykov</li>
<li>špeciálne funkcie html</li>
</ul>

53
ELCT, s.r.o. IT+ Rozvoj IT zručností pre potreby trhu práce v Košickom kraji prostredníctvom
www.elct.sk/itplus vytvorenia a realizácie programov celoživotného vzdelávania (kód projektu: 312011D381)
www.esf.gov.sk Tento projekt sa realizuje vďaka podpore z Európskeho sociálneho fondu
www.minedu.gov.sk a Európskeho fondu regionálneho rozvoja v rámci Operačného programu Ľudské zdroje.
Zoznamy vo webstránke
Nastavenie počiatočnej hodnoty číslovania zoznamu
Napríklad chceme, aby sa zoznam s výmenou žiarovky začal číslovať od čísla 5.
Realizujem to pridaním príkazu start=“ “ do otváracieho tagu usporiadaného
zoznamu <ol>. Do úvodzoviek potom napíšeme číslo, od ktorého chceme, aby
sa zoznam začal číslovať. Celé to teda bude vyzerať takto:
<ol start=”5”>
<li>piata položka</li>
<li>šiesta položka</li>
<li>siedma položka</li>
</ol>
54
ELCT, s.r.o. IT+ Rozvoj IT zručností pre potreby trhu práce v Košickom kraji prostredníctvom
www.elct.sk/itplus vytvorenia a realizácie programov celoživotného vzdelávania (kód projektu: 312011D381)
www.esf.gov.sk Tento projekt sa realizuje vďaka podpore z Európskeho sociálneho fondu
www.minedu.gov.sk a Európskeho fondu regionálneho rozvoja v rámci Operačného programu Ľudské zdroje.
Zoznamy vo webstránke
Zmena čísla v ľubovoľnej položke
Ak chceme zmeniť číslo v ľubovoľnej položke usporiadaného zoznamu,
vykonáme to pridaním príkazu „value“ do príslušného tagu <li>.
<ol>
<li>lampu odpojíme od zásuvky</li>
<li value=”10”>vykrútime žiarovku</li>
<li>vybalíme novú žiarovku</li>
</ol>
Ak sme druhej položke priradili číslovanie 10, ďalšie položky sa prečíslujú
a nové číslovanie bude pokračovať od čísla 11.
55
ELCT, s.r.o. IT+ Rozvoj IT zručností pre potreby trhu práce v Košickom kraji prostredníctvom
www.elct.sk/itplus vytvorenia a realizácie programov celoživotného vzdelávania (kód projektu: 312011D381)
www.esf.gov.sk Tento projekt sa realizuje vďaka podpore z Európskeho sociálneho fondu
www.minedu.gov.sk a Európskeho fondu regionálneho rozvoja v rámci Operačného programu Ľudské zdroje.
Zoznamy vo webstránke
Viacúrovňové zoznamy
Vo webových stránkach sa často vyskytujú viacúrovňové zoznamy. Ide v podstate
o kombináciu používania tagov <ol> resp.<ul> a tagu <li>. Viacúrovňové
zoznamy sa môžu byť ako usporiadané a neusporiadané,

Príklad na viacúrovňový zoznam usporiadaný - dvojúrovňový:

56
ELCT, s.r.o. IT+ Rozvoj IT zručností pre potreby trhu práce v Košickom kraji prostredníctvom
www.elct.sk/itplus vytvorenia a realizácie programov celoživotného vzdelávania (kód projektu: 312011D381)
www.esf.gov.sk Tento projekt sa realizuje vďaka podpore z Európskeho sociálneho fondu
www.minedu.gov.sk a Európskeho fondu regionálneho rozvoja v rámci Operačného programu Ľudské zdroje.
Zoznamy vo webstránke
<ol>
<li>lampu odpojíme od zásuvky</li>
<li>vykrútime žiarovku</li>
<li>vybalenie žiarovky:
<ol>
<li>dáme pozor, aby sme nepoškodili žiarovku pri vybaľovaní</li>
<li>nemali by sme poškodzovať ani obal</li>
<li>žiarovku opatrne vybalíme z ochrannej fólie</li>
</ol>
</li>
<li>novú žiarivku nainštalujeme do lampy</li>
<li>lampu zapojíme do zásuvky a zapneme</li>
</ol>

57
ELCT, s.r.o. IT+ Rozvoj IT zručností pre potreby trhu práce v Košickom kraji prostredníctvom
www.elct.sk/itplus vytvorenia a realizácie programov celoživotného vzdelávania (kód projektu: 312011D381)
www.esf.gov.sk Tento projekt sa realizuje vďaka podpore z Európskeho sociálneho fondu
www.minedu.gov.sk a Európskeho fondu regionálneho rozvoja v rámci Operačného programu Ľudské zdroje.