Prof Liliana chiopu LISTE IN HTML Cuprins 1

  • Slides: 18
Download presentation
Prof. Liliana Șchiopu LISTE IN HTML

Prof. Liliana Șchiopu LISTE IN HTML

Cuprins 1. Tipuri de liste 2. Listă neordonată. Exemplu 3. Listă ordonată. Exemplu 4.

Cuprins 1. Tipuri de liste 2. Listă neordonată. Exemplu 3. Listă ordonată. Exemplu 4. Liste de definiții. Exemple 5. Sintaxa generală a listelor 6. Crearea listelor neordonate 7. Crearea listelor ordonate 8. Crearea listelor de definiții 9. Liste imbricate 10. Bibliografie

Tipuri de liste Exista 3 tipuri de liste: 1. Liste neordonate 2. Liste ordonate

Tipuri de liste Exista 3 tipuri de liste: 1. Liste neordonate 2. Liste ordonate (sau numerotate) 3. Liste de definiții

1. Listă neordonată. Exemplu Merele sunt verzi �Bananele sunt galbene �Portocalele sunt portocalii

1. Listă neordonată. Exemplu Merele sunt verzi �Bananele sunt galbene �Portocalele sunt portocalii

2. Listă ordonată. Exemplu O listã ordonatã cuprinde intrãri marcate într-un mod care sã

2. Listă ordonată. Exemplu O listã ordonatã cuprinde intrãri marcate într-un mod care sã sugereze ordonarea lor: 1. Aprindeți pocnitoarea. 2. Aruncați-o.

3. Liste de definiții. Exemple Acestea sunt folosite în cazul când fiecare element al

3. Liste de definiții. Exemple Acestea sunt folosite în cazul când fiecare element al listei are nevoie de un sumar, urmat de o descriere mai detaliată. De exemplu: Paris, Franța Capitala Franței. Printre atracții se numară turnul Eiffel și catedrala Notre Dame. Sydney, Australia Capitala statului New South Wales, Australia. Atracții: Opera și podul Harbour. Londra, Anglia Capitala Angliei. Obiective turistice: Tower Bridge și Big Ben.

Sintaxa generală a listelor <LI [VALUE=nnnn] [TYPE=1|a|A|i|I|disk|square|circle]> element-de-lista [</LI>] specificã un element într-o lista

Sintaxa generală a listelor <LI [VALUE=nnnn] [TYPE=1|a|A|i|I|disk|square|circle]> element-de-lista [</LI>] specificã un element într-o lista ordonatã, neordonatã

Sintaxa generală a listelor VALUE indicã valoarea numericã de început pentru o listã ordonatã.

Sintaxa generală a listelor VALUE indicã valoarea numericã de început pentru o listã ordonatã. Implicit este 1 si nu trebuie specificatã la orice intrare LI ci numai dacã o listã este întreruptã printr-un alt text, necesitând un alt început de numerotare; TYPE permite (nu în toate browserele) sã se fixeze stilul pentru buline sau pentru numerotãri: 1 - numãr arabic (implicit); a - litere mici; A - litere mari; i - numãr roman mic (i, iv etc. ); I - numãr roman mare (I, IV etc. );

Sintaxa generală a listelor disk - cerc plin (implicit pentru liste neordonate); square -

Sintaxa generală a listelor disk - cerc plin (implicit pentru liste neordonate); square - pãtrat plin; circle - cerc gol; element-de listã poate fi orice (hiper)text. Deoarece dupã continutul containerului LI începe un alt tag LI, sau se terminã o listã, terminatorul de tag nu este obligatoriu. Este inserat automat un sfârsit de paragraf la terminarea unui tag LI.

Crearea listelor neordonate Pentru a crea o listă neordonată folosim tag-urile <UL></UL>; la începutul

