Liceul Teoretic Horia Hulubei

Loc.Magurele,jud.Ilfov

PROIECT PENTRU OBINEREA ATESTRII

PROFESIONALE N INFORMATIC

Profesor coordonator:
Cprrescu Iuliana Alina

Elev: Alexeev Victoria Theodora

Clasa a-XII-a A

Sesiunea Mai, 2015

Liceul Teoretic Horia Hulubei

Loc. Magurele,jud. Ilfov

PROIECT PENTRU OBINEREA ATESTRII

PROFESIONALE N INFORMATIC
TITLUL LUCRRII:

Orasul Tulcea

Profesor coordonator:
Cprrescu Iuliana Alina

Elev: Alexeev Victoria Theodora

Clasa a-XII-a A

Sesiunea Mai, 2015

Cuprins
Motivarea lucrrii
Introducere
Prezentare pagini
Acasa
Povestile Tulcei
Capitole
Delta Dunrii
Galerie foto
Contact
Bilbiografie

1
2
7
7
10
10
12
12
14
16

Motivarea lucrarii

Oraul Tulcea reprezint la nivel mondial un punct de atracie turistic, datorit

frumuseilor unice din Delta Dunrii.
Pentru mine, reprezint locul unde m-am nscut, unde mi-am petrecut o bun parte din
copilrie i locul pe care ntotdeauna l voi considera acas.
Mi-am ales aceast tem n primul rnd datorit valorii emoionale ce mi-o ofer, dar i
datorit istoricului vast al evenimentele prin care a trecut acest ora pn s devin ceea ce este
astzi. n al doilea rnd, am dorit ca tema aleas s fie unic, ct mai original din punct de
vedere al coninutului i plcut vizitatorilor site-ului.
De-a lungul timpului oraul Tulcea a fost mprit ntre romani, daci, turci, ttari, rui,
lipoveni, bulgari, italieni, greci, pn cnd a ajuns s fac parte din ara Romneasc dup
cucerirea Independenei fa de Imperiul Otoman n anul 1879. Istoria complex a acestui
teritoriu explic de altfel multitudinea de naionaliti ntlnite n Tulcea.
Delta Dunrii este cea mai tnr i singura unitate de relief din Romnia, aflat ntr-o
continu modificare generat de ntreptrunderea dintre apele Dunrii i apele Mrii Negre.
Din punct de vedere al biodivesitii Delta Dunrii reprezint un adevrat paradis cu valoare de
patrimoniu naional, arealul corespunztor Deltei fcnd parte din Rezervaia Biosferei Delta
Dunrii.
Pornind de la fascinantele frumusei floristice i faunistice ale Deltei, dezvoltarea
economic a oraului Tulcea se bazeaz din ce n ce mai mult pe extinderea activitilor
turistice.
Am ncercat ca n cadrul acestei lucrri s prezint cele mai importante evenimente
legate de istoria oraului i de activitile de turism i industrie.

-1-

Introducere
Programarea WEB
O prim revoluionare a spaiului www s-a produs odat cu posibilitatea de a introduce imagini
n documentele html, prefigurnd transformarea banalului i staticului hypertext n ceea ce
astzi numim hypermedia. nglobarea de grafic, sunet i film n documentele web a fost
urmat de posibilitatea includerii de secvene de cod executate de browser (secvene
JavaScript sau VBSscript) precum i de aplicaii (applet-u) Java (Burta Alin, 2013).
Modul de afiare al documentelor a putut fi apoi controlat mai precis prin utilizarea foilor de
stil (Cascading Style Sheets).
Dezvoltarea conceptelor i tehnologiilor web a avut loc i n direcia dinamizrii coninutului
documentelor hypermedia, prin apariia de limbaje pentru programarea aplicaiilor web serverside (aplicaii executate de ctre serverul gazd).
Web-ul actual a evoluat n direcia proiectrii unor site-uri capabile s i actualizeze coninutul
n mod dinamic, de la or la or, care s ofere modaliti multiple de interaciune cu
vizitatorul :

Setarea caracteristicilor paginii n funcie de preferinele vizitatorului

Afiarea coninutului n funcie de necesitile informaionale ale vizitatorului

