Paginile web contin foarte multe informatii, din acest motiv enumerarea unor elemente trebuie pusa in evidenta. In urmatoarele lectii te voi invata sa sectionezi pagina pe care ai creat-o in lectile precedente pentru a arata ca site-ul propus de mine.
Fiecare site trebuie sa contina un meniu care face legatura cu toate celelalte pagini ale acestuia. Cu ajutorul meniului putem naviga pe site-ul respectiv.
Acest meniu se mai numeste si navbar.
Pentru a crea un navbar este esential sa cunosti ce sunt listele si cum lucreaza acestea.
O lista poate fi ordonata sau neordonata si este alcatuita din mai multe componente.
Lista ordonata:
Lista ordonata este numerotata cu cifre, cifre romane sau litere( 1, 2, 3 \ I, II, III \ a, b, c).
Lista incepe cu eticheta <ol> si se incheie cu </ol>.
Initialele ol vin din limba engleza si inseamna ordonated list (lista ordonata).
Intre aceste etichete se vor folosi etichetele <li> si </li>.
Initialele li vin din limba engleza si inseamna list item (elemente lista).
EXEMPLU:
|
<head> |
| ↓ |
Lista cumparaturi
|
Pentru a schimba tipul de numerotare, trebuie sa specifiti acest lucru scriind in eticheta <ol> codul type="I" \ type="a".
Codul trebuie sa arate asa: <ol type="I">.
Lista neordonata:
Poti crea liste neordonate folosind etichetele <ul> si </ul>.
Intre etichetele <ul> si </ul> se foloseste eticheta <li>.
EXEMPLU:
|
<html> |
| ↓ |
Lista cumparaturi
|
Prin utilizarea atributului type="", poti numerota lista astfel:
- cu un disc | pune intre ghilimele cuvantul "disc" pentru a numerota cu un disc;
- cu un patrat | pune intre ghilimele cuvantul "square" pentru a numerota cu un patrat;
- cu un cerc | pune intre ghilimele cuvantul "circle" pentru a numerota cu un cerc;
EXEMPLU: <ul type="square">
Puteti crea si liste ordonate folosind etichetele <ol> si </ol>.
Intre etichetele <ol> si </ol> se foloseste eticheta <li>.
EXEMPLU:
|
<head> </html> |
| ↓ |
|
Prin utilizarea atributului type="", putem numerota lista astfel:
- cu numere (1,2,3) | puneti intre ghilimele cifra "1" pentru a numerota cu numere;
- cu litere mici (a,b,c) | puneti intre ghilimele litera "a" pentru a numerota cu litere mici;
- cu litere mari (A,B,C) | puneti intre ghilimele litera "A" pentru a numerota cu litere mari;
- cu cifre romane (i,ii,iii) | puneti intre ghilimele litera "i" pentru a numerota cu numere romane;
- cu cifre roamne (I,II,III) | puneti intre ghilimele litera "I" pentru a numerota cu numere romane;
EXEMPLU: <ol type="A">
EXEMPLU:
|
<head> |
| ↓ |
|
Ti-am spus la inceputul acestei lectii ca o lista poate sa devina un meniu de cautare (navbar).
Acest lucru este posibil prin atribuirea unor atribute specifice listei si prin CSS.
In urmatorul exemplu, am creat un navbar simplu, dar cu un design urat. In urmatoarele doua lectii, te voi invata sa-i oferi un design placut acestui navbar.
EXEMPLU:
|
<head> |
| ↓ |
GrigDroid - Un Blog Despre Android