Cuprins

1. Introducere ................................................................. pg.2

2. Generalitati despre limbajul HTML ........................... pg.3-4

3. Cerinte hardware si software ……………………….. pg.5

4. Structura si continutul proiectului …………………... pg 6-23

5. Bibliografie …………………………………………. pg.24

1|Page
1.Introducere

Lucrarea de fata are ca tema prezentarea Termodinamica. Din meniul

principal putem alege :
 Acasa
 Zone turistice
 Galerie
Aplicatia a fost realizata in cea mai mare parte in limbajul HTML, prin
programare direct in cod sursa (scrierea liniilor de comanda).

2|Page
2.Generalitati despre limbajul HTML

Pana in anul 1990 accesarea informatiilor de pe INTERNET era

foarte dificila si reteaua nu era folosita decat de un numar restrans de persoane, in
general oameni de stiinta. 
Fizicianul Tim Berners-Lee a devenit celebru deoarece a inventat ‘link’-
urile hypertext.Aceasta idee a dus la dezvoltarea unui limbaj simplu care s-a
impus pe piata mondiala.Acest limbaj a fost numit Hypertext Markup Language,
prescurtat, HTML.
Dar ce este de fapt limbajul HTML ? HTML-ul este un set de
conventii pentru marcarea portiunilor de document astfel incat fiecare portiune sa
apara cu format distinct atunci cand documentul este accesat de un program de
analiza sintactica (parser). HTML este limbajul de marcare ce stabileste aspectul
documentelor WWW, iar prin intermediul browserelor se poate vedea documentul
gata formatat.
HTML este de fapt un subset al standardului SGML (Standard
Generalized Markup Language) si include capacitati care permit autorilor sa
insereze hiperlegaturi care afiseaza alte documente HTML cand se executa clic pe
ele.
Notiunea de hypertext inseamna text pastrat in format electronic cu link-uri
intre pagini.
Pana in 1993, in jur de 100 de calculatoare erau echipate pentru a
gazdui pagini HTML;aceste pagini interconectate au fost denumite <WORLD
WIDE WEB>
Nu mult dupa aceea au inceput sa fie scrise primele browsere Web cu
ajutorul carora puteau fi vizualizate pagini web care contineau text si imagini.
In functie de versiunea HTML folosita, paginile WEB sunt grupate in trei
generatii:
- paginile din prima generatie, care foloseau versiunea 1.0, in care se edita
text si 1-2 imagini.
- paginile din a doua generatie, proiectate cu HTML 2.0, care puteau contine
si un fundal, permiteau aranjarea datelor in tabele si posibilitatea de a
comanda un produs prin intermediul Internetului.
- paginile din a treia generatie care pot contine culori diferite, secvente
animate, sunete, etc.

3|Page
 In prezent a aparut a patra versiune a limbajului HTML.
Documentele HTML sunt exclusiv de tip text (ASCII); ele pot fi editate
direct, prin comenzi specifice sistemului de operare folosit. In WINDOWS, se
poate utiliza NOTEPAD,WORDPAD sau orice alt editor de texte.
Vizualizarea acestor documente se face cu ajutorul unor aplicatii speciale,
numite BROWSER-e, care nu depind de tipul sistemului de calcul folosit, ceea ce
permite independenta fisierelor de tip HTML fata de platforma de lucru.
Pentru descrierea documentelor WEB se utilizeaza anumite etichete
(tag-uri) specifice pentru fiecare element descris; acestea stabilesc structura si
aspectul documentului final.
Tag-urile sunt recunoscute de browser-e care stabilesc apoi modul de
formatare a documentului. Pentru delimitarea (separarea ) tag-urilor se folosesc
delimitatorii “<” si “>” care incadreaza fiecare eticheta.
Forma generala: <tag> pentru a marca inceputul unui tag si </tag> pentru
a marca sfarsitul unui tag.
In HTML nu se face distinctie intre majuscule si minuscule;
Unele elemente HTML admit atribute care specifica informatii
suplimentare despre continutul elementului. Atributele elementului se precizeaza in
cadrul etichetei de inceput si se aplica doar elementului curent.
Ex. Daca se doreste includerea unei imagini in document, se va specifica
drept atribut adresa fisierului care contine imaginea si eventual alte informatii
despre felul in care se va face includerea.
Avantajul major al unui browser este acela ca poate suporta si alte limbaje,
ca Java sau Basic, ce completeaza utilitatea limbajului HTML.

