Unelte utilizator
module:11-basic-web-dev:lectie-02
Diferențe
Aici sunt prezentate diferențele dintre versiunile selectate și versiunea curentă a paginii.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
module:11-basic-web-dev:lectie-02 [2014/02/25 14:15] matei.oprea |
module:11-basic-web-dev:lectie-02 [2014/05/31 10:16] (curent) bpopescu [Liste] |
||
|---|---|---|---|
| Linia 1: | Linia 1: | ||
| ====== Lecția 2: HTML - liste și tabele ====== | ====== Lecția 2: HTML - liste și tabele ====== | ||
| - | === Liste === | + | ===== Tutorial ===== |
| + | ==== Liste ==== | ||
| Html oferă posibilitatea de a folosi două tipuri de liste: | Html oferă posibilitatea de a folosi două tipuri de liste: | ||
| Linia 42: | Linia 43: | ||
| Tagul ''<li>'' provine de la **l**ist **i**tem și se folosește pentru a defini un element dintr-o listă. | 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 incredientele ce pot fi folosite pentru prăjitura mamei, iar după, o listă ordonată pentru a enumera ordinea în care trebuiesc amestecate. De exemplu: | + | 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> | <html> | ||
| Linia 90: | Linia 91: | ||
| 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 === | + | ==== 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 ! | 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 7 linii și 3 coloane (aproape ca un orar ): | + | Exemplu de tabel cu 4 linii și 7 coloane ( aproape ca un orar ): |
| <html> | <html> | ||
| <table> | <table> | ||
| Linia 136: | Linia 137: | ||
| </table> | </table> | ||
| </html> | </html> | ||
| - | === Tutorial === | ||
| - | - descriere liste ordonate/neordonate | ||
| - | - descriere tabele | ||
| - | === Task-uri === | + | 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 ): |
| - | - li se da cum trebuie sa arate o pagina HTML, si sa scrie codul pentru ea | + | |
| - | === Tema === | + | <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 ==== | ||
| - | === Recapitulare === | + | Formatați pagina creată anterior folosind CSS. |
module/11-basic-web-dev/lectie-02.1393330555.txt.gz · Ultima modificare: 2014/02/25 14:15 de către matei.oprea
Exceptând locurile unde este altfel specificat, conținutul acestui wiki este licențiat sub următoarea licență: CC Attribution 3.0 Unported
