| PROIECTARE SITE WEB > DOCUMENTATIE - HTML - Liste |
Proiectare Site si Web Design - Standardul HTML
Liste in HTML
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:
<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:
<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:
<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:
<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:
<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.
<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:
<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>
|
Creare
si actualizare site