LUCRARE PENTRU ATESTAREA

COMPETENELOR PROFESIONALE
Elev : Lungu Alexandru
Profesor indrumtor : Lupulescu Florentin
Liceul : Teoretic "Tata-Oancea"
Sesiunea : 2014
Cuprins:
1. Motivul alegerii temei pag. 3
2. Structura aplicatiei pag. 4
3. Detalii tehnice pag. 5-7
4. Despre html pag. 8-10
5. Resurse de hard si soft pag. 11
6. Modalitati de utilizare pag. 12
7. Bibliografie pag. 12
7. Motivul alegerii temei
In ziua de azi industria muzicala este in plina
ascensiune acest lucru oferind o favorabila posibilitate de
dezvoltare platformelor de recomadari audio cum este si
aceasta.
Datorita numarului mare de asazisi "artisti" multe trupe
cu potential ajung sa nu fie descoperite niciodata sau
chiar sa se piarda. Aceasta platforma urmareste
promovarea adevaratilor artisti care chiar creeaza muzica
ci nu doar zgomot!

8. Structura aplicaiei
Platforma contine o pagina principala alcatuita din mai
multe butoane precum:
9. Categoria Acasa este o scurtatura catre radacina
platformei.
10. Categoria Orar contine informatii privind zilele si orele
in care se vor posta recomandarile audio.
11. Categoria Despre contine informatii privind scopul si
autorul platformei.
12. Categoria Contact contine un numar de telefon si un
email pentru doritorii de sugestii sau comentarii.
13. Detalii tehnice
Codul sursa al primei pagini , index.html:
!!D"C#$P% html&
!html lang'"en"&
!head&
!title&()""D%%!*title&
!meta charset'"utf+" *&

!lin, rel'"shortcut icon" href'"img*favicon.ico"&
!lin, rel'"st-lesheet" href'"st-le.css" t-pe'"te.t*css" *&
!st-le t-pe'"te.t*css"&
/bg 0
height: auto1
2idth: 34451
position: fi.ed1
zinde.: 3441
left: 4p.1
top: 4p.1
minheight: 34451
min2idth: 3464p.1
7
!*st-le&
!meta name'"vie2port" content'"2idth'device2idth8 initial
scale'3.4"&

!*head&

!bod- class'"bod-"&

!img src'"img*bg.jpg" name'"bg" 2idth'"946+" height'"34+4"
id'"bg"&

