COLEGIUL NAȚIONAL ”ALEXANDRU PAPIU

ILARIAN”
TÎRGU – MUREȘ

Lucrare de atestat
Adăpost pisici

Profesor coordonator: Realizator:

Bogdan Sanda Achim Mara
Clasa a XII-a B

2019

1
 Cuprins:

• Introducere................................................................................
.......3
• Noțiuni
introductive.........................................................................4
• Manualul
utilizatorului..................................................................7
• Manualul
programatorului............................................................10
• Concluzii....................................................................................
......29
• Bibliografie................................................................................
......30

2
 Introducere

Am ales această temă deoarece ,în viitor aș dori să înființez un adăpost pentru pisicile
care trăiesc pe străzi sau sunt părăsite de stăpâni.
Specialistii considera ca prezenta unei pisici reduce nivelul stresului si domoleste starea
de anxietate din casa.
Mangaiatul unei pisici are un efect de calmare si de relaxare. Studiile arata ca o persoana
care are o pisica in casa de mai bine de 10 ani este cu 30% mai putin predispusa sa sufere un
atac de cord sau un atac cerebral.
Torsul pisicii nu este doar linistitor sau, in unele cazuri, putin zgomotos. Cercetatorii
considera ca vibratiile emise de torsul unei pisici contribuie la vindecarea unei persoane in
urma unei infectii.
Doar ascultarea torsului pisicii contribuie la scaderea presiunii arteriale.
Vibratiile emise de o pisica ne ajuta sa ne intarim sistemul muscular si contribuie la
vindecarea leziunilor in zona articulatiilor si a tendoanelor.
O persoana care sufera de o anumita afectiune se va simti psihic mult mai bine daca are in
preajma o pisica.
O persoana cu Alzheimer va avea mai putine reactii de anxietate daca are in casa o pisica,
in timp ce un bolnav cu HIV/SIDA va fi mai putin expus riscului de a suferi de depresie.
Copiii care sunt crescuti intr-o casa in care exista o pisica au un sistem imunitar mai
puternic, avand un risc mai scazut de a suferi alergii, astm sau eczema.

3
 Noțiuni introductive

Elementele limbajului HTML

HTML este o formă de marcare orientată către prezentarea documentelor text pe o singura
pagină, utilizând un software de redare specializat, numit agent utilizator HTML, cel mai
bun exemplu de astfel de software fiind browserul web. HTML furnizează mijloacele prin
care conținutul unui document poate fi adnotat cu diverse tipuri de metadate și indicații de
redare. Indicațiile de redare pot varia de la decorațiuni minore ale textului, cum ar fi
specificarea faptului că un anumit cuvânt trebuie subliniat sau că o imagine trebuie
introdusă, până la scripturi sofisticate, hărți de imagini și formulare. Metadatele pot
include informații despre titlul și autorul documentului, informații structurale despre cum
este împărțit documentul în diferite segmente, paragrafe, liste, titluri etc. și informații
cruciale care permit ca documentul să poată fi legat de alte documente pentru a forma
astfel hiperlink-uri (sau web-ul).

HTML este un format text proiectat pentru a putea fi citit și editat de oameni utilizând un
editor de text simplu. Totuși scrierea și modificarea paginilor în acest fel solicită
cunoștințe solide de HTML și este consumatoare de timp. Editoarele grafice (de tip
WYSIWYG) cum ar fi Macromedia Dreamweaver, Adobe GoLive sau Microsoft
FrontPage permit ca paginile web sa fie tratate asemănător cu documetele Word, dar cu
observația că aceste programe generează un cod HTML care este de multe ori de proastă
calitate.

HTML se poate genera direct utilizând tehnologii de codare din partea serverului cum ar fi
PHP, JSP sau ASP. Multe aplicații ca sistemele de gestionare a conținutului, wiki-uri și
forumuri web generează pagini HTML.

