Curs de web design - http://videotutoriale35.blogspot.ro/

Page 1

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


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.