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. Apoi copiaza imaginile de mai jos (click dreapta - Save Picture As), cu denumirea de sub fiecare, in subdirectorul Poze din directorul 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
|
Acum, dupa ce ai copiat pozele in subdirectorul Poze, din directorul Abecedar si le-ai denumit corespunzator sa continuam realizarea site-ului. Site-ul nostru va avea urmatoarea structura:
|
 |
Vom folosi asadar, cadrele pe care le-am invatat in lectia 10. Vom realiza 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">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 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>
|
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 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ădiniţa ABECEDAR pentru copilul dumneavoastră?<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
de echipă.
</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, 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ă şi
necesitatea de a învăţa cum se utilizează
un calculator.
Grădiniţa ABECEDAR are ca obiectiv principal în
domeniul
implementării în procesul educaţional a cunoştinţelor
de calculator,
iniţierea şi familiarizarea copiilor preşcolari în
acest domeniu.
Se va ţine cont de particularităţile de vârstă
ale celor mici. Astfel copii vor
învăţa noţiunile de bază însoţite
de numeroase 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>
În cadrul cursurilor de limbi
străine
copiii învaţă
să pronunţe corect
cuvinte şi propoziţii în diverse limbi străine.
Suntem pregătiţi să oferim
cursuri 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>
|
- 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 minunat să
poată asculta muzică şi
să poată dansa,
mai ales dacă acestea se întâmplă într-un
cadru organizat.
Cursurile de muzică şi dans de la grădiniţa
noastră acoperă
o gamă foarte diversă de la muzica populară
până la muzica latino.
În fiecare săptămână sunt organizate
concursuri de dans, iar perechile
câştigătoare primesc premii din partea grădiniţ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ădiniţa ABECEDAR
organizează excursii în
Bucureşti, dar nu numai, cu scopul vizitării a cât
mai multe obiective culturale şi
turistice. De asemenea, în vacanţele de 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, 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ţiile
optime pentru pregătirea copiilor. Noi oferim condiţii
moderne de învăţare, profesori specializaţi
pentru lucrul cu copii, materiale şi echipamente de ultimă
oră, 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 folosite de tine.
Acum, ajunsi la finalul acestui curs, nu uita sa exersezi cat mai mult notiunile invatate. Incearca sa faci singur 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.
|
|
|
|
