Inainte de a trece la realizarea efectiva a site-ului, va trebui sa faci un nou director pe care sa-l numesti Abecedar, iar in cadru acestuia doua subdirectoare: Pagini si Poze.
Am pregatit imaginile de mai jos pentru site-ul pe care il vom face impreuna (sub fiecare imagine am drecut si denumirea). Pentru a descarca imaginile: click aici (vei descarca o arhiva .zip cu toate imaginile site-ului, pe care va trebui sa le copiezi in subdirectorul Poze din cadrul directorului Abecedar.
 home.jpg |  calculator.jpg |  limbistraine.jpg |
 muzica.jpg |  excursii.jpg |  desprenoi.jpg |
 logo.jpg |  meniu.jpg | |
 copil.jpg |  welcome.jpg | |
 calculator3.jpg |  calculator2.jpg | |
|  straine.jpg | |
 muzica3.jpg |  muzica2.jpg | |
 excursii3.jpg |
| |
 desprenoi3.jpg |  desprenoi2.jpg | |
Dupa ce ai copiat imaginile putem sa continuam realizarea site-ului. Site-ul nostru va avea urmatoarea structura:
Vom folosi asadar, cadrele pe care le-am invatat in lectia 9. Vom face mai intai pagina din partea de sus top.html, care va avea urmatorul cod HTML:
