Liceul Teoretic 

“Mihai Eminescu”

LUCRARE PENTRU OBTINEREA ATESTATULUI

IN INFORMATICA

TITLUL LUCRĂRII:
Copacel Gym

COORDONATOR ELEV

Nebert Doris Copaciu Mihai

2023

1
 Cuprins

1. Tema Proiect ......................................................... 3

2. Tehnologii folosite ................................................ 4
3. Structura Proiect ................................................... 12
4. Continut Site ......................................................... 16
5. Bibliografie ........................................................... 20

2
 Tema Proiect

Am ales să creez un site despre o sală de fitness pentru că am fost interesat de

sănătatea și fitness-ul personal. Am observat că din ce în ce mai mulți oameni sunt
preocupați de sănătatea lor și își doresc să aibă un stil de viață activ și echilibrat. De
aceea, am decis să creez un site care să ofere informații utile despre fitness și
sănătate pentru persoanele interesate.

De asemenea, popularitatea crescută a salilor de fitness și numărul mare de oameni

care își doresc să își îmbunătățească starea de sănătate și să-și dezvolte abilitățile
fizice au fost un factor important în alegerea acestei teme. Am dorit să explorez
diferitele opțiuni de antrenament și programe de nutriție pentru a ajuta oamenii să își
atingă obiectivele personale.

In plus, fitness-ul poate avea un impact pozitiv asupra sănătății mentale și

emoționale, precum și asupra relațiilor sociale. Am dorit să abordez aceste aspecte
importante și să ofer o comunitate online pentru oameni care își doresc să se susțină
reciproc în eforturile lor de a-și îmbunătăți sănătatea.

În concluzie, am ales să creez un site despre o sală de fitness datorită interesului

personal pentru fitness și sănătate, popularității crescute a salilor de fitness și a
interesului crescut pentru sănătate și fitness, precum și potențialului de a ajuta
oamenii să își atingă obiectivele personale.

3
 Tehnologii folosite

Html

Unul din primele elemente fundamentale ale WWW ( World Wide Web ) este
HTML ( Hypertext Markup Language ), care descrie formatul primar in care
documentele sunt distribuite si vazute pe Web. Multe din trasaturile lui, cum ar fi
independenta fata de platforma, structurarea formatarii si legaturile hipertext, fac din
el un foarte bun format pentru documentele Internet si Web.

HTML a fost dezvoltat initial de Tim Berners-Lee la CERN in 1989. HTML a fost
vazut ca o posibilitate pentru fizicienii care utilizeaza computere diferite sa schimbe
intre ei informatie utilizind Internetul. Erau prin urmare necesare cateva trasaturi:
independenta de platforma, posibilitati hypertext si structurarea documentelor.
Independenta de platforma inseamna ca un document poate fi afisat in mod
asemanator de computere diferite ( deci cu font, grafica si culori diferite ), lucru vital
pentru o audienta atit de variata.
Hipertext inseamna ca orice cuvant, fraza, imagine sau alt element al documentului
vazut de un utilizator ( client ) poate face referinta la un alt document, ceea ce
usureaza mult navigarea intre multiple documente sau chiar in interiorul aceluiasi
document. Structurarea riguroasa a documentelor permite convertirea acestora dintr-
un format in altul precum si interogarea unor baze de date formate din aceste
documente.
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 /> . Navigatorul web interpretează aceste
etichete afișând rezultatul pe ecran. HTML-ul este un limbaj care nu face deosebire
între litere majuscule și minuscule.
Pagina principala a unui domeniu este fisierul „index.html” respectiv „index.htm”.
4
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>

Componența unui document HTML este:

1. versiunea HTML a documentului

2. zona head cu etichetele  <head> </head>
3. zona body cu etichetele  <body> </body>  sau  <frameset> </frameset>
Versiunea HTML poate fi:

 HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

 HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

 HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

 HTML 5

<!DOCTYPE HTML>

Toate paginile HTML încep și se termină cu etichetele  <html>  și  </html> .

5
Î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, script-uri și legături către fisiere
externe (de exemplu script-uri, fișiere de tip CSS saufavicon).
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>Exemplu</title>
</head>
<body>
Conținut pagină
</body>
</html>

Și în HTML poate fi introdus un comentariu, care bineînțeles nu va fi afișat de

browser:

<!-- comentariu -->

6
CSS
CSS sau Cascading Style Sheets este un standard pentru formatarea elementelor unui
document HTML. Stilurile se pot atașa elementelor HTML prin intermediul unor
fișiere externe sau în cadrul documentului, prin elementul <style> și/sau atributul
style. CSS se poate utiliza și pentru formatarea elementelor XHTML, XML și
SVGL. CSS este una dintre tehnologiile de bază utilizate în procesul de dezvoltare
web, împreună cu HTML și JavaScript.

Exista o legatura foarte stransa intre HTML si CSS, atat de stransa incat este aproape
imposibil sa inveti unul fara celalalt.

Pana acum, am vazut ca HTML-ul este folosit pentru a preciza continutul dintr-o
pagina web. Rolul Css este folosit pentru a stiliza acel continut, pentru a-l face sa
arate cum dorim.

Asadar este un limbaj folosit doar pentru a schimba modul in care este prezentat
continutul, ceea ce este foarte important.

Cum se foloseste CSS?

Asadar regulile css se vor adresa elementelor html, pentru a le stiliza. Pentru a face
aceasta avem 3 metode:

Putem scrie toate regulile intr-un fisier separat si apoi sa il incarcam folosind tagul
<link />
Le putem scrie direct in document, in interiorul unui tag <style>
Le putem scrie direct pe un tag html, drept valoare unui atribut

Selectorii CSS
Asadar vom folosi a doua metoda si anume in tagul de <head>, vom avea un tag de
tip <style>, pe care il inchidem:

<head>
<style>
...
</style>
</head>
7
Tot codul CSS va trebui scris in interiorul tag-ului <style>.

Iar acest cod il putem impartii in doua categorii:

O metoda prin care ne adresam unui element HTML, care se mai numeste si
selectorul si codul propriu-zis de stilizare, scris intre paranteze acolade {}
Ca si selectori putem folosi mai multe metode, dar cele mai importante 3 sunt:
folosind numele elementului HTML, folosind valoarea atributul class a unui element
sau folosind valoarea atributului id.

Schimbare culoarea pentru elementul <h1>.

Asadar selectorul va fi numele elementului, iar codul css va fi intre paranteze:

<head>
<style>
h1 { color: blue; }
</style>
</head>
Ca si selector am scris direct numele elementului h1, fara alte simboluri precum < >
ca in html. Apoi am deschis o paranteza acolada, am scris ce vrem sa schimbam, in
cazul nostru culoarea color, apoi : si apoi valoarea care vrem sa i-o dam blue. La
sfarsit am pus ; si am inchis paranteza acolada.

In HTML daca voiam sa scriem un atribut unui element, scriam numele atributului,
apoi semnul = si apoi valoarea intre ghilimele, de ex atribut="valoare".

In CSS, vom scrie numele a ceea ce vrem sa schibam, apoi doua puncte, noua
valoare si apoi punct si virgula, de ex: ce schimbam:o valoare;. Semnul ; este foarte
important pentru ca delimiteaza regulile intre ele. Pentru acest element putem scrie
mai multe reguli CSS, dar fiecare va trebui separata cu ;.

Mai multe reguli CSS

De exemplu, daca pe langa culoare, vrem sa schimbam si marimea textului vom mai
scrie inca o regula inca continuare:

<head>
<style>
h1 { color: blue; font-size: 35px; }
</style>
8
</head>

Tot ce este cuprins intre paranteleze acolade se refera la elementul <h1>.

Vedem ca fiecare regula este separata prin ;. Prima se refera la culoare color, iar a
doua la marimea font-ului font-size.

Un avantaj al limbajului CSS este ca nu conteaza spatiile goale intre cuvine si nici
daca avem randuri liberere intre reguli. Asta inseamna ca putem scrie cate o regula
pe rand, astfel fiind mai usor de citit:

<head>
<style>
h1 {
color: blue;
font-size: 35px;
}
</style>
</head>

9
Javascript

JavaScript (JS) este un limbaj de programare orientat obiect bazat pe conceptul

prototipurilor. Este folosit mai ales pentru introducerea unor funcționalități în
paginile web, codul JavaScript din aceste pagini fiind rulat de către browser.
Limbajul este binecunoscut pentru folosirea sa în construirea siteurilor web, dar este
folosit și pentru accesul la obiecte încapsulate (embedded objects) în alte aplicații. A
fost dezvoltat inițial de către Brendan Eich de la Netscape Communications
Corporation sub numele de Mocha, apoi LiveScript, și denumit în final JavaScript.

În ciuda numelui și a unor similarități în sintaxă, între JavaScript și limbajul Java nu

există nicio legătură. Ca și Java, JavaScript are o sintaxă apropiată de cea a
limbajului C, dar are mai multe în comun cu limbajul Self decât cu Java.

Cea mai des întâlnită utilizare a JavaScript este în scriptarea paginilor web.
Programatorii web pot îngloba în paginile HTML script-uri pentru diverse activități
cum ar fi verificarea datelor introduse de utilizatori sau crearea de meniuri și alte
efecte animate.

Browserele rețin în memorie o reprezentare a unei pagini web sub forma unui arbore
de obiecte și pun la dispoziție aceste obiecte script-urilor JavaScript, care le pot citi
și manipula. Arborele de obiecte poartă numele de Document Object Model sau
DOM. Există un standard W3C pentru DOM-ul pe care trebuie să îl pună la
dispoziție un browser, ceea ce oferă premiza scrierii de script-uri portabile, care să
funcționeze pe toate browserele. În practică, însă, standardul W3C pentru DOM este
incomplet implementat. Deși tendința browserelor este de a se alinia standardului
W3C, unele din acestea încă prezintă incompatibilități majore, cum este cazul
Internet Explorer.

