Colegiul National "Octavian Goga" Marghita

PROIECT PENTRU
SUSINEREA ATESTATULUI PROFESIONAL
LA INFORMATIC

FILIER: TEORETIC
TEORETIC
PROFIL: REAL
SPECIALIZARE: MATEMATIC-INFORMATIC

CANDIDAT,
ELEV:
CLASA : a XII-a A
COORDONATOR PROIECT,
PROF. Mihuc Zenovia

MAI 2013

-1-

Colegiul National "Octavian Goga" Marghita

Magazin seciunea alimente

-2-

Colegiul National "Octavian Goga" Marghita

CUPRINS

1.Motivul alegerii temei

pag.4

2.Noiuni HTML i Internet

pag.5-24

3.Structura aplicaiei

pag.25-28

4.Resurse de hard i soft necesare

pag.29-30

5.Modaliti de utilizare

pag.31

6.Posibiliti de dezvoltare

pag.31

-3-

Colegiul National "Octavian Goga" Marghita

1.Motivul alegerii temei

Am ales ca tem pentru site-ul meu prezentarea unei seciuni a unui magazin,
i anume seciunea de alimente a magazinului, ntruct mi s-a prut interesant
ideea unui magazin alimentar online de unde clienii s poat comanda produsele
care i le doresc fr ca s fie nevoie s se mai deplaseze la supermarket i care
vor s evite cozile mari de la supermarketuri.
Consider c acest magazin online ar putea fi chiar foarte util att pentru cei
tineri, ct i pentru cei n vrst care nu se pot deplasa pe distane prea mari.

-4-

Colegiul National "Octavian Goga" Marghita

2.Noiuni HTML i Internet

INTRODUCERE
Ca proiect pentru atestat am ales realizarea unui site web cu tema Magazin seciunea alimente. n ziua de
azi tot mai mult lume acceseaz internetul, fiind modul cel mai simplu prin care poi gsi informaiile cutate. De
asemenea consider c proiectarea unui site web pe lng faptul c se poate nva destul de uor, poate fi un mod
plcut n care i poi dezvolta creativitatea i imaginaia. Acestea sunt motivele pentru care am ales pentru atestat
realizarea unui proiect HTML, iar motivul alegerii temei Magazin seciunea alimente este dorina de a cunoate
castelul mai bine.
Activitatea de proiectare a site-urilor Web implic: imaginaie, capacitatea de analiz, creativitate i o
cunoatere temeinic a limbajului HTML. Proiectarea unui site are mai multe etape: identificarea cu exactitate a
obiectivului, culegerea i selectarea informaiilor, proiectarea structurii i a aspectului grafic al site-ului, implementarea,
testarea, publicarea i etapa de promovare.
Editoarele utilizate pentru proiectarea paginilor web pot fi: de texte (Notepad), HTML (FrontPage, Macromedia
Dreamweaver), grafice (Flash, Switch Max). Pentru realizarea site-ului Magazin seciunea alimente am folosit
aplicaia Web-design Macromedia DREAMWEAVER 8 ca editor HTML.
Proiectarea site-ului Magazin seciunea alimente a fost realizat pe urmtoarea arhitectur hardware &
software: microprocesor AMD Athlon(tn) XP 2000+, 2.67MHz, 448 MB RAM, HDD 80 GB 7200 rpm ATA/100, CD-ROM
52x Creative, plac video 64 MB, monitor 17; sistem de operare Microsoft Windows XP Profesional Version 2002, cu
Service Pack 2; aplicaie Web design Macromedia Dreamweaver 8.
Lucrarea de atestat cuprinde 5 capitole. n primul capitol Noiuni generale despre internet am vorbit despre
istoricul lNTERNET-ului i despre apariia i funcionarea World Wide Web (www). n capitolul al doilea m-am axat pe
limbajul HTML: structura unui document HTML, liste i referine, imagini i sunete, tabele, cadre, formulare i altele.
Capitolul al treilea cuprinde noiuni generale despre web design: principii de organizare vizual, folosirea culorilor,
design pentru Web. n capitolul al patrulea am descris n detaliu modul de realizare a site-ului Magazin seciunea
alimente, proiectul meu de atestat, iar capitolul cinci cuprinde concluzii finale.

-5-

Colegiul National "Octavian Goga" Marghita

CAPITOLUL I
NOIUNI GENERALE DESPRE INTERNET

1.1. Istoricul INTERNET- ului

Reeaua Internet a aprut acum 20 de ani, printr-un efort de a conecta reeaua Departamentului Aprrii
Statelor Unite (cunoscut sub numele de ARPAnet Advanced Research Projects Agency) cu alte reele conectate prin
dispozitive radio sau satelit.
ARPAnet a fost o reea experimental proiectat s asigure suportul pentru cercetarea militar - n particular,
cercetri privind construirea unor reele care puteau rezista cu succes unor ntreruperi pariale.
Una din cele mai importante reele noi aprute ulterior a fost NSFNET, nfiinat de NSF (National Science
Fundation),

agenie

guvernamental

american. Spre sfiritul anilor 80

aceast

organizaie a creat cinci noduri de

comunicaii

puternice n centrele universitare

americane

mai importante. Problema care

aprea acum era

datorat

costului

al

serviciului

telefonic

prin

telefonice

nchiriate

pe

nfiinarea

unor

linii

ridicat

cele

distane foarte mari.

Soluia

constat

centre regionale. Astfel, aproape

fiecare

campus

universitar a fost conectat la

centrul

Internet

cel mai apropiat.

n 1982 - ARPANet s-a unit cu MILNet (Reea militar), cu NSFNet (cercettori i oameni de tiin) i cu alte
reele (de exemplu BITNet i USENet, reele concepute pentru schimbul de tiri).
n anii 90 Internetul crete cu o vitez pe care cercettorii sau fondatorii acestei reele nici nu au visat-o. Noi
companii se lanseaz cu o vitez fenomenal i multe persoane acceseaz Internetul prin distribuitori sau servicii
familiare.

-6-

Colegiul National "Octavian Goga" Marghita

