Tutorial HTML – Liste
Etichetele pentru liste fac parte de formatare text, însă e mai bine să le tratăm separat, într-un articol scurt. În acest tutorial HTML – liste vom vedea tipurile de liste și etichetelor lor. Există trei tipuri de liste: liste neordonate, liste ordonate și liste de definiții. Fiecare listă conține cel puțin un element și are prestabilită o formă de ordonare sau numerotare.
Tipuri de liste
<ul> – O lista neordonată. Prestabilit se folosesc în ordonare buline negre.
<ol> – O listă ordonată. Prestabilit folosește numere începând cu 1 pentru ordonare.
<dl> – O listă de definiții care conține câte un termen și o definiție sau descriere (ca într-un dicționar explicativ).
Listele neordonate
Listele neordonate sunt realizate cu ajutorul etichetei <ul> (prescurtare de la unordered list) și <li> (list item).
Exemplu:
<ul> <li>Element de lista 1</li> <li>Element de lista 2</li> <li>Element de lista 3</li> </ul>
Cu rezultatul:
- Element de lista 1
- Element de lista 2
- Element de lista 3
Pentru a schimba bulinele negre cu altceva, trebuie să folosim atributul type astfel:
<ul type="circle"> <li>Element de lista 1</li> <li>Element de lista 2</li> <li>Element de lista 3</li> </ul>
- Element de lista 1
- Element de lista 2
- Element de lista 3
Deja introducem un lucru nou din HTML, atributele etichetelor. Observați modul de utilizare al atributului type. Toate atributele din HTML iau această formă de atribut=” valoare”. Revenind la listele neordonate, atributul type poate lua valori precum circle, square, disc sau none (cerc, pătrat, disc sau fără).
Liste ordonate
Listele ordonate sunt asemănătoare cu primele, cu deosebirea că acestea pot fi numerotate. Exemplu:
<ol type="A"> <li>Element de lista 1</li> <li>Element de lista 2</li> <li>Element de lista 3</li> </ol>
Și rezultatul:
- Element de lista 1
- Element de lista 2
- Element de lista 3
Atributul type poate lua în acest caz valorile 1, I, A, a sau i pentru a produce listele ordonate, respectiv (1, 2, 3…), (I, II, III…), (A, B, C…), (a, b, c…) și (i, ii, iii…).
Listele ordonate mai pot avea un atribut pentru a indica prima valoare de ordonare. Se folosește atributul start ce are o valoare numerică. Astfel, dacă avem următorul exemplu de listă ordonată: <ol type=”A” start=”3″> primul element din listă va începe cu al treilea element din tipul indicat în atributul start, în cazul nostru cu C.
Liste de definiții
Aceste liste sunt asemănătoare cu ceea ce vedem într-un dicționar explicativ, unde se găsește un termen și alăturat definiția sau descrierea sa.
Pentru acest tip de liste se folosesc următoarele etichete:
<dl> – (definition list) pornește lista de definiții
<dt> – (definition term) indică termenul de definit
<dd> – (definition) indică descrierea termenului.
Astfel, un element din lista de definiții are două componente, un termen și o descriere.
Exemplu:
<dl> <dt>HTML</dt> <dd>Hyper Text Markup Language</dd> <dt>CSS</dt> <dd>Cascade Styling Sheets</dd> </dl>
Iar rezultatul este:
- HTML
- Hyper Text Markup Language
- CSS
- Cascade Styling Sheets
De reținut este faptul că listele pot fi intercalate unele cu altele. Astfel, putem avea o listă ordonată într-o listă nerordonată și invers. Un exemplu este acesta:
<ul>
<li>Beneficiar</li>
<li>Responsabili proiect</li>
<ol>
<li>Sef proiect</li>
<li>Arhitect</li>
<li>Inginer instalatii</li>
<li>Verificatori proiect</li>
</ol>
<li>Antreprenor</li>
<li>Diriginte de santier</li>
</ul>
Vom avea ca rezultat:
- Beneficiar
- Responsabili proiect
- Sef proiect
- Arhitect
- Inginer instalatii
- Verificatori proiect
- Antreprenor
- Diriginte de santier
Atunci când se intercalează elemente HTML, trebuie avută mare grijă la închiderea etichetelor. Exact ca și ordinea de închidere a parantezelor din matematică, etichetele se închid începând cu ultima etichetă deschisă și se continuă până la prima.
În acest tutorial am acoperit cele mai importante aspecte ale listelor HTML. În următorul articol vom vorbi despre folosirea imaginilor cu ajutorul etichetelor și atributelor HTML.
