FLORENTINA RODICA NICULESCU

PROIECTAREA PAGINILOR WEB

HTML, CSS, JavaScript

Descrierea CIP a Bibliotecii Naionale a Romniei NICULESCU, FLORENTINA RODICA Proiectarea paginilor Web HTML, CSS, JavaScript . / Florentina Rodica Niculescu. Bucureti, Editura Fundaiei Romnia de Mine, 2007
Bibliog.

ISBN: 978-973-725-822-9 004.738.52 004.43 HTML 004.43 CSS 004.43 JAVASCRIPT 004.272.23

Editura Fundaiei Romnia de Mine, 2007

UNIVERSITATEA SPIRU HARET

FLORENTINA RODICA NICULESCU

PROIECTAREA PAGINILOR WEB

HTML, CSS, JavaScript

EDITURA FUNDAIEI ROMNIA DE MINE Bucureti, 2007

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 .................................................................................. 2. HTML noiuni de baz....................................................................................... 2.1. Elemente standard ale unei pagini Web ........................................................ 2.2. Titluri pentru pagini web............................................................................... 2.3. Paragrafe i linii ........................................................................................... 2.4. Elementul <PRE>......................................................................................... 2.5. Linii orizontale .............................................................................................. 3. Stiluri de text.......................................................................................................... 3.1. Stiluri fizice de text ....................................................................................... 3.2. Stiluri logice de text ...................................................................................... 3.3. Fonturi ........................................................................................................... 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) ................................................................ 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 ............................................................................ 13 15 16 17 18 20 20 22 23 25 28 29 29 32 36 39 39 41 44 45 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 ......................................................................... 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 ........................................................................................

66 68 68 75 75 77 78 80 82 83 84 88 89

8. Elementele de structur: HTML, HEAD i BODY ............................................ 90 8.1. Blocul de antet <HEAD></HEAD> ......................................................... 90 8.1.1. Elementul TITLE ................................................................................ 90 8.1.2. Elementul BASE ............................................................................... 91 8.2.3. Elementul META ............................................................................... 92 8.2. Blocul de corp <BODY></BODY>......................................................... 98 8.3. Blocul de comentarii ..................................................................................... 100 8.4. Blocul de centrare.......................................................................................... 100 9. Cadre ...................................................................................................................... 9.1. Bazele organizrii cadrelor............................................................................ 9.2. Elementul FRAMESET................................................................................. 9.3. Elementul FRAME........................................................................................ 9.4. Cadre destinaie ............................................................................................. 9.5. Cadre interioare ............................................................................................. 10. Formulare............................................................................................................. 10.1. Elementul FORM ........................................................................................ 10.2. Transmiterea i citirea datelor ..................................................................... 10.3. Elementul INPUT........................................................................................ 10.4. Elementul TEXTAREA .............................................................................. 10.5. Elementul SELECT..................................................................................... 11. Hri de imagine .................................................................................................. 11.1. Definirea hrilor imagine pe server............................................................ 11.2. Definirea unei hri imagine la client .......................................................... 11.3. Programul MAP THIS................................................................................. 12. Faciliti suplimentare Multimedia 12.1. Multipurpose Internet Mail Extensions (MIME) 12.2. Aplicaii Plug-in i ActiveX ... 12.2.1. Plug-in programe de completare 12.2.2. ActiveX . 12.3. Elemente OBJECT i PARAM ... 12.4. Elementul MARQUEE 6 102 102 105 106 108 110 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 ........................................................................... 14. Clase de proprieti n CSS ................................................................................ 14.1. Casete n CSS .............................................................................................. 14.2. Fonturi n CSS............................................................................................. 14.3. Proprieti pentru TEXT.............................................................................. 14.4. Proprieti pentru padding........................................................................... 14.5. Proprieti pentru bordur ........................................................................... 14.6. Proprieti pentru partea margin......................................................................... 14.7. Proprieti de culoare pentru casete.................................................................... 15. Poziionarea elementelor n pagin n CSS ....................................................... 15.1. Arborele unei pagini.................................................................................... 15.2. Proprietatea Display .................................................................................... 15.3. Elemente flotante......................................................................................... 15.4. Elemente poziionate ................................................................................... 15.5. Proprietatea z-index..................................................................................... 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() ............................................................................ 17. Instruciuni i Funcii n JavaScript .................................................................. 17.1. Instruciuni .................................................................................................. 17.1.1. Instruciuni de decizie ....................................................................... 17.1.2. Instruciuni de ciclare........................................................................ 209 209 212 216 216 217 220 228 230 230 230 238 7

17.2. Funcii n Java Script................................................................................... 17.2.1. Definirea i apelarea unei funcii ...................................................... 17.2.2. Domeniul de valabilitate a variabilelor ............................................. 17.2.3. Parametri ........................................................................................... 17.2.4. Funcii predefinite ............................................................................. 17.2.5. Recursivitate...................................................................................... 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 ............................................................................... 19. Interaciune JavaScript HTML ...................................................................... 19.1. Legtura ntre JavaScript i HTML............................................................. 19.2. Funciile setTimeout() si clearTimeout().................................................... 19.3. Elementul <FORM> n JavaScript .............................................................. 19.3.1. Validarea datelor ............................................................................... 19.3.2. Obiectele din Formular ..................................................................... 19.3.3. Utilizarea evenimentului onchange................................................... 19.3.4. Evidenierea seleciei csuelor de validare, utiliznd JavaScript ..... 19.3.5. Listele de opiuni schimbate dinamic cu ajutorul butoanelor radio, folosind JavaScript .................................................................. 19.3.6. Trimiterea unui formular, utiliznd evenimentul onsubmit............... 19.3.7. Activarea, Dezactivarea, Citirea unor elemente realizate cu funcii JavaScript................................................................................ 19.4. Imagini n JavaScript................................................................................... 19.4.1. Evenimentele onclick i ondblclick ................................................... 19.4.2. Evenimentul onmousemove............................................................... 19.4.3. Evenimentele onmouseover si onmouseout....................................... 19.4.5. Realizarea unei animaii .................................................................... 20. Elemente avansate JavaScript............................................................................ 20.1. Legtura ntre HTML, JavaScript i CSS.................................................... 20.2. Obiectul WINDOW .................................................................................... 20.2.1. Deschiderea i nchiderea unei ferestre ............................................. 20.2.2. Activarea i dezactivarea unei ferestre.............................................. 20.2.3. Metoda scrollTo().............................................................................. 20.3. Obiectul DOCUMENT ............................................................................... 20.3.1. Proprietatea images a obiectului document....................................... 20.3.2. Proprieti de culoare ale obiectului document ................................. Anexe ANEXA A Culori.................................................................................................... ANEXA B Caractere n HTML............................................................................... ANEXA C CSS Specificaii de stil......................................................................... Bibliografie selectiv...................................................................................................

245 245 247 250 251 252 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 317 321 325 331

Prefa

Cartea Proiectarea paginilor Web HTML, CSS, JavaScript i propune s fie o lucrare de baz pentru nsuirea limbajelor de marcare HTML, de stiluri CSS i de scriptare JavaScript, necesare realizrii unor pagini Web atractive i interactive. Proiectat ca suport la cursurile de Tehnologii Web i de Programare Web i multimedia, predate de autoare la Facultatea de Matematic Informatic din cadrul Universitii Spiru Haret, cartea ofer coduri surs i capturi de ecran pentru un numr foarte mare de exemple descriptive. Cartea indic, de asemenea, modul n care proiectantul unui site poate integra HTML, CSS i JavaScript pentru a realiza pagini web profesioniste. Cartea este structurat n trei pri i o anex. n prima parte este tratat limbajul de marcare HTML, care este un acronim pentru HyperText Markup Language. HTML constituie limbajul de baz, care ne permite s realizm propriile documente multimedia atractive n spaiul World Wide Web, cu ajutorul browserelor Internet Explorer, Netscape Navigator, Mozzila Firefox, Opera etc. Partea a doua este dedicat tratrii stilurilor. CSS este un acronim pentru Cascading Style Sheets (Foi de stil n cascad) i constituie un instrument modern, care ajut proiectanii de site-uri s i mbunteasc aspectul paginilor. CSS pune la dispoziie peste 100 de proprieti, fiecare avnd un set de valori care se pot stabili elementelor HTML, n vederea transformrii documentelor Web n unele profesioniste, care nu ar putea fi realizate numai cu ajutorul atributelor elementelor HTML. Partea a treia trateaz limbajul JavaScript. HTML i CSS ne ajut s proiectm pagini atractive, dar statice. Pentru a crea pagini sofisticate, interactive (dinamice), se pot utiliza diferite programe de scriptare, ca de exemplu JavaScript, realizat de firmele Netscape i Sun. JavaScript este un limbaj de scriptare, interpretat i orientat pe obiecte, care, utilizat mpreun cu HTML i CSS, permite proiectarea de pagini Web dinamice. Cu toate c este un limbaj mult mai puternic dect HTML, introducnd n pagini componenta dinamic, JavaScript are i unele limite, de exemplu nu poate scrie i citi fiiere, nu poate scrie aplicaii pe parte de server etc.
9

Anexa cuprinde trei tabele: culorile, entitile folosite n web i, respectiv, proprietile CSS i valorile lor posibile. Aceast carte se adreseaz, n primul rnd, studenilor de la specializrile de informatic din Facultile de Matematic Informatic din ar. Cartea se adreseaz, de asemenea, tuturor celor interesai de crearea unor site-uri Web atractive i interactive, utiliznd resurse multimedia. mi exprim, anticipat, gratitudinea pentru toate sugestiile pe care le voi primi din partea cititorilor pe adresa de e-mail: rodicaniculescu@gmail.com

10

PARTEA I

HTML

11

12

1. Spaiul World Wide Web

n acest capitol se introduc principalele concepte i tehnologii de proiectare a paginilor Web. Pornind de la descrierea modului n care referinele pot contribui la organizarea informaiei se continu cu prezentarea conceptelor de multimedia, de protocol de transfer de informaii, de programe de navigare, de adrese web i de realizare de site-uri. Tehnologia de baz a spaiului World Wide Web a fost creat de un institut de cercetri pentru fizica energiilor nalte din Elveia, CERN. Tim Berners-Lee i echipa sa de la CERN a creat n 1994 un Consoriu Web, care se ocupa cu elaborarea i dezvoltarea standardelor pentru Web. Membrii consoriului, atunci cnd au nceput s creeze un mecanism pentru identificarea unic a informaiei din spaiul de date, au neles necesitatea elaborrii unei scheme de legturi informaionale Web, care s includ o mare varietate de servicii internet, rezultnd astfel adresele URL (Uniform Resource Locator Descriptor Uniform de Resurse). Pentru a nelege World Wide Web trebuie s nelegem modul n care este organizat informaia n mediile tiprite. Medii liniare multimedia Transmiterea informaiei la distan se realizeaz cu anumite tehnologii n funcie de specificul datelor, ca de exemplu: tiprituri (cri, ziare etc.), servicii potale, telefonie, radioul i televiziunea i, mai nou, internetul. Tehnologiile multimedia pot fi definite ca o totalitate de modaliti de creare, stocare, regsire, exploatare i difuzare a documentelor sau aplicaiilor compuse din mai multe elemente, ca de exemplu: text, grafic, imagini, animaie, sunet etc. Componenta media a cuvntului multimedia specific o form de interaciune uman n modelarea i procesarea computerizat, iar componenta multi semnific prezena simultan n acelai document sau aplicaie a mai multor tipuri de media. O aplicaie multimedia trebuie s conin cel puin o media continu (cu durat msurabil de execuie, precum: sunet, film, animaie etc. ) i cel puin o media discret (fr durat determinat de execuie: text, fotografii, grafic etc.). Mediile liniare sunt acele documente n care informaia are o organizare liniar: crile sunt citite de la nceputul crii i pn la sfritul ei. La fel i vizionarea unui film se face liniar. Dar, cu toat organizarea liniar, se poate sri de la o pagin a crii la alta sau se poate crea o strategie de navigare prin carte.
13

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.

1.1. Introducere n realizarea unui site

Pentru a crea un site, o persoan fizic sau juridic (firm) trebuie s apeleze la o firm specializat numit provider. Serviciile oferite de provider se numesc Web Hosting. Provider-ul deine calculatoare foarte performante numite servere, care sunt cuplate cu calculatoare din ntreaga lume. Acestea pun la dispoziia persoanei solicitante: spaiul pe hardul server-ului de cel puin 10 Mb; o adres de internet, ca de exemplu: www.adresa-utilz.ro n spaiul alocat pe serverul provider-ului, persoana introduce fiiere, documente multimedia scrise n HTML (HyperText Markup Language), dar i alte documente care provin din alte tipuri de servicii de publicare a informaiilor din internet. Pentru a vizita o pagin Web, trebuie s existe pe calculatorul vizitatorului unul sau mai multe programe specializate numite navigatoare sau browser-e, precum: Netscape Navigator realizat de Netscape Communications, n 1995, odat cu lansarea mediului de operare Windows 95, i Internet Explorer realizat de Microsoft, prima versiune a sa fiind inclus n pachetul Windows 95 Plus Pack. La nceputul lansrii, Internet Explorer era inferior browser-ului Netscape, dar au urmat alte versiuni cu mbuntiri care l-au fcut s devin cel mai utilizat browser. Azi exist programe de navigare, ca de exemplu, Opera, Mozilla Firefox, fiecare din ele avnd faciliti suplimentare. n aceast carte, exemplele au fost fcute cu browserul Internet Explorer. Funciile principale ale browser-ului sunt: permite vizitatorilor paginilor Web s introduc adresa URL a paginilor respective;
15

 transmite server-ului adresa i acesta i furnizeaz fiierul HTML care conine codul paginii; interpreteaz comenzile coninute n codul HTML i le afieaz. Obinuim s numim pagin, coninutul afiat al unui fiier HTML. Site-ul este un ansamblu format din: spaiul pe hard, fiierele care sunt depuse pe acest spaiu i adres. Fiierele dintr-un site nu sunt numai fiiere HTML. Pot exista toate tipurile de fiiere care se pot gsi pe spaiul Web i care au fost enumerate mai sus (imagini, animaie, video, sunet etc). Fiierele de pe site pot fi grupate, ca i cele de pe hardul calculatorului, n foldere. Cnd solicitm browser-ului ncrcarea unui fiier de pe un site, acesta va solicita server-ului, pe care se afla alocat site-ul, furnizarea respectivului fiier.

1.2. Protocoale i adrese URL

Pentru ca dou calculatoare s poat comunica ntre ele, trebuie s existe programe care s execute transferul. Definim un protocol, ansamblul de reguli ce trebuie respectate n transferul de informaii de la server la calculator, i invers. Exist mai multe protocoale care se utilizeaz n transferul de informaii multimedia. Cele mai folosite sunt: HTTP (HyperText Transfer Protocol) este destinat exclusiv transferului de informaii pe Web, adic transferului de fiiere de la server la calculatorul local pentru browser. RTP (RealTime Transport Protocol) este folosit n transmiterea n timp real a informaiilor multimedia, oferind servicii de transfer a mediilor audio i video interactive. RTP ofer servicii de multiplicare, suportnd transferul datelor la destinaii multiple (multicast). Acest protocol este folosit mai ales de aplicaiile de video-conferine i pentru transmiterea pe Web a unor programe radio i audio-video. FTP (File Transfer Protocol) este destinat transferului de fiiere de la server la calculatorul local (download) i invers, de la calculator la server (upload). n aceste operaii de transfer nu intervine browser-ul, ci programe cunoscute sub numele de programe ftp. Aceste programe pot fi download-ate de pe internet i, n marea majoritate, sunt gratuite. Ele se pot identifica cu GOOGLE, folosind cuvntul cheie FTP. n aceast carte se va folosi protocolul ftp, WS-FTP95, care se poate cuta pe GOOGLE cu acest cuvnt cheie, sau poate fi download-at de la adresa: www.uottawa.ca/help/ws_ftpe.html. Adresarea resurselor Web Informaiile sunt stocate n spaiul Web n fragmente, numite noduri, interconectate ntre ele. Nodurile sunt identificate prin adrese, termenul tehnic fiind de URL Uniform Resource Locator (Descriptor Uniform de Resurse ). O adres URL este un ir de caractere prin intermediul cruia se acceseaz un fiier al unui site i are sintaxa: protocol://domeniu/cale
16

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

1.3. Crearea unui site gratuit

Firmele specializate (provider-ii) pun la dispoziia utilizatorilor site-uri contra cost, costuri care variaz n funcie de spaiul acordat pe server i de serviciile furnizate. Exist i firme care ofer site-uri gratuite, dar n acest caz, utilizatorul siteului, ct i toi vizitatorii trebuie s accepte publicitatea. Pentru a obine un site gratuit, solicitantul trebuie s aibe o adres de e-mail, care poate fi obinut tot gratuit la Yahoo, Hotmail, Gmail etc. Dac se acceseaz site-ul de la adresele: www.freewebsites.com www.b0x.com
17

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.

1.4. Crearea paginilor Web

Limbajul HTML se va prezenta n capitolele urmtoare. Pentru a scrie fiiere HTML (pagini web), urmm paii: cu My Computer sau Explorer ne situm n folderul unde dorim s se gseasc fiierele cu ajutorul menu-ului contextual (click cu butonul drept al mouse-ului) alegem New -> Text Document. Programul NOTEPAD va crea un fiier cu extensia .txt ne poziionm pe fiier i din menu-ul contextual alegem comanda RENAME, pentru a schimba numele fiierului i extensia n .html sau .htm. Extensia .htm este asociat browser-ului Internet Explorer, i deci fiierul va avea icon-ul browser-ului
18

un dublu click pe fiier are ca efect lansarea browser-ului, care va afia fiierul (coninutul va fi vid) din menu-ul principal din Internet Explorer, View->Source, NOTEPAD va ncrca codul HTML al fiierului (coninutul va fi vid) scriem un text la alegere, de exemplu se creeaz un site, se salveaz fiierul n fereastra browser-ului se apas butonul Refresh, prin care comandm browser-ului s rencarce fiierul care a suferit modificri se trece iar n NOTEPAD (View-Source) pentru a continua s scriem fiierul HTML

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 pe mai multe linii-->

19

2. HTML noiuni de baz

n acest capitol se vor introduce noiunile de baz ale Limbajului de Marcare Hipertext (Hypertext Markup Language HTML) Limbajul HTML conine un set de coduri speciale care se insereaz ntr-un text, pentru a aduga informaii despre formatare i legturi. HTML are la baz limbajul Generalizat Standard de Marcare (Standard Generalized Markup Language SGML). Prin convenie, toate informaiile HTML ncep cu o parantez unghiular deschis, (<) i se termin cu o parantez unghiular nchis (>), de exemplu <HTML>. Simbolul <> este cunoscut n literatura de specialitate sub numele de tag (etichet) de control sau de marcaj. Marcajul comunic unui program de navigare (interpretor sau browser) c fiierul scris este formatat n limbajul HTML standard. n capitolul precedent s-au enumerat unele interpretoare HTML, precum Internet Explorer al companiei Microsoft.

2.1. Elemente standard ale unei pagini Web

Dac un fiier cu extensia .html nu conine niciun marcaj HTML, browser-ul folosit se strduiete s redea ct mai corect informaia. S presupunem c am creat fiierul cerere.html, cu urmtorul coninut: Domnule Decan Subsemnata, Ionescu Ana, va rog sa-mi eliberati o adeverinta, din care sa reiasa ca sunt studenta a facultii de Matematica-Informatica din Universitatea Bucuresti. Menionez ca aceasta adeverinta imi este necesara la R.A.T.B. 05-01-2007 Ana Ionescu

Fiierul va fi afiat de browser, ca n figura de mai jos.

20

Figura 2. 1. Fiierul cerere.html, fr marcaje

Se observ c ceea ce afieaz browser-ul nu seamn cu formatul dorit. Dac n exemplul anterior se introduc marcaje HTML, se creeaz un document HTML (o pagin web) standard. Aceste marcaje (etichete) introduse nu sunt afiate de programele navigatoare. Multe din etichetele HTML sunt elemente de sine stttoare, dar unele sunt etichete perechi, avnd etichete de nceput i de sfrit. Controlul de nceput se numete i control (eticheta, tag sau marcaj) de deschidere i se reprezint prin <>, i cel de sfrit se numete control de nchidere i se reprezint prin </>. Structura de baz a unei pagini web este redat n figura de mai jos. <HTML> <HEAD> </HEAD> <BODY> EXEMPLUL DE CREARE A UNEI PAGINI WEB </BODY> </HTML>

Figura 2. 2. Structura de baz a unei pagini web

21

2.2. Titluri pentru pagini web

Pentru ca o pagina web s arate mai relevant se poate da un titlu adecvat, cu ajutorul etichetei pereche: <TITLE> coninut </TITLE>. Titlul apare pe bara de titlu a browser-ului utilizat. Blocul de titlu apare n interiorul blocului de antet <HEAD> </HEAD>. Coninutul blocului de titlu va fi titlul paginii web respective i deci folosirea lui va fi de folos pentru vizitatorii site-ului. Introducnd n exemplul de mai sus un titlu, Internet Explorer va afia: <HTML> <HEAD> <TITLE> PRIMA PAGINA </TITLE> </HEAD> <BODY> EXEMPLUL DE CREARE A UNEI PAGINI WEB </BODY> </HTML>

Figura 2. 3. Tag-ul <TITLE>

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.

2.3. Paragrafe i linii

Pentru a crea documente Web lizibile i utile se folosesc etichetele de trecere la paragraf nou sau linie nou. Aceste etichete sunt <P> i <BR>. Eticheta <P> Pentru a specifica saltul la un nou paragraf se utilizeaz marcajul (tag-ul) pereche <P> care are sintaxa: <P atribute> coninut paragraf </P> Atributul align Paragrafele sunt aliniate implicit la stnga, aliniere care poate fi schimbat utiliznd atributul align care poate lua una din valorile: Left paragraful este aliniat la stnga (implicit) Right paragraful este aliniat la dreapta Center paragraful este aliniat la centru Justify paragraful este aliniat la ambele capete Pentru utilizarea acestui atribut se utilizeaz sintaxa: <P align=valoare> Ghilimelele sunt opionale n HTML, dar obligatorii n XHTML. Exemplul de mai jos adaug cteva etichete <P> fiierului ex1_2.html, redat n figura 2.1. <HTML> <HEAD> <TITLE> CERERE </TITLE> </HEAD> <P align=center> Domnule Decan <P> Subsemnata Ionescu Ana va rog sa-mi eliberati o adeverinta, din care s reias ca sunt student a facultii de Matematica-Informatica din Universitatea Bucuresti. Menionez ca aceasta adeverinta imi este necesara la R.A.T.B. <P> 05-01-2007 <P align=right> Ana Ionescu

23

Figura 2. 4. Tag-ul <P>

Din analiza exemplului din figura 2.4 se observ: Browser-ul ignor caracterele ENTER, TAB i spaiile multiple, doar primul spaiu dintr-o serie va fi luat n consideraie. Paragrafele sunt separate printr-o linie vid. Sfritul de marcaj de paragraf </P> poate s lipseasc, un nou paragraf fiind semnalat printr-un nou nceput de marcaj de paragraf <P>. Un rnd al unui paragraf are limea ferestrei afiate de browser, n lipsa altei comenzi. Eticheta <BR> Pentru a trece la o nou linie n HTML se folosete eticheta pereche <BR> (break). Dac eticheta <P> are ca efect lansarea unei linii vide ntre paragrafe, n cazul etichetei <BR> nu se las o linie vid ntre linii. Elementul &nbsp Dac nu se dorete trecerea unui cuvnt pe linia urmtoare (n cazul depirii dimensiunii ferestrei browser-ului), se folosete elementul &nbsp (non-breaking space). n cazul n care cuvntul dorit nu ncape pe o linie, se trece pe linia urmtoare i cuvntul precedent. n figura de mai jos este redat fiierul cerere.html, n care s-au utilizat etichetele <P> , <BR> i elementul &nbsp. <HTML> <HEAD> <TITLE> CERERE </TITLE> </HEAD> <BODY> <P align=center> Domnule Decan <P>

24

Subsemnata Ionescu Ana va rog sa-mi eliberati o adeverinta, din care sa reiasa ca sunt studenta a facultii de Matematica-Informatica din Universitatea Bucuresti. <BR> Menionez ca aceasta adeverinta imi este necesara la R.A.T.B.<BR> 05-01-2007 <P align=right> </BODY> </HTML> Ana&nbspIonescu

Figura 2. 5. Tag-urile <P> i <BR>

2.4. Elementul <PRE>

Dac se dorete inserarea unui bloc preformatat, adic introducerea unui text aa cum este scris n sursa HTML, se folosete marcajul pereche <PRE>, care poate aciona asupra unui grup de linii i are sintaxa: <PRE atribute></PRE> Folosind eticheta <PRE> se obine formatarea dorit, dar materialul cuprins n blocul <PRE></PRE> apare cu fontul de tip monospaiat. ntr-un font monospaiat, fiecare liter are exact aceeai lime. 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

cols determin dimensiunea pe orizontal (n caractere) a zonei vizibile; n caz n care rndul va depi aceast mrime, apare o bar de derulare pe orizontal. wrap determin cum sunt tratate caracterele CR/LF (ntreruperi de rnd). Valorile posibile sunt: off doar utilizatorul poate insera CR/LF. Aceste caractere vor fi transmise n forma %OD%OA%. soft sau virtual (valoarea prestabilit) textul este trecut vizual (i automat) de pe un rnd pe altul n interiorul elementului, dar nu vor fi transmise dect caracterele CR/LF introduse de utilizator. Hard sau physical textul este trecut vizual (i automat) de pe un rnd pe altul i sunt inserate automat secvenele CR/LF.

Pentru ca browser-ul s afieze fiierul cerere.html aa cum a fost scris, s-a introdus eticheta <PRE> n exemplul din figura 2.4. <HTML> <HEAD> <TITLE> CERERE </TITLE> </HEAD> <BODY> <P align=center> Domnule Decan </P> <PRE> Subsemnata Ionescu Ana va rog sa-mi eliberati o adeverinta, din care sa reiasa ca sunt studenta a facultii de Matematica-Informatica din Universitatea Bucuresti. Menionez ca aceasta adeverinta imi este necesara la R.A.T.B. 05-01-2007 Ana Ionescu </PRE> </BODY> </HTML>

Figura 5. 1 Figura 2. 6. Tag-ul <PRE> n fiierul cerere.html 26

Se observ din figura de mai sus fontul monospaiat folosit de PRE, n comparaie cu fontul normal folosit de <P> (la scrierea titlului) Etichetele <NOBR> i <WBR> Etichetele <NOBR> i <WBR> se folosesc la aranjarea textului i sunt asemntoare cu tag-ul <BR>, de salt la linie nou. Eticheta <NOBR> Dac se dorete ca un text s fie scris pe un singur rnd, indiferent de dimensiunea ferestrei, acesta se introduce n blocul <NOBR></NOBR> (nobreak). La ntlnirea acestei etichete browser-ul dezactiveaz modul automat de trecere pe linia urmtoare. Dac textul este mai mare dect fereastra, n cazul folosirii tag-ului <NOBR>, apare o bar de derulare orizontal, care permite vizionarea ntregului rnd. Eticheta <WBR> Pentru a introduce o linie nou, chiar dac linia se afl n interiorul lui NOBR, se folosete eticheta nepereche <WBR> (wrap break). n exemplul de mai jos se ilustreaz folosirea celor dou etichete. <HTML> <HEAD> <TITLE> NOBR i WBR </TITLE> </HEAD> <BODY> <P> <NOBR> n aceast carte se prezint limbajele <WBR> HTML (HyperText Markup Language), XHTML (Extensible HyperText Markup Language), CSS (Cascade Style Sheets), JAVASCIPT </NOBR> </P> </BODY> </HTML>

Figura 2. 7. Utilizarea elementelor NOBR i WBR

27

2.5. Linii orizontale

Pentru o mai bun organizare vizual a unui document, se folosete eticheta de rigl orizontal, <HR atribute>. Aceast etichet poate fi plasat oriunde n document i are ca efect producerea unei linii orizontale pe toat limea paginii, dac nu exist atribute. Atributele elementului HR sunt: align alinierea liniei poate avea valorile: left (implicit), right i center width lungimea liniei care se poate exprima: printr-un numr ntreg pozitiv printr-un procent, care este o fraciune din lungimea paginii i este un numr urmat de %, valoarea prestabilit fiind de 100% size reprezint grosimea liniei n pixeli, valoarea implicit fiind 2 nonshade nseamn c linia este neumbrit, n lipsa acestui atribut linia este de tip 3D i umbrit color indic culoarea dorit pentru linie. Valoarea implicit este negru (black) Un exemplul de utilizare a tag-ului HR este dat de urmtorul cod: <HTML> <HEAD> <TITLE> Linii orizontale </TITLE> </HEAD> <BODY> Acesta este o linie fr opiuni <HR> Acesta este o linie de lungime 500px, grosime 4px, culoare albast i aliniata centru <HR align=center width=500 size=4 color=blue> Acesta este o linie de lungime 50% din pagin, grosime 3px, culoare roie i aliniat la dreapta <HR align=right width=50% color=red size=3 noshade> </BODY> </HTML>

Figura 2. 8. Utilizarea liniei orizontale

28

3. Stiluri de text

n capitolul precedent s-au prezentat elementele principale ale redactrii unui document HTML. n acest capitol se vor prezenta unele elemente legate de prezentarea unui text. Utiliznd diferite stiluri fizice (caractere aldine, cursive, subliniate etc.), se pot evidenia anumite cuvinte, fraze sau alte genuri de informaii. Limbajul HTML permite s utilizm stiluri logice de text pentru a preciza o destinaie specific pentru text. De exemplu, stiluri logice pot fi considerate i elementele P i PRE, introduse n capitolul precedent. n cazul n care textul din corpul programului nu are specificat un stil, atunci textul este afiat cu ajutorul parametrilor predefinii browser-ului.

3.1. Stiluri fizice de text

Multe din stilurile fizice introduse mai jos nu mai sunt utilizate frecvent, pentru folosirea anumitor stiluri se recomand utilizarea CSS (Cascading Sheets of Styles foi n cascad). Stilurile de text pot fi imbricate, adic un marcaj pereche de stil poate fi creat i folosit n alt marcaj pereche de stil. Cele mai frecvente stiluri fizice utilizate sunt: I (cursiv) B (aldin, ngroat) TT (monospaiat) U sau INS (subliniat) S sau STRIKE BIG SMALL SUB (la indice) SUP (la putere) n continuare vor fi descrise succint aceste stiluri fizice de text. Stilul I Pentru a afia un text cu stilul italic sau cursive (nclinat), acesta se scrie ntre etichetele <I> i </I> Stilul B Pentru a afia un text cu stilul aldin sau bold (ngroat) acesta se scrie ntre etichetele <B> i </B>.
29

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>

Figura 3. 1. Stilurile: B, I, U, INS

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>

Figura 3. 2. Stilul S i Strike

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>

Figura 3. 3. Stilurile BIG si SMALL

Stilurile SUB si SUP Dac lucrm cu formulele matematice sau dac este nevoie s utilizm n paginile web indici superiori i inferiori, HTML ofer dou etichete pentru indici. Textul dintre marcaje <SUB> </SUB> va fi scris mai jos, ca un indice. Textul dintre marcaje <SUP> </SUP> va fi scris mai sus, ca o putere.
31

Elementele SUB i SUP pot fi imbricate. n exemplul urmtor se exemplific utilizarea stilurilor SUB i SUP. <HTML> <HEAD> </HEAD> <BODY> <B> <TT> <U> Teorema.</U></B> </TT> <I> Intr-un triunghi dreptunghic ipotenuza la patrat este egala cu suma patratelor catetelor</I> (I<SUP>2</SUP>=C<SUB>1</SUB><SUP>2</SUP>+ C<SUB>2</SUB><SUP>2</SUP>) <P> O formula cu indici:<BR> E=X<SUB>i</SUB> <SUP> (y<SUB>i </SUB> <SUP><small>2</small></SUP><BIG> )</BIG></SUP> </BODY> </HTML>

Figura 3. 4. Indici inferiori si superiori

3.2. Stiluri logice de text

Stilurile fizice de text, descrise n paragraful anterior, sunt uor de perceput. Limbajul HTML ofer, pe lng stilurile fizice de text, discutate n paragraful anterior, i stiluri logice de text care permit s se defineasc evidenieri ale textului. Stilurile logice sunt: P (Paragraful) PRE (text preformatat) HR (Linii orizontale) H1,H2,H3,H4,H5 si H6 (Titluri) DIV i SPAN (elemente de grupare) EM, STRONG, DFN, CITE, VAR, CODE, SAMP, KBD Blockquote i q (citate) n continuare se vor analiza succint stilurile logice. Despre primele trei stiluri logice s-a discutat n capitolul precedent.
32

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

Stilurile DIV i SPAN n HTML exist elemente: de nivel bloc, care sunt afiate la nceput de rnd nou (<P>,<HR> etc.) inline, care sunt afiate pe acelai rnd (<B>, <I>, <TT>, <FONT> etc.) Elementul DIV este un element de bloc iar elementul SPAN este un element inline. Aceste dou elemente nu impun nici un stil pentru text, spre deosebire de un element ca P (paragraph). De aceea, aceste elemente se folosesc mpreun cu limbajul CSS, pentru a ataa un stil la un text sau la o poriune dintr-un rnd (n aceast seciune vor fi exemplificate numai cu atribute independente de CSS).
33

Atributele lui Div i Span: align=valoare este acceptat numai de elementul DIV, care este un element de bloc (Span este element inline, deci nu poate avea atributul align). title=continut este acceptat de ambele elemente i impune browser-ului sa afieze coninut atunci cnd mouse-ul se afl pe un element. n exemplul de mai jos sunt exemplificate stilurile DIV i SPAN. Se observ c elementul DIV: nu produce un rnd alb nainte i dup el, aa cum produce elementul P nu las textul aa cum este scris, cum produce elementul PRE

Figura 3. 6. Stilurile DIV si SPAN

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

Figura 3.7. Elementul BLOCKQUOTE

Stiluri logice de fraz Stilurile logice de fraz permit s se adauge un neles specific unui font dintr-un document i sunt implementate i afiate diferit de ctre browser-e. n continuare descriem succint cele mai importante dintre aceste elemente: <EM></EM> pentru evideniere i afieaz textul cursiv (o alt modalitate de a scrie italic) <STRONG> </STRONG> pentru evideniere i afieaz textul aldin (o alt modalitate de a scrie bold) <DFN> </DFN> evideniaz prima apariie a unui concept, o definiie <CITE> </CITE> pentru inserarea unei referine la un document; textul este afiat aldin <CODE> </CODE> pentru inserarea unui cod de program; textul scris cu font monospaiat <VAR> </VAR> pentru inserarea unor variabile ntr-un program; textul este scris cursiv <SAMP> </SAMP> pentru inserarea datelor de ieire a unei operaii; afiat ca font monospaiat <KBD> </KBD> pentru inserarea unei comenzi de calculator; afiat ca font monospaiat Exemplul urmtor utilizeaz cteva din stilurile logice introduse mai sus. <HTML> <HEAD> </HEAD> <BODY> <DFN > CSS inseamna CASCADING STYLE SHEETS </DFN><BR> <EM> JavaScript este limbaj de scriptare </EM> <BR> Timpul si Data se afla tastind sub prompter comenzile <KBD> Time si Data </KBD><BR>
35

Se va primi raspuns de forma: <SAMP> Data curenta este: 10-01-07 </SAMP> <BR> O functie JavaScript: <CODE> function complex (a,b) { this.real=a; this.imag=b} </CODE> <BR> Variabilele: <VAR> a si b </VAR> se transmit prin referinta </BR> Pentru mai multe informatii vizitati <CITE> www.w3.org</CITE><BR> <STRONG> Succes </STRONG> </BODY> </HTML>

Figura 3. 8. Stiluri logice de fraz

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

implicit. Este indicat s se foloseasc ghilimele ( ) pentru a scrie lista de fonturi, deoarece unele nume sunt compuse din mai multe cuvinte. <FONT face=Arial, Chicago> Fonturi simple</FONT> <FONT face=Arial Narrow, Helvetica Narrow, New Courier> Fonturi compuse </FONT> size indic dimensiunea fontului i are sintaxa size=dimensiunea. Dimensiunea se poate exprima n dou moduri: absolut, unde dimensiunea este un numr ntreg cuprins ntre 1 i 7, 1 fiind cea mai mic dimensiune i 7 cea mai mare dimensiune, valoarea implicit fiind 3. Se observ c dimensiunea se exprim invers fa de numrarea dimensiunii subtitlurilor, unde <H1> este cel mai mare, iar <H6> este cel mai mic relativ, unde dimensiunea unui anumit text (liter, cuvnt, fraz) este mrit cu o unitate fa de textul din jurul lui; valori posibile: +1,+2,+7 si -1,-2,..,-7. Modificrile relative nu pot reduce fontul sub size=1 sau peste size=7. De exemplu, dac la dimensiunea implicit 3 se adaug 7 prin <font size=+7>, efectul este acelai dac utilizm <font size=7> sau <font size=+4> color indic culoarea pentru un text specificat i are sintaxa: color=culoare. Culoarea poate fi exprimat n dou moduri : modul text unde valoarea culoare este un nume. Exist o varietate de culori dintre care 16 sunt culori standard, implementate de toate browser-ele: aqua (verde marin), black (negru), blue (albastru), fuchsia (violet deschis), gray (gri), green (verde), lime (citron), maroon (maro), navy (bleumarin), olive (cachi), purple (violet), red (rou), silver (argintiu), teal (verde nchis), white (alb) si yellow (galben). modul RGB unde valoarea culorii este dat printr-un numr format din 6 cifre hexazecimale, cte dou pentru fiecare culoare de baz din tripletul red (rou), green (verde) i blue (albastru) i este precedat de caracterul #. n anexa A se gsete lista complet a culorilor, date prin nume i prin codul lor. Pentru cele mai folosite culori avem codurile: Black #000000 White #FFFFFF Red #FF0000 Green #00FF00 Blue #0000FF Elementul Basefont

Pentru a schimba fontul, chiar de la nceputul paginii, se poate folosi tag-ul <BASEFONT atribute> care are aceleai atribute ca i tag-ul <FONT>. Aceast etichet formateaz textul conform atributelor specificate, din locul unde apare i pn la sfritul documentului i deci nu necesit eticheta de nchidere. n
37

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

De multe ori avem nevoie s introducem n pagini web secvene de enunuri sau articole, numite liste. n HTML exist urmtoarele tipuri de liste: numerotate sau ordonate neordonate sau marcate de definiii De exemplu, putem crea liste de cele trei tipuri pentru unele comenzi de editare din word: 1. cut 2. copy 3. paste 4. find 5. delete Liste Ordonate Liste Marcate cut copy paste find delete Cut Decupeaz un text Copy Copiaz un text Paste Lipete un text Find Caut un text Delete terge un text Liste de Definiii

Toate tipurile de liste: Pot conine un antet, care se scrie ntre marcajul de list i primul element din list Pot fi imbricate (nested lists), una n interiorul alteia Sunt indentate cu cteva spaii spre dreapta i au un rnd liber naintea lor

4.1. Liste ordonate (Ordered lists)

