ALTE DOCUMENTE
|
||||||
Listele reprezinta unele dintre cele mai obisnuite elemente dintr-o pagina Web. Acestea sunt deseori folosite pentru a prezenta informatiile în mod organizat, într-o maniera accesibila si usor de parcurs.
Ele pot fi de trei tipuri:
&nbs 18118c23s p; &nbs 18118c23s p; liste ordonate (marcate prin numere sau litere),
&nbs 18118c23s p; &nbs 18118c23s p; liste neordonate (marcate prin cratime, buline sau alte simboluri)
&nbs 18118c23s p; &nbs 18118c23s p; liste de definitii, afisate fara nici un fel de marcaj.
În interiorul etichetelor care delimiteaza o lista pot fi folosite orice alte etichete HTML, cum ar fi etichete de formatare a textului, legaturi, imagini, etc.
O lista neordonata reprezinta o colectie de elemente înrudite, dispuse într-o ordine oarecare. Un exemplu tipic pentru o pagina Web este o lista de link-uri spre alte documente.
Acest tip de lista este de fapt un bloc de text delimitat de etichetele
<UL> </UL> (unordered list=lista neordonata). Eticheta de închidere </UL> este obligatorie.
Fiecare element al listei este introdus prin eticheta <LI> (list item). Cu toate ca eticheta <LI> este o eticheta container, eticheta sa de închidere, </LI>, este optionala. Daca nu este prezenta, la întâlnirea unei noi etichete <LI> se considera ca vechea eticheta este închisa.
Lista va fi afisata indentat fata de restul paginii si fiecare element al listei începe pe un rând nou. În mod prestabilit, fiecare element al listei va fi marcat (bulleted) cu "bulina". Exemplul 8.1 construieste o lista neordonata, aspectul sau fiind cel din
Figura 8.1
Exemplul 8.
<HTML>
<HEAD>
<TITLE>liste1</TITLE>
</HEAD>
<BODY>
<H1 align="center">Lista neordonata</H1><HR>
<UL>Culori
<LI>Black
<LI>White
<LI>Red
<LI>Green
<LI>Blue
<LI>Yellow
<LI>Purple
<LI>Aqua
</UL>
</BODY>
</HTML>
Etichetele <UL> si <LI> pot avea definit atributul type care stabileste caracterul afisat în fata fiecarui element al listei. Valorile posibile al acestui atribut sunt:
&nbs 18118c23s p; &nbs 18118c23s p; circle (cerc)
&nbs 18118c23s p; &nbs 18118c23s p; disc (disc plin) - valoarea prestabilita
&nbs 18118c23s p; &nbs 18118c23s p; square (patrat)
Lista din Exemplul 8.2 are atributul type setat la valoarea "square". Lista este marcata asa cum se poate vedea în Figura 8.2
Exemplul 8.
<HTML>
<HEAD>
<TITLE>liste2</TITLE>
</HEAD>
<BODY>
<H1 align="center">Atributul type la liste neordonate</H1><HR>
<UL type="square">Limbaje de programare
<LI>C
<LI>C++
<LI>Pascal
<LI> Basic
<LI>Perl
</UL>
<TITLE>liste6</TITLE>
</HEAD>
<BODY>
<H1 align="center">Liste imbricate</H1><HR>
<UL>
<LI>Bulina 1
<OL>
<LI>Numarul 1
<LI>Numarul 2
</OL>
<LI>Bulina 2
<LI>Bulina 3
<UL type="square">
<LI>Patrat 1
<LI>Patrat 2
<LI>Patrat 3
</UL>
<LI>Bulina 4
</UL>
</BODY>
</HTML>
&nbs 18118c23s p; &nbs 18118c23s p; Lista de directoare - este o lista introdusa prin eticheta <DIR> </DIR> Eticheta a fost initial utilizata pentru alcatuirea listelor de fisiere. Multe browsere nu fac nici o diferenta între etichetele <DIR> si <UL>, efectul lor fiind acelasi
&nbs 18118c23s p; &nbs 18118c23s p; Lista de meniuri - utilizeaza eticheta <MENU> Unele browsere afiseaza lista doar în format usor diferit fata de listele neordonate, altele însa folosesc chiar un fel de meniu grafic de tip pull-down pentru afisarea acestor liste.
O lista ordonata este un bloc de text delimitat de etichetele <OL> </OL> (ordered list - lista ordonata), eticheta de închidere fiind obligatorie.
Fiecare element al listei este initiat de eticheta <LI> (list item). Ca si în cazul listelor neordonate, lista va fi indentata fata de restul paginii Web si fiecare element al listei va începe pe o linie noua.
Diferenta fata de listele neordonate este aceea ca în acest caz marcarea elementelor se face prin cifre, nu prin simboluri.
Exemplul 8.4 afiseaza o lista ordonata, marcata cu cifre arabe aspectul ei fiind cel din Figura 8.4
Exemplul 8.
<HTML>
<HEAD>
<TITLE>liste4</TITLE>
</HEAD>
<BODY>
<H1 align="center">Lista ordonata</H1><HR>
<OL>Castigatorii concursului sunt:
<LI>Popescu Maria
<LI>Ionescu Ion
<LI>Bratu Ana
</OL>
</BODY>
</HTML>
Pentru etichetele <OL> si <LI> se poate seta atributul type care stabileste tipul de caractere utilizate pentru ordonarea listei. Valorile posibile ale acestui atribut sunt:
A - pentru ordonare de tipul A , B , C...(litere mari)
a - pentru ordonare de tipul a , b , c...(litere mici)
I - pentru ordonare de tipul I , II , III , IV...(cifre romane mari)
i - pentru ordonare de tipul i , ii , iii , iv...(cifre romane mici)
- pentru ordonare de tipul 1 , 2 , 3...(cifre arabe - optiune prestabilita)
De asemenea eticheta <OL> poate avea setat atributul start care stabileste valoarea initiala a secventei de ordonare. Valoarea acestui atribut trebuie sa fie un numar întreg pozitiv.
Exemplul 8.5 construieste o lista numerotata cu cifre romane mari începând de la pozitia a treia. Aspectul paginii care contine aceasta lista este redat în Figura 8.5
Exemplul 8.
<HTML>
<HEAD>
<TITLE>liste5</TITLE>
</HEAD>
<BODY>
<H1 align="center">Atributul type la liste ordonate</H1><HR>
<OL type="I" start="3">Manuale
<LI>Istorie
<LI>Geografie
<LI>Biologie
<LI>Chimie
</OL>
</BODY>
</HTML>
Ca si în cazul listelor neordonate, setarea atributului type pentru un anumit item al listei înlocuieste tipul de numerotare stabilit pentru întreaga lista cu tipul specificat pentru acel element.
În cadrul unei liste, fie ea ordonata sau neordonata, se pot include alte liste, procedeu numit imbricare. Fiecare lista nou inclusa în precedenta se va afisa indentat fata de nivelul listei anterioare.
Listele pot fi imbricate în toate modurile dorite, ca în Exemplul 8.6. Figura 8.6 reda aspectul listei construite în acest exemplu.
Exemplul 8.
<HTML>
<HEAD>
Exemplul 8.9 creeaza doua liste imbricate de legaturi. Aspectul paginii care contine aceasta lista este redat în Figura 8.9. Puteti testa direct functionarea listei daca ati salvat fisierele HTML construite la capitolele anterioare sub numele specificat în blocul <TITLE> al fiecarui document. În cazul când ati preferat alte denumiri pentru fisiere, puteti schimba numele fisierelor prezente în cadrul exemplului cu propriile dumneavoastra fisiere.
Exemplul 8.
<HTML>
<HEAD>
<TITLE>liste9</TITLE>
</HEAD>
<BODY>
<H1 align="center">Liste de legaturi</H1><HR>
<OL type="I">
<LI>Culori
<OL>
<LI><A href="culori1.html">Culoarea fundalului</A>
<LI><A href="culori2.html">Culoarea textului</A>
<LI><A href="culori3.html">Culoarea legaturilor</A>
</OL>
<LI>Fonturi
<OL>
<LI><A href="fonturi1.html">Eticheta FONT</A>
Listele de definitii reprezinta un tip special de liste în care elementele listei nu sunt nici numerotate (ca în listele ordonate), nici marcate prin buline (ca în listele neordonate) si care prezinta doua nivele de indentare.
Listele de definitii sunt blocuri de text incluse între etichetele <DL> </DL> (definition list), eticheta de închidere fiind obligatorie. Fiecare element al listei este introdus prin eticheta <DT> (definition term). Fiecare element introdus prin eticheta <DT> contine la rândul sau un numar de elemente care îl definesc, introduse prin eticheta <DD> (definition description).
Ca si în cazul etichetei <LI>, etichetele de închidere </DT> si </DD> sunt optionale. În Exemplul 8.7 este construita o lista de definitii.
Exemplul 8.
<HTML>
<HEAD>
<TITLE>liste7</TITLE>
</HEAD>
<BODY>
<H1 align="center">Liste de definitii</H1><HR>
<DL>
<DT>Iarna
<DD>Ninge
<DD>E frig
<DD>Ziua e mai scurta decât noaptea
<DT>Primavara
<DD>Natura se trezeste la viata
<DD>Infloresc pomii
<DD>Se intorc pasarile calatoare
<DT>Vara
<DD>Totul e verde
<DD>E foarte cald
<DD>Ziua e mai lunga decât noaptea
<DT>Toamna
<DD>Se coc fructele
<DD>Se strange recolta
<DD>Cad frunzele
</DL>
</BODY>
</HTML>
Aspectul listei de definitii de mai sus este cel din Figura 8.7
Etichetele <DL> si </DL> marcheaza începutul si sfârsitul listei, termenii care fac parte din lista (Iarna Primavara Vara Toamna ) sunt introdusi prin eticheta <DT> iar definitiile termenilor, prin etichetele <DD>
Se pot realiza liste ale caror elemente sa fie link-uri, imagini sau blocuri de text. În Exemplul 8.8, elementele listei sunt imagini, asa cum se poate vedea în Figura 8.8
Exemplul 8.
<HTML>
<HEAD>
<TITLE>liste8</TITLE>
</HEAD>
<BODY>
<H1 align="center">Liste de imagini</H1><HR>
<DL>
<DT>Flori
<DD>
<IMG src="../Imagini/rose1.jpg" width="120" height="120">
<DD>
<IMG src="../Imagini/orangerose.gif" width="120" height="120">
<DT>Texturi
<DD>
<IMG src="../Imagini/silk.jpg" width="120" height="120">
<DD>
<IMG src="../Imagini/lace.gif" width="120" height="120">
</DL>
</BODY>
</HTML>
b) &nbs 18118c23s p; b) <DD> <DT> <DL>
c) &nbs 18118c23s p; c) <DT> <DL> <DD>
<UL>
<LI><IMG src="pic1.gif">
<LI><IMG src="pic2.gif">
</UL>
a) &nbs 18118c23s p; Construieste o lista de imagini marcate prin buline.
b) &nbs 18118c23s p; Construieste o lista de link-uri catre imaginile specificate.
c) &nbs 18118c23s p; Nimic, deoarece este incorect ca elementele unei liste sa fie imagini.
a) &nbs 18118c23s p; prin buline
b) &nbs 18118c23s p; prin numere
c) &nbs 18118c23s p; nu sunt marcate
|
