Web design si programare web

Elemente de web design
Lucrul cel mai important care trebuie facut inainte de a incepe propriu-zi sa scrieti o pagina web, este
proiectarea acesteia.
Primul lucru esential pe care trebuie sa il aveti in vedere cand incepeti proiectarea de design, este faptul
ca trebuie sa captati atentia in maxim 10 secunde. Primele secunde in care privirea vizitatorului ia
contact cu pagina dvs. vor fi determinante pentru succesul dvs. Al doilea lucru este acela ca prin
combinarea tuturor elementelor de webdesign, trebuie sa rezulte, in final, un stil aparte, usor de
recunoscut care sa va diferentieze si sa va impuna pe piata.

Caracteristici tehnice
In urma studiilor efectuate, rezulta ca trebuie sa va verificati aspectul paginii folosind cerinte
minime. In acest fel veti fi convinsi ca va fi vazut de toata lumea, intr-un mod acceptabil. Aceste cerinte
minimale hardware sunt: un monitor VGA de 14 inch, 256 culori si o rezolutie de 640/800 pixeli, un
modem intern obisnuit cu rata de transfer de 28 kbps, un calculator Pentium ce foloseste Windows ca
sistem de operare si browserele: Internet Explorer si/sau Netscape Navigator. In mod evident, nevoile
utilizatorilor cu monitoare de mica performanta trebuie avute in vedere intai.

Text
Tineti cont de urmatorul aspect: oamenii sunt totusi obisnuiti cu cartile in format normal. In marea
lor majoritate, textul este de culoare neagra pe fond alb, pentru ca asigura vizibilitatea maxima. Acestea
sunt culorile pe care vi le recomand si eu. Pentru a da un aspect mai placut, puteti de exemplu sa
realizati un fundal de culoare alba cu mici interferente de aqua marin, sau galben deschis. Atentie insa
sa nu se suprapuna textul peste aceste "pete" de culoare in asa fel incat sa se piarda din lizibilitate.
Pentru a sublinia titlurile, va recomand sa folositi in primul rand alta culoare (rosu sau negru cel mai
bine), textul sa fie marit cu o unitate sau maxim doua fata de restul textului. In nici un caz nu va
recomand sa il subliniati. Puteti folosi in schimb scrierea inclinata.
Cuvintele - cheie din text ( acele cuvinte sau grup de cuvinte pe care doriti sa le subliniati in mod
special), le puteti scrie cu alta culoare (va recomand albastru).
Cele mai "bune" culori sunt :rosu, negru si alb (nu intamplator logo-ul companiei Coca - Cola este
rosu, negru si alb). Aveti grija sa nu depasiti mai mult de trei culori pe pagina, pentru ca devine prea
"pestrita". Impartiti fraza in propozitii cat mai simple. Nu depasiti patru ,maxim cinci propozitii pe
fraza, pentru ca devine prea greu de urmarit.
Un sfat: ochiul uman este obisnuit cu paginile de carti normale- nu depasiti o medie de 8-10
cuvinte pe fiecare rand.Puteti folosi fonturile uzuale Arial, Times New Roman, Verdana sau Courier.
Nu incercati sa folositi mai mult de doua stiluri de text pentru o pagina, si pastrati aceleasi fonturi
pentru toata pagina. ( de exemplu: Arial pentru text si Verdana pentru titluri) . .
Animatie

Personal, nu va recomand folosirea marcajelor care defileaza, pentru ca pot deveni obositoare
pentru o persoana care petrece mai multe ore in fata calculatorului, si in plus s-ar putea sa distraga
atentia de la continutul in sine. Puteti folosi mai bine textele care clipesc, acele "blinkuri", dar cu
masura ( cel mult unul pe pagina). Nu folositi mai mult de doua ecrane pentru o pagina, pentru ca s-ar
putea sa irite utilizatorul prin derularea la nesfarsit. Este mult mai comod sa execute un click (de la
inceputul, sfarsitul sau din dreapta paginii) si sa se deplaseze la sectiunea care il intereseaza. De aceea,
va recomand cu tarie sa prevedeti o harta a sitului in locurile mai sus mentionate.
In ceea ce priveste fisierele grafice, retineti ca un singur banner are o dimensiune medie de 70-80 kb,
care pe un modem cu viteza mica se incarca in aproximativ 20-30 de secunde. Aveti toate sansele ca
vizitatorul sa isi piarda rabdarea si sa paraseasca pagina. Va recomand ca suma dimensiunilor fisierelor
care contin imagini grafice sa fie de maxim 50 kb.
Cand alegeti pentru fundal o imagine grafica, tineti cont ca unii utilizatori au dezactivata optiunea
de incarcare a imaginilor. Indiferent de imaginea folosita, asigurati-va ca ati folosit o compresie
maxima a fisierului grafic. Indiferent de marimea pozei, ele se vor aseza una langa alta, lipite (deci
practic fundalul este alcatuit din mici patratele asezate una langa alta, fiecare patratel continand aceeasi
imagine).
Daca va hotarati sa folosti imagini animate, aveti in vedere ca unele browsere nu suporta animatia.
Atunci ele vor afisa numai primul cadru al animatiei, care deci trebuie ales cu maxima atentie. De
asemenea, nu uitati ca imaginile animate maresc timpul de incarcare al paginii, lucru foarte important.
In orice caz, ele trebuie plasate pe pagina in asa fel incat sa nu atraga atentia de la citirea unui text de
maxima importanta.
Pentru crearea butoanelor, puteti folosi imagini sugestive. De exemplu: o casa pentru HOME,
un ziar pentru ZIARE/ARTICOLE ELECTRONICE, un premiu care sa sugereze ideea de CONCURS
cu PREMII, sageti directionale pentru INAINTE si INAPOI, etc. Tineti cont de un lucru: inainte de a
folosi o singura imagine grafica, puteti crea efecte deosebite prin utilizarea tag-urilor HTML text color,
size, style, font face. Nu abuzati insa, pentru ca va garantez ca veti da impresia de amatorism. Tineti
cont ca JPEG este cel mai mic format, cel mai rapid si poate afisa un numar practic nelimitat de culori,
iar formatul GIF este limitat la 256 de culori. Intotdeauna cand creati o imagine Gif, reduceti numarul
de culori la cel mai mic numar posibil. In etapa a doua, realizati o imagine mai mica. Folositi aceasta
imagine ca un link (legatura) catre o imagine mai mare, care sa poata fi privita in intregime daca
utilizatorul doreste. Nu omiteti sa includeti intotdeauna parametrii HEIGHT si WIDTH in tag-ul IMG.
Daca le folositi, Navigator rezerva loc pentru ele, si continua sa le incarce impreuna cu textul, in asa fel
incat vizitatorul poate citi in timp ce imaginile se incarca ( acest lucru este mai putin adevarat pentru
Explorer). Daca vreti sa stiti care este dimensiunea cea mai buna pentru imaginile dvs., in functie de
locul in pagina, nu aveti decat o cale directa: modificati si incercati cu diverse valori ale parametrilor
mai sus amintiti, pana cand vi se pare ca ati ajuns la ceea ce doriti.
Structurare
Una din sarcinile imediate este aceea de a comunica clar, fara echivoc si intr-un mod structurat
informatia. Aceasta inseamna organizarea intregului material ca prima parte a proiectului de
webdesign. Dupa care trebuie sa raspundem la intrebarea: va fi structurat pentru acces aleator ?
- din orice punct al sitului putem ajunge in oricare altul (aceasta situatie este folosita in cazul siturilor
de dimensiuni mari), cu informatie vasta si nu tocmai omogena, sau cu acces structurat ( de exemplu,
ca un tur al unei galerii de arte sau al unui Muzeu, in care ghidul ne conduce pe trasee bine stabilite
anterior, iar operele de arta sunt asezate dupa autori, perioade sau curente). Eu am ales prima varianta,
pentru ca am fixat ca scop principal al sitului: devenirea unei librarii electronice cu carti din toate

domeniile: afaceri informatica, Internet, calculatoare, ziare electronice, articole, beletristica, carti
pentru copii, matematica, etc. De asemenea, m-am gandit ca numarul de clickuri pe care trebuie sa le
execute un vizitator este mult mai mare in al doilea caz, daca vrea sa ajunga la un subiect care il
intereseaza, decat in primul caz, unde este suficienta o singura apasare pe buton pentru a ajunge din
orice punct in oricare altul.
A doua intrebare la care trebuie sa raspundem este: ne adresam tuturor sau unui segment de piata
foarte bine structurat? In cel de al doilea caz, ganditi-va sa aflati care este nivelul de educatie si de
cultura al grupului, care le sunt preferintele si orientarile. Nu este acelasi lucru in a proiecta un sit
pentru oameni de afaceri, potentiali oameni de afaceri, profesori si elevi/studenti, sau un sit dedicat in
exclusivitate sexualitatii sau unui curent religios.
A treia intrebare este: impartim situl in cadre, folosim tabele sau nici una din variantele anterior
mentionate? Sa luam fiecare caz in parte. Cadrele (sau frame-urile ) au fost introduse in 1995 de
Netscape Navigator 2.0. Se poate imparti fereastra browserului in cate un cadru, in care fiecare
reprezinta cate o pagina web diferita. Asta inseamna ca daca dorim sa schimbam continutul unei pagini,
practic nu mai este nevoie sa schimbam toata pagina, ci doar cadrul in care este continuta informatia
respectiva. Acesta este primul avantaj. Daca raspunsul la intrebarea: " vom face modificari zilnice sau
aproape zilnice?" este DA, atunci treceti un punct in dreptul folosirii cadrelor. Al doilea avantaj este ca
o accesare a unui cadru poate duce la schimbari in alt cadru. Puteti obtine astfel efecte deosebite.
Au insa si dezavantaje: ele sunt indexate mai greu de motoarele de cautare. In general, un motor de
cautare indexeaza o pagina in baza sa de date prin: titlul fisierului, tag-urile meta( cuvinte cheie,
continut si descriere), si textul efectiv din pagina. Daca pagina este parte a unui set de cadre, motoarele
de cautare nu vor tine cont de aceasta, iar utilizatorii nu vor avea acces la meniul de navigare. In orice
caz, daca va decideti la aceasta solutie, nu folositi cadre pe prima pagina ( adica in fisierul index.html).
O alta solutie mai buna ar fi folosirea tabelelor ca metoda de impartire a continutului. Dar, in nici un
caz (acesta este sfatul meu) nu incepeti pagina cu un tabel. Eu am ales cea de a doua solutie, dar dupa
ce am introdus la inceputul paginii un text de aproximativ 20 de propozitii.

Introducere in HTML
Hyper Text Markup Language -HTML, este un ansamblu de coduri specifice, care se insereaza
intr-un document, pentru a oferi informatii despre legaturi, formatare, etc. Se bazeaza pe SGML- adica
limbajul Generalizat Standard de Marcare. Toate definitiile HTML incep cu caracterul < ( simbolul
"mai mic") si se termina cu caracterul > - simbolul "mai mare" (cu unele mici exceptii). De exemplu:
< html >
< / html >
Acest cod comunica unui interpretor faptul ca ceea ce urmeaza este scris in limbajul HTML.
Definitiile incluse intre caracterele mai sus amintite se numesc controale, marcaje sau tag-uri. Noi le
vom numi controale. Unele din controale sunt pereche (ca cel de mai sus), iar altele nu. Controlul de

inceput se numeste "de deschidere", iar cel de sfarsit control " de inchidere". HTML nu face diferenta
intre literele mari si literele mici. De exemplu, < html > , este totuna cu < HTML > .

Pentru a obtine un document HTML, este suficient sa il scrieti folosind un editor de texte, formatat
folosind controalele respective, sa il salvati cu un nume oarecare, dar obligatoriu cu extensia .html
(sau .htm), si sa nu uitati ca la tipul fisierului sa indicati "All Files". In general, puteti folosi orice editor
care permite salvarea fisierelor obisnuite ASCII (adica text).

Deschideti editorul de texte Notepad, scrieti aici codul:
<html>
</html>
Si salvati-l astfel:
La numele fisierului scrieti index.html, si tipul trebuie ales “All Files”.
pa care nu mai aveti altceva de facut decat sa il deschideti cu un browser ( Internet Explorer sau
Netscape Navigator).
Dati dublu click pe el, il deschideti si ceea ce vedeti, este evident o pagina alba.

Daca doriti sa vedeti sursa, adica codul, accesati meniul View --- > Source, si puteti face toate
modificarile dorite. Nu uitati sa il salvati inainte de a-l inchide (bineinteles, daca doriti aceasta). Ca sa
vizualizati modificarile facute, apasati tasta F5 sau butonul Refresh. Daca veti scrie pur si simplu
documentul fara a folosi nici un control, veti avea surpriza ca oricare din programele de navigare il va
vedea altfel decat v-ati asteptat. Desigur, puteti folosi orice program care realizeaza prin cateva apasari
de taste pagini Web destul de "dragute". Dezavantajul major ar fi ca aceste programe costa. Inainte de a
da banii pe un astfel de program, va sfatuiesc sa studiati bine HTML. Chiar daca veti sfarsi prin a
achizitiona un astfel de program, veti putea crea pagina cu ajutorul lui, dupa care puteti intra in codul
sursa HTML, si veti fi capabili sa faceti orice modificare doriti. De asemenea, cunoscand HTML, puteti
studia si analiza codul sursa al unor pagini web de "top", "furandu-le" astfel secretele.
Toate fisierele HTML este bine sa se afle in acelasi folder. Daca veti avea referinte (adica legaturi
intre fisiere), intre fisiere care nu se gasesc in acelasi director, veti fi nevoiti sa indicati toata calea spre
acele fisiere. Dupa cum arata si numele, HTML este un limbaj de tip "script". Ce este un limbaj de tip
"Script"? Este un limbaj de programare folosit pentru a adauga in paginile web interactivitate. Un
limbaj script se foloseste in principal in interiorul altor programe, in vederea extinderii posibilitatilor
acestuia. Daca ati scris un macro in Visual Basic pentru a realiza o sarcina in Microsoft Word, atunci
inseamna ca deja ati folosit un limbaj script. Cand vedeti o pagina Web, in realitate, documentul HTML
este transferat de pe server (sau host) pe calculatorul dvs., este incarcat intr-un browser si este
interpretat, rezultatul fiind cel afisat pe display.