Elementul OL Lista ordonat are toate articolele numerotate, browser-ul fiind acela care atribuie automat secvena. Pentru a crea o list ordonat se folosete tag-ul pereche <OL > </OL>. Elementul OL este element de bloc i va fi afiat la nceputul rndului.
39

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: type care are ca valoare un caracter care indic modul de numerotare. Exist cinci valori posibile: - 1 pentru cifre arabe: 1,2,3 etc i este valoare implicit - a pentru literele mici : a,b,c etc. - A pentru litere mari: A,B,C etc. - i pentru cifre romane scrise cu litere mici: i, ii, iii, iv etc. - I pentru litere romane scrise cu litere mari: I, II, III, IV start indic de unde ncepe numerotarea. Primul simbol dintr-o list ordonat este: 1, a, A, i sau I. Urmtorul exemplu creeaz o list ordonat pentru exemplu de mai sus: <HTML> <HEAD> </HEAD> <OL>LISTE ORDONTE <LI> COPY <LI> CUT <LI> PASTE <LI> FIND <LI> DELETE <LI> REPLACE </OL> <BODY> </HTML>
Figura 4. 1. Liste ordonate

n exemplul urmtor se creeaz liste ordonate imbricate: <HTML> <HEAD> </HEAD> <BODY><B>LISTE ORDONTE IMBRICATE </B> <OL> PRINCIPALELE COMENZI DIN MENU FORMAT: <LI> FONT <OL type="A" >MENU FONT ARE TREI ETICHETE <LI > Font are trei caracteristici <OL type="a"> <LI> Font <LI> Font style <LI> Size </OL> <LI> Character Spacing <LI> Text Effects </OL>
40

<LI> PARAGRAPH <LI> BULLETS AND NUMBERING <LI>COLUMNS </OL> <BODY></HTML>

Figura 4. 2. Liste ordonate imbricate

4.2. Liste neordonate (Unordered Lists)

Listele marcate sau neordonate sunt cele mai utilizate. Pentru a crea o list neordonat se folosesc tag-urile <UL> i </UL>. Fiecare element al listei este definit ca i la listele ordonate prin marcajul <LI>. n faa fiecrui articol al listei, browser-ul insereaz un simbol, implicit un disc () . Singurul atribut al listei marcate este type=valoare, unde valoare poate fi: disc (), care este o valoare implicit circle () square () Un exemplu de list neordonat este redat mai jos: <HTML> <HEAD> </HEAD> <BODY><B> LISTE NEORDONATE </B> <UL> <B> Atributele elementului FONT in HTML: </B> <LI> FACE <LI> SIZE <LI> COLOR </UL> <BODY> </HTML>
41

Figura 4. 3. Liste marcate

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>

Figura 4. 4. Lista vid

Listele neordonate, ca toate tipurile de liste, pot fi imbricate (a doua list constituie un articol al primei liste), aa cum se poate observa n exemplul urmtor.
42

<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 Din analiza exemplului de mai sus reiese c: listele imbricate sunt dublu indentate fiecare list este marcat cu alt simbol, dac nu se d o alt opiune; pentru lista PASTE, att ea, ct i sublista ei au ca marcaj discul, deoarece n sublist s-a optat pentru acesta.

Pot fi imbricate diferite tipuri de liste, de exemplu, o list ordonat cu o list neordonat ca n exemplul de mai jos.

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

<LI type="circle"> size <LI> color </UL> <LI value=5>BASEFONT <UL type="circle"> Atribute <LI type="square"> face <LI> size <LI type="disc"> color </UL> <LI value=7> OL <UL type="square"> <LI> type <LI type="circle"> start </UL> <BODY> </HTML>
Figura 4. 7. Atributele elementului Li

4.3. Liste de definiii (Definition Lists)

O list de definiii este o secven de descrieri, referine sau indexuri, glosarele fiind exemple clasice n acest sens. ntr-o astfel de list cuvintele sunt listate n ordine alfabetic, urmate de definiii ale lor. n HTML o list de definiii este inclus ntre perechea de taguri <DL> i </DL>. ntre aceste marcaje, o definiie se compune din dou pri: Termenul descris (definit) utiliznd tag-ul <DT> Descrierea (definiia) termenului, utiliznd tag-ul <DD> Browser-ul afieaz termenii i definiiile lor pe cte un rnd i indenteaz definiiile. Dac se dorete s se economiseasc spaii se folosete atributul compact al tag-ului <DL>, caz n care definiia va ncepe pe acelai rnd cu termenul pe care l definete. De exemplu, dac dorim s afim orarul unei firme, putem crea o list de definiii, ca n exemplul de mai jos. <HTML> <HEAD> </HEAD> <BODY> <DL>ORAR <DT>LUNI <DD>10-18 <DT>MARTI

45

<DT>MIERCURI <DD>9-17 <DT>JOI <DD>9-13 <DD>15-19 <DT>VINERI <DD>9-14 </DL> </BODY> </HTML>

Figura 4. 8. List de definiii

Dac n exemplul de mai sus se modific tag-ul <DL> cu <DL compact>, browser-ul va alinia definiia pe acelai rnd cu termenul asociat. <HTML> <HEAD> </HEAD> <BODY> <DL compact> ORAR <DT>LUNI <DD>10-18 <DT>MARTI <DT>MIER <DD>9-17 <DT>JOI <DD>9-13 <DD>15-19 <DT>VINERI <DD>9-14 </DL> </BODY> </HTML>
Figura 4. 9. List de definiii compactat

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.

n exemplul de mai jos sunt definite trei tabele: cu 2 linii i 3 coloane, cu o linie i respectiv cu o coloan. <HTML><HEAD> </HEAD> <BODY> <H4 align="center">Exemple de Tabele</H4>
47

<!- cu si fara marcaj de inchidere --> <B> Tabel cu 2 linii si trei coloane</B> <TABLE> <tr><td>a11</td><td>a12</td><td>a13</td></tr> <tr> <td>a21</td><td>a22</td><td>a23</td></tr> </TABLE> <b> Tabel cu o linie </b><br> Posturi de televiziune din programul de baza <TABLE border=0> <tr><td>TVR1 <td> TVR2<td> ANTENA1<td> PROTV <td> REALITATEA </TABLE> <B>Tabel cu o coloana</B> <TABLE > <tr><td>TVR1 <tr><td>TVR2 <tr><td>ANTENA1 <tr><td>PROTV <tr><td>REALITATEA </TABLE> </BODY> </HTML>

Figura 5. 1. Tabele

Din figura de mai sus rezult c un tabel este afiat implicit fr chenar i caroiaj aliniat la stnga i de la rnd nou Att tabelele, ct i liniile i celulele au atribute care le schimb proprietile standard (de aliniere, de dimensiune, de culoare etc.)

5.2. Atributele etichetei <TABLE>

Un tabel poate fi formatat, utiliznd urmtoarele atribute: border, bordercolor, frame, rules, width, height, align, cellspacing, cellpadding, hspace, vspace, bgcolor. n continuare vom descrie, pe scurt, aceste atribute. Atributul BORDER Aa cum am mai precizat, un tabel este afiat implicit fr bordur i caroiaj interior. O bordur pentru un tabel poate fi introdus prin atributul border=valoare, unde valoare reprezint grosimea n pixeli a liniei de contur a tabelului.
48

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 Dac n exemplul din figura 5.1 adugm atributul border la eticheta <TABLE border> va aprea o linie de contur de grosime 1 <TABLE border=0> tabelul nu va avea contur <TABLE border=5> tabelul va avea un contur de grosime 5 aa cum reiese din figura 5.2.

Figura 5. 2. Atributul border al elementului <TABLE>

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

Figura 5. 3. Atributul bordercolor

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: void elimin liniile exterioare above afieaz o linie deasupra a11 a21 a11 a21 a12 a22 a12 a22

below afieaz o linie sub tabel

a11 a12 a21 a22 a11 a12 a21 a22 a11 a12 a21 a22 a11 a12 a21 a22 a11 a12 a21 a22 a11 a12 a21 a22

hside afieaz linii n partea superioar i inferioar

lhs afieaz o linie la stnga rhs afieaz o linie la dreapta vside afieaz linii la dreapta i la stnga

50

box afieaz un contur pe toate laturile

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

groups afieaz liniile orizontale ntre toate grupurile din tabel : THEAD, TBODY, TFOOT i COLGROUP rows afieaz muchiile orizontale ntre linii cols afieaz muchii verticale ntre coloane a11 a21 a11 a21 a11 a21 a12 a22 a12 a22 a12 a22

all afieaz muchii ntre linii i ntre coloane 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>

Figura 5. 4. Alinierea tabelelor

Atributele WIDTH i HEIGHT Aceste atribute stabilesc limea (width) i nlimea (height) unui tabel. Valorile posibile ale acestor atribute pot fi date: n numere, reprezentnd limea i nlimea unui tabel n pixeli n procente fa de limea i nlimea ferestrei browser-ului Un exemplu de dimensionare a unui tabel este dat mai jos: <HTML> <HEAD> </HEAD> <BODY> <TABLE border=5 bordercolor=blue align=center width=50% height=100%> <TR><TD>a11<TD>a12 <TR><TD>a21<TD>a22 </TABLE> </BODY> </HTML>

52

Figura 5. 5. Atributele width i height

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

Atributele HSPACE i VSPACE Aceste atribute asigur distana de la tabel la celelalte componente din pagin, pe orizontal (hspace) i pe vertical (vspace). Aceste atribute nu sunt valabile n Internet Explorer. Valorile acestor atribute sunt date n pixeli. Pentru exemplificare s-a folosit browser-ul MozillaFirefox: <HTML> <HEAD> </HEAD> <BODY> Acesta este un text inaintea tabelului. Acesta este un text inaintea tabelului. Acesta este un text inaintea tabelului. Acesta este un text inaintea tabelului. Acesta este un text inaintea tabelului. <TABLE border=2 bordercolor=red hspace="50" vspace="30"> <TR><TD>a11<TD>a12<TD>a13 <TR><TD>a21<TD>a22<TD>a23 <TR><TD>a31<TD>a32<TD>a33 </TABLE> Acesta este un text dupa tabel. Tabelul de mai jos va avea spatii albe in jurul lui. Acesta este un text dupa tabel. Tabelul de mai jos va avea spatii albe in jurul lui. Acesta este un text dupa tabel. Tabelul de mai jos va avea spatii albe in jurul lui. </BODY> </HTML>

Figura 5. 7. Atributele hspace i vspace

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

urmtoarea: a elementului <TD>, a elementului <TR> i, n final, a elementului <TABLE>.

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

5.2.2. Elementul CAPTION

Pentru a aduga un nume unui tabel se folosesc tag-urile <CAPTION> i </CAPTION>, care trebuie s se gseasc imediat dup <TABLE>. Elementul CAPTION are un singur atribut, align, care precizeaz alinierea titlului fa de tabel i poate avea valorile: top (implicit), bottom, left i right astfel:
55

n exemplul de mai sus adugm o etichet tabelului <HTML> <HRAD></HEAD> <BODY> <TABLE border align=center cellspacing=2 bgcolor=yellow vspace=70> <CAPTION align=bottom> <b> Vanzari </b></CAPTION > <TR> <TH> Beneficii 2005 <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.9. Elementul Caption

5.3. Atributele elementului TR

Aa cum s-a precizat i la nceputul capitolului, elementul TR descrie liniile unui tabel. S-a precizat de asemenea c eticheta <TR> poate s nu aib perechea de nchidere </TR>, descrierea unei linii terminndu-se cnd se ntlnete un nou element <TR>. Atributele elementului TR schimb parametrii predestinai de descriere a liniilor unui tabel, aa cum atributele elementului TABLE schimb aspectul de afiare a unui tabel. Atributele elementului TR se scriu n eticheta <TR atribute> i sunt:
56

align aliniaz orizontal coninutul tuturor celulelor unei linii. Valorile posibile sunt: left (aliniere implicit), right, center sau justify valign specific alinierea pe vertical pentru toate celulele dintr-o linie. Valorile posibile sunt: top (implicit), middle (centru) i bottom (jos) bgcolor culoare de fond pentru toate celulele unei linii. Are aceleai valori ca i atributul bgcolor pentru TABLE

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>

Figura 5. 10. Atributele elementului TR

57

5.4. Atributele elementelor TD i TH

Elementele TD i TH descriu celulele unui tabel. Diferena dintre aceste elemente este aceea c, n cazul utilizrii elementului TH, coninutul celulei, dac acesta este text, este scris aldin. Atributele de celul se scriu n eticheta <TD atribut>, sunt prioritare celor de linie (TR) i celor de tabele (TABLE) i sunt: Atributele WIDTH i HEIGHT Aceti parametrii indic limea (width) i nlimea (height) unei celule, dar au efect i pentru celelalte celule, pentru ca tabelul s fie aliniat (s aib forma dreptunghiular). Valorile acestor parametrii se pot da n numere ntregi pozitive ce reprezint limea, respectiv nlimea celulei n pixeli, sau n procente. De exemplu: <HTML><HRAD></HEAD><BODY> <TABLE width="75%" height="50%" border="5" bordercolor=maro> <TR> <TD width="75%"> prescurtarea textului HyperText Markup Language <TD width="25%">HTML <TR> <TD> Limbaj <TD> Sigla </TABLE> </BODY></HTML>

Figura 5. 11. Atributele WIDTH i HEIGHT

58

Atributele align i valign Aceste atribute stabilesc alinierea pe orizontal (align) i pe vertical (valign) a textului dintr-o celul. Au aceleai valori ca i atributele cu aceleai nume de la nivel de linie i tabel, dar sunt prioritare fa de alinierea la nivel de linie i de tabel. Atributele COLSPAN i ROWSPAN Un tabel este un caroiaj n form dreptunghiular, format din linii i coloane. Coninutul unei celule poate s se extind pe mai multe uniti de tabel (celule) adiacente, dac este nevoie s adugm, de exemplu, antete pentru tabel. COLSPAN=nr insereaz n dreapta celulei un numr de nr-1 celule al cror coninut este vid sau poate conine valoarea celulei care are acest parametru. ROWSPAN=nr insereaz pe nr-1 linii de pe aceeai coloan cte o celul a crei coninut este vid sau poate conine valoarea celulei care are acest parametru. n exemplul din figura de mai jos, introducem aceste atribute <html> <head></head><body> <table border bordercolor="#00FF00"> <TR><TD>a11<TD>a12<TD>a13 <TR><TD>a21<TD>a22 <TR><TD>a31<TD>a32<TD>a33 </table> </body></html> Dac celula 2 din linia a doua conine atributul colspan=2 nseamn c se va insera n linia a 2 o celul vid (2-1), ceea ce va face ca tabelul s se redimensioneze la 3 linii i 4 coloane pentru a pstra forma dreptunghiular. <HTML><HEAD></HEAD> <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> Dac se renun la o celul din linia a doua i coninutul celulei 22 se aliniaz la centru, se va nltura inconvenientul redimensionrii tabelului. <HTML> <HEAD></HEAD>
59

<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>

Figura 5. 13. Atributul ROWSPAN

La adugarea celulelor vide, browser-ele nu afieaz cadre la aceste celule. Pentru a nltura acest neajuns se folosete secvena &nbsp (non-breaking space). n exemplul de mai sus putem evidenia acest lucru modificnd etichetele <TD>

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>&nbsp<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>

Figura 5. 15 Atributele colspan i rowspan

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>

Figura 5. 16. Atributul NOWRAP al elementului TD sau TH

5.5. Gruparea liniilor i coloanelor unui tabel 5.5.1. Gruparea liniilor

Liniile unui tabel pot fi mprite n 3 categorii i anume: Linii de antet Linii de corp Linii de final Astfel, coninutul unui tabel se mparte n 3 seciuni cuprinse ntre etichetele: <THEAD> ... </THEAD> marcheaz liniile de antet <TFOOT </TFOOT> marcheaz liniile de final de tabel <TBODY> ... </TBODY> marcheaz liniile din corpul tabelului OBSERVAII! aceste blocuri sunt incluse n blocul <TABLE> ... </TABLE>, dar nu sunt obligatorii n realizarea unui tabel

62

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>

n exemplul din figura 5.9, se grupeaz liniile n blocuri de antet, subsol i corp de tabel: <HTML><HEAD></HEAD><BODY> <TABLE border=3 bordercolor=light align=center cellspacing=2 bgcolor=yellow vspace=70> <CAPTION align=bottom> <B> Vnzri </B></CAPTION> <THEAD> <TR> <TH colspan=3>Beneficiul pe anul 2006 <TR><TH>Judet <TH> Semestrul I<TH> Semestrul II </THEAD> <TFOOT> <TR><TH> TOTAL<TD> 30000 ron<TD> 55000 ron </TFOOT> <TBODY> <TR<TH> Bucuresti <TD> 10000 ron<TD> 25000 ron <TR><TH>Iasi <TD> 20000 ron <TD> 30000 ron </TBODY> </TABLE> </BODY> </HTML>
63

Figura 5. 17. Gruparea liniilor

5.5.2. Gruparea coloanelor

Pentru a formata coloanele unui tabel (formatarea liniilor se poate face cu ajutorul atributelor lui TR sau TD, aa cum s-a artat mai sus), acestea se pot grupa cu ajutorul elementului <COLGROUP> </COLGROUP>. n blocul <COLGROUP> </COLGROUP> se introduc elemente <COL> care definesc fiecare coloan din grup. Aceste elemente au atributele: align indic alinierea pe orizontal a coninutului coloanelor grupate i poate avea valorile: left (implicit), right, center i justify span indic numrul coloanelor care se grupeaz valign indic alinierea pe vertical a coninutului coloanelor grupate i poate avea valorile: top, middle i bottom width indic limea coloanelor i poate avea ca valori procente sau numere care indic numrul de pixeli bgcolor indic culoarea de fond a coloanelor grupate NOT! Nu este necesar eticheta <COL> n cazul n care nu se grupeaz mai multe coloane, atributele de formatare pentru o coloan se pot da n eticheta <COLGROUP>. n exemplul de mai jos se observ gruparea coloanelor n vederea formatrii: primele dou coloane au aceeai formatare (span=2): grosimea 200, centrat pe mijloc att pe orizontal, ct i pe vertical, fundal galben

a treia coloan va avea alinierea pe vertical top, pe orizontal la dreapta i fundalul cyan
64

<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>

Figura 5. 18. Elementul COLGROUP

65

6. Imagini

n capitolele precedente s-au prezentat elementele de baz pentru realizarea paginilor Web. n acest capitol se descrie cum s mpodobim paginile cu imagini grafice sugestive. Aceste imagini pot fi preluate din reeaua Internet, pot fi desene realizate cu diverse programe grafice sau pot fi fotografii scanate. Imaginile pot folosi chiar ca referine hipertext, aa cum se va arta n capitolul urmtor. Imaginile pot fi descrcate de la adrese absolute sau relative. Adresele URL (Uniform Resource Locator) reprezint standarde de identificare a resurselor (de exemplu, fiiere) i pot fi adrese URL absolute i relative. Adrese URL absolute Adresele absolute identific locaia unui fiier imagine de pe Internet sau alte calculatoare conectate la Internet i au sintaxa: protocol/nume_calculator/cale/nume_fiier Un exemplu de adres URL absolut: http://www.spiruharet.ro/images/universitatea.jpg unde htpp:// este protocolul Internet utilizat www.spiruharet.ro este numele calculatorului images este calea pn la fiierul imagine dorit universitatea.jpg este fiierul imagine a Universitii Spiru Haret Adrese URL relative O adres relativ identific locaia unei imagini, descriind o cale relativ la directorul curent unde se afl fiierul imagine. Adresele relative se refer la localizarea fiierului imagine de pe calculatorul personal i are sintaxa: cale/nume_fiier . Referirea la: directorul printe se poate face prin ../ directorul rdcin se poate face prin / Un exemplu de adres URL relativ: /../../../friend.jpg sau se mai poate scrie c:/windows/web/wallpaper/friend.jpg
66

Exemple de utilizare a adreselor URL absolute i relative vor fi date n exemplele urmtoare. Exist numeroase formate grafice, dar cele mai rspndite sunt: GIF (Graphics Interchange Format) introdus de Compuserve JPEG (Joint Photographic Expert Group) PNG (Portable Network Graphic Format Grafic portabil n reea) Aceste formate sunt dependente de platform. Imaginile grafice sunt construite din pixeli, care sunt puncte distincte de informaie de imagine. Fiecare pixel necesit un bit de culoare. Principalele caracteristici ale formatelor de imagine sunt: numrul de culori, compresia, transparena, ntreeserea i animaia. Asemnrile i deosebirile dintre cele trei formate grafice sunt: Imaginile GIF pot utiliza doar 256 de culori, avnd nevoie de 8 bii, n timp ce formatele JPEG i PNG pot utiliza milioane de culori, avnd 24 de bii de culoare, respectiv 32 de bii /pixeli de culoare. Ceea ce face formatul GIF att de utilizat nu este numai paleta mic de culori (256), dar i posibilitatea reducerii numrului de culori, astfel, dac este nevoie doar de 2 culori, se utilizeaz numai un bit, ceea ce reduce dimensiunea fiierului de 8 ori. Toate aceste trei formate grafice pot comprima imaginea pentru a reduce dimensiunile fiierelor. Comprimarea se poate face, n mod diferit, pentru fiecare format, i, din aceste motive, ele pot avea dimensiuni mai mici ntr-un format dect n altul. Formatele GIF i PNG admit culoarea transparent, n timp ce formatul JPEG nu admite transparena. Formatele GIF i PNG admit animaia, n timp ce, cu formatul JPEG, nu se poate obine animaie. De exemplu, pentru a obine animaie pentru imagini GIF se poate folosi pentru Windows pachetul GIF Construction Set, iar pentru Macintosh pachetul soft GIFBuilder. Toate cele trei formate accept ntreeserea. De exemplu, cnd se vizualizeaz o pagin web, se pot observa imaginile care apar linie cu linie, de la forma brut pn la redarea final, aceasta reprezint ntreeserea. Dei dimensiunea fiierelor crete cu pn la 10%, cu ajutorul acestei ntreeseri, vizitatorul poate s-i fac o imagine despre ceea ce se va descrca. Avnd n vedere cele cinci caracteristici ale formatelor de imagine, acestea pot fi recomandate: GIF pentru majoritatea imaginilor din web, butoane, panouri publicitare, desene etc., datorit dimensiunii mici a fiierelor. JPEG pentru fotografii, cnd se dorete s se redea ct mai exact culoarea real a imaginii. PNG pentru desene complexe, dar i pentru fotografii, acesta fiind formatul care mbin caracteristicile celor dou.

67

Unele imagini pot fi transformate n format GIF cu ajutorul unor programe freeware (gratuite) sau shareware (contra cost), dar calculatoarele moderne accept salvarea imaginilor direct n format GIF.

6.1. Introducerea imaginilor n paginile Web

Imaginile se introduc n pagini cu ajutorul tag-ului <IMG>, care este un element inline, adic poate fi inserat oriunde n pagin. Sintaxa acestui element este: <IMG atribute> . n continuare este prezentat un exemplu de utilizare a elementului IMG: <HTML> <HEAD></HEAD> <BODY> Hotelul TRUMP Taj Mahal <IMG src="Taj_Mahal.jpg" height =150 width = 150 border=4> de la Atlantic City <BODY> <HTML>

Figura 6. 1. Atributul src al elementului IMG

Pentru ca acest exemplu s poat fi executat, trebuie ca fiierul Taj_Mahal.jpg s fie n acelai folder cu pagina, deoarece nu s-a indicat nicio adres.

6.2. Atributele Elementului IMG

Atributele elementului IMG sunt: src, alt, align, border, height, width, hspace, vspace. n continuare vor fi descrise succint aceste atribute. Atributul SRC Atributul src este un atribut obligatoriu al elementului IMG, care identific fiierul ce conine imaginea care se dorete a fi inserat. Fiierele imagine pot avea
68

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>

Figura 6. 2. Atributul alt al elementului IMG

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

top textul este plasat n partea superioar a imaginii middle textul are plasat, la mijlocul imaginii, numai primul rnd, restul continund sub imagine bottom textul este plasat n partea de jos a imaginii i continu sub imagine

n exemplul urmtor se poate vedea modul de aliniere a imaginii ntr-o pagin: <HTML> <HEAD> </HEAD> <BODY> <H2 align=center> Alinieri Imagini </H2> <PRE> Aliniere Bottom </PRE> <IMG src="Taj_Mahal.jpg" height =100 width = 100 align="bottom"> Aceasta este o imagine aliniata <I>bottom </I> care este alinierea implicita pe verticala. Numai primul rind este aliniat bottom restul textului este sub imagine <PRE> Aliniere Top </PRE> <IMG src="Taj_Mahal.jpg" height =100 width = 100 align="top"> Aceasta este o imagine aliniata <I>Top </I, care este alinierea <I> sus</I> pe verticala. Numai primul rind este aliniat <I>Top </I> restul textului este sub imagine <PRE> Aliniere Middle </PRE> <IMG src="Taj_Mahal.jpg" height =100 width = 100 align="middle"> Aceasta este o imagine aliniata <I>Middle</I> care este alinierea <i>pe centru </i> pe verticala. Numai primul rind este aliniat <I>Middle </I> restul textului este sub imagine <PRE> Aliniere Left </PRE> <IMG src="Taj_Mahal.jpg" height =100 width = 100 align="left"> Aceasta este o imagine aliniata <I> Left </I> care este alinierea <i>stinga</i> pe orizontala. <p> Textul curge pe linga poza in dreapta ei <PRE> Aliniere Right </PRE> <IMG src="Taj_Mahal.jpg" height =100 width = 100 align="right"> Aceasta este o imagine aliniata <I>Right </i> care este alinierea <i>dreapta</i> pe orizontala. <p> Textul curge pe linga poza in stinga ei </BODY> </HTML>

70

Figura 6. 3. Atributul align al elementului IMG 71

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:

Figura 6. 4. Atributul border al elementului IMG

Atributele width i height Imaginea este transferat de browser-e de la adresele URL la adresa de unde se vizualizeaz pagina, la dimensiunile ei reale. Pentru a redimensiona o imagine pe lime se folosete atributul width, iar pe nlime se folosete atributul height. Redimensionarea unei imagini se face n mod absolut n pixeli sau prin raportare la ecran, astfel c valorile acestor atribute pot fi date n: Numere naturale, ce reprezint dimensiunea n pixeli n procente, ce reprezint o fraciune din dimensiunea ferestrei OBSERVAII! Dac se modific doar o dimensiune, imaginea va fi afiat de browser proporional. Dac se modific ambele dimensiuni, imaginea va fi afiat de browser deformat Un exemplu de redimensionare a imaginii este dat mai jos. <HTML> <HEAD></HEAD> <BODY> <IMG src="c:/carte_web/UnivSH.jpg" alt="Universitatea Spiru Haret">

72

<IMG src="c:/carte_web/UnivSH.jpg" alt="Universitatea Spiru Haret" width=80 height=200> <IMG src="c:/carte_web/UnivSH.jpg" alt="Universitatea Spiru Haret" height=150> </BODY> </HTML>

Figura 6. 5. Atributele width i height ale elementului IMG

Atributele hspace i vspace Aceste atribute au acelai efect ca i atributele cu acelai nume ale elementului TABLE, i, anume, asigur distana de la imagine la celelalte componente din pagin, pe orizontal (hspace) i pe vertical (vspace), adic definesc spaii albe n jurul imaginilor. Un exemplu n care sunt folosite aceste atribute este dat mai jos. <HTML><HEAD></HEAD> <BODY> Aceasta este sigla Universitatii Bucuresti. La pagina web www.unibuc.ro veti afla detalii <BR> <IMG src="C:/CARTE_WEB/UB_ro.jpg" width=300 hight=100 hspace=50 vspace=20 align=right> n cei aproape 140 de ani de existen, ea a ajuns s aib un solid prestigiu naional i internaional. <BR> Din trecutul UB nfiinat prin Decretul nr. 756 din 4 / 16 iulie 1864 al Domnitorului Alexandru Ioan Cuza i reclamndu-se ca succesoare a structurilor de nvmnt superior inaugurate de Academia Domneasc (1694), Universitatea din Bucureti a contribuit i
73

contribuie n mod decisiv la dezvoltarea i modernizarea nvmntului, tiinei i culturii romneti. </BODY> </HTML>

Figura 6. 6. Atributele hspace i vspace ale elementului IMG

Atributul clear al elementului BR Dac se dorete a se terge textul din jurul unei imagini se folosete elementul <BR clear=valoare>, unde valoare poate fi: all se terge tot textul din jurul imaginii left se terge tot textul din stnga imaginii right se terge tot textul din dreapta imaginii none se las textul din jurul imaginii n exemplul de mai sus se adaug <BR clear=right>, dup elementul IMG

Figura 6. 7. Atributul clear al elementului BR 74

7. Legturi (Link-uri)

Spaiul World Wide Web (www) a fost creat ca un spaiu de resurse multimedia, stocate pe servere plasate n ntreaga lume i conectate la cea mai mare reea de calculatoare publice din lume, Internet. Pn acum am nvat s crem documente HTML n care am introdus text i imagini. n acest capitol vom arta cum putem accesa orice resurs Web, Internet i intern cu ajutorul legturilor (link-uri). n HTML link-urile se mai numesc i referine sau hiperlegturi. Hiperlegturile au urmtoarele roluri: permit trecerea de la o pagin la alta de pe Web i revenire la pagina iniial prin apsarea butonului Back al browser-ului permit trecerea de la o pagin la alta de pe calculatorul propriu permit trecerea la fiiere non web de pe Internet (ftp, telnet etc.) permit trecerea la fiiere non HTML (.txt, .jpg, .pdf etc.) permit vizitarea unei pagini ncepnd dintr-un anumit loc, renunnd la barele de defilare permit trimiterea unui e-mail Cnd se execut o hiperlegtur, cu ajutorul mouse-ului (clic cu butonul stng pe legtur) sau de la tastatur (se apas ENTER), se execut urmtorul flux de evenimente: browser-ul identific adresa URL a resursei cerute browser-ul trimite o cerere ctre server-ul care gzduiete resursa cerut server-ul Web analizeaz cererea, identific locaia resursei cerute i trimite napoi browser-ului client, resursa solicitat

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

target=nume, unde nume definete fereastra n care va fi ncrcat noua pagin. Dac nu exist nicio fereastr cu acest nume, va fi creat o fereastr nou cu acest nume. Numele este orice ir de caractere sau valori constante: self-implicit, blank, parent, top. Pot fi ncrcate n aceeai fereastr mai multe pagini i, n acest caz, cu Back i Forward, se vizualizeaz paginile ncrcate. n exemplul din figurile 7.3 i 7.9, se utilizeaz acest atribut. Atributul TITLE Acest atribut are un caracter general i poate fi ataat la majoritatea elementelor HTML. Sintaxa acestui element este: title=valoare. Cnd mouse-ul este deasupra coninutului elementului <A> coninut </A> se transform ntr-o mn i va afia valoarea atributului TITLE, ntr-o sugestie de instrument (ntr-un cadru galben). Atributul NAME Acest atribut este utilizat pentru a defini o ancor n interiorul unei pagini. Sintaxa acestui atribut este: name=valoare. Atributul va fi exemplificat n seciunea 7.7.

7.2. Legturi ctre alte pagini Web

Dac se dorete accesarea unei pagini de pe alt site, valoarea atributului href este o adres URL absolut. Amintim c o adresa URL absolut are sintaxa: protocol /nume-calculator/cale/fiier unde protocol poate fi, de exemplu, http. Un exemplu este dat mai jos

<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

Acelai rezultat obinem i dac scriem i numele fiierului index care se ncarc <A href=http://www.edu.ro/index .php> MEC </A>
77

Dac se dorete s se viziteze alt pagin a respectivului site, se scrie numele fiierului .html, respectiv, ca n exemplul de mai jos: <HTML> <HEAD> </HEAD> <BODY> <A href="http://www.edu.ro/index.php/articles/c108/" target="univ"> Lista Universitati </A> <BR> <A href="http://www.edu.ro/index.php/articles/c487/" target="univ"> Lista Universitati Stat </A> <BR> <A href="http://www.edu.ro/index.php/articles/3880" target="univ"> Lista Universitati Particulare Acreditate </A><BR> <A href="http://www.edu.ro/index.php/articles/3882" target="univ"> Lista Universitati Particulare Autorizate </A><BR> <A href= "http://www.edu.ro/index.php/articles/3881" target="univ"> Lista Postuniversitare </A><BR> </BODY> </HTML>

Figura 7. 3. Legturi la pagini cu atributul target

7.3. Legturi cu imagini

Aa cum am specificat mai sus, o legtur poate fi creat i cu ajutorul unei imagini. Ca i n cazul n care coninutul unei legturi este un text, i n cazul n care coninutul este o imagine, accesarea paginii se face cu un clic, sau un ENTER pe imagine. Utilizarea unei imagini ntr-o legtur este exemplificat mai jos: <HTML> <HEAD> <TITLE> Legaturi cu imagini </TITLE> </HEAD> <BODY> Facultatea de Matematica-Informatica UnivBuc <A href=http://www.fmi.unibuc.ro> <IMG src= "C:\My Documents\My Pictures\facmat.bmp" width=70 height=70> </A> </BODY> </HTML>
78

Figura 7. 4. Legturi cu imagine

Imaginea dintr-o legtur apare ncadrat de un chenar de grosime standard. Dac se dorete ca imaginea s nu fie ncadrat de chenar, se folosete atributul border=0 a tag-ului <IMG>, astfel: <A href=http://www.fmi.unibuc.ro> <IMG src= "C:\My Documents\My Pictures\facmat.bmp" border=0 width=70 height=70> </A>

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

<A href=http://www.fmi.unibuc.ro> UnivBuc <IMG src="C:\My Documents\My Pictures\facmat.bmp" width=70 height=70> </A> </BODY> </HTML

Figura 7. 5. Legturi cu imagine i text

7.4. Legturi cu adrese URL relative

Adresele URL relative sunt acele adrese care fac referire la pagini de pe calculatorul propriu, indicnd cale/nume-fiier, fr a fi prefixate de protocol i nume calculator. n adresele relative putem folosi caracterele: ../ pentru directorul printe / pentru directorul rdcin. Se cunoate faptul c un site poate s aib paginile (fiierele) organizate ntr-o structur arborescent de directoare. S presupunem c avem structura arborescent din figura de mai jos i atunci din pagina pag_3.htm din directorul Proiectare se pot accesa celelalte pagini, utiliznd urmtoarele referine: /pag_0.pdf (din rdcin) ../../../pag1.htm /SISTEM/IMAGINI/pag_3.jpg ../../../IMAGINI/pag_1.gif pag_2.htm (director curent) EXPLOATARE/pag_5.htm ../../../AUDIO_VIDEO/film.avi /SISTEM/AUDIO_VIDEO/aplauze.wav ../pag_1.html

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

AUDIO-VIDEO aplauze.wav film.avi

ANALIZ
Pag_1.htm

PROIECTARE Pag_2.htm

Pag_3.htm

EXPLOATARE Pag_4.htm Pag 5.htm Figura 7. 6. Arbore de foldere

Dac dorim s deschidem fiiere audio (.wav,.mp3) trebuie s avem instalat plac de sunet i un program de redare, de exemplu WINAMP. De exemplu, la adresa C:/windows/media se afl fiere audio.wav. Un exemplu de cod HTML, utiliznd legturile relative conform figurii 7.6, este redat mai jos: <HTML> <HEAD> </HEAD> <BODY> <A href="../../../AUDIO-VIDEO/aplauze.wav"> APLAUZE</A> <BR> <A href="C:/WINDOWS/MEDIA/ringin.wav"> Sonerie </A> <BR> <A href="D:/poze/Craciun/mvi_3920.avi"> Craciun 2006 </A><BR>
81

<A href=/SISTEM/IMAGINI/pag_3.jpg> POZA FIRMA</A> <BR> <A href=EXPLOATARE/pag_4.htm> Documentatie Exploatare</A><BR> <A href=pag_2.htm> Proiectare </A> </BODY> </HTML>

Figura 7. 7. Legturi cu adrese URL relative

7.5. Legturi ctre informaii non Web

Se pot face referine i la adrese URL absolute de pe Internet, care nu sunt resurse Web. n adresele URL absolute se nlocuiete protocolul http cu alte protocoale non Web (ftp, telnet, gropher etc.) FTP (File Transfer Protocol) a existat naintea spaiului Web i permitea accesul la hard-disk-uri externe pentru a putea lista directoare sau fiiere. Un exemplu este dat mai jos: <HTML> <HEAD> </HEAD> <BODY> <A href=ftp://gatekepper.dec.com >Vizitati locatia</A> <A href=ftp://ftp.arsc.edu> Educatie</A> <A href=telnet://well.com/ > Whole Earth</A> <A href=gopher://gopher.loc.gov/> GongresGopher</A> </BODY> </HTML>

82

Figura 7. 8. Legturi la site-uri non Web

7.6. Legturi ctre fiiere non HTML

Se pot stabili legturi ctre orice tip de fiiere, nu numai html, ca de exemplu .pdf, .txt, .gif etc. n aceste condiii se ntlnesc dou situaii: browser-ul nu poate lucra cu fiierul ntlnit i atunci ncearc s-l descarce, executnd operaia download. Va aprea fereastra:

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

Din exemplul de mai sus reiese c dou fiiere se deschid n aceeai fereastr FPDF. Pentru a le vizualiza folosim butoanele Back i Forward.

7.7. Legturi interne n cadrul unei pagini

n aceast seciune vom defini ancore (inte) ntr-o pagin, adugarea legturilor ctre aceste inte, precum i legturi ctre inte din documente externe. Dac documentele HTML sunt prea lungi i sunt greu de parcurs, pentru a evita parcurgerea cu bara de defilare, se definesc ancore. Ancorele ne permit s ne deplasm rapid ntr-un loc din document. Ancora este un identificator al nceputului unui element dintr-o pagin web. Dac au fost definite ancore ntr-o pagin, se pot crea legturi ctre respectivele ancore. Ancorele se pot defini n dou moduri: utiliznd orice element HTML, inclusiv elementul A cu atributul ID, de exemplu: <P id=valoare_id> sau <A id=valoare_id> </A> utiliznd tag-ul <A> cu atributul name (definit n seciunea 7.1), de exemplu: <A name=valoare_nume> </A> Pentru a crea o legtur la o ancor se folosete tag-ul <A>...</A> cu atributul href, care are ca valoare o referin de ancor, precedat de simbolul #, astfel: # valoare_nume # valoare_id Fiierul trebuie s fie suficient de mare, astfel nct secvena care conine o ancor s nu fie vizibil n momentul trimiterii ctre ea. n exemplul urmtor s-a creat un fiier, n care au fost aduse fiierele de la adresele din exemplul 7.3. Din cauza dimensiunii mari a fiierului, s-a oprit din
84

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

Instituii de nvmnt superior Lista colilor de Studii Academice Postuniversitare coli de studii academice postuniversitare: ....</PRE> <!--Referiri Ancore--> <A href="#Lista_tip_univ"> tip_univ </A> <BR> <A href="#stat"> Universitati Stat </A> <BR> <A href="#part_acred"> Universitati Part_Acreditate </A> <BR> <A href="#part_autor"> Universitati Part_Autorizate </A> <BR> <A href="#postuniv"> Scoli Postuniversitare </A> <BR> </BODY> </HTML>

Figura 7. 10. Ancore

Referiri la ancorele dintr-un document HTML (pagin) se pot face i din exterior, din alt pagin. <A href=legaturi.html#stat> Universitatile de Stat </A> Se observ c referina de ancor se adaug adresei URL a paginii respective, fiierul legaturi.html avnd definite ancorele. Ancorele ne permit s parcurgem uor o agend, care este o list de dimensiuni mari, cu informaii sortate alfabetic, ca n exemplul de mai jos.

86

