Dark-Knight.MyForum.ro

Crystydica · Administrator Data inscrierii: 20/Mai/2008 Mesaje: 200

In aceasta ultima lectie a cursului "HTML pe intelesul tuturor" vom realiza impreuna site-ul unei gradinite de copii. Noi i-am dat numele gradinita Abecedar.

Inainte de a trece la înfăptuirea efectiva a site-ului, va necesită sa faci un nou director pe care sa-l numesti Abecedar, iar in cadru acestuia doua subdirectoare: Pagini si Poze. Apoi copiaza imaginile de mai jos (click dreapta - Save Picture As), cu denumirea de sub fiecare, in subdirectorul Poze din directorul Abecedar:

http://www.ecursuri.ro/cursuri/html/exe ... e/home.jpg
http://www.ecursuri.ro/cursuri/html/exe ... elcome.jpg
etc.

Vom utiliza asadar, cadrele pe care le-am invatat in lectia 10. Vom realiza mai intai pagina din componentă 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">www.gradinitaabecedar.ro</a><BR>
</FONT></B>
</BODY>
</HTML>

Copiaza codul intr-un fisier text, apoi salveaza pagina (File/Save As) cu numele de top.html in folderul Pagini.

Pagina top.html ar trebui sa arate astfel: click aici.

In continuare vom scrie codul pentru pagina html care va contine meniul din bucată 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>

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

Dupa ce am facut meniul si porțiunea 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ţa ABECEDAR pentru copilul dumneavoastr&#259?<BR><BR>
Deoarece iubim copiii şi le oferim nespus de multe oportunit&#259ţi:</H3>
<BR><BR>
<H4 align="left">
<UL align="left">
<LI>&#238i ajut&#259m s&#259 &#238şi dezvolte mult mai bine anumite aptitudini;
<LI>punem deosebit de mult accent pe sport oferind &#238n acest sens condiţii moderne de preg&#259tire;
<LI>personalul didactic este compus numai din persoane care iubesc copiii;
<LI>le oferim o preg&#259tire bazat&#259 mai mult pe partea practic&#259 şi nu pe fracțiune teoretică
<LI>copiii au probabilitatea de a se &#238mprieteni unii cu alţii şi s&#259-ş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 conceput 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, 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 tare obişnuit &#238n viaţa tuturor. De aici rezult&#259 şi necesitatea de a &#238nv&#259ţa cum se utilizeaz&#259 un calculator. Gr&#259diniţa ABECEDAR are ca obiectiv de seamă &#238n domeniul
implement&#259rii &#238n procesul educaţional a cunoştinţelor de calculator, iniţierea şi familiarizarea copiilor preşcolari &#238n acest domeniu. Se va ţine cont de particularit&#259ţile de v&#226rst&#259 ale celor mici. Astfel copii vor &#238nv&#259ţa noţiunile de baz&#259 &#238nsoţite de multiple exemple.
</H4>
</FONT>
</BODY>
</HTML>

- pentru pagina istraine.html, 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ţ&#259 s&#259 pronunţe corect cuvinte şi propoziţii &#238n diverse limbi str&#259ine. Suntem preg&#259tiţi s&#259 oferim cursuri de un &#238nalt nivel calitativ pentru urm&#259toarele limbi str&#259ine:
<UL>
<LI>limba engleză
<LI>limba italiană
<LI>limba germană
<LI>limba francez&#259.
</UL>
</H4>
</FONT>
</BODY>
</HTML>

- pentru pagina imuzica.html, 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 uimitor s&#259 poat&#259 asculta muzic&#259 şi s&#259 poat&#259 dansa, mai ales dac&#259 astea se &#238nt&#226mpl&#259 &#238ntr-un cadru organizat. Cursurile de muzic&#259 şi dans de la gr&#259diniţ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ştig&#259toare primesc premii din partea gr&#259diniţei.
</H4>
</FONT>
</BODY>
</HTML>

- pentru pagina iexcursii.html, 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ţa ABECEDAR organizeaz&#259 excursii &#238n Bucureşti, dar nu numai, cu scopul vizit&#259rii a c&#226t mai multe obiective culturale şi turistice. De asemenea, &#238n vacanţele de var&#259 se vor organiza tabere educaţionale &#238n care lecţiile se vor desf&#259şura &#238n diferite locaţii, &#238n mijlocul naturii.
</H4>
</FONT>
</BODY>
</HTML>

- pentru pagina idesprenoi.html, 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ţa ABECEDAR este o gr&#259diniţ&#259 particular&#259 care &#238ncearc&#259 s&#259 prezintă o alternativ&#259 la &#238nv&#259ţ&#259mântul de stat care nu ofer&#259 condiţiile
optime pentru preg&#259tirea copiilor. Noi oferim condiţii moderne de &#238nv&#259ţare, profesori specializaţi pentru lucrul cu copii, materiale şi echipamente de ultim&#259 or&#259, toate acestea la preţuri atractive.
</H4>
</FONT>
</BODY>
</HTML>

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 utilizate de tine.

Acum, ajunsi la finalul acestui curs, nu uita sa exersezi cat mai mult notiunile invatate. Incearca sa faci solitar diverse site-uri scriind codul HTML. Mult succes! Sper ca ti-a placut cursul si te mai asteptam in cadrul paginilor site-ului www.ecursuri.ro sa invatam impreuna.