Autorul tutorialului: Oleg Andronic.
În HTML pot fi create 3 feluri de liste. Toate listele descrise mai jos sunt blocuri care ocupă 100% din lățimea paginii, iar înălțimea se schimbă în dependență de conținut.
1.Lista cu marcatori (bullets)
Lista cu marcatori se scrie prin tag-ul <ul> , fiecare intrare trebuie să înceapă cu eticheta <li>. Utilizând aceste două tag-uri, putem crea liste nelimitate. De exemplu acest cod:
<html> <head> <title>Liste</title> </head> <body> <ul> <li>Ion</li> <li>Vasile</li> <li>Gheorghe</li> </ul> </body> </html>
Va arăta astfel:
Pentru a schimba designul marcatorilor (bullets-urile), utilizăm atributul Type. Atributul type are trei valori.
,,Disc”, „Circle”, „Square”.
A. Type=”disc”
<html> <head> <title>Liste</title> </head> <body> <ul type=”disc”> <li>Ion</li> <li>Vasile</li> <li>Gheorghe</li> </ul> </body> </html>
B. Type=”circle”
<html> <head> <title>Liste</title> </head> <body> <ul type=”circle”> <li>Ion</li> <li>Vasile</li> <li>Gheorghe</li> </ul> </body> </html>
C. Type=”square”
<html> <head> <title>Liste</title> </head> <body> <ul type=”square”> <li>Ion</li> <li>Vasile</li> <li>Gheorghe</li> </ul> </body> </html>
2. Lista Numerotată
Tag-ul <ol> stabilește o listă numerotată unde fiecare intrare trebuie să înceapă cu eticheta <li>. Dacă un tag <ol> aplică foaia de stil, eticheta <li> moștenește aceste proprietăți. Exemplu:
<html> <head> <title>Liste</title> </head> <body> <ol> <li>Ion</li> <li>Vasile</li> <li>Gheorghe</li> </ol> </body> </html>
După cum vedeți, avem fiecare intrare numerotată.
Lista numerotată are 3 atribute:
,,Type” – Setează tipul bullets-urilor
„Start”- Specifică numărul de la care va începe numărătoarea în listă
,,Reversed” – Numerotare în lista devine descendentă (3,2,1)
A. Atributul Type
Atributul Type are cinci stări: litere majuscule, litere minuscule, cifre romane majuscule, cifre romane minuscule, cifre arabe.
| Codul | Rezultatul |
<ol type=”A”> <li>Ion</li> <li>Vasile</li> <li>Gheorghe</li> </ol> |
A. Ion B. Vasile C. Gheorghe |
<ol type=”a”> <li>Ion</li> <li>Vasile</li> <li>Gheorghe</li> </ol> |
a. Ion b. Vasile c. Gheroghe |
<ol type=”I”> <li>Ion</li> <li>Vasile</li> <li>Gheorghe</li> </ol> |
I. Ion II. Vasile III. Gheorghe |
<ol type=”i”> <li>Ion</li> <li>Vasile</li> <li>Gheorghe</li> </ol> |
i. Ion ii. Vasile iii. Gheorghe |
<ol type=”1”> <li>Ion</li> <li>Vasile</li> <li>Gheorghe</li> </ol> |
1. Ion 2. Vasile 3. Gheorghe |
B. Atributul „Start”
,,Start” – Atributul setează numărul la care va începe lista numerotată (de la care va porni numărătoarea). Indiferent de tipul de listă stabilit cu atributul Type, atributul „Start“ va lucra doar cu cifre arabe. De exemplu, codul ce urmează cere ca lista să pornească de la numărul 10:
<html> <head> <title>Liste</title> </head> <body> <ol type=”1” start=”10”> <li>Ion</li> <li>Vasile</li> <li>Gheorghe</li> </ol> </body> </html>
Pentru a vă convinge că atributul Start funcționează doar cu cifre arabe, modificați în codul anterior type=”A” și vedeți dacă vor apărea litere în loc de cifre.
C. Atributul “Reversed”
,,Reversed” – Numerotează lista în ordine inversă. Respectiv, în loc de 1, 2, 3 se va afișa 3,2,1. Exemplu:
<html> <head> <title>Liste</title> </head> <body> <ol reversed> <li>Decembrie</li> <li>Noiembrie</li> <li>Octombrie</li> <li>Septembrie</li> <li>August</li> <li>Iulie</li> <li>Iunie</li> <li>Mai</li> <li>Aprilie</li> <li>Martie</li> <li>Februarie</li> <li>Ianuarie</li> </ol> </body> </html>
Observaţi că acest atribut NU răstoarnă lista de sus în jos. Lunile deja erau scrise în ordine inversă. Atributul doar NUMEROTEAZĂ în ordine inversă.
3. Lista definițiilor
Tag-ul <dl> este unul dintre cele trei elemente ale <dl>, <dt>, <dd>, concepute pentru a crea o listă de definiții. Fiecare listă începe cu un container <dl> (containerul este plasat între tagurile <dl> </dl>), care include eticheta <dt> (cuvântul/expresia pe care îl/o definiţi, încorporată de tagul <dt></dt>) și definiţia propriu-zisă <dd> (încorporată de tagurile <dd></dd>). Iată cum ar arăta asta în cod:
<html> <head> <title>Liste</title> </head> <body> <dl> <dt>Lorem</dt> <dd> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque beatae ipsa ducimus aspernatur, tempore quo doloremque tenetur est accusantium quae aut labore accusamus dicta qui ex praesentium repudiandae excepturi hic.</dd> </dl> </body> </html>
<dl> – deschide containerul pentru definiţie
<dt></dt> – stabilesc care este cuvântul care trebuie definit
<dd></dd> – oferă definiţia cuvântului.
Iar acum o listă mai complexă:
Lista cu bullets-uri secundare (marcatori subpuncte)
Pentru a crea o listă cu bullets-uri secundare, trebuie să utilizăm tag-urile învăţate la începutul lecţiei: <ul> şi <ol>, unde <ol> va defini lista principală (numerotată) iar <ul> va defini lista cu bullets-uri. Altfel spus, totul va arăta aşa:
<html> <head> <title>Liste</title> </head> <body> <ol> <li>Text</li> <li>Text</li> <li>Text <ul> <li>Text</li> <li>Text</li> <li>Text</li> </ul> </li> <li>Text</li> <li>Text</li> <li>Text</li> </ol> </body> </html>
Observaţi că după al treilea Text, tagul <li> nu se închide. Din contra, este lăsat deschis, iar tagul <ul> completează lista cu bullets-urile secundare. Abia după ce lista bullets-urilor a fost completată, tagul </li> închide opţiunile pentru al treilea Text. 
Aceasta a fost tutorialul despre liste. Îi mulţumim lui Oleg pentru lecţie!
Aşteptăm de la voi liste cu alte idei de tutoriale pe care vreţi să le vedeţi publicate pe site.