4
HTML este de asemenea utilizat în e-mail. Majoritatea aplicațiilor de e-mail folosesc un
editor HTML încorporat pentru compunerea e-mail-urilor și un motor de prezentare a e-
mail-urilor de acest tip. Folosirea e-mail-urilor HTML este un subiect controversat și
multe liste de mail le blochează intenționat.

Cascading Style Sheets, sau CSS pe scurt, este un standard simplu al zilelor noastre, ce
ofera designerilor/programatorilor un mod eficient de a controla modul de prezentare a
paginilor "WEB". In zilele noastre CSS a ajuns sa fie in mod primar, un limbaj folosit
exclusiv doar pentru "web design" - insa nu putem exclude faptul ca acest limbaj este
folosit si in alte medii de programare.
n comparatie cu era anilor 90, cand controlul prezentarii unei pagini se facea prin tag-uri
HTML, divizate intre ele in mai multe fisiere, ce confereau o munca enorma in cazul unei
actualizari, CSS vine cu un nou standard, si anume ca printr-un singur fisier ( o conventie
intre programatori este sa se foloseasca numele general 'style.css' ) - sa fie controlat intreg
aspectul proiectului WEB.

CSS nu necesita cunostinte avansate de hardware sau software, ci mai mult cateva
cunostinte HTML, pentru a putea sa-l invatam. Citind acest manual, presupunem ca
cititorul are deja cunostinte temeinice de HTML si ca intelege ce e acela un SGML (
Standard Generalized Markup Language ).

5
 Manualul utilizatorului:

Pentru a accesa rubricile site-ului apăsați pe elementele corespunzătoare din meniu.

6
Pentru a vizualiza color pozele mutați cursorul în dreptul pozelor .

Pentru a accesa formularul apăsați pe butoanele corespunzătoare fiecărui formular.

7
Apoi completați fiecare formular.

8
Pentru a putea lua legătura cu cei de la adăpost selectați rubrica “CONTACT”.

9
Manualul programatorului:

SITE:
Navigation bar:
<section id="nav-bar">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#"><img src ="img/logo.png" height=50px;
width=200px;></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#top">Acasa </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pisici">Pisici adoptie</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#cazare">Cazare pisici regim hotelier</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#adoptie"> Formulare adoptie/Formulare cazare</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#Despre noi"> Despre noi</a>
</li>

10
 <li class="nav-item">
<a class="nav-link " href="#CONTACT"> CONTACT</a>
</li>
</ul>
</div>
</nav>
</section>
Slider:
<div id="slider">
<div id="headerSlider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#headerSlider" data-slide-to="0" class="active"></li>
<li data-target="#headerSlider" data-slide-to="1"></li>
<li data-target="#headerSlider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" align="middle">
<div class="carousel-item active">
<img src="img/slider1.jpg" class="d-block img-fluid" height="500px" width="900px">

</div>
<div class="carousel-item">
<img src="img/slider2.jpg" class="d-block img-fluid" height="500px" width="900px">
</div>
<div class="carousel-item">
<img src="img/slider3.jpg" class="d-block img-fluid" height="500px" width="900px" >
</div>
</div>
<a class="carousel-control-prev" href="#headerSlider" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>

11
 </a>
<a class="carousel-control-next" href="#headerSlider" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Contact:
<section>
<section id="CONTACT">
<div class ="container">
<h1>CONTACT</h1>
<div class="row contact">
<div class="col-md-3 text-center">
<div class="icon">
<i class="fa fa-desktop"></i>
</div>
<h3>Cum putem lua legătura:</h3>
<p>*e-mail:adapostanimale.mures@yahoo.ro<br>
*facebook: Adapost Animale Mures<br>
*telefon:+40777333212 <br>
*adresa:str.Mică nr.:445b,Târgu Mureș,Mureș<br>
</p>

</div>

</div>
</div>

</section>

12
Cazare și adopție:
<!--------cazare regim hotelier-------->
<section id="cazare">
<div class="container";>
<p>Daca doriti sa va cazati pisica intr-un loc linistit in timp ce sunteti plecati
,completati formularul de mai jos.</p>
<a href="cazare.html" class="btn btn-primary">
Completeaza formularul
</a>
</div>

</section>
<!--------adoptie animale-------->
<section id="adoptie">
<div class="container";>
<p>Daca doriti sa adoptiati o pisica dornica de a face parte dintr-o noua familie
completati formularul de mai jos.</p>
<a href="adoptie.html" class="btn btn-primary">
Completeaza formularul
</a>
</div>

</section>

<script src="js/smooth-scroll.js">
</script>
<script>var scroll = new SmoothScroll('a[href*="#"]');
</script>

13
FORMULAR ADOPȚIE:
<html>
<body>
<center><table bgcolor="lavander" border =1 width="50%" height="80%"><tr><td>
<form action="apl_s.html" ><br>
<Center>
<font color="black"><h3>Adoptie</font></h3></font>
</Center>
<p><b> Numele :</b> <input type="text" name="first_name" size="15" maxlength="15"
value=" " /></p>
<p><b> Prenumele:</b> <input type="text" name="last_name" size="30" maxlength="30"
value=" " /></p>
<p><b> Adresa:</b> <input type="text" name="adresa" size="40" maxlength="40" value="
" /></p>
<p><b> Numar de telefon:</b> <input type="text" name="nr_telefon" size="40"
maxlength="40" value=" " /></p>
<p><b> Numele Animalutului:</b> <input type="password" name="password" size="20"
maxlength="20" /></p>
<p> <INPUT type = SUBMIT value="Trimite formularul"> <INPUT type = RESET
value="Renunt"> <INPUT type = BUTTON value="Revenire la pagina initiala"> <a
href="cod.html"></a>
</form>
</td></tr></table></center>
</body>
</html>

FORMULAR CAZARE:
<html>
<body>
<center><table bgcolor="lavander" border =1 width="50%" height="80%"><tr><td>
<form action="apl_s.html" ><br>
<Center>
<font color="black"><h3>Cazare</font></h3></font>

14
</Center>
<p><b> Numele :</b> <input type="text" name="first_name" size="15" maxlength="15"
value=" " /></p>
<p><b> Prenumele:</b> <input type="text" name="last_name" size="30" maxlength="30"
value=" " /></p>
<p><b> Adresa:</b> <input type="text" name="adresa" size="40" maxlength="40" value="
" /></p>
<p><b> Numar de telefon:</b> <input type="text" name="nr_telefon" size="40"
maxlength="40" value=" " /></p>
<p><b> Numele Animalutului D-voastra:</b> <input type="text" name="nume_a"
size="20" maxlength="20" /></p>
<p><b> Perioada :</b> <input type="perioada" name="perioada" size="60"
maxlength="60" /></p>
<p> <INPUT type = SUBMIT value="Trimite formularul"> <INPUT type = RESET
value="Renunt"> <INPUT type = BUTTON value="Revenire la pagina initiala!">
</form>
</td></tr></table></center>
</body>
</html>

CSS:
*
{
margin:0;
padding:0;
}
/*navigare*/
#nav-bar
{
position: sticky;
top: 0;
z-index: 10;

15
}
.navbar-brand
{
height: 60px;
padding-left: 30px;
}
.navbar-nav li
{
padding:0 10px;
}

.navbar-nav li
{
float: right;
text-align: left;
}
#nav-bar ul li a:hover
{
color: azure;
}

.navbar
{
background-color: lightblue;
}
.navbar-toggler
{
border: none!important;
}
.nav-link

16
{
color: darkblue!important;
font-weight: 600;
font-size: 16px;
}

/*--------despre--------*/
#Despre noi
{
padding-top: 50px;
padding-bottom: 50px;
color:darkslateblue;
}
#Despre noi .btn