S considerm o agend cu salariaii unei firme: <HTML> <HEAD> </HEAD> <BODY> <H1> Agenda <H1> <A href="#a-c"> [A-C] </A> <A href="#d-h"> [D-H] </A> <A href="#i-l"> [I-L] </A> <A href="#m-n"> [M-N] </A> <A href="#o-s"> [O-S] </A> <A href="#t-w"> [T-W] </A> <H2> <A id="a-c"> [A-C] </A> <H2> Antonescu Ion <br> Badila Ana <br> Constantinescu Ana <br> Constantinescu Dan <br> <H2> <A id="d-h"> [D-H] </A> <H2> Dorobantu Ion<br> Ene Horia<br> Horia .<br> <H2> <A id="i-l"> [I-L] </A> <H2> Ionescu Ion<br> Jeny Amalia<br> Login Ana<br> <H2> <A id="m-n"> [M-N] </A> <H2> Manea Flori<br> Niculescu Silvia<br> <H2> <A id="o-s"> [O-S] </A> <H2> Oprea Florin<br> Radulescu Mihai<br> Sandulescu Radu <br> <H2> <A id="t-w"> [T-W] </A> <H2> Tomescu Emil<br> Udrea Xenia<br>

</BODY> </HTML>
Figura 7. 11. Salt ntr-o agend

87

7.8. Trimiterea automat a unui e-mail

Dac dorim s trimitem un e-mail dintr-o pagin, se creeaz o legtur la o adres e-mail. Legtura va avea atributul href a crui valoare este mailto (protocol pentru pot), urmat de: i de o adres de e-mail valid, de exemplu: <A href=mailto:niculescurodica@yahoo.com> Puteti sa-mi scrieti </A> Se poate folosi elementul <ADRESS> de formatare logic, care are rolul de a evidenia o adres (mesajul se va scrie la nceput de linie), aa cum reiese din exemplu de mai jos. Sintaxa elementului ADRESS este: <ADRESS> <A href=mailto:niculescurodica@yahoo.com> Puteti sa-mi scrieti </A> </ADRESS> Cnd se execut clic pe o legtur e-mail, se va deschide o aplicaie e-mail care are, n cmpul To, adresa din legtur i care permite s introducem mesajul. Se poate trece i un subiect, care va fi desprit de adres prin ?, precum i un text n interiorul mesajului (de forma body=text) i care se va separa de subiect prin caracterul &, ca n exemplul de mai jos: <HTML> <HEAD> </HEAD> <BODY> <ADRESS> <A href=mailto:niculescurodica@yahoo.com? subject=Anunt& Body=Va rog sa-mi scrieti!> Astept mesaje </A> </ADRESS> </BODY> </HTML>

Figura 7. 12. Legturi la adrese e-mail

88

7.9. Culorile legturilor

O legtur poate fi n una din strile: activ vizitat nevizitat n funcie de starea n care se afl, o legtur are o anumit culoare i anume: Starea activ are: Culoarea implicit #FF0000 (rou) Culoarea se poate schimba cu atributul alink=culoare al elementului BODY Starea vizitat are: Culoarea implicit #800080 (purple) Culoarea se poate schimba cu atributul vlink=culoare al elementului BODY Starea nevizitat are: Culoarea implicit #0000FF (albastru) Culoarea se poate schimba cu atributul link=culoare al elementului BODY <HTML> <HEAD> </HEAD> <BODY alink=green vlink=magenta link=darkblue> <A href=/pag_1.html>Analiza</A> <A href=/pag_2.html>Proiectare</A> <Ahref=/pag_0.pdf>Prima pagina</A> </BODY> </HTML>

Figura 7. 13. Culorile legturilor

89

8. Elementele de structur: HTML, HEAD i BODY

Orice program HTML este cuprins n blocul exterior: <HTML>. </HTML>, care mai conine un bloc de antet <HEAD></HEAD>, un bloc de corp <BODY></BODY> i opional unul sau mai multe blocuri de comentarii <!- coninut --> i blocuri de centrare <CENTER></CENTER>. Elementele HTML, HEAD i BODY ajut la structurarea unui document i, din aceast, cauz se mai numesc i elemente de structur. Deci, structura general a unui document HTML este: <HTML> <HEAD> .. </HEAD> <BODY> .. </BODY> </HTML> n continuare se vor prezenta elementele i atributele blocurilor de antet i de corp.

8.1. Blocul de antet <HEAD></HEAD>

Vom prezenta elementele HTML i atributele acestora care se scriu n blocul de antet al documentului. Aceste elemente sunt: <TITLE>, <BASE>, <META>, <STYLE>, <SCRIPT>. Aceste elemente nu sunt afiate de browser-e. Etichetele BASE i META sunt etichete simple, n timp ce TITLE, STYLE, SCRIPT sunt etichete pereche.

8.1.1. Elementul TITLE

Acest element permite introducerea unui titlu pentru o pagin web, titlu care va fi scris ntre tag-urile <TITLE> i </TITLE>. Despre acest element HTML s-a discutat n capitolul 3, fiind un element de formatare logic. Amintim c textul care apare ntre aceste marcaje apare n antetul ferestrei browser-lui.
90

<HTML> <HEAD> <TITLE> Structura paginii WEB </TITLE> </HEAD> <BODY> Aceasta este structura general a unui document HTML </BODY> </HTML>

Figura 8. 1. Elementul TITLE

8.1.2. Elementul BASE

Elementul BASE are rolul de a preciza o adres de baz pentru resurse, care va fi ataat automat la adresa URL dintr-o referin, ceea ce ne permite s evitm rescrierea codului (dac toate legturile indic spre acelai server). Singurul atribut al elementului BASE este href=adresa URL Cnd se utilizeaz elementul BASE ntr-o pagin, adresa URL propriu-zis este o concatenare a adresei atributului href din BASE cu valoarea atributului href sau src a elementelor A i IMG. Acest URL concatenat va aprea n bara de adrese a browser-lui. n exemplul de mai jos s-a folosit codul din exemplul 7.3. Se observ c toate link-urile au o parte comun: http://www.edu.ro/index.php/articles/, care va fi trecut ca valoare a atributului href, a elementului BASE. <HTML> <HEAD> <BASE href="http://www.edu.ro/index.php/articles"> <TITLE> Elementul BASE </TITLE> </HEAD> <BODY> <A href="c108"> Lista Universitati </A> <BR>
91

<A href="c487"> Lista Universitati Stat </A><BR> <A href="3880"> Lista Universitati Particulare Acreditate </A> <BR> <A href="3882"> Lista Universitati Particulare Autorizate </A> <BR> <A href="3881"> Lista Poastuniversitare </A> <BR> </BODY> </HTML>

Figura 8. 2. Elementul BASE

8.2.3. Elementul META

Acest element ne permite s inserm n paginile web acele informaii care s le fac uor de indexat de ctre aplicaiile de cutare/indexare pe web (yahoo, google, altavista etc.) Informaiile coninute de acest element nu sunt afiate de ctre browser, dar este indicat s-l folosim pentru ca informaiile din site-ul nostru s fie accesibile cu ajutorul roboilor Internet i a motoarelor de cutare. Un antet poate conine mai multe elemente META. Atributele elementului META sunt: Name cu valorile posibile: author description keywords copyright

92

http-equiv valorile posibile sunt: from replay-to creation-date expires refresh pragma Content utilizat pentru stocarea informaiilor valorilor celor dou atribute de mai sus (name i http-equiv). Valorile posibile sunt iruri de caractere ntre ghilimele. n general, atributele META sunt pereche. De exemplu: Name=author content =Ion Scheme utilizat pentru rafinarea informaiei din celelalte atribute. Valorile posibile sunt iruri ntre ghilimele. Lang utilizat pentru precizarea limbii. Valorile posibile sunt identificatorii de limb ntre ghilimele (ro, uk, en etc.) Ultimele dou atribute (scheme i lang) nu sunt atribute pereche. Elementul META are i alte atribute, dar foarte rar sunt folosite. Aceasta din cauz c au aprut alte modaliti prin care aceleai efecte sau chiar mai multe se pot rezolva mai eficient. Realizatorii motoarelor de cutare au dorit s ajute programatorii paginilor web cu elementul META pentru a evidenia coninutul paginilor. Unii autori au introdus cuvinte care nu au legtur cu paginile web, doar pe motiv de a prea mai interesani. Eticheta META devine astfel inutil, poate o unealt pentru SPAM (informaii nedorite). Din acest motiv, unele motoare au renunat definitiv la informaiile din META, iar altele, dimpotriv, dac paginile nu conin elemente META, pun paginile la sfritul listei. Exist firme specializate care, contra cost, optimizeaz site-urile pentru motoarele de cutare (SEO-Search Engine Optimization). NOT! n atributele elementului META nu se folosesc cuvinte care nu sunt incluse n pagin i de asemenea nu se repet cuvinte. n continuare se trec n revist atributele enumerate mai sus. Descrierea unei pagini (fiier html) Se utilizeaz eticheta META cu atributele: name=description content=sir de caractere Motorul de cutare va afia textul (valoarea atributului content); n lipsa acestui atribut, motorul va afia primele rnduri ale paginii. Cuvinte cheie Cuvintele cheie specific motoarelor de cutare cuvintele dup care s fie regsit un anumit site. Aadar, cuvintele cheie declarate trebuie s se regseasc n
93

interiorul paginii. n exemplul anterior, dac se introduc dou elemente META, browser-ul va afia aceeai fereastr ca n figura 8.2, cu excepia antetului de titlu. <HTML> <HEAD> <BASE href="http://www.edu.ro/index.php/articles"> <TITLE> Elementul META_KEY </TITLE> <META name="description" content="invatamint suparior"> <META name="keywords" content=" universitati, stat, particulare, postuniversitare"> </HEAD> <BODY> <A href="c108"> Lista Universitati </A> <BR> <A href="c487"> Lista Universitati Stat </A><BR> <A href="3880"> Lista Universitati Particulare Acreditate </A> <BR> <A href="3882"> Lista Universitati Particulare Autorizate </A> <BR> <A href="3881"> Lista Poastuniversitare </A> <BR> </BODY> </HTML>

Figura 8. 3. Elementul META cu atributele name i keywords

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 &copy). <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&copy;2006, Editura Spiru Haret </BODY> </HTML>

Figura 8. 4. Elementul META cu atributele author i copyright

Http-equiv cu valorile from i replay Pe lng autorul unei pagini se poate indica i numele i adresa persoanei de contact a paginii, introducnd dou etichete <META> cu valorile atributului http-equiv=from i http-equiv=replay-to, iar valoarea atributului pereche content=adresa e-mail. Browser-ul va afia aceeai fereastr ca n figura 8.4, singura diferen fiind titlul din bara de antet a ferestrei. <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"> </HEAD>
95

<BODY> <P> copyright&copy;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&copy;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

numrul de secunde dup care pagina se remprospteaz (refresh). n cazul redirecionrii paginii la o alt pagin, dup un numr de secunde, valoarea atributului content este : nr secunde;adresa URL, unde adresa URL este adresa noii pagini. Pentru a descrca o pagin ori de cte ori se acceseaz pagina, se folosete elementul pragma. n exemplu de mai jos se folosete elementul Meta cu atributul http-equiv = refresh. <HTML> <HEAD> <TITLE> Elementul META_http-equiv</TITLE> <META http-equiv="refresh" content="120"> </HEAD> <BODY> <P> Fisierul se va actualiza automat la 2 minute</P> </BODY> </HTML>

Figura 8. 5. Elementul META cu atributul refresh

Pentru redirecionarea unei pagini, la un anumit interval de timp (dat n secunde) se introduce un nou element META, ca n exemplul de mai jos. <HTML> <HEAD> <META http-equiv="refresh" content="30;URL=www.editura.spiruharet.com"> </HEAD> <BODY> Fisierul va fi redirectionat automat la 2 minute la adresa data </BODY> </HTML>
97

Figura 8. 6. Elementul META cu atributul refresh de redirecionare

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.

8.2. Blocul de corp <BODY></BODY>

Acest bloc cuprinde corpul paginii i conine toate tag-urile prezentate n capitolele precedente. n continuare vom prezenta atributele elementului BODY, care sunt opionale, aa cum s-a utilizat n exemplele de pn acum.

98

Atributele elementului BODY sunt: Background indic o imagine care dorim s apar pe fundal. Imaginea se va repeta att pe orizontal, ct i pe vertical pn va umple tot corpul. Acest atribut a fost descris i la tabele, fiind atribut i al elementelor <TABLE>, <TR> i <TD>. Bgcolor indic culoarea de fond. Dac se folosesc ambele atribute i, n cazul n care imaginea nu se ncarc, atunci apare culoarea de fond, altfel apare imaginea. Text indic culoarea folosit pentru textul coninut n blocul <BODY. </BODY>. Atribute de margine Browser-ele utilizeaz atribute diferite pentru margini. Valoarea atributelor de margine este un numr ntreg pozitiv i reprezint distana n pixeli de la coninut la marginile ferestrei. Pentru Internet Explorer exist 4 atribute pentru margini: leftmargin (valoare implicit 10 px) rightmargin (valoare implicit 10 px) topmargin (valoare implicit 15 px) bottommargin (valoare implicit 0 px) Pentru Netscape Navigator exist 2 atribute pentru margini: marginwidth marginheight Atributele link, alink i vlink indic culoarea legturilor. Aceste atribute au fost definite n capitolul 7. Reamintim c legturile au culori predefinite n funcie de strile n care se afl, astfel: legturile nevizitate au culoarea implicit albastr care poate fi schimbat cu atributul link=culoare legturile vizitate au culoarea implicit purple care poate fi schimbat cu vlink=culoare legturile active au culoarea implicit rou care poate fi schimbat cu atributul alink=culoare n exemplul de mai jos se utilizeaz atributele elementului BODY: <HTML> <HEAD> <BASE href="http://www.edu.ro/index.php/articles"> <TITLE> Elementul META_KEY </TITLE> <META name"description" content="invatamint suparior"> </HEAD> <BODY background="c:\windows\web\wallpaper\peace.jpg" bgcolor="blue" leftmargin=50 rightmargin=20 topmargin=20 bottommargin= 30 link="red" alink="yellow" vlink="darkblue"> <A href="flori.jpg"> Trandafir </A> <BR> <A href="c108"> Lista Universitati </A> <BR>
99

<A href="c487"> Lista Universitati Stat </A><BR> <A href="3880"> Lista Universitati Particulare Acreditate </A> <BR> <A href="3882"> Lista Universitati Particulare Autorizate </A> <BR> <A href="3881"> Lista Postuniversitare </A> <BR> </BODY>

</HTML>

Figura 8. 7. Atributele elementului BODY

8.3. Blocul de comentarii

Pentru o mai bun lizibilitate a unei pagini este indicat s se introduc comentarii. Un comentariu are sintaxa: <!_ _ comentarii_ _>. Un bloc de comentarii are caracteristicile: nu este afiat de browser poate fi introdus oriunde n interiorul paginii se poate ntinde pe mai multe rnduri

8.4. Blocul de centrare

Dac se dorete centrarea unei secvene de cod fr a utiliza un stil sau formatarea logic <PRE>, se folosete blocul <CENTER></CENTER> . Textul i/sau imaginea cuprinse n acest bloc vor fi centrate n fereastra browser-lui. Blocul poate fi plasat oriunde n program i pot exista mai multe blocuri de centrare ntr-o pagin.

100

Un exemplu simplu este dat mai jos. <HTML> <HEAD> </HEAD> <BODY> <!--PAGINA N LUCRU --> <CENTER> SUNTEI BINE VENII PE SITE-UL UNIVERSITII </CENTER> </BODY> <HTML>

Figura 8. 8. Elementul CENTER

101

9. CADRE

HTML permite s se mpart o pagin Web n mai multe panouri, care pot fi, la rndul lor, mprite n locaii numite cadre sau frame-uri, i n fiecare din aceste cadre s se ncarce o alt pagin Web. Astfel, browser-ul va afia ntr-o fereastr mai multe pagini Web. Chiar dac la introducerea lor de ctre Netscape (versiunea HTML 3.1) ele nu au fost uor acceptate, cu timpul, lucrul cu cadre s-a dezvoltat (majoritatea browser-elor acceptnd lucrul cu ele).

9.1. Bazele organizrii cadrelor

n lucrul cu cadre, blocul <BODY> </BODY> este nlocuit cu unul sau mai multe blocuri <FRAMESET> </FRAMESET> care indic volumul de spaii alocat fiecrui panou. Fiecare element <FRAMESET> conine unul sau mai multe elemente <FRAME> care specific cadrele individuale care vor conine paginile Web pe care dorim s le afim simultan. nainte de a descrie aceste elemente i atributele lor, vom da cteva exemple pentru a ne face o idee despre lucrul cu cadre. n aceste exemple presupunem c exist n directorul curent fiierele .html care vor fi utilizate n exemple i care nu au o cale indicat. Cadre orizontale <HTML> <HEAD> </HEAD> <FRAMESET rows="40, *"> <FRAME src="titlul oriz.html"> <FRAME src="c:\carte_web\cap_web_5\ex_5_8.html"> </FRAMESET> </HTML>

Figura 9. 1. Cadre orizontale 102

Din exemplul de mai sus, rezult c browser-ul afieaz dou panouri (cadre) pe orizontal, primul avnd nlimea de 40 de pixeli i al doilea ocupnd restul ecranului. Coninutul celor dou pagini este afiat de browser ntr-o fereastr. Cadre verticale <HTML> <HEAD> <TITLE> Cadre Verticale </TITLE> <BASE href="C:/Windows/Web/Wallpaper/"> </HEAD> <FRAMESET COLS="30%, 2*,3*"> <FRAME src="follow.jpg"> <FRAME src="tulips.jpg"> <FRAME src="home.jpg"> </FRAMESET> </HTML>

Figura 9. 2. Cadre verticale

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:

vom avea urmtoarea structur <HTML> <FRAMESET rows =70%, 30%> <FRAMESET cols =2*, 2*, 3*> <FRAME src => <FRAME src = . > <FRAME src= > </FRAMESET> <FRAME src= > </FRAMESET> </HTML>
Figura 9. 3. Exemple cadre imbricate

104

9.2. Elementul FRAMESET

Din exemplele prezentate mai jos, rezult c elementul FRAMESET are rolul de a mpri fereastra n mai multe panouri (zone). Fiecare din zonele ferestrei poate fi mprit n unul sau mai multe cadre cu ajutorul elementului FRAME. Sintaxa elementului FRAMESET este: <FRAMESET atribute> .. </FRAMESET> Atributele elementului FRAMESET rows descrie liniile n care este mprit fereastra (mprirea pe orizontal a cadrelor care se doresc a fi afiate) cols descrie coloanele n care este mprit fereastra (mprirea pe vertical a cadrelor) Valorile celor dou atribute sunt scrise ntre ghilimele delimitate prin virgul. Elementele listei pot fi: numere ntregi pozitive, care reprezint dimensiunea (nlimea liniei sau limea coloanei) n pixeli procente din dimensiunea ferestrei n*, unde n este un numr ntreg pozitiv, ce reprezint numrul de pri din spaiul rmas, iar * reprezint spaiul rmas, de exemplu: rows=10%, 200, * nseamn c zona este mprit n trei linii, de nlimi: 10% din fereastr, 200 de pixeli i respectiv tot spaiul rmas cols=100, 2*, 3*, 4* nseamn c zona este mprit n patru coloane de limi: 100 pixeli, 2/9, 3/9 i respectiv 4/9 din spaiul rmas (2 + 3 + 4 = 9, deci spaiul rmas se mparte n 9 pri) border indic grosimea n pixeli a bordurilor cadrelor. Valorile posibile sunt numere ntregi pozitive, valoarea 0 nseamn c bordurile nu sunt afiate bordercolor indic culoarea bordurilor frameborder indic dac chenarele sunt sau nu vizibile. Poate lua dou valori: Yes sau 1 (implicit) chenarele sunt vizibile i No sau 0 cadrele nu sunt separate prin chenare (este echivalent cu border=0) n exemplul de mai jos exemplificm atributele elementului FRAMESET. S presupunem c dorim s aducem ase pagini n fereastr, pe care o mprim dup modelul de mai jos: | | adic ntre linii nu dorim chenare. <HTML> <FRAMESET rows="50, 15%, *" frameborder="0">
105

<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>

Figura 9. 4. Elementul FRAMESET cu atribute

9.3. Elementul FRAME

Din exemplele din seciunea 9.1 9.3., reiese c marcajul nepereche <FRAME> este utilizat pentru a prezenta coninutul unui cadru (pagina Web care se ncarc ntr-un cadru). Sintaxa acestui element este <FRAME atribute>. Atributele elementului <FRAME> sunt: src este un atribut obligatoriu i are ca valoare o adres absolut sau relativ a fiierului HTML sau a fiierului imagine care va ocupa cadrul, de exemplu: <FRAME src www.editura.unibuc.ro>. frameborder indic dac chenarele sunt sau nu vizibile. Dac acest atribut exist, el are aceleai valori i este prioritar aceluiai atribut al
106

elementului FRAMESET. Dac un cadru are o valoare a acestui atribut i cadrele vecine trebuie sa aib aceeai valoare, evident. bordercolor indic culoarea chenarului, iar valoarea acestui atribut schimb valoarea aceluiai atribut al elementului FRAMESET. marginheight reprezint spaiul alb, n pixeli sau procente fa de partea de sus (top) i cea de jos (bottom). marginwidth reprezint spaiul alb, n pixeli sau procente fa de partea stng (left) i cea dreapt (right). noresize cadrul nu mai poate fi redimensionat. Dac acest atribut este prezent pentru un cadru, atunci nici cadrele vecine nu pot fi redimensionate. scrolling indic prezena barelor de scroll (defilare) i poate avea trei valori: auto valoare implicit i indic faptul c bara de scroll este prezent numai dac este necesar (coninutul cadrului depete dimensiunea lui) yes bara de defilare este mereu prezent no bara de defilare nu este afiat n niciun caz name atribuie un nume elementului FRAME (cadrului) i este util n definirea destinaiilor pentru legturi. Despre acest atribut i cadrele destinaie, se va discuta n seciunea urmtoare. Mai jos se va da un exemplu de utilizare a elementului FRAME cu atribute. Tot n acest exemplu se indic dou linii i dou coloane, dar un singur FRAMESET. Aceasta nseamn c frame-urile vor fi aranjate n reea, adic unul dup altul. n cadrul aranjrii n reea trebuie indicate att numrul de linii, ct i de coloane. <HTML> <HEAD> </HEAD> <FRAMESET rows="20%, 80%" cols="40%, *" frameborder="1" border="5" bordercolor="blue"> <FRAME src="univsh.html" marginheight="30" marginwidth="30" scrolling="no"> <FRAME src="univbuc.html" scrolling="no"> <FRAME src= "c:/carte_web/univsh.jpg" scrolling="no"> <FRAME src="c:/carte_web/facmat.jpg" noresize> </FRAMESET> </HTML>

107

Figura 9. 5. Atributul FRAME cu atribute

9.4. Cadre destinaie

Am artat n capitolul 7 (Legturi) c destinaia unei legturi este fereastra sau cadrul n care va fi ncrcat resursa de la adresa URL, indicat de legtur. Tot atunci am artat c destinaia unei legturi este implicit fereastra care conine legtura, i cu un clic pe butonul BACK ne ntoarce la pagina iniial. Destinaia implicit se poate schimba cu ajutorul atributului target al elementului A(link) care indic o alt fereastr n care se va deschide pagina dorit. i n cazul lucrului cu cadre, folosind atributul target n legturi i atributul name ntr-un frame, i aceste atribute au aceeai valoare, atunci una sau mai multe pagini se pot deschide n cadrul cu atributul name. Valorile posibile pentru atributul target sunt: Nume de cadre/ferestre cunoscute: black este implicit i noua resurs se deschide ntr-o fereastr nou self noua resurs este ncrcat n acelai cadru / aceeai fereastr parent noua pagin se deschide n fereastra / cadrul printe top pagina este ncrcat n fereastra browser-ului Valoarea atributului name a unei ferestre deschise de browser sau a unui cadru ncrcat de browser. n cazul n care mai multe pagini se deschid n aceeai fereastr sau acelai cadru, cu ajutorul butoanelor BACK i FORWARD activm aceste pagini. De exemplu, dac mprim fereastra n dou coloane, prima s conin un fiier HTML cu un set de legturi, iar n a doua coloan se vor ncrca paginile de
108

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>

Figura 9. 6. Cadre destinaie cu atributul name

Dac la codul din figura 8.2, la fiecare legtur A se adaug atributul target=listeU, unde listeU este i valoarea atributului name a lui frame (cadrul din partea dreapt din exemplul de mai sus),atunci toate legturile se deschid n cadrul din partea dreapt a ferestrei. Codul modificat n acest sens din ex_8_2.html devine ex_9.7.html i este dat mai jos. <HTML> <HEAD> <BASE href="http://www.edu.ro/index.php/articles"> <TITLE> Elementul BASE </TITLE> </HEAD> <BODY> <A href="c108" target="listaU"> Lista Universitati </A> <BR> <A href="c487" target="listaU"> Lista Universitati Stat </A><BR> <A href="3880" target="listaU"> Lista Universitati Particulare Acreditate </A> <BR> <A href="3882" target="listaU"> Lista Universitati Particulare Autorizate </A> <BR> <A href="3881" target="listaU"> Lista Poastuniversitare </A> <BR>
109

</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.

Figura 9. 7. Cadre destinaie cu atributul name i target

9.5. Cadre interioare

HTML permite introducerea cadrelor i n interiorul blocului <BODY> </BODY>, cu ajutorul blocului <IFRAME atribute> </IFRAME>. Cadrele interioare pot fi introduse oriunde n corpul unui fiier HTML. OBSERVAII! Elementul IFRAME are aceleai atribute ca i elementul FRAME ntr-o pagin Web se pot introduce oricte cadre interioare dorim Atributul name este utilizat ca destinaii pentru legturi Elementul IFRAME are i unele atribute ale lui IMG, cu aceleai efecte: width, align (left, top, bottom, middle) Un exemplu de CADRE interioare este prezentat mai jos: <HTML> <HEAD> </HEAD> <BODY> <B> Acesta sunt florile preferate </B> <P> <IFRAME src="flori1.jpg" name="poze" bordercolor="red" align="middle"
110

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>

Figura 9. 8. Cadre interioare IFRAME

111

10. FORMULARE

n capitolele precedente s-a artat cum se pot construi pagini atractive cu ajutorul marcajelor speciale HTML, animaiei, cadrelor, imaginilor, sunetelor, legturilor etc. tim de asemenea c toate programele de navigare comunic cu server-ele WEB prin intermediul unui protocol HTTP (Hyper Text Transfer Protocol) sau a altora. Browser-ul exprim, prin intermediul unui protocol ales, server-ului WEB cereri de tipul Doresc sau Vreau (I want) i primete rspunsuri de la server ceva de genul Poftim sau Iat (Here is) sau Nu exist (Dont have), aa cum se poate observa din figura de mai jos: Program Navigare Calculator Propriu Doresc (I want) Server Poftim (Here is) Nu exist (Dont have) WEB

Figura 10. 1. Interaciunea dintre browser i server

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

Interaciunea dintre browser i server va fi de urmtoarea manier: Doresc fiierul tabele.html Iat fiierul tabele.html Acum mai Doresc fiierul peace.jpg Iat fiierul peace.jpg Mai Doresc fiierul casa.jpg Nu exist fiierul casa.jpg Error 440 file not found Doresc fiierul de la www.unibuc.ro Iat fiierul www.unibuc.ro Am evideniat aceast modalitate de lucru pentru a indica comportamentul static al tehnologiei WWW, adic avem acces numai la resurse Internet statice. n acest capitol vom trece la comportamentul dinamic al tehnologiei WWW. n aceast manier de lucru cererea Doresc, adresat de browser server-ului, devine cererea de tipul Doresc execuia programului i transmiterea rezultatelor. Formularele induc un comportament dinamic, deoarece ele permit utilizatorilor s introduc parametrii. Pentru analizarea acestor parametrii i transmiterea rezultatelor browser-elor, se execut anumite aplicaii de programare a server-elor, care decid cum va aciona server-ul ca rspuns la datele primite. Mediul de programare de pe servere, prin intermediul crora se comunic cu programele de navigare, este interfaa Common Gateway Interface (CGI). Lucrnd n mediul CGI, ntr-un anumit program (ASP, Perl, Java Script, PHP etc.), se poate nlocui o pagin WEB sau o imagine cu un program care efectueaz anumite calcule, care caut ntr-o baz de date i apoi ntoarce utilizatorului rezultatele sub form de date WEB. Aceste programe se mai numesc i scripturi CGI, cu sufixul .cgi i pot fi invizibile pentru vizitatorii de pagini WEB (chiar este posibil s nu se tie c anumite pagini sunt rezultatul execuiei unor scripturi).

n acest capitol nu se trateaz scrierea codului pentru scripturi CGI, dar se vor prezenta soluii pentru a le aplica n crearea formularelor.
Formularele WEB sunt asemntoare cu formularele altor aplicaii (ca de exemplu, cele din Word), au aceleai tipuri de cmpuri, dar au i unele caracteristici proprii foarte utile. Formularele HTML permit utilizatorilor introducerea unor informaii, transmiterea lor ctre server i ntoarcerea rezultatelor obinute prin execuia unor programe de scriptare, inducnd astfel un comportament dinamic paginilor WEB. Formularele sunt utilizate pentru transmiterea datelor ctre o aplicaie client, server sau la o adresa de e-mail. n continuare se vor prezenta multitudinea de marcaje pentru a realiza formulare simple care pot conine una sau mai multe csue text, care pot introduce text pe post de keywords (pentru motoarele de cutare) pn la formulare complexe cu multe elemente care ofer faciliti utile de transmiteri de date.

113

10.1. Elementul FORM

Pentru a insera ntr-o pagin WEB un formular se folosete elementul <FORM> cu urmtoarea sintax: <FORM atribute>...</FORM> Elementul FORM are urmtoarele caracteristici: n interiorul unei pagini WEB pot exista mai multe blocuri <FORM> ...</FORM> Blocurile <FORM>...</FORM> nu pot fi imbricate Blocurile <FORM>...</FORM> pot s aib un atribut name=nume, unde valoarea nume este numele de identificare a formularului. Numele nu este transmis server-ului, dect printr-o operaie ascuns, cum se va vedea mai departe Unui formular nu i se asociaz stiluri, o eventual formatare a elementelor unui formular se realizeaz cu elementele de formatare fizic (<B>, <I>, <U>, <S>, <FONT>) sau de formatare logic (<P>, <PRE>, <HR> etc.) n interiorul unui bloc <FORM>...</FORM> elementele formularului se definesc cu etichetele INPUT, TEXTAREA i SELECT, care vor fi descrise n seciunile urmtoare Fiecare element al unui formular poate avea un nume, care l individualizeaz Atributele elementului FORM Deoarece elementul <FORM> este utilizat pe partea de client pentru citirea datelor introduse de utilizator i pe partea server pentru scrierea rezultatelor din aplicaiile de scriptare CGI, atunci lui i se asociaz anumite atribute pentru a evidenia destinatarul datelor din formular, metoda utilizat n transmiterea datelor, metoda de codificare a datelor i fereastra (dac se dorete a se schimba cea implicit self ) n care apar rezultatele. Atributele elementului FORM sunt: Action Method Enctype Target Atributul ACTION Atributul action=URL definete destinatarul datelor din formular. n cazul n care acest atribut lipsete, destinatarul este pagina WEB. URL-ul poate fi: adresa URL a aplicaiei .cgi de destinaie, care urmeaz s prelucreze datele, ca de exemplu: http://www.itdgroup.com/scripts/test.asp
114

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 method=metoda definete metoda de utilizare i transmiterea datelor de la programul de navigare la server. Exist dou valori posibile ale acestui atribut i anume: GET i POST. method=GET se utilizeaz dac datele din formular se ataeaz la adresa URL de destinaie prin sintaxa nume=valoare. n bara de ADDRESS a browser-ului apare adresa URL, urmat de perechi de date nume=valoare, separate prin simbolul &. De exemplu, dac avem intrarea n formular <INPUT type=text name=nume> se va crea o csu de text i dac n ea se tasteaz Popescu, atunci n bara de adrese va aprea: http://www.itdgroups/scripts/test.asp?&nume=Popescu. Metoda GET de transmitere de date este implicit, adic, dac nu este prezent atributul action n eticheta <FORM>, modul de transmitere a datelor este GET. method=POST datele din formular sunt transmise server-ului ntr-o tranzacie separat, nu odat cu adresa URL. Din acest motiv n bara de adrese a browser-ului apare adresa, fr elemente suplimentare la sfrit, de tip nume=valoare. Folosind aceast metod, datele sunt transmise la server nu toate odat, ci n flux. Din acest motiv metoda post este indirect n cazul n care trebuie transmise cantiti mari de informaii. Atributul Enctype Acest atribut definete metoda de codificare a datelor nainte ca ele s fie transmise la server. Valorile acestui atribut pot fi: aplication/x-www-form-urlencoded care este i valoarea implicit a atributului i este folosit cu metoda GET n general. Aceast valoare va fi detaliat n seciunea urmtoare (codificarea i transmiterea datelor) text/plain utilizat cu valoarea mailto:adresa_mail a atributului ACTION, pentru trimiterea prin pot a datelor. Este asemntoare cu valoarea de mai sus, cu excepia c spaiile albe nu sunt nlocuite cu simbolul + multiform/form-data utilizat ca metoda POST pentru inserarea pe server (transmiterea fiierelor sau imaginilor pe server).
115

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.

10.2. Transmiterea i citirea datelor

Orice tranzacie HTTP de tipul static Doresc / Iat sau dinamic Execut programul / Iat include un set de caracteristici de mediu care se transmit mpreun i care sunt accesibile de scripturile CGI. Unele din aceste variabile de mediu sunt: REMOTE-HOST (care identific numele calculatorului pe care se afl programul de navigare), HTTTP-USER-AGENT (identific browser-ul care se utilizeaz), QUERY-STRING (are ca valori informaiile introduse de utilizator, n perechile name=value). De exemplu, dac se dorete o cutare pe motorul Yahoo, pentru un cuvnt sau o fraz, s zicem CSS va aprea o pagin cu toate informaiile cerute i URL- ul afiat n csua ADDRESS a browser-ului este: http:// search.yahoo.com/ bin/ search?p=ccs. Se observ c apare caracterul ? care indic faptul c exist informaii care se transmit server-ului, iar valoarea transmis de client server-ului este p=CSS. Atunci pentru programul de scriptare CGI de pe server, transmis prin adresa URL a atributului ACTION al etichetei <FORM>, variabila de mediu QUERY-STRING va conine valoarea specificat dup semnul de ntrebare (?). Se poate introduce o legtur n pagina WEB care s apeleze, de exemplu, Yahoo pentru a cuta informaii referitoare despre Spiru Haret: <A href=http://search.yahoo.com/search?p=Universitate+Spiru+Haret> Informaii despre Spiru Haret </A>. Se tie c spaiile nu sunt permise n adresa URL, i atunci se folosete simbolul + pentru a le trimite serverului.

Dar este mult mai simplu s utilizm formulare pentru a introduce date i apoi acestea s fie prelucrate n funcie de rezultatele primite.
Codificarea datelor nainte de a trimite date la server, browser-ul codific datele. Atunci cnd se utilizeaz metoda GET, informaiile sunt transmise scriptului de pe server. Toate informaiile sunt afiate codificat i sunt memorate n variabile de mediu QUERYSTRING. Tehnica de codificare a datelor depinde de valoarea atributului enctype, a etichetei <FORM>. n cazul valorii implicite application/x-www-formurlencoded, utilizat cu metoda implicit GET datele sunt transmise sub forma nume=valoare separate prin simbolul &; spaiile sunt nlocuite cu simbolul plus (+) pentru a le putea transmite n siguran;
116

 caracterele speciale, nonalfabetice sunt codificate cu ajutorul codului lor ASCII n hexazecimal prefixat de simbolul % ca n tabelul de mai jos:
COD ! # $ % ( ) + / : = ? \ CR LF Spaiu TAB CARACTER %21 %22 %23 %24 %25 %26 %27 %28 %29 %2B %2F %3A %3D %3F %5C %0A %0D %20 %09

Figura 10. 2. Codurile caracterelor speciale

De exemplu, dac avem formularul de mai jos:

NUME PRENUME Ionescu Ana Maria So. Colentina Nr.10 Bucuresti sect 2 ROMANIA

ADRES MAIL

http://www.ionescui@gmail.com
SEND Figura 10. 3. Codificarea datelor 117

atunci informaia trimis este codificat astfel: nume=Ionescu.&prenume=Ana+Maria&adres= So.+Colentina+nr.10+sect.2%0D%0AROMANIA&mail =http%3A%2F%2F www.ionescui@gmail.com%2F&trimite=send Pentru transmiterea datelor la destinaie se folosete elementul <INPUT type=submit value=valoare>, care va fi descris n seciunea urmtoare. Dup transmiterea datelor, primul pas pe care-l execut scriptul destinatar este s decodifice URL-ul transmis, care are, la sfrit, datele codificate n perechi. n continuare se vor detalia cele 3 elemente care descriu elementele unui formular: <INPUT>, <TEXTAREA> i <SELECT>

10.3. Elementul INPUT

Toate cmpurile unui formular destinate introducerii datelor se specific cu ajutorul marcajului <INPUT atribute>. Exist zece cmpuri ntr-un formular care se introduc cu elementul INPUT i anume: text, submit, image, password, hidden, checkbox, reset, radio, file i buton. Atributele elementului <INPUT> difer n funcie de tipul de intrare i pot fi: TYPE=tip_cmp indic tipul cmpului de intrare i este un atribut obligatoriu al elementului <INPUT> NAME=nume este un identificator pentru cmpul de intrare. Este indicat a fi utilizat VALUE=valoare stabilete valoarea elementului. Perechea nume=valoare se folosete pentru transmiterea datelor SIZE=numr indic numrul de caractere afiate dintr-o csu de text MAXLENGTH=numr indic numrul maxim de caractere care pot fi introduse ntr-o csu text. Dac valoarea size este mai mic dect valoarea maxlength, atunci apare o bar de derulare DISABLED indic inactivitatea unui cmp al formularului (utilizatorul nu poate selecta csua) READONLY nu permite modificarea coninutului unui cmp CHECKED indic faptul c un buton radio sau o csu de validare este selectat implicit n continuare se vor descrie cele zece valori enumerate mai sus ale atributului TYPE. Tipul TEXT Pentru a introduce un cmp de text cu ajutorul cruia se introduc parametrii ntr-o pagin WEB se folosete atributul type al elementului <INPUT> cu valoarea text, astfel <INPUT type=text>. Toate atributele elementului
118

<INPUT>, definite mai sus, cu excepia atributului CHECKED, pot fi asociate cu tipul text, aa cum reiese din exemplul urmtor: <HTML> <HEAD></HEAD> <BODY> <FORM name="FTEXT"> <!...Destinaia este pagina, metoda implicita GET...> <PRE> <B>NUME:</B> <INPUT type="text" name="nume" size="20" maxlength="50"> <B>PRENUME:</B> <INPUT type="text" name="pren" size="25"> <B>ADRESA E-MAIL:</B> <INPUT type="text" name="email" readonly size="26" value="rodicaniculescu@gmail.com"> <B>PAROLA:</B> <INPUT type="text" name="parola" disabled value="secret"> </PRE> </FORM> </BODY> </HTML>

Figura 10. 4. Tipul text cu atribute

