Liceul National Pedagogic Stefan Velovan

Lucrare pentru atestarea competentelor profesionale

Viata subacvatica

Eleva: Grigorie Alexandra Florentina Prof.Coordonator: Berceanu Mirela Catalina Sesiunea: Mai 2014

1. Motivul alegerii temei .pag. 3 2. Structura aplicatiei ................... pag. 4 3. Aplicatii folosite ....................... pag.21 4. Codul Sursa .............................. pag.29 5. Despre HTML ......................... pag.38 6. Resurse de hard si soft ............. pag.49 7. Bibliografie ............................. pag.50

Pasionat de lumea acvatica si de curiozitatile ce le ascunde, de calatorii si in special de distractia in aer liber m-a impins sa imi aleg ca tema pentru lucrarea pentru atestarea competentelor profesionale Viata subacvatica. Prezinta foarte multe comori naturale, si cel mai important o multime de specii de pesti la care nimeni nu s-ar fi gandit ca exista In proiectul realizat de mine veti gasi imagini exemplificative asupra ceea ce puteti gasi pe fundul apelor de pe planeta noastra si informatii despre cele mai interesante specii de pesti.

Proiectul este realizat din 7 legaturi ce descriu in amanunt Viata Subacvatica.Index-ul se prezinta cu o interfata prietenoasa ce face legatura cu restul subdomeniilor prezentate. Lista celor 7 link-uri este: Index Tribul Creniricani Genul Symphysodon (Discus) Galerie foto Genul Angel (Pterophyllum) Contact Video

In urmatoarele pagini sunt prezentate informatii generale despre locul unde se gasesc comorile naturale cat si descrieri ale diferitelor celor mai fabuloase specii de pesti Marea Neagr Marea Neagr este ntinderea de ape din bazinul geomorfologic denumit pontic, unul din bazinele complexului tectonic tethysian, el nsui parte a orogenezei alpino-himalayene, din care fac parte i munii care o mrginesc la nord (n Crimea), la nord-est (Caucazul) i la sud (lanurile pontice). Este situat ntre Europa i Asia, avnd ca state riverane Rusia, Ucraina, Romnia, Bulgaria, Turcia i Georgia. PrinStrmtoarea Cherci este legat de Marea Azov, prin Bosfor de Marea Marmara, iar prin strmtoarea Dardanele de Marea Egee i deci deMarea Mediteran. Marea Neagr este, din punct de vedere hidrologic, un rest al Mrii Sarmatice i prezint o serie de aspecte unice n lume : ape salmastre (n medie 16-18 grame de sare pe litru fa de 34 -37 n n alte mri i oceane), stratificare ntre apele de suprafa oxigenate i
4

cele adnci anoxice (fenomen denumit euxinism), limane la gurile fluviale, flor i faun cu multe specii-relicve. n zona litoralului romnesc salinitatea scade i mai mult, n mod obinuit fiind ntre 7 i 12 la mie. Marea Neagr se ntinde pe o suprafa de 423.488 km. Cel mai adnc punct se afl la 2211 m sub nivelul mrii n apropierea de Ialta. Mareele sunt n general de mic amploare (cca. 12 cm). Hidrologie Dispunerea circular a surselor de ap i existena unei singure legturi externe - prin Strmtoarea Bosfor, Marea Marmara, Strmtoarea Dardanele - cu Oceanul planetar, alturi de nclzirea relativ moderat a apei de ctre Soare, determin lipsa aproape total a curenilor marini verticali i existena doar a curenilor orizontali pe un imens traseu circular mpotriva sensului acelor de ceasornic. Temperatura apei variaz la suprafa: vara pn la 29 de grade Celsius care ajung iarna pn la 0 grade Celsius. Lumina ptrunde n largul mrii la o adncime de 150-200 m. Oxigenul este inexistent la adncime [CO2,H2S]. Curenii au intensitate redus pe vertical i mai mare pe orizontal; iarna sau n timpul unor variaii ale strii vremii, pot aprea valuri care ating 5 -10 m. Fluvii i ruri care se vars n Marea Neagr Sunt mai multe fluvii i ruri care se vars n Marea Neagr. n zona european principalele sunt Casimcea, Dunrea, Nistru, Nipru, Bugul de Sud i Cubanul. n Asia Mic principalele ape care se vars n Marea Neagr sunt Scaria, Enige, Czl-Irmac i Ieil-Irmac. Alte ape care se vars n Marea Neagr sunt Cioruhul n Armenia turceasc, Rionul n Gruzia,Provadia i Ca mcia n Bulgaria etc. Un aport mare de ap este primit de Marea Neagr de la Don, prin intermediul Mrii Azov. Pe de alt parte, n august 2010, grup de cercettori britanici de la universitatea din Leeds au studiat sub partea de nord-vest a Mrii Negre o important scurgere de ap freatic dulce, al crei debit este de 350 de ori mai mare dect cel al Tamisei[1]. Scurgerea de ap freatic se gsete aproximativ sub valea Carasu, provine parial i din Dunre, i ajunge n mare, prin nisipul de la fund, n largul Constanei, ora ale crui puuri de captare preleveaz o parte din ea. D ac s-ar afla la
5

suprafa, aceast scurgere ar forma un fluviu care ar fi al aselea din lume, din punctul de vedere al debitului. [1]. Scurgerea are loc la o adncime de 35 de metri i pe o lrgime de peste 800 de metri [1], iar viteza apei ajunge la 6,5 kilometri pe or. [1] Salinitatea Apa oxigenat din straturile superioare ale mrii are o salinitate relativ mic: circa 17 la mie, datorat revrsrii fluviilor, cu circa 600 Km de ap dulce pe an. n straturile mai adnci, mai jos de 150 de metri, coninutul de sare este mult mai ridicat, deoarece aceste ape provin, prinStrmtoarea Bosfor, din Marea Mediteran. Anual se scurg prin Bosfor circa 450 Km de ap salmastr la suprafa dinspre Marea Neagr spre Mediterana, cu o concentraie a srii de 17-19, iar de-a lungul fundului circa 50 Km de ap cu o concentraie a srii de 38-39 dinspre Mediterana spre Marea Neagr[2], provocnd n strmtoare cureni primejdioi pentru navigaie. Circa 200 Km de ap se evapor anual. Marea Neagr reprezint cel mai mare bazin de ap salmastr al lumii, cu biotopi variai i cu o faun ce a fost supus unor transformri continue datorate puternicelor influene contrarii exercitate de apele dulci i de Marea Mediteran. Apele Mrii Negre au toate caracteristicile apelor salmastre, au o mare variabilitate a salinitii totale n corelaie cu suprafaa, adncimea i sezonul, o puternic variabilitate ionic, nu numai fa de Mediterana, dar i de diferitele sale pri [3]. Ecosistemul depinde de aceste condiii hidrologice. Ecosistemul Mrii Negre Face parte din categoria ecosistemelor stttoare de ap srat. Din punct de vedere al salinitii, Marea Neagr se mparte n: zona de suprafa; zona de adncime; Sub aspect biocenotic gsim trei zone:

zona litoral; zona pelagic;

zona abisal. Biocenoza cuprinde alge inferioare, alge verzi, brune i roii. Animalele sunt reprezentate prin viermi, molute, peti iar n atmosfera apropiat psri i pescrui.

Biotopul pontic Biotopul pontic poate fi mprit n 4 etaje principale. Etajul supralitoral Etajul supralitoral este format din zonele de rm acoperite ori stropite de valuri n mod ocazional. Zona prezint o umiditate accentuat, inundabilitate, o cantitate n general mare ori mcar semnificativ de materii organice aduse de valuri sau de origine local. De obicei materiile organice se afl n descompunere, formnd depozite cu mirosde metan i sulfur de hidrogen. Flora este format mai ales din anumite forme de alge - rar licheni cu rezisten la variaii de mediu i hidrofile. Cu o frecven mai redus se ntlnesc i angiosperme, mai ales n partea dinspre uscat a etajului supralitoral. Pe lng bacterii aerobe i - mai puin - anaerobe, fauna include numeroase crustacee, insecte i viermi. Mare parte din aceste vieti se hrnesc din depozitele de materie organic. O parte mai mic este format din mici prdtori. La acestea trebuie adugate vietile pasagere, n special psrile de mare. Etajul mediolitoral Etajul mediolitoral cuprinde zona de spargere a valurilor (ntre cca. 0 i -0,5 m altitudine). Etajul mediolitoral al lui Bcescu (1971) corespunde cu etajul mezolitoral al lui Peres i Picard (1958,1960) sau cu etajul talantofotic al lui Ercegovic (1957). Dup substratul solului se mparte n zone pietroase, respectiv nisipoase ori mloase. Mediolitoralul ocup n cadrul zonelor cu substrat dur o fie lat de 2-10 m n funcie de nclina ia platformei stncoase. Zonele mediolitorale pietroase (stncoase) adpostesc organisme capabile a rezista perioadelor scurte de deshidratare i care se pot fixa bine de substrat (de exempu midiile se fixeaz prin firele cu bissus). Aici intr unele specii de alge i scoici. Li se adaug vieuitoare care vin periodic din etajul supralitoral sau infralitoral. n anumite condiii i n acest mediu apar depozite de materie organic, fcnd legtura cu biotopul prezentat mai sus. Cele mai cunoscute vieuitoare ale etajului mediolitoral pietros sunt bancurile de midii i stridii. Etajul mediolitoral nisipos cuprinde n special animale capabile de ngropare
7

rapid n substrat. Biocenoza caracteristic zonei de spargere a valurilor pentru mediolitoralul nisipos de granulaie medie i grosier este cea a bivalvei Donacilla cornea i polichetului Ophelia bicornis, crora li se mai asociaz misidul Gastrosaccus sanctusi polichetele Nerine cirratulus, Pisione remota i Saccocirrus papillocercus (Bcescu. et al 1967). Mediolitoralul nisipurilor fine este caracterizat de predominarea populaiilor amfipodului Euxinia maeotica i turbelariatul Otoplana subterranea (Bcescu. et al 1971). Etajul sublitoral Etajul sublitoral (infralitoral) este aflat la adncimi de 0,5 pn la 12 (maximum 17,7) metri. Este zona cea mai favorabil vieii, n care se afl majoritatea speciilor de plante i cea mai mare parte a biomasei organismelor multicelulare. Etajul sublitoral cuprinde poriunea de fund marin permanent imersat, situat ntre limita inundrii permanente i adnci mea care permite existena organismelor fotosintetizante. Etajul elitoral Etajul elitoral se situeaz de la limita inferioar a algelor unicelulare sau pluricelulare (60 m) pn la marginea platformei continentale. n Marea Neagr, din cauza euxinismului, nu exist etajele batial, abisal i hadal, apele adnci fiind anoxice. Fauna De la o anumit adncime, apa mrii nu mai conine oxigen dect n cantiti neglijabile.[4] Exist totui microorganisme care folosesc sulfat pentru oxidarea hranei i produc hidrogen sulfurat idioxid de carbon.[4] Ele formeaz un biosistem anaerob care se apropie tot mai mult de suprafa.[4] Biologii se tem c Marea Neagr ar putea deveni o mare moart, sulfuroas.[4] Numrul delfinilor a sczut de la 1,5 milioane de exemplare, n anii 1950, pn la cteva zeci de mii de exemplare, n 2006.[4] Etimologie, istorie i alte caracteristici Cei mai dinti menionai locuitori ai rmurilor mrii Negre, anume Cimerienii i Sciii (popoare indo-europene), o denumeau Axaina , adic "albastru nchis". n vremea colonizrii greceti marea se numea Pontos Euxeinos , adic "marea primitoare", poate prin preluare fonetic a denumirii Axaina . Romanii au transcris denumirea sub forma Pontus
8

Euxinus , folosind ns i Mare Scythicum , iar ulterior, n vremeampriei Bizantine, n Evul Mediu, apar denumirile de ("Megali thalassa" preluat n romnete ca Marea cea mare din documentele lui Mircea cel Btrn i n italiana genovezilor ca Mare maggiore ) i de K ("Chechias thalassa", anume "marea crivului", preluat n bulgrete ca : "marea oarb" sau "nchis"), denumiri prezente n hrile veneiene precum i n cronicile lui Wavrin i lui Villehardouin. Calificativul Neagr, apare n secolul XV e.n. odat cu extinderea Imperiului turcesc, i exist trei ipoteze explicative, toate trei discutate : Cea mai popular, dar neconfirmat de nici-o surs, afirm c ar fi culoarea mrii la vreme rea (de fapt, sub nori, toate mrile sunt ntunecate) ; Teoria cea mai des citat n sursele anglo-saxone este c Neagr ar fi o traducere a cuvntului scitic axana ; O alt ipotez este c denumirea i-ar fi fost dat de Turcii Selgiuci (Seluk Trklar) instalai n Anatolia din secolul XI, apoi generalizat de Otomani(Osmanl Trklar) de jur mprejurul mrii, i nsfrit tradus n rusete, romnete, bulgrete pe msur ce aceste popoare au acces din nou la rmurile Mrii cea Mare. Aceast ipotez este dezbtut inclusiv n rndurile turcologilor, dat fiind ca desemnarea tradiional a punctelor cardinale prin culori, la Turci, nu totdeauna folosete Kara (adic ntunecat ) pentru Miaznoapte i Ak (adic luminos ) pentru Miazzi, cum este cazul aici (Karadeniz fiind Marea Neagr, la nord de Turcia, iar Akdeniz fiind Marea Mediteran la sud de Turcia) : de obicei, se folosesc alte culori[5]. Ca urmare a poziiei sale, rmurile mrii Negre au fost parcurse, colonizate u sunt astzi populate de numeroase popoare sosite din timpuri mai vechi sau mai noi. Cele mai vechi popoare pontice sunt Grecii pontici, Armenii, Romnii, Lazii, Gruzinii i Abhazii. Alte popoare pontice sunt Bulgarii, Turcii i alte popoare turcice (de exemplu Gguzii i Ttarii) sau Mongolii (venii n regiune n sec. XIII), Ucrainienii, Ruii (printre care Lipovenii) i alii. Toate aceste popoare prezint astzi o serie de tradiii, legende i alte forme de folclor legate de Marea Neagr.

Marea Neagr face legtura ntre Europa i Asia. Grania stabilit de geografi ntre cele dou continente, pe Caucaz i strmtoarea Bosfor taie aceast mare n dou pri inegale, cea mai mare parte fiind european. Marea Neagr este srac n insule, avnd un rm puin dantelat. Cele mai importante insule sunt Insula erpilor i cele formate de Dunre, dincolo de vrsare, ca Insula Sacalinul Mare. Cea mai important peninsul este Peninsula Crimeea, "mprit" cu Marea Azov. Golfurile Mrii Negre sunt fie largi, puin prielnice adpostirii vaselor pe furtun (ca Golful Burgas, Golful Varna, Golful Sinop, Golful Samsun i altele), fie separate de larg de de curenii transversali prin cordoane litorale ( grinduri ) i transformate astfel n limane (de exemplu Limanele Dobrogene sau Limanul Nistrului). Etajul mediolitoral al Mrii Negre, cuprinznd zona de spargere a valurilor (0-0,5 m adncime), adpostete n poriunile pietroase organisme - animale i vegetale - care se fixeaz puternic i pot suporta unele perioade de uscare. Cteva orae importante se afl la Marea Neagr, cum ar fi Burgas, Varna, Constana, Odessa, Ialta, Sevastopol, Soci, Suhumi , Batumi i Trabzon. Un ora care nu se afl propriu -zis la Marea Neagr, dar este mult legat istoric i economic de aceast mare este oraul Istanbul (mai demult Constantinopol i capitala Imperiului Bizantin). Ipoteza potopului pontic n 1997, hidrologul William Ryan i geologul Walter Pitman, americani, descoper lucrrile hidrologilor i sedimentologilor romni, bulgari i rui, publicate n analele institutelor de cercetri marine de la Constana , Varna i Sevastopol, i relatnd cercetrile ntreprinse prin anii 1970, ndeosebi analiza cu metoda carbon-14 a cochiliilor subfosile de molute de ap dulce, prezente n straturile de sub sedimentele marine actuale de pe platforma continental. Analizele concord : cochillile respective au circa 7000 de ani. Cercettorii romni, bulgari i rui conclud c acum 7000 de ani, Marea Neagr a cunoscut, cel puin n straturile de ape superficiale, un episod ligohalin (adic de mare scdere a salinitii ), datorat, poate, scurgerii spre bazinul pontic a unei mase de ap de topire post-glaciar prin fluviile ruseti. Dar Ryan i Pitman emit alt ipotez, bazndu -se pe legenda Potopuluidin Biblie, ea nsi motenit din mitologia Sumerian, anume din legenda lui Ghilgame.
10

