bucur ionut

1. Introducere

Argumentare

Tema proiectului meu ,,România” face parte integrantă din domeniul pregătirii mele profesionale.În cei patru ani de studiu am abordat întreaga gamă de materii de pregătire în domeniu însă cel mai mult ma atras această temă. În cadrul elaborării proiectului meu a trebuit să-mi extind aria de cunostiinţe studiind bibliografia recomandată de coordonator, fapt ce îmi permite o pregătire profesională mai bună, proiectul meu având aplicabilitate în mai multe domenii ale IT-ului.Tema aleasă este structurată în capitole abordate separat ca părţi distincte.Contribuţia personală privind elaborarea proiectului constă în selectarea informaţiilor tehnice/practice şi teoretice specifice specializării, structurarea pe capitole a acestora.În elaborarea lucrării am folosit cunoştinţe tehnice/teoretice asimilate la diferite discipline studiate în anii de liceu: discipline de specialitate şi laboratoare practice.

În partea finală a lucrării am specificat bibliografia utilizată.

Site-ul se adresează patrioților dar și turiștilor. Acest site are ca scop informarea oamenilor cu privire la istoria României, dar si zone turistice care ar merita vizitate.

Programe folosite pentru crearea site-ului

Adobe Dreamweaver

Adobe Dreamweaver (cunoscut anterior ca Macromedia Dreamweaver) este o aplicație de dezvoltare web a companiei americane Adobe Systems, disponibilă atât pentru MS Windows, cât și pentru Apple Mac OS. Versiunile recente includ suport pentru tehnologii web cum ar fi CSS, JavaScript, PHP, Cold Fusion, cât și cadre ASP.

Dreamweaver s-a bucurat de un larg succes încă de la sfârșitul anilor 1990 și momentan deține aproximativ 80 % din piața editoarelor HTML. Produsul poate fi rulat pe variate platforme software: Mac OS, Windows, dar suportă în același 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, făcând astfel posibilă crearea cu ușurință a acestora și de către utilizatorii neexperimentați.

Unii creatori de pagini web critică aceste tipuri de editoare deoarece produc pagini de dimensiuni mult mai mari decât ar fi necesar, ceea ce conduce la o funcționare neperformantă a browserelor web. Această afirmație 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 îmbunătățit în versiunile recente. Cu toate acestea, compania Macromedia a

1

îmbunătățit suportul pentru tehnologia CSS precum și alte modalități de design, fără a fi necesară folosirea designului pe bază de tabel.

Dreamweaver permite folosirea majorității browserelor instalate pe calculatorul utilizatorului, pentru a previzualiza situl web creat. De asemenea conține și câteva utilitare pentru administrarea siturilor, cum ar fi cele pentru a găsi și modifica un paragraf sau o linie de cod, în întregul sit, pe baza oricăror parametri specificați de către utilizator. Cu ajutorul panourilor de stare se poate crea cod JavaScript fără a avea cunoștințe de programare.

Odată cu apariția versiunii MX, Macromedia a încorporat utilitare de generare dinamică a conținutului. 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 afișa conținutul folosind scripturi de genul PHP, ColdFusion, Active Server Pages (ASP) și ASP.NET, fără a avea nevoie de o prealabilă experiență în programare.

Un aspect foarte lăudat 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 descărca și instala, acestea aducând un spor de performanță și funcționalitate îmbunătățită programului. Există o comunitate de dezvoltatori care produc aceste extensii și le publică (atât comercial cât și gratuit) pentru probleme de dezvoltare web, de la simple efecte rollover până la soluții complete de vânzare online, în Internet.

Cu ajutorul acestui program am creat paginile propriu-zise ale site-ului.

Logo Adobe Dreamweaver

2

Adobe Photoshop

Adobe Photoshop este un software folosit pentru editarea imaginilor digitale pe calculator, program produs și distribuit de compania americană Adobe Systems și care se se adresează în special profesioniștilor domeniului.

Adobe Photoshop, așa cum este cunoscut astăzi, este vârful de lance al gamei de produse software pentru editare de imagini digitale, fotografii, grafică pentru tipar, video și Web de pe piață. Photoshop este un program cu o interfață intuitivă și care permite o multitudine extraordinară de modificări necesare în mod curent profesioniștilor și nu numai: editări de luminozitate și contrast, culoare, focalizare, aplicare de efecte pe imagine sau pe zone (selecții), retușare de imagini degradate, număr arbitrar de canale de culoare, suport de canale de culoare pe 8, 16 sau 32 biți, efecte third-party etc. Există situații specifice pentru un profesionist în domeniu când alte pachete duc la rezultate mai rapide, însă pentru prelucrări generale de imagine, întrucât furnizează instrumente solide, la standard industrial, Photoshop este efectiv indispensabil.

Alături de aplicația Photoshop (ajuns la versiunea CS5), este inclusă și aplicația ImageReady, cu un impresionant set de instrumente Web pentru optimizarea și previzualizarea imaginilor (dinamice sau statice), prelucrarea pachetelor de imagini cu ajutorul sistemului droplets-uri (mini-programe de tip drag and drop) și realizarea imaginilor rollover (imagini ce își schimbă aspectul la trecerea cu mouse-ul peste), precum și pentru realizarea de GIF-uri animate.

