ministerul educatiei si cercetarii

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}



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;


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-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>


<img src="delfinariu2.jpg" width="150" height="130"></img>

<a href="delfinariu.htm">Delfinariu</a>

</div>


<img src="1caz.jpg" width="150" height="130"></img>

<a href="cazinou.html">Cazinou</a>

</div>


<img src="MuzeulDeIstorie.jpg" width="150" height="130"></img>

<a href="MuzeulDeIstorieArheologie.html">Muzeul de Istorie si Arheologie</a>

</div>


<img src="Muzeu.jpg" width="150" height="130"></img>

<a href="MuzeulDeArtaPopulara.html">Muzeul de Arta Populara</a>

</div>


<img src="nava4.jpg" width="150" height="130"></img>

<a href="MuzeuMarina.html">Muzeul Marinei</a>

</div>


17

<img src="Ro005_Con.jpg" width="150" height="130"></img>

<a href="Moschee.html">Moschee</a>

</div>


<img src="Cazino5.jpg" width="150" height="130"></img>

<a href="MamaiaL.html">Mamaia</a>

</div>


<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

http://invatape.net/invata-html/legaturile-html.html

http://www.ecursuri.ro/cursuri/html-introducere.php

ministerul educatiei si cercetarii

Documents