Obstajajo različne vrste seznamov v HTML. Najprej so tu naštevalni seznami. Pri tem tipu seznama so posamezne vnose na seznamu opremljene z oznako, imenovano puščica.
Naštevalni seznami se začnejo z elementom ul. Posamezni vnosi seznama so označeni z elementom li.
<p>Trenutne teme iz foruma</p> <ul> <li>CSS se ne izvaja več</li> <li>Pokazni prostor Hollywoodskega stila iz 40. let</li> <li>Vpogled CSS</li> <li>PHP povezava/prekinitev</li> <li>Moj mali razstavni prostor - začetnik prosi za nasvete!</li> </ul>
Tukaj je pogled na rezultat v brskalniku:
Pred vsakim prispevkom je vstavljena oznaka na seznamu. Kako to privzeto izgleda, določajo brskalniki. Sicer obstajajo atributi, s katerimi se lahko spreminja prikaz seznamov, vendar jih ne bi smeli več uporabljati. Namesto tega nastopajo CSS lastnosti.
Naštevalne sezname je pač moč tudi gnezditi. Najprej si oglejte naslednji prikaz:
Tukaj je razvidno, kaj pomeni takšno gnezditev.
Sintaksa za to izgleda takole:
<ul>
<li>Vodiči
<ul>
<li>2D</li>
<li>3D</li>
<li>Splet</li>
</ul>
</li>
<li>Videoposnetki
<ul>
<li>3D</li>
<li>Oblikovanje medijev</li>
<li>Splet</li>
</ul>
</li>
<li>Nasveti</li>
<li>Trgovine</li>
</ul>
V posameznem vnosu seznama lahko torej stoji še en seznam. Mimogrede, pri tem nujno ne gre zgolj za naštevalne sezname. Pravzaprav se lahko vstavijo tudi druge vrste seznamov - ki bodo predstavljene v tem priročniku.
Sicer v HTML5 ni nujno potrebno uporabiti zapiralne oznake </li>. Kljub boljši berljivosti pa jo vseeno priporočam. Sintaktično pravilno bi bilo nekaj takega:
<p>Trenutne teme iz foruma</p> <ul> <li>CSS se ne izvaja več <li>Pokazni prostor Hollywoodskega stila iz 40. let <li>Vpogled CSS <li>PHP povezava/prekinitev <li>Moj mali razstavni prostor - začetnik prosi za nasvete! </ul>
Seznami z zaporednimi številkami
Poleg naštevalnih seznamov se lahko definirajo tudi sezname z zaporednimi številkami. Tudi tukaj najprej slika, ki prikaže, kaj pravzaprav pomenijo takšni seznamii z zaporednimi številkami.
Torej, pred vnosi na seznamu so postavljene neprekinjene številke. Seznami z zaporednimi številkami se začnejo z elementom ol.
Naslednji primer prikazuje, kako uporabiti ta element.
<ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>XML</li> </ol>
Kot pri naštevalnih seznamih so tudi tukaj posamezni vnosi označeni z elementom li.
Teoretično se tudi naštevalne sezname lahko gnezdijo.
<ol>
<li>Vodiči
<ol>
<li>2D</li>
<li>3D</li>
<li>Splet</li>
</ol>
</li>
<li>Videoposnetki
<ol>
<li>3D</li>
<li>Oblikovanje medijev</li>
<li>Splet</li>
</ol>
</li>
<li>Nasveti</li>
<li>Trgovine</li>
</ol>Vendar rezultat v brskalniku ni presenetljiv.
Na ta način ni dosežen nabiranega poštevankov.
1. Vodiči 2D
1.1 3D
1.2 Splet
- Videoposnetki 3D
2.1 Oblikovanje medijev
2.2 Splet - Nasveti
- Trgovine
To z navadnim HTML ni mogoče. Dejansko je treba uporabiti CSS, da se vsebine avtomatično oštevilčijo po takšni shemi.
Seznami z definicijami
Še ena vrsta seznamov so t. i. sezname z definicijami. Tudi za to najprej primer, kako tak seznam izgleda v brskalniku:
Glavno področje uporabe seznamov z definicijami so slovarji. Tu je sintaksa, ki je privedla do že prikazane izdaje:
<dl>
<dt>AM</dt>
<dd>AM - Poštni promet</dd>
<dd>AM - Vzdušni marsal</dd>
<dd>AM - Amberg</dd>
<dd>AM - Americium</dd>
<dd>AM - Amstetten</dd>
<dt>AN</dt>
<dd>AN - zgoraj imenovan</dd>
<dd>AN - Dostopno vozlišče</dd>
<dd>AN - Ancona</dd>
</dl>Pri definicijskih seznamih imamo vedno opravka z tremi elementi. Seznami so uvdeni z uporabo elementa dl. To je torej zunanja struktura. Izraz, ki ga želimo definirati, je označen z elementom dt. To je dejansko definicijski izraz. Opis definicije pa je naveden prek elementa dd.
Gnezdene definicijske sezname je mimogrede prav tako mogoče. Deluje enako kot pri prikazu drugih variant seznamov.
Standardni izgled definicijskih seznamov določajo brskalniki. Nazadnje pa lahko želeno postavitev določite sami prek CSS.
V prejšnjih različicah HTML so obstajali tudi menijski in imeniški seznami. Za to so bila uporabljena elementa menu in dir. Elementa dir v HTML5 ni več vključen. Drugače je s elementom menu. Ta element je bil ponovno implementiran in naj bi se ga v prihodnje lahko uporabilo za kontekstna menija in orodne vrstice. Tukaj je primer, kako si W3C predstavlja tipično uporabo elementa menu:
<menu type="toolbar"> <li> <menu label="File"> <button type="button" onclick="fnew()">Novo...</button> <button type="button" onclick="fopen()">Odpri...</button> <button type="button" onclick="fsave()">Shrani</button> <button type="button" onclick="fsaveas()">Shrani kot...</button> </menu> </li> <li> <menu label="Edit"> <button type="button" onclick="ecopy()">Kopiraj</button> <button type="button" onclick="ecut()">Izreži</button> <button type="button" onclick="epaste()">Prilepi</button> </menu> </li> <li> <menu label="Help"> <li><a href="help.html">Pomoč</a></li> <li><a href="about.html">O programu</a></li> </menu> </li> </menu>
Trenutno ta oblika še ni podprta s strani nobenega brskalnika.
Zato elementa menu za zdaj še ni priporočljivo uporabljati.
Oblikovanje seznamov
Še ena opomba o seznamih. Na mnogih spletnih mestih se za oblikovanje seznamov uporabljajo ustrezne HTML atribute. Tako je na primer mogoče z uporabo <ul type="square"> poskrbeti, da se pred vnosi v seznamih z znaki pokažejo pravokotniki.
Za oštevilčene sezname je prav tako mogoče določiti vrsto oštevilčevanja.
<ol type="A">
Seveda pa velja, da ni vedno priporočljivo uporabiti vsega, kar je na voljo. Bolj primerni so ustrezni CSS lastnosti. Te je torej smiselno uporabiti, da določite videz seznamov po svojih željah. Podrobne informacije o CSS bodo sledile v okviru te serije.
