Diferențe

Aici sunt prezentate diferențele dintre versiunile selectate și versiunea curentă a paginii.

Link către această vizualizare comparativă

--- module:11-basic-web-dev:lectie-02 [2014/02/25 13:35]
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 ======
-=== Tutorial ===
+===== Tutorial =====
+==== Liste ====
 Html oferă posibilitatea de a folosi două tipuri de liste:
@@ Linia 12: / Linia 13: @@
 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>
 <ol>
-<li> Făină </li>
+<li> Amestecăm toate ingredientele între ele </li>
-<li> Ouă </li>
+<li> Punem lapte </li>
-<li> Zahăr </li>
+<li> Punem zahăr </li>
 </ol>
 </html>
@@ Linia 29: / Linia 31: @@
     <body>
       <ol>
-         <li> Făină </li>
+         <li> Amestecăm toate ingredientele între ele </li>
-         <li> Ouă </li>
+         <li> Punem lapte </li>
-         <li> Zahăr </li>
+         <li> Punem zahăr </li>
       </ol>
     </body>
@@ Linia 41: / Linia 43: @@
 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.
+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 ).
-=== Tutorial ===
-  - descriere liste ordonate/neordonate
+===== Task =====
-  - descriere tabele
-=== Task-uri ===
+Creați o pagină HTML care să conțină:
-  - li se da cum trebuie sa arate o pagina HTML, si sa scrie codul pentru ea
+  * 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>)
-=== Tema ===
+==== Bonus ====
-=== Recapitulare ===
+Formatați pagina creată anterior folosind CSS.

Digital Kids

Unelte utilizator

Unelte site

Diferențe

Unelte pagină