Limbajul HTML

Limbajul HTML

7. Liste

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 lista de definitii: <dl>...</dl> (de la "definition list" = lista de definitii).

Observatii: -Un termen al listei este initiat 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 indentata;

<html> <head><title>listex_1</title></head> <body><h1 align=center>O lista de definitii</h1><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 noua.

<html> <head><title>listex_2</title></head> <body><h1 align=center>O lista neordonata</h1><hr>
Glosar de termeni de 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 satileste caracterul asfisat in fata fiecarui element al listei.valorile posibile al acestui atribut sunt:

"circle" (cerc)

"disc" (disc plin) (valoarea prestabilita);

"square" (patrat)

Listele neordonate pot fi imbricate pe mai multe niveluri

<html> <head><title>listex_3</title></head> <body><h1 align=center>O lista neordonata de liste neordonate</h1><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 noua.

<html> <head><title>listex_4</title></head> <body><h1 align=center>O lista ordonata</h1><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:

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

Urmatorul exemplu este o lista ordonata cu cifre romane

<html> <head><title>listex_5</title></head> <body><h1 align=center>O lista ordonata cu cifre romane</h1><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 de la valoarea C.

<html> <head><title>listex_6</title></head> <body><h1 align=center>O lista ordonata cu litere mari, incepand de la valoarea C</h1><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>

Tag-ul <li> poate avea un atribut value care satileste valoare pentru elementul respectiv al listei. Valoarea acestui atribut trebuie sa fie un numar intreg pozitiv (vezi urmatorul exemplu).

<html> <head><title>listex_7</title></head> <body><h1 align=center>O lista ordonata avand itemi setati individual</h1><hr>
<ol start="3">Repetati urmatorii pasi ai algoritmului
<li>salvati fisierul;
<li value="6">incarcati fisierul in browser;
<li>schimbati browserul utilizat
<li>incarcati din nou fisierul
</ol> </body> </html>

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

<html> <head><title>listex_8</title></head> <body><h1 align=center>O lista ordonata de liste ordonate si neordonate</h1><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>

O lista de meniuri este un bloc delimitat de etichete corespondente <menu>...</menu>. Fiecare element al listei este initiat de eticheta <li> ( list item ). Cele mai multe browsere afiseaza lista de meniuri ca pe o lista neordonata.

O lista de directoare este un bloc delimitat de etichete corespondente <dir>...</dir> (de la " director "). Fiecare element al listei este initiat de eticheta <li> ( list item ). Cele mai multe browsere afiseaza lista de directoare ca pe o lista neordonata.

(Nu se recomanda utilizarea acestori tipuri de liste).

Utilizari speciale ale listelor

Daca intr-o lista, in loc de elementele acesteia introduse prin <li>, se insereaza un bloc de text, aceasta va fi indentat ( intocmai ca elementele unei liste).

<html> <head><title>listex_9</title></head> <body><h1>Un bloc de text indentat</h1><hr>
<ol> Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat.
</ol> </body> </html>

In exemplul urmator lista de definitii are itemii <dt> si <dd> multipli.

<html> <head><title>listex_10</title></head> <body><h1 align=center>O lista de definitii speciala</h1><hr> <dl>Program
<dt><b>Luni</b>
<dt><b>Marti</b>
<dt><b>Miercuri</b>
<dd><i>Ora 9.00.</i>Insciere
<dd><i>Ora 11.00.</i>Audieri
<dd><i>Ora 13.30.</i>Raspunsuri
</dl> </body> </html>

Ultimul exemplu este o lista neordonata personalizata care utilizeaza pe post de elemente imagini si texte.

<html> <head><title>listex_11</title></head> <body><h1>O lista personalizata</h1><hr>
<ul>Tipuri de masini Volkswagen sunt:<br>
<img src="images/reddot.gif">Golf<br>
<img src="images/reddot.gif">Jetta<br>
<img src="images/reddot.gif">Passat<br>
<img src="images/reddot.gif">Bora<br>
<img src="images/reddot.gif">Corrado<br>
<img src="images/reddot.gif">Transporter<br> </body> </html>

1111

[ HOME ]