Documente Academic
Documente Profesional
Documente Cultură
Proiectare Pagini Web 2006
Proiectare Pagini Web 2006
ISBN: 978-973-725-822-9
004.738.52
004.43 HTML
004.43 CSS
004.43 JAVASCRIPT
004.272.23
CUPRINS
Prefa
Partea I
HTML
1. Spaiul World Wide Web......................................................................................
1.1. Introducere n realizarea unui site .................................................................
1.2. Protocoale i adrese URL ..............................................................................
1.3. Crearea unui site gratuit ................................................................................
1.4. Crearea paginilor Web ..................................................................................
13
15
16
17
18
20
20
22
23
25
28
3. Stiluri de text..........................................................................................................
3.1. Stiluri fizice de text .......................................................................................
3.2. Stiluri logice de text ......................................................................................
3.3. Fonturi ...........................................................................................................
29
29
32
36
4. Liste .......................................................................................................................
4.1. Liste ordonate (Ordered Lists) ......................................................................
4.2. Liste neordonate (Unordered Lists) ..............................................................
4.2.1. Atributele elementului LI ....................................................................
4.3. Liste de definiii (Definition Lists) ................................................................
39
39
41
44
45
5. Tabele .....................................................................................................................
5.1. Generaliti ....................................................................................................
5.2. Atributele etichetei <TABLE>......................................................................
5.2.1. Elementul TH ......................................................................................
5.2.2. Elementul CAPTION ..........................................................................
5.3. Atributele elementului TR.............................................................................
5.4. Atributele elementelor TD i TH..................................................................
5.5. Gruparea liniilor i coloanelor unui tabel......................................................
5.5.1. Gruparea liniilor ..................................................................................
5.5.2. Gruparea coloanelor ............................................................................
47
47
48
55
55
56
58
62
62
64
5
6. Imagini....................................................................................................................
6.1. Introducerea imaginilor n paginile Web.......................................................
6.2. Atributele Elementului IMG .........................................................................
66
68
68
7. Legturi (Link-uri)................................................................................................
7.1. Elementul A..................................................................................................
7.2. Legturi ctre alte pagini Web ......................................................................
7.3. Legturi cu imagini .......................................................................................
7.4. Legturi cu adrese URL relative ...................................................................
7.5. Legturi ctre informaii non Web ...............................................................
7.6. Legturi ctre fiiere non HTML .................................................................
7.7. Legturi interne n cadrul unei pagini ...........................................................
7.8. Trimiterea automat a unui e-mail.................................................................
7.9. Culorile legturilor ........................................................................................
75
75
77
78
80
82
83
84
88
89
9. Cadre ......................................................................................................................
9.1. Bazele organizrii cadrelor............................................................................
9.2. Elementul FRAMESET.................................................................................
9.3. Elementul FRAME........................................................................................
9.4. Cadre destinaie .............................................................................................
9.5. Cadre interioare .............................................................................................
102
102
105
106
108
110
10. Formulare.............................................................................................................
10.1. Elementul FORM ........................................................................................
10.2. Transmiterea i citirea datelor .....................................................................
10.3. Elementul INPUT........................................................................................
10.4. Elementul TEXTAREA ..............................................................................
10.5. Elementul SELECT.....................................................................................
112
114
116
118
127
128
131
131
132
136
142
142
143
143
144
145
150
Partea a II-a
CSS
13. CSS-Cascading Style Sheets (Foi de stil n cascad) ........................................
13.1. Introducere n modelele de stiluri................................................................
13.2. Stiluri interne (in-line).................................................................................
13.3. Foi de stil n pagin .....................................................................................
13.4. Foi de stil externe ........................................................................................
13.5. Stiluri n cascad .........................................................................................
13.6. Stiluri pentru diferii selectori .....................................................................
13.6.1. Selectorul ID ....................................................................................
13.6.2. Selectorul CLASS .............................................................................
13.6.3. Pseudo-clase......................................................................................
13.6.4. Pseudo-element ................................................................................
13.7. Elementele DIV i SPAM ...........................................................................
157
157
157
159
162
163
165
165
166
168
170
171
173
173
174
177
180
182
185
186
193
194
197
199
201
205
Partea III
JavaScript
16. JavaScript Elemente de baz...........................................................................
16.1. Introducere n JavaScript.............................................................................
16.2. Primul script n JavaScript ..........................................................................
16.3. Tipuri de date i variabile............................................................................
16.3.1. Tipuri de date ....................................................................................
16.3.2. Variabile............................................................................................
16.4. Expresii i Operatori....................................................................................
16.5. Metoda document.write() ............................................................................
209
209
212
216
216
217
220
228
230
230
230
238
7
245
245
247
250
251
252
18. Obiecte..................................................................................................................
18.1. Obiecte create de utilizator..........................................................................
18.2. Obiecte intrinseci.........................................................................................
18.2.1. Obiectul Math .......................................................................................
18.2.2. Obiectul String...............................................................................
18.2.3. Obiectul Array ...............................................................................
253
253
262
262
264
269
276
277
278
281
282
283
284
287
288
290
291
293
394
296
297
298
300
300
304
305
307
309
310
312
312
Anexe
ANEXA A Culori....................................................................................................
ANEXA B Caractere n HTML...............................................................................
ANEXA C CSS Specificaii de stil.........................................................................
Bibliografie selectiv...................................................................................................
317
321
325
331
Prefa
10
PARTEA I
HTML
11
12
Hipermedii i hipertext
Un hipermediu sau hipertext este un document alctuit din text, care conine
informaia propriu-zis i hiperlegturi ctre alte seciuni sau alte documente situate
pe internet. Hipertextul poate fi considerat un mediu non-liniar, n care trebuie
urmate anumite legturi ntre noduri pentru a accesa informaia. Nodurile sunt
identificate, n mod unic, prin adres. De exemplu, dac dorim s obinem o anumit
adres sau capitol dintr-o carte, n loc s facem acest lucru fizic se poate atinge o
anumit zon a paginii ca s obinem informaia dorit.
Dup 1996 putem spune c s-a produs o explozie a spaiului web,
majoritatea instituiilor, firmelor, organizaiilor dorind s aib propriile site-uri web.
Pentru a reduce diferenele dintre transmiterea prin televiziune, care are o
infrastructur bazat pe unde sau cablu, cu o capacitate foarte mare de transfer de
date, i cele ale internetului, n care comunicarea era realizat prin telefonie (dial-up),
s-au elaborat noi tehnologii de transfer a datelor pe spaiul www, bazate pe fibr
optic sau comunicaii prin satelit. Numrul tot mai mare de utilizatori i volumul
mare de date transferate prin internet a dus la gsirea de soluii hard i soft de
compresie a datelor. Compresia datelor a dus la deteriorarea calitii acestora. n
urma unor cercetri s-au gsit algoritmi de compresie a datelor multimedia care s
nlture anumite frecvene fr a periclita acurateea auditiv i vizual. De exemplu,
standardele MPEG (Motion Picture Experts Group) sau AVI (Audio-Video
Interleaved) folosesc stocarea compresat cu pierderea unor date audio sau video.
Utilizatorii de site-uri trebuie s aib instalat un player pentru a reda obiectele
multimedia ncapsulate n site. De asemenea, n scopul accesului la obiectele de pe
Web s-a creat soft necesar pentru compresia diferitelor tipuri de media, recunoscute
de player sau de programele navigatoare Web, astfel pentru:
Text
HTML (HyperText Markup Language)
XHTML (Extensible HyperText Markup Language)
XML (Extensible Markup Language)
WML (Wireless Markup Language) etc.
Imagine
BMP (BitMap Picture)
WBMP (Wireless BitMap Picture)
EPS (Encapsulated Post Script)
GIF (Graphics Interchange Format)
JPEG (Joint Picture Experts Group)
PNG (Portable Network Graphics)
SVG (Scalable Vector Graphics)
Sunet
WMA (Windows Media Audio)
WAV (Wave Format)
MIDI (Musical Instrument Digital Interface)
MP3 (MPEG-1 Layer 3) etc.
14
Animaie / Sunet
AVI (Audio Video Interleaved)
MPEG (Motion Picture Experts Group)
WMV (Windows Media Video)
QuickTime, Flash etc.
Prelucrri imagine Photoshop
Prelucrri pe server PHP
Lumi 3D X3D (Extensible 3D)
Animaie / validare date JavaScript
Stiluri CSS (Cascade Style Sheets)
Exist dou tipuri de codificare a informaiei grafice:
Rasterizate (bmp, wbmp, jpeg, gif), constituite din matrice de pixeli;
Vectoriale (svg, eps), alctuite din elemente geometrice: linii, curbe,
suprafee etc.
Imaginile vectoriale au avantajul de a putea fi redimensionate fr pierderea
calitii sau modificarea semnificativ a dimensiunii fiierului.
unde:
protocol desemneaz protocolul utilizat (HTTP, RTP, FTP)
domeniu este adresa simbolic a unui calculator (de exemplu, adresa
server-ului web)
calea reprezint irul de directoare ctre resursa dorit.
Protocolul HTTP din adres este automat completat de browser, deci nu este
obligatoriu de tastat. Adresa site-ului este i ea o adres URL, i anume a fiierului
rdcin (home page). Acest fiier este inclus n folder-ul rdcin a site-ului i,
pentru majoritatea server-elor, acesta este denumit index.html.
De exemplu, dac tastm
http://www.adresa-utilizator.ro
sau numai
www.adresa-utilizator.ro
la un browser, se solicit acestuia s ncarce i s afieze fiierul rdcin al
site-ului. Astfel, se poate scrie i http://www.adresa-utilizator.ro/index.htm. S
presupunem c site-ul de la adresa www.adresa-utilizator.ro conine dou foldere,
numite texte i imagini, iar folderul texte are fiierele curs1.html, curs2.html
Pentru a accesa unul din aceste fiiere, vom scrie adresa URL www.adresautilizator.ro/texte/curs1.htm
OBSERVAIE!
URL-urile nu pot conine spaii. Ca alternativ, adresa URL permite ca unele
caractere s fie specificate prin simbolul % urmat de echivalentul hexazecimal al
caracterului respectiv. Dac dorim, de exemplu, s apar caracterul spaiu, care are codul
32 zecimal i 20 hexazecimal (2x16+0=32) vom scrie www.adresa%20utilizator.ro
n tabelul de mai jos se specific formatul URL a unor caractere uzuale care
se pot ntlni n adresele URL:
Caracter
Spaiu
Tab
Enter
Procent
End of line
Cod zecimal
32
9
10
37
13
Cod hexazecimal
20
09
0A
25
0D
Codificare URL
%20
%09
%0A
%25
%0D
se va solicita clientului s completeze un formular cu numele dorit al siteului, adresa de e-mail (una din cele pe care le avei), o parol etc. Dac datele au fost
completate corect se poate obine un site la adresa
www.nume.freewebsites.com
www.nume.b0x.com
La adresa de e-mail specificat n formular se va primi un mesaj prin care se
cere s confirmm nscrierea, scriind parola dat i numele de utilizator (USER ID) i
un cod care a fost dat dup completarea formularului.
S presupunem c n urma acestei cereri s-a obinut un site gratuit:
adresa: www.testweb.freewebsites.com
parola: pagweb
User ID: ana
Pentru a putea fi populat un site, trebuie transferate fiiere. Transferul
fiierelor de la calculator la server i invers se poate face (aa cum s-a menionat mai
sus) cu protocolul FTP. Unul din protocoalele FTP, utilizate i n aceast carte, este
WS_FTP95, care se descarc de pe Internet.
Dup ce a fost download-at un protocol ftp, apare o caset de dialog n care
trebuie introduse datele de acces la site:
Host name: test.web.freewebsites.com
Host type: Automatic detect
User ID: ana
Parola:
****** (pagweb)
Dac datele au fost introduse corect, atunci programul afieaz o fereastr cu 2
panel-uri. Panel-ul drept conine fiierele din site i panelul stng conine fiierele din
directorul curent al calculatorului local. Transferul fiierelor din folder i invers se face
cu dublu click pe fiier sau prin Drag&Drop. Se pot crea directoare cu MkDir, se pot
terge fiiere cu Delete i se poate schimba unitatea curent de pe calculator. Pentru un
transfer mai riguros se apas butonul ASCII din fereastra afiat.
OBSERVAIE!
Pentru a scrie codul unui fiier HTML, nu trebuie s fim conectai la
Internet.
Un fiier HTML poate conine comentarii pentru a-l face mai uor de
parcurs. Comentariile pot aprea oriunde n fiier i nu vor fi afiate de browser.
Sintaxa comentariilor n HTML este:
<!-- comentariu 1 -->
<!-- comentariu
19
Ana Ionescu
20
21
OBSERVAII!
Dac unul din marcajele perechi nu este nchis, sau lipsete o parantez
unghiular la unul din marcaje, atunci programul de navigare nu nelege
marcajul i-l va afia.
Dac browser-ul afieaz toate controalele de formatare n loc s le
interpreteze se poate ca fiierul s aibe extensia .txt, nu .htm sau .html.
Din analiza exemplului de sus se observ c:
Elementele <> i </> sunt folosite pentru identificarea controalelor i
reprezint comenzi adresate browser-ului pentru a reda documentul.
O pagin web poate fi compus din mai multe blocuri.
Blocul exterior este cuprins ntre controalele <HTML></HTML> i
reprezint tot documentul HTML.
Blocul antet este cuprins ntre controalele <HEAD></HEAD>.
Opional, antetul poate conine un titlu pentru pagin, cuprins ntre
controalele <TITLE></TITLE>.
22
Blocul interior corp program poate conine text i /sau imagini i este
cuprins ntre controalele <BODY></BODY> .
ntre parantezele unghiulare <> sau </> i cuvintele cheie din interiorul lor
nu este permis spaiul (< HEAD > incorect).
HTML nu face distincie ntre majuscule i liter mic cu care se scriu etichetele.
Ana Ionescu
23
24
Ana Ionescu
OBSERVAII!
Se pot folosi n interiorul blocului <PRE></PRE>, elemente de formatare
(B, I, U etc.), dar nu toate sunt suportate de browser.
Deoarece n interiorul etichetei <PRE> este permis folosirea altor marcaje,
caracterele speciale <,> trebuie convertite n entiti.
Spaiile sunt pstrate.
Etichetele HTML nu sunt ignorate de browser, ci interpretate.
Atributele etichetei <PRE> sunt:
width reprezint lungimea liniei i poate fi un numr ntreg pozitiv sau un
procent
25
27
28
3. Stiluri de text
Stilul TT
Textul monospaiat sau teleimprimator (teletype) este afiat cu ajutorul
tag-urilor <TT> i </TT> . Amintim c ntr-un stil monospaiat (de exemplu: courier
new) fiecare liter ocup aceeai lime chiar dac este mai ngust (de exemplu: i
comparativ cu m). Stilul logic <PRE> </PRE> afieaz textul cu font
monospaiat, dar acesta din urm pstreaz i spaiile dintre cuvinte i linii.
Stilul U
Textul scris ntre tagurile <U> i </U> va aprea subliniat (underline).
Marcajul <U> este mai puin utilizat deoarece unele versiuni ale navigatorului
Netscape ignor marcajul <U>. n documentele HTML care conin legturi ctre alte
documente, acestea apar subliniat, ceea ce s-ar putea confunda cu un text subliniat, mai
ales pentru cei care lucreaz pe monitoare alb negru, sau pentru cei care utilizeaz
nuane de gri.
Stilul INS
Stilul INS are rolul de a comanda browser-ului ca textul scris ntre <INS> i
</INS> s fie subliniat, pentru a evidenia c a fost ceva nou introdus.
Exemplu de utilizare a acestor stiluri:
<HTML><HEAD> </HEAD>
<BODY>
<B> <TT> <U> Teorema.</U></B> </TT>
<I> ntr-un triunghi <INS>dreptunghic <INS> ipotenuza la patrat este
egala cu suma patratelor catetelor </I>
</BODY>
</HTML>
Stilul S i STRIKE
Un text cuprins ntre etichetele <S> i </S> sau <STRIKE> i </STRIKE>
este afiat tiat cu o linie (barat), ca n exemplul de mai jos:
<HTML> <HEAD> </HEAD>
<BODY>
<S> Text barat </S> <BR>
<STRIKE> Alt Text barat </STRIKE>
30
</BODY>
</HTML>
Stilul Big
Acest stil este folosit pentru a comanda browser-ului ca n textul cuprins ntre
tagurile <BIG> i </BIG> s fie scris mai mare dect textul curent.
Stilul SMALL
Acest stil este folosit pentru a comanda browser-ului ca textul cuprins ntre
tagurile <SMALL> i </SMALL> s fie scris mai mic dect textul curent.
Elementele BIG si SMALL nu sunt recunoscute de toate browser-urile, fapt
pentru care este indicat s se foloseasc atributul size al tag-ului <FONT>.
Un exemplu de utilizare a acestor stiluri:
<HTML>
<HEAD> </HEAD>
<BODY>
<B> <BIG> <BIG> BIG </BIG></BIG></B>
<SMALL> si </SMALL>
<B> <BIG> SMALL </BIG> </B>
</BODY>
</HTML>
Titluri
Dac pagina conine mai multe seciuni i subseciuni, HTML permite
introducerea a ase tipuri de titluri predefinite H1, H2, H3, H4, H5 i H6.
Fiecare titlu este scris ntre etichetele: <H1> </H1>, <H2> </H2>,
<H3> </H3>, <H4> </H4>, <H5> </H5> ,<H6> </H6>.
Titlul H1 este cel mai nalt i ngroat, iar titlul H6 este cel mai de jos i este
afiat cu cel mai mic i mai subire font.
Toate titlurile:
sunt afiate pe un rnd nou i cu un spaiu dup blocul precedent
accept atributul align = valoare cu valori posibile left (implicit),
right, center i justify.
Un exemplu de utilizare a titlurilor este redat mai jos:
<HTML>
<HEAD> </HEAD>
<BODY>
<H1 align=center> TITLUL H1 (cel mai mare si gros) </H1>
<H2> TITLUL H2 </H2>
<H3 align=right> TITLUL H3 </H3>
<H4 align=justify> TITLUL H4 </H4>
<H5 align=left> TITLUL H5 </H5>
<H6 align=center> TITLUL H6 (cel mai mic si subtire) </H6>
</BODY> </HTML>
Figura 3. 5. Titluri
Stilul BLOCKQUOTE
Stilul logic pentru introducerea citatelor lungi se realizeaz cu tag-urile
<BLOCKQUOTE></BLOCKQUOTE> i <Q></Q>. Elementul <Q> este
element inline, iar elementul <BLOCKQUOTE> este de nivel bloc. Coninutul
blocului este afiat ncepnd de pe rnd nou, cu spaiul nainte, dup, la stnga i la
dreapta de citat, practic indenteaz textul, aa cum reiese din exemplul urmtor:
<HTML>
<HEAD> </HEAD>
<BODY>
<B> <TT> CITAT</B> </TT>
<BLOCKQUOTE>
"Omul nu este decat o trestie, cea mai fragila din natura,
dar este o trestie ginditoare.
" Blaise Pascal (1623-1662)
</BLOCKQUOTE>
</BODY>
</HTML>
34
3.3. Fonturi
Pentru a schimba fontul unui text utilizat (dimensiune, culoare, tip de liter)
acesta se scrie ntre etichetele <FONT > i </FONT>.
Eticheta pereche de formatare <FONT > i </FONT> este un element inline,
adic se poate aplica oriunde n interiorul unui rnd.
Atributele elementului FONT sunt: face, size i color i au sintaxa cunoscut a
unui atribut (atribut=valoare).
face indic tipul de liter utilizat pentru un font i are sintaxa:
face = lista de corpuri de liter.
n cazul n care lista are mai multe de un tip de liter, acestea se separ
prin virgule. Browser-ul va utiliza primul corp de liter recunoscut. Dac
niciunul dintre fonturi nu este gsit, browser-ul va folosi tipul de liter
36
interiorul elementului BASEFONT se pot gsi alte elemente FONT pentru formarea
unor secvene de text.
Utilizarea fonturilor este exemplificat n continuare:
<HTML>
<HEAD>
</HEAD>
<BODY>
<BASEFONT size=3 face=Arial>
<FONT face="Times New Roman" color="blue" size=7> Aplicarea
fonturilor</FONT><BR>
<FONT face="Courier " color="#00FF00" size=-2> acest text are dimensiune 5 si
culoarea verde</FONT><BR>
Text normal scris cu parametrii elementului BASEFONT
<FONT face="Helvetica Narrow" color="#FF0000" size=-1> Text scris cu
dimensiunea 3 si culoare rosie</FONT><BR>
Succes in continuare la insusirea
<FONT size=+1> H </FONT> <FONT size=+1> T </FONT>
<FONT size=+1> M </FONT> <FONT size=+1> L </FONT>
</BODY>
</HTML>
Figura 3. 9. Fonturi
38
4. Liste
1. cut
copy
2. copy
paste
3. paste
find
4. find
delete
5. delete
Liste Ordonate
Liste Marcate
Cut
Decupeaz un text
Copy
Copiaz un text
Paste
Lipete un text
Find
Caut un text
Delete
terge un text
Liste de Definiii
Elementul LI
Pentru a introduce elemente n list se folosesc etichetele <LI> i </LI>.
Textul cuprins ntre aceste elemente va fi considerat un articol al listei. Eticheta de
sfrit </LI> nu este obligatorie n HTML, dar n XHTML da.
Atributele unei liste ordonate au sintaxa: atribut=valoare i sunt:
<LI> PARAGRAPH
<LI> BULLETS AND NUMBERING
<LI>COLUMNS
</OL>
<BODY></HTML>
Lista vid
O list fr niciun element se numete list vid. Putem crea o list vid i
n scopul de a indenta un text (aa cum face elementul <blockquote>).
<HTML>
<HEAD> </HEAD>
<BODY><B> LISTA VIDA</B>
<UL> <B> Atributele elementului BASEFONT in HTML: </B><BR>
FACE - pentru tip de litera <BR>
SIZE - pentru dimensiune <BR>
COLOR- pentru culoare <BR>
</UL>
<BODY> </HTML>
<HTML>
<HEAD> </HEAD>
<BODY>LISTE NEORDONATE IMBRICATE
<UL> COMENZI EDIT SI MOD DE EXECUTIE
<LI> COPY
<UL>
<LI> CTRL+C
<LI> Menu Edit
<LI> Menu contextual
<LI> Buton bara
<LI> Drag & Drop
</UL>
<LI> CUT
<UL type="square">
<LI> CTRL+X
<LI> Menu Edit
<LI> Menu contextual
<LI> Buton bara
<LI> Drag & Drop
</UL>
<LI> PASTE
<UL type="disc">
<LI> CTRL+V
<LI> Menu Edit
<LI> Menu contextual
<LI> Buton bara
</UL>
<LI> FIND
<UL>
<LI> CTRL+F
<LI> Menu Edit
</UL>
<BODY> </HTML>
Figura 4. 5. Liste marcate imbricate
43
<HTML>
<HEAD> </HEAD>
<BODY>LISTE MIXTE IMBRICATE
<OL type="I" start=4> Citeva elemente HTML
<LI> FONT
<UL type="disc">
<LI> face
<LI> size
<LI> color
</UL>
<LI>BASEFONT
<UL type="circle">
<LI> face
<LI> size
<LI> color
</UL>
<LI> OL
<UL type="square">
<LI> type
<LI> start
</UL>
<BODY>
</HTML>
Figura 4. 6. Liste mixte imbricate
4.2.1. Atributele elementului LI
Eticheta <LI> poate avea atribute care schimb parametrii definii n
etichetele <OL> i <UL>.
Atributele sunt:
type valabil att pentru listele ordonate, ct i pentru cele neordonate i
are aceleai valori ca i atributul type din <OL> i <UL>.
value valabil doar pentru listele ordonate, i are ca efect schimbarea
numerotrii secveniale i poate avea valori numere ntregi, valoarea
implicit fiind 1.
n exemplul urmtor sunt introduse atributele etichetei <LI> pentru
exemplul de mai sus.
<HTML>
<HEAD> </HEAD>
<BODY>Atibutele elementului LI
<OL type="A" >Citeva elemente HTML dintr-o lista
<LI> FONT
<UL type="disc"> Atribute
<LI> face
44
45
<DT>MIERCURI
<DD>9-17
<DT>JOI
<DD>9-13
<DD>15-19
<DT>VINERI
<DD>9-14
</DL>
</BODY>
</HTML>
46
5. Tabele
5.1. Generaliti
Tabelele reprezint n HTML un element important, evideniindu-se prin
tag-urile <TABLE> i </TABLE>. El are o form dreptunghiular i este alctuit
din linii i coloane la intersecia crora se afl celulele.
Tabelele ofer o mulime de posibiliti pentru a evidenia un text pe mai
multe linii i coloane, pentru delimitarea spaiului unei pagini, n vederea gruprii
ntr-o machet a unor elemente (text, imagini etc).
Spre deosebire de tabelele din procesoarele de texte, tabelele din HTML au
dezavantajul c sunt destul de greu de construit. Trebuie specificai parametrii
tabelului, ai liniilor i ai celulelor. Orice tabel este compus din trei elemente i
anume:
<TABLE> ... </TABLE> descrie un tabel
<TR atribute> ... </TR> (Table Row) descrie o linie a unui tabel
<TD atribute> ... </TD> (Table Data) descrie o celul a tabelului
OBSERVAII!
Etichetele de nchidere </TR> i </TD> sunt opionale, astfel o linie
nou ncepe atunci cnd se ntlnete o nou etichet <TR>. n
XHTML aceste etichete sunt obligatorii.
Dac o linie a unui tabel are mai multe celule dect restul liniilor,
automat toate liniile vor avea acest numr maxim de celule, browser-ul
adugnd celule vide liniilor, pentru a respecta forma dreptunghiular a
tabelului.
n lipsa unor atribute de formatare a tabelului, toate celulele unei
coloane au limea impus de cea mai lat celul.
Celulele unui tabel pot conine orice tip de informaie: text, imagine,
tabele, sau chiar combinaii ale acestora.
Figura 5. 1. Tabele
OBSERVAII!
Dac valoare=0, atunci border-ul lipsete i este echivalent cu lipsa
atributului din <TABLE>
Valoarea implicit a border-ului este 1, deci border fr valoare este
echivalent cu border =1
Dac valoare <> 0 atunci linia de contur este afiat n 3-D
Atributul BORDERCOLOR
Acest atribut indic culoarea bordurii n Netscape Navigator, iar n Internet
Explorer indic i culoarea caroiajului interior al tabelului. Sintaxa lui este
bordercolor=valoare, unde valorile posibile sunt ca i ale atributului color de la
etichetele <FONT> i <BASEFONT> i anume
un nume de culoare
o secven RGB (red, green, blue) de 6 cifre hexazecimale, cte dou
pentru fiecare culoare, precedate de #.
Dac n exemplul de mai sus adugm i atributul bordercolor la
etichetele <TABLE>, astfel
<TABLE border
bordercolor="#00FF00">
<TABLE border=2 bordercolor="red">
<TABLE border=5 bordercolor=#0000FF>
49
Atributul FRAME
Acest atribut ofer un control i, mai precis, al chenarelor din jurul
tabelelor i are sintaxa frame= valoare. Valorile posibile i modul de afiare a
lor sunt:
50
a11
a21
a12
a22
a11
a21
a12
a22
a11 a12
a21 a22
a11 a12
a21 a22
a11 a12
a21 a22
a11 a12
a21 a22
a11 a12
a21 a22
a11 a12
a21 a22
Atributul RULES
Atributul RULES definete modul de afiare a caroiajului dintre celulele
tabelului i are sintaxa rules=valoare.
Valorile posibile i modul de afiare a lor sunt
- none elimin toate muchiile interioare ale tabelului
a11
a21
a12
a22
a11
a21
a12
a22
a11
a21
a12
a22
a11
a21
a12
a22
Atributul ALIGN
Atributul align precizeaz alinierea tabelului n pagin. Valorile posibile
sunt: left (implicit), right i center.
n cazul n care exist i text, acesta va fi poziionat fa de tabel n funcie
de alinierea acestuia.
Un exemplu este dat mai jos:
<HTML><HEAD></HEAD>
<BODY>
<TABLE frame=vsides border align= left >
<TR ><TD>a11<TD>a12
<TR><TD>a21<TD>a22
</TABLE>
<P>Textul este aliniat la stanga tabelului </P>
<TABLE border rules=none align= right >
<TR ><TD>a11<TD>a12
<TR ><TD>a21<TD>a22
</TABLE>
<P>Textul este aliniat la dreapta tabelului</P>
Acesta este un tabel aliniat la centru. Textul apare deasupra si
<TABLE border=4 rules=all align= center >
<TR ><TD>a11<TD>a12
<TR ><TD>a21<TD>a22
51
</TABLE>
<P>sub tabel</P>
</BODY>
</HTML>
52
Atributul CELLSPACING
Acest atribut definete spaiul dintre celule. Valorile acestui atribut se pot
da n pixeli sau n procente fa de dimensiunea blocului printe. Valoarea
implicit este 0 pentru tabelele fr caroiaje i 2 pentru cele cu caroiaj.
Atributul CELLPADDING
Acest atribut definete spaiul lsat ntre marginea celulei i informaia din
celul (text, imagine etc). Valoarea implicit este 0. Valorile atributului pot fi date
n numere (ce reprezint distana n pixeli) sau n procente.
n exemplul de mai jos sunt utilizate aceste atribute.
<HTML>
<HEAD></HEAD>
<BODY>
<TABLE border=5
bordercolor=#0000FF
align=center width=50% height=50
cellspacing=3 cellpadding=10>
<TR><TD>a11<TD>a12<TD>a13
<TR><TD>a21<TD>a22<TD>a23
<TR><TD>a31<TD>a32<TD>a33
</TABLE>
</BODY>
</HTML>
Figura 5. 6. Atributele elementului TABLE
53
Atributul BGCOLOR
Acest atribut stabilete culoarea de fundal pentru toate celulele. Valorile
acestui atribut sunt nume de culori sau secven RGB.
Observaie!
Majoritatea atributelor elementului <TABLE> sunt atribute i ale
elementelor <TR> i <TD>. Prioritatea unui atribut (de exemplu, align) este
54
5.2.1. Elementul TH
n cadrul unui tabel se poate nlocui eticheta <TD> cu eticheta <TH>
pentru a specifica antete de coloane i de linii. Elementul <TH> este aproape
identic cu <TD>, cu dou excepii: dac celula conine text, el este afiat aldin
(bold) i este centrat n celul.
n exemplul de mai jos se red un tabel cu antet de linie i de coloan.
<HTML><HRAD>
</HEAD><BODY>
<TABLE border align=center
cellspacing=2 bgcolor=yellow vspace=70>
<TR> <TH> Beneficii 2006 <TH> Semestrul I <TH> Semestrul II
<TR> <TH> Bucuresti <TD> 100000 euro <TD> 250000 euro
<TR> <TH>Iasi <TD> 200000 euro <TD> 300000 euro
</TABLE>
</BODY>
</HTML>
Figura 5. 8. Elementul TH
Observaii!
Toate atributele liniei le gsim i n lista atributelor pentru TABLE
Atributul align pentru TABLE aliniaz tabelul pe orizontal, n timp ce
atributul align al elementului TR aliniaz pe orizontal coninutul
celulelor unei linii.
Atributul bgcolor al lui TABLE se refer la culoarea de fond a tabelului,
n timp ce atributul bgcolor al lui TR se refer la culoarea de fond a
celulelor dintr-o linie.
Atributele de linie sunt prioritare celor de tabel.
Un exemplu care utilizeaz atributele de linie:
<HTML><HRAD></HEAD><BODY>
<TABLE border align=center cellspacing=2 bgcolor=yellow >
<TR align=center valign=middle bgcolor=red>
<TD> Prescurtarea HyperText Markup Language <TD> HTML
<TR align=right valign=bottom> <TD> Limbaj<TD> Pagini
</TR>
</TABLE> </BODY></HTML>
57
58
<BODY>
<TABLE border=3
bordercolor=blue>
<TR><TD>a11<TD>a12<TD>a13
<TR><TD>a21<TD colspan=2>a22
<TR><TD>a31<TD>a32<TD>a33
</TABLE>
</BODY></HTML>
Figura 5. 12. Atributul COLSPAN
atributului
de
celul
Folosirea
rowspan=nr are, ca efect secundar, introducerea
de nr-1 celule vide pe fiecare linie pentru a
pstra forma dreptunghiular astfel:
<HTML>
<HEAD></HEAD>
<BODY>
<TABLE border=3 bordercolor=blue>
<TR><TD>a11<TD>a12<TD>a13
<TR><TD>a21<TD rowspan=2>a22<TD>a23
<TR><TD>a31<TD>a32<TD>a33
</TABLE> </BODY></HTML>
Dac se renun la celula cu coninut a33 tabelul va avea dimensiunea
iniial.
<HTML>
<HEAD></HEAD>
<BODY>
<TABLE border=3
bordercolor=blue>
<TR><TD>a11<TD>a12<TD>a13
<TR><TD>a21<TD
rowspan=2>a22<TD>a23
<TR><TD>a31<TD>a32
</TABLE>
</BODY></HTML>
60
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE border=2>
<TR><TD>a11<TD>a12<TD>a13
<TR><TD colspan=2>a21<TD>a23
<TR><TD>a31<TD> <TD>a33
</TABLE></BODY></HTML>
Figura 5. 14. Celule vide
Un alt exemplu mai complet de utilizare a celor dou atribute va fi dat mai jos:
<HTML><HEAD></HEAD><BODY>
<TABLE border=4 bordercolor=blue>
<TR> <TD colspan=3 align=center valign=25%>
<font sise=6 color =red>
atributele colspan si rowspan </font>
<TR><TD rowspan=3> a11<br>a21 <br>a31
<TD>a12<TD colspan=2 rowspan=3>
a13 a14<br>a23 a24 <BR> a33 a34
<TR> <TD>a22 <TR><TD>a32 <TR><TD>a41
<TD colspan=3 align=center> a42 a43 a44
</TABLE>
</BODY> </HTML>
Atributul NOWRAP
Pentru a afia coninutul unei celule pe un singur rnd se utilizeaz
atributul NOWRAP. n cazul c textul depete dimensiunea celulei, apare bara de
defilare pe orizontal, ca n exemplul de mai jos.
61
<HTML>
<HEAD> </HEAD>
<BODY>
<TABLE border=2 align=center
width=100% height=100%>
<TR><TD>XHTML
<TD nowrap>Extensible HyperText MarkupLanguage
<TR> <TD> Sigla <TD>Limbaj
</TABLE>
</BODY>
</HTML>
62
OBSERVAII!
aceste blocuri sunt incluse n blocul <TABLE> ... </TABLE>, dar nu
sunt obligatorii n realizarea unui tabel
Fiecare bloc <TABLE> ... </TABLE> poate conine numai cte un bloc
de seciune
Etichetele de sfrit </THEAD>,</TFOOT>,</TBODY> sunt opionale.
Eticheta <THEAD> i <TFOOT> trebuie s apar dup <TABLE> i
nainte de <TBODY>. Browser-ul poate afia liniile de final nainte ca
liniile corpului s conin datele care se ncarc.
Atributele pentru aceste elemente se aplic pentru toate liniile care
cuprind blocurile, n lipsa altor formatri, i acestea sunt: align, valign,
bgcolor.
Fiecare din aceste elemente conin etichetele <TR> i <TD> obinuite.
Structura unui tabel care utilizeaz facilitatea de grupare de linii va fi:
<TABLE atribute>
<CAPTION > ... </CAPTION>
<THEAD>
<TR>
.
</THEAD>
<TFOOT>
<TR>
.
</TFOOT>
<TBODY>
<TR>
</TBODY>
</TABLE>
<HTML>
<HEAD></HEAD>
<BODY>
<TABLE border=3 bordercolor=darkblue>
<COLGROUP valign=top>
<COL WIDTH=100 span=2
align=center valign=middle bgcolor=yellow>
<COL width=50 align=right bgcolor=cyan>
<TR height=50> <TD> POP <TD> ANA <TD> 20 ani
<TR> <TD height=50>ENE <TD>DAN<TD>19 ani
<TR> <TD>MANEA <TD height=50> ION <TD> 21 ani
</TABLE>
</BODY>
</HTML>
65
6. Imagini
67
extensia: .jpg, jpeg, png etc. Fiierul care conine imaginea se gsete n directorul
curent (ca n exemplul de mai sus), n alt folder din calculatorul curent sau n reeaua
web.
n cazul n care fiierul se afl:
n alt locaie dect directorul curent, numele fiierului trebuie precedat de
calea relativ la directorul curent
n reeaua web, trebuie dat adresa URL absolut, ca de exemplu:
http://www.fmi.unibuc.ro./facmat.jpg
Atributul alt
Exist posibilitatea ca imaginile s nu se poat ncrca din diferite motive,
situaie n care se folosete atributul alt al elementului IMG. Valoarea acestui atribut
este un text, care va fi afiat n locul imaginii.
<HTML>
<HEAD></HEAD>
<BODY>
<IMG src="Taj_Mahali.jpg" height =150 width = 150 alt="Hotelul TRUMP
Taj Mahal">
de la Atlantic City
</BODY>
</HTML>
Atributul align
Atributul align indic browser-ului cum va fi aliniat poza fa de text. n
lipsa unei opiuni, poza este plasat acolo unde este scris n cod (IMG este element
inline, iar textul ncepe de la baza pozei).
Valorile atributului sunt:
left aliniere la stnga i textul curge pe lng imagine n dreapta ei,
ncepnd din partea superioar
right aliniere la dreapta i textul curge pe lng imagine n stnga ei,
ncepnd din partea superioar
69
70
Atributul Border
Atunci cnd se insereaz o imagine, browser-ul o va afia fr chenar. Pentru
a aduga un chenar unei imagini se folosete atributul border=nr_pixeli, unde
nr_pixeli reprezint grosimea chenarului n pixeli. Valoarea implicit este 0.
Dac n exemplul din figura 6.1 se mai adaug acest atribut
<IMG src="Taj_Mahal.jpg" height =150 width = 150 border=4>
browser-ul va afia:
72
7. Legturi (Link-uri)
7.1. Elementul A
Pentru a crea o legtur se folosete marcajul ancor, care are sintaxa:
<A atribute> coninut </A>.
Coninutul dintre marcajele <A> i </A> poate fi text i/sau imagine, este
afiat de browser sub form de legtur (colorat i subliniat), i poate accepta
comenzi de la mouse (un clic) sau de la tastatur (ENTER). Cnd este deasupra
unei legturi, cursorul grafic ia forma unei mini -, indicndu-ne astfel c
browser-ul este pregtit s descarce resursa Internet de la adresa URL indicat.
Dac un document are mai multe legturi ne putem deplasa de la una la alta i cu
75
mouse-ul i cu ajutorul tastei TAB, iar pentru a face o legtur activ se execut
clic cu butonul stng pe legtur sau se tasteaz ENTER. La un moment dat doar o
legtur poate fi activ i n jurul coninutului legturii este afiat un chenar de
ctre unele browser-e.
Atributele marcajului <A>
Atributele marcajului <A> sunt: href, target, title, name.
Atributul HREF (referin hipertext)
Acest atribut este obligatoriu pentru elementul legtur (ca src pentru
elementul img), are sintaxa href=adresa URL i are rolul de a identifica o adres
URL absolut (de pe Internet) sau relativ (local).
n exemplul de mai jos dm o referin ctre un fiier local, flori.jpg, i
ctre pagina Universitii Bucureti, de pe WEB.
<HTML>
<HEAD> </HEAD>
<BODY>
Florile mele preferate
<A href="flori.jpg"> CRINI </A>
<P>
Detalii despre Universitatea Bucuresti
<A href="http://www.unibuc.ro">UnivBuc</A>
</P>
</BODY>
</HTML
Figura 7. 1. Legturi
Atributul TARGET
Cnd utilizatorul activeaz o legtur, browser-ul nlocuiete fereastra care
conine legtura cu o nou fereastr, specificat de adresa URL din href. Atributul
target face s se schimbe aceast operaie implicit i el are sintaxa
76
<HTML>
<HEAD>
</HEAD>
<BODY>
Pentru mai multe informatii
Despre <BR> invatamant vizitati site-ul
Ministerul Educatiei si Cercetarii
<A href=http://www.edu.ro> MEC
</A>
</BODY>
</HTML>
Figura 7. 2. Legturi la adrese WEB
Dac n site-ul vizitat nu exist o imagine ca fiier .gif sau .jpg, atunci se
copiaz imaginea existent cu Print Screen, se deschide Paint i se lipete (Paste)
imaginea. Se decupeaz din imagine ce ne intereseaz i se copiaz ntr-un nou
fiier care se salveaz cu nume.bmp.
Dac imaginea dintr-o pagin este un fiier imagine, se d clic dreapta i
din Properties se afl numele fiierului. Se pot folosi i imagini din calculatorul
nostru i atunci adresa URL a atributului src este una relativ.
Un link poate fi format i din text i din imagine ca n figura de mai jos:
<HTML>
<HEAD> <TITLE> Legaturi cu text si cu imagini </TITLE> </HEAD>
<BODY>
Facultatea de Matematica-Informatica UnivBuc
79
80
C:/
Pag_0.pdf
SISTEM
Pag_1.html
Pag 2.pdf
PROIECT
Pag_1.txt
IMAGINI
Pag_1.gif
Pag_2.gif
Pag_3.jpg
Pag_4.eps
ANALIZ
AUDIO-VIDEO
aplauze.wav
film.avi
Pag_1.htm
PROIECTARE
Pag_2.htm
Pag_3.htm
EXPLOATARE
Pag_4.htm
Pag 5.htm
Figura 7. 6. Arbore de foldere
82
Se opteaz dac fiierul s fie deschis sau salvat. n unele cazuri Open este
implicit, adic dup download-are este lansat programul care-l prelucreaz, de
exemplu un sunet i un film.
De exemplu:
<A href=d:/poze/craciun_2006.avi> MOS CRACIUN</A>
Fiierele .avi se pot gsi i pe site-uri, dar dureaz mult transferul pe
calculatorul nostru
browser-ul cunoate tipul de fiier i acesta va fi deschis n fereastra sa.
Utiliznd figura 7.6, avem codul HTML:
83
<HTML>
<HEAD>
</HEAD>
<BODY>
<A Href=../../../pag_2.pdf target=FPDF>
Fisier PDF </A> <BR>
<A Href=/pag_0.pdf target=FPDF>
Alt Fisier PDF </A> <BR>
<A Href=../../../pag_1.txt target=FTXT>
Fisier text </A> <BR>
<A Href=/SISTEM/IMAGINI/pag1.gif:/
target=FGIF> DESEN</A>
</BODY>
</HTML>
Figura 7. 9. Legturi la fiiere non HTML
surs numai definirea ancorelor i referirea lor, dup cum se poate observa n codul
de mai jos.
<HTML><HEAD>
</HEAD>
<BODY>
<PRE>
<A id="Lista_tip_univ"> </A>
Lista tipurilor de universitati se afle la adresa
http://www.edu.ro/index.php/articles/c108/
Instituii de nvmnt superior
Lista Instituiilor de nvmnt superior de stat
Lista Instituiilor de nvmnt superior particulare acreditate
Lista Instituiilor de nvmnt superior particulare autorizate provizoriu
Lista colilor de Studii Academice Postuniversitare
</PRE>
<PRE>
<A id="stat"> </A>
Lista Universitatilor de Stat se afla la adresa
http://www.edu.ro/index.php/articles/c487/
Instituii de nvmnt Superior de Stat
</PRE>
..........
<PRE>
<A id="part_acred"> </A>
Lista Universitatilor Particulare Acreditate se afla la adresa
http://www.edu.ro/index.php/articles/3880
Instituii de nvmnt superior
Lista Instituiilor de nvmnt superior particulare acreditate
Instituii de nvmnt superior particulare acreditate prin lege, sau existente
nainte de 1989* (teologice):
......
</PRE>
<PRE>
<A id="part_autor"> </A>
Lista Universitatilor Autorizate se afla la adresa
http://www.edu.ro/index.php/articles/3882
Instituii de nvmnt superior
Lista Instituiilor de nvmnt superior particulare autorizate provizoriu
.........
</PRE>
<PRE>
<A id="postuniv"> </A>
Lista Scolilor Postuniversitare se afla la adresa
http://www.edu.ro/index.php/articles/3881
85
86
</BODY> </HTML>
Figura 7. 11. Salt ntr-o agend
87
88
89
<HTML>
<HEAD>
<TITLE>
Structura paginii WEB
</TITLE>
</HEAD>
<BODY>
Aceasta este structura general a unui document HTML
</BODY>
</HTML>
92
Author i copyright
Pentru a introduce informaii despre autor sau o autoritate i despre
drepturile de copyright se introduc dou etichete <META> cu valorile atributelor
name, author i respectiv copyright. Deoarece aceste informaii nu sunt afiate
de browser este indicat s se introduc i n blocul <BODY></BODY> al
fiierului informaii, ca n exemplul urmtor (se observ c pentru a obine
simbolul se utilizeaz secvena ©).
<HTML>
94
<HEAD>
<BASE href="http://www.edu.ro/index.php/articles">
<TITLE> Elementul META_Author</TITLE>
<META name"description" content="Carte WEB">
<META name="author" content="Rodica Niculescu>
<META name="copyright" content="Editura Spiru Haret">
</HEAD>
<BODY>
copyright©2006, Editura Spiru Haret
</BODY> </HTML>
<BODY>
<P> copyright©2006, Editura Spiru Haret </P>
</BODY>
</HTML>
Data crerii i data actualizrii unei pagini
Pentru a transmite motoarelor de cutare informaii despre data crerii i
data actualizrii unei pagini se pot folosi dou elemente <meta> cu valorile
atributului http-equiv = creation-date i http-equiv = expires, iar valorile
atributului pereche content sunt date calendaristice cu formatul implicit: ddd,dd
mmm yyyy hh:mm: ss: ttt unde:
ddd reprezint primele trei litere ale zilei
dd reprezint ziua
mmm reprezint primele trei litere ale lunii
yyyy reprezint anul
hh:mm:ss reprezint ora, minutele i secundele
ttt reprezint standardul de timp (de exemplu GMT)
n exemplul de mai sus se adaug dou elemente META, pentru data
curent i data ultimei actualizri. Pentru a schimba formatul implicit se poate
folosi atributul scheme astfel:
<HTML>
<HEAD>
<TITLE> Elementul META_http-equiv</TITLE>
<META name"description" content="Carte WEB">
<META name="author" content="Rodica Niculescu">
<META name="copyright" content="Editura Spiru Haret">
<META http-equiv="from" content="rodicaniculescu@gmail.com">
<META http-equiv="replay-to" content="editura_spiruharet@yahoo.com">
<META http-equiv="creation_date" content="Jun 20 Dec 2007 12:00:00
GMT">
<META http-equiv="expires" content="10-01-2007"
scheme="Month_Day_Year">
</HEAD>
<BODY>
<P> copyright©2006, Editura Spiru Haret </P>
</BODY>
</HTML>
Refresh i Pragma
Pentru transformarea, remprosptarea sau redirecionarea unei pagini se
poate folosi atributul http-equiv cu valorile refresh i pragma. n cazul
remprosptrii paginii, valoarea atributului content este un numr, care indic
96
Lang
Acest atribut al elementului META se utilizeaz pentru a specifica limba
utilizat pentru metadate. Valoarea acestui atribut poate fi dat prin dou caractere
(exemplu: ro) sau printr-o secven de 5 caractere, indicnd dialectul unei limbi
(exemplu: en-us)
De exemplu:
<meta name= keyords content=clase, obiecte, attribute lang=ro>
Elementul STYLE
Acest element din blocul de antet este utilizat pentru introducerea stilurilor.
Foile de stil (CSS-Cascading Style Sheets) se introduc ntre etichetele <STYLE>
i </STYLE>.
Foile de stil pot fi ns definite i n fiiere separate sau inline, n corpul
programului. Stilurile vor fi tratate n capitolele 13 15.
Elementul SCRIPT
Acest element din blocul de antet este utilizat pentru introducerea unor
secvene de program de scriptare n cadrul paginilor web.
Scripturile, ca i stilurile, pot fi introduse i n fiiere separate sau n
corpul programului.
Exist mai multe limbaje de scriptare, ca de exemplu, JavaScript, Jscript,
VBScript etc. n aceast carte va fi tratat scriptul JavaScript, n capitolele 16 20.
98
</HTML>
100
101
9. CADRE
Din exemplul de mai sus rezult c browser-ul va afia trei pagini Web,
fereastra fiind mprit n trei coloane (trei cadre) pe vertical. Aceste cadre vor
avea limile:
30% din fereastr pentru primul cadru
coloanele 2 i 3 vor ocupa restul din spaiul rmas mprit, astfel:
coloana a doua va avea 2/5 din spaiul rmas (2 + 3 = 5)
coloane a treia va avea 3/5 din spaiul rmas
103
Cadre imbricate
Dac dorim s afim patru pagini, n formatul
avem structura
<HTML>
<FRAMESET ROWS=20%, *>
<FRAME SRC=coloane.html>
<FRAMESET COLS=40%, 100, *>
<FRAME src =>
<FRAME src=>
<FRAME src=>
</FRAMESET>
</FRAMESET>
</HTML>
Dac dorim s afim tot patru pagini ntr-o fereastr, dar dup modelul de
mai jos:
104
|
|
<FRAME src="scriere_col.html">
<FRAMESET cols="30%, 2*, 3*" border="5" bordercolor="red"
frameborder="1">
<FRAME src="pagina_1.html">
<FRAME src="pagina_2.html">
<FRAME src="pagina_3.html">
</FRAMESET>
<FRAMESET cols="50%,*" border="6" bordercolor="#800080"
frameborder="1">
<FRAME src="flori.jpg">
<FRAME src="C:/Windows/WEB/WALLPAPER/FRIEND.jpg">
</FRAMESET>
</FRAMESET>
</HTML>
107
la adresele date de legturi, codul HTML care realizeaz acest obiectiv este dat
mai jos.
<HTML>
<HEAD>
<TITLE> CADRE DESTINATIE</TITLE>
</HEAD>
<FRAMESET cols="40%, 60%" bordercolor="blue" border="5">
<FRAME src="C:\CARTE_WEB\CAP_WEB_8/ex_8_2.html" >
<FRAME src="C:\CARTE_WEB\univsh.jpg" name="listeU" >
</FRAMESET>
</BODY>
</HTML>
Al doilea cadru are numele listeU i el conine iniial prima referin.
Dac se vor activa i celelalte legturi, acestea vor fi ncrcate, pe rnd, tot n
cadrul cu numele listaU. n exemplul 9.6 dac se ncarc codul de mai sus,
browser-ul va afia iniial aceeai fereastr, dar n ea se pot ncrca toate celelalte
pagini, de la adresele din cadrul stng.
width="300" height="200">
</IFRAME>
</P>
<A href="florit.jpg" target="poze"> trandafir </A><BR>
<A href="flori4.jpg" target="poze"> orhidee </A><BR>
<A href="flori5.jpg" target="poze"> diverse</A><BR>
</BODY>
</HTML>
111
10. FORMULARE
Doresc (I want)
Server
Poftim (Here is)
Calculator
Propriu
WEB
Dac dorim un fiier HTML care include grafic, fiecare imagine este
solicitat server-ului printr-un dialog i de aceea se ncarc nti sursa i apoi se
ncarc imaginile pe rnd.
Pentru codul HTML:
<HTML>
<HEAD>
</HEAD>
<BODY>
<A href= C:/TEST/tabele.html>tabele</A><BR>
<A href= C:/Windows/WEB/Wallpaper/peace.jpg>peace</A><BR>
<A href= D:/casa.jpg>casa_mea</A><BR>
<A href= http://www.unibuc.ro>Univ_Bucuresti</A>
</BODY>
</HTML>
112
113
http://www.altavista.com/cgi-bin/query
http://www.yahoo.com/search
o adres de e-mail valid, pentru transmiterea datelor formularului, prin
intermediul protocolului mailto: ca de exemplu action = mailto:
rodicaniculescu@gmail.com
Atributul METHOD
Atributul TARGET
Acest atribut se folosete n cazul n care se dorete ca formularul cu
rezultate s apar ntr-o fereastr nou a browser-ului. Despre valorile posibile ale
atributului am vorbit cnd au fost descrise cadrele i legturile. Valoarea implicit
este self, care are ca efect apariia rezultatelor n aceeai fereastr cu a browser-lui.
#
$
%
(
)
+
/
:
=
?
\
CR
LF
Spaiu
TAB
CARACTER
%21
%22
%23
%24
%25
%26
%27
%28
%29
%2B
%2F
%3A
%3D
%3F
%5C
%0A
%0D
%20
%09
ADRES
MAIL
Ionescu
Ana Maria
So. Colentina Nr.10 Bucuresti sect 2
ROMANIA
http://www.ionescui@gmail.com
SEND
Figura 10. 3. Codificarea datelor
117
120
Butonul de IMAGINE
Pentru transmiterea datelor se poate folosi butonul de imagine, n loc de
butonul de transmisie text. Pe butonul imagine apare imaginea n loc de text. Pentru
a crea un buton de imagine se folosete atributul type al elementului <INPUT> cu
valoarea image (type=image). Alte atribute ale elementului <INPUT>, care se
asociaz cu atributele type=image, sunt:
Src=URL prezint adresa URL a imaginii. Este un atribut
obligatoriu pentru acest tip
alt=text introduce un text, dac poza nu poate fi ncrcat
border=numr indic grosimea chenarului n pixeli. Dac
numrul=0, chenarul imaginii lipsete
align determin alinierea imaginii i poate avea valorile cunoscute:
left, right, center
name numele unui buton de imagine
Dac n exemplul din figura 10.5. se nlocuiete butonul de transmisie
predefinit (SUBMIT QUERY) cu un buton de imagine, atunci vom folosi tipul
image astfel:
<INPUT type=imagesrc=c:/windows/hlpglobe.gif name=img align =
center alt = comand border=0 >
Imaginea hlpglobe va fi inserat pe buton. Dac se execut clic pe butonul
imaginii vor fi transmise coordonatele punctului n care s-a executat clic mpreun
cu numele imaginii sub form de perechi: numeX=x&numeY=y
Tipul PASSWORD
Tipul de intrare de tipul parol este asemntor cu tipul text, cu aceleai
atribute, diferenele sunt:
atributul value este obligatoriu
datele introduse de utilizator sunt afiate prin caracterul * sau y
(depinde de browser) din motive de siguran
121
Se observ din exemplul de mai sus c datele sunt codificate dup valoarea
implicit a atributului enctype=application/x-www-form-urlencoded, adic
datele sunt trimise sub form de pereche nume=valoare.
n caseta ADDRESS va aprea:
user=guest&old=st&new1=r1234f&new2=r1234f
OBSERVAIE!
Pe lng butoanele de transmisie SUBMIT i IMAGE se mai poate crea un
buton generic, n care valoarea atributului type este button (type=button). Dar
pentru a aduga un comportament la un buton generic, se utilizeaz JavaScript sau
alt program de programare la client. Despre acest tip se va discuta n capitolele de
JavaScript. Utiliznd JavaScript se poate nlocui <INPUT> cu <BOTTON>
122
Tipul RESET
Acest tip de intrare permite utilizatorului s tearg coninutul tuturor
cmpurilor formularului. Tipul de RESET se introduce n formular ca valoare a
atributului type, astfel <INPUT type=reset> i are ca efect inserarea unui buton (ca
i tipul submit sau image).
124
Tipul RADIO
Acest tip de intrare afieaz un buton cu interblocare gen radio. Dac mai
multe astfel de butoane au aceeai valoare a atributului name, ele sunt grupate
automat astfel nct un singur buton din grup s poat fi selectat. Butonul radio
este asemnator cu butonul de validare i are aceleai atribute. Pentru a insera un
buton radio ntr-un formular se folosete elementul <INPUT> al crui atribut type
are valoarea radio (type=radio). La un moment dat numai un buton radio din cele
din grup (atributul name trebuie s aib aceeai valoare pentru toate butoanele din
grup) poate fi selectat. Denumirea de buton radio vine de la stilul de afiare al
acestor elemente de ctre browser (ca nite butoane radio)
Datele transmise de browser pentru respectivul grup sunt:
dac se selecteaz un buton radio din grup valoarea efectiv care se
transmite serverului este valoarea atributului value i se transmite printr-o
pereche nume=valoare, unde nume i valoare sunt valorile atributelor
name i value
dac se selecteaz un buton radio i atributul value lipsete, atunci se
transmite valoarea implicit ON, astfel nume=ON, unde nume este
valoarea atributului name
dac nu este selectat niciun buton radio dintr-un grup, atunci browser-ul
nu transmite date referitoare de grupul respectiv
De remarcat faptul c textul alturat unui buton este irelevant pentru
programul de scriptare de pe server.
Vom exemplifica grupul de butoane radio prin urmtorul exemplu:
125
<HTML>
<HEAD></HEAD>
</BODY>
<B> Clasificarea studenilor la Cursul WEB</B>
<FORM name="clas" action="rodicaniculescu@hotmail.com" method="POST">
<PRE>
<B>NUME:</B><INPUT type= "text" name="nume" size=30>
<P><B>COD STUDENT:</B> <INPUT type="password" name="cod" size="8">
<HR>
<B>EXAMEN:</B> <INPUT type="text" name="ex" maxlength=20>
<HR>
</PRE>
<B><5</B>
<INPUT type="radio" name="categorie" value="rest"><B>[5-6]</B>
<INPUT type="radio" name="categorie" value="slab"><B>[7-8]</B>
<INPUT type="radio" name="categorie" value="bun" checked><B>
[9- 10]</B>
<INPUT type="radio" name="categorie" value="fbun">
<PRE>
<INPUT type= "submit" name= "trimite" value="SEND">
<INPUT type= "reset" name= "terge" value="RESET">
</PRE>
</FORM>
</BODY>
</HTML>
Tipul FILE
Acest tip de intrare ofer posibilitatea utilizatorului s transmit un fiier
programului pe server. Pentru a insera un fiier ntr-un formular se folosete
atributul type al elementului <INPUT> cu valoarea file (type=file).
Formularul va afia un cmp text pentru introducerea numelui fiierului i
un buton BROWSE pentru a selecta un fiier din calculator, n cazul n care nu se
cunoate calea fiierului. Se pot transmite orice tip de fiiere.
Acest tip (file) este dificil de programat pe server, iar Internet Explorer nu
permite lucrul cu tipul file.
Se pot ncrca mai multe fiiere cu ajutorul unui formular i pentru a le
distinge se folosete atributul name cu diferite valori pentru fiecare element
INPUT. n cazul folosirii acestui tip, atributul elementului <FORM> trebuie s fie:
action=URL url fiind adresa unui program de scriptare de pe server
(http://itdgroup.com/scripts/upload/asp)
method= POST (fiind volum mare de date, acesta nu poate fi transmis
prin metoda GET odat cu adresa URL)
enctype=muliform/form-data
bloc cu marcajele <OPTION atribute>, cte unul pentru fiecare element din
list. ntr-un formular pot exista mai multe liste (mai multe blocuri
<SELECT>...</SELECT>).
Atributele elementului SELECT pot fi:
name are ca valoare numele listei care va fi trimis n pereche cu
valoarea atributului din list selectat, nume=value
size indic numrul articolelor din list care vor fi afiate o dat
multiple ofer posibilitatea de a alege mai multe elemente din list,
dac size are valoarea mai mare dect 1
Atributele elementului OPTION pot fi:
selected dac un element al listei este dorit ca prestabilit, l selecteaz
value valoarea acestui atribut este trimis mpreun cu valoarea
atributului name al elementului SELECT
Pentru exemplificarea listelor, la exemplul din figura 10.11 sau 10.12 se
poate aduga o list cu opiunile formei de nvmnt, adugnd urmtoarea
secven de program:
<HR>
<B>Forma de invatamant</B>
<SELECT name="Forma">
<OPTION selected value= "F1">ZI
<OPTION value= "F2">ID
<OPTION value= "F3">FR
<OPTION value= "F4">MASTER
</SELECT>
i la datele trimise se mai adaug i perechea &forma=zi.
Y
Pentru fiecare form din cele enumerate mai sus valorile parametrului
shape sunt:
Rect coords=X1,Y1,X2,Y2 definesc coordonatele colului din stnga
sus ( X1,Y1) i ale colului din dreapta jos (X2,Y2) ale unui dreptunghi
(X1,Y1)
(X2Y2 )
133
(X3,Y3)
.
.
(Xn,Yn)
(X1,Y1)
134
135
(mrete) ZOOM
(micoreaz).
138
<BODY>
<MAP NAME="facmat">
<!- #$-:Image Map file created by Map THIS! -->
<!- #$-:Map THIS! free image map editor by Todd C. Wilson -->
<!- #$-:Please do not edit lines starting with "#$" -->
<!- #$VERSION:1.30 -->
<!- #$DATE:Sat Jan 06 15:34:35 2007 -->
<!- #$PATH:C:\CARTE_WEB\CAP_WEB_11\ -->
<!- #$GIF:FACMAT.jpg -->
<AREA SHAPE=RECT COORDS="226,12,464,276"
HREF="http://www.fmi.unibuc.ro">
<AREA SHAPE=CIRCLE COORDS="536,173,74"
HREF="sala_calculatoare.html">
<AREA SHAPE=POLY
COORDS="170,18,16,167,167,309,221,265,215,33,170,18" HREF="istoric.doc">
</MAP></BODY>
La acest cod generat de MAP THIS se adaug tag-urile <HTML>,<HEAD>
</HEAD>, </HTML> i neaprat imaginea., astfel:
<IMG src=facmat.JPG usemap=#facmat
Executnd fiierul harta_facmat.html, browser-ul va afia:
140
141
Conceptul multimedia este unul din cele mai tentante i moderne concepte
utilizate n lumea informaticii. Prin tehnologii multimedia se nelege totalitatea
modalitilor de creare, utilizare, stocare, regsire i difuzare a aplicaiilor din
medii multiple, precum text, grafic, imagine, sunet i animaie. Multimedia
semnific prezena simultan a multor astfel de medii ntr-un document (ca de
exemplu, o pagin web). Termenul de hipermedia desemneaz documentele
multimedia care cuprind hiperlegturi, acestea fiind modul uzual de existen a
documentelor multimedia pe spaiul Web.
Fiierele multimedia pot fi fiiere de:
Aplicaii, care sunt executate de sistemul de operare i au, n general,
extensia .exe, (ca de exemplu, programe de prelucrare grafic, de calcule
etc.) Unele aplicaii sunt independente (WORD, EXCEL, MAP THIS
etc.), iar alte aplicaii sunt dependente (ca de exemplu, controale
ActiveX, programe PLUG-IN etc.)
Date, folosite pentru stocarea datelor. Extensia acestor tipuri de fiiere
indic tipul datelor stocate i a aplicaiei, folosit pentru citirea, editarea
i tiprirea lor. Sistemul de operare al calculatorului stabilete o legtur
ntre fiierele de date i aplicaia care prelucreaz datele din fiier.
Pentru a constata dac un fiier este de aplicaie sau de date, se execut
clic pe butonul drept al mouse-ului i din meniul rapid se selecteaz
comanda Properties. n caseta Type of file a ferestrei va aprea:
Extensie de fiier
text HTML
text obinuit
fiier CSS
imagini GIF
fiiere JPEG
PNG
fiiere TIFF
fiiere Microsoft Bitmap
fiiere audio de baz
fiiere video Microsoft
format audio Macintosh
format audio Microsoft
audio MPEG
audio MPEG-1
audio Real
MIDI
video MPEG
video MPEG-2
Macintosh Quick Time
video Microsoft
Microsoft Rich Text
Adobe Acrobat Reader PDF
fiiere Microsoft Word
fiiere Microsoft Excel
fiiere Microsoft Power
Point
fiiere Microsoft Power
Point
fiiere VRML
Tip/subtip MIME
html,htm
txt
Css
gif
jpg,jpeg,ipe
png
tiff,tif
bmp
au,snd
wav
aif,aiff,aifc
wav
mpa,mpega
mp2a,mpa2
ra,ram
mmid
mpeg,mpg,mpe
mpv2,mp2v
qt,mov
avi
rtf
pdf
doc
xls
ppz
text/html
text/plain
text/css
image/gif
image/jpeg
image/x-png
image/tiff
image/x-ms-bmp
audio/basic
audio/x-wav
audio/x-aiff
audio/x-wav
audio/x-mpeg
audio/x-mpeg-2
application/x-pn-realaudio
x-music/x-midi
video/mpeg
video/mpeg-2
video/quicktime
video/x-msvideo
application/rtf
application/pdf
application/msword
application/ms-excel
application/mspowerpoint
ppt
application/vnd.ms-powerpoint
wrl,vrml
x-world/x-vrml
Extensii de nume
de fiier acceptate
.asf,.asx,.wma,
.wax,.wmv,
.wvx
Apple
Quick
Time
.aiff,.au,.mpeg,
.wav,.aif,.mid,
.png,.tif,.tiff,
.bmp,.ptng,
.png,targa,.avi,
.flc,.mpe
Winamp
MP3
Player
Flash
Player
Adobe
Acrobat
.mp3,.mp2,.mp1,
.wma,.voc,.wav,
.cda,.it,.xm,.s3m
.stm,.mod,.dsm,
.far,.ult,.mtm,.669
.mid,.m3u,.pls,
.mjf
.spl,.swf
.pdf
12.2.2. ActiveX
Conceptul de obiecte sau componente ActiveX s-a dezvoltat pe baza
tehnologiei OLE (Object Linking and Embedding) a corporaiei Microsoft care
permite s inserm obiecte COM i alte aplicaii. Controalele ActiveX se pot insera
n aplicaii pentru a putea fi refolosite cu toate funcionalitile lor. Controalele
ActiveX funcioneaz ca o interfa, astfel codul inclus n pagina Web
interacioneaz cu controlul ActiveX, iar acesta interacioneaz direct cu programul
de navigare.
Prin aceast tehnologie aproape orice cod poate fi executat de la nivelul
programului de navigare, de la procesare de texte, la filme, animaie/video etc.
144
..
<PARAM>
</ OBJECT>
Dup cum se observ ntre tag-urile <OBJECT> i </ OBJECT> se pot
introduce mai multe elemente <PARAM >.
Atributele elementului OBJECT sunt:
145
DESCRIERE
button
tabel
textfield
graphic
calendar
avi
excel
Iexplorer
ClipArt Gallery
Java
CLASSID
D7053240-CE69-11CD-A777-00DD01143C57
978C9E23-D480-11CE-Bf2D-00AA003f40D0
8BD21D10-EC42-11CE-9E0D-00AA006002f3
369303C2-D7AC-11d0-89D5-00A0C90833E6
8E27C92B-1264-101C-8A2F-040224009C02
05589FA1-C356-11CE-BF01-00AA0055595A
0002E510-0000-0000-C000-000000000046
0002DF01-0000-0000-0000-000000000046
00030026-0000-0000-C000-000000000046
3EFB1800-C2A1-11CF-960C-0080C7C2BA87
146
anumite metode care sunt descrise n funcie de tipul su). Forma tag-ului
<PARAM> este: <PARAM name = nume value =valoare>.
Am artat c se pot insera fiiere, imagini, aplicaii, pagini i ActiveX cu
ajutorul etichetei <OBJECT>, care poate avea anumii parametri n funcie de
obiectul inserat.
Inserarea diferitelor fiiere
Pentru inserarea diferitelor fiiere, elementul OBJECT poate avea
atributele din exemplul de mai jos:
<HTML>
<HEAD>
</HEAD>
<BODY>
<OBJECT id="Adobe Acrobat Control for ActiveX" width="320" height="240"
classid="clsid:CA8A9780-280D-11CF-A24D-444553540000"
data="sample.pdf"">
<PARAM name="src" value="sample.pdf">
</OBJECT >
</BODY>
</HTML>
Inserarea imaginilor
n ultimul timp, exist tendina de a insera n pagini imagini cu ajutorul
etichetei <OBJECT> n loc de eticheta <IMG>, astfel:
<HTML>
<HEAD>
</HEAD>
<BODY>
<CENTER> Inserarea imaginilor</CENTER>
<TABLE cellspacing="2">
<TR>
<TD><OBJECT data="flori5.jpg" width=200 height=200></OBJECT>
<TD> <OBJECT data="Water lilies.jpg" width=200 height=250></OBJECT>
148
</TR>
</TABLE>
</BODY>
</HTML>
Inserarea miniaplicaiilor
Miniaplicaiile pot fi inserate n pagini HTML, folosind elementul
<applet> i <OBJECT>.
n acest capitol se va folosi elementul <OBJECT> pentru a insera unele
aplicaii ntr-o pagin. Browser-ul Netscape nu accept inserarea miniaplicaiilor
cu ajutorul elementului OBJECT, iar Internet Explorer avem, de exemplu:
<OBJECT codetype="application/msword>
<PARAM name="text" value="Bine ati venit in Word">
</OBJECT>
Inserarea Controalelor ActiveX
Presupunem c dorim s redm un fiier .avi sau un fiier .mpeg. Pentru
aceasta este nevoie de inserarea programului Windows Media Player. Cu acest
program putem reda fiiere: .avi, .mpeg,,mpg, .wmv, .wma, aa cum reiese din
exemplul de mai jos.
<HTML>
<HEAD>
</HEAD>
<BODY>
<OBJECT id="WMPlayer" width="320" height="240" classid="clsid:05589FA1C356-11CE-BF01-00AA0055595A">
<PARAM name="src" value="sample.avi">
</OBJECT> <BR>
<OBJECT id="buton" width=100 height=50 classid="clsid:D7053240-CE6911CD-A777-00DD01143C57">
<PARAM name="caption" value="buton">
149
</OBJECT> <BR>
<OBJECT id="WMPlayer" width =320 height=240
classid=clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6>
<PARAM name="url" value="d:\poze\aniversare_2006\MVI_8297.AVI">
</OBJECT >
</BODY>
</HTML>
<HTML>
<HEAD>
</HEAD>
<BODY>
<MARQUEE>
Acesta este casa de vacanta!
<IMG src=casa.jpg width=150 height=150>
</MARQUEE>
</BODY>
</HTML>
152
153
154
PARTEA A II-A
CSS
155
156
http://www.w3.org/TR/REC-CSS2/
Legturile dintre HTML i CSS se realizeaz cu ajutorul elementului
STYLE.
Stilurile pot fi definite ca:
stiluri in-line care se definesc ca atribute STYLE. Aproape toate
elementele HTML(cu excepia elementelor BASE, HEAD, BASE
FONT, HTML, META, PARAM, SCRIPT, STYLE, TITLE) permit
acest atribut. Valorile atributului STYLE constau dintr-o list de
specificaii, sub forma nume-proprietate:valoare, pus ntre ghilimele i
separate prin punct i virgul
foi de stil n interiorul unui document, plasate n partea de antet a
documentului, n interiorul blocului <STYLE>...</STYLE>
foi de stil, definite ntr-un fiier extern, care se poate lega la orice
pagin WEB
157
161
OL{color:RGB(0,0,255);}
</STYLE></HEAD>
<BODY>
<H2 style="font-size:20pt; color:green;">
Style in-line, 20pt, culoare verde</H2>
<A href="flori.jpg" style="text-decoration:none;color:yellow;">
Legturi (Stil in-line:nesubliniat, culoare text galben; stil pagina:
cursiv,bold;
stil extern: fundal:BlueViolet)</A>
<OL>Definirea stilurilor(stil intern: blue, extern: italic, fundal cyan)
<LI style="color :red"><B>Stil in-line</B> <BR>
(stil intern:culoare rosie o anuleaza pe a stilului de pagina bleu
stilului extern: a lui OL - italic fundal cyan)
<LI style="background:red"><B>In antetul pagini </B> <BR>
(stil intern: fundal rosu;stil pagina:bleu; extern:italic fundal cyan)
<LI><B>In fisiere externe </B> <BR>
(stil pagina:bleu; extern:italic fundal cyan)
</OL>
<BODY>
</HTML>
Fiier extern: cascada.css
OL{font-style:italic;background:cyan;}
A{background:green;}
164
13.6.1 Selectorul ID
n seciunea 13.2 s-a menionat faptul c aproape orice marcaj HTML
poate avea atributul ID, care are ca valoare un identificator unic pentru ntreaga
pagin. Sintaxa atributului este ID=nume_id. Se pot crea stiluri pentru un
identificator, declarnd un selector ID care are sintaxa nume_id precedat de
simbolul # (ca la o definire de ancor a se vedea capitolul 7), astfel
#nume_id{bloc de specificaii stil}.
n exemplul urmtor este exemplificat utilizarea selectorului ID.
<HTML>
<HEAD>
<STYLE>
#PAR{background:red;font-style:italic}
</STYLE>
</HEAD>
<P id=par>Un text cu stil cursiv fundal rosu
<P>Un text obisnuit
</Body>
</HTML>
165
OBSERVAIE!
Acelai efect se poate obine dac se folosete atributul ID=nume_id, n loc
de atributul class=nume_clas, iar n definirea selectorului se nlocuiete .numeclas cu #nume_id. Atributul ID a fost introdus pentru a face legtura ntre CSS i
JAVA SCRIPT, dup cum vom vedea n capitolele 20.
ntr-o pagin Web pot exista ambele atribute id i class i chiar cu acelai
nume, ca n exemplul urmtor:
<HTML>
<HEAD>
<STYLE>
.STIL{background:red; color:blue;}
#STIL{background:yellow;color:purple;}
</STYLE></HEAD>
<BODY>
<P class="stil"> Paragraf cu stil clas
<P> Paragraf fara stil
<P id="stil"> Paragraf cu stil ID
<P>Paragraf cu un cuvnt
<B id="stil" ID</B>cu stil
</BODY></HTML>
167
13.6.3 Pseudo-clase
Pseudo-clasele ajut la specificarea unor proprieti speciale ale unor
elemente. Ele sunt predefinite i nu este permis redenumirea lor. Sintaxa prin care
se pot adresa este: element:pseudoclas{bloc de declaraii}
unde element poate fi:
un element HTML de exemplu, P
un identificator id i atunci scriem elementul ca un selector id, #nume
o clas i atunci scriem elementul ca un selector de clas, .nume-clas
Menionm faptul c blocul de declaraii este alctuit din declaraii de stil
cu forma: nume-proprietate:valoare, separate prin ; .
<TR><TD>A11<TD>A12
<TR><TD>A21<TD>A22
</TABLE>
</BODY> </HTML>
Pseudo-clase Legturi
n capitolul 7 am arta faptul c bold, subliniat n HTML, exist trei stri
pentru o legtur (activ, vizitat, nevizitat), iar pentru a le schimba culorile
predefinite (rosu, purple, bleu) se folosesc atributele elementului BODY: active,
vlink, respectiv link, care au valori nume sau cod de culoare.
n CSS o legtur poate fi n cinci stri ce corespund la cinci pseudo-clase:
active pentru o legtur activ, care are culoarea implicit
visited pentru o legtur ce a fost vizitat i care are culoarea
implicit purple
link pentru legturile care nu au fost vizitate i care au culoarea
implicit blue
hover o legtur deasupra creia se afl plasat cursorul mouse-ului
focus pentru o legtur selectat, care se poate activa cu ENTER
Prin CSS se pot modifica culorile legturilor i formatarea textului, aa
cum rezult din exemplul de mai jos.
<HTML> <HEAD>
<TITLE>STIL LEGATURI</TITLE>
<STYLE>
A:link{color:green;font-style:italic;}
A:visited{color:magenta;font-wight:bold;text-decoration:none}
A:hover{color:cyan;background:black;}
A:active{color:red;text-decoration:none;}
A:focus{background:yellow;color:green;}
</STYLE></HEAD>
<BODY>
<A href="Fig 13.1.html" >Exemplu stil in-line</A><BR>
<A href="Fig 13.2.html" >Exemplu stil-pagina</A><BR>
169
13.6.4 Pseudo-element
Pseudo-elementele sunt un fel de pseudo-clase, care permit s se schimbe
stilul pentru subpri ale unui element (de exemplu, prima liter dintr-un paragraf).
Se seteaz stilul ca la pseudo-clase: element:pseudo-element{bloc de declaraii}.
Vom exemplifica pentru pseudo-elementele:
first-letter - care permite s se formateze prima liter dintr-un bloc de text
first-line - care permite s se aplice un stil pentru prima linie dintr-un
bloc de text
Dup cum tim, exist urmtoarele blocuri de text:
paragraf <P>......</P>
paragraf preformatat <PRE>......</PRE>
de diviziune <DIV>.......</DIV>
de centrare text < CENTER>..</CENTER>
n exemplul urmtor se stabilete un stil pentru pseudo-elementele i
blocurile menionate mai sus.
<HTML> <HEAD> <STYLE>
P.PAR:first-letter{font-style:italic;font-size:30pt;}
CENTER:first-letter{color:#C0C0C0;font-size:30pt;}
DIV:first-line{text-transform:uppercase;color:"darkcyan";}
P.PAR:first-line{text-decoration:underline;textheight:24pt;color=red;}
170
DIV:first-line{color:magenta;text-transform:uppercase;}
</STYLE>
<BODY>
<DIV align=center>Acesta este un bloc cu prima linie scrisa cu stilul pseudoelement first-line<BR>
Elementul <SPAM class=.STIL> SPAM </SPAM> este un element in-line
</DIV> </BODY> </HTML>
172
174
<OL type=I>
<LI><Font face=Arial size=+1 color=blue>Tehnici de programare </Font>
<UL>
<LI> Backtracking
<LI> Divide et impera
<LI> Greedy
<LI> Programare dinamic
</UL>
<LI> <Font face=Arial size=+1 color=blue> Arbori</Font>
<UL>
<LI> Arbori Binari</li>
<LI> Arbori Oarecare</li>
<LI> Arbori de sortare</li>
</UL>
</OL>
<TABLE border=3>
<TR><TD>Dac ai ntrebari
<TR><TD> <A href=mailto:rodicaniculescu@gmail.com> Scrie-mi la adresa
rniculescu@gmail.com</A>
</TABLE>
<P> Studentii care doresc <SPAN>Consultatii,</SPAN> pot s-mi scrie </P>
</BODY></HTML>
176
177
OBSERVAIE!
Pentru redarea unui text aa cum este scris se poate folosi marcajul
<PRE>...</PRE>, dar, n acest caz, textul este monospaiat, aa cum s-a precizat n
capitolul 3 elemente de formatare.
Un exemplu de utilizare a acestor proprieti este dat n continuare.
<HTML> <HEAD>
<STYLE>
P {white-space:all; letter-spacing:1mm; word-spacing:2 mm; texttransform:capitalize;}
DIV{text-indent:0.5 in; text-decoration:underline; white-space:nowrap;
color:blue}
SPAN {text-transform:uppercase;text-decoration:underline;color:red}
</STYLE> </HEAD>
<BODY>
<P>Agenda telefonica<br>
Ionescu Alin 0723553279<br>
Ionescu Dan 0742897618<br>
Diaconescu Ion 0745294738<br>
Popescu Ana 073431489 </P>
<DIV>Acesta este un text indentat la 0.5 in, subliniat i scris pe un rand. Dac
doriti s-l vizualizai folositi. <SPAN>Bara de scroll</SPAN></DIV>
</BODY> </HTML>
Valori
v1
v1 v2
v1 v2 v3
v1 v2 v3 v4
Atribuiri
Top=right=bottom=left=v1
Right=left=v1, top=bottom=v2
Top=v1 left=right=v2 bottom=v3
Top=v1 right=v2 bottom=v3 left=v4
</STYLE>
</HEAD>
<BODY>
<P>O caseta are o zona in jurul textului numita padding </P></STYLE>
</HEAD>
<BODY>
<P>o caset are o zona n jurul textului numita padding</P>
<OL>Proprietile padding-ului
<LI>padding-left
<LI>padding-right
<LI>padding-top
<LI>padding-bottom
</OL>
<DIV> <SPAN style="font-weight:bold; background:yellow">
Padding-ul </SPAN> unei casete asociate unui element HTML are numai o
caracteristic size </DIV>
</BODY>
</HTML>
181
<PRE>
<PRE>
<BUTTON class="bt">Bordura superioara</BUTTON>
<BUTTON class="br">Bordura dreapta</BUTTON> <BR>
<BUTTON class="bb">Bordura inferioara</BUTTON>
<BUTTON class="bl">Bordura stanga </BUTTON>
</PRE>
<TABLE class="bord">
<TR><TD>a11<TD>a12
<TR><TD>a21<TD>a22
</TABLE>
</BODY>
</HTML>
OBSERVAII!
Fiecare caracteristic a unei proprieti border accept o singur valoare
(de exemplu, border-top-color:red). Fiecare proprietate a bordurii poate accepta o
list de valori, separate prin spaiu i are ordinea: width style color, aa cum reiese
i din exemplul de mai jos.
183
<HTML>
<HEAD>
<STYLE>
H2 {border:5pt inset coral; margin:2mm;}
DIV{border:0.07in dotted green; color:magenta;}
</STYLE>
</HEAD>
<BODY>
<H2>Proprieti de <SPAN style="text-decoration:underline;font-weight:bold;">
Borduri </SPAN> </H2>
<DIV>Bordura are trei caracteristici: grosime, stil i culoare</DIV>
</BODY>
</HTML>
n CSS exist mai multe proprieti pentru culoare, descrise mai jos.
Proprietatea color specific culoarea textului pentru un element.
Valorile posibile sunt valorile atributului color din HTML:
un nume de culoare de exemplu, blue
cod RGB n hexazecimal #0000FF
cod RGB n zecimal cte un numr pentru cele 3 culori rou, verde i
albastru, de exemplu, RGB(0,0,255) pentru blue
transparent este culoarea prestabilit
Proprietatea background-color permite s stabilim o culoare pentru
fundalul casetei unui element.
Valori posibile sunt aceleai ca la proprietatea color.
Proprietatea background-image permite s stabilim o imagine de
fundal unei casete. Dac imaginea este mai mic dect suprafaa care trebuie
afiat, atunci ea este multiplicat astfel nct s cuprind ntreaga suprafa a
casetei elementului.
Valori posible sunt adrese URL a unor fiiere .gif, .jpg, .png, scrise n
paranteze rotunde i prefixate de cuvntul cheie URL, astfel:
background-image:URL(poza.jpg).
Este indicat s se foloseasc proprietatea background-color cu
background-image pentru cazul n care imaginea nu se poate ncrca (atunci va fi
afiat culoarea de fundal).
Un exemplu ilustrativ este redat mai jos.
<HTML>
<HEAD>
<STYLE>
P{font-style:italic; text-transform:uppercase; color:yellow;}
BODY {background-color:red; background-image: URL(bliss.bmp);}
</STYLE>
<BODY>
<P>Acesta este un exemplu de utilizare a proprietilor de culoare</P>
</BODY>
</HTML>
187
188
192
195
196
HTML
HEAD
BODY
FRUNZ
FRUNZ
TD
TABEL
IMG
TR
TR
TD
DIV
TD
SPAN
LI
TD
LI
TD
TABEL
OL
LI
TD
TR
TD
TR
TD
OBSERVAIE!
Arborele este format din:
elementul BODY cu 4 elemente (copii): B, I, P, DIV, care au culoarea
de fundal LightGreen. Spaiul ocupat de cele 4 elemente este format din
4 dreptunghiuri
la nivelul 2 fa de elementul BODY sunt:
IMG, TABEL,SPAN, OL i TABEL, care au culoarea de fundal yellow
la nivelul 3 fa de elementul BODY sunt: TR, B, LI care au culoarea de
fundal cyan;
la nivelul 4 fa de elementul BODY se afl elementul TD, pentru care
nu s-a mai specificat stil; acesta va adopta stilul printelui (a lui TR).
197
Dac se dorete ca toate elementele din exemplul 15.1 s fie afiate inline,
se va scrie urmtoarea foaia de stil:
*{display:inline}
iar browser-ul le va afia aa cum se observ n figura 15.3.
198
199
200
201
<TR><TD>a21<TD>a22
</TABLE> </BODY> </HTML>
<HTML><HEAD><STYLE>
IMG{position:absolute; left:30pt; top:20pt}
.parinte{position:absolute; left:50pt; top:80pt}
</STYLE></HEAD>
<BODY>
<P>Pozitionarea absoluta a unui element IMG fata de parintele
TD, pozitionat absolut</P>
<TABLE borde=2 style=cellspacing=5 height=50 >
<TR><TD>a11
<TD class="parinte"> <IMG src="imag1.gif"> a12
<TR><TD>a21<TD>a22
</TABLE> </BODY> </HTML>
203
<HTML><HEAD><STYLE>
IMG{position:absolute; left:50pt; top:30pt}
.parinte{position:absolute; left:50pt; top:50pt}
</STYLE></HEAD>
<BODY>
<P>Pozitionarea absoluta a unui tabel si a unei imagini </P>
<TABLE class="parinte" borde=2 style=cellspacing=5 height=50 >
<TR><TD>a11<TD> a12
<TR><TD>a21<TD>a22 <IMG src="imag1.gif">
</TABLE>
</BODY> </HTML>
</STYLE></HEAD>
<BODY>
<P>Pozitionarea relativa</P>
<TABLE border=2 style=cellspacing=5 height=50 >
<TR><TD>a11<TD> a12
<TR><TD>a21<TD> <IMG src="imag1.gif">
</TABLE>
</BODY> </HTML>
Poziionarea fix
Pentru a poziiona fix un element se folosete proprietatea position:fixed i
se atribuie valori marginilor: top, right, bottom, left
<HTML>
<HEAD>
<STYLE></STYLE></HEAD>
<BODY>
<P>Pozitionarea fixa a unei imagini </P>
<OL>Tipuri de pozitionari
<LI>pozitionarea static
<LI>pozitionarea absoluta
<LI>pozitionarea relativa
<LI>pozitionarea fixa
</OL>
<IMG src="im1.gif" style="position : fixed; top:150px; left : 150px;">
<OL>Proprietatile marginilor
<LI>left
<LI>right
<LI>top
<LI>bottom
</OL>
205
<Ul>valori posibile
<LI> o lungime
<LI>un procent
</BODY> </HTML>
206
207
PARTEA A III-A
JAVASCRIPT
207
208
NOT!
JavaScript nu este acelai lucru cu Java. Java este limbaj de programare
complex (ca i C++), realizat de firma Sun, creat cu scopul de a realiza att
aplicaii client, ct i aplicaii server.
O aplicaie client este un program cu ajutorul cruia se poate interaciona
cu calculatorul, de exemplu un browser.
O aplicaie server este un program cu care interacioneaz o aplicaie
client, de exemplu un calculator la distan sau un server WEB. De exemplu, cu
ajutorul browser-ului (aplicaie client) se pot cere pagini WEB de la un server
WEB (aplicaie server), care dialogheaz cu browser-ul utilizat.
Se pot ntlni miniaplicaii Java (program Java) aflate pe un server WEB
i care se execut prin utilizarea unor tag-uri n paginile HTML, ca de exemplu,
<applet> sau <object>. La ntlnirea acestor etichete, browser-ul deschide
programul Java de pe serverul WEB i l execut n fereastra sa.
Programele JavaScript, numite i scripturi, sunt secvene de program ce se
scriu n blocul <SCRIPT> i </SCRIPT> din antetul unei pagini sau din corpul
programului.
JavaScript Interpretor
Prin limbaj interpretor se nelege faptul c browser-ul preia cte o
instruciune, o execut i trece la urmtoarea, o preia i o execut s.a.m.d. Din acest
motiv, erorile la limbajele interpretate sunt mai greu de depistat, deoarece nu exist
compilatoare ca la limbajele de programare complexe (Java, C, C++ etc.) Totui,
putem s sesizm o eroare din faptul c dup ea instruciunile nu mai pot fi
executate.
JavaScript Limbaj orientat pe obiect
Se tie de la cursul Programare orientat pe obiecte ce nseamn un limbaj
orientat pe obiect.
Amintim c un limbaj de programare orientat pe obiect este un limbaj cu
ajutorul cruia se realizeaz programul utiliznd obiecte. Un obiect este o instan
a unei clase. De exemplu, dac considerm clasa VEHICUL, trenul, avionul,
maina etc. sunt instane ale acestei clase. Nu ne propunem n aceast carte s
dezvoltm paradigma orientrii pe obiect. Programele de scriptare sunt programe
orientate obiect, care folosesc obiecte precum: formulare, cmpuri, butoane,
fereastr, etc.
Un obiect este o reprezentare a unei entiti din lumea real sau
conceptual. Tot ce putem vedea, atinge, clasifica reprezint obiecte ale lumii reale
i tot ce putem gndi reprezint obiecte ale lumii imaginare. Un obiect are 3
caracteristice: stare, comportament i identitate.
Starea unui obiect reprezint totalitatea datelor care conin informaii
referitoare la acesta, una din condiiile posibile n care poate exista un obiect.
Fiecare obiect are un numr de proprieti, numite i atribute, care au o valoare.
Valorile unei proprieti (atribut) pot face parte dintr-un tip de baz (ntreg, real
210
etc.) sau pot fi alte obiecte. Cu alte cuvinte, starea unui obiect conine structura
esenial a obiectului: atributele i valorile sale. Starea unui obiect se modific n
timp, de exemplu, obiectul curs opional se poate afla n strile Predat sau Anulat
(n funcie de numrul de studeni care a optat pentru acel curs ).
Obiectele nu sunt izolate, ele comunic ntre ele, trimit mesaje.
Comportamentul unui obiect se refer la modul n care un obiect
reacioneaz (schimb starea) la mesajele primite, precum i la modul cum
acioneaz (trimite mesaje altor obiecte). n exemplul anterior, obiectul curs
Optional poate avea comportamentul: nscriere student, reorientare student la alt
curs optional.
Identitatea unui obiect este proprietatea prin care obiectul se distinge de
oricare alt obiect din sistem. Schimbarea strii unui obiect nu influeneaz
identitatea sa. Identitatea face un obiect s fie unic.
O pagin WEB poate conine mai multe obiecte, de exemplu pot exista 2
formulare, form1 i form2, care aparin clasei FORMULARE. Ele difer prin
cmpurile lor. JavaScript le poate identifica astfel pe fiecare.
Uneori JavaScript trebuie s aib acces rapid la mai multe obiecte. n acest
caz, pentru a identifica fiecare obiect se poate folosi un tablou. La un obiect ne
putem gndi ca la un substantiv.
Metode
Relaiile dintre obiecte se numesc legturi. Un mesaj este o comunicare
ntre obiecte via legturi. La primirea unui mesaj, un obiect sau o clas execut o
operaie.
O metod reprezint implementarea unei operaii. Aadar, o metod este o
unitate de cod scris ntr-un limbaj orientat pe obiect. La o metod ne putem gndi
ca la un verb, pentru c are la baz o aciune, o operaie. Dac ntr-un limbaj
orientat pe obiect se definete o funcie i se scrie codul care determin ce trebuie
s execute funcia, atunci declaraia funciei este o operaie, iar corpul funciei este
o metod.
Dac considerm obiectul Submit al unui formular, atributurile nume i
dimensiune sunt proprieti (atribute ale obiectului). Dac se execut clic pe buton,
formularul este trimis ctre server, deci se execut o operaie a crei implementare
se numete metod. Proprietile i legturile alctuiesc caracteristicile structurale,
deoarece ele indic structura obiectelor, iar operaiile i metodele sunt caracteristici
dinamice, deoarece ele comunic comportamentul obiectelor. n JavaScript se
folosete pentru definirea proprietilor i metodelor unui obiect urmtoarea
sintax: nume_obiect.proprietate ; nume_obiect.metod.
Un eveniment este o aciune ce se produce asupra unui element. Cele mai
frecvente evenimente sunt mesajele recepionate de un obiect. Aciunile sunt
intreprinse de obicei de persoanele care folosesc aplicaia, de exemplu dac se
execut clic pe un buton al unui formular (Submit, Cancel), se trece n starea de
execuie.
211
Dup salvarea acestui program i execuia lui apare rezultatul din figura
16.1. Dac n codul de mai sus linia de declaraie din interiorul blocului SCRIPT se
include ntr-un comentariu HTML astfel
<!-document.write('Bine ai venit n lumea scriptului')
-->
aceasta nu va fi afiat de browser-ele incompatibile cu JavaScript care o
vor considera ca un comentariu, dar browser-ele compatibile cu JavaScript vor
afia rezultatul din figura 16.1.
214
OBSERVAII!
n programul din figura 16.1, scriptul este unul de coninut (apare n
corpul programului)
n programul din figura 16.2, scriptul este unul de antet (apare n blocul
de antet al paginii)
caseta de dialog de avertizare rmne pe ecran pn se acioneaz
butonul OK, caz n care browser-ul va afia textul n fereastra sa (ca n
figura 16.1)
spunem c funcia alert comand afiarea modal a cutiei de dialog de
avertizare, adic scriptul nu execut alt instruciune pn la nchiderea
cutiei
programul JavaScript face distincie ntre literele mari i literele mici, de
exemplu o variabil student este diferit de o variabil Student
dac scriptul conine mai multe instruciuni ntr-o linie, acestea vor fi
separate prin punct i virgula ( ; ). De obicei se evit aceast situaie.
215
16.3.2. Variabile
Variabilele sunt folosite n JavaScript pentru a stoca valori n scripturile
noastre. Variabilele sunt simboluri care nlocuiesc datele ce se pot modifica n
timpul execuiei. n cazul n care nu se cunoate o valoare (de exemplu, un pre al
unui produs dorit de achiziionat), n momentul rulrii unui program JavaScript se
poate folosi variabila Pre. Ne putem imagina o variabil ca pe o cutie, care are
pe ea scris un nume (Pre) i care va conine o valoare (valoarea preului).
Declararea variabilelor
Dei nu este impus, este considerat o bun practic s se declare
variabilele nainte de a fi folosite. Pentru a comunica browser-ului c dorim s
crem o variabil, se folosete declaraia n dou pri:
Cuvntul cheie var
Numele variabilei care este format dintr-un set de caractere
alfanumerice, dar primul caracter trebuie s fie o liter.
217
var vrst=20
alert(vrst= + vrst + ani)
atunci variabila ntreag este convertita n ntreg i se va afia
vrst = 20 ani
Pentru a transforma irurile n numere pentru a le putea aplica operatorii
aritmetici folosesc dou funcii: parseInt() i parseFloat().
Aceste funcii transform un ir n numr ntreg, respectiv n numr real.
Conversia unui ir n numr se face pn cnd se ntlnete un caracter care nu este
cifr.
-
219
De exemplu:
parseInt(100)
parseInt(-120)
parseInt(300ab)
parseInt(abc)
parseInt(20.75)
parseFloat(37.4)
parseFloat(47.89ab)
- ntoarce 100
- ntoarce -120
- ntoarce 300
- ntoarce NaN, mesaj de eroare
- ntoarce 20
- ntoarce 37.4
- ntoarce 47.89
220
Operatori
n JavaScript exist mai multe tipuri de operatori: aritmetici, logici, de
atribuire, relaionali, condiionali, logici pe bii. n continuare vor fi descrise
aceste tipuri de operatori.
n JavaScript, ca i n alte limbaje de programare, operatorii sunt evaluai
ntr-o anumit ordine, ordine cunoscut sub numele de preceden. Un operator cu
preceden mai mare este evaluat naintea unuia cu preceden mai mic.
n tabelul de mai jos este dat ordinea descresctoare a precedenei lor.
Operator
., (),[],
++, - -, +, , !, ~
*, /, %
<<, >>
<, <=, >,
>=
==,!=, = =
=, != = =
&
^
|
&&
||
?:
=, op=,
(+=, -=, %=, |=,
*=, <<=, >>=, &=,
^=)
,
Descriere
Operatori de adresare: accesare cmp, indexare
tablou, apel functie
Operatori unari (un singur operand), ntoarcerea
unei date, crearea unui obiect
nmulirea, mprirea, restul mpririi
Operatori de deplasare bii
Operatori relaionali
Egalitate, inegalitate, identitate, nonidentitate
AND (i) pe bii
XOR (sau exclusiv) pe bii
OR (sau) pe bii
AND logic
OR logic
Condiional
Atribuirea, atribuire cu operaie
Operatori aritmetici
Operatorii aritmetici sunt : + (operator binar), - (operator binar), * , /, %,
++, --, + (operator unar de semn), - (operator unar de semn), + (operator de
concatenare).
NOT!
Operatorii unari au un singur operand
Operatorii binari au doi operanzi
n continuare vor fi definii i exemplificai operatorii aritmetici enumerai
mai sus:
221
222
y = x++*5
alert("Valoarea lui x++ este: " + x + " i valoarea lui y = x++*5 este: " + y)
</SCRIPT>
</BODY></HTML>
browser-ul va afia:
Operatori logici
Operatorii logici se folosesc pentru a uni dou expresii logice ntr-o
expresie logic. n general, expresiile logice sunt folosite pentru a lua decizii.
Exista trei operatori logici:
Operatorul unar ! - este operatorul de negare logic i are urmtorul
efect: dac operandul este false, rezultatul este true, altfel rezultatul este
false.
Operatorul binar || - este operatorul OR (sau) logic. Dac cel puin unul
din operanzi este true, atunci valoarea expresiei combinate este true.
Dac ambii operanzi logici sunt fali atunci expresia combinat este
false.
Operatorul binar && este operatorul AND (i) logic. Dac ambii
operanzi sunt true, rezultatul este true, altfel rezultatul este false.
Exemple de utilizare a operatorilor logici:
Operatori de atribuire
Atribuirea este un operator, pe care l-am introdus n seciunea precedent.
Exist mai multi operatori de atribuire:
Operatorul = se folosete ntr-o expresie variabil = expresie i are
ca efect evaluarea expresiei i atribuirea valorii ei variabilei.
n JavaScript se pot efectua i atribuiri multiple, cu urmtoarea sintax:
v1 = v2 = v3 =...= vn = expresie
Principiul de execuie este urmtorul: se evalueaz expresia din partea
dreapt i valoarea se atribuie variabilei vn, apoi coninutul variabilei vn este
atribuit variabilei vn-1 s.a.m.d.
224
x*=y
alert("x este: " +x)
</SCRIPT>
</BODY></HTML>
Browser-ul va afia:
225
226
227
O2
0
0
1
1
O1&O2
0
0
0
1
O1^O2
0
1
1
0
O1| O2
0
1
1
1
va fi 8 (00001000)
va fi -3 (11111101)
va fi 1 (00000001)
va fi 20 (00010100)
va fi 0 (00000000)
va fi 7 (00000111)
va fi 7 (00000111)
16.5. Metoda document.write()
document.write("Primul script");document.write("<br>")
document.write("<B> Bine ati venit</B>"); document.write("<BR>")
document.write("<IMG
src=c:/windows/web/wallpaper/tulips.jpg
width=100 height=100>"); document.write("<br>")
document.write("<A href='http://www.edu.ro/index.php/articles/3880'>Lista
Universitati Particulare Acreditate </A>")
</SCRIPT>
</HEAD>
<BODY> </BODY> </HTML>
229
17.1. Instruciuni
n JavaScript, ca i n majoritatea limbajelor de programare complexe,
exist trei mari categori de instruciuni:
de atribuire
de decizie
repetitive
Despre instruciunile de atribuire s-a vorbit i n capitolul precedent.
Instruciunea if else
Instruciunea if else are sintaxa:
IF( expresie condiional)
{instruciuni 1}
else
{instruciuni 2}
231
233
Instruciunea IF imbricat
n cazul n care o expresie este adevrat se execut o instruciune IF care
are o expresie care se evalueaz i, dac este adevrat, se execut alt instruciune
IF s.a.m.d., spunem c avem instruciuni IF imbricate.
Sintaxa instruciunii este:
IF (expresie 1)
{expresie 2}
..
{ if expresie n }
else
{expresie n1}
.........
else
{expresie 2.1}
else
{expresie 1.1}
234
235
Instruciunea switch...case
n cazul n care browser-ul trebuie s ia o serie de decizii pe baza unei
singure valori de schimb atunci instruciunea if este ineficient, folosindu-se
instruciunea switch case.
Sintaxa instruciunii switch...case:
switch (expresie)
{
case exp1: instruciuni 1 [; break]
case exp2: instruciuni 2 [; break]
.
.
case exp3: instruciuni n [; break]
[default: instruciuni n +1]
} // end switch
unde:
[ ] - au caracter opional
expresie - este o expresie ntreag
expresie i sunt expresii ntregi
instruciuni i sunt instruciuni care se execut n cazul n care
expresie==expresie i
n funcie de valoarea ntreag rezultat din evaluarea expresiei, se execut
grupul de instruciuni care are valoarea expi egal cu valoarea expresiei. n cazul
n care valoarea expresiei este diferit de toate valorile expi, atunci browser-ul
236
execut instruciunile ce urmeaz dup cuvntul cheie default, dac acesta exist,
altfel, iese din instruciunea switch case.
Dac break este ultima instruciune din grupul de instruciuni in care se
execut, atunci browserul omite s evalueze expresiei+1 expresiein i execut
instruciunea ce urmeaz dup acolada nchis (}).
Dac break nu este la sfritul grupului de instruciuni ce se execut, atunci
browser-ul compar valoarea expresiei cu valoarea expresiilor i+1 expresiein ,
chiar dac nu va mai gsi egalitate pn la sfritul instruciunii switch.
Codul care urmeaz probeaz instruciunea switch. Se d un numr n baza
10 i se cere transformarea lui n baza 16. Pentru aceasta se mparte un numr la 16
pn cnd ajunge la zero i resturile, luate n ordine invers obinerii lor, formeaz
numrul n baza 16 (N = Q * 16 + R).
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function Hexazec(n)
{
var Hexa ="", r
while (n>0) {
r=n%16
if (r>=10) {
switch(r) {
case 10: R="A"; break
case 11: R="B"; break
case 12: R="C"; break
case 13: R="D"; break
case 14: R="E"; break
case 15: R="F"; break
}
Hexa=R+Hexa
}
else {
Hexa=string(r)+Hexa
}
n=(n-r)/16
}
return Hexa
}
</SCRIPT>
<BODY>
<SCRIPT language="JavaScript">
n=parseInt(prompt("Dai numrul n",0))
alert("Numrul n baza 10 este n = " + n )
alert("Numrul n baza 16 este nr16 = " + Hexazec(n))
</SCRIPT></BODY></HTML>
237
240
Continue
Cuvntul cheie continue determin browser-ul s ntrerup execuia
comenzilor din cadrul blocului de instruciuni i s treac la nceputul ciclului,
adic la testarea expresiei condiionale, ca i cum ar fi ajuns la sfritul ciclului.
Cuvntul cheie continue se folosete pentru toate instruciunile de ciclare,
cu excepia instruciunii do while, care execut blocul de instruciuni cel putin o
dat.
De exemplu, dac dorim s calculm suma primelor 10 numere, fr a-l
aduna i pe 5, vom proceda astfel:
<HTML>
<HEAD>
<TITLE>Suma primelor n numere fara unul </TITLE></HEAD>
<BODY>
<SCRIPT language="JavaScript">
s=0
for(i=1;i<=10; i++)
if (i == 5)
continue
else s+=i
document.write("Suma primelor 10 numere fara 5 este " + s)
</SCRIPT>
</BODY>
</HTML>
Instruciunea for in
n JavaScript exist o instruciune special de ciclare i anume
instruciunea for in. Acest instruciune este asemntoare instruciunii for,
diferena const c instruciunea for in se folosete cnd nu se cunoate numrul
de repetri pe care browser-ul trebuie s le fac n cadrul unui ciclu, de exemplu,
241
Instruciunea While
Instruciunea de ciclare while este asemntoare instruciunii for. Diferena
const n faptul c instruciunea while nu are o variabil contor, nici expresie de
incrementare.
242
Instruciunea do while
Instruciunea dowhile este asemntoare cu instruciunea while, diferena
const n faptul c instruciunea while este condiionat anterior execuiei
243
246
247
248
<HTML>
<HEAD>
<TITLE>Variabile globale si locala</TITLE>
<SCRIPT language="JavaScript">
function suma_n()
{var s=0
n=parseInt(prompt('Dai n ',0))
for(i=1;i<=n;i++)
s+=i
alert('Suma primelor n= ' + n + ' numere este: '+s)}
</SCRIPT></HEAD>
<BODY>
<SCRIPT language="JavaScript">
var s=10
suma_n()
alert("variabila globala s = "+ s)
</SCRIPT>
</BODY>
</HTML>
17.2.3. Parametri
n sintaxa unei funcii, am artat c ntre parantezele rotunde pot fi trecui
parametri sau argumente. De asemenea am spus c o funcie efectueaz o aciune.
Unele funcii i efectueaz aciunea fr a fi nevoie s introducem argumente,
avnd toate valorile necesare definite n corpul funciei. Acesta este cazul funciilor
fr argumente, introduse n seciunea precedent. Unele funcii necesit unele date
(valori sau variabile) pentru a-i efectua aciunea. Aceste date, numite argumente
sau parametri, se trec ntre parantezele din definirea funciei, separate prin virgul.
Aceste date nu sunt scrise n definiia funciilor (ca la funciile far argumente), i
trebuie transmise funciei ca parametri. Parametrii din antetul funciei se numesc
parametri formali, iar parametrii din apelul funciei se numesc parametri efectivi.
La apelul funciei se transmit valori parametrilor formali, proces numit transferul
prin valoare ctre funcie. Parametrii efectivi pot fi att valori, ct i variabile. n
funcie, parametrii formali sunt de fapt variabile locale.
Dac n exemplul din figura 17.11 presupunem c salariul de baz i
procentul de indexare nu sunt date n corpul funciei, ci sunt argumente ale funciei
indexare_salariu(), noua funcie va fi apelat prin valori sau se atribuie valori
parametrilor efectivi. Pentru acest exemplu vom avea codul:
<HTML>
<HEAD>
<TITLE>Funcii cu parametrii</TITLE>
<SCRIPT language="JavaScript">
function indexare_salariu(sal_vechi,coef_indexare)
{var sal_nou=sal_vechi*(1+indexare/100)
alert('Salariul '+salariu+' indexat cu '+indexare+'% este: '+sal_nou)
}
</SCRIPT></HEAD><BODY>
<SCRIPT>
salariu=prompt('Dai salariu',0)
indexare=prompt('Dai coeficient de indexare',0)
//apel functie prin variabile
indexare_salariu(salariu,indexare)
//apel prin valori
salariu=2000; indexare=5
indexare_salariu(salariu,indexare)
</SCRIPT>
</BODY>
</HTML>
250
Parametrii efectivi pot fi dup cum reiese din exemplul de mai sus:
prin variabilele salariu i indexare, caz n care funcia se apeleaz prin
valorile reinute de acestea
prin valori (2000 respectiv 5)
n capitolul urmtor se va arta cum pot fi apelate funciile din codul HTML.
17.2.5. Recursivitate
Recursivitatea este o tehnic important de programare. Ea const n
apelarea funciei n corpul ei. Un exemplu este codul factorialului:
<HTML>
<HEAD>
<TITLE>Funcii recursive</TITLE>
<SCRIPT language="JavaScript">
function fact(n)
{
if(n==0)
return 1
else
return fact(n-1)*n
}
</SCRIPT>
<BODY>
<SCRIPT language="JavaScript">
n=parseInt(prompt("dati n= ",0))
alert(n+"! = "+ fact(n))
</SCRIPT>
</BODY>
</HTML>
18. OBIECTE
z
Obiectul nou creat se poate invoca cu cuvntul this.
n exemplul urmtor se creeaz i se iniializeaz obiectul vector. Se
invoc obiectul curent prin ambele metode: folosind caracterul ., pentru a ne
253
suma()
z
Codul pentru care obiectul curent reine suma va fi:
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function complex(a,b)
{ this.real=a ;this.imag=b this.suma=suma}
function suma(z)
{
this.real=this.real+z.real
this.imag=this.imag+z.imag
}
</SCRIPT>
255
</HEAD>
<BODY> <B> Metoda 1 de sumare a 2 nr. complexe</B> <BR>
<SCRIPT language="JavaScript">
z1 = new complex(1,2)
document.write("z1.real= " +z1.real +"z1.imaginar= " + z1.imag +"<BR>")
z2 = new complex(3,4)
document.write("z2.real= " +z2.real +" z2.imaginar= " + z2.imag +"<BR>")
z1.suma(z2)
document.write("suma.real= " +z1.real + " suma.imaginar= "+ z1.imag )
</SCRIPT>
</BODY> </HTML>
Dac n exemplul de mai sus se dorete ca suma s fie calculat ntr-un nou
obiect, atunci funcia suma() va fi:
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function complex(a,b)
{
this.real=a
this.imag=b
this.suma=suma
}
function suma(z)
{
w = new complex(0,0);
w.real=this.real+z.real
w.imag=this.imag+z.imag
}
</SCRIPT> </HEAD>
<BODY> <B> Metoda 2 de sumare a 2 nr. complexe</B> <BR>
<SCRIPT language="JavaScript">
z1 = new complex(2,7)
256
z2 = complex(1,6)
document.write("z2[real]=" +z2["real"]+"z2[imaginar]="+ z2["imag"]+"<BR>")
z1=z1.suma(z2)
document.write("suma[real]= "+z1["real"]+" suma[imaginar]= "+ z1["imag"])
</SCRIPT> </BODY> </HTML>
z = new complex(1,2)
for (i in z) document.write(i+" ")
for (i in z) document.write(z[i] + " ")
modific(z)
document.write("<BR>"+"Dupa modificarea parametrilor" + "<BR>")
document.write("z.real= " + z.real +" z.imag= " +z.imag)
</SCRIPT> </BODY></HTML>
<SCRIPT language="JavaScript">
var i
for (i in z) document.write(i+" ") document.write("<BR>")
for (i in z) document.write(z[i] + " ")
modific(z)
document.write("<BR>"+"Dupa modificarea parametrilor" + "<BR>")
document.write("z.real= " + z.real +" z.imag= " +z.imag)
</SCRIPT></BODY> </HTML>
Obiecte Incluse
</SCRIPT> </HEAD>
<BODY>
<SCRIPT language="JavaScript">
var idocument.write("Mijlocul unui segment" + "<BR>")
p1=new complex(4,5)
document.write("primul punct: ".bold()+p1.real+ " "+ p1.imag+"<BR>")
p2=new complex(2,9)
document.write("al doilea punct: ".bold()+p2.real+ " "+ p2.imag+"<BR>" )
m=new mij_seg(p1,p2)
document.write("Mijlocul unui segment: ".bold() + m.complex.real + " " +
m.complex.imag+"<BR>")
</SCRIPT>
</BODY> </HTML>
262
</SCRIPT>
</BODY>
</HTML>
264
267
272
275
276
278
<HTML><HEAD>
<SCRIPT language = "JavaScript">
function Oprire()
{clearTimeout(ref)}
function Mesaj()
{alert("Mesajul va fi afiat la 2 secunde")
ref = setTimeout("Mesaj",2000) }
</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE="BUTTON" value = "click!" onclick = "Mesaj()">
<INPUT TYPE="BUTTON" value = "STOP" onclick = "Oprire()">
</BODY>
</HTML>
282
Dac formularul are un nume, se poate face referirea prin nume, nu prin
indice:
[window]document.forms.test.nume_obiect_form.value
ne referim la valoarea elementului nume al formularului test.
De exemplu, vrem s afim valoarea butonului submit:
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function afisare_submit() {
alert
("Valoare
buton
transmitere:
"+document.forms.test.submit.value)
}
</SCRIPT>
</HEAD>
<BODY>
<FORM method="post" name="test">
Nume:<input type="text" name="Fnume"><br>
Email:<input type="text" name="Email"><br>
<input
type="submit"
name="submit"
value="Transmit"
onclick="afisare_submit()">
</FORM></BODY></HTML>
287
folosind JavaScript
Amintim c n HTML, listele de opiuni se introduc cu tag-urile
<SELECT></SELECT> i <OPTION></OPTION>.
Cum atributele unui tag HTML devin proprietile obiectului n JavaScript,
putem spune c obiectul SELECT are proprietile: name, multiple (n cazul n care
sunt selectate mai multe elemente din list), size (n cazul afirii mai multor
elemente din list), options (vector de obiecte OPTION), selectedIndex (reine
indexul opiunii selectate).
Obiectul OPTION are proprietile: value i selected (care ia valoarea true
dac opiunea este selectat).
Butoanele Radio se folosesc pentru a selecta o opiune din mai multe. Dac
mai multe butoane au acelai nume, ele aparin unei selecii i se exclud unul pe
cellalt.
n acest caz, ne referim la butoane n JavaScript prin:
nume[i].proprietate
nume[i].metod()
unde i = 0, .., n -1 pentru n opiuni de butoane.
Obiectul Radio are proprietile: name, type, value i checked (butonul este
selectat).
Pentru exemplificare, s presupunem c dorim s afim alternativ dou
liste, n funcie de butonul selectat: universiti de stat i universiti particulare.
Listele au 4 elemente, vizibile dou i se pot selecta mai multe elemente
din fiecare list.
Listele conin denumirea unor universiti de stat i particulare.
288
<HTML>
<HEAD>
<TITLE>CKECKBOX</TITLE>
<SCRIPT language="JavaScript">
function Selectie()
{
var i; Selectie=" "
for (i=0; i<Lista.length; i++)
if (Lista.options[i].selected==true)
Selectie +="Optiunea " + (i+1) +"; "
alert(Selectie)
}
function schimba_lista(buton)
{
if(buton == 1)
{
Lista.options[0].text= "Univ. Bucuresti"
Lista.options[0].value=1
Lista.options[1].text= "Univ. Politehnica"
Lista.options[1].value=2
Lista.options[2].text= "Univ. Studii Economice"
Lista.options[2].value=3
Lista.options[3].text= "Univ. Arhitectura"
Lista.options[3].value=4
}
if(buton ==2)
{
Lista.options[0].text="Spiru Haret"
Lista.options[0].value=1
Lista.options[1].text= "Dimitrie Cantemir"
Lista.options[1].value=2
Lista.options[2].text= "Romano-Americana"
Lista.options[2].value=3
Lista.options[3].text= "Titus Maiorescu"
Lista.options[3].value=4
}
}
</SCRIPT>
</HEAD>
<BODY >
<SELECT name="Lista" multiple size=2>
<OPTION value=1> Univ. Bucuresti
<OPTION value=2> Univ. Politehnica
<OPTION value=3> Univ. Studii Economice
<OPTION value=4> Univ. Arhitectura
289
</SELECT><BR>
<INPUT
type="radio"
name="Univ"
value=1
onclick="schimba_lista(this.value)"> Univ. Stat
<INPUT
type="radio"
name="Univ"
value=2
onclick="schimba_lista(this.value)"> Univ. Particulare
<BR><BR><BR>
<INPUT type="button" name="Selectie" value="Ce s-a selectat?"
onclick="Selectie()">
</BODY> </HTML>
<HTML> <HEAD>
<TITLE>ONSUBMIT</TITLE>
<SCRIPT language="JavaScript">
function CreazaParola( )
{ with (document.forms.Parole)
{alert("lungime nume " + Nume.value.length)
Parola.value = Nume.value.charAt (0) + Prenume.value.charAt (0) +
Nume.value.length }}
</SCRIPT> </HEAD>
<BODY >
<FORM name="Parole">
<PRE>
Nume: <INPUT type="text" name="Nume" >
Prenume: <INPUT type="text" name="Prenume" >
Parola: <INPUT type="hidden" name="Parola" >
<INPUT type="submit" name="Submit" value="OK"
onclick= "CreazaParola( )">
</FORM>
</BODY></HTML>
292
OBSERVAIE!
Majoritatea browser-elor admit elemente rollover. Pentru a testa dac
browser-ul poate utiliza astfel de elemente trebuie s se testeze obiectul
document.images, care e tip array i cuprinde toate imaginile din pagin n ordinea
n care au fost introduse.
Astfel, ne putem referi la prima imagine, de exemplu prin
document.images[0].
Testarea compatibilitii browser-ului cu elemente rollover se poate face
astfel:
if (document.images)
{ Browserul recunoate elementele rollover i folosirea lor
prin metoda direct }
else
{ Browserul nu recunoate elementele rollover}
Vom ncerca n continuare s simplificm utilizarea elementelor de
modificare a unei pagini n funcie de plimbarea mouse-ului pe pagin, folosind
una sau ambele metode.
294
</BODY></HTML>
OBSERVAII!
Dac atributul onclick din ambele metode (figurile 19.14 si 19.15) se
nlocuiete cu atributul ondblclick, efectul este acelai, diferena const
n faptul c trebuie executat dublu clic pe imagine pentru ca imaginea s
fie ncadrat cu un chenar de grosime 7px.
Prin metoda direct unui atribut i se atribuie instruciunea de atribuire
complet, n cazul nostru onclick = border=7
295
height="100"
width="100"
function Schimba()
{ floare.src=flori1.jpg}
function Revine()
{ floare.src=flori.jpg }
</SCRIPT></HEAD>
<BODY>
<IMG ID=floare src=flori.jpg onmouseover=Schimba()
onmouseout=Revine()>
</BODY></HTML>
297
</HEAD>
<BODY>
<IMG ID="floare" src =1.jpg onmouseover="Animatie()">
</BODY>
</HTML>
299
Proprietatea style n JavaScript este tot de tip obiect. Obiectul style are la
rndul lui, alte obiecte corespunztoare atributelor de stil din CSS.
n JavaScript se folosete pentru a defini un stil pentru un obiect id-ul
scris cu litere mici, iar .class este folosit doar n HTML
Numele acestor obiecte sunt:
o numele atributelor corespunztoare din CSS, dar obligatoriu scrise
cu litere mici. De exemplu: color n CSS este tot color n
JavaScript
o dac numele din CSS a unui atribut are n componen caracterul
- (linie), atunci acesta este eliminat i ce urmeaz este scris cu
liter mare. De exemplu: font-size n CSS este fontSize n
JavaScript
Cu ajutorul limbajului JavaScript se pot schimba dinamic valorile
proprietilor (obiectelor) obiectului style
n continuare se vor prezenta exemple care vor proba cele menionate mai
sus.
1) n acest exemplu se dorete formatarea unui bloc de text atunci cnd se
d un dublu clic pe suprafaa lui. Pentru acesta obiectul DIV recepioneaz
evenimentul ondblclick, care va apela o funcie ce va formata textul din blocul
DIV, aa cum reiese din urmtorul cod:
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function stiluri() {
d.style.fontSize="40"
d.style.fontStyle="italic"
d.style.color="red"
p1.style.color="blue"}
</SCRIPT>
</HEAD>
<BODY>
<DIV id="d" ondblclick = "stiluri()">
Acesta este un text care se va formata conform stilurilor definite n funcia
stiluri(). Funcia este apelat de evenimentul ondblclick, care este un
atribut al elementului DIV. Se observ c va fi formatat dinamic i
paragraful cu id=p1
</DIV>
<P id="p1"> Acesta este un alt text care va fi colorat cu albastru
</P>
</BODY>
</HTML>
301
Efect
Butoane pentru directoare
standard ale browser-ului
Edit-ul care conine adresa
fiierului HTML
menubar
Bara de meniuri
resizable
Redimensionarea ferestrei
scrollbars
Barele de derulare
status
toolbar
height
width
top, left
Bara de stare
Bara de instrumente
standard
Inlimea ferestrei
Limea ferestrei
Coordonatele x, y ale
coltului stnga-sus la care va fi
afiat fereasta
Valori:
activ= yes,1
dezactiv=no, 0
directories= 1 or yes
directories=0 or nu
location=1
location=0
menubar=1
menubar=0
resizable=1
resizable=0
scrollbars=0
scrollbars=1
status=1 status=0
toolbar=1 toolbar=0
n pixeli
n pixeli
n pixeli
306
OBSERVAIE!
Dac se dorete s se deschid mai multe ferestre pe ecran se poate folosi
un ciclu for care are n corpul lui deschiderea unei ferestre. Se creeaz un buton
care s apeleze o funcie care conine ciclul for. Primul parametru al metodei
open() este irul vid( ), presupunnd c dorim s se afieze ferestre vide. n cazul
n care n ferestre se afieaz anumite pagini web, nu se mai poate folosi un ciclu
for, ci fiecare fereastr trebuie deschis cu metoda open().
Urmtorul exemplu afieaz trei ferestre vide n fereastra curent:
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function Multiple_Ferestre()
{for (i=1; i<4; i++)
fer=window.open(" ","fer"+i,"width=100, height=100, status=yes,
resizable=yes, menubar=0")}
</SCRIPT></HEAD>
<BODY>
<INPUT type="button" value="Ferestre" name="Ferestre"
onclick="Multiple_Ferestre()">
</BODY></HTML>
308
309
310
311
<HTML><HEAD>
<SCRIPT language="JavaScript">
function Numara() {
alert(document.all.tags("P").length)
for (i=0; i<document.all.tags("P").length; i++)
document.all.tags("P")[i].style.color="red"}
</SCRIPT></HEAD>
<BODY>
<P> paragraful 1 </P>
<P> paragraful 2</P>
<P> paragraful 3</P>
<SCRIPT language="JavaScript">
Numara()
</SCRIPT>
</BODY></HTML>
alert(document.images[i].src)}
20.3.2. Proprieti de culoare ale obiectului document
Proprietile de culoare sunt mai rar folosite din cauz c este mult mai util
s se foloseasc stilurile. Proprietile de culoare sunt pentru fond, font i legturi.
Acestea sunt:
bgColor pentru culoarea de fond a documentului
fgColor pentru culoarea fontului
linkColor culoarea pentru legturi (textul legturilor)
312
313
314
ANEXE
315
316
ANEXA A
Culori
Nume culoare
AliceBlue
AntiqueWhite
Aqua
Aquamarine
Azure
Beige
Bisque
Black
BlanchedAlmond
Blue
BlueViolet
Brown
BurlyWood
CadetBlue
Chartreuse
Chocolate
Coral
CornflowerBlue
Cornsilk
Crimson
Cyan
DarkBlue
DarkCyan
DarkGoldenRod
DarkGray
DarkGrey
DarkGreen
DarkKhaki
DarkMagenta
DarkOliveGreen
Darkorange
DarkOrchid
DarkRed
Cod RGB
#F0F8FF
#FAEBD7
#00FFFF
#7FFFD4
#F0FFFF
#F5F5DC
#FFE4C4
#000000
#FFEBCD
#0000FF
#8A2BE2
#A52A2A
#DEB887
#5F9EA0
#7FFF00
#D2691E
#FF7F50
#6495ED
#FFF8DC
#DC143C
#00FFFF
#00008B
#008B8B
#B8860B
#A9A9A9
#A9A9A9
#006400
#BDB76B
#8B008B
#556B2F
#FF8C00
#9932CC
#8B0000
317
DarkSalmon
DarkSeaGreen
DarkSlateBlue
DarkSlateGray
DarkSlateGrey
DarkTurquoise
DarkViolet
DeepPink
DeepSkyBlue
DimGray
DimGrey
DodgerBlue
FireBrick
FloralWhite
ForestGreen
Fuchsia
Gainsboro
GhostWhite
Gold
GoldenRod
Gray
Grey
Green
GreenYellow
HoneyDew
HotPink
IndianRed
Indigo
Ivory
Khaki
Lavender
LavenderBlush
LawnGreen
LemonChiffon
LightBlue
LightCoral
LightCyan
LightGoldenRodYellow
LightGray
318
#E9967A
#8FBC8F
#483D8B
#2F4F4F
#2F4F4F
#00CED1
#9400D3
#FF1493
#00BFFF
#696969
#696969
#1E90FF
#B22222
#FFFAF0
#228B22
#FF00FF
#DCDCDC
#F8F8FF
#FFD700
#DAA520
#808080
#808080
#008000
#ADFF2F
#F0FFF0
#FF69B4
#CD5C5C
#4B0082
#FFFFF0
#F0E68C
#E6E6FA
#FFF0F5
#7CFC00
#FFFACD
#ADD8E6
#F08080
#E0FFFF
#FAFAD2
#D3D3D3
LightGrey
LightGreen
LightPink
LightSalmon
LightSeaGreen
LightSkyBlue
LightSlateGray
LightSlateGrey
LightSteelBlue
LightYellow
Lime
LimeGreen
Linen
Magenta
Maroon
MediumAquaMarine
MediumBlue
MediumOrchid
MediumPurple
MediumSeaGreen
MediumSlateBlue
MediumSpringGreen
MediumTurquoise
MediumVioletRed
MidnightBlue
MintCream
MistyRose
Moccasin
NavajoWhite
Navy
OldLace
Olive
OliveDrab
Orange
OrangeRed
Orchid
PaleGoldenRod
PaleGreen
PaleTurquoise
#D3D3D3
#90EE90
#FFB6C1
#FFA07A
#20B2AA
#87CEFA
#778899
#778899
#B0C4DE
#FFFFE0
#00FF00
#32CD32
#FAF0E6
#FF00FF
#800000
#66CDAA
#0000CD
#BA55D3
#9370D8
#3CB371
#7B68EE
#00FA9A
#48D1CC
#C71585
#191970
#F5FFFA
#FFE4E1
#FFE4B5
#FFDEAD
#000080
#FDF5E6
#808000
#6B8E23
#FFA500
#FF4500
#DA70D6
#EEE8AA
#98FB98
#AFEEEE
319
PaleVioletRed
PapayaWhip
PeachPuff
Peru
Pink
Plum
PowderBlue
Purple
Red
RosyBrown
RoyalBlue
SaddleBrown
Salmon
SandyBrown
SeaGreen
SeaShell
Sienna
Silver
SkyBlue
SlateBlue
SlateGray
Snow
SpringGreen
SteelBlue
Tan
Teal
Thistle
Tomato
Turquoise
Violet
Wheat
White
WhiteSmoke
Yellow
YellowGreen
320
#D87093
#FFEFD5
#FFDAB9
#CD853F
#FFC0CB
#DDA0DD
#B0E0E6
#800080
#FF0000
#BC8F8F
#4169E1
#8B4513
#FA8072
#F4A460
#2E8B57
#FFF5EE
#A0522D
#C0C0C0
#87CEEB
#6A5ACD
#708090
#FFFAFA
#00FF7F
#4682B4
#D2B48C
#008080
#D8BFD8
#FF6347
#40E0D0
#EE82EE
#F5DEB3
#FFFFFF
#F5F5F5
#FFFF00
#9ACD32
ANEXA B
Caractere n HTML
Caracter
"
$
'
&
<
>
Nume
"
'
&
<
>
¡
¤
¢
£
¥
¦
§
¨
©
ª
«
¬
­
®
™
¯
°
±
²
³
´
µ
¶
·
¸
Cod HEXA
"
$
'
&
<
>
 
¡
¤
¢
£
¥
¦
§
¨
©
ª
«
¬
­
®
™
¯
°
±
²
³
´
µ
¶
·
¸
321
322
¹
º
»
¼
½
¾
¿
À
Á
Â
Ã
Ä
Å
Æ
Ç
È
É
Ê
Ë
Ì
Í
Î
Ï
Ð
Ñ
Ò
Ó
Ô
Õ
Ö
×
Ø
Ù
Ú
Û
¹
º
»
¼
½
¾
¿
À
Á
Â
Ã
Ä
Å
Æ
Ç
È
É
Ê
Ë
Ì
Í
Î
Ï
Ð
Ñ
Ò
Ó
Ô
Õ
Ö
×
Ø
Ù
Ú
Û
Ü
Ý
Þ
ß
à
á
â
ã
ä
å
æ
ç
è
é
ê
ë
ì
í
î
ï
ð
ñ
ò
ó
ô
õ
ö
ø
÷
ù
ú
û
ü
ý
þ
Ü
Ý
Þ
ß
à
á
â
ã
ä
å
æ
ç
è
é
ê
ë
ì
í
î
ï
ð
ñ
ò
ó
ô
õ
ö
ø
÷
ù
ú
û
ü
ý
þ
323
324
ÿ
Œ
œ
Š
š
Ÿ
ˆ
˜
 
 
 
‍
‎
‏
–
—
‘
’
‚
“
”
„
†
‡
…
‰
‹
›
€
ÿ
Ă
ă
Œ
œ
Š
š
Ţ
ţ
Ÿ
ˆ
˜
 
 
 
‍
‎
‏
–
—
‘
’
‚
“
”
„
†
‡
…
‰
‹
›
€
ANEXA C
CSS - Specificaii de stil
Background
Proprietate
background
background-attachment
background-color
background-image
background-position
background-repeat
Valoare
background-color; background-image
background-repeat; background-attachment;
background-position
scroll; fixed
color-rgb; color-hex; color-name; transparent
url(URL); none
top left; top cente;r top right;
center left; center center; center right;
bottom left; bottom center; bottom right;
x% y%; xpos ypos
repeat; repeat-x; repeat-y; no-repeat
Borduri
Proprietate
Valoare
border
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-color
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-style
border-top
border-top-color
border-top-style
border-top-width
border-width
Clasificri
Proprietate
clear
cursor
display
float
position
visibility
Valoare
left; right; both; none
url; auto; crosshair; default; pointer; move;
e-resize; ne-resize; nw-resize; n-resize;
se-resize; sw-resize; s-resize; w-resize
text; wait; help
none;inline; block; list-item; run-in; compact
marker; table; inline-table; table-row-group
table-header-group; table-footer-group
table-row; table-column-group; table-column
table-cell; table-caption
left; right; none
static; relative; absolute; fixed
visible; hidden; collapse
Dimensiuni
Proprietate
Valoare
height
line-height
max-height
max-width
min-height
min-width
width
auto; length; %
normal; number; length; %
none; length; %
none; length; %
length; %
length; %
auto; length; %
Fonturi
Proprietate
font
font-family
font-size
font-size-adjust
font-stretch
326
Valoare
font-style; font-variant; font-weight
font-size/line-height; font-family; status-bar
caption;icon;menu; message-box; small-caption
family-name; generic-family
xx-small; x-small;small; smaller
medium; large; x-large; xx-large;
larger; length; %
none; number
normal; wider; narrower; ultra-condensed;
font-style
font-variant
font-weight
Coninut generat
Proprietate
content
counter-increment
counter-reset
quotes
Valoare
string; url; counter(name); open-quote;
close-quote;no-open-quote; no-close-quote;
counter(name, list-style-type); attr(X)
counters(name, string);
counters(name, string, list-style-type)
none; identifier number
none; identifier number
none; string
Liste
Proprietate
list-style
list-style-image
list-style-position
list-style-type
marker-offset
Valoare
list-style-type; list-style-position;
list-style-image
none; url
inside; outside
none; disc; circle; square; decimal
decimal-leading-zero; lower-roman
upper-roman; lower-alpha; upper-alpha
lower-greek; lower-latin; upper-latin;hebrew
armenian; georgian; cjk-ideographic
hiragana; katakana; hiragana-iroha
auto; length
Margini
Proprietate
margin
margin-bottom
Valoare
margin-top; margin-right
margin-bottom; margin-left
auto; length; %
327
margin-left
margin-right
margin-top
auto; length; %
auto; length; %
auto; length; %
Outline
Proprietate
outline
outline-color
outline-style
outline-width
Valoare
outline-color; outline-style; outline-width
color; invert
none; dotted; dashed; solid; double; groove;
ridge; inset; outset
Thin; medium; thick; length
Padding
Proprietate
Padding
padding-bottom
padding-left
padding-right
padding-top
Valoare
padding-top; padding-right
padding-bottom; padding-left
length; %
length; %
length; %
length; %
Poziionare
Proprietate
bottom
clip
left
overflow
position
right
top
vertical-align
z-index
Valoare
auto; %; length
shape; auto
auto; %; length
visible; hidden; scroll; auto
static; relative; absolute; fixed
auto; %; length
auto; %; length
baseline; sub; super; top; text-top; middle;
bottom; text-bottom; length; %
auto; number
Tabele
Proprietate
Valoare
border-collapse
collapse
separate
328
border-spacing
caption-side
empty-cells
table-layout
length length
top; bottom; left; right
show; hide
auto; fixed
Text
Proprietate
color
direction
line-height
letter-spacing
text-align
text-decoration
text-indent
text-shadow
text-transform
unicode-bidi
white-space
word-spacing
Valoare
color
ltr; rtl
normal; number; length; %
normal; length
left; right; center; justify
none; underline; overline; line-through; blink
length; %
none; color; length
none; capitalize; uppercase; lowercase
normal; embed; bidi-override
normal; pre; nowrap
normal; length
329
330
BIBLIOGRAFIE SELECTIV
331
332