1.

Introducere
Argumentare
Tema proiectului meu ,,Romnia face parte integrant din domeniul pregtirii mele
profesionale.n cei patru ani de studiu am abordat ntreaga gam de materii de pregtire n
domeniu ns cel mai mult ma atras aceast tem. n cadrul elaborrii proiectului meu a
trebuit s-mi extind aria de cunostiine studiind bibliografia recomandat de coordonator, fapt
ce mi permite o pregtire profesional mai bun, proiectul meu avnd aplicabilitate n mai
multe domenii ale IT-ului.Tema aleas este structurat n capitole abordate separat ca pri
distincte.Contribuia personal privind elaborarea proiectului const n selectarea informaiilor
tehnice/practice i teoretice specifice specializrii, structurarea pe capitole a acestora.n
elaborarea lucrrii am folosit cunotine tehnice/teoretice asimilate la diferite discipline
studiate n anii de liceu: discipline de specialitate i laboratoare practice.
n partea final a lucrrii am specificat bibliografia utilizat.
Site-ul se adreseaz patrioilor dar i turitilor. Acest site are ca scop informarea
oamenilor cu privire la istoria Romniei, 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 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 fi CSS, 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
1

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 specificai de ctre 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.
Cu ajutorul acestui program am creat paginile propriu-zise ale site-ului.

Logo Adobe Dreamweaver

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 profesionitilor domeniului.
Adobe Photoshop, aa cum este cunoscut astzi, este vrful 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 modificri necesare n mod curent profesionitilor i nu numai:
editri de luminozitate i contrast, culoare, focalizare, aplicare de efecte pe imagine sau pe
zone (selecii), retuare de imagini degradate, numr arbitrar de canale de culoare, suport de
canale de culoare pe 8, 16 sau 32 bii, efecte third-party etc. Exist situaii specifice pentru un
profesionist n domeniu cnd alte pachete duc la rezultate mai rapide, ns pentru prelucrri
generale de imagine, ntruct furnizeaz instrumente solide, la standard industrial, Photoshop
este efectiv indispensabil.
Alturi de aplicaia Photoshop (ajuns la versiunea CS5), este inclus i aplicaia
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 adugat site-ului.

Logo Adobe Photoshop

Specificaii tehnice
Site-ul a fost creat pe o rezoluie de 1600x1200 de pixeli cu background, ns
containerele site-ului au 960 de pixeli lime, ceea ce i ofer posibilitatea de a fi vzut pe
orice PC din ziua de astzi.
Am testat site-ul pe 4 browsere diferite i anume pe: Google Chrome, Mozila Firefox,
Tourch i Internet Explore, acesta funcionnd pe toate ns comportndu-se cel mai bine pe
Google Chrome.

Reeaua Internet
Termenul Internet provine din mpreunarea artificial i parial a dou cuvinte
englezeti: interconnected = interconectat i network = reea.
Potrivit unui comunicat de pres al fundaiei ECDL n 2008 aproximativ 83 % din
populaia global nu folosea Internetul .
Potrivit unui studiu ntocmit de firma de cercetare on-line InternetWorldStats, n
noiembrie 2007 rata de penetrare a Internetului n Romnia a atins nivelul de 31,4 % din
totalul populaiei, estimat la 22,27 milioane de locuitori, iar numrul de conexiuni broadband
era de 1.769.300 .
ntre 2007 - 2011 numrul conexiunilor la Internet n gospodriile romneti a crescut
de la 22 % la 47 %; cifrele corespunztoare la nivelul Uniunii Europene au fost 54 % i 73 %.
n ziua de astzi Internetul este susinut i ntreinut de o mulime de firme comerciale.
El se bazeaz pe specificaii tehnice foarte detaliate, ca de exemplu pe aa-numitele
protocoale de comunicaie, care descriu toate regulile i protocoalele de transmitere a
datelor n aceast reea.
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 aprut o serie de probleme n sensul c sarcinile acestora
nu erau clar delimitate.

