Crearea listelor în pagina WEB

Crearea codului HTML pentru diferite

tipuri de liste
 Despre liste
•Listele sunt un mod simplu de organizare a
informației.
•HTML pune la dispozitie trei tipuri de liste. Tag-urile:
<ul> va afișa o listă neordonata;
<ol> va afișa o listă ordonată;
<dl>va afișa o listă de defniții.
•<ul> - unsorted list, marcată cu buline;
•<ol> - ordered list, marcată cu numere, litere, ...
•<dl> - definition list, lista de definitii
Poți folosi atributul type pentru a realiza lista cea mai
potrivită cerințelor tale.
Tipuri de liste

Neordonate -
nesortate
(unsoerted)
Ordonate
(ordered)
De definiții
(definition)
 Liste neordonate (unsorted list)
• Aceste liste sunt delimitate de tagu-
ul, eticheta <ul> și </ul>
iar elementele listei de <li> si </li>.
• Listă de fructe: mere, pere, caise, ...
• Listă de legume: roșii cartofi, morcovi,
...
• Listă de definiții: pătrat ..., seră ...,
HTML ..., ...
 Exemplu: Listă neordonată
Codul HTML Afisare în pagina WEB
Exemple de fructe:
<ul> Exemple de fructe:
<li>mere</li> • mere
<li>pere</li> • pere
<li>caise</li> • caise
</ul>
 Liste neordonate: Atributul type

Codul HTML Afisare în pagina WEB

Exemple de legume: Exemple de legume:
<ul>
<li type="square">rosii</li>  rosii
<li type="circle">cartofi</li> o cartofi
<li type="disc">morcovi</li> • morcovi
</ul>
 Liste ordonate (ordered list)
• Aceste liste sunt delimitate de etichetele
<ol> si </ol> iar elementele listei de
<li> si </li>.
• Elementele listei pot fi particularizate
folosind atributul type care poate lua
valorile A (litere mari), a (litere mici), I (cifre
romane mari), i (cifre romane mici), 1
(optiunea default-prestabilit).
 Atributul type
Ordonăm lista cu:
<ol type="a"> literele mici: a,b,c...
<ol type="A"> literele mari: A,B,C,...
<ol type="i"> numere mici romane: i, ii,
iii, iv, v, ...
<ol type="I"> numere mari romane: I, II,
III, IV, V, VI, ...
<ol type="1"> numere arabe: 1, 2, 3...
 Particularizarea listei (type)
Litere mici Majuscule Numere Numere
(type a ) (type A ) romane cu romane cu
litere mici ma
(type i ) Juscula
(type I )
a. Un loc de A. Un loc de i. Un loc de I. Un loc de
munca munca munca munca
b. Bani B. Bani ii. Bani II. Bani
c. Alt oras C. Alt oras iii. Alt oras III. Alt oras
 Exemplu: Liste ordonate
Codul HTML Afisare în pagina WEB
Exemple de combustibili: Exemple de combustibili:
<ol>
<li>benzina</li> 1. benzina
<li>motorina</li> 2. motorina
<li>gaz lichefiat</li> 3. gaz lichefiat
</ol>
 Exemplu: Liste ordonate
Codul HTML Afisare în pagina WEB
Medii de stocare: Medii de stocare:
<ol>
<li type="I">HDD-ul</li> I. HDD-ul
<li type="I">discheta</li> II. discheta
<li type="I">CD-ROM- III. CD-ROM-ul
ul</li>
</ol>
 Liste de definiții (definition list)
• Aceste liste sunt delimitate de etichetele
<dl> si </dl>.
Termenii listei sunt delimitați de
etichetele <dt> si </dt> iar definițiile
termenilor de <dd> si </dd>.
 Exemplu: Liste de definiții
Codul HTML Afisare în pagina WEB
Legenda: Legenda:
<dl>
<dt>HTML</dt> HTML
<dd>Hyper Text Mark-ul Hyper Text Mark-ul
Language</dd> Language
<dt>IP</dt> IP
<dd>Internet Internet Protocol
Protocol</dd>
</dl>
 Exemplu: Liste de definiții
Codul HTML Afisare în pagina WEB

<dl>
<dt><b>Fromage</b></dt> Fromage
<dd>Cuvant francez pentru Cuvant francez pentru
branza.</dd> branza.
<dt><b>Voiture</b></dt> Voiture
<dd>Cuvant francez pentru Cuvant francez pentru
masina.</dd> </dl> masina.
 Pentru lucrul independent
• Scrieți codul HTML pentru crearea a listei:
 primilor 5 elevi din lista grupei (listă
ordonată);
 lista a 5 legume (listă nerdonată);
 definiți 2 corpuri și 3 figuri geometrice (listă
de definiții).
 Vă doresc mult SUCCES!

Poți face întodeauna mai

mult decât ai crezut.
Roger Martin du Gard