Atestat Informatica

Colegiul Naţional “Gheorghe Şincai” Baia Mare
Lucrare pentru obţinerea

atestatului profesional la informatică
Candidat: Profesor îndrumător:

Stenczel Mark Belbe Maria
An școlar 2023-2024
Cuprins
Introducere………………………………………………………….…………3
Prezentarea paginii web……………………………………………………...4
Pagina principala …………………………..…………..………..4
Sectiunea“Despre mine”...........................................................5
Portofoliu…………………………………………………………6
Sectiunea “Booking”..................................................................7
Sectiunea “Contacteaza-ma”....................................................7
Limbaje de programare folosite………………………….………………….8
Codul sursa al programului…………………………….…………………….9
HTML………………………………………….…………………10
Pagina principala………………………………………...10
Sectiunea “Despre mine”.............................................14
Portofoliu…………………...……………………………15
Sectiunea “Booking”......................................................17
Sectiunea “Contacteaza-ma”.........................................20
CSS………………………………………………………………21
JS…………………………………………………………………22
Bibliografie…………………………………………………………………….25
2
1.Introducere
Prin intermediul acestui site web, îmi propun să ofer vizitatorilor o fereastră deschisă
către universul meu creativ în domeniul fotografiei. Este o platformă digitală menită să
reunească o colecție diversă și vastă de imagini, fiecare captură reflectând nu doar momente, ci
și emoții, povești și perspective individuale.
Fotografia pentru mine nu este doar un simplu act de a apăsa un buton; este o formă de
artă prin care încerc să transmit și să împărtășesc frumusețea și complexitatea lumii
înconjurătoare. În secțiunea Portofoliu, veți descoperi un amalgam de genuri fotografice, de la
peisaje pitorești și natură în sălbăticie până la portrete captivante și momente efemere surprinse
în stradă.
Fiecare imagine expusă aici este rezultatul unei călătorii fascinante în lumea fotografiei,
reflectând diversitatea stilurilor, tehnicii și subiectelor abordate. Fotografia este pentru mine un
limbaj universal, iar fiecare fotografie este o poveste ce merită spusă. Fiecare cadru este o
explorare a frumuseții în cele mai neașteptate locuri și situații, evidențiind frumusețea în obișnuit
și subliniind extraordinarul din cotidian.
În esență, acest site reprezintă un efort constant de a împărtăși bucuria și pasiunea mea
pentru fotografia de calitate, oferind vizitatorilor o experiență vizuală captivantă și provocatoare.
Prin intermediul acestui portofoliu digital, sper să împărtășesc nu doar imagini, ci și o
perspectivă unică și o incursiune în lumea minunată a artei fotografice.
3
2.Prezentarea paginii web
1.Pagina Principala
Am lucrat cu grijă la fiecare aspect al acestei pagini pentru a vă oferi o experiență

completă și captivantă. Din prima secundă, meniul de navigare simplu și intuitiv vă permite să
explorați rapid diversele secțiuni ale site-ului - "About", "Portfolio", "Booking" și "Contact Me".
Acestea reprezintă portalurile către lumea mea fotografică, plină de povestiri vizuale.
În partea de sus a paginii, veți găsi un slider cu imagini, o colecție selectată cu atenție
pentru a ilustra diversitatea și frumusețea lucrărilor mele. Acest slider vă invită să explorați și să
navigați printr-o gamă largă de imagini, fiecare capturând un moment și o emoție distincte.Pe
măsură ce derulați în jos, veți descoperi o galerie de imagini mici, fiecare reprezentând o
fereastră către fotografii individuale sau secțiuni specifice.
4
Pentru a facilita interacțiunea și pentru a vă conecta cu mine și cu munca mea, am
integrat rețelele de socializare preferate, precum Facebook, Twitter, Instagram și YouTube. De
asemenea, puteți să mă contactați direct prin intermediul adresei de email pentru a discuta
despre proiecte viitoare sau pentru a vă programa o ședință foto.În final, această pagină se
încheie cu un mesaj de drepturi de autor, conferind o notă profesională și oferind protecție
legală conținutului prezentat.
2.Sectiunea “Despre minet”
În secțiunea "About", vizitatorii vor găsi o prezentare detaliată a pasiunii și experienței

mele în fotografie. Această secțiune cuprinde:: O prezentare succintă a mea - vârsta (18 ani) și
locația (Baia Mare). Detalii despre pasiunea mea pentru fotografie și motivele care m-au condus
să aleg această formă de artă. O prezentare a modului în care abordez și văd fotografia.
Descriu stilul meu fotografic, elementele și tehnica pe care le consider esențiale în crearea unei
imagini captivante. O scurtă poveste despre experiența mea în domeniul fotografiei. Spun cum
am început, cum am evoluat și am învățat din fiecare experiență pentru a deveni un fotograf mai
bun.Încheierea cu o invitație deschisă pentru vizitatori de a explora mai mult din munca mea și
de a se conecta cu mine prin intermediul fotografiei.
5
3.Portofoliul
Secțiunea "Portfolio" prezintă colecția mea de imagini, organizată într-un format de zid
de fotografii (masonry). Include portrete, fotografii de tip portrait și alte imagini care evidențiază
diversitatea și talentul în fotografia artistică. Designul minimalist al paginii facilitează explorarea
și vizualizarea imaginilor. Susținerea prin intermediul rețelelor de socializare și informațiile de
contact completează experiența utilizatorului.
Formatul Masonry este un sistem de aranjare a imaginilor într-un zid sau grilă,
optimizând spațiul și prezentând vizual fotografii de dimensiuni variate într-un mod dinamic și
atrăgător. Această dispunere asimetrică permite plasarea eficientă a fotografiilor în funcție de
dimensiuni și creează un aspect armonios, fără spații goale, oferind astfel o experiență vizuală
plăcută și captivantă pentru utilizatori.
4.Sectiunea “Booking”
Secțiunea "Booking" a paginii prezintă un formular interactiv pentru rezervări și contacte. Acest
formular solicită informații esențiale cum ar fi numele, adresa de email, și numărul de telefon al
clientului interesat să rezerve o ședință foto pentru diverse ocazii precum nunți, ședințe de
modă
De asemenea, este inclus un câmp pentru mesaje suplimentare sau cereri specifice legate de
serviciile oferite. Butonul de trimitere facilitează finalizarea și expedierea cererii, oferind o
modalitate comodă de comunicare între client și fotograf pentru organizarea și planificarea
detaliilor evenimentului fotografic dorit
6
5.Sectiunea “Contacteaza-ma”
Secțiunea "Contact Me" este dedicată interacțiunii și comunicării directe între vizitatori și
fotograf. Pagina include un formular interactiv pentru a trimite mesaje directe și a solicita
informații sau servicii specifice. Utilizatorii sunt încurajați să completeze câmpurile pentru nume,
adresă de email, număr de telefon și mesajul dorit pentru a iniția corespondența. De asemenea,
sunt furnizate informații de contact suplimentare despre fotograf pentru o comunicare mai
directă și rapidă: numărul de telefon, adresa de email și poziția profesională. Această secțiune
facilitează accesul și interacțiunea între vizitatori și fotograf, consolidând astfel comunicarea și
relația cu clienții potențiali.
7
3.Limbaje de programare folosite:
HTML,CSS,JS
1.HTML
HTML (HyperText Markup Language) este limbajul de marcare fundamental pentru construirea
și structurarea paginilor web. El furnizează un set de etichete și elemente pentru a defini
conținutul, structura și aspectul unei pagini web. Prin intermediul unor tag-uri și atributelor,
HTML permite organizarea clară a informațiilor precum titluri, paragrafe, imagini, linkuri și alte
elemente, contribuind la crearea unei experiențe interactive și accesibile pentru utilizatori pe
internet. Este pilonul central al construcției paginilor web moderne.
2.CSS
CSS (Cascading Style Sheets) reprezintă limbajul de stilizare folosit pentru a defini aspectul și
prezentarea elementelor HTML în paginile web. CSS oferă posibilitatea de a controla aspectul
vizual al conținutului web, precum culoarea, fonturile, marginile, dimensiunile, layout-ul și alte
proprietăți estetice. El permite separarea structurii și a conținutului paginii (definite de HTML) de
aspectul sau stilul acesteia, ceea ce facilitează modificările și actualizările globale ale aspectului
paginii. Prin aplicarea regulilor și a stilurilor definite în fișierele CSS, dezvoltatorii web pot crea
pagini web atractive, coezive și responsive, oferind o experiență plăcută și coerentă utilizatorilor.
3.JS
JavaScript (JS) este un limbaj de programare utilizat pe scară largă pentru dezvoltarea
aplicațiilor web interactive și dinamice. Este un limbaj de scripting de înalt nivel, interpretat de
către browser și folosit pentru a adăuga interactivitate paginilor web, pentru a manipula și
modifica conținutul, pentru a gestiona evenimente și pentru a crea efecte speciale.JavaScript
este esențial în dezvoltarea web și, împreună cu HTML și CSS, formează unul dintre pilonii
fundamentali ai tehnologiilor web moderne. Este un limbaj versatil și puternic, cu o comunitate
activă de dezvoltatori și biblioteci extinse care îi extind capacitățile.
8
4.Codul sursa al programului
HTML:
1.Pagina principala
<!DOCTYPE html>
<html>
<head>
<title>frommarksz</title>
<meta
charset="utf-8">
<link
rel="stylesheet" type="text/css" href="index2.css">
<link
href="https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap"
rel="stylesheet">
<script
type="text/javascript" src="index2-cont-fom.js"></script>
<script
src="https://kit.fontawesome.com/5d5dfc09c0.js" crossorigin="anonymous"></script>
</head>
<body class="body1">

