Teza

UNIVERSITATEA DE STAT DIN MOLDOVA
FACULTATEA DE FIZICĂ ŞI INGINERIE
CATEDRA FIZICĂ APLICATĂ ŞI INFORMATICĂ
VATAVU DANIEL
Descrierea comparativa a instrumentelor de creare a paginilor web

526.2 Tehnologii Informaționale
Teză de Licență
Șef Catedră : _________
Conducător Științific: _______ Sprînean Veaceslav, lector superior universitar.
Autorul: _________
Chişinău 2015
Cuprins
Introducere...................................................................................................................................- 3 -
Partea I HTML..............................................................................................................................- 4 -
1. Noţiuni de bază....................................................................................................................- 4 -
1.1. Elementele de structură: HTML, HEAD şi BODY.................................................................- 4 -
1.1.1. Blocul de antet <HEAD>…</HEAD>............................................................................- 5 -
1.1.1.a. Elementul TITLE.......................................................................................................- 5 -
1.1.1.b. Elementul BASE........................................................................................................- 5 -
1.1.1.c. Elementul META.......................................................................................................- 5 -
1.1.2. Blocul de corp <BODY>…</BODY>.............................................................................- 8 -
1.1.3.Blocul de comentarii....................................................................................................- 8 -
1.1.4.Blocul de centrare............................................................................................................- 8 -
Partea II DHTML...........................................................................................................................- 9 -
2. Noţiuni de bază....................................................................................................................- 9 -
Partea III CSS-Cascading Style Sheets.........................................................................................- 11 -
3. Întroducere în modelele de stiluri......................................................................................- 11 -
3.1. Stiluri interne (in-line)......................................................................................................- 11 -
3.2. Foi de stil în pagină..........................................................................................................- 13 -
3.3. Foi de stil externe............................................................................................................- 15 -
3.4. Stiluri în cascadă...............................................................................................................- 16 -
Partea IV PHP.............................................................................................................................- 18 -
4. Noţiuni de bază...................................................................................................................- 18 -
Partea V JavaScript.....................................................................................................................- 21 -
5. Notiuni de baza...................................................................................................................- 21 -
5.1. JavaScript(partea de client, server).................................................................................- 21 -
5.2. Caracteristicile JavaScript................................................................................................- 22 -
5.3. Prezentarea generala......................................................................................................- 22 -
Concluzii:.....................................................................................................................................- 25 -
Bibliografie:.................................................................................................................................- 26 -
2
Introducere
Î
n această teză am să descriu instrumentele de creare a paginilor web, mai bine zis a limbajelor
folosite cel mai des la crearea lor. Pentru descriere am să folosesc aşa limbaje ca PHP şi
HTML. Am ales aceste limbaje, pentru că ele sunt cele mai populare, sunt simple şi sunt uşor
memorabile. Chiar şi un inceptor, după cîteva lecţii ar putea sa creeze o pagina web.
Tot aici am să descriu şi limbajul DHTML, precum si CSS (Cascading Style Sheets).
Ambele sunt importante deoarece vin să îmbogăţească şi să perfecţioneze paginile create cu
ajutorul HTML.
La dispoziţia publicului, prima descriere a HTML apare într-un document numit HTML
Tag-uri , mentionat pentru prima dată pe internet de către Berners-Lee la sfârşitul anului 1991.
Acesta descrie 20 elemente relativ simple care cuprind designul iniţial al HTML. Cu excepţie
pentru tag-ulrile hyperlink, acestea au fost puternic influenţate de SGMLguid. Treisprezece
dintre aceste elemente încă există în HTML .
DHTML permite autorului să adauge efecte pe paginilă. De exemplu, DHTML permite
autorului:
 Să animeze textul şi imaginile în documentul lor,acesta se poate deplasa independent din

orice punct de pe pagina pină în oricare alt punct de pe pagină, după o cale
predeterminată sau aleasă de utilizator.
 Să încorporeze o bandă care să actualizeze automat conţinutul său cu cele mai recente
ştiri, cotaţii bursiere, sau alte date.
CSS constituie un instrument avansat de formatare a oricărui marcaj HTML, în vederea

realizării unor pagini WEB profesionale.
Foile de stiluri HTML sunt asemănătoare cu stilurile de formatare a unui document
WORD şi permit introducerea unei mulţimi de atribute prin care se pot defini fonturi, culori,
alinieri etc.
3
I. HTML- HYPERTEXT MARKUP LANGUAGE
Noţiuni de bază
HTML (HyperText Markup Language ) este limbajul predominant în crearea paginilor

web. El conţine un set de coduri speciale care se inserează într-un text, acestea permit sa creem
documente structurate cu structură semantică pentru text, cum ar fi titluri, paragrafe, liste, etc
precum şi pentru link-uri, citate şi alte elemente, permit integrarea imaginilor si obiectelor în
pagină pentru formulare interactive. HTML are la bază limbajul Generalizat Standard de
Marcare (Standard Generalized Markup Language – SGML).
Prin convenţie, toate informaţiile HTML încep cu o paranteză unghiulară deschisă, (“<”) şi
se termină cu o paranteză unghiulară închisă (“>”), de exemplu <HTML>. Simbolul “<…>”
este cunoscut în literatura de specialitate sub numele de tag (etichetă) de control sau de marcaj.
Marcajul comunică unui program de navigare (interpretor sau browser) că fişierul scris este
formatat în limbajul HTML standard.
1.1. Elementele de structură: HTML, HEAD şi BODY
Orice program HTML este cuprins în blocul exterior: <HTML>….</HTML>, care mai
conţine un bloc de antet <HEAD>…</HEAD>, un bloc decorp <BODY>…</BODY> şi
opţional unul sau mai multe blocuri de comentarii <!-– conţinut --> şi blocuri de centrare
<CENTER>…</CENTER>.
Elementele HTML, HEAD şi BODY ajută la structurarea unui document şi, din această
cauză, se mai numesc şi elemente de structură. Deci, structura generală a unui document HTML
este:
<HTML>
<HEAD>…..</HEAD>
<BODY>…..</BODY>
</HTML>
4
1.1.1. Blocul de antet <HEAD>…</HEAD>
Voi prezenta elementele HTML şi atributele acestora care se scriu în blocul de antet al
documentului. Aceste elemente sunt: <TITLE>, <BASE>,<META>, <STYLE>, <SCRIPT>.
Aceste elemente nu sunt afişate de browser-e.Etichetele BASE şi META sunt etichete simple, în
timp ce TITLE, STYLE, SCRIPT sunt etichete pereche.
1.1.1.a. Elementul TITLE
Acest element permite introducerea unui titlu pentru o pagină web, titlu care va fi scris între
tag-urile <TITLE> şi </TITLE>. Textul scris între aceste marcaje apare în antetul ferestrei
browser-lui.
<TITLE>
Teza mea de an
</TITLE>
1.1.1.b. Elementul BASE
Elementul BASE are rolul de a preciza o adresă de bază pentru resurse, care va fi ataşată
automat la adresa URL dintr-o referinţă, ceea ce ne permite să evităm rescrierea codului (dacă
toate legăturile indică spre acelaşi server). Singurul atribut al elementului BASE este href =
”adresa URL”
Când se utilizează elementul BASE într-o pagină, adresa URL propriu-zisă este o
concatenare a adresei atributului href din BASE cu valoarea atributului href sau src a
elementelor A şi IMG. Acest URL concatenat va apărea în bara de adrese a browser-lui.
1.1.1.c. Elementul META
Acest element ne permite să inserăm în paginile web acele informaţii care să le facă uşor
de indexat de către aplicaţiile de căutare/indexare pe web (yahoo, google, altavista etc.)
5
Informaţiile conţinute de acest element nu sunt afişate de către browser,dar este indicat să-
l folosim pentru ca informaţiile din site-ul nostru să fie accesibile cu ajutorul roboţilor Internet şi
a motoarelor de căutare. Un antet poate conţine mai multe elemente META. Atributele
elementului META sunt:
 Name – cu valorile posibile:

− author
− description
− keywords
− copyright
 http-equiv – valorile posibile sunt:
− from
− replay-to
− creation-date
− expires
− refresh
− pragma
 Content – utilizat pentru stocarea informaţiilor valorilor celor două atribute de mai sus
(name şi http-equiv). Valorile posibile sunt şiruri de caractere între ghilimele. În
general, atributele META sunt pereche. De exemplu: Name=”author” content =”Ion”
 Scheme – utilizat pentru rafinarea informaţiei din celelalte atribute. Valorile posibile
sunt şiruri între ghilimele.
 Lang – utilizat pentru precizarea limbii. Valorile posibile sunt identificatorii de limbă
între ghilimele (“ro”, ”uk”, ”en” etc.) Ultimele două atribute (scheme şi lang) nu sunt
atribute pereche.
Elementul META are şi alte atribute, dar foarte rar sunt folosite. Aceasta din cauză că au
apărut alte modalităţi prin care aceleaşi efecte sau chiar mai multe se pot rezolva mai eficient.
Realizatorii motoarelor de căutare au dorit să ajute programatorii paginilor web cu
elementul META pentru a evidenţia conţinutul paginilor. Unii autori au introdus cuvinte care nu
au legătură cu paginile web, doar pe motiv de a părea mai interesanţi. Eticheta META devine
astfel inutilă, poate o unealtă pentru SPAM (informaţii nedorite). Din acest motiv, unele
motoare au renunţat definitiv la informaţiile din META, iar altele, dimpotrivă, dacă paginile nu
6
conţin elemente META, pun paginile la sfârşitul listei. Există firme specializate care, contra cost,
optimizează site-urile pentru motoarele de căutare (SEO-Search Engine Optimization).
NOTĂ! În atributele elementului META nu se folosesc cuvinte care nu sunt incluse în
pagină şi de asemenea nu se repetă cuvinte.
În continuare se trec în revistă atributele enumerate mai sus.
Descrierea unei pagini (fişier html).

Se utilizează eticheta META cu atributele: name=”description” content=”sir de caractere”
Motorul de căutare va afişa textul (valoarea atributului content); în lipsa acestui atribut,
motorul va afişa primele rânduri ale paginii.
Cuvinte cheie
Cuvintele cheie specifică motoarelor de căutare cuvintele după care să fie regăsit un
anumit site. Aşadar, cuvintele cheie declarate trebuie să se regăsească în interiorul paginii.
<META name="description" content="teza de an">
<META name="keywords" content=" universitate, stat, teza">
Author şi copyright
Pentru a introduce informaţii despre autor sau o autoritate şi despre drepturile de copyright
se introduc două etichete<META> cu valorile atributelor name,“author” şi respectiv“copyright”.
Deoarece aceste informaţii nu sunt afişate de browser este indicat să se introducă şi în blocul
<BODY>…</BODY> al fişierului informaţii, ca în exemplul următor (se observă că pentru a
obţine simbolul © se utilizează secvenţa &copy).
<HTML>
<HEAD>
<TITLE> Teza mea de an</TITLE>
<META name"description" content="teza de an">
<META name="author" content=”Silivestru Ion”>
<META name="copyright" content="Silivestru Ion">
</HEAD>
<BODY>
copyright©2015
</BODY> </HTML>
7
1.1.2. Blocul de corp <BODY>…</BODY>
Acest bloc cuprinde corpul paginii şi conţine toate tag-urile necesare lucrului cu textul. În
continuare vom prezenta atributele elementului BODY, care sunt opţionale, aşa cum s-a utilizat
în exemplele de până acum. Atributele elementului BODY sunt:
 Background – indică o imagine care dorim să apară pe fundal. Imaginea se va repeta
atât pe orizontală, cât şi pe verticală până va umple tot corpul. Acest atribut a fost
descris şi la tabele, fiind atribut şi al elementelor <TABLE>, <TR> şi <TD>.
 Bgcolor – indică culoarea de fond. Dacă se folosesc ambele atribute şi, în cazul în care
imaginea nu se încarcă, atunci apare culoarea de fond, altfel apare imaginea.
 Text – indică culoarea folosită pentru textul conţinut în blocul <BODY…. </BODY>.
 Atribute de margine – Browser-ele utilizează atribute diferite pentru margini. Valoarea
atributelor de margine este un număr întreg pozitiv şi reprezintă distanţa în pixeli de la
conţinut la marginile ferestrei.
Atributele link, alink şi vlink – indică culoarea legăturilor. Reamintim că legăturile au
culori predefinite în funcţie de stările în care se află, astfel:
− legăturile nevizitate au culoarea implicită albastră care poate fi schimbată cu atributul
link=”culoare”
− legăturile vizitate au culoarea implicită purple care poate fi schimbată cu vlink=”culoare”
− legăturile active au culoarea implicită roşu care poate fi schimbată cu atributul
alink=”culoare”
1.1.3.Blocul de comentarii
Pentru o mai bună lizibilitate a unei pagini este indicat să se introducă comentarii. Un
comentariu are sintaxa: <!_ _ comentarii_ _>. Un bloc de comentarii are caracteristicile:
− nu este afişat de browser
− poate fi introdus oriunde în interiorul paginii
− se poate întinde pe mai multe rânduri
1.1.4.Blocul de centrare
Dacă se doreşte centrarea unei secvenţe de cod fără a utiliza un stil sau formatarea logică
<PRE>, se foloseşte blocul <CENTER>…</CENTER> . Textul şi/sau imaginea cuprinse în
8
acest bloc vor fi centrate în fereastra browser-lui. Blocul poate fi plasat oriunde în program şi
pot exista mai multe blocuri de centrare într-o pagină.
II. DHTML- DYNAMIC HYPERTEXT MARKUP LANGUAGE
Noţiuni de bază
Dynamic HTML , sau DHTML este termenul ce descrie o colecţie de tehnologii folosite
împreună pentru a crea site-uri web animate şi interactive, folosind o combinaţie între limbajul
de programare static, cum ar fi HTML, un client-side scripting, cum ar fi JavaScript şi un limbaj
de stil, CSS.
HTML dinamic (DHTML - Dynamic Hyper Text Markup Language) – este tehnologia de
construire a paginilor HTML interactive. DHTML este un ansamblu a câtorva tehnologii: HTML
4.х+JavaScript+CSS. Această tehnologie se aplică atunci când este nevoie de a imprima
dinamism paginii la modificarea câtorva condiții (de exemplu, la plasarea cursorului asupra unui
obiect acesta își poate schimba culoarea sau dimensiunile; la trecerea focusării pe alt câmp din
forma se verifica corectitudinea datelor introduse în câmpul precedent etc.).
O aplicare foarte frecventa a tehnologiei DHTML se întâlnește la crearea meniurilor, care nu

numai bucură privirea vizitatorilor prin dinamism, ci considerabil reduc spațiul pe care acestea îl
ocupă.
Avantaje:
• Mărirea potențialului de concurență a resursei – un site care conține culori ce se pot modifica in
mod dinamic, grafică animată, meniuri tip „dropdown” 1 sau alte elemente ale interfeței
utilizatorului, firește că sunt mai atrăgătoare pentru acesta decât paginile statice obișnuite.
Bineînțeles că trebuie de folosit acestea cu măsură, respectând principiile generale ale
designului.
• Simplitate în întreținere – DHTML permite plasarea elementelor tipice de formatare a paginilor
în tabele de stiluri și scenarii separate, apoi includerea lor într-un mod similar în toate paginile.
Aceasta permite o administrare centralizată a stilurilor și evita riscul de greșeli, care apare la
scrierea acestora pe fiecare pagina separat.
9
Neajunsuri:
Aplicațiile DHTML sunt destul de autonome în browser, fără suport din partea serverului, adică
nivelul de productivitate și de rapiditate al executării aplicației depinde în cea mai mare măsura
de posibilitățile calculatorului vizitatorului.
DHTML permite autorului să adauge efecte pe paginilă. De exemplu, DHTML permite

autorului:
 Să animeze textul şi imaginile în documentul lor,acesta se poate deplasa independent din

orice punct de pe pagina pină în oricare alt punct de pe pagină, după o cale
predeterminată sau aleasă de utilizator.
 Să încorporeze o bandă care să actualizeze automat conţinutul său cu cele mai recente
