Cuprins Introducere .. 3 1 Sacina de practica .......................................................................................................................... 4 2 Descrierea Software utilizate ........................................................................................................ 5 2.

1 HTML Hyper Text Markup Language .............................................................................. 5 2.1.1 Notiuni de baza ......... 6 2.1.2 Elemente de marcare ... 7 2.1.3 Tag-uri de baz ..... 8 2.1.4 Formatarea textului ..... 10 2.1.5 Tabele .... 11 2.2 CSS Cascading Style Sheet................................................................................................... 12 2.2.1 De ce folosim CSS..12 2.2.2 Notiuni de baza. 12 2.2.3 Folosirea stilurilor..13 2.2.4 Cum se insereaza o foaie de stil....... 14 2.3 PHP Php: Hypertext Preprocessor.. 16 2.3.1 Ce poate face PHP........ 17 2.3.2 Principiul de functionare. 18 2.3.3 Notiuni de baza. 20 2.4 MySQL Baze de date. 21 2.4.1 Tipuri de date 21 2.4.2 Conectare la MySQL folosind PHP 22 2.4.3 Sintaxa MySQL(exemple) ... 22 2.5 JavaScript.. 24 2.5.1 JavaScript(partea client, server). 24 2.5.2 Caracteristicile JavaScript... 25 2.5.3 Prezentare generala.. 25 Concluzie ............................................................................................................................................. 27 Bibliografie .......................................................................................................................................... 27 Anexa A (Codul sursa al paginei web) ............................................................................................. 29 Anexa B (PrintScreen-urile web site-ului) ....................................................................................... 37

UTM 526.1.579 ME
Mod Coala

Nr. document.

Semnat.

Data Litera Coala Coli

Elaborat Verificat
Contr. norm.

40

Aprobat

Guuleac E.

Introducere
In perioada actual prezenta unui website pe piata online, tinde s devin tema de activitate a multor companii ce inteleg, necesitatea extinderii propriei afaceri, ctre o piat reprezentat de milioane de potentiali clienti. Astfel, detinerea unei pagini web reprezint calea cea mai usoar de ofertare a noilor clienti. Interactionarea cu vizitatorii site-ului, prezentarea serviciilor, produselor si avantajelor furnizate de compania dvs, poate reprezenta cheia succesului pentru afacerea dvs online, transformand astfel, aceast mic investitie intr-o afacere profitabil pentru compania pe care o reprezentati. Prezenta unui site web pe internet, trebuie sa contureze si s transmit mesajul pe care doriti s-l transmiteti clientului. Proiectarea, dezvoltarea si detinerea unei pagini web are rolul sa stimuleze si s dezvolte afacerea in asa mod ca ea sa devin generatoare de venituri , deci cu alte cuvinte, profitabil. Fie c este vorba despre un simplu site de prezentare sau de un magazin online, puteti creste semnificativ volumul vanzrilor si autorietatea companiei dvs. Pentru c acest lucru s se intample, este important ca site-ul s indeplineasc toate cerintele specifice domeniului de activitate si s se adapteze noilor tendinte conforme cu mediul social actual. Pe scurt, realizarea, optimizarea si promovarea unui site in conditii optime va aduce clientul in firma dumneavoastr, crescand considerabil dimensiunile pietei potentiale pentru afacerea pe care o conduceti. Principalele argumente ale antreprenorilor ce ezit achiziionarea unui site web i a unei identiti virtuale sunt n general bazate pe presupuneri eronate, o pia netestat i probabil o uoar nencredere n tot ceea ce ine de Internet. i totui, studiile de caz i cele de pia arat c orice tara este, chiar i n vreme de criz, din ce n ce mai orientat spre tot ceea ce ine de online. n plus, datorit evoluiei extrem de rapide a tehnologiilor IT i diversificrii impresionante a soluiilor web disponibile, preurile achiziionrii, ntreinerii i promovrii unui site au devenit neglijabile. Astfel, prezena online s-a transformat dintr-un moft, ntr-o necesitate pentru orice companie cu intenii serioase. Aa cum spunea Churchill, Nu e de ajuns c facem totul ct se poate de bine. Cteodat trebuie s facem i ceea ce suntem obligai.. Piaa migreaz spre Internet companiile sunt obligate s fac acest pas i ele pentru a supravieui cererii.

1 Sarcina de practica
Mod Coala Nr. document Semnat. Data

UTM 526.1.579 ME UTM 526.1.579 ME

Coala

Crearea unui site Rent a car format din 4 pagini: 1) Chirie Auto - va contine lista automobilelor ce sunt disponibile pentru chirie; 2) Despre Noi - va contine informatie despre firma ce propune spre arenda automobile; 3) Rezervare - aici se poate de rezervat orice automobil ce se afla in lista; 4) Contacte - datele de contact, unde se poate de adresat daca apar intrebari sau probleme.

2 Descriere software utilizat UTM 526.1.579 ME UTM 526.1.579 ME

Coala

Mod Coala Nr. document

Semnat.

Data

2.1 HTML Hyper Text Markup Language HyperText Markup Language (HTML) este un limbaj de marcare utilizat pentru crearea paginilor web ce pot fi afiate ntr-un browser (sau navigator). Scopul HTML este mai degrab prezentarea informaiilor paragrafe, fonturi, tabele .a.m.d. dect descrierea semanticii documentului. Specificaiile HTML sunt dictate de World Wide Web Consortium (W3C). HTML este o form de marcare orientat ctre prezentarea documentelor text pe o singura pagin, utiliznd un software de redare specializat, numit agent utilizator HTML, cel mai bun exemplu de astfel de software fiind browserul web. HTML furnizeaz mijloacele prin care coninutul unui document poate fi adnotat cu diverse tipuri de metadate i indicaii de redare. Indicaiile de redare pot varia de la decoraiuni minore ale textului, cum ar fi specificarea faptului c un anumit cuvnt trebuie subliniat sau c o imagine trebuie introdus, pn la scripturi sofisticate, hri de imagini i formulare. Metadatele pot include informaii despre titlul i autorul documentului, informaii structurale despre cum este mprit documentul n diferite segmente, paragrafe, liste, titluri etc. i informaii cruciale care permit ca documentul s poat fi legat de alte documente pentru a forma astfel hiperlink-uri (sau web-ul). HTML este un format text proiectat pentru a putea fi citit i editat de oameni utiliznd un editor de text simplu. Totui scrierea i modificarea paginilor n acest fel solicit cunotine solide de HTML i este consumatoare de timp. Editoarele grafice (de tip WYSIWYG) cum ar fi Macromedia Dreamweaver, Adobe GoLive sau Microsoft FrontPage permit ca paginile web sa fie tratate asemntor cu documetele Word, dar cu observaia c aceste programe genereaz un cod HTML care este de multe ori de proast calitate. HTML se poate genera direct utiliznd tehnologii de codare din partea serverului cum ar fi PHP, JSP sau ASP. Multe aplicaii ca sistemele de gestionare a coninutului, wiki-uri i forumuri webgenereaz pagini HTML. HTML este de asemenea utilizat n e-mail. Majoritatea aplicaiilor de e-mail folosesc un editor HTML ncorporat pentru compunerea e-mail-urilor i un motor de prezentare a e-mail-urilor de acest tip. Folosirea e-mail-urilor HTML este un subiect controversat i multe liste de mail le blocheaz intenionat.

2.1.1 Notiuni de baza

Coala

Mod Coala Nr. document

Semnat.

Data

UTM 526.1.579 ME UTM 526.1.579 ME

