Ministerul Educaţie al Republicii Moldova Colegiul cu Microelectronică şi Tehnică de Calcul

Catedra:Calculatoare

La lucrarea de laborator Nr:1 Disciplina: Programare Web Tema: HTML

A efectuat: A verificat :

Student.Gr.C-072 Gurita Iuri Enache Nadejda

Chişinău 2011
Ce este HTML 1

Origini Unul din primele elemente, fundamentale de altfel, ale WWW (World Wide Web) este HTML (HyperText Markup Language), standard ce descrie formatul primar in care documentele sint distribuite si vazute pe Web. Multe din trasaturile lui, cum ar fi independenta fata de platforma, structurarea formatarii si legaturile hipertext, fac din el un foarte bun format pentru documentele Internet si Web. Primele specificatii de baza ale Web-ului au fost HTML, HTTP si URL. Menire si semnificatii HTML a fost dezvoltat initial de Tim Berners-Lee la CERN in 1989. HTML este un limbaj bazat pe SGML (Standard Generalized Markup Language), o asa-numita aplicatie a acestuia. SGML este un standard international (ISO-8879) aprobat оn 1986. HTML a fost initial vazut ca o posibilitate pentru fizicienii care utilizeaza computere diferite sa schimbe intre ei informatie prin mijlocirea Internetului. Erau prin urmare necesare cateva conditii esentiale: independenta de platforma, posibilitati hipertext si structurarea documentelor. Independenta de platforma semnifica faptul ca un document poate fi afisat in mod asemanator (sau aproape identic) de computere diferite (deci cu font, grafica si culori aidoma), lucru vital pentru o audienta numeroasa si extrem de variata. Hipertext se traduce prin faptul ca orice cuvint, fraza, imagine sau element al documentului vazut de un utilizator (client) poate face referinta la un alt document sau chiar la paragrafe din interiorul aceluiasi document, ceea ce usureaza mult navigarea intre partile componente ale unui document sau intre multiple documente. Structurarea riguroasa a documentelor permite convertirea acestora dintr-un format in altul precum si interogarea unor baze de date ingloband aceste documente. Inceputurile Nascut оn urma cu aproximativ 30 de ani, intr-o tentativa de a rezolva unele probleme ivite la transportul documentelor intre diferite computere, limbajul hipertext a evoluat incet. In primii ani de evolutie HTML a demarat lent in principal pentru ca ii lipseau posibilitatile de a reda publicatii electronice profesionale; limbajul permitea oarece control asupra fonturilor dar nu permitea inserarea graficii. In 1993, NCSA a imbogatit limbajul pentru a permite inserarea graficii si a construit primul navigator grafic: Mosaic. Au urmat apoi contributii ad hoc ale diverselor firme care au adus tot felul de adaugiri limbajului HTML astfel incat, in 1994, limbajul parea scapat de sub control. Urmarea a fost ca la prima conferinta WWW de la Geneva (Elvetia) s-a constituit un grup de specialisti (HTML Working Group) a carui prima misiune a fost formalizarea HTML, lucru care s-a concretizat in HTML 2.0. Importanta actiunii acestui grup consta in faptul ca, odata standardizat, limbajul a putut fi apoi extins intr-un mod mai controlat 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 cateva versiuni ale specificatiei HTML, printre care si HTML 2.0, HTML 3.0, HTML 3.2, HTML 4.0 si, cel mai recent, HTML 4.01. In acelasi timp, autorii de browsere cum ar fi Netscape si Microsoft, au dezvoltat adesea propriile "extensii" HTML in afara procesului standard si le-au incorporat in browserele lor. In unele cazuri (cum ar fi tagul Netscape), aceste extensii au devenit standarde de facto adoptate de autorii de browsere. Cоnd navigatorul incarca un document HTML, el "citeste" documentul оn cautarea tag-urilor HTML, formateaza textul si imaginea si le afiseaza pe ecran. Este motivul pentru care acelasi document HTML apare usor diferit cоnd este privit utilizand navigatoare diferite. Stadiile prin care trece un standard elaborat de W3C sоnt: 1. Orice standard isi incepe aventura ca W3C Note. 2. De aici este preluat de catre un grup particular de lucru (Working Group) si este discutat pana cand se ajunge la un consens. 3. In acest moment este publicat ca propunere (Working Draft) si in acest stadiu oricine poate face comentarii. 4. In momentul оn care se obtine o sustinere si un consens suficient de larg, directorul W3C decide daca specificatia este gata sa devina propunere oficiala de recomandare (Proposed Recommendation). 5. Urmeaza o perioada de 6 saptamоni оn care toti membrii W3C au sansa sa voteze aceasta propunere de recomandare; votul nu este obligatoriu, putandu-se vota оn 4 moduri diferite: o da; o da, sub rezerva unor imbunatatiri; 2

nu, pana cоnd anumite sarcini nu sunt indeplinite; nu, specificatia trebuie abandonata. 6. Charta W3C stipuleaza necesitatea obtinerii consensului complet, astfel ca fiecare vot trebuie sa fie un da fara rezerve. 7. Daca toti pasii anteriori au fost indepliniti, specificatia trebuie aprobata in final de Director si se publica sub forma unui standard (W3C Recommendation).
o o

De ce HTML Dar de ce a fost preferat HTML pentru publicaţii pe Web, cоnd pentru realizarea publicaţiilor electronice există multe alte tehnologii? Primul motiv este simplitatea. Al doilea este ca permite formatarea textului ASCII cu tag-uri оn format ASCII. Rezultă de aici o compresie buna, suport pentru legaturi hipertext si usurinta in a scrie navigatoare pentru vizualizarea documentelor. Varianta 2.0 HTML 2.0, elaborat in Iunie 1994, este standardul pe care ar trebui sa-l suporte toate browserele curente - inclusiv cele in mod text. HTML 2.0 reflecta conceptia originala a HTML ca un limbaj de marcare independent de obiectele existente, focalizandu-se pe asezarea lor in pagina, in loc de a specfica exact cum ar trebui sa arate acestea. Daca doriti sa fiti siguri ca toti vizitatorii vor vedea paginile asa cum trebuie, folositi tagurile HTML 2.0. Varianta 3.0 Specificatia HTML 3.0, enuntata in 1995, a incercat sa dezvolte HTML 2.0 prin adaugarea unor facilitati precum tabelele si un mai mare control asupra textului din jurul imaginilor. Desi unele din noutatile HTML 3.0 erau deja folosite de autorii de browsere, multe nu erau inca oficializate. In unele cazuri, taguri asemanatoare implementate de autorii de browsere au devenit mai raspandite decat tagurile "oficiale". Specificatia HTML 3.0 a expirat repede, deci nu mai este un standard oficial in prezent. Varianta 3.2 In Mai 1996, W3C a scos pe piata specificatia HTML 3.2 , care era proiectata sa reflecte si sa standardizeze practicile acceptate la scara larga. 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 specificatiile HTML 4.01. Limbajul HTML da proiectantilor de pagini web posibilitatea: • sa publice documente cu headere, texte, tabele, liste, fotografii, etc... • sa regaseasca on-line informatii prin intermediul hiperlink-urilor accesate printr-un simplu click de mouse • sa proiecteze formulare pentru realizarea tranzactiilor cu servere aflate la distanta, pentru cautari de informatie sau pentru activitati specifice comertului • sa includa foi de calcul tabelar, clipuri video, sunete si alte aplicatii direct оn documente. Elementul esential diferit adus de versiunea 4.0 si mai ales 4.01 fata de versiunea 3.2 este posibilitatea separarii structurii unui document de prezentarea lui prin introducerea „stilurilor de documente“ (style sheet). Utilizоnd limbajul HTML pentru structurarea unui document si style sheet-urile pentru a stiliza prezentarea acestuia, proiectantii pot obtine mult mai usor independenta de periferic/ computer/ platforma hard-soft, lucru care a facut HTML-ul atоt de popular. Un document cu o structura complexa poate fi prezentat in diferite moduri pe medii diferite, permitand documentului insusi sa se adapteze mai usor noilor tehnologii (cum ar fi, de exemplu, browserele capabile sa vorbeasca, cititoarele braille, etc...). In plus, separarea continutului de partea de prezentare permite modificarea infatisarii chiar a unui intreg site doar prin modificarea unui style-sheet (a unui document care descrie stilul). Experienta a demonstrat ca o astfel de abordare poate reduce dramatic costurile de deservire a unui spectru larg de platforme si probleme, facilitоnd si o intretinere ulterioara si modificari mult mai usoare.

Ministerul Educaţie al Republicii Moldova
3

Astfel de perechi de marcaje sau etichete (acolo unde sunt perechi) se numesc in literatura de specialitate TAG-uri.C-072 Gurita Iuri Enache Nadejda Chişinău 2011 Fundamente HTML Orice document HTML incepe cu notatia <html> si se termina cu notatia </html>. Prin conventie.Colegiul cu Microelectronică şi Tehnică de Calcul Catedra:Calculatoare La lucrarea de laborator Nr:2 Disciplina: Programare Web Tema:Fundamente HTML A efectuat: A verificat : Student. toate marcajele HTML incep cu o paranteza unghiulara deschisa "<" si se termina cu o 4 .Gr.

. 2. atunci interpretorul HTML le va lua ca texte simple si le va afisa pe ecran. sau B(blue) sunt cifre hexazecimale si pot lua valorile: 0... Un prim document HTML ar fi ceva de genul acesta: <html> <head> </head> <body> </body> </html> Asa arata primul document HTML.sectiunea de antet: <head>. Daca nu intalnim nici un marcaj "<" sau ">". 1.. dati CTRL-O si introduceti calea spre fisier.corpul documentului: <body>. In plus.HTM sau PRIM.. D. nimic.</head> .: <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 precizata in doua moduri: 1. va avea un titlu nou. care trebuie sa apara in codul sursa html. d.. Veti vedea textul ce apare in fereastra browserului. Intre cele doua marcaje <html> si </html> vom introduce doua sectiuni: . green lime. Unele blocuri prezinta delimitator de sfarsit de bloc. Apoi porniti Netscape Navigator sau Internet Explorer. 7.intrerupere de linie). in sectiunea <body>. in timp ce pentru alte blocuri acest delimitator este optional sau chiar interzis.. red. cat si cu litere mari. Copiati-l folosind Copy/Paste intr-un fisier nou si salvati-l ca PRIM.se face in HTML cu o comanda explicita. black.... white si yellow. navy.</body> cuprinde continutul propriu-zis al paginii HTML. Marcajele dintre aceste paranteze transmit comenzi catre browser pentru a afisa pagina intr-un anumit mod. cel introdus de dvs. b. olive.</body> Blocul <body>. Daca acest bloc lipseste intr-o pagina HTML. atunci in bara de titlu a ferstrei browser-ului va aparea numele fisierului. teal. Sunt disponibile cel putin 16 nume de culori: aqua. De exemplu <BODY> = <BodY> = <body>. A. 3.</body> putem scrie texte cat dorim. titlul unei pagini se obtine inserand in sectiunea <head>. e. 4. 2. gray.paranteza unghiulara inchisa ">". Prin constructia "#RRGGBB" unde R(red). Dati OK si. B. Sa vedem o noua versiune a paginii noastre: <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>.HTML. E. Ex. Trecerea pe o linie noua . Un marcaj poate fi scris atat cu litere mici. 6.. 8. purple.. deoarece fisierul HTML din exemplul anterior nu incorporeaza text util. maroon. f. C. F. pagina dvs. Este normal. 5 . Folosind aceleasi operatii ca mai sus. Printr-un nume de culoare. Aceasta comanda este marcajul <br> (de la "line break" . c.</title> va aparea in bara de titlu a ferestrei browser-ului. Caracterele "spatiu" si "CR/LF" ce apar intre taguri sunt ignorate de catre browser.. se pot defini astfel 65536 de culori. G(green). adica ceea ce va fi afisat in ferastra browser-ului. a... fuchsia. silver. 5. Vom adauga primele elemente de text In primul rand.</head> urmatoarea linie: <title>Aceasta este titlul primei mele pagini de Web</title> In plus. 9. vizualizati noua pagina.

. Pentru ca un text sa fie scris cu carcatere cursive acesta trebuie inclus intr-un bloc delimitat de tagurile <i>. In urmatorul exemplu textul are culorea rosie: <html> <head> <title>culoare textului </title> </head> <body text=red> Un text de culoare rosie. </body> </html> Stiluri pentru blocurile de text Pentru ca un bloc de text sa apara in pagina evidentiat (cu caractere aldine). mai exact cu atributul "bgcolor" din cadrul etichetei <body>. <html> <head> <title>Configurarea textului si stabilirea marginii </title> </head> <body leftmargin="100" topmargin="50"> Textul are atribute implicite. "Leftmargin" (stabileste distanta dintre marginea stanga a ferestrei browserului si marginea stanga a continutului paginii).. respectiv <sup>. </body> </html> O eticheta poate avea mai multe atribute..aici implicita. Culoarea textului Acest lucru se seteaza prin intermediul atributului "text" al tagului BODY.</sup>. Culoare (font color) ..</i> (i vine de la "italic").. <br><basefont style="Arial" color="blue" size="6"> Textul este scris cu fontul "Arial". De exemplu: <body bgcolor = culoare>. Urmatorul exemplu prezinta o pagina cu fondul de culoare albastra si textul de culoare galbena: <html> <head> <title>atribute multiple </title> </head> <body bgcolor=blue text=yellow> Fond de culoare albastra si text de culoare galbena.</sub>. </body> </html> Textul afisat este caracterizat de urmatoarele atribute: Marime (font size) .. culoare albastru si marime 6.aici implicita. Font (font family) . dupa sintaxa <body text=culoare>. 2. "Topmargin" (stabileste distanta dintre marginea de sus a ferestrei browserului si marginea de sus a continutului paginii)..</b> (b vine de la "bold" = indraznet ). Pozitionarea continutului paginii Web fata de marginile ferestrei browserului se poate face cu ajutorul a doua atribute ale etichetei <body>: 1.. o eticheta cu trei atribute arata astfel: <eticheta atribut1 = valoare1 atribut2 = valoare2 atribut3 = valoare3>. 6 . aceste fragmente trebuie delimitate de tagurile <sub>. trebuie inclus intre tagurile <b>.Culoarea fundalului unei pagini se precizeaza prin intermediul unui atribut al tagului BODY.aici implicit. Pentru a insera secvente de text ca indice (sub-script) sau ca exponent (super-script). De exemplu.

.C-072 Gurita Iuri Enache Nadejda Chişinău 2011 Fonturi in HTML 7 .</u> (u vine de la "underline"). Ministerul Educaţie al Republicii Moldova Colegiul cu Microelectronică şi Tehnică de Calcul Catedra:Calculatoare La lucrarea de laborator Nr:1 Disciplina: Programare Web Tema: HTML A efectuat: A verificat : Student.Gr..Pentru a insera un bloc de caractere subliniate se utilizeaza etichetele <u>.

Un font este un text caracterizat de urmatoarele atribute: 1. Culoare (stabilita prin atributul "color"); 2. Tipul sau stilul (stabilit prin atributul "face"); 3. Marimea (definita prin atributul "size"); 4. Marimea 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 precizata in doua moduri: 1. printr-un nume de culoare. 2. printr-o constanta conform standardului de culoare RGB (Red, Green, Blue). O astfel de constanta se formeaza astfel: #rrggbb, unde r, g si b sunt cifre hexazecimale. Culorea fontului Pentru a scrie un fragment de text cu caractere de o anumita culoare, se incadreaza acest fragment intre marcajele de font, avand stabilit atributul color la valoarea necesara. Familia fontului Pentru a scrie un text intr-o pagina pot fi folosite mai multe fonturi (stiluri de caractere). Exista cinci familii generice de fonturi care sunt de regula disponibile pe toate calculatoarele utilizatorilor: "serif", "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 virgula. In acest caz browserul va utiliza primul font pe care il cunoaste. Marimea fontului Pentru a stabili marimea unui font se utilizeaza atributul size al etichetei. Valorile acestui atribut pot fi: 1. 1, 2, 3, 4, 5, 6, 7 (1 pentru cel mai mic font si 7 pentru cel mai mare); 2. +1, +2, etc. pentru a mari dimensiunea fontului cu 1, 2, etc. fata de valoarea curenta; 3. -1, -2, etc. pentru a micsora dimensiunea fontului cu 1, 2, etc. fata de valoarea curenta. Blocuri de Text Tagurile care definesc 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 rand nou si adaugarea unui spatiu suplimentar. Identarea unui bloc Pentru ca un bloc de text sa fie indentat (marginea din stanga a textului sa fie deplasata la dreapta la o anumita distanta fata de marginea din stanga a paginii), acesta trebuie inclus intre etichetele <blockquote>...</blockquote>, astfel: <html> <head> <title> Indentarea unui bloc</title> </head> <body> Textul ce urmeaza este indentat:<blockquote>Bloc de text identat</blockquote> </body> </html> Intr-un fisier HTML, caracterele "<" si ">" au o semnificatie speciala pentru browser. Ele incadreaza comenzile si atributele de afisare 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: 8

1. <xmp>...</xmp> (80 de caractere pe rand); 2. <listing>...</listing> (120 de caractere pe rand). Aceste marcaje interpreteaza corect (ca text afisabil in browser) caracterele "spatiu", "eticheta" si "CR/LF". Textul afisat in pagina este monospatiat. Exemplu: <html> <head> <title> xmp si listing</title> </head> <body> Un fisier html standard arata astfel: <xmp> <html> <head> <title> </title> </head> <body> O pagina Web ... </body> </html> </xmp> </body> </html> Blocuri paragraf Etichetea paragraf <p> face posibila trecerea la o linie noua si permite: 1. 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. alinierea textului cu ajutorul atributului "align", avand valorile posibile "left", "center" sau "right". 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>. Toate aceste etichete se refera la un bloc de text si trebuie insotite de o eticheta de incheiere similara. Aceste etichete accepta atributul "align" pentru alinierea titlului blocului de text la stanga (in mod prestabilit), in centru si la dreapta. Tag-ul "H2" permite scrierea unui titlu cu caractere mai mari si aldine, pe cand <h6> foloseste 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> 9

Linii orizontale Intr-o pagina Web pot fi inserate linii orizontale. Acest lucru se face cu ajutorul etichetei <hr>. Pentru a configura o linie orizontala se utilizeaza urmatorele atribute ale etichetei <hr>: 1. "align" ce permite alinierea orizontala a liniei. Valorile posibile sunt "left" ,"center" si "right"; 2. "width" permite alegerea lungimii liniei; 3. "size" permite alegerea grosimii liniei; 4. "noshade" cand este prezent defineste o linie fara umbra; 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. <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> aliniaza 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 eficienta de delimitare si de formatare a unui bloc de text este folosirea delimitatorilor <div>...</div>. Un parametru foarte foarte util pentru stabilirea caracteristicilor unui bloc <div> (diviziune) este "align" (aliniere). Valorile posibile ale acestui parametru sunt: 1. "left" (aliniere la stanga); 2. "center" (aliniere centrala); 3. "right" (aliniere la dreapta). Un bloc <div>...</div> poate include alte subblocuri. In acest caz, alinierea precizata de atributul align al blocului are efect asupra tuturor subblocurilor incluse in blocul <div>. Un bloc <div>...</div> admite atributul "nowrap" care interzice intreruperea randurilor de catre browser la afisare. 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"> 10

jpg">Text dupa imagine. folositi atributul "border" al etichetei <img>. 2.<br> O singura linie.Bloc aliniat pe centru.gif. 256 culori posibile) si JPEG (24 biti pentru o culoare.bmp (numai cu Internet Explorer). 3. Dimensiuniile prestabilite ale unei imagini pot fi modificate la afisarea in browser prin intermediul 11 .<br> Bloc aliniat pe centru.<br> Bloc aliniat pe centru.O singura linie. inclusiv extensia. JPEG (Joint Photographic Experts Group) cu extensia . se utilizeaza eticheta <img> (de la "image"= imagine). Daca imaginea se afla in acelasi director cu fisierul HTML care face referire la imagine.<br> </div> <div align="center"> Bloc aliniat pe centru. </body> </html> Chenarul si dimensionarea unei imagini Daca doriti sa adaugati un chenar in jurul imaginii.Bloc aliniat pe centru. Formatele acceptate de browsere pentru fisierele imagine sunt: 1.O singura linie.xmp.O singura linie. XPM (X PixMap) cu extensia .jpeg sau ./.. TIFF (Tagged Image File Format) cu extensia . daca fisierul imagine este situat intr-un director "images" dintr-un super director al directorului paginii HTML apelante./images/imagine1. GIF (Graphics Interchange Format) cu extensia . Adresa URL a unei imagini URL ("Uniform Resource Locator" = identificator unic al resursei) este un standard folosit in identificarea unica a unei resurse in Internet. Pentru a putea identifica imaginea care va fi inserata se utilizeaza un atribut al etichetei <img> si anume "src" (de la "source"= sursa).jpg". Pentru a insera o imagine intr-o pagina.O singura linie.O singura linie. sa spunem "images".O singura linie. O imagine are anumite dimensiuni pe orizontala si verticala.<br> </div> </body> </html> Lucrul cu Imagini Imaginile sunt stocate in fisiere cu diverse formate. aceste dimensiuni sunt respectate in momentul afisarii ei in browser. Daca imaginea se afla intr-un subdirector al directorului paginii HTML din care este apelata.tiff. atunci adresa URL a imaginii este formata numai din numele imaginii. 5. stabilite in momentul crearii ei./images/imagine1. Daca nu se cere altfel. Cele mai raspandite formate sunt GIF (8 biti pentru o culoare. 4.jpg". Exemplu: <html> <head> <title> O pagina cu imagine</title> </head> <body> O pagina care contine o imagine in subdirectorul images dintr-un super director al unui superdirector al directorului paginii HTML <img src=". referirea se face cu URL-ul: ".xbm. Toate imaginile cu care vom lucra vor avea adresa URL exprimata in functie de directorul ce contine documentul HTML care face referire la imagine. Valorile acestui atribut sunt numere intregi pozitive. in cadrul paginii web.. BMP (BitMap) cu extensia ..jpg. 16777216 de culori posibile).O singura linie. atunci aceasta este apelata cu URL-ul: "/images/imagine1. In schimb.<br> O singura linie.O singura linie.O singura linie.O singura linie. 6.tif sau .Bloc aliniat pe centru. XBM (X BitMap) cu extensia .

Text dupa imagine.Text inainte de imagine.aliniere deasupra. respectiv pe verticala. "left" . </body> </html> Alinierea unei imagini Alinierea unei imagini se poate face prin intermediul atributului "align" care poate lua urmatorele valori: 1. 12 . partea de jos a imaginii se aliniaza cu linia de baza a textului.jpg" align="bottom"> Text dupa imagine. "middle " . "top" . celelalte componente sunt dispuse pe partea stanga.Text inainte de imagine. Exemplu: <html> <head> <title> Alinierea unei imagini</title> </head> <body> Alinieri: <br> Pe verticala: <img src="/images/img1. 2.Text inainte de imagine. Text inainte de imagine. </h4><p> Text inainte de imagine. mijlocul imaginii se aliniaza cu linia de baza a textului ce precede imaginea. Text dupa imagine.aliniere la baza. Spre exemplu: <html> <head> <title> Imagine cu chenar si marit</title> </head> <body> O imagine cu chenar si de 200 pixeli X 15 % <img src="/images/imagine1. 3. 5. celelalte componente sunt dispuse pe partea dreapta.Text inainte de imagine.Text dupa imagine. in functie de setarile browserului utilizatorului: <html> <head> <title> Alinierea textului</title> </head> <body> <h4>Imagine aliniat la stanga inconjurata de text la distanta de 30 de pixeli. <img src="..Text dupa imagine.Text inainte de imagine.jpg" align="left" hspace="30" vspace="30" alt="Universitatea de Nord Baia Mare"> Text dupa imagine.Text dupa imagine.jpg" border="5" width="350" height="25%"> Text dupa imagine. "right" .Text dupa imagine.Text dupa imagine. dintre imagine si restul elementelor din pagina.jpg" align="top"> La mijloc: <img src="/images/img1.atributelor "width" si "height" setate de proiectant in codul HTML al paginii la valorile dorite. </body> </html> Alinierea textului in jurul imaginii Atributele "hspace" si "vspace" precizeaza distanta in pixeli pe orizontala.jpg" align="middle"> Jos: <img src="/images/img1.aliniere la mijloc./images/img1.aliniere la dreapta.Text dupa imagine. Atributul "alt" admite ca valoare un text care va fi afisat in locul imaginii.Text inainte de imagine. 4. partea de sus a imaginii se aliniaza cu partea de sus a textului ce precede imaginea.Text dupa imagine. "bottom" .aliniere la stanga.

.jpg "></a> Text dupa imagine. Ele transforma un text obisnuit in hipertext sau hiperlegatura. Exemplu: <html> <head> <title> Imagini folosite ca legaturi</title> </head> <body"><h4>Imagini folosite ca legaturi</h4> Text inainte de imagine.html"><img src= ". Legaturi intre pagini aflate in acelasi director O legatura de pe o pagina catre o alta aflata in acelasi director se formeaza cu ajutorul etichetei <a> (de la "anchor"= ancora).. De exemplu: <html> <head> <title> Pagina cu imagine de fond</title> </head> <body background=". acest chenar dispare.html"><img src=".jpg"> 1<br>2<br>3<br>4<br> 5<br>6<br>7<br>8<br> 9<br> </body> </html> Imagini folosite ca legaturi O legatura (link) introduce in pagina Web o zona activa. avand ca valoare adresa URL a imaginii. Prezenta etichtetei de sfarsit </a> este obligatorie.<a href="index. Pentru a preciza pagina indicata de legatura se utilizeaza un atribut al etichetei <a> numit "href". imaginea utilizata pe post de zona activa este inconjurata de un chenar avand culoarea unei legaturi. Daca stabilim pentru atributul "border" al etichetei <img> la 0.jpg" drept legatura catre pagina index. Exemplu: <html> <head> <title> Comutarea intre doua pagini</title> </head> <body> <h3>Pagina 1 </h3> 13 . </body> </html> Legaturi in HTML Lagaturile (link-urile) reprezinta partea cea mai importanta a unei pagini Web. In acest scop se foloseste atributul "background" al etichetei <body>. adica zone de pe ecran sensibile la apasarea butonului stang al mouse-ului. Efectuand click cu butonul mouse-ului pe aceasta zona. Legaturile sunt zone active intr-o pagina Web./images/img1././..jpg "></a> In mod prestabilit.. Zona activa care devina sensibila la apasarea butonului stang al mouse-ului este formata din textul cuprins intre etichetele <a> si </a>. in browser se va incarca o alta pagina.</body> </html> Imagini pentru fondul unei pagini O imagine poate fi utilizata pe post de fundal al unei pagini Web.. Pentru a utiliza imaginea "legatura.html utilizam sintaxa: <a href ="index. care permite trecerea rapida de la o informatie aflata pe un anumit server la alta informatie memorata pe un alt server aflat oriunde in lume. Imaginea se multiplica pe orizontala si pe verticala pana umple intregul ecran./images/img1./images/img1. care ia ca valoare numele fisierului HTML aflat in acelasi director.

atunci. Pentru a introduce o legatura catre o ancora definita in alta pagina aflata in acelasi director.com care incarca pagina de start din site-ul firmei Netscape Corporation: <html> <head> <title> Link catre site-ul firmei Netscape</title> </head> <body> <h3>Link catre site-ul firmei Netscape </h3> <a href="http://www./legaturi.html#anc"> Link catre o ancora din alt document </a> <br> 1<br>2<br>3<br>4<br>5 <a name="ancora1">Ancora 1 </body> </html> 14 ..html"> Link catre o pagina cu liste </a> </body> </html> O legatura catre un site particular In exemplul urmator se utilizeaza adresa URL www./exemple/list/exemplu_11. dupa cum urmeaza (se mentine analogia cu adresarea relativa a imaginilor): <html> <head> <title> Comutarea intre doua pagini aflate pe acelasi disc local</title> </head> <body> <h3>Pagina 3 </h3> <a href=". se utilizeaza eticheta <a> avand atributul "href" la valoarea "#leg1". O ancora se defineste de asemenea prin eticheta <a>. pentru a preciza pozitia ei in structura de directoare se poate folosi adresarea relativa. atributul "href" primeste de data aceasta o valoare de forma "nume_fisier.netscape./..netscape. Exemplu: <html> <head> <title> Ancore definite in acelasi document si in alt document</title> </head> <body> <h3>Ancore definite in acelasi document si in alt document </h3> <a href="#ancora1"> Link catre ancora 1 </h3> <a href=".html"> Link catre pagina 2 </a> </body> </html> Legaturi intre pagini aflate pe acelasi disc local Daca pagina referita se afla pe acelasi disc local cu pagina care face referirea dar intr-un alt director.. Pentru a insera o legatura catre "leg1" definita in aceeasi pagina./..com"> Netscape Corporation </a> </body> </html> Ancore Intr-o pagina foarte lunga pot exista puncte de reper catre care se definesc legaturi.<a href="pagina_2. Pentru a defini ancora se utilizeaza atributul "name" care primeste ca valoare un nume atribuit ancorei (de exemplu "leg1").html#nume_ancora" .

Fiecare element al listei este initiat de eticheta <li> (list item).Un termen al listei este marcat de eticheta <dt> (de la "definition term"= termen definit). 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>.. Observatii: . . sa salvati pe discul local fisierul. cuvintele sunt listate in ordine alfabetica.</ul> ("ul" vine de la "unordered list"= lista neordonata). Pentru aceasta se utilizeaza eticheta <a> avand valoarea atributului "href" egala cu adresa URL a fisierului destinatie.zip </body> </html> Liste in HTML Unul din cele mai obisnuite elemente din documentele cu mai multe pagini este un set de definitii. Exemplu: 15 . referinte sau indexuri.</dl> (de la "definition list" = lista de definitii).Definitia unui termen incepe pe o linie noua si este identata. Exemplu: <html> <head><title>listex_1</title></head> <body><H2 align=center>O lista de definitii</H2><hr> <dl> Glosar de termeni de World Wide Web <dt><b>hypertext</b> <dd>. intreaga sectiune a unui glosar va fi gestoinata printr-o lista de definitii care este inclusa intr-o pereche de marcaje de tip lista de definitii: <dl>.o interconectare Web de informatii de tip text.fluxul nesfarsit de materiale care apar pe Internet. urmate de definitii ale termenilor respectivi.sub-setul de date care are efectiv semnificatie si care este util la momentul curent </dl> </body> </html> Liste neordonate O lista neordonata este un bloc de text delimitat de etichetele corespondente <ul>. 2.zip"> Link catre fisierul fisier. . browserul deschide o caseta de dialog intitulata "File download" care permite: 1. Glosarele sunt exemple clasice in acest sens. sa lansati in executie aplicatia capabila sa interpreteze corect fisierele de tipul respectiv. Exemplu: <html> <head> <title> Legaturi catre fisiere oarecare</title> </head> <body> <h3>Legaturi catre fisiere oarecare</h3><br> <a href="fisier.. Atunci cand se efectueaza clic pe legatura din exemplul urmator. spre deosebire de informatii care sunt date cu un anumit inteles sau valoare <dt><b>informatie</b> <dd>. In HTML.Legaturi catre fisiere oarecare O pagina Web poate contine legaturi catre orice tip de fisiere aflate pe orice servere din Internet.Definitia unui termen este initiata de eticheta <dd> (de la "definition description"= descrierea definitiei). Lista va fi indentata fata de restul paginii Web si fiecare element al listei incepe pe un rand nou...

Lista va fi indentata fata de restul paginii Web si fiecare element al listei incepe pe un rand nou. Exemplu: <html> <head><title>listex_4</title></head> <body><H2 align=center>O lista ordonata</H2><hr> <ol>Culori uzuale disponibile prin nume <li>Black <li>White <li>Red <li>Green <li>Blue <li>Yellow <li>Purple <li>Aqua </ol> </body> </html> Tag-urile <ol> si <li> pot avea un atribut " type" care stabileste tipul de caractere utilizate pentru ordonarea listei. etc. "i" pentru ordonare de tipul i. Valorile posibile sunt: 1. "a" pentru ordonare de tipul a.<html> <head><title>listex_2</title></head> <body><H2 align=center>O 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 sabileste caracterul asfisat in fata fiecarui element al listei. "1" pentru ordonare de tipul 1. etc. 2. B. (litere mari).optiune prestabilita).valoarea implicita. b. IV. "I" pentru ordonare de tipul I. etc. d. (cifre arabe . II. etc. Valorile posibile al acestui atribut sunt: 1. Fiecare element al listei este initiat de eticheta <li> (list item). iv. 3. "disc" (disc plin) . 3. (cifre romane mici).. "A" pentru ordonare de tipul A. (cifre romane mari). iii. ii. ca in exemplul urmator: <html> <head><title>listex_3</title></head> <body><H2 align=center>O 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 elemente este un bloc de text delimitat de etichetele corespondente <ol>. 4. C. Urmatorul exemplu este o lista ordonata cu cifre romane: <html> <head><title>listex_5</title></head> <body><H2 align=center>O lista ordonata cu cifre romane</H2><hr> <ol type="I">Culori uzuale disponibile prin nume <li>Black <li>White <li>Red <li>Green <li>Blue <li>Yellow <li>Purple <li>Aqua </ol> </body> </html> 16 . Listele neordonate pot fi imbricate pe mai multe niveluri. 2. "square" (patrat).. c. 5. etc. 4. 2. D. 3. III. (litere mici).</ol> ("ol" vine de la "ordered list"= lista ordonata). "circle" (cerc).

.. Urmatorul exemplu este o lista ordonata cu litere mari.. Un rand este format din mai multe celule ce contin date.</TD>. incepand cu valoarea C. ca in exemplul urmator: <html> <head><title>listex_8</title></head> <body><H2 align=center>O lista ordonata de liste ordonate si neordonate</H2><hr> <ol>Un sistem informatic include: <li>Hardware: <ol> <li>placa 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.Tag-ul <ol> poate avea un atribut start care stabileste valoarea initiala a secventei de ordonare. In mod prestabilit. se utilizeaza un atribut al etichetei numit "border".. alinierea textului. Un tabel este format din randuri. Acest atribut poate primi ca valoare orice numar intreg (inclusiv 0) si reprezinta grosimea in pixeli a chenarului tabelului. O valoare egala cu 0 a grosimii semnifica 17 . culoarea textului.. <html> <head><title>listex_6</title></head> <body><H2 align=center>O lista ordonata cu litere mari. Pentru a adauga un chenar unui tabel. atunci tabelul va avea o grosime prestabilita egala cu 1 pixel.</TR> (de la "table row" = rand de tabel ). 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> </body> </html> Listele ordonate pot fi imbricate intre ele sau cu liste neordonate. Valoarea acestui atribut trebuie sa fie un numar intreg pozitiv. Folosirea etichetei de sfarsit este optionala. Pentru a insera un tabel se folosesc etichetele corespondente <TABLE>.</TABLE>. un tabel nu are chenar. Daca atributul "border" nu este urmat de o valoare. fiecare zona avand propriile optiuni pentru culoarea fondului. O celula de date se introduce cu etichetele <TD>. Pentru a insera un rand intr-un tabel se folosesc etichetele <TR> .. etc.

latimea si inaltimea .valoarea prestabilita.absenta chenarului. Cand atributul "border" are o valoare nenula. Alinierea tabelului Pentru a alinia un tabel intr-o pagina Web se utilizeaza atributul "align" al etichetei <TABLE>. imediat sub tabel.daca tabelul este aliniat dreapta. 2. atunci textul care urmeaza dupa punctul de inserare al tabelului va fi afisat pe toata latimea paginii. "left" (la stanga). urmate de semnul %. numere intregi intre 1 si 100. 1. atunci textul care urmeaza dupa punctul de inserare al tabelului va fi dispus in partea stanga a tabelului. "top" (sus). Valorile acestui atribut pot fi numere intregi pozitive si reprezinta distanta in pixeli dintre celule si continutul lor. Definirea culorilor de fond pentru un tabel Culoarea de fond se stabileste cu ajutorul atributului "bgcolor". Dimensionarea celulei unui tabel Distanta dintre doua celule vecine se defineste cu ajutorul atributului "cellspacing" al etichetei <TABLE>. Alinierea pe verticala a continutului unei celule se face cu ajutorul atributului "valign" care poate lua valorile: 1. 3. Valorile acestui atribut pot fi numere intregi pozitive. Valorile pe care le poate primi atributul "bgcolor" sunt cele cunoscute pentru o culoare.daca tabelul este aliniat pe centru.ale etichetei <TABLE>. "char" (alinierea se face fata de un caracter). cu urmatoarele valori posibile: "left" (valoarea prestabilita). atunci textul care urmeaza dupa punctul de inserare al tabelului va fi dispus in partea dreapta a tabelului. "right" (la dreapta). "bottom" (jos). si reprezinta distanta in pixeli dintre doua celule vecine. Exemplu de tabel reunind toate elementele descrise pana acum: <html> <head><title>Tabel</title></head> <body> <table border="1" cellpadding="10" cellspacing="15" width="100%"> <tr> <td align="middle">data data data</td> <td align="middle">data data data</td> 18 . Distanta dintre marginea unei celule si continutul ei poate fi definita cu ajutorul atributului "cellpadding" al etichetei <TABLE>.pot fi stabilite exact prin intermediul a doua atribute "width" si "height" . chenarul unui tabel are un aspect tridimensional. Dimensionarea unui tabel Dimensiunile unui tabel . "middle" (la mijloc. Valorea prestabilita a atributului "cellspacing" este 2. . inclusiv 0. 2. Valorile acestor atribute pot fi: 1. "center" si "right ". 4. . 3. reprezentand fractiunea din latimea si inaltimea totala a paginii. Alinierea este importanta pentru textul ce inconjoara tabelul. Valorea prestabilita a atributului "cellpadding" este 1. "center" (centrat) . "baseline" (la baza). valoarea prestabilita). Astfel: . Alinierea continutului unei celule Alinierea pe orizontala a continutului unei celule se face cu ajutorul atributului "align" care poate lua valorile: 1. numere intregi pozitive reprezentand latimea respectiv inaltimea in pixeli a tabelului. care poate fi atasat intregului tabel prin specificarea in cadrul etichetei <table> sau numai celulor de date prin specificarea sa in etichetele de celula (<td>).daca tabelul este aliniat stanga. 4.

<td align="middle">data </tr> <tr> <td align="middle">data <td align="middle">data <td align="middle">data </tr> <tr align="right"> <td>data data data</td> <td>data data data</td> <td>data data data</td> </tr> </table> </body> </html> data data</td> data data</td> data data</td> data data</td> Tabele cu forme oarecare Un tabel trebuie privit ca o retea dreptunghiulara de celule. in etichete vor fi prezente ambele atribute "colspan" si "rowspan". Exemplu: <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> <td align="middle">data data data</td> <td align="middle">data data data</td> </tr> <tr align="right"> <td>data data data</td> <td>data data data</td> </tr> </table> </body> </html> Cadre in HTML Ferestrele sau (cadrele) ne permit sa definim in fereastra browserului sub-ferestre in care sa putem incadra documente noi HTML. in care blocul <body>. ce primeste ca valoare adresa URL a 19 . Cu ajutorul a doua atribute ale etichetelor <TR> si <TD>. Astfel: 1. fiecare cadru este introdus prin eticheta <frame>. extinderea unei celule peste celulele de sub ea se face cu ajutorul atributului "rowspan". o celula se poate extinde peste celule vecine. a carui valoare determina numarul de celule care se unifica.. extinderea unei celule peste celulele din dreapta ei se face cu ajutorul atributului "colspan".</frameset>.. Sub-ferestrele sunt definite intr-un fisier HTML special. Sunt posibile extinderi simultane ale unei celule pe orizontala si pe verticala. 2.. In interiorul acestui bloc.</body> este inlocuit de blocul <frameset>.. Un atribut obligatoriu al etichetei <frame> este "src". a carui valoare determina numarul de celule care se unifica. In acest caz.

a treia ocupa jumatate din spatiul total disponibil iar a doua si a patra ocupa in mod egal restul de spatiu ramas disponibil. 3.html"> </frameset> </html> In exemplul urmator este creata o pagina Web cu trei cadre mixte. impartirea unei ferestre intr-un numar de subferestre de tip linie se face cu ajutorul atributului "rows" al etichetei <frameset> ce descrie acea fereastra. Pentru a realiza acest lucru. care descriu modul in care se face impartirea. Observatii: .*" inseamna o impartire in 4 subferestre. 2. Definirea cadrelor se face prin impartirea ferestrei ecran (si a subferestrelor) in linii si coloane: 1.jpg"> <frame src="p3. Pentru al doilea cadru valoarea atributului "src" este adresa URL a unei imagini. .*"> <frame src="p1. Exemplu: <html> <head><title>ferex_1</title></head> <frameset cols="*.html"> <frame src="x. Mai intai. ca in exemplu: <html> <head><title>ferex_2</title></head> <frameset rows="100. Exemplu 1: "cols=200. procente din dimensiunea ferestrei (numar intre 1 si 99 terminat cu %).sau poate fi impartita la randul ei la alte subfereste constituind cadre noi (folosind <frameset>). se folosesc simultan cele doua atribute Cols si Rows. 3.daca mai multe elemente din lista sunt configurate cu *.html"> <frame src="p4. un numar intreg de pixeli. 3. Exemplu 2: "cols=200.*.documentului HTML care va fi incarcat in acel frame.50%. impartirea unei ferestre intr-un numar de subferestre de tip coloana se face cu ajutorul atributului "cols" al etichetei <frameset> ce descrie acea fereastra.html"> <frame src="p3.html"> </frameset> </html> In exemplul urmator este creata o pagina Web cu trei cadre orizontale.1. pagina este impartita in doua subferestre de tip coloana.*. valoare atributelor "cols" si "rows" este o lista de elmente separate prin virgula.10%"> <frame src="p1.1*.html"> <frame src="p2.html"> </frameset> </html> In exemplul urmator este creata o matrice de 4 cadre (2 x 2).50%. precum in exemplul urmator: <html> <head><title>ferex_3</title></head> <frameset rows="*.3.2.html"> <frame src="p2. atunci spatiul disponibil ramas pentru ele se va imparti in mod egal. a treia ocupa jumatate din spatiul total disponibil iar a doua si a patra ocupa in mod egal restul de spatiu ramas disponibil. ca in exemplul de mai jos: 20 .*"> <frame src="p1.o subfereastra poate fi un singur cadru (folosind <frame>) . Pentru a o crea se procedeaza din aproape in aproape. dupa care a doua subfereastra este impartita in doua subferestre de tip linie.in care se va incarca un document HTML . n* care inseamna n parti din spatiul ramas.2*" inseamna o impartire in 4 subferestre. care se imparte in trei parti egale. dintre care prima are 200 pixeli latime.*" cols="*. Elementele listei pot fi: 3. dintre care prima are 200 pixeli latime. a doua fereastra ocupand o parte iar a patra ocupand 2 parti.

Exemplu: <html> <head><title>ferex_5</title></head> <frameset cols="20%.*"> <frame src="p1.*"> <frame src="p2. Valoarea prestabilita a atributului "border" este de 5 pixeli.html"> <frameset rows="*.*" bordercolor="green" border="15"> <frame src="p1.html"> </frameset> </frameset> </html> Culori pentru chenarele cadrelor si dimensionarea chenarului unui cadru Pentru a stabili culoarea chenarului unui cadru se utilizeaza atributul "bordercolor".<html> <head><title>ferex_4</title></head> <frameset cols="20%.*" frameborder="no"> <frame src="p1. Atributul bordercolor poate fi atasat atat etichetei <frameset> pentru a stabili culoarea tuturor chenarelor cadrelor incluse. Afisarea chenarului unui cadru poate fi dezactivata daca se utilizeaza atributul "frameborder" cu valoare "no". Atributul "border" al etichetei <frameset> permite configurarea latimii chenarelor tuturor cadrelor la un numar dorit de pixeli.html"> <frame src="p3. O valoare de 0 pixeli va defini un cadru fara chenar.html"> <frame src="p3.html"> </frameset> </html> 21 .html"> </frameset> </html> <html> <head><title>ferex_5_2</title></head> <frameset cols="20%.html"> <frameset rows="*. Exemplu: <html> <head><title>ferex_5_1</title></head> <frameset cols="20%.html"> <frameset rows="*.*"> <frame src="p2. chenarul afisat al unui cadru are aspect tridimensional.*" border="0"> <frame src="p1.*"> <frame src="p2. cat si etichetei <frame> pentru a stabili culoarea chenarului pentru un cadru individual.html"> <frame src="p3.*"> <frame src="p2.html" bordercolor="blue"> <frame src="p3. Acest atribut poate fi atasat atat etichetei <frameset> (dezactivarea fiind valabila pentru toate cadrele incluse) cat si etichetei <frame> (dezactivarea fiind valabila numai pentru un singur cadru). Acest atribut primeste ca valoare un nume de culoare sau o culoare definita in conformitate cu modelul de culoare RGB.html"> <frameset rows="*.html"> </frameset> </html> In mod prestabilit.

Valori posibile: .. va ignora ce se gaseste in aceasta portiune. O sesiune cu o pagina web ce contine un formular cuprinde urmatoarele etape: 1.html" scrolling="no" noresize> <frame src="p. Exemplu: <html> <head><title>ferex_7</title></head> <frameset cols="*.barele de derulare sunt adaugate intotdeauna. hiperlink-uri.. respectiv orizontale ale cadrului. care ofera facilitati puternice de transmisie a datelor. . 3. O aplicatie dedicata de pe server analizeaza formularul completat si (daca este necesar) stocheaza datele intr-o baza de date.*"> <frame src="p. iar daca nu. 2. campuri de editare. Valorile posibile sunt: 1.procent din latimea. Pozitionarea documentului intr-un cadru Atributele "marginheight" si "marginwidth" ale etichetei <frame> permit stabilirea distantei in pixeli dintre continutul unui cadru si marginile verticale..*.numar de pixeli.barele de derulare sunt vizibile atunci cand este necesar Exemplu: <html> <head><title>ferex_6</title></head> <frameset cols="*. pana la o structura complexa.element caracteristic tuturor motoarelor de cautaredin Web. "yes" . inhiba utilizatorului posibilitatea de a redimensiona cadrul cu ajutorul mouse-ului..html" scrolling="yes" noresize> <frame src="p.*"> <frame src="p. 3. "auto" . Pentru aceasta se utilizeaza in interiorul blocului <frameset> eticheta <noframes>.</noframes> va fi singurul care va fi inteles si afisat.html" marginheight=20> <frame src="p. cu multiple sectiuni. Daca este necesar serverul expedieaza un raspuns utilizatorului. Un formular este definit intr-un bloc delimitat de etichetele corespondente <form> si </form>.Bare de defilare Atributul "scrolling" al etichetei <frame> este utilizat pentru a adauga unui cadru o bara de derulare care permite navigarea in interiorul documentului afisat in interiorul cadrului.html"> <frame src="p. Formulare in HTML Un formular este un ansamblu de zone active alcatuit din butoane.barele de derulare nu sunt utilizabile. casete de selectie. pentru introducerea unui sir de caractere pe post de cheie de cautare . "no" . tabele). Formularele asigura construirea unor pagini Web care sa permita utilizatorilor sa introduca efectiv informatii si sa le transmita serverului. Utilizatorul completeaza formularul si il expedieaza unui server.*. De precizat este faptul ca intre <noframes> . etc. Atribute esentiale ale elementului <form> Exista doua atribute esentiale ale elementului <form>: 22 . Daca programul de navigare stie sa interpreteze cadre. respectiv din inaltimea cadrului. 2.html" scrolling="auto" noresize> </frameset> </html> Atributul "noresize" al etichetei <frame> (fara nici o valoare suplimentara) daca este prezent. </noframes> se pot introduce orice alte tag-uri HTML (inclusiv imagini. materialul cuprins in zona <noframes>.html" marginwidth=20> </frameset> </html> Exista browsere care nu suporta cadre. Formularele pot varia de la o simpla caseta de text.

Atributul "name" permite atasarea unui nume fiecarui element al formularului. 2. Atributul "maxlength" ce specifica numarul maxim de caractere pe care le poate primi un camp de editare. Pe buton apare scris implicit "Submit Query" sau explicit valoarea atributului "value". Daca textul introdus in camp de utilizator depaseste aceasta latime. Sunt permise cantitati mari de date (de ordinul MB). Atributul "size" ce specifica latimea campului de editare. a unei singure variante de raspuns din mai multe posibile. la un moment dat. Unix shell. acest atribut primeste valoarea "text". "Post". Exemplu: <html> <head><title>formex_4</title></head> <body><H2>Un formular cu butoane radio</H2> <hr> 23 .com/cgi-bin/nume_fis. Exemplu: http://www. Datele sunt adaugate conform sintaxei: "nume_camp = valoare_camp". Atributul "value" permite atribuirea unei valori initiale unui element al formularului. 2.1. Atentie insa: . alte doua atribute pot fi utile: 1. Atributul "Action" precizeaza ce se va intampla cu datele formularului odata ce acestea ajung la destinatie. Sunt posibile urmatoarele valori: 2.yahoo. daca aceasta valoare a fost stabilita. 2. C. Butoane radio Butoanele radio permit alegerea. Intre diferite seturi de date este introdus un "&". atunci se executa automat o derulare a continutului acestui camp. Pentru aceasta se foloseste un atribut al etichetei <form> si anume "Action" care primeste ca valoare "mailto:" concatenat cu o adresa valida de e-mail catre care se va expedia formularul completat.1.cgi">. Butoanele radio se introduc prin eticheta <input> cu atributul " type" avand valoarea "radio". Pentru a preciza tipul elementului se foloseste atributul " type" al etichetei <input>.yahoo. Acest element poate primi un nume prin atributul "name". Atributul "Method" precizeaza metoda utilizata de browser pentru expedierea datelor formularului.2.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 camp de editare (type= "text").com/cgi-bin/nume_fis.nu sunt permise cantitati mari de date (maxim 1 Kb) . datele din formular sunt adaugate la adresa URL precizata de atributul "Action". Cel mai simplu mod de utilizare a unui formular este expedierea acestuia prin posta electronica (e-mail). Exemplu: <html> <head><title>formEx_1 </title></head> <body><H2> Un formular cu un camp de editare si un buton de expediere</H2> <hr> <form action="mailto:xxxxx@xxx. PHP. Script-urile pot fi scrise in limbajele Perl.intre adresa URL si date este inserat un "?". Java. In acest caz datele sunt expediate separat. De regula. Alte atribute pentru un element <input> sunt: 1. valoarea atributului "Action" este adresa URL a unui script aflat pe un srver WWW care primeste datele formularului. In acest caz. Un buton de expediere al unui formular se introduce cu ajutorul etichetei <input>. in care atributul " type" este configurat la valoarea "submit". efectueaza o prelucrare a lor si expedieaza catre utilizator un raspuns. Pentru ca un formular sa fie functional trebuie precizat ce se va intampla cu el dupa completarea si expediere. "Get" (valoarea implicita). caracterele tastate peste numarul maxim sunt ignorate.cgi?nume1 = valoare1&nume2 = valoare2 2. Formulare cu un camp de editare si un buton de expediere Majoritatea elementelor unui formular sunt definite cu ajutorul etichetei <input>. Pentru un camp de editare. Exemplu: <form action="http://www.

daca acest atribut lipseste.com" method="post"> 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> 24 . in functie de alegerea facuta de utilizator. Doua atribute ale etichetei option se dovedesc utile: 1. 2. care precizeaza (printr-un numar intreg pozitiv. Lista de selectie este inclusa in formular cu ajutorul etichetelor corespondente <select> si </select>.<form action="mailto:xxxxx@xxx. O lista de selectie poate avea urmatoarele atribute: 1. care ataseaza listei un nume (utilizat in perechile "name=value" expediate serverului). Pentru inserarea unei casete de validare se utilizeaza eticheta <input> cu atributul " type" configurat la valoarea "checkbox". Elementele unei liste de selectie sunt incluse in lista cu ajutorul etichetei <option>. Atributul "size".fiecare caseta poate avea valoarea prestabilita "selectat" definita prin atributul "checked".fiecare caseta poate avea un nume definit prin atributul "name". Atributul "selected" (fara alte valori) ce permite selectarea prestabilita a unui element al listei. valoarea prestabilita fiind 1) cate elemente din lista sunt vizibile la un moment dat pe ecran (celelalte devenind vizibile prin actionarea barei de derulare atasate automat listei).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 formularului se va transmite una dintre perechile "sex=b" sau "sex=f". atunci catre server va fi expediat textul ce urmeaza dupa <option>. Atributul "value" ce primeste ca valore un text care va fi expediat server-ului in perechea "name=value". Exemplu: <html> <head><title>formex_7</title></head> <body><H2>Un formular cu o lista de selectie</H2> <hr> <form action="mailto:xxxxx@xxx. Casete de validare O caseta de validare (checkbox) permite selectarea sau deselectarea unei optiuni. Atributul "name". . 2. Exemplu: <html> <head><title>formex_5</title></head> <body><H2>Un formular cu casete checkbox</H2> <hr> <form action="mailto:xxxxx@xxx.com" method="post"> 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> Formulare de selectie Un formular de selectie permite utilizatorului sa aleaga unul sau mai multe elemente dintr-o lista finita. Observatii: .

in acest caz: . in acest caz: . b) "hard". Atributul "rows". . care determina comportamentul campului de editare fata de sfarsitul de linie. . care permite atasarea unui nume campului de editare multilinie. Antetul documentului.<input type="reset"> <input type="submit"> </form></body> </html> Campuri de editare multilinie Intr-un formular. Exemplu: <html> <head><title>formex_9</title></head> <body><H2>Un formular cu un camp de editare multilinie</H2> <hr> <form action="mailto:xxxxx@xxx. </textarea> <input type="reset"> <input type="submit"> </form></body> </html> Sinteza Taguri HTML Iata in cele ce urmeaza o sinteza cuprinzatoare a marcajelor HTML intrebuintate la ora actuala pe scara larga in documentele Web: • • • • • • • • Marcaje de baza Marcaje de formatare a caracterelor Marcaje pentru imagini Marcaje pentru liste Marcaje pentru tabele Marcaje pentru cadre Marcaje pentru formulare Marcaje pentru carcatere speciale Marcaje de Baza <HTML> </HTML> <HEAD> </HEAD> Defineste un fisier in format Web.caracterul de sfarsit de linie este inclus in textul transmis serverului o data cu formularul. 3. c) "soft". Atributul "wrap". care specifica numarul de linii afisate simultan. campurile de editare multilinie pot fi incluse cu ajutorul etichetei <textarea>. A doua linie din textul initial. 2. Atributul "name". Atributul "cols". 4. 25 .caracterul de sfarsit de linie este inclus in textul transmis serverului o data cu formularul. in acest caz: .se produce intreruperea cuvintelor la marginea dreapta a editorului. . care specifica numarul de caractere afisate intr-o linie.se produce intreruperea cuvintelor la marginea dreapta a editorului. Acest atribut ("wrap") poate primi urmatoarele valori: a) "off".intreruperea cuvintelor la marginea dreapta a editorului se produce numai cand doreste utilizatorul.nu se include caracterul de sfarsit de linie in textul transmis serverului o data cu formularul.com" method="post"> <textarea name="text multilinie" cols="30" rows="5" wrap="off"> Prima linie din textul initial. (de la "word wrap"= trecerea cuvintelor pe randul urmator). Eticheta are urmatoarele atribute: 1.

Culoarea legaturilor pe durata click-ului exacutat de utilizator. 26 . <HR> SIZE=x WIDTH=x NOSHADE ALIGN=x COLOR=x <A> </A> HREF=url HREF=#nume Name=nume Rigla orizontala. Culoarea legaturilor vizitate din pagini. Paragraf. Culoarea de fond a paginii. daca este disponibil. fie o valoare RGB. Referinta catre o ancora interna. Definitia unei ancore interne. center. <CENTER> </CENTER> Centreaza materialul in pagina. sau b. Inaltimea riglei in pixeli. Dimensiunea textului este 1-7.b" COLOR=s <BR> <PRE> </PRE> <!-. Culoarea legaturiilor nevizitate din pagini. Referinta hipertext. Corpul paginii HTML. Afiseaza text cu caractere cursive. Imaginea de fond pentru pagina. Nivel de subtitlu al documentului (n = 1-6). Specifica fontul: a. Culoarea textului: fie un nume de culoare. Specifica atribute ale textului incadrat. right). Marcaje Formatare Caractere <B> </B> <I> </I> Afiseaza text cu caractere aldine. Latimea riglei in pixeli sau in procente. Alinierea riglei orizontale in pagina (left. Culoarea riglei orizontale (numai pentru IE) Marcaj de tip ancora. Culoarea textului pe pagini. Dezactiveaza afisarea umbrei pentru rigla orizontala.<TITLE> </TITLE> <BODY> </BODY> BGCOLOR = culoare TEXT=culoare LINK=culoare VLINK=culoare ALINK=culoare BACKGROUND = url <P> <Hn> <Hn> <FONT> </FONT> SIZE=n FACE="a. Comentariu HTML. Informatie preformatata.--> Titlul documentului. Linie noua.

Forma marcajului. Inaltimea imaginii (in pixeli). I. right (in dreapta). Listing de program. Stil logic de evidentiere. 27 . Spatiul suplimentar pe verticala din jurul imaginii (in pixeli). Program sau variabila. Latimea imaginii. disc. Element de lista. Text de la tastatura. i. Sursa fisierului grafic. Alinierea imaginii in pagina. bottom (jos). Tipul numerotarii. Specifica explicit dimensiunea fontului din pagina Marcaje pentru Imagini <IMG> SRC=url ALT=text ALIGN=aliniere HEIGHT=x WIDTH=x BORDER=x HSPACE=x VSPACE=x Marcajul de introducere a imaginilor. left (in stanga). Valori posibile: circle. Evidentiere logica puternica. Lista neordonata (marcata). Chenarul din jurul imaginii. daca este necesar. Numarul de inceput al listei ordonate. middle(la mijloc). cu urmatoarele valori posibile: top (sus). Citare bibliografica. Marcaje pentru Liste <DD> <DL> </DL> <DT> <LI> <OL> TYPE=tip START=x <UL> TYPE=forma Descriere definitie. atunci cand aceasta este utilizata ca hiperlegatura. Lista ordonata (numerotata). Textul alternativ de afisat. Lista de tip definitie. square. Spatiul suplimentar pe orizontala din jurul imaginii (in pixeli). 1. Text cu font monospatiu. Termen de definitie. a.<U> </U> <TT> </TT> <CITE> </CITE> <CODE> </CODE> <EM> </EM> <KBD> </KBD> <STRONG> </STRONG> <VAR> </VAR> <BASEFONT SIZE = n> Afiseaza text subliniat. Valori posibile: A.

Alinierea celulelor de pe linia curenta (left. Numarul de linii pe care se intinde celula curenta de date. Spatiu suplimetar pe verticala in jurul tabelului. Culoarea chenarului tabelului. Alinierea materialului din cadrul celulei de date. Ajustarea riglelor tabelului. Chenarul tabelului. center. Aliniaza tabelul la marginea din stanga a paginii. Latimea impusa tabelului. Cea mai inchisa culoare din cele doua culori specificate. Defineste latimea unei coloane exprimata in pixeli. Specifica culoarea de fond pentru intreaga linie. Defineste un set de coloane cu ajutorul marcajului <col>. Aliniaza tabelul la marginea din dreapta a paginii. Linie de tabel. iar textul curge in partea stanga. Spatiul suplimentar in cadrul celulelor tabelului. Defineste titlul tabelului. right. right).Marcaje pentru Tabele <TABLE> </TABLE> BORDER=x CELLPADDING=x CELLSPACING=x WIDTH=x FRAME=valoare RULES=valoare BORDERCOLOR = culoare BORDERCOLORLIGHT = culoare BORDERCOLORDARK = culoare ALIGN=left ALIGN=right HSPACE=x VSPACE=x COLS=x <COLGROUP> </COLGROUP> <COL WIDTH=x> <THEAD> </THEAD> <TBODY> </TBODY> <TR> </TR> BGCOLOR=culoare ALIGN=aliniere <TD> </TD> BGCOLOR=culoare COLSPAN=x ROWSPAN=x ALIGN=aliniere Tabel HTML. Cea mai deschisa culoare din cele doua culori specificate. Defineste corpul tabelului. Ajustarea tabelului. Specifica numarul de coloane ale unui tabel. Numarul de coloane pe care se intinde celula curenta de date. Specifica culoarea de fond pentru celula de date. Spatiul suplimentar intre celulele tabelului. 28 . center. iar textul curge in partea dreapta. Spatiu suplimetar pe orizontala in jurul tabelului. Celula de date a tabelului. Valori posibile: left.

<a>. Cadru intern (numai pentru (IE). Numarul si marimea relativa a liniilor. bottom. Spatiu suplimentar la stanga si la dreapta unui anumit cadru. Aliniaza atat marginea din stanga cat si marginea din dreapta a unui text Marcaje pentru Cadre <FRAMESET> </FRAMESET> Definirea redactarii paginii. Numele cadrului (utilizat impreuna cu "TARGET=nume" ca parte componenta a marcajului de tip ancora. Numele ferestrei (util pentru TARGET). auto (automat). Specifica imaginea de fond pentru celula tabelului. Specifica starea "on" (activa) sau "off" (inactiva) pentru chenarul cadrului FRAMESET. Inaltimea cadrului inglobat. Nu permite despartirea textului pe linii in cadrul unei celule. Aliniaza o coloana fata de un anumit caracter (caracterul prestabilit este ". Defineste optiunea barei de derulare.VALIGN=aliniere BACKGROUND=url NOWRAP ALIGN=baseline ALIGN=caracter ALIGN=justify Alinierea pe verticala a materialului din cadrul celulei de date. Aliniaza celule de date cu linia de baza a textului adiacent. COLS=x ROWS=x BORDER=x FRAMEBORDER = x FRAMESPACING = x <FRAME> SRC=url NAME=nume SCROLLING=scrl FRAMEBORDER=x MARGINHEIGHT=x MARGINWIDTH=x <NOFRAMES> </NOFRAMES> <IFRAME> SRC=url NAME=s HEIGHT=x WIDTH=x Numarul si marimea relativa a coloanelor. Specifica marimea chenarului. Definitia unui anumit cadru. Sursa cadrului."). Sectiunea de pagina afisata pentru utilizatorii care nu pot vedea un cadru. Valori posibile: on (activa). off (inactiva). Spatiul suplimentar de deasupra si dedesubtul unui anumit cadru. Latimea cadrului inglobat. URL-ul sursa pentru cadru. middle. Valori posibile: top. 29 . Marimea spatiului dintre doua cadre adiacente. Marimea chenarului din jurul cadrului.

Camp de text sau alte date de intrare. Marcaje pentru Caractere Speciale & "&amp.Marcaje pentru Formulare <FORM> </FORM> ACTION=url METHOD=metoda <INPUT> TYPE=optiune NAME=nume VALUE=valoare CHECKED= optiune SIZE=x SIZE=x <SELECT> </SELECT> NAME=nume SIZE=x MULTIPLE=x <OPTION> VALUE=valoare <TEXTAREA> </TEXTAREA> NAME=nume ROWS=x COLS=x Formular HTML activ. Numarul de coloane (caractere) pe linie al casetei de text. Camp de intare de tip text pe linii multiple. password. Valoarea rezultata a selectiei din meniu. Numarul de caractere al unui camp de text . <FIELDSET> </FIELDSET> Imparte formularul in parti logice. Modul in care datele sunt transmise serverului(GET sau POST).ampersand. Continutul prestabilit al campului de text. reset. file. Tipul campului de intrare <INPUT>. checkbox. Numarul maxim de caractere acceptate. bottom. dar este afisat pe ecran. Numele simbolic al valorii campului. Elementul este inactiv. Programul CGI de pe serverul care receptioneaza datele." . Numele simbolic al valorii campului. image. Alegerea particulara intr-un domeniu <SELECT>. Numarul de linii al casetei de text. Specifica tasta care asigura comanda rapida de la tastatura asociata unui anumit element. Specifica ordinea elementelor atunci cand utilizatorul apasa tasta Tab. Numele simbolic al valorii campului. Valori posibile: text. submit. hidden. left. light). Permite selectia unor articole de meniu multiple. radio. Numarul de articole de meniu care se afiseaza odata (prestabilit=1). Specifica alinierea legendei (explicatiei) afisate (top. Elementul este afisat pe ecran dar nu poate fi editat. Grup de casete de validare. <LEGEND> </LEGEND> ALIGN=s TABINDEX=x ACCESKEY=c DISABLED READONLY Numele asociat setului de campuri (fieldset). 30 . Buton/caseta marcata in mod prestabilit.

" . Ce stil va folosi browser-ul la afisarea paginii web in cazul acelor taguri HTML pentru care avem definite mai multe stiluri? La modul general putem afirma ca toate stilurile utilizate pentru elementele HTML ale unei pagini web vor "cascada" intr-un fiser de stil virtual atot cuprinzator. In interiorul aceluiasi document HTML pot fi referite mai multe fisiere CSS externe." . Standardul CSS permite informatiilor cu privire la stil sa fie specificate si referite in mai multe feluri Stilurile pot fi specificate in interiorul fiecarui tag HTML in parte. In primul rand aceasta denumire are la origine posibilitatile oferite de tehnica CSS Practic. Totusi apare intrebarea fireasca. simbolul special n mic cu tilda. "&lt.mai mic (less than). simbolul special o mic barat (slash). Proiectare Site si Web Design . simbolul special de copyright.CSS". "&gt. aranjare in pagina.Standardul CSS Ce sunt stilurile Stilurile pun la dispozitia creatorilor de site-uri web noi posibilitati de personalizare a paginilor HTML. simbolul special $ (dolar). sintaxa CSS (Cascading Style Sheets). Terminologia CSS . in care precedenta diferitelor tipuri de stiluri aplicate tagurilor din pagina va fi urmatoarea (de la precedenta cea mai mica la precedenta cea mai mare): Prima precedenta: Stilul specificat in setarile Browserului (exemplu in IE: View -> Text Size -> Largest).mai mare (greater than). Un stil reprezinta un mod de formatare exacta a unui bloc de text (spre exemplu anumite caracteristici pentru font.." . marime.desemneaza "foi in stilul cascada".ghilimele. "&quot.tilda. "&#8364. A doua precedenta: Stilul specificat in cadrul setarilor din fisierul de stil extern. putand ulterior sa aplice implicit acest stil in toate paginile site-ului pentru elementul de pagina respectiv (adica pentru tagul HTML stilizat)." .. simbolul special a mic cu accent circiumflex. A treia precedenta: Stilul intern specificat in sectiunea HEAD a documentului HTML. Exista doua modalitati de a defini un stil 1.euro. 31 . tehnologia CSS faciliteaza oricarui proiectant de pagini web posibilitatea de a creea un stil pentru fiecare tag HTML intrebuintat la un moment dat.Cascading Style Sheets .˜ < > © ® " б в с ш $ € "&#732. vom vedea mai exact in continuare. De ce "foi in stilul cascada"." . 2. distantare fata de margini etc). culoare. simbolul special a mic cu accent ascutit. sintaxa Javascript. simbolul special pentru marca inregistrata. in cadrul sectiunii HEAD a documentelor HTML sau intr-un fiser extern cu extensia ".

ca mai sus.</style>.">text</P> <H3 style= "text-align:right.</head> (reprezentand head-erul documentului HTML). aliniat la stanga si de culoare verde </H3> Dupa cum s-a vazut. pentru apelarea unei clase de stiluri in vederea aplicarii sale elementului tag curent se foloseste atributul "class" avand ca valoare numele clasei de stil. 32 .. "P" si "DIV")..</HEAD>).">text</H3> </body> </html> Explicitarea a fost facuta. Stiluri dedicate Aceste stiluri se aplica blocurilor de text pentru care sunt definite si apelate pe loc.. DIV. charset=windows-1252"> <title>Stil dedicat inline</title> </head> <body> <H2 style= "text-align:right. color:#429EF7. De exemplu: <H3 style= "text-align:right. Asadar.) utilizand in interiorul fiecarui tag vizat o referire explicita la aceasta clasa: <TAG class=clasa-mea>.A patra precedenta: Stilul intern specificat in cadrul tagului curent.} </style> Cuvantul standard "all" aflat in fata clasei de stiluri "clasa-mea" indica faptul ca aceasta clasa este aplicabila tuturor blocurilor de text. H3.. daca dorim sa aplicam aceasta clasa de stiluri unui titlu de ordinul 3 (specificat in codul HTML prin tagul H3).</style> din header-ul documentului (delimitat de marcajele <HEAD>. color:green. aflat la randul sau in interiorul blocului <head>.">text</H2> <p style= "text-align:right."> In acest exemplu. fie se va utiliza stilul in mod explicit in cadrul fiecarui tag. Clase de Stiluri Clasele de stiluri permit definirea unui stil general (aplicabil in mai multe locuri in cadrul aceleiasi pagini sau in pagini diferite) in vederea inserarii lui oriunde este necesar printr intermediul unei simple referiri. in momentul utilizarii acestora. atunci scriem: <H3 class=clasa-mea> Acesta este un header de marime 3.clasa-mea {text-align:left. color:#429EF7. asociindu-i-se elementele de stil comune. etc.. P. Impreuna cu specificatia "all" din definirea clasei de stiluri.. Vom utiliza in acest sens blocul <style>. adica va putea fi asociat tuturor tagurilor HTML carora li se poate aplica (in acest caz celor care opereaza cu text). color:#429EF7. H6... "H2". P {text-align:right. asadar. Exemplu cu lista de stiluri in HEAD-er: <style> H2. "H3". Sa presupunem ca dorim sa definim o clasa de stiluri "clasa-mea" (pe care dorim sa o aplicam anumitor portiuni de text pentru a le face de apara de culoare verde si a aliniate la stanga)... Vom realiza ceea ce ne-am propus in felul urmator: <style> all. atunci cand este necesar. Daca dorim ca acelasi stil sa fie utilizat de catre mai multe elemente-tag (de ex. atributul "class" devine un atribut universal.} </style> Exemplu cu fiecare element de stil definit si apelat in cadrul tagurilor luate separat: <html> <head> <meta http-equiv="Content-Type" content="text/html. atunci fie se utilizeaza o lista cu aceste elemente (separate prin virgula) in sectiunea <style>. stilul va determina toate titlurile H3 din paginile HTML care fac apel la acest stil sa apara in browser in culoarea specificata si aliniate la dreapta. Practic clasa de stiluri "clasa-mea" poate fi asociata tuturor tagurilor HTML care opereaza cu text (ca de exemplu: H2. color:#429EF7. color:#429EF7.

. color:green..Observatii: ..clasa-mea-2 {text-align:left. In blocul <style>. . Exemplu: <p id="rosu">Acesta este un paragraf de text de culoare rosie</p> Daca dorim ca un stil "identificat" sa fie aplicabil numai pentru anumite elemente ale documentului (de exemplu "H3"). etc.} </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 </body> </html> Stiluri Identificate Absolut toate elementele tag ale unui document HTML admit un atribut universal numit "id". Pentru a utiliza un stil "identificat" procedam astfel: 1. atunci in constructia clasei va aparea acest element (de exemplu "p. ca in exemplul urmator: <html> <head> <title>Pagina cu stil identificat</title> <style> H3#rosu {color:red. 33 . Exemplu: <html> <head><title>Clase de stiluri dedicate</title> <style> p. centrat si de culoare rosie</H3> </body> </html> Stiluri Inline Stilurile in-line sunt acele stiluri definite chiar in eticheta HTML (marcajul) ce initiaza blocul in care dorim sa se aplice aceste stiluri.In interiorul unui bloc <style>. P.} (ca la definirea in HEAD sau in fiserul CSS extern .. In elementul (tagul) in care dorim utilizarea locala a acestui stil. Acest atribut "id" poate identifica prin valorile sale stilul utilizat de un tag HTML. Adica sunt ceea ce. folosim atributul "id" care primeste ca valoare numele identificator al stilului definit anterior." (dupa cum am aratat si din exemplele anterioare).. atunci in constructia (definitia) identificatorului de stil va aparea acest element (aici "H3"). cuprinsa nu intre acolade {. comentariile sunt blocuri delimitate de /* si */ (ca si in C. practic valoarea atributului "style". in continuarea caruia apare semnul egal. C+ +.clasa-mea-2"). urmeaza definirea stilului... pentru a defini stiluri inline se utilizeaza atributul universal "style" (comun practic tuturor etichetelor ce apar intr-un document HTML). text-align:center.dupa cum vom vedea}.</style>. am definit ca stil in interiorul tagurilor H2. ci intre ghilimele ". Valoarea data atributului "style" este tocmai descrierea stilului.Daca dorim ca o clasa de stiluri sa fie aplicabila numai pentru anumite elemente ale documentului (spre exemplu pentru paragrafele de text desemnate prin marcajul de paragraf "p").} </style> </head> <body> <H3 id=rosu>Acesta este un header de marime 3. Dupa cum am vazut deja.</style> introducem definitia stilului conform sintaxei: <style> #rosu {color: red} </style> 2.. Java si Javascript). la precedentele sectiuni dedicate standardului CSS. dupa care. intre ghilimele..

.</H3> Daca dorim utilizarea unui anumit stil pentru un fragment de text.</style>. Stilurile definite din fisierul CSS extern se activeaza ca si cum ar fi stiluri definite in fisierul HTML curent intr-un bloc <style>. Pentru a utiliza un stil definit intr-un fisier extern se procedeaza astfel: 1.. Continutul acestui fisier coincide cu continutul unui bloc <style>..</style> pot fi transferate intr-un fisier extern existand astfel posibilitatea asocierii lor mai multor fisiere HTML. dupa care putem utiliza atributul "style". 2. align=center. text-align: center.atributul "href" avand ca valoare adresa URL a fisierului creat la punctul 1. Se creaza un fisier care sa contina numai descrierea stilurilor si se salveaza cu extensia ".css".">Acest header are marimea 2. . este de culoare rosie si se pozitioneaza in pagina centrat.atributul "rel" cu valoarea "stylesheet". urmat de un tabel</H3> <table width="100%" border="1"> <tr> <th align="left">Nume</th> <th align="left">Prenume</th> <th align="left">Telefon</th> <th align="left">E-mail</th> </tr> <tr> 34 .. In fisierul HTML care utilizeaza stilurile definite in fisierul creat la punctul 1. color:green.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.... atunci includem acest text intr-un bloc cu ajutorul delimitatorilor <span>.</style>.</head> o eticheta <link>. fara ca acesti delimitatori sa fie inclusi. </span> </body> </html> Stiluri in Fisiere Externe Stilurile definite in interiorul unui bloc <style>..</span>. aliniat pe centru si de culoare verde.Concret: <H3 style= "color:red. se include in blocul <head>. charset=windows-1252"> <LINK REL= "stylesheet" TYPE= "text/css" HREF= "stil. Iata un fisier HTML cu un CSS extern: <html> <head> <meta http-equiv="Content-Language" content="en-us"> <meta http-equiv="Content-Type" content="text/html. in cadrul etichetei <span>. inline: <html> <head> <title>Pagina HTML cu stil inline</title> </head> <body><H3>Titlu de marime 3</H3> <span style="size:15pt..."> Acesta este un text cu corpul de litera de dimensine 15 puncte. avand trei atribute: . .atributul "type" cu valoarea "text/css".

</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> Fiserul CSS asociat (plasat in acelasi director) cu fisierul HTML de mai sus. este: H2.) Mentiune suplimentara In cazul in care. li { font-family: "lucida calligraphy".<td width="25%">Popescu</td> <td width="25%">Valentin</td> <td width="25%">4433978</td> <td width="25%">popescu@yahoo. atunci fisierul HTML va fi afisat in browser fara elementele de stilizare.p. } table {border-style:outset} li {list-style: square. "arial".H3.h3 { color:#483d8b. } p.com</td> </tr> <tr> <td width="25%">Ionescu</td> <td width="25%">Mihai</td> <td width="25%">5599786</td> <td width="25%">ionescu@yahoo. urmat de 2 liste:</h3> <ol> <li>Date personale student.com&nbsp. font-family: "lucida calligraphy". exact asa cum ar arata daca stilizarile nu ar fi existat.<h3>Acesta este un text formatat ca Header 3. } body { background-color:#fffaf0.td { font-size: 80%. margin-left: 10pt. table. Pseudo Clase de Stiluri 35 . "arial". dintr-un fisier HTML se face o referire la un fisier CSS care insa lipseste.</td> </tr> </table> <br> &nbsp. } li.th.

</a> Chestiune Auxiliara In browsere cursorul mouse-ului are in general o forma simpla si binecunoscuta. iata codul care va trebui folosit: <a href="fisier.. cat de tip imagine. Ele se definesc in interiorul unui bloc <style>.. • a: visited se refera la modul оn care arata un link deja vizitat. Exista insa si cazuri in care am dori ca acel cursor sa ia o alta forma decat cele doua predefinite.NordEst 36 .CLASA1 {. pentru obtinerea unei imagini a cursorului de tipul unei sageti insotite de un semn de intrebare la trecerea mouse-ului peste un link.} a: hover {color: red. Proprietatea care manipuleaza forma cursorului se numeste simplu: "cursor" si poate fi introdusa in orice element "style" al unui tag html. a: link. • specificatia "text-decoration: none" elimina sublinierea implicita cu o linie albastra a link-ului.</style> sau intr-un fisier extern. si aceasta problema isi gaseste rezolvarea in folosirea CSS ca limbaj de descriere a modului de stilizare a unui document.} combinat cu <a class = CLASA1 href=" "> .. La fel ca multe alte probleme care privesc modul in care arata o pagina.html" style="cursor: help">Legatura</a> Efectul este urmatorul (doar pentru IE minim 4.. a. atat de tip text. font-size: 15pt.Pseudoclasele se utilizeaza pentru personalizarea legaturilor web. luind pe parcursul vizionarii paginii respective maximum doua infatisari diferite: • Mana .0): Legatura cu CSS pentru stilizare cursor Nu este insa unicul mod de stilizare a cursorului mouse-ului.. font-style: italic. se pot folosi urmatoarele trei metode: 1. Pentru ca numai anumite legaturi sa utilizeze un stil... Exemplul de mai jos este edificator in acest sens: a: link {color: blue. • a: active se refera la modul оn care arata un link atunci cвnd se efectueaza click pe el. font-size: 15pt. text-decoration: none} a: visited {color: magenta.} combinat cu <a id = ID1 href=" "> . De exemplu.</a> 2. text-decoration: none} Explicatii: • a: link se refera la modul оn care arata un link оn mod normal.atunci cand este pozitinat pe o legatura • Sageata oblica din directia dreapta jos spre stanga sus .} combinat cu <a class = CLASA1 href=" "> .. Acestea sunt insa formele implicite.CLASA1: link {..atunci cand este pozitionat pe alt obiect decat o legatura.. a: link#ID1 {. In continuare prezentam codurile pentru toate formele de cursor care se pot folosi: auto crosshair default e-resize hand help move n-resize ne-resize utilizeaza setarile implicite ale utilizatorului creeaza o cruce setarile implicite ale browserului sageata Est-Vest mana semnul intrebarii cruce cu sageti la capete sageata sud-nord sageata SudVest . font-size: 15pt.. text-decoration: none} a: active {color: cyan.. • a: hover se refera la modul оn care arata un link atunci cвnd se trece cu mouse-ul peste el (оn Netscape functioneaza doar de la varianta 6)...</a> 3.

.cel putin la nivel mediu . I. JavaScript . permitand scrierea de secvente de program care se executa la aparitia unui eveniment utilizator. Spre deosebire de JavaScript.de exemplu Netscape Navigator (incepand cu versiunea 2.Sud sageata NordVest . De vreme ce aceste browsere sunt extrem de raspandite.SudEst sageata NordEst .atat a limbajului HTML.0) sau Microsoft Internet Explorer (Ms.NordVest mana sageata Nord . <p></body> </html> La prima vedere acesta bucata de cod arata ca un fisier HTML normal. Consideram ca pentru moment nu trebuie sa enumeram diferentele.incepand cu versiunea 3.nw-resize pointer s-resize se-resize sw-resize text w-resize wait sageata SudEst . Pentru a utiliza in paginile proprii evenimente tratabile prin JavaScript avem bineinteles nevoie si de cunosterea . multi utilizatori (peste 90%) au posibilitatea de a rula fara probleme programele JavaScript. haideti sa ne aruncam privirile peste un exemplu simplu: <html><head><title>Pagina HTML cu JavaScript</title></head> <body> <br><p> Acesta este un document HTML continand JavaScript. Pentru a vedea cum functioneaza JavaScript.write("Acesta este JavaScript!") </script> <br><p> Din nou text si cod HTML..E. Singura noutate o constituie blocul <script>. Inserarea JavaScript in documentele HTML Codul JavaScript poate fi introdus direct in pagina HTML. Pentru mai multe informatii privind limbajele Java si JavaScript va recomandam lucrarea "Java. trebuie doar sa retinem faptul ca JavaScript nu este Java. modalitati de valorificare si integrare in propriile pagini web a tehnologiei JavaScript.JavaScript . </p> <script language="JavaScript"> document..Generalitati JavaScript este un limbaj de scripting dezvoltat la origine de Netscape.</script>: 37 . Vom prezenta in continuare fundamentele JavaScript si.0).SudVest bara verticala campuri de introducere a datelor sageata Est-Vest clepsidra Proiectare Site si Web Design . cat si a limbajului de scripting JavaScript. Rularea programelor JavaScript De ce avem nevoie pentru a rula scripturi concepute in limbajul JavaScript? Avem in primul rand nevoie de un browser care suporta JavaScript .Profesional" oferita de site-ul nostru in cadrul pachetului de carti electronice generic intitulat "Internetul pentru Afaceri". JavaScript nu este Java! Trebuie sa facem distinctie intre limbajul de programare Java si limbajul de scripting JavaScript. Java este un limbaj de progrmare considerat "de nivel inalt" (foarte aproapiat de gandirea utilizatorului si nu de arhitectura calculatorului) care permite scrierea de aplicatii de aproape orice tip si grad de complexitate. mult mai important.

Acesta este un text ce va fi afisat in fereastra de avertizare. De aceea vom explora subiectul inca din aceasta sectiune. Asa ca trebuie sa alternam ghilimelele.acelasi rezultat il puteam obtine uzand de cod HTML mult mai simplu. "Alert()" ne permite sa cream ferestre de avertizare (de tip popup windows). In cazul nostru sirul este 'Yo'. codul in cauza defineste ce se intampla cand butonul este apasat. Noua bucata de cod JavaScript este onClick="alert('Yo')" in interiorul tagului <input>. In comanda document. Nu conteaza ordinea in care folosim ghilimelele ..write() " este o rutina JavaScript folosita pentru a scrie text. Deci scriptul dat ca exemplu creeaza o fereastra cu continutul 'Yo' atunci cand utilizatorul apasa butonul.mai intai cele duble si apoi cele simple sau viceversa. micul nostru program JavaScript scrie textul "Acesta este JavaScript!" in documentul HTML in care a fost inserat. Dar in ultimul exemplu am scris onClick="alert('Yo')" puteti vedea ca am folosit si ghilimele simple si duble. Am dorit numai sa exemplificam utilizarea tagului <script>. Daca utilizatorul apasa un buton. Este adevarat ca acest script extrem de simplist nu este unul folositor . computerul executa alert('Yo'). Managerul de evenimente (event-handler-ul) pe care trebuie sa-l utilizam este numit "onClick". Asa cum am spus deja. un eveniment de tip "Click" are loc. Proiectare Site si Web Design . intr-un document (in acest caz in documentul HTML curent).write() am folosit ghilimele duble " " dar in combinatie cu alert() am folosit ghilimele simple ' '. Acesta este JavaScript! Din nou text si cod HTML. Un lucru poate ne poate induce in eroare. "Document. Evenimentele sunt de cele mai multe ori declansate de actiuni ale utilizatorului.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 si fisier normal HTML lansand pagina HTML astfel salvata in browserul nostru cu suport JavaScript.JavaScript . Daca browserul suporta JavaScript vom vedea 3 linii: Acesta este un document HTML continand JavaScript. Tot ce este intre eticheta <script> si eticheta </script> este interpretat drept cod JavaScript. De ce? In principiu pot fi ambele utilizate.. Daca am fi scris onClick="alert("Yo")" interpretorul ar fi fost indus in confuzie pentru ca nu este clar care parte apartine de "onClick event-handler" si care nu. Atunci cand un eveniment "Click" are loc. Putem observa folosirea document. Urmatorul cod este un exemplu simplu de "event-handler onClick": <form> <input type="button" value="Click me" onClick="alert('Yo')"> </form> Exista cateva lucruri care trebuie analizate in codul JavaScript de mai sus In primul rand putem observa ca am creeat un buton cu ajutorul unui formular (aceasta este o problema de HTML asa ca nu va fi analizata aici). Sa scriem un script care furnizeaza un anumit text de trei ori consecutiv: <script language="JavaScript"> <!-. imagini. Putem scrie fara nici o problema onClick='alert("Yo")'.hide 38 . Functiile sunt o metoda profesionala de a lega mai multe comenzi impreuna. Aceasta se poate realiza cu ajutorul managerilor de evenimente sau gestionarilor de evenimente .una dintre cele mai importante comenzi in programarea JavaScript. atunci un eveniment de tip "MouseOver" are loc. Acesta este codul JavaScript (se observa ca nu utilizam tagul <script> in acest caz). In interiorul parantezelor trebuie sa specificam un sir.<script language="JavaScript"> document. Un buton poate creea o fereastra atunci cand este apasat.write() .Exemple Evenimente Evenimentele sunt foarte importante in programarea JavaScript. Dorim ca programul JavaScript sa reactioneze la unele evenimente. Functii Vom utiliza functii in cea mai mare parte a programelor noastre JavaScript. Daca mouse-ul este deasupra unei legaturi."event-handlers". Aceasta inseamna ca fereastra apare ca o reactie la evenimentul "Click". Acesta spune brwoser-ului computerului utilizator ce sa faca atunci cand evenimentul are loc. etc. Asadar.

document. } myFunction(). // --> </script> <body></body> </html> In scriptul din sectiunea BODY a documentului HTML de mai sus am definit si apelat o functie. Fiecare obiect are anumite proprietati si metode prin care poate fi manipulat. myFunction(). introdus intr-un document HTML. } Comenzile din interiorul {} tin de implementarea functiei myFunction().write("Acesta este javascript!<br>"). myFunction(). va scrie de trei ori: Bine ai venit pe pagina mea! Acesta este JavaScript! Analizand codul sursa observam ca scriind de trei ori comanda ajungem la rezultatul scontat. Dar este eficient? Nu.JavaScript . In exemplul nostru avem trei apelari ale functiei. Cu ajutorul JavaScript putem lucra cu usurinta cu obiectele componente ale unei pagini web.write("Acesta este JavaScript!<br>").write("Acesta este JavaScript!<br>").write("Bine ai venit pe pagina mea!<br>").write("Acesta este JavaScript!<br>").write()" vor fi executate prin apelarea functiei. Aceasta inseamna ca ambele comenzi "document. Practic toate elementele sunt vazute ca obiecte. // --> </script> Acest script. Vom intelege mai bine mecanismul de functionare printr-un exemplu. document. document.Ierarhii JavaScript organizeaza toate elementele unei pagini web intr-o ierarhie de obiecte. Definirea s-a realizazt cu urmatoarele linii de cod: function myFunction() { document.write("Bine ai venit pe pagina mea!<br>").write("Bine ai venit pe pagina mea!<br>").write("Bine ai venit pe pagina mea!<br>"). deci haideti sa rezolvam problema mai simplu. document. document. Ce spuneti de codul urmator care face acelasi lucru: <html><head></head> <body></body> <script language="JavaScript"> <!-. Pentru a putea face acest lucru este foarte importanta intelegerea ierarhiei obiectelor HTML. Codul urmator este o pagina HTML simpla: 39 .write("Bine ai venit pe pagina mea!<br>"). Rezultatul executiei este: Bine ai venit pe pagina mea! Acesta este JavaScript! Bine ai venit pe pagina mea! Acesta este JavaScript! Bine ai venit pe pagina mea! Acesta este JavaScript! Proiectare Site si Web Design . document. document.hide function myFunction() { document. Putem observa ca am scris "myFunction()" de trei ori imediat sub definitia functiei.document. Acestea sunt trei apelari ale functiei si au rolul de a face ca functia sa fie executata de trei ori.write("Acesta este JavaScript!<br>").

fereastra browserului este un obiect "window".net">Pagina demo</a> </center> </body> </html> Iata o imagine a paginii (am adaugat cateva adnotatii cu culoarea rosie): Avem doua imagini (sigla si bara de jos)./.</center> </p> <center> <a href="http://www. Din punctul de vedere al mecanismelor JavaScript. In interiorul ferestrei principale putem incarca un document (pagina) HTML (sau un fisier de alt tip .. bara de stare (status bar) din partea cea mai de jos a ferestrei browserului. o legatura ("Pagina de inceput") si un formular cu doua campuri text (Nume / E-mail).<html> <head> <title>Pagina mea</title> </head> <body bgcolor=#ffffff> <center> <img border="0" src=".ne vom limita pentru moment la fisiere de tip HTML)./images/linie. respectiv un buton (Trimite)./images/search_logo.. Acest obiect (fereastra browser asimilata si ca fereastra principala) contine unele elemente ca.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=". Obiectul document este un obiect foarte 40 .. de exemplu. Aceasta pagina odata incarcata este asadar un obiect document.afaceri-online..gif" width="207" height="11"><br> &nbsp. Aceasta inseamna ca obiectul document este chiar pagina HTML incarcata la un anumit moment in browser./.

3 astfel de documentatii fiind oferite de site-ul AfaceriOnline ca anexa la cartea electronica "Java. Putem citi aceasta valoare cu ajutorul urmatoarei linii de cod: name= document. dorim sa descriem in cele ce urmeaza cateva lucruri de baza. Prima imagine este reprezentata prin images[0].forms[0]. Pentru crearea de cadre se folosesc doua taguri: <frameset> si <frame>. O pagina HTML care creaza doua frame-uri poate arata astfel: <html> <frameset rows="50%.value. trebuie sa accesam acest obiect. insa pentru a sti ce metode si proprietati ofera obiectul. Mai important este faptul ca toate obiectele HTML sunt proprietati ale obiectului document.htm" name="frame1"> 41 . O proprietate a obiectului document este. spre exemplu. fiind situata pe nivelul 1 (imediat inferior). Vom incepe intotdeauna cu nivelul cel mai de sus. Sirul este inmagazinat in variabila name. Aceasta inseamna ca putem accesa primul element (elements[1]) prin apelul: document. ca in cazul ilustratiei noastre. Daca. Putem de acum incolo sa lucram cu aceasta variabila. Pentru a putea face acest lucru trebuie sa putem accesa diferite obiecte in cadrul ierarhiei. Desi crearea de frame-uri este o problema HTML. Mai intai trebuie sa explicam ce sunt frame-urile si la ce pot fi folosite. va trebui sa cercetam cu atentie documentatia JavaScript (ne referim atat la documentatia de la Netscape cat si la alte documentii bune aparute pe piata .images[0]. dorim sa stim ce introduce utilizatorul in al doilea camp din formular. o legatura sau un formular. "Value" este practic textul introdus in elementul text. Proiectare Site si Web Design . Fiecare cadru (frame) incarca in el un document (de cele mai multe ori de tip HTML). Daca dorim sa adresam prima imagine din pagina HTML trebuie sa ne uitam in ierarhie. Fereastra browserului poate fi impartita in mai multe frame-uri (cadre.se foloseste extrem de frecvent. De exemplu putem creea doua cadre astfel: in primul frame putem incarca pagina de deschidere a site-ului Netscape iar in cel de-al doilea pagina principala a site-ului Microsoft. Urmarim calea pana la obiectul numit elements[1] specificand toate obiectele intermediare pe masura ce le depasim.JavaScript .elements[1] Putem afla si ce text a fost introdus? Desigur. Putem vedea numele obiectelor in imaginea de mai sus a ierarhiei. Urmatoarea imagine arta ierarhia creata de pagina noastra: Dorim acum sa obtinem informatii despre obiecte si sa manipulam aceste obiecte.50%"> <frame src="page1. Aceasta inseamna ca putem accesa acest obiect particular prin intermediul unui apel JavaScript cu ajutorul sintaxei: document. culoarea de fundal a paginii.important in JavaScript . de exemplu. Aceasta inseamna ca un frame reprezinta o parte din suprafata ferestrei browserului. Din nou pornim din varful ierarhiei.Ferestre Cadru O intrebare frecventa este cum interactioneaza frame-urile (cadrele) si JavaScript. de exemplu. JavaScript Profesional"). Un obiect HTML este. ferestre). Mentionam in cazul exemplului nostru faptul ca in referinte vom putea constata ca un element text are proprietatea value.elements[1].forms[0]. Primul obiect (nivelul 0) este denumit document.

htm" iar frame-ul de jos prezinta documentul "page2.x). "child frame" acceseaza un alt "child frame" Din punct de vedere al ferestrei parinte cele doua frame-uri copil se numesc "frame1" si "frame2".htm" name="frame2"> </frameset> </html> Aceasta secventa de cod produce doua frame-uri.33%. Frame-urile si JavaScript Acum putem sa ne dam seama cum vede JavaScript frame-urile intr-o fereastra a browserului. Remarcam utilizarea proprietatilor "rows" in tagul FRAMESET. Aceasta fereastra este impartita in doua frame-uri. Partea "50%.htm"> </frameset> <frameset rows="33%. Trebuie sa analizam trei cazuri: 1. Deci daca avem un script in fereastra parinte . Fiecare frame are un nume unic specificat cu ajutorul atributului "name" din eticheta <frame>. Putem vedea in imaginea de mai sus ca exista o conexiune directa intre fereastra parinte si fiecare frame copil in parte.si dorim 42 .50%"> <frame src="cell.*" daca nu dorim sa calculam cat de larga trebuie sa fie cea de-a doua fereastra pentru a ajunge la 100% din spatiul ramas. Aceasta inseamna ca cele doua cadre create cu tagul FRAME se afla unul deasupra celuilalt.htm"> <frame src="cell.htm". "parent window/frame" acceseaza "child frame" 2. Cu ajutorul acestor nume putem schimba informatii intre cele doua frame-uri. Putem de asemenea sa scriem "50%.50%"> <frameset rows="50%. Urmatoarea imagine arata ierarhia aferenta primului exemplu: In varful iererhiei este fereastra browser. Fereastra mare (implicita) a browserului este "parinte" in aceasta ierarhie iar cele doua frame-uri sunt "copiii". "child frame" acceseaza "parent window/frame" 3.33%"> <frame src="cell. "Border=0" inseamna ca nu vom avea margine la cadru (atributul nu functioneaza cu Netscape 2. Frame-ul de sus incarca pagina HTML "page1. Pentru aceasta vom utiliza cele 2 cadre create in primul exemplu. Acest atribut ne va ajuta sa accesam frame-urile cu ajutorul JavaScript. Aceasta se pastreaza si pentru frame-uri.htm"> <frame src="cell. Daca dorim sa avem coloane in loc de randuri trebuie sa scriem "cols" in loc de "rows" inauntrul tagului FRAMESET.in pagina care creaza frame-urile .htm"> </frameset> </frameset> Putem fixa dimensiunile marginii prin intermediul proprietatii (atributului) "border" din eticheta <frameset>.htm"> <frame src="cell. Iata un exemplu: <frameset cols="50%. Am vazut ca JavaScript organizeaza toate elementele de pe o pagina intr-o ierarhie.50%" specifica in procente ecran cat de mari sunt cele doua ferestre. Putem sa dam celor doua fram-euri numele "frame1" si "frame2".<frame src="page2. Putem de asemenea specifica dimensiunea in pixeli omitand simbolul %.

Deoarece dorim sa eliminam frame-urile trebuie sa utilizam obiectul locatie al ferestrei parinte. cea de-a doua fereastra (frame2) este vazuta copil. Din punct de vedere al ferestrei parinte (parent). Eliminarea structurii de cadre inseamna doar incarcarea unei pagini noi in locul paginii (ferestrei) parinte care a creeat frame-urile. this is frame1 calling. Iata si o ilustrare a exemplului: Cateodata putem dori sa accesam fereastra parinte dintr-un frame pentru a rescrie (spre exemplu) continutul acesteia.document. in timp ce fereastra browserului este vazuta ca parinte de catre primul frame (frame1). Aceasta inseamna ca nu putem apela "frame2" din "frame1" deoarece frame-urile nu se cunosc intre ele (nu stie unul de existenta celuilalt). inclusiv pentru frame-ul parinte apelat din frame-urile copil.location. Iata si ilustrarea acestui exemplu: 43 . Pentru a incarca un nou document trebuie sa furnizam un nou URL parametrului "location. Iata si o ilustrare a exemplului: Foarte des ne vom pune problema accesarii unui frame copil din alt frame copil.").htm" reprezentand un frame copil? In imaginea aferenta exemplului folosit de noi pana acum putem vedea ca nu exista legatura directa intre cele doua frame-uri.href".write("Hi.frame2.write("A message from the parent window.document. Cum putem influenta din interiorul primei ferestre continutul celei de-a doua? Ce comanda sa folosim intr-o pagina numita "page1.href= "http://. Ele sunt conectate indirect. Vom avea o locatie obiect pentru fiecare frame."). Asadar acest procedeu poate fi util atunci cand dorim sa eliminam pe cat posibil frame-urile la accesari repetate.sa accesam prin intermediul acestuia frame-urile (continutul unuia dintre ele) pentru a scrie date.". Putem incerca o noua pagina in fereastra parinte cu comanda: parent.. trebuie doar sa folosim numele frame-ului. indepartand structura de frame-uri la reaccesarea paginii parinte pornind dintr-un frame copil. prin intermediul ferestrei parinte. Putem accesa fereastra parinte ("parent frame") din interiorul ferestrelor copil cu ajutorul cuvantului predefinit "parent".. De exemplu putem scrie: frame2. Deci in primul frame trebuie sa scriem urmatoarea referire pentru a avea acces la obiectul document al celui de-al doilea frame (frame2): parent.

JavaScript . Putem controla modul in care apare noua ferestra.Crearea Ferestrelor Deschiderea automata a unei noi ferestre de browser este una dintre proprietatile deosebite ale JavaScript. "displayWindow". In cele ce urmeaza vom vedea cum putem deschide o noua fereastra si incarca o pagina HTLM existenta in aceasta fereastra. Urmatorul script deschide o noua fereastra browser si incarca o pagina oarecare: <html> <head> <script language="JavaScript"> <!-function openWin() { myWin= open("fereastra. "width=200.htm"). Urmatorul script deschide o noua fereastra care are dimensiunile 200x300.toolbar=no. Putem sa incarcam in noua fereastra fie un document deja creat (de exemplu un document HTML de pe server).menubar=yes"). } // --> </script> </head> <body> <form> <input type="button" value="Open new window" onClick="openWin2()"> </form> 44 . o bara de instrumente sau o bara de meniuri.height=300. De exemplu fereastra poate avea o bara de stare.htm" este incarcata in noua fereastra prin intermediul metodei "open()". fie putem crea si incarca un document nou.Proiectare Site si Web Design . Fereastra nu va avea o bara de stare sau o bara de instrumente dar va avea o bara de meniuri.status=no.htm". <html> <head> <script language="JavaScript"> <!-function openWin2() { myWin= open("fereastra. } // --> </script> </head> <body> <form> <input type="button" value=Deschide fereastra noua" onClick="openWin()"> </form> </body> </html> Pagina "fereastra.

Tot ce aveti de facut este sa dati o valoare-sir lui "window.height=300. Urmatorul exemplu creaza doua butoane care pot fi folosite pentru a scrie un text oarecare pe bara de stare iar apoi pentru stergerea acestui text.Bara de Stare Programele dumneavoastra JavaScript pot scrie in bara de stare a browserului .menubar=yes Observam de asemenea ca nu trebuie folosite spatii in acest sir! Iata o lista a proprietatilor (impreuna cu domeniul de valori) pe care o fereastra le poate avea: directories height location menubar resizable scrollbars status toolbar width yes / no number of pixels yes / no yes / no yes / no yes / no yes / no yes / no number of pixels alwaysLowered yes / no alwaysRaised dependent hotkeys innerWidth innerHeight outerWidth outerHeight screenX screenY titlebar z-lock yes / no yes / no yes / no number of pixels number of pixels number of pixels number of pixels position in pixels position in pixels yes / no yes / no Proiectare Site si Web Design .</body> </html> Se poate cu usurinta constata faptul ca specificam proprietatile in sirul: width=200.toolbar=no.JavaScript .acea bara din partea de jos a ferestrei dumneavoastra de browser.status=no. Scriptul arata astfel: 45 .status".

Daca nu utilizam "return true". Efectul este realizat cu ajutorul unei 46 . In interiorul parantezelor specificam sirul "Salut! Aceasta este bara de stare!". Daca dorim ca scriptul nostru sa fie compatibil cu Netscape 2. In loc ca bara de stare sa afiseze locatia web a paginii din link. Sirul "txt" este afisat pe bara de stare prin intermediul "window.deci va sterge textul nostru instantaneu si utilizatorul nu il va putea citi. Aceasta inseamna ca browserul nu va executa codul sau propriu ca reactie la evenimentul "onMouseOver".status = txt."> </form> </body> </html> Creem un formular cu doua butoane. Pe platformele Unix textul dispare chiar daca browserul nu cunoaste "onMouseOut".status=txt.status=txt". este posibil ca pe bara de stare sa avem o descriere a paginii.este de ajuns sa pozitionam cursorul deasupra legaturii pentru ca mesajul din bara de stare sa devina "Don't click here!". Daca folosim Netscape Navigator 2. return true.initiata de apasarea butonului "Scrie!" .trebuie doar sa le separam prin virgule.status='Don\'t click here!'. Putem transmite mai multe valori functiilor .<html> <head> <script language="JavaScript"> <!-.x pentru Windows.net">Acest link</A> Aici utilizam onMouseOver si onMouseOut pentru a detecta cand pointerul mouse-ului trece pe deasupra legaturii (linkului). Aceasta inseamna ca sirul pe care il transmitem este inmagazinat intr-o variabila "txt". } Ceea ce aduce nou exemplul de fata este folosirea "txt" in interiorul parantezelor din declararea functiei. Codul pentru acest exemplu arata astfel: <A onmouseover= "window." onmouseout= "window. Pe platformele Windows textul nu dispare. putem scrie de exemplu o functie care afisaza textul pe bara de stare si il sterge periodic dupa o anumita bucata de timp. ceea ce inseamna ca sirul este trimis functiei statbar().status"."> <input type="button" name="erase" value="Erase!" onClick="statbar(''). browserul va scrie pe bara de stare textul sau implicit (adresa de web) imediat ce codul nostru a fost executat . Transmiterea valorilor catre functii este deseori folosita pentru a face functiile mai flexibile. Putem vedea ca apelarea functiei . In mod obisnuit browserul afiseaza pe bara de stare URL-ul (adresa de Internet) spre care trimite legatura.arata astfel: statbar('Salut! Aceasta este bara de stare!'). } // --> </script> </head> <body> <form> <input type="button" name="look" value="Write!" onClick="statbar('Salut! Aceasta este bara de stare!').0. Afisarea textului pe bara de stare poate fi usor utilizata in combinatie cu legaturile hipertext. Acest link demonstreaza chiar asta .hide function statbar(txt) { window. In general putem suprima actiunile browserului folosind "return true" in managerul de evenimente.x putem obtine rezultate diferite pe platforme diferite." href="http://www. Stergerea textului de pe bara de stare se face prin definirea unui sir gol pentru "window. Probabil va intrebati de ce trebuie sa scriem "return true" in interiorul proprietatii "onMouseOver". Am definit functia "statbar()" astfel: function statbar(txt) { window.afaceri-online. Ambele butoane apeleaza functia "statbar()". "OnMouseOut" nu exista in JavaScript 1.status=''.

"1" este folosit pentru Februarie. 35. Matrice (Array) sau Matematic (Math).. Exista si alte obiecte . Vom examina obiectul "Date" Dupa cum sugereaza si numele. Trebuie creeat mai intai un nou obiect de tip "Date". Sau putem adauga ora exacta documentului nostru HTML. 23) Aceasta secventa de cod va creea un obiect Date cu proprietatile "Ianuarie 1997. asa cum am fi putut presupune. Petru aceasta folosim un nou operator.cateodata vom dori sa afisam in textul de iesire (output) ghilimele simple. Daca dorim sa afisam textul "Don't click me". Nu este vorba de un ceas care arata trecerea fiecarei secunde sau milisecunde automat.getMonth() + 1) + "/" + now. In scriptul exemplificat mai sus putem vedea inca un lucru . Deci trebuie specificata data si ora dupa tiparul: Date(year.Profesional" (oferita de site-ul nostru in cadrul pachetului de carti electronice "Internetul Pentru Afaceri"). ora 17:35 si 23 secunde". 1.getMinutes() + "<br>").getHours() + ":" + now. Acasta inseamna ca dupa executarea "today=new Date()". acest obiect ne permite sa lucram cu data si ora din calculator putand cu usurinta.m. getMonth(). setMonth() si asa mai departe. setHours(). minutes.pauza (timeout). Acest aspect este analizat in cartea electronica "Java.intreruperi . Rezultatul ar arata astfel: Time: 21:55 Date: 12/8/3903 Codul arata astfel: <script language="JavaScript"> <!-. de exemplu. Sa observam ca obiectul de tip "Date" reprezinta numai o data sau o ora "statica". setMinutes(). 0.write("Date: " + (now.write("Time: " + now.getDate() + "/" + (1900 + now. document."today".". sa calculam cate zile au mai ramas pana la Craciunul urmator.ceea ce inseamna ca urmarea apartine iesirii de la terminal (textului pur afisat ca mesaj pe monitor).Obiecte Predefinite Java Script ne permite sa folosim cateva obiecte predefinite. seconds) Observam ca trebuie sa folosim "0" pentru Ianuarie . Pentru a obtine o noua data si o noua ora trebuie folosita o alta constructie (este vorba de tipul "Date" apelat printr-un nou operator in momentul constructiei obiectului): today= new Date(1997.a. JavaScript Profesional" oferita de site-ul nostru in cadrul pachetului de carti electronice "Internetul Pentru Afaceri" si al carei cuprins va invitam sa il examinati indeaproape. Tipul Date ofera cateva metode care pot fi folosite cu obiectul "today" Se pot folosi getHours(). Evident.. Puteti gasi documentatia completa asupra obiectului "Date" si asupra metodelor sale in anexa lucrarii "Java. hours.getYear())). Sa fim putin atenti la urmatoarea linie de cod: today=new Date() Aceasta creeaza un nou obiect de tip "Date" . 17. noul obiect Date . Proiectare Site si Web Design . spre exemplu. putem sa utilizam "\" (backslash) inaintea ghilimelelor . obiectele Data (Date). JavaScript .JavaScript . 47 .si nu "1". day. al carei cuprins va invitam sa il examinati indeaproape. conform sintaxei JavaScript folosim gilimele simple (apostroafe) deorece specificam sirul in interiorul unui manager de evenimente "onMouseOver". putem folosi acelasi procedeu si cu ghilimele duble. Pentru a rezolva problema."today" va reprezenta data si ora din momentul prezent. Acestea sunt.hide now= new Date(). month. Sa incepem cu un exemplu care afiseaza ora exacta. document. 2 pentru Martie s.putem apela documentatia oferita de Netscape pentru informatii complete. Daca nu specificam o anumita data si ora cand cream un nou obiect "Date". getMinutes().d. Acum putem realiza un script care sa furnizeze data si ora actuala. Dar cuvantul "Don't" foloseste inca o ghilimea simpla! Browserul este practic ametit daca scriem direct "Don't . atunci data si ora existente vor fi cele folosite.

getSeconds(). daca anul prezent ar fi 1997 metoda va returna 97. month= now. 48 .value = timeStr. Sa aruncam asadar o privire asupra unui script care afiseaza un ceas functional: <html> <head> <script Language="JavaScript"> <!-.clock. dateStr+= ((date < 10) ? "/0" : "/") + date.getMonth()+1. seconds= now. Timer= setTimeout("clock()". timeStr+= ((seconds < 10) ? ":0" : ":") + seconds. Metoda get Year() returneaza numarul anului incepand cu 1900.clock. Am afirmat mai devreme ca exista o problema cu minutele mai mici de 10 . dateStr= "" + month. timeStr+= ((minutes < 10) ? ":0" : ":") + minutes. Functia "clock()" scrie data si ora in aceste doua elemente in formatul corespunzator.getMinutes().acest script o rezolva cu ajutorul urmatoarei linii de cod: timeStr+= ((minutes < 10) ? ":0" : ":") + minutes. // date date= now. Putem vedea ca folosim doua siruri in acest scop: "timeStr" si "dateStr".nu 10! Daca adaugam 1900 scapam de problema anului 2000. Asadar.getYear().getDate(). daca anul prezent ar fi 2010 va returna 110 . In partea de continut a paginii HTML avem doua elemente de text. Putem observa ca am adaugat 1900 anului. function clock() { now= new Date(). Acest script nu verifica daca numarul minutelor este mai mic dacat 10 pentru a-l afisa corespunzator. year= now. Vom vedea in urmatorul exemplu cum se poate rezolva aceasta problema. Aceasta inseamna ca s-ar putea obtine ceva sub forma 14:3 care de fapt inseamna 14:03.value = dateStr. Putem vedea ca functia Clock() este apelata de un "onLoad event-handler" in tagul <body>. } // --> </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 setTimeout() pentru a stabili ora si data in fiecare secunda. Deci creem in fiecare secunda un nou obiect de tip "Data" cu ora exacta.getHours(). minutes= now. document.time. document.// --> </script> Aici trebuie sa folosim metode ca getHours() pentru a afisa data si ora specificate in obiectul de tip "Date". dateStr. timeStr= "" + hours.date.1000). dateStr+= "/" + year. in formatul ":0x". // time hours= now.hide var timeStr.

Formularul din pagina HTML va contine 2 campuri text. desigur. Criteriul de baza pentru a accepta datele introduse ca si adresa de e-mail este ca aceste date trebuie sa contina caracterul "@". Datele introduse in formular (input) sunt de regula trimise catre server sau prin posta electronica spre un cont de e-mail. Toate adresele de e-mail contin "@" asa ca este normal sa cautam "@" in adresa (printre altele).text1. De asemenea putem incerca sa nu introducem nimic si sa apasam butonul.Aici numarul de minute este adaugat sirului "timeStr". Daca numarul minutelor este mai mic de 10 trebuie sa adaugam 0.value+"! Form input ok!"). Codul este urmatorul: <FORM name=first>Introduceti numele dumneavoastra:<BR><INPUT name=text1> <INPUT onclick=test1(this. Putem introduce orice in formular si apoi avem grija sa apasam butonul de trimitere. Nu o sa treaca testul (decat daca ati avea caracterul "@" in numele dumneavostra).in casuta pentru e-mail. Utilizatorul trebuie sa introduca numele in primul camp si adresa de email in cel de-al doilea. Mai intai sa creem un script simplu. Dorim sa demonstram in aceasta sectiune cum pot fi formularele verificate (validate). } } function test2(form) { if (form. Cum arata scriptul pentru aceste doua elemente? Iata-l: <html> <head> <script language="JavaScript"> <!-.text1. nu este o conditie suficienta ci numai necesara. Dar putem fi siguri ca datele intoduse de catre utilizator in formular pentru a fi trimise sunt si corecte? Cu ajutorul JavaScript datele introduse intr-un formular pot fi cu usurinta verificate inainte de a fi transmise prin Internet. Se pare ca nu este cel mai bun mod de verificare. Desigur. Desi codul acesta poate parea straniu.form) type=button value="Test Input" name=button2> </P></FORM> Rezultatul este urmatorul: Introduceti numele dumneavoastra: þÿ Introduceti adresa dumneavostra de email: þÿ In cazul primului element de formular se va returna un mesaj de eroare daca nu este nimic introdus.value == "") alert("Please enter a string!") else { alert("Hi "+form.value == "" || 49 . Asa ca daca veti introduce "17" va fi returnat mesajul "Hi 17!". Incercati sa introduceti un sir simplu .form) type=button value="Test Input" name=button1> <P>Introduceti adresa dumneavostra de email:<BR><INPUT name=text2> <INPUT onclick=test2(this.text2. Un sigur "@" ajunge dar. Cel de-al doilea element de formular este mai sofisticat.numele dumneavostra de exemplu .Hide function test1(form) { if (form. acest tip de verificare insa nu impiedica utilizatorul sa introduca un nume fictiv! Browserul accepta si numere. il putem scrie si in modul de mai jos care lar putea face sa para mai familiar: if (minutes < 10) timeStr+= ":0" + minutes else timeStr+= ":" + minutes. Validarea Datelor din Formularele HTML Formularele (Forms) sunt foarte des intalnite pe Internet.

Practic. Acestea sunt consemnate ca un input valid! Daca doriti.Obiectul Image Vom examina in continuare obiectul Image ce a aparut odata cu JavaScript 1. Proiectare Site si Web Design . Fiecare imagine de pe o pagina web are atribuit un anumit numar de ordine. Fiecare imagine dintr-un document HTML este considarata un obiect Image.0 si nu pot sa ruleze scripturile implicand lucrul cu obiecte de tip "Image".0) folosesc JavaScript 1. Aceasta se realizeaza prin intermediul secventei "if (form. Credem ca este destul de simplu tinand cont de restrictiile prevazute in cazul nostru.text2.indexOf('@'. matricea "images" este o proprietate a obiectului "document". 0) == -1) alert("No valid e-mail address!").) sau test2(. Un obiect "Image" are o serie de proprietati care pot fi accesate prin JavaScript.. atunci comanda "if" primeste valoarea "adevarat" si urmatoarea comanda este executata.. Cu ajutorul obiectului "Image" putem schimba imaginile din pagina web in functie de evenimentele utilizator.JavaScript . utilizatorul va primi un mesaj OK. Utilizatorul va primi un mesaj de eroare. Astfel avem posibilitatea sa creem animatii interactive in paginile web. Sa aruncam o privire si peste functia test2(form). Aceasta matrice este numita "images". Haideti sa vedem cum pot fi adresate imaginile cu ajutorul JavaScript Toate imaginile dintr-o pagina web sunt reprezentate si evidentiate in JavaScript printr-o matrice. Functia test1(form) verifica daca sirul este gol.. } // --> </script> </head> <body> <form name="first"> Enter your name:<br> <input type="text" name="text1"> <input type="button" name="button1" value="Test Input" onClick="test1(this.images[0].0 si Microsoft Internet Explorer 3.form..value. Daca datele introduse sunt egale cu "" atunci nu a fost introdus nimic. else alert("OK!").value == ""). De exemplu putem vedea ce dimensiuni are o imagine folosind proprietatile "width" si "height". Anume operatorul "||" numit si operatorul OR.form catre functii pentru a adresa elementele din functii. Dar mai trebuie ceva adaugat comenzii "if".".) in functie de ce buton este apasat. "form" fiind variabila care primeste valoarea "this.text1". In acest fel comanda "if" verifica daca prima sau cea de-a doua comparare este adevarata. Pentru a vedea daca sirul este gol il comparam cu "". Aceasta functie compara sirul de intrare cu un sir gol "" pentru a fi siguri ca a fost introdus ceva. Concret: 50 .text1.form)"> <P> Enter your e-mail address:<br> <input type="text" name="text2"> <input type="button" name="button2" value="Test Input" onClick="test2(this. Este vorba doar de creerea a doua elemente text si doua butoane. Prima imagine are numarul 0.. puteti verifica aceste posibilitati si sa le excludeti.form)"> </body> </html> Mai intai sa ne uitam putin la codul HTML din corpul documentului. Daca ceva este introdus.1 (deci cu Netscape Navigator 3. Transmitem this. Adresam deci prima imagine cu document. Putem obtine valoarea elementului introdus prin folosirea "value" in combinatie cu "form. Daca cel putin una dintre ele este adevarata. Problema care poate aparea aici este ca utilizatorul poate introduce numai spatii. cea de-a doua imagine are numarul 1 si asa mai departe.0). Butoanele apeleaza functiile test1(.form". Mentionam ca browserele mai vechi (Netscape Navigator 2. Asadar vom obtine un mesaj de eroare numai daca sirul este gol sau daca nu exista caracterul @ in sirul nostru..

Trebuie sa avem intotdeauna in vedere viteza conexiunii. Puteti si testa acest exemplu apasand butonul de mai jos (codul functioneaza numai o singura data): Preincarcarea imaginilor Unul dintre neajunsuri este ca noua imagine este incarcata dupa ce a fost atribuita o noua valoare (adresa) proprietatii "src". Pentru aceasta folosim proprietatea "src".gif este incarcata si ia numele "myImage".src= hiddenImg. Daca imaginea ce urmeaza sa se suprapuna peste vechea imagine la declansarea evenimentului utilizator nu a fost deja incarcata pe calculatorul utilizatorului la incarcarea paginii in browser. este necesara o perioada suplimentara de timp pentru incarcarea imaginii din Internet atunci cand aceasta este solicitata.gif". browserul va presupune ca imaginea nu este afisata dupa ce s-a terminat incarcarea paginii impreuna cu toate elementele sale (text. nu prea avem neaparat nevoie de acest lucru. A doua linie defineste adresa imaginii care va fi reprezentata de obiectul "hiddenImg". La fel ca in tagul <img>.gif" este deja incarcata cand cea de-a doua linie de cod este executata. javascript.images[0]. Asa cum sugereaza cuvantul standard "hiddenImg". Iata si un exemplu: <img src="imagine-javascript.width furnizeaza latimea (in pixeli) a primei imagini din pagina web.src= "img3.1 putem da o noua adresa unei imagini deja incarcate (suprascriind practic aceasta imagine).gif" name="myImage" width=100 height=100> o putem adresa apoi din JavaScript utilizand fie sintaxa: "document. Daca avem prea multe imagini pe o singura pagina devine din ce in ce mai greu sa le tinem pe toate sub observatie.myImage.gif". grafica. Noua imagine are intotdeauna aceleasi dimensiuni ca si vechea imagine. Urmatoarea linie de cod inlocuieste fosta imagine "imagine-javascript. Am vazut deja ca atribuirea unei noi valori-adresa atributului "src" forteaza browserul sa incarce imaginea de la adresa indicata. Incarcarea imaginii noi Desi este de dorit cate o data sa stim care sunt dimensiunile unei imagini pe o pagina web. Cu JavaScript 1. Deja noi avem incarcata imaginea. hiddenImg. proprietatea "src" reprezinta si in JavaScript adresa imaginii afisate.images["myImage"]".). Rezultatul este ca imaginea de la noua adresa va fi si ea incarcata.src= "imagine-2-javascript. Prima linie creeaza un nou obiect "Image".src. Acum imaginea este preluata din memoria cache si afisata imediat.. Pentru a afisa noua imagine putem sa folosim urmatoarea linie de cod: document. Pentru aceasta creem un nou obiect "Image". Imaginea este pastrata in memoria temporara a browserului in vederea unei utilizari ulterioare.gif" name="myImage" width=100 height=100> Imaginea img1. In unele cazuri acest fenomen nu creeaza probleme .dar exista si situatii in care astfel de intarzieri sunt inacceptabile. Deci imaginea "imagine-2-javascript. Daca avem un numar mare de imagini pe care le preincarcam este posibil sa avem intarzieri in afisare. ci doar sa fie incarcate inainte de a fi afisate la declansarea evenimentului utilizator. Nu putem schimba suprafata de afisare a imaginii.myImage". Daca declaram o imagine prin tagul: <img src="img. fie: "document. Bineinteles ca browserul trebuie sa fi terminat incarcarea fisierului (fara ca utilizatorul sa supravegheze procesul) pentru a putea afisa imaginea fara intarzieri.document.. preincarcarea imaginilor nu face ca imaginile sa fie incarcate mai repede. Dorim sa putem schimba imaginile pe pagina in functie de evenimentele utilizator (de exemplu trecerea mouse-ului peste imagine). Aceasta noua imagine inlocuieste vechea imagine de pe pagina web la declansarea evenimentului utilizator. etc. Schimbarea imaginii ca urmare a unor actiuni initiate de utilizator 51 .myImage. Haideti sa vedem si codul: hiddenImg= new Image().gif" cu o noua imagine "imagine-2-javascript. Atribuirea de nume fiecarei imagini rezolva aceasta problema. cel maiprobabil la declansarea unui eveniment utilizator. Deci ce putem face? Solutia este preincarcarea imaginilor.gif": document.

Putem creea efecte deosebite prin schimbarea imaginilor ca urmare a unor evenimente. 10-iulie-2001" in pagina HTML.'Iunie'.gif'"> <img src=". mai multe sau mai putine. Site si Web Design .net" onmouseover="document. Sa testam acest exemplu prin mutarea mouselui deasupra imaginii (mentionam ca se va genera un mesaj de eroare intr-un browser care utilizeaza JavaScript 1. 'Vineri'. 52 ./. Practic sunt trei puncte care trebuie avute in vedere pentru a avea un script flexibil: Numarul de imagini . 4. 10-iulie-2001" in pagina HTML. Positionarea imaginilor . plasate ca meniuri in tabele sau constituinduse ca butoane interactive izolate.'Iulie'..'August'.'Marti'..'Miercuri'. Utilizatorul nu foloseste un browser compatibil JavaScript 1. Trebuie rescris codul pentru fiecare imagine in parte./images/imagine-javascript. 'Octombrie'.'Joi'. asadar care sa poata fi folosit in multe pagini fara modificari substantiale. // dar trebuie sa fie INAINTE de script var DayOfWeek = new Array('Duminica'.afaceri-online./.'Septembrie'.'Martie'. Este de dorit sa avem un script care sa poata fi folosit in mai multe pagini.Afisare data</title> </head> <BODY> <SPAN id=data></SPAN> <script language="javascript"> <!-// puneti span-ul unde doriti sa afisati data./images/imagine-2-javascript.myImage2..Exemple Afisare data Afiseaza data computerului sub forma "Luni. Spre exemplu.'Februarie'.'Decembrie').nu conteaza daca sunt 10 sau 100 imagini.myImage2.JavaScript . aplicabil asadar fara adaptari ulterioare unei game largi de situatii concrete..vom vedea si cum sa evitam aceasta eroare): Codul sursa al acestui exemplu arata astfel: <A href="http://www.nu conteaza ca sunt butoane singulare sau meniuri. JavaScript . Ordinea imaginilor . Cea de-a doua imagine nu a fost inca preincarcata. charset=windows-1252"> <title>Exemplu JavaScript-HTML .trebuie sa fie posibila schimbarea ordinii imaginilor fara a fi necesara modificarea codului.0 .gif'" onmouseout="document. Dorim sa avem un script cu un grad mare de generalitate. 2. in situatii diverse implicand imagini mai mari sau mai mici./images/imagine-javascript.'Sambata').'Aprilie'.'Luni'. var MonthName = new Array('Ianuarie'. putem schimba imaginile la trecerea mouseului deasupra unei zone a paginii.gif" name="myImage2" width=120 height=38 border=0></A> Aceasta secventa de cod cauzeaza unele probleme atunci cand: 1.Profesional" se prezinta un script complet ce rezolva elegant aceste probleme..src='.'Noiembrie'.1.src='. In cartea electronica "Java. 'Mai'./.. Exemplul este integrat in codul HTML al unei pagini oarecare pentru a putea fi usor de urmarit si vizualizat. Scriptul este mai lung dar universal (cu grad mare de generalitate). <html> <head> <meta http-equiv="Content-Type" content="text/html. Afisare Data Acest exemplu JavaScript afiseaza data computerului sub forma "Luni. 3.

</H3> </body> </html> Afisare pop-up fara margine Apare o fereastra pop-up fara margini (doar in IE4+). popupX.location=false.width=" + width + ".directories=false"./bogdan_world". popupY) { var optiuni = "screenX=" + popupX + "..sub forma unei pagini web reclame. Afisare Fereastra Popup Acest exemplu JavaScript va afisa intr-o noua fereastra a browserului o pagina de tip popup putand contine reclame.. width."Bogdan". // modificati caracteristicile ferestrei window. true).resizable=false. height. etc.getDate() + '-' + MonthName[theDate.left=" + popupX + ". informatii diverse.Document"> <meta http-equiv="Content-Type" content="text/html.300. In celelalte browsere va aparea o fereastra pop-up obisnuita.var theDate = new Date(). } openPopup(". Exemplul este integrat in codul HTML al unei pagini web oarecare pentru a putea fi usor de urmarit si vizualizat.getYear() + 1900 : theDate. // data poate fi sub forma 84 sau 1984 //--> </script> </BODY> </html> Afisare fereastra pop-up Va fi afisata o noua fereastra a browserului care va contine ...0"> <meta name="ProgId" content="FrontPage.getMonth()] + '-' + (theDate. data. optiuni. charset=windows-1252"> <title>Exemplu de pop-up JavaScript</title> <script> function openPopup(url.getDay()] + '.Editor.scrollbars=false. windowName. Afisare Fereastra Popup Fara Margine 53 . windowName.toolbar=false./..300. </script> </head> <body> <H3 align="right">Pagina aceasta lanseaza un pop-up.100). informatii diverse. Aceasta fereastra nu poate fi inchisa decat daca este apasat "Alt-F4" (nu are buton de inchidere).screenY=" + popupY + ". notificari utilizator. etc.innerHTML = '<NOBR>' + DayOfWeek[theDate.open(url.status=false"+ ". notificari utilizator.menubar=false.top=" + popupY + ". <html> <head> <meta name="GENERATOR" content="Microsoft FrontPage 5.100.getYear()) + '</NOBR>'.getYear() < 1000 ? theDate.. ' + theDate.height=" + height + "..

open("".Editor.document. } else { win=window.open(urlPop. window. // de aici in jos nu e nevoie de vreo modificare function openpopup(){ if (document. In celelalte browsere va aparea o fereastra popup obisnuita."scrollbars.left="+left+".Document"> <meta http-equiv="Content-Type" content="text/html.width="+windowW+ ". win."popup".write( "<html>"+ "<head>"+ "<title>"+titlu+"</title>"+ "</head>"+ "<Frameset><frame src='"+url+"' name='fr' scrolling=auto>"+ "</frameset></html>"). Exemplul este integrat in codul HTML al unei pagini web oarecare pentru a putea fi usor de urmarit si vizualizat. <html> <head> <meta name="GENERATOR" content="Microsoft FrontPage 5.Acest exemplu JavaScript va afisa intr-o noua fereastra a browserului o pagina de tip popup care nu are marginile specifice unei ferestre Internet generate de browser.focus() } </script> </head> <body> <H3 align="center">Pagina aceasta lanseaza un pop-up fara margini la click-ul utilizatorului pe link</H3> <p align="center"> <a href="javascript:openpopup()">Click Aici pentru Pop-up</a> </p> </body> </html> 54 . } win."fullscreen. asadar nu are nici butoane sau meniuri.html" var titlu = "Cool! fereastra fara margine!!" var windowW=200 // latime var windowH=300 // inaltime var winx = 100 var winy = 100.windowH). win.top="+top).width="+windowW+ ".height="+windowH).focus().resizeTo(windowW.all) // doar pentru IE { win = window.0"> <meta name="ProgId" content="FrontPage. win.height="+windowH+". win."popFrameless".moveTo(winx.blur(). neputand fii inchisa in IE4+ decat prin actionarea simultana a combinatiei de taste "Alt+F4".winy). charset=windows-1252"> <title>Exemplu de pop-up fara margini in JavaScript</title> <script> // schimba variabilele acestea var url = "popup.

var adr = new Array("www.yahoo."dapyx". pagina va afisa un alt link dintr-o lista predefinita de mai multe linkuri. Exemplul este integrat in codul HTML al unei pagini oarecare pentru a putea fi usor de urmarit si vizualizat. Aflare si Afisare Rezolutie Monitor Acest exemplu JavaScript afiseaza in pagina rezolutia monitorului de forma "800 x 600".write("<a href=http://"+adr[n]+">"+txt[n]+"</a>") // refresh pentru alt link //--> </script> </head> <BODY BGCOLOR="#E9E9E9"> </BODY> </html> Afiseaza rezolutia monitorului Afiseaza in pagina rezolutia monitorului. Exemplul este integrat in codul HTML al unei pagini web oarecare pentru a putea fi usor de urmarit si vizualizat.random() * txt."javascript. <html> <head> <meta http-equiv="Content-Type" content="text/html."www. <html> <head> <meta http-equiv="Content-Type" content="text/html. de forma "800 x 600".write("Ati sosit de pe pagina: " + document."google".com". <html> <head> <meta http-equiv="Content-Type" content="text/html. charset=windows-1252"> <title>Link aleator dintr-o lista de linkuri</title> <script> <!-var txt = new Array("yahoo".go.Afisare referer Pagina in care a fost utilizatorul inainte sa intre in pagina curenta.referrer + "!!") </script> </BODY> </html> Afisare aleatoare de linkuri De fiecare data cand va fi incarcata. charset=windows-1252"> <title>Afisare Referer Vizitator</title> </head> <BODY> <Script> document. var n = Math.dapyx.floor(Math. Exemplul este integrat in codul HTML al unei pagini oarecare pentru a putea fi usor de urmarit si vizualizat.go. charset=windows-1252"> <title>Rezolutii monitoare</title> </head> <body> <script> 55 . "www.ro"). Identificare si Afisare Referer Acest exemplu JavaScript afiseaza pagina in care a fost utilizatorul inainte sa intre in pagina curenta.ro").javascript.ro".go."www.google. document.com".length). Afisare Aleatoare a unui Link dintr-o Lista de Linkuri Acest exemplu JavaScript face ca de fiecare data cand este incarcata pagina sa se afiseze un alt link dintr-o lista predefinita de linkuri.

Captarea si Afisarea Codului Sursa al unei Pagini Web Acest exemplu JavaScript afiseaza in pagina un link care odata activat (printr-un click de mouse) genereaza un fiser text cu codul sursa al paginii.location="view-source:"+window.setTime(niciodata. In acest caz.">Vezi codul sursa al paginii curente</a> </body> </html> Aflare nume utilizator si salvare in cookie Utilizatorul este rugat sa-si tasteze numele.toGMTString().cookie = name + "=" + escape(value) + expString. <html> <head> <meta http-equiv="Content-Type" content="text/html. // expira peste 2000 de zile :) function SetCookie(name. expires=" + niciodata. dupa salvarea in cookie in pagina se va afisa un salut catre utilizator. Exemplul este integrat in codul HTML al unei pagini web oarecare pentru a putea fi usor de urmarit si vizualizat. value) { var expString = ". } 56 . charset=windows-1252"> <title>Captare nume utilizator in cookie</title> </head> <body> <SCRIPT language="JavaScript"> <!-var niciodata = new Date() niciodata. dupa care acest nume este salvat intr-un cookie si utilizat in pagina. } //--> </script> </head> <body> <a href="#" onclick="viewsource(). Exemplul este integrat in codul HTML al unei pagini web oarecare pentru a putea fi usor de urmarit si vizualizat. charset=windows-1252"> <title>Afisare Cod Sursa Pagina Web</title> <script language="Javascript"> <!-function viewsource() { window. Aflare Nume Utilizator si Salvare in Cookie Acest exemplu JavaScript intreaba utilizatorul care este numele sau si salveaza apoi acest nume intr-un cookie pentru utilizarea ulterioara in diferite contexte a numelui captat. utilizand numele stocat in cookie. <html> <head> <meta http-equiv="Content-Type" content="text/html.height) //--> </script> </body> </html> Afiseaza sursa HTML a paginii Un link la activarea caruia se va afisa sursa documentului HTML. document.location.<!-document.write(screen.getTime() + 2000*24*60*60*1000).width + " x " + screen.

while (repeat) { if ((nume == null) || (nume == defaultString)) nume = prompt("\r\nIntroduceti numele". var searchName = " " + name + "=". endOfCookie = myCookie. } } if ((nume != null) && (nume != defaultString)) { document. nume). } else { document. <html> <head> <meta http-equiv="Content-Type" content="text/html. Animatie in StatusBar Acest exemplu JavaScript afiseaza o mica animatie in bara de jos a browserului (statusbar).Funny text script by Bart Jellema var hellotext="What do you think of this?" var thetext="" 57 . defaultString). if (GetCookie("nume") == null) repeat = confirm("Vei fi intrebat de fiecare data cand " + "vizitezi aceasta pagina daca nu introduci numele sau " + "nu accepti cookies-uri. Exemplul este integrat in codul HTML al unei pagini oarecare pentru a putea fi usor de urmarit si vizualizat. startOfCookie). result = unescape(myCookie. var endOfCookie. charset=windows-1252"> <title>Animatie JavaScript in StatusBar</title> <script language="JavaScript"> <!-.write("<H3>Salut si bine ai venit in pagina mea!</H3>"). repeat = false.write("<H3>Salut "+nume+"! Bine ai venit in pagina mea!</H3>").cookie + ". } // --> </SCRIPT> </body> </html> Animatie in status-bar O mica animatie in status-bar (==>=). endOfCookie)). } return result. if ((nume != null) && (nume != defaultString)) SetCookie('nume'. var nume = GetCookie("nume"). Mai incerci o data?").".length.substring(startOfCookie.// returneaza valoarea unui cookie sau null daca nu exista function GetCookie(name) { var result = null. } var defaultString = "Numele Tau: ".". var myCookie = " " + document.indexOf(searchName).indexOf(". if (nume == null) { repeat = true. var startOfCookie = myCookie. if (startOfCookie != -1) { startOfCookie += searchName.

200).status='=>=>'+thetext+'<=<='} if (step==5) {window. window. Exemplul este integrat in codul HTML al unei pagini oarecare pentru a putea fi usor de urmarit si vizualizat. } // Funny text script by Bart Jellema --> </script> </head> <body onLoad="welcometext()"> <H3> Uite-te in bara de jos a browser-ului (statusbar) </H3> </body> </html> Bannere afisate prin rotatie Afiseaza pe rand o serie de bannere.status='==>='+thetext+'=<=='} if (step==6) {window. setTimeout("welcometext()". charset=windows-1252"> <title>Exemplu JavaScript cu Bannere Afisate prin Rotatie</title> <SCRIPT> <!-58 .status='>=>='+thetext+'=<=<'} if (step==4) {window. setTimeout("anim()".status='===>'+thetext+'<==='} setTimeout("anim()".status='>==='+thetext+'===<'} if (step==2) {window. Bannere Afisate prin Rotatie Acest exemplu JavaScript afiseaza in pagina prin alternanta dupa un anumit timp mai multe bannere (poze cu linkuri) dintr-un director local.1). dupa un anumit interval de timp banner-ul curent fiind inlocuit cu urmatorul.status = hellotext. } thetext = hellotext.var started=false var step=0 var times=1 function welcometext() { times-if (times==0) { if (started==false) { started = true. } } function showstatustext(txt) { thetext = txt. <html> <head> <meta http-equiv="Content-Type" content="text/html.status='=>=='+thetext+'==<='} if (step==3) {window.4000) times++ } function anim() { step++ if (step==7) {step=1} if (step==1) {window.

3000)./images/imagine-javascript.complete) { bann++ if (bann == adImages./images/imagine-2javascript.gif"). function stopclock (){ if(timerRunning) clearTimeout(timerID).adBanner. Exemplul este integrat in codul HTML al unei pagini web oarecare pentru a putea fi usor de urmarit si vizualizat. } setTimeout("rotate()".gif".. var hours = now. var id.. } function showtime () { var now = new Date(). <html> <head> <meta http-equiv="Content-Type" content="text/html.getHours().gif" WIDTH=120 HEIGHT=38 NAME="adBanner"> </CENTER> </BODY> </html> Bara de afisare a orei exacte Ora exacta este afisata intr-un textbox. } document. ".adImages = new Array(".adBanner.getSeconds() var timeValue = "" + ((hours >12) ? hours -12 :hours) 59 . function rotate() { if (document. var minutes = now.images) { if (document. charset=windows-1252"> <title>Ora Exacta in TextBox</title> <script language="JavaScript"> <!-var timerID = null. Afisarea Orei Exacte intr-un Textbox din Pagina Web Acest exemplu JavaScript va afisa in pagina in interiorul unui textbox ora exacta pana la secunda inclusiv.getMinutes().position=0.length) // cand am ajuns la sfarsit { bann = 0. timerRunning = false. var timerRunning = false. // la 3 secunde } } // --> </SCRIPT> </head> <BODY onLoad="rotate()"> <CENTER> <IMG SRC="./images/imagine-javascript..pause=0. bann = 0.src=adImages[bann]. var seconds = now.

. var dir = "left"..... } // --> </SCRIPT> </head> <body onload=startclock() > <FORM name="clock" onSubmit="0"> Ora exacta este : <INPUT type="text" name="face" size="%speed" value=""> </FORM> </BODY> </html> Bouncing text in status-bar Un text care se misca de stanga la dreapta si inapoi (in status-bar). timerRunning = true. var buffer1=" .. ". 60 .." document..... setTimeout("bounce().speed).. <html> <head> <meta http-equiv="Content-Type" content="text/html..M. Exemplul este integrat in codul HTML al unei pagini web oarecare pentru a putea fi usor de urmarit si vizualizat. if (message1.length)+" ". var speed = 100. setTimeout("bounce().. ". var message1=buffer1+yourwords+buffer2..... var buffer2=" .clock.message1.1000).message1.. charset=windows-1252"> <title>Text in Statusbar</title> <script language="JavaScript"> <!-var yourwords = "Bine ati venit pe site-ul de proiectare promovare afaceri online !!!". window. window. message1=message2.substring(2.speed).. } else { message2=" "+message1.status=message2..") dir="right".face.. Afisare Text Animat in Statusbar Acest exemplu JavaScript va afisa un text care se misca de la stanga la dreapta si inapoi in status-bar.length-2).M..value = timeValue. message1=message2.". } function startclock () { stopclock().status=message2.timeValue += ((minutes < 10) ? ":0" : ":") + minutes timeValue += ((seconds < 10) ? ":0" : ":") + seconds timeValue += (hours >= 12) ? " P.substring(0." : " A..". function bounce() { if (dir == "left") { message2=message1.1) == ". timerID = setTimeout("showtime()". showtime().substring(0.

if (message1. font-weight:normal. text-decoration:none. font-family:arial.length-1.borderColor= "white black black white". border-style: solid. text-align: center.fbuton:hover { border-color:white black black white.style.fbuton { padding: 2px 12px 3px 12px. charset=windows-1252"> <title>Butoane Interactive de tip "Flat"</title> <style> . } function up(fbuton) { fbuton. } </style> <script> function dw(fbuton) { fbuton.length) == ".") dir="left". Exemplul este integrat in codul HTML al unei pagini web oarecare pentru a putea fi usor de urmarit si vizualizat. border-width: 1px. border-style: solid. } } bounce(). } . border-width: 1px. background-color: #DDDCCC. border-color: #B2B2B2. <html> <head> <meta http-equiv="Content-Type" content="text/html. font-size:12.style.borderColor= "black white white black".message1. Creare Butoane Interactive in Stil "Flat" Acest exemplu JavaScript va afisa patru butoane interactive de tip link realizate in stil "flat".substring(message1. background-color: #C7C7BA. color:black. text-decoration:none. // --> </script> </head> <body> <H3>Urmareste textul din statusbar</H3> </BODY> </html> Butoane in stil "flat" Linkurile apar ca butoane de tip flat. } 61 .

in loc sa fie afisat meniul popup al browserului specific Windows sau sa se realizeze o alta actiune implicita.">Buton4</a> </BODY> </html> Buton cu o imagine de fundal Un buton obisnuit poate lua o infatisare deosebita cu CSS folosind o imagine sau o culoare ca fundal.">Buton1</a> <a href="url2" class="fbuton" onmousedown="dw(this).apasarea butonului din dreapta sau din stanga al mouse-ului . Exemplul este integrat in codul HTML al unei pagini web oarecare pentru a putea fi usor de urmarit si vizualizat. Manipulare Evenimente Buton Stanga si Buton Dreapta Mouse Acest exemplu JavaScript capteaza evenimentele utilizator de tip "mouse" . Creare Butoane Interactive cu Imagine de Fundal Acest exemplu JavaScript va afisa doua butoane interactive realizate cu o culoare.go. charset=windows-1252"> <title>Detectare click utilizator si preluare functii mouse</title> <script language="JavaScript"> var message="Ati efectuat click pe butonul din dreapta"." onmouseout="up(this).go !!!" TYPE="submit" style="background-image:url('plasma.jpg').all) { if (event.si.button == 2) { alert(message). } } 62 ." onmouseout="up(this)." onmouseout="up(this). <html> <head> <meta http-equiv="Content-Type" content="text/html.go !!!" TYPE="submit" style="background:'skyblue'"> </BODY> </html> Captare efect buton dreapta mouse Capteaza apasarea butonului din dreapta al mouse-ului si in loc sa fie afisat meniul popup al browserului specific Windows." onmouseout="up(this). function click(e) { // Internet explorer if (document. return false.go. se va afisa o caseta de dialog. <html> <head> <meta http-equiv="Content-Type" content="text/html.">Buton3</a> <a href="url4" class="fbuton" onmousedown="dw(this). charset=windows-1252"> <title>Butoane cu Imagini si Culori de Fundal</title> </head> <BODY BGCOLOR="#E9E9E9"> <INPUT value="go.font-weight:bold"> <INPUT value="go.</script> </head> <BODY BGCOLOR="#E9E9E9"> <a href="url1" class="fbuton" onmousedown="dw(this).">Buton2</a> <a href="url3" class="fbuton" onmousedown="dw(this). respectiv cu o imagine de fundal. Exemplul este integrat in codul HTML al unei pagini web oarecare pentru a putea fi usor de urmarit si vizualizat. se va afisa o caseta de dialog personalizata.

layers) { // capturez evenimentul la NS document.value-32)/1.celsius.celsius.fahrenheit.MOUSEDOWN).form)"> Fahrenheit <INPUT TYPE="text" NAME="fahrenheit" SIZE=15 63 . } } } if (document.which == 3) { alert(message).value*1.8+32 } function fartocel (form) { form.fahrenheit.value = round((form. <html> <head> <meta http-equiv="Content-Type" content="text/html.// Netscape Navigator if (document. Exemplul este integrat in codul HTML al unei pagini web oarecare pentru a putea fi usor de urmarit si vizualizat. charset=windows-1252"> <title>Conversie Grade</title> <SCRIPT LANGUAGE="JavaScript"> function celtofar (form) { form.Fahrenheit Acest exemplu JavaScript converteste temperatura din grade Celsius in grade Fahrenheit si invers. </script> </head> <BODY BGCOLOR="#E9E9E9"> <form name="form2"> <p align="center"> <input type="submit" name="banner" VALUE="Buton pentru detectat clickurile de mouse" onClick="alert('Ati efectuat click pe butonul din stanga')"> </p> </form> </BODY> </html> Celsius <-> Fahrenheit Conversie intre temperatura exprimata in grade Celsius si cea exprimata in grade Fahrenheit. return false.captureEvents(Event.onmousedown=click.8) } </SCRIPT> </head> <body> <FORM> Celsius <INPUT TYPE ="text" NAME="celsius" SIZE=15 onkeypress ="celtofar(this.layers) { if (e. } document.value = form. Conversie Temperatura Celsius .

Exemplul este integrat in codul HTML al unei pagini web oarecare pentru a putea fi usor de urmarit si vizualizat.. (salvare adresa pagina in Favorites). charset=windows-1252"> <title>Pagina cu icon personalizat un Favorites</title> <LINK REL="SHORTCUT ICON" HREF=".onkeypress ="fartocel(this. acesta sa poata avea atasat in IE5+ un icon personalizat vizibil in Favorites. acesta poate avea in IE5+ un icon personalizat.toString().all || document. t = new Date().status = t. charset=windows-1252"> <title>Data si Ora Afisate in TitleBar</title> <script> <!-function showclock() { window. if(document. } } showclock() //--> </script> </head> <body> </body> </html> Favorites icon Atunci cand este setat un bookmark la site-ul dvs. Afisare Data si Ora in TitleBar Acest exemplu JavaScript afiseaza data si ora (actualizate la fiecare secunda) in titlebar si statusbar.toString().getElementById) { document. 1000 )./. } else { self. <html> <head> <meta http-equiv="Content-Type" content="text/html. Exemplul este integrat in codul HTML al unei pagini web oarecare pentru a putea fi usor de urmarit si vizualizat.setTimeout( "showclock()"..form)"> </form> </body> </html> Data si ora in titlebar Afiseaza data si ora (actualizate la fiecare secunda) in titlebar si statusbar. Bookmark la Site cu Icon Vizibil in Favorites Acest exemplu JavaScript face ca atunci cand este setat un bookmark la site-ul dvs.ico"> <!--//aceasta imagine trebuie sa fie un icon cu dimensiunea 16x16 pixeli--> </head> <body> <p>Pagina cu icon personalizat un Favorites</p> </body> </html> 64 . <html> <head> <meta http-equiv="Content-Type" content="text/html./images/iconul-meu.title = t.

Sign up to vote on this title
UsefulNot useful