Avtor: -primož-
04.11.09
| HTML seznami |
| HTML vodiči |
 Seznami in napotki za uporabo.Seznami se na spletnih straneh uporabljajo za naštevanje, še bolj pa za menije. V tem vodiču vam bom pokazal 3 vrste seznamov, kako jih oblikovati ter, kako dati seznam v seznam. Seznami:
1. Neurejen seznamNeurejen seznam ali unordered list se začne z <ul> in konča z </ul>. Vmes nanizamo elemente, ki jih postavimo med <li> in </li>. Privzeto je za tip seznama nastavljen poln krogec (disc). Kako spremeniti to si lahko ogledate spodaj. HTML primer:<html>
<head> </head> <body> <ul> <li>Prvi element</li> <li>Drugi element</li> <li>Trinajsti element</li> <li>Stoti element</li> </ul> </body> </html> Prikaz neurejenega seznama 2. Urejen seznamUrejen seznam ali ordered list se začne z <ol> in konča z </ol>, vmesni elementi pa so, kot pri neurejenem seznamu med <li> in </li>. Privzet tip je številsko naštevanje (decimal). Tudi to lahko spremenite v črke, grške črke ... HTML primer:<html>
<head> </head> <body> <ol> <li>Prvi element</li> <li>Drugi element</li> <li>Tretji element</li> </ol> </body> </html> Prikaz urejenega seznama 3. Opisni seznamOpisni seznam ali Definition list ponuja več možnosti, saj je zgrajen tako, da poleg elementov podamo tudi opis za te element. Začne se z <dl> in konča z </dl>. Element vpišete med <dt> in </dt>, opis elementa pa med <dd> in </dd>. Opisi so zamaknjeni v desno. Za boljše razumevanje si oglejte priloženo HTML kodo in prikaz. HTML primer:<html>
<head> </head> <body> <dl> <dt>Prvi element</dt> <dd> Opis prvega elementa</dd> <dt>Drugi element</dt> <dd> Opis drugega elementa</dd> <dt>Tretji element</dt> <dd> Opis tretjega elementa</dd> </dl> </body> </html> Prikaz opisnega seznama 4. Tip seznamaTip seznama določa, kakšen simbol se bo pojavil pred elementi seznama. Tip določimo z atributom type=" ". Med " " vpišemo besedo ali znak, ki predstavlja določen tip. Tipi za neurejen seznam (ul) so: none, disc, circle, square. Tipi za urejen seznam (ol) so: none, A, a, I, i. HTML primer:<html>
<head> </head> <body> <ul type="none"> <li>Prvi element</li> <li>Drugi element</li> <li>Trinajsti element</li> </ul> <ul type="circle"> <li>Prvi element</li> <li>Drugi element</li> <li>Petdeseti element</li> </ul> <ol type="I"> <li>Prvi element</li> <li>Drugi element</li> <li>Trinajsti element</li> <li>Stoti element</li> </ol> </body> </html> Prikaz različnih tipov seznamov 5. Seznam v seznamuSpodaj je podana koda, ki vam pokaže, kako se doda seznam v seznam, vsakemu posebej pa se da določiti tudi tip. HTML primer:<html>
<head> </head> <body> <ol type="I"> <li>Prvi element</li> <li>Drugi element <ol type="decimal"> <li>prvi podelement</li> <li>drugi podelement</li> <li>tretji podelement</li> </ol> </li> <li>Trinajsti element</li> <li>Stoti element</li> </ol> </body> </html> Prikaz seznama v seznamu 6. List-styleTo poglavje spada že pod CSS, toda s pomočjo list-style lahko namesto simbolov (krogec, kvadratek) določite svoje slikice oz. svoje simbole. Kako se to naredi si lahko ogledate v CSS vodiču list-style. 7. Vodoravni seznamDa je s pomočjo seznama možno narediti meni sem že omenil. Na spletni strani Moje-Mesto.com pa je tudi vodič, kako navaden (navpičen) seznam narediti, da bo vodoraven. To se da narediti s pomočjo CSSja ( display: inline; ), kar si lahko ogledate v vodiču vodoravni seznam s CSSjem. Upam, da ste se s tem vodičem kaj novega naučili. Poskusite razmisliti, kako bi lahko uporabili seznam pri svojem meniju na spletni strani in koliko časa bi vam seznam prihranil. |
| Sorodni vodiči | |
Moje-Mesto.com
Slovenska spletna stran s HTML, CSS, Windows in Photoshop vodiči.