4|Page
3.Cerinte hardware si software

Fiind realizat in HTML, functionarea corecta depinde de foarte putini

factori la nivel hardware.
Configuratia minima necesara :
 procesor la 133MHz
 min. 32 MB RAM (de preferat cel putin 64 MB)
 o placa vide care sa suporte mai mult de 256 de culori (optional
pentru o afisare corecta a detaliilor)

Este necesara o versiune a browser-ului care sa permita recunoasterea

tuturor comenzilor ( testul a fost facut cu Internet Google Chrome ), si de
asemenea este obligatoriu un flash player, sau un « patch » pentru flash.
Conditii de testare: proiectul a fost facut si testat pe un PC Lenovo Intel
Pentium dual core 2600MHz, la 2GB DDRAM, sistem de operare MS Windows
vista.

5|Page
4. Structura si continutul proiectului
Aplicatia a fost realizata in cea mai mare parte in limbajul HTML, prin
programare direct in cod sursa. Scrierea liniilor de comanda s-a facut cu Sublime
Text 3 , vizualizarea codului putandu-se face cu orice editor text (MS Word,
Notepad s.a.).
Structural, prima pagina (index.html) este structurata cu ajutorul div-urilor
si a claselor(class).
In primul rand (table row) este prezentat meniul animat,din care poti alege:
Acasa, Zone turistice, Galerie.

Meniul principal a fost realizat in html si css (cascading style sheet), pentru care s-
a folosit in principal programul de editare ATOM .

6|Page
 1. Acasa - index.html. In aceasta pagina este prezentata o introducere despre
Romania.
2. Zone turistice - examples.html In aceasta pagina sunt prezentate cateva zone
turistice din romania
3. Galerie - page.html In aceasta pagina este prezentata o galerie de imagini cu
tema specifica ,Romania.

Acasa (index.html) in aceasta pagina sunt prezentate informatii despre Romania

iar la sfarsitul paginii este prezentata o poza cu tema specifica.

In partea de sus a site-ului se afla titlul si meniul.

In partea de jos a site-ului se afla footer-ul,in care este prezentat numele celui care
a creat site-ul

7|Page
Zone turistice (examples.html) in aceasta pagina sunt enumerate cateva dintre
zonele turistice si istorice ce dateaza in Romania de ani buni.Fiecare informative
este urmata de o poza reprezentativa.

8|Page
Galerie (page.html) in aceasta pagina este prezentata o galerie de imagini create cu
csss si html.Fiecare poza,selectata se va deschide in partea dreapta supramarita fata
de poza initiala.

9|Page
Codul sursa al paginii ‘index.html’ :

<!DOCTYPE HTML>
<html>
<head>
<title>Romania</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<link rel="stylesheet" type="text/css" href="style/style.css" title="style" />
<meta charset="utf-8">
</head>

<body>
<div id="main">
<div id="header">
<div id="logo">
<div id="logo_text">
<h1><a href="index.html">Romania<span class="logo_colour"> Pas cu
Pas</span></a></h1>
<h2>Cea mai frumoasa tara</h2>
</div>
</div>
<div id="menubar">
<ul id="menu">

10 | P a g e
<li class="selected"><a href="index.html">Acasa</a></li>
<li><a href="examples.html">Zone turistice</a></li>
<li><a href="page.html">Galerie</a></li>
</ul>
</div>
</div>
<div id="site_content">
<div id="content">
<h1>Romania</h1><br>
<p>România este un stat 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.<br>
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.<br>
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).<br>
În ajunul celui de-al Doilea Război Mondial (1940), România Mare, sub presiunea
Germaniei naziste, a cedat teritorii Ungariei (nord-estul Transilvaniei), Bulgariei
(Cadrilaterul) și Uniunii Sovietice (Basarabia, Herța și Bucovina de nord). După
abolirea dictaturii lui Antonescu la 23 august 1944 România s-a retras din alianța
cu Puterile Axei, trecând de partea Puterilor Aliate (Anglia, Statele Unite, Franța și
Uniunea Sovietică). Prin Tratatul de pace de la Paris semnat la 10 februarie 1947,

11 | P a g e
din teritoriile cedate ale fostei Românii Mari a recuperat Transilvania de
Nord.<br>
După înlăturarea regimului comunist instalat în România (1989) și după
destrămarea Uniunii Sovietice (1991), statul 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.<br>
România este o republică semi-prezidențială. Este al nouălea stat după suprafața
teritoriului (238 397 km²) și a șaptea după numărul populației (peste 20 milioane
locuitori)[8] 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, a fost rândul României să desemneze un oraș drept
Capitală Europeană a Culturii, fiind ales Sibiul.[9] 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; și este candidată la aderarea la OCDE.</p>
<br>
<br>
<img src="pho/1.jpg" height="400" width="500">
<br>
<br>
</div>
</div>
<div id="footer">
Copyright &copy; Bîscoveanu Alexandru Gabriel
</div>
</div>
</body>
</html>

12 | P a g e
Codul sursa al paginii ‘examples.html’ :

<!DOCTYPE HTML>
<html>

<head>
<title>Romania</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<link rel="stylesheet" type="text/css" href="style/style.css" title="style" />
<meta charset="utf-8">
</head>

<body>
<div id="main">
<div id="header">
<div id="logo">
<div id="logo_text">
<h1><a href="index.html">Romania<span class="logo_colour"> Pas cu
Pas</span></a></h1>
<h2>Cea mai frumoasa tara</h2>
</div>
</div>
<div id="menubar">
<ul id="menu">

13 | P a g e
 <li ><a href="index.html">Acasa</a></li>
<li class="selected"><a href="examples.html">Zone turistice</a></li>
<li><a href="page.html">Galerie</a></li>
</ul>
</div>
</div>
<div id="site_content">
<div id="content">
<h1>1. Galeria de Artă Tradiţională din Sighişoara</h1>
<p>Art&Crafts este o galerie locală de artă cu produse sută la sută realizate
manual. Sunt două locaţii importante: Galeria 1 este situată la subsolul „House of
the Rock”, în piaţa principală a oraşului, iar Galeria 2 este într-una din cele mai
importante clădiri din Sighişoara, Casa lui Vlad Dracul.</p>
<img src="pho/2.jpg" height="500" width="500">
<h1>2. Cetatea Alba Iulia</h1>
<p>„Niciun alt oraş din Transilvania nu a adunat la un loc atâtea momente
cruciale şi simboluri. Cu mii şi mii de ani de istorie, Alba Iulia reprezintă o oglindă
fermecătoare în care fiecare dintre grupurile etnice din Transilvania îşi pot
descoperi vigoarea şi tradiţiile de altădată. Inima oraşului o reprezintă cetatea Alba
Carolina, cea mai reprezentativă fortăreaţă bastion din România şi sud-estul
Europei”, precizează portalul.</p>
<img src="pho/3.jpg" width="500" height="500">
<h1>3. Castelul Peleş</h1>
<p>„Acest castel, care datează din secolul XIX, a fost construit de regele
Carol I şi este considerat unul din cele mai frumoase castele ale Europei”, scrie
tripadvisor.ro.</p>
<br>
<img src="pho/4.jpg">
<BR>
<br>
<h1>4. Piaţa Mare din Sibiu</h1>

<p>
Piaţa Mare se află în centrul istoric al Sibiului, unde sunt de asemenea monumente
istorice importante, multe dintre ele parte din patrimoniul UNESCO.
</p>
<img src="pho/5.jpg">
</div>

14 | P a g e
 </div>
<div id="footer">
Copyright &copy; Bîscoveanu Alexandru Gabriel
</div>
</div>
</body>
</html>

Codul sursa al paginii ‘pages.html’ :

<!DOCTYPE HTML>
<html>

<head>
<title>Romania</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<link rel="stylesheet" type="text/css" href="style/style.css" title="style" />
<meta charset="utf-8">
</head>

<body>
<div id="main">
<div id="header">
<div id="logo">
<div id="logo_text">
<h1><a href="index.html">Romania<span class="logo_colour"> Pas cu
Pas</span></a></h1>
<h2>Cea mai frumoasa tara</h2>
</div>

