TEHNOLOGII WEB

TEHNOLOGII WEB

Conf. dr.Livia SANGEORZAN

I. Consideraii generale privind Internet i World Wide Web

La ora actual n lume exist milioane de calculatoare, care sunt folosite n cele mai diverse domenii, multe dintre aceste calculatoare sunt legate ntre ele, interconectate n forma reelelor de calculatoare. Multe dintre aceste reele sunt la rndul lor conectate ntre ele, formnd inter-reele (reele de reele de calculatoare). Denumirea de internet desemneaz o reea de reele ("net" nsemnnd n limba englez "reea"). Cea mai mare intereea public (reea de reele de calculatoare cu acces public) este reeaua Internet.

Principala atracie a Internetului o reprezint World Wide Web-ul. Acesta a constituit partea cu dezvoltarea cea mai rapid i cea mai popular a Internetului (cu excepia, probabil, a fluxului voluminos de e-mail de pe tot globul). Din punct de vedere tehnic Web-ul, nu este dect o parte a Internetului sau mai corect spus, o component, care permite navigarea prin Internet.

Web-ul reprezint o interfa, o fereastr spre Internet sau o metod de a ajunge n locurile dorite. Popularitatea sa deriv din trei aspecte distincte i anume:

Mascheaz limbajul pretenios folosit pentru adresele Internet i pentru comenzile specifice.

Grupeaz mai multe componente diferite ale Internetului ntr-o singur interfa. Permite ca pe lng citirea textului s se vizualizeze imagini, s se asculte sunete i

chiar s se urmreasc filme (n raport de resursele calculatorului - client).

Un pas important n evoluia Web-ului a fost dezvoltarea browsererelor grafice, care puteau fi rulate pe un PC desktop sau pe un Macintosh, permind utilizatorului s foloseasc tehnicile familiare disponibile i n alte programe, ncorpornd formate de text i grafic n ecranul de navigare etc. Primul program de acest tip a fost NCSA Mosaic, dezvoltat de centrul naional pentru aplicaii de supercalculatoare i distribuit gratuit.

Web-ul a permis browserelor s afieze imagini chiar n mijlocul textului, fr a fi nevoie s se cunoasc metoda de decodificare a fiierelor. Specialitii n mass media afirm c o imagine conteaz ct o mie de cuvinte, imaginile din articolele de ziar sau din emisiunile TV fiind incomparabil mai sugestive dect iruri lungi de text scris la main. Deci acest ingredient final a permis ca Web-ul s par att sensibil, ct i interesant pentru persoana care nu ar fi nvat niciodat ce nseamn o expresie obinuit in Unix.

Creatorii de browse Nestcape i Microsoft ncearc fiecare s dezvolte soluii globale care s transforme produsele proprii n "platforme" ale tuturor operaiilor din Internet. La ora actual existz companii care ofer conturi Internet gratuite, avnd o interfa pentru e-mail bazat pe Web. Gratuitatea gzduirii site-urilor este condiionat de meninerea pe ecran a unei ferestre publicitare. Exist i alte modaliti de a intra in lumea Internetului, fr a fi nevoie de un calculator, cum ar fi Web TV (pentru care este nevoie de un televizor, un modem, o tastatur i o telecomand), sau a unui modem, cum ar fi DirectPC (este nevoie de un calculator i de o anten special pentru satelit).

3

Dezvoltarea Internetului, combinat cu apariia reelelor de tip Internet locale, de dimensiuni mai mici, care funcioneaz dup principiile Internetului, a dus la cerine din partea utilizatorului pentru ca partea de software s i ajute s recupereze documentele de la distan, s colaboreze prin intermediul legturilor de reea i s salveze sau s publice documente. Pentru a ndeplini aceste cerine, productorii de software au adugat componentele Internet la programele lor.

O mare parte din elegana Internetului const n cantitatea impresionant de putere de prelucrare i de stocare a programelor de dimensiuni mari i a informaiilor dense, operaii care au loc n Internet i nu n calculatorul propriu. Calculatorul propriu - fie c este un PC, un Mac sau o staie de lucru Unix - rmne doar o ramp de lansare ctre lumea Internetului. Aceast structur comun de faciliti Internet este referit uneori cu expresia client-server. Calculatorul personal (sau programul care ruleaz pe acesta) este clientul, iar sursa de informaii sau site-ul World Wide Web este serverul. Serverele reprezint depozite centralizate de informaii sau de manipulatori specializai pentru anumite tipuri de trafic. Clientul nu trebuie dect s se conecteze la serverul potrivit i astfel foarte multe lucruri interesante vor fi la dispoziia sa, fr a fi nevoie s suprancarce calculatorul propriu. Acesta este unul din principalele motive pentru care nu are importan ce tip de calculator se utilizeaz.

WWW este un sistem distribuit. Informaiile sunt plasate n mii de site-uri. Cnd utilizatorul dorete o informaie, apeleaz site-ul care a publicat-o. Fiecare site i fiecare pagin de informaii au o adres unic numit URL (Uniform Resource Locator URL = identificator uniform al resursei). Aceat informaie publicat ntr-un site poate fi oricnd actualizat de autorul site-ului.WWW devine din ce n ce mai mult un sistem interactiv. Evoluia tehnologiilor Web l transform ntr-un mediu de comunicare. De exemplu, includerea formularelor n paginile Web permite colectarea de informaii de la utilizator.

Termeni care se vehiculeaz n lumea Web-ului sunt: Host Computer legat la Internet care gzduiete unul sau mai multe servere; Server Web Software care administreaz site-uri web; Site Web Colecie structurat de pagini web; Pagin (document) web Coninutul unui fiier, afiat ca urmare a unei cereri a

utilizatorului; Pagin home Pagina de intrare a unui site.

Un host poate gzdui mai multe tipuri de servere (FTP, Gopher, Web). Fiecare tip de server are propriul tip de comunicaie cu Internet-ul. Protocolul de comunicaie al server-elor web se numete HTTP (Hyper Text Transformer Protocol).

Un server web administreaz mai multe site-uri web. Un site conine una sau mai multe pagini ntre care exist legturi. Pagina home este intrarea n site.

Browsere WEB Pentru a accede la web, utilizatorul trebuie s aib instalat pe computerul su un

browser. Browser-ul este o aplicaie cu trei funcii principale: accesul la informaii, formatare i

afiarea informaiilor. Utilizatorul furnizeaz browser-ului adresa paginii dorite (URL-ul). Browser-ul solicit conectarea la server-ul web, pe baza protocolului HTTP. O dat

4

conectarea acceptat, server-ul transmite browser-ului fiierul cerut. Browser-ul formateaz pagina i o afieaz pe monitorul utilizatorului.

Formatarea se face n funcie de: indicaiile de formatare coninute n fiierul primit; caracteristicile platformei cu care lucreaz utilizatorul.

Piaa are o ofert bogat de browsere disponibile pentru diverse platforme. Exist browsere operaionale pe sisteme cu interfa grafic (Macintosh, Windows), dar i pe sisteme cu interfa exclusiv textual. Poziia dominant pe pia este ocupat de Microsoft Internet Explorer (IE) i Netscape Navigator (NN). IE este operaional sub Windows (ncepnd cu 3.1), sub UNIX i pentru calculatoare Apple. Netscape Navigator este component a unui set de instrumente Internet, numit Netscape Communicator al firmei Netscape Communications Corporation. Componenta numit Netscape Composer permite editarea paginilor Web. Netscape Navigator este operaional sub Windows, sub anumite versiuni UNIX i pentru Apple.

Primii pai ctre construcia unui site Dac se dorete realizarea unei pagini www, trebuie s apelm la o firm specializat,

numit provider. Provider-ul dispune de mai multe calculatoare foarte performante, numite server-e i pune la dispoziie:

spaiu pe hard-ul server-ului de cel putin 10 MB; o adres de Internet, de exemplu : www.adresa_student.ro.

n spaiul rezervat se pot pune mai multe fiiere care conin instruciuni HTML dar i orice alte fiiere.

Definiie ( [1]): Prin site se nelege ansamblul: spaiu hard; fiierele pe care le conine; adresa Prin pagin se nelege coninutul afisat al unui fisier HTML.

Definiie ( [1]): Ansamblul regulilor care trebuiesc respectate pentru schimbul informaiilor de un

anumit tip se numete protocol.

Dac dorim s transferm fiiere ctre server sau invers, de la server ctre propriul calculator se utilizeaz protocolul FTP (File Transfer Protocol).

Pentru a realize o pagin atractiv este bine s se utilizeze un design adecvat. n acest scop se pot utiliza limbajele:

JavaScript, PHP Java (Applet)

5

Flash etc.

Trebuie s se aib n vedere faptul c JavaScript ruleaz pe calculatorul vizitatorului, o secven JavaScript este tradus i executat de ctre browser i este trimis acestuia odat cu fiierul HTML.

Limbajul PHP este un limbaj de programare ce ruleaz pe server i este proiectat special pentru WEB.

ntr-o pagin HTML putem ngloba cod PHP care va fi executat la fiecare vizitare a paginii.

Limbajul PHP permite lucrul cu baze de date, n MySql. Mysql este un sistem de gestiune a bazelor de date, foarte rapid i robust. Aplicaiile scrise n PHP i MySql se ruleaz pe server.

Atenie: Nu toi provider-ii pun la dispoziie utilizatorilor posibilitatea utilizrii acestor limbaje, deci o s trebuiasc s studiem oferta.

6

II. Principii de baz n design

Oricine poate s nvee tehnicile crerii unei pagini Web. i oricine poate s creeze o pagin Web urt. Totui, singurul motiv pentru care attea persoane realizeaz pagini web slabe este faptul c nu cunosc principiile de baz ale designului. Noiunile de interfa i navigaresunt importante n realizarea unui design atragator, dar necesit i un pic de gndire i planificare. Conceptele utilizate sunt lucruri foarte simple, care vor schimba rapid i cu uurin banalele pagini Web, n pagini cu aspect mult mai profesionist.

Cele patru principii de baz, care permit ca o pagin Web s arate clar, ordonat i profesionist sunt:

alinierea; proximitatea; repetarea; contrastul.

Acetia sunt factorii de baz ai oricrei lucrri tiprite pe ecran sau altundeva.

Alinierea Alinierea nseamn c elementele de pe pagin sunt aliniate unele n raport cu

celalalte. Lipsa alinierii este principala problem de pe paginile Web, aceasta reprezint o problem important i pe paginile tiprite, ns pare i mai prezent i mai dezastroas pe paginile Web. Nimic nu trebuie asezat la ntmplare pe pagin. Se creeaz un aspect curat, sofisticat i proaspt al paginii dac fiecare element are o legatur vizual cu un alt element de pe pagin.

Alinierea elementelor dup latura stng, dreapt sau centrat trebuie s urmeze o anumit regul, i anume:

Alegei UNA. Se alege o singur aliniere care se utilizeaz pe toat pagina. Dac se opteaz a se alinia textul de baz n stnga, nu se pune titlul pe centru; Dac se aliniaz centrat o parte din text, atunci se aliniaz centrat peste tot. Nu amestecai alinierile. Acest singur principiu va modifica radical aspectul paginilor. Se pot face alinieri verticale orizontale si centrale.

O aliniere central se poate spune c este : echilibrat; simetric; calm; oficial. Aliniind o parte din text la stnga, o parte la dreapta i o parte centrat, se creaz o

senzaie de dezordine i se transmite impresia de amatorism. Dac se aliniaz textul i imaginile, este bine s ndeprtm textul de marginea stng.

Este obositor i distrage atenia s dm cu ochii de marginea stng a paginii browserului de fiecare dat cnd trecem la rndul urmator. Cnd decalm textul (operaie de indentare), se poate face i din partea dreapt, mpiedicnd formarea rndurilor de text lungi i dificil de citit.

7

Text pe butoane neglijent realizat (vezi figura de mai sus) Alinierea orizontal este la fel de important ca i cea vertical. Este important s

vedei butoane ca n exemplul de mai sus, n care literele nu se aliniaz pe orizontal. Aceast deplasare sus/jos/sus/jos face ca toat maneta s arate dezordonat. De aceea, pe lng alinierea vertical trebuie s fim ateni i la alinierea orizontal a butoanelor i legturilor.

Text pe butoane corect realizat (vezi figura de mai sus) Literele stau pe o linie invizibil numit linie de baz. Maneta de legturi este mai

ordonat i mai organizat dac aliniem tot textul pe aceeai linie de baz. n majoritatea software-urilor de creaie pentru Web exist un buton pentru alinierea dup linia de baz, de obicei n specificaiile pentru tabele.

Formular incorect realizat din punct de vederea al web design-ului (vezi formularul de mai sus)

Formularul acesta ncepe excelent; exist cteva alinieri foarte bune, bine definite, dar i locuri n care textul pare s fi fost trntit aleatoriu pe pagin.

Aliniere vertical n partea lateral a formularului las de dorit. Consolidm aspectul paginii, aliniind celalalte elemente dup aceast linie.

8

Totul trebuie s aib un motiv pentru a-i justifica locaia deoarece, nimic nu trebuie plasat arbitrar pe pagin. Nu azvrlim pur i simplu elementele i vedem cum i unde se lipesc. Trebuie s putem explica motivul pentru care un element se afl n acel loc.

O pagin, poate s fie instantaneu folosit, prin alinierea tuturor elementelor dup o latur i pagina arat mult mai organizat. Dac lucrurile sunt organizate, ele comunic mult mai bine.

Alinierea nu nseamn c totul este aliniat dup aceeai latur. nseamn pur i simplu c totul are aceeai aliniere fie lipit la stnga, fie lipit la dreapta, fie centrat. Cnd o margine bun se repet, ea ctig n for.

Formular corect realizat din punct de vederea al web design-ului (vezi formularul de mai sus) Mai sus am dat un mod de aliniere optim, pentru formularul creat anterior. Se observ linia vertical dup care se aliniaz csuele text, checkbox sau cea de submit. Formularul arat mult mai bine.

Proximitatea Proximitatea se refer la relaiile dintre elemente, cnd acestea sunt foarte aproape. Pe

o pagin, componentele aflate n legatur cu altele trebuie s fie grupate. Dac anumite componente se afl n apropierea altora, ele devin o singur unitate din punct de vedere vizual, astfel informatiile pot fi organizate mai bine i permite astfel s dispar orice confuzie.

Se pare c exist o fric fa de spatiul liber. Pagina pare neorganizat dac elementele de machetare sunt mprtiate peste tot, fiind posibil ca informia s devin mai greu accesibil.

Principiul proximitii spune c trebuie s se grupeze componentele aflate n legatur, sa fie mutate mai aproape unele de altele, astfel nct s fie percepute ca un grup unitar, nu ca

9

o grmad de elemente fr legtur. Componentele i grupurile de informaii care nu au legtur unele cu altele nu trebuie s se afle n proximitate (vecintate).

Dorim s realizm o carte de vizit care cuprinde 5 elemente (componente) separate (vezi figura de mai jos). n acest caz ochiul se oprete de cinci ori. Ochiul ncepe s citeasc n mijloc, deoarece textul este bold.

Dac complicm problema, adic mai ngrom alte elemente vom vedea c ne vom plimba privirea ntre cuvintele ngroate.

Proximitatea sau apropierea nseamn o relaie. O problem a crii de vizit anterioare este faptul c nici una dintre componente nu

pare a fi n legatur cu alta. Dar dac fac o rearanjare a componentelor de pe cartea de vizit aceasta arat cu totul altfel, iar componentele care au o legatur ntre ele sunt grupate. Aceste componente sunt mai aproape unele de altele (vezi figura de mai jos).

DIRECTOR S.C. PISOI (0268) 956419

VICTOR GABRIEL MOTANEL

Str. Leului nr.123 Brasov

DIRECTOR S.C. PISOI (0268) 956419

VICTOR GABRIEL MOTANEL

Str. Leului nr.123 Brasov

10

Uneori, atunci cnd se grupeaz componentele foarte apropiate, este nevoie s se modifice cte ceva, de exemplu, mrimea, ponderea sau aezarea textului ori a desenelor.

Componente aflate n apropiere unele de altele devin o unitate vizual, nu trebuie organizate ca uniti separate. Deci componentele cu legatur ntre ele trebuie grupate mpreuna.

Principiul proximittii are ca scop de baz organizarea paginii. Dac pe pagin exist mai mult de trei pn la cinci componente, trebuie vzut care

dintre elementele separate pot fi grupate, mai apropiat, pentru a deveni o unitate vizual. Proximitate nu nseamn c totul este apropiat, ci c elementele care sunt legate din

punct de vedere al semnificaiei lor, ntre care exist un fel de relaie privitoare la ceea ce comunic, trebuie s fie conectate i vizual.

Informaia dintr-o pagin trebuie mai nti grupat din punct de vedere al semnificaiei, apoi aezat din punct de vedere fizic pe pagin. Informaia secundar trebuie s fie mai distanat, astfel ct s se vad c este vorba despre o completare a informaiei principale.

Repetiia Principiul repeitiei spune c anumite pri ale machetrii trebuie repetate n ntreaga

lucrare. Se poate repeta de exemplu un font ngroat, o linie groas, un anumit tip de marcaj, un element de design etc. Poate fi orice element care poate fi recunoscut de ctre vizitator.

Relum cartea de vizit i organizm informaia altfel (vezi figura de mai jos). Observm c dup ce am privit informaia de pe aceast carte de vizit, ochii ramn

agai de nume, deorece este ngroat i subliniat. Dar totui avem senzaia de neterminare. Urmtoarea figur prezint aceeai carte de

vizit dar n care am ngroat i ultima informaie, astfel ochiul se uit la nume i la numrul de telefon.

VICTOR GABRIEL MOTANEL DIRECTOR S.C. PISOI

Str. Leului nr.123 Brasov

(0268) 956419

11

Contrastul Contrastul este cea mai eficient cale de a aduga valoare vizual paginii noastre. Principiul contrastului spune c dac dou componente nu sunt exact la fel, atunci

trebuie s fie complet diferite. Regula de aur n utilizarea contrastului spune c pentru a fi eficient, contrastul

trebuie s fie puternic. Contrastul poate fi creat n mai multe moduri, de exemplu punem n contrast:

un font mare cu unul mic; un font elegant cu unul ngroat; o culoare rece cu una cald; un element orizontal (ex. un rnd lung de text) cu unul vertical (ex. o coloan

de text nalt i ngust); rnduri cu spaii multe ntre ele cu rnduri dese;

VICTOR GABRIEL MOTANEL

DIRECTOR S.C. PISOI

Str. Leului nr.123 Brasov

(0268) 956.41.93

VICTOR GABRIEL MOTANEL

DIRECTOR S.C. PISOI

Str. Leului nr.123 Brasov

( 0268 ) 956.41.93

12

un desen mare cu unul mic.

Atenie! Nu putem pune n contrast maro nchis cu negru sau un font de 14 puncte cu unul de 16 puncte.

Fie un Anun pentru obinerea unei burse Socrates n cadru Facultii de Matematic i Informatic. Sunt prezentate dou variante. Se observ c ambele variante conin aceleai informaii doar c al doilea anun conine mai mult contrast i ne uitm cu mult mai mult plcere la cel de al doilea anun.

Contrastul n formularul modificat este evident. Am folosit un font mai puternic, am ngroat titlurile. Fontul folosit l-am repetat i n titlul paginii. Titlul l-am transformat din majuscule n litere mici i astfel am avut posibilitatea s

folosesc o dimensiune mai mare a fontului, pe care l-am ngroat. Totodat am scris titlul cu alb pe fond negru (banda neagr). Astfel am mrit

contrastul. Contrastul nu numai c face pagina mai atractiv, ci i clarific scopul i organizarea documentului.

BURSE SOCRATES 2007 !

Conditii de aplicare Integralist Depunere dosar care sa cuprinda : CV, Scrisoare de intentie, situatia scolara Participare la testul de limba straina

Termen limita de depunere dosar la Decanatul Facultatii MI: 14.04.2007

Universitati partenere: University Oldenburg University Dortmund University of Applied Sciences Fulda, University of Applied Sciences Wiesbaden, University of Applied Sciences Mittweida

13

Burse Socrates 2007 !

Conditii de aplicare Integralist Depunere dosar care sa cuprinda :

o CV, o Scrisoare de intentie, o situatia scolara

Participare la testul de limba straina

Termen limita de depunere dosar

Decanatul Facultatii MI; 14.04.2007

Universitati partenere: University Oldenburg University Dortmund University of Applied Sciences Fulda University of Applied Sciences Wiesbaden, University of Applied Sciences Mittweida

14

III. HTML (Hyper Text Markup Language)

O versiune mai veche a HTML-ului folosea unele idei i modificri propuse pentru HTML 3, care au fost abandonate la apariia HTML 3.2.

HTML 4 propune separarea stilurilor fizice de marcarea coninutului printr-o folosire mai intens a foilor de stil. Elementul frame este acum definit oficial altundeva dect n produsele firmelor Nestcape sau Microsoft. Include elementele style, div, span pentru ncorporarea foilor de stil.

Eticheta object este de asemenea extins, astfel s includ practic orice fiier extern care se dorete introdus ntr-o pagin Web. Sunt introduse etichetele ins i del, acronym, colgroup, fieldset, button.

HTML e un limbaj bazat pe SGML (Standard Generalized Murkup Language = Limbaj Standard Generalizat de Marcare) care este un standard internaional ce a fost aprobat n 1986 i care permite crearea de documente hipertext pentru paginile Web. Principalele caracteristici ale limbajului SGML sunt:

1. Descrierea structurii documentului; 2. Nu este descris aranjarea n pagin; 3. Permite fiecrui navigator s aib propria prezentare; 4. Un document HTML poate fi reutilizabil.

Standardul oficial HTML este dat de World Wide Web Consortium (W3C) care este afiliat la Internet Engineering Task Force (IETF). W3C a enunat cteva versiuni ale specificaiei HTML, printre care i HTML 2.0, HTML 3.0, HTML 3.2, HTML 4.0, HTML 4.01 i, cel mai recent, HTML 5.0. Fiecare din aceste standarde este mai mult sau mai puin suportat de ctre toate sau o parte din browsere.

La ora actual HTML 4.0 si HTML 4.01 sunt larg utilizate i au fost deja publicate specificaiile HTML 5.0. Obiectivul HTML5 este acela de a mbogi suportul pentru aplicaiile multimedia prin aducerea laolalta a capabilitilor oferite de HTML4, cu XHTML i JavaScript.

Limbajul HTML ofer proiectanilor de pagini Web urmtoarele posibiliti: 1. S publice documente cu headere, texte, tabele, liste, fotografii, etc; 2. S regseasc on-line informaiile prin intermediul hiperlink-urilor printr-un

simplu click de mouse; 3. S proiecteze formulare pentru realizarea tranzaciilor cu servere aflate la

distan pentru cutri de informaii sau pentru activiti specifice comerului; 4. S includa foi de calcul tabelar, clipuri video, sunete i alte aplicaii direct n

documente.

Elementul esenial diferit adus de versiunea 4.0 i mai ales 4.01 fa de versiunea 3.2 este posibilitatea separrii structurii unui document de prezentarea lui prin introducerea stilurilor de documente (style sheet).

15

Prin utilizarea limbajului HTML4 pentru structurarea unui document i a style sheet-urilor pentru a stiliza prezentarea acestuia, se poate obine mult mai uor independena de periferic/computer/platforma hard-soft.

Deoarece HTML5 aduce elemente noi care permit includerea obiectelor multimedia sau a graficelor, fr a mai avea nevoie de plugin-uri, se vor putea crea aplicatii mult mai complexe utilizndu-se doar limbajul HTML.

Limbajul HTML a fost preferat pentru publicaii pe Web n primul rnd datorit simplitii sale i n al doilea rnd deoarece permite formatarea textului ASCII cu tag-uri n format ASCII.

Crearea unui document HTML HTML = Hyper Text Markup Language este limbajul de baz al WWW i const dintr-

un set standard de coduri care specific n ce mod documentele vor fi afiate pe ecran de ctre navigatoare.

Caracteristica important a limbajului este portabilitatea adic orice document surs HTML va arta identic pe orice tip de calculator i n orice sistem de operare, sarcina interpretrii sale revenind diverselor navigatoare.

Orice document HTML ncepe cu marcajul (tag-ul) i se termin cu marcajul (tag-ul).

Un marcaj poate avea unul sau mai multe atribute care se specific prin perechi de forma: nume="valoare". Se recomand ca valorile atributelor s fie plasate ntre ghilimele (" ").

Marcajele dintre aceste paranteze unghiulare transmit comenzi ctre browser pentru a afia pagina ntr-un anumit mod.

ntre cele doua marcaje i apar dou seciuni;

1. Seciunea de antet delimitat de marcajele TEXT ;

2. Corpul documentului care este delimitat de marcajele CORPUL TEXTULUI .

Un marcaj poate fi scris att cu litere mici, ct i cu litere mari. Deci limbajul HTML nu este CASE sensitive.

Comentariile din cadrul documentelor HTML se realizeaz utiliznd tag-ul urmtor :

.

Orice ir de caractere ncadrat de aceste elemente va fi ignorat de programele de navigare Web.

16

Structura de baz a unui document HTML este:

Informaia Corpul fiierului

Un fiier HTML este creat cu orice editor de texte cu meniunea c fiierul trebuie salvat cu extensia html sau htm.

TAG-uri HTML n limbajul de marcare a hipertextului totul se rezum la structur. Un limbaj de

marcare este folosit pentru a descrie care este rolul fiecrei pri din document n raport cu celelalte.

Terminologia HTML: a) atribut: furnizeaz instruciuni adiionale despre o etichet. Informaiile

variaz de la etichet la etichet i pot include subiecte cum ar fi locaia fiierelor, mrimea, numele lor sau stiloul lor;

b) browser: este un motor de parcurgere special care evalueaz etichetele i coninutul unui fiier HTML, pe care l afieaz n concordan cu posibilitile i regulile platformei i capacitile sale;

c) element: o component distinctiv a structurii unui document, cum ar fi titlul, un paragraf sau o list. Cnd ne referim la forma sa aplicat n cadrul unui document, un element se mai numete etichet (tag);

d) etichet: un cod care identific un element pentru ca browserul sau alt program de parcurgere s tie n ce mod s afieze coninutul. Etichetele sunt ncadrate de caractere de delimitare (paranteze ascuite) Ele sunt ntotdeauna cuprinse ntre paranteze unghiulare () iar utilizarea literelor mici sau mari n scriere nu are importan.

Documentele HTML sunt fiiere text (ASCII). n text sunt inserate o serie de coduri aa numitele tag-uri sau marcaje care stau la baza modurilor de afiare a documentului. Un document HTML este compus din tag-uri i text curat. Documentele au componente asemntoare cum ar fi titluri, tabele, liste, paragrafe, etc.

Tag-urile HTML sunt folosite tocmai pentru a marca elementele comune, care pot conine text, grafic sau alte elemente. Tag-urile sunt de forma pereche nceput-sfrit:

17

Scrierea perechilor de legturi:

CORECT INCORECT

Tag-uri din cadrul documentului HTML Fiecare document HTML, nc de la creare are dou pri principale: un antet i un

corp. Chiar dac nu sunt special delimitate, HTML presupune existena lor. HTML ofer de asemenea ansa de a aduga i alte componente funcionale paginii, sub forma foilor de stil, scripturilor i seturilor de cadre.

Dei fac parte din definirea unui document HTML, dou etichete exist n afara structurii documentului: doctype i html. Prima identific versiunea de HTML folosit pentru pagina respectiv i regulile pe care acestea le respect. A doua etichet identific un limbaj global i direcia textului pentru documentul respectiv, n plus marcheaz nceputul i sfritul coninutului HTML.

Documentul HTML se indic prin tag-ul HTML ......................... Vom prezenta numai o parte din tag-urile HTML, care sunt importante n realizarea

unui design atragator.

Culori, fonturi, margini O pagin Web poate fi setat prin:

- alegerea culorii de fond - alegerea culorii textului i - alegerea dimensiunilor paginii

CORECT

.............................

coninut arbitrar tagul de sfrit care are caracterul slash (/ )

tagul de nceput

18

sect1. Stabilirea culorii n taguri Culoarea se obine din amestecul a celor trei culori fundamentale: rou, verde i

albastru. Culoarea de fond a unei pagini se specific astfel : nume de culoare. Astfel sunt disponibile cel puin 16 nume de culori, astfel avem

urmatoarele nume: red, green, blue, aqua, black, fuchsia, gray, lime, maroon, navy, olive, purple, silver, teal, white i yellow.

secventa hexazecimala #rrggbb unde r,g sau b sunt cifre hexazecimale i pot lua valorile din multime {0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f, F};astfel se pot defini 65536 de culori.

functia rgb(r,g,b), unde r,g si b iau valori din multimea numerelor naturale {0,1,2255}

Tagul Body Tagul body are o list de atribute incluse dup denumirea tagului i delimitate prin

spaiu. Proprietile principale ale acestui tag sunt cele care definesc fundalul paginii, fie c este vorba de o culoare sau de o imagine.

Atribute ale acestui marcator: bgcolor, background, text, leftmargin, topmargin Aceste atribute se vor evidenia n exemplele urmatoare.

Culoare pentru fundalul paginii Culoarea unei pagini se precizeaz prin intermediul atributul bgcolor.

Sintaxa:

Semantica: culoare se stabilete dup modelul precizat n sect1. Exemplu de pagin Web cu fundalul de culoare cyan:

19

Culoarea textului Definirea culorii textului pentru o pagin Web se face prin intermediul atributului text

al etichetei

Sintaxa:

Semantica: culoare se precizeaz la fel ca la exemplul precedent. Pagina de Web urmtoare are textul de culoare roie:

Atribute multiple O etichet poate s aib mai multe atribute.

O etichet cu trei atribute are urmatoarea sintax:

Sintaxa:

Exemplu: Pagin Web cu textul de culoare albastr i fondul de culoare galben:

20

Marginile paginii Web Se face cu ajutorul a dou atribute ale etichetei :

leftmargin distana dintre marginea din stnga a ferestrei browserului i marginea din stnga a coninutului paginii

topmargin distana dintre marginea de sus a ferestrei browserului i marginea de sus a coninutului paginii

Valorile care se pot atribuii celor doua atribute sunt : numere ntregi pozitive, care indic distana dintre coninutul ferestrei i

fereastra browserului, distan msurat n pixeli un procent, ce reprezinta procent din limea, respectiv nlimea

ferestrei browserului

Tagul basefont (textul de baz) Atributele textului de baz dintr-o pagin Web sunt:

Mrime (size) Culoare (color) Font (style)

Sintaxa:

Semantica: numr poate lua una dintre valorile din mulimea {1, 2, 3, 4, 5, 6, 7 }

21

(valoarea 1 fiind pentru fontul cel mai mic i valoarea 7 pentru fontul cel mai mare)

culoare se precizeaz prin nume sau prin RGB font poate fi un font generic din multimea {serif, sans serif, cursive,

monospace, fantasy, Times New Roman, Helvetica, Arial } Eticheta (Tag-ul) basefont este valabil pn la sfritul paginii sau pn apare

urmtoarea etichet .

n cazul n care eticheta lipsete, textul din pagina Web are atributele prestabilite i anume:

size=3, color=black style=Times New Roman

Stilurile blocurilor de text

Stiluri fizice Se pot alege diferite stiluri pentru caracterele din textul unei pagini Web.

Caractere: ngroate (tag-ul b), cursive (tag-ul i) Un bloc de text apare ngroat n pagin dac este inclus ntre text . Un bloc de text inclus ntre etichetele text este scris cu caractere cursive.

22

Aceste tag-uri sunt valabile, dar sunt mai vechi. Variantele mai noi pentru scrierea textului ngroat sunt realizate cu ajutorul etichetei , iar pentru scrierea textului nclinat se folosete eticheta .

23

Caractere: mrite (tag-ul big), micorate( tag-ul small), Un text inclus ntre etichetele text este scris cu caractere mai mari cu o

unitate dect dimensiunea curent.

Un text inclus ntre etichetele text este scris cu caractere mai mici cu o unitate dect dimensiunea curent.

24

Caractere:indice superior i indice inferior Fragmentele de text aliniate ca indice inferior (sub-script) sunt delimitate de etichetele

i . Secvenele de text aliniate ca indice superior (super-script) sunt incluse ntre etichetele

i .

25

Caractere: subliniate i secionate Eticheta de tip bloc text insereaz un bloc de caractere subliniate. Etichetele i sau i insereaz un bloc de caractere

secionate la mijloc cu o linie orizontal.

26

Stiluri logice Stilurile logice sunt bazate pe cele fizice. Modul lor de aciune depinde n mare msur

de de browserul utilizat.

Blocuri de caractere evideniate Urmtoarele dou etichete pun n eviden prin stilul cursiv fragmente de text: text (cite = citat) text (emphasize = a evidenia)

Aceste dou etichete sunt echivalente cu eticheta .

Blocuri de caractere monospaiate Etichetele urmtoare permit scrierea fragmentelor de text cu caractere monospaiate de

diferite tipuri

text (code = cod sau surs) text (keyboard = tastatur) text (teletype = teleprinter) text (variable = variabile) text (citation = citare) text (definition = definirea unor termeni)

27

Tagul font (configurarea font-urilor) Un font are urmtoarele atribute:

culoarea - se stabilete cu atributul color tipul sau stilul - se stabilete cu atributul face mrimea - se stabilete cu atributul size mrimea n puncte tipografice (este stabilit prin atributul point-size) grosimea - se definete cu atributul font-weight

Culoarea fontului Pentru a scrie un text cu o anumita culoare se ncadreaz acest text ntre delimitatorii text n felul urmtor:

Sintaxa: text de culoarea specificat

Semantica: culoare va reprezenta culoarea fontului

28

Familia fontului Tipul de font se stabilete prin atributul face al etichetei . Fonturile pot fi separate prin virgul.

Cele cinci familii generice de fonturi sunt: serif sans serif cursive monospace fanatasy

Pot fi utilizate i alte fonturi specifice cum ar fi: Times (tip particular de font serif) Helvetica (tip particular de font sans serif)

29

Arial Courier (tip particular de font monospace) Western (tip particular de font fantasy) , etc.

Exemplu: .

Browserul va utiliza primul font pe care l recunoate.

Mrimea fontului Marimea fontului se indic cu atributul size al etichetei . Acest atribut poate lua urmtoarele valori:

1, 2, 3, 4, 5, 6, 7 (1= cel mai mic font, 7= cel mai mare font); -1, -2, -3, etc. pentru a micora dimensiunea fontului cu -1, -2 fa de

dimensiunea curent; +1, +2, +3, etc. pentru a mri dimensiunea fontului cu +1,+2,.. fa de

dimensiunea curent;

O alt metod de stabilire a mrimii unui font este prin utilizarea atributului point-size al etichetei i reprezint mrimea fontului n puncte tipografice. Acest atribut poate lua ca si valori orice numar natural pozitiv.

Observaie: Atributul point size funcioneaz numai cu Netscape Comunicator.

30

Grosimea unui font Grosimea poate fi definit cu cu atributul font-weight al etichetei .

Valorile pe care le poate lua atributul font-weight sunt: 100, 200, 300, 400, 500, 600, 700, 800 i 900 (100 fontul cel mai subire, 900 fontul cel mai gros)

31

Blocuri de texte a) Inserarea unei adrese

Inserarea unei adrese se face cu ajutorul etichetei . Textul este afiat cu caractere cursive.

b) Indentarea unui bloc de text Un bloc de text indentat este un bloc de text la care marginea din stnga a textului este

deplasat la o anumit distan de marginea paginii.

32

Blocuri Delimitarea i formatarea unui bloc de text se face cu delimitatorii text. Blocul are urmatoarele atribute :

align (aliniere). Valorile atributului align sunt:

left aliniere la stnga center aliniere central right aliniere la dreapta

Blocul text are posibilitatea s includ i alte subblocuri. Atributul align are efect asupra tuturor subblocurilor incluse n blocul .

Atributul nowrap permite ntreruperea rndurilor acolo unde este precizat acest lucru.

33

Blocul preformatat Etichetele permit pstrarea caracteristicilor textului aa cum a fost

introdus n fiier, deci ia n considerare caracterele spaiu, tab i CR/LF (enter la sfrit de linie).

Blocul ... poate fi folosit pentru a insera rnduri vide. Caracterul spaiu, pentru a putea fi luat n considerare trebuie precizat prin .

Blocuri paragraf (tag-ul ) Trecerea la o linie nou se face cu eticheta , (br de la break=pauz). La fel i

eticheta face trecerea la o linie nou. Eticheta mai permite:

inserarea unui spaiu suplimentar inainte de blocul paragraf. inserarea unui spaiu suplimentar dup blocul paragraph;. alinierea textului cu ajutorul atributului align, cu valorile left, center sau

right

34

Blocuri de titlu Titlurile (headers) de capitole sau paragrafe pot avea diferite dimensiuni. Ele pot fi

introduse cu tag-ul text unde x poate lua valori din multimea {1,2,3,4,5,6}

Exemplu: (bloc de text)

Se accept atributul align de ctre aceste etichete pentru alinierea titlului blocului de text la stnga (modul prestabilit), n centru i la dreapta.

Tag-ul scrie titlul cu caracterele cele mai mari i cele mai ngroate. Tag-ul folosete caracterele cele mai mici.

35

Linii orizontale Se pot insera linii orizontale ntr-o pagin web cu ajutorul etichetei .

36

Configurarea unei linii orizontale Atributele etichetei sunt:

align - permite alinierea. Valori posibile: left, center, right. width - permite alegerea lungimii liniei. Valori posibile:

o numere ntregi pozitive care reprezint lungimea liniei, n pixeli; o numere ntre 1 i 100 urmate de semnul %; reprezint procentul din

limea paginii pe care se ntinde linia; size permite alegerea grosimii liniei. Valorile posibile sunt numere ntregi

pozitive reprezentnd grosimea liniei n pixeli (valoarea prestabilit este 2); noshade definete o linie fr umbr; color permite definirea culorii liniei

Tagul (tabele) Un tabel se insereaz ntre etichetele i . Pentru inserarea unui rnd ntr-un tabel se folosesc etichetele i (tr = table

row) Coloanele sunt introduse pe rnd pe cte o linie cu tag-ul i ( td = table

data). Chenarul unui tabel se introduce cu atributul border din tag-ul table. n mod implicit un

tabel nu are chenar. Titlul unui table se introduce cu tag-ul text . Atribute importante ale tag-ului :

pentru a alinia un tabel se foloseste atributul align cu valorile posibile: left (valoarea prestabilit), center i right.

37

pentru a adauga chenar unui tabel se utilizeaz atributul border care ia ca valoare orice numr ntreg (inclusiv zero) i reprezint grosimea n pixeli a chenarului tabelului.

Observaii: Valoarea prestabilit a grosimii chenarului tabelului este de 1 pixel. Dac valoarea grosimii chenarului este egal cu 0, atunci nu avem chenar.

Cteva exemple de creare a unor tabele: Un tabel fr chenar

38

Un tabel cu chenar

39

Alinierea tabelului n pagina Web

40

Precizarea culorilor de fond pentru un tabel Culoarea de fond se stabilete cu atributul bgcolor. Culoarea de fond poate fi ataat ntregului tabel prin eticheta . Culoarea de fond poate fi ataat unei linii de tabel prin eticheta . Culoarea de fond poate fi ataat unei celule de tabel prin eticheta .

Atenie: Dac avem definite mai multe atribute bgcolor, se vor lua n considerare n ordinea :

, , . Tag-ul are prioritatea cea mai mic.

Culoarea textului din fiecare celul se indic n tag-ul text

41

Dimensionarea celulelor unui tabel Distana dintre dou celule vecine se definete cu ajutorul atributului cellspacing al

etichetei table. Valorile lui cellspacing pot fi numere ntregi pozitive, inclusiv 0. Valoarea prestabilit este 2.

Distana dintre marginea unei celule i coninutul ei se definiete cu atributul cellpadding al etichetei . Valorile lui cellpadding pot fi numere ntregi pozitive. Valoarea prestabilit este 1.

Codul HTML care descrie tabelele de mai sus poate fi vzut n imaginea de pe pagina urmtoare.

42

Dimensionarea unui tabel Dimensiunile unui tabel limea i nlimea se stabilesc cu atributele width i

height ale etichetei . Aceste atribute pot lua valorile: numere ntregi pozitive, reprezint limea, respectiv nlimea n pixeli a tabelului. numere ntregi ntre 1 i 100, urmate de semnul %, reprezint o fraciune din limea,

respectiv nlimea, total a paginii.

43

Tagul (imagini) Formatele acceptate de browsere pentru fiierele de imagini sunt:

GIF (Graphics Interchange Format) extensia .gif JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg BMP (BitMap) cu extensia .bmp (este ntlnit numai cu browserul Internet

Explorer, etc. Inserarea ntr-o pagin Web a unei imagine se face utiliznd eticheta cu

atributul src, iar valoarea acestui atribut este adresa URL a imaginii. Dac se dorete adugarea unui chenar n jurul imaginii se folosete atributul border al

etichetei care poate lua valori numere ntregi pozitive. Dimensiunile unei imagini pot fi modificate prin intermediul atributelor width i

height ale etichetei . Acestea pot avea ca i valori : numere ntregi pozitive ce reprezint numrul de pixeli numere de la 1 la 100 urmate de % ce reprezint procente din limea, respectiv din

nlimea blocului n care se afl imaginea. Precizarea dimensiunilor spaiului ocupat de o imagine duce la creterea vitezei de

ncrcare a paginii.

44

Alinierea unei imagini n pagina Web Alinierea se face prin intermediul atributului align al etichetei , care ia

valorile: left aliniere la stnga right aliniere la dreapta top aliniere deasupra. Partea de sus a imaginii se aliniaz cu partea de sus a

textului ce precede imaginea. middle aliniere la mijloc bottom sau baseline aliniere la baz

45

Alinierea textului n jurul unei imagini Se face cu atributele hspace i vspace ale etichetei care precizeaz distana

n pixeli pe orizontal i pe vertical, dintre imagine si elementele din pagin.

Imaginea pentru fondul unei pagini Web Se poate folosi imaginea pentru a stabili fondul unei pagini Web cu ajutorul atributului

background al etichetei care ia ca valoare adresa URL a imaginii.

46

47

Imagini ca legturi Imaginea trebuie s apar ca element de legatur n cadrul tagulul imagine

Legaturi (link-uri) Cu ajutorul legturilor, un text obinuit se transform n hipertext sau hipermedia. Legturile sunt zone active ntr-o pagin Web. Paginile Web sunt interactive deoarece au un rspuns la aciunile care sunt iniiate de

cei care le utilizeaz. Legturile n pagina html se insereaz cu ajutorul etichetei speciale i a atributului

href care ia ca valoare adresa URL a resursei solicitate. Cnd mouse-ul este deasupra unei zone active, el ia forma unei mini. Calculatorul

client expediaz cererea , primete resursa pe care a solicitat-o pe care o va ncrca n browser.

n acelai browser, pagina nou va fi nlocuit de cea veche.

Alegerea ntre dou pagini

48

Link ctre un site

Ancor aflat n acelai document Acest lucru se realizeaz utiliznd perechea de tag-uri: Sintaxa: SALT .....

AICI am facut SALT

Semantica: etic reprezint numele tag-ului ctre care se face saltul

49

Exemplu:

50

Ancor aflat n alt document

O pagin nou ntr-o fereastr nou

Stabilirea culorilor pentru legturi Se utilizeaz trei culori pentru legturi:

o culoare pentru legturile nevizitate o culoare pentru legturile vizitate o culoare pentru legturile active

51

Acestea se stabilesc cu atributele: link pentru legaturile nevizitate vlink pentru legaturile vizitate alink pentru legaturile active

Formulare

Despre formulare Formularele HTML sunt cele mai frecvent utilizate pentru a colecta informaii de la

persoane care viziteaz site-ul. Un formular este un ansamblu de zone active alctuite din butoane de apsat, casete de selecie, cmpuri de editare i altele.

O sesiune de lucru cu cu o pagin Web ce conine un formular cuprinde urmtoarele etape:

1. Se completeaz formularul care se transmite unui server; 2. O aplicaie dedicat de pe server analizeaz formularul completat i eventual

se stocheaz datele ntr-o baz de date. 3. Eventual serverul expediaz un rspuns utilizatorului.

52

Tag-ul Un formular este delimitat de tag-ul ....descriere formular.... ntre tag-ul de intrare i cel de ieire sunt inserate, n principal controalele formularului.

Principalele atribute ale tag-ului form sunt: action method enctype target

Form-ul are 2 atribute importante: action i method.

Sintaxa:

Semantica: valoare_a poate lua ca i valoare:

adresa URL a unui script aflat pe server, care primete datele formularului; se face o prelucrare a datelor i se expediaz un rspuns utilizatorului dac e cazul

adresa de email, caz n care datele formularului sunt transmise prin pota electronic

valoare_m poate lua 2 valori: get este valoare implicit (datele din formular se adauga la adresa URL

specifcata in action); post (datele sunt expediate separat; se folosete cnd sunt transmise cantiti

mari de date ).

Exemple: action = www/ Script action = mailto: livia.sangeorzan@yahoo.com

Tag-ul Pentru a crea diferite butoane sau casete se folosete tag-ul

Sintaxa:

Semantica: type poate lua valorile urmtoare

text radio (atributul checked selecteaz butonul la prima activare a paginii); checkbox; submit trimite reset terge (reseteaz);

53

password parola (cnd scriem se vad asterixuri, dar la server (destinatar) se vede totusi parola decodificata).

name este numele ataat casetei sau butonului. Nu reprezint coninutul butonului sau casetei.

value este coninutul ce apare scris pe buton sau coninutul casetei sau n cazul butoanelor radio numele butoanelor care fac parte din aceeai familie;

Alte atribute ale tag-ului input: size - specific limea cmpului de editare; maxlenght - specific maximul de caractere.

Dac ntr-un input lipsete atributul type, rezult implicit type = text. Limbajul JavaScript va recunoate butoanele dup atributul name. Liste de selecie . O list de selecie permite alegerea unuia sau mai multor elemente dintr-o list finit. Are 2 atribute importante : name i size. Elementele dintr-o list se introduc cu tag-ul .

Sintaxa:

Element_1 Element_2 Element_3

.

Semantica: name numele listei de selecie

size este un numr ntreg pozitiv i precizeaz cte elemente din list sunt vizibile la un moment dat

este tag-ul care include elementele listei. Server-ul primete perechea alctuit din coninutul din value i valoarea de dup tagul option

selected permite selectarea prestabilit a unui element al listei

Exemplul urmtor ilustreaz un formular care conine o list de selecie i dou butoane.

Codul HTML aferent acestui exemplu se poate vizualiza n imaginea de mai jos.

54

Lista de selecie cu selecii multiple Are aceeai sintax ca i lista de selecie descris mai sus, dar n plus are atributul

multiple n tag-ul select.

55

Cmpuri de editare multiple Acest lucru se realizeaz cu tag-ul

Sintaxa: text

Semantica: Din lista de atribute enumerm: cols (nr de caractere afiate ntr-o linie), rows (nr de linii afiate simultan), name (permite ataarea unui nume), wrap care determin comportamentul cmpului de editare fa de sfritul de linie.

Atributul poate lua valorile: off, hard, soft.

ntre tag-ul de intrare i cel de ieire ale formularului sunt inserate, n principal, controalele formularului. Un control este o form de interaciune a utilizatorului cu formularul. Putem prezenta conform tabelului de mai jos principalele controale ntr-un formular HTML prezentate mai sus:

56

CONTROL ACIUNE A UTILIZATORULUI TAG text Introducerea unui text de volum redus Input password Introducerea unui text de volum redus, care apare, pe ecran,

mascat cu "*" Input

submit Activare (pentru a transmite informaiile completate de utilizator)

Input

reset Activare (pentru a restabili valorile iniiale ale tuturor controalelor formularului)

Input

checkbox Bifare Input radio Bifare Input textarea Introducere a unui volum mare de text Textarea menu Alegere a unei opiuni dintr-un meniu Select option

Evenimentele onfocus i onblur O pagina poate conine mai multe elemente prin care putem introduce date. Dac

introducem un ir de caractere ntr-un cmp de editare spunem c respectivul element primete focus-ul.

Evenimentul onfocus are loc atunci cnd un element primete focus-ul; Evenimentul onblur are loc atunci cnd elementul pierde focusul.

Elementele care primesc focus-ul au dou metode importante: metoda onfocus() atribuie focus-ul elementului metoda onblur() face ca elementul s piard focus-ul.

Exemplu: ntr-o caset trebuie s se introduc un text; n cazul n care se face click, far a introduce ceva, apare un mesaj, prin care se cere reintroducerea unei valori. Nu putem pleca mai departe pna cnd nu am introdus ceva.

Codul HTML aferent acestui exemplu se poate vizualiza n imaginea de mai jos.

57

Hri de imagini O imagine poate fi folosit ca i zon activ. n acest caz imaginea se insereaz n

documentul HTML ntre etichetele i . Exist ns posibilitatea de a crea hri de imagini (image maps) care permit ca

diferite zone ale unei imagini s fie definite drept legaturi ctre diverse pagini WEB. Crearea unei hri de imagini presupune trei etape:

Definirea unei imagini ca hart de imagini. Se va utiliza tag-ul cu atributele src i usemap. Numele dat pozei n usemap, precedat de semnul #, se va regsi obligatoriu n tag-ul map, n atributul name.

Definirea hrii n interiorul unui bloc special definit cu tag-ul i . Tag-ul are un atribut obligatoriu i anume name, care primete ca i valoare numele hrii (numele din usemap)

Crearea zonelor pe hart. Fiecare zon se introduce cu eticheta .

Eticheta are trei atribute obligatorii:

1) shape care poate lua una din valorile: rect (pentru zone de form dreptunghiular); circle (pentru zone de form circular); poly (pentru zone de form poligonal); default (pentru poriunile imaginii care nu se ncadreaz n nici una

dintre categoriile anterioare) 2) coords determin coordonatele zonei 3) href primete adresa URL a paginii indicate de legatura zonei respective.

Valorile atributului shape:

58

rect coords=x1,y1,x2,y2 dreptunghi unde (x1, y1) este coordonata colului stnga sus i (x2, y2) este coordonata colului dreapta jos.

circle coords=x1, y1,r (x1,y1) este centrul cercului de raz r. Poly coords=x1,y1,x2,y2,...xn,yn poligonul cu vrfurile de coordonate

(x1,y1), (x2,y2), (x3,y3),....

Pentru obinerea automat a coordonatelor se poate folosi programul MAP This, program care definete regulile pentru o imagine .gif sau .jpeg. Programul este freeware i se poate descrca de pe Internet.

59

IV. Reguli CSS (Foi de stil n cascad)

CSS este un acronim pentru Cascading Style Sheets (foi de stil n cascad). CSS este utilizat la mbuntirea prezentrii unei pagini Web (adic a modului n care browser-ul o afieaz). CSS permite stabilirea proprietilor pentru elementele HTML utiliznd o gam uria de valori. Avnd la dispoziie mai mult de 100 de proprieti, CSS este un instrument avansat destinat proiectanilor Web pentru crearea de site-uri profesionale, care nu pot fi construite folosind atribute HTML obinuite. n CSS exist posibilitatea s se aeze elementele n poziiile dorite (alta dect cea n cazul fluxului normal).

n mod normal definiiile stilurilor sunt introduse n foi de stil (style sheet). Stilurile au fost introduse n versiunea HTML 4.0. Exist dou modaliti de a defini un stil prin:

sintaxa CSS (Cascading Style Sheets); sintaxa limbajului JavaScript.

Una dintre caracteristicile fundamentale ale CSS este faptul c autorul poate ataa un stil, iar cititorul paginii respective poate ataa altul, deci se obine un set de reguli n cascad. n acest caz exist un set de reguli de prioritate care va decide care regul se va aplica.

Exist 4 tipuri de stiluri CSS. Ordinea de utilizare a stilurilor este urmtoarea:

1 stilul implicit al navigatorului (browser default); 2 foi de stil externe (External style sheets, nume_fisier.*css); 3 foile de stil interne (din interirul elementului head) 4 stiluri specificate n marcajul de start al unui element HTML (inline

style).

Structura unei reguli CSS O regul este format din dou pri principale: selectorul i declaraia. Declaraia se afl ntre elementul { i elemental }. La rndul ei, declaraia este

format tot din dou pri: proprietatea i valoarea. H1 { color: blue } n exemplul anterior H1 este selectorul, { color: blue } declaraia cu proprietatea color

i valoarea blue. n blocul ... avem regulile CSS definite ca mai sus. Deci definim mai nti, clasa de stiluri n interiorul blocului care se

poate afla n blocul ....

Integrarea regulilor CSS ntr-un fiier HTML

Exemplu H1 { color: green; }

60

Acest heading este verde datorit unei reguli CSS n exemplul anterior regula CSS este specificat n interiorul fiierului HTML. Prin

aceast metod modificrile n cazul fiierelor mari devin greoaie de aceea se recomand scrierea regulilor ntr-un fiier separat de unde s fie importate n fiierul HTML. Pentru exemplificare editm un fiier pe care l denumim reguli.css. In acest fiier scriem H1 { color: green }.Documentul HTML care import acest regulile din acest fiier este de forma urmtoare:

Exemplu de import

Acest heading este verde datorit unei reguli importate

Gruparea selectorilor i a declaraiilor Pentru a reduce dimensiunea fiierelor selectorii se pot grupa, separarea lor fcndu-se

prin virgul. H1, H2, H3, P { font-family: helvetica } Asemntor se pot grupa i declaraiile: H1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: helvetica; font-variant: normal; font-style: normal; }

Class ca selector O regul de genul H1 { color: blue } se aplic mereu cnd apare selectorul H1

indiferent dac vrem sau nu. Pentru a evita acest lucru se folosesc clasele. Fie fiierul reguli.css, fiierul n care scriem regulile pe care le vom importa. Sintaxa pentru definirea unei clase este urmtoarea: H1.clasa_noastr { color: red }

In fiierul HTML cnd vrem s aplicm regula respectiv scriem Heading rou . Dac am scrie Heading obinuit nu se va mai aplica regula CSS, deci

textul Heading obinuit nu va mai aprea rou.

Clasa definit mai sus se poate aplica numai pentru H1.

61

Dac am avea

62

Presupunnd ca prima linie se termin dup cuvntul an n pagina web acest text va apare sub forma:

THE FIRST LINE OF AN article in Newsweek. first-letter Asemntor cu first-line acest pseudo-element permite specificarea unui stil pentru

prima liter dintr-un text.

Precedena regulilor De multe ori se ntmpl ca ntr-un punct n cadrul unui fiier HTML s fie valabile

mai multe reguli CSS. Pentru a rezolva astfel de situaii trebuie stabilite nite reguli de prioritate.

`important` `Important` este un cuvnt rezervat prin care i se d unei reguli CSS o prioritate mai

mare dect unei reguli obinuite. P { font-size: 12pt ! important; font-style: italic }

Reguli: 1) Regula care conine `! important` suprascrie o regul obinuit. 2) Specificitatea unui selector: selectorii mai specifici i suprascriu pe cei mai

generali. Specificitatea se obine prin concatenarea a trei numere: numrul de atribute ID din cadrul selectorului (a), numrul de atribute CLASS (b) i numrul de tag-uri din selector (c).

LI {...} /* a=0 b=0 c=1 -> specificitate = 1 */ UL LI {...} /* a=0 b=0 c=2 -> specificitate = 2 */ UL OL LI {...} /* a=0 b=0 c=3 -> specificitate = 3 */ LI.red {...} /* a=0 b=1 c=1 -> specificitate = 11 */ UL OL LI.red {...} /* a=0 b=1 c=3 -> specificitate = 13 */ #x34y {...} /* a=1 b=0 c=0 -> specificitate = 100 */ Pseudo-clasele sunt numrate ca i clasele obinuite, iar pseudo-elementele sunt

numrate ca i elementele obinuite.

n cazul n care dou reguli ajung s aib aceai specificitate se aplic regula specificat mai trziu. Regulile importate se consider a fi naintea oricrei reguli din fiierul n care sunt importate.

Stiluri in-line Sunt definite n eticheta n care dorim s se aplice aceste stiluri. Valoarea lui este cuprins ntre ghilimele.

Stiluri definite n fiiere externe Stilurile definite n interiorul blocului pot fi scrise ntr-un fiier

extern, pentru a putea fi utilizate n mai multe fiiere HTML. Se creeaz un fiier care conine descrierea stilurilor i se salveaz cu extensia .css. n fiierul HTML care utilizeaz stilurile se include n blocul o

etichet cu atributele: rel cu valoarea stylesheet href cu valoarea adresa URL a fiierului creat, care conine regulile css.

63

Atribute CSS

Font font-family Valoarea: nume de font. Exemple: helvetica, serif, sans-serif,

cursive, monospace, fantasy, etc BODY { font-family: gill, helvetica, sans-serif } font-style Valoarea: normal | italic | oblique font-variant Valoarea: normal | small-caps font-weight Valoarea: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 |

500 | 600 | 700 | 800 | 900. Valoarea: normal echivaleaz cu 400, iar bold cu 700. font-size Valoarea: ||| absolute-size poate lua una din valorile: xx-small | x-small | small | medium |

large | x-large | xx-large relative-size poate lua una din valorile: larger sau smaller percentage

Exemple: P { font-size: 120% }

H1, H2, H3 { font-style: italic }

Dimensiunile pentru font-size sunt specificate prin: 1. mrime absolut; avem urmatoarele valori posibile:

xx-small x-small small medium (valoarea prestabilit) large x-large xx-large

2. mrime relativ fa de valoarea curent; avem urmatoarele valori posibile: larger smaller

3. numar ntreg urmat de unitatea de msur 4. procente din valoarea curent.

Exemplu: P {font-size: 9px }

Dimensiunea fontului poate fi specificat n centimetri(cm), milimetri(mm), pixeli(px), oli(in), puncte(pt 1pt=1/72in), etc.

1 in=72 pt=2.54 cm=6 pc

64

Background i culoare Color - Valoarea culorii poate fi specificat prin RGB(rou,verde,albastru),

parametrii lund valori ntre 0 i 255, prin numele unei culori care este deja definit (blue,green,black, etc) sau prin #nr1nr2nr3. Nr1,nr2,nr3 sunt numere de dou cifre n baza 16.

H2 { color: rgb(255,0,0) } H3 { color: #00FF6A } background-color - Valoarea: | transparent. background-image - Valoarea: | none background-repeat - Valoarea: repeat | repeat-x | repeat-y | no-repeat Precizeaz

dac imaginea din fundal este repetat sau nu. Pentru valoarea repeat imaginea este multiplicat pe orizontal i vertical. Pentru valoarea repeat-x imaginea este multiplicat numai pe orizontal,iar pentru repeat-y imaginea este multiplicat doar pe vertical.

background-attachment - Valoarea: scroll | fixed Specific dac imaginea din fundal este derulat odat cu coninutul sau nu.

Text word-spacing Valoarea: normal | (dimensiunea dintre cuvinte) letter-spacing Valoarea: normal | (dimensiunea dintre litere) text-decoration Poate lua una din valorile: underline, overline, line-through, blink. vertical-align Valoarea: baseline | sub | super | top | text-top | middle | bottom | text-

bottom | text-transform Valoarea: capitalize | uppercase | lowercase | none text-align Valoarea: left, right, center, justify

Distana dintre rnduri Se folosete atributul line-height. Valori posibile:

valoarea normal factor de scal prin lungime prin procente din valoarea curent a fontului

Stiluri pentru diferite medii Se tie c un text afiat pe monitor cu culoarea galben se vede foarte slab atunci cnd

este tiprit la o imprimant alb-negru. Aceast deficien poate fi corectat dac se utilizeaz stiluri potrivite pentru fiecare mediu. Mediul pentru care este valabil un stil este specificat prin atributul media al elementului , care poate lua urmatoarele valori posibile:

screen (pentru monitoare) print (pentru imprimante) projection (pentru proiectoare video) braille (pentru terminale destinate nevztorilor) speech (pentru terminale audio) all (pentru toate tipurile de medii)

65

Exemplu: Exemplu MEDIA

p {color: yellow;}

p {color: black;}

Acest paragraf va avea culoarea galbena pe monitor si culoarea neagra la imprimare.

Configurarea blocurilor de text Dimensiunile unui bloc: Un bloc este format din: coninut distana dintre coninut i chenar chenar margini

Marginile blocului Marginile unui bloc reprezint distana minim dintre chenarele a dou blocuri vecine.

Pentru a stabli marginile unui bloc se utilizeaz atributul: margin-left margin-right margin-top margin-bottom margin. Dac sunt indicate pentru proprietatea margin valori separate prin spaiu, acestea

reprezint dimensiunile n ordinea urmatoare: sus, dreapta, jos, stnga. Dimensiunile care lipsesc preiau valorile de la elementele opuse. Dac este dat o singur valoare, aceasta va fi folosit pentru toate direciile. Valorile posibile ale acestor atribute sunt:

auto marime (numr urmat de o unitate de msur) procent din limea paginii (numr ntreg ntre 0 i 100, urmat de simbolul %)

Observaii: Valorile menionate anterior pot fi i negative.

Distana dintre coninut i chenar Cu ajutorul atributelor de mai jos se stabilete distana dintre coninutul unui bloc (text,

imagini, etc) i chenarul acestuia. Atribute:

66

padding-top padding-right padding-bottom padding-left padding

Valori posibile ale atributelor sunt:

Mrimea (numr ntreg pozitiv) Procent din limea paginii

Limea chenarului

Atribute: Border-top-width Border-right-width Border-bottom-width Border-left-width Border-width

Valori posibile: thin, medium sau thick Numere ntregi pozitive urmate de o unitate de msur

Stilul chenarului

Cu ajutorul atributului border-style. Valori posibile:

none (valoarea prestabilit) solid (continuu) double (linie dubl) inset (chenar 3D) outset (chenar 3D) etc.

Culoarea chenarului

Cu ajutorul atributului border-color. Valori posibile: none (niciuna) un nume de culoare (aqua, red, blue, etc.) specificaie numeric de tip RGB funcia (r, g, b) cu valori ntre 0 i 255 funcia (r, g, b) cu procente ntre 0% i 100%

67

Exemplificm utilizarea regulilor CSS

Exemplu de stil definit n seciunea head

Alt exemplu de stil definit n seciunea head

Codul aferent acestui exemplu se poate vizualiza n imaginea de mai jos

68

Stiluri identificate cu ajutorul id-ului

69

Stiluri inline

Stil definit ca fiier extern

70

Exemplu de stiluri pentru font:

71

Exemplu de culoare a fontului pentru tag-urile p, b i h1

72

Exemplu de stil pentru culoarea fontului textului

73

Exemplu de imagine cu stil

74

Exemplu de stil pentru distana dintre rndurile de text

75

Exemplu de stil pentru grosimea fontului

76

Exemple stiluri pentru chenare

77

Alt exemplu cu chenare

78

Exemplu de creare a unui meniu de navigare cu ajutorul stilurilor

Vom observa c meniul s-a realizat doar cu ajutorul unei liste neordonate i al stilurilor

79

V. JavaScript

Limbajul JavaScript a fost realizat de firmele Netscape i Sun i a fost conceput ca un limbaj care extinde posibilitile de lucru ale HTM-ului. Acest limbaj conlucreaz cu HTML-ul.

Avantajele utilizrii limbajului JavaScript

JavaScript poate fi nglobat n HTML Codul JavaScript este gzduit n documente HTML i executat din interiorul lor.

JavaScript folosete HTML ca modalitate de a sri n cadrul de lucru al aplicaiilor pentru Web i-i extinde capacitile normale, asigurnd evenimente pentru etichete HTML i permind acestui cod condus de evenimente s se execute din interiorul su.

JavaScript este dependent de mediu JavaScript este un limbaj de scriptare. Software-rul care ruleaz programul JavaScript

scris este motorul de intrepretare din mediu - NetscapeNavigator, Microsoft Internet Explorer sau unul din motoarele pe parte de server. Cnd este inclus ntr-un document HTML, JavaScript depinde de browser pentru a fi recunoscut Dac browserul nu l recunoate, programul va fi ignorat sau mai ru, poate fi afiat ca text pe pagina.

JavaScript este un limbaj interpretat JavaScript fiind un limbaj de scriptare este interpretat de browser nainte de a a fi

executat. JavaScript nu este compilat n binary - ca un fiier EXE, ci rmne parte a documentului HTML la care este ataat. Dezavantajul unui limbaj interpretat este c executarea limbajului de baz dureaz mai mult, deoarece browserul compileaz instruciunile n timpul rulrii chiar nainte s le execute. Avantajul const n faptul c este mult mai uor de actualizat codul surs.

JavaScript este un limbaj flexibil n privina tipului de date JavaScript difer mult de limbajele stricte n privina tipului de date, JavaScript este

mult mai flexibil. Variabilele de un anuit tip pot fi declarate, dar nu este obligatoriu ca acest lucru s fie fcut. Se poate lucra cu o variabil chiar dac nu i se cunoate tipul specific nainte de rulare.

JavaScript este un limbaj bazat pe obiecte Netscape i alii se refer la JavaScript ca un limbaj de programare orientat spre

obiecte (OOP), dar aceasta este o deformare a adevratului neles al sintagmei OOP. JavaScript este un limbaj bazat pe obiecte. n cadrul limbajului JavaScript se lucreaz cu obiecte care ncapsuleaz date (proprieti) i comportamente (metode), dar acestea nu pot fi subclasate. Modelul de obiect JavaScript este bazat pe instan, nu pe motenire.

80

JavaScript este condus de evenimente Codul JavaScript scris ntr-o aplicaie Web poate rspunde la evenimente generate de

utilizator sau de sistem. n sine, limbajul JavaScript este echipat pentu a trata evenimente. Obiectele HTML, de exemplu butoanele sau cmpurile de text, sunt mbuntite pentru a accepta handlere de evenimente.

JavaScript nu este Java Java i JavaScript au fost create de dou companii diferite i motivul principal pentru

similitudinea denumirilor este legat exclusive de marketing. Exist numeroase deosebiri ntre Java i JavaScript. n primul rnd, dac JavaScript este strns legat de HTML, o miniaplicaie Java este conectat la un document HTML prin eticheta . Java este folosit pentru miniaplicaii sau pentru aplicaii complexe, pe cnd JavaScript este folosit n primul rnd pentru scripturi. Sintaxa limbajului JavaScript aduce cu sintaxa limbajului Java.

JavaScript este multifuncional JavaScrip are o mulime de faete i poate fi folosit n multe contexte pentru a oferi

soluii la probleme din Web. Principalele scopuri ale limbajului JavaScript sunt: o nfrumuseeaz i anim paginile HTML statice prin efecte speciale,

animaii i manete; o valideaz date, fr a trece totul serverului; o are un rol important n aplicaii client/server pentu Web; o permite dezvoltarea de aplicaii pe parte de client; o slujete ca i legtur pe partea de client ntre obiecte HTML, miniaplicaii

Java, controale ActiveX i module plug-in Netscape.

JavaScript evoluaz JavaScript continu s evolueze ca limbaj.

JavaScript acoper diverse cotexte JavaScript este un limbaj de scriptare. Programatorii Web se ndreapt mai ales spre

scriptarea pe parte de client. JavaScript este un limbaj nativ pentru instrumente de dezvoltare Web.

Carateristici ale limbajului JavaScript n JavaScript se scriu secvene de program numite scripturi. Majoritatea acestor

secvene sunt alctuite din funcii, care rspund anumitor evenimente. n JavaScript NU se citesc i NU se scriu fiiere; JavaScript este un limbaj interpretat. Asta nseamn c browserul preia o

instruciune, o execut, apoi preia o alt instruciune i o execut, .a.m.d. JavaScript este un limbaj care utilizeaz obiecte; n JavaScript se face distincie ntre literele mari i literele mici, adic este un

limbaj case sensitive.

81

Erorile de sintax se depisteaz greu, drept urmare se poate folosi funcia alert ( ). Folosete din sintaxa lui C++ i a limbajului Java JavaScript lucreaz cu funcii definite de programatori sau/i cu funcii predefinite

Conlucrarea dintre HTML i JavaScript JavaScript ofer capacitarea de a face paginile statice s devin interactive i mai

prompte fa de aciunle utlilizatorilor i de intrrile acestora. JavaScript pemite utilizatorilor in Web s creeze pagini dinamice, prin nglobarea unui

script n structura HTML existent. n felul acesta se pot plasa procese n spatele butoanelor, se pot efectua calcule cu datele introduse prin formulare, sau se pot efectua aciuni atunci cnd utilizatorul trece cursorul mouse-ului peste un element HTML sau peste un obiect Document.

JavaScript ofer avantaje fa de documentele interactive bazate pe server, deoarece n general documentele bazate pe JavaScript nu sunt dependente de prelucrarea pe parte de server, astfel c pot rspunde mai rapid la interaciunile i cererile utilizatorului.

Inglobarea instruciunilor JavaScript n HTML Scripturile JavaScript sunt integrate ntr-un document HTML folosind perechea de

etichete i . Atributul type este folosit pentru a specifica numele fiierelor surs JavaScript externe.

Atributele etichetei script sunt: Defer - atribut Boolean folosit pentru a anuna browserul dac scriptul din

aceast seciune genereaz un coninut; Language - atribut depreciat, care este utilizat pentru a specifica limbajul i

versiunea folosite ntre etichete; Src - atribut care specific locaia URL a unui fiier JavaScript surs extern; Type - atribut care a nlocuit atributul language i care anun browserul ce

limbaj se folosete ntre etichete.

n concluzie exist trei modaliti de a introduce un script JavaScript ntr-un document HTML, i anume:

1. Scriptul se scrie in head; . si; 2. Scriptul se scrie in body; . si; 3. Scriptul apare ca si fisier extern cu extensia js, deci nume.js; si

Executarea scripturilor Executarea unui script JavaScript ncepe n momente diferite, n functie de felul n

care este scris. Dac scriptul afecteaz coninutul de pe pagin, aa cum se ntmpl prin folosirea instruciunii document.write(), este executat pe msura ce este ntlnit. Exist de asemenea un handler de eveniment, onLoad, care este executat numai dup ce documentul HTML a fost complet ncrcat n browser.

82

Dac scripturile JavaScript sunt stocate ntr-un fiier separat, ele sunt de asemenea evaluate atunci cnd se ncarc pagina i nainte s aib loc vreo aciune.

Toate instruciunile JavaScript aflate n blocul unei funcii sunt interpretate, iar executarea nu se petrece pan ce funcia nu este apelat dintr-un eveniment JavaScript. Instruciunile JavaScript care nu se afl n blocul unei funcii sunt executate dup ce documentul se ncarca n browser, practic pe msura ce este redat. Rezultatul executrii acestor instruciuni va fi vizibil pentru utilizatori atunci cand vd pentru prima dat pagina.

a. Limbajul JavaScript JavaScript este un limbaj de nivel nalt, bazat pe obiecte, conceput pentru a le permite

utilizatorilor i programatorilor n Web s creeze cu uurin documente Web interactive. El ofer caracteristicile eseniale ale unui limbaj orientat spre obiecte, fr caracteristicile complicate care nsoesc alte limbaje, ca Java i C++.

Vocabularul relativ restrns al limbajului JavaScript este uor de neles, oferind n acelai timp mai multe posibiliti inaccesibile anterior.

b. Tipuri de date i variabile n JavaScript exist urmtoarele tipuri de date: tip sir; tip numr ntreg; numr ntreg n

baza 10, 8 sau 16. O variabil se poate declara cu particular var. O variabil poate primi orice valoare, nu se declar tipul ei.

Operatori aritmetici : +, -, * /, % ++ ,-- , + (operator unar), - (operator unar) Operatori relationali : =

Operatori de egalitate = = pentru test egalitate != pentru test inegalitate

Operatori logici ! (negarea logic) || operatorul logic sau (este operator binar): dac cel puin

unul dintre operanzi este true, rezult true, altfel rezultatul este false && operatorul logic i

Operatori logici pe biti > operatori de deplasare & - i pe bii | - sau pe bii - sau exclusiv pe bii ~ - negarea pe bii- are rolul de a inversa continutul biilor Operatorul , (virgul) Operatorul condiional : exp1 ? exp2 : exp3;

Operatorul de concatenare Operatorul de concatenare pentru iruri este +

83

c. Instruciuni

Instruciunile urmtoare au aceeai sintax i semantic precum n limbajul Java: IF Compus ( {.} ) Switch; While; Do While For

d. Funcii predefinite

alert ( mesaj) afieaz o caset n care se afieaz mesaj confirm( mesaj) caseta afieaz date de tip ir. Utilizatorul poate

apsa butonul OK, caz n care se returneaz valoarea true, sau Cancel, caz n care se returneaz valoarea false

prompt ( sir_afisat, sir_asteptat) caseta afieaz sir_afisat i ateapt introducerea valorii n sir_asteptat. Sir_asteptat poate fi iniializat cu zero.

escapes(s) eval(s) - s este un String care conine operaii matematice (de

ex.:.2+4). Funcia returneaz rezultatul acestei operaii, n acest caz 6. Dac nu este vorba despre o expresie calculabil, atunci se returneaz un mesaj de eroare.

isFinite(n) - decide dac nr. n este finit isNaN(x) - verific dac valoarea x este un nr. valabil (not-a-number).

Funcia returneaz valoarea true, daca x e un nr. Number(x) - convertete coninutul obiectului x n nr. i l returneaz parseInt (sir) convertete un ir ctre un ntreg. Conversia se face

pna cnd este ntlnit un character care nu este cifr; parseFloat(sir) - convertete un ir ctre o valoare real. Conversia se

face pna cnd este ntlnit un caracter care nu este cifr. Punctul este considerat a fi virgula zecimal.

n JavaScript putem introduce un text n mod dinamic. n JavaScript putem introduce i tag-uri HTML. De exemplu putem scrie: document.write(+ text + ).

84

Exemplificri utiliznd JavaScript:

Aplicaie_1:

85

Aplicaie_2:

86

Evenimente Una dintre caracteristicile-cheie ale limbajului JavaScript este capacitatea de a

intercepta un numr limitat de aciuni, cunoscute ca evenimente. Un eveniment este o aciune, care apare la un moment dat i n urma creia este declanat execuia unei anumite pri din program. Ori de cte ori vizitatorul face click pe o legtur, de exemplu, cnd introduce un text sau chiar cnd trece cu mouse-ul deasupra unei zone a paginii, survine un eveniment la care scriptul reacioneaz genernd un rspuns.

Obiecte Folosind limbajul JavaScript, se pot defini obiecte proprii, dar limbajul pune la

dispoziie o ierarhie de obiecte predefinite, respectnd modelul DOM (Document Object Model care este un pachet de interfee conceput de W3C). Elementul de legtur ntre JavaScript i DOM este obiectul Document, ce implementeaz interfaa Document din DOM.

Legtura dintre limbajul JavaScript i elementele dintr-un formular JavaScript creaz o ierarhie de obiecte predefinite, respectnd modelul obiect document

(DOM). Astfel coninutul fiecruit tag- HTML sau regul CSS pot fi modificate. Aceast ierhie prezentat de navigatorul Netscape- este ilustrat n figura de mai jos

[3]:

Fiecrui nivel din ierarhia de mai sus putem spune c i corespunde o serie de noduri. Astfel avem nodul document, cu subnivele/subnoduri aa cum este artat n imaginea de mai sus.

87

Pornim de la o aplicaie concret: Fie un formular care are structura conform imaginii de mai jos:

JavaScript recunoate elementele din pagina WEB n dou moduri: dup atributul name al fiecrui tag, ncepnd cu tag-ul i continund cu

elementele acestuia; dup numele implicit alocat elementelor din pagin. Elementele de acelai fel sunt

stocate ntr-un vector (array[i]) a crui index ncepe cu valoarea zero.

Pentru formularul de mai sus JavaScript creaza o structur arborescent conform poziiei ocupat de fiecare element n pagin.

88

Pagina se numete document, adic ne referim la nodul document. Astfel structura arborescent arat astfel:

document _______________________________________________ images [0] forms[0] links[0] images[1] ___________________ elements[0] elements[1] elements[2]

n-un document HTML set crea mai multe formulare, iar acestea se vor numi implicit forms[0], forms[1],etc.

Elementele fiecrui formular vor fi denumite elements[0], elements[1],etc.

Imaginile dintr-o pagin vor fi numerotate ncepnd cu prima imagine din pagina cu numele images[0], images[1],etc.

Link-urile dintr-o pagin vor fi i ele numerotate ncepnd cu indexul 0, cu numele links[0], links[1], etc.

Pentru a accesa primul element din formular vom scrie una dintre urmtoarele secvene n JavaScript:

1. document . forms [0]. elements[0] 2. document.f1.nume aceast expresie se folosete n cazul n care formularul este

descris conform secvenei de cod de mai jos:

Imagine_1 Nume&nbsp&nbsp&nbsp&nbsp&nbsp: Prenume : Imagine_2 WWW.GOOGLE.COM

Cutarea tag-urilor Pentru a putea manipula informaia dintr-un element (tag) HTML este necesar ca mai

nti s se obin o referin la acel element. n acest scop se pot folosi urmtoarele metode:

document.getElementById( )- returneaz un element, identificat dup atributul id.W3C recomand ca pentru identificarea elementelor s se foloseasc id;

document.getElementByName() - returneaz un element, identificat dup atributul name.;

89

document.getElementsByTagName() - returneaz o list de elemente, identificate dup numele tag-ului.

Dup localizarea unui element, se poate explora structura arborescent ncepnd cu acel punct, folosind proprieti ale obiectului precum: parentNode, firstChild, nextSibling etc.

Manipularea tag-urilor/ nodurilor/ elementelor Dup obinerea unei referine la un element, se pot manipula diversele proprieti ale

acestuia. Un exemplu n acest sens sunt atributele CSS care se pot modifica prin intermediul proprietii style. Exist i o excepie: float. Acesta este un cuvnt rezervat n JavaScript, deci nu se poate folosi element.style.float, dar se poate folosi element.style.cssFloat.

Crearea de noi tag-uri/noduri /elemente Exist cel puin dou tipuri diferite de noduri, astfel avem : nodurile element i nodurile

de text. Acestea se creaz folosind metodele document.createElement() - pentru elemente; document.createTextNode() - pentru nodurile de text. Metoda appendChild() adaug un nod fiu nodului pentru care este invocat. Metoda

pereche este removeChild() care permite tergerea unui nod fiu. Crearea unui nod se poate face i prin alt metod, folosind metoda document.write(), dar datorit faptului c exist posibilitatea de a introduce orice, chiar i cod prost structurat, aceast metod poate crea probleme serioase, n special n cazul documentelor XML. Din aceast cauz, funcia nu are nici un efect n documentele XHTML (i introducerea ei genereaz mesaje de eroare). n cazul XHTML, singura modalitate de a manipula structura documentelor via JavaScript este DOM.

Preluarea coordonatelor la apsarea unui click al mouse-ului cu ajutorul JavaScript

JavaScript permite preluarea de coordonate n momentul n care se efectuaz click pe o anumit imagine. Acest lucru este realizat cu ajutorul obiectelor Event care sunt create automat ori de cte ori are loc un eveniment. Exist un numr de proprieti asociate unui obiect Event care pot fi interogate pentru a afla informaii suplimentare despre obiectul Event. Dintre aceste proprieti fac parte i Event.pageX i Event.pageY n care sunt reinute coordonatele X i Y n pixeli ale cursorului, relativ la pagina curent, n momentul n care s-a produs evenimentul. Cu ajutorul acestor dou proprieti ale unui obiect de tip Event se poate calcula poziia mouse-ului asupra imaginii, n momentul n care s-a efectuat un click asupra acesteia.

Desenarea unor figuri geometrice cu ajutorul limbajului JavaScript Librria JavaScript Vector Graphics furnizeaz capabiliti de realizare a graficii petru

JavaScript: funcii de desenare dinamic a cercurilor, elipselor, liniilor oblice i a poligoanelor (de exemplu triunghiuri, dreptunghiuri). Utilizarea librriei Vector Graphics poate poate fi uoar chiar i n cazul n care un utilizator nu are experien n lucrul cu JavaScript. Aceast librrie const dintr-un script JavaScript numit wz_jsgraphics.js.

90

n limbajul HTML nu exit elemente ca linii oblice, elipse, cercuri sau alte elemente de acest gen.

Funcionalitatea acestei librrii este redus la urmtorele browsere Web: Gecko-Browsers, Internet Explorer 4, 5 and 6, Opera 5, 6 i 7+, pentru sistemul de operare Windows.

Eventhandler Handler-ele de evenimente sunt introduse n ca atribute suplimentare n tagurile

HTML. Ca valoare pentru aceste atribute, sunt date instruciuni JavaScript, care trebuie executate. Handler-ele de evenimente se recunosc dup numele lor. Acestea ncep, de exemplu, cu onClick.

Nr crt EVENTHANDLER TAGURILE HTML PERMISE

onAbort img onBlur a, area, button, input, label, select, textarea onChange Input, select, textarea onClick a., abbr, acronym, address, area, b, big,

blockquote, body, button, caption, center, cite, col, colgrouzp, dd, del, dfn, dir, div, dl, dt, em, fieldset, form, hx, hr, I, img, input, ins, kbd, label, legend, li, link, map, menu, noframes, noscript, object, ol, optgroup, option, p, pre, q, s, samp, select, small, span, strike, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, u, ul, var

onDblClick Vezi onClick onError img onFocus a, area, button, input, label, select, textarea onKeydown Vezi onClick onKeypress Vezi onClick onKeyup Vezi onClick onLoad body, frameset onMousedown Vezi onClick onMousemove Vezi onClick onMouseout Vezi onClick onMouseout Vezi onClick onMouseup Vezi onClick onReset form onSelect Vezi onClick onSubmit form onUnload Frameset, body javascript A , area

Fie urmtorul exemplu: S se scrie un text ANTETUL MEU folosindu-se culoarea verde. Cnd se trece cu mouse-ul deasupra acestui cuvnt acesta s se transforme n cuvntul ANTET! scris cu negru.

91

Totodat s se scrie un text n caseta care apare pe ecran, iar textul scris s fie afiat ntr-o csu alert, atunci cnd se face click n afara casetei, pe ecran.

Soluia este dat n figura de mai jos.

92

Aplicaie folosind Eventhandler

Obiecte n limbajul JavaScript sunt multe obiecte predefinite; acestea dispun de proprieti i

metode specifice, care se pot folosi direct. n exemplele oferite sunt folosite obiectele window i document, mpreun cu metodele lor, fr ca acestea s fie specificate explicit.

Obiectele sunt ordonate ntr-o structur ierarhic, la vrful ei afndu-se obiectul window. Si descrie fereastra actual a browserului. Pe treapta urmtoare se afl obiectul document, care descrie coninutul paginii. Pe treapta urmtoare se afl obiectul form. Pe lng aceste obiecte, exist o serie de alte obiecte.

Pentru a putea folosi un obiect, trebuie ca acesta s fie mai nti creat cu ajutorul cuvntului cheie new (vezi limbajul Java). Astfel pot fi apelate ulterior diferite proprieti i metode.

Aplicaie: S se creeze un obiect Data i s se foloseasc o metod a acestui obiect (de ex.

getDate(), pt a se afla ziua curent). Codul surs i efectul pe ecran se regsesc n imaginile urmtoare :

93

Obiectul window

Obiectul Window corespunde ferestrei curente din browser i cu ajutorul lui se pot afla/modifica proprietile ferestrei. Exist posibilitatea de a deschide ferestre noi.

Obiectul window este cel mai de sus obiect din ierarhia obiectelor JavaScript. Corespunde ferestrei curente din browserul web. Prin acest obiect se pot afla prorietile ferestrei curente. Exist i posibiltatea de a deschide ferestre noi. Aa-numita fereastr principal a browserului web se poate apela prin numele rezervate window sau self.

Proprieti ale obiectului window:

Nr. crt. PROPRIETATE ACCES

1 closed read 2 defaultStatus read, write 3 innerHeight read, write 4 innerWidth read, write 5 locationBar read 6 menuBar read 7 name read, write 8 outerHeight read, write 9 outerWidth read, write 10 pageXOffset read 11 pageYOffset read 12 personalBar read 13 scrollBar read 14 statbar read 15 status read, write toolbar read

Aplicaie_1:

Codul surs l putei observa n imaginea de mai jos.

94

Aplicaie_2:

95

Metode prin care se poate apela obiectul window:

Nr. crt. METODA DESCRIERE

1 alert(s) Returneaz Stringul s ca text ntr-un dialog-box. 2 blur() Face fereastra inactiv. 3 clearIntervall(p) Termin un eveniment/proces infint, inceput cu setIntervall(). p

este parametrul in care a fost salvat rezultatul din setIntervall(). 4 clearTimeout(p) Termin un Timeout care a fost nceput cu setTimeout().p este

parametrul in care a fost salvat rezultatul din setTimeout(). 5 close() Inchide fereastra. 6 confirm(s) Returneaz Stringul s ca text ntr-un dialog-box., care este

prevazut cu butoanele de ok si cancel. 7 moveBy(x,y) Mut o fereatra in directia (x,y)-pixeli (orizontal(x) sau vertical

(y)). Un nr. negativ mut fereastra nspre stnga-sus. 8 moveTo(x,y) Mut fereastra la coordonatele x,y pixeli. 9 open(p1,p2,p3) Deschide o nou fereastr. Al 3-lea parametru e optional.

p1: adresa (URL) unui fiier , care se vrea deschis n fereastr.(Un String gol deschide o fereastra goala) p2: Numele ferestrei p3: (optional) Date despre cum arat fereastra. Mai multe propieti se despart prin virgul

11 prompt(p1,p2) Creeaz un dialogbox cu 2 butoane analog metodei confirm() i un cmp de text (textfield), n care utilizatorul face propriile remarci. p1 e un String, care apare n dialogbox p2 este textul acre apare prima dat n cmpul de text.

12 resizeBy(x,y) Mrete fereastra cu x pixeli la dreapta i cu y pixeli n jos. La valori negative, fereastra se micoreaz.

13 resizeTo(x,y) Mrete fereastra la o marime de x pixeli n direcie orizontal i cu y pixeli n direcie vertical.

1