HTML este prescurtarea de la Hyper Text Mark-up Language si este codul care sta la baza paginilor web. Paginile HTML sunt formate din etichete sau tag-uri i au extensia .html sau .htm .n marea lor majoritate aceste etichete sunt pereche, una de deschidere <eticheta> i alta de nchidere </eticheta>, mai exist i cazuri n care nu se nchid, atunci se folosete <eticheta /> browserul interpreteaz aceste etichete afind rezultatul pe ecran. HTML-ul nu este un limbaj case sensitiv (nu face deosebirea ntre litere mici i mari). Pagina principala a unui domeniu este fisierul index.html respectiv index.htm Aceast pagin este setat a fi afiat automat la vizitarea unui domeniu. De exemplu la vizitarea domeniului www.nume.ro este afiat pagina www.nume.ro/index.html. Unele etichete permit utilizarea de atribute care pot avea anumite valori: <eticheta atribut="valoare"> ... </eticheta> Componenta unui document HTML este: 1. versiunea HTML a documentului 2. zona head cu etichetele <head> </head> 3. zona body cu etichetele <body> </body> sau <frameset> </frameset> Versiunea HTML poate fi: 1) HTML 4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " 2) HTML 4.01 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 3) HTML 4.01 Frameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 4) HTML 5 <!DOCTYPE HTML> Toate paginile HTML ncep i se termin cu etichetele <html> i </html>. n interiorul acestor etichete gsim perechile <head>, </head> i <body>, </body>. Head conine titlul paginii ntre etichetele <title> i </title>, descrieri de tip <meta>, stiluri pentru formatarea textului, scripturi i linkuri ctre fisiere externe (de exemplu scripturi, fiiere de tip CSS sau favicon). Etichetele de tip meta conin cuvinte cheie, descrierea paginii, date despre autor, informaii utile motoarelor de cutare i au urmtorul format: <META NAME="nume" CONTENT="continut"> Exemplu: link ctre un fisier extern CSS: <link rel="stylesheet" type="text/css" href="css.css"> body gzduiete practic toate etichetele afiate de browser pe ecran. Exemplu: o pagin HTML cu titlul Exemplu iar coninutul Coninut pagin <html> <head> <title>Exemplu</title> </head> <body> Continut pagina </body> </html>.

2.1.2 Elemente de marcare

Mod Coala Nr. document

Semnat.

Data

UTM 526.1.579 ME UTM 526.1.579 ME

Coala

Mai jos sunt tipurile de elemente de marcare n HTML: 1) Marcare structural. Descrie scopul unui text. De exemplu: <h1>Fotbal</h1> Direcioneaza browserul pentru a reda "Fotbal" ca pe cel mai important titlu. Marcarea structural nu are un anumit stil predefinit, dar cele mai multe browsere web au standardizat modul n care acestea sunt afiate. De exemplu, titlurile importante (h1, h2, etc.) sunt aldine i mai mari dect restul textului.De notat c "h1" este folosit doar o singur dat per pagin deoarece cu el este marcat titlul ei. 2) Marcare pentru prezentare. Descrie cum apare un text, indiferent de funciile sale. De exemplu: <strong>ngroat</strong> Va afia textul "ngroat" cu litere groase, aldine.Not: Html a inceput n ultimii ani s nceap s nu mai foloseasc acest gen de tag-uri pentru c "b" nu d sens paginii, pe cnd tag-ul "strong" (adic strong emphasis) d un neles paginii, i mai important, asemenea tag-uri pentru prezentare doar ncarc o pagin cu informaii i o fac astfel mai greu de ncrcat, iar apoi dac ataezi un document CSS la pagin, o singur modificare la CSS (de ex: de la "font-weight:italic" la "font-weight:bold" va schimba tot textul selectat, i de exemplu, link-urile vor trece de la text nclinat la text ngroat, plus c n CSS avem avantajul de a putea preciza ct de mari sau mici s fie literele n pixeli px, n puncte pt, etc.)avem acelai efect ca i cnd am avea de schimbat toate tag-urile de "i" de pe pagin n tag-uri de "b", munc care chiar i la un website mic este enorm, ce s mai vorbim de unul de genul wikipedia. Aa c dac vrei s ncepei o carier n html sau un hobby (i s avei succes) nu folosii aceste taguri, nu degeaba s-a inventat CSS-ul. 3) Marcare pentru hiperlink. Leag pri ale unui document cu alte documente. De exemplu: <a href="http://ro.wikipedia.org/">Wikipedia Romneasc</a> Va reda Wikipedia romneasc ca hiperlink ctre un URL specificat. 4) Elemente speciale (widget). Creeaz obiecte, cum ar fi butoanele i listele. Doar marcatorii de prezentare (mpreun cu foile de stiluri - CSS) determin cum coninutul din interiorul marcatorului va fi prezentat. Ceilali marcatori spun browserului ce obiecte s redea sau ce funcii s execute.

2.1.3 Tag-uri de baza

Mod Coala Nr. document

Semnat.

Data

UTM 526.1.579 ME UTM 526.1.579 ME

Coala

Fiecare document este ncadrat de tagul de nceput <HTML> i corespunztor cel de sfrit </HTML>. Acestea snt opionale dar este bine ca folosirea lor s devin un obicei, deoarece informeaz programele client c documentul folosete HTML. Elementul HEAD : a) sintaxa : <HEAD> </HEAD>; b) conine informaii de titlu i informaii legate de subiectul general al documentului; c) poate conine la rndul lui urmatoarele elemente: TITLE, META i BASE Elementul TITLE : a) sintaxa <TITLE> nume fereastr </TITLE>; b) fixeaz titlul documentului (64 caractere maxim); c) poate apare numai n seciunea HEAD; d) va fi afiat n bara de titlu a browser-ului. Elementul META : <META name="nume" CONTENT="coninut" > - conine descrierea i cuvintele cheie asociate documentului ce vor fi interpretate de motoarele de cutare. <META name="generator" CONTENT="Some program" > - indic programul folosit pentru generarea documentului (este de fapt numele editorului HTML). <META name="author" CONTENT="Some name" > - indic numele autorului paginii. <META name="keywords" CONTENT ="keyw1 keyw2 keyw3 ..." > - furnizeaz cuvintele cheie pentru motoarele de cutare. <META name="description" CONTENT ="This is a site about ... ." > - motoarele de cutare ce suport tagul de mai sus vor include o parte din textul specificat n rezultatul cutarii. Elementul BASE permite specificarea adresei de baz folosit de browser pentru interpretarea URL-urilor relative. Elementul BODY este poriunea cea mai consistent a oricrui document HTML, n care este plasat coninutul acestui document. Atributele specificate n cadrul tagului de nceput : a) BACKGROUND = url - locaia pentru imaginea de fundal (poate fi numai un fiier .gif sau .jpg); b) BGCOLOR = #RRGGBB - culoarea de fundal n cazul n care nu se specific atributul BACKGROUND sau fiierul asociat nu e gsit; c) TEXT = #RRGGBB - culoarea pentru textul obinuit; d) LINK = #RRGGBB - culoarea textului sau chenarului pentru legturi ce nu au fost vizitate; e) VLINK = #RRGGBB - culoarea textului sau chenarului pentru legturi ce au fost vizitate;

Mod Coala Nr. document

Semnat.

Data

UTM 526.1.579 ME UTM 526.1.579 ME

Coala

