Rotutorial
www.rotutorial.3xforum.ro Aici gasesti Tutoriale Photoshop,MUonline,Counter-Strike,HTML,PhP,CSS,si multe altele

Nou pe simpatie:
roxigirl85 la Simpatie.ro

Femeie
25 ani
Bucuresti
cauta Barbat
30 - 46 ani

Rotutorial Inregistrare Login PozeNu sunteti logat. Lista Forumurilor Pe Tematici

Rotutorial / HTML si CSS /

Liste in HTML

Pagini: 1

Admin
Administrator
Postari: 67

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>

Pagini: 1