COLEGIUL TEHNIC GHEORGHE ASACHI, BUCURE ȘTI [619518]

COLEGIUL TEHNIC „GHEORGHE ASACHI”, BUCURE ȘTI
PROIECT
realizat în vederea obținerii certificatului de calificare profesională nivel 5,
Calificare: ANALIST PROGRAMATOR
ÎNDRUMĂ TOR, Absolvent: [anonimizat]. Cîmpeanu Silvia Slovineanu Cristina Valentina
București, 2017

2
COLEGIUL TEHNIC „GHEORGHE ASACHI”

WEBSITE
de informare, organizare și administrar e
a unei Asociații de Proprietari

realizat în vederea obținerii certificatului de calificare profesionala nivel 5,
Calificare Analist Programator

ÎNDRUM ĂTOR, Absolvent: [anonimizat]. Cî mpea nu Silvia Slovineanu Cristina Valentina

Bucuresti, 2017

3
1. INTRODUCERE

Noțiunea de website desemnează o grupă de pagini web multimedia (conținând
texte, imagini fixe, tabele, animații ș.a.), accesibi le în Internet de oricine. Website -urile
sunt de obicei pe o temă anume, și constau î ntr-o colecție de pagini web conectate între ele
prin așa -numitele hiperlink -uri. Un website alcătuit din mai multe pagini are de obicei o
pagină inițială sau principală n umită homepage (indexul în html), de la care pleacă legături
către paginile interioare, secundare. Structurile și schemele de „navigare” din interiorul
website -urilor sunt foarte diferite, în funcție de scopurile, dorințele și posibilitățile
administratoru lui website -ului. De obicei această homepage este chiar pagina de start a
website -ului, punctul de plecare pentru întregul website.

Website -urile se pot clasifica după o mulțime de factori, dar principalul factor
rămâne subiectul de activitate (sau conți nutul) website -ului. Din punct de vedere
tehnologic un website poate fi alcătuit din orice tipuri de date și informații statice, camere
de discuții, produse și servicii de vânzare, anunțuri, formulare de completat online, clipuri
video, imagini statice și animate, meniuri dinamice și multe altele. Astfel, tema unui
website poate fi: un blog, portal web, catalog web, magazin virtual, bancă, universitate
virtuală, bibliotecă, enciclopedie virtuală, revistă web, ziar web și aproape orice altceva.
Dacă la încep ut nu s -a pus accent prea mare pe latura estetică, aceasta a că pătat o
importanță deosebită și i se acordă din ce în ce mai multă atentie, primâ nd acum nu numai
conținutul de informații al unui website, dar și estetica, dinamica și atractivitatea acestuia.

Un portal este un website ce cuprinde informaț ii obținute din diverse surse, î ntr-o
manieră unificată (adică funcționează ca un „nod comunicați onal‟). De obicei, fiecare sursă
de informații beneficiază de o zonă distinctă în pagină pentru afișarea inform ațiilor.
Adesea, utilizatorul alege zona pe care dorește să o afișeze. În afară de caracteristica
standard reprezentată de motoarele de căutare, portalurile web oferă o multitudine de alte
servicii, cum ar fi e -mail, noutăți, grafice sau diverse alte infor mații ce pot fi cuprinse în
baze de date. Portalurile web reprezintă o modalitate de a avea control deplin asupra
accesării tuturor aplicațiilor și multiplelor baze de date, ordonate și corelate între ele prin
intermediul portalului și care altfel ar fi fo st entități total distincte. Portalurile web pot
apărea sub mai multe forme, cum ar fi Encicopedii Online, website -uri Academice,
website -uri de Administrare, website -uri dedicate pentru E -learning. Exemple de portaluri

4
web: AOL, iGoogle, MSN, Netvibes, Ya hoo! În România,cel mai cunoscut exemplu pentru
un portal web complex este website -ul Ministerului Educației: www.edu.ro.

În vederea dezvoltării temei propuse într -o aplicație informatică, am decis
realizarea și im plementarea unui website care să vizeze administrarea și organizarea
unei Asociații de Proprietari a unui Bloc , website cu o serie de module, atât comune
(prezentare, legislație, cal cule, liste, suport, consultanță ș.a.m.d.), cât și specifice (o
secțiune pentru cote de întreținere și plăți, spre exemplu).

1.1. Necesitatea asociațiilor de proprietari și a prezenț ei lor în on-line

Asociația de Proprietari este forma juridică de organizare și de reprezentare a
intereselor comune ale proprietarilor unui condominium, recunoscut ă de lege. Prin
condominiu m, clădire sau bloc de locuințe se înțelege o proprietate imobiliara formată din
apartamente sau spatii cu altă destinație decât aceea de locuință (proprietatea individual ă)
și proprietatea comună indiviza, aferentă în cota-parte fiecăreia dintre proprietă țile
individuale și de care nu poate fi separată . Asociațiile de Proprietari se constituie în
principiu pentru simplitatea și eficienț a managerială a condominimului.

Cu excepția aspectului privind necesitatea înființării Asociației de Proprietari ca
oblig ație a proprietarilor pentru propria lor proprietate, aceasta unic ă formă de organizare
mai conferă și următoarele avantaje, unele stabilite prin prevederi legale (avantaje ilustrate
și în prima pagină a website -ului – și care ar putea fi utilizate în vede rea elaborării de noi
module, plă ți online, suport pentru diverse aplicații sau în relație cu instituțiile statului, și
de ce nu o platformă on -line de gestiune). Printre avantaje enumerăm:

1. Calitatea de persoan ă juridică cu drepturi depline în față or icărei instituții
publice de stat sau private;
2. Scutire de impozit pe veniturile obținute de asociație din închirieri ale spatiilor
comune, din activ itatea econ omică de orice natură etc., în condițiile legii;
3. Scutire la plata T.V.A. pentru activităț ile desfășurate de asociația de proprietari;
4. Scutire la plata taxei judiciare de timbru pentru acțiunile în instant ă împotriva
restanțierilor;
5. Scutire la plata taxei judiciare de timbru pentru acțiunile în instant ă împotriva
furnizorilor de servicii publice (RADET etc.) privind respectarea drepturilor
consumatorilor;

5
6. Privilegiu imobiliar asupra bunurilor mobile și imobile ale restanțierilor, la
judecătorie, astfel înc ât la data vânzării apartamentelor/spa tiilor această operațiune să nu
se poat ă face decât după achitarea datoriilor câtre asociație;
7. Negocierea directa a contractelor de furnizare și intermedierea serviciilor
publice de utilit ăți;
8. Aplicarea unui sistem propriu de penalizări, aducător de venituri,
compensatoare pierderilor, pen tru asociație;
9. Eliminarea fraudelor financiar -contabile și a muncii la "negru";
10. Obținerea de credite avantajoase, cu dobânda subvenționata, pentru lucrări de
reabilitare, consolidare, modernizare;
11. Obținere de finanțări nerambursabile pentru p roiecte în cadrul asociației de
proprietari;
12. Posibilitatea desch iderii de conturi la orice bancă ;
13. Posibilitatea retribuirii tuturor celor care se implica în activitatea practică sau
cu răspundere în cadrul asociației;
14. Posibilitatea inițierii de câtre proprietari a unor afaceri în numele asociației de
proprietari;
15. Aplicarea unor programe sociale de sprijini re a persoanelor cu dificultăți
financiare;
16. Posibilitatea contorizării individuale a consumurilor de apa, gaze etc.;
17. Posibil itatea asociației de a deveni intermediar de servicii publice și colector
de taxe și impozite locale, activit ăți aducătoare de venituri;
18. Posibilitatea concesionarii/închirierii spatiilor verzi din jurul clădirii s.a.

Neasocierea ca proprietari și neînființarea Asociației de Proprietari trag după sine
cel mai mare dezavantaj, și anume afectează modul de reprezentare a proprietarilor în orice
problemă privind proprietatea comună : întreținerea și exploatarea cl ădirii, contracte,
servicii, plă ți, modul de lucru etc. Mai exact, pentru oricare dintre proble mele privind
proprietatea comună , va fi obligatoriu ca toți proprietarii s ă împuternicească, de fiecare
dată, prin procură notarială, o persoană care să le reprezinte interesele. Acest aspect
impune timp și bani din partea proprietarilor. Altfel orice m ăsură luată de o persoan ă fără
acordul legal al proprietarului reprezintă un risc mare pentru aceasta.

Pe de alta parte, obligațiile de plată a cotelor de contribuție la cheltuielile privind
consumurile și cele pentru proprietatea comună nu se elimină, din contră ele pot genera,
din cauza lipsei de organizare, alte cheltuieli; de asemenea obligațiile și responsabilitățile
legale asupra propriei propriet ăți (individual ă + comun ă) sunt aceleași, chiar mai greu de
îndeplinit. Din acest mot iv, proprietarii care nu acceptă ideea asocierii ca proprietari, în
scopul propriei propriet ăți, nu pot beneficia de drepturi materiale și bănești rezultate din
activitățile economice ale asociației de proprietari, altele decât cele privind închirierea

6
spatiilor comune, pentru că aceste drepturi nu le sunt conferite prin nici o formă juridică ;
de asemenea, nu pot avea controlul asupra activității financiare a asociației (contestații,
solicitări rapoarte, dreptul la vot etc.). Tot odată activitatea Asociației de Proprietari se va
desfășura greoi, suferind atât ceilalți proprietari cât și clădirea, generându -se consecințe
asupra propriei proprietăți dificil de remediat, cu costuri foarte mari, existând riscul major
al pierderii, în t imp, a acestei proprietăți. Mai mult, contractele cu furnizorii de servicii vor
rămâne ca și până în prezent, sub forma unor simple formalități, neputându -se progresa
deloc în sensul individualizării și creșterii calității acestor servicii. Exista de aseme nea
riscul ca noi contracte să nu poată fi încheiate, din diverse motive de natura juridica. Deci
în aceste condiții … cine suporta consecințele măsurate în timp și bani? Evident …
proprietarii.

1.2. Implementarea tehnologiilor informației și comunicării î n societate

Dezvoltarea tehnologică rapidă a societății contemporane și în special
dezvoltarea tehnologiei informației și comunicării, ca răspuns la nevoia de informare a
indivizilor, sunt caracteristici fundamentale ale societății secolului XXI, numită și
societate informațională sau societate bazată pe informație. Informația ca resursă deține
prin urmare un loc primordial . Astfel, dezvoltarea infrastructurilor de comunicații,
implementarea unor instrumente software adecvate, crearea de conținut digital,
dezvoltarea abilităților individuale de utilizare și valorificare a informației sunt factori
care fac posibilă f olosirea intensivă a tehnologiilor informatice și de comunicații în
toate sferele activității și existenței umane cu un impact semnificativ la nivel economic
și social. De aici și multitudinea de website -uri din Internet, în continua creștere și cu o
vizibilitate din ce în ce mai mare. Nevoia de on -line și de comunicare virtuala și prin
conținut digital a influențat nu doar mentalit ăți, dar și comunit ăți întregi prin cererea și
oferta în creștere de acest tip de manifestare.

Considerată un eveniment major al secolului XX, atât din punct de vedere
tehnologic cât și social, apariția Internetului este considerată premisa fundamentală a
societății in formaționale. Având la bază inovații de ordin tehnologic, obținute însă în
urma interac țiuni sociale (dintre speciali ști, institu ții, state și un num ăr extrem de mare
de utilizatori din întreaga lume), internetul, prin dezvoltarea sa explozivă, a devenit u n
fenomen a cărui dimensiune socială se manifestă la nivel global. Dacă în esen ță
societatea informa țional ă este „ societatea care se bazeaz ă pe Internet ”, atunci

7
globalizarea trebuie să fie o consecință a Internet -ului și „ un fenomen specific societății
informaționale ”1. în acest sens, termenul de “ comunitate ”, devine mai relevant
termenului de “ sistem ”, deoarece este mai larg răspândit și lasă un spa țiu deschis pentru
înțelegerea naturii umane ca un întreg.

Transformarea și expansiunea explozivă a interne tului au avut loc începând cu
anii 90 prin introducerea în structura sa a unor noi aplicații cunoscute sub denumirea
generică de tehnologie World Wide Web (abreviată www sau numită pe scurt prescurtat
web). Tehnologia web este una din multiplele aplicații ale internetului constituită într –
un sistem de documente și informații de tip hipertext legate ele între ele care pot fi
accesate prin rețeaua mondială de Internet. Documentele postate pe calculatoare -server
aflate în diferite locații pot fi regăsite cu a jutorul unui URI univoc2. Hipertextul este
prelucrat cu un ajutorul unui program de navigare în web numit browser (program de
navigare web) care descarcă paginile web de pe un server web și le afișează pe un
terminal.

Alături de tehnologia web, Internetul înglobează multiple alte servicii – aplicații
cum sunt: afișarea de informații mai mult sau mai puțin statice cu formă de text,
imagini și sunete (așa -numitele pagini web), poșta electronică (e -mail), transferul de
fișiere de date și informații, chat, vid eo și video on demand, telefonie și telefonie cu
imagine prin Internet, televiziune prin Internet, comerț electronic (e-commerce ),
operații bancare ( Internet banking ), transmitere de fișiere, sondări de opinie, mediu
pentru răspândirea știrilor, mediu pent ru toate genurile de grafică și muzică, e -learning,
sesiuni de lucru de la distanță, rețele sociale, forum (grupuri de discuții pe teme
prestabilite), platforme online, suport, jocuri interactive prin rețea, etc. În cadrul acestui
sistem complex de aplicaț ii și servicii care pot fi utilizate prin intermediul unui
program multifuncțional de navigare, tehnologia web ocupă o poziție predominantă
fiind, pe de o parte, o aplicație de tip multimedia cu funcții integrative în raport cu
altele și, pe de altă parte, datorită unei interfețe grafice de utilizare ( graphic user
interface ) practică și simplu de folosit.

1 Mihai Dr ăgănescu, Globalizarea și societat ea informa țional ă, Studiu pentru grupul ESEN II, Academia
Român ă, Bucure ști, februarie, 200 1.
2 URI (abreviere din eng. Uniform Resource Identifier ) reprezintă un identificator alfanumeric univoc și unic
pe lume al unei resurse din Internet, cum ar fi un d ocument sau un sit web. Deseori URI-ul unei resurse este
identic cu URL -ul ei (abreviere de la Uniform Resource Locator ), o formă timpurie a identificatorului.

8
Prin implementarea serviciului web, Internetul a devenit un mediu principal de
informare și comunicare precum și un imens spațiu de stocare a informațiil or. Creșterea
continuă a numărului de utilizatori, echivalentă în fapt cu includerea și participarea
activă a acestora în sfera informației electronice, constituie premisa fundamentală
pentru trecerea la așa numita societate informațională. Caracterul irev ersibil al trecerii
la societatea informațională este dat de intensitatea dezvoltării unor factori determinanți
(tehnologia informației și comunicării, producția multimedia) al căror efect se
amplifică în contextul globalizării.

Dezvoltarea infrastructur ilor de comunicații, dezvoltarea componentelor
hardware, implementarea unor instrumente software adaptate transmiterii informației
și comunicării, apariția și dezvoltarea și diversificarea conținuturilor diverse în format
digital precum și dezvoltarea ab ilităților individuale în utilizarea și valorificarea
informației sunt caracteristici ale societății informaționale.

