Realizarea unui site in HTML

Introduction

                                                          

                                    Bine a venit în clasa noastră virtuală!

După ce se poate studia WebQuest , se pot face capabilități pentru elaborarea de pagini web folosind sintaxa HTML.

Obiectivele de la  WebQuest  Realizarea site-ului în HTML  este o explicație, intr-un mod cat mai mult se folosește în aceleași timp de plasare, folosind informații invatate, cum să realizeze un site.

Proiectare web bună - De ce sunt foarte mici

Task

Realizarea unui site a unei grădinițe particulare.

         

 

Process

Realizarea unui site în HTML

Vom realiza impreuna site-ul unei gradinite de copii. Noi i-am dat numele gradinita Abecedar.



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



learn.jpg

straine.jpg


muzica3.jpg

muzica2.jpg


excursii3.jpg



excursii2.jpg


desprenoi3.jpg

desprenoi2.jpg



Dupa ce ai copiat imaginile putem sa continuam realizarea site-ului. Site-ul nostru va avea urmatoarea structura:

cursuri



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:

<HTML>

<HEAD>

<TITLE>Top</TITLE>

</HEAD>

<BODY bgcolor="#00CCFF">

<img src="../Poze/logo.jpg" align="left" hspace="50">

<B><FONT color="red"><BR><BR><BR>

E-mail: <a href="mailto:abecedar@yahoo.com">abecedar@yahoo.com</a><BR>

Web: <a href="http://www.gradinitaabecedar.ro" target="_blank">www.gradinitaabecedar.ro</a><BR&gt;

</FONT></B>

</BODY>

</HTML>



Salveaza pagina (File/Save As) cu numele de top.html in folderul Pagini. Pagina top.html ar trebui sa arate astfel: click aici (vezi sursa si copiaza codul).



In continuare vom scrie codul pentru pagina html care va contine meniul din partea stanga a site-ului:

<HTML>

<HEAD>

<TITLE>Abecedar</TITLE>

</HEAD>

<BODY bgcolor="#FF9933">

<img src="../Poze/meniu.jpg"><BR><BR><BR><BR><BR>

<a href="../home.html" target="_parent"><img src="../Poze/home.jpg" border="0"></a><BR>

<a href="../Pagini/calculator.html" target="_parent"><img src="../Poze/calculator.jpg" border="0"></a><BR>

<a href="../Pagini/limbistraine.html" target="_parent"><img src="../Poze/limbistraine.jpg" border="0"></a><BR>

<a href="../Pagini/muzica.html" target="_parent"><img src="../Poze/muzica.jpg" border="0"></a><BR>

<a href="../Pagini/excursii.html" target="_parent"><img src="../Poze/excursii.jpg" border="0"></a><BR>

<a href="../Pagini/desprenoi.html" target="_parent"><img src="../Poze/desprenoi.jpg" border="0"></a><BR>

</BODY>

</HTML></span>



Scrie codul intr-un fisier text, apoi salveaza pagina, in folderul Pagini cu numele de meniu.html. Daca totul a mers cum trebuie, pagina ar trebui sa arate astfel: click aici (daca nu mai vrei sa scrii ... vezi sursa si copiaza codul).



Dupa ce am facut meniul si partea de sus a site-ului, care se vor repeta in fiecare pagina, vom scrie codul pentru prima pagina a site-ului, unde vom folosi cadrele.

<HTML>

<HEAD>

<TITLE>Home page</TITLE>

</HEAD>

<frameset cols="22%,*" frameborder="0">

<frame src="Pagini/meniu.html">

<frameset rows="26%,*" frameborder="0">

<frame src="Pagini/top.html">

<frame src="Pagini/index.html">

</frameset>

</frameset>

<BODY>

</BODY>

</HTML>



Pagina va trebui salvata cu numele home.html in directorul Abecedar alaturi de subdirectoarele Pagini si Poze, insa nu va fi functionala pentru ca nu a fost creata pagina index.html, al carei cod este urmatorul:

<HTML>

<HEAD>

<TITLE>Home</TITLE>

</HEAD>

<BODY background="../Poze/background.jpg">

<CENTER><img src="../Poze/welcome.jpg"</CENTER><BR><br><BR>