Participarea la discuii in forumuri

Exprimarea prerii despre un anumit subiect prin intermediul sondajelor

Cumprarea de produse din magazine virtuale

Plata impozitelor i a taxelor

1. Programarea la nivel de client:

n momentul actual un document web poate fi realizat prin folosirea urmtoarelor tehnologii pe
parte de client:
- Foi de stil in cascad (CSS) i HTML dinamic pentru formatarea documentului, poziionarea
elementelor in pagin i realizarea efectelor primare de animaie ;
- Script-uri JavaScript i BBScript pentru realizarea de mici aplicaii bazate pe evenimente
(validarea datelor transmise prin formulare, realizarea de meniuri derulante etc.) ;
- Aplicaii Java, Script-uri Java care sunt executate de navigator, utilizate de obicei pentru
realizarea de simulri a unor fenomene, jocuri, prezentri multimedia ;
- Animaii flash, Shockwave etc., sunt utilizate de obicei pentru realizarea de animaii, jocuri,
prezentri multimedia i elemente de navigare pentru paginile web.
Dezavantajul major al tehnologiilor de mai sus este dependena acestora de navigatorul
web i implicit de calculatorul client. Nu n ultimul rand, aplicaiile pe partea de client nu au

-2-

acces la fiiere i baze de date, astfel c nu se pot realiza aplicaii care necesita stocarea i
regasirea informatiilor.
2. Programarea la nivel de server
Programarea la nivel de server a aparut pentru a depi limitele programrii la nivelul
clientului. Un Script executat pe calculatorul server este independent atat de navigator,ct i de
software-ul folosit pentru serverul web. n plus, scriptul server-site poate accesa resurse aflate
pe server, cum ar fi bazele de date, fiierele text, serverele de mail, convenii ale sistemului de
operare.
Programarea pe parte de server presupune existent a doua entiti:

Limbajul de scripting propriu-zis

Interpretorul limbajlui.
Interpretorul limbajului de scripting este construit fie ca modul al serverului web, fie este o
aplicaie separat ce conlucreaz cu acesta. De-a lungul timpului au fost folosite o multitudine
de limbaje pentru a concepe scripturi de comunicare ntre serverul web i alte aplicaii.

Introducere n programarea WEB

Protocoale de comunicaie n reeaua internet
Odat cu apariia unei tehnologii noi, se manifest i un fenomen de proliferare a
produselor ce utilizeaz tehnologia respectiv, fiecare productor, dorind s impun pe pia
propria concepie. Dup un anumit timp piaa realizeaza o selecie natural rmnnd n
competiie, n general, doar produsele de calitate. Urmeaz interminabile discuii i controverse
ntre firmele combatante, iar o comisie internaional ncearc s stabileasc un set de reguli i
convenii obligatorii pentru toate firmele ce dezvolt produse bazate pe tehnologia n discuie.
Astfel se nate un standard. Standardul este important pentru unificarea diverselor variante ale
tehnologiei respective i defineste un set de reguli generale, universal acceptate. Un exemplu l
constituie chiar standardul limbajului HTML, care a fost puternic influenat de firmele ce
dezvoltau navigatoare web, fiecare dintre acestea incluznd n produsele proprii etichete noi
sau variante ale etichetelor deja standardizate.
Exista cteva organizaii internaionale responsabile de realizarea standardelor dintre
care amintim:
- ISO (International Standard Organisation)
- ECMA (European Computer Manufacturers Association)
- IEEE (Institute of Electrical and Electronical Engineers)
- ANSI (American National Standards Institute).

-3-

ISO a elaborat un model architectural de referin pentru interconectarea calculatoarelor

