realizarea unui site in html
DESCRIPTION
okTRANSCRIPT
9/14/13 Realizarea unui site in HTML
www.ecursuri.ro/cursuri-online/realizarea-unui-site-in-html-print.html 1/7
Realizarea unui site in HTML
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 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 sidenumirea). Pentru a descarca imaginile: click aici (vei descarca o arhiva .zip cu toate imaginile site-ului, pecare 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.jpgmeniu.jpg
copil.jpg
welcome.jpg
calculator3.jpg
calculator2.jpg
straine.jpg
9/14/13 Realizarea unui site in HTML
www.ecursuri.ro/cursuri-online/realizarea-unui-site-in-html-print.html 2/7
learn.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:
9/14/13 Realizarea unui site in HTML
www.ecursuri.ro/cursuri-online/realizarea-unui-site-in-html-print.html 3/7
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:[email protected]">[email protected]</a><BR>Web: <a href="http://www.gradinitaabecedar.ro" target="_blank">www.gradinitaabecedar.ro</a><BR> </FONT></B></BODY></HTML>
Salveaza pagina (File/Save As) cu numele de top.html in folderul Pagini. Pagina top.html ar trebui sa arateastfel: 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>
9/14/13 Realizarea unui site in HTML
www.ecursuri.ro/cursuri-online/realizarea-unui-site-in-html-print.html 4/7
Scrie codul intr-un fisier text, apoi salveaza pagina, in folderul Pagini cu numele de meniu.html. Daca totul amers cum trebuie, pagina ar trebui sa arate astfel: click aici (daca nu mai vrei sa scrii ... vezi sursa si copiazacodul).
Dupa ce am facut meniul si partea de sus a site-ului, care se vor repeta in fiecare pagina, vom scrie codul pentruprima 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ădiniţa ABECEDAR pentru copiluldumneavoastră?<BR><BR>Deoarece iubim copiii şi le oferim foarte multe oportunităţi:</H3><BR><BR><H4 align="left"><UL align="left"><LI>îi ajutăm să îşi dezvolte mult mai bine anumite aptitudini;<LI>punem foarte mult accent pe sport oferind în acest sens condiţii moderne de pregătire;<LI>personalul didactic este format numai din persoane care iubesc copiii; <LI>le oferim o pregătire bazată mai mult pe partea practică şi nu pe partea teoretică<LI>copiii au posibilitatea de a se împrieteni unii cu alţii şi să-şi dezvolte spiritul deechipă. </UL></H4></FONT></BODY></HTML>
Salveaza pagina, in folderul Pagini cu numele de index.html. Daca totul a mers cum trebuie pagina ar trebui saarate 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 folderulPagini, care sa aiba acelasi cod HTML cu pagina home.html, numai ca in loc de index.html vom folosi
9/14/13 Realizarea unui site in HTML
www.ecursuri.ro/cursuri-online/realizarea-unui-site-in-html-print.html 5/7
icalculator.html. In mod asemanator, facem si paginile limbistraine.html (in loc de index.html folosimistraine.html), muzica.html (in loc de index.html folosim imuzica.html), excursii.html (in loc de index.htmlfolosim 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. Acestepagini vor fi formate din continutul fiecarei rubrici a site-ului. Codul HTML pentru fiecare pagina va fi prezentat incontinuare. 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şnuit în viaţa tuturor. De aici rezultă şinecesitatea de a învăţa cum se utilizează un calculator. GrădiniţaABECEDAR are ca obiectiv principal în domeniul implementării în procesul educaţional acunoştinţelor de calculator, iniţierea şi familiarizarea copiilor preşcolari înacest domeniu. Se va ţine cont de particularităţile de vârstă ale celor mici. Astfelcopii vor învăţa noţiunile de bază însoţ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>În cadrul cursurilor de limbi străine copiii învaţă să pronunţe corectcuvinte şi propoziţii în diverse limbi străine. Suntem pregătiţi să oferimcursuri de un înalt nivel calitativ pentru următoarele limbi străine:<UL><LI>limba engleză <LI>limba italiană <LI>limba germană <LI>limba franceză. </UL></H4></FONT></BODY></HTML>
9/14/13 Realizarea unui site in HTML
www.ecursuri.ro/cursuri-online/realizarea-unui-site-in-html-print.html 6/7
- 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ă poată asculta muzică şi să poată dansa, mai alesdacă acestea se întâmplă într-un cadru organizat. Cursurile de muzică şidans de la grădiniţa noastră acoperă o gamă foarte diversă de la muzicapopulară până la muzica latino. În fiecare săptămână sunt organizateconcursuri de dans, iar perechile câştigătoare primesc premii din partea grădiniţ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ădiniţa ABECEDAR organizează excursii în Bucureşti, dar nu numai, cu scopulvizitării a cât mai multe obiective culturale şi turistice. De asemenea, în vacanţelede vară se vor organiza tabere educaţionale în care lecţiile se vor desfăşuraîn diverse locaţii, în 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ădiniţa ABECEDAR este o grădiniţă particulară care încearcăsă ofere o alternativă la învăţământul de stat care nu oferăcondiţiileoptime pentru pregătirea copiilor. Noi oferim condiţii moderne de învăţare, profesori
9/14/13 Realizarea unui site in HTML
www.ecursuri.ro/cursuri-online/realizarea-unui-site-in-html-print.html 7/7
specializaţi pentru lucrul cu copii, materiale şi echipamente de ultimă oră, toate acesteala 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 saarate asa: click aici
Daca site-ul tau nu functioneaza cum trebuie, incearca sa vezi codurile pe care le-am folosit noi (View / Source) sicompara-le cu cele folosite de tine.
Acum, ajunsi la finalul acestui curs, nu uita sa exersezi cat mai mult notiunile invatate. Incearca sa faci singur(a)diverse site-uri scriind codul HTML. Mult succes!
Sper ca ti-a placut cursul si te mai asteptam in cadrul paginilor site-ului eCursuri.ro sa invatam impreuna.