Liste in HTML

Subiect: Liste in HTML Sam Mai 02, 2009 3:42 am

Unul din cele mai obisnuite elemente din documentele cu mai multe pagini este un set de definitii, referinte sau indexuri. Glosarele sunt exemple clasice in acest sens; cuvintele sunt listate in ordine alfabetica, urmate de definitii ale termenilor respectivi. In HTML, intreaga sectiune a unui glosar va fi gestoinata printr-o lista de definitii care este inclusa intr-o pereche de marcaje de tip lista de definitii: <dl>...</dl> (de la "definition list" = lista de definitii).

Observatii:

- Un termen al listei este marcat de eticheta <dt> (de la "definition term"= termen definit);
- Definitia unui termen este initiata de eticheta <dd> (de la "definition description"= descrierea definitiei);
- Definitia unui termen incepe pe o linie noua si este identata;

Exemplu:

Code:

<html>
<head><title>listex_1</title></head>
<body><H2 align=center>O lista de definitii</H2><hr>
<dl>
Glosar de termeni de World Wide Web
<dt><b>hypertext</b>
<dd>- o interconectare Web de informatii de tip text, in care orice cuvant sau fraza poate face legatura catre un alt punct din document sau catre un alt document
<dt><b>date</b>
<dd>- fluxul nesfarsit de materiale care apar pe Internet, spre deosebire de informatii care sunt date cu un anumit inteles sau valoare
<dt><b>informatie</b>
<dd>- sub-setul de date care are efectiv semnificatie si care este util la momentul curent
</dl>
</body>
</html>

Liste neordonate:

O lista neordonata este un bloc de text delimitat de etichetele corespondente <ul>...</ul> ("ul" vine de la "unordered list"= lista neordonata). Fiecare element al listei este initiat de eticheta <li> (list item). Lista va fi indentata fata de restul paginii Web si fiecare element al listei incepe pe un rand nou.

Exemplu:

Code:

<html>
<head><title>listex_2</title></head>
<body><H2 align=center>O lista neordonata</H2><hr>
Glosar de termeni World Wide Web
<ul>Culori uzuale disponibile prin nume
<li>Black <li>White <li>Red <li>Green <li>Blue <li>Yellow <li>Purple <li>Aqua
</ul>
</body>
</html>

Tag-urile <ul> si <li> pot avea un atribut " type" care sabileste caracterul asfisat in fata fiecarui element al listei. Valorile posibile al acestui atribut sunt:

1. "circle" (cerc);
2. "disc" (disc plin) - valoarea implicita;
3. "square" (patrat);

Listele neordonate pot fi imbricate pe mai multe niveluri, ca in exemplul urmator:

Code:

<html>
<head><title>listex_3</title></head>
<body><H2 align=center>O lista neordonata de liste neordonate</H2><hr>
Glosar de termeni de World Wide Web
<ul>Elemente si atribute a unei pagini HTML
<li>Frameset <ul>Atribute: <li>cols <li>rows <li>border </ul>
<li>Frame <ul>Atribute: <li>src <li>name <li>scrolling </ul>
</ul>
</body>
</html>

Liste ordonate

O lista ordonata de elemente este un bloc de text delimitat de etichetele corespondente <ol>...</ol> ("ol" vine de la "ordered list"= lista ordonata). Fiecare element al listei este initiat de eticheta <li> (list item). Lista va fi indentata fata de restul paginii Web si fiecare element al listei incepe pe un rand nou.

Exemplu:

Code:

<html>
<head><title>listex_4</title></head>
<body><H2 align=center>O lista ordonata</H2><hr>
<ol>Culori uzuale disponibile prin nume
<li>Black <li>White <li>Red <li>Green <li>Blue <li>Yellow <li>Purple <li>Aqua
</ol>
</body>
</html>

Tag-urile <ol> si <li> pot avea un atribut " type" care stabileste tipul de caractere utilizate pentru ordonarea listei. Valorile posibile sunt:

1. "A" pentru ordonare de tipul A, B, C, D, etc. (litere mari);
2. "a" pentru ordonare de tipul a, b, c, d, etc. (litere mici);
3. "I" pentru ordonare de tipul I, II, III, IV, etc. (cifre romane mari);
4. "i" pentru ordonare de tipul i, ii, iii, iv, etc. (cifre romane mici);
5. "1" pentru ordonare de tipul 1, 2, 3, 4, etc. (cifre arabe - optiune prestabilita);

Urmatorul exemplu este o lista ordonata cu cifre romane:

Code:

<html>
<head><title>listex_5</title></head>
<body><H2 align=center>O lista ordonata cu cifre romane</H2><hr>
<ol type="I">Culori uzuale disponibile prin nume
<li>Black <li>White <li>Red <li>Green <li>Blue <li>Yellow <li>Purple <li>Aqua
</ol>
</body>
</html>

Tag-ul <ol> poate avea un atribut start care stabileste valoarea initiala a secventei de ordonare. Valoarea acestui atribut trebuie sa fie un numar intreg pozitiv.
Urmatorul exemplu este o lista ordonata cu litere mari, incepand cu valoarea C.

Code:

<html>
<head><title>listex_6</title></head>
<body><H2 align=center>O lista ordonata cu litere mari, incepand de la valoarea C</H2><hr>
<ol type="A" start="3">Culori uzuale disponibile prin nume
<li>Red <li>Green <li>Blue <li>Yellow <li>Purple <li>Aqua
</ol>
</body>
</html>

Listele ordonate pot fi imbricate intre ele sau cu liste neordonate, ca in exemplul urmator:

Code:

<html>
<head><title>listex_8</title></head>
<body><H2 align=center>O lista ordonata de liste ordonate si neordonate</H2><hr>
<ol>Un sistem informatic include:
<li>Hardware:
<ol>
<li>placa de baza
<li>procesor
<li>memorie
<li>harddisk
</ol>
<li>Software:
<ul>
<li>Linux
<li>Windows
<li>OS/2
<li>Unix
</ul>
<li>Software de aplicatie:
<ul type="disc">
<li>VisualC++
<li>Java
<li>SQL
<li>CorelDraw
</ul>
</ol>
</body>
</html>