Tipul SUBMIT (Transmitere) Am specificat, n seciunea anterioar, faptul c atunci cnd un formular este completat, datele sunt transmise de browser spre server. Pentru a executa aceast aciune se utilizeaz atributul type al elementului INPUT cu valoarea submit, astfel <INPUT type=submit>. Utilizarea tipului submit (transmitere) permite inserarea n formular a unui buton care, atunci cnd este apsat browser-ul, codific datele i trimite informaiile programului de scriptare specificat de atributul ACTION al etichetei <FORM>. Atributele elementului INPUT care merg cu tipul buton de transmitere sunt: name identificatorul elementului value reprezint textul care va aprea pe buton, n lips, pe buton va fi trecut valoarea prestabilit: Submit query. n cazul n care cele dou
119

atribute sunt prezente, se vor trimite date despre buton n perechea nume=valoare disabled dezactiveaz un buton de transmisie ntr-un formular pot exista mai multe butoane de transmisie SUBMIT. n acest caz butoanele de transmisie se vor diferenia prin folosirea atributului name i prin atributul value, a crei valoare va fi scris pe buton. Datele care se transmit sunt n funcie de butonul de transmisie, astfel: Dac butonul nu are indicat valoarea, adic are valoarea implicit Submit query, atunci el transmite date din formular, dar nu i despre el Dac butonul este numit, adic exist atributul value=text, atunci el transmite date din formular, ct i despre el Dac butonul este dezactivat atunci el nu transmite nimic Nu se transmit dect valorile elementelor din formular, nu i despre formular, adic numele formularului nu apare n datele de transmisie Un exemplu ilustrativ despre butoane de transmisie este prezent mai jos, completnd programul din figura 10.4. cu butoane de transmisie. Se vor introduce dou butoane de transmisie, unul predefinit i altul numit prin secvena urmtoare: <INPUT type=submit> <INPUT type=submitname=opteazvalue=GO> Formularul va fi mbogit cu dou butoane:

Figura 10. 5. Butoane de transmisie

120

Dac se apas butonul SUBMIT, atunci n caseta de adrese va aprea: AdresaURL?nume=Niculescu&pren=FlorentinaRodica&email=rodica niculescu@gmail.com Dac se apas butonul GO se va mai aduga, la sfrit, perechea opteaz=GO

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

Figura 10. 6. Butoane de imagine

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 (depinde de browser) din motive de siguran
121

Pentru a insera n formular un cmp de tip parol se folosete atributul type cu valoarea password, astfel: <INPUT type= password, name= parol, value=123456> De exemplu, dac vrem s schimbm parola veche, se introduce parola nou de dou ori. Codul pentru aceast aciune este: <HTML><HEAD></HEAD><BODY> <FORM name="FPAROLA method="GET" > <PRE> USERNAME: <INPUT type="text" name= "user" value="guest"> OLD PASSWORD: <INPUT type="password" name="old" maxlength="10" value="student" readonly> NEW PASSWORD: <INPUT type="password" name="new1" value="Florentina" maxlength="12"> RETYPE: <INPUT type="password" name="new2" value="Florentina" maxlength="12"> UPDATE: <INPUT type= "SUBMIT" value="OK"> </PRE> </FORM> </BODY> </HTML>

Figura 10. 7. Tipul parol

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

...</BOTTON>. Acest buton va avea aceleai atribute ca SUBMIT: type, name, value etc. Tipul HIDDEN (ascuns) Tipul ascuns genereaz un element de formular, utiliznd valoarea hidden a atributului type. Acest tip permite transmiterea de informaii fr ca utilizatorul s le poat vedea. Acest element este folosit n cazul: n care pagina este generat automat de un script CGI pentru a aduga un identificator formularului, deoarece nu exist atribut al elementului <FORM> care s transmit date despre el mpreun cu celelalte date Pentru tipul ascuns sunt obligatorii atributele name i value ale elementului INPUT. Un exemplu de tipul ascuns este dat mai jos: <HTML> <HEAD></HEAD> <BODY> <FORM name="tranzitii"> <INPUT type="hidden" name="nume_form" value="tranz"> <INPUT type= "hidden" name="cump" value="450"> <INPUT type="hidden" nam="parola" value="abcde"> <INPUT type="text" name="ID" value="Introduceti date" size=30> <P> <INPUT type="submit" value="Trimite"> </FORM> </BODY> </HTML> Browser-ul i va transmite datele codificate: nume_form=tranz&cump=450&parola=abcde&ID=Introduceti+date Se observ c datele din elemente ascunse sunt incluse n datele transmise sub form nume=valoare.

Figura 10. 8. Tipul HIDDEN 123

Tipul CHECKBOX (caset de validare) Acest tip de intrare asigur o caset de validare. Pentru a insera n formular o caset de validare se folosete atributul type cu valoarea checkbox (type =checkbox). ntr-un formular se pot introduce mai multe casete de validare, dar numai casetele de validare bifate sunt transmise de ctre browser. Se poate ca mai multe casete de validare s aib acelai nume. Atributele elementului <INPUT> folosite de tipul checkbox, sunt: name, value i checked. Atributul checked este utilizat n cazul n care dorim ca starea implicit a elementului caset de validare s fie starea selectat. Pentru exemplificare, considerm urmtorul cod HTML: (datele bifate vor fi transmise n flux, dar nu vor fi vizibile n bara de adrese a browser-lui): tip=unt&tip=brinza&box=send <HTML><HEAD></HEAD> <BODY> <FORM name="cumparaturi" method="POST"> <UL> CUMPARATURI <LI> UNT <INPUT type="checkbox" name="tip" value="unt" checked > <LI> CASCAVAL <INPUT type="checkbox" name="tip" value=cascaval > <LI> BRANZA <INPUT type="checkbox" name="tip" value= "branza"> </UL> <PRE> <INPUT type="submit" name= "box" value="SEND"> </PRE> </FORM> </BODY> </HTML>

Figura 10. 9. Tipul Checkbox

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

Atributele asociate tipului reset sunt: name, value i disabled cu semnificaiile deja cunoscute. Dac n exemplu din figura 10.9 se adaug eticheta <INPUT type=reset name=terge value=reset n formular, browser-ul va mai aduga un buton reset.

Figura 10. 10. Tipul Reset

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>

Figura 10. 11. Tipul RADIO

n caseta address a browser-lui nu vor aprea datele, deoarece s-a folosit metoda POST, dar n fereastra COMPOSE va aprea: file:///C:/CARTE_WEB/CAP_WEB_10/ex9_10.html?nume=Popescu+Ion&cod =123456&ex=Tehnologii+Web&categorie=bun&trimite=SEND
126

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

10.4. Elementul TEXTAREA

Elementul Textarea este unul din cele trei elemente care pot fi scrise n interiorul blocului <FORM>...</FORM> (INPUT, TEXTAREA i SELECT). n seciunea precedent a fost detaliat elementul INPUT, cu cele zece valori posibile ale atributului su, TYPE. n aceast seciune se va detalia elementul <TEXTAREA>, care este cel mai simplu dintre elementele unui formular. Acest element permite introducerea unei casete de text cu linii multiple pentru introducerea textelor mari. Pentru a introduce o astfel de caset se folosete blocul <TEXTAREA> coninut </TEXTAREA>. Atributele elementului TEXTAREA sunt: name este numele cmpului care va fi transmis n perechi cu coninutul casetei rows indic dimensiunea n linii a casetei de text n zona vizibil. n cazul n care textul depete numrul de linii indicat ca valoare a acestui atribut, apare o bar de defilare pe vertical cols indic dimensiunea n coloane (adic caractere) a cmpului de textare rezultat. n cazul n care un rnd depete aceast dimensiune, apare o bar de defilare pe orizontal readonly coninutul elementului nu poate fi schimbat de utilizator wrap trateaz ntreruperile de rnd CR/LF i poate avea valorile: soft (valoare implicit) textul se va deplasa automat la rnd nou cnd ajunge la marginea dreapt a casetei. n acest caz nu apare bara de defilare orizontal i se transmit numai caracterele CR/LF introduse de utilizator
127

off caracterele CR/LF sunt introduse de utilizator. n acest caz apare i bara de defilare orizontal hard textul trece automat la rnd nou, dar sunt transmise i caracterele CR/LF inserate automat la trecere la alt rnd.

Pentru exemplificare relum exemplul din figura 10.11 i adugm o caset text cu linii multiple cu ajutorul blocului: <P>COMENTARII: <TEXTAREA name=coment rows=5 cols=50 wrap=off ></TEXTAREA> Formularul va avea adugat caseta text textarea:

Figura 10. 12. Elementul TEXTAREA

10.5. Elementul SELECT

Elementul SELECT ne ofer posibilitatea de a introduce o list de articole, din care pot fi selectate unul sau mai multe articole. La un moment dat dintr-o list poate fi vizibil: un articol, lista va fi afiat ca un meniu pop-up i din list nu se poate selecta dect un singur articol mai multe articole i lista va fi afiat ca o list derulant, caz n care pot fi selectate mai multe articole (utiliznd atributele MULTIPLE i SIZE). Pentru a selecta mai multe elemente se folosete tehnica cunoscut: dac articolele sunt ntr-un interval se ine apsat tasta SHIFT i clic pe primul i ultimul element din interval dac articolele sunt dislocate se apas tasta CTRL i clic pe fiecare element (articol) din list O list este inserat ntr-un formular cu ajutorul marcajului pereche <SELECT>...</SELECT>, iar elementele listei se introduc n interiorul acestui
128

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.

Figura 10. 13. Elementul SELECT - List simpl 129

Un exemplu de list multipl (din care avem posibilitatea s selectm mai multe elemente) ar fi selectarea unor produse dintr-un meniu. Vom defini i un grup de butoane radio pentru a specifica modul de plat. Pentru acest exemplu vom avea urmtorul cod: <HTML> <HEAD></HEAD><BODY> <FORM> <PRE> <B>NUME:</B> <INPUT type= "text" size=20 name="nume"> <B>PAROLA:</B> <INPUT type= "password" name="parola" size="10"> <HR> </PRE> <B>MENIU</B> <SELECT name= "menu" size=3 MULTIPLE> <OPTION value= "nr1">ciorba perisoare <OPTION value= "nr2">supa vacuta <OPTION value= "nr3">gratar porc <OPTION value= "nr4">salata varza </SELECT> <PRE><B>MOD DE PLATA</B> <B>VISA</B> <INPUT type=radio name="plata" value="visa"> <B>MASTERCARD</B> <INPUT type=radio name="plata" value="master"> <B>CASH</B> <INPUT type=radio name="plata" value="ca" CHECKED> <INPUT type=image src="c:/windows/hlpbell.gif" alt="send" border=0> </PRE> </FORM> </BODY> </HTML> n bara de adrese se pot vedea perechile de date trimise : file:///C:/CARTE_WEB/CAP_WEB_10/ex12_10.html?nume=Ionescu+Ion&parola =2145&menu=nr1&menu=nr3&plata=master&x=23&y=15. Ultimele dou valori reprezint coordonatele punctului de pe imaginea butonului de transmisie, unde s-a dat clic.

Figura 10. 14. Elementul SELECT - List multipl 130

11. Hri de imagine

n capitolul 7 Legturi s-a artat c o imagine poate fi folosit n loc de text la definirea unei legturi, astfel: <A href=adresa_pagina> <IMG src=adresa_imagine> </A> unde adresa_pagina i adresa_imagine sunt adresele URL ale paginii la care se face referin i, respectiv, a imaginii legtur. O imagine poate s ncarce o singur pagin. Hrile imagine permit ns ca o singur imagine s defineasc mai multe legturi. n loc s scriem o list cu legturi spre diferite pagini, se poate ncrca o imagine grafic i, executnd un clic pe o anumit zon a ei, s se execute una din operaiile definite n capitolul 7 (ncrcarea unei pagini, trimiterea la o adres email, evidenierea unei ancore etc.), prin executarea unui clic n alt zon s se execute alt operaie etc. Hrile imagine sunt elemente grafice care dispun de zone specifice asociate cu diferite URL-uri. Exist 2 ci de realizare a unei hri imagine: Definirea hrii imagine pe server Definirea hrii imagine la client

11.1. Definirea hrilor imagine pe server

Acest mod de definire nu face obiectul acestui capitol, dar va fi descris succint. n acest mod de definire a hrilor pe server trebuie interacionat, n mod constant, cu server-ul. Definiiile de regiuni i alte calcule de arie care trebuie introduse, se efectueaz pe server, numai dac server-ul permite acest lucru. n acest caz, codul HTML, care conine imaginea, este mpachetat ntr-un href ce indic un fiier de tip MAP (fisier.map), coninut de serverul Web care specific toate zonele imaginii i le asociaz unor URL-uri. Eticheta <IMG> va conine un atribut ISMAP care indic faptul c imaginea inclus este o hart. De exemplu: <A href=http://www.mysite.com/bucuresti.map> <IMG ISMAP src=bucuresti.gif border=0> </A <BR> <B>click pe un anumit sector</B>
131

Urmeaz trasarea zonelor care pot fi de diferite forme. Formatul fiierelor .map i testarea hrilor la server depind de serverul pe care se lucreaz. Unele servere permit s indicm un fiier aflat oriunde n sistem, altele solicit ca aceste fiiere s se afle ntr-un director special de fiiere map, sau altele nu permit lucrul cu astfel de fiiere. Exist servere Web cunoscute ca CERN i NCSA. CERN este institutul elveian, din care s-a desprins o echip condus de Sir Tim Berners Lee care a creat spaiul World Wide Web, limbaje specializate, precum SVG (Scalable Vector Graphics), SMILE (Synchronized Multimedia Integration Language) etc. NCSA este Centrul Naional pentru Aplicaii de Super Calculatoare (National Center for Super-Computers Applications) al Universitii din Illinois, care a elaborat programul de navigare Web Mozaic. Serverele NCSA folosesc, pentru fiierele.map, formatul: forma/URL/coordonate, astfel : circle Bucuresti.html 100, 200, 100 n timp ce serverele CERN folosesc formatul forma/coordonate/URL, iar coordonatele apar n perechi, astfel: rect (100,200), (200,300) Paris.html

11.2. Definirea unei hri imagine la client

Pentru a nltura dificultatea lucrului cu hri pe server exist varianta de definire a hrilor de imagine la client, adic deplasarea lucrului de la server la client. n ambele variante de lucru cu hri imagine (la server sau la client) exist programe pentru trasarea zonelor care ne scutesc de munca dificil de a evidenia zone pe hart, mai ales dac acestea sunt poligoane. Un astfel de program este MAP THIS care va fi descris n seciunea urmtoare. Pentru a defini o imagine hart, avem de parcurs trei pai: inserarea unei imagini inserarea hrii inserarea legturilor n continuare se va prezenta succint fiecare din cele trei etape. Inserarea unei imagini Pentru inserarea unei imagini ca o hart se folosete un atribut usemap al elementului IMG care are ca valoare un nume ce reprezint un identificator intern de hart i care nume este precedat de caracterul # (ca i n cazul ancorelor). Numele dat imaginii de hart va fi numele hrii. De exemplu: <IMG src = C: / POZE / Radu-Florin.jpg usemap = #copii> Inserarea hrii imagine Pentru definirea unei hri imagine se folosete tag-ul pereche <MAP> </MAP>. n interiorul acestui tag se gsesc unul sau mai multe tag-uri <AREA>, cte unul pentru fiecare zon a hrii.
132

Elementul <MAP> are un atribut obligatoriu name, care indic numele hrii i care trebuie s fie acelai cu numele imaginii inserate. <MAP name =copii> Inserarea legturilor Pentru inserarea legturilor se utilizeaz tag-ul <AREA atribute>. Pentru fiecare legtur sau zon dorit se folosete un element AREA n interiorul blocului <MAP></MAP>. Elementul AREA va defini o zon din hart, zon pe care, dac se execut un clic, se va ncrca o pagin sau o alt operaie. Atributele elementului AREA sunt: shape definete forma zonei respective i poate avea valorile: rect sau rectangle pentru definirea unei zone dreptunghiulare circ sau circle pentru definirea unei zone circulare poly sau polygon pentru definirea unei zone poligonale default pentru definirea zonelor la care nu sunt definite legturi (Internet Explorer nu accept acest atribut. El a fost testat cu browser-ul Mozilla FireFox) href adresa URL a unei resurse Web sau locale pentru care a fost creat o zon. Dac pentru o zon creat nu se dorete s se stabileasc o legtur nu se folosete acest atribut sau se folosete nohref coords indic coordonatele zonei respective Se tie c orice imagine rasterizat este format din pixeli. Un pixel este caracterizat de coordonatele sale (x,y), raportate la sistemul : (0,0) X

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

CIRCLE coords=a,b,r definesc coordonatele centrului unui cerc, respectiv raza cercului R (a,b)

POLY coords =X1,Y1,X2,Y2,Xn,Yn definesc coordonatele vrfurilor unui poligon, (Xi,Yi)

(X2,Y2) (X3,Y3) . . (Xn,Yn)

(X1,Y1)

target definete fereastra n care va fi ncrcat resursa title se utilizeaz pentru inserarea unei sugestii cnd mouse-ul este deasupra unei zone n exemplul de mai jos se definete o hart imagine cu 4 zone de legtur. Este harta unei vile. Zonele delimiteaz nivelele vilei i fac trimitere la fiierele: Parter.html, EtajI.doc, EtajII.doc. n cazul n care se d clic n alt zon din hart (dect cele definite), se face trimitere la fiierul Intretinere.xls <HTML> <HEAD> </HEAD> <BODY> <PRE> <B>Casa mea <B> </PRE> <IMG src="casa.jpg" usemap="#casa"> <MAP name="casa"> <AREA shape="rect" coords="146,225,363,263" href="PARTER.html" <AREA shape="poly" coords="115,149,185,145,357,145,360,218,145,219,116,174" href="ETAJI.doc"> <AREA shape="circle" coords="242,97,50" href="EtajII.doc" title=apasa aici target=new> <AREA shape="default" href="INTRETINERE.xls"> </MAP> </BODY> </HTML>

134

135

Figura 11. 1. Hri de imagine

11.3. Programul MAP THIS

Problema care se ridic n cazul definirii zonelor ntr-o hart de imagine este determinarea coordonatelor, mai ales dac zona este poligonal. Dac se face o imagine n PAINT, pentru dreptunghi i cerc se pot determina coordonatele. Dar mai simplu este s obinem coordonatele zonelor automat cu ajutorul unor programe speciale, de exemplu MAP THIS. Programul MAP THIS este folosit n scopul obinerii automate a coordonatelor punctelor care definesc zonele, pentru o imagine .jpeg sau .gif. Pentru aceasta se ncarc o imagine n formatele precizate anterior i se traseaz cu mouse-ul zone pe ea i apoi se salveaz n format .html coordonatele
136

obinute. Programul se poate lua de pe Internet, este free i este asemntor programului BITMAP (acesta din urm ns nu genereaz automat coordonatele, ci numai le afieaz n bara de stare). Paii care trebuie urmai pentru a mpri o imagine .gif sau .jpeg n zone sunt: 1. Se lanseaz programul MAP THIS, se apeleaz menu-ul FILE comanda NEW, Okay. Va aprea o fereastr cu fiierele .gif i .jpeg.

Figura 11. 2. Incrcarea unei imagini

2. Fereastra poate fi redimensionat cu ZOOM IN OUT (micoreaz).

(mrete) ZOOM

Figura 11. 3. Hart imagine 137

3. Pentru trasarea zonelor se apas n bara de butoane pe butoanele: pentru dreptunghi pentru cerc pentru poligon Pentru a trasa o linie poligonal se execut cu clic n locul de Start, apoi se traseaz o linie a poligonului, apoi iar un clic, .a.m.d. n final, pentru a ncheia zona poligonal se execut dublu clic.

Figura 11. 4. Trasarea zonelor

tergerea unei zone Se selecteaz zona care se dorete a fi tears, prin apsarea butonului deasupra zonei i se d comanda DELETE AREA sau se apas 4. Dup trasarea zonelor, trebuie s adugm referine pentru fiecare din ele. Pentru aceasta, din meniul View se selecteaz Area List i va aprea n stnga ferestrei o list cu zonele numerotate:

138

Figura 11. 5. Lista zonelor

Cnd este selectat un element al listei va aprea zona corespunztoare, selectat cu o alt culoare. 5. Dac se efectueaz dublu clic pe o imagine se deschide o fereastr, cu numele zonei n care apare o caset pentru a trece adresa fiierului URL legtur.

Figura 11. 6. Adresa fiierului legtur

6. Dup definirea zonelor i a URL-ului la care se leag zonele definite se salveaz fiierul, astfel: FILE-SAVE AS -CSIM i se salveaz sub numele .html. Dac se salveaz: ntr-un fiier deja existent care conine imaginea introdus, va aprea codul pentru hart <MAP><AREA 1>..<AREA n> <MAP> ntr-un fiier nou, urmeaz ca n acesta s fie inserat imaginea cu <IMG> i harta este complet definit Fiierul a fost salvat ntr-unul nou cu numele facultmat.html, iar harta cu numele facmat.
139

<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:

Figura 11. 7. Fiierul html creat cu MAP THIS

Clic n partea stng: se deschide fiierul istoric .doc, clic n centru: se obine legtura la site-ul facultii de matematic i clic dreapta: se va obine fiierul sali_calculatoare.HTML.

140

Figura 11. 8. Fiierele legtur la hart

141

12. Faciliti suplimentare Multimedia

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: Application dac fiierul este de aplicaii (de exemplu, WORD) Mediu de exemplu text, image, video etc. dac fiierul este de date. n acest caz mai apare o caset Open With care indic aplicaia prestabilit care va deschide fiierul respectiv de date

12.1. Multipurpose Internet Mail Extensions (MIME)

Pentru a putea fi recunoscute de aplicaiile hypermedia, fiecare fiier de date trebuie identificat printr-un tip MIME (Multipurpose Internet Mail Extension). MIME a fost realizat de Internet Engineering Task Force (IETF) n 1992. Standardul MIME organizeaz extensiile fiierelor multimedia n tipuri i subtipuri (de exemplu, text/html, text/CSS, image/jpg, image/gif etc.).
142

n capitolul 2 am clasificat fiierele de date pe diferite medii. n tabelul de mai jos vor fi date o parte din fiierele de date, specificnd extensia, tipul i subtipul MIME.
Descriere 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 Extensie de fiier 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 ppt wrl,vrml Tip/subtip MIME 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 application/vnd.ms-powerpoint x-world/x-vrml

12.2. Aplicaii Plug-in i ActiveX

Aplicaiile dependente sunt utilizate ca elemente ajuttoare pentru alte aplicaii. Dintre acestea, vom discuta despre programele de completare (plug-in) i controale ActiveX.

12.2.1. Plug-in programe de completare

Plug-in-urile sunt aplicaii dependente care ajut browser-ele s afieze corect datele din fiierele de date, n ferestrele browser-ului.
143

Aceste programe se gsesc pe Internet i se pot descrca gratuit. Fiecare program de completare are n vedere o serie de extensii de fiiere i tipuri MIME. De exemplu, programul Adobe Acrobat lucreaz cu fiiere .pdf, iar tipul MIME este application/pdf. n tabelul de mai jos sunt date cele mai utile programe de completare:
Nume program Windows Media Player Extensii de nume de fiier acceptate .asf,.asx,.wma, .wax,.wmv, .wvx .aiff,.au,.mpeg, .wav,.aif,.mid, .png,.tif,.tiff, .bmp,.ptng, .png,targa,.avi, .flc,.mpe Tipuri MIME acceptate application/x-mplayer2,application/asx, video/x-ms-asf-plugin,video/x-ms-asf, video/xms-wm, audio/x-ms-wax, video/x-ms-wmv, video/x-mswvx audio/aiff,audio/basic,audio/midi,audio/mpeg, audio/wav, audio/x-aiff, audio/x-midi,audio/xmpeg, audio/x-wav,image/png,image/tif, image/x-bmp, image/x-macpaint, image/x-photoshop,image/xpng, image/x-sgi,image/x-targa,image/x-tiff,video/avi, video/flc, video/mpeg, video/quicktime,video/xmpeg, video/x-msvideo Audio/mid,application/ x-msdownload, Audio/mpeg,audio/mpg,audio/mpg, audio/mp3, audio/x-mpg,Application/x-winamp-plugin, Interface/x-winampskin, Application/x-mpeg,audio/x-mp3,Audio/xscpls,audio/mpegurl, Audio/mpegurl,audio/scpls, Audio/x-vnd.Audio.Explosion. Mjuide Media Application/futuresplash, Application/x-shockwave-flash Application/pdf

Apple Quick Time

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

Fiecare control ActiveX se introduce n paginile Web cu ajutorul etichetei <OBJECT> i cu parametrii specificai de eticheta <PARAM>, etichete care vor fi descrise n seciunile urmtoare.

12.3. Elemente OBJECT i PARAM

Elementul OBJECT este un element foarte important, considerat i ca superelement deoarece permite introducerea n fereastra browser-ului a oricrui tip de informaie multimedia (imagini, aplicaii, fiiere, alte pagini Web i ActiveX). Sintaxa acestui element este: <OBJECT atribute> <PARAM atribute> .. <PARAM> </ OBJECT> Dup cum se observ ntre tag-urile <OBJECT> i </ OBJECT> se pot introduce mai multe elemente <PARAM >. Atributele elementului OBJECT sunt: hight, width definesc nlimea, limea elementului multimedia inserat align definete alinierea elementului multimedia inserat hspace, vspac definesc spaiul alb din jurul elementului inserat border definete spaiul alb i chenarul din jurul elementului inserat title indic o sugestie atunci cnd suntem cu mouse-ul deasupra elementului data indic afiarea de ctre browser a fiierului multimedia i are ca valoare o adres URL valid type determin tipul i subtipul MIME asociat fiierului id indic un nume ce reprezint un identificator unic de clas classid specific elementul de control ActiveX ce va fi folosit pentru a reda/afia/rula fiierul multimedia inserat. Acest atribut are ca valoare un cod unic al clasei unui control Microsoft ActiveX recunoscut, care se gsete n Registry Editor i are forma: classid:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

Tabelul de mai jos conine cele mai importante controale ActiveX mpreun cu valorile atributului classid:

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

NOT: cnd se instaleaz un program el se nregistreaz n registre pentru aplicaii ale Windows-ului. Fiecare aplicaie are un cod unic, numit GUID (Globally Unique IDentifier), care este acelai pe orice calculator. Pentru a afla codul GUID pentru un anumit program se execut programul Regedit.exe ( Start / Run / Regedit.exe) i se caut n registre la HKEY _CLASSES _ ROOT / CLSID. Dac programul nu este gsit n registre de ctre browser, nseamn c el nu este instalat pe calculatorul propriu i pentru a-l descrca i instala se folosete atributul: codebase care indic browser-ului locaia de unde se poate descrca programul, de obicei se introduce locaia kitului de instalare (n acest curs presupunem c programele sunt instalate).

146

Figura 12. 1. Aflarea codului GUID pentru controlul A

Cu ajutorul marcajului OBJECT i a atributelor sale, enumerate mai sus, se poate insera un obiect ntr-o pagin. Marcajului <OBJECT> i se asociaz marcajul <PARAM> care indic fiierul care trebuie s ruleze acest obiect i n ce mod (aa cum un obiect deine
147

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>

Figura 12. 2. Inserarea fiierelor cu ajutorul elementului OBJECT

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>

Figura 12. 3. Inserarea imaginilor cu elementul OBJECT

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>

Figura 12. 4. Inserarea controalelor ActiveX

12.4. Elementul MARQUEE

La finalul descrierii limbajului HTML, descriem elementul MARQUEE, cu ajutorul cruia putem realiza animaie, necesar, de exemplu, n publicitate. Sintaxa acestui element este <MARQUEE> bloc </MARQUEE>, unde coninutul blocului se deplaseaz ntr-o anumit direcie pe ecran i poate conine text i/sau imagini. Un exemplu simplu este dat mai jos:
150

<HTML> <HEAD> </HEAD> <BODY> <MARQUEE> Acesta este casa de vacanta! <IMG src=casa.jpg width=150 height=150> </MARQUEE> </BODY> </HTML>

Figura 12. 5. Elementul MARQUEE

Atributele elementului MARQUEE sunt: direction indic direcia de micare a blocului i poate lua valorile: left valoare implicit, de la dreapta la stnga right de la stnga la dreapta down de sus n jos up de jos n sus behavior indic tipul de scroll i poate lua valorile: scroll valoare implicit, coninutul blocului se deplaseaz de la o margine la alta continuu, prsind ecranul i apoi reapare slide coninutul blocului se oprete la marginea opus apariiei alternate coninutul blocului se deplaseaz alternativ de la o margine la alta a ecranului fr s-l prseasc
151

scrolldelay determin timpul n milisecunde ntre dou afiri consecutive ale blocului (valoarea implicit este 85). Exemplu <MARQUEE scrolldelay=1000> bloc </MARQUEE> determin deplasarea coninutului blocului la interval de 1 secund scrollamount determin numrul de pixeli cu care se mut coninutul blocului la un pas (valoarea implicit este 6) loop indic numrul de cicluri pe care le efectueaz coninutul blocului ntr-o execuie (valoare implicit infinit); acest atribut trebuie folosit cu atributul behavior=slide, altfel coninutul blocului dispare cnd se termin ultimul ciclu bgcolor determin culoarea de fond a spaiului unde se deplaseaz coninutul blocului width determin dimensiunea blocului n lime i se exprim n pixeli sau procente height determin dimensiunea blocului n nlime i se exprim n pixeli sau procente vspace determin spaiul alb din jurul blocului pe vertical hspace determin spaiul alb din jurul blocului pe orizontal n continuare se d un exemplu atractiv, n care se folosesc dou elemente MARQUEE. Unul n care introducem mai multe imagini de grup (una lng alta), i care va defila n mod continuu pe ecran, iar cel de al doilea conine un text explicativ despre grup. Codul HTML pentru acest exemplu este: <HTML> <HEAD> </HEAD> <BODY> <MARQUEE direction=right behavior=slide bgcolor=magenta scrolldelay=100> <IMG src=radu.jpg width=200 height=150 > <IMG src=fam.jpg width=150 height=150> <IMG src=cori_florin.jpg width=200 height=150 > <IMG src=silviu.jpg width=150 height=150 > </MARQUEE> <MARQUEE direction=right bgcolor=red scrolldelay=100 height=25%> FAMILIA MEA </MARQUEE> <BODY> <HTML>

152

Figura 12. 6. Elementul MARQUEE cu atribute

153

154

PARTEA A II-A CSS

155

156

13. CSS-Cascading Style Sheets (Foi de stil n cascad)

13.1. Introducere n modelele de stiluri

CSS constituie un instrument avansat de formatare a oricrui marcaj HTML, n vederea realizrii unor pagini WEB profesionale. Foile de stiluri HTML sunt asemntoare cu stilurile de formatare a unui document WORD i permit introducerea unei mulimi de atribute prin care se pot defini fonturi, culori, alinieri etc. Consoriul Web W3C de la CERN(realizatorul spaiului Web) pune la dispoziia creatorilor de pagini ntreaga specificaie CSS la locaia

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

13.2. Stiluri interne (in-line)

n capitolele precedente am definit elementele HTML mpreun cu atributele lor specifice, necesare realizrii paginilor WEB. Majoritatea elementelor HTML (cu excepia celor enumerate mai sus) admit urmtoarele atribute: style atribuie un stil intern unui element. Valorile posibile sunt specificaii (declaraii) de stiluri, separate prin ;, ca de exemplu style=font-style:italic; font-size=10pt

157

title definete o informaie pentru un element. Valorile sunt iruri de caractere scrise ntre ghilimele, care apar ntr-un chenar galben, atunci cnd suntem cu mouse-ul deasupra elementului

dir indic direcia de afiare a coninutului elementului. Valorile posibile sunt: ltr-de la stnga la dreapta i rtl- de la dreapta la stnga
lang definete limba n care va aprea scris coninutul elementului. Valorile posibile sunt maxim 5 caractere ntre ghilimele, de exemplu en, en-us id definete un identificator unic pentru un element (a fost folosit n capitolul precedent ca atribut al elementului OBJECT) class definete o clas a elementului. Valorile posibile sunt liste de unul sau mai muli identificatori separai prin spaiu, de exemplu class=nume1,.....,numen Stilul in-line pentru un element este introdus printr-un atribut STYLE. Valoarea acestui atribut este o list de specificaii de stil, separate prin ; i cuprinse ntre ghilimele. O specificaie de stil sau o declaraie de stil este ca un atribut pentru un marcaj, dar cu urmtoarea sintax: nume proprietate:valoare-proprietate unde: nume-proprietate definete o proprietate i nu este cuvnt rezervat valoare-proprietate - este o valoare credibil pentru proprietate Exemple de declaraii de stil : color: yellow stabilete culoarea galben a textului font-style: italic stabilete stilul cursiv pentru text Cu ajutorul stilurilor interne pentru un element se poate obine o mulime de efecte locale. Modelele de stil in-line se obin aadar prin adugarea atributului style la anumite marcaje HTML, conform sintaxei: style=specificaie1; specificaie2; ...; specificaien

n anexa C este dat un tabel complet cu specificaiile(declaraiile) de stil. O parte dintre aceste declaraii, grupate pe categorii (de text, de culoare, de margini etc.), va fi detaliat n capitolul urmtor.
n exemplul de mai jos se definesc modelele de stil in-line, precum i unele atibute comune marcajelor, definite mai sus: <HTML> <HEAD></HEAD> </BODY> <H2 title= Despre tabele style="font-style:italic; font-size:20pt; fontweight:extra-bold; text-decoration:underline; text-align:center;"> TABELE </H2> <P dir=rtl style="font-size:12;color:green;font-family:curier,arial;">
158

TABELELE SUNT FOLOSIT PENTRU EVIDENTIEREA UNOR DATE SAU PENTRU A DELIMITA SPAIUL UNEI PAGINI </P> <TABELE> <TR><TD align=center><IMG src="univ.jpg width=100 height=100 "style="cursor:crosshair;"> <TR><TD width="10%" STYLE="text-align=center; color:DarkRed; background:yellow; text-transform:uppercase"> UNIVESITATEA SPIRU HARET </TABLE> </BODY> </HTML>

Figura 13. 1. Stiluri in-line

13.3. Foi de stil n pagin

n aceast seciune vom extinde stilurile de la un element HTML, cum au fost definite n seciunea precedent, la toate elementele de acelai tip (de exemplu, P) dintr-un document. Pentru a defini foile de stil, introducem noiunile de bloc de specificaii, selector i regul. Un bloc de declaraii sau specificaii este o list de specificaii separate prin ; i cuprinde ntre acolade, {...}, de exemplu: {font-size:20pt ;color:red; font-style:italic;}. ntr-un bloc de declaraii, ultimul simbol ; poate lipsi. Un selector sau tip de declaraii este un obiect cruia i se aplic declaraiile definite sau blocul de declaraii.
159

Exist mai multe categorii de selectori: de tip sunt elementele HTML, definite n capitolele trecute Id sunt identificatori introdui mai sus Class de clas Universali definii prin simbolul * i care se aplic oricrui element pseudo-clase definesc clase a cror nume este un cuvnt rezervat pseudo-elemente definesc anumite pri dintr-un element (de exemplu, prima liter dintr-un paragraf) De exemplu, dac dorim s aplicm un stil oricrui element de tip <P> din pagin, putem scrie P{font-size:15pt;color:red;text-align:center;}. O regul sunt perechi formate dintr-un selector (sau tipul declaraiei) i dintr-un bloc de declaraii, cu urmtoarea sintax: selector{bloc de declaraii} sau selector{declaraia1;.....declaraian;}. Foile de stil sunt alctuite dintr-un set de reguli. Foile de stil se trec n interiorul tag-ului pereche <STYLE> ....</STYLE>, care se scrie n interiorul blocului de antet, astfel: <HTML> <HEAD> <STYLE> selector1 {bloc de declaraii} selector2{bloc de declaraii} selectorn{bloc de declaraii} </STYLE> </HEAD> <BODY> .............. </BODY> </HTML> Dac se dorete aplicarea unui stil asupra mai multor elemente, atunci selectorii se vor grupa ntr-o list de selectori, separai prin virgul(), s1,s2,s3.....{..}. De exemplu: P, H2, DIV {color:blue; background:yellow;} Un atribut al elementului style este type, care definete sintaxa foii de stil, utilizat la definirea declaraiilor. Atributul type are valoarea prestabilit text/css. Aa cum spune i numele, CSS semnific foi de stil n cascad, iar text specific faptul c specificaiile de stil sunt reprezentate sub form de text, care este i singura valoare posibil. Dac se dorete s se asigure compatibilitatea cu browser-ele mai vechi, care nu recunosc stilurile, foile de stil se pot include intr-un comentariu HTML, astfel: <HEAD> <STYLE type=text/css> /* foaie de stil */ </STYLE> </HEAD>
160

Am menionat mai sus faptul c exist un selector universal, indicat prin simbolul * i care corespunde oricrui element. Un exemplu de foi de stil n pagin este redat mai jos: <HTML> <HEAD> <STYLE> P{font-size:20pt;font-weight:light;color:red;text-align:center:} *{font-style:italic;} OL{font-size:20pt;background:cyan;} LI{font-size:15pt;color:blue;} A{text-decoration:none;color:grown;} </STYLE> </HEAD> <BODY> <P><B>List </B>este un mod de organizare in care mai multe enunuri pot fi numerotate, marcate sau definite intr-un anumit fel . <OL>n HTML exist trei tipuri de liste: <LI>Liste ordonate(Ordered list - OL) <LI>Liste neodornate(Unordered list - UL) <LI>Liste de definiie(Definiion list - DL) </OL>

Aceasta este o legatura la lista universitailor particulare acreditate, de pe site-ul MEC

<A href="http://www.edu.ro/index.php/articles/3880"> USH </A> </BODY></HTML>

Figura 13. 2. Foi de stil interne

161

13.3. Foi de stil externe

n seciunea precedent am definit stiluri pentru selectorii de tip (elemente HTML) dintr-un fiier HTML. n aceast seciune se arat cum se pot extinde stilurile la toate paginile Web de pe server-ul utilizat. Dac s-ar copia foaia de stil din pagina n care a fost definit n mai multe pagini n care dorim s apar foaia de stil respectiv, ar aprea un inconvenient, constnd n faptul c, atunci cnd se dorete o modificare de stil, modificarea respectiv trebuie fcut n toate paginile n care a fost copiat foia de stil. Soluia de nlturare a acestui inconvenient const n executarea urmtorilor pai: se creeaz foaia de stil ntr-un fiier extern, care se salveaz cu extensia .css se leag acest fiier de orice pagin Web care dorim s aib acelai aspect. Pentru a crea o legtur ntre o pagin Web i un fiier foaie de stil extern (.css), se folosete tagul <LINK> care se scrie n blocul de antet (<HEAD>...</HEAD>) al respectivei pagini. Elementul LINK Aa cum am menionat, legtura dintre o pagin i un fiier .css, se realizeaz cu elementul LINK. Sunt obligatorii trei atribute ale elementului LINK: type indic browser-ului limbajul n care este scris codul i are valoarea unic text/css rel definete tipul de fiier .css i are valoarea stylesheet hre f- are ca valoare adresa URL a fiierului foaie de stil extern (.css), care conine foaia de stil care se leag. Pentru exemplificare, considerm foaia de stil creat n exemplu 13.2 pe care o copiem ntr-un fiier nou Notepad i pe care l salvm cu extensia .css astfel: stil-extern.css. n partea de cod a paginii se nlocuiete blocul <STYLE> ... </STYLE> din antet cu tagul <LINK> plasat tot n antet. Codul fiierului stil-extern.css este: P{font-size:20pt;font-weight:light;color:red;text-align:center;} *{font-style:italic;} OL{font-size:20pt;background:cyan;} LI{font-size:15pt;color:blue} A{text-decoration:none; color:BlueViolet;} Codul html care se va lega la acest fiier va fi: <HTML> <HEAD> <LINK type="text/css" rel="stylesheet" href="STIL_EXTERN.CSS"> </HEAD> <BODY> <P><B>Lista </B> este un mod de organizare in care mai multe enunturi pot fi numerotate, marcate sau definite intr-un anumit fel <P>
162

<OL>In HTML exista trei tipuri de liste: <LI>Liste ordonate(Ordered list - OL) <LI>Liste neodornate(Unordered list - UL) <LI>Liste de definitie(Definition list - DL) </OL> Aceasta este o legatura la lista universitatilor particulare acreditate, de pe site-ul MEC<BR> <A href="http://www.edu.ro/index.php/articles/3880">USH</A> </BODY> </HTML>

Figura 13. 3. Foi de stil externe

13.5. Stiluri n cascad

CSS (Cascading Style Sheets) semnific, aa cum sugereaz numele, foi de stil n cascad, pe care ni le putem imagina ca pe o cascad care se rostogolete peste o nlime virtual, constnd dintr-un cod HTML. Aceasta impune o anumit preceden (ordine de aplicare a stilurilor asupra unui element) i anume: 1. Se aplic stilurile interne pentru un element, dac acestea exist 2. Se aplic foile de stil interne unei pagini (definite n antetul paginii), dac acestea exist 3. Se aplic foile de stil (definite n fiiere externe), dac acestea exist 4. Dac nu exist stiluri definite se aplic stiluri HTML predefinite (de exemplu, pentru font, size=3) Un exemplu de stiluri aplicate n cascad este dat mai jos: <HTML> <HEAD> <TITLE>Stiluri-cascada</TITLE> <LINK type="text/css" rel="stylesheet" href="cascada.css"> <STYLE> A{font-style:italic;font-wight:bold;}
163

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;}