<img src="../Poze/copil.jpg" hspace="25" vspace="10" align="left"><BR><BR>

<FONT color="#0099FF" align="left"><H3>De ce gr&#259dini&#355;a ABECEDAR pentru copilul dumneavoastr&#259?<BR><BR>Deoarece iubim copiii &#351;i le oferim foarte multe oportunit&#259&#355;i:</H3>

<BR><BR>

<H4 align="left">

<UL align="left">

<LI>&#238i ajut&#259m s&#259 &#238&#351;i dezvolte mult mai bine anumite aptitudini;

<LI>punem foarte mult accent pe sport oferind &#238n acest sens condi&#355;ii moderne de preg&#259tire;

<LI>personalul didactic este format numai din persoane care iubesc copiii;

<LI>le oferim o preg&#259tire bazat&#259 mai mult pe partea practic&#259 &#351;i nu pe partea teoretic&#259;

<LI>copiii au posibilitatea de a se &#238mprieteni unii cu al&#355;ii &#351;i s&#259-&#351;i dezvolte spiritul de echip&#259.

</UL>

</H4>

</FONT>

</BODY>

</HTML>



Salveaza pagina, in folderul Pagini cu numele de index.html. Daca totul a mers cum trebuie pagina ar trebui sa arate astfel: click aici



Prima pagina a site-ului este gata. Iata rezultatul: click aici



Ne vom ocupa in continuare si de restul paginilor. In primul rand, realizeaza o pagina calculator.html, in folderul Pagini, care sa aiba acelasi cod HTML cu pagina home.html, numai ca in loc de index.html vom folosi icalculator.html. In mod asemanator, facem si paginile limbistraine.html (in loc de index.html folosim istraine.html), muzica.html (in loc de index.html folosim imuzica.html), excursii.html (in loc de index.html folosim iexcursii.html), desprenoi.html (in loc de index.html folosim idesprenoi.html).



Mai avem de realizat paginile icalculator.html, istraine.html, imuzica.html, iexcursii.html si idesprenoi.html. Aceste pagini vor fi formate din continutul fiecarei rubrici a site-ului. Codul HTML pentru fiecare pagina va fi prezentat in continuare. Nu uita sa salvezi fiecare pagina in folderul Pagini.



- pentru pagina icalculator.html (click aici), codul HTML este urmatorul:

<HTML>

<HEAD>

<TITLE>Home</TITLE>

</HEAD>

<BODY>

<CENTER><img src="../Poze/calculator2.jpg"></CENTER><BR><BR>

<img src="../Poze/calculator3.jpg" hspace="25" vspace="25" align="left"><BR>

<FONT color="#0099FF" align="left">

<BR><H4>

Calculatorul a devenit ceva foarte obi&#351;nuit &#238n via&#355;a tuturor. De aici rezult&#259 &#351;i necesitatea de a &#238nv&#259&#355;a cum se utilizeaz&#259 un calculator. Gr&#259dini&#355;a ABECEDAR are ca obiectiv principal &#238n domeniul implement&#259rii &#238n procesul educa&#355;ional a cuno&#351;tin&#355;elor de calculator, ini&#355;ierea &#351;i familiarizarea copiilor pre&#351;colari &#238n acest domeniu. Se va &#355;ine cont de particularit&#259&#355;ile de v&#226rst&#259 ale celor mici. Astfel copii vor &#238nv&#259&#355;a no&#355;iunile de baz&#259 &#238nso&#355;ite de numeroase exemple.

</H4>

</FONT>

</BODY>

</HTML>





- pentru pagina istraine.html (click aici), codul HTML este urmatorul:

<HTML>

<HEAD>

<TITLE>Home</TITLE>

</HEAD>

<BODY>

<CENTER><img src="../Poze/straine.jpg"></CENTER><BR><BR><BR>

<img src="../Poze/learn.jpg" align="left" hspace="25" vspace="5">

<FONT color="#0099FF" align="left">

<H4>

&#206n cadrul cursurilor de limbi str&#259ine copiii &#238nva&#355;&#259 s&#259 pronun&#355;e corect cuvinte &#351;i propozi&#355;ii &#238n diverse limbi str&#259ine. Suntem preg&#259ti&#355;i s&#259 oferim cursuri de un &#238nalt nivel calitativ pentru urm&#259toarele limbi str&#259ine:

<UL>

<LI>limba englez&#259;

<LI>limba italian&#259;

<LI>limba german&#259;

<LI>limba francez&#259.

</UL>

</H4>

</FONT>

</BODY>

</HTML>





- pentru pagina imuzica.html (click aici), codul HTML este urmatorul:

<HTML>

<HEAD>

<TITLE>Home</TITLE>

</HEAD>

<BODY>

<CENTER><img src="../Poze/muzica2.jpg"></CENTER><BR><BR>

<img src="../Poze/muzica3.jpg" hspace="25" vspace="20" align="left"><BR><BR>

<FONT color="#0099FF" align="left">

<H4>

Pentru copii este minunat s&#259 poat&#259 asculta muzic&#259 &#351;i s&#259 poat&#259 dansa, mai ales dac&#259 acestea se &#238nt&#226mpl&#259 &#238ntr-un cadru organizat. Cursurile de muzic&#259 &#351;i dans de la gr&#259dini&#355;a noastr&#259 acoper&#259 o gam&#259 foarte divers&#259 de la muzica popular&#259 p&#226n&#259 la muzica latino. &#206n fiecare s&#259pt&#259m&#226n&#259 sunt organizate concursuri de dans, iar perechile c&#226&#351;tig&#259toare primesc premii din partea gr&#259dini&#355;ei.

</H4>

</FONT>

</BODY>

</HTML>





- pentru pagina iexcursii.html (click aici), codul HTML este urmatorul:

<HTML>

<HEAD>

<TITLE>Home</TITLE>

</HEAD>

<BODY>

<CENTER><img src="../Poze/excursii2.jpg"></CENTER><BR><BR>

<img src="../Poze/excursii3.jpg" hspace="25" vspace="20" align="left"><BR><BR>

<FONT color="#0099FF" align="left">

<H4>

Gr&#259dini&#355;a ABECEDAR organizeaz&#259 excursii &#238n Bucure&#351;ti, dar nu numai, cu scopul vizit&#259rii a c&#226t mai multe obiective culturale &#351;i turistice. De asemenea, &#238n vacan&#355;ele de var&#259 se vor organiza tabere educa&#355;ionale &#238n care lec&#355;iile se vor desf&#259&#351;ura &#238n diverse loca&#355;ii, &#238n mijlocul naturii.

</H4>

</FONT>

</BODY>

</HTML>





- pentru pagina idesprenoi.html (click aici), codul HTML este urmatorul:

<HTML>

<HEAD>

<TITLE>Home</TITLE>

</HEAD>

<BODY>

<CENTER><img src="../Poze/desprenoi2.jpg"></CENTER><BR><BR>

<img src="../Poze/desprenoi3.jpg" hspace="25" vspace="10" align="left"><BR>

<FONT color="#0099FF" align="left">

<H4>

Gr&#259dini&#355;a ABECEDAR este o gr&#259dini&#355;&#259 particular&#259 care &#238ncearc&#259 s&#259 ofere o alternativ&#259 la &#238nv&#259&#355;&#259m&#226;ntul de stat care nu ofer&#259 condi&#355;iile

optime pentru preg&#259tirea copiilor. Noi oferim condi&#355;ii moderne de &#238nv&#259&#355;are, profesori specializa&#355;i pentru lucrul cu copii, materiale &#351;i echipamente de ultim&#259 or&#259, toate acestea la pre&#355;uri atractive.

</H4>

</FONT>

</BODY>

</HTML>





 

 

 

 

Evaluation

Daca totul a mers cum trebuie si ai respectat toate indicatiile din cadrul lectiei, site-ul este gata si ar trebui sa arate asa: click aici



Daca site-ul tau nu functioneaza cum trebuie, incearca sa vezi codurile pe care le-am folosit noi (View / Source) si compara-le cu cele folosite de tine.

 

 

 

Conclusion



Sper ca ti-a placut!!!



Nu uita sa exersezi cat mai mult notiunile invatate.

Incearca sa faci singur(a) diverse site-uri scriind codul HTML.

 

Mult succes!