Ei presupun c bazinul pontic adpostea de zeci de mii de ani un lac de ap dulce, pe care l numesc Lacul Pontic, al crui nivel era cu 180 m mai jos dect nivelul actual al mrii, astfel c platforma continental era la aer liber i adpostea primii agricultori europeni (arheologia ne spune c Sud-EstulEuropei a fost prima zon n care s-a rspndit agricultura). Cnd nivelul apelor oceanice i ale Mediteranei au depit altitudinea cea mai joas a istmului Bosforului, apa marin a format o scurgere (actuala strmtoare) care a umplut n mod catastrofal bazinul pontic, n cteva luni, printr-o cascad gigantic, oblignd agricultorii s-i prseasc brusc aezrile. Ryan i Pitman afirm c aceste populaii s -au rspndit, cutnd alte cmpii de cultivat, n Anatolia i n Mesopotamia, vehiculnd astfel legenda Potopului. Ei popularizeaz n S.U.A. aceast teorie, prin articole, cri i filme documentare care au ntl nit un succes cu att mai mare, cu ct cultura popular american este n mod tradiional consumatoare de teorii care mbin, ntr-un fel sau ntraltul, Biblia cu tiina. Majoritatea cercettorilor specialiti ai Mrii Negre, ns, nu au admis ipoeza Ryan-Pitman, fiindc aceasta las prea multe date neexplicate i contrazice cunotinele hidrologice relative laEuxinism[6]. n prezent exist trei reconstituiri diferite ale istoriei Mrii Negre:

ipoteza catastrofist Ryan-Pitman, care a fost abandonat de aproape toi oamenii de tiin (rmnnd ns foarte popular n public), ipoteza gradualist, care presupune o schimbare lent i imperceptibil contemporanilor, a caracteristicilor hidrologice ale Mrii Negre (mai are nc partizani), ipoteza conform creia nivelul i salinitatea au oscilat de mai multe ori n decursul perioadelor glaciare, inter-glaciare i n ultima perioad post-glaciar, care are acum sprijinul majoritii specialitilor, fiindc explic cel mai satisfctor fenomenele observate.[7] Orae de coast

Cele mai importante 20 orae de pe coasta Mrii Negre:

Istanbul (Turcia) 4.800.000

11

Odessa (Ucraina) 1.200.000 Constana (Romnia) 390.000 Kherson (Ucraina) 358.000 Varna (Bulgaria) 350.000 Sevastopol (Ucraina) 330.000 Burgas (Bulgaria) 300.000 Novorossiysk (Rusia) 281.400 Suhumi (Georgia) 280.000 Ialta (Ucraina) 210.000 Batumi (Georgia) 200.000 Ordu (Turcia) 190.143 Samsun (Turcia) 180.000 Kerch (Ucraina) 158.165 Trabzon (Turcia) 150.000 Zonguldak (Turcia) 104.276 Soci (Rusia) 100.000 Poti (Georgia) 70.000 Mangalia (Romnia) 50.000 Nvodari (Romnia) 34.669 Spaiul maritim al Romniei

Spaiul maritim al Romniei are aproximativ 20.000 de kilometri ptrai, constnd din: [8]

ape maritime interioare 753 de kilometri ptrai, mare teritorial 4.487 de kilometri ptrai, zon contigu 4.460 de kilometri ptrai, i zon economic exclusiv 10.300 de kilometri ptrai.

Codul sursa al galeriei foto: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <meta name="generator" content="Web Page Maker">
12

<style type="text/css"> /*----------Text Styles----------*/ .ws6 {font-size: 8px;} .ws7 {font-size: 9.3px;} .ws8 {font-size: 11px;} .ws9 {font-size: 12px;} .ws10 {font-size: 13px;} .ws11 {font-size: 15px;} .ws12 {font-size: 16px;} .ws14 {font-size: 19px;} .ws16 {font-size: 21px;} .ws18 {font-size: 24px;} .ws20 {font-size: 27px;} .ws22 {font-size: 29px;} .ws24 {font-size: 32px;} .ws26 {font-size: 35px;} .ws28 {font-size: 37px;} .ws36 {font-size: 48px;} .ws48 {font-size: 64px;} .ws72 {font-size: 96px;} .wpmd {font-size: 13px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;fontweight: normal;} /*----------Para Styles----------*/ DIV,UL,OL /* Left */ { margin-top: 0px; margin-bottom: 0px; } </style> <script src="ac_activex.js" type="text/javascript"></script> <style type="text/css"> div#container { position:relative; width: 777px; margin-top: 0px;

13

margin-left: auto; margin-right: auto; text-align:left; } body {text-align:center;margin:0} </style> </head> <body> <div id="container"> <div id="shape1" style="position:absolute; overflow:hidden; left:0px; top:164px; width:217px; height:656px; z-index:0"><img border=0 width="100%" height="100%" alt="" src="images/shape2859903.gif"></div> <div id="image1" style="position:absolute; overflow:hidden; left:-1px; top:0px; width:780px; height:180px; z-index:1"><img src="images/header81.jpg" alt="" title="" border=0 width=780 height=180></div> <div id="image3" style="position:absolute; overflow:hidden; left:-2px; top:818px; width:780px; height:30px; z-index:2"><img src="images/bg.jpg" alt="" title="" border=0 width=780 height=30></div> <div id="image4" style="position:absolute; overflow:hidden; left:-2px; top:848px; width:780px; height:50px; z-index:3"><img src="images/bg1.jpg" alt="" title="" border=0 width=780 height=50></div> <div id="hr1" style="position:absolute; overflow:hidden; left:0px; top:380px; width:217px; height:18px; z-index:4"> <hr size=3 width=217> </div>

14

<div id="text2" style="position:absolute; overflow:hidden; left:22px; top:54px; width:60px; height:25px; z-index:5"> <div class="wpmd"> <div align=center><font color="#00FFFF" class="ws16"><B><I>Viata</I></B></font></div> </div></div> <div id="text8" style="position:absolute; overflow:hidden; left:45px; top:85px; width:129px; height:24px; z-index:6"> <div class="wpmd"> <div align=center><font color="#00FFFF" class="ws16"><B><I>subacvatica</I></B></font></div> </div></div> <div id="text7" style="position:absolute; overflow:hidden; left:68px; top:407px; width:95px; height:28px; z-index:7"> <div class="wpmd"> <div><font face="Tahoma" class="ws11"><B><a href="#" title="">Galerie Foto</a></B></font></div> </div></div> <div id="text1" style="position:absolute; overflow:hidden; left:243px; top:183px; width:412px; height:28px; z-index:8"> <div class="wpmd"> <div><font color="#FF9900" face="Tahoma" class="ws11"><B>Galerie foto</B></font></div> </div></div> <div id="g_image1" style="position:absolute; overflow:hidden; left:4px; top:199px; width:205px; height:181px; z-index:9"><img src="images/pestecap-transparent.jpg" alt="" title="" border=0 width=205 height=181></div>

15

<div id="g_slideshow1" style="position:absolute; overflow:hidden; left:0px; top:460px; width:217px; height:223px; z-index:10"> <script type="text/javascript"> AC_RunFlashContent('width','217','height','223','qua lity','high','autoplay','true','loop','true','wmode ','opaque','FlashVars','bcastr_xml_url=images/slide show3119037.xml&AutoPlayTime=5','codebase','http:// download.macromedia.com/pub/shockwave/cabs/flash/sw flash.cab','pluginspage','http://www.macromedia.com /go/getflashplayer','src','images/bcastr31.swf'); </script> <noscript> <object width=217 height=223 classid="clsid:D27CDB6E-AE6D-11CF-96B8444553540000" codebase="http://download.macromedia.com/pub/shockw ave/cabs/flash/swflash.cab"> <param name="movie" value="images/bcastr31.swf"> <param name="quality" value="high"> <param name="loop" value="true"> <param name="wmode" value="opaque"> <param name="autoplay" value="true"> <param name="FlashVars" value="bcastr_xml_url=images/slideshow3119037.xml&A utoPlayTime=5"> <embed src="images/bcastr31.swf" width=217 height=223 quality="high" TYPE="application/xshockwave-flash" wmode="opaque" FlashVars="bcastr_xml_url=images/slideshow3119037.x ml&AutoPlayTime=5" loop="true" autoplay="true" pluginspage="http://www.macromedia.com/go/getflashp layer"></embed> </object> </noscript> </div> <div id="g_text7" style="position:absolute; overflow:hidden; left:290px; top:88px; width:93px; height:23px; z-index:11">

16

<a href="crenicarini.html"><div class="wpmd"> <div><font class="ws14"><a href="crenicarini.html" title="">Crenicarini</a></font></div> </div></a></div> <div id="g_text6" style="position:absolute; overflow:hidden; left:423px; top:86px; width:55px; height:25px; z-index:12"> <a href="index.html"><div class="wpmd"> <div><font class="ws14"><a href="index.html" title="">Acasa </a></font></div> </div></a></div> <div id="g_text5" style="position:absolute; overflow:hidden; left:521px; top:86px; width:60px; height:22px; z-index:13"> <a href="Discus.html"><div class="wpmd"> <div><font class="ws14"><a href="Discus.html" title="">Discus</a></font></div> </div></a></div> <div id="g_text4" style="position:absolute; overflow:hidden; left:615px; top:87px; width:60px; height:24px; z-index:14"> <a href="Angel.html"><div class="wpmd"> <div><font class="ws14"><a href="Angel.html" title="">Angel</a></font></div> </div></a></div> <div id="g_text3" style="position:absolute; overflow:hidden; left:708px; top:85px; width:60px; height:24px; z-index:15"> <a href="Video.html"><div class="wpmd"> <div><font class="ws14"><a href="Video.html" title="">Video</a></font></div> </div></a></div> <div id="g_text2" style="position:absolute; overflow:hidden; left:491px; top:144px; width:70px; height:24px; z-index:16">