Reeaua regional a ISP-ului este format prin interconectarea ruterelor din diverse
orae pe care le deservete compania. Dac pachetul este destinat unui calculator-gazd
deservit direct de ctre reeaua 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 reelei. (In englez backbone nseamn in general ira spinrii, iar n informatic
nseamn reeaua de baz pentru interconectarea reelelor). n partea superioar a acestei
ierarhii se gsesc operatorii principali de la nivelul backbone-ului reelei, companii cum ar fi
AT&T sau SPRINT. Acetia rspund de backbone-uri mari cu mii de rutere conectate prin
fibr optic, cu band larg de transfer.
Corporaiile i firmele de hosting utilizeaz aa-numitele ferme de servere rapide (=
multe servere, situate eventual n aceeai sal sau cldire), conectate direct la backbone.
Operatorii ncurajaz pe clienii lor s foloseasc aceast conectare direct prin nchirierea de
spaiu n rack-uri = dulapuri speciale standardizate pentru echipamentul clientului, care se afl
n aceeai camer cu ruterul, conducnd la conexiuni scurte i rapide ntre fermele de servere
i backbone-ul reelei.
Dac un pachet trimis n backbone este destinat unui ISP sau unei companii deservite
de aceeai 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 puin unul pentru fiecare backbone
conectat. O reea local conecteaz toate aceste rutere astfel nct pachetele s poat fi
retransmise rapid din orice coloan n orice alta. n afar de conectarea n NAP-uri, backboneurile 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 competiie
ntre ele pentru ctigarea de clieni, coopereaz n realizarea de conectri private i
ntreinerea Internetului.
Termeni nrudii cu Internet i internet:
Intranet: o reea particular cu principii de funcionare similare cu cele ale Internetului,
dar cu acces restrns - de exemplu intranetul sau intraneturile unei companii particulare, la
care primesc acces numai angajaii companiei. Intraneturile sunt de obicei separate de
Internet.
Extranet: un intranet particular al unei companii, la care ns au acces (mcar parial)
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.

HTML
HyperText Markup Language (HTML) este un limbaj de marcare utilizat pentru
crearea paginilor web ce pot fi afiate ntr-un browser (sau navigator). Scopul HTML este mai
degrab prezentarea informaiilor paragrafe, fonturi, tabele .a.m.d. dect descrierea
semanticii documentului.
Specificaiile 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 folosete
<eticheta /> browserul interpreteaz aceste etichete afind 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
afiat automat la vizitarea unui domeniu. De exemplu la vizitarea domeniului www.nume.ro
este afiat 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 gsim perechile <head>, </head> i <body>, </body>.
head conine titlul paginii ntre etichetele <title> i </title>, descrieri de tip <meta>,
stiluri pentru formatarea textului, scripturi i linkuri ctre fisiere externe (de exemplu
scripturi, fiiere de tip CSS sau favicon).
Etichetele de tip meta conin cuvinte cheie, descrierea paginii, date despre autor,
informaii utile motoarelor de cutare i au urmtorul format: <META NAME="nume"
CONTENT="continut">
Exemplu: link ctre un fisier extern CSS: <link rel="stylesheet" type="text/css"
href="css.css">
body gzduiete practic toate etichetele afiate de browser pe ecran.
Exemplu: o pagin HTML cu titlul Exemplu iar coninutul Coninut pagin
<html> <head> <title>Titlu</title> </head> <body> Continut pagina </body> </html>
i n HTML poate fi introdus un comentariu, care bineneles nu va fi afiat de browser.

Elementele de marcare:
-Marcare structural. Descrie scopul unui text. De exemplu:
<h1>Fotbal</h1>
Direcioneaza 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 afiate. De exemplu, titlurile importante (h1, h2, etc.) sunt aldine i
mai mari dect 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 funciile sale. De
exemplu:
<strong>ngroat</strong>
Va afia textul "ngroat" 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 cnd
tag-ul "strong" (adic strong emphasis) d un neles paginii, i mai important, asemenea taguri pentru prezentare doar ncarc o pagin cu informaii i o fac astfel mai greu de ncrcat,
iar apoi dac ataezi 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, linkurile vor trece de la text nclinat la text ngroat, plus c n CSS avem avantajul de a putea
preciza ct de mari sau mici s fie literele n pixeli px, n puncte pt, etc.)avem acelai
efect ca i cnd 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. Aa c dac vrei s ncepei o carier n html sau un hobby (i s avei succes) nu
folosii aceste taguri, nu degeaba s-a inventat CSS-ul.
-Marcare pentru hiperlink. Leag pri ale unui document cu alte documente. De exemplu:
<a href="http://ro.wikipedia.org/">Wikipedia Romneasc</a>
Va reda Wikipedia romneasc ca hiperlink ctre 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
coninutul din interiorul marcatorului va fi prezentat. Ceilali marcatori spun browserului ce
obiecte s redea sau ce funcii s execute.
Tag-uri
Orice fiier html are urmtoarea structur
<html>
<head>
7

<title>Titlul</title>
</head>
<body>
</body>
</html>
ntre tagurile <body></body> se scriu celelalte "instruciuni". 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"> - stabilete culoarea linkurilor
nevizitate i vizitate.

2. Prezentare site
Site-ul meu conine ase pagini web i anume: Acas, Despre, Etimologie, Geografie,
Istorie i Video, fiecare pagin avnd extensia .htm. Peginile au fost create cu ajutorul
limbajului HTML dar conin i seciuni de CSS.
Acas
Aceast pagin conine 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 informaii despre Romnia, bara de navigare cu link-uri pentru fiecare pagina, i un
container pentru copyright.

Acas
8

Videoclipuri
Aceast pagina cuprinde acelei elemente ca cea de Index avnd n plus tabelul care
conine 3 linii i dou coloane, iar fiecare celul a tabelului conine cate un link ctre un
videoclip de pe Youtube.

Video
Etimologie
Aceast pagin conine acelei elemente ca i pagina Acas doar ca am adugat i
imagini.

Etimologie
Despre
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 uura munca.
Imaginile au fost adugate din Design view dublu click pe containere dup care am
selectat imaginea dorit. Un alt mod de inserare a imaginilor folosit a fost opiunea Point to
file i trasarea unei linii ctre imaginea dorit.
Pentru pagina Videoclipuri a trebuit s inserez link-ul Youtube din Code view ca n
imaginea de mai jos:

10

Inserarea link-ului Youtube

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

Inserarea butonului de submit

4. Codul surs
Acas
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Index</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<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;
}

12

a img { /* this selector removes the default blue border displayed in some browsers around an
image when it is surrounded by a link */
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 {

13

background-color: url:#000;
}
/* ~~ 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;
14

float: left;
}
/* ~~ 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. */
text-decoration: none;
15

background-color: #00C;
}
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;
}

16

.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 */
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><!-- end .header --><img src="Imagini/descrcare
(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>
17

<li><a href="Istorie.htm">Istorie</a></li>
<li><a href="Geografie.htm">Geografie</a></li>
<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>Romnia</strong></p>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
<p><strong>
Romnia</strong> este o ar situat n sud-estul Europei Centrale, pe
cursul inferior al Dunrii, la nord de peninsula Balcanic i la rmul nord-vestic al Mrii
Negre. Pe teritoriul ei este situat aproape toat suprafaa Deltei Dunrii i partea sudic i
central a Munilor Carpai. 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 Mrii Negre se
gsete la sud-est.</p>
18

<p>De-a lungul istoriei, diferite poriuni ale teritoriului de astzi al Romniei au fost n
componena sau sub administraia Daciei, Imperiului Roman, Imperiului Otoman, Imperiului
Rus i a celui Austro-Ungar.</p>
<p>Romnia a aprut ca stat, condus de Alexandru Ioan Cuza, n 1859, prin unirea dintre
Moldova i ara Romneasc, pstrnd 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 trziu. n 1918, Transilvania, Bucovina i Basarabia s-au unit cu Romnia formnd
Romnia Mare sau Romnia interbelic, care a avut cea mai mare extindere teritorial din
istoria Romniei (295.641 km2).</p>
<p>n ajunul celui de-al Doilea Rzboi Mondial (1940), Romnia Mare, sub presiunea
Germaniei naziste, a fost nevoit s cedeze teritorii Ungariei (nord-estul Transilvaniei),
Bulgariei (Cadrilaterul) i Uniunii Sovietice (Basarabia, Hera i Bucovina de nord). Dup
abolirea regimului lui Antonescu de la 23 august 1944 i ntoarcerea armelor contra Puterilor
Axei, Romnia s-a alturat Puterilor Aliate (Anglia, Statele Unite, Frana 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 nlturarea regimului comunist instalat n Romnia (1989) i dup destrmarea
Uniunii Sovietice (1991), ara a iniiat o serie de reforme economice i politice. Dup un
deceniu de probleme economice, Romnia 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>Romnia este o republic semi-prezidenial. Este a noua ar dup suprafaa
teritoriului (238 391 km) i a aptea dup numrul populaiei (peste 20 milioane locuitori)
dintre statele membre ale Uniunii Europene. Capitala rii, Bucureti, este i cel mai mare
ora al ei i al aselea ora din UE dup populaie (1,9 milioane locuitori). n 2007, oraul
Sibiu a fost ales Capital European a Culturii. Romnia este membr a unor organizaii
internaionale, 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 instituii economice: Grupul Bncii Mondiale, FMI din 1972, BERD din 1991,
OCDE.</p>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<p align="center">&nbsp;</p>
19

</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
<h2>&nbsp;</h2>
<!-- end .content --></div>
<div class="footer">
<p>Copyright &copy; 2016</p>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>
Video
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Video</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
<!-body {
20

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 */
border: none;
21

}
/* ~~ 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;
}
/* ~~ These are the columns for the layout. ~~
22

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;
}
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
23

.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. */
text-decoration: none;
background-color: #00C;
}

24

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

25

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><!-- end .header --><img src="Imagini/descrcare
(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>
26

<li><a href="Video.htm">Video</a></li>
<li><a href="Despre.htm">Despre</a></li></ul>
</div>
<div class="content">
<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>

27

<td width="371"><iframe width="380" height="315"

src="https://www.youtube.com/embed/62STK_QkpcQ" frameborder="0"
allowfullscreen></iframe></td>
</tr>
<tr>
<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>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<blockquote>
<blockquote>&nbsp;

</blockquote>

</blockquote>
<p><br>
</p>
<blockquote>
<blockquote>
28

<blockquote>
<blockquote>
<blockquote>
<blockquote>&nbsp;

</blockquote>

</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
<h2>&nbsp;</h2>
<!-- end .content --></div>
<div class="footer">
<p>Copyright &copy; 2016</p>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>
Despre
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Despre</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
29

<style type="text/css">
<!-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;
}
30

a img { /* this selector removes the default blue border displayed in some browsers around an
image when it is surrounded by a link */
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 {

31

background-color: url:#000;
}
/* ~~ 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;
32

float: left;
}
/* ~~ 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. */
text-decoration: none;
33

background-color: #00C;
}
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;
}

34

.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 */
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/descrcare (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>
35

<li><a href="Geografie.htm">Geografie</a></li>
<li><a href="Video.htm">Video</a></li>
<li><a href="Despre.htm">Despre</a></li></ul>
</div>
<div class="content">
<p>Nume: Bucur</p>
<p>Prenume: Andrei-Ionu</p>
<p> Clasa: a XII-a A</p>
<p> Profesor: Andreescu Lucia</p>
<p>coal: Colegiul Naional &quot;Vladimir Streinu&quot;</p>
<p>Judeul: Dmbovia</p>
<p>Ora: Geti</p>
<p>&nbsp;</p>
<p>Pentru sugestii i informaii v rugam completai 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:"ionutandre2898@yahoo.com">
<table width="539" height="181" border="0">
<tr>
<td width="59" height="29">&nbsp;</td>
<td width="101">Nume:</td>
<td width="258"><input type="text" name="name3" id="name3"></td>
</tr>
<tr>
<td>&nbsp;</td>

36

<td>E-mail:</td>
<td><input type="text" name="email2" id="email2"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>Subiect:</td>
<td><input type="text" name="subiect2" id="subiect2"></td>
</tr>
<tr>
<td height="51">&nbsp;</td>
<td><label for="comentariu3">Comentariu:</label></td>
<td><textarea name="comentariu" cols="40" rows="5"
id="comentariu3"></textarea></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><input type="submit" name="submit" id="submit" value="Submit"></td>
</tr>
</table>
</form></p><!-- end .content --></p>
<p>&nbsp;</p>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>

37

<blockquote>
<p align="center">&nbsp;</p>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
<h2>&nbsp;</h2>
<!-- end .content --></div>
<div class="footer">
<p>Copyright &copy; 2016</p>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>
Etimologie
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Etimologie</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
38

<!-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;
}

39

a img { /* this selector removes the default blue border displayed in some browsers around an
image when it is surrounded by a link */
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 {

40

background-color: url:#000;
}
/* ~~ 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;
41

float: left;
}
/* ~~ 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. */
text-decoration: none;
42

background-color: #00C;
}
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;
}

43

.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 */
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><!-- end .header --><img src="Imagini/descrcare
(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>
44

<li><a href="Istorie.htm">Istorie</a></li>
<li><a href="Geografie.htm">Geografie</a></li>
<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>
<h2><span id="Etimologie">Etimologie</span></h2>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
<p>Numele de &bdquo;Romnia&rdquo; provine de la &bdquo;romn&rdquo;, cuvnt
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 existena numelui de &bdquo;romn&rdquo; ar putea
fi coninut de Cntecul Nibelungilor din secolul al XIII-lea: &bdquo;Ducele Ramunch din
45

ara Valahilor/cu apte sute de lupttori alearg n ntmpinarea ei/ca psrile slbatice, i
vedeai galopnd&rdquo;. Ramunch ar putea fi o transliteraie a numelui
&bdquo;Romn&rdquo; reprezentnd n acest context un conductor simbolic al
romnilor.<br>
Cele mai vechi atestri documentare ale termenului de &bdquo;rumn/romn&rdquo;
cunoscute n mod cert sunt coninute n relatri, jurnale i rapoarte de cltorie redactate de
umaniti renascentiti din secolul al XVI-lea care, fiind n majoritate trimii ai Sfntului
Scaun, au cltorit n ara Romneasc, Moldova i Transilvania. Astfel, Tranquillo
Andronico noteaz n 1534, c valahii &bdquo;se numesc romani&rdquo;. Francesco della
Valle scrie n 1532 c valahii &bdquo;se denumesc romani n limba lor&rdquo;. Mai departe,
el citeaz chiar i o scurt expresie romneasc: &bdquo;Sti rominest?&rdquo;. Dup o
cltorie prin ara Romneasc, Moldova i Transilvania, Ferrante Capecci relateaz prin
1575 c locuitorii acestor provincii se numesc pe ei nii &bdquo;romni&rdquo;
(romanesci). Pierre Lescalopier scrie n 1574 c cei care locuiesc n Moldova, ara
Romneasc i cea mai mare parte a Transilvaniei, &bdquo;se consider adevrai urmai ai
romanilor i-i numesc limba romnete, adic romana&rdquo;.</p>
<p>Mrturii suplimentare despre endonimul de &bdquo;rumn/romn&rdquo; furnizeaz
i autori care au venit n mod prelungit n contact direct cu romnii. Astfel, umanistul sas
Johann Lebel relateaz n 1542 c &bdquo;romnii [] se numesc pe ei nii
Romuini&rdquo;. Istoricul polonez Orichovius (Stanisaw Orzechowski) scrie n 1554 c
romnii &bdquo;se numesc pe limba lor romini dup romani, iar pe limba noastr (polonez)
sunt numii valahi, dup italieni&rdquo;, n timp ce primatul i diplomatul ungar Anton
Verancsics scrie n 1570 c &bdquo;romnii se numesc romani&rdquo;, iar eruditul maghiar
transilvan Martinus Szent-Ivany citeaz n 1699 expresii romneti ca: &bdquo;Sie noi
sentem Rumeni&rdquo; i &bdquo;Noi sentem di sange Rumena&rdquo;.</p>
<p><img src="Imagini/1024px-Rumnia_vzut_de_Cezar_Bolliac.jpg" width="680"
height="457"></p>
<p>Cel mai vechi indiciu cunoscut asupra unei denumiri geografice cu meniunea
&bdquo;rumnesc&rdquo; este coninut de unele versiuni ale operei Getica de Iordanes:
&bdquo;... Sclavini a civitate nova et Sclavino Rumunense et lacu qui appellantur
Mursianus...&rdquo;. Denumirea Rumunense constituie o transliteraie latinizant a unei
pronunii slave pentru &bdquo;rumnesc&rdquo;. Dei meniunea Sclavino Rumunense s-a
dovedit a fi apocrif, ea fiind o interpolare ulterioar n textul lui Iordanes, relevana ei
istoric rmne considerabil, interpolarea neputnd fi mai trzie de secolele al X-leaal XIlea.<br>
Cea mai veche atestare documentar cunoscut a numelui de ar este Scrisoarea lui Neacu
din 1521, ce conine meniunea cra rumnsk (eara Rumneasc).</p>
<p>Miron Costin insist asupra denumirii de &bdquo;romn, adic roman&rdquo; ce o
poart romnii din Principatele Romne. La fel, Constantin Cantacuzino explic pe larg n
Istoria rii Rumneti originile i semnificaia denumirii de &bdquo;romn,
46

romnesc&rdquo; dat rilor Romne. Dimitrie Cantemir denumete n mod sistematic

toate cele trei Principate locuite de romni ca &bdquo;ri Romneti&rdquo;. Termenul de
&bdquo;Romnia&rdquo; n accepiunea sa modern este atestat documentar n al doilea
deceniu al secolului al XIX-lea.</p>
<p>Pn n secolul al XIX-lea au coexistat pentru spaiul dintre Nistru i Tisa denumirile
de &bdquo;Rumnia&rdquo; i &bdquo;Romnia&rdquo;, precum i endonimul
&bdquo;rumni&rdquo; alturi de &bdquo;romni&rdquo;, forma scris cu
&bdquo;u&rdquo; fiind predominant. Din termenul &bdquo;rumn&rdquo; s-a format la
finele secolului XVIII exonimul modern a poporului romn i a statului romn n cazul
principalelor limbi europene: &bdquo;Rumnen/Rumnien&rdquo; (german),
&bdquo;Roumains/Roumanie&rdquo; (francez), &bdquo;Rumanians/Rumania&rdquo;
(denumirea nvechit din englez), &bdquo;Rumuni/Rumunija&rdquo; (n srb; totui, n
cazul romnilor timoceni s-a pstrat exonimul de &bdquo;vlahi&rdquo;, vechiul exonim al
tuturor romnilor, pn n ziua de azi, chiar dac se autodefinesc n limba matern drept
&bdquo;rumni&rdquo;) etc. n ultimele decenii, n mai multe limbi s-a trecut la nlocuirea
formei care deriv din &bdquo;rumn&rdquo; n cea care deriv din &bdquo;romn&rdquo;.
Astfel, n limba englez forma &bdquo;Rumania&rdquo; a fost n locuit cu
&bdquo;Romania&rdquo;. n limba italian denumirea &bdquo;Rumania&rdquo; a fost
nlocuit cu &bdquo;Romania&rdquo;, iar n limba portughez se folosesc formele
&bdquo;Romenia&rdquo; (pentru a desemna statul romn) i &bdquo;Romeno&rdquo;
pentru a desemna poporul romn.</p>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<p>&nbsp;</p>
</blockquote>
</blockquote>
</blockquote>
</blockquote>

47

</blockquote>
</blockquote>
</blockquote>
</blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<p align="center">&nbsp;</p>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
<h2>&nbsp;</h2>
<!-- end .content --></div>
<div class="footer">
<p>Copyright &copy; 2016</p>
<!-- end .footer --></div>
<!-- end .container --></div>
</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 aplicaiilor Web cu
UML2. Exemple, aplicaii, studii de caz-Liviu Dumitracu(coordonator), Stelian Guu,
Titus Slavici, Liviu Ioni, Gabriela Moise, Zoltan Borsos, Alin Mnerie

49