Programare HTML - Listele pe site -Lectia Numarul 7

Programare HTML - Listele pe site -Lectia Numarul 7

In programarea web nu o sa existe site in care sa nu va loviti de tag-urile pentru liste, de aceea in acest tutorial o sa vorbim putin despre cele trei tipuri de liste foarte importante pe care le intalnim in HTML.Pentru organizarea texului sub forma unei enumarari ,in HTML ,se folosesc trei tipuri de liste: ordonate ( ordered lists)  neordonate (unordered lists ) si liste de definitii (definition lists) .

• Listele neordonate si listele ordonate 

Listele neordonate se folosesc pentru organizarea unui text in care elementele enumerate sunt precedate de marcatori grafici (bullet-uri) ,acesti marcatori pot fi : stelute ,cerculete ,patratele , lini,etc.

Listele ordonate se folosesc pentru numere de ordine generate automat.

• <ul>...</ul> -Defineste o lista neordonate
• <ol>...</ol> -Defineste o lista ordonata 
• <li>...</li> -Defineste un element in cadrul unei liste 

Atributul type reprezinta tipul de lista .Tipul standard pentru liste ordonate dispune elemente numerotate de la 1 , iar pentru cele neordonate dispune elementele cu bullet-uri . Pentru listele neordonate , valorile atributului type pot fi :

swuare ( bullet patrat) 
circle (bullet in forma de goll ) 
disc (bullet in forma de cerc plin in interior) .

Pentru listele ordonate  valoare atributului type poate sa ia valorile urmatoare : 

“1” – pentru enumerare cu cifre arabe;
“i” sau “I” – pentru enumerare cu cifre romane mici, respectiv mari
“a” sau “A” – pentru enumerare cu litere mici, respectiv mari.

Trebuie sa iti zic ca listele in programarea web sunt foarte importante ,deoarece acestea ajuta la crearea meniurilor de navigare pe site , meniuri care nu lipsesc de pe niciun site web.Poate ca ai vazut si tu atunci cand intri pe pagina de facebook ai urmatoarele liste : acasa , profil , notificari , acesta este un exemplu de meniu cu liste , care este putin mai complex .Pentru a crea un meniu pe site trebuie sa deti cunostinte de HTML si mai exact cunostinte de utilizare a listelor si cunostinte de CSS pentru crearea design-ului meniului.

• Cum arata o lista neordonata in html :

<ul>
  <li>Acasa</li>
  <li>Despre</li>
  <li>Contact</li>
</ul>

O lista neordonata intotdeauna incepe cu <ul> si se termina cu </ul>, iar elementele sunt enumerate intre tagurile <li> si </li>. Aceste elemente se numesc itemii tocmai din denumirea tag-ului  <li> ( list item).

Rezultatul listei neordonate este acesta :

• Acasa
• Despre
• Contact

Listele ordonate ( ordered list ) se folosesc de enumerari pentru a afisa elementele, fie ca este vorba de enumerari cu cifre arabe, cifre romane sau litere. O lista ordonata in html, incepe cu <ol> si se termina cu </ol>. Exemplu de lista ordonata:

<ol>
  <li>WebSite</li>
  <li>Seo</li>
  <li>Design</li>
</ol>

Rezulatul listei ordonate este acesta :

1. WebSite
2. Seo
3. Design

O chestie foarte tare atunci cand utilizezi liste ordonate este ca poti sa faci o numerotare de la sfarsit la inceput , folosind atributul reversed care are aceeasi valoare.

<ol reversed="reversed">
  <li>HTML</li>
  <li>CSS</li>
  <li>PHP</li>
  <li>Java Script</li>
  <li>C++</li>
</ol>

Rezultatul va fi urmatorul:

5. HTML
4. CSS
3. PHP
2. Java Script
1. C++

Un alt atribut pe care il au listele ordonate este : start. cu ajutorul caruia poti sa incepi numerotarea unei liste de la un anumi numar. In exemplul urmator numerotarea este cu cifre romane si incepe de la valoarea 3.

<ol type="I" start="3">
  <li>BMW</li>
  <li>Audi</li>
  <li>Ford</li>
  <li>Logan</li>
  <li>Dacia</li>

</ol>

Rezultatul va fi urmatorul:

III. BMW
IV. Audi
V. Ford
VI. Logan
VII. Dacia

Ultimul tip de liste si cel mai putin utilizat ,de care foarte rar o sa va loviti, este cel de tip definitie (<dl> si </dl> ). Aceste liste se diferentiaza de celelare prin simplul fapt ca au doua elemente ,un element al termenului definit (<dt>si </dt> - definition term )si altu al definitiei termenului.(<dd>si </dd> -definition define) 

Un exemplu de liste definite este urmatorul:

<dl>
 <dt>BMW</dt>
 <dd>Masina noua</dd>
 <dt>Dacia</dt>
 <dd>Masina veche</dd>

</dl>

Acesta este si sfarsitul acestui tutorial in care am prezentat cum puteti sa utilizati liste , de care tipuri sunt ele si care sunt atributele acestor . Pentru a-mi demonstra ca ai inteles si pentru ati verifica cunostintele , te provoc sa rezolvi urmatorul exercitiu iar rezolvarea vreau sa o pui in rubrica de comentarii de mai jos unde am sa te verific si am sa iti zic cat de bine ai rezolvat exercitiul .

Exercitiu : Creaza o lista ordonata , de cumparaturi (obiecte pe care le poti cumpara de la magazin ) cu cinci itemii .Ordonarea se va face cu cifre arabe incepand de la cifra 5 .   

Scrie codul in rubrica de comentarii de mai jos !