<header
class="header1">
<nav
class="nav1">
<a
href="index.html"><span id="span2">MARK STENCZEL</span></a>
<a href="index2 about.html"><span id="span1">About</span></a>
<a href="index2-Portfolio.html"><span id="span1">Portfolio</span></a>
<a href="index2-book-fom.html"><span id="span1">Booking</span></a>
<a href="index2-contact.html"><span id="span1">Contact Me</span></a>

</nav>
9
</header>
<section>

<div class="slidercontainer">
<div class="showSlide fade">
<img id="inimg1" src="file:///C:/Users/40722/Desktop/frommarksz/images\slid-5.jpg" />
</div>
<img id="inimg1" src="file:///C:/Users/40722/Desktop/frommarksz/images\slid-4.jpg" />
</div>
<img id="inimg1" src="file:///C:/Users/40722/Desktop/frommarksz\images\slid-2.jpg"/>
</div>

</div>
</div>
</div>
</section>


<a class="left" onclick="nextSlide(-1)">❮</a>
<a class="right" onclick="nextSlide(1)">❯</a>
<p id="sect1-p1">MARK STENCZEL</p>

<p id="sect1-p2">PHOTOGRAPHY</p>
<div class="clearfix"></div>
<section class="sect3">
<div
class="grid-img">
<div
class="div3">
10
<a href="file:///C:/Users/40722/Desktop/frommarksz/images/photo1.png" target="_blank"><img
id="img-h" src="file:///C:/Users/40722/Desktop/frommarksz/images/photo1.png"></a>
</div>
<div
class="div2">

</div>
<div
class="div2">

</div>
<div
class="div2">

</div>
<div
class="div2">

</div>
<div
class="div2">

</div>
<div
class="div2">

</div>
<div
class="div2">
11
</div>
<div
class="div2">