Internetul s -a dezvoltat ca o adevără industrie care a generat activități conexe
alternative legate de accesul, utilizarea și transmiter ea informațiilor chiar și în
domeniul economic, devenind o imensă piață de desfacere. „Din momentul în care
intervine Internetul cu marile avantaje pe care acesta le aduce (email, comer ț
electronic și tranzac ții electronice, pia ța Internet, distribu ția de conținut) prin
cuprinderea în sfera informa ției electronice a unui num ăr cât mai mare de cet ățeni se
trece la societatea informa țional ă”3. Prin urmare societatea informațională este acea
societate în care producerea și consumul de informație este cel mai i mportant tip de
activitate, informația este recunoscută drept resursă principală, tehnologiile informației
și comunicațiilor sunt tehnologii de bază, iar mediul informațional, împreună cu cel
social devin actualele medii de existență a omului.

Noile tehno logii ale informației și comunicării schimbă perspectiva asupra
practicii sociale și a cooperării. Implementarea acestora fiind considerată de mult drept
o necesitate și o direcție prioritară a politicilor sociale . Cu toate acestea, dinamica
accelerată a s chimbărilor sociale, impactul și amploarea acestor schimbări au impus cu
necesitate restructurări la nivelul comunicării și cooperării sociale, în direcția adaptării
obiectivelor la noile cerințe concrete ale societății secolului XXI.

3 Mihai Dr ăgănescu, Op. Cit. , p. 24 .

9
Dintre multiplele a vantaje oferite de utilizarea noilor tehnologii în scopuri
sociale, amintesc: reducerea consumului de timp în ceea ce privește propria informare,
căutarea și oferirea de suport / intr -ajutorare, sprijinirea inițiativelor, publicarea de
păreri, sfaturi și comentarii, și nu în ultimul rând posibilități extinse de informare și
acomodare rapidă cu schimbările din social, legislativ și diverse domenii la care
individul are acces din ce în ce mai ușor.

Ținând cont de cele relatate mai sus, medierea intre individ , indivizi și societate
a ajuns să se realizeze în mare parte prin noile tehnologii ale informației și comunicării,
datorită amplificării caracterului multimedia al spațiului web, în condițiile unui acces
superior la Internet atât cantitativ (ca număr de p ersoane) dar mai ales calitativ (ca
viteză de transfer). Când vorbim de mediere mă refer la interacțiunea non -fizică/
virtuală (on -line/offline) intre indivizi sau intre individ și instituții /comunit ăți,
interacțiune bazata pe Internet ca mediu de distribu ție al materialelor, cât și canalul de
comunicare între actorii implicați. Interacțiunea prin Internet este o formă de cooperare
bazată pe web (on -line) care dispune de un mediu software accesibil prin rețeaua
Internet oriunde în lume și oricând. Progresel e înregistrate în tehnologia rețelelor și
îmbunătățirile în ceea ce privește lățimea de bandă vor putea conduce pe viitor la
posibilități de acces multimedia nelimitat și la o calitate mult superioară .

Principalele avantaje ale implementării unei cooperă ri sociale prin rețele,
website -uri și platforme on -line sunt: reducerea costurilor legate de depozitare de
informație, expediere și personal; flexibilitate informa ției care poate fi usor tipărită sau
salvată și care poate rămâne arhivată în format electro nic ani de zile; multiple
instrumente care facilitează navigarea u tilizatorilor pe website; acces rapid la informații
exact când și unde este necesar; integrarea unei varietăți de medii de interacțiune prin:
text, grafică, imagine statică și animată, sunet , scurte filme, într -un cuvânt multimedia;
posibilități extinse de informare prin intermediul hiperlegăturilor ; eliminarea izolării
prin utilizarea facilităților de comunicare specifice Internetului; controlul accesului la
resurse prin autentificarea utili zatorilor; oportunități pentru formare de grup (asincronă
și sincronă) ca și pentru formare individuală, formare ce beneficiază de tot suportul
tehnologic în continua evoluție.

10
1.3. Modalități de redare a informației

Comparativ cu informarea tradițional ă, prin biblioteci, c ărți, articole, știri, „din
auzite”, informarea din on -line oferă o gamă mult mai extinsă de modalități de redare a
informației cu particularități specifice care, utilizate adecvat pot aduce un plus în
procesul de cooperare. Începând cu mo dalitățile clasice (redarea textului, listelor,
schemelor, imaginilor și reprezentărilor grafice) și continuând cu modalități mai
complexe de transmitere a informației (animația, formatul audio, imagini video,
prezentări, aplicații educaționale cu suport multimedia sau web), cooperarea asistată de
calculator presupune adaptarea acestor modalit ăți clasice la specificul obiectivelor
urmărite prin folosirea lor în cadrul interacțiunii umane din ziua de astăzi prin virtual,
atât în ceea ce privește forma de pr ezentare cât și conținutul informației transmise sau
stocate.

În redarea informației prin intermediul textului, de exemplu, trebuie evitată
folosirea în mod excesiv pentru a nu produce monotonie și a nu scădea interesul
individului. În plus față de cerinț ele clasice ale redării unui conținut text forma editării
textului trebuie să faciliteze receptarea conținutului prin împărțirea conținutului în
paragrafe mici, ușor de asimilat, alegerea unor caractere optime și păstrarea acestui stil
de informare pentru a nu îngreuna lectura, evidențierea titlurilor de paragraf și a
cuvintelor cheie, evitarea senzației de aglomerare prin utilizarea de spații libere în jurul
paragrafelor precum și utilizarea unor explicații ș i/sau imagini.

Față de metodele tradiționale d e informare, alegerea mediului de transmitere în
on-line cuprinde și componente noi, disponibile odată cu apariția tehnologiei web:
hiperlegăturile (eng. hiperlink ), serviciul de poștă electronică (eng. email ), grupurile /
forum -urile de discuție și liniil e de discutii (eng. c hat).

a) Hiperlegăturile (hyperlinks ) oferă individului posibilitatea de a participa
activ la propria informare precum și aprofundarea informației prezentate.
Prin utilizarea funcțiilor hypertext (redarea nesecvențială a informației
text) și hypermedia (tehnică de structurare și organizare a informațiilor
multimedia și hypertext ) se obține un grad sporit de interactivitate.
Acestea pot fi folosite pentru explicații suplimentare, pentru trimiterea
către exemple, oferind în general oportuni tăți de explorare a unor
informații adiționale care să faciliteze înțelegerea materialului sau

11
lămurir ea individului asupra unei chest iuni particulare de care s -a arătat
interesat. Prin intermediul hiperlegăturilor informația poate fi accesată
într-o formă neliniară.

b) Poșta electronică și grupul / forum -ul de discuții sunt instrumente de
comunicare asincronă care permit indivizilor și / sau societ ății /
instituțiilor / organismelor să contribuie cu informație, să schimbe
informații legate de legislație, de procedura, de verificare, control,
informare privind interesele comune, să sprijine susținerea propriilor
pareri și să ofere un mediu transparent de informare / cooperare, prin
care individul poate să beneficieze inclusiv de consultant ă.

c) Liniile de chat permit un grad ridicat de individualizare a relației dintre
indivizi și / sau societate / instituții / organisme. Prin intermediul unei
linii de chat, interlocutorii pot comunica direct, în timp real, folosind
tastatura sau, în variante mai complexe, comun icarea audio și video.
Comunicarea pe această cale implică totuși o serie de dezavantaje
specifice comunicării sincrone mijlocite de calculator și performantele
acestuia.

1.4. Proiectarea unui website – aspecte interactive și colaborative ale
Internetului

Interesul sporit pe care tinerii îl manifestă în folosirea noilor tehnologii
informaționale precum și apetența pentru rețele de socializare sau medii de tip
comunitate virtuală dezvoltate în domeniu realității virtuale a Internetului, nu este
deloc de ignorat , ci ar trebui folosite în avantajul tinerilor. Consider că orientarea
acestor tendințe spre activități cu caracter educațional și atragerea interesului tinerilor
către activități și comunități cu caracter social și de cercetare constituie un demers util
în cadrul procesului de cooperare la nivelul global și al progresului cunoștințelor. În
acest sens, proiectul de față urmărește să vină în sprijinul tinerilor, noi sau viitori
proprietari prin proiectarea și dezvoltarea unui website ce ar putea fi extins pe viitor
prin funcționalități de tip portal web. Website -ul ce face obiectul acestui proiect este
adaptat nevoilor concrete ale tinerilor proprietari și ale comunității din care aceștia fac
parte, mai exact a nevoii de informare și gestionare de probleme, s ituații cu care aceștia
se întâlnesc sau se vor întâlni ca locatari sau proprietari într -un imobil.

12

Diversele portaluri sau website -uri pot fi create de către o organizație, o
persoană particulară, instituții publice etc. De obicei un website este adminis trat (creat,
întreținut și actualizat) de către un așa -numit webmaster4, dar există și alte posibilități:
 website -ul poate fi actualizat automat și permanent pe baza unei baze de
date;
 paginile sale pot fi create în mod dinamic și automat în funcție de
acțiunea utilizatorului în cadrul unei aplicații web;
 website -ul poate fi creat și / sau administrat chiar de către utilizatorii săi
– vezi Web 2.0.

1.5. Utilizarea facilităților de tip Web 2.0

Web 2.0 desemnează (destul de vag) noi căi de a implementa și explo ata
posibilită țile organizatoare ale internetului. Con ținutul și informa ția din Internet nu mai
e oferită vizitatorilor numai de către mass media, guverne și companii particulare, ci și
de persoane particulare, legate între ele prin re țele informale bazate pe Internet, și care
contribuie și participă activ la punerea la dispozi ție și răspândirea informa țiilor pe
întregul glob. Web 2.0 permite crearea de bloguri, wiki -uri, upload de con ținut media și
website -uri de re țele sociale. Exemple tipice pentru acest nou aspect sunt a șa-numitele
wiki-uri, weblogs sau mai simplificat blogurile, precum și portalurile și bursele de
schimb de imagini, muzică, filme/video și software din Internet, a șa cum ar fi Flickr,
YouTube și website -urile pentru File sharing. De aseme nea și așa numitele „re țele
sociale”, cum ar fi Facebook sau Twitter. Web 2.0 a adus noi tehnologii, cum ar fi
AJAX cu care se pot crea website -uri complexe folosind CMS, XML, RSS, API, etc.

Inițial web -ul a constat din pagini statice, care erau actualiza te doar ocazional de
către de ținătorii lor. Ulterior au fost realizate și sisteme de gestiunea automată a
informa țiilor dintr -un website, numite Content Management Systems (CMS). Acestea
puteau construi pe loc – în mod dinamic, la cerere – versiunea cea ma i nouă posibil a
paginii web, și anume prin consultarea unei bănci de date (sigur că și aceasta trebuia
actualizată permanent, dar asta se face pe căi tradi ționale, nelegate direct de web). Dar

4 o persoană (sau un grup de persoane) care se îngrijește d e editarea și menținerea actuală a unui sit web
(wikipedia)

13
și această tehnică împarte oamenii în „creatori” de pagini web și „consumatori” mai
mult sau mai puțin pasivi ai acestor pagini/informații/documente.
Cam din anul 2005 încoace însă, unii specialiști afirmă că Internetul oferă din ce
în ce mai des o nouă calitate, idee care a fost susținută și de mediile de mase, și anume
prin folosirea deasă a noilor termeni, specifici pentru Web 2.0:

 Stocarea datelor utilizatorilor, care avea loc în primul rând pe
calculatorul local, urmând să fie publicate în web abia ulterior, se face
acum în primul rând direct în web (de exemplu pentru fotografiile private
ș.a.) – vezi și articolul Cloud computing. Programele locale accesează din
ce în ce mai des aplicațiile web, deoarece se pleacă de la ipoteza unei
legături permanente cu web -ul. Unele motoare de căutare web sunt în
stare să acc eseze și datele locale ale utilizatorului.

 Diferențele între aplicațiile locale și cele web se atenuează. Multe
programe se actualizează singure, luând legătura cu website -ul autorului
lor în mod automat, uneori chiar pe ascuns. Rolul browserului devine d in
ce în ce mai important, deoarece cu ajutorul lui pot fi implementate azi
aplicații web extrem de complexe (vezi Dynamic HTML). Practic
vorbind, browserul devine cel mai important program al utilizatorului.

 Rolurile de „creator” și „consumator” de pagin i web încep să se încalece,
deoarece „consumatorii” de până acum încep să contribuie activ la
crearea de noi conținuturi, cum se întâmplă de exemplu cu așa -numitele
bloguri. Mulți utilizatori își mută și transformă sfera lor privată de la
echipamentul loca l (PC -ul propriu) la web, în acest fel făcând -o semi –
publică sau chiar publică.

 Mashup este tendința de a accesa simultan și a cupla unele cu altele mai
multe servicii web, de la ofertanți diverși, rezultatul însă apărând ca fiind
„dintr -o bucată”, fără î ntreruperi sau alte dezavantaje.

Noile aplicații bazate pe web duc la efectul că utilizatorii, chiar și atunci când
nu sunt foarte versați tehnic, participă direct la răspândirea prin web a informațiilor și

14
opiniilor. Toate aceste fațete recente ale web -ului sunt ocazional desemnate drept
„software social ”.

Termenul Web 2.0 acoperă o arie largă de aplicații și servicii cu caracter
dinamic care permit într -o măsură mai mare sau mai mică interactivitate și colaborare
ale Internetului, în special ale web -ului. Terminația „2.0” are semnificația de versiune 2
a unui software web ci a unei noi generații în dezvoltarea domeniului web și a
designului web. Apărut relativ recent (în anii 2004 – 2005) Web 2.0 reprezintă o nouă
perspectivă asupra internetului în care utilizatorul nu mai este un simplu „vizitator” în
domeniul web ci acesta capătă un rol activ în producerea și comunicarea informațiilor
prin intermediul Internetului. Față de siturile web tradiționale care limitează utilizatorul
la o vizualizare pasivă a c onținutului paginilor web accesate, Web 2.0 integrează
tehnologii specifice care au dus la dezvoltarea și evoluția comunităților web, a
serviciilor de găzduire și a aplicațiilor web precum și a aplicațiilor de tip rețea socială
bloguri, wiki -uri. ș.a., car e facilitează comunicarea, partajarea securizată a
informațiilor, interoperabilitate și colaborarea în domeniul web.

Comunitatea – Web 2.0 a însemnat în principal implicarea maselor în mod
activ, crearea de comunități în jurul unor website -uri, comunități care pot comenta
conținutul unui website dacă nu pot chiar să contribuie la el! A se vedea însăși
Wikipedia, unde poate oricine să colaboreze, scriind / publicand un material. Astăzi un
website care nu permite comentarii este un website care nu se gândeșt e la vizitatori, la
nevoia lor de a da un răspuns la ceea ce primesc. Oamenii vor acum să comenteze, să
evalueze, să voteze conținuturile pe web. Vor să aibă avataruri, poze de -ale lor atașate
la profiluri, să poată să își facă liste de prieteni, să facă p arte din așa numitele rețele
sociale (engl. social networks). în acest mod, Web 2.0 a transformat navigatorul,
internautul, din spectator în parte activă a spectacolului.

Arhitectura – Actualmente web -ul devine tot mai mult o sumă de aplicații care
relați onează în cele mai nebănuite modalități. Vechea structură ierarhică este înlocuită
de o rețea de componente pe care utilizatorul le ia și le asamblează după propriile
nevoi. În fapt Web 2.0 a marcat începutul aparițiilor aplicațiilor web care încep să
conc ureze serios aplicațiile desktop. Există chiar și sisteme de operare online, astfel
încât putem să ne imaginăm că în câțiva ani calculatorul va însemna doar un dispozitiv

15
de conectare la internet, fără harddisk, acesta fiind un spațiu pe un server undeva,
rulând un sistem de operare online cu aplicații online.