15 | P a g e
 </div>
<div id="menubar">
<ul id="menu">
<li ><a href="index.html">Acasa</a></li>
<li><a href="examples.html">Zone turistice</a></li>
<li class="selected"><a href="page.html">Galerie</a></li>
</ul>
</div>
</div>
<div id="site_content">

<dl id="simple-gallery">
<dt tabindex="1"><img src="11.jpg" alt>
<dd><img src="11.jpg" alt>
<dt tabindex="2"><img src="12.jpg" alt>
<dd><img src="12.jpg" alt>
<dt tabindex="2"><img src="13.jpg" alt>
<dd><img src="13.jpg" alt>
<dt tabindex="1"><img src="14.jpg" alt>
<dd><img src="14.jpg" alt>
<dt tabindex="1"><img src="15.jpg" alt>
<dd><img src="15.jpg" alt>
</dl>

</div>
<div id="footer">
Copyright &copy; Bîscoveanu Alexandru Gabriel
</div>
</div>
</body>
</html>

16 | P a g e
Codul sursa al paginii ‘style.css’ :

html
{ height: 100%;}

*
{ margin: 0;
padding: 0;}

body
{ font: normal .80em 'trebuchet ms', arial, sans-serif;
background: #F0EFE2 url(background.png) repeat;
color: #777;}
p
{ padding: 0 0 20px 0;
line-height: 1.7em;}

h1, h2, h3, h4, h5, h6

{ font: normal 175% 'century gothic', arial, sans-serif;
color: #43423F;
margin: 0 0 15px 0;
padding: 15px 0 5px 0;}

17 | P a g e
h2
{ font: normal 175% 'century gothic', arial, sans-serif;
color: #1293EE;}

h4, h5, h6
{ margin: 0;
padding: 0 0 5px 0;
font: normal 120% arial, sans-serif;
color: #1293EE;}

h5, h6
{ font: italic 95% arial, sans-serif;
padding: 0 0 15px 0;
color: #000;}

h6
{ color: #362C20;}

a, a:hover
{ outline: none;
text-decoration: underline;
color: #FD5BFF;}

a:hover
{ text-decoration: none;}

.left
{ float: left;
width: auto;
margin-right: 10px;}

.right
{ float: right;
width: auto;
margin-left: 10px;}

.center
{ display: block;
text-align: center;
margin: 20px auto;}

18 | P a g e
blockquote
{ margin: 20px 0;
padding: 10px 20px 0 20px;
border: 1px solid #E5E5DB;
background: #FFF;}

ul
{ margin: 2px 0 22px 17px;}

ul li
{ list-style-type: circle;
margin: 0 0 6px 0;
padding: 0 0 4px 5px;}

ol
{ margin: 8px 0 22px 20px;}

ol li
{ margin: 0 0 11px 0;}

#main, #logo, #menubar, #site_content, #footer

{ margin-left: auto;
margin-right: auto;}

#header
{ background: #1D1D1D url(header.png) repeat;
height: 240px;}

#logo
{ width: 825px;
position: relative;
height: 168px;}

#logo #logo_text
{ position: absolute;
top: 20px;
left: 0;}

#logo h1, #logo h2

19 | P a g e
{ font: normal 300% 'century gothic', arial, sans-serif;
border-bottom: 0;
text-transform: none;
margin: 0;}

#logo_text h1, #logo_text h1 a, #logo_text h1 a:hover

{ padding: 22px 0 0 0;
color: #FFF;
letter-spacing: 0.1em;
text-decoration: none;}

#logo_text h1 a .logo_colour
{ color: #1293EE;}

#logo_text h2
{ font-size: 100%;
padding: 4px 0 0 0;
color: #DDD;}

#menubar
{ width: 900px;
height: 72px;
padding: 0;
background: #1293EE;}

ul#menu, ul#menu li
{ float: left;
margin: 0;
padding: 0;}

ul#menu li
{ list-style: none;}

ul#menu li a
{ letter-spacing: 0.1em;
font: normal 100% arial, sans-serif;
display: block;
float: left;
height: 37px;
padding: 29px 26px 6px 26px;

20 | P a g e
 text-align: center;
color: #FFF;
text-transform: uppercase;
text-decoration: none;
background: transparent;}

ul#menu li a:hover, ul#menu li.selected a, ul#menu li.selected a:hover

{ color: #FFF;
background: #0D66A5;}

#site_content
{ width: 837px;
overflow: hidden;
margin: 0 auto 0 auto;
padding: 20px 24px 20px 37px;
background: #FFF;}

.sidebar
{ float: right;
width: 190px;
padding: 0 15px 20px 15px;}

.sidebar ul
{ width: 178px;
padding: 4px 0 0 0;
margin: 4px 0 30px 0;}

.sidebar li
{ list-style: none;
padding: 0 0 7px 0; }

.sidebar li a, .sidebar li a:hover

{ padding: 0 0 0 40px;
display: block;
background: transparent url(link.png) no-repeat left center;}

.sidebar li a.selected
{ color: #444;
text-decoration: none;}

21 | P a g e
#content
{ text-align: left;
width: 595px;
padding: 0;}

#content ul
{ margin: 2px 0 22px 0px;}

#content ul li
{ list-style-type: none;
background: url(bullet.png) no-repeat;
margin: 0 0 6px 0;
padding: 0 0 4px 25px;
line-height: 1.5em;}

#footer
{ width: 900px;
font: normal 100% 'lucida sans unicode', arial, sans-serif;
height: 33px;
padding: 24px 0 5px 0;
text-align: center;
background: #1293EE;
color: #FFF;
letter-spacing: 0.1em;}

#colours
{ height: 0px;
text-align: right;
padding: 66px 16px 0px 300px;}
dl#simple-gallery {
position: relative;
background: #222;
font-size: 0;
padding: 3rem;
padding-bottom: 8rem;
}
dl#simple-gallery dt{
width: 12.5%;
min-width: 50px;

22 | P a g e
 cursor: pointer;
}
dl#simple-gallery dt img {
width: 100%;
height: auto;
}
dl#simple-gallery dt:hover+dd, dl#simple-gallery dt:focus+dd {
opacity:1;
}
dl#simple-gallery dd {
position: absolute;
top: 3rem;
left: 22%;
opacity: 0;
transition: .7s opacity;
text-align: center;
font-size: 1.4rem;
font-style: italic;
color: #fff;
padding-left: 0;
width: 40%;
}
dl#simple-gallery dd img{
width: 100%;
height: auto;
box-shadow:0 0 8px rgba(0,0,0,0.3);
display:block;
margin-bottom: 1rem;
}

23 | P a g e
5.Bibliografie  :

https://ro.wikipedia.org/wiki/Rom%C3%A2nia

http://www.gandul.info/magazin/top-15-cele-mai-frumoase-obiective-turistice-din-
romania-recomandate-de-tripadvisor-14502184

https://ro.wikipedia.org/wiki/HyperText_Markup_Language

https://www.google.ro/search?
rlz=1C1GCEA_enRO785RO785&biw=1366&bih=672&tbm=isch&sa=1&ei=kKX
OWq_wMoSiwALhjr-
4DA&q=zone+turistice+romania&oq=zone+turistice+r&gs_l=psy-
ab.3.0.0j0i8i30k1j0i24k1l7.4062.11875.0.12520.16.16.0.0.0.0.148.1289.13j2.15.0..
..0...1c.1.64.psy-ab..1.15.1286...0i67k1.0.0Qm2I1nJuwU#imgrc=aXAeet-
TlB89hM:

https://www.google.ro/search?
rlz=1C1GCEA_enRO785RO785&biw=1366&bih=672&tbm=isch&sa=1&ei=kKX
OWq_wMoSiwALhjr-
4DA&q=zone+turistice+romania&oq=zone+turistice+r&gs_l=psy-
ab.3.0.0j0i8i30k1j0i24k1l7.4062.11875.0.12520.16.16.0.0.0.0.148.1289.13j2.15.0..
..0...1c.1.64.psy-
ab..1.15.1286...0i67k1.0.0Qm2I1nJuwU#imgrc=taRV28BIEdcw4M:

24 | P a g e