n prezent mediul Internet este constituit din circa 23 000 de sisteme de reele direct accesibile prin Internet
(date care la ora redactrii acestei lucrri pot fi deja nvechite!!!).
Viitorul Internetului este deosebit de promitor, programele folosite devin din ce n ce mai prietenoase i mai
uor de folosit. De asemenea, conexiunile se realizeaz cu viteze din ce n ce mai mari.
Serviciile on-line (CompuServe, America Online, Delphi, Microsoft Network), sunt companii care dein propriile
reele pentru a furniza diverse servicii, ca de exemplu tiri internaionale, servicii de comer etc.

1.2. Apariia World Wide Web (WWW)

Cu aproximaie WWW-ul a aprut n luna martie a anului 1989. Tim Berners Lee de la Laboratorul European de
Fizica particulelor din Geneva (CERN) a pus n circulaie propunerea de a dezvolta un sistem hypertext n vederea unei
eficiente partajri a informaiei ntre echipele de cercettori din High Energy Physics Community, situate n zone
geografice diferite.

1.3. Funcionarea World Wide Web

Cea mai important caracteristic a WWW o constituie simplitatea modului de acces la resurse. n mare
msur aceasta se datoreaz protocolului de comunicaie implementat numit HTTP (HyperText Transport Protocol).
O sesiune de transfer se desfoar astfel:

se realizeaz o conexiune client-server;

clientul lanseaz o cerere (request);

serverul furnizeaz clientului rspunsul la cererea formulat;

serverul ncheie conexiunea.

Prima etap, cea de conectare, este vizibil prin apariia n bara de stare a browser-ului a mesajului

Connecting to HTTP server. Dac conexiunea nu se poate realiza apare mesajul de eroare Cant connect to server,
nsoit de motiv. Odat conexiunea la un server HTTP stabilit, clientul lanseaz cererea. Aceasta specific tipul de
protocol folosit, resursa solicitat (fiierul sau grupul de fiiere) i n ce fel trebuie s rspund server-ul (metoda).
Protocolul mpreun cu resursa alctuiesc un URL (Uniform Resource Locator).
Tipul protocolului este partea cea mai important a unui URL. Fr acesta browser-ul nu ar ti cum s trateze
resursa respectiv.
Protocoalele URL existente sunt:

-7-

Colegiul National "Octavian Goga" Marghita

file - pe lng informaia accesat prin Internet browserele sunt capabile s afieze coninutul fiierelor
locale; un URL de tip file este de forma: file://litera_disc_cale/nume_fiier.extensie;

ftp - dac link-ul pointeaz ctre un fiier situat pe un FTP-server cu acces public (anonymous FTP
server),

atunci

resursa

trebuie

specificat

ca

fiind

de

tip

ftp:

ftp://ftp.sorosis.ro/pub/windows/www/netscape.zip;

http - toate documentele scrise n format HTML sunt stocate pe un WWW server. HTTP se refer la
protocolul folosit de aceste servere;

gopher - browserele WWW pot naviga i pe servere gopher folosind aceast definiie de protocol;

mailto - este un tip special de URL care permite trimiterea mesajelor prin e-mail;

news link-urile care pointeaz ctre un newsgroup trebuie s fie declarate folosind acest protocol;

telnet - pentru a indica faptul c un link necesit deschiderea unei sesiuni telnet URL-ul trebuie s fie de tip
telnet. Majoritatea browserelor nu pot deschide sesiuni telnet, dar lanseaz, n schimb, programe client
externe atunci cnd se selecteaz un link de acest tip;

wais - este un tip de protocol (Wide Area Information Server) care permite cutarea de informaie n baze
de date indexate pornite de la cuvinte descrise n limbaj natural. Metoda semnific comanda explicit a
clientului ctre server. Dac cererea este acceptata server-ul produce rspunsul i transfer informaia
(acest lucru este vizibil n bara de stare a browser-ului, afindu-se progresiv informaii de transfer).

CAPITOLUL II
LIMBAJUL HTML

2.1. Coduri HTML

2.1.1. Noiuni generale despre paginile web
Paginile web sunt fiiere text, care se pot realiza cu un editor obinuit, apoi salvate ca text only, ns extensia
trebuie s fie obligatoriu .htm sau .html. Adaosul la textul obinuit sunt codurile HTML (pot fi numite tag-uri, etichete,
marcaje sau balize) care marcheaz documentul.

-8-

Colegiul National "Octavian Goga" Marghita

Comparaia potrivit ar fi cu editorul Word: pentru a marca titluri i subtitluri, mrim dimensiunea fontului,
apsm butonul bold etc., sau i schimbm stilul n Heading 1 i Heading 2. Similar, n limbajul HTML, care este un
limbaj de marcare (HyperText Markup Language) adugm balizele H1, B etc.
Un navigator (cum ar fi: Internet Explorer, Opera sau Netscape) citete aceste fiiere text i interpreteaz
codurile pentru a afia corect coninutul documentului. Balizele nu sunt afiate, ele doar spun navigatorului (browserului) cum s afieze coninutul lor.

2.2. Limbajul HTML

HTML (HyperText Markup Language) a fost dezvoltat iniial de Tim Berners-Lee n anul 1989, ca urmare a
necesitii de publicare a informaiilor la nivel global. Pe parcursul anilor, limbajul a evoluat (HTML 3.0, HTML 3.2, HTML
4 i cel mai recent HTML 4.01), fiecare versiune oferind noi faciliti. Trsturile limbajului HTML sunt:

independena de platforma (modul de afiare al unui document este acelai, indiferent de computerul pe care
se realizeaz afiarea);

structurarea formatrii;

posibilitile hypertext (orice cuvnt, imagine sau alt element al documentului vizualizat de utilizator poate face
referin la un alt document, ceea ce uureaz navigarea n cadrul aceluiai document sau ntre documente
diferite).
HTML este un limbaj simplu, compus din coduri speciale (marcaje) care se insereaz ntr-un text pentru a

aduga informaii despre formatare. Este derivat din SGML (Standard Generalized Markup Language), un sistem
pentru definirea tipurilor de documente structurate, destinat s reprezinte instane ale acestor tipuri de documente. La
baza SGML i a HTML se afl acelai principiu: descrierea coninutului unui document se face ntr-un fiier text obinuit
(ASCII). Se urmrete ca aceste fiiere s fie editabile cu aplicaii software nepretenioase (exemplu Notepad,
WordPad).
n cadrul unui document HTML, un marcaj (tag, n limba englez) va avea forma <nume_marcaj>. Parantezele
unghiulare sunt elementele care indic prezena unui marcaj; numele marcajelor poate fi scris oricum, limbajul nefiind
senzitiv la literele mari/mici (case sensitive). Unele marcaje permit utilizarea unor atribute care se vor scrie n marcajul
de nceput:
<nume_marcaj optiune1=valoare1 optiune2=valoare2 ...>
................
</nume_marcaj>
-9-