Aspectul – Așa cum pantalonii trapezi caracterizau o anumită perioadă a
secolului trecut, la fel și pe web există câte un aspect definitoriu per perioadă. Pentru
Web 2.0 aspectul înseamnă culori vii, cât mai puține colțuri, cât mai multe umbre,
reflecții, gradiente, etc.

Mediile din întreaga lume au reacționat intens la aceste puncte de vedere noi,
bănuindu -se chiar că ele vor avea efecte sociale și economice directe. Există însă și
voci critice care , conștiente că îndărătul lui Web 2.0 nu stă nici o tehnologie nouă, se
plâng de faptul că termenul nu e definit exact și poate fi deci exploatat după pofte de
către unele companii – de exemplu cu scopuri publicitare sau economice sau chiar
pentru trafic d e influență. Un exemplu pozitiv sunt activitățile de marketing ale unor
companii care încearcă să -și convingă clienții să participe activ chiar ei la proiectarea și
realizarea paginilor web oferite de firma respectivă. Deci, în loc de metoda „push”
(pagini le web ale firmei trebuie să -i împingă pe clienți să cumpere), se încearcă
principiul „pull” (clienții potențiali sunt atrași să participe la crearea paginilor web ale
firmei, dar bineînțeles tot cu scopul de a -i determina să cumpere).

Dezvoltarea tehnolo giilor Web 2.0 a permis, în fapt, construirea portalurilor
web, ducând astfel la dezvoltarea unui tip specific de situri web. Portalurile web au
apărut ca alternativă la așa numitele Intranet (rețele interne de calculatoare care
utilizează tehnologia inter net pentru a partaja în mod securizat informații sau aplicații
destinate utilizatorilor) și permite conectarea utilizatorilor și a indivizilor din cadrul
unei organizații sau comunități, oferind posibilitatea de comunicare și acces la
informații prin inter mediul unui portal web răspunzând problemelor de partajare a
informațiilor din cadrul acestora. Acest tip de soluție permite integrarea unui mediu
colaborativ ce poate contribui la eficientizarea activităților din cadrul unei organizații
sau comunități, de terminând îmbunătățirea modului de lucru în echipă și reducerea
timpului necesar pentru luarea deciziilor permițând colectarea informațiilor din mai
multe surse de date: servere de fișiere, website -uri, directoare publice și din diferite
tipuri de fișiere. O facilitate elementară oferită o reprezintă stocarea și organizarea de
resurse informaționale grupate pe categorii și care permit un acces rapid și eficient al
utilizatorului în funcție de necesitățile specifice. În variantele mai complexe la acestea

16
se pot adaugă și alte aplicații pentru culegere prelucrarea și stocare de date, suporturi
pentru grupurile de lucru etc. Astfel, proiectarea arhitecturii funcționale a unui portal
web urmărește o utilizarea optimă și orientată a resurselor pe care internetul le oferă în
scop de informare pentru satisfacerea necesităților specifice ale fiecărui individ sau la
nivelul unei comunități, cu un scop specific.
1.6. Promovarea unui website
Pentru a crește numărul de vizitatori, administratorul website -ului trebuie să dea
posibilitatea utilizatorilor să -și exprime opiniile, sugestiile și comentariile în legătură cu
website -ul vizitat. Această metodă, care poartă denumirea de metoda feedback -ului, este
foarte des folosită, reprezentând în același timp o soluție de publicit ate on -line pentru
companii. O soluție pentru primirea feedback -ului de la vizitatori este folosirea email –ului
care reprezintă o cale simplă de a recepționa mesaje de la cititori.
O metodă modernă de promovare a website -ului o reprezintă promovarea pe ba za
rețelelor sociale. Dintre cele mai cunoscute și utilizate rețele sociale amintim: Facebook,
Twitter, Linkedin, YouTube etc. În anul 2012, rețeaua de socializare Facebook a depășit
oficial pragul de 1 miliard de utilizatori activi lunar, Twitter are pes te 200 de milioane
utilizatori activi, LinkedIn aproximativ 150 milioane, iar YouTube peste 490 de milioane
de vizitatori unici. Astfel, avantajele promovării website -ului cu ajutorul rețelelor sociale
sunt după cum urmeaz ă:
 Simplitatea, nu implică decât o conexiune la Internet;
 Interac țiunea cu posibilii vizitatori ai website -ului, aflându -le astfel părerile
în legătură cu con ținutul și informa țiile puse la dispozi ție pe website;
 Dialogul bazat pe schimburi de idei, care îmbracă formal mesajul publicitar;
 Fidelizarea vizitatorilor, prin intermediul comentariilor, a review -urilor, a
like-urilor pe Facebook sau a mesajelor pe Twitter.
1.7. Mentenan ța unui website
Modificarea conținutului unei pagini web se poate face în mai multe moduri, în
funcție de tehnologii le folosite la realizarea website -ului. O pagina web statică va putea fi
modificată doar dacă se modifică direct codul său sursă HTML folosind un editor de texte
sau un program specializat în editarea paginilor web.

17
Website -urile dinamice pot conține pagi ni al căror conținut poate fi actualizat
online folosind editoare de text specializate sau module de administrare proprii. în acest fel
mentenanța se poate face foarte rapid și usor chiar de catre proprietarii website -ului fără a
fi nevoie ca aceștia să po sede cunoștințe de HTML. Conținutul pa ginilor este memorat intr –
o bază de date iar modificările aduse conținutului unei pagini se salvează în respectiva bază
de date fiind apoi afișate imediat în website în forma modificată .
Prin mentenanță înțelegem acți unea periodic ă de întreținere și actualizare a
conținutului website -ului. Indiferent de cauzele care o determina, actual izarea conținutului
este necesară. Fie că au intervenit modificări la datele de contact sau se dorește afișarea
noutăților imediat ce de vin disponibile, mentenanț a este cea care are grijă ca grupul țintă să
revină pe website în mod periodic.
Sub aspectul optimizării unui website pentru motoarele de căutare, mentenan ța este
aproape obligatorie. Un motor d e căutare care vede că o anumită pagină din website este
diferită față de cea pe care a vizitat -o ultima dat ă îl face să creadă că acea pagina se
modifică mai des și o va vizita și pe viitor mai des. Dac ă însă nu vede nici o modificare de
la o vizită la alta, o va considera ca fiind "static ă" și nu o va vizita la fel de des, astfel ca de
ex. o modificare făcută în scop SEO asupra paginii respective nu va fi indexata la timp și
optimizarea va dura mai mult.

18
2. ARGUMENT

Motivația temei proiectului, și anume construirea unui website în vederea
managementului unei Asociației de Proprietari este simplă și întemeiată – îmi doresc
implementarea unui website portal care să fie util proprietarilor și locatarilor unui bloc,
cu atât mai mult cu cât ar favoriza o gestiune mai bună și transparenta a proprietății
comune și a beneficiilor obținute din folosința acestora, ar ușura comunicarea rapida a
situațiilor urgente, a plaților și contribuțiilor și ar sprijini o mai buna cooperare î ntre
proprietari și Asociație în vederea îmbunătățiri i calității conviețuirii din bloc.

Urgenț a și necesitatea unui astfel de website portal pentru orice Aso ciație de
Proprietari, interesată de o comunicare mai eficientă cu proprietarii din bloc , este ușor de
înțeles. Modelul de website portal propus ca pr oiect are ca scop deci reprezentarea și
informarea proprietarilor, dar și o mai mare vizibilitate și transparență privind gestionarea,
administrarea și folosirea bunurilor aflate în proprietate comună și în cota parte in diviză
din clădirea ce alcătuiește c ondominiumului.

Astfel, înglobarea resurselor informaționale specifice managementului și
administrării unei Asociații de Proprietari face ca volumul acestora să fie mai ușor de
organizat și prezentat cu ajutorul unui website inte ractiv. Postarea on -line asigură
accesul la un volum mult mai mare de informație raportat la noutățile și modificările
fiscale și juridice din acest domeniu.

Proiectarea unui portal de informare conceput pentru accesul proprietarilor la
informații relevante, va putea prezenta dat ele existente într -un mod mult mai exhaustiv
decât cum se obișnuia înainte, prin avizier. Pe lângă informațiile legate strict de
administrare, portalul pune la dispoziție o gama variată de materiale despre legislație,
oportunități, precum și alte informați i despre activitățile Asociației de Proprietari.
Totodată, portalul oferă acces la informații privind situația plații facturilor și a problemelor
curente, cu scopul de a stimula o mai bună cooperare î ntre locatari.

Prin structura sa, website -ul oferă supo rt și consultanță proprietarilor, partajează
resursele informaționale, facilitează accesul la a cestea și sprijină colaborarea î ntre
utilizatori sau grupuri de utilizatori. Fiind conceput ca un instrument de comunicare ,
website -ul vizează constituirea unui mediu de tip comunitate virtuală în scopul

19
îmbunătă țirii comunicării și transparentei decizionale și fiscale din cadrul Asociației de
Proprietari. Asimilarea tehnologiei specifice utilizate presupune anumite competențe de
utilizare a calculatorului și a te hnologiei web, la un nivel elementar sau mediu, în cazul
fiecărui utilizator interesat.

Website -ul asigură celor direct vizați, adică proprietarilor din asociație, prin
arhitectura sa functional ă, acces on -line permanent la materialul legislativ, la infor mații
de ultima ora și documente administrative, la informații juridice și fiscale, oferind și
posibilitatea sesizării de nereguli. În acest sens website -ul se constituie într -o sursă
transparenta de date, informații și documente administrative disponibile on-line și
structurate pe secțiuni. În cadrul fiecărei secțiuni aferente unei chestiuni concrete
materialele informative sunt organizate modular, ținând cont de tipul și importan ța
subiectului dezbătut.

Deși website -ul în cauz ă este mai degrabă informat iv, acesta are mare potențial
în cazul transferului pe o structură de tip portal / platforma , cu un caracter dinamic și
un grad de flexibilitate mai ridicat. Platforma va putea astfel permite utilizarea unor
funcții specifice menite să crească gradul de pa rticipare al proprietarilor / locatarilor
prin sedinte și activități programate prin intermediul website -ului sau a consultantei on –
line, urmă rindu -se astfel eficientizarea proceselor de tip colaborativ.

Având în vedere facilitățile oferite de portalurile web am considerat că
proiectarea unui website pe structura acestui tip de tehnologie se poate dovedi o resursă
usor de adaptat, cu rezultate utile specificului informațional și de comunicare pe care îl
presupune activitatea de administrare și management a unui Asociatii de proprietari.
Motivarea și etapele construcției unui website de acest gen, acela a unei Asociatii de
Proprietari corespunde scopului principal al proiectului de față, deși proiectarea
conturilor individuale și accesul securizat nu este încă prevăzut în website -ul proiect.

Din punct de vedere tehnic, website -ul de tip portal sau platforma permite
accesul la resursele informaționale specifice atât în mod public, cât în mod securizat,
pe baza unui cont de utilizator. Posibilitatea accesului securizat este o facilitate
necesară având în vedere specificul website -ului de a oferi posibilitatea organizării
utilizatorilor în tipuri de clase -utilizator în funcție de necesități și atribuirii de
permisiuni speciale fiecărei clase, putând astfel acope ri atât nevoile Comitetului

20
Executiv în desfășurarea activității sale, cât și cele ale Administratorului, Contabilului
și Cenzorului. De exemplu, președintele asociației sau administratorul poate permite
numai unei clase de locatari (restanțierii sau cei c are fac parte din comitetul executiv)
să primească informări sau să posteze răspunsuri sau comentarii la informări, pe forum
la un anumită temă propusă spre dezbatere. Portalul mai oferă utilizatorilor o interfață
grafică personalizată și posibilitatea sel ectării informațiilor specifice organizate tematic
conform obiectivelor propuse.

Analiza oportunității dezvoltării unui website a vizat în primă instanță
raportarea resurselor alocate în activitatea didactică prin realizarea prezentului proiect.
În cazul portal -urilor profesionale un criteriu în aprecierea necesității implementării
eficiente a acestui tip de tehnologie pentru o asociație, organizație sau comunitate este
volumul ridicat al resurselor informaționale cu care acestea operează. În cazul
proiect ului de față volumul de date și informații este relativ restrâns și circumscris
domeniului strict al administrării unei Asociații de Proprietari. Opțiunea pentru un
website față de unul de tip portal a avut în vedere aspecte privind raportul dintre efortul
alocat și posibilitatea realista a atingerii obiectivelor propuse precum și a asimilării
tehnologiei specifice utilizate pentru realizarea proiectului.

2.1. Instrumente de dezvoltare utilizate în crearea website -ului

Pentru dezvoltarea interfeței grafice a w ebsite -ului și optimizarea sa estetica am
folosit programele Adobe Photoshop și Adobe DreamWeaver . Adobe Photoshop este un
editor de imagini iar Adobe Dreamweaver este un editor de website -uri. Dreamweaver
este un editor WYSIWYG, fiind un instrument de ma nagement atât pentru dezvoltatori, cât
și designeri deopotrivă, ce poate fi folosit atât pentru a crea documente individuale, cât și
website -uri complete, având totodată posibilitatea de a afișa codul și design -ul în același
timp. În Dreamweaver, termenul de website se refera la o locație de stocare a documentelor
care aparțin website -ului. Un website în Dreamweaver furnizează o modalitate de a
organiza și gestiona toate documentele web, încărcarea website -ului pe un server,
urmărirea și întreținerea link -urilor, gestionarea și partajarea fișierelor.
Adobe Dreamweaver (cunoscut anterior ca Macromedia Dreamweaver) este o
aplicație de dezvoltare web a companiei americane Adobe Systems, disponibilă atât pentru
MS Windows, cât și pentru Apple Mac OS . Versiunil e recente includ suport pentru
tehnologii web cum ar fi CSS, JavaScript, PHP, Cold Fusion, cât și cadre ASP.

21
Dreamweaver s -a bucurat de un larg succes încă de la sfâr șitul anilor 1990 și momentan
deține aproximativ 80 % din piața editoarelor HTML. Produsul poate fi rulat pe variate
platforme software: Mac OS, Windows, dar suportă în același timp și platforme UNIX cu
ajutorul unor emulatoare software cum ar fi Wine.
Ca orice alt editor WYSIWYG, Dreamweaver poate ascunde detaliile de
implementare a paginilor HTML, făcând astfel posibilă crearea cu ușurință a acestora și de
către utilizatorii neexperimentați. Unii creatori de pagini web critică aceste tipuri de
editoare deoarece produc pagini de dimensiuni mult mai mari decât ar fi necesar, ceea ce
conduce la o funcționare neperformantă a browserelor web. Această afirmație este în mare
parte adevărată deoarece paginile web produse folosesc designul pe bază de tabel. În plus,
produsul a mai fost criticat în trecut și pentru producerea de coduri care adesea nu er au
conform standardelor W3C, dar acest aspect a fost mult îmbunătățit în versiunile recente.
Cu toate acestea, compania Macromedia a îmbunătățit suportul pentru tehnologia CSS
precum și alte modalități de design, fără a fi necesară folosirea designului pe bază de tabel.
Dreamweaver permite folosirea majorității browserelor instalate pe calculatorul
utilizatorului, pentru a revizualiza website -ul web creat. De asemenea conține și câteva
utilitare pentru administrarea website -urilor, cum ar fi cele pentru a găsi și modifica un
paragraf sau o linie de cod, în întregul website, pe baza oricăror parametri specificați de
către utilizator. Cu ajutorul panourilor de stare se poate crea cod JavaScript fără a avea
cunoștințe de programare. Odată cu apariția versiunii MX, Macromedia a încorporat
utilitare de generare dinamică a conținutului. De asemenea este oferit suport pentru
conectarea la baze de date (cum ar fi cele de tip MySQL și Microsoft Access) pentru a
filtra și afișa conținutul folosind scripturi de genul P HP, ColdFusion, Active Server Pages
(ASP) și ASP.NET, fără a avea nevoie de o prealabilă experiență în programare.
Un aspect foarte lăudat al Dreamweaver -ului îl reprezintă arhitectura sa extensibilă.
Extensiile sunt mici programe pe care orice dezvoltato r le poate scrie (de obicei în HTML
și JavaScript) și pe care oricine le poate descărca și instala, acestea aducând un spor de
performanță și funcționalitate îmbunătățită programului. Există o comunitate de
dezvoltatori care produc aceste extensii și le pu blică (atât comercial cât și gratuit) pentru
probleme de dezvoltare web, de la simple efecte rollover până la soluții complete de
vânzare online, în Internet.

