marți, 18 octombrie 2016

S6:18.09-21.10

HTML – inserarea listelor


Listele reprezintă unele dintre cele mai obişnuite elemente dintr-o pagină Web. Acestea sunt deseori folosite pentru a prezenta informaţ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 marcaj.
                În interiorul etichetelor care delimitează o listă pot fi folosite orice alte etichete HTML, cum ar fi etichete de formatare a textului, legături, imagini, etc.

1. Liste neordonate. Acest tip de listă este de fapt un bloc de text delimitat de etichetele <UL> </UL> (unordered list=listă neordonată). Eticheta de închidere </UL> este obligatorie.

Fiecare element al listei este introdus prin eticheta <LI> (list item).  
Lista va fi afişată indentat faţă de restul paginii şi fiecare element al listei începe pe un rând nou. În mod prestabilit, fiecare element al listei va fi marcat (bulleted) cu "bulină". Etichetele <UL> şi <LI> pot avea definit atributul type care stabileşte caracterul afişat în faţa fiecărui element al listei. Valorile posibile al acestui atribut sunt: circle (cerc), disc (disc plin) - valoarea prestabilită, square (patrat).
Exemplul 1
<HTML>
<HEAD>
<TITLE> Liste neordonate</TITLE>
</HEAD>
<BODY>
<H1 align="center">Lista neordonata</H1><HR>
<UL type="square">Culori
<LI>Black
<LI>White
<LI>Red
<LI>Green
</UL>
</BODY>
</HTML>

2. Liste ordonate. O listă ordonată este un bloc de text delimitat de etichetele <OL> </OL> (ordered list - listă ordonată), eticheta de închidere fiind obligatorie.

Fiecare element al listei este iniţiat de eticheta <LI> (list item). Ca şi în cazul listelor neordonate, lista va fi indentată faţă de restul paginii Web şi fiecare element al listei va începe pe o linie nouă.
Diferenţa faţă de listele neordonate este aceea că în acest caz marcarea elementelor se face prin cifre, nu prin simboluri. Pentru etichetele <OL> şi <LI> se poate seta atributul type, care stabileşte 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); 1 - pentru ordonare de tipul 1 , 2 , 3...(cifre arabe - opţiune prestabilită). De asemenea eticheta <OL> poate avea setat atributul start, care stabileşte valoarea iniţială a secvenţei de ordonare. Valoarea acestui atribut trebuie să fie un număr întreg pozitiv.
Exemplul 2
<HTML>
<HEAD>
<TITLE>Liste ordonate</TITLE>
</HEAD>
<BODY>
<H1 align="center">Lista ordonata</H1><HR>
<OL type=”I”>Castigatorii concursului sunt:
<LI >Popescu Maria
<LI>Ionescu Ion
<LI>Bratu Ana
</OL>
</BODY>
</HTML>

3. Liste de definiţii. Reprezintă 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) şi care prezintă două nivele de indentare. Listele de definiţii 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> conţine la rândul său un număr de elemente care îl definesc, introduse prin eticheta <DD> (definition description).



Exemplul 3
<HTML>
<HEAD>
<TITLE>Liste de definitii</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>

4. Imbricarea listelor. În cadrul unei liste, fie ea ordonată sau neordonată, se pot include alte liste, procedeu numit imbricare. Fiecare listă nou inclusă în precedenta se va afişa indentat faţă de nivelul listei anterioare.
Exemplul 4
<HTML>
<HEAD>
<TITLE>Liste imbricate</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>

Exercitiu Realizaţi o pagină web care să cuprindă  listele următoare:

PROBE BACALAUREAT 2017
                                1 Probe de evaluare a competentelor
        • de comunicare în limba romana
        • de comunicare într-o limbă străină
        • digitale
                                2 Probe scrise

        • Limba şi literatura română
        • Istorie
        • Logica

Niciun comentariu:

Trimiteți un comentariu