17

<a href="Contact.html"><div class="wpmd"> <div><font class="ws14"><a href="Contact.html" title="">Contact</a></font></div> </div></a></div> <div id="g_text1" style="position:absolute; overflow:hidden; left:68px; top:407px; width:95px; height:28px; z-index:17"> <div class="wpmd"> <div><font face="Tahoma" class="ws11"><B><a href="galerie foto.html" title="">Galerie Foto</a></B></font></div> </div></div> <div id="gallery1" style="position:absolute; overflow:hidden; left:310px; top:271px; width:400px; height:405px; z-index:18"> <div class="item" style="float:left"><div style="margin:6px 6px 0px;width:112px;height:112px"><div style="position:relative;left:0px;top:22px;width:11 2px;height:68px;background:url('images/shadow.png') no-repeat right bottom;"><a href="images/1835.jpg" target="_blank"><img border=0 width=100 height=56 src="images/1835.jpg" style="position:relative;left:3px;top:3px" /></a></div></div></div> <div class="item" style="float:left"><div style="margin:6px 6px 0px;width:112px;height:112px"><div style="position:relative;left:0px;top:13px;width:11 2px;height:86px;background:url('images/shadow.png') no-repeat right bottom;"><a href="images/Crenicarini.jpg" target="_blank"><img border=0 width=100 height=74 src="images/Crenicarini.jpg" style="position:relative;left:3px;top:3px" /></a></div></div></div> <div class="item" style="float:left"><div style="margin:6px 6px

18

0px;width:112px;height:112px"><div style="position:relative;left:0px;top:13px;width:11 2px;height:86px;background:url('images/shadow.png') no-repeat right bottom;"><a href="images/Discus.jpg" target="_blank"><img border=0 width=100 height=74 src="images/Discus.jpg" style="position:relative;left:3px;top:3px" /></a></div></div></div> <div class="item" style="float:left"><div style="margin:6px 6px 0px;width:112px;height:112px"><div style="position:relative;left:0px;top:12px;width:11 2px;height:87px;background:url('images/shadow.png') no-repeat right bottom;"><a href="images/Hotelulsubacvatic-ultima-gaselnita-in-materie-deturism_350.jpg" target="_blank"><img border=0 width=100 height=75 src="images/Hotelul-subacvaticultima-gaselnita-in-materie-de-turism_350.jpg" style="position:relative;left:3px;top:3px" /></a></div></div></div> <div class="item" style="float:left"><div style="margin:6px 6px 0px;width:112px;height:112px"><div style="position:relative;left:0px;top:12px;width:11 2px;height:87px;background:url('images/shadow.png') no-repeat right bottom;"><a href="images/imgXxmieN.jpg" target="_blank"><img border=0 width=100 height=75 src="images/imgXxmieN.jpg" style="position:relative;left:3px;top:3px" /></a></div></div></div> <div class="item" style="float:left"><div style="margin:6px 6px 0px;width:112px;height:112px"><div style="position:relative;left:0px;top:13px;width:11 2px;height:86px;background:url('images/shadow.png') no-repeat right bottom;"><a href="images/mareaneagra.jpg" target="_blank"><img border=0 width=100 height=74 src="images/marea-neagra.jpg"

19

style="position:relative;left:3px;top:3px" /></a></div></div></div> <div class="item" style="float:left"><div style="margin:6px 6px 0px;width:112px;height:112px"><div style="position:relative;left:0px;top:21px;width:11 2px;height:70px;background:url('images/shadow.png') no-repeat right bottom;"><a href="images/peste-captransparent.jpg" target="_blank"><img border=0 width=100 height=58 src="images/peste-captransparent.jpg" style="position:relative;left:3px;top:3px" /></a></div></div></div> <div class="item" style="float:left"><div style="margin:6px 6px 0px;width:112px;height:112px"><div style="position:relative;left:0px;top:7px;width:112 px;height:98px;background:url('images/shadow.png') no-repeat right bottom;"><a href="images/Pterophyllum.jpg" target="_blank"><img border=0 width=100 height=86 src="images/Pterophyllum.jpg" style="position:relative;left:3px;top:3px" /></a></div></div></div> <div class="item" style="float:left"><div style="margin:6px 6px 0px;width:112px;height:112px"><div style="position:relative;left:0px;top:19px;width:11 2px;height:74px;background:url('images/shadow.png') no-repeat right bottom;"><a href="images/Subacvatic.jpg" target="_blank"><img border=0 width=100 height=62 src="images/Subacvatic.jpg" style="position:relative;left:3px;top:3px" /></a></div></div></div> </div> </div> </body> </html>

20

In realizarea proiectului s-au folosit o suita de aplicatii renumite pentru utilizarea lor: Macromedia Flash Adobe Dreamweaver Adobe Photoshop CS2 Web Page Maker v3.21

21

Adobe Dreamweaver (cunoscut anterior ca Macromedia Dreamweaver) este o aplicaie de dezvoltare web a companiei americane Adobe Systems, disponibil att pentru MS Windows, ct i pentru Apple Mac OS. Versiunile recente includ suport pentru tehnologii web cum ar fiCSS, JavaScript, PHP, Cold Fusion, ct i cadre ASP. Dreamweaver s-a bucurat de un larg succes nc de la sfritul anilor 1990 i momentan deine aproximativ 80 % din piaa editoarelor HTML. Produsul poate fi rulat pe variate platforme software: Mac OS, Windows, dar suport n acelai timp i platforme UNIX cu ajutorul unor emulatoare software cum ar fi Wine. Ca orice alt editor WYSIWYG, Dreamweaver poate ascunde detaliile de implementare a paginilor HTML, fcnd astfel posibil crearea cu uurin a acestora i de ctre utilizatorii neexperimentai. Unii creatori de pagini web critic aceste tipuri de editoare deoarece produc pagini de dimensiuni mult mai mari dect ar fi necesar, ceea ce conduce la o funcionare neperformant a browserelor web. Aceast afirmaie este n mare parte adevarat deoarece paginile web produse folosesc designul pe baz de tabel. n plus, produsul a mai fost criticat n trecut i pentru producerea de coduri care adesea nu erau conform standardelor W3C, dar acest aspect a fost mult mbuntit n versiunile recente. Cu toate acestea, compania Macromedia a mbuntit suportul pentru tehnologia CSS precum i alte modaliti de design, fr a fi necesar folosirea designului pe baz de tabel. Dreamweaver permite folosirea majoritii browserelor instalate pe calculatorul utilizatorului, pentru a previzualiza situl web creat. De asemenea conine i cteva utilitare pentru administrarea siturilor, cum ar fi cele pentru a gsi i modifica un paragraf sau o linie de cod, n ntregul sit, pe baza oricror parametri specifica i de ctre

22

utilizator. Cu ajutorul panourilor de stare se poate crea cod JavaScript fr a avea cunotine de programare. Odat cu apariia versiunii MX, Macromedia a ncorporat utilitare de generare dinamic a coninutului. De asemenea este oferit suport pentru conectarea la baze de date (cum ar fi cele de tip MySQL i Microsoft Access) pentru a filtra i afia coninutul folosind scripturi de genul PHP, ColdFusion, Active Server Pages (ASP) i ASP.NET, fr a avea nevoie de o prealabil experien n programare. Un aspect foarte ludat al Dreamweaver-ului l reprezint arhitectura sa extensibil. Extensiile sunt mici programe pe care orice dezvoltator le poate scrie (de obicei n HTML i JavaScript) i pe care oricine le poate descrca i instala, acestea aducnd un spor de performan i funcionalitate mbuntit programului. Exist o comunitate de dezvoltatori care produc aceste extensii i le public (att comercial ct i gratuit) pentru probleme de dezvoltare web, de la simple efecte rollover pn la soluii complete de vnzare online, n Internet. Adobe Flash, sau mai pe scurt Flash, este o aplicaie utilizat pentru dezvoltarea obiectelor-applet de tip Flash disponibile n cadrul unor pagini web. Prin intermediul obiectelor flash, se poate cre te dinamismul unei pagini precum i facilita interaciunea cu utilizatorul. Iniial dezvoltat de Macromedia, aplicaia Flash a fost preluat de ctre Adobe odat cu achiziionarea companiei sus amintite. nceputurile Flash-ului Jonathan Gray de profesie arhitect, pasionat de calculatoare, ncearc s construiasc cteva jocuri. Ulterior va ncerca s construiasc cteva instrumente gen CAD pentru a-i uura propria munc. Printre primele aplicaii menionm: Super Paint program de desenat

