190 likes | 310 Views
Prof. Liliana Șchiopu. Liste in HTML. Cuprins. Tipuri de liste List ă neordonat ă. Exemplu List ă ordonat ă. Exemplu List e de defini ț ii . Exemple Sintaxa general ă a listelor Crearea listelor neordonate Crearea listelor ordonate Crearea listelor de defini ț ii
E N D
Prof. Liliana Șchiopu Liste in HTML
Cuprins • Tipuri de liste • Listăneordonată. Exemplu • Listăordonată. Exemplu • Liste de definiții. Exemple • Sintaxa generală a listelor • Crearealistelorneordonate • Crearealistelorordonate • Crearealistelor de definiții • Liste imbricate • Bibliografie
Tipuri de liste Exista 3 tipuri de liste: • Liste neordonate • Liste ordonate (sau numerotate) • Liste de definiții
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ã sugereze ordonarea lor: • Aprindeți pocnitoarea. • Aruncați-o.
3.Liste de definiții. Exemple Acesteasuntfolositeîn cazul cândfiecare element al listei are nevoie de un sumar, urmat de o descrieremaidetaliată. De exemplu: Paris, Franța Capitala Franței. Printreatracții se numarăturnul Eiffel șicatedrala Notre Dame. Sydney, Australia Capitalastatului New South Wales, Australia. Atracții: Opera șipodulHarbour. Londra, Anglia CapitalaAngliei. Obiectiveturistice: 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 ordonatã, neordonatã
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 - 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.
Crearealistelorneordonate Pentru a crea o listăneordonatăfolosim tag-urile <UL></UL>; la începutulșisfârșitullisteiși <LI></LI> pentrufiecare element. Pentruexemplul de maisus, 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.)
Crearealistelorordonate • Pentrulisteleordonate (numerotate), metodaesteaceeasi, cu singuradeosebire ca tag-urilefolositevorfi <OL></OL> in loc de <UL></UL>. Pentruexemplul de maisus, coduleste: <ol> <li> Aprindetipocnitoarea.</li> <li> Aruncati-o.</li> </ol>
Crearealistelor 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>.
Crearealistelor de definiții Codulpentruexemplul de maisuseste: <dl> <dt><strong>Paris, Franta</strong></dt> <dd> CapitalaFrantei. Printreatractii se numara turnul Eiffel sicatedrala Notre Dame. </dd> <dt><strong>Sydney, Australia</strong></dt> <dd> Capitalastatului New South Wales, Australia. Atractii: Opera sipodulHarbour. </dd> <dt><strong>Londra, Anglia</strong></dt> <dd> CapitalaAngliei. Obiectiveturistice: Tower Bridge si Big Ben. </dd> </dl>
Liste imbricate Este posibil ca în cadruluneiliste săavem o altă listă. De exemplu, o listă cu douăniveluripoatefi: 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 <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> </li> </ol>
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> Merelesuntverzi </li> <li> Bananelesuntgalbene </li> <li> Portocalelesuntportocalii </li> </ul> </dd> <dt><strong>Instructiunipentruartificii</strong></dt> <dd> <ol> <li>Aprindetipocnitoarea.</li> <li>Aruncati-o.</li> </ol> </dd> </dl>
Bibliografie • http://www.e-learn.ro/tutorial/html/v-liste/74/1/121.htm • http://profs.info.uaic.ro/~val/liste.html