Crearea listelor neordonate Pentru a crea o listă neordonată folosim tag-urile <UL></UL>; la începutul și sfârșitul listei și <LI></LI> pentru fiecare element. Pentru exemplul de mai sus, codul HTML este: <ul> <li> Merele sunt verzi </li> <li> Bananele sunt galbene </li> <li> Portocalele sunt portocalii </li> </ul> (Tag-urile </LI> sunt opționale, dar le vom folosi pentru a evita ambiguitățile. )

Crearea listelor ordonate Pentru listele ordonate (numerotate), metoda este aceeasi, cu singura deosebire ca

Crearea listelor ordonate Pentru listele ordonate (numerotate), metoda este aceeasi, cu singura deosebire ca tag-urile folosite vor fi <OL></OL> in loc de <UL></UL>. Pentru exemplul de mai sus, codul este: <ol> <li> Aprindeti pocnitoarea. </li> <li> Aruncati-o. </li> </ol>

Crearea listelor de definiții Lista va fi creată folosind tag-urile <DL> și </DL> pentru

Crearea listelor de definiții Lista va fi creată folosind tag-urile <DL> și </DL> pentru început și sfârșit. Fiecare element al listei este alcătuit dintr-un termen creat cu ajutorul tag-urilor <DT></DT> și definiția propriu-zisă pentru care sunt folosite tag-urile <DD></DD>.

Crearea listelor de definiții Codul pentru exemplul de mai sus este: <dl> <dt><strong>Paris, Franta</strong></dt>

Crearea listelor de definiții Codul pentru exemplul de mai sus este: <dl> <dt><strong>Paris, Franta</strong></dt> <dd> Capitala Frantei. Printre atractii se numara turnul Eiffel si catedrala Notre Dame. </dd> <dt><strong>Sydney, Australia</strong></dt> <dd> Capitala statului New South Wales, Australia. Atractii: Opera si podul Harbour. </dd> <dt><strong>Londra, Anglia</strong></dt> <dd> Capitala Angliei. Obiective turistice: Tower Bridge si Big Ben. </dd> </dl>

Liste imbricate Este posibil ca în cadrul unei liste să avem o altă listă.

Liste imbricate Este posibil ca în cadrul unei liste să avem o altă listă. De exemplu, o listă cu două niveluri poate fi: 1. Capitolul 1 1. Secțiunea 1. 1 2. Secțiunea 1. 2 2. Capitolul 2 1. Secțiunea 2. 1 2. Secțiunea 2. 2 3. Secțiunea 2. 3

Liste imbricate Codul HTML pentru crearea listei de mai sus este: <ol> <li>Capitolul 1

Liste imbricate Codul HTML pentru crearea listei de mai sus este: <ol> <li>Capitolul 1 <ol> <li> Sectiunea 1. 1</li> <li> Sectiunea 1. 2</li> </ol> </li> <li>Capitolul 2 <ol> <li> Sectiunea 2. 1</li> <li> Sectiunea 2. 2</li> <li> Sectiunea 2. 3</li> </ol>

Liste imbricate Pot fi imbricate tipuri diferite de liste. În exemplul următor, liste ordonate

Liste imbricate Pot fi imbricate tipuri diferite de liste. În exemplul următor, liste ordonate și cele neordonate sunt definite în cadrul unei liste de definiții.

Liste imbricate Codul HTML este: <dl> <dt><strong>Fructe</strong> </dt> <dd> <ul> <li> Merele sunt verzi

Liste imbricate Codul HTML este: <dl> <dt><strong>Fructe</strong> </dt> <dd> <ul> <li> Merele sunt verzi </li> <li> Bananele sunt galbene </li> <li> Portocalele sunt portocalii </li> </ul> </dd> <dt><strong>Instructiuni pentru artificii</strong></dt> <dd> <ol> <li>Aprindeti pocnitoarea. </li> <li>Aruncati-o. </li> </ol> </dd> </dl>

Bibliografie http: //www. e-learn. ro/tutorial/html/vliste/74/1/121. htm http: //profs. info. uaic. ro/~val/liste. html

Bibliografie http: //www. e-learn. ro/tutorial/html/vliste/74/1/121. htm http: //profs. info. uaic. ro/~val/liste. html