23

Intellidraw obiecte i componente grafice (pentru MAC i PC); comportament asociat obiectelor (aceast facilitate fiind pstrat chiar i nFlash deja elementele grafice sunt considerate ca fiind obiecte); 1993 FutureWave (companie iniiat de Jonathan Gay mpreun cu un prieten) lanseaz SmartSketch n care se putea desena cu creionul optic acest modul fiind identic cu cel aflat chiar i n versiunile actuale de Flash. Aplicaia este lansat public i sunt ateptate reaciile posibililor utilizatori. 1995 utilizatorii vor un program de animaie adaptat WEBului: FutureSplash Animator ; din cauz c firma a pierdut destul de mult n urma eecului SmartSketch-ului i pentru c cei doi iniiatori nu aveau bani s plteasc angajaii se declar falimentari i pentru a putea acoperi unele datorii vor ncerca s vnd ultima lor aplicaie ctre Adobe paradoxal atunci au fost refuzai pentru ca ulterior (n 2005) Adobe s plteasc pentru greelile din trecut i s cumpere Macromedia (firm care a achiziionatFutureSplashAnimator-ul). 1996 Microsoft interesat de o animaie simpl n pagina lor web; cnd Macromedia observ c soluia este dat de FutureSplashAnimator devine brusc interesat n achiziionarea firmei (falimentare) FutureWave i FutureSplash va deveni Flash 1.0. Avantaje i dezavantaje n Flash Avantajele folosirii Flash-ului pe web:

Dimensiunea unui fiier SWF versus dimensiunea unui GIF ambele reprezentnd o animaie simpl Elemente grafice vectoriale: dimensiuni mici i scalabil: Pentru a memora imaginile un calculator poate recurge la dou metode: prima este reinerea pixel cu pixel a imaginii, cea de-a doua este memorarea unor puncte critice cu ajutorul crora imaginea poate fi refcut. Astfel pentru a afia un cerc, acesta poate fi memorat ntr-o imagine de tip raster (cum ar fi formatul BitMap sau Jpeg) dac avem un cerc cu o raz destul de mare vor fi memorai nu numai pixelii de pe circumferina cercului ci i cei din interiorul acestuia sau
24

care sunt n jurul su. Spre deosebire, n cadrul formatelor vectoriale (SVG - Scalable Vector Graphics, SWF - ShockWave Flash) sunt reinute doar centrul i raza cercului, calculatorul gsind imediat metoda de afiare a tuturor punctelor ce vor alctui cercul. Este evident faptul c dimensiunea unui fiiern format rasterizat (jpg, bmp, gif) este mai mare dect cea a unui fiier n format vectorial (din cauza numrului de informaii ce vor fi reinute). Atunci cnd mrim o imagine de tip vectorial nu facem dect s redesenm o parte a sa, calculatorul putnd reda cercul cu aceeai claritate se cunoate forma geometric reprezentat i mrirea imaginii nu reprezint dect trasarea (la scar) a fostei imagini vectoriale. Atunci cnd mrim o imagine de tip raster calculatorul nu cunoate despre ce este vorba i operaia va consta doar n suprademensionarea pixelilor (un pixel al cercului va fi afiat n mai multe puncte de pe ecran). Independena de platform (browser/sistem de operare): Imaginile vectoriale, dei mai utile, necesit o aplicaie care s genereze imaginea (pentru formatul SVG de exemplu exist Adobe SVG Player iar pentru SWF avem Playerul de Flash). Independena de platform apare din cauz c acest program ce tie s afieze imaginile a fost construit pentru o gam larg de hardware i sisteme de operare: Astfel dac vom vizualiza obiectul Flash n Windows se va folosi automat Playerul de Flash versiunea Windows, dac utilizm un telefon mobil (SmartPhone), se va folosi playerul disponibil pentru telefoane (Flash Player Lite 1.0), sau dac vom folosi MacOS exist un player separat (evident toate playerele vor afi a aceeai imagine final). Animaii de lung durat uor de realizat: animaiile sunt punctul forte al Flash-ului, interfaa aplicaiei d posibilitatea de a sincroniza (n funcie de timp) diversele obiecte, poziii sau forme ale acestora. Flash-ul nu numai c realizeaz aceast sincronizare, dar poate i interpola poziia (sau forma) unui obiect pentru a uura munca utilizatorului. Se pot aduga interfeei elemente multimedia: n interiorul obiectelor Flash putei importa i manipula (nainte, inapoi, salt la un anumit moment) MP3-uri sau AVI-uri. Nu necesit cunotine de HTML, XHTML: n cazul n care v hotri s realizai un ntreg site n Flash, aplicaia v poate furniza odat cu

25

obiectul flash i codul HTML necesar n acest fel tot ce mai trebuie fcut este doar publicarea sitului pe un server WEB. Editoare puternice i lucrul facil: (Macromedia) Flash este un editor puternic care d posibilitatea de atari de comportamente diverselor obiecte fie folosind interfaa de desenare grafic fie prin ataarea de scripturi obiectelor. Uurina mbinrii elementelor grafice cu scriptul: ataarea codurilor ActionScript obiectelor din flash se realizeaz prin selectarea obiectului i introducerea codului asociat obiectului ntr-o fereastr special. Transferabil ca flux de date: pentru ca un film Flash s ruleze pe maina clientului nu este necesar s fie ncrcat n ntregime playerul va afia doar ct va putea din film ateptnd (eventual) ncrcarea n continuare. Din acest motiv se pot realiza scripturi speciale care ataate obiectelor Flash pot furniza informaii privitoare la procentul de fiier care a fost ncrcat. Dezavantaje ale utilizrii Flash-ului: Printre dezavantajele folosirii obiectelor flash n paginile web amintim: Depinde de player: dei acesta vine instalat pe o suit de browsere (i n cazul n care nu este preinstalat instalarea este destul de rapid dimensiunea Playerului Flash este destul de mic i descrcarea acestuia n contextul reelelor actuale este rapid), totui exist cazuri n care obiectele Flash ajung pe maini ce nu au instalat aplicaia necesar interpretrii obiectelor Flash, ajungndu-se n imposibilitatea folosirii fiierelor (Pentru a rula aplicaiile Flash pe aceste calculatoare trebuie exportat obiectul Flash ca un executabil). Mare amator de resurse: deoarece trebuie s reconstruiasc de fiecare dat elementele grafice, Playerul Flash (precum i aplicaia de dezvoltare) este mare consumator de memorie i procesor (n cazul graficii raster este clar unde trebuiau afiai pixelii ce formeaz cercul n cadrul graficii vectoriale trebuie ca poziiile pixelilor s fie recalculate). Motoarele de cutare nu pot indexa textul: Flashul lucreaz cu mai multe tipuri de texte, majoritatea dintre acestea (textul static) nu poate fi indexat de motoarele de cutare deoarece obiectulFlash este tratat ca element grafic/obiect i roboii de cutare nu au cunotinele necesare disecrii obiectelor Flash i extragerii textului intern. Uurina utilizrii l face sa fie folosit n cele mai absurde moduri (de exemplu, flash-urile - sperietoare). Pentru aceste tipuri de Flash-uri,
26

fcute de obicei de nceptori, n limba englez exist un termen special: "flashturbation". Tehnologie liceniat: fiind o aplicaie dezvoltat de o serie de programatori (pltii pentru a dezvolta Flashul), instrumentul de dezvoltare cost cel puin 600 Totui specificaiile formatului obiectului Flash sunt disponibile i din acest motiv au aprut (i nc apar) destule instrumente care s utilizeze acest format n scopuri mai mult sau mai puin productive sau legale. Dintre acestea amintim: Swift3D, Swish, ImperatorFLA, ActionScript Obfuscator. Construirea obiectelor n Flash

Utilizarea instrumentelor pentru desenarea unui pentagon Elementele grafice pot fi desenate i remodelate direct din flash prin intermediul unor instrumente simpliste Pot fi importate din alte programe sub diverse formate Pot fi create din ActionScript: putem realiza un obiect de tip MovieClip i apoi desena n interiorul su prin intermediul unor comenzi de tip moveTo, lineTo, curveTo, fill, gradient Fill Imbinarea graficii cu scriptul Scriptul poate fi ataat n oricare cadru al animaiei conferindu-ne sigurana ca acea secven se va executa sincronizat cu ce se afl desenat pe ecran (programare temporal) Scriptul poate fi ataat unui buton Scriptul poate fi ataat unui movieClip (un film n filmul Flash) Comunicarea dintre Flash i alte tehnologii Obiectul Flash poate comunica cu servere asincron (motiv pentru care se folosesc evenimentele n cadrul flashului) dnd posibilitatea dezvoltatorilor de Flash de a recurge la diversele informaii ce pot fi stocate pe server n baze de date sau fiiere special construite.

