Colegiul National "Octavian Goga" Marghita

PROIECT PENTRU
SUSINEREA ATESTATULUI PROFESIONAL
LA INFORMATIC

FFIILLIIEER
R
:: TTEEO
ORREETTIIC
C

PPR
O
F
I
L
:
R
E
A
L
ROFIL: REAL
SSPPEEC
CIIA
ALLIIZZA
AR
REE:: M
MAATTEEM
MAATTIIC
C--IIN
NFFO
ORRM
MAATTIIC
C

C
CA
AN
ND
DIID
DA
ATT,,
EELLEEV
V::
C
CLLA
ASSA
A :: aa X
XIIII--aa A
A
C
CO
OO
OR
RD
DO
ON
NA
ATTO
OR
R PPR
RO
OIIEEC
CTT,,
PPR
RO
OFF.. M
Miihhuucc ZZeennoovviiaa

M
MA
AII 22001133

-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

telefonic

prin

linii

ridicat

al

cele

serviciului

telefonice

nchiriate

pe

nfiinarea

unor

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:

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;
-7-

Colegiul National "Octavian Goga" Marghita

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.
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.

-8-

Colegiul National "Octavian Goga" Marghita

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>
Exist dou tipuri de marcaje:
-

individuale (exemplu <br>);

-9-

Colegiul National "Octavian Goga" Marghita

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">

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

Colegiul National "Octavian Goga" Marghita

<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;

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

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

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

^... - exponent;
- 11 -

Colegiul National "Octavian Goga" Marghita

_... - 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);

<dt> - termenul definit (definition term);

<dd> - definiie (definition).

2.4.1.2. Liste neordonate

- 12 -

Colegiul National "Octavian Goga" Marghita

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 !
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>
- 13 -

Colegiul National "Octavian Goga" Marghita

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);

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;

- 14 -

Colegiul National "Octavian Goga" Marghita

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:

none - nu se afieaz chenar interior;

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
- 15 -

Colegiul National "Octavian Goga" Marghita

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>.
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:
- 16 -

Colegiul National "Octavian Goga" Marghita

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.

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;

- 17 -

Colegiul National "Octavian Goga" Marghita

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:

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

yes - bara de scroll este permanent afiat;

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).
- 18 -

Colegiul National "Octavian Goga" Marghita

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;

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;

- 19 -

Colegiul National "Octavian Goga" Marghita

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.

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.
- 20 -

Colegiul National "Octavian Goga" Marghita

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.

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.

- 21 -

Colegiul National "Octavian Goga" Marghita

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

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;
- 22 -

Colegiul National "Octavian Goga" Marghita

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:
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:
- 23 -

Colegiul National "Octavian Goga" Marghita

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

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.

- 25 -

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>
<li>&raquo; <a href="gris_pesmet.html">Gris, Pesmet</a></li>

- 26 -

Colegiul National "Octavian Goga" Marghita

<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>
<p><img src="images/deroni.jpg" align="left"><br>

- 27 -

Colegiul National "Octavian Goga" Marghita

<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:

- 28 -

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

- 29 -

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.

- 30 -

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.

- 31 -

PROIECT PENTRU OBINEREA ATESTRII

PROFESIONALE N INFORMATIC
TITLUL LUCRRII:

Spania

Profesor coordonator:
..........................

Elev: ...................
Clasa a-XII-a C

Bucuresti
Mai, 2016

Cuprins

1. Introducere
2. Generalitati despre limbajul HTML
3. Cerinte hardware si software
4. Structura si continutul proiectului
5. Bibliografie

Introducere
Lucrarea de fata are ca tema prezentarea Spaniei. Din
meniul principal putem alege :
Home
Generalitati
Geografie
Turism
Galerie foto
Video
Contact
Aplicatia a fost realizata in cea mai mare parte in
limbajul HTML, prin programare direct in cod sursa (scrierea
liniilor de comanda). Filmele din categoria Video au fost
introduse
cu
ajutorul
unui
flash
player
(FLVPlayer_Progressive.swf)
si
al
unui
skin
(Corona_Skin_3.swf).

