5.1 HTML - vytváření seznamů (studijní text)

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.