ştiri, cotaţii bursiere, sau alte date.
 Să utilizeze un formular pentru a captura date introduse de utilizator, şi apoi să le

proceseze şi să răspundă la aceste date fără a le trimite înapoi la server.
 Să includă butoane rollover sau meniuri drop-down.
Acesta este un simplu program ce demonstrează construcţia unui site în limbajul DHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DHTML example</title>
<script type="text/javascript">
function init() {
myObj = document.getElementById("navigation");
// .... more code
}
window.onload=init;
</script>
</head>
<body>
10
<div id="navigation"></div>
<pre>
Often the code is stored in an external file; this is done by linking the file that contains the
JavaScript.
This is helpful when several pages use the same script:
</pre>
<script type="text/javascript" src="myjavascript.js"></script>
</body>
11
III. CSS-CASCADING STYLE SHEETS
Întroducere în modelele de stiluri
CSS constituie un instrument avansat de formatare a oricărui marcaj HTML, în vederea

realizării unor pagini WEB profesionale. Foile de stiluri HTML sunt asemănătoare cu stilurile
de formatare a unui document WORD şi permit introducerea unei mulţimi de atribute prin care
se pot defini fonturi, culori, alinieri etc. Consorţiul Web W3C de la CERN(realizatorul spaţiului
Web) pune la dispoziţia creatorilor de pagini întreaga specificaţie CSS la locaţia
http://www.w3.org/TR/REC-CSS2/
Legăturile dintre HTML şi CSS se realizează cu ajutorul elementului STYLE. Stilurile pot
fi definite ca:
 stiluri in-line care se definesc ca atribute STYLE. Aproape toate elementele HTML(cu
excepţia elementelor BASE, HEAD, BASE FONT, HTML, META, PARAM,
SCRIPT, STYLE, TITLE) permit acest atribut. Valorile atributului STYLE constau
dintr-o listă de specificaţii, sub forma nume-proprietate:valoare, pusă între ghilimele şi
separate prin punct şi virgulă
 foi de stil în interiorul unui document, plasate în partea de antet a documentului, în
interiorul blocului <STYLE>...</STYLE>
 foi de stil, definite într-un fişier extern, care se poate lega la orice pagină WEB.
3.1. Stiluri interne (in-line)
În capitolele precedente am definit elementele HTML împreună cu atributele lor specifice,

necesare realizării paginilor WEB. Majoritatea elementelor HTML (cu excepţia celor enumerate
mai sus) admit următoarele atribute:
 style – atribuie un stil intern unui element.Valorile posibile sunt specificaţii (declaraţii)
de stiluri, separate prin ”;”, ca de exemplu style=”font-style:italic; font-size=10pt”
158
 title – defineşte o informaţie pentru un element. Valorile sunt şiruri de caractere scrise
între ghilimele, care apar într-un chenar galben, atunci când suntem cu mouse-ul
deasupra elementului
12
 dir – indică direcţia de afişare a conţinutului elementului. Valorile posibile sunt: ltr-de
la stânga la dreapta şi rtl- de la dreapta la stânga
 lang – defineşte limba în care va apărea scris conţinutul elementului. Valorile posibile
sunt maxim 5 caractere între ghilimele, de exemplu ”en”, ”en-us”
 id – defineşte un identificator unic pentru un element (a fost folosit în
capitolul precedent ca atribut al elementului OBJECT)
 class – defineşte o clasă a elementului. Valorile posibile sunt liste de
unul sau mai mulţi identificatori separaţi prin spaţiu, de exemplu class=”nume1,.....,numen”
Stilul in-line pentru un element este introdus printr-un atribut STYLE. Valoarea acestui
atribut este o listă de specificaţii de stil, separate prin ‚;” şi cuprinse între ghilimele. O
specificaţie de stil sau o declaraţie de stil este ca un atribut pentru un marcaj, dar cu următoarea
sintaxă: nume proprietate:valoare-proprietate unde:
− nume-proprietate defineşte o proprietate şi nu este cuvânt rezervat
− valoare-proprietate - este o valoare credibilă pentru proprietate
Exemple de declaraţii de stil :

 color: yellow – stabileşte culoarea galbenă a textului
 font-style: italic – stabileşte stilul cursiv pentru text
Cu ajutorul stilurilor interne pentru un element se poate obţine o mulţime de efecte locale.
Modelele de stil in-line se obţin aşadar prin adăugarea atributului style la anumite marcaje
HTML, conform sintaxei: style=”specificaţie1; specificaţie2; ...; specificaţien”
În anexa C este dat un tabel complet cu specificaţiile(declaraţiile) de stil. O parte dintre
aceste declaraţii, grupate pe categorii (de text, de culoare, de margini etc.), va fi detaliată în
capitolul următor. În exemplul de mai jos se definesc modelele de stil in-line, precum şi unele
atibute comune marcajelor, definite mai sus:
<HTML>
<HEAD></HEAD>
</BODY>
<H2 title= „Despre tabele” style="font-style:italic; font-size:20pt; font-
weight:extra-bold; text-decoration:underline; text-align:center;">
TABELE
</H2>
13
<P dir=rtl style="font-size:12;color:green;font-family:curier,arial;"> TABELELE SUNT
FOLOSITE PENTRU EVIDENTIEREA UNOR DATESAU PENTRU A DELIMITA
SPAŢIUL UNEI PAGINI </P>
<TABELE>
<TR><TD align=center><IMG src="univ.jpg width=100 height=100
"style="cursor:crosshair;">
<TR><TD width="10%" STYLE="text-align=center; color:DarkRed;
background:yellow; text-transform:uppercase">
UNIVESITATEA DE STAT DIN MOLDOVA
</TABLE>
</BODY> </HTML>
3.2. Foi de stil în pagină
În această secţiune vom extinde stilurile de la un element HTML, cum au fost definite în
secţiunea precedentă, la toate elementele de acelaşi tip (de exemplu, P) dintr-un document.
Pentru a defini foile de stil, introducem noţiunile de bloc de specificaţii, selector şi regulă. Un
bloc de declaraţii sau specificaţii este o listă de specificaţii separate prin „;” şi cuprinde între
acolade, ” {...}”, de exemplu: {font-size:20pt ;color:”red”; font-style:italic;}. Într-un bloc de
declaraţii, ultimul simbol ”;” poate lipsi. Un selector sau tip de declaraţii este un obiect căruia i
se aplică declaraţiile definite sau blocul de declaraţii.Există mai multe categorii de selectori:
 de tip – sunt elementele HTML, definite în capitolele trecute
 Id – sunt identificatori introduşi mai sus
 Class – de clasă
 Universali – definiţi prin simbolul ”*” şi care se aplică oricărui element
 pseudo-clase – definesc clase a căror nume este un cuvânt rezervat
 pseudo-elemente – definesc anumite părţi dintr-un element (de
exemplu, prima literă dintr-un paragraf)
De exemplu, dacă dorim să aplicăm un stil oricărui element de tip <P> din pagină, putem
scrie P{font-size:15pt;color:red;text-align:center;} O regulă sunt perechi formate dintr-un
selector (sau tipul declaraţiei) şi dintr-un bloc de declaraţii, cu următoarea sintaxă:
selector{bloc de declaraţii} sau selector{declaraţia1;.....declaraţian;}. Foile de stil sunt alcătuite
14
dintr-un set de reguli. Foile de stil se trec în interiorul tag-ului pereche <STYLE>
....</STYLE>, care se scrie în interiorul blocului de antet, astfel:
<HTML>
<HEAD>
<STYLE>
selector1 {bloc de declaraţii}
selector2{bloc de declaraţii}
selectorn{bloc de declaraţii}
</STYLE>
</HEAD>
<BODY>
..............
</BODY>
</HTML>
Dacă se doreşte aplicarea unui stil asupra mai multor elemente, atunci selectorii se vor
grupa într-o listă de selectori, separaţi prin virgulă(‚), s1,s2,s3.....{..}. De exemplu: P, H2, DIV
{color:blue; background:”yellow”;} Un atribut al elementului style este type, care defineşte
sintaxa foii de stil,utilizată la definirea declaraţiilor. Atributul type are valoarea prestabilită
”text/css”. Aşa cum spune şi numele, CSS semnifică foi de stil în cascadă, iar „text” specifică
faptul că specificaţiile de stil sunt reprezentate sub formă de text, care este şi singura valoare
posibilă. Dacă se doreşte să se asigure compatibilitatea cu browser-ele mai vechi, care nu
recunosc stilurile, foile de stil se pot include intr-un comentariu HTML, astfel:
<HEAD> <STYLE type=”text/css”>

