====== Lecția 2: HTML - liste și tabele ======
===== Tutorial =====
==== Liste ====
Html oferă posibilitatea de a folosi două tipuri de liste:
O **Listă ordonată** este o listă în care ordinea ar trebui să conteze. De exemplu, putem folosi o listă ordonată pentru ordinea în care trebuiesc adăugate ingredientele în prăjitura mamei:
- Amestecăm toate ingredientele între ele
- Punem lapte
- Punem zahăr
Haideți să vedem totuși și cum o vom defini în HTML:
Digital Kids
- Amestecăm toate ingredientele între ele
- Punem lapte
- Punem zahăr
Observați că am folosit tagul '''' pentru a defini o listă ordonată. Acesta vine de la **o**rdered **l**ist.
Tagul ''- '' provine de la **l**ist **i**tem și se folosește pentru a defini un element dintr-o listă.
O **Listă neordonata** este o listă în care toate elementele nu sunt numerotate. De exemplu, putem folosi o listă neordonată pentru a enumera ingredientele ce pot fi folosite pentru prăjitura mamei, iar după, o listă ordonată pentru a enumera ordinea în care trebuiesc amestecate. De exemplu:
- Făină
- Lapte
- 3 Ouă
- Zahăr
- Sare
- Amestecăm întâi făina cu laptele
- După ce se omogenizează, adăugăm și cele 3 ouă
- Pentru a da gust adăugăm un vârf de linguriță de sare
- Introducem la cuptor pentru 30 de minute
- Punem zahăr
Să vedem și codul pentru HTML:
Digital Kids
- Făină
- Lapte
- 3 Ouă
- Zahăr
- Sare
- Amestecăm întâi făina cu laptele
- După ce se omogenizează, adăugăm și cele 3 ouă
- Pentru a da gust adăugăm un vârf de linguriță de sare
- Introducem la cuptor pentru 30 de minute
- Punem zahăr
Observați faptul că am folosit tagul '''' pentru a defini o listă neordonată. Tagul este prescurtarea pentru **u**nordered **l**ist.
==== Tabele ====
Nu putem da o definiție strictă a unui tabel. De exemplu, orarul vostru de la școală este un tabel. Când ați lucrat, anul trecut, în Google Spreadsheet de fapt ați lucrat într-un tabel. Deocamdată, noi vom lucra cu tabele simple, dar după ce vom învăța și CSS, tabelele noastre vor arăta grozav !
Exemplu de tabel cu 4 linii și 7 coloane ( aproape ca un orar ):
Luni |
Marti |
Miercuri |
Joi |
Vineri |
Sambata |
Duminica |
Lb. Romana |
Lb. Romana |
Matematica |
Informatica |
Sport |
|
|
Matematica |
Lb. Romana |
Lb. Romana |
Sport |
Informatica |
|
|
Lb. Engleză |
Lb. Franceză |
Fizică |
Sport |
Lb. Engleză |
|
|
Studiați cu atenție exemplul de mai sus și uitați-vă pe codul de mai jos ( este codul pentru prima linie din tabel ):
Digital Kids
Luni |
Marti |
Miercuri |
Joi |
Vineri |
Sambata |
Duminica |
Fiecare tabel va începe cu tagul ''''. Un tabel va fi împărțit în linii și coloane ('''' și ''''). Liniile le vom crea utilizând '' |
'' ( **t**able **r**ow ), iar coloanele le vom crea utilizând '''' ( **t**able **d**ata ).
===== Task =====
Creați o pagină HTML care să conțină:
* un tabel cu minim 3 coloane și 4 rânduri
* cel puțin o imagine într-una din celulele tabelului - recomandat ar fi ca o întreagă coloană din tabel să fie plină cu poze)
* cel puțin 2 link-uri
* cel puțin 5 tag-uri diferite (în afară de , , )
==== Bonus ====
Formatați pagina creată anterior folosind CSS. |