{
margin-top: 20 px;
margin-bottom: 40px;

}
.about-content
{
padding-top: 20px;
}

/*-----CONTACT------*/
#CONTACT
{
background-image: linear-
gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)),url(img/PisiciAdoptie.jpg);
background-size: cover;

17
 background-position: center;
color:deepskyblue;
background-attachment: fixed;
padding-top: 50px;
padding-bottom: 50px;
}
#CONTACT h1
{
text-align: center;
color: darkorchid! important;
padding-bottom: 10px;
}
#CONTACT h1
{
text-align: center;
color: darkorchid !important;
padding-bottom: 10px;
}
#CONTACT h1::after
{
content: '';
background: darkorchid;
display: block;
height: 3px;
width: 170px;
margin: 20px auto 5px;
}
.contact
{
margin-top: 40px;

18
}
.icon
{
font-size: 40px;
margin: 20px auto;
padding: 20px;
height: 80px;
width: 80px;
border: 1px solid #DB9AEA;
border-radius: 50%;

}
#CONTACT p
{
font-size: 14px;
margin-top: 20px;
color: aqua;

}
.contact .col-md-3:hover{
background: #8D30A3;
cursor:pointer;
transition: 0.7s;
}
/*Pisici adoptie*/
#pisici
{
padding-top: 50px;
padding-bottom: 50px;
color:cornflowerblue;

19
}
h1
{
text-align: center;
color: darkcyan !important;
padding-bottom: 10px;
}
h1 ::after
{
content:'';
background: #007bff;
display: block;
height: 3px;
width: 170px;
margin: 20px auto 5px;
}
.profile-pic
{
margin-top: 25px;
}
.profile-pic .img-box
{
opacity: 1;
display: block;
position: relative;
}
.profile-pic .img-box img
{
filter: grayscale(1);
}

20
.profile-pic .img-box img:hover
{
filter: grayscale(0);
cursor: pointer;
}
.profile-pic h2
{
font-size: 22px;
font-weight: bold;
margin-top: 15px;
color: darkcyan !important;

}
#pisici .fa
{
height: 25px;
width: 25px;
color: aqua !important;
background: #fff;
padding: 4px;
border-radius: 50%;
}
#cazare
{
background-position: center;
color: cadetblue;
font-family: sans-serif;

}
#adoptie

21
{
background-position: center;
color: cadetblue;
font-family: sans-serif;

22
 Concluzii

-Aș putea adăuga formulare pentru adopție și cazare folosind sistemul de gestiune a
bazelor de date MySQL
-Aș putea adăuga o melodie pentru a face navigarea pe site mai relaxantă
-Aș putea adăuga un filtru pentru căutarea pisicuțelor in functie de vârsta
-Aș putea adăuga un telefon de urgență în caz că cineva dorește să ajute o pisica aflata
într-o situație nefavorabilă
-Aș putea adăuga o pagină cu sfaturi pentru cei care doresc să adopte pisici

23
 Bibliografie:
-Manual de INFORMATICA, pentru clasa a IX-a. Profilul real - pascal si C++ -
Ls Info-mat
-Manual de INFORMATICA, pentru clasa a XII-a. Profilul real - pascal si C++
- Ls Info-mat

-https://www.w3schools.com/html/
-https://html.com/
-https://www.w3schools.com/css/css_howto.asp
-https://www.quora.com/How-do-I-embed-CSS-in-HTML
-https://html.com/css/
-https://www.youtube.com/watch?v=99vHH_6F0Ko
-https://getbootstrap.com/
-https://github.com/account/unverified-email
-
https://www.google.com/search?q=imagini+pisici&tbm=isch&source=univ&sa
=X&ved=2ahUKEwihu_qx4frhAhXSwKQKHeJcAw8QsAR6BAgGEAE&biw
=1536&bih=754

24