22
La deschiderea aplicației Adobe Dreamweaver se observă o suprafață albă,
denumită fereastra de l ucru, care va afișa pagina Web așa cum va apărea ea în browser. În
fereastra de lucru putem crea și modifica pagina HTML. În aplicația Adobe Dreamweaver
paginile Web pot fi create atât în modul grafic (Design), cât și direct în cod HTML (Code).
Bara de apl icație (Application bar) conține meniurile aplicației, comutatorul spațiului de
lucru și alte controale de aplicație (Layout, Extend Dreamweaver, Website). Bara de
instrumente Document ( Document toolbar) este creată pentru a oferi posibilitatea
accesului rapid la comenzile mai importante. Conține butoane pentru diferite moduri de
vizualizare ale ferestrei Document (Code, Split, Design), Multiscreen (vizualizăm
documentul HTML ca și cum ar apărea în ecrane de diferite dimensiuni), pentru
examinarea într -un browser configurat (Preview/Debug în browser), pentru verificarea
compatibilității foilor de stil (CSS) cu diferite browsere (Check browser compatibility).
Programul Adobe Dreamweaver pune la dispozitie 3 moduri de vizualizare:
 modul de vizualizare Code permite scrierea și editarea codului HTML,
JavaScript, PHP sau ColdFusion Markup Language (CFML), precum și a
oricărui alt tip de cod.
 modul de vizualizare Split permite afișarea în fereastra Document atât a
codului sursă, cât și a reprezentării vizuale a documentului HTML.
 modul de vizualizare Design este un mediu de editare vizuală și dezvoltare
rapidă de aplicații, care afișează o reprezentare vizuală a documentului,
asemănătoare cu cea din fereastra browser -ului.
 Live View este similar modului de viz ualizare Design, afișând o
reprezentare mai apropiată de ceea ce documentul HTML va arăta în
browser. Acest mediu permite interacțiunea cu documentul la fel ca într -un
browser. În cest mod conținutul documentului HTML nu este editabil.
 Live Code View este disponibil doar atunci când vizualizăm un document în
modul Live View, fara însă a avea posibilitatea de editare a codului sursă.
Mai mult decât atât, panourile și ferestrele de inspectare permit vizualizarea și
modificarea proprietăților obiectului sele ctat. Cu ajutorul lor stabilim proprietăți, se creăm
animații și adăugăm diferite funcționalități paginii web. Panourile din Adobe
Dreamweaver sunt structurate în grupuri, pe secțiuni, alături de fereastra Document.
Panourile pot fi extinse, comprimate sau închise prin acționarea săgeții situată în dreapta
panoului.

23
3. Noțiuni de baz ă ale limbajului HTML

HTML ( HyperText Markup Language) este limbajul utilizat în web pentru
descrierea hipertextelor. Cu ajutorul HTML paginile web pot fi afișate . HTML nu este un
limbaj de programare propriu -zis, ci doar un limbaj de descriere/editare, conținând
elemente ce permit construirea paginilor web. Prin urmare cu HTML nu se poate
programa. Limbajul HTML permite o formatare de baza a informației, astfel încât aceasta
să fie inteligib ila. Trebuie subliniat faptul că aceasta formatare nu ține de design, ci
de logica informației . în realizarea unei pagini HTML este foarte importantă structurarea
informației, pentru că tocmai acesta este rostul HTML -ului: transmiterea informați ei prin
intermediul paginilor de internet. Pentru design avem un alt limbaj și anume CSS.

Limbajul HTML este derivat din SGML ( Standard Generalized Markup
Language – limbaj standard generalizat de marcare) având caracteristici specifice
limbajelor descrip tive:

 documentele HTML sunt de tip text (ASCII) putând fi create cu orice editor
de texte ( Notepad , Wordpad );
 documentele HTML pot fi vizualizate cu diferite browser -e și sunt
independente de platforma de lucru;
 HTML utilizează pentru descrierea documente lor web tag-uri (etichete sau
marcaje ) specifice pentru fiecare element descris, tag -urile stabilesc atât
structura documentului cât și aspectul acestuia.

Învățarea limbajului HTML are trei mari avantaje: este foarte simplă și nu necesită
mult timp; oferă controlul absolut asupra realizării paginii web; iar secvențele de cod
HTML de la alte pagini web poți fi folosite "împrumutate" în cadrul paginilor pe care vrem
să le realiză m.

3.1. Elementele limbajului HTML și structura unui document HTML

Elementele HTML de baza sunt: html , head , title și body . Un element are trei
parti: o eticheta/ tag de deschidere, conținutul elementului și o etichetă /tag de închidere.
Etichetele HTML sunt încadrate între paranteze unghiulare: < > eticheta de început și
</tag> – etiche ta de sfârșit. Efectul corespunzător etichetei este aplicat textului dintre
eticheta de început și cea de sfârșit. Tag-ul este un identificator care furnizează browser –
ului instrucțiuni de formatare a documentului, acesta nu este altceva decât un marcaj

24
etichet ă pe care limbajul HTML il foloseste alaturi de texte pentru a ajuta browser -ul de
internet să afișeze corect conținutul paginii web. Unele elemente admit atribute ce conțin
informații suplimentare despre conținutul elementelor. Atributele se precizea ză în cadrul
tag-ului de început sub forma atribut=valoare și se separ ă prin spații.

3.1.1. Structura unui document html

Un document HTML este delimitat de perechea de etichete < HTML > și
</HTML > și este constituit din:
A. antetul documentului delimitat de tag -urile <HEAD > și </ HEAD >, conține
informații generale despre document cum ar fi:
 titlul documentului – cel care va fi afișat în bara de titlu a ferestrei browser –
ului și este delimitat de tag -urile <TITLE> și </TITLE> ;
 pentru alte informații suplimentare se ut ilizează eticheta <META> admite
atributele:
o NAME – conține un șir de caractere ce reprezintă numele proprietății
(“Author”, “Keywords”, “Description”)
o CONTENT – conține valoarea asociată p roprietății respective (între “ “)

B. corpul documentului delimitat de tag-urile <BODY> și </BODY> sau
<FRAMESET> și </FRAMESET> , conține textul propriu -zis al documentului și
elementele de formatare ale acestuia. Atenție , tagul <body> se pune o singur ă dată într-o
pagin ă, nu de mai multe ori. Elementul <body> admite următ oarele atribute:
 BACKGROUND=”URL” – URL este un șir de caractere ce reprezintă
adresa web a unei imagini care va fi utilizată de browser ca fundal ( background )
pentru document.
 BGCOLOR=”culoare” – color stabilește culoarea fundalului documentului
(BackGrou nd Color ) sau BGCOLOR= “locatia unei imagini.jpg” ce seteaza
fundalul drept o culoare sau o imagine
 TEXT= ”culoare” – stabilește culoarea textului.
 LINK= “culoare” – stabilește culoarea cu care vor fi marcate în text link –
urile nevizitate. VLINK= “culoare” – stabilește culoarea cu care vor fi marcate în
text link -urile vizitate. ALINK= “culoare” – stabilește culoarea cu care va fi marcat
în text link -ul activ.
 ALIGN= “center / left / right” sau VALIGN= “ top, middle, bottom ”

25
În HTML culorile se pot specifi ca în două moduri:
 utilizând denumirile predefinite , cele mai uzuale sunt: red, maroon,
