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).
<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.
<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).
<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.
<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