f) ALINK = #RRGGBB - culoarea textului sau chenarului pentru legturi ce tocmai au fost activate (pna se realizeaz noua legtur); Culoarea este specificat prin nume (black, white) sau prin codul RGB caz n care se foloeste notaia hexazecimal precedat de simbolul #. Cu toat standardizarea n domeniu, modul n care apar efectiv culorile pe monitor depinde de cartela grafic i software-ul adiacent. Unele browsere pot interpreta anumite culori n moduri neateptate. <IMG> - legarea unei imagini la document : a) sintaxa <IMG atribute >; b) atribute : 1) ALIGN - aliniere a imaginii n raport cu textul; 2) TOP - aliniaz partea superioar a imaginii cu elementul cel mai nalt din rndul ce conine imaginea; 3) MIDDLE 4) BOTTOM - aliniaz imaginea cu rndul de la baza textului ce conine imaginea; 5) ALT - text afiat cnd localizarea imaginii nu e posibil sau textul aprut n apropiere de cursorul mouse-ului, cnd acesta trece peste o imagine; 6) SRC - URL-ul pentru resursa imaginii respective. Elementul ANCHOR <A> este utilizat pentru plasare de legaturi ctre alte documente sau n cadrul aceluiai document. Textul cuprins ntre <A> i </A> va fi afiat de browser evideniat. Tagul <A> trebuie neaprat s includ cel puin una dintre urmtoarele atribute NAME i HREF. Atribute : a) HREF - specific un URL destinaie; b) NAME - numele ancorei.

2.1.4 Formatarea textului

Mod Coala Nr. document

Semnat.

Data

UTM 526.1.579 ME UTM 526.1.579 ME

Coala

<BLOCKQUOTE> se folosete pentru a cita un text care apare indentat si cursiv. <B> </B> - scriere cu BOLD. <I> </I> - scriere cu ITALIC. <CODE> </CODE> - pentru a include fragmente de cod , folosind un font monospaiat. Elemente HEADING : a) <H1> - bold cu font foarte mare, centrat, cu unul sau mai multe rnduri albe dedesubt; b) <H2> - bold cu font foarte mare, aliniat la stnga; c) <H3> - italic cu font foarte mare, uor indentat la stnga, cu cteva rnduri albe deasupra i dedesubt; d) <H4> - bold cu font normal, indentarea este mai mare ca la H3; e) <H5> - italic normal, indentarea ca la H4, titlul are un rnd alb deasupra; f) <H6> - bold normal, indentarea mai mare ca la H5, titlul are un rnd alb deasupra. g) <P> </P> - definirea unui paragraf n cadrul unui document; primul rnd din paragraf este indentat. h) <PRE> </PRE> - se foloseste pentru text preformatat. i) <HR> - linie orizontala pe toata latimea ferestrei. j) <STRONG> </STRONG> - accentuare de font (bold). k) <BIG> </BIG> - font de dimensiuni mari. <BR> - scrierea textului ce urmeaz la capt de linie, fr a lsa vreun rnd liber. <CENTER> </CENTER> - centrare a unui text. <DIV> </DIV> - mprire a unui text n uniti crora li se pot aplica anumite atribute. <EM> </EM> - evideniere tipografic (Italic) ; nu are atribute. <FONT> </FONT> - selectare dimensiune de font ; ntre 1 i 7; implicit este 3. La utilizarea elementului FONT, valoarea atributului SIZE trebuie precedat de "+" sau "-" pentru a specifica un font, n funcie de fontul de baz al documentului. <SMALL> </SMALL> - fonturi de dimensiuni reduse n comparaie cu fontul curent. <STRIKE> </STRIKE> - delimiteaz o zon n care textul apare tiat cu o linie orizontal. <STRONG> </STRONG> - evideniere puternic. <SUB> </SUB> - textul este scris cu caractere mai mici i este poziionat la nivelul unui indice. <SUP> </SUP> - superscript, exponent. <U> </U> - text subliniat.

2.1.5 Tabele

Mod Coala Nr. document

Semnat.

Data

UTM 526.1.579 ME UTM 526.1.579 ME

Coala

10

Elementul <TABLE> : a) Se folosete pentru a crea un tabel. b) Orice tabel ncepe cu un titlu ,opional urmat de unul sau mai multe randuri. c) Fiecare rnd are una sau mai multe celule. d) Celulele pot fi de 2 tipuri : celule cap de tabel i celule de date. e) Tabelul poate conine : paragrafe, liste , antete, formulare, imagini i text i se folosete de multe ori pentru o aranjare mai bun n pagin. f) n celulele cap de tabel textul e centrat, iar n celulele de date textul e aliniat la stnga. Sintaxa: <TABLE> </TABLE> Atribute : a) ALIGN=left|center|right, CELLPADDING=n b) ALIGN - controleaz alinierea tabelului nsui dar nu a celulelor individuale. Poate fi : left, center , sau right; c) WIDTH (limea) poate fi exprimat n pixeli (n) sau n procente (p%); o valoare de 100% nseamn c tabelul va ocupa toat limea ferestrei browserului; evitai s specificai limea tabelului n pixeli; d) BORDER - specific limea chenarului (n pixeli) ; dac se omite , nu va fi desenat nici un chenar; e) CELLPADDING - controleaz (n pixeli) spaiul dintre chenar i coninutul celulelor; f) CELLSPACING - controleaz (n pixeli) spaiul dintre celulele individuale. Elemente : a) CAPTION - se folosete pentru etichetarea tabelelor, permite atributul VALIGN (top, bottom). b) <TR> </TR> - Table Row indica unde ncepe i se termin valoarea unui rnd. Permite atributele ALIGN SI VALIGN : a) ALIGN - aliniere pe orizontal; poate avea valorile : LEFT, RIGHT, CENTER; b) VALIGN - aliniere pe vertical; poate avea valorile : TOP, MIDDLE, BOTTOM. Prin utilizarea lui TR cu atributele de mai sus se stabilesc alinierile pe orizontal sau vertical pentru un ntreg rnd. Poate include elementele TH i TD. <TD> </TD> - definete o celul individual n cadrul unei linii; dei nu e obligatoriu este bine s fie inchis orice celul de date (folosind tagul </TD>); astfel se poate face citirea mai uoara a tabelelor. 2.2 CSS Cascading Style Sheet WIDTH=n sau p%, BORDER=n, CELLSPACING=n,

Mod Coala Nr. document

Semnat.

Data

UTM 526.1.579 ME UTM 526.1.579 ME

Coala

11

2.2.1 De ce folosim CSS Cu ajutorul CSS-ului putem crea pagini web simple dar si complexe folosind efecte diverse. Cu CSS putem stabili culoarea, marimea si fontul textului, deasemenea putem crea un layout (un suoport pentru elementele HTML) personalizat adaugand margine culoare sau imagine de fond si multe altele. In concluzie CSS te poate scapa de multe batai de cap, ajutandu-te in a mentine codul html cat mai simplu si mai ordonat. Cascading Style Sheets pe numele lui mic CSS se foloseste pentru a personaliza tagurile HTML. In principiu HTML a fost conceput pentru a marca elementele unei pagini. Odata cu introducerea HTML 3.2 au fost introduse si atributele de personalizare a tag-urilor precum "font", "color" etc. A fost atunci cand limbajul de programare HTML a devenit greoi. Fiecare pagina a websitului trebuia luata separat si modificate proprietatile elementelor principale. Aceasta problema a fost rezolvata in versiunea 4.0 a HTML-ului. Toate atributele de personalizare au fost scoase si salvate intr-un fisier extern cu extensia ".css". In felul acesta modificand un singur fisier putem schimba forma in care sunt afisate toate paginile unui website. Putem schimba culoarea textului, fontul, marimea, putem personaliza div-uri, formulare si multe altele. 2.2.2 Notiuni de baza CSS, prescurtarea de la Cascading Style Sheets, sunt etichete folosite pentru formatarea paginilor web (de exemplu formatare text, background sau aranjare n pagina, etc.). Beneficiile sintaxei CSS sunt: a) c) formatarea este introdus ntr-un singur loc pentru tot documentul; datorit introducerii ntr-un singur loc a etichetelor se obine o micorare a codului paginii, b) editarea rapid a etichetelor; favoriznd ncrcarea mai rapid a acesteia. Sintaxa CSS este structurat pe trei nivele: a) c) nivelul 1 fiind proprietile etichetelor din documentul HTML, tip inline; nivelul 3 este reprezentat de comenzile aflate n pagini separate, tip extern. b) nivelul 2 este informaia introdus n blocul HEAD, tip embedded; Cea mai mare importan (suprascrie orice alt parametru) o are sintaxa de nivelul 1, iar cea mai mic importan o are cea de nivelul 3. Folosirea unui fiier extern sau nivel 3 care s conin comenzi CSS este foarte practic deoarece poate fi utilizat n mai multe situaii (mai multe fiiere HTML pot folosi acelai fiier extern CSS)

