Tehnologii Web

1.Istoria internetului
Internetul-nscut pe fondul Rzboiului Rece SUA-Rusia (anii 43-57) ca prim
instrument de a comunica informaiile la distan!
-"n #57 so$ieticii lanseaz S%U&'I( lu)nd na*tere cursa spaial
-+IS+',-.+R solicit departamentului aprrii s fondeze AR%A (Ad$anced
Researc/ %ro0ect A1enc2)3
-"n #45 AR%A demareaz cercetri "n domeniul transmisiunii datelor prin
calculator "n $ederea crerii unei reele indestructibile "n caz de atac nuclear3
-"n #44 %aul 6arau creaz o reea bazat pe transmiterea de mesa0e prin comutare
de pac/ete7 din moti$e de securitate informaia era se1mentat *i transmis "n
pac/ete fiind recompus la destinaie3 dac un nod este distrus8 informaia se
transmite pe o rut alternati$a3
-"n #49 AR%A se imparte "n :AR%A *i AR%A '+& (conectarea la distan8
reeaua de$ine international)
-"n #75 ia na*tere sistemul de operare U'I; (6rian (arni1/am8 :ennis Ritc/ie)
bazat pe limba0ul <3 calculatorul personal A=&AIR *i ca firma >icrosoft (%aul
<allen)3
-"nc din #73 :S%I% este propus ca standard pentru AR%A'+& acceptat ca
protocol "n #933
-"n #7? apare reeaua de cercetare US+'+&3
-"n #94 se introduce :'S3 :'S ca *i SU' bazate pe U'I; a dus la dez$oltarea
rapid a internetului8 mai ales c "n #97 se creaz 'S@ '+& pentru a conecta
centrele cu super calculatoare!
'S@ '+& A or1anizaie necomercial permite conectarea la internet fr
restriciile cu caracter militar!
AR%A '+& dispare "n #?B!
-"n #?5 accesul internet e asi1urat de firme comerciale3
%rimul instrument de cutare a fost AR<,I+ (#?B)!
&ot "n #?B &eam 6erners =ee in$enteaz o metod de eCpediere "ntre cercettori a
datelor ce conin teCt *i ima1ini!
-"n #?D se lanseaz protocolul E-%,+R3
-"n #?3 apare primul broFser numit >osaic bazat pe elemente .indoFs ce
inte1reaz ima1ini cu sunet8 teCt3
>osaic face ca8 dac "n #?3 eCistau 5BB de ser$ere8 "n #?? s fie circa ?85
milioane!
-"n #?5 SU' lanseaz GAHA8 iar >icrosoft I'&+R'+& +;%=-R+R3
D
-"n 5BBD apare te/nolo1ia Fireless!
'e$oia de standardizare a 1enerat aparia unor or1anisme de standardizare dintre
care7 FFFc( .orld .ide .eb <onsortium #?4)8 IS-<8 Internet <orporation @or
Assi1ned 'ames and 'umbers!
Obs: FFFc creeaz standarde *i recomandri R@< (ReIuest @or <omment)
pentru a "mbunatti calitatea Feb-ului "n partea s cea mai acti$a(FFF)!
Standardele FFFc se refer la7
-/tml8 C/tml8 Cmn8 dom8 soap8 Fsdl8 rdf8 isoc(non-profit #?58
re1lementeaza standardele educatiei *i politicii internetului)!
URL
Obs: <onectarea la internet se face prin cablu U&%8 &H8 linie telefonic8 Radio-
>odem8 antena asincron sau mobil!
UR=AUniform Resource =ocatorAo adresa unica a unei resurse Feb!
<onine 4 pri7
D) protocolul
5) locaia
3) numele 1azdei8 site-ului
4) domeniul conform sintaCei
protocol7JJlocaia!numeK1azd!domeniu
+Cp7 /ttp7JJinformatica!didfr!ub!roJa$izier-electronic
Protocolul reprezint metoda de accesare a resursei *i reprezint un set de re1uli
de comunicaie8 impreuna cu descrierea formatului mesa0elor ce trebuiesc
respectate de calculatoare pentru ca acestea s poat sc/imba informaia!
<onform modelului de referin -SI eCist 7 ni$ele de comunicare8
ultimul8 ni$elul aplicaie8 deine cele mai commune protocoale! <ele mai uzuale7
6it &orrent7 protocol parta0are fi*ier e peer-to-peer!
-:'<% -%-%3
-@&% -'+& 6I-S
-,&&% -S--%
-I'A% -&+= '+&
-IR< -.AIS
-;>%%
Locaia
FFF!stiinte!ub!roJacti$itati
Numele gazdei 7 numele 1azdei date de administrator
Organizarea domeniilor e ni!ele7
I!D!Eu$ernamental (1o$)
5
5!>ilitar(mil)
3!+ducaional(edu)
4!<omercial(com)
5!Lmbunatirea retelei-'+&
II!:omeniul rii7R-8 @R8 I&
III!Subdomeniu7U68 USU
IH!Sub-Subdomeniu7stiinte(ub!ro)
Obs7 Un computer se identific teoretic "n mod unic pe net prin adresa sa de ip
(nr!binar pe 35 de bii)
Un ip e format din 4 seturi de numere!
Adresele-de cls A sunt de forma r!c!c!c
-de cls 6 de forma r!r!c!c
-de cls < de forma r!r!r!c
Adresa ip este tradusa "ntr-un nume 1en 53D!D45!!!!8iar dac reeaua e de tip
+&,+R'+&8 conectarea se face uzual "n baza adresei >A< a plcii de reea!
Obs7 >etoda prin care ip-urile li se asociaza un nume se numeste ser$er :'S ce
ruleaza pe ser$ere-le :'S!
<on$ersia ip nume se face automat!
Obs7 :in punct de $edere ar/itectural nodurile de internet sunt de 3 tipuri7
a) noduri de ni$el mondial(ip de clasa A)-la care sunt conectate nodurile
continentale
b) noduri continentale (ip de clas 6)- la ni$elul unei ri la care sunt conectate
noduri locale ale altor retele (I<>8 etc)
c) noduri locale (ip de clas <)-la ni$el local ce trebuie recunoscute de un nod
continental!
Alocarea adreselor de ip se face de catre or1anizaii specializate(IA'A8 RI+8
A@RI'I<)!
Ip $ersiunea 4 (ip$4) este 1eneraia urmatoare de protocol!
Ip$4 folosit la inceputul anului 5BB4 tinde s nu scaleze8 numrul de staii
conectate la o astfel de reea fiind limitat! Internetul se apropie de aceast limit!
Ip$4 implic mrirea spaiului de adrese de la 5 la 59 ca *i autoconfi1urarea
adresei printr-un mecanism fr stri!
<are e diferena dintre protocoalele I>A% *i %-%3M %rin I>A% se pot citi mail-
urile de pe ser$ere8 "n timp ce prin %-%3 acestea se pot citi dup ce s-au
descarct pe calculatorul client8 offline!
:eza$anta0ul %-%37 autentificarea nu e securizat8 userul *i parola circul)nd de la
client la ser$er8 necriptate!
3
WWW reprezint partea cea mai acti$a a internetului atat prin prisma utilizrii
c)t *i a dez$oltrii acestuia!
+ste o reea ce stabile*te le1tura "ntre nodul internet folosind cu precdere
/ttp pentru re1sirea de informaii din orice domeniu7
+Cp linN-uri7JJro!FiNipediaJJmodelulKosi
<um funcioneaza ser$iciul FFF!
6roFser-ul comunic prin intermediul protocolului /ttp *i al tcpip cu un
ser$er Feb!
%ractic FFF funcioneaz conform modelului <=I+'& S+RH+R8
broFser-ul fiind clientul!
Spre deosebire de ftp8 /ttp funcioneaz discontinuu! >ai eCact7
D! 6roFser-ul strabile*te o coneCiune &<%JI% ctre ser$er
%rotocolul la ni$el de aplicaie utilizat e specificat printr-un numr de port!
(/ttp-9B)
5! 6roFser-ul emite o cerere /ttp ctre ser$er alctuit din7
a) linie de cerere (R+OU+S&-=I'+) format dintr-o comanda /ttpPurl
specificatP$ersiunea protocolului /ttp utilizat3
b) un antet (R+OU+S&-,+A:) cu informaii despre cerere *i despre
clientul care eCecut cererea8 codificat3
c) corpul cererii-documentul
<ele mai utilizate comenzi /ttp (metode) sunt7
-1et7 se solicit ser$er-ului s utilizeze resursa dat de url-ul din cerere
pentru a prelucra informaiile transmise "n corpul cererii3
-put7 se solicit ser$er-ului s utilizeze informaiile transmise "n corpul
cererii drept resurs identificat prin url-ul din cerere!
3! Ser$er-ul prime*te cererea8 o interpreteaz *i emite un rspuns broFser-ului8
format din7
-un cod de stare (3 cifre)7 descrie modul de finalizare a cererii *i o scurt
descriere a codului3
-un antet cu informaii despre sursa solicitat3
-un corp referitor la datele care se transfer!
".Limba#ul $T%L &,2per &eCt >arNup =an1ua1e)
=imba0 de marcare a /iperteCtului bazat pe descrierea acestuia(formatarea)
prin intermediul unor ta1uri(etic/ete)!
'u este un limba0 de pro1ramare!
<reat "n #?B de &im 6erners =ee8 :aniel <onner28 deri$at din SE>= (#94)!
Obs: :ocumentele /tml sunt eCclusi$ de tip teCt!
Structura unui /tml7
Q/tmlR
4
Q/eadR
QtitleR
QJtitleR
QJ/eadR
Qbod2R
QJbod2R
QJ/tmlR
Ln antet este indicat a se specifica titlulPalte informaii suplimentare
precizate de re1ula intr-o serie de ta1-uri meta!
>eta admite atributele SnameT8 ScontentT!
Obs: Un ta1 este descris "n mod standard prin 5 etic/ete perec/e 1en
QnumeKta1R!!!!!QJnumeKta1R *i pot a$ea o sum de atribute care la r)ndul lor pot
a$ea o sum de $alori! Acestea (atributeP$alori) fiind specificate e$entual "n
interiorul primului ta17 QnumeKta1!!!!!!!!!R!!!!!!!QJnumeKta1R conform sintaCei
atributAT$aloareT
<orpul documentului(Qbod2R)
:elimitat de Qbod2R!!!!QJbod2R sau dac se folosesc cadre "ntre
QframesetR!!!!!!QJframesetR!
Qbod2R admite atributele7 SbacN1roundS ASurlT8 bgcolor'(culoare(
Obs: T<uloareT poate fi descris "n cod /eCa1esimal RE6 din 4 cifre c)te 5 pt R
(red- ro*u)8 E (1reen-$erde)8 6 (bleu) cu $alori de la BB (minim) la @@ (maCim)
precedate de simbolul SUT (eCp7 UBBBB@@ -R albastru)!
Atributul S&eCtS cu $aloare teCtAculoare stabileste culoarea teCtului!
Similar =inN8 HlinN8 AlinNATculoareT stabile*te culoarea pentru linNuri8 linNuri
$izitate sau accesate!
<omentariile /tml se plaseaz "ntre QV--teCt comentariu-R nefiind luate "n
considerare de ctre broFser!
)ormatarea te*tului
QfontR cu atributele7 face A nume font (arial8 etc)
size A n (de la D la 7)
Obs: >rimea fontului poate fi specificat at)t absolut8 c)t *i relati$ la
dimensiunea curent a fontului 3 prin PJ- n se "nele1e un font cu PJ- n puncte fa
de cel la care se refer!
Obs 1: %entru dimensiuni putem folosi puncte tipo1rafice (pts)8 piCeli (pC)8 em!
": @ontul implicit este &imes8 mrime 38 blacN!
+: Se poate modifica dimensiunea implicit a fontului folosind Qbasefont
sizeA5R!
5
,etul de caractere
Se specifica printr-un ta1 meta8 parametrul Sc/arsetT al c)mpului Scontent
t2peT al protocolui /ttp!
Specificarea caracterelor speciale sau care nu au corespondent pe tastatur
se poate face prin7
a) codul numeric asociat precedat de SWUT *i terminat cu S3T 1en7 WU5393
ec/i$alent cu S"T
b) referine speciale8 precedate de SWT *i terminat cu S3T7 WAcirc3
ec/i$alent cu S)T!
-.ecte asura te*tului &taguri ereche/
QIR Italic
QUR Subliniat
Q6R 0old
QsmallR mic
Qbi1R mare
Qstron1R mai mare
QstriNeR tiat
QemR embossAe$ideniat
QcodeR tip codQJcodeR
QIuoteR
QciteR
QOR
QblocNIuoteR
Indicii e*oneni
1. Sup
". Sub
QpR <- QsubR5 QJsubR QJpR
QpR a QsupR 5 QJsupR Pb QsupR 5 QJsupR QJpR
Te*t re.ormatat
Obs 1: &eCtul poate fi formatat la ni$el de bloc prin Qdi$RX!QJdi$R!
Obs ": Eruparea mai multor elemente d"ntr-un bloc *i formatarea acestora la
ni$el de caracter se face prin QspanRXQJspanR!
Paragra.e 1i antete aragra.
QpRX!QJpR cu atributele
Ali1nAleftYcenterYri1/tY0ustif2
&itleAtitlu
:irArtlYltr
4
=an1Alimba
Antetele para1raf au 1radele de mrime *i diferentiere de la ,DX,4!
Obs +: Saltul la linia urmatoare se face prin QbrRXQJbrR
Liste
1. ordonate
QolRXQJolR
Atribute7
&2peADYaYAYi
". neordonate
QulRXQJulR
&2peAdiscYcircleYsIuare
Obs: - intrare intr-o list7QliR!!!QJliR
Atribut comun $alueATnrT ce specifica $aloarea de etic/etare a intrrii "n
list!
Liste de de.iniii
QdlR!!!QJdlR
Lntre acestea se introduc intrrile constituite din termeni "n 5 pri7
QdtR!!!!QJdtRinline(element)
QddR!!!QJddRelement de formatare la ni$el de bloc
$2erleg3turi
Un /2perlinN are 5 puncte de capt numite ancore (surs8 destinaie)! Sunt
prezente doar "n Qbod2R!
+lementul Sanc/orT(A)
Atribute7
/refATurlT
id sau numeATteCtT sau *ir de caractere
&ipuri de /2perlinN-uri7
a) eCtern (alt document)
+Cp7 QA /refATurl!le1atura eCternaTRcatre aceast resursQJAR
b) intern (locaie din pa1ina curent)
+Cp7 QA nameATnumeKancoraTR!!!!!!!QJAR
QA /refATUnumeKancoraTRctre CQJAR
7
c) eCecutabil Z similar cu b) doar c "n loc de /ttp se specific protocolul
de acces al resursei *i adresa absolut
+Cp7QA /refA file7JJc7JindeC!/tmlR ctre indeC!/tml din c7Jadresa
QJAR
QA /refA ftp7JJ1o!roJ!!!!!!!!!!
%roprieti pentru linN-uri
Stabilirea unei locaii de referin cu atributul SbaseT!
Obs: base se plaseaz "n Q/eadR
Qbase /refAFFF!ub!roRuni$!bc!
<ulori
-linN-albastru
-$linN-linN-uri $izitate(mo$)
-alinN-le1tur acti$
=an1 7 %entru stabilirea limbii Qlan1R
</arset 7 set de caractere
&itle 7 plasat "n A8 face ca teCtul specificat s apara ca etic/et la Smouse o$erS!
Imagini la 4ncore
%entru a se realiza un linN pe o ima1ine folosim "n locul teCtului uzual dintre
SancoreS un element Sima1eS caruia ii precizam sursa(src A locaia)!
+Cp7QA name A T!!!!!T titleATclicN pe pozaTRQim1 srcATima1ineJpoza!0p1TRQJAR
)ereastra de a.i1are
Implicit noua pa1in accesat se desc/ide "ntr-o fereastr nou!
Eestiunea ferestrei de afisare se face prin specificarea unei $alori a elementului
Star1etS!
Halorile pentru tar1et pot fi7
5 blanN 7 fereastra noua
5 parent 7 fereastra parinte
5 top 7 "n fereastra cea mai sus
5 self
Obs 1: Un alt atribut al elementului Sim1S este alt(SalternateT) Z se afi*eaz un
teCt "n locul ima1inii!
+Cp7 Qim1 srcATima1iniJpoza-6>.!0p1 altATpoza cu un 6>.TR
Obs ": atributele Slan1S *i SdirS ale lui Sim1S controleaz limba *i direcia
teCtului!
9
4liniere te*t 6 imagine
SAli1nS cu $alorile7 StopS8SmiddleS8SbottomS!
:ac teCtul este mai amplu acesta se poate alinia "n raport cu ima1inea prin
specificarea pentru Sali1nS a $alorii Sri1/tJleftS!
Obs: <ontrolul dimensiunilor ima1inii se face specificand $aloarea uzual "n
piCeli pentru S/i1/tS *i SFit1/S (5BB)!
</enarul unei ima1ini se insereaza folosind atributul SborderS!
:istantele pe orizontalaJ$erticala pentru ima1ini *i teCt se stabilesc prin
atributele S/spaceT *i S$spaceT!
<ontrolul intreruperii teCtului *i re$enirea la mar1inea din stan1a ecranului
dup ima1inea 1rafica se foloseste atributul SclearS al elementului SbrS cu
$alorile ri1/t8 left8 all!
,unete
Includerea unui sunet se face prin definirea unui linN catre fi*ierul ce-l conine!
Obs: :ac se includ fi*iere mari8 "ncrcarea $a fi lent!
&ipuri de fi*iere de sunet7
>I:I7 suportate direct de broFser fr a fi necesar un plu1-in!
.AU7 suportate direct de mai multe broFsere!
AU7 calitate mai slab a sunetului!
AI@7 dimensiuni mari
>%3 Z >%+E 7 fi*iere comprimate8 calitate bun8 dimensiune mic
>%47 necesar un plu1-in!
RA8 R%>8 %%>7 compresie mai bun dec)t >%3!
S.A7 compresie D747D8 transmisia se face pe *iruri de date ce permite
redarea c/iar inainte ca file-ul s se "ncarce complet!
+Cp7QA /refA SIK,a$eKAK:ream!midTRAscult A66AQJAR
Un sunet de fond poate fi inte1rat! %utem folosi Sb1soundSAurl (doar I+)
Atribute Sb1soundS 7
-src
-loop
-$olume
Sec$ene $ideo
->%+E- forma oficial de compresie $ideo
-.-.- similar cu AHI
Obs: Similar cu Sb1soundT se poate folosi "n cadrul Sim1T atributul d0nsrcAurl
?
+lementul S-b0ectT
Ln1lobeaz orice element multimedia fiind folosit "n asociere cu elementul
SparamT(parametru)!
+Cp7 Qob0ect dataAT9 miles!a$iT t2peAT$ideoJms$ideoT /ei1/tATD5BT
Fi1/tATD5BTR
Qparam $alueATautostartTR
QJob0ectR
SAppletT- aplicaii de mici dimensiuni scrise "n 0a$a!
Atribute7
codebase
codeA sir de caractere
'ameATnumeT
Tabele
Obs: :e*i actualmente rar folosit8 datorit succesului css8 formatarea pa1inilor
cu a0utorul tabelelor ofer un control strict al aspectului! &abelele trebuie sa fie
capabile s-*i modifice dinamic dimensiunile pentru a se adapta la dimensiunea
curent a ferestrei *i la mrimea fonturilor!
Atribute
-summar2A sir de caractere Z ni$elul *i structura tabelelor
-ali1nAleftJ centerJ ri1/t Z specifica alinierea tabelului "n document!
-Fidt/
-/ei1/t
-border
-colsAnumr coloane
-cell spacin1Aspecific spaiul dintre celule cat *i dintre celule *i mar1ine
tabel3
-cell paddin1Aspecific spaiul dintre c/enarul celulei *i coninutul ei3
- linie orizontal de tabel se introduce prin QtrRconinut linie QJtrR
:ac linia descrie antetul tabelului atunci QtrR!!!QJtrR se "nlocuie*te cu
Qt/R!!!!!QJt/R!
:atele din interiorul celulelor se introduc folosind QtdR!!!QJtdR!
'r!crt 'ume *i prenume Harsta
D !!!!!! 59
5 !!!!!!! 34
3 !!!!!!!!! 43
Titlul unui tabel
DB
A nu se confunda cu antetul! Se specific prin QcaptionR principalul atribut fiind
ali1nAbottomJ topJ leftJ ri1/t!
QtableR
Qcaption ali1nATbottomTR
QpRtitlu tabel plasat 0osQJpR
QJcaptionR!!!
!!!!QJtableR
Erupare linii coloane
Eruparea coloanelor7Tcol1roupT
Atribute7
Span- numr de coloane "n 1rup
.idt/- impune o laime unic pentru coloanele 1rupului
Ali1n- tip de aliniere unic pentru coloanele 1rupului
Obs: pentru a obine proprieti diferite ale coloanei unui 1rup se utilizeaz
elementul col!
Qtable cellspacin1ADBR
Qcol 1roupR
Qcol Fidt/A3B[ ali1nATmiddleTR
Qcol ali1nATri1/tTR
QJcol 1roupR
QtrR
Qtd %rima coloana teCt aliniat la stan1aR
Q$ali1nATmiddleTR
Qtd coloana a doua teCt centratR
Q$ali1nATbottomTRcoloana a treia teCt aliniat dreapta 0os
QJtableR
:ez$oltarea automata atunci cand se a0un1e la mar1ine sau la zona de
c/enar se obine cu atributul SnoFrapT!
Se obine astfel celule sau coloane de laime cat de mari!
<elula DD <elula D5
<elula 5D <elula 55
DD
QtrR
QtdRcelulaDDQJtdR
QtdRcelulaD5QJtdR
QJtrR
QtrR
QtdRcelula5DQJtdR
Qtd neFropR!!!!!!!!!RtdR
QtdRcelula55QJtd!
QJtrR
<uloarea de fundal se stabileste prin Sb1colorS asociat lui QtableR sau QtrR
sau Qt/R sau QtdR!
Eruparea celulei
%entru eCtinderea unei celule asupra celor situate la dreapta ei(pe linii) sau
eCtinderea catre dedesupt (pe coloane)!
<elulele $ide se obin prin QtdR!!!QJtdR8 iar afisarea unui c/enar pentru
celulele $ide se introduce SWnbspS sau QbrR!
Hizibilitatea c/enarului "ntre celuleJtabel
Atributul SframeT
Haloare eCplicaie
$oid frc/enar
boC
border
c/enar pentru intre1ul tabel
abo$e linie de c/enar pe latura superioara
beloF latura inferioara
/sides (/orizontal) latura superioaraPinferioara
$sides ($ertical) c/enar laturi stan1a-dreapta
l/s stan1a
D5
r/s dreapta

Atributul SrulesS al elementului table permite definirea $izibilitii
c/enarului tabelului!
Haloare +Cplicaie
name font c/enar
roFs linii de c/enar "ntre randurile tabelului
cols linii de c/enar "ntre coloanele tabelului
all c/enar complet "n 0urul celulelor
1roup c/enar complet "n 0urul unor 1rupuri de
celule specificate prin col 1roup P/ead8
tbod2 *i tfoot
roFspanATnTsau roFspanATnT TnTA numr de coloaneJlinii ce se
1rupeaz
@ormatare tabel prin "mprire "n blocuri
Aceste blocuri pot fi formatate separat3 se foloseste t/8 tfoot pentru definirea
unui bloc dintr-o sin1ur linie pentru antet (/eader)8 respecti$ subsol (footer) iar
tbod2 pentru definirea unui bloc ce conine mai multe linii interioare tabelului
dat!
Imagini h3ri
A! >apare ima1ine
Ima1inea este "mprit "ntr-o sum de zone acti$e A linN-uri ctre resurse
FebJ locale!
Ima1inea /art se creeaz direct pe calculatorul client (acesta determin
coordonatele zonelor *i url-urile asociate)8 sau pe ser$er!
Ima1inea ce $a fi mapat trebuie s eCiste!
Aceasta e di$izat "n zone acti$e dup care se creeaz elementul ce $a
conine /arta8 inclusi$ atributele acestuia!
Ima1ine /art client site7
D3
D! Ale1ere ima1ine
5! construcie /art "n interiorul unui bloc definit de QmapR!!!QJmapR un atribut
obli1atoriu pentru map este name cu $aloareAnume /art sau id
3! di$izarea /arii se realizeze cu elementul elia
4! includerea ima1inii "n codul /tml7ima1inea cruia i se precizeaz src(url
ima1!/arta)8 mapATUnume /artaT
Obs: dac /arta se afl "ntr-o alt pa1in Feb8 usemap $a primiA pa1 cu
/arta!/tmlUnume /arta pa1 cu /tmlJUnume /arta
A! /art ser$er side
D! definirea zonelor acti$e *i a url-urilor asociate se stoc/eaz "ntr-un fi*ier cu
eCtensia !map ce conine instruciuni 1en7
-default indeC!/tm
-rect
-pol2
-circle
5! fi*ierul /art numeharta.map e stocat pe ser$er "n folderul Jmap!
JMap nu este de tip /tml8 trebuie declarat un fi*ier de confi1urare 1en
image.map.conf care se 1se*te "n rdcina ser$erului8 1estiunea ima1inii /art
fc)ndu-se prin intermediul unui pro1ram c1i instalat!
3! funcionarea ima1inii /art
Se foloseste atributul ismap al elementului image! Acesta indic broFser-
ului c se afl "n zona unei ima1ini /art! 6roFser-ul recupereaz coordonatele
zonelor mapate *i lanseaz pro1ramul care se afl "n fi*ierul c1i-binJima1emaper!
Acesta desc/ide la r)ndul su ima1emap!com *i 1se*te adresele reale din
numeharta.map!
6! client side Z definire zone acti$e
Atributele elementului SareaS7
-s/apeA rectJcircleJpol2Jdefault pentru restul ima1inii care nu e acoperit
de zonele de tipurile anterioare!
-/refA defineste o zon care nu e acti$ "n cadrul unei ima1ini /art!
-outA teCt alternati$
-titleA teCt descripti$ tip etic/et
-tar1etAnume fereastr broFser "n care $a fi afi*at elementul apelat prin
linN-ul ata*at zonei!
-coordsAcoordonatele zonei "n funcie de forma ei eCprimate "n piCeli!
Obs: dac se suprapun mai multe zone uzual broFser-ul acti$eaz linN-ul primei
zone definite!
D4
%achetarea aginii rin .erestre
>ac/etarea presupune "mprirea pa1inii "n zone cu o anumit indi$idualitate 1en
zone de na$i1are8 zone de afi*are coninut etc! @olosind ferestre (frame-uri) *i
cadre8 un ecran poate fi di$izat "n mai multe zone (subferestre) "n care se pot
"ncrca /tml-uri diferite! >etoda uzual presupune mac/etarea prin intermediul
<SS! %entru pa1ini mici "ns sau Sfr preteniiT nu e necesar iar mac/etarea
pa1inii se poate face folosind c/iar tabele!
+lemente7
- frameset8 frame8 iframe8 noframe
Obs 1: eCist dou cate1orii de ferestre7
- inline frame (iframe)7 se comport ca un bloc de elemente "ntr-o pa1in!
- frame7 care se comport dup propriile re1uli de a*ezare ocup)nd "ntrea1a
suprafa a pa1inii!
Obs ": structura unui document "n ferestre e diferit de cea a unui document
SnormalT prin faptul c Qbod2R se "nlocuie*te cu QframesetR
Q/eadR!!!!!!QJ/eadR
QframesetR
QframeRdefinire frameDQJframeR
!
!
QframeRdefinire frame nQJframeR
QJframesetR
Obs +: dac broFser-ul nu afiseaza frame-uri se poate pune un teCt alternati$
de$iind "n interiorul QnoframeR teCt alternati$QJnoframeR
Obs 7: definirea ferstrelor se face din aproape "n aproape prin "mprirea ferestrei
iniiale "n linii *i coloane folosind atributele cols *i roFs ale lui SframesetS!
Aceste atribute au o list de $alori (pentru fiecare fereastra o $aloare)
separate prin $ir1ul! Halorile pot fi eCprimate "n piCeli sau "n procente din
dimensiunea ferestrei de afisare!
<aracterul stelu \]T indic spaiul rmas disponibil!
Obs 8: \n]T "nseamn spaiul disponibil "mprit "n n pri!
+Cp7
Qframeset colsATDBB8DB[8]TR
QJframesetR
Qframeset roFsAT5B[83]8DBBTR
Qframeset colsAT3B[8]TR
Qframeset roFsATD5B8]TRQJframesetR
D5
QJframesetR
@rame7
Atribute7
-nameA*ir de caractere
-srcAurl
-noresizeAcadrul nu poate fi modificat prin dra1 and drop!
-scrollin1AautoJ2esJnoAspecifica modul de defilare a informaiilor din
cadru!
-bordercolorAculoare c/enar(inclusi$ pentru frameset)
-borderAdimensiune c/enar(doar pentru frameset)
Obs 9: pentru c/enar in$izibil se seteaz frameborderAno
-mar1in/ei1/t *i mar1inFid/tAseteaz distanele de la mar1inile unei
ferestre la coninutul acesteia!
SIframeS
-pentru inserarea de ferestre \inlineT
-pot fi manipulate independent "n interiorul unei pa1ini
-are aceleasi atribute ca *i frame plus7 Fei1/t8 /ei1/t8 ali1n8 /space
@ormulare
-folosite pentru a crea pa1ini Feb interacti$e
-un formular conine o suma de controale (butoane8 c)mpuri8 etc) plasate
"ntre QformR *i QJformR
-procesarea informaiei transmise pr"ntr-un formular e determinat de catre
atributul action cu $aloarea7
a) url-ul unui script aflat pe un ser$er Feb ce prelucreaza datele unui
formular *i intoarce un raspuns!
b) o adres de mail-metoda folosit pentru eCpediere! >etoda poate a$ea
$alorile7
-1et7 caz "n care datele din formular sunt adu1ate la url-ul indicat de
action!
-post7 datele sunt eCpediate separat fiind permise cantiti mai mari!
:onstrucia .ormularelor
Obs: &ipul c)mpului este precizat prin t2pe! =a eCpediere se transmit ctre
ser$ere perec/i de forma Qnume element din formRAQ$aloareR8 date definite prin
atributele SnameT8 *i S$alueT ale lui input!
Halori ale atributului St2peS7
- button- buton de comand
- reset8 submit- buton de resetare8 eCpediere
D4
- c/ecNboC- caset de $alidare
- radio- buton radio
- file- fi*ier
- /idden- c)mp ascuns
- ima1e- ima1ine care "nlocuie*te un buton
- passFord- parol
- teCt- caset teCt
Obs: c)mpul de tip teCt poate a$ea setat atributul Sread onl2T! Atributele size *i
maClen1t/ indic limea c)mpului8 respecti$ numrul maCim de caractere
admise!
<)mpurile teCt se numesc Ste*tareaS!
+lementul teCtarea are atributele7
- nameJ id
- roFs - specific numrul de linii
- cols- specific numrul de caractere ce $or fi afi*ate "ntr-o linie
- Frap Z off - determin "ntreruperea cu$)ntului "n mar1inea dreapt
a c)mpului dac se apas enter!
Z /ard - cu$intele sunt "ntrerupte automat la dreapta c)mpului3
caracterele de sf)r*it de linie sunt incluse "n teCtul transmis3
Z soft - caracterele nu sunt incluse la eCpediie!
+Cp 7
=o1in 7
'ume 7
%renume 7
%arola 7
Qform met/od A TpassT actionATmailTR
QpR=o1in7QJpR
'ume7Qinput t2peATteCtT nameATnumeTJRQbrR
%renume7Qinput t2peATteCtT nameATprenumeTJRQbrR
%arola7 Qinput t2peATpassFordT nameATparolaTTJRQbrR
Qinput t2peATsubmitT $alueATsubmitDTJR
D7
,ubmit Reset
Qinput t2peATresetT $alueATresetDTJR
QJfontR
Obs: $alue pentru c/ecNboC reprezint etic/eta ce urmeaz butonului!
Obs: dac $rem ca butonul de $alidare s fie iniiat (selectat) se insereaz
atributul c/ecNed!
Alte atribute7 ali1n- stabile*te alinierea "n cadrul c)mpului8 tabindeC- stabile*te
ordinea dup care butonul a0un1e s fie selectat (prime*te focusul) la apsarea
tastei tab!
Liste de derulare (liste de selecie)
S+=+<& cu atributele7
- name
- size7 numr de opiuni $izibile "n fereastra de derulare
- multiple7 dac e specificat8 lista permite selecia multipla a unor opiuni
-piunile din care e constituit meniul se introduc folosind elementul option cu
atributele7
-selected (iniial se declar)
-$alueA sir de caractere
-labelA denumire mai scurt pentru coninut
Obs 1: dac size nu e specificat implicit e D!
+Cp 7
Qselect sizeA3 nameATimprimanteTR
Qoption $alueATcanonTR<anon 6G<5BBBQJoptionR
Qoption $alueAT/pT selectedR/p =aFSetDBBBQJoptionR
QoptionR/p InN0etQJoptionR
QoptionR;eroCQJoptionR
QoptionRX!!QJoptionR
QJselectedR
Obs ": pentru a crea subliste de meniuri se foloseste optionlist!
D9
:,,
<ascadin1 St2le S/eets- stiluri de formatare "n cascad
Obs: %entru a crea pa1ini cu un desi1n e$oluat8 /tml ofera puine elemente de
formatare!
<SS ca *i cadru de lucru s-a folosit din #?48 "n #?4 de$enind recomandare
F3c(FFFc)!
A$anta0ele folosirii css7
D! : posibilitatea definirii de la "nceput a tuturor formatrilor necesare (cum ar
fi7 fonturi8 culori8 aliniere8 spaiere etc!)
5! +conomie de timp 7 dac dorim ca /eadin1 (,D) s fie rosu definim un stil
pentru acesta pe care "l declarm o sin1ur dat nemaifiind astfel ne$oie de a
rescrie codul /tml!
3! Sunt u*or de modificat! :e eCemplu8 pentru a sc/imba culoarea para1rafelor
,D din ro*u "n $erde8 nu $om parcur1e tot documentul8 "nlocuind culoarea8 ci
$om modifica doar stilul!
4! Stilurile sunt aplicate de broFser "n mod unitar (cum documentele /tml sunt
foarte stufoase se poate 1re*i u*or)!
5! Stilurile pot fi aplicate mai multe pa1ini Feb8 iar modificarea stilurilor $a fi
automat reflectat "n toate pa1inile care le utilizeaz!
,&>= nu impune un anumit limba0 de definire a stilurilor! :ac se folose*te
<SS se $a introduce "n antet o declaraie 1en7 Qmeta /ttp-eIui$ATcontent-t2pe-
st2leT contentATteCtJcssTR
,eci.icarea stilurilor
a) Stiluri inline-folosite prin intermediul atributului st2leATsir de caractereT
aplicat elementelor /tml ce se SstileazS!
+Cp 7 Qp st2leATteCt-ali1n7center3 color71reenTRAm aplicat un stil cu $erde
pentru p8 centrat! =ista atributelor ce se stileaz este separat prin punct *i
$ir1ul8 iar separarea atribut- $aloare se face prin intermediul S7T!
Specificarea unui stil inline e util c)nd dorim formatarea indi$idual a unui
element!
b) Stiluri dedicate A specificarea stilurilor "n antet!
Ln antet pot s apar oric)t de multe elemente st2le folosite pentru a
specifica stiluri pentru7
D?
-toate apariiile unui anumit element /tml "n documentul respecti$3
-toate apariiile unui element dintr-o clas! <lasa corespunztoare unui
element /tml se specific prin atributul SclassT!
-apariiile indi$iduale ale unui anumit element! Identificarea apariiilor
unui element crora li se aplic stilul se realizeaz prin intermediul atributului
SidT!
+CpD7 toate para1rafele A cu Arial8 D5 pt8 aliniat st)n1a8 italic
Q/eadR
Qst2le t2peATteCtJ<SSTR
%
^font7D5 Arial3 font-st2le7italic3 teCt-ali1n7left3
_
QJst2leR
+Cp5 7 %entru ca toate para1rafele din clasa SsubtitluT s fie scrise centrat *i
"n1ro*at putem defini7
Qst2le t2peATteCtJ<SSTR
%!subtitlu
^font-Fei1/t7bold3 teCt-ali1n7center
_
QJst2leR
<a urmare tuturor para1rafelor pentru care atributul class are $aloare
SsubtitluT li se $a aplica acest stil!
+Cp37 :ac dorim ca anumite para1rafe s fie aliniate la dreapta *i scrise cu DB
definim7
Qst2le t2peATteCtJ<SSTR
U+Cceptie
^font-sizeADB pt3 teCt-ali1n7ri1/t3
_
QJst2leR
Obs: Utiliz)nd stilurile de mai sus putem scrie7
QpR%ara1raf obisnuit
Qp classAsubtitleRAcesta este un subtitle
Qp idAeCcepieRAceasta este o eCcepie
Qp st2leATteCt-ali1n7 center3 color 7 1reenTR Am aplicat un stil $erde
pentru p *i centrat!
Acum p $a afisa un teCt $erde8 centrat (suprascris)8 dar Italic8 D58 Arial
(pstrat8 mo*tenit)!
c) Specificarea stilurilor "n mod eCtern (<SS eCtern)
5B
+Cp7
QlinN t2peATteCtJ<SST relATst2les/eetT /refATUnStil<SS!cssT titleATde
preferatTR
Obs: %entru a specifica fi*ierele "n care sunt definite stilurile se utilizeaz "n
antetul /tml elementul linN! %rin t2pe se specific limba0ul de descriere a
stilurilor (teCtJ<SS)8 iar prin /ref se indic adresa fi*ierului <SS eCtern!
Ln cazul "n care nu definim stiluri de formatare alternati$e atributul rel $a
primi $aloarea Sst2les/eetT!
:lase de stiluri
- clas de stiluri permite definirea unui stil 1eneral aplicabil unui element
sau unui 1rup de elemente!
Referirea unei clase se poate face "n mai multe locuri "n cadrul aceleia*i
pa1ini sau "n pa1ini diferite!
:efinim clasa7 tKalbK1ri
Qst2leR
!tKalbK1ri
^teCt-ali1n7center3color7F/ite3bacN1round71ra23Fidt/73BBpC3
_
QJst2leR
Apelul7
Qbod2R
Qp classATtKalbK1riTR%ara1raf cu stilul StKalbK1riTQJpR
Q,
5
classATtKalbK1riTR,eadin1 5 tip tKalbK1riTQJ,
5
R
% classATtKalbK1riTRRe$in la formatarea tKalbK1riQJpR
Obs: ,ead-erele au un format propriu relati$e la mrimea fondului8 astfel
mrimea teCtului afi*at cu ,5 rm)ne cea specific acestuia!
Obs: :ac dorim ca o clas s fie aplicabil numai pentru anumite elemente8 "n
construcia numelui clasei $a aprea numele elementului "n fa7
Qst2leR
p!tKalbK1ri ^!!!_
QJst2leR
:ac setm
Qp classATtKalbK1riTR%ara1raf cu stilul tKalbK1riQJpR
Q,5 classATtKalbK1riTR!!!
5D
Qp classATtKalbK1riTRX
-bser$m c stilul nu se aplic lui ,5!
Obs: :ac dorim s aplicm o clas de stil mai multor elemente $om trece
numele acestor elemente dup numele clasei separate prin $ir1ul c)t *i fa de
aceasta!
Ln acest caz nu mai e necesar aplicarea stilului prin SclassT!
+Cp7
!tKalbK1ri3
p8 /5
^teCt-ali1n7center3 color7F/ite3 bacN1round71ra23X!_
sau
Qst2leR
p!tKalbK1ri8 /
5
^XXXX_
QJst2leR
Qbod2R
QpR%ara1raf cu stilul tKalbK1riQJpR
Q/
5
R,eadin15 cu stilul tKalbK1riQJ/
5
R
QJbod2R
Obs: %entru declararea p!tKalbK1ri8 /
5
8 pentru p! trebuie "n continuare s se
apeleze stilul prin class8 "n caz contrar $a apare fr stil!
Obs: :ac dorim ca mai multe clase s descrie acelasi stil (mai rar folosit8 se pot
"ns crea stiluri "n baza acestora)8 se separ numele claselor prin $ir1ul7
Qst2leR
!tKalbK1ri8!cls58!cls38 p
^XXXX
_
QJst2leR
%seudo clasa! %seudo element
%seudo clasele sunt utilizate pentru personalizarea linN-urilor8 teCt8 sau
ima1ini! Se definesc "n Q/eadR sau eCtern!
'umele ancorei e separat de atribut prin 7
Qst2leR
a 7 linN
^J]<um $a arata un linN normal
font-size 7D5 pt 3 teCt-decoration 7none 3 boreder-Fidt/ 75pC 3 border-
color 7blacN 3 paddin175 pC3 mar1in-top7DBpC3_
a 7 $isited
^teCt-decoration3none3 _
55
a 7 /o$er
^teCt-decoration7none3 teCt-st2le7Italic3_
a 7 focus
^color7U33333_
a 7 clicN
^color7F/ite3 bacN1round7blacN3_
%entru ca le1turile s utilizeze un anumit stil se pot folosi7
D!a 7 linN!clasa^!!!!!!_
(sau a 7 /o$er etc!) cu
Qa classATclasaT /refAT SR!!!!!!QJaR
5!a 7 linNUnumeKid^X_ cu
Qa idATnumeidT /refAT S RX!QJaR
3!a!clasaD7 linN ^XX_
Qa classATclasaDT /refAT SRX!QJaR
%seudo elemente Z similare pseudo clasei A7
-first-letter Z se aplica primei litere a unui element
-first-line Z se aplica primei linii
-before *i after (se folosesc impreuna cu content8 permit clasarea de
coninut dup sau inaintea unui element)
+Cp7
D! p 7 first-letter
^font-size73 em3
_
5! p 7 first-line
^font-st2le7Arial3
&eCt-transform7uppercase
_
Stiluri dedicate
%entru a crea un stil dedicate folosim o sintaCa 1en7
Qst2leR
Inclinat^teCt-st2le7Italic_
QJst2leR
+lementul "n care dorim utilizarea local a acestui stil $a primi atributul id
cu $aloarea e1al cu numele stilului!
+Cp7
Qp idATitalicTR=inie cu teCt inclinatQJpR
:ac dorim s aplicam stilul dedicat doar pentru anumite elemente atunci
$om trece numele elementului "n faa numelui stilului7
53
+Cp7
D! Qst2leR/4Uinclinat ^font-st2le 7Italic_
QJst2leR
5! Qst2leR
Q/4 idA TitalicTR&eCt cu /4
<lass sau id
Id-urile se folosesc o sin1ura dat "ntr-un /tml(o con$enie de fapt) "n timp
ce class se poate folosi de mai multe ori!
Ln 1eneral id-urile se folosesc pentru structurile principale ale pa1inii
(/eader8 footer8 coninutul principal)!
Selectorii de tip class se folosesc pentru elementele ce apar de mai multe
ori "n cadrul pa1inii!
Obs: Id-urile(clase declarate cu U) $or fi intotdeauna prioritare fa de selectorii
de tip class!(!)
+Cp7
Qst2leR
Ualdin
^teCt-transform7uppercase_
!mic
^teCt-transform7
QJst2leR
!
!
Qp idATaldinTR&eCt cu litere mariQJpR
Qp classATmicTR&eCt cu litere miciQJpR
Qp idATaldinT classATmicTR&eCt cu litere mici *i mari combinateQJpR
)uncionarea stilurilor ;n cascada
Admi)nd c pentru un element sunt definite mai multe stiluri ce intr "n conflict
pentru anumite atribute acestea acioneaza cu prioritile7
D! Stilurile definite inline3
5! Stilurile definite "ntre marca0e Qst2leR!!Q!st2leR - are prioritate stilul definit
ultimul3
3! Stilurile definite prin fi*iere(eCtern) Z are prioritate stilul cel mai recent!
4! Stilul predefinit pentru documente dac nu sunt definite stiluri!
5! :ac un atribut conine dup $aloare precizarea SV ImportantT8 atunci $aloarea
acestuia nu poate fi suprascris a$)nd prioritate maCim!
54
4tribute entru stiluri
Atribute pentru blocurile de teCt
Atribute Halori Semnificaie
>ar1in-left
-ri1/t
-top
-bottom
AutoYnumrYprocent
%addin1-left
-ri1/t
-top
-bottom
autoYnumrYprocent
%addin1-se refer la distana dintre
bloc *i bordura sa8 iar distana dintre
bordura *i cellalt element este
mar1i-
ne!
paddin1 &/in Y mediu Y t/icN
Y
'umr Y
Unitate de msurY
6order left Y Fidt/
ri1/t Y Fidt/
top Y Fidt/
bottom Y Fidt/
border Y Fidt/
border st2le none Y dootet Y
das/ed Y
solid Y double Y
outset Y
inset Y 1roope Y
rid/e
6order color-Fidt/-
/ei1/t
-float
auto Y procent Y
numar Y
unitate de masura Y
none
Y left Y ri1/t Y post Y
culoarea c/enarului
55
6order top P Fidt/8
St2le8 color
Ri1/t Y bottom Y left
Y
6order Y
</enarul superior
La2er
Obs: :/tml permite controlul asupra poziiei *i comportamentului elementelor!
%oziionarea const "n plasarea unui element (pa1inaAo structura de
blocuri) prin atribuirea unor coordinate C828 cat *i a unei ele$aii z ce permite
obinerea de efecte prin suprapunere!
Un blocAla2er! Acestea se pot ascunde8 suprapune ori deplasa8 eCist
la2ere imbricate!
&ranziii7sunt efecte speciale rezultate prin modificarea afisarii unui
element! @iltrele sunt efecte ce se aplica asupra unor elemente!(eCp7teCt umbrit)
%entru definirea la2er-elor pot fi folosite 5 procedee7
]sintaCa <SS PSintaCa =a2er
6locurile de tip la2er pot fi definite inline sau cu a0utorul foilor de stil!
Atribute pentru la2er
Atribute Haloare Semnificaie
abo$e *i belloF -aboce
-belloF
SintaCa7
abo$eAQnumeKla2erR
@unioneaza "n sintaCa la2er nu
*i "n sintaCa <SS
bacN1round-
color
-rosu
-1reen
-blue
-r1b(r[8 1[8 b[)
Stabile*te culoarea de fundal a
la2er-ului
54
bacN1round-
ima1e
-url
clip -rect (top8 ri1/t8 bottom8
left)
:etermin decuparea dintr-un la2er
a unei suprafee $izibile
/ei1/t Inlimea la2er-ului
left -unitate de masura :istan de la mar1inea din st)n1a
o$er-floF -none
-clip
-scrrol
%ermit $izualizarea "ntre1ului la2er
dac dimensiunile lui dep*esc
$alorile impuse prin /ei1/t
*i midt/
pa1e C8 pa1e 2 :istan "n piCeli dintre coltul
st)n1a sus la2er8 st)n1a sus pa1!
(sintaCa la2er8 nu <SS)
position -absolute (la2er poziionat
absolut "n raport cu bod2
fiind scos din floF-ul
pa1inii)
-relati$e (la2er poziionat
fa de poziia curent "n
blocul "n care este inclus)
-static (poziia implicit)
%oziia la2er-ului
src(sursa) -url (sintaCa la2er) sursa
top -numr *i unitate de msur
-procente
:istan "ntre mar1inea
superioar a la2er-ului *i blocul "n
care e inclus
$isibilit2 -$isible
-in/abbit
-/iden
Fidt/ -numr
-unitate de masur
-procent
limea
z-indeC -numr natural
=a2ere definite prin sintaCa <SS7
57
-fiecare element Feb suport un oniect stil (stilare) folosit "n manipularea
aspectului *i a aciunii sale
-acest obiect caruia i se atribuie un id pentru a fi accesat e poziionat "ntre
Qdi$R!!!!!
QJdi$R(bloc) *i QspanR!!!QJspanR(inline)!
Obs: obiectele stil pot fi accesate prin scripturi 1en7
Qspan idATteCtT
on>ouseo$erATteCt!st2le!colorA#red#T
on>ouseo$erATteCt!st2le!colorA#1reen#TR>ut cursorul aici
QJspanR
%ermit adau1area unor teCte speciale8 teCtelor sau ima1inilor
Apelarea unui filtru ca element de stil se face conform sintaCei
QnumeKelement!st2leATfilterT7QnumeKfiltruR
@iltrul Ar1umente Semnificaie +Cemplu
alp/a -opacit2
-finis/opacit2
-st2le
-startC
-start2
-finis/C
-finis/2
Alp/a(opacit2A5B8
finis/opacit2ADBB8 st2leAD8
startCAB8 start2AB8
finis/CA9B8 finis/2ADBB)
blur -add
-direction
-stren1t/
Ima1ine "nceo*at 6lur(addAtrue8 directionA?B8
stren1t/A4)
c/roma -color <uloare ce de$ine
transparent
</roma(colorAU@@BBBB)
flip/-o -1lindirea ima1inii
pe orizontal
@lip/( )
flip/-$ -1lindirea pe $ertical
1lo$e -color
-stren1t/
1ra2 Ima1ine "n tonuri de 1ri
in$ert ne1ati$e
59
s/adoF-color
-direction
umbra
drop-
s/adoF
-color
-offC
-off2
-positi$e
:rops/adoF(colorAred8
offCA58 off2A58 positi$eA
true)
Cra2 Ima1ine alb-ne1ru
Fa$e -add
-I$erI
-li1/t stren1t/
-p/ase
.a$e(addAtrue8 I$erIA58
li1/t stren1t/A38 p/aseA
B)
Obs: <omportamentul unui obiect se poate manifesta la declan*area unui anumit
e$eniment!
-nabort Z prsirea pa1inii
-nblur Z obiectul este prsit
-nc/an1e Z se sc/imb $aloarea unui obiect
-nclicN
-ndblclicN
-nfocus Z acti$itatea unui obiect
-nNe2doFn Z apas o tast
-nNe2press
-nNe2up
-nload
-nmouse-doFn
-mo$e
-o$er
-out
-nreset
-nsubmit-transmit datele
-nselect
-nunload
=a2out-ul pa1inii7 poziionare
%roprietatea position poate a$ea $aloarile7
-static-default7elementele sunt "n poziia lor normala
-relati$e Z similar cu static8 dar elementul poate fi scos din
poziia s ori1inala folosind top8 ri1/t8 bottom8 left!
5?
-absolute Z scoate un element din floF-ul pa1inii *i il plaseaza
intr-o Slume proprieT! -riunde "n pa1ina sau "n bloc folosin aceleasi $alori(top8
bottom8 left)
-fiCed Z similar cu absolute $a poziiona elementul "n raport
cu fereastra broFser-ului prin opoziie cu afisarea "n cadrul pa1inii
Astfel elementele fiCe $or SstaT pe ecran c/air dac pa1ina este
scrollat!
+Cp7
=a2out folosind poziia absolut
Una$i1are
Qst2leR
^position7absolue3 top7B3 left7B3 Fidt/7DB em3
_
QJst2leR
Uconinut
^mar1in-left7DB em3_
<4=4 ,:RIPT
S<RI%& A %ro1ram ce poate fi inclus sau asociat "ntr-un /tml! Se eCecut
pe calculatorul utilizatorului la producerea unui e$eniment!
&ipuri 7
a) Scripturi ce se eCecut o sin1ur dat (la "ncrcarea /tml)8 incluse "n
acesta prin elementul S<RI%&!
b) Scripturi ce se eCecut ori de cate ori se produce un anumit e$eniment
,tml nu impune un anumit limba0 de descriere a scripturilor! Acesta
trebuie definit eCplicit7
]specificand "n antet Z Qmeta /ttp-eIui$A7Script-content-
t2peTcontentATtipKlK
scriptin1TRQJmetaR
+Cp7
a)TteCtJtclT
b)TteCtJ$bscriptT
c)TteCtJGa$ascriptT
]specificand local 1en7 Qscript t2peATteCtJ0a$a scriptTR
^coninutul scriptului_
QJscriptR
:iferente 0a$aJ0a$a script
3B
<4=4 <4=4 ,:RIPT
-codul este inclus "ntr-un document
/tml
-un script e interpretat de broFser pe
<alculatorul client
-putem crea un script cu un editor
-$ariabilele nu trebuiesc declarate
-utilizatorii "*i pot crea funcii proprii
-scripturile sunt predominant orientate
Spre e$eniment
-controlul erorilor este sumar
-ma0oritatea broFser-elor accepta GS
-codul este compilat *i stocat "ntr-un fi*ier
distinct
-un applet e compilat8 "ncrcat *i eCecutat
%e calculatorul user-ului
-un applet se creeaz folosind un mediu de
dez$oltare GAHA
-$ariabilele trebuiesc declarate *i trebuie s
aparin (s fie de tipul) unei clase GAHA
-funciile sunt metode ale obiectelor
-applet-urile pot rula independent de
e$eniment
-control strict
Hariante GS7
D!GS de baza Z conine elemente 1enerale de descriere a script-urilor
5!<lient side GS Z o eCtensie a nucleului GSAcea mai utilizat
3!Ser$er side Z permite descrierea de script-uri ce se eCecut pe ser$er
Obs: :e*i nu este obli1atoriu eCist practica plasrii script-urilor "ntre QV-- *iJJ--R
%entru broFser-ele care nu suport scriptin1!
+Cp7
Qscript t2peATteCtJ0a$ascriptTR
QV`document!Frite(SSalutT)
JJ- - R
QJscriptR
Obs: Atributul =an1ua1e e opional8 dar recomandat!
+Cp7
(GS eCtern)
Qscript lan1ua1e ATGa$aScriptT srcATGSKeCtern!0sR
QJscriptR
'ot 7<ele mai utilizate unelte pentru crearea GS 7
-GOuerr2
->oo&ools
Obs: GSAcase sensiti$e
Lntre obiecte (GS ca limba0 conine un set de instrumente care prin
combinaie cu obiecte *i proprieti formeaza un script! +Cist o anumit ierar/ie
3D
ce reflect structura unui document /tml denumit modelul obiect- document
(document ob0ect model)!
>odelul obiect-document (domV nu este unic) descrie structura unui
documentului reprezentat prin obiecte *i proprieti!
GS conine un set de obiecte predefinite ce pot interaciona cu di$erse
componente /tml!
>O%
35
.I':-.
@RA>+
:-<U>+'&
=-<A&I-'
,IS&-Ra
=Aa+R
=I'(
I>AE+
A'<,-R+
A%%=+&
%=UEI'
@-R>
&+;& AR+A
&+;&
RA:I-
S+=+<&
'AHIEA&-R
%=UEI'
>I>+ &a%+
Obs: Un tip special de obiect este cooNie! <onine informaii despre client ce pot
fi accesate de ctre ser$er!
%roprietile GS sunt folosite pentru a seta sau a re1si $aloarea obiectelor!
>odul de aciune al unui obiect e dictat de asocierea unei $alori anumitor
proprieti!
+Cp7
:ocument!=inN<olorATU@@BBBBT
>etodele unui obiect sunt funciile asociate obiectelor conform sintaCei7
identificatorKobiect! identificatorKmetoda()
+Cp7
strin1!touppercase( )
)uncii <4=4,:RIPT
SintaCa7 functionQidentificatorKfuncieR(ar1D8 ar15!!!)
^!!!corp funcie
_
+CpD7
function putere(C8 2)
^totalAD*
for(0AB3 0Q23 0PP)
total ]AC (totalAtotal]C)
return total
_
Obs: Ln ?5[ din cazuri sintaCa <8 <PP rm)ne $alabil pentru GS!
+Cp57
=e1tura GS- /tml
Q/tmlR
Q/eadR
Qscript lan1ua1eATGa$aScriptTR
@unction apasa( )
^alert (S>esa0 eroareT)3
_
QJscriptR
33
Qbod2R
!
!
QformR
Qinput t2peAT6utonT nameAT6utonDT $alueATApasa aiciT
onclicNATApasaT()R
QJformR
Q/tmlR
Q/eadR
Qmeta /ttp-eIui$ATcontent-script-t2peT contentATteCtJ0a$ascriptTJR
QscriptR
Q V- -
function calcul(f)
^if confirm(T+sti si1ur M T)
rezultat!$alueAe$al(f!eCp!$alue)
+lse
Alert (S=asam pe alt datV S)
_
Uinc/id comentariul- - R
QJscriptR
QJ/eadR
Qbod2R
QformR
Introduceti o eCpresie 7WnbspWnbsp
Qinput t2peAT&eCtT nameATeCpTR
QJinputR
Qinput t2peATbuttonT $alueATcalcTRonclicNAT<alcul (t/is!form)TR
QJinputR
QJbrR
Haloarea eCpresiei este7
Qinput t2peAT&eCtT nameATrezultatT sizeAD5R
QJinputR
QJformR
QJbod2R
QJ/tmlR
+Cp37
Qscript t2peATteCtJ0a$ascriptTR
34
QV- -
Har name3
@unction intreaba( )
^numeAprompt(S<um te numestiMT)
SalutAalert(S6ine ati $enit3TPnumeP T V T)
_
@unction pa( )
^alert (T=a re$edere8 TPnumePT V T)
_
JJ- - R
QJscriptR
Qbod2 onloadA Tintreaba ( ) T onunloadATpa( )TR
Qscript t2peAXX!R
QV- -
=1A5B3
HitezaA53
%ozAl13
>esa0AT6alansT3
:irA53
=1A>esa0!len1t/-D3
@unction 6alans( )
^dirA A 5M %oz- A $iteza7pozPA$iteza3_
Obs: Ln GS instruciunile se clasific "n instruciuni primiti$e *i repetiti$e!
Instruciunile primiti$e se clasific "n7
-instruciunea $id
-instruciunea compus (tip bloc)
-instruciunea eCpresie7
]poate fi o eCpresie7 zA5]C-33
]poate fi o atribuire3
]poate fi apelul unei funcii!
+Cp7 Utilizarea funciei e$al pentru e$aluarea unor date citite de la tastatur prin
intermediul unei csue de dialo1 (media aritmetica)
Qscript lan1ua1eATGa$aScriptTR
document!Friteln(Sse citesc de la tastatura 5 numere C8 2Jn!! S se afiseze
media aritmetica maJn T)3
$ar CAe$al(prompt(S:ati CAT))3
35
$ar 2Ae$al(prompt(S:ati 2AT))3
$ar maA(CP2)J53
document!Frite(S>edia aritmetica a lui C *i 28 m
a
AT8m
a
)
QJscriptR
+Cp7 Se cite*te un numr natural poziti$! S se afi*eze c)te cifre conine numrul!
;AD53
Qscript!!!R
document!Friteline(S:ati un numarT)3
$ar sAB3
$ar nAe$al(prompt(SnABT)3
$ar CAn3
if(nRAB)
^do
^nA>at/!floor(nJDB)3
SPP3
_
./ile(nVA)
document!Frite(S'umarulT8 C8 SareT8 s8 ScifreT)3
_
+lse
document!Frite(S'umarulT8 C8 Snu este poziti$T)3
QJscriptR
)uncii 1i aelare
Hom folosi funcia SculoriT pe care o $om apela de mai multe ori cu $alori
diferite8 dand clicN pe butoane7 rosu8 1alben8 albastru8 se $a sc/imba culoarea de
fundal a pa1inii!
Q/eadR
Qscript!!!R
function culori(C)
^document!Friteline(SQbod2 b1colorATPCPTRT)3
document!Friteline(S%a1ina cu fundal de culori diferiteT)3
_
QJscriptR
QJ/eadR
Qbod2R
QformR
34
:ai clicN pe un buton pentru a sc/imba culoarea de fundal
Qinput t2peATbuttonT onclicNAT<ulori(bred#)T $alueATRosuTR
Qinput t2peAcbuttonc onclicNAcculori(d2elloFd)c $alueAc1albencR
Qinput t2peAcbuttonc onclicNAcculori(dblued)c $alueAcalbastrucR
QJformR
QJbod2R
QJ/tmlR
Parametrii .unciilor
Reamintim ca parametrii aflai "n partea de declarare a funciilor se numesc
formali! Acesia cat *i parametrii efecti$i pot lipsi la apelul funciei! 'umarul
parametrilor formali trebuie s fie e1ali ci cei efecti$i!
Obs: +Ccepia de la aceast re1ula face proprietatea Sar1umentsT ce poate fi
utilizat ca un numar diferit de parametrii la apelul funciei!
%entru a determina numarul de parametri din apel utilizm "n cadrul
funciei urmtoarea proprietate Sar1uments!len1t/T!
Ar1uments este un masi$(unidimensional) ce are ca prim $aloare
ar1umentseBf!
+Cpresie7 $om apela o funcie numit lista din interiorul unei instruciuni
de afisare prin urmatorul apel7
lista(SuT8 S%rima$araT8 SHaraT8 S&oamnaT8 SIarnaT)
=a eCecuia funciei se parcur1 parametrii cu ar1uments!len1t/! %arametrul
SuT de la apel se introduce "n funcie pentru a afisa o list neordonat!
Q/eadR
QscriptR
function lista (C)
^document!Frite
(SQTPCP SlT t2peAcircleRT)
for($ar iAD3 iQlista!ar1uments!len1t/3 iPP)
document!Frite(SQliRT Plista!ar1umentseifPTQJliRT)3
document!Frite(SQJTPCPTlRT)3
_
QJscriptR
QJ/eadR
Qbod2R
Qscript t2peAT!!!TR
.rite(lista(SuT8 S%rima$araT8 SHaraT8 T&oamnaT8 SIarnaT))3
QJscriptR
QJbod2R
37
)uncii 1i stiluri
+Cp7 Stilul pentru campul teCt!area!
Hom introduce un teCt "ntr-un camp tip teCt!area pe care il $om afisa "n 3
moduri utilizand stiluri diferite(sD8 s58 s3)!
Stilurile sunt apelate prin funciile f58 f3 *i f4 la onclicN pe butoanele sD8
s58 s3!
Obs: @unciile f58 f38 f4 utilizeaz masi$ul SaT care pentru prima $aloare (tAB)
aplic stilul sD8 pentru a doua (tAD) aplic stilul s58 iar pentru a treia (tA5) aplic
stilul s3!
Q/tmlR
Q/eadR
QtitleR@uncii *i stiluriQJtitleR
Qst2leR
!sD^font-famil27Arial8 ,el$etica8 sans-serif3
font-size7D9pC3
color7UBB44333
bacN1round-color7U?D@@<93
_
!s5^font-famil27Eeor1ia8&imes 'eF Roman8serif3
font-size7D4pC3
color7U3333@@3
bacN1round-color7U<<BBBB3
_
!s3^font-famil27Arial8,el$etica8 sans-serif3
font-size7D9pC3
color7U3333@@3
bacN1round color7U?6?<@B3
_
QJst2leR
QscriptR
function fD()
^$ar re1AJ gn J13
$ar 1et+lement62IdAdocument!formular!ta!$alue3
$ar 2A1et+lement62Id!replace(re1!cQJbrRc)3
document!1et+lement62Id(ctar1etc)inner,&>=A23
_
$ar tAB3
$ar aA'eF Arra2(csDc8cs5c8cs3c)3
39
function f5()
^tAB3
document!1et+lement62Id(cabcc)class'ameAaetf3
_
function f3()
^tAD3
document!1et+lement62Id(cabcc)class'ameAaetf3
_
function f4()
^tA53
document!1et+lement62Id(cabcc)class'ameAaetf3
_
function f()
^document!1et+lement62Id(c&ar1etc)class'ameAdocument!1et+lement62Id(cab
cc)class'ame3
_
QJscriptR
QJ/eadR
Qbod2R
QtableR
QtrR
QtdR
Qdi$ idAtar1et classAs5RScrieti un teCt *i dati clicNQJdi$R
QJtdR
QJtrR
QJtableR
Qform nameAformularR
QteCt area nameAta classAsD idAabcR
Spune8inimioara8spune
<e durere te rapuneM
+!Hacarescu
QJteCt areaR
QJbrR
3?
Scrieti un teCt *i dati clicN
Qinput t2peAcbuttonc $alueAcApasatic onclicNAcfD()cR
QJbrR
Ale1eti un stil *i dai clicNQinput t2peAcbuttonc $alueAcstilDc
onclicNAcf5()cRQJbrR
Ale1eti alt stil *i dai clicNQinput t2peAcbuttonc $alueAcstil5c
onclicNAcf3()cRQJbrR
Ale1ei alt stil *i dai clicNQinput t2peAcbuttonc $alueAcstil3c
onclicNAcf4()cRQJbrR
:ai clicN pentru a aplica stilulQinput t2peAcbuttonc $alueAcclicNc
onclicNAcf()cRQJbrR
QJformR
QJbod2R
QJ/tmlR
-!enimente 1i tratarea lor
At)t e$enimentele c)t *i tratarea acestora sunt aciuni pe care utilizatorul le
determin8 ele fiind interpretate cu a0utorul funciilor GS!
+Cp7 >i*care mouse8 apsare tast8 dra1 and drop8 etc!
<lasificarea tratrii e$enimentelor7
:up declansarea acestora "n funcie de diferite elemente 1en7
a) tratarea e$enimentelor de catre sistem7
-on+rror
-on=oad
-onUn=oad
b) tratarea e$enimentelor de catre un formular7
-on6lur
-on</an1e
-on@ocus
-onReset
-onSubmit
-onSelect
c) tratarea e$enimentelor de catre tastatura7
-on(e2:oFn
-on(e2%ress
-on(e2Up
d) tratarea e$enimentelor de catre mouse7
4B
-on<licN
-on:bl<licN
-on>ouse:oFn
-on>ouse>oo$e
-on>ouseUp
-on>ouse-$er
-on>ouse-ut
a) &ratarea e$enimentelor de catre sistem
Reamintim ca on+rror este e$ent!/andler pentru obiecte ima1e *i FindoF!
+CpD7 formular cu un sin1ur buton care il aplic8 apeleaza o funcie ce conine o
eroare!
Q/eadR
Qscript t2peATGa$aScriptTR
on+rrorA>esa0+roare3
$ar CAT S3
function >esa0+roare(mesa08 url8 linie)
^CAT+ste o eroare "n pa1ina $izitatV gn +roare7TPmesa0P SgnT3
CPAurl7PurlPTgnT3
CPATlinia7T PlinieP SgnT3
CPA S:ati clicN pentru a continuaVT3
Alert (C)3
return true3
_
function f( )
^document!Friteln(S'u sunt $izibilaVT)3
_
QJscriptR
QJ/eadR
Qbod2R
QformR
Qinput t2peATbuttonT $alueATApasatiVT on<licNATf( )T3
QJformR
QJbod2R
+Cp57 on=oad acioneaz "n urma "ncrcrii documentului a tuturor cadrelor
d"ntr-un frameset sau a unei ima1ini(e$ent!/andlear) pentru ima1e la2er sau
FindoF!
on=oadAT1( )T3
1( )
^alert (S>esa0T)
4D
_
b)&ratarea e$enimentelor de catre un formular
+Cp7 de funcie ce transforma un teCt "n ma0uscule8 ce acioneaza la on</an1e!
(pierdere focus P modificare coninut camp)
Qscript t2peAT!!!!#R
function ma0uscule(a)
^a!$alueAa !$alue to Upper<ase(a)3
_
QJscriptR
QJ/eadR
Qbod2R
Q/4RIntroduceti numele *i prenumeleQJ/4R
Qform nameA#formularTR
'umele7Qinput t2peATteCtT nameATCT $alueAT S sizeAT3BT
on</an1eATma0uscule(t/is)TR QJbrR
%renumele7Qinput t2peATteCtT $alueAT S sizeAT3BT nameAT2T
on</an1eATma0uscule(t/is)TR
c) &ratarea e$enimentelor de catre tastatura
+Cp7 Un formular ce permite doar introducerea de caractere diferite de
caracterele spciale utilizand codurile AS<II *i on(e2%ress!
Qscript t2peAT!!!!TR
function f( )
^if ((e$ent!(e2<odeR35 WW e$ent!(e2<odeQ49) YY (e$ent!(e2<odeR57
WW e$ent!(e2<odeQ45) YY (e$ent!(e2<odeR?B WW e$ent!(e2<odeQ?7))
e$ent!returnHalueAfalse3
_
QJsriptR
QJ/eadR
Qbod2R
Qform onSubmitATreturn false3TR
Introducei un teCt care nu conine caractere7 Vh#Ui[Wj] QJbrR
QteCtarea roFsA5 celsA55 nameATteCtiT on(e2%ressATf( )TR
QJteCtareaR
QJformR
QJbod2R
d)&ratarea e$enimentelor de catre mouse
+Cp7 Afi*are coordonate cursor8 mouse "n mi*care
45
Qform nameATformularTR
<oordonatele cursorului QJbrR
C7Qinput t2peATteCtT nameATCT $alueAT SRQJbrR
27Qinput t2peATteCtT nameAT2T $alueAT SRQJbrR
QJformR
Qscript t2peAT!!!!!!!#R
$ar Internet+Cplorer A document!allMtrue7false
if(VInternet+Cplorer)
document!capture+$ents(+$ent!>ouse>oo$e)3
document!on>ouse>o$eApoziie3
function pozitie(poz)
^]$ar C3
$ar 23
if(VInternet+Cplorer)
^CApoz!%a1eC3
2Apoz!%a1e23
_
document!formular!C!$alueAC3
document!formular!2!$alueA23
_
QJscriptR
QJbod2R
Obs: GS a$ansat7 lucrul cu obiecte GS!
43