Proiectarea Site Si Web Design

COLEGIUL DE MICROELECTRONIC 1TEHNIC DE CALCUL
CATEDRA:CALCULATOARE
Proiectare Site
i Web Design
ndrumar de laborator
Chisinau 2010
Cuprins:
Lucrare de laborator Nr.l. INTRODUCERE N HTML ................................................ 2
Lucrarare de laborator Nr. 2. CREAREA UNEI PAGINI WEB SIMPLE N
LIMBAJUL HTML. FOLOSIREA CULORILOR ............................................................ 4
Lucrarare de laborator Nr. 3. NOTIUNE DE PARAGRAF. STRUCTURA DOCUMENTULUI, MPRTIREA N PARAGRAFE ............................................................... 7
Lucrarare de laborator Nr. 4. UTILIZAREA HYPERLINK-URILOR.
INSERAREAIMAGINILOR, SETAREA ATRIBUTELOR UNEI IMAGINI ............... 10
Lucrarare de laborator Nr. 5. CREAREA LISTELOR N HTML. INSERAREA
TABELELOR.................................................................................................................... 13
Lucrarare de laborator Nr. 6. FERESTRE CADRU N HTML .................................. 18
Lucrarare de laborator Nr. 7. FORMULARE. FOLOSIREA CMPURILOR DE
TIP LIST DERULANT, CSUT DE VALID ARE, BUTON RADIO .................. 21
Lucrarare de laborator Nr. 8. DEFINIREA TERMENULUI CSS 1 UTILIZAREA
LUI. CLASE DE STILURI. STILURI INLINE. STILURI DEFINITE N FILIERE
EXTERNE......................................................................................................................... 25
Lucrarare de laborator Nr. 9. EVENIMENTE 1 FUNCTII. IERARHII,
FERESTRE CADRU N JAVASCRIPT .......................................................................... 30
Lucrarare de laborator Nr. 10. JAVASCRIPT 1 BARA DE STARE. OBIECTE
PREDEFINITE.
VALID
ARE
DATE
FORMULARE
HTML.
CREAREA
FIIERELOR ANIMATE N PAGINI WEB .............................................. ; .................. 38
Lucrare de laborator Nr.l

INTRODUCERE N HTML
Unul din primele demente, fundamentale de altfel, ale WWW (World Wide Web) este
HTML (HyperText Markup Language), standard ce descrie formatul primr n care documentele
sunt distribuite i vzute pe Web. Multe din trsturile lui, cum ar fi independenta fata de platform,
structurarea formatrii i legturile hipertext, fac din el un foarte bun format pentru documentele
Internet i Web. Primele specificatii de baz ale Web-ului au fost HTML, HTTP i URL.
Menire i semnifieatii
HTML a fost dezvoltat initial de Tim Bemers-Lee la CERN n 1989. HTML este un limbaj
bazat pe SGML (Standard Generalized Markup Language), aa-numit aplicatie a acestuia. SGML
este un standard international (ISO-8879) aprobat n 1986. HTML a fost initial vzut ca posibilitate
pentru fizicienii care utilizeaz computere diferite s schimbe ntre ei informatie prin mijlocirea
Intemetului. Erau prin urmare necesare cteva conditii esentiate: independenta de platform,
posibilitti hipertext i structurarea documentelor. Independenta de platform senmific faptul c un
document poate fi afiat n mod asemntor (sau aproape identic) de computere diferite (deci eu font,
grafica i culori aidoma), lucru vital pentru audient numeroas si extrem de variat. Hipertext se
traduce prin faptul c orice cuvnt, fraz, imagine sau element al documentului vzut de un utilizator
(client) poate face referint la un alt document sau chiar la paragrafe din interiorul aceluiai
document, ceea ce usureaz mult navigarea ntre partile componente ale unui document sau ntre
multiple documente. Structurarea riguroas a documentelor permite convertirea acestora dintr-un
format n altul precum i interogarea unor baze de date nglobnd aceste documento.
Nscut n urm cu aproximativ 30 de ani, ntr- tentativ de a rezolva unele probleme ivite la
transportul documentelor ntre diferite computere, limbaj ul hipertext a volut ncet. In primii ani de
evolutie HTML a demarat lent n principal pentru c i lipseau posibilittile de a reda publicatii
electronice profesionale; limbajul permitea oarece control asupra fonturilor dar nu permitea inserarea
graficii. n 1993, NCSA a mbogtit limbajul pentru a permite inserarea graficii si a construit primul
navigator grafie: Mosaic. Au urmat apoi contributii ad-hoc aie diverselor firme care au adus tot felul
de adugiri limbajului HTML astfel nct, n 1994, limbajul prea sepat de sub control. Urmarea a
fost ca la prima conferint WWW de la Geneva (Elvetia) s-a constituit un grup de specialisti (HTML
Working Group) a crui prima misiune a fost formalizarea HTML, lucru care s-a concretizat n
HTML 2.0. Importanta actiunii acestui grup const n faptul c, odat standardizat, limbajul a putut
fi apoi extins ntr-un mod mai contrlt la alte nivele.
Standardizarea
Standardul oficial HTML este dat de World Wide Web Consortium (W3C), care este afiliat
la Internet Engineering Task Force (IETF). W3C a enuntat cteva versiuni ale specificatici HTML,
printre care si HTML 2.0, HTML 3.0, HTML 3.2, HTML 4.0 i, cel mai recent, HTML 4.01. n
acelai timp, autorii de browsere cum ar fi Netscape i Microsoft, au dezvoltat adesea propriile
"extensii" HTML n afar procesului standard i le-au incorport n browserele lor. n unele cazuri
(cum ar fi tagul Netscape), aceste extensii au devenit standarde de facto adoptate de autorii de
browsere. Cnd navigatomi incarca un document HTML, el "citeste" documentul n cautarea tagurilor HTML, formateaz textul i imaginea i le afiseaz pe cran. Este motivul pentru care acelai
document HTML apare uor diferit cnd este privit utiliznd navigatoare diferite. Stadiile prin care
trece un standard elaborat de W3C snt:
1. Orice standard i ncepe aventura ca W3C Note.
2. De aici este preluat de ctre un grup particular de lucru (Working Group) i este
discutt pn cnd se ajunge la un consens.
3. n acest moment este publicat ca propunere (Working Draft) i n acest stadiu
oricine poate face comentarii.
4. n momentul n care se obtine sustinere i un consens suficient de larg,
directorul W3C decide dae specificatia este gata s devin propunere oficial de
recomandare (Proposed Recommendation).
5. Urmeaz perioad de 6 sptmmi n care toti membrii W3C au ansa s voteze
aceast propunere de recomandare; votul nu este obligatoriu, putndu-se vota n 4 moduri
2
diferite:
da;
da, sub rezerva unor mbunttiri;
nu, pn cnd anumite sarcini nu sunt
nu, specificatia trebuie abandonat.
ndeplinite;
6. Charta W3C stipuleaz necesitatea obtinerii consensului complet, astfel c fiecare

vot trebuie sa fie un da far rezerve.
7. Dac toti paii anteriori au fost indepliniti, specificatia trebuie aprobat n final de
Director i se public sub forma unui standard (W3C Recommendation).
De ce HTML
Dar de ce a fost prfrt HTML pentru publicatii pe Web, cnd pentru realizarea publicatiilor
electronice exista multe alte tehnologii? Primul motiv este simplitatea. Al doilea este c permite
formatarea textului ASCII eu tag-uri n format ASCII. Rezult de aici compresie bun, suport
pentru legatori hipertext i uurinta n a serie navigatoare pentru vizualizarea documentelor.
Varianta 2.0
HTML 2.0, elaborat n Iunie 1994, este standardui pe care ar trebui s-1 suporte toate
browserele curente - inclusiv cele n mod text. HTML 2.0 reflect conceptia originala a HTML ca un
limbaj de marcare independent de obiectele existente, focalizndu-se pe aezarea lor n pagina, n loc
de a specfica exact cum ar trebui sa arate acestea. Dac doriti s fiti siguri c toti vizitatorii vor
vedea paginile asa cum trebuie, folositi tagurile HTML 2.0.
Varianta 3.0
Specificatia HTML 3.0, enuntat n 1995, a ncercat s dezvolte HTML 2.0 prin adugarea
unor facilitati precum tabelele i un mai mare control asupra textului din jurul imaginilor. Desi unele
din nouttile HTML 3.0 erau deja folosite de autorii de browsere, multe nu erau nc oficializate. In
unele cazuri, taguri asemanatoare implementate de autorii de browsere au devenit mai rspndite
dect tagurile "oficiale". Specificatia HTML 3.0 a expirt repede, deci nu mai este un standard oficial
n prezent.
Varianta 3.2
n Mai 1996, W3C a scos pe piat specificatia HTML 3.2 , care era proiectat s reflecte i s
standardizeze practicile acceptate la scar larg. Deci, HTML 3.2 include tagurile HTML 3.0 care
erau adoptate de autorii de browsere precum Netscape si Microsoft plus noi extensii HTML.
Revolutia HTML 4.0, HTML 4.01
In acest moment, HTML 4.0 este larg utilizat si au fost deja publicate specificatine HTML
4.1. Limbajul HTML d proiectantilor de pagini web posibilitatea:
s publice documente eu headere, texte, tabele, liste, fotografii, etc...
s regseasc on-line informatii prin intermediul hiperlink-urilor accesate printrun simplu click de mouse
s proiecteze formulare pentru realizarea tranzactiilor eu servere aflate la distant,
pentru cutri de informatie sau pentru activitti specifice comertului
s includ foi de calcul tabelar, clipuri video, sunete i alte aplicatii direct n
documente.
Elementul esential diferit adus de versiunea 4.0 i mai aies 4.01 fat'de versiunea 3.2 este
posibilitatea separrii structurii unui document de prezentarea lui prin introducerea stilurilor de
documente (style sheet). Utiliznd limbajul HTML pentru structurarea unui document i style sheeturile pentru a stiliza prezentarea acestuia, proiectantii pot obtine mult mai uor independents de
periferie/ computer/ platform hard-soft, lucru care a fcut HTML-ul att de popular. Un document
eu structur complex poate fi prezentat n diferite moduri pe medii diferite, permitnd
documentului nsui s se adapteze mai usor noilor tehnologii (cum ar fi, de exemplu, browserele
capabile s vorbeasc, cititoarele braille, etc...).
In plus, separarea continutului de partea de prezentare permite modificarea nfatirii chiar a
unui ntreg site doar prin modificarea unui document care descrie stilul. Experienta a demonstrat c
astfel de abordare poate reduce dramatic costurile de deservire a unui spectru larg de platforme i
problme, facilitnd i ntretinere ulterioar i modificri mult mai uoare.
Lucrarare de laborator Nr. 2

CREAREA UNEI PAGINI WEB SIMPLE IN LIMBAJUL
HTML. FOLOSIREA CULORILOR,
Notiuni teoretice
Orice document HTML incepe cu notatia <html> i se termina cu notatia </html>. Astfel
de perechi de marcaje sau etichete (acolo unde sunt perechi) se numesc in literatura de specialitate
TAG-uri. Prin conventie, toate marcajele HTML incep cu o paranteza unghiulara deschisa "<" si se
termina cu o paranteza unghiulara inchisa Marcajele dintre aceste paranteze transmit comenzi
catre browser pentru a afia pagina intr-un anumit mod. Unele blocuri prezinta delimitator de sfirsit
de bloc, in timp ce pentru alte blocuri acest delimitator este optional sau chiar interzis.
Intre cele doua marcaje <html> i </html> vom introduce doua sectiuni:
sectiunea de antet: <head>...</head>
corpul documentului: <body>...</body>
Blocul <body>...</body> cuprinde continutul propriu-zis al paginii HTML, adica ceea ce va
fi afisat in ferastra browser-ului. Un marcaj poate fi scris atat cu litere mici, cat si cu litere mari. De
exemplu <BODY> = <BodY> = <body>. Caracterele "spatiu" si "CR/LF" ce apar' intre taguri sunt
ignorate de catre browser.
Un prim document HTML ar fi ceva de genul acesta:
<html>
<head> </head>
<body> </body>
</html>
Vom adauga primele elemente de text
In primul rind, titlul unei pagini se obtine inserind in sectiunea <head>...</head> urmatoarea
linie:
<title>Aceasta este titlul primei mele pagini de Web</title>
In plus, in sectiunea <body>...</body> putem scrie texte cit dorim. Daca nu intilnim nici un
marcaj "<" sau ">", atunci interpretorul HTML le va lua ca texte simple i le va afisa pe ecran. Sa
vedem o noua versiune a paginii eoastre:
<html>
<head>
<title>Aceasta este prima mea pagina de Web</title>
</head>
<body>
Bine ati venit in pagina mea de Web!
</body>
</html>
Continutul blocului <title>...</title> va aparea in bara de titlu a ferpstrei browser-ului. Daca
acest bloc lipsete intr-o pagina HTML, atunci in bara de titlu a ferstrei browser-ului va aparea
numele fisierului.
Trecerea pe o linie noua - se face in HTML cu o comanda explicita, care trebuie sa apara in
codul sursa html. Aceasta comanda este marcajul <br> (de la "line break" - intrerupere de linie).
Folosind acelcasi operatii ca mai sus, vizualizati noua pagina. Veti vedea textul ce apare in fereastra
browserului. in plus, pagina dvs. va avea un titlu nou, cel introdus de dvs.. Ex.:
<html>
<head>
<title> titlul paginii</title>
</head>
<body> Bine ati venit in <br> pagina mea de Web!
</body>
</html>
Culoarea de fond
O culoare poate fi precizat in dou moduri:
1. Printr-un nume de culoare. Sunt disponibile cel putin 16 nume de culori: aqua, black,
fuchsia, gray, green lime, maroon, navy, olive, purple, red, silver, teal, white si yellow.
2. Prin constructia "#RRGGBB" unde R(red), G(green), sau B(blue) sunt cifre hexazecimale
i pot lua valorile: 0, 1,2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f, F; se pot defini astfel 65536
de culori.
Culoarea fundalului unei pagini se precizeaz prin intermediul unui atribut al tagului BODY,
mai exact cu atributul "bgcolor" din cadrul etichetei <body>. De exemplu: <body bgcolor =
culoare>.
Culoarea textului
Acest lucru se seteaza prin intermediul atributului "text" al tagului BODY, dup sintaxa
<body text=culoare>. In urmtorul exemplu textul are culorea rosie:
<html>
<head>
<title>culoare textului </title>
</head>
<body text=red>
Un text de culoare rosie.
</body>
</html>
O etichet poate avea mai multe atribute.
De exemplu, o etichet cu trei atribute arat astfel: <eticheta atributl = valoarel
atribut2 = valoare2 atribut3 = valoare3>. Urmatorul exemplu prezint o pagin cu
fondul de culoare albastr i textul de culoare galben:
<html>
<head>
<title>atribute multiple </title>
</head>
<body bgcolor=blue text=yellow>
Fond de culoare albastra si text de culoare galbena.
</body>
</html>
Textul afiat este caracterizat de urmtoarele atribute: Mrime (font size) - aici implicita,
Culoare (font color) - aici implicita, Font (font family) - aici implicit.
Pozitionarea continutului paginii Web fat de marginile ferestrei browserului se poate face
cu ajutorul a dou atribute ale etichetei <body>:
1. "Leftmargin" (stabilente distanta dintre marginea stng a ferestrei browserului i
marginea stanga a continutului paginii);
*
2. "Topmargin" (stabilente distanta dintre marginea de sus a ferestrei browserului i
marginea de sus a continutului paginii);
<html>
<head>
<title>Configurarea textului si stabilirea marginii </title>
</head>
<body leftmargin=" 100" topmargin="50">
Textul are atribute implicite. <br><basefont style="Arial" color="blue"
size="6">
Textul este scris cu fontul "Arial", culoare albastru si marime 6.
</body>
</html>
Stiluri pentru Iblocurile de text

Pentru ca un bloc de text sa apar in pagina evidentiat (cu caractere aldine), trebuie inclus
intre tagurile <b>...</b> (b vine de la "bold" = indraznet ).
Pentru ca un text sa fie scris cu carcatere cursive acesta trebuie inclus intr-un bloc delimitat
de tagurile <i>...</i> (i vine de la "italic").
Pentru a insera secvente de text ca indice (sub-script) sau ca exponent (super-script), aceste
fragmente trebuie delimitate de tagurile <snb>...</sub>, respectiv <sup>...</sup>.
Pentru a in sera un bloc de caractere sublimate se utilizeaz etichetele <u>...</u> (u vine de la
"underline").
Fonturi in HTML
Un font este un text caracterizat de urmtoarele atribute:
1. Culoare (stabilita prin atributul "color");
2. Tipul sau stilul (stabilit prin atributul "face");
3. Mrimea (definita prin atributul "size");
4. Mrimea in puncte tipografice (stabilita prin atributul "point-size");
5. Grosime (definita prin atributul "weight").
Toate aceste atribute apartin etichetei <font>, care permite inserarea de blocuri de texte
personalizate.
Culori
O culoare poate fi precizat in dou moduri:
1. printr-un nume de culoare.
2. printr-o constant conform standardului de culoare RGB (Red, Green, Blue). O astfel de
constant se formeaz astfel: #rrggbb, unde r, g si b sunt cifre hexazecimale.
Culorea fontului
Pentru a serie un fragment de text cu caractere de o anumit culoare, se ncadreaz acest
fragment ntre marcajele de font, avnd stabilit atributul color la valoarea necesar.
Familia fontului
Pentru a serie un text intr-o pagin pot fi folosite mai multe fonturi (stiluri de caractere).
Exist cinci familii generice de fonturi care sunt de regul disponibile pe toate calculatoarele
utilizatorilor: "serif1, "sans serif', "cursive", "monospace" si "fantasy". Tipul de font necesar poate fi
stabilit prin atributul "face" al etichetei. Pot fi introduse mai multe fonturi separate prin virgul. In
acest caz browserul va utiliza primul font pe care il cunoaste.
Mrimea fontului
Pentru a stabili mrimea unui font se utilizeaz atributul size al etichetei. Valorile acestui
atribut pot fi:
1. 1, 2, 3, 4, 5, 6, 7 (1 pentru cel mai mie font i 7 pentru cel mai mare);
2. +1, +2, etc. pentru a mri dimensiunea fontului cu 1, 2, etc. fat& de valoarea curent;
3. -1, -2, etc. pentru a micsora dimensiunea fontului cu 1, 2, etc. fata de valoarea curent.
Sarcina propus: creati o pagina Web care sa contin numele, premimele, grupa voastr i
un mesaj de salutare.
Luerarare die laborator Nr 3

NQTIUNE BE PARAGRAF. STRUCTURA BOCUMENTULUI,
MPRTIREA N PARAGRAFE
9
Notiunl feoretiee
Blocuri de Text
Tagurile care defmesc blocuri de text nu se refera la particularitatile caracterelor ce compun
textul, ci la functiile pe care le poate avea un bloc de text in cadrul paginii Web. Etichetele care
lucreaza cu blocuri de text produc automat trecerea la un rind nou si adaugarea unui spatiu
suplimentar.
Identarea unui bloc
Pentru ca un bloc de text sa fie indentat (marginea din stinga a textului sa fie deplasata la
dreapta la o anumita distanta fata de marginea din stinga a paginii), acesta trebuie inclus intre
etichetele <blockquote>...</blockquote>, astfel:
<html>
<head>
<title> Indentarea unui bloc</title>
</head>
<body>
extul ce urmeaza este indentat:<blockquote>Bloc de text
identat</blockquote>
</body>
</html>
Intr-un fiier HTML, caracterele "<" i ">" au o semnificatie speciala pentru browser. Ele
incadreaza comenzile i atributele de afiare a elementelor intr-o pagina. Daca dorim ca un fragment
de text sa contina astfel de caractere, acest fragment trebuie incadrat de una dintre perechile de
etichete:
1. <xmp>...</xmp> (80 de caractere pe rind);
2. <listing>...</llsting> (120 de caractere pe rind).
Aceste marcaje interpreteaza corect (ca text afiabil in browser) caracterele "spatiu",
"eticheta" si "CRL+F". Textul alisat in pagina este monospatiat. Exemplu:
<html>
<head>
<title> xmp si listing</title>
</head>
<body>
Un fiier html standard arata astfel: <xmp> <html>
<head>
<title> </title>
</head>
<body>
O pagina Web ...
</body>
</html> </xmp> </body>
</html>
Blocuri paragraph
Etichetea paragraf <p> face posibila trecerea la o linie noua si peimite:
L inserarea unui spatiu suplimentar inainte de blocul paragraf;
2. inserarea unui spatiu suplimentar dupa blocul paragraf, daca se foloseste delimitatorul
</p> (acesta fiind optional);
3.
sau "right".
alinierea textului cu ajutorul atributului "align ", avind valorile posibile "left", "center"
Exemplu:
<html>
<head>
<title> Blocuri paragraf</title>
</head>
<body>
Prima linie
<p> Lini generata de un paragraf (implicit paragraful este aliniat la
stanga).
<p align="right"> Paragraf aliniat la dreapta.
<p align="center"> Paragraf aliniat in centru.
</body>
</html>
Blocuri de titlu
Intr-un text, titlurile (headers) de capitole pot fi introduse cu ajutorul etichetelor <H2>.
<H3>, <h3>, <h4>, <h5>, <h6>. Loate aceste etichete se refer la un bloc de text i trebuie nsotite
de o etichetaa de ncheiere similar. Aceste etichete accept atributul "align" pentru alinierea titlului
blocului de text la stnga (in mod prestabilit), in centru i la dreapta. Lag-ul "H2" permite scrierea
unui titlu cu caractere mai mari i aldine, pe cind <h6> folosete caracterele cele mai mici.
Exemplu:
<html>
<head>
<title> Blocuri de titlu</title>
</head>
<body>
<H2 align="center"> Titlu de marime 1 aliniat in centru </H2>
<H3 align="right" > Titlu de marime 2 aliniat la dreapta. </H3>
<h4> Titlu de marime 4 aliniat la stanga (implicit) </h4>
</body>
</html>
Linii orizontale
Intr-o pagina Web pot fi inserate linii orizontale. Acest lucra se face cu ajutorul etichetei
<hr>. Pentru a configura o linie orizontal se utilizeaz urmatorele atribute ale etichetei <hr>:
1. "align" ce permite alinierea orizontal a liniei. Valorile posibile sunt "left" ,"center" i
"right";
2. "width " permite alegerea lungimii liniei;
*
3. "size" permite alegerea grosimii liniei;
4. "noshade" cind este prezent definente o linie far umbr;
5. "color permite definirea culorii liniei.
Exemplu:
<html>
<head>
<title> Linii orizontale</title>
</head>
<body>
<H2 align="center"> Tipuri de linii orizontale </H2> O linie implicita,
aliniere stanga, latime 100%, grosime 2 cu umbra.
<hr>Urmeaza o linie aliniata in centru, de latime 50%, grosime 5 pixeli,
fara umbra.
8
<hr align="center" width="50%" size="5" noshade>Urmeaza o linie

aliniata la dreapta, de latime 150 de pixeli, grosime 12 pixeli, de culoare
rosie.
<hr align="right" width=150 size=12 color="red">
</body>
</html>
Blocuri CENTER
Blocul introdus de etichetele <center>...</center> aliniaz centrat toate elementele pe care
le contine. Exemplu:
<html>
<head>
<title> Linii orizontale</title>
</head>
<body>
<center> <hr width=10%> <hr width=40%> <hr width=70%> <hr
width=100%> <hr width=70%> <hr width=40%> <hr width=10%> </center>
</body>
</html>
Blocuri DIV
Modalitatea cea mai eficient de delimitare de formatare a unui bloc de text este folosirea
delimitatorilor <div>...</div>. Un parametro foarte util pentru stabilirea caracteristicilor unui bloc
<div> (diviziune) este "align" (aliniere). Valorile posibile ale acestui parametro sunt:
1. "left" (aliniere la stnga);
2. "center" (aliniere centrala);
3. "right" (aliniere la dreapta).
Un bloc <div>...</div> poate include alte subblocuri. n acest caz, alinierea precizat de
atributul align al blocului are efect asupra tuturor subblocurilor incluse n blocul <div>. Un bloc
<div>...</div> admite atributul "nowrap" care interzice intreruperea rndurilor de ctre browser la
affare.
Exemplu de utilizare a tagului DIV:
<html>
<head>
<title>Blocul DIV</title>
</head>
<body>
Aceasta linie este o linie normala.Urmatorul bloc este aliniat la dreapta.
<div align="right">
O singura linie.O singura linie.O singura linie.O singura linie.<br>
</div>
<div align="center">
Bloc aliniat pe centru.Bloc aliniat pe centru.<br>
</div>
</body>
</html>
Sarcina propus: la pagina Web creata din lucrarea precedent adugati i structurati in
paragrafe.

UTILIZAREA HYPERLINK-URILOR. INSERAREAIMAGINILOR,
SETAREA ATRIBUTELOR UNEIIMAGINI
Notiuni teoretice
Lucrul cu Imagini
Imaginile sunt stocate n filiere cu diverse formate. Fonnatele aceeptate de browsere pentru
fiierele imagine sunt:
1. GIF (Graphics Interchange Format) cu extensia .gif;
2. JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg;
3. XPM (X PixMap) cu extensia .xmp;
4. XBM (X BitMap) cu extensia .xbm;
5. BMP (BitMap) cu extensia .bmp (numai cu Internet Explorer);
6. TIFF (Tagged Image File Format) cu extensia .tif sau .tiff;
Cele mai rspndite formate sunt GIF (8 biti pentru culoare, 256 culori posibile) i JPEG
(24 biti pentru culoare, 16777216 de culori posibile).
Adresa URL a unei imagini
URL ("Uniform Resource Locator" = identificator unie al resursei) este un standard folosit n
identifiearea unic a unei resurse n Internet. Toate imaginile cu care vom lucra vor avea adresa URL
exprimat n functie de directorul ce contine documentul HTML care face referire la imagine.
Pentru a nsera imagine ntr-o pagin, se utilizeaz eticheta <img> (de la "image"=
imagine).
Pentru a putea identifica imaginea care va fi inserat se utilizeaz un atribut al etichetei
<img> i anume "src" (de la "source1- sursa). Dac imaginea se afl n acelasi director cu fi i er al
HTML care face referire la imagine, atunci adresa URL a imaginii este formata numai din numele
imaginii, inclusiv extensia. Dac imaginea se afl ntr-un subdirector al directorului paginii HTML
din care este apelat, s spunem "images", atunci aceasta este apelat cu URL-ul:
"/images/imagine 1 .jpg". n schimb, dae fiierul imagine este situt ntr-un director "images"
dintr-un super director al directorului paginii HTML apelante, referirea se face cu URL-ul:
"../images/imaginel .jpg".
Exemplu:
<html>
<head>
<title> pagina cu imagine</title>
</head>
<body>
pagina care contine imagine in subdirectorul images dintr-un super
director al unui superdirector al directorului paginii HTML
<img src="../../images/imaginel ,jpg">Text dupa imagine.
</body>
</html>
Chenarul i dimensionarea unei imagini
Dae doriti s adugati un chenar n jurul imaginii, folositi atributul "border" al etichetei
<img>. Valorile acestui atribut sunt numere ntregi pozitive.
imagine are anumite dimensiuni pe orizontal i vertical, stabilite n momentul crerii ei.
Dae nu se cere altfel, aceste dimensiuni sunt respectate n momentul afirii ei n browser, n cadrul
paginii web. Dimensiuniile prestabilite ale unei imagini pot fi modificate la afiarea n browser prin
intermediul atributelor "width" i "height" setate de proiectant n codul HTML al paginii la
valorile dorite.
Spre exemplu:
10
<html>
<head>
<title> Imagine cu chenar si marit</title>
</head>
<body>
O imagine cu chenar si de 200 pixeli X 15 %
<img src="/images/imaginel.jpg" border="5" width="350" height="25%">
Text dupa imagine.
</body>
</html>
Alinierea unei imagini
Alinierea unei imagini se poate face prin intermediul atributului "align" care poate lua
urmatorele valori:
1. "left" - aliniere la stinga; celelalte componente sunt dispuse pe partea dreapta;
2. "right" - aliniere la dreapta; celelalte componente sunt dispuse pe partea stinga;
3. "top" - aliniere deasupra; partea de sus a imaginii se aliniaza cu partea de sus a textului ce
precede imaginea;
4. "middle " - aliniere la mijloc; mijlocul imaginii se aliniaza cu linia de baza a textului ce
precede imaginea.
5. "bottom" - aliniere la baza; partea de jos a imaginii se aliniaza cu linia de baza a textului.
Exempli u:
<html>
<head>
<title> Alinierea unei imagini</title>
</head>
"body>
Alinieri:
<br> Pe verticala:
<img src="/images/imgl.jpg" align="top">
La mijloc: <img src="/images/imgl.jpg" align="middle">
Jos: <img src"/images/imgl .jpg" align="bottom"> Text dupa imagine.
</body>
</html>
Alinierea textului in jurul imaginii
Atributele "lispace" si "vspace precizeaza distanta in pixeli pe orizontala, respectiv pe
verticala, dintre imagine i restul elementelor din pagina. Atributul "alt" admite ca valoare un text
care va fi afiat in locul imaginii, in functie de setarile browserului utilizatorului:
<html>
<head>
1
<title> Alinierea textului</title>
</head>
<body>
<h4>Imagine aliniat la stanga inconjurata de text la distanta de 30 de pixeli.
</h4><p> Text inainte de imagine.Text inainte de imagine.Text inainte de
imagine.Text inainte de imagine. Text inainte de imagine.Text inainte de
imagine.Text inainte de imagine.Text inainte de imagine.
<img src="../images/imgl.jpg" align="left" hspace="30" vspace="30"
alt="Universitatea de Nord Baia Mare">
Text dupa imagine.Text dupa imagine.Text dupa imagine.Text dupa
imagine.Text dupa imagine. Text dupa imagine.Text dupa imagine.Text dupa
imagine.Text dupa imagine.Text dupa imagine.
</body>
</html>
11
Immagini pent fondili unei pagini

O imagine poate fi utilizata pe post de fundal al unei pagini Web. In acest scop se folosete
atribntul "background" al etichetei <body>, avnd ca valoare adresa URL a imaginii. Imaginea se
multiplic pe orizontal i pe vertical pn umple intregul ecran. De exemplu:
<html>
<head>
<title> Pagina cu imagine de fond</title>
</head>
<body background="../images/imgl .jpg">
l<br>2<br>3<br>4<br> 5<br>6<br>7<br>8<br> 9<br> </body>
</html>
Imagimi folosite ca legatari
O legatura (link) introduce in pagina Web o zona activ. Efectund click cu butonul mouseului pe aceasta zona, in browser se va ncrca o alta pagina. Pentru a utiliza imaginea "legatura.jpg"
drept legatura ctre pagina index.html utilizm sintaxa:
<a href ="index.html"><img src= "../../images/imgl .jpg "></a>
In mod prestabilit, imaginea utilizata pe post de zona activ este nconjurat de un chenar
avnd culoarea unei legturi. Dac stabilim pentru a tributimi "border " al etichetei <img> la 0, acest
chenar dispare. Exemplu:
<html>
<head>
<title> Imagini folosite ca legaturi</title>
</head>
<body"><h4>Imagini folosite ca legaturi</h4>
Text inainte de imagine.<a href="index.htmr!><img
src="../../images/imgl.jpg "></a>
Text dupa imagine.
</body>
</html>
Sarcina propus: la pagina Web creata din lucrarea precedent insrati cteva imagini.
12

CREAREA LISTELOR N HTML. INSERAREA TABELELOR
Notiuni teoretice
Liste n HTML
Unul din cele mai obinuite elemente din documentele cu mai multe pagini este un set de
definitii, referinte sau indexuri. Glosarele sunt exemple clasice n acest sens; cuvintele sunt listate n
ordine alfabetica, urmate de definitii ale termenilor respectivi. In HTML, ntreaga sectiune a unui
glosar va fi gestoinat printr-o lista de definitii care este inclusa ntr-o pereche de marcaje de tip lista
de definiti: <dl>...</dl> (de la "definition list" = lista de definitii).
Observatii:
- Un termen al listei este marcat de eticheta <dt> (de la "definition term' - termen dfinit);
- Definitia unui termen este initiat de eticheta <dd> (de la "definition description'descrierea definitici);
- Definitia unui termen ncepe pe o linie noua i este identat;
Exemplu:
<html>
<head><title>listex_l</title></head>
<body><H2 align=center>0 lista de definitii</H2><hr>
<dl>
Glosar de termeni de World Wide Web
<dt><b>hypertext</b>
<dd>- o interconectare Web de informatii de tip text, in care orice cuvant sau
fraza poate face legatura catre un alt punct din document sau catre un alt
document
<dt><b>date</b>
<dd>- fluxul nesfarsit de materiale care apar pe Internet, spre deosebire de
informatii care sunt date cu un anumit inteles sau valoare
<dt><b>informatie</b>
<dd>- sub-setul de date care are efectiv semnificatie si care este util la
momentul curent
</dl>
</body>
</html>
Liste neordonate
O lista neordonat este un bloc de text dlimitt de etichetele corespondente <ul>...</ul>
("ul" vine de la "unordered list"= lista neordonat). Fiecare element al listei este initit de eticheta
<li> (list item). Lista va fi indentata fata de restul paginii Web i fiecare element al listei ncepe pe
unrndnou. Exemplu:
<html>
<head><title>listex_2</title></head>
<body><H2 align=eenter>0 lista neordonata</H2><hr>
Glosar de termeni World Wide Web
<ul>Culori uzuale disponibile prin nume
<li>Black <li>White <li>Red <li>Green <li>Blue <li>Yellow <li>Purple
<li>Aqua
</ul>
</body>
</html>
Tag-urile <ul> si <li> pot avea un atribut " type" care stabilente caracterul afiat in fata
fiecarui element al listei. Valorile posibile al acestui atribut sunt:
1. "circle" (cere);
13
2. "disc" (disc plin) - valoarea implicita;

3. "square" (ptrat);
Listele neordonate pot fi imbricate pe mai multe niveluri, cainexemplul urmtor:
<html>
<body><H2 align=center>0 lista neordonata de liste neordonate</H2><hr>
Glosar de termeni de World Wide Web
<ul>Elemente si atribute a unei pagini HTML
<li>Frameset <ul>Atribute: <li>cols <li>rows <li>border </ul>,
<li>Frame <ul>Atribute: <li>src <li>name <li>scrolling </ul>
</ul>
</body>
</html>
Liste ordonate
O lista ordonata de demente este un bloc de text delimitat de etichetele corespondente
<ol>...</ol> ("ol" vine de la "ordered list"= lista ordonat). Fiecare element al listei este initiat de
eticheta <li> (list item). Lista va fi indentata fat de restul paginii Web i fiecare element al listei
ncepe pe un rind nou. Exeimpili:
<html>
<head><title>listex _4</title></head>
<body><H2 align=center>0 lista ordonata</H2><hr>
<ol>Culori uzuale disponibile prin nume
<li>Aqua
</ol>
</body>
</html>
Tag-urile <ol> si <li> pot avea un atribut " type" care stabilente tipul de caractere utilizate
pentru ordonarea listei. Valorile posibile sunt:
1. "A" pentru ordonare de tipul A, B, C, D, etc. (litere mari);
2. "a" pentru ordonare de tipul a, b, c, d, etc. (litere mici);
3. "I" pentru ordonare de tipul I, II, III, IV, etc. (cifre romane mari);
4. "i" pentru ordonare de tipul i, ii, iii, iv, etc. (cifre romane mici);
5. "1" pentru ordonare de tipul 1, 2, 3, 4, etc. (cifre arabe - optiune prestabilit);
Urmtorul exemplu este o list ordonat cu cifre romane:
<html>
<body><H2 align=center>0 lista ordonata cu cifre romane</H2><hr>
<ol type="I">Culori uzuale disponibile prin nume
<li>Aqua
*
</ol>
</body>
</html>
Tag-ul <ol> poate avea un atribut start care stabilente valoarea initial a secventei de
ordonare. Valoarea acestui atribut trebuie sa fie un numr intreg pozitiv.
Urmtorul exemplu este o list ordonat cu litere mari, incepnd cu valoarea C.
<html>
<body><H2 align=center>0 lista ordonata cu litere mari, incepand de la
valoarea C</H2><hr>
<ol type="A" start="3">Culori uzuale disponibile prin nume
<li>Red <li>Green <li>Blue <li>Yellow <li>Purple <li>Aqua
</ol>
14
</body>
</html>
Listele ordonate pot fi imbricate intre ele sau cu liste neordonate, ca in exemplul
irmStor:
<html>
<body><H2 align=eenter>0 lista ordonata de liste ordonate si neordonate</H2><hr>
<ol>Un sistem informatic include:
<li>Hardware:
<ol>
<li>plaea de baza
<li>procesor
<li>memorie
<li>harddisk
</ol>
<li>Software:
<ul>
<li>Linux
<li>Windows
<li>OS/2
<li>Unix
</ul>
<li>Software de aplicatie:
<ul type="disc">
<li>VisualC++
<li>Java
<li>SQL
<li>CorelDraw
</ul>
</ol>
</body>
</html>
Tabele in HTML
Tabelele ne permit sa cream o retea dreptunghiulara de zone, fiecare zona avind propriile
optiuni pentru culoarea fondului, culoarea textului, alinierea textului, etc.
Pentru a insera un tabel se folosesc etichetele corespondente <TABLE>...</TABLE>. Un
tabel este format din rinduri. Pentru a insera un rind intr-un tabel se folosesc etichetele <TR>
...</TR> (de la "table row" = rand de tabel). Folosirea etichetei de sfirit este optionala. Un rind este
format din mai multe celule ce contin date. O celula de date se introduce cu etichetele
<TB>...</TB>
t
In mod prestabilit, un tabel nu are chenar. Pentru a adauga un chenar unui tabel, se utilizeaza
un atribut al etichetei rnunmit "border. Acest atribut poate primi ca valoare orice numar intreg
(inclusiv 0) i reprezinta grosimea in pixeli a chenarului tabelului. Daca atributul "border" nu este
urmat de o valoare, atunci tabelul va avea o grosime prestabilita egala cu 1 pixel. O valoare egala cu
0 a grosimii semnifica absenta chenarului. Cind atributul "border" are o valoare nenula, chenarul
unui tabel are un aspect tridimensional.
Alinierea tabelului
Pentru a alinia un tabel intr-o pagina Web se utilizeaza atributul "align" al etichetei
<TABLE>, cu urmatoarele valori posibile: "left" (valoarea prestabilita), "center" i "right". Alinierea
este importanta pentru textul ce inconjoara tabelul. Astfel:
- daca tabelul este aliniat stinga, atunci textul care urmeaza dupa punctul de inserare al
tabelului va fi dispus in partea dreapta a tabelului.
15
- dac tabelul este aliniat dreapta, atunci textul care urmeaz dupa punctul de inserare al
tabelului va fi dispus n partea stnga a tabelului.
- dac tabelul este aliniat pe centra, atunci textul care urmeaz dup punctul de inserare al
tabelului va fi afiat pe toat ltimea paginii, imediat sub tabel.
Befinirea culorilor de fond pentru un tabe!
Culoarea de fond se stabilente cu ajutorul atributului "bgcolor", care poate fi ataat
ntregului tabel prin specificarea n cadrai etichetei <table> sau numai celulelor de date prin
specificarea sa n etichetele de celula (<td>). Valorile pe care le poate primi atributul "bgcolor" sunt
cele cunoscute pentru o culoare.
Bimemsionarea celulei unui tabel
Distanta dintre dou celule vecine se definente eu ajutorul atributului "cellspacing" al
etichetei <TABLE>. Valorile acestui atribut pot fi numere ntregi pozitive, inclusiv 0, ni reprezint
distanta n pixeli dintre dou celule vecine. Vaiorea prestabilit a atributului "cellspacing" este 2.
Distanta dintre marginea unei celule ni continutul ei poate fi definita eu ajutorul atributului
"cellpadding" al etichetei <TABLE>. Valorile acestui atribut pot fi numere ntregi pozitive ni
reprezint distanta n pixeli dintre celule ni continutul lor. Vaiorea prestabilit a atributului
"cellpadding" este 1.
Bimensiomarea unui tabel
Dimensiunile unui tabel - ltimea ni nltimea - pot fi stabilite exact prin intermediul a dou
atribute - "width" i "height" - ale etichetei <TABLE>. Valorile acestor atribute pot fi:
/. numere ntregi pozitive reprezentnd ltimea respectiv nltimea n pixeli a tabelului;
2. numere ntregi ntre 1 ni 100, urmate de semnul %, reprezentnd fractiunea din ltimea ni
nltimea total a paginii.
Ainierea continutului unei celule
Alinierea pe orizontal a continutului unei celule se face eu ajutorul atributului "align" care
poate lua valorile:
1. "left" (la stnga);
2. "center" (centrt) - valoarea prestabilit;
3. "right" (la dreapta);
4 "char" (alinierea se face fat de un caracter).
Alinierea pe vertical a continutului unei celule se face eu ajutorul atributului "valign " care
poate lua valorile:
1. "baseline" (la baz);
2. "bottom" (jos);
3. "middle" (lamijloc, valoarea prestabilit);
4. "top" (sus).
Exeimplu de tabel reunind toate elementele descrise pn acum:
<html>
t
<head><title>Tabel</title></head>
<body>
<table border=" 1 " cellpadding=" 10" cellspacing="15" width="100%">
<tr>
<td align="middle">data data data</td>
</tr>
<tr>
</tr>
16
<tr align="right">
<td>data data data</td>
</tr>
</table>
</body>
</html>
Tabele cu forme oarecare
Un tabel trebuie privit ca retea dreptunghiular de eelule. Cu ajutorul a dou atribute ale
etichetelor <TR> si <TD>, celul se poate extinde peste eelule vecine. Astfel:
L extinderea unei eelule peste celulele din dreapta ei se face cu ajutorul atributului
"coispan ", a crui valoare determin numrul de eelule care se unific.
2. extinderea unei eelule peste celulele de sub ea se face cu ajutorul atributului "rowspan ",
a crui valoare determin numrul de celule care se unific.
Sunt posibile extinderi simultane ale unei celule pe orizontal si pe vellicala. In acest caz, n
etichete vor fi prezente ambele atribute "colspan" i "rowspan".
Exempln:
<html>
<head><title>Tabel</title></head>
<body>
<table border=" 1 " cellpadding=" 10" cellspacing=" 15" width=" 100%">
<tr>
<td align="middle" rowspan="3">data data data</td>
<td align="middle" colspan="2">data data data</td>
</tr>
<tr>
</tr>
<tr align="right">
</tr>
</table>
</body>
</html>
Sarcina propus: la pagina Web creat din lucrarea precedent creati lista si un tabel.
17

FERESTRE CADRU N HTML
Notiuni teoretice
Cadre in HTML
Ferestrele sau (cadrele) ne permit sa defmim n fereastra browserului sub-ferestre in care sa
putem ncadra documente noi HTML. Sub-ferestrele sunt definite ntr-un fiier HTML special, n
care blocul <body>...</body> este nlocuit de blocul <frameset>...</frameset>. n interiorul
acestui bloc, fiecare cadru este introdus prin eticheta <frame>.
Un atribut obligatoriu al etichetei <frame> este "src, ce primete ca valoare adresa URL a
documentului HTML care va fi ncrcat n acel frame. Defmirea cadrelor se face prin mprtirea
ferestrei cran (i a subferestrelor) n linii i coloane:
1. mprtirea unei ferestre ntr-un numr de subferestre de tip coloan se face eu ajutorul
atributului "cols" al etichetei <frameset> ce descrie acea fereastr;
2. mprtirea unei ferestre ntr-un numr de subferestre de tip linie se face eu ajutorul
atributului "rows" al etichetei <frameset> ce descrie acea fereastr;
3. valoarea atributelor "cols" i "rows" este o list de elmente separate prin virgul, care
descriu modul n care se face mprtirea. Elementele listei pot fi:
3.1. un numr ntreg de pixeli;
3.2. procente din dimensiunea ferestrei (numr ntre 1 si 99 termint eu %);
3.3. n* care nseamn n prti din spatiul rmas;
Exemplu 1: "cols=200,*,50%,*" nseamn o mprtire n 4 subferestre, dintre care
prima are 200 pixeli ltime, a treia ocup jumtate din spatiul total disponibil iar a doua i a patra
ocup n mod gal restul de spatiu rmas disponibil.
Exemplu 2: "cols=200,l*,50%,2*" nseamn o mprtire n 4 subferestre, dintre care
prima are 200 pixeli ltime, a treia ocup jumtate din spatiul total disponibil iar a doua i a patra
ocup n mod gal restul de spatiu rmas disponibil, care se mparte n trei parti gal, a doua
fereastr ocupnd o parte iar a patra ocupnd 2 prti.
Observatii:
- dae mai multe elemente din list sunt configurate eu *, atunci spatiul disponibil rmas
pentru ele se va mprti n mod gal.
- o subfereastr poate fi un singur cadru (folosind <frame>) - n care se va ncrca un
document HTML - sau poate fi mprtit la randul ei la alte subfereste constituind cadre noi
(folosind <frameset>).
Exemplu:
<html>
<head><title>ferex_l</title></head>
<frameset cols="*,*">
<frame src="pl ,html">
<frame src="p2.html">
</frameset>
t
</html>
n exemplul urmtor este creat o pagin Web eu trei cadre orizontale. Pentru al doilea cadru
valoarea atributului "src" este adresa URL a unei imagini, ca n exemplu:
<html>
<head><title>ferex_2</title></head>
<frameset rows="100,*,10%">
<frame src="x.jpg">
<frame src="p3,html">
</frameset>
</html>
n exemplul urmtor este creat o matrice de 4 cadre (2 x 2). Pentru a realiza acest lucru, se
folosesc simultan cele dou atribute Cols i Rows, precum n exemplul urmtor:
18
<html>
<frameset rows="*,*" cols="*,*">
<frame src="p 1 .html">
<frame src="p2.htmr'>
<frame src="p3 .html">
</frameset>
</html>
In exemplul urmator este creata o pagina Web cu trei cadre mixte. Pentru a o crea se
procedeaza din aproape in aproape. Mai intii, pagina este impartita in doua subferestre de tip
coloana, dupa care a doua subfereastra este impartita in doua subferestre de tip linie, ca in
exemplul de mai jos:
<html>
<frameset cols="20%,*">
<frameset rows="*,*">
</frameset>
</frameset>
</html>
Culori pentru chenarele cadrelor i dimensionarea chenarului unui cadru
Pentru a stabili culoarea chenarului unui cadru se utilizeaza atributul border color". Acest
atribut primete ca valoare un nume de culoare sau o culoare defmita in conformitate cu modelul de
culoare RGB. Atributul bordercolor poate fi ataat atit etichetei <frameset> pentru a stabili culoarea
tuturor chenarelor cadrelor incluse, cit si etichetei <frame> pentru a stabili culoarea chenarului
pentru un cadru individual.
Atributul "border" al etichetei <frameset> permite configurarea latimii chenarelor tuturor
cadrelor la un numar dorit de pixeli. Valoarea prestabilita a atributului "border" este de 5 pixeli. O
valoare de 0 pixeli va defini un cadru fara chenar.
Exemplu:
<html>
<frameset cols="20%,*" bordercolor="green" border="15">
<frame src="pl .html">
<frame src="p2.html" bordercolor="blue"> <frame src="p3.html">
</frameset>
</html>
In mod prestabilit, chenarul afloat al unui cadru are aspect fridimensional. Afi^area
chenarului unui cadru poate fi dezactivata daca se utilizeaza atributul "frameborder cu valoare
"no". Acest atribut poate fi ataat atit etichetei <frameset> (dezactivarea fund valabila pentru toate
cadrele incluse) cit i etichetei <frame> (dezactivarea fiind valabila numai pentru un singur cadru).
Exemplu:
<html>
<head><title>ferex_5 _l</title></head>
<frameset cols="20%,*" border="0">
<frame src="pl,html">
</frameset>
19
<html>
<head><title>ferex_5_2</title></head>
<frameset cols="20%,*" frameborder="no">
<frame src="pl.html">
</frameset>
</html>
Bare de defilare
Atributul "scrolling" al etichetei <frame> este utilizat pentru a aduga unui cadru o bar de
derulare care permite navigarea in interiorul documentului all sat in interioral cadrului. Val orile
posibile sunt:
1. "yes" - barele de derulare sunt adugate intotdeauna;
2. "no" - barele de derulare nu sunt utilizabile;
3. "auto" - barele de derulare sunt vizibile atunci cind este necesar
Exemplu:
<html>
<frameset cols="*,*,*">
<frame src="p.html" scrolling="yes" noresize>
<frame src="p.html" scrolling="no" noresize>
<frame sre="p.html" scrolling="auto" noresize>
</frameset>
</html>
Atributul "noresize" al etichetei <frame> (far nici o valoare suplimentar) dac este
prezent, inhiba utilizatomiui posibilitatea de a redimensiona cadrul cu ajutorul mouse-ului.
Pozitionarea documentului intr-un cadru
Atributele "marginheight" i "marginwidth" ale etichetei <frame> permit stabilirea
distantei in pixeli dintre continutul unui cadru i marginile verticale, respectiv orizontale ale
cadrului.
Valori posibile:
- numr de pixeli;
- procent din ltimea, respectiv din inltimea cadrului;
Exemplu:
<html>
<frameset cols="*,*,*">
<frame src="p.html">
t
<frame src="p.html" marginheight=20>
<frame src="p.html" marginwidth=20>
</frameset>
</html>
Exist browsere care nu suport cadre. Pentru aceasta se utilizeaz in interiorul blocului
<frameset> eticheta <noframes>. Dac programul de navigare Stic s interpreteze cadre, va ignora
ce se gasete in aceast portiune, iar dac nu, materialul cuprins in zona <noframes>...</noframes>
va fi singurul care va fi nteles si afisat. De precizat este faptul ca ntre <noframes> ... </noframes>
se pot introduce orice alte tag-uri HTML (inclusiv imagini, hiperlink-uri, tabele).
Sarcina propus: la pagina Web creat din lucrarea precedent creati ferestre cadru.
20
Liierarare de laborafor Nr0 7

FORMULARE. FOLOSIREA CiMPURILOR DE TIP LIST
DERULANT, CSUT DE VALID ARE, BUTON RADIO
Notimi teoretica
Formulare im HTML
Un formular este un ansamblu de zone active alctuit din butoane, casete de selectie,
cmpuri de editare, etc. Formularele asigura construirea unor pagini Web care sa permit
utilizatorilor sa introduca efectiv informatii si sa le transmit serverului. Formularele pot varia de la
o simpl caset de text, pentru introducerea unui sir de caractere pe post de cheie de cutare element caracteristic tuturor motoarelor de cutare din Web, pn la o structura complex, cu
multiple sectiuni, care ofera facilitati putemice de transmisie a datelor. O sesiune cu o pagina web ce
contine un formular cuprinde urmatoarele etape:
1. Utilizatomi completeaza formulami i l expedieaz unui server
2. O aplicatie dedicata de pe server analizeaza formulami compltt si (dac este necesar)
stocheaza datele ntr-o baza de date.
3. Dac este necesar serverul expedieaz un rspuns utilizatorului.
Un formular este dfinit ntr-un bloc dlimitt de etichetele corespondente <fform> i
</form>.
Atribute esentiale aie elementului <fform>
Exista doua atribute esentiale aie elementului <form>:
1. Atributul "Action precizeaz ce se va ntmpla cu datele formularului odat ce acestea
ajung la destinatie. De rgula, valoarea atributului "Action" este adresa URL a unui script aflat pe un
server WWW care primete datele formularului, efectueaz o prelucrare a lor i expedieaz ctre
utilizator un rspuns. Exemplu :
<form action="http://www.yahoo.com/cgi-bin/nume__fis.cgi">.
Script-urile pot fi scrise n limbajele Perl, C, PHP, Unix shell, Java.
2. Atributul "Method" precizeaz metoda utilizat de browser pentru expedierea datelor
formularului. Sunt posibile urmtoarele valori:
2.1. "Get (valoarea implicita). n acest caz, datele din formular sunt adugate la adresa URL
precizat de atributul "Action". Atentie ns:
- nu sunt permise cantitti mari de date (maxim 1 Kb)
- ntre adresa URL i date este insrt un "?".
Datele sunt adugate conform sintaxei: "nume camp = valoare_camp". ntre diferite seturi de
date este introdus un Exemplu:
http://www.yahoo.com/cgi-bin/nume_fis.cgi7numel
=
valoarel
&nume2
=
valoare2
2.2. "Post". n acest caz datele sunt expediate separat. Sunt permise cantitti mari de date (de
ordinul MB).
Pentru ca un formular s fie functional trebuie precizat ce se va ntmpla eu el dup
compietarea si expediere. Cel mai simplu mod de utilizare a unui formular este expedierea acestuia
prin posta electronic (e-mail). Pentru aceasta se folosete un atribut al etichetei <form> si anume
"Action" care pri meste ca valoare "mailto:" concatenat eu o adres valid de e-mail ctre care se va
expedia formulami compltt.
Formulare eu un emp de editare fi un buton de expediere
Majoritatea elementelor unui formular sunt definite cu ajutoml etichetei <input>. Pentru a
preciza tipul elementului se folosete atributul " type" al etichetei <input>. Pentru un cmp de
editare, acest atribut primete valoarea "text". Alte atribute pentru un element <input> sunt:
h Atributul "name" permite atasarea unui nume fiecrui element al formularului.
2. Atributul "value" permite atribuirea unei valori initiale unui element al formularului.
Un buton de expediere al unui formular se introduce eu ajutorul etichetei <input>, n care
atributul " type" este configurt la valoarea "submit". Acest element poate primi un nume prin
21
atributul "name", Pe buton apare seris implicit "Submit Query" sau explicit valoarea atributului
"value", dac aceasta valoare a fost stabilita.
Exeimplu:
<html>
<head><title>formEx_l </title></head>
<body><H2> Un formular cu un camp de editare si un buton de
expediere</H2>
<hr>
<form aetion="mailto:xxxxx@xxx.com" method="post">
Numele:<input type="text" name="numele" value="Numele si
prenumele"><br>
<input type="submit" value="expediaza"> </form></body>
</html>
Pentru elementul <input> de tipul cmp de editare (type= "text"), alte doua atribute pot fi
utile:
1. Atributul ",size" ce specifica ltimea cmpului de editare. Dac textul introdus n cmp de
utilizator depete aceast ltime, atunei se execut automat o derulare a continutului acestui cmp;
2. Atributul "maxlength " ce specifica numrul maxim de caractere pe care le poate primi
un cmp de editare; caracterele tastate peste numrul maxim sunt ignorate.
Bilicane radio
Butoanele radio permit alegerea, la un moment dat, a unei singure variante de rspuns din
mai multe posibile. Butoanele radio se introduc prin eticheta <input> cu atributul " type" avnd
valoarea "radio". Exennplu:
<html>
<head><title>formex_4</title></head>
<body><H2>Un formular cu butoane radio</H2>
<hr>
<form action="mailto:xxxxx@xxx.com" method="post">
Alegeti sexul:<input type="radio" name="sex" value="b"><br>
Femeiesc:<input type="radio" name="sex" value="f"><br>
<input type="reset"> <input type="submit"> </form></body>
</html>
La expedierea fonnularului se va transmite una dintre perechile "sex^b" sau "sex=f, in
functie de alegerea facut de utilizator.
Caselle de validare
O easet de validare (checkbox) permite selectarea sau deselectarea unei optiuni. Pentru
inserarea unei casete de validare se utilizeaz eticheta <input> cu atributul " type" configurt la
valoarea "checkbox". Observatii:
- fiecare caseta poate avea un nume dfinit prin atributul "name".
- fiecare caseta poate avea valoarea prestabilit "selectat" definit prin atributul "checked".
Exemplu:
<html>
<body><H2>Un formular cu casete checkbox</H2>
<hr>
Alegeti meniul:<br>
Pizza <input type="checkbox" name="pizza" value="o portie">
Nectar <input type="checkbox" name="nectar" value="un pahar">
Bere <input type="checkbox" name="bere" value="o sticla">
Cafea <input type="checkbox" name="cafea" value="o ceasca"><br>
<input type="reset"> <input type="submit"> </form></body>
</html>
22
Formulare de selectie
Un formular de selectie permite utilizatorului sa aleag unul sau mai multe demente dintr-o
lista finit. Lista de selectie este inclus in formular cu ajutorul etichetelor corespondente <select> i
</select>. O list de selectie poate avea urmtoarele atribute:
1. Atributul "name", care ataeaz listei un nume (utilizat in perechile "name=value"
expediate serverului);
2. Atributul "size", care precizeaz (printr-un numar ntreg pozitiv, valoarea prestabilit
fiind 1) cate demente din list sunt vizibile la un moment dat pe ecran (celelalte devenind vizibile
prin actionarea barei de derulare atasate automat listei).
Elementele unei liste de selectie sunt incluse in lista cu ajutorul etichetei <option>. Dou
atribute ale etichetei option se dovedesc utile:
1. Atributul "value" ce primeve ca valore un text care va fi expediat server-ului in perechea
"name=value"; dac acest atribut lipsete, atunci ctre server va fi expediat textul ce urmeaz dup
<option>;
2. Atributul "selected" (far alte valori) ce permite selectarea prestabilit a unui element al
listei.
Exemplu:
<html>
<body><H2>Un formular cu o lista de selectie</H2>
<hr>
Universitatea absolvita:<br><br>
<select
name="universitate"
size="3">
<option
value="B">
Universitatea
din
Cluj
<option value="UNBM" selected> Universitatea de Nord Baia Mare
<option value="UTT"> Universitatea Technica din Timisoara
<option value="UTB"> Universitatea Technica din Brasov
</select><br><br>
<input type="reset"> <input type="submit">
</form></body>
</html>
Cmpuri de editare multilinie
ntr-un formular, cmpurile de editare multilinie pot fi incluse cu ajutorul etichetei
<textarea>. Eticheta are urmtoarele atribute:
1. Atributul "cols ", care specifica numrul de caractere alitate ntr-o linie;
2. Atributul "rows ", care specifica numrul de linii affate simultan;
3. Atributul "name", care permite ataarea unui nume cmpului de editare multilinie;
4. Atributul "wrap", (de la "word wrap"= trecerea cuvintelor pe rndul urmtor), care
determina comportamentul cmpului de editare fat de sf!ritul de linie.
Acest atribut ("wrap") poate primi urmtoarele valori:
a) "off'; in acest caz:
- ntreruperea cuvintelor la marginea dreapt a editorului se produce numai cnd dorelle
utilizatomi;
- caracteral de sfirsit de linie este inclus in textul transmis servemlui o dat cu formulami;
b) "hard"-, in acest caz:
- se produce ntreruperea cuvintelor la marginea dreapt a editorului;
- caracterul de sfrit de linie este inclus in textul transmis serverului o dat cu formulami;
c) "soft"', in acest caz:
- se produce ntreruperea cuvintelor la marginea dreapt a editorului;
- nu se include caracterul de sfrit de linie in textul transmis serverului o dat cu formulami.
23
Exemplu:
<html>
<body><H2>Un formular cu un camp de editare multilinie</H2> <hr>
<textarea name="text multilinie" cols="30" rows="5" wrap="off">
Prima linie din textul initial.
A doua linie din textul initial. </textarea>
<input type="reset"> <input type="submit">
</form></body>
</html>
S are ina propus: la pagina Web creata din lucrarea precedent creati un formular, o lista
lerulan, o csuta de vali dare i un buton radio.
24

DEFINIREA TERMENULUI CSS SI UTILIZAREA LUI. CLASE DE
STILURI. STILURI INLINE. STILURI DEFINITE IN FIXIERE EXTERNE
Notili ni teoretice
Standardui CSS. Ce sunt stilurile
Stilurile pun la dispozitia creatorilor de site-uri web noi posibilitti de personalizare a
paginilor HTML. Un stil reprezint un mod de formatare exaet a unui bloc de text (spre exemplu
anumite caracteristici pentru font, mrime, culoare, aranjare in pagina, distantare fata de margini
etc).
Exist dou modalitti de a defini un stil
1. sintaxa CSS (Cascading Style Sheets);
2. sintaxa Javascript.
Terminologia CSS - Cascading Style Sheets - desemneaz "foi in stilul cascad". De ce "foi
in stilul cascad", vom vedea mai exact in continuare.
Toate stilurile utilizate pentru elementele HTML ale unei pagini web vor "cascada" intr-un
fier de stil virtual atit cuprinztor, in care precedente diferitelor tipuri de stiluri aplicate tagurilor din
pagin va fi urmatoarea (de la precedenza cea mai mic la precedenza cea mai mare):
Prima precedenza:
Stilul specificat in setrile Browserului (exemplu in IE: View -> Text Size -> Largest);
A doua precedent:
Stilul specificat in cadrai setrilor din fiierul de stil extern;
A treia precedent:
Stilul intern specificat in sectiunea HEAD a documentului HTML;
A patra precedent:
Stilul intern specificat in cadrul tagului curent.
Stiluri dedicate
Aceste stiluri se aplic blocurilor de text pentru care sunt definite i apelate pe loc. De
exemplu:
<H3 style= "text-align:right; color:#429EF7;">
In acest exemplu, stilul va determina toate titlurile H3 din paginile HTML care fac apel la
acest stil sa apar in browser in culoarea specificat i aliniate la dreapta.
Dac dorim ca acelasi stil sa fie utilizat de ctre mai multe elemente-tag (de ex. "H2", "H3",
"P" si "DIV"), atunci fie se utilizeaz o list cu aceste elemente (separate prin virgula) in sectiunea
<style>...</style> din header-ul documentului (delimitat de marcajele <HEAD>...</HEAD>),
asociindu-i-se elementele de stil comune, fie se va utiliza stilul in mod explicit in cadrul fiecrui tag,
ca mai sus.
Exemplu cu lista de stiluri in HEAD-er:
<style>
1
H2, H3, P {text-align:right; color:#429EF7;}
</style>
Exemplu cu Secare element de stil definit i apelat in cadrul tagurilor luate separat:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows1252">
<title>Stil dedicat inline</title>
</head>
<body>
<H2 style= "text-align:right; eolor:#429EF7;">text</H2>
<p style= "text-align:right; color:#429EF7;">text</P>
<H3 style= "text-align:right; color:#429EF7;">text</H3>
</body>
25
Clase de Stiluri
Clasele de stiluri permit defmirea unui stil general (aplicabil in mai multe locuri in cadrul
aceleiasi pagini sau in pagini diferite) in vederea inserrii lui oriunde este necesar printre intermediul
unei simple referiri. Sa presupunem c dorim sa definim o clas de stiluri "clasa-mea" (pe care dorim
sa o aplicam anumitor portiuni de text pentru a le face sa apar de culoare verde i aliniate la stinga).
Vom utiliza in acest sens blocul <style>...</style>, aflat la rndul su in interiorul blocului
<head>...</head> (reprezentind head-erul documentului HTML). Vom realiza ceea ce ne-am propus
in felul armato r:
<style>
all.clasa-mea {text-align:left; color:green;}
</sty le>
Cuvintul standard "all aflat in fata clasei de stiluri "clasa-mea" indica faptul c aceast
clas este aplicabila tuturor blocurilor de text, atunci cind este necesar. Practic clasa de stiluri "clasamea" poate fi asociat tuturor tagurilor HTML care opereaz cu text (ca de exemplu: H2, H6, P,
DIV, etc...) utilizind in interiorul fiecarui tag vizat o referire explicit la aceasta clasa: <TAG
class=clasa-mea>.
Aadar, daca dorim sa aplicam aceasta clas de stiluri unui titlu de ordinul 3 (specificat in
codul HTML prin tagul H3), atunci scriem:
<H3 class=clasa-mea> Acesta este un header de marime 3, aliniat la stanga si
de culoare verde </H3>
Dup cum s-a vzut, pentru apelarea unei clase de stiluri in vederea aplicrii sale elementului
tag curent se folosete atributul "class" avind ca valoare numele clasei de stil. Impreun cu
specificatia "all" din defmirea clasei de stiluri, atributul "class" devine un atribut universal, adic va
putea fi asociat tuturor tagurilor HTML crora li se poate aplica (in acest caz celor care opereaz cu
text).
Observatii:
In interiorul unui bloc <style>...</style>, comentariile sunt blocuri delimitate de /* si */
(ca i in C, C++, Java si Javascript).
Dac dorim ca o clas de stiluri s fie aplicabil numai pentru anumite elemente ale
documentului (spre exemplu pentru paragrafele de text desemnate prin marcajul de paragraf "p"),
atunci in constructia clasei va aparea acest element (de exemplu "p.clasa-mea-2").
Exemplu:
<html>
<head><title>Clase de stiluri dedicate</title>
<style> p.clasa-mea-2 {text-align:left; color:green;} </style>
</head>
<body> <p>Acesta este un paragraf normal
<br> <p class=clasa-mea-2>Acesta este un paragraf aliniat la stanga si de
culoare verde
1
</body>
</html>
Stiluri Identificate
Absolut toate elementele tag ale unui document HTML admit un atribut universal numit
"id". Acest atribut "id" poate identifica prin valorile sale stilul utilizat de un tag HTML.
Pentru a utiliza un stil "identificat" procedm astfel:
1. in blocul <style>...</style> introducem defmitia stilului conform sintaxei:
<style>
#rosu {color: red}
</style>
2. In elementul (tagul) in care dorim utilizarea local a acestui stil, folosim atributul "id" care
primete ca valoare numele identificator al stilului defmit anterior. Exemplu:
<p id="rosu">Acesta este un paragraf de text de culoare rosie</p>
26
Dac dorim ca un stil "identificat" sa fie aplicabil numai pentru anumite elemente aie
documentului (de exemplu "H3"), atunci n constructia (definitia) identifieatorului de stil va aparea
acest element (aici "H3"), ca n exemplul urmtor:
<html>
<head>
<title>Pagina eu stil identificat</title>
<style>
H3#rosu {color:red; text-align:center;}
</style>
</head>
<body>
<H3 id=rosu>Acesta este un header de marime 3, centrt si de culoare
rosie</H3>
</body>
</html>
Stiluri Inline
Stilurile in-line sunt acele stiluri definite chiar n eticheta HTML (marcajul) ce initiaz
blocul n care dorim sa se aplice aceste stiluri. Adic sunt ceea ce, la precedentele sectiuni dedicate
standardului CSS, am dfinit ca stil n interiorul tagurilor H2, P, etc...
Dupa cum am vzut deja, pentru a dfini stiluri inline se utilizeaz atributul universal "style"
(comun practic tuturor etichetelor ce apar ntr-un document HTML). n continuarea cruia apare
semnul gal, dupa care, ntre ghilimele, urmeaz definirea stilului, practic valoarea atributului
"style".
Valoarea data atributului "style" este toemai descrierea stilului, cuprins nu ntre acolade
{..} (ca la definirea in HEAD sau n fixerai CSS extern - dupa cum vom vedea), ci ntre ghilimele
(dupa cum am artat i din exemplele anterioare).
Concret:
<H3 style= "colorired; text-align: center;">Acest header are marimea 2, este
de culoare rosie si se pozitioneaza in pagina centrt.</H3>
Dac dorim utilizarea unui anumit stil pentru un fragment de text, atunci includem acest text
ntr-un bloc eu ajutorul delimitatorilor <span>...</span>, dupa care putem utiliza atributul "style",
n cadrul etichetei <span>, inline:
<html>
<head>
<title>Pagina HTML eu stil inline</title>
</head>
<body><H3>Titlu de marime 3</H3>
<span style="size: 15pt; align=center; color:green;">
Acesta este un text eu corpul de litera de dimensine 15 puncte, aliniat pe
centru si de culoare verde.
1
</span>
</body>
</html>
Stiluri n Fisiere Externe
Stilurile definite n interiorul unui bloc <style>...</style> pot fi transferate ntr-un fiier
extern existnd astfel posibilitatea asocierii lor mai multor filiere HTML.
Pentru a utiliza un stil dfinit ntr-un fiier extern se procedeaz astfel:
1. Se creaz un fiier care sa confina numai descrierea stilurilor i se salveaz eu extensia
".css". Continutul acestui fiier coincide eu continutul unui bloc <style>...</style>, far ca aceti
delimitatori sa fie includi.
2. n fiierul HTML care utilizeaz stilurile definite n fisierul crt la punctul 1, se include n
blocul <head>...</head> o etichet <link>, avnd trei atribute:
-atributul "rei" eu valoarea "stylesheet";
27
- atributul "type cu valoarea "text/css".

- atributul "href avnd ca valoare adresa URL a fiierului crt la punctul 1;
Stilurile definite din fiierul CSS extern se activeaz ca i cum ar fi stiluri definite in fiierul
HTML curent intr-un bloc <style>...</style>.
Iat nn fiier HTML eu un CSS extern:
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows1252">
<LINK REL= "stylesheet" TYPE= "text/css" HREF= "stil.css">
<title>Pagina de text stilizat</title>
</head>
<body>
<H2>Acesta este text formatat ca Header 1</H2>
<p>Acesta este un paragraf</p>
<H3>Acesta este text formatat ca Header 2, urmat de un tabel</H3>
<table width=" 100%" border="l">
<tr>
<th align="left">Nume</th>
<th align="left">Prenume</th>
<th align="left">Telefon</th>
<th align="left">E-mail</th>
</tr>
<tr>
<td width="25%">Popescu</td>
<td width="25%">Valentin</td>
<td width="25%">4433978</td>
<td width="25%">popescu@yahoo.com</td>
</tr>
<tr>
<td width="25%">Ionescu</td>
<td width="25%">Mihai</td>
<td width="25%">5599786</td>
<td width="25%">ionescu@yahoo.com </td>
</tr>
</table>
<br>
<h3>Acesta este un text formatat ca Header 3, urmat de 2 liste:</h3>
<ol>
*
<li>Date personale student;</li>
<li>Calificari student;</li>
<li>Program zilnic:</li>
</ol>
<ul>
<li>Program dimineata</li>
<li>Pauza de masa</li>
<li>Program dupamiaza</li>
</ul>
</body>
</html>
Fiierul CSS asociat (plasat in acelasi director) cu fiierul HTML de mai sus, este:
28
H2,H3,h3
{
color:#483d8b;
font-family: "lucida calligraphy", "arial";
}
p, table, li
{
font-family: "lucida calligraphy", "arial";
margin-left: 1 Opt;
}
body
{
background-color:#fffafO;
}
li,p,th,td
{
font-size: 80%;
}
table {border-style:outset}
li {list-sty le : square;)
Mentiune suplimentar
n cazul n care, dintr-un fixier HTML se face o referire la un fixier CSS care ns lipsete,
atunci fiierul HTML va fi afiat n browser far elementele de stilizare, exact aa cum ar arta dac
stilizrile nu ar fi existt.
Pseudo Clase de Stiluri
Pseudoclasele se utilizeaz pentru personalizarea legturilor web, att de tip text, ct de tip
imagine. Eie se definesc n interiorul unui bloc <style>...</style> sau ntr-un fiier extern. Exemplul
de mai jos este edificator n acest sens:
a: link {color: blue; font-size: 15pt;}
a: hover {color: red; font-style: italic; text-decoration: none}
a: visited {color: magenta; font-size: 15pt; text-decoration: none}
a: active {color: cyan; font-size: 15pt; text-decoration: none}
Explicatii:
a: link se refera la modul n care arta un link n mod normal;
a: hover se refera la modul n care arta un link atunci cnd se trece cu mouse-ul peste el
(on Netscape functioneaz doar de la varianta 6);
a: active se refera la modul n care arta un link atunci cnd se efectueaz click pe el;
a: visited se refer la modul n care arta un link deja vizitat;
specifieatia "text-decoration: none" elimin sublinierea implicita eu o linie albastr a
link-ului.
Pentru ca numai anumite legturi s utilizeze un stil, se pot foiosi urmtoarele trei
metode:
1. a: link.CLASAl {...} combinat cu <a class = CLASA1 href=" "> ...</a>
2. a: link#IDl {...} combinat cu <aid = IDI href=" "> ...</a>
3. a.CLASAl: link {...} combinat cu <aclass = CLASAI href=" "> ...</a>
Chestiune Auxiliar
n browsere cursorul mouse-ului are n generai o form simpl i binecunoscut, lund pe
parcursul vizionrii paginii respective maximum dou infatiri diferite:
Mna - atunci cnd este pozitinat pe o legatura
Sgeata oblic din directia dreapt jos spre stnga sus - atunci cnd este pozitionat pe alt
obiect
dect
o
legatura.
29
Acestea sunt insa formele implicite. Exista insa i cazuri in care am dori ca acel cursor sa ia o
alta forma decit cele doua predefinite. La fel ca multe alte probleme care privesc modul in care arata
o pagina, i aceasta problema ii gasete rezolvarea in folosirea CSS ca limbaj de descriere a
modului de stilizare a unui document.
Proprietatea care manipuleaza forma cursonalm se numete simplu: "cursor" i poate fi
introdusa in orice element "style" al unui tag html.
De exemplu, pentru obtinerea unei imagini a cursorului de tipul unei sageti insotite de un
semn de intrebare la trecerea mouse-ului peste un link, iata codul care va trebui folosit:
<a href="fiier.html" style="cursor: help">Legatura</a>
Sarcina propusa: la pagina Web creata din lucrarea precedents, adaugati citeva stiluri CSS.

EVENIMENTE SI FUNCTII. IERARHII, FERESTRE CADRU N
JAVASCRIPT
Notiuni teoretice
Inserarea JavaScript in documentele HTML
Codul JavaScript poate fi introdus direct in pagina HTML. Pentru a vedea cum functioneaz
JavaScript, haideti s ne aruncm privirile peste un exemplu simplu:
<html><head><title>Pagina HTML cu JavaScript</title></head>
<body>
<br><p>
Acesta este un document HTML continand JavaScript.
</p>
<script language=" JavaScript">
document.write("Acesta este JavaScript!")
</script>
<br><p>
Din nou text si cod HTML.
<p></body>
</html>
La prima vedere acest bucata de cod arat ca un fiier HTML normal. Singura noutate
constituie blocul <script>...</script>:
<script language^"JavaScript">
document.write("Acesta este JavaScript!")
</script>
Acesta este JavaScript-ul nostru! Pentru a observa modul de functionare a scriptului vom
salva codul HTML de mai sus ca i fiier normal HTML lansind pagina HTML astfel salvata in
browserul nostru cu suport JavaScript. Dac browserul suport JavaScript vom vedea 3 linii:
Acesta este un document HTML continand JavaScript.
Acesta este JavaScript!
Din nou text i cod HTML.
Este adevrat c acest script extrem de simplist nu este unul folositor - acelai rezultat il
puteam obtine uznd de cod HTML mult mai simplu. Am dorit numai s exemplificm utilizarea
tagului <script>. Tot ce este ntre eticheta <script> i eticheta </script> este interprtt drept cod
JavaScript. Putem observa folosirea document.write() - una dintre cele mai importante comenzi in
programarea JavaScript. "Document.write()" este rutina JavaScript folosit pentru a serie text,
imagini, etc... ntr-un document (in acest caz in documentul HTML curent). Aadar, micul nostru
program JavaScript serie textul "Acesta este JavaScript!" n documentul HTML in care a fost insrt.
Evenimente
Evenimentele sunt foarte importante n programarea JavaScript. Evenimentele sunt de cele
mai multe ori declamate de actiuni ale utilizatorului. Dac utilizatomi apas un buton, un eveniment
de tip "Click" are loc. Dac mouse-ul este deasupra unei legturi, atunci un eveniment de tip
"MouseOver" are loc.
Dorim ca programul JavaScript s reactioneze la unele evenimente. Aceasta se poate realiza
cu ajutorul managerilor de evenimente sau gestionarilor de evenimente - "event-handlers". Un buton
poate creea fereastr atunci cnd este apsat. Aceasta nseamn c fereastra apare ca reactie la
evenimentul "Click". Manageral de evenimente (event-handler-ul) pe care trebuie s-1 utilizm este
numit "onClick". Acesta spune brwoser-ului computemlui utilizator ce s fae atunci cnd
evenimentul are loc. Urmtorul cod este un exemplu simplu de "event-handler onClick":
<form>
<input type="button" value="Click me" onClick="alert('Yo')">
</form>
31
Functii
Vom utiliza functii in cea mai mare parte a programelor noastre JavaScript. De aceea vom
explora subiectul nc din aceast sectiune. Functiile sunt metod profesional de a lega mai multe
comenzi impreun. S scriem un script care furnizeaz un anumit text de trei ori consecutivi
<script language="JavaScript">
<!-- hide
document.write("Bine ai venit pe pagina mea!<br>");
document.write("Acesta este JavaScript!<br>");
// ->
</script>
Acest script, introdus ntr-un document HTML, va serie de trei ori:
Bine ai venit pe pagina mea!
Analiznd codul surs observm c scriind de trei ori comanda ajungem la rezultatul scontat.
Dar este eficient? Nu, deci haidet sa rezolvm problema mai simplu. Ce spuneti de codul urmtor
care face acelai lucru:
<html><head></head>
<body></body>
<!-- hide
function myFunction() {
}
myFunction();
myFunction();
myFunction();
// ->
</script>
<body></body>
</html>
In scriptul din sectiunea BODY a documentului HTML de mai sus am defmit i apelat
functie. Defnirea s-a realizazt cu urmtoarele linii de cod:
function myFunction() {
document.write("Acesta este javascript!<br>");
}
Comenzile din interiorul {} tin de implementarea functiei myFunctionQ. Aceasta nseamna
c ambele comenzi "document.write()" vor fi executate prin apelarea functiei. In exemplul nostra
avem trei apelri ale functiei. Putem observa c am scris MmyFunction()" de trei ori imediat sub
definitia functiei. Acestea sunt trei apelri ale functiei si au rolul de a face ca functia s fie executat
de trei ori. Rezultatul executiei este:
32
JavaScript - Ierarhii
JavaScript organizeaz toate elementele unei pagini web ntr-o ierarhie de obiecte. Practic
toate elementele sunt vzute ca obiecte. Fiecare obiect are anumite proprietti i metode prin care
poate fi manipulat. Cu ajutorul JavaScript putem lucra eu uurint cu obiectele componente ale unei
pagini web. Pentru a putea face acest lucru este foarte importants intelegerea ierarhiei obiectelor
HTML. Vom intelege mai bine mecanismul de functionare printr-un exemplu. Codul urmtor este
pagin HTML simpl:
<html>
<head>
<title>Pagina mea</title>
</head>
<body bgcolor=#ffffff>
<center>
<img border="0" src="../../images/search_logo.gif" width="225"
height="85">
</center>
<P>
<center>
<form name="Formular">
Nume:
<input type="text" name="nume" value=""><br>
E-mail:
<input type="text" name="email" value=""><br><br>
<input type="button" value="Trimite" name="Trimitere"
onClick="alert('activare trimitere')">
</form>
</center>
</p>
<p>
<center>
<img
border="0"
src="../../images/linie.gif"
width="207"
height="
1
l"><br>
</center>
</p>
<center>
<a href="http://www.afaceri-online.net">Pagina demo</a>
</center>
</body>
</html>
Iat imagine a paginii (am adugat citeva adnotatii eu culoarea rosie):
33
34
Avem dou imagini (sigla i bara de jos), o legatura ("Pagina de inceput") i un formular eu
dou cmpuri text (Nume / E-mail), respectiv un buton (Trimite). Din punctul de vedere al
mecanismelor JavaScript, fereastra browserului este un obiect "window". Acest obiect (fereastra
browser asimilat i ca fereastra principal) contine unele elemente ca, de exemplu, bara de stare
(status bar) din partea cea mai de jos a ferestrei browserului. In interiorul ferestrei principale putem
ncrca un document (pagin) HTML (sau un fier de alt tip - ne vom limita pentru moment la
filiere de tip HTML). Aceast pagin odata ncrcat este atadar un obiect document. Aceasta
nseamn c obiectul document este chiar pagina HTML ncrcat la un anumit moment n browser.
Obiectul document este un obiect foarte important n JavaScript - se folosete extrem de frecvent. O
proprietate a obiectului document este, de exemplu, culoarea de fundal a paginii. Mai important este
faptul c toate obiectele HTML sunt proprietti aie obiectului document. Un obiect HTML este, spre
exemplu, o legatura sau un formular, ca n cazul ilustratiei noastre.
Dorim acum s obtinem informatiti despre obiecte i s manipulm aceste obiecte.
Pentru a putea face acest lucru trebuie s putem accesa diferite obiecte n cadrai ierarhiei.
Putem vedea numele obiectelor n imaginea de mai sus a ierarhiei. Dac dorim s adresm prima
imagine din pagina HTML trebuie s ne uitm n ierarhie. Vom ncepe intotdeauna eu nivelul cel
mai de sus. Primul obiect (nivelul 0) este denumit document. Prima imagine este reprezentat prin
images[0], fiind situat pe nivelul 1 (imediat inferior). Aceasta nseamn ca putem accesa acest
obiect particular prin intermediul unui apel JavaScript eu ajutoral sintaxei: document.im a ges[0].
Dac, de exemplu, dorim s ?tim ce introduce utilizatoral n al doilea cmp din formular,
trebuie s accesm acest obiect. Din nou pomim din varful ierarhiei. Urmrim calea pn la obiectul
numit elements[l] specificnd toate obiectele intermediare pe masura ce le depim. Aceasta
nseamn c putem accesa primul element (elements[l]) prin apelul:
document.forms[0].elements[l]
Putem afla si ce text a fost introdus? Desigur, ns pentru a ti ce metode i proprietti ofer
obiectul, va trebui s cercetm eu atentie documentatia JavaScript (ne referim att la documentatia de
la Netscape ct i la alte documentatii bune aprute pe piat - 3 astfel de documentatii fiind oferite de
site-ul Afaceri-Online ca anex la cartea electronic "Java, JavaScript Profesional"). Mentionm
n cazul exemplului nostra faptul c n referinte vom putea constata c un element text are
proprietatea value. "Value" este practic textul introdus n elementul text. Putem citi aceast valoare
eu ajutoral urmtoarei linii de cod:
name= document.forms[0].elements [1].value;
irul este nmagazinat n variabila name. Putem de acum ncolo s lucrm eu aceast
variabil.
JavaScript - Ferestre Cadru
O ntrebare freevent este cum interactioneaz frame-urile (cadrele) si JavaScript. Mai nti
trebuie s explicm ce sunt frame-urile i la ce pot fi folosite. Fereastra browserului poate fi
mprtit n mai multe frame-uri (cadre, ferestre). Aceasta nseamn c un frame reprezint o parte
din suprafata ferestrei browserului. Fiecare cadru (frame) ncarc n el un document (de cele mai
multe ori de tip HTML). De exemplu putem creea dou cadre astfel: n primul Trame putem ncrca
pagina de deschidere a site-ului Netscape iar n cel de-al doilea, pagina principal a site-ului
Microsoft.
Dei crearea de frame-uri este o problem HTML, dorim s descriem n cele ce urmeaz
cteva lucruri de baz. Pentru crearea de cadre se folosesc dou taguri: <frameset> i <frame>. O
pagin HTML care creaz dou frame-uri poate arta astfel:
<html>
<frameset rows="50%,50%">
<frame src="pagel .htm" name="framel ">
<frame src="page2.htm" name="frame2">
</frameset>
</html>
Aceast seevent de cod produce dou frame-uri. Remarcm utilizarea propriettilor "rows"
n tagul FRAMESET. Aceasta nseamn c cele dou cadre create cu tagul FRAME se afl unul
35
deasupra celuilalt. Frame-ul de sus ncarc pagina HTML "pagel.htm" iar frame-ul de jos prezinta
documentul "page2.htm".
Dac dorim s avem coloane in loc de rnduri trebuie s scriem "cols" in loc de "rows"
nuntrul tagului FRAMESET. Partea " 5 0 % ,5 % " specifica in procente ecran ct de mari sunt cele
dou ferestre. Putem de asemenea sa scriem "50%,*" dac nu dorim s calculm cit de larg
trebuie s fie cea de-a doua fereastr pentru a ajunge la 100% din spatiul rmas. Putem de asemenea
specifica dimensiunea in pixeli omitind simbolul %.
Ficcare frame are un nume unie specificat cu ajutorul atributului "name" din eticheta
<frame>. Acest atribut ne va ajuta s accesm frame-urile cu ajutorul JavaScript.
Iat un exemplu:
<frameset cols="50%,50%">
<frameset rows="50%,50%">
<frame src="cell.htm">
</frameset>
<frameset rows="33%,33%,33%">
</frameset>
</frameset>
Putem fixa dimensiunile marginii prin intermediul propriettii (atributului) "border" din
icheta <frameset>. "Border=0" inseamn c nu vom avea margine la cadra (atributul nu
mctioneaz cu Netscape 2.x).
Frame-urile i JavaScript
Acum putem s ne dm seama cum vede JavaScript frame-urile intr-o fereastr a
:owserului. Pentru aceasta vom utiliza cele 2 cadre create in primul exemplu.
Am vzut c JavaScript organizeaz toate elementele de pagin intr-o ierarhie. Aceasta
pastreaz i pentru frame-uri. Urmtoarea imagine arat ierarhia aferent primului exemplu:
parent
browser
win
dow
framel
pagel.htm
fratne2
pags2.htm
1 children
In varful iererhiei este fereastra browser. Aceast fereastr este imprtit in dou frame-uri.
ereastra mare (implicita) a browserului este "printe" in aceast ierarhie iar cele dou frame-uri
mt "copiii". Putem s dm celor dou fram-euri numele "framel" si "frame2". Cu ajutorul acestor
urne putem schimba informatii ntre cele dou frame-uri.
JavaScript - Crearea Ferestrelor
Deschiderea automata a unei noi ferestre de browser este una dintre propriettile deosebite
e JavaScript. Putem s incarcm in noua fereastr fie un document deja creat (de exemplu un
miment HTML de pe server), fie putem crea si incrca un document nou. In cele ce urmeaz vom
;dea cum putem deschide o nou fereastr i ncarc o pagin HTLM existent in aceast fereastr.
Urmatorul script deschide o nou fereastr browser i ncarc o pagin oarecare:
<html>
<head>
<!-function openWinQ {
36
myWin= open("fereastra.htm");
}
// ->
</script>
</head>
<body>
<form>
<input type="button" value=Deschide fereastra noua" onClick="openWin()">
</form>
</body>
</html>
Pagina "fereastra.htm" este ncreat n noua fereastra prin intermediul metodei "openO"
Putem contrla modul n care apare noua ferestr. De exemplu fereastra poate avea o bar de
are, o bar de instrumente sau o bar de meniuri. Urmtorul script deschide o noua fereastra care
e dimensiunile 200x300. Fereastra nu va avea o bar de stare sau o bar de instrumente dar va avea
bar de meniuri.
<html>
<head>
<!
function openWin2() {
myWin= open("fereastra.htm", "displayWindow",
"width=200,height=300,status=no,toolbar=no,menubar=yes");
}
// ->
</script>
</head>
<body>
<form>
<input type="button" value="Open new window" onClick="openWin2()">
</form>
</body>
</html>
Se poate eu uturint constata faptul c specificm propriettile n irul:
width=200,height=300,status=no,toolbar:=no,menubar=yes
Observm de asemenea c nu trebuie folosite spatii n acest ir!
Iat o list a propriettilor (mpreun eu domeniul de valori) pe care o fereastr le poate avea:
directories
height
yes / no
number of pixels j
location
yes / no
menubar
yes / no
resizable
yes / no
scrollbars
yes / no
status
toolbar
width
alwaysLowered
! ti
yes / no
yes / no
number of pixels j
yes / no
37
alwaysRaised
yes / no
dependent
yes / no
hotkeys
yes / no
inner Width
number of pixels ;
innerHeight
number of pixels I
outerWidth
number of pixels \
outerHeight
number of pixels
screenX
position in pixels \
screenY
position in pixels
titlebar
yes / no
z-lock
yes / no
Sarcina propus: la pagina Web creat din lucrarea precedent inserati JavaScript
Lucrarare de laborater Nr. 10

JAVASCRIPT 1 BARA BE STARE. OBIECTE PREDEFINITE.
VALID ARE DATE N FORMULARE HTML. CREAREA FIIERELOR
ANIMATE N PAGINI WEB
Notiimi teoretice
?
JavaScript - Bara de Stare

Programele JavaScript pot fi scrise in bara de stare a browserului - acea bara din partea
de jos a ferestrei de browser. Tot ce aveti de facut este s dati o valoare- siri ni "window.status".
Urmtorul exemplu creaz dou butoane care pot fi folosite pentru a serie un text oarecare pe bara de
stare iar apoi pentru stergerea acestui text.
Scriptul arata astfel:
<html>
<head>
<!-- hide
function statbar(txt) {
window.status = txt;
}
// ->
</script>
</head>
<body>
<form>
<input type="button" name="look" value="Write! "
onClick="statbar('Salut! Aceasta este bara de stare!');">
<input type="button" name="erase" value="Erase! "
onClick="statbar(");">
</form>
</body>
</html>
Creem un formular cu doua butoane. Ambele butoane apeleaz functia "statbar()". Putem
vedea c apelarea functiei - initiat de apsarea butonului "Serie!" - arata astfel:
statbar('Salut! Aceasta este bara de stare!');
In interiorul parantezelor specificm sirul "Saluti Aceasta este bara de stare!", ceea ce
nseamn c sirul este trimis functiei statbarQ. Am definit functia "statbar()" astfel:
function statbar(txt) {window.status=txt;}
Ceea ce aduce nou exemplul de fat este folosirea "txt" in interiorul parantezelor din
declararea functiei. Aceasta nseamn ca irul pe care il transmitem este inmagazinat ntr-o variabili
"txt".
Transmiterea valorilor ctre functii este deseori folosit pentru a face functiile mai flexibile.
Putem transmite mai multe valori functiilor - trebuie doar s le separm prin virgule, irul "txt" este
afiat pe bara de stare prin intermediul window.status=txt". Stergerea textului de pe bara de stare se
face prin definirea unui sir gol pentru "window.status".
Afiarea textului pe bara de stare poate fi usor utilizata in combinatie cu legturile hipertext.
n loc ca bara de stare s alseze locatia web a paginii din link, este posibil ca pe bara de stare s
avem o descriere a paginii. Acest link demonstreaz chiar asta - este de ajuns s pozitionm cursorul
deasupra legturii pentru ca mesajul din bara de stare s devin "Don't click here!". Codul pentru
acest exemplu arat astfel:
<A onmouseover= "window.status='Don\'t click here!'; return true;"
onmouseout= " window. status=";"
hr ef=" http://www.afaceri-online.net"> Ac est link</A>
Aici utilizm onMouseOver fi onMouseOut pentru a detecta cnd pointerul mouse-ului trece
pe deasupra legturii (linkului).
39
JavaScript - Obiecte Predefinite

Java Script ne permite sa folosim citeva obiecte predefinite. Acestea sunt, de exemplu,
obiectele Data (Date), Matrice (Array) sau Matematic (Math). Exista i alte obiecte - putem apela
documentatia oferita de Netscape pentru informatii complete.
Vom examina obiectul "Date"
Dupa cum sugereaza i numele, acest obiect ne permite sa lucram cu data si ora din
calculator putind cu uurinta, spre exemplu, sa calculam cite zile au mai ramas pina la Craciunul
urmator. Sau putem adauga ora exacta documentului nostru HTML.
Sa incepem cu un exemplu care afieaza ora exacta. Trebuie creeat mai intii un nou obiect de
tip "Date". Petru aceasta folosim un nou operator. Sa fim putin atenti la urmatoarea linie de cod:
today=new Date()
Aceasta creeaza un nou obiect de tip "Date" - "today". Daca nu specificam o anumita data i
>ra cind cream un nou obiect "Date", atunci data i ora existente vor fi cele folosite. Acasta inseamna
a dupa executarea "today=new Date()", noul obiect Date - "today" va reprezenta data i ora din
nomentul prezent.
Tipul Date ofera citeva metode care pot fi folosite cu obiectul "today"
Se pot folosi getHoursO, setHours(), getMinutes(), setMinutesQ, getMonthf), setMonth() i
aa mai departe.
Sa observam ca obiectul de tip "Date" reprezinta numai o data sau o ora "statica". Nu este
vorba de un ceas care arata trecerea fiecarei secunde sau milisecunde automat. Pentru a obtine o
noua data i o noua ora trebuie folosita o alta construetie (este vorba de tipul "Date" apelat printr-un
nou operator in momentul constructiei obiectului):
todays new Date(1997, 0, 1, 17, 35, 23)
Aceasta secventa de cod va creea un obiect Date cu proprietatile "Ianuarie 1997, ora 17:35 i
23 secunde". Deci trebuie specificata data i ora dupa tiparul:
Date(year, month, day, hours, minutes, seconds)
Observam ca trebuie sa folosim "0" pentru Ianuarie - i nu "1", aa cum am fi putut
presupune. "1" este folosit pentru Februarie, 2 pentru Martie .a.m.d.
Acum putem realiza un script care sa fumizeze data si ora actuala. Rezultatul ar arata astfel:
Time: 21:55
Date: 12/8/3903
Codul arata astfel:
<!-- hide
now= new DateQ;
document.
write("Time:
"
+
now.getHours()
+
+
now.getMinutes()
+
"<br>");
document.write("Date: " + (now.getMonth() + 1) + "/" + now.getDate() + "/"
+
1
(1900 + now.getYear()));
II ->
</script>
Aici trebuie sa folosim metode ca getHours() pentru a afia data i ora specificate in obiectul
de tip "Date". Putem observa ca am adaugat 1900 anului. Metoda get Year() retumeaza numarul
anului incepind cu 1900. Aadar, daca anul prezent ar fi 1997 metoda va retuma 97; daca anul
prezent ar fi 2010 va retuma 110 - nu 10! Daca adaugam 1900 scapam de problema anului 2000.
Acest script nu verifica daca numarul minutelor este mai mic decit 10 pentru a-1 afisa corespunzator,
in formatul ":0x". Aceasta inseamna ca s-ar putea obtine ceva sub forma 14:3 care de fapt inseamna
14:03. Vom vedea in urmatorul exemplu cum se poate rezolva aceasta problema.
Sa aruncam aa dar o privire asupra unui script care afiteaza un ceas functional:
<html>
<head>
40
<script Language=" JavaScripr v

<!-- hide
var timeStr, dateStr;
function clock() {
now= new Date();
// time
hours= now.getHours();
minutes= now.getMinutes();
seconds= now.getSeconds();
timeStr= "" + hours;
timeStr+= ((minutes < 10) ? ":0" : ":") + minutes;
timeStr+= ((seconds < 10) ? ":0" : ":") + seconds;
document.clock.time.value = timeStr;
// date
date= now.getDate();
month= now.getMonth()+l ;
year^ now.getYear();
dateStr= "" + month;
dateStr+= ((date < 10) ? "/0" : 7") + date;
dateStr+= "/" + year;
document.clock.date.value = dateStr;
Timer= setTimeout("clock()",l 000);
}
// ->
</script>
</head>
<body onLoad="clock()">
<form name="clock">
Time:
<input type="text" name="time" size="8" value=""><br>
Date:
<input type="text" name="date" size="8" value="">
</form>
</body>
</html>
Folosim metoda setTimeoutf) pentru a stabili ora i data n fiecare secund. Deci creem n
fiecare secund un nou obiect de tip "Data" cu ora exacta.
Putem vedea c functia ClockQ este apelat de un "onLoad event-handler" n tagul <body>.
In partea de continut a paginii HTML avem doua elemente de text. Functia "clock()" serie data i ora
n aceste doua elemente n formatul corespunztor. Putem vedea c folosim doua iruri n acest scop:
"iimeSr" i "dateStr". Am afirmat mai devreme c exist o problem cu minutele mai mici de 10 1
acest script o rezolv cu ajutorul urmatoarei linii de cod:
timeStr+= ((minutes < 10) ? ":0" : ":") + minutes;
Aici numrul de minute este adugat sirului "timeStr". Dac numrul minutelor este mai mie
de 10 trebuie s adugm 0. Dei codul acesta poate prea straniu, l putem serie si n modul de mai
jos care 1-ar putea face s par mai familiar:
if (minutes < 10) timeStr+:= ":0" + minutes
else timeStr+= + minutes;
Validarea Datelor din Fornralarele HTML
Formuilarele (Forms) sunt foarte des ntlnite pe Internet. Datele introduse n formular
(input) sunt de rgula trimise ctre server sau prin posta electronic spre un cont de e-mail. Dar
putem fi siguri c datele intoduse de ctre utilizator n formular pentru a fi trimise sunt si corecte?
Cu ajutorul JavaScript datele introduse ntr-un formular pot fi cu uurint verificate mainte de a fi
41
transmise prin Internet. Dorim sa demonstrm n aceast sectiune cum pot fi formularele verificate
(validate).
Mai nti sa crem un script simplu. Formulami din pagina HTML va contine 2 cmpuri
text. Utilizatomi trebuie sa introduca numele n primul cmp i adresa de email n cel de-al doilea.
Putem introduce orice n formular i apoi avem grij sa apsm butonul de trimitere. De asemenea
putem ncerca sa nu introducem nimic i sa apsm butonul.
Codul este urmtorul:
<FORM name=first>Introduceti numele dumneavoastra:<BR><INPUT
name=textl>
<INPUT onclick=testl(this.form) type=button value="Test Input"
name=buttonl>
<P>Introduceti adresa dumneavostra de email:<BR><INPUT name=text2>
<INPUT onclick=test2(this.form) type=button value="Test Input"
name:=button2>
</P></FORM>
Rezultatul este urmtorul:
Introduceti numele dumneavoastra:
Introduceti adresa dumneavostra de email:
In cazul primului element de formular se va retuma un mesaj de eroare dac nu este nimic
introdus. Desigur, acest tip de verificare ns nu mpiedic utilizatomi sa introduca un nume fictiv!
Browseral accept si numere. Aa c dac veti introduce "17" va fi returnat mesajul "Hi 17!". Se
pare ca nu este cel mai bun mod de verificare.
Cel de-al doilea element de formular este mai sofisticat. incercati sa introduceti un ir
simplu - numele dumneavostr de exemplu - in csut pentru e-mail. Nu o sa treac testul (dect dac
afi avea caracterul in numele dumneavostr). Criteriul de baz pentru a accepta datele introduse
ca i adresa de e-mail este c aceste date trebuie s contin caracterul Un sigur "@" ajunge dar,
desigur, nu este o conditie suficient ci numai necesar. Toate adresele de e-mail contin aa
c este normal s cutm in adresa (printre aitele).
Cum arata scriptul pentru aceste dou demente? Iat-1:
<html>
<head>
<!-- Hide
function testi (form) {
if (form.textl .value ==:: "")
alert("Please enter a string!")
else {
alert("Hi "+form.textl,value+"! Form input ok!");
}
}
function test2(form) {
if (form.text2.value == "" ||
form.text2.value.indexOf('@', 0) == -1)
alert("No valid e-mail address!");
else alert("OK!");
}
// ~>
</script>
</head>
<body>
<form name="first">
Enter your name:<br>
42
<input type"tcxt" name="textl ">

<input type="button" name="buttonl " value="Test Input"
onClick="testl (this, form) ">
<P>
Enter your e-mail address:<br>
<input type="text" name="text2">
<input type="button" name="button2" value="Test Input"
onClick="test2(this.form)">
</body>
</html>
Mai nti s ne uitm putin la codul HTML din corpul documentului. Este vorba doar de
crearea a dou elemente text si dou butoane. Butoanele apeleaz functiile testi (...) sau test2(...) n
functie de ce buton este apsat. Transmitem this.form ctre functii pentru a adresa elementele din
functii.
Functia testi (form) verific dac irul este gol. Aceasta se realizeaz prin intermediul
secventei "if (form.textl.value == "")...", "form" fiind variabil care primete valoarea
"this.form". Putem obtine valoarea elementului introdus prin folosirea "value" in combinatie cu
"form.textl". Pentru a vedea dac irul este gol l comparm cu " ". Dac datele introduse sunt egale
eu " " atunci nu a fost introdus nimic. Utilizatomi va primi un mesaj de eroare. Dac ceva este
introdus, utilizatomi va primi un mesaj OK.
Problema care poate aprea aici este c utilizatomi poate introduce numai spatii. Acestea sunt
consemnate ca un input valid! Dac doriti, puteti verifica aceste posibilitti si s le excludeti.
Credem c este destul de simplu tinnd cont de restrictiile prevzute n cazul nostra.
S aruncm o privire i peste functia test2(form). Aceast functie compar irul de intrare
su un sir gol " " pentru a fi siguri c a fost introdus ceva. Dar mai trebuie ceva adugat comenzii "if.
Anume operatorul "||" numit si operatomi OR. In acest fel comanda "if verific dac prima sau cea
ie-a doua comparare este adevarat. Dac cel putin una dintre eie este adevarat, atunci comanda
'if primete valoarea "adevrat" i urmtoarea comand este executat. Asa dar vom obtine un
mesaj de eroare numai dac sirul este gol sau dac nu exist caracterul @ n sirai nostra.
JavaScript - Obiectul Image
Vom examina In continuare obiectul Image ce a aprut odat cu JavaScript 1.1 (deci cu
Netscape Navigator 3.0). Cu ajutorul obiectului "Image" putem schimba imaginile din pagina web n
functie de evenimentele utilizator. Astfel avem posibilitatea s crem animatii interactive n paginile
web.
Mentionm c browserele mai vechi (Netscape Navigator 2.0 i Microsoft Internet Explorer
3.0) folosesc JavaScript 1.0 i nu pot s ruleze scripturile implicnd lucrai cu obiecte de tip "Image".
Toate imaginile dintr-o pagin web sunt reprezentate i evidenziate n JavaScript printr-o
matrice. Aceast matrice este numit "images". Practic, matricea "images" este o proprietate a
obiectului "document". Fiecare imagine de pe o pagina web are atribuit un anumit numr de ordine.
Prima imagine are numrul 0, cea de-a doua imagine are numrul 1 i asa mai departe. Adresm deci
1
prima imagine cu document.images[0].
Fiecare imagine dintr-un document HTML este considarat un obiect Image. Un obiect
"Image" are o serie de proprietti care pot fi accesate prin JavaScript. De exemplu putem vedea ce
dimensiuni are o imagine folosind propriettile "width" si "height".
Concret:
document, images [0]. width
furnizeaz ltimea (n pixeli) a primei imagini din pagina web.
Dac avem prea multe imagini pe o singur pagim devine din ce n ce mai greu s le
tinem pe toate sub observatie. Atribuirea de nume fiecrei imagini rezolv aceast problem. Dac
declarm o imagine prin tagul:
<img src="img.gif" name="mylmage" width=100 height=100>
o putem adresa apoi din JavaScript utiliznd fie sintaxa: "document.mylmage", fie:
"document, images [" my Image "] ".
43
ncrcarea imaginii noi

Dei este de dorit cte o data sa slim care sunt dimensiunile unei imagini pe o pagina web, nu
prea avem neaprat nevoie de acest lucru. Dorim sa putem schimba imaginile pe pagina n functie de
evenimentele utilizator (de exemplu trecerea mouse-ului peste imagine). Pentru aceasta folosim
proprietatea "src". La fel ca n tagul <img>, proprietatea "src" reprezint i n JavaScript adresa
imaginii afiate. Cu JavaScript 1.1 putem da o noua adres unei imagini deja ncrcate (suprascriind
practic aceasta imagine). Rezultatul este c imaginea de la noua adres va fi i ea ncrcat. Aceasta
noua imagine nloeuiete vechea imagine de pe pagina web la declansarea evenimentului utilizator.
Iat i un exemplu:
<img src="imagine-javascript.gif" name="mylmage" width=100 height=100>
Imaginea imgl.gif este ncrcat i ia numele "mylmage". Urmatoarea linie de cod
nloeuiete fosta imagine "imagine-javascript.gif cu o nou imagine "imagine-2-javascript.gif:
document, mylmage. src= "imagine-2-javascript.gif";
Noua imagine are intotdeauna aceleai dimensiuni ca i vechea imagine. Nu putem schimba
suprafata de afiare a imaginii. Puteti i testa acest exemplu apsnd butonul de mai jos (codul
functioneaz numai o singur dat):
Image 1
Preincrcarea imaginilor
Unul dintre neajunsuri este ca noua imagine este ncrcat dup ce a fost atribuit o noua
valoare (adresa) propriettii "src". Dac imaginea ce urmeaz s se suprapun peste vechea imagine
la declansarea evenimentului utilizator nu a fost deja ncrcat pe calculatorul utilizatorului la
ncrcarea paginii n browser, este necesar o perioad suplimentar de timp pentru ncrcarea
imaginii din Internet atunci cnd aceasta este solicitat. n unele cazuri acest fenomen nu creeaz
problme - dar exist i situatii n care astfel de ntrzieri sunt inacceptabile. Deci ce putem face?
Solutia este prencrcarea imaginilor. Pentru aceasta creem un nou obiect "Image". Haideti s vedem
i codul:
hiddenlmg= new Image();
hiddenlmg.src= "img3.gif";
Prima linie creeaz un nou obiect "Image". A doua linie definete adresa imaginii care va f
reprezentat de obiectul "hiddenlmg". Am vzut deja ca atribuirea unei noi valori-adresa atributului
"src" forteaz browserul s ncarce imaginea de la adresa indicat. Deci imaginea "imagine-2javascript.gif' este deja ncrcat cnd cea de-a doua linie de cod este executat. Aa cum sugereaz
cuvntul standard "hiddenlmg", browserul va presupune c imaginea nu este afiat dup ce s-a
termint ncrcarea paginii mpreun cu toate elementele sale (text, grafic, javascript, etc...).
Imaginea este pastrat n memoria temporar a browserului in vederea unei utilizri ulterioare, cel
mai probabil la declansarea unui eveniment utilizator. Pentru a afia noua imagine putem s folosim
urmtoarea linie de cod:
document, mylmage. src= hiddenlmg. src;
Acum imaginea este preluat din memoria cache i afiat imediat. Deja noi avem ncrcat
imaginea. Bineinteles c browserul trebuie s fi termint ncrcarea fiierului (far ca utilizatorul s
supravegheze procesul) pentru a putea afia imaginea far ntrzieri. Dac avem un numr mare de
imagini pe care le prencrcm este posibil s avem ntrzieri n afiare. Trebuie s avem ntotdeauna
n vedere viteza conexiunii, prencrcarea imaginilor nu face ca imaginile s fie ncrcate mai
repede, ci doar s fie ncrcate nainte de a fi afiate la declansarea evenimentului utilizator.
Schimbarea
imaginii
ca
urmare
a
unor
actiuni
initiate
de
utilizator
Putem creea efecte deosebite prin schimbarea imaginilor ca urmare a unor evenimente. Spre
exemplu, putem schimba imaginile la trecerea mouseului deasupra unei zone a paginii. S testm
acest exemplu prin mutarea mouselui deasupra imaginii (mentionm c se va genera un mesaj de
eroare ntr-un browser care utilizeaz JavaScript 1.0 - vom vedea i cum s evitm aceast eroare):
.
I
mage 1
Codul surs al acestui exemplu arat astfel:
44
<A href="http://www.afaceri-online.net"
onmouseover="document.myImage2.src='../../images/imagine-2javascript.gif'" onmouseout="document.myImage2.src='../../images/imaginejavascript.gif'">
<img src="../../images/imagine-javascript.gif" name="mylmage2" width=120
height=38 border=0></A>
Aceast secvent de cod cauzeaz unele probleme atunci cind:
1. Utilizatomi nu folosete un browser compatibil JavaScript 1.1.
2. Cea de- doua imagine nu a fost inc preincrcat.
3. Trebuie rescris codul pentru fiecare imagine in parte.
4. Dorim s avem un script cu un grad mare de generalitate, aadar care s poat fi folosit in
multe pagini far modificri substantiale.
Este de dorit s avem un script care s poat fi folosit in mai multe pagini, in situatii diverse
implicnd imagini mai mari sau mai mici, mai multe sau mai putine, plasate ca meniuri in tabele sau
constituindu-se ca butoane interactive izolate. Practic sunt trei puncte care trebuie avute in vedere
pentru a avea un script flexibil:
NumaruI de imagini - nu conteaz dac sunt 10 sau 100 imagini.
Pozitionarea imaginilor - nu conteaz c sunt butoane singulare sau meniuri.
Ordinea imaginilor - trebuie s fie posibil schimbarea ordinii imaginilor fr a fi necesar
modificarea codului.
Sarcina propus: la pagina Web creat din lucrarea precedent creati bar de stare si un
fixier animat
45

Proiectarea Site Si Web Design

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Proiectarea Site Si Web Design

Încărcat de

Drepturi de autor:

Formate disponibile

COLEGIUL DE MICROELECTRONIC 1TEHNIC DE CALCUL

FIIERELOR ANIMATE N PAGINI WEB .............................................. ; .................. 38

Lucrare de laborator Nr.l

6. Charta W3C stipuleaz necesitatea obtinerii consensului complet, astfel c fiecare

Lucrarare de laborator Nr. 2

Stiluri pentru Iblocurile de text

Luerarare die laborator Nr 3

<hr align="center" width="50%" size="5" noshade>Urmeaza o linie

Lucrarare de laborator Nr. 4

Immagini pent fondili unei pagini

Lucrarare de laborator Nr. 5

2. "disc" (disc plin) - valoarea implicita;

Lucrarare de laborator Nr. 6

Liierarare de laborafor Nr0 7

Lucrarare de laborator Nr. 8

- atributul "type cu valoarea "text/css".

Lucrarare de laborator Nr. 9

Lucrarare de laborater Nr. 10

JavaScript - Bara de Stare

JavaScript - Obiecte Predefinite

<script Language=" JavaScripr v

<input type"tcxt" name="textl ">

ncrcarea imaginii noi

S-ar putea să vă placă și