Mod Coala Nr. document

Semnat.

Data

UTM 526.1.579 ME UTM 526.1.579 ME

Coala

12

eliminnd timpul necesar introducerii codului corespunztor n fiecare pagin i totodat editarea lor ntr-un singur loc pentru mai multe fiiere. Extensia acestor fiiere este .css. Comenzile de nivel 2 sau embedded sunt cele gzduite oriunde ntre perechea de etichete <head> i </head> conform sintaxei: <style type="text/css"> <!-... comenzi CSS ... --> </style> Unde style - specific unde ncepe i unde se termin blocul CSS, iar type este folosit pentru a ascunde de browserele vechi, care nu cunosc sintaxa CSS, coninutul blocului style. Este permis folosirea comentariilor n CSS astfel: /* Acesta este un comentariu n CSS */ 2.2.3 Folosirea stilurilor Sintaxa CSS este alcatuit din trei pri: un selector, o proprietate i o valoare, n urmtorul format: selector { proprietate: valoare;} Selectorul este reprezentat de elementul (tag-ul) crui dorii s-i aplicai un anumit stil, proprietatea este atributul pe care dorii s-l schimbai i fiecare proprietate poate lua o anumit valoare. Propritatea i valoarea sunt separate de dou puncte (:) i sunt ncadrate de acolade {}. De exemplu: body {color: blue} Dac dorii s modificai mai multe proprieti aceluiai element, trebuie s separai fiecare proprietate cu punct i virgul (;). Exemplul de mai jos arat cum s definii un paragraf aliniat pe centrul paginii iar textului i se aplic culoarea roie: p {text-align: center; color: red} Pentru a evidenia mai bine proprietile definitie de stil, putei scrie fiecare proprietate pe cte un rnd, ca n exemplul urmtor: p{ text-align: center; color: red }

Mod Coala Nr. document

Semnat.

Data

UTM 526.1.579 ME UTM 526.1.579 ME

Coala

13

2.2.4 Cum se insereaza o foaie de stil Cnd un browser citete o foaie de stil, va aplica documentului formatrile specificate n foaia respectiv. n funcie de forma n care sunt prezentate informaiile de stil, inserarea acestora ntr-un document web se poate efectua n trei moduri: a) astfel, pentru inserarea unei foi de stil externe, ideal cnd stilul se va aplica mai multor pagini, trebuie folosit tag-ul <LINK> n fiecare pagin ce urmeaz s foloseasc stilul respectiv. Atributele obligatorii pentru tag-ul <LINK> sunt REL cu valoarea stylesheet,TYPE cu valoarea text/css i HREF care are ca valoare adresa URL a fiierului care conine foaia de stil. Acest tag se amplaseaz n seciunea HEAD a paginii web cu urmtoarea sintax: <HEAD> <LINK REL="stylesheet" TYPE="text/css" HREF="http://www.referate10.ro/nume_fiier.css"> </HEAD> n aceste condiii, browserul va citi foaia de stil din fiierul nume_fiier.css i va formata documentul n mod corespunztor. O foaie de stil poate fi scris n orice editor de text. Fiierul nu trebuie sa conin vreun tag HTML i trebuie salvat cu extensia .css. b) o foaie de stil intern ar trebui folosit atunci cnd exist un singur document cu un stil propriu. Foaia de stil intern se definete n seciunea HEAD folosind tagul <STYLE> astfel: <HEAD> <STYLE TYPE="text/css"> h1 {color: blue} p {margin-left: 20px} body {background-image: url("fundal.gif")} </STYLE> </HEAD> Browserul va citi acum stilurile, aa cum au fost definite, i va formata documentul n conformitate cu acestea. Not: n mod normal un browser ignor tag-urile necunoscute. Acest lucru nseamn c browserele mai vechi, care nu suport stiluri, vor ignora tag-ul <STYLE>, dar vor afia coninutul acestuia, cuprins ntre tag-ul de nceput i cel de ncheiere, sub form de text. Pentru a prentmpina acest neajuns, este recomandabil s includei coninutul n interiorul unui comentariu, ca n exemplul de mai jos: <HEAD> <STYLE TYPE="text/css">

Mod Coala Nr. document

Semnat.

Data

UTM 526.1.579 ME UTM 526.1.579 ME

Coala

14

<!-h1 {color: blue} p {margin-left: 20px} body {background-image: url("fundal.gif")} --> </STYLE> </HEAD> c) n final, dac dorii s folosii un stil inline, va trebui s folosii atributul style n interiorul tagului respectiv. Este o metod folosit mai ales atunci cnd un stil urmeaz s fie aplicat unei singure apariii a unui element. Atributul style poate conine orice caracteristic CSS. Exemplul urmtor arat cum se poate schimba culoarea i stilul fontului folosit ntr-un paragraf, fr a mai apela la tag-urile <FONT> cu atributul color i <B>: <p style="color:red; font-weight:bold"> Acesta este un paragraf n care textul va fi de culoare roie i scris cu caractere ngroate</p>

Mod Coala Nr. document

Semnat.

Data

UTM 526.1.579 ME UTM 526.1.579 ME

Coala

15

2.3 PHP Php: Hypertext Preprocessor La fel ca multe alte proiecte software importante, PHP s-a nscut sub forma unui mic utilitar cu care trebuia s rezolve o problem simpl i foarte particular. n 1995, un programator pe nume Rasmus Lerdorf i-a publicat CV-ul n pagina sa Web. Pentru ca s poat s urmreasc cine i-a vizitat pagina, Rasmus a introdus n pagin un tag special i a scris n Perl un script CGI care s colecteze informaii despre vizitatori, pe care apoi le scria ntr-un jurnal (log). A botezat acest cod PHP (Personal Home Page) tools. Mai apoi, n cadrul unui proiect "de serviciu", a trebuit s realizeze o interfa ntre clienii de pe Web i o baz de date. A recurs la aceeai idee: tag-uri HTML proprii, procesate de un script CGI (de data aceasta scris n C) care le nlocuia cu coninutul care trebuia inserat n pagin. A numit aceste taguri "Form Interpreters" (FI) deoarece rolul lor era de a prelua datele transmise prin formulare HTML i de a le transforma n variabile simbolice pe care le folosea apoi pentru interogarea bazei de date. Ce a urmat este destul de simplu: a reunit codul PHP cu FI i l-a fcut public sub numele PHP/FI. Comunitatea programatorilor a fcut restul. Programul a fost corectat, dezvoltat i extins n regim open source, depind cu mult scopul su iniial. Dei numele PHP s-a pstrat, semnificaia sa a devenit alta (cea din titlul articolului - observai caracterul recursiv, similar cu GNU). Ajuns ntre timp la versiunea 4, PHP este un limbaj de scripting server-side foarte solid, dotat cu peste 1000 de funcii, implementat pe numeroase platforme, conlucrnd cu toate serverele Web importante i dispunnd de interfee pentru toate majoritatea bazelor de date utilizate. Popularitatea sa a crescut nencetat, statistici Netcraft (nu foarte recente) estimnd c PHP este folosit n circa 1,5 milioane de domenii Web. Statistic, n 1996 PHP/FI era utilizat n 15.000 site-uri de web, iar n 1997 n 50.000. n 1998 PHP este utilizat n peste 150.000 site-uri.

