Document PDF 5

Sursa: http://www.ecursuri.
ro/
Lecția 5
Crearea listelor in HTML
În această lecţie vei învăţa cum poţi folosi listele în pagina ta web. Listele pe care le poţi crea cu
ajutorul limbajului HTML sunt de următoarele tipuri: liste neordonate, liste ordonate şi liste de
definiţii.
Liste neordonate (UL)

Înainte de a vorbi despre listele neordonate sa vedem, mai întâi, cum arată una:
Firma noastră vă oferă următoarele servicii:
 printare
 indosariere
 xerox
 tehnoredactare
Pentru a putea realiza o listă neordonată trebuie sa folosim tag-urile <UL> si </UL> (unordered list).
Fiecare element al listei trebuie introdus de tag-ul <LI>. Să vedem cum arata codul HTML pentru lista
de mai sus:
<HTML>
<HEAD>
<TITLE>Liste neordonate</TITLE>
</HEAD>
<BODY>
<UL>Firma noastra va ofera urmatoarele servicii:
<LI>printare
<LI>laminare
<LI>indosariere
<LI>xerox
<LI>tehnoredactare
</UL>
</BODY>
</HTML>
Cu ajutorul atributului TYPE, putem schimba simbolul din faţa fiecărui element. Acesta este folosit în
mod implicit atunci când folosim o lista neordonată. Astfel, prin atribuirea unei valori atributului
TYPE, vom putea face ca elementele listei sa fie precedate de un pătrat sau de un cerc gol.
Pentru a vedea rezultatele, înlocuieşte linia a 6-a din codul HTML de mai sus cu una din următoarele
linii de cod: <UL TYPE=circle> Firma noastra va ofera urmatoarele servicii:
- pentru cercuri goale: <UL TYPE=circle> Firma noastra va ofera urmatoarele servicii:
- pentru pătrate pline: <UL TYPE=square>Firma noastra va ofera urmatoarele servicii:
Liste ordonate (OL)
Am văzut cum putem folosi listele neordonate în cadrul paginilor web. Lista următoare păstrează
conţinutul celei de mai sus însă este o listă ordonată (ordered list). Să vedem diferenţa:
Firma noastra va ofera urmatoarele servicii:
1. printare
2. indosariere
3. xerox
4. tehnoredactare
1
Sursa: http://www.ecursuri.ro/
Lecția 5
Listele ordonate se formează cu ajutorul tag-urilor <OL> si </OL> (ordered list). La fel ca şi la listele
neordonate, fiecare element trebuie introdus de tag-ul <LI>.
Iată codul pentru lista ordonata de mai sus:
<HTML>
<HEAD>
<TITLE>Liste ordonate</TITLE>
</HEAD>
<BODY>
<OL>Firma noastra va ofera urmatoarele servicii:
<LI>printare
<LI>laminare
<LI>indosariere
<LI>xerox
<LI>tehnoredactare
</OL>
</BODY>
</HTML>
Ca si în cazul listelor neordonate, şi la listele ordonate, atributul TYPE are o valoare implicită, aşa cum
am văzut în exemplul de mai sus: numere. În loc de numere putem folosi si alte caractere. Pentru a
folosi aceste caractere este de ajuns să utilizăm atributul TYPE cu valoarea potrivită.
Pentru a vedea rezultatele, înlocuieşte linia a 6-a din codul HTML de mai sus cu una din următoarele
linii de cod:
- pentru litere mari: <OL TYPE=A>Firma noastra va ofera urmatoarele servicii:
- pentru litere mici: <OL TYPE=a>Firma noastra va ofera urmatoarele servicii:
- pentru cifre romane mici: <OL TYPE=i>Firma noastra va ofera urmatoarele servicii:
- pentru cifre romane mari: <OL TYPE=I>Firma noastra va ofera urmatoarele servicii:
Pe lângă atributul TYPE, pentru tag-ul <OL> mai putem folosi şi atributul START prin care putem
indica valoarea de început folosită în listă.
Exemplu:
<HTML>
<HEAD>
<TITLE>Liste ordonate</TITLE>
</HEAD>
<BODY>
<OL TYPE=A START=4>In vacanta de vara am vizitat urmatoarele oraşe:
<LI>Roma
<LI>Viena
<LI>Londra
<LI>Paris
<LI>Praga
</OL>
</BODY>
</HTML>
2
Lecția 5
Liste de definiţii (DL)
Pentru a forma liste de definiţii trebuie să foloseşti tag-urile <DL> si </DL> (definition list).
Iata cum arata o lista de definitii:

Teorema lui Pitagora
În orice triunghi dreptunghic suma pătratelor catetelor este
egală cu pătratul ipotenuzei.
Teorema catetei
În orice triunghi dreptunghic pătratul catetei este egal cu
produsul dintre ipotenuză şi proiecţia catetei pe ipotenuză.
Teorema înălţimii
În orice triunghi dreptunghic pătratul înălţimii este egal cu
produsul proiecţiilor celor două catete pe ipotenuză.
Fiecare element al unei liste de definiţii va trebui introdus de tag-ul <DT> (Definition Term), iar apoi
fiecare definiţie va fi precedată de tag-ul <DD> (Definition Definition).
Codul listei de mai sus este următorul:
<HTML>
<HEAD>
<TITLE>Liste definitii</TITLE>
</HEAD>
<BODY>
<DL>
<DT>Teorema lui Pitagora
<DD>În orice triunghi dreptunghic suma patratelor catetelor este egala cu patratul ipotenuzei.
<DT>Teorema catetei
<DD>În orice triunghi dreptunghic patratul catetei este egal cu produsul dintre ipotenuza şi proiectia
catetei pe ipotenuza.
<DT>Teorema inaltimii
<DD>În orice triunghi dreptunghic patratul inaltimii este egal cu produsul proiectiilor celor doua catete
pe ipotenuza.
</DL>
</BODY>
</HTML>
Personalizarea listelor
Dacă vrei ca în loc de simbolurile folosite în mod prestabilit pentru elementele listelor să fie afişate
propriile imagini, în loc de tag-ul <LI> cu care introducem fiecare element al listei vom adăuga
imaginea dorita cu ajutorul tag-ului <IMG>.
Pentru a înţelege mai bine să luăm un exemplu. Salvează mai întâi imaginea de mai jos în directorul
Poze cu numele de sageata.gif.
Acum să scriem codul unei pagini web ce va conţine o listă cu persoanele din cadrul departamentului
Contabilitate al unei firme:
3
Lecția 5
<HTML>
<HEAD>
<TITLE>Lista personal</TITLE>
</HEAD>
<BODY>
<UL>Lista persoanelor care sunt angajate in cadrul departamentului CONTABILITATE:
 <IMG SRC="../Poze/sageata.gif">Gheorghe Maria
 <IMG SRC="../Poze/sageata.gif">Prodan Eugenia
 <IMG SRC="../Poze/sageata.gif">Matac Marian
 <IMG SRC="../Poze/sageata.gif">Neacşu Elena
 <IMG SRC="../Poze/sageata.gif">Ionescu Violeta
 <IMG SRC="../Poze/sageata.gif">Manea Cristina
 <IMG SRC="../Poze/sageata.gif">Ionita Laura
 <IMG SRC="../Poze/sageata.gif">Serbanescu Mihaela
 <IMG SRC="../Poze/sageata.gif">Craciun Dorina
 <IMG SRC="../Poze/sageata.gif">Neagu Emil
</UL>
</BODY>
</HTML>
Salvează pagina în directorul Pagini cu numele de listapersonal.html.
Exercitii:
1. Scrie codul HTML al unei pagini web care să conţină următoarea listă:
 Michael Schumacher
 Rubens Barichello
 Jenson Button
 Fernando Alonso
 Giancarlo Fisichella
 Juan Pablo Montoya
 Kimi Raikkonen
 Jacques Villeneuve
 David Coulthard
 Ralf Schumacher
În loc de semnul din faţa fiecărui pilot foloseşte imaginea alăturată
Salvează imaginea cu numele f1.jpg, în directorul Poze.

Salvează pagina HTML în directorul Pagini, cu numele formula1.html.

Document PDF 5

Î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

Document PDF 5

Încărcat de

Drepturi de autor:

Formate disponibile

Sursa: http://www.ecursuri.

Liste neordonate (UL)

Liste ordonate (OL)

Liste de definiţii (DL)

Iata cum arata o lista de definitii:

Codul listei de mai sus este următorul:

Salvează pagina în directorul Pagini cu numele de listapersonal.html.

În loc de semnul din faţa fiecărui pilot foloseşte imaginea alăturată

Salvează imaginea cu numele f1.jpg, în directorul Poze.

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