27

Obiectul poate comunica cu serverul iniializnd conexiuni i comunicnd n timp real. n acest mod pot fi construite diverse chaturi sau aplicaii care s comunice n timp real chiar dac sunt aflate pe calculatoare diferite (vezi jocurile de tip ah din Yahoo Messenger care sunt realizate n Flash). Obiectele Flash pot comunica ntre ele prin intermediul unor conexiuni locale iniializate cu comanda LocalConnection: dou obiecte Flash aflate pe acelai calculator au posibilitatea de a interaciona chiar dac unul ruleaz ntr-o fereastr a unui browser iar cel de-al doilea ntr-un browser diferit de primul (sau chiar rulat direct de playerul Flash). Obiectele Flash pot comunica cu scripturile de tip JavaScript prin intermediul comenzii fscommand (JS poate comunica cu Flash apelnd funcii direct din Flash i referind obiectul Flash prin intermediul atributului name din codul HTML exportat de Flash). Obiectul Flash fiind construit special pentru internet nu poate rula aplicaii, schimba informaiile din sistem sau scrie fiiere. Pentru a putea totui s crem fiiere (de dimensiuni mari) pe maina clientului, putem folosi Flashul ca interfa pentru aplicaiile scrise n alte limbaje de programare (a fost folosit cu succes pentru realizarea interfeei PlayStation II).

28

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <meta name="generator" content="Web Page Maker"> <style type="text/css"> /*----------Text Styles----------*/ .ws6 {font-size: 8px;} .ws7 {font-size: 9.3px;} .ws8 {font-size: 11px;} .ws9 {font-size: 12px;} .ws10 {font-size: 13px;} .ws11 {font-size: 15px;} .ws12 {font-size: 16px;} .ws14 {font-size: 19px;} .ws16 {font-size: 21px;} .ws18 {font-size: 24px;} .ws20 {font-size: 27px;} .ws22 {font-size: 29px;} .ws24 {font-size: 32px;} .ws26 {font-size: 35px;} .ws28 {font-size: 37px;} .ws36 {font-size: 48px;} .ws48 {font-size: 64px;} .ws72 {font-size: 96px;} .wpmd {font-size: 13px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;fontweight: normal;} /*----------Para Styles----------*/
29

DIV,UL,OL /* Left */ { margin-top: 0px; margin-bottom: 0px; } </style> <script src="ac_activex.js" type="text/javascript"></script> <style type="text/css"> div#container { position:relative; width: 778px; margin-top: 0px; margin-left: auto; margin-right: auto; text-align:left; } body {text-align:center;margin:0} </style> </head> <body> <div id="container"> <div id="shape1" style="position:absolute; overflow:hidden; left:0px; top:164px; width:217px; height:656px; z-index:0"><img border=0 width="100%" height="100%" alt="" src="images/rect53213196.gif"></div> <div id="image1" style="position:absolute; overflow:hidden; left:0px; top:0px; width:780px; height:180px; z-index:1"><img src="images/header81.jpg" alt="" title="" border=0 width=780 height=180></div> <div id="image3" style="position:absolute; overflow:hidden; left:-2px; top:818px; width:780px;

30

height:30px; z-index:2"><img src="images/bg.jpg" alt="" title="" border=0 width=780 height=30></div> <div id="image4" style="position:absolute; overflow:hidden; left:-2px; top:848px; width:780px; height:50px; z-index:3"><img src="images/bg1.jpg" alt="" title="" border=0 width=780 height=50></div> <div id="hr1" style="position:absolute; overflow:hidden; left:0px; top:380px; width:217px; height:18px; z-index:4"> <hr size=3 width=217> </div> <div id="roundrect1" style="position:absolute; overflow:hidden; left:567px; top:407px; width:184px; height:149px; z-index:5"><img border=0 width="100%" height="100%" alt="" src="images/shape55534364.gif"></div> <div id="text2" style="position:absolute; overflow:hidden; left:22px; top:54px; width:60px; height:25px; z-index:6"> <div class="wpmd"> <div align=center><font color="#00FFFF" class="ws16"><B><I>Viata</I></B></font></div> </div></div> <div id="text8" style="position:absolute; overflow:hidden; left:45px; top:85px; width:129px; height:24px; z-index:7"> <div class="wpmd"> <div align=center><font color="#00FFFF" class="ws16"><B><I>subacvatica</I></B></font></div> </div></div> <div id="g_text7" style="position:absolute; overflow:hidden; left:290px; top:88px; width:93px; height:23px; z-index:8"> <a href="crenicarini.html"><div class="wpmd">

31

<div><font class="ws14"><a href="crenicarini.html" title="">Crenicarini</a></font></div> </div></a></div> <div id="g_text6" style="position:absolute; overflow:hidden; left:423px; top:86px; width:55px; height:25px; z-index:9"> <a href="index.html"><div class="wpmd"> <div><font class="ws14"><a href="index.html" title="">Acasa </a></font></div> </div></a></div> <div id="g_text5" style="position:absolute; overflow:hidden; left:521px; top:86px; width:60px; height:22px; z-index:10"> <a href="Discus.html"><div class="wpmd"> <div><font class="ws14"><a href="Discus.html" title="">Discus</a></font></div> </div></a></div> <div id="g_text4" style="position:absolute; overflow:hidden; left:615px; top:87px; width:60px; height:24px; z-index:11"> <a href="Angel.html"><div class="wpmd"> <div><font class="ws14"><a href="Angel.html" title="">Angel</a></font></div> </div></a></div> <div id="g_text3" style="position:absolute; overflow:hidden; left:708px; top:85px; width:60px; height:24px; z-index:12"> <a href="Video.html"><div class="wpmd"> <div><font class="ws14"><a href="Video.html" title="">Video</a></font></div> </div></a></div> <div id="g_text2" style="position:absolute; overflow:hidden; left:491px; top:144px; width:70px; height:24px; z-index:13"> <a href="Contact.html"><div class="wpmd">

32

<div><font class="ws14"><a href="Contact.html" title="">Contact</a></font></div> </div></a></div> <div id="text1" style="position:absolute; overflow:hidden; left:258px; top:208px; width:522px; height:170px; z-index:14"> <div class="wpmd"> <div><font color="#FF9900" face="Tahoma" class="ws11"><B>Despre...</B></font></div> <div><font color="#000000" face="Tahoma" class="ws6"><B><BR></B></font></div> <div><font color="#000000">Marea Neagra este o mare semiinchisa, din bazinul atlantic, situata intre Europa si Asia. Granita stabilita de geografi intre cele doua continente, pe Caucaz si Stramtoarea Bosfor taie aceasta mare in doua parti inegale, cea mai mare parte fiind europeana.</font></div> <div><font color="#000000"><BR></font></div> <div><font color="#000000">&nbsp;&nbsp; Rusia, Ucraina, Romania, Bulgaria, Turcia si Georgia sunt tarile vecine Marii Negre. Comunica cu Marea Azov prin Stramtoarea Kerci, cu Marea Marmara prin Stramtoarea Bosfor, iar mai departe prin Stramtoarea Dardanele cu Marea Egee si Marea Mediterana.</font></div> <div><font color="#969696" face="Tahoma"><BR></font></div> <div><font color="#000000" face="Courier"><BR></font></div> <div><font color="#000000" face="Courier"><BR></font></div> <div><font color="#000000" face="Courier"><BR></font></div> <div><font color="#000000" face="Courier"><BR></font></div> <div><font color="#000000" face="Courier"><BR></font></div> </div></div>

33

<div id="text5" style="position:absolute; overflow:hidden; left:254px; top:363px; width:306px; height:208px; z-index:15"> <div class="wpmd"> <div><font color="#000000"> Din cauza proceselor dinamice, permanente, de transformare a liniei de coasta, datele lungimii acesteia nu sunt constante. In functie de data, autorii si metoda prin care s-a calculat lungimea tarmurilor, au fost emise valori cuprinse intre 4020 km si 4500 km. In anul 2011 cercetatorii bulgari de la Institutul de Oceanologie din Varna, utilizand imagini si masuratori efectuate cu ajutorul satelitilor au stabilit ca lungimea totala a tarmurilor Marii Negre este de 4869 km, din care 1756 km pe teritoriul Ucrainei, 1700 km in Turcia, 421 km in Rusia, 414 km in Bulgaria, 322 km in Georgia si 256 km in Romania.</font></div> <div><font color="#000000"><BR></font></div> <div><font color="#969696" face="Tahoma"><BR></font></div> <div><font color="#000000" face="Courier"><BR></font></div> <div><font color="#000000" face="Courier"><BR></font></div> <div><font color="#000000" face="Courier"><BR></font></div> <div><font color="#000000" face="Courier"><BR></font></div> <div><font color="#000000" face="Courier"><BR></font></div> </div></div> <div id="text6" style="position:absolute; overflow:hidden; left:252px; top:580px; width:522px; height:232px; z-index:16"> <div class="wpmd"> <div><font color="#000000">Tarmurile Marii Negre&nbsp; sunt putin dantelate. Patrunderea uscatului in mare se face, de obicei, pe distante