Structura unui document HTML
< html >
< head >
.....definirea headerului
< /head >
< title >
.... definirea titlului
< /title >
< body > .... corpul documentului < /body >
< /html >
Sa le analizam pe rand.
Documentul HTML (asa cum am mai spus), este inclus intre tag-urile < > (control de deschidere),
si < /html > (control de inchidere). Tot ceea ce se gaseste in afara acestor controale ar trebui sa fie
ignorat de browser (in realitate vom vedea ca lucrurile nu stau intotdeauna asa).
Sectiunea a doua este headerul, inclus intre tag-urile < head > si < /head > . Aceasta sectiune contine
informatii despre: descrierea paginii, cuvintele cheie dupa care se va face cautarea, si nu este afisata in
document.
Ca sectiune inclusa in header, exista titlul documentului. Acesta va fi afisat in bara de titlu a
ferestrei browserului. Este inclus intre tag-urile < title > si < /title > . Ultima sectiunea reprezinta chiar
"corpul" documentului, si este inclus intre tag-urile < body > si < /body > . Daca doriti sa comunicati
faptul ca documentul pe care il creati este in conformitate cu standardele HTML in vigoare, va trebui ca
incepeti documentul astfel:
< !DOCTYPE HTMLPUBLIC"-/IETF//DTD HTML 2.0//EN" >
Aceasta este o declaratie standard pentru HTML de nivelul 2.
Se pune intrebarea fireasca: daca semnul"<" este interpretat ca fiind inceputul unei definitii, cum vom
reprezenta in pagina semnul de " mai mare" ? Veti utiliza simbolul "&" urmat de grupul de caractere
"lt" (less than)- pentru semnul "mai mare", respectiv simbolul "&" urmat de grupul de caractere "gt"
(great then)-pentru simbolul "mai mare".
Pentru a indica titlul unei lucrari, aL unui articol, al unei carti, puteti folosi tag-ul < cite > .
Exemplu:
Informatii suplimentare in lucrarea: < cite > Programarea in C++ < /cite >, iar efectul va fi:
Informatii suplimentare in lucrarea:Programarea in C++.

Formatarea textului
Trecerea la o linie noua sau paragraf nou.
Se realizeaza cu controlul: < br > - pentru linie noua, respectiv < p > pentru paragraf nou.
Exemplu: daca veti scrie< html >
Numele meu este < br > Bogdan.
Veti obtine ceva de genul:

Numele meu este
(ati indicat trecerea la linie noua) Bogdan.
Pentru ca textul sa apara scris ca si cum ar fi o semnatura, se foloseste marcajul < pre >,marcaj
pereche cu < /pre >. De exemplu:
< html >
Astept sa ma contactati cat mai curand
< pre >
Sincer, al dvs.
Bogdan
</pre >
< /html>
rezultatul va fi:
Astept sa ma contactati cat mai curand
Sincer, al dvs.
Bogdan

Este indicat sa impartiti textul in sectiuni logice. Pentru aceasta, aveti posibilitatea introducerii in
document a liniilor orizontale subtiri, care mai sunt numite si "riglete". Marcajul este:
< hr size=numar1 noshade/shade width=numar2 >
Parametrii au urmatoarea semnificatie:
- numar1: indica "grosimea" in pixeli a rigletei
- noshade sau shade" indica daca linia va fi fara efecte de umbrire sau cu aceste efecte.
- numar2: indica lungimea liniei. Acest parametru poate fi specificat in 2 moduri: in procente (exemplu:
width=50%, indica o linie pe o jumatate de ecran), sau in pixeli (exemplu: width=200).
Se poate indica un anumit tip de font.
< font size=numar color=culoare face=tip_font >. Acest marcaj are perechea: < /font > .
-size=numar semnifica inaltimea fontului. Acest numar trebuie sa fie un numar intreg, cu valori
posibile intre 1 si 7( 1 pentru cel mai mic, 7 pentru cel mai mare).
Exemplu:
< font size=6 >
Acest text e scris cu 6
< /font > - va avea ca efect:
iar:
< font size=4 >

< /font >- va avea ca efect:

Pentru a indica un text mai mare decat cel utilizat in mod curent, puteti folosi elementul < big >,
cu perechea sa < /big >. De exemplu:
< big > Acest text e marit < /big > iar acesta e normal. Efectul:
Acest text e marit iar acesta e normal.
Pentru a evidentia un text, putem folosi elementul < em >, cu perechea < /em >. Exemplu:
< em > Acest text e evidentiat < /em > fata de restul. Efectul:
Acest text e evidentiat fata de restul.
Culoarea poate fi specificata prin numele in limba engleza, sau in hexazecimal.
Exemple:black- negru, white- alb, aqua-albastru marin, blue- albastru, cyan- portocaliu, greenverde, etc. aqua- 00FFFF.Exemplu:
< font color=aqua >
Acest text e scris cu aqua
sau in hexazecimal:
< font color=#00FFFF >
Observati ca valoarea in hexazecimal a fost precedata de caracterul: "#".
Introducerea indicilor superiori sau inferiori in cadrul unui text, se face prin tag-urile:< sup> (cu
perechea < /sup > )- pentru indice superior, respectiv < sub > (cu perechea < /sub > ) -pentru indice
inferior.
Iata un exemplu:
Spectacolul incepe la 7 < sup > 40 < /sup > , efectul in pagina fiind:
Spectacolul incepe la 740
In final, iata tag-ul care va permite sa subliniati un text, pentru a-l pune in evidenta:
< u > - de la underline, cu perechea < /u > . Un exemplu:
< u > Acest text e subliniat, < /u > , iar acesta nu mai este subliniat.

Efectul:
Acest text e subliniat, iar acesta nu mai este subliniat.
Pentru a lasa mai mult de un spatiu liber intre cuvinte, utilizati tag-ul "&" urmat de combinatia de
litere "nbsp"(de la "non-breaking space"). Urmatoarele 2 cuvinte sunt scrise cu 4 spatii libere intre ele
(evident, am folosit de 4 ori tag-ul de mai sus):
cuvant1

cuvant2.

Exista elementul < code > (cu perechea sa), pentru a specifica faptul ca ceea ce urmeaza este codul
sursa al unui program (C++, Pascal, sau alt limbaj de programare):
< code >
void main (void)
{
printf("Hello, World");
}
< /code >
Iata si efectul:
void main (void)
{
printf("Hello, World");
}

In ceea ce priveste tipul fontului (parametrul "face"), puteti indica unul sau mai multe fonturi,
separate prin virgula. Daca browserul nu va gasi instalat primul font, va trece la urmatorul, si asa mai
departe. Exemplu:
< font face="Times New Roman, verdana" >
Acesta este un text scris cu caractere "Times New Roman" sau "verdana".
Efectul va fi:
Acesta este un text scris cu caractere "Times New Roman" sau "verdana".
Pentru a indica inclinarea corpului literei, adica scris italic, controlul este:< i >,( cu perechea < / i >),
iar pentru a indica scris "ingrosat", adica bolduit, controlul este : < b > (cu perechea < /b >).Exemplu:
<i>
Acesta e text inclinat
< /i >
cu efectul: Acesta e text inclinat
, sau:
<b>

Acesta e text bolduit
< /b >
cu efectul: Acesta e text bolduit
Culoarea textului
Culoarea poate fi specificata prin numele in limba engleza, sau in hexazecimal.
Iata o lista de culori uzuale (denumirea in limba engleza si valoarea hexa):
aqua-00FFFF
azure-F0FFFF
black-000000
blue-0000FF
brown-A52A2A
chocolate-D2691E
coral-FF7F50
cyan-00FFFF
fuchsia-FF00FF
gold-FFD700
gray-808080
green-008000
indigo-4B0082
lime-00FF00
magenta-FF00FF
maroon-800000
olive-808000
pink-FFC0CB
red-FF0000
silver-C0C0C0
teal-008080
violet-EE82EE
white-FFFFFF
yellow-FFFF00
Grafica
Reprezinta unul din aspectele cele mai importante ale unei pagini de web. O imagine grafica
reusita sau o animatie poate produce un efect vizual deosebit asupra vizitatorului. Atentie, insa: daca
pagina este prea incarcata cu grafica, poate obosi si poate duce la marirea considerabila a timpului in
care se incarca.

Inserarea imaginilor grafice

Se foloseste tag-ul:
< image src="fisier_grafic" >
Pot fi specificati o serie de parametrii:
-height=numar; este inaltimea imaginii; numarul poate fi specificat in pixeli, sau in procente
-width=numar; este lungimea imaginii; numarul reprezinta acelasi lucru -ALT="text asociat imaginii";
este textul care va apare in cazul in care imaginea nu va fi incarcata
-align=paramteru; specifica pozitionarea textului fata de care imaginea nu e separata cu < br > sau < p
>
Parametrul poate fi:
-top : text plasat in partea superioara a imaginii
-midlle: text plasat la mijlocul imaginii
-left: text plasat la stanga
-right:text plasat la dreapta
Puteti centra o imagine, folosind tag-ul : < center > (cu perechea < /center > ).
Iata exemplul unei imagini care se gaseste in fisierul "poza.jpg", va avea inaltimea de 200 pixeli,
latimea de 150 pixeli, iar textul asociat va fi "imagine noua".
Tag-ul complet este:
< image height=200 width=150 src="poza.jpg" ALT="imagine noua" >

Texte animate

Puteti introduce si texte care defileaza (efectul de "scroll"). Se va folosi tag-ul:
< marquee > Text care defileaza < /marquee >
Acest tag are o serie de parametrii prin care pot fi specificate: modul de "defilare", timpul intre 2
aparitii succesive, directia de deplasare. Acestia sunt:
-directia de deplasare: direction=left-stanga (e implicita), right-dreapta, down- in jos, up-in sus.
- modul de comportare: behavior=scroll (implicit- defileaza permanent), slide (dupa ce parcurge o data
ecranul se opreste), alternate (se deplaseaza alternativ dintr-o parte in alta a ecranului).
In afara de caracteristicile amintite deja, mai pot fi setate: latimea si inaltimea deplasarii textului,
precum si culoarea spatiului in care se deplaseaza acesta. Textul urmator se va deplasa alternativ pe
ecran, latimea "benzii" in care se deplaseaza este de 60 % din ecran, inaltimea este de 10 pixeli, iar
culoarea in care se produce deplasarea este galbena. Tag-ul complet este:
< marquee behavior=alternate width=60% height=10 bgcolor=yellow> Text < /marquee >
Ma simt obligat sa reinserez indicatia pe care am dat-o si in alt capitol. Nu exagerati cu marimea
fisierelor grafice, pentru ca se mareste mult timpul de incarcare a paginii, si s-ar putea sa pierdeti multi

vizitatori grabiti. Testati pagina dvs. pe un calculator cu resurse minime si un monitor asemenea,
deoarece nu toti cei care va viziteaza dispun de echipamente de "ultima ora". Nu va recomand folosirea
textelor care defileaza, deoarece distrag atentia de la continutul principal, iar in plus s-ar putea sa
devina prea obositoare. Daca veti respecta bunul simt al proportiilor intre text si imagine, veti alege
minimul de culori care sa creeze un ansamblu placut ochiului si sa asigure lizibilitatea maxima, atunci
veti fi reusit intr-adevar sa creati o pagina atractiva. Nu uitati ca nu tot ceea ce va place dvs. place si
altora, asa ca ar fi bine sa va "testati" pagina" prin impresiile cunostintelor, prietenilor, rudelor, etc.
In cadrul cursurilor de web design si programare web de la Centrul Doxis ( www.cursuriploiesti.ro ), se
realizeaza nmeroase studii practice in sensul “testarii” paginii.

Care este legatura dintre web design si SEO?
De cele mai multe ori, incepatorii nu fac legatura intre partea de web design a site-ului
si partea de optimizare pentru motoarele de cautare, iar aceasta este o greseala
fundamentala care duce la un site de PROASTA CALITATE.
Trebuie spus de la inceput ca motoarele de cautare (din care ne intereseaza Google,
pentru ca acesta este motorul de cautare folosit de 85% dintre romani), pozitioneaza mai bine
siturile care pot fi accesate la fel de usor de pe orice tip de computer, orice fel de conexiune la
Internet, orice sistem de operare, adica site-urile CAT MAI APROPIATE DE HTML.
Deci, este bine ca situl sa fie in format HTML, si nu Flash.
A doua problema: vizitatorii si motoarele de cautare apreciaza site-urile care se incarca
foarte repede. Si aici sunt cazuri cand web designul trebuie sa se raporteze de la inceput la
regulile SEO. Adica, imaginile grafice nu vor fi foarte multe, si de o inalta rezolutie.
Pentru a verifica viteza de incarcare a oricarui site, putem accesa:www.verificare.seosite.ro/
Dati click la “web site speed test”, tastati url-ul site-ului si aflati viteza de incarcare a site-ului:
Load Time.