yellow, green, lime, teal, olive, aqua, blue, navy, purple, fuchsia,
black (este culoarea implicita), gray, silver, white ;
 utilizând codul culorii ( #rrggbb ) dat în fo rmatul hexazecimal RGB: rr
reprezintă roșu (de la 00 la FF); gg reprezintă verde (de la 00 la FF); bb
reprezintă albastru (de la 00 la FF); aceste valori reprezentând
contribuția fiecărei culori de bază la culoarea creată.

3.1.2. Formatarea textului

3.1.2.1. Atributele
Atributele sunt folosite pentru a modifica valoarea unui element în HTML. De
obicei un element are mai multe atribute. Un tag este o comand ă pe care browser -ul o
interpreteaza, un element este un tag complet, iar un atribut modific ă un element în HTML.
Atributele sunt folosite pentru a personaliza elementele unei pagini web / tag -urile.
Atributele se introduc î ntre parantezele unghiulare “< >” ale tag-ului de deschidere. Cele
mai multe tag-uri au propriile lor atribute. Deși textul poate fi introdus și fără taguri, dac ă
dorim să avem un text de o anumită formă atunci atributele trebuiesc bă gate în tag -ul
<font> </font> . Formatarea textului care apare într -un documente HTML se poate face:
 la nivel de bloc ( bloc-level ) – pot conține și alte elemente de format are și încep
de la linie nouă;
 la nivel de caracter – conțin doar text sau alte elemente de formatare la nivel
de caracter.

Gruparea mai multor elemente HTML la nivel de bloc se realizează cu ajutorul tag –
urilor <DIV> și </DIV> . Pentru gruparea mai multor elemente dintr -un bloc la nivel de
caracter ( inline ) se utilizează tag -urile <SPAN> și </SPAN> .

Alte notari folosite în limbajul HTML ar fi:
&nbsp; – este folosit ca spațiu
&copy; – este folosit pe post de copyright – ©
&reg; – este folosit pe post de ma rca înregistrată – ®
<!– This is a comment –> -cu acest tag se scrie un comentariu în html source code,
comentariu este ignorat de browser. Pentru a vedea html source code putem apăsa click
right pe o pagină web și selecta apoi "page source" .

26
3.1.2.2. Paragrafel e
Paragraful reprezintă o diviziune a unui text, mai mica decât capitolul, care începe
din alineat și evidențiază o idee distincta. Intr -o pagina HTML, paragraful este conținut
intre elementele <p> și </p> , eticheta de sfârșit fiind opțională. Paragraful e ste un element
de baza în editare de text. Tag -ul pentru paragraf va plasa o linie goal ă deasupra și
dedesubtul textului pentru a fi evidențiat, iar browser -ul il va interpreta ca atare.
Tag-ul <P> admite atributele: ALIGN = LEFT │ RIGHT │ CENTER
│JUSTIF Y; TITLE ; LANG ; DIR
Pentru a stabili același mod de grupare pentru mai multe paragrafe, trebuie să le
grupăm într -un singur bloc cu ajutorul tag -ului <DIV> . Pentru a insera în document o linie
vidă se utilizează tag -ul <BR> .
3.1.2.3. Line BReak
Exista momente cân d, fie din rațiuni de design, fie din alte rațiuni, să ai nevoie ca în
cadrul unui paragraf să “rupi” informația în mai multe parți. Introducerea tag -ului
<br/> duce la ruperea textului și trecerea la o nouă linie. Plasarea acestuia în codul sursă al
docum entului, va încheia rândul respectiv și va coborî cu o linie mai jos, lăsând un spațiu
mai mic în comparație cu cel de paragraf.
Folosim <hr/> pentru a crea o linie orizontală . Acest tag este similar celui de
linebreak, do ar că în p lus desenează o linie o rizontală ce separă diferite zone ale
conținutului sau pur și simplu decorează. Folosită cu iscusință poate da rezultate destul de
neașteptate.
3.1.2.4. Paragrafele titlu
Textul care se regăsește într -o pagina de website este de obicei împărțit logic în
capitole, t itluri, subtitluri și așa mai departe, toate fiind notate cu asa -numitele heading -uri.
Este foarte important de retinut ca HTML, ca un limbaj de afișare a informației, trebuie să
fie mereu structurat logic, motoarele de căutare punând mare accent pe acest fapt. Fiecare
element structural al unui document, de obicei, este precedat de un paragraf titlu (heading),
de aceea, heading -urile participă și ele la aceast ă structur ă. Documentele HTML pot fi
structurate pe șase niveluri, în funcție de importanța lor, e xistând șase etichete care
definesc nivelul paragrafului titlu în structura documentului: <H1> , <H2> , <H3> , <H4> ,
<H5> , <H6> . Etichetele d e sfârșit sunt obligatorii. Tag -ul <h1> define ște cel mai

27
important heading, în timp ce <h6> definește cel mai puțin i mportant heading. Prin urmare
tag-urile <h1> și </h1> permit scrierea unui titlu cu caracterele cele mai mari iar textul va
fi afișat îngroșat, în timp ce textul încadrat de tag -urile <h6> și </h6> va fi afișat cu
caracterele cele mai mici. Tag-urile acest ea acceptă atributul ALIGN cu ajutorul căruia
titlul va putea fi aliniat la stâ nga, la centru sau la dreapta. Tag-urile pentru paragrafe admit
atributele: LANG, DIR, TITLE, ALIGN .
3.1.2.5. Formatarea la nivel de caracter

Precizarea informațiilor referitoare la fon tul utilizat de browser pentru vizualizarea
textului se realizează cu ajutorul tag -urilor <FONT> și </FONT> . Atributele admise de
eticheta <FONT> sunt:
 SIZE = valoare – stabilește dimensiunea caracterelor. Valoarea dimensiunii
poate fi specificată: (i) în mod absolut cu valori intre 1 și 7; și (ii) relativ la dimensiunea
curentă a caracterelor – cu +n sau –n mai mari sau mai mici.
 COLOR = culoare
 FACE = lista_fonturi – definește o listă de fonturi separate prin virgulă, dintre
care browser -ul îl va alege p e primul disponibil în ordinea preferințelor (altfel va utiliza
fontul implicit). Dimensiunea implicită a fontului se poate modifica utilizând tag -ul
<BASEFONT> sub forma: <BASEFONT SIZE=4>

3.1.2.6. Aplicarea unor efecte asupra textului

Pentru a aplica unei zone de text un anumit efect, se încadrează textul între eticheta
de început și cea de sfârșit, corespunzătoare efectului respectiv. Formatarea textului se
poate face la nivel fizic utilizând următoarele tag -uri:

<B> text </B> aplic ă stilul bold textului.
<I> text </I> aplic ă stilul înclinat textului.
<U> text </U> aplic ă stilul subliniat textului.
<STRIKE> text</STRIKE> produce "tăierea" cu o linie a textului
<TT> text</TT> afișează textul în fontul teletype
(neproporțional), nu est e cunoscut de toate
browser -ele

28
În HTML se pot aplica și efecte logice, în concordanță cu semnificația textului respectiv:

<BIG>text</BIG> afișează textul cu dimensiune mai mare decât fontul de bază
< SMALL>text</ SMALL > afișează textul cu dimensiun e mai mică decât fontul de
bază
<DFN>text</DFN> identifică un termen de definiție și -l scrie cu caractere
diferite de textul înconjurător
<EM>text</EM> emfaza, evidențiază textul , de obicei prin scrierea italică,
evidenția ză o secvenț ă de text importantă
<Hn>text</Hn> aplică unul dintre cele șase formate predefinite de antet
<KBD>text</KBD> aplic ă textului menționat un font similar intrării de la
tastatur ă, deci un font neproporțional
<SAMP>text</SAMP> aplic ă textului din container un font asemănător i eșirii de
calculator (neproporțional).
<STRONG>text</STRONG> produce o evidențiere pronunțată a textului
<SUB>text</SUB> mută textul sele ctat mai jos decât linia textului precedent și
aplic ă un font mai mic (face trecerea în indice inferior)
<SUP>text</ SUP> mută textul selectat mai sus decât linia textului precedent
și aplic ă un font mai mic (face trecerea în indice superior)
3.1.2.7. Formatarea la nivel de comunicare
<ADDRESS [ALIGN=left|center|right]>
text </ADDRESS> permite vizualizarea unei informații de
adresă, uzual o adres ă de e-mail
<CITE> text</CITE> indic ă o referință, cum ar fi un nume de
carte, articol, numele unui autor. Referință
este diferențiată fatã de textul curent
<CODE> text</CODE> aplic ă textului un font neproporțional
precum cel de calculato r (clasic)
<LISTING> text</LISTING> aplic ă textului un font similar ieșirilor de
calculator, este utilizat pentru
compatibilitate cu versiuni mai vechi
<VAR> text</VAR> produce o evidențiere a textului, uzual prin
trecerea în italice.

29
3.1.2.8. Utilizarea citatel or în documente HTML

Pentru inserarea de citate există două etichete: <BLOCKQUOTE> – utilizate
pentru citate lungi și <Q> – utilizate pentru citate scurte care nu conțin mai multe
paragrafe. Ambele necesită etichetă de sfârșit, textul cuprins între cele d ouă etichete fiind
un citat.

3.1.3. Inserarea listelor în documente HTML

Utilizarea listelor este necesară pentru prezentarea informațiilor în mod structurat.
Se pot utiliza trei tipuri de liste:

1. Listele neordonate ( UL – Unordered List ) – sunt utilizate at unci când există o
legătură între elementele listei dar nu se impune o anumită ordine a lor. Aceste liste sunt
încadrate între tag -urile <UL> și </UL> , fiecare element al listei fiind precedat de tag -ul
<LI> (List Item ) care introduce înaintea elementului o bulină. La imbricarea listelor
neordonate introduse prin UL, nivelele diferite vor fi diferențiate prin buline de tipuri
diferite. Selectarea simbolului care precedă fiecare intrare în listă se realizează cu ajutorul
atributului TYPE care poate avea valo rile: “disc” , “circle” și “square” . Atributul
COMPACT arată că distanța dintre bulină și text poate fi redusă ( este posibil ca această
opțiune să nu funcționeze pe orice browser).

2. Listele ordonate ( OL – Ordered List ) – sunt utilizate atunci când eleme ntele
listei trebuie prezentate într -o anumită ordine. Aceste liste sunt încadrate între tag -urile
<OL> și </OL>, fiecare element al listei fiind precedat de tag -ul <LI> . Atributele
acceptate de tag -ul OL sunt:
 TYPE=1|a|A|i|I – care determină modul de nume rotare a intrărilor în listă și
poate avea valorile: 1 (pentru numerotare cu cifre arabe: 1, 2, 3,…), a (intrările
în listă vor fi precedate de literele mici ale alfabetului latin: a, b, c , …), A
(intrările în listă vor fi precedate de literele mari ale a lfabetului latin: A, B,
C,…), i (numerotarea se face cu cifre romane mici: i, ii, iii,…), I (numerotarea
se face cu cifre romane mari: I, II, III,… ).
 START=număr – stabilește numărul de la care să se înceapă numerotarea
listei. Valoarea implicită este 1|a |A|i|I. Pentru a modifica valoarea cu care este
automat numerotată a intrării în listă se include în tag -ul <LI> corespunzătore
intrării respective atributul:
 VALUE=număr – unde număr reprezintă valoarea de etichetare a intrării în
lista respectivă.

30

3. Listele de definiții (Definition List ) – sunt cele în care intrările sunt formate din
două paragrafe: primul corespunzător termenului iar al doilea, aliniat, corespunzător
definiției termenului. Crearea unei astfel de liste este marcată cu tag -urile <DL> și </DL> .
Prin urmare o intrare în listă va avea două componente:
 termenul marcat cu tag -ul <DT> ( Definition Term ) care poate conține doar
elemente de formatare inline.
 definiția termenului marcată cu tag -ul <DD> ( Definition Description ) care
poate conține și elemente de formatare la nivel de bloc.

3.1.4. Inserarea tabelelor în documente HTML

Tabelele permit organizarea informațiilor într -un document HTML. Inserarea unui
tabel se face prin intermediul tag -urilor <TABLE> și </TABLE> . Conținutul elementului
TABLE este constituit din liniile tabelului. Specificarea unei linii se realizează cu ajutorul
elementului TR ( Table Row ), între eticheta de început <TR> și cea de sfârșit </TR>
(opțională) fiind descrise celulele de pe linia respectivă (rand).

<TABLE>
<TR> co nținutul primei linii
<TR> conținutul celei de a doua linii </TR>
</TABLE>

Specificarea celulelor care constituie o linie se realizează prin intermediul
elementelor TH ( Table Header ), pentru celulele care constituie antetul tabelului, respectiv
TD (Table Data) pentru celulele care conțin informațiile din tabel (coloane). Elementele
TH și TD admit următoarele atribute:
 ROWSPAN = “număr _de_linii” – specifică numărul de linii acoperite de
celula respectivă; valoarea implicită este 1; valoarea 0 semnifică fap tul că
această celulă acoperă toate liniile începând cu cea curentă;
 COLSPAN = “număr_de_coloane” – specifică numărul de coloane acoperite
de celula respectivă; valoarea implicită este 1; valoarea 0 semnifică faptul că
această celulă acoperă toate coloanel e începând cu cea curentă;
 WIDTH = “valoare” – specifică lățimea celulei în număr de pixeli;
 HEIGHT = “valoare” – specifică înălțimea celulei în număr de pixeli;

31
Tag-ul TABLE admite următoarele atribute:
 SUMARRY = “text” – specifică o descriere a rolului și structurii tabelului,
aceste informații nu sunt vizualizate în pagina Web;
 ALIGN = “LEFT │ RIGHT │CENTER” – specifică alinierea tabelului;
 WIDTH = “valoare” – specifică lățimea întregului tabel; valoarea poate fi
specificată în număr de pixel i sau în procente;
 HEIGHT = “valoare” – specifică înălțimea întregului tabel; valoarea poate
fi specificată în număr de pixeli sau în procente;
 BORDER = “valoare” – specifică în număr de pixeli grosimea liniei
chenarului din jurul tabel;
 COLS = “valoare” – specifică numărul de coloane ale tabelului;
 CELLSPACING = “valoare” – specifică spațiul dintre celule și spațiul
dintre celule și marginea tabelului;
 CELLPADING = “valoare” – specifică spațiul dintre chenarul celulei și
spațiul conținutul ei; valoarea poa te fi specificată în număr de pixeli sau în
procente;
3.1.5. Inserarea de Cadre în documentul HTML
Sunt și situatii în care imaginea afisata de browser este formata din mai multe
pagini HTML numite cadre . Cu ajutorul cadrelor, se pot afisa mai multe pagini web în
aceeasi fereastra de browser. Fiecare document HTML poarta numele de cadru (frame) și
fiecare cadru este independent de celelalte. Caracteristic acestor pagini este ca perechea de
etichete <body> </body> este înlocuită de <frameset> </frameset> (ce define ște un set
de cadre), iar în interiorul lor cadrele sunt delimitate de <frame> și </frame> (ce definește
o sub -fereastra / un cadru).
Atributele etichetei <frameset> sunt:
 cols imparte pagina în coloane și are valori exprimate în procente din
dimensiunea ferestrei, număr de pixeli sau * adică spațiul rămas
 rows împarte pagina în rânduri cu aceleași valori ca la cols
 bordercolor culoarea tuturor chenarelor conform modelului #rrggbb
 frameborder inhibarea afișării chenarelor cu valorile yes sau no

32
Cadrele su nt introduse prin perechea de etichete <frame> </frame>, și suporta atributele:
 src fișierul sau adresa fișierului introdus
 bordercolor culoarea chenarului cadrului curent conform modelului #rrggbb
 noresize dezactivează posibilitatea vizitatorului de a red imensiona cadrul
 scrolling adăugă cadrului bare de defilare cu valorile yes no și auto
Exemplu 1: pagina cu două cadre orizontale în proporția 20% și 80% din înălțimea total ă.
Pagina de sus are chenarul roșu iar cea de jos are scroll.
<html>
<head>
<title >Exemplu1</title>
</head>
<frameset rows="20%,80%">
<frame src="exemplu1_1.html" bordercolor="#ff0000">
<frame src="exemplu1_2.html" scrolling="yes">
</frameset>
</html>

Exemplu 2 : pagina cu doua cadre verticale în proportia 40% și 60% din latimea totala , fara
posibilitatea de redimensionare a cadrelor
<html>
<head>
<title>Exemplu2</title>
</head>
<frameset cols="40%,60%">
<frame src="exemplu2_1.html">
<frame src="exemplu2_2.html" noresize>
</frameset>
</html>
Exemplu 3 : pagina cu două cadre. în cadrul din stânga sunt link -ri către alte pagini care se
vor deschide în cadrul din dreapta (se poate verifica funcționarea atributului target al
legăturii). Cadrul din stânga va avea scroll. În situația în care browserul folosit nu suporta
pagini care conțin cad re, imaginea afișat ă va fi goal ă. Pentru a evita aces t lucru vom
introduce un mesaj î ncadrat de <body> și </body> î ntre etichetele <noframes> și
</noframes> prin care informă m vizitatorul ca folosește un browser care n u suportă cadre.
<frameset cols = "30 %, 40%,*">
<noframes>
<body>Browserul folosit nu suporta cadre</body>
</noframes>
<frame src ="pag1.html">
<frame src ="pag2.html">
<frame src ="pag3.html">
</frameset>

33
Cadre in -line – sunt blocuri care se introduc în pagina prin perechea de etichete
<iframe> și </iframe> , și au atributele:
 src fisierul sau adresa acestuia
 height înălțimea cadrul
 width lățimea cadrul
 frameborder grosimea bordurii (chenarului)
 scrolling adauga bare de defilare cu valorile yes no și auto
 align aliniaz ă cadrul (left, right, c enter, top, bottom, middle)
 vspace distanță peste și sub cadru
 hspace distanță în stânga și în dreapta de cadru
Exemplu 4 : o pagina în care este găzduit un cadru in -line. Si aici se poate introduce un
mesaj pentru browserele care nu suporta cadre in -line. Modul de afișare al exemplului
poate diferi de la un browser la altul.

<html>
<head>
<title>Exemplu4</title>
</head>
<br>
<iframe src="pag.html" width="300" height="100" hspace="200" vspace="100"
scrolling="yes">Browserul folosit nu suporta cadre in -line</iframe>< br>
</body>
</html>
3.1.6. Inserarea de Formulare în documentul HTML

Folosind formularele webdesignerul sau administratorul website -ului poate colecta
diverse informații de la vizitatori. Cele mai importante atribute ale etichetei <form> sunt
action și method .
 action menționează adresa scriptului (aflat pe server) care va interpreta
formularul. Aceste scripturi pot fi scrise în limbajele PHP sau Pearl.
 method indică metoda folosita de browser pentru transmiterea formularului.
Poate lua valorile get și post.
 get – datele sunt trimise p rin adăugarea la adresa indicată de action . Permite
trimiterea unor mici cantități de date.
 post – datele sunt trimise separat și sunt permise cantități mari de date.

34
Exemplu 5: formular cu 2 campuri, buton Trimite și buton Sterge

cod afișare
<form action="script.php" method="post">
Nume:<input type="text" name="nume">
Prenume:<input type="text" name="prenume"><br>
<input type="submit" value="Trimite"><input type="reset"
value="Sterge">
</form> Nume:

Prenume:

Trimite
Sterge

Eticheta <input> poate avea atributele:
 type – indica tipul datelor care vor fi introduse (text=text, submit=trimite,
reset=sterge, password=parola, hidden=nu este vizibil, checkbox=caseta de
validare, button=buton, radio=selectar ea unui singur element dintr -un grup,
file=fisier pentru upload, image=butonul va fi înlocuit cu o imagine)
 name – numele asociat câmpului respectiv. Este folosit la prelucrarea datelor de
către scriptul menționat în action
 size – numărul de caractere vizi bile din câmp
 maxlenght – numarul maxim de caractere introduse în câmp
 readonly – datele prezente în câmp nu pot fi modificate
Exemplu 6 : formular conținând toate valorile atributului <input>

cod afișare
<form action="script.php" method="post">
Nume:<in put type="text" name="nume">
Email:<input type="text" name="email"><br>
Sexul: Masculin<input type="radio"
name="sex" value="m"> Feminin<input
type="radio" name="sex" value="f">

Studii: <select> <option
value="scoala">Scoala profesionala <option
value="l iceu">Liceu <option
value="facultate">Facultate </select>
Accesati Internetul de la:
Serviciu<input type="checkbox" name="serv">
Acasa<input type="checkbox" name="acasa">

Fisier: <input type="file" name="file"> Nume:

Email:

Sexul: Masculin

Feminin

Studii:
Liceu
Accesati Internetul de la:
Serviciu

Acasa

Fisier:

35

Observatii:<textarea name="obs" rows="5"
cols="30"></textarea>
<input type="submit" value="Trimite"><input
type="reset" value="Sterge">
</form> Observatii:

Trimite
Sterge

Construcția select introduce un meniu derulant (lista de selecție), valorile fiind
declarate prin option . în câmpul textarea se poate introduce text, având atributele cols
(numar de coloane) și rows (număr de rânduri). Butoanele pot fi par ticularizate în formular
folosind atributul type= "image " în cadrul etichetei input și indicând fișierul imagine.
<form action="script.php" method="post">
<input type="image" src="trimite.gif" alt="Trimite">
</form>
3.1.7. Inserarea legă turilor în documente HT ML

Principala caracteristică a hipertextelor o constituie utilizarea legăturilor (links). Un
link este o conexiune către o altă resursă Web (un alt hipertext sau o imagine, o secvență
video sau audio, un program etc.), resursă care poate fi accesată din f ereastra browser -ului
printr -un simplu clic. Limbajul HTML conține multiple elemente prin intermediul cărora
se poate crea o legătură către resurse Web:
 IMG – creează o legătură către o imagine;
 LINK – specifică legături către resurse utile;
 A – creează o legătură către o resursă Web într -un document HTML;
 APPLET – creează o legătură către un program executabil pe calculatorul
utilizatorului.

3.1.7.1. Elementul tag A

Pentru a crea un link într -un document HTML se utilizează tag -ul A (anchor –
ancoră). Textul sc ris între tag -ul de început < A> și cel de sfârșit </ A> va apărea
evidențiat în fereastra browser -ului: subliniat, colorat în funcție de valorile atributelor
LINK, VLINK, ALINK . Atributele specifice elementului A sunt:
 HREF = URL – specifică adresa resur sei la care se face legătura;

36
 NAME = șir_de_caractere – asociază un nume unic ancorei curente, astfel
încât să poată constitui ținta unui alt link;
 TITLE = șir_de_caractere – asociază un nume resursei la care se face legătura.
Browser -ul va afișa titlul re sursei când utilizatorul deplasează mouse -ul deasupra
legăturii.

Tag-ul ancoră <a> definește un hyperlink (sau pur și simplu link). Un link este un
cuvânt, un grup de cuvinte sau o imagine pe care poți da click pentru a ajunge la un alt
document sau la o parte anume a aceluiași document. Cel mai important atribut al
elementului <a></a> este href, cel care face totul posibil. O ancora poate duce câtre orice
resursa de pe Web: o pagina HTML, o imagine, un fisier sunet, un film etc ., de exemplu <a
href="url" > Text </a>. La fel, o rice element / imagine poate fi link -uit după cum
urmează: <a href="pagina.html" ><img src="imagine.jpg" /></a> .

Atributul “target” specifică locul în care vrem să deschidem un documentul. Astfel,
în momentul în care realizam un lin k catre o alta pagina internet (document), putem să
deschidem pagina respectiva în aceeasi fereastra a browser -ului folosind target -ul “ _self” ,
sau o putem deschide în altă fereastră prin target -ul “_blank” . Dacă vrem ca pagina să se
deschidă în același frame în care s -a aflat și linkul avem “ _parent” care deschide
documentul în frame -ul părinte, și “_top” care deschide documentul link -uit în fereastra în
care se afla link -ul. Atenție însă ca frame -ul nu este o fereastr ă, ci este o p arte dintr -o
fereast ră, definită ca atare. Putem chiar să combinați tag-ul imagine cu cel de ancoră și să
puneti un link pe imagine, pentru a face un buton, astfel: <a href= "url" target= "_self">
<img src=""> </a > ; sau putem crea un link catre o sectiune, astfel: <a name=
"Paragrafele"> Paragrafele </a> (notatia se pune unde este sectiunea pt a marca <a
href=”index.html”>) . Link -ul de mail se scrie astfel: <a href=
"mailto:lucian0308@yahoo.com" >Send Mail <a >

3.1.7.2. Elementul LINK

Spre deosebire de A elementul LINK poate fi pla sat numai în antetul documentului
(în secțiunea HEAD). Elementul LINK admite aceleași atribute ca și elementul A dar nu
are etichetă de sfârșit. Elementul LINK permite furnizarea diferitor informații cum ar fi
cele despre autor, versiunile în alte limbi al e documentului, versiuni anterioare etc.

37
3.1.7.3. Elementul BASE

Specificarea adreselor resurselor Web la care se creează legături în documente
HTML se poate face atât în mod absolut cât și în mod relativ. În cazul specificării relative
a adreselor se consideră implicit că adresa de bază este locația curentă. Prin intermediul
elementului BASE există posibilitatea de a specifica explicit adresa de bază a URL -urilor
specificate în mod relativ. <BASE HREF=URL> Url-ul trebuie să fie specificat în mod
absolut (calea l ungă). Elementul BASE este plasat în antetul documentului și nu are tag de
sfârșit.

3.1.8. Inserarea imaginilor în documente HTML

Elementul IMG permite inserarea imaginilor, APPLET permite inserarea de
applet -uri scrise în limbajul Java iar elementul OBJECT permite inserarea elementelor
multimedia într -un document HTML.

3.1.8.1. Elementul IMG

Elementul IMG permite inserarea imaginilor. Acesta nu are conținut și nu admite
tag de sfârșit. Specificarea imaginii ce urmează a fi inserată se face prin intermediul
atributului :
 SRC = “URL” – care specifică adresa fișierului care conține imaginea. Cele
ma utilizate formate de imagini pentru pagini web sunt: .gif și .jpeg ;
 ALT = “text” – specifică un text alternativ care va fi afișat în locul imaginii de
browser -ele care nu pot v izualiza imagini;
 HEIGHT = “dimensiune” – înălțimea imaginii;
 WIDTH = “dimensiune” – lățimea imaginii;

Dimensiunea poate fi exprimată în număr de pixeli sau procente (referitoare la
spațiul disponibil și nu la dimensiunea imaginii);
 ALIGN = “valoare” – specifică modul de aliniere a imaginii în raport cu
textul. Valoare pote fi: “TOP / MIDDLE / BOTTOM / LEFT / RIGHT” ;
 BORDER = “numar_pixeli” – specifică grosimea chenarului în care va fi
încadrată imaginea;
 HSPACE = “dimensiune” – specifică spațiul inser at în stânga și în dreapta
imaginii;

38
 VSPACE = “dimensiune” – specifică spațiul inserat în partea de sus și în
partea de jos a imaginii.

Prin utilizarea elementului IMG drept conținut al elementului ancoră <A> se poate
insera în document o legătură pe o im agine adică prin acționarea imaginii printr -un click
va fi accesată resursa destinație .

3.1.8.2. Atributele "class" și "id"
Atributele class și id sunt foarte asemanatoare. Acestea nu au un rol direct în
formatarea elementelor și mai degraba sunt utile în spatel e scenei cu ajutorul CSS. Idea
este ca atunci cand vrem să stabilim o clasa de tag -uri pentru a fi folosite mai tarziu ca
ajutorul CSS, să putem diferentia intre aceste doua tag-uri identice dar cu atribute diferite.
De exemplu intre.
<p id="italicsparagr aph">Paragraph type 1, inclinat </p>
<p id="boldparagraph">Paragraph type 2, ingrosat </p>

3.1.8.3. Atributul "name"
Atributul " name " este ceva mai diferit față de " id" și " class ". Punand un nume
unui element , acesta devine o variabila de script pentru Javascript, ASP și PHP. Cel mai
des este intalnit în formulare și alte campuri de text interactive. Atributul de tip
(name ) <input type="text" name="TextField" /> nu are nici un afect asupra redării c ăsuței
de text, cu toate ca în background deține un rol foarte impo rtant.

3.1.8.4. Atributul "title"
Atributul “title” este folosit foarte puțin față de cât ar trebui, el adăuga un titlu (un
pop-up) oricărui conținut al unui element, titlul se regăsește în bara de titlu a browser -ului

3.1.8.5. Atributul "align"
Daca vrem să aliniem în mod diferit anumite elemente ale paginii, atunci avem la
dispoziție atributul align . Putem alinia la stânga ( left), dreapta ( right ) sau la mijlocul
(center) pagini aproape orice element. Prin default elementele se aliniază la stânga ,
exceptând atunci când se specific ă altă aliniere . <h2 align="center">Titlu centrat </h2>.

39
4. NOȚIUNI DE BAZĂ ALE LIMBAJULUI CSS
CSS este acronimul pentru Cascading Style Sheets. CSS este un limbaj (style
language) care definește "layout -ul" pentru documentele HTML. CSS acoper ă culori, font –
uri, margini (borders), linii, înălțime, l ățime, imagini de fundal, poziții avansate și multe
alte optiuni. Deoarece HTML este de multe ori folosit necorespunzător pentru a crea
layoutul website -urilor de internet, majoritatea apelează la li mbajul CSS, deoarece acesta
ofera mai multe optiuni, este mai exact și sofisticat. în plus, este suportat de toate
browserele actuale. HTML este folosit pentru a structura conținutul în timp ce CSS este
folosit pentru a formata conținutul.

In perioada de început a web -ului, HTML era folosit numai pentru structura
textului. Textul se putea marca cu taguri precum <hl> și <p> pentru a marca titlul sau un
paragraf. Odată cu creșterea popularității web -ului designeri i au început să caute diferite
posibilit ăți de a adăuga layout documentelor online. Pentru a răspunde acestor cerințe,
producătorii de browsere (in acea vreme Microsoft și Netscape) au inventat noi taguri
HTML precum <font> care diferă față de tagurile originale HTML prin faptul ca definesc
layoutul și nu structura.

Acest lucru a dus și la o situație unde tagurile originale de structura ca <table> să
fie folosite necorespunzător pe pagini de layout (to layout pages). Multe tag -uri noi de
layout brecum <blink> erau recunoscute numai de unele browsere. O formula comuna ce
apărea pe website -uri era "Aveți nevoie de browserul X pentru a vedea aceasta pagina".
CSS a fost inventat pentru a remedia aceast ă situație, furnizându -le designerilor facilitați
sofisticate pentru editarea layoutului, suportate de toa te browserele. în același timp,
separarea website -urilor de prezentare pentru documente de conținutul documentelor
ușurează foarte mult întreținerea lor, motiv pentru care CSS a reprezentat un element
revoluționar în lumea web -designului. CSS rezolva și alte probleme, care țineau de
conținut și de încărcarea codului, astfel ca utilizând limbajul CSS, paginile unui site puteau
avea acum același still, același design deoarece CSS separa stilul tag -urilor de tag -uri și
da posibilitatea de a pune toate stil urile în secțiunea HEAD a unei pagini HTML sau într-
un fișier extern style.css la care sunt legate toate paginile HTML. Astfel, c a să legam
fișierul HTML de cel cu CSS trebuie să adăugați în fișierul HTML următoarea linie în
secțiunea HEAD a paginii imedia t după titlu:
<link rel="stylesheet" type="text/css" href="style.css">

40
Beneficiile concrete ale limbajului CSS includ urmatoarele:
 controlarea layout -ului documentelor dintr -o singura pagina de stiluri,
 control mai exact al layout -ului,
 aplicare de layout -uri diferite pentru tipuri media diferite (ecran, tipărire , etc),
 tehnici numeroase și sofisticate.

Beneficiile sintaxei CSS sunt următoarele:
 formatarea este introdusa într-un singur loc pentru tot documentul
 editarea rapida a etichetelor
 datorita intro ducerii într-un singur loc a etichetelor se obține o micșorare a
codului paginii, implicit încărcarea mai rapida a acesteia

4.1. Sintaxa CSS
Sintaxa CSS este structurata pe trei nivele. Cea mai mare importanta (suprascrie
orice alt parametru) o are sintaxa d e nivelul 1 iar cea mai mica importanta o are cea de
nivelul 3.
 nivelul 1 fiind proprietatile etichetelor din documentul HTML, tip inline
 nivelul 2 este informatia introdusa în blocul HEAD, tip embedded
 nivelul 3 este reprezentat de comenzile aflate în pagini separate, tip externe

1. Folosirea unui fișier extern sau nivel 3 care să conțină comenzi CSS este
foarte practic deoarece poate fi utilizat în mai multe situații (mai multe fișiere HTML pot
folosi același fișier extern CSS) eliminând timpul necesar intr oducerii codului
corespunzător în fiecare pagina și totodată editarea lor într-un singur loc pentru mai multe
fișiere. Extensia acestor fișiere este .css. Legătura paginilor HTML cu fișierele exte rne
CSS se face prin introducerea următoarei linii: <link re l="stylesheet" type="text/css"
href="fisier_css.css">. Atributele indica următoarele: rel – fișierul este tip styleshhet;
type – tip text ce conține comenzi CSS; href – fișierul sau adresa fișierului CSS. Unde
style – specific ă unde începe și unde se termi nă blocul CSS iar type este folosit pentru a
ascunde de browserele vechi, care nu cunosc sintaxa CSS, conținutul blocului style.

2. Comenzile de nivel 2 sau embedded sunt cele gazduite oriunde intre
perechea de etichete <head> și </head> conform sintaxei: <s tyle type="text/css">
<!–… comenzi CSS … –> </style>

41
3. Comenzile de nivel 1 sau inline sunt cele mai folosite, ele suprascriind
orice alte comenzi CSS. Sunt amplasate în interiorul etichetelor HTML aflate în zona
BODY și au sintaxa: <eticheta style="co dul CSS dorit">…textul sau obiectul asupra
caruia este aplicat codul CSS… </eticheta> . Este permisa chiar și folosirea comentariilor
în CSS ca și în HTML: /* Acesta este un comentariu în CSS */
O regula CSS are de cele mai multe ori forma:
selector
{
proprietate1: valoare;
proprietate2: valoare;
proprietate3: valoare;
}
Selectorul identifica elementele din pagina care vor fi afectate de regula CSS.
Selectorul poate fi reprezentat de numele elementului HTML (body , div, p, h1, h2), sau de
atributele “class” sau “id” definite în pagina HTML . Acoladele conțin
perechile “proprietate: valoare” , acestea fiind separate la rândul lor prin simbolul punct și
virgula “;”.
Proprietățile definesc caracteristicile pe care vrei să le schimbi pentru
elementele HTML selectate. Acestea se pot referi la culoare, background, font, bordura,
spațiul de izolare, spațierea între litere, poziția în cadrul paginii și multe altele.
Valorile țin de fiecare proprietate în parte. Spre exemplu, proprietă ți care țin de
poziționare, marg ini, lungime, înălțime pot primi ca valori unit ăți de măsura (pixeli,
procente, centimetri, inci etc.). De exemplu, daca vrem să definim felul cum este afișat
titlul h1 în pagina, putem să scriem:
h1
{
margin: 5px;
font-family: arial, sans-
serif;
color: blue;
}

Aceasta regula spune browserului ca heading -ul h1 va trebui afisat cu: (i) distanțiere față
de celelalte elemente de pagina de cel putin 5 pixeli; (ii) va trebui de asemenea să
foloseasca fontul Arial, iar în lipsa acestuia un font f ără serifa ; (iii) culoarea albastra.

42
4.2. ID și CLASS

ID și CLASS sunt comenzi care dau unei format ări CSS un nume. Se folosesc atunci
când dorim să aplicam un style de formatare unei anume zone. Pentru compatibilitate cu
versiunile anterioare de browsere numele asocia te zonelor nu vor conține caracterul _.
Aceste elemente specifica argumentul fontului care se asociază unui element HTML fiind
incluse ori în zona HEAD ori în interiorul etichetei dorite. în cazul de față se remarca
asemănarea cu eticheta font din HTML car e accepta argumentele type, style, size și weight .

 Elementul id se aplica unui style de format o singura data sau la o singura
eticheta HTML, plasându -se un nume acelui style. Acest element necesita
existenta come nzilor CSS în zona HEAD sau într-un fișier extern.

<html>
<head>
<title>Exemplu</title>
<style type="text/css">
<!– #albastru{color: #0000FF;} –>
</style>
</head>
<body>
<p id="albastru">Text albastru introdus prin id "albastru"</p>
Text negru
</body>
</html>

 Elementul class este similar cu id dar spre deosebire de acesta poate fi folosit de
mai multe ori sau pentru zone mai mari. Ca și la id necesita existenta come nzilor
CSS în zona HEAD sau într-un fisier extern. Clasa reprezintă un grup de taguri
care au același stil. Spre deosebire de id int r-o pagina putem avea cate clase
dorim și mai multe taguri cu același nume de clasă . în HTML o clasă se
denumeș te cu atributul class="" iar în CSS cu . (punct) și numele clasei.
<style type="text/css">
.menu{
color:#ff0000;
}
</style>
<font class="menu ">Text</font>
<font>Text</font>
<font class="menu">Text</font>
<font>Text</font>

4.3. FONT -FAMILY

Font -family este de fapt o lista de fonturi din care browserul va folosi în ordinea
în care le recunoaște (primul folosit va fi primul din lista, daca nu este re cunoscut il

43
folosește pe al doilea și tot asa mai departe). Este recomandat ca ultima poziție din lista
să fie un font generic (de exemplu serif, sans -serif sau monospace). în situația în care
numele fontului este format din doua cuvinte se încadrează intr e ghilimele duble pentru
ca brows erul să le interpreteze impreună. Î n cazul în care brows er-ul nu recunoaște
primele două fonturi din lista, să îl folosească pe al treilea.

<html>
<head>
<title>Exemplu 3_1</title>
<style type="text/css">
<!– p{font -famil y: font1,font2,arial;} –>
</style>
</head>
<body>
<p>Text scris cu cu fontul Arial</p>
Text negru
<p>Text scris cu cu fontul Arial</p>
</body>
</html>

acelaș i exemplu dar CSS introdus în eticheta p din HTML

<html>
<head>
<title>Exemplu 3_2</title>
</head >
<body>
<p style="font -family: font1,font2,arial;"> Text scris cu cu fontul
Arial</p>
Text negru
<p style="font -family: font1,font2,arial;"> Text scris cu cu fontul
Arial</p>
</body>
</html>

4.4. FONT -SIZE

Este parametrul prin care stabilim dimensiunea fontu lui, exprimat în pixeli (px),
puncte (pt), keywords sau procente. Are o funcționare asemănătoare cu eticheta <font>.
Stilul CSS este introdus în HEAD după <Title> și aplicat etichetei p, cu dimensiunea
exprimata în pixeli – <style type="text/css"> , <! – p{font -size: 20px;} –> , </style>

<html>
<head>
<title>Exemplu 3_3</title>
<style type="text/css">
<!– p{font -size: 20px;} –>
</style>
</head>
<body>
<p>Text scris cu font de 20px</p>
Text negru
</body>
</html>

44
Pentru dim ensiunea exprimată în puncte folosim același exemplu î nlocuid px cu pt.
Dimensiunea exprimata prin keywords foloseste cuvinte în loc de cifre. Sapte cuvinte
înlocuiesc dimensiunile font -ului de la 1 la 7: xx -small, x -small, small, medium, large, x –
large și xx-large. Procentele sunt o alt ă valoare pe care o poate lua font-size. Această
modalitate poate fi vizualizata diferit de browsere diferite. Ca verificare folosiți același
exemplu schimbând 20px cu 200%.

4.5. FONT -STYLE
Font-style este folosit pentru a adăuga caracteristica italica fontulu i. Poate lua
valorile normal și italic.
<style type="text/css">
<!– p{font -style: italic;} –>
</style>

4.6. FONT -WEIGHT

Font-weight este paramerul care stabilește grosimea caracterului putând lua
valorile numerice de la 100 la 900 sau BOLD, BOLDER, LIGHTER .
<style type="text/css">
<!– p{font -weight: 700;} –>
</style>

45
5. STRUCTURA ȘI FUNCȚION AREA WEBSITE -ULUI
ASOCIAȚ IEI DE PROPRIETARI

Interfața website -ului are un caracter flexibil și este relativ simplu de utilizat.
Aceasta este organiza tă în 6 arii distincte structurate în funcție de necesitățile propuse:
o arie destinata „denumirii”; doua arii destinate meniurilor – meniul principal din partea
superioara a website -ului și meniul secundar din partea inferioara a website -ului; o arie
care poate fi rulata ștanga -dreapta (slide) destinata noutăților din website; o arie
principală postată central și arie secundara (avizier) încadrată în partea dreapta a ariei
principale. Aria principală afișează conținuturile paginilor accesate prin intermed iul
legăturilor din meniurile sitului și din aria „avizier”.
Grafic, ariile corespunzătoare antetului website -ului, bara de meniu și bara
glisanta de noutăți arata în felul următor:

La nivel de cod, evidențiez următoarele:
Structura stilului CSS:
body {
margin:0px;
padding:0px;
color:#555;
font-family: "Trebuchet MS", Arial, Helvetica, sans -serif;
font-size:13px;
line-height:1.5em;
background -color:#ffffff;
background -image: url(images/templatemo_body.jpg);
background -repeat:repeat -x;
}

46
a, a:li nk, a:visited {
color: #0074c5;
text-decoration: none;
}
a:hover {
color: #009900;
text-decoration: underline;
}
p {
margin: 0px;
padding: 0 0 10px 0;
font-style: normal;
text-align: left;
}

img { border: none; }

h1, h2, h3, h4, h5{
font-weight : normal;
line-height: 27px;
}

h1 { font -size: 36px; color: #000; }
h2 {
font-size: 24px;
color: #000;
margin: 0 0 20px 0;
padding: 0;
}
h3 {
font-size: 21px;
color: #ccc;
margin: 0 0 20px 0;
padding: 0;
text-align: left;
}
h4 { font -size: 18px; color: #000; margin: 0 0 10px 0; padding: 0; }
h5 { font -size: 16px; color: #000; margin: 0 0 10px 0; padding: 0; }
h6 { font -size: 14px; margin: 0 0 5px 0; padding: 0;}

.cleaner {
clear: both;

47
width: 100%;
height: 0px;
font-size: 15px;
color: #FFF;
}

.cleaner_h10 { clear: both; width:100%; height: 10px; }
.cleaner_h20 { clear: both; width:100%; height: 20px; }
.cleaner_h30 { clear: both; width:100%; height: 30px; }
.cleaner_h40 { clear: both; width:100%; height: 40px; }
.cleaner_h50 { clear: both; width:100%; height: 50px; }
.cleaner_h60 { clear: both; width:100%; height: 60px; }

.float_l {
float: left;
}

.float_r {
float: left;
}

blockquote {
}
cite { font -weight: bold; }
cite span { color: #000; }

.button a{
clear: both;
display: block;
width: 103px;
height: 23px;
padding: 4px 0 0 0;
background: url(images/templatemo_button.png) no -repeat;
color: #fff;
font-size: 12px;
font-weight: bold;
text-align: center;
text-decoration: none;
}

.button a:hover {
background: url(images/templa temo_button_hover.png) no -repeat;

48
text-align: center;
}

#templatemo_header_wrapper {
width: 980px;
margin -top: 0;
margin -right: auto;
margin -bottom: 0;
margin -left: auto;
padding -top: 0;
padding -right: 5px;
padding -bottom: 0;
padding -left: 5px;
}

#templatemo_header {
width: 920px;
height: 100px;
padding: 0 30px;
}

#templatemo_header #site_title {
float: left;
width: 630px;
padding -top: 25px;
padding -right: 0;
padding -bottom: 0;
padding -left: 0;
}

#templatemo_header #site_title h1 {
margin: 0;
padding: 0;
}

#templatemo_header #site_title h1 a{
margin: 0px;
padding: 0px;
font-size: 30px;
color: #ffffff;
font-weight: bold;
text-decoration: none;

49
}