Mod Coala Nr. document

Semnat.

Data

UTM 526.1.579 ME UTM 526.1.579 ME

Coala

16

2.3.1 Ce poate face PHP Orice. PHP este n principal axat pe partea de scripting ce ruleaz pe server, deci poi face orice face i un program CGI, cum ar fi colectarea de date de la formulare, generarea de coninut dinamic sau trimitere i primire de cookie-uri. Dar PHP poate face mult mai multe. Exist trei domenii principale unde sunt folosite scripturile PHP. a) Scripturi ce ruleaza pe server. Acesta este cel mai tradiional i cel mai important pentru PHP. Ai nevoie de trei lucrui pentru a face sa mearg: interpretorul PHP (CGI sau modul de server), un server de web i un navigator de web. E nevoie ca serverul de web s fie pornit, cu o conexiune PHP instalat. Poi accesa rezultatul programelor PHP cu un navigator prin intermediul serverului de web. b) Scripting la linia de comand. Poi face ca PHP s ruleze fr a fi nevoie de server i de browser, ci doar de interpretorul PHP. Aceast metod este ideal pentru scripturile ce se vor a fi executate regula folosind cron (task scheduler n Windows), sau sarcini simple de procesare a textelor. c) Scrierea de aplicaii ce ruleaz de partea clientului n mod grafic (GUI). Probabil c PHP nu este limbajul cel mai bun de a scrie aplicaii cu ferestre pentru Windows sau alte sisteme de operare, dar dac cunoti PHP foarte bine i vrei s foloseti nite faciliti avansate a PHP-ului n aplicaiile tale ce ruleaza de partea clientului poi totui folosi PHP-GTK pentru a scrie astfel de programe. De asemenea, ai posibilitatea de a scrie aplicaii ce ruleaz pe platforme diferite folosind aceast metod. PHP-GTK este o extensie a PHP-ului, nedisponibil n distribuia principal de PHP. PHP poate fi folosit pe aproape toate marile sisteme de operare, incluznd Linux, multe variante de Unix (incluznd HP-UX, Solaris i OpenBSD), Microsoft Windows, Mac OS X, RISC OS, probabil i altele. PHP are suport pentru majoritatea serverelor de web din prezent. Acestea includ serverele Apache, Microsoft Internet Information Server, Personal Web Server, Netscape i iPlanet, serverul Oreillz Website Pro, Caudium, Xitami, OmniHTTPd, i multe atele. Pentru majoritatea serverelor PHP are un modul, iar pentru celelalte suport standardul CGI, PHP putnd s lucreze ca un procesor CGI. Deci, cu PHP, ai libertatea de a alege un sistem de operare i un server de web. Chiar mai mult, ai posibilitatea de a alege programarea procedural sau programarea orientat obiect, sau chiar s le amesteci. Cu toate acestea, nu orice facilitate a standardului POO este prezent n versiunea curent a PHP-ului, multe librrii de cod i aplicaii mari (incluznd i librria PEAR) sunt scrise folosind doar cos POO. Cu PHP nu eti limitat s scoi rezultat HTML. Posibilitile PHP-ului includ afiarea de imagine, fiiere PDF i chiar filmulee Flash (folosind librriile libswf i Ming) toate generate instant. Poi, de asemeanea, ca rezultatul tu s fie orice fiier text, cum ar fi XHTML sau orice alte fiiere XML. PHP poate genera autmoat aceste fiiere i s le salveze n sistemul de fiiere n loc s le afieze, formnd un cache de partea serverului pentru coninutul tu dinamic.

Mod Coala Nr. document

Semnat.

Data

UTM 526.1.579 ME UTM 526.1.579 ME

Coala

17

Una dintre cele mai puternice i importante faciliti n PHP este suportul su pentru o gam larg de baze de date. Scrierea unei pagini de web ce interacioneaz cu o baz de date este incredibil de simpl. Urmtoarele baze de date sunt suportate: MySQL , Direct MS-SQL, IBM DB2, ODBC, Oracle, PostgreSQL, Unix dbm, etc. De asemenea, avem o extensie abstract a bazei de date DBX ce i permite ntr-un mod transparent folosirea oricrei bazei de date ce suport aceast extensie. Mai mult, PHP suport ODBC, standardul Open Database Connection, deci te poi conecta la orice alt baz de date ce suporta acest standard mondial. PHP are suport pentru a conversa cu alte servicii folosind protocoale cum ar fi LDAP, IMAP, SNMP, NNTP, POP3, HTTP, COM (pe Windows) i multe altele. Poi deschide socket-uri de reea i s interacionezi ntre aproape toate limbajele de programare Web. Apropo de interconectare, PHP are suport pentru instanierea obiectelor Java i utilizarea lor ntr-un mod transparent ca obiecte PHP. Poi, de asemenea, folosi extensii CORBA pentru a accesa obiecte aflate la distan. 2.3.2 Principiul de functionare Presupunnd c instalarea PHP nu v va pune probleme i ca toat lumea cunoate diferena ntre un script Web server-side (care este executat de serverul Web) i un script client-side (care este executat de browser), mi rmne de fcut precizarea c exemplele din acest articol au fost testate cu PHP 4.0.1, instalat pe un server Apache 1.3.2 rulnd sub Windows 98. Fiierele cu extensia "php" sunt considerate scripturi PHP i sunt preprocesate (directiva de configurare "AddType application/x-httpdphp .php" pentru Apache), dar serverul Web poate fi configurat i altfel (o alta extensie uzual este "phtml"). Astfel, PHP este un pachet suficient de puternic care ofer un limbaj de programare accesibil din cadrul fiierelor HTML, limbaj asemntor cu Perl sau C, plus suport pentru manipularea bazelor de date ntr-un dialect SQL. Acest pachet este disponibil gratuit pe Internet, pentru medii UNIX (inclusiv sursele). Limbajul PHP se introduce n cadrul documentului HTML printr-un tag special <?statement> unde statement este o instruciune a limbajului cum ar fi echo, if, break, while etc. Variabilele se declar 'din zbor', tipul lor putnd fi integer, double sau string, iar numele de variabile trebuie precedat de $. Sunt permii operatorii obinuii i se pot defini i funcii utilizator (prin construcia Function). Un exemplu: Presupunem ca definim urmtorul formular: <form action="/cgi-bin/php.cgi/~user/display.html" method=post> <input type="text" name="nume">

Mod Coala Nr. document

Semnat.

Data

UTM 526.1.579 ME UTM 526.1.579 ME

Coala

18

<input type="text" name="virsta"> <input type="submit"> </form> Se cere utilizatorului un nume i vrsta sa care vor fi procesate de programul PHP/FI coninut n fiierul display.html. Acesta ar putea conine: <? if ($virsta>50); echo "<p>Salut $nume, eti vrstic...</p>"; elseif ($virsta>30); echo "<p>Salut $nume, eti matur...</p>"; else; echo "<p>Salut $nume, eti tnr...</p>"; endif; > Dup cum se observ, PHP ofer un limbaj script puternic i simplu, accesul la cmpurile formularului realizndu-se prin intermediul unor variabile create automat. Alturi de suportul pentru ncrcarea fiierelor de pe calculatorul client: upload (standard propus de E. Nebel i L. Masinter de la Xerox, descris n RFC 1867) i de suportul pentru cookies (mecanism de stocare a datelor n navigatorul client pentru identificarea utilizatorilor, propus de Netscape), PHP/FI ofer integrarea bazelor de date prin sistemul de gestiune mini-SQL (mSQL) scris de David Hughes, sistemul Postgres95 al Universitii Berkeley i sistemul Solid care suport standarde ca Ansi SQL2, ODBC, SAG CLI si X/Open SQL. Exist ,de asemenea, o multitudine de funcii predefinite: a) c) e) f) matematice de manipulare a irurilor de caractere de manipulare a bazelor de date privitoare la conexiunile Internet b) de conversie d) de acces la resursele sistemului de operare i de lucru cu fiiere