/* foaie de stil */
</STYLE> </HEAD>
Am menţionat mai sus faptul că există un selector universal, indicat prin
simbolul ”*” şi care corespunde oricărui element.
Un exemplu de foi de stil în pagină este redat mai jos:
<HTML>
<HEAD>
<STYLE>
P{font-size:20pt;font-weight:light;color:red;text-align:center:}
*{font-style:italic;}
15
OL{font-size:20pt;background:cyan;}
LI{font-size:15pt;color:blue;}
A{text-decoration:none;color:grown;}
</STYLE>
</HEAD> <BODY>
<P><B>Listă </B>este un mod de organizare in care mai multe enunţuri
pot fi numerotate, marcate sau definite intr-un anumit fel .
<OL>În HTML există trei tipuri de liste:
<LI>Liste ordonate(Ordered list - OL)
<LI>Liste neodornate(Unordered list - UL)
<LI>Liste de definiţie(Definiţion list - DL)
</OL>
</BODY></HTML>
3.3. Foi de stil externe
În secţiunea precedentă am definit stiluri pentru selectorii de tip (elemente HTML) dintr-
un fişier HTML. În această secţiune se arată cum se pot extinde stilurile la toate paginile Web de
pe server-ul utilizat. Dacă s-ar copia foaia de stil din pagina în care a fost definită în mai multe
pagini în care dorim să apară foaia de stil respectivă, ar apărea un inconvenient, constând în
faptul că, atunci când se doreşte o modificare de stil, modificarea respectivă trebuie făcută în
toate paginile în care a fost copiată foia de stil. Soluţia de înlăturare a acestui inconvenient
constă în executarea următorilor paşi:
 se creează foaia de stil într-un fişier extern, care se salvează cu extensia .css
 se leagă acest fişier de orice pagină Web care dorim să aibă acelaşi aspect. Pentru a crea
o legătură între o pagină Web şi un fişier foaie de stil extern (.css), se foloseşte tagul
<LINK> care se scrie în blocul de antet (<HEAD>...</HEAD>) al respectivei pagini.
Elementul LINK:
Aşa cum am menţionat, legătura dintre o pagină şi un fişier .css, se realizează cu elementul
LINK. Sunt obligatorii trei atribute ale elementului LINK:
 type – indică browser-ului limbajul în care este scris codul şi are valoarea unică
„text/css”
 rel – defineşte tipul de fişier .css şi are valoarea ”stylesheet”
16
 hre f- are ca valoare adresa URL a fişierului foaie de stil externă (.css), care conţine
foaia de stil care se leagă.
Pentru exemplificare, considerăm foaia de stil creată în exemplu 13.2 pe care o copiem
într-un fişier nou Notepad şi pe care îl salvăm cu extensia .css astfel: stil-extern.css. În partea de
cod a paginii se înlocuieşte blocul <STYLE> ... </STYLE> din antet cu tagul <LINK> plasat tot
în antet.
Codul fişierului stil-extern.css este:

P{font-size:20pt;font-weight:light;color:red;text-align:center;}
*{font-style:italic;}
OL{font-size:20pt;background:cyan;}
LI{font-size:15pt;color:blue}
A{text-decoration:none; color:BlueViolet;}
Codul html care se va lega la acest fişier va fi:

<HTML> <HEAD>
<LINK type="text/css" rel="stylesheet" href="STIL_EXTERN.CSS">
</HEAD>
<BODY>
<P><B>Lista </B> este un mod de organizare in care mai multe enunturi pot fi numerotate,
marcate sau definite intr-un anumit fel <P> <OL>In HTML exista trei tipuri de liste:
<LI>Liste ordonate(Ordered list - OL)
<LI>Liste neodornate(Unordered list - UL)
<LI>Liste de definitie(Definition list - DL)
</OL>
</BODY> </HTML>
3.4. Stiluri în cascadă
CSS (Cascading Style Sheets) semnifică, aşa cum sugerează numele, foi de stil în cascadă,
pe care ni le putem imagina ca pe o cascadă care se rostogoleşte peste o înălţime virtuală,
constând dintr-un cod HTML. Aceasta impune o anumită precedenţă (ordine de aplicare a
stilurilor asupra unui element) şi anume:
1. Se aplică stilurile interne pentru un element, dacă acestea există.
17
2. Se aplică foile de stil interne unei pagini (definite în antetul paginii), dacă acestea există.
3. Se aplică foile de stil (definite în fişiere externe), dacă acestea există.
4. Dacă nu există stiluri definite se aplică stiluri HTML predefinite (de exemplu, pentru font,
size=3)
Un exemplu de stiluri aplicate în cascadă este dat mai jos:
<HTML> <HEAD>
<TITLE>Stiluri-cascada</TITLE>
<LINK type="text/css" rel="stylesheet" href="cascada.css">
<STYLE>
A{font-style:italic;font-wight:bold;}
163OL{color:RGB(0,0,255);}
</STYLE></HEAD>
<BODY>
<H2 style="font-size:20pt; color:green;">
Style in-line, 20pt, culoare verde</H2>
<A href="flori.jpg" style="text-decoration:none;color:yellow;">
Legături (Stil in-line:nesubliniat, culoare text galben; stil pagina:
cursiv,bold;
stil extern: fundal:BlueViolet)</A>
<OL>Definirea stilurilor(stil intern: blue, extern: italic, fundal cyan)
<LI style="color :red"><B>Stil in-line</B> <BR>
(stil intern:culoare rosie o anuleaza pe a stilului de pagina bleu
stilului extern: a lui OL - italic fundal cyan)
<LI style="background:red"><B>In antetul pagini </B> <BR>
(stil intern: fundal rosu;stil pagina:bleu; extern:italic fundal cyan)
<LI><B>In fisiere externe </B> <BR>
(stil pagina:bleu; extern:italic fundal cyan)
</OL>
<BODY> </HTML>
Fişier extern: cascada.css

OL{font-style:italic;background:cyan;}
A{background:green;
18
IV. PHP- HYPERTEXT PRE PROCESSOR
Noţiuni de bază
PHP este prescurtarea de la Hypertext Pre Processor. Spre deosebire de paginile HTML
care puteau fi verificate si pe calculatorul local, paginile PHP nu pot fi verificate decît dacă sunt
găzduite pe un server web care are instalat PHP.
Cînd accesam o pagina HTML serverul care o găzduieste trimite pagina HTML către
browser spre afisare.În cazul unei pagini PHP serverul citeste codul PHP, îl înterpretează şi
generează dinamic pagina HTML care este trimisă browserului spre afişare. Acesta este motivul
pentru care utilizatorii folosesc PHP pentru construirea unor pagini cu continut dinamic.
Fisierele PHP au extensia php. Puteti scrie astfel de fisiere cu Notepad sau cel mai indicat
cu un editor specializat, care va indica şi numărul liniilor, lucru util la depanarea scripturilor.
Verificaţi dacă nu aveţi extensiile ascunse (My Computer -> Tools -> Folder Options -> View ->
debifaţi Hide extensions for known file types). Pentru a putea crea fişiere php, daţi clic dreapta
New -> Text Document, apoi îl redenumiţi nume.php.
Cînd PHP-ul parcurge un fişier de fapt "citeşte" textul pînă cînd întîlneşte una din etichetele
speciale care-i spun să înceapă să înterpreteze textul ca pe cod PHP. Se execută codul pînă cînd
este întîlnită eticheta de închidere. Apoi se "citeste" din nou textul mai departe. Acesta este
motivul pentru care se poate adăuga cod PHP în interiorul HTML-ului.
Important:
 închiderea unui rînd se face obligatoriu cu caracterul “; “
 numele funcţiilor nu sunt Case Sensitive (nu se face diferenţa între utilizarea literelor
mari sau mici)
 numele variabilelor sunt Case Sensitive (se face diferenta între utilizarea literelor mari
sau mici)
 ghilimelele se folosesc pereche "..." sau '...', folosirea lor "...' sau '..." constituie o eroare
Codul PHP este delimitat de unul din urmatoarele seturi de etichete de deschidere si
închidere:
<?php ?> etichete recomandate

<script language="php"?> </script>
<? ?> folosirea lor necesita anumite setari pe server
<% %> etichete tip ASP, folosirea lor necesita anumite setari pe
server
19
Exemplu: cel mai simplu script PHP este:
<?php
echo "Acesta este un script PHP";
?>
Dacă veţi verifica funcţionarea acestui script pe un server veţi vedea ca este afişat textul
delimitat de ghilimele.Functia echo este folosită pentru afişarea informaţiilor delimitate de
ghilimele. Nu uitaţi să închideţi rîndul cu „;”. Similar funcţiei echo este functia print.
În situaţia în care scriptul nu este scris corect PHP-ul va afişa eroarea indicîndu-vă şi locul
unde aceasta apare. Erorile sunt afişate doar dacă serverul este setat corespunzator (în php.ini
este setat display_errors=On si error_reporting=E_ALL).
Exemplu: în interiorul scriptului puteţi însera si etichete HTML
<?php
echo "Acesta este un script <b>PHP</b><br>care conţine şi etichete HTML";
?>
Exemplu: fişierul PHP poate conţine între etichetele <html> şi </html> blocuri PHP
delimitate de <?php ?>
<html>
<head><title>Exemplu0_3</title>
</head>
<body>
Bloc HTML<br>
<?php
echo "Bloc PHP";
?>
</body>
</html>
În PHP sunt trei metode prin care se poate adauga un comentariu, evident neafişat în
browser, cu scopul de a adauga informaţii necesare programatorului.Tot ce urmeaza dupa
caracterele // sau # este considerat comentariu.
20
De exemplu:
// Urmează un comentariu in PHP
# Urmează un comentariu in PHP
Utilizare:
echo "test"; // browser-ul va afişa test
echo "proba"; # browser-ul va afişa proba
Un comentariu format din mai multe linii este încadrat de /* şi */.
De exemplu:
/* Comentariul in PHP
scris pe doua linii */
Acest tip de comentariu poate fi folosit şi pentru ignorarea unor blocuri PHP. În exemplul
următor browserul va afişa doar proba
/* echo "Tutorial";
echo "PHP"; */
echo "proba";
21
V. JavaScript
Notiuni de baza
Limbajul JavaScript a fost creat de firma Netscape. Spre deosebire de Java, care este un
limbaj compilat (programele sunt compilate pe server şi executate apoi local pe calculatorul
client), JavaScript este un limbaj interpretat ( interpretarea limbajului se face de către
browsere, care au încorporate un interpretator ce analizează instrucţiunile JavaScript şi le
execută pe calculatorul client). Limbajele interpretate sunt mai simple decît cele compilate şi
mai uşor de invăţat. De asemenea, modificarea şi depănarea este mult mai uşor de realizat
pentru că nu mai este nevoie de compilare de fiecare dată. Spre deosebire de scripturile CGI,
care se execută pe calculatorul gazdă (server), script-urile JavaScript sunt încărcate de pe
server pe calculatorul local. Interpretatorul va decodifica instrucţiunile script-urilor şi le va
executa la momentul potrivit: la încărcarea paginii pe server, la apăsarea unui buton, la
mişcarea mouse-ului, etc. Script-urile JavaScript fac parte din codul sursă HTML al paginilor
Web, dîndu-le acestora un aspect dinamic, interactiv şi mult mai atractiv. Acest lucru însa are
un mare dezavantaj - aceste script-uri pot fi copiate, modificate şi reutilizate. În cazu applet-
urilor Java nu apare această problemă, întrucat codul sursă al acestora nu este transferat de pe
server pe calculatorul client. Ambele limbaje crează aplicaţii independente de platformă pe
care se execută. Programele Java sunt executate de maşina virtuală Java, iar script-urile de
către interpretator, ambele fiind incluse în navigator. În timp ce Java este un limbaj complex,
orientat obiect, JavaScript este un limbaj mai puţin robust; are foarte multe asemănări cu Java,
însă sintaxa este mai simplă, iar regulile mai puţin complexe. Chiar dacă Java şi JavaScript au
o sintaxă asemănătoare, aceste limbaje sunt folosite în scopuri diferite. Se poate mai degrabă
spune că sunt complementare decît concurente.
5.1. JavaScript (partea de client, server)
Pentru că site-urile web să fie cu adevărat interactive, în afara serviciiilor de navigaţie în

web, trebuie să permită schimburi de informaţii cu utilizatorul. Aceasta se face prin
intermediul progamelor CGI (scripturi). Aceste scenarii sunt de două tipuri :client şi server.
22
1) Scripturile client sunt folosite în general pentru colectarea de date , pentru unele
validări şi pentru îmbunătăţirea aspectului paginii.
2) Scripturile server sunt programe ce stau pe serverul web, prelucrează datele
primite de la client şi pot genera dinamic pagini web trimiţîndu-le înapoi la client. De
asemenea , prin intermediul lor se poate obţine acces la baze de date. Aceste scripturi server
se găsesc într-un director /cgi-bin aflat pe nivelul imediat inferior directorului ce conţine
programul server.
5.2. Caracteristicile JavaScript
Caracteristici JavaScript:
a) este un limbaj pentru crearea de scenarii atît pentru partea de client cît şi pentru
cea de server;
b) are o sintaxă asemănătoare limbajului C;
c) a fost implementat începînd cu versiune 2.0 a programului Netscape Navigator;
d) avantajul este că nu necesită compilator;
e) scenariile JavaScript sunt executate de către browser;
f) instrucţiunile JavaScript sunt incluse în cadrul unui document HTML;
g) cu JavaScript, paginile devin "inteligente", deoarece răspund la acţiuni ale
utilizatorului (mouse, tastatură).
5.3. Prezentarea generala
JavaScript oferă posibilitatea de a crea pagini mai interactive, pagini care-şi modifică
conţinutul în funcţie de ce vrea programatorul, pagini mai spectaculoase, pagini care nu au
acces la HDD şi, nu în ultimul rînd, pagini care nu au auzit de baze de date. Vă las pe voi să
evaluaţi care sunt avantajele şi care sunt dezavantajele. Dar... ce nu face JavaScript face PHP.
Înainte de a vedea cum înserăm liniile de JavaScript în documentul HTML vă prezint cîteva
reguli de bază:
a) JavaScript este case sensitive;
23
b) sintaxa este asemănătoare cu a C++;
c) este orientat pe obiecte.
Inserarea liniilor JavaScript în documentele HTML se poate face în mai multe feluri:
a) prin folosirea tagului <SCRIPT> al HTML;

Tag-ul <SCRIPT> este un tag al HTML şi poate cuprinde un număr nelimitat de linii
JavaScript. Se foloseşte în felul următor:
<SCRIPT language=” JavaScript”>

...linii JavaScript...
</SCRIPT>
Un document HTML poate conţine mai multe tag-uri <SCRIPT>. Atributul language
poate specifica versiunea de JavaScript:
<SCRIPT language=”JavaScript1.0”>
b) prin specificarea fişierului cu comenzi JavaScript;

Putem specifica fişierul de inclus prin intermediul atributului src al tagului <SCRIPT>.
De exemplu:
<HEAD>
<SCRIPT src=”fişier.js”>
...
</SCRIPT>
</HEAD>
Acest procedeu este util mai ales cînd folosim aceleaşi funcţii în mai multe pagini.
Liniile de comenzi introduse între <SCRIPT> şi </SCRIPT> sunt ignorate dacă nu apare vreo
eroare la deschiderea fişierului “fişier.js” specificat. În cazul unei erori se vor executa liniile
introduse în cadrul tagului.
Fişierele JavaScript externe nu pot conţine decît linii JavaScript şi definiţii de funcţii.
Este recomandat ca fişierul JavaScript sa aibă extensia .js. Folosirea expresiilor JavaScript ca
valoare a atributelor HTML. Folosind entităţile JavaScript putem specifica o expresie
JavaScript ca valoare a unui atribut HTML. Valoarea entităţii este evaluată dinamic. În acest
24
fel putem construi pagini HTML flexibile, pentru ca atributul unui element HTML depinde de
o informaţie plasată undeva în pagină.
Ca şi entităţile HTML, entităţile JavaScript încep cu caracterul “&” şi se termină cu

