Tutorial lista HTML

Lista intr-o pagina HTML

Lista este o structura ce grupeaza elemente de acelasi fel. In HTML, lista poate fi folosita atat pentru a grupa continutul cat si pentru a crea meniuri de navigatie.

Listele pot fi de urmatoarele tipuri:

- ordonate: elementele sunt notate cu cifre, litere sau alte metode de ordonare

- neordonate: elementele sunt notate cu simboluri: cercuri, patrat

- definitii: elementele sunt insotite de descrieri

Definitiile elementelor HTML folosite

1. Tagul li:
• defineste un element din lista
• poate fi folosit in urmatoarele tipuri de liste: ol, ul, menu
• atributul value:
• defineste valoarea elementului
• poate fi folosit doar pentru ordonate
• ordonarea urmatoarelor elemente se face in functie de aceasta valoare
• este recomandata definirea aspectelor vizuale cu ajutorul CSS-ului
2. Tagul ul:
• defineste o lista neordonata
• folosirea atributului type pentru a seta marcatorii de inceput de linie nu este recomandata, folositi in schimb regulile CSS pentru a obtine aceste efecte
3. Tagul ol:
• defineste o lista ordonata
• Atributul start:
• defineste valoarea de inceput a ordonarii
• are valoare numerica
• Atributul type:
• defineste tipul ordonarii
• primeste urmatoarele valori: 1, a, A, i, I
• Atributul reversed:
• defineste ordinea ordonarii
• nu este suportat in toate navigatoarele WEB
4. Tagul dl:
• defineste o lista de definitii, fiecare element avand si o descriere
• foloseste elemetele dt (reprezinta un element din lista) si dd (reprezinta descrierea, descrierile pentru un anumit element) pentru a-si defini structura
5. Tagul dt:
• defineste un element dintr-o lista de tipul dl
6. Tagul dd:
• defineste o descriere a unui element de tipul dt
• poate contine text, imagini, linkuri, etc.

Lista neordonata

Lista neordonate este definita cu ajutorul tagului ul si contine elemente de tipul li.
Este recomandata definirea tipului de marcator cu ajutorul CSS-ului. Pentru a defini tipul se foloseste urmatoarul atribut list-style-type. In cazul nostru, acesta poate avea urmatoarele valori: circle (cerc gol), disc (cerc umplut), square (patrat) .
Exemplu - Lista neordonata simpla:
Rezultat:

• Element lista 1
• Element lista 2
• Element lista 3

Cod:

Lista ordonata

Lista ordonata se defineste cu ajutorul tagului ol si contine elemente de tipul li.
Tipul marcatorului se poate defini cu ajutorul atributului type, dar folosind list-style-type din CSS se poate accesa o varietate mai mare de tipuri.

Exemplu - Lista ordonata simpla:
Rezultat:

1. Element lista 1
2. Element lista 2
3. Element lista 3

Cod: