CAP. 5. CREAREA LISTELOR

5.1. Noţiuni generale

Limbajul HTML le permite utilizatorilor să folosească diverse mecanisme pentru prezentarea informaţiilor sub forma listelor.

Listele reprezintă succesiuni de elemente, fiecare element fiind evidenţiat printr-un număr sau printr-un marcaj, având rolul de a atrage atenţia asupra unor idei din text. Fiecare listă poate conţine unul sau mai multe elemente.

În funcţie de elementele conţinute, listele sunt de trei tipuri:

· liste ordonate

· liste neordonate

· liste de definiţii

5.2. Listele ordonate

Într-o listă ordonată elementele sunt numerotate automat de browser. Tag-ul ce marchează începutul unei liste ordonate este <OL>. Folosirea tag-ului de închidere </OL> este obligatorie.

Elementele listei sunt marcate de tag-ul <LI>. Folosirea tag-ului de închidere </LI> este opţională.

Modul de folosire a acestor tag-uri este redat în exemplul următor:

<OL>

<LI>primul element</LI>

<LI>al doilea element</LI>

<LI>al treilea element</LI>

</OL>

având ca rezultat afişarea listei în această formă:

1. primul element

2. al doilea element

3. al treilea element

Atributele specifice acestui element sunt:

Atribut	Valoare	Descriere
start	număr sau literă	Precizează valoarea cu care va începe numerotarea.
type	A a I i 1	Sunt folosite simboluri alfabetice majuscule Sunt folosite simboluri alfabetice minuscule Sunt folosite simboluri numerice romane majuscule Sunt folosite simboluri numerice romane minuscule Sunt folosite simboluri numerice arabe

5.3. Listele neordonate

Într-o listă neordonată elementele sunt marcate prin simboluri similare cu Bullets din Microsoft Word, simbolul implicit fiind ● “disc”. Tag-ul ce marchează începutul unei liste ordonate este <UL>. Folosirea tag-ului de închidere </UL> este obligatorie.

La fel ca şi la listele ordonate, elementele listei sunt marcate de tag-ul <LI>.

Modul de folosire a acestor tag-uri este redat în exemplul următor:

<UL>

<LI>primul element</LI>

<LI>al doilea element</LI>

<LI>al treilea element</LI>

</UL>

având ca rezultat afişarea listei în această formă:

· primul element

· al doilea element

· al treilea element

Atributele specifice acestui element sunt:

Atribut	Valoare	Descriere
type	disc square circle	Sunt folosite simboluri de tip disc Sunt folosite simboluri de tip pătrat Sunt folosite simboluri de tip cerc

5.4. Listele de definiţii

Listele de definiţii sunt puţin diferite de celelalte două tipuri, întrucât fiecare termen al listei se compune din două elemente: Termenul Definiţiei şi Descrierea Definiţiei.

Tag-ul ce marchează începutul unei liste de definiţii este <DL>. Folosirea tag-ului de închidere </DL> este obligatorie.

Tag-ul ce marchează termenul definiţiei este <DT>. Folosirea tag-ului de închidere </DT> este opţională.

Tag-ul ce marchează descrierea definiţiei este <DD>. Folosirea tag-ului de închidere </DD> este opţională.

Modul de folosire a acestui tag este redat în exemplul următor:

<DL>

<DT>HTML</DT>

<DD>Hyper Text Markup Language</DD>

<DT>WWW</DT>

<DD>World Wide Web!</DD>

</DL>

având ca rezultat afişarea listei în această formă:

HTML

Hyper Text Markup Language

WWW

World Wide Web

După cum se poate observa, descrierea definiţiei este aliniată mai interior, tocmai pentru a sublinia caracterul relaţiei de subordonarea existent faţă de termenul definiţiei.

5.5. Listele imbricate

Uneori este necesar să folosim anumite tipuri de liste în interiorul altora. Împreună, acestea formează listele imbricate. În astfel de cazuri, lista interioară nu mai trebuie să fie delimitată de tag-ul <LI>.

Modul de folosire a listelor imbricate este redat în exemplul următor:

<OL type="I">

<LI>Introducere

<OL TYPE="1">

<LI>Cuvânt înainte

<LI>Notiuni generale

</OL>

<LI>Realizarea unei pagini web

<OL TYPE="1" START="3">

<LI>Alegerea editorului HTML

<LI>Machetarea paginii

<LI>Elementele HTML

<UL TYPE="circle">

<LI>Sectiunea HEAD

<LI>Sectiunea BODY

</UL>

<LI>Apleturi JAVA

</OL>

<LI>Optimizarea paginii web

<LI>Publicarea pe internet a paginii web

</OL>

având ca rezultat afişarea listei în această formă:

I. Introducere

1. Cuvânt înainte

2. Notiuni generale

II. Realizarea unei pagini web

3. Alegerea editorului HTML

4. Machetarea paginii

5. Elementele HTML

○ Sectiunea HEAD

○ Sectiunea BODY

6. Apleturi JAVA

III. Optimizarea paginii web

IV. Publicarea pe internet a paginii web

5.6. Aplicaţie practică

Vom încerca în continuare să punem în practică cele prezentate anterior combinate cu elemente de formatare a textului şi vom crea un nou fişier numit test4.html care va conţine următoarele linii de cod:

<HTML>

<HEAD>

<TITLE>Utilizarea listelor</TITLE>

</HEAD>

<BODY>

<B>

<OL type="I"><FONT color="blue" size="4">

<LI>Introducere

<OL TYPE="1"><FONT size="3">

<LI>Cuvânt înainte

<LI>Notiuni generale

</OL><FONT color="red" size="4">

<LI>Realizarea unei pagini web

<OL TYPE="1" START="3"><FONT size="3">

<LI>Alegerea editorului HTML

<LI>Machetarea paginii

<LI>Elementele HTML

<UL TYPE="circle"><FONT color="green" size="2">

<LI>Sectiunea HEAD

<LI>Sectiunea BODY</FONT>

</UL>

<LI>Apleturi JAVA</FONT>

</OL>

<FONT color="brown"><LI>Optimizarea paginii web</FONT>

<FONT color="purple"><LI>Publicarea pe internet a paginii web

</FONT>

</OL></FONT>

</B></BODY>

</HTML>

Rezultatul afişat va fi următorul: