V HTML se rozlišují dva typy seznamů (stejně jako v textovém editoru). Prvním je netříděný seznam (odrážkový seznam) a druhým je tříděný seznam (číslovaný seznam).

Netříděný (odrážkový) seznam

Netříděný seznam se skládá ze dvou značek. První je párová značka <UL>, která vymezuje začátek a konec seznamu. Druhou je párová značka <LI>, která definuje jednotlivé položky seznamu a je vnořena do značky <UL>.

• výchozím typem odrážky je puntík
• typ odrážky lze nastavit pomocí CSS vlastnosti
• za značkou <ul> musí být hned značka <li>, avšak uvnitř značky <li> už mohou být další značky
• samozřejmě, že lze seznamy vnořovat do sebe tak, že uvnitř jedné značky <li> budete definovat nový seznam

Příklad č.1

Příklad zobrazuje netříděný (odrážkový) seznam, který má tři položky a navíc první položka je silně zvýrazněná.

Kód:

<ul>
  <li><strong>položka</strong></li>
  <li>položka</li>
  <li>položka</li>
</ul>

Výsledek:

• položka
• položka
• položka

Příklad č. 2

Příklad zobrazuje vnoření netříděného seznamu do jiného netříděného seznamu. Všimněte si, že u první položky seznamu, za kterou následuje vnořený seznam není koncová značka s lomítkem.

Kód:

<ul>
  <li>položka
    <ul>
      <li>položka vnořeného seznamu</li>
      <li>položka vnořenoho seznamu</li>
    </ul>
  <li>položka</li>
</ul>

Výsledek:

• položka
  • položka vnořeného seznamu
  • položka vnořeného seznamu
• položka

Tříděný (číslovaný) seznam

Tříděný seznam se skládá ze dvou značek. První je párová značka <OL>, která vymezuje začátek a konec seznamu. Druhou je párová značka <LI>, která definuje jednotlivé položky seznamu.

• výchozím typem je desítkové
• typ číslování a lze nastavit pomocí CSS vlastnosti
• u značky <OL> lze využít atribut START, který nastavuje počáteční číslo seznamu (výchozí je hodnota "1")
• uvnitř značky <OL> musí být pouze značky <LI>, avšak uvnitř značky <LI> už mohou být další značky
• samozřejmě, že lze seznamy vnořovat do sebe tak, že uvnitř jedné značky <LI> budete definovat nový seznam

<ol>
  <li><strong>položka</strong></li>
  <li>položka</li>
  <li>položka</li>
</ol>

Příklad zobrazuje tříděný (číslovaný) seznam, který má tři položky a navíc první položka je silně zvýrazněná.

<ol start="5">
  <li>položka</li>
  <li>položka</li>
  <li>položka</li>
</ol>

Příklad zobrazuje tříděný (číslovaný) seznam, který má tři položky a navíc první položka je nastavena na číslo "5".

<ol>
  <li>položka
    <ol>
      <li>položka vnořeného seznamu</li>
      <li>položka vnořenoho seznamu</li>
    </ol>
  <li>položka</li>
</ol>

Příklad zobrazuje vnoření tříděného seznamu do jiného tříděného seznamu. Všimněte si, že u první položky seznamu, za kterou následuje vnořený seznam není koncová značka s lomítkem.

Úkol č. 1

• Ve složce WWW si vytvořte složku CV05.
• Do této složky si stáhněte a rozbalte soubor cv05.zip.
• Ze složky CV04 si zkopírujte soubor index.html.

Úkol č. 2

• Upravte soubor index.html podle následujícího postupu:
  • ze souboru cv05.txt si zkopírujte seznam národních parků a vložte jej před nadpis "Obyvatelstvo",
  • z textu "Seznam národních..." vytvořte nadpis 3. úrovně,
  • z ostatního textu vytvořte netříděny "odrážkový" seznam,
  • ze souboru cv05.txt si dále zkopírujte seznam největších měst a vložte jej před nadpis "Politický systém",
  • z textu "Seznam deseti..." vytvořte nadpis 3. úrovně,
  • z ostatního textu vytvořte tříděny "číslovaný" seznam.
• Za poslední odstavec "Použité zdroje" vložte další odstavec s textem: "Upravil: Jméno a příjmení, rok"
• Zkontrolujte na případné chyby a uložte.