U4 PDF

UNITATEA DE INVĂȚARE NR.
4
Liste în HTML
Cuprins:
4.1 INTRODUCERE ......................................................................................... 47

4.2 LISTE DE DEFINIŢII ................................................................................ 47
4.3 LISTE NEORDONATE .............................................................................. 48
4.4 LISTE ORDONATE ................................................................................... 50
4.5 APLICAȚII .................................................................................................. 52
Obiective
Însuşirea noţiunilor generale despre inserarea listelor în pagini web.
Înțelegerea tipurilor de liste și a modalităților de inserare în pagini web
Utilizarea listelor și a importanței acestora în proiectarea paginilor web.
Timp alocat:1 oră
4.1 Introducere
Listele HTML reprezintă un mod eficient de a comunica o mare cantitate de

informaţii folosind o cantitate relativ redusă de spaţiu. HTML oferă autorilor de
pagini de web câteva mecanisme specifice pentru afişarea listelor cu informaţii.
Listele HTML sunt de trei tipuri:
 liste de definiţii.
 liste neordonate (liste cu buline);
 liste ordonate (liste numerotate);
În paginile web se folosesc mai ales listele neordonate şi ordonate, ceea ce
nu înseamnă că listele de definiţii au o importanţă mai mică. Acestea din urmă sunt
unice prin faptul că dau posibilitatea definirii a două tipuri diferite de elemente ale
listei, cu numele termenului de definit şi cu definiţiile pentru acel termen.
Listele neordonate sunt similare listelor cu buline (bulleted lists) din MS
Word, în timp ce listele ordonate sunt liste numerotate (numbered lists).
4.2 Liste de definiţii
Unul din cele mai obişnuite elemente din documentele cu mai multe pagini
este un set de definiţii, referinţe sau indexuri. Lista de definiţii este indicată de
tagul <DL> (definition list = listă de definiţii), fiecare element care trebuie definit
este precedat de de tagul <DT> (definition term = termen de definiţie), iar fiecare
definiţie pentru termeni este precedată de tagul <DD>.
47
Sintaxa unei liste de definiţii este:
<DL>
<DT><B> Termen1 pentru definit </B>
<DD> Definirea termenului
<DT><B> Termen2 pentru definit </B>
<DD> Definirea termenului
</DL>
Exemplu:
<html>
<head>
<title>Liste de definitii</title></head>
<body>
<DL> <DT><B> Server </B>
<DD> un calculator care ofera servicii într-o retea;
<DT><B> Client </B>
<DD> un calculator care solicita servicii într-o retea;
</DL>
</body></html>
Figura 6.1.1 – Liste de definiţii
4.3 Liste neordonate
O listă neordonată este un bloc de text delimitat de etichetele

corespondente <UL>...</UL> ("UL" vine de la " unordered list " = lista
neordonată). Fiecare element al listei este iniţiat de eticheta <LI> (list item).
48
Lista va fi indentată faţă de restul paginii Web şi fiecare element al listei
începe pe un rând nou.
Sintaxa este următoarea:
<UL TYPE=t>
<LI> Text1
<LI> Text2
</UL>
unde atributul TYPE defineşte semnul care va precede elementele listei:

t =  "circle" (cerc)
t =  "disc" (disc plin) (valoarea prestabilită);
t =  "square" (pătrat)
Exemplu
<html>
<head>
<title>Liste neordonate</title></head>
<body><h1 align=center>O lista neordonata de liste neordonate</h1><hr>
<ul>Elemente si atribute a unei pagini HTML
<li>Font
<ul type="square">Atribute:
<li>size
<li>color
<li>face
</ul>
<li>Img
<ul type="square">Atribute:
<li>src
<li>alt
<li>border
<li> height
<li> width
</ul>
</ul> </body></html>
49
Figura 6.2.1 – Liste neordonate
4.4 Liste ordonate
O listă ordonată de elemente este un bloc de text delimitat de etichetele

corespondente <OL>...</OL> ("OL" vine de la " ordered list " = listă ordonată).
Fiecare element al listei este iniţiat de eticheta <LI> (list item).
Lista va fi indentată faţă de restul paginii Web şi fiecare element al listei
începe pe un rând nou. Sintaxa este:
<OL TYPE=t START=s>

<LI> Text1
<LI> Text2
<LI> Text3
</OL>
unde atributul TYPE defineşte tipul numerotării elementelor listei, care poate fi:
 "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);
50
 "1" pentru ordonare de tipul 1 , 2 , 3 , 4 etc. (cifre arabe - opţiune
prestabilită);
Atributul START defineşte valoarea de început.
Exemplu
<html>
<head>
<title>Liste ordonate</title></head>
<body>
<OL><B>
<LI> Analiza economica
<LI> Contabilitate financiara
<LI> Proiectarea sistemelor informatice</B></OL>
<OL TYPE="a">
<LI> Curs
<LI> Seminar</OL>
</body></html>
Figura 6.3.1 – Liste ordonate
Dacă într-o listă, în loc de elementele acesteia introduse prin <LI>, se