caracterul ”;”. În plus entitatea JavaScript este încadrată între acolade. Ex.:
<HR width=”&{barWidth};%”>
unde, barWidth este o variabilă JavaScript şi reprezintă lăţimea liniei orizontale în
procente.
c) prin includerea de expresii JavaScript în atributele HTML;

d) prin funcţii de gestionare a evenimentelor.
25
Concluzii:
În acestă teză am încercat să definesc şi să descriu cele mai folosite instrumente de creare a
paginilor web. Am descris principalele particularităţi ale acestor limbaje, am demonstrat cum ele
functionează şi puţin le-am comparat.
Dacă ar fi să trag o linie şi să aleg limbajul cel mai potrivit pentru a crea o pagina web bună, le-
aş alege pe toate. Pentru că dacă vrei să faci un site bun, care să fie interesant pentru cititor, şi
care să atraga privirea anume asupra lui, din restul milioanelor de site-uri, atunci fară ca să
combini toate aceste limbaje nu ai dai rezultate bune.
Codul HTML este foarte uşor de memorat şi foarte uşor de lucrat cu el, insa paginile create
numai cu HTML sunt plictisitoare. Crearea unor pagini cu ajutorul DHTML cere mai multe
cunostinte, e un limbaj mai greu, dar şi faptul ca DHTML nu e standardizat după toate browser-
ele, cere programatorului să creeye pentru fiecare browse pagini cu cod aparte. Însă avantajul
DHTML este în multitudinea de efecte ce pot fi realizate.
În general totul depinde de fiecare în parte, de gusturile şi nevoile fiecaruia, fie vrei un site
simplu, fie vrei ceva special care sa uimească, oricare ar fi alegerea, instrumente de creare sunt, e
nevoie doar de dorinţă şi de entuziasm.
26
Bibliografie:
1. Florentina Rodica Niculescu “Proiectarea paginilor Web – HTML, CSS, JavaScript” –

Bucureşti, Editura Fundaţiei România de Mâine, 2007
2. Teodoru Gugoiu , “HTML, XHTML, CSS Şi XML “-Editura Teora, 2005
3. Tudor Sorin, Vlad Huţanu, Crearea şi programarea paginilor Web
HTML+CSS+JavaScript+Photoshop+PHP, Editura L&S Soft, 2006
4. Dave Taylor, Crearea paginilor Web cu HTML 4, Editura Teora 1999
5. http://www.w3schools.com/ (accesat 15.12.2013 )
6. http://www.wikipedia.org/ ( accesat 19.03.2014 )
7. http://www.jquery.com/ ( accesat 25.03.2014 )
8. http://www.ruseller.com/ ( accesat 17.04.2014
27
V. ANEXA 1
1.Codul sursă a paginii index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Business Solutions</title>
<link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8" />

</head>
<body>
<div id="header">
<a href="index.html" id="logo"><img src="images/logo.jpg" alt="LOGO" /></a>
<div id="navigation">
<ul>
<li class="first selected"><a href="index.html">Acasa</a></li>
<li><a href="about.html">Despre noi</a></li>
<li><a href="services.html">Servicii</a></li>
<li><a href="solutions.html">Solutii</a></li>
<li><a href="support.html">Suport</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contacte</a></li>
</ul>
</div>
<div id="search">
<form action="" method="">
<input type="text" value="Search" class="txtfield"
onblur="javascript:if(this.value==''){this.value=this.defaultValue;}"
onfocus="javascript:if(this.value==this.defaultValue){this.value='';}" />
<input type="submit" value="" class="button" />
28
</form>
</div>
</div> 
<div id="adbox">
<div class="body">
<div class="images">
<img src="images/discussing2.jpg" alt="Img" class="preview" />
<img src="images/shake-hands.jpg" alt="Img" height="144"
width="230px" />
<img src="images/professionals.jpg" alt="Img" height="135"
width="230px" class="last" />
</div>
<div class="details">
<p>
<span>
<a> Profil</a>
</span>
<b>Bussines Solutions</b> ofera servicii de consultanta în
afaceri pentru companiile publice si private. Suntem cunoscuti si apreciati pentru calitatea
serviciilor si produselor, pentru practicile performante si strategiile eficiente de lansare, relansare
sau gestionare a afacerilor.
</p>
</div>
</div>
<div class="footer">
<ul>
<li class="selected">
<a href="index.html"><img src="images/meeting2.jpg"
alt="Img" /></a>
<p>
<a href="index.html">Proiectul „Sporirea
competitivitatii prin sinergia umana în regiunea transfrontaliera”.</a><br/>
</p>
29
</li>
<li>
<a href="index.html"><img src="images/flags2.jpg"
alt="Img" /></a>
<p>
<a href="index.html">Proiecte europene pentru
Republica Moldova.</a><br/>
</p>
</li>
<li>
<a href="index.html"><img src="images/boys.jpg"
alt="Img" /></a>
<p>
<a href="index.html">Oferta de angajare: expert în
domeniul serviciilor de consultanta.</a><br/>
</p>
</li>
</ul>
<span class="bottom-shadow"></span>
</div>
</div> 
<div id="contents">
<div class="body">
<div id="sidebar">
<h3>Blog</h3>
<ul>
<li>
Proiect european pentru cresterea competitivitatii
regiunii transfrontaliere România-Ucraina-Republica Moldova
<span>Sept. 21 | by Andrei<a
href="blog.html">8</a></span>
</li>
30
<li>
Strategia orasului Orhei a fost finalizata si discutata
în cadrul audierilor publice
<span>Sept. 21 | by Andrei <a
</li>
<li>
Etapa încheiata în cadrul proiectului UE
implementat la Orhei si Telenesti
</li>
<li>
Epoca descentralizarii sau sfâr?itul unei reforme
neîncepute
</li>
<li>
Oferta de angajare: business consultant junior la
Terwel BV
</li>
</ul>
</div>
<div id="main">
<span>Efectuam analize, audituri, studii de piata si sondaje.
Elaboram programe si strategii de dezvoltare, planuri de afaceri, studii de fezabilitate, proiecte
de investitii. Prestam o gama larga de servicii conexe. Organizam traininguri de planificare
strategica, elaboram proiecte, furnizam consultanta în management, marketing si finante.</span>
<ul>
<li>
<a href=""><img src="images/globe.jpg"
31
alt="Img" /><h3>Noutati si Evenimente</h3></a>
<p></p>
</li>
<li>
<a href=""><img src="images/tools.jpg"
alt="Img" /><h3>Solutii Bussines-to-Bussines</h3></a>
<p></p>
</li>
<li>
<a href=""><img src="images/check.jpg"
alt="Img" /><h3>Publicatii </h3></a>
<p></p>
</li>
<li>
<a href=""><img src="images/graph.jpg"
alt="Img" /><h3>Buletuin informativ</h3></a>
<p></p>
</li>
</ul>
<p><b>Misiune:</b>
Bussines Solutions urmareste sa mobilizeze eforturile consultantilor profesionisti în
implementarea metodelor moderne de gestionare a afacerilor publice si private, sa contribuie la
îmbunata?irea activita?ii administra?iei centrale si locale în contextul schimbarilor structurale
din Republica Moldova.<a></a>.</p>
</div>
</div>
</div> 
<div id="footer">
<ul class="contacts">
<h3>Contacte</h3>
<li><span>Email</span><p>: Bussinessolution@email.com</p></li>
<li><span>Addresa</span><p>: Stefan cel Mare 110/4</p></li>
<li><span>Phone</span><p>: 0222-440-666</p></li>
</ul>
32
<ul id="connect">
<h3>Get Updated</h3>
<li><a href="blog.html">Blog</a></li>
<li><a>Facebook</a></li>
<li><a>Twitter</a></li>
</ul>
<div id="newsletter">
<p><b>Logati-va</b>
Pentru a beneficia de mai mula informatie.
</p>
<form action="" method="">
<input type="text" value="Name" class="txtfield"
<input type="text" value="Enter Email Address" class="txtfield"
<input type="submit" value="" class="button" />
</form>
</div>
<span class="footnote">© Copyright © 2014. All rights
reserved</span>
</div> 
</body>
</html>
33
Codul sursa a paginii de stiluri style.css
/* Website template by freewebsitetemplates.com */

