1

ATESTAT LA INFORMATIC Anime PREZENTARE PROIECT

LUCRARE PENTRU ATESTAREA

COMPETENELOR PROFESIONALE

Elev: Petric Elisa Adriana

Profesor ndrumator: Crstea Nicoleta
Liceu: Colegiul National Ienachi Vcrescu
Sesiunea: mai 2015

ATESTAT LA INFORMATIC Anime PREZENTARE PROIECT

Cuprins:
1.Motivul alegerii temei...pag. 3
2.Structura aplicaiei.pag.4
3. Despre html ..pag. 5-6
4. Coduri surs ......pag. 7-24
5.Resurse de hardware si software....pag. 25
6.Modaliti de utilizare....pag. 26
7.Bibliografie.pag. 27

ATESTAT LA INFORMATIC Anime PREZENTARE PROIECT

1.Motivul alegerii temei

Am ales aceast tem avnd n vedere faptul c mi place

s urmaresc anime-uri, acestea reprezentnd un mod placut de
a-mi petrece timpul liber.Am realizat acest site pentru a
demonstra c anime-urile nu sunt doar desene animate pentru
copii ci pot aborda o gam variat de subiecte de interes
general din care putem nva lecii importante de via.
Personal , urmrind seriile anime, am invat cteva cuvinte n
japonez i mi-am mbogit cunotinele de limba englez,
innd cont de faptul c pe majoritatea le-am urmrit cu
subtitrare n englez.

ATESTAT LA INFORMATIC Anime PREZENTARE PROIECT

2.Structura aplicaiei

Aplicaia este alcatuit din mai multe pagini care pot fi

accesate din meniul principal aflat n componenta fiecreia
dintre ele.
Meniul principal este alctuit din butoanele:

Home trimitere ctre pagina de pornire

About pagina ce conine informatii generale despre
Anime
Genuri - pagina ce conine informatii despre diversele
genuri de anime
Anime List- pagina ce conine o lista cu anime-uri i
linkuri ctre fiecare dintre ele
Watch Anime- buton ce face trimiterea ctre un site
specializat unde pot fi urmrite numeroase anime-uri

ATESTAT LA INFORMATIC Anime PREZENTARE PROIECT

3. Despre html
HyperText Markup Language (HTML) este un limbaj de marcare utilizat pentru crearea
paginilor web ce pot fi afiate ntr-unbrowser (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 o form de marcare orientat ctre prezentarea documentelor text pe o singura
pagin, utiliznd 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
coninutul unui document poate fi adnotat cu diverse tipuri de metadate i indicaii de redare.
Indicaiile de redare pot varia de la decoraiuni minore ale textului, cum ar fi specificarea
faptului c un anumit cuvnt trebuie subliniat sau c o imagine trebuie introdus, pn la
scripturi sofisticate, hri de imagini i formulare. Metadatele pot include informaii despre
titlul i autorul documentului, informaii structurale despre cum este mprit documentul n
diferite segmente, paragrafe, liste, titluri etc. i informaii 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 utiliznd un
editor de text simplu. Totui scrierea i modificarea paginilor n acest fel solicit cunotine
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 asemntor cu documetele Word, dar cu observaia c aceste programe genereaz
un cod HTML care este de multe ori de proast calitate.
HTML se poate genera direct utiliznd tehnologii de codare din partea serverului cum ar fi
PHP, JSP sau ASP. Multe aplicaii ca sistemele de gestionare a coninutului, wiki-uri i
forumuri web genereaz pagini HTML.
HTML este de asemenea utilizat n e-mail. Majoritatea aplicaiilor de e-mail folosesc un
editor HTML ncorporat pentru compunerea e-mail-urilor i un motor de prezentare a e-mailurilor de acest tip. Folosirea e-mail-urilor HTML este un subiect controversat i multe liste de
mail le blocheaz intenionat.
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 />.

ATESTAT LA INFORMATIC Anime PREZENTARE PROIECT

Navigatorul web interpreteaz aceste etichete afind 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. 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>
Componena unui document HTML este:
versiunea HTML a documentului
zona head cu etichetele <head> </head>
zona body cu etichetele <body> </body> sau <frameset> </frameset>

4. Coduri surs

ATESTAT LA INFORMATIC Anime PREZENTARE PROIECT

Codul surs al primei pagini :

<!DOCTYPE html>
<html>
<head>
<title> Anime</title>
<style>
h1 {
text-shadow: 5px 5px 5px #FF0000;}
div{
margin: 5px;
padding: 0;
border: 15px solid black;}
#header{
text-align:center;
background-color:black;
color:white;
padding:1px;
float:top;}
#menu{
line-height:30px;
background-color:lightgrey;
height:600px;
width:200px;
float:left;
padding:1px;}