</div>
<div
class="div2">

</div>
<div
class="div2">

</div>
<div
class="div2">

</div>
</div>
</section>
<footer class="foot1">
<a href="https://www.facebook.com/markstz"><i id="facebook" class="fab

fa-facebook-f"></i></a>
<a href="https://twitter.com/markstz" style="text-decoration: none;"><i id="twitter" class="fab
fa-twitter"></i></a>
<a href="https://instagram.com/markstz" style="text-decoration: none;"><i id="instagram"
class="fab fa-instagram"></i></a>
<a href="https://www.youtube.com/channel/markstz" style="text-decoration: none;"><i
id="youtube" class="fab fa-youtube"></i></a>
12
<a href=" mailto: markstz@gmail.com" style="text-decoration: none"> <i id="mail" class="fas
fa-envelope"></i></a>
<p id="p1-foot">© Copyright 2023 MARK STENCZEL.</p>
</footer>
</body>
</html>
2.Sectiunea “About”
<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8">
<link
<link
rel="stylesheet">
<script
</head>
<section class="sect1-about">
<header
class="header1">
<nav
class="nav1">
<a

</nav>
</header>
13
<p id="sect1-p1-about">About</p>
<p id="sect1-p2-about">Sunt un fotograf în vârstă de 18 ani din Baia Mare, pasionat de arta
capturării momentelor prin obiectivul aparatului foto. Fiecare imagine pe care o creez este o
poveste captivantă pentru mine - o îmbinare între lumină, compoziție și emoție. Învăț să
surprind frumusețea din fiecare unghi și să aduc în prim-plan detaliile care aduc magie unei
scene.Fotografia nu este doar o simplă activitate pentru mine, ci o pasiune profundă ce mă
inspiră să descopăr mereu noi moduri de a prezenta realitatea. Îmi place să îmbin tehnica cu
imaginația pentru a crea momente și amintiri care rezistă în timp.Sunt ferm convins că fiecare
cadru imortalizează o poveste unică și caut mereu să surprind esența și autenticitatea fiecărui
moment. Aștept cu nerăbdare să împărtășesc cu tine frumusețea pe care o văd prin obiectivul
meu. </p>
</section>
</body>
</html>
3.Portofoliu
<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8">
<link
<link
rel="stylesheet" type="text/css" href="portraits.css">
<link
rel="stylesheet">
<script
</head>
<header
class="header1">
14
<nav
class="nav1">
<a

</nav>
</header>
<div class="masonry">
<div
class="masonry_item">
<img
src="file:///C:/Users/40722/Desktop/frommarksz/images\portrait1.jpg">
<img
<img
<img
<img
<img
<img
<img
<img
src="file:///C:/Users/40722/Desktop/frommarksz/images/photo1.png">
<img
<img
<img
15
<img
<img
<img
</div>
</div>
<footer class="foot1-po">
<a
href="https://www.facebook.com/markstz"><i id="facebook" class="fab fa-facebook-f"></i></a>
<a
href="https://twitter.com/markstz" style="text-decoration: none;"><i id="twitter" class="fab
fa-twitter"></i></a>
<a
href="https://www.instagram.com/markstz/" style="text-decoration: none;"><i id="instagram"
class="fab fa-instagram"></i></a>
<a
href="https://youtube.com/channel/markstz" style="text-decoration: none;"><i id="youtube"
class="fab fa-youtube"></i></a>
<a href="
mailto:markstz@gmail.com" style="text-decoration: none"> <i id="mail" class="fas
fa-envelope"></i></a>
<p
id="p1-foot">© Copyright 2023 MARK STENCZEL.</p>
</footer>
</body>
</html>
4.Sectiunea “Booking”
<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8">
<link
16
<link
rel="stylesheet">
<script
<script
</head>
<section class="sect1-book">
<header
class="header1">
<nav
class="nav1">
<a
<a href=""><span id="span1">Booking</span></a>