Cu ajutorul acestui program am realizat imaginile pe care le-am adăugat site-ului.

Logo Adobe Photoshop

3

Specificaţii tehnice

Site-ul a fost creat pe o rezoluţie de 1600x1200 de pixeli cu background, însă containerele site-ului au 960 de pixeli lăţime, ceea ce îi oferă posibilitatea de a fi văzut pe orice PC din ziua de astăzi.

Am testat site-ul pe 4 browsere diferite şi anume pe: Google Chrome, Mozila Firefox, Tourch şi Internet Explore, acesta funcţionând pe toate însă comportându-se cel mai bine pe Google Chrome.

Reţeaua Internet

Termenul Internet provine din împreunarea artificială și parțială a două cuvinte englezești: interconnected = interconectat și network = rețea.

Potrivit unui comunicat de presă al fundației ECDL în 2008 aproximativ 83 % din populația globală nu folosea Internetul .

Potrivit unui studiu întocmit de firma de cercetare on-line InternetWorldStats, în noiembrie 2007 rata de penetrare a Internetului în România a atins nivelul de 31,4 % din totalul populației, estimată la 22,27 milioane de locuitori, iar numărul de conexiuni broadband era de 1.769.300 .

Între 2007 - 2011 numărul conexiunilor la Internet în gospodăriile românești a crescut de la 22 % la 47 %; cifrele corespunzătoare la nivelul Uniunii Europene au fost 54 % și 73 %.

În ziua de astăzi Internetul este susținut și întreținut de o mulțime de firme comerciale. El se bazează pe specificații tehnice foarte detaliate, ca de exemplu pe așa-numitele „protocoale de comunicație”, care descriu toate regulile și protocoalele de transmitere a datelor în această rețea.

Protocoalele fundamentale ale Internetului, care asigură interoperabilitatea între orice două calculatoare sau aparate inteligente care le implementează, sunt Internet Protocol (IP), Transmission Control Protocol (TCP) și User Datagram Protocol (UDP).

Aceste trei protocoale reprezintă însă doar o parte din nivelul de bază al sistemului de protocoale Internet, care mai include și protocoale de control si aplicative, cum ar fi: DNS, PPP, SLIP, ICMP, POP3, IMAP, SMTP, HTTP, HTTPS, SSH, Telnet, FTP, LDAP, SSL, WAP și SIP.

Din cauza multelor fuziuni dintre companiile de telefonie și cele de Internet (Internet Service Providers, prescurtat ISP) au apărut o serie de probleme în sensul că sarcinile acestora nu erau clar delimitate.

4

Rețeaua regională a ISP-ului este formată prin interconectarea ruterelor din diverse orașe pe care le deservește compania. Dacă pachetul este destinat unui calculator-gazdă deservit direct de către rețeaua ISP, pachetul va fi livrat direct lui. Altfel el este predat mai departe operatorului (firmei) care furnizează companiei ISP servicii de comunicare prin backbone-ul rețelei. (In engleză backbone înseamnă in general șira spinării, iar în informatică înseamnă rețeaua de bază pentru interconectarea rețelelor). În partea superioară a acestei ierarhii se găsesc operatorii principali de la nivelul backbone-ului rețelei, companii cum ar fi AT&T sau SPRINT. Aceștia răspund de backbone-uri mari cu mii de rutere conectate prin fibră optică, cu bandă largă de transfer.

Corporațiile și firmele de hosting utilizează așa-numitele „ferme” de servere rapide (= multe servere, situate eventual în aceeași sală sau clădire), conectate direct la backbone. Operatorii încurajază pe clienții lor să folosească această conectare directă prin închirierea de spațiu în rack-uri = dulapuri speciale standardizate pentru echipamentul clientului, care se află în aceeași cameră cu ruterul, conducând la conexiuni scurte și rapide între fermele de servere și backbone-ul rețelei.

Dacă un pachet trimis în backbone este destinat unui ISP sau unei companii deservite de aceeași coloană, el este transmis celui mai apropiat ruter. Pentru a permite pachetelor să treacă dintr-un backbone în altul, acestea sunt conectate în NAP-uri (Network Access Point). În principiu un NAP este o sală plină cu rutere, cel puțin unul pentru fiecare backbone conectat. O rețea locală conectează toate aceste rutere astfel încât pachetele să poată fi retransmise rapid din orice coloană în orice alta. În afară de conectarea în NAP-uri, backbone-urile de dimensiuni mari au numeroase conexiuni directe între ruterele lor, tehnică numită conectare privată (private peering).

Unul dintre paradoxurile Internetului este acela că ISP-urile, care se află în competiție între ele pentru câștigarea de clienți, cooperează în realizarea de conectări private și întreținerea Internetului.

Termeni înrudiți cu „Internet” și „internet”:

