5. diel - Zoznamy v HTML

V minulej lekcii, Rozloženie stránky v HTML II. časť , sme si ukázali ďalšie tagy ako <details>, <summary>, <figure>, <time> a ďalšie.

Zoznam používame vždy, keď potrebujeme vymenovať položky, ktoré so sebou nejako súvisí. Môže sa jednať napr. O zoznam použitej literatúry, o číslované kroky v tutoriálu alebo o navigačné menu. V HTML máme niekoľko typov zoznamu.

kaskádových štýlov (CSS) vďaka vlastnosti list-style-type. Hoci je zoznam chápaný ako neusporiadaný, poradie prvkov v kóde na vykreslené stránke samozrejme zostane zachované. Tag <ul> je párový a obaľuje položky zoznamu.<menu> a <dir>

Ďalšími typmi zozname sú tagy <menu> a <dir>. V zásade sa tieto tagy správajú rovnako ako <ul>, avšak už nemusí byť podporované najnovšími prehliadači. Ako alternatívu využite radšej tag <ul>.

<li>

Tag <li> (ako L ist I tem) označuje jednu položku zoznamu a najčastejšie teda obaľuje jej text. Môže však obsahovať aj obrázky a ďalšie ľubovoľné elementy. Ukážme si jednoduchý príklad zoznamu:

<h2>Co jsem se dnes naučil</h2>
<ul style="list-style-type:circle">
  <li>Vytvářet tabulky</li>
  <li>Slučovat buňky</li>
  <li>Co je to sémantika</li>
  <li>Vytvořit uspořádaný seznam</li>
</ul>
<menu style="list-style-type:square">
  <li>Vytvářet tabulky</li>
  <li>Slučovat buňky</li>
  <li>Co je to sémantika</li>
  <li>Vytvořit uspořádaný seznam</li>
</menu>
<dir style="list-style-type:disc">
  <li>Vytvářet tabulky</li>
  <li>Slučovat buňky</li>
  <li>Co je to sémantika</li>
  <li>Vytvořit uspořádaný seznam</li>
</dir>

výstup:

Pomocou <ul> sa často riešia navigačné menu, len musíme pomocou CSS skryť zarážky a celý zoznam vložiť do tagu <nav>.

<ol>

Usporiadaný zoznam (O rdered L ist) sa líši od neusporiadaného tým, že prvky sú radené podľa nejakého kľúča. Tým je najčastejšie priorita alebo postupnosť akcií. Zápis je úplne rovnaký, ako u neusporiadaného zoznamu, opäť tag <ol> obalíme položky zoznamu tagy <li>. Miesto odrážok nám pri položkách zoznamu prehliadač v základnom štýle zobrazí písmená, číslice, rímske číslice atď.

Na rozdiel od neusporiadaného zoznamu má element <ol> niekoľko atribútov:

• reversed - Ak je atribút uvedený, sú položku zoznamu číslované opačne, teda zostupne. Ako hodnota sa zvyčajne uvádza reversed, ale môže sa uviesť aj prázdna alebo žiadna.
• štart - Hodnota atribútu určuje prvé číslo v zozname.
• type - Nastaví typ číslovanie, môžeme nastaviť hodnoty: 1 pre arabské číslice, ako sme zvyknutí,

  A a a pre písmená a

  I a i pre rímske číslice.

• 1 pre arabské číslice, ako sme zvyknutí,
• A a a pre písmená a
• I a i pre rímske číslice.

Elementu <li> môžeme pridať nasledujúce atribút:

• value - U usporiadaného zoznamu označuje číslo danej položky. Nasledujúce položky sa potom automaticky číslujú od tejto hodnoty.

Ukážme si to na príklade s rôznymi vlastnosťami:

<h2>Můj prioritní jídelníček</h2>
<ol start="10">
  <li>Tvaroh</li>
  <li>Kuřecí maso</li>
  <li>Sýr</li>
</ol>
<ol type="A">
  <li>Těstoviny</li>
  <li>Brambory</li>
  <li>Rýže</li>
</ol>
<ol type="I">
  <li>Salám</li>
  <li>Šunka</li>
  <li>Párky</li>
</ol>
<ol>
  <li value="4">Tvaroh</li>
  <li>Kuřecí maso</li>
  <li>Sýr</li>
</ol>

A výsledok v prehliadači:

<dl>

Posledným typom zozname je slovníček pojmov (D efinition L ist). Na rozdiel od ostatných obsahuje 2 typy položiek, ktoré sa striedajú a to tagy <dt> a <dd>.

<dt> a <dd>

Tag <dt> (ako D efinition T erm) sa vyskytuje sa iba vo vnútri tagu <dl>. Spravidla sa zobrazuje vždy na novom riadku pri ľavom okraji stránky. Tagom <dd> (ako D efinition D efinition) zapisujeme definíciu už spomínaného tagu <dt>:

<h2>Slovníček pojmů k článku</h2>
<dl>
    <dt>Tutoriál</dt>
        <dd>Názorný návod k použití, většinou krok za krokem</dd>
    <dt>ITnetwork</dt>
        <dd>Programátorská sociální síť a materiálová základna</dd>
    <dt>Seznam</dt>
        <dd>Množina položek, které spolu nějakým způsobem souvisí</dd>
</dl>

V prehliadači dostaneme toto:

<datalist>

Tag <datalist> sa v HTML 5 používa na označenie skupiny možností, ktoré sú následne navrhované v elemente <input>. Jedná sa teda o tzv. Našepkávač (autocomplete). Elementu <input> zadáme v atribúte list id elementu <datalist>, ktorý obsahuje možnosti v podobe elementov <option>.

Využitie element nájde tam, kde je k dispozícii naozaj veľa možností. Napr. môžeme napovedať najčastejšie otázky pri vyhľadávaní alebo prezývky členov fóra:

Vyberte postavu, které chcete poslat zprávu:<br />
<input list="postavy" />

<datalist id="postavy">
    <option value="Albus Brumbál">
    <option value="Harry Potter">
    <option value="Voldemort">
    <option value="Hermiona Grangerová">
    <option value="Ron Weasley">
    <option value="Draco Malfoy">
</datalist>

výsledok:

V ďalšej lekcii, Jednoduché tabuľky v HTML , si ukážeme tagy <table>, <tr>, <td>, <th>, atribúty border, colspan, rowspan, headers, scope a zlučovanie buniek v tabuľke.