#templatemo_header #site_title h1 a span {
display: block;
text-align: left;
font-size: 13px;
color: #CCC;
font-weight: bold;
letter -spacing: 1px;
}

#templatemo_header #search_box {
float: right;
width: 280px;
height: 30px;
margin -top: 30px;
background: url(images/templatemo_search.png) no -repeat;
}

#search_box form {
width: 280px;
height: 30px;
margin: 0;
padding: 0;
}

#searchfield {
height: 15px;
width: 180px;
padding: 5px 5px 5px 5px;
margin -right: 0px;
color: #bcbcbc;
font-size: 12px;
font-variant: normal;
line-height: normal;
background: #161b1f;
bord er: 1px solid #0b0e10;
}

#searchbutton {
height: 28px;
width: 80px;

50
padding -bottom: 3px;
cursor: pointer;
font-size: 13px;
text-align: center;
vertical -align: bottom;
white -space: pre;
color: #333;
}

/* menu */
#templatemo_menu {
clear: both;
height: 39px;
padding: 11px 0 0 0;
}

#templatemo_menu ul {
margin: 0;
padding: 0 0 0 30px;
list-style: none;
}

#templatemo_menu ul li {
padding: 0px;
margin: 0px;
display: inline;
}

#templatemo_menu ul li a {
position: relative;
float: left;
width: 103px;
display: block;
height: 23px;
padding: 4px 0 0 0;
margin -right: 10px;
text-align: center;
font-size: 12px;
text-decoration: none;
color: #21272d;
font-weight: bold;
outline: none;

