LISTE IN HTML

Cuprins1. Tipuri de liste2. Listă neordonată. Exemplu3. Listă ordonată. Exemplu4. Liste de definiții. Exemple5. Sintaxa generală a listelor6. Crearea listelor neordonate7. Crearea listelor ordonate8. Crearea listelor de definiții9. Liste imbricate10.Bibliografie

Tipuri de liste

Exista 3 tipuri de liste:

1. Liste neordonate2. Liste ordonate (sau

numerotate) 3. Liste de definiții

1.Listă neordonată. Exemplu

Merele sunt verzi � Bananele sunt galbene � Portocalele sunt portocalii

2.Listă ordonată. Exemplu

O listã ordonatã cuprinde intrãri marcate într-un mod care sã sugereze ordonarea lor:

1. Aprindeți pocnitoarea. 2. Aruncați-o.

3.Liste de definiții. ExempleAcestea sunt folosite în cazul când fiecare element al

listei are nevoie de un sumar, urmat de o descriere mai detaliată. De exemplu:Paris, Franța

Capitala Franței. Printre atracții se numară turnul Eiffel și catedrala Notre Dame.

Sydney, Australia Capitala statului New South Wales, Australia. Atracții: Opera și podul Harbour.

Londra, AngliaCapitala 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 listelorVALUE 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, necesitând un alt început de numerotare;

TYPE permite (nu în toate browserele) sã se fixeze stilul pentru buline sau pentru numerotãri:

1 - numãr arabic (implicit);a - litere mici;A - litere mari;i - numãr roman mic (i, iv etc.);I - numãr roman mare (I, IV etc.);

Sintaxa generală a listelordisk - cerc plin (implicit pentru liste neordonate);

square - pãtrat 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 sfârsit de paragraf la terminarea unui tag LI.

Crearea listelor neordonatePentru a crea o listă neordonată folosim tag-

urile <UL></UL>; la începutul și sfârșitul 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 opționale, dar le vom folosi pentru a evita ambiguitățile.)

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 definiții Lista va fi creată folosind tag-urile

<DL> și </DL> pentru început și sfârșit. Fiecare element al listei este alcătuit dintr-un termen creat cu ajutorul tag-urilor <DT></DT> și definiția propriu-zisă pentru care sunt folosite tag-urile <DD></DD>.

Crearea listelor de definițiiCodul 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. Secțiunea 1.1 2. Secțiunea 1.2 2. Capitolul 2 1. Secțiunea 2.1 2. Secțiunea 2.2 3. Secțiunea 2.3

Liste imbricate

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

Codul HTML pentru crearea listei de mai sus este:

Liste imbricatePot fi imbricate tipuri diferite de liste. În exemplul următor, liste ordonate și cele neordonate sunt definite în cadrul unei liste de definiții.

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

Bibliografie

http://www.e-learn.ro/tutorial/html/v-liste/74/1/121.htm

http://profs.info.uaic.ro/~val/liste.html