Generalitati despre limbajul HTML

Pana in anul 1990 accesarea informatiilor de pe
INTERNET era foarte dificila si reteaua nu era folosita decat
de un numar restrans de persoane, in general oameni de
stiinta.
Fizicianul Tim Berners-Lee a devenit celebru deoarece
a inventat link-urile hypertext.Aceasta idee a dus la
dezvoltarea unui limbaj simplu care s-a impus pe piata
mondiala.Acest limbaj a fost numit Hypertext Markup
Language, prescurtat, HTML.
Dar ce este de fapt limbajul HTML ? HTML-ul
este un set de conventii pentru marcarea portiunilor de
document astfel incat fiecare portiune sa apara cu format
distinct atunci cand documentul este accesat de un program
de analiza sintactica (parser). HTML este limbajul de
marcare ce stabileste aspectul documentelor WWW, iar prin
intermediul browserelor se poate vedea documentul gata
formatat.
HTML este de fapt un subset al standardului SGML
(Standard Generalized Markup Language) si include
capacitati care permit autorilor sa insereze hiperlegaturi care
afiseaza alte documente HTML cand se executa clic pe ele.
Notiunea de hypertext inseamna text pastrat in format
electronic cu link-uri intre pagini.
Pana in 1993, in jur de 100 de calculatoare erau
echipate pentru a gazdui pagini HTML;aceste pagini
interconectate au fost denumite <WORLD WIDE WEB>
Nu mult dupa aceea au inceput sa fie scrise primele
browsere Web cu ajutorul carora puteau fi vizualizate
pagini web care contineau text si imagini.
In functie de versiunea HTML folosita, paginile WEB
sunt grupate in trei generatii:

- paginile din prima generatie, care foloseau versiunea

1.0, in care se edita text si 1-2 imagini.
- paginile din a doua generatie, proiectate cu HTML 2.0,
care puteau contine si un fundal, permiteau aranjarea
datelor in tabele si posibilitatea de a comanda un
produs prin intermediul Internetului.
- paginile din a treia generatie care pot contine culori
diferite, secvente animate, sunete, etc.
In prezent a aparut a patra versiune a limbajului
HTML.
Documentele HTML sunt exclusiv de tip text (ASCII);
ele pot fi editate direct, prin comenzi specifice sistemului de
operare
folosit.
In
WINDOWS,
se
poate
utiliza
NOTEPAD,WORDPAD sau orice alt editor de texte.
Vizualizarea acestor documente se face cu ajutorul
unor aplicatii speciale, numite BROWSER-e, care nu depind
de tipul sistemului de calcul folosit, ceea ce permite
independenta fisierelor de tip HTML fata de platforma de
lucru.
Pentru descrierea documentelor WEB se utilizeaza
anumite etichete (tag-uri) specifice pentru fiecare element
descris; acestea stabilesc structura si aspectul documentului
final.
Tag-urile sunt recunoscute de browser-e care
stabilesc apoi modul de formatare a documentului. Pentru
delimitarea (separarea ) tag-urilor se folosesc delimitatorii
< si > care incadreaza fiecare eticheta.
Forma generala:
<tag> pentru a marca inceputul
unui tag si </tag> pentru a marca sfarsitul unui tag.
In HTML nu se face distinctie intre majuscule si
minuscule;
Unele elemente HTML admit atribute care specifica
informatii suplimentare despre continutul elementului.
Atributele elementului se precizeaza in cadrul etichetei de
inceput si se aplica doar elementului curent.
Ex. Daca se doreste includerea unei imagini in
document, se va specifica drept atribut adresa fisierului care

contine imaginea si eventual alte informatii despre felul in

care se va face includerea.
Avantajul major al unui browser este acela ca poate
suporta si alte limbaje, ca Java sau Basic, ce completeaza
utilitatea limbajului HTML.
Macromedia
Dreamweaver
este
o
unealt
destinat creatorilor de pagini web. Dreamweaver a fost
creat de Macromedia (acum Adobe Systems) i momentan a
ajuns la versiunea 9. Primele versiuni ale produsului serveau
doar ca simple editoare HTML de tipul WYSIWYG dar n
versiunile recente au fost implementate funcii de editare
avansate i support pentru alte tehnologii web cum ar fi
CSS, JavaScript etc.
Dreamweaver s-a bucurat de un larg succes nc
de la sfritul anilor '90 i momentan deine aproximativ
80% din piaa editoarelor HTML. Produsul poate fi rulat pe
variate platforme software: Mac, Windows, dar suport n
acelai 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,
fcnd astfel posibil crearea cu uurin a paginilor web de
ctre utilizatorii neexperimentai.
Unii creatori de pagini web critic aceste tipuri de editoare
deoarece produc pagini de dimensiuni mult mai mari dect
ar fi necesar, ceea ce conduce la o funcionare
neperformant a browserelor web.
Aceast afirmaie este n mare parte adevarat
deoarece paginile web produse folosesc design-ul pe baz de
tabel. n plus, produsul a mai fost criticat n trecut i pentru
producerea de coduri care adesea nu erau conform
standardelor W3C, dar acest aspect a fost mult mbuntit
n versiunile recente. Cu toate acestea, Macromedia a
crescut suportul pentru tehnologia CSS precum i alte
modaliti de design fr a fi necesar folosirea design-ului
pe baz de tabel.

Dreamweaver permite folosirea majoritii browserelor

instalate pe calculatorul utilizatorului, pentru a previzualiza
website-ul creat. De asemenea conine i cteva utilitare
pentru administrarea site-urilor, cum ar fi cele pentru a gsi
i modifica un paragraf sau o linie de cod, n ntregul web
site, pe baza oricror parametri specificai de ctre utilizator.
Cu ajutorul panourilor de stare se poate crea cod JavaScript
fr a avea cunotine de programare.
Odat cu apariia versiunii MX, Macromedia a
ncorporat utilitare de generare dinamic a coninutului. De
asemenea este oferit suport pentru conectarea la baze de
date (cum ar fi MySQL i Microsoft Access) pentru a filtra i
afia coninutul folosind script-uri de genul PHP, ColdFusion,
Active Server Pages (ASP) i ASP.NET, fr a avea nevoie de
o prealabil experien n programare.
Un aspect foarte ludat al Dreamweaver-ului l
reprezint arhitectura sa extensibil. Extensiile, aa cum
sunt ele cunoscute, sunt mici programe, pe care orice
dezvoltator le poate scrie (de obicei n HTML i JavaScript) i
pe care oricine le poate descarca i instala, acestea aducnd
un spor de performan i funcionalitate mbuntit
programului. Exist o comunitate de dezvoltatori care
produc aceste extensii i le public (att comercial ct i
gratuit) pentru probleme de dezvoltare web, de la simple
efecte rollover pn la soluii complete de vnzare online.

Macromedia Flash sau mai pe scurt Flash este o

aplicaie utilizat pentru dezvoltarea obiectelor-aplet de tip

Flash disponibile n cadrul unor pagini WEB. Prin intermediul
obiectelor flash, vei putea crete dinamismul unei pagini
precum i facilita interaciunea cu utilizatorul. Iniial
dezvoltat de Macromedia, aplicaia Flash a fost preluat de
ctre Adobe odat cu achiziionarea companiei sus
amintite.

Avantajele folosirii Flash-ului pe web:

Elemente grafice vectoriale: dimensiuni mici i
scalabil: Pentru a memora imaginile un calculator poate
recurge la dou metode: prima este reinerea pixel cu pixel
a imaginii, cea de-a doua este memorarea unor puncte
critice cu ajutorul crora imaginea poate fi refcut. Astfel
pentru a afia un cerc, acesta poate fi memorat ntr-o
imagine de tip raster (cum ar fi formatul BitMap sau Jpeg)

dac avem un cerc cu o raz destul de mare vor fi memorai

nu numai pixelii de pe circumferina cercului ci i cei din
interiorul acestuia sau care sunt n jurul su. Spre deosebire,
n cadrul formatelor vectoriale (SVG - Scalable Vector
Graphics, SWF - ShockWave Flash) sunt reinute doar
centrul i raza cercului, calculatorul gsind imediat metoda
de afiare a tuturor punctelor ce vor alctui cercul. Este
evident faptul c dimensiunea unui fiier n format rasterizat
(jpg, bmp, gif) este mai mare dect cea a unui fiier n
format vectorial (din cauza numrului de informaii ce vor fi
reinute). Atunci cnd mrim o imagine de tip vectorial nu
facem dect s redesenm o parte a sa, calculatorul putnd
reda cercul cu aceeai claritate se cunoate forma
geometric reprezentat i mrirea imaginii nu reprezint
dect trasarea (la scar) a fostei imagini vectoriale. Atunci
cnd mrim o imagine de tip raster calculatorul nu
cunoate despre ce este vorba i operaia va consta doar
n suprademensionarea pixelilor (un pixel al cercului va fi
afiat n mai multe puncte de pe ecran).
Independena de platform (browser/sistem de
operare): Imaginile vectoriale, dei mai utile, necesit o
aplicaie care s genereze imaginea (pentru formatul SVG de
exemplu exist Adobe SVG Player iar pentru SWF avem
Playerul de Flash). Independena de platform apare din
cauz c acest program ce tie s afieze imaginile a fost
construit pentru o gam larg de hardware i sisteme de
operare: Astfel dac vom vizualiza obiectul Flash n Windows
se va folosi automat Playerul de Flash versiunea Windows,
dac utilizm un telefon mobil (SmartPhone), se va folosi
playerul disponibil pentru telefoane (Flash Player Lite 1.0),
sau dac vom folosi MacOS exist un player separat (evident
toate playerele vor afia aceeai imagine final).
Animaii de lung durat uor de realizat:
animaiile sunt punctul forte al Flash-ului, interfaa aplicaiei
d posibilitatea de a sincroniza (n funcie de timp) diversele
obiecte, poziii sau forme ale acestora. Flash-ul nu numai c
realizeaz aceast sincronizare, dar poate i interpola poziia
(sau forma) unui obiect pentru a uura munca utilizatorului.

Se pot aduga interfeei elemente multimedia: n interiorul

obiectelor Flash putei importa i manipula (nainte, inapoi,
salt la un anumit moment) MP3-uri sau AVI-uri.
Nu necesit cunotine de HTML, XHTML: n cazul n care v
hotri s realizai un ntreg site n Flash, aplicaia v poate
furniza odat cu obiectul flash i codul HTML necesar n
acest fel tot ce mai trebuie fcut este doar publicarea sitului
pe un server WEB.

Editoare puternice i lucrul facil: (Macromedia)

Flash este un editor puternic care d posibilitatea de atari
de comportamente diverselor obiecte fie folosind interfaa de
desenare grafic fie prin ataarea de scripturi obiectelor.
Uurina mbinrii elementelor grafice cu scriptul: ataarea
codurilor ActionScript obiectelor din flash se realizeaz prin
selectarea obiectului i introducerea codului asociat
obiectului ntr-o fereastr special.
Transferabil ca flux de date: pentru ca un film
Flash s ruleze pe maina clientului nu este necesar s fie
ncrcat n ntregime playerul va afia doar ct va putea
din film ateptnd (eventual) ncrcarea n continuare. Din
acest motiv se pot realiza scripturi speciale care ataate
obiectelor Flash pot furniza informaii privitoare la procentul
de fiier care a fost ncrcat.

Dezavantaje ale utilizrii Flash-ului:

Printre dezavantajele folosirii obiectelor flash n paginile web

amintim:

Depinde de player: dei acesta vine instalat pe o

