Aici sunt prezentate diferențele dintre versiunile selectate și versiunea curentă a paginii.
Both sides previous revision Previous revision Next revision | Previous revision Next revision Both sides next revision | ||
module:11-basic-web-dev:lectie-02 [2014/02/25 13:53] matei.oprea |
module:11-basic-web-dev:lectie-02 [2014/02/25 14:30] matei.oprea |
||
---|---|---|---|
Linia 1: | Linia 1: | ||
====== Lecția 2: HTML - liste și tabele ====== | ====== Lecția 2: HTML - liste și tabele ====== | ||
- | === Tutorial === | + | === Liste === |
Html oferă posibilitatea de a folosi două tipuri de liste: | Html oferă posibilitatea de a folosi două tipuri de liste: | ||
Linia 12: | Linia 12: | ||
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: | 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: | ||
+ | |||
<html> | <html> | ||
<ol> | <ol> | ||
<li> Amestecăm toate ingredientele între ele </li> | <li> Amestecăm toate ingredientele între ele </li> | ||
<li> Punem lapte </li> | <li> Punem lapte </li> | ||
- | <li> Asezonăm cu zahăr </li> | + | <li> Punem zahăr </li> |
</ol> | </ol> | ||
</html> | </html> | ||
Linia 31: | Linia 32: | ||
<li> Amestecăm toate ingredientele între ele </li> | <li> Amestecăm toate ingredientele între ele </li> | ||
<li> Punem lapte </li> | <li> Punem lapte </li> | ||
- | <li> Asezonăm cu zahăr </li> | + | <li> Punem zahăr </li> |
</ol> | </ol> | ||
</body> | </body> | ||
Linia 56: | Linia 57: | ||
<li> Pentru a da gust adăugăm un vârf de linguriță de sare </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> Introducem la cuptor pentru 30 de minute </li> | ||
- | <li> Asezonăm cu zahăr </li> | + | <li> Punem zahăr </li> |
</ol> | </ol> | ||
</html> | </html> | ||
Linia 81: | Linia 82: | ||
<li> Pentru a da gust adăugăm un vârf de linguriță de sare </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> Introducem la cuptor pentru 30 de minute </li> | ||
- | <li> Asezonăm cu zahăr </li> | + | <li> Punem zahăr </li> |
</ol> | </ol> | ||
</body> | </body> | ||
Linia 88: | Linia 89: | ||
Observați faptul că am folosit tagul ''<ul>'' pentru a defini o listă neordonată. Tagul este prescurtarea pentru **u**nordered **l**ist. | 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 ). | ||
+ | |||
+ | |||
=== Tutorial === | === Tutorial === | ||
- descriere liste ordonate/neordonate | - descriere liste ordonate/neordonate |