Utilizarea listelor

    In multe cazuri, pentru a prezenta in mod structurat informatiile, se impune utilizarea nuor liste. Daca elementele listei au legatura intre ele, dar nu este necesar sa fie prezentate intr-o anumita ordine, se utilizeaza listele neordonate. Daca elementele listei sunt intr-o anumita ordine si este indicat sa fie parcurse astef, se utilizeaza listele ordonate. Un caz particular de liste sunt cele de definitii, in care intrarile sunt formate din doua paragrafe (unul corespondent termenului, al doilea, indentat, corespunzator definitiei termenului).

    Listele neordonate (Unordered List) sunt incadrate de etichetele <UL> si </UL>. Fiecare intrare in lista (List Item) este precedata de eticheta <LI>.
De exemplu,
Sursa:
Pagini Web
<UL>
  <LI>Limajul HTML 4.0
  <LI>Stilurile CSS
  <LI>Dynamic HTML
  <LI>...
</UL>
Efect in browser:
Pagini Web

• Limbajul HTML 4.0
  
• Stilurile CSS
  
• Dynamic HTML
  
• ...
  

    Se observa ca intrarile in lista neordonata din exemplu sunt precedate de o bulina sunt indentate. Selectarea simbolului care preceda fiecare intrare in lista este posibila prin intermediul atributului TYPE, caruia i se pot asocia trei valori (disc, circle si square). Simbolul implicit depinde de nivelul de indexare a elementului listei.
De exemplu,
Sursa:
<UL>
<LI>Primul nivel (implicit disc)
<UL>
<LI>Al doilea nivel (implicit circle)
<UL>
<LI>Al trilea nivel (implicit square)
</UL>
<LI> Tot nivelul al doilea
</UL>
<LI> Tot primul nivel
</UL>
Efect in browser:

• Primul nivel (implicit disc)
  • Al doilea nivel (implicit circle)
    • Al trilea nivel (implicit square)
  • Tot nivelul al doilea
• Tot primul nivel

    Crearea unei liste ordonate (Ordered List) se face incadrand intrarile din lista intre ethichetele pereche <OL> si </OL>.
Sursa:
Elevii clasei X - C
<OL>
<LI>Ardelean Daniel <LI>Barbu Denisa <LI>Danci Alex <LI>... </OL>
Efect in browser:
    Elevii clasei X - C

1. Ardelean Daniel
2. Barbu Denisa
3. Danci Alex
4. ...
   

    Modul de numerotare a intrilor in lista este determinat de atibutul TYPE, care poate lua valorile 1 (ceea ce specifica numerotare cu cifre arabe: 1,2,3,..), a (intrarile in lista sunt precedate de literele mici ale alfabetului latin: a,b,c,...), A (intrrile in lista sunt precedate de literele mari ale alfabetului latin: A,B,C,...), i (numerotare cu cifre arabe mici: i,ii,iii,..) sau I (numerotare cu cifre romane mari: I,II,III,..). Valoarea de la care incepe numerotarea depinde de valoarea atributului TYPE si este implicit 1 (pentru liste numerotate cu cifre arabe), i sau I (pentru liste numerotate cu cifre romane, respectiv a sau A (in rest). Prin intermediul atributului START se poate specifica explicit valoarea de la care incepe numaratoarea listei:
START = numar
    Intrarile in lista sunt numerotate automat. Daca se doreste modificarea valorii cu care este automat numerotata o intrare in lista, se poate include eticheta <LI> corespunzatoare intrarii respective atributului VALUE, caruia i se asociaza valoarea de etichetare a intrarii in lista respective:
VALUE= numar

De exemplu,
Sursa:
Lista numerotata cu cifre
<OL TYPE=I START=3>
<LI> Primul element al listei
<LI VALUE = 10> Al doilea element al listei
<LI VALUE = 20> Al treilea element al listei
<LI> Al patrulea element al listei
</OL>
Efect in browser:
Lista numerotata cu cifre romane

3. Primul element al listei
10. Al doilea element al listei
20. Al treilea elemnt al listei
21. Al patrulea element al listei
    

    Crearea unei liste de definitii se realizeaza cu ajutorul etichetelor pereche <DL> si </DL>, intre care vor fi incadrate intrarile in lista. In acest caz, o intrare in lista este constituita din doua parti:

• un termen (etichetat cu <DT> - Definition Term), care poate contine doar elemente de forma inline;
• o definitie (etichetata cu <DD> - Definition Description), care poate contine elemente de formatare la nivel de bloc.

Spre exemplificare,
Sursa:
<DL>
<DT> Liste ordonate.
<DD> Elementele listei trebuie parcurse in ordinea numerotarii.
<P>
<DT> Liste neordonate
<DD> Elementele listei nu trebuie parcurse in ordine.
<P>
<DT> Liste de definitii.
<DD> Elementele listei au doua parti: termenul si descrierea sa.
</DL>
Efect in browser:

Liste ordonate.

Elementele listei trebuie parcurse in ordinea numerotarii.

Liste neordonate

Elementele listei nu trebuie parcurse in ordine.

Liste de definitii.

Elementele listei au doua parti: termenul si descrierea sa.

HTML | DHTML | Java | Javascript | Grafica | Design | CGI | PHP |