cunoscut sub numele de modelul architectural ISO-OSI.
Modelul arhitectural care st la baza reelei internet este cunoscut sub numele de Modelul
Arhitectural TCP/IP, acesta provine de la denumirea celor mai importante protocoale de
comunicaie utilizate: TCP (Transmission Control Protocol) , IP ( Internet Protocol ).
Modelul TCP/IP a fost implementat n reeaua ARPANET, iar mai trziu a fost preluat ca
model al reelei Internet. Modelul TCP/IP mparte arhitectura reelei n patru nivele construite
unul deasupra altuia, fiecare nivel adugnd funcionalitate serviciilor oferite de nivelul
inferior:
- nivelul de acces la reea
- nivelul Internet
- nivelul transport
- nivelul aplicaie (de la baz ctre vrf).
Reeaua internet poate fi privit ca un graf care are drept muchii liniile de comunicaie,
iar ca noduri un echipament hardware. ntr-un nod nu se afl neaprat un calculator gazd, ci se
poate amplasa un echipament periferic (display,imprimanta) sau controller de comunicaie (nod
de comutare sau router) i avnd sarcina de a dirija datele n cadrul reelei.
Nivelul aplicaie definete protocoalele specifice aplicaiilor. Cele mai uzuale aplicaii
definte la acest nivel sunt:
- terminale virtuale: Telnet,
- transfer de fiiere: FTP (File Transfer Protocol),
- pota electronic,
- SMTP, Simple Mail Transfer Protocol,
- POP, Post Office Protocol,
- Aplicaii web (prezentare, baze de date etc.) cu HTTP (Hyper Text Transfer Protocol)
- Administrare i monitorizare: SNMP (Simple Network Management Protocol).
(Burta Alin, 2013)

-4-

Ce este HTML?
HTML este o abreviere de la Hypertext Markup Language i reprezint scheletul oricrei
pagini Web. HTML nu este un limbaj de programare. Nu vom lucra aici cu variabile, extensii,
tipuri de date, structuri de control. HTML este un limbaj descriptiv, prin care sunt descrise
elementele stucturale ale paginii Web:titlurile, listele, tabelele, paragrafele, legturile cu alte
pagini, precum i aspectul pe care l are pagina din punct de vedere grafic. n fond, HTML este
modul n care i comunicm browserului ce elemente dorim s introducem n pagina Web i care
este aspectul acestora.
Pentru a realiza documente Web eficiente, trebuie s inem seama de o idee fundamental:
HTML este destinat structurrii documentelor i nu doar formatrii n vederea afirii lor.
Acest limbaj furnizeaz modaliti variate pentru a defini aspectul documentului: specificaii
legate de fonturi (tipurile de caractere), de formatare a textului, de culori etc. Desigur, aspectul
formal este important, cci el poate veni n beneficiul sau n detrimentul accesibilitii
informaiilor prezentate (https://ro.scribd.com/doc/166430969/Pagini-Web).
Un document HTML este un fiier text care, pe lng textul propriu-zis ce va aprea n
pagin, conine i o serie de elemente speciale, denumite etichete, sau marcaje (tags). Etichetele
nu sunt instruciuni n sensul cunoscut al noiunii, ele avnd doar rolul de a comunica
browserului semnificaia i modul de afiare al elementelor incluse, privind aspectul textului, al
fonturilor (tipurilor de caractere) i n general, al tuturor elementelor prezentate n pagin.
Etichetele sunt delimitate de perechi
de paranteze
unghiulare < >.
(http://www.scritub.com/stiinta/informatica/html/Structura-unui-documentHTML155152474.php)
Pentru a crea documente HTML avem nevoie de un set minimal de instrumente: un editor de
text, un browser, un editor grafic i o conexiune la internet. Trebuie s subliniem faptul c
browserele nu au nevoie de conexiune la Internet ca s funcioneze. Putem ncrca i afia cu
ajutorul browserului documente HTML care sunt stocate pe propriul nostru hard-disk. Aceasta
ne d posibilitatea de a definitiva i testa documentele HTML nainte de a le publica pe
Internet, evitnd astfel prezentarea unor pagini nca nefinalizate, cu erori, sau care funcioneaz
defectuos.
Pentru a realiza acest site am folosit limbajul HTML. Am ales acest limbaj datorit simplitii
lui, pentru c este un bun format pentru documentele Internet i Web datorit formatrii
structurate, legturilor hipertext i uurinei cu care se pot scrie navigatoare pentru vizualizarea
documentelor. Deci este un limbaj uor de neles de toat lumea, foarte folosit i suportat de
toate serverele web.
Instruciunile pentru realizarea unei pagini web sunt incluse ntre marcajele
<html></html> care cuprinde dou seciuni: seciunea de antet: <head>...</head> i corpul
documentului: <body>...</body>.

-5-

Pentru a trece la o nou linie n pagina web se folosete marcajul <br>. Pentru a marca
un paragraf se folosete marcajul <p></p> cu atributul align care poate avea valorile: left,
center, justify, right. Pentru a afia o list se folosete marcajul <li>. Pentru a pune textul n
centrul paginii se folosete <center></center>. Pentru a scrie textul ngroat: <b></b>.
Pentru schimbarea fondului: <font face=></font>, iar pentru mrimea textului: <font
size=n></font> (n=1 - 7).
Modificarea culorilor se face cu: <body text=#></body> (schimb culoarea
textului pentru toat pagina), <body bgcolor=#></body> (schimb culoarea de fond a
paginii), <font color=#></font> (schimb culoarea textului).
Pentru adugarea unei imagini in pagina web se folosete: <img src=poza.jpg>,
pentru alinierea pozei se folosete align cu atributele top, middle, bottom, pentru dimensiuni:
width (lime), height (nlime), pentru apariia numelui pozei la poziionarea mouseului pe
ea se folosete atributul alt.
Pentru realizarea legturilor se folosete marcajul: <a href=></a>, legtura se
poate face cu ajutorul textului sau a unei poze. Pentru ancor (srirea la un anumit loc n
pagin) referirea se face cu: <a href=></a> i <a name=></a>.
Pentru realizarea unui tabel se folosesc marcajele: <table></table>. Liniile se
realizeaza cu marcajul <tr>, iar celulele cu <td>. De asemenea tabelul are o mulime de
atribute : align cu valorile left, center, right i atributul valign cu valorile top, middle, bottom
(ncadrarea textului ntr-o celul), cellpadding (mrirea spaiului dintre liniile tabelului i text),
cellspacing (mrirea limii liniilor tabelului), colspan (unirea mai multor celule de pe aceeai
linie), rowspan (unirea mai multor celule de pe aceeai coloan).