inserează un bloc de text, aceasta va fi indentat ( întocmai ca elementele unei liste).
Toate aceste liste pot fi folosite împreună printr-un procedeu de imbricare
(crearea de liste în interiorul altor liste). Listele de definiţii sunt în acest caz de un
51
deosebit folos deoarece se pot adăuga diferite tipuri de liste (cum ar fi liste cu
buline sau liste numerotate) în interiorul descrierii din lista de definiţii. Pentru a
crea liste imbricate nu trebuie decât să introducem o listă în interiorul alteia.
Browserul le va afişa automat imbricate. În cazul listelor neordonate, browserul va
schimba şi tipul caracterului afişat la începutul rândului. Astfel, pentru primul
nivel, textul va fi precedat de o bulină plină, al doilea de un cerc, iar pentru
celelalte niveluri de imbricare de un pătrat plin.
În concluzie, folosirea listelor oferă o modalitate simplă de grupare şi
afişare a informaţiilor în paginile de web.
4.5 Aplicații
1.
<html>
<head>
<title>Liste</title></head>
<b> Exemplu de lista ordonata:
</b>
<BR>
Cele trei tipuri de liste HTML sunt:
<OL>
<LI> ordonata (aceasta lista)
<LI> neordonata
<LI> de definitii
</OL>
<b> Exemplu de lista neordonata:
</b>
<BR>
Tag-urile corespunzatoare acestor liste sunt:
<UL>
<LI>OL
<LI>UL (aceasta lista)
<LI>DL
</UL>
<b>
Lista de defintii arata astfel:
</b>
<DL>
<DT> Primul termen
<DD> Prima definitie pentru primul termen
<DD> A doua definitie pentru primul termen
<DT> Al doilea termen
<DD> Prima definitie pentru al doilea termen
52
<DD> A doua definitie pentru al doilea termen
</DL>
</BODY>
</html>
2.
<html>
<head>
53
<title>Liste</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>
54
3.
<HTML>
<HEAD> <TITLE> LISTE </TITLE> </HEAD>
<BODY BGCOLOR=LIGHTYELLOW>
<DL>
<B> <U>LISTA DE DEFINITII </U> </B>
<DT> <B>OBIECT </B>
<DD> <I> ENTITATE BINE DEFINITA </I>
<DT> <B> BAZA DE DATE </B>
55
<DD> <I> COLECTIE DE DATE STOCATE </I>
<DT> <B> SIAD </B>
<DD> <I> SISTEM INFORMATIC DE ADMINISTRARE A
DATELOR </I></DL>
<B><U>LISTE NEORDONATE</U></B>
<UL> BAZE DE DATE
<LI > TABELE
<UL> CARACTERISTICI:
<LI TYPE=CIRCLE> CAMPURI <LI> INREGISTRARI
</UL>
<LI> RELATII
<UL TYPE=CIRCLE> CARACTERISTICI :
<LI> ONE TO ONE <LI> ONE TO MANY
<LI> MANY TO ONE </UL>
</UL>
<OL TYPE ="A"> <B><U>LISTA ORDONATA</U></B>
<LI> CULORI
<OL TYPE="1">
<LI > NEGRU <LI> ALB <LI> ROSU </OL>
<LI> MASINI
<OL TYPE="I">
<LI > RENAULT <LI> LOGAN <LI > BMW </OL>
<LI> FLORI
<OL TYPE="a">
<LI> GAROAFE
<UL> CULORI DISPONIBILE
<LI> ALB <LI> ROSU <LI> GALBEN
</UL>
<LI> TRANDAFIRI
<LI> ALB <LI> ROSU
<IMG SRC="img1.JPG" WIDTH=200 HEIGHT=100 HSPACE=150>
<LI> ORANGE
</UL>
<LI> CRIZANTEME
<LI> ALB <LI> GALBEN
</UL>
<LI> ZAMBILE
<LI> ALB <LI> VIOLET
</UL></OL>
</BODY>
</HTML>
56
57
4.
<html>
<head>
<title>Liste si legaturi</title></head>
<BODY>
<H1 ALIGN=center> EXEMPLU DE PAGINA WEB </H1>
<P> Prin continutul acestui document se exemplifica legatura catre un paragraf al
documentului.
<P> <P><A NAME="CCC"></A>
<OL> <H1>
<LI> <A HREF="#AAA"> Materiile anului I </A>
<LI> <A HREF="#BBB"> Materiile anului II </A>
<LI> <A HREF="#DDD"> Materiile anului III </A> </H1></OL>
<HR> <P>
<H2> <A NAME="AAA"> Materiile anului I </A> </H2> <BR>
<UL>
<LI> Statistica economica
<LI> Bazele contabilitatii
<LI> Informatica economica
<LI> Matematica aplicata in economie
<LI> Limba straina</UL>
<HR> <A HREF="#CCC"> Revenire început </A> <HR>
<P> <H2> <A NAME="BBB"> Materiile anului II </A> </H2> <BR>
<UL>
<LI> Evaluarea intreprinderii
<LI> Contabilitate financiara 1 si 2
<LI> Econometrie
<LI> Contabilitatea institutiilor de credit
<LI> Bazele de date si limbaje de programare
<LI> Proiectarea sistemelor informatice de gestiune
<LI> Contabilitate in CTS</UL>
<P> <H2> <A NAME="DDD"> Materiile anului III </A> </H2> <BR>
<UL>
<LI> Contabilitate de gestiune
<LI> Analiza economica financiara 1 si 2
<LI> Contabilitate internationala
<LI> Programarea calculatoarelor
<LI> Expertiza contabila
<LI> Contabilitate aprofundata</UL>
</BODY>
</html>
58
59

U4 PDF

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

U4 PDF

Încărcat de

Drepturi de autor:

Formate disponibile

UNITATEA DE INVĂȚARE NR.

4.1 INTRODUCERE ......................................................................................... 47

Timp alocat:1 oră

Listele HTML reprezintă un mod eficient de a comunica o mare cantitate de

4.2 Liste de definiţii

Figura 6.1.1 – Liste de definiţii

4.3 Liste neordonate

O listă neordonată este un bloc de text delimitat de etichetele

unde atributul TYPE defineşte semnul care va precede elementele listei:

4.4 Liste ordonate

O listă ordonată de elemente este un bloc de text delimitat de etichetele

<OL TYPE=t START=s>

Figura 6.3.1 – Liste ordonate

Dacă într-o listă, în loc de elementele acesteia introduse prin <LI>, se

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