Intranet: o rețea particulară cu principii de funcționare similare cu cele ale Internetului, dar cu acces restrâns - de exemplu intranetul sau intraneturile unei companii particulare, la care primesc acces numai angajații companiei. Intraneturile sunt de obicei separate de Internet.

Extranet: un intranet particular al unei companii, la care însă au acces (măcar parțial) și anumite persoane sau grupe externe autorizate din alte companii, ca de exemplu de la firme furnizoare sau firme cliente. Accesul la extraneturi are loc de obicei prin intermediul Internetului.

5

HTML

HyperText Markup Language (HTML) este un limbaj de marcare utilizat pentru crearea paginilor web ce pot fi afișate într-un browser (sau navigator). Scopul HTML este mai degrabă prezentarea informațiilor – paragrafe, fonturi, tabele ș.a.m.d. – decât descrierea semanticii documentului.

Specificațiile HTML sunt dictate de World Wide Web Consortium (W3C).

HTML este prescurtarea de la Hyper Text Mark-up Language si este codul care sta la baza paginilor web. Paginile HTML sunt formate din etichete sau tag-uri și au extensia .html sau .htm .În marea lor majoritate aceste etichete sunt pereche, una de deschidere <eticheta> și alta de închidere </eticheta>, mai există și cazuri în care nu se închid, atunci se folosește <eticheta /> browserul interpretează aceste etichete afișând rezultatul pe ecran. HTML-ul nu este un limbaj case sensitiv (nu face deosebirea între litere mici și mari). Pagina principala a unui domeniu este fisierul index.html respectiv index.htm Această pagină este setată a fi afișată automat la vizitarea unui domeniu. De exemplu la vizitarea domeniului www.nume.ro este afișată pagina www.nume.ro/index.html.

Unele etichete permit utilizarea de atribute care pot avea anumite valori: <eticheta atribut="valoare"> ... </eticheta>

HTML 5

<!DOCTYPE HTML>

Toate paginile HTML încep și se termină cu etichetele <html> și </html>. În interiorul acestor etichete găsim perechile <head>, </head> și <body>, </body>.

head conține titlul paginii între etichetele <title> și </title>, descrieri de tip <meta>, stiluri pentru formatarea textului, scripturi și linkuri către fisiere externe (de exemplu scripturi, fișiere de tip CSS sau favicon).

Etichetele de tip meta conțin cuvinte cheie, descrierea paginii, date despre autor, informații utile motoarelor de căutare și au următorul format: <META NAME="nume" CONTENT="continut">

Exemplu: link către un fisier extern CSS: <link rel="stylesheet" type="text/css" href="css.css">

body găzduiește practic toate etichetele afișate de browser pe ecran.

Exemplu: o pagină HTML cu titlul Exemplu iar conținutul Conținut pagină

<html> <head> <title>Titlu</title> </head> <body> Continut pagina </body> </html> Și în HTML poate fi introdus un comentariu, care bineînțeles nu va fi afișat de browser.

6

Elementele de marcare:

-Marcare structurală. Descrie scopul unui text. De exemplu:

<h1>Fotbal</h1>

Direcționeaza browserul pentru a reda "Fotbal" ca pe cel mai important titlu. Marcarea structurală nu are un anumit stil predefinit, dar cele mai multe browsere web au standardizat modul în care acestea sunt afișate. De exemplu, titlurile importante (h1, h2, etc.) sunt aldine și mai mari decât restul textului.De notat că "h1" este folosit doar o singură dată per pagină deoarece cu el este marcat titlul ei.

-Marcare pentru prezentare. Descrie cum apare un text, indiferent de funcțiile sale. De exemplu:

<strong>îngroșat</strong>

Va afișa textul "îngroșat" cu litere groase, aldine.Notă: Html a inceput în ultimii ani să înceapă să nu mai folosească acest gen de tag-uri pentru că "b" nu dă sens paginii, pe când tag-ul "strong" (adică strong emphasis) dă un înțeles paginii, și mai important, asemenea tag-uri pentru prezentare doar încarcă o pagină cu informații și o fac astfel mai greu de încărcat, iar apoi dacă atașezi un document CSS la pagină, o singură modificare la CSS (de ex: de la "font-weight:italic" la "font-weight:bold" va schimba tot textul selectat, și de exemplu, link-urile vor trece de la text înclinat la text îngroșat, plus că în CSS avem avantajul de a putea preciza cât de mari sau mici să fie literele în pixeli «px», în puncte «pt», etc.)avem același efect ca și cănd am avea de schimbat toate tag-urile de "i" de pe pagină în tag-uri de "b", muncă care chiar și la un website mic este enormă, ce să mai vorbim de unul de genul wikipedia. Așa că dacă vreți să începeți o carieră în html sau un hobby (și să aveți succes) nu folosiți aceste taguri, nu degeaba s-a inventat CSS-ul.

-Marcare pentru hiperlink. Leagă părți ale unui document cu alte documente. De exemplu:

<a href="http://ro.wikipedia.org/">Wikipedia Românească</a>

Va reda Wikipedia românească ca hiperlink către un URL specificat.

-Elemente speciale (widget). Creează obiecte, cum ar fi butoanele și listele.

Doar marcatorii de prezentare (împreună cu foile de stiluri - CSS) determină cum conținutul din interiorul marcatorului va fi prezentat. Ceilalți marcatori spun browserului ce obiecte să redea sau ce funcții să execute.

Tag-uri

Orice fișier html are următoarea structură

<html>

<head>

7

<title>Titlul</title>

</head>

<body>

</body>

</html>

Între tagurile <body></body> se scriu celelalte "instrucțiuni". Tagul <body> permite stabilirea fundalului și a culorii hiperlinkurilor.

<body bgcolor="#ff0000"> - culoarea fundalului paginii devine rosie

<body background="fundal.jpg"> - pune o imagine în fundalul paginii

<body link="#ff0000" alink="#00ff00" vlink="#0000ff"> - stabilește culoarea linkurilor nevizitate și vizitate.

2. Prezentare site

Site-ul meu conţine șase pagini web şi anume: Acasă, Despre, Etimologie, Geografie, Istorie și Video, fiecare pagină având extensia .htm. Peginile au fost create cu ajutorul limbajului HTML dar conţin şi secţiuni de CSS.

Acasă

Această pagină conţine o imagine de background, o imagine pe post de banner, o imagine pe post de siglă, container pentru cele două, un container în care sunt prezentate anumite informaţii despre România, bara de navigare cu link-uri pentru fiecare pagina, și un container pentru copyright.

Acasă

8

Videoclipuri

Această pagina cuprinde aceleşi elemente ca cea de Index având în plus tabelul care conţine 3 linii şi două coloane, iar fiecare celulă a tabelului conţine cate un link către un videoclip de pe Youtube.

Video

Etimologie

Această pagină conţine aceleşi elemente ca şi pagina Acasă doar ca am adăugat și imagini.

Etimologie

Despre

9

Această pagina cuprinde un Form de contact pentru ca vizitatorii să trimită e-mail pe adresa mea personală de e-mail.

Despre

3. Realizarea site-ului

Paginile site-ului au fost realizate după crearea unui template pentru a uşura munca.

Imaginile au fost adăugate din Design view dublu click pe containere după care am selectat imaginea dorită. Un alt mod de inserare a imaginilor folosit a fost opţiunea Point to file şi trasarea unei linii către imaginea dorită.

Pentru pagina Videoclipuri a trebuit să inserez link-ul Youtube din Code view ca în imaginea de mai jos:

Inserarea link-ului Youtube

10

Pentru pagina Despre noi form-ul de contact a fost creat cu ajutorul unui tabel şi adăugarea unui buton de submit tot prin Code view.

Inserarea butonului de submit

4. Codul sursă

Acasă

<!doctype html>

<html>

<head>

<meta charset="utf-8">



<title>Index</title>






<style type="text/css">

<!--

11

body {

font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;

background-color: #42413C;

margin: 0;

padding: 0;

color: #000;

background-image: url(Imagini/613064545.jpg);

}

/* ~~ Element/tag selectors ~~ */

ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */

padding: 0;

margin: 0;

}

h1, h2, h3, h4, h5, h6, p {

margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */

padding-right: 15px;

padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */

text-align: left;

font-size: 100%;

font-weight: bold;

}

a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */

12

border: none;

}

/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */

a:link {

color: #FFF ;

text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */

}

a:visited {

color: #0F0;

text-decoration: underline;

}

a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */

text-decoration: none;

}

/* ~~this fixed width container surrounds the other divs~~ */

.container {

width: 960px;

background-color: #FFF;

margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */

}

/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */

.header {

background-color: url:#000;

}

13

/* ~~ These are the columns for the layout. ~~

1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.

2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.

3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.

4) If you prefer your nav on the right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.

*/

.sidebar1 {

float: left;

width: 180px;

background-color: #00F;

padding-bottom: 10px;

font-size: 75%;

}

.content {

padding: 10px 0;

width: 780px;

float: left;

}

14

/* ~~ This grouped selector gives the lists in the .content area space ~~ */

.content ul, .content ol {

padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */

}

/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */

ul.nav {

list-style: none; /* this removes the list marker */

border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */

margin-bottom: 15px; /* this creates the space between the navigation on the content below */

font-size: x-large;

}

ul.nav li {

border-bottom: 1px solid #666; /* this creates the button separation */

}

ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */

padding: 5px 5px 5px 15px;

display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */

width: 160px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */



}

15

ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */

background-color: #ADB96E;

color: #FFFFFF;

font-family: Verdana, Geneva, sans-serif;

font-size: large;

}

/* ~~ The footer ~~ */

.footer {

padding: 10px 0;

background-color: #CCC49F;

position: relative;/* this gives IE6 hasLayout to properly clear */

clear: both; /* this clear property forces the .container to understand where the columns end and contain them */

}

/* ~~ miscellaneous float/clear classes ~~ */