ATESTAT LA INFORMATIC Anime PREZENTARE PROIECT

#menu2{
line-height:10px;
background-color:black;
color:white;
height:600px;
width:150px;
float:right;
padding:1px;
text-align:left;}
#section {
width:780px;
float:left;
padding:10px;}
#footer{
background-color:black;
padding:10px;
color:white;
clear:both;
text-align:center;}
ul li a
{ background-color:black;
color:white;
padding: 5px 10px;
border-radius:6px 6px 0 0;
text-decoration :none;}
a:hover{
background-color:orange;}

ATESTAT LA INFORMATIC Anime PREZENTARE PROIECT

#general{
background-image:url("imagine.jpg");
background-repeat:no-repeat;
background-size: 100% 100%;
background-position: center;}
</style>
</head>

<body style="min-width:1340px">
<div id="general">

<div id="header" style="margin:0;padding:0;border:0;">

<h1>Home</h1>
</div>

<div id="menu">

<ul style="list-style-type:circle">
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="genuri.html">Genuri</a></li>
<li><a href="anime_list.html">Anime List</a></li>
</ul>

<button type="button" > <a href="http://www.animefreak.tv" target="_blank">Watch

Anime</a> </button>

10

ATESTAT LA INFORMATIC Anime PREZENTARE PROIECT

<img src="imagini/anm.jpg" alt="Mountain View" style="width:200px;height:180px;">

</div>

<div id="footer" style="border:2px solid red">

Copyright &copy
</div>

</div>
</body>

</html>

Codul surs de mai sus deschide , prin intermediul fiierului

Home.html prima pagin a aplicaiei de unde pot fi accesate restul
informaiilor.

Codul surs al paginii Anime list :

11

ATESTAT LA INFORMATIC Anime PREZENTARE PROIECT

<!DOCTYPE html>
<html>
<head>
<title> Anime</title>
<style>
h1 {
text-shadow: 5px 5px 5px #FF0000;
font-size:250%;}
h3 {
font-size:130%;}
div{
margin: 5px;
padding: 0;
border: 15px solid black;}
#header{
text-align:center;
background-color:black;
color:white;
padding:1px;
float:top;
border: 5px;}
#menu{
line-height:30px;
background-color:lightgrey;
height:600px;
width:200px;
float:left;

12

ATESTAT LA INFORMATIC Anime PREZENTARE PROIECT

padding:1px;}
#menu2{
line-height:10px;
background-color:black;
color:white;
height:830px;
width:250px;
float:right;
padding:1px;
text-align:left;}
#section {
width:680px;
float:left;
padding:10px;}
#footer{
background-color:black;
padding:10px;
color:white;
clear:both;
text-align:center;}
ul li a{

background-color:black;

color:white;
padding: 5px 10px;
border-radius:6px 6px 0 0;
text-decoration :none;}
a:hover{
background-color:orange;}

13

ATESTAT LA INFORMATIC Anime PREZENTARE PROIECT

#section a:hover{
background-color:red;}
#m2 a{
text-decoration:none;}
#m2 a:hover{
text-decoration:underline;
background-color:black;}
a{
color:black;}
</style>
</head>
<body style="min-width:1340px">
<div>
<div id="header">
<h1>Anime list</h1>
</div>
<div id="menu">
<ul style="list-style-type:circle">
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="genuri.html">Genuri</a></li>
<li><a href="anime_list.html">Anime List</a></li>
</ul>
<button type="button" > <a href="http://www.animefreak.tv" target="_blank">Watch
Anime</a> </button>
<img id="imge" src="imagini/anm.jpg" alt="Mountain View" width="200"
height="180">
</div>

14

ATESTAT LA INFORMATIC Anime PREZENTARE PROIECT

<div id="section" style="font-size:125%;text-align:center;">