html {
font-family: Arial, Helvetica, sans-serif;
}
body {
background-color: #0c2635;
margin: 0;
}
img {
border: 0;
}
/*------------------------------ HEADER ------------------------------*/

#header {
width: 960px;
margin: 0 auto;
padding: 40px 0;
position: relative;
}
/** Logo **/

#logo {
display: block;
padding: 0 0 35px 20px;
}
/** Navigation **/

#navigation {
background: url(../images/bg-menu-left-curve.gif) no-repeat left bottom;
height: 47px;
padding: 13px 0 0 4px;
position: absolute;
34
bottom: -20px;
left: 0;
}
#navigation ul {
background: url(../images/bg-menu.gif) repeat-x;
display: inline-block;
height: 40px;
width: 688px;
list-style: none;
margin: 0;
padding: 4px 0 3px;
}
#navigation li {
float: left;
font-size: 16px;
line-height: 40px;
margin: 0 5px;
text-align: center;
}
#navigation li.first {
margin-left: 0;
}
#navigation li.selected {
background-color: #b7c2c8;
}
#navigation a {
color: #092f44;
font-weight: bold;
padding: 0 10px;
text-decoration: none;
text-shadow: 1px 1px 0 #eaeaea;
}
#navigation a:hover {
35
color: #0a2d43;
}
/** Searchbar **/

#search {
background: url(../images/bg-search.gif) no-repeat right bottom;
height: 47px;
width: 268px;
padding: 13px 0 0;
position: absolute;
bottom: -20px;
right: 0;
}
#search form {
margin: 0;
padding: 5px 4px 4px;
}
#search input {
float: left;
line-height: 38px;
}
#search .txtfield {
color: #6e6e6e;
font-size: 15px;
font-style: italic;
height: 38px;
width: 234px;
border: 0;
margin: 0;
padding: 0;
}
#search .button {
background: url(../images/spotlight.gif) no-repeat right center;
36
border: 0;
cursor: pointer;
height: 38px;
width: 20px;
margin: 0;
padding: 0;
}
/** Adbox **/

#adbox {
background-color: #ffffff;
height: 340px;
padding: 20px 0 0;
}
#adbox p {
margin: 0;
}
#adbox .body {
width: 960px;
margin: 0 auto 0;
}
#adbox div.images {
float: right;
height: 281px;
width: 710px;
overflow: hidden;
}
#adbox div.images img.preview {
float: left;
margin-right: 2px;
}
#adbox div.images img.last {
position: relative;
37
top: -2px;
}
#adbox .details {
color: #2f2f2f;
height: 200px;
width: 200px;
padding: 40px 20px 40px 10px;
}
#adbox .details p {
color: #646c6f;
font-size: 14px;
line-height: 20px;
text-align: justify;
}
#adbox .details p span {
color: #073f5a;
display: block;
font-size: 16px;
line-height: 20px;
padding: 0 0 20px;
text-align: center;
}
#adbox .details p span a {
color: #073f5a;
font-weight: bold;
}
#adbox .footer {
height: 46px;
width: 960px;
margin: 0 auto;
position: relative;
}
#adbox div.footer ul {
38
background-color: #dcdcdc;
width: 960px;
list-style: none;
margin: 0 auto;
border-radius: 3px;
padding: 0;
position: absolute;
bottom: -80px;
}
#adbox div.footer ul li {
float: left;
width: 280px;
padding: 20px 20px 18px;
}
#adbox div.footer ul li img {
float: left;
margin-right: 10px;
}
#adbox div.footer ul li p {
color: #363636;
font-size: 14px;
height: 88px;
line-height: 20px;
margin: 0;
}
#adbox div.footer ul li p a {
color: #010101;
font-weight: bold;
}
#adbox div.footer ul li.selected {
background-color: #e9f1f4;
border-radius: 3px;
39
}
#adbox div.footer ul li.selected p, #adbox div.footer ul li.selected p a {
color: #5c6164;
}
#adbox div.footer span.bottom-shadow {
background: url(../images/bottom-shadow.gif) no-repeat left top;
display: block;
height: 20px;
width: 960px;
position: absolute;
bottom: -100px;
}
/*------------------------------ CONTENTS ------------------------------*/

#contents {
background: url(../images/bg-content.gif) repeat;
padding: 40px 0 20px;
}
#contents div.body {
color: #fdfffa;
width: 960px;
margin: 0 auto 20px;
}
/** MAIN **/

#main {
background-color: #03354e;
width: 630px;
margin: 60px 10px 0 300px;
padding: 20px 0 20px 20px;
}
#main span, #main p {
color: #aeb4b4;
font-size: 14px;
40
line-height: 20px;
margin: 0;
padding-right: 20px;
}
#main span {
color: #fdfffa;
font-size: 16px;
}
#main p a {
color: #aeb4b4;
font-weight: bold;
}
#main span a {
color: #fdfffa;
font-weight: bold;
}
#main ul {
list-style: none;
height: 355px;
margin: 0;
padding: 0;
}
#main ul li {
float: left;
width: 315px;
}
#main ul li a {
color: #fdfffa;
display: block;
height: 114px;
41
margin: 0 40px 0 0;
}
#main ul li img {
float: left;
}
#main ul li h3 {
margin: 0;
line-height: 25px;
padding-top: 35px;
}
#main ul li p {
clear: both;
padding: 6px 40px 20px 0;
}
/** SIDEBAR **/

#sidebar {
float: left;
width: 270px;
margin: 0;
padding: 20px 20px 0 10px;
}
#sidebar h3 {
font-size: 16px;
font-weight: bold;
margin: 0 0 20px;
}
#sidebar ul {
list-style: none;
height: 420px;
margin: 0;
padding: 0;
}
42
#sidebar ul li {
font-size: 14px;
line-height: 20px;
padding-bottom: 10px;
}
#sidebar ul li span {
color: #456d87;
display: block;
font-size: 12px;
line-height: 20px;
margin-bottom: 10px;
}
#sidebar ul li span a {
background: url(../images/bg-comment.gif) no-repeat 7px 3px;
color: #fffffb;
height: 20px;
width: 20px;
padding-left: 12px;
}
/*------------------------------ About us page ------------------------------*/

#contents .background {
background-color: #ffffff;
line-height: 20px;
min-height: 960px;
width: 920px;
border-radius: 3px;
margin: 0 auto;
padding: 20px;
}
#contents div.background h3 {
43
color: #0e2934;
margin: 20px 0;
text-transform: uppercase;
}
#contents div.background p {
color: #646c6f;
font-size: 14px;
margin: 0;
padding: 0 0 20px;
}
#contents div.background p a {
color: #0e2934;
font-weight: bold;
}
#contents div.background p b {
display: block;
margin: 20px 0;
}
/*------------------------------ Blog Page ------------------------------*/

#blogs {
}
#blogs div.section h3, #blogs div.sidebar h3 {
margin: 0 0 20px;
text-transform: none;
}
#blogs div.section h3 a {
color: #0e2934;
}
44
#blogs div.sidebar {
float: right;
width: 270px;
}
#contents #blogs div.sidebar ul li a {
color: #646C6F;
}
#contents #blogs div.sidebar ul li a:hover {
color: #0e2934;
}
#blogs div.posts {
margin: 0 0 40px;
}
#blogs div.posts ul {
margin: 0;
padding: 0 0 0 20px;
}
#blogs div.posts ul li {
}
#contents #blogs div.archives ul {