.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */

float: right;

margin-left: 8px;

}

.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */

float: left;

margin-right: 8px;

}

.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */

16

clear:both;

height:0;

font-size: 1px;

line-height: 0px;

}

.container .sidebar1 div div div {

font-weight: bold;

font-size: 75%;

}

.container .sidebar1 .nav li a {

font-size: large;

}

-->

</style>

<link href="file:///D|/personal/de pastrat 2/desktop vechi/safta 1/Templates/Titlul.css" rel="stylesheet" type="text/css">

</head>

<body>

<div class="container">

<div class="header"><a href="#"></a><img src="Imagini/descărcare (1).jpg" width="259" height="194"><img src="Imagini/de-10-ori-Romania.jpg" width="700" height="195"></div>

<div class="sidebar1">

<ul class="nav">

<li><a href="Acasa.htm">Acasa</a></li>

<li><a href="Etimologie.htm">Etimologie</a></li>

<li><a href="Istorie.htm">Istorie</a></li>

<li><a href="Geografie.htm">Geografie</a></li>

17

<li><a href="Video.htm">Video</a></li>

<li><a href="Despre.htm">Despre</a></li></ul>

</div>

<div class="content">

<blockquote>

<blockquote>

<blockquote>

<blockquote>

<blockquote>

<blockquote>

<blockquote>

<blockquote>

<p><strong>România</strong></p>

</blockquote>

</blockquote>

</blockquote>

</blockquote>

</blockquote>

</blockquote>

</blockquote>

</blockquote>

<p><strong> România</strong> este o țară situată în sud-estul Europei Centrale, pe cursul inferior al Dunării, la nord de peninsula Balcanică și la țărmul nord-vestic al Mării Negre. Pe teritoriul ei este situată aproape toată suprafața Deltei Dunării și partea sudică și centrală a Munților Carpați. Se învecinează cu Bulgaria la sud, Serbia la sud-vest, Ungaria la nord-vest, Ucraina la nord și est și Republica Moldova la est, iar țărmul Mării Negre se găsește la sud-est.</p>

<p>De-a lungul istoriei, diferite porțiuni ale teritoriului de astăzi al României au fost în componența sau sub administrația Daciei, Imperiului Roman, Imperiului Otoman, Imperiului Rus și a celui Austro-Ungar.</p>

18

<p>România a apărut ca stat, condus de Alexandru Ioan Cuza, în 1859, prin unirea dintre Moldova și Țara Românească, păstrând autonomia și statutul de stat tributar față de Imperiul Otoman, pe care-l aveau cele două principate. A fost recunoscută ca țară independentă 19 ani mai târziu. În 1918, Transilvania, Bucovina și Basarabia s-au unit cu România formând România Mare sau România interbelică, care a avut cea mai mare extindere teritorială din istoria României (295.641 km2).</p>

<p>În ajunul celui de-al Doilea Război Mondial (1940), România Mare, sub presiunea Germaniei naziste, a fost nevoită să cedeze teritorii Ungariei (nord-estul Transilvaniei), Bulgariei (Cadrilaterul) și Uniunii Sovietice (Basarabia, Herța și Bucovina de nord). După abolirea regimului lui Antonescu de la 23 august 1944 și întoarcerea armelor contra Puterilor Axei, România s-a alăturat Puterilor Aliate (Anglia, Statele Unite, Franța și Uniunea Sovietică) și a recuperat Transilvania de Nord, fapt definitivat prin Tratatul de pace de la Paris semnat la 10 februarie 1947.</p>

<p>După înlăturarea regimului comunist instalat în România (1989) și după destrămarea Uniunii Sovietice (1991), țara a inițiat o serie de reforme economice și politice. După un deceniu de probleme economice, România a introdus noi reforme economice de ordin general (precum cota unică de impozitare, în 2005) și a aderat la Uniunea Europeană la 1 ianuarie 2007.</p>

<p>România este o republică semi-prezidențială. Este a noua țară după suprafața teritoriului (238 391 km²) și a șaptea după numărul populației (peste 20 milioane locuitori) dintre statele membre ale Uniunii Europene. Capitala țării, București, este și cel mai mare oraș al ei și al șaselea oraș din UE după populație (1,9 milioane locuitori). În 2007, orașul Sibiu a fost ales Capitală Europeană a Culturii. România este membră a unor organizații internaționale, printre care: ONU din 1955, CoE din 1993, Uniunea Europeană de la 1 ianuarie 2007, NATO din 29 martie 2004, OSCE, OIF din 2003, Uniunea Latină din 1980, și unor instituții economice: Grupul Băncii Mondiale, FMI din 1972, BERD din 1991, OCDE.</p>

<blockquote>

<blockquote>

<blockquote>

<blockquote>

<blockquote>

<blockquote>

<p align="center"> </p>

</blockquote>

</blockquote>

19

</blockquote>

</blockquote>

</blockquote>

</blockquote>

<h2> </h2>

</div>

<div class="footer">

<p>Copyright © 2016</p>

</div>

</div>

</body>

</html>

Video

<!doctype html>

<html>

<head>



<title>Video</title>





<!--

body {



20

margin: 0;

padding: 0;

color: #000;


}



padding: 0;

margin: 0;

}

h1, h2, h3, h4, h5, h6, p {




text-align: left;

font-size: 100%;

font-weight: bold;

}


border: none;

}


21

a:link {

color: #FFF ;


}

a:visited {

color: #0F0;


}



}


.container {

width: 960px;



}


.header {


}


1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the

22

div and place a second div within it with no width and the padding necessary for your design. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.




*/

.sidebar1 {

float: left;

width: 180px;



font-size: 75%;

}

.content {

padding: 10px 0;

width: 780px;

float: left;

}



padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other

23

elements on the lists and on the left to create the indention. These may be adjusted as you wish. */

}


ul.nav {




font-size: x-large;

}

ul.nav li {


}







}



color: #FFFFFF;

24


font-size: large;

}


.footer {

padding: 10px 0;




}



float: right;

margin-left: 8px;

}


float: left;

margin-right: 8px;

}


clear:both;

height:0;

font-size: 1px;

line-height: 0px;

25

}


font-weight: bold;

font-size: 75%;

}


font-size: large;

}

-->

</style>


</head>

<body>




<ul class="nav">







</div>


26

<div class="content"><table width="777" height="176">

<tr>

<td width="390"><iframe width="380" height="315" src="https://www.youtube.com/embed/maEhvoC-Svw" frameborder="0" allowfullscreen></iframe>

<script type="text/javascript">

// BeginOAWidget_Instance_2310032: #youtubePlayer

if (!true) {

var vid = document.getElementById("html5Vid");

document.body.removeChild(vid);

var params = {};

params.autoplay = false;

params.loop = false;

params.hd = false;

params.start = 0;

params.border = false;

params.color1 = "#B1B1B1";

params.color2 = "#D8D8D8";

var vid = createFlashPlayer("5P91PPCw2Bs", "480", "385", params);

document.body.appendChild(vid);

}

// EndOAWidget_Instance_2310032

</script></td>

<td width="371"><iframe width="380" height="315" src="https://www.youtube.com/embed/62STK_QkpcQ" frameborder="0" allowfullscreen></iframe></td>

</tr>

<tr>

27

<td><iframe width="380" height="315" src="https://www.youtube.com/embed/X6aeOXqHnlA" frameborder="0" allowfullscreen></iframe></td>

<td><iframe width="380" height="315" src="https://www.youtube.com/embed/Y42KMc7Oxrw" frameborder="0" allowfullscreen></iframe></td>

</tr>

<tr>

<td><iframe width="380" height="315" src="https://www.youtube.com/embed/7nKjfcB2smg" frameborder="0" allowfullscreen></iframe></td>

<td><iframe width="380" height="315" src="https://www.youtube.com/embed/w6aYBxPmNmo" frameborder="0" allowfullscreen></iframe></td>

</tr>

</table></p>

<p> </p>

<p> </p>

<p> </p>

<blockquote>

<blockquote> </blockquote>

</blockquote>

<p><br>

</p>

<blockquote>

<blockquote>

<blockquote>

<blockquote>

<blockquote>

<blockquote> </blockquote>

28

</blockquote>

</blockquote>

</blockquote>

</blockquote>

</blockquote>

<h2> </h2>






</body>

</html>

Despre

<!doctype html>

<html>

<head>



<title>Despre</title>





<!--

body {


29


margin: 0;

padding: 0;

color: #000;


}



padding: 0;

margin: 0;

}

h1, h2, h3, h4, h5, h6, p {




text-align: left;

font-size: 100%;

font-weight: bold;

}


border: none;

}

30


a:link {

color: #FFF ;


}

a:visited {

color: #0F0;


}



}


.container {

width: 960px;



}


.header {


}


31





*/

.sidebar1 {

float: left;

width: 180px;



font-size: 75%;

}

.content {

padding: 10px 0;

width: 780px;

float: left;

}


32



}


ul.nav {




font-size: x-large;

}

ul.nav li {


}







}

33



color: #FFFFFF;


font-size: large;

}


.footer {

padding: 10px 0;




}



float: right;

margin-left: 8px;

}


float: left;

margin-right: 8px;

}


34

clear:both;

height:0;

font-size: 1px;

line-height: 0px;

}


font-weight: bold;

font-size: 75%;

}


font-size: large;

}

-->

</style>


</head>

<body>


<div class="header"><a href="#"></a><img src="Imagini/descărcare (1).jpg" width="259" height="194"><img src="Imagini/de-10-ori-Romania.jpg" width="700" height="195"></div>


<ul class="nav">






35


</div>


<p>Nume: Bucur</p>

<p>Prenume: Andrei-Ionuț</p>

<p> Clasa: a XII-a A</p>

<p> Profesor: Andreescu Lucia</p>

<p>Școală: Colegiul Național "Vladimir Streinu"</p>

<p>Județul: Dâmbovița</p>

<p>Oraș: Găești</p>

<p> </p>

<p>Pentru sugestii și informații vă rugam completați formularul de mai jos.</p>

<p align="center">

<p align="center">

<p align="center"><img src="Imagini/cooltext1449149401.png" width="263" height="68">

<form name="form1" method="get" action="mailto:"[email protected]">

<table width="539" height="181" border="0">

<tr>

<td width="59" height="29"> </td>

<td width="101">Nume:</td>

<td width="258"><input type="text" name="name3" id="name3"></td>

</tr>

<tr>

<td> </td>

<td>E-mail:</td>

<td><input type="text" name="email2" id="email2"></td>

36

</tr>

<tr>

<td> </td>

<td>Subiect:</td>

<td><input type="text" name="subiect2" id="subiect2"></td>

</tr>

<tr>

<td height="51"> </td>

<td><label for="comentariu3">Comentariu:</label></td>

<td><textarea name="comentariu" cols="40" rows="5" id="comentariu3"></textarea></td>

</tr>

<tr>

<td> </td>

<td> </td>

<td><input type="submit" name="submit" id="submit" value="Submit"></td>

</tr>

</table>

</form></p></p>

<p> </p>

<blockquote>

<blockquote>

<blockquote>

<blockquote>

<blockquote>

<blockquote>


37

</blockquote>

</blockquote>

</blockquote>

</blockquote>

</blockquote>

</blockquote>

<h2> </h2>






</body>

</html>

Etimologie

<!doctype html>

<html>

<head>



<title>Etimologie</title>





<!--

body {

38



margin: 0;

padding: 0;

color: #000;


}



padding: 0;

margin: 0;

}

h1, h2, h3, h4, h5, h6, p {




text-align: left;

font-size: 100%;

font-weight: bold;

}


border: none;

39

}

* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */

a:link {

color: #FFF ;


}

a:visited {

color: #0F0;


}



}


.container {

width: 960px;



}


.header {


}


40





*/

.sidebar1 {

float: left;

width: 180px;



font-size: 75%;

}

.content {

padding: 10px 0;

width: 780px;

float: left;

}


41



}


ul.nav {




font-size: x-large;

}

ul.nav li {


}







}

42



color: #FFFFFF;


font-size: large;

}


.footer {

padding: 10px 0;




}



float: right;

margin-left: 8px;

}


float: left;

margin-right: 8px;

}


43

clear:both;

height:0;

font-size: 1px;

line-height: 0px;

}


font-weight: bold;

font-size: 75%;

}


font-size: large;

}

-->

</style>


</head>

<body>




<ul class="nav">





44



</div>


<blockquote>

<blockquote>

<blockquote>

<blockquote>

<blockquote>

<blockquote>

<blockquote>

<blockquote>

<h2><span id="Etimologie">Etimologie</span></h2>

</blockquote>

</blockquote>

</blockquote>

</blockquote>

</blockquote>

</blockquote>

</blockquote>

</blockquote>

<p>Numele de &bdquo;România” provine de la &bdquo;român”, cuvânt derivat din latinescul romanus.</p>

<p><img src="Imagini/Scrisoarea_lui_Neacsu.jpg" width="481" height="323"></p>

<p>Cel mai vechi indiciu referitor la existența numelui de &bdquo;român” ar putea fi conținut de Cântecul Nibelungilor din secolul al XIII-lea: &bdquo;Ducele Ramunch din țara Valahilor/cu șapte sute de luptători aleargă în întâmpinarea ei/ca păsările sălbatice, îi vedeai galopând”. Ramunch ar putea fi o transliterație a numelui

45

&bdquo;Român” reprezentând în acest context un conducător simbolic al românilor.<br>

Cele mai vechi atestări documentare ale termenului de &bdquo;rumân/român” cunoscute în mod cert sunt conținute în relatări, jurnale și rapoarte de călătorie redactate de umaniști renascentiști din secolul al XVI-lea care, fiind în majoritate trimiși ai Sfântului Scaun, au călătorit în Țara Românească, Moldova și Transilvania. Astfel, Tranquillo Andronico notează în 1534, că valahii &bdquo;se numesc romani”. Francesco della Valle scrie în 1532 că valahii &bdquo;se denumesc romani în limba lor”. Mai departe, el citează chiar și o scurtă expresie românească: &bdquo;Sti rominest?”. După o călătorie prin Țara Românească, Moldova și Transilvania, Ferrante Capecci relatează prin 1575 că locuitorii acestor provincii se numesc pe ei înșiși &bdquo;români” (romanesci). Pierre Lescalopier scrie în 1574 că cei care locuiesc în Moldova, Țara Românească și cea mai mare parte a Transilvaniei, &bdquo;se consideră adevărați urmași ai romanilor și-și numesc limba «românește», adică romana”.</p>