g) generale

Mod Coala Nr. document

Semnat.

Data

UTM 526.1.579 ME UTM 526.1.579 ME

Coala

19

2.3.3 Notiuni de baza Cu ajutorul PHP se pot crea pagini de WEB dinamice, care sunt generate n momentul n care programul utilizator (de exemplu: Netscape) a formulat cererea ctre serverul de WEB. Serverul de WEB trebuie s aib activat suportul pentru PHP. Toate fiierele care au extensia .php3 trebuie sa fie rulate de ctre motorul PHP. Fiierele se creaz n acelai mod ca i fiierele HTML. Exemplu de pagin cu tag-uri PHP: <html><head><title>PHP Test</title></head> <body> <?php echo "Hello World<P>"; ?> </body></html> Fiecare tag PHP ncepe cu <? , se continu cu propoziia PHP i se nchide n partea dreapt cu ?> . ntr-un fiier HTML pot exista un numr nelimitat de tag-uri PHP.

Mod Coala Nr. document

Semnat.

Data

UTM 526.1.579 ME UTM 526.1.579 ME

Coala

20

2.4 MySQL Baze de date 2.4.1 Tipuri de date Cele mai folosite tipuri sunt: Tipuri numerice: a) INT Stocare octei 4; b) BIGINT 64 bii. Tipuri de iruri: a) CHAR Interval 1-255 caractere constant; b) VARCHAR Interval 1-255 caractere variabil. Tipuri de text: a) TEXT Lungime maxim de caractere 65.535; b) LONGTEXT Lungime maxima de caractere 4.294.967.295. Bineneles, se pot folosi i alte tipuri pentru datele introduse n baza de date, nsa o s lucrm numai cu acestea. Tipul de date intregi ncep de la valori negative la pozitive. Dac se adaug opiunea UNSIGNED, care este un modificator de coloan, nu vor mai fi valori negative ci vor ncepe de la 0. Ali modificatori sunt: AUTO_INCREMENT - funcioneaz cu orice tip ntreg. La fiecare rnd nou adugat n baza de date numarul asociat va fi incrementat. NULL - nseamn fr valoare (diferit de spaiu sau zero). NOT NULL - nseamn c orice nregistrare va fi considerat ceva. PRIMARY KEY - este rolul primei coloane din tabel, totodata reprezentnd elementul de referin pentru fiecare linie.

Mod Coala Nr. document

Semnat.

Data

UTM 526.1.579 ME UTM 526.1.579 ME

Coala

21

2.4.2 Conectarea la MySQL folosind PHP Creai un fiier cu numele config.php n care punei urmtorul cod: <?php // Informatii baza de date $AdresaBazaDate = "localhost"; $UtilizatorBazaDate = "root"; $ParolaBazaDate = "parola_mysql"; $NumeBazaDate = "tutorial"; $conexiune = mysql_connect($AdresaBazaDate,$UtilizatorBazaDate,$ParolaBazaDate) or die("Nu ma pot conecta la MySQL!"); mysql_select_db($NumeBazaDate,$conexiune) or die("Nu gasesc baza de date!"); ?> Acesta este fiierul de configurare cu care vom realiza conexiunea la baza noastr de date. Modificai valoarea variabilei $ParolaBazaDate cu parola pe care ai setat-o bazei de date dumneavoastr. Variabila $AdresaBazaDate este definit cu valoarea localhost deoarece aceasta este adresa serverului. (Adic, serverul Apache+PHP este instalat pe acelai calculator ca i pachetul MySQL) Variabila $UtilizatorBazaDate este definit cu valoarea root, acesta fiind utilizatorul cu toate drepturile de acces asupra bazei de date, administratorul. Variabila $NumeBazaDate este definit cu valoarea tutorial, aceasta fiind numele bazei de date asupra careia lucrm. Salvai i nchidei fiierul. 2.4.3 Sintaxa MySQL (exemple)

SELECT Creai un nou fiier cu numele extragere_date.php i introducei n el urmtorul cod: <?php require_once('config.php'); // Selectare date din baza de date $cerereSQL = 'SELECT * FROM `formular`'; $rezultat = mysql_query($cerereSQL); while($rand = mysql_fetch_array($rezultat)) { echo $rand['nume'];

Mod Coala Nr. document

Semnat.

Data

UTM 526.1.579 ME UTM 526.1.579 ME

Coala

22

} ?> INSERT Sintaxa insert se folosete pentru a aduga date n baza de date. S lum urmtorul exemplu: <?php require_once('config.php'); $cerereSQL = "INSERT INTO `formular` (`nume` , `prenume`, `varsta`) VALUES ('Ivascu', 'Valentin', '20')"; mysql_query($cerereSQL); echo 'Am adaugat valorile in baza de date'; ?> UPDATE Sintaxa update se folosete pentru a modifica datele existente din baza de date. S lum urmtorul exemplu: <?php require_once('config.php'); $cerereSQL = "UPDATE `formular` SET nume='nume', prenume='prenume' WHERE nume='orice' "; mysql_query($cerereSQL); echo 'Am modificat valorile campurilor nume si prenume unde numele este orice in baza de date'; ?> DELETE Sintaxa delete se folosete pentru a terge datele existente din baza de date. S lum urmtorul exemplu: <?php require_once('config.php'); $cerereSQL = "DELETE FROM `formular` WHERE nume='nume'"; mysql_query($cerereSQL); echo 'Am sters coloana cu campul nume = nume din baza de date'; ?>

2.5 JavaScript

Mod Coala Nr. document

Semnat.

Data

UTM 526.1.579 ME UTM 526.1.579 ME

Coala

23

Limbajul JavaScript a fost creat de firma Netscape. Spre deosebire de Java, care este un limbaj compilat (programele sunt compilate pe server i executate apoi local pe calculatorul client), JavaScript este un limbaj interpretat ( interpretarea limbajului se face de ctre browsere, care au ncorporate un interpretator ce analizeaz instruciunile JavaScript i le execut pe calculatorul client). Limbajele interpretate sunt mai simple dect cele compilate i mai uor de invat. De asemenea, modificarea i depnarea este mult mai uor de realizat pentru c nu mai este nevoie de compilare de fiecare dat. Spre deosebire de scripturile CGI, care se execut pe calculatorul gazd (server), scripturile JavaScript sunt ncrcate de pe server pe calculatorul local. Interpretatorul va decodifica instruciunile script-urilor i le va executa la momentul potrivit: la ncrcarea paginii pe server, la apsarea unui buton, la micarea mouse-ului, etc. Script-urile JavaScript fac parte din codul surs HTML al paginilor Web, dndu-le acestora un aspect dinamic, interactiv i mult mai atractiv. Acest lucru nsa are un mare dezavantaj - aceste script-uri pot fi copiate, modificate i reutilizate. n cazul applet-urilor Java nu apare aceast problem, ntrucat codul surs al acestora nu este transferat de pe server pe calculatorul client. Ambele limbaje creaz aplicaii independente de platform pe care se execut. Programele Java sunt executate de maina virtual Java, iar script-urile de ctre interpretator, ambele fiind incluse n navigator. n timp ce Java este un limbaj complex, orientat obiect, JavaScript este un limbaj mai puin robust; are foarte multe asemnri cu Java, ns sintaxa este mai simpl, iar regulile mai puin complexe. Chiar dac Java i JavaScript au o sintax asemntoare, aceste limbaje sunt folosite n scopuri diferite. Se poate mai degrab spune c sunt complementare dect concurente. 2.5.1 JavaScript(partea de client, server) Pentru c site-urile web s fie cu adevrat interactive, n afara serviciiilor de navigaie n web, trebuie s permit schimburi de informaii cu utilizatorul. Aceasta se face prin intermediul progamelor CGI (scripturi). Aceste scenarii sunt de dou tipuri :client i server. 1) Scripturile client sunt folosite n general pentru colectarea de date , pentru unele validri i pentru mbuntirea aspectului paginii. 2) Scripturile server sunt programe ce stau pe serverul web, prelucreaz datele primite de la client i pot genera dinamic pagini web trimindu-le napoi la client. De asemenea , prin intermediul lor se poate obine acces la baze de date. Aceste scripturi server se gsesc ntr-un director /cgi-bin aflat pe nivelul imediat inferior directorului ce conine programul server.

