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/09 14:52]
mariana created
+++ module:11-basic-web-dev:lectie-02 [2014/02/25 14:30]
matei.oprea
@@ Linia 1: / Linia 1: @@
-====== Lecția 2: CSS ======
+====== Lecția 2: HTML - liste și tabele ======
+=== Liste ===
+Html oferă posibilitatea de a folosi două tipuri de liste:
+<html>
+<ul>
+<li> Ordonate </li>
+<li> Neordonate </li>
+</ul>
+</html>
+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> 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 incredientele 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 ===
-  - sintaxa CSS
+  - descriere liste ordonate/neordonate
-  - atribute de baza (culoare, aliniere, marime, font size) pentru taguri HTML
+  - descriere tabele
-  - id pentru elemente din HTML + atribute pentru id-ul respectiv in CSS
-  - clase de atribute
-  - inlantuire de clase si id-uri
 === Task-uri ===
-  - pe o pagina HTML, sa adauge CSS folosind elementele din tutorial
+  - li se da cum trebuie sa arate o pagina HTML, si sa scrie codul pentru ea
 === Tema ===
-  - sa adauge CSS pe pagina pe care au facut-o la tema trecuta (folsind minim o clasa,  minim un id, etc)
 === Recapitulare ===
-  - grila? sau
-  - 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)

Digital Kids

Unelte utilizator

Unelte site

Diferențe

Unelte pagină