capitolul 8 liste

7/21/2019 Capitolul 8 Liste

http://slidepdf.com/reader/full/capitolul-8-liste 1/7

Capitolul 8Liste

Listele reprezintă unele dintre cele mai obişnuite elemente dintr-o pagină Web. Acestea sunt deseori folosite pentru a prezentainformaţiile în mod organizat, într-o manieră accesibilă şi uşor de parcurs.Ele pot fi de trei tipuri:

• liste ordonate marcate prin numere sau litere!,

• liste neordonate marcate prin cratime, buline sau alte simboluri!

• liste de definiţii, afişate fără nici un fel de marca".

#n interiorul etic$etelor care delimitează o listă pot fi folosite orice alte etic$ete %&'L, cum ar fi etic$ete de formatare a te(tului,legături, imagini, etc.

1. Liste neordonate

) listă neordonată reprezintă o colecţie de elemente înrudite, dispuse într-o ordine oarecare. *n e(emplu tipic pentru o pagină Webeste o listă de lin+-uri spre alte documente.Acest tip de listă este de fapt un bloc de te(t delimitat de etic$etele

<UL> </UL> unordered list listă neordonată!. Etic$eta de înc$idere </UL> este obligatorie.

iecare element al listei este introdus prin etic$eta <LI> list item!. u toate că etic$eta <LI> este o etic$etă container, etic$eta sa deînc$idere, </LI>, este opţională. /acă nu este prezentă, la înt0lnirea unei noi etic$ete <LI> se consideră că 1ec$ea etic$etă esteînc$isă.

Lista 1a fi afişată indentat faţă de restul paginii şi fiecare element al listei începe pe un r0nd nou. #n mod prestabilit, fiecare element allistei 1a fi marcat bulleted ! cu 2bulină2. E(emplul 3.4 construieşte o listă neordonată, aspectul său fiind cel dinigura 3.4.

Exemplul 8. 1

<HTML>

<HEAD>

<TITLE>liste1</TITLE>

</HEAD>

<BODY>

<H1 align="center">Lista neordonata</H1><H>

<UL>!lori

<LI>Blac#

<LI>$%ite

<LI>ed

<LI>&reen

<LI>Ble

<LI>Yello'

<LI>(r)le

<LI>A*a

</UL>

</BODY>

</HTML>

Etic$etele <UL> şi <LI> pot a1ea definit atributul type care stabileşte caracterul afişat în faţa fiecărui element al listei. 5alorile posibile al acestui atribut sunt:

• circle cerc!

• disc disc plin! - 1aloarea prestabilită

• s*are patrat!

Lista din E(emplul 3.6 are atributul t+)e setat la 1aloarea "s*are". Lista este marcată aşa cum se poate 1edea în igura 3.6

Exemplul 8. 2

<HTML>

<HEAD>

<TITLE>liste,</TITLE>

</HEAD>

4

http://www.softpageinternet.ro/manual_html/Figuri/Figura%208_1.html







<BODY>

<H1 align="center">Atri-tl t+)e la liste neordonate</H1><H>

<UL t+)e="s*are">Li.-ae de )rogra.are

<LI>!

<LI>!00

<LI>(ascal

<LI> Basic

<LI>(erl

</UL>

</BODY>

</HTML>

7etarea atributului t+)e pentru un item al listei înlocuieşte tipul de marca" cu tipul specificat pentru acel item.#n igura 3.8 puteţi obser1a efectul setării atributului t+)e pentru un item indi1idual la listei.

Exemplul 8. 3

<HTML>

<HEAD>

<TITLE>liste</TITLE>

</HEAD>

<BODY>

<H1 align="center">Atri-tl t+)e la ite.l nei liste </H1><H>

<UL t+)e="s*are">Li.-ae de )rogra.are

<LI>!<LI>!00

<LI>(ascal

<LI t+)e="circle">Basic