suit de browsere (i n cazul n care nu este preinstalat
instalarea este destul de rapid dimensiunea Playerului
Flash este destul de mic i descrcarea acestuia n
contextul reelelor actuale este rapid), totui exist cazuri
n care obiectele Flash ajung pe maini ce nu au instalat
aplicaia necesar interpretrii obiectelor Flash, ajungnduse n imposibilitatea folosirii fiierelor (Pentru a rula
aplicaiile Flash pe aceste calculatoare trebuie exportat
obiectul Flash ca un executabil).
Mare amator de resurse: deoarece trebuie s
reconstruiasc de fiecare dat elementele grafice, Playerul
Flash (precum i aplicaia de dezvoltare) este mare
consumator de memorie i procesor (n cazul graficii raster
este clar unde trebuiau afiai pixelii ce formeaz cercul n
cadrul graficii vectoriale trebuie ca poziiile pixelilor s fie
recalculate).
Motoarele de cutare nu pot indexa textul: Flashul lucreaz
cu mai multe tipuri de texte, majoritatea dintre acestea
(textul static) nu poate fi indexat de motoarele de cutare
deoarece obiectul Flash este tratat ca element grafic/obiect
i roboii de cutare nu au cunotinele necesare disecrii
obiectelor Flash i extragerii textului intern.
Uurina utilizrii l face sa fie folosit n cele mai
absurde moduri (de exemplu, flash-urile - sperietoare).
Pentru aceste tipuri de Flash-uri, fcute de obicei de
nceptori, n limba englez exist un termen special:
"flashturbation".
Tehnologie liceniat: fiind o aplicaie dezvoltat
de o serie de programatori (pltii pentru a dezvolta
Flashul), instrumentul de dezvoltare cost cel puin
600[necesit citare]. Totui specificaiile formatului
obiectului Flash sunt disponibile i din acest motiv au aprut
(i nc apar) destule instrumente care s utilizeze acest
format n scopuri mai mult sau mai puin productive sau
legale.
Dintre
acestea
amintim:
Swift3D,
Swish,
ImperatorFLA, ActionScript Obfuscator.

Cerinte hardware si software

Fiind realizat in HTML, functionarea corecta depinde de foarte
putini factori la nivel hardware.
Configuratia minima necesara :
procesor la 133MHz
min. 32 MB RAM (de preferat cel putin 64 MB)
o placa vide care sa suporte mai mult de 256 de culori
(optional pentru o afisare corecta a detaliilor)
Este necesara o versiune a browser-ului care sa permita
recunoasterea tuturor comenzilor ( testul a fost facut cu Internet
Explorer 6.0 ), si de asemenea este obligatoriu un flash player, sau un
patch pentru flash.

Conditii de testare: proiectul a fost facut si testat pe un PC

AMD Athlon 1700MHz, la 256 MB DDRAM, sistem de operare MS
Windows Xp.

Structura si continutul proiectului

Aplicatia a fost realizata in cea mai mare parte in limbajul HTML,

prin programare direct in cod sursa. Scrierea liniilor de comanda s-a
facut cu Adobe Dreamweaver CS4 , vizualizarea codului putandu-se
face cu orice editor text (MS Word, Notepad s.a.).
Structural, prima pagina (index.html) este structurata cu ajutorul
div-urilor si a tabelelor
In primul rand (table row) este prezentat meniul animat,din care
poti alege: Home, Generalitati, Geografie, Turism, Galerie
foto, Video, Contact

Meniul principal a fost realizat in html si css (cascading style

sheet), pentru care s-a folosit in principal programul de editare Adobe
Dreamweaver CS4. De asemenea banner-ul din partea de sus a paginii
a fost facut in Adobe Photoshop CS3 .
1. Home - index.html. In aceasta pagina este prezentata
o introducere despre Spania.
2. Generalitati - generalitati.html In aceasta pagina sunt
prezentate detalii despre Spania. Este prezentat
urmatorul submeniu:
Istorie
Politic
Comuniti autonome
Mediul nconjurtor
Economie
Demografie
Buctria spaniol
Seat

3. Geografie - geografie.html In aceasta pagina sunt

