Sunteți pe pagina 1din 7

LISTE

Liste neordonate
• Tag-ul folosit este <ul> … </ul>
• O listă este formată din una sau mai multe
componente
• Fiecare componentă din listă este evidențiată de
tag-ul <li> … </li>
• Există trei tipuri de marcatori: Disc (implicit),
Circle, Square
• Modificarea marcatorului se face cu ajutorul
atributului type folosit în cadrul tag-ului <ul>
Exemple liste neordonate
<html> <html>
<head> <head>
<title> Lista neordonata <title>Lista
implicita </title> neordonata</title>
</head> </head>
<body> <body>
<ul> <ul type="square">
<li>List item 1 ...</li> <li>List item 1 ...</li>
<li>List item 2 ...</li> <li>List item 2 ...</li>
<li>List item 3 ...</li> <li>List item 3 ...</li>
</ul> </ul>
</body> </body>
</html> </html>
Liste ordonate
• Tag-ul folosit este <ol> … </ol>
• O listă este formată din una sau mai multe componente
• Fiecare componentă din listă este evidențiată de tag-ul
<li> … </li>
• Se pot folosi mai multe tipuri de numerotare
• Modificarea tipului de numerotare se face cu ajutorul
atributului type folosit în cadrul tag-ului <ol>
• type="1" - stil: 1, 2, 3, ...
• type="a" - stil: a, b, c, ...
• type="i" - stil: i, ii, iii, ...
• type="I" - stil: I, II, III, ...
• Se poate specifica numărul de început al numerotării
printr-o valoare dată atributului start folosit în cadrul tag-
ului <ol>
Exemple liste ordonate
<html> <html>
<head>
<head> <title>Exemplul listă ordonată</title>
<title>Exemplul lista </head>
<body>
ordonată</title> <ol type="a">
</head> <li>List item 1 ...</li>
<body> <li>List item 2 ...</li>
<li>List item 3 ...</li>
<ol> </ol>
<li>List item 1 ...</li> - Alta lista:
<ol type="I" start="3">
<li>List item 2 ...</li> <li>List item 1 ...</li>
<li>List item 3 ...</li> <li>List item 2 ...</li>
</ol> <li>List item 3 ...</li>
</ol>
</body> </body>
</html> </html>
Liste imbricate

• Se pot imbrica liste inserând <ul>, <ol>


etc. în cadrul <li>
Exemplul liste imbricate
<html>
<head>
<title> Exemplul liste imbricate </title>
</head>
<body>
<ul type="square">
<li> List item 1 ... </li>
<li> List item 2 ...
<ol type="a" start="3">
<li> Alt List item ... </li>
<li> Alt List item ... </li>
</ol></li>
<li> List item 5 ... </li>
</ul>
</body>
</html>

S-ar putea să vă placă și