34

scurte, sub forme de capuri. Intre acestea, golfurile au deschideri largi, ceea ce le imprima caracterul de bai si sunt putin prielnice adapostirii vaselor pe furtuna (Golful Burgas, Golful Varna, Golful Sinop, Golful Samsun), sau sunt colmatate la iesire de curenti orizontali si transformate in limane (Limanul Nistrului). Cele mai pronuntate capuri care patrund spre larg, sunt marcate cu faruri ca repere de navigatie, la litoralul vestic remarcandu-se Cap Midia, Cap Tuzla, Cap Sabla, Cap Caliacra, Cap Emine si golfurile Burgas si Varna, la tarmul bulgar.</font></div> <div><font color="#000000">&nbsp;&nbsp; In general coastele estice si sudice ale marii sunt inalte, datorita lanturilor muntoase care inainteaza pana in zona litorala. Zonele costiere nordice si nordvestice se prezinta de obicei ca sesuri mai mult sau mai putin inalte (fragmentate de vai), care in unele locuri se termina cu faleze, iar in alte locuri cu cordoane litorale ce despart limanurile de mare. Coastele sud-vestice, mai coborate in sectorul Rumeliei, se inalta treptat pana in zona Burgasului, datorita apropierii muntilor Balcani.</font></div> <div><font color="#000000"><BR></font></div> <div><font color="#000000" face="Courier"><BR></font></div> <div><font color="#000000" face="Courier"><BR></font></div> <div><font color="#000000" face="Courier"><BR></font></div> <div><font color="#000000" face="Courier"><BR></font></div> <div><font color="#000000" face="Courier"><BR></font></div> </div></div> <div id="g_text1" style="position:absolute; overflow:hidden; left:68px; top:407px; width:95px;

35

height:28px; z-index:17"> <div class="wpmd"> <div><font face="Tahoma" class="ws11"><B><a href="galerie foto.html" title="">Galerie Foto</a></B></font></div> </div></div> <div id="g_image1" style="position:absolute; overflow:hidden; left:4px; top:199px; width:205px; height:181px; z-index:18"><img src="images/pestecap-transparent.jpg" alt="" title="" border=0 width=205 height=181></div> <div id="g_slideshow1" style="position:absolute; overflow:hidden; left:0px; top:460px; width:217px; height:223px; z-index:19"> <script type="text/javascript"> AC_RunFlashContent('width','217','height','223','qua lity','high','autoplay','true','loop','true','wmode ','opaque','FlashVars','bcastr_xml_url=images/slide show3119037.xml&AutoPlayTime=5','codebase','http:// download.macromedia.com/pub/shockwave/cabs/flash/sw flash.cab','pluginspage','http://www.macromedia.com /go/getflashplayer','src','images/bcastr31.swf'); </script> <noscript> <object width=217 height=223 classid="clsid:D27CDB6E-AE6D-11CF-96B8444553540000" codebase="http://download.macromedia.com/pub/shockw ave/cabs/flash/swflash.cab"> <param name="movie" value="images/bcastr31.swf"> <param name="quality" value="high"> <param name="loop" value="true"> <param name="wmode" value="opaque"> <param name="autoplay" value="true"> <param name="FlashVars" value="bcastr_xml_url=images/slideshow3119037.xml&A utoPlayTime=5"> <embed src="images/bcastr31.swf" width=217

36

height=223 quality="high" TYPE="application/xshockwave-flash" wmode="opaque" FlashVars="bcastr_xml_url=images/slideshow3119037.x ml&AutoPlayTime=5" loop="true" autoplay="true" pluginspage="http://www.macromedia.com/go/getflashp layer"></embed> </object> </noscript> </div> </div> </body> </html>

37

1. Introducere - Cte ceva despre HTML Hypertext Markup Lamguage este un limbaj de marcare. Fiind un limbaj de marcare, HTML nu utilizeaz instruciuni sau comenzi, ci etichete, acestea fiind numite i balize, elemente sau tag-uri. 2. Despre formatarea paginii Formatarea unui document de tip text este de fapt organizarea respectivului fiier. Formatarea se poate face pe 2 nivele: a) Formatarea la nivel de document: - formatul paginii (A4,A5,A3); - marginile paginii; - aezarea n pagin (pe lungime sau lime); b) Formatarea la nivel de paragraf: - alinierea unui paragraf; - spaiul dintre 2 paragrafe; - spaiul dintre liniile unui paragraf; c) Formatarea la nivel de caracter: - tipul caracterului; - dimensiunea caracterului; - spaiul dintre caractere; Pentru a putea realiza aceste formatri ntr-o pagin web trebuie introdus un tag specific fiecrei formatri dorite. Orice document HTML ncepe cu marcajul <HTML> i se termin cu marcajul </HTML> Acest marcaj comunic interpretorului HTML (browser-ului) c documentul este deschis i formatat n limbajul HTML. * Pentru a scrie i formata un document HTML se pot folosi mai multe editoare cum ar fi: CoffeCup, Dreamweaver, Frontpage, Notepad. Cele mai importante marcaje din cadrul unui document HMTL sunt: <HEAD> Titlul paginii </HEAD> <BODY> ...... </BODY>
38

Poate fi folosit cu paramentrul: < BODY BGCOLOR="BLUE"> - culoarea de fundal a paginii va fi albastr Marcajul <BR> (break row) ajut la trecerea pe urmtorul rnd. Marcajul <P> ... </P> (paragraf) este folosit pentru a alinia o anumit bucat de text. Se folosete neaprat cu parametrul <align="left/right/center/justify"> care aliniaz textul la stnga/dreapta/centru/justificat. Formatarea la nivel de caracter se face utilizd marcajul <FONT> ...</FONT> Se poate utiliza mpreun cu parametrii: <font="titlul fontului"> alege fontul cu care va fi scris textul <color="blue"> alege culoarea textului <size= "-1...7"> sau <size="+n"> unde n poate lua valori de la 1 la 7, <size="-1"> 3. Culorile n html Culoarea poate fi dat prin denumirea n limba englez sau printr-un cod. Tabel culori HTML:

39

40

* Toate aceste culori trebuie precedate de semnul # . 4. Tipuri de afiare <B> .... </B> (bold) - pentru scris aldin (ngroat) <I> .... </I> (italic) - pentru scris italic (nclinat) <U> ....</U> (underline) - pentru scris subliniat 5. Nivele de titluri: <Hn> Titlu </Hn> n poate lua valori de la 1 pn la 6 (unde H1 este titlul cel mai mare) 6. Linii de determinare: Marcajul <HR>...</HR> (horizontal ruller) are ca efect trasarea unei linii orizontale (linie de delimitare). Se folosete mpreun cu marcajele: <size="valoare"> mrimea liniei n procente (%) <width="valoare"> grosimea liniei <color="blue"> culoarea liniei de delimitare <align="left/right/center"> alinierea liniei la stnga/dreapta/center <noshade> scoate umbra liniei 7. Comentarii: Comentariile sunt texte ncadrate n <!-- Comentariu --> i au rolul de a face un document HTML mai uor de neles prin plasarea unor explicaii. Comentariile sunt asemntoare cu cele din Pascal. 8. Inserarea imaginilor: Marcaj: <img src="nume.jpg"> Se folosete cu parametrii: <hight="valoare"> - nlimea imaginii <width="valoare"> - limea imaginii <alt="text"> - n caz c imaginea nu poate fi afiat de browser se va afia textul din alt (alternate text) <align="left/right/center"> - aliniaz imaginea la stnga/dreapta/centru <hspace="valoare"> - spaiu pe orizontal n jurul imaginii <uspace="valoare"> - spaiu pe vertical n jurul imaginii <border="valoare"> - chenar imagine
41

9. Liste n pagini web: Listele sunt o soluie foarte bun pentru a organiza o pagin web. Ele pot fi de 4 tipuri: a. Liste ordonate (numerotate) b. Liste neordonate (nenumerotate) c. Liste de definiii d. Liste mbricate (interclasate) a. Listele ordonate (numerotate) Marcaj: <OL>....</OL> Pentru fiecare element al unei liste trebuie s introducem marcajul <LI>...</LI> Exemplu: <OL> <LI> Iarna </LI> <LI> Primavara</LI> <LI> Vara</LI> <LI> Toamna</LI> </OL> Parametrii: <type="a/A/i/I"> a - pentru ca lista s fie numerotat cu literele mici ale alfabetului A - pentru ca lista s fie numerotat cu literele mari ale alfabetului i - pentru ca lista s fie numerotat cu cifre romane mici I - pentru ca lista s fie numerotat cu litere romane mari Dac nu va fi introdus parametrul type lista va fi numerotat automat cu cifre arabe, ncepnd cu cifra 1. <start="nr pe care l dorim pentru a ncepe lista "> Exemplu: Dac dorim ca lista s nceap cu 3 atunci vom avea: <OL start="3">...</OL> b. Liste neordonate: Marcaj:

