Document PDF 8

Sursa: http://www.ecursuri.
ro/
Lecția 8
Realizarea unui site în HTML
În aceasta ultimă lecţie a cursului, vom realiza împreună site-ul unei grădiniţe de copii. Noi i-am dat
numele grădiniţa Abecedar.
Înainte de a trece la realizarea efectiva a site-ului, va trebui să faci un nou director pe care să-l numeşti
Abecedar, iar în cadru acestuia două subdirectoare: Pagini şi Poze. Apoi copiază imaginile de mai jos
(click dreapta - Save Picture As), cu denumirea de sub fiecare, în subdirectorul Poze din directorul
Abecedar:
home.jpg calculator.jpg
limbistraine.jpg muzica.jpg
excursii.jpg desprenoi.jpg
logo.jpg
meniu.jpg
welcome.jpg
copil.jpg
calculator2.jpg
1
Sursa: http://www.ecursuri.ro/
Lecția 8
calculator3.jpg
straine.jpg
learn.jpg
muzica2.jpg
muzica3.jpg
excursii2.jpg
excursii3.jpg
desprenoi2.jpg
desprenoi3.jpg
2
Lecția 8
Acum, după ce ai copiat pozele în subdirectorul Poze, din directorul Abecedar şi le-ai denumit
corespunzător să continuăm realizarea site-ului. Site-ul nostru va avea următoarea structură:
Vom folosi aşadar, cadrele învăţate anterior. Vom realiza mai întâi pagina din partea de sus top.html,
care va avea următorul 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>
Copiază codul într-un fişier text, apoi salvează pagina (File/Save As) cu numele de top.html în folderul
Pagini.
Verifică pagina.
În continuare vom scrie codul pentru pagina html care va conţine meniul din partea stângă 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>
3
Lecția 8
<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>
Copiază codul într-un fişier text, apoi salvează pagina, în folderul Pagini cu numele de meniu.html.
Verifică pagina.
După ce am făcut meniul şi partea de sus a site-ului, care se vor repeta în fiecare pagină, 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 salvată cu numele home.html în directorul Abecedar alături de subdirectoarele Pagini
şi Poze, însă nu va fi funcţională pentru că nu a fost creata pagina index.html, al cărei cod este
următorul:
<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ă;
4
Lecția 8
<LI>copiii au posibilitatea de a se împrieteni unii cu alţii şi să-şi dezvolte spiritul de echipă.
</UL>
</H4>
</FONT>
</BODY> </HTML>
Salvează pagina, în folderul Pagini cu numele de index.html.
Verifică pagina.
Prima pagina a site-ului este gata.
Ne vom ocupa în continuare şi de restul paginilor. În primul rând, realizează o pagină calculator.html,
în folderul Pagini, care să aibă acelaşi cod HTML cu pagina home.html, numai ca în loc de index.html
vom folosi icalculator.html. În mod asemănător, facem şi paginile limbistraine.html (în loc de
index.html folosim istraine.html), muzica.html (în loc de index.html folosim imuzica.html),
excursii.html (în loc de index.html folosim iexcursii.html), desprenoi.html (în loc de index.html
folosim idesprenoi.html).
Mai avem de realizat paginile icalculator.html, istraine.html, imuzica.html, iexcursii.html şi

idesprenoi.html. Aceste pagini vor fi formate din conţinutul fiecărei rubrici a site-ului. Codul HTML
pentru fiecare pagină va fi prezentat în continuare. Nu uita să salvezi fiecare pagină în folderul Pagini.
- pentru pagina icalculator.html, codul HTML este următorul:

<BODY>
<CENTER><img src="../Poze/calculator2.jpg"></CENTER><BR><BR>
<img src="../Poze/calculator3.jpg" hspace="25" vspace="25" align="left"><BR>
<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">
<H4>In 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ă;
5
Lecția 8
<LI>limba italiană;
<LI>limba germană;
<LI>limba franceză.
</UL>
</H4>
</FONT> </BODY> </HTML>
- pentru pagina imuzica.html, codul HTML este următorul:

<BODY>
<CENTER><img src="../Poze/muzica2.jpg"></CENTER><BR><BR>
<img src="../Poze/muzica3.jpg" hspace="25" vspace="20" align="left"><BR><BR>
<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. In fiecare săptămână sunt organizate
concursuri de dans, iar perechile câştigătoare primesc premii din partea grădiniţei.
</H4>
- pentru pagina iexcursii.html, codul HTML este următorul:

<BODY>
<CENTER><img src="../Poze/excursii2.jpg"></CENTER><BR><BR>
<img src="../Poze/excursii3.jpg" hspace="25" vspace="20" align="left"><BR><BR>
<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>
- pentru pagina idesprenoi.html, codul HTML este următorul:

<BODY>
<CENTER><img src="../Poze/desprenoi2.jpg"></CENTER><BR><BR>
<img src="../Poze/desprenoi3.jpg" hspace="25" vspace="10" align="left"><BR>
<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>
Dacă totul a mers cum trebuie şi ai respectat toate indicaţiile din cadrul lecţiei, site-ul este gata şi nu-ţi
mai rămâne decât să verifici acest lucru.

Document PDF 8

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Document PDF 8

Încărcat de

Drepturi de autor:

Formate disponibile

Sursa: http://www.ecursuri.

<HTML> <HEAD> <TITLE>Abecedar</TITLE> </HEAD>

<HTML> <HEAD> <TITLE>Home</TITLE> </HEAD>

Prima pagina a site-ului este gata.

Mai avem de realizat paginile icalculator.html, istraine.html, imuzica.html, iexcursii.html şi

- pentru pagina icalculator.html, codul HTML este următorul:

- pentru pagina istraine.html, codul HTML este urmatorul:

<HTML> <HEAD> <TITLE>Home</TITLE> </HEAD>

- pentru pagina iexcursii.html, codul HTML este următorul:

- pentru pagina idesprenoi.html, codul HTML este următorul:

S-ar putea să vă placă și