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/14 00:09]
mariana
+++ 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 =====
-  - descriere liste ordonate/neordonate
+==== Liste ====
-  - descriere tabele
-=== Task-uri ===
+Html oferă posibilitatea de a folosi două tipuri de liste:
-  - li se da cum trebuie sa arate o pagina HTML, si sa scrie codul pentru ea
+<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:
-=== Recapitulare ===
+<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 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.

Digital Kids

Unelte utilizator

Unelte site

Diferențe

Unelte pagină