!header class'"main:eader"&
!center&!img src'"img*logo.png"&!*center&
!nav&!ul&
!li class'"active"&!a
href'"inde..html"&ACA(A!*a&!*li&
!li&!a href'"orar.html"&";A;!*a&!*li&
!li&!a href'"despre.html"&D%(P;%!*a&!*li&
!li&!a href'"contact.html"&C"<#AC#!*a&!*li&
!*ul&!*nav&
!*header&
!div class'"mainContent"&
!div class'"content"&
!article class'"topcontent"&
!header&
!h9&!a href'"p9.html"
rel'"boo,mar," title'"=.A.>. 9"&=.A.>. 9!*a&!*h9&
!*header&
!footer&
!p class'"postinfo"&Postat pe 3?
>ai 9436 de Ale.!*p&
!*footer&
!content&
!p&Am ajuns la cea dea 9a
postare =.A.>. lucru cei va face pe toti cei ? indivizi ce urmaresc
aceasta serie foarte fericiti. !*p&
!*content&
!p&!a href'"p9.html"&C@ICA P%<#;B
A CI#I #"# A;#IC"@B@!!*a&!*p&
!*article&
!article class'"bottomcontent"&
!header&
!h9&!a href'"p3.html"
rel'"boo,mar," title'"=.A.>."&=.A.>.!*a&!*h9&
!*header&
!footer&
!p class'"postinfo"&Postat pe 99
>artie 9436 de Ale.!*p&
!*footer&
!content&
!p&Ce este =.A.>.C Ca sa no mai
lungim este un acronim de la =ust A2esome >usic8 concept preluat de
la -outuberul =a,e ce gazduieste canalul Dsauce ?.!*p&
!p&!a href'"p3.html"&C@ICA P%<#;B A CI#I #"#
A;#IC"@B@!!*a&!*p&
!*content&
!*article&
!*div&
!aside class'"topsidebar"&
!article&
!h9&";A;!*h9&
!p&Program postari:!br&
@B ";A ?!br&
DB ";A 39!*p&
!*article&
!*aside&
!aside class'"middlesidebar"&
!article&
!h9&I<E"!*h9&
!p&F%<B;I >BGICA@% ;%C">A<DA#%:
;"CA8 :IP:"P8 %@%C#;IC (I A@#%@%!*p&
!*article&
!*aside&
!aside class'"bottomsidebar"&
!article&
!h9&C"<#AC#!*h9&
!p&<B>A; ";A<F%: 4H6I339IJ?!*p&
!*article&
!*aside&
!*div&
!footer class'"mainEooter"&
!p&Cop-right Kcop-1 9436 !a
href'"inde..html"&s2oodee!*a&!*p&
!*footer&
!*bod-&
!*html&
4. Despre HTML
:-per#e.t >ar,up @anguage L:#>@M este un limbaj de
marcare utilizat pentru crearea paginilor 2eb ce pot fi afiNate
Ontrun bro2ser Lsau navigatorM. (copul :#>@ este mai
degrabP prezentarea informaQiilor R paragrafe8 fonturi8
tabele N.a.m.d. R decSt descrierea semanticii documentului.
(pecificaQiile :#>@ sunt dictate de )orld )ide )eb
Consortium L)?CM.
Introducere
:#>@ este o formP de marcare orientatP cPtre prezentarea
documentelor te.t pe o singura paginP8 utilizSnd un soft2are
de redare specializat8 numit agent utilizator :#>@8 cel mai
bun e.emplu de astfel de soft2are fiind bro2serul 2eb.
:#>@ furnizeazP mijloacele prin care conQinutul unui
document poate fi adnotat cu diverse tipuri de metadate Ni
indicaQii de redare. IndicaQiile de redare pot varia de la
decoraQiuni minore ale te.tului8 cum ar fi specificarea
faptului cP un anumit cuvSnt trebuie subliniat sau cP o
imagine trebuie introdusP8 pSnP la scripturi sofisticate8 hPrQi
de imagini Ni formulare.
>etadatele pot include informaQii despre titlul Ni autorul
documentului8 informaQii structurale despre cum este
OmpPrQit documentul On diferite segmente8 paragrafe8 liste8
titluri etc. Ni informaQii cruciale care permit ca documentul sP
poatP fi legat de alte documente pentru a forma astfel
hiperlin,uri Lsau 2ebulM.
:#>@ este un format te.t proiectat pentru a putea fi citit Ni
editat de oameni utilizSnd un editor de te.t simplu. #otuNi
scrierea Ni modificarea paginilor On acest fel solicitP
cunoNtinQe solide de :#>@ Ni este consumatoare de timp.
%ditoarele grafice Lde tip )$(I)$FM cum ar fi >acromedia
Dream2eaver8 Adobe Fo@ive sau >icrosoft ErontPage permit
ca paginile 2eb sa fie tratate asemPnPtor cu documetele
)ord8 dar cu observaQia cP aceste programe genereazP un
cod :#>@ care este de multe ori de proastP calitate.
:#>@ se poate genera direct utilizSnd tehnologii de codare
din partea serverului cum ar fi P:P8 =(P sau A(P. >ulte
aplicaQii ca sistemele de gestionare a conQinutului8 2i,iuri Ni
forumuri 2eb genereazP pagini :#>@.
:#>@ este de asemenea utilizat On email. >ajoritatea
aplicaQiilor de email folosesc un editor :#>@ Oncorporat
pentru compunerea emailurilor Ni un motor de prezentare a
emailurilor de acest tip. Eolosirea emailurilor :#>@ este un
subiect controversat Ni multe liste de mail le blocheazP
intenQionat.
Elementele de marcare
>ai jos sunt tipurile de elemente de marcare On :#>@:
>arcare structuralP. Descrie scopul unui te.t. De
e.emplu:
!h3&Eotbal!*h3&
DirecQioneaza bro2serul pentru a reda "Eotbal" ca pe
cel mai important titlu. >arcarea structuralP nu are un
anumit stil predefinit8 dar cele mai multe bro2sere 2eb
au standardizat modul On care acestea sunt afiNate.
De e.emplu8 titlurile importante Lh38 h98 etc.M sunt
aldine Ni mai mari decSt restul te.tului.De notat cP "h3"
este folosit doar o singurP datP per paginP deoarece cu
el este marcat titlul ei.
>arcare pentru prezentare. Descrie cum apare un te.t8
indiferent de funcQiile sale. De e.emplu:
!b&OngroNat!*b&
Da afiNa te.tul "OngroNat" cu litere groase8 aldine.<otP:
:tml a inceput On ultimii ani sP OnceapP sP nu mai
foloseascP acest gen de taguri pentru cP "b" nu dP
sens paginii8 pe cSnd tagul "strong" LadicP strong
emphasisM dP un OnQeles paginii8 Ni mai important8
asemenea taguri pentru prezentare doar OncarcP o
paginP cu informaQii Ni o fac astfel mai greu de OncPrcat8
iar apoi dacP ataNezi un document C(( la paginP8 o
singurP modificare la C(( Lde e.: de la "font
2eight:italic" la "font2eight:bold" va schimba tot
te.tul selectat8 Ni de e.emplu8 lin,urile vor trece de la
te.t Onclinat la te.t OngroNat8 plus cP On C(( avem
avantajul de a putea preciza cSt de mari sau mici sP fie
literele On pi.eli Tp.U8 On puncte TptU8 etc.Mavem acelaNi
efect ca Ni cPnd am avea de schimbat toate tagurile de
"i" de pe paginP On taguri de "b"8 muncP care chiar Ni la
un 2ebsite mic este enormP8 ce sP mai vorbim de unul
de genul 2i,ipedia. ANa cP dacP vreQi sP OncepeQi o
carierP On html sau un hobb- LNi sP aveQi succesM nu
folosiQi aceste taguri8 nu degeaba sa inventat C((ul.
>arcare pentru hiperlin,. @eagP pPrQi ale unui
document cu alte documente. De e.emplu:
!a href'"http:**ro.2i,ipedia.org*"&)i,ipedia
;omSneascP!*a&
Da reda )i,ipedia romSneascP ca hiperlin, cPtre un
B;@ specificat.
%lemente speciale L2idgetM. CreeazP obiecte8 cum ar fi
butoanele Ni listele.
Doar marcatorii de prezentare LOmpreunP cu foile de stiluri
C((M determinP cum conQinutul din interiorul marcatorului va
fi prezentat. CeilalQi marcatori spun bro2serului ce obiecte
sP redea sau ce funcQii sP e.ecute.
5. Resurse hard si sot necesare
(iteul a fost realizat cu ajutorul a mai multe programe
precum Drem2eaver8 Adobe Photoshop C( I. CerinQele de
sistem ale programului nu sunt e.agerate.
Resurse minime :
1) Hardware :
14. Procesor (CPU) : 500 H! "
15. emorie (R#): $% &
16. S'a(iu li)er 'e *ard+dis, : -0 &
17. onitor :10.%/0$1
18. Un )rowser oarecare: C*rome2 o!illa (nu este
com'ati)il 3nternet E4'lorer 0)
.) Software :
+ Sistem de o'erare : 5indows 6178P71 sau altele9
Resurse recomandate:
1) Hardware :
19. Procesor (CPU) : 1000 H! "
20. emorie (R#): 1.1 &
21. S'a(iu li)er 'e *ard+dis, : -0 &
22. onitor : :;# -.+)it color (10.%40$1)
+ Un )rowser oarecare: C*rome2 o!illa (nu este
com'ati)il 3nternet E4'lorer 0)
.) Software :
+ Sistem de o'erare : 5indows 6178P71 sau altele9
.Modalit!i de utilizare
Utili!area 'ro<ramului este
foarte sim'la= Printr+o sim'la a'asare a
clic,+ului stan<a al mouse+lui 'e unul din
)utoanele 'roiectului 'uteti a>un<e la
informatia dorita=
?in,+urile din )ara ori!ontala a 'a<inii va
ofera acces la toata informatia cu'rinsa
in site=
?ansarea se reali!ea!a accesand
fisierul inde4=*tml=
Platforma a>uta la im)o<atirea
li)rariei mu!icale 'ersonale cu melodii si
tru'e noi=
7.Bibliografie
*tt':77www=@outu)e=com
*tt':77www=<oo<le=com