curs webdesign
Liste în pagini web Listele sunt un mod simplu de organizare a informaţiei şi pot fi neordonate, ordonate şi de definiţii.
2. Liste neordonate Aceste liste sunt delimitate de etichetele <ul> şi </ul> iar elementele de <li> şi </li>. Exemplu HTML
Afisare
Exemple de fructe: <ul> <li>mere</li> <li>pere</li> <li>struguri</li> </ul>
Exemple de fructe: • • •
mere pere struguri
Elementele listei pot fi particularizate folosind atributul type care poate lua valorile square, circle şi disc. Exemplu HTML Exemple de legume: <ul> <li type="square">rosii</li> <li type="circle">cartofi</li> <li type="disc">morcovi</li> </ul>
Afisare Exemple de legume: ■ rosii ○ cartofi ● morcovi
2.2 Liste ordonate Aceste liste sunt delimitate de etichetele <ol> şi </ol> iar elementele de <li> si </li>. Exemplu HTML Exemple de combustibili: <ol> <li>benzina</li> <li>motorina</li> <li>gaz lichefiat</li> </ol>
Afisare Exemple de combustibili: 1. benzina 2. motorina 3. gaz lichefiat
Elementele listei pot fi particularizate folosind atributul type care poate lua valorile A (litere mari), a (litere mici), I (cifre romane mari), i (cifre romane mici), 1 (optiunea default):
Exemplu HTML Medii de stocare: <ol> <li type="I">HDD-ul</li> <li type="I">discheta</li> <li type="I">CD-ROM-ul</li> </ol>
Afisare Medii de stocare: I HDD-ul II discheta III CD-ROM-ul
curs webdesign
Exemplu HTML Medii de stocare: <ol type=”a”> <li>HDD-ul</li> <li>discheta</li> <li>CD-ROM-ul</li> </ol>
Afisare Medii de stocare: a) HDD-ul b) discheta c) CD-ROM-ul
Liste imbricate Listele imbricate înseamnă liste definite în interiorul altor liste Exemplu – listă imbricată numerotată HTML Medii de stocare: <ol type=”1”> <li>HDD-ul</li> <ol type=”a”> <li>cu viteza mare de acces la date</li> <li>cu capacitate mare de stocare</li> </ol> <li>discheta</li> <li>CD-ROM-ul</li> <ol type=”I”> <li>cu tehnologie avansata</li> <li>cu viteza mare </li> </ol> </ol>
Exemplu – listă imbricată nenumerotată HTML Medii de stocare: <ul type=”disc”> <li>HDD-ul</li> <ul type=”square”> <li>cu viteza mare de acces la date</li> <li>cu capacitate mare de stocare</li> </ul> <li>CD-ROM-ul</li> <ul type=”square”> <li>cu tehnologie avansata</li> </ul> </ul>
Afisare Medii de stocare: 1. HDD-ul a) cu viteza mare de acces la date b) cu capacitate mare de stocare 2. discheta 3. CD-ROM-ul I cu tehnologie avansata II cu viteza mare
Afisare Medii de stocare: ● HDD-ul ■ cu viteza mare de acces la date ■ cu capacitate mare de stocare ● CD-ROM-ul ■ cu tehnologie avansata
curs webdesign
2.3 Liste de definiţii Aceste liste sunt delimitate de etichetele <dl> şi </dl>. Termenii listei sunt delimitaţi de etichetele <dt> si </dt> iar definiţiile termenilor de <dd> şi </dd>. Exemplu HTML
Afisare
Legenda: <dl> <dt>HTML</dt> <dd>Hyper Text Mark-ul Language</dd> <dt>IP</dt> <dd>Internet Protocol</dd> </dl>
Legenda: HTML IP
Hyper Text Mark-ul Language Internet Protocol
TEMĂ
1. 2. 3.
Creaţi o pagină web care să conţină o listă de jucării pentru cadoul de ziua copilului. Creaţi o pagină web cu o listă de definiţii legate de computere. Creaţi nişte liste ordonate imbricate care să arate aşa:
1.
Mingiute a) colorate b) de plaja c) de tenis Iepurasi I umflati II care piuie III de plus IV galbeni Iribal 1. mecanic 2. cu baterii
2.
3.
4.
Creaţi nişte liste neordonate imbricate care să arate aşa:
vacanta la mare la Mamaia la Costinesti la Eforie Nord vacanta la munte la Sinaia la Busteni