Mereu apare nevoia realizarii unei liste, iar daca asta se poate si in HTML cu atat mai bine. Scopul listelor este acela de a enumera sau de a scoate in evidenta elementele care fac parte din acestea.
Listele ordonate – <ol></ol>
Listele ordonate se folosesc de enumerari pentru a afisa elementele, fie ca este vorba de enumerari cu cifre arabe, cifre romane sau litere.
O lista este definita prin elementul <ol></ol> (ordered list), itemii care sunt cuprinsi de aceasta aflandu-se intre tag-urile <li> si </li> (list item). Astfel, daca vrem sa enumeram, scriem asa:
<ol>
<li>Mere</li>
<li>Pere</li>
<li>Portocale</li>
<li>Banane</li>
<li>Cirese</li>
</ol>Rezultatul fiind…
Listele ordonate pot accepta mai multe atribute:
Tipuri de liste ordonate. Atributul type
Daca vrem ca enumerarea sa se fac cu un anumit tip de cifra sau cu litere, ne putem folosi de atributul “type”. Acesta accepta ca valori:
“1” – pentru enumerare cu cifre arabe;
“i” sau “I” – pentru enumerare cu cifre romane mici, respectiv mari
“a” sau “A” – pentru enumerare cu litere mici, respectiv mari.
Prin urmare, o lista scrisa astfel:
<ol type="I">
<li>Mere</li>
<li>Pere</li>
<li>Portocale</li>
<li>Banane</li>
<li>Cirese</li>
</ol>… ar arata astfel…
5,4,3,2,1 sau cum faci un top ordonat. Atributul reversed
Poti alege ca lista sa inceapa enumerarea de la cifra/litera cea mai avansata si sa se termine cu 1 prin folosirea atributului “reversed”.
Astfel,
<ol reversed="reversed">
<li>Mere</li>
<li>Pere</li>
<li>Portocale</li>
<li>Banane</li>
<li>Cirese</li>
</ol>va fi afisat ca:
Eu stiu sa numar doar de la… Atributul start
Poti alege chiar sa numeri elementele unei liste incepand de la un anumit numar/litera. Pentru asta te folosesti de atributul “start” dand ca valoare numarul de la care vrei sa incepi numaratoarea.
Spre exemplu, codul:
<ol type="A" start="3">
<li>Mere</li>
<li>Pere</li>
<li>Portocale</li>
<li>Banane</li>
<li>Cirese</li>
</ol>…va fi afisat astfel:
Listele neordonate – <ul></ul>
Listele neordonate nu enumera, acestea oferind doar un element grafic (bullet) care sa scoata in evidenta itemii listei. O lista neordonata este cuprinsa intre tag-urile <ul> si </ul> (unordered list). Itemii listei neordonate sunt, de asemenea, cuprinsi intre tag-urile <li> si </li>.
Codul:
<ul>
<li>Mere</li>
<li>Pere</li>
<li>Portocale</li>
<li>Banane</li>
<li>Cirese</li>
</ul>…va fi afisat de cele mai multe browsere astfel:
In trecut, si elementul <ul></ul> putea avea atributul “type”, acesta putand lua ca valori “disc”, “square” sau “circle”. In prezent, stilizarea elementelor grafice se face prin CSS.
Listele de tip definitie – <dl></dl>
Listele de tip definitie, reprezentate prin elementul <dl></dl> (definition list) se diferentiaza de celelalte liste pe care ti le-am prezentat mai sus prin faptul ca acestea accepta doua elemente: unul al termenului definit (<dt></dt> – definition term) si unul al definitiei (<dd></dd> – definition define).
O lista de tip definitie:
<dl>
<dt>Mar</dt>
<dd>Fruct dulce acrisor</dd>
<dt>Banana</dt>
<dd>Fruct doar dulce</dd>
</dl>… ar arata cam asa:
Bineinteles, desi nu ti-am spus pana acum, orice element din lista poate sa contina ale liste. In incheiere, am o singura intrebare: Sa iti fac o lista?
