După cum aţi văzut până acum, limbajul HTML ne oferă aceleaşi facilităţi ca un editor de text avansat. Această observaţie se aplică şi în cazul listelor, ba chiar, după cum veţi observa în continuare, instrumentele de creare a listelor sunt chiar mai puternice decât cele ale multor editoare de text.

<OL>...</OL> Ordered List (listă ordonată)

Marcajul <OL> se foloseşte împreună cu marcajul <LI> (List Item, element al listei); o listă creată sub forma:

<OL>
<LI>Primul element
<LI>Al doilea element
...
</OL>

va fi afişată indentat faţă de nivelul normal al textului şi numerotată cu cifre arabe, începând cu "1" (implicit)

Exemplul 4.1

Modul de numerotare al listei poate fi indicat cu ajutorul atributului TYPE, după cum urmează:

<OL TYPE=A> A, B, C,...
<OL TYPE=a> a, b, c,...
<OL TYPE=I> I, II, III,...
<OL TYPE=i> i, ii, iii,...
<OL TYPE=1> 1, 2, 3,... (implicit, nu trebuie precizat)

Elementul de pornire al numerotării poate fi precizat prin atributul START:

<OL TYPE=A START=3> C, D, E,...

Exemplul 4.2 afişează liste realizate cu opţiunile prezentate mai sus

<UL>...</UL> Unordered List (listă neordonată)

Listele neordonate nu sunt numerotate, ci au itemii marcaţi cu un bullet. Ca şi la o listă ordonată, marcajul <LI> indică itemii listei, iar atributul TYPE setează bullet-ul folosit:

<UL>
<LI>Primul element
<LI>Al doilea element
...
</UL>

 Exemplul 4.3 listă neordonată simplă

TYPE="disc" (implicit, bullet circular plin)
TYPE="circle" (bullet circular)
TYPE="square" (bullet pătrat)

Exemplul 4.4 prezintă liste realizate cu opţiunile de mai sus

Tips & Tricks:  

<DL>...</DL> Definition List (listă de definiţii)

Tag-ul <DL> crează o listă de definiţii şi se foloseşte împreună cu tag-urile:

<DT> Definition Term (termenul definit)
<DD> Definition Data (definiţia termenului respectiv)

sub forma:

<DL>
<DT>termen1</DT><DD>definiţie1</DD>
<DT>termen2</DT><DD>definiţie2</DD>
...
</DL>

 Exemplul 4.7

<DIR>...</DIR> Directory List

Acest marcaj poate fi folosit pentru a prezenta o listă de itemi care pot fi aranjaţi în coloane cu lăţimea uzuală de 24 de caractere; marcajul se foloseşte împreună cu <LI>:

<DIR>
<LI>A-H
<LI>I-M
<LI>N-R
<LI>S-Z
</DIR>

Exemplul 4.8

<MENU>...</MENU> Listă meniu

Listele meniu sunt alcătuite din elemente singulare scrise pe o singură linie, iar elementele meniului sunt indicate de marcajul <LI>. Afişarea este mai compactă de cât cea obţinută cu marcajul <UL>:

<MENU>
<LI>File
<LI>Edit
<LI>Help
</MENU>

Exemplul 4.9

Tips & Tricks:  

 Exemplul 4.10 listă ordonată şi listă de definiţii în interiorul unei liste neordonate  Exerciţii

Exerciţiul 4.1: Creaţi pagina ordlist1.html, în care afişaţi o listă ordonată simplă
Exerciţiul 4.2: Creaţi pagina ordlist2.html, în care afişaţi liste ordonate folosind toate valorile posibile ale atributului TYPE
Exerciţiul 4.3: Creaţi pagina ordlist3.html, în care afişaţi o listă ordonată numerotată cu cifre romane, începând cu numărul IV
Exerciţiul 4.4: Creaţi pagina unord1.html, în care afişaţi o listă neordonată simplă
Exerciţiul 4.5: Creaţi pagina unord2.html, în care afişaţi liste neordonate folosind toate valorile posibile ale atributului TYPE
Exerciţiul 4.6: În pagina deflist.html, afişaţi o listă de definiţii
Exerciţiul 4.7: În pagina dirlist.html, afişaţi o listă de directoare
Exerciţiul 4.8: În pagina menulist.html, afişaţi o listă-meniu
Exerciţiul 4.9: Realizaţi pagina combo.html, în care afişaţi o listă de definiţii inclusă într-o listă neordonată, inclusă - la rândul ei - într-o listă ordonată

 Teste
Daca doriti eliminarea reclamelor, va rugam sa ne contactati.
Google