Sunteți pe pagina 1din 18

Prof.

Liliana chiopu

LISTE IN HTML

Cuprins
1. Tipuri de liste
2. List neordonat. Exemplu
3. List ordonat. Exemplu

4. Liste de definiii. Exemple


5. Sintaxa general a listelor
6. Crearea listelor neordonate
7. Crearea listelor ordonate
8. Crearea listelor de definiii
9. Liste imbricate
10. Bibliografie

Tipuri de liste
Exista 3 tipuri de liste:
1. Liste neordonate
2. Liste ordonate (sau numerotate)
3. Liste de definiii

1.List neordonat. Exemplu

Merele sunt verzi


Bananele sunt galbene
Portocalele sunt portocalii

2.List ordonat. Exemplu


O list ordonat cuprinde intrri
marcate ntr-un mod care s sugereze
ordonarea lor:
1. Aprindei pocnitoarea.
2. Aruncai-o.

3.Liste de definiii. Exemple


Acestea sunt folosite n cazul cnd fiecare element al listei are
nevoie de un sumar, urmat de o descriere mai detaliat. De
exemplu:
Paris, Frana
Capitala Franei. Printre atracii se numar turnul Eiffel i
catedrala Notre Dame.
Sydney, Australia
Capitala statului New South Wales, Australia. Atracii:
Opera i podul Harbour.
Londra, Anglia
Capitala Angliei. Obiective turistice: Tower Bridge i Big
Ben.

Sintaxa general a listelor


<LI [VALUE=nnnn] [TYPE=1|a|A|i|I|disk|square|circle]>
element-de-lista
[</LI>]
specific un element ntr-o lista ordonat, neordonat

Sintaxa general a listelor


VALUE indic valoarea numeric de nceput pentru o list
ordonat. Implicit este 1 si nu trebuie specificat la orice
intrare LI ci numai dac o list este ntrerupt printr-un alt
text, necesitnd un alt nceput de numerotare;
TYPE permite (nu n toate browserele) s se fixeze stilul pentru
buline sau pentru numerotri:
1 - numr arabic (implicit);
a - litere mici;
A - litere mari;
i - numr roman mic (i, iv etc.);
I - numr roman mare (I, IV etc.);

Sintaxa general a listelor


disk - cerc plin (implicit pentru liste neordonate);
square - ptrat plin;
circle - cerc gol;
element-de list poate fi orice (hiper)text.
Deoarece dup continutul containerului LI ncepe un alt tag LI,
sau se termin o list, terminatorul de tag nu este
obligatoriu.
Este inserat automat un sfrsit de paragraf la terminarea unui
tag LI.

Crearea listelor neordonate


Pentru a crea o list neordonat folosim tag-urile
<UL></UL>; la nceputul i sfritul listei i <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 opionale, dar le vom folosi pentru a evita
ambiguitile.)

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 definiii


Lista va fi creat folosind tag-urile <DL> i
</DL> pentru nceput i sfrit. Fiecare
element al listei este alctuit dintr-un termen

creat cu ajutorul tag-urilor <DT></DT> i


definiia propriu-zis pentru care sunt folosite
tag-urile <DD></DD>.

Crearea listelor de definiii


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 n cadrul unei liste s avem o alt
list. De exemplu, o list cu dou niveluri poate fi:
1. Capitolul 1
1. Seciunea 1.1
2. Seciunea 1.2
2. Capitolul 2
1. Seciunea 2.1
2. Seciunea 2.2
3. Seciunea 2.3

Liste imbricate
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>

Liste imbricate
Pot fi imbricate tipuri diferite de liste. n exemplul urmtor,
liste ordonate i cele neordonate sunt definite n cadrul unei
liste de definiii.

Liste imbricate
Codul HTML este:
<dl>

<dt><strong>Fructe</strong>

<dt><strong>Instructiuni
pentru artificii</strong></dt>

</dt>

<dd>

<dd>
<ul>

<li> Merele sunt verzi </li>


<li> Bananele sunt galbene </li>
<li> Portocalele sunt portocalii
</li>
</ul>
</dd>

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

Bibliografie
http://www.e-learn.ro/tutorial/html/v-

liste/74/1/121.htm
http://profs.info.uaic.ro/~val/liste.html