Od provozovatele projektu Rychlost.CZ

Seznamy - Začínáme s HTML

vydáno: 15.02.2016, seriál: Začínáme s HTML | komentářů: 0

Toto je 9. díl seriálu Začínáme s HTML, pokud se dostatečně neorientujete, zkuste předchozí díl či díl první.

Pokud potřebujete zobrazit ve vašem HTML dokumentu data v podobě seznamů, lze využít tagů <ul> nebo <ol>. Tyto tagy dokáží zobrazit zadaná data do řádkových seznamů. Každý řádek seznamu je definován pomocí tagu <li>. Seznamy lze využít i k definici termínu a to pomocí tagu <dl>.

Nečíslovaný seznam

Prvním typem seznamů je nečíslovaný seznam. Ten se označuje párovým tagem <ul>. Mezi tagy <ul> vkládáme řádkové položky <li> </li>. Každý řádek je určen jedním elementem <li>.

Před každým řádkem se v základním nastavení zobrazí černý puntík.

  • 1. položka
  • 2. položka

Pomocí kaskádový stylů, lze tento grafický prvek změnit. Jak na to, se dozvíte v jednom z našich seriálů o CSS.

Ukázka:
HTML
<ul>
<li>Banán</li>
<li>Jablko</li>
<ul>
Použité tagy: <ul>, <li>

Číslovaný seznam

Dalším typem je číslovaný seznam. Označuje se párovým tagem <ol>. Položky i zde vkládáme pomocí tagů <li>.

Číslovaný seznam zobrazuje před položkami čísla, písmena abecedy nebo římské číslice. Pomocí atributu start lze změnit počátek číslování seznamu.

Ukázka:
HTML
<ol>
<li>Karel</li>
<li>Mirek</li>
</ol>
Použité tagy: <ol>, <li>
Ukázka:
HTML
<ol start="3">
<li>Seznam začíná trojkou</li>
<li>Seznam pokračuje čtyřkou</li>
</ol>
Použité tagy: <ol>, <li>

Víceúrovňové seznamy

Seznamy lze definovat i jako víceúrovňové. Pro rozvětvení seznamu stačí do tagu <li> vložit další blok nečíslovaného seznamu <ul>.

Ukázka:
HTML
<ul>
<li>Položka 1</li>
<li>Položka 2
<ul>
<li>Položka 2.1</li>
<li>Položka 2.2</li>
</ul>
</li>
<li>Položka 3</li>
</ul>
Použité tagy: <ul>, <li>

Definice termínu

K přehlednému definování termínů lze také využít seznamy. Aby byly tyto termíny odlišeny využívá se pro jejich definici tag <dl> (description lists). Název termínu, který chceme popisovat zapíšeme mezi tag <dt>. Samotný popis se poté vkládá mezi tag <dd>.

Ukázka:
HTML
<dl>
<dt>Termín</dt>
<dd>Slovní spojení definující daný termín</dd>
</dl>
Použité tagy: <dl>, <dt>, <dd>

Zrekapitujume si probrané tagy.

<ul>

Párový tag definující nečíslovaný seznam.

<li>

Párový tag vytvářející řádek položky seznamu.

<ol>

Párový tag definující číslovaný seznam. Číslování je číselné, písemné nebo z římský číslic. Atribut start umožní posunout začátek seznamu.

<dl>

Parový tag ohraničující seznam s definici termínů.

<dt>

Párový tag obklopující název termínu.

<dd>

Párový tag popisující definovaný termín.

HTML: návody jak psát html tagy