Aici sunt prezentate diferențele dintre versiunile selectate și versiunea curentă a paginii.
Next revision | Previous revision | ||
module:11-basic-web-dev:lectie-02 [2014/02/09 14:52] mariana created |
module:11-basic-web-dev:lectie-02 [2014/05/31 10:16] bpopescu [Liste] |
||
---|---|---|---|
Linia 1: | Linia 1: | ||
- | ====== Lecția 2: CSS ====== | + | ====== Lecția 2: HTML - liste și tabele ====== |
- | === Tutorial === | + | ===== Tutorial ===== |
- | - sintaxa CSS | + | ==== Liste ==== |
- | - atribute de baza (culoare, aliniere, marime, font size) pentru taguri HTML | + | |
- | - id pentru elemente din HTML + atribute pentru id-ul respectiv in CSS | + | |
- | - clase de atribute | + | |
- | - inlantuire de clase si id-uri | + | |
- | === Task-uri === | + | Html oferă posibilitatea de a folosi două tipuri de liste: |
- | - pe o pagina HTML, sa adauge CSS folosind elementele din tutorial | + | <html> |
+ | <ul> | ||
+ | <li> Ordonate </li> | ||
+ | <li> Neordonate </li> | ||
+ | </ul> | ||
+ | </html> | ||
- | === Tema === | + | 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: |
- | - sa adauge CSS pe pagina pe care au facut-o la tema trecuta (folsind minim o clasa, minim un id, etc) | + | |
- | === Recapitulare === | + | <html> |
- | - grila? sau | + | <ol> |
- | - o pagina html, sa adauge css pe ea, pe care o sa o folosim la lectia urmatoare pentru a arata structura in pagina web (div-uri) | + | <li> Amestecăm toate ingredientele între ele </li> |
+ | <li> Punem lapte </li> | ||
+ | <li> Punem zahăr </li> | ||
+ | </ol> | ||
+ | </html> | ||
+ | Haideți să vedem totuși și cum o vom defini în HTML: | ||
+ | |||
+ | <code html> | ||
+ | <html> | ||
+ | <head> | ||
+ | <title> Digital Kids </title> | ||
+ | </head> | ||
+ | <body> | ||
+ | <ol> | ||
+ | <li> Amestecăm toate ingredientele între ele </li> | ||
+ | <li> Punem lapte </li> | ||
+ | <li> Punem zahăr </li> | ||
+ | </ol> | ||
+ | </body> | ||
+ | </html> | ||
+ | </code> | ||
+ | |||
+ | Observați că am folosit tagul ''<ol>'' pentru a defini o listă ordonată. Acesta vine de la **o**rdered **l**ist. | ||
+ | |||
+ | Tagul ''<li>'' 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: | ||
+ | |||
+ | <html> | ||
+ | <ul> | ||
+ | <li> Făină </li> | ||
+ | <li> Lapte </li> | ||
+ | <li> 3 Ouă </li> | ||
+ | <li> Zahăr </li> | ||
+ | <li> Sare </li> | ||
+ | </ul> | ||
+ | <ol> | ||
+ | <li> Amestecăm întâi făina cu laptele </li> | ||
+ | <li> După ce se omogenizează, adăugăm și cele 3 ouă </li> | ||
+ | <li> Pentru a da gust adăugăm un vârf de linguriță de sare </li> | ||
+ | <li> Introducem la cuptor pentru 30 de minute </li> | ||
+ | <li> Punem zahăr </li> | ||
+ | </ol> | ||
+ | </html> | ||
+ | |||
+ | Să vedem și codul pentru HTML: | ||
+ | |||
+ | <code html> | ||
+ | <html> | ||
+ | <head> | ||
+ | <title> Digital Kids </title> | ||
+ | </head> | ||
+ | <body> | ||
+ | <ul> | ||
+ | <li> Făină </li> | ||
+ | <li> Lapte </li> | ||
+ | <li> 3 Ouă </li> | ||
+ | <li> Zahăr </li> | ||
+ | <li> Sare </li> | ||
+ | </ul> | ||
+ | | ||
+ | <ol> | ||
+ | <li> Amestecăm întâi făina cu laptele </li> | ||
+ | <li> După ce se omogenizează, adăugăm și cele 3 ouă </li> | ||
+ | <li> Pentru a da gust adăugăm un vârf de linguriță de sare </li> | ||
+ | <li> Introducem la cuptor pentru 30 de minute </li> | ||
+ | <li> Punem zahăr </li> | ||
+ | </ol> | ||
+ | </body> | ||
+ | </html> | ||
+ | </code> | ||
+ | |||
+ | Observați faptul că am folosit tagul ''<ul>'' 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 ): | ||
+ | <html> | ||
+ | <table> | ||
+ | <tr> | ||
+ | <td>Luni</td> | ||
+ | <td>Marti</td> | ||
+ | <td>Miercuri</td> | ||
+ | <td>Joi</td> | ||
+ | <td>Vineri</td> | ||
+ | <td>Sambata</td> | ||
+ | <td>Duminica</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td>Lb. Romana</td> | ||
+ | <td>Lb. Romana</td> | ||
+ | <td>Matematica</td> | ||
+ | <td>Informatica</td> | ||
+ | <td>Sport</td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td>Matematica</td> | ||
+ | <td>Lb. Romana</td> | ||
+ | <td>Lb. Romana</td> | ||
+ | <td>Sport</td> | ||
+ | <td>Informatica</td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td>Lb. Engleză</td> | ||
+ | <td>Lb. Franceză</td> | ||
+ | <td>Fizică</td> | ||
+ | <td>Sport</td> | ||
+ | <td>Lb. Engleză</td> | ||
+ | <td></td> | ||
+ | <td></td> | ||
+ | </tr> | ||
+ | |||
+ | </table> | ||
+ | </html> | ||
+ | |||
+ | 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 ): | ||
+ | |||
+ | <code html> | ||
+ | <html> | ||
+ | <head> | ||
+ | <title> Digital Kids </title> | ||
+ | </head> | ||
+ | <body> | ||
+ | <table> | ||
+ | <tr> | ||
+ | <td>Luni</td> | ||
+ | <td>Marti</td> | ||
+ | <td>Miercuri</td> | ||
+ | <td>Joi</td> | ||
+ | <td>Vineri</td> | ||
+ | <td>Sambata</td> | ||
+ | <td>Duminica</td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | </body> | ||
+ | </html> | ||
+ | </code> | ||
+ | |||
+ | Fiecare tabel va începe cu tagul ''<table>''. Un tabel va fi împărțit în linii și coloane (''<tr>'' și ''<td>''). Liniile le vom crea utilizând ''<tr>'' ( **t**able **r**ow ), iar coloanele le vom crea utilizând ''<td>'' ( **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 <html>, <head>, <body>) | ||
+ | |||
+ | ==== Bonus ==== | ||
+ | |||
+ | Formatați pagina creată anterior folosind CSS. |