Solutii IT&C

  • Cum cumperi?
  • Laptopuri
  • Tablete
  • Telefoane mobile
  • Imprimante
  • Stiri
  • Programe utile
  • Facebook
Te afli la: SolutiiPC Cod HTML 6 – Liste in HTML

6 – Liste in HTML

Catalin 15/02/2013 2 Comments

Î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&gt; şi </dt>, iar elementele ataşate fiecărui titlu sunt marcate cu <dd></dd>.

Lecţia viitoare, totul despre linkuri în HTML.

Similare

Filed Under: HTML

Despre autor

Comentarii:

  1. sumomanu says

    15/02/2013 at 12:11

    foarte interesant, multumesc si astept continuarea

    Răspunde
    • Catalin Cerga says

      15/02/2013 at 15:01

      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.

      Răspunde

Daca vrei sa apara:
- semneaza cu numele tau, nu al firmei
- nu alerga dupa link
- scrie romaneste, nu kum apucy
- daca tii sa ataci, ataci ideea, nu persoana
Primul comentariu e moderat.

Lasă un răspuns Anulează răspunsul

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *

Acest site folosește Akismet pentru a reduce spamul. Află cum sunt procesate datele comentariilor tale.

Categorii

  • Aparate Foto (29)
  • Console Jocuri (12)
  • CPanel (8)
  • Cum cumperi? (23)
  • Desktop PC (6)
  • Diverse (49)
  • Electrocasnice (24)
  • Facebook (14)
  • Frigidere (5)
  • Gadgeturi (9)
  • Gmail (2)
  • Guestposts (5)
  • Hardware (27)
  • HDD Extern (10)
  • HTML (11)
  • Imprimante (19)
  • Laptopuri (47)
  • Masini de spalat (5)
  • Microsoft Office (1)
  • Programe utile (4)
  • Reduceri Promotii (3)
  • Reduceri si Promotii (34)
  • Securitate (8)
  • Sisteme Audio (12)
  • Sisteme de Andocare (9)
  • Sisteme de navigatie GPS (14)
  • Sisteme Home Cinema (4)
  • Software (10)
  • Stiri (319)
  • Tablete (43)
  • Telefoane mobile (88)
  • Televizoare (13)
  • Webmasteri (5)
  • Windows (7)
  • Yahoo (4)

Etichete

A4 (4) Acer (11) Allview (17) amazon (7) AMD (12) android (54) apple (49) Asus (23) BlackBerry (6) canon (8) dell (7) facebook (15) featured (310) google (39) Google Nexus (5) HP (14) htc (8) huawei (6) IBM (5) intel (25) ios (5) iphone (5) Lenovo (22) LG (29) linux (6) microsoft (39) motorola (8) nikon (10) Nokia (18) nvidia (6) quad-core (8) qualcomm (12) refacute (24) Samsung (80) seagate (6) snapdragon (7) sony (25) toshiba (10) twitter (6) western digital (7) windows (10) windows phone (5) xiaomi (5) yahoo (7) zuckerberg (5)

Pagini

  • Contact
  • Ghid cumparaturi electronice
  • Ghid de cumparaturi electrocasnice
  • Propune un articol
  • Termeni si conditii

Copyright © 2025 · SolutiiPC.ro