În HTML există 3 tipuri de liste:
– liste neordonate
– liste ordonate
– liste de definiţii
Listele neordonate sunt liste nenumerotate, practic o înşiruire de elemente a căror ordine nu este importantă (gândeşte-te la lista de cumpărături)
Listele ordonate sunt liste numerotate, folosite atunci când ordinea în care se execută operaţia este importantă sau organizarea textului o impune (gândeşte-te la cuprinsul unei cărţi, sau un set de instrucţiuni de instalare a unui soft).
Listele de definiţii conţin o înşiruire de termeni, fiecare cu un set de caracteristici. Nu sunt ordonate, dar se poate observa clar ce caracteristici aparţin fiecărui element, ajutând la organizarea textului (gândeşte-te la pliantele pizza, unde sub fiecare pizză apare lista de ingrediente).
Revenind la clătitele noastre, diferenţa dintre pagina dinainte şi de după folosirea listelor este evidentă.
[html]
<doctype html>
<html>
<head>
<title>Expert in clatite</title>
</head>
<body bgcolor="#ede4c4">
<font color="#7f0006">
<h1 align="center">Invata sa faci clatite ca un adevarat cofetar</h1>
</font>
<h2 align="center" >Clatitele sunt simple, usoare, gustoase si savuroase in orice combinatie!</h2>
<hr>
<p><h4>Ingrediente pentru ~10 clatite:</h4>
<ul type="circle">
<li>250 ml lapte</li>
<li>3 oua</li>
<li>60 g unt</li>
<li>125 g faina</li>
<li>20 g zahar</li>
<li>arome (lamaie,rom,portocala,vanilie etc. )</li>
</ul>
</p>
<p>
<h4>Preparare:</h4>
<ol type="1" start="1">
<li>Punem la incalzit laptele cu untul astfel incat untul sa se topeasca dar <u>laptele sa nu dea in clocot</u></li>
<li>Se lasa la racit si intre timp amestecam celelalte ingrediente</li>
<li>Se freaca ouale cu zaharul se adauga faina si amestecam bine cu un tel, punem aromele, varsam laptele caldut dar nu fierbinte</li>
<li>Amestecam incetisor pana obtinem un amestec omogen</li>
<li>Punem o tigaie <i>anti-adeziva</i>, o ungem cu <s>otet</s> ulei si lasam la incins</li>
<li>Luam cu un polonic din compozitie si varsam cam 3/4 in tigaia incinsa</li>
<li>Cu miscari circulare intindem aluatul in tigaie si lasam pana se rumeneste</li>
<li>Cand incepe clatita sa se desprinda de pe vas o intoarcem sa se coaca si pe partea cealalta</li>
</ol>
<h4>Servire:</h4>
<dl>
<dt>Clatite dulci</dt>
<dd>dulceata</dd>
<dd>gem</dd>
<dd>inghetata</dd>
<dd>ciocolata</dd>
<dt>Alte clatite</dt>
<dd>carne</dd>
<dd>branza</dd>
</dl>
<br>
<b>Pofta buna!</b>
</p>
<h3 align="right">Cofetar sef Catalin Cerga</h3>
<hr>
<font color="#3f4c34" size="3" face "arial">
<p align="center">Coypright SolutiiPC.ro, solutii complete pentru bucatarie</p>
<font>
</body>
</html>
[/html]
Lista neordonată (unordered list) este cuprinsă între tag-urile <ul> şi </ul>, fiecare element al listei fiind încadrat de tag-urile <li> şi </li>. Poate avea doar atributul type cu valorile circle, square, disc, în funcţie de caracterul care preferăm să preceadă elementele.
Lista ordonată (ordered list) este marcată cu tag-urile <ol> şi </ol>. Din nou, fiecare element trebuie încadrat de tag-urile <li> şi </li>. Numerotarea se face automat, nu este nevoie să adăugăm număr fiecărui element. Listelor ordonate li se pot ataşa atributele type cu valorile A, a, I, i, 1 (în funcţie de modul în care vrem să fie numerotată) şi start cu valoarea de început a primului element (poate fi C, c, III, iii, 3 în cazul în care vrem să începem lista de la 3 de exemplu).
În lipsa atributelor, listele ordonate vor avea implicit type=”1″ şi start=”1″, pornind numărătoarea de la 1 şi folosind cifre.
Lista de definiţii este un caz aparte, sincer am folosit-o doar pentru exemplificare, în cazuri reale nefiind nevoit s-o folosesc.
Se creează cu ajutorul marcajelor <dl> </dl> (definition list). Elementele titlu (definition title) sunt încadrate de tag-urile <dt> şi </dt>, iar elementele ataşate fiecărui titlu sunt marcate cu <dd></dd>.
Lecţia viitoare, totul despre linkuri în HTML.
2 comments
foarte interesant, multumesc si astept continuarea
Urmeaza, vor fi 10-15 in functie de cum ma hotarasc sa impart pe capitole.
Am incercat sa impart in lectii cat mai simple si usor de inteles.