Prima intrebare la care trebuie sa raspundem cand incepem proiectarea de web
design este: ce promovam prin site. Poate fi un produs, un serviciu, un brand. Sa
presupunem ca dorim sa promovam produse cosmetice, ale unei firme nou aparuta pe piata
romaneasca.
A doua intrebare: cui promovam, adica stabilirea pietei tinte.
Atentie: promovarea unui produs pe piata romaneasca nu prea respecta regulile

aplicabile in Occident. Vrem sau nu, suntem o tara in care scandalurile sunt mai
mediatizate decat aparitia unei carti bune, unde un spectacol al unui manelist cunoscut
face mai multa valva decat un concert al unui cunoscut vilonist.
Cum stabilim corect care este piatra tinta:
Se face in functie de mai multe carateristici.
Economic – adica puterea de cumparare a utilizatorilor site-ului. Vom vinde produse
persoanelor cu venituri sub medii, venituri medii sau venituri mari? Avand in vedere ca cei cu
venituri mari cumpara produse de firma, iar produsele firmei noastre sunt necunoscute,
rezulta ca ne vom adresa primelor 2 categorii. Din cele doua, baza o va reprezenta segmentul
cu venituri medii.
Al doilea aspect este aspectul pregatirii profesionale. Sunt trei segmente: persoane cu studii
minime, studii medii sau superioare. Ne vom adresa in cazul nostru tuturor celor 3 categorii,
insa prponderent persoanelor cu studii medii.
Al treilea aspect este varsta. Ne vom adresa persoanelor cu varste cuprinse intre 16 si 45 de
ani.
Ultimul aspect este sexul: in cazul nostru, vor cumpara atat femei, cat si barbati, cei din urma
pentru uz personal sau pentru cadouri, surprize facute sexului feminin.
In acest caz, vom alege 24 de persoane din cercul nostru de cunoscuti sau al prietenilor
nostri:
−

12 persoane de sex feminin

−

12 persoane de sex masculin

−
24 de persoane cu venituri mici si medii, din care 18 persoane cu venituri medii si 6
persoane cu venit minim
−
24 de persoane cu varste cuprinse intre 16 si 45 de ani, astfel: 12 persoane cu varste
cuprinse intre 25 si 35 de anu, 6 persoane cu varste cuprinse intre 16 si 25 ani, 6 persoane
cu varste cuprinse intre 35 si 45 de ani.
La ce ne foloseste aceasta esantionare?
Intocmim un chestionar, cu intrebari simple si care admit raspunsuri de genul DA/NU.
Se vor nota raspunsurile pe o scara de la 1 la 10:
1. Este acest produs util pentru dvs?
2. Este ieftin in raport cu alte produse?
3. Este cunoscut pentru dvs?
4. Este usor de procurat?
Pe baza raspunsurilor primite, se va intocmi un clasament: daca produsul este ieftin pentru
utilizator, atunci in textul paginii se va insista pe acest lucru, daca utilizatorul nu
constientizeaza utilitatea lui, se va insista pe avantajele pe care le aduce folosirea lui, etc.
Care este concurenta noastra?

Dupa o cautare pe Google, se stabilesc care vor fi competitorii nostri. Se noteaza
din siturile lor: lista de cuvinte cheie folosite, lista frazelor, se analizeaza frecventa
cuvintelor cheie.
Dupa ce am “creionat” profilul utilizatorului, sa gasim culorile cele mai potrivite.
Din studiile efectuate la nivel mondial rezulta urmatoarele asocieri:
-

rosu – pasionat , irascibil

-

galben – posesiv, nesigur

-

albastru – calm, perfectionist

-

verde – prietenos, autoritar

-

alb – inocent, simplu

-

negru – sobru, serios

-

violet – fantezist, fanatic

-

portocaliu – sexualitate , caldura

-

roz – tinerete , bucuria de a trai

In cazul grupului nostru tinta, vom alege culoare predominanta in background, roz/portocaliu,
impreuna cu tente de rosu/violet.
Alegem codul culorilor:

Dupa ce am ales codul culorilor care vor domina backgroundul, alegem contrastul , care este
foarte important intr-o pagina web.

Contrastul intr-o pagina web.
Din tabelul de mai jos, vom alege culorile cele mai potrivite pentru text.
Background
Ros Portocali Galbe Verd
Albastru Violet Negru Alb Gri
u
u
n
e

Rosu

Slab

Portocali
Slab
u

Bun

Slab Slab

Slab

Bun

Bun Slab

Slab

Slab Slab

Slab

Bun

Slab Slab

Slab Bun

Slab

Bun

Slab Bun

Bun

Slab

Bun

Slab Bun

Slab

Slab

Bun Slab

Bun

Bun Slab

Galben
Verde

Slab Slab

Slab

Albastru Slab Slab

Bun

Bun

Violet

Slab Slab

Bun

Slab Slab

Negru

Slab Bun

Bun

Bun

Slab

Bun

Alb

Bun Bun

Slab

Slab Bun

Bun

Bun

Gri

Prim
plan

Bun Bun

Slab Slab

Bun

Bun

Slab

Slab

Slab

Bun Slab
Bun
Bun

Rezulta in cazul nostru ca cea mai buna culoare pentru text este culoarea alba.
Urmatoarea etapa este “sexualitatea” sitului, unde prin sexualitate nu se intelege in nici un
caz prezenta elementelor grafice erotice sau pornografice.. Ne place sau nu, sexualitatea ne
guverneaza psihicul. Despre acest subiect, s-au scrise mii de pagini si exista mii de studii.
Prin sexualitate noi vom intelege si linii, forme, culori cu tenta sexuala, pe care le vom
introduce pe site sub forma unor imagini ce “ating” subconstientul, asa numitele imagini
subliminale (despre crearea lor si exemple, in cursul 4).
Urmatoarea etapa: ce vocabular folosim? Avand in vedere piata noastra tinta, vom folosi un
limbaj de o complexitate medie, bazata pe fraze comune cu cei ce folosesc un vocabular
comun.
Urmatoarea etapa este modul de transmitere a mesajului: direct (produsul nostru este
cel mai ieftin- mai ieftin nu se poate!), semidirect (studiile de piata arata ca obtineti
avantaje daca folositi produsul nostru) si non direct (acestea sunt produsele noastre),
Alegerea se va face in functie de piata tinta si de rezultatele chestionarului. In cazul
nostru am ales modul direct de transmitere a mesajului.
Alegerea elementului “title”
Cum trebuie sa arate un element “title” corespunzator:
−

trebuie sa contina primele doua cuvinte cheie

−

trebuie sa faca referire la primele 5 cuvinte din site

Optimizarea imaginilor
Am vazut multe imagini postate chiar pe situri profesionale, dar neoptimizate atat din
punct de vedere al rezolutiei si al redimensionarii corecte, cat si tag-ului HTML folosit
pentru includerea imaginilor in pagina.
Un program free care are optiunile de mai sus, este RIOT (Radical Image Optimization
Tool). Nu este singurul free, dar este singurul care are optiunea “SaveForWeb”.
Adaugarea uni meta-tag corect
Se poate face din aceeasi resursa expusa inainte.
In continuare, derulam mai jos si facem setarile pentru limba si celelalte elemente:
CSS
CSS este acronim de la Cascade Style Sheet adica foi de stil in cascada.
In general, codul CSS este situat intr-un fisier separat de fisierul HTML. Daca modificam ceva
in acest fisier, modificarile se vor reflecta in toate paginile.
Se pot crea efecte deosebite: suprapunerea unei imagini peste alta, suprapunerea unui text
peste altul.
Dezavantajos este faptul ca pagina poate arata diferit in functie de browserul folosit.
Iata modurile in care poate fi inclus un stil CSS:
1.

codul CSS este inclus in pagina HTML efectul se aplica in tot documentul

<html>
<head>
<style>
B {color: red ;}
I {color: blue ;}
</style>
</head>
<body>
<b> Acest element e ingrosat
</b>
<i> Acest element e inclinat

</i>
</body>
</html>
Se observa ca acest cod e inclus in header-ul documentului, intre <head> si </head>. Prin
<style> anuntam ca ceea ce urmeaza este cod CSS.
b- de la bold- specific culoarea tuturor textelor bolduite- rosu
i- de la italic- specific culoarea tuturor textelor inclinate- albastru

2.

Codul este cuprins in document, dar efectul se aplica doar unor elemente.

<html>
<head>
</head>
<body>
<a href=”Concurs.html” style=”color: green;”>stabilim ca acest link sa apara cu culoare verde
Concurs </a>
<a href=”Diverse.html” style=”color: red;”>
Diverse</a>acest link cu culoare rosie
<a href=”Contact.html” style=”color: blue;”>iar acest link cu culoare albastra
Contact </a>
</body>
</html>
In acest fel, fiecare link va fi colorat altfel.
3.

Codul CSS este in alt fisier, iar efectul se aplica intregului document.

Fisierul extern va trebui salvat cu extensia CSS, iar la tipul fisierului vom alege All Files.
Evident codul va fi scris tot in NotePad.
Fisierul index.html:

<html>
<head>
<link rel=stylesheet href=”unu.css” type=”text/css”>link rel= link relativ catre un stylesheet
(foaie de stil), codul este cuprins in fisierul unu.css, iar tipul acestui fisier este text/cssacestea fac parte din “gramatica” CSS
</head>
<body>
<a href=”Concurs.html”>
Concurs </a>
<a href=”Diverse.html”>
Diverse</a>
<a href=”Contact.html”>
Contact </a>
</body>
</html>
Fiserul unu.css va avea codul:
Body {color: blue;}stabilim culoarea fundalului albastru
A {color: red}linkurile A (de la <a href…>) sa fie colorate rosu
Numele culorilor poate fi specificat si prin coduri, ca in exemplu de mai jos:
<html>
<head>
<style type="text/css">
h1
{
background-color:#6495ed; este vorba despre cod hexazecimal, despre aceasta in cursul de
maine, coduri RGB
}
p
{
background-color:#e0ffff;
}

div
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>CSS background exemplu</h1>
<div>
Un text.
<p>Un paragraf.</p>
</div>
</body>
</html>
Tag-ul “div” este suport pentru alte tag-uri. Vrem sa creem un meniu, format din 3 link-uri,
meniu aliniat stanga:
<div id="menu" align="right" >
<a href="#">ACASA</a> | <a href="#">CONTACT</a> | <a href="#">DESPRE NOI</a>
</div>
Alt exemplu: vrem sa centram un titlu:
<div id="content" align="center" bgcolor="white"> Titlu
</div>

Decorarea unui text:
<html>
<head>
Tag-urile h1, h2…. h6 definesc niste head-uri, adica text scris evidentiat alfel- cu alta marime,
fata de restul textului
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}

h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
</style>
</head>
<body>
<h1>Acesta e primul paragraf </h1>
<h2>Acesta e al doilea</h2>
<h3>Al treilea</h3>
<h4>Al patrulea</h4>
<p><b>Observatie:</b> Blink-ul nu va merge in IE, Chrome, sau Safari.</p>
</body>
</html>
Marirea spatiilor dintre cuvintele unui document:
<html>
<head>
p
{
word-spacing:30px;marim distanta dintre cuvinte la 30 de pixeli
}
</style>
</head>
<body>
<p>
Acesta e un text. Acesta e un text.
</p>
</body>
</html>

Alinierea unei imagini cu un text:

<html>
<head>
img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}
</style>
</head>
<body>
<p>An <img src="poza1.gif" width="270" height="50" /> aliniere implicita.</p>
<p>An <img class="top" src="poza1.gif" width="270" height="50" /> aliniere in partea de
sus.</p>
<p>An <img class="bottom" src="poza1.gif" width="270" height="50" /> aliniere in partea de
jos.</p>
</body>
</html>

Despre font (corpul literei)
In CSS putem defini o serie de caracteristici al fontului, obtinand efecte deosebot de
interesante.
Prima caracteristica este familia din care face parte fontul.
font-family
Aceasta proprietate accepta o serie de valori, separate prin virgula.
In cazul in care browserul nu gaseste prima valoare, trece la cea de a doua, apoi la cea de a
treia, si asa mai departe, pana cand gaseste o valoare, iar daca nu, foloseste valoarea
fontului implicita.
Daca numele fontului contine spatii, este obligatoriu sa il includem intre ghilimele.
CSS ne pune la dispozitie cinci tipuri de baza. Dupa ce am enumerat toate fonturile
apartinand tipului, punem si familia (tipul)din care face parte, la urma.

Cele cinci tipuri sunt:

serif - ("Times New Roman", Garamond)
sans-serif - (Arial, Verdana, Helvetica, Tahoma)
cursive -("Lucida Handwriting", "Zapf-Chancery")
monospace - (Courier, "MS Courier New", Prestige)
fantasy - ("Comic Sans", Whimsy, Critter, Cottonwood)
- Exemplu:
h2 { font-family: Verdana, Arial, Helvetica, sans-serif; }
p { font-family: "Comic Sans", Whimsy, Critter, fantasy; }

