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
Oviective1. Sa gasesc o slujba |
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
Oviective4. Sa gasesc o slujba |
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 |
A. Un loc de munca |
i. Un loc de munca |
I. Un loc de munca |
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> |
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"> |
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> |
Comentarii
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
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>
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 !
care este rolul lui 'dt' si 'dd'??...ma ajuta cineva?
@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.
mersi catalin
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
@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>
cat mar costa un site in html,gata facut?
Trimite un comentariu!