<p><a href="bleach.html" onmouseover="changeImg('imagini/bleach.jpg')"
onmouseout="normalImg()"><b><i> Bleach </i></b></a>
<br>
<a href="code_geass.html" onmouseover="changeImg('imagini/codegeass.jpg')"
onmouseout="normalImg()"><b><i> Code Geass: Lelouch of the Rebellion </i></b></a>
<br>
<a href="death_note.html" onmouseover="changeImg('imagini/deathnote.jpg')"
onmouseout="normalImg()"><b><i> Death Note </i></b></a>
<br>
<a href="dragonball.html" onmouseover="changeImg('imagini/dragonball.jpg')"
onmouseout="normalImg()"><b><i> Dragon Ball </i></b></a>
<br>
<a href="drrr.html" onmouseover="changeImg('imagini/drrr.jpg')"
onmouseout="normalImg()"><b><i> Durarara!! </i></b></a>
<br>
<a href="gankutsuou.html" onmouseover="changeImg('imagini/gankutsuou.jpg')"
onmouseout="normalImg()"><b><i> Gankutsuou: The Count of Monte Cristo </i></b></a>
<br>
<a href="hellsing.html" onmouseover="changeImg('imagini/hellsing.jpg')"
onmouseout="normalImg()"><b><i> Hellsing </i></b></a>
<br>
<a href="kuroko.html" onmouseover="changeImg('imagini/kuroko.jpg')"
onmouseout="normalImg()"><b><i> Kuroko no Basket </i></b></a>
<br>
<a href="mirai_nikki.html" onmouseover="changeImg('imagini/mirainikki.jpg')"
onmouseout="normalImg()"><b><i> Mirai Nikki </i></b></a>
<br>
<a href="nana.html" onmouseover="changeImg('imagini/nana.jpg')"
onmouseout="normalImg()"><b><i> Nana </i></b></a>

15

ATESTAT LA INFORMATIC Anime PREZENTARE PROIECT

<br>
<a href="naruto.html" onmouseover="changeImg('imagini/naruto.jpg')"
onmouseout="normalImg()"><b><i> Naruto </i></b></a>
<br>
<a href="nobunaga.html" onmouseover="changeImg('imagini/nobunaga.jpg')"
onmouseout="normalImg()"><b><i> Nobunaga the fool </i></b></a>
<br>
<a href="ookami.html" onmouseover="changeImg('imagini/ookami.jpg')"
onmouseout="normalImg()"><b><i> Ookami Kodomo no Ame to Yuki </i></b></a>
<br>
<a href="psychopass.html" onmouseover="changeImg('imagini/psychopass.jpg')"
onmouseout="normalImg()"><b><i> Psycho-pass </i></b></a>
<br>
<a href="rxj.html" onmouseover="changeImg('imagini/romeoxjuliet.jpg')"
onmouseout="normalImg()"><b><i> Romeo x Juliet </i></b></a>
<br>
<a href="tokyo_ghoul.html" onmouseover="changeImg('imagini/tokyoghoul.jpg')"
onmouseout="normalImg()"><b><i> Tokyo Ghoul </i></b></a>
<br>
<a href="yuyuhakusho.html" onmouseover="changeImg('imagini/yuyuhakusho.jpg')"
onmouseout="normalImg()"><b><i> Yu Yu Hakusho </i></b></a>
</p>
</div>
<div id="menu2">
<h2 style="text-align:center;text-shadow: 5px 5px 5px #FF0000;font-size:200%;">
Top 3 </h2>
<br>
<li id="m2">
<h3><a href="nana.html" style="color:white"> Nana </a></h3>
</li>

16

ATESTAT LA INFORMATIC Anime PREZENTARE PROIECT

<a href="nanaimg.html"> <img src="imagini/nanaimg.jpg" width="250"
height="200"> </a>
<br>
<li id="m2">
<h3><a href="kuroko.html" style="color:white"> Kuroko no Basket
</a></h3>
</li>
<a href="kurokoimg.html"><img src="imagini/kurokoimg.jpg" width="250"
height="200"></a>
<li id="m2">
<h3><a href="tokyo_ghoul.html" style="color:white"> Tokyo Ghoul
</a></h3>
</li>
<a href="tokyoghoulimg.html"> <img src="imagini/tokyoghoulimg.jpg" width="250"
height="200"> </a>
</div>

<script>
function changeImg(x){
var tmp=document.getElementById('imge');
document.getElementById('imge').src = x;}
function normalImg(){
document.getElementById('imge').src = "imagini/anm.jpg";
document.getElementById('imge').width = "200";
document.getElementById('imge').height = "180";
}
</script>

<div id="footer" style="border:2px solid red">

17

ATESTAT LA INFORMATIC Anime PREZENTARE PROIECT

Copyright &copy
</div>
</div>
</body>
</html>

Codul surs de mai sus deschide , prin intermediul fiierului

