MENU

<ol> ... </ol>

Pokud chcete, aby jednotlivé odstavce byly očíslovány, tak právě k tomu slouží tato HTML značka. Podívejte se, jak to udělat.

Uspořádané seznamy se používají vždy tam, kde je potřeba zvýšit přehlednost obsahu a současně označit pořadí. Může to být popis nějakého postupu nebo v případě, že se budete chtít odkazovat na konkrétní odstavec textu, jako v případě právních dokumentů. Uspořádané seznamy poutají pozornost návštěvníků, což může být velice užitečné.

Příklad použití neuspořádaného seznamu

Použití je vcelku snadné. Stačí vytvořit otevírací značku, zavírací značku a mezi ně vkládat libovolné množství položek, které se označují pomocí značek <li>, viz samostatný článek.

 Ukázka použití <ol> v HTML

<ol>
<li>obsah první položky seznamu</li>
<li>obsah druhé položky seznamu</li>
</ol>

Do otevírací značky <ul> můžete zadat některý z tvarů předdefinovaných v HTML např. <ol type="a">, a to z následujících možností:

  1. type="1" – (defaultní)  zobrazí se jako v tomto případě
  2. type="a" – bude se označovat malými písmeny a, b, c...
  3. type="A" – bude se označovat velkými písmeny A, B, C...
  4. type="i" – bude se označovat malými římskými písmeny i, ii, iii, vi...
  5. type="I"  – bude se označovat velkými římskými písmeny I, II, III. VI...

POZOR! Tyto atributy jsou sice funkční, ale již zastaralé a v HTML5 zakázané, a to protože tvůrce webu má oddělovat obsah od vzhledu. Správný postup, je stylování pomocí externího souboru CSS.

Jak pomocí CSS upravit vzhled uspořádaného seznamu v HTML

V první řadě je třeba připomenout, že pravidla CSS mají být v externím souboru. Pro tag <ol> se nejčastěji používají následující vlastnosti CSS:

  1. list-style-type – jedná se o obdobu výše popsané zastaralé a zavržené metody. Používá pouze předdefinovaná slova:
    1. list-style-type: decimal – (defaultní) celé číslo začínající jedničkou, tedy 1, 2, 3... 
    2. list-style-type: decimal-leading-zero – celé číslo, ale uvozené nulou, tedy 01, 02, 03...
    3. list-style-type: lower-latin – malé písmeno, tedy a, b, c...
    4. list-style-type: upper-latin – velké písmeno, tedy A, B, C...
    5. list-style-type: lower-roman – malé římské číslo, tedy i, ii, iii, iv...
    6. list-style-type: upper-roman – velké římské číslo, tedy I, II, III, VI...
  2. list-style-position – definuje dva možné způsoby chování, a to:
    1. list-style-position: outside –  je použit na této stránce, tedy nový řádek pod symbolem bude začínat na úrovni prvního řádku,
    2. list-style-position: inside – se bude na dalším řádku textu chovat tak, že druhý řádek bude začínat zarovnaný se značkou. 

Kam dál

Kurz základy HTML a CSS | Kurz tvorby webových stránek pomocí systému Joomla

Potřebujete pomoci? Žádný problém!

Nevíte si s něčím rady a potřebujete rychlou pomoc odborníka? Můžete se obrátit na nás a my vám dokážeme pomoci i přes internet.

Více o on-line pomoci přes internet se dozvíte zde:

On-line pomoc

Pokud nevíte, neváhejte se zeptat

© HelpMark | Tomáš Herout | Tel: +420 739 719 548