51
}
#templatemo_menu li a:hover, #templatemo_menu li .current {
color: #fff;
background: url(images/templatemo_menu_hover.png);
}
/* end of menu */
/* banner*/
#templatemo_banner {
clear: both;
width: 920px;
height: 200px;
padding: 50px 30px;
background: url(images/templatemo_banner.jpg) no -repeat;
overflow: hidden;
}

#templatemo_banner h3 {
color: #99CCFF;
font-size: 42px;
}

#templatemo_banner p {
color: #FFFFFF;
font-size: 16px;
}

#templatemo_content_wrapper_outer {
background: url(images/templatemo_content_top.jpg) top repeat -x;
border -top: 1px solid #004e85;
padding: 30px;
margin -top: 0px;
margin -right: auto;
margin -bottom: 0px;
margin -left: auto;
}

#templatemo_content_wrapper_inner {
width: 100%;
background: url(images/templatemo_content_bottom.jpg) bottom repeat -x;
}

#templat emo_content_wrapper {

52
width: 920px;
margin: 0 auto;
padding: 30px;
}

#templatemo_content {
width: 620px;
float: left;
text-align: left;
}

.service_box {
width: 280px;
}

.service_image {
float: right;
width: 64px;
margin: 3px 0 0 0;
}

.service _box .service_text {
float: left;
width: 200px;
text-align: justify;
}

.services_section {
clear: both;
padding -bottom: 30px;
margin -bottom: 30px;
border -bottom: 1px solid #CCC;
background: url(images/templatemo_divider.jpg) bottom repeat -x;
}

.services_section h4 {
margin -bottom: 20px;
}
.services_section .right {
float: right;
width: 120px;
}

53
.services_section .right img {
}

.services_sectio .services_content {
clear: both;
margin: 10px 0;
}

.services_section .left {
float: left;
width: 470px;
}

.services_section .left p {
text-align: justify;
}

.post_section {
clear: both;
padding -bottom: 10px;
margin -bottom: 10px;
border -bottom: 1px solid #CCC;
background: url(images/templatemo_divider.jpg) bottom repeat -x;
}

.post_section h2 {
margin: 0 0 5px 0;
padding: 10px 0 5px 0;
background: url(images/templatemo_header.png) no -repeat bottom left;
}

.post_section .post_content {
clear: both;
margin: 10px 0;
}
.post_content .left {
float: left;
width: 130px;
}

.post_content .l eft img {
border:1px solid #CCC;

54
padding: 5px;
background: #fff;
}

.post_content .right {
float: right;
width: 450px;
text-align: left;
}

.post_section p {
padding -bottom: 5px;
margin -bottom: 8px;
color: #333;
}

.post_section .comment_tab {
padding: 10px 0;
margin: 40px 0 20px 0;
border -bottom: 1px dashed #666;
font-size: 20px;
font-weight: bold;
}
#recent_project {
width: 620px;
}
#recent_project ul { list -style: none; margin: 0; padding: 0; }
#recent_project ul li {
float: left;
display: inline;
padding: 0;
margin: 0;
width: 270px;
padding: 6px;
margin: 0 25px 25px 0;
background: #f1f2ea;
border: 1px solid #d5d7ca;
}
#recent_project ul img {
width: 270px;
height: 130px;
border: none;

55
margin -bottom: 5px;
}

#contact_form {
float: left;
padding: 20px 0 0 0;
}

#contact_form form {
margin: 0px;
padding: 0px;
/*border:1px solid #e2d1be;
padding: 20px 20px 10px 20px; */
}

#contact_form form .input_field {
height: 18px;
width: 230px;
}

#contact_form fo rm label {
display: block;
margin -right: 10px;
font-size: 14px;
}

#contact_form form textarea {
width: 310px;
height: 150px;
}

#contact_form form .submit_btn {
float: left;
margin -right: 110px;
width: 103px;
height: 27px;
padding: 0px 0 0 0;
text-align: center;
cursor: pointer;
border: none;
color: #fff;
background: url(images/templatemo_button.png) no -repeat;

56
}

/* sidebar */
#templatemo_sidebar {
float: right;
width: 240px;
}

#sidebar_featured_project {
margin: 0 0 40px 0;
padding: 0;
}

#sidebar_featured_project .left {
float: left;
width: 64px;
}

#sidebar_featured_project .right {
float: right;
width: 170px;
}

#sidebar_featured_project h6 a{
color: #fff;
}

#news_section {
margin: 0 0 40px 0;
padding: 0;
font-family: "Tre buchet MS", Arial, Helvetica, sans -serif;
font-size: 15px;
}

.news_section h3 {
}

.news_box a {
font-weight: bold;
text-decoration: underline;
}

57
.news_box {
margin -bottom: 10px;
padding -bottom: 10px;
border -bottom: 1px dashed #CCC;
font-size: 12 px;
}
/* end of sidebar */

/* footer */
#templatemo_footer_wrapper {
width: 980px;
margin -top: 0;
margin -right: auto;
margin -bottom: 0;
margin -left: auto;
padding -top: 0;
padding -right: 0;
padding -bottom: 0;
padding -left: 0;
background: #005590 url(images/templatemo_footer.jpg) repeat -x top;
}
#templatemo_footer {
clear: both;
width: 980px;
padding: 20px 30px;
margin: 0 auto;
text-align: center;
color: #FFFFFF;
}
#templatemo_footer a {
color: #FFFFFF;
font-weight: normal;
text-decoration : underline;
}

#templatemo_footer a:hover {
color: #33CCFF;
text-decoration: none;
}

#templatemo_footer .footer_menu {
margin: 0 0 10px 0;

58
padding: 0px;
list-style: none;
}

.footer_menu li {
margin: 0px;
padding: 0 20px 0 0;
display: inline;
}

.footer_menu li a {
color: #ffffff;
}

.footer_menu .last_menu {
border: none;
}
/* end of footer */

#templatemo_content_wrapper_outer #templatemo_content_wrapper_inner
#templatemo_content_wrapper #templatemo_content p strong {
color: #00F;
}
#template mo_content_wrapper_outer #templatemo_content_wrapper_inner
#templatemo_content_wrapper #templatemo_sidebar #news_section pre strong {
font-size: 25px;
color: #06F;
font-family: "Trebuchet MS", Arial, Helvetica, sans -serif;
font-weight: bold;
}
#templat emo_content_wrapper_outer #templatemo_content_wrapper_inner
#templatemo_content_wrapper #templatemo_content p strong {
text-align: left;
}
#templatemo_content_wrapper_outer #templatemo_content_wrapper_inner
#templatemo_content_wrapper #templatemo_content p {
text-align: left;
}
#templatemo_header_wrapper #templatemo_banner #one .cs_wrapper .cs_slider .cs_article .left p {
text-align: left;
}
#templatemo_header_wrapper #templatemo_banner p strong {

59
text-align: leftt;
}
#templatemo_header_wrapper #templat emo_banner p strong {
text-align: left;
}
#templatemo_header_wrapper #templatemo_banner p strong {
text-align: left;
}
#templatemo_header_wrapper #templatemo_banner h3 {
text-align: left;
}

Structura HTML:

<div id="site_title">
<h1><a href ="index.html" target="_parent">
<img src="images/templatemo_logo.png" alt="Web Templates" />
<span class="cleaner">Asociatia de Proprietari a Blocului F13, Str.Tincani nr.10,
sector 6, Bucuresti </span>
</a></h1 >
</div>
<div id="search_box">
<form action="#" method="get">
<input type="text" value="" name="q" size="10" id="searchfield" title="searchfield"
onFocus="clearText(this)" onBlur="clearText(this)" />
<input type="submit" name="Search" value="Search" alt="Search"
id="searchbutton" title="Search" />
</form>
</div>
<div class="cleaner"></div>
</div><! – end of header –>
<div id="templatemo_menu">
<ul>
<li><a href="index.html" class="current">Despre noi</a></li>
<li><a href="legislatie.html">Legislatie</a></li>
<li><a href="calcule.html">Calcule</a></li>
<li><a href="atributii.html">Atributi i</a></li>
<li><a href="liste_plati.html">Liste &amp; Plati</a></li>
<li><a href="utile.html">Info Utile</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