</nav>
</header>
<p id="sect1-p1-about">Booking form</p>
<form id="register-form1-book" name="myForm" method="POST" onsubmit="return validate()">

<div>
<input
id="name" class="input-text-book" type="text" name="cname" placeholder=" NAME">
</div>
<div>
<input
id="email" class="input-text-book" type="email" name="cemail" placeholder="ENTER EMAIL">
</div>
<div>
17
<input id="phone" class="input-text-book" type="text" name="cphone" placeholder="PHONE">
</div>
<div>
<select
id="select-book" class="input-text1-book">
<option>Select occasion:</option>
<option>Wedding</option>
<option>Fashion</option>
<option>Birthday</option>
</select>
</div>
<div>
<textarea
id="textarea" class="input-text-book" name="cmsg" rows="7" cols="77" placeholder="Write
message...">
</textarea>
</div>
<div>
<input
id="btn1" class="input-text1-book" type="submit" name="submit" value="Send" >
</div>
</form>
</body>
</html>
18
5.Sectiunea”Contact me”
<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8">
<link
<link
rel="stylesheet">
<script
<script
</head>
<section class="sect1-contact">
<header
class="header1">
<nav
class="nav1">
<a

</nav>
</header>
<p id="sect1-p1-about-cot" >Contact</p>
<form id="register-form" name="myForm" method="POST" onsubmit="return validate()">

<div>
19
<input
id="name" class="input-text" type="text" name="cname" placeholder=" NAME">
</div>
<div>
<input
id="email" class="input-text" type="email" name="cemail" placeholder="ENTER EMAIL">
</div>
<div>
<input id="phone" class="input-text" type="text" name="cphone" placeholder="PHONE">

</div>
<div>
<textarea
id="textarea" class="input-text" name="cmsg" rows="7" cols="77" placeholder="Write
message...">
</textarea>
</div>
<div>
<input
id="btn1" class="input-text1" type="submit" name="submit" value="Send" >
</div>
</form>
<div class="arti1-about">
<h3
id="h3-cont">General info</h3>
<p>MARK
STENCZEL</p>
<p>Studio
Manager | Executive Producer</p>
<p>848.754.8641</p>
<a
id="h3-cont"href="mailto: marksz@gmail.com"> marksz@gmail.com</a>
</div>
</section>
</body>
</html>
20
CSS:
body{
margin:0px;
font-family:
'Raleway', sans-serif;
}
/*
.sect2{
width: 100%;
height: 800px;
background: url(https://static.pexels.com/photos/248159/pexels-photo-248159.jpeg) no-repeat

50% 50%;
background-size: cover;
}*/
/*#inimg1
{
width:
100%;
height:
100%;
}*/
.sect1{
width: 100%;
height: 750px;
}
.header1{
background-color: white;
padding:
25px;
}
.nav1{
padding:
5px;
21
text-align:
center;
}
#span1{
margin:
10px;
color:black;
font-size: 20px;
}
#span2{
float:left;
margin: 0 0 0 0px;
position: relative;
bottom: 3px;
color:black;
font-size: 25px;
}
#select1{
border:
none;
}
#sect1-p1{
color:
white;
font-size:
55px;
position:absolute;
top: 40%;
left:50%;
}
#sect1-p2{
color:
white;
font-size:
35px;
position:absolute;
top: 55%;
22
left:51%;
}
a{
text-decoration: none;
}
@media screen and (max-width:1276px ){

body{
margin:0px;
font-family: 'Raleway', sans-serif;
}
/*
.sect2{
width: 100%;
height: 800px;
background: url(https://static.pexels.com/photos/248159/pexels-photo-248159.jpeg)
no-repeat 50% 50%;
background-size: cover;
}*/
/*#inimg1
{
width: 100%;
height: 100%;
}*/
.sect1{
width: 100%;
height: 750px;
}
.header1{
background-color: white;
padding: 35px;
}
.nav1{
padding: 10px;
23
text-align: center;
}
#span1{
margin: 15px;
font-size: 18px;
color:black;
}
#span2{
float:left;
margin: 0 0 0 0px;
position: relative;
bottom: 5px;
color:black;
font-size: 27px;
}
#select1{
border: none;
}
#sect1-p1{
color: white;
font-size: 52px;
position:absolute;
top: 25%;
left:40%;
}
#sect1-p2{
color: white;
font-size: 31px;
position:absolute;
top: 33%;
left:41%;
}
a{
text-decoration: none;
}
24
Bibliografie
https://www.pexels.com/ro-ro/
https://en.wikipedia.org/wiki/C%2B%2B
https://en.wikipedia.org/wiki/JavaScript
https://en.wikipedia.org/wiki/CSS
https://www.w3schools.com/
25