Figura 13. 4. Stiluri n cascad

164

13.6. Stiluri pentru diferii selectori

Stilurile se pot aplica selectorilor de tip (elemente HTML), aa cum s-a procedat n seciunile precedente, sau altor selectori, care sunt elemente definite de programatorii paginii Web, sau sunt elemente predefinite. n aceast seciune, vor fi definii i exemplificai n subseciuni separate: selectorii definii ID i CLASS selectorii predefinii pseudo-class i pseudo-element

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>

Figura 13. 5. Selectorul ID

165

13.6.2. Selectorul CLASS

CSS poate defini i clase de elemente. Ca i atributul id, i atributul class este acceptat de majoritatea elementelor HTML. Se pot utiliza clase n definirea unui stil, sintaxa selectorului CLASS fiind numele clasei precedat de simbolul punct (.), astfel: .nume-clas{bloc de declaraii} Atributul class are sintaxa binecunoscut a atributelor elementelor HTML: class=nume-clas n cazul n care se doresc mai multe stiluri de clas (c1{ }, c2{ },......cn{ }) atunci valoarea atributului class poate s fie o list de nume-clas, separate prin spaii (class=c1 c2 cn), aa cum rezult din exemplul urmtor: <HTML><HEAD><STYLE> .cod{background:cyan;font-family:courier;} .note{text-transform:uppercase;color:red;text-decoration:none;} </STYLE></HEAD><BODY> <P>Acesta este un paragraf fara stil <P class="cod">Acesta este un paragraf scris cu stilul cod (fontul courier pe fundal cyan) <P class="note">Acesta este un paragraf scris cu stilul (culoarea rosie i litere mari) <P class="cod note">Acesta este un paragraf de observaii scris cu stilurile celor dou clase <P>Codul<B class="cod"> HTML</B> este executat de browser-ul <I class="note">nternet Explorer</I></P> <A href="Universitati.html"class="note"> Universitati-(o legatura)</A> </BODY> </HTML>

Figura 13. 6. Selector de clas

Dac se dorete o clas pentru un anumit element HTML (de exemplu, pentru elementul <P>), atunci selectorul se definete prin nume element i nume clas, separate prin punct (.). n acest caz stilurile vor avea forma: element.nume-clas {bloc de specificaii de stil}.
166

n exemplul de mai sus, aplicm selectorul de clas note numai elementului P, astfel: P.note{text-transform:uppercase;color:red;text-decoration:none;} Tag-urile <A class=note>, <I class=note> <B class=note>, dei au definit stilul note, acesta nu se poate aplica, deoarece stilul .note se aplic numai paragrafelor.

Figura 13. 7. Selector de clas pentru un tag HTML

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

Figura 13. 8. Selectori id i class

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 ; .

Vom exemplifica foile de stil pentru pseudo-clasele: first-child i legturi Pseudo-clasa first-child
Aceast pseudo-clas aplic stilul definit primului copil al elementului printe i are sintaxa: element:first-child{...}. n exemplul de mai jos formatm primul element (copil) dintr-o list (printe) i prima linie (copil) dintr-un tabel (printe). <HTML> <HEAD> <STYLE> LI:first-child{color:blue;text-size:20pt;background:yellow} TR:first-child{font-style:italic;fontweight:bold;background:cyan;color:red} </STYLE> </HEAD> <BODY> <UL>Valorile atributului color: <LI> nume-culoare(red, blue, etc.) <LI>codul RGB in hexazecimal, sub forma #RRGGFF <LI>codul RGB zecimal, de exemplu RGB(0,0,255) pentru albastru </UL> <TABLE border=2 bordercolor=green>
168

<TR><TD>A11<TD>A12 <TR><TD>A21<TD>A22 </TABLE> </BODY> </HTML>

Figura 13. 9. Pseudo-clasa first-child

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

<A href="Fig 13.3.html" >Exemplu stil-extern</A><BR> <A href="Fig 13.4.html">Exemplu stil cascada</A><BR> <A href="Fig 13.5.html">Exemplu stil clasa</A><BR> </BODY></HTML>

Figura 13. 10. Pseudo-clasa legturi

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

</STYLE> </HEAD> <BODY> <P class="par">Paragraf care are doua stiluri pseudo-elemente:first-letter si firstline<BR>Se observa faptul ca prima litera a mostenit si stilul primei linii(subliniat) <CENTER>Acesta este un bloc centart<BR> Are un stil pentru prima litera: culoarea silver, dimensiuni 30pt </CENTER> <DIV>Acesta este un bloc de diviziune<BR> Pentru el s-a stabilit stilul first-line.Prima linie va fi scrisa cu culoarea DarkCyan si cu litere mari </DIV></BODY></HTML>

Figura 13. 11. Pseudo elementele first-letter i first-line

13.7. Elementele DIV i SPAM

Elementele DIV i SPAM au fost introduse n capitolul 3, ca elemente de formatare logic. Am menionat atunci c DIV este un element de nivel bloc, care este afiat la nceput de rnd (ca i <P> sau <PRE>), iar elementul <SPAM> este un element in-line, care poate fi afiat pe acelai rnd cu textul (ca i B, I etc.) Spre deosebire de P, DIV nu las un rnd liber nainte i dup el. Aceste elemente pereche nu accept niciun stil fizic pentru coninut. Din acest motiv ele se utilizeaz mpreun cu CSS pentru a ataa un stil la o seciune dintr-o pagin WEB, cuprins ntre tag-urile <DIV> i </DIV> , <SPAM> i </SPAM>. Am menionat atunci c singurul atribut al lui DIV este align=valoare, atribut pe care SPAM nu l accept deoarece este element in-line. Utiliznd CSS se pot folosi atributele ID i CLASS i pentru DIV i SPAM, care ne permit s introducem stiluri i pentru coninutul lor. Elementul SPAM, chiar dac este element de linie, are sintaxa <SPAM> coninut </SPAM> i permite introducerea coninutului ntr-o linie. n exemplul urmtor, exemplificm ataarea stilurilor CSS pentru elementele DIV i SPAM. <HTML><HEAD> <STYLE> .STIL{background:red; color:blue;}
171

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>

Figura 13. 12. Elementele DIV i SPAM cu stiluri

172

14. Clase de proprieti n CSS

Am artat n capitolul precedent c putem crea stiluri cu ajutorul limbajului CSS (Cascading Style Sheets). Ultima variant CSS2 este mai evoluat, n sensul c poate stabili i poziia unui element n pagin. Legtura dintre HTML i CSS2 se realizeaz cu elementul STYLE. Stilurile sunt formate din mai multe declaraii, care sunt pentru CSS ca atributele pentru HTML. O declaraie este format din proprietate: valoare. CSS ofer o mulime de proprieti, care pot fi grupate n clase din punct de vedere a modului de adresare, ca de exemplu, proprietile pentru: fonturi, text, margini, culoare, borduri etc. n acest capitol vom descrie unele proprieti a claselor enumerate mai sus, o list complet a lor fiind dat n anexa C, mpreun cu valorile lor posibile.

14.1. Casete n CSS

Din punct de vedere al CSS2 orice element HTML este alctuit sub form de caset (aa cum reiese din figura 14.1), format din patru pri: Content (coninut) coninutul format din text sau imagine Padding (estur) zona dintre coninut i bordur. Poate fi dimensionat, dar nu poate fi vizibil printr-o culoare. Border (bordur) marginea elementului care poate fi fcut vizibil dac, de exemplu, i se atribuie o culoare Margin (margine) zona dintre caset i cellalte elemente. Nu este vizibil de ctre vizitatorii paginii.

Figura 14. 1. Elementele unei casete 173

O caset poate fi redimensionat cu ajutorul proprietilor WIDTH i HEIGHT. Proprietatea WIDTH dimensioneaz o caset n lime. Proprietatea HEIGHT dimensioneaz o caset n nlime. Valorile posibile ale acestor proprieti sunt: Lungime exprimat n: in, cm, mm, px, pt, em Procente: relative la fereastra paginii nlimea i limea casetei includ bordura, dar nu includ marginile. Dac coninutul nu ncape n caset redimensionat, atunci nu se respect nlimea i limea date de aceste atribute. n continuare vom prezenta proprietile pentru fonturi, text, culoare, casete, mpreuna cu valorile lor. Deoarece majoritatea acestor proprieti au ca valori inherit(motenit), motenirea valorii printelui, aceast valoare nu va mai fi menionat la valorile proprietilor care vor fi descrise n continuare.

14.2. Fonturi n CSS

n CSS exist un set de proprieti pentru fontul coninutului unui element HTML. Acestea ne permit s schimbm fontul (caracteristicile tipului de liter) i sunt grupate n clasa FONT n CSS. Proprietile pentru fonturi i valorile lor sunt descrise n continuare. Proprietatea font-style - indic stilul cu care browser-ul va afia elementul dorit (de exemplu, P). Valorile posibile sunt: normal italic (cursiv) oblique (nclinat) Proprietatea font-variant indic varianta de font cu care browser-ul va afia caracterele mici. Valorile posibile sunt: normal small-caps (ca i majusculele dar de dimensiuni mai mici) Proprietatea font-weight indic grosimea cu care browser-ul va afia caracterele. Valorile posibile sunt: normal (este implicit i este 400) bold (este 700) bolder (este imediat superioar, dar mai mic dect 900) lighter (valoarea imediat inferioar, dar mai mare dect 100) 100 / 200 / 300 / 400 / 00 / 600 / 700 / 800 / 900 Proprietatea font-size indic browser-ului dimensiunea cu care s afieze caracterele. Valorile posibile sunt: absolute: xx-small / x-small / small /medium/ large / x-large / xx-large relative la valoarea printelui: smaller / larger

174

lungimi n: mm / cm / in(inci) / pc(pica) / px(pixeli) / pt(puncte) / em(relativ la font-style. Un spaiu em este cea mai lat liter a unui FONT, de exemplu M), ex(relativ la cel mai nalt caracter al fontului) Procente(relativ la valoarea printelui, de exemplu: 50%, -20%) Cea mai folosit este valoarea exprimat n puncte (pt). Un font de 10pt msoar 10 pt de la cota superioar a unei litere majuscule sau ascendente (H sau h), pn la cota inferioar a unei litere descendente (g,p). Relaia dintre diferite lungimi este: 1 n=2.56 cm = 72 pt = 6 pc de unde rezult: 1 pt = 0.035 cm i 1 pc = 0.42 cm Proprietatea font-family are rolul de a stabili un set de fonturi cu care vor fi scrise caracterele. Nu se tie dac un vizitator al unei pagini are pe calculator un anumit font, motiv pentru care se consider mai multe familii de fonturi. Valorile posibile sunt: nume de familii, ca de exemplu Arial, Courier, Helvetica etc. Dac o familie este format din mai multe cuvinte, atunci acestea sunt scrise ntre ghilimele, de exemplu Times New Roman nume generic de fonturi, care mai degrab specific un stil dect o familie de fonturi. Numele generice sunt cuvinte cheie i nu se scriu ntre ghilimele. Aceste fonturi sunt: serif, sans-serif, cursive, monospace i fantasy. Este indicat ca ultimul font din list s fie unul generic. Browser-ul va folosi dintr-o mulime de fonturi primul font pe care l recunoate, de exemplu: P {font-family:Courier New, Arial, monospace} Proprietatea font grupeaz proprietile de mai sus. Valorile posibile sunt valorile proprietilor de mai sus, n ordinea: <font-style> <font-variant> <font-weight> <font-size> <font-family> Un exemplu pentru proprietile de font este dat mai jos: <HTML><HEAD> <STYLE> OL {font:italic small-caps bold 18pt Courier New serif;} LI{font-style:italic; font-size:15pt;font-family:Arial, serif;} SPAN { font-variant:small-caps; color:red;font-size:1.5 em} P{ font:italic small-caps bolder 15pt Garamond serif;} TABLE{font-variant:small-caps;font-size:small;font-weight:lighter; background:yellow} </STYLE></HEAD> <BODY> <P> Utilizarea proprietilor pentru fonturi </P>
175

<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>

Figura 14. 2. Fonturi n CSS

176

14.3. Proprieti pentru TEXT

CSS are mai multe proprieti pentru TEXT. O parte dintre acestea vor fi descrise mai jos. Proprietatea text-align se folosete pentru alinierea textului. Valori posibile sunt: left right center justify Proprietatea text-decoration permite introducerea unor decoraiuni textului: Valorile posibile sunt: none fr decoraiune underline subliniat overline barat line-through tierea cu o linie blink sclipire Proprietatea text-indent permite identarea primului rnd din bloc cu o valoare precizat: Valorile posibile sunt: lungime n: cm, mm, in, em, pt, px, pc, ex procente relativ la printe Proprietatea text-transform este folosit pentru transformarea unei litere sau a unui text n majuscule. Valorile posibile sunt: none uppercase transform textul n majuscule capitalize transform prima liter de la fiecare cuvnt n liter mare lowercase transform textul n litere mici Proprietatea letter-spacing permite adugarea unui spaiu suplimentar ntre literele unui cuvnt sau literele unui text. Proprietatea word-spacing permite adugarea unui spaiu liber ntre cuvinte. Valorile posibile sunt: normal o lungime exprimat n: in, cm, mm, pt, px, pc, em Proprietatea white-space permite introducerea spaiului alb n interiorul unui bloc de text (P, DIV, CENTER). Valorile posibile sunt: normal nlocuiete o secven de spaiu cu un spaiu all sunt considerate toate spaiile nowrap nu sunt considerate ntreruperile de rnd

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>

Figura 14. 3. Proprieti de spaiere text n CSS

Proprietatea line-height ne permite s modificm distana dintre rndurile unui text. Aceast proprietate poate fi utilizat pentru: un element de nivel bloc pentru a stabili distana dintre fiecare element inline (de exemplu pentru blocul OL, pentru fiecare element inline LI)
178

un element inline, pentru a stabili distana dintre rndurile elementului (de exemplu, spaiul dintre liniile unui paragraf P) Valorile posibile sunt: o lungime exprimat in: in, cm, mm, pt, px, pc, em un numr ce reprezint un multiplicator pentru determinarea distanei reale (produsul dintre multiplicator i dimensiunea fontului) un procent reprezint un multiplicator Un exemplu este redat mai jos: <HTML><HEAD> <STYLE> UL{line-height:20pt;} P {line-height:2.25;} </STYLE></HEAD> <BODY> <UL> Proprietatiile fontului: <LI> font-size <LI>font-style <LI>font-weight <LI>font-family </UL> <P>Acest paragraf se scrie la un rand si jumtate. <BR> CSS este un limbaj de realizare a stilurilor web.</P> <DIV style="line-height:200%"> Acest bloc va fi scris cu 100%</DIV> Un text fara stil </BODY> </HTML>

Figura 14. 4. Proprietatea line-height 179

14.4. Proprieti pentru padding

S-a artat n introducere c orice element HTML poate fi privit ca un box cu prile: content, padding, border i margin. n seciunea 2 i 3 s-a descris o parte din proprietile pentru partea de coninut (font i text). n aceast seciune se vor descrie proprietile pentru padding. Paddingul (estura) este zona dintre coninut i bordur i are doar caracteristica size. Exist cinci proprieti pentru a indica paddingul unui element, i anume: padding-top padding-right padding-bottom padding-left padding combinaie a celor de sus, valorile fiind date n ordinea (top, right, bottom, left) Valorile posibile sunt: o lime exprim limea zonei de textur i este dat n: in, cm, mm, px, pt, pc, em procent exprim limea n procente relativ la printe OBSERVAII: 1. Proprietile padding-top, padding-right, padding-left, padding-bottom accept numai o valoare 2. Proprietatea padding, care este o combinaie a celor de mai sus, poate accepta 1, 2, 3 sau 4 valori. n tabelul de mai jos se d lista de valori i ordinea de atribuire a lor pentru cele patru proprieti de padding (top, right, bottom i left).
Nr 1 2 3 4 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

Figura 14. 5. Ordinea de atribuire a valorilor

Acest tabel va fi valabil i pentru proprietile definite n urmtoarele dou seciuni (border i margin). Un exemplu pentru aceast proprietate este redat mai jos. <HTML> <HEAD> <STYLE> OL{padding:5pt 20px 2ex 1cm; color:red;} LI{color:Crimson ;} DIV {padding:20px;color:DarkGoldenRod;}
180

</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>

Figura 14. 6. Proprietatea padding

181

14.5. Proprieti pentru bordur

Exist cinci proprieti pentru bordur: border-top bordura de sus border-right bordura dreapta border-bottom bordura de jos border-left bordura din stnga border combinaie a celor de mai sus Pentru fiecare proprietate BORDER se pot stabili trei caracteristici: width grosimea bordurii color culoarea bordurii style modelul bordurii De exemplu, pentru proprietatea border-top avem proprietile: border-top-width border-top-color border-top-style Valorile posibile pentru width sunt: o lime ce reprezint limea fix a bordurii sau a unei pri din ea thin (subire) /medium (mediu) / thick (gros) Valorile posibile pentru color sunt: un nume de culoare un cod RGB Valorile posibile pentru style sunt: None / hidden / dotted / solid / double / groove / inset / outset / ridge / dashed / inherit. Exemplificm mai jos proprietatea border cu cele trei caracteristici: width, color, style. <HTML> <HEAD> <STYLE> td {background:yellow; color:darkcyan;} .bt {border-top-style:dashed; border-top-width:thick; border-top-color:blue;} .br{border-right-style:groove;border-right-width:thin;border-rightcolor:purple;} .bb{border-bottom-style:ridge;border-bottom-width:medium; border-bottomcolor:lime;} .bl{border-left-style:solid;border-left-width:10pt; border-left-color:magenta;} .bord{border-style:outset; border-width:0.5 in; border-color:red;} </STYLE> </HEAD> <BODY>
182

<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>

Figura 14. 7. Proprieti pentru borduri

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>

Figura 14. 8. Proprietatea border cu list de caracteristici

n cazul proprietii BORDER cu cele trei caracteristici (width, size i color) valorile pot fi liste cu 1, 2, 3 sau 4 elemente. C1 C2 C3 border-top are culoarea C1 border-left i border-right C2, iar border-bottom C3. n exemplul de mai jos se d o list de culori, de stiluri i grosimi pentru proprietatea border. Ordinea n list amintim c este sus, dreapta, jos, stnga . <HTML> <HEAD> <STYLE> H3 {border-width:8pt 7pt 9pt 6pt;
184

border-color:red green blue; border-style:solid inset outset;} !*pentru grosimi avem 4 valori (sus, dreapta, jos, stnga) pentru culori i stiluri avem 3 valori (sus stnga-dreapta jos) </STYLE> </HEAD> <BODY> <H3>List de valori pentru borduri</H3> <UL> <LI>grosime <LI>culoare <LI>stil </UL> </BODY </HTML>

Figura 14. 9. List de valori pentru border

14.6. Proprieti pentru partea margin

Exist cinci proprieti pentru partea margin a casetei unui element: margin-left pentru marginea stng margin-right pentru marginea dreapt margin-top pentru marginea de sus margin-bottom pentru marginea de jos margin o combinaie a celor de mai sus Proprietile margin - au o singur caracteristic, dimensiunea (size). Valorile posibile sunt: o lime reprezint limea fix a marginii ce poate fi o valoare ntreag pozitiv sau negativ, exprimat n: cm, in, px, pt, pc, em. un procent relativ de printe
185

n cazul n care folosim proprietatea margin, valoarea poate fi o list de 1,2,3,4 valori cu semnificaia din tabelul 14.5 Proprietatea margin este exemplificat mai jos: <HTML> <HEAD> <STYLE> blockquote {margin-top:0.01in;margin-right:20%;marginbottom:2ex;margin-left:10%;} P{margin: -20pt 10ex 10px; color:SandyBrown ;} DIV{margin:30 pt; color:red;} SPAN{margin 100px 50px; background:cyan;} </STYLE> <BODY> <BLOCKQUOTE>Acest bloc este un citat <SPAN>Omul care nu are nimic de pierdut este cel mai greu de invins<BR> (Goethe)</SPAN>BLOCKQUOTE> <DIV>Acesta e un bloc de diviziune</DIV> </BODY> </HTML>

Figura 14. 10. Proprietatea margin

14.7 Proprieti de culoare pentru casete

n HTML culoarea pentru text era introdus ca valoare a atributului COLOR a elementului FONT sau ca o valoare a atributului TEXT a elementului BODY. Pentru culoarea de fundal se folosea atributul BGCOLOR al elementului TABLE sau BODY, sau atributului BACKGROUND pentru o imagine de fundal.
186

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

Figura 14. 11. Proprieti de culoare

Proprietatea background-attachment permite ca imaginea s se deruleze sau nu, odat cu pagina. Valorile posibile ale acestei proprieti sunt: fixed imaginea de pe fundal rmne fix. Atunci cnd pagina se deruleaz cu ajutorul barelor de defilare numai obiectele ferestrei defileaz (text, alte imagini etc.) scroll imaginea se deruleaz odat cu pagina. Aceasta este valoarea implicat. <HTML> <HEAD> <STYLE> body{background-color:yellow;background-image: URL(ush.jpg);} div {background-attachment:fixed; width:300px; height:200px;} </STYLE> <BODY> <DIV>Acesta este un text despre Universitatea Spiru Haret.</DIV> </BODY> </HTML>

188

Figura 14. 12. Proprietatea attachment

Proprietatea backgroundrepeat se folosete pentru a indica modul de repetare a unei imagini pe orizontal i vertical. n cazul n care imaginea de fundal este mai mic dect spaiul necesar unui element, atunci imaginea se repet att pe orizontal, ct i pe vertical pn acoper aceast suprafa. Se poate controla aceast repetare dnd urmtoarele valori acestei proprieti: repeat (valoare implicit) repetarea se face att pe orizontal ct i pe vertical no-repeat imaginea nu se repet, apare o singur dat n mijlocul casetei repeat-x repetarea se face numai pe orizontal repear-y - repetarea se face numai pe vertical
189

Exemplificarea acestei proprieti se face prin codul de mai jos. <HTML> <HEAD> <STYLE> BODY * {background-image:url(im4.gif);} </STYLE> </HEAD> <BODY > <H2 style="color:darkblue;"> Proprietatea background-repeat </H2> <UL style="line-height:20pt; background-image:url(peace.jpg); backgroundrepeat: no-repeat;color:darkblue"> Proprietati de culoare <LI style="background-image:url(im5.gif); background-repeat : repeatx;"> color <LI style="background-image:url(im2.gif); background-repeat : repeat"> background-color <LI style="background-image:url(bullet.gif); background-repeat : repeaty;color:"> background-image </UL> </BODY> </HTML>

Figura 14. 13. Proprietatea backgroundrepeat

Proprietatea background-position precizeaz poziia din stnga sus a unei imagini, n raport cu partea de sus-stnga a casetei elementului. Dac pentru aceasta proprietate se d:
190

o valoare aceasta reprezint poziionarea pe orizontal dou valori se refer la poziionarea pe orizontal, respectiv pe vertical Valorile posibile sunt: absolute exprimate n: in, cm, mm, pt, px, em (de exemplu:1in 3cm nseamn 1inch de partea stnga i 3cm d3 partea de sus) procentual relativ la colul stnga sus (de exemplu: 50% 50% nseamn c imaginea este poziionat n centru) mixte absolut i procentual (de exemplu: 20% 3cm) prin cuvinte cheie: left, center, right, top, bottom <HTML> <HEAD> <STYLE> BODY{ background-image:url(plaja.jpg); background-attachment:fixed;background-position:50% 50%; background-repeat:no-repeat; background-color:pink;} DIV{margin:20pt;border-color:red;border-width:5pt;border-style:inset; color:darkblue;} </STYLE> </HEAD> <BODY> <H1 style="color:yellow"> Proprietatea background-position </H1> <DIV >Exemplu de imagine de fond care nu defileaz si este poziionata la mijlocul ferestrei </DIV> </DIV> </BODY></HTML>

Figura 14. 14. Proprietatea background-position 191

Proprietatea background este o combinaie a proprietilor de culoare i imagine de fundal. Valoarea acestei proprieti este o list de valori a proprietilor de mai sus, separate prin spaiu i avnd urmtoarea ordine. Background-attachments, background-color, background-image, background- position i background-repeat. Exemplificarea acestei proprieti se face prin codul de mai jos. <HTML><HEAD></HEAD><BODY> <H2 style="background:fixed yellow url(im2.gif) 300px 2cm repeat-y;"> Proprietatea background</H2> <UL style="background:scroll cyan url(im7.bmp) no-repeat; lineheight:20pt;font-size:large;font-weight:900"> Ordinea proprietatilor lui background <LI style= "background:scroll beige url(bullet.gif) 30% repeat-x; "> background-attachment <Li style= "background:scroll bisque url(im5.gif) 30% repeat;"> background-color <LI style= "background:scroll coral url(tips.gif) 100% repeat-y; "> background-image <LI style= "background:scroll beige url(im4.gif) 30% repeat-x;"> background-position <LI style= "background:scroll url(im6.gif) 100% repeat-y;"> background-repeat </UL> </BODY> </HTML>

Figura 14. 15. Proprietatea background

192

15. Poziionarea elementelor n pagin n CSS

Deseori programatorul unei pagini dorete ca elementele HTML folosite s aib o anumit aranjare n pagin. O ntrebare fireasc pe care ne-o punem este: Cum aranjeaz browser-ul n pagin diverse elemente HTML (imagini, text, tabele, liste etc.)? Rspunsul la aceast ntrebare este subiectul acestui capitol. Aa cum s-a menionat i n capitolele precedente, elementele HTML pot fi: elemente de nivel de bloc sunt elementele care sunt afiate la rnd nou (de exemplu: P, DIV, TABLE, TR, OL, LI, UL, DL, DT, H1...H6) Elemente de nivel de text (in-line) - sunt elemente care sunt afiate pe linia curent (de exemplu: B, I, IMG, BIG, SMALL, S, U, SPAN etc.). Browser-ul, cnd primete macheta unei pagini, identific: arborele documentului, care arat aranjarea elementelor ntr-un fiier HTML tipul elementelor (de nivel de bloc sau inline) obiecte flotante obiecte poziionate n seciunile urmtoare se vor prezenta aceste elemente. n anexa B este dat tabelul cu codul unor caractere speciale. Pentru a introduce caractere speciale n HTML se utilizeaz marcaje speciale, numite entiti sau referine de entiti. Entitile (marcajele pentru caracterele speciale) nu sunt incluse ntre paranteze unghiulare (<>). Acestea se introduc, ncepnd cu caracterul ampersand (&) i terminnd punct i virgul (;). Pentru unele caractere exist dou posibiliti de scriere a unui caracter special i anume: prin secvena ampersand (&) diez (#) un numr (160) punct i virgul (;) de exemplu, pentru caracterul special dolar ($) se folosete scrierea &#036 prin secvena ampersand (&) un text punct i virgul (;)
193

De exemplu, pentru caracterul copyright se poate folosi &copy; dar i &#169. Orice caracter se poate scrie cu prima form menionat mai sus, dar unele caractere speciale admit ambele forme. De exemplu, literele cu diacritice romneti nu au forma a doua de reprezentare. Exemple de texte cu caractere speciale: ara mea este frumoas i bogat i se numete Romnia: &#354;ara mea este frumoas&#259; &#351;I bogat&#259 &#351;i se numes&#351;te Romnia La muli ani! La&nbsp;mul&#355;&#160; ani &#033 Aria cercului este R2 : Aria cercului este &#960;R² sau Aria cercului este &#960;R&sup2 sau Aria cercului este &#960;R&#178

15.1. Arborele unei pagini

Aezarea implicit a elementelor n pagin se mai numete i aezare n flux normal. n capitolul precedent s-a artat c orice element HTML poate fi privit ca o caset (box) i cu ajutorul stilurilor se poate vizualiza caseta (culori de font, bordur, textur) i dimensiunea (height i width). Un element poate deine alte elemente, de exemplu DIV poate conine SPAN, un element TD poate conine un element OL sau IMG. n acest caz, spunem c elementele sunt imbricate i de asemenea casetele corespunztoare lor sunt imbricate. Casetele imbricate vor fi aezate de ctre browser n caseta printe, la nivel de bloc sau linie. Aceast aezare n flux normal se mai numete i model caset i genereaz grafic un arbore de elemente. O pagin are doi copii: HEAD i BODY. Se consider frunze ale arborelui orice secven de text care nu are copii. Codul de mai jos va avea arborele din figura 15.1 <HTML> <HEAD> <STYLE> * {border-style:solid; border-color:blue;border-width:thin; margin:5pt} /*bordura solid, de culoare blue, pentru toate elementele HTML, cu exceptia frunzelor(text normal), bordura exterioara este pentru elementul radacina a documentului HTML*/ body *{background:LightGreen;} /*Casetele de la primul nivel a lui body )de exemplu DIV, sunt pe fundal verde deschis*/ body ** {background:yellow;} /*Caseta la nivel 2 a lui body (de exemplu OL pe fundal galben)*/ body ** *{background:cyan;line-height:70%} /*Casetele de nivel 3 a lui body (de exemplu LI pe fundal cyan*/ body {border-color:red;border-style:dotted;} /*Bordura rosie pentru body */ </STYLE> </HEAD> <BODY>
194

Pozitionarea casetelor in<B>flux normal</B> si descoperirea <I>Arborelui paginii</I> <P> Prietenul meu<IMG src ="friend.jpg" width="50" height="50"> Boby <TABLE cellspacing=5 height=20> <TR ><TD>a11<TD>a12 <TR><TD>a21<TD>a22 </TABLE> </P> <DIV style="padding:10pt 5pt ;"> <SPAN> <B> Bloc de diviziune </SPAN> </B> <OL style="padding:5pt 20pt 2pt;">Lista casetelor <LI>Arbore - flux normal <LI>Flotante <LI>Pozitionate </OL> <TABLE cellspacing=5 height=20> <TR><TD>b11<TD>b12 <TR><TD>b21<TD>b22 </TABLE> </DIV></BODY> </HTML>

195

196

HTML

HEAD

BODY

FRUNZ

DIV

FRUNZ

IMG

TABEL

SPAN

OL

TABEL

TR

TR

LI

LI

LI

TR

TR

TD

TD

TD

TD

TD

TD

TD

TD

Figura 15. 1. Arborele unui document

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

15.2. Proprietatea Display

Css ofer posibilitatea de a schimba modul de afiare a tipului elementelor (bloc i inline), prin utilizarea proprietii display. Valorile posibile ale proprietii display sunt: inline elementele se afieaz n continuarea rndului curent block elementele se afieaz la nceput de rnd none elementul nu se va afia Proprietatea Display poate fi aplicat la majoritatea elementelor HTML. Dac n exemplul de mai sus se adaug n cod foaia de stil: *{display:block} elementele vor fi afiate de la rnd nou, aa cum se observ n figura 15.2.

Figura 15. 2. Proprietatea Display: block

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

Figura 15. 3. Proprietatea Display:inline

Se poate ca numai anumitor elemente s li se schimbe modul de afiare,de exemplu, elementul de bloc TABEL dorim s fie afiat inline i elementul de text B s fie afiat la nivel de bloc. n acest caz, adugm n exemplul 15.1, urmtoarele linii de cod : Table {display:inline} B {display:block}

Figura 15. 4. Proprietatea Display:inline i block

199

15.3. Elemente flotante

Modul normal de aezare a elementelor n pagin poate fi modificat cu ajutorul obiectelor flotante i poziionate. Obiectele flotante se definesc cu ajutorul proprietii float care se poate ataa la orice element. Valorile posibile sunt: none caseta nu e flotant right caset flotant spre dreapta left caset flotant spre stnga OBSERVAIE! Obiectele flotante se pot defini: cu atributul align, pentru elementele HTML care-l accept (de exemplu <img align=left>) cu CSS pentru elementele care nu accept atributul align (de exemplu, OL, UL etc.) Dac n exemplul din figura 15.1 adugm liniile de mai jos la foaia de stil OL{float:left} i n corpul programului nlocuim elementul TABLE care definete primul tabel, cu <TABEL style=float:right>, iar elementul IMG, cu <IMG align=left>, atunci va aprea imaginea i primul tabel aliniat la dreapta i lista aliniat la stnga, ca n figura de mai jos:

Figura 15. 5. Proprietatea float

200

Browser-ul execut urmtorii pai la ntlnirea unui element flotant: fluxul normal de aezare n pagin este ntrerupt elementul flotant este afiat n poziia indicat (stnga, dreapta), ncepnd din rndul urmtor se afieaz elementele din flux de la punctul n care a fost ntrerupt, ncepnd cu spaiul rmas liber de deplasarea obiectului flotant casetele elementelor flotante se pot suprapune peste casetele din fluxul normal, dar nu i coninutul lor Proprietatea CLEAR Dup cum se observ n exemplul din figura 15.5, al doilea tablou apare n spaiul rmas liber. Dac se dorete ca un element de bloc s apar afiat pe rnd nou, dup aplicarea proprietii float, se folosete proprietatea clear. Valorile posibile sunt: none nu se deplaseaz elementul left partea din stnga elementului este liber right partea din dreapta elementului este liber both ambele pari (stnga i dreapta) vor fi libere Dac n figura 15.5, n al doilea tabel adugm atributul style=clear:left atunci tabelul va fi afiat pe rnd nou, cum reiese din figura:

Figura 15. 6. Proprietatea clear

201

15.4. Elemente poziionate

CSS ofer posibilitatea de a schimba fluxul normal de aezare a elementelor n pagin i cu ajutorul proprietii POSITION, care poate fi ataat oricrui element n foaia de stil sau ca valoare a atributului STYLE. Valorile posibile sunt: static aezarea se face n flux normal (valoare implicit) absolute elementul iese din fluxul normal i este afiat la o distan relativ fa de primul printe poziionat relative elementul rmne, n fluxul normal, dar este poziionat la o distan relativ cu poziia sa normal (elementul se poate suprapune peste altele) fixed elementul iese din fluxul normal i e afiat ntr-o zon vizibil. El rmne fix cnd se deruleaz pagina cu barele de defilare Marginile casetei corespunztoare elementului poziionat sunt definite de proprietiile: top right bottom left Valorile posibile sunt: o lungime dat n: cm, mm , px, pt, em un procent relativ la printe Poziionarea absolut Poziionarea absolut a unui element este relativ la primul printe poziionat. Dac elementul, care se dorete a fi poziionat absolut, nu are un printe sau stramo poziionat, atunci el va fi poziionat relativ la colul stnga sus al ferestrei. Pentru a poziiona absolut un element se folosete proprietatea position:absolute i se atribuie valori proprietilor top, bottom, left i right. n continuare vor fi date trei exemple: primul, pentru poziionarea absolut a unui element TD, care nu are un printe poziionat al doilea, pentru poziionarea absolut a unui element TD care are un printe poziionat al treilea, pentru poziionarea absolut i a printelui <HTML> <HEAD> <STYLE> IMG { position:absolute; left : 80px; top : 100px;} </STYLE></HEAD> <BODY> <P>Pozitionarea absoluta a elementului IMG fata de coltul stanga sus</P> <TABLE border=2 style=cellspacing=5 height=50 > <TR ><TD>a11<TD> <IMG src="imag1.gif"> a12
202

<TR><TD>a21<TD>a22 </TABLE> </BODY> </HTML>

Figura 15. 7. Poziionare absolut fa de colul stnga sus

<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>

Figura 15. 8. Poziionare absolut fa de printele poziionat absolut

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>

Figura 15. 9. poziionarea absolut a primului printe

n ultimul exemplu se observ c tabelul este poziionat absolut fa de colul de sus stnga. IMG are printe pe TD care nu e poziionat, dar este poziionat bunicul, printele printelui (tabel-td), deci va fi poziionat relativ la TABEL (primul printe poziionat). Poziionarea relativ Spre deosebire de poziionarea absolut, n cazul poziionrii relative, un element este poziionat n raport cu fluxul normal, relativ la poziia sa normal. Poziionarea relativ se face cu ajutorul proprietii position:relative i atribuind valori marginilor casetei: top, right, bottom, left Un exemplu este redat mai jos <HTML> <HEAD> <STYLE> IMG{position:relative; left:20px; top:20px}
204

</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>

Figura 15. 10. Poziionarea relativ

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>

Figura 15. 11. Poziionarea fix

Se observ, dup poziia barei de scroll, c imaginea nu se deplaseaz odat cu pagina.

15.5. Proprietatea z-index

Dac se modific fluxul normal cu ajutorul elementelor flotante sau elemente poziionate (absolute, relative, fixe) exist posibilitatea ca anumite elemente s se suprapun, aprnd ca o stiv de casete, care sunt afiate n ordinea n care au fost introduse. Dac dorim s nu se suprapun casetele trebuie s fim foarte ateni la scrierea coordonatelor marginilor (ceea ce este foarte greu.) Proprietatea z-index ne ajut s stabilim ordinea de afiare a casetelor suprapuse. Valorile posibile sunt: auto - valoarea implicit numr - numr ntreg pozitiv care determin nivelul n stiv relativ la printe n interiorul aceluiai printe sunt afiate casetele n ordinea descresctoare a numrului de nivel (valoarea lui z-index) Un exemplu semnificativ este dat n continuare:

206

Figura 15. 12. Proprietatea z-index

207

PARTEA A III-A

JAVASCRIPT

207

208

16. JavaScript Elemente de baz

16.1. Introducere n JavaScript

n acest capitol se vor introduce noiunile de baz ale limbajului JavaScript. JavaScript a fost realizat de firmele SUN i NETSCAPE ca o posibilitate de extindere a lucrului cu HTML i este compatibil att pe Netscape Navigator, ct i pe Internet Explorer. n replic la acest limbaj, Microsoft a realizat Visual Basic Script (VBS), bazat pe cunoscutul limbaj Visual Basic. Este mai uor de utilizat dect JavaScript, dar are limitarea de a fi compatibil doar pe Internet Explorer. Dup anii 2000, tot Microsoft a lansat limbajul de scriptare JScript, mult mai apropiat de JavaScript, dar tot compatibil pe Internet Explorer. n urmtoarele cinci capitole va fi descris limbajul JavaScript. n capitolele precedente s-a prezentat limbajul HTML i CSS, cu ajutorul crora putem realiza pagini WEB. Totui, limbajul HTML este limitat, n sensul c, utiliznd numai HTML, nu putem realiza pagini WEB complexe, dinamice. Cu ajutorul limbajului de scriptare JavaScript se pot realiza pagini WEB interactive. Limbajele JavaScript, VBScript, JScript sunt limbaje de scriptare, de interpretare i orientate pe obiect, caracteristici ce vor fi introduse n continuare. JavaScript Limbaj de scriptare Programele enumerate mai sus sunt i limbajele de programare, ct i de scriptare, n sensul c ambele tipuri de limbaje au ca scop s faciliteze programatorilor posibilitatea de a determina browser-ul s execute anumite aciuni, ca de exemplu tergerea unui cmp dintr-un formular, validarea datelor introduse ntr-un formular, rspunsul la evenimente, precum schimbarea unui obiect la trecerea peste acesta cu mouse-ul etc. Diferena important dintre cele dou tipuri const n faptul c un limbaj de programare pune accent pe tipurile de date, n timp ce un limbaj de scriptare nu este interesat de tipurile de date. Un tip de dat definete tipul de valori de date folosite ntr-un program, a tipului de operaii care se pot efectua cu valorile de date i specific dimensiunea i tipul de informaie care poate fi plasat la o anumit locaie a memoriei.
209

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

Unele evenimente sunt importante pentru JavaScript, cum ar fi atunci cnd se executa clic pe butonul Submit, Reset all, Cancel etc., iar alte evenimente sunt mai puin importante, cum ar fi deplasarea mouse-ului ntr-o zon fr informaii a unui formular. Modul de gestionare a evenimentelor este un concept fundamental al limbajului JavaScript. Pentru a reaciona la evenimentele importante, trebuie definite rutine n JavaScript de tratare a evenimentelor. Dac se ncorporeaz scripturi n paginile WEB, avem multe faciliti, ca de exemplu: Realizarea paginilor dinamice Scrierea mesajelor n bara de stare a browser-ului Afiarea csuelor de avertizare Deschiderea de noi ferestre ale browser-ului Validarea datelor din formulare Crearea de formulare interactive Efectuarea calculelor Actualizarea datei i a timpului Identificarea programelor de completare pentru browser (plug-in), cum ar fi Flash Programul JavaScript este totui limitat, n sensul c nu poate executa orice operaie ca de exemplu: citirea i scrierea fiierelor de pe, respectiv pe hard-ul propriu scrierea aplicaiilor pe parte de server care au fost numite n capitolul 12, aplicaii Common Gateway Interface (CGI), care se pot scrie cu limbaje ca: Java, Perl, PHP. JavaScript este o component a limbajului DHTML (Dynamic HTML), care, mpreun cu HTML i CSS, este folosit de profesioniti pentru realizarea paginilor cu efecte speciale de tipul celor realizate cu limbajul Flash, fr a apela la aplicaiile de completare (plug-in).

16.2. Primul script n JavaScript

Din seciunea precedent, rezult c JavaScript este un limbaj de programare limitat, folosind scripturi introduse n programele HTML, cu scopul de a transforma o pagin WEB static n una dinamic. De asemenea JavaScript este un program orientat pe obiect, care permite construirea aplicaiilor prin utilizarea obiectelor (documente, butoane, un cmp al unui formule etc). Fiecare obiect are anumite atribute (proprieti) i execut anumite operaii, metode, la primirea unor mesaje (tergerea informaiilor din cmpurile unui formular, n urma evenimentului clic pe butonul Reset All). Accesul la proprietile i metodele obiectului se face folosind sintaxa: numele obiectului urmat de punct i de numele proprietii sau metodei De asemenea o aplicaie JavaScript reacioneaz la acele evenimente care sunt de obicei aciuni ntreprinse de persoanele care folosesc aplicaia. n continuare ne vom opri la sintaxa unui script.
212

Un program JavaScript este scris ntre tag-urile <SCRIPT> </SCRIPT> ale unei pagini WEB. Blocul SCRIPT poate fi plasat n blocul de antet HEAD sau n blocul de corp BODY al unei pagini de WEB. n funcie de locul de plasare a scriptului avem scripturi de antet sau scripturi de coninut. JavaScript, ca majoritatea limbajelor de programare, este scris n format text i organizat n declaraii, blocuri formatate din seturi de declaraii i din comentarii. O declaraie este o propoziie format din unul sau mai multe elemente, cuprinse ntr-o linie, de exemplu alert (hello). Un bloc este format dintr-un set de declaraii cuprinse ntre acolade({}). Un bloc de declaraii este folosit, de exemplu, n funcii sau n instruciuni condiionale. ntr-o declaraie se pot folosi variabile, date ca iruri i numere, operatori i expresii. O declaraie comunic browser-ului s ntreprind o aciune. Acesta, dup execuia ei, preia alt declaraie, o interpreteaz s.a.m.d. Comentarii n JavaScript o linie de comentarii ncepe cu o pereche de slashes (//). Mai multe linii de comentariu ncep cu perechea slash i asterisc (/*) i se termin cu perechea invers (*/). De exemplu: //Acesta este un script scris n limbajul JavaScript /* JavaScript este un limbaj de scriptare, de interpretare i orientat pe obiect. El a fost realizat de firmele Sun i Netscape Navigator */ OBSERVAIE! Se poate ntmpla ca mai multe browser-e s nu poat interpreta scripturile (cum ar fi versiunile anterioare Microsoft Internet Explorer 3, Netscape 1.X i America Online 3) i n loc s execute aceste scripturi le afieaz. Pentru a ascunde un cod JavaScript de browser-ele mai vechi, acesta se poate plasa ntr-un comentariu HTML din paginile WEB care este scris ntre < !-- i -- >. Browser-ele compatibile cu JavaScript recunosc i ruleaz un script coninut ntr-un comentariu HTML. Browser-ele incompatibile cu JavaScript sau pentru acelea pentru care JavaScript nu este activ (n mod prestabilit JavaScript este activ pe majoritatea browser-elor) vor ignora scripturile, creznd c scriptul este un comentariu. Atenie ns, blocul de comentarii HTML se va plasa n interiorul blocului SCRIPT (pentru ca scriptul s fie considerat comentariu i s nu fie afiat de browser-ele incompatibile JavaScript), nu n afara blocului SCRIPT, caz n care i browser-ele compatibile JavaScript l vor considera ca pe un comentariu HTML. S considerm urmtorul exemplu: <HTML> <HEAD> <TITLE> primul script </TITLE> <HEAD> <BODY> <SCRIPT language="JavaScript" type="text/javascript">
213

document.write('Bine ai venit n lumea scriptului') </SCRIPT> </BODY> </HTML>

Figura 16.1 Un script

Din analiza acestui exemplu simplu rezult: primele 2 linii sunt linii standard pentru o pagin WEB. blocul de antet conine blocul de titlu al paginii WEB blocul de corp BODY conine scriptul format dintr-o singur declaraie, cuprins n blocul SCRIPT. Tag-ul SCRIPT conine dou atribute cu valori obligatorii: language =JavaScript comunic browser-ului c limbajul de script este JavaScript type=text/JavaScript, atribut care comunic browser-ului c scriptul este scris n format text, care este organizat n format JavaScript scriptul are o singur linie (declaraie), aceasta conine un obiect document, care are o metod scrierea unui text n document. Textele n JavaScript pot aprea ntre ghilimele simple (apostrof) sau duble ( ). 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

Putem s mbuntim un pic aspectul programului de mai sus, prin afiarea casetei de avertizare, care va conine textul i va rmne pe ecran pn se execut evenimentul: clic pe butonul OK aflat n csu. Pentru a afia caseta de dialog de avertizare se schimb linia de declaraie din blocul SCRIPT, cu declaraia care conine funcia de avertizare alert, astfel: <HTML> <HEAD> <SCRIPT language="JavaScript" > <!-alert('Bine ai venit, din nou') --> </SCRIPT> </HEAD> <BODY> </BODY> </HTML>

Figura 16. 2. Script cu caseta de avertizare alert()

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. Tipuri de date i variabile

Informaia inserat n paginile web sau n scripturi este o valoare care aparine unui tip de date. De exemplu, informaia: Bine ai venit n mediul JavaScript ! este o valoare de tip string. n JavaScript exist ase tipuri de date: numerice, iruri, boolean, obiecte, null, undefined (nedefinit). 16.3.1. Tipuri de date Date numerice JavaScript suport att numere ntregi, ct i numere reale. ntregii pot fi pozitivi, 0 sau negativi. ntregii pot fi reprezentai n baza 10 (zecimal), n baza 8 (octal) sau n baza 16 (hexazecimal). Sintaxa numerelor scrise n aceste baze este: n baza 10 numerele nu trebuie s nceap cu zero, dar pot fi precedate de semn (), de exemplu: 45, +200, -400 n baza 8 numerele ncep cu cifra zero (0), pot conine numai cifrele de la 0 la 7 i pot fi precedate de semn, de exemplu: 057 n baza 8 este n baza 10 47 (5*8+7) -076 n baza 8 este n baza 10 -62 (-(7*8+6)) 0389 este un ntreg echivalent cu 389 (chiar dac ncepe cu 0 are cifre > 7) n baza 16 numerele ncep cu 0X, pot conine cifre de la 0 la 9 i litere de la A la F (litere mici sau mari) i pot fi precedate de semn (numerele pot fi pozitive sau negative). De exemplu: 0XFF n baza 16 este echivalentul n baza 10 cu 255(15*16+15) -0XA9 n baza 16 este echivalentul n baza 10 cu 169(10*16+9) Datele reale se reprezint: cu punct zecimal (7.53), cu E nr (n form tiinific i nseamn 10 la puterea nr), sau n ambele forme, aa cum reiese din exemplele de mai jos. Exemple de date reale: 3.45, -2.55 2E- 4 echivalent cu 0,0002 4 E + 2 echivalent cu 400 5.827E2 echivalent cu 582.7 Date de tip ir Un ir este un text (o niruire de caractere) cuprins ntre apostrofuri sau ghilimele. Un ir poate conine i cifre i litere, numai litere, numai cifre, sau nimic (irul vid). Numerele reprezentate ca ir de caractere pot fi luate n calcul numai dac se aplic anumite funcii (care vor fi prezentate n seciunile urmtoare). Exemple de iruri: os Colentina nr. 452, Hello, 457
216

Date de tip Boolean Exist dou valori de tip boolean: adevarat sau true, fals sau false. Valorile booleene sunt folosite n comparaii pentru a ajuta programul JavaScript s ia o decizie. Obiecte n seciunea precedent am definit obiectul, proprietile i metodele lui. Un obiect poate fi considerat un tip de dat care are o valoare (de exemplu, un formular). n seciunile urmtoare va fi prezentat lucrul cu obiecte. Tipul de data Null Un tip NULL este acela care nu are nicio valoare i niciun neles. Aceste valori vide sunt utile n scrierea scripturilor complicate, de exemplu cmpul nume dintr-un formular poate s aib valoarea null, pn n momentul introducerii unui nume. Tipul de dat Undefined O valoare nedefinit poate fi dat unei variabile dup ce ea a fost creat, dar nainte de a i se atribui o valoare. Atribuire i egalitate Semnul egal (=) este folosit n JavaScript pentru a indica o operaie de atribuire. De exemplu: cantitate = 20 nseamn Se atribuie valoarea 20 variabilei cantitate sau cantitate ia valoarea 20. Cnd se dorete a se compara dou valori dac sunt egale se folosete o pereche de semn egal (==). Acestea vor fi enumerate i la operatori, n seciunea urmtoare.

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

Este indicat ca numele variabilei s fie ct mai sugestiv. Este interzis s se foloseasc drept nume de variabil cuvintele cheie (25 la numr n JavaScript) i nu sunt indicate s se foloseasc cuvintele rezervate (33 la numr n JavaScript). OBSERVAII! Se pot declara mai multe variabile cu acelai var, dar ele trebuie separate prin virgule Amintim c JavaScript este un limbaj case-sensitive, adic face distincie ntre literele mari i mici Variabilele pot avea orice lungime Nu se declar, n mod obligatoriu, tipul unei variabile, este suficient s indicm numele ei. Tipul poate fi dat n urma unei atribuiri Exist posibilitatea s nu declarm implicit o variabil cu var, dar putem s-i asignm o valoare. De exemplu: pre = 100 este o declarare implicit a variabilei pre Iniializarea unei variabile n mod normal, la declararea unei variabile, acesteia i se atribuie o valoare. De exemplu: var pre = 100 alert(pre) - se va afia 100 var preTVA=200*0.19 alert(preTVA) - se va afia 38 Se poate declara o variabil pe care dorim s o iniializm, fr a-i da o anumit valoare. n acest caz, iniializm variabila cu valoarea particular null. De exemplu: var TVA=null var pre= 100*null alert(pre) - se va afia 0 (zero) Dac se declar o variabil fr a-i atribui o valoare iniial, ea exist dar este undefined (nedefinit). var cantitate, pre = 100 var valoare=cantitate * pre alert(valoare) se va afia NaN, deoarece cantitatea este nedefinit Atribuirea de valori unei variabile n cele mai multe cazuri, valoarea unei variabile se schimb n timpul rulrii programului JavaScript. Atunci valoarea iniial a unei variabile se schimb cu o alt valoare. Pentru a realiza aceast operaie (de introducere de date) se folosete funcia prompt(). Funcia prompt() este asemntoare funciei alert(), n sensul c genereaz o cutie de dialog. Parametrii funciei sunt iruri de caractere, iar funcia are sintaxa: prompt(mesaj, valoarea initiala)
218

Mesajul (primul parametru) este afiat n cutia de dialog. Dac se introduce o dat i se apas OK, cutia va returna aceast dat. Dac nu se introduce nicio dat dar se apas OK, cutia va returna al doilea parametru, valoarea implicit. Dac se apas CANCEL, atunci se va returna NULL. O declaraie de atribuire i comunic browser-ului s nlocuiasc valoarea iniial cu o valoare nou. O declaraie de atribuire are trei pri: numele variabilei, operatorul de atribuire (=) i valoarea returnat de funcia prompt, astfel: nume_variabil= prompt(Mesaj, valoare nou). De exemplu: var n=0 n = prompt(Dai valoarea lui n, 0) alert (n) Dac se introduce n cutia de dialog o dat, de exemplu 10 i se apas OK se va afia 10 Dac se apas OK i nu se introduce nimic apare 0 Dac se apas CANCEL se afieaz NaN Conversia datelor Am artat c variabilele n JavaScript nu au declarat tipul. Este posibil s convertim anumite variabile la tipul dat dorit. De exemplu, numerele pot fi incluse n iruri, dar irurile nu pot fi considerate direct numere ca s putem s le aplicm operatori aritmetici. Concatenarea irurilor Valorile de tip ir pot fi concatenate cu ajutorul operatorului +. De exemplu, prin irul: ir1=abc ir2=def , ir1 + ir2 se ntelege irul format prin unirea celor dou abcdef Dac avem un numr, acesta este convertit direct n ir i apoi afiat, de exemplu, cu funcia alert(ir). De exemplu dac avem: var vrst=20 alert(vrst) atunci vrst e transformat n ir 20 i se afieaz 20

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

Exemplificm cele spuse mai sus, n scriptul pentru adunarea a dou numere: nr1 i nr2. <HTML> <HEAD> <SCRIPT language="JavaScript"> nr1 = parseInt(prompt("Dai primul numr: ",0)) nr2 = parseInt(prompt("Dai al doilea numr: ",0)) s = nr1+nr2 alert("Suma este: " + s) </SCRIPT> </HEAD> </BODY> </HTML>

Figura 16.3. Funciile: parseInt(), prompt(), alert() i operatorul de concatenare +

16.4. Expresii i Operatori n seciunea precedent s-au introdus mecanismele de introducere i afiare de date. n aceast seciune se vor introduce noiunile de Expresie i Operatori. Expresii O expresie conine unul sau mai muli operanzi i unul sau mai muli operatori. Un operand este o variabil sau o constant. Un operator este un simbol care i comunic browser-ului cum s execute expresia. De exemplu, n expresia aria=6*a*a // aria cubului aria, a i 6 sunt operanzi, iar = i * sunt operatori.

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

Operator virgul de evaluare multipl

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

Operatorul binar + este operator de adunare. De exemplu: o 5+7 ia valoarea 12 o 9.4+13.7 ia valoarea 22.1 o n=10 i m=20 n+m ia valoarea 30 Operatorul binar - este operator de scdere. De exemplu: o 5-7 ia valoarea -2 o 9.4 - 13.7 ia valoarea -4.3 Operatorul * este operatorul de nmulire. De exemplu: o 5*7 ia valoarea 35 o n=25 n*10 ia valoarea 250 Operatorul / este operatorul de mprire. De exemplu: o 7/2 ia valoarea 3.5 o a = 10 2 / a ia valoarea 0.2 Operatorul % este operatorul pentru obinerea restului mpririi. De exemplu: o 7%2 ia valoarea 1 o -5%2 ia valoarea -1 o n=7.5 atunci n%3 ia valoarea 1.5 OBSERVAIE! n JavaScript restul poate fi i negativ, operanzii pot fi i numere reale.

Operatorul unar - i operatorul unar + sunt operatori de semn. De exemplu: o N=10 - + - n ia valoarea -10 Operatorul + de concatenare este operatorul de concatenare a dou iruri (a fost introdus n seciunea precedent). De exemplu: o var nume=Ana + Ionescu ia valoarea Ana Ionescu Operatorul ++ este operator de incrementare cu 1. Operatorul de incrementare poate fi plasat att n stnga, ct i n dreapta variabilei. Dac variabila este prefixat de operatorul ++, atunci variabila este incrementat i apoi intr ntr-un eventual calcul. Dac variabila este postfixat de operatorul ++ atunci variabila intr n calculul n care este implicat i apoi este incrementat. De exemplu, pentru codul de mai jos: <HTML> <HEAD></HEAD> <BODY> <SCRIPT language="JavaScript"> var x=10, y y=++x*5 alert("Valoarea lui ++x este: " + x + " i valoarea lui y = ++x*5 este: " + y) x = 10

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:

Figura 16.4. Operatorul de incrementare

Operatorul -- este operatorul de decrementare cu 1 (scade 1 din valoarea variabilei). Ca i operatorul ++ , operatorul -- poate fi prefixat sau postfixat cu acelai efect. Dac n exemplul de mai sus se nlocuiesc cele dou atribuiri pentru variabila y cu : y= -- x*5; y= x-- *5 browser-ul va afia:

Figura 16. 5. Operatorul de decrementare 223

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: !(7= =5) returneaz true pentru c 7 = =5 returneaz false i ! false este true !(7!=7) returneaz true pentru c 7!=7 este false m=abc i n=aBc !(m= = n) returneaza true x=10 i y=20 atunci (x>10) || (y>10) returneaz true, deoarece false || true returneaz true (x>10) && (y>10) returneaz false pentru c false && true este false

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. Operatorul de atribuire = poate fi prefixat de un operator aritmetic astfel: (OP=), unde OP poate fi +, -, *, /, %. Efectul unor astfel de atribuiri este urmtorul: se execut operaia din stnga semnului = i apoi se face atribuirea valorii operaiei variabilei prima din stnga. Se consider urmtorul cod: <HTML><HEAD> <SCRIPT language="JavaScript"> var x=100, y=200 x+=y alert("x+=y este: " + x) x=100

224

x*=y alert("x este: " +x) </SCRIPT> </BODY></HTML> Browser-ul va afia:

Figura 16.6. Operator de atribuire

Operatori relaionali sau de comparaie Operatorii relaionali compar doi operanzi i ntorc o valoare logic, true dac relaia este adevrat i false n caz contrar. Operatorii relaionali sunt: = = - operatorul de egalitate != - operatorul de inegalitate (non-egalitate) < - operatorul mai mic > - operatorul mai mare <= - operatorul mai mic sau egal >= - operatorul mai mare sau egal OBSERVAII! 1. Se pot compara i iruri, ordinea fiind cea lexicografic 2. Conform codului ASCII o cifr este mai mic dect o liter (codul cifrelor este 48-57) i o liter mare (codul 64-93) este mai mic dect o liter mic (codul 97-126)

225

Exemple cu operatori relaionali: a) 35> 45 returneaz false b) a = 35 a>20 returneaz true c) 5<aBc returneaz true d) C<c returneaz true e) a=aBc b=Abc a>b returneaz false f) a!=b returneaz true g) a== b returneaz false Operatorul condiional Operatorul condiional, cunoscut i sub numele de operator trenar, este diferit de cei prezentai mai sus. Acest operator cere browser-ului s evalueze o expresie i, n funcie de valoarea acesteia, se execut o anumit expresie dac valoarea este true i o alta dac valoarea este false. Sintaxa este urmtoarea: expresie ? expresie1: expresie 2 i are ca efect : Se evalueaz expresia (prima parte a operatorului) Dac expresie = true atunci se evalueaz expresie1 (partea a doua) Dac expresie = false atunci se evalueaz expresie2 (partea a treia) Dup cum reiese din sintaxa operatorului condiional, acesta este alctuit din trei pri. Prima parte este separat de partea a doua prin caracterul ? , iar partea a doua este separat de partea a treia prin caracterul : . De exemplu, putem folosi operatorul condiional n rezolvarea ecuaiei de gradul I, ax+b =0, scriind scriptul: <HTML> <HEAD> <SCRIPT language="JavaScript"> a=parseInt(prompt("dati primul numar",0)) b=parseInt(prompt("dati al doilea numar",0)) a!=0?alert("x= "+-b/a):b!=0?alert("nu exista solutii"):alert("o infinitate de solutii") </SCRIPT> </HEAD> <BODY></BODY> </HTML>

226

Figura 16. 7. Operatorul condiional ?

Operatori logici pe bii n JavaScript exist un set de operatori care permit accesul la bit. Operatorii logici pe bii sunt: << operator de deplasare stnga >> operator de deplasare dreapta & operator logic i (AND) pe bii | operator logic sau (OR) pe bii ^ operator logic sau exclusiv pe bii ~ operator logic unar de negare pe bii (NOT) Operatorul << are ca efect deplasarea spre stnga a operandului din stnga cu un numr de poziii egal cu valoarea operandului din dreapta Operatorul >> are ca efect deplasarea spre dreapta a operandului din stnga cu un numr de poziii egal cu valoarea operandului din dreapta

227

Operatorii binari &, |, ^ , AND, OR, XOR acioneaz; la nivel de bit, pentru fiecare pereche de bii aflai pe poziii identice, conform tabelului de mai jos:
O1 0 1 0 1 O2 0 0 1 1 O1&O2 0 0 0 1 O1^O2 0 1 1 0 O1| O2 0 1 1 1

Operatorul unar ~ (negare pe bit) inverseaz coninutul biilor. OBSERVAIE! Aceti operatori las nemodificat coninutul variabilelor, de exemplu, x=2 alert ( x << 2) alert (x) va afia mai 8 apoi 2. Exemple cu operatori logici pe bii: Fie: x=2 (00000010 n binar) y=5 (00000101 n binar) Atunci: x<<2 ~x x>>1 y<<2 x&y x|y x^y 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() Am artat, n capitolul precedent, c obiectele se despart de proprieti i de metodele sale prin caracterul . . Obiectul document are proprieti i obiecte. Una din cele mai folosite metode n JavaScript este metoda write(ir) a obiectului document, care indic browse-ului s scrie n document irul cuprins ntre ghilimele. Dac irul conine i tag-uri HTML, atunci acestea sunt interpretate de browser i afiate corespunztor. n exemplul de mai jos se utilizeaz metoda write sub diferite forme. <HTML><HEAD> <SCRIPT language="JavaScript">
228

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>

Figura 16. 8. Metoda document.write()

229

17. Instruciuni i Funcii n JavaScript

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.

17.1.1. Instruciuni de decizie

O instruciune condiional JavaScript este asemntoare cu instruciunea condiional din limbajele de programare complexe. n JavaScript o instruciune condiional i cere browser-ului s evalueze o condiie i, n funcie de rezultatul evalurii, s execute anumite instruciuni. Exist trei instruciuni condiionale: if, if.else i switch...case. Instruciunea IF i IF ELSE Instruciunea IF este una din cele mai folosite instruciuni n JavaScript, pentru c determin browser-ul s execute un set de instruciuni dac o anumit expresie condiional este adevarat sau nu. O expresie condiional este o expresie boolean care ia valoarea true sau false. Instruciunea IF simpl Instruciunea If are sintaxa: IF (expresie conditional) { instruciuni } Se observ c instruciunea condiional IF simpl are trei pri: cuvntul cheie IF o expresie condiional cuprins ntre paranteze i blocul de instruciuni care se execut n cazul n care expresia este true, cuprins ntre acolade ({}). Blocul de instruciuni se mai numete instruciune compus.
230

n cazul n care blocul de instructiuni conine o singur instruciune, acoladele pot lipsi, dar este indicat s se foloseasc pentru lizibilitatea scriptului. Un exemplu de instruciune IF simpl este dat mai jos. <HTML> <HEAD></HEAD> <BODY> <SCRIPT language = "JavaScript"> // Ecuaia de gradul I a = parseInt( prompt ("Dai un numr a", 0)) b = parseInt( prompt ("Dai termenul liber b", 0)) if (a !=0) { x = - b / a; alert ("x = " + x) } </SCRIPT> </BODY></HTML>

Figura 17.1. Instruciunea IF

Instruciunea if else Instruciunea if else are sintaxa: IF( expresie condiional) {instruciuni 1} else {instruciuni 2}
231

Principiul de execuie este urmtorul: se evalueaz expresia, dac expresia este adevrat, se execut instruciuni 1 altfel se execut instruciuni 2. n cazul cnd blocurile {instruciuni 1} i/sau {instruciuni 2} au numai o instruciune, acoladele pot s lipseasc. n continuare vom face o alt variant a exemplului de mai sus. <HTML> <HEAD> </HEAD> <BODY> <SCRIPT language = "JavaScript"> a = parseInt( prompt ("Dai un numr a", 0)) b = parseInt( prompt ("Dai termenul liber b", 0)) if (a!=0) {x = -b/a; alert ("x = " + x) } else alert ("Nu exit soluie") </SCRIPT> </BODY> </HTML>

Figura 17.2. Instruciunea if else 232

Instruciunea If else if else Aceast form a instruciunii if este asemntoare cu instruciunea ifelse, numai c dac expresia condiional este fals se cere browser-ului s evalueze o alt expresie condiional, care, n cazul n care este adevrat, se execut un bloc de instruciuni, altfel se execut alt bloc de instruciuni. Sintaxa acestei instruciuni este: IF (expresie 1) { instruciuni 1} else if (expresie 2) {instruciuni 2 } else {instruciuni 3} n continuare ncercm s mbuntim exemplul de mai sus: <HTML> <HEAD> </HEAD> <BODY> <SCRIPT language = "JavaScript"> a = parseInt( prompt ("Dai un numr a", 0)) b = parseInt( prompt ("Dai termenul liber b", 0)) if (a!=0) { x = - b/a ; alert ("x = " + x)} else if (b!=0) alert ("Ecuaia nu are soluie") else alert ("Ecuaia are o infinitate de soluii") </SCRIPT> </BODY> </HTML>

233

Figura 17.3. Instruciunea IF ... else if ... else

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

n exemplul urmtor se rezolv ecuaia de gradul 2: ax2 + bx + c = 0 <HTML> <HEAD></HEAD> <BODY> <SCRIPT language = "JavaScript"> a = parseInt(prompt ("Dai a ", 0)) b = parseInt(prompt ("Dai b ", 0)) c = parseInt(prompt ("Dai c ", 0)) D=b*b-4*a*c if (a != 0) if (D>=0) // a<>0 D>0 {alert ("Rdcini reale") } else // a <> 0 D< 0 {alert ("Rdcini complexe") } else if (b!=0) // a=0 b<>0 { alert ("Ecuaie gradul I x = " + -c/b) } else if (c==0) {alert ("O infinitate de soluii ") } else // a=b=0 c<>0 {alert ("Nu exist soluii") } </SCRIPT> </BODY> </HTML>

235

Figura 17.4. Instruciunea IF imbricat

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

Figura 17.5. Instruciunea switch

17.1.2. Instruciuni de ciclare

Se cunoate din limbajele de programare c atunci cnd dorim s executm un grup de instruciuni n mod repetat, se folosesc instruciunile de ciclare. i JavaScript accept urmtoarele instruciuni de ciclare: for i for in, while, do while. Instruciunea for Instruciunea for are o variabil contor, o condiie i o aciune ce actualizeaz contorul. Ciclul for determin browser-ul s execute instruciunile din corpul ciclului pn cnd condiia este fals. nainte de nceperea unui ciclu (acesta se mai numete i o iteraie sau un pas al ciclului) condiia este testat. Dup executarea instruciunilor din ciclu, contorul este actualizat nainte ca o nou iteraie s nceap. Dac condiia returneaz mereu valoarea false, ciclul nu se execut niciodat. Dac condiia returneaz mereu valoarea true, ciclul este infinit. Sintaxa instruciunii for este: for(expresie_iniializare; expresie_condiional [; expresie_incrementare]) { instruciuni } unde:
238

expresie_iniializare se folosete pentru iniializarea contorului (variabila de ciclare) expresie_test se folosete pentru a testa dac se execut blocul de instruciuni subordonate instruciunii for; dac expresia are valoarea true, atunci se execut instruciunile, altfel se oprete ciclarea expresie_incrementare este opional i se folosete pentru incrementarea variabilei de ciclare. Dac incrementarea se face cu 1, adic se folosete operatorul ++, atunci expresie_incrementare poate lipsi Instruciunea for funcioneaz astfel: a) se evalueaz expresia_iniializare (aceasta poate conine i declaraia variabilei de ciclare) b) se evalueaz expresia_test. n cazul n care are valoarea true, se execut instruciunile dup care se trece la pasul c), altfel se trece la instruciunea dup for c) se evalueaz expresia de incrementare i se trece la pasul b) S probm instruciunea for prin urmtoarele exemple: s aflm suma primelor n numere, n mai multe moduri. OBSERVAIE! expresiile pot fi vide, dar nu este indicat folosirea instruciunii for n aceast form 1) <HTML> <HEAD><TITLE>Suma primelor n numere </TITLE></HEAD> <BODY> <SCRIPT language="JavaScript"> s1=0 n=parseInt(prompt("dati numarul n = ",1)) for(i=1 ; i<=n ; i++) s1+=i //s1=s1+i alert("suma primelor "+n+ " numere este "+s1) s2=0 for(i=n; i>=0 ; i--) s2+=i //s2=s2+i document.write("Suma primelor " + n + " numere este "+ s2) </SCRIPT> </BODY> </HTML> 2) Dac variabila de ciclare este definit n afara instruciunii for i incrementarea se face cu 1, atunci putem avea urmtorul script: <SCRIPT language = JavaScript> var i = 0 , s = 0 for ( ; i<=n; ) s + = i alert (s) </SCRIPT>
239

3) Pot lipsi toate expresiile din instruciunea for: <SCRIPT language = JavaScript> var i = 0 , s = 0 for ( ; ; ) { s+ = i i++ if ( i == 10) break } </SCRIPT> 4) Ciclul infinit: <SCRIPT language = JavaScript> var s = 0 for (i=1; i > 0; i++) s+= i // acesta este un ciclu infinit, deoarece condiia are mereu valoarea true </SCRIPT>

Figura 17.6. Instruciunea for

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>

Figura 17. 7. Instruciunea continue

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

dac dorim s aflm proprietile unui obiect fr a ti numrul lor. Instruciunea for in i cere browser-ului s execute blocul de instruciuni pentru fiecare element dintr-o list. Instruciunea for in are structura urmtoare: for (list) { instruciuni} Urmtorul exemplu ilustreaz utilizarea instruciunii for in pentru a afla proprietile obiectului window. Browser-ul execut blocul de instruciuni pentru fiecare proprietate a ferestrei. Instruciunile sunt: afiarea proprietii i salt la rnd nou. Codul va fi: <HTML> <HEAD><TITLE>FOR IN</TITLE></HEAD> <BODY> <SCRIPT language = "JavaScript"> for ( property in window) { document.write(property) document.write("<BR>")} </SCRIPT> </BODY> </HTML>

Figura 17.8. Instruciunea for in

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 while cere browser-ului s execute un bloc de instruciuni att timp ct o condiie definit n aceast instruciune este true. Ciclul while nu indic numrul de iteraii fcute. Sintaxa acestei instruciuni este: while (expresie) {instruciuni} Modul de execuie a instruciunii while este: a) se evalueaz expresia b) dac valoarea returnat de ea este true atunci se execut blocul de instruciuni i se revine la pasul a), altfel se trece la urmtoarea instruciune n exemplul de mai jos se calculeaz suma cifrelor unui numr pozitiv. <SCRIPT language="JavaScript"> var s=0 n=parseInt(prompt("Dai numrul n",1)) while (n>0) { s+=n%10 n=(n-n%10)/10 } alert("Suma cifrelor numrului n este: " + s) </SCRIPT>

Figura 17.9. Instruciunea while

Instruciunea do while Instruciunea dowhile este asemntoare cu instruciunea while, diferena const n faptul c instruciunea while este condiionat anterior execuiei
243

instruciunilor, iar instruciunea dowhile este condiionat posterior execuiei instruciunilor. Sintaxa instruciunii do while este: do {instruciune} while (expresie) Modul de execuie este evident: a) se execut instruciunile dorite b) se evalueaz expresia. Dac valoarea ei este true se trece la pasul a) altfel se trece la urmtoarea instruciune dup do while Instruciunile din corpul instruciunii do ... while se execut cel puin o dat. Dac exist posibilitatea ca expresia s fie fals de prima dat este indicat s se foloseasc instruciunea while, care nu mai execut instruciunile dac condiia este fals i sare la instruciunile dup while. n exemplul de mai jos se utilizeaz instruciune do...while pentru calcularea sumei primelor n numere pare naturale. <HTML> <HEAD><TITLE>Suma primelor n numere pare</TITLE></HEAD> <BODY> <SCRIPT language="JavaScript"> var s=0, i=0, t=0 n=parseInt(prompt("Dai numrul n ", 1)) do {s+=t; t=t+2;i+=1} while (i<=n) alert("Suma primelor n = " + n + " numere pare este: " + s) </SCRIPT> </BODY> </HTML>

Figura 17.10. Instruciunea do while 244

17.2. Funcii n Java Script n acest capitol se prezint modul de definire i utilizare a funciilor n JavaScript. Funciile execut anumite aciuni i ntorc rezultatele. Ca i limbajele de programare complexe, funciile n JavaScript combin cteva instruciuni care s execute anumite operaii, sub acelai nume. Informaiile despre funcie sunt incluse dup numele funciei ntre paranteze. Numele funciei mpreun cu operaiile i informaiile ei pot fi introduse ntr-un cod scris ntr-un anumit loc, iar executarea ei poate fi cerut browser-ului ori de cte ori este nevoie. Informaiile despre funcie se mai numesc argumentele sau parametrii funciei. Unele funcii pot s nu aib parametri.

17.2.1. Definirea i apelarea unei funcii

Procesul de creare a unei funcii se numete definirea funciei, iar procesul de execuie a funciei se numete apelarea funciei. n JavaScript exist dou tipuri de funcii: funcii create de utilizator i funcii predefinite (ale limbajului). Sintaxa de definire a unei funcii utilizator este: function nume_funcie([parametri]) { [instruciuni] } n continuare vom prezenta succint fiecare parte din definirea funciei. Definirea unei funcii este bine s se fac n partea de antet (<HEAD>) a unui program html. Amintim c n capitolul 16 am specificat c o pagin poate conine unul sau mai multe scripturi. Acestea se scriu n blocul <SCRIPT language="JavaScript">...</SCRIPT>. Blocul <SCRIPT> poate fi plasat n blocul de antet al paginii, <HEAD>, sau n blocul de coninut al paginii <BODY>. Apelul funciei poate fi introdus ntr-un script din corpul paginii. Numele funciei este un nume dat funciei. Acesta este indicat s fie un nume sugestiv, unic n pagina web (s nu mai fie folosit pentru alte funcii chiar dac acestea sunt definite n alte scripturi din pagin). Numele poate s conin caractere alfanumerice (litere i cifre) i liniua de subliniere, iar primul caracter s fie obligatoriu o liter. De asemenea numele nu poate fi cuvnt cheie sau un cuvnt rezervat. Parantezele sunt obligatorii i sunt folosite pentru a transfera argumente funciei. Chiar dac o funcie conine toate valorile necesare pentru a-i ndeplini aciunile pentru care a fost creat (adic nu conine argumente) parantezele tot trebuie s existe. Un script poate s conin una sau mai multe funcii. Blocul de program al funciei conine instruciunile pe care le execut browser-ul atunci cnd se apeleaz funcia, ntr-o alt parte a scriptului. Instruciunile sunt incluse ntre acolade ({ }). n blocul de program poate exista un apel al altei funcii. n blocul de program poate exista o instruciune return, cu ajutorul creia funcia ntoarce (returneaz) o valoare.
245

Apelul unei funcii O funcie se apeleaz atunci cnd se dorete ca browser-ul s execute blocul de instruciuni al funciei. Pentru apelul unei funcii se utilizeaz numele funciei, urmat de paranteze, n care eventual se afl parametrii, astfel: nume_funcie ([parametri]) Dac funcia are parametrii (argumente), valorile fiecruia sunt incluse ntre paranteze, n ordinea n care sunt enumerai parametrii n definirea funciei. Despre parametrii vom discuta n seciunea 17.2.3. n continuare se d un exemplu de definire a unei funcii fr parametrii i apelul acesteia. Definirea funciei se face ntr-un script din antetul paginii, iar apelul funciei ntr-un script din corpul paginii. Funcia definete aciunea de indexare a salariului de baz de 1000 RON, cu 5% ncepnd cu 1-01-07. <HTML> <HEAD><TITLE>Funcii</TITLE> <SCRIPT language="JavaScript"> function indexare_salariu() {var coef_indexare=0.05 var indexare=1000*0.05 return indexare } </SCRIPT></HEAD> <BODY><SCRIPT> alert(Salariu indexat este + indexare_salariu()+1000) </SCRIPT></BODY></HTML>

Figura 17.11 Definirea i apelarea unei funcii fr parametri

La apelarea funciei indexare_salariu(), browser-ul trece la definirea funciei din antet i execut instruciunile din corpul funciei. Not! Se putea scrie un singur script n <HEAD> sau <BODY>, dar pentru lizibilitatea unei pagini, n cazul n care sunt mai multe funcii este indicat s se defineasc funciile n <HEAD> i apelurile lor n <BODY>.

246

17.2.2. Domeniul de valabilitate a variabilelor

Prin domeniul de valabilitate sau de vizibilitate a variabilelor se ntelege n JavaScript posibilitatea de accesare a unei variabile. n JavaScript exist dou tipuri de variabile din punct de vedere al domeniului de valabilitate: variabile globale i variabile locale. O variabil global este definit n afara unei funcii i valoarea ei este vizibil (valabil) i poate fi modificat de toate funciile definite dup ea, precum i de toate instruciunile existente dup ea. Un exemplu de utilizare a variabilelor globale: funcia suma_cifre( ) calculeaz suma cifrelor funcia afiseaza_suma() afieaz suma cifrelor instruciunea alert(x) afieaz numrul dat <HTML> <HEAD > <TITLE>Variabile globale</TITLE> <SCRIPT language="JavaScript"> function suma_cifre() {alert('x= '+x) while(x>0) {s=s+x%10 x=(x-x%10)/10} return s} function afiseaza_suma() {alert('Suma cifrelor lui x este: '+s) } </SCRIPT> </HEAD> <BODY> <SCRIPT language="JavaScript"> var x=prompt('Dai numrul x',0) var s=0 suma_cifre() afiseaza_suma() alert('numarul x dupa apelul suma_cifre() este '+x) </SCRIPT> </BODY></HTML>

247

Figura 17.12. Variabile globale

Din analiza exemplului de mai sus, se observ c variabilele x i s sunt globale, vizibile att n funcia suma_cifre() i funcia afiseaza_suma(), ct i n instruciunile din script (alert). Funcii care apeleaz alt funcie O funcie poate fi apelat din corpul altei funcii. n exemplul din figura 17.12, n corpul funciei suma_cifre() se poate apela funcia afiseaza_suma() astfel: function suma_cifre() { alert(x = + x) while (x>0) { s=s+x%10 x=(x-x%10)/10} afiseaza_suma()} O variabil local este declarat n interiorul unei funcii. Ea este creat i distrus ori de cte ori se execut funcia i are domeniul de valabilitate (vizibilitate) n interiorul funciei, alte pri ale scriptului (instruciuni, funcii) nu o cunosc. O variabil local poate s aib acelai nume cu o variabil global. Dac folosim variabila n corpul funciei unde a fost definit, este adresat variabila local. Dac folosim acelai nume dar n afara funciei care o definete ne referim la variabila global. De exemplu, s considerm o variabil s local n care se depune suma primelor n numere i s variabila global pentru suma cifrelor unui numr definit i n exemplul de mai sus. Adaugm n scriptul din <HEAD> funcia:

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>

Figura 17.13. Variabile locale i globale

Se observ c browser-ul afieaz suma primelor n numere i variabila global s=10.

249

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

Figura 17.14. Apel funcii cu parametri

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.4. Funcii predefinite

n introducerea seciunii 17.2 am menionat c exist funcii realizate de utilizator, i care au fost prezentate mai sus, i funcii ale limbajului JavaScript, numite i funcii predefinite limbajului. Cele mai importante funcii predefinite sunt: eval("ir") evalueaz expresia din irul transmis ca parametru i ntoarce valoarea expresiei. De exemplu: var expresie1 = 7 * 8 % 5 var total1 = eval(expresie1) // va asigna valoarea 1 variabilei total1 var expresie2 = 7 * (8 % 5) var total2 =eval(expresie2)// va asigna valoarea 21 variabilei total2 alert(eval(7 + 5)) //afieaz valoarea 75 escape("ir") i unescape("ir") sunt folosite pentru a transforma caracterele care au o anumit semnificaie n codul HTML. irul va fi format din simbolul procent %, urmat de 2 cifre ce reprezint codul caracterului %. Funcia unescape(ir) are efect invers, afieaz caracterul care are codul %. De exemplu: alert(escape("<")) va afia %3C alert(unescape("%3C") va afia "<"
251

string(valoare_numeric) convertete un numr n ir De exemplu: alert(string(3) + string(8)) se va afia 38 alert(string(4.8) + string(3) se va afia 4.83 number("ir") - este funcia care transform un ir n numr. n cazul n care irul nu se poate converti n ntreg se va returna valoarea NaN (Not a Number) De exemplu: alert(number(7) + number(5.2)) va afia 12.2 alert(number(7ab)) va returna NaN

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>

Figura 17.15. Funcii recursive 252

18. OBIECTE

n limbajele de programare orientate pe obiect, deci i n JavaScript, elementele de baz sunt obiecte. Un obiect este un lucru din lumea nconjurtoare. Obiectele sunt n esen colecii de proprieti i metode. Proprietile sunt valori, iar metodele funcii. La membrii unui obiect (proprieti i metode) ne putem referi ori prin numele obiectului, punct i numele proprietii sau metodei, sau cu ajutorul unui tablou, astfel: nume_obiect.nume_proprietate/metoda nume_obiect[proprietate/metoda] Obiectele pot avea instane, atunci cnd proprietile lor au valori. De exemplu, obiectul numr complex poate avea instan un numr complex particular. n JavaScript exist obiecte create de utilizator, obiecte intrinseci i obiecte ale browser-ului. Obiectele browser-ului sunt obiecte care implic intervenia browser-ului, ca de exemplu, obiectul document i windows, care vor fi tratate n capitolul 20.

18.1. Obiecte create de utilizator

n JavaScript exist trei metode de a crea obiecte. 1. Construcia obiectelor folosind funcia prototip Din teoria limbajelor de programare orientate pe obiect se cunoate faptul c obiectele se pot crea cu funcii prototip, numite i constructori. Un constructor este invocat folosind operatorul new, care rezerv spaiu de memorie pentru obiect i returneaz adresa spaiului respectiv de memorie. De exemplu, declaraia z=new complex(1,2), nseamn c se rezerv memorie pentru numrul complex 1+2i, i adresa este ncrcat n z, astfel: 1 2

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

referi la proprietatea lungime vector, i folosind parantezele drepte [ ], pentru a ne referi la componentele vectorului obiect. <HTML> <HEAD> <SCRIPT language="JavaScript"> function Initializare_vect(lung) { this.lungime=lung for(i=0;i<this.lungime;i++); this[i]=0 } </SCRIPT> </HEAD> <BODY> <SCRIPT language="JavaScript"> vect=new Initializare_vect(20) document.write("lungimea vectorului este "+ vect.lungime+ "<BR>") for(i=0;i<vect.lungime;i++) document.write(vect[i]+ " " ) </SCRIPT> </BODY></HTML>

Figura 18. 1. Operatorul new

Se observ c parametrii funciei se transmit prin referin, n sensul c parametrul este de fapt o adres. n funcie se pot schimba valorile parametrilor. S considerm exemplul des utilizat n programarea orientat pe obiecte, i anume acela de creare, modificare i operaii cu numere complexe. n codul de mai jos se creeaz i se modific un numr complex. <HTML> <HEAD> <SCRIPT language="JavaScript"> function complex(a,b) { this.real=a; this.imag=b } function modific(z) {
254

z.real= 5 + ++z.real; z.imag=2 + ++z.imag } </SCRIPT> </HEAD> <BODY> <SCRIPT language="JavaScript"> z = new complex(1,1) document.write("z.real= " + z.real + " z.imaginar= " + z.imag +"<BR>") modific(z) document.write("Dupa modificarea parametrilor"+"<BR>") document.write("z.real= " + z.real +" z.imag= "+z.imag ) </SCRIPT></BODY> </HTML>

Figura 18. 2. Modificarea parametrilor

n exemplul urmtor se nlocuiete metoda de modificare a unui numr complex cu metoda de adunare a unui numr complex la altul. n acest caz, prin z= new complex (1,2) se nelege adresa la care se afl : 1 2 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>

18.3. Metoda suma varianta 1

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

document.write("z1.real= " +z1.real + "z1.imaginar= "+ z1.imag +"<BR>") z2 = new 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>

Figura 18.4. Metoda 2 de sumare

Operatorul new poate fi omis n cazul n care funcia constructor returneaz obiectul curent. Fcnd aceast modificare n funcia constructor de mai sus, vom avea codul: <HTML> <HEAD> <SCRIPT language="JavaScript"> function complex(a,b) { this.real=a ;this.imag=b; this.suma=suma return this } function suma(z) { w = new complex(0,0) w.real=this.real+z.real w.imag=this.imag+z.imag return w } </SCRIPT> </HEAD> <BODY> <B> Functia constructor fara operator new </B> <BR> Figura 18. 4 Metoda 2 de sumare <SCRIPT language="JavaScript"> z1 = complex(2,7) document.write("z1[real]=" +z1["real"]+" z1[imaginar]= "+z1["imag"]+"<BR>")
257

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>

Figura 18.5. Funcia constructor returneaz o valoare

2. Metoda de creare a obiectelor utiliznd tipul Object Un obiect poate fi creat i cu ajutorul tipului Object. S considerm exemplul din figura 2, n care se modific un numr complex cu ajutorul funciei modific(). Dac se folosete tipul Object, nu mai este nevoie de funcia constructor complex(), iar funcia modific() va fi considerat o metod a obiectului creat. Vom avea astfel codul: <HTML> <HEAD> <SCRIPT language="JavaScript"> z=new Object() z.real=1 ;z.imag=1 z.modific=modific function modific(z) { z.real= 5 + ++z.real z.imag=2 + ++z.imag } </SCRIPT> </HEAD> <BODY><B>Tipul Object </B><BR> <SCRIPT language="JavaScript"> document.write("z.real= " + z.real + " z.imaginar= " + z.imag +"<BR>") z.modific(z) document.write("Dupa modificarea parametrilor "+" <BR>") document.write("z.real= " + z.real +" z.imag= " + z.imag ) </SCRIPT> </BODY> </HTML>
258

Figura 18.6. Tipul Object

Pentru a afia componentele unui obiect, de exemplu, pentru obiectul numr complex: real, imag, modific, se pot folosi i instruciunea for n forma: For(nume_variabil in nume_obiect) n dou variante: for (i in z) document.write(i+" ") afieaz componentele unui obiect (numele proprietilor i metodelor) for (i in z) document.write(z[i] + " ") afieaz valorile proprietilor i codul surs al metodelor Astfel, pentru exemplul 2, folosind instruciunea for, codul va fi: <HTML> <HEAD> <SCRIPT language="JavaScript"> function complex(a,b) { this.real=a this.imag=b this.modific=modific } function modific(z) { z.real= 5 + ++z.real z.imag=2 + ++z.imag } </SCRIPT> </HEAD> <BODY> <B>FOR pentru afisare proprietati si metode <BR> FOR pentru afisare valori proprietati si cod sursa pentru metode </B><BR> <SCRIPT language="JavaScript"> var i
259

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>

Figura 18.7. Instruciunea For pentru a afia proprieti i metode

3. Metoda de creare a obiectelor folosind o list

Aceast metod const n faptul c obiectului i se atribuie o list de componente. Componentele sunt incluse ntre acolade i separate prin virgul, astfel:
Obiect={propr1:val1;propr2=val2;metoda1:nume1, metoda2:nume2, ..} <HTML> <HEAD> <SCRIPT language="JavaScript"> z={real:2, imag:3, modific:modific} function modific(z) { z.real= 5 + ++z.real z.imag=2 + ++z.imag } </SCRIPT> </HEAD> <BODY> <B> Metoda a 3 de construire a obiectelor <BR> folosind lista pentru declararea proprietatilor si metodelor </B><BR>
260

<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>

Figura 18.8. Metoda 3 de construire de obiecte (cu lista de declaraii)

Obiecte Incluse

Un obiect poate include alte obiecte, aa cum include proprieti i metode. Pentru a accesa componentele unui obiect inclus folosim scrierea:
nume_obiect.nume_obiect_inclus.nume.componenta <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 } function mij_seg(z1,z2) { z1.suma(z2) this.complex=z1 this.complex.imag=z1.imag/ 2 ; this.complex.real=z1.real/2 }
261

</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>

Figura 18. 9. Accesarea obiectelor incluse

18.2. Obiecte intrinseci

n JavaScript exist mai multe obiecte definite i recunoscute de browser. n aceast seciune se vor prezenta succint cele mai folosite obiecte intrinseci ale limbajului JavaScript: Math, String i Array.

18.2.1. Obiectul Math

Obiectul Math conine o serie de proprieti i metode care permit efectuarea unor calcule matematice. Constantele sunt proprietile obiectului iniializate. Cele mai utilizate constante sunt : PI (3.14...) i E ( 2,71...). Metodele obiectului Math sunt funcii matematice, cunoscute ca funcii implicite ca i n alte limbaje de programare. Aceste funcii returneaz o valoare, care poate fi numr real, ntreg, natural sau unghi n radiani.

262

Cele mai importante metode ale obiectului Math sunt: abs(x) returneaz valoarea absolut a numrului real x (modul) cos (x) returneaz cosinusul numrului x sin(x) returneaz sinusul numrului x tan(x) - returneaz tangenta numrului x acos(x) arccosinus, returneaz unghiul n radiani asin(x) - arcsin, returneaz unghiul n radiani atan (x) arctagent, returneaz unghiul n radiani floor(x) returneaz partea ntreag a numrului real x ([x]) random( ) returneaz un numr aleator n [0,1) round(x) returneaz cel mai apropiat ntreg de argumentul x (rotunjurea lui x) sqrt (x) returneaz radicalul numrului real x pow (x,y) returneaz x la puterea y exp(x) returneaz e la puterea x log(x) returneaz logaritm n baza e din x

Urmtorul exemplu testeaz unele funcii matematice: <HTML> <HEAD> </HEAD> <BODY> FUNCTII MATEMATICE - EXEMPLE <SCRIPT language="JavaScript"> alert("Aria cercului de raza 5= " + Math.PI*Math.pow(5,2)) alert("abs(2.5) =" + Math.abs (-2.5 ) ) alert("[1.58]= " + Math.floor (1.58)) alert("[-1.58]= " + Math.floor (-1.58)) alert("Math.logz un numr natural intre 1 i 10") alert("Math.sqrt(Math.pow((4-8),2)+Math.pow((5-2),2))= " + Math.sqrt(Math.pow((4-8),2)+Math.pow((5-2),2)) +" lungime segment") </SCRIPT></BODY></HTML>

Figura 18. 10. Metode ale obiectului Math 263

Urmtorul exemplu definete o funcie care returneaz modulul unui numr complex . <HTML> <HEAD> <SCRIPT language="JavaScript"> function complex(a,b) { this.real=a; this.imag=b; this.modul=modul} function modul() {return Math.sqrt(this.real*this.real + this.imag*this.imag)} </SCRIPT> </HEAD> <BODY> <B> Modulul unui numr complex </B> <BR> <SCRIPT language="JavaScript"> z=new complex(3,4) document.write("z.real= " +z.real + " z.imaginar= " + z.imag +"<BR>") m=z.modul() document.write("modulul numarului complex z= " + m)

</SCRIPT>
</BODY> </HTML>

Figura 18.11. Metoda sqrt a obiectului Math

18.2.2. Obiectul String

Un ir este o colecie de caractere alfabetice, numerice i speciale. n JavaScript, un ir este o instan a obiectului String. Unui caracter al irului i se asociaz o poziie. Primul caracter al irului are poziia 0, al doilea 1 etc. Aadar, n irul de lungime n, ultimul element va avea poziia n-1. n continuare ne vom ocupa de manipularea irurilor. Declararea unui ir se poate face n mai multe moduri: Utiliznd constructorul String() i operatorul new, de exemplu: var s = new String(Un sir) Utiliznd constructorul String() , de exemplu: var s = String(Un sir) Printr-o instruciune de atribuire: var s = String(Un sir)
264

Ca orice obiect din JavaScript i obiectul String are proprieti i metode. Proprietatea length reine lungimea irului. De exemplu, sunt valabile declaraiile: var s = new String(carte); alert(s.length) var s = String(carte); alert(s.length) var s = carte; alert(s.length) (n toate cazurile de mai sus se va afia 5). Amintim c pentru concatenarea irurilor se folosete operatorul +. Concatenarea irurilor a fost de multe ori exemplificat pn acum. De exemplu, declaraia : document.write(mama+ mare) va afia irul mamamare. Metodele obiectului String Cele mai importante metode ale obiectului String vor fi definite i exemplificate n continuare. Metoda search(s) caut irul s n ir dat. n cazul n care irul este gsit metoda returneaz poziia din irul dat al primului caracter al lui s, iar n caz contrar returneaz 1. De exemplu, secvena urmtoare: s=String(mamamare); alert(s.search(ma)) are ca efect afiarea valorii 0, adic poziia primei apariii a irului ma n irul dat. Metoda charAt(indice) - returneaz caracterul de pe poziia indice a unui ir. Metoda se poate folosi pentru a copia un caracter de la un ir la altul. De exemplu, pentru a forma o adres de email, din primul caracter al numelui i al prenumelui, urmat de irul @yahoo.com, avem codul: <HTML> <HEAD> </HEAD> <BODY> <SCRIPT language="JavaScript"> nume = new String("Niculescu") prenume = String("Rodica") email = prenume.charAt(0) + nume.charAt(0) + "@yahoo.com" document.write("adresa de email este: " + email) </SCRIPT> </BODY> </HTML>

Figura 18.12. Metoda charAt() 265

Metoda split(delimitator) creeaz un vector, a crui elemente vor fi subiruri ale irului dat, obinute de un ir delimitator. Astfel, din irul: s = 7, 35, 12, 67, 2007 , se va obine vectorul v=(7,35,12,67,2007). n exemplul urmtor se folosete ca delimitator irul ,. <HTML> <HEAD> </HEAD> <BODY> <SCRIPT language="JavaScript"> s =new String('7 , 35 , 12 , 67 , 2007') document.write("sirul dat este: " + s + "<BR>") v=s.split(",") document.write("vectorul creat este: " + "<BR>") for(i=0;i<v.length;i++) document.write(v[i] + " ") </SCRIPT </BODY> </HTML>

Figura 18.13. Metoda split()

Metoda slice(poz1,poz2) returneaz subirul cuprins ntre cele dou poziii, incluznd caracterul de pe poz1, dar nu conine caracterul de pe poziia poz2. Metoda substring(poz1,poz2) are exact acelai efect ca metoda slice(poz1, poz2). Metoda substr(poz,lung) returneaz tot un subir (ca i cele dou metode de mai sus), care ncepe de pe poziia poz si are lungimea lung. Exemplul urmtor probeaz cele trei metode: <HTML> <HEAD> </HEAD> <BODY> <SCRIPT language="JavaScript"> s = String("slice substring substr") document.write("sirul dat este: " +"<B>" +s+ "</B>" + "<BR>") document.write("metoda de substragere a unui sir aflat pe pozitiile: [poz1..poz2) este: " + "<B>" + s.slice(0,5) +"</B>" + "<BR>") document.write("metoda de substragere a unui sir aflat pe pozitiile: [poz1..poz2) este: "
266

+ "<B>" + s.substring(6,15) + "</B>" + "<BR>") document.write("metoda de substragere a unui sir de n caractere din pozitia poz este: " + "<B>" + s.substr(16,6) + "</B>" + "<BR>") </SCRIPT> </BODY> </HTML>

Figura 18.14. Metodele slice(), substring() i substr()

Metoda replace(sir1,sir2) returneaz un ir n care s-a nlocuit prima apariie a lui ir1 cu ir2. <HTML> <HEAD> </HEAD> <BODY> <SCRIPT language="JavaScript"> s = String("Univ. Matematica - Informatica Univ. Spiru Haret") document.write("sirul dat este: "+ "<B>" + s +"</B>" + "<BR>") document.write("sirul nou este: "+ "<B>" + s.replace("Univ.","Facultatea") +"</B>" + "<BR>") </SCRIPT> </BODY> </HTML>

Figura 18.15. Metoda replace()

267

Urmtoarele trei metode sunt de conversie a irurilor n numere i invers. Ele au mai fost definite, fiind utile n unele exemplificri. Metoda parseInt(s) i metoda parseFloat(s) - convertesc un ir la un numr ntreg, respectiv zecimal. De exemplu, atunci cnd introducem date cu prompt( sir_numeric,val_initiala) se returneaz o valoare de tip ir. Pentru a o putea folosi n calcule matematice se folosete una din metodele de mai sus, astfel: parseInt(prompt(sir_numeric,val_initiala)) . De exemplu: parseInt(prompt( dati dimensiune sirului, )) Metoda toString(n) convertete o valoare de tip string n numr. Aceast metod este automat apelat n cazul concatenrii irurilor. De exemplu, n declaraia: document.write(suma = + s), numrul s va fi considerat string. Urmtoarele ase metode se refer la font (dimensiune, culoare), stil (bold, italic) i efecte (scriere cu litere mari sau mici). Metoda fontcolor(culoare) returneaz irul ntre tag-urile <font color=culoare> i </font> i textul va apare cu culoarea culoare. Metoda fontsize(dim) returneaz irul ntre tag-urile <font size=dim> i </font> i textul va fi scris de dimensiune dim. Metoda bold() - returneaz irul ntre tag-urile <B> i </B> i n document textul va apare boldit. Metoda italics() returneaz irul ntre tag-urile <I> i </I> i n document textul va apare italic. Metoda toUpperCase() returneaz irul scris cu majuscule. Metoda toLowerCase() returneaz irul scris cu litere mici. Se probeaz metodele de mai sus n exemplul de mai jos. Se introduce un ir i se testeaz dac este alfabetic, adic conine litere i eventual caracterul spaiu. Pentru a evita o testare n plus se transform irul n majuscule sau n litere mici. Se folosesc operatorii logici: ! (negare logic), &&(i logic) i || (sau logic), introdui n capitolul 16. <HTML> <HEAD> </HEAD> <BODY> <SCRIPT language="JavaScript"> var ras=true s=prompt ("Introduceti sirul", " ") alert(s.fontcolor("red")) document.write(s.fontcolor("red")+"<BR>") s=s.toUpperCase( ) document.write("Sirul scris cu majuscule:".fontsize("5") +"<BR>"+ s.fontsize("5") +"<BR>") for (i=0; i<s.length; i++) if (! (s.charAt(i) >= "A" && s.charAt(i)<="Z" || s.charAt(i) == " ")) ras=false
268

if (ras) document.write("Sirul este alfabetic".fontcolor("blue") ) else document.write("Sirul NU este alfabetic".fontsize("6")) </SCRIPT> </BODY> </HTML>

Figura 18.16. Metodele toUpperCase(), fontsize(), fontcolor()

18.2.3. Obiectul Array

n JavaScript, un masiv n dimensional este un obiect de tip Array . De obicei se lucreaz cu vectori, dar se va arta cum se pot defini si matrice de diferite dimensiuni. Un tablou are un nume unic, iar elementele tabloului se identific printr-un indice. S-a artat n seciunea 18.1 c ne putem referi la membrii (proprieti i metode) unui obiect prin: nume_obiect.proprietate/metod nume_obiect[proprietate/metod] nume_obiect[index_proprietate/metod] Amintim c pentru orice lucru indexat (proprieti i metode, elemente de tablou, caracterele unui ir), numerotarea indecilor ncepe de la 0. Avnd n vedere cele de mai sus, urmtoarele afirmaii sunt corecte: z[imag] z[imag] z[1] Declararea unui tablou Pentru a declara un tablou se folosete constructorul Array( ) i operatorul new ntr-o declaraie de forma: [var] nume_vector = new Array() ([ ] are caracter opional n declaraii)
269

Constructorul Array() este de fapt o metod de creare a unui obiect de tip tablou. Accesarea elementelor unui vector se face cu nume_vector[indice]. Iniializarea i afiarea unui tablou Prin declararea unui tablou se aloc memorie tabloului, dar nu conine nc elemente. Pentru a crea elemente tabloului, acesta trebuie iniializat, sau se atribuie valori prin instruciuni de atribuire n program. Componentele unui tablou pot s nu aib toate aceleai tipuri de valori. Iniializarea unui tablou se poate face n dou moduri: 1. iniializnd fiecare element, ca n exemplul urmtor: v= new Array() v[0]= produs; v[1]=10; v[2]= 25.5; v[3]= false; v[4]= 19% 2. declarnd o list de argument, astfel: v= new Array(produs, 10, 25.5, false, 19%) n exemplul urmtor se creeaz un vector cu n componente, se iniializeaz i se afieaz. <HTML> <HEAD> </HEAD> <BODY> <B> Initializarea si afisarea unui vector </B> <BR> <SCRIPT language="JavaScript"> n=parseInt(prompt("Dim. vect n= ", 0)) v= new Array() for(i=0;i<n;i++) v[i]=parseInt(prompt("v[" +i +"]=", 0)) document.write("Vector dat:"+"<BR>") for(i=0;i<n;i++) document.write(v[i]+" ") </SCRIPT> </BODY> </HTML>

Figura 18. 17. Iniializarea unui vector

Cum un obiect poate avea ca proprieti alte obiecte (obiecte incluse), putem declara tablouri cu mai muli indici. De exemplu, accesarea unui element al
270

unui tablou bidimensional se face cu a[i][j]. ncercarea de a accesa elementele unei matrice n modul a[i, j] este eronat. n urmtorul exemplu se creeaz o matrice a crei elemente sunt produsele i*j. <HTML> <HEAD> </HEAD> <BODY> <B> Matrice cu elementele a[i][j]= i*j </B> <BR> <SCRIPT language="JavaScript"> var i,j n=parseInt(prompt("Dim. vect n= ", 0)) a= new Array(n) for(i=0;i<n;i++) a[i]= new Array(n) for(i=0;i<n;i++) for(j=0;j<n;j++) a[i][j]=( i*j) for(i=1;i<n;i++) {for(j=1;j<n;j++) document.write(a[i][j] + " " ); document.write("<BR>") } </SCRIPT> </BODY> </HTML>

Figura 18. 18. Iniializarea unei matrice

Lungimea unui vector Proprietatea length a obiectului tablou reine numrul de elemente ale unui vector . n JavaScript nu este limitat numrul de componente ale unui tablou. De exemplu, dac avem un vector cu 5 elemente, se poate crea un element, fie acesta v[10], fr a crea toate elementele pn la el, astfel: <HTML> <HEAD> </HEAD> <BODY> <B> Proprietatea length</B> <BR> <SCRIPT language="JavaScript"> document.write("sirul dat este: ".fontsize(5)+ "<BR>") v= new Array( 1 , 2 , 3 , 4 , 5 ) for(i=0; i<5; i++)
271

document.write(v[i] + " ") document.write( "<BR>"+"se adauga un element v[10]= 11"+"<BR>") v[10]=11 document.write("lungimea sirului este: ".bold()+ v.length) </SCRIPT> </BODY> </HTML>

Figura 18. 19. Proprietatea length

Metodele obiectului Array Cele mai importante metode ale obiectului Array sunt definite i exemplificate n continuare: Metoda sort( ) sorteaz, n ordine lexicografic, elementele unui tablou (aceastea sunt tratate ca iruri de caractere). n exemplul urmtor se sorteaz lexicografic un ir. Carecterele irului se trec ntr-un vector, care accept metoda sort() pentru sortarea lexicografic. n final se reconstituie irul din elementele vectorului. <HTML> <HEAD> </HEAD> <BODY> <SCRIPT language="JavaScript"> s=prompt ("Introduceti sirul", " ") document.write("sirul dat este".bold() + s.bold() +"<BR>") s=s.toLowerCase( ) v= s.split(";");v.sort(); s=" " for (i=0; i<v.length; i++) s+=v[i]+" , " document.write("Sirul sortat lexicografic este: ".italics() + s.italics()) </SCRIPT> </BODY> </HTML>

272

n cazul n care vectorul este numeric, se observ c metoda sort ordoneaz lexicografic (de exemplu, 2007<345)

Figura 18. 20. Metoda sort()

Pentru a sorta un vector numeric, cresctor sau descresctor, se folosete un algoritm de sortare cunoscut, de exemplu metoda bulelor <HTML> <HEAD> </HEAD> <BODY> <B> Sortarea unui vector </B> <BR> <SCRIPT language="JavaScript"> n=parseInt(prompt("Dim. vect n= ", 0)) v= new Array() for(i=0;i<n;i++) v[i]=parseInt(prompt("v[" +i +"]=", 0)) document.write("Vector dat:"+"<BR>") for(i=0;i<n;i++) document.write(v[i]+" ") document.write("<BR>") do { sortat=false pas=1 for(i=0; i<(n-pas); i++) if(v[i]>v[i+1])
273

{ aux=v[i]; v[i]=v[i+1]; v[i+1]=aux; sortat=true} pas=pas+1 } while(sortat) document.write("Vector sortat crescator:"+"<BR>") for(i=0;i<n;i++) document.write(v[i]+" ") </SCRIPT> </BODY> </HTML>

Figura 18. 21. Vector sortat prin metoda bulelor

Metoda reverse() realizeaz inversarea elementelor unui vector. Metoda shift() terge primul element al unui tablou i apoi mut elementele unui tablou cu o poziie spre stnga. Metoda push(val_elem) adaug la sfritul unui tablou un nou element. Metoda pop() terge ultimul element dintr-un tablou. S considerm exemplul din figura 18.19 i s aplicm metodele: reverse(), shift(), push() i pop(). <HTML> <HEAD> </HEAD> <BODY> <B> reverse(), shift(), push() i pop()</B> <BR> <SCRIPT language="JavaScript"> document.write("Sirul dat este: ".fontsize(5)+ "<BR>") v= new Array( 1 , 2 , 3 , 4 , 5 ) for(i=0; i<5; i++) document.write(v[i] + " ") v.reverse() document.write("<BR>"+"Sirul inversat este( reverse):".bold()+"<BR>") for(i=0; i<5; i++) document.write(v[i] + " ") document.write("<BR>"+"Sirul fara primul elemet(shft):"bold()+"<BR>") v.shift()
274

for(i=0; i<v.length; i++) document.write(v[i] + " ") document.write("<BR>"+"Un nou ultimul elemet(push):".bold()+"<BR>") v.push("23") for(i=0; i<v.length; i++) document.write(v[i] + " ") document.write("<BR>"+"Sir fara ultimul elemet(pop):.bold()+"<BR>") v.pop() for(i=0; i<v.length; i++) document.write(v[i] + " ") </SCRIPT> </BODY> </HTML>

Figura 18.22. Metodele reverse(), shift(), puch() i pop()

275

19. Interaciune JavaScript HTML

n capitolul 17 seciunea 17.2 (Funcii n JavaScript), s-a artat modul de apelare a unei funcii definite ntr-un script, folosind sintaxa: nume_funcie([parametri]). n acest capitol vom arta c funciile pot fi apelate din codul HTML al paginii. Mecanismul care permite acest lucru este acela de tratare a evenimentelor. De exemplu, evenimente pot fi: ncrcarea i descrcarea unei pagini web de ctre browser, evenimente numite onload, respectiv onunload sau la executarea unui clic pe un buton are loc evenimentul onclick. Conceptul de tratare a evenimentelor const tocmai n crearea de funcii care s reacioneze la evenimentele importante. n JavaScript exist 18 evenimente, o parte dintre acestea urmnd s fie descrise n continuare. Un obiect recepioneaz anumite evenimente, exemplu: elementul HTML <BUTTON atribute>, n JavaScript e considerat obiectul BUTTON. El poate recepiona evenimentul onclick (clic cu mouse-ul pe suprafaa lui). n urma acestui eveniment se poate lansa o funcie. Apelarea unei funcii ca rspuns la un eveniment se face ca valoare a unui atribut a unui tag HTML. Structura apelului de funcie prin cod este: <nume_tag atribut=nume_functie() > n JavaScript tag-urile sunt obiecte, atributele pot fi evenimente, valorile atributelor pot fi proprieti. n cazul nostru, considerm o funcie Hello( ), pe care o apelm ca atribut al elementului <BUTTON>, astfel: <HTML> <HEAD> <SCRIPT language="JavaScript"> function Hello() {alert("Salutare")} </SCRIPT></HEAD> <BODY> <BUTTON onclick=Hello()> Click! </BUTTON> </BODY> </HTML>

276

Figura 19.1. Apel funcie prin cod HTML

19.1. Legtura ntre JavaScript i HTML

n aceast seciune vom arta cum se folosesc elementele HTML ca obiecte JavaScript. n capitolele 1-12 s-au introdus elementele HTML, dar nu s-au introdus evenimentele, deoarece nu era introdus JavaScript, care trateaz evenimentele. Legtura dintre HTML i JavaScript poate fi sintetizat n urmtorii pai: Elementele HTML au atribute care caracterizeaz elementul respectiv. De exemplu, elementul TABLE are atributele: border, width, height, align,valing, cellspacing, cellpadding, bordercolor, bgcolor, rules, frame. Majoritatea elementelor HTML (excepie: body, head, html, base, basefont) au atributul ID, sau NAME, dup care elementul poate fi identificat. Sintaxa elementelor HTML este <element atribut1 = valoare1 .atribut n=valoare n) [.]</element> n HTML nu se face distincie ntre literele mari i cele mici cnd scriem atribute, de exemplu atributul border sau BORDER sau Border semnific acelai lucru. n HTML exist 18 tipuri de evenimente : onclick, onload, onunload, ondblclick, onmouseover, onmouseout, onmousemove, onmouseup, onmousedown, onfocus, onlbur, onkeypress, onkeydown, onkeyup, onselect, onchange, onsubmit, onreset. O componenta HTML poate recepiona anumite evenimente, de exemplu elementul button, poate recepiona onclick, ondblclick. Pentru JavaScript, elementele HTML sunt obiecte. Atributele componentelor HTML sunt n JavaScript, proprietile obiectelor. n timpul afirii unei pagini web, proprietile obiectelor pot fi modificate dinamic ntr-un script. O component HTML este o instan a unui obiect. De exemplu, dac avem ntr-o pagin web urmtorul tag: <IMG ID=poza SRC=p1.jpg> elementul IMG devine obiectul IMG o component a obiectului IMG este poza
277

atributul src din HTML devine proprietatea src a obiectului poza.src p1.jpg este valoarea atributului src din HTML, i valoarea proprietii src a obiectului poza.src n JavaScript se face distincie ntre litere mari i mici, aa c atributul SRC din HTML trebuie scris ca proprietate n JavaScript cu litere mici. Evenimentele pot fi recepionate de anumite componente (asa cum am mai precizat). Executarea unui eveniment lanseaz n execuie o funcie scris ntr-un script. Apelul funciei se face n cadrul codului HTML, ca atribut al unui element HTML. De exemplu, pentru evenimentele onload (ncarcarea) i unload (descrcarea) unei pagini web, se creeaz dou funcii, aa cum reiese din exemplul de mai jos: <HTML> <HEAD> <TITLE>Apel funcie din HTML</TITLE> <SCRIPT language="JavaScript"> function salutare() {alert ("Bun, sunt Ana Ionescu")} function la_revedere() {alert ("Pa, ne mai auzim la telefon")} </SCRIPT> </HEAD> <BODY onload="salutare()" onunload="la_revedere()"> </BODY> </HTML>

Figura 19.2. Evenimentele onload i unload

19.2. Funciile setTimeout() si clearTimeout()

n capitolul 16 s-au prezentat unele metode ale obiectului WINDOW i anume: alert()i prompt(). n aceast seciune se vor prezenta alte dou metode ale obiectului window: setTimeout() i clearTimeout(). Aceste funcii se vor prezenta nainte de a prezenta obiectul window, deoarece se vor utiliza n exemplele ce vor urma. Aceste funcii se folosesc pentru a face paginile web animate, adic afiarea n aceeai poziie a mai multor secvene text sau imagine, care s staioneze un anumit interval de timp.

278

Funcia setTimeout realizeaz o pauz dup afiarea unei secvene, pn la reluarea afirii. Funcia are 2 parametri: primul este numele funciei, apelat la pauz, iar al doilea parametru este lungimea pauzei n milisecunde. Funcia setTimeout() returneaz o referin, o valoare care este folosit ca parametru pentru funcia clearTimeout(). Sintaxa funciei setTimeout() este: ref = setTimout(nume_funcie, nr_milisecunde) De exemplu, s presupunem c introducem un buton n pagin. La apsarea butonului se va lansa o funcie care are inclus funcia setTimeout(), care execut funcia la fiecare 2 secunde. Execuia funciei se va ncheia odat cu nchiderea ferestrei. <HTML><HEAD> <SCRIPT language = "JavaScript"> function Mesaj(){ alert("Mesajul va fi afiat la 2 secunde") ref = setTimeout("Mesaj",2000)} </SCRIPT></HEAD> <BODY> <INPUT TYPE="BUTTON" value = "Click!" onclick = "Mesaj()"> </BODY></HTML>

Figura 19.3. Funcia setTimeout()

Funcia clearTimeout() este tot o funcie predefinit, o metod a obiectului window. Aceasta funcie are ca intrare (parametru) valoarea returnat a funciei setTimeout() (n exemplul de mai sus valoarea returnat este ref). Efectul funciei este de a ntrerupe execuia funciei din parametrul funciei setTimeout() la cerere, nu la nchiderea ferestrei, aa cum se ntmpl n lipsa acestei funcii. Utiliznd funcia clearTimeout, utilizatorul unei pagini poate da orice alt comand, ntrerupnd execuia funciei la trecerea intervalului de timp nr_milisecunde. Dac dorim ntreruperea execuiei funciei Mesaj() din exemplul de mai sus, naintea nchiderii ferestrei folosim funcia clearTimeout(). Aceast funcie este inclus ntr-o funcie Oprire(ref) care se lanseaz cnd butonul STOP este apsat. Exemplul de mai sus cu adugarea funcie clearTimeout(ref) este:
279

<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>

Figura 19.4. Funcia clearTimeout()

n exemplul urmtor dorim ca un buton s afieze alternativ 2 mesaje diferite la un interval de timp dat, de exemplu la 2 secunde. <HTML><HEAD> <SCRIPT language = "JavaScript"> function Afiseaza() { alert("Butonul iniial apsat")} function Schimba() { if (but.value == "mesaj_1") but.value = "mesaj_2" else but.value="mesaj_1" setTimeout("Schimba()",2000) } </SCRIPT></HEAD> <BODY onload = Schimba()> <INPUT type="button" id="but" value=mesaj_1 onclick="Afiseaza()"> </BODY></HTML>
280

Figura 19.5. Valori alternative ntr-o poziie

n HTML cele mai importante elemente care recepioneaz evenimente sunt elementele <FORM> i <IMG>. Vom descrie n continuare aceste elemente, ce evenimente recepioneaz, ce proprieti i metode au.

19.3. Elementul <FORM> n JavaScript

n capitolul 10 s-a descris modul de realizare al unui formular. n acest capitol se presupune c tim semnificaia elementelor unui formular i vom descrie tratarea evenimentelor recepionate de elementele unui formular. Amintim c un formular conine mai multe elemente, numite i controale: casete de text, casete de validare, butoane radio i liste de opiuni. Programele de pe server care prelucreaz datele unui formular se numesc, dupa cum s-a spus n capitolul 10, programe .CGI (Common Gateway Interface). Programele CGI sunt scrise n limbaje ca: PHP, JSP, PERL, ASP, care pot reaciona la nevoie cu programe nonweb (baze de date, aplicaie windows etc.) necesare prelucrrii formularelor. Majoritatea elementelor unui formular au atributele name, care identific elementul n formular i value, care atribuie o valoare prestabilit elementului. n metoda gate, datele se transmit n pereche (nume, valoare). Elementele unui formular pot fi folosite ntr-o pagin ca atare, fr a fi strnse ntr-un formular. Tag-urile INPUT, SELECT, TEXTAREA din HTML vor deveni obiectele Input, Select, Textarea n JavaScript.
281

n JavaScript se pot valida informaiile introduse n paginile web, precum i schimbarea dinamic a unui formular n timp ce acesta este afiat, putem activa sau dezactiva elemente, se poate stabili o valoare prestabilit etc. Un element al formularului devine un obiect n JavaScript. Un atribut al elementului devine o proprietate a obiectului. Evenimentele se introduc ca proprieti crora li se asociaz apelul funciei, care se va executa cnd se produce evenimentul (clic pe un buton, selectarea unui buton radio, selectarea elementelor unei liste sau mutarea cursorului pe un element etc.). Cnd un element al formularului este selectat (dac este un edit, apare cursorul de editare, dac este un buton, el se scufund) se spune ca el primete focus-ul. Evenimentul onfocus are loc cnd elementul primete focus-ul. Evenimentul onblur are loc cnd elementul pierde focus-ul. Cnd utilizatorul mut cursorul n afar, ieirea din afara ateniei se mai numete i out of focus Nu toate elementele pot primi focus-ul, de exemplu IMG. De obicei l primesc elementele care permit utilizatorului s scrie ceva, excepie fcnd butoanele.

19.3.1. Validarea datelor

n exemplul de mai jos se valideaz dac ntr-un ir apare un caracter anume. S presupunem c dorim s introducem o caset de text NUME cu numele i prenumele unei persoane de forma nume_prenume. Se testeaz dac apare caracterul underscore (_). <HTML> <HEAD> <TITLE>Onblur</TITLE> <SCRIPT language="JavaScript"> function validare_nume (numele) {var ind=numele.search ("_") <!sau var ind=numele.indexOf(_)--> if (ind==-1) alert ("Nume incorect introdus")} </SCRIPT> </HEAD> <BODY> <FORM action="" method="psd") Nume: <input type="text" name="nume_pren" onblur="validare_nume(this.value)"><BR> <input type="submit" name="submit" value="submit"> </FORM></BODY></HTML>

282

Figura 19.6. Evenimentul onblur

Dup introducerea numelui, evenimentul onblur lanseaz funcia validare_nume ( ) creia i se transmite valoarea this.value. Aceasta nseamn c obiectul this se refer la obiectul curent, n cazul nostru nume_pren, iar proprietatea value este valoarea introdus de utilizator. Din seciunea 17.3 se cunoate faptul ca funciile search(x) i indexOf (x) returneaz poziia unui caracter ntr-un sir. Dac irul nu conine caracterul x, funciile returneaz -1. Variabila IND ia valoarea -1 dac simbolul _ nu se gsete n nume_utilizator.

19.3.2. Obiectele din Formular

Tot ce se poate vedea pe un site web sunt obiecte. Primul obiect este fereastra, care n JavaScript este obiectul window, care are ca metode: alert, prompt, confirm ( ) etc. O fereastr conine un obiect document care are printre metode write etc. Un document poate avea unul sau mai multe formulare i un formular poate avea unul sau mai multe elemente. Obiectele formular sunt stocate ntr-un tablou, numit forms, unde ordinea n tabel este ordinea n care apar formularele n script. n tabel, numrtoarea componentelor ncepe cu 0. Dac dorim s ne referim la formularul 2, scriem: [window.]document.forms[1] (unde [] are caracter opional.
283

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>

Figura 19. 7. Valoare element formular

19.3.3 Utilizarea evenimentului onchange

O alt metod de a anima o pagin sau un formular const n completarea automat a unor csue cu informaii n funcie de informaiile din alte elemente, deja introduse. Aceast metod poate fi realizat cu evenimentul onchange, care este executat cnd un element pierde focus-ul (iese din atenie) i valoarea elementului s-a modificat de la intrarea n atenie (primete focus). S presupunem c introducem patru csue de text, care conin informaii despre: nume_produs, cantitate, pret/buc i valoarea pltit. Dorim s completm automat valoarea pltit pe baza informaiilor introduse n csuele cantitate i pre.
284

Valoarea pltit va consta din produsul dintre cantitate i pre. Obiectele CANTITATE i PRET capteaz (recepioneaz) evenimentul onchange (tag-ul INPUT are atributul onchange) care apeleaz funcia calcul_valoare(). Codul pentru acest exemplu este dat n continuare: <HTML> <HEAD> <SCRIPT language = "JavaScript"> function calcul_valoare() { if (produse.cant.value.length > 0 && produse.pret.value.length > 0) { produse.val.value = produse.cant.value * produse.pret.value } } </SCRIPT> </HEAD> <BODY> <FORM name="produse"> NUME_PRODUS: <INPUT type="text" name="Produs"><BR> CANTITATE: <INPUT type="text" name="cant" onchange="calcul_valoare()"><BR> PRET: <INPUT type="text" name="pret" onchange="calcul_valoare()"> <BR> VALOARE: <INPUT type="text" name="val"><BR> </FORM></BODY></HTML>

Figura 19.8. Evenimentul onchange

Evenimentul onchange poate fi utilizat i pentru schimbarea, n mod dinamic, a valorilor atributelor elementelor unei pagini.
285

Astfel, s presupunem c avem un formular completat, iar n cazul n care dorim s facem o schimbare n datele introduse putem folosi evenimentul onchange. S considerm un formular cu date despre Universitate. Dac modificm unul din elementele formularului, de exemplu, numrul de telefon sau adresa, evenimentul onchange apeleaz o funcie care evideniaz prin formatare elementul modificat. Codul pentru acest exemplu este: <HTML><HEAD> <SCRIPT language="JavaScript"> function formatare(obiect) { obiect.style.color = "red" obiect.style.background = "cyan" obiect.style.fontStyle = "italic" obiect.style.fontWeight = "bold" } </SCRIPT></HEAD> <BODY><PRE> UNIVERSITATE: <INPUT type="text" name="univ" value="Spiru Haret" onchange = "formatare(this)"> TELEFON: <INPUT type="text" name="tel" value="(021) 314 9431" onchange="formatare(this)"> ADRESA: <TEXTAREA rows=2 cols=30 wrap="off" onchange="formatare(this)">Str. Ioan Ghica nr. 13, sector 3, Bucureti, ROMANIA</TEXTAREA> EMAIL: <INPUT type="text" name="mail" value="info@spiruharet.ro" onchange="formatare(this)"> </PRE> </BODY><HTML>

Figura 19.9. Schimbarea valorilor atributelor 286

n exemplul de mai sus se observ c dac se face o modificare asupra unei csue de text, dup mutarea cursorului pe alt zon dect cea modificat (out of focus), informaiile din csua modificat vor fi formatate conform funciei formatare(obiect) cu culoarea roie, fundal cyan, italic i bold.

19.3.4. Evidenierea seleciei csuelor de validare, utiliznd JavaScript

Csuele de validare sunt utilizate (aa cum s-a artat n capitolul 10 Formulare) pentru a selecta unul sau mai multe articole dintr-un set de articole. Casuele de validare multipl sunt de tipul checkbox n html. Valoarea checkbox a atributului type a tag-ului INPUT se poate asocia i cu atributele name, value i checked. Atributul checked, care n JavaScript este proprietatea checked, are o valoare boolean: true dac proprietatea exist i false n caz contrar. n exemplul care urmeaz, considerm un set de articole electro-casnice care exist ntr-un magazin. Se vor bifa cele care exist la o anumit dat n stoc. Funcia Stoc() evalueaz fiecare csu de validare, iar elementele bifate vor fi afiate ntr-o csu de avertizare (cu ajutorul funciei alert). Se va folosi un buton, Testare, care recepioneaz evenimentul onclick, care are ca valoare apelul funciei Stoc(). Codul HTML va fi: <HTML><HEAD> <TITLE><CHECKBOX></TITLE> <SCRIPT language = "JavaScript"> function stoc() { var stoc_existent = "Produse existente n stoc: " for (i=0; i<= Articole[i].lenght; i++) if (Articole[i].checked == true) stoc_existent+="Articole[i].value" alert(stock_existent) } </SCRIPT> </HEAD> <BODY> <INPUT type="checkbox" name="Articole" value=1>FRIGIDER<BR> <INPUT type="checkbox" name="Articole" value=2>MAIN DE SPLAT<BR> <INPUT type="checkbox" name="Articole" value=3>TELEVIZOR<BR> <INPUT type="checkbox" name="Articole" value=4>ASPIRATOR<BR> <INPUT type="checkbox" name="Articole" value=5>ROBOT DE BUCTRIE<BR> <INPUT type="button" name="testare" value="Ok" onclick="stoc()"> </BODY> </HTML>

287

Figura 19.10. Obiectul checkbox

19.3.5. Listele de opiuni schimbate dinamic cu ajutorul butoanelor radio,

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>

Figura 19.10. Obiectul Radio

19.3.6. Trimiterea unui formular, utiliznd evenimentul onsubmit

Pentru a modifica unele elemente dintr-un formular, dup ce acesta a fost trimis programului de scriptare CGI n vederea prelucrrii, se poate folosi evenimentul onsubmit, ca atribut al elementului SUBMIT. Dac dorim, de exemplu, s validm datele dintr-un formular sau s corectm unele informaii introduse, se poate asocia o funcie n JavaScript evenimentului onsubmit. n exemplul urmtor, considerm o funcie creeaza_parola(), care creeaz un element de tip ascuns (tipul hidden introdus n capitolul 10), numit parol, din: prima liter a numelui i a prenumelui i din lungimea numelui. Numele acestui element i valoarea creat vor fi trimise spre prelucrare programului CGI. Cnd se execut clic pe butonul SUBMIT, acesta recepioneaz evenimentul onsubmit care apeleaz funcia creeaza_parola(), care se execut i apoi formularul este trimis programului CGI. Pentru formularul de mai jos parola va fi EA3 (iniiala numelui i prenumelui i lungimea numelui), iar codul este urmtorul:
290

<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>

Figura 19.10. Evenimentul onsubmit

Se observ din bara de stare, n datele transmise, paraloa obinut EA3.

19.3.7. Activarea, Dezactivarea, Citirea unor elemente realizate cu funcii JavaScript

n exemplul de mai sus se observ c nu se poate forma parola dac elementele Nume, Prenume nu sunt completate. De asemenea, dorim ca elementul Parola, odat creat, s nu poat fi modificat, ci numai citit.
291

n capitolul 10 s-a artat c un element poate fi dezactivat stabilind valoarea atributului disabled. Dac disabled are valoarea true, atunci elementul respectiv este dezactivat, n caz contrar el este activat. De asemenea s-a definit i atributul readonly a elementului INPUT, pentru a schimba valoarea unui element care nu poate fi modificat. Dac atributul readonly are valoarea true, atunci nu se poate face nicio modificare elementului. Dac dorim, de exemplu, s schimbm valoarea atributului readonly a elementului Parola din valoarea true n false pentru a crea parola, atunci n funcia JavaScript, nainte de a atribui o valoare elementului Parola, trebuie resetat atributul readonly pe valoarea false. S relum exemplul 19.12 i s considerm iniial c elementul Parola este disabled i readonly. Dup introducerea informaiilor n cmpurile Nume si Prenume, se apeleaz funcia activeaza_parola(), care va activa cmpul Parola i apoi funcia creeaza_parola(), care va reseta atributul readonly la valoarea false i i va atribui valoarea format din primele litere din cmpurile Nume i Prenume i din lungimea cmpului Nume. <HTML><HEAD><TITLE>DISABLED & READONLY</TITLE><HEAD> <SCRIPT language = "JavaScript"> function activeaza_parola() { if (Nume.value.length > 0 && Prenume.value.length > 0) Parola.disabled = false} function creaza_parola() { Parola.readonly = false Parola.value = Nume.value.charAt(0) + Prenume.value.charAt(0) + Nume.value.lenght Parola.readonly = true} </SCRIPT></HEAD> <BODY> <FORM name="Parola" > Nume: <INPUT type="text" name="Nume" onchange="activeaza_parola()"><BR> Prenume: <INPUT type="text" name="Prenume" onchange="activeaza_parola()"><BR> Parola: <INPUT type="text" name="Parola" disabled = true readonly=true><BR> Parola: <INPUT type="submit" name="SUBMIT" value="OK" onsubmit="creaza_parola()"> </FORM> </BODY></HTML>

292

Figura 19.11. Disabled i readonly

Se observ din bara de stare c parola nu mai este vizibil.

19.4. Imagini n JavaScript

n capitolul 6, Imagini, s-a prezentat elementul IMG. Acesta are atributele: src, alt, id, align, width, height, border, hspace, vspace. n JavaScript elementul html IMG devine obiectul IMG, care are, ca proprieti, atributele elementului IMG enumerate mai sus, cu excepia atributului ID. Evenimentele recepionate de elementul IMG sunt: onclick evenimentul se produce cnd se execut un clic pe un obiect aflat pe pagin ondblclick evenimentul se produce cnd se execut dublu clic pe un obiect onmousemove evenimentul se produce, n mod continuu, cnd cursorul mouse-ului se mic pe un obiect onmouseover evenimentul se produce, o singur dat, cnd se trece cu mouse-ul peste un obiect onmouseout evenimentul se produce cnd mouse-ul prsete suprafaa unui obiect Se observ i din modul de definire c aceste evenimente pot fi recepionate i de alte obiecte, nu doar de obiectul IMG. Pentru a schimba aspectul unei pagini, pe msur ce vizitatorul parcurge o pagin, cu ajutorul mouse-ului se folosesc elementele care recepioneaz evenimentele de mai sus, cunoscute i sub numele de elemente rollover (n traducere rollover = tumb) Un element rollover este produs de unul dintre evenimentele definite mai sus i are loc cnd un vizitator al unei pagini trece cu mouse-ul peste un obiect imagine, text, element al unui formular.
293

Pentru a folosi elemente rollover putem utiliza dou metode: metoda direct prin asocierea unei aciuni atributului onmouseover (de exemplu) al unui tag HTML, caz n care nu se folosete JavaScript metoda indirect prin crearea unei funcii JavaScript apelat de atributul onmouseover (de exemplu) la declanarea unui eveniment (onmouseover). Se folosete, mai ales, dac se dorete s aib loc mai multe aciuni ca rspuns la un eveniment. 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.

19.4.1. Evenimentele onclick i ondblclick

S presupunem c obiectul IMG recepioneaz evenimentul onclick. n urma acestui eveniment, imaginea, care va conine atributul onclick, va evidenia imaginea, nconjurnd-o cu un chenar de grosimea 7px. Folosind metoda direct vom avea codul: <HTML> <HEAD> <TITLE>ONCLICK IMAGINE </TITLE> </HEAD> <BODY> <IMG height="100" width="100" border=2 src="flori.jpg" onclick="border = 7">

294

</BODY></HTML>

Figura 19.12. Evenimentul onclick

Folosirea elementului ondblclick prin metoda indirect, cu ajutorul unei funcii apelat de atributul onclick al tag-ului IMG. <HTML><HEAD><TITLE>ONCLIK</TITLE> <SCRIPT language = "JavaScript"> function Afiseaza() {floare.border=7} </SCRIPT> </HEAD></BODY> <IMG ID="floare" src="flori.jpg" height="100" width="100" border=2 onclick="Afiseaza()"> </BODY></HTML>

Figura 19.13. Proprietatea onclick cu valoare apel de funcie

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

Instruciunea de atribuire (border = 7) trebuie neaprat sa fie inclus ntre ghilimele sau ntre apostrofuri. Este indicat ca ntre ghilimele s fie cuprins instruciunea de atribuire i ntre apostrofuri valorile atributelor.

19.4.2. Evenimentul onmousemove

Dac dorim ca un element s se se mite continuu atunci cnd ne aflm cu mouse-ul deasupra unui obiect se folosete evenimentul onmousemove. S considerm c dorim s mrim continuu o imagine n nlime cnd ne aflm cu mouse-ul deasupra ei. Codul prin cele dou metode: <HTML> <HEAD><TITLE>ONMOUSEMOVE</TITLE> </HEAD> <BODY> <IMG ID="floare" src="flori.jpg" height="50" width="50" onmousemove="floare.height+=5"> </BODY><HTML> Utiliznd o funcie JavaScript, apelat de atributul onmousemove al elementului IMG, pot s aib loc mai multe aciuni. n exemplul de mai sus se poate mri o imagine i n lime i n nlime. <HTML><HEAD> <TITLE>ONMOUSEMOVE</TITLE> <SCRIPT language = "JavaScript"> function Mareste(){ floare.width ++ floare.height++} </SCRIPT> <BODY> <IMG ID="floare" src="flori.jpg" onmousemove="Mareste()"> </BODY></HTML>

height="100"

width="100"

Figura 19.14. Evenimentul onmousemove 296

19.4.3. Evenimentele onmouseover i onmouseout

Evenimentul onmouseover aduce un rollover pe ecran i se produce o singur dat cnd mouse-ul trece peste un obiect. Dac se dorete a reveni asupra modificrilor fcute de producerea evenimentului onmouseover, se utilizeaz evenimentul onmouseout care are loc atunci cnd mouse-ul prsete obiectul respectiv. De exemplu, dorim s schimbm o imagine atunci cnd mouse-ul este deasupra ei cu o alta i dup ce mouse-ul prsete imaginea s revin prima imagine. Codul n cele 2 variante este dat mai jos. <HTML> <HEAD><TITLE>ONMOUSEOVER SI ONMOUSEOUT</TITLE> </HEAD> <BODY> <IMG height="100" width="100" src="flori.jpg" onmouseover="src=flori1.jpg" onmouseout="src ='flori.jpg'"> </BODY> </HTML> Acelai efect obinem utiliznd 2 funcii: Prima, care schimb o imagine cu alta i este apelat de evenimentul onmouseover a doua, care este apelat de evenimentul onmouseout i aduce prima imagine cnd mouse-ul iese de pe suprafaa imaginii. <HTML> <HEAD> <TITLE>ONMOUSEOVER SI ONMOUSEOUT</TITLE> <SCRIPT language = JavaScript> 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

Figura 19.15. Evenimente onmouseover i onmouseout

19.4.5. Realizarea unei animaii

Din capitolul 12 se tie cum poate fi ncrcat un fiier avi, care este un film realizat din cteva imagini. De multe ori ncrcarea unui fiier avi poate dura, ceea ce poate supra pe unii vizitatori. Se poate realiza o animaie ncrcnd imaginile ntr-un obiect array i folosind unele funcii apelate de evenimentele onmouseover sau onclick. Funcia se va executa cnd mouse-ul va fi pe imagine, respectiv cnd se va da clic pe imagine. Funcia va afia la o secund sau la un alt interval de timp dorit o imagine. n felul acesta se va crea impresia derulrii unui film. Se tie c orice obiect are metodele constructor i destructor, nseamn c obiectele image i array vor avea constructorul new Image(), care va crea o imagine i respectiv un string n memorie. Imaginile fiind n memorie, n cazul n care dorim s realizm o animaie nu se mai pierde timp cu ncrcarea lor ca n cazul unui fiier avi de animaie. Urmtorul exemplu arat cum se realizeaz acest lucru, afind 5 imagini. <HEAD> <TITLE>ANIMATIE in JavaScript></TITLE> <SCRIPT language = "JavaScript"> poza = new Array() var j=0 for (i=0; i <5; i++) {poza[i] = new Image() poza[i].src = (i+1) + ".jpg"} function Animatie() { j++ if(j==4 ) i=0 floare.src=poza[j].src setTimeout("Animatie()",1000)} </SCRIPT>
298

</HEAD> <BODY> <IMG ID="floare" src =1.jpg onmouseover="Animatie()"> </BODY> </HTML>

Figura 19.16. Animaie

299

20. Elemente avansate JavaScript

20.1. Legtura ntre HTML, JavaScript i CSS

n capitolele 13-15 s-a introdus CSS (Cascading Style Sheets) foi de stil (n cascad). Utiliznd JavaScript stilurile se pot modifica dinamic. Amintim c stilurile pot fi create inline (utiliznd atributul style), foi de stil n partea de antet a paginii (utiliznd blocul <STYLE> ... </STYLE>) i foi de stil externe, n fiiere cu extensia CSS. Pentru a crea un stil unui element (de exemplu P) n loc de a crea o foaie de stil pentru el n modul clasic: <STYLE> P {font-size: 40; color = red;} </STYLE> exist i alte dou posibiliti: se poate asocia elementului un nume cu atributul id=nume. n acest caz foaia de stil va fi : <STYLE> #nume {font-size: 40; color = red;} </STYLE> <P id=nume> text se poate defini o clas de element care poate fi apelat prin class=nume n acest caz foaia de stil va fi: <STYLE> .nume {font-size: 40; color = red;} </STYLE> <DIV class=nume> Text1 <P class=nume>Text2 Pentru a face legtura ntre HTML, JavaScript i CSS trebuie tiut c: Elementele HTML sunt obiecte n JavaScript. Fiecrui element i se poate asocia un id cu ajutorul cruia avem acces la proprietile obiectului respectiv n JavaScript fiecare obiect are proprietatea style cu excepia obiectelor: HTML, HEAD, BODY, BASE i BASEFONT
300

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

Figura 20. 1. Formatarea dinamic a unui text

2) n acest exemplu se realizeaz afiarea unui text, care iniial nu e vizibil i treptat se coloreaz intens. Se utilizeaz codul RGB. Culoarea alb are codul RGB(255,255,255) sau #FFFFF, iar bl are codul RGB(0,0,FF). <HTML><HEAD> <STYLE> #par { color:#FFFFFF; font-size:20; font-style:italic;} </STYLE> <SCRIPT language="JavaScript"> i=255, rel=0 function Aparitie() { i-par.style.color=255*256*256+256*i+i rel=setTimeout ("Aparitie()" , 5) if(i==0) clearTimeout(rel) p1.style.color="blue" } </SCRIPT></HEAD> <BODY onload="Aparitie() "> <Div id="par"> Acesta este un text care se va lumina cind se incarca pagina </Div> <P id="p1">Acesta este alt text care suporta modificare</P> </BODY></HTML>

Figura 20.2. Schimbarea culorii dinamic 302

3) n acest exemplu se afieaz un tabel care conine temperatura, umiditatea i presiunea. Acestea vor defila pe vertical. Odat afiat o caracteristic, aceasta va staiona o perioad pe ecran, dup care va disprea i va aprea la sfritul celorlalte, dup care din nou totul se deplaseaz pe vertical. Poziionarea este absolut, fa de colul stnga-sus. Pentru aceasta se folosete atributul top. Se folosete o funcie mutare(), care realizeaz deplasarea unei linii de tabel. Dup ce aceasta dispare, executarea se oprete. Aceast funcie este apelat de alt funcie schimbare(), care se execut la intervale egale de timp dup o ateptare. n felul acesta vor defila continuu valorile caracteristicilor. Defilarea se poate face i pe orizontal, folosind, n acest caz, atributul left. <HTML><HEAD> <STYLE> TH {background-color:"cyan"; color:"red"; width:300; height:100;} #P1 {position:absolute; top:0; left:20} #P2 {position:absolute; top:100; left:20} #P3 {position:absolute; top:200; left:20} </STYLE> <SCRIPT language="JavaScript"> i=0; x=0; rel=0 x1=0; x2=100; x3=200 function mutare () { P1.style.top=--x1 P2.style.top=--x2 P3.style.top=--x3 --x if (x== -100) { switch (i) { case 0: x1=200; break; case 1: x2=200; break; case 2: x3=200; } if(i ==2) i=0 else i++ x=0 } if (x==0) clearTimeout(rel) else rel=setTimeout( "mutare ()" , 20) } function schimba () { mutare () setTimeout("schimba ()", 5000) } </SCRIPT></HEAD> <BODY onload="schimba ()"> <TABLE> <TR id="P1"> <TH> Temperatura <TH> 10 Grade
303

<TR id="P2"> <TH> Umiditate <TH> 50% <TR id="P3"> <TH> Presiune <TH> 754 mm coloana de mercur(Hg) </TABLE> </BODY></HTML>

Figura 20.3. Defilare pe vertical

20.2. Obiectul WINDOW

n capitolele 16-19 s-a prezentat limbajul JavaScript. Informaiile sunt afiate de ctre browser un ajutorul ferestrelor. Utiliznd JavaScript, putem gestiona lucrul cu obiectul fereastr. Obiectul window este de cel mai nalt nivel, motiv pentru care se poate omite cuvntul window din faa proprietilor sau metodelor. De exemplu, sunt corecte ambele variante de apel a metodei alert(): window.alert(Un text) sau alert(Un text) Utiliznd proprietile i metodelele obiectului window putem: s deschidem mai multe ferestre i s schimbm coninutul acestora dinamic s nchidem ferestrele s determinm un stil ferestrei (cu menubar, scrollbar, bara de stare etc.) s activm i s dezactivm o fereastr n continuare se definesc cele mai importante metode i proprieti ale obiectului window. Unele metode ale obiectului window au fost deja introduse, fiind necesare pentru exemplificrile anterioare, i anume: alert(), prompt(), confirm() i setTimeout(). Metodele prezentate n continuare vor fi: open(), close(), focus(), blur(), scrollTo(), back(), forward() i stop().
304

20.2.1. Deschiderea i nchiderea unei ferestre

Site-urile moderne folosesc butoane, care, atunci cnd sunt apsate, deschid ferestre. Unele ferestre se pot deschide instantaneu la ncrcarea unei pagini web, de exemplu, reclamele. Pentru a deschide o fereastr se folosete metoda open(), care returneaz o referin care este un obiect fereastr. Sintaxa utilizrii metodei open este: fereastra=window.open(nume_fiier.html,nume_fereastr,list_parametri) unde: nume_fiier.html este adresa URL a paginii web care va aprea n fereastr nume_fereastr este numele pe care dorim s-l dm ferestrei list_parametri este opional i reprezint o list de parametri, separai prin virgul, care indic stilul ferestrei. Valorile acestor parametri sunt, n general, yes sau 1 i no sau 0. Valoarea implicit este no sau 0. Parametrii cei mai importani ai metodei open() sunt dai n tabelul din figura 20.4. Parametri directories location menubar resizable scrollbars status toolbar height width top, left Efect Butoane pentru directoare standard ale browser-ului Edit-ul care conine adresa fiierului HTML Bara de meniuri Redimensionarea ferestrei Barele de derulare 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

Figura 20.4. Parametrii metodei open()

Pentru a nchide o fereastr se folosete metoda close() a obiectului window. Pentru a apela metoda close() se folosete referina returnat de metoda open() care este un obiect fereastr, astfel: fereastra.close().
305

Dac nu se precizeaz un nume de fereastr care s fie nchis, se va nchide fereastra curent. Urmtorul exemplu arat cum se poate deschide o nou fereastr n colul din stnga sus (left=0, top=0). Fereastra curent conine dou butoane, unul folosit pentru deschiderea unei ferestre, cellalt folosit pentru nchiderea ferestrei deschise: <HTML><HEAD> <TITLE>Metodele open() si close()</TITLE> <SCRIPT language="JavaScript"> function Deschide_fereastra() {fereastra=window.open("http://www.edu.ro/index.php/articles/c108/", "univ","menubar=yes, status=yes, toolbar=yes, resizable=yes, left=0, top=0, height=300, width=300")} function Inchide_fereastra() { fereastra.close()} </SCRIPT> </HEAD> <BODY> <INPUT type="button" name="Deschide" value="Deschide" onclick="Deschide_fereastra()"> <BR> <INPUT type="button" name="Inchide" value="Inchide" onclick="Inchide_fereastra()"> <BODY></HTML>

Figura 20.5. Metodele open() i close()

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>

Figura 20. 6. Deschiderea ferestrelor multiple

20.2.2. Activarea i dezactivarea unei ferestre

De obicei doar o fereastr este activ (are focus), dei sunt site-uri care afieaz mai multe ferestre cu reclame. Cnd o fereastr este activ, este vizibil pe ecran i poate recepiona evenimentele de la mouse i tastatur. Pentru a activa o fereastr se poate face att cu un clic pe fereastra respectiv, ct i cu metoda focus(). O fereastr inactiv se poate afla att pe ecran,
307

ct i pe bara de stare. Pentru a dezactiva o fereastr (pierde focus) se execut clic pe suprafaa altei ferestre sau se folosete metoda blur(), n acest ultim caz fereastra nu mai poate fi pe ecran ci numai pe bara de stare. Urmtorul exemplu deschide o nou fereastr care va insera o pagin web cu informaii despre universitile de stat. n fereastra principal se creeaz trei butoane pentru: deschiderea ferestrei, activarea ei i respectiv dezactivarea ei i se va insera o pagina web cu informaii despre universitile de stat. <HTML><HEAD><TITLE>Metodele focus() si blur()</TITLE> <SCRIPT language="JavaScript"> function Deschide() {fereastra_1=window.open("http://www.edu.ro/index.php/articles/3880",

"Spiru Haret", "resizable=1, height=300, width=300, menubar=yes, status=yes, scrollbars=yes")}

function Activare(){fereastra_1.focus()} function Dezactivare() {fereastra_1.blur()} </SCRIPT></HEAD> <BODY> <A href="http://www.edu.ro/index.php/articles/C487">Universitate stat</A> <INPUT type="button" value="Deschide" onclick="Deschide()"> <INPUT type="button" value="Activ" onclick="Activare()"> <INPUT type="button" value="Dezactiv" onclick="Dezactivare()"> </BODY></HTML>

308

Figura 20. 7. Metodele focus() i blur()

20.2.3. Metoda scrollTo()

Dac se dorete derularea automat a unei pagini web, se poate folosi metoda scrollTo() a obiectului fereastr. Metoda scrollTo() are doi parametri care sunt coordonatele x i y ale colului din stnga sus, de unde se dorete afiarea paginii. Coordonatele x i y se exprim n pixeli. Metoda scrollTo(x,y) poate fi folosit doar dac parametrul scrollbars a ferestrei are valoarea true. n exemplul de mai sus se mai adaug o funcie care s apeleze metoda scrollTo(0,0) i un buton n corpul programului care s apeleze funcia astfel: function Derulare() { fereastra.scrollTo(0,0) } i butonul <INPUT type=button value=Derulat onclick=Derulare() > La apsarea butonului Derulat, pagina web ncrcat n fereastr nou, se va derula automat. Apelul metodei n cazul n care se dorete ca pagina din fereastra curent s se deruleze automat poate fi : self.scrollTo(0,0). Metodele back(), forward(), stop() sunt mai puin folosite, avnd acelai efect ca i butoanele browser-ului cu aceleai nume. Dintre proprietile obiectului window, cea mai util este proprietatea status(), care are ca efect afiarea valorii reinut de ea n bara de stare. De exemplu, adugarea urmtoarei funcii la unul din exemplele de mai sus are ca efect afiarea mesajului n bara de stare: function Mesaj() {status=Testarea proprietii status}

309

20.3. Obiectul DOCUMENT

Obiectul document este i el, ca i obiectul window, un obiect des utilizat n JavaScript. Despre unele metode i proprieti ale obiectului (document.write(), document.images, document.forms etc.) s-a discutat n capitolele precedente. n continuare se prezint proprietile principale ale obiectului document, precum i cele mai importante metode ale sale. Unele proprieti sunt de tip obiect, aa cum proprietatea document a obiectului window este obiectul document. Proprietatea all Proprietatea all este cea mai important proprietate a obiectului document. Este o proprietate de tip obiect, care are, la rndul ei, alte proprieti i metode. Este un obiect vector ale tuturor elementelor care se gsesc ntr-o pagin, aa cum forms, images sunt obiecte vector al tuturor formularelor, respectiv ale tuturor imaginilor dintr-o pagin. Fiecare element al vectorului all este tot un obiect. De exemplu, elemente (obiecte) ale vectorului all sunt: HTML, HEAD, BODY, cte un element pentru fiecare imagine (IMG), paragraf (P) etc. Cele mai importante proprieti ale obiectului vector all sunt: tagName reine tipul, de exemplu IMG, P etc. Dac exist, de exemplu, o imagine ntr-o celul a unui tabel se va afia TABLE, TR, TH sau TD, IMG length indic numrul de elemente ale vectorului all id afieaz id-ul elementelor pentru care atributul id a fost definit Urmtorul exemplu probeaz aceste proprieti ale obiectului all[i]. Se va crea o funcie care va afia att tipul tuturor elementelor unei pagini web, ct i id-ul lor. <HTML> <HEAD> <TITLE>Proprietati all</TITLE> <SCRIPT language="JavaScript"> function Afiseaza() { for (i=0; i<=document.all.lenght; i++) { alert(document.all[i].tagName) if (document.all[i].id != 0) alert (document.all[i].id)}} </SCRIPT></HEAD> <BODY> <SCRIPT language="JavaScript"> Afiseaza() </SCRIPT></BODY></HTML>

310

Figura 20. 8. Proprietatea all

Metodele obiectului all[i] sunt: item(id) returneaz elementul cu id indicat. n exemplul de mai jos se scrie valoarea unui buton, de exemplu Activeaza() <HTML> <HEAD> <SCRIPT language="JavaScript"> function Afiseaza() {alert(document.all.item("button").value)} </SCRIPT></HEAD> <BODY> <INPUT type="button" id="button" value="Activeaza" onclick="Afiseaza()"> </BODY></HTML>

Figura 20.9. Metoda item(id)

tags(tip) returneaz un vector de un tip dat. De exemplu, funcia de mai jos numr elementele de tip paragraf (elementul P) dintr-o pagina i le coloreaz n rou

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>

Figura 20. 10. Metoda tags()

20.3.1. Proprietatea images a obiectului document

Despre aceast proprietate s-a vorbit i n capitolul precedent, la seciunea animaie. Images este un vector care conine toate imaginile dintr-un document. Fiecrei imagini i se asociaz cte un element de tablou n funcie de ordinea imaginilor n pagin. Funcia urmtoare afieaz sursa imaginilor dintr-un document. function imagini() { for (i=0; i<document.images.length; i++)

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

n urmtorul exemplu se creeaz o funcie care, atunci cnd va fi apelat, va colora n galben documentul, textul cu albastru i legturile cu rou. <HTML><HEAD> <SCRIPT language="JavaScript"> function Coloreaza() { document.bgColor="yellow" document.fgColoor="red" document.linkColor="blue"} </SCRIPT></HEAD> <BODY> Un exemplu pentru proprietile de coloare <A href="www.edu.ro">Universiti</A><BR> <A href="www.edu.ro">Universiti de stat</A><BR> <A href="www.edu.ro">Universiti particulare acreditate</A><BR> <INPUT type="button" name="Culoare" value="Coloreaza" onclick="Coloreaza()"> </BODY></HTML>

Dup apsarea butonului Coloreaza, browser-ul afieaz:

Figura 20. 11. Proprieti de culoare

313

Metoda write() a fost prezentat n capitolul 17, avnd nevoie s fie folosit n exemplificri. Amintim c ea este utilizat pentru a scrie n document i se aplic sub forma document.write(text). Dac textul conine tag-uri HTML, sau este un fiier html, browser-ul interpreteaz tag-urile i le afieaz. n exemplul de mai jos scrim citeva tag-uri html astfel: <Script language=JavaScript> document.write(<A href=http://www.edu.ro> Informatii MEC</A>) document.write(<BR>) document.write(<IMG src=flori.jpg> </Script>

Figura 20. 12. Metoda write()

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 #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

Cod RGB

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

#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

320

ANEXA B Caractere n HTML

Caracter " $ ' & < > Nume &quot; &apos; &amp; &lt; &gt; &nbsp; &iexcl; &curren; &cent; &pound; &yen; &brvbar; &sect; &uml; &copy; &ordf; &laquo; &not; &shy; &reg; &trade; &macr; &deg; &plusmn; &sup2; &sup3; &acute; &micro; &para; &middot; &cedil; Cod HEXA &#34; &#036 &#39; &#38; &#60; &#62; &#160; &#161; &#164; &#162; &#163; &#165; &#166; &#167; &#168; &#169; &#170; &#171; &#172; &#173; &#174; &#8482; &#175; &#176; &#177; &#178; &#179; &#180; &#181; &#182; &#183; &#184;
321


322

&sup1; &ordm; &raquo; &frac14; &frac12; &frac34; &iquest; &Agrave; &Aacute; &Acirc; &Atilde; &Auml; &Aring; &AElig; &Ccedil; &Egrave; &Eacute; &Ecirc; &Euml; &Igrave; &Iacute; &Icirc; &Iuml; &ETH; &Ntilde; &Ograve; &Oacute; &Ocirc; &Otilde; &Ouml; &times; &Oslash; &Ugrave; &Uacute; &Ucirc;

&#185; &#186; &#187; &#188; &#189; &#190; &#191; &#192; &#193; &#194; &#195; &#196; &#197; &#198; &#199; &#200; &#201; &#202; &#203; &#204; &#205; &#206; &#207; &#208; &#209; &#210; &#211; &#212; &#213; &#214; &#215; &#216; &#217; &#218; &#219;

&Uuml; &Yacute; &THORN; &szlig; &agrave; &aacute; &acirc; &atilde; &auml; &aring; &aelig; &ccedil; &egrave; &eacute; &ecirc; &euml; &igrave; &iacute; &icirc; &iuml; &eth; &ntilde; &ograve; &oacute; &ocirc; &otilde; &ouml; &oslash; &divide; &ugrave; &uacute; &ucirc; &uuml; &yacute; &thorn;

&#220; &#221; &#222; &#223; &#224; &#225; &#226; &#227; &#228; &#229; &#230; &#231; &#232; &#233; &#234; &#235; &#236; &#237; &#238; &#239; &#240; &#241; &#242; &#243; &#244; &#245; &#246; &#248; &#247; &#249; &#250; &#251; &#252; &#253; &#254;
323

&yuml;

&OElig; &oelig; &Scaron; &scaron;

&Yuml; &circ; &tilde; &ensp; &emsp; &thinsp; &zwj; &lrm; &rlm; &ndash; &mdash; &lsquo; &rsquo; &sbquo; &ldquo; &rdquo; &bdquo; &dagger; &Dagger; &hellip; &permil; &lsaquo; &rsaquo; &euro;

&#255; &#258; &#259; &#338; &#339; &#352; &#353; &#354; &#355; &#376; &#710; &#732; &#8194; &#8195; &#8201; &#8205; &#8206; &#8207; &#8211; &#8212; &#8216; &#8217; &#8218; &#8220; &#8221; &#8222; &#8224; &#8225; &#8230; &#8240; &#8249; &#8250; &#8364;

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 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 Valoare border-width; border-style; border-color border-bottom-width; border-style; border-color border-color border-style thin; medium; thick; length color border-left-width; border-style; border-color border-color border-style thin; medium; thick; length border-right-width; border-style; border-color border-color border-style thin; medium; thick; length none; hidden; dotted; dashed; solid; double groove; ridge; inset; outset border-top-width; border-style; border-color border-color border-style
325

border-top-width border-width

thin; medium; thick; length thin; medium; thick; length

Clasificri
Proprietate clear cursor 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

display

float position visibility

Dimensiuni
Proprietate height line-height max-height max-width min-height min-width width Valoare 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

extra-condensed; condensed; semi-condensed; semi-expanded; expanded; extra-expanded;ultra-expanded normal; italic; oblique normal; small-caps normal; bold; bolder; lighter; 100;200;300;400;500;600;700;800;900

Coninut generat
Proprietate 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

content

counter-increment counter-reset quotes

Liste
Proprietate list-style list-style-image list-style-position 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

list-style-type

marker-offset

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 border-collapse
328

Valoare collapse separate

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

1. Teodoru Gugoiu , HTML, XHTML, CSS i XML, Editura Teora, 2005 2. Tudor Sorin, Vlad Huanu, Crearea i programarea paginilor Web HTML+CSS+JavaScript+Photoshop+PHP, Editura L&S Soft, 2006 3. Jim Keogh, JavaScript fr mistere, Editura Rosetti Educational, 2005 4. Dave Taylor, Crearea paginilor Web cu HTML 4, Editura Teora 1999 5. Marcel Andrei Homorodean, Irina Iosupescu, Internet i pagini Web, Editura Niculescu, 2000 6. Dan Somnea, Iniiere n JavaScript i tehnologii Netscape, Editura Tehnic, 1998 7. Mihaela Brut, Sabin Buruga, Prezentri multimedia pe Web, Editura Polirom, 2004 8. Traian Anghel, Introducere n AJAX, Editura Polirom, 2006 9. Michael B Karbo, Grafic Web, Editura Egmont, 2003

331

Redactor: Cosmin COMARNESCU Tehnoredactare: Marcela OLARU Coperta: Rodica Florentina NICULESCU Cornelia PRODAN Bun de tipar: 25.04.2007; Coli tipar: 20,75 Format: 16/70100 Editura Fundaiei Romnia de Mine Bulevardul Timioara nr.58, Bucureti, Sector 6 Tel./Fax: 021/444.20.91; www.spiruharet.ro e-mail: contact@edituraromaniademaine.ro

332