Acest manual realizeazi ini{ierea in domeniul

credrii yi publicirii unui site Web,

folosind aplicafia KompoZer 0.g. Manualul
este realizat in conformitate cu cea mai
noui versiune a programei ECDL pentru acest modul,
respectiv Syllabus 2.0 gi
respecti standardele de calitate impuse de ECDL
ROMANtA.

Acest manual este util oricirei persoane care

doregte sd obtrini certificarea
indiferent c5 este angajat intr-o companie privatd
,r,

ECDL,

ornr[r, ci este funclionar

public' profesor sau este angajat in orice
alt domeniu de activitate. Lecliile sunt
prezentate intr-un format atractiv gi permit
atSt utilizarea sa ca suport de curs pentru
cursuri organizate la salS cu traineri profesioni5ti,
c6t gi pentru studiul individual.
Vi dorim mult succesl
Editura Euroaptitudini

(lirpitolul

l.l

1 Concepte Web

'l't rrueni cheie

l. t.l infelegerea gamei de servicii oferite de Internet: World Wide
Wr.lt (WWW), transfer figiere, email, mesagerie instant (IM)

lnternetul este

o retea globalS de

calculatoare q
lrrlt'rr onr,(littc, care permite comunicarea intre milioane de
rrllllr,rl0ri rlin intreaga lume. Reteaua lnternet a fost creati inilial
I ir o url,r1,1 ll;t2.1 de date pentru a fi utilizatd in scop Stiintific Si
{
rrrlrrr ,rllotr,rl. in acest sens, rolul predominant al relelei lnternet
crd rt,l rlc documentare gi de comunicare. Ulterior, datoriti
lellrrr li rrurnilrului de calculatoare conectate la lnternet, a
r I p'.r ul ii ttumdrul de site-uri ale diferitelor organizafii care oferi conlinut
Itthrtttt,tliort,rl 5i implicit numirul de vizitatori ai acestor site-uri, posibili consumatori
rlu lltorltrsc s;ru servicii.
(.r,lc mai importante servicii oferite de lnternet sunt:
t Wot ltl Wide Web (WWW) sau pur si simplu Web - reprezinti

un ll'.tt,rrr dc documente gi informatii legate intre ele, accesate

;llrr ltrlr,rrrct. Cu ajutorul unui browser Web (lnternet Explorer,
Mnrlll,r llrr.fox, Google Chrome, etc) utilizatorul are acces la
Itrlutrrralli dt, tip text, audio, video, etc. Documentul de bazi al
WWW erlt'paglna Web.
r I tttttll (1to1ld tlcctronicd) - trimiterea 5i primirea de mesaje in format electronic
pt, lttlettttrl;
c Mewle'rlr tttstuntonee (instant messoging)- conversatie in timp real pe lnternet
Irrtr e rfurrrrl :.,lrr rrr.ri lnultc persoane;
r V()ll' (Vouc ttw'r lnternet lP)- servicii de telefonie prin lnternet;
r ll\\ (ltrtlly Sirnple Syndicotion) - distribu[ia gtirilor gi articolelor publicate pe
Irrlrrr rrrl.
r I I l' (l lb lronsfer Protocol)- transfer rapid de fi$iere;
c Nrwsutttul.r.s ' colectii cu informalii globale actualizate frecvent, organizate mai
nrtrll ..,rrr rn,ri ;lulin in jurul unui anumit subiect cu relevan!5 publicS;
e ( otttutrlld(i online ' serviciu disponibil pe lnternet, creat cu principalul scop de a
r rrrr,r l,t rrliliratori cu aceleagi interese, activitS!i, hobby-uri.

10

r1

L.1.2 in;elegerea termenului client/server.

funclionalitifii

gi

lnfelege
relafiei dintre un browser web gi un server

Termenul Client/Server se referd la un model

popular pentru relele de calculator ce utilizeazi

dispozitive de tip client gi server, fiecare conceput
pentru scopuri specifice.

Modelul client-server poate fi folosit pe

lnternet, precum si in relelele locale (LAN) gi

utilizeazi

un sistem de tip

cerere-rispuns.

Calculatoarele client efectueazd cereri citre server.

Server-ul primegte cererile de la client, le executi 5i

'F

1r tq

+-.--/
I
*-r^
I\*t1-*l"o -l
ctieni
\
-- ErEl
\
,/
/s"r.r\

',ll' / \
*.P

Transmlssion Control Protocol/lnternet Protocol(TCP/lP) este protocolul

standard folosit pentru conectarea calculatoarelor prin lnternet.

Hypertext Transfer Protocol (HTTP) este metoda prin care paginile web
sunt transferate prin relea.

>

dS*l\

-tt5-

',

-:L*.

a transfera figiere prin lnternet.

Un nume de domeniu reprezinti o adresi unicS care identifici locatia unui site
Wplt, t elr nrui cunoscute domenii sunt cele:
- generice - indici in general un domeniu organizational qi este de obicei
format din 3 litere

transmite rezultatul.
Dispozitivele client sunt de obicei PC-uri cu aplicafiisoftware de re[ea insta
Un dispozitiv de tip server stocheazi de obicei fisiere gi baze de date, inclusiv apli
mai complexe, cum ar fi site-uri web. serverele se aseamini fizic cu celel
calculatoare uzuale, degi configuralia hardware este deseori optimizati (procesoa
mai puternice, memorie RAM mai mare, hard disk-uri mai mari) pentru funcfiona
lor ca servere. Multe componente de hardware sunt identice cu cele existente intr
calculator personal. Totugi serverele ruleazi sisteme de operare gi p
specializate care sunt foarte diferite fa!5 de cele folosite pe calculatoare personale.
Exemple de sisteme client/server de pe lnternet includ: browsere web
servere web, clienli FTP gi servere.
in cazul domeniului Web, conceptul client/server se manifest6 in felul urm
serverul stocheazi figierele site-ului ;i baza de date a acestuia, iar browser-ul tri
cereri cdtre server gi afiseazd sub formd de pagini web rezultatul primit.

com
edu
gov

nt
mil

net

Organizatii gi societili comerciale

lnstitutii educationale
guvernamentale
internationale
militare
administrare a retelelor mari
Organizatii non - profit
Organizati
Orsanizati
Organizati
Centre de

- reprezintd un cod cu ajutorul ciruia se identific5 tara de

apartenenti a domeniului 5i este de obicei format din 2 litere.

de tarl

1.1.3 inlelegerea termenilor de domeniu, Uniform Resource Loca

(URL), hyperlinl! gizduire site web, motor de ciutare. irt"
sistemului de funcfionare a protocoalelor primare

Au

Australia

Ca

Canada

Ch

Ro

Elvetia
Germania
Franta
Italia
Polonia
Romania

De
Fr

It

Uniform Resource Locator (URt) este o adresi de

localizare gi identificare a unei resurse existente pe lnternet.
Fiecare resursi existentd pe lnternet are propria ei adresi de

PI

Ru

Rusia

identificare care specifici serverului unde anume si glseasci

UK

Marea Britanie

adresa respectivS.
Un URL este format din doud

'/
,/

resei http ://www.e u roaptitudi ni, ro

/rllpr reprezintd numele protocolului
www.e urooptitudi ni.ro reprezinti nu mele domeniu lui
Nrrrrrclt. domeniului consti tn mai multe pirti, separate prin punct.
o l)orneniul cel mai din dreapta reprezinti nivelul cel mai?nalt (in cazul nostru

A., I I r, l,

pirti:

numele protocolului
numele domeniului.

Un protocol este o metodi prin care datele sunt transmise de la un calculator

altul prin intermediul lnternetului. Cele mai importante protocoale srrrrl:

t2

in

ca zu I ad

ro)
13

1.1,2 Inlelegerea termenului client/server..

lrrfel
funclionalitilii gi relaliei dintre un browser web gi un server

Transmisslon Control Protocol/!nternet Protocol(TCP/lP) este protocolul

standard folosit p('ntru conectarea calculatoarelor prin lnternet'

Termenul Client/Server se referd la un model

Hypertext Transfer Protocol (HTTP) este metoda prin care paginile web
sunt transferate prin relea.

popular pentru refele de calculator ce utilizeaza

dispozitive de tip client gi server, fiecare conceput
pentru scopuri specifice.
Modelul client-server poate fi folosit pe
lnternet, precum gi in relelele locale (LAN) 9i
utilizeazd un sistem de tip cerere-rispuns.
Calculatoarele client efectueazd cereri cdtre server.
Server-ul primegte cererile de la client, le executd gi
transmite rezultatul.
Dispozitivele client sunt de obicei PC-uri cu aplicalii software de relea instala
Un dispozitiv de tip server stocheazd de obicei fisiere gi baze de date, inclusiv a
mai complexe, cum ar fi site-uri web. serverele se aseamini fizic cu ce
calculatoare uzuale, desi configuralia hardware este deseori optimizati (
mai puternice, memorie RAM mai mare, hard disk-uri mai mari) pentru funcli
lor ca servere. Multe componente de hardware sunt identice cu cele existente intr
calculator personal. Totugi serverele ruleazi sisteme de operare gi progr
specializate care sunt foarte diferite fa!5 de cele folosite pe calculatoare personale.
Exemple de sisteme client/server de pe lnternet includ: browsere web
servere web, clienli FTP gi servere.
in cazul domeniului Web, conceptul client/server se manifestd in felul
serverul stocheazi figierele site-ului gi baza de date a acestuia, iar browser-ul tri
cereri citre server si afiseazi sub formd de pagini web rezultatul primit.

File Transfer Protocol (FTP) este un protocol (set de reguli) utilizat pentru
a transfera figiere prin Internet.

un nume de domeniu reprezintd o adresi unici care identifici loca[ia unui site
Wr,b. Cele mai cunoscute domenii sunt cele:

./
./

Organizatii 5i societSli comerciale

int
mil
net

Organizatii internationale
Organizatii militare
Centre de administrare a retelelor mari
Organizatii non - profit

nstitutii educalionale

Organizatii guvernamentale

reprezintd un cod cu ajutorul ciruia se identifici tara de

apartenenti a domeniului 5i este de obicei format din 2 litere.

de

tari -

Au

Australia

Ca

Canada

ch
De

Elvetia
Germania

Fr

Fra

It
Ro

Italia
Polonia
Romania

Ru

Rusia

UK

Marea Britanie

PI

o adresi de

localizare 5i identificare a unei resurse existente pe lnternet.

Fiecare resursd existenti pe lnternet are propria ei adresd de
identificare care specifici serverului unde anume sd gdseasci
adresa respectivd.
Un URL este format din

com
edu
gov

org

1.1.3 inlelegerea termenilor de domeniu, Uniform Resource

(URL), hyperlink, gizduire site web, motor de cdutare. i.tu
sistemului de funclionare a protocoalelor primare

Uniform Resource Locator (URL) este

generice - indici in general un domeniu organizalional 5i este de obicei

format din 3 litere

nla

Astfel, in cazul adresei http://www.euroaptitudini.ro

doui pdrti:

numele protocolului
numele domeniului.

Un protocol este o metodi prin care datele sunt transmise de la un calculator

altul prin intermediul lnternetului. Cele mai importante protocoale sunt:
L2

la

http reprezintd numele protocolului

www.euroaptitudini.ro reprezintS numeledomeniului
Numele domeniului consti in mai multe pirti, separate prin punct'
. Domeniul cel mai din dreapta reprezinti nivelul cel mai inalt (in cazul nostru
ro)
13

r'

Numele de domeniu oferi exclusivitate - oferi dreptul de utilizare exclusivS a

unui nume unic de domeniu pentru o perioadi specificl de timp
in alegerea unui nume de domeniu, linefi cont de urmitoarele aspecte:
/ regiunea geograficS pentru care il inregistrali - daci website-ul se adreseazi
teritoriului Rom6niei, este recomandat si inregistrati un domeniu .ro.
/ in mod ideal ar trebui s5 vd inregistra}i un nume de domeniu care si confini un
cuvAnt cheie din business-ul dvs. Astfel, doar numele de domeniu in sine poate
atrage trafic citre website-ul respectiv. De asemenea, un cuvint cheie existent in

numele de domeniu poate reduce semnificativ efortul depus pentru cre5tere

popularitSlii site-ului gi a rankingl-ului in motoarele de cautare.
/ dacd aveti posibilitatea, atunci cand ?nregistrali un nume de domeniu .ro
exemplu, puteli inregistra gi varianta .com.
{ dacd dorili sd inregistrali domenii gi subdomenii in zona .ro, existd o regulS de
care ar trebui s5 lineli cont:
- .ro - pentru orice persoani juridici sau fizicd;
- .com.ro - pentru firme, produse sau servicii de naturi comerciali;
-.org.ro - pentru organizalii non-profit, organizaliisociale, asocialii civile;
- .tm.ro - numai pentru mirci inregistrate. Pentru inregistrarea acestor
domenii de citre firme din RomSnia, vor fi aduse dovezi de la OSIM sau alte
organizafii de inregistrare a mircilor;
- .store.ro - pentru magazine sau alte companii ce oferi bunuri de consum;
- .info.ro - pentru furnizori de informalii;
- .arts.ro - pentru organizalii ce desfisoari activitifi artistice;
- .rec.ro - pentru organizatii ce desfdsoarS activititi de divertisment.
lnregistrarea unui nume de domeniu se realizeazi in general pe site-ul
Rotld.ro. De asemenea, cele mai multe firme de hosting (gizduire web) oferd
inregistrarea gratuiti a unui nume de domeniu atunci c6nd este achizitionat si un
pachet de hosting.
in general, inregistrarea unui nume de domeniu dureazi minim 24 ore, iar

numele de domeniu devine complet vizibil tuturor calculatoarelor de pe lnternet

dupd aproximativ 48 de ore.

Pe 16ngd inregistrarea unui nume de domeniu, un art pas important in

publicarea unui site web il constituie alegerea unei firme de hosting. Aceasta va stoca
site-ul web 9i il va afiga pe serverele conectate la lnternet. Pentru alegerea unei firme
de gdzduire, este recomandabil si ciutali o firmd cunoscutS, care si ofere un spafiu
rezervat mai mare, contra unei sume mai mici.

rr sr

rr,i rlc Lr I l,r

1.2.3 Recunoatterea

tehnicilor de optimizare

motoarelor de ciutare

Optimizarea unui site web a devenit un subiect extrem de interesant in ultimul

I lrnp. in esen!5, optimizarea unui site web este un proces de perfeclionare
(trrvorizare) a vizibilitStii paginilor web in cadrul ordonirii rezultatelor clutiriiin lista

gerrr,rati de motorul de ciutare. Aga cum 9ti!i, motoarele de cautare reprezinti o

Iurr.1 principalS de vizitatori pentru site-uldvs. Cu c6t un site web este maioptimizat
ltcntru motoarele de cautare, cu at6t cresc Sansele ca vizitatorii, folosind motoarele
rle r .rutare, si il gdseascS. Practic, prin optimizarea site-ului dvs. pentru motoarele de
I dulrrre, vi cre5teti numirul de vizitatori.
Dintre tehnicile de optimizare a unui site web, amintim:
t lttt.ludereo metocorocterelor relevante - metacaracterele (meta tag) oferl
Irrforrrratii despre un site web. Aceste informafii oferi motoarelor de ciutare indicii
nr lltlvire la domeniul de activitate al site-ului. Metacaracterele sunt ascunse in sursa
pABlnll web, fiind invizibile cititorului.
[xist| mai multe tipuri de metacaracterele, dar vom vorbi despre cele trei plrfi
cele mai importante care alc6tuiesc optimizarea meta tag: cuvinte cheie meta,
rlprcrle ri meta gi tag-ul robotului.
o Cuvinte cheie meto listeazi toate cuvintele cheie pentru care ai vrea ca
motoarele de cautare s5-!i pozifioneze c6t mai bine site-ul. Chiar daci
nu toate motoarele de ciutare suporti tag-uri, ar trebui si le folosifi
pentru cele care suportS. De exemplu: Site-ul lui lon vinde piersici din
Turcia. in cuvintele cheie meta , el a scris, "piersici Turcia, piersici din
Turcia, livezi de piersici". Prin scrierea acestor cuvinte cheie, lon spune
motoarelor de ciutare ci site-ul lui conline informalii despre piersici
Turcia, piersici din Turcia gi livezi de piersici. Daci cineva cauti intr-un
motor de ciutare termenul "piersici din Turcia", din moment ce site-ul
lui lon are aceasti frazi in cuvintele sale cheie meta, motorul de
ciutare va arita site-ul lui lon intre rezultatele afigate'
o Descrierile meto nu au un efect direct asupra paginii web sau asupra
site-ului gi nici nu afecteazi foarte mult rezultatele de ranking ale
motorului de cdutare pentru o pagini a site-ului !int5. Descrierea Meta
este foarte utilS din cauza faptului ci aceasta prezinti rezumatul a
ceea ce conline site-ul respectiv. O descriere meta poate gizdui un
text mai lung, aproximativ una sau doui propozilii. Esenta descrierii
meta este cd Google poate utiliza fragmente ale acesteia la afigarea
URL-ului site-ului in pagina de rezultate a motoarelor de ciutare.
o Tag-ul robotului permite utilizarea unei aborddri specifice pentru a
controla modul de indexare al unor pagini individuale 9i de afigare in
lista de rezultate a motoarelor de ciutare.

I ()

t6

77

Atentie: a nu se conf unda tag-ur roboturui cu figierur robots.txtr

r' includerea unei hdrli o site-ului (sitemap) - o harti a site-ului este
similar
cuprinsului unei cir[i gi afiseazd link-uri citre toate paginile existente
in site. Ha
unui site este importantd deoarece aratl utilizatorilor in ce secfiune
se al
informatia pe care ti-o doresc. Astfer, utirizatorii economisesc
timp si su
directionati exact in zonele lor de interes. Harta unui site este
folositd si
motoarele de cautare atunci cdnd afigeazi rezultate ?n functie de
anumite cuvi
cheie. c6nd creali o harti a site-ului, creali de fapt o singurd pagind
ce conline lin
uri (legituri) citre fiecare pagin5 din site-ul dvs. Atunci c6nd motoarele
de cautare
vor lovi de aceasti pagini vor urma link-urile existente in harta site-ului gi,
ca urma
fiecare pagind a site-ului va deveni indexatS. Ulterior, atunci cSnd
utilizatorul
efectua cdutdri dupS anumite cuvinte cheie, paginile dvs. vor fi
afisate la rezultate
Din acest motiv, o legituri citre harta site-ului trebuie si
fie plasati vizibil pe
pagini a site-ului dvsl

r'

inregistrareo site-ului pe

un motor de cdutore odati creat

dumneavoastrS, acesta trebuie inregistrat pe un motor de ciutare, principalul

de cdutare fiind

Google. Acest lucru

se

si

realizeazd urm6nd link

, unde veli specifica URL

(adresa) site-ului, iar Google igi va trimite robolii (numigicrawleri)

si indexeze site-u
dumneavoastrS. in mod normal, este foarte util daci avefi
un figier numit robots.
in care specificati ce pagini din cadrul site-ului pot fi indexate
de Google.

1.2.4 Recunoagterea factorilor care influenleazd viteza

de desci

a unei pagini web

r tJtilizarca sistemului de cache' al browser-ului

aceasti responsabilitatc

l{r,ducerea numirului de animafii - prea multe animafii in cadrul unei pagini

wr,lr pot determina sciderea vitezei de descircare a respectivei pagini web.

t.2.5 llecunoa$terea formatelor figierelor audio, video, grafice folosite

Irr o;ltimizarea vitezei de descircare a unei pagini web
l)rrp,i r.um am menlionat mai sus, tn momentul accesirii unui site, browser-ul
rlocr,rtr,l ur r.alculatorul nostru, sub formi de fi;iere temporare, imagini, figiere audio
rt vtrlr.o, r'lt.rnente grafice gi altele, astfel inc6t, daci inchideli site-ul 9i apoi il
rcrlr,ir lrtrk,li, acesta se va incirca mai repede deoarece nu va mai fi nevoit str
rlt'Er err t'tlrrr rrou acele figiere, av6ndu-le deja in calculator.
Irr,.,\, ;rcntru ca procesul de descircare si fie mai rapid 9i implicit timpul de
lnr irr irr,,rlritr,,uluisi fie maiscurt, trebuie si folosim formatele adecvate de figiere.
Irr r,rrtrl figierelor audio, cele mai recomandate formate sunt MlDl 9i mp3, in
ratll fl.rlr.rr.lor video - FLV, iarin cazul imaginilor - Gif 9i Jpeg. Motivul pentru care
nrtl rFtorrr,rrrrl,rte aceste formate consti in dimeniunea foarte mici a acestora in
r nttif lcr alle r rr .rltt: formate.
Itnr,1 .rvr,li figiere in alte formate dec6t cele recomandate, puteli folosi diverse
eplhrlll '.oltw,rrr,de convertire a formatului unuifigier (de exemplu puteti schimba o
tntdglnr! rllrr lorrrr.rt PNG in format Jpeg sau puteli converti un figier din format MKV
In

in momentul accesdrii unui site, browser-ul descarci in calculator sub

formi
fi;iere temporare elemente grafice ale site-ului, impreuni cu textele,
fisierele audio
video' in principiu, daci browser-ul este nevoit si descarce un numdr
mare de figiere,
atunci site-ul se va incirca mai greu.
Nu intotdeauna numirul figierelor poate fi problema, cdt
mai ales mirimea
acestora' Un figier video in calitate HD sau FullHD dureazd destul
de mult si fie
descircat automat ;i ca urmare ?ncdrcarea site-ului va fi mai greoaie.
Pentru a ne asigura ci timpul de incdrcare a site-ului este
scurt, trebuie sd
avem in vedere regulile de maijos:
o Comprimarea imaginilor - acest
lucru se realizeazi folosind diverse
instrumente disponibile pe lnternet. Cel mai utilizat este cel
de la Google
Webmaster Tools.
o Redimensionarea imaginilor
- dupi ce au fost comprimate, acestea trebuie
redimensionate astfel incSt si aibd mdrimea exacti.
o Reducerea numirului de obiecte grafice
dintr_o pagini web.

rr,vine programatorului sau companiei ce va realiza site-ul web.

. Arhivarea figierelor in vederea reducerii dimensiunii acestora.

tlV)

l.;l Asllt't'tc legale

l,.l.l

lrrfelegerea termenului copyright gi a implicaliilor sale asrtpra

Irxtrrlui, irnaginilor, confinutului audio sau video disponibile in cadrul
rrrrrrl sitc wcb
l)r.grtrrrilc de autor (Copyright) reprezintS un set de drepturi exclusivt'
,r,rrrl,rtr. ,rrrtorului sau creatorului unei opere originale (carte, muzicS, imagini,
,rgrlrr,rll ,,oltw.rre, site-uri web, etc), inclusiv dreptul de a copia, distribui 9i adapta
mrnr ,r ,,.r lrtrrl.rrii drepturilor de autor au dreptul legal exclusiv si exercite un control
rrirlrr,r r olrrr.rii yi altor forme de exploatare a lucririlor pentru o anumiti perioadl de
irnrp, rlup,i (,tr(, se spune ci acestea intri in domeniul public. Titularii drepturilor de
,rrrrur pol lr,rrrsfcra sau atribui drepturile exclusive altor persoane. Dupi inregistrarea
ilrr,grtrrlrrr tlr',rtrtor este recomandat si folositi simbolul @ pentru a avertiza terIii
I I,,,,,,r, r,,r, lr,.,r lrruwir,rrrlrrr r,,,lr,o r,vtticn[,t lt,ttt;tot,tt.i,t .t(ltvll;illl tivr. ltl lttlt'tttt'l
tlv',
lrlr ltit,'trlr'11|totttltttlt'tttl
r,ilr...liltl .,lr,(,tlr.l,r.nltilil[lrnl)',(lilliltlt

tF=, ir,.tI

18

19

rrrr

ltiu,rnrl

ln,rPlr, ',lrllll ir

asupra caracterului protejat al creatiei. Astfel, proprietarii de website-urr

rtrr

subsolul acestuia sintagma "Copyright o 2013" prin care subliniazi faptul

gi imaginile conlinute in site sunt protejate de drepturile de autor.

publici
tex

ci

Drepturile de autor sunt drepturi de monopol. Acestea acordi un

exclusiv proprietarului de a utiliza obiectul protectiei gi de a interzice utiliza
acestuia de citre terfi, firi acceptul proprietarului. Astfel, daci doriti si publi
comercializafi sau distribuili un material protejat de drepturi de autor, trebuie
obfineti permisiunea autorului, indiferent cd este vorba despre intregul material
doar o porfiune.

irpltolrrl 2 HTML
I ljrrnrliuucnte HTML
.t.

l.l

lnf clcgorea termenului Hypertext Markup Language IHTML)

r,,,tr,un limbaj de calculator conceput pentru a permite crearea de siter1l wplr Ar r,,,tr, sitc-uri pot fi apoi vizualizate de citre orice persoani conectati la

lllMl

Irrlrrt trr.l

1.3.2 inlelegerea faptului ci conginutul unui site web se su

legilor lirii unde este publicat

frFlr!lir!

invilat

..,1 r

irplnrlt.
org,llt/,tlt,r care conduce acest proiect este consorliul W3C, insircinat
lrlrlFr I'l en il nl('nlirterea limbajului HTML.

Unul dintre cele mai frumoase lucruri despre construirea site-ul dvs. este
puteli alege unde dorili s5-l gizduifi si unde dorili s5 avefi domeniul. in acest sen
lnternetul oferi optiuni aproape'nelimitate, cu gdzduiri in aproape fiecare col!
pdm6ntului gi sute de extensii de domeniu. Cu toate acestea, locul unde alegeli si
gdzuiti domeniul are o influent; mare asupra informaliilor din site-ul dvs. si existi
multitudine de factori pe care trebuie si ii luati in considerare.
Multi dintre acegti factori sunt de naturi tehnici. proximitatea serverului
pentru vizitatori afecteazi viteza de descSrcare a site-uluisi nu toate tlrile sunt la
de bine conectate. De exemplu, nu este recomandat si gizduiti un site care vizea
un public din Asia undeva in zona ruralS din America de Sud.
ins5, deasupra considerentelor tehnice, sunt cere regare. ori de c6te ori
inscrie!i pentru un cont de hosting intr-o altd tari, face!i mai mult dec6t mutar
site-ul dvs. acolo, vi ,,supune!i", in multe privinte, legilor acelei !dri.
Nu conteazi unde ali creat conlinutul site-ului dumneavoastri, ci locul u
este publicat, legile t5rii respective avind jurisdictie asupra site-ului dumneavoastri.

gi totugi destul de puternic in ceea ce vd

revizuire
de
rr,,rf r. Acesta estein curs
9i evoluliein mod constant pentru a
r r,r trrlolor in continui crettere ale publicului.

| ,.tr, rrrr lrrrrbaj relativ ugor de

cu

llallnlf la HTML este Hypertext Markup Language:

r lly;rur lt,yl t.,,lc rnctoda prin care vi deplasali pe lnternet - prin click pe texte
rparlalo, 1lrnn(. lryperlink-uri, care vi fac legitura citre alte pagini web. AceastJ
tiil1rlA r grrlllr, lr rlqnumire textul hyper pentru a evidenlia faptul ci deplasarea pe
InlErrrrt t,..lr. rrr.llu,rr;i, utilizatorii put6nd naviga oriunde pe lnternet prin intermediul
6r etlrrt lty;trtlltrk ttt i.
r Mnrhrrlr lal,rclcrire la marcarea textului dintr-un site intr-un anumit mod (text
krrlrlal q,ru r ur'.rv), ;trin intermediul tag-urilor HTML'
r,.,lr,ronsiderat un limbaj, deoarece are cuvinte-cod 9i sintaxi ca orice
all llrrrlr,rl ilr' llrogr.ttnitre.

lllMl

( urrr luncfloneazi?

lllMl

orr,,t.i irrtr-o serie de coduri scurte (numite tag-uri), tastate intr-un figier
r.'rtrr. .rrrtorrrl site-ului. Textul este apoi salvat ca un figier HTML 9i vizualizat
r

Ir,rl sl1,
l1l1 ttrt.,trrr,.rlrrrl rrrrui browser web, precum lnternet Explorer, Mozilla Firefox
|ilililrHlr'(

sau

ltt0tttt'.

Arr,..r lrrow\cr citegte figierul gi traduce textul intr-o formi vizibilS, afigSnd
p,rHt1,r ,r!,r ( unr ,tutorul li-ar fi dorit. Scrierea propriul dvs. cod HTML presupune
,rtiltr,rri,.r rlr, l.rp,, rrriintr-un mod corect pentru a crea un site conform viziunii dvs.

l,r,rrtrrr ,r (r('a pagini HTML, putefi utiliza orice editor de text, de la cele
r rrrllrrr,rrl,rrr' p,rtr;i l.r editoare grafice puternice'

20

)1

2.1.'2 irr;elegcrca rolului consorliului W3C irr

recomandirilor HTMI. in;eregerea beneficiilor oferite

recomandiri

elabora
de

lnternetul 9i HTML-ul existd de foarte mult timp, iar limbajul in

care se sc
paginile web a fost standardizat de cdtre un grup de
aproximativ 300 de organi
membre din intreaga lume. Acest grup se numegte world wide
web consortium
consorliul w3c. w3c a fost creat in octombrie 1994 pentru a ,,duce
world wide
la intregul s5u potential de dezvoltare a unor protocoale
comune care si
evolutia 5i asigurarea interoperabilititii sale." W3C este un consortiu
interna

I x.r

ut.im click drcapta pe pagina wcb gi selectim opliunea view

source

lVtrrr,rlizare sursl)
e
c(-b*

ac*rrdrx.

ah6

r-

abaftq,

aar*d.rE sr! Eh-er*

IEkh.

Codul sursi al

pasinii web

format din membri permanenti si parteneri, care are ca scop dezvoltarea

standarde pentru world wide web (HTML, XHTML, XML, etc) astfel
incat rn
si evolueze tntr-o singurl directie.

Recomandirile consor-tiurui w3C au ca scop urmitoarere:

o imbunitilirea interoperabilitSlii site-urilor
web in cadrul browser-elor web
permite vizualizarea paginilor web cu ajutorul diverselor
dispozitive gi browsere

indiferent de tipul sau versiunea acestora.

o asigurarea unei accesibilitifi sporite este esenlial
ca lnternetul si fie
tuturor gi si ofere access 9i oportunitdti egale tuturor. Dreptul la informalie
e
considerat un drept uman esenlial si ca urmare toate persoanere (chiar
daci
anumite dizabilitati sau sunt in v6rstd sau se aflS in zone rurale
sau liri in curs
dezvoltare) trebuie si aibi access la aceste informa!ii. Astfel, programatorii
web
organizaliile care doresc sd creeze site-uri profesionale trebuie
sd incorporeze in
si intrumente care sd faciliteze accesul acestor categorii de persoane
la informa
prezentate in cadrul site-ului web.
o asigurarea unor declarafii consecvente documentele
HTML trebuie si aibi
structurd standard astfel incet paginile web si aibd un aspect
consecvent. Ace
declaratii indici browser-ului versiunea HTML in care este scris
documentul, setul
elemente gi atribute care pot fi folosite, precum si diverse reguli privind

documentului.

2.2Utilizarea HTMI
2.2.1 utilizarea unui browser pentru a vizualiza codul sursi
al un
pagini web
Limbajul HTML este un limbaj pe parte de client, adicl un
utilizator obignu
este capabilsr vizualizeze codulsursi al unuisite. pentru aceasta:
o Deschidem browser-ur web (rnternet Explorer, Mozilla Firefox, Googre chrome

etc.)

Accesim site-ul dorit prin introducerea adresei paginii web in bara

de adrese
22

ilir Altdr,trea

combinaliei de taste Ctrl + U deschide de asemenea codul sursi al

prllrrllwr.b.
I1,2,2 Folosirea tag-urilor pentru structurarea aspectului unei pagini
weh: <html>, <head>, <title>, <body>

log urile HTML reprezintd o serie de coduri scurte, utilizate pentru marcarea
Elrttlpttlrlttr html in cadrul documentelor HTML astfel inc6t acestea sd poati fi
vlrttnllrnlr in orice browser. De relinut totugi cd nu toate browswer-ele web suporti
Ittelr lag trrile HTML. Ca urmare, este recomandabil s5 testa!i pagina webin cdt mai
fitllle lrrowscre web.
l,rg urile se caracterizeazi prin:
,rrr irrainte gi dupi 2 paranteze unghiulare (< si >)
rll obicei suntin perechi, adici tag de deschidere gitag de inchidere. Un tag
,,r, inchide prin introducerea semnului
/ in interiorul lui. De exemplu:
. r .lr.xt</i>
l('xlul aflat intre tag-uri este conlinutul elementului.
l,rg urile nu fac diferenla intre litere mici gi mari, insi W3C recomandi
lolosirea literelor mici.
A"llt'|, in cadrul elementului HTML <b>Acesta este un text ingrosat.</b>
. h . este tag-ul de deschidere al elementului.
At t.sta este un text ingrosat - este continutul efectiv al elementului.
' /b, este tag-ul de inchidere al elementului.
23

scopul tag-ului <b> este de a-i spune browser-ului si afigeze textul ingrogat.
De asemenea, fiecare tag poate avea anumite atribute, care furni;
browser-ului web informatii aditionale despre elementele din pagina web.
Atribu
sunt puse intotdeauna ?n tag-ul de deschidere al unui element. Tot timpul
atribu
vor avea forma nume atribut = valoare atribut. De exemplu, elementul
bgcolor="blue"> are atributul numit bgcolor 9i valoarea blue.Valorile atributelor
scriu intre apostroafe sau ghilimele, insS se recomandS utilizarea ghilimelelor
intr
noile versiuni de HTML accepti numaighilimelele.

orice site trebuie sE contini urmdtoarele taguri: <html>,

<body>.

<head>,

Tagul <html> specifici browser-ului de unde incepe codul pe parte de

cli

Tag-ul <html> se inchide astfel: </html>

Tagul <head> specifici zona unde se introduc metacaracterele si legiturile
c
alte fisiere. Acesta la r6ndul s5u'se inchide cu </head>. Zona <head> nu
este vizibil
decdt prin vizualizarea codului sursi.
Tagul <title> specifici titlul unui site ce apare in partea de sus a browser_ului.
Tagul <body> reprezinti corpul site-ului, mai exact zona ce este vizibili
di
din browser, firi a vizualiza codur sursi. practic, tot ceea ce vedem c6nd
navigam
un site se aflS intre tag-urile <body> 9i </body>
Atributele tag-ului <body> sunt urmitoarele:
o alink - specificd culoarea unui link activ in document
o background - specifici o imagine de fundar pentru document
r bgcolor - specifici culoarea de fundal a documentului
o link - specifici culoarea rink-uriror nevizitate din document

.
o

text - specifici culoarea textului din document

vlink - specificd culoarea link-urilor vizitate din document

Ca un mic exercifiu, pentru a intelege mai bine lucrurile explicate

mai sus,
deschideti un editor de text (Notepad, Wordpad, Notepad++ etc) si introduceli
codui

i.2..1 l;olosirea tag-urilor pentru dezvoltarea aspectului unei pagiltl

wr.lr: <h I >, <h2>, <p>, <br />, <a href>, <img />
rrrilc specificate in subcapitolul precedent ne ajuti si delimitim spafiul de
Iutrrr rrr r,rrlrrrl unui site, insi nu ne ajuti si "model5m" aspectul informaliei dupl
r unr rhrr lnl,,,tu .,;\ introducem elemente grafice.
I'r.nlnr ,rr r.st lucru avem nevoie de urmitoarele tag-uri:
r l,rg rr ilr, <h1></hL>, <hz><f h2>, p6nd la <h6></h6>, se folosesc pentru a stabili
rtlrrrtlr.rltnlr trrr tcxt (hL este cel mai mare, av6nd un text foarte mare gi ingrogat,
ftilrllnlrr,.rl l,r titluri principale; h2 este folosit la subcapitole gitot aga).
r ln Mtr ro,,oll Word, daci apdsdm tasta Enter creem automat un paragraf, insl in
l,rp,,

llnrlr,rlrrl ll lMl trcbuie si specificim manual fiecare paragraf. Acest lucru se

rF,rllrr,,r/ii lokr,,irrrl tag-ul <p></p>. Daca dorim mai multe linii ale aceluiagi paragraf
rB lnr r,,rpii rh' l,r irrr.cput se va folosi tag-ul <br>.
r lln lrygr.r lrrrk st' introduce folosind tag-ul <a href> </a>. Adresa site-ului cdtre care
.,(' va introduce in atributul "href" ca in exemplul urmator: <a
-=e lrrr r llrrk
Irrcl www lrrro,rptitudini.ro>Dati click aici</a>. in momentul in care apisim click

i!Brrgo

prr lr,xlrrl "Dati click aici", veli fi

redirecfionat

citre

site-ul

gyt$r,t-'!ll tlupl ll r rr ltrti. ro.

I lrr plprrrprrl gr,rf i<. poate

fi introdus folosind tag-ul <img> in felul urmitor:

lnlfl \rc="casa.jpg" width="100px" height="LOOpx" f>
r .lt,r lIg rr'llrczinti numele imaginii dorite.
tdH rrl . trrrp,,' poate avea atribute precum "width" ce reprezinti lilimea
lnl,rglntt ;i "lrt.ight" ce reprezinti inillimea pozei.
-

,
v

Alerrlle,t lfrrA lrnaglnea nu se aflS in acelagi Ioc ca gifigierulin care ali introdus tagtl], ltrlrulo rI rpr.clflcafi calea citre aceasta, sub forma:

.lnrg rrr- "imagini/casa.jpg" " width="100px" height="100px" l>

I rr un nrlr r,xtrr:iIiu, deschide!i un editor de text gi introducefi codul de mai jos:
Itltttl

Itt'rtrl

de maijos:

. trtlt,> Acesta este un titlu</title>

<html>

Irt'rtrt

l. titltt de copitol</h1,>
lt),titlu de subcopitol</h2>

<heod>

' lt

<title> Titlul site-ului meu</title>

</head>
<body bgcolor="blue" text="white"> Acesta este corpur site-urui </body>

Cream o intrerupere <br> de linie

<p>Acesta este un porogrof</p>
<a h ref= " fi|t p : //www. e u roa ptit u di n i. ro" > Ace st a
Ltn link</o>
.-itnq sr t - "t aso.jtrtc1" width,." 104" heiqlht-" )42" />

</html>

Dupi ce ati introdus codul de mai sus, salvali figierul cu extonsia .html
deschide[i apoi figierul cu ajutorul unui browser web gi observ,rf i rr.zrrlt,rttrl.
)4

Itltttl
)tt

esl

t'

Dupa ce ati introdus codul de mai sus salvali figierul cu extensia .html gi
deschide[i figierul cu un browser web pentru a observa rezultatul.

Atentie!!in cazul pozei "casa.ipg" va trebuisi salvafi o imagine de pe internet

din calculator, si o redenumi[i cu numele "casa.jpg" si si o pozilionali in
director ca gi fisierul html.

(,npllolrtl

Creare Pagini web

lJ

l,l ltl'ttlt't'titre
l. t,

I lk.curroagterea tehnicilor

de planificare 9i proiectare a unui site

|1o*.,,u| rk,cruare a unui website este unul foarte complex 9i poate fi 9i mai
llrrplox rlar ji rrtt rt. realizeazi un "plan de atac" in prealabil. Acest plan este fOrmat
rlltrr rlllv,t p,lil ',1 ,llttllrlc:
lucrul
tvttlttttte,tt trrvtttlttr publicutui lintd -inainte ca un designer web si inceapi
adecvat
fie
si
site-ului
conlinutul
la rtlu, lrlrttlr.'.t,ririlit publicul !int5 astfel incit
atcrtrrto A.,tlr.l, rl,rr,i, cle exemplu, publicullintd este format din copii, implicit site-ul
public
Irel|trlr,..i rorrllrr,l rtrlori vii, multe animalii 9i informalii distractive. Pentru un
de llp lrl..lrrr.'.'., ',ilc ttl va avea un caracter formal'
(tarttt:rt rt.lltttriilor - acestea ajuti in vizualizarea produsul final 9i te ghideazi in
pentru ci
detvlllatca lrtolt.ttultti. Folosirea scenariilor este un economizor de timp
modalitifi
Alte
lainceput'
I6ele eln;re[. tlr.protltlc!ie suntvizualizate gispecificate de
(Sabloane) de
de a lt oflt lettl itt rft'rvoltarea unui site este de a utiliza template-uri
pagini'
elsrtgil pl ftrlrle.,lll pcnlru a se aplica design-ulimplementat pe maimulte
in
deoarece'
lltgtltltttrr,r, 11,1,( tttrii site-ului - acest pas este cel mai importat
foarte dificil
ftttu [le rlp ar earl.r, 5(! va crea site-ul. Odatd creati o structurS, este
suplimentare

costuri
9i
Fgtlll fltflltrttl.tl(,r ',,i <l schimbe radical, acest lucru cauz6nd
H tttatE ;tlot rlut r rk' lltttll.
programator in procesul de
f fttlpu t,;tfl l,tutlttt gblon - scopul principal al unui
lucru se
Et3tlE a rllF ttlrtl t".ll s.1 elimine munca rudimentarS, rutina' Acest

ce se va regisi
lEall,Eare ;rrlil I re.ilt.,r unor pagini gablon. lmplement6nd un design
.,r, r.r'onomisegte timp, acest lucru fic6ndu-se o singuri dati'
FE mBl tilrtltn Idt{lrrl,
Alegatrtt ztlt.llttrl dr novigore - Dupi ce obiectivele;i structura au fost decise,

igtilFtl Bdld r,1 r ott',lruiIi site-ul web. O structuri bine conceputi ugureaztr
prpllrllll,rlr,,r rlr.,r r[.lini sistemul de naviga]ie $i, combinati cu un design vizual
eftrteil, l,rrnnllr,ulilir,ttorilor sd construiasci o harti mentali a site-ului' Utilizatorul
arF nFvulr! rlr ltt,rt rrtultc posibilitSli de navigare prin site precum:

v
y

lokrsirea unei bare de navigare pozilionatd in partea de sus a site-ului

r,ttt in Partea st6ng5,
lokrrirea hyperlink-urilor pentru a naviga mai repede de la o paginl
l,r ,rlta,

lolosirea unei opliuni de ciutare in cadrul site-ului, aceasta fiind

lrrob.tbil cea mai rapidi cale de navigare'

77

3.1.2 Recunoagterea regulilor de buni practici in seleclia fonturi

Utilizarea fonturilor de tip: Arial, Courier, Helvetica

in momentul in care trebuie stabilit fontul corespunzitor pentru

website

l)r. .r,,('rncnea, dac5 existi un shortcut al aplicaliei pe desktop, se executi

,lrrlrlrrr

ltr h

pr.ironila

dvs, trebuie avuti in vedere disponibilitatea acestora (de exemplu anumite

si
de operare non windows nu au fontul Arial instalat) lizibilitatea lor.

r.-noze'

prltru a deschide aplicafia.

inchiderea unei aplicalii de creare pagini web

9i

in general, dacd dorili sd creali o pagind web care si arate la fel, indiferent
ce calculator detin vizitatorii site-ului, cel mai bine este si alegeti din trei grupuri

',r. ,rtlr,l(,,r/ii meniul File (Fi;ier)

fonturi.

El

1)

Fonturi Sans Serif

Multe site-uri au tendinta de a folosi una din urmdtoarele serii de fonturi
principal pentru cd cei mai mulli oameni glsesc fonturile sans serif
mai ugor de c
pe un monitor.

Open Web

T,"

(lose

Ctrl*Shift+L

Ctrl'W

Ctrl*S

Save
Save As.,,
5ave

And Change Ch.racter Encoding

Pu!liih

Ctrl+Shift+S

Publis!As...

:trl-

PEred

FEi.it lrli!le:
Export to

lqt,,.
Fi

Page Setup.,.

re
Print,..

',e pnrtl

loh r.,l

r
lrr".r

,,,r

Ctrl+

ombinalia de taste Ctrl + Q.

Dcrchiderea unei paginiweb

lrtrlrrr',r un(]i pagini web existente pe hard disk-ul calculatorului se

(Fi;ier)-open File (Deschidere figier) sau prin

re.rlrrr',r;,i ;ltrr ,rprl,rrca meniului File

_.lr ,

tir.l:irr',r lrrrlnrrrrlrr cn'

(Deschidere) din bara de instrumente. in fereastra afigati

t,E,!, r,rr '.r'rr.rvr11lrr',rz.i pini la figierul dorit. Deschiderea figierului se realizeazi prin
=r.tr.r
ll;15.1

)u

Ctd*O

Close All

Deschiderea uneiaplicalii decreare paginiweb

ecranul start tastati textul KompoZer gi da!i click pe pictogr

Locatiof,...

Ee(ent Paget

3.2 Utilizarea aplicali ei

Pentru deschiderea aplica[iei Kompozer se apeleazi meniul start indicind

mouse-ul spre colful din stSnga jos al barei de aplicalii (taskbar) p6ni apare imagi

Ctrl+N

File

Open

Arial, Helvetica, sans-serif (cele mai des utilizate fonturi)

verdana, Arial, Helvetica, sans-serif (acest font are caracterele
marigi maispaliate)
2l Fonturi Serif
Aceste fonturi sunt mai rare deoarece nu sunt foarte ugor de citit pe
monitor, cel mai utilizat fiind Times New Roman.
3) Fonturi cu un singur spaliu
Acest tip de font are o calitate speciald gi anume: lilimea fiecirui caracter es
egald, indiferent daci este litera "w" sau litera "l". Acest tip de font este foarte
utilizat la afisarea codurilor sursi.

t"n 1,* a** ;9**

N*

3.2.1 Deschiderea, inchiderea unei aplicafii de creare pagini

Deschiderea, inchiderea unei pagini web

op[iunea Exit (legire).

I.rr,',r lur

,.,r

,rp,i,,,rrca butonului

I open

sau printr-un dublu click stAnga pc

L|
1 I
0rgrn.s

Dqtrop

-^

I .:'-.,.,

lttulot.l.,

.i fcwntg
:Os*to?

,.:

))

*af

[,b.ar*,

Compraa

"4

,.L&nrc
$stumna'

l,

e', (at*xr.l*.rN,

diw}rtml

.-*

Crearea unei noi pagini web

I rtsiltcr,l uttlt tt<ti pagini web se realizeaze prin apelarea meniului File (Figier)(Nnrr) ltr lltr',tstra afigati pe ecran se bifeazi optiunea A blank document

fltw
lltur lrllrrl

ftNa.c*
ll $*y$rrc
&: *a4a.* plr{n

,l (.r'r..u'(.i1, sitlvilrc:t unt:l nol paginl web irrtr-o loc:rIle pc (l!sc

nr.r

otrtl)l('tilt)

gi se

apasi butonul

,
.

..

..:,]

,;,

uro
9<tu.x
! vid*o{
rF

:.:i

Whrl hnd ol ftlc do you want to crcatc?

[..

.,,,,

,t

A blenl documcnt

,,

A nrw documcnt barcd

.,

;? fmF*la

iL rnio*tc:)

I crr't' 1 1Cr"rr"y.

}.tP-Rt{oyl8Y {I

I crtrrc r XHTMI documrnt

irlri tlr.

[i

Stria OtO

onrirmplatr

..!el) lqr:ttron r llRLt cf the tnrpldte. cr chcose a locJl tmplnte

i- qf

Filr

n*r* sdqh*n{

bl.nl t.mpht!

Ltfilr n]

New

Teb

t
@

Se poate

folosigicombinatia de taste Ctrl+ O.

ll nlti

po..lhilitate const5

in

c."t.

apdsarea butonului

Cancct

NP6,

(Nou) din bara de

lFatrumento

inchiderea unei paginiweb

C, fc lrrlclF ftrloll 1l r ombinafia

Pentru inchiderea paginii curent deschise, se apeleazd meniul
File (Fisier)
opliunea Close (inchidere). Dacd sunt deschise mai multe pagini
web in simultan gi
doreste inchiderea tuturor, se alege comanda close All
flnJiaere toate) din ace
meniu File (Fisier).

de taste Ctrl + N.

Srlvarea unei noi paginiweb

telvclea ttttel ;r,rgini web se realizeazA din meniul File (Fisier)

Save (Salvare).

ln rarpta rk, rllohrg,rliyati pe ecran se tasteazi numele paginii web $i se apasl

Hulunul

Hqtn

View

lnsert

New

Format

t tX

Table

Ctrl+N

Qpen File

Ctrl+0

Open Web Location...

Ctrl+ Shift+

Recent Pages

( )
\ 7

)i

Ptease cntrratitleforthc currnt pagc.

This idcntiliesthepaqc inthewindowtitle and bookma*s.

clientl

I il

Close All

canccr

Irr lr.rr,,r,,lr.r Save Page As (Salvare Pagini Ca) se alege locatia gi denumirea
Ititr.trrlrrt, rlrrll;i c.rre se apasi butonul Save (Salvare). Extensia impliciti a unei pagini
wnlr r,,.lr..html.
30

31

ii,2.4 Arllugaroil ql edltarca unul tltlu descrlptlv de paglnit

1 I
Orgrnrt

Dcrtrop

Localia de salvare

l1e tol&.

salvlrii unei pagini web, aplicafia KompoZer vi soliciti numele

Fegltill welr. DacI insl ulterior dorili si modificali acest nume, apelati meniul Format
(Titlu li proprietdti pagin5).
= tll! lltle and Properties
Irr lrprpentul

fisierului
,r tit &6
I Corr4rla
t$:itrflt

i FryMn6
I Dcrs69
., Oenlsdt
f 5h/Sriw
;il&cr*pl&s

d i co*a<tl*ad

Slwhtn{
alan&Jr6t

.1 Ldrlu
-i, oocr"tuu

.| rnrt

Titlul paginii

ti Pirhr6
t v*or
/f

ca"g,ra

Numele figierului

at,w !@S
til6t"c,Il1lfl.

J_

Butonul save

_*J-t

:.-1*: ry

4 lIdcrulrt

Combinafia de taste Ctrl + S deschide de asemenea fereastra de salvare a pagi

web.

3.2.3 Crearea, salvarea unei noi pagini web pe baza unui

disponibil
Crearea unei noi pagini web pe baza unui gablon deja existent se r
prin apelarea meniului Fite (Figier) - New (Nou). in fereastra afisatd pe ecran
bifeazi optiunea A blank temptate (Sablon necompletat) 9i se apasi
T--:------r
I crc't l(Creare).

Wr.t tind

I ,l

oil

bl.nk

filc do )ou

w.il

to

.
I

dftms*

I
al;

@ d@md

b.i!d oa .

C StrictDm
tmplrt

nttr ths wcb loc.fion IUFL) cf thr tmpld, o, (hosle

:r: r": j.r:-:::

l:-l::....!]:::,,i!::r.1r Ii:,,i:.:.:i.,r.1.,,'...,:..,.,..,-.*l
6, r.qr34'i-pgq

9,-t ir,

1*i"t

l.tei

. q,

[h1l urr nditor de pagini web pune la dispozilia utilizatorilor modul de

sA putem vizualiza gi codul
;tetrlrg a inf elege ce existl in spatele aspectului grafic al site-ului.

vllUfltlrra Dul3n (Proiectare), uneori este bine

_l

f
Salvarea paginii web se realizeazA
precizarea

d lo{ nl temF

(itttttutarea intre codul sursi 9i vizualizarea proiect

ci-t

_ ..:"ie ,

prin aceeagi pa$i descri$i mai

ci formatul de salvare a gabloanelor este .mzt.
32

sursi

al

Fallnll
t1lltllilt(.,1 intre codul sursi $i vizualizarea proiect se face prin una din cele
deul nrnrlolll,lf l dc.scrise mai jos:
I Menlrrl Vlew (Vizualizare) - opliunea HTMI Source (Sursi HTML)
I Ere dlr;rril lrutonul Source (Sursi) localizat in partea de jos a ferestrei KompoZer.

.ffi?

crste. XHIMI dc(umnt

l,l,ll

sus,

33

3.3 Cregterea

n;,: tr ',t,rrrrl,rrrlr, .,r.rcgiiscrc in lab ul New Page Settings (Setiri patr',rrr.i rrou'i),
campul Character set (Sct
=.Fr tirrr::t lllr.rrr.ttlonalization (lnternalionalizare) -

productivitilii

3.3.1 Stabilirea unor opfiuni/ preferinle de bazi in cadrul aplicafiei

r ara+

Iet;tl
Optrons

inainte de a incepe lucrul cu aplica!ia KompoZer, este recomadabil si s

preferinfele dvs. din cadrul aplicaliei pentru a lucra c6t mai bine cu aceasti aplic
Aceste preferinle se stabilesc din meniul Tools (lnstrumente) (Preferinle). in fereastra afigati pe ecran setali urmdtoarele:
- browser-ul web implicit
in tab-ul Applications (Aplicalii) puteli folosi opliunea use system
pentru a folosi browser-ul implicit (de obicei lnternet Explorer) sau opliunea
custom application pentru a stabili un anumit browser pe care dorifi si il utilizali.
- tipurile de documente folosite
Tot in tab-ul Applications (Aplicafii), in secliunea File extensions for (Ext
figiere pentru) se stabilesc extensiile acceptate pentru documente html, figiere
imagini etc.

{tr

l).l.ult P.g. App.r,.nrr

. n..4., I d.l.ult color

(Don l

rtr'

*!
da,

(g!
Ns

A(1

6
a19uments

!e I rrk le

lri, rqround ,n69.

Chgor. Fil....

Choo,. t l.Dgurg'

i,xturr.

wrilnr!

d r.(

lron tlo drtdrcn tP..ilr.d

(l,r'r,r.,r.l

lSOSei9'l

Choot!.chtEd

A"."a,frcr*

-l

,gltta 61t1rtl.r p1.r tr.rtr, irr foile de stil create (fi;ierele CSS). Daci aceasti casetji
s=!e rlelrrlat,l l,rrrpo/r.r va ignora stilurile stabilite in figierele CSS 5i va utiliz.l
f*rlfllile lrter ir,rl.' ltr .rl'.1',t,i fereastrS'

denrions (')Ior:

HTML document:
CSS

tett

l.'l

l1tallrlturrtr (lonturi) pute!istabilifonturile implicite pe care KompoZer si le

felercall itt r,trltrrl p,ry,irrilor web. Daci este bifati caseta Allow documents to use
;1thg lcntt ('.r, Ir,rrrrIr,rlocumentelor si utilizeze alte fonturi), atunci KompoZer va

file pdh

P.ge setingt

Frle

rk

.fnmlut|

Stabilire browser implicit

urc cudom agpl;c.tionl

ffi

p.gcl

V,'cbbrowser

ar ule rydm d.fauh

:.

rn

,i

F-,*arra
Appli(rtion:

Normat

Options

..H,

r.i (oloE

(unonr.olor.

1,1.

stylesheds

i-::' htm, html, xhtmt, php'

dcfauh

i:-l cts

d.f.uh

lmagcfile! E! rco Jpg Jpg png 9rl bmp

def.uh

Mediafilcs !:i ogg, oqm, mpeg, mpg, mpl, mp4. moI wma,

dafauh

bd,ht',js,xml .rp.jrp in(

Tdfils
('l Modificat;on!

of the

,.ord"r.nr.r,l-J

{,ltiliffiir$ti

d.f.uh

Tipuri implicite de

fitiere
I

Typ.l.(.
5.rl
',crrl

OK

Trnrcr l'.leo, Fontan

(omr( S.nt
l.nl.ty

- codificare

l'15

Al(lh.b,

Codificarea se referi la anumite standarde ce stabilesc toate

necesare pentru a scrie pe computer texte din toate limbile active.
r' Allew

34

(lo(

unl?,tlt lo rr!. 'ilh.r lo'!lr

ffi'-Eiffifiifr&l{iitr:it,.

lt

.l.lJ.2 Utilizarea l'urtc[iei Hclp

!l.lp Cont.ntg
Un instrument util in lucrul cu aplicatia KompoZer este
Ui.r Guid!
functia de ajutor (Help), ce oferi informatii gi explicatii despre
Forumt
comenzile gi opliunile aplicatiei. Se poate apela din meniul Help
(Ajutor) - Help Contents (Conlinut Ajutor) sau prin apdsarea tastei Fl.

tl'lrl (lrr;iroi,rt) ,rplit J tt'xtului un format ingrolat

It,rltr (t ur',rv) aplictr textului un caracter aplecat
llrrrlr.r llrrr. (\rrbliniat) - subliniazi textul cu o linie
Trltc lools lclp

[@

l-

l.la;e rrre ':

Iont
5r1c

3.4 Introducerea gi formatarea textului

Qold
ltalic

Ctd'B

T.rt Eolot...
Wrrling Dircclion

lndcrline

Ctrl+U

Ctd.l

3.4.1 Introducerea, editarea, ttergerea textului

Pentru a introduce text intr-o pagind web, se pozilioneazi cursorul in
doritd, dupd care se tasteazi textul dorit. Editarea textului se realizeazi
selectarea textului pe care dorili si il modificali gi simpla tastare a noului
$tergerea textului se realizeazd prin selectarea textului gi a pisarea tastei Delete.
3.4.2

tilizarea funclie i relative p entru mirimea fonturil or

Ar

prla upllrtttl st. reg|sesc aiin bara de instrumente a aplicaliei KompoZer.

I Vrrmhh

Wrrlth

folosim mirimea "medium", atunci fontul se va ajusta

ls A-A^'BrUiFiEE=
I

Butoane de formatare

Text color (Culoare text) sau apisarea butonului l- o'n

hff de hnttttlttettlt' dt'termini afigarea pe ecran a unei palete de culori, de unde se
tf,CaElf rltlArrl.r rkrritll.
I lnratrrla Format

Folosirea fonturilor cu mirime relativi este foarte utilS daci dorim si reali
un website pentru toate tipurile de ecrane. DacS vizualizdm un site ce are
de mdrime L6px pe un telefon mobil, textul se va vedea foarte mare, ins5,

in funcfie de mi

ecra nului.

wi':

Pentru a utiliza fonturi de mirime relativS, se selecteazi textul 9i se

meniul Format -opliunea Size (Dimensiune).

Paleti de culori

)L- - Smaller Ctrl+Tqtltyle

Tqt

Larg.r Ctrl++

Color.,.

Wntrng

Drrectron

0ircontinueTqtStyles

Ctrl+Shift+Y

Dir.ontinuLmk

it.i*-<hrftrh

RentL,e

l.d,tre) -,1,_i'. 9

_tr.,

5n tr-

Fonturi de dimensiune

lmall
medilm

relativi

!arge

1-large

Paraq.aph

x-lEall

s-larq!

3.4.3 Aplicarea de formate asupra textului: bold, italic, tip gi culoa

font
Pentru a aplica diverse modific5ri (numite formatSri) textului, se
textul ce se doregte modificat gi se apeleazi meniul Format - opliunea Text Style
text). Cele mai importante formatiri ale textului sunt:
36

In r*,,rltr.rrr'.r ll,tginilor web, autorii paginilor web au mai multe oPfiuni Pentru
eper tfh 611,4 ilrhrtllor ;tcntru diverse elemente ale documentelor web. Culorile Pot fi
(Verde), Blue (Albastru)), in
dF-=r rtcc, !rln r urltttr llllG (combinafie Red (Ro9u), Green
Et=lFrr lrpr,rrrr lttt,tl ',,ttt cu denumirea in englezS'
lrr rl'.lr.trrttl ltcxazecimal existi gaisprezece nume de culori, fiecare Precedattr
{e grr ellrll lrt'x,rrr.r irrtll (caracterul special S):
l7

r/r,r ollr.i p.rtrtt v,rri.rrrtc tlt'.rlilttt re.t textului:

lr,ft (Slirrga) aliniazii liniile sau 16ndurile unui paragraf la marginea din
',l,rrtl,r.r paginii. La marginea din dreapta sunt create spalii inegale, in

f",r11111

Nume Hexazecimal Nume Hexazecimal Nume Hexazecima! Nume

lrrrrr (rc dc lungimea liniilor.

aqua

blue

fr.ntcr (Ccntru) - afigeazi liniile unui paragraf pe centrul paginii.

fuchsia

La

',l,rrrg,r 1i la dreapta textului se creeaz; spatii egale.

gray

lime

lllght (l)reapta) - aliniazi liniile unui paragraf la dreapta paginii. La

nr,rfln('d din stinga sunt create spatii inegale, in functie de lungimea

maroon

Itrrtrlor.
navy

silver

purple

#c 0c 0c0

teal

white

fffff f

yellow

ffff0

lurtlfy (Stinga-dreapta) - aliniazi liniile unui paragraf at6t la marginea

rltrr,,l.rrr11a, cit gi la marginea din dreapta a paginii. Spaliile dintre cuvinte

..rrrrt rrr,iritc astfelincSt liniile sd apari aliniate st6nga-dreapta.

llrlirrrrllr.rlr, ,rliniere sunt disponibile gi in bara de instrumente a aplicafiei:

Vrlalrlr SJrdth

I'.e A-S B,

3.5 Formatarea paragrafelor

3.5.1 setarea

Butoane de aliniere

proprietilior paragrafelor: aliniere, indentare

Alinierea textului se referA la modul in care sunt aliniate 16ndurile fald de

doul margini laterale ale paginii. Opliunile de aliniere a textului se gdsesc in m
Format - opliunea Align (Aliniere).

hrrlnrrl'rr..r lr,xlului se referi la distanta dintre text gi marginea din st6nga

nrarglrrr,.r rlrrr dreapta a paginii. lndentarea paragrafelor se realizeazi din
fiiEnlul futntnl ogrlitrrrile
I lltrtoerp lndent (Cregtere indentare)- pentru a mAridistanfa de indentare
I ll:r r:are lndent (Scidere indentare) - pentru a mictora distanfa de
Irrrlnnlrl ..(.rrr';rsti op!iune este valabilS numai atunci c6nd a fost folosittr
ltf lllrItr!,1 lrrr r r',tse lndent).

llu/;l

ffiitri:*lTsffi.wffirewse
)f
L
) lrgr -TruE

!ont
Size

,i^=.

Tlxt Style

Iht

in nr,,,l

Writing Direction

Ceitfrtrle

OilrontinucTqt Stylcs Ctrl+shift+y

l"1er1r!-,.

6 i

Linl

(-irt"

lnr!C .lrl(ltc,i: f

t,

indentare

lndent

t. j I'l!- -

Ctrl+l

. lentff

Positioning grid

Eisht

iriitirtra:.

!ustify

P.ge Title 6nd PropertieE,..

38

in codul sursi, tag .u.

"f
I
delimiteazi para8rafek..
J

l'r:nlrr',lr,r1ir,rt.,r intreruperii de paragraf, comutati in codul sursi al paginii

trelr

!eft

Page Colors and Bockground,.

inchide la finalul acestuia.

<p>Acesta este un paragraf</p>

< p>Acesta este un alt paragraf</p>

ii.:'t:l,ilx.lerlt

l,al. :1i ::,1

linie

rr,,r

1" 1,,,;'lrrrtrrl p,rr,rlgrafului 9i se

List

ln(rcdse

de paragraf 9i de

tilrii-L

Paragraph

Opliunide

intreruperi

nr.rl, tcxtul se introduce la nivel de paragraf. Paragrafele se

rfllirhea* lrr rnrlrrl ',rrr,.,i,rl paginii web prin intermediul tag-ului <p>. Aceste tag sc

Text Color...

ltrrrfitrrle

llrr+'r'rrrr.ir, ;lergerea unei

ro

lI

Optiuni de aliniere

.=r

-'=lr.rpr,li t,r11 rrl . 1l> (5i bineinleles gi <lp>).

r\lurrr

i r,rr(l ,,(' doregte

introducerea unei linii noi, se apasd tasta Enter gi

rurr lul ,ll in'.{'r(tr, (lr,tra verticalS (l) ce clipegte intermitent) se va deplasa pe linia
lrri,.?t,,,rr, ln lrrlrrl ,,rrrsii, intreruperea de paragraf estc marcat,i ;trin t,rp, ul <br>. ilt
lllMl .1r r.'.t t.t1i nu,u(' tag de inchidere.
39

Pentru ttergerea intreruPerii de paragraf, comutati ln codul sursl al

web gi gtergeli tag-ul <b>.
ln codul sursi, tag-ul <br>
semnificd o intrerupere de linie

Acest text conline <br> o intrerupere de linie'

furultrtul crelrll llstelor tl putell vlruallza mal Jos:

O3b

El,

fHa*'#?
lilil

r}{,
,ll

I ll i=r=

ta

lE E

Rezultatul introducerii uneiintreruperi de linie dupi cuv6ntul "conline"

fi vizualizat in modul Design (Proiectare):
Acsst toxt cor{ine
o intrerup*re d,e linie-

3.5.3 Crearea, modificarea listelor cu marcatori sau numerotare

o Borv

. Frtrl

o LdorCii
o lrtgcc&r
o 8lo&

List6 cu marcatori

singurnivel
Pentru evidenlierea paragrafelor in cadrul unei liste, se pot folosi d
simboluri (numite marcatori) sau diverse tipuri de numerotare.
Crearea listelor se realizeazd astfel:
o Se selecteazi elementele care se doresc a fi introduse in cadrul listei
o Se apeleazd meniul Format - tist (Listi) gi se alege tipul de list5 dorit

l.

l,

loil
&laid

L lhdr
a,

l,

List6 numerotati

AFI

Irruu

ficl=E
0?-ffir6,x{."IEEqr.r
ols;ggliruc
lcrrlin !

ttd*

ffalnft}Y
Ctlr5ltift+x

t{rmGd Anctlet Ctrl+lhllt+A

40

4L

lr

rrr

ltltt

,1,
KTLIL

lormrt &

Mrrtlnr

Hlt-r
"hEtp

,/

/Ftr.

w3

orglIR/htrI4

stracl

(rnches)

dEd'r >

Top:

C6mpuri Pentru
stabilirea marginilor

nE

Lelt:
0.5

<1!>3r.{</ 1a>
<.1.1>Ferrar i< /

1i>

i >laebo! ghrnl<

<1

/'

Bottom:

Listi cu marcatori

Ir>

ii>lIe ! ceCes</ l.1 >

<1:>5koda<,/ 11>
/ f,1>

0.5

<

br>
h i>l'1oE

6cr

lete<,/

lrrtlrr'. & footers

I

h1 >

rllc
I clt:

<i.a>Bnw</ 1"1>
< L a >suz: k:<,/ f r >

<ii>..toide</

ListS

Iar;ctttla

numerotati

1a>

1>Ap!r f i a< / 1 a>

<la>!(awasak!</ fa>
<1

/ oL>

bx>

,/ltrl>

D6ien I XB spli

l ", s",r*

tr.6lArlaugdt.r.il,tll()dificarea,stergereauneiculorisauimaginide
Endel{ pcglrrll

este implicit alb, insd

iH t*rerrrerrlrrl r rr.iirrr urrei pagini web, fundalul acesteia
llttturllftr.rt ltritr adiugarea unei alte culorisau a unei imagini'
pe meniul
rr,,ltltr,r*..r ltrndalului unei pagini web, se executd click
Fgnl,r
afiSati
atttl Background (Culori 9i fundal de pagini)' in fereastra
ffi11 iafr f rrhrtrl;r[trrrrr,.r
personalizate)
5i
culori
(Se
folosesc
Use custom colors
iiiar, rs frrlearrl
I fhfg Yer ldr rl a I I rr ll 'l

frilparfe
in codul surse al paginii web se poate observa faptul ci o listd de
este delimitati prin tag-ul ,,<ul></ul>", iar o listi numerotat| prin tag-ul ,,<ol><f ol

3.6 Formatarea paginii

3.6.1 Stabilirea marginilor paginii: sus, ios, stinga, dreapta
Fiecare pagini are patru margini: st6nga, dreapta, sus, jos. Pentru ajusta
acestora, se apeleazd meniul File (Fi;ier) - Page Setup (lnilializare pagini). in
Margins & Header/Footer (Margini & Antet/Subsol) se completeazi valorile
c6mpurile Top (Sus), Bottom (Jos), Left (St6nga), Right (Dreapta) $i apoi se a

din dreptul cAmpului Background (Fundal)' Din

ilalsta dE , tthrt l. ',r' ,tl.p1r' trtt'ttl[a doritS'
t i= erer rrr,1 r lrr l" grr, lrrr.rrut dOin dreptul cAmpul Background image (lmagine de
pe
iurrilall :r, hl,rllrt'.t/.i trrr.rllitrca 9i apoi se executi dublu click aceasta'

I l*

er=r

ttti

llr

ptr lrttlottttl

Irr ltrr,rl, '.r' .tgt,t',,.t

lrttttlnul

OK

pentru efectuarea modificirilor'

butonul OK.

42

4t

".. '.___-_-._,r..

.,-..._:_-

-.,..

ih

Fscgold0rgrurd
Page Colors

ffi *ra'iil{fru*''r' rr

T,-,Ti

( olon

l)r<1c

Rrrdcr'r delruli colors (Oon't rct colors in prgc)

U,,e

cusionr colorc:

Nornralterl: I
tcxt:

Actrvc hnk

tut: I

Vrrrted link

tcxt: I

lrnk

Active link text

Brckground:

Puteli stabili o
:iFlL r: Lrlatr,,t

tr ptge icr.:rtrr:

ller !ground lmrger

Background lmage:
I

Culori

hyperlink-uri

lrt

ri

imagine de fundal

rr rt rt,

illat':,rlftrl
Advanced Edit...

Pentru a gterge culoarea de fundal aplicata paginii web, trebuie sa

albi din paleta de culori.
Pentru a elimina imaginea de fundal aplicati paginii web, in fereastra
colors and Background (culori gi fundar de pagini) eliminafi link-ul cStre poza
caseta Background lmage (lmagine de fundal).
aceea$i pagi gi sd alegeli culoarea

3.6.3 Modificarea culorii unui hyperlink: vizitat, activ, nevizitat

Un hyperlink are treistiride bazi sianume:vizitat, activ gi nevizitat. str
de webdesign recomandd colorarea in mod diferit a celor trei stdri pentru a
procesul de navigare a utilizatorului.
Modificarea culorii hyperlink-urilor se face in felul urmdtor:
o click pe meniul Format - optiunea page colors and Background (culori
fundal de pagini)
in
fereastra afigati pe ecran se alege culoarea doriti pentru:
'
,/ Link text - link nevizitat
,/ Active link text - link activ
,/ Visited link text - link vizitat

li7 l,rlAtrtll ( Ilypcrlink-uri)

1,7 I lrripleBrrr'('|.t tt'rlnenilor de hyperlink absolut gi relativ

tlypgltrrl lrtlr. rltrrtr un website pot fi de doui tipuri: absolute 9i relative.

I H;pcrlrrt rrllp ,rlriolrrtc se utilizeazi atunci c6nd se face referire la pagini aflate in
*Fl *e.*ttuir urerrl, r,ur. ,ru un nume de domeniu diferit. De exemplu, in cazul siteEf * *l;r nragartlr, urrltrrr', trebuie sd existe in subsolul website-ului un link citre

lAa**lalla Nnllnn,rl,'l rlr, Proteclie a Consumatorului), care are propriul site.

I HUFethrrI rltle rll,rtrvr.rr'lrrozinti legdturile cdtre pirli ale site-ului curent, cum ar
Flit* rlile tlrl lrarir rh, n,rvrFl,rre care duc citre alte paginidin cadrulaceluiagisite.

ftF

I 'l J lmm,l.u r.r, ('(lititrea, gtergerea unui hyperlink de tip text satl
Ititeglttr
,r rn',r.r.r rrrr

llrrh (lrpi,'rttrr.i) sau folosi!i butonul

I'ltc,li lttli;,r ir r orrrlltrratia de taste Ctrl + L.

ltn=ergrr.

lryperlinkintr-o pagini web, executafi click pe meniul lnsert

4rs

LrnI:

61n bara de instrumente.

ln t.b-ul Llnk (Legltur5) se tasteazl URL-ul dorit.

.li*Td

extut afis at

|***;;pil;r,,

btrlfif

mrnrril rd*rs, orsdcsl

E lf,ttortmrrnrlraarqr

[]

E lil.aildtnioEploafion
B $m !ut* rround lintd imrgc

tr*;rtobcopoea

AdYlocGd ESL..

f,.-F?q.1

in***la*e,.

l .tr+ -i
or

Dacd ulterior dorili sd editali link-ul, executati click dreapta pe

text ,i
opliunea link properties (proprietdgi legdturi).
Pentru a Sterge link-ul asociat textului, selectali textul, executafi
click
pe el gi alegefi opliunea Remove Links (Eliminare
legituri).

r;ffi; r;:r*il]

dc tlp lmagine va fi mutat intr-o alti locafie, acesta nu se va

Pentru reafigarea imaginii in pagina web, trebuie sd

p3lnr web.

dorltl sI editati link-ul, executa[i click dreapta pe imagine

rnd Unk Properties (ProprietSli imagine ti legdturi).

pi

llnk-ul asociat imaginii, executafi click dreapta pe imagine

gi

Llnks (Eliminare legSturi).

ldltarea, Stergerea unui hyperlink intre o adresi de

ttu

o lmagine

ttergerea unui hyperlink intre o adresi de email gi un text

l|tl[llll exact ca mai sus, cu singura diferen]E ci in locul URL-ului
Ul tncr tdresa de email gi se va bifa caseta The above it is an email
lh mrtsus este o adresd de email).

dhlrcr,

[lfrchldcrea unui hyperlink in aceeagi fereastri sau intr-o

noul

Q Don'tusraftamtrtoil
A.tudS&G

Widthr

660

High

6.A

FtGUul do creare a unui hyperlink, avem posibilitatea sd alegem dacd

t-gI1-j t_Ig_l
46

Ul dmchlda lntr-o fereastrl noul in acceeagi fereastr5. Se recomandi ca

rbtolute sI fle deschise in ferestre noi.
hnmtn llnk Propertles (Proprletlfi leglturl) ce se deschide apel6nd
lfmrt - llnk Proportles (Proprietlti leglturt) exlstl in partea de jos

sectiunea Target (Tintd). in aceastd zoni se bifeaz5 opfiunea link

ls to be
(Legdtura se va deschide) gi din rista derulanti
opliunea doritd
"i"g" noui)).
window (in aceeagi fereastrd) sau new windows (intr-o fereastri

,"

pe butonul OK pe ecran apare slmbolul unei ancore. Acest simbol

ln eldrul paglnii web atunci c6nd aceasta este vizualizatd pe lnternet.
Efltrcr tncorel, urmltorul pas constl in inserarea unui link cltre ancora

Itlteltct

ilnlul lnrtrt (lnserare) - Link (Legiturd).

rlrtTa.

llnk Propcrtles (Proprietdti legeturd) introduceli in caseta Llnk Text

tfxtul ce va fi afigat sub formi de link, iar din lista derulantl tlnk
llnk) selectafi numele ancorei (acesta va apdrea cu semnul # in fafa

1.] tl*L b r**iveto pagr tm*ion

prrttnnrsa
hlrEffiq*frtft
in {irfrMc
h fhc

3.7.5 stabilirea unei ancore (anchor), inserarea unui link

ancori
Mai existd un alt tip de hyperlink care face leg5tura citre o altd zoni
a
web. Acest tip de hyperlink se numegte hyperlink oncord, iar zona
din pagini
care se face referire se numegte ancord. Daci afi vizitat vreodati pagind
o
web
avea in partea de jos un link cu textul 'tnapoi sus,,, acesta este
un link cdtre o
Aplicalia KompoZer permite crearea unei ancore prin intermediul

d,
*t*

(Ancori)din bara de instrumente. Astfel:

o Executati click in zona ce va fi folositi drept ancori

tfUl

butonul OK pentru confirmare.

ttergerea unui tabel

I lnfrr un tabel, accesati meniul lnsert (lnserare) - Table (Tabel) sau

- li|lrt (lnserare) - Table (Tabel). in fila Precisely (Precis) se introduce
dndurl ln c6mpul Rows gi numirul de coloane in cSmpul Columns.

^rl

. Apdsati butonul I*L lRn.ori)din bara de instrumente.

' in fereastra Named Anchor properties (proprieti[i ancori
numele ancorei (fiecare ancor5 trebuie si aibd un nume unic).

denumiti)

She

.'-'---

Bo*,', lt
lolumnr: l2

lidth: 1t*

%of

window E

AnrborNune

jsediu

',

@;;rEda"l

48

f * llo;
49

$tergerea unui tabel se realizeazi prin click dreapta pe tabel

(gtergere tabel) - Table (Tabel).

Table

3.8.2 Inserarea, editarea unei etichete de tabel

lltl*ina*,

'q lllquqs!-E

Atunci c6nd inserafi un tabel in cadrul unei pagini web, este recom
utilizati o eticheti descriptiv5, pentru a evidenlia ce reprezinti informaliile din
lnserarea unei etichete se realizeazi in felul urmitor:
o Executafi click dreapta pe tabel gi alegeli opfiunea Table Cell
(ProprietS;i Tabel)
o Executali click pe fila Table (Tabel) Si din lista derulanti asociatd
Caption (Eticheti) se alege pozilia etichetei.

Em fEf
-l
sr".*

lz

xcigrrt

I
I

er*
phJr brtuvrn cdh

phtbrtrmencdr**iyj:Iy_

t.n fil

c.Ptios, f 1u*.11u1

-f]

Selectali alinierea doriti

[-itrg11".*_U

s*n, !q,--1i_U.t-y9-l:fU

Itorgerea rtndurilor 9i coloanelor

drft creat, se pot introduce oricAnd noi coloane 9i rtndurl'

!" Tltl li.::l:
iiiototn.ior se realizeazs prin click dreaptt
opliunii Table lnscrt
coloana sau r6ndul respectiv) 9i alegerea

f a,Ll L.jr1l t-It*j

in momentul inseririi unei etichete, se creazi un spatiu liber unde
click gi tastali numele dorit. Odati introdusS, o etichetd poate fi modificati
simpla selectare

lltht

va introduce o coloana in dreapta celel

textului ti tastarea noului text de eticheti.

ltt

3.8.3 Alinierea unui tabel: stAnga, centru, dreapta

(cotoand la dreapta)

l*l.Lct
l-a.e{h
lalrrttcdlo$.OeH
It r Cd lgctgroud Cotor-

Alinierea tabelului se realizeazi astfel:

Executali click dreapta pe tabel gi alegeli optiunea Table Cell Properties
(Propriet5tri Tabel)

Executafi click pe fila Table (Tabel)

9i

Table Alignment (Aliniere tabel) se

centru sau dreapta paginii).

50

din lista derulanti asociati

alege tipul de aliniere dorit (sti

Eor,Oon

nil!t

ClhrnaBdo.r

CotuilllArt,

simplu, ce se
coloanelor 9i a r6ndurilor este un proces foarte
alegerea optiunli Tabol
njl-grrn cllck dreapta pe randul sau coloana doriti,
llt:rlare tabel) ll selectarea opfiunii dorite:
?rbh - va lterge intregul tabel

ftlt:ilee

51

Row (sl

Column (s)

va gterge rAndul sau rAndurile selectate

- va $terge coloana sau coloanele selectate
va $terge celula sau celulele selectate

Cell (s)

cell contents Del

UnFl r hrle se reallzeazl prin selectarea ei 5l apelarea menlului Table

Bll (tt tntlare celulS).

foob ldp

va $terge doar confinutul celulelor selectate

lnr.rt
8qr(s)

l.Lcl
Irhtc

Column(s)

Join with Ccllto

lrl(s)

Splhlcll
Crerta Trblt lrom Sclcction

fable
Join with Cell to

thr Right

Tablc or Cell Background Color...

Ccll Contcnts Dcl

3.8.5 Modificarea

Hlimii coloanelor

gi

inillimii rAndurilor

groslmll liniilor unui tabel, a distanlei dintre celule

dlntre marglnile celulelor gi textul din cadrul acestora

hlliCrroe

Modificarea lSlimii coloanelor gi fnillimii r6ndurilor se realizeazi prin

dreapta pe tabel qi alegerea opliunii rable cell propertaes (proprietili rabel).
Table (Tabel), secliunea size (Dimensiune), se introduc valorile in c6mpul H
(Tnillime) (pentru 16nduri) giwiuttr (Litime) (pentru coloane). Unitatea de m
poate fi exprimatd in pixeli sau procentual, din dimensiuena ferestrei.

trbclulul se pot modifica in fereastra Table Cel! Propertles

dcrchlsl cu click dreapta pe tabel. in fila Table (Tabel), sectiunea

(Bordurl $i spatiere) se modifici urmdtoarele caracteristici:
- Ttpfrtlntl Srosimea liniilor tabelului
r nprltlntl spatierea liniilor tabelului
. taprazlnte distanla dintre marginea celulei si textul din cadrul

l;trnmstP.clng

[-*-l

Scindarea unei celule

"l
L +rv

3.8.6 imbinarea, scindarea celulelor

imbinarea celulelor se realizeazS prin serectarea celulelor dorite gi a
meniului Table (Tabel) - Join Selected Cells (imbinare celule selectate). Rezultatul
fi o singura celuli, de dimensiuni mai mari.

I,*, lr

I pi,ctr
I ra.k

I
pi,.t'
I troru lz i
l*t

lx[round Cobn

(Lct Ragc color

rhor thrcugh)

I :"tr"
52

3.8.8 Modiflcarea culorll de fundal gl stergerea culorll de

celulelor sau a intregului tabel
Anumite celule, 16nduri gi coloane dintr-un tabel pot fi evidenliate diferit
de restul tabelului prin aplicarea unei culori de fundal. pentru a modifica
fundal a tabelului executali click dreapta pe tabel gi alegeli opliunea Table or
Background color (culoare fundal tabel sau celulS). Bifali opliunea Table (Ta
din paleta de culori alegefi nuanfa doritd.

E cteoundfon

OiI"E

Dml3n (Prolectare), executatl cllck dreapta ln bara de stare a

po tag-ul <toble> gl alegefl opfiunea lnllne styles. in flla
urcutttl cllck pe butonul Choose flle (Alegere flller). ln
li||f tlb (sclectare Figier lmaglne) se localizeazl imaginea 9l se
ClEk, ln rona Posltlon (Pozifle) se aleg opfiunile de poziflonare
pc orlzontall gi verticall.

EdtG)

Selectarea imaginii de fundal

:::iwwTrffiffit,ffir

ffiIMTf_IIffiIX

unnnffi
O

Hrc
serdio*

ta

O Ce*r O

Fm'lg nu, [,*_]A

--lg

fI_lB

c'*'" lzu

&i$*ncs Jirq._l$ sruE

llag]g

Modificarea culorii de fundal a unei celule se realizeazi in acelagi

in fereastra Table or Cell Color (Culoare tabel sau

singura diferenlS c6,

selecteazd opf iunea Cell (CelulS).

Pentru a $terge culoarea de fundal a unei celule sau a unui tabel, in
Table or Cell Color (Culoare tabel sau celuli) se bifeaz5 opfiunea doriti (Table (T

- dacd dorifi sd modificali culoarea de fundal a intregului

tabel sau cett (

daci vrefi si modificafi culoarea de fundal a unei celule) gi alege[i culoarea albl
paleta de culori. in final, apisali butonul OK pentru confirmare.
3.8.9 Adiugarea, gtergerea

fundalului un tabel (grafic sau imagine)

o alti posibilitate de evidenliere a unui tabelin cadrul unei pagini web

in adiugarea unei imagini de fundal pentru acesta.
55

Rlgh.

Capitolul IV Utilizarea obiectelor

4.1 Obiecte grafice
4.1.1Adiugarea, $tergerea unei imagini in cadrul unei pagini web

Adiugarea unei imagini 9i stabilirea atributelor acesteia

lnserarea unei imagini se realizeazS prin accesarea meniului lnsert (ln

lmage (lmagine) sau prin apisarea butonului l*"st din bara de instr
I din
fereastra afigati pe ecran, in fila Location (Localie), se apasd butonul
cdmpului lmage Location (Localie imagine). Se localizeazi imaginea 9i se
dublu click pe aceasta.

-lmtllnlapoatefiintrodus5ladimensiuneaeiactualisaulao

(Dimensiuni) se bifeazi opfiunea

p.rtlcularizat{) li se stabilesc mirimile dorite pentru l6tlme

fruiirir.tf. ln ftta Dlmensions

lh.rtht),
Locatia imaginii

lnrg.fttfia
I

c-J-

O imagine dintr-o pagin5 web are mai multe atribute:

Text alternativ - reprezintd un text ce va apirea in cazul in care imaginea

incarcS. Completarea acestui atribut pentru imaginile site-ului dumneavoastrl
un element foarte important in procesul de optimizare a site-ului pentru
de ciutare.
Textul alternativ se introduce in fila Location (Locatie), c6mpul
Text (Text alternativ).

modificati una dintre dimensiuni'

*gnet elnd caseta Constraln este bifatl 9i
automat pentru a pastra propo(iile. DacI nu dorltl ajustarea

f'Liprtuua

I dlmonrlunllor, deblfafi

55

caseta Constrain'

r'

Chenar - imaginea poate fi incadrati intr-un chenar pentru o mai

evidenfiere. Grosimea chenarului se stabilegte in fila Appearance (Aspect),
Solid Border.

I ltrcrnrea unul formular lntr'o paginil

web

cadrul site-urilor
onllne au devenit un instrument extrem de utilin
online, pentru a
magazin
lololtte pentru a comanda un produs dintr-un
df utlllrator pe un site sau pentru a realiza o solicitare'

lfrulrrla
'jgil
Spacing

!t{r

and Right

Iop and Bottonu

t:]
L]

Al'qnTstto lm.gc

unul formular se realizeazd astfel:

mpnlul lnsert (lnserare) - Form (Formular)

Define Form (Definire

torm Propertles (Propriet5ii formular) se introduc urmdtoarele

Solid Egdrn

numele formularului
URL a paginii unde
Adlon uRL in acest c6mp se introduce adresa
completat
este
9i trimis
ne redirecfioneze formularul odata ce el
lm

htm Nrme

il

f-e-_-]
r'

Aliniere

t@ i

(Nume formular)

- tastali

datelor (Get sau P:s:l

Hdhod (Metode) - metoda de transmitere a
nu modificS nimic pe server, [n
ii trlurr folosita pentru operatiile carede
modificare' actualizare sau
Ff a, tr.bri folositl pentru operalii

n,drteletrimiseprinmetodaGetaparinbaradeadresiabrowserulul
potriviti pentru a
Din aceasti cauz5, metoda Get nu este

'+rPl

dl

orlclne.

Eonlldenllate(deexempluparole).MetodaPostesterecomandat{
lf drtc deoarece le trimite firi a le face vizibile'

opfiunile de aliniere se aleg din lista derulanti Align Text to lmage.

At the bottom
Wrap to the left
Wrap to the right

Atenlie!! Daci figierul de tip imagine va fi mutat intr-o alti locafie, acesta nu
mai incdrca in pagina web. Pentru reafigarea imaginii in pagina web,

f-o',]

L-,91"l.,

actualiza[i loca]ia figierului.

$tergereauneiimagini

$tergerea unei imagini se realizeazi prin una din metodele de maijos:

Click st6nga pe imagine gi apisarea tastei Delete de pe tastaturi
Click dreapta pe imagine gi alegerea opliunii Delete ($tergere).

*l,l

stngle'line 9t multi'llne
Adaugorea, gtergerea cflmpurilor de tip

sunt cele mai utilizate tiPurl de

GlmFurlle de tlp single-line 9i multi-line
lntt=un lormular onllne.
linle de text 9l Pot
Cimpurlle de tlp single-line utilizeazl o singurl
conllne maxlm 255 de caractere'

Campurile de tip multi-line utilizeazi o porliune nrai mare de

folositd pentru introducerea comentariilor sau notelor.

'.rllxrqr

lrld N.mr

'

Bowrr

lolumnrr
Adresa client

'Morc lroPcrticl

Calea Dorobanti nr.146. tsI. M353. Sc 2, Et.10, Ap.44, Focsani. Judetul

Vrancea

Advanccd !dit.'.

Crnccl

C6mp de tip multi line

Ea r&ttt;rtttlkrr

f
/
/

lntroducerea unui c6mp de tip single-line se realizeazi astfel:

formularul pr:in click stAnga

Se apeleazi meniul lnsert (lnserare) - Form (Formular) - Form Field
formular)
/ in fereastra Form Field Properties (ProprietSli c6mp formular) se alege din
derulanti Field Type (Tip c6mp) tipul c6mpului (in cazul nostru, se selecteazi
Text). in c6mpul Field Name (Nume cimp) se seteazi numele c6mpului.
Se selecteazi

tlt' tip single-line 9i multi-line se realizeazi Prin click

eltnp ;l ole,gett',t opf iunii Delete ($tergere)'

rilorgcrea campurilor de tip:

tElldat P, ltltltttt rntlltl

,l Atla$Bor,e.t,

ErFd r ilntl)itrilor de tip

listi derulanti

listi derulanti,

casettr

se realizeazi astfel:

Iutrrtrtlarttl prin click stinga

nrnrrlrrl lnsert (lnserare) - Form (Formular)

Selection List (List5 de

Utl nema (Nrrmc listi) se introduce numele listei

bulrlrtl Add Optlon (Adiugare optiune)

frll :r. lttlrttduce textul dorit.

l6r lrttlottttl Add Option (Adiugare opliune) pentru a
Yalrrnte rllrr llrtJ 5'a.m.d.

Add gPi'on
Add Eroup

lntroducerea unui cimp de tip multi-line se realizeazi astfel:

Se selecteazd formularul prin click stSnga
Se apeleazi meniul lnsert (lnserare)- Form (Formular)-Text Area (Zoni de

/
/
/ in

Adv.n(.d [dn.

campul Fietd Name (Nume cdmp) se stabilegte numele c6mpului, iar

c6mpurile Rows (R6nduri) gi Columns (Coloane) se stabilegte numirul de 16nd
de coloane ale cimpului (practic, se stabilegte indltrimea 9i lSlimea fizici a

Crntrl

6l

introduce

/
/

lntroducerea c6mpurilor de tip casetS de validare se realizeazi astfel:

Se selecteazi formularul prin click st6nga
Se apeleazi meniul lnsert (lnserare) - Form (Formular) - Form Field

l.ld lypc

formular)

in fereastra Form Field Properties (Proprietdli c6mp formular) se alege din

lnH

derulanti Field Type (Tip cSmp) tipul c6mpului (in cazul nostru, se selecteazl
Check Box (Caseti de validare)). in c6mpul Field Name (Nume cAmp) se
numele cAmpului, iar in cAmpul Field Value (Valoare c6mp) se stabilegte

Saningr

(iroup

irld

!rmc:

lrlua

[]

acestuia.

tnitiattY Sctcaca

.Morc!rcpcilie
l

Ad'ianced Edit...

Fietdfype -.--__Check Box

.---^---- '--ll-r'"n
-Ll

iI

oK

"i

Cancel

Fieid settingt
Field

Name:

Field Value:

fl

lnitialtyg.hecked

Advanced Edit.,,

/
/

Cancel

lntroducerea campurilor de tip buton radio se realizeaz6 astfel:

Se selecteazd formularul prin click st6nga
Se apeleazi meniul lnsert (lnserare) - Form (Formular) - Form Field

formular)

in fereastra Form Field Properties (ProprietSfi cSmp formular) se alege din

derulanti Field Type (Tip c6mp) tipul c6mpului (in cazul nostru, se selecteaze
Radio Button (Buton radio)). in cSmpul Group Name (Nume grup) se seteazi n

grupului de radio butoane, iar in c6mpul Field Value (Valoare c6mp) se

valoarea acestuia.

Elrtpttttlt,itnpuriserealizeazSlafelca$ilacelelaltetipurigianume:
pr r lrrtp (,[)llunea Delete ($tergere)'
pentru cAmpurile
Br[nlren, rlodlflcarea proprieti[ilor
radio
buton
validare'
li-rti rterrrtnrtlll, casettr de

de

tip:

buton radio au anumite

lle rle ltp llrtlt clerulanttr, caseti de validare 9i
Ft pFllllll o utlllzare mai ugoari a acestora'

pentru c6mpurile de tip text

Drllnlroa, modlflcarea proprietifilor

tip text se
g tAll rrrotlilicarea proprietifilor pentru un cimp de
Propertles
Field
meniului Format Form
gi
FIln I lh I ;re ,tr t'sta apelarea
i -More P.roperties I
luri mutte
lll rAnrp lnrttrttl,tr). Sc apasi butonul in cimpul Field size (Dimensiune
;;;;;;1,,;,,iii, p,.,,p..int51i suplimentare'
- ,r..--:-^
Maximum Length (Lungime
;il;;;;;i; ;i,;;;.;,,1,,^;a cimputui, iar in caseta
pot fi introduse in c6mp'
lnlrlrlttr ptl ttttttt,'lrttl maxim de caractere ce
ll}allnlrea,modiflcareaproprietltilorpentrucimpuriledetipllstl
tlltttlattti
pentru un c0mp dc tip text sc
fleftnttnir ',.trr rrtrttltlit.lrca proprietitilor
Format - Selectlon List Propertles
Elil trtltr r llr k pr' ,tt t'tt.t 1i apelarea meniului

62

63

(ProprietS!i listi de selectie).

urmitoarele elemente:

List Name (Nume

in fereastra afigati se pot st.rbili

listi)-

sau

numele listei

trld lypt

(iniltime)- numirul de elemente afigate

Multiple selections (Seleclii multiple) - aceastd proprietate
Height

selectarea mai multor elemente din list5.

lrdd Srttingr

lrmc
Ir:ld lclue:

6roup

Value

Elmentul

Elementul 2

Elmmtul3
Elmmtul4

Elementul3

Elmer*ul

Elemer*ul 5

Irb lndcx

Lista

r ---

t_

-1

-.1
i

Remcve

gultipleselection

^h{cr,e Up

Dierbled

lndq

l*{ove Doiln

Ffilllr ltHll ,rlc cSmPului ar fi:

OK

Sira:

$ccrpt Typcr:

A19-9.'oup

EciSf,t

Tab

Mrximum lcngth:

Addgpd;;

f]
I

gislblcd

tlmentul4

List

Name:

Propcrtis

$rld

List

Elmstul2

r Sdedion

Curs

lvl tnitiallySctcacd

Selected E!

.Fcwcr

Elmmtul

i1

Rrdro Bullon

trfb lndrx

introduceliin caseti un numer pentru a indica ordinea de

allrtlllct it rtccrstUic6mp in cadrul navig|rii prin campurile formularului.

Atttu Kry - introducefi in caseti o tasti pe care dori]i si o aplsatri
lfFillru ir v,1 deplasa automat la acest camp'

Definirea, modificarea proprietSlilor pentru cdmpurile de tip

de validare sau buton radio

Definirea sau modificarea proprietililor pentru un cSmp de tip

validare sau buton radio se realizeazi prin click pe acesta gi apelarea meniului
- Form Field Properties (Proprietili c6mp formular).
Cea mai importanti proprietate este starea de bifat sau nebifat a
respectiv. Astfel, bifarea opfiunii lnitially Checked (Bifat initial) sau lnitially
(Selectat initial) face ca, in mod implicit, c6mpul creat sA apari selectat atunci
pagina web este afigatS intr-un browser web.

*l,l

Athrrlurr-.it, ellminarea butoanelor de acceptare/anulare

Egpf runrltlFt,lr(,il cSmpurilor din cadrul unui formular, datele trebuie trimise
(cu ajutorul unui
tsrvel (rrr olrrtorul unui buton de acceptare) sau potfianulate
dE anrrlor o)

!
5

lnlrarlrr rrra lrrrtoanelor de acceptare $i respectiv anulare se realizeazi astfel:

i$etteatfl lot tttttl.trul prin click stanga
fF=l*ura nx.llul lnsert (lnserare) - Form (Formular) - Form Field (Cdmp

orm Fleld Propertles (Proprieti[i c6mp formular) se alege din lista

a ll:lrl Iype ( lip cimp) tipul cAmpului (in cazul nostru, se selecteaztr tipul
lslton (llrrtorr ,rr.ceptare) sau Reset Button (Buton anulare)). in caseta Fleld

htcarlt

64

o f

Name (Nume cimp) se introduce numele c6mpului, iar in caseta Fleld value
c6mp) se stabilegte textul ce va fi afigat in interiorul butonului.

Eliminarea acestor butoane se realizeazi prin click dreapta pe

alegerea opliunii Delete (gtergere).

4.2.6 Stabilirea, modificarea proprietililor pentru

acceptare gi anulare
Definirea sau modificarea proprietatilor pentru un buton de acceptare/a
se realizeazi prin click dreapta pe acesta gi apelarea comenzii Format - Form

Properties (ProprietSli c6mp formular). in fereastra afipatd pe ecran puteli

numele gi valoarea cAmpului.

,.

trnhgl

Ficldlypc

i i suu-it

lNunrl lorrrrrrl,r) tasta[i numele formularului

ln or e'rl r llrrrp sc introduce textul moilto.', urmat de adresa de email
f, ttlnrtre rlalple r ompletate in formular.
llilteAr) rrrt.toda de transmitere a datelor (Get sau Post). Metoda GET
lprlrlru opt,ra[iile care nu modifici nimic pe server, in timp ce POST
I ;ranlru opr.rafii de modificare, actualizare sau ttergere. in plus,
pf lft trrelorl,r Get apar in bara de adresi a browserului 9i pot fi citite de
a::arli rarrr,'l metoda Get nu este potriviti pentru a trimite date
ld: axerrrplu parole). Metoda Post este recomandati pentru astfel de
b ttlttrlle l,ilrI a le face vizibile.
E, lrp rrp,rsil butonul More Properties (Mai multe proprietiti) li in
r alegr, varianta text/plain.

gft

-*l 3

e,tto"

lolm
|

flrmt

Adbn

Ficld Settings

UtLr

formubr

Aici introduceli adresa de mail

mriho:

citre care

se vor

trimite datele

formularului

| .futltopraio
ln3odrng

Ficldsiza:

:.1

tagd tnmr:

Tab!ndc

AccesKe

tcrr/pbir{

]L

Advanccd

Stnonfoml

|.rll;:l
i liill.rl

er-l
Fr

Canccl

lB rearr,.t tormularului, am uitat sd specificim anumite proprietlfl,

ll rrrurllllr .rtr. uxecutind click dreapta pe formular gi aleg6nd opfiunea

Itr

(l'r o;rt lr.t,1f i formular).

4.2.7 Stabilirea, modificarea acliunii formularului in

trimiterii datelor prin email

in momentul creirii unui formular, avem posibilitatea si stabilim

int6mpld odati ce formularul a fost trimis. putem si afisdm un mesaj i
"Mesajul dumneavoastri a fost trimis cu succes"), putem si red
utilizatorul citre o altS pagind din site sau putem si trimitem datele
formular printr-un email citre persoana potrivitS.
in momentul creirii formularului, in fereastra Form properties (pro
formular) se sta bilesc u rmdtoa rele proprietS!i
:

56

!dil..

67

r,,rr,.l} irr irrtrqducerea (de obicei in antet) a unuigrup de linii

F fcdrut trrg lrrt ",,lylt." (ex. <style>body{background-color:red;}</style>)'
Iilt tsntF r.liricnttr deoarece codul nu poate fi suprascris prin
pagini
uFullllter r.,.. Mr.toda internS poate fi totugi utilizatS tn cazul unei

iilfrnt

Capitolul 5 Stiluri
5.1 Concepte

CSS

tlll dlt,trto de celelate pagini.

HtrTnl p..lr r:u;l mai uzual5 5i cea mai utild, constand in introducerea
Eu

5.1.1ingelegerea termenului Cascading Style Sheets (CSS), u

beneficii
Limbajul HTML este folosit pentru a oferi o structur; conlinutului unei
web. ins5, el nu este de ajuns pentru a face un site atractiv 9i inovativ. in acest
fost creat limbajul CSS (Cascade Style Sheets), ce permite cosmetizarea unui
dSndu-i exact forma doritS, indiferent de complexitatea design-ului grafic.
O foaie de stil sau un CSS este un set de reguli 9i caracteristici care,
o pagini web, pot modifica aspectul s5u. in acest fel, putem cumva
automatiza munca necesari proiectirii site-ului. Putem defini un stil pentru
altul pentru text astfel inc6t si nu trebuiasci sd modificim de fiecare dati
titlurile pentru a avea aspectul dorit.
Liniile de cod CSS pot fi introduse in interiorul limbajului HTML ca atri

tag-urilor Html, proces ce se nume$te "inline style". insi acest lucru nu

recomandat deoarece ar cauza o inclrcare mai inceati a site-ului. Ca urmare,
recomandat ca liniile de cod CSS si fie stocate intr-un figier cu formatul ".css"
o incircare mai rapidS gi o editare mai ugoarS.
La 16ndul siu, figierul css trebuie ordonat in functie de zona
modificatS. Un programator profesionist delimiteazi in interiorul figierului
cod specifice antetului, subsolului, conlinutului, primei pagini etc. pentru a pu
repede linia de cod care trebuie modificatS.
Beneficiile utilizirii CSS sunt:
o Ugurin[a in mentenan]a gi actualizarea site-ului
. incdrcarea mai rapidi a site-ului

o
o
o

Oferirea unor opliuni suplimentare de formatare

Dimensiunea redusd a fiSierelor site-ului
Control bun al design-ului site-ului.

llt r arltrtl trrrui figier separat CSS. Aceasti metodi permite incircarea
;lilrgarrll,tr|la mult mai controlatS a codului, putSnd fi astfel ugor de
ilCn*t r Arrrl f...1(, nevoie. De asemenea, aceasti metodi permite
llFErtulul tttal rttttltor pagini deodatS.

lipleSnren structurll unei reguli

Ell :rte foilnat rlin trei pirli:

a stilurilor: inline,

extern.

selector, proprietate

9i valoarea acesteia.

ta;uerlntll "obiectul" pe care dorim si il modific|m cu ajutorul

ll pul tl un t,lB in sine precum "p" (care reprezinti paragrafele) sau
lrrti llllttrllu).
p6l ll 9l rft,numiri de clase. Acestea se folosesc atunci c6nd dorim sd
(precum
iLl mrrltu elemente ce au aceeagi clasi 9i nu toati categoria
clasi aratl
Erre htEe.rmn5 toate paragrafele din site). Selectorul de tip
EGtet

ir

lrl1"
puate fi 1l un id unic, prin care modificSm un singur element. Acesta
rltttttttplp l l ) tt lu l".
rl ll ert4 urmltoarea: selector{proprietate:valoare;} (de exemplu:
UnUl

=olor trerl;)

cs!i
I Glglt'pn, rttlvitrea unui nou figier CSS
un ttou f i5ier CSS, se urmeazi paSii de mai jos:
I rrrpiltrrl Tools (lnstrumente) - opliunea csS editor (Editor css).
ip-to ferr.,r.,lr,t CSS Stylesheets, iar in partea stingi este creat automat

$Yl:rhmt
itra Cti Stylasheets se alege tipul selectorului: tag html, clasi sau id gi
lElerlilrrrlul rltrr lista derulanti aflati in partea inferioari a ferestrei CSS
A;rul :e ,rp,trlt butonul Create Style rule.

Metoda inline reprezinti aplicarea stilurilor pe aceeagi linie cu tag-urile

(ex. <body style="background-color:red;">). AceastS metodi nu este una
eficienti deoarece ingreuneazi incircarea paginii gi este dificil de gisit o
linie de cod pentru a o modifica.
68

CSS

a r tFEr

5.1.2 Recunoagterea principalelor metode de aplicare a stil

inline (pe aceeagi linie), intern, extern

in momentul actual, existi trei metode de aplicare

un

69

f a0.a't '
ShGdr

rnd ruhi

ilcr$tllGrd.

hLt

fifaa '

C) cy'lc.ppli.{ to rlt

dmotr d q?.
oa

Gh$

aF

cq..my.las!

Q *fr
e9'

applicdto m dcms* ti0r +Binld D dributG

*h*ds

O sdorn SyL

llr

Paginii

t }}!rf..
t Oir.t
lCr*r

e,g. h2

O iyL.pplirdto.il dmelts

Localia de salvare a

lbrira
Ilafr.

lorm

n la

,f,|lfn..
tttr

Numele

|| <6rr

gi

formatul paginii

*-|=*#:*l

','.."

hrrixrtr

Butonul Save (Salvare)

in panoul din partea st5ngi, se apas5 pe internat stylesheet

Eqart stylc*c* and sdtch to exportd wrsiorl

gi apoi pe

rl

salvali fi$ierul css in acelagi folder cu fisierele paginii web

Crlet css-ul.

modlflcarea regulilor
StylcStrcct

T1ryc
Disabh*
URL
irrd'n list
Numbtrofruls

terVcss

E
f

chrtk to disablc stylch.Gt (crnoot b: saved)

".*

i.--U"aa.a-l^t.ttt.

d;*-r$

*---

all
L_____
i

Stylc6hcctt

in fereastra afigati pe ecran se alege localia giformatul paginii (.css).

70

culoare, fundal, font

lbmpoZer pune la dispozilia utilizatorilor posibilitatea de a crea regull

Clt rl crteze astfel:
manlulTools (lnstrumente) - optiunea CSS editor (Editor CSS).
oPtlune se poate deschide gi prin ap5sarea tastei Fll.
Itlngl a ferestrei se alege numele selectorului dorit.
CSS

CSS:

t_:l*.] I

7t

.*,

in fereastra afigati pe ecran se selecteazi fila Text.

tfllaillal'r

Pentru stabilirea unui anumit font pentru text, se bifeazd

caseta Use r
font family, iar din rista deruranti se arege fontur dorit. pentru
acesta
stabili caracteristici suplimentare cu ajutorul cdmpurilor:
'/ Font size (Dimensiune font) dimensiunea caractereror
,/ Font weight (Grosime font) -- ingrogarea caracterelor
,/ Font styte (Stil font) - aplecarea caracterelor
,/ Case (Caz)- caractere minuscule (lower case), majuscule (

lr,rHtntr prirr irrtermediul

optiunilor din secliunea posltlon

( ukr,rrr.;r do fundal

Puteti introduce o
imagine ca gi fundal

case) sau doar prima litera mare (capitalize)

Alignment (Aliniere)- alinierea textului (st6nga, centrat,
st6nga-dreapta)
Se apasi butonul OK pentru confirmare.

./.

tunol regull CSS deja existente se realizeazi astfel:

*]-8c$3

r r
Fd wdght

rlr:_g!I::f4!
J pnddnd:
:

ttrprrlul Tools (lnstrumente) - CSS editor (Editor CSS)

pe acran se alege din partea stSngi selectorul pentru care
: Rtttrllllt arc stilului
reler torul, in partea dreaptS, in fila General, vor aparea toate
apll[rl acestuia, acestea putSnd fi apoi modificate cu ajutorul filelor
lnclltotrtrl etc,

rfllati

!n?:.,r]:d

Fut *yle

tueit&;;eli# -.:.-

lhr

Case

..-

,L_r'-:Y-11'1-uv

Td

n
l-in.hdslt

,;]B

ColoE

I
I
I

Lincth.dgh
Uadeti.r
Etinting

i--9!

r
o

.]

crn'e

regulS css pentru curoarea fundaruruise creazi

astfer:
in aceeagi fereastri css styresheets se serecteazi fira Background
Sp apasi
anaci butonul
hrrinnrrl di^
se
^a--..r..:
din rlr^-^+^
--r
dreapta cdmpurui

C.rrircterist,.,," *r**
Ir__
(

coror (curoare) gi se arege c

dorit5, dupS care se apasi butonur oK pentru apricarea modi

efectuate.

:l_Y!-e,ti f_olosi

lEf=_-Choosefite

ca gi fundal

imagine.

in

aceste caz, se apasi

(Alegere figier) din dreapta cSmpului lmage (lmagine),

se
imaginea gi se selecteazd prin dubru crick. se poate
apoi poziliona rmagt
72

in fereastra afigati pe ecran se selecteazi fila Text.

tfllaillal'r

Pentru stabilirea unui anumit font pentru text, se bifeazd

caseta Use r
font family, iar din rista deruranti se arege fontur dorit. pentru
acesta
stabili caracteristici suplimentare cu ajutorul cdmpurilor:
'/ Font size (Dimensiune font) dimensiunea caractereror
,/ Font weight (Grosime font) -- ingrogarea caracterelor
,/ Font styte (Stil font) - aplecarea caracterelor
,/ Case (Caz)- caractere minuscule (lower case), majuscule (

lr,rHtntr prirr irrtermediul

optiunilor din secliunea posltlon

( ukr,rrr.;r do fundal

Puteti introduce o
imagine ca gi fundal

case) sau doar prima litera mare (capitalize)

Alignment (Aliniere)- alinierea textului (st6nga, centrat,
st6nga-dreapta)
Se apasi butonul OK pentru confirmare.

./.

tunol regull CSS deja existente se realizeazi astfel:

*]-8c$3

r r
Fd wdght

rlr:_g!I::f4!
J pnddnd:
:

ttrprrlul Tools (lnstrumente) - CSS editor (Editor CSS)

pe acran se alege din partea stSngi selectorul pentru care
: Rtttrllllt arc stilului
reler torul, in partea dreaptS, in fila General, vor aparea toate
apll[rl acestuia, acestea putSnd fi apoi modificate cu ajutorul filelor
lnclltotrtrl etc,

rfllati

!n?:.,r]:d

Fut *yle

tueit&;;eli# -.:.-

lhr

Case

..-

,L_r'-:Y-11'1-uv

Td

n
l-in.hdslt

,;]B

ColoE

I
I
I

Lincth.dgh
Uadeti.r
Etinting

i--9!

r
o

.]

crn'e

regulS css pentru curoarea fundaruruise creazi

astfer:
in aceeagi fereastri css styresheets se serecteazi fira Background
Sp apasi
anaci butonul
hrrinnrrl di^
se
^a--..r..:
din rlr^-^+^
--r
dreapta cdmpurui

C.rrircterist,.,," *r**
Ir__
(

coror (curoare) gi se arege c

dorit5, dupS care se apasi butonur oK pentru apricarea modi

efectuate.

:l_Y!-e,ti f_olosi

lEf=_-Choosefite

ca gi fundal

imagine.

in

aceste caz, se apasi

(Alegere figier) din dreapta cSmpului lmage (lmagine),

se
imaginea gi se selecteazd prin dubru crick. se poate
apoi poziliona rmagt
72

Afigali data ultimei actualiziri a site-ului (preferabil pe fiecarr, p.rgini) astfel

vizitatoriisite-uluisi gtie cit de actualS este informafia publicatr pe site.
. in cazul in care in cadrul site-ului existd diverse figiere disponibile spre descl
este recomandabil s5 furniza[i gi detalii legate de aplicalia software necesari
deschiderea gi vizualizarea figierelor gi eventual gi un link citre site-ul de unde
fi descSrcati respectiva aplicafie software.
o Asigurarea compatibilitilii intre conlinutul site-ului web
9i browser-ele web lucru permite vizualizarea paginilor web cu ajutorul diverselor dispozitive gi
web, indiferent de tipul sau versiunea acestora.

6.1.3 Verificarea ortografici gi gramaticali

efectuarea modificirilor corespunzitoare

a unei

pagini

inainte de publicarea unui site web, acesta trebuie verificat ortogr

gramatical. Verificarea ortograficS gi gramaticald se realizeazi astfel:
o Selectali tot textul folosind combinalia de taste Ctrl + A
o Apela[i meniul Edit (Editare) - check spelling (Verificare ortografici)
. in fereastra afigati pe ecran va apirea cuv6ntul gregit, precum gi
sugestii de modificare a acestuia. Existi mai multe opliuni de urmat:
o Replace (inlocuiegte) - inlocuiegte cuv6ntul gresit cu cel
din lista de sugestii, doarin pozilia curent5.
o Replace All (inlocuiegte tot) - inlocuie;te peste tot in pagini
grepit cu cel corect.
lgnore (lgnord)- ignord cuvSntul evidenliat doarin pozifia
lgnore All (lgnori tot) - ignori cuvdntul evidenliat peste tot in
paginii.

o
o

Misspelled word:

Gdcd.

Replace with:

iiEF-#

G_l,l lfflptpllr!t't.it procesulul de lnctrrcare (upload) a unui site pe un

FFer;l tle thscilt'carc (tlownload) a unui site de pe un server
f-alErt'.lle rrl, itcesta trebuie incircat pe un server pentru a fi acceSibil
pe un serverweb
tsl1att, rF rlrrr.onexiune la lnternet.incircarea unui site
f

rle upload.

;rol r nn,.l,1 ilr achizilionarea unui domeniu, dupi care se achizifioneazl

ffu rlnr crF l)f. 1n server al unei companii ce oferi gizduire web (hosting).
GarFd unul ,,ilt. pe un server se realizeazi prin doui modalitSli:
pd unr.l r onexiuni FTP
Ftlgftr"o p.lnoului de control al domeniului. in mod normal, acesta se
l,r adresa www.siteulmeu.rolcpanel (unde www'siteulmeu.ro
rii arlrr.sa site-ului dvs).
olgl grar rorrsttr in testarea site-ului folosind principalele browsere web:
r, Morlll;r Firefox, lnternet Explorer, Safari gi Opera pentru a verifica
l slte ulul cu acestea. Lu6nd in considerare evolufia rapidd a
rls lrrternet, se recomandi verificarea compatibilitS[ii site-ului cu
rl talllote

Ut

hrtd rltrk

lnrf,t'.nru,, uttul site web pe un server

it

Xotn;lolrrr oferl posibilitatea incircirii pe un server a figierelor web

rllp rrlrlvr, l,lrI a fi nevoie sd folosili o aplicalie de tip FTP.
ilen flplert,lrlr site-ului cu ajutorul aplicaliei Komposer se realizeaztr in

ti

rrrerrlrrl Edlt (Editare) - Publishing Site Settings (Publicare setdri site)

rd dp,rul,1 pc ccran se selecteazi folderul unde se aflS figierele

Sgggestions

9i

Eulunul )K lx.nt r u conf irmare

lro PubllrhlnS settinSs (Publicare setSri), fila General settings (SetIri
lE lrrlrrrrlrrr r,irr campulsite Name (Nume site) numele site-ului
rl Wolt Slte lnformation (lnformatii site web) se introduce adresa web
(

Teasdale

Alasdair
Teasdale's

Alasdair's

9tc
Language

'

rlesrHrr,t un website, aveli nevoie de o conexiune FTP gi de spafiu de

English/United States

Closr

76

rrlrrt

!lflttr a llllerele
ti iintpri prge tttte
Dc*ioe

(Tttlu paginl) se stabilegte numele paginli ce va fl

tlmprr Fllcname (Nume figier) se stabilegte numele figierului ce va fl

ce se va
mal exlst! gi alte imagini sau figiere ce au legdturS cu figierul
se bifeazl caseta lnclude lmages and other flles (lnclude

rtuncl

llrlte

flglere).

S:t as Default

Rrnrcn

3tr

Se apasi pe fila FTP Settings (Setdri FTP). in c6mpul Publishing adress

publicare)se introduce adresa FTP primiti de la compania de webhosting.
in c6mpurile User name (Nume utilizator)gi Password (ParolS) se introduc
de utilizator gi respectiv parola pentru conexiunea FTP, primite de la
webhosting.
Se apasi butonul OK.

El frcb* hilg..nd oth.rlilGt

Q Ul. rmr locltion re Pgr
( ) th. thir rit. tubdirrcto4n

f
ll rprcl butonulf

Pt'td'

p,r'b',

s...,ty [rrr*"

:p
f|

tnry;se.l

nort
Krcp

dincori*

in syncwhih

Se acceseazi meniul File (Figier) - Publish (Publicare). in fila Publish (

stabilesc urmitoarele detalii:
in cAmpul Site Name (Nume site) se stabilegte numele site-ului in

78

i-c.*a
rrL

(Publicare].

Date de autentificare

T |h.sn
ls+*.D.r"el

79

I f--Igjl

SIMULARE WEB EDITING

lnternet?
dlntre urm5toarele NU este un serviciu oferit de
YOll'
WorltlWidw Web (www)
Morlent
E nratl

un URL?
Adrec.r unei Paginiweb

leB$turl cltre o alti Pagini web

Un tag HTML
UR

motor de clutare

(web hosting)?
tfulnt5 6Szduirea web
.hrvletu
iontra cost ce permite utilizatorilor si efectueze

ciutiri

de

lnternet
telefonice
itrrtrt, contra cost ce permite utilizatorilor si efectueze apeluri
filln lnternet
pe
ii*t.t, contra cost ce permite distribuirea gtirilor 9i articolelor publicate

hlumattt

Pe

hlrrnet

site web pe

un
llrut.t, contra cost ce permite utilizatorilor si igi publice de
lnternet
httto.t pentru vizualizarea sa online de citre utilizatorii
ra urmltoarele implici o relalie de tip client/server?
f6plarea unui text intre douS documente

Btrchlderea unui calculator

lGlual[area unei aplicafii software de pe lnternet
CAnE(t.1rca unei tastaturi la calculator

wide web este adevSrati?

dlntre urrnltoarele afirmafii despre world
operare
$lorklWlclc Web este o aplicalie a sistemului de
Worltl Wklc Web nu utilizeazl http
WorhlWldc Web este un motor de ciutare
WorklWkJc'Web este o parte a lnternetului
al publicirii unui site pe
dlntrp urrntrtoarele poate fi considerat un dezavantaj

I
Ecrtrtrlle lt'gate de glzduirea site-ului

Ferllrllllrtlr',t de actualizare permanentl a site-ului

80

81

c.
d.

Posibilitatea de interaclionare cu vizitatorii sitt' ulul

Accesibilitateasporitl

7. Care dintre

a.
b.
c.
d,

1.3. Care

a.
b.
c.
d.

urmitoarele reprezinti un pas important in publicarea unui site web?

Stabilirea metacaracterelor
inregistrarea unui nume de domeniu
Crearea unei hdrli a site-ului (sitemap)
Evaluarea nevoilor publicului !inti

urmitoarele NU este o tehnicd de optimizare a unui site?

lncluderea unei hirlia site-ului
inregistrarea site-ului pe un motor de cdutare

rrt*r

t.. [d.t Ye trcutra Isk

,j d'Pwtrl

Utilizarea metacaracterelor relevante

tj1.

descircare a unei paginiweb?

a. Utilizarea unor fonturi de dimensiune redusi
b. Reducerea numSrului de animalii din pagina web
c. Arhivarea figierelorin vederea reducerii dimensiunii acestora
d. Reducerea numirului de obiecte grafice din pagina web.

.1

a.
b.
c.
d.

se

rlearcr dc

Fbclltl sI [ErE,

cc

po&

ig.ee h ct&ilrf IIr cru*l {e dimscrtr.

cor ilc oert tr!.ne rtr btxfr,tlc

'loua

. l00crllaftabarul

150

Era. f!i6i

I lurcrrmpqfdccoft
180

si

r(|et itmph,

Ir3rrdi+ricr

- Un

acesta

HdF

Rcrcu PLACINTA CU MER$

9. Care dintre urmitoarele NU reprezintd un factor ce influenleazd viteza de

artrebuiutilizat pentru imaginile din cadrul unei paginiweb pentru

p-o

ffi-

Crearea unei pagini gablon

10. Ce format

imbunitSlirea interoperabilit6!ii site-urilor web in cadrul browser-elor web

14. Unde trebuie s5 dali click pentru a vizualiza codul surs5 al paginii web?

8. Care dintre

a.
b.
c.
d.

dintre urmitoarele NU reprezinti o recomandare a consorliului W3C?

Crearea unor standarde proprii de citre dezvoltatorii de site-uri web
Asigurarea unor declaralii consecvente
Asigurarea unei accesibilitSli sporite

ca

grm. rlhr
trf & tmtuntr

dc

rsc

uc.kcdtc cuftEnrl h l8S $rdc C*!$u+ {i0F. c|re FrtE tcfte o flr pcatnr Fhcttrlt, llPctid-o cu brtre geryunett
lau-rn crrru om, utafl(r frru" prair,l d? 16t!l, rAhU:ul 11 sarcs il pBds coanf.Et$! dtoffirc. Im-ua alt bol rprrgn
orrlc. drgr cerc adrngr n hprek brne mrnrcrad pur h mogcorzrt- pctte rc.rt du*. edm4r corycritr ia*ieta
Se

incarce mai repede?

midi
gif sau jpeg

rt rnrcatccc

[i!e.

+.

1ffi, r

bmp

tiff

15. Ce tag HTML ar trebui sE introduce[i pentru a aplica textului din pagina web o

t:uloare albastrS?
1L. Ce semnificalie are termenul de copyright?
Taxe speciale de consum pentru software

a.
b.
c.
d.

Un program iniliat pentru a cregte calitatea software-ului

Un drept al consumatorului de a copia in mod liber soft-ul comercial.
Un termen ce acoperi drepturi ale creatorilor de muzic5, software, cirli etc.

reprezinti HTML?
a. O legituri citre o alti pagini web
b. O aplicafie folositi pentru descircarea imaginilor de pe lnternet

12. Ce

c.
d.

Un limbaj de programare utilizat pentru crearea paginilor web

Un protocol utilizat pentru transferarea paginilor web prin lnternet

82

a.
b.
c.
d.

<body bgcolor="blue">Acesta este textul.</body>

<body color="blue"> Acesta este textul,</body>
<body link="blue"> Acesta este textul.</body>
<body text="blue"> Acesta este textul'</body>

16. Ce tag HTML ar trebui folosit pentru a introduce un hyperlink cStre adresa
www.euroa ptitudi ni. ro?
a. <link="http://www.euroaptitudini.ro">
b. <ali nk="http://www.euroaptitudini.ro"> www.euroaptitudin i.ro<f a>
c, <a href=" http://www.euroaptitudini.ro"> www.eu roaptitudini.ro</a>
d. <img src=" http://www.euroaptitudi ni.ro"> www.euroaptitudini.ro
83

.)(). [.lnrk, ,rr

17. Care dintre urmdtoarele

fonturi nu se recomancl:i

,r

li ulrlrz,rt rrrr,rrlrrrl trrrt'i pagini

web?

a.
b.
c.
d.

lrllrui sii dafi click pcntru a rnodilir-.r browser ul wcb irnplir-il

llontru vizualizarea paginilor web?

Arial
Helvetica
Bookman Old Style
Verdana

Options

6ancral

Recent Paqs Menu

.L.

Maxinlum nunlber of p.9:

qU

18. Pe ce pictogrami ar trebui

creare paginiweb?

si

liltedr ll

VJhen Saving or Publishang Pages

dafi dublu click pentru a deschide aplicatia de

i6
'ct

lJer,

Page

Rtain origioal sourc. formafring

setrng!
Reformat HTN4[ source

rs

Snve imags and

cthe. associatcd filer shen saving pag.s

Alway! !how Publi5h dialog when publi!hing pages

.r

Tible Editing
Applicaticns

-v'

Maintain table layout when inledin9 or deltin9 cells

C.!(ading Styk shets (C55) Editing

:rl

Ule CSS

!t/ler instad of HTML element5 and afrribute!

Site nrandger

vl

Always open a document in a new tdb

us

19. Unde trebuie s5 dati click pentru a vizualiza codul sursi al paginiiweb?
,,{lri;,

'l:::".';..:."l,.rrli:,ri..;:r,,ii.d

Stef,r@,igi1qriq ,. .,....
,. i;,,' r.i:rr,,,.rllilttfm
.. ,: "Q

.: !il. Edit View ln5ert Fcrmdt Table locls

fii$

- *'.,.',
Ope.

t.i

/ l.

Unde ar trebui s; dali click pentru a deschide funcfia de ajutor (Help)?

l', ,

Eelp

,::r,.:,,

.:.;l

.,.

.,,1.],,'_i::

;n@gilef"l_ryg.14ry$1.UA

Ttn

" la
PLACI\-T.{ CL. \{ERE
fi.eteta
Iata o reteta sinpla clasica de placinta cu m*e. ce poate 1i smita la cafeaua sau ceaiul de dimineata

I 4_-!_l_9

PLACI\T.{ CU \trR-E

Iata o reteta sitrpl& cloica de placinta cu mtre. ce poate li

Iogredieote:

it|

cmi de mqe taiate in bucatele

,l oua
I

(10

150

Iogrediente:
_

rlri J. nl.r.

t.rirtr

irr [ru,

rtel*

] I i,)rn
I l u0 rrrl h1,r" l,,rrrr
I l{tr g.rrre t.rrrr
I I krgrurt.r lr.il (1.,,,1,r
lsrrgr.u,r.rrh.u
.I
, I rr rrrl ,i'lirrgrr.r,lr s.tr
I I
| , r,.,,,1,, I n lprr l.l. sou".

ml 14ie batut

gme

-']E

Prb ;ts B,.nre

Bodl

F.eteta

lvdpm i.on!

l-aina

I lirrguita prd de copt

a4

ll,r

s6ita

la cat"eaue sau ceaiul de dimmeata

rrlrlrz,rl

,:qIIF
22. Unde trebuie sI dafi click pentru a putea insera un hyperllnk
cHtre o,rdrestr de
email?

E4t'be b displryfstlu

35. Unde trebuie sr dafi click pentru a modlfica culoarea de aflgare a llnk-urllor
vizitate?

Pagr

linlc

O
O

U5c

drfilh

coloE (gonl tct coloE in p.gr)

crEtom coloE

!hlmlt!& E
linkra. E
Aaiwfinrtst lI-l
li:itcdlinkret If]
lncrgmurd Ef

Enta: w$pagclocatioo a h<dfilg m crnriladdlsr, orsdcde lrhmcdAxhoror

Hcading from tftc gopp list

!*
f,-,i URL isgetativrta F go

Cobr

Rodcdr

lsEtion

Normaltext
Link text
Active link text
Visited link tert

Brtkgreund lrnrgc

L=

tinkktob.of{rEd

[:

UnL

__**-______Ie
i5

lddiw

to prge location

['d".,".dEdtl_-

f-* -l t_srll

23. Deschidefi figierul reteta.htm!1.

24' Salvali pagina web pe Desktop cu numele retetamea.htm!.

25. Modificafi titlul paginiiin Reteta mea.
25. $tergeli textul de preferat chiar peste noapte de la finalul
reletei.

27. selectafi tot textul gi aplica]i fonturi de mirime relativi, de

tip large.

28. selectafi textul pLActNTA cu MERE gi aplica]i-i formatiri de tip

ingrogat
aplecat.

35. Selectali textul lngrediente gi inserali un link citre adresa www.qustos.ro,

asigu16ndu-vi

30. Aliniali textul Reteta ptAclNTA

cu

intr-o fereastrd nou5.

37. Unde trebuie sd dali click pentru a insera o ancori in cadrul paginii web, inaintea
textului selectat?

Filc Edit

,/-

29. Modificali culoarea textului lngrediente in albastru.

cE acesta se va deschide

yiq lnst Fgrr.i T.!t! look

S-11
Oq,
OF
h
tu&M

v"';"lt.wi*t'

|klp

S* {rffiA.1:-dp
Udo Rdo

E ltr le-f

A'1fu k

hq.

I*

, UIH=:==

HTML S

II ii=:= l'=C r=

a's q

MERE in centrul paginii.

ReIcIaPLACINIACUMERE
31. lnserafi o intrerupere de linie

dupi cuv6ntul deoparte.

32. Aplicali o numerotare automatd listeide ingrediente.

33 Modificafi marginea de sus a paginii la 2,5 mm.

34. Aplicati paginiiweb o culoare de fundal la alegere.

Iu

racta siryl4 chsir

& placb o m,

I
ce

poaE fi

&iE

ta

7ai&mtriaehbrrcilde
-3ru
-

- l00Elhdebdln
- l50grefriE
- I ltgut!prd& co,tt

Noml

fl desclrcate de pe www.euroaotitudini.ro

86

sat caful dr

IIEEEIE

oo*ignlffiLilltthl
I Figierele pot

swih h cGua

87

E]

38. lnseralila finalul paginiiun tabelcu 2 coloane gi2 rdndurlastlr.l:

![r ldh liu lntdt Fsmlt l&lc,-I3l

.,/_ j_ElOq,

Reteta a fost

Folositoare I Nefolositoare

Op.6

Nd

SQ gu6

41P

t,rf tJrrltti-l:l

o
Undo Redo

km

T**
Lhk lm.gt TlbI

khq

Fom

q; rLiil1=i=-lx-E
r: i=:= Xr{=C
r'gL-----tr1:=:- 3l
LF

vi,i"ur.war--!-l '1-

e',{ f iA I

.1,Q
HIilL
Hr[!L

CSs

--E-

U 1= Fil=
=

39. lnserafi eticheta Opinie sub tabel.

ws5.!@L

q!\4t.+

rex!

%q

casroa me, ia peste ele vei orna aluatul obtimit mestecad

paa cardroele vufibine ioccprate b coryozfieIditrtc tot arnestecul h ta\ra @u ptacinta si hsJ sa re coro tiry de o ca Dpa aca. scoate
dacim dn crytc si las-o sa se racmca riry de cderla ore. de prdcrat ctir peste ooqlte-

Brrcde & mse

40. Aliniali la centru textuldin cadrultabelului.

4L. lntroducefi un al treilea rdnd in tabel.

le rei plasa

ir-rm

42. Unde trebuie si dafi click pentru a modifica lStrimea coloanelor din tabel?

& E# Yis lnst

qqmrt

<DDuienffilffil
<htrnl> <body> <toDl"> <tbody> <t'>

ldn

!ft

Split

tell

Tabh

Bucaih demerc hvei

paac"'*lrcdevufi@

46. lnserafi deasupra cuvantului lngrediente imaginea placinta.jpg.

CdltorfieRigtt

CI$te T.h,le fim

Slrt'ren

Cdl Bartgrmd

Tablcprcetie-

<id>

Cols,.. feca Dm[i t*a "fr"t l

47. Salvali
obtimit, arnEstecd

I'drde td mrcstecdhtavapetupllaciosilasa-l sase coacatiry de o ora Dpa eeea, scode

obcina ila orytr si hs-o sa s. racasca tiry dc caera ue, dc p(dcrd cbitr peste ooaf*c.

9i

inchideli figierul retetamea.html.

48. Creali o noue pagine web, numitd formular.htmlin care creati un formular numlt
Comanda, ce va utiliza metoda POST pentru a trimite datele formularului pe adresa
i

st ru cto

r(de u roa ptitu

d i n i.

ro

Rmafo*
49. lntroduceli urmAtoarele campuri in formular:

Fdoslre Ndosloare

Dc*en

ltlslrlilirrBl

<lirrl> <M)D

<raDle> <6od)D

<tr>

_--ia1_ I

Nrr*. Preoum. f-----l

<M>

43. Aplicali tabelului o borduri de grosime 2 px, cu o spaliere de 3 px intre celule.

44. Aplicafi celulelor tabelului o culoare albastri de fundal.

45. Unde trebuie si dali click pentru a insera o imagine pe fundalul tabelului?

A&esa

Lirrare
i. : Manual Matematica Clasa

, Maoual Limba Romana Clasa

I t Maaual Geografie Clara V

tlu."l
88

L'Eqd
89

50. Unde trebuie sI dati cilck pentru a modifica proprietlflle c0mpulul Llvrare?

h1 cu fontulVerdana' de
52. Unde trebuie str dali click pentru a formata stilul de titlu
dimensiune 14 Px 9i culoare verde?

gh.rtr.td ruht

OoBignm

5l-. Unde trebuie si dali click pentru a crea un nou figier

CSS?

53. Unde trebuie

'fl 'g

0d

Sh!!ts and rule5

si da}i click pentru

a ataga paginii web un CSS extern?

$8

ltcr

Styh ruh

styh aPplidto all clcments of typc

f)

style applicd to all elcmcnts of <lass

(:l

stylc .Ppli.d to an tlcmcnt whh sptcified lD rttdbutc

e.g. h2

e.g,,mYclors

Crlrtt

nan:

(-l

9' sheader

cudom stYlc rulc

e,g. div*header arhover

90

91

I
54, Unde trebuie sI dafi click pentru a repara link"ul corupt ,rsociat textului
lngrediente?

Rispunsuri coreste intreblri

[ilc Edit Yi*, lnsert Fcrmat Tallc Tools

,/

.6

Nd

OFGn

Help

R q, h,s gffi,H*
8ffi

Ir i?_

Undo

r lr_ n*

Redo

*- #, eS

I II li:=t= l'=C i* E

Raeta PLACINTA CU IvIERE

Iata o reteta

.li*heata

siryla chsi:a &

grill

placiuta cu ruere, ce poate fi strsita

h cdeana sar ccaiul de

h,{f,

intrebare

Rispuns corect

10

TL

t2

13

15

16

c
c

L7

55. Salvali 9i inchideli toate figierele deschise.

93