2.5.2 Caracteristicile JavaScript

Mod Coala Nr. document

Semnat.

Data

UTM 526.1.579 ME UTM 526.1.579 ME

Coala

24

Caracteristici JavaScript: a) c) e) f) este un limbaj pentru crearea de scenarii att pentru partea de client ct i pentru cea de server; a fost implementat ncepnd cu versiune 2.0 a programului Netscape Navigator; scenariile JavaScript sunt executate de ctre browser; instruciunile JavaScript sunt incluse n cadrul unui document HTML; b) are o sintax asemntoare limbajului C; d) avantajul este c nu necesit compilator;

g) cu JavaScript, paginile devin "inteligente", deoarece rspund la aciuni ale utilizatorului (mouse, tastatur). 2.5.3 Prezentarea generala JavaScript ofer posibilitatea de a crea pagini mai interactive, pagini care-i modific coninutul n funcie de... ce vrea programatorul, pagini mai spectaculoase, pagini care nu au acces la HDD i, nu n ultimul rnd, pagini care nu au auzit de baze de date. V las pe voi s evaluai care sunt avantajele i care sunt dezavantajele. Dar... ce nu face JavaScript face PHP. nainte de a vedea cum nserm liniile de JavaScript n documentul HTML v prezint cteva reguli de baz: a) JavaScript este case sensitive; b) sintaxa este asemntoare cu a C++; c) este orientat pe obiecte. Inserarea liniilor JavaScript n documentele HTML se poate face n mai multe feluri: a) prin folosirea tagului <SCRIPT> al HTML; Tag-ul <SCRIPT> este un tag al HTML i poate cuprinde un numr nelimitat de linii JavaScript. Se folosete n felul urmtor: <SCRIPT language= JavaScript> ...linii JavaScript... </SCRIPT> Un document HTML poate conine mai multe tag-uri <SCRIPT>. Atributul language poate specifica versiunea de JavaScript: <SCRIPT language=JavaScript1.0> <SCRIPT language=JavaScript1.1> <SCRIPT language=JavaScript1.2> b) prin specificarea fiierului cu comenzi JavaScript; Putem specifica fiierul de inclus prin intermediul atributului src al tagului <SCRIPT>. De exemplu:

Mod Coala Nr. document

Semnat.

Data

UTM 526.1.579 ME UTM 526.1.579 ME

Coala

25

<HEAD> <SCRIPT src=fiier.js> ... </SCRIPT> </HEAD> Acest procedeu este util mai ales cnd folosim aceleai funcii n mai multe pagini. Liniile de comenzi introduse ntre <SCRIPT> i </SCRIPT> sunt ignorate dac nu apare vreo eroare la deschiderea fiierului fiier.js specificat. n cazul unei erori se vor executa liniile introduse n cadrul tagului. Fiierele JavaScript externe nu pot conine dect linii JavaScript i definiii de funcii. Este recomandat ca fiierul JavaScript sa aib extensia .js. Folosirea expresiilor JavaScript ca valoare a atributelor HTML. Folosind entitile JavaScript putem specifica o expresie JavaScript ca valoare a unui atribut HTML. Valoarea entitii este evaluat dinamic. n acest fel putem construi pagini HTML flexibile, pentru ca atributul unui element HTML depinde de o informaie plasat undeva n pagin. Ca i entitile HTML, entitile JavaScript ncep cu caracterul & i se termin cu caracterul ;. n plus entitatea JavaScript este ncadrat ntre acolade. Ex.: <HR width=&{barWidth};%> unde, barWidth este o variabil JavaScript i reprezint limea liniei orizontale n procente. c) prin includerea de expresii JavaScript n atributele HTML; d) prin funcii de gestionare a evenimentelor.

Concluzie

Mod Coala Nr. document

Semnat.

Data

UTM 526.1.579 ME UTM 526.1.579 ME

Coala

26

Realizind practica de productie , am facut cunostinta cu componentele de baza a departamentului de tehnologii informationale a locului de practica,am putut raspunde la obiectivele propuse de la inceputul efectuarii saitului dat. Pentru a genera o pagina rapid la ncrcare e necesar de inut minte c pagina nu trebuie sa conina multa informaie si s nu aib imagini mari. De aici si reiese ca este mai usor sa navigezi pe pagini cu putin informatie dect sa navighezi pe pagini cu mult informaie si imagini mari si de diferite tipuri. Dac s ne referim la domeniul practicii, atunci pot s afirm c ea este benefic pentru noi studenii, deoarece ea ne lanseaz n cmpul muncii ca noi specialiti i ca viitoarea for de munc fructuoas,si tot o dat este efect pozitiv in dezvoltaria capacitilor de design.

Bibliografie
Mod Coala Nr. document Semnat. Data

UTM 526.1.579 ME UTM 526.1.579 ME

Coala

27

1. 2. 3.

http://www.w3schools.com/ http://www.wikipedia.org/ http://www.jquery.com/

4. http://www.ruseller.com/

Anexa A
Codul sursa al paginii index.php <?include ('blocks/db.php');

Mod Coala Nr. document

Semnat.

Data

UTM 526.1.579 ME UTM 526.1.579 ME

Coala

28

$result = mysql_query("SELECT title, meta_d, meta_k,text FROM settings WHERE page='index' ",$db); if (!$result) { echo "<p>Solicitarea pentru preluarea datelor din baza de date a esuat !!! Anuntati administratorul jorikursu@gmail.com. <br> <strong>Cod eroare: </strong></p>"; exit(mysql_error()); } if (mysql_num_rows($result) > 0) { $myrow = mysql_fetch_array($result); } else { echo "<p>Informatia solicitata nu poate fi extrasa din baza de date, informatia lipseste. </p>"; exit(); } /*--------------------------------------------------------* if (isset($_GET['cat'])) {$cat = $_GET['cat'];} if (!isset($cat)) {$cat = 1;} $result3 = mysql_query("SELECT * FROM categories ",$db); if (!$result3) { echo "<p>Solicitarea pentru preluarea datelor din baza de date a esuat !!! Anuntati administratorul jorikursu@gmail.com. <br> <strong>Cod eroare: </strong></p>"; exit(mysql_error()); } if (mysql_num_rows($result3) > 0) { $myrow3 = mysql_fetch_array($result3); } else { echo "<p>Informatia solicitata nu poate fi extrasa din baza de date, informatia lipseste. </p>"; exit(); } /*-------------------------------------------------*/ ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title><?echo $myrow['title'];?></title> <meta http-equiv="Description" content="<?echo $myrow['meta_d'];?>" /> <meta http-equiv="Keywords" content="<?echo $myrow['meta_k'];?>" /> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="js/jquery.easing.1.3.js"></script> <script src="js/jquery.timer.js"></script> <script src="js/image-rotator.js"></script> <link href="css/style.css" type="text/css" rel="stylesheet">
Mod Coala Nr. document Semnat. Data