prezentate detalii despre geografia Spaniei. Avem
urmatorul submeniu:
Introducere
Repere geografice
Clima
Geografia politic
Vegetaia
Fauna
Relieful
Reeaua hidrografic
4. Turism - turism.html In aceasta pagina sunt prezentate
detalii despre principalele atractii turistice din Spania.
Se prezinta urmatorul submeniu:
Coridele
Ibiza
Tenerife
Madrid
Barcelona
Bilbao
Valencia
5. Galerie - galerie.html In aceasta pagina se prezinta
imagini cu orase si peisaje din Spania.
6. Video - video.html. Avem urmatorul submeniu cu
clipuri video:
Barcelona Tour
Ibiza
Madrid
Valencia
Costa del Sol
Parc Guell

7. Contact - contact.html. Detalii despre autorul acestui

proiect.

Codul sursa al paginii index.html :

<html>
<head>
<title>Spania</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<link rel="stylesheet" media="all" type="text/css" href="style.css"
/>
</head>
<body>
<div align="center">
<div id="container">
<div id="banner"></div>
<ul class="menu green">
<li class="current"><a href="index.html" >Home</a></li>
<li><a href="generalitati.html" >Generalitati</a></li>
<li><a href="geografie.html" >Geografie</a></li>
<li><a href="turism.html" >Turism</a></li>
<li><a href="galerie.html" >Galerie foto</a></li>
<li><a href="video.html" >Video</a></li>
<li><a href="contact.html" >Contact</a></li>
</ul>
<div id="continut">
<div style="padding:20px 40px 20px 40px;">
<div style="font-size:16px; text-align:justify;">

<p>Regatul Spaniei (spaniol Reino de Espaa) sau Spania (spaniol

Espaa) este o ar
situat n sud-vestul Europei, membr a Uniunii Europene.
n nord-est se nvecineaz cu Frana i Andora de-a lungul Munilor
Pirinei.<img src="images/galerie/1.jpg" width="340" align="right"
style="padding:10px;" /> Face parte din Peninsula Iberic mpreun cu
Portugalia i Gibraltar, avnd de asemenea dou arhipelaguri, situate
unul n Marea Mediteran (Insulele Baleare) i cellalt n Oceanul
Atlantic (Insulele Canare). De asemenea, de Spania aparin dou mici
teritorii din nordul Africii (care includ oraele autonome Ceuta i
Melilla), precum i enclava Llivia din Pirinei.</p>
<p>Dup sfritul regimului Franco n 1975, Spania a devenit o monarhie
i o monarhie constituional n 1978 cnd o nou constituie a fost
adoptat.</p>
<p>Numele Spania este derivat din Hispania, numele n latin cu
care romanii se refereau la toat peninsula, i pe care l-au preluat
din grecul Hispana (accent pe i, ca i n cazul Romniei),
utilizat de ctre Artemidor din Efes (sec.I .Hr.), autorul celei mai
vechi hri a Occidentului, n care descrie amnunit Hispania
roman.</p>
<p>Originea termenului Hispania este atribuit fenicienilor, prima
civilizaie non-iberic, care a ajuns n peninsul pentru a-i extinde
comerul i care a fondat, ntre altele, oraul activ cel mai vechi din
Occident. n limba lor punic l-au numit Isephanim, Coast de iepuri.
Iepurii se gseau i nc se gsesc n abunden n Andaluzia, iar
unele monede btute n epoca lui Hadrian reprezentau personificarea
Hispaniei ca o doamn aezat, cu un iepure la picioarele ei.</p>
</div>
<br><br>
</div>
</div>
</div>
</div>
</body>
</html>

Bibliografie :
http://ro.wikipedia.org/wiki/Adobe_Dreamweaver
http://ro.wikipedia.org/wiki/Adobe_Flash
http://ro.wikipedia.org/wiki/Spania
http://ro.wikipedia.org/wiki/Geografia_Spaniei
http://ro.wikipedia.org/wiki/Barcelona
http://ro.wikipedia.org/wiki/Madrid
http://ro.wikipedia.org/wiki/Turismul_%C3%AEn_Spania
http://www.turistik.ro/spania/obiective-turistice-spania
http://www.gustos.ro/articole/newsletter-gustos-ro/bucatariaspaniola.html