Liste

In acest tutorial vei invata cum iti poti organiza continutul paginii tale Web cu ajutorul listelor. Vom
studia listele ordonate, neordonate si de definitii.

Tipuri de liste

Exista 3 tipuri pentru liste:

1. Liste neordonate (cunoscute si ca "bullet"). De exemplu:

• Merele sunt verzi
• Bananele sunt galbene
• Portocalele sunt portocalii

2. Liste ordonate (sau numerotate). De exemplu:

1. Aprindeti pocnitoarea.
2. Aruncati-o.

3. Liste de definitii
Acestea sunt folosite in cazul cand fiecare element al listei are nevoie de un sumar, urmat de descriere
mai detaliata. De exemplu:

Paris, Franta
Capitala Frantei. Printre atractii se numara turnul Eiffel si catedrala Notre Dame.
Sydney, Australia
Capitala statului New South Wales, Australia. Atractii: Opera si podul Harbour.
Londra, Anglia
Capitala Angliei. Obiective turistice: Tower Bridge si Big Ben.

Sa vedem cum putem crea aceste tipuri de liste in HTML.

Crearea listelor neordonate

Pentru a crea o lista neordonata folosim tag-urile <UL></UL>; la inceputul si sfarsitul listei si
<LI></LI> pentru fiecare element.

Pentru exemplul de mai sus, codul HTML este:

<ul>
<li> Merele sunt verzi </li>
<li> Bananele sunt galbene </li>
<li> Portocalele sunt portocalii </li>
</ul>
(Tag-urile </LI> sunt optionale, dar le vom folosi pentru a evita ambiguitatile.)

Crearea listelor ordonate

Pentru listele ordonate (numerotate), metoda este aceeasi, cu singura deosebire ca tag-urile folosite
vor fi <OL></OL> in loc de <UL></UL>.
Pentru exemplul de mai sus, codul este:

<ol>
<li> Aprindeti pocnitoarea.</li>
<li> Aruncati-o.</li>
</ol>

Crearea listelor de definitii

Listele de definitii sunt ceva mai greu de realizat fata de primele doua tipuri, dar metoda este totusi
destul de simpla.

Lista va fi creata folosind tag-urile <DL> si </DL> pentru inceput si sfarsit. Fiecare element al listei
este alcatuit dintr-un termen creat cu ajutorul tag-urilor <DT></DT> si definitia propriu-zisa pentru
care sunt folosite tag-urile <DD></DD>.

Deci, codul pentru exemplul de mai sus este:

<dl>
<dt><strong>Paris, Franta</strong></dt>
<dd> Capitala Frantei. Printre atractii se numara
turnul Eiffel si catedrala Notre Dame. </dd>
<dt><strong>Sydney, Australia</strong></dt>
<dd> Capitala statului New South Wales, Australia.
Atractii: Opera si podul Harbour. </dd>
<dt><strong>Londra, Anglia</strong></dt>
<dd> Capitala Angliei. Obiective turistice: Tower Bridge
si Big Ben. </dd>
</dl>

Liste imbricate
Este posibil ca in cadrul unei liste sa avem o alta lista. De exemplu, o lista cu doua niveluri poate fi:

1. Capitolul 1
1. Sectiunea 1.1
2. Sectiunea 1.2
2. Capitolul 2
1. Sectiunea 2.1
2. Sectiunea 2.2
3. Sectiunea 2.3

Codul HTML pentru crearea listei de mai sus este:

<ol>
<li>Capitolul 1
<ol>
 <li> Sectiunea 1.1</li>
<li> Sectiunea 1.2</li>
</ol>
</li>
<li>Capitolul 2
<ol>
<li> Sectiunea 2.1</li>
<li> Sectiunea 2.2</li>
<li> Sectiunea 2.3</li>
</ol>
</li>
</ol>

Pot fi imbricate tipuri diferite de liste. In exemplul urmator, liste ordonate si cele neordonate sunt
definite in cadrul unei liste de definitii.

Fructe
• Merele sunt verzi
• Bananele sunt galbene
• Portocalele sunt portocalii

Instructiuni pentru artificii

1. Aprindeti pocnitoarea.
2. Aruncati-o.

Codul HTML este:

<dl>
<dt><strong>Fructe</strong></dt>
<dd>
<ul>
<li> Merele sunt verzi </li>
<li> Bananele sunt galbene </li>
<li> Portocalele sunt portocalii </li>
</ul>
</dd>
<dt><strong>Instructiuni pentru artificii</strong></dt>
<dd>
<ol>
<li>Aprindeti pocnitoarea.</li>
<li>Aruncati-o.</li>
</ol>
</dd>
</dl>

Pentru a exersa, incearca sa creezi singur(a) cateva liste pe care sa le poti folosi in paginile tale HTML.