Utilizarea listelor

Pentru a prezenta informațiile în mod structurat se impune, de cele mai multe ori, utilizarea
listelor.
Categorii de liste:
- Liste neordonare;
- Liste ordonate;
- Liste de definiții.

Liste neordonate / Liste cu marcatori (UnorderedList)

 Elementele listei sunt încadrate între etichetele <UL> și </UL>
 Fiecare element (intrare) este precedat de <LI> (ListItem)
Exemplu: (1)
<P>
Servicii Internet
<UL>
<LI> Poșta electronică
<LI> Transfer de fișiere (FTP)
<LI> Conectare la distanță prin Telnet
<LI> …
</UL>
</P>
La vizualizare, elementele listei sunt precedate de un simbol și sunt indentate.
Selectarea simbolului este posibilă cu ajutorul atributului TYPE, specific tag-ului <UL>, astfel:

TYPE = disc
circle
square

Exemplu: <UL TYPE=square>

Obs. Simbolul implicit depinde de nivelul de imbricare
Exemplu: (2)
<P>
<UL>
<LI> profil real
<UL>
<LI> matematică-informatică
<LI> științe ale naturii
</UL>
<LI> profil umanist
<UL>
<LI>filologie
<LI> științe sociale
</UL>
</UL>
</P>
Temă:
În subdirectorul PAG8, construiți pagina Web pag8.html astfel:
- titlul: Liste
- corpul conține listele neordonate din exemplele (1) și (2)
Vizualizați pagina Web și observați simbolurile implicite care preced elementele listei.
 Adăugați elementului matematică-informatică, dinlista prezentată în exemplul (2), un nou nivel
astfel încât să fie adăugate specializările:
matematică- informatică, intensiv informatică
matematică- informatică, intensiv lb. engleză
Vizualizați pagina Web. Folosiți atributul TYPE pentru a modifica tipul de simbol implicit.
Adăugați o nouă listă care cuprinde minim 3 posibilități de petrecere a timpului liber.
Vizualizați pagina Web.

Liste ordonate / Liste numerotate (OrderedList)

 Elementele listei sunt încadrate între etichetele <OL> și </OL>
 Fiecare element (intrare) este precedat de <LI> (ListItem)

Exemplu: (3)
<P>
Servicii Internet
<OL>
<LI> Poșta electronică
<LI> Transfer de fișiere (FTP)
<LI> Conectare la distanță prin Telnet
<LI> …
</OL>
</P>
Atribute specifice tag-ului <OL>:
TYPE = 1 ( cifre arabe: 1, 2 3, …) Implicit!!!
a (litere mici: a, b, c, … )
A (Litere mari: A, B, C, …)
i (cifre romane, mici: i, ii, iii, … )
I (cifre romane mari: I, II, III, …)
START=număr (se specifică, explicit, valoarea de la care începe numerotarea listei)
VALUE=număr
Elementele listei sunt numerotate automat. Dacă doriți să modificați valoarea cu care este numerotat un
element, includeți în eticheta <LI> corespunzătoare, atributul VALUE, căruia îi asociați valoarea de
etichetare astfel: VALUE=număr
Exemplu: (4)
<P>
Discipline la alegere
<OL>
<LI> Chimia culorilor
<LI>Matematică distractivă
<LI> Literatură, teatru, film
<LI>Educație pentru sănătate
</OL>
</P>

Exemplu: (5)
<P>
Arbori și arbuști
<OL TYPE=I start=3>
<LI>Meri
<LI>Peri
<LI VALUE=10>Pruni
 <LI VALUE=20>Piersici
</OL>
</P>

Temă:
Adăugați, în pagina pag8.html, exemplul (4)
Vizualizați pagina Web.
Completați tagul<OL> astfel: <OL TYPE=a> . Vizualizați pagina Web.
Completați tagul<OL TYPE=a> astfel: <OL TYPE=a START=3> . Vizualizați pagina Web.
Modificați tagul<OL TYPE=a START=3> astfel: <OL TYPE=A START=3> . Vizualizați pagina Web.
Modificați tag-ul<OL TYPE=I> . Vizualizați pagina Web.
Completați tag-ul<OL TYPE=I> astfel: <OL TYPE=I start=5>. Vizualizați pagina Web.
Adăugați exemplul (5). Vizualizați pagina Web. Observați cum au fost numerotate elementele listei. Atenție
la ultimele 2 elemente.

Liste de definiții

Pentru construirea unei liste de definiții se folosesc etichetele <DL> și </DL>, între care vor fi
încadrate intrările în listă. În acest caz, o intrare în listă este construită din două părți:
- un termen (etichetat cu <DT> - DefinitionTerm);
- o definiție ( etichetată cu <DD> - DefinitionDescription).
Exemplu: (6)
<DL>
<P>
<DT> Abilități artistice
<DD> Teatru; Pictură; Divertisment
</P>
<P>
<DT> Abilități sportive
<DD> Baschet; Volei; Fotbal
</P>
<P>
<DT> Abilități de comunicare
<DD> Limbi străine; Oratorie
</P>
</DL>

Temă:
Adăugați în pagina pag8.html secvența din exemplul (6). Vizualizați pagina Web.
Ștergeți din exemplul (6) tagurile <P> și </P>. Ce observați?