<LI>(erl

</UL>

</BODY>

</HTML>

Forme particulare de liste neordonate

•

Lista de directoare - este o listă introdusă prin etic$eta <DIR> </DIR> 2 Etic$eta a fost iniţial utilizată pentru alcătuirealistelor de fişiere. 'ulte bro9sere nu fac nici o diferenţă între etic$etele <DI> şi <UL>3 efectul lor fiind acelaşi2

• Lista de meniuri - utilizează etic$eta <MENU> . *nele bro9sere afişează lista doar în format uşor diferit faţă de listeleneordonate, altele însă folosesc c$iar un fel de meniu grafic de tip pull-down pentru afişarea acestor liste.

2. Liste ordonate

) listă ordonată este un bloc de te(t delimitat de etic$etele <OL> </OL> ordered list - listă ordonată!, etic$eta de înc$idere fiindobligatorie.iecare element al listei este iniţiat de etic$eta <LI> list item!. a şi în cazul listelor neordonate, lista 1a fi indentată faţă de restul paginii Web şi fiecare element al listei 1a începe pe o linie nouă./iferenţa faţă de listele neordonate este aceea că în acest caz marcarea elementelor se face prin cifre, nu prin simboluri.E(emplul 3. afişează o listă ordonată, marcată cu cifre arabe aspectul ei fiind cel din igura 3..

Exemplul 8. 4

<HTML>

<HEAD>


</HEAD>

<BODY>

<H1 align="center">Lista ordonata</H1><H>

<OL>!astigatorii concrsli snt5

<LI>(o)esc Maria

<LI>Ionesc Ion

<LI>Brat Ana

</OL></BODY>

</HTML>

6









;entru etic$etele <OL> şi <LI> se poate seta atributul type, care stabileşte tipul de caractere utilizate pentru ordonarea listei.5alorile posibile ale acestui atribut sunt:

A - pentru ordonare de tipul A , < , ...litere mari!a - pentru ordonare de tipul a , b , c...litere mici!I - pentru ordonare de tipul = , == , === , =5...cifre romane mari!i - pentru ordonare de tipul i , ii , iii , i1...cifre romane mici!1 - pentru ordonare de tipul 4 , 6 , 8...cifre arabe - opţiune prestabilită!

/e asemenea etic$eta <OL> poate a1ea setat atributul start3 care stabileşte 1aloarea iniţială a sec1enţei de ordonare. 5aloareaacestui atribut trebuie să fie un număr întreg poziti1.

E(emplul 3.> construieşte o listă numerotată cu cifre romane mari încep0nd de la poziţia a treia. Aspectul paginii care conţine aceastălistă este redat în igura 3.>.

Exemplul 8. 5

<HTML>

<HEAD>


</HEAD>

<BODY>

<H1 align="center">Atri-tl t+)e la liste ordonate</H1><H>

<OL t+)e="I" start="">Manale

<LI>Istorie

<LI>&eogra7ie

<LI>Biologie

<LI>!%i.ie

</OL>

</BODY>

</HTML>

a şi în cazul listelor neordonate, setarea atributului t+)e pentru un anumit item al listei înlocuieşte tipul de numerotare stabilit pentru întreaga listă cu tipul specificat pentru acel element.

3. Imbricarea listelor

#n cadrul unei liste, fie ea ordonată sau neordonată, se pot include alte liste, procedeu numit imbricare. iecare listă nou inclusă în precedenta se 1a afişa indentat faţă de ni1elul listei anterioare.Listele pot fi imbricate în toate modurile dorite, ca în E(emplul 3.?. igura 3.? redă aspectul listei construite în acest e(emplu.

Exemplul 8.

<HTML>

<HEAD>


</HEAD>

<BODY>

<H1 align="center">Liste i.-ricate</H1><H>

<UL>

<LI>Blina 1<OL>

<LI>9.arl 1

<LI>9.arl ,

</OL>

<LI>Blina ,

<LI>Blina

<UL t+)e="s*are">

