CURS HTML

Cuprins
Cteva cuvinte...nainte
HTML i World Wide Web
Capitolul 1 Priii pai
Ce este HTML!
Standarde i e"tensii HTML
Con#inut i aspect ntr$un docuent HTML
Uneltele de care ave#i nevoie
Cu s% proceda#i!
Conven#ii de nota#ie
Re&uat
Capitolul ' Structura unui docuent HTML
1. Ce este un docuent HTML!
2. (tic)ete de structur%
3. *olosirea corect% a etic)etelor
4. Re&uat
5. Test
Capitolul + Culori
1. Sisteul de de,inire a culorilor
2. Coresponden#a dintre codurile )e"a&ecial i &ecial
3. Culoarea ,undalului
4. Culoarea te"tului
5. Culoarea le-%turilor
6. .le-erea culorilor
7. Culori /si-ure/
8. Re&uat
9. Test
Capitolul 0 *onturi
1. *oratarea caracterelor
2. .ccentuarea te"tului
3. (tic)ete lo-ice i etic)ete ,i&ice
4. Re&uat
5. Test
Capitolul 1 *oratarea te"tului
1. Trecerea la un rnd nou
2. Titlurile 2Headin-s3
3. Para-ra,ele
4. Pre,oratarea te"tului
5. Centrarea te"tului
6. .,iarea te"tului pe o sin-ur% linie
7. 4locul 56789
8. Linii ori&ontale
9. 7nserarea unei adrese potale
10. 7nserarea unui citat
11. 7nserarea caracterelor speciale
12. Su-estii privind aspectul te"tului
13. Re&uat
14. Test
Capitolul : Le-%turi 2Lin;$uri3
1. .dresa URL
2. .drese absolute i adrese relative
3. Stabilirea le-%turilor
4. .ncore $ le-%turi n cadrul aceleiai pa-ini
5. Le-%tura c%tre o pa-in% a,lat% n acelai director 2,older3
6. Le-%tura c%tre o pa-in% locali&at% n alt director 2,older3
7. Le-%tura c%tre pa-ini e"terne
8. .le-erea culorilor pentru le-%turi
9. Utili&area potei electronice 2e$ail3
10. Le-%turi c%tre ,iiere oarecare
11. 6esc)iderea pa-inilor re,erite printr$o le-%tur%
12. Crearea unei bare secundare de navi-are
13. Re&uat
14. Test
Capitolul < 7a-ini i eleente ultiedia
1. *oratele ,iierelor -ra,ice
2. Cteva etode de ob#inere a ia-inilor
3. 7nserarea unei ia-ini
4. 6iensionarea ia-inii
5. .linierea ia-inii i a te"tului
6. 7a-ini ,olosite ca ,ond 2bac;-round3 al pa-inii
7. 7a-ini ,olosite ca le-%turi
8. 7a-inile iniaturale 2t)ubnails3
9. 7a-inile video
10. Sunetele
11. Su-estii privind ,olosirea ia-inilor i eleentelor ultiedia
12. 7a-inile i tipul de nc%rcare al pa-inii
13. Re&uat
14. Test
Capitolul = Liste
1. Liste neordonate
2. Liste ordonate
3. 7bricarea listelor
4. Liste de de,ini#ii
5. Re&uat
6. Test
Capitolul > Tabele
1. Crearea unui tabel
2. .linierea tabelului n pa-in%
3. 6iensionarea unui tabel
4. Spa#ierea celulelor unui tabel
5. 6iensionarea celulelor unui tabel
6. .linierea con#inutului unei celule
7. 6e,inirea culorilor pentru un tabel
8. Titlul unui tabel
9. Capul de tabel
10. Tabele de ,ore oarecare
11. Celule ,%r% con#inut
12. ?rupuri de coloane
13. .tribute pentru aspectul c)enarului unui tabel
14. Tabele ibricate
15. Recoand%ri privind ,olosirea tabelelor
16. Re&uat
17. Test
Capitolul 1@ Cadre 2*raes3
1. 6ocuentul de de,inire a cadrelor
2. Cadre ibricate
3. Controlul aspectului unui cadru
4. 4are de derulare
5. Po&i#ionarea docuentului ntr$un cadru
6. Cadre interne
7. 6esc)iderea docuentelor n alte cadre
8. Su-estii privind ,olosirea cadrelor
9. Re&uat
10. Test
Capitolul 11 *orulare 2*ors3
1. Ce este un ,orular!
2. Crearea unui ,orular
3. (tic)eta 57APUT9
4. (tic)etele 5S(L(CT9 i 5BPT7BA9
5. (tic)eta 5T(CT.R(.9
6. 8alidarea datelor
7. Re&uat
8. Test
Capitolul 1' Script$uri C?7
1. Ce este C?7!
2. Trans,erul datelor
3. ("ecu#ia script$ului
4. Structura unui script
5. ("eple de script$uri
6. 7nstalarea interpretorului Perl i a aplica#iei PWS
7. Re&uat
Capitolul 1+ DavaScript
1. Ce este DavaScript!
2. Cu poate ,i inclus un script n pa-in%!
3. Modul de e"ecu#ie al script$ului
4. Ce se poate reali&a cu DavaScript!
5. Re&uat
Capitolul 10 *oi de stiluri 2CSS3
1. Ce este un stil!
2. Tipuri de ,oi de stiluri
3. (,ecte ob#inute cu aEutorul stilurilor
4. Re&uat
Capitolul 11 (leente avansate de -ra,ic%
1. 7a-ini )art%
2. 7a-ini aniate
3. 7a-ini transparente
4. Re&uat
Capitolul 1: Motoare de c%utare i etata-$uri
1. Ce este un otor de c%utare!
2. Metata-$uri
3. Re&uat
Crearea i publicarea unui site
Capitolul 1< Plani,icarea
1. *actori care nu pot ,i plani,ica#i
2. (tapele plani,ic%rii site$ului
3. Re&uat
Capitolul 1= 6esi-nul
1. Principiile desi-nului Feb
2. Br-ani&area unui site
3. Metodolo-ia de construire a site$ului
4. Te)nici de desi-n Feb
5. ?reeli de desi-n
6. Re&uat
Capitolul 1> Testarea
1. Corectarea pa-inilor
2. Testarea pa-inilor
3. Re&uat
Capitolul '@ Publicarea
1. Auele de doeniu
2. Serviciul de -%&duire Web 2Web )ostin-3
3. Br-ani&area i denuirea ,iierelor
4. Trans,erul ,iierelor
5. Re&uat
Cteva cuvinte...la ,inal
.ne"a 1 7nde" etic)ete
.ne"a ' ?losar
.ne"a + Tabelul culorilor
Cteva cuvinte...nainte
Internetul reprezint, fr ndoial, mediul de comunicare al iitorului, un iitor care, n multe
pr!i ale lumii de"a a nceput. #l reprezint o erita$il reolu!ie pa%nic %i tcut, care rezid n
a&ocierea pro're&i dintre informatic %i mi"loacele de comunicare, conduc(nd la o inte'rare
fa&cinant a tuturor mi"loacelor tradi!ionale de comunicare) telefonie cla&ic %i mo$il, radio,
teleiziune, tran&mi&ii de date, nre'i&trri audio %i ideo. *u aprut c+iar forme noi de comunicare,
utilizate cu entuzia&m de milioane de oameni din lumea ntrea', cum &unt e,mail,ul %i c+at,ul, care
de"a au do$(ndit re'uli proprii, o cultur %i c+iar %i un folclor propriu.
Internetul a produ& totodat o e-traordinar democratizare a informa!iei %i comunicrii. .
cantitate literalmente uria% de informa!ie, &u$ toate formele &ale) te-t, ima'ini &tatice &au ideo, &unet,
adunate ntr,o /$i$liotec/ acce&i$il oricui, oric(nd, de la orice calculator le'at la re!ea, fa! de care
c+iar %i cele mai complete enciclopedii cla&ice par o 'lum. * deenit o "oac de copil comunicarea
direct, n timp real, cu eri%oara din 0lu", cu prietenul din *u&tralia, cu firma furnizoare din 1razilia
&au cu $anca din #le!ia. 2unt &uficiente pentru toate ace&tea un computer, un modem %i o linie
telefonic.
3e%i Internetul %i 4orld 4ide 4e$ cuno&c o e-pan&iune e-ponen!ial, &e afirm totu%i c &e afl
nc n faza copilriei. 5aport(ndu,ne la o a&tfel de apreciere, am putea afirma c n 5om(nia Internetul
e&te nc n fa%, dar cu un poten!ial de dezoltare cert %i rapid a&cendent.
0u toate c foarte mul!i tineri manife&t un intere& %i o de&c+idere e-traordinare ctre orice
&u$iect le'at de Internet, ace&t domeniu e&te cel mai ade&ea i'norat n licee, &au tratat cu
&uperficialitate. 6ro'ramele %colare nu l a$ordeaz dec(t tan'en!ial, prin urmare nu e-i&t manuale
%colare dedicate, iar lucrrile de &pecialitate la un niel acce&i$il &trluce&c prin a$&en!. 3e&i'nul %i
pro'ramarea 4e$ &e afl ntr,o dezoltare accelerat %i con&tituie o orientare profe&ional cu un mare
poten!ial de &ucce&, dar n mod parado-al, relati pu!ini tineri &e ndreapt azi ctre ace&te domenii.
7nul din motie l con&tituie, de&i'ur, aten!ia in&uficient acordat ace&tor ramuri ale informaticii n
n!m(ntul liceal, alturi de un contact direct cu Internetul e-trem de redu&, limitat mai ale& de
po&i$ilit!ile te+nice %i economice actuale ale %colilor.
*r'umentul principal care m,a determinat & &criu acea&t carte a fo&t un &onda" realizat n r(ndul
eleilor unui liceu de informatic, &onda" ale crui rezultate au confirmat impre&ia ini!ial. 8i anume
faptul c, n marea lor ma"oritate 987:;, eleii %i dore&c & ne!e nu doar & utilizeze Internetul, ci,
urm(nd ndrzneala tipic (r&tei, & dein o prezen! acti n ace&t mediu de comunicare. 0ei mai
mul!i %i dore&c ace&t lucru pentru a &e e-prima pe &ine, pentru a comunica lumii %i n acea&t form,
faptul c e-i&t, c au calit!i, dorin!e, a&pira!ii, talente, cuno%tin!e, '(nduri, &entimente care merit &
fie cuno&cute %i de ceilal!i.
8i cum pot fi pu&e toate ace&tea n aloare c(t mai eficient, ntr,un mod acce&i$il pentru milioane
de oameni din lumea lar', dac nu pe un &ite 4e$<
2copul ace&tei cr!i, dedicate lim$a"ului &pecific Internetului, =>?@, %i te+nicilor uzuale de
creare a unui &ite 4e$, e&te & i ne!e, nu doar pe tineri, ci pe to!i cei care %i dore&c ace&t lucru, & %i
creeze propriul &ite pe Internet, cu minimum de efort %i co&turi, %i cu ma-imum de rezultate.
0artea nu %i propune & fie o lucrare academic, un manual e-+au&ti de =>?@ %i 4e$ de&i'n.
2u$iectele &unt e-trem de a&te %i ar fi fo&t impo&i$il cuprinderea lor ntr,o &in'ur lucrare. *m dorit
& ofer o ima'ine de an&am$lu a&upra lim$a"ului =>?@, cu un marcat accent pe a&pectele practice ale
utilizrii &ale, precum %i o trecere n rei&t a unora dintre cele mai folo&ite te+nici de pro'ramare care
e-tind po&i$ilit!ile lim$a"ului) &cript,urile 0AI, Baa2cript, pro'ramarea cu a"utorul foilor de &tiluri
022.
3e a&emenea, n partea a doua a cr!ii am prezentat etapele proce&ului de con&truire a unui &ite
4e$ %i c(tea dintre te+nicile uzuale de de&i'n 4e$.
*dre&(ndu,&e mai ale& nceptorilor care &tp(ne&c totu%i elementele de $az 9utilizarea
computerului %i &i&temul de operare 4indoC&, no!iuni de editare de te-t %i ima'ini;, cartea e&te &cri&
ntr,un lim$a" care &e dore%te acce&i$il. Diecare no!iune prezentat e&te n&o!it de e-emple reprezentate
de &ecen!e de cod =>?@ ce ilu&treaz modul ei de aplicare.
5ecomandarea noa&tr e&te ca cititorii & erifice per&onal toate ace&te e-emple, deoarece numai
e-periment(nd pe cont propriu &e poate a"un'e la o $un n!ele'ere %i &tp(nire a efectelor codului
=>?@ a&upra a&pectului pa'inii 4e$.
Enc+eiem cu &peran!a c acea&ta carte a con&titui un in&trument de lucru util %i c, la finalul ei
cititorii or do$(ndi a$ilitatea de a con&trui, pu$lica %i men!ine un &ite propriu intere&ant, atr'tor %i
perfect func!ional. 8i, de ce nu, ca o parte din ei & fac din acea&t actiitate o erita$il profe&ie.
Aot% asupra terinolo-iei utili&ate
Entruc(t anumi!i termeni din lim$a en'lez, &pecifici domeniului a$ordat n prezenta lucrare, au
intrat n lim$a"ul curent ca atare, i om utiliza %i noi n acea&t form. *m optat pentru folo&irea lor cu
&tatut de neolo'i&me, n forma ori'inal, uneori cu forme fle-ionare ad,+oc, c+iar cu ri&cul de a fi
con&iderate drept /$ar$ari&me/ de ctre lin'i%tii puritani. En definiti, n ace&t fel au intrat n lim$a"
termeni de"a con&acra!i precum computer, tast, monitor, mouse, pixel, CDROM, modem, server, port,
ca & dm numai c(tea e-emple.
6entru unii termeni am utilizat am$ele forme aflate n circula!ie, cum ar fi link legtur, font
caracter, tag etichet.
#-i&t %i autori care folo&e&c numai ec+ialentele rom(ne%ti ale ace&tor termeni. 0u toate c
traducerea lor re&pect cel mai ade&ea &en&ul, ace&te ec+ialente nu au reu%it & &e impun n lumea
informaticii, nu de pu!ine ori utilizarea lor conduc(nd, n mod parado-al, la confuzii &au nedumeriri.
9Fu or$im aici de tentatiele ridicole, cum ar fi de pilda icoan, &au, nc %i mai ru, iconi, utilizate
de unii autori pentru icon, care fire%te c nu pot aea reo %an& de &ucce&.;
6rezentm n continuare o li&t a ace&tor termeni. #-plica!ii a&upra &en&ului lor &e '&e&c n te-t
%iG&au n 'lo&arul prezentat la &f(r%itul cr!ii.
brose
r
font site
director host,
hosting
tag
donlo
ad
icon template
e!mail link "eb
folder script
HTML i World Wide Web
Enainte de a ncepe prezentarea lim$a"ului =>?@, om face c(tea precizri de&pre &emnifica!ia
conceptului World Wide Web 9ntr,o traducere apro-imati, p(nz de pian"en, cu &en&ul de re!ea,
e-tin& n lumea lar';. 6recizrile ar putea prea inutile, dar realitatea e&te c de%i foarte mult lume
or$e%te de&pre 4orld 4ide 4e$, pu!ini %tiu e-act ce reprezint. ?ai mult, datorit e-tinderii &ale
e-ponen!iale %i a e-traordinarei &ale popularit!i, ade&ea no!iunea e&te confundat cu cea de Internet.
4orld 4ide 4e$ e&te n& doar o parte a Internetului.
Internetul e-i&t de mai $ine de treizeci de ani. 1azele ace&tuia au fo&t pu&e la &f(r%itul anilor H60,
ca urmare a unei ini!iatie a 3epartamentului de *prare al 2tatelor 7nite, care aea drept &cop
realizarea unei re!ele ro$u&te %i fia$ile de comunica!ii ntre computere aflate la di&tan!. 5e!eaua aea
rolul de a a&i'ura un contact permanent ntre elementele &ale componente, c+iar dac o parte din
le'turi ar fi fo&t ntrerupte ca urmare a unui atac nuclear. 7lterior, re!eaua a ptrun& n domeniul ciil
%i a fo&t adoptat rapid, ini!ial de lumea academic, mai apoi de companiile comerciale.
Internetul nu e&te altcea dec(t un an&am$lu alctuit dintr,un numr enorm de re!ele de computere
interconectate, localizate pe toat &uprafa!a 'lo$ului, care &uport dier&e pac+ete &oftCare cum ar fi e,
mailul, 'rupurile de %tiri 9nesgroup;, protocoalele de tran&fer al fi%ierelor 9D>6;, Aop+er %i 4orld
4ide 4e$.
0u toate aanta"ele imen&e oferite de po&i$ilit!ile de comunicare 'lo$al a informa!iilor ca %i de
rapiditatea comunicrii, Internetul a rma&, reme de dou decenii, doar apana"ul a'en!iilor
'uernamentale %i al mediilor %tiin!ifice. ?otiul l,a con&tituit dezor'anizarea &a ini!ial ca&i,total.
Dolo&irea unor &tandarde de comunica!ie %i a unor pac+ete &oftCare foarte dier&e reprezentau ni%te
$ariere te+nolo'ice aproape in&urmonta$ile pentru utilizatorii o$i%nui!i. En plu&, informa!iile acce&i$ile
la acea reme pe Internet erau prezentate &u$ forma unor &imple fi%iere te-t %i nu n forma cuno&cut
azi. 3ezoltarea e-plozi pe care a cuno&cut,o Internetul n ultimii zece ani a fo&t determinat de
apari!ia 4orld 4ide 4e$.
4orld 4ide 4e$ a luat na%tere n 1989, ca urmare a eforturilor unor fizicieni ai 0#5F
9@a$oratorul #uropean de Dizica 6articulelor; de a pune la punct un &i&tem &tandardizat pentru crearea
%i di&tri$uirea documentelor electronice oriunde pe 'lo$, &i&tem care & permit inte'rarea tuturor
elementelor media) te-t, ima'ini, &unet. *%a cum doede%te imen&a &a popularitate, 4e$,ul &,a doedit
a fi mediul ideal pentru di&tri$uirea informa!iilor ntr,o maniera e-tin& %i acce&i$il. ?otiul l
con&tituie faptul c 4e$,ul a&i'ur o interfa! )Gperedia pentru informa!ii. =Ipermedia reprezint
ariatele tipuri de informa!ie 9te-t, ima'ini, fi%iere audio %i ideo; care pot fi localizate oriunde pe 'lo$,
mpreun cu le'turile dintre ele. 6entru a tran&mite %i a afi%a informa!iile +Ipermedia, 4e$,ul
folo&e%te un protocol de tran&fer 9un &et de re'uli; care e&te numit HTTP 9#$pertext %ransfer &rotocol,
protocol de tran&mitere a +Iperte-tului;.
3eci, n e&en!, 4orld 4ide 4e$ e&te o colec!ie imen& de documente interconectate prin
intermediul Internetului, care folo&e%te protocolul =>>6 pentru a afi%a elementele +Ipermedia.
6entru a face po&i$il o a&emenea performan!, &,a impu& nece&itatea ca fiecare computer
conectat la Internet & fie identificat n mod unic, printr,un element numit adre&a 7P 9'nternet &rotocol;.
*dre&a I6 e&te format din patru numere, fiecare mai mic de 255, de&pr!ite ntre ele prin punct 9de
e-emplu 123.67.9.201;. En reme ce computerele lucreaz cu numere, oamenii prefer numele. 3in
ace&t moti, fiecrei a&emenea adre&e I6 i &,a a&ociat %i un nume. 0um &unt &ute de milioane de
computere n ntrea'a lume, a eni cu un nume unic care & diferen!ieze un computer de celelalte pare
aproape impo&i$il. >otu%i, & ne amintim c Internetul e&te o re!ea de re!ele. #l e&te mpr!it n 'rupuri
numite doenii care, la r(ndul lor, &unt mpr!ite n subdoenii. 3atorit ace&tui fapt, c+iar dac un
computer poart un nume de&tul de comun, prin a&ocierea ace&tui nume cu domeniul %i &u$domeniile
din care face parte, &e o$!ine un nume unic de identificare al computerului re&pecti.
.r'anizarea domeniilor pe Internet re&pect un model ierar+ic. 6rimul niel ierar+ic l con&tituie
dier&ele tipuri de or'aniza!ii. >ot pe primul niel &e afl %i domeniile core&punztoare !rilor lumii, de
e-emplu uk, pentru ?area 1ritanie &au ro, pentru 5om(nia.
7rmtorul niel ierar+ic l con&tituie or'aniza!iile, firmele, in&titu!iile care de!in propriile domenii
%i &u$domenii.
Internetul conecteaz dou tipuri de computere) serverele, care furnizeaz documentele, %i
clien#ii, care &olicit %i afi%eaz documentele pentru a fi izualizate de utilizator.
6entru a acce&a %i afi%a documentele =>?@, pe computerul client ruleaz aplica!ii numite
broFsere. 7neori termenii &erer 4e$ %i client 4e$ pot produce confuzii, deoarece &e refer at(t la
computerele pe care ruleaz ace&te aplica!ii c(t %i la aplica!iile n &ine. 3in ace&t moti, pentru aplica!ia
client om folo&i termenul de broser, iar pentru aplica!ia &au pac+etul de aplica!ii care ruleaz pe
&erer, termenul de aplicaie server.
5ela!ia client,&erer pe care &e $azeaz func!ionarea 4orld 4ide 4e$ e&te facilitat de protocolul
de comunica!ie =>>6. Interac!iunea dintre $roC&erul 4e$ %i &ererul 4e$ ncepe cu o cerere din partea
clientului. *plica!ia client tran&mite o cerere ctre aplica!ia &erer. *cea&t cerere poate con&ta n
tran&miterea unui anumit document &au n efectuarea unei anumite tranzac!ii. *plica!ia &erer fie
ndepline%te cererea clientului, caz n care o$iectul &olicitat e&te tran&mi& $roC&erului, fie o refuz,
&itua!ie n care $roC&erul afi%eaz $inecuno&cutele me&a"e de eroare />+e pa'e cannot $e di&plaIed/
&au /Dile not found/.
0u alte cuinte, proce&ul izualizrii unei pa'ini 4e$ ncepe cu o cerere a $roC&erului 4e$ ctre
&ererul 4e$. 1roC&erul tran&mite &ererului detalii de&pre el n&u%i %i de&pre fi%ierul pe care l dore%te
prin intermediul unui )eader HTTP de cerere 9+eaderul e&te acea parte a unui pac+et de date care e&te
pla&at naintea informa!iilor efecti tran&mi&e %i care poate con!ine adre&a &ur&ei %i a de&tina!iei,
erificri ale erorilor %i alte c(mpuri;. 2ererul prime%te %i analizeaz +eaderele =>>6 de cerere n
cutarea informa!iilor releante, cum ar fi numele fi%ierului care e&te &olicitat %i tran&mite napoi
fi%ierul cerut mpreun cu +eaderele =>>6 de r&pun&. 1roC&erul folo&e%te +eaderele =>>6 de r&pun&
pentru a determina cum & afi%eze rezultatele o$!inute.
>re$uie & &u$liniem c $roC&erele nu au neoie de cone-iune la Internet ca & func!ioneze.
6ute!i ncrca %i afi%a cu a"utorul $roC&erului dumneaoa&tr documente =>?@ care &unt &tocate pe
propriul +ard,di&J. *cea&ta d, printre altele, po&i$ilitatea de a definitia %i te&ta documentele
=>?@ nainte de a le pu$lica pe Internet, eit(nd a&tfel prezentarea unor pa'ini nc nefinalizate, cu
erori, &au care func!ioneaz defectuo&.
Capitolul 1
Priii pai

1. Ce este HTML?
HTML e&te o a$reiere de la #$pertext Markup (anguage %i reprezint &c+eletul oricrei pa'ini
de 4e$. =>?@ nu e&te un lim$a" de pro'ramare. Fu e!i lucra aici cu aria$ile, e-pre&ii, tipuri de date,
&tructuri de control. =>?@ e&te un lim$a" de&cripti, prin care &unt de&cri&e elementele &tructurale ale
pa'inii de 4e$) titlurile, li&tele, ta$elele, para'rafele, le'turile cu alte pa'ini, precum %i a&pectul pe
care l are pa'ina din punct de edere 'rafic. En fond, =>?@ e&te modul n care i comunicam
$roC&erului ce elemente dorim & introducem n pa'ina 4e$ %i care e&te a&pectul ace&tora.
2. Standarde i extensii HTML
=>?@ e&te un libaE standardi&at, acea&ta n&emn(nd c orice $roC&er poate interpreta %i afi%a
corect un document 4e$. 2inta-a de $az a lim$a"ului =>?@ e&te definit n er&iunea HTML +.'. En
prezent a fo&t lan&at %i er&iunea =>?@ 4.0 care &e afl n cur& de &tandardizare. 3e la o er&iune la
alta, lim$a"ului =>?@ i &e adu'a noi elemente. 3e a&emenea, fiecare tip de $roC&er 9Fet&cape
Fai'ator %i Internet #-plorer, n particular; folo&e%te anumite elemente ne,&tandard, pentru a
m$unt!i capacit!ile lim$a"ului. #tic+etele noi, care nu fac parte din er&iunea &tandard poart
numele de e"tensii. En 'eneral, $roC&erele cele mai folo&ite, Fet&cape Fai'ator %i Internet #-plorer
recuno&c etic+etele =>?@ 3.2 %i o mare parte din cele nou introdu&e n =>?@ 4.0.
#&te recomandat & eita!i e-ten&iile, n afara cazului c(nd ae!i un moti foarte &erio& pentru a le
folo&i. 6entru utilizatorii $roC&erelor care nu recuno&c ace&te e-ten&ii, anumite pr!i ale documentului
dumneaoa&tr pot deeni complet ilizi$ile.
1inen!ele&, e-ten&iile pot afecta n 'rade diferite a&pectul formal al pa'inii dumneaoa&tr. 3e
e-emplu, folo&irea e-ten&iilor care !in de a&pectul liniilor orizontale inclu&e n pa'in nu a afecta n
mod 'ra a&pectul pa'inii n $roC&erele care nu &uport ace&te e-ten&ii. 0ele mai multe dintre ace&tea
or i'nora e-ten&iile %i or afi%a o line orizontal &tandard. 6e de alt parte, e-ten&iile care realizeaz
formatarea %i alinierea te-tului %i a&pectul fonturilor pot face ca documentul & ai$ un a&pect foarte
dezordonat n $roC&erele care nu &uport e-ten&ii de ace&t tip. 2au, n cazurile cele mai 'rae, acea
parte a documentului poate & nu fie deloc afi%at.
3. Coninut i aspect ntr-un document HTML
6entru a realiza documente 4e$ eficiente, cu impact a&upra cititorului, %i pentru a alorifica pe
deplin puterea lim$a"ului =>?@, tre$uie & !ine!i &eama de o idee fundamental) =>?@ e&te de&tinat
&tructurrii documentele %i nu doar formatrii n ederea afi%rii lor.
=>?@ furnizeaz modalit!i ariate pentru a defini a&pectul documentului) &pecifica!ii le'ate de
fonturi 9tipurile de caractere;, de formatare a te-tului, de culori, etc. 3e&i'ur, a&pectul formal e&te
important, cci el poate eni n $eneficiul &au n detrimentul acce&i$ilit!ii informa!iilor prezentate.
>otu%i, nu a&pectul formal, ci con!inutul documentului primeaz. =>?@ con!ine numeroa&e ci de
&tructurare a con!inutului documentului fr a pune pro$lema felului cum or fi afi%ate elementele)
titluri, li&te, para'rafe, ima'ini, etc. >oate ace&tea &unt definite n lim$a"ul =>?@ fr a impune
$roC&erului & le afi%eze ntr,un anumit mod. 1roC&erului i &e la& a&tfel po&i$ilitatea de a afi%a
re&pectiele elemente n conformitate cu rolul pe care l au ele n &tructura documentului %i nu
re&pect(nd re'ulile impu&e de creatorul documentului =>?@.
?arele aanta" al a$ordrii $azate pe con!inut fa! de cea $azat pe a&pect rezid n faptul c
pa'inile dumneaoa&tr or fi izualizate cu tipuri diferite de $roC&ere, fiecare a(nd er&iuni diferite.
En a$ordarea $azat pe aspect, dac $roC&erul nu recunoa%te indica!iile de formatare &pecificate,
fie nu le e-ecut, fie le e-ecut eronat, a&tfel c &tructurarea pa'inii a aea de &uferit.
En a$ordarea $azat pe con#inut, indiferent cum a ale'e $roC&erul & e-ecute indica!iile de
formatare, &emnifica!ia elementelor din pa'in a rm(ne ne&c+im$at.
3e e-emplu, dac e!i afi%a titlurile %i &u$titlurile din pa'in folo&ind tipuri diferite de fonturi,
caractere cu &tiluri ariate) aldine 9$old, &au n'ro%ate;, cur&ie 9italice, &au nclinate;, &u$liniate, etc.,
un $roC&er care nu recunoa%te ace&te elemente ar putea afi%a titlurile n acela%i mod n care afi%eaz
re&tul te-tului, a&tfel c &emnifica!ia lor n pa'in %i,ar pierde relean!a.
6e de alt parte, dac e!i folo&i etic+etele &peciale pentru titluri, c+iar daca $roC&erul nu le
recunoa%te, are po&i$ilitatea de a eiden!ia totu%i titlurile n cea mai $un manier pe care o are la
di&pozi!ie, a&tfel nc(t &emnifica!ia lor pentru re&tul documentului &e a p&tra.
4. ne!te!e de care a"ei ne"oie
In&trumentele minime de care ae!i neoie pentru a realiza documente =>?@ &unt, n e&en!,
urmtoarele) un editor de te"t, cu a"utorul cruia & &crie!i documentul, un broFser, prin intermediul
cruia & izualiza!i a&pectul %i con!inutul documentului, un editor -ra,ic cu care & prelucra!i
ima'inile pe care le e!i introduce n pa'in %i o cone"iune la 7nternet.
#ditoru!
6entru a &crie documente =>?@ ae!i la di&pozi!ie trei po&i$ilit!i)
1. Dolo&irea unui &implu editor de te"t.
0el mai cuno&cut %i acce&i$il e&te Fotepad,ul din 4indoC&.
.ten#ieH
Fu e&te recomandat & folo&i!i un proce&or de te-t comple- cum e&te ?icro&oft 4ord, c+iar dac
ace&ta poate &ala documentele n format =>?@ 9cu e-ten&ia )htm;, deoarece la &alarea documentelor
4ord,ul adau' automat la te-tul documentului dumneaoa&tr o mare cantitate de cod con!in(nd
informa!ii lip&ite de relean! care ncarc inutil documentul %i mre%te dimen&iunile fi%ierului.
1. Dolo&irea unui editor HTML.
*ce&t tip de editoare dedicate ofer facilit!i n &crierea codului, realizeaz corectarea
documentului din punct de edere &intactic %i c+iar &criu &ecen!e de cod pentru anumite elemente pe
care dori!i & le in&era!i n document.
2. Dolo&irea unui editor WIS7WI? 9"hat *ou +ee 's "hat *ou ,et, n traducere li$er
/ceea ce ezi la editare e&te ceea ce o$!ii la izualizare/;.
7n editor de tip 4K2I4KA permite ale'erea %i formatarea, cu a"utorul mou&e,ului, a
elementelor pe care dori!i & le include!i n pa'in) ta$ele, linJ,uri, formulare, pute!i &ta$ili tipul
fonturilor, culorile, aran"area te-tului n pa'ina. 6e m&ur ce un anumit element e&te in&erat, editorul
&crie n mod automat codul =>?@ core&punztor, fr ca utilizatorul & fie neoit & interin a&upra
lui. >otu%i, dac ae!i cuno%tin!e de =>?@ pute!i intereni la nielul codului n orice manier dori!i,
orice &c+im$are pe care o face!i n cod, reflect(ndu,&e automat n a&pectul pa'inii.
6rintre profe&ioni%ti per&i&t o controer& n priin!a tipurilor de editoare care ar tre$ui folo&ite
pentru a edita documentele =>?@. En e&en!, pro$lema e&te acea&ta) e&te mai $ine &,!i con&truie%ti
pa'inile folo&ind =>?@ /pur/, adic &criind totul tu n&u!i, &au e&te de preferat & folo&e%ti un editor de
tipul 4K2I4KA< #ditoare deo&e$it de puternice de ace&t tip) ?acromedia 3reamCeaer, ?icro&oft
Dront 6a'e, 0offe 0up ca & dm numai c(tea e-emple, par a nclina definiti $alan!a n faoarea
ace&tui tip de editare. #le ofer facilita!i aan&ate de editare a pa'inii, inclu&i po&i$ilitatea de a crea
pa'ini dinamice %i de a include &cript,uri Baa2cript &au applet,uri Baa. 0u a"utorul lor &e pot con&trui
&ite,uri e-trem de comple-e.
#-i&t, de a&emenea %i editoare de tip /$uilt,in/. *ce&tea &unt cel mai u%or de folo&it %i ade&ea
&unt pu&e la di&pozi!ie de proiderii care ofer %i &ericii 'ratuite de +o&tin' 9CCC.+ome.ro,
CCC.r+p.ro, etc.;.
#ditoarele de ace&t tip ofer un numr 9de o$icei redu&; de template,uri 9pa'ini preformatate;, %i
doar c(tea op!iuni de editare) pute!i adu'a te-t, modifica tipul fonturilor, culoarea fundalului %i a
te-tului, forma $utoanelor de nai'are, pute!i include un numr pre&ta$ilit de ima'ini. 3in pcate,
'radul de control a&upra a&pectului pa'inii e&te foarte redu&. 7tilizatorul e&te limitat la c(tea op!iuni,
iar numrul mic de template,uri pu&e la di&pozi!ie face ca pa'ina & fie lip&ita de ori'inalitate.
*!i putea, atunci, & ntre$a!i de ce mai e&te neoie & n!a!i =>?@ dac e-i&t editoare
profe&ionale care &criu codul n locul dumneaoa&tr. En fond, mul!i dintre Ce$ de&i'nerii profe&ioni%ti
le folo&e&c, deoarece a &crie codul unui &ite /$I +and/, cu a"utorul unui &implu editor de te-t, e&te o
munca titanic %i mare con&umatoare de timp.
5&pun&ul e&te &implu) tre$uie & cunoa%te!i =>?@ deoarece oric(t de performant ar fi un editor
4K2I4KA, mai dereme &au mai t(rziu e!i '&i n &itua!ia de a intereni la nielul codului. 0ea
mai comun &itua!ie e&te aceea n care, datorit multiplelor opera!ii de editare cum &unt mutarea,
copierea, %ter'erea elementelor, anumite pr!i ale pa'inii nu or mai func!iona corect.
3e o$icei, interen!iile nece&are a&upra codului pentru depanarea &a &unt minime %i u%or de
realizat... cu condi!ia & %ti!i ce tre$uie & face!i. 0u alte cuinte, & %ti!i =>?@.
En concluzie, oricare ar fi op!iunea dumneaoa&tr, fie c e!i folo&i un editor de =>?@ de tip
te-t, fie c e!i folo&i unul de tip 4K2I4KA, pentru a putea con&trui documente 4e$ corecte %i
func!ionale e&te neoie & &tp(ni!i $ine lim$a"ul =>?@.
$ro%seru!
#ident, pentru a izualiza documentele dumneaoa&tr ae!i neoie de un $roC&er.
5ecomandarea noa&tr e&te & de!ine!i cel pu!in dou dintre cele mai r&p(ndite $roC&ere, Internet
#-plorer %i Fet&cape Fai'ator, de dorit ar fi c+iar cu er&iuni diferite ale aceluia%i $roC&er. >e&tarea
pa'inilor dumneaoa&tr &u$ diferite $roC&ere e&te o etap important naintea pu$licrii lor pe 4e$.
3e%i n anii de nceput ai 4e$,ului pro$lema a&pectului pa'inilor n diferite tipuri de $roC&ere era
ital, deoarece erau folo&ite o mare dier&itate de $roC&ere, fiecare tip realiz(nd afi%area pa'inilor n
maniera &a proprie, n prezent acea&t pro$lem %i,a pierdut din importan!. ?otiul e&te acela c
$roC&erele Internet #-plorer au acaparat cea mai mare parte din pia!, &tati&ticile art(nd c Internet
#-plorer e&te tipul folo&it de 93: dintre utilizatori iar Fet&cape Fai'ator de circa 6: dintre ei.
#ditoru! &ra'ic
3e&i'ur, e!i dori & introduce!i ima'ini n pa'inile dumneaoa&tr. 6entru a putea & prelucra!i
ima'inile n conformitate cu inten!iile dumneaoa&tr %i cu rolul lor n pa'in ae!i neoie de un editor
'rafic.
Fumrul editoarelor de ace&t tip e&te foarte mare, printre cele mai puternice %i mai cuno&cute
fiind 0orel3raC %i *do$e 6+oto&+op. 6ute!i ale'e n& acel editor cu care &unte!i de"a familiarizat,
c+iar dac mai pu!in performant, mai ale& dac pentru nceput nu dori!i & face!i prelucrri foarte
comple-e ale ima'inilor.
Conexiunea !a (nternet
2pre deo&e$ire de primele trei in&trumente, cone-iunea la Internet nu e&te a$&olut e&en!ial n
etapa de con&truire a documentului =>?@. *%a cum &puneam, documentele =>?@ &e pot con&trui %i
izualiza local, pe propriul computer. 0u toate ace&tea, e-i&ten!a unei cone-iuni Internet a a"uta
foarte mult n proce&ul de n!are, %i nu numai.
6e de,o parte deoarece pe 4e$ e!i '&i nenumrate e-emple, %i $une %i rele, pe care le pute!i
&tudia. En plu&, e!i aea acce& la o cantitate uria% %i n continu cre%tere de re&ur&e, documenta!ie %i
produ&e care or a"uta cu &i'uran! la con&truirea pa'inilor dumneaoa&tr. 8i, n fine, acce&ul la
Internet e&te e&en!ial n etapa de te&tare a le'turilor cu pa'ini e-terne.
). Cum s* procedai?
6entru a folo&i eficient informa!iile din acea&t carte iat mai "o& c(tea indica!ii n priin!a
modului n care pute!i or'aniza actiitatea)
0rea!i, n folderul M$ Documents 9&au ntr,o alta loca!ie alea& de dumneaoa&tr; un folder de
lucru numit "ork.
3e&c+ide!i editorul de te-t n care a!i ale& & lucra!i 9ar fi de dorit ca pe parcur&ul proce&ului de
n!are & folo&i!i un &implu editor te-t, de e-emplu Fotepad;.
2crie!i 9edita!i; fiecare e-emplu pe care l '&i!i aici.
2ala!i,l n folderul dumneaoa&tr cu numele indicat n $locul L>I>@#M %i e-ten&ia )html. 6ute!i
folo&i at(t e-ten&ia )html c(t %i e-ten&ia )htm dar e&te $ine ca odat ce a!i ale& o anumit e-ten&ie & fi!i
con&ecent n folo&irea ei. 3enumi!i, fi%ierele cu litere mici.
.ten#ieH
#ditorul de te-t -otepad &aleaz fi%ierele cu e-ten&ia implicita /)txt/. 3e aceea c(nd &ala!i e&te
nece&ar & preciza!i n mod e-plicit e-ten&ia dorit 9)html &au )htm;
0(nd e!i &ala fi%ierul creat n Fotepad &,ar putea & con&tata!i c re&tul de fi%iere =>?@ pe care
le,a!i &alat anterior nu apar n ferea&tr. 6entru a le edea, de&c+ide!i meniul .ile/+ave 0s))), iar n
ferea&tra de&c+i& &electa!i din li&t 0ll files.
3e&c+ide!i cu $roC&erul utilizat fi%ierul =>?@ 9.ile/ Open/ 1rose; pentru a edea cum arat
pa'ina 4e$ de&cri& n fi%ierul dumneaoa&tr.
3up fiecare modificare pe care o face!i n fi%ierul =>?@ nu uita!i &,l &ala!i, altminteri
&c+im$rile fcute nu &e or reflecta n a&pectul final al pa'inii.
6entru a o$&era felul cum modificrile pe care le face!i n codul =>?@ &c+im$ a&pectul
pa'inii, tre$uie & ap&a!i $utonul Refresh2Reload al $roC&erului.
6entru a putea & izualiza!i cu u%urin! a&pectul pa'inilor dumneaoa&tr e&te $ine & ae!i
de&c+i&e permanent at(t editorul de te-t n care &crie!i documentul =>?@ c(t %i $roC&erul cu care l
izualiza!i.
+. Con"enii de notaie
=>?@ nu e&te un lim$a" case!sensitive, adic nu face di&tinc!ia ntre literele mici %i cele
mari9ma"u&cule;. *cea&ta n&eamn c indiferent cum &criem etic+etele, cu litere mari &au cu litere
mici, ele or fi corect interpretate de $roC&er. 3in ace&t moti pe parcur&ul ace&tei lucrri om utiliza o
conen!ie de nota!ie n care etic+etele 9tag,urile; =>?@ &unt &cri&e cu ma"u&cule iar atri$utele a&ociate
ace&tora &unt &cri&e cu litere mici pentru o mai $un diferen!iere %i eiden!iere a ace&tora.
3e&i'ur c n documentele pe care le &crie!i pute!i re&pecta acea&t conen!ie &au pute!i &crie cu
un &in'ur tip de litere, dup cum e&te mai u%or.
6e&te tot n cadrul te-tului, unde apar etic+ete, atri$ute &au alori ale ace&tora am folo&it caractere
0ourier FeC pentru a diferen!ia elementele de lim$a" de re&tul te-tului.
3e a&emenea, e!i o$&era c, n e-emplele prezentate, codul =>?@ e&te &cri& indentat, adic
aliniat la dier&e niele. 0a %i n cazul etic+etelor, ace&t lucru nu are importan! pentru $roC&er.
Indentarea e&te util doar dumneaoa&tr, pentru a diferen!ia %i urmri mai u%or dier&ele elemente
pe care le include!i n document. >otu%i, dac n cazul etic+etelor pute!i opta pentru orice ariant dori!i
n priin!a &crierii lor, indentarea e&te recomandat c+iar %i pro'ramatorilor cu e-perien!. 7n cod
neindentat e&te foarte 'reu de citit %i de depanat, n cazul apari!iei unor erori.
,. -e.umat
4orld 4ide 4e$ e&te o colec!ie imen& de documente interconectate prin intermediul
Internetului, care a&i'ur o interfa! +Ipermedia pentru informa!ii.
6entru a tran&mite %i afi%a documentele, 4orld 4ide 4e$ folo&e%te protocolului de comunica!ie
=>>6. Dunc!ionarea 4orld 4ide 4e$ &e $azeaz pe rela!ia client,&erer. 0lien!ii &unt $roC&erele 4e$
iar &ererele &unt &ererele 4e$.
@im$a"ul =>?@ realizeaz de&crierea documentelor 4e$. 6rin intermediul &u i &e comunic
$roC&erului ce elemente fac parte din pa'ina 4e$ %i care e&te a&pectul ace&tora. #&te recomandat
crearea unor documente =>?@ orientate ctre con!inut %i nu ctre a&pect.
6entru a crea documente =>?@ ae!i neoie de un &et minimal de in&trumente) un editor de te-t,
un $roC&er, un editor 'rafic %i o cone-iune la Internet.
Capitolul '
Structura unui docuent HTML


1. Ce este un document HTML?
7n docuent HTML nu e&te altcea dec(t un fi%ier te-t care, pe l(n' te-tul propriu,zi& ce a
aprea n pa'in, con!ine %i o &erie de elemente &peciale, denumite etic)ete, &au marca"e 9tags, n lim$a
en'lez;.
Aot%
>oate celelalte elemente, de tip multimedia, care n&o!e&c documentul =>?@, cum &unt &unetul,
ima'inile ideo, 'rafica, etc., nu fac parte din &tructura ace&tuia. 3ocumentul =>?@ include referin!e
la ace&te elemente, prin intermediul unor etic+ete &peciale, care indic $roC&erului modul n care ele
or fi ncrcate %i inte'rate n pa'ina 4e$.
#tic+etele nu &unt in&truc!iuni n &en&ul cuno&cut al no!iunii, ele a(nd doar rolul de a comunica
$roC&erului &emnifica!ia %i modul de afi%are al elementelor inclu&e, priind a&pectul te-tului, al
fonturilor 9tipurilor de caractere; %i n 'eneral, al tuturor elementelor prezente n pa'in. #tic+etele &unt
delimitate de perec+i de paranteze un'+iulare /L M/.
7nele etic+ete permit precizarea anumitor caracteri&tici ale elementului pe care l introduc n
document prin intermediul unor perec+i caracteristic ! valoare numite atribute. #-i&t atri$ute
&pecifice doar anumitor elemente %i atri$ute ce &unt utilizate n a&ociere cu mai multe etic+ete. .
etic+et poate aea unul, nici unul, &au mai multe atri$ute. @a r(ndul lor, atri$utelor li &e pot atri$ui
valori diferite.
*t(t etic+etele c(t %i atri$utele &unt case!insensitive, ca atare nu a e-i&ta nici o diferen! de
ac!iune ntre, & &punem, L+eadM, L=eadM, L=#*3M, &au c+iar L=ea3M. #le &unt ec+ialente. 6e de
alt parte, aloarea unui atri$ut poate fi case!sensitive, cum, n principiu, e&te cazul loca!iilor fi%ierelor
%i adre&elor 75@.
5e'ulile de folo&ire a etic+etelor, atri$utelor %i alorilor ace&tora reprezint sinta"a lim$a"ului
=>?@. 2imilar lim$a"elor de pro'ramare, n =>?@ re&pectarea &inta-ei lim$a"ului e&te determinant
pentru o $un func!ionare a documentului.
2pre deo&e$ire de lim$a"ele compilate cum ar fi lim$a"ul 0, n care pro'ramele trec nainte de
e-ecu!ie prin faza de compilare, etap n care compilatorul &emnaleaz eentualele 're%eli de &inta-, la
documentele =>?@ nu &e nt(mpl ace&t lucru. 3ocumentele =>?@ &unt interpretate de $roC&er e-act
a%a cum au fo&t ele &cri&e. 6rin urmare, orice 're%eal de &inta- &e a reflecta direct n a&pectul pa'inii
4e$, conduc(nd, de cele mai multe ori, la o func!ionare defectuoa& a ace&teia.
3ac la izualizarea pa'inii dumneaoa&tr cu $roC&erul con&tata!i c anumite &ecen!e ale
pa'inii nu au a&pectul a%teptat, &au elementele pe care dori!i & le introduce!i nu &unt afi%ate, reeni!i
a&upra documentului =>?@ %i erifica!i nc o dat &inta-a ace&tor elemente.
=>?@ lucreaz ntr,o manier foarte u%or de n!ele&. En e&en! tre$uie & &crie!i te-tul %i &
preciza!i elementele care dori!i & apar n pa'in %i & le include!i ntre anumite etic+ete &pecifice. 3e
e-emplu, dac dorim & afi%m o propozi!ie cu caractere n'ro%ate 9$old;, om marca nceputul ace&teia
folo&ind etic+eta L1M iar pentru marcarea &f(r%itului propozi!iei etic+eta LG1M.
L1M *ce&ta e&te un te-t &cri& cu litere aldineLG1M
.ten#ieH
1roC&erul nu !ine cont de numrul &pa!iilor dintre cuinte, afi%area fc(ndu,&e inaria$il cu un
&in'ur &pa!iu. 3e a&emenea, nu &e poate preciza mrimea liniilor de te-t, ace&tea fiind de mrimea
fere&trei $roC&erului 9prin redimen&ionarea fere&trei &e or rearan"a %i liniile de te-t;.
3up cum om edea mai t(rziu, &e poate preciza totu%i unde & &e termine un anumit r(nd %i cum
&e poate alinia un te-t n pa'in.
#tic+etele =>?@ &unt de dou tipuri)
etic+ete container 9container tags;
etic+ete vide 9empt$ tags;
#tic+etele container &unt de forma)
L>*AM $loc de te-t LG>*AM
unde)
L>*AM , marc+eaz nceputul unui $loc
LG>*AM , marc+eaz &f(r%itul $locului
#tic+etele &pecific formatul n care a fi afi%at te-tul con!inut ntre etic+eta de nceput %i cea de
final. ?a"oritatea etic+etelor &unt de ace&t tip. . particularitate a etic+etelor container e&te c, n cazul
unora dintre ele, prezen!a etic+etei de nc+idere 9LG>*AM; e&te op!ional. 6e parcur&ul capitolelor care
or urma, om preciza e-plicit care anume &unt etic+etele care au acea&t proprietate.
#tic+etele vide au forma)
L>*AM
*ce&t tip de etic+ete nu &e refer la formatul te-telor, ci la introducerea anumitor elemente, ca de
e-emplu) para'rafe, &f(r%it de linie, linii orizontale %i altele, deci dau indica!ii $roC&erului de&pre ce
element e&te or$a %i de&pre cum & afi%eze acel element.
#tic+etele ide nu au etic+et de nc+idere.
2. #tic/ete de structur*
.rice document =>?@ con!ine dou &ec!iuni)
antetul 9head;
corpul documentului 9bod$;
2tructura 'eneral a unui document =>?@ e&te urmtoarea)
5HTML9
5H(.69
5T7TL(9 5JT7TL(9
5JH(.69
54B6I9
5J4B6I9
5JHTML9
3ocumentul e&te delimitat de etic+etele L=>?@M LG=>?@M %i e&te format din cele dou pr!i)
antet 9head; , e&te delimitat de etic+etele L=#*3M LG=#*3M %i con!ine titlul documentului
precum %i alte informa!ii priind documentul. En antetul documentului &e mai in&ereaz %i anumite
&ecen!e de pro'ram 9&cript,uri;, care &e e-ecut la ncrcarea documentului n $roC&er)
corp 9bodG; , care delimiteaz con!inutul propriu,zi& al documentului %i e&te inclu& ntre
etic+etele L1.3KM LG1.3KM
Iat acum %i &emnifica!ia etic+etelor men!ionate %i care fac parte din &tructura oricrui document
=>?@)
5HTML9 5JHTML9
Entre ace&te etic+ete e&te inclu& ntre'ul document =>?@. #le comunic $roC&erului unde ncepe
%i unde &e termin documentul.
5H(.69 5JH(.69
Entre ace&te etic+ete &unt inclu&e titlul, de"a men!ionat, precum %i alte informa!ii de&pre
documentul =>?@. *ce&te elemente, numite metatag,uri &unt deo&e$it de importante pentru ca pa'ina
& fie c(t mai $ine cotat de ctre motoarele de cutare. #le or face o$iectul unui capitol &eparat.
?etata',urile %i antetul n an&am$lul &u nu &unt izi$ile pentru izitator n pa'ina 4e$. >otu%i, la
fel ca ntre' codul =>?@ al pa'inii, antetul poate fi izualizat &elect(nd din meniul $roC&erului
op!iunea 3ie / +ource)
5T7TL(9 5JT7TL(9
2ta$ile%te titlul documentului =>?@.
>itlul documentului e&te deo&e$it de important deoarece e&te unul din criteriile folo&ite de
motoarele de cutare pentru inde-area pa'inii. 6rin urmare, &trdui!i, & '&i!i un titlu care & de&crie
c(t mai corect %i complet con!inutul pa'inii dumneaoa&tr.
.ten#ieH
#tic+eta de mai &u& nu &ta$ile%te titlul care apare n cadrul pa'inii, ci pe acela care apare o$i%nuit
n $ara de titlu a $roC&erului.
54B6I9 5J4B6I9
0on!ine de&crierea te-tului %i elementelor pa'inii. En corpul documentului &e &ta$ile&c, deci,
a&pectul %i con!inutul pa'inii 4e$. #lementele con!inute n acea&t &ec!iune &unt izi$ile n pa'in.
6oate nu ine & crede!i, dar acum ae!i de"a po&i$ilitatea de a crea o pa'in foarte &impl de
te-t. *e!i Fotepad,ul de&c+i&< 3ac nu, de&c+ide!i,l acum %i &crie!i e-emplul urmtor)
("eplul '. 1
L=>?@M
L=#*3M
L>I>@#M6a'ina meaLG>I>@#M
LG=#*3M
L1.3KM
*m reu&it &a &criu prima mea pa'ina de 4e$. 7rmatoarea a fi cu mult mai $una.
LG1.3KM
LG=>?@M
2ala!i fi%ierul cu numele primapagina)html. *poi de&c+ide!i $roC&erul pe care l folo&i!i
9Internet #-plorer &au Fet&cape;, &electa!i meniul .ile / Open / 1rose, cuta!i folderul n care a!i
&alat fi%ierul, de&c+ide!i,l %i e!i afla n fa!a primului dumneaoa&tr document =>?@ ) Di'ura 2.1
3ac dori!i & &crie!i un te-t pe mai multe linii n pa'in, a tre$ui & folo&i!i etic+eta L15M 9de la
line break;, care face trecerea pe o linie noua. #tic+eta L15M e&te de tip empt$, deci nu are etic+et de
nc+idere. Encerca!i e-emplul de mai "o&, n care afi%area te-tului documentului &e a face pe dou
r(nduri.
("eplul '. '
L=>?@M
L=#*3M
L>I>@#M6a'ina meaLG>I>@#M
LG=#*3M
L1.3KM
*m reu&it &a &criu prima mea pa'ina de 4e$.L15M7rmatoarea a fi cu mult mai $una.
LG1.3KM
LG=>?@M
*cum, documentul dumneaoa&tr a arta ca n Di'ura 2.2
3eoarece &tructura documentelor =>?@ o$i%nuite e&te n realitate mult mai comple-, e&te
recomandat ca, pe m&ur ce proce&ul de editare aan&eaz, & introduce!i comentarii n te-t pentru a
face acea&t &tructur c(t mai e-plicit. 0omentariile nu &unt izi$ile pentru $roC&er, ele &ere&c
creatorului pa'inii pentru a da un 'rad cre&cut de lizi$ilitate documentului =>?@.
0omentariile con&tau n &curte informa!ii, e-plica!ii la elementele de cod utilizate, etc., fiind
deo&e$it de utile ulterior, mai ale& n &itua!ia n care &e impune depanarea codului.
0omentariile &e introduc prin includerea te-tului ntre etic+etele de mai "o&.
LN,, ,,M
Iat dou e-emple)
LN, , *ce&ta e&te un comentariu introdu& in pa'ina 4e$ , ,M
LNO*ce&ta e&te un comentariu
pe mai multe randuri
care ia &far&it aici ,,M
3. 0o!osirea corect* a etic/ete!or
#tic+etele container &e compun, a%a cum am zut mai dereme, din perec+i de etic+ete) etic+et
de de&c+idere L>*AM %i de nc+idere LG>*AM.
@a con&truirea unei pa'ini 4e$ comple-e e!i fi pu& ade&ea n &itua!ia de a folo&i mai multe
etic+ete pentru aceea%i &ecen! de te-t.
3e pild, e!i dori & atri$ui!i unui te-t dou propriet!i) litere aldine &au n'ro%ate 9bold; %i te-t
centrat n pa'in. 6entru acea&ta a tre$ui & utiliza!i dou perec+i de etic+ete, care de&criu cele dou
propriet!i, n mod &imultan, metod numit ibricarea etic+etelor 9nested tags;, ca n e-emplul de
mai "o&)
L0#F>#5ML1M>e-t cu aldine &i centratLG1MLG0#F>#5M
#&te foarte important ca, n cazul folo&irii mai multor etic+ete container mpreun, ele & fie
pla&ate n mod corect.
En acea&t &itua!ie, principiul de utilizare e&te) /Last 7n $ *irst But/ 9@ID.;. *ce&t lucru
n&eamn c ultima etic+et de&c+i& tre$uie & fie prima care &e nc+ide.
.ten#ieH
>re$uie & fi!i foarte atent la nc+iderea etic+etelor, pentru a nu nclca principiul @ID.. En caz
contrar, &ecen!a de cod din pa'in nu a func!iona corect.
Iat un e-emplu 'eneric de folo&ire corect a dou etic+ete)
L>*A1ML>*A2M#tic+ete utilizate corectLG>*A2MLG>*A1M
%i un altul de folo&ire incorect)
L>*A1ML>*A2M#tic+ete utilizate incorectLG>*A1MLG>*A2M
4. -e.umat
7n document =>?@ e&te un fi%ier te-t care con!ine te-tul care a aprea n pa'in %i etic+ete.
*ce&tea au rolul de a comunica $roC&erului &emnifica!ia %i modul de afi%are al elementelor inclu&e
ntre ele.
#tic+etele &unt n&o!ite de atri$ute care &unt perec+i caracteristic ! valoare %i care au rolul de a
&ta$ili dier&e caracteri&tici ale etic+etei. #tic+etele pot fi de dou tipuri) etic+ete container %i etic+ete
ide. #tic+etele container nece&it etic+eta de nc+idere n timp ce etic+etele ide nu tre$uie nc+i&e.
7n document =>?@ e&te format din antet %i corp. #tic+etele de &tructur ale documentului &unt)
L=>?@M LG=>?@M care delimiteaz documentul
L=#*3M L=#*3M care delimiteaz antetul
L>I>@#M LG>I>@#M care delimiteaz titlul documentului
L1.3KM LG1.3KM care delimiteaz corpul documentului.
Entr,un document =>?@ &e pot introduce comentarii prin introducerea te-tului ntre etic+etele
LN,, ,,M
Im$ricarea etic+etelor re&pect re'ula @ID.) prima etic+et de&c+i& e&te ultima care &e nc+ide.
). Test
#%M( este un acronim de la4
a; =Iper >e-t ?arJer @ine
a; =Iper >e-t ?arJup @an'ua'e
$; =Iper >ec+nical ?et+od @i$rarI
5tichetele #%M( sunt incluse 6ntre4
a; P %i Q
a; 9 %i ;
$; L %i M
5tichetele 7i textul care nu sunt vi8ibile 6n pagin sunt plasate 6n blocul4
a; 1odI
a; =ead
$; >a$le
Ce fel de program este necesar pentru a scrie #%M(9
a; un editor de te-t
a; un editor 'rafic
$; =>?@ 3eelopment 4.0
O pagina "eb este format din dou pri4
a; >op %i 1ottom
a; 1odI %i Drame&et
$; =ead %i 1odI
Care etichete 6i comunica broserului unde 6ncepe 7i unde se termin pagina9
a; L=>?@M
a; L=#*3M
$; L1.3KM
Care dintre urmtoarele elemente nu poate fi gsit 6n seciunea #ead9
a; >itle
a; >a$le
$; ?etata'
:n construcia urmtoare4
L>I>@#M6a'ina meaLG>I>@#M
6a'ina mea repre8int4
a; Fumele fi%ierului =>?@
a; >itlul care a aprea n pa'ina 4e$
$; >itlul care a aprea n $ara de titlu a fere&trei $roC&erului
Care dintre urmtoarele fi7iere nu este un fi7ier #%M(9
a; mIpa'e.+tm
a; mIpa'e.t-t
$; mIpa'e.+tml
'at exemplul de mai ;os4
L>*A1M
L>*A2M>e-tLG>*A2M
L>*A3M>e-t
L>*A4M>e-tLG>*A4M
LG>*A3M>e-t
LG>*A1M
5ste un exemplu de folosire corect a etichetelor9
a; Fu, deoarece nc+iderea etic+etelor nu re&pect re'ula @ID..
a; Fu, deoarece nu aem oie & folo&im mai mult de dou etic+ete im$ricate
$; 3a, deoarece etic+etele &e nc+id corect.
Structura unui docuent HTML
1. $;
'. c;
+. $;
0. a;
1. c;
:. a;
<. $;
=. c;
>. $;
1@. c;
Capitolul +
Culori
Culoarea reprezint un caracteri&tic e-trem de important a unei pa'ini 4e$. 7tilizat cu 'ri"
%i m&ur, ea poate m$unt!i &u$&tan!ial a&pectul pa'inii, fc(nd,o mai lizi$il %i mai atracti, iar
te-tul mai u%or de parcur&.
6e de alt parte, utilizarea e-ce&i &au inadecat a culorilor poate tran&forma un te-t de calitate
ntr,un fel de caleido&cop o$o&itor, 'reu de urmrit, %i care i a determina pe mul!i izitatori & renun!e
la a,l mai parcur'e.
3atorit faptului c ea reprezint un atri$ut al multor elemente ale documentelor 4e$ 9te-t,
fundaluri, mar'ini, linJ,uri;, am optat pentru prezentarea detaliat a modului de utilizare al culorilor
nc din acea&t etap a lucrrii noa&tre.
1. Sistemu! de de'inire a cu!ori!or
2i&temul 'eneral utilizat pentru definirea culorilor e&te R?4 prin care &unt &pecificate pentru
fiecare culoare care &unt cantit!ile de ro%u 9Red;, erde 9,reen; %i al$a&tru 91lue; care o compun.
En =>?@ orice culoare e&te de&emnat printr,un cod de 6 cifre +e-azecimale, dintre care primele
dou reprezint cantitatea de ro%u, cele dou din mi"loc, cantitatea de erde, iar ultimele dou cantitatea
de al$a&tru.
2i&temul +e-azecimal e&te un &i&tem de numera!ie care folo&e%te 16 cifre, e-i&t(nd urmtoarea
core&ponden! ntre cifrele +e-azecimale %i cele zecimale)
0 1 2 3 4 5 6 7 8 9
1
0
1
1
1
2
1
3
1
4
1
5
0 1 2 3 4 5 6 7 8 9 * 1 0 3 # D
3e e-emplu, RDD0000 e&te codul pentru ro%u. 2emnifica!ia ace&tui cod e&te urmtoarea) cantitatea
de ro%u e&te ma-im, iar cantit!ile de erde %i al$a&tru &unt e'ale cu 0. 0odul pentru erde pur e&te
R00DD00 iar pentru al$a&tru e&te R0000DD.
3eoarece uneori definirea culorii prin intermediul codului &u +e-azecimal e&te incomod,
&tandardul =>?@ 3.2 &ta$ile%te un &et de 16 culori &tandard.
En ace&t caz, pentru aloarea atri$utului de culoare &e utilizeaz direct numele culorii, ca n
e-emplul de mai "o&, n care &e &eteaz culoarea ma'enta pentru linJurile izitate)
L1.3K linJS/ma'enta/M
Fumele %i codul culorilor &ta$ilite n &tandardul =>[email protected] &unt urmtoarele)
Tabelul +. 1
Aue
culoare
Cod
)e"a&ecial
aTua R00DDDD
$lacJ R000000
$lue R0000DD
fuc+&ia RDD00DD
'raI R808080
'reen R008000
lime R00DD00
maroon R800000
naI R000080
olie R808000
purple R800080
red RDD0000
&iler R000000
teal R008080
IelloC RDDDD00
C+ite RDDDDDD
?ai tre$uie men!ionat faptul c &e pot utiliza, pe l(n' culori, 100 de nuan!e de 'ri 9gra$;. #le
&unt numerotate de la 1 la 100, /'raI 1/ fiind nuan!a cea mai nc+i&, iar /'raI 100/ cea mai de&c+i&.
En *ne-a 3 e!i '&i ta$elul culorilor n&o!ite de codurile lor +e-azecimale.
2. Corespondena dintre coduri!e /exa.ecima! i .ecima!
?ulte dintre editoarele 'rafice folo&e&c pentru a defini culorile codul zecimal. 3e%i &e $azeaz %i
ele pe acela%i &i&tem 5A1 de definire a culorilor, numerele care &ta$ile&c cantit!ile celor trei culori
&unt &pecificate n &i&temul zecimal.
3e e-emplu, o culoare care are codul +e-azecimal R63DD80 a aea codul zecimal 99, 255, 128.
*cea&t core&ponden! &e realizeaz &implu, trec(nd fiecare dintre cele trei numere +e-azecimale din
codul culorii n &i&temul zecimal)
63916;S99910; , DD916;S255910;, 80916;S128910;
?otiul pentru care tre$uie & cunoa%te!i acea&t core&ponden! e&te acela c pentru a folo&i n
documentul =>?@ o culoare al crei cod e&te dat n &i&temul zecimal, acea&ta tre$uie conertit n cod
+e-azecimal.
0oner&ia &e poate realiza foarte &implu folo&ind calculatorul din 4indoC& 9+tart / 0ccessories
/ Calculator; care tre$uie &etat pe op!iunea +cientific din meniul 3ie. Ue!i o$&era o &erie de $utoane
radio dintre care ne intere&eaz dou) #ex %i Dec. Fu ae!i altcea de fcut dec(t & &electa!i Dec, &
ta&ta!i numrul n $aza 10 %i apoi & &electa!i op!iunea #ex. 5ezultatul coner&iei a aprea pe ecran.
0oner&ia iner& &e realizeaz n mod &imilar.
8i acum & trecem la lucruri mai atractie %i & dm ia! pa'inii noa&tre adu'(ndu,i culori. Uom
lua pe r(nd atri$utele etic+etei L1.3KM. 0u a"utorul lor &e pot &eta culorile fundalului, te-tului %i
linJurilor)
b-color , culoarea fundalului
te"t , culoarea te-tului
lin; , culoarea linJurilor
vlin; , culoarea linJurilor izitate
alin; , culoarea linJului acti
3. Cu!oarea 'unda!u!ui
6entru a &ta$ili culoarea fundalului unei pa'ini folo&im atri$utul b-color 9background color; al
etic+etei L1.3KM, cruia i atri$uim o aloare a&tfel)
L1.3K $'colorS/R5A1 &au numeVculoare/M
2e poate folo&i drept aloare pentru atri$utul $'color fie codul +e-azecimal al culorii fie numele
ei. Iat un e-emplu de pa'in cu fundal erde)
("eplul +. 1
L=>?@M
L=#*3M
L>I>@#Mculori1LG>I>@#M
LG=#*3M
L1.3K $'colorS/R00DD00/M
L=1 ali'nS/center/M6a'ina cu fundal erdeLG=1ML=5M
LG1.3KM
LG=>?@M
*&pectul pa'inii a fi cel din Di'ura 3.1 .
4. Cu!oarea textu!ui
6entru a &eta culoarea te-tului din ntrea'a pa'in &e folo&e%te atri$utul te"t al etic+etei
L1.3KM, conform &inta-ei)
L1.3K te-tS/R5A1 &au numeVculoare/M
3ac am &ta$ilit o culoare pentru te-tul din pa'in %i dorim & utilizm o alt culoare pentru o
anumit &ec!iune a te-tului 9culoarea unui $loc de te-t;, om folo&i o etic+et de&pre care om or$i pe
lar' n capitolul urmtor) etic+eta LD.F>M. *cea&ta e&te o etic+et container care cuprinde ntre
etic+etele de nceput %i de final te-tul a crui culoare dorim & o modificm. 2ta$ilirea culorii &e face
folo&ind atri$utul color al etic+etei conform &inta-ei)
LD.F> colorS/R5A1 &au numeVculoare/M>e-tLGD.F>M
En #-emplul 3.2 culoarea te-tului e&te al$a&tru iar anumite cuinte &unt colorate n ro%u. *&pectul
pa'inii a fi cel din Di'ura 3.2 .
("eplul +. '
L=>?@M
L=#*3M
L>I>@#Mculori2LG>I>@#M
LG=#*3M
L1.3K $'colorS/RDDDDDD/ te-tS/R0000DD/M
L=1 ali'nS/center/M>e-t al$a&tru &i ro&uLG=1M
L=5M
>e-tul din acea&ta pa'ina e&te al$a&tru cu mici
LD.F> colorS/RDD0000/M e-ceptiiLGD.F>M
LG1.3KM
LG=>?@M
). Cu!oarea !e&*turi!or
En 'eneral le'turile 9links; dintr,o pa'in 4e$ au culori pre&ta$ilite 9default;, a&tfel)
$lue 9al$a&tru; , pentru le'turi
red 9ro%u; , pentru le'tura actia 9cea pe care e&te fi-at cur&orul mou&e,ului, cu $utonul &t(n'
ap&at;
purple 9iolet; , pentru le'turile izitate, cele pe care &,a efectuat cel pu!in un click
6entru a &c+im$a culorile pre&ta$ilite &e folo&e&c urmtoarele atri$ute ale etic+etei L1.3KM)
lin; pentru le'turi
alin; pentru le'turile actie
vlin; pentru le'turile izitate
conform &inta-ei)
L1.3K linJS/R5A1 &au numeVculoare/
alinJS/R5A1 &au numeVculoare/ linJS/R5A1 &au numeVculoare/M
3ocumentul din #-emplul 3.3 creeaz o pa'in n care te-tul e&te ne'ru iar le'turile au culoarea
erde, le'turile actie culoarea al$a&tru %i cele izitate, culoarea ro%u. En e-emplu e&te folo&it etic+eta
L*M %i atri$utul &au )re,, care or fi prezentate pe lar' n capitolul de&pre le'turi. En ace&t moment
&in'urul lucru care ne intere&eaz e&te cum putem &ta$ili culorile ace&tora.
("eplul +. +
L=>?@M
L=#*3M
L>I>@#Mculori3LG>I>@#M
LG=#*3M
L1.3K $'colorS/RDDDDDD/ te-tS/R000000/ linJS/R00DD00/ alinJS/R0000DD/
linJS/RDD0000/M
L=1 ali'nS/center/M@e'aturi colorateLG=1M
L=5M
L* +refS/culori1.+tml/M@e'atura catre primul e-empluLG*M
LG1.3KM
LG=>?@M
*&pectul pa'inii a fi cel din Di'ura 3.3 .
+. 1!e&erea cu!ori!or
2unt multe elemente care tre$uie luate n con&iderare la ale'erea culorilor pentru o pa'in 4e$.
6rimul %i cel mai important e&te acela de a face con!inutul u%or de citit. *cea&ta n&eamn...a!i '+icitN
@itere ne're pe fond al$.
3e%i n e&timenta!ie com$ina!ia de ro%u cu $leumarin e&te rafinat, ntr,o pa'in 4e$ literele
ro%ii pe fond al$a&tru nu arat $ine %i &unt 'reu de citit. . alt com$ina!ie nefericit e&te cea cu fondul
ne'ru &au de culoare foarte nc+i& %i te-tul de culoare al$.
2 nu uitm nici faptul c toate monitoarele di&pun de re'la"e ale &trlucirii luminoa&e %i ale
contra&tului pe care utilizatorii le &eteaz diferit, n func!ie de preferin!ele per&onale, de toleran!a
oc+iului, de iluminarea camerei, etc.
6e un monitor cu re'la"e medii ale contra&tului %i &trlucirii, un te-t de culoare ro%ie di&pu& pe un
fundal ne'ru a fi ilizi$il, c+iar dac la alori ma-ime ale ace&tor caracteri&tici com$ina!ia poate 'enera
efecte intere&ante.
En ale'erea culorilor pentru un &ite e&te $ine & !ine!i &eama de c(tea elemente de p&i+olo'ia
culorilor, pentru a &u$linia a&tfel me&a"ul pe care re!i & l tran&mite!i.
Iat c(tea dintre &entimentele pe care le &u'ereaz culorile)
5o%u , a're&iitate, pa&iune, putere, italitate
5oz , feminitate, inocen!, moliciune
6ortocaliu , amuzament, e&elie, cldur, e-u$eran!
Aal$en , &entimente pozitie %i cordialitate
Uerde , lini%te, &ntate, pro&pe!ime
*l$a&tru , autoritate, demnitate, &ecuritate, ncredere
Uiolet , &ofi&ticare, &piritualitate, mi&ter
?aro , utilitate, le'tura cu pm(ntul, $o'!ie
*l$ , puritate, ncredere, modernitate, rafinament
Ari , &o$rietate, autoritate, &im! practic
Fe'ru , &eriozitate, di&tinc!ie, +otr(re
*le'erea culorilor pentru &ite tre$uie & fie n concordan! cu tema &ite,ului %i & &u$linieze
me&a"ul &u. *&tfel, dac dori!i & con&trui!i un &ite de&tinat copiilor e!i folo&i culori e&ele %i
luminoa&e, n reme ce pentru un &ite de&tinat prezentrii unei firme de con&ultan! financiar &unt
potriite culori &o$re %i care &u'ereaz &eriozitate %i ncredere.
*le'erea culorilor pentru le'turi e&te, de a&emenea, important. @e'turile au, n mod pre&ta$ilit,
anumite culori. 2c+im$area ace&tora, de%i po&i$il, l poate induce n eroare pe izitator. 0a %i n cazul
te-tului, ale'e!i pentru le'turi, le'turile izitate %i le'tura acti culori care & in n contra&t cu
culoarea &au ima'inea de fundal a pa'inii. 5m(ne!i con&ecent culorilor ale&e pentru le'turi, pe
parcur&ul ntre'ului &ite.
,. Cu!ori 2si&ure2
*%a cum era de a%teptat, nu toate monitoarele pot reproduce cele 16.777.000 de culori furnizate
de codul 5A1. 0ele realizate cu te+nolo'ii mai ec+i, &au cele moderne &etate pentru numai 256 de
culori pot reproduce corect doar un &et limitat de 256 de culori, a%a,numit palet 4e$ &au /culorile
&i'ure 4e$/.
Culorile /si-ure/ &unt cele definite prin &tandardul =>?@ 3.2 prezentat n ta$elul de mai &u&
&au &unt realizate prin com$ina!ii ale urmtoarelor numere +e-azecimale) 00 33 66 99 00 DD
0odul +e-azecimal ariaz ntre RDDDDDD 9al$; %i R000000 9ne'ru;.
7n monitor &etat & afi%eze 256 de culori a ncerca afi%area unei culori din afara ace&tui &et prin
fenomenul numit /dithering/ 9alternarea unui pi-el de o culoare cu un pi-el de alt culoare;, ceea ce
uneori d rezultate, dar ade&ea rezultatul e departe de culoarea real. *lteori, computerul a afi%a
culoarea /&i'ur/ cea mai apropiat de cea ori'inal.
En principiu, o a&tfel de pro$lem poate prea minor. En realitate, pre&upun(nd c o pa'in 4e$
con!ine at(t te-tul c(t %i fundalul am$ele n culori /ne&i'ure/, prin modificarea lor de ctre computerul
cititorului, nuan!ele /apro-imate/ pot face te-tul total ilizi$il.
6entru a eita a&tfel de &urprize neplcute e&te &uficient & men!ine n limita celor 256 de culori
/&i'ure/.
3e&i'ur, pute!i folo&i o com$ina!ie +e-azecimal ciudat, ca acea&ta) R12#081, dar nu e!i aea
nici o 'aran!ie n priin!a modului n care a fi afi%at acea&t culoare n diferite $roC&ere %i pe diferite
platforme.
3. -e.umat
0ulorile ntr,un document =>?@ &unt definite cu a"utorul codului 5A1 care e-prim n &i&tem
+e-azecimal cantitatea de ro%u, erde %i al$a&tru prezent n fiecare culoare.
6entru a &ta$ili culorile ntr,o pa'in 4e$ &e folo&e&c atri$utele etic+etei L1.3KM dup
urmtoarea &inta-)
L1.3K $'colorS/R5A1 &au numeVculoare/ te-tS/R5A1 &au numeVculoare/ linJS/R5A1 &au
numeVculoare/ alinJS/R5A1 &au numeVculoare/ linJS/R5A1 &au numeVculoare/Mcorpul
documentuluiLG1.3KM
*le'erea culorilor pentru o pa'in 4e$ tre$uie & fie n &tr(n& le'tur cu me&a"ul tran&mi& de
acea&ta %i & permit citirea cu u%urin! a informa!iilor prezentate.
6entru a eita afi%area defectuoa& a culorilor din pa'in e&te recomandat folo&irea culorilor
/&i'ure/.
4. Test
1. +istemul pentru definirea culorilor este4
a; 5ed, Areen, 1lue
a; 5ed, KelloC, 1lue
$; 4+ite, 1lacJ, AraI
Culorile 6n #%M( pot fi specificate folosind4
a; 0odul zecimal
a; 0odul +e-azecimal
$; 0odul ?or&e
Care este cea mai mare cifr 6n sistemul hexa8ecimal9
a; 15
a; D
$; *
O culoare care are 6n sistemul 8ecimal codul R,1 cu valorile4 <=, >?@, A< are codul
hexa8ecimal4
a; R2#D*22
a; R300345
$; R66DD90
&entru a stabili culoarea fundalului paginii folosim4
a; L1.3K $acJ'roundS/culoare/M
a; L1.3K colorS/culoare/M
$; L1.3K $'colorS/culoare/M
+etarea culorii pentru tot textul din pagin se face cu4
a; LD.F> colorS/culoare/M
a; L1.3K fontcolorS/culoare/M
$; L1.3K te-tS/culoare/M
Cum se poate schimba culoarea unui bloc de text9
a; [email protected]/culoare/[email protected]
a; L>#W> colorS/culoare/Mte-tLG>#W>M
$; LD.F> colorS/culoare/Mte-tLGD.F>M
Care sunt culorile prestabilite pentru legturi, legturi active 7i legturi vi8itate9
a; al$a&tru, ro%u, iolet
a; al$a&tru, erde, 'al$en
$; ne'ru, al$a&tru, ro%u
Culoarea legturilor se poate schimba folosind4
a; L@IFX colorS/culoare/M
a; L1.3K linJS/culoare/M
$; L1.3K linJcolorS/culoare/M
0tributele linJ5 alinJ 7i linJ servesc la4
a; &ta$ilirea le'turilor
a; &ta$ilirea culorilor pentru le'turi
$; &ta$ilirea culorilor pentru ntrea'a pa'in
Culori
1. a;
'. $;
+. $;
0. a;
1. c;
:. c;
<. c;
=. a;
>. $;
1@. $;
Capitolul 0
*onturi
Enainte de a a$orda tipurile de caractere care pot fi utilizate n documentele 4e$, &e cuine
men!ionat un fapt) =>?@ nu e&te un lim$a" orientat &pre a&pectul 9la$out; pa'inii, ci &pre con!inutul
ace&teia.
Importan!a ace&tei men!iuni rezid n aceea c etic+etele =>?@ nu impun, cum &,ar putea crede,
ci /&ftuie&c/ marea arietate de $roC&ere care proce&eaz pa'ina 4e$, cum & afi%eze te-tul. 0eea ce
impun ele cu aderat e&te con!inutul, te-tul n &ine, nu forma de prezentare.
3e&i'ur c nu &e poate or$i de cealalt e-trem, a unui ar$itrariu a$&olut, n care fiecare $roC&er
a afi%a te-tul &u$ o form a$&olut impreizi$il. 7n te-t cu o anumit formatare pentru Internet
#-plorer, & &punem, a fi izualizat practic identic de to!i utilizatorii ace&tui tip de $roC&er)
#-i&t numeroa&e etic+ete care permit formatarea caracterelor %i ne ofer po&i$ilitatea de a da
te-tului din pa'ina 4e$ a&pectul dorit.
1. 0ormatarea caractere!or
#tic+eta care &e folo&e%te pentru a da unui caracter &au unui %ir de caractere 9unui te-t; a&pectul
dorit e&te etic+eta container 5*BAT9 5J*BAT9.
Entre etic+eta de nceput %i cea de &f(r%it &e in&ereaz te-tul &au caracterul ale crui caracteri&tici
dorim & le &ta$ilim.
Enainte de a di&cuta de&pre atri$utele etic+etei LD.F>M & luam un e-emplu)
LD.F> &izeS/2/ colorS/red/ faceS/arial/MIon @uca 0ara'iale LGD.F>M
#fectul liniei de mai &u& e&te afi%area te-tului /Ion @uca 0ara'iale/ cu fonturi *rial, de culoare
ro%ie %i de mrime e'al cu 2 puncte.
2 analizm &ucce&i cele trei atri$ute ale etic+etei LD.F>M)
si&e , dimen&iunea te-tului , poate fi un numr ntre 1 %i 7 9dimen&iuni a$&olute;, ntre ,1 %i ,3 &au
ntre Y1 %i Y4 9dimen&iuni relatie, adic raportate la dimen&iunea de"a e-i&tent a fontului;.
3imen&iunea pre&ta$ilit 9default; a fonturilor e&te 3.
3ac dimen&iunile men!ionate dep%e&c interalul 1,7, $roC&erul rotun"e%te automat alorile
pentru a le ncadra n ace&t interal.
color , culoarea te-tului , e&te culoarea cu care a fi afi%at te-tul prezent ntre etic+ete 9n
e-emplul no&tru, /Ion @uca 0ara'iale/ ;.
,ace , tipul de font , determin tipul de font care a fi utilizat la afi%area te-tului.
>ipurile cele mai uzuale &unt)
*rial
>a+oma
=eletica
>ime& FeC 5oman
0ourier
Uerdana
*tri$utul etic+etei permite precizarea fie a unui &in'ur tip de font fie a mai multora, &eparate prin
ir'ul. 6recizarea mai multor fonturi a"ut n eentualitatea c(nd primul tip indicat nu e&te in&talat pe
calculatorul celui care iziteaz pa'ina, %i &e face ca n e-emplul de mai "o&.
LD.F> faceS/arial, erdana, time& neC roman/M
En acea&t &itua!ie $roC&erul a ale'e &in'ur din li&t primul tip de font pe care l recunoa%te,
i'nor(ndu,le pe urmtoarele.
.ten#ieH
@a &ta$ilirea tipului de caracter utilizat n pa'in !ine!i &eama de faptul c nu to!i utilizatorii au
in&talate pe computerele lor acela%i &et de caractere ca %i dumneaoa&tr. 3in ace&t moti, folo&irea
unor caractere e-otice, de efect, poate conduce la un e%ec n cazul c(nd utilizatorul nu are in&talat acel
font.
3in ace&t moti e&te de preferat folo&irea unor fonturi cu utilizare lar', cum &unt cele men!ionate
mai &u&.
En #-emplul 4.1 om aplica pe r(nd fiecare dintre cele trei atri$ute men!ionate a&upra unui te-t,
a&pectul pa'inii de&cri&e de ace&t document fiind cel din Di'ura 4.1.
a3 ("eplul 0. 1
L=>?@M
L=#*3M
L>I>@#Mfonturi1LG>I>@#M
LG=#*3M
L1.3K $'colorS/IelloC/M
LD.F> &izeS/5/ faceS/ta+oma/ colorS/'reen/M?anual de =>?@ &i de&i'n 4e$LGD.F>ML15M
LD.F> &izeS/Y3/ faceS/arial/ colorS/red/M?anual de =>?@ &i de&i'n 4e$LGD.F>ML15M
LD.F> &izeS/,1/ faceS/courier neC/ colorS/$lue/M?anual de =>?@ &i de&i'n 4e$LGD.F>M
LG1.3KM
LG=>?@M
6entru a &ta$ili a&pectul te-tului unei ntre'i pa'ini 4e$, putem folo&i etic+eta 54.S(*BAT9.
2pre deo&e$ire de LD.F>M acea&ta nu e&te o etic+et container, deoarece efectul ei &e refer la tot
te-tul din pa'in. Fu &e folo&e%te pentru a &ta$ili caracteri&ticile unui $loc de te-t.
#&te indicat & fie inclu& n documentul =>?@ imediat dup etic+eta L1.3KM. *tri$utele
etic+etei L1*2#D.F>M &unt acelea%i cu cele ale etic+etei LD.F>M, re&pecti) si&e, color, ,ace.
En #-emplul 4.2 om con&trui o pa'in creia i &etm te-tul cu atri$utele)
face , tip de font *rial, &ize , dimen&iunea fontului 2, color , culoare al$a&tr. . parte din te-t a
aea alt tip de font, alt mrime %i culoare, ace&tea fiind &ta$ilite prin folo&irea etic+etei LD.F>M.
b3 ("eplul 0. '
L=>?@M
L=#*3M
L>I>@#Mfonturi2LG>I>@#M
LG=#*3M
L1.3K $'colorS/C+ite/M
L1*2#D.F> faceS/arial/ colorS/$lue/ &izeS/2/M
*m a"un& la lectia de&pre fonturi a LD.F> faceS/arial $lacJ/ colorS/red/ &izeS/4/M?anualului
de =>[email protected]>M
LG1.3KM
LG=>?@M
3up cum pute!i o$&era din Di'ura 4.2, caracteri&ticile te-tului din pa'in au fo&t &etate cu
a"utorul etic+etei L1*2#D.F>M. 6entru a afi%a &imultan o parte din te-t ntr,un mod diferit am folo&it
etic+eta LD.F>M.
3e%i etic+eta L1*2#D.F>M face parte din &tandardul =>?@ 3.2, atri$utele &ale nu &unt
recuno&cute de $roC&erele Fet&cape. 0a urmare, ace&ta a afi%a te-tul utiliz(nd propriile &etri
pre&ta$ilite 9default;, i'nor(nd atri$utele men!ionate n etic+eta L1*2#D.F>M.
7rmtorul e-emplu 9#-emplul 4.3; afi%eaz un cu(nt a(nd literele de mrimi diferite. *&pectul
ace&tei pa'ini e&te cel din Di'ura 4.3.
c3 ("eplul 0. +
L=>?@M
L=#*3M
L>I>@#Mfonturi3LG>I>@#M
LG=#*3M
L1.3K $'colorS/C+ite/M
L1*2#D.F> faceS/arial $lacJ/ colorS/red/M
LD.F> &izeS/4/MALGD.F>M
LD.F> &izeS/5/M5LGD.F>M
LD.F> &izeS/6/M*LGD.F>M
LD.F> &izeS/7/M>LGD.F>M
LD.F> &izeS/6/M7LGD.F>M
LD.F> &izeS/5/MILGD.F>M
LD.F> &izeS/4/M>LGD.F>M
LG1.3KM
LG=>?@M
2 trecem n rei&t, n continuare, alte etic+ete care &c+im$ a&pectul unui caracter &au al unui
$loc de te-t.
2. 1ccentuarea textu!ui
1. #tic+eta 547?9 5J47?9 face fonturile mai mari dec(t dimen&iunea curent.
L1IAM>e-t cu caractere mariLG1IAM
>e-t cu caractere mari
1. #tic+eta 5SM.LL9 5JSM.LL9 face fonturile mai mici dec(t dimen&iunea curent.
L2?*@@M>e-t cu caractere miciLG2?*@@M
>e-t cu caractere mici
2. #tic+etele 549 5J49 9bold; %i 5STRBA?9 5JSTRBA?9 realizeaz &crierea cu
caractere aldine, &au n'ro%ate 9bold;.
L1M>e-t in'ro&at 1LG1M
Te"t in-rosat 1
L2>5.FAM>e-t in'ro&at 2LG2>5.FAM
Te"t in-rosat '
3. #tic+etele 579 5J79 9italic; %i 5(M9 5J(M9 9emphasi8ed;realizeaz &crierea cu
caractere italice.
LIM>e-t inclinat 1LGIM
%ext inclinat B
L#?M >e-t inclinat 2LG#?M
%ext inclinat >
4. #tic+etele 5S9 5JS9 %i 5STR7K(9 5JSTR7K(9 realizeaz &crierea te-tului tiat de o
linie orizontal.
L2M>e-t taiat 1LG2M
>e-t taiat 1
L2>5IX#M>e-t taiat 2LG2>5IX#M
>e-t taiat 2
5. #tic+eta 5U9 5JU9 9underlined; realizeaz &u$linierea te-tului.
L7M>e-t &u$liniatLG7M
>e-t &u$liniat
.ten#ieH
7tilizarea te-tului &u$liniat tre$uie fcut cu 'ri", ntruc(t ace&ta poate fi confundat cu un linJ.
6. #tic+eta 5SUP9 5JSUP9 9superscript;. 6rin intermediul ei &e pot in&era n document
caractereGte-te pla&ate dea&upra nielului liniei de &criere.
*pa in'+eata la 0 L276M0LG276M0
*pa in'+eata la 0
0
0
7. #tic+eta 5SU49 5JSU49 9subscript;. 6rin intermediul ei &e in&ereaz te-te pla&ate &u$
nielul liniei de &criere.
0oordonatele WL271M1LG271M, KL271M2LG271M
0oordonatele W1, K2
#&te de remarcat faptul c etic+etele L1IAM %i L2?*@@M &unt e-ecutate diferit n dier&e
$roC&ere)
*&tfel, n Fet&cape L1IAM face te-tul mai mare cu un punct iar L2?*@@M mai mic cu un punct
dec(t dimen&iunea curenta.
En Internet #-plorer, L1IAM afi%eaz te-tul cu fonturi de dimen&iune 4 iar L2?*@@M cu fonturi
de dimen&iune 2. #tic+etele L1IAM %i L2?*@@M pot fi repetate pentru a o$!ine un efect mai accentuat.
#-emplele urmtoare ilu&treaz modul cum pot fi utilizate ace&te etic+ete.
d3 ("eplul 0. 0
L=>?@M
L=#*3M
L>I>@#Mfonturi4LG>I>@#M
LG=#*3M
L1.3KM
L1*2#D.F> faceS/arial/ colorS/$lue/M
L1IAM#tic+eteLG1IAM care L#?M&c+im$aLG#?M a&pectul L2?*@@Mte-tuluiLG2?*@@M
LG1.3KM
LG=>?@M
*&pectul pa'inii e&te cel din Di'ura 4.4
e3 ("eplul 0. 1
L=>?@M
L=#*3M
L>I>@#Mfonturi5LG>I>@#M
LG=#*3M
L1.3KM
LD.F> faceS/arial/ &izeS/5/M*ce&ta e&te font *rial LGD.F>ML15M
LD.F> faceS/al'erian/ &izeS/4/ colorS/'reen/M*ce&ta e&te font *l'erian LGD.F>ML15M
LD.F> faceS/courier/ colorS/$lue/ML2>5.FAM*ce&ta e&te font 0ourier
LG2>5.FAMLGD.F>ML15M
LD.F> D*0#S/ialdi/ &izeS/5/ colorS/'raI/ML7M*ce&ta e&te font Uialdi
LG7MLGD.F>ML15M
LD.F> D*0#S/'aramond/ML#?M*ce&ta e&te font Aaramond LG#?MLGD.F>ML15M
LD.F> D*0#S/modern/ &izeS/7/ colorS/$roCn/ML2>5IX#M*ce&ta e&te font ?odern
LG2>5IX#MLGD.F>ML15M
LG1.3KM
LG=>?@M
6a'ina arat ca n Di'ura 4.5
3up cum a!i o$&erat mai &u&, e-i&t dou etic+ete al cror efect e&te acela%i) accentuarea
te-tului fie prin &crierea cu caractere italice fie cu caractere aldine.
3. #tic/ete !o&ice i etic/ete 'i.ice
#tic+etele L1M %i LIM &e nume&c etic+ete ,i&ice, iar L#?M %i L2>5.FAM etic+ete lo-ice.
#tic+etele de titluri de la L=1M la L=6M &unt, de a&emenea, etic+ete lo'ice. 3iferen!a dintre cele dou
tipuri de etic+ete e&te le'at de felul cum &unt ele e-ecutate de dier&ele tipuri de $roC&ere)
*&tfel, etic+etele fizice impun $roC&erului afi%area n formatul e-act, precizat prin intermediul
lor. 3ac $roC&erul nu &uport ace&t format, etic+etele &unt i'norate.
2pre deo&e$ire de etic+etele fizice, cele lo'ice la& $roC&erului li$ertatea de a ale'e cel mai $un
mod de a ndeplini comanda tran&mi& prin etic+eta. 3e e-emplu, efectul etic+etei L#?M e&te, n cele
mai multe $roC&ere, &crierea te-tului cu caractere italice. >otu%i, dac un anumit tip de $roC&er nu
&uport ace&t format de caractere, a accentua totu%i te-tul ntr,un alt mod, cel mai $un de care di&pune.
*lte etic+ete lo'ice utilizate n documentele =>?@ &unt)
5C7T(9 5JC7T(9 9citation; #tic+et folo&it pentru in&erarea unui citat. 3e o$icei, citatul e&te
afi%at cu caractere italice.
5CB6(9 5JCB6(9 9code; #tic+ete folo&ite pentru in&erarea n te-t a unor &ecen!e de cod
&cri&e ntr,un lim$a" de pro'ramare. En 'eneral &ecen!ele de cod &unt afi%ate cu fonturi 0ourier.
56*A9 5J6*A9 9definition; #tic+eta e&te folo&it pentru a in&era n te-t defini!ia unor termeni.
#&te util la crearea inde-ului &au 'lo&arului unui document.
5K469 5JK469 9ke$board; *cea&t etic+et lo'ic &e folo&e%te pentru a indica un te-t care
urmeaz a fi introdu& de la ta&tatur, ca n urmtorul e-emplu)
6entru a para&i pro'ramul ta&tati LX13MTuitLGX13M
5S.MP9 5JS.MP9 9sample; #&te o etic+et lo'ic folo&it pentru a in&era o mo&tr de te-t.
5TT9 5JTT9 9telet$pe; *cea&t etic+et &e folo&e%te pentru a afi%a te-tul inclu& ntre etic+ete cu
fonturi monospaiate. >ipul de font mono&pa!iat 9cum e&te de e-emplu 0ourier; are proprietatea c
fiecrui caracter i &e rezer acela%i numr de pi-eli pe ecran. *&tfel, caracterul /i/ a aea alocat tot
at(ta &pa!iu pe ecran ca %i caracterul /4/)
/0ourier/ e&te un font mono&pa!iat.
?ai tre$uie precizat %i faptul c utilizarea unora dintre etic+etele de formatare a fonturilor a%a
cum au fo&t prezentate ele n ace&t capitol tinde & fie nlocuit cu foile de &tiluri 9Cascade +t$le +heets;
de&pre care om or$i ntr,un capitol iitor.
4. -e.umat
6entru a &ta$ili a&pectul unei anumite &ecen!e de te-t acea&ta e&te inclu& ntre etic+etele
6D.F>M LGD.F>M conform &inta-ei)
LD.F> &izeS/numar/ colorS/R5A1 &au numeVculoare/ faceS/tipVfont/M te-t LGD.F>M
6entru a &eta a&pectul te-tului n toat pa'ina 4e$ &e folo&e%te etic+eta L1*2#D.F>M conform
&inta-ei)
L1*2#D.F> &izeS/numar/ colorS/R5A1 &au numeVculoare/ faceS/tipVfont/M
*ccentuarea te-tului &e poate face folo&ind dier&e etic+ete pentru &crierea cu caractere aldine, cu
caractere italice, cu caractere mai mari &au mai mici dec(t dimen&iunea curent a fonturilor.
#tic+etele &unt de dou tipuri) fizice %i lo'ice, etic+etele fizice fiind orientate ctre a&pectul
te-tului iar cele lo'ice ctre &emnifica!ia te-tului n cadrul documentului.
). Test
1. &entru a stabili tipul de font pentru 6ntreaga pagin "eb se folose7te eticheta4
a; L3#D*7@>M
a; L1*2#D.F>M
$; L>*5A#>M
&entru a stabili tipul de font cu care se face afi7area unui text se folose7te atributul4
a; c+aracter
a; tIpe
$; face
Cnul dintre exemplele urmtoare este incorect) Care9
a; LD.F> faceS/arial/M
a; LD.F> faceS/arial, erdana/M
$; LD.F>faceS/erdana/M
Ce reali8ea8 urmtoarea etichet9
LD.F> &izeS/Y1/M
a; *fi%eaz te-tul cu fonturi de mrime 1.
a; *fi%eaz pe pa'in te-tul /Y1/.
$; *fi%eaz te-tul cu fonturi de dimen&iune mai mare cu un punct dec(t dimen&iunea
curent.
:n afara etichetei L1M ce alt etichet se mai folose7te pentru a scrie un text cu caractere aldine9
a; L3*5XM
a; L2>5.FAM
$; L1IAM
5tichetele LIM 7i L#?M reali8ea84
a; &crierea te-tului cu caractere italice
a; in&erarea unei ima'ini
$; &crierea te-tului cu caractere mai mici dec(t cele curente
Ce este incorect 6n urmtorul exemplu9
LD.F> faceS/arial, erdana, time& neC roman/, &izeS/4/ML1Mte-tLGD.F>MLG1M
a; Fu &e pot preciza mai multe tipuri de fonturi ca alori pentru atri$utul face.
a; >ipurile &pecificate nu &e pot &crie cu caractere aldine
$; #tic+etele LD.F>M %i L1M nu &e nc+id corect.
&rin ce se aseamn etichetele L2>5.FAM 7i L#?M9
a; 2unt am(ndou etic+ete lo'ice.
a; 2unt am(ndou etic+ete fizice.
$; 2ere&c am(ndou la &crierea te-tului cu caractere italice.
Care este gre7eala 6n urmtoarea construcie9
L1*2#D.F> faceS/arial/ &izeS/5/Mte-tLG1*2#D.F>M
a; L1*2#D.F>M nu e&te o etic+eta container
a; L1*2#D.F>M nu &uport atri$utul face
$; L1*2#D.F>M nu &uport atri$utul &ize
Ce efect are urmtoarea etichet9
LD.F>S/arial, erdana, time& neC roman/M
a; >e-tul &e afi%eaz cu toate cele trei tipuri de fonturi.
a; >e-tul &e afi%eaz cu primul tip de font, dintre cele trei, pe care l recunoa%te $roC&erul.
$; #tic+eta nu era nici un efect ntruc(t e&te incorect.
*onturi
1. $;
'. c;
+. c;
0. c;
1. $;
:. a;
<. c;
=. a;
>. a;
1@. $;
Capitolul 1
*oratarea te"tului
#tic+etele de&pre care om or$i n continuare nu &e mai refer la particularit!ile fonturilor ci la
felul n care poate fi ampla&at un te-t n cadrul pa'inii. Enainte de a di&cuta n amnunt de&pre
etic+etele care permit formatarea te-tului, & facem c(tea precizri priind felul cum &unt afi%ate
te-tele.
3up cum %ti!i, fi%ierele =>?@ &unt fi%iere te-t. *cea&ta n&eamn c atunci c(nd &ala!i fi%ierul
re&pecti, el e&te &alat numai ca te-t, deci $roC&erul nu poate recunoa%te %i e-ecuta dec(t &trict acele
comenzi prezute de etic+etele =>?@. 3in ace&t moti, trecerea la un r(nd nou, care n editorul de
te-t &e realizeaz prin ap&area ta&tei #F>#5, nu e&te recuno&cut de $roC&er)
7n alt a&pect e&te pla&area n te-t a &pa!iilor. 0+iar dac e!i introduce &pa!ii &uplimentare ntre
cuinte atunci c(nd &crie!i documentul =>?@ n editorul de te-t, $roC&erul a afi%a inaria$il un
&in'ur &pa!iu ntre dou cuinte.
*ce&ta e&te motiul pentru care fiecare dintre ace&te elemente de formatare a te-tului are o
etic+et proprie care indic $roC&erului cum anume & fac afi%area.
1. Trecerea !a un r7nd nou
>recerea la un r(nd nou &e realizeaz cu a"utorul etic+etei 54R9 9de la line break;. #tic+eta
L15M nu e&te o etic+et container. #a are rolul de a comunica $roC&erului c te-ul care urmeaz dup
etic+et a fi afi%at pe un r(nd nou a%a cum rezult din #-emplul 5.1.
("eplul 1. 1
L=>?@M
L=#*3M
L>I>@#Mte-t1LG>I>@#M
LG=#*3M
L1.3KM
1una ziuaL15M?a nume&c @uciaL15MInat &a con&truie&c o pa'ina 4e$L15M
LG1.3KM
LG=>?@M
*&pectul pa'inii de&cri&e n e-emplul de mai &u& e&te cel din Di'ura 5.1 .
#tic+eta L15M admite atri$utul clear care poate lua alorile left, ri'+t &au all.
En mod normal, la nt(lnirea etic+etei L15M linia curent de te-t e&te ntrerupt %i &e face trecerea
la o linie nou, ca %i la ac!ionarea ta&tei 5nter ntr,un editor de te-t. #-i&t n& &itua!ii c(nd dorim ca
linia & fie afi%at l(n' un anumit element 9o ima'ine, &au un ta$el, de e-emplu; care $loc+eaz partea
din &t(n'a &au din dreapta a liniei.
En ace&te cazuri putem folo&i atri$utul clear al etic+etei L15M ca n #-emplul 5.2. 6ute!i o$&era
efectul atri$utului clear al etic+etei L15M n Di'ura 5.2.
("eplul 1. '
L=>?@M
L=#*3M
L>I>@#Mte-t2LG>I>@#M
LG=#*3M
L1.3KM
LI?A &rcS/..GIma'iniGtoad."p'/ ali'nS/left/M
*ce&t te-t a fi afi&at intre ima'ine &i mar'inea dreapta a documentului.
L15 clearS/left/M*ce&t te-t a fi afi&at &u$ ima'ine, aliniat &tan'a. Intre ace&t te-t &i dreapta
ima'inii a e-i&ta un &patiu 'ol.
LG1.3KM
LG=>?@M
2. Tit!uri!e 8Headin&s9
7tilizarea titlurilor e&te "u&tificat de neoia de a &u$linia prin format &tructura lo'ic a unui
document, dar, nu n ultimul r(nd, %i de monotonia la care e-pune un te-t lun', lip&it de aria!ie n
a&pect. Dire%te c un a&emenea te-t &f(r%e%te prin a o$o&i cititorul 4e$, o$i%nuit cu te-te &curte %i
concentrate.
3in ace&t moti &e recomand /&par'erea/ te-telor mai lun'i %i or'anizarea lor n &ecen!e mai
&curte, marcate de titluri %i &u$titluri, or'anizate ierar+ic, pe niele.
>itlurile dintr,un document =>?@ &unt marcate cu a"utorul etic+etelor 5H19, 5H'9, 5H+9,
5H09, 5H19, 5H:9. #le &unt etic+ete container, deci nece&it etic+eta core&punztoare de nc+idere.
#tic+eta L=1M define%te titlul de dimen&iunea ma-im, iar L=6M pe cel de dimen&iune minim.
.ten#ieH
3e%i &tandardul =>?@ nu interzice utilizarea n orice ordine a titlurilor, e&te de preferat ca
ace&tea & fie folo&ite n ordinea /normal/, pro're&i, fr a &ri pe&te reun niel 9de pild de la =1
direct la =5;, pentru a eita eentualele pro$leme la conertirea te-tului n alte tipuri de fi%iere.
En #-emplul 5.3 om folo&i toate cele %a&e etic+ete pentru titluri pentru a face o compara!ie cu
dimen&iunea &tandard a te-tului. 6ute!i o$&era efectul ace&tor etic+ete n Di'ura 5.3.
("eplul 1. +
L=>?@M
L=#*3M
L>I>@#Mte-t3LG>I>@#M
LG=#*3M
L1.3KM
L=1M>itlu =1LG=1M>e-t normal
L=2M>itlu =2LG=2M>e-t normal
L=3M>itlu =3LG=3M>e-t normal
L=4M>itlu =4LG=4M>e-t normal
L=5M>itlu =5LG=5M>e-t normal
L=6M>itlu =6LG=6M>e-t normal
LG1.3KM
LG=>?@M
#&te de men!ionat o proprietate intere&ant a etic+etelor de titluri, %i anume aceea c un te-t &cri&
pe aceea%i linie cu un titlu e&te afi%at n pa'in pe r(ndul urmtor titlului, l&(ndu,&e o linie li$er ntre
titlu %i te-t, de%i nu e&te prezent nici una dintre etic+etele L15M &au L6M.
#tic+etele de titlu accept atri$utul ali-n cu alorile left, center %i ri'+t pentru alinierea titlului
$locului de te-t la &t(n'a 9n mod pre&ta$ilit;, n centru %i re&pecti la dreapta. Di'ura 5.4 red a&pectul
pa'inii de&crie de documentul din #-emplul 5.4 care ilu&treaz modul de aliniere al titlurilor.
("eplul 1. 0
L=>?@M
L=#*3M
L>I>@#Mte-t4LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M>itluriLG=1ML=5M
L=1 ali'nS/center/M
>itlu de marime 1 aliniat in centru
LG=1M
L=2 ali'nS/ri'+t/M
>itlu de marime 2 aliniat la dreapta
LG=2M
L=4M
>itlu de marime 4 aliniat la &tan'a
LG=4M
LG1.3KM
LG=>?@M
3. :ara&ra'e!e
>recerea la un nou para'raf n cadrul te-tului &e realizeaz cu a"utorul etic+etei 5P9 5JP9.
*cea&t etic+et comunic $roC&erului & in&ereze o linie li$er n te-t %i & nceap o nou linie.
#tic+eta L6M e&te o etic+et container dar prezen!a etic+etei de nc+idere LG6M e&te op!ional n anumite
&itua!ii. 3ac ea e&te prezent, indic $roC&erului & in&ereze o linie li$er %i dup $locul de te-t
cuprin& ntre cele dou etic+ete.
#tic+eta L6M admite atri$utul ali-n cu cele trei alori ale ace&tuia) left, center %i ri'+t, care permit
alinierea te-tului la &t(n'a, centrat re&pecti la dreapta.
#-emplul 5.5 ilu&treaz cele trei modalit!i de aliniere a te-tului.
("eplul 1. 1
L=>?@M
L=#*3M
L>I>@#Mte-t5LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M6ara'rafeLG=1ML=5M
L6M *ce&ta e&te un para'raf aliniat la &tan'a.
L6 ali'nS/ri'+t/M *ce&ta e&te un para'raf aliniat la dreapta.
L6 ali'nS/center/M *ce&ta e&te un para'raf aliniat la centru.
LG1.3KM
LG=>?@M
3in Di'ura 5.5 care red a&pectul pa'inii de&cri&e n e-emplu &e poate o$&era c alinierea la
&t(n'a e&te implicit 9nu mai tre$uie &pecificat ali'nS/left/;. 2e mai poate o$&era c nu a fo&t folo&it
etic+eta de nc+idere a para'rafelor, deoarece la nt(lnirea unei noi etic+ete L6M ec+iul para'raf &e
con&ider nc+i&. >otu%i, prezen!a &au a$&en!a etic+etei de nc+idere a para'rafului atunci c(nd e&te
prezent atri$utul ali'n tre$uie &ta$ilit cu 'ri", pentru a nu o$!ine rezultate neconforme cu dorin!ele
dumneaoa&tr.
En #-emplul 5.6 dorim & aliniem un nou para'raf n dreapta pa'inii, iar te-tul de pe r(ndul
urmtor para'rafului, care e&te introdu& prin etic+eta L15M, & fie &cri& normal, de la captul din &t(n'a
al pa'inii.
("eplul 1. :
L=>?@M
L=#*3M
L>I>@#Mte-t6LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M6ara'rafeLG=1ML=5M
*ce&t te-t e&te &cri& normal, incepand e la mar'inea din &tan'a.
L6 ali'nS/ri'+t/M*ce&t te-t e&te aliniat la dreapta
L15M7nde e&te afi&at ace&t te-t<
LG1.3KM
L=>?@M
3in Di'ura 5.6 &e poate o$&era c afi%area nu &,a fcut conform inten!iilor noa&tre. ?otiul e&te
faptul c etic+eta
L6 ali'nSZri'+tZM nu are etic+eta de nc+idere LG6M, %i prin urmare efectul &u &e prelun'e%te
p(n la nt(lnirea unei alte etic+ete L6M.
3ac e!i nc+ide para'raful n mod e-plicit cu a"utorul etic+etei de nc+idere, nainte de trecerea
la o linie nou, efectul a&upra te-tului a fi cel dorit a%a cum rezult din Di'ura 5.7.
3e%i aparent etic+etele L15M %i L6M au un efect a&emntor, %i anume trecerea la o linie nou, ele
nu &unt e-ecutate la fel. L15M comunic $roC&erului unde &e nc+eie o linie, n reme ce L6M i
impune & la&e o linie li$er %i & treac la un nou para'raf. 3ac folo&im atri$utul ali'n al etic+etei
L6M n &itua!iile c(nd dup para'raf e&te introdu& un alt element n pa'in e&te recomandat nc+iderea
n mod e-plicit a etic+etei re&pectie.
4. :re'ormatarea textu!ui
*%a cum am precizat la nceputul capitolului, atunci c(nd edita!i documentul =>?@ cu a"utorul
unui editor de te-t, indiferent c(te &pa!ii e!i l&a ntre cuinte &au ntre liniile de te-t, $roC&erul a
afi%a te-tul inaria$il cu un &in'ur &pa!iu ntre cuinte %i a a"u&ta lun'imea liniilor n func!ie de
mrimea fere&trei. 0u alte cuinte, orice &pa!ii &au linii li$ere &uplimentare or fi i'norate de ctre
$roC&er) *%a cum am zut mai &u&, trecerea la o linie nou &e realizeaz cu a"utorul etic+etei L15M iar
in&erarea unei linii li$ere &e face cu a"utorul etic+etei L6M.
#-i&t, n&, %i o etic+et care impune $roC&erului & afi%eze te-tul ntocmai cum a fo&t el
formatat n documentul =>?@. #&te or$a de&pre etic+eta 5PR(9 5JPR(9.
#tic+eta L65#M permite preformatarea te-tului %i men!ine &pa!ierea %i alinierea te-tului a%a cum a
fo&t fcut n documentul &ur& =>?@. #tic+eta de nc+idere LG65#M e&te o$li'atorie.
#-emplul 5.7 ilu&treaz modul cum poate fi folo&it etic+eta L65#M. *&pectul pa'inii de&cri&e n
ace&t document e&te cel din Di'ura 5.8.
>e&ta!i e-emplul folo&ind etic+eta L65#M iar apoi elimina!i,o, pentru a o$&era mai $ine efectul
&u.
("eplul 1. <
L=>?@M
L=#*3M
L>I>@#Mte-t7LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M>e-tul preformatatLG=1ML=5M
*ce&ta e&te un te-t normal L6M
.rar)
@uni
8)00 5omana
9.00 ?atematica
10)00 Aeo'rafie
11.00 I&torie
12.00 DizicaL6M
*ce&ta e&te te-tul de mai &u& preformatat
L65#M
.rar)
@uni
8)00 5omana
9.00 ?atematica
10)00 Aeo'rafie
11.00 I&torie
12.00 Dizica
LG65#M
LG1.3KM
LG=>?@M
). Centrarea textu!ui
*%a cum am zut mai &u&, afi%area te-tului centrat n pa'in &e poate face cu a"utorul etic+etei
L6M a(nd atri$utul ali'n &etat la aloarea /center/.
. alt po&i$ilitate de a realiza ace&t lucru e&te de a utiliza o etic+et dedicat, incluz(nd te-tul
ntre etic+etele
5C(AT(R9 5JC(AT(R9. #tic+eta L0#F>#5M e&te o etic+et container, prezen!a etic+etei de
nc+idere fiind o$li'atorie.
#-emplul 5.8 realizeaz centrarea unui te-t.
("eplul 1. =
L=>?@M
L=#*3M
L>I>@#Mte-t8LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M0entrarea te-tului LG=1ML=5M
L0#F>#5M
*ce&ta e&te un te-t centrat. *ce&ta e&te un te-t centrat. *ce&ta e&te un te-t centrat. *ce&ta e&te un
te-t centrat. *ce&ta e&te un te-t centrat. *ce&ta e&te un te-t centrat. *ce&ta e&te un te-t centrat. *ce&ta
e&te un te-t centrat.
LG0#F>#5M
LG1.3KM
LG=>?@M
*&pectul pa'inii de&cri&e n e-emplul de mai &u& e&te cel din Di'ura 5.9.
+. 1'iarea textu!ui pe o sin&ur* !inie
En cazul c(nd &e dore%te afi%area unui te-t pe o &in'ur linie, c+iar dac ace&t lucru n&eamn
dep%irea mar'inii fere&trei %i derularea ace&tuia pe orizontal, &e include $locul de te-t ntre etic+etele
5AB4R9 5JAB4R9.
*cea&t etic+et mpiedic $roC&erul & limiteze lun'imea liniei la dimen&iunea fere&trei.
#-emplul 5.9 ilu&treaz folo&irea etic+etei LF.15M, pa'ina a(nd a&pectul din Di'ura 5.10.
("eplul 1. >
L=>?@M
L=#*3M
L>I>@#Mte-t9LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M>e-tul pe o &in'ura linie LG=1ML=5M
LF.15M
*ce&ta e&te un te-t care a fi afi&at pe o &in'ura linie, c+iar daca depa&e&te dimen&iunile unei
fere&tre o$i&nuite. 6uteti erifica ace&t fapt prin reducerea dimen&iunilor fere&trei $roC&erului.
LGF.15M
LG1.3KM
LG=>?@M
,. $!ocu! 56789
. alt modalitate de delimitare %i de formatare a unui $loc de te-t e&te folo&irea etic+etei
container 56789 5J6789. 6rezen!a etic+etei de nc+idere e&te o$li'atorie.
#tic+eta L3IUM realizeaz diizarea unui document =>?@ n &ec!iuni di&tincte, diiziune n care
pot fi inclu&e, pe l(n' te-t, %i alte elemente) le'turi, ima'ini, formulare. 0a %i n cazul etic+etei pentru
introducerea para'rafelor, etic+eta L3IUM admite atri$utul ali-n, pentru alinierea te-tului. Ualorile
po&i$ile ale ace&tui atri$ut, de"a cuno&cute, &unt)
left , aliniere la &t(n'a
center , aliniere la centru
ri'+t , aliniere la dreapta
*linierea precizat de atri$utul ali'n al $locului are efect a&upra tuturor elementelor inclu&e n
$locul L3IUM. 1locul L3IUM admite %i atri$utul noFrap, care interzice ntreruperea r(ndurilor de
ctre $roC&er)
En documentul de&cri& n #-emplul 5.10 e&te ilu&trat utilizarea ace&tei etic+ete. 6a'ina a aea
a&pectul redat n Di'ura 5.11.
("eplul 1. 1@
L=>?@M
L=#*3M
L>I>@#Mte-t10LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M1locul diLG=1ML=5M
*cea&ta linie e&te o linie de te-t normala.
L3IU ali'nS/ri'+t/M
*cea&ta e&te prima &ectiune a te-tului, aliniata dreapta.L15M
LG3IUM
L3IU ali'nS/center/M
*cea&ta e&te a doua &ectiune a te-tului, aliniata central.L15M
LG3IUM
L3IU ali'nS/left/M
*cea&ta e&te a treia &ectiune a te-tului, aliniata &tan'a.L15M
LG3IUM
LG1.3KM
LG=>?@M
3. Linii ori.onta!e
Entr,o pa'ina 4e$ pot fi in&erate linii orizontale care au rolul de a delimita diferitele zone ale
pa'inii &au de a m$unt!i a&pectul ei e&tetic. *ce&t lucru &e face cu a"utorul etic+etei 5HR9. #tic+eta
L=5M nu e&te o etic+et container deci nu e-i&t o etic+et de nc+idere.
6entru a confi'ura o linie orizontal &e utilizeaz urmtoarele atri$ute ale etic+etei L=5M)
ali-n , permite alinierea liniei orizontale. Ualorile po&i$ile &unt left, center %i ri'+t
Fidt) , &pecific lun'imea liniei , lun'imea poate fi &ta$ilit n pi-eli &au n procente din l!imea
ecranului.
si&e , &pecific 'ro&imea liniei, e-primat n pi-eli
color , permite definirea culorii liniei
*tri$utele etic+etei L=5M &unt ilu&trate n #-emplul 5.11.
("eplul 1. 11
L=>?@M
L=#*3M
L>I>@#Mte-t11LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M @inii orizontale LG=1M
@inie aliniata la &tan'a, lun'ime 100:, 'ro&ime 2 L=5M
@inie aliniata in centru , lun'ime 50:, 'ro&ime 5 pi-eli.
L=5 ali'nS/center/ Cidt+S/50:/ &izeS/5/ colorS/$lacJ/M
@inie aliniata la dreapta , lun'ime 150 de pi-eli, 'ro&ime 12 pi-eli , de culoare ro&ie.
L=5 ali'nS/ri'+t/ Cidt+S150 &izeS12 colorS/red/M
LG1.3KM
LG=>?@M
3in Di'ura 5.12 care red a&pectul pa'inii de&cri&e n e-emplul anterior &e poate o$&era c
&impla prezen! a etic+etei L=5M fr nici un fel de atri$ute duce la afi%area unei linii predefinite, de
lun'ime e'al cu 100: din pa'in %i 'ro&imea e'al cu 2 pi-eli.
*tri$utul color al etic+etei L=5M nu e&te &uportat de $roC&erul Fet&cape.
En e-emplul urmtor 9#-emplul 5.12; om ilu&tra modul n care etic+eta L3IUM aliniaz
elementele con!inute n interiorul &u, n cazul no&tru te-t %i linii orizontale. 6a'ina de&cri& n ace&t
e-emplu a aea a&pectul din Di'ura 5.13.
("eplul 1. 1'
L=>?@M
L=#*3M
L>I>@#Mte-t12LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M@inii orizontaleLG=1ML=5M
@inia de mai "o& e&te aliniata la &tan'a
L=5 &izeS/3/ colorS/$lue/ Cidt+S/40:/ ali'nS/left/M
@iniile de mai "o& &unt aliniate la centru cu a"utorul $locului 3IU
L3IU ali'nS/center/M
@inii aliniate la centru
L=5 &izeS/10/ colorS/cIan/ Cidt+S/50:/M
L=5 &izeS/5/ colorS/naI/ Cidt+S/400/M
LG3IUM
LG1.3KM
L=>?@M
4. (nserarea unei adrese pota!e
3ac ntr,o pa'in 4e$ tre$uie inclu& o adre& po%tal, atunci putem folo&i etic+eta urmtoare)
5.66R(SS9 5J.66R(SS9.
#tic+eta L*335#22M e&te o etic+et lo'ic %i are drept efect, n cele mai multe $roC&ere,
afi%area te-tului cu caractere italice.
En #-emplul 5.13 e&te in&erat n pa'in o adre&, a&pectul pa'inii fiind cel din Di'ura 5.14.
("eplul 1. 1+
L=>?@M
L=#*3M
L>I>@#Mte-t13LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M *dre&a LG=1ML=5M
*dre&a firmei noa&tre e&te
L*335#22M
Aolden4e$ 0on&ult L15M
2tr. 6aradi&ului, Fr. 1L15M
1ucure&ti
LG*335#22M
LG1.3KM
LG=>?@M
1;. (nserarea unui citat
6entru a in&era un citat ntr,un te-t &e pot folo&i dou etic+ete, n func!ie de dimen&iunea citatului.
*&tfel, dac citatul dep%e%te c(tea linii, &e folo&e%te etic+eta 54LBCKLUBT(9
5J4LBCKLUBT(9.
#fectul ace&tei etic+ete e&te afi%area indentat a te-tului cuprin& ntre etic+eta de nceput %i cea de
&f(r%it 9n ma"oritatea $roC&erelor; &au afi%area ace&tuia cu caractere italice 9rareori;.
3ac dorim ca ntr,un te-t & citam un termen, titlul unei lucrri &au & dm o referin!, putem
include te-tul re&pecti ntre etic+etele 5C7T(9 5JC7T(9.
En cele mai multe dintre $roC&ere, te-tul inclu& ntre etic+etele L0I>#M a fi afi%at cu caractere
italice.
#-emplul 5.14 ilu&treaz modul de folo&ire al celor dou etic+ete. 6a'ina de&cri& n e-emplu are
a&pectul din Di'ura 5.15.
("eplul 1. 10
L=>?@M
L=#*3M
L>I>@#Mte-t14LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/MIn&erarea unui citatLG=1ML=5M
>e-tul de mai "o& e&te un citat
[email protected][7.>#M
6ro$a$ilitatea ca o felie de paine un&a cu unt &a cada pe coor cu fata un&a in "o& e&te direct
proportionala cu aloarea coorului
[email protected][7.>#M
0itatul de mai &u& face parte din L0I>#M@e'ile lui ?urp+ILG0I>#M
LG1.3KM
LG=>?@M
11. (nserarea caractere!or specia!e
3e%i e&te impropriu & numim caracterul /$lanJ/ &au space un caracter &pecial, a(nd n edere
frecen!a cu care e&te folo&it, totu%i ace&ta, ca %i alte caractere, e&te in&erat n pa'in cu a"utorul unei
comenzi &peciale) comanda M 9comanda amper&and;.
*%a cum %ti!i de"a, indiferent c(te &pa!ii om introduce atunci c(nd editm documentul =>?@,
$roC&erul le a i'nora %i a afi%a cuintele cu un &in'ur &pa!iu ntre ele. 6entru a for!a introducerea
&pa!iilor &uplimentare &e folo&e%te comanda \n$&p] 9no break space;.
.ten#ie
0omanda ncepe cu &im$olul M 9amper&and; %i &e termin cu N 9punct %i ir'ul;.
En #-emplul 5.15 e&te ilu&trat modul cum pot fi &pa!iate cuintele folo&ind comanda \n$&p]
("eplul 1. 11
L=>?@M
L=#*3M
L>I>@#Mte-t15LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/MIn&erarea caracterelor &pecialeLG=1ML=5M
LD.F> &izeS/2/ faceS/arial/M
0uintele\n$&p] \n$&p] \n$&p] din\n$&p] \n$&p] \n$&p] ace&t\n$&p] \n$&p] \n$&p]
te-t\n$&p] \n$&p] \n$&p] &unt\n$&p] \n$&p] \n$&p] de&partite\n$&p] \n$&p] \n$&p] de\n$&p]
\n$&p] \n$&p] 'rupuri\n$&p] \n$&p] \n$&p] de\n$&p] \n$&p] \n$&p] trei\n$&p] \n$&p] \n$&p]
&patii.
LGD.F>M
LG1.3KM
LG=>?@M
3up cum o$&era!i din Di'ura 5.16 cuintele &unt de&pr!ite prin trei &pa!ii n loc de unul &in'ur.
6ute!i adu'a oric(te &pa!ii dori!i n ace&t mod. 3e a&emenea, pentru a indenta un te-t, pute!i in&era la
nceputul fiecrei linii numrul de comenzi \n$&p] e'al cu numrul de &pa!ii cu care re!i & indenta!i
te-tul.
Iat mai "o& un ta$el cu comenzile nece&are pentru a in&era n te-t cele mai cuno&cute caractere.
Tabelul 1. 1

6enuir
e caracter
Repre&en
tarea -ra,ic%
Coand
a HTML
2pa!iu
li$er
\n$&p]
0opIri'+t ^ \copI]
>rademar
J
_ \R153]
5e'i&tere
d
`
\re'] &au
\R174]
?ai mic
dec(t
L \lt]
?ai mare
dec(t
M \'t]
*mper&a
nd
\ \amp]
A+ilimele / \Tuot]
0ent a \R162
7n &fert b \R188
.
"umtate
c \R189
>rei
&ferturi
d \R190
Arade e \R176
12. Su&estii pri"ind aspectu! textu!ui
*&pectul te-tului ntr,o pa'in 4e$ e&te e&en!ial pentru calitatea ace&teia. 7n te-t lizi$il, &cri& cu
caractere de dimen&iune potriit, $ine or'anizat %i a%ezat n pa'in a face din pa'ina dumneaoa&tr
un mediu acce&i$il %i prieteno& care l a &timula pe izitatorul ace&teia & parcur' cu plcere
informa!iile oferite.
Iat c(tea &faturi referitoare la a&pectul pa'inilor 4e$, menite & a"ute la crearea unor te-te
lizi$ile, c(t mai u%or de parcur& de ctre cititori.
Fu folo&i!i fonturi de dimen&iuni prea mici &au fonturi cu &erife, cum e&te >ime& FeC
5oman. 3e%i e&te tipul cel mai utilizat pentru pu$lica!iile tiprite, te-tele &cri&e cu >ime& FeC
5oman &unt mai 'reu de citit de pe monitor. 6refera!i tipurile *rial, Uerdana, =eletica.
Fu folo&i!i numai litere mari 9ma"u&cule;. >e-tele &cri&e cu ma"u&cule &unt mai 'reu de
citit.
Fu face!i e-ce& de caractere aldine 9n'ro%ate, bold;. @imita!i, la a accentua cuinte
&au por!iuni redu&e din te-t. 3e a&emenea, nu folo&i!i caractere cur&ie 9nclinate, &au italice; n
e-ce&.
Fu folo&i!i prea multe tipuri de fonturi %i nici tipuri de fonturi rare. Dolo&irea unui mare
numr de fonturi de dimen&iuni %i culori diferite a face ca pa'inile & arate ncrcate %i & fie 'reu
de citit. Dolo&irea tipurilor de fonturi rare aduce dup &ine ri&cul ca izitatorul & nu le ai$ in&talate
pe computerul propriu, a&tfel c te-tul a fi afi%at de $roC&er cu fonturile pre&ta$ilite.
Fu aran"a!i te-tul n pa'in pe dou coloane. *cea&ta e&te o practic o$i%nuit n ziare %i
rei&te dar nu e&te potriit ntr,o pa'in 4e$ deoarece for!eaz izitatorul ca odat a"un& la $aza
pa'inii & o deruleze din nou pentru a citi ce,a de,a dou coloan.
#&te $ine & folo&i!i fiecare etic+et n &copul pentru care a fo&t ea definit. Fu folo&i!i
etic+etele de titlu pentru a accentua anumite pr!i ale te-tului care nu &unt titluri. Fu folo&i!i
etic+eta L*335#22M pentru a in&era alte te-te dec(t adre&e &au etic+eta L0I>#M pentru a realiza
&crierea cu caractere italice a te-tului.
?otoarele de cutare inde-eaz pa'inile 4e$ %i n func!ie de elementele 9etic+etele; care &unt
inclu&e n ele iar folo&irea lor neadecat conduce la o inde-are eronat a pa'inii dumneaoa&tr.
?ulte motoare de cutare &caneaz pa'ina n cutarea titlurilor %i pe $aza lor con&truie&c o &c+i!
a pa'inii.
3ac e!i folo&i etic+etele de titlu pentru a accentua anumite pr!i ale te-tului 9opera!ie pe care o
pute!i realiza n mod corect folo&ind etic+eta LD.F>M; e!i oferi informa!ii eronate motoarelor de
cutare. En ace&t fel, &cad %an&ele ca pa'inile dumneaoa&tr & fie identificate %i citite de cei intere&a!i.
.ten#ieH
Fu uita!i c pa'inile or fi pu$licate pe 4e$, unde, pentru a,%i atin'e &copul, adic pentru a fi
citite, tre$uie mai nt(i de&coperite de cititori, cel mai frecent prin intermediul motoarelor de cutare.
13. -e.umat
1roC&erul afi%eaz te-tele cu c(te un &in'ur &pa!iu ntre cuinte %i nu recunoa%te &f(r%itul de linie
%i nceputul unei linii noi. #lementele de formatare a te-tului &e introduc n documentul =>?@ prin
intermediul unor etic+ete &pecifice)
trecerea la un r(nd nou) etic+eta L15M
L15 clearS/left, ri'+t, all/Mte-t
introducerea unui titlu) etic+etele L=1M , L=6M
L=n ali'nS/left, ri'+t, center/Mte-tLG=nM
introducerea unui para'raf) etic+eta L6M LG6M
L6 ali'nS/left, ri'+t, center/ noCrapMte-tLG6M
preformatarea te-tului) etic+eta L65#M LG65#M
L65#Mte-tLG65#M
centrarea te-tului) etic+eta L0#F>#5M LG0#F>#5M
L0#F>#5Mte-tLG0#F>#5M
afi%area te-tului pe o &in'ur line) etic+eta LF.15M LGF.15M
LF.15Mte-tLGF.15M
crearea unui diiziuni n te-t) etic+eta L3IUM LG3IUM
L3IU ali'nS/left, ri'+t, center/Mte-tLG3IUM
in&erarea unei linii orizontale) etic+eta L=5M
L=5 &izeS/aloare/ Cidt+S/aloare/ colorS/R5A1 &au numeVculoare/ ali'nS/left, ri'+t,
center/M
in&erarea unei adre&e) etic+eta L*335#22M LG*335#22M
L*335#22Mte-tLG*335#22M
in&erarea unui citat) etic+etele [email protected][7.>#M [email protected][7.>#M %i L0I>#M
LG0I>#M
[email protected][7.>#[email protected][7.>#M
L0I>#Mte-tLG0I>#M
in&erarea caracterelor &peciale prin comanda MN
14. Test
2. Care este rolul etichetei L15M9
a; >recerea la un r(nd nou
a; In&erarea unei linii li$ere n te-t
$; In&erarea unei linii orizontale
&entru ca broserul s afi7e8e textul a7a cum a fost el formatat 6n documentul #%M( se folose7te
eticheta4
a; L6M
a; L65#M
$; L3IUM
Ce se va afi7a 6n urmtorul exemplu9
L6M>e-t1
L6 ali'nS/ri'+t/M>e-t2
a; >e-t1 %i >e-t2 or fi aliniate la dreapta, cu o linie li$er ntre ele
a; >e-t1 a fi aliniat la &t(n'a, >e-t2 a fi aliniat la dreapta, cu o linie li$er ntre ele
$; >e-t1 %i >e-t2 or fi &cri&e pe aceea%i linie
&entru a scrie un titlu de dimensiune maxim folosim eticheta4
a; L=1M
a; L=6M
$; L=7M
&entru a afi7a un text pe o singura linie4
a; folo&im etic+eta L15M
a; folo&im etic+eta LF.15M
$; nu folo&im nici o etic+et
Care dintre urmtoarele etichete nu reali8ea8 centrarea textului9
a; L6 ali'nS/center/M>e-tLG6M
a; L0#F>#5M>e-tLG0#F>#5M
$; L3IUM>e-tLG3IUM
Ce reali8ea8 eticheta L*335#22M9
a; in&erarea unui linJ
a; in&erarea unei adre&e de e,mail
$; in&erarea unei adre&e po%tale
&entru a insera 6ntr!o pagin o linie ori8ontal standard folosim eticheta4
a; L=5M
a; L=5 Cidt+S/100/M
$; L=5 &izeS/1/M
5ticheta [email protected][7.>#M folose7te la4
a; indentarea te-tului
a; &crierea te-tului cu caractere italice
$; in&erarea unui citat n te-t
Care dintre aceste afirmaii este fals9
aD >oate &pa!iile %i liniile li$ere introdu&e n te-t la editarea documentului =>?@ &unt
afi%ate ntocmai de $roC&er)
aD 7n te-t &cri& pe aceea%i linie cu o etic+et de titlu e&te afi%at &u$ titlu, c+iar dac nu e&te
prezent etic+eta L15M.
bD 6entru a introduce &pa!ii &uplimentare n te-t &e folo&e%te comanda \n$&p]
*oratarea te"tului
1. a;
'. $;
+. $;
0. a;
1. $;
:. c;
<. c;
=. a;
>. c;
1@. a;
Capitolul :
Le-%turi 2lin;$uri3
Le-%turile 9link,urile; reprezint, poate, partea cea mai important a unei pa'ini 4e$. #le
tran&form un te-t o$i%nuit n +Iperte-t , un nou tip de te-t, diferit de cel din cla&icele pa'ini de carte,
care permite trecerea rapid de la o informa!ie aflat pe un anumit computer la alt informa!ie
memorat pe un alt computer localizat oriunde n lume.
1. 1dresa -L
6entru a &ta$ili o le'tur cu o alt pa'in 9un alt fi%ier; tre$uie & &pecificm adresa URL a
ace&tuia. 75@ e&te un acronim, de la Cniform Resource (ocator, %i reprezint adre&a de identificare a
unei re&ur&e 9a unui fi%ier; aflat pe calculatorul propriu &au pe orice alt calculator din lume conectat la
Internet. . adre& 75@ con&t dintr,un %ir de caractere care identific n mod unic o anumit re&ur&,
oferind informa!ii de&pre numele &ererului pe care e&te &tocat acea re&ur& precum %i de&pre
localizarea ei.
#-i&t mai multe etic+ete =>?@ care folo&e&c adre&a 75@ drept aloare pentru anumite atri$ute)
etic+etele care introduc le'turi, ima'ini &au formulare. >oate ace&tea folo&e&c aceea%i &inta- a adre&ei
75@ pentru a &pecifica loca!ia unei anumite re&ur&e, indiferent de tipul ace&teia.
2inta-a 'eneral a unei adre&e 75@ e&te)
sc)eaOJJserverP-a&daOportJcaleaPcatreP,isier
unde)
sc)ea , reprezint unul dintre protocoalele de tran&fer al informa!iilor, cum ar fi =>>6, D>6,
Aop+er, >elnet, etc.
serverP-a&da , reprezint identificatorul &ererului pe care e&te 'zduit fi%ierul re&pecti. *ce&t
identificator poate fi adre&a I6 a &ererului &au numele &u.
port , reprezint numrul portului de comunica!ie prin intermediul cruia $roC&erul &e
conecteaz la &erer. 2ererele de!in mai multe a&tfel de porturi, fiecare &erind unui alt tip de
comunica!ie) =>>6, D>6, po%t electronic, etc. 6ortul pre&ta$ilit n cazul tran&ferului prin =>>6 are
numrul 80. Fumrul portului tre$uie precizat numai n cazul c(nd ace&ta e&te diferit de 80.
caleaPcatreP,isier , reprezint localizarea ierar+ic a fi%ierului n &i&temul de directoare de pe
&erer. *cea&ta con&t ntr,unul &au mai multe nume de&pr!ite prin caracterul /G/ 9slash;
Iat c(tea e-emple de adre&e 75@ mpreun cu e-plica!ii referitoare la &inta-a lor)
+ttp)GGCCC.autor.comGcarti.+tml
En ace&t e-emplu adre&a 75@ indic documentul =>?@ numit carti)html care &e afl directorul
rdcin al &ererului CCC.autor.com
+ttp)GGCCC.autor.comG
*cea&t adre& indic prima pa'in 9home page; a aceluia%i &erer.
+ttp)GGCCC.autor.com)8080G
#-emplul de mai &u& indic de a&emenea &pre prima pa'in a &ererului CCC.autor.com, dar
&pecific(nd %i numrul portului care e&te diferit de cel pre&ta$ilit.
+ttp)GGCCC.autor.comGcarti.+tmlRCe$de&i'n
En ace&t e-emplu e&te indicat calea &pre documentul =>?@ carti)html aflat pe acela%i &erer, dar
&pecific(ndu,&e o anumit &ec!iune a ace&tui document, &ec!iune denumit ebdesign.
En cazul c(nd fi%ierul &pre care e&te fcut le'tura e&te &tocat pe propriul calculator &e folo&e%te o
adre& 75@ de forma urmtoare)
,ileOJJserverJcaleaPcatreP,isier
unde)
server , reprezint numele computerului pe care e&te &tocat fi%ierul 9acela%i pe care ruleaz
$roC&erul;. En ace&t caz, $roC&erul a acce&a fi%ierul folo&ind facilit!ile o$i%nuite ale &i&temului de
operare de pe computerul propriu.
caleaPcatreP,isier , reprezint localizarea fi%ierului n &tructura de directoare conform re'ulilor
&i&temului de operare
Fumele computerului per&onal poate fi nlocuit cu numele 'eneric /local)ost/. En ace&t caz,
adre&a 75@ poate aea urmtoarea form)
,ileOJJlocal)ostJcaleaPcatreP,isier
3e e-emplu fi%ierul culori)html care e&te &alat n folderul de lucru "ork din M$ Documents pe
computerul per&onal a aea urmtoarea adre& 75@)
file)GGlocal+o&tG0)f?I 3ocument&f4orJfculori.+tml
>ermenul localhost poate fi omi&, deoarece e&te numele pre&ta$ilit al computerului propriu. En
ace&t caz e&te nece&ar prezen!a unui caracter /G/ &uplimentar)
file)GGG0)f?I 3ocument&f4orJfculori.+tml
En practic, atunci c(nd dorim & adre&m un fi%ier aflat pe computerul propriu putem omite prima
parte a adre&ei 75@ o$!in(nd urmtoarea form)
0)f?I 3ocument&f4orJfculori.+tml
.ten#ieH
2e poate o$&era c n cazul re&ur&elor &tocate pe &erere e-terne, numele directoarelor care fac
parte din calea ctre re&ur& &unt de&pr!ite prin caracterul /J/ 9slash;.
@a fi%ierele &tocate pe computerul propriu, directoarele %i &u$directoarele care formeaz calea
ctre fi%ier &unt de&pr!ite prin caracterul /Q/ 9backslash;. 0ele dou moduri de &criere &unt &pecifice
celor dou &i&teme de operare) 7FIW, re&pecti 3.2,4indoC&.
3eoarece marea ma"oritate a &ererelor 4e$ folo&e&c &i&temul de operare 7FIW, calea ctre
re&ur&ele &tocate pe ele &e &crie re&pect(nd conen!iile ace&tui &i&tem. ?ai mult, acea&t conen!ie &,a
e-tin& %i la adre&ele 75@ referite de pe &i&teme 4indoC&. *&tfel, dac dori!i & adre&a!i un fi%ier numit
foto);pg aflat pe di&cul C4, n M$ Documents, folderul 'magini pute!i folo&i adre&a 75@)
0)G?I 3ocument&GIma'iniGfoto."p'
2. 1drese a<so!ute i adrese re!ati"e
6entru a putea localiza un fi%ier n &tructura ierar+ic de directoare, n &copul de a &ta$ili o
le'tur ctre el, &e poate folo&i adre&area absolut% &au adre&area relativ%.
.dresa absolut% a unui fi%ier con!ine calea preci& %i complet ctre fi%ierul re&pecti pornind de
la (rful ierar+iei de directoare)
0)G?anual =>?@G#-empleGculori.+tml
Di%ierul culori)html &e afl pla&at pe di&cul C4, n directorul Manual #%M(, &u$directorul
5xemple.
.dresa relativ% a unui fi%ier precizeaz pozi!ia ace&tuia n raport cu documentul =>?@ din care
e&te apelat. Uom reeni cea mai "o& a&upra ace&tui &u$iect.
3. Sta<i!irea !e&*turi!or
6entru a in&era le'turi ntr,un document =>?@ folo&im etic+eta 5.9 5J.9.
#tic+eta L*M e&te o etic+et container, prezen!a etic+etei de nc+idere fiind o$li'atorie.
*tri$utul o$li'atoriu al etic+etei L*M e&te )re, 9#$pertext Reference; care prime%te ca aloare
adre&a 75@ a fi%ierului cu care dorim & &ta$ilim le'tura. *ce&t fi%ier poate fi un document =>?@, o
ima'ine &au un fi%ier de alt tip. 3ocumentul =>?@ n care e&te prezent le'tura &e nume%te surs% iar
fi%ierul ctre care e&te fcut le'tura &e nume%te #int%. 2inta-a etic+etei L*M e&te urmtoarea)
L* +refS/adre&aV75@/Mte-t &au ima'ineLG*M
Entre etic+etele L*M %i LG*M poate fi pla&at un te-t o$i%nuit &au o ima'ine. En mod pre&ta$ilit
te-tul inclu& ntre etic+etele L*M e&te afi%at &u$liniat %i de culoare al$a&tr iar ima'inile au un c+enar
de culoare al$a&tr. Dolo&irea etic+etei L*M im$ricat cu etic+ete de formatare a te-tului, fonturi, li&te
&au ta$ele &e face pla&(nd etic+eta L*M 6n interiorul ace&tora.
En ace&t &en&, &tandardul =>?@ con&ider incorect o con&truc!ie ca acea&ta)
L* +refS/adre&aV75@/MLD.F> faceS/tip/M@e'aturaLGD.F>MLG*M
En locul ei om folo&i con&truc!ia)
LD.F> faceS/tip/ML* +refS/adre&aV75@/M@e'aturaLG*MLGD.F>M
.ten#ieH
Fu e&te permi& im$ricarea mai multor etic+ete L*M.
En func!ie de localizarea !intei 9a re&ur&ei referite de le'tur; putem cla&ifica le'turile a&tfel)
le'turi n cadrul aceleia%i pa'ini 9ancore;
le'turi ctre o pa'in aflat n acela%i folder
le'turi ctre o pa'in aflat n alt folder
le'turi ctre pa'ini e-terne
4. 1ncore - !e&*turi n cadru! ace!eiai pa&ini
6entru a facilita nai'area ntr,o pa'in care con!ine un te-t de mari dimen&iuni &e pot in&era n
ace&ta anumite puncte de reper ctre care &e define&c le'turi. *ce&tea &e nume&c ancore.
6entru a pla&a o ancor &unt nece&are dou elemente)
1. Punctul &pre care dorim & facem le'tura.
*ce&ta &e define%te in&er(nd n punctul din pa'in dorit 9de o$icei n dreptul unui anumit element
din pa'in) un titlu, o ima'ine, o alt le'tur, un ta$el, etc.; etic+eta L*M, n&o!it de atri$utul nae
care prime%te ca aloare un nume de identificare atri$uit ancorei 9de e-emplu /numeVancora/ ;. 6rin
urmare, identificarea punctului &pre care &e face le'tura &e realizeaz a&tfel)
L* nameS/numeVancora/M LG*M
1. Le-%tura propriu$&is%R care &e define%te folo&ind atri$utul )re, al etic+etei L*M. En
e-emplul de mai &u&, ace&ta prime%te ca aloare /RnumeVancora/. 2ta$ilirea le'turii &e realizeaz
dup urmtoarea &inta-)
L* +refS/RnumeVancora/Mte-t e-plicatiLG*M
>e-tul e-plicati a fi afi%at n mod diferit, n format +IperlinJ, &u$liniat %i de culoare pre&ta$ilit
al$a&tr.
En momentul c(nd &e efectueaz clicJ cu mou&e,ul pe te-t e-plicati &e realizeaz un &alt n
cadrul pa'inii, $roC&erul afi%(nd partea din pa'in care ncepe de la elementul n dreptul cruia a fo&t
in&erat ancora.
.ten#ieH
6rezen!a &emnului S, pla&at naintea numelui ancorei, e&te o$li'atorie. *ce&ta indic $roC&erului
faptul c e&te or$a de&pre o le'tur intern, n cadrul pa'inii. En cazul n care &emnul e&te omi&,
$roC&erul a cuta ace&t nume n afara pa'inii, unde, eident, nu l a '&i.
6entru a introduce o le'tur ctre o ancor definit n alt document 9alt pa'in; aflat n acela%i
director, atri$utul +ref prime%te o aloare de forma)
+refS/numeVfi&ier.+tmlRnumeVancora/.
#-emplul 6.1 ilu&treaz cele dou &itua!ii. 6entru a e-emplifica modul n care poate fi in&erat o
ancor ntr,un alt document %i cum poate fi ea referit, am in&erat n documentul textB<)html ancora L*
nameS/citat/M.
,3 ("eplul :. 1
L=>?@M
L=#*3M
L>I>@#Mle'aturi1LG>I>@#M
LG=#*3M
L1.3KM
L* nameS/ancora1/MLG*M
L=1 ali'nS/center/M*ncore definite in acela&i documentLG=1ML=5M
L15M*L15M1L15M0L15M3L15M#
L15MDL15MAL15M=L15MIL15MB
L15MXL15M@L15M?L15MFL15M.
L15M6L15M5L15M2L15M>L15M7
L15MUL15M4L15MgL15MWL15M
L* +refS/Rancora1/M2u&LG*M
L15ML15M
L=1 ali'nS/center/ M*ncore definite in alt documentLG=1ML=5ML6M
0licJ
L* +refS/te-t14.+tmlRcitat/M*I0I LG*M
pentru a de&c+ide un document &ituat in alta pa'ina
LG1.3KM
LG=>?@M
*&pectul pa'inii de&cri&e n ace&t e-emplu e&te cel din Di'ura 6.1 .
Bbserva#ie
0on&truc!iile de mai "o& au acela%i rol, %i anume in&erarea unei ancore denumit /ancora1/ n
punctul din pa'in care con!ine elementul /#@#?#F>/.
L* nameS/ancora1/M#@#?#F>LG*M
L* nameS/ancora1/MLG*M#@#?#F>
En mod normal, etic+eta L*M fiind o etic+et container, ntre etic+etele de de&c+idere %i de
nc+idere tre$uie & fi'ureze un te-t. >otu%i, n e-emplul de mai &u&, dorind & in&erm o ancor n
dreptul titlului, am folo&it cea de,a doua con&truc!ie)
L* nameS/ancora1/MLG*M
L=1 ali'nS/center/M*ncore definite in acela&i documentLG=1M
?otiul e&te acela c e&te con&iderat o practic incorect includerea etic+etelor de titlu ntre
etic+etele L*M %i LG*M.
2e poate utiliza %i con&truc!ia urmtoare)
L=1 ali'nS/center/ML* nameS/ancora1/M*ncore definite in acela&i documentLG*MLG=1M
). Le&*tura c*tre o pa&in* a'!at* n ace!ai director 8'o!der9
6entru a realiza o le'tur ctre o pa'in aflat n acela%i director &e procedeaz a&tfel)
L* +refS/numeVfi&ier.+tml/Mte-t e-plicatiLG*M
unde)
+ref reprezint atri$utul care &ta$ile%te calea ctre !inta cu care &e face le'tura. 3ac fi%ierul !int
e&te n acela%i director, atri$utul prime%te ca aloare c+iar numele fi%ierului.
te-t e-plicati , reprezint te-tul pe care &e face clicJ cu mou&e,ul pentru a actia le'tura. 93e
e-emplu
/0licJ aici/ ;. *ce&t te-t e&te afi%at diferit fa! de re&tul te-tului , n 'eneral, &u$liniat %i de
culoare al$a&tr.
En #-emplul 6.2 e&te realizat o le'tur reciproc ntre dou pa'ini aflate n folderul de lucru
"ork, pa'ina a(nd a&pectul din Di'ura 6.2.
-3 ("eplul :. '
L=>?@M
L=#*3M
L>I>@#Mle'aturi2LG>I>@#M
LG=#*3M
L1.3KM
L=1M6a'ina 1 LG=1ML=5M
L* +refS/le'aturi3.+tml/M@inJ catre pa'ina 2 LG*M
LG1.3KM
LG=>?@M
2ala!i ace&t e-emplu cu numele legaturi>)html iar e-emplul urmtor 9#-emplul 6.3; cu numele
legaturiA)html.
)3 ("eplul :. +
L=>?@M
L=#*3M
L>I>@#Mle'aturi3LG>I>@#M
LG=#*3M
L1.3KM
L=1M6a'ina 2 LG=1ML=5M
L* +refS/le'aturi2.+tml/M@inJ catre pa'ina 1 LG*M
LG1.3KM
LG=>?@M
@a fel cum a!i procedat %i p(n acum, de&c+ide!i una dintre cele dou pa'ini cu $roC&erul %i
te&ta!i func!ionarea le'turii dintre ele.
*m$ele documente =>?@ tre$uie &alate n acela%i folder. Ue!i o$&era c atunci c(nd afla!i
n 6a'ina 1 %i face!i clicJ cu mou&e,ul pe te-tul @inJ catre 6a'ina 2 &e a de&c+ide cel de,al doilea
document =>?@ %i iner&, le'tura dintre cele dou pa'ini fiind a&tfel reciproc.
.ten#ieH
Fumele fi%ierelor care reprezint alori ale atri$utului +ref &unt case sensitive. *cela%i lucru &e
nt(mpl %i cu te-tul care de&emneaz alorile atri$utului name.
*cea&ta n&eamn c fi%ierul legaturi?)html e&te diferit de fi%ierul (egaturi?)html, iar ancora L*
nameS/ancora1/M e&te diferit de L* nameS/*ncora1/M
6entru a eita 're%elile, e&te recomandat & denumi!i toate fi%ierele &au numele pentru ancore
cu litere mici.
+. Le&*tura c*tre o pa&in* !oca!i.at* n a!t director 8'o!der9
3ac pa'ina cu care rem & facem le'tura &e afl pe acela%i calculator, dar ntr,un alt folder,
atunci pentru a preciza pozi!ia ei n &tructura de directoare &e poate folo&i adre&area relati &au
adre&area a$&olut.
*dre&area absolut% &e realizeaz preciz(nd calea 9path; complet, pornind de la directorul
rdcin, prin care &e poate a"un'e la fi%ierul de care rem & le'm pa'ina.
3e e-emplu, dac fi%ierul culoriB)html &e afl pe di&cul C4,n folderul M$ Documents, n folderul
"ork, o le'tur ctre el &e a face n modul urmtor)
L* +refS/0)G?I 3ocument&G4orJGculori1.+tmlM@inJLG*M
*dre&area relativ% precizeaz calea ctre documentul cu care facem le'tura pornind de la
documentul n care ne aflm. 6entru a urca un niel n &tructura de directoare &e folo&e%te %irul de
caractere /..G /
("eplu
2 pre&upunem c ne aflm ntr,un document =>?@ numit legaturi>)html pla&at n folderul de
lucru "ork. En afar de folderul "ork n care lucrm, n M$ Documents &e mai afl un folder, numit
'magini, ca n &tructura prezentat n 2c+ema 6.1.

3orim & realizm o le'tur cu un fi%ier numit trandafir)gif din folderul 'magini.
En ace&t caz, etic+eta L*M, pla&at n documentul legaturi>)+tml, a aea urmtoarea form)
L* +refS/..GIma'iniGtrandafir.'if/M3e&c+ide ima'ineaLG*M
2emnifica!ia e&te urmtoarea)
6rin folo&irea %irului de caractere /..G/ 9punct punct &la&+; &e urc un niel n ierar+ia de
directoare, n raport cu directorul curent. 6rin urmare, ntruc(t folderul curent, n care &e afl pa'ina de
pornire e&te
C42M$ Documents2"ork, prin utilizarea %irului de caractere /..G/ &e a"un'e n folderul printe, care
e&te C42M$ Documents) 3e aici &e continu calea n folderul 'magini, dup care &e &pecific numele
fi%ierului din ace&t folder cu care rem & &ta$ilim le'tura.
("eplu
2 pre&upunem c ne aflm n documentul legaturi>)html pozi!ionat ca n 2c+ema 6.2.
CO
CO
=or>
M? @ocuments
(ma&ini
!e&aturi2./tm!
tranda'ir.&i'
e
Sc/ema +.1

3orim & &ta$ilim o le'tur cu un fi%ier numit text>)html care &e afl n directorul 5xemple
9directorul printe al folderului no&tru, (egaturi;. *tunci referirea &e a face a&tfel)
L* +refS/..Gte-t2.+tml/M@inJ la te-tLG*M
*m urcat un niel n ierar+ie a"un'(nd n directorul 5xemple %i am &pecificat numele fi%ierului cu
care dorim & facem le'tura.
3ac fi%ierul text>)html &e afl cu dou niele mai &u& fa! de folderul n care lucrm, adic dac
&e afl n folderul Manual #%M(, atunci adre&area &e face a&tfel)
L* +refS/..G..Gte-t2.+tml/M@inJ la te-tLG*M
En 'eneral, de c(te ori e&te po&i$il, e&te de preferat & folo&i!i adre&area relati, pentru ca
documentele =>?@ & fie porta$ile 9mutarea lor & nu inalideze le'turile &ta$ilite ntre dier&e
documente;.
,. Le&*tura c*tre pa&ini externe
. le'tur ctre o pa'ina e-tern &e realizeaz &implu, prin utilizarea etic+etei L*M LG*M,
&pecific(nd adre&a 75@ a pa'inii ca aloare a atri$utului +ref a&tfel)
+refS/+ttp)GG75@Vpa'ina/
5eamintim c &pecificarea adre&ei 75@ &e poate face fie folo&ind numele &ererului pe care e&te
&tocat pa'ina fie adre&a I6 a ace&tuia. #ident, pentru ca linJ,ul & func!ioneze, tre$uie ca utilizatorul
& fie conectat la Internet 9lucru ala$il pentru toate le'turile e-terne;.
En #-emplul 6.4 e&te &ta$ilit o le'tur ctre pa'ina de &tart Ka+oo.
Le&aturi
CO
CO
Manua! HTML
M? @ocuments
#xemp!e
Sc/ema +.2
!e&aturi2./tm! e
i3 ("eplul :. 0
L=>?@M
L=#*3M
L>I>@#Mle'aturi4LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M@inJ catre Ka+oo.comLG=1ML=5M
L* +refS/+ttp)GGCCC.Ia+oo.com/M Ka+ooNLG*M
LG1.3KM
LG=>?@M
*&pectul pa'inii e&te cel din Di'ura 6.3.
7n atri$ut util al etic+etei L*M e&te title. *ce&ta determin apari!ia unei mici fere&tre 9tool tip; n
pa'ina 4e$ c(nd mou&e,ul &e afla pe o le'tur, ferea&tr n care e&te afi%at aloarea dat ace&tui
atri$ut, care are a&tfel menirea de a furniza informa!ii &uplimentare de&pre &emnifica!ia unei le'turi.
#-emplul 6.5 ilu&treaz utilitatea atri$utului title, a%a cum reie&e din Di'ura 6.4.
E3 ("eplul :. 1
L=>?@M
L=#*3M
L>I>@#Mle'aturi5LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M*tri$utul titleLG=1ML=5M
L* +refS/+ttp)GGCCC.'oo'le.com/ titleS/@e'atura catre Aoo'le.com/MAoo'leLG*M
LG1.3KM
LG=>?@M
3. 1!e&erea cu!ori!or pentru !e&*turi
*m mai di&cutat de&pre ace&t &u$iect %i la capitolul de&pre culori. En mod pre&ta$ilit 9default; &e
utilizeaz trei culori pentru le'turi)
culoare pentru le'turile nevi&itate 9nu &,a efectuat nici un clicJ pe ele; , al$a&tru
culoare pentru le'turile vi&itate 9&,a efectuat cel pu!in un clicJ pe ele; , iolet
culoare pentru le'turile active 9dea&upra crora &e afl mou&e,ul la un moment dat, dar nc nu
&,a efectuat clicJ; , ro%u
6entru a modifica dup preferin!e ace&te culori &e folo&e&c cele trei atri$ute ale etic+etei
L1.3KM)
lin; pentru le'turile neizitate]
vlin; pentru le'turile izitate]
alin; pentru le'turile actie.
Ualorile pe care le pot lua ace&te atri$ute &unt culori definite prin nume &au conform codului
+e-azecimal.
#-emplul 6.6 ilu&treaz modul cum pot fi modificate culorile le'turilor, a%a cum &e poate
o$&era din Di'ura 6.5 care red a&pectul pa'inii de&cri&e n e-emplu.
;3 ("eplul :. :
L=>?@M
L=#*3M
L>I>@#Mle'aturi6LG>I>@#M
LG=#*3M
L1.3K linJS/IelloC/ linJS/'reen/ alinJS/ma'enta/M
L=1 ali'nS/center/M2etarea culorilor pentru linJ,uriLG=1ML=5M
L15M'al$en pentru le'aturi, erde pentru le'aturi izitate &i ma'enta pentru le'aturi actieL15M
L* +refS/le'aturi2.+tml/M@inJ catre pa'ina 1 LG*ML15M
L* +refS/le'aturi3.+tml/M@inJ catre pa'ina 2 LG*M
LG1.3KM
LG=>?@M
4. ti!i.area potei e!ectronice 8e-mai!9
Entr,o pa'in 4e$ &e pot afla le'turi care permit lan&area n e-ecu!ie a aplica!iei de e-pediere a
me&a"elor electronice a celui care iziteaz pa'ina. Dc(nd clicJ pe te-tul care n&o!e%te le'tura,
pro'ramul de po%ta electronic al izitatorului pa'inii &e a de&c+ide automat, a(nd c(mpul adre&ei
de&tinatarului, />o)/ de"a completat cu adre&a de mail &pecificat n pa'in. 6entru a realiza ace&t lucru
&e folo&e%te comanda ailtoO atri$utul +ref primind o aloare ca mai "o&)
L* +refS/mailto)adre&aVe,mail/M
3ac pa'ina e&te izualizat cu $roC&erul Internet #-plorer iar izitatorul are in&talat un e,mail
mana'er, cum &unt de pild aplica!iile ?icro&oft .utlooJ &au .utlooJ #-pre&, actiarea le'turii a
determina de&c+iderea unuia dintre ace&te pro'rame. En cazul n care mana'erul de e,mail default e&te
de alt tip dec(t aplica!ia ?icro&oft, 9#udora, de e-emplu; acea&ta a porni de a&emenea automat, cu o
nou pa'in +end %i cu adre&a de&tinatarului pre,completat.
3ac pa'ina e&te izualizat n Fet&cape, &e a de&c+ide pro'ramul de po%t electronic
ncorporat n $roC&er)
En e-emplul urmtor 9#-emplul 6.7;, n momentul c(nd izitatorul pa'inii face clicJ pe te-tul
/>rimite!i un me&a"/, aplica!ia de po%t electronic e&te lan&at automat, prin intermediul &ericiului
mailto), iar c(mpul care tre$uie completat cu adre&a de mail a de&tinatarului me&a"ului e&te de
a&emenea completat automat cu adre&a autorhdomeniu.com a%a cum rezult din
Di'ura 6.6.
l3 ("eplul :. <
L=>?@M
L=#*3M
L>I>@#Mle'aturi7LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M#-pediere de me&a"e electronice
LG=1ML=5M
L* +refS/mailto)autorhdomeniu.com/ titleS/adre&a mea de mail/M
>rimiteti un me&a" LG*M
LG1.3KM
LG=>?@M
1;. Le&*turi c*tre 'iiere oarecare
. pa'in 4e$ poate con!ine le'turi nu doar ctre alte fi%iere =>?@, dar %i ctre fi%iere de orice
alt tip, aflate pe calculatorul propriu &au oriunde pe 4e$. 0a %i n cazul le'turilor cu alte pa'ini
9documente =>?@; om folo&i etic+eta L*M LG*M, a&tfel)
L* +refS/75@Vfi&ierVde&tinatie/Mte-t e-plicatiL*M
Fefiind or$a de&pre un fi%ier =>?@, $roC&erul nu a putea & l proce&eze, a&tfel c a actia
proce&ul de tran&fer &au de de&crcare 9donload;, urm(nd ca, dup tran&ferul inte'ral al fi%ierului,
utilizatorul & l de&c+id cu un pro'ram adecat.
En #-emplul 6.8, atunci c(nd &e efectueaz clicJ pe le'tur &e de&c+ide ca&eta de dialo' .ile
donload care permite)
&alarea fi%ierului pe di&c &au
de&c+iderea fi%ierului n loca!ia curent
3 ("eplul :. =
L=>?@M
L=#*3M
L>I>@#Mle'aturi8LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M@e'aturi catre fi&iere oarecareLG=1ML=5M
L* +refS/+tml.zip/M
@inJ catre fi&ierul doCnload.zip
LG*M
LG1.3KM
LG=>?@M
Di'ura 6.7 red efectul actirii unei le'turi ctre un fi%ier oarecare.
11. @esc/iderea pa&ini!or re'erite printr-o !e&*tur*
6a'ina nou, apelat prin actiarea unei le'turi &e poate de&c+ide n dou moduri, n raport cu
pa'ina &ur&)
n aceea%i ferea&tr
ntr,o ferea&tr nou
En mod pre&ta$ilit, le'turile de&c+id pa'ina pe care o refer n ferea&tra curent. *cea&ta
n&eamn c dac e!i face clicJ pe un linJ, noua pa'in &e a ncrca n locul pa'inii de"a de&c+i&e 9n
aceea%i in&tan! a $roC&erului;. 6entru a reeni la pa'ina anterioar tre$uie & ap&a!i $utonul 1ack al
$roC&erului.
*ce&t comportament &e poate &c+im$a cu a"utorul alorilor atri$utului tar-et, a&upra cruia om
reeni la capitolul Cadre.
Uom men!iona aici doar dou dintre ace&te alori, core&punztoare celor dou &itua!ii amintite.
6entru ca pa'ina apelat & &e de&c+id ntr,o ferea&tr nou, &e utilizeaz &inta-a 'eneric de mai
"o&, n care atri$utul tar'et are aloarea /V$lanJ/)
L* +refS/adre&aV75@/ tar'etS/V $lanJ/Mte-t e-plicatiLG*M
6entru ca pa'ina referit & &e de&c+id n aceea%i ferea&tr cu pa'ina &ur&, atri$utului i &e
a&ociaz aloarea /V&elf/)
L* +refS/adre&aV75@/ tar'etS/V&elf/Mte-t e-plicatiLG*M
Di'ura 6.8 red modul n care &e de&c+ide o pa'in ntr,o nou ferea&tr, a%a cum e&te precizat n
#-emplul 6.9.
n3 ("eplul :. >
L=>?@M
L=#*3M
L>I>@#Mle'aturi9LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M3e&c+iderea pa'inii in alta ferea&traLG=1M L=5M
6a'ina de mai "o& &e a de&c+ide intr,o ferea&tra noua
L6M
L* +refS/ta$el culori.+tml/ tar'etS/V$lanJ/M>a$elul culorilorLG*M
LG1.3KM
LG=>?@M
12. Crearea unei <are secundare de na"i&are
En foarte multe &ite,uri a!i o$&erat, pro$a$il, e-i&ten!a, n partea de "o& a pa'inii, a unui $loc de
te-t care con!ine le'turi ctre pa'inile care compun &ite,ul, le'turile fiind delimitate de mici linii
erticale, ca n e-emplul de mai "o&)
TCuloriT T*onturiT T4locuri de te"tT
7tilitatea ace&tei $are e&te eident le'at de facilitarea nai'rii n &ite, mai ale& n cazurile c(nd
dimen&iunea pa'inii dep%e%te un ecran. En ace&t caz, utilizatorul tre$uie & deruleze la citire pa'inile
pe ertical, a&tfel c linJ,urile de pe $ara de nai'are &uperioar nu mai &unt acce&i$ile.
. a&tfel de $ar &ecundar de nai'are &e poate realiza proced(nd ca n #-emplul 6.10. #ident,
le'turile or face referire la fi%ierele =>?@ dorite de dumneaoa&tr. . pa'in care con!ine o a&tfel
de $ar de nai'are a aea a&pectul din Di'ura 6.9.
o3 ("eplul :. 1@
L=>?@M
L=#*3M
L>I>@#Mle'aturi10LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M1ara de nai'areLG=1ML=5M
L=4 ali'nS/center/M
L* +refS/culori1.+tml/Mi0uloriiLG*M
L* +refS/fonturi1.+tml/MiDonturiiLG*M
L* +refS/te-t1.+tml/MiDormatarea te-tuluiiLG*M
LG=4M
LG1.3KM
LG=>?@M
1ara ertical in&erat ntre te-tele care trimit la pa'inile re&pectie e&te de o$icei pla&at pe
ta&tatur pe aceea%i ta&t cu caracterul /f/ 9backslash;. 3ac dori!i ca $ara & fac parte din te-tul acti,
o e!i in&era ntre etic+etele L*M %i LG*M, altminteri ea tre$uie pla&at n afara ace&tora, a&tfel)
iL* +refS/culori1.+tml/M0uloriLG*Mi
13. -e.umat
*dre&a 75@ con&t dintr,un %ir de caractere care identific n mod unic o anumit re&ur& oferind
informa!ii de&pre numele &ererului pe care e&te &tocat acea re&ur& %i de&pre localizarea ei n &tructura
de directoare de pe &erer.
@e'turile &e introduc ntr,un document =>?@ prin intermediul etic+etei container L*M LG*M
conform urmtoarei &inta-e 'enerale)
L* +refS/adre&aV75@/ nameS/nume/ titleS/te-t/ tar'etS/tinta/Mte-t &au ima'ineLG*M
En func!ie de locul unde e&te pla&at documentul referit e-i&t mai multe tipuri de le'turi)
@e'turi n cadrul aceleia%i pa'ini 9le'turi interne, ancore;. 6entru a crea o le'tur intern &unt
nece&ari doi pa%i) definirea numelui ancorei %i &ta$ilirea le'turii .
@e'turi cu pa'ini aflate n acela%i director. 6entru a &ta$ili o le'tur cu o pa'in aflat n acela%i
director &e &pecific drept aloare a atri$utului +ref c+iar numele fi%ierului =>?@.
@e'turi cu pa'ini aflate n alt director. 6entru a &ta$ili loca!ia documentului cu care facem
le'tura &e poate folo&i adre&area relati 9recomandat; &au adre&area a$&olut.
@e'turile e-terne. En cazul le'turilor e-terne, atri$utul +ref prime%te ca aloare adre&a 75@ a
pa'inii re&pectie.
2e pot &ta$ili %i le'turi ctre fi%iere oarecare 9nu neaprat documente =>?@;. @a actiarea unei
a&tfel de le'turi &e de&c+ide ferea&tra de donload a &i&temului.
0u a"utorul comenzii mailto) &e lan&eaz automat n e-ecu!ie aplica!ia de po%t electronic a
izitatorului pa'inii.
14. Test
3. Care dintre urmtoarele afirmaii este fals4
a; #tic+eta L*M &ere%te la &ta$ilirea unei le'turi n cadrul aceleia%i pa'ini
a; #tic+eta L*M &ere%te la &ta$ilirea unei le'turi ctre un fi%ier aflat pe acela%i calculator
$; #tic+eta L*M &ere%te la &crierea te-tului cu caractere *rial.
&entru a preci8a numele fi7ierului spre care se face legtura se folose7te atributul4
a; name
a; +ref
$; file
Care este gre7eala din urmtoarea construcie9
L=2ML* nameS/R'r/MAre&ealaLG*ML=2M
a; Fu e&te nici o 're%eala.
a; *r fi tre$uit formulat)
L=2ML* nameS/'r/MAre&ealaLG*MLG=2M
$; *r fi tre$uit formulat)
L* nameS/R'r/MLG*ML=2MAre&ealaLG=2M
Ce reali8ea8 exemplul urmtor9
L* nameS/&ectiunea1/M2ectiunea 1LG*M
a; In&ereaz o ancor n pa'in %i define%te numele ei.
a; 2ta$ile%te o le'tur n cadrul pa'inii.
$; 2ta$ile%te o le'tura la fi%ierul sectiuneaB)html.
.i7ierul contact)html, referit 6n legtura de mai ;os4
L* +refS/..Gcontact.+tml/M0ontactLG*M
este locali8at 6n4
a; acela%i director ca %i fi%ierul curent
a; directorul printe al fi%ierului curent
$; directorul aflat cu dou niele mai &u& dec(t directorul curent
:n documentul culori)html am inclus urmtoarea ancor4
L* nameS/fundal/MLG*M
:n acest ca8, construcia corect pentru a face legtura spre ea din cadrul unui alt document aflat
6n acela7i director este4
a; L* +refS/Rfundal/M1acJ'roundLG*M
a; L* +refS/culori.+tmlVfundal/M1acJ'roundLG*M
$; L* +refS/culori.+tmlRfundalM1acJ'roundLG*M
Care este aspectul unei legturi 6ntr!un text, 6n mod prestabilit EdefaultD9
a; de culoare al$a&tr %i &u$liniat
a; de culoare ro%ie
$; &u$liniat
Care dintre urmtoarele afirmaii este fals9
a; Fu e&te permi& im$ricarea mai multor etic+ete L*M.
a; Fu e&te permi& &c+im$area culorilor le'turilor.
$; Fu e&te permi& referin!a la alte fi%iere dec(t fi%ierele =>?@.
&entru a stabili o legtura cu site!ul extern CCC.$ooJ&.com folosim construcia4
a; L* +refS/+ttp)GGCCC.$ooJ&.com/M
a; L* +refS/file)GGCCC.$ooJ&.com/M
$; L* +refS/$ooJ&.com/M
.ie urmtoarea etichet inserat 6n pagin4
L* +refS/mailto)utilizatorhdomeniu.comM2end mailLG*M
Dac se execut click pe textul /2end mail/)
a; 2e de&c+ide pa'ina CCC.domeniu.com.
a; 2e de&c+ide pro'ramul de mail al izitatorului pa'inii.
$; 2e de&c+ide c&u!a de mail cu adre&a &pecificat.
Le-%turi
1. c;
'. $;
+. $;
0. a;
1. $;
:. c;
<. a;
=. $;
>. a;
1@. $;
Capitolul <
7a-ini i eleente ultiedia
7a-inile i eleentele ultiedia con&tituie, fr ndoial, o latur intere&ant %i &pectaculoa&
a oricrei pa'ini de 4e$. 6ute!i include n pa'inile dumneaoa&tr foto'rafii, ima'ini animate, &unete
&au ima'ini ideo. *tunci c(nd &unt folo&ite n mod "udicio&, ace&te elemente pot m$o'!i con!inutul
pa'inilor 4e$, oferindu,le un a&pect atracti %i profe&ional. 6e de alt parte, folo&irea lor n e-ce& poate
da pa'inilor un a&pect ncrcat %i confuz %i poate conduce la mrirea con&idera$il a timpului de
ncrcare al pa'inii.
1. 0ormate!e 'iiere!or &ra'ice
Ima'inile &unt &tocate n fi%iere cu dier&e formate, cele mai folo&ite pe 4e$ fiind, a%a cum era
fire&c, cele care confer un raport optim ntre calitatea ima'inii %i dimen&iunile fi%ierului.
*cea&t op!iune e&te determinat de faptul c ma"oritatea utilizatorilor Internetului di&pun de
cone-iuni telefonice dial,up, cu iteze de&tul de mici, a&tfel c timpul de ncrcare al fi%ierelor, care
depinde de dimen&iunea ace&tora, deine un factor determinant.
3ou dintre cele mai utilizate tipuri de fi%iere 'rafice &unt DP(? 9Foint &hotographic 5xperts
,roup; %i ?7* 9,raphics 'nterchange .ormat;.
0ormatu! A(0
Dormatul AID 9)gif; folo&e%te 256 de culori %i e&te ideal pentru icon,uri, ilu&tra!ii %i anima!ie.
*ce&t format utilizeaz o te+nolo'ie &pecial de comprimare care reduce &emnificati dimen&iunile
fi%ierelor 'rafice pentru un tran&fer mai rapid prin re!ea. En proce&ul de comprimare &e p&treaz toate
caracteri&ticile ima'inii ori'inale, a&tfel c dup decomprimare ima'inea are acela%i a&pect ca %i
ori'inalul.
Ima'inile AID &uport efecte de tran&paren!, ntre!e&ere %i anima!ie, a&upra crora om reeni pe
lar' n capitolul (leente avansate de -ra,ic%.
3eoarece ma"oritatea $roC&erelor recuno&c formatul AID, ace&ta a deenit cel mai frecent
utilizat n pa'inile 4e$. 6oate fi folo&it pentru a include ima'ini direct n pa'ini 9ima'ini in!line;
precum %i pentru a referi ima'inile prin intermediul unor le'turi e-terne.
>otu%i, datorit numrului redu& de culori, formatul AID nu e&te potriit pentru foto'rafii &au
ima'ini de calitate nalt. 6entru ace&t tip de ima'ini, cel mai adecat e&te formatul B6#A.
0ormatu! B:#A
Dormatul B6#A 9);pg;, pe de alt parte, &uport un numr mult mai mare de culori 9apro-imati 16
milioane;. 3ac dori!i & folo&i!i ima'ini foto'rafice, formatul B6#A e&te recomandat, datorit calit!ii
&uperioare a ima'inii. 3imen&iunile unui fi%ier B6#A nu depind de numrul de culori ci de 'radul de
comprimare a ima'inii. Aradul de comprimare al formatului B6#A e&te mai ridicat dec(t cel al
formatului AID. Fu e&te neo$i%nuit, de e-emplu, ca un fi%ier AID care are 200 de X$ & fie comprimat
ca fi%ier B6#A p(n la dimen&iunea de 30 de X$.
6entru a realiza un 'rad at(t de nalt de comprimare a ima'inilor, formatul B6#A pierde anumite
informa!ii din ima'inea ori'inal. 0u toate c la decomprimare ima'inea B6#A nu a fi a$&olut identic
cu ima'inea ori'inal, diferen!ele or fi de cele mai multe ori ino$&era$ile.
Dormatul B6#A e&te potriit pentru ima'inile foto'rafice, dar el nu e&te adecat pentru ilu&tra!ii,
de&ene &au ima'ini de dimen&iuni redu&e. *l'oritmii folo&i!i pentru comprimarea %i decomprimarea
ima'inii altereaz n mod nota$il zonele de mari dimen&iuni colorate cu o &in'ur nuan!. 3in ace&t
moti, atunci c(nd dori!i & include!i n pa'in un de&en &au o ilu&tra!ie care folo&e%te un numr redu&
de culori, formatul AID e&te cel mai potriit.
2. C7te"a metode de o<inere a ima&ini!or
*e!i la ndem(n dier&e moduri n care pute!i crea &au procura ima'ini pe care & le include!i n
pa'inile dumneaoa&tr)
0rearea ima'inilor cu a"utorul unui pro'ram de 'rafic , cele mai performante &unt
*do$e 6+oto&+op %i 0orel3raC.
2canarea foto'rafiilor realizate cu aparate foto tradi!ionale %i, eentual, prelucrarea lor
ulterioar cu editoare 'rafice.
Dolo&irea aparatelor de foto'rafiat di'itale , de%i &unt ni%te ec+ipamente nc de&tul de
co&ti&itoare prezint marele aanta" c furnizeaz ima'ini di'itale &u$ form de fi%iere 'rafice n
formate comune, care &e pot de&crca direct pe +ard,di&J, %i care &e pot utiliza ca atare &au dup o
prelucrare 'rafic minim.
6reluarea ima'inilor de pe 4e$. Fumrul &ite,urilor care ofer colec!ii de ima'ini
'ratuite %i care pot fi utilizate li$er e&te imen&. >otu%i, atunci c(nd dori!i & folo&i!i n pa'ina
dumneaoa&tr o ima'ine care nu face parte dintr,o a&tfel de colec!ie, tre$uie & ae!i n edere
a&pectul drepturilor de autor. 6entru a prelua o ima'ine de pe 4e$ tre$uie & o &ala!i pe +ard,di&J,
ul dumneaoa&tr. 6ute!i realiza ace&t lucru a&tfel)
, pla&a!i cur&orul pe ima'inea re&pecti %i ap&a!i $utonul drept al mou&e,ului
, &electa!i din meniul care &e de&c+ide +ave 'mage 0s)))
, n ferea&tra de dialo' &electa!i folderul de de&tina!ie %i numele fi%ierului
, ap&a!i $utonul +ave
#&te util & crea!i unul &au mai multe foldere dedicate ima'inilor, or'anizate pe tipuri 9icon,
fundaluri, $utoane, ima'ini propriu,zi&e, etc.;, uneori alctuind aderate $i$lioteci, n care & p&tra!i
toate ima'inile pe care inten!iona!i & le folo&i!i n pa'inile dumneaoa&tr. 3e a&emenea, de mare
utilitate &unt aplica!iile de 'e&tionare a ima'inilor, cum e&te de e-emplu cuno&cutul *032ee.
.ten#ieH
3ac ima'inea nu e&te &alat n acela%i folder n care &e afl documentul =>?@ &ur& care
folo&e%te ima'inea re&pecti, referin!a la ima'ine tre$uie & con!in calea corect ctre loca!ia ei,
altminteri ima'inea nu a fi afi%at n pa'in.
3. (nserarea unei ima&ini
6entru a in&era o ima'ine n cadrul unei pa'ini 9o ima'ine in!line;, &e utilizeaz etic+eta 57M?9
9de la image;. #tic+eta LI?AM nu e&te o etic+et container, prin urmare nu nece&it o etic+et
core&punztoare de nc+idere.
6entru a putea identifica ima'inea care a fi in&erat, &e utilizeaz atri$utul src 9source; al
etic+etei LI?AM. *tri$utul &rc i comunica $roC&erului numele %i loca!ia ima'inii care urmeaz & fie
in&erat. Ualoarea ace&tui atri$ut e&te adre&a 75@ a ima'inii re&pectie.
3ac ima'inea &e afl n acela%i director cu fi%ierul =>?@ care face referire la ima'ine, atunci
adre&a 75@ a ima'inii e&te formata numai din numele fi%ierului, inclu&i e-ten&ia.
LI?A &rcS/ima'ine.e-ten&ie/M
3ac ima'inea &e afla ntr,un alt director, 75@,ul ima'inii tre$uie &pecificat fie prin adre&area
a$&olut fie, prefera$il, prin cea relati.
#-emplul 7.1 ilu&treaz modul n care &e pot in&era ntr,o pa'in dou ima'ini, una dintre ele
afl(ndu,&e n acela%i folder ca %i pa'ina &ur&, iar cealalt n folderul 'magini. Di'ura 7.1 red a&pectul
pa'inii de&cri&e n e-emplu.
("eplul <. 1
L=>?@M
L=#*3M
L>I>@#Mima'ini1LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/MIma'ini in pa'inaLG=1ML=5M
Ima'ine aflata in acela&i folderL6M
LI?A &rcS/ti'er.'if/ $orderS/5/ML6M
Ima'ine aflata in folderul Ima'iniL6M
LI?A &rcS/..GIma'iniG$erne&e."p'/ $orderS/1/ M
LG1.3KM
LG=>?@M
En ace&t e-emplu e&te prezent %i atri$utul border al etic+etei LI?AM. *ce&ta e&te folo&it pentru a
pla&a un c+enar n "urul ima'inii. Ualoarea atri$utului $order e&te numrul de pi-eli care reprezint
'ro&imea c+enarului din "urul ima'inii. *$&en!a atri$utului &au &etarea la aloarea /0/ face ca ace&t
c+enar & nu fie prezent.
7n alt atri$ut util a&ociat etic+etei LI?AM e&te alt. *ce&t atri$ut permite afi%area unui te-t
e-plicati n &pa!iul n care a fi afi%at ima'inea n pa'in.
En #-emplul 7.2 e&te ilu&trat utilitatea atri$utului alt.
("eplul <. '
L=>?@M
L=#*3M
L>I>@#Mima'ini2LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M *tri$utul alt LG=1ML=5M
*ce&ta e&te un...L15M
LI?A &rcS/..GIma'iniGoran'ero&e/ altS/trandafir/M
LG1.3KM
LG=>?@M
3up cum pute!i o$&era din Di'ura 7.2 ima'inea pe care am inclu&,o n document nu e&te afi%at.
?otiul e&te c am omi& inten!ionat e-ten&ia )gif a fi%ierului pentru a e-emplifica utilitatea atri$utului
alt. 6rin urmare, dac dintr,un moti oarecare, ima'inea nu &e ncarc n pa'in, &e ncarc mai 'reu,
&au e&te izualizat cu un $roC&er care nu &uport 'rafica, n zona rezerat ima'inii a fi afi%at te-tul
&pecificat ca aloare a atri$utului alt.
3e a&emenea, te-tul &pecificat ca aloare pentru atri$utul alt a fi afi%at %i n cadrul unei mici
fere&tre care &e de&c+ide n momentul c(nd cur&orul mou&e,ului e&te men!inut dea&upra ima'inii.
Di'ura 7.3 red a&pectul pa'inii n cazul c(nd atri$utul &rc are aloarea corect) /oran'ero&e.'if/.
7n alt moti pentru care e&te indicat folo&irea atri$utului alt e&te acela c izitatorul pa'inii are
po&i$ilitatea de a edea nc nainte de ncrcarea complet a ima'inii ce anume &e a afi%a n zona
re&pecti. *&tfel, el are po&i$ilitatea de a a%tepta ncrcarea complet a ima'inii &au de a trece la alt
pa'in.
4. @imensionarea ima&inii
3imen&ionarea ima'inii &e realizeaz cu a"utorul atri$utelor Fidt) , prin care &e &ta$ile%te l!imea
ima'inii %i )ei-)t , prin care &e &ta$ile%te nl!imea ima'inii.
En #-emplul 7.3 &unt precizate %i dimen&iunile ima'inii inclu&e n document. 2e o$&er c
dimen&ionarea ima'inilor &e face n pi-eli. #&te, de&i'ur, po&i$il, ca dimen&ionarea & &e fac n
procente, ca %i la liniile orizontale, de e-emplu. >otu%i, n afara unor cazuri &peciale, acea&ta e&te
con&iderat o practic 're%it, deoarece $roC&erul a redimen&iona ima'inea iar rezultatele or fi de
calitate &la$.
("eplul <. +
L=>?@M
L=#*3M
L>I>@#Mima'ini3LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M3imen&ionarea ima'inilorLG=1ML=5M
LI?A &rcS/ti'er.'if/ Cidt+S/350/ +ei'+tS/250/ML6M
LG1.3KM
LG=>?@M
6. .$&er(nd Di'ura 7.4 care red a&pectul pa'inii de&cri&e mai &u& putem remarca
faptul c &etarea dimen&iunilor a afectat calitatea ima'inii deoarece dimen&iunile ori'inale ale
ima'inii erau mai mici. 3imen&iunile ori'inale ale ima'inii tiger)gif, determinate cu a"utorul
unui editor 'rafic, &unt) l!imeS200 pi-eli, nl!imeS125 pi-eli.
3ac dimen&iunile ima'inii n pa'in &unt &etate la alori con&idera$il mai mari dec(t
dimen&iunile ima'inii ori'inale calitatea ima'inii inclu&e n pa'in a aea de &uferit. 0oncluzia care
&e impune e&te c dimen&ionarea ima'inilor din pa'in tre$uie & &e fac la alori c(t mai apropiate de
dimen&iunile ini!iale ale ima'inilor.
U pute!i ntre$a atunci, de ce mai e&te nece&ar includerea atri$utelor de dimen&ionare a
ima'inii. Fu numai c e&te nece&ar, dar e&te con&iderat o practic defectuoa& a$&en!a lor din cadrul
etic+etei LI?AM.
?otiul e&te acela c includerea dimen&iunilor ima'inii ofer $roC&erului po&i$ilitatea de a
rezera &pa!iu pentru ima'ine %i de a ncepe ncrcarea te-tului &imultan cu ncrcarea ima'inii. 3ac
atri$utele de dimen&ionare nu &unt prezente, $roC&erul a efectua ni%te pa%i &uplimentari pentru a
calcula &pa!iul din pa'in nece&ar afi%rii ima'inii. 3in ace&t moti afi%area te-tului nu a putea ncepe
dec(t dup ce ima'inea e&te ncrcat n ntre'ime.
#&te indicat & eitam o a&emenea &itua!ie deoarece ima'inile &e ncarc mai 'reu dec(t te-tul %i
mul!i izitatori ai pa'inii nu or a%tepta &uficient pentru ca ntrea'a pa'in 9ima'ini %i te-t; & fie
ncrcat.
). 1!inierea ima&inii i a textu!ui
*linierea unei ima'ini n raport cu te-tul din pa'in &e realizeaz prin intermediul atri$utului
ali-n, care poate lua urmtoarele alori)
left , aliniere la &t(n'a] te-tul e&te di&pu& n partea dreapt a ima'inii ncadr(nd
ima'inea
ri'+t , aliniere la dreapta] te-tul e&te di&pu& n partea &t(n'a a ima'inii ncadr(nd
ima'inea
top , aliniere dea&upra] partea de &u& a ima'inii &e aliniaz cu prima linie a te-tului ce
precede ima'inea
middle , aliniere la mi"loc] mi"locul ima'inii &e aliniaz cu prima linie a te-tului ce
precede ima'inea.
$ottom , aliniere dede&u$t, la $az] partea de "o& a ima'inii &e aliniaz cu prima linie a
te-tului.
Ualorile left, ri'+t, %i $ottom ale atri$utului ali'n permit ca te-tul & fie di&pu& n "urul ima'inii, n
reme ce top %i middle nu permit ace&t lucru.
#-emplul 7.4 ilu&treaz modul de aliniere $ottom, a%a cum rezult din Di'ura 7.5.
("eplul <. 0
L=>?@M
L=#*3M
L>I>@#Mima'ini4LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M*linierea ima'inii &i te-tului 9$ottom;LG=1ML=5M
LI?A &rcS/..GIma'iniGea'le+ed.'if/ ali'nS/$ottom/ Cidt+S/100/ +ei'+tS/66/ altS/ultur/M
Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine
te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine
te-t.Ima'ine te-t.Ima'ine te-t.
Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine
te-t.Ima'ine te-t.
LG1.3KM
LG=>?@M
Di'ura 7.6 red modul de aliniere left iar Di'ura 7.7 modul de aliniere ri'+t.
3in Di'ura 7.8 %i Di'ura 7.9 pute!i o$&era modurile de aliniere top %i middle precum %i faptul c
ace&te alinieri nu permit di&punerea te-tului n "urul ima'inii.
*lte dou atri$ute utile, care &ere&c la alinierea ima'inii fa! de re&tul elementelor din pa'in,
&unt atri$utele )space %i vspace. #le precizeaz di&tan!a, n pi-eli, pe orizontal, re&pecti pe ertical,
dintre ima'ine %i re&tul elementelor din pa'in.
En #-emplul 7. 4 om &c+im$a modul de aliniere n cadrul etic+etei LI?AM %i om adu'a
atri$utele +&pace, re&pecti &pace, a&tfel)
LI?A &rcS/..GIma'iniGea'le+ed.'if/ ali'nS/left/ Cidt+S/100/ +ei'+tS/66/ altS/ultur/
&paceS/10/ +&paceS/10/M
*&pectul pa'inii a fi cel din Di'ura 7.10.
*!i o$&erat, pro$a$il, c dintre alorile pe care le poate lua atri$utul ali'n lip&e%te aloarea
center. Entr,ader, alinierea unei ima'ini la centrul pa'inii nu &e poate face prin intermediul atri$utului
ali'n. 0entrarea unei ima'ini &e poate realiza numai dac e&te izolat de te-tul care o ncon"oar.
6entru acea&ta &e poate folo&i etic+eta L0#F>#5M &au &e poate include ima'inea ntr,un $loc para'raf
&au ntr,un $loc L3IUM a(nd atri$utul ali'n &etat la aloarea center.
#-emplul 7.5 ilu&treaz ace&t mod de aliniere folo&ind etic+eta L3IUM a&pectul pa'inii fiind cel
din Di'ura 7.11.
("eplul <. 1
L=>?@M
L=#*3M
L>I>@#Mima'ini5LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M0entrarea unui ima'iniLG=1ML=5M
Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine
te-t.Ima'ine te-t.
L3IU ali'nS/center/M
LI?A &rcS/..GIma'iniGdeil.'if/ Cidt+S/64/ +ei'+tS/64/ altS/dracu&or/M
LG3IUM
Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine
te-t.Ima'ine te-t.
LG1.3KM
LG=>?@M
#-emplul 7.6 ilu&treaz modul n care pot fi aliniate dou ima'ini fa! de te-tul din pa'in.
3in Di'ura 7.12 pute!i o$&era c, dac alinierea la &t(n'a a ima'inii mpreun cu folo&irea
atri$utelor +&pace %i &pace conduce la un a&pect ordonat al elementelor, a&pectul te-tului n raport cu
ima'inea aliniat la dreapta depinde de dimen&iunea fere&trei $roC&erului.
("eplul <. :
L=>?@M
L=#*3M
L>I>@#Mima'ini6LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M*linierea a doua ima'iniLG=1ML=5M
LI?A &rcS/..GIma'iniGmtn&cene."p'/ ali'nS/left/ Cidt+S/200/ +ei'+tS/144/ ali'nS/left/
+&paceS/10/ &paceS/10/M
Ima'ine te-t. Ima'ine te-t. Ima'ine te-t. Ima'ine te-t.Ima'ine te-t. Ima'ine te-t. Ima'ine te-t.
Ima'ine te-t.
LI?A &rcS/..GIma'iniG&un&cene."p'/ ali'nS/ri'+t/ Cidt+S/202/ +ei'+tS/132/ +&paceS/10/
&paceS/10/M
Ima'ine te-t. Ima'ine te-t. Ima'ine te-t. Ima'ine te-t.Ima'ine te-t. Ima'ine te-t. Ima'ine te-t.
Ima'ine te-t.Ima'ine te-t. Ima'ine te-t. Ima'ine te-t. Ima'ine te-t.Ima'ine te-t. Ima'ine te-t. Ima'ine
te-t. Ima'ine te-t.Ima'ine te-t. Ima'ine te-t. Ima'ine te-t. Ima'ine te-t.Ima'ine te-t. Ima'ine te-t.
Ima'ine te-t. Ima'ine te-t.
LG1.3KM
LG=>?@M
+. (ma&ini 'o!osite ca 'ond 8<ac>&round3 a! pa&inii
. ima'ine poate fi utilizat %i pentru a &ta$ili fondul unei pa'ini 4e$. En ace&t &cop &e folo&e%te
atri$utul bac;-round al etic+etei L1.3KM, a(nd ca aloare adre&a 75@ a ima'inii. Ima'inea &e
multiplic aliniat 9tiling; pe orizontal %i pe ertical p(n umple ntre'ul ecran.
#-emplul 7.7 ilu&treaz utilizarea atri$utului $acJ'round.
("eplul <. <
L=>?@M
L=#*3M
L>I>@#Mima'ini7LG>I>@#M
LG=#*3M
L1.3K $acJ'roundS/..GIma'iniG&ilJ."p'/M
L=1 ali'nS/center/MIma'inea ca fond al pa'iniiLG=1ML=5M
Dond de mata&e...
LG1.3KM
LG=>?@M
Di'ura 7.13 red a&pectul unei pa'ini care folo&e%te ca fundal o ima'ine.
,. (ma&ini 'o!osite ca !e&*turi
6entru a folo&i o ima'ine drept le'tura &e procedeaz ca n urmtorul e-emplu)
L* +refS/ta$elVculori.+tml/M
LI?A &rcS/pri&m.'if/ Cidt+S/100/ +ei'+tS/80/ altS/culori/M
LG*M
2,a folo&it etic+eta L*M prin intermediul creia am creat le'tura cu fi%ierul ta$elVculori.+tml.
Entre etic+etele L*M %i LG*M am inclu& o ima'ine care nlocuie%te te-tul e-plicati pe care izitatorul
urmeaz & fac clicJ cu mou&e,ul. Ima'inea &ere%te, deci, ca le'tur ctre o anumit pa'in.
Ima'inea folo&it ca le'tura e&te prism)gif iar pa'ina &pre care e&te fcut le'tura e&te
tabelGculori)html. En mod pre&ta$ilit ima'inea utilizat pe po&t de zon acti e&te ncon"urat de un
c+enar a(nd culoarea unei le'turi 9al$a&tru;. 3ac &ta$ilim pentru atri$utul $order al etic+etei
aloarea /0/ ace&t c+enar di&pare.
#-emplul 7.8 prezint codul complet.
("eplul <. =
L=>?@M
L=#*3M
L>I>@#Mima'ini8LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M Ima'ini cu le'aturi LG=1ML=5M
L15M*m pu& o ima'ine cu le'atura pe pa'inaL6M
L* +refS/ta$el culori.+tml/M
LI?A &rcS/..GIma'iniGpri&m.'if/ Cidt+S/100/ +ei'+tS/80/ altS/culori/M
LG*M
LG1.3KM
LG=>?@M
En Di'ura 7.14 pute!i o$&era modul n care func!ioneaz ima'inea folo&it ca le'tur n
e-emplul de mai &u&.
3. (ma&ini!e miniatura!e 8t/um<nai!s9
3ac ntr,o pa'in 4e$ e&te nece&ar afi%area unui numr mare de ima'ini, ncrcarea pa'inii &e
a face de&tul de 'reu. 3e multe ori, izitatorii pa'inii nu or aea r$darea nece&ar pentru a a%tepta
ncrcarea inte'ral a pa'inii.
. &olu!ie de compromi& frecent aplicat pentru &curtarea timpului de ncrcare a unei pa'ini ce
prezint multe ima'ini o reprezint utilizarea ima'inilor miniaturale 9thumbnail,uri;. . ima'ine
thumbnail e&te o er&iune de dimen&iuni redu&e a unei ima'ini mai mari, care &e ncarc mult mai rapid
%i care, de%i e&te de dimen&iuni mici %i de calitate &czut, permite izitatorului & afle ce anume
reprezint %i & decid dac e&te intere&at &au nu & de&c+id er&iunea inte'ral..
Ima'inea miniatural reprezint o le'tur &pre fi%ierul cu ima'inea ori'inal din care proine. En
cazul n care izitatorul pa'inii dore%te & ad ima'inea ori'inal, o poate de&c+ide efectu(nd clicJ
ima'inea thumbnail)
5ealizarea ima'inilor miniaturale &e poate face fie prin mic%orarea propor!ional a ima'inilor, fie
prin reducerea lor la o dimen&iune pre&ta$ilit 9strech; c+iar dac ima'inea &e di&tor&ioneaz, n cazul
n care &e dore%te, de pild, ca toate thumbnail!urile dintr,o pa'in & ai$ acelea%i dimen&iuni.
#-i&t dou metode pentru a pla&a o ima'ine thumbnail n pa'in)
folo&ind dou ima'ini, una fiind ima'inea thumbnail iar cealalt, ima'inea ori'inal
folo&ind o &in'ur ima'ine, redimen&ionat 9mic%orat; direct n pa'in
0o!osirea a dou* ima&ini
. ima'ine thumbnail e&te foarte u%or de realizat. .ricare ar fi pro'ramul de 'rafic pe care l
folo&i!i, tot ceea ce ae!i de fcut e&te & '&i!i op!iunea Resi8e 9care de o$icei face parte din meniul
5dit &au 'mage; %i & preciza!i n ca&eta de dialo' care &e de&c+ide, dimen&iunile dorite. Ue!i o$&era c
e-i&t de re'ul o op!iune &eta$il pentru p&trarea propor!ionalit!ii cu dimen&iunile. 3ac e&te
actiat, dup &ta$ilirea uneia dintre dimen&iuni 9idth, de e-emplu;, cealalt 9height; e&te calculat
automat.
En #-emplul 7.9 e&te pla&at o ima'ine thumbnail n pa'in, folo&ind prima metod, Di'ura 7.15
ilu&tr(nd func!ionarea ima'inii thumbnail.
("eplul <. >
L=>?@M
L=#*3M
L>I>@#Mima'ini9LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M>+um$nail& , doua ima'iniLG=1ML=5M
L6M
L* +refS/..GIma'iniGzdo'.'if/M
LI?A &rcS/..GIma'iniGzdo'Vt+.'if/MLG*M
LG1.3KM
L=>?@M
Di%ierul 8dogGth)gif con!ine ima'inea thumbnail care e&te folo&it ca le'tur, pentru a referi
ima'inea ori'inal, 8dog)gif. 3eoarece ima'inea thumbnail e&te folo&it ca o le'tura ctre ima'inea
ori'inal, n "urul ei e&te afi%at un c+enar pre&ta$ilit al$a&tru. 3ac dori!i ca ace&t c+enar & nu mai fie
afi%at, pute!i folo&i atri$utul $order al etic+etei LI?AM &etat la aloarea /0/. Ima'inea ori'inal &e a
de&c+ide n aceea%i ferea&tr cu pa'ina n care e&te pla&at ima'inea thumbnail. 6entru a reeni n
pa'in, tre$uie & ap&a!i $utonul 1ack al $roC&erului.
0o!osirea unei sin&ure ima&ini
*cea&t metod e&te ade&ea preferat, deoarece folo&e%te un &in'ur fi%ier, cel care con!ine
ima'inea ori'inal, miniaturizarea ei fc(ndu,&e c+iar n pa'in, cu a"utorul atri$utelor Cidt+ %i +ei'+t.
#&te o metoda mai eficient %i mai rapid, deoarece ima'inea de dimen&iuni mari care urmeaz a fi
afi%at e&te de"a ncrcat n memoria cache a $roC&erului %i e&te imediat di&poni$il pentru afi%are.
En e-emplul urmtor 9#-emplul 7.10; am folo&it o &in'ur ima'ine pentru a ncrca at(t ima'inea
thumbnail c(t %i pe cea cu dimen&iunile ori'inale. *&pectul pa'inii e&te redat n Di'ura 7.16.
("eplul <. 1@
L=>?@M
L=#*3M
L>I>@#Mima'ini10LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M>+um$nail& , o &in'ura ima'ineLG=1ML=5M
L6M
L* +refS/..GIma'iniGzdo'.'if/M
LI?A &rcS/..GIma'iniGzdo'.'if/ Cidt+S/70/ +ei'+tS/76/MLG*M
LG1.3KM
L=>?@M
3up cum &e poate o$&era, am creat un linJ 9cu a"utorul etic+etei L*M; la fi%ierul 8dog)gif care
con!ine ima'inea ori'inal. *m folo&it drept le'tur aceea%i ima'ine, dar redimen&ionat, folo&ind
atri$utele Cidt+ %i +ei'+t.
En e-emplul anterior, ima'inea thumbnail e&te ncrcat prima. En momentul c(nd izitatorul face
click pe ea, e&te ncrcat ima'inea cu dimen&iunile ori'inale. *anta"ul ultimei metode e&te faptul c
ima'inea e&te ncrcat de la nceput %i redimen&ionat pentru thumbnail, ceea ce face ca afi%area
ima'inii cu dimen&iunile ori'inale & fie mai rapid.
4. (ma&ini!e "ideo
6entru a in&era o ima'ine ideo ntr,un document =>?@ &e folo&e&c atri$utele dGnsrc, controls,
loop %i start ale etic+etei LI?AM.
*tri$utul dGnsrc nlocuie%te atri$utul &rc %i permite in&erarea n documentul =>?@ a unei
ima'ini ideo n acela%i mod n care e&te in&erat o ima'ine &tatic.
Ualoarea atri$utului dIn&rc e&te adre&a 75@ a fi%ierului ideo care a fi inclu& n pa'in conform
&inta-ei)
LI?A dIn&rcS/75@Vfi&ierVideo/M
*ce&t atri$ut e&te o e-ten&ie Internet #-plorer %i nu e&te recuno&cut de $roC&erele Fet&cape.
6entru a izualiza o ima'ine ideo in!line ntr,un $roC&er Fet&cape, izitatorul pa'inii tre$uie &
in&taleze un pro'ram au-iliar de tip plug!in. 3ac pro'ramul plug!in nu e&te di&poni$il pe computerul
izitatorului, ima'inea ideo nu a putea fi afi%at.
2in'urul format de fi%iere ideo care e&te &uportat de e-ten&iile Internet #-plorer e&te .87 90udio
3ideo 'nterleave;, deoarece ace&ta e&te formatul de redare care e&te inclu& n $roC&er) 0on&truc!ia de
mai "o& include ntr,un document =>?@ fi%ierul ideo introducere)avi care &e afl n folderul 3ideo)
LI?A dIn&rcS/..GUideoGintroducere.ai/M
#fectul ace&tei etic+ete e&te de&c+iderea de ctre $roC&er a unei fere&tre de izualizare n
interiorul pa'inii 4e$, ferea&tr n care a rula clipul ideo introducere)avi, inclu&i &unetul, dac
ace&ta face parte din clip %i computerul izitatorului e&te &etat & redea &unetele. 0a %i ima'inile
o$i%nuite, ima'inea ideo e&te afi%at pe m&ur ce e&te ncrcat.
3eoarece nici un alt $roC&er n afar de Internet #-plorer nu recunoa%te acea&t e-ten&ie, e&te
recomandat & include!i n cadrul etic+etei LI?AM %i atri$utul &rc prin care & furniza!i o ima'ine
&tatic ce a fi afi%at n acela%i cadru. 1roC&erele care nu recuno&c e-ten&ia dIn&rc or afi%a ima'inea
&tatic pe c(nd Internet #-plorer a afi%a ima'inea ideo. .rdinea n care apar cele dou atri$ute nu are
importan!. 3e e-emplu)
LI?A dIn&rcS/..GUideoGintro.ai/ &rcS/..GIma'iniGintro.'if/M
En mod normal, Internet #-plorer red clipul ideo ntr,o ferea&tr n care nu &unt afi%ate nici un
fel de $utoane de control. 7tilizatorul poate relua, opri &au continua redarea clipului efectu(nd clicJ
dreapta cu mou&e,ul n interiorul fere&trei.
6entru a adu'a $utoane de control ace&tei fere&tre &e utilizeaz atri$utul controls al etic+etei
LI?AM. *tri$utul control& nu are alocat nici o aloare, prezen!a &a a(nd doar &copul de a adu'a
$utoanele de control a&emntoare celor de la aparatele ideo. 3e e-emplu)
LI?A dIn&rcS/..GUideoGintro.ai/ &rcS/..GIma'iniGintro.'if/ control&M
0lipul ideo inclu& n pa'in e&te redat de $roC&er o &in'ur dat, de la nceput p(n la &f(r%it.
6entru a repeta redarea clipului de un anumit numr de ori e&te folo&it atri$utul loop. Ualorile po&i$ile
ale atri$utului &unt)
un numr ntre' care reprezint numrul de reluri ale clipului
infinite, caz n care clipul e&te redat p(n c(nd utilizatorul &topeaz derularea &a ap&(nd
$utonul &top al fere&trei de izualizare 9n cazul c(nd ferea&tra con!ine $utoanele de control; &au
efectueaz clicJ dreapta cu mou&e,ul n ferea&tra de izualizare.
#-emplul de mai "o& ilu&treaz modul n care poate fi &etat atri$utul loop)
LI?A dIn&rcS/..GUideoGintro.ai/ &rcS/..GIma'iniGintro.'if/ control& loopS/infinite/M
*%a cum am precizat, redarea ima'inii ideo ncepe imediat ce acea&ta a fo&t complet ncrcat n
pa'in. 6entru a &c+im$a ace&t comportament &e folo&e%te atri$utul start care poate aea alorile)
mou&eoer, &itua!ie n care derularea ima'inii ideo ncepe n momentul c(nd mou&e,ul
e&te pla&at dea&upra ima'inii
fileopen, aloarea predefinit, &itua!ie n care derularea ima'inii ncepe imediat dup
ncrcarea n pa'in
0ele dou alori pot fi com$inate pentru a &e realiza redarea ima'inii mai nt(i imediat dup
ncrcarea n pa'in %i apoi de fiecare dat c(nd mou&e,ul e&te pla&at dea&upra ei, ca n e-emplul
urmtor)
LI?A dIn&rcS/..GUideoGintro.ai/ &rcS/..GIma'iniGintro.'if/ control& loopS/infinite/
&tartS/fileopen, mou&eoer/M
Ima'inile ideo in!line pot fi tratate ca %i ima'inile &tatice. . a&tfel de ima'ine poate fi aliniat
folo&ind atri$utul ali-n, &au poate fi &pa!iat fa! de te-tul care o ncon"oar.
#-emplul 7.11 ilu&treaz atri$utele prezentate mai &u&. 6a'ina a aea a&pectul din Di'ura 7.17.
("eplul <. 11
L=>?@M
L=#*3M
L>I>@#Mima'ini11LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/MIma'ini ideoLG=1ML=5M
LD.F> &izeS/4/ colorS/$lue/M0lipul ideo de mai "o& face parte din "ocul =eroe&
3LGD.F>ML6M
L0#F>#5M
LI?A dIn&rcS/..GUideoG&+ield.ai/ &rcS/..GIma'iniG$anana.'if/ control& &tartS/fileopen,
mou&eoer/ loopS/infinite/M
LG0#F>#5M
LG1.3KM
LG=>?@M
1;. Sunete!e
3ac etic+eta LI?AM permite afi%area unei ima'ini de fundal, e-i&t %i o etic+et care realizeaz
includerea n pa'ina 4e$ a unei muzici de fundal %i anume etic+eta 54?SBUA69. *cea&t etic+et
e&te, de a&emenea, o e-ten&ie Internet #-plorer deci nu e&te recuno&cut %i e-ecutat n alte $roC&ere)
1roC&erul Internet #-plorer con!ine un decodor de &unet ncorporat %i permite inte'rarea prin
etic+eta L1A2.7F3M a &unetului de fundal pentru o pa'in. 2inta-a etic+etei L1A2.7F3M e&te
urmtoarea)
L1A2.7F3 &rcS/75@Vfi&ierV&unet/ loopS/aloare/M
*tri$utul src are drept aloare adre&a 75@ a fi%ierului de &unet care e&te folo&it ca fundal &onor al
pa'inii.
En mod curent, Internet #-plorer recunoa%te trei tipuri de fi%iere de &unet)
fi%iere cu e-ten&ia .%a" care e&te formatul nati pentru 60
fi%iere cu e-ten&ia .au, formatul nati pentru &i&temele 7FIW
fi%iere cu e-ten&ia .midi, un format unier&al acceptat pentru codificarea &unetelor
6entru a include ntr,o pa'in un fi%ier de &unet &e procedeaz ca n e-emplul urmtor)
L1A2.7F3 &rcS/..G2unetGCellcome.CaM
0a %i n cazul ima'inilor ideo in!line, fi%ierul de &unet e&te redat o &in'ur dat, la ncrcarea
pa'inii. 6entru redarea &a repetat &e folo&e%te atri$utul loop al etic+etei L1A2.7F3M care poate aea
ca alori)
un numr ntre', care reprezint numrul de reluri ale pie&ei
infinite, caz n care pie&a muzical e&te reluat p(n c(nd utilizatorul pr&e%te pa'ina
&au nc+ide ferea&tra $roC&erului.
#-ecuta!i #-emplul 7.12 cu un $roC&er Internet #-plorer pentru a o$&era efectul etic+etei
L1A2.7F3M. 3e&i'ur, e&te nece&ar & &c+im$a!i adre&a 75@ a fi%ierului de &unet &pecific(nd un
fi%ier e-i&tent pe +ard,di&J,ul dumneaoa&tr.
("eplul <. 1'
L=>?@M
L=#*3M
L>I>@#Mima'ini12LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M?uzica de fundalLG=1ML=5M
L6M
LD.F> &izeS/4/ colorS/red/M?uzica &e a auzi pana cand eti inc+ide pa'inaLGD.F>M
L1A2.7F3 &rcS/..G2unetG4elcom98.Ca/ loopS/infinite/M
LG1.3KM
LG=>?@M
11. Su&estii pri"ind 'o!osirea ima&ini!or i e!emente!or mu!timedia
0(nd folo&i!i ima'ini ntr,o pa'in 4e$, tre$uie & pune!i ntre$area) /#&te nece&ar acea&t
ima'ine &au ar fi &uficient & folo&e&c te-t</. 0+iar dac &e &pune c o ima'ine face c(t o mie de
cuinte, ace&t lucru nu e&te ntotdeauna aderat pe 4e$. Enlocuirea te-tului care con!ine informa!iile
e&en!iale dintr,o pa'in 4e$ cu ima'ini e&te ade&ea o 're%eal.
7n prim moti e&te c nc mai e-i&t $roC&ere non,'rafice cum e&te @In-, care nu afi%eaz dec(t
te-tul.
*poi, c+iar %i n $roC&erele 'rafice, anumi!i utilizatori ar putea opta, din arii motie, pentru
dezactiarea afi%rii ima'inilor.
7n alt moti ar fi acela c, din cauza duratei mari de ncrcare a fi%ierelor cu ima'ini de mari
dimen&iuni, unii utilizatori ar putea renun!a pur %i &implu la de&c+iderea pa'inii.
8i nu n ultimul r(nd, deoarece, &pre deo&e$ire de te-t, ima'inile pot nt(mpina dier&e dificult!i
te+nice la afi%are.
Ima'inile dintr,o pa'in 4e$ tre$uie '(ndite ca ni%te in&trumente izuale care au rolul de a
&u&!ine %i ilu&tra con!inutul &cri& al pa'inii. 3e e-emplu, ntr,un catalo' on!line ima'inile produ&elor
prezentate &unt e&en!iale pentru con!inutul pa'inii re&pectie. Icon,urile cu rol de le'turi &au
in&trumente de nai'a!ie pot reprezenta repere izuale deo&e$it de utile n cadrul unui &ite. 3ar dac o
ima'ine nu &ere%te unui &cop $ine definit n pa'in, e $ine & '(ndi!i de dou ori, nainte de a o
folo&i.
3e a&emenea &e recomand & fi!i precaut %i n priin!a ima'inilor folo&ite ca fundal
9background;.
Entr,ader, ace&tea pot oferi un a&pect &pectaculo& pa'inii dumneaoa&tr. En& tre$uie & fi!i
con%tient de faptul c o ima'ine folo&it ca fundal a cre%te cu &i'uran! timpul nece&ar ncrcrii
pa'inii. 3ac n cazul ima'inilor in!line te-tul &e poate afi%a naintea &au n timpul ncrcrii ima'inii,
la ima'inile de fundal afi%area celorlalte elemente din pa'in nu a putea ncepe dec(t dup ncrcarea
n ntre'ime a fundalului.
?ai mult, &pre deo&e$ire de ima'inile in!line, care pot m$o'!i con!inutul informa!ional al
pa'inilor, ima'inile de fundal nu aduc cu aderat dec(t foarte rar un &upliment de informa!ie. 3e%i
a&pectul unei a&emenea pa'ini poate fi atr'tor, de cele mai multe ori folo&irea ima'inilor de fundal n
com$ina!ii nefericite cu fonturi de anumite tipuri &au culori, fr contra&t &uficient, poate face pa'ina
ncrcat %i 'reu de citit.
3ac totu%i decide!i & folo&i!i o ima'ine ca fundal al pa'inii e&te recomandat & &pecifica!i
&imultan %i o culoare de fundal, adic & &eta!i atri$utul $'color. *&tfel, dac dintr,un moti oarecare
ima'inea de fundal nu &e ncarc, pa'ina a aea totu%i culoarea pre&ta$ilit de dumneaoa&tr.
0a %i ima'inile, %i celelalte elemente multimedia tre$uie folo&ite cu di&cernm(nt ntr,o pa'in
4e$.
Ima'inile ideo au dimen&iuni &emnificati mai ari dec(t ima'inile &tatice, deci &e ncarc mult
mai ncet dec(t ace&tea a&tfel nc(t includerea lor in!line a mri con&idera$il timpul de ncrcare al
pa'inii.
En plu&, formatele dier&e utilizate nu pot fi de&c+i&e ntotdeauna cu $roC&erul, unele impun(nd
e-i&ten!a unor plug!in,uri &au c+iar unor pro'rame &peciale.
. metod de compromi& recomandat e&te de&crierea con!inutului fi%ierului, eentual in&erarea
unui fra'ment ideo e-emplificati 9sample; de dimen&iuni mult mai mici, &imilar cuma metodei
thumbnail,urilor. 2e a&i'ur o le'tur %i &pre fi%ierul inte'ral, a&tfel nc(t, dup izualizarea
e-emplului, izitatorul & poat ale'e dac a a%tepta timpul nece&ar ncrcrii &ale &au nu.
?uzica de fundal e&te de cele mai multe ori nerecomandat. Doarte mul!i izitatori pot izualiza
pa'inile dumneaoa&tr a(nd &unetul dezactiat. Dolo&irea unei muzici de fundal ncetine%te
ncrcarea pa'inii %i, n plu&, e&te foarte po&i$il ca muzica pe care a!i ale&,o & nu fie pe 'u&tul celor
care iziteaz pa'ina, $a c+iar & i determine & o pr&ea&c nainte de a citi con!inutul ace&teia.
3ac e&te nece&ar, totu%i, & introduce!i muzic &au &unet n pa'inile dumneaoa&tr, e&te o
preedere n!eleapt & pla&a!i fi%ierele de &unet &eparat %i & a&i'ura!i le'turi ctre ace&tea a&tfel nc(t
izitatorul & le poat audia, dac dore%te.
12. (ma&ini!e i timpu! de nc*rcare a! pa&inii
7nul dintre cele mai importante a&pecte care tre$uie luate n con&iderare la includerea ima'inilor
ntr,un document e&te tipul de nc%rcare a documentului.
3urata de ncrcare a pa'inilor depinde de mul!i factori. 3epinde de modemul %i cone-iunea
izitatorului, de performan!ele &ererului 'azd, de trafic, de l!imea de $and, etc. 0um nu pute!i aea
control a&upra ace&tora, &in'urul lucru care rm(ne de fcut e&te & con&trui!i pa'inile a&tfel nc(t
& ai$ o $un itez de ncrcare c+iar %i n cazul unui izitator care de!ine o cone-iune mode&t ca
performan!e.
6e l(n' ale'erea cu foarte mult 'ri" a ima'inilor care or fi inclu&e n document, mai e-i&t
c(tea modalit!i prin care poate fi ameliorat durata de ncrcare a pa'inii)
.ptimizarea ima'inilor. Dolo&i!i, n mod "udicio& de in&trumentele de control al
ima'inilor pu&e la di&pozi!ie de editorul 'rafic folo&it, optimiza!i dimen&iunile ima'inii %i numrul
de culori la c(t mai pu!ine po&i$il. Encerca!i & '&i!i un raport optim ntre dimen&iunea fi%ierului %i
calitatea ima'inii. #ita!i foto'rafiile &au ima'inile de fundal de dimen&iuni foarte mari.
5eutilizarea ima'inilor. *cea&t metod e&te eficient mai ale& n cazul icon,urilor &au
elementelor 'rafice de nai'a!ie care &unt prezente n mai multe pa'ini pe parcur&ul unui &ite. 0ele
mai multe $roC&ere re!in n memoria cache elementele documentelor care urmeaz a fi afi%ate.
*&tfel, dac o ima'ine e&te utilizat n mai multe pa'ini acea&ta nu tre$uie ncrcat de fiecare dat
n memorie ci e&te di&poni$il pentru a fi afi%at oric(nd &e face referirea la ea.
3iizarea documentelor de dimen&iuni mari n mai multe documente de dimen&iuni
redu&e. *cea&t re'ul 'eneral include %i pa'inile care con!in ima'ini in!line. ?ai multe
documente de dimen&iuni mai mici le'ate ntre ele prin le'turi &unt mai $ine acceptate de izitatori
dec(t un &in'ur document foarte mare care nece&it un timp de ncrcare ndelun'at. 5e'ula 'eneral
acceptat e&te men!inerea dimen&iunilor unui document 4e$ n "urul alorii de 50X$, incluz(nd
aici %i ima'inile, de&i'ur.
Dolo&irea ima'inilor thumbnail. 3ac pa'ina con!ine un mare numr de ima'ini, folo&i!i
ima'ini miniaturale care & refere ima'inile ori'inale. En plu&, ntruc(t ima'inea ori'inal referit
prin ima'inea thumbnail &e poate de&c+ide ntr,o nou ferea&tr, nefiind a&ociat cu re&tul
elementelor din pa'in, e&te mai comod pentru izitator & o &aleze pe computerul propriu pentru
o izualizare ulterioar.
2pecificarea dimen&iunile ima'inilor. En ace&t mod e&te eitat etapa calculrii de ctre
$roC&er a &pa!iului nece&ar pentru afi%area ima'inii, m$unt!indu,&e iteza de ncrcare a pa'inii.
13. -e.umat
Dormatele cele mai utilizate pentru fi%ierele 'rafice &unt B6#A %i AID.
In&erarea unei ima'ini ntr,un document =>?@ &e realizeaz cu a"utorul etic+etei LI?AM.
2inta-a etic+etei LI?AM e&te urmtoarea)
LI?A &rcS/75@Vima'ine/ ali'nS/pozitie/ Cidt+S/aloare/ +ei'+tS/aloare/ &paceS/aloare/
+&paceS/aloare/ altS/te-t/ $orderS/aloare/ dIn&rcS/75@Vima'ineVideo/ loopS/aloare/
&tartS/aloare/ control&M
unde)
&rc precizeaz loca!ia ima'inii
Cidt+ %i +ei'+t &ta$ile&c dimen&iunile ima'inii
&pace %i +&pace &ta$ile&c di&tan!a pe ertical %i orizontal fa! de re&tul te-tului din
pa'in
ali'n aliniaz ima'inea fa! de te-tul din "urul ei
alt furnizeaz un te-t e-plicati a&upra ima'inii
$order &ta$ile%te 'ro&imea c+enarului ima'inii
dIn&rc introduce o ima'ine ideo %i precizeaz loca!ia ei
loop &pecific numrul de reluri ale ima'inii ideo
&tart precizeaz momentul nceperii redrii ima'inii
control& afi%eaz $utoanele de control ale fere&trei ideo
Ima'inile pot fi folo&ite ca fond al pa'inii cu a"utorul atri$utului $acJ'round al etic+etei
L1.3KM.
. ima'ine poate &eri drept le'tur ctre un alt document =>?@ prin includerea etic+etei
LI?AM ntre etic+etele L*M LG*M.
. practic de& folo&it e&te in&erarea n pa'in a ima'inilor miniaturale care la e-ecutarea unui
click pe ele de&c+id ima'inea ori'inal.
?uzica de fundal poate fi adu'at unui document prin intermediul etic+etei L1A2.7F3M.
*le'erea ima'inilor care or fi inclu&e ntr,un document =>?@ tre$uie fcut cu 'ri", n func!ie
de rolul ace&tora n &tructura documentului %i a(nd permanent n edere timpul de ncrcare al pa'inii.
14. Test
4. Ce etichet folosim pentru a insera o imagine 6n pagin9
a; LI?AM
a; L*M
$; L6I0M
). 0tributul &rc serve7te la4
a; pozi!ionarea ima'inii n pa'in
a; &ta$ilirea numelui %i loca!iei unde &e afl ima'inea
$; crearea unei le'turi prin intermediul ima'inii
+. 0tributele Cidt+ 7i +ei'+t ale etichetei LI?AM sunt folosite pentru4
a; dimen&ionarea te-tului
a; alinierea ima'inii cu te-tul
$; dimen&ionarea ima'inii
,. Ce efect are absena atributelor Cidt+ 7i +ei'+t din eticheta LI?AM9
a; Fu &e afi%eaz ima'inea.
a; Ima'inea &e afi%eaz pe toata &uprafa!a fere&trei $roC&erului.
$; 1roC&erul a%teapt ncrcarea complet a ima'inii nainte de a ncepe afi%area te-tului.
3. Care dintre atributele urmtoare permit afi7area textului 6n ;urul imaginii9
a; top
a; $ottom
$; middle
4. Care dintre construciile urmtoare este folosit pentru a stabili ca fond al paginii
imaginea rice)gif9
a; LI?A $acJ'roundS/rice.'if/M
a; LI?A &rcS/rice.'if/ $acJ'roundM
$; L1.3K $acJ'roundS/rice.'if/M
1;. Ce reali8ea8 atributul alt 6n urmtoarea construcie9
LI?A &rcS/do'.'if/ altS/catel/M
a; *fi%eaz cu(ntul catel l(n' ima'ine.
a; *fi%eaz cu(ntul catel n &pa!iul rezerat ima'inii.
$; *tri$uie fi%ierului dog)gif numele catel.
11. Care dintre urmtoarele construcii plasea8 imaginea 6n stHnga 7i alinia8 textul 6n
;urul imaginii9
a; LI?A &rcS/moon.'if/ CrapS/left/M
a; LI?A &rcS/moon.'if/ ali'nS/left/M
$; LI?A &rcS/moon.'ifM ali'nS/Crap/M
12. Care dintre urmtoarele construcii are drept efect folosirea imaginii sign)gif ca
legtur9
a; L* +refS/&emn.+tml/MLG*MLI?A &rcS/&i'n.'ifM
p; L* &rcS/&emn.+tmlMLI?A +refS/&i'n.'if/MLG*M
T; L* +refS/&emn.+tmlMLI?A &rcS/&i'n.'if/MLG*M
13. &entru a include 6n pagin o imagine video se folose7te urmtoarea construcie4
a; LI?A &rcS/75@Vima'ine/M
a; LI?A dIn&rcS/75@Vima'ine/M
$; LI?A ideoS/75@Vima'ine/M
7a-ini
1. a;
'. $;
+. c;
0. c;
1. $;
:. c;
<. $;
=. $;
>. c;
1@. $;
Capitolul =
Liste
@i&tele reprezint unele dintre cele mai o$i%nuite elemente dintr,o pa'in 4e$. *ce&tea &unt
de&eori folo&ite pentru a prezenta informa!iile n mod or'anizat, ntr,o manier acce&i$il %i u%or de
parcur&.
#le pot fi de trei tipuri)
r; li&te ordonate 9marcate prin numere &au litere;,
&; li&te neordonate 9marcate prin cratime, $uline &au alte &im$oluri;
t; li&te de de,ini#ii, afi%ate fr nici un fel de marca".
En interiorul etic+etelor care delimiteaz o li&t pot fi folo&ite orice alte etic+ete =>?@, cum ar fi
etic+ete de formatare a te-tului, le'turi, ima'ini, etc.
1. Liste neordonate
. li&t neordonat% reprezint o colec!ie de elemente nrudite, di&pu&e ntr,o ordine oarecare. 7n
e-emplu tipic pentru o pa'in 4e$ e&te o li&t de linJ,uri &pre alte documente.
*ce&t tip de li&t e&te de fapt un $loc de te-t delimitat de etic+etele
5UL9 5JUL9 9unordered listSli&t neordonat;. #tic+eta de nc+idere LG7@M e&te o$li'atorie.
Diecare element al li&tei e&te introdu& prin etic+eta 5L79 9list item;. 0u toate c etic+eta L@IM e&te
o etic+et container, etic+eta &a de nc+idere, LG@IM, e&te op!ional. 3ac nu e&te prezent, la nt(lnirea
unei noi etic+ete L@IM &e con&ider c ec+ea etic+et e&te nc+i&.
@i&ta a fi afi%at indentat fa! de re&tul pa'inii %i fiecare element al li&tei ncepe pe un r(nd nou.
En mod pre&ta$ilit, fiecare element al li&tei a fi marcat 9bulleted; cu /$ulin/. #-emplul 8.1
con&truie%te o li&t neordonat, a&pectul &u fiind cel din
Di'ura 8.1.
("eplul =. 1
L=>?@M
L=#*3M
L>I>@#Mli&te1LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M@i&ta neordonataLG=1ML=5M
L7@M0ulori
L@IM1lacJ
L@IM4+ite
L@IM5ed
L@IMAreen
L@IM1lue
L@IMKelloC
L@IM6urple
L@IM*Tua
LG7@M
LG1.3KM
LG=>?@M
#tic+etele L7@M %i L@IM pot aea definit atri$utul tGpe care &ta$ile%te caracterul afi%at n fa!a
fiecrui element al li&tei. Ualorile po&i$ile al ace&tui atri$ut &unt)
u; circle 9cerc;
; di&c 9di&c plin; , aloarea pre&ta$ilit
C; &Tuare 9patrat;
@i&ta din #-emplul 8.2 are atri$utul tIpe &etat la aloarea /&Tuare/. @i&ta e&te marcat a%a cum &e
poate edea n Di'ura 8.2
("eplul =. '
L=>?@M
L=#*3M
L>I>@#Mli&te2LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M*tri$utul tIpe la li&te neordonateLG=1ML=5M
L7@ tIpeS/&Tuare/M@im$a"e de pro'ramare
L@IM0
L@IM0YY
L@IM6a&cal
L@IM 1a&ic
L@IM6erl
LG7@M
LG1.3KM
LG=>?@M
2etarea atri$utului tIpe pentru un item al li&tei nlocuie%te tipul de marca" cu tipul &pecificat
pentru acel item.
En Di'ura 8.3 pute!i o$&era efectul &etrii atri$utului tIpe pentru un item indiidual la li&tei.
("eplul =. +
L=>?@M
L=#*3M
L>I>@#Mli&te3LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M*tri$utul tIpe la itemul unei li&te LG=1ML=5M
L7@ tIpeS/&Tuare/M@im$a"e de pro'ramare
L@IM0
L@IM0YY
L@IM6a&cal
L@I tIpeS/circle/M1a&ic
L@IM6erl
LG7@M
LG1.3KM
LG=>?@M
0orme particu!are de !iste neordonate
-; Lista de directoare $ e&te o li&t introdu& prin etic+eta 567R9 5J67R9. #tic+eta a fo&t
ini!ial utilizat pentru alctuirea li&telor de fi%iere. ?ulte $roC&ere nu fac nici o diferen! ntre
etic+etele L3I5M %i L7@M, efectul lor fiind acela%i.
I; Lista de eniuri , utilizeaz etic+eta 5M(AU9. 7nele $roC&ere afi%eaz li&ta doar n
format u%or diferit fa! de li&tele neordonate, altele n& folo&e&c c+iar un fel de meniu 'rafic de tip
pull!don pentru afi%area ace&tor li&te.
2. Liste ordonate
. li&t ordonat% e&te un $loc de te-t delimitat de etic+etele 5BL9 5JBL9 9ordered list , li&t
ordonat;, etic+eta de nc+idere fiind o$li'atorie.
Diecare element al li&tei e&te ini!iat de etic+eta 5L79 9list item;. 0a %i n cazul li&telor neordonate,
li&ta a fi indentat fa! de re&tul pa'inii 4e$ %i fiecare element al li&tei a ncepe pe o linie nou.
3iferen!a fa! de li&tele neordonate e&te aceea c n ace&t caz marcarea elementelor &e face prin
cifre, nu prin &im$oluri.
#-emplul 8.4 afi%eaz o li&t ordonat, marcat cu cifre ara$e a&pectul ei fiind cel din Di'ura 8.4.
("eplul =. 0
L=>?@M
L=#*3M
L>I>@#Mli&te4LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M@i&ta ordonataLG=1ML=5M
L.@M0a&ti'atorii concur&ului &unt)
L@IM6ope&cu ?aria
L@IMIone&cu Ion
L@IM1ratu *na
LG.@M
LG1.3KM
LG=>?@M
6entru etic+etele L.@M %i L@IM &e poate &eta atri$utul tGpeR care &ta$ile%te tipul de caractere
utilizate pentru ordonarea li&tei. Ualorile po&i$ile ale ace&tui atri$ut &unt)
* , pentru ordonare de tipul * , 1 , 0...9litere mari;
a , pentru ordonare de tipul a , $ , c...9litere mici;
I , pentru ordonare de tipul I , II , III , IU...9cifre romane mari;
i , pentru ordonare de tipul i , ii , iii , i...9cifre romane mici;
1 , pentru ordonare de tipul 1 , 2 , 3...9cifre ara$e , op!iune pre&ta$ilit;
3e a&emenea etic+eta L.@M poate aea &etat atri$utul start, care &ta$ile%te aloarea ini!ial a
&ecen!ei de ordonare. Ualoarea ace&tui atri$ut tre$uie & fie un numr ntre' poziti.
#-emplul 8.5 con&truie%te o li&t numerotat cu cifre romane mari ncep(nd de la pozi!ia a treia.
*&pectul pa'inii care con!ine acea&t li&t e&te redat n Di'ura 8.5.
("eplul =. 1
L=>?@M
L=#*3M
L>I>@#Mli&te5LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M*tri$utul tIpe la li&te ordonateLG=1ML=5M
L.@ tIpeS/I/ &tartS/3/M?anuale
L@IMI&torie
L@IMAeo'rafie
L@IM1iolo'ie
L@IM0+imie
LG.@M
LG1.3KM
LG=>?@M
0a %i n cazul li&telor neordonate, &etarea atri$utului tIpe pentru un anumit item al li&tei
nlocuie%te tipul de numerotare &ta$ilit pentru ntrea'a li&t cu tipul &pecificat pentru acel element.
3. (m<ricarea !iste!or
En cadrul unei li&te, fie ea ordonat &au neordonat, &e pot include alte li&te, procedeu numit
ibricare. Diecare li&t nou inclu& n precedenta &e a afi%a indentat fa! de nielul li&tei anterioare.
@i&tele pot fi im$ricate n toate modurile dorite, ca n #-emplul 8.6. Di'ura 8.6 red a&pectul li&tei
con&truite n ace&t e-emplu.
("eplul =. :
L=>?@M
L=#*3M
L>I>@#Mli&te6LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M@i&te im$ricateLG=1ML=5M
L7@M
L@IM1ulina 1
L.@M
L@IMFumarul 1
L@IMFumarul 2
LG.@M
L@IM1ulina 2
L@IM1ulina 3
L7@ tIpeS/&Tuare/M
L@IM6atrat 1
L@IM6atrat 2
L@IM6atrat 3
LG7@M
L@IM1ulina 4
LG7@M
LG1.3KM
LG=>?@M
4. Liste de de'iniii
@i&tele de de,ini#ii reprezint un tip &pecial de li&te n care elementele li&tei nu &unt nici
numerotate 9ca n li&tele ordonate;, nici marcate prin $uline 9ca n li&tele neordonate; %i care prezint
dou niele de indentare.
@i&tele de defini!ii &unt $locuri de te-t inclu&e ntre etic+etele 56L9 5J6L9 9definition list;,
etic+eta de nc+idere fiind o$li'atorie. Diecare element al li&tei e&te introdu& prin etic+eta 56T9
9definition term;. Diecare element introdu& prin etic+eta L3>M con!ine la r(ndul &u un numr de
elemente care l define&c, introdu&e prin etic+eta 5669 9definition description;.
0a %i n cazul etic+etei L@IM, etic+etele de nc+idere LG3>M %i LG33M &unt op!ionale. En #-emplul
8.7 e&te con&truit o li&t de defini!ii.
("eplul =. <
L=>?@M
L=#*3M
L>I>@#Mli&te7LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M@i&te de definitiiLG=1ML=5M
L3@M
L3>MIarna
L33MFin'e
L33M# fri'
L33Mgiua e mai &curta dec(t noaptea
L3>M6rimaara
L33MFatura &e treze&te la iata
L33MInflore&c pomii
L33M2e intorc pa&arile calatoare
L3>MUara
L33M>otul e erde
L33M# foarte cald
L33Mgiua e mai lun'a dec(t noaptea
L3>M>oamna
L33M2e coc fructele
L33M2e &tran'e recolta
L33M0ad frunzele
LG3@M
LG1.3KM
LG=>?@M
*&pectul li&tei de defini!ii de mai &u& e&te cel din Di'ura 8.7.
#tic+etele L3@M %i LG3@M marc+eaz nceputul %i &f(r%itul li&tei, termenii care fac parte din li&t
9Iarna, 6rimara, Uara, >oamna ; &unt introdu%i prin etic+eta L3>M iar defini!iile termenilor, prin
etic+etele L33M.
2e pot realiza li&te ale cror elemente & fie linJ,uri, ima'ini &au $locuri de te-t. En #-emplul 8.8,
elementele li&tei &unt ima'ini, a%a cum &e poate edea n Di'ura 8.8.
("eplul =. =
L=>?@M
L=#*3M
L>I>@#Mli&te8LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M@i&te de ima'iniLG=1ML=5M
L3@M
L3>MDlori
L33M
LI?A &rcS/..GIma'iniGro&e1."p'/ Cidt+S/120/ +ei'+tS/120/M
L33M
LI?A &rcS/..GIma'iniGoran'ero&e.'if/ Cidt+S/120/ +ei'+tS/120/M
L3>M>e-turi
L33M
LI?A &rcS/..GIma'iniG&ilJ."p'/ Cidt+S/120/ +ei'+tS/120/M
L33M
LI?A &rcS/..GIma'iniGlace.'if/ Cidt+S/120/ +ei'+tS/120/M
LG3@M
LG1.3KM
LG=>?@M
#-emplul 8.9 creeaz dou li&te im$ricate de le'turi. *&pectul pa'inii care con!ine acea&t li&t
e&te redat n Di'ura 8.9. 6ute!i te&ta direct func!ionarea li&tei dac a!i &alat fi%ierele =>?@ con&truite
la capitolele anterioare &u$ numele &pecificat n $locul L>I>@#M al fiecrui document. En cazul c(nd a!i
preferat alte denumiri pentru fi%iere, pute!i &c+im$a numele fi%ierelor prezente n cadrul e-emplului cu
propriile dumneaoa&tr fi%iere.
("eplul =. >
L=>?@M
L=#*3M
L>I>@#Mli&te9LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M@i&te de le'aturiLG=1ML=5M
L.@ tIpeS/I/M
L@IM0ulori
L.@M
L@IML* +refS/culori1.+tml/M0uloarea fundaluluiLG*M
L@IML* +refS/culori2.+tml/M0uloarea te-tuluiLG*M
L@IML* +refS/culori3.+tml/M0uloarea le'aturilorLG*M
LG.@M
L@IMDonturi
L.@M
L@IML* +refS/fonturi1.+tml/M#tic+eta D.F>LG*M
L@IML* +refS/fonturi2.+tml/M#tic+eta 1*2#D.F>LG*M
L@IML* +refS/fonturi4.+tml/M#tic+ete de accentuare a te-tuluiLG*M
LG.@M
LG.@M
LG1.3KM
LG=>?@M
). -e.umat
Entr,o pa'in 4e$ pot fi introdu&e dier&e tipuri de li&te)
z; @i&te neordonate prin etic+eta L7@M LG7@M, marcate prin &im$oluri de tip $uline,
cercuri &au ptrate
aa; @i&te ordonate prin etic+eta L.@M LG.@M marcate prin cifre ara$e, cifre romane mari
&au mici, litere mari &au mici
$$; @i&te de defini!ii prin etic+eta L3@M LG3@M nemarcate
#lementele li&telor ordonate %i neordonate &e introduc prin etic+eta L@IM.
#lementele li&telor de defini!ii &e introduc prin etic+etele L3>M %i L33M.
@i&tele pot con!ine orice tip de elemente) te-t, ima'ini, linJ,uri &au alte li&te 9n ace&t caz
o$!in(ndu,&e li&te im$ricate;.
+. Test
14. 5ticheta L7@M se folose7te pentru a iniia4
a; o li&t ordonat
a; o li&t neordonat
$; dou li&te im$ricate
Care dintre urmtoarele afirmaii este fals9
a; #tic+eta L@IM &ere%te pentru a introduce fiecare element al unei li&te ordonate.
a; #tic+eta L@IM &ere%te pentru a introduce fiecare element al unei li&te neordonate.
$; #tic+eta L@IM &ere%te pentru a introduce fiecare element al unei li&te de defini!ii.
:n construcia L7@ tIpeS/&Tuare/M ce rol are atributul tIpe9
a; 0on&truie%te o li&t neordonat.
a; 2ta$ile%te caracterul care a fi afi%at n fa!a fiecrui element al li&tei.
$; 0on&truie%te o li&t care are ca elemente ima'ini.
O list ordonat este introdus prin eticheta4
a; L7@M
a; L.@M
$; L3@M
Ce rol are atributul tIpe 6n urmtoarea construcie4 L.@ tIpeS/a/M9
a; 0on&truie%te o li&t de litere care ncepe cu caracterul /a/.
a; 0on&truie%te o li&t ordonat.
$; 2ta$ile%te faptul c elementele li&tei or fi marcate cu litere mici.
Ce este incorect 6n exemplul urmtor9
L7@M
L@IM@im$a"e de pro'ramare
L.@M
L@IM0YY
L@IM6erl
L@IMBaa
LG.@M
L@IM2i&teme de operareM
L.@M
L@IM?23o&
L@IM7ni-
LG7@M
LG.@M
a; Fu e&te permi& im$ricarea li&telor neordonate cu li&te ordonate.
a; #&te a$&ent etic+eta de nc+idere LG@IM.
$; #tic+etele L7@M %i L.@M nu &unt nc+i&e corect.
O list de definiii se introduce prin eticheta4
a; L7@M
a; L3>M
$; L3@M
Care este ordinea corect 6n care se introduc elementele unei liste de definiii9
a; a; L3@M L3>M L33M
a; $; L33M L3>M L3@M
$; c; L3>M L3@M L33M
Ce reali8ea8 urmtoarea construcie9
L7@M
L@IMLI?A &rcS/pic1.'if/M
L@IMLI?A &rcS/pic2.'if/M
LG7@M
a; 0on&truie%te o li&t de ima'ini marcate prin $uline.
a; 0on&truie%te o li&t de linJ,uri ctre ima'inile &pecificate.
$; Fimic, deoarece e&te incorect ca elementele unei li&te & fie ima'ini.
Cum sunt marcate elementele unei liste de definiii9
a; prin $uline
a; prin numere
$; nu &unt marcate
Liste
1. $;
'. c;
+. $;
0. $;
1. c;
:. c;
<. c;
=. a;
>. a;
1@. c;
Capitolul 9
Tabele
Tabelul e&te un element &tructural de $az n alctuirea unei pa'ini 4e$. En cadrul unui ta$el pot
fi inclu&e oricare dintre elementele care fac parte din corpul unui document =>?@) te-t, ima'ini, linii
orizontale, titluri, le'turi, alte ta$ele, etc. >a$elele con&tituie un in&trument e-trem de util de
or'anizare a pa'inii 4e$, realiz(nd alinierea elementelor %i pla&area lor n locurile dorite de de&i'nerul
pa'inii.
7n ta$el e&te o 'ril dreptun'+iular format din linii %i coloane. 0a&eta format la inter&ec!ia
unei linii cu o coloan &e nume%te celul%.
. linie a ta$elului e&te format dintr,un %ir de celule aliniate pe orizontal, iar o coloan% e&te
format dintr,un %ir de celule aliniate pe ertical.
0elulele ta$elului con!in date 9te-t, ima'ini, linJ,uri;, fiecare celul a(nd propriile op!iuni pentru
culoarea fondului, culoarea te-tului, alinierea te-tului etc.
1. Crearea unui tabel
6entru a in&era un ta$el ntr,un document =>?@ &e folo&e&c etic+etele core&pondente <TABLE>
</TABLE>. #tic+eta <TABLE> e&te o etic+et container, deci etic+eta de final e&te o$li'atorie. *$&en!a
ei face ca ta$elul & nu fie afi%at corect.
6entru a in&era o linie ntr,un ta$el &e folo&e&c etic+etele <TR> </TR> 9table ro;. Dolo&irea
etic+etei de nc+idere </TR> e&te op!ional.
*%a cum &puneam, fiecare linie de ta$el e&te format din mai multe celule ce con!in date. . celul
de date &e introduce cu etic+eta <TD> </TD> 9table data;. #tic+eta de nc+idere </TD> e&te de
a&emenea op!ional.
En #-emplul 9.1 am con&truit un ta$el format din patru linii, fiecare linie a(nd c(te dou celule
de date. *&pectul ta$elului e&te redat n Di'ura 9.1.
("eplul >. 1
<HTML>
<HEAD>
<TITLE>tabele1</TITLE>
</HEAD>
<BODY>
<H1 align="center">Crearea unui tabel</H1><HR>
<TABLE>
<TR>
<TD>celula 11
<TD>celula 11
<TR>
<TD>celula 1
<TD>celula
<TR>
<TD>celula !1
<TD>celula !
<TR>
<TD>celula "1
<TD>celula "
</TABLE>
</BODY>
</HTML>
En mod pre&ta$ilit, un ta$el nu are c+enar izi$il. 6entru a adu'a un c+enar unui ta$el, &e
utilizeaz atri$utul border al etic+etei <TABLE>. *ce&t atri$ut poate primi ca aloare orice numr
ntre' 9inclu&i 0; %i reprezint 'ro&imea n pi-eli a c+enarului ta$elului.
3aca atri$utul b#r$er nu e&te urmat de o aloare atunci c+enarul ta$elului a aea o 'ro&ime
pre&ta$ilit e'al cu 1 pi-el, iar o aloare e'al cu 0 a atri$utului b#r$er &emnific a$&en!a
c+enarului.
0(nd atri$utul b#r$er are o aloare nenul c+enarul ta$elului are un a&pect tridimen&ional.
En #-emplul 9.2 e&te con&truit un ta$el cu c+enar, a%a cum &e o$&er n Di'ura 9.2. 6entru a te&ta
func!ionarea atri$utului b#r$er, nlocui!i n e-emplul de mai "o& aloarea /4/ %i cu alte alori. Fu
uita!i ca dup fiecare modificare & &ala!i fi%ierul %i & ap&a!i $utonul Refresh2Reload al $roC&erului.
("eplul >. '
<HTML>
<HEAD>
<TITLE>tabele</TITLE>
</HEAD>
<BODY>
<H1 align="center">C%enarul unui tabel</H1><HR>
<TABLE b#r$er=""">
<TR>
<TD>celula 11
<TD>celula 1
<TR>
<TD>celula 1
<TD>celula
<TR>
<TD>celula !1
<TD>celula !
<TR>
<TD>celula "1
<TD>celula "
</TABLE>
</BODY>
</HTML>
0elulele unui ta$el pot con!ine %i alte elemente n afar de te-t) ima'ini, le'turi, formulare, etc.
#-emplul 9.3 con&truie%te un ta$el cu dou linii %i dou coloane, celulele ta$elului a(nd drept
con!inut ima'ini. *&pectul ta$elului e&te cel din Di'ura 9.3.
("eplul >. +
<HTML>
<HEAD>
<TITLE>tabele!</TITLE>
</HEAD>
<BODY>
<H1 align="center">Tabel care c#ntine i&agini</H1><HR>
<TABLE b#r$er=""">
<TR>
<TD><IM' (rc="))/I&agini/$#nut)gi*">
<TD><IM' (rc="))/I&agini/gi*t)gi*">
<TR>
<TD><IM' (rc="))/I&agini/in+e(t)gi*">
<TD><IM' (rc="))/I&agini/gl#be)gi*">
</TABLE>
</BODY>
</HTML>
2. Alinierea tabelului n pagin
6entru a alinia un ta$el ntr,o pa'ina 4e$ &e utilizeaz atri$utul align al etic+etei <TABLE>, cu
urmtoarele alori po&i$ile)
le*t 9aloarea pre&ta$ilit; , te-tul care urmeaz dup punctul de in&erare al ta$elului a fi
di&pu& n partea dreapt a ta$elului.
center , te-tul care urmeaz dup punctul de in&erare al ta$elului a fi afi%at pe toat
l!imea pa'inii, imediat &u$ ta$el.
rig%t , te-tul care urmeaz dup punctul de in&erare al ta$elului a fi di&pu& n partea
&t(n' a ta$elului.
En #-emplul 9.4 e&te ilu&trat con&truirea unui ta$el aliniat la dreapta. 6a'ina a aea a&pectul din
Di'ura 9.4.
("eplul >. 0
<HTML>
<HEAD>
<TITLE>tabele"</TITLE>
</HEAD>
<BODY>
<H1 align="center">Alinierea tabelului in ,agina</H1><HR>
<TABLE b#r$er="!" align="rig%t">
<TR>
<TD>celula 11
<TD>celula 1
<TR>
<TD>celula 1
<TD>celula
</TABLE>
Ace(t te-t e(te ,la(at in (tanga tabelului
</BODY>
</HTML>
3i&tan!a dintre ta$el %i celelalte elemente din pa'ina 4e$ poate fi &ta$ilit cu a"utorul atri$utelor
hspace %i vspace al etic+etei <TABLE>.
Ualoarea atri$utului %(,ace poate fi orice numr poziti, inclu&i 0, %i reprezint di&tan!a pe
orizontal dintre ta$el %i celelalte elemente ale pa'inii 4e$.
*nalo', aloarea atri$utului +(,ace reprezint di&tan!a pe ertical dintre ta$el %i celelalte
elemente ale pa'inii. *tri$utele %(,ace %i +(,ace &unt recuno&cute numai de $roC&erele Fet&cape.
#-emplul 9.5 ilu&treaz utilitatea celor dou atri$ute.
("eplul >. 1
<HTML>
<HEAD>
<TITLE>tabele.</TITLE>
</HEAD>
<BODY>
<H1 align="center">/,atierea tabelului *ata $e re(tul te-tului
</H1><HR>
Tabelul $e &ai 0#( e(te (,atiat ,e +erticala *ata $e ace(t te-t cu
1. ,i-eli) Tabelul $e &ai 0#( e(te (,atiat ,e +erticala *ata $e ace(t
te-t cu 1. ,i-eli) Tabelul $e &ai 0#( e(te (,atiat ,e +erticala *ata $e
ace(t te-t cu 1. ,i-eli<BR>
<TABLE b#r$er align="le*t" +(,ace="1." %(,ace="11">
<TR>
<TD>celula 11
<TD>celula 1
<TR>
<TD>celula 1
<TD>celula
</TABLE>
Ace(t te-t e(te ,la(at in $rea,ta tabelului la $i(tanta $e 11
,i-eli ,e #ri2#ntala *ara $e tabel) Ace(t te-t e(te ,la(at in $rea,ta
tabelului la $i(tanta $e 11 ,i-eli ,e #ri2#ntala *ara $e tabel) Ace(t
te-t e(te ,la(at in $rea,ta tabelului la $i(tanta $e 11 ,i-eli ,e
#ri2#ntala *ara $e tabel)
</BODY>
</HTML>
6entru a o$&era efectul celor dou atri$ute edita!i ace&t e-emplu %i izualiza!i,l cu un $roC&er
Fet&cape.
*tri$utele nefiind recuno&cute de Internet #-plorer, a&pectul pa'inii la izualizarea cu ace&t
$roC&er a fi cel din Di'ura 9.5.
3. Dimensionarea unui tabel
3imen&iunile unui ta$el , l!imea %i nl!imea , pot fi &ta$ilite e-act prin intermediul atri$utelor
width %i height ale etic+etei <TABLE>.
Ualorile ace&tor atri$ute pot fi)
numere ntre'i pozitie reprezent(nd l!imea re&pecti nl!imea n pi-eli a ta$elului
numere ntre'i ntre 1 %i 100, urmate de &emnul :, reprezent(nd procente din l!imea %i
nl!imea total a pa'inii.
Iat un e-emplu de ta$el cu nl!imea de 200 de pi-eli %i l!imea e'al cu 50: din l!imea pa'inii
9#-emplul 9.6;
("eplul >. :
<HTML>
<HEAD>
<TITLE>tabele3</TITLE>
</HEAD>
<BODY>
<H1 align="center">Di&en(i#narea unui tabel</H1><HR>
Tabel cu lungi&ea $e .14 $in ,agina (i inalti&ea $e 11 $e
,i-eli<5>
<TABLE b#r$er 6i$t%=".14" %eig%t="11">
<TR>
<TD>celula 11
<TD>celula 1
<TR>
<TD>celula 1
<TD>celula
</TABLE>
</BODY>
</HTML>
*&pectul ta$elului con&truit n documentul de mai &u& e&te cel din Di'ura 9.6.
3imen&iunile unui ta$el includ %i aloarea dat atri$utului b#r$er. 3e e-emplu, un ta$el cu o
&in'ur linie %i o &in'ur coloan, cu dimen&iunile 6i$t%="111"7 %eig%t=".1" %i a(nd atri$utul
b#r$er &etat la aloarea 10, a aea drept &pa!iu util 80 de pi-eli pe l!ime %i 30 de pi-eli pe nl!ime.
7na dintre cele mai frecente utilizri a ta$elelor e&te pozi!ionarea unui te-t ntr,o anumit zon a
pa'inii, prin realizarea unui ta$el fr c+enar 9b#r$er="1"; cu o &in'ur linie %i o &in'ur coloan, ca
n #-emplul 9.7.
("eplul >. <
<HTML>
<HEAD>
<TITLE>tabele8</TITLE>
</HEAD>
<BODY>
<H1 align="center">5#2iti#narea unui te-t</H1>
<TABLE b#r$er="1" 6i$t%="314" %eig%t="1114" align="center">
<TR>
<TD>
Ace(t te-t e(te ,#2iti#nat in centrul ,aginii) Ace(t te-t
e(te ,#2iti#nat in centrul ,aginii) Ace(t te-t e(te ,#2iti#nat
in centrul ,aginii) Ace(t te-t e(te ,#2iti#nat in centrul
,aginii) Ace(t te-t e(te ,#2iti#nat in centrul ,aginii)
</TABLE>
</BODY>
</HTML>
En Di'ura 9.7 e&te redat a&pectul ta$elului con&truit mai &u&.
4. Spaierea celulelor unui tabel
3i&tan!a dintre dou celule ecine &e define%te cu a"utorul atri$utului cellspacing al etic+etei
<TABLE>.
Ualorile ace&tui atri$ut pot fi numere ntre'i pozitie, inclu&i 0, %i reprezint di&tan!a n pi-eli
dintre dou celule ecine. Ualoarea pre&ta$ilit a atri$utului cell(,acing e&te de 2 pi-eli.
#-emplul 9.8 ilu&treaz func!ionarea atri$utului cell(,acing. *&pectul ta$elului e&te cel din
Di'ura 9.8. 6ute!i modifica aloarea atri$utului cell(,acing pentru a o$&era cum &e &pa!iaz
celulele n func!ie de alorile pe care le da!i.
("eplul >. =
<HTML>
<HEAD>
<TITLE>tabele9</TITLE>
</HEAD>
<BODY>
<H1 align="center">/,atierea celulel#r</H1><HR>
<TABLE b#r$er="!" cell(,acing="11">
<TR>
<TD>Maria
<TD>B#g$an
<TR>
<TD>Ale-an$ru
<TD>Irina
</TABLE>
</BODY>
</HTML>
3i&tan!a dintre mar'inea unei celule %i con!inutul ei poate fi definit cu a"utorul atri$utului
cellpadding al etic+etei <TABLE>. Ualorile ace&tui atri$ut pot fi numere ntre'i pozitie, %i
reprezint di&tan!a n pi-eli dintre mar'inile celulei %i con!inutul ei. Ualoarea pre&ta$ilit a atri$utului
cell,a$$ing e&te 1 pi-el.
#-emplul 9.9 con&truie%te un ta$el n care di&tan!a dintre mar'inea celulelor %i con!inutul lor e&te
de 20 de pi-eli. *&pectul ace&tui ta$el e&te cel din Di'ura 9.9.
("eplul >. >
<HTML>
<HEAD>
<TITLE>tabele:</TITLE>
</HEAD>
<BODY>
<H1 align="center"> /,atierea te-tului in celule</H1><HR>
<TABLE b#r$er cell,a$$ing="1">
<TR>
<TD>Maria
<TD>B#g$an
<TR>
<TD>Ale-an$ru
<TD>Irina
</TABLE>
</BODY>
</HTML>
5. Dimensionarea celulelor unui tabel
3imen&iunile unei celule de tip <TD> &au de tip <TH> 9ezi mai "o& etic+eta <TH>; pot fi &ta$ilite
e-act cu a"utorul a dou atri$ute ale ace&tor etic+ete) width pentru l!ime %i height pentru nl!ime.
Ualorile po&i$ile ale ace&tor atri$ute &unt)
numere ntre'i pozitie 9inclu&i 0; reprezent(nd dimen&iunea n pi-eli a l!imii, re&pecti a
nl!imii unei celule
procente din l!imea , re&pecti nl!imea ta$elului.
En #-emplul 9.10 am dimen&ionat celula 11 la l!imea de 20: din l!imea ta$elului %i nl!imea
e'al cu 75: din nl!imea lui. *%a cum &e poate o$&era din Di'ura 9.10 dimen&ionarea indiidual a
unei celule a afecta dimen&ionarea tuturor celulelor din linia %i coloana din care face parte celula
re&pecti. 2e o$&er c celula 12 are l!imea e'al cu re&tul de 80: din l!imea ta$elului. 0elula 21
aflat pe aceea%i coloana cu celula dimen&ionat are acelea%i dimen&iuni ca %i ea.
("eplul >. 1@
<HTML>
<HEAD>
<TITLE>tabele11</TITLE>
</HEAD>
<BODY>
<H1 align="center">Di&en(i#narea celulel#r</H1><HR>
Tabel cu celule $i&en(i#nate in$i+i$ual<5>
<TABLE b#r$er>
<TR>
<TD 6i$t%="14" %eig%t="8.4">celula 11
<TD>celula 1
<TR>
<TD>celula 1
<TD>celula
</TABLE>
</BODY>
</HTML>
6. Alinierea coninutului unei celule
*linierea pe orizontal a con!inutului unei celule &e face cu a"utorul atri$utului align care poate
lua alorile)
le*t , la &t(n'a
center , centrat , aloarea pre&ta$ilit
rig%t , la dreapta
*linierea pe ertical a con!inutului unei celule &e face cu a"utorul atri$utului valign care poate
lua alorile)
ba(eline , la $az
b#tt#& , "o&
&i$$le , la mi"loc, aloarea pre&ta$ilit
t#, , &u&
*ce&te atri$ute pot fi ata%ate at(t etic+etei <TR> pentru a defini alinierea tuturor celulelor unei
linii, c(t %i etic+etelor <TD> %i <TH> 9ezi mai "o& etic+eta <TH>; pentru a &ta$ili alinierea te-tului ntr,
o &in'ur celul. En #-emplul 9.11 e&te ilu&trat func!ionarea atri$utelor align %i +align.
>e-tul din celulele primei, celei de,a doua %i celei de,a patra linii a fo&t aliniat prin atri$utul
align a&ociat liniei, iar te-tul din celulele liniei a treia a fo&t aliniat prin atri$utul align a&ociat
fiecrei celule n parte. *&pectul ta$elului e&te cel din Di'ura 9.11.
("eplul >. 11
<HTML>
<HEAD>
<TITLE>tabele11</TITLE>
</HEAD>
<BODY>
<H1 align="center"> Alinierea c#ntinutului celulel#r</H1><HR>
<TABLE b#r$er 6i$t%=".14" %eig%t="914">
<TR align="rig%t">
<TD>$rea,ta
<TD>$rea,ta
<TR align="center">
<TD>centru
<TD>centru
<TR>
<TD +align="t#,">(u(
<TD +align="b#tt#&">0#(
<TR align="le*t">
<TD>(tanga
<TD>(tanga
</TABLE>
</BODY>
</HTML>
3ac e&te prezent un atri$ut de aliniere ata%at etic+etei <TR> %i pe linia re&pecti o anumit
celul are propriul &u atri$ut de aliniere, atri$utul de aliniere a&ociat etic+etei <TD> are prioritate fa!
de cel a&ociat etic+etei <TR>.
7. Deinirea culorilor pentru un tabel
0uloarea de fond a unui ta$el &e &ta$ile%te cu a"utorul atri$utului bgcolor, care poate fi ata%at
dup cum urmeaz)
ntre'ului ta$el prin etic+eta <TABLE>,
unei linii prin etic+eta <TR>
unei celule de date prin etic+eta <TD>
Ualorile pe care le poate primi atri$utul bgc#l#r &unt cele cuno&cute pentru culori.
3ac ntr,un ta$el &unt definite mai multe atri$ute bgc#l#r, atunci prioritatea e&te, n ordine
de&cre&ctoare, urmtoarea)
1. <TD>
1. <TR>
2. <TABLE> <,ri#ritatea cea &ai &ica;
En #-emplul 9.12 e&te ilu&trat folo&irea atri$utului bgc#l#r.
("eplul >. 1'
<HTML>
<HEAD>
<TITLE>tabele1</TITLE>
</HEAD>
<BODY>
<H1 align="center">Cul#ri in tabel</H1><HR>
<TABLE b#r$er="." bgc#l#r="li&e">
<TR>
<TD>celula 11 +er$e
<TD bgc#l#r="re$">celula 1 r#(u
<TR bgc#l#r="blue">
<TD>celula 1 alba(tru
<TD bgc#l#r="=ell#6">celula galben
<TR bgc#l#r="c=an">
<TD>celula !1 c=an
<TD>celula ! c=an
<TR>
<TD>celula "1 +er$e
<TD bgc#l#r="6%ite">celula " alb
</TABLE>
</BODY>
</HTML>
3in Di'ura 9.12 pute!i o$&era cum func!ioneaz prioritatea atri$utului bgc#l#r. *&tfel, culoarea
ntre'ului ta$el a fo&t &ta$ilit prin etic+eta)
<TABLE bgc#l#r="li&e">
3ac o linie nu are &ta$ilit nici o alta culoare, culoarea liniei e&te erde de&c+i&. 6entru linia a
doua a ta$elului e&te &ta$ilit culoarea al$a&tru)
<TR bgc#l#r="blue">)
0elulele care fac parte din acea&ta linie %i care nu au &ta$ilit o alta culoare, or fi al$a&tre 9celula
21;. 0elelalte celule or aea culoarea &ta$ilit e-plicit pentru ele 9celula 22 a fi 'al$en;)
<TD bgc#l#r="=ell#6">
7n ta$el poate aea drept fundal nu numai o culoare, ci %i o ima'ine. *ce&t efect &e o$!ine
folo&ind atri$utul background al etic+etei <TABLE>, atri$utul primind ca aloare adre&a 75@ a
ima'inii. *tri$utul bac>gr#un$ poate fi ata%at %i unei linii, &ta$ilind fundalul tuturor celulelor din linia
re&pecti precum %i unei celule indiiduale, n ace&t caz &ta$ilind fundalul acelei celule.
#-emplul 9.13 ilu&treaz ace&t atri$ut, ta$elul a(nd a&pectul redat n Di'ura 9.13.
("eplul >. 1+
<HTML>
<HEAD>
<TITLE>tabele1!</TITLE>
</HEAD>
<BODY>
<H1 align="center">?un$alul unui tabel</H1><HR>
<TABLE b#r$er="." 6i$t%="11" %eig%t="11"
bac>gr#un$="))/I&agini/lace)gi*>
<TR>
<TD>celula 11
<TD>celula 1
<TR>
<TD>celula 1
<TD>celula
</TABLE>
</BODY>
</HTML>
0ulorile c+enarului unui ta$el &e pot &ta$ili folo&ind atri$utele)
bordercolor , permite &ta$ilirea culorii pentru c+enarul unui ta$el
bordercolorlight , permite &ta$ilirea culorii mar'inilor din &t(n'a %i de &u& ale ta$elului
bordercolordark , permite &ta$ilirea culorii mar'inilor din dreapta %i de "o& ale ta$elului
0uloarea te-tului din fiecare celul &e poate &ta$ili cu a"utorul e-pre&iei)
<?O@T c#l#r="AR'B (au nu&eBcul#are">te-t</?O@T>)
#-emplul 9.14 ilu&treaz folo&irea ace&tor atri$ute, a&pectul ta$elului fiind cel din Di'ura 9.14.
("eplul >. 10
<HTML>
<HEAD>
<TITLE>tabele1"</TITLE>
</HEAD>
<BODY>
<H1 align="center">Cul#rile c%enarului unui tabel</H1><HR>
<TABLE b#r$er="11" b#r$erc#l#r$ar>="blue" b#r$erc#l#rlig%t="c=an">
<TR>
<TD><?O@T c#l#r="green">celula 11</?O@T>
<TD><?O@T c#l#r="blue">celula 1</?O@T>
<TD><?O@T c#l#r="re$">celula 1!</?O@T>
<TR>
<TD><?O@T c#l#r="teal">celula 1</?O@T>
<TD><?O@T c#l#r="&agenta">celula </?O@T>
<TD><?O@T c#l#r="li&e">celula !</?O@T>
</TABLE>
</BODY>
</HTML>
*m &etat 'ro&imea c+enarului ta$elului la aloarea de 10 pi-eli, pentru a aea un a&pect
tridimen&ional mai pronun!at.
0u a"utorul atri$utului b#r$erc#l#r$ar> am &ta$ilit culoarea pr!ii /um$rite/ a c+enarului
9mar'inile de "o& %i din dreapta; iar cu a"utorul atri$utului b#r$erc#l#rlig%t, culoarea pr!ii
/luminate/ a ace&tuia 9mar'inile de &u& %i din &t(n'a; iar te-tul din celule l,am &cri& cu culori diferite,
folo&ind etic+eta <?O@T>.
0ulorile &ta$ilite pentru c+enarul e-terior al ta$elului &unt folo&ite %i pentru a colora liniile
de&pr!itoare dintre celulele ta$elului. 6entru ace&tea partea /um$rit/ e&te format din muc+iile de &u&
%i din &t(n'a iar partea /luminat/ e&te format din muc+iile de "o& %i din dreapta.
3ac dorim & colorm &eparat muc+iile care de&part liniile &au celulele ta$elului putem a&ocia
atri$utele b#r$erc#l#r, b#r$erc#l#r$ar> %i b#r$erc#l#rlig%t etic+etelor <TR> %i <TD>.
.ten#ieH
*tri$utele b#r$erc#l#r, b#r$erc#l#r$ar> %i b#r$erc#l#rlig%t nu &unt recuno&cute de
$roC&erul Fe&cape.
Uizualiza!i pa'ina de mai &u& cu un $roC&er Fet&cape pentru a o$&era a&pectul ei.
!. "itlul unui tabel
7nui ta$el i &e poate ata%a un titlu cu a"utorul etic+etei <CAT!"#> 9table captionStitlu ta$el;.
*cea&t etic+et tre$uie pla&at n interiorul etic+etelor <TABLE> </TABLE>, dar nu n interiorul
etic+etelor <TR> &au <TD>.
>itlul unui ta$el poate fi aliniat cu a"utorul atri$utului align al etic+etei <CA5TIO@> care poate
lua una dintre alorile)
b#tt#& , &u$ ta$el
t#, , dea&upra ta$elului
le*t , dea&upra, la &t(n'a ta$elului
rig%t , dea&upra, la dreapta ta$elului
En #-emplul 9.15 titlul ta$elului e&te aliniat dea&upra &a. *&pectul pa'inii e&te cel din Di'ura 9.15.
("eplul >. 11
<HTML>
<HEAD>
<TITLE>tabele1.</TITLE>
</HEAD>
<BODY>
<H1 align="center">Titlul unui tabel</H1><HR>
<TABLE b#r$er><CA5TIO@ align="t#,">Ma(ini
<TR>
<TD>Merce$e(
<TD>Citr#en
<TD>Caguar
<TR>
<TD>BMD
<TD>E#l+#
<TD>Renault
</TABLE>
</BODY>
</HTML>
#. Capul $e tabel
7n ta$el poate aea celule cu &emnifica!ia de cap de ta$el. *ce&te celule &unt introdu&e de
etic+eta <T$> 9tabel headerScap de ta$el; n loc de <TD>.
>oate atri$utele care pot fi ata%ate etic+etei <TD> pot fi de a&emenea ata%ate %i etic+etei <TH>.
0on!inutul celulelor definite cu <TH> e&te &cri& cu caractere aldine %i centrat.
#-emplul 9.16 ilu&treaz modul n care &e pot in&era celule cu rol de cap de ta$el. 6ute!i o$&era
din e-emplu c elementele cu rol de cap de ta$el pot fi pla&ate at(t pe orizontal c(t %i pe ertical.
*&pectul ta$elului e&te redat n Di'ura 9.16.
("eplul >. 1:
<HTML>
<HEAD>
<TITLE>tabele13</TITLE>
</HEAD>
<BODY>
<H1 align="center">Ca,ul $e tabel</H1><HR><5>
<TABLE b#r$er><CA5TIO@ align="b#tt#&">5returi &a(ini
<TR>
<TH>5ret
<TH>Citr#en
<TH>Caguar
<TH>BMD
<TH>E#l+#
<TR>
<TH>In $#lari
<TD>.111
<TD>111111
<TD>.1111
<TD>91111
<TR>
<TH>In lei
<TD>.
<TD>111
<TD>.1
<TD>91
</TABLE>
</BODY>
</HTML>
1%. "abele $e orme oarecare
#-i&t &itua!ii c(nd dorim ca o celul & &e e-tind pe&te celulele ecine, pe orizontal &au pe
ertical. En ace&t mod &e o$!ine o &in'ur celul cu &uprafa!a e'al cu &uma &uprafe!elor celulelor
ini!iale.
*ce&t lucru &e poate realiza cu a"utorul atri$utelor colspan %i rowspan ale etic+etelor <TD> %i
<TH>.
*&tfel)
colspan , realizeaz e-tinderea unei celule pe&te celulele din dreapta ei. Ualoarea atri$utului
determin numrul de celule care &e unific.
rowspan , realizeaz e-tinderea unei celule pe&te celulele de &u$ ea. Ualoarea atri$utului
determin numrul de celule care &e unific.
2unt po&i$ile e-tinderi &imultane ale unei celule pe orizontal %i pe ertical. En ace&t caz, n
etic+etele <TD> &au <TH> or fi prezente am$ele atri$ute c#l(,an %i r#6(,an. #-emplul 9.17
ilu&treaz modul cum &e realizeaz un ta$el cu celule unificate.
("eplul >. 1<
<HTML>
<HEAD>
<TITLE>tabele18</TITLE>
</HEAD>
<BODY>
<H1 align="center">Tabele cu *#r&a #arecare</H1><HR>
<TABLE b#r$er>
<TR>
<TD r#6(,an="!">celula 11<BR>celula 1<BR>celula !1
<TD>celula 1
<TD c#l(,an="" r#6(,an="!">celula 1! 7 celula 1"<BR>celula
!7 celula "<BR>celula !!7 celula !"
<TR>
<TD>celula
<TR>
<TD>celula !
<TR>
<TD>celula "1
<TD c#l(,an="!">celula "7 celula "!7 celula ""
</TABLE>
</BODY>
</HTML>
>a$elul con&truit n ace&t e-emplu are 4 linii %i 4 coloane. *%a cum &e ede n Di'ura 9.17, prin
folo&irea atri$utelor c#l(,an %i r#6(,an confi'ura!ia ta$elului &,a modificat a&tfel) celula 11 &,a
e-tin& n "o& pe&te celulele 21 %i 31 9<TD r#6(,an="!">;, celula 12 a rma& nemodificat, celula 13
&,a e-tin& at(t &pre dreapta pe&te celula 14 c(t %i n "o&, pe&te celulele 23 %i 24 9<TD c#l(,an=""
r#6(,an="!">;.
0elulele 22, 32 %i 41 au rma& nemodificate iar celula 42 &,a e-tin& &pre dreapta pe&te celulele 43
%i 44 9<TD c#l(,an="!">)
#tic+etelor <TD> %i <TH> li &e poate ata%a atri$utul nowrap. #l interzice a"u&tarea automat a
lun'imii unei linii de te-t, a&tfel nc(t n ta$el pot aprea coloane cu o l!ime oric(t de mare. 7n ta$el
n care e&te folo&it atri$utul n#6ra, e&te cel con&truit n #-emplul 9.18. *&pectul ta$elului e&te redat n
Di'ura 9.18.
("eplul >. 1=
<HTML>
<HEAD>
<TITLE>tabele19</TITLE>
</HEAD>
<BODY>
<H1 align="center"> Atributul n#6ra,</H1><HR>
<TABLE b#r$er>
<TR>
<TD>celula 11
<TD>celula 1
<TR>
<TD>celula 1
<TD n#6ra,>celula Te-tul $in acea(ta celula e(te *#arte
lung
</TABLE>
</BODY>
</HTML>
11. Celule r coninut
3ac un ta$el are celule fr con!inut 9celule ide;, atunci ace&te celule or aprea n ta$el fr un
c+enar de delimitare. En &copul de a afi%a un c+enar pentru celulele ide &e poate proceda a&tfel)
dup etic+eta <TD> &e adau' %nbsp&
dup etic+eta <TD> &e adau' <BR>
0aracterul Fnb(,G 9no break space; e&te, a%a cum am zut la capitolul *oratarea te"tului,
caracterul &pa!iu. 7n &pa!iu introdu& prin intermediul ace&tui caracter nu a fi i'norat de $roC&er)
En #-emplul 9.19 e&te ilu&trat modul n care pot fi create celule fr con!inut care & ai$ totu%i
c+enar de delimitare. 3up cum o$&era!i din Di'ura 9.19, celula 23 nu are c+enar de delimitare.
0elulele de pe a doua linie a ta$elului &unt ide dar au c+enar deoarece am folo&it Fnb(, %i <BR>.
("eplul >. 1>
<HTML>
<HEAD>
<TITLE>tabele1:</TITLE>
</HEAD>
<BODY>
<H1 align="center">Celule *ara c#ntinut</H1><HR>
<TABLE b#r$er>
<TR>
<TD>celula 11
<TD>celula 1
<TD>celula 1!
<TR>
<TD>Fnb(,G
<TD><BR>
<TD>
</TABLE>
</BODY>
</HTML>
12. &rupuri $e coloane
#tic+etele <C"L'R"(> </C"L'R"(> permit definirea unui 'rup de coloane n cadrul unui
ta$el. *tri$utele acceptate de <COL'ROH5> &unt)
span , determin numrul de coloane dintr,un 'rup
width , determin o l!ime unic pentru coloanele din 'rup
align , determin un tip unic de aliniere pentru coloanele din 'rup
3e e-emplu)
<COL'ROH5 (,an="!" 6i$t%="111"></COL'ROH5>
*m definit a&tfel un 'rup de trei coloane, fiecare a(nd l!imea de 100 de pi-eli.
Entr,un $loc <COL'ROH5>, coloanele pot aea confi'urri diferite dac &e utilizeaz etic+eta
<C"L>, care admite atri$utele)
span , identific acea coloan din 'rup pentru care &e face confi'urarea. 3ac lip&e%te, atunci
coloanele &unt confi'urate n ordine.
width , determin l!imea coloanei identificate prin (,an)
align , determin alinierea con!inutului coloanei identificate prin (,an)
0el mai $ine pute!i n!ele'e func!ionarea ace&tei etic+ete din #-emplul 9.20. >a$elul din ace&t
e-emplu are dimen&iunile de 420 de pi-eli l!ime %i 200 de pi-eli nl!ime %i e&te format din dou linii
%i patru coloane.
En ta$el a fo&t delimitat un 'rup de trei coloane 9primele trei coloane; prin etic+eta <COL'ROH5>
iar n cadrul ace&tui 'rup au fo&t definite l!imea %i alinierea te-tului din fiecare coloane n parte. 0ea
de,a patra coloan a ta$elului nu face parte din 'rupul de coloane. 3up nc+iderea etic+etei
<COL'ROH5>, celulele de date au fo&t introdu&e n mod normal, cu a"utorul etic+etei <TD>.
("eplul >. '@
<HTML>
<HEAD>
<TITLE>tabele1</TITLE>
</HEAD>
<BODY>
<H1 align="center">'ru,uri $e c#l#ane</H1><HR>
<TABLE b#r$er 6i$t%=""1" %eig%t="11">
<COL'ROH5>
<COL 6i$t%="31" align="le*t">
<COL 6i$t%="11" align="center">
<COL 6i$t%="191" align="rig%t">
</COL'ROH5>
<TR>
<TD +align="t#,">celula 11
<TD>celula 1
<TD +align="b#tt#&">celula 1!
<TD>celula 1"
<TR>
<TD>celula 1
<TD>celula
<TD>celula !!
<TD>celula !"
</TABLE>
</BODY>
</HTML>
3in Di'ura 9.20 &e poate o$&era c n cadrul celulei 11 e&te re&pectat alinierea la &t(n'a a
te-tului, deoarece ea a fo&t &etata ca atare prin con&truc!ia <COL 6i$t%="31" align="le*t">)

In ,lu(7 Jn ca$rul etic%etei <TD> a *#(t (tabilita Ki alinierea ,e
+erticala a te-tului $in celulL7 atributul +align ,ri&in$ +al#area
"t#,")
In celula 1 nu e(te (etat atributul +align a(t*el JncMt te-tul
re(,ectL alinierea (tabilitL ,rin c#n(trucNia <COL 6i$t%="11"
align="center">) In celula 1! alinierea ,e #ri2#ntalL a te-tului e(te
(tabilitL ,rin c#n(trucNia <COL 6i$t%="191" align="rig%t"> iar alinierea
,e +erticalL e(te (etatL Jn ca$rul etic%etei <TD> la +al#area "b#tt#&")
Din *igurL (e &ai #b(er+L cL t#ate celulele care *ac ,arte $in
c#l#anele inclu(e Jn bl#cul <COL'ROH5> re(,ectL (etLrile *Lcute Jn
ca$rul ace(tui bl#c <celulele 17 Ki !;) Celulele 1" Ki " care
*#r&ea2L c#l#ana a ,atra a tabelului neinclu(L Jn gru,ul $e c#l#ane7
re(,ectL atributele $e aliniere (,eci*icate Jn ca$rul etic%etei <TD>7
$acL e-i(tL)
#tic+eta <COL'ROH5> nu e&te recuno&cut de $roC&erele Fet&cape %i prin urmare nici atri$utele
le'ate de dimen&ionarea coloanelor %i alinierea te-tului n interiorul lor.
13. Atribute pentru aspectul c'enarului unui tabel
1tri<utu! frame
*tri$utul )ra*e al etic+etei <TABLE> permite &pecificarea laturilor din c+enarul unui ta$el care
or fi izi$ile.
Ualorile po&i$ile ale ace&tui atri$ut &unt)
+#i$ , elimin toate muc+iile e-terioare ale ta$elului
ab#+e , afi%eaz o muc+ie n partea &uperioar a cadrului ta$elului
bel#6 , afi%eaz o muc+ie n partea inferioar a cadrului ta$elului
%(i$e( , afi%eaz c(te o muc+ie n partea &uperioar %i inferioar cadrului ta$elului
+(i$e( , afi%eaz o muc+ie n partea din &t(n'a %i din dreapta a cadrului ta$elului
l%( , afi%eaz o muc+ie n partea din &t(n'a a cadrului ta$elului
r%( , afi%eaz o muc+ie n partea din dreapta a cadrului ta$elului
b#- , afi%eaz o muc+ie pe toate laturile cadrului ta$elului
1tri<utu! rules
*tri$utul rules al etic+etei <TABLE> permite ale'erea unor delimitatori pentru celulele unui
ta$el. Ualorile po&i$ile &unt)
n#ne , elimin toate muc+iile interioare ale ta$elului
r#6( , afi%eaz muc+ii orizontale ntre toate liniile ta$elului
c#l( , afi%eaz muc+ii erticale ntre toate coloanele ta$elului
all , afi%eaz muc+ii ntre toate liniile %i coloanele
#-emplul 9.21 ilu&treaz ace&te atri$ute. *tri$utele *ra&e %i rule( pot fi com$inate %i cu
atri$utele de colorare a c+enarului %i &e pot folo&i pentru a crea efecte intere&ante de aliniere n pa'in
a%a cum &e poate edea n Di'ura 9.21.
("eplul >. '1
<HTML>
<HEAD>
<TITLE>tabele1</TITLE>
</HEAD>
<BODY>
<H1 align="center">Atributele *ra&e (i rule(</H1><HR>
<TABLE b#r$erc#l#r="re$" 6i$t%=""11" *ra&e="l%(" rule(="c#l(">
<TR>
<TD>celula 11
<TD>celula 1
<TD>celula 1!
<TR>
<TD>celula 1
<TD>celula
<TD>celula !
<TR>
<TD>celula 1
<TD>celula
<TD>celula !
</TABLE>
</BODY>
</HTML>
14. "abele imbricate
7n ta$el poate con!ine n celulele &ale %i alte elemente n afar de te-t, inclu&i un alt ta$el,
form(nd a&tfel un an&am$lu de ta$ele im$ricate.
En #-emplul 9.22 om ilu&tra modul n care &e pot im$rica dou ta$ele.
("eplul >. ''
<HTML>
<HEAD>
<TITLE>tabele</TITLE>
</HEAD>
<BODY>
<H1 align="center">I&bricarea tabelel#r</H1><HR>
<TABLE b#r$er=".">
<TR>
<TD>celula 11 tabelul 1
<TD>
<TABLE b#r$er>
<TR>
<TD>celula 11 tabelul
<TD>celula 1 tabelul
<TR>
<TD>celula 1 tabelul
<TD>celula tabelul
<TR>
<TD>celula !1 tabelul
<TD>celula ! tabelul
</TABLE>
<TR>
<TD>celula 1 tabelul 1
<TD>celula tabelul 1
</TABLE>
</BODY>
</HTML>
*%a cum &e ede din Di'ura 9.22 ta$elul e&te format din dou linii %i dou coloane. En celula 21 a
ta$elului am inclu& un alt ta$el, format din trei linii %i dou coloane.
15. (ecoman$ri pri)in$ olosirea tabelelor
>a$elele &e numr printre cele mai folo&ite elemente ntr,o pa'in 4e$. #le reprezint un
in&trument practic indi&pen&a$il pentru definirea a&pectului pa'inii, ntruc(t permit alinierea corect a
elementelor din pa'in) te-t, ima'ini, le'turi, etc. En interiorul unui ta$el &e pot include %i alte ta$ele,
n func!ie de nece&it!i, form(nd o re!ea de ta$ele im$ricate.
2in'ura precau!ie pe care tre$uie & o ae!i n edere c(nd folo&i!i ta$ele n pa'inile
dumneaoa&tr e&te cea le'at de etic+etele %i atri$utele &pecifice unui anumit tip de $roC&er) *%a dup
cum a!i o$&erat din e-emplele prezentate, a&pectul pa'inilor poate & difere &im!itor de la un tip de
$roC&er la altul, atunci c(nd un anumit element nu e&te recuno&cut. 3ac e!i con&idera c a&pectul
ta$elelor e&te e&en!ial pentru pa'inile &ite,ului, e&te recomandat & limita!i la etic+etele &tandard,
recuno&cute de toate $roC&erele .
En *ne-a 1 e!i '&i o li&t a celor mai utilizate etic+ete mpreun cu men!iunea dac fac parte din
&tandardul =>?@ 3.2.
16. (e*umat
>a$elele &e in&ereaz ntr,un document =>?@ cu a"utorul etic+etei container <TABLE>
</TABLE>
>a$elele &unt formate din linii, care &e introduc prin etic+eta <TR> iar fiecare linie e&te format
din celule introdu&e prin etic+eta <TD>.
0elulele unui ta$el pot con!ine te-t, etic+ete de formatare a te-tului, ima'ini, le'turi, formulare
&au alte ta$ele.
#tic+etele <TABLE>, <TR> %i <TD> au o &erie de atri$ute comune)
align
, c(nd e&te a&ociat cu <TABLE> &ta$ile%te alinierea ta$elului fa! de te-tul din "ur
, c(nd e&te a&ociat cu <TR> &ta$ile%te alinierea te-tului din celulele liniei re&pectie
, c(nd e&te a&ociat cu <TD> &ta$ile%te alinierea te-tului din celul
bgc#l#r &ta$ile%te culoarea fundalului pentru ntre'ul ta$el, o linie &au o celul.
b#r$erc#l#r, b#r$erc#l#r$ar> %i b#r$erc#l#rlig%t &ta$ile&c culorile
c+enarelor
+align aliniaz te-tul pe ertical n cadrul ta$elului, al celulelor unei linii &au al unei
celule indiiduale
>a$elul n ntre'ime &au o celul a &a pot aea o ima'ine ca fundal, &pecificat cu a"utorul
atri$utului bac>gr#un$.
Aro&imea c+enarului ta$elului &e &ta$ile%te cu a"utorul atri$utului b#r$er.
3imen&iunile ta$elului &au ale unei celule indiiduale &e &ta$ile&c prin intermediul atri$utelor
6i$t% %i %eig%t.
0u a"utorul atri$utelor cell(,acing %i cell,a$$ing &e &ta$ile&c di&tan!a dintre celulele
ta$elului, re&pecti di&tan!a dintre con!inutul celulelor %i mar'inile lor.
6entru a crea ta$ele de forme oarecare &e folo&e&c atri$utele c#l(,an %i r#6(,an care permit
e-tinderea unei celule pe&te celulele din dreapta ei, re&pecti pe&te celulele de &u$ ea.
7nui ta$el i &e poate ata%a un titlu prin etic+eta <CA5TIO@> %i &e pot introduce celule cu rol de
cap de ta$el prin etic+eta <TH>)
Entr,un ta$el &e pot defini 'rupuri de coloane cu a"utorul etic+etei container <COL'ROH5>
</COL'ROH5>. En cadrul ace&tui 'rup, a&pectul fiecrei coloane n parte e&te &ta$ilit prin etic+eta
<COL>)
?odul de afi%are al mar'inilor ta$elului precum %i al liniilor de&pr!itoare dintre linii %i celule &e
poate &ta$ili cu a"utorul atri$utelor *ra&e %i rule(.
17. "est
1). (a ce serve7te eticheta <TD>9
a; 6entru a in&era un ta$el n pa'in.
a; 6entru a in&era o linie ntr,un ta$el.
$; 6entru a in&era o celul de date ntr,o linie a ta$elului.
1+. Crmtoarea construcie generea8 un tabel cu o line 7i dou celule)
<TABLE bgc#l#r="6%ite">
<TR bgc#l#r="re$">
<TD bgc#l#r="blue">celula 11
<TD>Celula 1
</TABLE>
Ce culoare vor avea cele dou celule9
a; *m(ndou al$, deoarece a%a e&te &etat culoarea ta$elului.
a; *m(ndou ro%u, deoarece a%a a fo&t &etat culoarea liniei.
$; 0elula 11 al$a&tru, deoarece culoarea ei a fo&t &etat e-plicit %i celula 12 ro%u, deoarece
face parte din linia a crei culoare a fo&t &etat ro%u.
1,. (a ce servesc atributele width 7i height ale etichetei <TABLE>9
a; 2ta$ile&c dimen&iunile ta$elului n pa'in.
a; *liniaz ta$elul fa! de re&tul elementelor din pa'in.
$; 2ta$ile&c dimen&iunile celulelor ta$elului.
13. Ce efect are urmtoarea construcie4
<TABLE b#r$er cell(,acing="." cell,a$$ing="11">O
a; >e-tul din celule e&te di&tan!at cu 5 pi-eli fa! de c+enarul celulelor, iar celulele &unt
di&tan!ate ntre ele cu 10 pi-eli.
a; >e-tul din celule e&te di&tan!at cu 10 pi-eli fa! de c+enarul celulelor, iar celulele &unt
di&tan!ate ntre ele cu 5 pi-eli.
$; 0+enarul ta$elului are 'ro&imea de 5 pi-eli iar c+enarul celulelor 'ro&imea de 10 pi-eli.
14. Care dintre urmtoarele construcii alinia8 la dreapta coninutul celor dou celule9
a; <TR align="le*t"><TD align="rig%t">celula 11<TD>celula 1
$; <TR><TD align="rig%t">celula 11<TD>celula 1
c; <TR align="rig%t"><TD>celula 11<TD>celula 1
2;. (a ce folose7te eticheta <TH>9
a; Introduce o celul de date.
a; Introduce o celul cu rol de cap de ta$el.
$; Introduce o linie cu rol de cap de ta$el.
21. &entru a ata7a un titlu tabelului folosim eticheta4
a; <HEAD>
a; <CA5TIO@>
$; <TITLE>
22. Ce efect are atributul colspan 6n construcia urmtoare4
<TR><TD c#l(,an="!">cel 11 cel 1 cel 1!O
a; 7nific trei celule pe orizontal.
a; 7nific trei celule pe ertical.
$; 7nific c(te trei celule, at(t pe orizontal c(t %i pe ertical.
23. :n care dintre construciile urmtoare chenarul tabelului nu este afi7at9
a; <TABLE b#r$er> </TABLE>
a; <TABLE b#r$er="1"> </TABLE>
$; <TABLE b#r$er="P1"> </TABLE>
24. 0tributul align al etichetei <TABLE> reali8ea84
a; *linierea ta$elului fa! de re&tul elementelor din pa'in.
a; *linierea te-tului n ta$el.
$; *linierea te-tului n fiecare celul a ta$elului
Tabele
1. c;
'. c;
+. a;
0. $;
1. c;
:. $;
<. $;
=. a;
>. $;
1@. a;
Capitolul 1@
Cadre 2,raes3
. modalitate de &tructurare aan&at a unui document =>?@ e&te mpr!irea fere&trei $roC&erului
n mai multe fere&tre di&tincte, denumite cadre 9frame&;.
*cea&t facilitate permite afi%area &imultan, n aceea%i ferea&tr a $roC&erului, a dou &au mai
multe documente =>?@ diferite, c(te unul n fiecare cadru.
6entru a realiza ace&t lucru &unt nece&are urmtoarele)
un document de definire a cadrelor care con!ine etic+etele care &ta$ile&c numrul, dimen&iunile %i
a%ezarea cadrelor n pa'in
c(te un fi%ier =>?@ pentru fiecare cadru n parte, prin care &e &ta$ile%te con!inutul cadrului
re&pecti.
3e e-emplu, o pa'in 4e$ care con!ine dou cadre a fi definit prin trei documente =>?@)
documentul de definire a cadrelor, care &pecific dimen&iunile %i a%ezarea cadrelor n pa'in]
cele dou documente care de&criu con!inutul fiecrui cadru n parte.
En e&en!, cadrele fac po&i$il afi%area n ferea&tra $roC&erului a mai multe pa'ini, &imultan.
1. @ocumentu! de de'inire a cadre!or
En cadrul documentului de definire a cadrelor, $locul L1.3KM LG1.3KM e&te nlocuit de $locul
5*R.M(S(T9 5J*R.M(S(T9. En ace&t tip de document $locul L1.3KM nu mai e&te folo&it.
En interiorul $locului LD5*?#2#>M, fiecare cadru e&te introdu& prin etic+eta 5*R.M(9.
3efinirea documentului ce a fi afi%at ntr,un cadru &e face prin atri$utul src 9source;. *ce&ta e&te
un atri$ut o$li'atoriu al etic+etei LD5*?#M, %i prime%te ca aloare adre&a 75@ a documentului
=>?@ care a fi ncrcat n acel cadru.
3efinirea cadrelor &e face prin mpr!irea fere&trelor n linii %i coloane)
mpr!irea unei fere&tre ntr,un numr de cadre de tip coloan &e face cu a"utorul atri$utului cols
al etic+etei LD5*?#2#>M ce de&crie acea ferea&tr]
mpr!irea unei fere&tre n cadre de tip linie &e face cu a"utorul atri$utului roFs al etic+etei
LD5*?#2#>M care de&crie ferea&tra.
Ualorile atri$utelor col& &i roC& &unt li&te de elemente &eparate prin ir'ul care de&criu modul n
care &e face mpr!irea fere&trei.
Ualorile ace&tor atri$ute pot fi e-primate n mai multe moduri)
n pi-eli j n care caz aloarea e&te un numr ntre'
n procente din dimen&iunea fere&trei 9un numr cuprin& ntre 1 %i 99, urmat de &im$olul :;
n dimen&iuni relatie, nk. 2im$olul nk &emnific faptul c linia &au coloana a&tfel definit ocup
a n,a parte din &pa!iul rma& dup di&punerea n ferea&tr a liniilor, re&pecti coloanelor precedente
9ezi e-emplele de mai "o&;.
("eplul 1O
col&S/200 , k , 50: , k
*cea&t con&truc!ie de&crie o mpr!ire n patru cadre de tip coloan, dintre care prima are 200
pi-eli, a treia ocup "umtate din &pa!iul total di&poni$il, iar a doua %i a patra ocup n mod e'al re&tul
de &pa!iu rma& di&poni$il.
("eplul 'O
roC&S/200 , 50: , 1k , 2k /
En ace&t e-emplu, pa'ina e&te mpr!it n patru cadre de tip linie, dintre care prima are 200 pi-eli,
a doua ocup "umtate din &pa!iul total di&poni$il iar a treia %i a patra ocup re&tul de &pa!iu rma&
di&poni$il, care &e mparte n trei pr!i e'ale, al treilea cadru ocup(nd o parte, iar al patrulea ocup(nd
dou pr!i.
Bbserva#ii
dac mai multe elemente din li&t &unt confi'urate cu k , atunci &pa!iul di&poni$il rma& pentru ele
&e a mpr!i n mod e'al.
n cadrul unui $loc LD5*?#2#>M poate fi inclu& un cadru prin etic+eta LD5*?#M &au un alt
$loc LD5*?#2#>M o$!in(ndu,&e a&tfel cadre im$ricate.
En ma"oritatea e-emplelor care or urma am folo&it ca 75@,uri pentru documentele pe care le
con!in cadrele, pa'ini de"a con&truite n capitolele anterioare. 3ac a!i &alat documentele =>?@ cu
numele &pecificate n etic+eta L>I>@#M pute!i erifica direct e-emplele care or urma. 3ac prefera!i
& ncrca!i n cadrele de&cri&e n e-emplele urmtoare alte documente, a tre$ui & face!i modificrile
nece&are &pecific(nd numele ace&tor fi%iere.
#-emplul 10.1 mparte pa'ina n dou cadre erticale, fiecare ocup(nd "umtate din pa'in.
*&pectul pa'inii e&te cel din Di'ura 10.1.
("eplul 1@. 1
L=>?@M
L=#*3M
L>I>@#Mcadre1LG>I>@#M
LG=#*3M
LD5*?#2#> col&S/k, k/M
LD5*?# &rcS/li&te1.+tml/M
LD5*?# &rcS/li&te4.+tml/M
LGD5*?#2#>M
LG=>?@M
En #-emplul 10.2 e&te creat o pa'ina 4e$ cu trei cadre orizontale. 6rimul cadru are 100 de
pi-eli, al treilea ocup 30: din ferea&tra $roC&erului, iar al doilea ocup re&tul &pa!iului. 6a'ina arat
ca n Di'ura 10.2.
("eplul 1@. '
L=>?@M
L=#*3M
L>I>@#Mcadre2LG>I>@#M
LG=#*3M
LD5*?#2#> roC&S/100 , k , 30:/M
LD5*?# &rcS/li&te1.+tml/M
LD5*?# &rcS/li&te2.+tml/M
LD5*?# &rcS/li&te3.+tml/M
LGD5*?#2#>M
LG=>?@M
#-emplul 10.3 creaz o matrice ptrat de 4 cadre 92 - 2;. 6entru a realiza ace&t lucru, &e folo&e&c
&imultan cele dou atri$ute col& %i roC&. 6a'ina de&cri& n ace&t document a aea a&pectul din Di'ura
10.3.
("eplul 1@. +
L=>?@M
L=#*3M
L>I>@#Mcadre3LG>I>@#M
LG=#*3M
LD5*?#2#> roC&S/k, k/ col&S/k, k/M
LD5*?# &rcS/ta$ele1.+tml/M
LD5*?# &rcS/ta$ele2.+tml/M
LD5*?# &rcS/ta$ele4.+tml/M
LD5*?# &rcS/ta$ele6.+tml/M
LGD5*?#2#>M
LG=>?@M
2. Cadre im<ricate
0adrele, ca %i alte elemente ale pa'inii 4e$ 9li&te, ta$ele;, &e pot im$rica, adic pot fi inclu&e
cadre n interiorul altor cadre. En #-emplul 10.4 e&te creat o pa'in cu trei cadre mi-te. 6entru a
con&trui pa'ina &e procedeaz din aproape n aproape. ?ai nt(i, pa'ina e&te mpr!it n dou cadre de
tip coloan, dup care al doilea cadru e&te mpr!it n dou cadre de tip linie. 6a'ina a aea a&pectul
din Di'ura 10.4.
("eplul 1@. 0
L=>?@M
L=#*3M
L>I>@#Mcadre4LG>I>@#M
LG=#*3M
LD5*?#2#> col&S/30:, k/M
LD5*?# &rcS/ta$ele1.+tml/M
LD5*?#2#> roC&S/k, k/M
LD5*?# &rcS/ta$ele2.+tml/M
LD5*?# &rcS/ta$ele4.+tml/M
LGD5*?#2#>M
LGD5*?#2#>M
LG=>?@M
3. Contro!u! aspectu!ui unui cadru
Cu!oarea mar&inii cadru!ui
6entru a &ta$ili culoarea c+enarului unui cadru &e utilizeaz atri$utul bordercolor. *ce&t atri$ut
prime%te ca aloare un nume de culoare &au o culoare definit n conformitate cu modelul 5A1.
*tri$utul $ordercolor poate fi ata%at at(t etic+etei LD5*?#2#>M pentru a &ta$ili culoarea tuturor
c+enarelor cadrelor inclu&e, c(t %i etic+etei LD5*?#M, pentru a &ta$ili culoarea c+enarului pentru un
cadru indiidual.
#-emplul 10.5 ilu&treaz atri$utul $ordercolor. 6a'ina de&cri& n ace&t document are a&pectul din
Di'ura 10.5.
("eplul 1@. 1
L=>?@M
L=#*3M
L>I>@#Mcadre5LG>I>@#M
LG=#*3M
LD5*?#2#> col&S/20:, k/ $ordercolorS/'reen/ $orderS/15/M
LD5*?# &rcS/te-t3.+tml/M
LD5*?#2#> roC&S/k, k/M
LD5*?# &rcS/te-t4.+tml/ $ordercolorS/$lue/M
LD5*?# &rcS/te-t5.+tml/M
LGD5*?#2#>M
LGD5*?#2#>M
LG=>?@M
L*imea mar&inii cadru!ui
*tri$utul border al etic+etei LD5*?#2#>M permite confi'urarea l!imii c+enarelor tuturor
cadrelor la un numr dorit de pi-eli. Ualoarea atri$utului $order e&te un numr ntre', ce reprezint
numrul de pi-eli, aloarea pre&ta$ilit fiind de 5 pi-eli. En mod pre&ta$ilit, c+enarul unui cadru e&te
afi%at %i are a&pect tridimen&ional.
6entru a o$!ine cadre fr c+enar &e utilizeaz &etarea $orderS/0/.
*fi%area c+enarului unui cadru &e mai poate dezactia %i dac &e utilizeaz atri$utul ,raeborder
cu aloarea /no/. *ce&t atri$ut poate fi ata%at at(t etic+etei LD5*?#2#>M 9dezactiarea fiind ala$il
pentru toate cadrele inclu&e; c(t %i etic+etei LD5*?#M 9dezactiarea fiind ala$ila numai pentru un
&in'ur cadru;.
Ualorile po&i$ile ale atri$utului frame$order &unt)
Ie& , ec+ialent cu 1
no , ec+ialent cu 0
0adrele din #-emplul 10.6 nu au c+enar. 3up cum pute!i o$&era din Di'ura 10.6 crearea unor
cadre fr c+enar poate duce la apari!ia unor am$i'uit!i n pa'in a%a nc(t ace&t efect tre$uie folo&it
cu aten!ie.
("eplul 1@. :
L=>?@M
L=#*3M
L>I>@#Mcadre6LG>I>@#M
LG=#*3M
LD5*?#2#> roC&S/k, k/ $orderS/0/M
LD5*?# &rcS/ta$ele1.+tml/M
LD5*?# &rcS/ta$ele2.+tml/M
LGD5*?#2#>M
LG=>?@M
@imensiunea cadru!ui
0+iar dac dimen&iunile unui cadru au fo&t &ta$ilite n mod e-plicit prin alorile atri$utelor
etic+etei LD5*?#2#>M, utilizatorul are po&i$ilitatea de a altera ace&te dimen&iuni cu a"utorul mou&e,
ului.
En &copul preenirii ace&tei &itua!ii &e poate utiliza atri$utul noresi&e, ata%at etic+etei LD5*?#M,
al crui efect e&te cel de $locare a po&i$ilit!ii de redimen&ionare a cadrului.
4. $are de deru!are
*tri$utul scrollin- al etic+etei LD5*?#M e&te utilizat pentru a adu'a unui cadru o $ar de
derulare &au de defilare 9scrolling bar;, care permite nai'area n interiorul documentului afi%at n
cadru. Ualorile po&i$ile ale atri$utului &crollin' &unt)
Ie& , $ara de derulare e&te prezent ntotdeauna]
no , $ara de derulare nu e&te di&poni$il]
auto , $ara de derulare e&te izi$il atunci c(nd e&te nece&ar. *cea&ta op!iune la& $roC&erului
po&i$ilitatea de a adu'a &au nu $ara, n func!ie de dimen&iunea te-tului din cadru.
#-emplul 10.7 ilu&treaz func!ionarea atri$utului &crollin' n cele trei &itua!ii.
("eplul 1@. <
L=>?@M
L=#*3M
L>I>@#Mcadre7LG>I>@#M
LG=#*3M
LD5*?#2#> roC&S/k, k, k/M
LD5*?# &rcS/te-t1.+tml/ &crollin'S/Ie&/ nore&izeM
LD5*?# &rcS/te-t7.+tml/ &crollin'S/no/ nore&izeM
LD5*?# &rcS/te-t8.+tml/ &crollin'S/auto/ nore&izeM
LGD5*?#2#>M
LG=>?@M
3in Di'ura 10.7 &e o$&er c, deoarece la primul cadru te-tul nu dep%e%te dimen&iunea fere&trei,
$ara de derulare nu e&te afi%at de%i atri$utul &crollin' are aloarea /Ie&/.
En cel de,al doilea cadru $ara de derulare nu e&te afi%at, indiferent de dimen&iunea te-tului din
cadru.
@a cel de,al treilea cadru, prezen!a &au a$&en!a $arei de derulare e&te condi!ionat de dimen&iunea
te-tului. *ici, deoarece te-tul dep%e%te dimen&iunea fere&trei, $ara e&te afi%ata.
). :o.iionarea documentu!ui ntr-un cadru
*tri$utele ar-in)ei-)t %i ar-inFidt) ale etic+etei LD5*?#M permit &ta$ilirea di&tan!ei n
pi-eli dintre con!inutul unui cadru %i mar'inile erticale, re&pecti orizontale ale cadrului. Ualorile
po&i$ile ale ace&tor atri$ute &unt)
un numr de pi-eli
procente din nl!imea, re&pecti din l!imea cadrului
En #-emplul 10.8 ferea&tra $roC&erului e&te mpr!it n trei cadre de tip coloan de dimen&iuni
e'ale. En toate cele trei cadre e&te afi%at acela%i document, ceea ce difer e&te pozi!ionarea
documentului n fiecare cadru.
*&tfel, n cadrul din &t(n'a, nu e&te &pecificat nici o aloare pentru atri$utele mar'in+ei'+t %i
mar'inCidt+.
En cadrul din mi"loc, &e &ta$ile%te di&tan!a de 50 de pi-eli ntre mar'inea &uperioar %i cea
inferioar a cadrului %i te-t.
En cadrul din dreapta &e &ta$ile%te o di&tan! de 30 de pi-eli ntre mar'inea din &t(n'a %i cea din
dreapta a cadrului %i te-t. 6a'ina are a&pectul din Di'ura 10.8.
("eplul 1@. =
L=>?@M
L=#*3M
L>I>@#Mcadre8LG>I>@#M
LG=#*3M
LD5*?#2#> col&S/k , k , k/M
LD5*?# &rcS/te-t1.+tml/M
LD5*?# &rcS/te-t1.+tml/ mar'in+ei'+tS/60/M
LD5*?# &rcS/te-t1.+tml/ mar'inCidt+S/40/M
LGD5*?#2#>M
LG=>?@M
.ten#ieH
2). #-i&t $roC&ere care nu &uport cadre. 6entru ace&tea &e utilizeaz n interiorul $locului
LD5*?#2#>M etic+eta 5AB*R.M(S9 5JAB*R.M(S9. 3ac $roC&erul poate & interpreteze
cadre, a i'nora ce &e '&e%te n acea&t por!iune, iar dac nu, materialul cuprin& n zona
LF.D5*?#2M LGF.D5*?#2M a fi &in'urul care a fi recuno&cut %i afi%at.
#&te de precizat %i faptul c ntre LF.D5*?#2M LGF.D5*?#2M &e pot introduce orice alte
etic+ete =>?@ 9inclu&i ima'ini, +IperlinJ,uri, ta$ele;.
+. Cadre interne 8in-!ine 'rames9
7n cadru intern e&te &pecificat prin intermediul etic+etei 57*R.M(9 5J7*R.M(9. #a
define%te o arie rectan'ular n interiorul documentului, arie n care $roC&erul a afi%a un alt document
=>?@, complet, inclu&i mar'inile %i $arele de derulare.
7n cadru intern &e in&ereaz ntr,o pa'ina 4e$ n mod a&emntor cu o ima'ine, n interiorul
$locului L1.3KM, a%a cum rezult din urmtorul e-emplu)
LID5*?# &rcS/ta$ele10.+tml/ +ei'+tS40: Cidt+S50:M LGID5*?#M
En ace&t caz, am &pecificat c dorim un cadru intern care are 40: din nl!imea %i 50: din l!imea
pa'inii curente.
*tri$utele acceptate de etic+eta LID5*?#M &unt n parte preluate de la etic+etele LD5*?#M %i
LD5*?#2#>M, cum ar fi)
src, border, ,raeborder, bordercolor, ar-in)ei-)t, ar-inFidt), scrollin-, nae.
. parte din atri$utele LD5*?#M &unt comune cu cele ale etic+etei LI?AM)
vspace, )space, ali-n, Fidt), )ei-)t.
En #-emplul 10.9 am con&truit un cadru intern n care &e de&c+ide unul dintre documentele
=>?@ create la capitolul Tabele.
("eplul 1@. >
L=>?@M
L=#*3M
L>I>@#Mcadre9LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M0adre interneLG=1ML=5M
L0#F>#5M
LID5*?# Cidt+S/60:/ +ei'+tS/50:/ nameS/icad/ &rcS/ta$ele4.+tml/M
3aca edeti ace&t te-t in&eamna ca $roC&erul dumneoa&tra nu &uporta cadre interne.
L6ML* +refS/cadre10.+tml/M6a'ina fara cadre interneLG*M
LGID5*?#M
LG0#F>#5M
LG1.3KM
LG=>?@M
3in Di'ura 10.9 pute!i o$&era c a&pectul unui cadru intern e&te ntruc(ta &imilar cu cel al unei
ima'ini in!line.
#tic+eta LID5*?#M &e introduce n cadrul $locului L1.3KM %i n cazul folo&irii ei nu mai e&te
nece&ar un document de definire a cadrelor. 6entru &itua!ia c(nd $roC&erul nu accept cadre interne, am
a&i'urat o er&iune a pa'inii care nu con!ine a&tfel de cadre 9cadreB@)html; introdu& prin etic+eta L*M.
0on!inutul ace&tei pa'ini e&te foarte &implu, &erind doar la ilu&trarea modului n care poate fi
con&truit o alternati la pa'ina cu cadre interne 9#-emplul 10.10;
("eplul 1@. 1@
L=>?@M
L=#*3M
L>I>@#Mcadre10LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M6a'ina fara cadre interneLG=1ML=5M
LG1.3KM
LG=>?@M
Iat un alt e-emplu 9#-emplul 10.11; n care am creat o pa'in care con!ine trei linJ,uri iar
ace&tea de&c+id pa'inile referite de ele n cadrul intern din centrul pa'inii. Di'ura 10.10 red a&pectul
ace&tei pa'ini.
("eplul 1@. 11
L=>?@M
L=#*3M
L>I>@#Mcadre11LG>I>@#M
LG=#*3M
L1.3KM
L* +refS/ta$ele4.+tml/ tar'etS/icad/MDi&ierul1LG*ML15M
L* +refS/ta$ele5.+tml/ tar'etS/icad/MDi&ierul2LG*ML15M
L* +refS/ta$ele6.+tml/ tar'etS/icad/MDi&ierul3LG*ML15M
L0#F>#5M
LID5*?# Cidt+S/60:/ +ei'+tS/50:/ nameS/icad/ &rcS/cadre11.+tml/M
3aca edeti ace&t te-t in&eamna ca $roC&erul dumneoa&tra nu &uporta cadre interne.
L6ML* +refS/cadre10.+tml/M6a'ina fara cadre interneLG*M
LGID5*?#M
LG0#F>#5M
LG1.3KM
LG=>?@M
En e-emplu am folo&it atri$utul nae al etic+etei LID5*?#M cu a"utorul cruia am atri$uit un
nume ace&tui cadru %i anume /icad/. *ce&t lucru a fo&t nece&ar pentru a &pecifica, prin intermediul
atri$utului tar-et al etic+etei L*M, faptul c linJ,urile &e or de&c+ide n cadrul intern.
,. @esc/iderea documente!or n a!te cadre
3ac ntr,unul dintre documentele de&c+i&e n cadru e-i&t linJ,uri, ace&tea or de&c+ide pa'inile
referite de ele n cadrul curent.
*ce&t comportament &e poate &c+im$a prin pla&area n etic+eta L*M a atri$utului tar-et, care
precizeaz numele fere&trei 9cadrului; n care &e a ncrca pa'ina nou referit de le'tur, conform
&inta-ei)
L* +refS/75@/ tar'etS/numeVframe/M LG*M
Fumele unui cadru e&te &ta$ilit prin atri$utul nae al etic+etei LD5*?#M conform &inta-ei)
LD5*?# nameS/numeVframe/M
En #-emplul 10.12 e&te prezentat o pa'ina 4e$ cu dou cadre. 3ocumentul de definire a
cadrelor e&te cadreB>) html al crui a&pect e&te redat n Di'ura 10.11.
("eplul 1@. 1'
L=>?@M
L=#*3M
L>I>@#Mcadre12LG>I>@#M
LG=#*3M
LD5*?#2#> col&S/20:, k/M
LD5*?# &rcS/cadre13.+tml/M
LD5*?# &rcS/cadre14.+tml/ nameS/cadruVdreapta/M
LGD5*?#2#>M
LG=>?@M
3ocumentul de definire a cadrelor mparte pa'ina n dou cadre de tip coloan. En cel din &t(n'a
&e a de&c+ide documentul cadreBA)html iar n cel din dreapta, documentul cadreB<)html. 0el de,al
doilea cadru a fo&t numit /cadruVdreapta/.
En #-emplul 10.13 e&te creat documentul cadreBA)html. *ce&t document con!ine, dup cum
o$&era!i, patru linJ,uri. 6rin intermediul atri$utului tar'et am &pecificat cadrul n care &e or de&c+ide
ace&tea. >oate ace&te le'turi de&c+id pa'inile referite de ele n cadrul drept.
("eplul 1@. 1+
L=>?@M
L=#*3M
L>I>@#Mcadre13LG>I>@#M
LG=#*3M
L1.3KM
L* +refS/ta$ele6.+tml/ tar'etS/cadruVdreapta/M
@e'atura 1
LG*ML15M
L* +refS/ta$ele7.+tml/ tar'etS/cadruVdreapta/M
@e'atura 2
LG*ML15M
L* +refS/ta$ele8.+tml/ tar'etS/cadruVdreapta/M
@e'atura 3
LG*ML15M
L* +refS/cadre14.+tml/ tar'etS/cadruVdreapta/M
=ome
LG*ML15M
LG1.3KM
LG=>?@M
En #-emplul 10.14 e&te creat documentul cadreB<)html.
("eplul 1@. 10
L=>?@M
L=#*3M
L>I>@#Mcadre14LG>I>@#M
LG=#*3M
L1.3KM
L=3M*ici &e or de&c+ide pa'inile referite de le'aturile din cadrul &tan'LG=3ML=5M
LG1.3KM
LG=>?@M
2ala!i cele trei fi%iere cu numele &pecificate %i de&c+ide!i cu $roC&erul fi%ierul cadreB>)html
pentru a o$&era cum func!ioneaz atri$utele prezentate.
*tri$utul tar'et al etic+etei LD5*?#M accept %i anumite alori predefinite %i anume)
V&elf , ncrcarea noii pa'ini are loc n cadrul curent
V$lanJ , ncrcarea noii pa'ini are loc ntr,o ferea&tr nou, anonim
Vparent , ncrcarea noii pa'ini are loc n cadrul printe al cadrului curent dac ace&ta e-i&t,
altfel are loc n ferea&tra curent a $roC&erului
Vtop , ncrcarea noii pa'ini are loc n ferea&tra $roC&erului ce con!ine cadrul curent.
7rmtorul e-emplu ilu&treaz felul cum func!ioneaz ace&te alori ale atri$utului tar'et.
3ocumentul de definire a cadrelor e&te prezentat n #-emplul 10.15 a&pectul &u fiind cel din
Di'ura 10.12. 6a'ina con&truit n ace&t e-emplu con!ine dou cadre orizontale. En cel de &u& e&te
ncrcat documentul cadreBI)html iar n cel de "o&, documentul cadreB=)html.
("eplul 1@. 11
L=>?@M
L=#*3M
L>I>@#Mcadre15LG>I>@#M
LG=#*3M
LD5*?#2#> roC&S/30:, k/M
LD5*?# &rcS/cadre17.+tml/M
LD5*?# &rcS/cadre16.+tml/M
LGD5*?#2#>M
LG=>?@M
#-emplul 10.16 con&truie%te documentul cadreB=)html care con!ine trei le'turi ctre fi%iere
=>?@ create la capitolul *oratarea te"tului. Diecare dintre ace&te le'aturi are &pecificat atri$utul
tar'et pentru a ilu&tra modul n care func!ioneaz ace&ta.
("eplul 1@. 1:
L=>?@M
L=#*3M
L>I>@#Mcadre16LG>I>@#M
LG=#*3M
L1.3KM
L* +refS/te-t4.+tml/ tar'etS/V$lanJ/M
*cea&ta le'atura &e de&c+ide in alta ferea&tra
LG*ML15M
L* +refS/te-t5.+tml/ tar'etS/V&elf/M
*cea&ta le'atura &e de&c+ide in ferea&tra curenta
LG*ML15M
L* +refS/te-t6.+tml/ tar'etS/Vparent/M
*cea&ta le'atura &e de&c+ide in ferea&tra parinte
LG*ML15M
LG1.3KM
LG=>?@M
3ocumentul cadreBI)html prezentat n #-emplul 10.17 e&te o pa'in 4e$ foarte &impl care &e a
de&c+ide n cadrul de &u&.
("eplul 1@. 1<
L=>?@M
L=#*3M
L>I>@#Mcadre17LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M*tri$utul tar'etLG=1M
LG1.3KM
LG=>?@M
6entru a o$&era modul de func!ionare al atri$utului tar'et &ala!i cele trei fi%iere &u$ numele
&pecificate %i de&c+ide!i cu $roC&erul documentul cadreB?)html.
3. Su&estii pri"ind 'o!osirea cadre!or
3e%i cadrele reprezint o maniera de&tul de &pectaculoa& de a &tructura o pa'in 4e$, ele
prezint o mul!ime de dezaanta"e.
Encrcarea unei pa'ini care con!ine cadre &e face mai 'reu, inde-area pa'inii de ctre motoarele
de cutare e&te mai dificil. 3e a&emenea, deoarece documentul din fiecare cadru are propriul 75@ ,
e&te mai 'reu pentru izitator & re!in adre&a pa'inii n .avorites. 8i, nu n ultimul r(nd, deoarece
e-i&t $roC&ere care nu &uport cadrele, e&te indicat & a&i'ura!i pentru fiecare pa'in a&tfel &tructurat
%i o er&iune fr cadre, ceea ce implic un efort &uplimentar.
*(nd n edere toate ace&te a&pecte, e&te $ine & limita!i folo&irea cadrelor n pa'inile
dumneaoa&tr doar la &itua!iile n care nu pute!i proceda altfel.
4. -e.umat
Dolo&irea cadrelor ntr,un document =>?@ permite de&c+iderea mai multor pa'ini di&tincte n
documentul re&pecti.
6entru a crea o pa'in care con!ine cadre &unt nece&are mai multe documente =>?@)
documentul de definire a cadrelor
c(te un document =>?@ pentru fiecare cadru definit
3ocumentul de definire a cadrelor nu con!ine $locul L1.3KM ace&ta fiind nlocuit de $locul
LD5*?#2#>M LGD5*?#2#>M. En cadrul $locului LD5*?#2#>M fiecare cadru e&te introdu& prin
etic+eta LD5*?#M.
Empr!irea fere&trei n cadre de tip coloan &e face cu a"utorul atri$utului col& iar n cadre de tip
linie &e face cu a"utorul atri$utului roC&. *m$ele atri$ute &unt a&ociate etic+etei LD5*?#2#>M.
6entru a &ta$ili l!imea c+enarului unui cadru &e folo&e%te atri$utul $order al etic+etei LD5*?#M.
6entru a &ta$ili culoarea c+enarului unui cadru &e folo&e%te atri$utul $ordercolor al etic+etei
LD5*?#M. *ce&te atri$ute pot fi a&ociate %i etic+etei LD5*?#2#>M, caz n care efectul lor &e a
aplica tuturor cadrelor din &et.
6rezen!a $arelor de derulare ntr,un cadru &e &ta$ile%te cu a"utorul atri$utului &crollin'.
6entru a pozi!iona documentul ntr,un cadru &e folo&e&c atri$utele mar'inCidt+ %i mar'in+ei'+t.
Entr,o pa'in 4e$ &e pot introduce %i cadre interne, cu a"utorul etic+etei LID5*?#M
LGID5*?#M.
6entru a &pecifica ferea&tra &au cadrul n care &e a de&c+ide un document &e folo&e%te atri$utul
tar'et care poate aea ca aloare numele fere&trei 9cadrului; &au poate aea o aloare predefinit.
#&te recomandat & a&i'ura!i o er&iune fr cadre a documentului =>?@, pentru ca ace&ta &
poat fi izualizat cu $roC&erele care nu &uport cadre. 6entru acea&ta, elementele care fac parte din
er&iunea fr cadre &e includ ntre etic+etele LF.D5*?#2M LGF.D5*?#2M.
1;. Test
2+. :n ce 8on a unui document #%M( se introduce blocul LD5*?#2#>M9
a; En $locul L1.3KM
a; En $locul L=#*3M
$; LD5*?#2#>M formeaz un $loc &eparat.
Cum se introduce un cadru 6n pagin9
a; 6rin etic+eta LD5*?#2#>M
a; 6rin etic+eta LD5*?#M
$; 6rin etic+eta L250M
Dorim s 6mprim o pagin 6n trei cadre de tip coloan, primul avHnd ;umtate din pagin, iar
celelalte dou spaiul rmas 6mprit 6n mod egal) Care dintre construciile urmtoare reali8ea8 acest
lucru9
a; LD5*?#2#> col&S/k , k, k/
a; LD5*?#2#> col&S/50:, 1k , 2k/
$; LD5*?#2#> col&S/50:, k , k/
Ce reali8ea8 urmtoarea construcie9
L=>?@M
LD5*?#2#> col&S/k, k/M
LD5*?# &rcS/frame1.+tml/M
LD5*?#2#> roC&S/k, k/M
LD5*?# &rcS/frame2.+tml/M
LD5*?# &rcS/frame3.+tmllM
LGD5*?#2#>M
LGD5*?#2#>M
LG=>?@M
a; Emparte pa'ina n patru cadre, dou de tip coloan, dou de tip linie.
a; Emparte pa'ina n dou cadre de tip coloan, cel de,al doilea fiind mpr!it n dou cadre
de tip linie.
$; Emparte pa'ina n trei cadre de tip linie.
:n construcia urmtoare la ce folose7te atributul &crollin'9
LD5*?# &rcS/frame1.+tml/ &crollin'S/auto/M
a; 6ermite auto,dimen&ionarea cadrului n func!ie de mrimea te-tului.
a; *dau' automat $ara de derulare pentru ace&t cadru.
$; @a& $roC&erului po&i$ilitatea de a adu'a &au nu $ara de derulare, n func!ie de
mrimea te-tului din cadru.
(a ce folosesc atributele mar'in+ei'+t 7i mar'inCidt+ ale etichetei LD5*?#M9
a; 3imen&ioneaz mar'inile cadrului.
a; 3imen&ioneaz c+enarul cadrului.
$; 2ta$ile&c di&tan!a dintre mar'inile cadrului %i con!inutul &u.
Cnde se introduce eticheta LID5*?#M9
a; En $locul L1.3KM
a; En $locul LD5*?#2#>M
$; En $locul LD5*?#M
(a ce serve7te atributul $ordercolor asociat etichetei LD5*?#2#>M9
a; 2ta$ile%te culoarea c+enarului unui cadru.
a; 2ta$ile%te culoarea c+enarelor tuturor cadrelor definite n LD5*?#2#>M.
$; 2ta$ile%te culoarea de fond a cadrelor definite n LD5*?#2#>M.
Care dintre urmtoarele construcii este corect9
a; LD5*?# nameS/numeVcadru/M
a; LD5*?#2#> nameS/numeVcadru/M
$; LD5*?#2#> +refS/numeVcadru/M
Cum se reali8ea8 deschiderea documentului dintr!un cadru 6ntr!o fereastra nou9
a; LD5*?# &rcS/frame1.+tml/ tar'etS/V&elf/M
a; LD5*?# &rcS/frame1.+tml/ tar'etS/V$lanJ/M
$; LD5*?# &rcS/frame1.+tml/ tar'etS/Vparent/M
Cadre
1. c;
'. $;
+. c;
0. $;
1. c;
:. c;
<. a;
=. $;
>. a;
1@. $;
Capitolul 11
*orulare
0u &i'uran! a!i zut cum arat un formular ntr,o pa'in 4e$. 3e e-emplu, atunci c(nd
completa!i o carte de oa&pe!i 9guestbook; ae!i de,a face cu un formular. *tunci c(nd &electa!i mai
multe op!iuni dintr,o li&t &au introduce!i un cu(nt ntr,un motor de cutare, folo&i!i, de a&emenea, un
formular.
Dormularul reprezint unul dintre cele puternice elemente ale unei pa'ini 4e$. 6rin intermediul
formularelor &e realizeaz interactiitatea cu izitatorul pa'inii, ace&tea permi!(ndu, & o$!ine!i
informa!ii de&pre cei care iziteaz pa'inile dumneaoa&tr.
1. Ce este un 'ormu!ar?
7n formular e&te un an&am$lu de zone actie alctuit din mai multe tipuri de elemente) $utoane,
ca&ete de &elec!ie, c(mpuri de editare, etc., ce permit utilizatorilor & introduc efecti informa!ii.
*ce&te informa!ii &unt ulterior tran&mi&e &ererului pe care e&te 'zduit pa'ina dumneaoa&tr, unde
or putea fi prelucrate.
. &e&iune cu o pa'ina 4e$ ce con!ine un formular cuprinde dou etape)
7tilizatorul completeaz formularul %i, prin ap&area $utonului de e-pediere, trimite &ererului
datele n&cri&e n formular.
. aplica!ie dedicat de pe &erer 9un &cript; analizeaz informa!iile tran&mi&e %i, n func!ie de
confi'ura!ia &criptului, fie &toc+eaz datele ntr,o $az de date, fie le tran&mite la o adre& de mail
indicat de dumneaoa&tr. 3ac e&te nece&ar, &ererul poate e-pedia %i un me&a" de r&pun&
utilizatorului.
0el mai important lucru pe care tre$uie &,l n!ele'e!i n le'tur cu formularele e&te c aici apar
dou pro$leme di&tincte %i care nece&it in&trumente diferite pentru a le 'e&tiona.
6rima dintre ele e&te pla&area formularului n pa'in %i a&i'urarea $unei lui func!ionri. *ce&t
lucru &e realizeaz prin =>?@ %i de el ne ocupm n ace&t capitol.
0ea de,a doua e&te 'e&tionarea %i prelucrarea informa!iilor pe care izitatorul le introduce prin
intermediul formularului. *cea&t pro$lem e&te rezolat cu a"utorul &cripturilor 0AI &tocate pe
&erer, &u$iect de&pre care om or$i n capitolul urmtor.
2tructura formularele poate aria, de la o &impl ca&et de te-t pentru introducerea unui %ir de
caractere, p(n la un an&am$lu comple-, cu multiple &ec!iuni %i care ofer facilit!i puternice de
tran&mitereGprelucrare a datelor.
2. Crearea unui 'ormu!ar
7n formular e&te definit ntr,un $loc delimitat de etic+etele
5*BRM9 5J*BRM9. #tic+eta LGD.5?M, de nc+idere, e&te o$li'atorie.
En interiorul $locului &unt inclu&e)
elementele formularului, n care izitatorul urmeaz & introduc informa!ii
un $uton de e-pediere 9submit;, la ap&area cruia, datele &unt tran&mi&e ctre &erer
op!ional, un $uton de anulare 9reset, cancel;, prin care utilizatorul poate anula datele n&cri&e n
formular
>ot ceea ce e&te inclu& ntre etic+eta de de&c+idere %i cea de nc+idere face parte din formular.
#tic+eta LD.5?M are dou atri$ute e&en!iale)
action j comunic $roC&erului unde & trimit datele introdu&e n formular. En 'eneral aloarea
atri$utului action e&te adre&a 75@ a &criptului aflat pe &ererul care prime%te datele formularului. 3e
e-emplu)
LD.5? actionS/+ttp)GGCCC.Ia+oo.comGc'i,$inGnumeVfi&.c'i/M.
et)od , precizeaz metoda utilizat de $roC&er pentru e-pedierea datelor formularului.
*tri$utul met+od poate aea dou alori)
po&t , folo&it n cele mai multe cazuri. Indic &ererului & furnizeze datele direct &criptului ca
date de intrare &tandard.
'et 9aloarea implicit; , datele din formular &unt adu'ate la adre&a 75@ precizat de atri$utul
action, ntre adre&a 75@ %i date fiind in&erat un /</. 3atele &unt adu'ate conform &inta-ei)
numeVcampSaloareVcamp.
Entre diferite &eturi de date e&te introdu& un /\/. 3e e-emplu)
/+ttp)GGCCC.Ia+oo.comGc'i,$inGnumeVfi&.c'i<
nume1Saloare1\nume2Saloare2/
0ea mai facil cale prin care informa!iile introdu&e ntr,un formular pot pareni creatorului
pa'inii e&te folo&irea comenzii ailtoO *m mai nt(lnit acea&t comand la capitolul Le-%turi n
conte-tul urmtor)
L* +refS/mailto)autorhdomeniu.com/M
3e data acea&ta nu mai e&te or$a de crearea unei le'turi care & lan&eze n e-ecu!ie aplica!ia de
mail a utilizatorului, ci de tran&miterea datelor introdu&e n formular la o adre& de mail &pecificat de
dumneaoa&tr.
*ce&t lucru &e poate realiza preciz(nd ca aloare a atri$utului action urmtoarea &ecen!)
/mailto)adre&aVmail/, ca n e-emplul urmtor)
LD.5? actionSmailto)autorhdomeniu.com met+odS/po&t/M
*%a cum &puneam, atri$utul action comunic $roC&erului unde & trimit datele introdu&e n
formular. Dolo&ind comanda mailto) $roC&erului i &e indic & trimit datele la adre&a de mail
&pecificat n comand.
3in pcate, acea&t comand nu e&te e-ecutat n ace&t mod dec(t de $roC&erele Fet&cape.
1roC&erele Internet #-plorer nu recuno&c comanda mailto) prezent n cadrul formularelor. *ce&tea o
e-ecut la fel cum e&te ea e-ecutat atunci c(nd face parte din etic+eta L*M ca aloare a atri$utului +ref
adic lan&eaz aplica!ia de mail a utilizatorului.
3in ace&t moti, inclu&i pentru trimiterea datelor la o adre& &pecificat de mail, &e folo&e&c
&cripturi 0AI. 6entru a nu intra nc n amnunte priind &cripturile, om folo&i totu%i n e-emplele
urmtoare comanda mailto)
5e!ine!i totu%i c afi%area corect a unui formular n pa'in nu e&te dec(t prima etap a utilizrii
formularului. 6entru a face o te&tare complet tre$uie & ae!i un &cript in&talat pe &erer care &
prelucreze datele din formular %i & le tran&mit la adre&a de mail &pecificat.
6entru a defini elementele care fac parte din formular &e utilizeaz etic+etele 57APUT9,
5S(L(CT9, 5BPT7BA9 %i 5T(CT.R(.9.
3. #tic/eta 57APUT9
6rin intermediul etic+etei 57APUT9 &e pot introduce n formular c(mpuri de editare 9ca&ete de
te-t;, c(mpuri de tip passord, $utoane de e-pediere %i anulare, $utoane radio %i ca&ete de alidare.
#tic+eta LIF67>M are urmtoarele atri$ute)
tGpe , prin care &e precizeaz tipul elementului.
nae , permite ata%area unui nume fiecrui element al formularului.
value , permite atri$uirea unei alori ini!iale unui element al formularului.
6erec+ea de atri$ute naeJvalue 9numeGaloare; e&te deo&e$it de important pentru $una
func!ionare a formularului.
Diecare element introdu& prin etic+eta LIF67>M reprezint o aria$il. Informa!ia introdu& de
utilizator n c(mpul elementului re&pecti reprezint aloarea pe care o prime%te acea&t aria$il. 3in
ace&t moti, toate elementele introdu&e prin etic+eta LIF67>M tre$uie & ai$ atri$uit un nume. *ce&t
lucru e&te o$li'atoriu deoarece, n caz contrar, aria$ila reprezentat de acel element nu a aea un
identificator.
En plu&, e&te indicat & atri$ui!i nume di&tincte diferitelor elemente care fac parte din formular.
*ltminteri, &criptul 0AI care prelucreaz datele nu a %ti & fac di&tinc!ia ntre aria$ile a(nd acela%i
nume %i alori diferite.
*tri$utul tIpe poate aea urmtoarele alori)
te-t , &e folo&e%te pentru a introduce un c(mp de editare pe o &in'ur linie
pa&&Cord j &e folo&e%te pentru a in&era un c(mp de editare n care caracterele introdu&e &unt
nlocuite cu a&teri&curi 9k;
radio j folo&it pentru a in&era un %ir de $utoane radio 9elemente care &e folo&e&c pentru a &electa
dintr,o li&t de op!iuni una %i numai una dintre ele;
c+ecJ$o- j folo&it pentru a introduce un %ir de ca&ete de alidare 9elemente care &e folo&e&c c(nd
dintr,o li&t de op!iuni &e poate ale'e mai mult de o &in'ur ariant;
&u$mit j &e folo&e%te pentru a introduce un $uton de e-pediere
re&et j &e folo&e%te pentru a introduce un $uton de anulare a informa!iilor introdu&e n formular
$utton , &e folo&e%te pentru a introduce n formular un $uton o$i%nuit
+idden , &e folo&e%te pentru a introduce n formular un c(mp a&cun&
Diecare dintre alorile atri$utului tIpe 'enereaz un anumit tip de element n cadrul formularului.
#-emplul 11.1 creeaz un formular foarte &implu care con!ine un c(mp de editare %i un $uton de
e-pediere. *&pectul formularului e&te redat n Di'ura 11.1.
("eplul 11. 1
L=>?@M
L=#*3M
L>I>@#Mformulare1LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M 0a&eta de te-t &i $uton de e-pediereLG=1ML=5M
LD.5? actionS/mailto)adre&ahIII.com/ met+odS/po&t/M
Introduceti adre&a d&. de mail)
LIF67> tIpeS/te-t/ nameS/adre&a/ alueS/adre&a mail/ML15M
LIF67> tIpeS/&u$mit/ alueS/e-pediaza/M
LGD.5?M
LG1.3KM
LG=>?@M
3up cum o$&era!i, numele atri$uit c(mpului de editare e&te /adre&a/ iar atri$utul alue a primit
ca aloare %irul de caractere /adre&a mail/. *ce&t te-t a fi afi%at n interiorul c(mpului de editare,
nainte ca utilizatorul & nceap introducerea informa!iilor. 3ac atri$utul alue nu era prezent &au era
ini!ializat cu &trin'ul id 9 // ;, ca&eta de te-t ar fi fo&t 'oal.
En cadrul formularului e&te prezent %i un $uton de e-pediere, in&erat de a&emenea prin intermediul
etic+etei LIF67>M a(nd atri$utul tIpe &etat cu aloarea /&u$mit/. *%a cum &e o$&er din fi'ur, pe
$uton e&te afi%at te-tul /e-pediaza/, deoarece pentru ace&t element, atri$utului alue i,a fo&t atri$uit ca
aloare te-tul re&pecti.
Casete de text
En #-emplul 11.2 am creat un formular care con!ine trei ca&ete de te-t 9c(mpuri de editare; n care
utilizatorul e&te ru'at & introduc numele, prenumele %i adre&a de mail, precum %i o ca&et de tip
passord, care cere introducerea unei parole. *%a cum e!i o$&era din Di'ura 11.2, o ca&et de tip
passord e&te a&emntoare cu un c(mp de editare, &in'ura diferen! fiind aceea c aici caracterele nu
&unt afi%ate n clar ci &unt nlocuite cu a&teri&curi.
En plu&, formularul con!ine un $uton de e-pediere %i unul de anulare a datelor introdu&e.
("eplul 11. '
L=>?@M
L=#*3M
L>I>@#Mformulare2LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M0a&ete de te-tLG=1ML=5M
LD.5? actionS/mailto)adre&ahIII.com/ met+odS/po&t/M
Introduceti numele)
LIF67> tIpeS/te-t/ nameS/nume/ alueS//ML15M
Introduceti prenumele)
LIF67> tIpeS/te-t/ nameS/prenume/ alueS//ML15M
Introduceti adre&a de mail)
LIF67> tIpeS/te-t/ nameS/mail/ alueS//ML15M
Introduceti parola)
LIF67> tIpeS/pa&&Cord/ nameS/parola/ML15M
LIF67> tIpeS/re&et/ alueS/&ter'e/M
LIF67> tIpeS/&u$mit/ alueS/e-pediaza/M
LGD.5?M
LG1.3KM
LG=>?@M
6entru elementele de tip ca&et de te-t %i passord &unt utile %i atri$utele)
a"len-t) j care &ta$ile%te numrul ma-im de caractere care poate fi introdu& n c(mpul de
editare
si&e j care &ta$ile%te l!imea ace&tui c(mp
$utoane radio
En #-emplul 11.3 am creat un formular care con!ine un %ir de $utoane radio, prin care &e cere
prerea izitatorului de&pre o pa'in 4e$. 3up cum o$&era!i, fiecare element de tip $uton radio are
acela%i nume %i anume /opinie/ deoarece nu &e poate &electa dec(t un &in'ur element, a&tfel nc(t orice
am$i'uitate e&te e-clu&.
Diecare $uton radio tre$uie & ai$ o aloare. 3in ace&t moti pentru fiecare $uton atri$utul alue
a fo&t &etat la o alt aloare. *le'erea uneia dintre op!iuni, de e-emplu /$una/, face ca aria$ila
/opinie/ & primea&c aloarea /$una/. 6rin urmare, &ererului i a fi tran&mi& perec+ea
/opinieS$una/.
En plu&, o$&era!i prezen!a atri$utului c)ec;ed, care are rolul de a pre&ta$ili o anumit op!iune, pe
care n& utilizatorul o poate &c+im$a, dac dore%te. *&pectul formularului e&te cel din Di'ura 11.3.
("eplul 11. +
L=>?@M
L=#*3M
L>I>@#Mformulare3LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M1utoane radioLG=1ML=5M
LD.5? actionS/mailto)adre&ahIII.com/ met+odS/po&t/M
0e parere aeti de&pre acea&ta pa'ina<L15M
LIF67> tIpeS/radio/ nameS/opinie/ alueS/foarte $una/ c+ecJedMDoarte $unaL15M
LIF67> tIpeS/radio/ nameS/opinie/ alueS/$una/M1unaL15M
LIF67> tIpeS/radio/ nameS/opinie/ alueS/de&tul de $una/M3e&tul de $unaL15M
LIF67> tIpeS/radio/ nameS/opinie/ alueS/proa&ta/M6roa&taL15M
LIF67> tIpeS/re&et/ alueS/anuleaza/M
LIF67> tIpeS/&u$mit/ alueS/e-pediaza/M
LGD.5?M
LG1.3KM
LG=>?@M
Casete de "a!idare
#-emplul 11.4 creeaz un %ir de ca&ete de alidare, care &e deo&e$e&c de $utoanele radio prin
faptul c &e pot &electa mai multe op!iuni dintre cele prezentate. Di'ura 11.4 red a&pectul formularului
con&truit n ace&t e-emplu.
("eplul 11. 0
L=>?@M
L=#*3M
L>I>@#Mformulare4LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M0a&ete de alidareLG=1ML=5M
LD.5? actionS/mailto)adre&ahIII.com/ met+odS/po&t/M
0are &unt +o$$I,urile dumneaoa&tra<L15M
LIF67> tIpeS/c+ecJ$o-/ nameS/+o$$I/ alueS/&port/M2portL15M
LIF67> tIpeS/c+ecJ$o-/ nameS/+o$$I/ alueS/film/MDilmL15M
LIF67> tIpeS/c+ecJ$o-/ nameS/+o$$I/ alueS/lectura/M@ecturaL15M
LIF67> tIpeS/c+ecJ$o-/ nameS/+o$$I/ alueS/"ocuri/MBocuri pe computerL15M
LIF67> tIpeS/c+ecJ$o-/ nameS/+o$$I/ alueS/internet/M2urfin' pe netL15M
LIF67> tIpeS/c+ecJ$o-/ nameS/+o$$I/ alueS/alpini&m/M*lpini&mL15M
LIF67> tIpeS/&u$mit/ nameS/&u$mit/ alueS/e-pediaza/M
LGD.5?M
LG1.3KM
LG=>?@M
. ca&et de alidare are dou &tri) marcat &au nemarcat 9on &au off;. 0a %i la $utoanele radio,
atri$utul name are n e-emplul con&iderat o &in'ur aloare, /+o$$I/, iar atri$utul alue are, pentru
fiecare ca&et, alori di&tincte. 2ererului i &unt tran&mi&e numai acele alori care au fo&t marcate n
ca&etele de alidare core&punztoare.
8i n cazul ca&etelor de alidare e&te po&i$il prezen!a atri$utului c)ec;ed care pre&electeaz o
anumit op!iune &au mai multe.
$utoane
En cadrul unui formular &e pot introduce %i $utoane o$i%nuite 9altele dec(t $utoanele +ubmit %i
Reset;. 5olul ace&tora e&te de a ini!ia anumite ac!iuni n momentul c(nd utilizatorul face clicJ cu
mou&e,ul pe ele. @im$a"ul =>?@ nu ofer in&trumentele nece&are pentru a &pecifica ce anume &e
nt(mpl c(nd $utonul e&te ap&at. 6entru acea&ta e&te nece&ar & include!i n documentul =>?@
&cripturi Baa2cript care & trateze ace&te eenimente.
0a %i $utoanele +ubmit %i Reset, $utoanele o$i%nuite &unt inclu&e n formular cu a"utorul etic+etei
LIF67>M a(nd atri$utul tIpe &etat la aloarea $utton)
LIF67> tIpeS/$utton/ nameS/$uton/ alueS/te-t/M.
>e-tul &pecificat ca aloare a atri$utului alue a fi afi%at pe $uton.
1utoanele pot fi folo&ite pentru a alida informa!iile introdu&e n formular, pentru a de&c+ide
documente %i a ini!ia dier&e alte ac!iuni din partea $roC&erului.
C7mpuri ascunse 8/idden 'ie!ds9
0(mpurile a&cun&e &unt elemente care fac parte dintr,un formular dar nu &unt izi$ile n cadrul
pa'inii. 6rin intermediul ace&tora &e pot include n formular informa!ii care nu pot fi alterate de
$roC&er &au de utilizator. Introducerea unui a&tfel de c(mp n formular &e face prin etic+eta
LIF67> tIpeS/+idden/M.
0a %i n cazul celorlalte elemente ale formularului e&te nece&ar prezen!a atri$utelor name %i
alue, ca n e-emplul urmtor)
LIF67> tIpeS/+idden/ nameS/a&cun&/ alueS/modifica/M
0(mpurile a&cun&e pot &eri la o 'e&tionare mai $un a datelor tran&mi&e la &erer. 3e e-emplu,
& pre&upunem c aem un formular care cere utilizatorului c(tea informa!ii ini!iale) numele %i adre&a.
6e $aza ace&tora, aplica!ia de pe &erer ini!iaz afi%area unui nou formular care &olicit introducerea
unor informa!ii mai detaliate.
3eoarece e&te plicti&itor pentru izitator & reia introducerea informa!iilor ini!iale, &criptul poate fi
confi'urat & depun primele informa!ii n c(mpurile a&cun&e ale celui de,al doilea formular. En acea&t
&itua!ie e&te util folo&irea c(mpurilor a&cun&e deoarece &ererul proce&eaz un &in'ur formular la un
moment dat %i nu are cum & %tie c cel de,al doilea formular a fo&t completat de aceea%i per&oan.
4. #tic/ete!e 5S(L(CT9 i 5BPT7BA9
0u a"utorul etic+etei 5S(L(CT9 5JS(L(CT9 &e poate introduce ntr,un formular un meniu
derulant. 0rearea unui meniu pentru izitatorii pa'inii i a"ut la &electarea unor op!iuni dintr,o li&t
predefinit.
Diecare op!iune care face parte din $locul L2#@#0>M &e introduce prin etic+eta 5BPT7BA9.
En #-emplul 11.5 e&te con&truit un meniu derulant, din care izitatorul poate &electa op!iunea
dorit. *tri$utul nae are acela%i rol ca %i n etic+eta LIF67>M. 3ac izitatorul &electeaz din meniu
zodia >aur, de e-emplu, la ap&area $utonului de e-pediere, &ererului i e&te tran&mi& perec+ea)
/zodiaStaur/. *tri$utul si&e e&te &etat la aloarea /1/. 2etarea atri$utului &ize la aloarea /1/ creeaz o
un meniu derulant cu o &in'ur op!iune izi$il ini!ial a%a cum &e poate o$&era din Di'ura 11.5.
("eplul 11. 1
L=>?@M
L=#*3M
L>I>@#Mformulare5LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M?eniu derulantLG=1ML=5M
LD.5? actionS/mailto)adre&ahIII.com/ met+odS/po&t/M
0are e&te zodia dumneaoa&tra<L15M
L2#@#0> nameS/zodia/ &izeS/1/M
L.6>I.FM1er$ec
L.6>I.FM>aur
L.6>I.FMAemeni
L.6>I.FM5ac
L.6>I.FM@eu
L.6>I.FMDecioara
L.6>I.FM1alanta
L.6>I.FM2corpion
L.6>I.FM2a'etator
L.6>I.FM0apricorn
L.6>I.FMUar&ator
L.6>I.FM6e&ti
LG2#@#0>M
LIF67> tIpeS/&u$mit/ alueS/e-pediaza/M
LGD.5?M
LG1.3KM
LG=>?@M
3ac atri$utul &ize e&te &etat la o aloare mai mare dec(t 1 meniul a afi%a un numr de op!iuni
e'al cu acea&t aloare %i a con!ine o $ar de derulare pentru a face acce&i$ile %i celelalte op!iuni. En
Di'ura 11.6 poate fi zut un meniu la care aloarea atri$utului &ize e&te 6.
). #tic/eta 5T(CT.R(.9
0u a"utorul etic+etei 5T(CT.R(.9 5JT(CT.R(.9 pute!i in&era n pa'in o ca&et de te-t
multi,linie care permite izitatorului & introduc un te-t mai lun', care &e poate ntinde pe mai multe
linii. *cea&t etic+et &e folo&e%te atunci c(nd dorim & cerem izitatorului o opinie de&pre un anumit
&u$iect, care nece&it introducerea unui te-t mai lun' dec(t o &in'ur linie 9ace&t element &e mai
nume%te %i ca&et de comentarii;. L>#W>*5#*M e&te o etic+et container, deci nece&it etic+eta de
nc+idere LG>#W>*5#*M.
*tri$utele roFs %i cols &ta$ile&c numrul de linii, re&pecti de coloane rezerate pentru
introducerea te-tului.
#-emplul 11.6 introduce n pa'in o ca&et pentru comentarii, a&pectul ace&teia fiind redat n
Di'ura 11.7.
("eplul 11. :
L=>?@M
L=#*3M
L>I>@#Mformulare6LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M0a&eta de comentariiLG=1ML=5M
LD.5? actionS/mailto)adre&ahIII.com/ met+odS/po&t/M
0are e&te opinia dumneaoa&tra de&pre ace&t film<L15M
L>#W>*5#* nameS/comentariu/ roC&S/10/ col&S/40/MLG>#W>*5#*ML15M
LIF67> tIpeS/&u$mit/ alueS/e-pediaza/M
LGD.5?M
LG1.3KM
LG=>?@M
>oate elementele prezentate pot fi reunite ntr,un &in'ur formular &au pute!i crea formulare
diferite, n func!ie de informa!iile pe care dori!i & le o$!ine!i de la izitatorii pa'inii.
3ac dori!i & introduce!i n pa'in mai multe formulare, &au elemente de tipuri diferite n cadrul
aceluia%i formular, tre$uie & ae!i n edere a&pectele care !in de alinierea ace&tora. . po&i$ilitate de a
alinia elementele con!inute ntr,un formular e&te folo&irea ta$elelor.
#-emplul 11.7 con!ine elemente de mai multe tipuri ncadrate ntr,un formular unic. 6entru
alinierea unora dintre ele am folo&it un ta$el. *&pectul pa'inii de&cri&e n ace&t document e&te cel din
Di'ura 11.8.
("eplul 11. <
L=>?@M
L=#*3M
L>I>@#Mformulare7LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M*linierea elementelorLG=1ML=5M
LD.5? actionS/mailto)adre&ahIII.com/ met+odS/po&t/M
L=3M0omandati 6izzaLG=3ML6M
L6M0ate pizza doriti<
LIF67> nameS/nrpizza/ alueS/0/ &izeS3 ma-len't+S3ML6M
LIF67> tIpeS/radio/ nameS/marime/ alueS/mare/ c+ecJedM?areL15M
LIF67> tIpeS/radio/ nameS/marime/ alueS/medie/M?edieL15M
LIF67> tIpeS/radio/ nameS/marime/ alueS/normala/MFormala
L6M>oppin',uriL6M
LIF67> tIpeS/c+ecJ$o-/ nameS/toppin'/ alueS/&alam/M2alamL15M
LIF67> tIpeS/c+ecJ$o-/ nameS/toppin'/ alueS/carnati/M0arnatiL15M
LIF67> tIpeS/c+ecJ$o-/ nameS/toppin'/ alueS/&unca/M2uncaL15M
LIF67> tIpeS/c+ecJ$o-/ nameS/toppin'/ alueS/ciuperci/M0iuperciL15M
LIF67> tIpeS/c+ecJ$o-/ nameS/toppin'/ alueS/ceapa/M0eapaL15M
LIF67> tIpeS/c+ecJ$o-/ nameS/toppin'/ alueS/ma&line/M?a&line
L6M
L>*1@# Cidt+S/60:/M
L>5M
L>3 Cidt+S/20:/MFumele
L>3MLIF67> tIpeS/te-t/ nameS/nume/M
L>5M
L>3 Cidt+S/20:/M>elefonul
L>3MLIF67> tIpeS/te-t/ nameS/telefon/M
L>5M
L>3 Cidt+S/20:/M*dre&a
L>3ML>#W>*5#* nameS/adre&a/ roC&S6 col&S50MLG>#W>*5#*M
L>5M
L>3 Cidt+S/20:/MFumrul cartii de credit
L>3MLIF67> tIpeS/pa&&Cord/ nameS/creditcard/ &izeS20M
LG>*1@#M
L6M
L0#F>#5M
LIF67> tIpeS/&u$mit/ alueS/>rimite comanda/M
LG0#F>#5M
LGD.5?M
LG1.3KM
LG=>?@M
+. Ca!idarea date!or
7nul dintre a&pectele importante pe care tre$uie & le ae!i n edere atunci c(nd folo&i!i
formulare n pa'inile dumneaoa&tr e&te alidarea datelor introdu&e de izitatorii lor. @im$a"ul =>?@
ofer relati pu!ine in&trumente pentru ndeplinirea ace&tei &arcini. >otu%i, ae!i la di&pozi!ie c(tea
po&i$ilit!i.
Dolo&i!i atri$utul ma-len't+ atunci c(nd introduce!i un c(mp de editare, pentru a mpiedica
izitatorul & introduc un numr eronat de caractere. 3e e-emplu, dac cere!i introducerea ntr,o
ca&et de te-t a codului numeric per&onal, acea ca&et nu tre$uie & permit introducerea a mai mult de
13 caractere, un c(mp de editare care cere introducerea codului po%tal nu tre$uie & permit
introducerea a mai mult de 4 caractere, etc.
6entru a a&i'ura c izitatorul introduce date corecte ntr,un c(mp de editare 9de e-emplu o
adre& de mail alid tre$uie & con!in o$li'atoriu caracterul /h/; nu e-i&t in&trumente =>?@.
6entru a realiza a&tfel de &arcini &unt nece&are &cripturi Baa2cript. En capitolul DavaScript e!i '&i
&cripuri utile care fac po&i$ile alidrile datelor, nc din momentul introducerii lor.
Dolo&i!i de c(te ori e&te po&i$il $utoanele radio, ca&etele de alidare %i meniurile, pentru a
&implifica proce&ul de introducere a datelor. Di!i c(t mai e-plicit, a&i'ura!i indica!iile nece&are pentru
completarea formularelor, preciz(nd, unde e&te cazul, dac pot fi &electate mai multe op!iuni &au numai
una &in'ur.
.ten#ieH
*&i'ura!i, c &criptul care prelucreaz informa!iile din formular are facilit!i de
'e&tionare a erorilor.
3ac e&te &emnalat o eroare, furniza!i izitatorului un me&a" de eroare e-plicit %i,
eentual, c(tea corec!ii po&i$ile.
7na dintre cele mai fru&trante &itua!ii e&te ca dup completarea unui formular comple-, la apari!ia
unei erori, izitatorul & fie neoit & reia completarea inte'ral a formularului. #ita!i ace&t lucru
utiliz(nd &cripturi care returneaz utilizatorului formularul completat, a(nd c(mpurile 're%ite marcate
pentru corectare.
Fu uita!i un amnunt foarte important) informa!iile introdu&e de izitatori n formulare &unt
nece&are dumneaoa&tr, pentru a m$unt!i eficien!a %i calitatea &ite,ului &au c+iar pentru a derula
afaceri prin intermediul &u. 3e aceea corectitudinea ace&tor date e&te e&en!ial.
Dace!i n a%a fel nc(t izitatorii &ite,ului dumneaoa&tr & completeze u%or %i cu plcere
formularele prezente n pa'ini.
,. -e.umat
Dormularele &ere&c la &ta$ilirea unei le'turi interactie cu izitatorii unei pa'ini 4e$ %i la
o$!inerea de informa!ii de la ace%tia.
7n formular &e introduce n pa'in cu a"utorul etic+etei LD.5?M LGD.5?M.
En cadrul ace&tei etic+ete pot fi inclu&e dier&e elemente care fac parte din formular)
prin etic+eta LIF67>M pot fi introdu&e c(mpuri de editare, c(mpuri de tip passord, $utoane
radio, ca&ete de &elec!ie, $utoane de e-pediere, $utoane de anulare %i $utoane o$i%nuite
prin etic+eta L2#@#0>M pot fi introdu&e meniuri derulante, fiecare element al meniului fiind
introdu& prin etic+eta L.6>I.FM
prin etic+eta L>#W>*5#*M pot fi introdu&e c(mpuri de editare multilinie.
6entru a &pecifica unde or fi trimi&e datele introdu&e n formular &e folo&e%te atri$utul action al
etic+etei LD.5?M. 6entru a &ta$ili modul n care ace&te date &unt tran&mi&e &e folo&e%te atri$utul
met+od al etic+etei LD.5?M.
Dormularele reprezint partea izi$il a proce&ului de interac!iune cu izitatorul pa'inii 4e$.
.dat ce datele au fo&t introdu&e n c(mpurile formularului, ele tre$uie tran&mi&e, prelucrate %i &tocate,
n func!ie de neoile creatorului pa'inii. *ce&t lucru &e realizeaz cu a"utorul &cripturilor 0AI in&talate
pe &erer, de&pre care om or$i n capitolul urmtor.
3. Test
1. Ce atribut indic broserului unde s trimit informaiile din formular9
a; input
a; action
$; met+od
2. Care dintre aceste valori nu aparine atributului met+od<
a; Aet
a; =ref
$; 6o&t
3. Care dintre urmtoarele afirmaii este fals9
a; 6rin etic+eta LIF67>M &e pot introduce n formular c(mpuri de editare de tip passord.
a; 6rin etic+eta LIF67>M &e pot introduce n formular $utoane radio.
$; 6rin etic+eta LIF67>M &e pot introduce n formular meniuri derulante.
4. &entru a introduce 6n formular un buton de expediere se folose7te construcia4
a; LIF67> tIpeS/re&et/M
a; LIF67> tIpeS/&u$mit/M
$; LIF67> tIpeS/forCard/M
). .ie urmtoarea construcie4
LD.5? actionS/mailto)adre&ahIII.com/ met+odS/po&t/M
LIF67> tIpeS/radio/ nameS/lim$a/ alueS/romana/M@im$a romana
LIF67> tIpeS/radio/ nameS/lim$a/ alueS/'ermana/M@im$a 'ermana
LIF67> tIpeS/radio/ nameS/lim$a/ alueS/ma'+iara/M@im$a ma'+iara
LGD.5?M
Dac este bifat opiunea (imba romana, care este perechea nume2valoare care va fi transmis
serverului9
a; /lim$aS@im$a romana/
a; /lim$aSromana/
$; /radioSromana/
+. Care este diferena dintre un cHmp de editare de tip text 7i unul de tip passord9
a; Entr,un c(mp de tip te-t &e pot introduce mai multe linii, ntr,unul de tip passord o
&in'ur linie.
a; Entr,un c(mp de tip te-t caracterele introdu&e &unt afi%ate, ntr,unul de tip passord &unt
nlocuite cu a&teri&curi.
$; 0(mpul de editare &e introduce cu a"utorul etic+etei LIF67>M, c(mpul de tip passord
&e introduce cu a"utorul etic+etei L2#@#0>M.
,. &entru a insera 6ntr!un formular o caset de validare se folose7te eticheta LIF67>M cu
atributul tIpe setat la valoarea4
a; /radio/
a; /c+ecJ$o-/
$; /option/
3. Ce reali8ea8 eticheta L2#@#0>M9
a; Introduce un $uton de anulare.
a; Introduce un meniu derulant.
$; Introduce o li&t de ca&ete de alidare.
4. (a ce serve7te eticheta L>#W>*5#*M9
a; 2ta$ile%te zona din ferea&tra $roC&erului care e&te rezerat pentru te-t.
a; Introduce n formular un c(mp de editare multi,linie.
$; Introduce n formular un c(mp de editare pe o &in'ur linie.
1;. Care dintre urmtoarele afirmaii este fals9
a; 3atele introdu&e n formular &unt trimi&e la &erer, dac e&te folo&it un &cript 0AI.
a; 3atele introdu&e n formular &unt trimi&e la o adre& de mail &pecificat, dac e&te
folo&it comanda mailto)
$; 3atele introdu&e n formular &unt &tocate pe +ard,di&J,ul izitatorului pa'inii.
*orulare
1. $;
'. $;
+. c;
0. $;
1. $;
:. $;
<. $;
=. $;
>. $;
1@. c;
Capitolul 1'
Scripturi C?7
6ro'ramare 0AI, &cripturi 0AI &unt cuinte care &t(rne&c, cel mai ade&ea, teama. ?ultora dintre
cei care dore&c & creeze pa'ini 4e$ %i nu &unt pro'ramatori profe&ioni%ti acea&t zon le apare
mi&terioa& %i dificil de n!ele&. En ace&t capitol om n!a c+e&tiunile fundamentale %i principiile care
'uerneaz realizarea ace&tor &cripturi precum %i modul lor de utilizare. Ue!i con&tata c, de%i realizarea
unui &cript e&te de&tul de la$orioa& %i nece&it cunoa%terea aprofundat a cel pu!in unui lim$a" de
pro'ramare 90YY &au 6erl;, nu a fi deloc 'reu & n!ele'e!i modul cum &unt ele concepute.
Ue&tea $un e&te aceea c, de%i &tp(nirea unui lim$a" de pro'ramare e&te $ineenit, nu e&te
a$&olut nece&ar pentru a putea utiliza &cripturi 0AI n pa'inile dumneaoa&tr. Fu e&te neoie &
crea!i propriile dumneaoa&tr &cripturi. 6e 4e$ e-i&t mii de &cripturi 'ratuite care pot fi de&crcate %i
utilizate conform propriilor nece&it!i. >ot ceea ce ae!i de fcut e&te & n!ele'e!i principiile dup care
&unt realizate, modul lor de func!ionare %i maniera n care tre$uie & le &eta!i pentru a le adapta neoilor
dumneaoa&tr.
1. Ce este CA(?
2 ncepem prin a preciza ce nu e&te C?7) nu e&te un lim$a" de pro'ramare.
0AI, pre&curtare de la Common ,atea$ 'nterface, e&te un protocol standard de counicare
ntre documentele 4e$ %i aplica!iile localizate pe &ererul 4e$.
Scripturile C?7 &unt pro-rae care re&pect ace&t protocol 9un protocol e&te un &et de re'uli;.
7n &cript 0AI e&te, deci, un pro'ram care comunic ntr,un anumit mod cu pa'ina dumneaoa&tr.
#-i&ten!a ace&tui protocol de comunicare ntre pro'ramele de pe &erer %i documentele 4e$ permite
crearea unor pa'ini interactie %i dinamice, lucru care nu poate fi fcut folo&ind doar =>?@.
*tunci c(nd $roC&erul &olicit un &cript 0AI aflat pe &erer, &ererul lan&eaz n e-ecu!ie &criptul
%i i tran&mite ace&tuia +eaderele =>>6 de cerere primite de la $roC&er. 3up ce e-ecu!ia &criptului &e
nc+eie, rezultatele &unt tran&mi&e &ererului, care formateaz +eaderele de r&pun& %i le tran&mite
$roC&erului pentru ca ace&ta & afi%eze rezultatele. . alt po&i$ilitate e&te ca &criptul & con!in
in&truc!iuni prin care +eaderele de r&pun& &unt confi'urate c+iar de &cript %i tran&mi&e de ace&ta direct
$roC&erului.
Indiferent dac &olicit un document 4e$ &au un &cript, $roC&erul tre$uie & cunoa&c loca!ia
&ererului 4e$ %i numele fi%ierului &olicitat. *cea&t informa!ie i e&te tran&mi& $roC&erului prin
intermediul atri$utului action al etic+etei LD.5?M care prime%te drept aloare adre&a 75@ a &criptului
&tocat pe &erer. 3e o$icei, &cripturile 0AI &unt &tocate pe &erer ntr,un director &pecial de&tinat lor,
care &e nume%te c&i-<in.
2. Trans'eru! date!or
*%a cum am zut n capitolul anterior, datele pe care dorim & le o$!inem de la izitatorul pa'inii
&unt colectate prin intermediul formularelor. 3atele a&tfel colectate &unt tran&mi&e de ctre $roC&er la
&ererul pe care e&te in&talat &criptul 0AI prin intermediul +eaderelor =>>6 de cerere.
0ele mai importante +eadere =>>6 de cerere &unt ?et %i Post. 6rin intermediul atri$utului
met+od al etic+etei LD.5?M e&te &pecificat ce tip de +eader =>>6 de cerere e&te utilizat pentru a
tran&fera datele la &erer. 3ac metoda folo&it e&te Aet, datele &unt tran&mi&e prin intermediul adre&ei
75@. 3ac folo&i!i metoda 6o&t datele &unt tran&mi&e &u$ forma unui fi%ier &eparat.
#&te recomandat folo&irea metodei 6o&t atunci c(nd olumul de date tran&mi&e e&te mare
9dep%e%te 1024 de octe!i, lun'imea ma-im a unui 75@;. 3up ce metoda de tran&mitere e&te &ta$ilit,
$roC&erul creeaz un +eader =>>6 de cerere prin care e&te identificat localizarea &criptului pe &erer
%i apoi tran&mite +eaderul la &erer. 2ererul recep!ioneaz +eaderul de cerere %i apeleaz &criptul 0AI.
.dat datele a"un&e la &erer, &criptul e&te lan&at n e-ecu!ie iar datele i &unt tran&mi&e ace&tuia
prin intermediul unui tip &pecial de aria$ile numite variabile de mediu 9dac folo&i!i metoda Aet; &au
prin intermediul fi%ierului &tandard de intrare 9dac folo&i!i metoda 6o&t;.
2criptul 0AI e-ecut &arcinile pentru care a fo&t conceput %i o$!ine anumite rezultate care
urmeaz a fi tran&mi&e $roC&erului prin intermediul unor +eadere =>>6 de r&pun&. 3e o$icei, &criptul
confi'ureaz un &in'ur +eader de r&pun&, %i anume 0ontent,>Ipe. *ce&t +eader comunic $roC&erului
tipul de date care i or fi returnate) documente =>?@, ima'ini &au alt tip de fi%iere. 2ererul adau' %i
el +eadere =>>6 de r&pun& &uplimentare, apoi &tr(n'e toate rezultatele %i +eaderele de r&pun& ntr,un
pac+et care e&te tran&mi& $roC&erului. 1roC&erul l recep!ioneaz %i afi%eaz informa!iile primite n
modul de&cri& de +eaderele de r&pun&.
3. #xecuia scriptu!ui
0e face &criptul 0AI dup ce e&te lan&at n e-ecu!ie< 5&pun&ul e&te &implu) e-ecut &arcinile
pentru care a fo&t con&truit. 2arcinile pe care le poate realiza un &cript &unt dier&e %i numeroa&e. Iat
c(tea e-emple)
manipularea informa!iilor introdu&e prin intermediul formularelor
manipularea +r!ilor de ima'ini
'enerarea contoarelor care monitorizeaz numrul de acce&ri ale pa'inii 9hit counters;
con&truirea de motoare de cutare
admini&trarea licita!iilor on!line
crearea de aplica!ii interactie cum ar fi forumurile &au camerele de c+at
crearea %i manipularea $azelor de date
0um am mai &pu&, &crierea unui &cript care ndepline%te a&tfel de &arcini nu e&te &impl. 6entru a
putea concepe un &cript e&te nece&ar cunoa%terea aprofundat a unui lim$a" de pro'ramare. 2unt
utilizate lim$a"e ariate pentru realizarea &cripturilor) 6erl, 0 &au 0YY, Ui&ual 1a&ic, etc. 3e&crierea
ace&tor lim$a"e %i a principiilor de pro'ramare dep%e%te cu mult o$iectul ace&tei cr!i. 3e altfel, a%a
cum &puneam, pentru a con&trui o pa'ina 4e$ interacti cu a"utorul &cripturilor 0AI, nu e&te nece&ar
& le crea!i c+iar dumneaoa&tr. 6e 4e$ e-i&t foarte multe &ite,uri care pun la di&pozi!ia izitatorilor
mii de &cripturi 'ratuite. 3e o$icei ele &unt n&o!ite de in&truc!iuni de in&talare %i utilizare. 6ute!i ale'e
dintre ace&tea pe acelea care &ati&fac cerin!ele dumneaoa&tr. >otu%i, pentru a face o ale'ere n
cuno%tin! de cauz precum %i pentru a putea & face!i modificrile nece&are in&talrii %i func!ionrii
&criptului, ae!i neoie & cunoa%te!i c(tea no!iuni le'ate de &tructura unui &cript 0AI.
4. Structura unui script
2tructura unui &cript 0AI con!ine urmtoarele &ec!iuni)
citirea datelor introdu&e prin intermediul formularului
prelucrarea datelor %i efectuarea &arcinilor impu&e de pro'ramator
afi%area rezultatelor.
Citirea date!or
7nul dintre elementele de $az cu care lucreaz un &cript l con&tituie variabilele de ediu.
Uaria$ilele de mediu &unt o cate'orie &pecial de aria$ile, folo&ite de &erer n proce&ul de e-ecu!ie al
&criptului. *ce&te aria$ile con!in informa!ii de&pre &erer, de&pre $roC&er %i de&pre datele introdu&e de
utilizator. Fumrul aria$ilelor de mediu e&te de&tul de mare, dar e-i&t c(tea care au o importan!
&pecial pentru &cript.
*ce&tea &unt)
R(LU(STPM(THB6
LU(RIPSTR7A?
CBAT(ATPL(A?TH
Uaria$ila de mediu R(LU(STPM(THB6 poate aea cele dou alori de&pre care am mai
amintit) Aet %i 6o&t. 6rin intermediul ei &ererul informeaz &criptul a&upra modului cum i &unt
tran&mi&e datele.
*%a cum am n!at n capitolul anterior, datele introdu&e de utilizator &unt tran&mi&e n perec+i
numeGaloare.
Uaria$ila de mediu LU(RIPSTR7A? e&te folo&it pentru a re!ine datele de intrare n cazul
folo&irii metodei Aet iar aria$ila CBAT(ATPL(A?TH e&te folo&it pentru a &pecifica lun'imea
%irului de caractere citit din fi%ierul de intrare, n cazul folo&irii metodei 6o&t.
Transiterea datelor prin etoda ?et
0(nd &ererul folo&e%te metoda ?et datele introdu&e n formular &unt adu'ate la &f(r%itul adre&ei
75@ a &criptului.
6entru a face lucrurile mai clare, & luam un e-emplu. & pre&upunem c n pa'ina dumneaoa&tr
&e afl un formular care con!ine dou c(mpuri de editare numite /nume/ %i /prenume/. 0u alte cuinte
codul formularului dumneaoa&tr a arta a&tfel)
LD.5? actionS/c'i,$inG&cript.c'i/ met+odS/Aet/M
LIF67> tIpeS/te-t/ nameS/nume/MIntroduceti numele
LIF67> tIpeS/te-t/ nameS/prenume/MIntroduceti prenumele
LIF67> tIpeS/&u$mit/M
LGD.5?M
2 mai pre&upunem c izitatorul introduce n c(mpul /nume/ aloarea /6ope&cu/ iar n c(mpul
/prenume/ aloarea /Ion/ %i c adre&a 75@ a &criptului no&tru e&te CCC.+tml.comGc'i,
$inG&criptulmeu.c'iG
*tunci &ererului i e&te tran&mi& urmtoarea adre& 75@)
+ttp)GGCCC.+tml.comGc'i,$inG&criptulmeu.c'iG<numeS6ope&cu\prenumeSIon
8irul de caractere de dup &emnul de ntre$are e&te depu& n aria$ila de mediu
[7#5KV2>5IFA.
Transiterea datelor prin etoda Post
?etoda Post e&te cea mai folo&it n tran&miterea datelor. *tunci c(nd datele &unt trimi&e prin
acea&t metod, ele &unt furnizate &criptului prin intermediul ,iierului standard de intrare, ST67A.
6entru a preciza &criptului lun'imea %irului de caractere 9numrul de octe!i; pe care l are de citit,
acea&ta e&te re!inut n aria$ila de mediu 0.F>#F>V@#FA>=.
Indiferent de metoda folo&it, dup citirea datelor &criptul tre$uie & le decodifice, adic &
elimine din %irul de caractere primit toate caracterele care nu au fo&t introdu&e de utilizator) /\/, /S/ %i
altele.
3up citirea %i decodificarea datelor &criptul e-ecut in&truc!iunile de proce&are a lor %i pre'te%te
r&pun&ul pentru &erer.
1'iarea re.u!tate!or
En 'eneral, r&pun&urile pe care &criptul le tran&mite &ererului &e mpart n dou cate'orii)
2arcina a fo&t ndeplinit cu &ucce&
2arcina nu a fo&t ndeplinit, au aprut erori.
3ac e-ecu!ia &criptului e&te ncununat de &ucce& iar &arcinile &ale au fo&t ndeplinite, ace&ta
tran&mite &ererului un r&pun& n con&ecin!. 3ac, din dier&e motie, au aprut erori la e-ecu!ia
&criptului iar ace&ta nu %i,a du& &arcinile la $un &f(r%it, &ererului i e&te prezentat un me&a" de eroare,
care tre$uie & con!in informa!ii de&pre natura erorii aprute.
3e e-emplu, & pre&upunem c n pa'ina dumneaoa&tr a!i pla&at un formular care &olicit datele
per&onale ale izitatorului, care &unt tran&mi&e unui &cript a crui &arcin e&te & trimit ace&te date la o
adre& &pecificat de mail 9acea&ta e&te una dintre cele mai comune utilizri ale &cripturilor;. 3up ce
izitatorul a introdu& datele iar &criptul %i,a nc+eiat e-ecu!ia, e&te $ine & afi%eze un me&a" pentru
izitator prin care l informeaz c datele &ale au fo&t e-pediate. 6e de alt parte, dac a &urenit o
eroare la introducerea datelor, izitatorului tre$uie &,i fie oferit un me&a" prin care e&te informat de&pre
ace&t lucru %i, n plu&, de&pre po&i$ilitatea de a remedia eroarea.
?e&a"ele priind rezultatele e-ecu!iei pot fi trimi&e de &cript &ererului, care formateaz +eaderele
=>>6 de r&pun&, &au &criptul poate formata el n&u%i +eaderele %i poate trimite rezultatele direct la
$roC&er.
#-i&t trei tipuri fundamentale de +eadere de r&pun&)
1. Content$TGpe
1. Location
2. Status
Content$tGpe
1roC&erul dumneaoa&tr prime%te +eadere de tipul 0ontent,>Ipe ori de c(te ori prime%te de la
&erer un document =>?@, o ima'ine &au orice alt tip de fi%ier. Indiferent de natura fi%ierului tran&mi&
de la &erer la $roC&er, &ererul a a&ocia fi%ierului ace&t +eader pentru a comunica $roC&erului tipul
fi%ierului trimi&.
>ipurile de fi%iere care pot fi tran&mi&e $roC&erului &unt a&ociate &u$ numele de tipuri M7M(
9Multipurpose 'nternet Mail 5xtensions;. 0la&ificarea &e $azeaz pe con!inutul fi%ierului trimi&. Iat
cele %apte tipuri ?I?# fundamentale)
>e-t
?ultipart
?e&&a'e
*pplication
Ima'e
*udio
Uideo
Diecare dintre ace&te tipuri are un numr de &u$,tipuri. =eaderul 0ontent,>Ipe &pecific at(t tipul
c(t %i &u$tipul ?I?# al fi%ierului trimi&. Iat c(tea e-emple)
, >e-tG=>?@
, >e-tGplain
, Ima'eG'if
, Ima'eG"pe'
Location
*ce&t +eader con!ine adre&a 75@ a documentului pe care &criptul dore%te &,l trimit ca r&pun&
ctre $roC&er. 3e e-emplu, dac r&pun&ul pe care dori!i &,l primea&c izitatorul pa'inii dup
tran&miterea datelor e&te un document =>?@ care &e nume%te multumesc)html atunci &criptul a
con!ine un +eader ca ace&ta)
@ocation) multume&c.+tml
urmat de o linie li$er. En ace&t mod $roC&erul e&te redirec!ionat ctre 75@,ul documentului
re&pecti. En &itua!ia c(nd folo&i!i +eaderul @ocation pentru a afi%a r&pun&ul, &criptul nu a mai include
+eaderul de r&pun&
0ontent,>Ipe.
Status
=eaderul 2tatu& returneaz ctre $roC&er un cod format din trei cifre mpreun cu un te-t
e-plicati. *!i zut de foarte multe ori ace&t +eader n &itua!iile c(nd cererea trimi& de $roC&er nu a
fo&t ndeplinit, iar documentul &olicitat nu a putut fi furnizat de ctre &erer. Iat c(tea dintre cele mai
cuno&cute coduri de &tatu&)
400 j 1ad reTue&t j apare n &itua!ia c(nd &inta-a +eaderului =>>6 de cerere a fo&t eronat
401 j 7naut+orized j apare c(nd, pentru a o$!ine documentul &olicitat, &unt nece&are anumite
priile'ii de acce&
403 j Dor$idden j apare c(nd &ererul refuz acce&ul la document
404 j Dile Fot Dound j apare n &itua!ia c(nd &ererul nu poate '&i documentul &olicitat
). #xemp!e de scripturi
@im$a"ul cel mai folo&it pentru &crierea &cripturilor e&te 6erl. 0+iar dac nu cunoa%te!i ace&t
lim$a", dac ae!i totu%i cuno%tin!e minime de pro'ramare, nu a fi 'reu & n!ele'e!i &tructura
&cripturilor prezentate n continuare.
3in pcate, &pre deo&e$ire de documentele =>?@ care pot fi &cri&e ntr,un &implu editor de te-t
%i apoi izualizate cu a"utorul $roC&erului, cu &cripturile lucrurile nu mai &tau a%a.
6erl e&te un lim$a" interpretat. *cea&ta n&eamn c pute!i &crie codul &ur& ntr,un editor de te-t,
cum ar fi Fotepad. 3ar pentru ca &criptul & func!ioneze, &ererul tre$uie & ai$ in&talat un interpretor
de 6erl. ?a"oritatea &ererelor 4e$ de!in un a&tfel de interpretor. 3ac dori!i & in&tala!i %i
dumneaoa&tr un interpretor 6erl %i & te&ta!i func!ionarea &cripturilor prezentate n e-emplele de mai
"o&, $a mai mult, dac dori!i & tran&forma!i propriul calculator ntr,un &erer 4e$ pe care & pute!i
rula &cripturi 6erl, precum %i & te&ta!i func!ionarea ntre'ului &ite, e!i afla cum pute!i realiza ace&t
lucru n ultima parte a ace&tui capitol.
6entru moment, iat c(tea e-emple &imple de &cripturi 6erl din care pute!i face o idee de&pre
&tructura unui &cript %i &inta-a lim$a"ului 6erl. 0el mai &implu &cript e&te cla&icul e-emplu /#ello,
orld J/prezentat n #-emplul 12.1. *ce&t &cript ilu&treaz modul n care &e realizeaz confi'urarea
+eaderului de r&pun& 0ontent,>Ipe %i afi%area unui document =>?@.
("eplul 1'. 1
1 RNGu&rG$inGperl
2
3 print /0ontent,>Ipe) te-tG+tmlfnfn/]
4
5 print /L=>?@Mfn/]
6 print /L=#*3Mfn/]
7 print /L>I>@#M=ello 4orld NLG>I>@#Mfn/]
8 print /LG=#*3Mfn/]
9 print /L1.3KMfn/]
10 print /L=1M=ello 4orld NLG=1Mfn/]
11 print /L6Mfn/]
12 print /L=3M=ae a nice daILG=3Mfn/]
13 print /LG1.3KMfn/]
14 print /LG=>?@Mfn/]
@iniile &criptului nu &unt, n 'eneral, numerotate, numerotarea &erind aici doar la referirea lor
mai u%oar. *ce&t e-emplu &implu realizeaz afi%area pe ecran a te-tului /=ello 4orld N/, %i a me&a"ului
/=ae a nice daI/. Fu e-i&t o etap de citire a datelor, deoarece nu e-i&t date de intrare.
@inia 1 con!ine calea &pre interpretorul 6erl aflat pe &erer. 3ac &i&temul &u$ care lucreaz
&ererul e&te 7FIW, &emnul R tre$uie ndeprtat. En linia a 3,a e&te confi'urat +eaderul =>>6 de
r&pun&, 0ontent,>Ipe. *%a cum o$&era!i, documentul care a fi tran&mi& $roC&erului e&te de tip te-t,
%i anume un document =>?@.
2ecen!a de caractere /fn/ care &e repet la finalul fiecrei linii &e nume%te secven#% escape.
5olul ace&teia e&te & realizeze, la afi%are, trecerea pe r(ndul urmtor. 6e linia n care e&te definit
+eaderul 0ontent,>Ipe e&te o$li'atorie prezen!a a dou &ecen!e e&cape.
>oate in&truc!iunile &criptului &unt in&truc!iuni de afi%are. 6rin intermediul lor, &criptul de&crie
$roC&erului pa'ina 4e$ pe care urmeaz & o afi%eze. 2tructura pa'inii con!ine, dup cum ede!i, toate
&ec!iunile nece&are) etic+eta de de&c+idere a documentului) L=>?@M, antetul) L=#*3M %i corpul
documentului) L1.3KM.
3ac dori!i & te&ta!i func!ionarea &criptului, &crie!i,l n Fotepad %i &ala!i,l &u$ numele hello)pl
9e-ten&ia .pl indic un pro'ram &cri& n lim$a"ul 6erl. 2e mai poate folo&i %i e-ten&ia .b-i;. *poi
in&tala!i &criptul n directorul cgi!bin al &ererului dumneaoa&tr.
3up e-ecutarea &criptului, pa'ina de r&pun& arat ca n Di'ura 12.1
#-emplul urmtor realizeaz preluarea datelor introdu&e de izitator prin intermediul unui
formular %i afi%area lor pe ecran. Dormularul pentru introducerea datelor prezentat n #-emplul 12.2
con!ine doar ca&ete de te-t, n care or fi introdu&e numele, prenumele %i adre&a de mail. *tri$utul
action al etic+etei LD.5?M trimite la &criptul script>)pl aflat n directorul cgi!bin al &ererului.
*&pectul formularului e&te cel din Di'ura 12.2
("eplul 1'. '
L=>?@M
L=#*3M
L>I>@#Mc'i2LG>I>@#M
LG=#*3M
L1.3KM
LD.5? met+odS/6.2>/ actionS/c'i,$inG&cript2.pl/M
Fumele)
LIF67> tIpeS/te-t/ nameS/nume/ML15M
6renumele)
LIF67> tIpeS/te-t/ nameS/prenume/ML15M
*dre&a de email)
LIF67> tIpeS/te-t/ nameS/email/ML15M
LIF67> tIpeS/&u$mit/ alueS/>rimite/M
LGD.5?M
LG1.3KM
LG=>?@M
.$&era!i c datele &unt tran&mi&e la &criptul script>)pl aflat n directorul
cgi!bin, prin intermediul metodei 6o&t. #-emplul 12.3 ilu&treaz modul de con&truire al &criptului
script>)pl.
("eplul 1'. +
1 RNGu&rG$inGperl
2
3 R 6la&area datelor tran&mi&e prin metoda 6o&t in aria$ile
4
5 read92>3IF, m$uffer, m#FUnl0.F>#F>V@#FA>=lo;]
6 hpair&S&plit9G\G, m$uffer;]
7 foreac+ mpair 9hpair&;
8 n
9 9mname, malue;S&plit9GSG, mpair;]
10 malueSp trGYG G]
11 malueSp &G:9Pa,f*,D0,9QPa,f*,D0,9Q;GpacJ9/0/, +e-9m1;;Ge']
13 mD.5?nmnameoSmalue]
14 o
15 Rafi&area rezultatului
16
17 print /0ontent,tIpe) te-tG+tmlfnfn/]
18
19 print /L=>?@Mfn/]
20 print /L=#*3Mfn/]
21 print /L>I>@#M?ultume&cNLG>I>@#Mfn/]
22 print /LG=#*3Mfn/]
23 print /L1.3KMfn/]
24 print /L=1M?ultume&cNLG=1Mfn/]
25 print /L15Mfn/]
26 print /L=4M3atele introdu&e &unt)LG+4Mfn/]
27 print /L15Mfn/]
28 print /L=3MmD.5?nlnumelo mD.5?nlprenumeloLG=3Mfn/]
29 print /L=3MmD.5?nlemailloLG=3Mfn/]
30 print /LG1.3KMfn/]
31 print /LG=>?@Mfn/]
2e impun c(tea e-plica!ii. ?ai nt(i, o$&era!i pe liniile 1, 3 %i 15 prezen!a caracterului R. *ce&ta
e&te modul de a introduce comentarii ntr,un pro'ram 6erl. 0omentariile &unt e-trem de utile, mai ale&
la &cripturi. 7n &cript necomentat e&te foarte 'reu de utilizat. 0a %i n cazul comentariilor introdu&e n
documentele =>?@, ace&tea &unt i'norate la e-ecu!ie.
6rima &ec!iune a &criptului realizeaz citirea datelor. 3eoarece ace&tea au fo&t tran&mi&e prin
metoda 6o&t, o$&era!i c citirea &e face din fi%ierul &tandard de citire, 2>3IF. Entre liniile 5 %i 14 &e
realizeaz citirea, decodificarea datelor %i pla&area lor n aria$ilele core&punztoare. 2ecen!a dintre
liniile 16 %i 31 reprezint partea de afi%are a rezultatelor. 0a %i n e-emplul anterior, o$&era!i c linia n
care &e face formatarea +eaderului de r&pun& 0ontent,>Ipe nece&it prezen!a a dou &ecen!e e&cape
/fnfn/.
2 pre&upunem c datele introdu&e n formular &unt)
nume , Ione&cu
prenume , ?aria
adre&a de mail , ionmarhIa+oo.com.
*tunci pa'ina 'enerat de &cript a arata ca n Di'ura 12.3

*pelul &cripturilor nu &e face numai prin intermediul formularelor. 2e poate realiza %i prin
intermediul ima'inilor &au al le'turilor. 6rezentm n continuare o pa'ina 4e$ care apeleaz &criptul
ip)pl prin intermediul unei le'turi. 2criptul realizeaz afi%area adre&ei I6 a computerului pe care e&te
in&talat.

#-emplul 12.4 prezint documentul =>?@ n care e&te apelat &criptul. *&pectul pa'inii e&te cel
din Di'ura 12.4
("eplul 1'. 0
L=>?@M
L=#*3M
L>I>@#Mc'i4LG>I>@#M
LG=#*3M
L1.3KM
LD.F> faceS/arial/ &izeS/4/M
6entru a afla adre&a dumneaoa&tra de I6 apa&ati
L* +refS/c'i,$inGip.pl/M aiciLG*M
LGD.F>M
LG1.3KM
LG=>?@M
2criptul ip)pl folo&e%te aria$ila de mediu 5#?.>#V*335 pentru a o$!ine adre&a I6. En
#-emplul 12.5 e&te prezentat &criptul ip)pl.
("eplul 1'. 1
1 RNGu&rG$inGperl
2
3 print /0ontent,>Ipe) te-tG+tmlfnfn/]
4
5 print /L=>?@Mfn/]
6 print /L=#*3Mfn/]
7 print /L>I>@#Mc'i3LG>I>@#Mfn/]
8 print /LG=#*3Mfn/]
9 print /L1.3KMfn/]
10 print /L6Mfn/]
11 print /L=3M*dre&a I6 a computerului d&. e&te) m#FUn5#?.>#V*335o
LG=3Mfn/]
12 print /LG1.3KMfn/]
13 print /LG=>?@Mfn/]
@a ap&area linJ,ului din documentul =>?@ e&te apelat &criptul, care afi%eaz pa'ina de r&pun&
din Di'ura 12.5
#ident, dac e!i rula &criptul pe alt computer, adre&a I6 o$!inut a fi diferit. 0(nd &criptul e&te
apelat printr,un linJ nu e-i&t po&i$ilitatea de a i &e tran&mite date.
+. (nsta!area interpretoru!ui :er! i a ap!icaiei :=S
6entru a putea erifica func!ionarea e-emplelor prezentate precum %i a &cripturilor pe care dori!i
& le folo&i!i n cadrul &ite,ului dumneaoa&tr nainte de etapa pu$licrii pe 4e$ tre$uie & ae!i
in&talat un interpretor 6erl. 6ute!i de&crca %i in&tala interpretorul *ctie 6erl izit(nd adre&a)
+ttp)GGCCC.'o&&land.comGcour&eGin&tall.+tml
@a aceea%i adre& pute!i '&i %i aplica!ia ?icro&oft 6er&onal 4e$ 2erer 9642; care e&te furnizat
de ?icro&oft n pac+etele 4indoC& 98 %i 4indoC& 2000. 5ecomandm de&crcarea aplica!iei de la
adre&a men!ionat, care are aanta"ul c include o corec!ie a unui bug de in&talare e-i&tent n er&iunea
oficial ?icro&oft.
.ten#ieH
?icro&oft 6er&onal 4e$ 2erer &e poate in&tala pe computerul per&onal a(nd rolul de aplica!ie
&erer. .dat in&talat, computerul dumneaoa&tr a func!iona ntocmai ca un &erer 4e$, a&tfel nc(t
e!i putea te&ta func!ionarea &cripturilor in&talate precum %i func!ionarea ntre'ului &ite.
3in pcate, ?icro&oft nu furnizeaz o aplica!ie &erer &imilar %i n pac+etele 4indoC& ?ilenium
%i 4indoC& W6 iar aplica!ia 642 nu func!ioneaz dec(t pe &i&temele 4indoC& 98 %i 2000.
@a adre&a indicat e!i '&i ndrumri preci&e %i complete a&upra tuturor pa%ilor pe care i ae!i de
urmat pentru a in&tala at(t interpretorul 6erl c(t %i aplica!ia 6er&onal 4e$ 2erer. En plu&, &ite,ul
re&pecti con!ine %i un foarte $un cur& de ini!iere n lim$a"ul 6erl n lim$a en'lez.
,. -e.umat
0AI e&te un protocol de comunicare face le'tura dintre &cripturile aflate pe &ererul 4e$ %i
documentele =>?@. 7n &cript 0AI e&te o aplica!ie care re&pect ace&t protocol.
6rintre cele mai folo&ite &cripturi 0AI &unt cele care &ere&c la proce&area informa!iilor introdu&e
ntr,un formular.
>ran&ferul datelor de la formular la &ererul pe care &e afl &criptul &e face printr,una dintre cele
dou metode) Aet &au 6o&t.
3up ce datele au fo&t tran&mi&e la &erer, &criptul le cite%te %i le decodific, le prelucreaz
conform in&truc!iunilor &ale %i tran&mite un r&pun& ctre $roC&er.
1roC&erul afi%eaz rezultatele trimi&e de &cript n conformitate cu +eaderele de r&pun& inclu&e n
pac+etul de date tran&mi&.
Capitolul 1+
DavaScript
1. Ce este Ba"aScript?
Baa2cript e&te un libaE de pro-raare orientat pe o$iecte, care permite & oferi!i pa'inilor
dumneaoa&tr un caracter mai dinamic %i interacti. 3ac a!i parcur& prima parte a cr!ii %i ae!i
cuno%tin!e minime de pro'ramare, nu e!i aea dificult!i n n!ele'erea modului n care func!ioneaz
ace&t lim$a".
.ten#ieH
Baa2cript nu e&te acela%i lucru cu lim$a"ul Baa. 3e fapt, de%i numele &unt a&emntoare, &unt
dou lim$a"e foarte diferite. 2pre deo&e$ire de Baa, care e&te un lim$a" orientat pe o$iecte, comple-,
a&emntor cu lim$a"ul 0YY, Baa2cript e&te mult mai &implu %i mai u%or de folo&it. En timp ce Baa
e&te un lim$a" pentru pro'ramatori, Baa2cript e&te de&tinat neprofe&ioni%tilor care dore&c &
m$unt!ea&c a&pectul %i func!ionalitatea pa'inilor de 4e$.
Baa2cript a fo&t dezoltat de Fet&cape 0orporation pentru a fi utilizat n $roC&erul Fet&cape
Fai'ator. 7n &cript Baa2cript poate fi pla&at direct n pa'ina 4e$, fiind e-ecutat de $roC&er
mpreun cu documentul 4e$ care,l con!ine. 1roC&erul Internet #-plorer 9er&iunile mai noi dec(t I#
3.0; e-ecut %i el corect &cripturile Baa2cript.
Baa2cript e&te un lim$a" interpretat, ca %i 6erl, dar n cazul &u nu tre$uie & mai face!i 'ri"i n
priin!a in&talrii unui interpretor deoarece ace&ta e&te inclu& n $roC&er. 0odul &ur& poate fi inclu& n
pa'ina 4e$ &au poate fi pu& ntr,un fi%ier &eparat care e&te referit din pa'in.
0a %i n cazul &cripturilor 0AI, nici n ace&t caz nu e&te a$&olut nece&ar cunoa%terea lim$a"ului
Baa2cript pentru a putea in&era %i utiliza cu &ucce& a&tfel de &cripturi. #-i&t un numr impre&ionant de
&cripturi 'ata de utilizare, care &e pot inte'ra cu u%urin! n codul &ur& al documentelor dumneaoa&tr.
2. Cum poate 'i inc!us un script n pa&in*?
2cripturile Baa2cript pot fi inclu&e n pa'ina 4e$ n dou moduri)
prin intermediul etic+etei 5SCR7PT9 5JSCR7PT9
prin intermediul unei proceduri evenient
Iat un e-emplu foarte &implu n care n document e&te inclu& un &cript care afi%eaz n pa'in
te-tul /1una ziuaN/ prin intermediul etic+etei L205I6>M. *&pectul ace&tei pa'ini e&te cel din Di'ura
13.1.
("eplul 1+. 1
L=>?@M
L=#*3M
L>I>@#M"aa&cript1LG>I>@#M
LG=#*3M
L1.3KM
L=1M6rimul e-emplu Baa2criptLG=1ML=5M
L205I6> lan'ua'eS/Baa2cript/M
document.Crite9/1una ziuaN/;
LG205I6>M
LG1.3KM
LG=>?@M
7nul dintre atri$utele etic+etei L205I6>M e&te lan-ua-e prin care e&te &pecificat lim$a"ul n care
e&te &cri& &criptul, n cazul ace&ta aloarea atri$utului fiind /Baa2cript/.
. alt modalitate de a include de a include un &cript n pa'in e&te &alarea ace&tuia ca un fi%ier
e-tern %i apelarea &a prin intermediul atri$utului src al etic+etei L205I6>M.
En e-emplele de &cripturi care or urma e!i o$&era dier&e moduri n care pot fi inclu&e n
pa'inile 4e$ &cripturi Baa2cript.
Fu om intra n amnunte priind &inta-a lim$a"ului, deoarece acea&ta dep%e%te &u$iectul ace&tei
cr!i. >otu%i, pentru a putea folo&i "udicio& un &cript Baa2cript tre$uie & ae!i o ima'ine de&pre
elementele e&en!iale cu care lucreaz Baa2cript, o$iectele %i eenimentele.
D<iecte
7n obiect e&te un nou tip de date, care reune%te &u$ aceea%i denumire at(t datele c(t %i func!iile
care le prelucreaz. 3atele &e nume&c propriet%#ile o$iectului iar func!iile &e nume&c etodele
o$iectului.
6entru a e-emplifica ace&te concepte, & pre&upunem c dorim & con&truim un o$iect care &
reprezinte o carte de izit, pe care l om numi 0ard. *ce&t o$iect a aea urmtoarele propriet!i)
, nume
, adre&
, telefon
6entru a defini un o$iect &e folo&e%te o func!ie numit constructor. En e-emplul no&tru, func!ia
con&tructor a o$iectului 0ard a arata a&tfel)
function 0ard9num, adr, tel;
n
t+i&.numeSnum]
t+i&.adre&aSadr]
t+i&.telefonStel]
o
En ace&t moment, con&tructorul o$iectului 0ard nc nu e&te complet, el con!ine numai
propriet!ile o$iectului.
*cum & con&truim %i o metod care & lucreze cu ace&t o$iect. 3eoarece dorim & tiprim cr!ile
de izit pe care le om realiza cu a"utorul ace&tui o$iect, om crea o func!ie care a tipri propriet!ile
o$iectului, numit 6rint0ard9;.
function 6rint0ard9;
n
document.Crite9/Fumele) /, t+i&.nume, /fn/;]
document.Crite9/*dre&a) /, t+i&.adre&a, /fn/;]
document.Crite9/>elefonul) /, t+i&.telefon, /fn/;]
o
*cum putem &crie defini!ia complet a o$iectului no&tru)
function 0ard9num, adr, tel;
n
t+i&.numeSnum]
t+i&.adre&aSadr]
t+i&.telefonStel]
t+i&.6rint0ardS6rint0ard]
o
2 trecem, acum, la folo&irea unui o$iect. 6entru a crea un o$iect concret, adic o in&tan! a
o$iectului 0ard, &e folo&e%te cu(ntul c+eie neC. 7rmtoarea in&truc!iune con&truie%te o in&tan! a
o$iectului 0ard, care &e nume%te ana)
anaSneC 0ard 9/*na ?unteanu/, /2tr. *pu&ului, nr.2, 1ucure&ti/, /6162345/;
.dat ce a fo&t creat o nou in&tan! a o$iectului 0ard, metoda 6rint0ard poate fi folo&it a&tfel)
ana.6rint0ard9;
8i acum, & punem toate ace&te &ecen!e de cod laolalt %i & folo&im o$iectul ntr,o pa'in 4e$,
pentru a afi%a mai multe cr!i de izit. #-emplul 13.2 realizeaz ace&t lucru. *&pectul pa'inii de&cri&e
n document e&te cel din Di'ura 13.2.
("eplul 1+. '
L=>?@M
L=#*3M
L>I>@#M"aa&cript2LG>I>@#M
L205I6> lan'ua'eS/Baa2cript/M
function 6rint0ard9;
n
document.Crite9/L1MFumele)LG1M /, t+i&.nume, /L15M/;]
document.Crite9/L1M*dre&a)LG1M /, t+i&.adre&a, /L15M/;]
document.Crite9/L1M>elefonul)LG1M /, t+i&.telefon, /L=5M/;]
o
function 0ard9num, adr, tel;
n
t+i&.numeSnum]
t+i&.adre&aSadr]
t+i&.telefonStel]
t+i&.6rint0ardS6rint0ard]
o
LG205I6>M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M0rearea o$iectelorLG=1M
Inceputul &criptuluiL=5M
L205I6> lan'ua'eS/Baa2cript/M
GG 0rearea a trei o$iecte noi
anaSneC 0ard 9/*na ?unteanu/, /2tr. *pu&ului, nr.2, 1ucure&ti/, /6162345/;
ionSneC 0ard9/Ion 6ope&cu/, /2tr. gorilor nr.1, 6loie&ti/, /456789/;]
raduSneC 0ard9/5adu Ione&cu/, /2tr. Foptii, nr.3, 6ite&ti/, /201202/;]
GG *fi&area lor
ana.6rint0ard9;]
ion.6rint0ard9;]
radu.6rint0ard9;]
LG205I6>M
2far&itul &criptului
LG1.3KM
LG=>?@M
6ute!i o$&era modul n care a fo&t inclu& &criptul n pa'ina 4e$. *&tfel, defini!ia &criptului e&te
pla&at n antetul documentului =>?@, iar apelul &criptului e&te fcut n corpul documentului. En
cadrul &criptului apar dou linii precedate de %irul de caractere /GG/. *ce&ta e&te modul n care &e
introduc comentariile n cadrul &cripturilor Baa2cript.
#"enimente
En continuare om di&cuta de&pre un alt concept fundamental cu care lucreaz Baa2cript, %i
anume evenientul. 7n eeniment e&te o ac!iune care &urine la un moment dat %i n urma creia e&te
declan%at e-ecu!ia unei anumite pr!i din pro'ram. .ri de c(te ori izitatorul face clicJ pe o le'tur,
de e-emplu, c(nd introduce un te-t &au c+iar c(nd trece cu mou&e,ul dea&upra unei zone a pa'inii,
&urine un eeniment la care &criptul reac!ioneaz 'ener(nd un r&pun&.
Iat care &unt tipurile de eenimente cu care lucreaz Baa2cript)
Tabel 1+. 1
(venient 6escriere
on*$ort
*pare c(nd utilizatorul renun! la ncrcarea
unei ima'ini
on1lur
*pare c(nd un o$iect din pa'in pierde
focu&ul
on0+an'e
*pare c(nd un c(mp de editare e&te
modificat de utilizator 9c(nd &e introduce un te-t;
on0licJ
*pare c(nd utilizatorul face clicJ pe un
element
on#rror
*pare c(nd un document &au o ima'ine nu
&e ncarc corect
onDocu& *pare c(nd un element prime%te focu&ul
on@oad
*pare c(nd o pa'in &au o ima'ine %i
termin ncrcarea
on?ou&e.er
*pare c(nd cur&orul mou&e,ului &e plim$
dea&upra unui element
on?ou&e.ut
*pare c(nd cur&orul mou&e,ului pr&e%te
elementul
on2elect *pare c(nd utilizatorul &electeaz un te-t
on2u$mit
*pare c(nd e&te ap&at un $uton de tip
2u$mit
on7nload
*pare c(nd utilizatorul pr&e%te
documentul &au &e&iunea curent.
3up cum ede!i, prin intermediul Baa2cript &e poate r&punde unui mare numr de eenimente.
*ce&t lucru &e realizeaz prin crearea unei proceduri evenient.
6rocedurile eeniment nu &unt definite cu a"utorul etic+etei L205I6>M ci ele &unt atri$ute ale
celorlalte etic+ete. 3e e-emplu, iat o le'tur care include o procedur eeniment)
L* +refS/+ttp)GGCCC.amazon.com/
on?ou&e.erS/ CindoC.&tatu&SH0ea mai mare li$rarie irtualaH] return true/M 0licJ aiciLG*M
.$&era!i c ntrea'a procedur eeniment care r&punde la eenimentul ?ou&e.er e&te inclu&
n etic+eta L*M. 2unt &pecificate dou in&truc!iuni care &e e-ecut n momentul c(nd cur&orul mou&e,
ului e&te pla&at dea&upra le'turii. 6rima afi%eaz un me&a" n $ara de &tatu& a fere&trei, urmtoarea
returneaz aloarea true, pentru a mpiedica %ter'erea me&a"ului. ?ai o$&era!i c me&a"ul care a fi
afi%at e&te delimitat de apo&trofuri.
3ac procedura eeniment e&te mai e-tin&, includerea ei n ntre'ime ntr,o etic+eta deine
nepractic. En acea&t &itua!ie, e&te mai aanta"o& & con&truim o func!ie care & trateze eenimentul.
Dunc!ia e&te definit n &ec!iunea L=#*3M a documentului, iar n corpul documentului e&te
apelat ca procedur eeniment. 3e e-emplu, & pre&upunem c am con&truit o func!ie eeniment
numit 0ite&te9;. *tunci ea poate fi apelat a&tfel)
L* +refS/Rcuprin&/ on?ou&e.erS/0ite&te9;]/M?er'i la 0uprin&LG*M
En momentul c(nd mou&e,ul &e afl dea&upra le'turii, func!ia e&te lan&at n e-ecu!ie.
3. Modu! de execuie a! scriptu!ui
2cripturile inte'rate n cadrul pa'inilor &unt ealuate dup ce ncrcarea pa'inii &,a nc+eiat dar
nainte ca acea&ta & fie afi%at. 6e de alt parte, &cripturile &tocate ca fi%iere &eparate &unt ealuate
naintea tuturor &cripturilor in!line 9adic a celor inclu&e n pa'in;. Dunc!iile definite n cadrul
&cripturilor nu &unt e-ecutate automat la ncrcarea pa'inilor ci a$ia atunci c(nd ace&tea &unt apelate,
fie prin etic+eta L205I6>M fie printr,o procedur eeniment.
3ac a!i zut reodat un &cript Baa2cript ntr,o pa'in 4e$, poate a!i remarcat un lucru
aparent ciudat) ntre'ul &cript e&te inclu& ntre etic+etele =>?@ de comentariu)
LN, , comentariu , ,M.
?otiul e&te faptul c e-i&t $roC&ere care nu recuno&c %i nu pot e-ecuta &cripturile Baa2cript.
3ac un document 4e$ care con!ine cod Baa2cript e&te ncrcat ntr,un a&emenea $roC&er, n loc ca
&criptul & fie e-ecutat, e&te afi%at n pa'in ntre'ul cod, ceea ce nu e&te de dorit. *%a dup cum %ti!i,
comentariile &unt i'norate de $roC&er, a&tfel c includerea codului Baa2cript ntre etic+etele de
comentariu a duce la i'norarea ace&tei pr!i a documentului. #-cep!ie fac $roC&erele care recuno&c
Baa2cript %i care or identifica prezen!a Baa2cript %i or e-ecuta &criptul.
En concluzie, maniera recomandat pentru introducerea n pa'in a unui &cript e&te urmtoarea)
L205I6> lan'ua'eS/Baa2cript/M
LN , ,
0od Baa2cript
GG , ,M
LG205I6>M
*m n!at p(n acum cum poate fi inclu& codul Baa2cript ntr,un document =>?@. 2 edem,
mai departe, cum putem folo&i &cripturile Baa2cript pentru a face pa'inile mai atractie %i a le
m$unt!i func!ionalitatea.
4. Ce se poate 'ace cu Ba"aScript?
En continuare &unt prezentate c(tea e-emple de &cripturi cu a"utorul crora &e pot realiza lucruri
care dep%e&c po&i$ilit!ile lim$a"ului =>?@, cum ar fi afi%area datei curente n pa'ina dumneaoa&tr,
de&c+iderea unei fere&tre pop,up, afi%area unui me&a" n $ara de &tatu& a fere&trei $roC&erului, afi%area
aleatoare a unor me&a"e n pa'in, ima'ini care %i &c+im$ a&pectul la trecerea mou&e,ului, %i, una
dintre cele mai utile aplica!ii Baa2cript, alidarea formularelor.
1'iarea unui mesaE n <ara de status
*ce&t e-emplu ilu&treaz modul cum &e poate afi%a un me&a" n $ara de &tatu& 9aflat la $aza
fere&trei $roC&erului; la trecerea cu mou&e,ul pe&te un anumit element din pa'in. 3e o$icei, ace&t
element e&te un linJ &au o ima'ine. En #-emplul 13.3, elementul e&te o ima'ine. *&pectul pa'inii care
con!ine &criptul e&te cel din Di'ura 13.3.
("eplul 1+. +
L=>?@M
L=#*3M
L>I>@#M"aa&cript3LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M?e&a" in &tatu& $arLG=1ML=5M
L=3M?e&a"ul apare la pla&area mou&e,ului pe ima'ineLG=3M
LI?A &rcS/..GIma'iniGti'er.'if/ on?ou&e.erS/CindoC.&tatu&Sl*ce&ta e&te un ti'rul]
return true/ on?ou&e.utS/CindoC.&tatu&Sl l]return true/M
LG1.3KM
LG=>?@M
1'iarea datei curente n pa&in*
2criptul urmtor preia data &i&temului de operare al utilizatorului %i o afi%eaz n pa'in. #ident,
dac data &i&temului e&te &etat incorect, ea a aprea n pa'in ca atare. #-emplul 13.4 con&truie%te o
pa'in 4e$ care con!ine un a&tfel de &cript, a&pectul pa'inii fiind redat n Di'ura 13.4.
("eplul 1+. 0
L=>?@M
L=#*3M
L>I>@#M"aa&cript4LG>I>@#M
L205I6> lan'ua'eS/"aa&cript/M
LN,,
ar zi, data, luna
aziSneC 3ate9;
if9azi.'et3aI9SS0;n ziS/3uminica, / o
el&e if9azi.'et3aI9;SS1;n ziS/@uni, / o
el&e if9azi.'et3aI9;SS2;nziS/?arti, /o
el&e if9azi.'et3aI9;SS3;nziS/?iercuri, /o
el&e if9azi.'et3aI9;SS4;nziS/Boi, /o
el&e if9azi.'et3aI9;SS5;nziS/Uineri, /o
el&e if9azi.'et3aI9;SS6;nziS/2am$ata, /o
if9azi.'et?ont+9;SS0;nlunaS/Ianuarie /o
el&e if9azi.'et?ont+9;SS1;nlunaS/De$ruarie/o
el&e if9azi.'et?ont+9;SS2;nlunaS/?artie/o
el&e if9azi.'et?ont+9;SS3;nlunaS/*prilie/o
el&e if9azi.'et?ont+9;SS4;nlunaS/?ai/o
el&e if9azi.'et?ont+9;SS5;nlunaS/Iunie/o
el&e if9azi.'et?ont+9;SS6;nlunaS/Iulie/o
el&e if9azi.'et?ont+9;SS7;nlunaS/*u'u&t/o
el&e if9azi.'et?ont+9;SS8;nlunaS/2eptem$rie/o
el&e if9azi.'et?ont+9;SS9;nlunaS/.ctom$rie/o
el&e if9azi.'et?ont+9;SS10;nlunaS/Foiem$rie/o
el&e if9azi.'et?ont+9;SS11;nlunaS/3ecem$rie/o
dataSazi.'et3ate9;
GG,,M
LG205I6>M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M3ata calendari&ticaLG=1ML=5M
LD.F> &izeS/3/ colorS/$lacJ/ faceS/arial/M*zi &untem in data de)
L205I6> lan'ua'eS/Baa2cript/M
LN,,
LD.F> &izeS/4/ colorS/red/ faceS/arial/M
document.Crite9ziYl lYdataYl lYluna;
GG,,M
LG205I6>MLGD.F>M
LG1.3KM
LG=>?@M
0erestre pop-up
7nul din lucrurile care nu &e pot realiza folo&ind doar =>?@ e&te afi%area me&a"elor pop-up.
*ce&te me&a"e apar ntr,o mic ferea&tr care &e nc+ide atunci c(nd e-ecuta!i o anumit ac!iune, de
o$icei clicJ pe un $uton, &au pe un linJ.
En #-emplul 13.5 e&te con&truit pa'ina principal din care e&te apelat ferea&tra pop!up.
("eplul 1+. 1
L=>?@M
L=#*3M
L>I>@#M"aa&cript5LG>I>@#M
L205I6> lan'ua'eS/Baa2cript/M
LN,,
function de&c+ide9;
niCinSCindoC.open9/"aa&cript6.+tml/, /I4IF/, /&tatu&Sno, tool$arSno, locationSno, menuSno,
Cidt+S200, +ei'+tS200/;]o
GG,,M
LG205I6>M
LG=#*3M
L1.3KM
L=1 ali'nS/center/MDerea&tra pop,upLG=1ML=5M
*cea&ta pa'ina demon&treaza cum poate fi creata o ferea&tra pop,upL15M
Derea&tra &e de&c+ide la apa&area pe le'atura de mai "o& &i &e inc+ideL15M
cand e&te apa&at $utonul .XL15M
3e&c+ide ferea&tra
L* +refS/R/ on0licJS/de&c+ide9;]/MaiciLG*M.
LG1.3KM
LG=>?@M
Dire%te c tre$uie creat un document &eparat, care a fi afi%at n ferea&tra pop!up. En #-emplul
13.6 e&te con&truit documentul =>?@ 9;avascript=)html; care a fi afi%at n ferea&tra pop!up definit n
e-emplul anterior.
("eplul 1+. :
L=>?@M
L=#*3M
L>I>@#M"aa&cript6LG>I>@#M
LG=#*3M
L1.3KM
L=3 ali'nS/center/M>e&t pop,upLG=3M
LD.F> colorS/'reen/ faceSarialM*ti inatat &a creati o ferea&tra pop,upL15M
*pa&ati .X ca &a reeniti in ferea&tra initiala
L6M
LD.5? nameS/form1/M
LIF67> tIpeS/$utton/ alueS/.X/
on0licJS/CindoC.clo&e9;]/M
LGD.5?M
LG1.3KM
LG=>?@M
*&pectul pa'inii %i al fere&trei pop!up e&te redat n Di'ura 13.5.
6ute!i modifica documentul =>?@ care &e a de&c+ide n ferea&tra pop!up dup dorin! %i l
pute!i &ala &u$ alt nume. Fu uita!i, n&, & face!i modificarea core&punztoare n func!ia de&c+ide9;
din &cript.
1'iarea a!eatoare a unor mesaEe n pa&in*
7nul dintre lucrurile care i fac pe izitatorii pa'inii dumneaoa&tr & rein la ea cu re'ularitate
e&te arietatea, fie n a&pect, fie, mai ale&, n con!inut.
7n mod de a face pa'inile mai ariate e&te de a afi%a dier&e me&a"e, citate &au ima'ini care & &e
&c+im$e de fiecare dat c(nd e&te acce&at pa'ina.
En #-emplul 13.7 e&te prezentat un &cript care realizeaz afi%area aleatoare a unui citat, ale& dintr,
un %ir predefinit. *&pectul ace&tei pa'ini e&te redat n Di'ura 13.6.
("eplul 1+. <
L=>?@M
L=#*3M
L>I>@#M"aa&cript7LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M0itateLG=1ML=5M
L205I6> lan'ua'eS/Baa2cript/M
LN,,
citatSneC *rraI95;]
autorSneC *rraI95;]
citatP0QS/.mul care,&i cunoa&te limitele e&te &in'urul care are &an&e &a o$tina ce rea./]
autorP0QS/Aoet+e/]
citatP1QS/6e &tancile cele mai inalte a"un' numai ulturii &i reptilele./]
autorP1QS/?onte&Tuieu/]
citatP2QS/6utine lucruri &unt atat de 'reu de &uportat ca un e-emplu $un./]
autorP2QS/?arJ >Cain/]
citatP3QS/*dearul pur &i &implu e&te rareori pur &i niciodata &implu./]
autorP3QS/.&car 4ilde/]
citatP4QS/.mul a inentat lim$a"ul pentru a,&i &ati&face neoia profunda de a &e plan'e./]
autorP4QS/@ilI >omlin/]
inde-S?at+.floor9?at+.random9; k citat.len't+;]
document.Crite9/L3@Mfn/;]
document.Crite9/L3>M/ Y /f// Y citatPinde-Q Y /f/fn/;]
document.Crite9/L33M/ Y /, / Y autorPinde-Q Y /fn/;]
document.Crite9/LG3@Mfn/;]
GG,,M
LG205I6>M
L=5M
0itatul de mai &u& e&te 'enerat aleator la incarcarea pa'inii.
LG1.3KM
LG=>?@M
3ac dori!i & in&era!i ace&t &cript n pa'ina dumneaoa&tr %i & adu'a!i %i alte citate, nu uita!i &
redimen&iona!i ectorii citat %i autor la aloarea n!B, unde n e&te numrul de citate. 6entru a o$&era
func!ionarea &criptului, rencrca!i pa'ina de mai multe ori.
(ma&ini care se sc/im<* 8ro!!o"er ima&es9
7n efect intere&ant pe care l pute!i introduce n pa'in &unt ima'inile care %i &c+im$ a&pectul la
trecerea cu mou&e,ul pe &uprafa!a lor. *ce&ta &e poate o$!ine cu a"utorul &criptului prezentat n
#-emplul 13.8. En Di'ura 13.7 e&te redat a&pectul pa'inii de&cri&e n ace&t e-emplu.
("eplul 1+. =
L=>?@M
L=#*3M
L>I>@#M"aa&cript8LG>I>@#M
L205I6> lan'ua'eS/Baa2cript/M
LN,,
if 9document.ima'e&;
n
pic1onSneC Ima'e9;]
pic1on.&rcS/..GIma'iniGdoleac1."p'/]
pic1offSneC Ima'e9;]
pic1off.&rcS/..GIma'iniGdoleac2."p'/]
o
function de&c+ide9im'Fame;
n
if 9document.ima'e&;
n
im'.nSeal9im'Fame Y /on.&rc/;]
documentPim'FameQ.&rcSim'.n]
o
o
function inc+ide9im'Fame;
n
if 9document.ima'e&;
n
im'.ffSeal9im'Fame Y /off.&rc/;]
documentPim'FameQ.&rcSim'.ff]
o
o
GG,,,M
LG205I6>M
LG=#*3M
L1.3KM
L=1 ali'nS/center/MIma'ini care &e &c+im$aLG=1ML=5M
L0#F>#5M
L* +refS/R/ on?ou&eoerS/de&c+ide9lpic1l;/ on?ou&eoutS/inc+ide9lpic1l;/M
LI?A &rcS/..GIma'iniGdoleac2."p'/ Cidt+S/100/ +ei'+tS/100/ $orderS/1/ nameS/pic1/M
LG*M
LG0#F>#5M
LG1.3KM
LG=>?@M
Ca!idarea 'ormu!are!or
3ac e-emplele prezentate p(n acum au aut rolul de a face pa'ina dumneaoa&tr mai
atracti, urmtorul e-emplu e&te de natur & i m$unt!ea&c func!ionalitatea. . pro$lem cu care
e!i confrunta fr ndoial dac folo&i!i formulare n pa'in, e&te alidarea datelor introdu&e de
utilizator.
Uom crea o pa'in foarte &impl care con!ine dou ca&ete de te-t n care utilizatorul tre$uie &
introduc numele %i adre&a de mail. 3eoarece dup completarea formularului informa!iile introdu&e or
fi &upu&e proce&ului de alidare realizat de &criptul Baa2cript, etic+eta LD.5?M a aea un con!inut
diferit de cel pe care l cunoa%te!i de la capitolul *orulare.
2criptul de mai "o& erific dac toate c(mpurile de editare au fo&t completate. 3ac &e apa& pe
$utonul 2u$mit nainte de a completa am$ele c(mpuri, e&te tran&mi& un me&a" de eroare. 3atele din
formular &unt tran&mi&e unui &cript 0AI ficti, numit m$script)cgi aflat n directorul cgi!bin.
.$&era!i c atri$utele action %i met+od ale etic+etei LD.5?M pe care le cunoa%te!i de la
*orulare &unt, de data acea&ta folo&ite ca propriet!i ale o$iectului predefinit n Baa2cript, form.
3ocumentul con&truit n #-emplul 13.9 con!ine un formular %i &criptul care realizeaz alidarea
datelor introdu&e n c(mpurile formularului. 3in Di'ura 13.8 pute!i o$&era me&a"ul de eroare tran&mi&
n &itua!ia c(nd unul din c(mpurile formularului nu e&te completat.
("eplul 1+. >
L=>?@M
L=#*3M
L>I>@#M"aa&cript9LG>I>@#M
L205I6> lan'ua'eS/"aa&cript/M
LN,,
function erifica9form;
n
if 9form.nume.alueSS //;
n
alert9/Ua ro', introduceti numeleN/;]
form.nume.&elect9;]
o
el&e if 9form.email.alueSS //;
n
alert9/Ua ro', introduceti adre&a de mailN/;]
form.email.&elect9;]
o
el&e
n
form.met+odS/po&t/]
form.tar'etS/V&elf/]
form.actionS/c'i,$inGmI&cript.c'i/]
form.&u$mit9;]
o
o
GG,,M
LG205I6>M
LG=#*3M
L1.3KM
L=1 ali'nS/center/MUalidarea formularelorLG=1M
L=3 ali'nS/center/M9completarea tuturor campurilor;LG=3ML=5M
LD.5? on2u$mitS/erifica9t+i&;] return fal&e]/M
Fume)
LIF67> tIpeS/te-t/ nameS/nume/ &izeS/30/ML15M
*dre&a mail)
LIF67> tIpeS/te-t/ nameS/email/ML15M
LIF67> tIpeS/&u$mit/ nameS/$utton/ alueS/2u$mit/M
LGD.5?M
LG1.3KM
L=>?@M
. alt erificare deo&e$it de util e&te dac utilizatorul a introdu& o adre& de mail alid. 2criptul
din e-emplul urmtor realizeaz trei erificri)
dac n %irul de caractere introdu& e-i&t caracterul h
dac e&te prezent caracterul /./ urmat de trei caractere 9.com, de e-emplu;,
dac e&te prezent caracterul /./ urmat de dou caractere 9.ro, de e-emplu;
Dormularul din #-emplul 13.10 con!ine un c(mp de editare %i un $uton +ubmit. 3ac adre&a de
mail introdu& n c(mpul de editare e&te incorect &e a afi%a un me&a" de eroare a%a cum &e ede n
Di'ura 13.9.
("eplul 1+. 1@
L=>?@M
L=#*3M
L>I>@#M"aa&cript10LG>I>@#M
L205I6> lan'ua'eS/"aa&cript/M
LN,,
function erificaVmail9form;
n
erifSform.email.alue
if 99erif.inde-.f9lhl; L 0; ii 99erif.c+ar*t9erif.len't+,4; NSl.l; \\ 9erif.c+ar*t9erif.len't+,
3; NSl.l;;;
n
alert9/Fu ati introdu& o adre&a de mail alida. Ua ro', incercati din nouN/;]
form.email.&elect9;]
return fal&e]
o
el&e
n
form.met+odS/po&t/]
form.tar'etS/V&elf/]
form.actionS/c'i,$inGmI&cript.c'i/]
form.&u$mit9;]
o
o
GG,,M
LG205I6>M
LG=#*3M
L1.3KM
L=1 ali'nS/center/MUalidarea formularelorLG=1M
L=3 ali'nS/center/M9adre&a de mail corecta;LG=3ML=5M
LD.5? on2u$mitS/erificaVmail9t+i&;]return fal&e]/M
*dre&a mail)
LIF67> tIpeS/te-t/ nameS/email/ML15M
LIF67> tIpeS/&u$mit/ nameS/$utton/ alueS/2u$mit/M
LGD.5?M
LG1.3KM
L=>?@M
6ute!i folo&i n pa'inile dumneaoa&tr oricare dintre ace&te &cripturi, de&i'ur, fc(nd modificrile
nece&are le'ate de &tructura &ite,ului dumneaoa&tr. 3e e-emplu, n &cripturile care realizeaz
alidarea formularelor, pentru ca ace&tea & fie func!ionale, tre$uie & preciza!i localizarea corect a
&criptului 0AI care face prelucrarea lor.
3in e-emplele prezentate pro$a$il c ,a!i putut crea o ima'ine de&pre modul n care pot fi
utilizate &cripturile Baa2cript ntr,o pa'in 4e$. 3ac &unte!i entuzia&mat nc de pe acum, e!i fi %i
mai mult dac e!i depune pu!in efort pentru a n!a lim$a"ul %i e!i putea crea &cripturi mult mai
comple-e dec(t ace&tea.
*e!i n& 'ri" la a&pectele le'ate de iteza de ncrcare a pa'inii) aplica!iile comple-e %i de mari
dimen&iuni ncetine&c ncrcarea pa'inii unde &unt folo&ite. 0a %i n cazul ima'inilor, nu folo&i!i
&cripturi de care nu e&te neoie, doar pentru a arata cu orice pre! c &unte!i un $un pro'ramator. 7na
dintre re'ulile de aur ale unei pa'ini 4e$ $une, re'ul at(t de ade&ea nclcat, e&te &implitatea.
). -e.umat
Baa2cript e&te un lim$a" de pro'ramare orientat pe o$iecte %i eenimente care permite e-tinderea
capacit!ilor lim$a"ului =>?@.
2cripturile Baa2cript &unt inclu&e ntr,un document =>?@ prin intermediul etic+etei container
L205I6>M &au prin intermediul procedurilor eeniment. 6entru a eita afi%area n pa'in a codului
&criptului de $roC&erele care nu &uport &cripturi, &e o$i%nuie%te ca &criptul & fie inclu& ntre etic+etele
de comentariu.
2cripturile pot fi in&erate direct n documentul =>?@ &au pot fi &tocate n fi%iere e-terne care
&unt apelate n documentul re&pecti.
0u a"utorul &cripturilor Baa2cript &e pot realiza &arcini dier&e cum ar fi crearea fere&trelor pop,
up, afi%area datei curente n pa'in, alidarea formularelor %i altele.
En capitolul urmtor om di&cuta de&pre o alt metod care m$o'!e%te lim$a"ul =>?@ cu noi
po&i$ilit!i de a controla a&pectul pa'inilor, %i anume pro'ramarea cu a"utorul foilor de &tiluri 9+t$le
+heets;
Capitolul 10
*oi de stiluri 2CSS3
*oile de stiluri HTML 9Cascading +t$le +heets; reprezint o inoa!ie n dezoltarea 4orld 4ide
4e$, n ciuda faptului c ideea 'ruprii elementelor de formatare a documentelor a aprut cea mai
demult. *plicarea &tilurilor reprezint o e-tindere important a po&i$ilit!ilor de de&i'n, eit(nd
utilizarea de fi%iere 'rafice mari ce determin ncetinirea ncrcrii pa'inilor %i manipularea lor 'reoaie.
Dolo&ind &tilurile =>?@ pute!i fi &i'ur c cititorii or edea te-tul din pa'in e-act a%a cum a fo&t
el proiectat. >e-tul %i propriet!ile ace&tuia, care au fo&t ini!ial controlate de $roC&ere, &e rentorc la
autor, acolo unde le e&te, de fapt, locul.
1. Ce este un sti!?
7n stil reprezint o colec!ie de atri$ute ale te-tului %i ale modului de aran"are a documentului care
pot fi aplicate n mod &electi unui document &au doar unei pr!i din ace&ta. *ce&te atri$ute pot fi tipul
de font, mrimea %i 'ro&imea ace&tuia, mar'inile, para'rafele %i orice altcea ce poate influen!a a&pectul
te-tului n pa'in. Aruparea lor n &tiluri permite autorului & aplice aceea%i colec!ie de atri$ute la
diferite pr!i ale unui document.
2tilurile aplicate unui document =>?@ au multe aanta"e pentru creatorii de pa'ini 4e$)
.fer control cre&cut a&upra a&pectului %i pla&rii te-tului n pa'in
5educ /nlm%eala/ produ& de multitudinea de de&c+ideri %i nc+ideri ale etic+etelor care
de&criu elementele indiiduale ale te-tului
6roce&ul de modificare a diferitelor elemente din pa'in &e &implific
3e e-emplu, dac dori!i ca titlurile dumneaoa&tr & ai$ un alt tip de font dec(t te-tul o$i%nuit,
& fie de dimen&iune mai mare %i &cri&e cu caractere n'ro%ate %i italice, ar tre$ui & defini!i ace&te
atri$ute de formatare pentru fiecare titlu n parte. Dolo&ind &tilurile nu ae!i neoie dec(t & crea!i o
&in'ur defini!ie de &til care & con!in atri$utele de formatare dorite, pe care & o aplica!i la fiecare
titlu.
En plu&, folo&irea &tilurilor reduce con&idera$il efortul depu& atunci c(nd dori!i & aduce!i
modificri a&pectului %i aran"rii elementelor din pa'inile dumneaoa&tr. En loc & parcur'e!i fiecare
document n parte %i & face!i modificri a&upra fiecrui element, nu mai e&te nece&ar & opera!i
modificri dec(t a&upra foii de &tiluri care controleaz ace&te elemente.
2. Tipuri de 'oi de sti!uri
2tilurile =>?@ pot fi aplicate ntr,o pa'in 4e$ n trei moduri)
Uncapsulate 9embedded;) &tilurile &unt inclu&e n documentul a&upra cruia &e aplic, %i anume n
&ec!iunea L=#*3M a documentului. 6rin includerea lor n antetul documentului, &tilurile rm(n
inizi$ile pentru izitatorul pa'inii.
Le-ate 9linked;) &tilurile &unt definite n fi%iere &eparate de documentul =>?@. 3ocumentul face
apel la foaia de &tiluri prin intermediul etic+etei L@IFXM. Dolo&irea ace&tui tip de &tiluri face po&i$il
utilizarea aceleia%i foi de &til pentru documente diferite. 3e a&emenea, e&te po&i$il aplicarea mai
multor foi de &tiluri pentru acela%i document.
7n$line) &tilurile &unt inclu&e ca atri$ute n cadrul etic+etelor =>?@ din document. *cea&ta
n&eamn c ele or afecta doar elementul a&upra cruia &unt aplicate. #&te o modalitate mai pu!in
utilizat deoarece contrazice principiul 'eneral al &tilurilor, acela de a &implifica %i de a face mai lizi$il
codul documentului =>?@.
2inta-a defini!iilor de &til e&te, n 'eneral, aceea%i, indiferent de modul cum &unt ele aplicate. 0ele
trei tipuri de &tiluri pot fi, de a&emenea, com$inate n cadrul aceluia%i document. 5ela!iile dintre
diferitele tipuri de &tiluri realizeaz efectul de ca&cad care d numele ace&tei metode.
Sti!uri ncapsu!ate
0rearea unui a&tfel de &til &e realizeaz folo&ind etic+eta
5STIL(9 5JSTIL(9. #tic+eta L2>K@#M e&te o etic+et container, deci e&te o$li'atorie
prezen!a etic+etei de nc+idere LG2>K@#M. Entre cele dou etic+ete &e introduc defini!iile de &til.
#tic+eta de &til e&te pla&at n antetul documentului adic n &ec!iunea L=#*3M.
En #-emplul 14.1 e&te prezentat o defini!ie de &til care realizeaz afi%area tuturor titlurilor de
niel 1 9adic a te-telor cuprin&e ntre etic+etele L=1M LG=1M; cu caractere $old %i de culoare erde. En
plu&, te-tele inclu&e ntre etic+etele L6M LG6M or fi afi%ate cu fonturi arial, de mrime 2 %i culoare
iolet.
3e a&emenea, e&te creat un &til /normal/ care poate fi aplicat a&upra oricrui te-t. 6rin intermediul
&u, te-tul e&te afi%at cu caractere mai mari %i de culoare oran". *&pectul pa'inii n care e&te inclu&
acea&t defini!ie de &til e&te cel din Di'ura 14.1.
2,. ("eplul 10. 1
L=>?@M
L=#*3M
L>I>@#M&tiluri1LG>I>@#M
L2>K@#M
LN,,
=1 ncolor) R008000] font,Cei'+t) $oldo
6 nfont,familI) *rial] color) R800080] font,&ize) 14p-o
.normal nfont,&ize) lar'e] color) RDD8000o
,,M
LG2>K@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M2tiluriLG=1ML=5M
L6M>e-tul din ace&t para'raf e&te formatat cu a"utorul &tilurilorLG6M
*ce&ta e&te un te-t neformatat
L=1M>itluLG=1M
L26*F cla&&S/normal/M*ce&ta e&te &tilul normalLG26*FM
LG1.3KM
LG=>?@M
.$&era!i c defini!ia &tilurilor a fo&t pla&at ntre etic+etele =>?@ de comentariu, n aceea%i
manier ca %i la &cripturile Baa2cript. ?otiul e&te acela%i) dac $roC&erul cu care e&te izualizat
pa'ina nu &uport foi de &tiluri, &e eit a&tfel afi%area n pa'in a codului =>?@.
Sti!uri !e&ate F 'oi de sti!uri externe
2tilurile inclu&e n pa'in &e aplic elementelor prezente n re&pectiul document =>?@,
reduc(nd dimen&iunea codului %i efortul de a defini fiecare element n parte. *cea&t idee &e poate
e-tinde la nielul mai multor documente care pot $eneficia, toate, de acelea%i &tiluri, reunite ntr,o foaie
de &tiluri e-tern.
*anta"ul folo&irii foilor de &tiluri e-terne e&te du$lu. 6e de,o parte ele &e pot aplica la nielul mai
multor documente =>?@, realiz(nd a&tfel o le'tur de &til ntre ele, lucru deo&e$it de util la
con&truirea unui &ite. 6e de alt parte, acela%i document poate folo&i foi de &tiluri diferite, oferind
izitatorului po&i$ilitatea de a opta pentru unul &au altul dintre ele, n func!ie de propriile preferin!e.
. foaie de &tiluri e&te un fi%ier te-t care con!ine re'ulile de &til definite n aceea%i manier folo&it
la &tilurile inclu&e n pa'in. .dat creat o foaie de &tiluri, ea tre$uie &alat cu e-ten&ia .css. Doile de
&tiluri pot fi &tocate ntr,un folder &eparat &au n acela%i folder n care &unt pla&ate %i documentele
=>?@.
*pelul foilor de &tiluri &e poate realiza n dou moduri)
folo&ind etic+eta 5L7AK9
folo&ind func!ia Viport
0el mai folo&it mod de apelare a unei foi de &tiluri e&te cu a"utorul etic+etei L@IFXM conform
urmtoarei &inta-e)
L@IFX relS/&tIle&+eet/ +refS/numeVfoaieV&tiluri.c&&/M
En #-emplul 14.2 e&te con&truit o foaie de &tiluri e-tern care a fi apelat cu a"utorul etic+etei
L@IFXM. Doaia de &tiluri a fo&t &alat &u$ numele stiluri>)css
23. ("eplul 10. '
1.3K
n$acJ'round,color) R00DD00]
font,familI) *rial, &an&,&erif]
color) R330066]
paddin') 50p-, 70p-o
*)linJ ncolor) R009900o
*)i&ited ncolor) R660000o
*)+oer ncolor) RDD0000o
*)actie ncolor) RDD0000o
=1 ncolor) R996633]
$acJ'round,color) RDDDD00o
3ocumentul =>?@ care urmeaz apeleaz foaia de &tiluri de mai &u& e&te prezentat n #-emplul
14.3. 3up cum o$&era!i, foaia stiluri>)css a fo&t apelat n antetul documentului, prin intermediul
etic+etei L@IFXM cu atri$utul relS/&tIle&+eet/. *tri$utul +ref al etic+etei are ca aloare numele 9%i
adre&a relati, dac e&te nece&ar; al foii de &tiluri apelate. En documentul =>?@ am inclu& %i o
le'tur, pentru a e-emplifica modul n care foaia de &tiluri &c+im$ culorile le'turii. *tri$utul )over
&e refer la proprietatea ca le'tura & %i &c+im$e culoarea la trecerea cu mou&e,ul pe&te ea, fr a face
clicJ. 6a'ina de&cri& n ace&t e-emplul are a&pectul din Di'ura 14.2.
24. ("eplul 10. +
L=>?@M
L=#*3M
L>I>@#M&tiluri3LG>I>@#M
L@IFX relS/&tIle&+eet/ +refS/&tiluri2.c&&/M
LG=#*3M
L1.3KM
L=1 ali'nS/center/MDoi de &tiluri e-terneLG=1M
*ce&t e-emplu ilu&treaza modul in care e&te inclu&a in pa'ina o foaie de &tiluri e-terna
L6M?ai multe e-emple in L* +refS/ane-a1.+tml/Mane-a2LG*M
LG1.3KM
LG=>?@M
Sti!uri in-!ine
2pre deo&e$ire de &tilurile ncap&ulate %i de foile de &tiluri e-terne, &tilurile in!line fac parte c+iar
din corpul documentului =>?@. #le &e aplic prin folo&irea atri$utului stGle n a&ociere cu etic+etele
=>?@ &tandard. 5e!ine!i, deci, c &tIle poate fi at(t etic+et n &ine c(t %i atri$ut al altor etic+ete.
3efini!iile de &til in!line &e aplic numai a&upra elementelor inclu&e ntre etic+etele care au
a&ociat atri$utul &tIle. 3in ace&t moti, dac dorim & repetm n alt loc din cuprin&ul documentului
acelea%i defini!ii de &til, ele or tre$ui repetate, ncrc(nd a&tfel documentul =>?@. >otu%i, utilitatea
&tilurilor in!line e&te aceea c fiind definite c+iar n cuprin&ul documentului, defini!iile lor &unt mai
puternice dec(t cele din &tilurile ncap&ulate &au e-terne. 3ac, de e-emplu, am creat o foaie de &tiluri
pe care dorim & o aplicm unui document, %i dac n cadrul ace&tui document aem un anumit element
particular cruia dorim &,i dm un alt a&pect dec(t cel prezut n foaia e-tern, putem aplica acelui
element un &til in!line care &e a referi &trict la el.
Iat un e-emplu de aplicare a unui &til in!line a&ociat etic+etei L6M)
L6 &tIleS/color) red] font,familI) arial] font,Cei'+t) $old/M>e-tul din ace&t para'raf e&te &cri& cu
fonturi arial, in'ro&ate, de culoare ro&uLG6M
.$&era!i c la &tilurile in!line defini!iile de &til &unt inclu&e ntre apo&trofuri %i nu ntre acolade,
ca la celelalte tipuri de &tiluri.
*tunci c(nd lucra!i cu documente =>?@ de"a e-i&tente crora dori!i & le aplica!i &tiluri in!line,
e&te recomandat & folo&i!i etic+etele 56789 %i 5SP.A9. *ce&tea permit & aplica!i &tilurile fr a
afecta codul =>?@ de"a e-i&tent &au a&pectul pa'inii n $roC&erele care nu &uport &tiluri.
#-emplul 14.4 ilu&treaz folo&irea etic+etei L26*FM a&pectul pa'inii fiind redat n Di'ura 14.3.
3;. ("eplul 10. 0
L=>?@M
L=#*3M
L>I>@#M&tiluri4LG>I>@#M
LG=#*3M
L1.3KM
L=1 &tIleS/color)red]font,famIlI)arial/M2tiluri in,lineLG=1ML=5M
L6M>e-tul din ace&t para'raf e&te diizat folo&ind etic+eta &panLG6M
L26*F &tIleS/font,familI)arial] color) $lue/M>e-t &cri& cu al$a&tru &i fonturi arialLG26*FML15M
L26*F &tIleS/font,familI) courier] &ize) medium] color)'reen/M>e-t &cri& cu erde &i fonturi
courier mediumLG26*FM
LG1.3KM
LG=>?@M
@a fel ca %i la capitolele anterioare, nu om intra n amnunte priind pro'ramarea cu a"utorul
&tilurilor. 3e%i &tilurile &unt intuitie %i u%or de aplicat, totu%i o a$ordare e-+au&ti a ace&tui &u$iect
dep%e%te o$iectul ace&tei cr!i. 6rezentm, totu%i, n continuare, c(tea e-emple care pot fi utile n
pa'inile dumneaoa&tr.
3. #'ecte o<inute cu aEutoru! sti!uri!or
1spectu! textu!ui
Iat c(tea atri$ute care &e pot a&ocia cu dier&e etic+ete =>?@ permi!(nd &c+im$area a&pectului
te-tului.
31. Tabel 10. 1
.tributul (,ectul
color 2eteaz culoarea te-tului.
$acJ'round,
color
2eteaz culoarea fundalului unui o$iect.
font,familI 2eteaz tipul de font.
font,&ize
2eteaz dimen&iunea fonturilor. Ualorile pot fi
e-primate n pi-eli 9p-; &au puncte 9pt;.
font,Cei'+t
2eteaz 'ro&imea fonturilor. Ualorile po&i$ile
pot fi) normal, $old, $older, li'+ter.
font,&tIle
2eteaz &tilul de font. Ualorile pot fi) normal,
italic, o$liTue.
letter,&pacin'
2eteaz &pa!ierea literelor. Ualorile pot fi)
pi-eli 9p-;, puncte 9pt;, inci 9in;, centimetri 9cm; &au
milimetri 9mm;.
Cord,&pacin'
2eteaz &pa!ierea cuintelor. Ualorile pot fi)
pi-eli 9p-;, puncte 9pt;, inci 9in;, centimetri 9cm; &au
milimetri.
te-t,tran&form
Ualorile po&i$ile pot fi) capitalize, upperca&e,
loCerca&e, none.
te-t,decoration
Ualorile pot fi) underline, oerline, line,
t+rou'+, $linJ.
+oer
2c+im$ a&pectul unei le'turi c(nd mou&e,ul
&e afl dea&upra ei.
linJ 3efine%te a&pectul unei le'turi.
actie 3efine%te a&pectul le'turii actie.
i&ited 3efine%te a&pectul le'turii izitate.
fir&t,letter 2c+im$ a&pectul primei litere dintr,un cu(nt.
fir&t,line 2c+im$ a&pectul primei linii dintr,un te-t.
En e-emplele urmtoare &unt ilu&trate c(tea din ace&te atri$ute.
#-emplul 14.5 include o defini!ie de &til n care &unt defini!i a%a numi!ii selectori de clas%, n
ace&t e-emplu 1.titlu %i 1.&u$titlu. En corpul documentului apelul ace&tora a fo&t fcut prin con&truc!ia)
L1 cla&&S/titlu/M>itluLG1M
*tri$utul class care &e poate a&ocia etic+etei L1M ca n ace&t e-emplu &au altor etic+ete de
formatare a te-tului are ca aloare un identificator care a fo&t definit n preala$il n cadrul defini!iei de
&til.
*&pectul pa'inii de&cri&e n ace&t e-emplu e&te cel din Di'ura 14.4.
32. ("eplul 10. 1
L=>?@M
L=#*3M
L>I>@#M&tiluri5LG>I>@#M
L2>K@#M
LN,,
1.titlu nfont,&ize) 20 pt] font,Cei'+t) $older] letter,&pacin')5p-o
1.&u$titlu nfontG&ize) 15 pt] letter,&pacin') 5p-o
,,M
LG2>K@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M*&pectul te-tuluiLG=1ML=5M
L6M
>e-t normalL15M
L1M>e-t in'ro&atLG1ML15M
L1 cla&&S/titlu/M>itluLG1ML15M
L1 cla&&S/&u$titlu/M2u$titluLG1M
LG6M
LG1.3KM
LG=>?@M
#-emplul 14.6 folo&e%te &tiluri la formatarea titlului de niel =1 %i a te-tului din cadrul
para'rafului, folo&ind atri$utul fir&t,letter care &c+im$ a&pectul primei litere din para'raf. 8i n ace&t
e-emplu a fo&t folo&it un &elector de cla& %i anume 6.primalit.
*&pectul pa'inii care folo&e%te ace&te &tiluri e&te redat n Di'ura 14.5.
33. ("eplul 10. :
L=>?@M
L=#*3M
L>I>@#M&tiluri6LG>I>@#M
L2>K@#M
LN,,
6.primalit)fir&t,letter nfont,Cei'+t) $older] font,&tIle) italic] font,&ize)50 pt] color)redo
=1 ncolor)$lue] letter,&pacin')5 p-o
,,M
LG2>K@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M#fecte a&upra te-tuluiLG=1ML=5M
L6 cla&&S/primalit/M>e-tul din ace&t para'raf folo&e&te atri$utul fir&t,letterLG6M
LG1.3KM
LG=>?@M
$are de deru!are co!orate
7nul dintre efectele de& nt(lnite n pa'inile 4e$ e&te prezen!a $arelor de derulare colorate. *ce&t
efect &e poate, de a&emenea, o$!ine prin aplicarea &tilurilor. 6entru a defini culoarea $arelor de derulare
&e folo&e&c c(tea atri$ute, pe care le definim mai "o&.
34. Tabel 10. '
.tributul (,ectul
&croll$ar,$a&e,color 3efine%te culoarea de $az a $arei, a
$utoanelor cu &'e!i %i a fundalului pe care &e
depla&eaz $ara. 3ac dori!i & realiza!i rapid
o $ar de derulare nu e&te nece&ar & &eta!i
dec(t ace&t atri$ut %i pe cel urmtor. 2etarea
celorlalte atri$ute &e &uprapune %i anuleaz
efectele ace&tuia.
&croll$ar,arroC,
color
3efine%te culoarea &'e!ilor de pe $ar
&croll$ar,face,color 3efine%te culoarea &uprafe!ei $arei de
derulare %i a $utoanelor pe care &unt &'e!ile.
3e a&emenea, &ta$ile%te culoarea fundalului
pe care &e depla&eaz $ara.
&croll$ar,+i'+li'+t,
color
3efine%te culoarea pr!ilor /iluminate/
ale $arei %i $utoanelor cu &'e!i 9mar'inile de
&u& %i din &t(n'a; %i a fundalului pe care &e
depla&eaz $ara
&croll$ar,
darJ&+adoC,color
3efine%te culoarea pr!ilor /ntunecate/
ale $arei %i $utoanelor cu &'e!i 9mar'inile de
"o& %i din dreapta;
&croll$ar,&+adoC,
color
3efine%te culoarea mar'inilor de "o& %i
din dreapta ale $arei %i $utoanelor cu &'e!i
&croll$ar,3dli'+t,
color
3efine%te culoarea mar'inilor de &u& %i
din &t(n'a ale $arei %i $utoanelor cu &'e!i
&croll$ar,tracJ,color 3efine%te culoarea fundalului $arei
3up cum o$&era!i, unele dintre ace&te atri$ute %i &uprapun efectele. #-i&t anumite re'uli care
&ta$ile&c priorit!ile atri$utelor pe care nu le om a$orda aici. 0a nceptor, e&te recomandat & nu
folo&i!i atri$ute care &e &uprapun pentru a nu o$!ine rezultate neconforme cu inten!iile dumneaoa&tr.
#-emplul urmtor ilu&treaz modul de con&truire a $arelor de derulare colorate.
En #-emplul 14.7 am con&truit o foaie de &tiluri e-tern &alat &u$ numele stiluriI)css)
3). ("eplul 10. <
1.3K
n
&croll$ar,face,color)$lue]
&croll$ar,arroC,color)IelloC]
&croll$ar,&+adoC,color)red]
&croll$ar,3dli'+t,color)IelloC]
&croll$ar,tracJ,color)cIan]
o
3ocumentul =>?@ care apeleaz foaia de &tiluri e&te con&truit n #-emplul 14.8, pa'ina de&cri&
de ace&t document a(nd a&pectul din Di'ura 14.6.
3+. ("eplul 10. =
L=>?@M
L=#*3M
L>I>@#M&tiluri8LG>I>@#M
L@IFX relS/&tIle&+eet/ +refS/&tiluri7.c&&/M
LG=#*3M
L1.3KM
L=1 ali'nS/center/M1are de derulare colorateLG=1M
aL15MaL15MaL15MaL15MaL15MaL15MaL15M
aL15MaL15MaL15MaL15MaL15MaL15MaL15M
aL15MaL15MaL15MaL15MaL15MaL15MaL15M
LG1.3KM
LG=>?@M
3e&i'ur, culorile pe care le ale'e!i pentru $ara de derulare tre$uie &electate cu 'ri", a&tfel nc(t &
&e armonizeze cu re&tul pa'inii. Dolo&irea unei foi de &tiluri e-terne e&te util deoarece pute!i &ta$ili
a&tfel culoarea $arei pentru toate pa'inile &ite,ului dumneaoa&tr.
1roC&erele Fet&cape nu &uport &c+im$area culorilor $arei de derulare.
0ormu!are co!orate
#-emplul care urmeaz 9#-emplul 14.9; folo&e%te &tiluri in!line pentru a crea formulare colorate
care pot da pa'inii un a&pect mai atracti. *m folo&it pentru &etarea culorilor codurile +e-azecimale pe
care le pute!i '&i n .ne"a +. 0a %i la $arele de derulare, culorile formularelor tre$uie ale&e cu 'ri"
pentru a nu da pa'inii un a&pect ncrcat %i lip&it de $un,'u&t. 6a'ina de&cri& n ace&t document arat
ca n Di'ura 14.7.
3,. ("eplul 10. >
L=>?@M
L=#*3M
L>I>@#M&tiluri9LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/MDormulare colorateLG=1ML=5M
LD.5?M
LIF67> nameS/te-t/ &tIleS/$acJ'round,color) R0000DD] color) RDDDDDD] font,Cei'+t) $old/
alueS/2alutN/M
L6M
L>#W>*5#* roC&S/5/ col&S/20/ &tIleS/color) R006600] $acJ'round,color) R000000]
&croll$ar,$a&e,color)red]/M0are &unt impre&iile tale<LG>#W>*5#*M
L6M
LIF67> tIpeS/&u$mit/ alueS/trimite/ &tIleS/$acJ'round,color) R006600/M
LGD.5?M
LG1.3KM
LG=>?@M
Uizualizate n Fet&cape formularele din e-emplul de mai &u& or aea a&pectul normal, necolorat.
4. -e.umat
Doile de &tiluri reprezint un in&trument important n ela$orarea documentelor =>?@, mai ale&
dac dorim & con&truim un &ite 4e$. *ce&tea permit p&trarea unui a&pect unitar %i coerent pe tot
parcur&ul &ite,ului.
7n &til e&te o colec!ie de atri$ute ale te-tului %i ale modului de aran"are a documentului care pot fi
aplicate n mod &electi unui document &au doar unei pr!i din ace&ta.
2tilurile &e pot aplica unui document n trei moduri)
ncap&ulate , prin intermediul etic+etei L2>K@#M pla&at n antetul documentului
le'ate , prin intermediul etic+etei L@IFXM pla&at de a&emenea n antetul documentului %i care
face le'tura cu foaia de &tiluri e-tern
in!line , prin intermediul atri$utului &tIle a&ociat cu dier&e etic+ete =>?@.
0u a"utorul &tilurilor &e pot o$!ine efecte deo&e$ite n cadrul documentelor =>?@) &e poate
modifica a&pectul te-tului, &e pot con&trui $are de derulare colorate, formulare colorate %i altele.
En capitolul urmtor om di&cuta de&pre c(tea elemente de 'rafic aan&at prin intermediul
crora pa'ina dumneaoa&tr poate deeni mai intere&ant %i mai atracti.
Capitolul 11
(leente de -ra,ic% avansat%
1. (ma&ini /art*
En mod o$i%nuit, c(nd folo&im o ima'ine drept le'tur, includem etic+eta LI?AM n interiorul
etic+etei pentru linJ,uri , L*M. En continuare e&te prezentat o alt modalitate de a folo&i o ima'ine ca
le'tur %i anume crearea unei ima'ini +art.
Ce este o ima&ine /art*?
. ia-ine )art% e&te o zon acti pe care &e poate e-ecuta clicJ cu mou&e,ul, ap&area
diferitelor re'iuni ale ima'inii duc(nd la de&c+iderea unor documente =>?@ diferite. 0u alte cuinte,
o ima'ine +art e&te o ima'ine mpr!it n re'iuni, iar fiecare re'iune reprezint o le'tur ctre un alt
document. 7n e-emplu de utilizare a ima'inilor +art l con&tituie $arele de $utoane folo&ite n multe
&ite,uri ca in&trumente de nai'are.
Ima'inile +art ofer po&i$ilitatea de a folo&i o &in'ur ima'ine pentru a furniza le'turi ctre mai
multe pa'ini. U pute!i ima'ina o ima'ine +art ca fiind compu& din dou pr!i) ima'inea n &ine %i o
+art inizi$il care e&te aplicat pe&te ima'ine, mpr!ind,o n re'iuni. *cea&t +art folo&e%te pentru
definirea re'iunilor forme pre&ta$ilite) poli'oane, cercuri &au dreptun'+iuri. En 'eneral, ima'inile care
&e preteaz la a fi folo&ite ca ima'ini +art &unt cele care con!in forme 'eometrice care conduc la o
mpr!ire natural a ima'inii n re'iuni.
En func!ie de modul cum &unt prelucrate ima'inile %i identificate adre&ele &pre care indic fiecare
re'iune, ima'inile +art pot fi de dou tipuri)
33. ima'ini de tip &erer
34. ima'ini de tip client
(ma&ini /art* pentru ser"er 8ser"er side9
. ima'ine +art de tip server &e caracterizeaz prin faptul c face apel la o aplica!ie 9un &cript;
de pe &erer care realizeaz determinarea re'iunii pe care
&,a fcut clicJ %i ncarc documentul =>?@ a&ociat acelei re'iuni. Fu e&te neoie & face!i
'ri"i n le'tur cu &criptul care prelucreaz ima'inea +art deoarece ma"oritatea &ererelor au de"a
in&talat o a&tfel de aplica!ie, cele mai cuno&cute fiind Ima'emap %i =>Ima'e.
Dolo&irea ima'inilor +art de tip &erer parcur'e urmtorii pa%i)
4;. izitatorul face clicJ pe o anumit zon a ima'inii
41. coordonatele ace&tei zone &unt tran&mi&e &ererului
42. &criptul aflat pe &erer a&ociaz ace&te coordonate cu 75@,ul unui anumit document
=>?@ 9li&ta adre&elor 75@ ale ima'inilor a&ociate cu re'iunile +r!ii &e afl pla&at tot pe &erer;
43. adre&a 75@ mpreun cu coordonatele re'iunii &unt trimi&e napoi la $roC&er care
de&c+ide documentul =>?@ core&punztor.
#&te le&ne de o$&erat c parcur'erea tuturor ace&tor etape precum %i interac!iunea cu &ererul
poate ncetini mult proce&ul de ncrcare a documentelor =>?@ a&ociate re'iunilor +r!ii. 2in'urul
aanta" al folo&irii ima'inilor +art e&te faptul c func!ioneaz n toate $roC&erele. >otu%i, deoarece
er&iunile mai noi dec(t Fet&cape 2.02 %i Internet #-plorer 2.0 recuno&c ima'inile +art de tip client, &e
a renun!a treptat la folo&irea ima'inilor +art de tip &erer.
(ma&ini /art* de tip c!ient 8c!ient side9
Ima'inile +art de tip client lucreaz independent de &erer. 0(nd folo&im ace&t tip de ima'ini
+art pla&m toate datele nece&are prelucrrii +r!ii c+iar n corpul documentului =>?@ a&tfel nc(t
$roC&erul l e-ecut fr a mai fi nece&ar o interen!ie din partea &ererului.
Ima'inile +art de tip client au aanta"e eidente) &unt mult mai rapide, func!ionarea lor e&te mult
&implificat, %i, n plu&, la trecerea cu mou&e,ul pe&te +art, n $ara de &tatu& a fere&trei $roC&erului
apare adre&a 75@ a&ociat fiecrei re'iuni, ceea ce ofer informa!ii &uplimentare izitatorului.
Crearea unei ima&ini /art* de tip c!ient
6entru a include n documentul =>?@ o +art pentru o anumit ima'ine &e folo&e%te etic+eta
container 5M.P9 5JM.P9. Entre ace&te etic+ete &e pla&eaz mai multe etic+ete 5.R(.9 care au
rolul de a defini coordonatele %i forma re'iunilor pe care dorim & le delimitm pe ima'ine, ca n
e-emplul urmtor)
L?*6 nameS/+arta/M
L*5#* &+apeS/rect/ coord&S/-1, I1, -2, I2/ +refS/75@1/M
L*5#* &+apeS/polI/ coord&S/-1, I1, -2, I2, q, -n, In/ +refS/75@2/M
L*5#* &+apeS/circle/ coord&S/-, I, raza/ +refS/75@3/M
LG?*6M
5e'iunile definite n ace&t e-emplu &unt un dreptun'+i, pentru care &unt &pecificate coordonatele
(rfurilor din &t(n'a &u& %i dreapta "o&, un poli'on cu n (rfuri, definit prin coordonatele lor, %i un cerc
definit prin coordonatele centrului %i raz.
6entru a comunica $roC&erului ce ima'ine tre$uie & folo&ea&c pentru a crea ima'inea +art &e
folo&e%te etic+eta pentru ima'ini 57M?9, atri$utul src a(nd ca aloare adre&a fi%ierului 'rafic folo&it.
En plu&, n cadrul etic+etei LI?AM &e folo&e%te atri$utul useap care are rolul de ancor 9le'tur
intern;. 3e e-emplu, dac +arta pe care o folo&im a fo&t definit n etic+eta L?*6M cu numele
/+arta1/ %i folo&e%te fi%ierul imagineB)gif atunci etic+eta LI?AM a aea urmtoarea &tructur)
LI?A &rcS/ima'ine1.'if/ u&emapS/R+arta1/ Cidt+S/100/ +ei'+tS/100/ $orderS/0/M
En e-emplul urmtor 9#-emplul 15.1; om crea o ima'ine +art format din patru re'iuni, trei
dreptun'+iuri %i un poli'on cu patru (rfuri. 6entru a determina coordonatele (rfurilor fiecrei re'iuni
am folo&it ?icro&oft 6+oto #ditor, dar pute!i folo&i orice alt editor 'rafic. @a pla&area cur&orului
mou&e,ului oriunde n cadrul ima'inii, n $ara de &tatu& 9col!ul din &t(n'a "o&; e!i o$&era
coordonatele n pi-eli, ale punctului n care '&i!i. *m a&ociat fiecrei re'iuni c(te un document
=>?@ dintre cele create la capitolele anterioare. *&pectul ace&tei pa'ini e&te redat n Di'ura 15.1.
("eplul 11. 1
L=>?@M
L=#*3M
L>I>@#M'rafica1LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/MIma'ini +artaLG=1ML=5M
L?*6 nameS/+arta/M
L*5#* &+apeS/polI/ coord&S/29, 109, 44, 122, 111, 24, 125, 36/ +refS/culori1.+tml/M
L*5#* &+apeS/rect/ coord&S/132, 35, 245, 57/ +refS/fonturi1.+tml/M
L*5#* &+apeS/rect/ coord&S/114, 61, 224, 92/ +refS/li&te1.+tml/M
L*5#* &+apeS/rect/ coord&S/81, 95, 227, 125/ +refS/&tiluri1.+tml/M
LG?*6M
L=3M6entru a de&c+ide cartile din ima'ine faceti clicJ pe una dintre eleLG=3M
LI?A &rcS/..GIma'iniG$ooJ&1.'if/ u&emapS/R+arta/ Cidt+S/283/ +ei'+tS/142/ $orderS/0/M
LG1.3KM
LG=>?@M
2. (ma&ini animate
. ia-ine aniat% e&te format dintr,o &erie de ima'ini 9pentru anima!ie &e folo&e%te formatul
AID; care &unt afi%ate una dup cealalt cre(nd aparen!a unei mi%cri continue. #-i&t multe &ite,uri
care ofer ima'ini animate pe care le pute!i de&crca %i &ala pe +ard,di&J pentru a le folo&i n cadrul
&ite,ului dumneaoa&tr. #&te &uficient & de&c+ide!i motorul de cutare pe care l folo&i!i de o$icei %i &
introduce!i drept c+eie de cutare cuintele /animated 'if&/ %i e!i o$!ine un foarte mare numr de
rezultate.
*e!i, n&, %i po&i$ilitatea de a crea propriile ima'ini animate. *ce&t proce& poate fi de&tul de
o$o&itor, deoarece tre$uie & crea!i toate ima'inile care urmeaz & fac parte din proce&ul de anima!ie.
En continuare e&te prezentat modul de realizare al unei anima!ii foarte &imple, care realizeaz afi%area
liter cu liter a cu(ntului *FI?*rI#.
Diecare &ecen!a din cu(nt reprezint o ima'ine di&tinct, a&tfel c om crea 9 fi%iere AID care
or con!ine &ecen!ele) *FI?*>I#, *FI?*>I, *FI?*>, *FI?*, *FI?, *FI, *F, *. 7ltimul fi%ier
a con!ine o ima'ine fr nici o liter.
3eoarece ima'inile &unt foarte &imple am folo&it pentru crearea lor utilitarul &aint, din "indos
/ 0ccessories, dar dac dori!i & crea!i ima'ini mai comple-e e&te nece&ar & utiliza!i un editor 'rafic
mai performant.
3up crearea ima'inilor %i &alarea fi%ierelor cu e-ten&ia )gif &e trece la ce,a
de,a doua etap) reunirea lor pentru a crea proce&ul de anima!ie. *cea&t anima!ie a fo&t realizat
cu a"utorul aplica!iei numite AID 0on&truction 2et pe care o pute!i '&i la adre&a)
+ttp)GGCCC.mindCorJ&+op.comGalc+emIG
6ro'ramul ofer, pe l(n' crearea anima!iei, %i multe alte op!iuni) crearea de $utoane, $annere,
efecte de tranzi!ie ale pa'inilor, etc.
En meniul .ile al pro'ramului e-i&t un 0nimation "i8ard care a conduce pa& cu pa& de,a
lun'ul proce&ul de creare a anima!iei. 4izard,ul a cere c(tea informa!ii printre care ce fi%iere
dori!i & fac parte din proce&ul de anima!ie 9n cazul no&tru cele nou fi%iere AID;, dac dori!i ca
proce&ul & &e de&f%oare fr oprire %i care e&te interalul de timp dintre dou afi%ri. 3up ce
0nimation "i8ard a definitiat proce&ul de anima!ie nu mai ae!i altcea de fcut dec(t & &ala!i
fi%ierul a&tfel o$!inut %i &,l folo&i!i n pa'ina dumneaoa&tr. Includerea fi%ierului care con!ine
ima'inea animat ntr,un document =>?@ &e face ca %i la o ima'ine o$i%nuit folo&ind etic+eta
LI?AM.
#-emplul 15.2 ilu&treaz modul cum e&te inclu& n pa'in o ima'ine animat a&pectul pa'inii
fiind cel din Di'ura 15.2.
("eplul 11. '
L=>?@M
L=#*3M
L>I>@#M'rafica2LG>I>@#M
LG=#*3M
L1.3KM
L=1 ali'nS/center/MIma'ini animateLG=1ML=5M
L6MLI?A &rcS/..GIma'iniGanimatie.'if/M
LG1.3KM
LG=>?@M
3e%i ima'inile animate &unt atractie %i dau pa'inii un a&pect dinamic, totu%i e-ce&ul de anima!ie
poate aea efecte contrare. 6rea multe ima'ini animate &au o anima!ie prea comple- pot conduce la
mrirea timpului de ncrcare a pa'inii. En plu&, anima!ia poate deeni o$o&itoare %i poate di&tra'e
aten!ia izitatorului de la con!inutul pa'inii. U recomandm, deci, & folo&i!i ima'inile animate cu
'ri" %i numai atunci c(nd au un rol $ine definit n cadrul pa'inii.
3. (ma&ini transparente
*de&ea o ima'ine inclu& ntr,o pa'in arat mai $ine dac are un fundal tran&parent. 7n fundal
tran&parent n&eamn c de%i ima'inea are un fundal de o anumit culoare, el nu e&te izi$il n pa'in
deoarece fundalul pa'inii nlocuie%te fundalul ima'inii. 3e&i'ur, orice culoare din ima'ine poate fi
fcut tran&parent, dar cel mai ade&ea acea&t te+nic &e aplic a&upra culorii de fundal.
3ac dorim & realizm un fundal tran&parent pentru o ima'ine tre$uie & !inem &eama de o &erie
de lucruri)
44. Dundalul tre$uie & ai$ o &in'ur culoare %i nu o com$ina!ie de culori.
4). 0uloarea de fundal nu tre$uie & mai fie prezent altundea n cadrul ima'inii, deoarece
tran&paren!a &e a aplica tuturor zonelor colorate cu aceea%i culoare
4+. #&te recomandat ca fundalul pa'inii de 4e$ & ai$ atri$utul $'color &etat n mod
e-plicit
4,. Doto'rafiile &au ima'inile cu mai mult de 256 de culori nu &unt potriite pentru a fi
tran&formate n ima'ini tran&parente deoarece n cadrul lor e&te 'reu de definit o &in'ur culoare.
43. Ima'inile pe care dorim & le tran&formm n ima'ini tran&parente tre$uie & fie n
format AID
En #-emplul 15.3 am folo&it o ima'ine cu fundalul de culoare al$ pe care am prelucrat,o cu
a"utorul aplica!iei ?icro&oft 6+oto #ditor. Fu e&te nece&ar dec(t & de&c+ide!i fi%ierul AID cu ima'inea
dorit, & &electa!i din meniul %ools op!iunea +et %ransparent Color care permite ale'erea %i &etarea
culorii pe care dorim & o facem tran&parent, apoi & &ala!i noua ima'ine &u$ un alt nume dec(t cea
ori'inal. Indiferent care e&te culoarea de fundal a pa'inii dumneaoa&tr, fundalul ima'inii
tran&parente a aea aceea%i culoare cu pa'ina a%a cum &e o$&er din Di'ura 15.3.
("eplul 11. +
L=>?@M
L=#*3M
L>I>@#M'rafica3LG>I>@#M
LG=#*3M
L1.3K $'colorS/cIan/M
L=1 ali'nS/center/MIma'ini tran&parenteLG=1ML=5M
L3IU ali'nS/center/M
L=4MIma'inea ori'inalaLG=4M
LI?A &rcS/..GIma'iniG'old.'if/M
L=4MIma'inea tran&parentaLG=4M
LI?A &rcS/..GIma'iniG'oldVtr.'if/M
LG3IUM
LG1.3KM
LG=>?@M
6entru a erifica modul n care func!ioneaz ima'inea tran&parent pe diferite culori ale
fundalului pa'inii, atri$ui!i atri$utului $'color %i alte alori dec(t cea din e-emplu.
4. -e.umat
En documentele 4e$ pot fi inclu&e dier&e elemente aan&ate de 'rafic)
44. Ima'ini +art
);. *nima!ie
)1. Ima'ini tran&parente
. ima'ine +art e&te o ima'ine care con!ine zone actie pe care &e poate efectua clicJ cu mou&e,
ul, fiecare zon conduc(nd la de&c+iderea unui document =>?@ diferit.
Ima'inile +art &unt de dou tipuri)
)2. Ima'ini +art de tip &erer
)3. Ima'ini +art de tip client 9cele mai utilizate;
. ima'ine +art de tip client &e in&ereaz ntr,un document cu a"utorul etic+etei container
L?*6M LG?*6M. En cadrul ace&tei etic+ete fiecare zon e&te definit prin intermediul etic+etei
L*5#*M.
Ima'inile animate &unt fi%iere AID care &e includ n pa'in ca orice alt ima'ine, folo&ind etic+eta
LI?AM. 6entru a crea o ima'ine animat ae!i neoie de un editor 'rafic, cu a"utorul cruia & crea!i
ima'inile care or face parte din componen!a anima!iei %i de un pro'ram &pecial care & le reunea&c
ntr,un &in'ur fi%ier AID.
Ima'inile tran&parente &unt ima'ini la care una dintre culori 9cel mai ade&ea culoarea de fundal;
e&te tran&format n culoare tran&parent, a&tfel nc(t la includerea ei ntr,o pa'in 4e$ fundalul
ima'inii &e a confunda cu fundalul pa'inii.
Capitolul 1:
Motoare de c%utare i etata-$uri
1. Ce este un motor de c*utare?
3ac ae!i o minim e-perien! n nai'area pe 4e$ ,a!i nt(lnit, fr ndoial cu motoarele de
cutare. Motoarele de c%utare &unt aplica!ii pla&ate pe &erere deo&e$it de puternice, care con!in $aze
de date imen&e %i care au drept &cop cercetarea %i inde-area &utelor de milioane de pa'ini 4e$
e-i&tente. 7tilitatea motoarelor de cutare e&te eident) fr ele ar fi aproape impo&i$il & '&im
informa!iile care ne intere&eaz n oceanul de informa!ii care e&te 4e$,ul.
?otoarele de cutare con!in un formular de tip c(mp de editare n care utilizatorul introduce unul
&au mai multe cuinte folo&ite drept c)eie de c%utare. 5ezultatele &unt furnizate &u$ forma unei li&te de
pa'ini 4e$ care con!in cuintele c+eie introdu&e. Inde-area unei pa'ini de ctre un motor de cutare
n&eamn a&ocierea cuintelor c+eie cu con!inutul informa!ional al ace&teia. 0ele mai folo&ite motoare
de cutare &unt, n ace&t moment, Aoo'le, Ka+ooN, @Ico&, Ao.com %i #-cite.
?otoarele de cutare au drept &cop inde-area tuturor pa'inilor e-i&tente pe 4e$, dar, eident,
ace&t lucru e&te impo&i$il. .ric(t de performante ar fi pro'ramele cu care lucreaz, numrul de &ite,uri
care &unt pu$licate n permanen! pe 4e$ dep%e%te po&i$ilit!ile ace&tora. *ce&ta e&te motiul pentru
care &impla po&tare a unui &ite pe 4e$ nu 'aranteaz c(tu%i de pu!in c ace&ta a aea izitatori.
3e&coperirea lui de ctre motoarele de cutare poate dura ntre %a&e luni %i un an. >ocmai de aceea nu
tre$uie & a%tepta!i ca &ite,ul dumneaoa&tr & fie de&coperit, ci tre$uie &,l promoa!i acti, una dintre
metode fiind n&crierea lui n $azele de date ale motoarelor de cutare.
#-i&t dou tipuri principale de motoare de cutare, care &e $azeaz pe moduri diferite de a face
inde-area pa'inilor)
?otoarele de cutare de tip /pian"en/ care realizeaz inde-area automat, pe $aza cuintelor
c+eie prezente n antetul documentelor =>?@ 9de e-emplu Aoo'le;. *ce&t tip de motoare folo&e&c
al'oritmi e-trem de performan!i, care cerceteaz %i inde-eaz milioane de pa'ini pe zi.
?otoarele de cutare care fac inde-area pe $aza cuintelor c+eie furnizate de creatorul pa'inii, la
n&crierea ace&teia n $aza de date a aplica!iei 9de e-emplu Ka+ooN;. En&crierea n $aza de date &e face
per&onal, de ctre autorul &ite,ului, iar ealuarea &ite,ului &e face de ctre per&onal uman.
6entru a face mai eficient inde-area pa'inilor de ctre motoarele de tip /pian"en/ lim$a"ul
=>?@ include o cate'orie &pecial de etic+ete numite metata',uri.
2. Metata&-uri
Metata-$urile &unt o cate'orie &pecial de etic+ete care &unt pla&ate n antetul documentului
=>?@ 9n $locul L=#*3M;. 0a %i celelalte elemente inclu&e n antetul documentului, cu e-cep!ia
titlului documentului, metata',urile nu &unt izi$ile pentru izitatorul pa'inii.
6rimul metata' de&pre care om or$i e&te de"a cuno&cut %i l,a!i folo&it de foarte multe ori p(n
acum) e&te metata'ul 5T7TL(9. 2e utilizeaz conform &inta-ei)
L>I>@#M>itlul pa'inii 4e$LG>I>@#M.
3up cum a!i o$&erat din e-emplele de p(n acum, titlul pa'inii apare n $ara de titlu a fere&trei
$roC&erului.
?ulte dintre motoarele de cutare afi%eaz n li&ta de rezultate %i titlul pa'inilor pe l(n' adre&ele
75@. >itlul pa'inii e&te informa!ia care l determin pe izitator & intre &au nu pe pa'ina
dumneaoa&tr. >itlul tre$uie & fie o propozi!ie care & atra' aten!ia %i n acela%i timp & con!in
informa!iile e&en!iale priind &u$iectul %i con!inutul pa'inii.
0elelalte metata',uri &e introduc prin intermediul etic+etei 5M(T.9 care nu e&te o etic+et
container. #tic+eta L?#>*M admite o &erie de atri$ute care ofer motoarelor de cutare dier&e
informa!ii care & a"ute la inde-area pa'inii. *lte atri$ute ofer informa!ii $roC&erului priind data de
e-pirare a documentului &au &pecific perioada de timp dup care documentul e&te rencrcat n mod
automat.
#-i&t dou cate'orii de metata',uri)
1. metata',urile name
1. metata',urile +ttp,eTui
Metata&-uri!e /nae/
0ele mai folo&ite metata',uri &unt cele care &e refer la cuintele c+eie care caracterizeaz pa'ina
%i con!inutul ei, oferind a&tfel informa!ii motoarelor de cutare. *ce&tea &unt)
/JeICord&/
/de&cription/
/ro$ot&/
Metata-$ul /;eGFords/
?etata',ul /JeICord&/ &e introduce conform urmtoarei &inta-e)
L?#>* nameS/JeICord&/ contentS/li&ta cuinte c+eie/M
@i&ta cuintelor c+eie tre$uie & includ toate cuintele pe care con&idera!i c le,ar putea
introduce un izitator ca c+eie de cutare pentru a de&coperi pa'ina dumneaoa&tr. 0uintele &e &criu
de&pr!ite prin ir'ul, fr &pa!ii intre ele. 6e l(n' cuintele c+eie, pute!i folo&i %i com$ina!ii de
cuinte. 3e e-emplu ntr,o pa'in care ofer informa!ii de&pre crearea de pa'ini 4e$ %i Ce$ de&i'n,
cuintele c+eie ar putea fi urmtoarele)
L?#>* nameS/JeICord&/ contentS/4e$ de&i'n, creare pa'ini 4e$, con&truire &ite, 4e$ &ite
de&i'n/M
A&irea cuintelor %i com$ina!iilor de cuinte c+eie e&te o etap care tre$uie tratat cu aten!ie.
6entru a aduce pa'ina dumneaoa&tr n aten!ia acelor izitatori pentru care e&te ea conceput,
cuintele c+eie tre$uie ale&e cu aten!ie %i ele tre$uie & reflecte e-act elementele de con!inut definitorii
ale pa'inii.
7nii dintre creatorii de pa'ini 4e$ care dore&c & o$!in o pozi!ionare mai $un n li&ta de
rezultate furnizate de motoarele de cutare folo&e&c n mod a$uzi cuintele c+eie, repet(nd acela%i
cu(nt &au com$ina!ii de cuinte de un numr foarte mare de ori &au folo&ind cuinte c+eie care nu au
le'tur cu &u$iectul pa'inii. 0a urmare a ace&tor ncercri de /pclire/ a motoarelor de cutare, au
fo&t dezolta!i al'oritmi performan!i care identific tentatiele de fraud %i care &e &oldeaz fie cu
&cderea cota!iei pa'inilor re&pectie, fie c+iar cu eliminarea lor din $aza de date a motorului de
cutare.
Metata-$ul /description/
?etata',ul n cadrul cruia &e realizeaz de&crierea pa'inii e&te, de a&emenea foarte important
pentru &ucce&ul ace&teia. 0a %i cel anterior, &e introduce n antetul documentului conform urmtoarei
&inta-e)
L?#>* nameS/de&cription/ contentS/de&crierea &u$iectului pa'inii/M
?ulte motoare de cutare includ n li&ta de rezultate pe l(n' 75@,ul %i titlul pa'inii %i de&crierea
ei. 6entru a face de&crierea pa'inii dumneaoa&tr e&te $ine & folo&i!i com$ina!ii de cuinte c+eie,
reunite n fraze atractie %i conin'toare. Di!i conci& n de&criere %i pla&a!i informa!iile e&en!iale la
nceput deoarece e&te po&i$il ca de&crierile prea lun'i & fie trunc+iate. 0a %i n cazul ale'erii cuintelor
c+eie, acorda!i o aten!ie deo&e$it formulrii unei de&crieri c(t mai potriite %i !ine!i &eama c acea&ta
poate fi &in'ura dumneaoa&tr %an& de a,l conin'e pe utilizator & de&c+id pa'ina pe care a!i creat,
o. 3e&crierea unei pa'ini poate arta a&tfel)
L?#>* nameS/de&cription/ contentS/>utorial de 4e$ de&i'n care a initiaza pa& cu pa& in
proce&ul de con&truire al unui &ite 4e$. Inatati &a concepeti, &a creati &i &a promoati propriul
dumneaoa&tra &ite./M
6e l(n' metata',ul care face de&crierea pa'inii e&te recomandat introducerea, la nceputul
pa'inii, a unui comentariu n cadrul cruia & in&era!i de&crierea. *ce&t lucru e&te util deoarece e-i&t
motoare de cutare care i'nor metata',urile %i preiau primele cuinte pe care le '&e&c n pa'in. 3ac
a!i reu%it & formula!i o de&criere &u'e&ti %i conin'toare, o pute!i folo&i c+iar ca fraz de nceput n
partea izi$il a pa'inii.
Metata-$ul /robots/
2unt &itua!ii c(nd creatorul pa'inii 4e$ dore%te ca anumite pa'ini & fie e-clu&e de la inde-area
de ctre motoarele de cutare. 3e e-emplu dac a!i pu$licat &ite,ul pe 4e$ nainte de a fi terminat 9de%i
ace&t lucru e&te nerecomandat; &au dac dori!i & reactualiza!i con!inutul anumitor pa'ini %i dori!i ca
p(n la finalizarea modificrilor pa'inile & nu fie acce&ate de motoarele de cutare, pute!i folo&i n
antetul pa'inilor re&pectie metata',ul /ro$ot&/ a&tfel)
L?#>* nameS/ro$ot&/ contentS/noinde-, nofolloC/M
*cea&t con&truc!ie comunic motoarelor de cutare & nu inde-eze pa'ina %i n acela%i timp & nu
urmeze nici una dintre le'turile inclu&e n ea. *tri$utul content poate lua urmtoarele alori)
all , permite inde-area tuturor pa'inilor
none , nu permite inde-area nici unei pa'ini %i nici urmarea le'turilor din cadrul lor
inde- , permite inde-area pa'inii
folloC , permite urmarea le'turilor din pa'in
noinde- , nu permite inde-area pa'inii
nofolloC , nu permite urmarea le'turilor din cadrul pa'inii
*lte metata',uri name utilizate &unt)
L?#>* nameS/aut+or/ contentS/numeVautor/M
6ermite &pecificarea numelui autorului pa'inii
L?#>* nameS/copIri'+t/ contentS/drepturi copIri'+t/M
6ermite &pecificarea drepturilor de autor
L?#>* nameS/'enerator/ contentS/numeV aplicatie/M
2pecific aplica!ia cu care a fo&t creat pa'ina.
#-emplu)
L?#>* nameS/'enerator/ contentS/?icro&oft Dront6a'e 3.0/M
Metata&-uri!e 2)ttp$eWuiv2
6e l(n' metata',urile name care ofer informa!ii motoarelor de cutare, e-i&t metata',urile
+ttp,eTui care ofer informa!ii $roC&erului priind documentul pe care urmeaz &,l de&c+id. Iat n
continuare o li&t a ace&tor metata',uri mpreun cu func!iile fiecruia dintre ele.
Tabel 1:. 1
#tic+eta *unc#ia
L?#>* +ttp,
eTuiS/0ontent,>Ipe/
contentS/te-tG+tml] c+ar&etSi&o,
8859,1/M
*ce&t tip de metata',uri &unt
ec+ialente cu +eaderele =>>6. #le
comunic $roC&erului care e&te tipul
pa'inii %i cum & o afi%eze precum %i
&etul de caractere folo&it 9op!ional;
L?#>* +ttp,
eTuiS/0ontent,2cript,>Ipe/
contentS/te-tG"aa&cript/M
2pecific lim$a"ul de &cript
folo&it n document
L?#>* +ttp,
eTuiS/0ontent,2tIle,>Ipe/
contentS/te-tGc&&/M
2pecific lim$a"ul de foi de
&tiluri folo&it n document
L?#>* +ttp,
eTuiS/e-pire&/ contentS/dataV
e-pirariiM
6ermite precizarea datei la care
documentul poate fi con&iderat
e-pirat
L?#>* +ttp,eTuiS/refre&+/
contentS/nrV &ecunde/M
L?#>* +ttp,eTuiS/refre&+/
contentS/nr &ecunde]
urlSadre&aVnoua/M
2pecific numrul de &ecunde
dup care pa'ina e&te rencrcat
automat de ctre $roC&er. *tri$utul
content poate con!ine, op!ional, %i
adre&a 75@ a altei pa'ini care &e a
ncrca n locul pa'inii curente.
*cea&t op!iune e&te util c(nd dori!i
redirectarea izitatorului ctre alt
pa'in.
#-emplu)
L?#>* +ttp,eTuiS/refre&+/
contentS/5]
urlS+ttp)GGCCC.nouapa'ina.com/M
3up cum o$&era!i, metata',urile de tip +ttp,eTui &unt folo&ite pentru a tran&mite $roC&erului
dier&e informa!ii priind documentul =>?@. 3in acea&t cate'orie face parte %i metata',ul care
permite &pecificarea modului de tranzi!ie ntre pa'ini)
L?#>* +ttp,eTuiS/6a'e,#nter/ contentS/5eeal>ran&93urationSnrV&ecunde,
>ran&itionScodVtranzitie;/M
L?#>* +ttp,eTuiS/6a'e,#-it/ contentS/5eeal>ran&93urationSnrV&ecunde,
>ran&itionScodVtranzitie;/M
unde) nrV&ecunde reprezint durata tranzi!iei n &ecunde iar codVtranzitie poate fi unul dintre
codurile de mai "o&. Diecare dintre ele realizeaz tranzi!ia pa'inii n alt mod.
Tabel 1:. '
Cod de
tran&i#ie
Cu se ,ace tran&i#ia
0
3reptun'+i care &e
nc+ide
1
3reptun'+i care &e
de&c+ide
2 0erc care &e nc+ide
3 0erc care &e de&c+ide
4 3e "o& n &u&
5 3e &u& n "o&
6 3e la &t(n'a la dreapta
7 3e la dreapta la &t(n'a
8
3un'i care &e
depla&eaz &pre dreapta
9
3un'i care &e
depla&eaz n "o&
10
3reptun'+iuri care &e
depla&eaz &pre dreapta
11
3reptun'+iuri care &e
depla&eaz n "o&
12
6i-eli care /dizol/
pa'ina
13
0ortin care &e nc+ide
orizontal
14
0ortin care &e
de&c+ide orizontal
15
0ortin care &e nc+ide
ertical
#-emplul 16.1 ilu&treaz func!ionarea ace&tui metata'. 6ute!i o$&era modul de tranzi!ie dintre
pa'ini din Di'ura 16.1.
("eplul 1:. 1
L=>?@M
L=#*3M
L>I>@#Mmeta1LG>I>@#M
L?#>* +ttp,eTuiS/pa'e,enter/ contentS/5eeal>ran&9durationS5, tran&itionS0/M
L?#>* +ttp,eTuiS/pa'e,e-it/ contentS/5eeal>ran&9durationS5, tran&itionS1/M
LG=#*3M
L1.3K $'colorS/red/M
L=1 ali'nS/center/M>ranzitia intre pa'iniLG=1ML=5M
6entru a o$&era modul de tranzitie apa&ati L* +refS/meta2.+tml/MaiciLG*M
LG1.3KM
LG=>?@M
6ute!i &c+im$a codurile dup cum dori!i pentru a o$&era %i alte moduri de tranzi!ie.
3ocumentul meta>)html creat n #-emplul 16.2 &ere%te doar pentru a e-emplifica modul n care
&e face tranzi!ia pentru intrarea n pa'in.
("eplul 1:. '
L=>?@M
L=#*3M
L>I>@#Mmeta2LG>I>@#M
LG=#*3M
L1.3K $'colorS/IelloC/M
L=3M6entru a reeni la pa'ina anterioara apa&ati $utonul 1acJ al $roC&eruluiLG=3M
LG1.3KM
LG=>?@M
.ten#ieH
*m precizat c metata',urile &unt inclu&e n antetul documentului =>?@. *tunci c(nd folo&i!i
cadre n pa'inile dumneaoa&tr nu uita!i & pla&a!i metata',urile n $locul L=#*3M al tuturor
documentelor care &e de&c+id n cadre %i nu numai n documentul de definire a cadrelor
LD5*?#2#>M.
3. -e.umat
?otoarele de cutare &unt aplica!ii foarte puternice care au drept &cop inde-area %i adu'area n
$aza lor de date a &utelor de milioane de pa'ini 4e$ e-i&tente.
6entru a facilita inde-area pa'inii de ctre motoarele de cutare, n antetul documentului =>?@
&e includ ni%te elemente &peciale numite metata',uri, prin intermediul etic+etei L?#>*M.
0ele mai importante metata',uri &unt cele care furnizeaz motoarelor de cutare li&ta de cuinte
c+eie a&ociat pa'inii %i de&crierea ace&teia 9metata',urile /JeICord&/ %i /de&cription/ ;, precum %i cel
care interzice inde-area pa'inilor 9metata',ul /ro$ot&/ ;.
*lte metata',uri furnizeaz informa!ii $roC&erului priind tipul pa'inii, interalul de timp dup
care pa'ina e&te rencrcat automat, momentul e-pirrii, autorul, pro'ramul cu care a fo&t con&truit,
etc.
Crearea i publicarea unui site Feb
*m &tudiat p(n acum elementele fundamentale ale lim$a"ului =>?@ inclu&i modul n care
ace&ta poate fi e-tin& prin folo&irea &cripturilor 0AI, a &cripturilor Baa2cript %i a foilor de &tiluri. *e!i
la ndem(n acum in&trumentele nece&are pentru a crea propriul dumneaoa&tr &ite 4e$. 3ar e&te oare
&uficient< 5&pun&ul e&te nu.
6entru a crea un &ite 4e$ de calitate, care & comunice informa!iile n mod lo'ic %i atracti %i care
& atra' izitatori permanen!i, cunoa%terea lim$a"ului =>?@ nu e&te &uficient. Enainte de a ncepe
&crierea codului =>?@ pentru pa'inile dumneaoa&tr tre$uie & parcur'e!i alte dou etape importante)
planificarea &ite,ului %i &ta$ilirea elementelor de 4e$ de&i'n. 3up ce a!i finalizat documentele =>?@
care or face parte din &ite tre$uie & te&ta!i func!ionarea linJ,urilor %i a&pectul pa'inilor n diferite
$roC&ere. 8i, n fine, dup ce toate ace&te etape au fo&t parcur&e, urmeaz pu$licarea &ite,ului pe un
&erer 4e$ care &,l fac acce&i$il tuturor celor care nai'+eaz pe 4e$.
En cele ce urmeaz om di&cuta de&pre etapele care preced con&truirea documentelor =>?@ care
or forma &ite,ul %i de&pre cele care urmeaz dup ce codul =>?@ al pa'inilor a fo&t definitiat.
Capitolul 1<
Plani,icarea site$ului
Plani,icarea e&te un a&pect crucial n proce&ul de creare a unui &ite 4e$, deoarece e&te etapa n
care &e iau decizii care or influen!a de&i'nul, implementarea %i, mai t(rziu, promoarea &ite,ului.
4orld 4ide 4e$ fiind un mediu de&c+i& %i dinamic, planificarea e&te mai de'ra$ un proce& continuu
n care interin &c+im$ri determinate de nnoirea permanent a informa!iilor %i de apari!ia altora noi.
*tunci c(nd crea!i un &ite 4e$ tre$uie & fi!i con%tient c e-i&t o &erie de factori a&upra crora
creatorul &ite,ului nu are nici un control. 6rimul pa& n proce&ul de planificare e&te identificarea ace&tor
factori %i determinarea modului n care ace%tia pot afecta &tructura iitoare a &ite,ului dumneaoa&tr.
1. 0actori care nu pot 'i p!ani'icai
Dactorii pe care creatorul &ite,ului nu i poate controla %i prin urmare nu pot face o$iectul unei
planificri ri'uroa&e &unt urmtorii)
Comportamentu! uti!i.atoru!ui.
*ce&t factor implic faptul c nu pute!i controla cum a acce&a utilizatorul informa!iile din &ite,ul
dumneaoa&tr. 4e$,ul e&te un siste pereabil, acea&ta n&emn(nd c un izitator poate intra n
interiorul &ite,ului nu numai prin pa'ina de nceput 9pa'ina +ome; ci %i printr,o pa'in oarecare.
Uizitatorul &ite,ului poate a"un'e la el parcur'(nd o li&t de rezultate furnizat de un motor de cutare,
&au prin intermediul unui linJ aflat pe un alt &ite, &au parcur'(nd o li&t de re&ur&e. .ricare dintre ace&te
metode l poate conduce pe izitator la o alt pa'in din interiorul &ite,ului, %i nu la cea de&tinat de
dumneaoa&tr a fi pa'ina =ome.
En 'eneral, creatorul &ite,ului e&te tentat & &tructureze &ite,ul a(nd n minte un anumit tip de
acce&, cel mai ade&ea cel care pleac de la pa'ina de &tart, ceea ce conduce la ale'erea unei anumite
&tructuri, la o anumit or'anizare a le'turilor ntre pa'ini, etc. >re$uie & ae!i permanent n edere
faptul c izitatorul &ite,ului poate aea un cu totul alt mod de a parcur'e &ite,ul dec(t cel '(ndit de
dumneaoa&tr %i &,i furniza!i de,a lun'ul ntre'ului &ite elemente de nai'a!ie clare care &,l a"ute &
&e orienteze.
$ro%seru! uti!i.atoru!ui.
*%a cum am mai di&cutat, e-i&t o mare arietate de $roC&ere folo&ite pentru a izualiza pa'inile
4e$. 6rin urmare, izitatorii &ite,ului or percepe o ima'ine diferit a &ite,ului dumneaoa&tr, n
func!ie de tipul de $roC&er folo&it. 0reatorul &ite,ului nu poate %ti ce tip de $roC&er folo&e%te un anumit
izitator %i deci nu are control a&upra modului n care a fi afi%at con!inutul pa'inilor &ale. 3e e-emplu,
mai e-i&t nc utilizatori care folo&e&c er&iuni ec+i de Fet&cape &au #-plorer, care nu &uport
anumite e-ten&ii =>?@. #-i&t de a&emenea nc n uz $roC&ere te-t, cum e&te @In-, care nu &uport
'rafica. 3ac e!i pla&a informa!ii e&en!iale n fi%iere 'rafice, de e-emplu, ace%ti utilizatori nu or aea
acce& la ele.
3in ace&t moti e&te $ine & &ta$ili!i de la nceput care dori!i & fie nielul de acce&i$ilitate al &ite,
ului dumneaoa&tr din ace&t punct de edere. 7n alt a&pect e&te n!ele'erea faptului c =>?@ e&te un
lim$a" care e&te de&tinat definirii &tructurii documentului %i nu al modului &u de afi%are. #&te
recomandat & eita!i &pecificarea n detaliu a a&pectului pa'inilor &au optimizarea pa'inilor pentru un
anumit tip de $roC&er.
Le&*turi!e cu pa&ini externe.
Entr,un &ite 4e$ e-i&t de o$icei le'turi ctre re&ur&e e-terioare &ite,ului care &unt %i ele n afara
controlului dumneaoa&tr. 6a'inile referite prin ace&te le'turi %i pot &c+im$a adre&ele, fc(nd a&tfel
ca le'tura & nu mai fie ala$il 9le'turi perimate;. 3e a&emenea pot e-i&ta le'turi rupte, n cazul
c(nd &ererul pe care e&te 'zduit pa'ina re&pecti are anumite dificult!i te+nice. rin(nd &eama de
impo&i$ilitatea de a controla ace&t a&pect, pot fi adoptate mai multe metode de a$ordare)
2ite,ul & nu con!in nici o le'tur e-tern &au care & &e afle n afara controlului direct
al de&i'nerului. #&te metoda cea mai &i'ur. 3in pcate, acea&t &trate'ie anuleaz po&i$ilitatea ca
izitatorul & $eneficieze de informa!ii cone-e cu &u$iectul &ite,ului dumneaoa&tr aflate n
e-teriorul &u.
0entralizarea re&ur&elor. #&te o practic de& nt(lnit pe 4e$, aceea de a include toate
le'turile e-terne ntr,o pa'in &pecial de&tinat ace&tora. 1eneficiul ace&tei &trate'ii e&te c n
cazul c(nd una dintre ace&te le'turi e-terne nu mai func!ioneaz, izitatorul &e poate cu u%urin!
rentoarce la pa'ina de re&ur&e pentru a te&ta urmtorul linJ. En plu&, cu unele e-cep!ii, izitatorii
or parcur'e cel pu!in o parte a &ite,ului nainte de a a"un'e la pa'ina de le'turi e-terne %i a,l
pr&i, eentual, definiti.
Ie%irea li$er. #&te cea mai fle-i$il a$ordare, permi!(nd pla&area le'turilor e-terne
oriunde n cadrul pa'inilor. 3ezaanta"ul ei ma"or e&te c izitatorul poate pr&i prematur &ite,ul
pentru a urma un anumit linJ.
3ac nu ae!i control a&upra le'turilor de la &ite ctre e-terior, e&te tot at(t de aderat c nu
pute!i controla nici le'turile care &e fac din e-terior ctre &ite. *ce&t lucru poate fi dezaanta"o&,
deoarece nu pute!i %ti n ce mod e&te prezentat le'tura ctre &ite,ul dumneaoa&tr. 6oate c referirea
la el e&te ironic &au ruoitoare, n& ace&t lucru e&te dincolo de controlul dumneaoa&tr. >ot ceea ce
pute!i face e&te & crea!i un &ite de calitate %i cu un con!inut aloro&, care & conin' prin el n&u%i.
0u toate c elementele prezentate mai &u& pot prea de&cura"ante, unele dintre ele prezint totu%i
%i aanta"e. *&tfel, permea$ilitatea 4e$,ului poate lucra n faoarea de&i'nerului, cu condi!ia ca ace&ta
& &tructureze atent informa!iile prezentate %i & ofere &uficiente elemente de nai'a!ie. . pa'in &au un
'rup de pa'ini din cadrul unui &ite pot fi folo&ite ca referin!e n alte pa'ini &au c+iar ca elemente
con&titutie ale unui alt &ite. 3e e-emplu, un &ite de tip mono,pa'in care face prezentarea unui manual
de =>?@ poate fi folo&it ca pa'in indiidual ntr,un &ite de li$rrie electronic, &au poate con&titui o
le'tur util din interiorul unui &ite de de&i'n 4e$, mrind a&tfel %an&ele ca pa'ina re&pecti & fie
acce&at de izitatori printr,unul dintre ace&te puncte.
2. #tape!e p!ani'ic*rii site-u!ui
6roce&ul de planificare a unui &ite tre$uie & parcur' urmtoarele etape)
2ta$ilirea audien#ei
2ta$ilirea scopului
3efinirea obiectivelor
0olectarea in,ora#iilor de&pre &u$iectul prezentat
2ta$ilirea speci,ica#iilor
2ta$ilirea odului de pre&entare
1udiena
6entru a crea un &ite de calitate %i o comunicare eficient a informa!iilor, o etap deo&e$it de
important e&te definirea audien!ei &ite,ului. *udien!a reprezint pu$licul cruia i &e adre&eaz &ite,ul.
2ta$ilirea audien!ei &ite,ului dumneaoa&tr e&te e&en!ial deoarece contri$uie la definirea con!inutului
pa'inilor, precum %i a or'anizrii %i a&pectului &u. 7n &ite 4e$ creat pe $aza unor informa!ii preci&e
a&upra audien!ei &ale actuale %i iitoare are mult mai multe %an&e de &ucce& dec(t unul care nu &e
adre&eaz unui pu$lic &pecific.
2ta$ilirea audien!ei unui &ite implic doi pa%i)
3efinirea pu$licului !int.
>re$uie & &ta$ili!i cui &e adre&eaz &ite,ul dumneaoa&tr. 6ute!i, de e-emplu & adre&a!i
/per&oanelor care &tudiaz c+imia/. 3e%i e&te un enun! care define%te ntr,o oarecare m&ur audien!a
&ite,ului, e&te de dorit ca definirea audien!ei & fie mai preci& dec(t at(t. U pute!i adre&a de pild,
&peciali%tilor n c+imie, %i atunci informa!iile or aea un nalt 'rad de &pecializare %i un niel %tiin!ific
ridicat &au pute!i adre&a eleilor de liceu intere&a!i de &tudiul c+imiei, &au care or da e-amene la
acea&t di&ciplin. En ace&t caz informa!iile or fi de niel mai 'eneral, le'ate de pro'rama %colar %i de
tipurile de &u$iecte cu care eleii &e or confrunta la e-amene.
3ac, de e-emplu, dori!i & crea!i un &ite comercial, &ta$ilirea &e'mentului de pia! cruia
adre&a!i e&te la fel de important. 3ac inten!iona!i & inde!i produ&e co&metice e!i adre&a pro$a$il
femeilor. 3ar acea&ta e&te o reprezentare mult prea 'eneral a pu$licului dumneaoa&tr. *!i putea &
fi!i mai &pecific, &ta$ilindu, drept &e'ment de pia! femeile cu (r&ta mai mic de 25 de ani. En
acea&t &itua!ie e&te mai pro$a$il c or aea &ucce& produ&ele de nfrumu&e!are mai ndrzne!e, n
reme ce, dac adre&a!i femeilor de (r&t medie, cele mai $ine (ndute or fi produ&ele de
ntre!inere, cremele anti,rid, etc.
0oncluzia care &e impune e&te c definirea c(t mai preci& a audien!ei e&te definitorie pentru toate
etapele ulterioare ale ela$orrii &ite,ului. 0u c(t mai $ine definit e&te audien!a, cu at(t %an&ele de a
crea un &ite de &ucce& &unt mai mari.
3efinirea informa!iilor nece&are care prie&c pu$licul !int.
Fu toate informa!iile de&pre pu$licul !int &unt e&en!iale n ela$orarea &ite,ului. 3ac inten!iona!i
& adre&a!i &peciali%tilor n c+imie, care anume caracteri&tici ale ace&tora &unt importante pentru
dumneaoa&tr< Fielul de educa!ie< *ria de &pecializare< 0aracteri&tici per&onale, precum nl!imea
%i 'reutatea< #ident, e-cept(nd cazul n care inten!iona!i & inde!i prin intermediul &ite,ului
ec+ipament de la$orator, ultimele informa!ii &unt inutile. 6rin urmare e&te nece&ar & identifica!i
informa!iile releante priitoare la audien!a &ite,ului dumneaoa&tr.
Scopu!
2ta$ilirea &copului &ite,ului e&te etapa n care tre$uie & r&punde!i la ntre$area /de ce!/. 3e ce
dori!i & crea!i ace&t &ite< 3efini!ia &copului &ite,ului reprezint tema conductoare n proce&ul de
con&truire a ace&tuia. 7n &ite fr un &cop clar %i $ine definit lan&eaz un me&a" neconin'tor %i ce!o&.
Uizitatorul &e a ntre$a, fr ndoial, /@a ce &ere%te ace&t &ite</ %i &e a 'r$i &,l pr&ea&c.
6entru a defini &copul &ite,ului tre$uie & ae!i n edere urmtoarele elemente)
*ria de cuprindere a &u$iectului. 2 pre&upunem c dori!i & crea!i un &ite care &
con!in informa!ii de&pre muzica rocJ a anilor H60. Entr,o a&emenea &itua!ie, nu e!i defini drept
&u$iect al &ite,ului muzica rocJ n an&am$lu, deoarece o definire at(t de a&t dep%e%te cu mult
aria de cuprindere a &u$iectului dumneaoa&tr.
*udien!a. En &copul &ite,ului tre$uie & face!i referire %i la audien!a &ta$ilita anterior.
*&tfel, &copul &ite,ului ar putea fi definit n maniera urmtoare) /2ite,ul ofer informa!ii iu$itorilor
muzicii rocJ a anilor H60, de (r&t medie/.
Fielul de detaliere a &u$iectului. >re$uie & &pecifica!i dac referi!i doar la 'rupurile
rocJ reprezentatie &au dori!i & face!i o i&torie complet a perioadei.
1eneficiul &au aanta"ul izitatorului. 0e are de c(%ti'at o per&oan care iziteaz &ite,
ului dumneaoa&tr< 6oate afla informa!ii inedite de&pre forma!iile preferate, &au poate fi informat
cu priire la eolu!ia lor ulterioar.
2ta$ilirea &copului &ite,ului determin deciziile ulterioare ale de&i'nerului priind me&a"ul pe care
l tran&mite &ite,ul. 7n &cop $ine articulat &ere%te ca "alon pentru toate celelalte etape ale proce&ului de
planificare %i creare a &ite,ului. 2copul &ite,ului poate reprezenta c+iar prima informa!ie care le e&te
oferit izitatorilor, la intrarea pe prima pa'in.
D<iecti"e!e
3up ce a!i &ta$ilit audien!a &ite,ului, care &unt informa!iile priitoare la pu$licul !int, precum %i
&copul &u, pa&ul urmtor con&t n com$inarea tuturor ace&tor informa!ii %i formularea unor o$iectie
&pecifice ale &ite,ului dumneaoa&tr. .$iectiele reprezint o detaliere a &copului 'eneral al &ite,ului,
con!in(nd informa!iile &pecifice care or conduce la ndeplinirea &copului pentru care a fo&t creat &ite,
ul. 3e e-emplu, dac &copul unui &ite e&te /& ofere informa!ii de&pre ora%ul ggg/ , ace&ta poate fi du&
la ndeplinire prin intermediul unor o$iectie &pecifice %i ariate cum ar fi) informa!ii de&pre a%ezarea
'eo'rafic a ora%ului, de&pre dezoltarea economic, de&pre ia!a cultural, o$iectie turi&tice, etc. 0u
alte cuinte, n reme ce &copul &ite,ului comunic ce ae!i de '(nd & face!i, o$iectiele comunic ce
informa!ii e!i oferi pentru a ndeplini &copul propu&.
2pre deo&e$ire de &copul &ite,ului, o$iectiele &e pot modifica n timp, pe m&ur ce apar noi
informa!ii de&pre pu$licul !int &au de&pre &u$iectul &ite,ului, cu a"utorul crora pute!i &u&!ine mai $ine
&copul &u.
Co!ectarea in'ormaii!or despre su<iect
Informa!iile referitoare la &u$iectul &ite,ului includ at(t informa!iile on!line c(t %i &ur&ele cla&ice
de informa!ii. En acea&t etap e!i colecta nu numai informa!ii le'ate de &u$iectul &ite,ului care or fi
prezentate utilizatorului ci %i informa!iile %i cuno%tin!ele de care ae!i neoie pentru realizarea &ite,ului.
6a%ii nece&ari n con&truirea colec!iei de informa!ii nece&are &unt)
2ta$ilirea informa!iilor nece&are, at(t cele pe care le e!i furniza izitatorului c(t %i cele
care &unt nece&are dumneaoa&tr
3eterminarea modului cum e!i o$!ine ace&te informa!ii. En acea&t etap tre$uie &
identifica!i &ur&ele de documentare. Informa!iile de&pre &u$iectul ale& le pute!i '&i pe 4e$, n
literatura de &pecialitate, n dier&e $aze de date.
?odul de reactualizare a informa!iilor. 3ac informa!iile pe care dori!i & le prezenta!i
&unt dinamice %i &e perimeaz cu repeziciune, tre$uie & &ta$ili!i cum inten!iona!i & le actualiza!i %i
care e&te interalul de timp ntre dou reactualizri. 3e e-emplu, dac inten!iona!i & crea!i un &ite
care & prezinte %tiri &au date de&pre reme, ele or tre$ui reactualizate zilnic &au c+iar mai
frecent. 3ac &ite,ul prezint informa!ii de&pre i&torie, eident c informa!iile or fi reactualizate
mult mai rar, eentual la apari!ia unor noi de&coperiri ar+eolo'ice, de e-emplu.
Speci'icaii!e
2ta$ilirea &pecifica!iilor pentru un &ite reprezint o detaliere a o$iectielor &ale %i definirea unor
cerin!e &au a unor re&tric!ii. 2pecifica!iile de&criu n detaliu ce informa!ii or fi oferite n pa'inile &ite,
ului %i cum or fi ele prezentate. 3e e-emplu, dac unul dintre o$iectiele unui &ite e&te /furnizarea de
le'turi ctre &ur&e $i$lio'rafice referitoare la &u$iect/ , atunci &pecifica!iile or preciza care &unt
ace&te &ur&e $i$lio'rafice, care &unt adre&ele lor 75@, c(te a&tfel de adre&e or fi inclu&e ntr,o pa'in,
etc.
2pecifica!iile tre$uie & identifice toate re&ur&ele nece&are atin'erii o$iectielor) linJ,uri, fi%iere
'rafice, fi%iere de &unet &au ideo, alte elemente care or fi inclu&e n &ite) formulare, ima'ini +art,
&cripturi. 3e a&emenea, n cadrul &pecifica!iilor tre$uie &ta$ilite %i elementele care nu or fi inclu&e n
pa'ini 9dac e&te cazul;. 3e e-emplu, &e poate &pecifica & nu fie folo&ite anumite e-ten&ii =>?@, &au
formulare, fi%iere care & dep%ea&c anumite dimen&iuni, etc.
Modu! de pre.entare
6lanificarea modului de prezentare implic o &erie de decizii care or &eri drept puncte de reper
n etapa de con&truire efecti a &ite,ului. *cea&t etap poate include)
0rearea unor template,uri pentru &ite
0rearea unor mo&tre de documente =>?@, ima'ini +art, &au formulare
#%alonarea n timp a etapelor de creare a &ite,ului
3. -e.umat
6rima etap a proce&ului de con&truire a unui &ite e&te planificarea. En acea&t etap tre$uie
identifica!i factorii care nu pot fi controla!i printre care &e numr) comportamentul utilizatorului,
$roC&erul cu care a fi izualizat pa'ina %i le'turile cu pa'ini e-terne.
6lanificarea &ite,ului parcur'e urmtoarele etape)
2ta$ilirea audien!ei &ite,ului
2ta$ilirea &copului &ite,ului
3efinirea o$iectielor &ite,ului
0olectarea informa!iilor de&pre &u$iectul prezentat
2ta$ilirea &pecifica!iilor &ite,ului
2ta$ilirea modului de prezentare a &ite,ului
7n &ite de calitate, care & ofere informa!ii aloroa&e n mod atracti %i & permit o comunicare
eficient a ace&tora nu &e na%te n mod nt(mpltor. Dr a aea o priire de an&am$lu a&upra a&pectelor
&ta$ilite n faza de planificare, %an&ele de a realiza un &ite de $un calitate &unt minime. 3ac e!i
ncepe & &crie!i direct codul =>?@ fr & trece!i prin etapa de planificare e!i o$!ine doar o
n'rmdire de pa'ini fr coeren!, ade&ea defectuo& le'ate ntre ele, cu un con!inut neclar %i &la$
&tructurat.
Capitolul 1=
6esi-nul site$ului
.dat parcur& etapa de planificare, a(nd clare audien!a, &copul, o$iectiele %i &pecifica!iile &ite,
ului, pute!i trece la etapa de creare efecti. 6entru ca &ite,ul dumneaoa&tr & ai$ un a&pect plcut, o
$un or'anizare, in&trumente de nai'are eficiente tre$uie & cunoa%te!i %i & aplica!i re'ulile
fundamentale de 4e$ de&i'n.
0(nd &unte!i n faza de concepere a de&i'nului principalul dumneaoa&tr o$iecti e&te & crea!i
un a&pect atracti %i & oferi!i izitatorului &ite,ului un &entiment de &ati&fac!ie, pe m&ur ce ace&ta
parcur'e pa'inile. 3e&i'nul unui &ite tre$uie & ec+ili$reze performan!ele $roC&erului, cu e&tetica %i
func!ionalitatea &ite,ului. En etapa de de&i'n &unt luate deciziile de ordin practic care or conduce la
ndeplinirea o$iectielor &ta$ilite) c(te ima'ini &au elemente 'rafice e!i include n pa'in, c(t de mult
te-t or con!ine pa'inile, ce te-te &au ima'ini or fi folo&ite drept le'turi.
1. :rincipii!e desi&nu!ui %e<
6entru a lua deciziile corecte n ceea ce prie%te de&i'nul unui &ite tre$uie & ae!i n edere
c(tea principii de $az)
.socierea seni,ica#iilor. Dolo&i!i, de puterea +Iperte-tului pentru a &ta$ili le'turi ntre
informa!iile nrudite ca &emnifica!ie.
Men#inerea copetitivit%#ii. 3eoarece 4e$,ul e&te un mediu foarte competiti, a&i'ura!i, c
de&i'nul &ite,ului &e men!ine la cel mai &czut co&t po&i$il, din punctul de edere al izitatorului. *ce&t
co&t include timpul de ncrcare al pa'inilor, aplica!iile &uplimentare nece&are pentru izualizarea
optim a pa'inilor precum %i efortul depu& de izitator pentru a n!ele'e informa!iile prezentate.
*olosirea e,icient% a resurselor. *le'e!i pentru &ite,ul dumneaoa&tr acele elemente care in n
nt(mpinarea nece&it!ilor utilizatorului, %i &unt c(t mai eficiente po&i$il din punctul de edere al
dimen&iunii fi%ierelor, al timpului de acce& %i al ntre!inerii ulterioare.
Concentrarea pe necesit%#ile utili&atorului. *ce&ta e&te, poate, cel mai important principiu de
4e$ de&i'n %i, parado-al, cel mai ade&ea i'norat. 7n &ite 4e$ nu &e con&truie%te pentru a &ati&face
'u&tul de&i'nerului 9&au al clientului pentru care lucreaz; %i nici pentru a etala cuno%tin!ele &ale a&te
a&upra celor mai noi te+nici de pro'ramare 4e$, ci pentru a eni n nt(mpinarea neoii de informa!ii a
izitatorilor &i. Docalizarea a&upra utilizatorului e&te prioritatea principal a unui &ite de calitate.
Un#ele-erea pereabilit%#ii. *ce&t principiu &e refer la n!ele'erea %i a&umarea faptului c
izitatorul poate acce&a un &ite prin oricare pa'in a &a. 3in ace&t moti e&te de dorit ca informa!iile din
cadrul unei pa'ini & &e auto,&u&!in fr a depinde de informa!iile din re&tul &ite,ului. 3ac ace&t lucru
nu e&te po&i$il, e&te o$li'atorie prezen!a unor in&trumente de nai'a!ie eficiente care & permit
izitatorului orientarea cu u%urin! n interiorul &ite,ului.
Crearea unui aspect pl%cutR coerent i ,luent. 6a'inile &ite,ului tre$uie & ofere impre&ia unui
tot $ine or'anizat, elementele izuale 9icon,uri, elemente de nai'are; tre$uie & fie coerente pe tot
parcur&ul &ite,ului, fiecare pa'in tre$uie & con!in indicii a&upra identit!ii &ite,ului %i a&upra &copului
ei.
Sus#inerea interactivit%#ii. 0+iar dac nu folo&i!i formulare care a&i'ur un 'rad nalt de
interactiitate cu izitatorii &ite,ului, e&te o$li'atorie prezen!a unor informa!ii de contact 9adre&a de
mail a 4e$ma&ter,ului, cel pu!in; a&tfel nc(t utilizatorii & poat o$!ine informa!ii &uplimentare &au &
poat comunica eentualele pro$leme aprute la parcur'erea &ite,ului.
Sus#inerea navi-a#iei. *&i'urarea unor in&trumente de nai'a!ie eficiente e&te una dintre
condi!iile e&en!iale ale unui &ite de calitate. 2e &pune c un &ite $un e&te acela n care izitatorul nu e&te
niciodat o$li'at & ape&e $utonul 1acJ al $roC&erului.
2. Dr&ani.area unui site
1una or'anizare a &ite,ului e&te unul dintre elementele c+eie ale &ucce&ului &u. ?odul de
or'anizare depinde de &copul, o$iectiele %i &u$iectul &ite,ului %i &e $azeaz pe principiile de de&i'n
enun!ate mai &u&.
En func!ie de &tructura lor, &ite,urile &e mpart n mai multe cate'orii)
&ite,uri liniare, formate dintr,o &in'ur pa'in 9mono,pa'in;
&ite,uri liniare formate din mai multe pa'ini 9multi,pa'in;
&ite,uri cu &tructur ierar+ic
&ite,uri cu &tructur de tip 4e$
@e'turile dintre pa'ini tre$uie & fie core&punztoare tipului de &ite pe care l con&trui!i.
Site-uri!e !iniare mono-pa&in*
*ce&t tip de &ite e&te, a%a cum indic %i numele, format dintr,o &in'ur pa'in. *cea&t &tructur
&e folo&e%te atunci c(nd informa!iile prezentate &unt &u$ form de te-t care &e poate mpr!i fire&c n
&ec!iuni mai mici. Uizitatorii pot parcur'e ntrea'a pa'in derul(nd,o dar, de o$icei, la nceputul pa'inii
e-i&t o li&t de le'turi care are rol de 0uprin&. *ce&tea &unt ni%te le'turi interne 9ancore; care conduc
rapid izitatorul la &ec!iunea care l intere&eaz, fr a mai derula ntrea'a pa'in. Empr!irea
con!inutului pa'inii n &ec!iuni mai mici &e poate face folo&ind linii orizontale. #&te indicat ca la fiecare
nou &ec!iune & in&era!i o le'tur intern ctre partea &uperioar a pa'inii unde &e afl 0uprin&ul.
Site-uri!e !iniare mu!ti-pa&in*
2tructura de ace&t tip &e folo&e%te n &itua!ia c(nd informa!iile prezentate &e &ucced ntr,o ordine
&ecen!ial, de la nceput la &f(r%it, informa!iile prezentate ntr,o pa'in $az(ndu,&e pe cele din pa'ina
anterioar. 6entru a,l ndruma pe izitator & parcur' &ite,ul n ordine, fiecare pa'in tre$uie &
con!in o le'tur cu pa'ina urmtoare, precum %i cu cea anterioar. 3e a&emenea, e&te nece&ar &
in&era!i %i o le'tur cu prima pa'in a &ite,ului care tre$uie & con!in 0uprin&ul, pentru a facilita %i
&altul direct la o anumit pa'in. Entr,un &ite cu o a&tfel de &tructur pa'inile nu tre$uie & fie prea lun'i
9de dorit ar fi & nu dep%ea&c un ecran; pentru a face nai'area mai comod. 0u toate c ace&t tip de
or'anizare e&te lo'ic, nu tre$uie & uita!i principiul permea$ilit!ii. 6entru un izitator care a intra n
&ite printr,o pa'in oarecare, indica!ii de nai'are cum ar fi /Enainte/ , /Enapoi/ ar putea & nu ai$ prea
mult n!ele&.
Site-uri!e cu structur* ierar/ic*
2ite,urile de ace&t tip &unt cele mai numeroa&e pe 4e$. 7n a&tfel de &ite e&te format dintr,o
pa'in de $az 9=ome; de niel zero, care con!ine le'turi ctre alte pa'ini, fiecare pa'in con!in(nd
c(te o parte a &u$iectului &ite,ului. Diecare dintre ace&te pa'ini de niel unu poate aea, la r(ndul &u,
le'turi cu alte pa'ini, detaliind &u$iectul %i furniz(nd informa!ii &pecifice.
7n e-emplu de &ite de ace&t tip e&te o li$rrie irtual. 6a'ina =ome ar putea con!ine le'turi
ctre dier&e cate'orii) 1eletri&tic, I&torie, 6olitic, #conomie, 0alculatoare %i Internet. 3ac un
izitator e&te intere&at de un manual de pro'ramare n 6erl, el a ale'e le'tura ctre 0alculatoare %i
Internet %i a a"un'e ntr,o pa'in de nielul unu unde a '&i le'turi ctre 6ro'ramare, Internet,
=ardCare. Ua ale'e le'tura 6ro'ramare care a de&c+ide o pa'in de nielul doi care a con!ine o li&t
de titluri, printre care %i manualul cutat.
*tunci c(nd concepe!i &tructura unui a&tfel de &ite, tre$uie & acorda!i o mare aten!ie or'anizrii
lo'ice %i fluente a &ite,ului. Diecare pa'in tre$uie & con!in o le'tur ctre pa'ina =ome a&tfel nc(t
izitatorul & poat reeni la nceput fr & fie o$li'at & &tr$at toate nielele. Fu le'a!i prima pa'in
de prea multe pa'ini de nielul unu ci ramifica!i,le n ad(ncime. 3ac &ite,ul e&te de mari dimen&iuni,
introduce!i n partea &uperioar a fiecrei pa'ini o $ar de nai'are care informeaz izitatorul de&pre
locul unde &e afl. 5eenind la e-emplul cu li$rria, un a&tfel de in&trument de nai'are ar putea arta
a%a) #ome M Calculatoare / &rogramare)
En plu&, e&te indicat & oferi!i o $ar de nai'are &ecundar la $aza pa'inii.
Site-uri!e de tip reea.
*ce&te &ite,uri au o &tructur li$er. #le &unt formate din mai multe pa'ini, fiecare put(nd aea
le'tur cu oricare alt pa'in. #-i&t %i aici o pa'in =ome, n& de la ea, izitatorul poate nai'a prin
&ite fr a urma un drum preci&. En 'eneral, ace&t tip de &ite e&te potriit pentru &u$iectele care nu au o
&tructur lo'ic intern, &u$iecte recrea!ionale &au di&tractie. 3ac dori!i & crea!i un &ite de ace&t tip,
tre$uie & ae!i 'ri" & oferi!i n fiecare pa'in, pe l(n' le'turile cu alte pa'ini, o le'tur ctre
pa'ina =ome. En plu&, a&i'ura!i, c materialul dumneaoa&tr e&te adecat ace&tui tip de &ite
deoarece altfel &ite,ul a purta amprenta neconcordan!ei ntre &u$iectul a$ordat %i modul &u de
or'anizare.
3. Metodo!o&ia de construire a site-u!ui
3e%i nu e-i&t un mod unic de de&f%urare a proce&ului de con&truire a unui &ite, e-i&t trei tipuri
de a$ordri po&i$ile, pe care creatorul &ite,ului le poate ale'e &au com$ina, n func!ie de nece&it!i.
Metoda 2Top-@o%n2
3ac de&i'nerul are nc de la nceput o idee clar a&upra con!inutului &ite,ului, acea&t a$ordare
e&te cea mai potriit. En ace&t tip de metodolo'ie, e&te creat mai nt(i pa'ina de nceput a &ite,ului
9pa'ina =ome; %i apoi celelalte pa'ini. 6a'inile pot con!ine un minim de informa!ii, urm(nd ca la
dezoltarea ulterioar a &ite,ului, ele & fie m$o'!ite. *anta"ul ma"or al ace&tei a$ordri e&te acela c
permite continuitatea izual %i de con!inut, deoarece toate pa'inile or fi con&truite n acord cu pa'ina
de &tart. . metod foarte $un de a realiza ace&t lucru e&te crearea unor template,uri care & con!in
acela%i tip de elemente pentru toate pa'inile %i care or fi folo&ite drept tipare la momentul &crierii
codului =>?@ pentru pa'inile re&pectie.
Metoda 2$ottom-p2
*cea&t a$ordare &e folo&e%te c(nd de&i'nerul nu cunoa%te de la nceput care or fi &tructura %i
a&pectul final al &ite,ului, dar cunoa%te a&pectul %i con!inutul unor pa'ini din cadrul &u. *cea&t
&itua!ie poate aprea c(nd dori!i ca &ite,ul & con!in pa'ini de"a e-i&tente, care au fo&t create n
proce&ul de dezoltare al altui &ite, de e-emplu. 0+iar dac nu de!ine!i pa'ini create de"a de la care &
porni!i, acea&t a$ordare permite crearea unor pa'ini indiiduale care ndepline&c anumite o$iectie %i
care pot fi le'ate apoi de o pa'in =ome. *anta"ul a$ordrii /1ottom,7p/ e&te acela c, la con&truirea
pa'inilor indiiduale, nu mai &unte!i con&tr(n& la re&pectarea unui anumit &til, con&ecent cu cel din
pa'ina =ome. >otu%i, a"u&tarea ulterioar a pa'inilor n &en&ul realizrii unui a&pect unitar, e&te
nece&ar.
Metoda increment*rii
*cea&t metod con&t n con&truirea unei pa'ini de &tart %i a unor pa'ini indiiduale le'ate de
ace&ta, a(ndu,&e n edere crearea unor pa'ini intermediare, pe m&ura nece&it!ilor. ?etoda &e
folo&e%te atunci c(nd e&te nece&ar con&truirea rapid a unui &ite care urmeaz a fi dezoltat ulterior, n
loc de a,l con&trui n ntre'ime de la nceput. #&te o metod nerecomandat nceptorilor, deoarece prin
adu'irile ulterioare e-i&t ri&cul de a o$!ine un &ite defectuo& or'anizat %i lip&it de unitate.
4. Te/nici de desi&n %e<
6entru a realiza de&i'nul unui &ite &unt folo&ite o &erie de te+nici cu a"utorul crora pa'inile
capt contur, at(t din punct de edere izual c(t %i din punct de edere al or'anizrii le'turilor %i al
ampla&rii con!inutului n pa'ini. En continuare &unt prezentate c(tea dintre ace&te te+nici, fiecare
dintre ele referindu,&e la c(te un a&pect al de&i'nului &ite,ului.
Sc/ia site-u!ui
.dat ce ,a!i deci& a&upra modului n care a fi &tructurat &ite,ul e&te foarte $ine ca nainte de a
ncepe &crierea efecti a codului =>?@ pentru fiecare pa'in n parte, & realiza!i o &c+i! a ntre'ului
&ite.
6ute!i folo&i n ace&t &cop ?icro&oft 4ord &au orice alt proce&or de te-t. 6entru nceput crea!i un
document nou n care li&ta!i punctele ma"ore pe care dori!i & le acoperi!i n pa'ina =ome.
Dace!i de a&emenea o li&t a elementelor 'rafice pe care inten!iona!i & le include!i, n&o!ite de
indica!ii priind a%ezarea lor n pa'in. 2ta$ili!i care &unt pa'inile de niel unu %i ce informa!ii dori!i &
oferi!i n cadrul lor, precum %i pa'inile &u$ordonate ace&tora care or cuprinde detalierea &u$iectelor
anun!ate n pa'inile de niel unu.
6entru a aea o ima'ine c(t mai e-act a &tructurii &ite,ului nc din faza de &c+i!are a &a e&te
recomandat & folo&i!i $ara de in&trumente Outlining din meniul %ools M Customi8e din 4ord. *cea&ta
permite & &ta$ili!i nielul pa'inilor %i & realiza!i cu u%urin! ramificarea lor n ad(ncime.
. alt metod pentru a realiza &c+i!a &ite,ului o con&tituie 'raficul 9&au +arta; &ite,ului. 3ac nu
dori!i & complica!i folo&ind un editor de te-t &au un pro'ram de 'rafic, pute!i realiza o a&tfel de
&c+i! %i pe +(rtie, cu creionul. 3e&ena!i c(te un dreptun'+i pentru fiecare pa'in din &ite, &pecific(nd
n interiorul &u &copul %i o$iectiele pa'inii, elementele %i aran"area lor n pa'in. *poi uni!i
dreptun'+iurile prin &'e!i pentru a &pecifica tra&eele pe care le poate parcur'e utilizatorul. 2'e!ile
reprezint de fapt le'turile dintre pa'ini. *e!i 'ri" ca &pre pa'ina =ome & indice toate &'e!ile,
pentru a a&i'ura a&tfel o le'tur cu ea din orice pa'in a &ite,ului. En ace&t mod pute!i planifica pentru
fiecare pa'in ce urmeaz & ad, & n!elea' %i & fac izitatorul ace&teia, precum %i unde &e poate
depla&a din pa'ina re&pecti.
.ricare ar fi metoda folo&it pentru a &c+i!a &ite,ul, la fiecare pa'in tre$uie & pune!i
urmtoarele ntre$ri)
0e dore&c & afle izitatorul din acea&t pa'in<
0e dore&c & fac izitatorul n ace&t moment<
0e dore&c & &imt izitatorul parcur'(nd pa'ina<
7nde dore&c & mear' izitatorul n continuare<
3e&i'ur, n ultim in&tan! comportamentul %i impre&iile izitatorului &cap controlului
de&i'nerului, n& un &ite n care fiecare pa'in d r&pun&uri clare %i limpezi ace&tor ntre$ri are foarte
multe %an&e de a ntruni aprecierile pozitie ale izitatorilor &i.
Pa-ina de intrare n site 2pa-ina splas)3
#-i&t multe &ite,uri care nainte de pa'ina =ome au o pa'in de intrare n &ite, numit pa-in%
splas). 2copul unei a&tfel de pa'ini e&te identificarea rapid a o$iectului &ite,ului n timp ce &e ncarc
re&tul de date. 6a'ina &pla&+ are pentru &ite acela%i rol pe care l are coperta unei cr!i &au prima pa'in
a unei rei&te. *cea&t prim pa'in tre$uie & &e ncarce rapid, & ai$ un impact izual puternic %i &
comunice e&en!ialul de&pre &u$iectul &ite,ului &au compania creia i apar!ine &ite,ul.
#-i&t opinii dier'ente n le'tur cu folo&irea %i utilitatea pa'inii &pla&+ ntr,un &ite. ?ai ale&
dac face apel la elemente multimedia, &unet, 'rafic, anima!ie comple- care ncetine&c timpul de
ncrcare, pa'ina &pla&+ poate aduce mai de'ra$ de&ericii &ite,ului. En plu&, pa'ina &pla&+ poate fi
re&im!it de izitator ca o $arier n acce&ul imediat la informa!iile din interiorul &ite,ului.
Pa-ina Hoe
3e%i a&pectul %i con!inutul pa'inii =ome poate aria foarte multe de la un &ite la altul, e-i&t
c(tea elemente comune prezente n orice pa'in de &tart)
Identificarea firmei &au companiei creia i apar!ine &ite,ul 9dac e&te cazul;
3e&crierea &copului &ite,ului
3e&crierea &tructurii &ite,ului. 6a'ina =ome are %i func!ia de 0uprin& al &ite,ului oferind
indica!ii izitatorilor a&upra &u$iectelor a$ordate
2ta$ilirea rela!iilor ntre &ec!iunile de niel unu ale &ite,ului %i cele &u$ordonate lor.
*cea&ta &e realizeaz prin intermediul $arelor de nai'are, $utoanelor, +r!ilor de ima'ini &au
li&telor de le'turi.
Durnizarea informa!iilor de contact.
Pa-inile din interior
6a'inile de niel unu reprezint diiziunile ma"ore ale &u$iectului 'eneral al &ite,ului. #-i&t
tenta!ia de a include prea multe informa!ii detaliate la ace&t niel. 3ac &ite,ul acoper un &u$iect a&t,
cu o cantitate mare de informa!ii &pecifice, e&te $ine & l&a!i detalierea ace&tora pentru pa'inile de
niel doi. 6a'inile de niel unu tre$uie & con!in o de&criere &uccint a &u$iectului acoperit precum %i
le'turi ctre pa'inile de niel doi care detaliaz fiecare parte a &u$iectului. . te+nic de& utilizat e&te
pla&area re&ur&elor &uplimentare n pa'ini de nielul trei. 3e e-emplu o pa'in de nielul doi care ofer
pe l(n' te-t %i ima'ini e-plicatie ale unui anumite no!iuni poate fi le'at de pa'ini de niel trei care
con!in ima'inile. 0(nd izitatorul face clicJ pe un anumit te-t aflat n pa'ina de niel doi &e de&c+ide
pa'ina de niel trei cu ima'inea e-plicati. *anta"ul ace&tei a$ordri e&te de&con'e&tionarea pa'inilor
de nielul doi care cuprind detalierea &u$iectului.
2c+i!a dumneaoa&tr tre$uie & cuprind, pe l(n' modul de or'anizare a pa'inilor, %i o li&t c(t
mai complet a elementelor pe care dori!i & le include!i n fiecare pa'in 9ima'ini, formulare, fi%iere
multimedia, etc.;.
0ra&mentarea in'ormaii!or
.mul poate proce&a o cantitate limitat de informa!ii ntr,o anumit unitate de timp. 3in ace&t
moti, una dintre &arcinile &pecifice n de&i'nul 4e$ e&te fra'mentarea informa!iilor n &ecen!e care &
nu dep%ea&c po&i$ilit!ile de cuprindere ale utilizatorului. 0antitatea de informa!ii cuprin& ntr,o
pa'in nu tre$uie &,l cople%ea&c pe izitatorul pa'inii &au & mrea&c timpul ei de ncrcare. 3e
a&emenea, modul de fra'mentare al informa!iei tre$uie & focalizeze aten!ia izitatorului a&upra
principalelor &u$iecte a$ordate n pa'in %i & l a"ute & ia cuno%tin! n mod 'radat de &u$iectul
prezentat. Dra'mentarea corect a informa!iilor e&te n aanta"ul de&i'nerului, deoarece l a"ut &
creeze pa'ini reutiliza$ile. 3ac fiecare pa'in pe care o e!i crea &ere%te la ndeplinirea unui anumit
&cop, pute!i include acea&t pa'in fie direct, fie ca o re&ur& util %i n alte &ite,uri pe care le crea!i
ulterior %i care au &u$iecte cone-e cu pa'ina re&pecti.
En cadrul &ite,ului fra'mentarea informa!iilor conduce la &ta$ilirea modului n care a fi detaliat
&u$iectul, la determinarea numrului de pa'ini nece&are pentru ace&ta precum %i a nielului pa'inilor.
3e%i diizarea &u$iectului n pr!i mai mici e&te o te+nic deo&e$it de util, nu a$uza!i totu%i de puterea
+Iperte-tului. . fra'mentare e-ce&i a &u$iectului ntr,un mare numr de pa'ini e&te la fel de
o$o&itoare ca %i prezentarea ace&tuia n $loc. 7n de&i'n eficient anticipeaz neoia izitatorului de a
o$!ine informa!ii &uplimentare %i furnizeaz la momentul oportun le'turi ctre pa'inile care detaliaz
acel punct.
En cadrul unei pa'ini modul de fra'mentare al informa!iilor !ine de lo'ica intern a &u$iectului
prezentat. 6entru a diferen!ia pr!ile con&titutie ale &u$iectului unei pa'ini o mare importan! o are
or'anizarea te-tului n cadrul pa'inii.
0ei mai mul!i dintre cei care nai'+eaz pe 4e$ o$i%nuie&c & /&caneze/ pa'inile n cutare de
informa!ii. #i cite&c mai nt(i titlurile, li&tele, %i primele fraze dintr,un para'raf. #&te $ine & !ine!i
&eama de ace&t lucru c(nd or'aniza!i te-tul n pa'in.
0on!inutul pa'inii tre$uie & fie c(t mai u%or de citit. Dolo&i!i para'rafe &curte, de&pr!ite prin linii
li$ere, eita!i frazele prea lun'i %i folo&i!i n mod "udicio& titlurile. *ccentua!i pr!ile pe care re!i & le
&coate!i n eiden! n te-t prin n'ro%are &au &crierea lor cu alt culoare, dar nu n e-ce&. *$uzul de
culori &au de te-te &cri&e cu caractere aldine fac pa'ina ncrcat %i 'reoaie. #&te indicat & limita!i la
un numr redu& de tipuri de font. 0ele mai apreciate &unt Uerdana %i *rial, deoarece &unt lizi$ile %i
ele'ante. #&te mai $ine & eita!i folo&irea tipului >ime& FeC 5oman, de%i e&te un tip foarte folo&it n
editarea de te-te. 2pre deo&e$ire de te-tele tiprite, pe monitor citirea &e face cu 25: mai ncet
deoarece monitorul adau' fonturilor un anumit 'rad de neclaritate 9fu88iness;, mai accentuat la
fonturile cu &erife, a%a cum e&te >ime& FeC 5oman. Fu aran"a!i te-tul n pa'in pe dou coloane a&tfel
nc(t izitatorul & fie neoit & rein n partea &uperioar a pa'inii pentru a citi ce,a de,a doua
coloan. *ce&t format e&te potriit pentru ziare %i rei&te dar nu %i pentru o pa'in 4e$ deoarece rupe
cur&iitatea depla&rii n cadrul &ite,ului.
Le&area pa&ini!or
?odul n care e!i realiza le'turile dintre pa'ini depinde de &tructura &ite,ului. 3ac opta!i
pentru o &tructur ierar+ic, le'turile din interiorul &ite,ului or fi adaptate ace&tei &tructuri. *anta"ul
&tructurii ierar+ice e&te c ofer utilizatorului po&i$ilitatea unei nai'ri lo'ice, plec(nd de la
informa!iile 'enerale ctre cele particulare. 3ezaanta"ul ace&tei te+nici e&te c utilizatorul tre$uie &
urmeze o cale pre&ta$ilit pentru a a"un'e la o anumit informa!ie, care &e poate afla c(tea linJ,uri
di&tan! de pa'ina =ome.
. alt manier de a realiza le'turile din interiorul &ite,ului e&te de a le'a fiecare pa'in de toate
celelalte. Ue!i o$!ine a&tfel o &tructur ne,ierar+ic care are aanta"ul c fiecare pa'in &e afl la
di&tan! de un linJ de oricare alta, inclu&i de pa'ina =ome. 6entru &ite,urile de dimen&iuni redu&e o
a&tfel de &tructur poate func!iona $ine, n& pentru &ite,urile cu un mare numr de pa'ini numrul de
le'turi cre%te rapid iar nai'area n interiorul &ite,ului deine foarte dificil. En plu&, utilizatorul nu are
la di&pozi!ie o cale ierar+ic prin care poate a"un'e la o informa!ie &pecific.
(nstrumente!e de na"i&are
6entru a realiza o nai'are lo'ic %i eficient n cadrul &ite,ului in&trumentele de nai'are tre$uie
& fie perfect adaptate modului n care &unt create le'turile dintre pa'ini %i n plu&, & ofere indicii
izuale a&upra func!iei lor. 6entru a crea un a&pect izual unitar al ntre'ului &ite %i pentru a nu deruta
izitatorul, e&te recomandat ca in&trumentele de nai'are & fie acelea%i n toate pa'inile.
2ta$ili!i de la nceput a&pectul icon,urilor, $utoanelor &au te-tului pe care le e!i folo&i drept
le'turi %i p&tra!i,l pe parcur&ul ntre'ului &ite. *cea&t te+nic ofer &ite,ului coeren! %i unitate %i
&ta$ile%te imediat identitatea fiecrei pa'ini n cadrul &ite,ului. En plu&, folo&irea repetat a acelora%i
elemente 'rafice de nai'are mre%te eficien!a $roC&erului deoarece ace&tea &unt ncrcate la
de&c+iderea primei pa'ini %i &tocate n memoria cache, fr a mai fi nece&ar ncrcarea lor la fiecare
nou pa'in.
In&trumentele de nai'are tre$uie & fie c(t mai u%or de n!ele& %i localizat. 3ac folo&i!i o $ar de
nai'are pla&a!i,o acolo unde izitatorii &unt o$i%nui!i & o caute) n partea &uperioar a pa'inilor, n
&t(n'a &au n dreapta pa'inii. Dolo&i!i o $ar &ecundar de nai'are la $aza pa'inii, acea&ta l a a"uta
pe izitator & &e depla&eze ntr,o alt &ec!iune a &ite,ului fr a mai fi neoit & deruleze pa'ina n &u&
p(n la $ara principal de nai'are.
3ac &ite,ul e&te de dimen&iuni mari e&te o idee $un & crea!i o pa'in &pecial care & reprezinte
+arta &ite,ului %i & pla&a!i le'tura ctre ea n $ara principal de nai'are din cadrul fiecrei pa'ini.
*cea&ta a permite izitatorului & &e orienteze n interiorul &ite,ului, oricare ar fi pa'ina prin care a
intrat n &ite. =arta a con!ine le'turi ctre toate pa'inile, 'rupate conform modului de or'anizare al
&ite,ului.
3e a&emenea, dac folo&i!i o &tructur ierar+ic, e&te util prezen!a unui in&trument &uplimentar
care & informeze izitatorul a&upra locului unde &e afl n cadrul &ite,ului %i a cii prin care a a"un&
aici, n maniera urmtoare)
#ome / &agina de nivel unu / &agina de nivel doi / &agina curent)
(n'ormaii!e despre site i pa&ina curent*
Diecare pa'in a &ite,ului tre$uie & con!in indica!ii priind &copul %i o$iectiele &ite,ului precum
%i o$iectiele &pecifice acelei pa'ini. En faza de planificare a!i colectat informa!ii priind pu$licul !int,
a!i formulat &copul %i o$iectiele ntre'ului &ite. *ce&tea reprezint elementele fundamentale n "urul
crora e&te con&truit &ite,ul. Diecare pa'in a &a are drept &cop ndeplinirea unuia dintre o$iectie.
*ce&te informa!ii tre$uie comunicate n pa'ina re&pecti. Uizitatorul nu tre$uie for!at & '+icea&c ce
rol are o anumit pa'in n cadrul &ite,ului.
?ulte &ite,uri prezente pe 4e$ con!in o pa'in &pecial cu informa!ii de contact precum %i o
pa'in care con!ine informa!ii de&pre &ite %i creatorii &i 9pa'ina 0bout;. >otu%i e&te recomandat ca
ace&te informa!ii & fie inclu&e %i n &u$&olul pa'inilor din interiorul &ite,ului. #&te $ine & include!i aici
informa!ii de&pre copIri'+t, data ultimei reactualizri a pa'inii, de&pre or'aniza!ia &au compania creia
i e&te dedicat &ite,ul 9dac e&te cazul; %i informa!ii de contact 9adre& de mail, numr de telefon, adre&
po%tal;.
Dr&ani.area pa&inii cu aEutoru! ta<e!e!or
7nul dintre a&pectele pe care tre$uie & le ae!i n edere la con&truirea unei pa'ini e&te rezolu!ia
ecranului. ?ul!i dintre izitatorii pa'inii folo&e&c rezolu!ia de 800-600 de pi-eli. . pa'in cu l!imea
mai mare de 600 de pi-eli poate face nece&ar derularea pe orizontal a pa'inii, care pentru mul!i
izitatori e&te o$o&itoare %i incomod. 3in ace&t moti, e&te recomandat ca tot con!inutul pa'inii & fie
inclu& ntr,un ta$el de $az cu l!imea de 600 de pi-eli.
Tabelul de ba&%
0on&truirea pa'inii ncepe cu un ta$el de $az, cu l!imea 9Cidt+; de 600 de pi-eli, o linie %i o
coloana. *linia!i ta$elul la mar'inea din &t(n'a &au centrat n pa'in. 2eta!i c+enarul 9$order; la
aloarea /0/ pentru a,l face inizi$il pentru izitator. Entre'ul con!inut al pa'inii a fi pla&at n
interiorul ace&tui ta$el.
*&i'ura!i, c a!i &etat culoarea de fond 9$'color; pentru pa'ina dumneaoa&tr. .p!iunea
/default/ la& $roC&erul & controleze culoarea fondului. 3e cele mai multe ori acea&ta e&te al$, dar
e&te mai $ine & ae!i certitudinea c ea a aprea la fel n orice $roC&er, a%a nc(t &eta!i
$'colorS/C+ite/ &au orice alt culoare dori!i.
En func!ie de felul cum dori!i & or'aniza!i &ite,ul %i de &copul ace&tuia e!i +otr unde dori!i &
pla&a!i $ara principal de nai'are.
4ara de navi-are n stn-a pa-inii
3ac a!i deci& & opta!i pentru pla&area $arei de nai'are n partea &t(n'a 9cea mai uzual
a%ezare;, e!i include n ta$elul de $az un ta$el cu 2 &au 3 coloane.
3ac folo&i!i un ta$el cu 2 coloane &eta!i di&tan!a ntre celule 9cellpaddin'; la aloarea /4/ pentru
a &pa!ia te-tul de mar'inea ta$elului. 6ute!i &pecifica l!imea celulelor fie n pi-eli fie n procente.
3ac folo&i!i un ta$el cu 3 coloane, coloana din centru poate fi folo&it ca /tampon/ , care a
&epara con!inutul coloanei din &t(n'a de con!inutul celei din dreapta. 2eta!i atri$utul $order al ta$elului
la /0/ pentru ca mar'inea & nu fie izi$il. .dat &ta$ilite ace&te atri$ute, pute!i adu'a n ta$el at(tea
linii c(te &unt nece&are &au pute!i include un alt ta$el n cel e-i&tent.
4ara de navi-are n partea superioara
6entru a con&trui o $ar de nai'are n partea de &u& a pa'inii, tre$uie & include!i n ta$elul de
$az un ta$el cu o &in'ura coloana. 2eta!i atri$utele cellpaddin' S /4/ %i $order S /0/. En prima linie a
ta$elului e!i introduce lo'o,ul &au titlul &ite,ului, n linia a doua e!i afi%a $ara de nai'are, iar pe
liniile urmtoare, con!inutul pa'inii.
4ara de navi-are n partea dreapta
#&te o a$ordare mai pu!in utilizat. 0el mai ade&ea e&te folo&it pentru pa'inile de tip catalo' de
produ&e, unde ima'inile %i de&crierea produ&elor &unt pla&ate n coloana din &t(n'a, care ocup cea mai
mare parte a &pa!iului.
Dolo&irea ta$elelor pentru or'anizarea con!inutului pa'inii e&te o practic foarte folo&it. >a$elele
or p&tra ima'inile %i te-tul acolo unde le,a!i pla&at. 6ute!i include %i alte ta$ele n interiorul celor pe
care le,a!i creat, n func!ie de modul n care &unt or'anizate informa!iile %i de a&pectul pe care dori!i &
l da!i pa'inii.
). Aree!i de desi&n
En proce&ul de creare a unui &ite pot aprea o &erie de 're%eli de de&i'n, cele mai multe datorate
nere&pectrii te+nicilor %i principiilor prezentate anterior.
:a&ini '*r* !e&*turi 82'und*turi29
7na dintre cele mai fru&trante &itua!ii n care &e poate '&i o per&oan care nai'+eaz pe 4e$
e&te o pa'in fr in&trumente de nai'are %i fr nici un indiciu priind &ite,ul cruia i apar!ine.
3e&i'ur, &ite,ul din care face parte pa'ina poate fi localizat o$&er(nd prima parte a adre&ei 75@ a
pa'inii, care apare n $ara de adre&e a $roC&erului. 3ar a for!a izitatorul & efectueze acea&t maner
e&te cu totul nerecomandat. 0el mai pro$a$il ace&ta nu &e a o&teni & caute pa'ina =ome a unui
a&emenea &ite ci l a pr&i definiti. #ita!i & crea!i a&emenea pa'ini.
6rezen!a unor /fundturi/ ntr,un &ite denot faptul c de&i'nerul nu a n!ele& caracterul permea$il
al 4e$,ului %i ideea c un izitator poate intra n &ite prin oricare pa'in a &a. 6ericolul con&truirii unor
a&tfel de pa'ini apare mai ale& n cazul &ite,urilor liniare multi,pa'in, n care de&i'nerul dore%te &
conduc izitatorii de,a lun'ul &ite,ului pe un tra&eu liniar, pre&ta$ilit. *cea&ta nu n&eamn c ace&t tip
de &ite,uri nu tre$uie folo&it, mai ale& dac informa!iile prezentate &unt adecate ace&tui mod de
prezentare. >re$uie n& acordat aten!ie in&trumentelor de nai'are care tre$uie a&tfel concepute nc(t
izitatorul & poat a"un'e cu u%urin! cel pu!in la pa'ina =ome. En plu&, informa!iile de&pre &ite %i
pa'ina curent nu tre$uie & lip&ea&c din &u$&olul fiecrei pa'ini.
. aria!ie a ace&tor pa'ini de tip /fundtur/ o con&tituie pa'inile =ome care ofer informa!ii
prea pu!ine &au lip&ite de &emnifica!ie. 3e&tul de de& pot fi nt(lnite pe 4e$ pa'ini =ome care nu ofer
nici un fel de indicii a&upra &tructurii &au con!inutului &ite,ului, fr a mai or$i de &copul %i o$iectiele
&ale. In&trumentele de nai'a!ie &unt a$&ente, prefer(ndu,&e folo&irea unor ima'ini &au te-te cu prea
pu!in &emnifica!ie pentru a realiza acce&ul n diferitele &ec!iuni ale &ite,ului. 6oate c e&te o a$ordare
aan'ardi&t, dar pentru marea ma"oritate a izitatorilor e&te neplcut & a"un' ntr,o a&emenea pa'in
a%a nc(t e&te mai $ine & re&pecta!i re'ulile cla&ice de de&i'n prezentate.
:a&ini 2uriae2
3ac pa'inile /fundtur/ ofer prea pu!ine indicii izitatorului, e-i&t %i reer&ul lor) pa'inile
/uria%e/. *ce&te pa'ini &unt ncrcate p(n la refuz cu informa!ii, li&te, ima'ini, linJ,uri %i alte
elemente. 6a'inile de ace&t fel ridic dou mari pro$leme)
>impul de acce&. ?ai ale& dac pa'ina con!ine foarte multe ima'ini, timpul de ncrcare
al pa'inii poate fi foarte mare
2uprancrcarea cu informa!ii. 3ac e!i pune prea mult informa!ie ntr,o &in'ur
pa'in izitatorul ace&teia nu a fi capa$il & o proce&eze.
#-i&t opinii care &pun c lun'imea unei pa'ini nu ar tre$ui & dep%ea&c un ecran pentru a &e
eita ca izitatorul & deruleze pa'ina pe ertical. . a&emenea cerin! e&te prea dra&tic %i poate fi
ade&ea n dezaanta"ul prezentrii e-plicite a informa!iilor. Dra'mentarea &u$iectului tre$uie & &e fac
n func!ie de lo'ica lui intern %i nu de re'uli ar$itrare cum e&te mrimea fere&trei $roC&erului.
#-i&t &itua!ii n care pa'inile lun'i ndepline&c cel mai $ine o$iectiele urmrite. 3e e-emplu, n
pa'inile de prezentare ale unor produ&e, pe un &ite comercial, pla&area de&crierii produ&ului pe dou &au
mai multe pa'ini rupe cur&iitatea prezentrii %i &e poate &olda cu pierderea unor poten!iali clien!i.
*nalo', dac pa'ina con!ine o li&t lun' de elemente nrudite, ruperea li&tei e&te ar$itrar %i
dezaanta"oa&. 6e de alt parte, a'lomerarea de informa!ii la nielul unei &in'ure pa'ini, mai ale& c(nd
ntre &ec!iunile pa'inii nu e-i&t o le'tur intrin&ec face ca pa'ina & apar ca un amal'am din care
izitatorul a e-tra'e cu 'reu informa!iile care l intere&eaz.
3ac e&te nece&ar & folo&i!i pa'ini foarte lun'i nu uita!i & oferi!i pe parcur&ul pa'inii ancore care
& conduc izitatorul la nceputul &ec!iunilor principale, precum %i n partea &uperioara, re&pecti
inferioar a pa'inii. 3ac pa'ina con!ine mult te-t nu o ncrca!i &uplimentar %i cu ima'ini &au cu
elemente multimedia deoarece timpul de acce& a cre%te foarte mult.
#xcesu! de e!emente mu!timedia
Dolo&irea fr di&cernm(nt a elementelor multimedia 9ima'ine, &unet, ideo; precum %i folo&irea
n e-ce& a celor mai noi te+nolo'ii 4e$ e&te ade&ea duntoare pentru &ite. 3ac adre&a!i unei
audien!e de&pre care pre&upune!i c nu di&pune de cone-iuni rapide, de ultimele er&iuni de $roC&ere
&au de aplica!iile nece&are e-ecutrii %i afi%rii corecte a unora dintre elementele din pa'inile &ite,ului,
e&te mai $ine & nu include!i ace&te elemente.
*&tfel, de%i aplica!iile create cu ?acromedia Dla&+ &unt &pectaculoa&e %i &e pot realiza efecte
&peciale deo&e$it de atractie, un a&tfel de fi%ier poate a"un'e cu u%urin! la dimen&iuni care dep%e&c 1
me'a$Ite, ceea ce ncetine%te con&idera$il iteza de ncrcare a pa'inii. En plu&, pentru izualizarea
corect a ace&tora, izitatorul tre$uie & de&carce plu',in,ul 2+ocJCae n cazul c(nd nu l are de"a
in&talat pe computerul propriu. #&te foarte neplcut pentru izitator & efectueze toate ace&te opera!ii
doar pentru a con&tata c informa!iile prezentate n acea&t form puteau fi tot at(t de $ine prezentate ca
te-t &au ima'ini o$i%nuite.
. &olu!ie de compromi& e&te aceea ca, &imultan cu includerea unui a&tfel de fi%ier, & &e pun la
di&pozi!ia izitatorului o op!iune de /eludare/ de tip /&Jip intro/ , atunci c(nd prezentrile &unt folo&ite
doar cu rol de &pla&+ &creen, ca ecran de de&c+idere a &ite,ului, de e-emplu.
En plu&, folo&irea prezentrilor Dla&+ fr ca ace&tea & &erea&c unui &cop $ine definit nu face
altcea dec(t & di&tra' aten!ia izitatorului de la &u$iectul &ite,ului.
. alt 're%eal de&tul de de& nt(lnit e&te includerea fi%ierelor audio, fr ca ace&tea & ai$
le'tur cu &copul &ite,ului. #-i&t de&i'neri care con&ider c furnizarea unei muzici de fundal
&pore%te atractiitatea &ite,ului. En realitate &e nt(mpl e-act contrariul. En afara &itua!iei c(nd &u$iectul
&ite,ului e&te le'at de muzic &au c(nd fi%ierele de &unet in & completeze informa!iile prezentate n
pa'ini, muzica de fundal nu face altcea dec(t & ncetinea&c ncrcarea pa'inilor %i &,l irite pe
izitator, prin repetare. 3ac e&te nece&ar & include!i fi%iere de &unet, l&a!i izitatorului po&i$ilitatea
de a opta pentru de&c+iderea lor prin intermediul unei le'turi, mai ale& n cazul n care e&te or$a
de&pre fi%iere de mari dimen&iuni.
#&te recomandat & proceda!i la fel %i n cazul fi%ierelor ideo, aertiz(ndu,l pe izitator c pa'ina
re&pecti &e a de&c+ide mai 'reu.
:a&ini ine&a!e
6a'inile ine'ale con!in informa!ii foarte diferite ca importan! &au ca niel de detaliere. 0el mai
ade&ea &e confrunt cu acea&t pro$lem pa'inile =ome n care &unt inclu&e linJ,uri ctre noile pa'ini
create n proce&ul de dezoltare a &ite,ului. #&te foarte u%or & cde!i n 're%eala de a include noile
le'turi n pa'ina =ome fr a mai re&pecta ierar+ia &ta$ilit n etapa de or'anizare a &ite,ului.
3ac &ite,ul la care lucra!i nece&it crearea unor noi pa'ini tre$uie & ae!i n edere pla&area
ace&tora la nielele &pecifice o$iectielor pe care le au precum %i ncadrarea la locul cuenit n &tructura
de le'turi a &ite,ului prezentat n pa'ina =ome.
Le&*turi '*r* semni'icaie
6rezen!a le'turilor fr &emnifica!ie e&te, de a&emenea, o 're%eal de de&i'n foarte frecent.
6ro$a$il a!i zut de nenumrate ori n pa'inile 4e$ formulri ca acea&ta)
6entru mai multe informatii apa&ati L* +refS/info.+tml/MaiciLG*M
0u(ntul /aici/ nu are n ace&t conte-t, nici o &emnifica!ie. . formulare mult mai potriit ar
putea fi urmtoarea)
6uteti o$tine aici L* +refS/info.+tml/Mmai multe informatiiLG*M
. alt &itua!ie e&te aceea n care documentul indicat nu are le'tur, din punct de edere al
con!inutului, cu pa'ina care con!ine referin!a la el. >oate linJ,urile din cadrul unei pa'ini tre$uie &
e-tind con!inutul informa!ional al pa'inii, izitatorul care urmeaz o le'tur a%tept(ndu,&e ca acea&ta
& i ofere informa!ii &uplimentare de&pre &u$iect.
En aceea%i cate'orie &e pot ncadra %i le'turile /$anale/ , care nu m$o'!e&c prin nimic
informa!iile prezentate. 3e e-emplu o con&truc!ie ca acea&ta)
1ine ati enit in L* +refS/def.+tml/M6a'inaLG*M =ome a 7nier&itatii
unde documentul def)html con!ine defini!ia de dic!ionar a cu(ntului /pa'ina/ , e&te o le'tur
/$anal/ deoarece n ace&t conte-t informa!ia oferit nu &ere%te nici unui &cop. 6e de alt parte, ntr,o
pa'in al crei &u$iect e&te oca$ularul &pecific 4e$,ului, o a&tfel de defini!ie ar fi foarte important.
7n alt tip de le'turi fr &emnifica!ie apare atunci c(nd fra'mentarea informa!iei e&te du& la
e-trem prin folo&irea unui numr foarte mare de linJ,uri. 2u$iectul e&te &ec!ionat n pr!i foarte mici iar
izitatorul e&te o$li'at & parcur' un mare numr de pa'ini n ad(ncime pentru a pune cap la cap
informa!iile %i a n!ele'e &en&ul lor. . a$ordare de ace&t tip rupe cur&iitatea &u$iectului %i mre%te
efortul de a n!ele'e %i a&imila al izitatorului.
:a&ini de.or&ani.ate i stridente
*ce&t tip de pa'ini &ufer din pricina lip&ei de or'anizare a con!inutului. 0+iar dac &u$iectul e&te
mpr!it n &ec!iuni, unit!ile de informa!ie &unt mpr%tiate n pa'in fr o &i&tematizare preala$il
care & focalizeze aten!ia izitatorului ctre punctele importante. *ce&te pa'ini au prea multe culori,
ade&ea &tridente, tipuri diferite de fonturi, &au ima'ini de fundal foarte ncrcate. *de&ea e&te folo&it n
e-ce& anima!ia fr nici ca acea&ta & ai$ reo &emnifica!ie &au le'tur cu con!inutul pa'inii %i muzica
de fundal. *&pectul 'eneral al unor a&tfel de pa'ini e&te la fel de &trident %i !iptor ca un decor de $(lci.
+. -e.umat
0on&truirea unui &ite nece&it, pe l(n' o $un cunoa%tere a lim$a"ului =>?@, re&pectarea unor
principii %i folo&irea unor te+nici con&acrate. 2ite,ul tre$uie & fie orientat ctre izitator, ctre
n!ele'erea %i &ati&facerea neoii de informa!ie a ace&tuia. 3e&i'nul tre$uie & men!in un ec+ili$ru
ntre te+nolo'iile folo&ite %i eficien!, a&i'ur(nd o itez conena$il de ncrcare a pa'inilor %i o
izualizare $un n cele mai populare dintre $roC&ere. *&pectul &ite,ului tre$uie & fie n concordan!
cu &copul %i o$iectiele &ale, eit(nd e-ce&ele de orice fel.
6rincipiile care tre$uie re&pectate n etapa de de&i'n &unt)
*&ocierea &emnifica!iilor
?en!inerea competitiit!ii
Dolo&irea eficient a re&ur&elor
0oncentrarea pe nece&it!ile utilizatorului
En!ele'erea permea$ilit!ii 4e$,ului
0rearea unui a&pect plcut, coerent %i fluent
2u&!inerea interactiit!ii
2u&!inerea nai'a!iei
2trate'ia de con&truire a &ite,ului poate urma una dintre metodele stop,doCnZ , s$ottom,upZ &au
metoda incrementrii.
En proce&ul de de&i'n, prima etap o con&tituie &c+i!a &ite,ului care tre$uie & reflecte &tructura
ace&tuia) liniar, ierar+ic &au de tip 4e$.
Informa!ia tre$uie fra'mentat a&tfel nc(t & nu dep%ea&c puterea de a&imilare a utilizatorului.
@e'turile dintre pa'ini tre$uie & fie &ta$ilite a&tfel nc(t & permit o parcur'ere lo'ic a
con!inutului &ite,ului, iar in&trumentele de nai'are tre$uie adaptate modului n care &unt create
le'turile dintre pa'ini, oferind indicii izuale a&upra func!iei lor. #&te recomandat ca in&trumentele de
nai'are & ai$ acela%i a&pect n toate pa'inile.
Fere&pectarea principiilor %i te+nicilor de de&i'n poate & conduc la con&truirea unor pa'ini de
tip sfundturaZ , a unor pa'ini prea ncrcate cu informa!ii &au, dimpotri, a unor pa'ini ine'ale. 3e
a&emenea, printre 're%elile de de&i'n care pot aprea &unt le'turile fr &emnifica!ie, e-ce&ul de
elemente multimedia, pa'inile dezor'anizate &au &tridente.
Capitolul 1>
Testarea site$ului
#tapa de de&i'n a &ite,ului &e de&f%oar n &tr(n& le'tur cu cea de implementare, de &criere a
codului =>?@ pentru pa'inile care fac parte din &ite. >otu%i, proce&ul de creare a &ite,ului nu &e poate
con&idera nc+eiat n momentul finalizrii tuturor documentelor =>?@ care l formeaz. 7rmeaz o
etap ade&ea tratat oarecum &uperficial, de%i, ca %i celelalte, e&te e&en!ial pentru con&truirea unui &ite
de calitate) etapa de te&tare.
1. Corectarea pa&ini!or
0orectarea e&te unul din cele mai ne'li"ate a&pecte al pu$lici&ticii 4e$. Doarte frecent pute!i
nt(lni pa'ini 4e$ cu multiple 're%eli de orto'rafie, 'ramatic, formatare, c+iar %i n cazul &ite,urilor
importante. 6a'inile cu 're%eli de orto'rafie, e-primri ne'li"ente, reflect cel pu!in o in&uficient
e-perien! n ace&t domeniu %i, de ce nu, c+iar lip& de re&pect pentru izitator.
0orectarea e&te ne'li"at n primul r(nd datorit u%urin!ei e-traordinare cu care te-tele pot fi
pu$licate electronic. 6ute!i crea o pa'in ntr,un editor de te-t %i acea&ta poate fi pu$licat la doar
c(tea minute dup terminarea ei, daca &unte!i &uficient de rapid. 0ei mai mul!i nu or petrece ore n %ir
erific(nd e-i&ten!a eentualelor 're%eli 'ramaticale n te-tul editat, a%a cum ar face,o, pro$a$il, n
cazul unei tiprituri cla&ice, dac ace&te erori i,ar co&ta o aere pentru a retipri 10.000 de copii ale
documentului. 3ac a!i fcut o 're%eal, tre$uie doar & de&c+ide!i fi%ierul, & efectua!i corectura %i & l
repu$lica!i pe 4e$, unde toat lumea l poate edea. #&te acea&ta o &trate'ie corect< 3e&i'ur c nu.
0alitatea muncii pe care a!i depu&,o la crearea &ite,ului define%te calitatea ace&tuia. ?ii, poate
milioane de utilizatori ar fi putut de"a citi pa'ina n cauz. #&te mult mai &implu & petrece!i c(tea ore
corect(nd te-tul, pentru a eita ca ulterior & lupta!i zile, &ptm(ni &au luni n %ir pentru a
rec(%ti'a credi$ilitatea.
Iat c(tea metode care pot a"uta & corecta!i mai eficient pa'inile 4e$)
)4. 7tiliza!i corectoare automate pentru orto'rafie %i 'ramatic pentru a de&coperi erorile
plicti&itoare, fcute din 'ra$ &au din o$o&eal.
)). Fu ae!i niciodat ncredere a$&olut n ace&t tip de corectoare pentru a de&coperi erorile
mai &u$tile. 3up utilizarea lor, ncrca!i pa'ina n $roC&er %i citi!i,o de c(tea ori.
)+. 6entru &ite,urile de dimen&iuni mari citi!i documentele n mod repetat, cut(nd de
fiecare dat un anumit tip particular de erori
),. @a prima lectur concentra!i, aten!ia pe a&pectul 'eneral al documentului %i pe
de&coperirea erorilor de formatare, a itemurilor lip& &au a erorilor de pla&are a ace&tora.
)3. @a a doua lectur erifica!i lo'ica %i cur&iitatea ideilor %i a cuintelor.
)4. @a a treia lectur, corecta!i minu!io& ntre'ul te-t erific(nd &inta-a, orto'rafia,
punctua!ia.
+;. Entotdeauna erifica!i ima'inile, fi'urile %i +r!ile din pa'in. *&i'ura!i, c ele au
le'tur cu te-tul de referin!, %i erifica!i te-tul e-plicati care n&o!e%te ima'inea.
#-i&t %i erori ce or per&i&ta uneori c+iar dup toate ace&te erificri. 3ac le de&coperi!i dup
pu$licarea &ite,ului, nu mai rm(ne dec(t & le corecta!i atunci.
2. Testarea pa&ini!or
.dat terminat erificarea corectitudinii te-tului din pa'ini din punct de edere 'ramatical %i
lo'ic, urmeaz etapa de te&tare a pa'inilor. En acea&t faz tre$uie & concentra!i pe te&tarea
corectitudinii etic+etelor =>?@, a linJ,urilor, a ima'inilor %i a celorlalte elemente inclu&e n pa'ini.
Testarea !in>-uri!or
0ea mai &impl cale de te&tare a linJ,urilor e&te de a ncrca pa'ina n $roC&er %i de a da clicJ pe
fiecare linJ.
Uerifica!i func!ionarea tuturor ancorelor din pa'ini care tre$uie & acce&eze &ec!iunea din pa'in
core&punztoare identificatorului ancorei. *ten!ie la &ec!iunile multiple ale aceleia%i pa'ini etic+etate cu
acela%i identificator. *cea&t 're%eal poate produce rezultate &tranii. 3aca $roC&erul &are la o alt
&ec!iune a pa'inii dec(t cea a%teptat, erifica!i mai nt(i identificatorul ancorei n &ec!iunea pe care
$roC&erul o afi%eaz.
Uerifica!i apoi modul de func!ionare a le'turilor ctre alte documente, at(t n cadrul &ite,ului c(t
%i n afara &a, re&pecti aliditatea lor %i dac pa'inile acce&ate &unt cele potriite. 3ac o anumit
pa'in nu poate fi de&c+i&, erifica!i &inta-a linJ,urilor %i anume)
+1. corectitudinea protocolului &pecificat
+2. e-ten&ia fi%ierului
+3. e-i&ten!a &im$olului p
.ten#ieH
En 7FIW, &im$olul tilda 9p; e&te utilizat pentru a &pecifica directorul de &tart 9#ome director$; al
utilizatorului al crui nume urmeaz dup ace&t &im$ol.
Dolo&ind &im$olul p pute!i referi la o pa'in 4e$ a&tfel)
+ttp)GGCCC.&erer.comGputilizatorGpa'ina.+tml
:ro<!eme n 'uncionarea pa&ini!or =e<
#&te po&i$il ca pa'inile 4e$ create & nu arate n $roC&er a%a cum au fo&t ele proiectate.
5ezolarea unor a&tfel de deficien!e poate fi dificil, deoarece c(nd &crie!i codul =>?@ ae!i doar o
ima'ine mental a modului cum ar tre$ui & arate pa'ina. . &olu!ie pentru a face proce&ul de depanare
mai u%or ar fi & izualiza!i pa'ina cu a"utorul $roC&erului pe m&ur ce o con&trui!i. 6ute!i izola
dier&ele &ec!iuni ale pa'inii pentru a erifica func!ionarea fiecreia dintre ele.
0ele mai multe 're%eli care pot aprea &e datoreaz erorilor n codului &ur&a al pa'inii. 2inta-a
codului e&te de o importanta critic n =>?@. 0ele mai comune pro$leme de &inta-a care apar &unt)
+4. a$&en!a etic+etelor de nc+idere L G M
+). mperec+erea etic+etelor =>?@
++. '+ilimelele / /
+,. im$ricarea etic+etelor
Iat c(tea dintre pro$lemele cu care pute!i confrunta)
B caracteristic% de ,oratare a,ectea&% o secven#% ai are de te"t dect era prev%&ut.
2 pre&upunem c a!i folo&it ntr,o &ec!iune a pa'inii una dintre etic+etele de titlu, L=3M de
e-emplu. @a izualizarea pa'inii n $roC&er con&tata!i c nu doar te-tul pe care dorea!i &,l eiden!ia!i
e&te formatat a&tfel, ci o parte mai mare a te-tului din pa'in.
. a&tfel de &itua!ie e&te proocat de)
+3. *$&en!a unuia dintre caracterele / L / &au / M /
+4. *$&en!a etic+etei de nc+idere LG=3M
,;. Im$ricarea defectuoa& a etic+etelor =>?@
. etic+et de nc+idere creia i lip&e%te unul dintre caracterele /L /&au /M/ nu a fi interpretat
corect de $roC&er, prin urmare formatul nu a lua &f(r%it dec(t n punctul n care $roC&erul nt(lne%te
caracterul re&pecti. *cea&ta poate determina afi%area ntr,un format 're%it a unui te-t.
3ac ace&t element e&te un titlu, tot te-tul dintre etic+eta de de&c+idere a&ociat titlului %i cea mai
apropiat etic+et de nc+idere nt(lnit a fi afi%at ca titlu. 3aca ace&t element e&te te-t ancor, tot
te-tul dintre etic+eta de de&c+idere L*M %i prima etic+et de nc+idere nt(lnit a fi afi%at ca o le'tur
9de culoare al$a&tru %i &u$liniat;.
. etic+et de nc+idere a$&ent &au o mperec+ere inadecata de etic+ete a prooca pro$leme
&imilare. 7neori pro$lemele &unt dificil de urmrit %i rezolat. 7rmrirea unei pro$leme &e face n &en&
de&cendent, defec!iunea tre$uie cutat acolo unde ncepe &ecen!a de cod eronat %i nu unde &e
&f(r%e%te.
B parte din te"tul pa-inii nu este a,iat
>e-tul &au o$iectele care lip&e&c din pa'ina pot fi depi&tate prin urmrirea '+ilimelelor / / %i a
etic+etelor 're%it nc+i&e %i care con!in adre&e 75@.
3ac pa'ina con!ine '+ilimele de de&c+idere n interiorul unei etic+ete, %i cele de nc+idere
tre$uie & &e re'&ea&c n aceea%i etic+et. . etic+et din care lip&e&c '+ilimelele de nc+idere nu e&te
interpretat corect %i ace&t lucru poate produce rezultate $izare. 3ac etic+eta creia i lip&e&c
'+ilimelele e&te o etic+et ancor, ntre' te-tul de la primele '+ilimele p(n la urmtoarele nt(lnite ar
putea fi interpretat de $roC&er ca parte dintr,o adre& 75@.
. alt eroare care poate prooca acela%i efect e&te nc+iderea 're%it a etic+etei con!in(nd o
adre& 75@. 3ac o a&tfel de etic+et nu e&te nc+i& core&punztor, $roC&erul ar putea interpreta orice
te-t care urmeaz, p(n la etic+eta de nc+idere core&punztoare, ca fiind parte a adre&ei 75@.
6ro$lema &e rezol prin e-aminarea etic+etelor aflate naintea por!iunii de te-t care nu e&te
afi%at. #roarea ar putea proeni de la orice etic+et care con!ine '+ilimele &au o adre& 75@.
A+ilimelele utilizate n editorul de te-t cu a"utorul cruia &crie!i codul =>?@ tre$uie & fie ntotdeauna
n &tandard *20II. 7nele editoare de te-t utilizeaz a%a,numitele /&mart Tuote&/ , n care '+ilimele de
de&c+idere arat diferit fa! de cele de nc+idere. 3ac proce&orul de te-t cu care lucra!i are acea&t
po&i$ilitate, ea tre$uie dezactiat, deoarece ace&t tip de '+ilimele, nefiind n &tandardul *20II, nu or
func!iona corect n =>?@.
.,iarea de,ectuoas% a ,oratului
En cazul c(nd formatul afi%at de $roC&er nu e&te cel a%teptat erifica!i mai nt(i compati$ilitatea
dintre $roC&er %i &tilul de caractere &pecificat n codul =>?@. 1roC&erul tre$uie & fie capa$il &
afi%eze &tilul ale&. *tunci c(nd &unt folo&ite &tiluri lo'ice, $roC&erul e&te ultima in&tan! n decizia
priind &tilul caracterelor afi%ate.
. metod rapid de erificare a e-i&ten!ei unei pro$leme de compati$ilitate e&te de a afi%a
pa'inile utiliz(nd $roC&ere diferite, dintre care unul & poat afi%a n mod &i'ur &tilul de caracter
utilizat. 3ac acel $roC&er afi%eaz te-tul incorect, &e face erificarea codului =>?@. 3ac te-tul e&te
afi%at corect, atunci e-i&t o incompati$ilitate cu celelalte $roC&ere.
En codul =>?@, pro$lema poate fi le'at de o im$ricare defectuoa& a etic+etelor. Uerifica!i
modul cum au fo&t im$ricate etic+etele de formatare din &ec!iunea de pa'in a&ociat cu eroarea
re&pecti. *&tfel o con&truc!ie de tipul urmtor)
L#?MUa multumim ca ati izitat L2>5.FAM6a'inaLG#?Mnoa&traLG2>5.FAM
nu a func!iona corect, deoarece etic+etele L#?M %i L2>5.FAM &unt im$ricate eronat.
3. -e.umat
3up etapele de planificare, de&i'n %i implementare urmeaz etapa de te&tare a &ite,ului.
En acea&t etap &e realizeaz)
,1. 0orectarea pa'inilor din punct de edere orto'rafic %i 'ramatical
,2. >e&tarea le'turilor din cadrul &ite,ului
,3. >e&tarea le'turilor e-terne
,4. 3epanarea 're%elilor care !in de &inta-a codului =>?@
#tapa de te&tare e&te deo&e$it de important pentru impre&ia 'eneral l&at de &ite,ul
dumneaoa&tr. 7n &ite cu orto'rafie ne'li"ent, cu 're%eli de e-primare, cu le'turi nefunc!ionale
poate ndeprta izitatorii, oric(t de aloroa&e ar fi informa!iile prezentate n interiorul &u.
Capitolul '@
Publicarea site$ului
En &f(r%it, &ite,ul dumneaoa&tr e&te finalizat. *!i parcur& toate etapele, de la planificare, la
de&i'n %i implementare, ,a!i a&i'urat c toate elementele func!ioneaz corect. * enit momentul
pu$licrii pe 4e$ a &ite,ului, a&tfel nc(t rezultatele muncii dumneaoa&tr & fie cuno&cute de to!i
aceea care or izita pa'inile. En etapa pu$licrii pe 4e$ a &ite,ului interin mai mul!i pa%i)
2ta$ilirea unui nume de domeniu
2ta$ilirea &ererului 4e$ pe care a fi &tocat 9'zduit; &ite,ul
.r'anizarea %i denumirea fi%ierelor n conformitate cu cerin!ele &ererului 'azd
>ran&ferul fi%ierelor
1. Gume!e de domeniu
6entru ca &ite,ul dumneaoa&tr & ai$ o identitate pe 4e$ ae!i neoie de un nume de domeniu
pentru el. Fumele de domeniu al &ite,ului a face parte din adre&a 75@ a fiecrei pa'ini %i a oferi &ite,
ului o prezen! di&tinct pe 4e$.
3omeniile principale de pe 4e$ pot fi de mai multe tipuri)
comerciale .com
educa!ionale .edu
'uernamentale .&o"
furnizorii de &ericii de re!ea .net
in&titu!ii non,profit .or&
domeniile core&punztoare !rilor lumii .ro, etc
6entru a o$!ine un nume de domeniu pentru &ite ae!i la di&pozi!ie dou po&i$ilit!i)
domeniu pltit
domeniu 'ratuit
@omeniu p!*tit
3ac &ite,ul pe care l,a!i creat apar!ine firmei dumneaoa&tr &au unei firme client &au dac dori!i
& ae!i o prezen! &ta$il %i credi$il pe 4e$ cea mai $un op!iune e&te & ae!i un domeniu pltit.
Enre'i&trarea unui domeniu nu e&te foarte co&ti&itoare %i a a&i'ura &ite,ului dumneaoa&tr o identitate
&erioa& %i credi$il. En plu&, odat ce &unte!i proprietarul unui domeniu pute!i & &c+im$a!i loca!ia &ite,
ului 9&ererul 4e$ pe care e&te 'zduit; fr ca acea&ta & nece&ite &c+im$area domeniului.
6re!ul pentru nre'i&trarea unui nume de domeniu ariaz de&tul de mult. 7na dintre cele mai
conena$ile oferte poate fi '&it la adre&a +ttp)GGCCC.10,domain&.com care ofer nre'i&trarea unui
nume de domeniu pentru 10 723 anual precum %i o &erie de di&count,uri pentru nre'i&trarea pe
perioade mai lun'i. 3ac dori!i un domeniu rom(ne&c 9.ro; pute!i o$!ine informa!ii la adre&a
+ttp)GGCCC.rnc.ro. 6entru nre'i&trarea unui a&tfel de domeniu &e percepe o ta- unic de 61 723 9pre!
ala$il la data &crierii ace&tei cr!i; fr alte ta-e anuale.
En cazul c(nd opta!i pentru un domeniu pltit, adre&a 75@ a &ite,ului a fi de forma
+ttp)GGCCC.dumneaoa&tra.com
@omeniu &ratuit
.$!inerea unui nume de domeniu 'ratuit e&te foarte &impl. #-i&t multe companii on!line care
ofer a&tfel de domenii %i, n plu&, %i &pa!iu de 'zduire pentru &ite. 3ac &unte!i nceptor %i dori!i &
te&ta!i cuno%tin!ele de 4e$ de&i'n nou n!ate, nu e&te o idee rea & con&trui!i un &ite /de pro$/
folo&ind pentru ace&ta un domeniu %i un &ericiu de +o&tin' 'ratuite. En afara ace&tei &itua!ii, de%i poate
prea ale'erea ideal, un domeniu 'ratuit poate aduce multe dezaanta"e &ite,ului dumneaoa&tr.
6rima "udecat de aloare a&upra unui &ite e&te fcut pe $aza numelui &u de domeniu. En cazul
unui domeniu 'ratuit adre&a 75@ a &ite,ului a fi)
+ttp)GGCCC.numefirma'azda.comGpdumneaoa&tra &au
+ttp)GGCCC.dumneaoa&tra.numefirma'azda.com
Uizitatorii &ite,ului or %ti imediat c nu de!ine!i propriul domeniu %i folo&i!i un &ericiu de
+o&tin' 'ratuit ceea ce a afecta &erio& credi$ilitatea. ?ai ale& dac &ite,ul e&te unul de afaceri,
folo&irea unui domeniu %i &ericiu de +o&tin' 'ratuit e&te cu totul contraindicat. En plu&, firmele care
ofer ace&t 'en de &ericii, impun afi%area unor $annere pu$licitare care di&tra' aten!ia izitatorilor de
la con!inutul &ite,ului %i mre&c timpul de ncrcare al pa'inilor.
2. Ser"iciu! de &*.duire =e< 8=e< /ostin&9
Enainte de a pu$lica &ite,ul pe 4e$ e&te nece&ar o ealuare a nece&it!ilor de acce&, pentru a
determina ce fel de cont &e potrie%te &ite,ului dumneaoa&tr. 6lec(nd de la pre&upunerea c de!ine!i
de"a o cone-iune la Internet, nu om intra n amnunte priind ale'erea unui furnizor de &ericii
Internet 9I26 j 'nternet +ervice &rovider;. >otu%i, n cazul c(nd nc nu de!ine!i o cone-iune &au dori!i
& &c+im$a!i proider,ul actual, recomandm & &tudia!i cu aten!ie ofertele principalilor furnizori de
&ericii. *(nd n edere c nu e!i mai limita doar la &impla nai'are pe 4e$ &au la &c+im$ul de
emailuri ci e!i dori & tran&fera!i %i & ntre!ine!i un &ite 4e$ nece&it!ile dumneaoa&tr or cre%te.
3in ace&t moti e&te $ine & informa!i a&upra unor detalii te+nice cum ar fi l!imea de $and, mediul
de tran&mi&ie 9anten &atelit, ca$lu cu fi$re optice, unde radio;, ce tip de &erer folo&e%te, a&i&ten!a
te+nic oferit, dac ofer 'zduire pentru pa'ini 4e$.
.p!iunile pentru 'zduire &unt urmtoarele)
In&talarea unui &erer 4e$ propriu
7tilizarea &ererului 4e$ al proiderului de &ericii Internet
7tilizarea unui &erer 4e$ apar!in(nd unei firme care ofer &ericii de +o&tin'
(nsta!area unui ser"er =e< propriu
In&talarea unui &erer 4e$ propriu e&te cea mai co&ti&itoare &olu!ie, dar ea ofer n &c+im$
aanta"e &emnificatie. 3i&pun(nd de o cone-iune dedicat &e pot furniza &ericii 4e$ 24 de oreGzi
utilizatorilor din lumea ntrea'. Ue!i di&pune de un control complet a&upra &ererului 4e$ %i pute!i
pu$lica orice dori!i. 6ute!i confi'ura &ererul %i pentru alte &ericii, cum ar fi D>6, Aop+er, >elnet,
&cripturi 0AI, etc. 6ute!i de a&emenea aea propriul domeniu care a &ta$ili o prezen! di&tinct pe
4e$. *dre&a 75@ a aea forma urmtoare)
+ttp)GGCCC.firmaVdumneaoa&tra.comG
Entruc(t co&turile nece&are ec+ipamentului +ardCare, cone-iunii la Internet, confi'urrii %i
ntre!inerii unui &erer propriu dep%e&c po&i$ilit!ile unui utilizator o$i%nuit, nu om in&i&ta a&upra
ace&tei &olu!ii.
ti!i.area ser"eru!ui =e< a! pro"ideru!ui (S:
7tilizarea &ererului 4e$ al proiderului dumneaoa&tr de Internet e&te o op!iune economic.
?ul!i dintre furnizorii de &ericii Internet ofer n cadrul contului de acce& %i un anumit &pa!iu pe
&ererele proprii pe care pute!i pla&a &ite,ul, fr a percepe ta-e &uplimentare. 3in pcate, &pa!iul
oferit e&te de o$icei mic, de ordinul 1,3 ?$ %i nu &unt oferite facilit!i pentru crearea de pa'ini
dinamice. 6entru a o$!ine facilit!i &uplimentare a tre$ui & plti!i n plu&.
0u toate c fi%ierele &tandard, contul de email %i fi%ierele pu$licate pe 4e$ utilizeaz ace&t &pa!iu,
2,3 ?$ &unt de re'ul &uficien!i pentru a men!ine un &ite mode&t ca dimen&iuni. 0ontul la I26 e&te
acce&i$il pe $aza unei cone-iuni dial,up care permite o le'tur cu o itez de p(n la 56 X$p&.
Enainte de a de&c+ide un a&tfel de cont, tre$uie erificate detaliile priind &pa!iul de &tocare, ta-ele
pentru &pa!iul adi!ional, n mod curent 2m pentru 1 ?$, eentualele alte ta-e. >re$uie erificat de
a&emenea di&poni$ilitatea altor &ericii, cum ar fi D>6, Aop+er, >elnet, &cripturi 0AI, care ar tre$ui &
poat fi utilizate 'ratuit, n cazul n care e-i&t.
7n cont la un proider I26 e&te o op!iune economic dar, n acela%i timp, limitat. Fu e-i&t
control al &ererului 4e$, &ericiile adi!ionale rm(n(nd la latitudinea proiderului. Fu e!i aea
propriul domeniu, iar adre&a 75@ a arta a&tfel)
+ttp)GGCCC.proider.comGpdumneaoa&tra
ti!i.area unui ser"iciu de /ostin&
0ea mai $un &olu!ie din punctul de edere al raportului &ericiiGpre! o reprezint folo&irea unui
&ericiu de +o&tin' pltit. .fertele de pe pia!a rom(nea&c &unt numeroa&e %i ariate ca pre!. Enainte de
a face o ale'ere e&te $ine & face!i un &tudiu comparati al ace&tora n priin!a &pa!iului pu& la
di&pozi!ie, al modului de tran&fer al fi%ierelor, al traficului impu& precum %i al prezen!ei dier&elor
facilit!i) &cripturi 0AI, $aze de date, email per&onalizat, etc. Fu tre$uie & pierde!i din edere c &ite,ul
dumneaoa&tr &e poate dezolta a&tfel nc(t &pa!iul de &tocare rezerat la nceput poate deeni
in&uficient.
7tiliz(nd un &ericiu de +o&tin' adre&a 75@ a &ite,ului a aea forma urmtoare)
+ttp)GGCCC.dumneaoa&tra.com
3e a&emenea e!i $eneficia %i de una &au mai multe adre&e de email per&onalizate de tipul)
adre&ahdumneaoa&tra.com
Dolo&irea &ericiilor unei firme de +o&tin' permite ca, odat ce de!ine!i propriul nume de
domeniu, & tran&fera!i &ite,ul pe &ererul 4e$ al firmei %i & $eneficia!i de o prezen! &ta$il pe
4e$. Dirmele de +o&tin' ofer uneori %i nume de domenii pentru clien!ii lor n& e-i&t ri&cul ca dac
+otr(!i & renun!a!i la &ericiile acelei firme & pierde!i domeniul. 3in ace&t moti e&te mai $ine &
trata!i &eparat cele dou pro$leme.
3. Dr&ani.area i denumirea 'iiere!or
3e%i acea&t etap e&te intrin&ec proce&ului de con&truire a &ite,ului, o om di&cuta n ace&t
capitol, deoarece acum e&te momentul c(nd o $un or'anizare a directoarelor, &u$directoarelor %i
fi%ierelor deine deo&e$it de important.
Dr&ani.area directoare!or i 'iiere!or
#&te foarte $ine & or'aniza!i fi%ierele care fac parte din &ite pe computerul dumneaoa&tr e-act
a%a cum ele or fi or'anizate pe &ererul 4e$. 2ererul 4e$ are un director /rdcin/ 9root; unde or
fi &tocate toate fi%ierele &ite,ului. Dolderul unde e!i &toca ace&te fi%iere pe computerul per&onal a "uca
rolul directorului /rdcin/ al &ererului. En directorul /rdcin/ a fi pla&at fi%ierul care a con!ine
pa'ina /+ome/ a &ite,ului, fi%ier denumit de o$icei index)html &au index)htm.
3ac &ite,ul e&te de mici dimen&iuni 9ntre 5 %i 10 pa'ini; pute!i pla&a toate fi%ierele n acela%i
director. 3ac &ite,ul e&te mai mare, e&te recomandat & crea!i pentru fiecare &ec!iune principal a &a
c(te un &u$director care a con!ine fi%ierele a&ociate acelei &ec!iuni. 2u$directoarele pot con!ine la
r(ndul lor c(te un fi%ier inde-. *tunci c(nd e!i tran&fera fi%ierele de pe computerul dumneaoa&tr pe
&ererul 4e$ e!i putea & tran&fera!i ntre'ul &u$director cu fi%ierele con!inute n el. 3e a&emenea
acea&t metod a face %i ntre!inerea &ite,ului mult mai u%oar.
. alt pro$lem e&te locul unde e!i &toca ima'inile. 6ractica &tandard e&te de a crea un
&u$director &pecial n directorul /rdcin/ unde & pla&a!i toate ima'inile din &ite. 3ac proceda!i
a&tfel e&te e-trem de important & crea!i un &u$director &imilar cu aceea%i ampla&are %i pe computerul
dumneaoa&tr. 0alea de la pa'ina care apeleaz o ima'ine la ima'inea re&pecti tre$uie & fie aceea%i
%i pe computerul dumneaoa&tr %i pe &erer, altminteri ima'inile nu &e or afi%a dup ce &ite,ul a fo&t
tran&ferat pe &erer.
. alt ariant de &tocare a ima'inilor e&te crearea unui &u$director de&tinat ima'inilor, pla&at n
&u$directorul fiecrei pa'ini. 0u acelea%i precau!ii le'ate de calea corect ctre ima'ini, acea&t metod
func!ioneaz $ine, $a c+iar m$unt!e%te iteza de ncrcare a ima'inilor n pa'ini. 3ezaanta"ul
con&t n faptul c ade&ea e&te nece&ar & re!ine!i mai multe copii ale aceleia%i ima'ini n diferite
&u$directoare, n func!ie de pa'inile unde e&te folo&it.
Ceri'icarea nume!or 'iiere!or
@a mutarea fi%ierelor de pe computerul dumneaoa&tr pe &ererul 4e$ &e impune erificarea
numelor fi%ierelor care tre$uie & fie compati$ile cu &i&temul pe &unt mutate.
. aten!ie deo&e$it tre$uie acordat denumirii %i e-ten&iei fi%ierelor. Fu are importan! dac
opta!i pentru e-ten&ia )html &au )htm. >ot ce tre$uie e&te & fi!i con&ecent cu e-ten&ia alea& de,a
lun'ul ntre'ului &ite. 3e a&emenea, tre$uie & ae!i n edere c n &i&temele 7FIW, cele mai de&
folo&ite ca &erere 4e$, denumirile fi%ierelor &unt case!sensitive. . pa'in denumit m$page)html nu
e&te totuna cu pa'ina M$&age)html. 6entru a eita confuziile folo&i!i pentru denumirea fi%ierelor numai
litere mici.
4. Trans'eru! 'iiere!or
>ran&ferul fi%ierelor care compun &ite,ul de pe computerul propriu pe &ererul 4e$ e&te o
opera!iune relati &impl, care con&t n copierea fi%ierelor pe &erer n loca!ia de&tinat &ite,ului
dumneaoa&tr. 7nele dintre firmele de +o&tin' a&i'ur o aplica!ie &pecial de&tinat tran&ferului
fi%ierelor, dar cea mai utilizat metod de tran&fer e&te prin intermediul unui client D>6.
7n client *TP 9.ile %ransfer &rotocol; e&te o aplica!ie prin intermediul creia &e poate realiza
tran&ferul fi%ierelor de pe un &i&tem pe altul. 6ute!i copia fi%iere de pe computerul per&onal pe un alt
computer 9opera!ie denumit Cpload; dup cum pute!i prelua fi%iere de pe un alt computer, pe
computerul per&onal 9opera!ie denumit Donload;. 0ele mai folo&ite pro'rame D>6 &unt Cute.%&
9+ttp)GGCCC.cuteftp.com; %i "+G.%& 9+ttp)GGip&Citc+.com;. .dat ce a!i in&talat pe computerul
dumneaoa&tr un client D>6, ,a!i nre'i&trat numele de domeniu %i ae!i un cont la un &ericiu de
'zduire totul e&te pre'tit pentru tran&ferul fi%ierelor care compun &ite,ul pe &ererul 'azd.
6entru a realiza tran&ferul fi%ierelor, n 'eneral a tre$ui & urma!i urmtorii pa%i)
0onectarea la Internet
3e&c+iderea pro'ramului D>6. Ue!i o$&era o &erie de ca&ete de dialo' n care tre$uie
introdu&e informa!iile nece&are pro'ramului pentru a realiza cone-iunea cu computerul 'azd.
6entru a face cone-iunea cu &ererul tre$uie & furniza!i pro'ramului adre&a D>6 a +o&t,ului
dumneaoa&tr. *cea&ta e&te furnizat de firma de +o&tin' la de&c+iderea contului. 3e a&emenea,
pro'ramul a cere numele de utilizator %i parola pe care le,a!i &ta$ilit la de&c+iderea contului. Fu
uita!i & de,$ifa!i op!iunea 0non$mous din meniul (ogin. 6rin introducerea numelui de utilizator %i a
parolei e!i cpta acce& la contul dumneaoa&tr %i e!i putea intra n directorul unde or fi pla&ate
fi%ierele &ite,ului.
. alt informa!ie care tre$uie furnizat pro'ramului e&te tipul fi%ierelor tran&ferate. En 'eneral
pentru fi%ierele =>?@ &e folo&e%te op!iunea 0+C'' iar pentru celelalte fi%iere, op!iunea binar$. ?ai
&implu, pute!i ale'e op!iunea 0utoDetect prin care pro'ramul determin &in'ur tipul fi%ierului %i modul
cum a face tran&miterea lui.
0elelalte ca&ete de dialo' pot fi l&ate necompletate &au cu &etrile pree-i&tente.
3up furnizarea ace&tor informa!ii pro'ramul D>6 a realiza cone-iunea cu &ererul 'azd.
2electarea fi%ierelor pe care dori!i & le copia!i. Ue!i o$&era c ferea&tra aplica!iei D>6 e&te
mpr!it n dou) ntr,o parte ae!i directoarele de pe computerul per&onal, n cealalt parte
directoarele de pe computerul 'azd. 2electa!i directorul care con!ine fi%ierele dumneaoa&tr %i da!i
comanda de tran&fer n directorul care e&te de&tinat pe &ererul 'azd.
3ac folo&i!i &cripturi 0AI a&ociate &ite,ului tre$uie & le acorda!i o aten!ie &pecial. 0ele mai
multe &erere nece&it in&talarea &cripturilor 0AI ntr,un &u$director &pecial numit cgi!bin, aflat n
directorul dumneaoa&tr. 6entru pla&area %i &etarea corect a &cripturilor tre$uie & lua!i le'tura cu
admini&tratorul &ererului 'azd care a oferi indica!iile nece&are.
6e unele &i&teme de operare modul de acce&are al fi%ierelor e&te &trict definit, permi!(nd &au
re&tric!ion(nd citirea, &crierea &au e-ecutarea fi%ierelor de ctre diferi!i utilizatori. *ce&te facilit!i &unt
&etate de re'ul prin drepturile de acces atri$uite fi%ierelor. 3in ace&t moti, erificarea modului de
&etare a fi%ierelor e&te e-trem de important. 3e e-emplu, n &i&temele 7FIW modul 705 &emnific
faptul c fi%ierele pot fi citite, modificate &au e-ecutate de proprietarul lor, n reme ce al!i utilizatori nu
le pot dec(t citi &au e-ecuta 9dup caz;.
3up tran&ferul fi%ierelor, pot aprea pro$leme de dier&e tipuri. 7neori, pa'inile pu$licate nu pot
fi acce&ate deloc, &cripturile nu func!ioneaz, etc. 6rimul lucru care tre$uie erificat n ace&t caz e&te
dac fi%ierele &e afl n directoarele potriite. *poi tre$uie erificate permi&iunile de acce& pentru
directoare %i fi%iere, e-ten&iile fi%ierelor, fi%ierele inde-. En cazul c(nd apar pro$leme, cea mai &i'ur
cale de rezolare a lor e&te & lua!i le'tura cu admini&tratorul &ererului 'azd %i & i cere!i informa!ii
c(t mai complete priind drepturile de acce& pentru directoare, calea corect ctre &cripturile folo&ite %i,
n 'eneral, &etrile nece&are pentru $una func!ionare a &ite,ului.
). -e.umat
En etapa de pu$licare pe 4e$ a &ite,ului tre$uie parcur%i urmtorii pa%i)
2ta$ilirea unui nume de domeniu pentru &ite) 'ratuit &au pltit.
A&irea unui &ericiu de 'zduire conena$il &u$ raportul &ericiiGpre!.
.r'anizarea %i denumirea directoarelor %i fi%ierelor n conformitate cu cerin!ele
&i&temului &ererului 'azd.
>ran&ferul fi%ierelor, cea mai folo&it metod de tran&fer fiind prin D>6.
Cteva cuvinteXla ,inal
*m a"un&, iat, la finalul cltoriei noa&tre. *e!i, acum, toate informa!iile %i in&trumentele
nece&are con&truirii unui &ite atr'tor, func!ional %i eficient. 6ute!i ncepe prin a con&trui o pa'in
per&onal pe care o pute!i pla&a pe un &erer 'ratuit, pentru a e-er&a cuno%tin!ele do$(ndite. 3ar ace&ta
e&te doar primul pa&.
3e&i'nul 4e$ e&te unul dintre domeniile cu un mare poten!ial de dezoltare. >ot mai multe firme
dore&c &ite,uri pe 4e$, fie pentru a derula afaceri prin intermediul lor, fie doar pentru a,%i prezenta
oferta de produ&e %i &ericii. . carier n ace&t domeniu e&te o ale'ere cu mari %an&e de &ucce& pentru
orice t(nr. ?ai mult, de%i pe 4e$,ul rom(ne&c acea&t zon e&te nc &la$ dezoltat, pute!i &
ini!ia!i propria afacere care & &e deruleze e-clu&i pe Internet.
*cea&t carte a urmrit & ofere informa!iile nece&are unui &tart corect n domeniul de&i'nului
4e$. 3ar nu tre$uie & opri!i aici. 3e&i'nul %i pro'ramarea 4e$ reprezint domenii a&te iar cartea
noa&tr a atin& doar elementele de $az ale ace&tora. 6ute!i continua n!(nd & pro'rama!i n 6erl
pentru a crea &cripturi 0AI, pute!i n!a Baa2cript, Baa &au un lim$a" de intero'are pentru $azele de
date &tocate pe &erer. 6ute!i deeni familiar cu unul din editoarele puternice de =>?@ 9?acromedia
3reamCaer e&te cel mai utilizat n ace&t moment; &au pute!i n!a & &tp(ni!i foarte $ine un pro'ram
de 'rafic 90orel3raC &au *do$e 6+oto&+op de e-emplu; pentru a crea 'rafic 4e$. 6o&i$ilit!ile &unt
nenumrate.
En lumea 4orld 4ide 4e$ totul e&te ntr,o continu mi%care %i dezoltare. *cea&t carte ,a oferit
fundamentele pro'ramrii n =>?@. 0ontinua!i & n!a!i, perfec!iona!i, continuu %i &ucce&ul iitor
e&te a&i'urat.