Colegiul National "Octavian Goga" Marghita

Exist dou tipuri de marcaje:
-

individuale (exemplu <br>);

perechi (exemplu <p>...</p>) - de menionat c sfritul unui marcaj este indicat prin utilizarea caracterului
/ n faa numelui de marcaj.

n funcie de modul de formatare a paginii, avem marcaje de tip:

-

block: este afiat sub elementul anterior (exemplu <p>);

inline: este afiat dup elementul anterior (exemplu <span>);

table: este afiat sub forma unui tabel.

Marcajele perechi pot fi imbricate:

<nume_marcaj1>
<nume_marcaj2>
................
</nume_marcaj2>
</nume_marcaj1>
Browserele vor ignora marcajele i opiunile pe care nu le recunosc.

2.3. Structura unui document HTML

Un document HTML 4 are urmtoarea structur:
1. o linie coninnd versiunea HTML;
2. seciunea HEAD, delimitat de marcajele <HEAD> ... </HEAD>;
3. seciunea BODY, delimitat de marcajele <BODY> ... </BODY> sau

<FRAMESET> ... </FRAMESET>.

2.3.1 Seciunea HEAD

Cuprinde informaii care nu vor fi afiate n browser, cu excepia marcajului <title>. Marcajul <title> este
obligatoriu i poate apare doar n seciunea HEAD. El va conine un titlu relevant pentru pagin, fiind deosebit de
important pentru motoarele de cutare.
Alte marcaje care apar n seciune HEAD:

<META> - poate conine cuvinte cheie, o descriere a paginii, numele autorului paginii, frecvena (teoretic) cu
care motoarele de cutare ar trebui s reindexeze pagina etc. Declaraiile META implic n general declararea
unei proprieti i a valorii asociate acelei proprieti.
<META NAME="nume" CONTENT="continut">
- 10 -

Colegiul National "Octavian Goga" Marghita

<style>- cascading style sheets - stiluri pentru formatarea textului din documentul HTML.
<style type="text/css">...</style>

<script> - scripturi JavaScript sau VBScript.

<script language="JavaScript1.2" type="text/javascript" src="lib.js"></script>

<base> - stabilete URL-ul de baz al documentului. Toate referinele (<a href=""></a>, respectiv <img
src="">) din documentul respectiv vor fi deschise relativ la marcajul <base>.
<head>
<base href="http://www.xprim.ro/index.php" target="_top">
</head>

<link> - stabilete o legtur cu un document extern, spre exemplu un fiier de definiii CSS.
<link rel="stylesheet" href="stiluri.css" type="text/css">

2.3.2 Seciunea BODY

Este inclus ntre marcajele <body>...... </body>
Marcajul de sfrit (</BODY>) nu este obligatoriu.
n seciunea BODY se gsete informaia care va fi afiat n browser (text, imagini etc.) (<body>.... </body>).
Ca n orice limbaj de programare, n HTML exist posibilitatea de a introduce comentarii, folosind marcajul
<!-- .... textul comentariului -->.
Marcaje specifice:

<p> - trecerea la un nou paragraf

<hn>...</hn> - aplicarea stilului heading (n ia valori de la 1 la 6 si defineste nivelul de titlu)

Pentru formatarea textului pot fi folosite i marcajele:

<b>...</b> - caractere ngroate;

<i>...</i> - caractere nclinate;

- 11 -

Colegiul National "Octavian Goga" Marghita

<u>...</u> - caractere subliniate;

<s>...</s> - caractere tiate;

<pre>...</pre> - marcajul de informaie preformatat;

^... - exponent;

_... - indice;

<br> - rupe textul, trecnd pe o linie nou - poate apare oriunde n text;

<hr> - traseaz o linie subire orizontal.

Marcajul <font>...</font> ofer posibilitatea modificrii dimensiunii, culorii i a tipului de font utilizat.
Marcajele <span> i <div> (ambele necesit marcaj de nchidere):

<span> este un marcaj de tip inline. Se folosete n general n interiorul marcajelor de tip block (exemplu
<p>) n combinaie cu stilurile CSS, pentru a impune o formatare diferit de restul coninutului din marcajul
block respectiv;

spre deosebire de <span>, marcajul <div> este de tip block. Se folosete n general pentru poziionare n
cadrul documentului i pentru specificarea unor proprieti CSS care s fie aplicate textului din interiorul lui.

2.4. Liste i referine

2.4.1 Liste
HTML ofer mai multe mecanisme pentru specificarea listelor de informaii. Exist 3 tipuri de liste, fiecare tip
trebuie s includ cel puin un element:
1. liste de tip definiie;
2. liste ordonate (numerotate);
3. liste neordonate (marcate).

2.4.1.1. Liste de tip definiie

Unul dintre cele mai obinuite elemente n paginile HTML este un set de definiii, referine sau indexuri. Un
exemplu concret l reprezint glosarele.
Lista de tip definiie este introdus de marcajele:

<dl>...</dl> - lista definiii (definition list);

- 12 -

Colegiul National "Octavian Goga" Marghita

<dt> - termenul definit (definition term);

<dd> - definiie (definition).

2.4.1.2. Liste neordonate

Sunt introduse de marcajele:

<ul>...</ul> - list neordonat (unordered list);

<li> - element list (list).

2.4.1.3. Liste ordonate

Sunt introduse de marcajele:

<ol>...</ol> - list ordonat (ordered list);

<li> - element list (list).

2.4.2. Referine (link-uri)

Marcajul HTML principal pentru introducerea referinelor ctre alte pagini HTML sau ctre elemente din cadrul
aceleiai pagini web este <a>. El trebuie s conin atribute, n caz contrar neafectnd formatarea documentului.
Referinele pot fi absolute (<a href= http: /www.domeniu.ro pagina.html" http://www. domeniu.ro/pagina.html
<a>) sau relative (ex. <a href="pagina.html">pagina.html<a>).
Referinele relative sunt folosite n interiorul site-urilor. Ele funcioneaz pe baza faptului c browser-ul adaug
automat

numele

domeniului

la

fiecare

referin

(presupunnd

exist

pagin

la

adresa

http://www.hostx.ro/director/pagina.html i o referin relativ ctre pagina2.html, browserul va construi referina

http://www.hostx.ro/director/pagina2.html n momentul n care pagina2.html este solicitat).
Referinele absolute se vor folosi atunci cnd se dorete trimiterea utilizatorului pe un alt site (domeniu); pot fi
folosite i n interiorul unui site, ns va implica un efort mai mare n scrierea paginilor, iar n cazul n care se mut siteul pe un alt domeniu se vor re-edita toate referinele.

2.4.2.1. Ancore
Ancorele asigur uurina n navigare n paginile de dimensiuni mari, avnd urmtorul format:
<a name="nume_ancora">...</a>
Numele ancorelor nu poate conine spaii i trebuie s fie unic n pagina respectiv !
- 13 -

Colegiul National "Octavian Goga" Marghita

Odat definit ancora trebuie definit i legtura activ ctre ancora respectiv. Ea va fi o referin hypertext n
formatul urmtor:
<a href="#nume_ancora">Link catre ancora</a>.
Exist posibilitatea de a crea referine ctre ancore aflate n documente externe:
<a href="pagina.htm#nume_ancora">Link catre ancora externa</a>

2.5. Imagini i sunete

2.5.1. Imagini
n principal, utilizarea imaginilor (pozelor) n cadrul paginilor HTML are ca scop mbuntirea modului de
transmitere a mesajului ctre utilizatori. O pagin n care imaginile sunt combinate cu textul poate transmite un mesaj
mult mai bine dect o pagin care conine doar text.
Formatele de fiiere grafice universal recunoscute de browse-re sunt:

GIF - GRAPHICS INTERCHANGE FORMAT - este un format de compresie fr pierdere de calitate;

JPG - format introdus de JOINT PHOTOGRAPHIC EXPERT GROUP - este un format de compresie cu
pierdere de calitate. Prin salvarea repetat a unei imagini, ea va pierde din calitate, devenind n final
inutilizabil;

PNG - PORTABLE NETWORK GRAPHIC - este un format de compresie fr pierdere de calitate. Are n
general dimensiuni mai mari dect primele dou formate menionate. Introducerea unei imagini ntr-o pagina
HTML se face prin marcajul <img>.

Atributul src specific locaia imaginii. Alturi de src, marcajul <img> are urmtoarele atribute:

alt - specific un text alternativ pentru cazul n care imaginea nu poate fi afiat. Este important i pentru
motoarele de cutare;

border - traseaz un chenar n jurul imaginii;

width, height - specific limea, respectiv nlimea imaginii. Nu sunt obligatorii, ns utilizarea lor este
recomandat deoarece va reduce timpul de procesare a paginii web de ctre browser;

hspace, vspace - specific spaiul care va fi pstrat n jurul unei imagini.

2.5.2. Inserarea de fiiere audio n paginile HTML

Introducerea de secvene audio se poate face n dou modaliti:

sub forma unei referine (link);

- 14 -

Colegiul National "Octavian Goga" Marghita

prin intermediul marcajelor embed sau bgsound.

Marcajul embed are urmtoarele atribute:

autostart - dac este setat true, fiierul audio va fi rulat imediat dup ncrcarea paginii HTML;

hidden - dac este setat true, interfaa pentru rularea fiierului audio nu va fi afiat;

loop - dac este setat true, secvena audio va fi reluat la nesfrit;

volume - seteaz volumul cu care va fi redat secvena audio.

Marcajul bgsound va rula o secven audio n fundal. Este o extensie Microsoft, deci va funciona numai n

Internet Explorer.

2.6. Tabele
Definirea unui tabel n HTML se face folosind perechea de marcaje <table>...</table>. Prin intermediul acestei
perechi de marcaje se definesc atribute valabile pentru ntregul tabel. Majoritatea acestor atribute pot fi ns redefinite
pentru anumite celule ale tabelului.
Semnificaiile atributelor marcajului <table> sunt:

border - specific grosimea chenarului tabelului. Dac are valoarea 0 sau atributul lipsete, tabelul nu va
avea chenar;

frame - definete modul de afiare a chenarului exterior. Funcioneaz n prezena atributului border. Atributul
frame poate avea urmtoarele valori:

above - afieaz latura superioar a chenarului;

below - afieaz latura inferioar a chenarului;

border - afieaz chenarul complet;

box - afieaz chenarul complet (la fel ca i border);

hsides - afieaz prile inferioar, respectiv superioar ale chenarului;

vsides - afieaz parile laterale (stnga, dreapta) ale chenarului;

lhs - afieaz latura stnga a chenarului;

rhs - afieaz latura dreapta a chenarului;

void - fr bordur exterioar;

rules - definete modul de afiare a chenarului interior dintre celulele tabelului. Funcioneaz n prezena
atributului border. Atributul rules poate avea urmtoarele valori:
o

none - nu se afieaz chenar interior;

- 15 -

Colegiul National "Octavian Goga" Marghita

groups - afieaz chenar ntre grupurile de celule definite de thead, tbody, colgroup, col, tfoot;

rows - afieaz chenar ntre linii;

cols - afieaz chenar ntre coloane;

all - afieaz chenar ntre toate celule interioare;

width, height - specific limea, respectiv nlimea tabelului. n cazul n care valorile specificate nu sunt
suficiente pentru afiarea coninutului celulelor, valorile vor fi modificate automat de ctre browser astfel nct
tot coninutul s fie afiat. Valorile se pot exprima absolut, n pixeli, sau relativ la limea ecranului ( width),
respectiv la nlimea ecranului (height). Trebuie menionat c atributul heigh nu face parte din specificaiile
HTML.

bgcolor - specific culoarea pentru fundalul tabelului;

bordercolor - specific culoarea chenarului;

bordercolorlight, bordercolordark - sunt atribute utilizate pentru a crea un efect 3D asupra chenarului. Este
recomandat folosirea de culori complementare pentru a obine efectul scontat; sunt extensii Microsoft;

background - URL-ul imaginii care va fi utilizat ca fundal al tabelului. n cazul n care dimensiunile imaginii
sunt mai mici dect cele ale tabelului, ea va fi repetat astfel nct s acopere ntregul fundal al tabelului; este
extensie Microsoft;

cellspacing - specific distana dintre celule;

cellpadding - specific marginea interioar a celulelor;

align - specific alinierea pe orizontal a tabelului (stanga | centru | dreapta);

valign - specific alinierea pe vertical a tabelului (sus | mijloc | jos);

Marcaje ce pot aprea n cadrul unui tabel:

<thead>...</thead> este un marcaj care conine unul sau mai multe rnduri de celule care reprezint antetul
tabelului. Poate aprea o singur dat n cadrul unui tabel;

<tbody>...</tbody> este un marcaj care conine unul sau mai multe rnduri de celule. Pot fi definite mai multe
astfel de seciuni n cadrul aceluiai tabel (exemplu, n cazul n care exist stiluri de formatare diferite pentru
seciuni diferite ale tabelului);

<tfoot>...</tfoot> este un marcaj care conine unul sau mai multe rnduri de celule care reprezint subsolul
tabelului. Poate aprea o singur dat n cadrul unui tabel. Este obligatoriu s apar naintea marcajului
<tbody>.

- 16 -

Colegiul National "Octavian Goga" Marghita

Un alt marcaj care poate aprea n cadrul unui tabel este <caption>, cu sintaxa:
<caption [align=top|bottom|left|center|right] [valign=top|bottom]>
...
</caption>
Marcajul caption adaug o scurt descriere (titlu) a tabelului. Poate fi utilizat numai n cadrul unui marcaj
<table>, imediat dup acesta.
Are urmtoarele atribute:

align - n mod normal browser-ul va afia titlul aliniat central deasupra/dedesubtul tabelului. n HTML 4.0
atributul align a fost abandonat n favoarea formatrii prin CSS (text-align i vertical-align);

valign - precizeaz poziia titlului n raport cu tabelul (sus/jos).

Marcajul <tr> definete o linie ntr-un tabel. Poate avea urmtoarele atribute:

align - specific modul n care va fi aliniat pe orizontal coninutul liniei de tabel;

valign - specific modul n care va fi aliniat pe vertical coninutul liniei de tabel;

bgcolor - specific culoarea pentru fundalul liniei de tabel;

bordercolor - specific culoarea chenarului celulelor din linia de tabel;

bordercolorlight, bordercolordark - sunt atribute utilizate pentru a crea un efect 3D asupra chenarului de
tabel.

Marcajul <th> definete o celul din antetul tabelului. Poate avea urmtoarele atribute:

align, valign - indic alinierea orizontal i vertical a coninutului, n celul;

colspan - specific numrul de coloane peste care se ntinde celula curent spre dreapta;

rowspan - specific numrul de linii peste care se ntinde celula curent n jos;

nowrap - mpiedic ruperea textului din celul pe mai multe linii;

bgcolor, background, bordercolor, bordercolorlight, bordercolorlight - au efecte similare celor menionate

mai sus.

Marcajul <td> definete o celul din tabel. Atributele marcajului <td> au efecte similare cu cele prezentate mai sus,
n cazul marcajului <th>.
Atributele colspan i rowspan extind o celul pe mai multe coloane, respectiv linii ale tabelului.

- 17 -

Colegiul National "Octavian Goga" Marghita

2.7. Cadre
Cadrele sunt introduse prin perechea de marcaje <frameset>...</frameset>, respectiv marcajul <frame>.
Frameset definete modul de mprire al ferestrei (spaiul alocat fiecrui cadru n parte).
Marcajul <frameset> are urmtoarele atribute:

border - definete limea chenarului; numai frameset-ul exterior va rspunde la valoarea acestui atribut; este
o extensie Microsoft/Netscape;

bordercolor - specific culoarea chenarului, n format RGB; este o extensie Microsoft/Netscape;

cols - definete (pe vertical) dimensiunile sau proporiile cadrelor n cadrul unui <frameset>. Dimensiunile pot
fi precizate ca:

valoare absolut (n pixeli);

valoare relativ (n procente);

* - semnific spaiul rmas disponibil dup afiarea cadrelor anterior definite;

rows - definete (pe orizontal) dimensiunile sau proporiile cadrelor n cadrul unui <frameset>. Dimensiunile
pot fi precizate la fel ca la atributul cols.
Marcajul <frame> are urmtoarele atribute:

frameborder - specific dac un cadru va afia sau nu chenar. n cazul n care un cadru are setat
frameborder=no, iar cadrele adiacente au specificat afiarea chenarului, acest atribut nu va avea efect pentru
cadrul cu frameborder=no;

longdesc - specific un link ctre o descriere lung a cadrului respectiv. Scopul acestei descrieri este de a
completa descrierea realizat prin atributul title;

src - specific link-ul ctre coninutul iniial care va fi ncrcat n elementul <frame>. Link-ul poate fi o cale
absolut (http://www.domeniu.ro/pagina.html) sau relativ (pagina.html);

name - atribuie un nume cadrului curent. Acest nume poate fi folosit n combinaie cu marcajul a (<a
href="pagina.html" target="RightFrame">...</a>) pentru a ncrca o pagin ntr-un anumit cadru;

noresize - cadrele pot fi redimensionate de ctre utilizatori. Prin folosirea atributului noresize browser-ul va
bloca redimensionarea cadrelor de ctre utilizator;

scrolling - specific browser-ului afiarea/ascunderea barei de scroll (derulare) dintr-un cadru. Poate lua
urmtoarele atribute:
o

auto - afiarea barei de scroll se face atunci cnd este necesar (coninutul depete spaiul afiabil);

yes - bara de scroll este permanent afiat;

- 18 -

Colegiul National "Octavian Goga" Marghita

o

no - bara de scroll nu va fi afiat, chiar i n eventualitatea n care este necesar.

marginwidth, marginheight - specific distana dintre marginea interioar a cadrului i coninutul afiabil.
Atributul marginheight stabilete distana pentru marginea superioar/inferioar a cadrului. Atributul
marginwidth stabilete distana pentru marginea stnga/dreapta a cadrului.

2.8. Formulare
Formularele sunt introduse prin marcajul <form>...</form>. Perechea <form>...</form> este o seciune a
paginii HTML (container) care include mai multe controale (elemente).
ntr-o pagin HTML pot exista mai multe formulare, ns numai informaiile dintr-un singur formular pot fi trimise
la un anumit moment ctre server.
Exist dou metode (method) prin care un browser poate transmite informaiile ctre server:

metoda get - informaiile din formular sunt adugate la URL;

metoda post - informaiile din formular nu sunt adugate la URL.

Atributul action specific fiierul sau aplicaia de pe server creia i vor fi trimise informaiile din formular, pentru

prelucrare.
n general, cmpurile unui formular destinate introducerii datelor, se specific prin intermediul marcajului
<input>.
Marcajul <input> are urmtoarele atribute:

type
o

button - un buton pe care se poate face click, declannd astfel o aciune prin intermediul unui script
(exemplu, JavaScript);

checkbox - caseta de validare. Opiunea checked permite s specificm dac aceast caset este
marcat sau nu;

file - permite utilizatorului s selecteze un fiier din computerul propriu, pentru a-l ncrca pe server;

hidden - este invizibil utilizatorului. Pstreaz o pereche variabil/valoare care nu este vizibil
utilizatorului;

submit - informaiile din formular sunt trimise ctre server;

image - un buton avnd o imagine aplicat, avnd o funcie asemntoare cu submit;

password - un cmp de tip text, care nlocuiete fiecare caracter tastat cu un asterix (*), din motive de
securitate;
- 19 -

Colegiul National "Octavian Goga" Marghita

o

radio - buton cu interblocare; un grup de elemente radio au acelai nume, ns numai un singur
element poate fi selectat;

text - permite introducerea de text de ctre utilizator;

reset cura ntregul formular, revenind la valorile implicite;

name - numele controlului (elementului);

value - valoarea atribuit elementului;

size - numrul de caractere care vor fi vizibile ntr-un cmp de tip text sau password;

maxlength - numrul maxim de caractere care pot fi introduse ntr-un cmp de tip text sau password;

disabled - dezactiveaz un element;

readonly - un element poate fi citit, dar nu poate fi modificat.

Un alt marcaj n cadrul formularelor este <textarea>...</textarea>. El permite realizarea unor spaii largi pentru

introducerea de informaii (de tip text).

Atributele rows i cols specific dimensiunea (numrul de rnduri, respectiv coloane) ale cmpului de tip text
rezultat.
Marcajul <select>...</select> este folosit pentru afiarea meniurilor derulante.

CAPITOLUL III
NOIUNI GENERALE DESPRE WEB DESIGN
3.1. Principii de organizare vizual
Aplicarea n design a ctorva principii de organizare a textului va conduce la orientarea mai uoar n pagin,
la structurarea mental mai uoar a coninutului. Se vor crea astfel condiii pentru a spori capacitatea vizitatorului de a
manipula i reine informaia transmis.
Principiile de organizare vizual, de care trebuie s se in cont n proiectare, sunt urmtoarele:

Claritate i elegan - O atenie corespunztoare acordat esteticii coninutului, prezentarea sa ntr-o form
accesibil cititorului - sunt obiectivele majore care confer textului atributele unei componente eficiente a
proiectrii paginilor pentru Internet.
- 20 -

Colegiul National "Octavian Goga" Marghita

Predictabilitate i regularitate - Odat stabilit, structura de prezentare a materialului trebuie s rmn

constant de la o pagin din site la alta. n cazul cnd apar variaii de structur, modificarile se vor justifica prin
necesiti de tip funcional, dar nu vor fi fcute schimbri de dragul schimbrilor, chiar dac vor inti ctre un
design mai performant.

Standardizare i consisten n folosirea unui stil - Acest principiu se refer la producerea unui aranjament
care s permit focalizarea rapid i fr ezitri pe elementele importante.

Orientare facil n coninut - Meniul, prezent n fiecare pagin, va permite accesul direct sau foarte rapid la
seciunile majore din site.Textul principal de prezentare (sinteza coninutului unei pagini) se recomand s fie
relativ scurt, pe ct posibil s ncap ntr-un singur ecran (fr derulare). Prin ncrcarea rapid a informaiei
relevante, utilizatorul va putea decide dac dorete s citeasc, s revad sau s abandoneze pagina curent.

Unitate i simplitate - Autorii de coninuturi i designerii materialelor pentru web au tendina s includ prea
multe detalii. Este indicat ca o pagin s conin ideile principale i link-uri de acces de tip pentru mai multe
informaii.

Poziionarea n ordinea importanei - Informaiile vor fi poziionate n pagin n ordinea importanei i

relevanei lor, locul privilegiat fiind n stnga sus (pentru indivizii din culturile european i american, care sunt
obinuii s parcurg vizual materialele ntr-o form de Z).

Gruparea elementelor dup semnificaie - Acest principiu include cteva sugestii de topografia paginii.
Elementele subsumate aceleiai idei trebuie s fie demarcate de alte elemente sau grupuri de elemente prin
folosirea spaiilor libere, casetelor cu cadru, culorilor diferite i altor modaliti de grupare-etichetare.

Includerea listelor i tabelelor pentru structurarea coninutului - Un tabel poate rezuma informaii
complexe ntr-o manier ce favorizeaz nelegerea. Sugestiile de aranjare a listelor sunt utile pentru un
aranjament vizual eficient: folosirea bulinelor de marcare a fiecrui item sau numerotrii identate, aranjarea
listelor se va face pe vertical, alinierea va fi la stnga.

Spaiere - Este indicat ca textul propriu-zis s ocupe ntre 25-50% din spaiul total al paginii. Evidenierea
unitilor de text prin folosirea atributelor: text subliniat, ngroat sau caractere aldine. O culoare diferit scoate
n eviden anumite informaii considerate importante. Spaierea dintre linii va ine cont de marimea corpului de
liter.
- 21 -

Colegiul National "Octavian Goga" Marghita

Echilibru i simetrie - Textul trebuie distribuit echilibrat n pagin i ponderat prin includerea de grafice i
imagini. Avalana de informaii brute, neprelucrate din punct de vedere vizual, este contraindicat, conducnd
la dezorientarea vizitatorilor.

3.2. Folosirea culorilor. Semnificaii.

Constatarea c utilizarea unui cmp cromatic variat sporete randamentul activitii intelectuale a propulsat i
diversificat cercetrile despre influena culorilor asupra psihicului uman. O mbinare adecvat de culori este un element
important al materialelor de prezentare.
Efectul asupra psihicului este diferit de la o culoare la alta. Astfel, unele culori faciliteaz deconectarea
nervoas sau sporesc gradul de concentrare a ateniei, n timp ce altele influeneaz pozitiv realizarea asociaiilor
mentale, reinerea uoar a informaiilor prezentate etc.

3.2.1. Coduri de culoare

Modalitatea recomandat pentru introducerea unei culori n pagina web este folosirea codurilor
hexazecimale.
Acest cod este analog sistemului binar, de exemplu, care traduce orice numr din sistemul zecimal, utilizat de
noi

frecvent,

ntr-un

numr

care

folosete

doar

cifrele

1.

Un numr scris n hexa folosete sistemul de numeraie hexazecimal, n care cea mai mic cifr este 0, iar ultima, a
16-a, este F.
Sistemul folosesc urmtoarele cifre: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f.
Orice culoare folosit pentru paginile web este un amestec de trei culori principale: rou, verde i albastru
(RGB). Codul de culoare pe care trebuie scris are 6 cifre i este compus din trei pri: prima parte (primele 2 cifre) este
pentru cantitatea de rou, a doua parte este pentru verde, iar a treia pentru albastru.

3.2.2. Culoarea n paginile pentru web

- 22 -

Colegiul National "Octavian Goga" Marghita

n materialele de pe web, culorile se pot utiliza la nivelul textului, la nivelul ilustraiilor i pentru fundal. Utilizarea
culorii se justific n primul rnd funcional, ns determin n mare msur caracterul i inuta materialelor, i implicit
prestana ntregului site.
A. La nivelul textului, n cazul utilizrii corespunztoare a contrastelor cromatice, precizia i rapiditatea
percepiei i memorrii informaiilor transmise crete cu 40-50% comparativ cu contrastele simple n alb-negru.
Cercetrile psihologice asupra contrastelor cromatice au stabilit urmtoarea ordine descresctoare de
intensitate a contrastelor cromatice pentru text din punct de vedere al lizibilitii de la distan i al preferinei n procesul
de reinere de informaii:
1. negru pe galben;
2. verde pe fond alb;
3. rou pe fond alb;
4. albastru pe fond alb;
5. alb pe fond albastru;
6. negru pe fond alb;
7. galben pe fond negru;
8. alb pe fond rou;
9. alb pe fond verde;
10. alb pe fond negru;
11. rou pe fond negru;
12. verde pe fond rou.
B. La nivelul ilustraiilor, utilizarea culorilor sporete valoarea de semnificaie. Cititorul recepteaz,
prelucreaz i interpreteaz o ilustraie color mult mai rapid i mai eficient dect o ilustraie n tonuri de gri.
De asemenea, simbolurile indiciale care semnaleaz vizual prezena unui coninut de un anumit tip (meniu,
informaii utile, link-uri recomandate, atenionri etc.) i vor ndeplini mai bine funcia orientativ prin apelul la culori
folosite constant i innd seama de semnificaiile convenionale (galben - precauie, rou - atenie etc.).
Exist, desigur, i imagini care au efect mai mare dac sunt n tonuri de gri. Fotografiile alb-negru sunt deseori
(cnd reprezint aciuni) mai pregnante, mai elocvente i mai sugestive, mai dramatice dect cele color; portretele albnegru pun mai bine n valoare expresia unei persoane.
ns un grafic, o histogram, o schem sau o hart vor fi mult mai bine puse n eviden prin culori i devin
astfel mai uor lizibile, mai puin obositoare.
Ordinea contrastelor cromatice pentru acestea este urmtoarea:
- 23 -

Colegiul National "Octavian Goga" Marghita

1. albastru pe alb;
2. negru pe galben;
3. verde pe alb;
4. negru pe alb;
5. verde pe rou.
C. Fundalul (background-ul). Diferenierea cromatic a paginilor fiecrei seciuni sau teme se poate dovedi
foarte util n orientarea general n materialul de prezentare pe Internet. Dar cel mai important aspect al utilizrii culorii
pentru fond se refer la funcia culorilor de influenare a conduitei, prin declanarea de triri afective, intenii, atitudini
pozitive.

3.3. Design pentru Web

3.3.1. Sugestii de design
Prezentarea pe Web va fi n acord cu aceste caracteristici ale comportamenului utilizatorilor de Internet, n
elaborarea materialului inndu-se cont de cteva sugestii deduse logic:

Vizitatorul poate fi ajutat s se orienteze/reorienteze prin introducerea unor organizatori vizuali:

o

titluri i intertitluri din pagin simple i clare ce permit o orientare rapid n coninut;

titluri de pagin semnificative ce ajut la recunoaterea sitului chiar dac este minimizat pe taskbar.

Designer-ul trebuie s porneasc de la premisa c vizitatorul nu i mai amintete paii de navigare ce l-au
adus n faa unui anumit material:
o

se dovedete util inserarea n antet a unui fir al Ariadnei (de exemplu antetul acestei pagini) care
indic poziia actual n succesiunea sau n structura ierarhic a site-ului web;

pstrarea culorilor standard pentru legturile active (albastru pentru link-uri nevizitate i rou nchis
pentru link-uri vizitate) uureaz orientarea, recunoaterea i structurarea mental a coninutului
informaional ce se parcurge.

Folosirea unei terminologii standard elimin timpul suplimentar acordat de vizitator pentru recorelri i
circumscrieri de sens la schimbarea rapid a contextului.

- 24 -

Colegiul National "Octavian Goga" Marghita

- 25 -

Colegiul National "Octavian Goga" Marghita

3.Structura aplicaiei

Aplicaia este structurat n seciuni ca :

Fin Conine informaii despre mai multe sortimente de

fin de gru.

Acidulate Prezint toate tipurile de sucuri cu acid.

Ciocolat Aceast pagin prezint sortimentele diferite de

ciocolat.
Prima pagin Prezint produsele care sunt la ofert.

- 26 -

Colegiul National "Octavian Goga" Marghita

Cteva detalii tehnice de implementare :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Magazin - Sectiunea Alimente</title>
<link href="style.css" rel="stylesheet" type="text/css">
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.thrColFixHdr #sidebar1 { width: 180px; }
.thrColFixHdr #sidebar2 { width: 190px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }
.thrColFixHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>
<body class="thrColFixHdr">
<div id="container">
<div id="header">
</div>
<div id="sidebar1">
<h3><a href="index.html"> Home</a></h3>
<ul>
<li>&raquo; <a href="contact.html">Contact</a></li>
</ul>
<h3>Alimente baza</h3>
<ul>
<li>&raquo; <a href="faina.html">Faina</a></li>

- 27 -

Colegiul National "Octavian Goga" Marghita

<li>&raquo; <a href="gris_pesmet.html">Gris, Pesmet</a></li>
<li>&raquo; <a href="orez.html">Orez</a></li>
<li>&raquo; <a href="oua.html">Oua</a></li>
<li>&raquo; <a href="ulei.html">Ulei</a></li>
<li>&raquo; <a href="zahar.html">Zahar</a></li>
</ul>
<h3>Bauturi</h3>
<ul>
<li>&raquo; <a href="acidulate.html">Acidulate</a></li>
<li>&raquo; <a href="neacidulate.html">Neacidulate</a></li>
<li>&raquo; <a href="alcoolice.html">Alcoolice</a></li>
<li>&raquo; <a href="energizante.html">Energizante</a></li>
</ul>
</div>
<div id="sidebar2">
<h3>Fructe Legume</h3>
<ul>
<li>&raquo; <a href="fructep.html">Fructe Proaspete</a></li>
<li>&raquo; <a href="fructec.html">Fructe Congelate</a></li>
<li>&raquo; <a href="legumep.html">Legume Proaspete</a></li>
<li>&raquo; <a href="legumec.html">Legume Congelate</a></li>
</ul>
<h3>Dulciuri</h3>
<ul>
<li>&raquo; <a href="biscuiti.html">Biscuiti</a></li>
<li>&raquo; <a href="ciocolata.html">Ciocolata</a></li>
<li>&raquo; <a href="croissant.html">Croissante</a></li>
<li>&raquo; <a href="napolitane.html">Napolitane</a></li>
<li>&raquo; <a href="cereale.html">Cereale</a></li>
<li>&raquo; <a href="gem.html">Gem</a></li>
</ul>
</div>
<div id="mainContent">
<h1> Oferte Speciale</h1>
<p><img src="images/baneasa.jpg" align="left">
<b>Baneasa faina alba superioara 000</b><br>
<b>Gramaj:</b> 1kg<br>
<b>Pret vechi:</b><span class="vechi"> 2,80 lei</span><br>
<b>Pret nou:</b><span class="oferta"> 2,60 lei</span><br>
<a href="faina.html">vezi alimente de baza &raquo; faina</a> </p>
<br>

- 28 -

Colegiul National "Octavian Goga" Marghita

<p><img src="images/deroni.jpg" align="left"><br>
<b>Deroni orez pentru sarmale</b> <br>
<b>Gramaj:</b> 1kg<br>
<b>Pret vechi:</b><span class="vechi"> 9,60 lei</span><br>
<b>Pret:</b><span class="oferta"> Pret: 9.40 Lei</span><br>
<a href="orez.html">vezi alimente de baza &raquo; orez</a> </p><br>
<p><img src="images/7days.jpg" align="left"><br>
<b>7days mini croissante sampanie</b><br>
<b>Gramaj:</b> 200g<br>
<b>Pret vechi:</b><span class="vechi"> 5 lei lei</span><br>
<b>Pret:</b> <span class="oferta">4,9 lei</span><br>
<a href="croissant.html">vezi alimente de baza &raquo; croissante</a> </p><br>
</div>
<br class="clearfloat" />
<!-- end #container --></div>
</body>
</html>

Structura programului este urmtoarea:

- 29 -

Colegiul National "Octavian Goga" Marghita

- 30 -

Colegiul National "Octavian Goga" Marghita

4.Resurse de hard i soft necesare

Pentru realizarea acestui site au fost utilizate ca programe de lucru

Adobe Dreamweaver, Notepad, Adobe Photoshop CS2.
Cerinele de sistem a programelor utilizate nu sunt exagerate i corespund n
mare parte, acestea sunt:
Resurse minime:
1) Hardware
- Procesor (CPU) : 900 MHz+
-Memorie (RAM) : 64Mb
-Spatiu liber : 190Mb
-Monitor : VGA 16-bit color

- 31 -

Colegiul National "Octavian Goga" Marghita

2) Software
-Sistem de operare : Windows XP
- Internet Browser : Internet Explorer 7.0 sau Mozilla Firefox 3.4.0

