HTML - Seznamy

Seznamy v HTML jsou stejné jako např. ve Wordu. Seznam je několik oddělených položek. Tyto položky mohou být číslované nebo mohou mít odrážky (čtverečky, kolečka). Ukázka seznamů:

  • Položka 1
  • Položka 2

Jiný seznam:

  1. Položka 1
  2. Položka 2
  3. Položka 3
  4. Položka 4
  5. Položka 5

li

Základní prvek seznamu. Řádek, jedna položka (list-item). Vždy se nachází uvnitř seznamu (ul, ol, dir, menu). Vždy se zobrazuje na novém řádku.

Atribut
type (typ seznamu)disc
square
circle
A
a
i
I
1		puntík (plné kolečko)
čtvereček
kolečko (prázdné)
číslování A, B, C...
číslování a, b, c...
číslování i, ii, iii...
číslování I, II, III...
číslování 1, 2, 3...
Atribut value nastavuje číslo položky (požívá se v případě, že je třeba nastavit jiné číslo, než by logicky následovalo po předchozích položkách). Ukázka: 
<ul>
  <li type="square">Položka 1</li>
  <li value="10">Položka 2</li>
  <li type="1">Položka 3</li>
</ul>

ol

Číslovaný seznam (ordered list). Obsahuje jednotlivé položky ve značce li. Položky budou automaticky číslované. Atribut type má stejné hodnoty jako značka li (1, I, i, A, a) pro vybraný typ číslování. Atribut start nastavuje, kde má seznam začínat (jakým číslem). Příklad: 
<ol type="I" start="5">
  <li>Položka 1</li>
  <li>Položka 2</li>
  <li>Položka 3</li>
</ol>

ul

Odrážkový seznam. Atribut type je podobný jako u li. Hodnoty square, circle a disc pro čtvereček, kolečko a puntík. Pomocí lze seznam vylepšit. CSS vlastnost list-style-image: url('obrazek.gif') nastaví místo odrážky zvolený obrázek. Je třeba vhodně nastavit velikost obrázku, ideální je zvolit průhledné pozadí, aby obrázek nenarušoval případné změny pozadí. Ukázka: 
<ul style="list-style-image: url('obrazek.gi')">
  <li>Položka 1</li>
  <li>Položka 2</li>
  <li>Položka 3</li>
</ul>

Vnořené seznamy

Seznamy lze vytvářet i vnořeně (seznam v seznamu). Ukázka:

  1. Položka 1
  2. Položka 2
    1. Položka 2-1
      1. Položka 2-2-1
      2. Položka 2-2-2
    2. Položka 2-2
  3. Položka 3
  4. Položka 5
Zdrojový kód: 
<ol type="I">
<li>Položka 1</li>
<li>Položka 2</li>
<ol type="i">
<li>Položka 2-1</li>
<ol>
<li>Položka 2-2-1</li>
<li>Položka 2-2-2</li>
</ol>
<li>Položka 2-2</li>
</ol>
<li>Položka 3</li>
<li>Položka 5</li>
</ol>

dl

Seznam definic (definition list). Obsahuje značky dt (defined term), které uzavírají definovaný pojem a dd (definition description), které uzavírají samotnou definici pojmu. Ukázka: 
<dl>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
</dl>

dt

Pojem, který se definuje v seznamu dl.

dd

Definice pojmu, která definuje pojem dt v seznamu dl.

dir

Seznam, který se chová stejně jako ul, není třeba ho používat. Používejte ul.

menu

Seznam, který se chová stejně jako ul, není třeba ho používat. Používejte ul.

Využití seznamů v praxi

Seznamy jsou vhodné pro vytváření seznamů (díky automatickému číslování), jsou vhodné pro snadnou orientaci čtenáře v textu (oddělení jednotlivých částí textů odrážkami), pro seznamy odkazů, pro menu. Důležité jsou značky ul a ol pro jednotlivé typy seznamů a značka li pro položku seznamu (nazáleží na typu).




* výhodný 2 GB webhosting, PHP, MySQL, e-maily, subdomény atd. za 1200 Kč ročně - Více zde...

Vyhledávání

K webhosting Nokia 1208 zdarma

  • Nokia 1208 Výhodná nabídka pro čtenáře Tvorba-webu.cz.

    Pokud si objednáte Webhosting C4, dostanete k němu mobilní telefon Nokia 1208 zdarma.

    Do objednávky je třeba vložit slevový kupón "mobil", jak postupovat při objednávce si můžete přečíst na webu WebhostingDoména.cz

Doporučujeme