42

<UL>....</UL> Numele marcajului vine de la Unorder List. Parametrii: <type="disc/circle/square"> disc = bulinua circle = cercule square = ptrel (tiu, prea multe diminutive ) Exemplu: <UL type="disc"> <LI> Pasul 1</LI> <LI> Pasul 2</LI> <LI> Pasul3</LI> </UL> <UL type="circle"> <LI> Pasul 4</LI> <LI> Pasul 5</LI> <LI> Pasul 6</LI> </UL> <UL type="square"> <LI> Pasul 7</LI> <LI> Pasul 8</LI> <LI> Pasul 9</LI> </UL> c. Liste de definiii: O list de definiii const n general ntr-un termen de definit i un enun al definiiei. Marcaj: <DL>...</DL> Numele marcajului vine de la Definision List. <DT> se folosete pentru a preciza termenul. <DD> se folosete pentru a defini termenul. Exemplu: <DD>
43

<DT> Bold</DT> <DD> Scris ngroat (aldin).</DD> <DT> Italic</DT> <DD> Scris nclinat.</DD> <DT> Underline</DT> <DD> Scris subliniat.</DD> </DD> d. Liste mbricate (interclasate) Listele mbricate sunt o combinaie de liste. Ele nu au un marcaj specific ca i celelalte tipuri de liste, ci se declar precum n exemplul de mai jos: Exemplu: <OL> <LI> Fructe: <UL type="circle"> <LI> Ciree</LI> <LI> Caise</LI> <LI> Viine</LI> </UL></LI> <LI> Legume: <UL type="square"> <LI> Roii</LI> <LI> Castravei</LI> <LI> Morcovi<LI> </UL></LI> </OL> 10. Inserarea unui sunet ntr-o pagina web Pentru a face o pagin web ct mai atractiv, putem aduga o melodie pe fundal-ul paginii. HTML suport melodii n format .wav , .midi , .au . Se pot introduce i alte formate (cum ar fi mp3), dar acestea nu vor fi recunoscute de browser dac nu exist plugin-ul instalat pentru acel format. Marcaj: <EMBED src="nume.wav">...</EMBED> Parametrii:

44

<autoplay=true> - dac vrem ca sunetul s porneasc automat <hidden=true> - dac vrem ca player-ul s nu fie afiat n pagin <loop=true> - dac vrem ca sunetul s se repete <volume="valoare"> - pentru a stabili volumul sunetului <width="valoare"> <height="valoare"> Exemplu: <EMBED autoplay="true" hidden="false" loop="false" src="nume.wav"> Acesta este codul pentru care dorim ca sunetul s porneasc automat, s fie afiat player-ul n pagin i sunetul s nu se repete. 11. Tabele n pagini Web: Tabelele pot fi foarte utile atunci cnd vrem s organizm o pagin web. Marcaje: <TR></TR> (table row) pentru definirea unei linii a tabelului <TH></TH> (table head) pentru definirea antetului tabelului <TD><TD> (table data cell) pentru definirea unei celule a tabelului Exemplu: <HTML> <HEAD> Tabele </HEAD> <BODY> <TABLE> <TR> <TH> Nume </TH> <TH> Prenume </TH> <TH> Media </TH> </TR> <TR> <TD> Chimischez </TD> <TD> Dan </TD> <TD> 8.60 </TD> </TR>
45

</TABLE> </BODY> </HTML> Se va afia: Nume Prenume Media Chimischez Dan 8.60 Parametrii marcajului <TABLE>: -BORDER=valoare : se folosete pentru a denfini un contur al tabelului -BORDERCOLOR=BLUE: se folosete pentru a colora conturul tabelului Exemplu: <TABLE BORDER=6 BORDERCOLOR=RED> -CELLSPACING=valoare : de folosete pentru a defini spaiul lsat ntre celule (n fiind un numr de pixeli) -CELLPADDING=valoare: se folosete pentru a defini spaiul lsat ntre celul i chenarul celulei -WIDTH=valoare/procent: se folosete pentru a stabili limea tabelului -HEIGHT=valoare/procent: se folosete pentru a seta nlimea tabelului Parametrii marcajului <TD>: -COLSPAN=valoare: se folosete pentru a permite unei celule s se extind pe mai multe coloane -ROWSPAN=valoare: se folosete pentru a permite unei celule s se extind pe mai multe rnduri -BGCOLOR=culoare: se folosete pentru a seta culoarea de fundal a unei celule din tabel -ALIGN=left/center/right: se folosete pentru a seta poziia scrisului ntr-o celul -BACKGROUND=fisier_imagine: se folosete pentru a da unei celule fundalul unei imagini

46

Observaie: Parametrii COLSPANi ROWSPAN nu se pot folosi n aceeai celul. 12. Legturi n pagini Web: Un link este o conexiune ctre o alt resurs Web, resurs care poate fi accesat din fereastra browser-ului printr-un simplu click. Marcaj: <A></A> A vine de la anchor (ancor) i trebuie s conin parametru <HREF>. Legturile se pot crea ctre: -adrese URL (Uniform Resource Locator) prin protocoale specifice -fiiere/resurse locale (adic care se afl pe acelai calculator cu pagina curent, eventual n acelai folder) -o zon dintr-un document HTML (folosind parametrul <NAME> Parametrii: <HREF=www.link.ro>: este indispensabil, fr el legatura nu are nici o valoare. <NAME=nume>: se folosete pentru a crea o legatur ctre o zon a documentului <METHODS>: se folosete numai pentru intervenii speciale Exemplu: <HTML> <HEAD> Legatura </HEAD> <BODY> <A HREF=http://www.google.ro> Google RO </A> </BODY> </HTML> Observaie:Pentru a defini o adres corect, aceasta trebuie s fie complet, eventual s conin http:// (Hypertext Transfer Protocol Overview).
47

Sfat: Nu ezitai s utilizai parametrii marcajului <BODY>: -VLINK=color: se folosete pentru a stabili o culoare pentru link-urile vizualizate -LINK=color: se folosete pentru a stabili o culoare pentru link-uri -ALINK=color: se folosete pentru a stabili o culoare pentru link-urile n curs de vizualizare Exemplu: <BODY ALINK=WHITE VLINK=PURPLE LINK=GREEN> </BODY>

48

OS(Sistem de operare); Windows XP/Vista/7 Aplicatii Necesare: Adobe Flash Player Cerinte minime pentru functionarea site-ului la parametrii normali: Rezolutie: 1366x768 pixeli (32 biti) Procesor: 1000GHz Placa video integrata(64 MBs) Memorie: 512 Mb HDD: 40 GB,minim 400 mb/free Broswer: Internet Explorer/Mozzilla Firefox, Google Chrome, Opera

49

Informatiile necesare pentru realizarea proiectului au fost preluate dupa: http://ro.wikipedia.org/ Wikipedia este o enciclopedie online liber (v. mai jos), cu acces gratuit, dezvoltat n mod colaborativ de ctre voluntari. Oricine poate edita orice articol din Wikipedia, n orice moment, total sau numai parial, astfel nct: n Wikipedia gsii i articole i teme foarte actuale; unele articole sunt mai complete i altele mai puin complete, dar cantitatea i calitatea informaiilor din Wikipedia sunt n continu cretere; modul de exprimare din articole nu este foarte unitar, deoarece articolele nu au un autor unic; ocazional n Wikipedia se pot gsi i articole sau informaii contradictorii (care ns desigur c trebuie corectate); iar greelile sau inadvertenele pe care le observai n articolele despre subiecte care v sunt familiare vor continua s existe atta vreme, pn cnd un contribuitor (sau chiar dvs.) va decide s le corecteze. De asemenea, este foarte important faptul c Wikipedia este o enciclopedie liber: licena sub care apar toate materialele din Wikipedia garanteaz faptul c orice contribuie la Wikipedia este fcut n interes public, fr nici o posibilitate ca vreo persoan fizic sau juridic s-i nsueasc aceste materiale. Dac dorii informaii practice suplimentare despre Wikipedia, cel mai bun nceput este pagina de bun venit, care v va ndruma pe cel mai scurt drum ctre articolele obinuite de interes legate de acest proiect. Putei cere informaii suplimentare la info-ro@wikipedia.org.

50