anime_ list.html, pagina aplicaiei de unde pot fi accesate informaii
despre anime-urile respective.

Codul surs al paginii Kuroko no Basket:

<!DOCTYPE html>

18

ATESTAT LA INFORMATIC Anime PREZENTARE PROIECT

<html>
<head>
<title> Anime </title>
<style>
h1 {
text-shadow: 5px 5px 5px #FF0000;
font-size:250%;}
div{
margin: 5px;
padding: 0;
border: 15px solid black;}
#header{
text-align:center;
background-color:black;
color:white;
padding:1px;
float:top;
border: 5px;}
#menu{
line-height:30px;
background-color:lightgrey;
height:600px;
width:200px;
float:left;
padding:1px;}
#menu2{
line-height:10px;

19

ATESTAT LA INFORMATIC Anime PREZENTARE PROIECT

background-color:black;
color:white;
height:385px;
width:428px;
float:right;
padding:1px;
text-align:left;}
#section {
width:520px;
float:left;
padding:10px;}
#footer{
background-color:black;
padding:10px;
color:white;
clear:both;
text-align:center;}
ul li a
{ background-color:black;
color:white;
padding: 5px 10px;
border-radius:6px 6px 0 0;
text-decoration :none;}
a:hover{
background-color:orange;}
#section a{
text-decoration:none;

20

ATESTAT LA INFORMATIC Anime PREZENTARE PROIECT

text-shadow: 1px 0px 0px black;}
#section a:hover{
text-decoration:underline;
background-color:white;
text-shadow: 1px 1px 1px #FF0000;}
a{
color:black;}
p{
text-indent: 30px;}
</style>
</head>

<body style="min-width:1340px">
<div>
<div id="header">
<h1>Kuroko no Basket</h1>
</div>
<div id="menu">
<ul style="list-style-type:circle">
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="genuri.html">Genuri</a></li>
<li><a href="anime_list.html">Anime List</a></li>
</ul>
<br>
<button type="button" > <a href="http://www.animefreak.tv" target="_blank">Watch
Anime</a> </button>

21

ATESTAT LA INFORMATIC Anime PREZENTARE PROIECT

<br>
<img src="imagini/anm.jpg" alt="Mountain View"
style="width:200px;height:180px;">
</div>
<div id="section" style="font-size:125%">
<p> <i>
text
<br>
<br>
<b>Genuri:</b> sport (baschet), comedie, dram
<br>
<b>Autor:</b> Tadatoshi Fujimaki
<br>
<b>Regizor:</b> Shunsuke Tada
<br>
<b>Numr de episoade:</b> 25 x3 sezoane
</i></p>
</div>
<div id="menu2">
<img src="imagini/kuroko.jpg" width="428" height="350">
<br>
<br>
<audio controls>
<source src="music/kuroko.mp3" type="audio/mp3"
</audio>
</div>

22

ATESTAT LA INFORMATIC Anime PREZENTARE PROIECT

<div id="footer" style="border:2px solid red">
Copyright &copy
</div>
</div>
</body>
</html>

Codul surs de mai sus deschide , prin intermediul fiierului

kuroko.html, pagina aplicaiei care conine informaii despre anime-ul
Kuroko no Basket i melodia de nceput a acestuia.

23

ATESTAT LA INFORMATIC Anime PREZENTARE PROIECT

24

ATESTAT LA INFORMATIC Anime PREZENTARE PROIECT

5.Resurse hardware si software

Resurse minime recomandate:

Procesor(CPU): 500 MHz

Memorie(RAM): 68MB
Spatiu liber pe hard-disk: 69MB
Monitor: 1366*768

25

ATESTAT LA INFORMATIC Anime PREZENTARE PROIECT

Browser: Google Chrome 4.0 , Internet Explorer 9.0 , Mozilla Firefox 3.5,
Safari 4.0, Opera 10.5
Sistem de operare : Windows XP

6.Modaliti de utilizare

Lansarea aplicaiei se realizeaz accesnd fi ierul

Home.html .
Utilizarea programului este simpl.Meniul principal
permite navigarea printre pagini cu un singur click stnga al

26

ATESTAT LA INFORMATIC Anime PREZENTARE PROIECT

mouse-lui pe oricare dintre butoanele afiate sau pe link-urile

de pe fiecare pagin.

7.Bibliografie

www.wikipedia.com
www.youtube.com

27

ATESTAT LA INFORMATIC Anime PREZENTARE PROIECT

www.google.ro/imghp
www.animefreak.tv
www.w3schools.com