Inaltimea fontului:
font-size
Aceasta, evident controleaza inaltimea, care poate fi o valoare fixa, sau se poate referi la
inaltimea actuala. Poate avea valori in mai multe unitati de masura:
- Pixels (px),, Inches (in), Centimeters (cm), Millimeters (mm), Points (pt).
Un pixel este cel mai mic punct care paote apare pe ecran.
Un punct (point) este egal cu 1/72 inch.
Unitati de masura relative: mai mare sau mai mic, se refera la cresterea sau descresterea cu
o unitate fata de valoarea initiala.
-

larger, smaller
- percentage – procent fata de valoarea anterioara.
- Sintaxa:
selector { font-size: value; }
Exemplu:

<html>
<head>
<title>font-size</title>
<style type="text/css"><!--

#idp1 { font-size: 16px; }idp1, idp2 sunt denumiri date de noi (identificatori), la care vom face
referire in corpul documentului
#idp2 { font-size: 125%; }
--></style>
</head>
<body>
<p id="idp1">text 1</p>
<p id="idp2">text 2</p>
</body>
</html>
Grosimea caracterului:
Poate lua mai multe valori:
normal , bold – font normal implicit sau ingrosat..
bolder – mai ingrosat
100 to 900 – O scara de nuante, din 100 in 100.
- Sintaxa:
selector { font-weight: value; }
Exemplu:
<html>
<head>
<title>font-weight</title>
<style type="text/css"><!-#idp1 { font-weight: bold; }
#idp2 { font-weight: 400; }
--></style>
</head>
<body>
<p id="idp1">Un text</p>

<p id="idp2">Alt text</p>
</body>
</html>
Litere mari sau litere mici:
font-variant
Aceasta specifica daca textul va fi afisat cu litere mari sau mici.
normal - implicit
small-caps – toate literele mici vor fi convertite la litere mari.
- Sintaxa:
selector { font-variant: value; }
Exemplu:
<html>
<head>
<title></title>
<style type="text/css"><!-#idp1 { font-variant: small-caps; }
--></style>
</head>
<body>
<p id="idp1">text</p>
</body>
</html>

Stilul fontului:
font-style
normal - Normal - implicit

italic - Italic
oblique - Oblic
- Sintaxa:
selector { font-style: value; }
Exemplu:
<html>
<head>
<title></title>
<style type="text/css"><!-#idp1 { font-style: italic; }
--></style>
</head>
<body>
</body>
</html>
Multiple valori pentru font.
Pot fi stabillite mai multe din proprietatile de mai sus, in o singura definitie
variant, font-weight, font-size, font-family)
- Sintaxa:
selector { font: font-style_val font-variant_val
font-weight_val font-size_val font-family_val; }
Exemplu:
<html>
<head>
<title></title>

(font-style, font-

}
#verticalmenu ul li {
margin: 0px;
padding: 0px;
}
#verticalmenu ul li a {
font-size: 70%;
border-bottom: 1px dashed #C39C4E;
padding: 4px 0px 2px 3px;
color: #666666;
width:140px;
}
<style>
Codul care trebuie inclus in documentul HTML:
<div id="verticalmenu">
<h1>Navigation</h1>
<ul>
<li><a href="#" tabindex="1">Acasa</a></li>
<li><a href="#" tabindex="2">Contact</a></li>
<li><a href="#" tabindex="3">Preturi</a></li>
<li><a href="#" tabindex="4">Portofoliu</a></li>
<li><a href="#" tabindex="5">Carti gratuite</a></li>
<li><a href="#" tabindex="6">Link-uri utile</a></li>
</ul>
</div>
Exemplu pentru link-uri {a}
a:link {
color:#0000ff;
font-weight:normal;
font-size:12px;

font-family: Arial;
}
a:visited {
color:#008080;
font-weight:normal;
font-size: 12px;
font-family: Arial;
}
a:hover {
color:#b54090;
font-weight:normal;
font-size: 12px;
font-family: Arial;
}

Observati cum se modifica culoarea link-ului in momentul in care deplasam mouse-ul deasupra lui.
Link-ul are o culoare, a.link, la deplasare mouse deasupra lui alta culoare, a.hover, iar daca link-ul a
fost vizitat macar o data, alta culoare, a.visited.

Background
Background-ul poate fi definit pentru intreaga pagina sau pentru text.
Culoare de fond
background-color defineste culoarea de fond si poate fi asociat oricarei etichete HTML.
- definim un stil pentru intreg BODY si un altul pentru eticheta p
<html>
<head>
<title></title>