Atestat Informatica

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Atestat Informatica

Încărcat de

Drepturi de autor:

Formate disponibile

Colegiul Naţional “Gheorghe Şincai” Baia Mare

Lucrare pentru obţinerea

Candidat: Profesor îndrumător:

Am lucrat cu grijă la fiecare aspect al acestei pagini pentru a vă oferi o experiență

2.Sectiunea “Despre minet”

În secțiunea "About", vizitatorii vor găsi o prezentare detaliată a pasiunii și experienței

<a href="index2-book-fom.html"><span id="span1">Booking</span></a>

<a href="index2-contact.html"><span id="span1">Contact Me</span></a>

<div class="showSlide fade">

<p id="sect1-p1">MARK STENCZEL</p>

<a href="file:///C:/Users/40722/Desktop/frommarksz/images/photo2.png" target="_blank"><img

<a href="file:///C:/Users/40722/Desktop/frommarksz/images/photo3.png" target="_blank"><img

<a href="file:///C:/Users/40722/Desktop/frommarksz/images/photo4.png" target="_blank"><img

<a href="file:///C:/Users/40722/Desktop/frommarksz/images/photo5.png" target="_blank"><img

<a href="file:///C:/Users/40722/Desktop/frommarksz/images/photo6.png" target="_blank"><img

<a href="file:///C:/Users/40722/Desktop/frommarksz/images/photo7.png" target="_blank"><img

<a href="file:///C:/Users/40722/Desktop/frommarksz/images/photo9.png" target="_blank"><img

<a href="file:///C:/Users/40722/Desktop/frommarksz/images/photo10.png" target="_blank"><img

<a href="file:///C:/Users/40722/Desktop/frommarksz/images/photo11.png" target="_blank"><img

<a href="file:///C:/Users/40722/Desktop/frommarksz/images/photo12.png" target="_blank"><img

<a href="https://www.facebook.com/markstz"><i id="facebook" class="fab

<a href="index2-book-fom.html"><span id="span1">Booking</span></a>

<a href="index2-contact.html"><span id="span1">Contact Me</span></a>

<a href="index2-book-fom.html"><span id="span1">Booking</span></a>

<a href="index2-contact.html"><span id="span1">Contact Me</span></a>

<a href=""><span id="span1">Booking</span></a>

<a href="index2-contact.html"><span id="span1">Contact Me</span></a>

<p id="sect1-p1-about">Booking form</p>

<form id="register-form1-book" name="myForm" method="POST" onsubmit="return validate()">

<a href="index2-book-fom.html"><span id="span1">Booking</span></a>

<a href="index2-contact.html"><span id="span1">Contact Me</span></a>

<p id="sect1-p1-about-cot" >Contact</p>

<form id="register-form" name="myForm" method="POST" onsubmit="return validate()">

<input id="phone" class="input-text" type="text" name="cphone" placeholder="PHONE">

background: url(https://static.pexels.com/photos/248159/pexels-photo-248159.jpeg) no-repeat

@media screen and (max-width:1276px ){

S-ar putea să vă placă și