10
Tagul HTML <script> este folosit pentru a defini un script de client-side
(JavaScript).
Elementul <script> conține fie declarații de script, fie indică un fișier de script extern
prin atributul src.
Utilizările comune ale JavaScript includ manipularea imaginilor, validarea
formularului și modificările dinamice ale conținutului.
Pentru a selecta un element HTML, JavaScript utilizează cel mai des metoda
document.getElementById().

Exemplu inversare string in Javascript.

const reverse = str => [...str].reverse().join(’’);

11
 Structura Proiect
Copacel Gym

│ about-us.html
│ contact.html
│ index.html
│ team.html
│ tree.txt
│
├───css
│ barfiller.css
│ bootstrap.min.css
│ flaticon.css
│ font-awesome.min.css
│ lgo.png
│ magnific-popup.css
│ owl.carousel.min.css
│ slicknav.min.css
│ style.css
│
├───fonts
│ Flaticon.eot
│ Flaticon.svg
│ Flaticon.ttf
│ Flaticon.woff
│ Flaticon.woff2
│ fontawesome-webfont.eot
│ fontawesome-webfont.svg
│ fontawesome-webfont.ttf
│ fontawesome-webfont.woff
│ fontawesome-webfont.woff2
│ FontAwesome.otf
│
├───img
│ │ about-us.jpg
│ │ abt.jpg
│ │ banner-bg.jpg
│ │ breadcrumb-bg.jpg

12
│ │ cardio.jpg
│ │ client.jpg
│ │ copacel.png
│ │ gym.png
│ │ lgo.png
│ │ logo.png
│ │ logo1.png
│ │ s1.jpg
│ │ s2.jpg
│ │ s3.jpg
│ │ s3.webp
│ │ s4.jpg
│ │ s5.jpg
│ │ s6.jpg
│ │ s6.webp
│ │ sidebar-banner.jpg
│ │ str.jpg
│ │
│ ├───blog
│ │ │ blog-1.jpg
│ │ │ blog-2.jpg
│ │ │ blog-3.jpg
│ │ │ blog-4.jpg
│ │ │ blog-5.jpg
│ │ │
│ │ └───details
│ │ blog-profile.jpg
│ │ comment-1.jpg
│ │ comment-2.jpg
│ │ comment-3.jpg
│ │ details-1.jpg
│ │ details-2.jpg
│ │ details-hero.jpg
│ │ quote-left.png
│ │
│ ├───classes
│ │ │ class-1.jpg
│ │ │ class-2.jpg
│ │ │ class-3.jpg
│ │ │ class-4.jpg
│ │ │ class-5.jpg
13
│ │ │
│ │ └───class-details
│ │ class-detailsl.jpg
│ │ trainer-profile.jpg
│ │
│ ├───gallery
│ │ gallery-1.jpg
│ │ gallery-2.jpg
│ │ gallery-3.jpg
│ │ gallery-4.jpg
│ │ gallery-5.jpg
│ │ gallery-6.jpg
│ │ gallery-7.jpg
│ │ gallery-8.jpg
│ │ gallery-9.jpg
│ │
│ ├───hero
│ │ hero-1.jpg
│ │ hero-2.jpg
│ │
│ ├───letest-blog
│ │ latest-1.jpg
│ │ latest-2.jpg
│ │ latest-3.jpg
│ │ latest-4.jpg
│ │ latest-5.jpg
│ │
│ ├───services
│ │ services-1.jpg
│ │ services-2.jpg
│ │ services-3.jpg
│ │ services-4.jpg
│ │
│ ├───team
│ │ team-1.jpg
│ │ team-2.jpg
│ │ team-3.jpg
│ │ team-4.jpg
│ │ team-5.jpg
│ │ team-6.jpg
│ │
14
│ └───testimonial
│ testimonial-1.jpg
│ testimonial-2.jpg
│
├───js
│ bootstrap.min.js
│ jquery-3.3.1.min.js
│ jquery.barfiller.js
│ jquery.magnific-popup.min.js
│ jquery.slicknav.js
│ main.js
│ masonry.pkgd.min.js
│ owl.carousel.min.js
│
└───Source
barfiller-master.zip
bootstrap-4.2.1-dist.zip
flaticon.zip
font-awesome-4.7.0.zip
Magnific-Popup-master.zip
OwlCarousel2-2.3.4.zip
sass.zip
SlickNav-master.zip

15
 Continut Site
Pagina Home

16
Pagina About Us

17
Pagina Suplimente

18
Pagina Contact

19
Bibliografie
http://www.w3schools.com/

https://gymbeam.ro/

https://stackoverflow.com/

https://en.wikipedia.org/wiki/CSS

https://www.w3schools.com/js/DEFAULT.asp

https://developer.mozilla.org/en-US/docs/Web/HTML

https://developer.mozilla.org/en-US/docs/Web/CSS

20