Digital Kids

Unelte utilizator

Unelte site

Sidebar

module:11-basic-web-dev:lectie-02

Aceasta e o versiune anterioară a paginii.

Lecția 2: HTML - liste și tabele

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:

  1. Amestecăm toate ingredientele între ele
  2. Punem lapte
  3. 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 incredientele 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
  1. Amestecăm întâi făina cu laptele
  2. După ce se omogenizează, adăugăm și cele 3 ouă
  3. Pentru a da gust adăugăm un vârf de linguriță de sare
  4. Introducem la cuptor pentru 30 de minute
  5. 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 3 linii și 3 coloane:

100 200 300
400 500 600
700 800 900

Tutorial

  1. descriere liste ordonate/neordonate
  2. descriere tabele

Task-uri

  1. li se da cum trebuie sa arate o pagina HTML, si sa scrie codul pentru ea

Tema

Recapitulare

module/11-basic-web-dev/lectie-02.1393330252.txt.gz · Ultima modificare: 2014/02/25 14:10 de către matei.oprea

Unelte pagină

Exceptând locurile unde este altfel specificat, conținutul acestui wiki este licențiat sub următoarea licență: CC Attribution 3.0 Unported
CC Attribution 3.0 Unported Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki