UNIVRSITATEA TITU MAIORESCU FACULTATEA DE ŞTIINŢA ŞI TEHNOLOGIA INFORMAŢIEI

TEHNICI WEB

Lector univ. dr. Mironela Pîrnău

- 2008 -

1

HTML CREAREA PAGINILOR WEB CU HTML

Crearea unei pagini Web folosind HTML presupune: - Editarea şi salvarea fişierului cu extensia .html sau .htm folosind: - un editor de texte obişnuit (Notepad, Wordpad, Word, etc.); - un editor de texte dedicat (Front Page, Dreamwaver, Homesite, HotDog, HotMetal, etc.) - Rezolvarea referinţelor conţinute în pagina Web (legături, imagini, sunete, aplicaţii Java, etc.) După cum ne putem da seama încă din denumirea sa, HTML-ul nu este un limbaj de programare ci mai degrabă un “limbaj de marcare a textului”, un set de coduri speciale care se inserează într-un text, pentru a adăuga informaţii despre formatare şi despre legături. Această marcare a textului se face cu ajutorul unor tag-uri (marcaje, etichete). Un tag este introdus întotdeauna între paranteze unghiulare, sub forma: <nume_tag atribut1=”valoare1” atribut2=”valoare2” … > Marcajele html pot avea sau nu şi o formă de închidere: </nume_tag> Marcajele html se aplică unui text sau chiar altor marcaje prin cuprinderea lor între forma de deschidere şi forma de închidere. Spre exemplu, marcajul <HTML> indică browser-ului că documentul este scris şi formatat în limbajul HTML. Forma de închidere este </HTML>. De reţinut faptul că browser-ele Web ignoră formatările aplicate textului cu ajutorul procesoarelor de texte valabile fiind doar formatările aplicate cu ajutorul tag-urilor html. Un fişier html este de obicei împărţit din motive de organizare, în două secţiuni: - antetul (header-ul) care conţine informaţii introductive de formatare a documentului. Este demarcat de forma de deschidere şi forma de închidere a marcajului <HEAD>… </HEAD>. Informaţiile cuprinse de acest marcaj nu apar în pagina Web. - corpul efectiv al documentului adică ceea ce este vizualizat în fereastra browser-ului este cuprins între marcajele <BODY> şi </BODY>. Observaţie: O etichetă poate fi scrisă atât cu litere mari, cât şi cu litere mici. Inserarea unui titlu pentru pagina web Un lucru subtil dar simplu pe care îl putem face este să inserăm un titlu pentru o pagină Web, titlu ce va fi afişat în bara de titlu a browser-ului folosit. Acest titlu se poate introduce cu ajutorul marcajului <TITLE> … </TITLE>. Acestea vor fi introduse în interiorul marcajelor <HEAD>… </HEAD>, ca în exemplul: <html> <head> <title> Prima mea pagină Web </title> </head> <body> My first page ! Prima mea pagina ! </body> </html> Sfârşitul de linie După cum se observă, caracterele “enter” , “tab” şi spaţiile multiple sunt ignorate de către browser. Trecerea pe o linie nouă se face prin inserarea marcajului <br> (“line break”). Nu are formă de închidere. Introducerea unui spaţiu se poate face prin construcţia: &nbsp;. Blocuri preformatate Pentru ca browser-ul să interpreteze corect caracterele "spaţiu", "tab" şi " CR/LF " ce apar în cadrul unui text, acest text trebuie inclus intr-un bloc <pre>...</pre>.

2

<html> <head> <title>bloc preformatat </title> </head> <body><pre> Prima linie A doua linie A treia linie </pre></body> </html> Nu se recomandă folosirea acestei metode. Culoarea de fond şi culoarea textului O culoare poate fi precizata în doua moduri: - Printr-un nume de culoare. Sunt disponibile cel puţin 16 nume de culori: aqua, black, fuchsia, gray, green lime, maroon, navy, olive, purple, red, silver, teal, white şi yellow. - Prin construcţia " #rrggbb " unde r (red), g (green), sau b (blue) sunt cifre hexazecimale şi pot lua valorile: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f, F; se pot defini astfel 65536 de culori. De exemplu, construcţia #ff0000 defineşte culoarea roşie (red), #00ff00 defineşte culoarea verde (green), #000000 reprezintă negru, iar #ffffff reprezintă alb. Culoarea fondului paginii Web se stabileşte în cadrul etichetei <body> prin atributul bgcolor. Culoarea textului paginii Web se stabileşte în cadrul etichetei <body> prin atributul text. Următorul exemplu prezintă o pagina cu fondul de culoare albastra şi textul de culoare albă. <html> <head> <title>atribute multiple </title> </head> <body bgcolor=”blue” text=”white”> Fond de culoare albastra si text de culoare alba. </body> </html> Stiluri pentru blocurile de text Unui text i se pot aplica diverse stiluri prin folosirea marcajelor: <b>...</b> - bold, îngroşat <i>...</i> - italic, înclinat <u>...</u> - underline, subliniat <sub>...</sub> - subscript <sup>...</sup> - superscript <s>...</s>, <strike>…</strike> - strike, tăiat <html> <head> <title>Stiluri pentru blocuri de text </title></head> <body> <b>Text scris cu caractere ingrosate.</b><br> <i>Text scris cu caractere italice.</i> <br> În aceasta linie <sup>sus</sup> este superscript iar <sub>jos</sub> este subscirpt.<br> <strike>Aceasta linie este în intregime sectionata de o linie orizontala.</strike> <br> În aceasta linie urmatorul cuvant este <u>subliniat</u>, iar cuvantul <s>strike</s> sectionat. </body> </html>

3

"center " .inserarea unui spaţiu suplimentar după blocul paragraf. <h6>. .Paragraf aliniat la dreapta. pe când <h6> foloseşte caracterele cele mai mici . având valorile posibile " left ".Formatarea textului Blocuri paragraf Cu ajutorul etichetei paragraf <p> este posibil trecerea la o linie noua şi permite: .inserarea unui spaţiu suplimentar înainte de blocul paragraf.Paragraf aliniat în centru. Aceste etichete accepta atributul align pentru alinierea titlului blocului de text la stanga (în mod prestabilit ) .Paragraf aliniat în centru. <h4>.Paragraf aliniat la dreapta. în centru şi la dreapta.Paragraf aliniat în centru. .Paragraf aliniat la dreapta. Tag-ul <h1> permite scrierea unui titlu cu caractere mai mari şi aldine. <p align="right"> Paragraf aliniat la dreapta.Paragraf aliniat la dreapta. " right "şi "justify" <html> <head> <title> Blocuri paragraf</title></head> <body> Prima linie <p> Linie generata de un paragraf (implicit paragraful este aliniat la stanga).Paragraf aliniat la dreapta. <html> <head> <title> Blocuri de titlu</title></head><body> <h1 align="center"> Titlu de marime 1 aliniat în centru </h1> <h2 align="right"> Titlu de marime 2 aliniat la dreapta. daca se foloseşte delimitatorul </p> (acesta fiind opţional). <h5>.alinierea textului cu ajutorul atributului align. Paragraf aliniat în centru.Paragraf aliniat în centru.Paragraf aliniat în centru. Toate aceste etichete se refera la un bloc de text şi trebuie însoţite de o eticheta de încheiere similara. <p align="center"> Paragraf aliniat în centru. Paragraf aliniat la dreapta. </h2> <h4> Titlu de marime 4 aliniat la stanga (implicit) </h4> <h6> Titlu de marime 6</h6> </body></html> 4 . </body></html> Blocuri de titlu Intr-un text titlurile (headers) de capitole pot fi introduse cu ajutorul etichetelor <h1>. <h2>. <h3>.

mărime (definită prin atributul size). . <hr align="right" width=150 size=12 color="red"> </body></html> Linii orizontale Blocuri <center> Blocul introdus de etichetele <center>. .nume (stabilit prin atributul face). ..</center> aliniază centrat toate elementele pe care le conţine. <hr> Urmeaza o linie aliniata în centru . fara umbra. Valorile posibile sunt " left " . de latime 50%. de latime 150 de pixeli. <html><head><title> Linii orizontale</title> </head><body> <h1 align="center"> Tipuri de linii orizontale </h1> O linie implicita alinierea stanga. Acest lucru se face cu ajutorul etichetei <hr>. <hr align="center" width="50%" size="5" noshade> Urmeaza o linie aliniata la dreapta ." center " şi " right ".Blocuri titlu Linii orizontale Intr-o pagina Web pot fi inserate linii orizontale. . 5 . . grosime 12 pixeli .culoare (stabilită prin atributul color). Fonturi Un font este caracterizat de următoarele atribute: .color permite definirea culorii liniei .width permite alegerea lungimii liniei.noshade când este prezent defineşte o linie fără umbra. latime 100%. grosime 5 pixeli .align permite alinierea liniei orizontala.size permite alegerea grosimii liniei. grosime 2 cu umbra.. Pentru a configura o linie orizontala se utilizează următoarele atribute ale etichetei <hr>: . de culoare rosie. .

</font> Aceste linie este scrisa cu caractere normale. fata de valoarea curenta. Familia fontului Pentru a scrie un text intr-o pagina pot fi folosite mai multe fonturi (stiluri de caractere). Mărimea fontului Pentru a stabili mărimea unui font se utilizează atributul size al etichetei . . fata de valoarea curenta. etc. -2.+1. 7 ( 1 pentru cel mai mic font şi 7 pentru cel mai mare). Tipul de font necesar poate fi stabilit prin atributul face al etichetei font. 4. <br> <font size="5">Fonturi de marime 5. 2. monospace şi fantasy. cursive. sans serif. etc. . 5. etc. pentru a micşora dimensiunea fontului cu 1. <html> <head> <title> Caracteristicile fontului</title> </head> <body> Aceste linie este scrisa cu caractere normale. În acest caz browserul va utiliza primul font din listă instalat pe calculatorul client. Exista cinci familii generice de fonturi care sunt de regulă disponibile pe toate calculatoarele utilizatorilor: serif.</font> <br><font face="monospace">Linie scrisa cu caractere monospatiate.</font> <br> <font size="+2">Fonturi de marime 6. <br> <font color="red">Aceasta linie este rosie. 3. care permite inserarea de blocuri de texte personalizate.1.</font> <br> <basefont size="4">Fonturi de marime 4.</font> <br> <font face="arial">Linie scrisa cu caractere arial. pentru a mari dimensiunea fontului cu 1. etc.</font> <br>Aici<font color="green">fiecare</font> <font color="blue">cuvant</font> <font color="yellow">are</font> <font color="cyan">alta</font> <font color="#3478fa">culoare. 6. 2. +2.-1.Toate aceste atribute aparţin etichetei <font>. 2.</font> <br> <font size="-3">Fonturi de marime 1. Pot fi introduse mai multe fonturi separate prin virgula.</font> <br> </body> </html> Configurarea fonturilor Liste 6 . Valorile acestui atribut pot fi: .

Valorile posibile al acestui atribut sunt : o "circle" (cerc) • "disc" (disc plin) (valoarea prestabilita). referinţe sau indexuri..fluxul nesfarsit de materiale care apar pe Internet. întreaga secţiune a unui glosar va fi gestionata printr-o lista de definiţii. </ul> şi <li> pot avea un atribut type care stabileşte caracterul afişat în faţa fiecărui element al listei. care este inclusa intr-o pereche de marcaje de lista de definiţii: Observaţii: - <dl>.o interconectare Web de informatii de tip text.. Fiecare element al listei este iniţiat de eticheta <li> (list item). Definiţia unui termen este iniţiata de eticheta <dd> (de la "definition description" = Un termen al listei este iniţiat de eticheta descrierea definiţiei). Lista va fi indentată fata de restul paginii Web şi fiecare element al listei începe pe un rând noua.. în care orice cuvant sau fraza poate face legatura catre un alt punct din document sau catre un alt document <dt><b>date</b> <dd>..</dl> (de la "definition list" = lista de definiţii) <dt> (de la "definition term" = termen definit).Definiţia unui termen începe pe o linie noua şi este indentată. cuvintele sunt listate în ordine alfabetica. În HTML. spre deosebire de informatii care sunt date cu un anumit inteles sau valoare <dt><b>informatie</b> <dd>. urmate de definiţii ale termenilor respectivi.Unul din cele mai obişnuite elemente din documentele cu mai multe pagini este un set de definiţii. <html><head><title>listex_1</title></head> <body><h1 align=center>O lista de definitii</h1><hr> <dl> Glosar de termeni de World Wide Web <dt><b>hypertext</b> <dd>. Glosarele sunt exemple clasice în acest sens..sub-setul de date care are efectiv semnificatie şi care este util la momentul curent </dl> </body></html> Listă de definiţii Liste neordonate O lista neordonată este un bloc de text delimitat de etichetele corespondente <ul>.</ul> (" ul " vine de la " unordered list " = lista neordonată).. Tag-urile <ul> . "square" (patrat) 7 . .

<html> <head><title>listex_2</title></head> <body><h1 align=center>O lista neordonata</h1><hr> Glosar de termeni de World Wide Web <ul type’”square”>Culori uzuale disponibile prin nume <li>Black <li>White <li>Red </ul> </body> </html> Listă neordonată Liste ordonate O lista ordonata de elemente este un bloc de text delimitat de etichetele corespondente <ol>. Lista va fi indentată faţă de restul paginii Web şi fiecare element al listei începe pe un rând nou.. Tag-urile <ol> şi <li> pot avea un atribut type care stabileşte tipul de caractere utilizate pentru ordonarea listei. ." A " pentru ordonare de tipul A . II ..." a " pentru ordonare de tipul a . . c . iii . ii . B . Valorile posibile sunt: . 3 . III . D etc. 4 etc Următorul exemplu este o lista ordonata cu cifre romane : <html> <head><title>listex_5</title></head> <body><h1 align=center>O lista ordonata cu cifre romane</h1><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> Listă ordonată 8 .. d etc. 2 ." I " pentru ordonare de tipul I . b .</ol> ("ol" vine de la "ordered list" = lista ordonata). iv etc." i " pentru ordonare de tipul i . Fiecare element al listei este introdus de eticheta <li> (list item)." 1 " pentru ordonare de tipul 1 . . IV etc... C . .

O legatura catre o pagina aflata în acelaşi director O legătură către o pagina aflata în acelaşi director se formează cu ajutorul etichetei <a> (de la "anchor"=ancora). Pentru a preciza pagina indicata de legătură se utilizează un atribut al etichetei <a> numit href.html către fişierul cap1.html"> Link catre pagina 2 </a> </body></html> O legătură către o pagina aflata pe acelaşi disc local Daca pagina referită se afla pe acelaşi disc local.Tag-ul <ol> poate avea un atribut start care stabileşte valoarea iniţiala a secvenţei de ordonare. <html><head> <title> Comutarea intre doua pagini</title> </head> <body> <h3>Pagina 1 </h3> <a href=" ex_1. adică zone de pe ecran sensibile la apăsarea butonului stâng al mouse-ului. <html> <head> <title> Comutarea intre doua pagini aflate pe acelasi disc local</title> </head> <body> 9 .. Ele transformă un text obişnuit în hipertext sau hiperlegatura.</a>. Zona activă care devine sensibilă la apăsarea butonului stâng al mouse-ului este formata din textul cuprins intre etichetele <a>. Valoarea acestui atribut trebuie sa fie un număr întreg pozitiv.. Legături prin adresare relativă Exemplul următor realizează o legătură din fişierul index.html aflat în sudirectorul capitol 1. dar într-un alt director atunci pentru a preciza poziţia ei în structura de directoare se poate folosi adresarea relativă plecând de la directorul curent . care permite trecerea rapida de la o informaţie aflata pe un anumit server la altă informaţie memorată pe un alt server aflat oriunde în lume. Prezenta etichetei de sfârşit </a> este obligatorie. care ia valoare numele fişierului HTML aflat în acelaşi director.14b. Legăturile sunt zone active într-o pagină Web. Legături Legaturile (link-urile) reprezintă partea cea mai importantă a unei pagini Web.

html">Link catre capitolul 1 </a> </body></html> O legătură către un site particular În exemplul următor se utilizează adresa URL www. O ancora se defineşte de asemenea prin eticheta <a>.com care încarcă pagina de start din site-ul firmei Netscape Corporation.netscape.com">Netscape Corporation </a> </body> </html> Ancore Într-o pagină foarte lungă pot exista puncte de reper către care se definesc legături. 10 .<h3>Pagina 3 </h3> <a href="cuprins/cap1.netscape. Pentru a defini ancora se utilizează atributul name care primeşte ca valoare un nume atribuit ancorei (de exemplu "leg1"). <html> <head> <title> Link catre site-ul firmei Netscape</title> </head> <body> <h3>Link catre site-ul firmei Netscape </h3> <a href="http://www.

Pentru a introduce o legătură către o ancoră definită în alt document (altă pagină) aflat în acelaşi director.html#nume_ancora". <html> <head> <title> Ancore definite în acelasi document si în alt document</title> </head> <body> <h3>Ancore definite în acelasi document si în alt document </h3> <a href="#ancora1">Link catre ancora 1 </a> <a href="legaturi.Pentru a insera o legătură catre "leg1" definită în aceeaşi pagina se utilizează eticheta <a> având atributul href de valoare "#leg1".html#anc">Link catre o ancora din alt document </a> <br><br><br><br><br><br><br><br><br><br ><br><br><br><br><br><br><br><br><br>< br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br ><br><br><br><br><br><br><br><br><br>< br><br><br><br><br><br><br><br><br><br> <br><br><br> <a name="ancora1">ancora 1</a> 11 . atributul href primeşte o valoare de forma "nume_fisier.

</body> </html> Alegerea culorilor pentru legaturi În mod prestabilit se utilizează trei culori pentru legaturi: .o culoare pentru legaturile vizitate (s-a efectuat cel puţin un clic pe ele) . Aceste atribute pot fi stabilite cu ajutorul a trei atribute ale etichetei <body>: • link pentru legaturile nevizitate. Valorile pe care le pot lua aceste atribute sunt culori definite prin nume sau conform standardului RGB.o culoare pentru legaturile nevizitate (nu s-a efectuat nici un clic pe ele) . • vlink pentru legaturile vizitate. verde pentru legaturi vizitate si albastru pentru legaturi nevizitate </h3> <a href=leg_ex1.o culoare pentru legaturile active (când se execută clic şi se ţine apăsat). • alink pentru legaturile active. <html> <head> <title> Culori pentru lagaturi</title> </head> <body link="blue" vlink="green" alink="red"> <h3>Setarea culorilor pentru link-uri:<br>rosu pentru legaturi active.html> Link catre pagina 1 <br> 12 .

Microsoft Outlook etc.html> Link catre pagina 11 </a> </body> </html> Utilizarea poştei electronice Intr-o pagina Web se poate afla legaturi care permit lansarea în execuţie a aplicaţiei de expediere a mesajelor electronice. <html> <head> <title> Expediere de mesaje electronice</title> </head> <body> <h3>Expediere de mesaje electronice</h3><br> <a href="mailto:student@yahoo.html> Link catre pagina 2 <br> <a href=leg_ex11. Pentru ca exemplul următor sa funcţioneze trebuie ca: .com"> Mesaje catre autorul paginii </a> </body> 13 .) .adresa sa fie valida şi calculatorul sa fie conectat la Internet.pe calculator sa fie instalat o aplicaţie de expediere a mesajelor electronice (Outlook Express. Pentru aceasta se utilizează în construcţia adresei URL cuvântul mailto: urmat de o adresa e-mail valida.<a href=leg_ex2.

Atunci când se efectuează clic pe legătura din exemplul următor browserul va deschide o caseta de dialog .File download .sa lansaţi în execuţie aplicaţia capabila sa interpreteze corect fişierele de tipul respectiv <html> <head> <title> Legaturi catre fişiere oarecare</title> </head> <body> <h3>Legaturi catre fisiere oarecare</h3><br> <a href="fisier. <html> <head> <title> Atributul title</title> </head> <body> <h3>Atributul title</h3><br> 14 . Pentru aceasta se utilizează eticheta <a> având valoarea atributului href egala cu adresa URL a fişierului destinaţie.</html> Legaturi către fişiere oarecare O pagina Web poate conţine legaturi către orice tip de fişiere aflate pe orice servere din Internet. Acest atribut are astfel menirea de a furniza informaţii suplimentare despre semnificaţia unei legaturi.zip </a> </body> </html> Atributul title Atributul title aparţine etichetei <a> şi duce la apariţia unei mici etichete în pagina Web atunci când mouse-ul se află pe o legătură.zip">Link catre fisierul fisier.sa salvaţi pe discul local fişierul .care va permite: .

XPM (X PixMap) cu extensia .<a href="mailto:student@yahoo. atunci trebuie lansată în execuţie o nouă instanţă a browserului care va conţine noua pagină.xmp. . 16777216 de culori posibile). Pentru a putea fi identifica imaginea care va fi inserată. Acest lucru se realizează folosind atributul target al etichetei <a>. . Atributul target acceptă şi alte valori cum ar fi _blank caz în care pagina se va încărca într-o fereastră nouă.html " target="fereastra"> legatura 2<a> </body> </html> Imagini Imaginile sunt stocate în fisiere cu diverse formate.html " target="fereastra"> legatura 1<a> <br> <a href="ex_1. <html> <head> <title> Atributul target</title> </head> <body> <h3>Atributul target</h3><br> <a href="ex_1.TIFF (Tagged Image File Format) cu extensia .bmp (numai cu Internet Explorer).gif. Cele mai răspândite formate sunt GIF (8 biţi pentru o culoare. . < img src=”imagine.jpeg sau . se utilizează un atribut al etichetei <img> şi anume src (de la "source"=sursa).jpg. atunci adresa URL a imaginii este formata numai din numele imaginii. Pentru a insera o imagine intr-o pagina.GIF (Graphics Interchange Format) cu extensia . Formatele acceptate de browsere pentru fişierele imagine sunt: . <html><head><title> O pagina cu imagine</title></head> 15 .tif sau .1.BMP (BitMap) cu extensia . Numele ferestrei poate fi folosit ca valoare pentru atributul target şi pentru alte legături caz în care paginile respective vor fi încărcate în aceeaşi fereastră. . 256 culori posibile) şi JPEG (24 biţi pentru o culoare.2. anonimă (nu poate fi folosită pentru încărcarea altor pagini).com" title="Trimiteti un mesaj e-mail"> Mesaje catre autorul paginii </a> </body> </html> Atributul title Atributul target Dacă dorim ca pagina solicitată să fie încărcată într-o altă fereastră decât cea curentă. Toate imaginile cu care vom lucra vor avea adresa URL exprimata în funcţie de directorul ce conţine documentul HTML care face referire la imagine.XBM (X BitMap) cu extensia .gif”> Atributul alt permite afişarea unui text alternativ în locul imaginii dacă aceasta nu este încărcată sau lângă mouse atunci când acesta este plasat peste imagine. inclusiv extensia.xbm.tiff.JPEG (Joint Photographic Experts Group) cu extensia . . se utilizează eticheta <img> (de la "image"=imagine). Daca imaginea se afla în acelaşi director cu fisierul HTML care face referire la imagine. care primeşte ca valoare un nume.

."left" . </body> </html> Alinierea unei imagini Alinierea unei imagini se poate face prin intermediul atributului valori: align care poate lua următoarele ."right" .... Valorile acestor atribute sunt numere întregi pozitive. O imagine are anumite dimensiuni pe orizontală şi verticală.”> Text dupa imagine </body></html> Chenarul şi dimensionarea unei imagini Daca doriţi sa adăugaţi un chenar în jurul imaginii. cele două atribute. folosiţi atributul border al etichetei <img>.jpg" border="5" width="350" height="15%"> Text dupa imagine. .."top" .jpg" alt=”Imagine . pot primi un număr de pixeli sau procente din lăţimea şi respectiv înălţimea ferestrei <html> <head> <title> Imagine cu chenar si redimensionata</title> </head> <body> O imagine cu chenar şi dimensiuni de 200 pixeli X 15 % <img src="poza. Ca valori.<body> O pagina care contine o imagine <img src="poza.. celelalte componente sunt dispuse pe în partea stânga. stabilite în momentul creării ei. 16 . aceste dimensiuni sunt respectate în momentul afişării ei în pagina Web.. Daca nu se cere altfel.aliniere la stânga. Dimensiunile prestabilite ale unei imagini pot fi modificate prin intermediul atributelor width şi height... celelalte componente sunt dispuse pe în partea dreapta...aliniere la dreapta. partea de sus a imaginii se aliniază cu partea de sus a textului ce precede imaginea.aliniere deasupra.

. <html> <head> 17 . </h4><p> Text inainte de imagine.Text inainte de imagine. Text inainte de imagine. respectiv pe verticală.Text dupa imagine.Text dupa imagine.Text inainte de imagine.aliniere la mijloc."bottom" . <html> <head> <title> Alinierea textului</title> </head> <body> <h4>Imagine aliniat la stanga inconjurata de text la distanta de 30 de pixeli. partea de jos a imaginii se aliniază cu linia de bază a textului<html> <head> <title> Alinierea unei imagini</title> </head> <body> Alinieri pe verticala:<br><br><br><br><br> Sus<img src="w3.Text inainte de imagine.Text inainte de imagine. dintre imagine şi restul elementelor din pagina.Text inainte de imagine.gif" align="bottom"> </html> Alinierea textului în jurul imaginii Atributele hspace şi vspace precizează distanta în pixeli pe orizontală. având ca valoare adresa URL a imaginii. </body> </html> Imagini pentru fondul unei pagini O imagine poate fi utilizata pentru a stabili fondul unei pagini Web.jpg" align="left" width=200 height=200 hspace="30" vspace="30"> Text dupa imagine.Text dupa imagine.aliniere la baza. Text dupa imagine.Text dupa imagine.Text dupa imagine.Text dupa imagine.gif" align="top"><br><br><br> La mijloc: <img src="w3.Text dupa imagine.gif" align="middle"><br><br><br> Jos: <img src="w3.Text inainte de imagine. <img src="poza. . Imaginea se multiplica pe orizontala şi pe verticala până umple întregul ecran. În acest scop se foloseşte atributul background al etichetei <body>. Atributul bgproperties=”fixed” menţine imaginea fixă la realizarea unei defilări în pagină.Text dupa imagine. mijlocul imaginii se aliniază cu linia de bază a textului ce precede imaginea."middle" .

Tabele Tabelele ne permit sa creăm o reţea dreptunghiulară de domenii.1. Pentru a insera un tabel se folosesc etichetele corespondente <table> … </table> Un tabel este format din rânduri. Dacă atributul border nu este urmata de o valoare atunci tabelul va avea o grosime prestabilita egală cu 1 pixel. Acest atribut poate primi ca valoare orice număr întreg (inclusiv 0) şi reprezintă grosimea în pixeli a chenarului tabelului.gif" bgproperties=fixed> <b><font color=red> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </body></html> Imagini folosite ca legături Pentru a utiliza imaginea "poza. Definirea culorilor de fond pentru un tabel 18 . Un rând este format din mai multe celule ce conţin date.1. alinierea textului etc. fiecare domeniu având propriile opţiuni pentru culoarea fondului.html utilizam sintaxa: <a href ="ex_1. un tabel nu are chenar. <html><head><title>tabel</title></head> <body><h1 align=center>Un tabel simplu format din 4 linii si 2 coloane</h1><hr> <table border> <tr> <td>cell 11 <td>cell 12 <tr> <td>cell 21 <td>cell 22 <tr> <td>cell 31 <td>cell 32 <tr> <td>cell 41 <td>cell 42 </table> </body></html> În mod prestabilit.<title> Pagina cu imagine de fond</title> </head> <body background="w3. "right". Când atributul border are o valoare nenulă chenarul unui tabel are un aspect tridimensional. Folosirea etichetei de sfârşit este opţională. se utilizează atributul border. Daca stabilim pentru atributul border al etichetei <img> valoare „0” acest chenar dispare. Pentru a insera un rând într-un tabel se folosesc etichetele <tr> …("table row"= rând de tabel).jpg" drept legatura catre pagina ex_1.jpg"></a> În mod prestabilit. culoarea textului. imaginea utilizată pe post de zonă activă este înconjurată de un chenar având culoarea unei legaturi.html"><img src= "poza. Alinierea tabelului Pentru a alinia un tabel intr-o pagina Web se utilizează atributul align al etichetei table cu următoarele valori posibile: "left" (valoarea prestabilita). Pentru a adăuga un chenar unui tabel. O celulă de date se introduce cu eticheta <td>. o valoare egală cu 0 semnifică absenţa chenarului. "center".

Valorile acestui atribut pot fi numere întregi pozitive. Valoarea prestabilita a atributului cellspacing este 2. unei linii prin eticheta tr sau celule de date prin eticheta td. <html> <head><title>culoare tabel</title></head> <body><h1 align=center>Un tabel simplu colorat</h1><hr> <table border="3" bgcolor="green"> <tr> <td>verde 11 <td bgcolor="red">rosu 11 <tr bgcolor="blue"> <td>albastru 21 <td bgcolor="yellow">galben 22 <tr bgcolor="cyan"> <td>cell 31 <td>cell 32 <tr> <td>cell 41 <td bgcolor="white">cell 42 </table> </body> </html> Culoarea unui table Dimensionarea celulei unui tabel Distanţa dintre două celule vecine se defineşte cu ajutorul atributului cellspacing al etichetei table.Culoarea de fond se stabileşte cu ajutorul atributului bgcolor. Dacă în tabel sunt definite mai multe atribute bgcolor. Valorile acestui atribut pot fi numere întregi pozitive. şi reprezintă distanţa în pixeli dintre două celule vecine. tabel. Distanţa dintre marginea unei celule şi conţinutul ei poate fi definită cu ajutorul atributului cellpadding al etichetei table. atunci prioritatea este următoarea: celulă. Valorile pe care le poate primi bgcolor sunt cele cunoscute pentru o culoare. inclusiv 0. <html> <body> <h4 align=center>Un tabel cu distanţa între celule de 10 pixeli iar distanţa între celule şi continut de 20 pixeli</h1><hr> <table cellspacing=10 cellpadding=20 border=5 align=center> <tr> <td> 11 <td> 12 <tr> <td>21 <td> 22 </table> </body></html> 19 . care poate fi ataşat întregului tabel prin eticheta table. linie. Valoarea prestabilita a atributului cellpadding este 1 .

valoarea prestabilita ). În exemplul următor se utilizează un truc care permite afişarea intr-o pagina Web a unui text poziţionat în centrul paginii. Alinierea pe verticala a conţinutului unei celule se face cu ajutorul atributului valign care poate lua valorile: "bottom" (jos).Distanţa între celule şi conţinut Dimensionarea unui tabel Dimensiunile unui tabel . Aceste atribute pot fi ataşate atât etichetei tr pentru a defini tuturor elementelor celulelor unui rând. cât şi etichetelor td pentru a stabili alinierea textului într-o singură celulă. ale etichetei table.numere întregi între 1 şi 100. Valorile posibile ale acestor atribute sunt: 20 .numere întregi pozitive reprezentând lăţimea respectiv înălţimea în pixeli a tabelului. width şi height.</h2> </table> </body> </html> Alinierea conţinutului unei celule Alinierea pe orizontala a conţinutului unei celule se face cu ajutorul atributului align care poate lua valorile: "left" (la stânga). <html> <head><title>text centrat</title></head> <body> <table width="100%" height="100%"> <tr> <td align="center"> <h2>Text centrat. Valorile acestor atribute pot fi: .lăţimea şi înălţimea . . valoarea prestabilita). "right" (la dreapta).pot fi stabilite exact prin intermediul a două atribute. reprezentând fracţiunea din lăţimea şi înălţimea totală a paginii."center" (centrat . "middle" (la mijloc. urmate de semnul %. "top" (sus). <html> <head><title>alinierea în celule</title></head> <body><h3 align=center>Un tabel avand continutul celulelor aliniate</h3> <table border width="300" height="300"> <tr align="right"><td>Aici <td>alinierea<td>este centru<td>dreapta <tr> <td align="left">stanga <td align="center">centru<td valign="top">sus <td valign="bottom">jos <tr align="left"><td>aici<td>alinierea <td>este centru<td>stanga (implicita) </table> </body></html> Alinierea conţinutului celulelor Dimensionarea exacta a celulelor unui tabel Dimensiunea unei celule poate fi stabilită exact cu ajutorul a doua atribute ale acestor etichete: width pentru lăţime şi height pentru înălţime.

.bordercolorlight permite stabilirea culorii feţei luminate pentru chenarul 3D al unui tabel. În acest caz. . . Cu ajutorul a doua atribute ale etichetelor td o celulă se poate extinde peste celule vecine. Atributele frame şi rules Atributul frame al etichetei table permite specificarea părţilor din chenarul unui tabel care vor fi afişate. atunci aceste celule vor apărea în tabel fara un chenar de delimitare. respectiv a înălţimii unei celule. Sunt posibile extinderi simultane ale unei celule pe orizontala şi pe verticala.dupa td se pune &nbsp. . cell 24<br>cell 33.extinderea unei celule peste celulele din dreapta ei se face cu ajutorul atributului colspan.void .bordercolor permite stabilirea culorii pentru chenarul unui tabel. . Tabele de forme oarecare Un tabel trebuie privit ca o reţea dreptunghiulară de celule. .bordercolordark permite stabilirea culorii feţei întunecate pentru chenarul 3D al unui tabel. Primeşte ca valoare adresa URL a imaginii folosite pentru fond. cell 34 <tr> <td>cell 22 <tr> <td>cell 32 <tr> <td>cell 41 <td colspan="3">cell 42.elimina toate muchiile exterioare ale tabelului. a cărui valoare determina numărul de celule care se unifică.procente din lăţimea . Atribute Internet Explorer pentru tabele Următoarele atribute ale etichetei table funcţionează cu Internet Explorer . Valorile posibile sunt: . Astfel: .dupa td se pune<br>. 21 . a cărui valoare determina numărul de celule care se unifica. În scopul de a afişa un chenar pentru celule vide se utilizează urmatoarele trucuri: .- numere întregi pozitive (inclusiv 0) reprezentând dimensiunea în pixeli a lăţimii.extinderea unei celule peste celulele dedesubt se face cu ajutorul atributului rowspan.background permite stabilirea unei imagini pentru fondul unui tabel.cell 14<br>cell 23.cell 44 </table></body></html> Tabel cu celule unite Celule vide ale unui tabel Daca un tabel are celule vide. în etichetele şi vor fi prezente ambele atribute colspan şi rowspan <html> <head><title>celule unite</title></head> <body><h1 align=center>Un tabel cu celule unite</h1><hr> <table border> <tr> <td rowspan="3">cell 11<br>cell 21<br>cell 31 <td>cell 12<td colspan="2" rowspan="3">cell 13 .cell 43. respectiv înălţimea tabelului.

.box . . . .afişează o muchie în partea superioara a cadrului tabelului.above . care primeşte ca valoare adresa URL a documentului HTML care va fi încărcat în acel cadru. .below . Elementele listei pot fi: 22 . . Valoarea atributelor cols şi rows este o listă de elemente separate prin virgulă..elimina toate muchiile interioare ale tabelului. . care descriu modul în care se face împărţirea. .none .împărţirea unei ferestre într-un număr de cadre pe orizontală se face cu ajutorul atributului rows al etichetei <frameset>. În interiorul acestui bloc.afişează muchii orizontale intre toate liniile tabelului.cols .afişează o muchie pe toate laturile cadrului tabelului.all .afişează muchii intre toate liniile şi coloanele.hsides .. Valorile posibile sunt: .împărţirea unei ferestre într-un număr de cadre pe verticală se face cu ajutorul atributului cols al etichetei <frameset>. Atributul rules permite alegerea unor delimitatori pentru celulele unui tabel.rhs .</body> este înlocuit de blocul <frameset>. . .border . .afişează o muchie în partea din stânga a cadrului tabelului. .</frameset>. Un atribut obligatoriu al etichetei <frame> este src.afişează o muchie în partea inferioara a cadrului tabelului..lhs . fiecare cadru este introdus prin eticheta <frame>.. <html> <head><title>Atribute frames si rules</title></head> <body><h1 align=center>Atributele frames si rules</h1> <table width="400" frame=box rules=rows cellspacing=10> <tr> <td>cell 11 <td>cell 12<td>cell 13 <tr> <td>cell 21 <td>cell 22<td>cell 23 </table> </body> </html> Atribute frames şi rules pentru un tabel Cadre în HTML (frames) Cadrele ne permit să definim în fereastra browserului zone în care sa fie încărcate documente HTML diferite. în care blocul <body>. .afişează muchii verticale intre toate coloanele tabelului.vsides . Cadrele sunt definite într-un fişier HTML special.afişează o muchie în partea din dreapta a cadrului tabelului.afişează o muchie în partea din stânga şi din dreapta a cadrului tabelului. Definirea cadrelor se face prin împărţirea ferestrei pe orizontală sau pe verticală.afişează cate o muchie în partea superioara şi inferioara cadrului tabelului.rows .afişează o muchie pe toate laturile cadrului tabelului.

dintre care primul are 200 pixeli. Mai întâi.procente din dimensiunea ferestrei (număr intre 1 şi 99 terminat cu %). atunci spaţiul disponibil rămas pentru ele se va împărţi în mod egal. .*"> <frame src="p1.*> înseamnă o împărţire în 4 cadre pe verticală.2*> înseamnă o împărţire în 4 cadre. . În exemplul următor este creată o pagina Web cu trei cadre orizontale.html"> <frame src="poza.dacă mai multe elemente din listă sunt configurate cu * .20%"> <frame src="p1. după care al doilea cadru este împărţită în doua cadre de tip linie.html"> </frameset> </html> În exemplul următor este creată o pagina Web cu trei cadre mixte. iar al doilea şi al patrulea ocupă în mod egal restul de spaţiu rămas disponibil. al treilea ocupă jumătate din spaţiul total disponibil. Exemplu <frameset rows=200.*. care se împarte în trei părţi egale.html"> </frameset> </frameset> </html> 23 . Pentru a o crea se procedează din aproape în aproape.un număr întreg de pixeli. Pentru al doilea cadru valoarea atributului src este adresa URL a unei imagini <html><head><title>cadre</title></head> <frameset rows="100. iar al doilea şi al patrulea ocupă în mod egal restul de spaţiu rămas disponibil. al doilea cadru ocupând o parte .html"> <frame src="p1. Exemplul <frameset cols=200.*.50%.n* care înseamnă n părţi din spaţiul rămas. iar al patrulea ocupând 2 părţi.. .jpg"> <frame src="p2. al treilea ocupă jumătate din spaţiul total disponibil.Într-un cadru se poate încărca un document HTML sau poate fi împărţit la rândul său în alte cadre (folosind <frameset>).1*. Observatii: .html"> <frameset rows="*.*"> <frame src="p2.50%. pagina este împărţită în două cadre de tip coloană. dintre care primul are 200 pixeli . <html> <head><title>cadre</title></head> <frameset cols="20%.

*. .Culori pentru chenarele cadrelor şi dimensionarea chenarului unui cadru Pentru a stabili culoarea chenarului unui cadru se utilizează atributul bordercolor."auto" .html" scrolling="auto" noresize> </frameset> </html> Atributul noresize al etichetei <frame> (fără nici o valoare suplimentară) dacă este prezent. Valorile posibile ale atributului frameborder sunt: "yes" .*"> <frame src="p1.echivalent cu 0. cât şi etichetei <frame> pentru a stabili culoarea chenarului pentru un cadru individual. Acest atribut poate fi ataşat atât etichetei <frameset> (dezactivarea fiind valabila pentru toate cadrele incluse) cât şi etichetei <frame> (dezactivarea fiind valabilă numai pentru un singur cadru). Afişarea chenarului unui cadru se poate dezactivata dacă se utilizează atributul frameborder cu valoare "no". Acest atribut primeşte ca valoare un nume de culoare sau o culoare definită în conformitate cu modelul de culoare RGB. "no" .barele de derulare sunt adăugate întotdeauna. Atributul border al etichetei <frameset> permite configurarea lăţimii chenarelor tuturor cadrelor la un număr dorit de pixeli.echivalent cu 1. Bare de defilare Atributul scrolling al etichetei <frame> este utilizat pentru a adăuga unui cadru o bară de derulare care permite navigarea în interiorul documentului afişat în interiorul cadrului. Poziţionarea documentului într-un cadru Atributele marginheight şi marginwidth ale etichetei <frame> permit stabilirea distanţei în pixeli dintre conţinutul unui cadru şi marginile verticale. inhibă posibilitatea prestabilită a utilizatorului de a redimensiona cadrul cu ajutorul mouse-ului."no" .număr de pixeli.barele de derulare nu sunt utilizabile. respectiv orizontale ale cadrului. Atributul bordercolor poate fi ataşat atât etichetei <frameset> pentru a stabili culoarea tuturor chenarelor cadrelor incluse. În mod prestabilit. .html"> 24 . . Valori posibile: .*"> <frame src="p1.html" scrolling="no" noresize> <frame src="p1. O valoare de 0 pixeli va defini un cadru fără chenar.barele de derulare sunt vizibile atunci când este necesar <html> <head><title>cadre</title></head> <frameset cols="*.html" scrolling="yes" noresize> <frame src="p2. Valoarea prestabilita a atributului border este de 5 pixeli. <html><head><title>cadre</title></head> <frameset cols="*.*.procent din lăţimea. Valorile posibile sunt: ."yes" . respectiv din înălţimea cadrului. chenarul unui cadru este afişat şi are aspect tridimensional.

noresize.<frame src="p2..html"></iframe></center> </body> </html> 25 . marginheight.1.html" target="icadru">Fisierul1</a><br> <a href="p2. cum ar fi: src. scrolling.html" height=40% width=50%> </iframe> În acest caz. align. marginwidth. frameborder. width. hspace. am specificat un cadru intern care are 40% din înălţimea şi 50% din lăţimea paginii curente.html" marginwidth=50> </frameset> </html> Poziţionarea documentelor în cadre Cadre interne (în-line) Un cadru intern este specificat prin intermediul blocului <iframe>. Atributele acceptate de eticheta <iframe> sunt în parte preluate de la etichetele <frame> şi <frameset>. bordercolor.</iframe>. height.html" target="icadru">Fisierul2</a><br> <center> <iframe width="60%" height="50%" border=2 bordercolor=red name="icadru" src="p1.html" marginheight=50> <frame src="p1. border. sau de la eticheta <img> vspace. <html> <head><title>cadre interne</title></head> <body> <a href="p1.. name. Un cadru intern se introduce într-o pagina Web în mod asemănător cu o imagine aşa cum rezulta din următorul exemplu: <iframe src="ex_3.

la efectuarea unui clic pe o legătura noua pagină (către care indică legătura) o înlocuieşte pe cea curentă în aceeaşi fereastră (acelaşi cadru). • "_blank" (încărcarea noii pagini are loc intr-o fereastra noua anonima).prin plasarea în blocul <head>.html" target="main">Fisierul1</a><br> <a href="p2.</head> a unui element <base> care precizează. conform sintaxei: <a href="fişier... atunci cele precizate de atributul target din <a> sunt prioritare.html" name="left"> <frame name="main"> </frameset> </html> <html> <head><title>legaturi</title> </head> <body> <a href="p1. Numele unui cadru este stabilit prin atributul name al etichetei <frame> conform sintaxei: <frame name="nume cadru"> <html><head><title>cadre</title></head> <frameset cols="20%.html" target="nume fereastra/frame"> .html"target="_self">Fis1 în fereastra curenta</a> </body> </html> Folosirea atributului target pentru legături Valori pentru atributul target Atributul target al etichetei<frame> accepta anumite valori predefinite de o valoare deosebita pentru creatorii de pagini Web.prin plasarea în eticheta <a> a atributului target. Acest comportament se poate schimba în doua moduri: . Aceste valori sunt: • "_self" (încărcarea noii pagini are loc în cadrul curent)...Cadre interne Ţinte pentru legaturi În mod prestabilit.html" target="main">Fisierul2</a><br> <br><br> <a href="p1. prin atributul target numele ferestrei (cadrului) în care se vor încărca toate paginile noi referite de legaturile din pagina curenta conform sintaxei: <base target="nume_ferastra/frame_de_baza"> . 26 .*"> <frame src="left. </a> Observatie: Daca este prezent atât un atribut target în <base> cât şi un atribut target în <a>.html" target="_blank">Fis1 intr-o fereastra noua</a><br><br> <a href="p1. care precizează numele ferestrei (cadrului) în care se va încărca pagina nou referită de legătură.

casete de selecţie. Cel mai simplu mod de utilizare a unui formular este expedierea acestuia prin posta electronica (e-mail). Sunt permise cantităţi mari de date (ordinul MB) Pentru ca un formular sa fie funcţional. Script-urile pot fi scrise în limbajele CGI. PHP.dacă este necesar serverul expediază un răspuns utilizatorului.com/cgibin/nume_fis."_parent" (încărcarea noii pagini are loc în cadrul parinte al cadrului curent daca acesta exista. trebuie precizat ce se va întâmpla cu el după completare şi expediere. Acest element poate primi un nume prin atributul name. câmpuri de editare etc. Pentru a preciza tipul elementului se foloseşte atributul type al etichetei <input>. Pentru un câmp de editare.yahoo. . dacă aceasta valoare a fost stabilită. Unix shell etc.o aplicaţie dedicată de pe server analizează formularul completat şi (dacă este necesar) stochează datele într-o bază de date.datele din formular sunt adăugate la adresa URL precizata de atributul action.com/cgi . <html> <head><title>FormEx_1 </title></head> <body><h4> Un formular cu un camp de editare şi un buton de expediere</h4> <hr> <form action="mailto:xxxxx@xxx.com" method="post"> Numele:<input type="text" name="numele" value="Numele si prenumele"><br> • 27 . Atribute esenţiale ale elementului <form> .atributul name .până la o structură complexă. acest atribut primeşte valoarea "text". În acest caz datele sunt expediate separat.atributul method precizează metoda utilizata de browser pentru expedierea datelor formularului. Un formular este definit intr-un bloc delimitat de etichetele corespondente <form> şi </form>.yahoo. . cu multiple secţiuni.bin/nume_fis.post. pentru introducerea unui şir de caractere pe post de cheie de căutare . în care atributul type este configurat la valoarea "submit". Între diferite seturi de date este introdus un "&".cgi?nume1 = valoare1&nume2 = valoare2". C. valoarea atributului action este adresa URL a unui script aflat pe un server WWW care primeşte datele formularului. • "_top" (încărcarea noii pagini are loc în fereastra browserului ce contine cadrul curent) Formulare Un formular este un ansamblu de zone active alcătuit din butoane. Pentru aceasta se foloseşte atributul action care primeşte ca valoare "mailto:adresa e-mail". .element caracteristic tuturor motoarelor de căutare din Web . Un buton de expediere al unui formular se introduce cu ajutorul etichetei <input>. Formular cu câmp de editare şi buton de expediere Majoritatea elementelor unui formular sunt definite cu ajutorul etichetei <input>. nu sunt permise cantităţi mari de date (maxim 1 Kb). Datele sunt adăugate conform sintaxei: nume_camp = valoare_camp. În acest caz . Pe buton apare scris "Submit Query" sau valoarea atributului value . Formularele sunt utilizate pentru construirea unor pagini Web care permit utilizatorilor să introducă efectiv informaţii şi să le transmită serverului. <form action=”http://www.utilizatorul completează formularul şi îl expediază unui server. Formularele pot varia de la o simplă casetă de text. De regulă. Perl. Exemplu: "http://www. O sesiune cu o pagina web ce conţine un formular cuprinde următoarele etape: . Sunt posibile următoarele valori: .atributul value .get (valoarea implicita).cgi”>. .intre adresa URL şi date este inserat un "?". .permite ataşarea unui nume fiecărui element al formularului. care oferă facilităţi puternice de transmisie a datelor. Alte atribute pentru un element <input> sunt: .care permite atribuirea unei valori iniţiale unui element al formularului. altfel are loc în fereastra browserului curent). efectuează o prelucrare a lor şi expediază către utilizator un raspuns.atributul action precizează ce se va întâmpla cu datele formularului odată ce acestea ajung la destinaţie.

<input type="submit" value="expedieaza"> </form></body> </html> Formular cu casetă text şi buton de expediere Pentru elementul <input> de tipul câmp de editare (type = "text") . atunci în formular se introduce un buton pe care scrie "Reset". Un buton Reset poate primi un nume cu ajutorul atributului name şi o valoare printr-un atribut value. alte doua atribute pot fi utile: .com" method="post"> Introduceti numele:<input type="text" name="nume" value="Numele"><br> Introduceti prenumele:<input type="text" name="prenume" value="Prenumele"><br> <input type="reset" value="sterge"> <input type="submit"> </form></body></html> 28 . .formularele cu un singur câmp (de tip text) nu au nevoie de un buton de expediere. Butoane Butonul Reset Daca un element de tip <input> are atributul type configurat la valoarea "reset". La apăsarea acestui buton. atunci câmpul respectiv este considerat în mod prestabilit ca fiind de tip "text". chiar dacă aceste valori au fost modificate de utilizator. <html> <head><title>formex_2</title></head> <body><h1>Un formular cu un buton reset</h1><hr> <form action="mailto:xxxxx@xxx. Observaţii: . .daca atributul type lipseşte intr-un element <input> . toate elementele din formular primesc valorile prestabilite (definite odată cu formularul ). respectiv valoarea acestui atribut în caz contrar. Un asemenea buton afişează textul "Reset" dacă atributul value lipseşte.atributul maxlength specifica numărul maxim de caractere pe care le poate primi un câmp de editare. datele sunt expediate automat după completarea şi apăsarea tastei ENTER.atributul size specifica lăţimea câmpului de editare.

Butoanele radio se introduc ca familii de butoane prin eticheta <input> cu atributul type avand valoarea "radio". Toate atributele unui câmp de editare rămân valabile. Singura deosebire constă în faptul că acest câmp de editare nu afişează caracterele în clar. <html> <head><title>formex_3</title></head> <body><h1>Un formular cu un camp de parola</h1> <hr> <form action="mailto:xxxxx@xxx. a unei singure variante din mai multe posibile.com" method="post"> Nume:<input type="text" name="nume" value="Numele"><br> Prenume:<input type="text" name="prenume" value="Prenumele"><br> Password:<input type="password" name="parola" ><br> <input type="reset" value="sterge"> <input type="submit" value="trimite"> </form></body> </html> Butoane radio Butoanele radio permit alegerea. atunci în formular se introduce un element asemănător cu un câmp de editare obişnuit (introdus prin type="text"). iar atributul name trebuie să primească aceeaşi valoare pentru fiecare buton dintro familie. la un moment dat. <html> <head><title>formex_4</title></head> <body><h1>Un formular cu butoane radio</h1> 29 .Câmp de editare de tip "password" Daca se utilizează eticheta <input> având atributul type configurat la valoarea "password".

com" method="post"> Alegeti sexul:<br> <input type="radio" name="sex" value="m">masculin<br> <input type="radio" name="sex" value="f">feminin<br> <input type="reset"> <input type="submit"> </form></body> </html> Butoane radio La expedierea formularului se va transmite una dintre perechile "sex=m" sau "sex=f". <html> <head><title>formex_5</title></head> <body><h1>Un formular cu casete checkbox</h1><hr> <form action="mailto:xxxxx@xxx. Casete de validare O caseta de validare (checkbox) permite selectarea sau deselectarea unei opţiuni.com" method="post"> Alegeti meniul:<br> <input type="checkbox" name="pizza" value="o portie">Pizza<br> <input type="checkbox" name="nectar" value="un pahar"> Nectar<br> <input type="checkbox" name="bere" value="o sticla"> Bere<br> <input type="checkbox" name="cafea" value="o ceasca"> Cafea<br> <input type="reset"> <input type="submit"> </form></body> </html> 30 . în funcţie de alegerea făcută de utilizator.Pentru inserarea unei casete de validare se utilizeaza eticheta <input> cu atributul type configurat la valoarea "checkbox" . Observatii: . . ca şi un buton radio. . poate avea valoarea prestabilita "selectat" definita prin atributul checked.<hr> <form action="mailto:xxxxx@xxx.fiecare caseta poate avea un nume definit prin atributul name.fiecare caseta.

. Aceasta valoare poate fi atribuita direct atributului value. <html> <head><title>formex_6</title></head> <body><h1>Un formular cu caseta de fisiere</h1><hr> <form action="mailto:xxxxx@xxx. O listă de selecţie poate avea următoarele atribute: .atributul value primeşte ca valoare adresa URL a fişierului care va fi expediat o data cu formularul. cu atributul <type> având valoarea "file" (fişier). poate fi tastata intr-un câmp de editare ce apare o data cu formularul sau poate fi selectata prin intermediul unei casete de tip File Upload sau Choose File care apare la apăsarea butonului Browse.atributul name permite ataşarea unui nume .com" method="post"> Alegeti fisierul:<input type="file" name="fisier" value="c:\temp\proba. din formular.html" enctype="multipart/form-data"><br><input type="reset"> <input type="submit"> </form></body></html> Caseta de fişiere Liste de selectie O lista de selectie permite utilizatorului sa aleagă unul sau mai multe elemente dintr-o listă finită.atributul name. Lista de selecţie este inclusă în formular cu ajutorul etichetelor corespondente <select> şi </select>. 31 . Atributele pentru un element de tip caseta de fisiere: . Pentru aceasta se inserează un element <input> intr-un formular .Casete de validare Casete de fişiere Intr-o pereche "name = value" a unui formular se poate folosi întregul conţinut al unui fişier pe post de valoare. care ataşează listei un nume (utilizat în perechile "name=value" expediat serverului)..

. Doua atribute ale etichetei option se dovedesc utile: . . <html> <head><title>formex_7</title></head> <body><h1>Un formular cu o lista de selectie</h1> <hr> <form action="mailto:xxxxx@xxx.com" method="post"> <textarea name="text multilinie" cols="30" rows="5" wrap="off"> Prima linie din textul initial.atributul name. Elementele unei liste de selecţie sunt incluse în lista cu ajutorul etichetei <option>.atributul value primeste ca valoare un text care va fi expediat server-ului în perechea "name=value". Acest atribut poate primi următoarele valori: a) " off ". c) " soft ". b) " hard ". în acest caz: întreruperea cuvintelor la marginea dreaptă a editorului se produce numai când doreşte utilizatorul. dacă acest atribut lipseşte .atributul wrap. . A doua linie din textul initial. </textarea> <input type="reset"> <input type="submit"> </form></body> </html> - 32 . care specifica numărul de caractere afişate intr-o linie. . valoarea prestabilita fiind 1) câte elemente din listă sunt vizibile la un moment dat pe ecran (celelalte devenind vizibile prin acţionarea barei de derulare ataşate automat listei). care permite ataşarea unui nume câmpului de editare multilinie. în acest caz: se produce întreruperea cuvintelor la marginea dreapta a editorului .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> <input type="reset"> <input type="submit"> </form></body> </html> Câmpuri de editare multilinie Intr-un formular câmpuri de editare multilinie pot fi incluse cu ajutorul etichetei <textarea>. care specifica numărul de linii afişate simultan.atributul cols. nu se include caracterul de sfârşit de linie în textul transmis serverului o data cu formularul . caracterul de sfârşit de linie este inclus în textul transmis serverului o data cu formularul. Eticheta are următoarele atribute: . care determină comportamentul câmpului de editare faţă de sfârşitul de linie. care precizează (printr-un număr întreg pozitiv .atributul size. caracterul de sfârşit de linie este inclus în textul transmis serverului o data cu formularul.atributul selected (fără alte valori) permite selectarea prestabilita a unui element al listei .atributul rows. <html> <head><title>formex_9</title></head> <body><h1>Un formular cu un camp de editare multilinie</h1> <hr> <form action="mailto:xxxxx@xxx. în acest caz: se produce întreruperea cuvintelor la marginea dreapta a editorului. atunci către server va fi expediat textul ce urmează după <option>.

atributul name. care primeşte ca valoare textul ce va fi afisat pe buton. Pentru a insera un buton intr-un formular . <html> <head><title>formex_10</title></head> <body><h1>Un formular complex</h1> <hr> <center><table bgcolor="#eeeeee"> <form action="mailto:xxxxx@xxx. se utilizează eticheta <input> avand atributul type configurat la valoarea "button". Limbajul HTML nu permite scrierea unor astfel de funcţii (acest lucru este posibil daca se utilizează limbaje de scriptare precum JavaScript.Câmp de editare multilinie Intr-un formular pot fi afişate butoane fără un rol prestabilit. Alte doua atribute ale elementului "button" sunt: . VBScript).atributul value.com" method="post"> <caption align="top">MENIU</caption> <tr align=left><th>Numele: <td><input type="text" name="numele"> <tr align=left><th>Preumele: <td><input type="text" name="prenumele"> <tr align=left><th>Telefonul: <td><input type="text" name="telefonul"> <tr align=left><th>Alegeti pizza: <td><input type="checkbox" name="ciuperci">cu ciuperci <input type="checkbox" name="mexicana">mexicana <input type="checkbox" name="europeana">europeana <tr align=left><th>Alegeti plata:<td> <input type="radio"name="plata">cash <input type="radio" name="plata">card <tr align=left><th>Comentarii: <td> <textarea name="comentarii" cols="30" rows="5" wrap="off"> Inserati aici aprecierile dumneavoastra legate de calitatea serviciilor noastre </textarea> <tr align=left valign=top><td> 33 . Când utilizatorul apasă un buton. <html> <head><title>formex_10</title></head> <body><h1>Butoane</h1> <hr> <center> <input type=button value="Apasa !" onclick="alert('De ce apesi ???')"> </body> </html> Un formular complex În exemplul următor este prezentat un formular continand elemente prezentate anterior. Câmpurile formularului sunt incluse în celule unui tabel pentru a obţine o aliniere dorita. se lansează în execuţie o funcţie de tratare a acestui eveniment. care permite ataşarea unui nume butonului .

definirea stilului. color:red.} </style> </head> Toate titlurile care apar în pagina ca fiind de mărime 1 vor fi de culoare roşie şi centrate.</style>. şi "p") atunci se utilizează o lista acestor elemente. p {text-align:center. De exemplu: <head><style> h1 {text-align:center. distanţe faţă de margini etc). aflat la rândul lui în blocul <head>... Daca dorim ca acelaşi stil să fie utilizat de către mai multe elemente (de ex.sintaxa Javascript. "h2". aliniere. Exista doua modalităţi de a defini un stil: . Stilurile sunt de finite în cadrul blocului <head>…</head> între etichetele <style>…</style>.. color:red.} </style> Clase de stiluri Aceste stiluri permit definirea unui stil general şi folosirea lui oriunde este necesar.<input type="reset" value="sterge"><td> <input type="submit" value="expedieaza"> </form></table></body> </html> Un formular complex Stiluri Stilurile pun la dispoziţia creatorilor de site-uri noi posibilităţi de personalizare a paginilor Web. Un stil reprezintă un mod de a scrie un bloc de text (adică anumite valori pentru font. . "h1". Stilurile sunt introduse în doi paşi: . .sintaxa CSS (Cascading Style Sheets) prezentată în continuare. Exemplu: Definim o clasă de stiluri "ac" (albastru şi centrat) în interiorul blocului <style>. h2.precizarea domeniului de aplicare a stilului. separate prin virgula: <style> h1. mărime. În funcţie de modul de definire.</head>: 34 . putem avea: Stiluri dedicate Aceste stiluri se aplica blocurilor de text pentru care sunt definite.. culoare.

<h3 id=green>Acesta este un header de marime 3 verde</h3> <html> <head><title>stiluri</title> <style> p {color:red.în blocul <style>..} </style> Dacă dorim ca un titlu de mărimea 2 sa folosească clasa de stiluri "ac" atunci scriem: <h2 class = ac>Acesta este un header de marime 2 albastru si centrat</h2> Stiluri "identificate" Toate elementele unui document admite un atribut universal numit id. cuprinsă nu intre acolade {. text-align: center.. De exemplu: <h2 style = " color: red.<style> . folosiţi atributul id care primeşte valoare numele stilului definit anterior."> Acest header de marimea 2 este de culoare rosie si este centrat.} #verde { color: green } </style> </head> <body> <p> paragraf rosu aliniat dreapta <br> <p class=ac>Acesta este un paragraf albastru si centrat <h3 id=verde>Acesta este un header de marime 3 verde</h3> </body> </html> Siluri Stiluri în-line Stilurile în-line sunt definite chiar în eticheta ce iniţiază blocul în care dorim să se aplice aceste stiluri.Valoarea data atributului style este tocmai descrierea stilului.</h2> 35 . Pentru a utiliza un stil "identificat" procedaţi astfel: .} ci intre ghilimele ".în elementul în care se doreşte utilizarea locală a acestui stil. color:blue.".ac {text-align:center. Atributul id poate identifica stilul utilizat de un element.. Pentru aceasta se utilizează atributul universal style (comun practic tuturor etichetelor ce apar intr-un document HTML). color:blue.. text-align:right} ..</style> introduceţi definiţia stilului conform sintaxei: <style> #verde { color: green } </style> .ac {text-align:center.

font-weight: valori posibile: .. cm) Tipul fontului este stabilită prin atributul font-family: listă de fonturi separate prin virgula. text-decoration: none} Pentru ca numai anumite legaturi sa utilizeze un stil se pot folosi următoarele doua metode: ..} combinat cu <a class = CLASA1 href=" "> . x-small....a: link#ID1 {. large.CLASA1 {.. medium.</span>.. font-family:Arial.} #s2 { font-size:2cm.... font-style: italic} a: visited {color: cyan. small..css sau . Grosimea fontului . sans-serif. inclinat</div> </body> </html> 36 .. fantasy. ingrosat</div> <div id=s3>text introdus cu font generic fantasy. monospace. . . dimensiune 20 pixeli..} </style> </head> <body> <div id=s1>text introdus cu font verdana.atributul rel cu valoarea "stylesheet" . font-size: 20pt} a: active {color: blue.predefinite: xx-small.. Pseudoclase.</a> Configurarea fontului folosind stilurile Mărimea fontului este stabilită prin atributul font-size.atributul type cu valoarea "text/css".În fişierul HTML care utilizează stilurile definite la pasul anterior. bold. după care utilizam atributul style pentru eticheta <span>. conform sintaxei: a: link {color: black. dimensiune 16pt</div> <div id=s2>text introdus cu font arial.</head> o eticheta <link> având trei atribute.</a> . Se pot utiliza cele 5 familii generice: serif. Valori posibile: . italic.Daca dorim utilizarea unui anumit style pentru un fragment de text. Continutul acestui fişier coincide cu conţinutul unui bloc <style>.a: link. Stiluri definite în fişiere externe Stilurile definite în interiorul unui bloc <style>.se creează un fişier care sa conţină numai descrierea stilurilor şi se salvează cu extensia . Se utilizează titlurile definite în fişierul extern ca şi cum ar fi definite în fişierul HTML curent intrun bloc <style>.</style> . lighter.număr urmat de unitate de măsură (pt.. oblique <html> <head><title>configurarea fontului</title> <style> #s1 {font-size:16pt.} combinat cu <a id = ID1 href=" "> . Pseudoclasele se utilizează pentru personalizarea legăturilor. Pentru a utiliza un stil definit intr-un fişier extern se procedează astfel: . fără ca aceşti delimitatori sa fie incluşi. mm. font-family:fantasy. font-family:verdana. în.atributul href având ca valoare adresa URL a fişierului creat la punctul 1 . . dimensiune 2 cm..</style>.</style> sau într-un fişier extern.font-style:italic. x-large. bolder.</style> pot fi transferate într-un fişier extern existând astfel posibilitatea utilizării lor în mai multe fişiere HTML. se include în blocul <head>..numere intre 100 (cel mai subtire) şi 900 (cel mai gros) Stilul fontului . Ele se definesc în blocul <style>. px. cursive.html... .font-style: normal. font-weight:900} #s3 { font-size:20px.. xx-large . atunci includem acest text intrun bloc cu ajutorul delimitatorilor <span>.normal.

Configurarea fontului prin stiluri

Setarea textului Culoarea textului este stabilită prin atributul color: valori posibile: - nume culoare - construcţie în hexazecimal #rrggbb - apelul funcţiei rgb(r,g,b) sau rgb(%r,%g,%b) Culoarea fondului textului este stabilită prin atributul background-color. Valori posibile aceleaşi cu ale atributului color. Imaginea de fond a textului este stabilită prin atributul background-image = url(„adresa imaginii folosite”) Alinierea textului este stabilită prin atributul text-align: left, center, right, justify. Decorarea textului este stabilită prin atributul text-decoration: none, underline, line-through, overline <html> <head><title>configurarea textului</title> <style> #s1 {color:red;background-color:yellow;text-align:center} #s2 { color:cyan;background-color:black;text-align:right} #s3 { color:BLACK;background-image:url("w3.gif");text-decoration:overline} </style> </head> <body> <div id=s1>text rosu pe fundal galben</div> <div id=s2>text cyan pe fundal negru</div> <div id=s3>text cu imagine de fundal<br> text cu imagine de fundal<br> text cu imagine de fundal<br> text cu imagine de fundal<br> text cu imagine de fundal<br> text cu imagine de fundal<br> </div> </body> </html>

37

Configurarea textului

Straturi Un strat este văzut ca un bloc de text sau elemente HTML care poate fi dimensionat şi poziţionat cu exactitate în pagină. Straturile pot fi transparente sau opace şi se pot suprapune. Se definesc cu ajutorul atributelor stilurilor şi se introduc în pagina prin marcaje <div> sau <span>. Un strat moşteneşte toate atributele stilurilor şi acceptă şi atribute referitoare la dimensiune şi poziţionare. Dimensiunile unui strat se stabilesc prin atributele width şi height. Ca valori pot primi un număr urmat de unitate de măsură. Poziţionarea unui strat poate fi de doua tipuri: - absolută, stratul fiind poziţionat în funcţie de colţul din stânga sus al ferestrei sau a blocului din care face parte - relativă, stratul fiind poziţionat în funcţie de ultimul element introdus în pagina Tipul poziţionării este stabilit prin atributul position cu valorile posibile absolute sau relative. Poziţia stratului este stabilita cu ajutorul atributelor top şi left. Chenarul unui strat este stabilită prin atributul border-style cu valori posibile: none, solid, dotted, dashed, double, inset, outset, groove, ridge. Culoarea chenarului este stabilită prin atributul border-color. Grosimea chenarului este stabilită prin atributul border-width: număr cu unitate de măsură Exemplu de straturi poziţionate absolut, suprapuse. <html> <head><title>straturi suprapuse</title> <style> #strat1 { width:200;height:100; position:absolute; top:100;left:100; border-style:solid; border-color:red; color:red;} #strat2 { width:100;height:200; position:absolute; top:50;left:150; border-style:double; border-color:blue; color:blue;} </style> </head> <body> <div id=strat1>strat 1 strat 1 strat 1 strat 1 strat 1 strat 1 strat 1 strat 1 strat 1 strat 1 strat 1 strat 1 </div> <div id=strat2>strat 2 strat 2 strat 2 strat 2 strat 2 strat 2
38

strat 2 strat 2 strat 2 strat 2 strat 2 strat 2</div> </body> </html>

Straturi suprapuse

Daca straturile prezintă şi culoare de fundal atunci ele sunt opace.Exemplu de poziţionare relativa poziţionarea relativa pentru a afişa un text unduitor. <html> <head><title>text unduitor</title> <style> #sus {position:relative; top:-10;} #jos {position:relative; top:10;} </style> </head> <body> <h1> text unduitor</h1><hr><br><br> normal<span id=sus>sus<span id=sus>mai sus</span>sus</span>normal <span id=jos>jos<span id=jos>mai jos</span>jos</span>normal </body> </html>

Poziţionare relativă

Efect de umbra cu ajutorul straturilor . <html><head><title>efect umbra</title> <style>#strat1 {font-size:2cm;font-weight:900; position:absolute; top:100;left:100;color:red;} #strat2 {font-size:2cm;font-weight:900; position:absolute; top:105;left:105;color:silver;} </style> </head> <body> <div id=strat2>TEXT</div> <div id=strat1>TEXT</div> </body> </html>

Efect de umbră cu ajutorul straturilor

39

Limbajul JavaScript este un limbaj bazat pe obiecte. Iată câteva deosebiri esenţiale între Java şi JavaScript: . indiferent cât de bine sunt realizate. într-o oarecare măsură. Totodată programul de navigare trebuie să recunoască instrucţiunile JavaScript. . Pentru ca programul de navigare să poată executa instrucţiuni JavaScript. pentru a profita de renumele obţinut de limbajul de programare Java. nu pot fi scrise microaplicaţii care să aibă acţiuni dăunătoare asupra calculatorului pe care este vizualizată pagina Web. din dorinţa de a extinde funcţionalitatea popularului său program de navigare Netscape Navigator. aceste miniprograme nu sunt compilate. iar colecţia de comenzi şi instrucţiuni care pot apărea în cadrul unui script poartă denumirea de limbaj de scriptare sau limbaj de tip script.0. C++. motiv pentru care acestora li se pune la dispoziţie un limbaj simplu de programare cu ajutorul căruia pot să creeze extensii ale aplicaţiei. dar codul se află într-un fişier separat.aplicaţiile Java sunt compilate în fişiere binare care sunt apoi interpretate de către VJM (Virtual Java Machine .0. Cel mai obişnuit exemplu de astfel de microaplicaţii îl reprezintă macro-urile din Microsoft Office.Maşină Virtuală Java). în timp ce Internet Explorer oferă acest suport începând cu versiunea 3. adică un limbaj orientat obiect care conţine obiecte predefinite. În general. în principiu. există şi marcajul <APPLET> dar folosirea lui nu mai este recomandată. JavaScript este un limbaj de scriptare a cărui sintaxă seamănă. în timp ce codul JavaScript este transmis ca un text obişnuit şi este interpretat. 40 . applet-urile Java sunt referite din cadrul unui document HTML. Pascal. JavaScript şi Java Mulţi informaticieni (chiar profesionişti) nu înţeleg deosebirile dintre Java şi JavaScript. Java este un limbaj de programare orientat obiect.codul JavaScript este inclus în cadrul documentului HTML.Java este orientat obiect în timp ce JavaScript este bazat pe obiecte. . Totodată JavaScript este un limbaj sigur în sensul că. MacIntosh sau Windows fără a fi necesară prezenţa unui emulator sau efectuarea anumitor modificări. nu pot satisface cerinţele tuturor utilizatorilor. . De exemplu. aplicaţiile. Java sau Delphi.JAVASCRIPT Prezentare generală Firma Netscape Communications. iar apoi. ci interpretate linie cu linie în timpul rulării aplicaţiei. Netscape Navigator oferă suport pentru JavaScript începând cu versiunea 2. Iniţial Netscape şi-a denumit noul limbaj LiveScript. În sfârşit. Din această cauză majoritatea programelor de navigare oferă o opţiune a cărei activare nu permite executarea script-urilor. în timp ce JavaScript are o structură bazată pe obiecte şi a fost dezvoltat de firma Netscape Communications.script-urile JavaScript sunt incluse prin intermediul marcajului <SCRIPT>. Totuşi există posibilitatea păstrării anumitor parole introduse de către utilizator. Limbajul Java poate fi folosit pentru proiectarea de aplicaţii independente sau pentru proiectarea de microaplicaţii care pot fi incluse în cadrul paginilor Web şi care poartă denumirea de applet-uri şi sunt şi ele independente de platformă. dezvoltat de firma Sun Microsystems. adică un acelaşi script va putea fi executat sub Unix. JavaScript este un limbaj independent de platforma pe care rulează. cu cea a limbajelor C. denumirea a fost schimbată în JavaScript. a dezvoltat un limbaj de programare. De obicei. nu va putea fi scris un script care să scaneze discul şi să şteargă anumite fişiere. iar applet-urile Java prin intermediul marcajului <OBJECT>. ceea ce ar putea deranja pe unii dintre aceştia. Aceste microaplicaţii poartă denumirea generică de script-uri. De asemenea JavaScript este un limbaj proiectat astfel încât să reacţioneze în momentul apariţiei unui eveniment. el trebuie configurat în aşa fel încât să nu ignore astfel de instrucţiuni. astfel încât programele scrise în acest limbaj să poată fi incluse în cadrul paginilor Web. dar care are anumite particularităţi care îl fac să se deosebească esenţial de orice alt limbaj de programare.

Marcajul <SCRIPT> În interiorul unui document HTML. Script-urile definite în antet sunt încărcate înaintea încărcării restului paginii. .JS. cât şi în corpul documentului (marcajul <BODY>). fişierele care conţin astfel de instrucţiuni au extensia . limbajul JavaScript este folosit pentru efectuarea de calcule. <HTML> <HEAD> <TITLE> Hello World! </TITLE> <SCRIPT language="JavaScript"> alert("Hello World!"). Vom prezenta acum script-ul prin intermediul căruia poate fi afişat mesajul „Hello World!” în fereastra programului de navigare. citirea unor date dintr-o tabelă. antetul fiind un loc excelent pentru plasarea funcţiilor JavaScript pentru a fi siguri că acestea vor fi disponibile atunci când sunt apelate în alte secţiuni ale documentului HTML. o variabilă care este considerată ca având un anumit tip la un moment dat poate fi considerată ulterior ca având un alt tip. Acest marcaj poate apărea atât în antetul documentului HTML (marcajul <HEAD>).write(" este " + data_şi_ora + " </CENTER> ") //---------------------------> </SCRIPT> Mascarea codului prin comentariile <!--. în cadrul script-urilor JavaScript. adică referinţele sunt verificate în timpul rulării. de exemplu. adică referinţele trebuie să existe în momentul compilării.js"> </SCRIPT> 41 . Mai mult.introducerea codului sursa cu ajutorul elementului <SCRIPT> <SCRIPT Language="JavaScript"> <!---------------------------var data_şi_ora = new Date() document. în interiorul marcajului <SCRIPT>. În general. proiectarea de ecrane HTML fără a folosi script-uri CGI. Sintaxa marcajului <SCRIPT> este următoarea (în cazul folosirii limbajului JavaScript): <SCRIPT language="JavaScript"> cod JavaScript </SCRIPT> Marcajul <SCRIPT> are un atribut suplimentar numit src cu ajutorul căruia puteţi preciza URL-ul unui fişier care conţine instrucţiunile JavaScript care formează script-ul respectiv. în timp ce în cadrul aplicaţiilor Java variabilele trebuie declarate înainte de a fi folosite.şi //---> este necesara pentru versiuni timpurii ale browserelor . în timp ce Java foloseşte legarea statică. de obicei. </SCRIPT> </HEAD> <BODY> </BODY> </HTML> Specificarea scripturilor JavaScript intr-un fişier HTML poate fi făcută prin: . De obicei.specificarea fisierului care contine scriptul <SCRIPT SRC="script.JavaScript foloseşte legarea dinamică. o variabilă poate fi folosită ca fiind un şir de caractere pentru ca apoi să fie considerată ca fiind un număr real.- în cadrul script-urilor JavaScript variabilele nu trebuie declarate. instrucţiunile JavaScript sunt cuprinse. .

js.Logice (Boolean) true sau false. şirurile de caractere pot conţine secvenţe Escape: \n.> </SCRIPT> Proiectanţii introduc instrucţiunile JavaScript între comentarii HTML astfel încât browserele care nu permit JavaScript vor ignora instrucţiunile. 'Apostrof' sau "Un 'exemplu' de siruri 'incluse' în altul" .null . instrucţiunile JavaScript sunt scrise între comentarii. . Comentarii JavaScript JavaScript permite formate de comentariu definite ca în (applet-urile) JAVA şi în programele C şi C++. \f etc. iar daca mai conţine şi alţi operanzi cu valori cunoscute...14159. de exemplu n. interpretându-le drept comentarii.Inceput comentariu Instructiuni JavaScript <! . \t. iar extensia trebuie sa fie .Sfarsitul comentariului .în cadrul elementelor HTML <HTML> <HEAD> <TITLE>Exemplu cod JavaScript în element HTML</TITLE> </HEAD> <BODY onLoad="alert('Incarcare fisier HTML')"> <H1>Inserare cod JavaScript în element HTML</H1> </BODY> </HTML> Comentarii La versiuni mai vechi de browsere.Numere ca 42 ori 3. şirurile de caractere constante se delimitează intre apostrofuri simple sau duble. Exemple : /* Comentariu pe mai multe linii */ // Comentariu pe o singură linie Elementele limbajului JavaScript Constante JavaScript .. de exemplu n+3. va fi afişată NaN Şiruri (de caractere) JavaScript Intr-un scenariu JavaScript. . Fisierele JavaScript externe nu pot conţine decât declaraţii şi funcţii JavaScript.. va fi afişată undefined.Siruri: "Salut!"..> şi </SCRIPT> este ignorat. Variabile JavaScript 42 . Sintaxa generala este: <SCRIPT> <! .Eventualul cod dintre <SCRIPT SRC=.undefined O expresie ce conţine doar o variabila neiniţializată. JAVA. Exemplu : sir1='Sir 1' sir2="Sir 2" sir3='Sir 1' + "Sir 2" Operatorul '+' semnifica concatenarea şirurilor de caractere. . Ca şi în C.

Spre deosebire de alte limbaje de programare unde se specifica tipul variabilei (int. y=2. ^. != Crearea de casete simple de mesaj Pentru afişarea unui mesaj adresat utilizatorului sub forma unei casete de dialog. >=. variabilele dintr-un scenariu se pot iniţializa simultan cu declararea variabilelor. a— .. Expresii În JavaScript sunt admise urmatoarele categorii de expresii: . a doua provoacă modificarea tipului numeric în tipul şir de caractere. ==. %(modulo) . Ca şi în C. Exemplu var an. în timpul execuţiei scriptului. -. a-b a+=2 echivalent cu a=a+2 De comparaţie. /. Operatori Matematici: +. Este posibil ca pe durata unei execuţii unei variabile sa i se modifice tipul. Exemplu : var x. La evaluarea acestora se poate obţine true sau false: <.binari: se aplică la 2 operanzi: a+b.41) . va determina tipul fiecărei variabile pe baza utilizării acesteia. Tipul variabilelor se precizează dinamic.unari: se aplică la un singur operand: a++.. JavaScript face deosebire dintre litere mari şi mici pentru numele de variabile (ex.aritmetice: rezultatul este un numar real (ex. 1.şiruri de caractere ("Abc" sau "123") . an = 2000. float etc). >. </SCRIPT></BODY> </HTML> Casetă alert Preluarea de intrări tip text de la utilizator 43 .y. z=3.: size şi Size sunt 2 nume de variabile distincte). se poate utiliza funcţia alert. scenariul memorează informaţii utilizând variabile. Atunci când browserul executa instrucţiunile JavaScript. *.z.În instrucţiunile JavaScript. folosiţi pentru scrierea unor expresii logice. Exemplu : var x=1. <HTML> <HEAD> <TITLE> JavaScript </TITLE> </HEAD><BODY> <H1> <SCRIPT LANGUAGE="Java Script"> alert("Mesaj afisat\n intr-o caseta alert"). Numele de variabile JavaScript trebuie sa înceapă cu o literă sau un caracter de subliniere (_). Declararea unei variabile intr-un scenariu se face folosind cuvântul rezervat var. JAVA.logice: rezultatul poate fi true sau false. <=. // an = "Sfarsit mileniu" Aceste atribuiri sunt corecte. variabilele JavaScript nu necesită specificarea tipului. // .

Funcţia prompt returnează un şir de caractere ce poate fi convertit la valoare numerică prin funcţia eval().În cazul când este nevoie de citirea unei linii text de la utilizator. prompt ( text. Funcţia returnează o valoare logică (true sau false). varsta=prompt("Introduceti varsta dvs."0")) b=eval(prompt("Intr al II-lea nr:".""). Controlul de editare este iniţializat cu valoare iniţială. <HTML> <HEAD> <TITLE> Prompt </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> var nume.:".:". se poate utiliza funcţia prompt pentru afişarea unei casete de dialog care oferă utilizatorului un prompter (cursor) pentru a introduce date şi pentru preluarea ulterioara a intrării utilizatorului. exista situaţii când datele citite trebuie sa efectueze un calcul (de exemplu citim 5+3*4/2). iar sintaxa ei este confirm(mesaj) 44 ."")."0")) suma=a+b alert("Suma este: "+suma) </script> </BODY> </HTML> Funcţia confirm() Prin apelul funcţiei confirm() este creată o fereastră prin intermediul căreia se cere confirmarea utilizatorului pentru efectuarea unei acţiuni. <HTML> <HEAD> <TITLE> Calcul </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> a=eval(prompt("Intr I nr:". [valoare iniţiala] ) Provoacă apariţia unei casete cu un control de editare text în care utilizatorul va putea introduce un şir de caractere şi un buton 'OK' . dacă acest argument este prezent. altfel este iniţializat cu textul (undefined). alert(nume+” are “+varsta+” ani”) </SCRIPT> </BODY> </HTML> Caseta prompt Funcţia EVAL În funcţie de scopul scenariului. varsta. nume=prompt("Introduceti numele dvs.

a butonului de închidere sau a tastei ESC valoarea returnată este false.write </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> document. obiectul document corespunde documentului HTML curent. <html> <head> <script> function culoare() { if(confirm("culoare text rosu ?")) document. nu poate fi minimizată sau redimensionată şi are un buton special pentru închidere. <HTML> <HEAD> <TITLE> Document.write("<B>Bold</b> <i>Italic</i>").fgColor="red" } </script> </head> <body> <input type="button" value="Culoare text" onclick="culoare()"><br>text </body> </html> Funcţia confirm Obiectul document În JavaScript.write("a="+a+"<br>"+"b="+b+"<br>"+"a+b="+suma) </script> Instrucţiuni JavaScript 45 . iar în cazul apăsării butonului Cancel. putem afişa texte scrise în fonturi bold.write(variabilă) Putem intercala cod JavaScript cu cod HTML."0")) suma=a+b document."0")) b=eval(prompt("Intr un nr:". </SCRIPT> </BODY> </HTML> Să se citească de la tastatură 2 numere şi să se afişeze suma lor: <script> a=eval(prompt("Intr un nr:". În cazul apăsării butonului Ok sau a tastei ENTER valoarea returnată este true. De exemplu.Fereastra creată are două butoane: Ok şi Cancel. document. browserul va reda ieşirea în documentul curent. Daca un script utilizează metoda write pentru obiectul document în vederea afişării ieşirii. respectiv italic.write(„text”) document.

acest lucru este posibil cu ajutorul instrucţiunilor de ciclare.se evaluează condiţia."") n_valid="student" p_valid=stud" if((nume==n_valid)&&(parola==p_valid)) { alert("Date corecte!") document. ."")) b=eval(prompt("Intr nr de coloane:".i++) { 46 ..se execută secţiunea de iniţializare.write("Apasati F5 şi mai incercati !!!.în cazul în care condiţia este adevărată se execută corpul ciclului.write("<h"+i+"> Acest text este introdus cu H"+i+"</h"+i+">") </script> Să se scrie un script care sa realizeze un tabel introducând numărul de linii şi de coloane de la tastatura: <script> a=eval(prompt("Intr nr de linii:". .i<=a. .write("Bun venit pe pagina Universitatii Titu Maiorescu") } else { alert("Date incorecte!") document. incrementare) {corpul ciclului} Oricare dintre cele patru secţiuni (de iniţializare. de incrementare sau corpul) poate lipsi. În JavaScript există două tipuri de instrucţiuni de ciclare: for şi while.se revine la pasul 2. Execuţia unei instrucţiuni for constă în următorii paşi: . .Instrucţiunile JavaScript pot fi terminate sa nu cu caracterul . în caz contrar se termină execuţia ciclului. condiţia. Sintaxa instrucţiunii for este: for (iniţializare. <script> for(i=1.se execută secţiunea de incrementare. Acest caracter este obligatoriu doar atunci când sunt mai multe instrucţiuni pe acelaşi rând."") parola=prompt("Introduceti parola".") } </script> Instrucţiuni de ciclare Adeseori se doreşte executarea repetată a mai multor instrucţiuni. Instrucţiunea IF În JavaScript instrucţiunea condiţională foloseşte cuvintele cheie if şi else şi are următoarea sintaxă: if (condiţie) {instrucţiuni pentru condiţie adevărată} else {instrucţiuni pentru condiţie falsă} Acoladele au un rol foarte important în JavaScript. .i<=6. <script> nume=prompt("Introduceti numele"..write("<table border>") for(i=1. condiţie."")) document. cu ajutorul lor se pot grupa mai multe instrucţiuni într-un singur bloc de instrucţiuni care este tratat ca o singură instrucţiune.i++) document.

break case 5: zi="vineri"..în cazul în care condiţia este adevărată se execută corpul ciclului.break default: zi="Introduceti un nr intre 1 şi 7" } document. break. case eticheta: instrucţiune.break case 3: zi="miercuri". el întrerupe execuţia ciclului în interiorul căruia se află aceasta. break.write(zi) </script> Instrucţiunile break şi continue Instrucţiunea break permite ieşirea forţată dintr-o instrucţiune de ciclare. prezenţa condiţiei fiind obligatorie. Execuţia unei instrucţiuni while constă în următorii paşi: ."") } document.j<=b.break case 6: zi="sambata".break case 4: zi="joi".write("<tr>") for(j=1. în caz contrar se termină execuţia ciclului. <SCRIPT> i="" while(i!=="hyprerion") { i=prompt("Introduceti parola".break case 2: zi="marti".se revine la pasul 1. în momentul în care interpretorul JavaScript întâlneşte o astfel de instrucţiune.. Instrucţiunea continue permite saltul peste anumite instrucţiuni din corpul 47 .break case 7: zi="duminica"."" )) switch (opt) { case 1: zi="luni". . default : instrucţiune.write("Password accepted") </SCRIPT> Instrucţiunea SWITCH Poate fi folosită pentru extragerea unei opţiuni din mai multe.document. } <script language="JavaScript"> opt=eval(prompt("Introduceti nr zilei". .j++) document.se evaluează condiţia.write("<td>celula "+i+j) } </script> Sintaxa instrucţiunii while este: while (condiţie) {corpul ciclului} În cazul instrucţiunii while poate lipsi corpul ciclului. Sintaxa instrucţiunii este: switch (expresie) { case eticheta : instrucţiune. .

În cazul unui ciclu for se trece automat la pasul 4 al execuţiei ciclului. limbajul HTML pune la dispoziţie anumite atribute pentru diferite marcaje. Poate primi anumite argumente şi poate întoarce o valoare.write("<font color=red size=7>"+a+"</font>") } a=prompt("Introduceti titlul". atribute care au ca valori instrucţiuni JavaScript (de obicei apeluri de funcţii).1) Exemplu: funcţie titlu (parametru). Programele convenţionale operează într-o manieră diferită.write(“<font color=red size=7>”+a+”</font>”) } x=prompt(“Introduceti titlul”. codul acestora fiind executat secvenţial. limbajul JavaScript este bazat pe evenimente. Pentru a specifica instrucţiunile JavaScript care trebuie executate la apariţia unui eveniment. sa afişeze parametru cu font roşu de mărime 7 <script> function titlu (a) { document.b) { s=a+b return s } Se poate apela x=suma (1. Sintaxa unei funcţii: Function numefuncţie (listă parametri) { instrucţiuni.””) titlu(x) </script> Funcţiile pot fi definite şi fără parametri şi pot returna sau nu o valoare. Utilizarea funcţiilor în Java Script O funcţie este văzută ca un bloc de instrucţiuni identificat printr-un nume. în BODY.mouse deasupra cu atributul onmouseover . 48 . Cele mai multe evenimente sunt legate de acţiuni ale mouse-ului: ."") titlu() </script> Evenimente Aşa cum am mai spus.mouse în afară cu atributul onmouseout Ca valori pentru cele 3 atribute putem ataşa cod JS sau apeluri pentru anumite funcţii definite în scripturi. F(x)=2x+1 x – parametru formal F(2)=a 2 – parametru efectiv function suma (a.un clic poate fi tratat cu atributul onclick . <script> function titlu () { document. în timp ce în cazul unui ciclu while se trece la pasul 1.ciclului care nu mai trebuie executate în anumite condiţii. acestea fiind folosite pentru a controla interacţiunea dintre utilizator şi aplicaţie. ori de câte ori este nevoie. return (valoare) } Poate fi apelată prin numefuncţie (parametri) Funcţiile sunt definite de obicei în zona HEAD şi sunt apelate apoi.

. Un şir de elemente are o anumită dimensiune.status='Ati ales fundal rosu'" onmouseout="window. pe bara de stare a ferestrei apare un text. Alt text apare la îndepărtarea mouse-lui de pe buton .status='Alegeti culoarea fundalului !'">&nbsp <script> function r() { document.poate fi gestionat cu atributul onunload Ambele atribute aparţin marcajului BODY.bgColor="blue" } </script> Evenimente legate de acţiuni cu mouse-ul window. Un şir se defineşte prin: numeşir = new Array() 49 . La plasarea mouse-lui deasupra unui buton.status=”text” – afişează text în bara de stare document.Exemplu Script care afişează în pagină 2 butoane pentru stabilirea culorii de fond a paginii. <input type=button value=rosu onclick="r()" onmouseover="window..status='Alegeti culoarea fundalului !'">&nbsp <input type=button value=albastru onclick="b()" onmouseover="window. Apar evenimente ca: .bgColor="red" } function b() { document. fiecare element având o valoare şi este identificat prin poziţia în cadrul şirului. <script> a="Bun venit pe pagina mea".load – încărcarea paginii – poate fi gestionat cu atributul onload .Good Bye !" function f(x) { alert(x) } </script> <body onload="f(a)" onunload="f(b)"> Folosirea tablourilor de elemente în JS Un tablou de elemente (şir) este o structură complexă care înglobează mai multe variabile de acelaşi tip sub un nume. b="Multumesc!.title=”text” – afişează text în bara de titlu În afara evenimentelor generate de utilizator pot fi tratate şi evenimente ce se produc automat.unload – închiderea documentului .status='Ati ales fundal albastru'" onmouseout="window. are un anumit număr de elemente.

history. O proprietate a obiectului este apelată prin: numeobiect. din document derivă image. Este creat automat atunci când unei variabile i se asociază o valoare de tip şir de caractere. reprezentate de obiectele: window.proprietate = document. Java Script este un limbaj bazat pe obiecte şi pune la dispoziţie un set predefinit de obiecte. Ierarhia de obiecte JS are 4 ramuri principale. 50 . language Din window derivează: frame.a. screen. Pe lângă acestea."")) sir=new Array() for(i=0. JS pune la dispoziţie obiecte predefinite referitoare în general la tipuri de date: String. Math. location.metodă(argument) document.write("<br>"+sir[i]) } </script> Exemplu: Un buton care schimbă culorile fundalului: <script> culoare=new Array(4) culoare[0]="red" culoare[1]="blue" culoare[2]="green" i=-1 function change() { i++ document. Obiectul String Încapsulează un şir de caractere.i++) { sir[i]=prompt("Introduceti numele "+(i+1). ş.Exemplu: Să se introducă 3 nume de la tastatură şi să se afişeze în pagină unul sub celălalt: <script> n=eval(prompt("Introduceti nr de elemente".bgColor = "red" O metodă este adresată prin: numeobiect.d. form. Date.i<3. Fiecare obiect este identificat prin nume."") document.write(„text”) Obiectele JavaScript sunt ierarhizate. inclus în cadrul unui alt obiect. Un obiect poate fi derivat.m. Funcţiile unui obiect = metode Variabilele obiectului = proprietăţi Obiectele permit reutilizarea unui cod deja existent şi sunt folosite în mai toate limbajele de programare orientate pe obiect. document.bgColor=culoare[i] if(i==2) i=-1 } </script> <input type="button" value="culoare fundal" onclick="change()"> Obiecte în Java Script Un obiect trebuie înţeles ca o structură ce reuneşte mai multe funcţii şi variabile sub acelaşi nume. navigator.

Secvenţa JavaScript corespunzătoare ar putea fi: var greenString = "green". Un exemplu de utilizare este: var string="Upper Case".write("A portion of this sentence"+ boldString. pot fi efectuate diferite operaţii cu date calendaristice sau momente ale zilei sau poate fi controlat 51 . var correct="Bucharest". Aceasta poate fi folosită într-o secvenţă de tipul: var wrong="Budapest". document.write("The capital of Romania is "+wrong.bold()+". Un exemplu de utilizare este: var string="Lower Case".length=3 Obiectul Date Obiectul Date este folosit pentru a obţine informaţii referitoare la ceasul sistem de pe calculatorul vizitatorului paginii Web. O posibilă secvenţă HTML care poate fi folosită pentru afişarea caracterelor înclinate este: var italicString = "is Italicized". funcţie echivalentă cu marcajul HTML <I>. document. Funcţia toLowerCase() Pentru a transforma toate literele mari dintr-un şir în litere mici.write("A portion of this sentence " + italicString. Funcţia italics() Pentru a afişa litere înclinate puteţi folosi facilităţile oferite de funcţia italics(). Proprietatea length Ca proprietate. Funcţia strike() Pentru a simula corecturi afişate în pagini Web puteţi folosi funcţia strike(). funcţia folosită este toLowerCase(). Pentru ca toate literele cuprinse într-un şir să devină litere mici sau litere mari.write(string.Dintre metodele lui String întâlnim: Funcţia bold() Funcţia bold() permite afişarea textelor folosind caractere îngroşate. echivalentă cu marcajul HTML <STRIKE>.fontcolor("green")).toLowerCase()).<BR>"). document. funcţia folosită este toUpperCase().write("A portion of this sentence is"+ greenString. Secvenţa JavaScript care trebuie folosită pentru a beneficia de această facilitate ar putea fi: var boldString="is Bold". document. document.italics()).toUpperCase()). Funcţia fontcolor() Cu ajutorul funcţiei fontcolor() puteţi stabili culoarea folosită pentru afişarea textului respectiv. sir="abc" sir. Această funcţie este echivalentă cu atributul color al marcajului <FONT>. document. Funcţia toUpperCase() Pentru a transforma toate literele mici dintr-un şir în litere mari. Prin intermediul acestui obiect pot fi determinate data şi ora curentă. pot fi folosite funcţiile JavaScript toLowerCase() şi toUpperCase().bold()).<BR>"). ea fiind echivalentă cu marcajul HTML <B>. document.strike()+".write("The capital of Romania is "+correct.write(string. obiectele de tip string acceptă proprietatea length.

Pentru a crea un obiect care să conţină data şi ora curentă secvenţa JavaScript corespunzătoare este: data=new Date().modul în care este afişată pagina Web în funcţie de informaţiile furnizate de metodele acestui obiect.getSeconds() document. Metoda getHours() Metoda getHours() este folosită pentru a determina ora din cadrul datei stocate în obiectul pentru care este apelată. valoarea returnată este un număr cuprins între 0 şi 11. Metoda getDay() Metoda getDay() este folosită pentru a determina ziua din săptămână a datei stocate în obiectul pentru care este apelată. valoarea returnată este un număr cuprins între 0 şi 59. Metoda getMonth() Metoda getMonth() este folosită pentru a determina luna datei stocate în obiectul pentru care este apelată. metode pentru setarea anumitor caracteristici şi metode pentru conversie.getYear() ora=data.m. corespunzându-i valoarea 13:00:00. Metodele obiectelor de tip dată Metodele obiectelor de tip dată pot fi grupate în trei categorii: metode pentru preluare de informaţii. valoarea returnată este un număr cuprins între 0 şi 23.getDate() luna=data. Metoda getMinutes() Metoda getMinutes() este folosită pentru a determina minutul din cadrul datei stocate în obiectul pentru care este apelată. Metoda getYear() Metoda getYear() este folosită pentru a determina anul din cadrul datei stocate în obiectul pentru care este apelată.getMonth()+1 an=data. În JavaScript timpul este stocat în formatul de 24 de ore. valoarea returnată este un număr cuprins între 0 şi 6. Metoda getSeconds() Metoda getSeconds() este folosită pentru a determina secunda din cadrul datei stocate în obiectul pentru care este apelată. Metoda getDate() Metoda getDate() poate fi folosită pentru a determina ziua din lună a datei stocate în obiectul pentru care este apelată.write("Ati intrat pe pagina astazi: "+zi+"-"+luna+"-"+an+" ora"+ora+":"+min+":"+sec) </script> Metoda setTimeout() 52 .getMinutes() sec=data. valoarea returnată este un număr cuprins între 0 şi 59. orei 1 p.getHours() min=data. Exemple Script care sa afişeze "Aţi intrat pe pagina astăzi: … ora … <script> data=new Date() zi=data. valoarea returnată este un număr cuprins între 1 şi 31.

bgColor(„cyan”) } </script> <body onload=fereastra()> Metoda open permite specificarea unor parametri legaţi de aspectul ferestrei deschise.document.write("<H1>RECLAMA</H1>") f.title() – stabileşte titlul ferestrei f. confirm() blur().lăţimea în pixeli a suprafeţei ferestrei 53 .width .write() – scrie în fereastra f f.timp se exprimă în ms Script care afişează un ceas în timp real în bara de stare: <script> function timp() { ceas=new Date() ora=ceas.getHours() min=ceas.nume poate fi folosit pentru a referi fereastra respectivă cu ajutorul atributului target .document.URL indică adresa documentului care va fi încărcat în fereastra respectivă .Permite stabilirea unui interval de timp înainte de apelarea unei funcţii sau înainte de evaluarea unei expresii.bgColor() – stabileşte culoare de fond a documentului din fereastra deschisă <script> function fereastra() { f=window."opţiuni") .opţiuni reprezintă o listă de elemente pentru stabilirea aspectului ferestrei În cadrul scriptului fereastra deschisă poate fi identificată prin variabilă: f=window.getSeconds() window. close() alert().status=ora+":"+min+":"+sec setTimeout("timp()".100) } setTimeout("timp()". "nume".100) </script> Obiectul Window Este plasat la cel mai înalt nivel.document.open() f. focus() setTimeout() Obiectul window este important pentru gestionarea ferestrelor în care sunt încărcate documentele html. Folosind metodele open() şi close() putem deschide ferestre.getMinutes() sec=ceas. fiind părintele tuturor obiectelor dintr-o pagină.open () Are sens: f.open ("URL". prompt(). setTimeout("funcţie". Aceştia se introduc separaţi prin virgulă în cadrul secţiunii opţiuni din construcţia metodei open: . Deschiderea unei ferestre window. Metode fundamentale: open().document. putem încărca anumite documente în ferestrele respective şi le putem stabili anumite proprietăţi.timp) .document.

scrollbars = yes/no .afişează sau nu bara de scroll .frames[0] – referă primul cadru parent.fgColor = culoarea textului . Proprietăţile obiectului document setează în primul rând proprietăţile şi atributele html incluse în marcajul HEAD sau în marcajul BODY .i<300.. <script> function fer() { f=window. fiecare înglobând un cadru din interiorul ferestrei: parent.înălţimea în pixeli a suprafeţei ferestrei . Exemplu: Script care să deschidă o fereastră ce se deplasează în partea de sus pâna la mijlocul ecranului.bgColor = culoarea fundalului .pentru fereasta curentă f."".document. putem scrie în documentul curent sau într-un anumit cadru.close()"> Obiectul document Este derivat din obiectul window şi este folosit ca metodă de acces la toate elementele html.afişează sau nu bara de meniuri .open("".document.document. Un buton va închide fereastra.m.pregăteşte un flux de date pentru write şi writln write() .write("Reclama") for(i=0.title = text în bara de titlu .document. De exemplu. height=100.scrie o expresie în document şi adaugă la sfârşit un caracter linie nouă close() . parent.afişează sau nu bara de instrumente .height .închide fluxul deschis cu open() Folosind metodele write putem scrie într-o anumită fereastră.document.write() .left = nr de pixeli faţă de marginea din stânga a ecranului .moveTo(i.alinkColor = culoarea legăturilor active .a.i++) f. left=0") f.pentru un obiect de tip fereastra Metoda moveTo(i.toolbar = yes/no .j) mută o fereastră cu i pixeli spre dreapta şi j pixeli în jos.document."width=200.close() . 54 .d.document.document.scrie o expresie în documentul html writeln() .scrie în primul cadru.menubar = yes/no .close() .top = nr de pixeli faţă de marginea sus a ecranului Închiderea ferestrelor se poate realiza prin metoda close() Poate fi apelată prin: window.frames[1] – referă al doilea cadru s.0) } </script> <body onload=fer()> <input type="button" value="Inchide fereastra" onclick="f. Gestionarea cadrelor Atunci când introducem cadre este creat automat un obiect parent care include un şir de obiecte.vlinkColor = culoarea legăturilor vizitate . top=0.frames[0].linkColor = culoarea legăturilor nevizitate Metodele obiectului document permit generarea paginilor html în mod dinamic open() .

poza.com’”> Încărcarea unui fişier intr-un cadru se poate face prin parent.2000) } </script> <body onload=”deschide().scrie în cadrul cu numele „cadru”. încărcarea unei alte pagini web se poate face prin construcţia: window.numecadru De exemplu. Este identificat prin: document. La introducerea imaginilor într-o pagină web se creează în mod automat un şir de obiecte imagine.href = "URL" Exemplu de buton cu funcţie de legătură: <input type=button value=”diverse” onclick=”window.write() . Se creează cu new Image() poza=new Image() Proprietăţi: poza. Dacă imaginea la care vă referiţi este prima din pagină va funcţiona exemplul de mai jos: 55 .a.location. Se revine la imaginea iniţială atunci când mouse-ul este scos de pe imagine. menubar=no.href=imagini[i] if(i==2) i=-1 setTimeout("banner()". height=100.images[0] – referă prima imagine introdusă în pagină document. poza.border=grosimea chenarului în pixeli.cadru.location.height=înălţimea imaginii în pixeli. poza.gif" function deschide() { f=window.specifică întreaga adresă URL De exemplu. document."width=200.gif" imagini[2]="z.cadru.Dacă atunci când au fost introduse cadrele acestea au primit şi un nume putem referi un cadru prin construcţia: parent.images[1] – referă a doua imagine introdusă s.images[i] unde i este numărul de ordine al imaginii din cadrul documentului. <script> imagini=new Array() imagini[0]="x. Permite deplasarea la o altă adresă URL sau permite extragerea unor elemente din cadrul URL curent.location.name=numele imaginii.width=lăţimea imaginii în pixeli.m. Realizarea unui efect RollOver Un efect RollOver înseamnă schimbarea fişierului sursă al imaginii de fiecare dată când se plasează mouse-ul deasupra imaginii."". poza.location. Cea mai folosită proprietate este href .href=’http://www.gif" imagini[1]="y.open("".href=”URL” Construirea unui banner La încărcarea unui pagini se deschide o fereastră nouă în care. Fiecărui obiect de tip imagine i se pot aplica toate proprietăţile imaginilor.banner()”> Obiectul Image Cuprinde proprietăţile şi metodele necesare pentru lucrul cu imagini. parent. din 2 în 2 secunde se succed 3 imagini.document.microsoft. Obiectul location Încapsulează adresa URL a paginii curente. toolbar=no") } i=-1 function banner() { i++ f.src=sursa imaginii.d. scrollbars=no.

border=2 onmouseout=document.gif" width=50 height=40 onmouseover=document.images[2].gif" imagini[2]="z.src="x.images[0].poza.<img src="x.gif'"> <td><img src="y.gif" onmouseout=document.gif" width=50 height=40 onmouseover=document.gif> </html> 56 .gif" onmouseover=document.images[0].gif" imagini[1]="y.images[0]. Când se plasează mouse-ul pe o imagine aceasta să apară cu chenar iar când se executa clic să apară mai jos redimensioantă: <table> <tr><td> <img src="x.src=imagini[i] if(i==2) i=-1 setTimeout("banner()".border=0 onclick="document.3000) } </script> <body onload="banner()"> <img src=x.src='x.gif" name= “poza” onmouseover=document.gif" i=-1 function banner() { i++ document.border=0 onclick="document. din 3 în 3 secunde <html> <script> imagini=new Array() imagini[0]="x.gif" onmouseout=document.src="x.images[1].poza. acesta poate fi folosit în cadrul unui script pentru referirea imaginii: <img src="x.gif"> Dacă la introducerea imaginii acesta primeşte şi un nume.src="y.images[0].gif"> Exemplu: Pagină ce afişează 2 imagini mici.src='y.images[2].GIF'"> </table> <br><br><br><br> <img src="" width=200 height=100 alt="Afiseaza poza"> Exemplu: Script ce derulează în pagină trei imagini.images[1].src="y.images[0].border=2 onmouseout=document.

În cazul interfeţei CGI era necesară permisiunea de a rula programe pe server. Istoria PHP-ului începe la sfârşitul anului 1994. adică informaţiile prezentate în aceste pagini sunt identice pentru toţi vizitatorii. Solid. descris în RFC 1867) şi oferă suport pentru cookies (mecanism de stocare a datelor în navigatorul client pentru identificarea utilizatorilor. care utilizează cantităţi mari de date şi sunt afişate conform cerinţelor utilizatorilor. PHP suportă încărcarea fişierelor de pe calculatorul client: upload (standard propus de E.0 care include o parte din vechile surse PHP/FI 2. Modelul client-server. la începutul anului 2000. Oracle. utilizând puternicul motor de scriptare Zend şi oferind suport nu numai pentru serverul Apache ci şi pentru alte servere Web. mSQL.CAPITOLUL 7 PHP Prezentare generală Începuturile PHP PHP (Hypertext Prepocessor). PHP reprezintă un pachet puternic care oferă un limbaj de programare accesibil din cadrul fişierelor HTML. Web-ul este însă dinamic. integrându-se în popularul sever Apache. Pagini web interactive (dinamice) După cum v-aţi dat seama.) şi acces la sisteme hipermedia precum Hyperwave. Programatorii Zeev Suraski şi Andi Gutmans rescriu analizorul PHP şi noua aplicaţie formează nucleul versiunii PHP 3. propus de Netscape). Informix. fără a face prea multe modificări în codul sursă. pentru medii Unix şi mai nou pentru medii Windows (inclusiv sursele).0. Relativ recent. ca proiect personal. când Rasmus Lerdorf dezvoltă prima versiune. ODBC etc. serverul web va afişa pentru fiecare vizitator al site-ului pagina corespunzătoare cerinţelor specificate. unde FI era o alta aplicaţie scrisă de Rasmus Lenford. Analizorul a fost rescris la mijlocul aceluiaşi an şi denumit PHP/FI 2. a fost făcută publică versiunea PHP 4. 57 .0 oferă posibilitatea accesării documentelor XML via DOM. un interpreter de formulare HTML. Această aplicaţie este disponibilă gratuit pe Internet. permiţând contorizarea accesului la paginile Web sau accesarea unei cărţi de oaspeţi (guestbook). PHP 4. De asemeni. limbaj asemănător cu Perl sau C. plus suport pentru manipularea bazelor de date într-un dialect SQL (dBase. Se estimează că la sfârşitul lui 1996 cel puţin 15 mii de site-uri Web utilizau PHP/FI. paginile HTML sunt “statice”. MySQL. script shell. A fost adăugat şi suportul pentru bazele de date mSQL şi astfel PHP/FI a început să aibă succes. cunoscut în versiunile mai vechi şi sub numele de PHP/FI (Personal Homepage/Form Interpreter).0. accesează acelaşi jobsite în acelaşi timp. PostgreSQL. executat pe server. Unul doreşte afişarea joburilor din domeniul financiar. iniţial a fost gândit a fi o simplă aplicaţie CGI pentru interpretarea formularelor definite prin HTML şi procesate de un program scris într-un limbaj Perl. Nebel şi L. aflaţi în locuri diferite. Acest lucru este posibil datorită tehnologiilor de tip clientserver. Acest tip de tehnologii presupun stocarea datelor pe un server web şi apoi afişarea acestora la cererea fiecărui vizitator. iar al doilea doreşte afişarea joburilor din domeniul informatic. Exemplu: doi vizitatori. Sybase. iar în anul 1997 numărul acestora era de 50 de mii. fiind disponibil gratuit pe Web. fiind considerat un analizor simplist care interpreta câteva macrouri ce puteau fi incluse în cadrul documentelor HTML. În acest caz. De asemeni. fiind simple pagini de prezentare.0. adică unele pagini trebuie actualizate “în timp real”. PHP-ul este făcut public în debutul anului 1995 sub denumirea de Personal Home Page Tools. ceea ce ducea la lacune în securitate şi în plus la disocierea de documentul HTML a programului care procesa datele. Masinter de la Xerox. în forma dorită de acesta.

fie cu ajutorul unui limbaj specializat. Există atât variante Apache pentru Linux cât şi pentru Windows. numit şi limbaj de scripting (cele mai utilizate fiind PHP. avem nevoie de: . care se instalează printr-un simplu clic. Combinaţia PHP+MySQL este folosită preponderent.se instalează aplicaţia (implicit în folderul Program Files/Apache group) 58 . . pe când un script server-side rulează pe server. având acces la unele informaţii stocate pe server la care un script client-side nu are acces.Un server web este un calculator conectat permanent la Internet. Diferenţa dintre un limbaj de scripting pe partea de client (ex. rapid.serverul web primeşte cererea şi determină execuţia unui script rezident pe server. Un exemplu sugestiv este un contor de pagina web. . Aceste scripturi sunt stocate şi rulează pe serverul web şi pot fi scrise fie în limbajul C. Metoda I – instalarea separată şi configurarea componentelor Serverul Apache . Atu-uri : gratis.se descarcă din Internet serverul web Apache. astfel încât acestea să poată fi instalate uşor şi să lucreze împreuna.interfaţa comună pentru porţi de acces). cross-platform. JavaScript) şi unul server-side este esenţială: JavaScript rulează în browserul clientului. ASP şi Perl). . oferă suport pentru multe tipuri de baze de date (nici un alt limbaj nu oferă asemenea suport) c) serverul de baze de date MySQL ( http://www. La un server se pot conecta simultan mai mulţi clienţi.browserul afişează informaţiile într-o fereastră. Web-ul este însă dinamic. Aplicaţii software necesare Pentru a crea aplicaţii web interactive.php. oferă foarte multe funcţii.serverul web transmite pagina browserului care a trimis cererea.pagina în format HTML este returnată serverului web.scriptul extrage unele date dintr-o bază de date. uşor de învăţat (sintaxa asemănătoare cu C).com/) este gratis şi foarte rapid (unul dintre cele mai rapide la ora actuală).un server de baze de date La ora actuală.net/ ) este folosit de peste 35% din site-urile interactive. . scriptul server-side va contoriza vizitarea paginii într-o bază de date centralizată.org/ ) – este unul dintre cele mai utilizate (peste 55 %).apache.phpgeek. Diferenţa este esenţială comparativ cu paginile simple HTML. care pot avea acces la aceleaşi informaţii.datele extrase sunt prelucrate şi convertite în format HTML. De câte ori cineva accesează pagina.mysql. de la http://www. care trimite către client (care este un calculator pe care rulează un browser) pagini în format HTML.exe). Adresa este http://www. Aplicaţia este oferită într-un fişier executabil (. O sesiune client-server în care intervine şi interogarea unei baze de date constă din următorii paşi: . uneltele necesare se pot descărca gratuit din Internet.un limbaj de scripting pe partea de server . rezidentă pe server. a) serverul web Apache ( http://www.com/. iar programele care fac posibil acest lucru sunt numite scripturi CGI sau scripturi server-side. Denumirea de server provine din faptul ca el „serveşte” clientului paginile solicitate. întrucât acestea folosesc o interfaţă standard numită Common Gateway Interface (CGI . care înglobează Apache. Atu-uri : gratis. stabil.org/ .apache. PHP şi MySQL gata configurate. b) limbajul PHP ( http://www. . . care sunt afişate în browserul vizitatorului aşa cum au fost construite (în formă “brută”). Exista utilitare (gen PHP Triad).utilizatorul introduce o adresă în bara de adrese a browserului.un server web (software) .

php3 AddType application/x-httpd-php . - Scripturile create vor fi salvate în directorul c:\Apache\htdocs. prin modificarea fişierului httpd.exe Metoda a II-a – folosirea utilitarului PHPtriad se descarcă din Internet utilitarul PHPTriad de la adresa http://www.” care precede liniile cu extensiile precizate.1 (sau ServerName localhost) În acest moment serverul web Apache este instalat şi configurat pe calculatorul dumneavoastră. Cu alte cuvinte.ini. Acest folder este numit de serverul Apache „Document Root”.ini urmându-se precizările din fişierul install.dll.com/ se instalează aplicaţia (implicit în folderul c:\apache) după instalare se lansează fişierul winmysqladmin. trebuie să avem următoarea linie: ScriptAlias /php/ "c:/php/" c) în secţiunea Actions (înainte de Metadir) trebuie să avem următoarea linie: Action application/x-httpd-php /php/php.mysql. se şterge caracterul “.com/ .phpgeek. trebuie să avem următoarele linii: AddType application/x-httpd-php . având numele localhost. aflat în folderul Apache group/Apache/Conf.se editează fişierul php.conf (trebuie eliminat caracterul “#” de la începutul liniilor) astfel: a) în secţiunea AddType application. se introduce un username şi o parolă şi se validează. întrucât aplicaţiile client-server folosesc şi fişiere html obişnuite).php.php AddType application/x-httpd-php . .se copie fişierul php4ts.name să apară ServerName 127. de la adresa http://www.exe aflat în folderul c:\apache\mysql\bin.conf.txt.phps b) în secţiunea ScriptAlias.se descarcă din Internet serverul de baze de date MySQL. Pentru rularea aplicaţiilor client-server în aceasta configuraţie.net/ .exe MySQL . Fişierele au extensia .se editează fişierul httpd.php .se instalează aplicaţia prin rularea programului setup. scriptul c:\apache\htdocs\index.se dezarhivează aplicaţia într-un folder (de exemplu c:\php) .se copie fişierul php.lansarea MySQL Crearea scripturilor PHP 59 . .în secţiunea intitulată Windows Extensions.php va avea adresa http://localhost/index.php (se pot salva şi fişiere cu extensia html.se dezarhivează fişierele aplicaţiei într-un folder (c:\mysql) . .php4 AddType application/x-httpd-php-source . de la adresa http://www. Dupa instalarea Apache.host. precum şi toate fişierele din folderul c: \php\dlls în folderul windows\system .0. PHP .ini-dist în folderul windows şi se redenumeşte în php. calculatorul se comporta ca un server web.0.lansarea serverului web Apache .se configurează serverul web Apache pentru a putea rula scripturi PHP. este necesară : .se descarcă din Internet aplicaţia de instalare a limbajului de scripting PHP. astfel încât în locul liniei de comandă #ServerName new.

Tag-urile HTML se introduc în codul PHP astfel: echo “<b> Introducerea codului HTML într-un script ”. echivalent: <? // continutul scriptului ?> Executarea scripturilor PHP Scripturile PHP execută mai multe tipuri de operaţii elementare: . fişierul va fi salvat cu extensia php. care indică serverului că textul cuprins între acestea este format din instrucţiuni PHP.prelucrarea acestor date .Pentru crearea scripturilor PHP este necesar un editor de texte obişnuit.afişarea datelor Scripturile PHP sunt alcătuite din instrucţiuni. Cea mai simplă instrucţiune PHP este cea de afişare a unui text: echo “Text care va fi afişat în browser”.preluarea datelor de la utilizator . Fiecare script PHP include două linii.prelucrarea datelor stocate pe server .obţinerea accesului la datele stocate pe server . Un comentariu se introduce într-un script PHP cu ajutorul marcajului // (când comentariul este scris pe o singură linie) sau /* conţinutul comentariului */ (atunci când comentariul este scris pe mai multe linii) <?php // comentariu pe o linie //continutul scriptului ?> <?php /* comentariu pe mai multe linii */ // continutul scriptului ?> Tipuri de date în PHP Date numerice Variabilele numerice se pot introduce astfel: 60 . <?php // continutul scriptului ?> sau.

//se concatenează şirul cu textul următor $sir=$sir. Toate variabilele vor începe cu $. variabilele pot proveni şi din URL-uri.' (punct).”iar acesta este al doilea şir”.774 //alt exemplu de sir $d=”99”. De asemeni.$a=123. //extragem ultimul caracter al şirului $ultimul=$sir[strlen($sir)-1]. numere. Variabile PHP În PHP lucrul cu variabile este extrem de simplu. matrice). Exemplu: //definirea unui şir $sir=”acesta este un şir”. La fel ca în limbajul C. indiferent de tipul lor (şiruri. Variabile numerice Un exemplu de declarare a variabilelor în PHP este următorul: //exemplu de variabila sir $a=”acesta este un exemplu de variabila sir”. Variabilele pot fi introduse într-un script sau transferate dintr-o pagină HTML cu ajutorul unui formular. //exemplu de variabila numerica (în virgula mobila) $c=1. 61 . //sau $a=-123 Şiruri de caractere În PHP şirurile de caractere vor fi delimitate de ghilimele sau apostrofuri (în acest ultim caz se va inhiba evaluarea variabilelor din şir). Secvenţa escape \n \r \t \\ \$ \” Valoare Linie nouă Întoarcere la începutul liniei Tab Backslash Semnul dolar Ghilimele Şirurile se pot concatena utilizând operatorul '. atunci variabilele din şir se vor evalua şi înlocui prin valoarea lor. caracterul backslash se utilizează pentru introducerea caracterelor speciale. //exemplu de variabila numerica (numar intreg) $b=17. //extragem primul caracter al şirului $primul=$sir[0]. Dacă şirul de caractere este scris între ghilimele.

echo $e. Variabile de tip şir Vom da un exemplu în care şirul va fi încadrat între ghilimele duble iar variabilele din şir vor fi înlocuite cu valorile acestora. Operatorul de comparaţie este == ($variabila==1). Dacă este necesară includerea caracterelor speciale.php\”>”. De exemplu.“Duminica”).“Vineri”. $buna_ziua=”Buna ziua. $nume”. //afisam ultimul element din array echo $zile[6]. Variabile de tip matrice (array.$i<=6.“Miercuri”.“Joi”. Această secvenţă de cod va afişa “Bună ziua. //afisam primul element din array echo $zile[0].”<br>”.} Operatori PHP Operatori aritmetici Exemplu $a+$b $a-$b $a*$b $a/$b $a%$b Operaţie Adunare Scădere Înmulţire Împărţire Modulo Rezultat Suma dintre $a şi $b Diferenţa dintre $a şi $b Produsul dintre $a şi $b Câtul dintre $a şi $b Restul împărţirii lui $a la $b 62 . George!”.“Marti”. cu o structura repetitiva (anticipam un pic) for($i=0. iar accesarea unui element se face prin numărul său de ordine. masiv) Array-urile sunt variabile ce conţin valori multiple. Semnul = reprezintă operatorul de atribuire.$i++) {echo $zile[$i]. Acest array are şapte elemente. începând de la zero. echo “<form action=\”http://localhost/script. $nume=”George”. //afisam toate elementele din array. ele trebuie precedate de un backslash. echo $buna_ziua.“Sambata”. pentru stocarea zilelor săptămânii într-un array se foloseşte următoarea construcţie: $zile=array(“Luni”.//calculam şi afisam suma dintre b şi d $e=$b+$d.

apoi îl returnează POSTDECREMENTAR Returnează $a. Operatorii de comparaţie Permit compararea valorilor. Exemplu: //atribuim variabilei $a valoarea 7 $a=7. apoi E îl decrementează Nume operator PREINCREMENTARE Operatori logici Exemplu Nume operator Rezultat 63 . operatorul de atribuire este ‘=’. apoi îl incrementează PREDECREMENTARE Decrementează $a.$b. //afisam valorile variabilelor echo $a. Exemplu $a==$b $a===$b $a!=$b $a<$b $a>$b $a<=$b $a>=$b Nume operator EGAL IDENTIC DIFERIT MAI MIC DECÂT MAI MARE DECÂT MAI MIC SAU EGAL MAI MARE SAU EGAL Rezultat Adevărat dacă $aeste egal cu $b Adevărat dacă $a este egal cu $b şi variabilele sunt de acelaşi tip Adevărat dacă $a este diferit de $b Adevărat dacă $a este strict mai mic decât $b Adevărat dacă $a este strict mai mare decât $b Adevărat dacă $a este mai mic sau egal cu $b Adevărat dacă $a este mai mare sau egal cu $b Operatori de incrementare/decrementare (creştere/descreşterea valorii cu o unitate) Exemplu ++$a $a++ --$a $a-Rezultat Incrementează $a. apoi îl returnează POSTINCREMENTARE Returnează $a.Operatorul de atribuire În PHP. //atribuim variabilei $b valoarea $a+5 $b=$a+5.

} elseif ($x==2) { echo “valoarea lui x este 2”. dar nu simultan Structuri de control Structuri alternative Instrucţiunea IF Are următoarea sintaxă generală: if (conditie) { //aici se introduc instructiunile } Utilizând operatorii PHP. Acesta este modul de execuţie al instrucţiunii switch. } else { echo “X nu are valoarea 1 sau 2”. instrucţiunea alternativă va fi executată doar dacă expresia condiţională din elseif este TRUE. Cu numeroase ocazii. putem construi instrucţiuni IF mai complexe: if ($x==1 && $y<=2) { //aici introducem instructiunile dorite} Instrucţiunile IF…ELSEIF Aşa cum sugerează numele. } Instrucţiunea SWITCH Instrucţiunea switch este echivalentă cu o serie de instrucţiuni if. instrucţiunea elseif extinde o instrucţiune if pentru a executa alte instrucţiuni în cazul în care expresia condiţională din if este FALSE. este o combinaţie a instrucţiunilor if şi else. 64 . Ca şi else. if ($x==1) { echo “Valoarea lui x este 1”.$a and $b $a && $b $a or $b $a || $b !$a $a xor $b AND (şi) OR (sau) NOT XOR Adevărat dacă $a şi $b sunt adevărate Adevărat dacă $a şi $b este adevărat Adevărat dacă $a este fals Adevărat dacă $a sau $b este adevărat. Spre deosebire de else. veţi avea nevoie să comparaţi aceeaşi variabilă (sau expresie) cu mai multe valori diferite şi să executaţi diferite parţi din cod în funcţie de valoarea obţinută.

atât timp cât acest lucru este valabil. case 1: print "$i este egal cu 1". default: //instructiuni } Următorul exemplu ilustrează două modalităţi diferite de a scrie acelaşi lucru. se execută codul specificat între acolade: while (conditie) { //instructiuni } 65 . if( $i == 2) print "$i este egal cu 2". case “valoare2”: //instructiuni break. break. switch( $i) { case 0: print "$i este egal cu 0". case “valoare3”: //instructiuni break. } Structuri repetitive Instrucţiunea WHILE Testează dacă o condiţie este adevărată şi. case 2: print "$i este egal cu 2". una utilizează o serie de if şi alta utilizează instrucţiunea switch if( $i == 0) print "$i este egal cu 0".Sintaxa generală este următoarea: switch (selector) { case “valoare1”: //instructiuni break. break. if( $i == 1) print "$i este egal cu 1". break.

Utilizatorii familiari cu C sunt obişnuiţi să utilizeze în mod diferit buclele do. if( $i < $minimum_limit) { break. folosim următoarea secvenţă: $x=1.. } $i *= $factor. pas) { //aici se introduc instructiunile } Instrucţiunea FOREACH 66 . $x++. } Instrucţiunea DO…WHILE Presupune testarea condiţiei după ce instrucţiunile au fost executate o dată. while ($x<=100) { echo $x. prin introducerea instrucţiunii break într-o buclă do. conditie. pentru că la prima evaluare a expresiei obţinem FALSE (deoarece variabila $i nu este mai mare decât 0) şi execuţia buclei se opreşte.while. care permite oprirea execuţiei buclei.. Sintaxa generală este următoarea: do { //aici se introduc instructiunile } while (conditie). }while( 0). Bucla de mai sus va fi executată doar o singură dată.”<br>”.De exemplu. Instrucţiunea FOR Are sintaxa generală următoare: for (valoare_initiala. } print "$i este bun".while. Codul următor demonstrează acest lucru: do { if( $i < 5) { print "$i nu este suficient de mare". break. pentru afişarea numerelor întregi cuprinse între 1 şi 100.

Următoarele două exemple funcţionează în acelaşi mod: reset( $arr). valoarea elementului curent este atribuită lui $value şi pointerul intern al tabloului este avansat cu un element (astfel. Acest lucru înseamnă că nu veţi avea nevoie să faceţi apel la reset() înainte de foreach. } foreach( $arr as $value) { echo "Valoare: $value<br>\n". $value) = each( $arr)) { echo "Valoare: $value<br>\n". Valoare: $value<br>\n". while( list( . $value) = each( $arr)) { echo "Cheie: $key. 67 . dar utilă. } foreach( $arr as $key => $value) { echo "Cheie: $key. De asemeni. a doua este o mică. } Urmează 3 exemple de utilizare: /* Exemplul 1: o singura valoare */ $a = array( 1. ca Perl sau alte limbaje. identic: reset( $arr). Există două sintaxe posibile. extensie a celei dintâi : foreach( array_expresion as $value) { listă de instrucţiuni } foreach( array_expresion as $key => $value) { listă de instrucţiuni } Prima formă trece în revistă tabloul array_expression. 17). Instrucţiunea oferă un mod simplu de a trece în revistă un tablou. Valoare: $value<br>\n". La fiecare iteraţie. pointerul intern al fişierului este automat repoziţionat la primul element al tabloului. Notă: când foreach începe să fie executat. dar cheia (indicele) elementului curent va fi atribuită variabilei $key la ficare iteraţie. de asemeni. while( list( $key. 2 3. A doua formă face acelaşi lucru. foreach lucrează cu o copie a tabloului astfel încât pointer-ul intern al tabloului nu este modificat ca în cazul utilizării constructorului each. } Exemplele următoare funcţionează.PHP4 (nu şi PHP3) dispune de comanda foreach. la următoarea iteraţie aveţi acces la următorul element).

foreach( $a as $v) { print "Valoarea curenta este \$a: $v. } echo "Aici nu afiseaza niciodata. 17). } /* Exemplul 3: valoarea si cheia */ $a = array( "unu" => 1. } Instrucţiunea CONTINUE Instrucţiunea continue este utilizată într-o buclă pentru a sări peste instrucţiunile de după continue şi până la sfârşitul blocului. } /* Exemplul 2: valoare (cu cheie asociata) $a = array( 1. "saptesprezece" => 17 ). 2 3. execuţia iteraţiei curente este întrerupă şi se trece la execuţia iteraţiei următoare. $val) = each( $arr)) { if( !( $key % 2)) // Evita elementele impare continue. $i = 0.\n". Instrucţiunea continue acceptă un argument numeric opţional care va indica câte bucle imbricate vor fi ignorate.\n".\n". continue 3. "doi" => 2. /* Numai pentru afisare */ foreach( $a as $v) { print "\$a[$i] => $k. 68 */ .<br>\n". while( $i++ < 5) { echo "Exterior<br>\n". while( 1) { echo "Mijloc<br>\n". foreach( $a as $k => $v) { print "\$a[$k] => $v. "trei" => 3. while( list( $key. while( 1) { echo "Interior<br>\n". } $i = 0. executa_impar( $val).

inc'. else include( $other). Pentru a evita utilizarea eronată a fişierului inclus. $i < count( $files). Exemplu: /* Utilizarea este GRESITA si nu va functiona in modul dorit */ if( $condition) include( $file). orice cod din fişierul destinaţie care trebuie executat ca un cod PHP trebuie încadrat de tag-uri de început şi sfârşit valide în PHP. } Instrucţiunea INCLUDE() Funcţia include() introduce şi evaluează fişierul specificat în argument. execuţia determinând încheierea procesului în respectivul fişier şi revenirea în scriptul care l-a solicitat. PHP4 permite să returnaţi valori din fişierele incluse cu include(). } else { include( $other). Deoarece include() este o construcţie specială a limbajului. puteţi specifica fişierul care trebuie inclus utilizând un URL în locul unui pathname local.inc exista in acelasi director cu fisierul main. se poate executa o instrucţiune return în interiorul unui fişier inclus cu include(). 'doi. 'trei. Exemplu: /* Fisierul test. trebuie să o includeţi într-un bloc de instrucţiuni dacă ea apare într-un bloc condiţional.html */ 69 . Puteţi folosi aceste valori ca şi cum ar fi returnate de o funcţie normală. /* Aceasta este CORECT */ if( $condition) { include( $file). } În PHP4. } Instrucţiunea include() este reevaluată de fiecare dată când este întâlnită într-un cod PHP.inc */ /* Se presupune ca fisierul test. for( $i = 0. aşa cum reiese din exemplul următor: $files = array( 'unu. se poate folosi o instrucţiune include() într-o buclă pentru a include mai multe fişiere diferite.inc'). De asemeni. De asemeni.inc'.} echo "Nu faceti niciodata asta. $i++) { include( $files[ $i]). Dacă URL fopen wrappers nu sunt disponibile în PHP (aşa cum sunt în configuraţia implicită). cât şi în PHP3.<br>\n".

se afişează: Inainte de return 27 Intoarcere in main. Orice variabilă disponibilă pe respectiva linie va fi disponibilă şi în fişierul inclus. echo "Fisierul returneaza: '$retval'<br>\n".html */ /* Presupunem ca fisierul main. În PHP4 rezultatul va fi: Inainte de return Fisierul returneaza: '27' Să presupunem acum că main. echo "Intoarcere in main. if( 1) { return 27.html<br>\n".html Parse error: parse error in main.. În PHP4 se va afişa: Inainte de return Intoarcere in main. PHP3 afişează: Inainte de return 27 Intoarcere in main. $argN) { echo "Exemplu de functie. 70 .html Din contră.echo "Inainte de return<br>\n".html "27" arată că PHP3 nu suportă returnarea valorilor din fişiere în acest mod.. Este important de notat că atunci când un fişier este inclus cu include() codul pe care îl conţine moşteneşte domeniul variabilelor corespunzator liniei pe care apare instrucţiunea include() în cod.html a fost modificat şi conţine codul următor: include( 'test.. Atunci când main.html on line 5 Eroarea de analiză de mai sus este rezultatul faptului că instrucţiunea return este inclusă împreună cu test. } echo "Dupa return<br>\n". /* . Funcţii Funcţiile definite de utilizator O funcţie poate fi definită de utilizator conform sintaxei următoare: function nume_functie( $arg1. Dacă instrucţiunea return este mutată în afara blocului.html contine aceasta: */ $retval = include( 'test.\n".. .html este apelat în PHP3.inc'). el va genera o eroare de analiză la linia 3 deoarece în PHP3 nu putem evalua valori returnate de include(). in fisierul main.inc în acelaşi bloc. $arg2.inc')..

echo $str. my_function( $str). chiar alte funcţii şi definiţii de clase.= 'and something extra. în PHP4 nu există o asemenea restricţie.= 'and something extra. trebuie să precedaţi cu un '&' numele argumentului în apelul funcţiei: function my_function( $string) { $string . dar acceptă argumente implicite. Argumentul funcţiilor Informaţiile pot fi transmise funcţiilor printr-o listă de argumente. În PHP3. ca în exemplul de mai jos: function add_some_extra( &$string) { $string . } $str = 'This is a string. PHP acceptă transmiterea argumentelor prin valoare (implicit). and something extra. // Se va afisa This is a string.'. PHP nu susţine funcţii de supraîncarcare. PHP3 nu acceptă număr variabil de argumente în antetul funcţiilor. } Transmiterea argumentelor prin referinţă Implicit. Dacă doriţi să permiteţi unei funcţii să modifice argumentele sale. În această listă variabilele şi/sau constantele sunt delimitate prin virgulă. $input[0] + $input[1]. } $str = 'This is a string. Listele cu număr variabil de argumente sunt acceptate doar în versiunea PHP4. funcţiile trebuie să fie definite înainte de a fi referenţiate. '.return $retval. trebuie să precedaţi cu un '&' numele argumentului în definiţia funcţiei. Dacă vreţi ca un argument al unei funcţii să fie transmis prin referinţă. // Se va afisa This is a string. my_function( &$str). acestea trebuie transmise prin referinţă. echo $str. argumentele funcţiilor sunt transmise prin valoare (în sensul că schimbarea valorii argumentului în interiorul funcţiei nu se reflectă şi în afara funcţiei). Dacă vreţi să transmiteţi o variabilă prin referinţă unei funcţii care nu face acest lucru în mod implicit. prin referinţă şi argumente cu valori implicite. // Se va afisa This is a string. and something extra. Exemplu: function takes_array( $input) { echo "$input[0] + $input[1] = ". echo $str. nu se poate anula definirea sau redefini o funcţie declarată anterior. 71 . Un efect similar poate fi obţinut în PHP3 transmiţând funcţiei un tablou de argumente. '. } Într-o funcţie poate să apară orice cod PHP valid. add_some_extra( $str).'.

APLICAŢIE PRACTICĂ Exemplu de site unde utilizatorul trebuie să se înregistreze. astfel: Tabela useri. Crearea bazei de date şi a tabelelor necesare Crearea bazei de date anunturi se face cu comanda: create database anunturi. cu comanda: use anunturi. prenume varchar(15) NOT NULL. continut varchar(255) NOT NULL. pentru stocarea utilizatorilor: CREATE TABLE useri (id int(5) NOT NULL auto_increment PRIMARY KEY. pentru stocarea anunturilor: CREATE TABLE anunt ( idanunt int(5) NOT NULL auto_increment PRIMARY KEY. email varchar(15) NOT NULL ). Tabela anunt. Vom crea apoi mai multe tabele. domeniu varchar(4) NOT NULL. pass varchar(10) NOT NULL. nume varchar(15) NOT NULL. Vom deschide baza de date. tip varchar(1) NOT NULL. titlu varchar(100) NOT NULL. usernam varchar(10) NOT NULL. data date NOT NULL) Fisierele aplicatiei 72 .usernam varchar(10) NOT NULL.

//Executarea interogarii $rezultat=mysql_query($caut)."root".html target=main>Nou??? Inregistreaza-te !</a> </html> LOGIN. /* Construirea interogarii – extragerea utilizatorului cu username-ul transmis prin formular.HTML <html> <frameset cols="250.html> </frameset> </html> LEFT.INDEX. 73 . /* Functia die() este folosita pentru a opri executia scriptului şi pentru a printa mesajul de eroare daca functia precedenta se termina cu o eroare (în cazul nostru. /* Extragerea valorilor în urma executarii interogarii – variabila x este un sir de elemente în care sunt depuse valorile din inregistarea gasita */ $x=mysql_fetch_row($rezultat).*"> <frame src=left. Variabila $user corespunde numelui resursei de formular: <input type=text name=user> */ $caut="select * from useri where usernam='$user'".PHP <?php //Conectarea la mysql mysql_connect("localhost"."") or die ("eroare conectare").html> <frame name=main src=main. daca conexiunea nu poate fi realizata).php method=post> <table><tr> <td>username<td><input type=text name=user> <tr><td>password<td><input type=password name=pass> <tr><td><br><td align=center><input type=submit Value="Login"> </table> </form> <a href=inregistrare. */ //Selectarea bazei de date anunturi mysql_select_db(anunturi) or die ("eroare selectare baza de date").HTML <html> <br><br> <h2 align=center>Login</h2> <form action=login.

În acest caz extragerea valorilor din rezultat se poate face prin numele campurilor: $x{“id”} $x{“usernam”} $x{“pass”} $x{“nume”} $x{“prenume”} $x{“email”} */ $u=$x[1].main. .$x[0] //– reprezinta valoarea extrasa din campul id $x[1] //– reprezinta valoarea extrasa din campul usernam $x[2] //– reprezinta valoarea extrasa din campul pass $x[3] //– reprezinta valoarea extrasa din campul nume $x[4] //– reprezinta valoarea extrasa din campul prenume $x[5] //– reprezinta valoarea extrasa din campul email /* Se poate folosi şi functia mysql_fetch_array() $x=mysql_fetch_array($rezultat).location.extrag parola if($x) //– verifica existenta username-ului în tabela useri { if($pass==$p) //.incarca pagina principala şi transmite username <br><br> <h2 align=center>Login</h2> <form action=login.verifica parola echo " <body onload=parent.php?id=$user'> //.extrag username $p=$x[2]. else echo " <br><br> <h2 align=center>Login</h2> <form action=login.href='pagina_principala. .html target=main>Nou??? Inregistreaza-te !</a> </body> ".php method=post> <table><tr> <td>username<td><input type=text name=user> <tr><td>password<td><input type=password name=pass> <tr><td><br><td align=center><input type=submit Value=Login> </table> <font color=red><b>parola incorecta</b></font> 74 .php method=post> <table><tr> <td>username<td><input type=text name=user> <tr><td>password<td><input type=password name=pass> <tr><td><br><td align=center><input type=submit Value=Login> </table> </form> <a href=inregistrare.

value=='') {alert('Nu ati introdus prenumele!').ok=0.ok=0.ok=0.value!=document.parola.} if(document.f1.ok=0.value=='') {alert('Nu ati introdus numele !').value=='') {alert('Nu ati introdus adresa email!').mail.} if(document.} if(document.php method=post> <table><tr> <td>username<td><input type=text name=user> <tr><td>password<td><input type=password name=pass> <tr><td><br><td align=center><input type=submit Value=Login> </table> <font color=red><b>user inexistent</b></font> </form> <a href=inregistrare.user.html target=main>Nou??? Inregistreaza-te !</a>". ?> </html> INREGISTRARE.submit() } </script> </head> <h1 align=center>Formular inregistrare</h1><hr> <form name='f1' action=inregistrare.nume.parola2.f1.HTML <HTML> <head> <script language="JavaScript"> function validare() { ok=1 if(document. } else echo " <br><br> <h2 align=center>Login</h2> <form action=login.</form> <a href=inregistrare.f1.f1.ok=0.pren.} if(document.f1.value=='') {alert('Nu ati introdus username !').php method=post> <table align=center> <tr> <td>utilizator<td><input type=text name=user> <tr><td>parola<td><input type=password name=parola> <tr><td>confirma parola<td><input type=password name=parola2> 75 . ok=0.value) {alert('Parola neconfirmata !').f1.value=='') {alert('Nu ati introdus parola').} if(ok!=0) document.f1.html target=main>Nou??? Inregistreaza-te !</a>".} if(document.parola.f1.

"root". mysql_query($adaug).PHP <html> <?php mysql_connect("localhost".back()>back</a>". //. echo "<meta http-equiv=refresh content='1. echo "<a href=javascript:history.'$pren'.").'$mail')".url=pagina_principala.intoarce numarul de inregistrari rezultate din interogare Daca exista username-ul afiseaza mesajul USER EXISTENT şi incarca pagina anterioara. } else { $adaug="INSERT INTO useri VALUES (''.<tr><td>nume<td><input type=text name=nume> <tr><td>prenume<td><input type=text name=pren> <tr><td>email<td><input type=text name=mail> <tr><td><br><td align=center> <input type=button value=Ok onclick=validare()> </table> </form> </HTML> INREGISTRARE. /*. mysql_select_db("anunturi") or die("Nu pot selecta baza de date")."") or die("Nu ma pot conecta. daca nu. } ?> </html> 76 . '$user'.interogare sql $rezultat=mysql_query($caut) or die ("nu cauta").executa interogarea $x=mysql_num_rows($rezultat). $caut="select * from useri where usernam='$user'". //.'$parola'.'$nume'.php?id=$user'>". adauga volorile din formular în tabela USERI*/ if($x==1) { echo "<br><br><h2 align=center>User Existent</h2>".

Sign up to vote on this title
UsefulNot useful