LICEUL TEORETIC “CALLATIS” MANGALIA
Puncte de atractie in Romania-Constanta
LUCRARE PENTRU ATESTAREA COMPETENŢELOR
PROFESIONALE
Elev: Caraman Cristina
Clasa: a XII-a B
Profesor coordonator: Pilat Mihaela
CUPRINS
Introducere in html…………………………………………….............………….3
Prezentarea proiectului…………………………………………………………...10
→Motivul alegerii temei...............................10
→Structura aplicatiei....................................11
→Detalii tehnice de implementare...............11
→Resurse hard si soft necesare....................13
→Modalitati de utilizare...............................13
→Posibilitati de dezvoltare...........................13
Codul sursa……………………………………………………………................13
Atestat.html……………………………………………..............13
ObiectiveTuristice.html………………………………........,…..15
Acvariu1.html…………………………......................................16
Delfinariu.html..………………...……………………...............18
Cazinou.html………………………………......................20
MuzeulDeIstorieArheologie.html..………………….......21
MuzeulDeArtaPopulara.html.…………….………….....23
MuzeuMarina.html…………….………………………...25
Moschee.html..………………………….………………...27
2
MamaiaL.html..………...………………………………...29
MonumenteL.html…....………………………………….31
Istoric1.html...…………………………………………....33
Informatii.html........……………………………………..35
3
Introducere in HTML
ELEMENTELE LIMBAJULUI HTML
HTML este limbajul pentru definirea paginilor Web. O pagina Web este un un obiect de tip
document, care conţine, la rândul lui, obiecte din ierarhia de obiecte DOM-HTML. Elementele
limbajului HTML sunt tag-uri (elemente de marcare, numite şi etichete) utilizate pentru a descrie
obiectele componente ale documentului.
Sintaxa generală a unui tag este <nume_tag>.
Semantica tag-ului este sugerată de numele acestuia (“nume_tag”) şi este definită în specificaţiile
HTML. Ea este recunoscută de componenta browserului responsabilă cu interpretarea codului HTML.
Pagina HTML este, la rândul ei, un obiect. Marcarea unui obiect de tip document HTML se face cu
tag-ul HTML astfel:
<HTML>
obiectul document
</HTML>
Un document HTML se conformează unei structuri formată din două componente de bază: antet, a
cărui prezentă este opţională, şi conţinut.
Structura generală a unei pagini Web este următoarea:
<HTML>
<HEAD>
obiectul antet
</HEAD>
<BODY>
obiectul conţinut pagină Web
</BODY>
</HTML>
Fiecare componentă a documentului HTML poate fi compusă din mai multe obiecte de diferite
tipuri.
Obiectul antet poate conţine obiecte de tip titlu, metainformaţii, definiţii de stil şi cod de funcţii în
limbaj de scripting.
4
Obiectul conţinut pagină Web este, de asemenea, o colecţie structurată de obiecte de diferite tipuri,
subtipuri ale interfeţei HTMLElement definită în modelul DOM-HTML.
Un obiect are un tip şi o colecţie de atribute prin care se definesc proprietăţile lui. Fiecare tag are
un nume care corespunde unui tip de obiect şi un set de atribute corespunzătoare atributelor obiectelor
de tipul respectiv. Pentru a specifica tipul obiectului conţinut, acesta este marcat cu tag-ul
corespunzator, iar pentru a specifica proprietăţile obiectului se atribuie valorile corespunzătoare
atributelor ataşate tag-ului.
Formatul general pentru specificarea unui obiect al unui document HTML este următorul:
<nume_tag atribut1=val1 atribut2=val2 … atributn=valn >
De exemplu, tipul de obiect “conţinut pagină Web” este marcat cu tag-ul cu nume_tag = BODY
care are atributele:
LINK – culoarea pentru hiperlegătură (link) normală
ALINK – culoarea pentru hiperlegătură activă
VLINK – culoarea pentru hiperlegătură utilizată
BACKGROUND – culoare fundal
BGCOLOR – culoare
TEXT – culoare text
Pentru a defini un conţinut de pagină Web la care culoarea textului este roşu iar hiperlegăturile
active sunt scrise cu albastru se foloseşte:
<BODY TEXT=”RED” ALINK=”BLUE”>
conţinut pagină Web
</BODY>
În acest exemplu, restul atributelor iau valori implicite.
Tag-urile pot fi grupate pe mai multe categorii de funcţii. Există tag-uri pentru structurarea
conţinutului cum ar fi tag-uri pentru specificarea de titluri de diferite nivele (H1, … H6), pentru aliniere
text (CENTER), pentru definire de liste (UL, LI sau OL, LI). De asemenea, există tag-uri specializate în
structurarea conţinutului sub formă de tabele (TABLE, TR, TH, TD), iar fiecare dintre acestea are un set
de atribute printre care se numără atribute pentru aliniere (ALIGN), definire culoare (xxxCOLOR),
definire contur (BORDER), spaţiere între celule (CELLSPACING), distribuire coloane (COLSPAN), etc.
Există, de asemenea, tag-uri pentru evidenţiere conţinut, care marchează obiecte de tip text cu
caracteristici de afişare speciale. Acestea sunt EM pentru scriere cursivă, U pentru subliniere şi B sau
STRONG pentru supraimprimare.
5
O altă categorie de tag-uri sunt utilizate pentru specificare de hiperlegături (link), referinţe la alt
document sau paragraf sau la un obiect de alt tip (ex. Obiect grafic).
<A HREF = url >text</A> indică o referinţă la o resursă identificată cu url.
<IMG = “imagine.gif” WIDTH=”valW” HEIGHT=”valH”> indică o referinţă la o resursă ce reprezintă
un fişier ce conţine o imagine grafică în format GIF, imagine ce va fi afişată într-o zonă cu
dimensiunile specificate de atributele WIDTH (lăţime) şi HEIGHT (înălţime).
FORME
Colectarea informaţiilor client ce vor fi communicate la server se face în containere speciale, numie
forme, în care se definesc controale de interfaţă grafică cu clientul (GUI). Containerele sunt marcate cu
tag-ul FORM, conform următoarei sintaxe generale:
<FORM atribute>
definiţii obiecte de tip control
</FORM>
Următoarea construcţie
<FORM NAME=”nume_forma” ACTION=”url” METHOD=POST> marchează o formă ecran care
conţine obiecte de dialog cu utilizatorul utilizate pentru preluare de informaţii ce vor fi transmise la
server cu metoda POST. Prin valoarea atributului ACTION de tip URL se specifică o componentă aflată
pe server responsabilă cu prelucrarea informaţiilor culese în câmpurile formei.
O formă e constituită din orice combinaţie de obiecte de tip INPUT, TEXTAREA şi SELECT.
Obiectele de tip INPUT sunt marcate cu tag-ul INPUT care are următoarea sintaxă generală:
<INPUT NAME=”nume_obiect” TYPE=”tip” VALUE=”val” SIZE=...
MAXLENGTH= ... [CHECKED] [READONLY]>
Există mai multe tipuri de obiecte INPUT. Tipul asociat unui anumit control INPUT este precizat în
atributul TYPE al acestuia. Tipurile de controale pot fi linie de text(TEXT), fişier(FILE),
parolă(PASSWORD), informaţie ascunsă (text care se transmite la
server dar nu se vede în forma)(HIDDEN), imagine(IMAGE), casetă de marcare(CHECKBOX), set de
butoane radio(RADIO), butoane pentru specificarea unei acţiuni(SUBMIT, RESET).
Obiectele de tip TEXTAREA reprezintă zona mde text de dimensiuni mai mari şi
sunt sunt marcate cu tag-ul TEXTAREA.
<TEXTAREA NAME=nume-camp ROWS=nr_randuri COLS=nr_coloane [READONLY]>
continut implicit al zonei de text
</TEXTAREA>
6
Obiectele de tip SELECT sunt marcate cu tag-ul SELECT şi includ o listă de obiecte marcate cu tag-
ul OPTION reprezentând opţiunile din care se face selecţia. Unul din atributele tag-ului specifică, dacă e
cazul, posibilitatea realizării de selecţii multiple.
<SELECT NAME=nume-camp SIZE=valoare MULTIPLE>
<OPTION SELECTED VALUE="val_1"> Valoare_afisata_1
<OPTION VALUE="val_2"> Valoare_afisata_2
<OPTION VALUE="val_3"> Valoare_afisata_3
...
</SELECT>
Prin SELECTED specificat ca atribut al unui obiect OPTION se indică faptul că aceasta este selecţia
implicită. Valoarea atributului VALUE reprezintă, ca şi în cazul general, valoarea obiectului de tip
select al formei , valoare referită cu document.nume_form.nume_select.options[index_opţiune].value
FOILE DE STIL (SS – Style Sheets)
Foile de stil conţin grupuri de proprietăţi care definesc aspectul unui document HTML. Utilizarea
lor reprezintă o modalitate de a separa forma de prezentare a unui document de conţinutul acestuia,
ceea ce conduce la independenţă faţă de platforma şi de browserul clientului.
Foile de stil pot fi folosite pentru a unifica prezentarea unui grup de documente ale unui site Web.
Au fost standardizate două nivele de definire a aspectului. CSS1 conţine specificaţiile nivelului pentru
definire font, culoare şi spaţiere. CSS2 este un nivel superior care suportă moştenire a foilor, permite
definire de efecte vizuale, poziţionări şi paginări, integrarea diverselor tipuri de media (ex. sunet). În
prezent se lucrează la o propunere pentru CSS3.
În HTML există o serie de tag-uri utilizate pentru formatarea textului cu stiluri fizice. Acestea
permit control asupra detaliilor de aspect ale paginii. Principalele tag-uri din această categorie sunt <I>,
<B>, <U> pentru formatare generală, <BIG>, <SMALL> pentru stabilire dimensiune caractere,
<STRIKE>, <S>, <DEL> pentru text neactual, <TT> pentru caractere de lăţime egală, <SUP>, <SUB>
pentru indicare super/subcript, <FONT>, <BASEFONT> cu atributele FACE pentru tipul de caractere,
SIZE pentru dimensiune şi COLOR pentru culoare.
Modelul de formatare a unei entităţi din document
Orice entitate din document este modelată, în vederea aplicării definiţiilor de stil, sub formă de
casete incluse. Zonele exterioare conţinutului propriu-zis sunt opţionale. Acestea sunt zona de protecţie
(padding area), zona de bordură (border area) şi zona de margine (margin area).7
Definiţia de stil
O foaie de stil este o colecţie de definiţii de stil. Sintaxa generală a unei definiţii de stil este
următoarea:
selector {nume_proprietate : valoare_proprietate}
unde selector reprezintă tag-ul HTML la care se asociază definiţia de stil reprezentată de
perechea (nume_proprietate, valoare_proprietate).
Definiţia de stil implică punerea în corespondenţă a doua entităţi: tag HTML şi stil al unei
proprietăţi a acestuia. Iată o listă de proprietăţi (atribute) şi de valori posibile ale acestora:
font-family: “nume font”
font-size: nr.(pt=puncte, px=pixeli, in=inchs, cm=centimetri, %)
font-style: (italic, normal, oblique)
font-weigh: (extra-light,demi-light, light, mediun, extra-bold, demi-bold, bold)
background: culoare
text-decoration: (none, underline, italic, line-through)
line-heigh: nr.(pt=puncte, px=pixeli, in=inchs, cm=centimetri, %)
color: culoare (nume culoare sau #RRGGBB)
margin-left: nr. (pt=puncte, px=pixeli, in=inchs, cm=centimetri)
margin-right, margin-top, text-ident
text-align: (left, center, right)
background: culoare (nume culoare sau #RRGGBB)
În definirea unui stil există mai multe cardinalităţi de asociere a entităţilor tag şi proprietate, astfel:
sel {n_p : v_p}
sel {n_p1 : v_p1, n_p2 : v_p2, …}
sel_1, sel_2, …, sel_k {n_p : v_p}
sel_1, sel_2, …, sel_k {n_p1 : v_p1, n_p2 : v_p2, …}
Mostenirea stilului
Între taguri aflate pe o ierarhie părinte-descendent, tag-ul descendent moşteneşte stilul tag-ului
părinte. Se poate defini un stil pe o anumită ramură a unei ierarhii părinte(sel_1)- descendent(sel_2),
indicând succesiunea de tag-uri de pe calea respectiva astfel:
sel_1 sel_2 {n_p : v_p}
Ca urmare a acestei definiţii, stilul este definit pentru tag-ul sel_2 doar dacă acesta se află pe o
ramură în care este descendent al tag-ului sel_1.8
Particularizări ale utilizării stilului pentru un anumit tag.
1. Clase de stiluri
Se pot defini mai multe stiluri pentru acelaşi tag. Fiecare definiţie de stil reprezintă o clasă de stil
identificată printr-un nume. În cadrul unui tag se poate specifica clasa de stil ce se utilizează indicând
numele acesteia în atributul CLASS al tag-ului.
Fie următoarele definiţii ale claselor de stil:
.nume_clasa1 {n_p : v_p}
.nume_clasa2 {n_p : v_p}
.nume_clasa3 {n_p : v_p}
Utilizarea pentru o anumită instanţă a tag-ului s_1 a stilului definit în clasa “nume_clasa2” este
specificată cu sintaxa:
<s_1 CLASS=nume_clasa2>
2. Asocieri particulare de stiluri
Dacă stilul este definit folosind construcţia: #nume_stil {n_p : v_p} se poate indica utilizarea acestuia
doar în anumite instanţe ale unui tag, instanţe cărora li se asociază ca identificator numele stilului,
astfel:
<selector ID = nume_stil>
Stilul definit cu selectorul “#nume_stil” se aplică doar instanţelor însoţite de atributul “ID=nume_stil”.
3. Pseudo-clase
Pseudo-clasele definesc stiluri care se conectează la o anumită stare a unui tag sau a unui obiect al
documentului. De exemplu, pentru tag-ul <A> (anchor) se disting trei stări: hiperlegătură normală,
hiperlegătură activă şi hiperlegătură vizitată, pentru fiecare stare fiind definit un stil propriu (în general,
referitor la culoarea textului). De asemenea, pentru un paragraf se pot distinge obiectele de tip linie care
pot fi în starea “prima linie” sau în starea “restul paragrafului”. Pentru starea “prima linie” se poate
defini o pseudo-clasă de stil care se va aplica la prima linie a fiecarui paragraf din document.
O foaie de stil este memorată într-un fişier de tip *.css. În aceasta trebuie specificat tipul
documentului fie prin Content-Style-Type: text/css fie utilizând tag-ul META astfel:
<META http-equiv="Content-Style-Type" content="text/css">
9
Definirea stilului se poate face la nivel de tag “in-line”, la nivel de pagină HTML sau în fişier
separat, de tip *.css, aplicabil mai multor pagini HTML. Foaia de stil poate fi înglobată în document sau
poate fi doar conectată la acesta.
Definiţia de stil inline se face utilizâd atributul style în cadrul altui tag, caz în care afectează doar
obiectul marcat cu eticheta respectivă:
<h3 style=”font-family: Arial; color: red”>Titlu de nivel 3</h3>
Definiţia de stil poate fi plasată în antetul documentului, caz în care afectează toate obiectele
marcate cu etichetele pentru care se defineşte stilul.
<HEAD>
<STYLE type="text/css">
definiţii de stil
</STYLE>
</HEAD>
O foaie de stil poate fi înglobata în documentul HTML prin specificarea faptului că se importă
definiţiile dintr-o foaie de stil indicata prin URL. Aceste definiţii acţioneză, de asemenea, la nivelul
întregii pagini HTML.
<STYLE TYPE="text/css">
@import url(http://www.myserver.com/style.css);
</STYLE>
Cazul cel mai general este cel al foii de stil externă (legată). Se utilizează o foaie de stil aflată într-
un fişier extern cu extensia .css care se conectează la document după următorul prin specificarea acestui
lucru în antet astfel:
<link rel=stylesheet href=”*.css” type=”text/css”>
Este posibilă utilizarea alternativă a mai multor foi de stil. Acest lucru se exprimă prin indicarea
unui acelaşi titlu şi prin folosirea cuvatului cheie “alternate”
_
<LINK TYPE="text/css" REL="alternate stylesheet"
TITLE="Example" HREF="A.css">
<LINK TYPE="text/css" REL="alternate stylesheet"
TITLE="Example" HREF="B.css">
În cazul unui document complex se folosesc stiluri combinate. Există o disciplină de aplicare în
cazul mai multor definiţii pentru acelaşi tag. Aceasta este reflectată de principiul foilor de stil în
cascadă (Cascading Style Sheets).
10
Stilul unui document HTML poate fi definit în mai multe module de stil. Prin noţiunea de cascadă
se reglementează modul în care se pot utiliza mai multe module de definire a stilului pentru un
document HTML. Regula spune că dacă pentru o pagină HTML există mai multe module de definire a
stilului, acestea sunt parcurse în cascadă de către browser. Este important de subliniat că se utilizează
contextul grafic existent pe maşina gazdă. Avantajele utilizării foilor de stil sunt modularitatea şi
reutilizarea modulelor prin indicarea explicită sau implicită (importuri) a fişierelor CSS dorite şi
personalizarea în contextul utilizării browser-elor care permit folosirea unor stiluri personale. Dacă
luăm în considerare atât contextul de la client cât şi definiţiile din paginile descarcate de la server
putem distinge următoarele tipuri de stiluri şi priorităţile lor.
Stilurile definite la nivelul browser-ului sunt implicite şi au prioritate minimă. Urmează stilurile
personale setate de utilizatorul client şi, cu prioritate maximă, stilurile principale specificate de autor.
La nivelul stilurilor specificate de autor există, de asemenea, o ierarhie de aplicare. Prioritate minimă o
au stilurile definite în foile de stil conectate, ordinea priorităţilor continuând cu stilurile înglobate şi cu
stilurile in_line.
Regula spune că stilurile se aplică în cascadă, în ordinea priorităţilor, iar la priorităţi egale, în
ordinea specificării lor. Aplicarea criteriului priorităţilor poate fi eludat folosind cuvâtul cheie
“important”.
JAVA SCRIPT
JavaScript este un limbaj de scriptig, orientat obiect, derivat din limbajul Java. JavaScript se
conformează ECMAScript (European Computer Manufacters Association), standard pentru limbaje
orientat obiect, de tip script. JavaScript este un limbaj special conceput pentru manipularea,
automatizarea şi integrarea facilităţilor oferite de un navigator Web.
11
Prezentarea proiectului
Motivatia alegerii temei
Am ales ca tema de atestat “Puncte de atractie in Romania-Constanta” deoarece am dorit sa
realizez o mica sinteza a locurilor ce merita vazute in judetul meu.
Acest site vine in ajutor tuturor iubitorilor de excursii, frumusete si istorie, constituindu-se intr-
un adevarat ghid al orasului Constanta .
Structura aplicatiei
Parcurgerea site-ului se face prin pagina atestat.html. Aici gasim 2 poze, o scurta introducere si
meniul prin care se acceseaza in continuare site-ul.
12
Din fisierul ObiectiveTuristice.html putem vedea principalele locurile pe care un turist le poate vizita.
Pentru a face o calatorie virtuala prin aceste minunate locuri, pentru imagini de neuitat si pentru a afla
cat mai multe lucruri despre istoria lor este necesara o simpla acceasare a fisierelor:
Acvariu.html delfinariu.html cazinou.html
MuzeulDeIstorieSiArheologie.html MuzeulDeArtaPopulara.html MuzeulMarinei.html
13
Moschee.html Mamaia.html monumente.html
istoric.html informatii.html
14
Detalii tehnice de implementare
Atestat.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="prima.css">
<title>Constanta</title>
</head>
<body>
<h1>CONSTANTA
<br>
OBIECTIVE TURISTICE
</h1>
<ul>
<li><a href="atestat.htm">Home</a></li>
<li><a href="obiectiveTuristice.htm">Obiective Turistice</a></li>
<li><a href="Istoric1.html">Istoric</a></li>
<li><a href="informatii.html">Informatii</a></li>
</ul>
<p>Constanta, locul in care istoria se simte in fiecare piatra!</p>
<img src="800px-Constanta_april.jpg" >
</body>
</html>
Prima.css
body{
background-color: #f0ffff;
background-image: url('cazinou.png');
background-repeat: no-repeat;
background-position: 5% 5%;
}
h1{text-align: center;
font-family:Curlz MT;
font-size: xx-large;}
15
ul
{
float:center;
width:100%;
padding:0;
margin:1.5em;
list-style-type:none;
}
a
{
float:center;
width:14em;
text-decoration:none;
font-family:Curlz MT;
color:white;
background-color:blue;
padding:0.4em 3.4em;
border-right:2px solid white;
}
a:hover {background-color:#ff3300}
li {display:inline}
p {text-align:center;
font-family:Curlz MT;
font-size: 30;
}
img{position: relative;
left:90px}
obiectiveTuristice.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="doi.css">
<title>Obiective Turistice</title>
</head>
<body>
16
<h1>Obiective Turistice</h1>
<p class="unu">Odata ajuns la Constanta nu trebuie sa ratezi sa-i descoperi<br>frumusetile si secretele.<br>Esti pasionat
de istorie: tot ce trebuie sa faci este<br>sa vizitezi muzeele pentru a patrunde in atmosfera timpurilor demult
apuse.<br>Vizitarea Acvarilui si a Delfinariului<br>poate aduce momente de veselie si destindere<br>in viata copiilor dar
si a adultilor.<br>Daca esti o fire romantica sau melancolica<br>imaginea oferita de Cazinoul aflat pe malul marii iti lasa
impresia<br>unui loc de neuitat.<br>Locul ideal pentru tineri si nu numai este Mamaia.<br>Statiunea iti ofera distractii la
tot pasul.</p>
<div style="position:absolute; left:60px; top:30px; height:98px; width:150px; background-color:transparent;" >
<img src="pesti.jpg" width="150" height="130" ></img>
<a href="Acvariu1.html" > Acvariu</a>
</div>
<div style="position:absolute; left:30px; top:200px; height:98px; width:150px; background-color:transparent;" >
<img src="delfinariu2.jpg" width="150" height="130"></img>
<a href="delfinariu.htm">Delfinariu</a>
</div>
<div style="position:absolute; left:60px; top:370px; height:98px; width:150px; background-color:transparent;" >
<img src="1caz.jpg" width="150" height="130"></img>
<a href="cazinou.html">Cazinou</a>
</div>
<div style="position:absolute; left:250px; top:450px; height:98px; width:150px; background-color:transparent;" >
<img src="MuzeulDeIstorie.jpg" width="150" height="130"></img>
<a href="MuzeulDeIstorieArheologie.html">Muzeul de Istorie si Arheologie</a>
</div>
<div style="position:absolute; left:450px; top:450px; height:98px; width:150px; background-color:transparent;" >
<img src="Muzeu.jpg" width="150" height="130"></img>
<a href="MuzeulDeArtaPopulara.html">Muzeul de Arta Populara</a>
</div>
<div style="position:absolute; left:650px; top:450px; height:98px; width:150px; background-color:transparent;" >
<img src="nava4.jpg" width="150" height="130"></img>
<a href="MuzeuMarina.html">Muzeul Marinei</a>
</div>
<div style="position:absolute; left:840px; top:370px; height:98px; width:150px; background-color:transparent;" >
17
<img src="Ro005_Con.jpg" width="150" height="130"></img>
<a href="Moschee.html">Moschee</a>
</div>
<div style="position:absolute; left:870px; top:200px; height:98px; width:150px; background-color:transparent;" >
<img src="Cazino5.jpg" width="150" height="130"></img>
<a href="MamaiaL.html">Mamaia</a>
</div>
<div style="position:absolute; left:840px; top:30px; height:98px; width:150px; background-color:transparent;" >
<img src="constanta19.jpg" width="150" height="130"></img>
<a href="MonumenteL.html">Monumete</a>
</div>
</body>
</html>
Acvariu1.html
<html>
<head>
<meta >
<title>Acvariu</title>
<script language="JavaScript">
<!--
num_of_slides = 8; // numarul de slide-ri
slide_num = 1; // primul slide
// Descrierea fiecarui slide
desc1 = "Acvariul constantean a fost infiintat la 1 Mai 1958 si este vizitat anual de peste 500.000 de vizitatori. Acvariul
este amenajat intr-o cladire cu o vechime de peste 90 de ani, proiectata de arhitectul A. Bernovschi. Situat chiar in fata
cazinoului din Constanta, acvariul va invita sa faceti o incursiune fascinanta in minunata lume subacvatica.";
desc2 = "Patrimoniul sau reprezentat in exclusivitate de fauna acvatica in stare vie cuprinde specii de pesti marini si
dulcicoli indigeni si exotici, ca si unele de nevertebrate marine dulcicole. ";
desc3 = "Aici se afla o importanta colectie de sturioni, cu toate speciile care populeaza Marea Neagra. Reprezentativi sunt
pestii mari (1.5 - 2 m) care traiesc in captivitate de peste 15 ani.";
desc4 = "Se pot admira aici, specii de pesti din lacurile de pe coasta Marii Negre din Delta Dunarii, din Marea Neagra, din
zonele tropicale si subtropicale.";
18
desc5 = "Tot la acvariul constantean puteti admira specii interesante de pe coasta Marii Negre (vulpe de mare, pisica de
mare, calutul de mare, pestele dragon, pestele scorpion) precum si specii migratoare din Mediterana( hering/macrou...)";
desc6 = "In total, in acvariu, sunt prezentate peste 130 specii de pesti.";
desc7 = "Acvariul face parte din Complexul Muzeal de Stiinte ale Naturii din Constanta, institutie de prestigiu din
reteaua muzeala din tara, se numara printre obiectivele culturale si stiintifice cu un rol deosebit in procesul instructiv-
educativ de cunoastere si cercetare a naturii. "
desc8 = "Constanta, Bulevardul Elisabeta nr.1 Tel. +40241611277";
// functii pentru alternanata pozelor
function firstslide(){
slide_num = 1;
changeslide();
}
function prevslide(){
slide_num = slide_num - 1;
if(slide_num < 1){
slide_num = num_of_slides;
}
changeslide();
}
function nextslide(){
slide_num = slide_num + 1;
if(slide_num > num_of_slides){
slide_num = 1
}
changeslide();
}
function lastslide(){
slide_num = 8;
changeslide();
}
// Aceasta funtie schimba poza si descrierea din dreptul fiecarei poze
function changeslide(){
// schimba poza din slide
eval('document.picbox.src = "pic' + slide_num + '.jpg"');
// schimba textul
eval('document.descform.descbox.value = " ' + eval('desc' + slide_num) + '"');
}
19
-->
</script>
</head>
<body text="#000000" bgcolor="#ccffff" link="#0000EE" vlink="#551A8B" alink="#FF0000" onload="changeslide()">
<center><table BORDER=0 CELLSPACING=0 CELLPADDING=2 COLS=1 WIDTH="304" BGCOLOR="#666666" >
<tr>
<td>
<center><table BORDER=0 CELLSPACING=0 CELLPADDING=0 COLS=1 WIDTH="300" >
<tr>
<td ALIGN=CENTER VALIGN=BOTTOM BGCOLOR="#F4F4F4"><img SRC="Spacer.gif" height=30 width=30>
<br><img SRC="pic1.jpg" NAME="picbox" width="550" height="260">
<br><img SRC="Spacer.gif" height=20 width=20></td>
</tr>
<tr>
<td ALIGN=CENTER BGCOLOR="#F4F4F4">
<form name="descform">
<textarea name="descbox" rows=6 cols=60 wrap=virtual onFocus="this.blur()">
</textarea>
</form>
</td>
</tr>
<tr>
<td><img SRC="Spacer.gif" height=2 width=2></td>
</tr>
<tr>
<td ALIGN=CENTER VALIGN=TOP BGCOLOR="#B9B9B9">
<center><table BORDER=0 CELLSPACING=0 CELLPADDING=10 COLS=4 WIDTH="250" >
<tr>
<td ALIGN=CENTER VALIGN=CENTER><a href="javascript:firstslide()"><img SRC="first.gif" BORDER=0 height=28
width=40></a></td>
<td ALIGN=CENTER VALIGN=CENTER><a href="javascript:prevslide()"><img SRC="prev.gif" BORDER=0
height=28 width=40></a></td>
20
<td ALIGN=CENTER VALIGN=CENTER><a href="javascript:nextslide()"><img SRC="next.gif" BORDER=0
height=28 width=40></a></td>
<td ALIGN=CENTER VALIGN=CENTER><a href="javascript:lastslide()"><img SRC="last.gif" BORDER=0 height=28
width=40></a></td>
</tr>
</table></center>
</td>
</tr>
</table></center>
</td>
</tr>
</table></center>
</body>
</html>
21
Resurse hard si soft necesare
Singurul soft de care aveti nevoie pentru a vizualiza continutul site-ului este un browser web (Internet
explorer, Mozilla Firefox, Opera)
Modalitati de utilizare
Folosind orice browser puteti vizualiza continutul site-ului.Pentru aceasta aveti nevoie sa deschideti
fisierul atestat.html. Printr-o simplă apăsare a butonului din stânga al mouse-lui pe unul din cele ale
meniului principal, puteţi avea acces la informaţia dorită.
Posibilitati de dezvoltare
Printre numeroasele posibilitati de dezvoltare ale acestui site se numara : adaugarea de noi imagini
alea obiectivelor turistice ce releva modificarile (ex:arhitecturale) produse asupra lor si adaugarea altor
informatii ce pot starni si mai mult interesul potentialilor turisti (ex: oferte de excursii,extinderea
programului de vizite,evenimente)
22
Bibliografie : http://www.google.com
http:// www.wikipedia.com
http://www.ecursuri.ro/cursuri/html-introducere.php
http://invatape.net/invata-html/legaturile-html.html
23
Top Related