Digital Kids

Această pagină poate fi doar citită. Poți vedea sursa, dar nu poți modifica pagina. Consultă administratorul dacă ești de părere că ceva este în neregulă.
====== Lecția 2: HTML - liste și tabele ======

===== Tutorial =====
==== 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 ). 

 
===== 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

Unelte pagină