UTM 526.1.579 ME UTM 526.1.579 ME

Coala

29

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" > </head> <body> <div id="wrapper"> <?include ('blocks/header.php');?> <div id="space"></div> <?include ('blocks/menu.php');?> <div id="space"></div> <?include ('blocks/slide.php');?> <?include ('blocks/categories.php');?> <div id="content"> <?echo $myrow['text']; $result3 = mysql_query("SELECT * FROM data",$db); if (!$result3) { echo "<p>Solicitarea pentru preluarea datelor din baza de date a esuat !!! Anuntati administratorul jorikursu@gmail.com. <br> <strong>Cod eroare: </strong></p>"; exit(mysql_error()); } if (mysql_num_rows($result3) > 0) { $myrow3 = mysql_fetch_array($result3); do { printf("<p>%s</p><br/>", $myrow3['description']); } while ($myrow3 = mysql_fetch_array($result3)); } else { echo "<p>Informatia solicitata nu poate fi extrasa din baza de date, informatia lipseste. </p>"; exit(); } ?> </div> <div id="space"></div> <?include ('blocks/footer.php');?> </div> </body> </html>

Codul sursa al foaiei de stiluri style.css @import url(reset.css); body { background: url("../images/bg2.png") no-repeat top center, url("../images/bg3.png") no-repeat top center, url("../images/bg.png") repeat;
Mod Coala Nr. document Semnat. Data

UTM 526.1.579 ME UTM 526.1.579 ME

Coala

30

} #wrapper { width: 1000px; height: auto; outline: 0px solid #000; margin: 0 auto; } /*---------------header----------------*/ #header { width: 1000px; height: 110px; outline: 0px solid #fff; position: relative; } h1 { font: 20px Verdana, sans-serif; color: #a05fff; margin-left: 30px; margin-top: 84px; outline: 0px solid #fff; position: absolute; display: block; } #logo { background-image: url("../images/logo.png"); width: 238px; height: 85px; margin-left: 15px; display: block; outline: 0px solid #fff; position: absolute; } #help { height: 15px; width: 180px; outline: 0px solid #808384; margin-left: 750px; position: absolute; top: 70px; } #help li { outline: 0px solid #0000cc; float: left; height: 15px; width: 60px; } #help li a { display: block; font: 10px Aril,sans-serif;
Mod Coala Nr. document Semnat. Data

UTM 526.1.579 ME UTM 526.1.579 ME

Coala

31

color: #fff; height: 15px; width: 60px; text-decoration: none; text-align: center; } /*----------------menu-----------------*/ #menu { position: relative; height: 60px; width: 1000px; outline: 0px solid #808384; background-image:url("../images/menu_bg.jpg") ; background-repeat: no-repeat; border-radius: 10px; } #menu ul { position: absolute; left: 200px; } #menu li { outline: 0px solid #0000cc; float: left; height: 60px; width: 150px; } #menu li a { display: block; font: 20px Aril,sans-serif; color: #131313; height: 40px; width: 150px; text-decoration: none; text-align: center; padding-top:20px; } #menu li a.rent:hover { background-image: url("../images/rent_pressed.png"); color: #fff; } #menu li a.contact:hover { background-image: url("../images/contact_pressed.png"); color: #fff; } #menu li a.reserve:hover { background-image: url("../images/reserve_pressed.png"); color: #fff; } #menu li a.about:hover { background-image: url("../images/about_pressed.png"); color: #fff;
Mod Coala Nr. document Semnat. Data

UTM 526.1.579 ME UTM 526.1.579 ME

Coala

32

} /*----------------slide-----------------*/ #slide { width: 1000px; height: 300px; outline: 1px solid #333; } #window { clear:both; width:1000px; height:300px; background:url("../images/bg.png"); overflow:hidden; position:relative; margin:10px auto 10px auto; } #slideshow { width:2000px; height:600px; overflow:hidden; position:relative } #slideshow li { width:1000px; height:300px; float:left; display:inline } /*---------------categories--------------*/ #categories { outline: 1px solid #333; width: 1000px; height: 50px; } .nav_link { display: block; float: left; width: 142px; height: 50px; } /*----------------content---------------*/ #content { width: 1000px; height: auto; outline: 1px solid #333; position: relative; } #privacy { background:url("../images/paper.png") repeat; position: absolute; top: 50px; left: 380px;
Mod Coala Nr. document Semnat. Data

UTM 526.1.579 ME UTM 526.1.579 ME

Coala

33

width: 580px; height: 680px; text-align: justify; border: 1px solid #270B38; } span#privacy ul { margin: 10px; } h2#rules { color: #AAA0FF; font: 20px Arial, sans-serif; text-align: center; } h2.rules { text-align: center; } .adress { color: #fff; font: 16px Arial, sans-serif; text-align: center; padding-top: 7px; background: url("../images/tires.png") no-repeat left bottom, url("../images/cont_bg.png") repeat; } .tires { position: absolute; left: 0; bottom: 0; width: 550px; height: 220px; } .about-us { color: #fff; font: 16px Arial, sans-serif; padding-top: 7px; margin-left: 10px; margin-right: 10px; } .hp { background: url("../images/tires.png") no-repeat left bottom, url("../images/cont_bg.png") repeat; } p.models { font: 18px Arial, sans-serif; color: #A8B0FD; text-align: center; } h2 { color: #fff; text-align: justify; font: 16px Arial, sans-serif; margin-left: 10px; margin-right: 10px;
Mod Coala Nr. document Semnat. Data

UTM 526.1.579 ME UTM 526.1.579 ME

Coala

34

padding-top: 7px; } h3 { text-align: center; margin-top: 2px; font-weight: bold; font-size: 16px; } #info { width: 970px; height: 220px; outline: 1px solid #333; background: url("../images/cont_bg.png") repeat; margin-left: 15px; } #mini_img { position: relative; border: 4px solid #121212; float: left; left: 15px; top: 20px; } span { position: relative; color: #CDCDCD; left: 25px; float: left; font: 15px Arial, sans-serif; } span td { border: 1px solid #fff; width: 98px; height: 23px; text-align: center; font: 14px Arial, sans-serif; font-weight: bold; line-height: 200%; } tr.day { background: url("../images/td_bg.png") repeat; } /*----------------footer------------#----*/ #footer { width: 1000px; height: 60px; border-top-left-radius: 10px; border-top-right-radius: 10px; outline: 0px solid #fff; background:url("../images/footer_bg.jpg") no-repeat; } h3.copy { width: 300px; height: 30px;
Mod Coala Nr. document Semnat. Data

UTM 526.1.579 ME UTM 526.1.579 ME

Coala

35

padding-top: 20px; margin-left: 350px; } /*---------------space----------------*/ #space { width: 1000px; height: 20px; }

Anexa B
Screenshot-urile siteului

Mod Coala Nr. document

Semnat.

Data

UTM 526.1.579 ME UTM 526.1.579 ME

Coala

36

Fig. 1 Pagina index.php

UTM 526.1.579 G
Coala

Mod Coala Nr. document

Semnat.

Data

UTM 526.1.579 ME UTM 526.1.579 ME

37

Fig.2 Pagina about.php

Mod Coala Nr. document

Semnat.

Data

UTM 526.1.579 G UTM 526.1.579 ME UTM 526.1.579 ME

Coala

38

Fig.4 Pagina reserve.php

Mod Coala Nr. document

Semnat.

Data

UTM 526.1.579 G UTM 526.1.579 ME UTM 526.1.579 ME

Coala

39