Tutorial HTML - Liste

HTML pune la dispozitie trei tipuri de liste. <ol> va afisa o lista ordonata in timp ce <ul> una neordonata, iar pentru a realiza o lista de defnitii se foloseste <dl>. Foloseste atributele type si start pentru a realiza lista cea mai potrivita cerintelor tale.

- <ul> - unsorted list, buline
- <ol> - ordered list, numere
- <dl> - definition list, lista de definitii.


HTML - Lista ordonata

Foloseste tag-ul <ol>pentru a incepe o lista ordonata. Prin punerea <li></li> (list item) intre tagurile <ol> si </ol> semnalizezi browser-ului elementele listei.

<h4 align="center">Oviective</h4>

<ol>

<li>S gasesc o slujba </li>

<li>Sa iau bani multi </li>

<li>Sa ma mut in alt oras </li>

</ol>

Vizualizare

Oviective

1. Sa gasesc o slujba
2. Sa iau bani multi
3. Sa ma mut in alt oras

Poti incepe lista cu orice alt numar doresti specificandu-l insa cu ajutorul atributului start.

<h4 align="center">Oviective</h4>

<ol start="4" >

<li>S gasesc o slujba </li>

<li>Sa iau bani multi </li>

<li>Sa ma mut in alt oras </li>

</ol>

Vizualizare

Oviective

4. Sa gasesc o slujba
5. Sa iau bani multi
6. Sa ma mut in alt oras

Acest element nu face nimic iesit din comun dar este destul de folositor uneori.


HTML - Alte tipuri de liste ordonate

In afara de modelul mai sus aratat mai sunt alte patru tipuri de liste ordonate. In locul cifrelor arabe poti folosi cifre romane sau la fel de bine litere iar in ambele cazuri pot fi folosite litere mici sau majuscule. Foloseste atributul type pentru a modifica tipul numerotarii.

<ol type="a">

<ol type="A">

<ol type="i">

<ol type="I">

Vizualizare

Litere mici Majuscule Numere romane cu litere mici Numere romane cu majuscula

a. Un loc de munca
b. Bani
c. Alt oras

A. Un loc de munca
B. Bani
C. Alt oras

  i. Un loc de munca
 ii. Bani
iii. Alt oras

  I. Un loc de munca
 II. Bani
III. Alt oras


Liste nesortate

Creaza o lista nesortata cu ajutorul tagului <ul>. Listele nesortate deasemenea sunt de mai multe tipuri si anume, patratele buline si cerculete.Valoarea standard redata de majoritatea browser-elor sunt bulinele

<h4 align="center">lista de cumparaturi </h4>

<ul> <li>lapte</li>

<li>branza</li>

<li>oua</li>

<li>zahar</li>

</ul>

Vizualizeaza exemplul

Am alaturat ceva mai jos un exemplu despre cum arata si celelalte tipuri de liste neordonate.

<ul type="square">

<ul type="disc">

<ul type="circle">

Vizualizare exemplu


HTML - Lista de definitii

Deasemene poti face liste de definitii folosind tag-ul <dl>. Aceasta lista reda cuvantul deasupra definitiei. Este indicat sa ingrosam cuvantu pentru a fi mai bine evidentiat.

<dl>

<dt><b>Fromage</b></dt>

<dd>Cuvant francez pentru branza .</dd>

<dt><b>Voiture</b></dt>

<dd>Cuvant francez pentru masina</dd>

</dl>

Vizualizare exemplu


Tutorialul HTML anterior
Tutorialul HTML urmator


Comentarii


   alecs

Vreau sa fac o lista si sa arate cam asa:

-cuv inceput lista   -element lista
                     -el lista2
                     -etc
intrebarea mea e cum fac , ca elementele sa apara la o anumita distanta de cuv inceput lista si ca o alta lista
24-Oct-2009 - 01:39


   catalin

Nu am inteles prea bine ce vrei dar in principiu cred ca lista de care ai nevoie este o lista de definitii(o ai in acest capitol).<dl>

<dl>
<dt><b>O lista HTML de definitii:</b></dt>
<dd>Un element</dd>
<dd>Un alt element</dd>
<dd>Inca un element</dd>
<dd>Lista de elemente continua</dd>
</dl>
27-Oct-2009 - 19:53


   Cristina

In
<dl>
<dt><b>O lista HTML de definitii:</b></dt>
<dd>Un element</dd>
<dd>Un alt element</dd>
<dd>Inca un element</dd>
<dd>Lista de elemente continua</dd>
</dl>

<dl>are rolul unui aliniat?

cred ca <dd> e bun pentru ce-i trebuia lui alecs mai sus, sa distanteze lista de definitii de lista de elemente.

Acum vorbind serios, ma incurc in toate definitile astea, dar incep sa prind miscarea asa ca merg tot inainte. Ai facut un lucru foarte bun cu site-ul si explicatile. Bravo si multumesc !
09-Feb-2010 - 22:19


   dana

care este rolul lui 'dt' si 'dd'??...ma ajuta cineva?
11-Feb-2010 - 14:58


   catalin

@dana
Dupa cum vad eu explicata este destul de simpla:
<dl> - stabileste inceputul unei liste de definitii.
<dt> - marcheaza titlul unei definitii.
<dd> - incapsuleaza descrierea propriu-zisa. Textul introdus in tagul dd, va fi impins spre dreapta fata de titlu definitiei.
11-Feb-2010 - 19:25


   dana

mersi catalin
11-Feb-2010 - 19:36


   alex

am o intrebare deci vreau sa fac 2 coloane pe coloana 1 am primele 4 si pe col 2 vreau sa le pun pe urmatoarele imi puteti da codul va rog? ca nu gasesc nicaieri...



    CS: 1.6
    CS: Condition Zero
    CS: Source
    CS: ProMod

    Half Life Deathmatch
    Half Life 2
    Team Fortress 2
    Unreal Tournament 3
06-Jul-2010 - 02:17


   catalin

@alex
Ai doua optini

Folosind tabele in html si cel mai simplu zic eu:

<html>
<head>
</head>

<body>
<table width="340" border="0">
  <tr>
    <td width="141">CS: 1.6<br />
    CS: Condition Zero<br />
    CS: Source<br />
    CS: ProMod</td>
    <td width="189"> Half Life Deathmatch<br />
    Half Life 2<br />
    Team Fortress 2<br />
    Unreal Tournament 3</td>
  </tr>
</table>
</body>
</html>

Si a doua optiune ar fi folosint css pentru a stiliza doua div-uri:

<html>
<head>
<style type="text/css">
.float {
position:relative;
float:left;
}
.clear {
clear:both;
}
</style>
</head>
<body>
<div class="float">
CS: 1.6<br />
    CS: Condition Zero<br />
    CS: Source<br />
    CS: ProMod
</div>
<div class="float">
Half Life Deathmatch<br />
    Half Life 2<br />
    Team Fortress 2<br />
    Unreal Tournament 3
</div>
<div class="clear"><span></span></div>
</body>
</html>
06-Jul-2010 - 17:25


   manole

cat mar costa un site in html,gata facut?
04-Oct-2011 - 17:04


   bizzy

@manole te costa in functie de persoana care ti-l face
19-Nov-2013 - 17:30


   andrei

Cum pot sa schimb culoarea scrisului listei?
25-May-2014 - 09:22

1


Trimite un comentariu!

Nume *
E-mail *
Vreau sa fiu anuntat de urmatoarele mesaje la acest articol
Comentariu *

Security image