-6-

Prezentare
Site Oraul Tulcea

n vederea proiectrii acestui site,n afara limbajului HTML,am folosit elemente de

CSS pentru a crea i fixa design-ul paginii i pentru crearea galeriei foto..
In directorul principal am creat paginile care contin informatiile de pe site,organizand in
foldere restul resurselor pe care le-am utilizat.
Aspectul general al paginilor a fost creat n CSS, coninutul fiind adugat n fiierul
HTML. Ca structur, toate paginile au meniul localizat n partea de sus a paginii, o mini-galerie
foto, organizat n spatial jumbotron i sidebar-ul ,care cuprinde o caset n care vizitatorii
site-ului pot urmrii cadre live din ora.
Prima pagin, Acas conine un scurt istoric al oraului, informaie ce va fi detaliat
n urmtoarele pagini.

Codul folosit la crearea acestei pagini este urmtorul :

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/style.css" />
<title>Acasa</title></head>
<body>
<div class="menu">
<div class="nav">

-7-

<div class="container">
<ul id="menuv">
<ul class=" nav nav-pills">
<li><img src="images/loogo1.png" width="90px" height="100px"></li>
<li class="active"><a href="Home.html">Acasa</a></li>
<li><a href="despre.html">Povestile Tulcei</a>
<ul class="nav nav-pills">
<li><a href="part1.html">Capitole</a></li>
</ul></li>
<li><a href="delta.html">Delta Dunrii</a></li>
<li><a href="galerie.html">Galerie Foto</a></li>
<li><a href="contact.html">Contact</a></li>
</ul></ul> </div> </div></div>
<div class="jumbotron">
<ul class="slides">
<input type="radio" name="radio-btn" id="img-1" checked />
<li class="slide-container">
<div class="slide">
<img src="images/t1.jpg" /> </div>
<div class="nav">
<label for="img-6" class="prev">&#x2039;</label>
<label for="img-2" class="next">&#x203a;</label>
</div></li>
<input type="radio" name="radio-btn" id="img-2" />
<li class="slide-container">
<div class="slide">
<img src="images/t2.jpg" />
</div>
<div class="nav">
<label for="img-1" class="prev">&#x2039;</label>
<label for="img-3" class="next">&#x203a;</label>
</div> </li>
</li> []
<li class="nav-dots">
<label for="img-1" class="nav-dot" id="img-dot-1"></label>
<label for="img-2" class="nav-dot" id="img-dot-2"></label>
<label for="img-3" class="nav-dot" id="img-dot-3"></label>
<label for="img-4" class="nav-dot" id="img-dot-4"></label>