<!-body {background-color: #FFFF00;}
p {background-color: #FF0000;}
-->
</style>
</head>
<body>
Text normal
<p>Text cu background rosu</p>
</body>
</html>
Imagine de background
Imaginile pot fi folosite ca fundal in spatele intregii pagini sau a textului.
background-image asociaza o imagine ca fundal unui obiect.
- definim un stil pentru eticheta p
<html>
<head>
<title></title>
<!-p {background-image: url(calea catre fisierul care contine poza);}
-->
</style>
</head>
<body>
Text normal
<p>Text cu imagine de fond</p>
</body>
</html>
Repetarea imaginii
Repetarea poate fi controlata prin parametrul background-repeat care poate lua valorile:
repeat-x imaginea se repeta pe orizontala
repeat-y imaginea se repeta pe verticala
no-repeat imaginea nu se repeta
- imaginea nu se repeta
<html>
<head>
<title></title>

<!-p {background-image: url(calea catre fisier);
background-repeat: no-repeat;}
-->
</style>
</head>
<body>
Text normal
<p>Text cu imagine </p>
</body>
</html>

Harti de imagini
Ce este o harta de imagini?
Este o imagine, care poate deschide mai multe fisiere, in functie de zona pe care dam click.
Sa presupunem ca avem doua link-uri:
| <A HREF="produse.html">Produse</A> | <A HREF="Catalog.html">Catalog</A> |
Imaginea va fi aliniata la centru, ( p align….), fisierul care contine imaginea este poza1, stabilim
inaltimea imaginii la 240 pixeli si latimea 320 pixeli, adica dimensiunile pozei initiale, margini=0
(border…), numele sub care va fi folosita harta: menuline.
<P ALIGN="center"><IMG SRC="poza.gif" WIDTH="320" HEIGHT="240" BORDER="0"
USEMAP="#menuline"></P>

Atentie: numele hartii este case-sensitive, adica MENU nu este totuna cu menu.
Putem privi o poza astfel: ca pe un dreptunghi, cu coordonatele coltului din stanga sus x1,y1 si
coordinate colt diametral opus x2,y2.
Putem imparti aceasta suprafata a pozei in patru dreptunghiuri:

Astfel, coordonatele dreptunghiului din stanga sus vor fi: 0,0 si 160,120.
La fel calculam pentru celelalte trei dreptunghiuri.

<BODY>
<MAP NAME="menuline">
<AREA SHAPE="rect" COORDS="0,0,160,120" HREF="unu.html">
<AREA SHAPE="rect" COORDS="160,0,320,120" HREF="doi.html">
<AREA SHAPE="rect" COORDS="0,120,160,240" HREF="trei.html">
<AREA SHAPE="rect" COORDS="160,120,320,240" HREF="patru.html">
</MAP>

Rect- specifica o suprafata rectangulara – dreptunghiulara
COORDS=”X1,Y1,X2,Y2”- coordonatele colturilor dreptunghiului, stanga sus si dreapta jos.
HREF=numele fisierului care se va deschide cand utilizatorul va da click aici.
Putem folosi si alte forme in loc de dreptunghi:
CIRCLE- cerc, se dau x,y- coordonate centru cerc si raza
POLY- polygon, se dau x1,y1…… xn,yn- coordonatele colturilor poligonului
<MAP NAME="harta">
<AREA SHAPE="poly" COORDS="16,13,35,62,72,27,16,13" HREF="index.html">
<AREA SHAPE="circle" COORDS="67,97,34" HREF="doi.html">
<AREA SHAPE="rect" COORDS="129,28,175,108" HREF="trei.html">
<AREA SHAPE="rect" COORDS="0,0,200,150" HREF="patru.html">
</MAP>

Primele notiuni de Java Script
In cazul in care sunteti un programator cu ceva experienta in C sau C++, Java Script o sa vi se
para destul de familiar. Exista oricum unele diferente, mai ales ca Java Script nu este totuna cu Java.
Fiecare element inclus in corpul unui document HTML, trebuie cuprins intre tag-urile < SCRIPT > si <
/SCRIPT > . Puteti proceda astfel: < SCRIPT LANGUAGE="JavaScript" > . Specificarea unui mod
sau a altuia este optionala. Unii programatori le folosesc pe amandoua, pentru mai multa siguranta. De
asemenea, deoarece unele browsere nu suporta codul de Java Script, este bine sa-l ascundeti:

< !-Cod Java Script...
-- >

Variabile
Ca orice limbaj de programare, JS foloseste variabile. O variabila este o locatie ce are un nume si
contine o valoare. Primul caracter al numelui unei variabile trebuie sa fie obligatoriu o litera sau
caracterul "_", iar celelalte caractere pot fi litere, cifre si caracterul "_". Programatorii experimentati
folosesc nume de variabile sugestive. Daca programul dvs. foloseste pentru calculul primei rate de
platit pentru un obiect, e mai bine sa denumiti variabila Prima_Rata, decat cu o simpla litera. In acest
fel, va va fi mai usor daca veti modifica programul peste cativa ani. Trebuie sa retineti ca JS face
diferenta intre litere mici si litere mari. Variabila "suma" nu este totuna cu variabila "SUMA". Pentru a
putea folosi o variabila, trebuie sa o declarati intai. Pentru a declara o variabila, trebuie sa folositi
cuvantul-cheie "var":
var Suma
Optional, o puteti initializa: var Suma=.89.
Ati initializat variabila Suma, inca de la declarare, cu valoarea reala 0.89.
Puteti declara mai multe variabile, separate prin virgula, folosind o singura data cuvantul-cheie
var:
var prima_rata=.6, total=4000, luna
In acest exemplu ati declarat doua variabile initializate (una cu o valoare reala-0.6 si cealalta cu
valoare intreaga-4000), si una neinitializata.

Pentru a declara o variabila tip sir de caractere, puteti folosi urmatoarea instructiune:
var sir="la munte". Intre 2 variabile de tip sir de caractere, se poate folosi operatorul de concatenare
"+".
Exemplu: y="la munte"+" la mare". Variabila y va retine sirul: " la munte la mare". Puteti
concatena o variabila de tip sir de caractere, cu una de tip numeric: z="temperatura este :"+34+" grade
celsius", si va rezula sirul "temperatura este 34 grade celsius".. In acest caz, se va face automat
convertirea intregului "34" la un sir de caractere.Numerele reale pot fi introduse in format zecimal, ca
mai sus, sau in format exponential(stiintific). Exemplu: 123E1. Acesta este numarul 1230. Se
inmulteste valoarea din stanga lui "E" cu 10 ridicat la puterea reprezentand valoarea din dreapta. 0.1e-1
insemand 0.1 inmultit cu 10 la puterea -1, adica 0.01. Dupa cum se observa, nu conteaza daca folosim
litera "E" sau litera "e".
Numerele intregi pot fi scrise si in baza 16.

Sirurile de caractere pot fi incluse intre " " sau ' '. In cazul in care un sir de caractere contine un alt

sir de caractere, ele trebuie incluse intre semne diferite. De exemplu: 'acesta e un sir "contine alt sir" se
continua primul sir'. Pentru valori logice (care pot lua doar doua valori- adevarat sau fals), se folosesc
cuvintele-cheie: true sau false.
Exemplu: gasit=true.

Exista o constanta predefinita: NULL (care inseamna NIMIC). Puteti initializa o variabila cu
aceasta valoare: var m=null. Care este diferenta intre o variabila neinitializata si una initializata cu
valoarea "null"? Sa luam urmatorul exemplu: var m,n=null.
Variabila m nu este initializata (este nedefinita), iar variabila n este initializata cu valoarea "null".
Daca veti incerca sa afisati prima variabila, nu veti obtine nimic pe ecran, iar daca veti afisa cea de a
doua valoare, se va afisa "null".

Exista cateva caractere speciale care pot fi folosite in sirurile de caractere. Pentru programatorii in
C, acestea sunt familiare: b- backspace, f- formfeed, n- new line, t- tab, r- carriage return. Nu va voi
spune ce inseamna fiecare din ele, pentru ca sincer sa fiu, nu stiu de ce au fost incluse in limbaj. Nu au
absolut nici un efect. Exemplu:
document.write("Ce mai tn faci") are exact acelasi efect cu document.write("Ce mai faci"). Cu alte
cuvinte, caracterele speciale sunt ignorate. Poate au fost incluse pentru interactiunea intre JS si
programele C. Daca vreti sa includeti caracterul"" (backslash) intr-un sir de caractere, trebuie sa il
precedati de alt caracter "". Exemplu: cale="c:desktopmyfolder".

Operatorii aritmetici
Sunt cei cunoscuti: +,-,* si /. Pentru a afla restul impartirii unui numar intreg la alt numar intreg,
puteti folosi operatorul modul %:
14 % 5 returneaza valoarea intreaga 4 (restul impartirii lui 14 la 5).

Operatorii de incrementare si decrementare
Acestia realizeaza cresterea, respectiv scaderea valorii unei varible cu 1. Sunt referiti prin " ++ ",
respectiv " -- ". Sunt doua moduri de a le folosi: prin plasarea inaintea numelui variabilei, si dupa. Iata
cum functioneaza in fiecare caz in parte: Daca x=3, dupa instructiunea y=++x, valoarea lui x va creste
cu 1 (si va fi 4), dupa care se va atribui variabilei y, care va fi tot 4. Aceasta este forma prefixata. In
forma postfixata, dupa instructiunea y=x++, valoarea lui x se va atribui lui y (deci y va fi 3), dupa care

va creste cu 1, deci x va fi 4. Analog stau lucrurile pentru operatorii de decrementare (y=--x si y=++x).

Operatorul de asignare
Acesta este cunoscutul operator "=", care asigneaza valoarea expresiei din partea sa dreapta,
variabilei din partea stanga. Exista inca o forma, numita asignare prescurtata: x < op >=y, unde op este
oricare din operatorii aritmetici. Aceasta este echivalenta cu : x = x < op >. Exemplu: x=x+10 poate fi
scris, cu acelasi efect, x+=10. Sau, pentru a realiza impartirea lui y la m+n, putem scrie: y/=(m+n).

Operatori binari
Operatorii pe biti au sens numai pentru variabile intregi ale operanzilor. Se numesc pe biti pentru
ca trateaza fiecare operand ca o succesiune de biti (adica 0 sau 1). AND (&). Rezultatul lui a AND b
este 1 daca si numai daca ambii operanzi sunt 1. In oricare alt caz, rezultatul este 0.
OR (|). Rezultatul este 0 daca si numai daca ambii operanzi sunt 0, si 1 in oricare alt caz. SAU exclusiv
OR (^). Rezultatul este 1 numai daca cei 2 operanzi sunt diferiti (adica unul 0 si celalalt 1).
Exemple: ( Java Script retine valorile intregi pe 32 de biti, dar pentru mai multa claritate, vom lucra
pe 8 biti). Daca m=75 si n=25, adica
01001011
00011001
rezultatul operatiei m AND n va fi 9 , adica:
00001001
Exista inca 2 operatori pe biti, operatorii de shiftare. Acestia sunt 2: shift left ( cu notatia <<) si
shift right ( cu notatia >>), cu urmatoarele semnificatii:
a << b : deplaseaza bitii lui a cu b pozitii la stanga
a >> b : deplaseaza bitii lui a cu b pozitii la dreapta
Exemple: 00110100 << 1 are ca rezultat: 01101000
10110100 >> 2 are ca rezultat: 11001101

Operatori logici
Au ca rezultat una din doua valori posibile : true sau false. Acestia sunt:
SI logic (AND) &&- are ca rezultat TRUE daca ambii operatorii sunt TRUE
SAU logic (OR) ||- are ca rezultat FALSE daca ambii operatorii sunt FALSE
NEGATIE LOGICA (NOT)- are ca rezultat TRUE, daca operatorul a fost FALSE, si invers in caz
contrar.

Java Script "stie " daca va referiti la operatori pe biti sau la operatori logici. Astfel, daca x=true,
instructiunea document.write(x) va avea ca efect afisarea valorii TRUE, iar daca x=true, dupa
instructiunea y=x+10, variabila y va retine valoarea 11.

Operatorii relationali (sau de comparatie)
Sunt cei uzuali: "==" egalitate, "!=" pentru diferit, >, >= , >, si >=. Ei returnezaTRUE daca
rezultatul comparatiei este adevarat si FALSE in caz contrar. (exemplu: 7<2 returneaza FALSE). Pentru
compararea sirurilor de caractere, se folosesc codurile ASCII. In memoria calculatorului, fiecare
caracter (litere mari si mici, cifre, semne de punctuatie, caractere speciale, etc.) este are asociat un
numar de ordine intreg cuprins intre 0 si 255, numit cod ASCII. Cand se compara doua caractere, se
compara de fapt aceste numere de ordine. Literele mari sunt numerotate de la 65 la 90 (A-Z), iar literele
mici de la 97 la 122. De aceea, putem spune ca : Z < a.

Expresii decizionale

O expresie conditionala sau decizionala se foloseste atunci cand vrem sa selectam o varianta din
doua sau mai multe posibile. In cel mai larg sens, iata un exemplu: DACA ploua , vei lua umbrela,
ALTFEL nu. In acest exemplu, "ploua" este conditia care trebuie indeplinita. Daca este indeplinita (este
adevarata-TRUE), atunci se va intampla ca "iei umbrela" ( o vom numi instructiunea 1), ALTFEl (daca
este falsa -FALSE), nu (o vom numi instructiunea 2). Forma generala a acestei instructiuni este :
If (conditie)
{
instructiune1
else {
instructiune2
}

Se va evalua valoarea conditiei. Daca este adevarata, se va executa instructiunea1 sau grupul de
instructiuni, iar daca este falsa, se va executa instructiunea2. Exista si forma cu a doua ramura vida:
if (conditie)
{
instructiune

}

Daca valoarea conditiei este evaluata la valoarea de adevar TRUE, se va executa instructiunea1,
iar daca este falsa, se va trece direct la urmatoarea instructiune din program.
Exista inca o forma, asa numita instructiune conditionala. In JS, aceasta se scrie astfel: (condition) ?
val1 : val2- daca valoarea conditiei din paranteza este adevarata, atunci se va evalua la valoarea val1,
altfel se va evalua la val2. Exemplu: m=(a>b)?a:b - se executa membrul drept al instructiunii de
atribuire. Conditia este : a>b. Daca este adevarata, atunci rezultatul evaluarii va fi a, iar daca este falsa
va fi b. Unul din aceste rezultate se va atribui variabilei " m " din membrul stang.

Ne punem intrebarea fireasca: care este ordinea de evaluare (de executie) intr-o expresie in care nu apar
paranteze? Cu alte cuvinte, care este precedenta operatorilor?
nivelul 1: NOT logic, ++, -- (incrementare si decrementare)
nivelul 2: *, /, %(modulul)
nivelul 3: +,nivelul 4: operatorii relationali
nivelul 4: <<, >> (operatorii de shiftare)
nivelul 5: ==, != (operatorii de egalitate si inegalitate)
nivelul 6: AND (&) - SI pe biti
nivelul 7: OR (^) - SAU exclusiv
nivelul 8: OR (|) - SAU pe biti
nivelul 9: AND ( &&) - AND logic
nivelul 10: OR (||) - SAU logic
nivelul 12: ? - operatorul conditional.
In cazul in care doriti sa schimbati ordinea, puteti folosi parantezele. Exemplu: (a*(b+c))/9. Aici,
se va executa intai expresia din paranteza, adica adunarea, apoi inmultirea si in final impartirea (/).

Tipul de data logic
Daca numerele intregi, de exemplu, pot avea o multime de valori, tipul de data logic nu poate avea
decat doua valori: adevarat sau fals (true sau false).
Valorile de tip logic (sau boolean), sunt in general, rezultatul unei comparatii. De exemplu, daca
scriem:
c==4
testam daca valoarea variabilei c este egala cu numarul 4.Daca este asa, atunci rezultatul comparatiei
este TRUE, iar daca nu, este FALSE.
Cel mai des, aceste valori logice sunt rezultatul unei expresii de tip IF.

De exemplu:
if (a == 3) b = b + 1;
else a = a + 2;
Aceasta secventa verifica daca a este egal cu numarul intreg 3. Daca da, atunci valoarea lui b va creste
cu 1, in caz contrar, valoarea lui a va creste cu 2.
De fapt, ca si in C++, Java Script converteste valoarea lui FALSE la numarul intreg 0, iar valoarea
lui TRUE la intregul 1.

Programatorii in C++ si C trebuie sa retina, ca, fata de aceste limbaje, Java Script are propriul tip
de data logic, si nu mai este nevoie sa utilizeze numere intregi pentru a simula tipul de data logic.

Cicluri repetitive
In cazul in care trebuie sa indicam ca dorim ca o instructiune sau grup de instructiuni sa se execute
de mai multe ori, avem posibilitatea sa folosim ciclurile repetitive. Daca sunteti familiarizat cu unul din
limbajele de programare (C, Pascal, Basic, etc.) lucrurile va sunt cunoscute. Sa presupunem ca vrem sa
afisam pe ecran secventa de numere intregi consecutive: 567. Putem proceda astfel:
var a=5
document.write(a)
a=6
document.write(a)
a=7
document.write(a)
Dar ce facem daca dorim sa afisam o succesiune de 500 de numere? Apelam la ciclurile repetitive
care, dupa cum spuneam, permit executarea unei instructiuni sau a unui grup, de mai multe ori.
1. Ciclul CAT TIMP (WHILE)
Acesta are forma generala: CAT TIMP (CONDITIE)
{ INSTRUCTIUNI }
Modul de functionare este urmatorul: se evalueaza conditia; daca este adevarata, se executa
instructiunile; se evalueaza din nou conditia, si daca este adevarata se executa instructiunile. Ciclul se
termina cand conditia devine falsa. De aici decurg imediat imediat 2 consecinte:
- daca de la inceput CONDITIA este falsa, ciclul nu se executa niciodata;
- in setul de INSTRUCTIUNI, trebuie sa existe macar o instructiune care sa modifice valoarea de
adevar a CONDITIEI; in caz contrar, intram in ceea ce se numeste ciclu infinit;

Sa vedem exemplul de mai sus rescris:
var a=5
while (a<=7)
{
document.write(a++)
}
Initial, valoarea variabilei a este 5. Se intra in ciclu, deoarece 5<=7. Se executa instructiunea: se
afiseaza valoarea lui a, si apoi se incrementeaza a cu 1. Devine 6. Ramanem in ciclu, deoarece conditia
este adevarat: 6<=7. Se executa instructiunea: se afiseaza 6, creste a cu 1, devenind 7. Ramanem in
ciclu (7<=7), se afiseaza 7, creste a cu 1, devine 8 si se iese din ciclu deoarece conditia devine falsa.(8
nu este <=7).Toate valorile indicate se vor afisa pe un singur rand, deoarece nu exista nici o
instructiune care sa indice trecerea la randul urmator. Putem folosi pentru aceasta, tag-ul HTML < br >.
Iata cum arata secventa de mai sus rescrisa:
var a=5
while (a<=7)
{
document.write(a++ +"<br>")
}
Observati faptul ca am inclus tag-ul intre caracterele " ".
2. Instructiunea PENTRU (FOR)
In cazul in care cunoastem exact numarul de executii ale instructiunilor, putem folosi ciclul
PENTRU.
Acesta are forma generala:
for (initializare ; conditie ; actualizare)
{
instructiuni
}
Iata si un exemplu:
for (var b=5;b<=7;b++) {
document.write(b)
{
Initializarea este b=5. Variabila b se mai numeste contor, deoarece are rolul de a "contoriza"
numarul de executii ale instructiunii/instructiunilor. (de a le numara). Conditia pentru continuarea
executiei este ca b sa fie mai mic sau egal cu 7. Actualizarea este b++, adica increnmentarea valorii
variabile b cu 1. Aceasta secventa are efect identic cu cea de mai sus, exceptand trecerea la rand nou.
Facem urmatoarele observatii:
- daca valoarea initiala a contorului ar fi fost, sa zicem, 7, iar conditia ar fi fost b<=5, ciclul nu s-ar fi
executat niciodata.
- nu putem modifica conditia in timpul executiei ciclului
- valoarea 5 de mai sus se numeste valoare initiala, iar valoarea 7 se numeste valoare finala.
for (var b=5;b<=7;b++) {
document.write(b)
b=9
{
Ce se va intampla in acest caz? b va primi valoarea initiala 5, se va afisa aceasta valoare, dupa
care va primi valoarea 9. Nefiind mai mica sau egala cu 7, va creste cu 1, deci va deveni 10. Se va
repeta instructiunea, si vom intra intr-un ciclu infinit, deoarece niciodata b nu are cum sa devina egal cu

7.
Pentru a iesi "fortat" (adica mai devreme ) dintr-un ciclu repetitiv, avem la dispozitie alte 2 instructiuni:
BREAK si CONTINUE>

3. Instructiunile BREAK si CONTINUE
Facem observatia: aceste 2 instructiuni pot fi folosite numai in interiorul ciclurilor WHILE si
FOR. Este evident, dupa cum sugereaza si numele, ca instructiunea BREAK foloseste la intreruperea
executiei ciclului si iesirea fortata, iar instructiunea CONTINUE foloseste la continuarea executiei. Iata
2 exemple:
var a=5 while (true) { document.write(a--) if (a=2) break }
Am declarat si initializat variabila a cu valoarea 5, se intra in corpul ciclului WHILE, se afiseaza
valoarea 5 si se decrementeaza a cu 1, dupa care urmeaza un test: daca a a devenit egal cu 2, se iese din
ciclul WHILE.
Instructiunea CONTINUE permite saltul la inceputul ciclului repetitiv. Exemplu:
For (var x=3;x<=7;x++) { if (x==5) continue document.write(x) }
Ce se va afisa? Valorile 3 si 4 se vor afisa pe ecran. Cand contorul va primi valoarea 5, nu se va
mai trece la instructiunea de afisare, ci se va executa salt la inceputul instructiunii, dupa care, se vor
afisa valorile 6 si 7.

1. Script care foloseste instructiunea decizionala IF
<script type="text/javascript">
//incepe script-ul
<!-//ascund script-ul de browserele care nu il interpreteaza
// daca ora > 17,
// va afisa Buna seara!
var d = new Date()
// folosim functia predefinita Date, care va returna data si ora din sistem
// preiau data si ora in variabila d
var ora = d.getHours() // preiau din variabila d numai ora curenta, in variabila ora
if (ora>17) {
// daca ora>17
//se va afisa mesajul Buna seara!
//functia document.write() are ca parametru tag-ul html <b> si textul care va fi afisat
//parametrul se include intre ghilimele “ “
document.write("<b>Buna seara!</b>")
}
//-->

</script>
2. Script care foloseste IF ELSE
<!-// daca ora > 20,
// va scrie în fereastra Buna seara!
// Alfel afiseaza "Este ora ..."
var d = new Date()
var ora = d.getHours()
if (time>20) {
document.write("<b>Buna seara!</b>")
}
else {
// functia document.write are 3 parametri
//<b>Este ora- text care apare bold
//se va afisa variabila ora prin concatenare folosind operatorul +
//se termina textul bolduit “</b>”
document.write("<b>Este ora " +ora+ "</b>")
}
//-->
</script>

3. Instructiunea Switch- se foloseste atunci cand avem mai multe optiuni posibile, pentru a nu
folosi un IF imbricat
IF conditie1 executa1
else
IF conditie2 executa2
else
executa3
<!--

var d = new Date()
var ziua = d.getDay()
switch (ziua) {
//zilele se memoreaza ca numere intregi
case 4:
document.write("Astazi este joi");
break
//cu break se iese din instructiune
//daca am gasit egalitate nu mai are rost sa verificam in continuare
case 5:
document.write("Astazi este vineri");
break
case 0:
document.write("Astazi este duminica");
break
default:
document.write("nici macar nu e wekk-end");
//prin default specificam ce vrem sa se afiseze daca nu am gasit nici o egalitate
}
//-->
</script>
In cazul in care in loc de numere intregi lucram cu siruri de caractere, trebuie sa le includem intre
ghilimele.
<!-var nume = "Ion";
switch (nume) {
case "Ion":
document.write("Tata");
break
case "Elena":
document.write("Mama");
break
case "Andreea":
document.write("Sotia");
break
default:
document.write("Nu il cunosc");
}
//-->
</script>

Instructiuni repetitive
Instructiunea FOR
<!-//pentru (x valoare initiala; x valoare finala; x crescator)
for (x=1; x<7; x++) {
document.write("<br /> x este "+x);
}
//-->
</script>
Valoarea initiala a lui x este 1. Se intra in ciclu. Se afiseaza textul “x este” si valoarea actuala a lui x
(+x), unde + este operatorul de concatenare.
Valoarea lui x creste cu 1 (x++). Devine 2, nu este egala cu valoarea finala (x<7), adica 6. Se executa
din nou, se va afisa x este 2. Ciclul va continua pana cand x devine 6, dupa care valoarea lui x va creste
cu 1, va deveni 7, iar conditia x<7 nu mai este adevarata si se iese din ciclu.

Instructiunea WHILE
<!-var x = 1;
while (x<7) {
x++;
}
//-->
</script>
Initial valoarea lui x este 1.
CAT TIMP x<7 (conditie adevarata)
se executa codul:
se afiseaza x este....
x creste cu 1: x++

Observatia 1:
Instructiunea de ciclare WHILE poate sa nu se execute niciodata, daca de la inceput conditia este falsa.
Var x=2;
while (x>3)
executa....
Observatia 2:
In corpul instructiunii WHILE trebuie sa existe o instructiune care sa modifice conditia, in caz contrar
intram in ciclu infinit.
<!-var x = 1;
while (x<5) {
}
//-->
</script>
x este 1.
conditie adevarata: x<5
se executa instructiunea document.write
nu exista instructiune de modificare a valorii lui x
conditie adevarata x<5
se executa document.write....
Instructiunea DO-WHILE
DO
instructiuni
WHILE (conditie adevarata)

<!-var x = 9;
do {
document.write("<br />valoarea lui x este "+x);
x++;
}
while (x<20)
//-->
</script>

Observatia 1:
Corpul intructiunii DO se executa cel putin o data, indiferent de valoarea conditiei (testul WHILE... se
face la sfarsit).
<!-var x = 8;
do {
x++;
}
while (x>16)
//-->
</script>
Initial x este 8.
Se executa document.write.
X creste cu 1, devine 9.
Se face testul x>16.
Nu este adevarat, se iese din ciclu.

Observatia 2:
aceeasi ca mai sus, in corp trebuie sa existe macar o instructiune care sa modifice valoarea conditiei,
altfel intram in ciclu infinit.

<!-var x = 8;
do {
}
while (x<20)
//-->
</script>
Nu exista instructiune care sa modifice valoarea lui x, asa incat ramane mereu 8, adica mai mic de 20.
<!-var x = 8;
do {
x--;
}
while (x<20)
//-->
</script>

Exista instructiune care modifica valoarea lui x, dar descrescator (x--). Prima valoare a lui x este 8, a
doua valoare este 7, adica tot mai mica de 20.
Lucrul cu imagini in Java Script.
Definim o imagine img.jpg, cu width si height, dar o denumim “poza”, prin parametrul name=”poza”.
<img name="imagine" src="img1.jpg" width="155" height="155">
//definim un formular simplu
<form>
//in cadrul acestui formular definim un buton
//input type=”button”
//value=”Schimba imaginea” este textul care va aparea pe buton
//evenimentul onClick spune ce sa se intample cand dam click pe buton.
//imaginea se va schimba in img1.jpg si va fi afisata in acelasi loc cu prima, cu aceeasi inaltime si

latime
<input type="button" onClick="document.poza.src='img2.jpg'" value="Schimba imaginea">
</form>
Crearea alertelor cu Java Script
Crearea ferestrelor alert se face astfel:
- window.alert("mesaj care va apare pe ecran")
Urmatorul exemplu deschide o fereastra cu mesajul "va multumim pentru vizita".
<!-window.alert("va multumim pentru vizita");
//-->
</script>
Crearea ferestrelor PROMPT
- window.prompt("mesaj", "text care va apare in fereastra")
Urmatorul exemplu deschide o fereastra "Prompt".
<!-window.prompt("Scrieti numele", "Nume");
//-->
</script>
Numele introdus de utilizator poate fi preluat intr-o variabila si folosit mai departe.
<!-var nume = window.prompt("Scrieti numele", "Nume");
alert("Bine ai venit "+nume);
//-->
</script>
Scrieti urmatorul text in Notepad si salvati-l cu extensia .html:
<html>
<body>
var nume = window.prompt("Scrieti numele", "Nume");
window.alert("Bine ai venit "+nume);
</script>
</body>
</html>

Suntem anuntati ca Internet Explorer a dezactivat rularea script-urilor. Dam click la “Click here for
options”, selectam “Allow blocked contents” si “Yes”.

Introducere in PHP
Inainte de orice introducere in PHP, aveti nevoie de un server PHP.
Pentru aceasta, downlodati unul gratuit, care lucreaza care include APACHE, PHP, MySQL sub
Windows.
Se gaseste la adresa www.wampserver.com

Este bine sa il downlodati pe cel pe care l-am incercuit eu, pentru ca celalalt are inca bug-uri (ma refer
la cel din dreapta).
Se salveaza pe hard, dupa care se executa (se instaleaza).
Daca in timpul instalarii primiti mesaj de genul: Do you want to keep blocked... , raspundeti cu
Unblock, pentru deblocare.
La PHP mail parameters, lasati localhost la SMTP, dar la Email completati adresa dvs de email, ca sa
verificati ca totul merge OK.
Dupa instalare, in coltul din dreapta jos al Desktopului, langa ceas, se gaseste o iconita cu wamp-server.
Intrati in C:/wamp, daca ati pastrat ca si folder implicit de instalare, calea pe care programul de
instalare a propus-o. Aici, aveti un folder numit “www”. In acest folder creati un subdirector, pe care eu
l-am denumit “eu”. In acest subdirector vom salva toate fisierele php.
Intrati in Notepad si scrieti un document, ca cel de mai sus, respectand structura generala a unei pagini
HTML.
Linia care apare ca noutate in acest fisier este:
<?php print(“un mesaj”); ?>

Deci instructiunile PHP sunt cuprinse intre <?php si ?>, iar functia print() realizeaza afisarea unui
mesaj pe ecran.
Salvati fisierul cu optiunea “All files” si cu numele test.php, in folderul creat mai sus, adica in “eu”.
Accesati din nou iconita wamp, si dati click pe localhost. In partea de sus.

Dati click pe folderul “eu” si se deschide fereastra de mai sus, iar folderul contine fisierul test.php.
Accesati fisierul test.php si se deschide o fereastra, in care apare mesajul pe care noi l-am scris in
fisier.
Introducere in PHP
Inainte de orice introducere in PHP, aveti nevoie de un server PHP.
Pentru aceasta, downlodati unul gratuit, care lucreaza care include APACHE, PHP, MySQL sub
Windows.
Se gaseste la adresa www.wampserver.com

Este bine sa il downlodati pe cel pe care l-am incercuit eu, pentru ca celalalt are inca bug-uri (ma refer
la cel din dreapta).
Se salveaza pe hard, dupa care se executa (se instaleaza).
Daca in timpul instalarii primiti mesaj de genul: Do you want to keep blocked... , raspundeti cu
Unblock, pentru deblocare.
La PHP mail parameters, lasati localhost la SMTP, dar la Email completati adresa dvs de email, ca sa
verificati ca totul merge OK.
Intrati in C:/wamp, daca ati pastrat ca si folder implicit de instalare, calea pe care programul de
instalare a propus-o. Aici, aveti un folder numit “www”. In acest folder creati un subdirector, pe care eu
l-am denumit “eu”. In acest subdirector vom salva toate fisierele php.
Intrati in Notepad si scrieti un document, ca cel de mai sus, respectand structura generala a unei pagini

HTML.
Linia care apare ca noutate in acest fisier este:
<?php print(“un mesaj”); ?>
Deci instructiunile PHP sunt cuprinse intre <?php si ?>, iar functia print() realizeaza afisarea unui
mesaj pe ecran.
Salvati fisierul cu optiunea “All files” si cu numele test.php, in folderul creat mai sus, adica in “eu”.

PHP
1. In loc de instructiunea PRINT, pentru a afisa un text pe ecran, poate fi folosita si instructiunea
ECHO.
Sintaxa generala este:
echo (“ ceva”);
echo(text oarecare);
evident, textul va fi cuprins intre ghilimele ””:
Includerea tag-urilor HTML
echo( „<H2> Acesta e un header de nivel 2</H2>”);
2. Includerea comentariilor:
//comentariul
<?php
// exemplu mesaj
// cu comentariu
Echo(„Acesta este un script .”);
?>
3. Comentarii pe mai multe linii:
/*
Acesta comentariu se intinde pe mai multe linii.

Poate contine oricate linii
*/
4. Denumiri corecte pentru variabile:
1. Începeţi obligatoriu cu simbolul dolar (Ş).
2. După simbolul dolar, scrieţi o literă sau o liniuţă de subliniere ( _ ). Litera poate fi scrisă cu
majuscule sau minuscule. Atentie: variabila $B nu este totuna cu variabila $b.
Pentru a da o valoare unei variabile, scriem ceea ce se numeşte o instrucţiune de atribuire. Iată un
exemplu :
$total = 72.8; atribuie variabile total valoarea 72.8
$câştigător = $punctajul_maxim; atribuie variabilei $castigator valoarea variabilei $punctajul_maxim
Numerele sunt de doua tipuri:
-

numere intregi, adica fara zecimale

-

numere reale, adica cu zecimale

$x = 1; atribuie variabilei $x tipul întreg.
Dacă instrucţiunea de atribuire $x = 1.5, va fi executată ulterior, variabila $x devine de tip real
<script>
<?php
// PHP
$numar_intreg=2;
$numar_real=3.2e3;
$sir_de caractere=”Acesta este un şir”;
echo(„<H2>PHP</H2”);
echo(„<BR>valoare întreagă:”);
echo($numar_intreg);
echo(„<BR>valoare reala:”);
echo($numar_real);
echo(„<BR>valoare şir:”);
echo($sir_de_caractere);
?>
</script>
5. Operatorii aritmetici: sunt cei uzuali, +, - , * , /

$profit = $vânzări - $cheltuieli;
$arie = $înălţime * $lăţime;
$rata_impozit = $impozit / 12;

6. Fornulare de trimitere a datelor:
<FORM METHOD="metoda" ACTION="url">
Atributul METHOD al etichetei FORM poate lua una din valorile GET sau POST. Pentru moment,
specificaţi întotdeauna valoarea POST.
<INPUT TYPE="TEXT" NAME="text">

<INPUT TYPE="SUBMIT" VALUE="text">
Includerea formularului intr-o pagina HTML:
<HTML>
<HEAD>
<TITLE>Numele şi e-mail</TITLE>
</HEAD>
<BODY>
<FORM METHOD=”POST” ACTION=”phpinfo.php”>
<H3> Numele e-mail</H3>
<BR>Nume:
<BR><INPUT TYPE=”TEXT” NAME=”numele”>
<BR>Adresa de e-mail:
<BR><INPUT TYPE=”TEXT” NAME=”adresa”>
<BR>
<BR><INPUT TYPE=”SUBMIT” VALUE=”Trimite”>
</FORM>
</BODY>
</HTML>

Când utilizatorul execută clic pe butonul de expediere, datele introduse de utilizator sunt trimise
scriptului phpinfo.php.

7. Alte setari pentru casete de tip text:
<INPUT TYPE=”TEXT” NAME=”text” SIZE=”32” value=”text”>
Specifica un text pe o singura linie, cu lungimea 32 de caractere.
<TEXTAREA NAME=”text” ROWS=”10” COLS=”18””>
Specifica o caseta de tip text, pe mai multe linii si coloane, de exemplu 10 linii si 18 coloane.

8. Plasaţi următorul script PHP într-un fişier denumit ex1.php şi încărcaţi acest fişier în serverul wamp
PHP.
<?php
// Fişierul ex1.php
phpinfo()
?>
Plasaţi următoarea pagină HTML într-un fişier denumit ex1.html şi încărcaţi acest fişier în serverul
wamp PHP, plasându-l în acelaşi folder ca şi fişierul ex1.php:
<HTML>
<HEAD>
<TITLE>0 caseta </TITLE>
</HEAD>
<BODY>
<FORM METHOD=”POST”ACTION=”ex1.php”>
<H3>Header 3</H3>
<BR> Caseta cu text:
<BR><INPUT TYPE =”TEXT” NAME=”text”>

Crearea unei baze de date MySQL
La început, o bază de date nu conţine tabelePentru a crea un tabel într-o bază de date, emiteţi comanda
CREATE TABLE, care are următoarea formă:
CREATE TABLE tabel (coloana tip, coloana tip, …);
unde tabel este numele tabelului, coloana este numele unei coloane, tip este tipul datelor incluse
în coloană, iar ... arată că se poate specifica un număr nedefinit de coloane şi tipuri. De exemplu,
comanda următoare creează un tabel numit carte, care conţine coloanele ISBN (un identificator unic
asociat unei cărţi), titlu şi preţ:
CREATE TABLE carte (carteid CHAR(10), titlu VARCHAR(255), pret decimal(5,2));
În general, SQL nu este sensibil la diferenţa între majuscule şi minuscule. Deci, dacă preferaţi,
puteţi emite comanda următoare, care se comportă exact la fel ca şi precedenta:
create table carte (carteid char(10), titlu varchar(255), pret decimal(5,2));

În afara tipului de date, puteţi specifica numeroase atribute opţionale ale unei coloane:

Atribut

Descriere

NOT NULL

Fiecare rând trebuie să conţină o valoare a coloanei asociate; valorile
nule nu sunt permise.

DEFAULT valoare

Dacă nu este dată o valoare a coloanei asociate, se va presupune valoarea

specificată.
AUTOINCREMENT

MySQL va repartiza în mod automat un număr de serie ca valoare a
coloanei asociate.

PRIMARY KEY

Coloana asociată este cheia primară a tabelului care o conţine.

Iată o comandă CREATE TABLE ceva mai complicată, care foloseşte unele atribute opţionale:
CREATE TABLE carte (carteid CHAR(10) PRIMARY KEY,
titlu VARCHAR(255) NOT NULL,
pret DECIMAL(5,2) DEFAULT 50.00);
Ştergerea unui tabel
Ştergerea unui tabel este o operaţie simplă. Prin ştergerea unui tabel, sunt eliminate toate
rândurile incluse în tabel. Pentru a şterge un tabel, emiteţi următoarea comandă:
DROP TABLE tabel;
unde tabel este numele tabelului care urmează a fi şters.
Modificarea unui tabel
După crearea unui tabel, îl puteţi modifica prin emiterea unei comenzi ALTER TABLE. O formă
a comenzii vă permite să ştergeţi o coloană din tabel:
ALTER TABLE tabel DROP coloana;
unde tabel este numele tabelului care va fi modificat, iar coloana este numele coloanei care va fi
ştearsă. De exemplu, pentru a şterge coloana preţ din tabelul carte, emiteţi comanda
ALTER TABLE carte DROP pret;
O altă formă a comenzii vă permite să adăugaţi o nouă coloană în tabel:
ALTER TABLE tabel ADD coloana tip [optiuni];

unde tabel este numele tabelului care va fi modificat, coloana este numele coloanei care va fi
adăugată, tip este tipul noii coloane, iar [opţiuni] constituie toate opţiunile dorite, precum PRIMARY
KEY. De exemplu, pentru a adăuga din nou coloana preţ la tabelul carte, emiteţi comanda:
ALTER TABLE carte ADD pret DECIMAL(5,2) DEFAULT 50.00;

Alte operatii care se pot executa:
• INSERT, care permite inserţia rândurilor care conţin coloana specificată
• SELECT, care permite accesul la rândurile care conţin coloana specificată

Accesul la datele dintr-o bază de date: interogările SQL
În afară de Data Definition Language, SQL include Data Manipulation Language[6] (DML).
DML vă permite să formaţi interogări, care obţin accesul la datele stocate într-o bază de date relaţională
şi raportează aceste date. De asemenea, puteţi folosi DML pentru a insera, actualiza şi şterge rândurile
dintr-un tabel. Celelalte secţiuni ale acestui modul vor trata despre DML, iar secţiunea de faţă va
aborda cea mai elementară formă de interogare: comanda SELECT simplă.
Cea mai simplă interogare posibilă raportează toate coloanele din toate rândurile unui tabel.
Interogarea are următoarea formă:
SELECT * FROM tabel;
unde tabel este numele tabelului la care se va obţine accesul. Formatul datelor de ieşire plasează
fiecare rând al tabelului pe o linie separată şi prezintă coloanele într-o ordine arbitrară. Datele de ieşire
includ numele coloanelor şi caractere simulate de desenare a liniilor, care separă coloanele.
Dacă doriţi să selectaţi numai anumite coloane sau să raportaţi coloanele într-o anumită ordine,
puteţi folosi următoarea formă alternativă a comenzii SELECT:
SELECT coloana1, coloana2 FROM tabel;
unde tabel este numele tabelului, iar coloana1 şi coloana2 sunt coloanele la care se va obţine
accesul şi al căror conţinut va fi raportat. Puteţi specifica una, două sau mai multe coloane; pur şi
simplu separaţi numele fiecărei coloane de vecinii săi prin intermediul unei virgule. De exemplu, iată o
interogare care inversează ordinea coloanelor în comparaţie cu interogarea anterioară:

SELECT nume, angajatnr FROM angajat;
Deseori, este necesară numai raportarea acelor rânduri care satisfac un anumit criteriu. Clauza
WHERE vă permite să specificaţi o condiţie; rândurile care nu satisfac condiţia nu sunt raportate. De
exemplu, iată o interogare care raportează un singur rând:
SELECT angajatnr, nume FROM angajat WHERE angajatnr=1;
Forma condiţiilor folosite în sub-limbajul DML al limbajului SQL este similară cu aceea a
condiţiilor PHP. Puteţi folosi oricare din următorii operatori relaţionali:

Operator

Descriere

=

Egalitate

<>

Inegalitate

!=

Inegalitate

<

Mai mic decât

>

Mai mare decât

<=

Mai mic sau egal cu

=>

Mai mare sau egal cu

Puteţi compara valoarea unei coloane cu aceea a unei alte coloane, respectiv valoarea unei
coloane cu o valoare literală. Valorile literale şir SQL trebuie să fie incluse între ghilimele simple, nu
între ghilimelele duble permise de PHP.
De asemenea, SQL include numeroşi operatori de comparaţie non-algebrici:

Operator

Descriere

x BETWEEN y AND z

Adevărat, dacă valoarea lui x este cuprinsă între valorile lui y şi z.

x LIKE y

Adevărat dacă valoarea lui x este echivalentă cu modelul y.

x NOT LIKE y

Adevărat dacă valoarea lui x nu este echivalentă cu modelul y.

x IN (y1, y2)

Adevărat dacă valoarea lui x este un membru al listei y1, y2. Lista
poate conţine unul, doi sau mai mulţi membri.

x NOT IN (y1, y2)

Adevărat dacă valoarea lui x nu este un membru al listei y1, y2. Lista
poate conţine unul, doi sau mai mulţi membri.

x IS NULL

Adevărat dacă x are valoarea NULL.

x IS NOT NULL

Adevărat dacă x nu are valoarea NULL.

Ca şi PHP, SQL vă permite să formaţi expresii logice care combină expresiile relaţionale. Puteţi
folosi oricare din următorii operatori logici:

Operator

Descriere

AND

Şl, adevărat dacă ambii operanzi sunt adevăraţi

OR

SAU inclusiv, adevărat dacă un operand este adevărat

NOT

NU, adevărat dacă operandul este fals

De exemplu, următoarea interogare raportează rândurile care au un număr de angajat mai mare
decât unitatea sau al căror nume include sub-şirul 'George':
SELECT angajatnr, nume FROM angajat
WHERE angajatnr>1 OR nume LIKE ’%George%’;
MySQL include multe alte extensii ale limbajului SQL. De exemplu, MySQL acceptă următorii
operatori ca echivalent:

Operator

Echivalent

AND

&&

OR

||

NOT

!

Modificarea datelor dintr-o bază de date
Sub-limbajul SQL Data Manipulation Language include comenzi care vă permit să inseraţi
rânduri noi într-un tabel, să actualizaţi una sau mai multe coloane ale rândurilor existente în tabele,
respectiv să ştergeri rânduri dintr-un tabel. Pentru a insera un nou rând într-un tabel, folosiţi comanda
INSERT, care are următoarea formă:
INSERT INTO tabel VALUES (valoare1, valoare2);
unde tabel este numele tabelului la care se va adăuga rândul, valoare1 este valoarea pentru prima
coloană din tabel, iar valoare2 este valoarea celei de-a doua coloane din tabel. Se pot da mai mult sau
mai puţin de două valori; numărul valorilor date trebuie să fie egal cu acela al coloanelor din tabel. O
coloană poate primi şi valoarea NULL, cu excepţia situaţiilor când definiţia coloanei conţine
specificaţii contrare.
O formă mai populară a comenzii INSERT specifică numele coloanelor cărora le sunt atribuite
valorile:
INSERT INTO tabel (coloana1, coloana2) VALUES (valoare1, valoare2);
În această formă, coloana denumită coloana1 primeşte valoarea valoare1, iar coloana denumită
coloana2 primeşte valoarea valoare2. Ca în cazul primei forme a comenzii INSERT, pot fi specificate
mai mult, respectiv mai puţin de două coloane şi valori. Numărul coloanelor specificate trebuie să fie
egal cu numărul valorilor specificate. Coloanele care nu sunt denumite în comanda INSERT şi care nu
au o valoare prestabilită (DEFAULT) primesc valoarea NULL, cu excepţia situaţiilor când valoarea
respectivă nu este permisă; în acest caz, comanda INSERT eşuează.
De exemplu, se poate folosi o comandă similară cu următoarea pentru a insera un rând nou în
tabelul angajat:
INSERT INTO angajat (angajatnr, nume) VALUES (4, ’Popescu’);
Toate coloanele, cu excepţia coloanelor angajator şi nume, vor primi valoarea NULL.
Pentru a modifica valoarea unui rând sau mai multor rânduri existente într-un tabel, emiteţi o

comandă UPDATE, care are următoarea formă:
UPDATE tabel SET coloana1=coloana1, coloana2=coloana2
WHERE conditie;
unde tabel este numele tabelului ale cărui rânduri urmează să se modifice, coloana1 este numele
primei coloane care urmează a fi modificată, valoare1 este valoarea care va fi repartizată în coloana1,
coloana2 este numele celei de-a doua coloane care urmează a fi modificată, valoare2 este valoarea care
va fi repartizată în coloana2, iar condiţie identifică rândul sau rândurile care urmează a fi actualizate.
Poate fi actualizat un număr mai mare sau mai mic de coloane. Dacă urmează ca fiecare rând să fie
actualizat, clauza WHERE poate fi omisă.
De exemplu, comanda următoare modifică numele asociat angajatului al cărui atribut angajator
are valoarea 4 în Popescu:
UPDATE angajat SET nume=’Popescu’
WHERE angajatnr=4;
Următoarea comandă măreşte salariul fiecărui angajat cu 10 procente:
UPDATE angajat SET salariu=1.1*salariu;
Pentru a şterge un rând dintr-un tabel, emiteţi comanda DELETE, care are următoarea formă:
DELETE FROM tabel WHERE conditie;
Afaceri pe Internet: tehnici de promovare gratuita
www.cursuriploiesti.ro: cursuri web design, crearea si promovarea unui magazin online /
cursuri autocad 2D si 3D la cele mai mici preturi de pe piata, diplome avizate CNFPA, maxim 3
cursanti in grupa
1.Numele domeniului: este bine sa fie o combinatie de cuvinte cheie. Exemplu:
www.cursuriploiesti.ro
2.Titlul paginii, din tag-ul <title>: este bine sa fie o combinatie de cuvinte cheie.
Scrieti un titlu descifrabil alcatuit din 5 pana la 8 cuvinte. Eliminati cuvintele nefolositoare precum

articolele "sau", "si", etc. Acest titlu apare pe motorul de cautare cand pagina dumneavoastra e gasita.
3.Cuvintele cheie: includeti cuvintele cheie in tag-urile “keywords” si “description”. Folositi
cat mai des cuvintele cheie in paginile site-ului. Includeti cuvintele cheie in adresele de email, tag-urile
“alt” din imagini.
4.Inscrieti situl pe cat mai multe motoare de cautare.
Alta Vista http://www.altavista.com
Deja News http://www.dejanews.com
Excite http://www.excite.com
Hot Bot http://www.hotbot.com
Infoseek http://www2.ifoseek.com
Lycos, Inc http://www.lycos.com
WebCrawler http://www.Webcrawler.com
Yahoo http://www.yahoo.com
5.Oferiti informatii gratuite care se gasesc greu altfel.
E una cand spui : "Folositi ghidul nostru gratuit cu privire la afacerile pe Internet pe care il gasiti
exclusiv pe site-ul nostru".
6.Publicati un E-mail Informativ
Deoarece e o realizare deosebita in timp, sa publici o scrisoare informativa
saptamanala, lunara sau trimestriala in care mentionati noutatile pe care le oferiti, reducerile de top,
promotiile.
7.Anuntati un Concurs
Oamenilor le place sa ia ceva gratuit. Daca dumneavoastra publicati un concurs valabil
pe site-ul dumneavoastra, veti genera mai mult trafic decat de obicei. Inscrieti concursul in cele mai
importante agregatoare de concursuri, ei au baze de date cu adrese si anunta noile concursuri prin
email informativ. Oamenii interesati sa castige intra pe site si afla de produsele/serviciile dvs.
Konkurs.ro
concursuri.biz
infopromotii.ro
cautpromotii.ro

8.Tehnica de Promovare prin Viral Marketing
Asa numitul viral marketing foloseste retelele de comunicare ale vizitatorilor site-ului dumneavoastra
sau ale clientilor pentru a transmite mai departe informatii despre site-ul dumneavoastra.
Exemplul clasic e serviciul de e-mail gratuit hotmail.com, care contine un "tagline"
despre serviciul lor la sfarsitul fiecarui mesaj trimis astfel prietenii le spun prietenilor,
care la randul lor spun prietenilor.
Lista top 10 “virale” o gasiti aici: http://marketingportal.manager.ro/articole/ultima-ora-72/celemaibunecampanii-online-top-10-2616.html
9.Scrieti un e-book gratuit, poate sa fie despre orice care are legatura cu situl dvs. Postati ebookul pe site, pe cartiaz.ro, unde intra mii de oameni care doresc carti gratuite din diferite domenii.
Puteti scrie ebook-ul in Open Office (care e gratis) si sa-l exporati ca PDF, sau ca fisier HTML in
Notepad si sa-l transformati in ebook folosind Sbook Builder, care de asemenea este gratuit.
Iata un exemplu de un asemenea ebook:
Cosmetice bio : secretul Cleopatrei
Cleopatra este cunoscuta pentru frumusetea ei si pielea fara cusur. Secretele acestei
frumuseti au fost cercetate de-a lungul timpului, iar cercetatorii au fost unanimi: cosmetice
bio.
Ea a iubit mierea, datorita proprietatilor sale anti- bacteriene, otetul de mere, ghimbir ,
antimoniu , calamina , sarea de mare, apa de trandafiri, uleiul de masline, laptele, florile
aromatice, strugurii verzi.
Toate acestea au reprezentat magia, frumusetea, farmecul,
carisma si magnetismul Cleopatrei.
www.biofarmacia.ro
Frumusetea este,cu siguranta,o stare de spirit.Frumusetea este,cu siguranta,o
binecuvantare data de Dumnezeu.Cand am realizat asta,am incercat sa gasesc esenta unei
clipe de perfectiune.Am incercat sa aduc pe masa laboratorului meu plin de formule
chimice,puritatea florilor scaldate de lumina si ocean din Tahiti,a apei ce atinge perfectiunea
in tratamentele dermaatologice,apa Evian,si a sursei naturale de vitamine pentru
piele,morcovul.Pentru ca vreau un tratament instant care sa aduca pe chipul nostru
frumusetea de dupa o noapte obraznica,frumusetea zambetului vinovat,frumusetea pe care o
meritam. Si se poate realiza prin cosmetice bio.
CREMA DE FRUMUSETE CU ULEI DE MORCOV SI MONOI DE TAHITI este un

preparat cu grad de puritate farmaceutic, elaborata prin adaptarea retetelor oficinale si
innobilarea acestora cu ingrediente de cea mai buna calitate, atestata prin certificareaBIO si
ECOCERT.Un element foarte important din compozitia cosmeticelor este apa. Asa cum spune
Dr. Dennis Gross, dermatolog in New York City: „Produsele cosmetice pe baza de apa sint
mai stabile, mai usoare si nu obtureaza porii, asemeni celor pe baza de uleiuri sau ceara”.
Astfel,pentru CREMA CU ULEI DE ARGAN SI AVOCADO by farm Ioana Marinescu, am ales
sa folosim exclusiv apa minerala EVIAN.Aceasta, pe masura ce patrunde prin diferitele
straturi ale pamintului, aduna in compozitia sa minerale precum sulful, cromul, siliciul.
Majoritatea studiilor clinice au demonstrat ca apa de izvor catifeleaza pielea si amelioreaza
afectiunile dermatologice, de la eczeme la arsuri solare. Testele au aratat ca, aplicata topic,
apa de izvor este mai hidratanta decit apa distilata, ca apa termala reduce inflamatiile pielii cu
46% (in comparatie cu produsele pe baza de apa distilata care au un procent de reusita de
numai 16%) si ca seleniul si zincul din apele minerale asigura penetrarea vitaminelor C si E in
membrana celulelor, crescind considerabil eficienta cremelor antioxidantealele care s-au
pierdut in procesul de purificare. Intre alte cosmetice bio enumeram:
CREMA DE FRUMUSETE este o bomba de energie pentru persoane
pretentioase.Ingredientele sale sunt sinergizate in conditii de maxima rigoare,iar sigla by farm
Ioana
Marinescu
este
garantia
componentelor
de
puritate
maxima.
Uleiul de morcovi este un potent ulei refermizant. Prezenta beta-carotenului ajuta la
eliminarea iritatiilor provocate de razele solare si protejeaza pielea impotriva cancerului.
Cunoscutul ingredient care ajuta vederea,morcovul a intrat in topul ingrijirii pielii. Cele mai
multe efectele miroaculoase s-au semnalat in cazul pielii lasate si cu riduri. In plus, s-a
constatat ca morcovii redau pielii, vitalitatea si culoarea.Pielea reflecta in cele mai multe
cazuri, starea de sanatate. Extractul de morcovii contine numeroase vitamine (A, B, C si E) si
minerale (potasiu, fier, zinc, sodiu, clor si iod).Este un bun anti-inflamator si contribuie la
reinnoirea si protejarea pielii. Astfel,uleiul de morcovi este folosit in dermato-cosmetologie in
tratamentul dermatitelor, eczemelor, eruptiilor cutanate si a ridurilor,probleme cauzate de
radicalii liberi. De asemenea, ajuta si la vindecarea ranilor sau a taieturilor.Uleiul de morcovi
pastreaza pielea ferma, stralucitoare si tanara.
Un alt ulei pretios din compozitia CREMEI DE FRUMUSETE este Monoi de Tahiti.Acesta
este un produs traditional polinezian de o calitate exceptionala, cu reale calitati cosmetice si
medicale.Monoi este un ulei parfumat dulce si este un amestec tradi țional din Insulele
Pacificului, de ulei de nucă de cocos și extract de floare Tahitensis Gardenia.Amestecul este
cunoscut pentru calitățile sale vindecatoare si se obtine prin macerarea florii tiaré in ulei virgin
de cocos.Rezultatul este un ulei dulce parfumat, cu note luxoase si extravagante. Acest ulei
hrănește si netezeste pielea, oferind in acelasi timp fermitate tesuturilor. Este un hidratant
eficient si un protector impotriva agresiunilor externe, in special a radiatiilor UV.Folosindu-l
constant ,pielea devine catifelata si elastica,ferma si radianta.Indicatiile acestuin produs
sunt :pielea obosita,pielea lipsita de elasticitate,pielea deteriorata, care are nevoie de un plus
de frumusete de viata,de optimism.
Folosirea uleiului extras din Monoi de Tahiti reprezinta o revolutie in ceea ce priveste
produsele dermatologice antiaging,deoarece Monoi de Tahiti inseamna o alternativa luxoasa
in alegerea ingredientelor si ofera o experienta minunata in protocolul de ingrijire a fetei si
decolteului.Prin exigenta si calitatea ingredientelor,cat si prin tehnica farmaceutica de
prelucrare a acestora, oferim pacientilor nostrii o gama dermato-cosmetica adaptata nevoilor

particulare ale fiecaruia,cat si tratamente viabile de rejuvenare.

10.Site-urile “cârlig” atrag diversi utilizatori deoarece ofera ceea ce ei doresc, de obicei
informatii.
Teoretic, toate site-uril ofera informatii, dar cele “cârlig” sunt destinate special sa “agate” utilizatorii.
Exemplu
Presupunem ca dorim sa vindem cursuri de web design. Faceti un site referitor la afacerile pe Internet,
in care oferiti informatii despre acest subiect, un alt site despre web design, in care oferiti informatii cu
privire la regulile de design, un alt site despre PHP in care oferiti un mini-curs de PHP si MySQL.Toate
aceste situri vor contine bannere catre situl nostru principal.
11.Inscrierea in directoare (romanesti si straine )– O tehnica mai veche, care aduce inca
rezultate scontate. Inscrierea in directoarele romanesti si straine se face manual, deoarece google
penalizeaza inscrierile automate.
Lista completa a directoarelor romanesti, in care inscrierea este gratuita, o gasiti pe adresa
www.dirpedia.ro.
Cylex-romania.ro
adresa.ro
cere.ro
best-top.ro
gofind.ro
listafirme.ro
roportal.ro
top66.ro
real-web.ro
bizoo.ro
12.Publicarea de anunturi- exista nenumarate situri care ofera posibilitatea de a publica
anunturi gratuite. Un lucru foarte important este ca unele dintre ele accepta inserarea url-ului catre situl
nostru.
Legaturi.ro
evrika.ro
anunt123.com
util21.ro

anunturigratuite,ro
megaanunturi.ro
olx.ro
online.anuntul.ro
tocmairo
anunturi.ro
e-oferta.ro
13.Profil pe Facebook, linkedin, twitter, twoo, badoo. Creaza un profil pe unul sau mai multe
siteuri de socializare.
In acest moment, varful de lance al siteurilor de socializare este Facebook.com.
14.Publicarea de comunicate de presa – Daca aveti un produs/serviciu nou si demn de anuntat,
puteti folosi publicarea in siteuri de comunicate de presa.
comunicatemedia.ro
comunicatedepresa.ro
15.Linkuri in Wikipedia – O sursa veche ce-i drept, este wikipedia, de aici poti avea cateva
linkuri bune care aduc trafic mult, si in marea lui parte targetat.
16.Comentarii in bloguri, forumuri, comunitati – O buna strategie de obtinere de linkuri este
comentariile si participarea in discutii legate de subiectele de pe nisa ta. Softpedia.ro- e cel mai
important, au si pagina de anunturi. Lista top 10 bloguri romanesti, o gasiti aici:
http://itcmedia.ro/top10cele-mai-populare-bloguri-romanesti/. ZeList publica saptamanal topul blog-urilor romanesti.
17.Crearea de jocuri virale. Rezultatul poate sa fie fantastic. Se poate folosi Game maker, care
este free, iar pe deasupra nu aveti nevoie de cunostinte de programare prealabila.
18.Link in filmele publicate pe YouTube etc. – Daca publici filme pe YouTube atunci e o idee
buna ca in descrierea filmului sa introduci linkuri catre produsele tale, daca sunt relevante
subiectele filmului.
19.Magazine online pe platforme gratuite – Daca vinzi produse sau vrei sa vinzi cadouri pentru

fani te poti folosi de magazine pe platforme gratuite gen CafePress, Ecrater, ShareIt etc, in profilul lor
vei putea sa scrii cateva date despre servicii produse. Uneori oferind o alternativa la shopurile clasice,
ai posibilitatea sa ajungi la clienti in care mod normal nu ai ajunge.
20.Inscrie siteul tau in Google Local Business Center si creeaza un profil complet cu adresa,
telefon, url. Mai nou exista posibilitatea sa adaugi imagini cu produse si cu locatia, filme despre firma,
produse si chiar si cupoane. Publica imagini pe Fotolia si adauga un link in profil
21.Promoveaza si vinde folosind agregatoarele romanesti de reduceri: groupon,ro, inzonata.ro,
zumzi.ro, ca sa le enumeram doar pe cele mai mari. Au baze de date cu mii de useri si trimit email
informativ. Nu platiti nimic la inscriere, vi se retine comision doar la vanzarea unui produs. Chiardaca
nu veti vinde mare lucru, numele firmei va fi expus potentialilor clienti.
22Inscrierea sitului in google analytics: micsoreazaperioada de indexare a sitului in google, din
momentul inscrierii lui.
23.Realizarea unui sitemap si trimiterea lui la Google.

Web design si programare web

More Related Content

Similar to Web design si programare web (20)

Web design si programare web