<LI>(atrat 1

<LI>(atrat ,

<LI>(atrat

</UL>

<LI>Blina 4

</UL>

</BODY>

</HTML>

8









4. Liste de definiţii

Listele de definiţii reprezintă un tip special de liste în care elementele listei nu sunt nici numerotate ca în listele ordonate!, nicimarcate prin buline ca în listele neordonate! şi care prezintă două ni1ele de indentare.

Listele de definiţii sunt blocuri de te(t incluse între etic$etele <DL> </DL> definition list !, etic$eta de înc$idere fiind obligatorie.iecare element al listei este introdus prin etic$eta <DT> definition term!. iecare element introdus prin etic$eta <DT> conţine lar0ndul său un număr de elemente care îl definesc, introduse prin etic$eta <DD> definition description!.

a şi în cazul etic$etei <LI>, etic$etele de înc$idere </DT> şi </DD> sunt opţionale. #n E(emplul 3.@ este construită o listă dedefiniţii.

Exemplul 8. !

<HTML>

<HEAD>

<TITLE>liste:</TITLE>

</HEAD>

<BODY>

<H1 align="center">Liste de de7initii</H1><H>

<DL>

<DT>Iarna

<DD>9inge

<DD>E 7rig

<DD>;ia e .ai scrta dect noa)tea<DT>(ri.aara

<DD>9atra se treeste la iata

<DD>In7loresc )o.ii

<DD>?e intorc )asarile calatoare

<DT>@ara

<DD>Totl e erde

<DD>E 7oarte cald

<DD>;ia e .ai lnga dect noa)tea

<DT>Toa.na

<DD>?e coc 7rctele

<DD>?e strange recolta

<DD>!ad 7rnele

</DL></BODY>

</HTML>

Aspectul listei de definiţii de mai sus este cel din igura 3.@.

Etic$etele <DL> şi </DL> marc$ează începutul şi sf0rşitul listei, termenii care fac parte din listă Iarna, Primăvara, Vara,Toamna ! sunt introduşi prin etic$eta <DT> iar definiţiile termenilor, prin etic$etele <DD>.

7e pot realiza liste ale căror elemente să fie lin+-uri, imagini sau blocuri de te(t. #n E(emplul 3.3, elementele listei sunt imagini, aşacum se poate 1edea în igura 3.3.

Exemplul 8. 8

<HTML>

<HEAD>


</HEAD>

<BODY>

<H1 align="center">Liste de i.agini</H1><H>

<DL>

<DT>lori

<DD>

<IM& src="22/I.agini/rose12)g" 'idt%="1,C" %eig%t="1,C">

<DD>

<IM& src="22/I.agini/orangerose2gi7" 'idt%="1,C" %eig%t="1,C">

<DT>Tetri

<DD>

<IM& src="22/I.agini/sil#2)g" 'idt%="1,C" %eig%t="1,C">

<DD>

<IM& src="22/I.agini/lace2gi7" 'idt%="1,C" %eig%t="1,C">








</DL>

</BODY>

</HTML>

E(emplul 3. creează două liste imbricate de legături. Aspectul paginii care conţine această listă este redat în igura 3.. ;uteţi testadirect funcţionarea listei dacă aţi sal1at fişierele %&'L construite la capitolele anterioare sub numele specificat în blocul <TITLE> alfiecărui document. #n cazul c0nd aţi preferat alte denumiri pentru fişiere, puteţi sc$imba numele fişierelor prezente în cadrule(emplului cu propriile dumnea1oastră fişiere.

Exemplul 8. "

<HTML><HEAD>


</HEAD>

<BODY>

<H1 align="center">Liste de legatri</H1><H>

<OL t+)e="I">

<LI>!lori

<OL>

<LI><A %re7="clori12%t.l">!loarea 7ndalli</A>

<LI><A %re7="clori,2%t.l">!loarea tetli</A>

<LI><A %re7="clori2%t.l">!loarea legatrilor</A>

</OL>

<LI>ontri<OL>

<LI><A %re7="7ontri12%t.l">Etic%eta O9T</A>

<LI><A %re7="7ontri,2%t.l">Etic%eta BA?EO9T</A>

<LI><A %re7="7ontri42%t.l">Etic%ete de accentare a tetli</A>

</OL>

</OL>

</BODY>

</HTML>

5. Rezumat

#ntr-o pagină Web pot fi introduse di1erse tipuri de liste:

• Liste neordonate prin etic$eta <UL> </UL>, marcate prin simboluri de tip buline, cercuri sau pătrate

• Liste ordonate prin etic$eta <OL> </OL> marcate prin cifre arabe, cifre romane mari sau mici, litere mari sau mici

• Liste de definiţii prin etic$eta <DL> </DL> nemarcate

Elementele listelor ordonate şi neordonate se introduc prin etic$eta <LI>2

Elementele listelor de definiţii se introduc prin etic$etele <DT> şi <DD>.

Listele pot conţine orice tip de elemente: te(t, imagini, lin+-uri sau alte liste în acest caz obţin0ndu-se liste imbricate!.

6. Test

1. Eticheta <UL> se foloseşte pentru a iniţia:

a! o listă ordonată b! o listă neordonatăc! două liste imbricate

2. Care dintre următoarele afirmaţii este falsă?

a! Etic$eta <LI> ser1eşte pentru a introduce fiecare element al unei liste ordonate. b! Etic$eta <LI> ser1eşte pentru a introduce fiecare element al unei liste neordonate.c! Etic$eta <LI> ser1eşte pentru a introduce fiecare element al unei liste de definiţii.

3. În construcţia <UL type="square"> ce rol are atributul type?

a! onstruieşte o listă neordonată. b! 7tabileşte caracterul care 1a fi afişat în faţa fiecărui element al listei.

>






c! onstruieşte o listă care are ca elemente imagini.

4. O listă ordonată este introdusă prin eticheta:

a! <UL>

b! <OL>

c! <DL>

5. Ce rol are atributul type în următoarea construcţie: <OL type="a"> ?

a! onstruieşte o listă de litere care începe cu caracterul 2a2. b! onstruieşte o listă ordonată.c! 7tabileşte faptul că elementele listei 1or fi marcate cu litere mici.

6. Ce este incorect în exemplul următor?

<UL>

<LI>Li.-ae de )rogra.are

<OL>

<LI>!00

<LI>(erl

<LI>Faa

</OL>

<LI>?iste.e de o)erare>

<OL>

<LI>M?Dos

<LI>Uni

</UL>

</OL>

a! Bu este permisă imbricarea listelor neordonate cu liste ordonate. b! Este absentă etic$eta de înc$idere </LI>2c! Etic$etele <UL> şi <OL> nu sunt înc$ise corect.

7. O listă de definiţii se introduce prin eticheta:

a! <UL>

b! <DT>

c! <DL>

8. Care este ordinea corectă în care se introduc elementele unei liste de definiţii?

a! a! <DL> <DT> <DD>

b! b! <DD> <DT> <DL>

c! c! <DT> <DL> <DD>

9. Ce realieaă următoarea construcţie?

<UL>

<LI><IM& src=")ic12gi7">

<LI><IM& src=")ic,2gi7">

</UL>

a! onstruieşte o listă de imagini marcate prin buline. b! onstruieşte o listă de lin+-uri către imaginile specificate.c! Bimic, deoarece este incorect ca elementele unei liste să fie imagini.

10. Cum sunt marcate elementele unei liste de definiţii?

a! prin buline

b! prin numerec! nu sunt marcate

?



C apitolul anterior C uprins C Dăspunsuri C apitolul următor C

oprig$t F6GG8 - 6GG@ 7oftpage =nternet.Deproducerea neautorizata siHsau fara specificarea susrsei 1a fi urmarita si sanctionata conform legilor in 1igoare.

@

http://www.softpageinternet.ro/manual_html/Capitole/Capitolul%207.htm

http://www.softpageinternet.ro/manual_html/Capitole/Cuprins.htm

http://www.softpageinternet.ro/manual_html/Raspunsuri/Raspunsuri%20cap.8.htm




http://www.softpageinternet.ro/manual_html/Capitole/Cuprins.htm

http://www.softpageinternet.ro/manual_html/Raspunsuri/Raspunsuri%20cap.8.htm


capitolul 8 liste

Documents