Lecția 2: HTML - liste și tabele

Tutorial

Liste

Html oferă posibilitatea de a folosi două tipuri de liste:

Ordonate
Neordonate

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:

Amestecăm toate ingredientele între ele
Punem lapte
Punem zahăr

Haideți să vedem totuși și cum o vom defini în 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>

Observați că am folosit tagul <ol> pentru a defini o listă ordonată. Acesta vine de la ordered list.

Tagul <li> provine de la list item ș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:

Făină
Lapte
3 Ouă
Zahăr
Sare

Amestecăm întâi făina cu laptele
După ce se omogenizează, adăugăm și cele 3 ouă
Pentru a da gust adăugăm un vârf de linguriță de sare
Introducem la cuptor pentru 30 de minute
Punem zahăr

Să vedem și codul pentru 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>

Observați faptul că am folosit tagul <ul> pentru a defini o listă neordonată. Tagul este prescurtarea pentru unordered list.

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 ):

Luni	Marti	Miercuri	Joi	Vineri	Sambata	Duminica
Lb. Romana	Lb. Romana	Matematica	Informatica	Sport
Matematica	Lb. Romana	Lb. Romana	Sport	Informatica
Lb. Engleză	Lb. Franceză	Fizică	Sport	Lb. Engleză

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 ):

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

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> ( table row ), iar coloanele le vom crea utilizând <td> ( table data ).

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.