60
</div><! – end of templat emo_menu –>
<div id="templatemo_banner">
<div id="one" class="contentslider">
<div class="cs_wrapper">
<div class="cs_slider">
<div class="cs_article">
<div class="left">
<h2><strong>Încă o obligație pentru administratorii </strong><br
/><strong>asociațiilor de proprietari </strong></h2>
<p>informarea trimestrial ă, în scris sau prin poșta electronică….<br />
<div class="button"><a href="calcule_1.html">Read more</a></div>
</div>
<div class="right">
<a href="calcule_1.html" target="_parent"><img
src="images/slider/templatemo_slide02.jpg" alt="Template 1" /></a>
</div>
</div><! – End cs_article –>
<div class="cs_article">
<div class="left">
<h2>Asociațiile de proprietari sunt obligate să arate cum calculează
sumele lunare de plată, altfel riscă amenzi de mii de lei</h2>
<p>Asociațiil e de proprietari sunt obligate să afișeze…..</p>
<div class="button"><a href="calcule_4.html">Read more</a></div>
</div>
<div class="right">
<a href="calcule_4.html" target="_parent"><img
src="images/slider/templatemo_slide01.jpg" alt="Template 2" /></a>
</div>
</div><! – End cs_article –>
<div class="cs_article">
<div class="left">
<h2>Ghid fiscal pentru asociatiile de proprietari</h2>
<p>Asociatiile de proprietari sunt scutite de la pl ata impozitului … </p>
<div class="button"><a href="calcule_3.html">Read more</a></div>
</div>
<div class="right">
<a href ="calcule_3.html" target="_parent"><img
src="images/slider/templatemo_slide03.jpg" alt="Template 3" /></a>
</div>
</div><! – End cs_article –>
<div class="cs_article">
<div class="left">

61
<h2>Ajutoare de încălzire – se depun cererile</h2>
<p>Direcția Generală de Asistență Socială și Protecția Copilului….</p>
<div class="button"><a href="calcule_6.html">Read more</a></div>
</div>
<div class="right">
<a href="calcule_6.html" target="_parent "><img
src="images/slider/templatemo_slide04.jpg" alt="Template 4" /></a>
</div>
</div><! – End cs_article –>
</div><! – End cs_slider –>
</div><! – End cs_wrapper –>
</div><! – End contentslider –>
<!– Site JavaScript –>
<script type="text/javascript" src="js/jquery -1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.j s"></script>
<script type="text/javascript" src="js/jquery.ennui.contentslider.js"></script>
<script type="text/javascript">
$(function() {
$('#one').ContentSlider({
width : '9 20px',
height : '200px',
speed : 800,
easing : 'easeInOutBack'
});
});
</script>
<div class="cleaner"></div>
</div>

Paginile destinate fiecărui titlu din meniu pot fi accesate prin intermediul
legăturilor corespunzătoare acestora iar conținutul lor este afișat în aria principală a
site-ului. Acestea sunt structurate modular , în cadre/module distincte pentru fiecare
subtitlu în parte, conform tipului de conținut nou și structurii informației.
In același scop am gândit și existenta pe prima pagina a website -ului a unui
cadru glisant care să anunțe noutățile.

62

Titlul Buton: Despre noi

Titlul Buton: Legislație

63

Titlul Buton: Calcule

64
Titlul Buton: Atributii

65
Cod sursa caseta subcapitol:
<div id="templatemo_content">
<div id="gallery">
<ul>
<li>
<a href="utile_1.html" title="atributii 1"><img
src="images /gallery/thumbnail/image_01.jpg" alt="01" /></a>
<h4 name="44658">Obligațiile asociațiilor de proprietari în 2017</h4>
<p>Asocia ția de proprietari este o persoană juridică ce -și asumă cele mai multe
dintre re sponsabilită țile privitoare la o clădire de locuin țe, care poate impune obliga ții pentru to ți
proprietarii din respectivul bloc de locuin țe.</p>
<div class="button"><a href="atributii_1.html">detali</a></div>
</li>

Titlul Buton: Liste & Plati

66
Titlul Buton: Info utile

Titlul Buton: Contact

67

Titlu Subcapitol al butonului Calcule :

Titlu Subcapitol al butonului Liste & Plati :

68
Cod sursa :
<div id="templatemo_content_wrapper_outer">
<div id="templ atemo_content_wrapper_inner">
<div id="templatemo_content_wrapper">

<div id="templatemo_content">
<div class="post_section">
<div class="post_section">
<h2>A. Repartizarea cheltuielilor pe persoana</h2>
<div class="post_content">
<div class="left"> <img src="images/templatemo_image_01.jpg" alt="image" /> </div>
<div class="right">
<p><strong>Cheltuielile pe persoana </strong>reprezinta cheltuielile privind serviciile
de care beneficiaza persoanele – proprie tari/locatari, care locuiesc/desfasoara activitati în mod curent în
cadrul condominiului, în proprietati individuale. </p>
<p>In cazuri exceptionale, în lipsa aparatelor de inregistrare a consumului de apa, la
intrarea în reteaua de alimentare a condominiului, la bransament, acest consum se determina potrivit
normelor legale, în sistem pausal, pe fiecare tip de consumator.</p>
<div class="button"><a href="calcule_a.html">detalii</a></div>
</div>
<div class="cleaner"></div >
</div>
</div>

Din punct de vedere tehnic site -ul oferă posibilitatea stocării, organizării și
accesării diferitor fișiere destinate vizualizării sau descărcării de către utilizatori /
locatari / proprietari.

Inițierea și realizarea proiectu lui de față a urmărit identificarea unor modalități
optime de adaptare a tehnologiilor web pentru utilizarea lor în cadrul procesului de
informare în domeniul Asociatiilor de Proprietari. Utilizarea tehnologiilor informației
și comunicării în cadrul unui astfel de proces de informare necesită totusi competențe
informatice minime și o conexiune la Internet.

Soluția tehnică specifică utilizată pentru construcția website -ului de față a avut
în vedere costurile relativ reduse pe care le implică, adecvarea fu ncțiilor specifice ale
sistemului de management al conținutului la specificul cerințelor administrării unei
Asociații de Proprietari. În acest sens au fost urmărite mai multe criterii specifice de

69
evaluare a sistemului utilizat: (1) adaptabilitatea informa tiva a website -ului pe
structuri noi și diferite ; (2) caracterul accesibil al interfeței grafice și design -ul
instrucțional; (3) gradul de interactivitate și posibilitatea creării unui mediu
colaborativ ; (4) aspectul motivațional (gradul în care programul dispune de elemente
ușor de înțeles și de găsit în structura website -ului); (5) posibilitatea utilizării
formatelor multi -media . O analiză în funcție criteriile de mai sus relevă adecvarea în
bună măsură a soluției adoptate la scopul pe care mi l –am propu s în vederea elaborării
acestui proiect. Proiectarea unui astfel de website poate permite o îmbun ătățire a
comunicării dintre proprietari și asociație și conferă o lărgire a comunității virtuale,
precum și noi oportunități de creștere a gradului de pregăt ire și adaptare la noile
tehnologii web a utilizatorilor.
6. Bibliografie
 Buraga, S., Proiectarea siturilor Web. Design și funcționalitate, Editura Polirom,
Iași, 2002.
 Drăgănescu, M., Globalizarea și societatea informa țional ă, Studiu pentru grupul
ESEN II, Academia Român ă, Bucure ști, februarie, 200 1.
 https://manualelectronictic.wordpress.com/category/adobe -dreamweaver -cs6/

70
ANEXE:

Lista celor mai utilizate taguri HTML cu valoare atribut și detalii:

Nume tag Nume
atribut Valoare atribut Detalii
<A> Ancora
href URL Adresa c ătre care vrem să fie legătura
target _blank
_self
_parent
_top Fereastra în care se va face afi șarea
<B> Text aldin
<BODY> Cuprinsul do cumentului
background adresa imaginii Imaginea de fond
bgcolor cod culoare
nume culoare Culoarea fondului
leftmargin procent din
latimea paginii
numar de pixeli Distan ța dintre marginea din stânga a
ferestrei browserului și marginea din
stânga a pa ginii
topmargin procent din
inaltimea paginii
numar de pixeli Distanta dintre marginea de sus a
ferestrei browserului și marginea de sus
a paginii
text cod culoare
nume culoare Culoarea textului
alink cod culoare
nume culoare Culoarea leg ăturilor act ive (atunci cand
mouse -ul se afla deasupra lor)
link cod culoare
nume culoare Culoarea leg ăturilor nevizitate (nu s -a
efectuat nici un click pe ele)
vlink cod culoare
nume culoare Culoarea leg ăturilor vizitate
(s-a efectuat cel putin un click pe ele)
<BR> Sfârșitul r ândului
<CENTER> Afișarea în centrul paginii
<FONT> Fontul textului
color cod culoare
nume culoare Culoarea fontului
face nume font Tipul fontului
size un numar
de la 1 la 7 Mărimea fontului
<FORM> Formular interactiv

71
action URL Adresa scriptului care prelucreaz ă
datele
din cadrul formularului
method GET
POST Metoda de prelucrare a datelor
formularului
<FRAME> Cadru (fereastra)
frameborder 1 sau 0 Cadrul are sau nu are chenar
marginheight numar de pixeli Spațiu deasupra și sub un cadru
marginwidth numar de pixeli Spațiu la st ânga și la dreapta unui cadru
src URL Sursa cadrului
<FRAMESET> Multime de ferestre
cols procent din
latimea paginii
numar de pixeli numărul și marimea relativ ă a
coloanelor
rows procent din
inaltimea paginii
numar de pixeli numărul și marimea relativ ă a rândurilor
H1, H2, H3,
H4, H5, H6 Titluri în cadrul documentului
align left
center
right
justify Alinierea titlului
<HEAD> Antetul documentului
<HR> Linie orizontal ă
align left
center
right Alinierea orizontal ă a liniei
color cod culoare
nume culoare Culoarea liniei
size numar de pixeli Înalțimea liniei
width procent din
latimea paginii
numar de pixeli Lățimea liniei
<HTML> Document HTML
<I> Text italic
<IMG> Adaugarea unei imagini

72
align left
right
top
middle
bottom Alinierea imaginii în pagina: left
(stanga)
sau right (dreapta)
Alinierea elementelor din jurul
imaginii:
top (sus), middle (mijloc), bottom (jos)
alt text Text ce va fi afi șat în locul imaginii, în
cazul în care, aceasta nu este afi șată
border numar de pixeli Marimea chenarului din jurul imaginii
height procent
numar de pixeli Înaltimea imaginii
hspace numar de pixeli Spațiu pe orizontal ă în jurul imaginii
src URL Adresa imagi nii
vspace numar de pixeli Spațiu pe vertical ă în jurul imaginii
width procent
numar de pixeli Lățimea imaginii
<INPUT> Element al formularului
maxlength numar Num ăr maxim de caractere
name date de tip
caracter Numele elementului formularului
size numar Marimea elementului formularului
src URL Adresa pentru o imagine
type text
password
checkbox
radio
submit
reset
file
hidden
image
button Tip input
value date de tip
caracter Valoare input
<LI> Element al unei liste
<META> Metainforma ții
content text Descrie valoarea atributului name
name author Autor
description Descriere
keywords Cuvinte cheie

73
<OL> Lista ordonat ă
start numar Cu ce valoare începe numerotarea
type A, a, I, i, 1 Tipul numerotarii: A, a, I, i, 1 (implici t)
<P> Paragraf
align left
center
right
justify Alinierea paragrafului
<SELECT> Lista de selec ții
multiple Permite selec ția mai multor elemente
name date de tip
caracter Numele listei de selec ții
size numar Num ărul de elemente ale listei
<STRONG> Text eviden țiat
<SUB> Text indice
<SUP> Text exponent
<TABLE> Tabel
align left
center
right Alinierea tabelului
background URL Imaginea de fond pentru tabel
bgcolor cod culoare
nume culoare Culoarea fondului pentru tabel
border procent
numar de pixeli Chenarul tabelului
bordercolor cod culoare
nume culoare Culoarea chenarului
cellpadding numar de pixeli Spațiu între con ținutul celulelor
tabelului și marginile lor
cellspacing numar de pixeli Spațiu intre celulele tabelului
cols numar Num ărul de coloane ale unui tabel
hspace numar de pixeli Spațiu pe orizontal ă în jurul tabelului
vspace numar de pixeli Spațiu pe vertical ă în jurul tabelului
width procent
numar de pixeli Lațimea tabelului
<TD> Celula de tabel

74
align left
center
right Alinierea continutului celulei pe
orizontal ă
background URL Imaginea de fond pentru celula
bgcolor cod culoare
nume culoare Culoarea fondului pentru celula
colspan numar Num ărul de coloane pe care se întinde
celula
height numar d e pixeli Înaltimea celulei
rowspan numar Numarul de linii pe care se intinde
celula
valign top
middle
bottom Alinierea continutului celulei pe
vertical î
width număr de pixeli Lățimea celulei
<TEXTAREA> Câmp de editare multilinie
cols număr Num ărul de coloane
name date de tip
caracter Numele c âmpului de editare multilinie
rows numar Num ărul de r ânduri
<TITLE> Titlu document
<TR> Rând tabel
align left
center
right Alinierea continu țului celulelor
pe orizontal ă
bgcolor cod culoare
nume culoare Culoarea fondului pentru tot r ândul
valign top
middle
bottom Alinierea continu țului celulelor pe
vertical î
<U> Text subliniat
<UL> Lista neordonat î
type circle
disc
square Forma marcajului

75
CUPRINS :

1. INTRODUCERE ………………………………………………………………………………. 3
1.1. Necesitatea asociațiilor de proprietari și a prezenței lor în on -line ……………….. 4
1.2. Implementarea tehnologiilor informației și comunicării în societate ………… … 6
1.3. Modalități de redare a informației …………………………… 9
1.4. Proiectarea unui website – aspecte interactive și colaborative ale Internetului ….. 11
1.5. Utilizarea facilităților de tip Web 2.0 ………………………………………………. ……….. 12
1.6. Promovarea unui website ……………………………………………………………………. 16
1.7. Mentenanța unui website ………………………… …………………………………………….. 16
2. ARGUMENT ………………………………………………………………………………………… 18
2.1. Instrumente de dezvoltare utilizate în crearea website -ului …………………. ……….. 20
3. Noțiuni de bază ale limbajului HTML ………………………………………………………… 23
3.1. Elementele limbajului HTML și structura unui document HTML ……………….. 23
3.1.1. Structura unui document html …………………………………………………………………. 24
3.1.2. Formatarea textului ………………………………………………. ……………………………. 25
3.1.3. Inserarea listelor în documente HTML ……………………………………………………… 29
3.1.4. Inserarea tabelelor în documente HTML ………………………………………………….. 30
3.1.5. Inserarea de Cadre în d ocumentul HTML …………………………………………………. 31
3.1.6. Inserarea de Formulare în documentul HTML ……………………………………………… 33
3.1.7. Inserarea legăturilor în documente HTML …………………………………………………… 35
3.1.8. Inserarea imaginilor în documente HTML …………………… ……………………………. 37
4. NOȚIUNI DE BAZĂ ALE LIMBAJULUI CSS …………………………………… 39
4.1. Sintaxa CSS ……………………………………………………………………………….. 40
4.2. id și class ………………………………………………………………………………….. 42
4.3. font-family ……………………………………………………………………………. 42
4.4. font-size ……………………………………………………………………………………………. 43
4.5. font-style …………………………………………………………………………………….. 44
4.6. font-weight ………………………………………………………………………………………….. 44
5. STRUCTURA ȘI FUNCȚIONAREA WEBSITE -ULUI ASOCIAȚIEI DE
PROPRIETARI …………………………………………………………………………………………… 45
6.Bibliografie …………………………………………………………………………………………… 69
Anexe …………………………………………………………………………………………………………. 70