Resurse recomandate:
Hardware
- Procesor (CPU) : 1200 MHz+
-Memorie (RAM) : 256Mb
-Spaiu liber : 380Mb
-Monitor : VGA (1028 x 768)
Software
-Sistem de operare : Windows XP
- Internet Browser : Internet Explorer 7.0 sau Mozilla Firefox 3.4.0

Pentru o rularea normal a site-ului este necesar instalarea n system

(recomandat Pentium 3, sau mai performant) a programului Java, cu o rezoluie
optim de 1024 pe 768 pixeli. Am folosit aceste programe att din pricina
cerinelor acceptabile de sistem a programelor ct i usurina cu care se poate
lucra cu ele. Din cauza acestei usurine se ajunge la a se lucra cu o vitez
deosebit de mare care ofer un avantaj destul de considerabil in crearea unui
proiect, site etc.

- 32 -

Colegiul National "Octavian Goga" Marghita

5.Modaliti de utilizare
Cine are acas un calculator conectat la internet ar putea naviga pe ceea ce
am creat eu foarte uor i simplu, deoarece are o grafic prietenoas nct
orice utilizator se poate descurca cu usurin n navigarea site-ului indiferent
de nivelul de cunostine pe care le are acesta n folosirea unei astfel de
interfee.Astfel prin simpla apsare a unui buton utilizatorul poate ajunge cu
usurin la informaiile dorite.
Toate informaiile sunt bine structurate, astfel nct chiar i cineva care ar
ajunge pe acest site din intmplare s poat nelege despre ce e vorba aici.

6.Posibiliti de dezvoltare
Prezentul site poate reprezenta o investiie important pentru micii
ntreprinztori n domeniul alimentar care doresc s i lrgeasc piaa de
desfacere i pe internet.

- 33 -