ARCHIV

HTML (7) - seznamy

V tomto díle si probereme seznamy

22.7.2004 15:00 | Pavel Kácha | Články autora | přečteno 29070×

Seznamy by se teoreticky daly udělat i pouhým zalamováním řádků, na to máme v HTML nepárový tag <br>. Tomuto tagu můžete nastavit tyto atributy id="", class="", title="", style="", které mají stejný význam jako u ostatních elementů. Kromě toho je tu ještě atribut clear, kterým můžeme definovat, kde mají začínat další řádky, povolené hodnoty jsou

• none (pokračovat se bude na dalším řádku)
• left (text bude jakmile nebudou žádné objekty na levé straně dokumentu)
• right (text bude jakmile nebudou žádné objekty na pravé straně dokumentu)
• all (text bude jakmile nebudou žádné objekty na pravé ani levé straně dokumentu)

Atribut clear="" by se už neměl používat, v novějších verzích nebude podporován - lze ho nahradit pomocí CSS.

Takovéhle seznamy by ale nebyly ani hezké ani dobře strukturované, proto se v HTML definují speciální tagy pro vytváření několika druhů seznamů. Můžete vytvářet číslované, nečíslované a definiční seznamy.

Číslované a nečíslované seznamy

Číslované a nečíslované seznamy se vytvářejí celkem podobně, jediný rozdíl je jen v úvodním tagu. Pro číslované seznamy je určen párový tag <ol></ol> a nečíslované seznamy uzavřeme do párového tagu <ul></ul>. Jednotlivé položky seznamu uzavíráme do tagu <li></li>. Pro tento element není uvádění ukončujícího tagu povinné, ale doporučuji to.

Jednoduchý seznam linuxových distribucí by tedy mohl vypadat například takto:

A tento kód by se zobrazil takto:

• Mandrake
• Debian
• Slackware
• SuSE
• Fedora
• a další...

Kdybychom vyměnili <ul></ul> za <ol></ol>, objevili by se u jednotlivých distribucí místo odrážek čísla.

Pomocí různých atributů můžeme samozřejmě pozměnit způsob zobrazovaní seznamů. Pokud nám nevyhovují standardní odrážky a číslování, můžeme ho změnit pomocí atributu type="". Jeho povolené hodnoty jsou

• pro nečíslované seznamy
  • disc
  • circle
  • square
• pro číslované seznamy
  1. 1 (arabské číslice)
  2. a (malá písmena)
  3. A (velká písmena)
  4. i (malé římské číslice)
  5. I (velké římské číslice)

Atribut type="" můžete použít buď pro celý seznam v otevírajícím tagu nebo u určité položky seznamu, v tom případě bude typ odrážek nebo číslování pokračovat až do konce seznamu. Atribut type="" by se ale už neměl používat a v novějších verzích standardu už nebude podporován - lze ho nahradit pomocí CSS.

U číslovaných seznamů můžete pomocí atributu start="" v otevírajícím tagu určit hodnotu, kterou má seznam začínat. Pokud jsou pro "číslování" použita písmena, bude písmeno přiřazeno podle svého pořadí v abecedě, např.: 4 --> D.

Atribut start="" by se ale už neměl používat a v novějších verzích standardu už nebude podporován - lze ho nahradit pomocí CSS.

Číselnou hodnotu položky můžete také změnit v seznamu, slouží k tomu atribut value="". Jako jeho hodnotu nastavíte číslo, kterým má seznam pokračovat, číslování následujících prvků seznamu se bude odvíjet od zadané hodnoty. Atribut value="" by se ale už neměl používat a v novějších verzích standardu už nebude podporován - lze ho nahradit pomocí CSS.

Ještě existuje jeden atribut, který by se by se v číslovaných a nečíslovaných seznamech již neměl používat: je to atribut compact. Tento atribut nemá žádnou hodnotu a pokud je uveden měl by se seznam zobrazit kompaktněji, přesná interpretace ale záleží na prohlížeči.

Kromě těchto atributů se dají pro číslované a nečíslované seznamy použít ještě tyto všeobecné atributy, jejichž význam už známe.

• id
• class
• lang
• dir
• title
• style
• onclick
• ondblclick
• onmousedown
• onmouseup
• onmouseover
• onmousemove
• onmouseout
• onkeypress
• onkeydown
• onkeyup

Jak jste si možná všimli ve výpisu hodnot atributu type="", jdou do sebe seznamy navzájem vnořovat, ale musíte při tom dát pozor, aby byl celý vnořený seznam uzavřen mezi tagy <li> a </li> nadřazeného seznamu, jinak získáte nevalidní dokument.

Definiční seznamy

Tento seznam se od obou dosud probíraných typů seznamů liší. A to nejen stylem zápisu, ale i použitím. Definiční seznam se výborně hodí na slovníček neznámých pojmů nebo mě ještě napadá třeba záznam rozhovoru přes ICQ.

Definiční seznam se označuje pomocí párového tagu <dl></dl> bez žádných dalších atributů, do kterého bude obsahovat celý seznam. Jednotlivé jeho položky mají dvě části

1. Definovaný termín - označujeme tagem <dt></dt> ukončovací je nepovinný
2. Definice termínu - označujeme tagem <dd></dd> ukončovací je nepovinný

<dt></dt> ani <dd></dd> nemají žádné další speciální atributy, dají se u nich použít jen tytéž všeobecné atributy jako u číslovaných a nečíslovaných seznamů.

A samozřejmě si ukážeme i příklad použití definičního seznamu:

Náš malý příklad vypadá v praxi takto:

MBR

Master boot record - zaváděcí sektor disku

DNS

Domain name services - služby DNS, jmenné služby

Vidíte, že definované termíny se nezobrazily nijak výrazně, proto doporučuji si je v CSS přestylovat.

Verze pro tisk