-8-

<label for="img-5" class="nav-dot" id="img-dot-5"></label>

<label for="img-6" class="nav-dot" id="img-dot-6"></label>
</li>
</ul>
</div>
<div id="sidebar">
<br>
<div class="box1">
<h2>Tulcea Live</h2>
<h3>Parc Ciuperca</h3>
<embed src="http://86.127.95.12:84/cgi-bin/guestimage.html">
</div>
</div>
<div class="container">
<div>
<div class="box">
<h3>Tulcea-Scurt istoric</h3>
<p>&nbsp; &nbsp; &nbsp; Orasul este mentionat pentru prima data in documente de
Diodor din Sicilia in secolul III i.H, sub numele de Aegyssus. Ovidiu mentioneaza intre cele 2
episoade din Ex Ponto, precizand ca cetatea antica, poarta numele intemeietorului sau, getul
Carpyus Aegyssus. Cetatea Aegyssus mai este amintita i in Notitia Episcopatum, in geografia
politica Thematibus. La Muzeul Tulcean de Istorie este expusa o inscriptie funerara
descoperita pe culmea dealului ce are incrustat numele Aegyssus.</p>
[]
<p>Nicolae Iorga afirma ca "tul" ar fi de fapt numele unui guvernator (Tula-bey) la care s-a
adaugat terminatia "cea" prezenta i in alte cazuri de denumiri: Casimcea,Isaccea, Hazamcea,
etc..</p>
</div></div></div> <footer align="center">
<h5>&copy;</h5></footer> </body></html>

-9-

n pagina Povetile Tulcei sunt prezentate cteva noiuni introductive ce rezum

coninutul celor 13 capitole ale povetilor. Codul surs al acestei pagini este asemntor,
paginii anterioare.

Pagina Capitole este un submeniu al paginii Povestile Tulcei, pagin unde se vor regsi
capitolele care descriu istoria orasului de la inceputuri pana in prezent. Capitolele au fost
ordonate n pagin cu ajutorul etichetei <div class=coll-md-4>.

- 10 -

Accesarea capitolelor se face dnd click pe Click to read, care va deschide fereastra
cu coninutul. Aceast fereastr se numete modal box i de regul este folosit la advertiseurile de pe internet. Codul folosit pentru accesarea capitolelor este prezentat mai jos :
<div class="container">
<div>
<div class="box">
<h2>Povestile Tulcei</h2>
<div class="row">
<div class="col-md-4">
<h3>Capitolul 1</h3>
<a href="#openModal1">Click to read</a>
<div id="openModal1" class="modalDialog">
<div>
<a href="#close" title="Close" class="close">X</a>
<h4><b>Komorovka</b></h4>
<p>&nbsp;&nbsp;&nbsp; Mai aproape de zilele noastre, muli i amintesc de o altfel
de Tulce, cu Ciuperca plin de nmol i trestie, cum la fel de plin de nmol i de bolovani era
strada Isaccei la ploile care i astzi i pun la ncercare pe edilii oraului.
</p></span></div></div></div>
<div class="col-md-4">
<h3>Capitolul 2</h3>
<a href="#openModal2">Click to read</a>
<div id="openModal2" class="modalDialog">
<div>
<a href="#close" title="Close" class="close">X</a>
<h4><b>Despre cele mai vechi timpuri</b></h4>

- 11 -

<p>&nbsp;&nbsp;&nbsp; Vechea fortrea getic, ncepe s fie locuit doar cu 500600 de ani nainte de Hristos. Despre geii de pe la noi tim c erau buni prieteni cu grecii, cu
care fceau comer i c au fost primii dintre strmoii notri cucerii de romani, n anul
46.<br></p></span></div></div></div>