list-style: none;
margin: 0;
padding: 0;
}
#contents #blogs div.archives ul li {
float: left;
width: 135px;
line-height: 30px;
45
}
#blogs div.section {
margin-right: 300px;
}
/*------------------------------ Contact us Page ------------------------------*/

#contents div#contacts ul {
list-style: none;
margin: 20px 0;
padding: 0;
}
#contents div#contacts ul li {
width: 450px;
}
#contents div#contacts ul li p b {
margin: 0;
text-transform: none;
}
#services span, #solutions span, #support span {

color: #0e2934;
display: block;
font-size: 17px;
font-weight: bold;
line-height: 20px;
margin: 0 0 20px;
}
#services span a, #solutions span a, #support span a {
color: #0e2934;
}
46
/*------------------------------ Services Page ------------------------------*/
#services p {
clear: both;
}
#services img {
float: left;
margin: 0 40px 20px 0;
}
#services ul {
color: #646c6f;
padding: 0;
}
#services ul li {
font-size: 14px;
line-height: 20px;
padding: 0 0 20px;
}
/*------------------------------ Solutions Page ------------------------------*/

#solutions ul {
color: #646c6f;
margin: 0 0 0 15px;
padding: 0;
}
#contents #solutions ul li p b {
margin: 0 0 20px;
}
/*------------------------------ Support Page ------------------------------*/

#support {
padding: 20px 30px 0 10px;
}
#support ul {
47
color: #646c6f;
list-style: none;
margin: 20px 0;
padding: 0 20px;
}
#support ul li {
padding: 0 0 20px;
}
#support ul li img {
float: left;
margin-right: 20px;
}
#contents #support ul li p {
margin: 0 0 0 116px;
}
#contents #support ul li p b {
color: #0e2934;
margin: 0 0 20px;
}
/*------------------------------ FOOTER ------------------------------*/

#footer {
color: #456f7f;
line-height: 20px;
width: 940px;
margin: 0 auto;
padding: 20px 10px;
}
#footer ul.contacts {
float: left;
font-size: 12px;
list-style: none;
width: 300px;
48
margin: 0;
padding: 0 0 10px;
}
#footer ul.contacts h3 {
font-size: 14px;
margin: 0 0 10px;
}
#footer ul.contacts li span {
float: left;
width: 50px;
}
#footer ul.contacts li p {
margin: 0 0 0 50px;
}
#connect {
float: left;
list-style: none;
width: 140px;
margin: 0;
padding: 0;
}
#connect h3 {
font-size: 14px;
margin: 0 0 10px;
}
#connect li {
padding: 0 0 5px;
}
#connect li a {
color: #456f7f;
font-size: 15px;
49
}
#newsletter {
float: left;
width: 500px;
padding: 0 0 20px;
}
#newsletter p {
font-size: 12px;
margin: 0;
}
#newsletter p b {
display: block;
font-weight: 800;
margin: 0 0 10px;
}
#newsletter form {
margin: 4px 0 16px;
}
#newsletter .txtfield {
background: url(../images/input.gif) no-repeat;
color: #9c9c9c;
height: 25px;
line-height: 25px;
width: 200px;
border: 0;
margin: 0 6px 0 0;
padding: 0 10px;
}
#newsletter .button {
background: url(../images/button-check.gif) no-repeat;
cursor: pointer;
50
height: 25px;
width: 25px;
border: 0;
padding: 0;
}
#footer span.footnote {
clear: both;
display: block;
font-size: 12px;
margin: 40px 0 0;
text-align: center;
}
/*------------------------------ For IE6 ------------------------------*/
51
Anexa 2
1. Screenshot-uri a pagini web
52
53
54

Teza

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Teza

Încărcat de

Drepturi de autor:

Formate disponibile

UNIVERSITATEA DE STAT DIN MOLDOVA

FACULTATEA DE FIZICĂ ŞI INGINERIE

CATEDRA FIZICĂ APLICATĂ ŞI INFORMATICĂ

Descrierea comparativa a instrumentelor de creare a paginilor web

Șef Catedră : _________

Conducător Științific: _______ Sprînean Veaceslav, lector superior universitar.

1.1. Elementele de structură: HTML, HEAD şi BODY.................................................................- 4 -

1.1.1. Blocul de antet <HEAD>…</HEAD>............................................................................- 5 -

1.1.1.a. Elementul TITLE.......................................................................................................- 5 -

1.1.1.b. Elementul BASE........................................................................................................- 5 -

1.1.1.c. Elementul META.......................................................................................................- 5 -

1.1.2. Blocul de corp <BODY>…</BODY>.............................................................................- 8 -

Partea III CSS-Cascading Style Sheets.........................................................................................- 11 -

3. Întroducere în modelele de stiluri......................................................................................- 11 -

3.1. Stiluri interne (in-line)......................................................................................................- 11 -

3.2. Foi de stil în pagină..........................................................................................................- 13 -

3.3. Foi de stil externe............................................................................................................- 15 -

3.4. Stiluri în cascadă...............................................................................................................- 16 -

5.1. JavaScript(partea de client, server).................................................................................- 21 -

5.2. Caracteristicile JavaScript................................................................................................- 22 -

5.3. Prezentarea generala......................................................................................................- 22 -

 Să animeze textul şi imaginile în documentul lor,acesta se poate deplasa independent din

CSS constituie un instrument avansat de formatare a oricărui marcaj HTML, în vederea

HTML (HyperText Markup Language ) este limbajul predominant în crearea paginilor

1.1. Elementele de structură: HTML, HEAD şi BODY

1.1.1.a. Elementul TITLE

1.1.1.b. Elementul BASE

1.1.1.c. Elementul META

 Name – cu valorile posibile:

Descrierea unei pagini (fişier html).

II. DHTML- DYNAMIC HYPERTEXT MARKUP LANGUAGE

O aplicare foarte frecventa a tehnologiei DHTML se întâlnește la crearea meniurilor, care nu

DHTML permite autorului să adauge efecte pe paginilă. De exemplu, DHTML permite

 Să animeze textul şi imaginile în documentul lor,acesta se poate deplasa independent din

 Să utilizeze un formular pentru a captura date introduse de utilizator, şi apoi să le

 Să includă butoane rollover sau meniuri drop-down.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

Întroducere în modelele de stiluri

CSS constituie un instrument avansat de formatare a oricărui marcaj HTML, în vederea

3.1. Stiluri interne (in-line)

În capitolele precedente am definit elementele HTML împreună cu atributele lor specifice,

Exemple de declaraţii de stil :

3.2. Foi de stil în pagină

<HEAD> <STYLE type=”text/css”>

3.3. Foi de stil externe

Codul fişierului stil-extern.css este:

Codul html care se va lega la acest fişier va fi:

Fişier extern: cascada.css

<?php ?> etichete recomandate

5.1. JavaScript (partea de client, server)

Pentru că site-urile web să fie cu adevărat interactive, în afara serviciiilor de navigaţie în

5.2. Caracteristicile JavaScript

5.3. Prezentarea generala

a) JavaScript este case sensitive;

a) prin folosirea tagului <SCRIPT> al HTML;

<SCRIPT language=” JavaScript”>

b) prin specificarea fişierului cu comenzi JavaScript;

Ca şi entităţile HTML, entităţile JavaScript încep cu caracterul “&” şi se termină cu

c) prin includerea de expresii JavaScript în atributele HTML;

1. Florentina Rodica Niculescu “Proiectarea paginilor Web – HTML, CSS, JavaScript” –

1.Codul sursă a paginii index.html

/* Website template by freewebsitetemplates.com */

/*------------------------------ HEADER ------------------------------*/

/------------------------------ HEADER ------------------------------/

/ Logo /

/ Navigation /

/ Searchbar /

/ Adbox /

/------------------------------ CONTENTS ------------------------------/

/ MAIN /

/ SIDEBAR /

/------------------------------ About us page ------------------------------/

/------------------------------ Blog Page ------------------------------/

/------------------------------ Contact us Page ------------------------------/

/------------------------------ Solutions Page ------------------------------/

/------------------------------ Support Page ------------------------------/

/------------------------------ FOOTER ------------------------------/

/------------------------------ For IE6 ------------------------------/