<p>Mărturii suplimentare despre endonimul de &bdquo;rumân/român” furnizează și autori care au venit în mod prelungit în contact direct cu românii. Astfel, umanistul sas Johann Lebel relatează în 1542 că &bdquo;românii […] se numesc pe ei înșiși «Romuini»”. Istoricul polonez Orichovius (Stanisław Orzechowski) scrie în 1554 că românii &bdquo;se numesc pe limba lor romini după romani, iar pe limba noastră (poloneză) sunt numiți valahi, după italieni”, în timp ce primatul și diplomatul ungar Anton Verancsics scrie în 1570 că &bdquo;românii se numesc romani”, iar eruditul maghiar transilvan Martinus Szent-Ivany citează în 1699 expresii românești ca: &bdquo;Sie noi sentem Rumeni” și &bdquo;Noi sentem di sange Rumena”.</p>

<p><img src="Imagini/1024px-Rumânia_văzută_de_Cezar_Bolliac.jpg" width="680" height="457"></p>

<p>Cel mai vechi indiciu cunoscut asupra unei denumiri geografice cu mențiunea &bdquo;rumânesc” este conținută de unele versiuni ale operei Getica de Iordanes: &bdquo;... Sclavini a civitate nova et Sclavino Rumunense et lacu qui appellantur Mursianus...”. Denumirea Rumunense constituie o transliterație latinizantă a unei pronunții slave pentru &bdquo;rumânesc”. Deși mențiunea Sclavino Rumunense s-a dovedit a fi apocrifă, ea fiind o interpolare ulterioară în textul lui Iordanes, relevanța ei istorică rămâne considerabilă, interpolarea neputând fi mai târzie de secolele al X-lea–al XI-lea.<br>

Cea mai veche atestare documentară cunoscută a numelui de țară este Scrisoarea lui Neacșu din 1521, ce conține mențiunea cěra rumŭněskŭ (Țeara Rumânească).</p>

<p>Miron Costin insistă asupra denumirii de &bdquo;român, adică roman” ce o poartă românii din Principatele Române. La fel, Constantin Cantacuzino explică pe larg în Istoria Țării Rumânești originile și semnificația denumirii de &bdquo;român, românesc” dată Țărilor Române. Dimitrie Cantemir denumește în mod sistematic toate cele trei Principate locuite de români ca &bdquo;Țări Românești”. Termenul de

46

&bdquo;România” în accepțiunea sa modernă este atestat documentar în al doilea deceniu al secolului al XIX-lea.</p>

<p>Până în secolul al XIX-lea au coexistat pentru spațiul dintre Nistru și Tisa denumirile de &bdquo;Rumânia” și &bdquo;România”, precum și endonimul &bdquo;rumâni” alături de &bdquo;români”, forma scrisă cu &bdquo;u” fiind predominantă. Din termenul &bdquo;rumân” s-a format la finele secolului XVIII exonimul modern a poporului român și a statului român în cazul principalelor limbi europene: &bdquo;Rumänen/Rumänien” (germană), &bdquo;Roumains/Roumanie” (franceză), &bdquo;Rumanians/Rumania” (denumirea învechită din engleză), &bdquo;Rumuni/Rumunija” (în sârbă; totuși, în cazul românilor timoceni s-a păstrat exonimul de &bdquo;vlahi”, vechiul exonim al tuturor românilor, până în ziua de azi, chiar dacă se autodefinesc în limba maternă drept &bdquo;rumâni”) etc. În ultimele decenii, în mai multe limbi s-a trecut la înlocuirea formei care derivă din &bdquo;rumân” în cea care derivă din &bdquo;român”. Astfel, în limba engleză forma &bdquo;Rumania” a fost în locuită cu &bdquo;Romania”. În limba italiană denumirea &bdquo;Rumania” a fost înlocuită cu &bdquo;Romania”, iar în limba portugheză se folosesc formele &bdquo;Romenia” (pentru a desemna statul român) și &bdquo;Romeno” pentru a desemna poporul român.</p>

<blockquote>

<blockquote>

<blockquote>

<blockquote>

<blockquote>

<blockquote>

<blockquote>

<blockquote>

<p> </p>

</blockquote>

</blockquote>

</blockquote>

</blockquote>

</blockquote>

</blockquote>

47

</blockquote>

</blockquote>

<blockquote>

<blockquote>

<blockquote>

<blockquote>

<blockquote>

<blockquote>


</blockquote>

</blockquote>

</blockquote>

</blockquote>

</blockquote>

</blockquote>

<h2> </h2>






</body>

</html>

48

Bibliografie

1) http://ro.wikipedia.org/wiki/Adobe_Dreamweaver 2) http://ro.wikipedia.org/wiki/Adobe_Photoshop 3) Crearea site-urilor Web cu Adobe Dreamweaver CS4. Modelarea aplicaţiilor Web cu

UML2. Exemple, aplicaţii, studii de caz-Liviu Dumitraşcu(coordonator), Stelian Guţu, Titus Slavici, Liviu Ioniţă, Gabriela Moise, Zoltan Borsos, Alin Mnerie

49

http://ro.wikipedia.org/wiki/Adobe_Photoshop

http://ro.wikipedia.org/wiki/Adobe_Dreamweaver

bucur ionut

Documents