Pagina Delta Dunrii conine istoricul Deltei, alturi de un videoclip menit s atrag atenia
asupra frumuseilor ntlnite acolo.

Penultima pagin: Galerie foto

Pentru aceast pagin am ales o galerie simpl, complet receptiv, n care am ales o
serie de poze care pun n eviden dezvoltarea continua a oraului.

- 12 -

Codul folosit pentru realizarea galeriei foto,este urmtorul:

<div class="container">
<div>
<div class="box">
<div class="container" id="container">
<a href="images/1.jpg" rel="lightbox-journey" >
<img src="images/1.jpg" width="200px" height="150px"></a>
<a href="images/2.jpg" rel="lightbox-journey" >
<img src="images/2.jpg" width="200px" height="150px"></a>
<a href="images/3.jpg" rel="lightbox-journey" >
<img src="images/3.jpg" width="200px" height="150px"></a>
<a href="images/4.jpg" rel="lightbox-journey" >
<img src="images/4.jpg" width="200px" height="150px"></a>
<a href="images/5.jpg" rel="lightbox-journey" >
<img src="images/5.jpg" width="200px" height="150px"></a>
<a href="images/6.jpg" rel="lightbox-journey" >
<img src="images/6.jpg" width="200px" height="150px"></a>
<a href="images/7.jpg" rel="lightbox-journey" >
<img src="images/7.jpg" width="200px" height="150px"></a>
<a href="images/8.jpg" rel="lightbox-journey" >
<img src="images/8.jpg" width="200px" height="150px"></a>
<a href="images/9.jpg" rel="lightbox-journey" >
<img src="images/9.jpg" width="200px" height="150px"></a>
<a href="images/10.jpg" rel="lightbox-journey" >
<img src="images/10.jpg" width="200px" height="150px"></a>
<a href="images/11.jpg" rel="lightbox-journey" >
<img src="images/11.jpg" width="200px" height="150px"></a>
</div> </div> </div> </div>

- 13 -

Ultima pagin,Contact:

Codul folosit pentru crearea formularului de contact:

<div class="container">
<div> <div class="box">
<h2>Contact</h2> <br> <br>
<form name="htmlform" method="post" action="html_form_send.php">
<table width="700px"><tr>
<td valign="top">
<label for="first_name"><h4> Prenume *</h4></label></td>
<td valign="top">
<input type="text" name="first_name" maxlength="50" size="30"></td>
<td width="800" align="center"><h2>Proiect realizat de:</h2></td></tr>
<tr><td valign="top">
<label for="last_name"><h4> Nume *</h4></label> </td>
<td valign="top">
<input type="text" name="last_name" maxlength="50" size="30"></td>
<td width="400"><h2>Eleva:Alexeev Victoria</h2></td>
</tr>
<tr>
<td valign="top">
<label for="email"><h4>Email *</h4></label></td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30"></td>
<td align="center"><h2>Prof. coordonator: Caprarescu Alina</h2></td>

- 14 -

</tr>
<tr>
<td valign="top">
<label for="telephone"><h4>Telefon *</h4></label></td>
<td valign="top">
<input type="text" name="telephone" maxlength="30" size="30"></td>
<td align="center"><h2>Sesiunea Mai 2015</h2></td>
</tr>
<tr>
<td valign="top">
<label for="comments"><h4>Comentarii *</h4></label> </td>
<td valign="top">
<textarea
name="comments"
rows="6"></textarea></td>

maxlength="1000"

</tr>
<tr>
<td colspan="2" style="text-align:center">
<input type="submit" value="Trimite"></td>
</tr>
</table>
</form>
</div> </div> </div>

- 15 -

cols="25"

Bibliografie

Burta Alin, 2013. Informatica.Manual pentru clasa a XII a, editura ALL, 288 p.
https://ro.scribd.com/doc/166430969/Pagini-Web
http://www.scritub.com/stiinta/informatica/html/Structura-unui-document-HTML155152474.php
Google images
http://www.primariatulcea.ro
https://www.facebook.com/tulceateiubesc?fref=nf

- 16 -