E-learn.ro
Panou utilizatori
Utilizator Parola
Creeaza cont nou    Recupereaza parola
Login
Newsletter
Introdu adresa ta de email
Inscrie-te
Inchide panoul de utilizatori
Add to Google

Tutoriale HTML

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

WEB DESIGN  /  HTML  /  Bazele HTML (10)

V. Liste

15.05.2008
V. Liste

In acest tutorial vei invata cum iti poti organiza continutul paginii tale Web cu ajutorul listelor. Vom studia listele ordonate, neordonate si de definitii.

Total vizualizari: 4317 4317 afisari   |   Comentarii  0   |   Rating   |   (1 vot)   |   Timp necesar: 15 min 15 min   |   Nivel de cunostiinte necesar: Incepator  Incepator

Sursa:  E-learn.ro  
Autor:  E-learn.ro
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
1
comenteaza printeaza

In acest tutorial vei invata cum iti poti organiza continutul paginii tale Web cu ajutorul listelor. Vom studia listele ordonate, neordonate si de definitii.

Tipuri de liste

Exista 3 tipuri pentru liste:

1. Liste neordonate (cunoscute si ca "bullet"). De exemplu:
  - Merele sunt verzi
  - Bananele sunt galbene
  - Portocalele sunt portocalii

2. Liste ordonate (sau numerotate). De exemplu:
1. Aprindeti pocnitoarea.
2. Aruncati-o.

3. Liste de definitii
Acestea sunt folosite in cazul cand fiecare element al listei are nevoie de un sumar, urmat de descriere mai detaliata. De exemplu:

Paris, Franta
Capitala Frantei. Printre atractii se numara turnul Eiffel si catedrala Notre Dame.
Sydney, Australia
Capitala statului New South Wales, Australia. Atractii: Opera si podul Harbour.
Londra, Anglia
Capitala Angliei. Obiective turistice: Tower Bridge si Big Ben.

Sa vedem cum putem crea aceste tipuri de liste in HTML.

Crearea listelor neordonate
Pentru a crea o lista neordonata folosim tag-urile <UL></UL>; la inceputul si sfarsitul listei si <LI></LI> pentru fiecare element.

Pentru exemplul de mai sus, codul HTML este:

<ul>
<li> Merele sunt verzi  </li>
<li> Bananele sunt galbene  </li>
<li> Portocalele sunt portocalii  </li>
</ul>

(Tag-urile </LI> sunt optionale, dar le vom folosi pentru a evita ambiguitatile.)

Crearea listelor ordonate
Pentru listele ordonate (numerotate), metoda este aceeasi, cu singura deosebire ca tag-urile folosite vor fi <OL></OL> in loc de <UL></UL>.
Pentru exemplul de mai sus, codul este:

<ol>
<li> Aprindeti pocnitoarea.</li>
<li> Aruncati-o.</li>
</ol>

Crearea listelor de definitii
Listele de definitii sunt ceva mai greu de realizat fata de primele doua tipuri, dar metoda este totusi destul de simpla.

Lista va fi creata folosind tag-urile <DL> si </DL> pentru inceput si sfarsit. Fiecare element al listei este alcatuit dintr-un termen creat cu ajutorul tag-urilor <DT></DT> si definitia propriu-zisa pentru care sunt folosite tag-urile <DD></DD>.

Deci, codul pentru exemplul de mai sus este:

<dl>
<dt><strong>Paris, Franta</strong></dt>
<dd> Capitala Frantei. Printre atractii se numara 
          turnul Eiffel si catedrala Notre Dame.  </dd>
<dt><strong>Sydney, Australia</strong></dt>
<dd> Capitala statului New South Wales, Australia. 
          Atractii: Opera si podul Harbour.  </dd>
<dt><strong>Londra, Anglia</strong></dt>
<dd> Capitala Angliei. Obiective turistice: Tower Bridge 
          si Big Ben. </dd>
</dl>

Liste imbricate
Este posibil ca in cadrul unei liste sa avem o alta lista. De exemplu, o lista cu doua niveluri poate fi:

1. Capitolul 1
  1. Sectiunea 1.1
  2. Sectiunea 1.2
2. Capitolul 2
  1. Sectiunea 2.1
  2. Sectiunea 2.2
  3. Sectiunea 2.3

Codul HTML pentru crearea listei de mai sus este:

<ol>
  <li>Capitolul 1
    <ol>
      <li> Sectiunea 1.1</li>
      <li> Sectiunea 1.2</li>
    </ol>
  </li>
  <li>Capitolul 2
    <ol>
      <li> Sectiunea 2.1</li>
      <li> Sectiunea 2.2</li>
      <li> Sectiunea 2.3</li>
    </ol>
  </li>
</ol>

Pot fi imbricate tipuri diferite de liste. In exemplul urmator, liste ordonate si cele neordonate sunt definite in cadrul unei liste de definitii.

Fructe
  - Merele sunt verzi
  - Bananele sunt galbene
  - Portocalele sunt portocalii

Instructiuni pentru artificii
1. Aprindeti pocnitoarea.
2. Aruncati-o.

Codul HTML este:

<dl>
  <dt><strong>Fructe</strong></dt>
  <dd>
    <ul>
<li> Merele sunt verzi  </li>
<li> Bananele sunt galbene  </li>
<li> Portocalele sunt portocalii  </li>
   </ul>
  </dd>
  <dt><strong>Instructiuni pentru artificii</strong></dt>
  <dd>
    <ol>
      <li>Aprindeti pocnitoarea.</li>
      <li>Aruncati-o.</li>
    </ol>
  </dd>
</dl>

Pentru a exersa, incearca sa creezi singur(a) cateva liste pe care sa le poti folosi in paginile tale HTML.

Pagina:
1
comenteaza printeaza
Alte tutoriale HTML:
Noteaza acest tutorial
Rating tutorial
 
(1 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
Posteaza un comentariu
Pentru a posta un comentariu, trebuie sa fii logat!
0 TOP UTILIZATORI* 0 0
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
4670
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4590
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4510
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4415
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
4290
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Flash Java RoR PHP Powerpoint Sony Vegas Excel JSON HTML Bridge Fotografie COREL DRAW Verilog Action Script PSD Python Javascript Outlook Vista CSS Illustrator Lightroom AJAX Photoshop Word XML Gimp Dreamweaver Swift 3D MySQL SEO XHTML SWF Fireworks StyleSheet Ruby on Rails
Promovare:
Daca faci parte din comunitatea E-learn.ro si doresti promovarea acesteia, poti accesa pagina de promovare.
Arhiva newsletter:
Daca ai ratat un numar mai vechi, sau vrei sa revezi care au fost noutatile E-learn.ro la un moment dat, poti accesa arhiva de newslettere.
  Copyright © 2008-2013 E-LEARN.ro. Toate drepturile rezervate. Termeni si conditii.
Conceput si realizat de Neokinetics Software