Sunteți pe pagina 1din 190

http://ciobanu.cich.md/lectii_view.php?

id=1#t9
Cuprins
Cteva cuvinte...nainte
!"# $i %orld %ide %eb
Capitolul 1 &rimii pa$i
Ce este !"#?
'tandarde $i e(tensii !"#
Con)inut $i aspect ntr*un document !"#
+neltele de care ave)i nevoie
Cum s, proceda)i?
Conven)ii de nota)ie
-e.umat
Capitolul / 'tructura unui document !"#
1. Ce este un document !"#?
/. 0tichete de structur,
1. 2olosirea corect, a etichetelor
3. -e.umat
4. !est
Capitolul 1 Culori
1. 'istemul de de5inire a culorilor
/. Coresponden)a dintre codurile he(a.ecimal $i .ecimal
1. Culoarea 5undalului
3. Culoarea te(tului
4. Culoarea le6,turilor
7. 8le6erea culorilor
9. Culori :si6ure:
;. -e.umat
9. !est
Capitolul 3 2onturi
1. 2ormatarea caracterelor
/. 8ccentuarea te(tului
1. 0tichete lo6ice $i etichete 5i.ice
3. -e.umat
4. !est
Capitolul 4 2ormatarea te(tului
1. !recerea la un rnd nou
/. !itlurile <eadin6s=
1. &ara6ra5ele
3. &re5ormatarea te(tului
4. Centrarea te(tului
7. 85i$area te(tului pe o sin6ur, linie
9. >locul ?@ABC
;. #inii ori.ontale
9. Anserarea unei adrese po$tale
1D. Anserarea unui citat
11. Anserarea caracterelor speciale
1/. 'u6estii privind aspectul te(tului
11. -e.umat
13. !est
Capitolul 7 #e6,turi <#inE*uri=
1. 8dresa +-#
/. 8drese absolute $i adrese relative
1. 'tabilirea le6,turilor
3. 8ncore * le6,turi n cadrul aceleia$i pa6ini
4. #e6,tura c,tre o pa6in, a5lat, n acela$i director <5older=
7. #e6,tura c,tre o pa6in, locali.at, n alt director <5older=
9. #e6,tura c,tre pa6ini e(terne
;. 8le6erea culorilor pentru le6,turi
9. +tili.area po$tei electronice <e*mail=
1D. #e6,turi c,tre 5i$iere oarecare
11. @eschiderea pa6inilor re5erite printr*o le6,tur,
1/. Crearea unei bare secundare de navi6are
11. -e.umat
13. !est
Capitolul 9 Ama6ini $i elemente multimedia
1. 2ormatele 5i$ierelor 6ra5ice
/. Cteva metode de ob)inere a ima6inilor
1. Anserarea unei ima6ini
3. @imensionarea ima6inii
4. 8linierea ima6inii $i a te(tului
7. Ama6ini 5olosite ca 5ond <bacE6round= al pa6inii
9. Ama6ini 5olosite ca le6,turi
;. Ama6inile miniaturale <thumbnails=
9. Ama6inile video
1D. 'unetele
11. 'u6estii privind 5olosirea ima6inilor $i elementelor multimedia
1/. Ama6inile $i timpul de nc,rcare al pa6inii
11. -e.umat
13. !est
Capitolul ; #iste
1. #iste neordonate
/. #iste ordonate
1. Ambricarea listelor
3. #iste de de5ini)ii
4. -e.umat
7. !est
Capitolul 9 !abele
1. Crearea unui tabel
/. 8linierea tabelului n pa6in,
1. @imensionarea unui tabel
3. 'pa)ierea celulelor unui tabel
4. @imensionarea celulelor unui tabel
7. 8linierea con)inutului unei celule
9. @e5inirea culorilor pentru un tabel
;. !itlul unui tabel
9. Capul de tabel
1D. !abele de 5orme oarecare
11. Celule 5,r, con)inut
1/. Frupuri de coloane
11. 8tribute pentru aspectul chenarului unui tabel
13. !abele imbricate
14. -ecomand,ri privind 5olosirea tabelelor
17. -e.umat
19. !est
Capitolul 1D Cadre <2rames=
1. @ocumentul de de5inire a cadrelor
/. Cadre imbricate
1. Controlul aspectului unui cadru
3. >are de derulare
4. &o.i)ionarea documentului ntr*un cadru
7. Cadre interne
9. @eschiderea documentelor n alte cadre
;. 'u6estii privind 5olosirea cadrelor
9. -e.umat
1D. !est
Capitolul 11 2ormulare <2orms=
1. Ce este un 5ormular?
/. Crearea unui 5ormular
1. 0ticheta ?AG&+!C
3. 0tichetele ?'0#0C!C $i ?H&!AHGC
4. 0ticheta ?!0I!8-08C
7. Balidarea datelor
9. -e.umat
;. !est
Capitolul 1/ 'cript*uri CFA
1. Ce este CFA?
/. !rans5erul datelor
1. 0(ecu)ia script*ului
3. 'tructura unui script
4. 0(emple de script*uri
7. Anstalarea interpretorului &erl $i a aplica)iei &%'
9. -e.umat
Capitolul 11 Java'cript
1. Ce este Java'cript?
/. Cum poate 5i inclus un script n pa6in,?
1. "odul de e(ecu)ie al script*ului
3. Ce se poate reali.a cu Java'cript?
4. -e.umat
Capitolul 13 2oi de stiluri <C''=
1. Ce este un stil?
/. !ipuri de 5oi de stiluri
1. 05ecte ob)inute cu aKutorul stilurilor
3. -e.umat
Capitolul 14 0lemente avansate de 6ra5ic,
1. Ama6ini hart,
/. Ama6ini animate
1. Ama6ini transparente
3. -e.umat
Capitolul 17 "otoare de c,utare $i metata6*uri
1. Ce este un motor de c,utare?
/. "etata6*uri
1. -e.umat
Crearea $i publicarea unui site
Capitolul 19 &lani5icarea
1. 2actori care nu pot 5i plani5ica)i
/. 0tapele plani5ic,rii site*ului
1. -e.umat
Capitolul 1; @esi6nul
1. &rincipiile desi6nului web
/. Hr6ani.area unui site
1. "etodolo6ia de construire a site*ului
3. !ehnici de desi6n web
4. Fre$eli de desi6n
7. -e.umat
Capitolul 19 !estarea
1. Corectarea pa6inilor
/. !estarea pa6inilor
1. -e.umat
Capitolul /D &ublicarea
1. Gumele de domeniu
/. 'erviciul de 6,.duire %eb <%eb hostin6=
1. Hr6ani.area $i denumirea 5i$ierelor
3. !rans5erul 5i$ierelor
4. -e.umat
Cteva cuvinte...la 5inal
8ne(a 1 Ande( etichete
8ne(a / Flosar
8ne(a 1 !abelul culorilor
Cteva cuvinte...nainte
Internetul reprezint, fr ndoial, mediul de comunicare al viitorului, un viitor care, n multe
pri ale lumii deja a nceput. El reprezint o veritabil revoluie panic i tcut, care rezid n
asocierea progresiv dintre informatic i mijloacele de comunicare, conducnd la o integrare
fascinant a tuturor mijloacelor tradiionale de comunicare: telefonie clasic i mobil, radio,
televiziune, transmisii de date, nregistrri audio i video. u aprut c!iar forme noi de comunicare,
utilizate cu entuziasm de milioane de oameni din lumea ntreag, cum sunt e"mail"ul i c!at"ul, care
deja au dobndit reguli proprii, o cultur i c!iar i un folclor propriu.
Internetul a produs totodat o e#traordinar democratizare a informaiei i comunicrii. $
cantitate literalmente uria de informaie, sub toate formele sale: te#t, imagini statice sau video, sunet,
adunate ntr"o %bibliotec% accesibil oricui, oricnd, de la orice calculator legat la reea, fa de care
c!iar i cele mai complete enciclopedii clasice par o glum. devenit o joac de copil comunicarea
direct, n timp real, cu verioara din &luj, cu prietenul din ustralia, cu firma furnizoare din 'razilia
sau cu banca din Elveia. (unt suficiente pentru toate acestea un computer, un modem i o linie
telefonic.
)ei Internetul i *orld *ide *eb cunosc o e#pansiune e#ponenial, se afirm totui c se afl
nc n faza copilriei. +aportndu"ne la o astfel de apreciere, am putea afirma c n +omnia Internetul
este nc n fa, dar cu un potenial de dezvoltare cert i rapid ascendent.
&u toate c foarte muli tineri manifest un interes i o desc!idere e#traordinare ctre orice
subiect legat de Internet, acest domeniu este cel mai adesea ignorat n licee, sau tratat cu
superficialitate. ,rogramele colare nu l abordeaz dect tangenial, prin urmare nu e#ist manuale
colare dedicate, iar lucrrile de specialitate la un nivel accesibil strlucesc prin absen. )esignul i
programarea *eb se afl ntr"o dezvoltare accelerat i constituie o orientare profesional cu un mare
potenial de succes, dar n mod parado#al, relativ puini tineri se ndreapt azi ctre aceste domenii.
-nul din motive l constituie, desigur, atenia insuficient acordat acestor ramuri ale informaticii n
nvmntul liceal, alturi de un contact direct cu Internetul e#trem de redus, limitat mai ales de
posibilitile te!nice i economice actuale ale colilor.
rgumentul principal care m"a determinat s scriu aceast carte a fost un sondaj realizat n rndul
elevilor unui liceu de informatic, sondaj ale crui rezultate au confirmat impresia iniial. .i anume
faptul c, n marea lor majoritate /0123, elevii i doresc s nvee nu doar s utilizeze Internetul, ci,
urmnd ndrzneala tipic vrstei, s devin o prezen activ n acest mediu de comunicare. &ei mai
muli i doresc acest lucru pentru a se e#prima pe sine, pentru a comunica lumii i n aceast form,
faptul c e#ist, c au caliti, dorine, aspiraii, talente, cunotine, gnduri, sentimente care merit s
fie cunoscute i de ceilali.
.i cum pot fi puse toate acestea n valoare ct mai eficient, ntr"un mod accesibil pentru milioane
de oameni din lumea larg, dac nu pe un site *eb4
(copul acestei cri, dedicate limbajului specific Internetului, 5678, i te!nicilor uzuale de
creare a unui site *eb, este s i nvee, nu doar pe tineri, ci pe toi cei care i doresc acest lucru, s i
creeze propriul site pe Internet, cu minimum de efort i costuri, i cu ma#imum de rezultate.
&artea nu i propune s fie o lucrare academic, un manual e#!austiv de 5678 i *eb design.
(ubiectele sunt e#trem de vaste i ar fi fost imposibil cuprinderea lor ntr"o singur lucrare. m dorit
s ofer o imagine de ansamblu asupra limbajului 5678, cu un marcat accent pe aspectele practice ale
utilizrii sale, precum i o trecere n revist a unora dintre cele mai folosite te!nici de programare care
e#tind posibilitile limbajului: script"urile &9I, :ava(cript, programarea cu ajutorul foilor de stiluri
&((.
)e asemenea, n partea a doua a crii am prezentat etapele procesului de construire a unui site
*eb i cteva dintre te!nicile uzuale de design *eb.
dresndu"se mai ales nceptorilor care stpnesc totui elementele de baz /utilizarea
computerului i sistemul de operare *indo;s, noiuni de editare de te#t i imagini3, cartea este scris
ntr"un limbaj care se dorete accesibil. <iecare noiune prezentat este nsoit de e#emple reprezentate
de secvene de cod 5678 ce ilustreaz modul ei de aplicare.
+ecomandarea noastr este ca cititorii s verifice personal toate aceste e#emple, deoarece numai
e#perimentnd pe cont propriu se poate ajunge la o bun nelegere i stpnire a efectelor codului
5678 asupra aspectului paginii *eb.
=nc!eiem cu sperana c aceasta carte va constitui un instrument de lucru util i c, la finalul ei
cititorii vor dobndi abilitatea de a construi, publica i menine un site propriu interesant, atrgtor i
perfect funcional. .i, de ce nu, ca o parte din ei s fac din aceast activitate o veritabil profesie.
Got, asupra terminolo6iei utili.ate
=ntruct anumii termeni din limba englez, specifici domeniului abordat n prezenta lucrare, au
intrat n limbajul curent ca atare, i vom utiliza i noi n aceast form. m optat pentru folosirea lor cu
statut de neologisme, n forma original, uneori cu forme fle#ionare ad"!oc, c!iar cu riscul de a fi
considerate drept %barbarisme% de ctre lingvitii puritani. =n definitiv, n acest fel au intrat n limbaj
termeni deja consacrai precum computer, tast, monitor, mouse, pixel, CDROM, modem, server, port,
ca s dm numai cteva e#emple.
,entru unii termeni am utilizat ambele forme aflate n circulaie, cum ar fi link legtur, font
caracter, tag etichet.
E#ist i autori care folosesc numai ec!ivalentele romneti ale acestor termeni. &u toate c
traducerea lor respect cel mai adesea sensul, aceste ec!ivalente nu au reuit s se impun n lumea
informaticii, nu de puine ori utilizarea lor conducnd, n mod parado#al, la confuzii sau nedumeriri.
/>u vorbim aici de tentativele ridicole, cum ar fi de pilda icoan, sau, nc i mai ru, iconi, utilizate
de unii autori pentru icon, care firete c nu pot avea vreo ans de succes.3
,rezentm n continuare o list a acestor termeni. E#plicaii asupra sensului lor se gsesc n te#t
i?sau n glosarul prezentat la sfritul crii.
brose
r
font site
director host,
hosting
tag
donlo
ad
icon template
e!mail link "eb
folder script
!"# $i %orld %ide %eb
=nainte de a ncepe prezentarea limbajului 5678, vom face cteva precizri despre semnificaia
conceptului %orld %ide %eb /ntr"o traducere apro#imativ, pnz de pianjen, cu sensul de reea,
e#tins n lumea larg3. ,recizrile ar putea prea inutile, dar realitatea este c dei foarte mult lume
vorbete despre *orld *ide *eb, puini tiu e#act ce reprezint. 7ai mult, datorit e#tinderii sale
e#poneniale i a e#traordinarei sale populariti, adesea noiunea este confundat cu cea de Internet.
*orld *ide *eb este ns doar o parte a Internetului.
Internetul e#ist de mai bine de treizeci de ani. 'azele acestuia au fost puse la sfritul anilor @AB,
ca urmare a unei iniiative a )epartamentului de prare al (tatelor -nite, care avea drept scop
realizarea unei reele robuste i fiabile de comunicaii ntre computere aflate la distan. +eeaua avea
rolul de a asigura un contact permanent ntre elementele sale componente, c!iar dac o parte din
legturi ar fi fost ntrerupte ca urmare a unui atac nuclear. -lterior, reeaua a ptruns n domeniul civil
i a fost adoptat rapid, iniial de lumea academic, mai apoi de companiile comerciale.
Internetul nu este altceva dect un ansamblu alctuit dintr"un numr enorm de reele de computere
interconectate, localizate pe toat suprafaa globului, care suport diverse pac!ete soft;are cum ar fi e"
mailul, grupurile de tiri /nesgroup3, protocoalele de transfer al fiierelor /<6,3, 9op!er i *orld
*ide *eb.
&u toate avantajele imense oferite de posibilitile de comunicare global a informaiilor ca i de
rapiditatea comunicrii, Internetul a rmas, vreme de dou decenii, doar apanajul ageniilor
guvernamentale i al mediilor tiinifice. 7otivul l"a constituit dezorganizarea sa iniial cvasi"total.
<olosirea unor standarde de comunicaie i a unor pac!ete soft;are foarte diverse reprezentau nite
bariere te!nologice aproape insurmontabile pentru utilizatorii obinuii. =n plus, informaiile accesibile
la acea vreme pe Internet erau prezentate sub forma unor simple fiiere te#t i nu n forma cunoscut
azi. )ezvoltarea e#ploziv pe care a cunoscut"o Internetul n ultimii zece ani a fost determinat de
apariia *orld *ide *eb.
*orld *ide *eb a luat natere n CD0D, ca urmare a eforturilor unor fizicieni ai &E+>
/8aboratorul European de <izica ,articulelor3 de a pune la punct un sistem standardizat pentru crearea
i distribuirea documentelor electronice oriunde pe glob, sistem care s permit integrarea tuturor
elementelor media: te#t, imagini, sunet. a cum dovedete imensa sa popularitate, *eb"ul s"a dovedit
a fi mediul ideal pentru distribuirea informaiilor ntr"o maniera e#tins i accesibil. 7otivul l
constituie faptul c *eb"ul asigur o interfa hLpermedia pentru informaii. 5Epermedia reprezint
variatele tipuri de informaie /te#t, imagini, fiiere audio i video3 care pot fi localizate oriunde pe glob,
mpreun cu legturile dintre ele. ,entru a transmite i a afia informaiile !Epermedia, *eb"ul
folosete un protocol de transfer /un set de reguli3 care este numit !!& /#$pertext %ransfer &rotocol,
protocol de transmitere a !Eperte#tului3.
)eci, n esen, *orld *ide *eb este o colecie imens de documente interconectate prin
intermediul Internetului, care folosete protocolul 566, pentru a afia elementele !Epermedia.
,entru a face posibil o asemenea performan, s"a impus necesitatea ca fiecare computer
conectat la Internet s fie identificat n mod unic, printr"un element numit adresa A& /'nternet &rotocol3.
dresa I, este format din patru numere, fiecare mai mic de FGG, desprite ntre ele prin punct /de
e#emplu CFH.A1.D.FBC3. =n vreme ce computerele lucreaz cu numere, oamenii prefer numele. )in
acest motiv, fiecrei asemenea adrese I, i s"a asociat i un nume. &um sunt sute de milioane de
computere n ntreaga lume, a veni cu un nume unic care s diferenieze un computer de celelalte pare
aproape imposibil. 6otui, s ne amintim c Internetul este o reea de reele. El este mprit n grupuri
numite domenii care, la rndul lor, sunt mprite n subdomenii. )atorit acestui fapt, c!iar dac un
computer poart un nume destul de comun, prin asocierea acestui nume cu domeniul i subdomeniile
din care face parte, se obine un nume unic de identificare al computerului respectiv.
$rganizarea domeniilor pe Internet respect un model ierar!ic. ,rimul nivel ierar!ic l constituie
diversele tipuri de organizaii. 6ot pe primul nivel se afl i domeniile corespunztoare rilor lumii, de
e#emplu uk, pentru 7area 'ritanie sau ro, pentru +omnia.
-rmtorul nivel ierar!ic l constituie organizaiile, firmele, instituiile care dein propriile domenii
i subdomenii.
Internetul conecteaz dou tipuri de computere: serverele, care furnizeaz documentele, i
clien)ii, care solicit i afieaz documentele pentru a fi vizualizate de utilizator.
,entru a accesa i afia documentele 5678, pe computerul client ruleaz aplicaii numite
browsere. -neori termenii server *eb i client *eb pot produce confuzii, deoarece se refer att la
computerele pe care ruleaz aceste aplicaii ct i la aplicaiile n sine. )in acest motiv, pentru aplicaia
client vom folosi termenul de broser, iar pentru aplicaia sau pac!etul de aplicaii care ruleaz pe
server, termenul de aplicaie server.
+elaia client"server pe care se bazeaz funcionarea *orld *ide *eb este facilitat de protocolul
de comunicaie 566,. Interaciunea dintre bro;serul *eb i serverul *eb ncepe cu o cerere din partea
clientului. plicaia client transmite o cerere ctre aplicaia server. ceast cerere poate consta n
transmiterea unui anumit document sau n efectuarea unei anumite tranzacii. plicaia server fie
ndeplinete cererea clientului, caz n care obiectul solicitat este transmis bro;serului, fie o refuz,
situaie n care bro;serul afieaz binecunoscutele mesaje de eroare %6!e page cannot be displaEed%
sau %<ile not found%.
&u alte cuvinte, procesul vizualizrii unei pagini *eb ncepe cu o cerere a bro;serului *eb ctre
serverul *eb. 'ro;serul transmite serverului detalii despre el nsui i despre fiierul pe care l dorete
prin intermediul unui header !!& de cerere /!eaderul este acea parte a unui pac!et de date care este
plasat naintea informaiilor efectiv transmise i care poate conine adresa sursei i a destinaiei,
verificri ale erorilor i alte cmpuri3. (erverul primete i analizeaz !eaderele 566, de cerere n
cutarea informaiilor relevante, cum ar fi numele fiierului care este solicitat i transmite napoi
fiierul cerut mpreun cu !eaderele 566, de rspuns. 'ro;serul folosete !eaderele 566, de rspuns
pentru a determina cum s afieze rezultatele obinute.
6rebuie s subliniem c bro;serele nu au nevoie de cone#iune la Internet ca s funcioneze.
,utei ncrca i afia cu ajutorul bro;serului dumneavoastr documente 5678 care sunt stocate pe
propriul !ard"disI. ceasta v d, printre altele, posibilitatea de a definitiva i testa documentele
5678 nainte de a le publica pe Internet, evitnd astfel prezentarea unor pagini nc nefinalizate, cu
erori, sau care funcioneaz defectuos.
Capitolul 1
&rimii pa$i

1. Ce este HTML?
!"# este o abreviere de la #$pertext Markup (anguage i reprezint sc!eletul oricrei pagini
de *eb. 5678 nu este un limbaj de programare. >u vei lucra aici cu variabile, e#presii, tipuri de date,
structuri de control. 5678 este un limbaj descriptiv, prin care sunt descrise elementele structurale ale
paginii de *eb: titlurile, listele, tabelele, paragrafele, legturile cu alte pagini, precum i aspectul pe
care l are pagina din punct de vedere grafic. =n fond, 5678 este modul n care i comunicam
bro;serului ce elemente dorim s introducem n pagina *eb i care este aspectul acestora.
2. Standarde i extensii HTML
5678 este un limbaK standardi.at, aceasta nsemnnd c orice bro;ser poate interpreta i afia
corect un document *eb. (inta#a de baz a limbajului 5678 este definit n versiunea !"# 1./. =n
prezent a fost lansat i versiunea 5678 J.B care se afl n curs de standardizare. )e la o versiune la
alta, limbajului 5678 i se aduga noi elemente. )e asemenea, fiecare tip de bro;ser />etscape
>avigator i Internet E#plorer, n particular3 folosete anumite elemente ne"standard, pentru a
mbunti capacitile limbajului. Etic!etele noi, care nu fac parte din versiunea standard poart
numele de e(tensii. =n general, bro;serele cele mai folosite, >etscape >avigator i Internet E#plorer
recunosc etic!etele 5678 H.F i o mare parte din cele nou introduse n 5678 J.B.
Este recomandat s evitai e#tensiile, n afara cazului cnd avei un motiv foarte serios pentru a le
folosi. ,entru utilizatorii bro;serelor care nu recunosc aceste e#tensii, anumite pri ale documentului
dumneavoastr pot deveni complet ilizibile.
'ineneles, e#tensiile pot afecta n grade diferite aspectul formal al paginii dumneavoastr. )e
e#emplu, folosirea e#tensiilor care in de aspectul liniilor orizontale incluse n pagin nu va afecta n
mod grav aspectul paginii n bro;serele care nu suport aceste e#tensii. &ele mai multe dintre acestea
vor ignora e#tensiile i vor afia o line orizontal standard. ,e de alt parte, e#tensiile care realizeaz
formatarea i alinierea te#tului i aspectul fonturilor pot face ca documentul s aib un aspect foarte
dezordonat n bro;serele care nu suport e#tensii de acest tip. (au, n cazurile cele mai grave, acea
parte a documentului poate s nu fie deloc afiat.
3. Coninut i aspect ntr-un document HTML
,entru a realiza documente *eb eficiente, cu impact asupra cititorului, i pentru a valorifica pe
deplin puterea limbajului 5678, trebuie s inei seama de o idee fundamental: 5678 este destinat
structurrii documentele i nu doar formatrii n vederea afirii lor.
5678 furnizeaz modaliti variate pentru a defini aspectul documentului: specificaii legate de
fonturi /tipurile de caractere3, de formatare a te#tului, de culori, etc. )esigur, aspectul formal este
important, cci el poate veni n beneficiul sau n detrimentul accesibilitii informaiilor prezentate.
6otui, nu aspectul formal, ci coninutul documentului primeaz. 5678 conine numeroase ci de
structurare a coninutului documentului fr a pune problema felului cum vor fi afiate elementele:
titluri, liste, paragrafe, imagini, etc. 6oate acestea sunt definite n limbajul 5678 fr a impune
bro;serului s le afieze ntr"un anumit mod. 'ro;serului i se las astfel posibilitatea de a afia
respectivele elemente n conformitate cu rolul pe care l au ele n structura documentului i nu
respectnd regulile impuse de creatorul documentului 5678.
7arele avantaj al abordrii bazate pe coninut fa de cea bazat pe aspect rezid n faptul c
paginile dumneavoastr vor fi vizualizate cu tipuri diferite de bro;sere, fiecare avnd versiuni diferite.
=n abordarea bazat pe aspect, dac bro;serul nu recunoate indicaiile de formatare specificate,
fie nu le e#ecut, fie le e#ecut eronat, astfel c structurarea paginii va avea de suferit.
=n abordarea bazat pe con)inut, indiferent cum va alege bro;serul s e#ecute indicaiile de
formatare, semnificaia elementelor din pagin va rmne nesc!imbat.
)e e#emplu, dac vei afia titlurile i subtitlurile din pagin folosind tipuri diferite de fonturi,
caractere cu stiluri variate: aldine /bold, sau ngroate3, cursive /italice, sau nclinate3, subliniate, etc.,
un bro;ser care nu recunoate aceste elemente ar putea afia titlurile n acelai mod n care afieaz
restul te#tului, astfel c semnificaia lor n pagin i"ar pierde relevana.
,e de alt parte, dac vei folosi etic!etele speciale pentru titluri, c!iar daca bro;serul nu le
recunoate, are posibilitatea de a evidenia totui titlurile n cea mai bun manier pe care o are la
dispoziie, astfel nct semnificaia lor pentru restul documentului se va pstra.
4. ne!te!e de care a"ei ne"oie
Instrumentele minime de care avei nevoie pentru a realiza documente 5678 sunt, n esen,
urmtoarele: un editor de te(t, cu ajutorul cruia s scriei documentul, un browser, prin intermediul
cruia s vizualizai aspectul i coninutul documentului, un editor 6ra5ic cu care s prelucrai
imaginile pe care le vei introduce n pagin i o cone(iune la Anternet.
#ditoru!
,entru a scrie documente 5678 avei la dispoziie trei posibiliti:
C. <olosirea unui simplu editor de te(t.
&el mai cunoscut i accesibil este >otepad"ul din *indo;s.
8ten)ieM
>u este recomandat s folosii un procesor de te#t comple# cum este 7icrosoft *ord, c!iar dac
acesta poate salva documentele n format 5678 /cu e#tensia )htm3, deoarece la salvarea documentelor
*ord"ul adaug automat la te#tul documentului dumneavoastr o mare cantitate de cod coninnd
informaii lipsite de relevan care ncarc inutil documentul i mrete dimensiunile fiierului.
C. <olosirea unui editor !"#.
cest tip de editoare dedicate ofer faciliti n scrierea codului, realizeaz corectarea
documentului din punct de vedere sintactic i c!iar scriu secvene de cod pentru anumite elemente pe
care dorii s le inserai n document.
F. <olosirea unui editor %N'A%NF /"hat *ou +ee 's "hat *ou ,et, n traducere liber
%ceea ce vezi la editare este ceea ce obii la vizualizare%3.
-n editor de tip *K(I*K9 permite alegerea i formatarea, cu ajutorul mouse"ului, a
elementelor pe care dorii s le includei n pagin: tabele, linI"uri, formulare, putei stabili tipul
fonturilor, culorile, aranjarea te#tului n pagina. ,e msur ce un anumit element este inserat, editorul
scrie n mod automat codul 5678 corespunztor, fr ca utilizatorul s fie nevoit s intervin asupra
lui. 6otui, dac avei cunotine de 5678 putei interveni la nivelul codului n orice manier dorii,
orice sc!imbare pe care o facei n cod, reflectndu"se automat n aspectul paginii.
,rintre profesioniti persist o controvers n privina tipurilor de editoare care ar trebui folosite
pentru a edita documentele 5678. =n esen, problema este aceasta: este mai bine s"i construieti
paginile folosind 5678 %pur%, adic scriind totul tu nsui, sau este de preferat s foloseti un editor de
tipul *K(I*K94 Editoare deosebit de puternice de acest tip: 7acromedia )ream;eaver, 7icrosoft
<ront ,age, &offe &up ca s dm numai cteva e#emple, par a nclina definitiv balana n favoarea
acestui tip de editare. Ele ofer facilitai avansate de editare a paginii, inclusiv posibilitatea de a crea
pagini dinamice i de a include script"uri :ava(cript sau applet"uri :ava. &u ajutorul lor se pot construi
site"uri e#trem de comple#e.
E#ist, de asemenea i editoare de tip %built"in%. cestea sunt cel mai uor de folosit i adesea
sunt puse la dispoziie de providerii care ofer i servicii gratuite de !osting /;;;.!ome.ro,
;;;.r!p.ro, etc.3.
Editoarele de acest tip ofer un numr /de obicei redus3 de template"uri /pagini preformatate3, i
doar cteva opiuni de editare: putei aduga te#t, modifica tipul fonturilor, culoarea fundalului i a
te#tului, forma butoanelor de navigare, putei include un numr prestabilit de imagini. )in pcate,
gradul de control asupra aspectului paginii este foarte redus. -tilizatorul este limitat la cteva opiuni,
iar numrul mic de template"uri puse la dispoziie face ca pagina s fie lipsita de originalitate.
i putea, atunci, s v ntrebai de ce mai este nevoie s nvai 5678 dac e#ist editoare
profesionale care scriu codul n locul dumneavoastr. =n fond, muli dintre ;eb designerii profesioniti
le folosesc, deoarece a scrie codul unui site %bE !and%, cu ajutorul unui simplu editor de te#t, este o
munca titanic i mare consumatoare de timp.
+spunsul este simplu: trebuie s cunoatei 5678 deoarece orict de performant ar fi un editor
*K(I*K9, mai devreme sau mai trziu v vei gsi n situaia de a interveni la nivelul codului. &ea
mai comun situaie este aceea n care, datorit multiplelor operaii de editare cum sunt mutarea,
copierea, tergerea elementelor, anumite pri ale paginii nu vor mai funciona corect.
)e obicei, interveniile necesare asupra codului pentru depanarea sa sunt minime i uor de
realizat... cu condiia s tii ce trebuie s facei. &u alte cuvinte, s tii 5678.
=n concluzie, oricare ar fi opiunea dumneavoastr, fie c vei folosi un editor de 5678 de tip
te#t, fie c vei folosi unul de tip *K(I*K9, pentru a putea construi documente *eb corecte i
funcionale este nevoie s stpnii bine limbajul 5678.
$ro%seru!
Evident, pentru a vizualiza documentele dumneavoastr avei nevoie de un bro;ser.
+ecomandarea noastr este s deinei cel puin dou dintre cele mai rspndite bro;sere, Internet
E#plorer i >etscape >avigator, de dorit ar fi c!iar cu versiuni diferite ale aceluiai bro;ser. 6estarea
paginilor dumneavoastr sub diferite bro;sere este o etap important naintea publicrii lor pe *eb.
)ei n anii de nceput ai *eb"ului problema aspectului paginilor n diferite tipuri de bro;sere era
vital, deoarece erau folosite o mare diversitate de bro;sere, fiecare tip realiznd afiarea paginilor n
maniera sa proprie, n prezent aceast problem i"a pierdut din importan. 7otivul este acela c
bro;serele Internet E#plorer au acaparat cea mai mare parte din pia, statisticile artnd c Internet
E#plorer este tipul folosit de DH2 dintre utilizatori iar >etscape >avigator de circa A2 dintre ei.
#ditoru! &ra'ic
)esigur, vei dori s introducei imagini n paginile dumneavoastr. ,entru a putea s prelucrai
imaginile n conformitate cu inteniile dumneavoastr i cu rolul lor n pagin avei nevoie de un editor
grafic.
>umrul editoarelor de acest tip este foarte mare, printre cele mai puternice i mai cunoscute
fiind &orel)ra; i dobe ,!otos!op. ,utei alege ns acel editor cu care suntei deja familiarizat,
c!iar dac mai puin performant, mai ales dac pentru nceput nu dorii s facei prelucrri foarte
comple#e ale imaginilor.
Conexiunea !a (nternet
(pre deosebire de primele trei instrumente, cone#iunea la Internet nu este absolut esenial n
etapa de construire a documentului 5678. a cum spuneam, documentele 5678 se pot construi i
vizualiza local, pe propriul computer. &u toate acestea, e#istena unei cone#iuni Internet v va ajuta
foarte mult n procesul de nvare, i nu numai.
,e de"o parte deoarece pe *eb vei gsi nenumrate e#emple, i bune i rele, pe care le putei
studia. =n plus, vei avea acces la o cantitate uria i n continu cretere de resurse, documentaie i
produse care v vor ajuta cu siguran la construirea paginilor dumneavoastr. .i, n fine, accesul la
Internet este esenial n etapa de testare a legturilor cu pagini e#terne.
). Cum s* procedai?
,entru a folosi eficient informaiile din aceast carte iat mai jos cteva indicaii n privina
modului n care v putei organiza activitatea:
&reai"v n folderul M$ Documents /sau ntr"o alta locaie aleas de dumneavoastr3 un folder de
lucru numit "ork.
)esc!idei editorul de te#t n care ai ales s lucrai /ar fi de dorit ca pe parcursul procesului de
nvare s folosii un simplu editor te#t, de e#emplu >otepad3.
(criei /editai3 fiecare e#emplu pe care l gsii aici.
(alvai"l n folderul dumneavoastr cu numele indicat n blocul L6I68EM i e#tensia )html. ,utei
folosi att e#tensia )html ct i e#tensia )htm dar este bine ca odat ce ai ales o anumit e#tensie s fii
consecvent n folosirea ei. )enumii"v fiierele cu litere mici.
8ten)ieM
Editorul de te#t -otepad salveaz fiierele cu e#tensia implicita %)txt%. )e aceea cnd salvai este
necesar s precizai n mod e#plicit e#tensia dorit /)html sau )htm3
&nd vei salva fiierul creat n >otepad s"ar putea s constatai c restul de fiiere 5678 pe care
le"ai salvat anterior nu apar n fereastr. ,entru a le vedea, desc!idei meniul .ile/+ave 0s))), iar n
fereastra desc!is selectai din list 0ll files.
)esc!idei cu bro;serul utilizat fiierul 5678 /.ile/ Open/ 1rose3 pentru a vedea cum arat
pagina *eb descris n fiierul dumneavoastr.
)up fiecare modificare pe care o facei n fiierul 5678 nu uitai s"l salvai, altminteri
sc!imbrile fcute nu se vor reflecta n aspectul final al paginii.
,entru a observa felul cum modificrile pe care le facei n codul 5678 sc!imb aspectul
paginii, trebuie s apsai butonul Refresh2Reload al bro;serului.
,entru a putea s vizualizai cu uurin aspectul paginilor dumneavoastr este bine s avei
desc!ise permanent att editorul de te#t n care scriei documentul 5678 ct i bro;serul cu care l
vizualizai.
+. Con"enii de notaie
5678 nu este un limbaj case!sensitive, adic nu face distincia ntre literele mici i cele
mari/majuscule3. ceasta nseamn c indiferent cum scriem etic!etele, cu litere mari sau cu litere
mici, ele vor fi corect interpretate de bro;ser. )in acest motiv pe parcursul acestei lucrri vom utiliza o
convenie de notaie n care etic!etele /tag"urile3 5678 sunt scrise cu majuscule iar atributele asociate
acestora sunt scrise cu litere mici pentru o mai bun difereniere i evideniere a acestora.
)esigur c n documentele pe care le scriei putei respecta aceast convenie sau putei scrie cu
un singur tip de litere, dup cum v este mai uor.
,este tot n cadrul te#tului, unde apar etic!ete, atribute sau valori ale acestora am folosit caractere
&ourier >e; pentru a diferenia elementele de limbaj de restul te#tului.
)e asemenea, vei observa c, n e#emplele prezentate, codul 5678 este scris indentat, adic
aliniat la diverse nivele. &a i n cazul etic!etelor, acest lucru nu are importan pentru bro;ser.
Indentarea v este util doar dumneavoastr, pentru a diferenia i urmri mai uor diversele elemente
pe care le includei n document. 6otui, dac n cazul etic!etelor putei opta pentru orice variant dorii
n privina scrierii lor, indentarea este recomandat c!iar i programatorilor cu e#perien. -n cod
neindentat este foarte greu de citit i de depanat, n cazul apariiei unor erori.
,. -e.umat
*orld *ide *eb este o colecie imens de documente interconectate prin intermediul
Internetului, care asigur o interfa !Epermedia pentru informaii.
,entru a transmite i afia documentele, *orld *ide *eb folosete protocolului de comunicaie
566,. <uncionarea *orld *ide *eb se bazeaz pe relaia client"server. &lienii sunt bro;serele *eb
iar serverele sunt serverele *eb.
8imbajul 5678 realizeaz descrierea documentelor *eb. ,rin intermediul su i se comunic
bro;serului ce elemente fac parte din pagina *eb i care este aspectul acestora. Este recomandat
crearea unor documente 5678 orientate ctre coninut i nu ctre aspect.
,entru a crea documente 5678 avei nevoie de un set minimal de instrumente: un editor de te#t,
un bro;ser, un editor grafic i o cone#iune la Internet.
Capitolul /
'tructura unui document !"#


1. Ce este un document HTML?
-n document !"# nu este altceva dect un fiier te#t care, pe lng te#tul propriu"zis ce va
aprea n pagin, conine i o serie de elemente speciale, denumite etichete, sau marcaje /tags, n limba
englez3.
Got,
6oate celelalte elemente, de tip multimedia, care nsoesc documentul 5678, cum sunt sunetul,
imaginile video, grafica, etc., nu fac parte din structura acestuia. )ocumentul 5678 include referine
la aceste elemente, prin intermediul unor etic!ete speciale, care indic bro;serului modul n care ele
vor fi ncrcate i integrate n pagina *eb.
Etic!etele nu sunt instruciuni n sensul cunoscut al noiunii, ele avnd doar rolul de a comunica
bro;serului semnificaia i modul de afiare al elementelor incluse, privind aspectul te#tului, al
fonturilor /tipurilor de caractere3 i n general, al tuturor elementelor prezente n pagin. Etic!etele sunt
delimitate de perec!i de paranteze ung!iulare %L M%.
-nele etic!ete permit precizarea anumitor caracteristici ale elementului pe care l introduc n
document prin intermediul unor perec!i caracteristic ! valoare numite atribute. E#ist atribute
specifice doar anumitor elemente i atribute ce sunt utilizate n asociere cu mai multe etic!ete. $
etic!et poate avea unul, nici unul, sau mai multe atribute. 8a rndul lor, atributelor li se pot atribui
valori diferite.
tt etic!etele ct i atributele sunt case!insensitive, ca atare nu va e#ista nici o diferen de
aciune ntre, s spunem, L!eadM, L5eadM, L5E)M, sau c!iar L5ea)M. Ele sunt ec!ivalente. ,e de
alt parte, valoarea unui atribut poate fi case!sensitive, cum, n principiu, este cazul locaiilor fiierelor
i adreselor -+8.
+egulile de folosire a etic!etelor, atributelor i valorilor acestora reprezint sinta(a limbajului
5678. (imilar limbajelor de programare, n 5678 respectarea sinta#ei limbajului este determinant
pentru o bun funcionare a documentului.
(pre deosebire de limbajele compilate cum ar fi limbajul &, n care programele trec nainte de
e#ecuie prin faza de compilare, etap n care compilatorul semnaleaz eventualele greeli de sinta#, la
documentele 5678 nu se ntmpl acest lucru. )ocumentele 5678 sunt interpretate de bro;ser e#act
aa cum au fost ele scrise. ,rin urmare, orice greeal de sinta# se va reflecta direct n aspectul paginii
*eb, conducnd, de cele mai multe ori, la o funcionare defectuoas a acesteia.
)ac la vizualizarea paginii dumneavoastr cu bro;serul constatai c anumite secvene ale
paginii nu au aspectul ateptat, sau elementele pe care dorii s le introducei nu sunt afiate, revenii
asupra documentului 5678 i verificai nc o dat sinta#a acestor elemente.
5678 lucreaz ntr"o manier foarte uor de neles. =n esen trebuie s scriei te#tul i s
precizai elementele care dorii s apar n pagin i s le includei ntre anumite etic!ete specifice. )e
e#emplu, dac dorim s afim o propoziie cu caractere ngroate /bold3, vom marca nceputul acesteia
folosind etic!eta L'M iar pentru marcarea sfritului propoziiei etic!eta L?'M.
L'M cesta este un te#t scris cu litere aldineL?'M
8ten)ieM
'ro;serul nu ine cont de numrul spaiilor dintre cuvinte, afiarea fcndu"se invariabil cu un
singur spaiu. )e asemenea, nu se poate preciza mrimea liniilor de te#t, acestea fiind de mrimea
ferestrei bro;serului /prin redimensionarea ferestrei se vor rearanja i liniile de te#t3.
)up cum vom vedea mai trziu, se poate preciza totui unde s se termine un anumit rnd i cum
se poate alinia un te#t n pagin.
Etic!etele 5678 sunt de dou tipuri:
etic!ete container /container tags3
etic!ete vide /empt$ tags3
Etic!etele container sunt de forma:
L69M bloc de te#t L?69M
unde:
L69M " marc!eaz nceputul unui bloc
L?69M " marc!eaz sfritul blocului
Etic!etele specific formatul n care va fi afiat te#tul coninut ntre etic!eta de nceput i cea de
final. 7ajoritatea etic!etelor sunt de acest tip. $ particularitate a etic!etelor container este c, n cazul
unora dintre ele, prezena etic!etei de nc!idere /L?69M3 este opional. ,e parcursul capitolelor care
vor urma, vom preciza e#plicit care anume sunt etic!etele care au aceast proprietate.
Etic!etele vide au forma:
L69M
cest tip de etic!ete nu se refer la formatul te#telor, ci la introducerea anumitor elemente, ca de
e#emplu: paragrafe, sfrit de linie, linii orizontale i altele, deci dau indicaii bro;serului despre ce
element este vorba i despre cum s afieze acel element.
Etic!etele vide nu au etic!et de nc!idere.
2. #tic/ete de structur*
$rice document 5678 conine dou seciuni:
antetul /head3
corpul documentului /bod$3
(tructura general a unui document 5678 este urmtoarea:
?!"#C
?08@C
?!A!#0C ?/!A!#0C
?/08@C
?>H@NC
?/>H@NC
?/!"#C
)ocumentul este delimitat de etic!etele L5678M L?5678M i este format din cele dou pri:
antet /head3 " este delimitat de etic!etele L5E)M L?5E)M i conine titlul documentului
precum i alte informaii privind documentul. =n antetul documentului se mai insereaz i anumite
secvene de program /script"uri3, care se e#ecut la ncrcarea documentului n bro;ser)
corp /bodL3 " care delimiteaz coninutul propriu"zis al documentului i este inclus ntre
etic!etele L'$)KM L?'$)KM
Iat acum i semnificaia etic!etelor menionate i care fac parte din structura oricrui document
5678:
?!"#C ?/!"#C
=ntre aceste etic!ete este inclus ntregul document 5678. Ele comunic bro;serului unde ncepe
i unde se termin documentul.
?08@C ?/08@C
=ntre aceste etic!ete sunt incluse titlul, deja menionat, precum i alte informaii despre
documentul 5678. ceste elemente, numite metatag"uri sunt deosebit de importante pentru ca pagina
s fie ct mai bine cotat de ctre motoarele de cutare. Ele vor face obiectul unui capitol separat.
7etatag"urile i antetul n ansamblul su nu sunt vizibile pentru vizitator n pagina *eb. 6otui, la
fel ca ntreg codul 5678 al paginii, antetul poate fi vizualizat selectnd din meniul bro;serului
opiunea 3ie / +ource)
?!A!#0C ?/!A!#0C
(tabilete titlul documentului 5678.
6itlul documentului este deosebit de important deoarece este unul din criteriile folosite de
motoarele de cutare pentru inde#area paginii. ,rin urmare, strduii"v s gsii un titlu care s descrie
ct mai corect i complet coninutul paginii dumneavoastr.
8ten)ieM
Etic!eta de mai sus nu stabilete titlul care apare n cadrul paginii, ci pe acela care apare obinuit
n bara de titlu a bro;serului.
?>H@NC ?/>H@NC
&onine descrierea te#tului i elementelor paginii. =n corpul documentului se stabilesc, deci,
aspectul i coninutul paginii *eb. Elementele coninute n aceast seciune sunt vizibile n pagin.
,oate nu v vine s credei, dar acum avei deja posibilitatea de a crea o pagin foarte simpl de
te#t. vei >otepad"ul desc!is4 )ac nu, desc!idei"l acum i scriei e#emplul urmtor:
0(emplul /. 1
L5678M
L5E)M
L6I68EM,agina meaL?6I68EM
L?5E)M
L'$)KM
m reusit sa scriu prima mea pagina de *eb. -rmatoarea va fi cu mult mai buna.
L?'$)KM
L?5678M
(alvai fiierul cu numele primapagina)html. poi desc!idei bro;serul pe care l folosii
/Internet E#plorer sau >etscape3, selectai meniul .ile / Open / 1rose, cutai folderul n care ai
salvat fiierul, desc!idei"l i v vei afla n faa primului dumneavoastr document 5678 : <igura F.C
)ac dorii s scriei un te#t pe mai multe linii n pagin, va trebui s folosii etic!eta L'+M /de la
line break3, care face trecerea pe o linie noua. Etic!eta L'+M este de tip empt$, deci nu are etic!et de
nc!idere. =ncercai e#emplul de mai jos, n care afiarea te#tului documentului se va face pe dou
rnduri.
0(emplul /. /
L5678M
L5E)M
L6I68EM,agina meaL?6I68EM
L?5E)M
L'$)KM
m reusit sa scriu prima mea pagina de *eb.L'+M-rmatoarea va fi cu mult mai buna.
L?'$)KM
L?5678M
cum, documentul dumneavoastr va arta ca n <igura F.F
)eoarece structura documentelor 5678 obinuite este n realitate mult mai comple#, este
recomandat ca, pe msur ce procesul de editare avanseaz, s introducei comentarii n te#t pentru a
face aceast structur ct mai e#plicit. &omentariile nu sunt vizibile pentru bro;ser, ele servesc
creatorului paginii pentru a da un grad crescut de lizibilitate documentului 5678.
&omentariile constau n scurte informaii, e#plicaii la elementele de cod utilizate, etc., fiind
deosebit de utile ulterior, mai ales n situaia n care se impune depanarea codului.
&omentariile se introduc prin includerea te#tului ntre etic!etele de mai jos.
LN"" ""M
Iat dou e#emple:
LN" " cesta este un comentariu introdus in pagina *eb " "M
LNOcesta este un comentariu
pe mai multe randuri
care ia sfarsit aici ""M
3. 0o!osirea corect* a etic/ete!or
Etic!etele container se compun, aa cum am vzut mai devreme, din perec!i de etic!ete: etic!et
de desc!idere L69M i de nc!idere L?69M.
8a construirea unei pagini *eb comple#e vei fi pus adesea n situaia de a folosi mai multe
etic!ete pentru aceeai secven de te#t.
)e pild, vei dori s atribuii unui te#t dou proprieti: litere aldine sau ngroate /bold3 i te#t
centrat n pagin. ,entru aceasta va trebui s utilizai dou perec!i de etic!ete, care descriu cele dou
proprieti, n mod simultan, metod numit imbricarea etic!etelor /nested tags3, ca n e#emplul de
mai jos:
L&E>6E+ML'M6e#t cu aldine si centratL?'ML?&E>6E+M
Este foarte important ca, n cazul folosirii mai multor etic!ete container mpreun, ele s fie
plasate n mod corect.
=n aceast situaie, principiul de utilizare este: %#ast An * 2irst Hut% /8I<$3. cest lucru
nseamn c ultima etic!et desc!is trebuie s fie prima care se nc!ide.
8ten)ieM
6rebuie s fii foarte atent la nc!iderea etic!etelor, pentru a nu nclca principiul 8I<$. =n caz
contrar, secvena de cod din pagin nu va funciona corect.
Iat un e#emplu generic de folosire corect a dou etic!ete:
L69CML69FMEtic!ete utilizate corectL?69FML?69CM
i un altul de folosire incorect:
L69CML69FMEtic!ete utilizate incorectL?69CML?69FM
4. -e.umat
-n document 5678 este un fiier te#t care conine te#tul care va aprea n pagin i etic!ete.
cestea au rolul de a comunica bro;serului semnificaia i modul de afiare al elementelor incluse
ntre ele.
Etic!etele sunt nsoite de atribute care sunt perec!i caracteristic ! valoare i care au rolul de a
stabili diverse caracteristici ale etic!etei. Etic!etele pot fi de dou tipuri: etic!ete container i etic!ete
vide. Etic!etele container necesit etic!eta de nc!idere n timp ce etic!etele vide nu trebuie nc!ise.
-n document 5678 este format din antet i corp. Etic!etele de structur ale documentului sunt:
L5678M L?5678M care delimiteaz documentul
L5E)M L5E)M care delimiteaz antetul
L6I68EM L?6I68EM care delimiteaz titlul documentului
L'$)KM L?'$)KM care delimiteaz corpul documentului.
=ntr"un document 5678 se pot introduce comentarii prin introducerea te#tului ntre etic!etele
LN"" ""M
Imbricarea etic!etelor respect regula 8I<$: prima etic!et desc!is este ultima care se nc!ide.
). Test
#%M( este un acronim de la4
a3 5Eper 6e#t 7arIer 8ine
a3 5Eper 6e#t 7arIup 8anguage
b3 5Eper 6ec!nical 7et!od 8ibrarE
5tichetele #%M( sunt incluse 6ntre4
a3 P i Q
a3 / i 3
b3 L i M
5tichetele 7i textul care nu sunt vi8ibile 6n pagin sunt plasate 6n blocul4
a3 'odE
a3 5ead
b3 6able
Ce fel de program este necesar pentru a scrie #%M(9
a3 un editor de te#t
a3 un editor grafic
b3 5678 )evelopment J.B
O pagina "eb este format din dou pri4
a3 6op i 'ottom
a3 'odE i <rameset
b3 5ead i 'odE
Care etichete 6i comunica broserului unde 6ncepe 7i unde se termin pagina9
a3 L5678M
a3 L5E)M
b3 L'$)KM
Care dintre urmtoarele elemente nu poate fi gsit 6n seciunea #ead9
a3 6itle
a3 6able
b3 7etatag
:n construcia urmtoare4
L6I68EM,agina meaL?6I68EM
,agina mea repre8int4
a3 >umele fiierului 5678
a3 6itlul care va aprea n pagina *eb
b3 6itlul care va aprea n bara de titlu a ferestrei bro;serului
Care dintre urmtoarele fi7iere nu este un fi7ier #%M(9
a3 mEpage.!tm
a3 mEpage.t#t
b3 mEpage.!tml
'at exemplul de mai ;os4
L69CM
L69FM6e#tL?69FM
L69HM6e#t
L69JM6e#tL?69JM
L?69HM6e#t
L?69CM
5ste un exemplu de folosire corect a etichetelor9
a3 >u, deoarece nc!iderea etic!etelor nu respect regula 8I<$.
a3 >u, deoarece nu avem voie s folosim mai mult de dou etic!ete imbricate
b3 )a, deoarece etic!etele se nc!id corect.
'tructura unui document !"#
1. b3
/. c3
1. b3
3. a3
4. c3
7. a3
9. b3
;. c3
9. b3
1D. c3
Capitolul 1
Culori
Culoarea reprezint un caracteristic e#trem de important a unei pagini *eb. -tilizat cu grij
i msur, ea poate mbunti substanial aspectul paginii, fcnd"o mai lizibil i mai atractiv, iar
te#tul mai uor de parcurs.
,e de alt parte, utilizarea e#cesiv sau inadecvat a culorilor poate transforma un te#t de calitate
ntr"un fel de caleidoscop obositor, greu de urmrit, i care i va determina pe muli vizitatori s renune
la a"l mai parcurge.
)atorit faptului c ea reprezint un atribut al multor elemente ale documentelor *eb /te#t,
fundaluri, margini, linI"uri3, am optat pentru prezentarea detaliat a modului de utilizare al culorilor
nc din aceast etap a lucrrii noastre.
1. Sistemu! de de'inire a cu!ori!or
(istemul general utilizat pentru definirea culorilor este -F> prin care sunt specificate pentru
fiecare culoare care sunt cantitile de rou /Red3, verde /,reen3 i albastru /1lue3 care o compun.
=n 5678 orice culoare este desemnat printr"un cod de A cifre !e#azecimale, dintre care primele
dou reprezint cantitatea de rou, cele dou din mijloc, cantitatea de verde, iar ultimele dou cantitatea
de albastru.
(istemul !e#azecimal este un sistem de numeraie care folosete CA cifre, e#istnd urmtoarea
coresponden ntre cifrele !e#azecimale i cele zecimale:
B C F H J G A 1 0 D
C
B
C
C
C
F
C
H
C
J
C
G
B C F H J G A 1 0 D ' & ) E <
)e e#emplu, R<<BBBB este codul pentru rou. (emnificaia acestui cod este urmtoarea: cantitatea
de rou este ma#im, iar cantitile de verde i albastru sunt egale cu B. &odul pentru verde pur este
RBB<<BB iar pentru albastru este RBBBB<<.
)eoarece uneori definirea culorii prin intermediul codului su !e#azecimal este incomod,
standardul 5678 H.F stabilete un set de CA culori standard.
=n acest caz, pentru valoarea atributului de culoare se utilizeaz direct numele culorii, ca n
e#emplul de mai jos, n care se seteaz culoarea magenta pentru linIurile vizitate:
L'$)K vlinIS%magenta%M
>umele i codul culorilor stabilite n standardul 5678H.F sunt urmtoarele:
!abelul 1. 1
Gume
culoare
Cod
he(a.ecimal
aTua RBB<<<<
blacI RBBBBBB
blue RBBBB<<
fuc!sia R<<BB<<
graE R0B0B0B
green RBB0BBB
lime RBB<<BB
maroon R0BBBBB
navE RBBBB0B
olive R0B0BBB
purple R0BBB0B
red R<<BBBB
silver R&B&B&B
teal RBB0B0B
Eello; R<<<<BB
;!ite R<<<<<<
7ai trebuie menionat faptul c se pot utiliza, pe lng culori, CBB de nuane de gri /gra$3. Ele
sunt numerotate de la C la CBB, %graE C% fiind nuana cea mai nc!is, iar %graE CBB% cea mai desc!is.
=n ne#a H vei gsi tabelul culorilor nsoite de codurile lor !e#azecimale.
2. Corespondena dintre coduri!e /exa.ecima! i .ecima!
7ulte dintre editoarele grafice folosesc pentru a defini culorile codul zecimal. )ei se bazeaz i
ele pe acelai sistem +9' de definire a culorilor, numerele care stabilesc cantitile celor trei culori
sunt specificate n sistemul zecimal.
)e e#emplu, o culoare care are codul !e#azecimal RAH<<0B va avea codul zecimal DD, FGG, CF0.
ceast coresponden se realizeaz simplu, trecnd fiecare dintre cele trei numere !e#azecimale din
codul culorii n sistemul zecimal:
AH/CA3SDD/CB3 , <</CA3SFGG/CB3, 0B/CA3SCF0/CB3
7otivul pentru care trebuie s cunoatei aceast coresponden este acela c pentru a folosi n
documentul 5678 o culoare al crei cod este dat n sistemul zecimal, aceasta trebuie convertit n cod
!e#azecimal.
&onversia se poate realiza foarte simplu folosind calculatorul din *indo;s /+tart / 0ccessories
/ Calculator3 care trebuie setat pe opiunea +cientific din meniul 3ie. Uei observa o serie de butoane
radio dintre care ne intereseaz dou: #ex i Dec. >u avei altceva de fcut dect s selectai Dec, s
tastai numrul n baza CB i apoi s selectai opiunea #ex. +ezultatul conversiei va aprea pe ecran.
&onversia invers se realizeaz n mod similar.
.i acum s trecem la lucruri mai atractive i s dm via paginii noastre adugndu"i culori. Uom
lua pe rnd atributele etic!etei L'$)KM. &u ajutorul lor se pot seta culorile fundalului, te#tului i
linIurilor:
b6color " culoarea fundalului
te(t " culoarea te#tului
linE " culoarea linIurilor
vlinE " culoarea linIurilor vizitate
alinE " culoarea linIului activ
3. Cu!oarea 'unda!u!ui
,entru a stabili culoarea fundalului unei pagini folosim atributul b6color /background color3 al
etic!etei L'$)KM, cruia i atribuim o valoare astfel:
L'$)K bgcolorS%R+9' sau numeVculoare%M
(e poate folosi drept valoare pentru atributul bgcolor fie codul !e#azecimal al culorii fie numele
ei. Iat un e#emplu de pagin cu fundal verde:
0(emplul 1. 1
L5678M
L5E)M
L6I68EMculoriCL?6I68EM
L?5E)M
L'$)K bgcolorS%RBB<<BB%M
L5C alignS%center%M,agina cu fundal verdeL?5CML5+M
L?'$)KM
L?5678M
spectul paginii va fi cel din <igura H.C .
4. Cu!oarea textu!ui
,entru a seta culoarea te#tului din ntreaga pagin se folosete atributul te(t al etic!etei
L'$)KM, conform sinta#ei:
L'$)K te#tS%R+9' sau numeVculoare%M
)ac am stabilit o culoare pentru te#tul din pagin i dorim s utilizm o alt culoare pentru o
anumit seciune a te#tului /culoarea unui bloc de te#t3, vom folosi o etic!et despre care vom vorbi pe
larg n capitolul urmtor: etic!eta L<$>6M. ceasta este o etic!et container care cuprinde ntre
etic!etele de nceput i de final te#tul a crui culoare dorim s o modificm. (tabilirea culorii se face
folosind atributul color al etic!etei conform sinta#ei:
L<$>6 colorS%R+9' sau numeVculoare%M6e#tL?<$>6M
=n E#emplul H.F culoarea te#tului este albastru iar anumite cuvinte sunt colorate n rou. spectul
paginii va fi cel din <igura H.F .
0(emplul 1. /
L5678M
L5E)M
L6I68EMculoriFL?6I68EM
L?5E)M
L'$)K bgcolorS%R<<<<<<% te#tS%RBBBB<<%M
L5C alignS%center%M6e#t albastru si rosuL?5CM
L5+M
6e#tul din aceasta pagina este albastru cu mici
L<$>6 colorS%R<<BBBB%M e#ceptiiL?<$>6M
L?'$)KM
L?5678M
). Cu!oarea !e&*turi!or
=n general legturile /links3 dintr"o pagin *eb au culori prestabilite /default3, astfel:
blue /albastru3 " pentru legturi
red /rou3 " pentru legtura activa /cea pe care este fi#at cursorul mouse"ului, cu butonul stng
apsat3
purple /violet3 " pentru legturile vizitate, cele pe care s"a efectuat cel puin un click
,entru a sc!imba culorile prestabilite se folosesc urmtoarele atribute ale etic!etei L'$)KM:
linE pentru legturi
alinE pentru legturile active
vlinE pentru legturile vizitate
conform sinta#ei:
L'$)K linIS%R+9' sau numeVculoare%
alinIS%R+9' sau numeVculoare% vlinIS%R+9' sau numeVculoare%M
)ocumentul din E#emplul H.H creeaz o pagin n care te#tul este negru iar legturile au culoarea
verde, legturile active culoarea albastru i cele vizitate, culoarea rou. =n e#emplu este folosit etic!eta
LM i atributul sau hre5, care vor fi prezentate pe larg n capitolul despre legturi. =n acest moment
singurul lucru care ne intereseaz este cum putem stabili culorile acestora.
0(emplul 1. 1
L5678M
L5E)M
L6I68EMculoriHL?6I68EM
L?5E)M
L'$)K bgcolorS%R<<<<<<% te#tS%RBBBBBB% linIS%RBB<<BB% alinIS%RBBBB<<%
vlinIS%R<<BBBB%M
L5C alignS%center%M8egaturi colorateL?5CM
L5+M
L !refS%culoriC.!tml%M8egatura catre primul e#empluL?M
L?'$)KM
L?5678M
spectul paginii va fi cel din <igura H.H .
+. 1!e&erea cu!ori!or
(unt multe elemente care trebuie luate n considerare la alegerea culorilor pentru o pagin *eb.
,rimul i cel mai important este acela de a face coninutul uor de citit. ceasta nseamn...ai g!icitN
8itere negre pe fond alb.
)ei n vestimentaie combinaia de rou cu bleumarin este rafinat, ntr"o pagin *eb literele
roii pe fond albastru nu arat bine i sunt greu de citit. $ alt combinaie nefericit este cea cu fondul
negru sau de culoare foarte nc!is i te#tul de culoare alb.
( nu uitm nici faptul c toate monitoarele dispun de reglaje ale strlucirii luminoase i ale
contrastului pe care utilizatorii le seteaz diferit, n funcie de preferinele personale, de tolerana
oc!iului, de iluminarea camerei, etc.
,e un monitor cu reglaje medii ale contrastului i strlucirii, un te#t de culoare roie dispus pe un
fundal negru va fi ilizibil, c!iar dac la valori ma#ime ale acestor caracteristici combinaia poate genera
efecte interesante.
=n alegerea culorilor pentru un site este bine s inei seama de cteva elemente de psi!ologia
culorilor, pentru a sublinia astfel mesajul pe care vrei s l transmitei.
Iat cteva dintre sentimentele pe care le sugereaz culorile:
+ou " agresivitate, pasiune, putere, vitalitate
+oz " feminitate, inocen, moliciune
,ortocaliu " amuzament, veselie, cldur, e#uberan
9alben " sentimente pozitive i cordialitate
Uerde " linite, sntate, prospeime
lbastru " autoritate, demnitate, securitate, ncredere
Uiolet " sofisticare, spiritualitate, mister
7aro " utilitate, legtura cu pmntul, bogie
lb " puritate, ncredere, modernitate, rafinament
9ri " sobrietate, autoritate, sim practic
>egru " seriozitate, distincie, !otrre
legerea culorilor pentru site trebuie s fie n concordan cu tema site"ului i s sublinieze
mesajul su. stfel, dac dorii s construii un site destinat copiilor vei folosi culori vesele i
luminoase, n vreme ce pentru un site destinat prezentrii unei firme de consultan financiar sunt
potrivite culori sobre i care sugereaz seriozitate i ncredere.
legerea culorilor pentru legturi este, de asemenea, important. 8egturile au, n mod prestabilit,
anumite culori. (c!imbarea acestora, dei posibil, l poate induce n eroare pe vizitator. &a i n cazul
te#tului, alegei pentru legturi, legturile vizitate i legtura activ culori care s vin n contrast cu
culoarea sau imaginea de fundal a paginii. +mnei consecvent culorilor alese pentru legturi, pe
parcursul ntregului site.
,. Cu!ori 2si&ure2
a cum era de ateptat, nu toate monitoarele pot reproduce cele CA.111.BBB de culori furnizate
de codul +9'. &ele realizate cu te!nologii mai vec!i, sau cele moderne setate pentru numai FGA de
culori pot reproduce corect doar un set limitat de FGA de culori, aa"numit palet *eb sau %culorile
sigure *eb%.
Culorile :si6ure: sunt cele definite prin standardul 5678 H.F prezentat n tabelul de mai sus
sau sunt realizate prin combinaii ale urmtoarelor numere !e#azecimale: BB HH AA DD && <<
&odul !e#azecimal variaz ntre R<<<<<< /alb3 i RBBBBBB /negru3.
-n monitor setat s afieze FGA de culori va ncerca afiarea unei culori din afara acestui set prin
fenomenul numit %dithering% /alternarea unui pi#el de o culoare cu un pi#el de alt culoare3, ceea ce
uneori d rezultate, dar adesea rezultatul e departe de culoarea real. lteori, computerul va afia
culoarea %sigur% cea mai apropiat de cea original.
=n principiu, o astfel de problem poate prea minor. =n realitate, presupunnd c o pagin *eb
conine att te#tul ct i fundalul ambele n culori %nesigure%, prin modificarea lor de ctre computerul
cititorului, nuanele %apro#imate% pot face te#tul total ilizibil.
,entru a evita astfel de surprize neplcute este suficient s v menine n limita celor FGA de culori
%sigure%.
)esigur, putei folosi o combinaie !e#azecimal ciudat, ca aceasta: RCFE&0', dar nu vei avea
nici o garanie n privina modului n care va fi afiat aceast culoare n diferite bro;sere i pe diferite
platforme.
3. -e.umat
&ulorile ntr"un document 5678 sunt definite cu ajutorul codului +9' care e#prim n sistem
!e#azecimal cantitatea de rou, verde i albastru prezent n fiecare culoare.
,entru a stabili culorile ntr"o pagin *eb se folosesc atributele etic!etei L'$)KM dup
urmtoarea sinta#:
L'$)K bgcolorS%R+9' sau numeVculoare% te#tS%R+9' sau numeVculoare% linIS%R+9' sau
numeVculoare% alinIS%R+9' sau numeVculoare% vlinIS%R+9' sau numeVculoare%Mcorpul
documentuluiL?'$)KM
legerea culorilor pentru o pagin *eb trebuie s fie n strns legtur cu mesajul transmis de
aceasta i s permit citirea cu uurin a informaiilor prezentate.
,entru a evita afiarea defectuoas a culorilor din pagin este recomandat folosirea culorilor
%sigure%.
4. Test
1. +istemul pentru definirea culorilor este4
a3 +ed, 9reen, 'lue
a3 +ed, Kello;, 'lue
b3 *!ite, 'lacI, 9raE
Culorile 6n #%M( pot fi specificate folosind4
a3 &odul zecimal
a3 &odul !e#azecimal
b3 &odul 7orse
Care este cea mai mare cifr 6n sistemul hexa8ecimal9
a3 CG
a3 <
b3
O culoare care are 6n sistemul 8ecimal codul R,1 cu valorile4 <=, >?@, A< are codul
hexa8ecimal4
a3 RFE<FF
a3 RH&&)JG
b3 RAA<<DB
&entru a stabili culoarea fundalului paginii folosim4
a3 L'$)K bacIgroundS%culoare%M
a3 L'$)K colorS%culoare%M
b3 L'$)K bgcolorS%culoare%M
+etarea culorii pentru tot textul din pagin se face cu4
a3 L<$>6 colorS%culoare%M
a3 L'$)K fontcolorS%culoare%M
b3 L'$)K te#tS%culoare%M
Cum se poate schimba culoarea unui bloc de text9
a3 L&$8$+S%culoare%Mte#tL?&$8$+M
a3 L6EW6 colorS%culoare%Mte#tL?6EW6M
b3 L<$>6 colorS%culoare%Mte#tL?<$>6M
Care sunt culorile prestabilite pentru legturi, legturi active 7i legturi vi8itate9
a3 albastru, rou, violet
a3 albastru, verde, galben
b3 negru, albastru, rou
Culoarea legturilor se poate schimba folosind4
a3 L8I>X colorS%culoare%M
a3 L'$)K linIS%culoare%M
b3 L'$)K linIcolorS%culoare%M
0tributele linI5 alinI 7i vlinI servesc la4
a3 stabilirea legturilor
a3 stabilirea culorilor pentru legturi
b3 stabilirea culorilor pentru ntreaga pagin
Culori
1. a3
/. b3
1. b3
3. a3
4. c3
7. c3
9. c3
;. a3
9. b3
1D. b3
Capitolul 3
2onturi
=nainte de a aborda tipurile de caractere care pot fi utilizate n documentele *eb, se cuvine
menionat un fapt: 5678 nu este un limbaj orientat spre aspectul /la$out3 paginii, ci spre coninutul
acesteia.
Importana acestei meniuni rezid n aceea c etic!etele 5678 nu impun, cum s"ar putea crede,
ci %sftuiesc% marea varietate de bro;sere care proceseaz pagina *eb, cum s afieze te#tul. &eea ce
impun ele cu adevrat este coninutul, te#tul n sine, nu forma de prezentare.
)esigur c nu se poate vorbi de cealalt e#trem, a unui arbitrariu absolut, n care fiecare bro;ser
va afia te#tul sub o form absolut imprevizibil. -n te#t cu o anumit formatare pentru Internet
E#plorer, s spunem, va fi vizualizat practic identic de toi utilizatorii acestui tip de bro;ser)
E#ist numeroase etic!ete care permit formatarea caracterelor i ne ofer posibilitatea de a da
te#tului din pagina *eb aspectul dorit.
1. 0ormatarea caractere!or
Etic!eta care se folosete pentru a da unui caracter sau unui ir de caractere /unui te#t3 aspectul
dorit este etic!eta container ?2HG!C ?/2HG!C.
=ntre etic!eta de nceput i cea de sfrit se insereaz te#tul sau caracterul ale crui caracteristici
dorim s le stabilim.
=nainte de a discuta despre atributele etic!etei L<$>6M s luam un e#emplu:
L<$>6 sizeS%F% colorS%red% faceS%arial%MIon 8uca &aragiale L?<$>6M
Efectul liniei de mai sus este afiarea te#tului %Ion 8uca &aragiale% cu fonturi rial, de culoare
roie i de mrime egal cu F puncte.
( analizm succesiv cele trei atribute ale etic!etei L<$>6M:
si.e " dimensiunea te#tului " poate fi un numr ntre C i 1 /dimensiuni absolute3, ntre "C i "H sau
ntre YC i YJ /dimensiuni relative, adic raportate la dimensiunea deja e#istent a fontului3.
)imensiunea prestabilit /default3 a fonturilor este H.
)ac dimensiunile menionate depesc intervalul C"1, bro;serul rotunjete automat valorile
pentru a le ncadra n acest interval.
color " culoarea te#tului " este culoarea cu care va fi afiat te#tul prezent ntre etic!ete /n
e#emplul nostru, %Ion 8uca &aragiale% 3.
5ace " tipul de font " determin tipul de font care va fi utilizat la afiarea te#tului.
6ipurile cele mai uzuale sunt:
rial
6a!oma
5elvetica
6imes >e; +oman
&ourier
Uerdana
tributul etic!etei permite precizarea fie a unui singur tip de font fie a mai multora, separate prin
virgul. ,recizarea mai multor fonturi ajut n eventualitatea cnd primul tip indicat nu este instalat pe
calculatorul celui care viziteaz pagina, i se face ca n e#emplul de mai jos.
L<$>6 faceS%arial, verdana, times ne; roman%M
=n aceast situaie bro;serul va alege singur din list primul tip de font pe care l recunoate,
ignorndu"le pe urmtoarele.
8ten)ieM
8a stabilirea tipului de caracter utilizat n pagin inei seama de faptul c nu toi utilizatorii au
instalate pe computerele lor acelai set de caractere ca i dumneavoastr. )in acest motiv, folosirea
unor caractere e#otice, de efect, poate conduce la un eec n cazul cnd utilizatorul nu are instalat acel
font.
)in acest motiv este de preferat folosirea unor fonturi cu utilizare larg, cum sunt cele menionate
mai sus.
=n E#emplul J.C vom aplica pe rnd fiecare dintre cele trei atribute menionate asupra unui te#t,
aspectul paginii descrise de acest document fiind cel din <igura J.C.
a= 0(emplul 3. 1
L5678M
L5E)M
L6I68EMfonturiCL?6I68EM
L?5E)M
L'$)K bgcolorS%Eello;%M
L<$>6 sizeS%G% faceS%ta!oma% colorS%green%M7anual de 5678 si design *ebL?<$>6ML'+M
L<$>6 sizeS%YH% faceS%arial% colorS%red%M7anual de 5678 si design *ebL?<$>6ML'+M
L<$>6 sizeS%"C% faceS%courier ne;% colorS%blue%M7anual de 5678 si design *ebL?<$>6M
L?'$)KM
L?5678M
,entru a stabili aspectul te#tului unei ntregi pagini *eb, putem folosi etic!eta ?>8'02HG!C.
(pre deosebire de L<$>6M aceasta nu este o etic!et container, deoarece efectul ei se refer la tot
te#tul din pagin. >u se folosete pentru a stabili caracteristicile unui bloc de te#t.
Este indicat s fie inclus n documentul 5678 imediat dup etic!eta L'$)KM. tributele
etic!etei L'(E<$>6M sunt aceleai cu cele ale etic!etei L<$>6M, respectiv: si.e, color, 5ace.
=n E#emplul J.F vom construi o pagin creia i setm te#tul cu atributele:
face " tip de font rial, size " dimensiunea fontului F, color " culoare albastr. $ parte din te#t va
avea alt tip de font, alt mrime i culoare, acestea fiind stabilite prin folosirea etic!etei L<$>6M.
b= 0(emplul 3. /
L5678M
L5E)M
L6I68EMfonturiFL?6I68EM
L?5E)M
L'$)K bgcolorS%;!ite%M
L'(E<$>6 faceS%arial% colorS%blue% sizeS%F%M
m ajuns la lectia despre fonturi a L<$>6 faceS%arial blacI% colorS%red% sizeS%J%M7anualului
de 5678L?<$>6M
L?'$)KM
L?5678M
)up cum putei observa din <igura J.F, caracteristicile te#tului din pagin au fost setate cu
ajutorul etic!etei L'(E<$>6M. ,entru a afia simultan o parte din te#t ntr"un mod diferit am folosit
etic!eta L<$>6M.
)ei etic!eta L'(E<$>6M face parte din standardul 5678 H.F, atributele sale nu sunt
recunoscute de bro;serele >etscape. &a urmare, acesta va afia te#tul utiliznd propriile setri
prestabilite /default3, ignornd atributele menionate n etic!eta L'(E<$>6M.
-rmtorul e#emplu /E#emplul J.H3 afieaz un cuvnt avnd literele de mrimi diferite. spectul
acestei pagini este cel din <igura J.H.
c= 0(emplul 3. 1
L5678M
L5E)M
L6I68EMfonturiHL?6I68EM
L?5E)M
L'$)K bgcolorS%;!ite%M
L'(E<$>6 faceS%arial blacI% colorS%red%M
L<$>6 sizeS%J%M9L?<$>6M
L<$>6 sizeS%G%M+L?<$>6M
L<$>6 sizeS%A%ML?<$>6M
L<$>6 sizeS%1%M6L?<$>6M
L<$>6 sizeS%A%M-L?<$>6M
L<$>6 sizeS%G%MIL?<$>6M
L<$>6 sizeS%J%M6L?<$>6M
L?'$)KM
L?5678M
( trecem n revist, n continuare, alte etic!ete care sc!imb aspectul unui caracter sau al unui
bloc de te#t.
2. 1ccentuarea textu!ui
C. Etic!eta ?>AFC ?/>AFC face fonturile mai mari dect dimensiunea curent.
L'I9M6e#t cu caractere mariL?'I9M
6e#t cu caractere mari
C. Etic!eta ?'"8##C ?/'"8##C face fonturile mai mici dect dimensiunea curent.
L(788M6e#t cu caractere miciL?(788M
6e#t cu caractere mici
F. Etic!etele ?>C ?/>C /bold3 i ?'!-HGFC ?/'!-HGFC realizeaz scrierea cu
caractere aldine, sau ngroate /bold3.
L'M6e#t ingrosat CL?'M
!e(t in6rosat 1
L(6+$>9M6e#t ingrosat FL?(6+$>9M
!e(t in6rosat /
H. Etic!etele ?AC ?/AC /italic3 i ?0"C ?/0"C /emphasi8ed3realizeaz scrierea cu
caractere italice.
LIM6e#t inclinat CL?IM
%ext inclinat B
LE7M 6e#t inclinat FL?E7M
%ext inclinat >
J. Etic!etele ?'C ?/'C i ?'!-AO0C ?/'!-AO0C realizeaz scrierea te#tului tiat de o
linie orizontal.
L(M6e#t taiat CL?(M
6e#t taiat C
L(6+IXEM6e#t taiat FL?(6+IXEM
6e#t taiat F
G. Etic!eta ?+C ?/+C /underlined3 realizeaz sublinierea te#tului.
L-M6e#t subliniatL?-M
6e#t subliniat
8ten)ieM
-tilizarea te#tului subliniat trebuie fcut cu grij, ntruct acesta poate fi confundat cu un linI.
A. Etic!eta ?'+&C ?/'+&C /superscript3. ,rin intermediul ei se pot insera n document
caractere?te#te plasate deasupra nivelului liniei de scriere.
pa ing!eata la B L(-,MBL?(-,M&
pa ing!eata la B
B
&
1. Etic!eta ?'+>C ?/'+>C /subscript3. ,rin intermediul ei se insereaz te#te plasate sub
nivelul liniei de scriere.
&oordonatele WL(-'MCL?(-'M, KL(-'MFL?(-'M
&oordonatele WC, KF
Este de remarcat faptul c etic!etele L'I9M i L(788M sunt e#ecutate diferit n diverse
bro;sere)
stfel, n >etscape L'I9M face te#tul mai mare cu un punct iar L(788M mai mic cu un punct
dect dimensiunea curenta.
=n Internet E#plorer, L'I9M afieaz te#tul cu fonturi de dimensiune J iar L(788M cu fonturi
de dimensiune F. Etic!etele L'I9M i L(788M pot fi repetate pentru a obine un efect mai accentuat.
E#emplele urmtoare ilustreaz modul cum pot fi utilizate aceste etic!ete.
d= 0(emplul 3. 3
L5678M
L5E)M
L6I68EMfonturiJL?6I68EM
L?5E)M
L'$)KM
L'(E<$>6 faceS%arial% colorS%blue%M
L'I9MEtic!eteL?'I9M care LE7Msc!imbaL?E7M aspectul L(788Mte#tuluiL?(788M
L?'$)KM
L?5678M
spectul paginii este cel din <igura J.J
e= 0(emplul 3. 4
L5678M
L5E)M
L6I68EMfonturiGL?6I68EM
L?5E)M
L'$)KM
L<$>6 faceS%arial% sizeS%G%Mcesta este font rial L?<$>6ML'+M
L<$>6 faceS%algerian% sizeS%J% colorS%green%Mcesta este font lgerian L?<$>6ML'+M
L<$>6 faceS%courier% colorS%blue%ML(6+$>9Mcesta este font &ourier
L?(6+$>9ML?<$>6ML'+M
L<$>6 <&ES%vivaldi% sizeS%G% colorS%graE%ML-Mcesta este font Uivaldi
L?-ML?<$>6ML'+M
L<$>6 <&ES%garamond%MLE7Mcesta este font 9aramond L?E7ML?<$>6ML'+M
L<$>6 <&ES%modern% sizeS%1% colorS%bro;n%ML(6+IXEMcesta este font 7odern
L?(6+IXEML?<$>6ML'+M
L?'$)KM
L?5678M
,agina arat ca n <igura J.G
)up cum ai observat mai sus, e#ist dou etic!ete al cror efect este acelai: accentuarea
te#tului fie prin scrierea cu caractere italice fie cu caractere aldine.
3. #tic/ete !o&ice i etic/ete 'i.ice
Etic!etele L'M i LIM se numesc etic!ete 5i.ice, iar LE7M i L(6+$>9M etic!ete lo6ice.
Etic!etele de titluri de la L5CM la L5AM sunt, de asemenea, etic!ete logice. )iferena dintre cele dou
tipuri de etic!ete este legat de felul cum sunt ele e#ecutate de diversele tipuri de bro;sere)
stfel, etic!etele fizice impun bro;serului afiarea n formatul e#act, precizat prin intermediul
lor. )ac bro;serul nu suport acest format, etic!etele sunt ignorate.
(pre deosebire de etic!etele fizice, cele logice las bro;serului libertatea de a alege cel mai bun
mod de a ndeplini comanda transmis prin etic!eta. )e e#emplu, efectul etic!etei LE7M este, n cele
mai multe bro;sere, scrierea te#tului cu caractere italice. 6otui, dac un anumit tip de bro;ser nu
suport acest format de caractere, va accentua totui te#tul ntr"un alt mod, cel mai bun de care dispune.
lte etic!ete logice utilizate n documentele 5678 sunt:
?CA!0C ?/CA!0C /citation3 Etic!et folosit pentru inserarea unui citat. )e obicei, citatul este
afiat cu caractere italice.
?CH@0C ?/CH@0C /code3 Etic!ete folosite pentru inserarea n te#t a unor secvene de cod
scrise ntr"un limbaj de programare. =n general secvenele de cod sunt afiate cu fonturi &ourier.
?@2GC ?/@2GC /definition3 Etic!eta este folosit pentru a insera n te#t definiia unor termeni.
Este util la crearea inde#ului sau glosarului unui document.
?O>@C ?/O>@C /ke$board3 ceast etic!et logic se folosete pentru a indica un te#t care
urmeaz a fi introdus de la tastatur, ca n urmtorul e#emplu:
,entru a parasi programul tastati LX')MTuitL?X')M
?'8"&C ?/'8"&C /sample3 Este o etic!et logic folosit pentru a insera o mostr de te#t.
?!!C ?/!!C /telet$pe3 ceast etic!et se folosete pentru a afia te#tul inclus ntre etic!ete cu
fonturi monospaiate. 6ipul de font monospaiat /cum este de e#emplu &ourier3 are proprietatea c
fiecrui caracter i se rezerv acelai numr de pi#eli pe ecran. stfel, caracterul %i% va avea alocat tot
atta spaiu pe ecran ca i caracterul %*%:
%&ourier% este un font monospaiat.
7ai trebuie precizat i faptul c utilizarea unora dintre etic!etele de formatare a fonturilor aa
cum au fost prezentate ele n acest capitol tinde s fie nlocuit cu foile de stiluri /Cascade +t$le +heets3
despre care vom vorbi ntr"un capitol viitor.
4. -e.umat
,entru a stabili aspectul unei anumite secvene de te#t aceasta este inclus ntre etic!etele
6<$>6M L?<$>6M conform sinta#ei:
L<$>6 sizeS%numar% colorS%R+9' sau numeVculoare% faceS%tipVfont%M te#t L?<$>6M
,entru a seta aspectul te#tului n toat pagina *eb se folosete etic!eta L'(E<$>6M conform
sinta#ei:
L'(E<$>6 sizeS%numar% colorS%R+9' sau numeVculoare% faceS%tipVfont%M
ccentuarea te#tului se poate face folosind diverse etic!ete pentru scrierea cu caractere aldine, cu
caractere italice, cu caractere mai mari sau mai mici dect dimensiunea curent a fonturilor.
Etic!etele sunt de dou tipuri: fizice i logice, etic!etele fizice fiind orientate ctre aspectul
te#tului iar cele logice ctre semnificaia te#tului n cadrul documentului.
). Test
1. &entru a stabili tipul de font pentru 6ntreaga pagin "eb se folose7te eticheta4
a3 L)E<-86M
a3 L'(E<$>6M
b3 L6+9E6M
&entru a stabili tipul de font cu care se face afi7area unui text se folose7te atributul4
a3 c!aracter
a3 tEpe
b3 face
Cnul dintre exemplele urmtoare este incorect) Care9
a3 L<$>6 faceS%arial%M
a3 L<$>6 faceS%arial, verdana%M
b3 L<$>6faceS%verdana%M
Ce reali8ea8 urmtoarea etichet9
L<$>6 sizeS%YC%M
a3 fieaz te#tul cu fonturi de mrime C.
a3 fieaz pe pagin te#tul %YC%.
b3 fieaz te#tul cu fonturi de dimensiune mai mare cu un punct dect dimensiunea
curent.
:n afara etichetei L'M ce alt etichet se mai folose7te pentru a scrie un text cu caractere aldine9
a3 L)+XM
a3 L(6+$>9M
b3 L'I9M
5tichetele LIM 7i LE7M reali8ea84
a3 scrierea te#tului cu caractere italice
a3 inserarea unei imagini
b3 scrierea te#tului cu caractere mai mici dect cele curente
Ce este incorect 6n urmtorul exemplu9
L<$>6 faceS%arial, verdana, times ne; roman%, sizeS%J%ML'Mte#tL?<$>6ML?'M
a3 >u se pot preciza mai multe tipuri de fonturi ca valori pentru atributul face.
a3 6ipurile specificate nu se pot scrie cu caractere aldine
b3 Etic!etele L<$>6M i L'M nu se nc!id corect.
&rin ce se aseamn etichetele L(6+$>9M 7i LE7M9
a3 (unt amndou etic!ete logice.
a3 (unt amndou etic!ete fizice.
b3 (ervesc amndou la scrierea te#tului cu caractere italice.
Care este gre7eala 6n urmtoarea construcie9
L'(E<$>6 faceS%arial% sizeS%G%Mte#tL?'(E<$>6M
a3 L'(E<$>6M nu este o etic!eta container
a3 L'(E<$>6M nu suport atributul face
b3 L'(E<$>6M nu suport atributul size
Ce efect are urmtoarea etichet9
L<$>6S%arial, verdana, times ne; roman%M
a3 6e#tul se afieaz cu toate cele trei tipuri de fonturi.
a3 6e#tul se afieaz cu primul tip de font, dintre cele trei, pe care l recunoate bro;serul.
b3 Etic!eta nu era nici un efect ntruct este incorect.
2onturi
1. b3
/. c3
1. c3
3. c3
4. b3
7. a3
9. c3
;. a3
9. a3
1D. b3
Capitolul 4
2ormatarea te(tului
Etic!etele despre care vom vorbi n continuare nu se mai refer la particularitile fonturilor ci la
felul n care poate fi amplasat un te#t n cadrul paginii. =nainte de a discuta n amnunt despre
etic!etele care permit formatarea te#tului, s facem cteva precizri privind felul cum sunt afiate
te#tele.
)up cum tii, fiierele 5678 sunt fiiere te#t. ceasta nseamn c atunci cnd salvai fiierul
respectiv, el este salvat numai ca te#t, deci bro;serul nu poate recunoate i e#ecuta dect strict acele
comenzi prevzute de etic!etele 5678. )in acest motiv, trecerea la un rnd nou, care n editorul de
te#t se realizeaz prin apsarea tastei E>6E+, nu este recunoscut de bro;ser)
-n alt aspect este plasarea n te#t a spaiilor. &!iar dac vei introduce spaii suplimentare ntre
cuvinte atunci cnd scriei documentul 5678 n editorul de te#t, bro;serul va afia invariabil un
singur spaiu ntre dou cuvinte.
cesta este motivul pentru care fiecare dintre aceste elemente de formatare a te#tului are o
etic!et proprie care indic bro;serului cum anume s fac afiarea.
1. Trecerea !a un r7nd nou
6recerea la un rnd nou se realizeaz cu ajutorul etic!etei ?>-C /de la line break3. Etic!eta
L'+M nu este o etic!et container. Ea are rolul de a comunica bro;serului c te#ul care urmeaz dup
etic!et va fi afiat pe un rnd nou aa cum rezult din E#emplul G.C.
0(emplul 4. 1
L5678M
L5E)M
L6I68EMte#tCL?6I68EM
L?5E)M
L'$)KM
'una ziuaL'+M7a numesc 8uciaL'+MInvat sa construiesc o pagina *ebL'+M
L?'$)KM
L?5678M
spectul paginii descrise n e#emplul de mai sus este cel din <igura G.C .
Etic!eta L'+M admite atributul clear care poate lua valorile left, rig!t sau all.
=n mod normal, la ntlnirea etic!etei L'+M linia curent de te#t este ntrerupt i se face trecerea
la o linie nou, ca i la acionarea tastei 5nter ntr"un editor de te#t. E#ist ns situaii cnd dorim ca
linia s fie afiat lng un anumit element /o imagine, sau un tabel, de e#emplu3 care bloc!eaz partea
din stnga sau din dreapta a liniei.
=n aceste cazuri putem folosi atributul clear al etic!etei L'+M ca n E#emplul G.F. ,utei observa
efectul atributului clear al etic!etei L'+M n <igura G.F.
0(emplul 4. /
L5678M
L5E)M
L6I68EMte#tFL?6I68EM
L?5E)M
L'$)KM
LI79 srcS%..?Imagini?toad.jpg% alignS%left%M
cest te#t va fi afisat intre imagine si marginea dreapta a documentului.
L'+ clearS%left%Mcest te#t va fi afisat sub imagine, aliniat stanga. Intre acest te#t si dreapta
imaginii va e#ista un spatiu gol.
L?'$)KM
L?5678M
2. Tit!uri!e 8Headin&s9
-tilizarea titlurilor este justificat de nevoia de a sublinia prin format structura logic a unui
document, dar, nu n ultimul rnd, i de monotonia la care e#pune un te#t lung, lipsit de variaie n
aspect. <irete c un asemenea te#t sfrete prin a obosi cititorul *eb, obinuit cu te#te scurte i
concentrate.
)in acest motiv se recomand %spargerea% te#telor mai lungi i organizarea lor n secvene mai
scurte, marcate de titluri i subtitluri, organizate ierar!ic, pe nivele.
6itlurile dintr"un document 5678 sunt marcate cu ajutorul etic!etelor ?1C, ?/C, ?1C,
?3C, ?4C, ?7C. Ele sunt etic!ete container, deci necesit etic!eta corespunztoare de nc!idere.
Etic!eta L5CM definete titlul de dimensiunea ma#im, iar L5AM pe cel de dimensiune minim.
8ten)ieM
)ei standardul 5678 nu interzice utilizarea n orice ordine a titlurilor, este de preferat ca
acestea s fie folosite n ordinea %normal%, progresiv, fr a sri peste vreun nivel /de pild de la 5C
direct la 5G3, pentru a evita eventualele probleme la convertirea te#tului n alte tipuri de fiiere.
=n E#emplul G.H vom folosi toate cele ase etic!ete pentru titluri pentru a face o comparaie cu
dimensiunea standard a te#tului. ,utei observa efectul acestor etic!ete n <igura G.H.
0(emplul 4. 1
L5678M
L5E)M
L6I68EMte#tHL?6I68EM
L?5E)M
L'$)KM
L5CM6itlu 5CL?5CM6e#t normal
L5FM6itlu 5FL?5FM6e#t normal
L5HM6itlu 5HL?5HM6e#t normal
L5JM6itlu 5JL?5JM6e#t normal
L5GM6itlu 5GL?5GM6e#t normal
L5AM6itlu 5AL?5AM6e#t normal
L?'$)KM
L?5678M
Este de menionat o proprietate interesant a etic!etelor de titluri, i anume aceea c un te#t scris
pe aceeai linie cu un titlu este afiat n pagin pe rndul urmtor titlului, lsndu"se o linie liber ntre
titlu i te#t, dei nu este prezent nici una dintre etic!etele L'+M sau L,M.
Etic!etele de titlu accept atributul ali6n cu valorile left, center i rig!t pentru alinierea titlului
blocului de te#t la stnga /n mod prestabilit3, n centru i respectiv la dreapta. <igura G.J red aspectul
paginii descrie de documentul din E#emplul G.J care ilustreaz modul de aliniere al titlurilor.
0(emplul 4. 3
L5678M
L5E)M
L6I68EMte#tJL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%M6itluriL?5CML5+M
L5C alignS%center%M
6itlu de marime C aliniat in centru
L?5CM
L5F alignS%rig!t%M
6itlu de marime F aliniat la dreapta
L?5FM
L5JM
6itlu de marime J aliniat la stanga
L?5JM
L?'$)KM
L?5678M
3. :ara&ra'e!e
6recerea la un nou paragraf n cadrul te#tului se realizeaz cu ajutorul etic!etei ?&C ?/&C.
ceast etic!et comunic bro;serului s insereze o linie liber n te#t i s nceap o nou linie.
Etic!eta L,M este o etic!et container dar prezena etic!etei de nc!idere L?,M este opional n anumite
situaii. )ac ea este prezent, indic bro;serului s insereze o linie liber i dup blocul de te#t
cuprins ntre cele dou etic!ete.
Etic!eta L,M admite atributul ali6n cu cele trei valori ale acestuia: left, center i rig!t, care permit
alinierea te#tului la stnga, centrat respectiv la dreapta.
E#emplul G.G ilustreaz cele trei modaliti de aliniere a te#tului.
0(emplul 4. 4
L5678M
L5E)M
L6I68EMte#tGL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%M,aragrafeL?5CML5+M
L,M cesta este un paragraf aliniat la stanga.
L, alignS%rig!t%M cesta este un paragraf aliniat la dreapta.
L, alignS%center%M cesta este un paragraf aliniat la centru.
L?'$)KM
L?5678M
)in <igura G.G care red aspectul paginii descrise n e#emplu se poate observa c alinierea la
stnga este implicit /nu mai trebuie specificat alignS%left%3. (e mai poate observa c nu a fost folosit
etic!eta de nc!idere a paragrafelor, deoarece la ntlnirea unei noi etic!ete L,M vec!iul paragraf se
consider nc!is. 6otui, prezena sau absena etic!etei de nc!idere a paragrafului atunci cnd este
prezent atributul align trebuie stabilit cu grij, pentru a nu obine rezultate neconforme cu dorinele
dumneavoastr.
=n E#emplul G.A dorim s aliniem un nou paragraf n dreapta paginii, iar te#tul de pe rndul
urmtor paragrafului, care este introdus prin etic!eta L'+M, s fie scris normal, de la captul din stnga
al paginii.
0(emplul 4. 7
L5678M
L5E)M
L6I68EMte#tAL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%M,aragrafeL?5CML5+M
cest te#t este scris normal, incepand e la marginea din stanga.
L, alignS%rig!t%Mcest te#t este aliniat la dreapta
L'+M-nde este afisat acest te#t4
L?'$)KM
L5678M
)in <igura G.A se poate observa c afiarea nu s"a fcut conform inteniilor noastre. 7otivul este
faptul c etic!eta
L, alignSZrig!tZM nu are etic!eta de nc!idere L?,M, i prin urmare efectul su se prelungete
pn la ntlnirea unei alte etic!ete L,M.
)ac vei nc!ide paragraful n mod e#plicit cu ajutorul etic!etei de nc!idere, nainte de trecerea
la o linie nou, efectul asupra te#tului va fi cel dorit aa cum rezult din <igura G.1.
)ei aparent etic!etele L'+M i L,M au un efect asemntor, i anume trecerea la o linie nou, ele
nu sunt e#ecutate la fel. L'+M comunic bro;serului unde se nc!eie o linie, n vreme ce L,M i
impune s lase o linie liber i s treac la un nou paragraf. )ac folosim atributul align al etic!etei
L,M n situaiile cnd dup paragraf este introdus un alt element n pagin este recomandat nc!iderea
n mod e#plicit a etic!etei respective.
4. :re'ormatarea textu!ui
a cum am precizat la nceputul capitolului, atunci cnd editai documentul 5678 cu ajutorul
unui editor de te#t, indiferent cte spaii vei lsa ntre cuvinte sau ntre liniile de te#t, bro;serul va
afia te#tul invariabil cu un singur spaiu ntre cuvinte i va ajusta lungimea liniilor n funcie de
mrimea ferestrei. &u alte cuvinte, orice spaii sau linii libere suplimentare vor fi ignorate de ctre
bro;ser) a cum am vzut mai sus, trecerea la o linie nou se realizeaz cu ajutorul etic!etei L'+M iar
inserarea unei linii libere se face cu ajutorul etic!etei L,M.
E#ist, ns, i o etic!et care impune bro;serului s afieze te#tul ntocmai cum a fost el
formatat n documentul 5678. Este vorba despre etic!eta ?&-0C ?/&-0C.
Etic!eta L,+EM permite preformatarea te#tului i menine spaierea i alinierea te#tului aa cum a
fost fcut n documentul surs 5678. Etic!eta de nc!idere L?,+EM este obligatorie.
E#emplul G.1 ilustreaz modul cum poate fi folosit etic!eta L,+EM. spectul paginii descrise n
acest document este cel din <igura G.0.
6estai e#emplul folosind etic!eta L,+EM iar apoi eliminai"o, pentru a observa mai bine efectul
su.
0(emplul 4. 9
L5678M
L5E)M
L6I68EMte#t1L?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%M6e#tul preformatatL?5CML5+M
cesta este un te#t normal L,M
$rar:
8uni
0:BB +omana
D.BB 7atematica
CB:BB 9eografie
CC.BB Istorie
CF.BB <izicaL,M
cesta este te#tul de mai sus preformatat
L,+EM
$rar:
8uni
0:BB +omana
D.BB 7atematica
CB:BB 9eografie
CC.BB Istorie
CF.BB <izica
L?,+EM
L?'$)KM
L?5678M
). Centrarea textu!ui
a cum am vzut mai sus, afiarea te#tului centrat n pagin se poate face cu ajutorul etic!etei
L,M avnd atributul align setat la valoarea %center%.
$ alt posibilitate de a realiza acest lucru este de a utiliza o etic!et dedicat, incluznd te#tul
ntre etic!etele
?C0G!0-C ?/C0G!0-C. Etic!eta L&E>6E+M este o etic!et container, prezena etic!etei de
nc!idere fiind obligatorie.
E#emplul G.0 realizeaz centrarea unui te#t.
0(emplul 4. ;
L5678M
L5E)M
L6I68EMte#t0L?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%M&entrarea te#tului L?5CML5+M
L&E>6E+M
cesta este un te#t centrat. cesta este un te#t centrat. cesta este un te#t centrat. cesta este un
te#t centrat. cesta este un te#t centrat. cesta este un te#t centrat. cesta este un te#t centrat. cesta
este un te#t centrat.
L?&E>6E+M
L?'$)KM
L?5678M
spectul paginii descrise n e#emplul de mai sus este cel din <igura G.D.
+. 1'iarea textu!ui pe o sin&ur* !inie
=n cazul cnd se dorete afiarea unui te#t pe o singur linie, c!iar dac acest lucru nseamn
depirea marginii ferestrei i derularea acestuia pe orizontal, se include blocul de te#t ntre etic!etele
?GH>-C ?/GH>-C.
ceast etic!et mpiedic bro;serul s limiteze lungimea liniei la dimensiunea ferestrei.
E#emplul G.D ilustreaz folosirea etic!etei L>$'+M, pagina avnd aspectul din <igura G.CB.
0(emplul 4. 9
L5678M
L5E)M
L6I68EMte#tDL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%M6e#tul pe o singura linie L?5CML5+M
L>$'+M
cesta este un te#t care va fi afisat pe o singura linie, c!iar daca depaseste dimensiunile unei
ferestre obisnuite. ,uteti verifica acest fapt prin reducerea dimensiunilor ferestrei bro;serului.
L?>$'+M
L?'$)KM
L?5678M
,. $!ocu! ?@ABC
$ alt modalitate de delimitare i de formatare a unui bloc de te#t este folosirea etic!etei
container ?@ABC ?/@ABC. ,rezena etic!etei de nc!idere este obligatorie.
Etic!eta L)IUM realizeaz divizarea unui document 5678 n seciuni distincte, diviziune n care
pot fi incluse, pe lng te#t, i alte elemente: legturi, imagini, formulare. &a i n cazul etic!etei pentru
introducerea paragrafelor, etic!eta L)IUM admite atributul ali6n, pentru alinierea te#tului. Ualorile
posibile ale acestui atribut, deja cunoscute, sunt:
left " aliniere la stnga
center " aliniere la centru
rig!t " aliniere la dreapta
linierea precizat de atributul align al blocului are efect asupra tuturor elementelor incluse n
blocul L)IUM. 'locul L)IUM admite i atributul nowrap, care interzice ntreruperea rndurilor de
ctre bro;ser)
=n documentul descris n E#emplul G.CB este ilustrat utilizarea acestei etic!ete. ,agina va avea
aspectul redat n <igura G.CC.
0(emplul 4. 1D
L5678M
L5E)M
L6I68EMte#tCBL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%M'locul divL?5CML5+M
ceasta linie este o linie de te#t normala.
L)IU alignS%rig!t%M
ceasta este prima sectiune a te#tului, aliniata dreapta.L'+M
L?)IUM
L)IU alignS%center%M
ceasta este a doua sectiune a te#tului, aliniata central.L'+M
L?)IUM
L)IU alignS%left%M
ceasta este a treia sectiune a te#tului, aliniata stanga.L'+M
L?)IUM
L?'$)KM
L?5678M
3. Linii ori.onta!e
=ntr"o pagina *eb pot fi inserate linii orizontale care au rolul de a delimita diferitele zone ale
paginii sau de a mbunti aspectul ei estetic. cest lucru se face cu ajutorul etic!etei ?-C. Etic!eta
L5+M nu este o etic!et container deci nu e#ist o etic!et de nc!idere.
,entru a configura o linie orizontal se utilizeaz urmtoarele atribute ale etic!etei L5+M:
ali6n " permite alinierea liniei orizontale. Ualorile posibile sunt left, center i rig!t
width " specific lungimea liniei " lungimea poate fi stabilit n pi#eli sau n procente din limea
ecranului.
si.e " specific grosimea liniei, e#primat n pi#eli
color " permite definirea culorii liniei
tributele etic!etei L5+M sunt ilustrate n E#emplul G.CC.
0(emplul 4. 11
L5678M
L5E)M
L6I68EMte#tCCL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%M 8inii orizontale L?5CM
8inie aliniata la stanga, lungime CBB2, grosime F L5+M
8inie aliniata in centru , lungime GB2, grosime G pi#eli.
L5+ alignS%center% ;idt!S%GB2% sizeS%G% colorS%blacI%M
8inie aliniata la dreapta , lungime CGB de pi#eli, grosime CF pi#eli , de culoare rosie.
L5+ alignS%rig!t% ;idt!SCGB sizeSCF colorS%red%M
L?'$)KM
L?5678M
)in <igura G.CF care red aspectul paginii descrise n e#emplul anterior se poate observa c
simpla prezen a etic!etei L5+M fr nici un fel de atribute duce la afiarea unei linii predefinite, de
lungime egal cu CBB2 din pagin i grosimea egal cu F pi#eli.
tributul color al etic!etei L5+M nu este suportat de bro;serul >etscape.
=n e#emplul urmtor /E#emplul G.CF3 vom ilustra modul n care etic!eta L)IUM aliniaz
elementele coninute n interiorul su, n cazul nostru te#t i linii orizontale. ,agina descris n acest
e#emplu va avea aspectul din <igura G.CH.
0(emplul 4. 1/
L5678M
L5E)M
L6I68EMte#tCFL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%M8inii orizontaleL?5CML5+M
8inia de mai jos este aliniata la stanga
L5+ sizeS%H% colorS%blue% ;idt!S%JB2% alignS%left%M
8iniile de mai jos sunt aliniate la centru cu ajutorul blocului )IU
L)IU alignS%center%M
8inii aliniate la centru
L5+ sizeS%CB% colorS%cEan% ;idt!S%GB2%M
L5+ sizeS%G% colorS%navE% ;idt!S%JBB%M
L?)IUM
L?'$)KM
L5678M
4. (nserarea unei adrese pota!e
)ac ntr"o pagin *eb trebuie inclus o adres potal, atunci putem folosi etic!eta urmtoare:
?8@@-0''C ?/8@@-0''C.
Etic!eta L))+E((M este o etic!et logic i are drept efect, n cele mai multe bro;sere,
afiarea te#tului cu caractere italice.
=n E#emplul G.CH este inserat n pagin o adres, aspectul paginii fiind cel din <igura G.CJ.
0(emplul 4. 11
L5678M
L5E)M
L6I68EMte#tCHL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%M dresa L?5CML5+M
dresa firmei noastre este
L))+E((M
9olden*eb &onsult L'+M
(tr. ,aradisului, >r. CL'+M
'ucuresti
L?))+E((M
L?'$)KM
L?5678M
1;. (nserarea unui citat
,entru a insera un citat ntr"un te#t se pot folosi dou etic!ete, n funcie de dimensiunea citatului.
stfel, dac citatul depete cteva linii, se folosete etic!eta ?>#HCOP+H!0C
?/>#HCOP+H!0C.
Efectul acestei etic!ete este afiarea indentat a te#tului cuprins ntre etic!eta de nceput i cea de
sfrit /n majoritatea bro;serelor3 sau afiarea acestuia cu caractere italice /rareori3.
)ac dorim ca ntr"un te#t s citam un termen, titlul unei lucrri sau s dm o referin, putem
include te#tul respectiv ntre etic!etele ?CA!0C ?/CA!0C.
=n cele mai multe dintre bro;sere, te#tul inclus ntre etic!etele L&I6EM va fi afiat cu caractere
italice.
E#emplul G.CJ ilustreaz modul de folosire al celor dou etic!ete. ,agina descris n e#emplu are
aspectul din <igura G.CG.
0(emplul 4. 13
L5678M
L5E)M
L6I68EMte#tCJL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%MInserarea unui citatL?5CML5+M
6e#tul de mai jos este un citat
L'8$&X[-$6EM
,robabilitatea ca o felie de paine unsa cu unt sa cada pe covor cu fata unsa in jos este direct
proportionala cu valoarea covorului
L?'8$&X[-$6EM
&itatul de mai sus face parte din L&I6EM8egile lui 7urp!EL?&I6EM
L?'$)KM
L?5678M
11. (nserarea caractere!or specia!e
)ei este impropriu s numim caracterul %blanI% sau space un caracter special, avnd n vedere
frecvena cu care este folosit, totui acesta, ca i alte caractere, este inserat n pagin cu ajutorul unei
comenzi speciale: comanda Q /comanda ampersand3.
a cum tii deja, indiferent cte spaii vom introduce atunci cnd editm documentul 5678,
bro;serul le va ignora i va afia cuvintele cu un singur spaiu ntre ele. ,entru a fora introducerea
spaiilor suplimentare se folosete comanda \nbsp] /no break space3.
8ten)ie
&omanda ncepe cu simbolul Q /ampersand3 i se termin cu R /punct i virgul3.
=n E#emplul G.CG este ilustrat modul cum pot fi spaiate cuvintele folosind comanda \nbsp]
0(emplul 4. 14
L5678M
L5E)M
L6I68EMte#tCGL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%MInserarea caracterelor specialeL?5CML5+M
L<$>6 sizeS%F% faceS%arial%M
&uvintele\nbsp] \nbsp] \nbsp] din\nbsp] \nbsp] \nbsp] acest\nbsp] \nbsp] \nbsp]
te#t\nbsp] \nbsp] \nbsp] sunt\nbsp] \nbsp] \nbsp] despartite\nbsp] \nbsp] \nbsp] de\nbsp]
\nbsp] \nbsp] grupuri\nbsp] \nbsp] \nbsp] de\nbsp] \nbsp] \nbsp] trei\nbsp] \nbsp] \nbsp]
spatii.
L?<$>6M
L?'$)KM
L?5678M
)up cum observai din <igura G.CA cuvintele sunt desprite prin trei spaii n loc de unul singur.
,utei aduga oricte spaii dorii n acest mod. )e asemenea, pentru a indenta un te#t, putei insera la
nceputul fiecrei linii numrul de comenzi \nbsp] egal cu numrul de spaii cu care vrei s indentai
te#tul.
Iat mai jos un tabel cu comenzile necesare pentru a insera n te#t cele mai cunoscute caractere.
!abelul 4. 1

@enumir
e caracter
-epre.en
tarea 6ra5ic,
Comand
a !"#
(paiu
liber
\nbsp]
&opErig!t ^ \copE]
6rademar
I
_ \RCGH]
+egistere
d
`
\reg] sau
\RC1J]
7ai mic
dect
L \lt]
7ai mare
dect
M \gt]
mpersa
nd
\ \amp]
9!ilimele % \Tuot]
&ent a \RCAF
-n sfert b \RC00
$
jumtate
c \RC0D
6rei
sferturi
d \RCDB
9rade e \RC1A
12. Su&estii pri"ind aspectu! textu!ui
spectul te#tului ntr"o pagin *eb este esenial pentru calitatea acesteia. -n te#t lizibil, scris cu
caractere de dimensiune potrivit, bine organizat i aezat n pagin va face din pagina dumneavoastr
un mediu accesibil i prietenos care l va stimula pe vizitatorul acesteia s parcurg cu plcere
informaiile oferite.
Iat cteva sfaturi referitoare la aspectul paginilor *eb, menite s v ajute la crearea unor te#te
lizibile, ct mai uor de parcurs de ctre cititori.
>u folosii fonturi de dimensiuni prea mici sau fonturi cu serife, cum este 6imes >e;
+oman. )ei este tipul cel mai utilizat pentru publicaiile tiprite, te#tele scrise cu 6imes >e;
+oman sunt mai greu de citit de pe monitor. ,referai tipurile rial, Uerdana, 5elvetica.
>u folosii numai litere mari /majuscule3. 6e#tele scrise cu majuscule sunt mai greu de
citit.
>u facei e#ces de caractere aldine /ngroate, bold3. 8imitai"v la a accentua cuvinte
sau poriuni reduse din te#t. )e asemenea, nu folosii caractere cursive /nclinate, sau italice3 n
e#ces.
>u folosii prea multe tipuri de fonturi i nici tipuri de fonturi rare. <olosirea unui mare
numr de fonturi de dimensiuni i culori diferite va face ca paginile s arate ncrcate i s fie greu
de citit. <olosirea tipurilor de fonturi rare aduce dup sine riscul ca vizitatorul s nu le aib instalate
pe computerul propriu, astfel c te#tul va fi afiat de bro;ser cu fonturile prestabilite.
>u aranjai te#tul n pagin pe dou coloane. ceasta este o practic obinuit n ziare i
reviste dar nu este potrivit ntr"o pagin *eb deoarece foreaz vizitatorul ca odat ajuns la baza
paginii s o deruleze din nou pentru a citi ce"a de"a dou coloan.
Este bine s folosii fiecare etic!et n scopul pentru care a fost ea definit. >u folosii
etic!etele de titlu pentru a accentua anumite pri ale te#tului care nu sunt titluri. >u folosii
etic!eta L))+E((M pentru a insera alte te#te dect adrese sau etic!eta L&I6EM pentru a realiza
scrierea cu caractere italice a te#tului.
7otoarele de cutare inde#eaz paginile *eb i n funcie de elementele /etic!etele3 care sunt
incluse n ele iar folosirea lor neadecvat conduce la o inde#are eronat a paginii dumneavoastr.
7ulte motoare de cutare scaneaz pagina n cutarea titlurilor i pe baza lor construiesc o sc!i
a paginii.
)ac vei folosi etic!etele de titlu pentru a accentua anumite pri ale te#tului /operaie pe care o
putei realiza n mod corect folosind etic!eta L<$>6M3 vei oferi informaii eronate motoarelor de
cutare. =n acest fel, scad ansele ca paginile dumneavoastr s fie identificate i citite de cei interesai.
8ten)ieM
>u uitai c paginile vor fi publicate pe *eb, unde, pentru a"i atinge scopul, adic pentru a fi
citite, trebuie mai nti descoperite de cititori, cel mai frecvent prin intermediul motoarelor de cutare.
13. -e.umat
'ro;serul afieaz te#tele cu cte un singur spaiu ntre cuvinte i nu recunoate sfritul de linie
i nceputul unei linii noi. Elementele de formatare a te#tului se introduc n documentul 5678 prin
intermediul unor etic!ete specifice:
trecerea la un rnd nou: etic!eta L'+M
L'+ clearS%left, rig!t, all%Mte#t
introducerea unui titlu: etic!etele L5CM " L5AM
L5n alignS%left, rig!t, center%Mte#tL?5nM
introducerea unui paragraf: etic!eta L,M L?,M
L, alignS%left, rig!t, center% no;rapMte#tL?,M
preformatarea te#tului: etic!eta L,+EM L?,+EM
L,+EMte#tL?,+EM
centrarea te#tului: etic!eta L&E>6E+M L?&E>6E+M
L&E>6E+Mte#tL?&E>6E+M
afiarea te#tului pe o singur line: etic!eta L>$'+M L?>$'+M
L>$'+Mte#tL?>$'+M
crearea unui diviziuni n te#t: etic!eta L)IUM L?)IUM
L)IU alignS%left, rig!t, center%Mte#tL?)IUM
inserarea unei linii orizontale: etic!eta L5+M
L5+ sizeS%valoare% ;idt!S%valoare% colorS%R+9' sau numeVculoare% alignS%left, rig!t,
center%M
inserarea unei adrese: etic!eta L))+E((M L?))+E((M
L))+E((Mte#tL?))+E((M
inserarea unui citat: etic!etele L'8$&X[-$6EM L?'8$&X[-$6EM i L&I6EM
L?&I6EM
L'8$&X[-$6EMte#tL?'8$&X[-$6EM
L&I6EMte#tL?&I6EM
inserarea caracterelor speciale prin comanda QR
14. Test
/. Care este rolul etichetei L'+M9
a3 6recerea la un rnd nou
a3 Inserarea unei linii libere n te#t
b3 Inserarea unei linii orizontale
&entru ca broserul s afi7e8e textul a7a cum a fost el formatat 6n documentul #%M( se folose7te
eticheta4
a3 L,M
a3 L,+EM
b3 L)IUM
Ce se va afi7a 6n urmtorul exemplu9
L,M6e#tC
L, alignS%rig!t%M6e#tF
a3 6e#tC i 6e#tF vor fi aliniate la dreapta, cu o linie liber ntre ele
a3 6e#tC va fi aliniat la stnga, 6e#tF va fi aliniat la dreapta, cu o linie liber ntre ele
b3 6e#tC i 6e#tF vor fi scrise pe aceeai linie
&entru a scrie un titlu de dimensiune maxim folosim eticheta4
a3 L5CM
a3 L5AM
b3 L51M
&entru a afi7a un text pe o singura linie4
a3 folosim etic!eta L'+M
a3 folosim etic!eta L>$'+M
b3 nu folosim nici o etic!et
Care dintre urmtoarele etichete nu reali8ea8 centrarea textului9
a3 L, alignS%center%M6e#tL?,M
a3 L&E>6E+M6e#tL?&E>6E+M
b3 L)IUM6e#tL?)IUM
Ce reali8ea8 eticheta L))+E((M9
a3 inserarea unui linI
a3 inserarea unei adrese de e"mail
b3 inserarea unei adrese potale
&entru a insera 6ntr!o pagin o linie ori8ontal standard folosim eticheta4
a3 L5+M
a3 L5+ ;idt!S%CBB%M
b3 L5+ sizeS%C%M
5ticheta L'8$&X[-$6EM folose7te la4
a3 indentarea te#tului
a3 scrierea te#tului cu caractere italice
b3 inserarea unui citat n te#t
Care dintre aceste afirmaii este fals9
a3 6oate spaiile i liniile libere introduse n te#t la editarea documentului 5678 sunt
afiate ntocmai de bro;ser)
a3 -n te#t scris pe aceeai linie cu o etic!et de titlu este afiat sub titlu, c!iar dac nu este
prezent etic!eta L'+M.
b3 ,entru a introduce spaii suplimentare n te#t se folosete comanda \nbsp]
2ormatarea te(tului
1. a3
/. b3
1. b3
3. a3
4. b3
7. c3
9. c3
;. a3
9. c3
1D. a3
Capitolul 7
#e6,turi <linE*uri=
#e6,turile /link"urile3 reprezint, poate, partea cea mai important a unei pagini *eb. Ele
transform un te#t obinuit n !Eperte#t " un nou tip de te#t, diferit de cel din clasicele pagini de carte,
care permite trecerea rapid de la o informaie aflat pe un anumit computer la alt informaie
memorat pe un alt computer localizat oriunde n lume.
1. 1dresa -L
,entru a stabili o legtur cu o alt pagin /un alt fiier3 trebuie s specificm adresa +-# a
acestuia. -+8 este un acronim, de la Cniform Resource (ocator, i reprezint adresa de identificare a
unei resurse /a unui fiier3 aflat pe calculatorul propriu sau pe orice alt calculator din lume conectat la
Internet. $ adres -+8 const dintr"un ir de caractere care identific n mod unic o anumit resurs,
oferind informaii despre numele serverului pe care este stocat acea resurs precum i despre
localizarea ei.
E#ist mai multe etic!ete 5678 care folosesc adresa -+8 drept valoare pentru anumite atribute:
etic!etele care introduc legturi, imagini sau formulare. 6oate acestea folosesc aceeai sinta# a adresei
-+8 pentru a specifica locaia unei anumite resurse, indiferent de tipul acesteia.
(inta#a general a unei adrese -+8 este:
schema://server_6a.da:port/calea_catre_5isier
unde:
schema " reprezint unul dintre protocoalele de transfer al informaiilor, cum ar fi 566,, <6,,
9op!er, 6elnet, etc.
server_6a.da " reprezint identificatorul serverului pe care este gzduit fiierul respectiv. cest
identificator poate fi adresa I, a serverului sau numele su.
port " reprezint numrul portului de comunicaie prin intermediul cruia bro;serul se
conecteaz la server. (erverele dein mai multe astfel de porturi, fiecare servind unui alt tip de
comunicaie: 566,, <6,, pot electronic, etc. ,ortul prestabilit n cazul transferului prin 566, are
numrul 0B. >umrul portului trebuie precizat numai n cazul cnd acesta este diferit de 0B.
calea_catre_5isier " reprezint localizarea ierar!ic a fiierului n sistemul de directoare de pe
server. ceasta const ntr"unul sau mai multe nume desprite prin caracterul %?% /slash3
Iat cteva e#emple de adrese -+8 mpreun cu e#plicaii referitoare la sinta#a lor:
!ttp:??;;;.autor.com?carti.!tml
=n acest e#emplu adresa -+8 indic documentul 5678 numit carti)html care se afl directorul
rdcin al serverului ;;;.autor.com
!ttp:??;;;.autor.com?
ceast adres indic prima pagin /home page3 a aceluiai server.
!ttp:??;;;.autor.com:0B0B?
E#emplul de mai sus indic de asemenea spre prima pagin a serverului ;;;.autor.com, dar
specificnd i numrul portului care este diferit de cel prestabilit.
!ttp:??;;;.autor.com?carti.!tmlR;ebdesign
=n acest e#emplu este indicat calea spre documentul 5678 carti)html aflat pe acelai server, dar
specificndu"se o anumit seciune a acestui document, seciune denumit ebdesign.
=n cazul cnd fiierul spre care este fcut legtura este stocat pe propriul calculator se folosete o
adres -+8 de forma urmtoare:
5ile://server/calea_catre_5isier
unde:
server " reprezint numele computerului pe care este stocat fiierul /acelai pe care ruleaz
bro;serul3. =n acest caz, bro;serul va accesa fiierul folosind facilitile obinuite ale sistemului de
operare de pe computerul propriu.
calea_catre_5isier " reprezint localizarea fiierului n structura de directoare conform regulilor
sistemului de operare
>umele computerului personal poate fi nlocuit cu numele generic :localhost:. =n acest caz,
adresa -+8 poate avea urmtoarea form:
5ile://localhost/calea_catre_5isier
)e e#emplu fiierul culori)html care este salvat n folderul de lucru "ork din M$ Documents pe
computerul personal va avea urmtoarea adres -+8:
file:??local!ost?&:f7E )ocumentsf*orIfculori.!tml
6ermenul localhost poate fi omis, deoarece este numele prestabilit al computerului propriu. =n
acest caz este necesar prezena unui caracter %?% suplimentar:
file:???&:f7E )ocumentsf*orIfculori.!tml
=n practic, atunci cnd dorim s adresm un fiier aflat pe computerul propriu putem omite prima
parte a adresei -+8 obinnd urmtoarea form:
&:f7E )ocumentsf*orIfculori.!tml
8ten)ieM
(e poate observa c n cazul resurselor stocate pe servere e#terne, numele directoarelor care fac
parte din calea ctre resurs sunt desprite prin caracterul %/% /slash3.
8a fiierele stocate pe computerul propriu, directoarele i subdirectoarele care formeaz calea
ctre fiier sunt desprite prin caracterul %S% /backslash3. &ele dou moduri de scriere sunt specifice
celor dou sisteme de operare: ->IW, respectiv )$("*indo;s.
)eoarece marea majoritate a serverelor *eb folosesc sistemul de operare ->IW, calea ctre
resursele stocate pe ele se scrie respectnd conveniile acestui sistem. 7ai mult, aceast convenie s"a
e#tins i la adresele -+8 referite de pe sisteme *indo;s. stfel, dac dorii s adresai un fiier numit
foto);pg aflat pe discul C4, n M$ Documents, folderul 'magini putei folosi adresa -+8:
&:?7E )ocuments?Imagini?foto.jpg
2. 1drese a<so!ute i adrese re!ati"e
,entru a putea localiza un fiier n structura ierar!ic de directoare, n scopul de a stabili o
legtur ctre el, se poate folosi adresarea absolut, sau adresarea relativ,.
8dresa absolut, a unui fiier conine calea precis i complet ctre fiierul respectiv pornind de
la vrful ierar!iei de directoare:
&:?7anual 5678?E#emple?culori.!tml
<iierul culori)html se afl plasat pe discul C4, n directorul Manual #%M(, subdirectorul
5xemple.
8dresa relativ, a unui fiier precizeaz poziia acestuia n raport cu documentul 5678 din care
este apelat. Uom reveni ceva mai jos asupra acestui subiect.
3. Sta<i!irea !e&*turi!or
,entru a insera legturi ntr"un document 5678 folosim etic!eta ?8C ?/8C.
Etic!eta LM este o etic!et container, prezena etic!etei de nc!idere fiind obligatorie.
tributul obligatoriu al etic!etei LM este hre5 /#$pertext Reference3 care primete ca valoare
adresa -+8 a fiierului cu care dorim s stabilim legtura. cest fiier poate fi un document 5678, o
imagine sau un fiier de alt tip. )ocumentul 5678 n care este prezent legtura se numete surs, iar
fiierul ctre care este fcut legtura se numete )int,. (inta#a etic!etei LM este urmtoarea:
L !refS%adresaV-+8%Mte#t sau imagineL?M
=ntre etic!etele LM i L?M poate fi plasat un te#t obinuit sau o imagine. =n mod prestabilit
te#tul inclus ntre etic!etele LM este afiat subliniat i de culoare albastr iar imaginile au un c!enar
de culoare albastr. <olosirea etic!etei LM imbricat cu etic!ete de formatare a te#tului, fonturi, liste
sau tabele se face plasnd etic!eta LM 6n interiorul acestora.
=n acest sens, standardul 5678 consider incorect o construcie ca aceasta:
L !refS%adresaV-+8%ML<$>6 faceS%tip%M8egaturaL?<$>6ML?M
=n locul ei vom folosi construcia:
L<$>6 faceS%tip%ML !refS%adresaV-+8%M8egaturaL?ML?<$>6M
8ten)ieM
>u este permis imbricarea mai multor etic!ete LM.
=n funcie de localizarea intei /a resursei referite de legtur3 putem clasifica legturile astfel:
legturi n cadrul aceleiai pagini /ancore3
legturi ctre o pagin aflat n acelai folder
legturi ctre o pagin aflat n alt folder
legturi ctre pagini e#terne
4. 1ncore - !e&*turi n cadru! ace!eiai pa&ini
,entru a facilita navigarea ntr"o pagin care conine un te#t de mari dimensiuni se pot insera n
acesta anumite puncte de reper ctre care se definesc legturi. cestea se numesc ancore.
,entru a plasa o ancor sunt necesare dou elemente:
C. &unctul spre care dorim s facem legtura.
cesta se definete insernd n punctul din pagin dorit /de obicei n dreptul unui anumit element
din pagin: un titlu, o imagine, o alt legtur, un tabel, etc.3 etic!eta LM, nsoit de atributul name
care primete ca valoare un nume de identificare atribuit ancorei /de e#emplu %numeVancora% 3. ,rin
urmare, identificarea punctului spre care se face legtura se realizeaz astfel:
L nameS%numeVancora%M L?M
C. #e6,tura propriu*.is,T care se definete folosind atributul hre5 al etic!etei LM. =n
e#emplul de mai sus, acesta primete ca valoare %RnumeVancora%. (tabilirea legturii se realizeaz
dup urmtoarea sinta#:
L !refS%RnumeVancora%Mte#t e#plicativL?M
6e#tul e#plicativ va fi afiat n mod diferit, n format !EperlinI, subliniat i de culoare prestabilit
albastr.
=n momentul cnd se efectueaz clicI cu mouse"ul pe te#t e#plicativ se realizeaz un salt n
cadrul paginii, bro;serul afind partea din pagin care ncepe de la elementul n dreptul cruia a fost
inserat ancora.
8ten)ieM
,rezena semnului #, plasat naintea numelui ancorei, este obligatorie. cesta indic bro;serului
faptul c este vorba despre o legtur intern, n cadrul paginii. =n cazul n care semnul este omis,
bro;serul va cuta acest nume n afara paginii, unde, evident, nu l va gsi.
,entru a introduce o legtur ctre o ancor definit n alt document /alt pagin3 aflat n acelai
director, atributul !ref primete o valoare de forma:
!refS%numeVfisier.!tmlRnumeVancora%.
E#emplul A.C ilustreaz cele dou situaii. ,entru a e#emplifica modul n care poate fi inserat o
ancor ntr"un alt document i cum poate fi ea referit, am inserat n documentul textB<)html ancora L
nameS%citat%M.
5= 0(emplul 7. 1
L5678M
L5E)M
L6I68EMlegaturiCL?6I68EM
L?5E)M
L'$)KM
L nameS%ancoraC%ML?M
L5C alignS%center%Mncore definite in acelasi documentL?5CML5+M
L'+ML'+M'L'+M&L'+M)L'+ME
L'+M<L'+M9L'+M5L'+MIL'+M:
L'+MXL'+M8L'+M7L'+M>L'+M$
L'+M,L'+M+L'+M(L'+M6L'+M-
L'+MUL'+M*L'+MgL'+MWL'+M
L !refS%RancoraC%M(usL?M
L'+ML'+M
L5C alignS%center% Mncore definite in alt documentL?5CML5+ML,M
&licI
L !refS%te#tCJ.!tmlRcitat%MI&I L?M
pentru a desc!ide un document situat in alta pagina
L?'$)KM
L?5678M
spectul paginii descrise n acest e#emplu este cel din <igura A.C .
Hbserva)ie
&onstruciile de mai jos au acelai rol, i anume inserarea unei ancore denumit %ancoraC% n
punctul din pagin care conine elementul %E8E7E>6%.
L nameS%ancoraC%ME8E7E>6L?M
L nameS%ancoraC%ML?ME8E7E>6
=n mod normal, etic!eta LM fiind o etic!et container, ntre etic!etele de desc!idere i de
nc!idere trebuie s figureze un te#t. 6otui, n e#emplul de mai sus, dorind s inserm o ancor n
dreptul titlului, am folosit cea de"a doua construcie:
L nameS%ancoraC%ML?M
L5C alignS%center%Mncore definite in acelasi documentL?5CM
7otivul este acela c este considerat o practic incorect includerea etic!etelor de titlu ntre
etic!etele LM i L?M.
(e poate utiliza i construcia urmtoare:
L5C alignS%center%ML nameS%ancoraC%Mncore definite in acelasi documentL?ML?5CM
). Le&*tura c*tre o pa&in* a'!at* n ace!ai director 8'o!der9
,entru a realiza o legtur ctre o pagin aflat n acelai director se procedeaz astfel:
L !refS%numeVfisier.!tml%Mte#t e#plicativL?M
unde:
!ref reprezint atributul care stabilete calea ctre inta cu care se face legtura. )ac fiierul int
este n acelai director, atributul primete ca valoare c!iar numele fiierului.
te#t e#plicativ " reprezint te#tul pe care se face clicI cu mouse"ul pentru a activa legtura. /)e
e#emplu
%&licI aici% 3. cest te#t este afiat diferit fa de restul te#tului " n general, subliniat i de
culoare albastr.
=n E#emplul A.F este realizat o legtur reciproc ntre dou pagini aflate n folderul de lucru
"ork, pagina avnd aspectul din <igura A.F.
6= 0(emplul 7. /
L5678M
L5E)M
L6I68EMlegaturiFL?6I68EM
L?5E)M
L'$)KM
L5CM,agina C L?5CML5+M
L !refS%legaturiH.!tml%M8inI catre pagina F L?M
L?'$)KM
L?5678M
(alvai acest e#emplu cu numele legaturi>)html iar e#emplul urmtor /E#emplul A.H3 cu numele
legaturiA)html.
h= 0(emplul 7. 1
L5678M
L5E)M
L6I68EMlegaturiHL?6I68EM
L?5E)M
L'$)KM
L5CM,agina F L?5CML5+M
L !refS%legaturiF.!tml%M8inI catre pagina C L?M
L?'$)KM
L?5678M
8a fel cum ai procedat i pn acum, desc!idei una dintre cele dou pagini cu bro;serul i
testai funcionarea legturii dintre ele.
mbele documente 5678 trebuie salvate n acelai folder. Uei observa c atunci cnd v aflai
n ,agina C i facei clicI cu mouse"ul pe te#tul 8inI catre ,agina F se va desc!ide cel de"al doilea
document 5678 i invers, legtura dintre cele dou pagini fiind astfel reciproc.
8ten)ieM
>umele fiierelor care reprezint valori ale atributului !ref sunt case sensitive. celai lucru se
ntmpl i cu te#tul care desemneaz valorile atributului name.
ceasta nseamn c fiierul legaturi?)html este diferit de fiierul (egaturi?)html, iar ancora L
nameS%ancoraC%M este diferit de L nameS%ncoraC%M
,entru a evita greelile, este recomandat s v denumii toate fiierele sau numele pentru ancore
cu litere mici.
+. Le&*tura c*tre o pa&in* !oca!i.at* n a!t director 8'o!der9
)ac pagina cu care vrem s facem legtura se afl pe acelai calculator, dar ntr"un alt folder,
atunci pentru a preciza poziia ei n structura de directoare se poate folosi adresarea relativ sau
adresarea absolut.
dresarea absolut, se realizeaz preciznd calea /path3 complet, pornind de la directorul
rdcin, prin care se poate ajunge la fiierul de care vrem s legm pagina.
)e e#emplu, dac fiierul culoriB)html se afl pe discul C4,n folderul M$ Documents, n folderul
"ork, o legtur ctre el se va face n modul urmtor:
L !refS%&:?7E )ocuments?*orI?culoriC.!tmlM8inIL?M
dresarea relativ, precizeaz calea ctre documentul cu care facem legtura pornind de la
documentul n care ne aflm. ,entru a urca un nivel n structura de directoare se folosete irul de
caractere %..? %
0(emplu
( presupunem c ne aflm ntr"un document 5678 numit legaturi>)html plasat n folderul de
lucru "ork. =n afar de folderul "ork n care lucrm, n M$ Documents se mai afl un folder, numit
'magini, ca n structura prezentat n (c!ema A.C.

)orim s realizm o legtur cu un fiier numit trandafir)gif din folderul 'magini.
=n acest caz, etic!eta LM, plasat n documentul legaturi>)!tml, va avea urmtoarea form:
L !refS%..?Imagini?trandafir.gif%M)esc!ide imagineaL?M
(emnificaia este urmtoarea:
,rin folosirea irului de caractere %..?% /punct punct slas!3 se urc un nivel n ierar!ia de
directoare, n raport cu directorul curent. ,rin urmare, ntruct folderul curent, n care se afl pagina de
pornire este
C42M$ Documents2"ork, prin utilizarea irului de caractere %..?% se ajunge n folderul printe, care
este C42M$ Documents) )e aici se continu calea n folderul 'magini, dup care se specific numele
fiierului din acest folder cu care vrem s stabilim legtura.
0(emplu
( presupunem c ne aflm n documentul legaturi>)html poziionat ca n (c!ema A.F.
C:
C:
=or>
M? @ocuments
(ma&ini
!e&aturi2./tm!
tranda'ir.&i'
e
Sc/ema +.1

)orim s stabilim o legtur cu un fiier numit text>)html care se afl n directorul 5xemple
/directorul printe al folderului nostru, (egaturi3. tunci referirea se va face astfel:
L !refS%..?te#tF.!tml%M8inI la te#tL?M
m urcat un nivel n ierar!ie ajungnd n directorul 5xemple i am specificat numele fiierului cu
care dorim s facem legtura.
)ac fiierul text>)html se afl cu dou nivele mai sus fa de folderul n care lucrm, adic dac
se afl n folderul Manual #%M(, atunci adresarea se face astfel:
L !refS%..?..?te#tF.!tml%M8inI la te#tL?M
=n general, de cte ori este posibil, este de preferat s folosii adresarea relativ, pentru ca
documentele 5678 s fie portabile /mutarea lor s nu invalideze legturile stabilite ntre diverse
documente3.
,. Le&*tura c*tre pa&ini externe
$ legtur ctre o pagina e#tern se realizeaz simplu, prin utilizarea etic!etei LM L?M,
specificnd adresa -+8 a paginii ca valoare a atributului !ref astfel:
!refS%!ttp:??-+8Vpagina%
+eamintim c specificarea adresei -+8 se poate face fie folosind numele serverului pe care este
stocat pagina fie adresa I, a acestuia. Evident, pentru ca linI"ul s funcioneze, trebuie ca utilizatorul
s fie conectat la Internet /lucru valabil pentru toate legturile e#terne3.
=n E#emplul A.J este stabilit o legtur ctre pagina de start Ka!oo.
Le&aturi
C:
C:
Manua! HTML
M? @ocuments
#xemp!e
Sc/ema +.2
!e&aturi2./tm! e
i= 0(emplul 7. 3
L5678M
L5E)M
L6I68EMlegaturiJL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%M8inI catre Ka!oo.comL?5CML5+M
L !refS%!ttp:??;;;.Ea!oo.com%M Ka!ooNL?M
L?'$)KM
L?5678M
spectul paginii este cel din <igura A.H.
-n atribut util al etic!etei LM este title. cesta determin apariia unei mici ferestre /tool tip3 n
pagina *eb cnd mouse"ul se afla pe o legtur, fereastr n care este afiat valoarea dat acestui
atribut, care are astfel menirea de a furniza informaii suplimentare despre semnificaia unei legturi.
E#emplul A.G ilustreaz utilitatea atributului title, aa cum reiese din <igura A.J.
K= 0(emplul 7. 4
L5678M
L5E)M
L6I68EMlegaturiGL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%Mtributul titleL?5CML5+M
L !refS%!ttp:??;;;.google.com% titleS%8egatura catre 9oogle.com%M9oogleL?M
L?'$)KM
L?5678M
3. 1!e&erea cu!ori!or pentru !e&*turi
m mai discutat despre acest subiect i la capitolul despre culori. =n mod prestabilit /default3 se
utilizeaz trei culori pentru legturi:
culoare pentru legturile nevi.itate /nu s"a efectuat nici un clicI pe ele3 " albastru
culoare pentru legturile vi.itate /s"a efectuat cel puin un clicI pe ele3 " violet
culoare pentru legturile active /deasupra crora se afl mouse"ul la un moment dat, dar nc nu
s"a efectuat clicI3 " rou
,entru a modifica dup preferine aceste culori se folosesc cele trei atribute ale etic!etei
L'$)KM:
linE pentru legturile nevizitate]
vlinE pentru legturile vizitate]
alinE pentru legturile active.
Ualorile pe care le pot lua aceste atribute sunt culori definite prin nume sau conform codului
!e#azecimal.
E#emplul A.A ilustreaz modul cum pot fi modificate culorile legturilor, aa cum se poate
observa din <igura A.G care red aspectul paginii descrise n e#emplu.
E= 0(emplul 7. 7
L5678M
L5E)M
L6I68EMlegaturiAL?6I68EM
L?5E)M
L'$)K linIS%Eello;% vlinIS%green% alinIS%magenta%M
L5C alignS%center%M(etarea culorilor pentru linI"uriL?5CML5+M
L'+Mgalben pentru legaturi, verde pentru legaturi vizitate si magenta pentru legaturi activeL'+M
L !refS%legaturiF.!tml%M8inI catre pagina C L?ML'+M
L !refS%legaturiH.!tml%M8inI catre pagina F L?M
L?'$)KM
L?5678M
4. ti!i.area potei e!ectronice 8e-mai!9
=ntr"o pagin *eb se pot afla legturi care permit lansarea n e#ecuie a aplicaiei de e#pediere a
mesajelor electronice a celui care viziteaz pagina. <cnd clicI pe te#tul care nsoete legtura,
programul de pota electronic al vizitatorului paginii se va desc!ide automat, avnd cmpul adresei
destinatarului, %6o:% deja completat cu adresa de mail specificat n pagin. ,entru a realiza acest lucru
se folosete comanda mailto: atributul !ref primind o valoare ca mai jos:
L !refS%mailto:adresaVe"mail%M
)ac pagina este vizualizat cu bro;serul Internet E#plorer iar vizitatorul are instalat un e"mail
manager, cum sunt de pild aplicaiile 7icrosoft $utlooI sau $utlooI E#pres, activarea legturii va
determina desc!iderea unuia dintre aceste programe. =n cazul n care managerul de e"mail default este
de alt tip dect aplicaia 7icrosoft, /Eudora, de e#emplu3 aceasta va porni de asemenea automat, cu o
nou pagin +end i cu adresa destinatarului pre"completat.
)ac pagina este vizualizat n >etscape, se va desc!ide programul de pot electronic
ncorporat n bro;ser)
=n e#emplul urmtor /E#emplul A.13, n momentul cnd vizitatorul paginii face clicI pe te#tul
%6rimitei un mesaj%, aplicaia de pot electronic este lansat automat, prin intermediul serviciului
mailto:, iar cmpul care trebuie completat cu adresa de mail a destinatarului mesajului este de
asemenea completat automat cu adresa autorhdomeniu.com aa cum rezult din
<igura A.A.
l= 0(emplul 7. 9
L5678M
L5E)M
L6I68EMlegaturi1L?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%ME#pediere de mesaje electronice
L?5CML5+M
L !refS%mailto:autorhdomeniu.com% titleS%adresa mea de mail%M
6rimiteti un mesaj L?M
L?'$)KM
L?5678M
1;. Le&*turi c*tre 'iiere oarecare
$ pagin *eb poate conine legturi nu doar ctre alte fiiere 5678, dar i ctre fiiere de orice
alt tip, aflate pe calculatorul propriu sau oriunde pe *eb. &a i n cazul legturilor cu alte pagini
/documente 56783 vom folosi etic!eta LM L?M, astfel:
L !refS%-+8VfisierVdestinatie%Mte#t e#plicativLM
>efiind vorba despre un fiier 5678, bro;serul nu va putea s l proceseze, astfel c va activa
procesul de transfer sau de descrcare /donload3, urmnd ca, dup transferul integral al fiierului,
utilizatorul s l desc!id cu un program adecvat.
=n E#emplul A.0, atunci cnd se efectueaz clicI pe legtur se desc!ide caseta de dialog .ile
donload care permite:
salvarea fiierului pe disc sau
desc!iderea fiierului n locaia curent
m= 0(emplul 7. ;
L5678M
L5E)M
L6I68EMlegaturi0L?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%M8egaturi catre fisiere oarecareL?5CML5+M
L !refS%!tml.zip%M
8inI catre fisierul do;nload.zip
L?M
L?'$)KM
L?5678M
<igura A.1 red efectul activrii unei legturi ctre un fiier oarecare.
11. @esc/iderea pa&ini!or re'erite printr-o !e&*tur*
,agina nou, apelat prin activarea unei legturi se poate desc!ide n dou moduri, n raport cu
pagina surs:
n aceeai fereastr
ntr"o fereastr nou
=n mod prestabilit, legturile desc!id pagina pe care o refer n fereastra curent. ceasta
nseamn c dac vei face clicI pe un linI, noua pagin se va ncrca n locul paginii deja desc!ise /n
aceeai instan a bro;serului3. ,entru a reveni la pagina anterioar trebuie s apsai butonul 1ack al
bro;serului.
cest comportament se poate sc!imba cu ajutorul valorilor atributului tar6et, asupra cruia vom
reveni la capitolul Cadre.
Uom meniona aici doar dou dintre aceste valori, corespunztoare celor dou situaii amintite.
,entru ca pagina apelat s se desc!id ntr"o fereastr nou, se utilizeaz sinta#a generic de mai
jos, n care atributul target are valoarea %VblanI%:
L !refS%adresaV-+8% targetS%V blanI%Mte#t e#plicativL?M
,entru ca pagina referit s se desc!id n aceeai fereastr cu pagina surs, atributului i se
asociaz valoarea %Vself%:
L !refS%adresaV-+8% targetS%Vself%Mte#t e#plicativL?M
<igura A.0 red modul n care se desc!ide o pagin ntr"o nou fereastr, aa cum este precizat n
E#emplul A.D.
n= 0(emplul 7. 9
L5678M
L5E)M
L6I68EMlegaturiDL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%M)esc!iderea paginii in alta fereastraL?5CM L5+M
,agina de mai jos se va desc!ide intr"o fereastra noua
L,M
L !refS%tabel culori.!tml% targetS%VblanI%M6abelul culorilorL?M
L?'$)KM
L?5678M
12. Crearea unei <are secundare de na"i&are
=n foarte multe site"uri ai observat, probabil, e#istena, n partea de jos a paginii, a unui bloc de
te#t care conine legturi ctre paginile care compun site"ul, legturile fiind delimitate de mici linii
verticale, ca n e#emplul de mai jos:
UCuloriU U2onturiU U>locuri de te(tU
-tilitatea acestei bare este evident legat de facilitarea navigrii n site, mai ales n cazurile cnd
dimensiunea paginii depete un ecran. =n acest caz, utilizatorul trebuie s deruleze la citire paginile
pe vertical, astfel c linI"urile de pe bara de navigare superioar nu mai sunt accesibile.
$ astfel de bar secundar de navigare se poate realiza procednd ca n E#emplul A.CB. Evident,
legturile vor face referire la fiierele 5678 dorite de dumneavoastr. $ pagin care conine o astfel
de bar de navigare va avea aspectul din <igura A.D.
o= 0(emplul 7. 1D
L5678M
L5E)M
L6I68EMlegaturiCBL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%M'ara de navigareL?5CML5+M
L5J alignS%center%M
L !refS%culoriC.!tml%Mi&uloriiL?M
L !refS%fonturiC.!tml%Mi<onturiiL?M
L !refS%te#tC.!tml%Mi<ormatarea te#tuluiiL?M
L?5JM
L?'$)KM
L?5678M
'ara vertical inserat ntre te#tele care trimit la paginile respective este de obicei plasat pe
tastatur pe aceeai tast cu caracterul %f% /backslash3. )ac dorii ca bara s fac parte din te#tul activ,
o vei insera ntre etic!etele LM i L?M, altminteri ea trebuie plasat n afara acestora, astfel:
iL !refS%culoriC.!tml%M&uloriL?Mi
13. -e.umat
dresa -+8 const dintr"un ir de caractere care identific n mod unic o anumit resurs oferind
informaii despre numele serverului pe care este stocat acea resurs i despre localizarea ei n structura
de directoare de pe server.
8egturile se introduc ntr"un document 5678 prin intermediul etic!etei container LM L?M
conform urmtoarei sinta#e generale:
L !refS%adresaV-+8% nameS%nume% titleS%te#t% targetS%tinta%Mte#t sau imagineL?M
=n funcie de locul unde este plasat documentul referit e#ist mai multe tipuri de legturi:
8egturi n cadrul aceleiai pagini /legturi interne, ancore3. ,entru a crea o legtur intern sunt
necesari doi pai: definirea numelui ancorei i stabilirea legturii .
8egturi cu pagini aflate n acelai director. ,entru a stabili o legtur cu o pagin aflat n acelai
director se specific drept valoare a atributului !ref c!iar numele fiierului 5678.
8egturi cu pagini aflate n alt director. ,entru a stabili locaia documentului cu care facem
legtura se poate folosi adresarea relativ /recomandat3 sau adresarea absolut.
8egturile e#terne. =n cazul legturilor e#terne, atributul !ref primete ca valoare adresa -+8 a
paginii respective.
(e pot stabili i legturi ctre fiiere oarecare /nu neaprat documente 56783. 8a activarea unei
astfel de legturi se desc!ide fereastra de donload a sistemului.
&u ajutorul comenzii mailto: se lanseaz automat n e#ecuie aplicaia de pot electronic a
vizitatorului paginii.
14. Test
3. Care dintre urmtoarele afirmaii este fals4
a3 Etic!eta LM servete la stabilirea unei legturi n cadrul aceleiai pagini
a3 Etic!eta LM servete la stabilirea unei legturi ctre un fiier aflat pe acelai calculator
b3 Etic!eta LM servete la scrierea te#tului cu caractere rial.
&entru a preci8a numele fi7ierului spre care se face legtura se folose7te atributul4
a3 name
a3 !ref
b3 file
Care este gre7eala din urmtoarea construcie9
L5FML nameS%Rgr%M9resealaL?ML5FM
a3 >u este nici o greeala.
a3 r fi trebuit formulat:
L5FML nameS%gr%M9resealaL?ML?5FM
b3 r fi trebuit formulat:
L nameS%Rgr%ML?ML5FM9resealaL?5FM
Ce reali8ea8 exemplul urmtor9
L nameS%sectiuneaC%M(ectiunea CL?M
a3 Insereaz o ancor n pagin i definete numele ei.
a3 (tabilete o legtur n cadrul paginii.
b3 (tabilete o legtura la fiierul sectiuneaB)html.
.i7ierul contact)html, referit 6n legtura de mai ;os4
L !refS%..?contact.!tml%M&ontactL?M
este locali8at 6n4
a3 acelai director ca i fiierul curent
a3 directorul printe al fiierului curent
b3 directorul aflat cu dou nivele mai sus dect directorul curent
:n documentul culori)html am inclus urmtoarea ancor4
L nameS%fundal%ML?M
:n acest ca8, construcia corect pentru a face legtura spre ea din cadrul unui alt document aflat
6n acela7i director este4
a3 L !refS%Rfundal%M'acIgroundL?M
a3 L !refS%culori.!tmlVfundal%M'acIgroundL?M
b3 L !refS%culori.!tmlRfundalM'acIgroundL?M
Care este aspectul unei legturi 6ntr!un text, 6n mod prestabilit DdefaultE9
a3 de culoare albastr i subliniat
a3 de culoare roie
b3 subliniat
Care dintre urmtoarele afirmaii este fals9
a3 >u este permis imbricarea mai multor etic!ete LM.
a3 >u este permis sc!imbarea culorilor legturilor.
b3 >u este permis referina la alte fiiere dect fiierele 5678.
&entru a stabili o legtura cu site!ul extern ;;;.booIs.com folosim construcia4
a3 L !refS%!ttp:??;;;.booIs.com%M
a3 L !refS%file:??;;;.booIs.com%M
b3 L !refS%booIs.com%M
.ie urmtoarea etichet inserat 6n pagin4
L !refS%mailto:utilizatorhdomeniu.comM(end mailL?M
Dac se execut click pe textul %(end mail%:
a3 (e desc!ide pagina ;;;.domeniu.com.
a3 (e desc!ide programul de mail al vizitatorului paginii.
b3 (e desc!ide csua de mail cu adresa specificat.
#e6,turi
1. c3
/. b3
1. b3
3. a3
4. b3
7. c3
9. a3
;. b3
9. a3
1D. b3
Capitolul 9
Ama6ini $i elemente multimedia
Ama6inile $i elementele multimedia constituie, fr ndoial, o latur interesant i spectaculoas
a oricrei pagini de *eb. ,utei include n paginile dumneavoastr fotografii, imagini animate, sunete
sau imagini video. tunci cnd sunt folosite n mod judicios, aceste elemente pot mbogi coninutul
paginilor *eb, oferindu"le un aspect atractiv i profesional. ,e de alt parte, folosirea lor n e#ces poate
da paginilor un aspect ncrcat i confuz i poate conduce la mrirea considerabil a timpului de
ncrcare al paginii.
1. 0ormate!e 'iiere!or &ra'ice
Imaginile sunt stocate n fiiere cu diverse formate, cele mai folosite pe *eb fiind, aa cum era
firesc, cele care confer un raport optim ntre calitatea imaginii i dimensiunile fiierului.
ceast opiune este determinat de faptul c majoritatea utilizatorilor Internetului dispun de
cone#iuni telefonice dial"up, cu viteze destul de mici, astfel c timpul de ncrcare al fiierelor, care
depinde de dimensiunea acestora, devine un factor determinant.
)ou dintre cele mai utilizate tipuri de fiiere grafice sunt J&0F /Foint &hotographic 5xperts
,roup3 i FA2 /,raphics 'nterchange .ormat3.
0ormatu! A(0
<ormatul 9I< /)gif3 folosete FGA de culori i este ideal pentru icon"uri, ilustraii i animaie.
cest format utilizeaz o te!nologie special de comprimare care reduce semnificativ dimensiunile
fiierelor grafice pentru un transfer mai rapid prin reea. =n procesul de comprimare se pstreaz toate
caracteristicile imaginii originale, astfel c dup decomprimare imaginea are acelai aspect ca i
originalul.
Imaginile 9I< suport efecte de transparen, ntreesere i animaie, asupra crora vom reveni pe
larg n capitolul 0lemente avansate de 6ra5ic,.
)eoarece majoritatea bro;serelor recunosc formatul 9I<, acesta a devenit cel mai frecvent
utilizat n paginile *eb. ,oate fi folosit pentru a include imagini direct n pagini /imagini in!line3
precum i pentru a referi imaginile prin intermediul unor legturi e#terne.
6otui, datorit numrului redus de culori, formatul 9I< nu este potrivit pentru fotografii sau
imagini de calitate nalt. ,entru acest tip de imagini, cel mai adecvat este formatul :,E9.
0ormatu! B:#A
<ormatul :,E9 /);pg3, pe de alt parte, suport un numr mult mai mare de culori /apro#imativ CA
milioane3. )ac dorii s folosii imagini fotografice, formatul :,E9 este recomandat, datorit calitii
superioare a imaginii. )imensiunile unui fiier :,E9 nu depind de numrul de culori ci de gradul de
comprimare a imaginii. 9radul de comprimare al formatului :,E9 este mai ridicat dect cel al
formatului 9I<. >u este neobinuit, de e#emplu, ca un fiier 9I< care are FBB de Xb s fie comprimat
ca fiier :,E9 pn la dimensiunea de HB de Xb.
,entru a realiza un grad att de nalt de comprimare a imaginilor, formatul :,E9 pierde anumite
informaii din imaginea original. &u toate c la decomprimare imaginea :,E9 nu va fi absolut identic
cu imaginea original, diferenele vor fi de cele mai multe ori inobservabile.
<ormatul :,E9 este potrivit pentru imaginile fotografice, dar el nu este adecvat pentru ilustraii,
desene sau imagini de dimensiuni reduse. lgoritmii folosii pentru comprimarea i decomprimarea
imaginii altereaz n mod notabil zonele de mari dimensiuni colorate cu o singur nuan. )in acest
motiv, atunci cnd dorii s includei n pagin un desen sau o ilustraie care folosete un numr redus
de culori, formatul 9I< este cel mai potrivit.
2. C7te"a metode de o<inere a ima&ini!or
vei la ndemn diverse moduri n care putei crea sau procura imagini pe care s le includei n
paginile dumneavoastr:
&rearea imaginilor cu ajutorul unui program de grafic " cele mai performante sunt
dobe ,!otos!op i &orel)ra;.
(canarea fotografiilor realizate cu aparate foto tradiionale i, eventual, prelucrarea lor
ulterioar cu editoare grafice.
<olosirea aparatelor de fotografiat digitale " dei sunt nite ec!ipamente nc destul de
costisitoare prezint marele avantaj c furnizeaz imagini digitale sub form de fiiere grafice n
formate comune, care se pot descrca direct pe !ard"disI, i care se pot utiliza ca atare sau dup o
prelucrare grafic minim.
,reluarea imaginilor de pe *eb. >umrul site"urilor care ofer colecii de imagini
gratuite i care pot fi utilizate liber este imens. 6otui, atunci cnd dorii s folosii n pagina
dumneavoastr o imagine care nu face parte dintr"o astfel de colecie, trebuie s avei n vedere
aspectul drepturilor de autor. ,entru a prelua o imagine de pe *eb trebuie s o salvai pe !ard"disI"
ul dumneavoastr. ,utei realiza acest lucru astfel:
" plasai cursorul pe imaginea respectiv i apsai butonul drept al mouse"ului
" selectai din meniul care se desc!ide +ave 'mage 0s)))
" n fereastra de dialog selectai folderul de destinaie i numele fiierului
" apsai butonul +ave
Este util s v creai unul sau mai multe foldere dedicate imaginilor, organizate pe tipuri /icon,
fundaluri, butoane, imagini propriu"zise, etc.3, uneori alctuind adevrate biblioteci, n care s pstrai
toate imaginile pe care intenionai s le folosii n paginile dumneavoastr. )e asemenea, de mare
utilitate sunt aplicaiile de gestionare a imaginilor, cum este de e#emplu cunoscutul &)(ee.
8ten)ieM
)ac imaginea nu este salvat n acelai folder n care se afl documentul 5678 surs care
folosete imaginea respectiv, referina la imagine trebuie s conin calea corect ctre locaia ei,
altminteri imaginea nu va fi afiat n pagin.
3. (nserarea unei ima&ini
,entru a insera o imagine n cadrul unei pagini /o imagine in!line3, se utilizeaz etic!eta ?A"FC
/de la image3. Etic!eta LI79M nu este o etic!et container, prin urmare nu necesit o etic!et
corespunztoare de nc!idere.
,entru a putea identifica imaginea care va fi inserat, se utilizeaz atributul src /source3 al
etic!etei LI79M. tributul src i comunica bro;serului numele i locaia imaginii care urmeaz s fie
inserat. Ualoarea acestui atribut este adresa -+8 a imaginii respective.
)ac imaginea se afl n acelai director cu fiierul 5678 care face referire la imagine, atunci
adresa -+8 a imaginii este formata numai din numele fiierului, inclusiv e#tensia.
LI79 srcS%imagine.e#tensie%M
)ac imaginea se afla ntr"un alt director, -+8"ul imaginii trebuie specificat fie prin adresarea
absolut fie, preferabil, prin cea relativ.
E#emplul 1.C ilustreaz modul n care se pot insera ntr"o pagin dou imagini, una dintre ele
aflndu"se n acelai folder ca i pagina surs, iar cealalt n folderul 'magini. <igura 1.C red aspectul
paginii descrise n e#emplu.
0(emplul 9. 1
L5678M
L5E)M
L6I68EMimaginiCL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%MImagini in paginaL?5CML5+M
Imagine aflata in acelasi folderL,M
LI79 srcS%tiger.gif% borderS%G%ML,M
Imagine aflata in folderul ImaginiL,M
LI79 srcS%..?Imagini?bernese.jpg% borderS%C% M
L?'$)KM
L?5678M
=n acest e#emplu este prezent i atributul border al etic!etei LI79M. cesta este folosit pentru a
plasa un c!enar n jurul imaginii. Ualoarea atributului border este numrul de pi#eli care reprezint
grosimea c!enarului din jurul imaginii. bsena atributului sau setarea la valoarea %B% face ca acest
c!enar s nu fie prezent.
-n alt atribut util asociat etic!etei LI79M este alt. cest atribut permite afiarea unui te#t
e#plicativ n spaiul n care va fi afiat imaginea n pagin.
=n E#emplul 1.F este ilustrat utilitatea atributului alt.
0(emplul 9. /
L5678M
L5E)M
L6I68EMimaginiFL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%M tributul alt L?5CML5+M
cesta este un...L'+M
LI79 srcS%..?Imagini?orangerose% altS%trandafir%M
L?'$)KM
L?5678M
)up cum putei observa din <igura 1.F imaginea pe care am inclus"o n document nu este afiat.
7otivul este c am omis intenionat e#tensia )gif a fiierului pentru a e#emplifica utilitatea atributului
alt. ,rin urmare, dac dintr"un motiv oarecare, imaginea nu se ncarc n pagin, se ncarc mai greu,
sau este vizualizat cu un bro;ser care nu suport grafica, n zona rezervat imaginii va fi afiat te#tul
specificat ca valoare a atributului alt.
)e asemenea, te#tul specificat ca valoare pentru atributul alt va fi afiat i n cadrul unei mici
ferestre care se desc!ide n momentul cnd cursorul mouse"ului este meninut deasupra imaginii.
<igura 1.H red aspectul paginii n cazul cnd atributul src are valoarea corect: %orangerose.gif%.
-n alt motiv pentru care este indicat folosirea atributului alt este acela c vizitatorul paginii are
posibilitatea de a vedea nc nainte de ncrcarea complet a imaginii ce anume se va afia n zona
respectiv. stfel, el are posibilitatea de a atepta ncrcarea complet a imaginii sau de a trece la alt
pagin.
4. @imensionarea ima&inii
)imensionarea imaginii se realizeaz cu ajutorul atributelor width " prin care se stabilete limea
imaginii i hei6ht " prin care se stabilete nlimea imaginii.
=n E#emplul 1.H sunt precizate i dimensiunile imaginii incluse n document. (e observ c
dimensionarea imaginilor se face n pi#eli. Este, desigur, posibil, ca dimensionarea s se fac n
procente, ca i la liniile orizontale, de e#emplu. 6otui, n afara unor cazuri speciale, aceasta este
considerat o practic greit, deoarece bro;serul va redimensiona imaginea iar rezultatele vor fi de
calitate slab.
0(emplul 9. 1
L5678M
L5E)M
L6I68EMimaginiHL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%M)imensionarea imaginilorL?5CML5+M
LI79 srcS%tiger.gif% ;idt!S%HGB% !eig!tS%FGB%ML,M
L?'$)KM
L?5678M
7. $bservnd <igura 1.J care red aspectul paginii descrise mai sus putem remarca
faptul c setarea dimensiunilor a afectat calitatea imaginii deoarece dimensiunile originale ale
imaginii erau mai mici. )imensiunile originale ale imaginii tiger)gif, determinate cu ajutorul
unui editor grafic, sunt: limeSFBB pi#eli, nlimeSCFG pi#eli.
)ac dimensiunile imaginii n pagin sunt setate la valori considerabil mai mari dect
dimensiunile imaginii originale calitatea imaginii incluse n pagin va avea de suferit. &oncluzia care
se impune este c dimensionarea imaginilor din pagin trebuie s se fac la valori ct mai apropiate de
dimensiunile iniiale ale imaginilor.
U putei ntreba atunci, de ce mai este necesar includerea atributelor de dimensionare a
imaginii. >u numai c este necesar, dar este considerat o practic defectuoas absena lor din cadrul
etic!etei LI79M.
7otivul este acela c includerea dimensiunilor imaginii ofer bro;serului posibilitatea de a
rezerva spaiu pentru imagine i de a ncepe ncrcarea te#tului simultan cu ncrcarea imaginii. )ac
atributele de dimensionare nu sunt prezente, bro;serul va efectua nite pai suplimentari pentru a
calcula spaiul din pagin necesar afirii imaginii. )in acest motiv afiarea te#tului nu va putea ncepe
dect dup ce imaginea este ncrcat n ntregime.
Este indicat s evitam o asemenea situaie deoarece imaginile se ncarc mai greu dect te#tul i
muli vizitatori ai paginii nu vor atepta suficient pentru ca ntreaga pagin /imagini i te#t3 s fie
ncrcat.
). 1!inierea ima&inii i a textu!ui
linierea unei imagini n raport cu te#tul din pagin se realizeaz prin intermediul atributului
ali6n, care poate lua urmtoarele valori:
left " aliniere la stnga] te#tul este dispus n partea dreapt a imaginii ncadrnd
imaginea
rig!t " aliniere la dreapta] te#tul este dispus n partea stnga a imaginii ncadrnd
imaginea
top " aliniere deasupra] partea de sus a imaginii se aliniaz cu prima linie a te#tului ce
precede imaginea
middle " aliniere la mijloc] mijlocul imaginii se aliniaz cu prima linie a te#tului ce
precede imaginea.
bottom " aliniere dedesubt, la baz] partea de jos a imaginii se aliniaz cu prima linie a
te#tului.
Ualorile left, rig!t, i bottom ale atributului align permit ca te#tul s fie dispus n jurul imaginii, n
vreme ce top i middle nu permit acest lucru.
E#emplul 1.J ilustreaz modul de aliniere bottom, aa cum rezult din <igura 1.G.
0(emplul 9. 3
L5678M
L5E)M
L6I68EMimaginiJL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%Mlinierea imaginii si te#tului /bottom3L?5CML5+M
LI79 srcS%..?Imagini?eagle!ed.gif% alignS%bottom% ;idt!S%CBB% !eig!tS%AA% altS%vultur%M
Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine
te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine
te#t.Imagine te#t.Imagine te#t.
Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine
te#t.Imagine te#t.
L?'$)KM
L?5678M
<igura 1.A red modul de aliniere left iar <igura 1.1 modul de aliniere rig!t.
)in <igura 1.0 i <igura 1.D putei observa modurile de aliniere top i middle precum i faptul c
aceste alinieri nu permit dispunerea te#tului n jurul imaginii.
lte dou atribute utile, care servesc la alinierea imaginii fa de restul elementelor din pagin,
sunt atributele hspace i vspace. Ele precizeaz distana, n pi#eli, pe orizontal, respectiv pe vertical,
dintre imagine i restul elementelor din pagin.
=n E#emplul 1. J vom sc!imba modul de aliniere n cadrul etic!etei LI79M i vom aduga
atributele !space, respectiv vspace, astfel:
LI79 srcS%..?Imagini?eagle!ed.gif% alignS%left% ;idt!S%CBB% !eig!tS%AA% altS%vultur%
vspaceS%CB% !spaceS%CB%M
spectul paginii va fi cel din <igura 1.CB.
i observat, probabil, c dintre valorile pe care le poate lua atributul align lipsete valoarea
center. =ntr"adevr, alinierea unei imagini la centrul paginii nu se poate face prin intermediul atributului
align. &entrarea unei imagini se poate realiza numai dac este izolat de te#tul care o nconjoar.
,entru aceasta se poate folosi etic!eta L&E>6E+M sau se poate include imaginea ntr"un bloc paragraf
sau ntr"un bloc L)IUM avnd atributul align setat la valoarea center.
E#emplul 1.G ilustreaz acest mod de aliniere folosind etic!eta L)IUM aspectul paginii fiind cel
din <igura 1.CC.
0(emplul 9. 4
L5678M
L5E)M
L6I68EMimaginiGL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%M&entrarea unui imaginiL?5CML5+M
Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine
te#t.Imagine te#t.
L)IU alignS%center%M
LI79 srcS%..?Imagini?devil.gif% ;idt!S%AJ% !eig!tS%AJ% altS%dracusor%M
L?)IUM
Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine
te#t.Imagine te#t.
L?'$)KM
L?5678M
E#emplul 1.A ilustreaz modul n care pot fi aliniate dou imagini fa de te#tul din pagin.
)in <igura 1.CF putei observa c, dac alinierea la stnga a imaginii mpreun cu folosirea
atributelor !space i vspace conduce la un aspect ordonat al elementelor, aspectul te#tului n raport cu
imaginea aliniat la dreapta depinde de dimensiunea ferestrei bro;serului.
0(emplul 9. 7
L5678M
L5E)M
L6I68EMimaginiAL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%Mlinierea a doua imaginiL?5CML5+M
LI79 srcS%..?Imagini?mtnscene.jpg% alignS%left% ;idt!S%FBB% !eig!tS%CJJ% alignS%left%
!spaceS%CB% vspaceS%CB%M
Imagine te#t. Imagine te#t. Imagine te#t. Imagine te#t.Imagine te#t. Imagine te#t. Imagine te#t.
Imagine te#t.
LI79 srcS%..?Imagini?sunscene.jpg% alignS%rig!t% ;idt!S%FBF% !eig!tS%CHF% !spaceS%CB%
vspaceS%CB%M
Imagine te#t. Imagine te#t. Imagine te#t. Imagine te#t.Imagine te#t. Imagine te#t. Imagine te#t.
Imagine te#t.Imagine te#t. Imagine te#t. Imagine te#t. Imagine te#t.Imagine te#t. Imagine te#t. Imagine
te#t. Imagine te#t.Imagine te#t. Imagine te#t. Imagine te#t. Imagine te#t.Imagine te#t. Imagine te#t.
Imagine te#t. Imagine te#t.
L?'$)KM
L?5678M
+. (ma&ini 'o!osite ca 'ond 8<ac>&round= a! pa&inii
$ imagine poate fi utilizat i pentru a stabili fondul unei pagini *eb. =n acest scop se folosete
atributul bacE6round al etic!etei L'$)KM, avnd ca valoare adresa -+8 a imaginii. Imaginea se
multiplic aliniat /tiling3 pe orizontal i pe vertical pn umple ntregul ecran.
E#emplul 1.1 ilustreaz utilizarea atributului bacIground.
0(emplul 9. 9
L5678M
L5E)M
L6I68EMimagini1L?6I68EM
L?5E)M
L'$)K bacIgroundS%..?Imagini?silI.jpg%M
L5C alignS%center%MImaginea ca fond al paginiiL?5CML5+M
<ond de matase...
L?'$)KM
L?5678M
<igura 1.CH red aspectul unei pagini care folosete ca fundal o imagine.
,. (ma&ini 'o!osite ca !e&*turi
,entru a folosi o imagine drept legtura se procedeaz ca n urmtorul e#emplu:
L !refS%tabelVculori.!tml%M
LI79 srcS%prism.gif% ;idt!S%CBB% !eig!tS%0B% altS%culori%M
L?M
("a folosit etic!eta LM prin intermediul creia am creat legtura cu fiierul tabelVculori.!tml.
=ntre etic!etele LM i L?M am inclus o imagine care nlocuiete te#tul e#plicativ pe care vizitatorul
urmeaz s fac clicI cu mouse"ul. Imaginea servete, deci, ca legtur ctre o anumit pagin.
Imaginea folosit ca legtura este prism)gif iar pagina spre care este fcut legtura este
tabelGculori)html. =n mod prestabilit imaginea utilizat pe post de zon activ este nconjurat de un
c!enar avnd culoarea unei legturi /albastru3. )ac stabilim pentru atributul border al etic!etei
valoarea %B% acest c!enar dispare.
E#emplul 1.0 prezint codul complet.
0(emplul 9. ;
L5678M
L5E)M
L6I68EMimagini0L?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%M Imagini cu legaturi L?5CML5+M
L'+Mm pus o imagine cu legatura pe paginaL,M
L !refS%tabel culori.!tml%M
LI79 srcS%..?Imagini?prism.gif% ;idt!S%CBB% !eig!tS%0B% altS%culori%M
L?M
L?'$)KM
L?5678M
=n <igura 1.CJ putei observa modul n care funcioneaz imaginea folosit ca legtur n
e#emplul de mai sus.
3. (ma&ini!e miniatura!e 8t/um<nai!s9
)ac ntr"o pagin *eb este necesar afiarea unui numr mare de imagini, ncrcarea paginii se
va face destul de greu. )e multe ori, vizitatorii paginii nu vor avea rbdarea necesar pentru a atepta
ncrcarea integral a paginii.
$ soluie de compromis frecvent aplicat pentru scurtarea timpului de ncrcare a unei pagini ce
prezint multe imagini o reprezint utilizarea imaginilor miniaturale /thumbnail"uri3. $ imagine
thumbnail este o versiune de dimensiuni reduse a unei imagini mai mari, care se ncarc mult mai rapid
i care, dei este de dimensiuni mici i de calitate sczut, permite vizitatorului s afle ce anume
reprezint i s decid dac este interesat sau nu s desc!id versiunea integral..
Imaginea miniatural reprezint o legtur spre fiierul cu imaginea original din care provine. =n
cazul n care vizitatorul paginii dorete s vad imaginea original, o poate desc!ide efectund clicI
imaginea thumbnail)
+ealizarea imaginilor miniaturale se poate face fie prin micorarea proporional a imaginilor, fie
prin reducerea lor la o dimensiune prestabilit /strech3 c!iar dac imaginea se distorsioneaz, n cazul
n care se dorete, de pild, ca toate thumbnail!urile dintr"o pagin s aib aceleai dimensiuni.
E#ist dou metode pentru a plasa o imagine thumbnail n pagin:
folosind dou imagini, una fiind imaginea thumbnail iar cealalt, imaginea original
folosind o singur imagine, redimensionat /micorat3 direct n pagin
0o!osirea a dou* ima&ini
$ imagine thumbnail este foarte uor de realizat. $ricare ar fi programul de grafic pe care l
folosii, tot ceea ce avei de fcut este s gsii opiunea Resi8e /care de obicei face parte din meniul
5dit sau 'mage3 i s precizai n caseta de dialog care se desc!ide, dimensiunile dorite. Uei observa c
e#ist de regul o opiune setabil pentru pstrarea proporionalitii cu dimensiunile. )ac este
activat, dup stabilirea uneia dintre dimensiuni /idth, de e#emplu3, cealalt /height3 este calculat
automat.
=n E#emplul 1.D este plasat o imagine thumbnail n pagin, folosind prima metod, <igura 1.CG
ilustrnd funcionarea imaginii thumbnail.
0(emplul 9. 9
L5678M
L5E)M
L6I68EMimaginiDL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%M6!umbnails " doua imaginiL?5CML5+M
L,M
L !refS%..?Imagini?zdog.gif%M
LI79 srcS%..?Imagini?zdogVt!.gif%ML?M
L?'$)KM
L5678M
<iierul 8dogGth)gif conine imaginea thumbnail care este folosit ca legtur, pentru a referi
imaginea original, 8dog)gif. )eoarece imaginea thumbnail este folosit ca o legtura ctre imaginea
original, n jurul ei este afiat un c!enar prestabilit albastru. )ac dorii ca acest c!enar s nu mai fie
afiat, putei folosi atributul border al etic!etei LI79M setat la valoarea %B%. Imaginea original se va
desc!ide n aceeai fereastr cu pagina n care este plasat imaginea thumbnail. ,entru a reveni n
pagin, trebuie s apsai butonul 1ack al bro;serului.
0o!osirea unei sin&ure ima&ini
ceast metod este adesea preferat, deoarece folosete un singur fiier, cel care conine
imaginea original, miniaturizarea ei fcndu"se c!iar n pagin, cu ajutorul atributelor ;idt! i !eig!t.
Este o metoda mai eficient i mai rapid, deoarece imaginea de dimensiuni mari care urmeaz a fi
afiat este deja ncrcat n memoria cache a bro;serului i este imediat disponibil pentru afiare.
=n e#emplul urmtor /E#emplul 1.CB3 am folosit o singur imagine pentru a ncrca att imaginea
thumbnail ct i pe cea cu dimensiunile originale. spectul paginii este redat n <igura 1.CA.
0(emplul 9. 1D
L5678M
L5E)M
L6I68EMimaginiCBL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%M6!umbnails " o singura imagineL?5CML5+M
L,M
L !refS%..?Imagini?zdog.gif%M
LI79 srcS%..?Imagini?zdog.gif% ;idt!S%1B% !eig!tS%1A%ML?M
L?'$)KM
L5678M
)up cum se poate observa, am creat un linI /cu ajutorul etic!etei LM3 la fiierul 8dog)gif care
conine imaginea original. m folosit drept legtur aceeai imagine, dar redimensionat, folosind
atributele ;idt! i !eig!t.
=n e#emplul anterior, imaginea thumbnail este ncrcat prima. =n momentul cnd vizitatorul face
click pe ea, este ncrcat imaginea cu dimensiunile originale. vantajul ultimei metode este faptul c
imaginea este ncrcat de la nceput i redimensionat pentru thumbnail, ceea ce face ca afiarea
imaginii cu dimensiunile originale s fie mai rapid.
4. (ma&ini!e "ideo
,entru a insera o imagine video ntr"un document 5678 se folosesc atributele dLnsrc, controls,
loop i start ale etic!etei LI79M.
tributul dLnsrc nlocuiete atributul src i permite inserarea n documentul 5678 a unei
imagini video n acelai mod n care este inserat o imagine static.
Ualoarea atributului dEnsrc este adresa -+8 a fiierului video care va fi inclus n pagin conform
sinta#ei:
LI79 dEnsrcS%-+8VfisierVvideo%M
cest atribut este o e#tensie Internet E#plorer i nu este recunoscut de bro;serele >etscape.
,entru a vizualiza o imagine video in!line ntr"un bro;ser >etscape, vizitatorul paginii trebuie s
instaleze un program au#iliar de tip plug!in. )ac programul plug!in nu este disponibil pe computerul
vizitatorului, imaginea video nu va putea fi afiat.
(ingurul format de fiiere video care este suportat de e#tensiile Internet E#plorer este 8BA /0udio
3ideo 'nterleave3, deoarece acesta este formatul de redare care este inclus n bro;ser) &onstrucia de
mai jos include ntr"un document 5678 fiierul video introducere)avi care se afl n folderul 3ideo:
LI79 dEnsrcS%..?Uideo?introducere.avi%M
Efectul acestei etic!ete este desc!iderea de ctre bro;ser a unei ferestre de vizualizare n
interiorul paginii *eb, fereastr n care va rula clipul video introducere)avi, inclusiv sunetul, dac
acesta face parte din clip i computerul vizitatorului este setat s redea sunetele. &a i imaginile
obinuite, imaginea video este afiat pe msur ce este ncrcat.
)eoarece nici un alt bro;ser n afar de Internet E#plorer nu recunoate aceast e#tensie, este
recomandat s includei n cadrul etic!etei LI79M i atributul src prin care s furnizai o imagine
static ce va fi afiat n acelai cadru. 'ro;serele care nu recunosc e#tensia dEnsrc vor afia imaginea
static pe cnd Internet E#plorer va afia imaginea video. $rdinea n care apar cele dou atribute nu are
importan. )e e#emplu:
LI79 dEnsrcS%..?Uideo?intro.avi% srcS%..?Imagini?intro.gif%M
=n mod normal, Internet E#plorer red clipul video ntr"o fereastr n care nu sunt afiate nici un
fel de butoane de control. -tilizatorul poate relua, opri sau continua redarea clipului efectund clicI
dreapta cu mouse"ul n interiorul ferestrei.
,entru a aduga butoane de control acestei ferestre se utilizeaz atributul controls al etic!etei
LI79M. tributul controls nu are alocat nici o valoare, prezena sa avnd doar scopul de a aduga
butoanele de control asemntoare celor de la aparatele video. )e e#emplu:
LI79 dEnsrcS%..?Uideo?intro.avi% srcS%..?Imagini?intro.gif% controlsM
&lipul video inclus n pagin este redat de bro;ser o singur dat, de la nceput pn la sfrit.
,entru a repeta redarea clipului de un anumit numr de ori este folosit atributul loop. Ualorile posibile
ale atributului sunt:
un numr ntreg care reprezint numrul de reluri ale clipului
infinite, caz n care clipul este redat pn cnd utilizatorul stopeaz derularea sa apsnd
butonul stop al ferestrei de vizualizare /n cazul cnd fereastra conine butoanele de control3 sau
efectueaz clicI dreapta cu mouse"ul n fereastra de vizualizare.
E#emplul de mai jos ilustreaz modul n care poate fi setat atributul loop:
LI79 dEnsrcS%..?Uideo?intro.avi% srcS%..?Imagini?intro.gif% controls loopS%infinite%M
a cum am precizat, redarea imaginii video ncepe imediat ce aceasta a fost complet ncrcat n
pagin. ,entru a sc!imba acest comportament se folosete atributul start care poate avea valorile:
mouseover, situaie n care derularea imaginii video ncepe n momentul cnd mouse"ul
este plasat deasupra imaginii
fileopen, valoarea predefinit, situaie n care derularea imaginii ncepe imediat dup
ncrcarea n pagin
&ele dou valori pot fi combinate pentru a se realiza redarea imaginii mai nti imediat dup
ncrcarea n pagin i apoi de fiecare dat cnd mouse"ul este plasat deasupra ei, ca n e#emplul
urmtor:
LI79 dEnsrcS%..?Uideo?intro.avi% srcS%..?Imagini?intro.gif% controls loopS%infinite%
startS%fileopen, mouseover%M
Imaginile video in!line pot fi tratate ca i imaginile statice. $ astfel de imagine poate fi aliniat
folosind atributul ali6n, sau poate fi spaiat fa de te#tul care o nconjoar.
E#emplul 1.CC ilustreaz atributele prezentate mai sus. ,agina va avea aspectul din <igura 1.C1.
0(emplul 9. 11
L5678M
L5E)M
L6I68EMimaginiCCL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%MImagini videoL?5CML5+M
L<$>6 sizeS%J% colorS%blue%M&lipul video de mai jos face parte din jocul 5eroes
HL?<$>6ML,M
L&E>6E+M
LI79 dEnsrcS%..?Uideo?s!ield.avi% srcS%..?Imagini?banana.gif% controls startS%fileopen,
mouseover% loopS%infinite%M
L?&E>6E+M
L?'$)KM
L?5678M
1;. Sunete!e
)ac etic!eta LI79M permite afiarea unei imagini de fundal, e#ist i o etic!et care realizeaz
includerea n pagina *eb a unei muzici de fundal i anume etic!eta ?>F'H+G@C. ceast etic!et
este, de asemenea, o e#tensie Internet E#plorer deci nu este recunoscut i e#ecutat n alte bro;sere)
'ro;serul Internet E#plorer conine un decodor de sunet ncorporat i permite integrarea prin
etic!eta L'9($->)M a sunetului de fundal pentru o pagin. (inta#a etic!etei L'9($->)M este
urmtoarea:
L'9($->) srcS%-+8VfisierVsunet% loopS%valoare%M
tributul src are drept valoare adresa -+8 a fiierului de sunet care este folosit ca fundal sonor al
paginii.
=n mod curent, Internet E#plorer recunoate trei tipuri de fiiere de sunet:
fiiere cu e#tensia .%a" care este formatul nativ pentru ,&
fiiere cu e#tensia .au, formatul nativ pentru sistemele ->IW
fiiere cu e#tensia .midi, un format universal acceptat pentru codificarea sunetelor
,entru a include ntr"o pagin un fiier de sunet se procedeaz ca n e#emplul urmtor:
L'9($->) srcS%..?(unet?;ellcome.;avM
&a i n cazul imaginilor video in!line, fiierul de sunet este redat o singur dat, la ncrcarea
paginii. ,entru redarea sa repetat se folosete atributul loop al etic!etei L'9($->)M care poate avea
ca valori:
un numr ntreg, care reprezint numrul de reluri ale piesei
infinite, caz n care piesa muzical este reluat pn cnd utilizatorul prsete pagina
sau nc!ide fereastra bro;serului.
E#ecutai E#emplul 1.CF cu un bro;ser Internet E#plorer pentru a observa efectul etic!etei
L'9($->)M. )esigur, este necesar s sc!imbai adresa -+8 a fiierului de sunet specificnd un
fiier e#istent pe !ard"disI"ul dumneavoastr.
0(emplul 9. 1/
L5678M
L5E)M
L6I68EMimaginiCFL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%M7uzica de fundalL?5CML5+M
L,M
L<$>6 sizeS%J% colorS%red%M7uzica se va auzi pana cand veti inc!ide paginaL?<$>6M
L'9($->) srcS%..?(unet?*elcomD0.;av% loopS%infinite%M
L?'$)KM
L?5678M
11. Su&estii pri"ind 'o!osirea ima&ini!or i e!emente!or mu!timedia
&nd folosii imagini ntr"o pagin *eb, trebuie s v punei ntrebarea: %Este necesar aceast
imagine sau ar fi suficient s folosesc te#t4%. &!iar dac se spune c o imagine face ct o mie de
cuvinte, acest lucru nu este ntotdeauna adevrat pe *eb. =nlocuirea te#tului care conine informaiile
eseniale dintr"o pagin *eb cu imagini este adesea o greeal.
-n prim motiv este c nc mai e#ist bro;sere non"grafice cum este 8En#, care nu afieaz dect
te#tul.
poi, c!iar i n bro;serele grafice, anumii utilizatori ar putea opta, din varii motive, pentru
dezactivarea afirii imaginilor.
-n alt motiv ar fi acela c, din cauza duratei mari de ncrcare a fiierelor cu imagini de mari
dimensiuni, unii utilizatori ar putea renuna pur i simplu la desc!iderea paginii.
.i nu n ultimul rnd, deoarece, spre deosebire de te#t, imaginile pot ntmpina diverse dificulti
te!nice la afiare.
Imaginile dintr"o pagin *eb trebuie gndite ca nite instrumente vizuale care au rolul de a
susine i ilustra coninutul scris al paginii. )e e#emplu, ntr"un catalog on!line imaginile produselor
prezentate sunt eseniale pentru coninutul paginii respective. Icon"urile cu rol de legturi sau
instrumente de navigaie pot reprezenta repere vizuale deosebit de utile n cadrul unui site. )ar dac o
imagine nu servete unui scop bine definit n pagin, e bine s v gndii de dou ori, nainte de a o
folosi.
)e asemenea se recomand s fii precaut i n privina imaginilor folosite ca fundal
/background3.
=ntr"adevr, acestea pot oferi un aspect spectaculos paginii dumneavoastr. =ns trebuie s fii
contient de faptul c o imagine folosit ca fundal va crete cu siguran timpul necesar ncrcrii
paginii. )ac n cazul imaginilor in!line te#tul se poate afia naintea sau n timpul ncrcrii imaginii,
la imaginile de fundal afiarea celorlalte elemente din pagin nu va putea ncepe dect dup ncrcarea
n ntregime a fundalului.
7ai mult, spre deosebire de imaginile in!line, care pot mbogi coninutul informaional al
paginilor, imaginile de fundal nu aduc cu adevrat dect foarte rar un supliment de informaie. )ei
aspectul unei asemenea pagini poate fi atrgtor, de cele mai multe ori folosirea imaginilor de fundal n
combinaii nefericite cu fonturi de anumite tipuri sau culori, fr contrast suficient, poate face pagina
ncrcat i greu de citit.
)ac totui v decidei s folosii o imagine ca fundal al paginii este recomandat s specificai
simultan i o culoare de fundal, adic s setai atributul bgcolor. stfel, dac dintr"un motiv oarecare
imaginea de fundal nu se ncarc, pagina va avea totui culoarea prestabilit de dumneavoastr.
&a i imaginile, i celelalte elemente multimedia trebuie folosite cu discernmnt ntr"o pagin
*eb.
Imaginile video au dimensiuni semnificativ mai ari dect imaginile statice, deci se ncarc mult
mai ncet dect acestea astfel nct includerea lor in!line va mri considerabil timpul de ncrcare al
paginii.
=n plus, formatele diverse utilizate nu pot fi desc!ise ntotdeauna cu bro;serul, unele impunnd
e#istena unor plug!in"uri sau c!iar unor programe speciale.
$ metod de compromis recomandat este descrierea coninutului fiierului, eventual inserarea
unui fragment video e#emplificativ /sample3 de dimensiuni mult mai mici, similar cumva metodei
thumbnail"urilor. (e asigur o legtur i spre fiierul integral, astfel nct, dup vizualizarea
e#emplului, vizitatorul s poat alege dac va atepta timpul necesar ncrcrii sale sau nu.
7uzica de fundal este de cele mai multe ori nerecomandat. <oarte muli vizitatori pot vizualiza
paginile dumneavoastr avnd sunetul dezactivat. <olosirea unei muzici de fundal ncetinete
ncrcarea paginii i, n plus, este foarte posibil ca muzica pe care ai ales"o s nu fie pe gustul celor
care v viziteaz pagina, ba c!iar s i determine s o prseasc nainte de a citi coninutul acesteia.
)ac este necesar, totui, s introducei muzic sau sunet n paginile dumneavoastr, este o
prevedere neleapt s plasai fiierele de sunet separat i s asigurai legturi ctre acestea astfel nct
vizitatorul s le poat audia, dac dorete.
12. (ma&ini!e i timpu! de nc*rcare a! pa&inii
-nul dintre cele mai importante aspecte care trebuie luate n considerare la includerea imaginilor
ntr"un document este timpul de nc,rcare a documentului.
)urata de ncrcare a paginilor depinde de muli factori. )epinde de modemul i cone#iunea
vizitatorului, de performanele serverului gazd, de trafic, de limea de band, etc. &um nu putei avea
control asupra acestora, singurul lucru care v rmne de fcut este s v construii paginile astfel nct
s aib o bun vitez de ncrcare c!iar i n cazul unui vizitator care deine o cone#iune modest ca
performane.
,e lng alegerea cu foarte mult grij a imaginilor care vor fi incluse n document, mai e#ist
cteva modaliti prin care poate fi ameliorat durata de ncrcare a paginii:
$ptimizarea imaginilor. <olosii"v n mod judicios de instrumentele de control al
imaginilor puse la dispoziie de editorul grafic folosit, optimizai dimensiunile imaginii i numrul
de culori la ct mai puine posibil. =ncercai s gsii un raport optim ntre dimensiunea fiierului i
calitatea imaginii. Evitai fotografiile sau imaginile de fundal de dimensiuni foarte mari.
+eutilizarea imaginilor. ceast metod este eficient mai ales n cazul icon"urilor sau
elementelor grafice de navigaie care sunt prezente n mai multe pagini pe parcursul unui site. &ele
mai multe bro;sere rein n memoria cache elementele documentelor care urmeaz a fi afiate.
stfel, dac o imagine este utilizat n mai multe pagini aceasta nu trebuie ncrcat de fiecare dat
n memorie ci este disponibil pentru a fi afiat oricnd se face referirea la ea.
)ivizarea documentelor de dimensiuni mari n mai multe documente de dimensiuni
reduse. ceast regul general include i paginile care conin imagini in!line. 7ai multe
documente de dimensiuni mai mici legate ntre ele prin legturi sunt mai bine acceptate de vizitatori
dect un singur document foarte mare care necesit un timp de ncrcare ndelungat. +egula general
acceptat este meninerea dimensiunilor unui document *eb n jurul valorii de GBXb, incluznd
aici i imaginile, desigur.
<olosirea imaginilor thumbnail. )ac pagina conine un mare numr de imagini, folosii
imagini miniaturale care s refere imaginile originale. =n plus, ntruct imaginea original referit
prin imaginea thumbnail se poate desc!ide ntr"o nou fereastr, nefiind asociat cu restul
elementelor din pagin, este mai comod pentru vizitator s o salveze pe computerul propriu pentru
o vizualizare ulterioar.
(pecificarea dimensiunile imaginilor. =n acest mod este evitat etapa calculrii de ctre
bro;ser a spaiului necesar pentru afiarea imaginii, mbuntindu"se viteza de ncrcare a paginii.
13. -e.umat
<ormatele cele mai utilizate pentru fiierele grafice sunt :,E9 i 9I<.
Inserarea unei imagini ntr"un document 5678 se realizeaz cu ajutorul etic!etei LI79M.
(inta#a etic!etei LI79M este urmtoarea:
LI79 srcS%-+8Vimagine% alignS%pozitie% ;idt!S%valoare% !eig!tS%valoare% vspaceS%valoare%
!spaceS%valoare% altS%te#t% borderS%valoare% dEnsrcS%-+8VimagineVvideo% loopS%valoare%
startS%valoare% controlsM
unde:
src precizeaz locaia imaginii
;idt! i !eig!t stabilesc dimensiunile imaginii
vspace i !space stabilesc distana pe vertical i orizontal fa de restul te#tului din
pagin
align aliniaz imaginea fa de te#tul din jurul ei
alt furnizeaz un te#t e#plicativ asupra imaginii
border stabilete grosimea c!enarului imaginii
dEnsrc introduce o imagine video i precizeaz locaia ei
loop specific numrul de reluri ale imaginii video
start precizeaz momentul nceperii redrii imaginii
controls afieaz butoanele de control ale ferestrei video
Imaginile pot fi folosite ca fond al paginii cu ajutorul atributului bacIground al etic!etei
L'$)KM.
$ imagine poate servi drept legtur ctre un alt document 5678 prin includerea etic!etei
LI79M ntre etic!etele LM L?M.
$ practic des folosit este inserarea n pagin a imaginilor miniaturale care la e#ecutarea unui
click pe ele desc!id imaginea original.
7uzica de fundal poate fi adugat unui document prin intermediul etic!etei L'9($->)M.
legerea imaginilor care vor fi incluse ntr"un document 5678 trebuie fcut cu grij, n funcie
de rolul acestora n structura documentului i avnd permanent n vedere timpul de ncrcare al paginii.
14. Test
4. Ce etichet folosim pentru a insera o imagine 6n pagin9
a3 LI79M
a3 LM
b3 L,I&M
4. 0tributul src serve7te la4
a3 poziionarea imaginii n pagin
a3 stabilirea numelui i locaiei unde se afl imaginea
b3 crearea unei legturi prin intermediul imaginii
7. 0tributele ;idt! 7i !eig!t ale etichetei LI79M sunt folosite pentru4
a3 dimensionarea te#tului
a3 alinierea imaginii cu te#tul
b3 dimensionarea imaginii
9. Ce efect are absena atributelor ;idt! 7i !eig!t din eticheta LI79M9
a3 >u se afieaz imaginea.
a3 Imaginea se afieaz pe toata suprafaa ferestrei bro;serului.
b3 'ro;serul ateapt ncrcarea complet a imaginii nainte de a ncepe afiarea te#tului.
3. Care dintre atributele urmtoare permit afi7area textului 6n ;urul imaginii9
a3 top
a3 bottom
b3 middle
4. Care dintre construciile urmtoare este folosit pentru a stabili ca fond al paginii
imaginea rice)gif9
a3 LI79 bacIgroundS%rice.gif%M
a3 LI79 srcS%rice.gif% bacIgroundM
b3 L'$)K bacIgroundS%rice.gif%M
1D. Ce reali8ea8 atributul alt 6n urmtoarea construcie9
LI79 srcS%dog.gif% altS%catel%M
a3 fieaz cuvntul catel lng imagine.
a3 fieaz cuvntul catel n spaiul rezervat imaginii.
b3 tribuie fiierului dog)gif numele catel.
11. Care dintre urmtoarele construcii plasea8 imaginea 6n stHnga 7i alinia8 textul 6n
;urul imaginii9
a3 LI79 srcS%moon.gif% ;rapS%left%M
a3 LI79 srcS%moon.gif% alignS%left%M
b3 LI79 srcS%moon.gifM alignS%;rap%M
12. Care dintre urmtoarele construcii are drept efect folosirea imaginii sign)gif ca
legtur9
a= L !refS%semn.!tml%ML?MLI79 srcS%sign.gifM
p= L srcS%semn.!tmlMLI79 !refS%sign.gif%ML?M
V= L !refS%semn.!tmlMLI79 srcS%sign.gif%ML?M
13. &entru a include 6n pagin o imagine video se folose7te urmtoarea construcie4
a3 LI79 srcS%-+8Vimagine%M
a3 LI79 dEnsrcS%-+8Vimagine%M
b3 LI79 videoS%-+8Vimagine%M
Ama6ini
1. a3
/. b3
1. c3
3. c3
4. b3
7. c3
9. b3
;. b3
9. c3
1D. b3
Capitolul ;
#iste
8istele reprezint unele dintre cele mai obinuite elemente dintr"o pagin *eb. cestea sunt
deseori folosite pentru a prezenta informaiile n mod organizat, ntr"o manier accesibil i uor de
parcurs.
Ele pot fi de trei tipuri:
r= liste ordonate /marcate prin numere sau litere3,
s= liste neordonate /marcate prin cratime, buline sau alte simboluri3
t= liste de de5ini)ii, afiate fr nici un fel de marcaj.
=n interiorul etic!etelor care delimiteaz o list pot fi folosite orice alte etic!ete 5678, cum ar fi
etic!ete de formatare a te#tului, legturi, imagini, etc.
1. Liste neordonate
$ list neordonat, reprezint o colecie de elemente nrudite, dispuse ntr"o ordine oarecare. -n
e#emplu tipic pentru o pagin *eb este o list de linI"uri spre alte documente.
cest tip de list este de fapt un bloc de te#t delimitat de etic!etele
?+#C ?/+#C /unordered listSlist neordonat3. Etic!eta de nc!idere L?-8M este obligatorie.
<iecare element al listei este introdus prin etic!eta ?#AC /list item3. &u toate c etic!eta L8IM este
o etic!et container, etic!eta sa de nc!idere, L?8IM, este opional. )ac nu este prezent, la ntlnirea
unei noi etic!ete L8IM se consider c vec!ea etic!et este nc!is.
8ista va fi afiat indentat fa de restul paginii i fiecare element al listei ncepe pe un rnd nou.
=n mod prestabilit, fiecare element al listei va fi marcat /bulleted3 cu %bulin%. E#emplul 0.C
construiete o list neordonat, aspectul su fiind cel din
<igura 0.C.
0(emplul ;. 1
L5678M
L5E)M
L6I68EMlisteCL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%M8ista neordonataL?5CML5+M
L-8M&ulori
L8IM'lacI
L8IM*!ite
L8IM+ed
L8IM9reen
L8IM'lue
L8IMKello;
L8IM,urple
L8IMTua
L?-8M
L?'$)KM
L?5678M
Etic!etele L-8M i L8IM pot avea definit atributul tLpe care stabilete caracterul afiat n faa
fiecrui element al listei. Ualorile posibile al acestui atribut sunt:
u= circle /cerc3
v= disc /disc plin3 " valoarea prestabilit
w= sTuare /patrat3
8ista din E#emplul 0.F are atributul tEpe setat la valoarea %sTuare%. 8ista este marcat aa cum se
poate vedea n <igura 0.F
0(emplul ;. /
L5678M
L5E)M
L6I68EMlisteFL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%Mtributul tEpe la liste neordonateL?5CML5+M
L-8 tEpeS%sTuare%M8imbaje de programare
L8IM&
L8IM&YY
L8IM,ascal
L8IM 'asic
L8IM,erl
L?-8M
L?'$)KM
L?5678M
(etarea atributului tEpe pentru un item al listei nlocuiete tipul de marcaj cu tipul specificat
pentru acel item.
=n <igura 0.H putei observa efectul setrii atributului tEpe pentru un item individual la listei.
0(emplul ;. 1
L5678M
L5E)M
L6I68EMlisteHL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%Mtributul tEpe la itemul unei liste L?5CML5+M
L-8 tEpeS%sTuare%M8imbaje de programare
L8IM&
L8IM&YY
L8IM,ascal
L8I tEpeS%circle%M'asic
L8IM,erl
L?-8M
L?'$)KM
L?5678M
0orme particu!are de !iste neordonate
(= #ista de directoare * este o list introdus prin etic!eta ?@A-C ?/@A-C. Etic!eta a fost
iniial utilizat pentru alctuirea listelor de fiiere. 7ulte bro;sere nu fac nici o diferen ntre
etic!etele L)I+M i L-8M, efectul lor fiind acelai.
L= #ista de meniuri " utilizeaz etic!eta ?"0G+C. -nele bro;sere afieaz lista doar n
format uor diferit fa de listele neordonate, altele ns folosesc c!iar un fel de meniu grafic de tip
pull!don pentru afiarea acestor liste.
2. Liste ordonate
$ list ordonat, este un bloc de te#t delimitat de etic!etele ?H#C ?/H#C /ordered list " list
ordonat3, etic!eta de nc!idere fiind obligatorie.
<iecare element al listei este iniiat de etic!eta ?#AC /list item3. &a i n cazul listelor neordonate,
lista va fi indentat fa de restul paginii *eb i fiecare element al listei va ncepe pe o linie nou.
)iferena fa de listele neordonate este aceea c n acest caz marcarea elementelor se face prin
cifre, nu prin simboluri.
E#emplul 0.J afieaz o list ordonat, marcat cu cifre arabe aspectul ei fiind cel din <igura 0.J.
0(emplul ;. 3
L5678M
L5E)M
L6I68EMlisteJL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%M8ista ordonataL?5CML5+M
L$8M&astigatorii concursului sunt:
L8IM,opescu 7aria
L8IMIonescu Ion
L8IM'ratu na
L?$8M
L?'$)KM
L?5678M
,entru etic!etele L$8M i L8IM se poate seta atributul tLpeT care stabilete tipul de caractere
utilizate pentru ordonarea listei. Ualorile posibile ale acestui atribut sunt:
" pentru ordonare de tipul , ' , &.../litere mari3
a " pentru ordonare de tipul a , b , c.../litere mici3
I " pentru ordonare de tipul I , II , III , IU.../cifre romane mari3
i " pentru ordonare de tipul i , ii , iii , iv.../cifre romane mici3
C " pentru ordonare de tipul C , F , H.../cifre arabe " opiune prestabilit3
)e asemenea etic!eta L$8M poate avea setat atributul start, care stabilete valoarea iniial a
secvenei de ordonare. Ualoarea acestui atribut trebuie s fie un numr ntreg pozitiv.
E#emplul 0.G construiete o list numerotat cu cifre romane mari ncepnd de la poziia a treia.
spectul paginii care conine aceast list este redat n <igura 0.G.
0(emplul ;. 4
L5678M
L5E)M
L6I68EMlisteGL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%Mtributul tEpe la liste ordonateL?5CML5+M
L$8 tEpeS%I% startS%H%M7anuale
L8IMIstorie
L8IM9eografie
L8IM'iologie
L8IM&!imie
L?$8M
L?'$)KM
L?5678M
&a i n cazul listelor neordonate, setarea atributului tEpe pentru un anumit item al listei
nlocuiete tipul de numerotare stabilit pentru ntreaga list cu tipul specificat pentru acel element.
3. (m<ricarea !iste!or
=n cadrul unei liste, fie ea ordonat sau neordonat, se pot include alte liste, procedeu numit
imbricare. <iecare list nou inclus n precedenta se va afia indentat fa de nivelul listei anterioare.
8istele pot fi imbricate n toate modurile dorite, ca n E#emplul 0.A. <igura 0.A red aspectul listei
construite n acest e#emplu.
0(emplul ;. 7
L5678M
L5E)M
L6I68EMlisteAL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%M8iste imbricateL?5CML5+M
L-8M
L8IM'ulina C
L$8M
L8IM>umarul C
L8IM>umarul F
L?$8M
L8IM'ulina F
L8IM'ulina H
L-8 tEpeS%sTuare%M
L8IM,atrat C
L8IM,atrat F
L8IM,atrat H
L?-8M
L8IM'ulina J
L?-8M
L?'$)KM
L?5678M
4. Liste de de'iniii
8istele de de5ini)ii reprezint un tip special de liste n care elementele listei nu sunt nici
numerotate /ca n listele ordonate3, nici marcate prin buline /ca n listele neordonate3 i care prezint
dou nivele de indentare.
8istele de definiii sunt blocuri de te#t incluse ntre etic!etele ?@#C ?/@#C /definition list3,
etic!eta de nc!idere fiind obligatorie. <iecare element al listei este introdus prin etic!eta ?@!C
/definition term3. <iecare element introdus prin etic!eta L)6M conine la rndul su un numr de
elemente care l definesc, introduse prin etic!eta ?@@C /definition description3.
&a i n cazul etic!etei L8IM, etic!etele de nc!idere L?)6M i L?))M sunt opionale. =n E#emplul
0.1 este construit o list de definiii.
0(emplul ;. 9
L5678M
L5E)M
L6I68EMliste1L?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%M8iste de definitiiL?5CML5+M
L)8M
L)6MIarna
L))M>inge
L))ME frig
L))Mgiua e mai scurta dect noaptea
L)6M,rimavara
L))M>atura se trezeste la viata
L))MInfloresc pomii
L))M(e intorc pasarile calatoare
L)6MUara
L))M6otul e verde
L))ME foarte cald
L))Mgiua e mai lunga dect noaptea
L)6M6oamna
L))M(e coc fructele
L))M(e strange recolta
L))M&ad frunzele
L?)8M
L?'$)KM
L?5678M
spectul listei de definiii de mai sus este cel din <igura 0.1.
Etic!etele L)8M i L?)8M marc!eaz nceputul i sfritul listei, termenii care fac parte din list
/Iarna, ,rimvara, Uara, 6oamna 3 sunt introdui prin etic!eta L)6M iar definiiile termenilor, prin
etic!etele L))M.
(e pot realiza liste ale cror elemente s fie linI"uri, imagini sau blocuri de te#t. =n E#emplul 0.0,
elementele listei sunt imagini, aa cum se poate vedea n <igura 0.0.
0(emplul ;. ;
L5678M
L5E)M
L6I68EMliste0L?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%M8iste de imaginiL?5CML5+M
L)8M
L)6M<lori
L))M
LI79 srcS%..?Imagini?roseC.jpg% ;idt!S%CFB% !eig!tS%CFB%M
L))M
LI79 srcS%..?Imagini?orangerose.gif% ;idt!S%CFB% !eig!tS%CFB%M
L)6M6e#turi
L))M
LI79 srcS%..?Imagini?silI.jpg% ;idt!S%CFB% !eig!tS%CFB%M
L))M
LI79 srcS%..?Imagini?lace.gif% ;idt!S%CFB% !eig!tS%CFB%M
L?)8M
L?'$)KM
L?5678M
E#emplul 0.D creeaz dou liste imbricate de legturi. spectul paginii care conine aceast list
este redat n <igura 0.D. ,utei testa direct funcionarea listei dac ai salvat fiierele 5678 construite
la capitolele anterioare sub numele specificat n blocul L6I68EM al fiecrui document. =n cazul cnd ai
preferat alte denumiri pentru fiiere, putei sc!imba numele fiierelor prezente n cadrul e#emplului cu
propriile dumneavoastr fiiere.
0(emplul ;. 9
L5678M
L5E)M
L6I68EMlisteDL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%M8iste de legaturiL?5CML5+M
L$8 tEpeS%I%M
L8IM&ulori
L$8M
L8IML !refS%culoriC.!tml%M&uloarea fundaluluiL?M
L8IML !refS%culoriF.!tml%M&uloarea te#tuluiL?M
L8IML !refS%culoriH.!tml%M&uloarea legaturilorL?M
L?$8M
L8IM<onturi
L$8M
L8IML !refS%fonturiC.!tml%MEtic!eta <$>6L?M
L8IML !refS%fonturiF.!tml%MEtic!eta '(E<$>6L?M
L8IML !refS%fonturiJ.!tml%MEtic!ete de accentuare a te#tuluiL?M
L?$8M
L?$8M
L?'$)KM
L?5678M
). -e.umat
=ntr"o pagin *eb pot fi introduse diverse tipuri de liste:
.= 8iste neordonate prin etic!eta L-8M L?-8M, marcate prin simboluri de tip buline,
cercuri sau ptrate
aa= 8iste ordonate prin etic!eta L$8M L?$8M marcate prin cifre arabe, cifre romane mari
sau mici, litere mari sau mici
bb= 8iste de definiii prin etic!eta L)8M L?)8M nemarcate
Elementele listelor ordonate i neordonate se introduc prin etic!eta L8IM.
Elementele listelor de definiii se introduc prin etic!etele L)6M i L))M.
8istele pot conine orice tip de elemente: te#t, imagini, linI"uri sau alte liste /n acest caz
obinndu"se liste imbricate3.
+. Test
13. 5ticheta L-8M se folose7te pentru a iniia4
a3 o list ordonat
a3 o list neordonat
b3 dou liste imbricate
Care dintre urmtoarele afirmaii este fals9
a3 Etic!eta L8IM servete pentru a introduce fiecare element al unei liste ordonate.
a3 Etic!eta L8IM servete pentru a introduce fiecare element al unei liste neordonate.
b3 Etic!eta L8IM servete pentru a introduce fiecare element al unei liste de definiii.
:n construcia L-8 tEpeS%sTuare%M ce rol are atributul tEpe9
a3 &onstruiete o list neordonat.
a3 (tabilete caracterul care va fi afiat n faa fiecrui element al listei.
b3 &onstruiete o list care are ca elemente imagini.
O list ordonat este introdus prin eticheta4
a3 L-8M
a3 L$8M
b3 L)8M
Ce rol are atributul tEpe 6n urmtoarea construcie4 L$8 tEpeS%a%M9
a3 &onstruiete o list de litere care ncepe cu caracterul %a%.
a3 &onstruiete o list ordonat.
b3 (tabilete faptul c elementele listei vor fi marcate cu litere mici.
Ce este incorect 6n exemplul urmtor9
L-8M
L8IM8imbaje de programare
L$8M
L8IM&YY
L8IM,erl
L8IM:ava
L?$8M
L8IM(isteme de operareM
L$8M
L8IM7()os
L8IM-ni#
L?-8M
L?$8M
a3 >u este permis imbricarea listelor neordonate cu liste ordonate.
a3 Este absent etic!eta de nc!idere L?8IM.
b3 Etic!etele L-8M i L$8M nu sunt nc!ise corect.
O list de definiii se introduce prin eticheta4
a3 L-8M
a3 L)6M
b3 L)8M
Care este ordinea corect 6n care se introduc elementele unei liste de definiii9
a3 a3 L)8M L)6M L))M
a3 b3 L))M L)6M L)8M
b3 c3 L)6M L)8M L))M
Ce reali8ea8 urmtoarea construcie9
L-8M
L8IMLI79 srcS%picC.gif%M
L8IMLI79 srcS%picF.gif%M
L?-8M
a3 &onstruiete o list de imagini marcate prin buline.
a3 &onstruiete o list de linI"uri ctre imaginile specificate.
b3 >imic, deoarece este incorect ca elementele unei liste s fie imagini.
Cum sunt marcate elementele unei liste de definiii9
a3 prin buline
a3 prin numere
b3 nu sunt marcate
#iste
1. b3
/. c3
1. b3
3. b3
4. c3
7. c3
9. c3
;. a3
9. a3
1D. c3
Capitolul 9
Tabele
!abelul este un element structural de baz n alctuirea unei pagini *eb. =n cadrul unui tabel pot
fi incluse oricare dintre elementele care fac parte din corpul unui document 5678: te#t, imagini, linii
orizontale, titluri, legturi, alte tabele, etc. 6abelele constituie un instrument e#trem de util de
organizare a paginii *eb, realiznd alinierea elementelor i plasarea lor n locurile dorite de designerul
paginii.
-n tabel este o gril dreptung!iular format din linii i coloane. &aseta format la intersecia
unei linii cu o coloan se numete celul,.
$ linie a tabelului este format dintr"un ir de celule aliniate pe orizontal, iar o coloan, este
format dintr"un ir de celule aliniate pe vertical.
&elulele tabelului conin date /te#t, imagini, linI"uri3, fiecare celul avnd propriile opiuni pentru
culoarea fondului, culoarea te#tului, alinierea te#tului etc.
1. Crearea unui tabel
,entru a insera un tabel ntr"un document 5678 se folosesc etic!etele corespondente <TABLE>
</TABLE>. Etic!eta <TABLE> este o etic!et container, deci etic!eta de final este obligatorie. bsena
ei face ca tabelul s nu fie afiat corect.
,entru a insera o linie ntr"un tabel se folosesc etic!etele <TR> </TR> /table ro3. <olosirea
etic!etei de nc!idere </TR> este opional.
a cum spuneam, fiecare linie de tabel este format din mai multe celule ce conin date. $ celul
de date se introduce cu etic!eta <TD> </TD> /table data3. Etic!eta de nc!idere </TD> este de
asemenea opional.
=n E#emplul D.C am construit un tabel format din patru linii, fiecare linie avnd cte dou celule
de date. spectul tabelului este redat n <igura D.C.
0(emplul 9. 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>
=n mod prestabilit, un tabel nu are c!enar vizibil. ,entru a aduga un c!enar unui tabel, se
utilizeaz atributul border al etic!etei <TABLE>. cest atribut poate primi ca valoare orice numr
ntreg /inclusiv B3 i reprezint grosimea n pi#eli a c!enarului tabelului.
)aca atributul b#r$er nu este urmat de o valoare atunci c!enarul tabelului va avea o grosime
prestabilit egal cu C pi#el, iar o valoare egal cu B a atributului b#r$er semnific absena
c!enarului.
&nd atributul b#r$er are o valoare nenul c!enarul tabelului are un aspect tridimensional.
=n E#emplul D.F este construit un tabel cu c!enar, aa cum se observ n <igura D.F. ,entru a testa
funcionarea atributului b#r$er, nlocuii n e#emplul de mai jos valoarea %J% i cu alte valori. >u
uitai ca dup fiecare modificare s salvai fiierul i s apsai butonul Refresh2Reload al bro;serului.
0(emplul 9. /
<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>
&elulele unui tabel pot conine i alte elemente n afar de te#t: imagini, legturi, formulare, etc.
E#emplul D.H construiete un tabel cu dou linii i dou coloane, celulele tabelului avnd drept
coninut imagini. spectul tabelului este cel din <igura D.H.
0(emplul 9. 1
<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
,entru a alinia un tabel ntr"o pagina *eb se utilizeaz atributul align al etic!etei <TABLE>, cu
urmtoarele valori posibile:
le*t /valoarea prestabilit3 " te#tul care urmeaz dup punctul de inserare al tabelului va fi
dispus n partea dreapt a tabelului.
center " te#tul care urmeaz dup punctul de inserare al tabelului va fi afiat pe toat
limea paginii, imediat sub tabel.
rig%t " te#tul care urmeaz dup punctul de inserare al tabelului va fi dispus n partea
stng a tabelului.
=n E#emplul D.J este ilustrat construirea unui tabel aliniat la dreapta. ,agina va avea aspectul din
<igura D.J.
0(emplul 9. 3
<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>
)istana dintre tabel i celelalte elemente din pagina *eb poate fi stabilit cu ajutorul atributelor
hspace i vspace al etic!etei <TABLE>.
Ualoarea atributului %(,ace poate fi orice numr pozitiv, inclusiv B, i reprezint distana pe
orizontal dintre tabel i celelalte elemente ale paginii *eb.
nalog, valoarea atributului +(,ace reprezint distana pe vertical dintre tabel i celelalte
elemente ale paginii. tributele %(,ace i +(,ace sunt recunoscute numai de bro;serele >etscape.
E#emplul D.G ilustreaz utilitatea celor dou atribute.
0(emplul 9. 4
<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>
,entru a observa efectul celor dou atribute editai acest e#emplu i vizualizai"l cu un bro;ser
>etscape.
tributele nefiind recunoscute de Internet E#plorer, aspectul paginii la vizualizarea cu acest
bro;ser va fi cel din <igura D.G.
3. Dimensionarea unui tabel
)imensiunile unui tabel " limea i nlimea " pot fi stabilite e#act prin intermediul atributelor
width i height ale etic!etei <TABLE>.
Ualorile acestor atribute pot fi:
numere ntregi pozitive reprezentnd limea respectiv nlimea n pi#eli a tabelului
numere ntregi ntre C i CBB, urmate de semnul 2, reprezentnd procente din limea i
nlimea total a paginii.
Iat un e#emplu de tabel cu nlimea de FBB de pi#eli i limea egal cu GB2 din limea paginii
/E#emplul D.A3
0(emplul 9. 7
<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>
spectul tabelului construit n documentul de mai sus este cel din <igura D.A.
)imensiunile unui tabel includ i valoarea dat atributului b#r$er. )e e#emplu, un tabel cu o
singur linie i o singur coloan, cu dimensiunile 6i$t%="111"7 %eig%t=".1" i avnd atributul
b#r$er setat la valoarea CB, va avea drept spaiu util 0B de pi#eli pe lime i HB de pi#eli pe nlime.
-na dintre cele mai frecvente utilizri a tabelelor este poziionarea unui te#t ntr"o anumit zon a
paginii, prin realizarea unui tabel fr c!enar /b#r$er="1"3 cu o singur linie i o singur coloan, ca
n E#emplul D.1.
0(emplul 9. 9
<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>
=n <igura D.1 este redat aspectul tabelului construit mai sus.
4. Spaierea celulelor unui tabel
)istana dintre dou celule vecine se definete cu ajutorul atributului cellspacing al etic!etei
<TABLE>.
Ualorile acestui atribut pot fi numere ntregi pozitive, inclusiv B, i reprezint distana n pi#eli
dintre dou celule vecine. Ualoarea prestabilit a atributului cell(,acing este de F pi#eli.
E#emplul D.0 ilustreaz funcionarea atributului cell(,acing. spectul tabelului este cel din
<igura D.0. ,utei modifica valoarea atributului cell(,acing pentru a observa cum se spaiaz
celulele n funcie de valorile pe care le dai.
0(emplul 9. ;
<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>
)istana dintre marginea unei celule i coninutul ei poate fi definit cu ajutorul atributului
cellpadding al etic!etei <TABLE>. Ualorile acestui atribut pot fi numere ntregi pozitive, i
reprezint distana n pi#eli dintre marginile celulei i coninutul ei. Ualoarea prestabilit a atributului
cell,a$$ing este C pi#el.
E#emplul D.D construiete un tabel n care distana dintre marginea celulelor i coninutul lor este
de FB de pi#eli. spectul acestui tabel este cel din <igura D.D.
0(emplul 9. 9
<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
)imensiunile unei celule de tip <TD> sau de tip <TH> /vezi mai jos etic!eta <TH>3 pot fi stabilite
e#act cu ajutorul a dou atribute ale acestor etic!ete: width pentru lime i height pentru nlime.
Ualorile posibile ale acestor atribute sunt:
numere ntregi pozitive /inclusiv B3 reprezentnd dimensiunea n pi#eli a limii, respectiv a
nlimii unei celule
procente din limea , respectiv nlimea tabelului.
=n E#emplul D.CB am dimensionat celula CC la limea de FB2 din limea tabelului i nlimea
egal cu 1G2 din nlimea lui. a cum se poate observa din <igura D.CB dimensionarea individual a
unei celule va afecta dimensionarea tuturor celulelor din linia i coloana din care face parte celula
respectiv. (e observ c celula CF are limea egal cu restul de 0B2 din limea tabelului. &elula FC
aflat pe aceeai coloana cu celula dimensionat are aceleai dimensiuni ca i ea.
0(emplul 9. 1D
<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 coninutului unei celule se face cu ajutorul atributului align care poate
lua valorile:
le*t " la stnga
center " centrat , valoarea prestabilit
rig%t " la dreapta
linierea pe vertical a coninutului unei celule se face cu ajutorul atributului valign care poate
lua valorile:
ba(eline " la baz
b#tt#& " jos
&i$$le " la mijloc, valoarea prestabilit
t#, " sus
ceste atribute pot fi ataate att etic!etei <TR> pentru a defini alinierea tuturor celulelor unei
linii, ct i etic!etelor <TD> i <TH> /vezi mai jos etic!eta <TH>; pentru a stabili alinierea te#tului ntr"
o singur celul. =n E#emplul D.CC este ilustrat funcionarea atributelor align i +align.
6e#tul din celulele primei, celei de"a doua i celei de"a patra linii a fost aliniat prin atributul
align asociat liniei, iar te#tul din celulele liniei a treia a fost aliniat prin atributul align asociat
fiecrei celule n parte. spectul tabelului este cel din <igura D.CC.
0(emplul 9. 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>
)ac este prezent un atribut de aliniere ataat etic!etei <TR> i pe linia respectiv o anumit
celul are propriul su atribut de aliniere, atributul de aliniere asociat etic!etei <TD> are prioritate fa
de cel asociat etic!etei <TR>.
7. Deinirea culorilor pentru un tabel
&uloarea de fond a unui tabel se stabilete cu ajutorul atributului bgcolor, care poate fi ataat
dup cum urmeaz:
ntregului tabel prin etic!eta <TABLE>,
unei linii prin etic!eta <TR>
unei celule de date prin etic!eta <TD>
Ualorile pe care le poate primi atributul bgc#l#r sunt cele cunoscute pentru culori.
)ac ntr"un tabel sunt definite mai multe atribute bgc#l#r, atunci prioritatea este, n ordine
descresctoare, urmtoarea:
C. <TD>
C. <TR>
F. <TABLE> <,ri#ritatea cea &ai &ica;
=n E#emplul D.CF este ilustrat folosirea atributului bgc#l#r.
0(emplul 9. 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>
)in <igura D.CF putei observa cum funcioneaz prioritatea atributului bgc#l#r. stfel, culoarea
ntregului tabel a fost stabilit prin etic!eta:
<TABLE bgc#l#r="li&e">
)ac o linie nu are stabilit nici o alta culoare, culoarea liniei este verde desc!is. ,entru linia a
doua a tabelului este stabilit culoarea albastru:
<TR bgc#l#r="blue">)
&elulele care fac parte din aceasta linie i care nu au stabilit o alta culoare, vor fi albastre /celula
FC3. &elelalte celule vor avea culoarea stabilit e#plicit pentru ele /celula FF va fi galben3:
<TD bgc#l#r="=ell#6">
-n tabel poate avea drept fundal nu numai o culoare, ci i o imagine. cest efect se obine
folosind atributul background al etic!etei <TABLE>, atributul primind ca valoare adresa -+8 a
imaginii. tributul bac>gr#un$ poate fi ataat i unei linii, stabilind fundalul tuturor celulelor din linia
respectiv precum i unei celule individuale, n acest caz stabilind fundalul acelei celule.
E#emplul D.CH ilustreaz acest atribut, tabelul avnd aspectul redat n <igura D.CH.
0(emplul 9. 11
<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>
&ulorile c!enarului unui tabel se pot stabili folosind atributele:
bordercolor " permite stabilirea culorii pentru c!enarul unui tabel
bordercolorlight " permite stabilirea culorii marginilor din stnga i de sus ale tabelului
bordercolordark " permite stabilirea culorii marginilor din dreapta i de jos ale tabelului
&uloarea te#tului din fiecare celul se poate stabili cu ajutorul e#presiei:
<?O@T c#l#r="AR'B (au nu&eBcul#are">te-t</?O@T>)
E#emplul D.CJ ilustreaz folosirea acestor atribute, aspectul tabelului fiind cel din <igura D.CJ.
0(emplul 9. 13
<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 setat grosimea c!enarului tabelului la valoarea de CB pi#eli, pentru a avea un aspect
tridimensional mai pronunat.
&u ajutorul atributului b#r$erc#l#r$ar> am stabilit culoarea prii %umbrite% a c!enarului
/marginile de jos i din dreapta3 iar cu ajutorul atributului b#r$erc#l#rlig%t, culoarea prii
%luminate% a acestuia /marginile de sus i din stnga3 iar te#tul din celule l"am scris cu culori diferite,
folosind etic!eta <?O@T>.
&ulorile stabilite pentru c!enarul e#terior al tabelului sunt folosite i pentru a colora liniile
despritoare dintre celulele tabelului. ,entru acestea partea %umbrit% este format din muc!iile de sus
i din stnga iar partea %luminat% este format din muc!iile de jos i din dreapta.
)ac dorim s colorm separat muc!iile care despart liniile sau celulele tabelului putem asocia
atributele b#r$erc#l#r, b#r$erc#l#r$ar> i b#r$erc#l#rlig%t etic!etelor <TR> i <TD>.
8ten)ieM
tributele b#r$erc#l#r, b#r$erc#l#r$ar> i b#r$erc#l#rlig%t nu sunt recunoscute de
bro;serul >escape.
Uizualizai pagina de mai sus cu un bro;ser >etscape pentru a observa aspectul ei.
!. "itlul unui tabel
-nui tabel i se poate ataa un titlu cu ajutorul etic!etei <CAT!"#> /table captionStitlu tabel3.
ceast etic!et trebuie plasat n interiorul etic!etelor <TABLE> </TABLE>, dar nu n interiorul
etic!etelor <TR> sau <TD>.
6itlul unui tabel poate fi aliniat cu ajutorul atributului align al etic!etei <CA5TIO@> care poate
lua una dintre valorile:
b#tt#& " sub tabel
t#, " deasupra tabelului
le*t " deasupra, la stnga tabelului
rig%t " deasupra, la dreapta tabelului
=n E#emplul D.CG titlul tabelului este aliniat deasupra sa. spectul paginii este cel din <igura D.CG.
0(emplul 9. 14
<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
-n tabel poate avea celule cu semnificaia de cap de tabel. ceste celule sunt introduse de
etic!eta <T$> /tabel headerScap de tabel3 n loc de <TD>.
6oate atributele care pot fi ataate etic!etei <TD> pot fi de asemenea ataate i etic!etei <TH>.
&oninutul celulelor definite cu <TH> este scris cu caractere aldine i centrat.
E#emplul D.CA ilustreaz modul n care se pot insera celule cu rol de cap de tabel. ,utei observa
din e#emplu c elementele cu rol de cap de tabel pot fi plasate att pe orizontal ct i pe vertical.
spectul tabelului este redat n <igura D.CA.
0(emplul 9. 17
<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
E#ist situaii cnd dorim ca o celul s se e#tind peste celulele vecine, pe orizontal sau pe
vertical. =n acest mod se obine o singur celul cu suprafaa egal cu suma suprafeelor celulelor
iniiale.
cest lucru se poate realiza cu ajutorul atributelor colspan i rowspan ale etic!etelor <TD> i
<TH>.
stfel:
colspan " realizeaz e#tinderea unei celule peste celulele din dreapta ei. Ualoarea atributului
determin numrul de celule care se unific.
rowspan " realizeaz e#tinderea unei celule peste celulele de sub ea. Ualoarea atributului
determin numrul de celule care se unific.
(unt posibile e#tinderi simultane ale unei celule pe orizontal i pe vertical. =n acest caz, n
etic!etele <TD> sau <TH> vor fi prezente ambele atribute c#l(,an i r#6(,an. E#emplul D.C1
ilustreaz modul cum se realizeaz un tabel cu celule unificate.
0(emplul 9. 19
<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>
6abelul construit n acest e#emplu are J linii i J coloane. a cum se vede n <igura D.C1, prin
folosirea atributelor c#l(,an i r#6(,an configuraia tabelului s"a modificat astfel: celula CC s"a
e#tins n jos peste celulele FC i HC /<TD r#6(,an="!">3, celula CF a rmas nemodificat, celula CH
s"a e#tins att spre dreapta peste celula CJ ct i n jos, peste celulele FH i FJ /<TD c#l(,an=""
r#6(,an="!">3.
&elulele FF, HF i JC au rmas nemodificate iar celula JF s"a e#tins spre dreapta peste celulele JH
i JJ /<TD c#l(,an="!">)
Etic!etelor <TD> i <TH> li se poate ataa atributul nowrap. El interzice ajustarea automat a
lungimii unei linii de te#t, astfel nct n tabel pot aprea coloane cu o lime orict de mare. -n tabel
n care este folosit atributul n#6ra, este cel construit n E#emplul D.C0. spectul tabelului este redat n
<igura D.C0.
0(emplul 9. 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
)ac un tabel are celule fr coninut /celule vide3, atunci aceste celule vor aprea n tabel fr un
c!enar de delimitare. =n scopul de a afia un c!enar pentru celulele vide se poate proceda astfel:
dup etic!eta <TD> se adaug %nbsp&
dup etic!eta <TD> se adaug <BR>
&aracterul Fnb(,G /no break space3 este, aa cum am vzut la capitolul 2ormatarea te(tului,
caracterul spaiu. -n spaiu introdus prin intermediul acestui caracter nu va fi ignorat de bro;ser)
=n E#emplul D.CD este ilustrat modul n care pot fi create celule fr coninut care s aib totui
c!enar de delimitare. )up cum observai din <igura D.CD, celula FH nu are c!enar de delimitare.
&elulele de pe a doua linie a tabelului sunt vide dar au c!enar deoarece am folosit Fnb(, i <BR>.
0(emplul 9. 19
<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
Etic!etele <C"L'R"(> </C"L'R"(> permit definirea unui grup de coloane n cadrul unui
tabel. tributele acceptate de <COL'ROH5> sunt:
span " determin numrul de coloane dintr"un grup
width " determin o lime unic pentru coloanele din grup
align " determin un tip unic de aliniere pentru coloanele din grup
)e e#emplu:
<COL'ROH5 (,an="!" 6i$t%="111"></COL'ROH5>
m definit astfel un grup de trei coloane, fiecare avnd limea de CBB de pi#eli.
=ntr"un bloc <COL'ROH5>, coloanele pot avea configurri diferite dac se utilizeaz etic!eta
<C"L>, care admite atributele:
span " identific acea coloan din grup pentru care se face configurarea. )ac lipsete, atunci
coloanele sunt configurate n ordine.
width " determin limea coloanei identificate prin (,an)
align " determin alinierea coninutului coloanei identificate prin (,an)
&el mai bine putei nelege funcionarea acestei etic!ete din E#emplul D.FB. 6abelul din acest
e#emplu are dimensiunile de JFB de pi#eli lime i FBB de pi#eli nlime i este format din dou linii
i patru coloane.
=n tabel a fost delimitat un grup de trei coloane /primele trei coloane3 prin etic!eta <COL'ROH5>
iar n cadrul acestui grup au fost definite limea i alinierea te#tului din fiecare coloane n parte. &ea
de"a patra coloan a tabelului nu face parte din grupul de coloane. )up nc!iderea etic!etei
<COL'ROH5>, celulele de date au fost introduse n mod normal, cu ajutorul etic!etei <TD>.
0(emplul 9. /D
<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>
)in <igura D.FB se poate observa c n cadrul celulei CC este respectat alinierea la stnga a
te#tului, deoarece ea a fost setata ca atare prin construcia <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)
Etic!eta <COL'ROH5> nu este recunoscut de bro;serele >etscape i prin urmare nici atributele
legate de dimensionarea coloanelor i alinierea te#tului n interiorul lor.
13. Atribute pentru aspectul c'enarului unui tabel
1tri<utu! frame
tributul )ra*e al etic!etei <TABLE> permite specificarea laturilor din c!enarul unui tabel care
vor fi vizibile.
Ualorile posibile ale acestui atribut sunt:
+#i$ " elimin toate muc!iile e#terioare ale tabelului
ab#+e " afieaz o muc!ie n partea superioar a cadrului tabelului
bel#6 " afieaz o muc!ie n partea inferioar a cadrului tabelului
%(i$e( " afieaz cte o muc!ie n partea superioar i inferioar cadrului tabelului
+(i$e( " afieaz o muc!ie n partea din stnga i din dreapta a cadrului tabelului
l%( " afieaz o muc!ie n partea din stnga a cadrului tabelului
r%( " afieaz o muc!ie n partea din dreapta a cadrului tabelului
b#- " afieaz o muc!ie pe toate laturile cadrului tabelului
1tri<utu! rules
tributul rules al etic!etei <TABLE> permite alegerea unor delimitatori pentru celulele unui
tabel. Ualorile posibile sunt:
n#ne " elimin toate muc!iile interioare ale tabelului
r#6( " afieaz muc!ii orizontale ntre toate liniile tabelului
c#l( " afieaz muc!ii verticale ntre toate coloanele tabelului
all " afieaz muc!ii ntre toate liniile i coloanele
E#emplul D.FC ilustreaz aceste atribute. tributele *ra&e i rule( pot fi combinate i cu
atributele de colorare a c!enarului i se pot folosi pentru a crea efecte interesante de aliniere n pagin
aa cum se poate vedea n <igura D.FC.
0(emplul 9. /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
-n tabel poate conine n celulele sale i alte elemente n afar de te#t, inclusiv un alt tabel,
formnd astfel un ansamblu de tabele imbricate.
=n E#emplul D.FF vom ilustra modul n care se pot imbrica dou tabele.
0(emplul 9. //
<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 se vede din <igura D.FF tabelul este format din dou linii i dou coloane. =n celula FC a
tabelului am inclus un alt tabel, format din trei linii i dou coloane.
15. (ecoman$ri pri)in$ olosirea tabelelor
6abelele se numr printre cele mai folosite elemente ntr"o pagin *eb. Ele reprezint un
instrument practic indispensabil pentru definirea aspectului paginii, ntruct permit alinierea corect a
elementelor din pagin: te#t, imagini, legturi, etc. =n interiorul unui tabel se pot include i alte tabele,
n funcie de necesiti, formnd o reea de tabele imbricate.
(ingura precauie pe care trebuie s o avei n vedere cnd folosii tabele n paginile
dumneavoastr este cea legat de etic!etele i atributele specifice unui anumit tip de bro;ser) a dup
cum ai observat din e#emplele prezentate, aspectul paginilor poate s difere simitor de la un tip de
bro;ser la altul, atunci cnd un anumit element nu este recunoscut. )ac vei considera c aspectul
tabelelor este esenial pentru paginile site"ului, este recomandat s v limitai la etic!etele standard,
recunoscute de toate bro;serele .
=n ne#a C vei gsi o list a celor mai utilizate etic!ete mpreun cu meniunea dac fac parte din
standardul 5678 H.F.
16. (e*umat
6abelele se insereaz ntr"un document 5678 cu ajutorul etic!etei container <TABLE>
</TABLE>
6abelele sunt formate din linii, care se introduc prin etic!eta <TR> iar fiecare linie este format
din celule introduse prin etic!eta <TD>.
&elulele unui tabel pot conine te#t, etic!ete de formatare a te#tului, imagini, legturi, formulare
sau alte tabele.
Etic!etele <TABLE>, <TR> i <TD> au o serie de atribute comune:
align
" cnd este asociat cu <TABLE> stabilete alinierea tabelului fa de te#tul din jur
" cnd este asociat cu <TR> stabilete alinierea te#tului din celulele liniei respective
" cnd este asociat cu <TD> stabilete alinierea te#tului din celul
bgc#l#r stabilete culoarea fundalului pentru ntregul tabel, o linie sau o celul.
b#r$erc#l#r, b#r$erc#l#r$ar> i b#r$erc#l#rlig%t stabilesc culorile
c!enarelor
+align aliniaz te#tul pe vertical n cadrul tabelului, al celulelor unei linii sau al unei
celule individuale
6abelul n ntregime sau o celul a sa pot avea o imagine ca fundal, specificat cu ajutorul
atributului bac>gr#un$.
9rosimea c!enarului tabelului se stabilete cu ajutorul atributului b#r$er.
)imensiunile tabelului sau ale unei celule individuale se stabilesc prin intermediul atributelor
6i$t% i %eig%t.
&u ajutorul atributelor cell(,acing i cell,a$$ing se stabilesc distana dintre celulele
tabelului, respectiv distana dintre coninutul celulelor i marginile lor.
,entru a crea tabele de forme oarecare se folosesc atributele c#l(,an i r#6(,an care permit
e#tinderea unei celule peste celulele din dreapta ei, respectiv peste celulele de sub ea.
-nui tabel i se poate ataa un titlu prin etic!eta <CA5TIO@> i se pot introduce celule cu rol de
cap de tabel prin etic!eta <TH>)
=ntr"un tabel se pot defini grupuri de coloane cu ajutorul etic!etei container <COL'ROH5>
</COL'ROH5>. =n cadrul acestui grup, aspectul fiecrei coloane n parte este stabilit prin etic!eta
<COL>)
7odul de afiare al marginilor tabelului precum i al liniilor despritoare dintre linii i celule se
poate stabili cu ajutorul atributelor *ra&e i rule(.
17. "est
1). (a ce serve7te eticheta <TD>9
a3 ,entru a insera un tabel n pagin.
a3 ,entru a insera o linie ntr"un tabel.
b3 ,entru a insera o celul de date ntr"o linie a tabelului.
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
a3 mndou alb, deoarece aa este setat culoarea tabelului.
a3 mndou rou, deoarece aa a fost setat culoarea liniei.
b3 &elula CC albastru, deoarece culoarea ei a fost setat e#plicit i celula CF rou, deoarece
face parte din linia a crei culoare a fost setat rou.
1,. (a ce servesc atributele width 7i height ale etichetei <TABLE>9
a3 (tabilesc dimensiunile tabelului n pagin.
a3 liniaz tabelul fa de restul elementelor din pagin.
b3 (tabilesc dimensiunile celulelor tabelului.
13. Ce efect are urmtoarea construcie4
<TABLE b#r$er cell(,acing="." cell,a$$ing="11">O
a3 6e#tul din celule este distanat cu G pi#eli fa de c!enarul celulelor, iar celulele sunt
distanate ntre ele cu CB pi#eli.
a3 6e#tul din celule este distanat cu CB pi#eli fa de c!enarul celulelor, iar celulele sunt
distanate ntre ele cu G pi#eli.
b3 &!enarul tabelului are grosimea de G pi#eli iar c!enarul celulelor grosimea de CB pi#eli.
14. Care dintre urmtoarele construcii alinia8 la dreapta coninutul celor dou celule9
a3 <TR align="le*t"><TD align="rig%t">celula 11<TD>celula 1
b3 <TR><TD align="rig%t">celula 11<TD>celula 1
c3 <TR align="rig%t"><TD>celula 11<TD>celula 1
2;. (a ce folose7te eticheta <TH>9
a3 Introduce o celul de date.
a3 Introduce o celul cu rol de cap de tabel.
b3 Introduce o linie cu rol de cap de tabel.
21. &entru a ata7a un titlu tabelului folosim eticheta4
a3 <HEAD>
a3 <CA5TIO@>
b3 <TITLE>
22. Ce efect are atributul colspan 6n construcia urmtoare4
<TR><TD c#l(,an="!">cel 11 cel 1 cel 1!O
a3 -nific trei celule pe orizontal.
a3 -nific trei celule pe vertical.
b3 -nific cte trei celule, att pe orizontal ct i pe vertical.
23. :n care dintre construciile urmtoare chenarul tabelului nu este afi7at9
a3 <TABLE b#r$er> </TABLE>
a3 <TABLE b#r$er="1"> </TABLE>
b3 <TABLE b#r$er="P1"> </TABLE>
24. 0tributul align al etichetei <TABLE> reali8ea84
a3 linierea tabelului fa de restul elementelor din pagin.
a3 linierea te#tului n tabel.
b3 linierea te#tului n fiecare celul a tabelului
!abele
1. c3
/. c3
1. a3
3. b3
4. c3
7. b3
9. b3
;. a3
9. b3
1D. a3
Capitolul 1D
Cadre <5rames=
$ modalitate de structurare avansat a unui document 5678 este mprirea ferestrei bro;serului
n mai multe ferestre distincte, denumite cadre /frames3.
ceast facilitate permite afiarea simultan, n aceeai fereastr a bro;serului, a dou sau mai
multe documente 5678 diferite, cte unul n fiecare cadru.
,entru a realiza acest lucru sunt necesare urmtoarele:
un document de definire a cadrelor care conine etic!etele care stabilesc numrul, dimensiunile i
aezarea cadrelor n pagin
cte un fiier 5678 pentru fiecare cadru n parte, prin care se stabilete coninutul cadrului
respectiv.
)e e#emplu, o pagin *eb care conine dou cadre va fi definit prin trei documente 5678:
documentul de definire a cadrelor, care specific dimensiunile i aezarea cadrelor n pagin]
cele dou documente care descriu coninutul fiecrui cadru n parte.
=n esen, cadrele fac posibil afiarea n fereastra bro;serului a mai multe pagini, simultan.
1. @ocumentu! de de'inire a cadre!or
=n cadrul documentului de definire a cadrelor, blocul L'$)KM L?'$)KM este nlocuit de blocul
?2-8"0'0!C ?/2-8"0'0!C. =n acest tip de document blocul L'$)KM nu mai este folosit.
=n interiorul blocului L<+7E(E6M, fiecare cadru este introdus prin etic!eta ?2-8"0C.
)efinirea documentului ce va fi afiat ntr"un cadru se face prin atributul src /source3. cesta este
un atribut obligatoriu al etic!etei L<+7EM, i primete ca valoare adresa -+8 a documentului
5678 care va fi ncrcat n acel cadru.
)efinirea cadrelor se face prin mprirea ferestrelor n linii i coloane:
mprirea unei ferestre ntr"un numr de cadre de tip coloan se face cu ajutorul atributului cols
al etic!etei L<+7E(E6M ce descrie acea fereastr]
mprirea unei ferestre n cadre de tip linie se face cu ajutorul atributului rows al etic!etei
L<+7E(E6M care descrie fereastra.
Ualorile atributelor cols si ro;s sunt liste de elemente separate prin virgul care descriu modul n
care se face mprirea ferestrei.
Ualorile acestor atribute pot fi e#primate n mai multe moduri:
n pi#eli j n care caz valoarea este un numr ntreg
n procente din dimensiunea ferestrei /un numr cuprins ntre C i DD, urmat de simbolul 23
n dimensiuni relative, nk. (imbolul nk semnific faptul c linia sau coloana astfel definit ocup
a n"a parte din spaiul rmas dup dispunerea n fereastr a liniilor, respectiv coloanelor precedente
/vezi e#emplele de mai jos3.
0(emplul 1:
colsS%FBB , k , GB2 , k
ceast construcie descrie o mprire n patru cadre de tip coloan, dintre care prima are FBB
pi#eli, a treia ocup jumtate din spaiul total disponibil, iar a doua i a patra ocup n mod egal restul
de spaiu rmas disponibil.
0(emplul /:
ro;sS%FBB , GB2 , Ck , Fk %
=n acest e#emplu, pagina este mprit n patru cadre de tip linie, dintre care prima are FBB pi#eli,
a doua ocup jumtate din spaiul total disponibil iar a treia i a patra ocup restul de spaiu rmas
disponibil, care se mparte n trei pri egale, al treilea cadru ocupnd o parte, iar al patrulea ocupnd
dou pri.
Hbserva)ii
dac mai multe elemente din list sunt configurate cu k , atunci spaiul disponibil rmas pentru ele
se va mpri n mod egal.
n cadrul unui bloc L<+7E(E6M poate fi inclus un cadru prin etic!eta L<+7EM sau un alt
bloc L<+7E(E6M obinndu"se astfel cadre imbricate.
=n majoritatea e#emplelor care vor urma am folosit ca -+8"uri pentru documentele pe care le
conin cadrele, pagini deja construite n capitolele anterioare. )ac ai salvat documentele 5678 cu
numele specificate n etic!eta L6I68EM putei verifica direct e#emplele care vor urma. )ac preferai
s ncrcai n cadrele descrise n e#emplele urmtoare alte documente, va trebui s facei modificrile
necesare specificnd numele acestor fiiere.
E#emplul CB.C mparte pagina n dou cadre verticale, fiecare ocupnd jumtate din pagin.
spectul paginii este cel din <igura CB.C.
0(emplul 1D. 1
L5678M
L5E)M
L6I68EMcadreCL?6I68EM
L?5E)M
L<+7E(E6 colsS%k, k%M
L<+7E srcS%listeC.!tml%M
L<+7E srcS%listeJ.!tml%M
L?<+7E(E6M
L?5678M
=n E#emplul CB.F este creat o pagina *eb cu trei cadre orizontale. ,rimul cadru are CBB de
pi#eli, al treilea ocup HB2 din fereastra bro;serului, iar al doilea ocup restul spaiului. ,agina arat
ca n <igura CB.F.
0(emplul 1D. /
L5678M
L5E)M
L6I68EMcadreFL?6I68EM
L?5E)M
L<+7E(E6 ro;sS%CBB , k , HB2%M
L<+7E srcS%listeC.!tml%M
L<+7E srcS%listeF.!tml%M
L<+7E srcS%listeH.!tml%M
L?<+7E(E6M
L?5678M
E#emplul CB.H creaz o matrice ptrat de J cadre /F # F3. ,entru a realiza acest lucru, se folosesc
simultan cele dou atribute cols i ro;s. ,agina descris n acest document va avea aspectul din <igura
CB.H.
0(emplul 1D. 1
L5678M
L5E)M
L6I68EMcadreHL?6I68EM
L?5E)M
L<+7E(E6 ro;sS%k, k% colsS%k, k%M
L<+7E srcS%tabeleC.!tml%M
L<+7E srcS%tabeleF.!tml%M
L<+7E srcS%tabeleJ.!tml%M
L<+7E srcS%tabeleA.!tml%M
L?<+7E(E6M
L?5678M
2. Cadre im<ricate
&adrele, ca i alte elemente ale paginii *eb /liste, tabele3, se pot imbrica, adic pot fi incluse
cadre n interiorul altor cadre. =n E#emplul CB.J este creat o pagin cu trei cadre mi#te. ,entru a
construi pagina se procedeaz din aproape n aproape. 7ai nti, pagina este mprit n dou cadre de
tip coloan, dup care al doilea cadru este mprit n dou cadre de tip linie. ,agina va avea aspectul
din <igura CB.J.
0(emplul 1D. 3
L5678M
L5E)M
L6I68EMcadreJL?6I68EM
L?5E)M
L<+7E(E6 colsS%HB2, k%M
L<+7E srcS%tabeleC.!tml%M
L<+7E(E6 ro;sS%k, k%M
L<+7E srcS%tabeleF.!tml%M
L<+7E srcS%tabeleJ.!tml%M
L?<+7E(E6M
L?<+7E(E6M
L?5678M
3. Contro!u! aspectu!ui unui cadru
Cu!oarea mar&inii cadru!ui
,entru a stabili culoarea c!enarului unui cadru se utilizeaz atributul bordercolor. cest atribut
primete ca valoare un nume de culoare sau o culoare definit n conformitate cu modelul +9'.
tributul bordercolor poate fi ataat att etic!etei L<+7E(E6M pentru a stabili culoarea tuturor
c!enarelor cadrelor incluse, ct i etic!etei L<+7EM, pentru a stabili culoarea c!enarului pentru un
cadru individual.
E#emplul CB.G ilustreaz atributul bordercolor. ,agina descris n acest document are aspectul din
<igura CB.G.
0(emplul 1D. 4
L5678M
L5E)M
L6I68EMcadreGL?6I68EM
L?5E)M
L<+7E(E6 colsS%FB2, k% bordercolorS%green% borderS%CG%M
L<+7E srcS%te#tH.!tml%M
L<+7E(E6 ro;sS%k, k%M
L<+7E srcS%te#tJ.!tml% bordercolorS%blue%M
L<+7E srcS%te#tG.!tml%M
L?<+7E(E6M
L?<+7E(E6M
L?5678M
L*imea mar&inii cadru!ui
tributul border al etic!etei L<+7E(E6M permite configurarea limii c!enarelor tuturor
cadrelor la un numr dorit de pi#eli. Ualoarea atributului border este un numr ntreg, ce reprezint
numrul de pi#eli, valoarea prestabilit fiind de G pi#eli. =n mod prestabilit, c!enarul unui cadru este
afiat i are aspect tridimensional.
,entru a obine cadre fr c!enar se utilizeaz setarea borderS%B%.
fiarea c!enarului unui cadru se mai poate dezactiva i dac se utilizeaz atributul 5rameborder
cu valoarea %no%. cest atribut poate fi ataat att etic!etei L<+7E(E6M /dezactivarea fiind valabil
pentru toate cadrele incluse3 ct i etic!etei L<+7EM /dezactivarea fiind valabila numai pentru un
singur cadru3.
Ualorile posibile ale atributului frameborder sunt:
Ees " ec!ivalent cu C
no " ec!ivalent cu B
&adrele din E#emplul CB.A nu au c!enar. )up cum putei observa din <igura CB.A crearea unor
cadre fr c!enar poate duce la apariia unor ambiguiti n pagin aa nct acest efect trebuie folosit
cu atenie.
0(emplul 1D. 7
L5678M
L5E)M
L6I68EMcadreAL?6I68EM
L?5E)M
L<+7E(E6 ro;sS%k, k% borderS%B%M
L<+7E srcS%tabeleC.!tml%M
L<+7E srcS%tabeleF.!tml%M
L?<+7E(E6M
L?5678M
@imensiunea cadru!ui
&!iar dac dimensiunile unui cadru au fost stabilite n mod e#plicit prin valorile atributelor
etic!etei L<+7E(E6M, utilizatorul are posibilitatea de a altera aceste dimensiuni cu ajutorul mouse"
ului.
=n scopul prevenirii acestei situaii se poate utiliza atributul noresi.e, ataat etic!etei L<+7EM,
al crui efect este cel de blocare a posibilitii de redimensionare a cadrului.
4. $are de deru!are
tributul scrollin6 al etic!etei L<+7EM este utilizat pentru a aduga unui cadru o bar de
derulare sau de defilare /scrolling bar3, care permite navigarea n interiorul documentului afiat n
cadru. Ualorile posibile ale atributului scrolling sunt:
Ees " bara de derulare este prezent ntotdeauna]
no " bara de derulare nu este disponibil]
auto " bara de derulare este vizibil atunci cnd este necesar. ceasta opiune las bro;serului
posibilitatea de a aduga sau nu bara, n funcie de dimensiunea te#tului din cadru.
E#emplul CB.1 ilustreaz funcionarea atributului scrolling n cele trei situaii.
0(emplul 1D. 9
L5678M
L5E)M
L6I68EMcadre1L?6I68EM
L?5E)M
L<+7E(E6 ro;sS%k, k, k%M
L<+7E srcS%te#tC.!tml% scrollingS%Ees% noresizeM
L<+7E srcS%te#t1.!tml% scrollingS%no% noresizeM
L<+7E srcS%te#t0.!tml% scrollingS%auto% noresizeM
L?<+7E(E6M
L?5678M
)in <igura CB.1 se observ c, deoarece la primul cadru te#tul nu depete dimensiunea ferestrei,
bara de derulare nu este afiat dei atributul scrolling are valoarea %Ees%.
=n cel de"al doilea cadru bara de derulare nu este afiat, indiferent de dimensiunea te#tului din
cadru.
8a cel de"al treilea cadru, prezena sau absena barei de derulare este condiionat de dimensiunea
te#tului. ici, deoarece te#tul depete dimensiunea ferestrei, bara este afiata.
). :o.iionarea documentu!ui ntr-un cadru
tributele mar6inhei6ht i mar6inwidth ale etic!etei L<+7EM permit stabilirea distanei n
pi#eli dintre coninutul unui cadru i marginile verticale, respectiv orizontale ale cadrului. Ualorile
posibile ale acestor atribute sunt:
un numr de pi#eli
procente din nlimea, respectiv din limea cadrului
=n E#emplul CB.0 fereastra bro;serului este mprit n trei cadre de tip coloan de dimensiuni
egale. =n toate cele trei cadre este afiat acelai document, ceea ce difer este poziionarea
documentului n fiecare cadru.
stfel, n cadrul din stnga, nu este specificat nici o valoare pentru atributele margin!eig!t i
margin;idt!.
=n cadrul din mijloc, se stabilete distana de GB de pi#eli ntre marginea superioar i cea
inferioar a cadrului i te#t.
=n cadrul din dreapta se stabilete o distan de HB de pi#eli ntre marginea din stnga i cea din
dreapta a cadrului i te#t. ,agina are aspectul din <igura CB.0.
0(emplul 1D. ;
L5678M
L5E)M
L6I68EMcadre0L?6I68EM
L?5E)M
L<+7E(E6 colsS%k , k , k%M
L<+7E srcS%te#tC.!tml%M
L<+7E srcS%te#tC.!tml% margin!eig!tS%AB%M
L<+7E srcS%te#tC.!tml% margin;idt!S%JB%M
L?<+7E(E6M
L?5678M
8ten)ieM
/4. E#ist bro;sere care nu suport cadre. ,entru acestea se utilizeaz n interiorul blocului
L<+7E(E6M etic!eta ?GH2-8"0'C ?/GH2-8"0'C. )ac bro;serul poate s interpreteze
cadre, va ignora ce se gsete n aceast poriune, iar dac nu, materialul cuprins n zona
L>$<+7E(M L?>$<+7E(M va fi singurul care va fi recunoscut i afiat.
Este de precizat i faptul c ntre L>$<+7E(M L?>$<+7E(M se pot introduce orice alte
etic!ete 5678 /inclusiv imagini, !EperlinI"uri, tabele3.
+. Cadre interne 8in-!ine 'rames9
-n cadru intern este specificat prin intermediul etic!etei ?A2-8"0C ?/A2-8"0C. Ea
definete o arie rectangular n interiorul documentului, arie n care bro;serul va afia un alt document
5678, complet, inclusiv marginile i barele de derulare.
-n cadru intern se insereaz ntr"o pagina *eb n mod asemntor cu o imagine, n interiorul
blocului L'$)KM, aa cum rezult din urmtorul e#emplu:
LI<+7E srcS%tabeleCB.!tml% !eig!tSJB2 ;idt!SGB2M L?I<+7EM
=n acest caz, am specificat c dorim un cadru intern care are JB2 din nlimea i GB2 din limea
paginii curente.
tributele acceptate de etic!eta LI<+7EM sunt n parte preluate de la etic!etele L<+7EM i
L<+7E(E6M, cum ar fi:
src, border, 5rameborder, bordercolor, mar6inhei6ht, mar6inwidth, scrollin6, name.
$ parte din atributele L<+7EM sunt comune cu cele ale etic!etei LI79M:
vspace, hspace, ali6n, width, hei6ht.
=n E#emplul CB.D am construit un cadru intern n care se desc!ide unul dintre documentele
5678 create la capitolul !abele.
0(emplul 1D. 9
L5678M
L5E)M
L6I68EMcadreDL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%M&adre interneL?5CML5+M
L&E>6E+M
LI<+7E ;idt!S%AB2% !eig!tS%GB2% nameS%icad% srcS%tabeleJ.!tml%M
)aca vedeti acest te#t inseamna ca bro;serul dumnevoastra nu suporta cadre interne.
L,ML !refS%cadreCB.!tml%M,agina fara cadre interneL?M
L?I<+7EM
L?&E>6E+M
L?'$)KM
L?5678M
)in <igura CB.D putei observa c aspectul unui cadru intern este ntructva similar cu cel al unei
imagini in!line.
Etic!eta LI<+7EM se introduce n cadrul blocului L'$)KM i n cazul folosirii ei nu mai este
necesar un document de definire a cadrelor. ,entru situaia cnd bro;serul nu accept cadre interne, am
asigurat o versiune a paginii care nu conine astfel de cadre /cadreB@)html3 introdus prin etic!eta LM.
&oninutul acestei pagini este foarte simplu, servind doar la ilustrarea modului n care poate fi
construit o alternativ la pagina cu cadre interne /E#emplul CB.CB3
0(emplul 1D. 1D
L5678M
L5E)M
L6I68EMcadreCBL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%M,agina fara cadre interneL?5CML5+M
L?'$)KM
L?5678M
Iat un alt e#emplu /E#emplul CB.CC3 n care am creat o pagin care conine trei linI"uri iar
acestea desc!id paginile referite de ele n cadrul intern din centrul paginii. <igura CB.CB red aspectul
acestei pagini.
0(emplul 1D. 11
L5678M
L5E)M
L6I68EMcadreCCL?6I68EM
L?5E)M
L'$)KM
L !refS%tabeleJ.!tml% targetS%icad%M<isierulCL?ML'+M
L !refS%tabeleG.!tml% targetS%icad%M<isierulFL?ML'+M
L !refS%tabeleA.!tml% targetS%icad%M<isierulHL?ML'+M
L&E>6E+M
LI<+7E ;idt!S%AB2% !eig!tS%GB2% nameS%icad% srcS%cadreCC.!tml%M
)aca vedeti acest te#t inseamna ca bro;serul dumnevoastra nu suporta cadre interne.
L,ML !refS%cadreCB.!tml%M,agina fara cadre interneL?M
L?I<+7EM
L?&E>6E+M
L?'$)KM
L?5678M
=n e#emplu am folosit atributul name al etic!etei LI<+7EM cu ajutorul cruia am atribuit un
nume acestui cadru i anume %icad%. cest lucru a fost necesar pentru a specifica, prin intermediul
atributului tar6et al etic!etei LM, faptul c linI"urile se vor desc!ide n cadrul intern.
,. @esc/iderea documente!or n a!te cadre
)ac ntr"unul dintre documentele desc!ise n cadru e#ist linI"uri, acestea vor desc!ide paginile
referite de ele n cadrul curent.
cest comportament se poate sc!imba prin plasarea n etic!eta LM a atributului tar6et, care
precizeaz numele ferestrei /cadrului3 n care se va ncrca pagina nou referit de legtur, conform
sinta#ei:
L !refS%-+8% targetS%numeVframe%M L?M
>umele unui cadru este stabilit prin atributul name al etic!etei L<+7EM conform sinta#ei:
L<+7E nameS%numeVframe%M
=n E#emplul CB.CF este prezentat o pagina *eb cu dou cadre. )ocumentul de definire a
cadrelor este cadreB>) html al crui aspect este redat n <igura CB.CC.
0(emplul 1D. 1/
L5678M
L5E)M
L6I68EMcadreCFL?6I68EM
L?5E)M
L<+7E(E6 colsS%FB2, k%M
L<+7E srcS%cadreCH.!tml%M
L<+7E srcS%cadreCJ.!tml% nameS%cadruVdreapta%M
L?<+7E(E6M
L?5678M
)ocumentul de definire a cadrelor mparte pagina n dou cadre de tip coloan. =n cel din stnga
se va desc!ide documentul cadreBA)html iar n cel din dreapta, documentul cadreB<)html. &el de"al
doilea cadru a fost numit %cadruVdreapta%.
=n E#emplul CB.CH este creat documentul cadreBA)html. cest document conine, dup cum
observai, patru linI"uri. ,rin intermediul atributului target am specificat cadrul n care se vor desc!ide
acestea. 6oate aceste legturi desc!id paginile referite de ele n cadrul drept.
0(emplul 1D. 11
L5678M
L5E)M
L6I68EMcadreCHL?6I68EM
L?5E)M
L'$)KM
L !refS%tabeleA.!tml% targetS%cadruVdreapta%M
8egatura C
L?ML'+M
L !refS%tabele1.!tml% targetS%cadruVdreapta%M
8egatura F
L?ML'+M
L !refS%tabele0.!tml% targetS%cadruVdreapta%M
8egatura H
L?ML'+M
L !refS%cadreCJ.!tml% targetS%cadruVdreapta%M
5ome
L?ML'+M
L?'$)KM
L?5678M
=n E#emplul CB.CJ este creat documentul cadreB<)html.
0(emplul 1D. 13
L5678M
L5E)M
L6I68EMcadreCJL?6I68EM
L?5E)M
L'$)KM
L5HMici se vor desc!ide paginile referite de legaturile din cadrul stangL?5HML5+M
L?'$)KM
L?5678M
(alvai cele trei fiiere cu numele specificate i desc!idei cu bro;serul fiierul cadreB>)html
pentru a observa cum funcioneaz atributele prezentate.
tributul target al etic!etei L<+7EM accept i anumite valori predefinite i anume:
Vself " ncrcarea noii pagini are loc n cadrul curent
VblanI " ncrcarea noii pagini are loc ntr"o fereastr nou, anonim
Vparent " ncrcarea noii pagini are loc n cadrul printe al cadrului curent dac acesta e#ist,
altfel are loc n fereastra curent a bro;serului
Vtop " ncrcarea noii pagini are loc n fereastra bro;serului ce conine cadrul curent.
-rmtorul e#emplu ilustreaz felul cum funcioneaz aceste valori ale atributului target.
)ocumentul de definire a cadrelor este prezentat n E#emplul CB.CG aspectul su fiind cel din
<igura CB.CF. ,agina construit n acest e#emplu conine dou cadre orizontale. =n cel de sus este
ncrcat documentul cadreBI)html iar n cel de jos, documentul cadreB=)html.
0(emplul 1D. 14
L5678M
L5E)M
L6I68EMcadreCGL?6I68EM
L?5E)M
L<+7E(E6 ro;sS%HB2, k%M
L<+7E srcS%cadreC1.!tml%M
L<+7E srcS%cadreCA.!tml%M
L?<+7E(E6M
L?5678M
E#emplul CB.CA construiete documentul cadreB=)html care conine trei legturi ctre fiiere
5678 create la capitolul 2ormatarea te(tului. <iecare dintre aceste legaturi are specificat atributul
target pentru a ilustra modul n care funcioneaz acesta.
0(emplul 1D. 17
L5678M
L5E)M
L6I68EMcadreCAL?6I68EM
L?5E)M
L'$)KM
L !refS%te#tJ.!tml% targetS%VblanI%M
ceasta legatura se desc!ide in alta fereastra
L?ML'+M
L !refS%te#tG.!tml% targetS%Vself%M
ceasta legatura se desc!ide in fereastra curenta
L?ML'+M
L !refS%te#tA.!tml% targetS%Vparent%M
ceasta legatura se desc!ide in fereastra parinte
L?ML'+M
L?'$)KM
L?5678M
)ocumentul cadreBI)html prezentat n E#emplul CB.C1 este o pagin *eb foarte simpl care se va
desc!ide n cadrul de sus.
0(emplul 1D. 19
L5678M
L5E)M
L6I68EMcadreC1L?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%Mtributul targetL?5CM
L?'$)KM
L?5678M
,entru a observa modul de funcionare al atributului target salvai cele trei fiiere sub numele
specificate i desc!idei cu bro;serul documentul cadreB?)html.
3. Su&estii pri"ind 'o!osirea cadre!or
)ei cadrele reprezint o maniera destul de spectaculoas de a structura o pagin *eb, ele
prezint o mulime de dezavantaje.
=ncrcarea unei pagini care conine cadre se face mai greu, inde#area paginii de ctre motoarele
de cutare este mai dificil. )e asemenea, deoarece documentul din fiecare cadru are propriul -+8 ,
este mai greu pentru vizitator s rein adresa paginii n .avorites. .i, nu n ultimul rnd, deoarece
e#ist bro;sere care nu suport cadrele, este indicat s asigurai pentru fiecare pagin astfel structurat
i o versiune fr cadre, ceea ce implic un efort suplimentar.
vnd n vedere toate aceste aspecte, este bine s limitai folosirea cadrelor n paginile
dumneavoastr doar la situaiile n care nu putei proceda altfel.
4. -e.umat
<olosirea cadrelor ntr"un document 5678 permite desc!iderea mai multor pagini distincte n
documentul respectiv.
,entru a crea o pagin care conine cadre sunt necesare mai multe documente 5678:
documentul de definire a cadrelor
cte un document 5678 pentru fiecare cadru definit
)ocumentul de definire a cadrelor nu conine blocul L'$)KM acesta fiind nlocuit de blocul
L<+7E(E6M L?<+7E(E6M. =n cadrul blocului L<+7E(E6M fiecare cadru este introdus prin
etic!eta L<+7EM.
=mprirea ferestrei n cadre de tip coloan se face cu ajutorul atributului cols iar n cadre de tip
linie se face cu ajutorul atributului ro;s. mbele atribute sunt asociate etic!etei L<+7E(E6M.
,entru a stabili limea c!enarului unui cadru se folosete atributul border al etic!etei L<+7EM.
,entru a stabili culoarea c!enarului unui cadru se folosete atributul bordercolor al etic!etei
L<+7EM. ceste atribute pot fi asociate i etic!etei L<+7E(E6M, caz n care efectul lor se va
aplica tuturor cadrelor din set.
,rezena barelor de derulare ntr"un cadru se stabilete cu ajutorul atributului scrolling.
,entru a poziiona documentul ntr"un cadru se folosesc atributele margin;idt! i margin!eig!t.
=ntr"o pagin *eb se pot introduce i cadre interne, cu ajutorul etic!etei LI<+7EM
L?I<+7EM.
,entru a specifica fereastra sau cadrul n care se va desc!ide un document se folosete atributul
target care poate avea ca valoare numele ferestrei /cadrului3 sau poate avea o valoare predefinit.
Este recomandat s asigurai o versiune fr cadre a documentului 5678, pentru ca acesta s
poat fi vizualizat cu bro;serele care nu suport cadre. ,entru aceasta, elementele care fac parte din
versiunea fr cadre se includ ntre etic!etele L>$<+7E(M L?>$<+7E(M.
1;. Test
/7. :n ce 8on a unui document #%M( se introduce blocul L<+7E(E6M9
a3 =n blocul L'$)KM
a3 =n blocul L5E)M
b3 L<+7E(E6M formeaz un bloc separat.
Cum se introduce un cadru 6n pagin9
a3 ,rin etic!eta L<+7E(E6M
a3 ,rin etic!eta L<+7EM
b3 ,rin etic!eta L(+&M
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
a3 L<+7E(E6 colsS%k , k, k%
a3 L<+7E(E6 colsS%GB2, Ck , Fk%
b3 L<+7E(E6 colsS%GB2, k , k%
Ce reali8ea8 urmtoarea construcie9
L5678M
L<+7E(E6 colsS%k, k%M
L<+7E srcS%frameC.!tml%M
L<+7E(E6 ro;sS%k, k%M
L<+7E srcS%frameF.!tml%M
L<+7E srcS%frameH.!tmllM
L?<+7E(E6M
L?<+7E(E6M
L?5678M
a3 =mparte pagina n patru cadre, dou de tip coloan, dou de tip linie.
a3 =mparte pagina n dou cadre de tip coloan, cel de"al doilea fiind mprit n dou cadre
de tip linie.
b3 =mparte pagina n trei cadre de tip linie.
:n construcia urmtoare la ce folose7te atributul scrolling9
L<+7E srcS%frameC.!tml% scrollingS%auto%M
a3 ,ermite auto"dimensionarea cadrului n funcie de mrimea te#tului.
a3 daug automat bara de derulare pentru acest cadru.
b3 8as bro;serului posibilitatea de a aduga sau nu bara de derulare, n funcie de
mrimea te#tului din cadru.
(a ce folosesc atributele margin!eig!t 7i margin;idt! ale etichetei L<+7EM9
a3 )imensioneaz marginile cadrului.
a3 )imensioneaz c!enarul cadrului.
b3 (tabilesc distana dintre marginile cadrului i coninutul su.
Cnde se introduce eticheta LI<+7EM9
a3 =n blocul L'$)KM
a3 =n blocul L<+7E(E6M
b3 =n blocul L<+7EM
(a ce serve7te atributul bordercolor asociat etichetei L<+7E(E6M9
a3 (tabilete culoarea c!enarului unui cadru.
a3 (tabilete culoarea c!enarelor tuturor cadrelor definite n L<+7E(E6M.
b3 (tabilete culoarea de fond a cadrelor definite n L<+7E(E6M.
Care dintre urmtoarele construcii este corect9
a3 L<+7E nameS%numeVcadru%M
a3 L<+7E(E6 nameS%numeVcadru%M
b3 L<+7E(E6 !refS%numeVcadru%M
Cum se reali8ea8 deschiderea documentului dintr!un cadru 6ntr!o fereastra nou9
a3 L<+7E srcS%frameC.!tml% targetS%Vself%M
a3 L<+7E srcS%frameC.!tml% targetS%VblanI%M
b3 L<+7E srcS%frameC.!tml% targetS%Vparent%M
Cadre
1. c3
/. b3
1. c3
3. b3
4. c3
7. c3
9. a3
;. b3
9. a3
1D. b3
Capitolul 11
2ormulare
&u siguran ai vzut cum arat un formular ntr"o pagin *eb. )e e#emplu, atunci cnd
completai o carte de oaspei /guestbook3 avei de"a face cu un formular. tunci cnd selectai mai
multe opiuni dintr"o list sau introducei un cuvnt ntr"un motor de cutare, folosii, de asemenea, un
formular.
<ormularul reprezint unul dintre cele puternice elemente ale unei pagini *eb. ,rin intermediul
formularelor se realizeaz interactivitatea cu vizitatorul paginii, acestea permindu"v s obinei
informaii despre cei care viziteaz paginile dumneavoastr.
1. Ce este un 'ormu!ar?
-n formular este un ansamblu de zone active alctuit din mai multe tipuri de elemente: butoane,
casete de selecie, cmpuri de editare, etc., ce permit utilizatorilor s introduc efectiv informaii.
ceste informaii sunt ulterior transmise serverului pe care este gzduit pagina dumneavoastr, unde
vor putea fi prelucrate.
$ sesiune cu o pagina *eb ce conine un formular cuprinde dou etape:
-tilizatorul completeaz formularul i, prin apsarea butonului de e#pediere, trimite serverului
datele nscrise n formular.
$ aplicaie dedicat de pe server /un script3 analizeaz informaiile transmise i, n funcie de
configuraia scriptului, fie stoc!eaz datele ntr"o baz de date, fie le transmite la o adres de mail
indicat de dumneavoastr. )ac este necesar, serverul poate e#pedia i un mesaj de rspuns
utilizatorului.
&el mai important lucru pe care trebuie s"l nelegei n legtur cu formularele este c aici apar
dou probleme distincte i care necesit instrumente diferite pentru a le gestiona.
,rima dintre ele este plasarea formularului n pagin i asigurarea bunei lui funcionri. cest
lucru se realizeaz prin 5678 i de el ne ocupm n acest capitol.
&ea de"a doua este gestionarea i prelucrarea informaiilor pe care vizitatorul le introduce prin
intermediul formularului. ceast problem este rezolvat cu ajutorul scripturilor &9I stocate pe
server, subiect despre care vom vorbi n capitolul urmtor.
(tructura formularele poate varia, de la o simpl caset de te#t pentru introducerea unui ir de
caractere, pn la un ansamblu comple#, cu multiple seciuni i care ofer faciliti puternice de
transmitere?prelucrare a datelor.
2. Crearea unui 'ormu!ar
-n formular este definit ntr"un bloc delimitat de etic!etele
?2H-"C ?/2H-"C. Etic!eta L?<$+7M, de nc!idere, este obligatorie.
=n interiorul blocului sunt incluse:
elementele formularului, n care vizitatorul urmeaz s introduc informaii
un buton de e#pediere /submit3, la apsarea cruia, datele sunt transmise ctre server
opional, un buton de anulare /reset, cancel3, prin care utilizatorul poate anula datele nscrise n
formular
6ot ceea ce este inclus ntre etic!eta de desc!idere i cea de nc!idere face parte din formular.
Etic!eta L<$+7M are dou atribute eseniale:
action j comunic bro;serului unde s trimit datele introduse n formular. =n general valoarea
atributului action este adresa -+8 a scriptului aflat pe serverul care primete datele formularului. )e
e#emplu:
L<$+7 actionS%!ttp:??;;;.Ea!oo.com?cgi"bin?numeVfis.cgi%M.
method " precizeaz metoda utilizat de bro;ser pentru e#pedierea datelor formularului.
tributul met!od poate avea dou valori:
post " folosit n cele mai multe cazuri. Indic serverului s furnizeze datele direct scriptului ca
date de intrare standard.
get /valoarea implicit3 " datele din formular sunt adugate la adresa -+8 precizat de atributul
action, ntre adresa -+8 i date fiind inserat un %4%. )atele sunt adugate conform sinta#ei:
numeVcampSvaloareVcamp.
=ntre diferite seturi de date este introdus un %\%. )e e#emplu:
%!ttp:??;;;.Ea!oo.com?cgi"bin?numeVfis.cgi4
numeCSvaloareC\numeFSvaloareF%
&ea mai facil cale prin care informaiile introduse ntr"un formular pot parveni creatorului
paginii este folosirea comenzii mailto: m mai ntlnit aceast comand la capitolul #e6,turi n
conte#tul urmtor:
L !refS%mailto:autorhdomeniu.com%M
)e data aceasta nu mai este vorba de crearea unei legturi care s lanseze n e#ecuie aplicaia de
mail a utilizatorului, ci de transmiterea datelor introduse n formular la o adres de mail specificat de
dumneavoastr.
cest lucru se poate realiza preciznd ca valoare a atributului action urmtoarea secven:
%mailto:adresaVmail%, ca n e#emplul urmtor:
L<$+7 actionSmailto:autorhdomeniu.com met!odS%post%M
a cum spuneam, atributul action comunic bro;serului unde s trimit datele introduse n
formular. <olosind comanda mailto: bro;serului i se indic s trimit datele la adresa de mail
specificat n comand.
)in pcate, aceast comand nu este e#ecutat n acest mod dect de bro;serele >etscape.
'ro;serele Internet E#plorer nu recunosc comanda mailto: prezent n cadrul formularelor. cestea o
e#ecut la fel cum este ea e#ecutat atunci cnd face parte din etic!eta LM ca valoare a atributului !ref
adic lanseaz aplicaia de mail a utilizatorului.
)in acest motiv, inclusiv pentru trimiterea datelor la o adres specificat de mail, se folosesc
scripturi &9I. ,entru a nu intra nc n amnunte privind scripturile, vom folosi totui n e#emplele
urmtoare comanda mailto:
+einei totui c afiarea corect a unui formular n pagin nu este dect prima etap a utilizrii
formularului. ,entru a face o testare complet trebuie s avei un script instalat pe server care s
prelucreze datele din formular i s le transmit la adresa de mail specificat.
,entru a defini elementele care fac parte din formular se utilizeaz etic!etele ?AG&+!C,
?'0#0C!C, ?H&!AHGC i ?!0I!8-08C.
3. #tic/eta ?AG&+!C
,rin intermediul etic!etei ?AG&+!C se pot introduce n formular cmpuri de editare /casete de
te#t3, cmpuri de tip passord, butoane de e#pediere i anulare, butoane radio i casete de validare.
Etic!eta LI>,-6M are urmtoarele atribute:
tLpe " prin care se precizeaz tipul elementului.
name " permite ataarea unui nume fiecrui element al formularului.
value " permite atribuirea unei valori iniiale unui element al formularului.
,erec!ea de atribute name/value /nume?valoare3 este deosebit de important pentru buna
funcionare a formularului.
<iecare element introdus prin etic!eta LI>,-6M reprezint o variabil. Informaia introdus de
utilizator n cmpul elementului respectiv reprezint valoarea pe care o primete aceast variabil. )in
acest motiv, toate elementele introduse prin etic!eta LI>,-6M trebuie s aib atribuit un nume. cest
lucru este obligatoriu deoarece, n caz contrar, variabila reprezentat de acel element nu va avea un
identificator.
=n plus, este indicat s atribuii nume distincte diferitelor elemente care fac parte din formular.
ltminteri, scriptul &9I care prelucreaz datele nu va ti s fac distincia ntre variabile avnd acelai
nume i valori diferite.
tributul tEpe poate avea urmtoarele valori:
te#t " se folosete pentru a introduce un cmp de editare pe o singur linie
pass;ord j se folosete pentru a insera un cmp de editare n care caracterele introduse sunt
nlocuite cu asteriscuri /k3
radio j folosit pentru a insera un ir de butoane radio /elemente care se folosesc pentru a selecta
dintr"o list de opiuni una i numai una dintre ele3
c!ecIbo# j folosit pentru a introduce un ir de casete de validare /elemente care se folosesc cnd
dintr"o list de opiuni se poate alege mai mult de o singur variant3
submit j se folosete pentru a introduce un buton de e#pediere
reset j se folosete pentru a introduce un buton de anulare a informaiilor introduse n formular
button " se folosete pentru a introduce n formular un buton obinuit
!idden " se folosete pentru a introduce n formular un cmp ascuns
<iecare dintre valorile atributului tEpe genereaz un anumit tip de element n cadrul formularului.
E#emplul CC.C creeaz un formular foarte simplu care conine un cmp de editare i un buton de
e#pediere. spectul formularului este redat n <igura CC.C.
0(emplul 11. 1
L5678M
L5E)M
L6I68EMformulareCL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%M &aseta de te#t si buton de e#pediereL?5CML5+M
L<$+7 actionS%mailto:adresahEEE.com% met!odS%post%M
Introduceti adresa dvs. de mail:
LI>,-6 tEpeS%te#t% nameS%adresa% valueS%adresa mail%ML'+M
LI>,-6 tEpeS%submit% valueS%e#pediaza%M
L?<$+7M
L?'$)KM
L?5678M
)up cum observai, numele atribuit cmpului de editare este %adresa% iar atributul value a primit
ca valoare irul de caractere %adresa mail%. cest te#t va fi afiat n interiorul cmpului de editare,
nainte ca utilizatorul s nceap introducerea informaiilor. )ac atributul value nu era prezent sau era
iniializat cu stringul vid / %% 3, caseta de te#t ar fi fost goal.
=n cadrul formularului este prezent i un buton de e#pediere, inserat de asemenea prin intermediul
etic!etei LI>,-6M avnd atributul tEpe setat cu valoarea %submit%. a cum se observ din figur, pe
buton este afiat te#tul %e#pediaza%, deoarece pentru acest element, atributului value i"a fost atribuit ca
valoare te#tul respectiv.
Casete de text
=n E#emplul CC.F am creat un formular care conine trei casete de te#t /cmpuri de editare3 n care
utilizatorul este rugat s introduc numele, prenumele i adresa de mail, precum i o caset de tip
passord, care cere introducerea unei parole. a cum vei observa din <igura CC.F, o caset de tip
passord este asemntoare cu un cmp de editare, singura diferen fiind aceea c aici caracterele nu
sunt afiate n clar ci sunt nlocuite cu asteriscuri.
=n plus, formularul conine un buton de e#pediere i unul de anulare a datelor introduse.
0(emplul 11. /
L5678M
L5E)M
L6I68EMformulareFL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%M&asete de te#tL?5CML5+M
L<$+7 actionS%mailto:adresahEEE.com% met!odS%post%M
Introduceti numele:
LI>,-6 tEpeS%te#t% nameS%nume% valueS%%ML'+M
Introduceti prenumele:
LI>,-6 tEpeS%te#t% nameS%prenume% valueS%%ML'+M
Introduceti adresa de mail:
LI>,-6 tEpeS%te#t% nameS%mail% valueS%%ML'+M
Introduceti parola:
LI>,-6 tEpeS%pass;ord% nameS%parola%ML'+M
LI>,-6 tEpeS%reset% valueS%sterge%M
LI>,-6 tEpeS%submit% valueS%e#pediaza%M
L?<$+7M
L?'$)KM
L?5678M
,entru elementele de tip caset de te#t i passord sunt utile i atributele:
ma(len6th j care stabilete numrul ma#im de caractere care poate fi introdus n cmpul de
editare
si.e j care stabilete limea acestui cmp
$utoane radio
=n E#emplul CC.H am creat un formular care conine un ir de butoane radio, prin care se cere
prerea vizitatorului despre o pagin *eb. )up cum observai, fiecare element de tip buton radio are
acelai nume i anume %opinie% deoarece nu se poate selecta dect un singur element, astfel nct orice
ambiguitate este e#clus.
<iecare buton radio trebuie s aib o valoare. )in acest motiv pentru fiecare buton atributul value
a fost setat la o alt valoare. legerea uneia dintre opiuni, de e#emplu %buna%, face ca variabila
%opinie% s primeasc valoarea %buna%. ,rin urmare, serverului i va fi transmis perec!ea
%opinieSbuna%.
=n plus, observai prezena atributului checEed, care are rolul de a prestabili o anumit opiune, pe
care ns utilizatorul o poate sc!imba, dac dorete. spectul formularului este cel din <igura CC.H.
0(emplul 11. 1
L5678M
L5E)M
L6I68EMformulareHL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%M'utoane radioL?5CML5+M
L<$+7 actionS%mailto:adresahEEE.com% met!odS%post%M
&e parere aveti despre aceasta pagina4L'+M
LI>,-6 tEpeS%radio% nameS%opinie% valueS%foarte buna% c!ecIedM<oarte bunaL'+M
LI>,-6 tEpeS%radio% nameS%opinie% valueS%buna%M'unaL'+M
LI>,-6 tEpeS%radio% nameS%opinie% valueS%destul de buna%M)estul de bunaL'+M
LI>,-6 tEpeS%radio% nameS%opinie% valueS%proasta%M,roastaL'+M
LI>,-6 tEpeS%reset% valueS%anuleaza%M
LI>,-6 tEpeS%submit% valueS%e#pediaza%M
L?<$+7M
L?'$)KM
L?5678M
Casete de "a!idare
E#emplul CC.J creeaz un ir de casete de validare, care se deosebesc de butoanele radio prin
faptul c se pot selecta mai multe opiuni dintre cele prezentate. <igura CC.J red aspectul formularului
construit n acest e#emplu.
0(emplul 11. 3
L5678M
L5E)M
L6I68EMformulareJL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%M&asete de validareL?5CML5+M
L<$+7 actionS%mailto:adresahEEE.com% met!odS%post%M
&are sunt !obbE"urile dumneavoastra4L'+M
LI>,-6 tEpeS%c!ecIbo#% nameS%!obbE% valueS%sport%M(portL'+M
LI>,-6 tEpeS%c!ecIbo#% nameS%!obbE% valueS%film%M<ilmL'+M
LI>,-6 tEpeS%c!ecIbo#% nameS%!obbE% valueS%lectura%M8ecturaL'+M
LI>,-6 tEpeS%c!ecIbo#% nameS%!obbE% valueS%jocuri%M:ocuri pe computerL'+M
LI>,-6 tEpeS%c!ecIbo#% nameS%!obbE% valueS%internet%M(urfing pe netL'+M
LI>,-6 tEpeS%c!ecIbo#% nameS%!obbE% valueS%alpinism%MlpinismL'+M
LI>,-6 tEpeS%submit% nameS%submit% valueS%e#pediaza%M
L?<$+7M
L?'$)KM
L?5678M
$ caset de validare are dou stri: marcat sau nemarcat /on sau off3. &a i la butoanele radio,
atributul name are n e#emplul considerat o singur valoare, %!obbE%, iar atributul value are, pentru
fiecare caset, valori distincte. (erverului i sunt transmise numai acele valori care au fost marcate n
casetele de validare corespunztoare.
.i n cazul casetelor de validare este posibil prezena atributului checEed care preselecteaz o
anumit opiune sau mai multe.
$utoane
=n cadrul unui formular se pot introduce i butoane obinuite /altele dect butoanele +ubmit i
Reset3. +olul acestora este de a iniia anumite aciuni n momentul cnd utilizatorul face clicI cu
mouse"ul pe ele. 8imbajul 5678 nu ofer instrumentele necesare pentru a specifica ce anume se
ntmpl cnd butonul este apsat. ,entru aceasta este necesar s includei n documentul 5678
scripturi :ava(cript care s trateze aceste evenimente.
&a i butoanele +ubmit i Reset, butoanele obinuite sunt incluse n formular cu ajutorul etic!etei
LI>,-6M avnd atributul tEpe setat la valoarea button:
LI>,-6 tEpeS%button% nameS%buton% valueS%te#t%M.
6e#tul specificat ca valoare a atributului value va fi afiat pe buton.
'utoanele pot fi folosite pentru a valida informaiile introduse n formular, pentru a desc!ide
documente i a iniia diverse alte aciuni din partea bro;serului.
C7mpuri ascunse 8/idden 'ie!ds9
&mpurile ascunse sunt elemente care fac parte dintr"un formular dar nu sunt vizibile n cadrul
paginii. ,rin intermediul acestora se pot include n formular informaii care nu pot fi alterate de
bro;ser sau de utilizator. Introducerea unui astfel de cmp n formular se face prin etic!eta
LI>,-6 tEpeS%!idden%M.
&a i n cazul celorlalte elemente ale formularului este necesar prezena atributelor name i
value, ca n e#emplul urmtor:
LI>,-6 tEpeS%!idden% nameS%ascuns% valueS%modifica%M
&mpurile ascunse pot servi la o gestionare mai bun a datelor transmise la server. )e e#emplu,
s presupunem c avem un formular care cere utilizatorului cteva informaii iniiale: numele i adresa.
,e baza acestora, aplicaia de pe server iniiaz afiarea unui nou formular care solicit introducerea
unor informaii mai detaliate.
)eoarece este plictisitor pentru vizitator s reia introducerea informaiilor iniiale, scriptul poate fi
configurat s depun primele informaii n cmpurile ascunse ale celui de"al doilea formular. =n aceast
situaie este util folosirea cmpurilor ascunse deoarece serverul proceseaz un singur formular la un
moment dat i nu are cum s tie c cel de"al doilea formular a fost completat de aceeai persoan.
4. #tic/ete!e ?'0#0C!C i ?H&!AHGC
&u ajutorul etic!etei ?'0#0C!C ?/'0#0C!C se poate introduce ntr"un formular un meniu
derulant. &rearea unui meniu pentru vizitatorii paginii i ajut la selectarea unor opiuni dintr"o list
predefinit.
<iecare opiune care face parte din blocul L(E8E&6M se introduce prin etic!eta ?H&!AHGC.
=n E#emplul CC.G este construit un meniu derulant, din care vizitatorul poate selecta opiunea
dorit. tributul name are acelai rol ca i n etic!eta LI>,-6M. )ac vizitatorul selecteaz din meniu
zodia 6aur, de e#emplu, la apsarea butonului de e#pediere, serverului i este transmis perec!ea:
%zodiaStaur%. tributul si.e este setat la valoarea %C%. (etarea atributului size la valoarea %C% creeaz o
un meniu derulant cu o singur opiune vizibil iniial aa cum se poate observa din <igura CC.G.
0(emplul 11. 4
L5678M
L5E)M
L6I68EMformulareGL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%M7eniu derulantL?5CML5+M
L<$+7 actionS%mailto:adresahEEE.com% met!odS%post%M
&are este zodia dumneavoastra4L'+M
L(E8E&6 nameS%zodia% sizeS%C%M
L$,6I$>M'erbec
L$,6I$>M6aur
L$,6I$>M9emeni
L$,6I$>M+ac
L$,6I$>M8eu
L$,6I$>M<ecioara
L$,6I$>M'alanta
L$,6I$>M(corpion
L$,6I$>M(agetator
L$,6I$>M&apricorn
L$,6I$>MUarsator
L$,6I$>M,esti
L?(E8E&6M
LI>,-6 tEpeS%submit% valueS%e#pediaza%M
L?<$+7M
L?'$)KM
L?5678M
)ac atributul size este setat la o valoare mai mare dect C meniul va afia un numr de opiuni
egal cu aceast valoare i va conine o bar de derulare pentru a face accesibile i celelalte opiuni. =n
<igura CC.A poate fi vzut un meniu la care valoarea atributului size este A.
). #tic/eta ?!0I!8-08C
&u ajutorul etic!etei ?!0I!8-08C ?/!0I!8-08C putei insera n pagin o caset de te#t
multi"linie care permite vizitatorului s introduc un te#t mai lung, care se poate ntinde pe mai multe
linii. ceast etic!et se folosete atunci cnd dorim s cerem vizitatorului o opinie despre un anumit
subiect, care necesit introducerea unui te#t mai lung dect o singur linie /acest element se mai
numete i caset de comentarii3. L6EW6+EM este o etic!et container, deci necesit etic!eta de
nc!idere L?6EW6+EM.
tributele rows i cols stabilesc numrul de linii, respectiv de coloane rezervate pentru
introducerea te#tului.
E#emplul CC.A introduce n pagin o caset pentru comentarii, aspectul acesteia fiind redat n
<igura CC.1.
0(emplul 11. 7
L5678M
L5E)M
L6I68EMformulareAL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%M&aseta de comentariiL?5CML5+M
L<$+7 actionS%mailto:adresahEEE.com% met!odS%post%M
&are este opinia dumneavoastra despre acest film4L'+M
L6EW6+E nameS%comentariu% ro;sS%CB% colsS%JB%ML?6EW6+EML'+M
LI>,-6 tEpeS%submit% valueS%e#pediaza%M
L?<$+7M
L?'$)KM
L?5678M
6oate elementele prezentate pot fi reunite ntr"un singur formular sau putei crea formulare
diferite, n funcie de informaiile pe care dorii s le obinei de la vizitatorii paginii.
)ac dorii s introducei n pagin mai multe formulare, sau elemente de tipuri diferite n cadrul
aceluiai formular, trebuie s avei n vedere aspectele care in de alinierea acestora. $ posibilitate de a
alinia elementele coninute ntr"un formular este folosirea tabelelor.
E#emplul CC.1 conine elemente de mai multe tipuri ncadrate ntr"un formular unic. ,entru
alinierea unora dintre ele am folosit un tabel. spectul paginii descrise n acest document este cel din
<igura CC.0.
0(emplul 11. 9
L5678M
L5E)M
L6I68EMformulare1L?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%Mlinierea elementelorL?5CML5+M
L<$+7 actionS%mailto:adresahEEE.com% met!odS%post%M
L5HM&omandati ,izzaL?5HML,M
L,M&ate pizza doriti4
LI>,-6 nameS%nrpizza% valueS%B% sizeSH ma#lengt!SHML,M
LI>,-6 tEpeS%radio% nameS%marime% valueS%mare% c!ecIedM7areL'+M
LI>,-6 tEpeS%radio% nameS%marime% valueS%medie%M7edieL'+M
LI>,-6 tEpeS%radio% nameS%marime% valueS%normala%M>ormala
L,M6opping"uriL,M
LI>,-6 tEpeS%c!ecIbo#% nameS%topping% valueS%salam%M(alamL'+M
LI>,-6 tEpeS%c!ecIbo#% nameS%topping% valueS%carnati%M&arnatiL'+M
LI>,-6 tEpeS%c!ecIbo#% nameS%topping% valueS%sunca%M(uncaL'+M
LI>,-6 tEpeS%c!ecIbo#% nameS%topping% valueS%ciuperci%M&iuperciL'+M
LI>,-6 tEpeS%c!ecIbo#% nameS%topping% valueS%ceapa%M&eapaL'+M
LI>,-6 tEpeS%c!ecIbo#% nameS%topping% valueS%masline%M7asline
L,M
L6'8E ;idt!S%AB2%M
L6+M
L6) ;idt!S%FB2%M>umele
L6)MLI>,-6 tEpeS%te#t% nameS%nume%M
L6+M
L6) ;idt!S%FB2%M6elefonul
L6)MLI>,-6 tEpeS%te#t% nameS%telefon%M
L6+M
L6) ;idt!S%FB2%Mdresa
L6)ML6EW6+E nameS%adresa% ro;sSA colsSGBML?6EW6+EM
L6+M
L6) ;idt!S%FB2%M>umrul cartii de credit
L6)MLI>,-6 tEpeS%pass;ord% nameS%creditcard% sizeSFBM
L?6'8EM
L,M
L&E>6E+M
LI>,-6 tEpeS%submit% valueS%6rimite comanda%M
L?&E>6E+M
L?<$+7M
L?'$)KM
L?5678M
+. Ca!idarea date!or
-nul dintre aspectele importante pe care trebuie s le avei n vedere atunci cnd folosii
formulare n paginile dumneavoastr este validarea datelor introduse de vizitatorii lor. 8imbajul 5678
ofer relativ puine instrumente pentru ndeplinirea acestei sarcini. 6otui, avei la dispoziie cteva
posibiliti.
<olosii atributul ma#lengt! atunci cnd introducei un cmp de editare, pentru a mpiedica
vizitatorul s introduc un numr eronat de caractere. )e e#emplu, dac cerei introducerea ntr"o
caset de te#t a codului numeric personal, acea caset nu trebuie s permit introducerea a mai mult de
CH caractere, un cmp de editare care cere introducerea codului potal nu trebuie s permit
introducerea a mai mult de J caractere, etc.
,entru a v asigura c vizitatorul introduce date corecte ntr"un cmp de editare /de e#emplu o
adres de mail valid trebuie s conin obligatoriu caracterul %h%3 nu e#ist instrumente 5678.
,entru a realiza astfel de sarcini sunt necesare scripturi :ava(cript. =n capitolul Java'cript vei gsi
scripuri utile care fac posibile validrile datelor, nc din momentul introducerii lor.
<olosii de cte ori este posibil butoanele radio, casetele de validare i meniurile, pentru a
simplifica procesul de introducere a datelor. <ii ct mai e#plicit, asigurai indicaiile necesare pentru
completarea formularelor, preciznd, unde este cazul, dac pot fi selectate mai multe opiuni sau numai
una singur.
8ten)ieM
sigurai"v c scriptul care prelucreaz informaiile din formular are faciliti de
gestionare a erorilor.
)ac este semnalat o eroare, furnizai vizitatorului un mesaj de eroare e#plicit i,
eventual, cteva corecii posibile.
-na dintre cele mai frustrante situaii este ca dup completarea unui formular comple#, la apariia
unei erori, vizitatorul s fie nevoit s reia completarea integral a formularului. Evitai acest lucru
utiliznd scripturi care returneaz utilizatorului formularul completat, avnd cmpurile greite marcate
pentru corectare.
>u uitai un amnunt foarte important: informaiile introduse de vizitatori n formulare v sunt
necesare dumneavoastr, pentru a mbunti eficiena i calitatea site"ului sau c!iar pentru a derula
afaceri prin intermediul su. )e aceea corectitudinea acestor date este esenial.
<acei n aa fel nct vizitatorii site"ului dumneavoastr s completeze uor i cu plcere
formularele prezente n pagini.
,. -e.umat
<ormularele servesc la stabilirea unei legturi interactive cu vizitatorii unei pagini *eb i la
obinerea de informaii de la acetia.
-n formular se introduce n pagin cu ajutorul etic!etei L<$+7M L?<$+7M.
=n cadrul acestei etic!ete pot fi incluse diverse elemente care fac parte din formular:
prin etic!eta LI>,-6M pot fi introduse cmpuri de editare, cmpuri de tip passord, butoane
radio, casete de selecie, butoane de e#pediere, butoane de anulare i butoane obinuite
prin etic!eta L(E8E&6M pot fi introduse meniuri derulante, fiecare element al meniului fiind
introdus prin etic!eta L$,6I$>M
prin etic!eta L6EW6+EM pot fi introduse cmpuri de editare multilinie.
,entru a specifica unde vor fi trimise datele introduse n formular se folosete atributul action al
etic!etei L<$+7M. ,entru a stabili modul n care aceste date sunt transmise se folosete atributul
met!od al etic!etei L<$+7M.
<ormularele reprezint partea vizibil a procesului de interaciune cu vizitatorul paginii *eb.
$dat ce datele au fost introduse n cmpurile formularului, ele trebuie transmise, prelucrate i stocate,
n funcie de nevoile creatorului paginii. cest lucru se realizeaz cu ajutorul scripturilor &9I instalate
pe server, despre care vom vorbi n capitolul urmtor.
3. Test
1. Ce atribut indic broserului unde s trimit informaiile din formular9
a3 input
a3 action
b3 met!od
2. Care dintre aceste valori nu aparine atributului met!od4
a3 9et
a3 5ref
b3 ,ost
3. Care dintre urmtoarele afirmaii este fals9
a3 ,rin etic!eta LI>,-6M se pot introduce n formular cmpuri de editare de tip passord.
a3 ,rin etic!eta LI>,-6M se pot introduce n formular butoane radio.
b3 ,rin etic!eta LI>,-6M se pot introduce n formular meniuri derulante.
4. &entru a introduce 6n formular un buton de expediere se folose7te construcia4
a3 LI>,-6 tEpeS%reset%M
a3 LI>,-6 tEpeS%submit%M
b3 LI>,-6 tEpeS%for;ard%M
). .ie urmtoarea construcie4
L<$+7 actionS%mailto:adresahEEE.com% met!odS%post%M
LI>,-6 tEpeS%radio% nameS%limba% valueS%romana%M8imba romana
LI>,-6 tEpeS%radio% nameS%limba% valueS%germana%M8imba germana
LI>,-6 tEpeS%radio% nameS%limba% valueS%mag!iara%M8imba mag!iara
L?<$+7M
Dac este bifat opiunea (imba romana, care este perechea nume2valoare care va fi transmis
serverului9
a3 %limbaS8imba romana%
a3 %limbaSromana%
b3 %radioSromana%
+. Care este diferena dintre un cHmp de editare de tip text 7i unul de tip passord9
a3 =ntr"un cmp de tip te#t se pot introduce mai multe linii, ntr"unul de tip passord o
singur linie.
a3 =ntr"un cmp de tip te#t caracterele introduse sunt afiate, ntr"unul de tip passord sunt
nlocuite cu asteriscuri.
b3 &mpul de editare se introduce cu ajutorul etic!etei LI>,-6M, cmpul de tip passord
se introduce cu ajutorul etic!etei L(E8E&6M.
,. &entru a insera 6ntr!un formular o caset de validare se folose7te eticheta LI>,-6M cu
atributul tEpe setat la valoarea4
a3 %radio%
a3 %c!ecIbo#%
b3 %option%
3. Ce reali8ea8 eticheta L(E8E&6M9
a3 Introduce un buton de anulare.
a3 Introduce un meniu derulant.
b3 Introduce o list de casete de validare.
4. (a ce serve7te eticheta L6EW6+EM9
a3 (tabilete zona din fereastra bro;serului care este rezervat pentru te#t.
a3 Introduce n formular un cmp de editare multi"linie.
b3 Introduce n formular un cmp de editare pe o singur linie.
1;. Care dintre urmtoarele afirmaii este fals9
a3 )atele introduse n formular sunt trimise la server, dac este folosit un script &9I.
a3 )atele introduse n formular sunt trimise la o adres de mail specificat, dac este
folosit comanda mailto:
b3 )atele introduse n formular sunt stocate pe !ard"disI"ul vizitatorului paginii.
2ormulare
1. b3
/. b3
1. c3
3. b3
4. b3
7. b3
9. b3
;. b3
9. b3
1D. c3
Capitolul 1/
'cripturi CFA
,rogramare &9I, scripturi &9I sunt cuvinte care strnesc, cel mai adesea, teama. 7ultora dintre
cei care doresc s creeze pagini *eb i nu sunt programatori profesioniti aceast zon le apare
misterioas i dificil de neles. =n acest capitol vom nva c!estiunile fundamentale i principiile care
guverneaz realizarea acestor scripturi precum i modul lor de utilizare. Uei constata c, dei realizarea
unui script este destul de laborioas i necesit cunoaterea aprofundat a cel puin unui limbaj de
programare /&YY sau ,erl3, nu v va fi deloc greu s nelegei modul cum sunt ele concepute.
Uestea bun este aceea c, dei stpnirea unui limbaj de programare este binevenit, nu este
absolut necesar pentru a putea utiliza scripturi &9I n paginile dumneavoastr. >u este nevoie s
creai propriile dumneavoastr scripturi. ,e *eb e#ist mii de scripturi gratuite care pot fi descrcate i
utilizate conform propriilor necesiti. 6ot ceea ce avei de fcut este s nelegei principiile dup care
sunt realizate, modul lor de funcionare i maniera n care trebuie s le setai pentru a le adapta nevoilor
dumneavoastr.
1. Ce este CA(?
( ncepem prin a preciza ce nu este CFA: nu este un limbaj de programare.
&9I, prescurtare de la Common ,atea$ 'nterface, este un protocol standard de comunicare
ntre documentele *eb i aplicaiile localizate pe serverul *eb.
'cripturile CFA sunt pro6rame care respect acest protocol /un protocol este un set de reguli3.
-n script &9I este, deci, un program care comunic ntr"un anumit mod cu pagina dumneavoastr.
E#istena acestui protocol de comunicare ntre programele de pe server i documentele *eb permite
crearea unor pagini interactive i dinamice, lucru care nu poate fi fcut folosind doar 5678.
tunci cnd bro;serul solicit un script &9I aflat pe server, serverul lanseaz n e#ecuie scriptul
i i transmite acestuia !eaderele 566, de cerere primite de la bro;ser. )up ce e#ecuia scriptului se
nc!eie, rezultatele sunt transmise serverului, care formateaz !eaderele de rspuns i le transmite
bro;serului pentru ca acesta s afieze rezultatele. $ alt posibilitate este ca scriptul s conin
instruciuni prin care !eaderele de rspuns sunt configurate c!iar de script i transmise de acesta direct
bro;serului.
Indiferent dac solicit un document *eb sau un script, bro;serul trebuie s cunoasc locaia
serverului *eb i numele fiierului solicitat. ceast informaie i este transmis bro;serului prin
intermediul atributului action al etic!etei L<$+7M care primete drept valoare adresa -+8 a scriptului
stocat pe server. )e obicei, scripturile &9I sunt stocate pe server ntr"un director special destinat lor,
care se numete c&i-<in.
2. Trans'eru! date!or
a cum am vzut n capitolul anterior, datele pe care dorim s le obinem de la vizitatorul paginii
sunt colectate prin intermediul formularelor. )atele astfel colectate sunt transmise de ctre bro;ser la
serverul pe care este instalat scriptul &9I prin intermediul !eaderelor 566, de cerere.
&ele mai importante !eadere 566, de cerere sunt Fet i &ost. ,rin intermediul atributului
met!od al etic!etei L<$+7M este specificat ce tip de !eader 566, de cerere este utilizat pentru a
transfera datele la server. )ac metoda folosit este 9et, datele sunt transmise prin intermediul adresei
-+8. )ac folosii metoda ,ost datele sunt transmise sub forma unui fiier separat.
Este recomandat folosirea metodei ,ost atunci cnd volumul de date transmise este mare
/depete CBFJ de octei, lungimea ma#im a unui -+83. )up ce metoda de transmitere este stabilit,
bro;serul creeaz un !eader 566, de cerere prin care este identificat localizarea scriptului pe server
i apoi transmite !eaderul la server. (erverul recepioneaz !eaderul de cerere i apeleaz scriptul &9I.
$dat datele ajunse la server, scriptul este lansat n e#ecuie iar datele i sunt transmise acestuia
prin intermediul unui tip special de variabile numite variabile de mediu /dac folosii metoda 9et3 sau
prin intermediul fiierului standard de intrare /dac folosii metoda ,ost3.
(criptul &9I e#ecut sarcinile pentru care a fost conceput i obine anumite rezultate care
urmeaz a fi transmise bro;serului prin intermediul unor !eadere 566, de rspuns. )e obicei, scriptul
configureaz un singur !eader de rspuns, i anume &ontent"6Epe. cest !eader comunic bro;serului
tipul de date care i vor fi returnate: documente 5678, imagini sau alt tip de fiiere. (erverul adaug i
el !eadere 566, de rspuns suplimentare, apoi strnge toate rezultatele i !eaderele de rspuns ntr"un
pac!et care este transmis bro;serului. 'ro;serul l recepioneaz i afieaz informaiile primite n
modul descris de !eaderele de rspuns.
3. #xecuia scriptu!ui
&e face scriptul &9I dup ce este lansat n e#ecuie4 +spunsul este simplu: e#ecut sarcinile
pentru care a fost construit. (arcinile pe care le poate realiza un script sunt diverse i numeroase. Iat
cteva e#emple:
manipularea informaiilor introduse prin intermediul formularelor
manipularea !rilor de imagini
generarea contoarelor care monitorizeaz numrul de accesri ale paginii /hit counters3
construirea de motoare de cutare
administrarea licitaiilor on!line
crearea de aplicaii interactive cum ar fi forumurile sau camerele de c!at
crearea i manipularea bazelor de date
&um am mai spus, scrierea unui script care ndeplinete astfel de sarcini nu este simpl. ,entru a
putea concepe un script este necesar cunoaterea aprofundat a unui limbaj de programare. (unt
utilizate limbaje variate pentru realizarea scripturilor: ,erl, & sau &YY, Uisual 'asic, etc. )escrierea
acestor limbaje i a principiilor de programare depete cu mult obiectul acestei cri. )e altfel, aa
cum spuneam, pentru a construi o pagina *eb interactiv cu ajutorul scripturilor &9I, nu este necesar
s le creai c!iar dumneavoastr. ,e *eb e#ist foarte multe site"uri care pun la dispoziia vizitatorilor
mii de scripturi gratuite. )e obicei ele sunt nsoite de instruciuni de instalare i utilizare. ,utei alege
dintre acestea pe acelea care satisfac cerinele dumneavoastr. 6otui, pentru a face o alegere n
cunotin de cauz precum i pentru a putea s facei modificrile necesare instalrii i funcionrii
scriptului, avei nevoie s cunoatei cteva noiuni legate de structura unui script &9I.
4. Structura unui script
(tructura unui script &9I conine urmtoarele seciuni:
citirea datelor introduse prin intermediul formularului
prelucrarea datelor i efectuarea sarcinilor impuse de programator
afiarea rezultatelor.
Citirea date!or
-nul dintre elementele de baz cu care lucreaz un script l constituie variabilele de mediu.
Uariabilele de mediu sunt o categorie special de variabile, folosite de server n procesul de e#ecuie al
scriptului. ceste variabile conin informaii despre server, despre bro;ser i despre datele introduse de
utilizator. >umrul variabilelor de mediu este destul de mare, dar e#ist cteva care au o importan
special pentru script.
cestea sunt:
-0P+0'!_"0!H@
P+0-N_'!-AGF
CHG!0G!_#0GF!
Uariabila de mediu -0P+0'!_"0!H@ poate avea cele dou valori despre care am mai
amintit: 9et i ,ost. ,rin intermediul ei serverul informeaz scriptul asupra modului cum i sunt
transmise datele.
a cum am nvat n capitolul anterior, datele introduse de utilizator sunt transmise n perec!i
nume?valoare.
Uariabila de mediu P+0-N_'!-AGF este folosit pentru a reine datele de intrare n cazul
folosirii metodei 9et iar variabila CHG!0G!_#0GF! este folosit pentru a specifica lungimea
irului de caractere citit din fiierul de intrare, n cazul folosirii metodei ,ost.
!ransmiterea datelor prin metoda Fet
&nd serverul folosete metoda Fet datele introduse n formular sunt adugate la sfritul adresei
-+8 a scriptului.
,entru a face lucrurile mai clare, s luam un e#emplu. s presupunem c n pagina dumneavoastr
se afl un formular care conine dou cmpuri de editare numite %nume% i %prenume%. &u alte cuvinte
codul formularului dumneavoastr va arta astfel:
L<$+7 actionS%cgi"bin?script.cgi% met!odS%9et%M
LI>,-6 tEpeS%te#t% nameS%nume%MIntroduceti numele
LI>,-6 tEpeS%te#t% nameS%prenume%MIntroduceti prenumele
LI>,-6 tEpeS%submit%M
L?<$+7M
( mai presupunem c vizitatorul introduce n cmpul %nume% valoarea %,opescu% iar n cmpul
%prenume% valoarea %Ion% i c adresa -+8 a scriptului nostru este ;;;.!tml.com?cgi"
bin?scriptulmeu.cgi?
tunci serverului i este transmis urmtoarea adres -+8:
!ttp:??;;;.!tml.com?cgi"bin?scriptulmeu.cgi?4numeS,opescu\prenumeSIon
.irul de caractere de dup semnul de ntrebare este depus n variabila de mediu
[-E+KV(6+I>9.
!ransmiterea datelor prin metoda &ost
7etoda &ost este cea mai folosit n transmiterea datelor. tunci cnd datele sunt trimise prin
aceast metod, ele sunt furnizate scriptului prin intermediul 5i$ierului standard de intrare, '!@AG.
,entru a preciza scriptului lungimea irului de caractere /numrul de octei3 pe care l are de citit,
aceasta este reinut n variabila de mediu &$>6E>6V8E>965.
Indiferent de metoda folosit, dup citirea datelor scriptul trebuie s le decodifice, adic s
elimine din irul de caractere primit toate caracterele care nu au fost introduse de utilizator: %\%, %S% i
altele.
)up citirea i decodificarea datelor scriptul e#ecut instruciunile de procesare a lor i pregtete
rspunsul pentru server.
1'iarea re.u!tate!or
=n general, rspunsurile pe care scriptul le transmite serverului se mpart n dou categorii:
(arcina a fost ndeplinit cu succes
(arcina nu a fost ndeplinit, au aprut erori.
)ac e#ecuia scriptului este ncununat de succes iar sarcinile sale au fost ndeplinite, acesta
transmite serverului un rspuns n consecin. )ac, din diverse motive, au aprut erori la e#ecuia
scriptului iar acesta nu i"a dus sarcinile la bun sfrit, serverului i este prezentat un mesaj de eroare,
care trebuie s conin informaii despre natura erorii aprute.
)e e#emplu, s presupunem c n pagina dumneavoastr ai plasat un formular care solicit datele
personale ale vizitatorului, care sunt transmise unui script a crui sarcin este s trimit aceste date la o
adres specificat de mail /aceasta este una dintre cele mai comune utilizri ale scripturilor3. )up ce
vizitatorul a introdus datele iar scriptul i"a nc!eiat e#ecuia, este bine s afieze un mesaj pentru
vizitator prin care l informeaz c datele sale au fost e#pediate. ,e de alt parte, dac a survenit o
eroare la introducerea datelor, vizitatorului trebuie s"i fie oferit un mesaj prin care este informat despre
acest lucru i, n plus, despre posibilitatea de a remedia eroarea.
7esajele privind rezultatele e#ecuiei pot fi trimise de script serverului, care formateaz !eaderele
566, de rspuns, sau scriptul poate formata el nsui !eaderele i poate trimite rezultatele direct la
bro;ser.
E#ist trei tipuri fundamentale de !eadere de rspuns:
C. Content*!Lpe
C. #ocation
F. 'tatus
Content*tLpe
'ro;serul dumneavoastr primete !eadere de tipul &ontent"6Epe ori de cte ori primete de la
server un document 5678, o imagine sau orice alt tip de fiier. Indiferent de natura fiierului transmis
de la server la bro;ser, serverul va asocia fiierului acest !eader pentru a comunica bro;serului tipul
fiierului trimis.
6ipurile de fiiere care pot fi transmise bro;serului sunt asociate sub numele de tipuri "A"0
/Multipurpose 'nternet Mail 5xtensions3. &lasificarea se bazeaz pe coninutul fiierului trimis. Iat
cele apte tipuri 7I7E fundamentale:
6e#t
7ultipart
7essage
pplication
Image
udio
Uideo
<iecare dintre aceste tipuri are un numr de sub"tipuri. 5eaderul &ontent"6Epe specific att tipul
ct i subtipul 7I7E al fiierului trimis. Iat cteva e#emple:
" 6e#t?5678
" 6e#t?plain
" Image?gif
" Image?jpeg
#ocation
cest !eader conine adresa -+8 a documentului pe care scriptul dorete s"l trimit ca rspuns
ctre bro;ser. )e e#emplu, dac rspunsul pe care dorii s"l primeasc vizitatorul paginii dup
transmiterea datelor este un document 5678 care se numete multumesc)html atunci scriptul va
conine un !eader ca acesta:
8ocation: multumesc.!tml
urmat de o linie liber. =n acest mod bro;serul este redirecionat ctre -+8"ul documentului
respectiv. =n situaia cnd folosii !eaderul 8ocation pentru a afia rspunsul, scriptul nu va mai include
!eaderul de rspuns
&ontent"6Epe.
'tatus
5eaderul (tatus returneaz ctre bro;ser un cod format din trei cifre mpreun cu un te#t
e#plicativ. i vzut de foarte multe ori acest !eader n situaiile cnd cererea trimis de bro;ser nu a
fost ndeplinit, iar documentul solicitat nu a putut fi furnizat de ctre server. Iat cteva dintre cele mai
cunoscute coduri de status:
JBB j 'ad reTuest j apare n situaia cnd sinta#a !eaderului 566, de cerere a fost eronat
JBC j -naut!orized j apare cnd, pentru a obine documentul solicitat, sunt necesare anumite
privilegii de acces
JBH j <orbidden j apare cnd serverul refuz accesul la document
JBJ j <ile >ot <ound j apare n situaia cnd serverul nu poate gsi documentul solicitat
). #xemp!e de scripturi
8imbajul cel mai folosit pentru scrierea scripturilor este ,erl. &!iar dac nu cunoatei acest
limbaj, dac avei totui cunotine minime de programare, nu v va fi greu s nelegei structura
scripturilor prezentate n continuare.
)in pcate, spre deosebire de documentele 5678 care pot fi scrise ntr"un simplu editor de te#t
i apoi vizualizate cu ajutorul bro;serului, cu scripturile lucrurile nu mai stau aa.
,erl este un limbaj interpretat. ceasta nseamn c putei scrie codul surs ntr"un editor de te#t,
cum ar fi >otepad. )ar pentru ca scriptul s funcioneze, serverul trebuie s aib instalat un interpretor
de ,erl. 7ajoritatea serverelor *eb dein un astfel de interpretor. )ac dorii s instalai i
dumneavoastr un interpretor ,erl i s testai funcionarea scripturilor prezentate n e#emplele de mai
jos, ba mai mult, dac dorii s v transformai propriul calculator ntr"un server *eb pe care s putei
rula scripturi ,erl, precum i s v testai funcionarea ntregului site, vei afla cum putei realiza acest
lucru n ultima parte a acestui capitol.
,entru moment, iat cteva e#emple simple de scripturi ,erl din care v putei face o idee despre
structura unui script i sinta#a limbajului ,erl. &el mai simplu script este clasicul e#emplu %#ello,
orld J%prezentat n E#emplul CF.C. cest script ilustreaz modul n care se realizeaz configurarea
!eaderului de rspuns &ontent"6Epe i afiarea unui document 5678.
0(emplul 1/. 1
C RN?usr?bin?perl
F
H print %&ontent"6Epe: te#t?!tmlfnfn%]
J
G print %L5678Mfn%]
A print %L5E)Mfn%]
1 print %L6I68EM5ello *orld NL?6I68EMfn%]
0 print %L?5E)Mfn%]
D print %L'$)KMfn%]
CB print %L5CM5ello *orld NL?5CMfn%]
CC print %L,Mfn%]
CF print %L5HM5ave a nice daEL?5HMfn%]
CH print %L?'$)KMfn%]
CJ print %L?5678Mfn%]
8iniile scriptului nu sunt, n general, numerotate, numerotarea servind aici doar la referirea lor
mai uoar. cest e#emplu simplu realizeaz afiarea pe ecran a te#tului %5ello *orld N%, i a mesajului
%5ave a nice daE%. >u e#ist o etap de citire a datelor, deoarece nu e#ist date de intrare.
8inia C conine calea spre interpretorul ,erl aflat pe server. )ac sistemul sub care lucreaz
serverul este ->IW, semnul R trebuie ndeprtat. =n linia a H"a este configurat !eaderul 566, de
rspuns, &ontent"6Epe. a cum observai, documentul care va fi transmis bro;serului este de tip te#t,
i anume un document 5678.
(ecvena de caractere %fn% care se repet la finalul fiecrei linii se numete secven), escape.
+olul acesteia este s realizeze, la afiare, trecerea pe rndul urmtor. ,e linia n care este definit
!eaderul &ontent"6Epe este obligatorie prezena a dou secvene escape.
6oate instruciunile scriptului sunt instruciuni de afiare. ,rin intermediul lor, scriptul descrie
bro;serului pagina *eb pe care urmeaz s o afieze. (tructura paginii conine, dup cum vedei, toate
seciunile necesare: etic!eta de desc!idere a documentului: L5678M, antetul: L5E)M i corpul
documentului: L'$)KM.
)ac dorii s testai funcionarea scriptului, scriei"l n >otepad i salvai"l sub numele hello)pl
/e#tensia .pl indic un program scris n limbajul ,erl. (e mai poate folosi i e#tensia .b6i3. poi
instalai scriptul n directorul cgi!bin al serverului dumneavoastr.
)up e#ecutarea scriptului, pagina de rspuns arat ca n <igura CF.C
E#emplul urmtor realizeaz preluarea datelor introduse de vizitator prin intermediul unui
formular i afiarea lor pe ecran. <ormularul pentru introducerea datelor prezentat n E#emplul CF.F
conine doar casete de te#t, n care vor fi introduse numele, prenumele i adresa de mail. tributul
action al etic!etei L<$+7M trimite la scriptul script>)pl aflat n directorul cgi!bin al serverului.
spectul formularului este cel din <igura CF.F
0(emplul 1/. /
L5678M
L5E)M
L6I68EMcgiFL?6I68EM
L?5E)M
L'$)KM
L<$+7 met!odS%,$(6% actionS%cgi"bin?scriptF.pl%M
>umele:
LI>,-6 tEpeS%te#t% nameS%nume%ML'+M
,renumele:
LI>,-6 tEpeS%te#t% nameS%prenume%ML'+M
dresa de email:
LI>,-6 tEpeS%te#t% nameS%email%ML'+M
LI>,-6 tEpeS%submit% valueS%6rimite%M
L?<$+7M
L?'$)KM
L?5678M
$bservai c datele sunt transmise la scriptul script>)pl aflat n directorul
cgi!bin, prin intermediul metodei ,ost. E#emplul CF.H ilustreaz modul de construire al scriptului
script>)pl.
0(emplul 1/. 1
C RN?usr?bin?perl
F
H R ,lasarea datelor transmise prin metoda ,ost in variabile
J
G read/(6)I>, mbuffer, mE>Unl&$>6E>6V8E>965lo3]
A hpairsSsplit/?\?, mbuffer3]
1 foreac! mpair /hpairs3
0 n
D /mname, mvalue3Ssplit/?S?, mpair3]
CB mvalueSp tr?Y? ?]
CC mvalueSp s?2/Pa"f"<B"DQPa"f"<B"DQ3?pacI/%&%, !e#/mC33?eg]
CH m<$+7nmnameoSmvalue]
CJ o
CG Rafisarea rezultatului
CA
C1 print %&ontent"tEpe: te#t?!tmlfnfn%]
C0
CD print %L5678Mfn%]
FB print %L5E)Mfn%]
FC print %L6I68EM7ultumescNL?6I68EMfn%]
FF print %L?5E)Mfn%]
FH print %L'$)KMfn%]
FJ print %L5CM7ultumescNL?5CMfn%]
FG print %L'+Mfn%]
FA print %L5JM)atele introduse sunt:L?!JMfn%]
F1 print %L'+Mfn%]
F0 print %L5HMm<$+7nlnumelo m<$+7nlprenumeloL?5HMfn%]
FD print %L5HMm<$+7nlemailloL?5HMfn%]
HB print %L?'$)KMfn%]
HC print %L?5678Mfn%]
(e impun cteva e#plicaii. 7ai nti, observai pe liniile C, H i CG prezena caracterului R. cesta
este modul de a introduce comentarii ntr"un program ,erl. &omentariile sunt e#trem de utile, mai ales
la scripturi. -n script necomentat este foarte greu de utilizat. &a i n cazul comentariilor introduse n
documentele 5678, acestea sunt ignorate la e#ecuie.
,rima seciune a scriptului realizeaz citirea datelor. )eoarece acestea au fost transmise prin
metoda ,ost, observai c citirea se face din fiierul standard de citire, (6)I>. =ntre liniile G i CJ se
realizeaz citirea, decodificarea datelor i plasarea lor n variabilele corespunztoare. (ecvena dintre
liniile CA i HC reprezint partea de afiare a rezultatelor. &a i n e#emplul anterior, observai c linia n
care se face formatarea !eaderului de rspuns &ontent"6Epe necesit prezena a dou secvene escape
%fnfn%.
( presupunem c datele introduse n formular sunt:
nume " Ionescu
prenume " 7aria
adresa de mail " ionmarhEa!oo.com.
tunci pagina generat de script va arata ca n <igura CF.H

pelul scripturilor nu se face numai prin intermediul formularelor. (e poate realiza i prin
intermediul imaginilor sau al legturilor. ,rezentm n continuare o pagina *eb care apeleaz scriptul
ip)pl prin intermediul unei legturi. (criptul realizeaz afiarea adresei I, a computerului pe care este
instalat.

E#emplul CF.J prezint documentul 5678 n care este apelat scriptul. spectul paginii este cel
din <igura CF.J
0(emplul 1/. 3
L5678M
L5E)M
L6I68EMcgiJL?6I68EM
L?5E)M
L'$)KM
L<$>6 faceS%arial% sizeS%J%M
,entru a afla adresa dumneavoastra de I, apasati
L !refS%cgi"bin?ip.pl%M aiciL?M
L?<$>6M
L?'$)KM
L?5678M
(criptul ip)pl folosete variabila de mediu +E7$6EV))+ pentru a obine adresa I,. =n
E#emplul CF.G este prezentat scriptul ip)pl.
0(emplul 1/. 4
C RN?usr?bin?perl
F
H print %&ontent"6Epe: te#t?!tmlfnfn%]
J
G print %L5678Mfn%]
A print %L5E)Mfn%]
1 print %L6I68EMcgiHL?6I68EMfn%]
0 print %L?5E)Mfn%]
D print %L'$)KMfn%]
CB print %L,Mfn%]
CC print %L5HMdresa I, a computerului dvs. este: mE>Un+E7$6EV))+o
L?5HMfn%]
CF print %L?'$)KMfn%]
CH print %L?5678Mfn%]
8a apsarea linI"ului din documentul 5678 este apelat scriptul, care afieaz pagina de rspuns
din <igura CF.G
Evident, dac vei rula scriptul pe alt computer, adresa I, obinut va fi diferit. &nd scriptul este
apelat printr"un linI nu e#ist posibilitatea de a i se transmite date.
+. (nsta!area interpretoru!ui :er! i a ap!icaiei :=S
,entru a putea verifica funcionarea e#emplelor prezentate precum i a scripturilor pe care dorii
s le folosii n cadrul site"ului dumneavoastr nainte de etapa publicrii pe *eb trebuie s avei
instalat un interpretor ,erl. ,utei descrca i instala interpretorul ctive ,erl vizitnd adresa:
!ttp:??;;;.gossland.com?course?install.!tml
8a aceeai adres putei gsi i aplicaia 7icrosoft ,ersonal *eb (erver /,*(3 care este furnizat
de 7icrosoft n pac!etele *indo;s D0 i *indo;s FBBB. +ecomandm descrcarea aplicaiei de la
adresa menionat, care are avantajul c include o corecie a unui bug de instalare e#istent n versiunea
oficial 7icrosoft.
8ten)ieM
7icrosoft ,ersonal *eb (erver se poate instala pe computerul personal avnd rolul de aplicaie
server. $dat instalat, computerul dumneavoastr va funciona ntocmai ca un server *eb, astfel nct
v vei putea testa funcionarea scripturilor instalate precum i funcionarea ntregului site.
)in pcate, 7icrosoft nu furnizeaz o aplicaie server similar i n pac!etele *indo;s 7ilenium
i *indo;s W, iar aplicaia ,*( nu funcioneaz dect pe sistemele *indo;s D0 i FBBB.
8a adresa indicat vei gsi ndrumri precise i complete asupra tuturor pailor pe care i avei de
urmat pentru a instala att interpretorul ,erl ct i aplicaia ,ersonal *eb (erver. =n plus, site"ul
respectiv conine i un foarte bun curs de iniiere n limbajul ,erl n limba englez.
,. -e.umat
&9I este un protocol de comunicare face legtura dintre scripturile aflate pe serverul *eb i
documentele 5678. -n script &9I este o aplicaie care respect acest protocol.
,rintre cele mai folosite scripturi &9I sunt cele care servesc la procesarea informaiilor introduse
ntr"un formular.
6ransferul datelor de la formular la serverul pe care se afl scriptul se face printr"una dintre cele
dou metode: 9et sau ,ost.
)up ce datele au fost transmise la server, scriptul le citete i le decodific, le prelucreaz
conform instruciunilor sale i transmite un rspuns ctre bro;ser.
'ro;serul afieaz rezultatele trimise de script n conformitate cu !eaderele de rspuns incluse n
pac!etul de date transmis.
Capitolul 11
Java'cript
1. Ce este Ba"aScript?
:ava(cript este un limbaK de pro6ramare orientat pe obiecte, care v permite s oferii paginilor
dumneavoastr un caracter mai dinamic i interactiv. )ac ai parcurs prima parte a crii i avei
cunotine minime de programare, nu vei avea dificulti n nelegerea modului n care funcioneaz
acest limbaj.
8ten)ieM
:ava(cript nu este acelai lucru cu limbajul :ava. )e fapt, dei numele sunt asemntoare, sunt
dou limbaje foarte diferite. (pre deosebire de :ava, care este un limbaj orientat pe obiecte, comple#,
asemntor cu limbajul &YY, :ava(cript este mult mai simplu i mai uor de folosit. =n timp ce :ava
este un limbaj pentru programatori, :ava(cript este destinat neprofesionitilor care doresc s
mbunteasc aspectul i funcionalitatea paginilor de *eb.
:ava(cript a fost dezvoltat de >etscape &orporation pentru a fi utilizat n bro;serul >etscape
>avigator. -n script :ava(cript poate fi plasat direct n pagina *eb, fiind e#ecutat de bro;ser
mpreun cu documentul *eb care"l conine. 'ro;serul Internet E#plorer /versiunile mai noi dect IE
H.B3 e#ecut i el corect scripturile :ava(cript.
:ava(cript este un limbaj interpretat, ca i ,erl, dar n cazul su nu trebuie s v mai facei griji n
privina instalrii unui interpretor deoarece acesta este inclus n bro;ser. &odul surs poate fi inclus n
pagina *eb sau poate fi pus ntr"un fiier separat care este referit din pagin.
&a i n cazul scripturilor &9I, nici n acest caz nu este absolut necesar cunoaterea limbajului
:ava(cript pentru a putea insera i utiliza cu succes astfel de scripturi. E#ist un numr impresionant de
scripturi gata de utilizare, care se pot integra cu uurin n codul surs al documentelor dumneavoastr.
2. Cum poate 'i inc!us un script n pa&in*?
(cripturile :ava(cript pot fi incluse n pagina *eb n dou moduri:
prin intermediul etic!etei ?'C-A&!C ?/'C-A&!C
prin intermediul unei proceduri eveniment
Iat un e#emplu foarte simplu n care n document este inclus un script care afieaz n pagin
te#tul %'una ziuaN% prin intermediul etic!etei L(&+I,6M. spectul acestei pagini este cel din <igura
CH.C.
0(emplul 11. 1
L5678M
L5E)M
L6I68EMjavascriptCL?6I68EM
L?5E)M
L'$)KM
L5CM,rimul e#emplu :ava(criptL?5CML5+M
L(&+I,6 languageS%:ava(cript%M
document.;rite/%'una ziuaN%3
L?(&+I,6M
L?'$)KM
L?5678M
-nul dintre atributele etic!etei L(&+I,6M este lan6ua6e prin care este specificat limbajul n care
este scris scriptul, n cazul acesta valoarea atributului fiind %:ava(cript%.
$ alt modalitate de a include de a include un script n pagin este salvarea acestuia ca un fiier
e#tern i apelarea sa prin intermediul atributului src al etic!etei L(&+I,6M.
=n e#emplele de scripturi care vor urma vei observa diverse moduri n care pot fi incluse n
paginile *eb scripturi :ava(cript.
>u vom intra n amnunte privind sinta#a limbajului, deoarece aceasta depete subiectul acestei
cri. 6otui, pentru a putea folosi judicios un script :ava(cript trebuie s avei o imagine despre
elementele eseniale cu care lucreaz :ava(cript, obiectele i evenimentele.
D<iecte
-n obiect este un nou tip de date, care reunete sub aceeai denumire att datele ct i funciile
care le prelucreaz. )atele se numesc propriet,)ile obiectului iar funciile se numesc metodele
obiectului.
,entru a e#emplifica aceste concepte, s presupunem c dorim s construim un obiect care s
reprezinte o carte de vizit, pe care l vom numi &ard. cest obiect va avea urmtoarele proprieti:
" nume
" adres
" telefon
,entru a defini un obiect se folosete o funcie numit constructor. =n e#emplul nostru, funcia
constructor a obiectului &ard va arata astfel:
function &ard/num, adr, tel3
n
t!is.numeSnum]
t!is.adresaSadr]
t!is.telefonStel]
o
=n acest moment, constructorul obiectului &ard nc nu este complet, el conine numai
proprietile obiectului.
cum s construim i o metod care s lucreze cu acest obiect. )eoarece dorim s tiprim crile
de vizit pe care le vom realiza cu ajutorul acestui obiect, vom crea o funcie care va tipri proprietile
obiectului, numit ,rint&ard/3.
function ,rint&ard/3
n
document.;rite/%>umele: %, t!is.nume, %fn%3]
document.;rite/%dresa: %, t!is.adresa, %fn%3]
document.;rite/%6elefonul: %, t!is.telefon, %fn%3]
o
cum putem scrie definiia complet a obiectului nostru:
function &ard/num, adr, tel3
n
t!is.numeSnum]
t!is.adresaSadr]
t!is.telefonStel]
t!is.,rint&ardS,rint&ard]
o
( trecem, acum, la folosirea unui obiect. ,entru a crea un obiect concret, adic o instan a
obiectului &ard, se folosete cuvntul c!eie ne;. -rmtoarea instruciune construiete o instan a
obiectului &ard, care se numete ana:
anaSne; &ard /%na 7unteanu%, %(tr. pusului, nr.F, 'ucuresti%, %ACAFHJG%3
$dat ce a fost creat o nou instan a obiectului &ard, metoda ,rint&ard poate fi folosit astfel:
ana.,rint&ard/3
.i acum, s punem toate aceste secvene de cod laolalt i s folosim obiectul ntr"o pagin *eb,
pentru a afia mai multe cri de vizit. E#emplul CH.F realizeaz acest lucru. spectul paginii descrise
n document este cel din <igura CH.F.
0(emplul 11. /
L5678M
L5E)M
L6I68EMjavascriptFL?6I68EM
L(&+I,6 languageS%:ava(cript%M
function ,rint&ard/3
n
document.;rite/%L'M>umele:L?'M %, t!is.nume, %L'+M%3]
document.;rite/%L'Mdresa:L?'M %, t!is.adresa, %L'+M%3]
document.;rite/%L'M6elefonul:L?'M %, t!is.telefon, %L5+M%3]
o
function &ard/num, adr, tel3
n
t!is.numeSnum]
t!is.adresaSadr]
t!is.telefonStel]
t!is.,rint&ardS,rint&ard]
o
L?(&+I,6M
L?5E)M
L'$)KM
L5C alignS%center%M&rearea obiectelorL?5CM
Inceputul scriptuluiL5+M
L(&+I,6 languageS%:ava(cript%M
?? &rearea a trei obiecte noi
anaSne; &ard /%na 7unteanu%, %(tr. pusului, nr.F, 'ucuresti%, %ACAFHJG%3
ionSne; &ard/%Ion ,opescu%, %(tr. gorilor nr.C, ,loiesti%, %JGA10D%3]
raduSne; &ard/%+adu Ionescu%, %(tr. >optii, nr.H, ,itesti%, %FBCFBF%3]
?? fisarea lor
ana.,rint&ard/3]
ion.,rint&ard/3]
radu.,rint&ard/3]
L?(&+I,6M
(farsitul scriptului
L?'$)KM
L?5678M
,utei observa modul n care a fost inclus scriptul n pagina *eb. stfel, definiia scriptului este
plasat n antetul documentului 5678, iar apelul scriptului este fcut n corpul documentului. =n
cadrul scriptului apar dou linii precedate de irul de caractere %??%. cesta este modul n care se
introduc comentariile n cadrul scripturilor :ava(cript.
#"enimente
=n continuare vom discuta despre un alt concept fundamental cu care lucreaz :ava(cript, i
anume evenimentul. -n eveniment este o aciune care survine la un moment dat i n urma creia este
declanat e#ecuia unei anumite pri din program. $ri de cte ori vizitatorul face clicI pe o legtur,
de e#emplu, cnd introduce un te#t sau c!iar cnd trece cu mouse"ul deasupra unei zone a paginii,
survine un eveniment la care scriptul reacioneaz genernd un rspuns.
Iat care sunt tipurile de evenimente cu care lucreaz :ava(cript:
!abel 11. 1
0veniment @escriere
onbort
pare cnd utilizatorul renun la ncrcarea
unei imagini
on'lur
pare cnd un obiect din pagin pierde
focusul
on&!ange
pare cnd un cmp de editare este
modificat de utilizator /cnd se introduce un te#t3
on&licI
pare cnd utilizatorul face clicI pe un
element
onError
pare cnd un document sau o imagine nu
se ncarc corect
on<ocus pare cnd un element primete focusul
on8oad
pare cnd o pagin sau o imagine i
termin ncrcarea
on7ouse$ver
pare cnd cursorul mouse"ului se plimb
deasupra unui element
on7ouse$ut
pare cnd cursorul mouse"ului prsete
elementul
on(elect pare cnd utilizatorul selecteaz un te#t
on(ubmit
pare cnd este apsat un buton de tip
(ubmit
on-nload
pare cnd utilizatorul prsete
documentul sau sesiunea curent.
)up cum vedei, prin intermediul :ava(cript se poate rspunde unui mare numr de evenimente.
cest lucru se realizeaz prin crearea unei proceduri eveniment.
,rocedurile eveniment nu sunt definite cu ajutorul etic!etei L(&+I,6M ci ele sunt atribute ale
celorlalte etic!ete. )e e#emplu, iat o legtur care include o procedur eveniment:
L !refS%!ttp:??;;;.amazon.com%
on7ouse$verS% ;indo;.statusS@&ea mai mare librarie virtuala@] return true%M &licI aiciL?M
$bservai c ntreaga procedur eveniment care rspunde la evenimentul 7ouse$ver este inclus
n etic!eta LM. (unt specificate dou instruciuni care se e#ecut n momentul cnd cursorul mouse"
ului este plasat deasupra legturii. ,rima afieaz un mesaj n bara de status a ferestrei, urmtoarea
returneaz valoarea true, pentru a mpiedica tergerea mesajului. 7ai observai c mesajul care va fi
afiat este delimitat de apostrofuri.
)ac procedura eveniment este mai e#tins, includerea ei n ntregime ntr"o etic!eta devine
nepractic. =n aceast situaie, este mai avantajos s construim o funcie care s trateze evenimentul.
<uncia este definit n seciunea L5E)M a documentului, iar n corpul documentului este
apelat ca procedur eveniment. )e e#emplu, s presupunem c am construit o funcie eveniment
numit &iteste/3. tunci ea poate fi apelat astfel:
L !refS%Rcuprins% on7ouse$verS%&iteste/3]%M7ergi la &uprinsL?M
=n momentul cnd mouse"ul se afl deasupra legturii, funcia este lansat n e#ecuie.
3. Modu! de execuie a! scriptu!ui
(cripturile integrate n cadrul paginilor sunt evaluate dup ce ncrcarea paginii s"a nc!eiat dar
nainte ca aceasta s fie afiat. ,e de alt parte, scripturile stocate ca fiiere separate sunt evaluate
naintea tuturor scripturilor in!line /adic a celor incluse n pagin3. <unciile definite n cadrul
scripturilor nu sunt e#ecutate automat la ncrcarea paginilor ci abia atunci cnd acestea sunt apelate,
fie prin etic!eta L(&+I,6M fie printr"o procedur eveniment.
)ac ai vzut vreodat un script :ava(cript ntr"o pagin *eb, poate ai remarcat un lucru
aparent ciudat: ntregul script este inclus ntre etic!etele 5678 de comentariu:
LN" " comentariu " "M.
7otivul este faptul c e#ist bro;sere care nu recunosc i nu pot e#ecuta scripturile :ava(cript.
)ac un document *eb care conine cod :ava(cript este ncrcat ntr"un asemenea bro;ser, n loc ca
scriptul s fie e#ecutat, este afiat n pagin ntregul cod, ceea ce nu este de dorit. a dup cum tii,
comentariile sunt ignorate de bro;ser, astfel c includerea codului :ava(cript ntre etic!etele de
comentariu va duce la ignorarea acestei pri a documentului. E#cepie fac bro;serele care recunosc
:ava(cript i care vor identifica prezena :ava(cript i vor e#ecuta scriptul.
=n concluzie, maniera recomandat pentru introducerea n pagin a unui script este urmtoarea:
L(&+I,6 languageS%:ava(cript%M
LN " "
&od :ava(cript
?? " "M
L?(&+I,6M
m nvat pn acum cum poate fi inclus codul :ava(cript ntr"un document 5678. ( vedem,
mai departe, cum putem folosi scripturile :ava(cript pentru a face paginile mai atractive i a le
mbunti funcionalitatea.
4. Ce se poate 'ace cu Ba"aScript?
=n continuare sunt prezentate cteva e#emple de scripturi cu ajutorul crora se pot realiza lucruri
care depesc posibilitile limbajului 5678, cum ar fi afiarea datei curente n pagina dumneavoastr,
desc!iderea unei ferestre pop"up, afiarea unui mesaj n bara de status a ferestrei bro;serului, afiarea
aleatoare a unor mesaje n pagin, imagini care i sc!imb aspectul la trecerea mouse"ului, i, una
dintre cele mai utile aplicaii :ava(cript, validarea formularelor.
1'iarea unui mesaE n <ara de status
cest e#emplu ilustreaz modul cum se poate afia un mesaj n bara de status /aflat la baza
ferestrei bro;serului3 la trecerea cu mouse"ul peste un anumit element din pagin. )e obicei, acest
element este un linI sau o imagine. =n E#emplul CH.H, elementul este o imagine. spectul paginii care
conine scriptul este cel din <igura CH.H.
0(emplul 11. 1
L5678M
L5E)M
L6I68EMjavascriptHL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%M7esaj in status barL?5CML5+M
L5HM7esajul apare la plasarea mouse"ului pe imagineL?5HM
LI79 srcS%..?Imagini?tiger.gif% on7ouse$verS%;indo;.statusSlcesta este un tigrul]
return true% on7ouse$utS%;indo;.statusSl l]return true%M
L?'$)KM
L?5678M
1'iarea datei curente n pa&in*
(criptul urmtor preia data sistemului de operare al utilizatorului i o afieaz n pagin. Evident,
dac data sistemului este setat incorect, ea va aprea n pagin ca atare. E#emplul CH.J construiete o
pagin *eb care conine un astfel de script, aspectul paginii fiind redat n <igura CH.J.
0(emplul 11. 3
L5678M
L5E)M
L6I68EMjavascriptJL?6I68EM
L(&+I,6 languageS%javascript%M
LN""
var zi, data, luna
aziSne; )ate/3
if/azi.get)aE/SSB3n ziS%)uminica, % o
else if/azi.get)aE/3SSC3n ziS%8uni, % o
else if/azi.get)aE/3SSF3nziS%7arti, %o
else if/azi.get)aE/3SSH3nziS%7iercuri, %o
else if/azi.get)aE/3SSJ3nziS%:oi, %o
else if/azi.get)aE/3SSG3nziS%Uineri, %o
else if/azi.get)aE/3SSA3nziS%(ambata, %o
if/azi.get7ont!/3SSB3nlunaS%Ianuarie %o
else if/azi.get7ont!/3SSC3nlunaS%<ebruarie%o
else if/azi.get7ont!/3SSF3nlunaS%7artie%o
else if/azi.get7ont!/3SSH3nlunaS%prilie%o
else if/azi.get7ont!/3SSJ3nlunaS%7ai%o
else if/azi.get7ont!/3SSG3nlunaS%Iunie%o
else if/azi.get7ont!/3SSA3nlunaS%Iulie%o
else if/azi.get7ont!/3SS13nlunaS%ugust%o
else if/azi.get7ont!/3SS03nlunaS%(eptembrie%o
else if/azi.get7ont!/3SSD3nlunaS%$ctombrie%o
else if/azi.get7ont!/3SSCB3nlunaS%>oiembrie%o
else if/azi.get7ont!/3SSCC3nlunaS%)ecembrie%o
dataSazi.get)ate/3
??""M
L?(&+I,6M
L?5E)M
L'$)KM
L5C alignS%center%M)ata calendaristicaL?5CML5+M
L<$>6 sizeS%H% colorS%blacI% faceS%arial%Mzi suntem in data de:
L(&+I,6 languageS%:ava(cript%M
LN""
L<$>6 sizeS%J% colorS%red% faceS%arial%M
document.;rite/ziYl lYdataYl lYluna3
??""M
L?(&+I,6ML?<$>6M
L?'$)KM
L?5678M
0erestre pop-up
-nul din lucrurile care nu se pot realiza folosind doar 5678 este afiarea mesajelor pop-up.
ceste mesaje apar ntr"o mic fereastr care se nc!ide atunci cnd e#ecutai o anumit aciune, de
obicei clicI pe un buton, sau pe un linI.
=n E#emplul CH.G este construit pagina principal din care este apelat fereastra pop!up.
0(emplul 11. 4
L5678M
L5E)M
L6I68EMjavascriptGL?6I68EM
L(&+I,6 languageS%:ava(cript%M
LN""
function desc!ide/3
ni;inS;indo;.open/%javascriptA.!tml%, %I*I>%, %statusSno, toolbarSno, locationSno, menuSno,
;idt!SFBB, !eig!tSFBB%3]o
??""M
L?(&+I,6M
L?5E)M
L'$)KM
L5C alignS%center%M<ereastra pop"upL?5CML5+M
ceasta pagina demonstreaza cum poate fi creata o fereastra pop"upL'+M
<ereastra se desc!ide la apasarea pe legatura de mai jos si se inc!ideL'+M
cand este apasat butonul $XL'+M
)esc!ide fereastra
L !refS%R% on&licIS%desc!ide/3]%MaiciL?M.
L?'$)KM
L?5678M
<irete c trebuie creat un document separat, care va fi afiat n fereastra pop!up. =n E#emplul
CH.A este construit documentul 5678 /;avascript=)html3 care va fi afiat n fereastra pop!up definit n
e#emplul anterior.
0(emplul 11. 7
L5678M
L5E)M
L6I68EMjavascriptAL?6I68EM
L?5E)M
L'$)KM
L5H alignS%center%M6est pop"upL?5HM
L<$>6 colorS%green% faceSarialMti invatat sa creati o fereastra pop"upL'+M
pasati $X ca sa reveniti in fereastra initiala
L,M
L<$+7 nameS%formC%M
LI>,-6 tEpeS%button% valueS%$X%
on&licIS%;indo;.close/3]%M
L?<$+7M
L?'$)KM
L?5678M
spectul paginii i al ferestrei pop!up este redat n <igura CH.G.
,utei modifica documentul 5678 care se va desc!ide n fereastra pop!up dup dorin i l
putei salva sub alt nume. >u uitai, ns, s facei modificarea corespunztoare n funcia desc!ide/3
din script.
1'iarea a!eatoare a unor mesaEe n pa&in*
-nul dintre lucrurile care i fac pe vizitatorii paginii dumneavoastr s revin la ea cu regularitate
este varietatea, fie n aspect, fie, mai ales, n coninut.
-n mod de a face paginile mai variate este de a afia diverse mesaje, citate sau imagini care s se
sc!imbe de fiecare dat cnd este accesat pagina.
=n E#emplul CH.1 este prezentat un script care realizeaz afiarea aleatoare a unui citat, ales dintr"
un ir predefinit. spectul acestei pagini este redat n <igura CH.A.
0(emplul 11. 9
L5678M
L5E)M
L6I68EMjavascript1L?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%M&itateL?5CML5+M
L(&+I,6 languageS%:ava(cript%M
LN""
citatSne; rraE/G3]
autorSne; rraE/G3]
citatPBQS%$mul care"si cunoaste limitele este singurul care are sanse sa obtina ce vrea.%]
autorPBQS%9oet!e%]
citatPCQS%,e stancile cele mai inalte ajung numai vulturii si reptilele.%]
autorPCQS%7ontesTuieu%]
citatPFQS%,utine lucruri sunt atat de greu de suportat ca un e#emplu bun.%]
autorPFQS%7arI 6;ain%]
citatPHQS%devarul pur si simplu este rareori pur si niciodata simplu.%]
autorPHQS%$scar *ilde%]
citatPJQS%$mul a inventat limbajul pentru a"si satisface nevoia profunda de a se plange.%]
autorPJQS%8ilE 6omlin%]
inde#S7at!.floor/7at!.random/3 k citat.lengt!3]
document.;rite/%L)8Mfn%3]
document.;rite/%L)6M% Y %f%% Y citatPinde#Q Y %f%fn%3]
document.;rite/%L))M% Y %" % Y autorPinde#Q Y %fn%3]
document.;rite/%L?)8Mfn%3]
??""M
L?(&+I,6M
L5+M
&itatul de mai sus este generat aleator la incarcarea paginii.
L?'$)KM
L?5678M
)ac dorii s inserai acest script n pagina dumneavoastr i s adugai i alte citate, nu uitai s
redimensionai vectorii citat i autor la valoarea n!B, unde n este numrul de citate. ,entru a observa
funcionarea scriptului, rencrcai pagina de mai multe ori.
(ma&ini care se sc/im<* 8ro!!o"er ima&es9
-n efect interesant pe care l putei introduce n pagin sunt imaginile care i sc!imb aspectul la
trecerea cu mouse"ul pe suprafaa lor. cesta se poate obine cu ajutorul scriptului prezentat n
E#emplul CH.0. =n <igura CH.1 este redat aspectul paginii descrise n acest e#emplu.
0(emplul 11. ;
L5678M
L5E)M
L6I68EMjavascript0L?6I68EM
L(&+I,6 languageS%:ava(cript%M
LN""
if /document.images3
n
picConSne; Image/3]
picCon.srcS%..?Imagini?dovleacC.jpg%]
picCoffSne; Image/3]
picCoff.srcS%..?Imagini?dovleacF.jpg%]
o
function desc!ide/img>ame3
n
if /document.images3
n
img$nSeval/img>ame Y %on.src%3]
documentPimg>ameQ.srcSimg$n]
o
o
function inc!ide/img>ame3
n
if /document.images3
n
img$ffSeval/img>ame Y %off.src%3]
documentPimg>ameQ.srcSimg$ff]
o
o
??"""M
L?(&+I,6M
L?5E)M
L'$)KM
L5C alignS%center%MImagini care se sc!imbaL?5CML5+M
L&E>6E+M
L !refS%R% on7ouseoverS%desc!ide/lpicCl3% on7ouseoutS%inc!ide/lpicCl3%M
LI79 srcS%..?Imagini?dovleacF.jpg% ;idt!S%CBB% !eig!tS%CBB% borderS%C% nameS%picC%M
L?M
L?&E>6E+M
L?'$)KM
L?5678M
Ca!idarea 'ormu!are!or
)ac e#emplele prezentate pn acum au avut rolul de a face pagina dumneavoastr mai
atractiv, urmtorul e#emplu este de natur s i mbunteasc funcionalitatea. $ problem cu care
v vei confrunta fr ndoial dac folosii formulare n pagin, este validarea datelor introduse de
utilizator.
Uom crea o pagin foarte simpl care conine dou casete de te#t n care utilizatorul trebuie s
introduc numele i adresa de mail. )eoarece dup completarea formularului informaiile introduse vor
fi supuse procesului de validare realizat de scriptul :ava(cript, etic!eta L<$+7M va avea un coninut
diferit de cel pe care l cunoatei de la capitolul 2ormulare.
(criptul de mai jos verific dac toate cmpurile de editare au fost completate. )ac se apas pe
butonul (ubmit nainte de a completa ambele cmpuri, este transmis un mesaj de eroare. )atele din
formular sunt transmise unui script &9I fictiv, numit m$script)cgi aflat n directorul cgi!bin.
$bservai c atributele action i met!od ale etic!etei L<$+7M pe care le cunoatei de la
2ormulare sunt, de data aceasta folosite ca proprieti ale obiectului predefinit n :ava(cript, form.
)ocumentul construit n E#emplul CH.D conine un formular i scriptul care realizeaz validarea
datelor introduse n cmpurile formularului. )in <igura CH.0 putei observa mesajul de eroare transmis
n situaia cnd unul din cmpurile formularului nu este completat.
0(emplul 11. 9
L5678M
L5E)M
L6I68EMjavascriptDL?6I68EM
L(&+I,6 languageS%javascript%M
LN""
function verifica/form3
n
if /form.nume.valueSS %%3
n
alert/%Ua rog, introduceti numeleN%3]
form.nume.select/3]
o
else if /form.email.valueSS %%3
n
alert/%Ua rog, introduceti adresa de mailN%3]
form.email.select/3]
o
else
n
form.met!odS%post%]
form.targetS%Vself%]
form.actionS%cgi"bin?mEscript.cgi%]
form.submit/3]
o
o
??""M
L?(&+I,6M
L?5E)M
L'$)KM
L5C alignS%center%MUalidarea formularelorL?5CM
L5H alignS%center%M/completarea tuturor campurilor3L?5HML5+M
L<$+7 on(ubmitS%verifica/t!is3] return false]%M
>ume:
LI>,-6 tEpeS%te#t% nameS%nume% sizeS%HB%ML'+M
dresa mail:
LI>,-6 tEpeS%te#t% nameS%email%ML'+M
LI>,-6 tEpeS%submit% nameS%button% valueS%(ubmit%M
L?<$+7M
L?'$)KM
L5678M
$ alt verificare deosebit de util este dac utilizatorul a introdus o adres de mail valid. (criptul
din e#emplul urmtor realizeaz trei verificri:
dac n irul de caractere introdus e#ist caracterul h
dac este prezent caracterul %.% urmat de trei caractere /.com, de e#emplu3,
dac este prezent caracterul %.% urmat de dou caractere /.ro, de e#emplu3
<ormularul din E#emplul CH.CB conine un cmp de editare i un buton +ubmit. )ac adresa de
mail introdus n cmpul de editare este incorect se va afia un mesaj de eroare aa cum se vede n
<igura CH.D.
0(emplul 11. 1D
L5678M
L5E)M
L6I68EMjavascriptCBL?6I68EM
L(&+I,6 languageS%javascript%M
LN""
function verificaVmail/form3
n
verifSform.email.value
if //verif.inde#$f/lhl3 L B3 ii //verif.c!art/verif.lengt!"J3 NSl.l3 \\ /verif.c!art/verif.lengt!"
H3 NSl.l333
n
alert/%>u ati introdus o adresa de mail valida. Ua rog, incercati din nouN%3]
form.email.select/3]
return false]
o
else
n
form.met!odS%post%]
form.targetS%Vself%]
form.actionS%cgi"bin?mEscript.cgi%]
form.submit/3]
o
o
??""M
L?(&+I,6M
L?5E)M
L'$)KM
L5C alignS%center%MUalidarea formularelorL?5CM
L5H alignS%center%M/adresa de mail corecta3L?5HML5+M
L<$+7 on(ubmitS%verificaVmail/t!is3]return false]%M
dresa mail:
LI>,-6 tEpeS%te#t% nameS%email%ML'+M
LI>,-6 tEpeS%submit% nameS%button% valueS%(ubmit%M
L?<$+7M
L?'$)KM
L5678M
,utei folosi n paginile dumneavoastr oricare dintre aceste scripturi, desigur, fcnd modificrile
necesare legate de structura site"ului dumneavoastr. )e e#emplu, n scripturile care realizeaz
validarea formularelor, pentru ca acestea s fie funcionale, trebuie s precizai localizarea corect a
scriptului &9I care face prelucrarea lor.
)in e#emplele prezentate probabil c v"ai putut crea o imagine despre modul n care pot fi
utilizate scripturile :ava(cript ntr"o pagin *eb. )ac suntei entuziasmat nc de pe acum, vei fi i
mai mult dac vei depune puin efort pentru a nva limbajul i vei putea crea scripturi mult mai
comple#e dect acestea.
vei ns grij la aspectele legate de viteza de ncrcare a paginii: aplicaiile comple#e i de mari
dimensiuni ncetinesc ncrcarea paginii unde sunt folosite. &a i n cazul imaginilor, nu folosii
scripturi de care nu este nevoie, doar pentru a arata cu orice pre c suntei un bun programator. -na
dintre regulile de aur ale unei pagini *eb bune, regul att de adesea nclcat, este simplitatea.
). -e.umat
:ava(cript este un limbaj de programare orientat pe obiecte i evenimente care permite e#tinderea
capacitilor limbajului 5678.
(cripturile :ava(cript sunt incluse ntr"un document 5678 prin intermediul etic!etei container
L(&+I,6M sau prin intermediul procedurilor eveniment. ,entru a evita afiarea n pagin a codului
scriptului de bro;serele care nu suport scripturi, se obinuiete ca scriptul s fie inclus ntre etic!etele
de comentariu.
(cripturile pot fi inserate direct n documentul 5678 sau pot fi stocate n fiiere e#terne care
sunt apelate n documentul respectiv.
&u ajutorul scripturilor :ava(cript se pot realiza sarcini diverse cum ar fi crearea ferestrelor pop"
up, afiarea datei curente n pagin, validarea formularelor i altele.
=n capitolul urmtor vom discuta despre o alt metod care mbogete limbajul 5678 cu noi
posibiliti de a controla aspectul paginilor, i anume programarea cu ajutorul foilor de stiluri /+t$le
+heets3
Capitolul 13
2oi de stiluri <C''=
2oile de stiluri !"# /Cascading +t$le +heets3 reprezint o inovaie n dezvoltarea *orld *ide
*eb, n ciuda faptului c ideea gruprii elementelor de formatare a documentelor a aprut ceva mai
demult. plicarea stilurilor reprezint o e#tindere important a posibilitilor de design, evitnd
utilizarea de fiiere grafice mari ce determin ncetinirea ncrcrii paginilor i manipularea lor greoaie.
<olosind stilurile 5678 putei fi sigur c cititorii vor vedea te#tul din pagin e#act aa cum a fost
el proiectat. 6e#tul i proprietile acestuia, care au fost iniial controlate de bro;sere, se rentorc la
autor, acolo unde le este, de fapt, locul.
1. Ce este un sti!?
-n stil reprezint o colecie de atribute ale te#tului i ale modului de aranjare a documentului care
pot fi aplicate n mod selectiv unui document sau doar unei pri din acesta. ceste atribute pot fi tipul
de font, mrimea i grosimea acestuia, marginile, paragrafele i orice altceva ce poate influena aspectul
te#tului n pagin. 9ruparea lor n stiluri permite autorului s aplice aceeai colecie de atribute la
diferite pri ale unui document.
(tilurile aplicate unui document 5678 au multe avantaje pentru creatorii de pagini *eb:
$fer control crescut asupra aspectului i plasrii te#tului n pagin
+educ %nvlmeala% produs de multitudinea de desc!ideri i nc!ideri ale etic!etelor care
descriu elementele individuale ale te#tului
,rocesul de modificare a diferitelor elemente din pagin se simplific
)e e#emplu, dac dorii ca titlurile dumneavoastr s aib un alt tip de font dect te#tul obinuit,
s fie de dimensiune mai mare i scrise cu caractere ngroate i italice, ar trebui s definii aceste
atribute de formatare pentru fiecare titlu n parte. <olosind stilurile nu avei nevoie dect s creai o
singur definiie de stil care s conin atributele de formatare dorite, pe care s o aplicai la fiecare
titlu.
=n plus, folosirea stilurilor reduce considerabil efortul depus atunci cnd dorii s aducei
modificri aspectului i aranjrii elementelor din paginile dumneavoastr. =n loc s parcurgei fiecare
document n parte i s facei modificri asupra fiecrui element, nu mai este necesar s operai
modificri dect asupra foii de stiluri care controleaz aceste elemente.
2. Tipuri de 'oi de sti!uri
(tilurile 5678 pot fi aplicate ntr"o pagin *eb n trei moduri:
Wncapsulate /embedded3: stilurile sunt incluse n documentul asupra cruia se aplic, i anume n
seciunea L5E)M a documentului. ,rin includerea lor n antetul documentului, stilurile rmn
invizibile pentru vizitatorul paginii.
#e6ate /linked3: stilurile sunt definite n fiiere separate de documentul 5678. )ocumentul face
apel la foaia de stiluri prin intermediul etic!etei L8I>XM. <olosirea acestui tip de stiluri face posibil
utilizarea aceleiai foi de stil pentru documente diferite. )e asemenea, este posibil aplicarea mai
multor foi de stiluri pentru acelai document.
An*line: stilurile sunt incluse ca atribute n cadrul etic!etelor 5678 din document. ceasta
nseamn c ele vor afecta doar elementul asupra cruia sunt aplicate. Este o modalitate mai puin
utilizat deoarece contrazice principiul general al stilurilor, acela de a simplifica i de a face mai lizibil
codul documentului 5678.
(inta#a definiiilor de stil este, n general, aceeai, indiferent de modul cum sunt ele aplicate. &ele
trei tipuri de stiluri pot fi, de asemenea, combinate n cadrul aceluiai document. +elaiile dintre
diferitele tipuri de stiluri realizeaz efectul de cascad care d numele acestei metode.
Sti!uri ncapsu!ate
&rearea unui astfel de stil se realizeaz folosind etic!eta
?'!N#0C ?/'!N#0C. Etic!eta L(6K8EM este o etic!et container, deci este obligatorie
prezena etic!etei de nc!idere L?(6K8EM. =ntre cele dou etic!ete se introduc definiiile de stil.
Etic!eta de stil este plasat n antetul documentului adic n seciunea L5E)M.
=n E#emplul CJ.C este prezentat o definiie de stil care realizeaz afiarea tuturor titlurilor de
nivel C /adic a te#telor cuprinse ntre etic!etele L5CM L?5CM3 cu caractere bold i de culoare verde. =n
plus, te#tele incluse ntre etic!etele L,M L?,M vor fi afiate cu fonturi arial, de mrime F i culoare
violet.
)e asemenea, este creat un stil %normal% care poate fi aplicat asupra oricrui te#t. ,rin intermediul
su, te#tul este afiat cu caractere mai mari i de culoare oranj. spectul paginii n care este inclus
aceast definiie de stil este cel din <igura CJ.C.
/9. 0(emplul 13. 1
L5678M
L5E)M
L6I68EMstiluriCL?6I68EM
L(6K8EM
LN""
5C ncolor: RBB0BBB] font";eig!t: boldo
, nfont"familE: rial] color: R0BBB0B] font"size: CJp#o
.normal nfont"size: large] color: R<<0BBBo
""M
L?(6K8EM
L?5E)M
L'$)KM
L5C alignS%center%M(tiluriL?5CML5+M
L,M6e#tul din acest paragraf este formatat cu ajutorul stilurilorL?,M
cesta este un te#t neformatat
L5CM6itluL?5CM
L(,> classS%normal%Mcesta este stilul normalL?(,>M
L?'$)KM
L?5678M
$bservai c definiia stilurilor a fost plasat ntre etic!etele 5678 de comentariu, n aceeai
manier ca i la scripturile :ava(cript. 7otivul este acelai: dac bro;serul cu care este vizualizat
pagina nu suport foi de stiluri, se evit astfel afiarea n pagin a codului 5678.
Sti!uri !e&ate F 'oi de sti!uri externe
(tilurile incluse n pagin se aplic elementelor prezente n respectivul document 5678,
reducnd dimensiunea codului i efortul de a defini fiecare element n parte. ceast idee se poate
e#tinde la nivelul mai multor documente care pot beneficia, toate, de aceleai stiluri, reunite ntr"o foaie
de stiluri e#tern.
vantajul folosirii foilor de stiluri e#terne este dublu. ,e de"o parte ele se pot aplica la nivelul mai
multor documente 5678, realiznd astfel o legtur de stil ntre ele, lucru deosebit de util la
construirea unui site. ,e de alt parte, acelai document poate folosi foi de stiluri diferite, oferind
vizitatorului posibilitatea de a opta pentru unul sau altul dintre ele, n funcie de propriile preferine.
$ foaie de stiluri este un fiier te#t care conine regulile de stil definite n aceeai manier folosit
la stilurile incluse n pagin. $dat creat o foaie de stiluri, ea trebuie salvat cu e#tensia .css. <oile de
stiluri pot fi stocate ntr"un folder separat sau n acelai folder n care sunt plasate i documentele
5678.
pelul foilor de stiluri se poate realiza n dou moduri:
folosind etic!eta ?#AGOC
folosind funcia Ximport
&el mai folosit mod de apelare a unei foi de stiluri este cu ajutorul etic!etei L8I>XM conform
urmtoarei sinta#e:
L8I>X relS%stEles!eet% !refS%numeVfoaieVstiluri.css%M
=n E#emplul CJ.F este construit o foaie de stiluri e#tern care va fi apelat cu ajutorul etic!etei
L8I>XM. <oaia de stiluri a fost salvat sub numele stiluri>)css
/;. 0(emplul 13. /
'$)K
nbacIground"color: R&&<<&&]
font"familE: rial, sans"serif]
color: RHHBBAA]
padding: GBp#, 1Bp#o
:linI ncolor: R&&DDBBo
:visited ncolor: RAABBBBo
:!over ncolor: R<<&&BBo
:active ncolor: R<<BBBBo
5C ncolor: RDDAAHH]
bacIground"color: R<<<<&&o
)ocumentul 5678 care urmeaz apeleaz foaia de stiluri de mai sus este prezentat n E#emplul
CJ.H. )up cum observai, foaia stiluri>)css a fost apelat n antetul documentului, prin intermediul
etic!etei L8I>XM cu atributul relS%stEles!eet%. tributul !ref al etic!etei are ca valoare numele /i
adresa relativ, dac este necesar3 al foii de stiluri apelate. =n documentul 5678 am inclus i o
legtur, pentru a e#emplifica modul n care foaia de stiluri sc!imb culorile legturii. tributul hover
se refer la proprietatea ca legtura s i sc!imbe culoarea la trecerea cu mouse"ul peste ea, fr a face
clicI. ,agina descris n acest e#emplul are aspectul din <igura CJ.F.
/9. 0(emplul 13. 1
L5678M
L5E)M
L6I68EMstiluriHL?6I68EM
L8I>X relS%stEles!eet% !refS%stiluriF.css%M
L?5E)M
L'$)KM
L5C alignS%center%M<oi de stiluri e#terneL?5CM
cest e#emplu ilustreaza modul in care este inclusa in pagina o foaie de stiluri e#terna
L,M7ai multe e#emple in L !refS%ane#aC.!tml%Mane#aFL?M
L?'$)KM
L?5678M
Sti!uri in-!ine
(pre deosebire de stilurile ncapsulate i de foile de stiluri e#terne, stilurile in!line fac parte c!iar
din corpul documentului 5678. Ele se aplic prin folosirea atributului stLle n asociere cu etic!etele
5678 standard. +einei, deci, c stEle poate fi att etic!et n sine ct i atribut al altor etic!ete.
)efiniiile de stil in!line se aplic numai asupra elementelor incluse ntre etic!etele care au
asociat atributul stEle. )in acest motiv, dac dorim s repetm n alt loc din cuprinsul documentului
aceleai definiii de stil, ele vor trebui repetate, ncrcnd astfel documentul 5678. 6otui, utilitatea
stilurilor in!line este aceea c fiind definite c!iar n cuprinsul documentului, definiiile lor sunt mai
puternice dect cele din stilurile ncapsulate sau e#terne. )ac, de e#emplu, am creat o foaie de stiluri
pe care dorim s o aplicm unui document, i dac n cadrul acestui document avem un anumit element
particular cruia dorim s"i dm un alt aspect dect cel prevzut n foaia e#tern, putem aplica acelui
element un stil in!line care se va referi strict la el.
Iat un e#emplu de aplicare a unui stil in!line asociat etic!etei L,M:
L, stEleS%color: red] font"familE: arial] font";eig!t: bold%M6e#tul din acest paragraf este scris cu
fonturi arial, ingrosate, de culoare rosuL?,M
$bservai c la stilurile in!line definiiile de stil sunt incluse ntre apostrofuri i nu ntre acolade,
ca la celelalte tipuri de stiluri.
tunci cnd lucrai cu documente 5678 deja e#istente crora dorii s le aplicai stiluri in!line,
este recomandat s folosii etic!etele ?@ABC i ?'&8GC. cestea v permit s aplicai stilurile fr a
afecta codul 5678 deja e#istent sau aspectul paginii n bro;serele care nu suport stiluri.
E#emplul CJ.J ilustreaz folosirea etic!etei L(,>M aspectul paginii fiind redat n <igura CJ.H.
1D. 0(emplul 13. 3
L5678M
L5E)M
L6I68EMstiluriJL?6I68EM
L?5E)M
L'$)KM
L5C stEleS%color:red]font"famElE:arial%M(tiluri in"lineL?5CML5+M
L,M6e#tul din acest paragraf este divizat folosind etic!eta spanL?,M
L(,> stEleS%font"familE:arial] color: blue%M6e#t scris cu albastru si fonturi arialL?(,>ML'+M
L(,> stEleS%font"familE: courier] size: medium] color:green%M6e#t scris cu verde si fonturi
courier mediumL?(,>M
L?'$)KM
L?5678M
8a fel ca i la capitolele anterioare, nu vom intra n amnunte privind programarea cu ajutorul
stilurilor. )ei stilurile sunt intuitive i uor de aplicat, totui o abordare e#!austiv a acestui subiect
depete obiectul acestei cri. ,rezentm, totui, n continuare, cteva e#emple care v pot fi utile n
paginile dumneavoastr.
3. #'ecte o<inute cu aEutoru! sti!uri!or
1spectu! textu!ui
Iat cteva atribute care se pot asocia cu diverse etic!ete 5678 permind sc!imbarea aspectului
te#tului.
11. !abel 13. 1
8tributul 05ectul
color (eteaz culoarea te#tului.
bacIground"
color
(eteaz culoarea fundalului unui obiect.
font"familE (eteaz tipul de font.
font"size
(eteaz dimensiunea fonturilor. Ualorile pot fi
e#primate n pi#eli /p#3 sau puncte /pt3.
font";eig!t
(eteaz grosimea fonturilor. Ualorile posibile
pot fi: normal, bold, bolder, lig!ter.
font"stEle
(eteaz stilul de font. Ualorile pot fi: normal,
italic, obliTue.
letter"spacing
(eteaz spaierea literelor. Ualorile pot fi:
pi#eli /p#3, puncte /pt3, inci /in3, centimetri /cm3 sau
milimetri /mm3.
;ord"spacing
(eteaz spaierea cuvintelor. Ualorile pot fi:
pi#eli /p#3, puncte /pt3, inci /in3, centimetri /cm3 sau
milimetri.
te#t"transform
Ualorile posibile pot fi: capitalize, uppercase,
lo;ercase, none.
te#t"decoration
Ualorile pot fi: underline, overline, line"
t!roug!, blinI.
!over
(c!imb aspectul unei legturi cnd mouse"ul
se afl deasupra ei.
linI )efinete aspectul unei legturi.
active )efinete aspectul legturii active.
visited )efinete aspectul legturii vizitate.
first"letter (c!imb aspectul primei litere dintr"un cuvnt.
first"line (c!imb aspectul primei linii dintr"un te#t.
=n e#emplele urmtoare sunt ilustrate cteva din aceste atribute.
E#emplul CJ.G include o definiie de stil n care sunt definii aa numiii selectori de clas,, n
acest e#emplu '.titlu i '.subtitlu. =n corpul documentului apelul acestora a fost fcut prin construcia:
L' classS%titlu%M6itluL?'M
tributul class care se poate asocia etic!etei L'M ca n acest e#emplu sau altor etic!ete de
formatare a te#tului are ca valoare un identificator care a fost definit n prealabil n cadrul definiiei de
stil.
spectul paginii descrise n acest e#emplu este cel din <igura CJ.J.
1/. 0(emplul 13. 4
L5678M
L5E)M
L6I68EMstiluriGL?6I68EM
L(6K8EM
LN""
'.titlu nfont"size: FB pt] font";eig!t: bolder] letter"spacing:Gp#o
'.subtitlu nfont?size: CG pt] letter"spacing: Gp#o
""M
L?(6K8EM
L?5E)M
L'$)KM
L5C alignS%center%Mspectul te#tuluiL?5CML5+M
L,M
6e#t normalL'+M
L'M6e#t ingrosatL?'ML'+M
L' classS%titlu%M6itluL?'ML'+M
L' classS%subtitlu%M(ubtitluL?'M
L?,M
L?'$)KM
L?5678M
E#emplul CJ.A folosete stiluri la formatarea titlului de nivel 5C i a te#tului din cadrul
paragrafului, folosind atributul first"letter care sc!imb aspectul primei litere din paragraf. .i n acest
e#emplu a fost folosit un selector de clas i anume ,.primalit.
spectul paginii care folosete aceste stiluri este redat n <igura CJ.G.
11. 0(emplul 13. 7
L5678M
L5E)M
L6I68EMstiluriAL?6I68EM
L(6K8EM
LN""
,.primalit:first"letter nfont";eig!t: bolder] font"stEle: italic] font"size:GB pt] color:redo
5C ncolor:blue] letter"spacing:G p#o
""M
L?(6K8EM
L?5E)M
L'$)KM
L5C alignS%center%MEfecte asupra te#tuluiL?5CML5+M
L, classS%primalit%M6e#tul din acest paragraf foloseste atributul first"letterL?,M
L?'$)KM
L?5678M
$are de deru!are co!orate
-nul dintre efectele des ntlnite n paginile *eb este prezena barelor de derulare colorate. cest
efect se poate, de asemenea, obine prin aplicarea stilurilor. ,entru a defini culoarea barelor de derulare
se folosesc cteva atribute, pe care le definim mai jos.
13. !abel 13. /
8tributul 05ectul
scrollbar"base"color )efinete culoarea de baz a barei, a
butoanelor cu sgei i a fundalului pe care se
deplaseaz bara. )ac dorii s realizai rapid
o bar de derulare nu este necesar s setai
dect acest atribut i pe cel urmtor. (etarea
celorlalte atribute se suprapune i anuleaz
efectele acestuia.
scrollbar"arro;"
color
)efinete culoarea sgeilor de pe bar
scrollbar"face"color )efinete culoarea suprafeei barei de
derulare i a butoanelor pe care sunt sgeile.
)e asemenea, stabilete culoarea fundalului
pe care se deplaseaz bara.
scrollbar"!ig!lig!t"
color
)efinete culoarea prilor %iluminate%
ale barei i butoanelor cu sgei /marginile de
sus i din stnga3 i a fundalului pe care se
deplaseaz bara
scrollbar"
darIs!ado;"color
)efinete culoarea prilor %ntunecate%
ale barei i butoanelor cu sgei /marginile de
jos i din dreapta3
scrollbar"s!ado;"
color
)efinete culoarea marginilor de jos i
din dreapta ale barei i butoanelor cu sgei
scrollbar"Hdlig!t"
color
)efinete culoarea marginilor de sus i
din stnga ale barei i butoanelor cu sgei
scrollbar"tracI"color )efinete culoarea fundalului barei
)up cum observai, unele dintre aceste atribute i suprapun efectele. E#ist anumite reguli care
stabilesc prioritile atributelor pe care nu le vom aborda aici. &a nceptor, este recomandat s nu
folosii atribute care se suprapun pentru a nu obine rezultate neconforme cu inteniile dumneavoastr.
E#emplul urmtor ilustreaz modul de construire a barelor de derulare colorate.
=n E#emplul CJ.1 am construit o foaie de stiluri e#tern salvat sub numele stiluriI)css)
14. 0(emplul 13. 9
'$)K
n
scrollbar"face"color:blue]
scrollbar"arro;"color:Eello;]
scrollbar"s!ado;"color:red]
scrollbar"Hdlig!t"color:Eello;]
scrollbar"tracI"color:cEan]
o
)ocumentul 5678 care apeleaz foaia de stiluri este construit n E#emplul CJ.0, pagina descris
de acest document avnd aspectul din <igura CJ.A.
17. 0(emplul 13. ;
L5678M
L5E)M
L6I68EMstiluri0L?6I68EM
L8I>X relS%stEles!eet% !refS%stiluri1.css%M
L?5E)M
L'$)KM
L5C alignS%center%M'are de derulare colorateL?5CM
aL'+MaL'+MaL'+MaL'+MaL'+MaL'+MaL'+M
aL'+MaL'+MaL'+MaL'+MaL'+MaL'+MaL'+M
aL'+MaL'+MaL'+MaL'+MaL'+MaL'+MaL'+M
L?'$)KM
L?5678M
)esigur, culorile pe care le alegei pentru bara de derulare trebuie selectate cu grij, astfel nct s
se armonizeze cu restul paginii. <olosirea unei foi de stiluri e#terne este util deoarece putei stabili
astfel culoarea barei pentru toate paginile site"ului dumneavoastr.
'ro;serele >etscape nu suport sc!imbarea culorilor barei de derulare.
0ormu!are co!orate
E#emplul care urmeaz /E#emplul CJ.D3 folosete stiluri in!line pentru a crea formulare colorate
care pot da paginii un aspect mai atractiv. m folosit pentru setarea culorilor codurile !e#azecimale pe
care le putei gsi n 8ne(a 1. &a i la barele de derulare, culorile formularelor trebuie alese cu grij
pentru a nu da paginii un aspect ncrcat i lipsit de bun"gust. ,agina descris n acest document arat
ca n <igura CJ.1.
19. 0(emplul 13. 9
L5678M
L5E)M
L6I68EMstiluriDL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%M<ormulare colorateL?5CML5+M
L<$+7M
LI>,-6 nameS%te#t% stEleS%bacIground"color: RBB&&<<] color: R<<<<<<] font";eig!t: bold%
valueS%(alutN%M
L,M
L6EW6+E ro;sS%G% colsS%FB% stEleS%color: RBBAA&&] bacIground"color: R&&&&&&]
scrollbar"base"color:red]%M&are sunt impresiile tale4L?6EW6+EM
L,M
LI>,-6 tEpeS%submit% valueS%trimite% stEleS%bacIground"color: RBBAA&&%M
L?<$+7M
L?'$)KM
L?5678M
Uizualizate n >etscape formularele din e#emplul de mai sus vor avea aspectul normal, necolorat.
4. -e.umat
<oile de stiluri reprezint un instrument important n elaborarea documentelor 5678, mai ales
dac dorim s construim un site *eb. cestea permit pstrarea unui aspect unitar i coerent pe tot
parcursul site"ului.
-n stil este o colecie de atribute ale te#tului i ale modului de aranjare a documentului care pot fi
aplicate n mod selectiv unui document sau doar unei pri din acesta.
(tilurile se pot aplica unui document n trei moduri:
ncapsulate " prin intermediul etic!etei L(6K8EM plasat n antetul documentului
legate " prin intermediul etic!etei L8I>XM plasat de asemenea n antetul documentului i care
face legtura cu foaia de stiluri e#tern
in!line " prin intermediul atributului stEle asociat cu diverse etic!ete 5678.
&u ajutorul stilurilor se pot obine efecte deosebite n cadrul documentelor 5678: se poate
modifica aspectul te#tului, se pot construi bare de derulare colorate, formulare colorate i altele.
=n capitolul urmtor vom discuta despre cteva elemente de grafic avansat prin intermediul
crora pagina dumneavoastr poate deveni mai interesant i mai atractiv.
Capitolul 14
0lemente de 6ra5ic, avansat,
1. (ma&ini /art*
=n mod obinuit, cnd folosim o imagine drept legtur, includem etic!eta LI79M n interiorul
etic!etei pentru linI"uri , LM. =n continuare este prezentat o alt modalitate de a folosi o imagine ca
legtur i anume crearea unei imagini !art.
Ce este o ima&ine /art*?
$ ima6ine hart, este o zon activ pe care se poate e#ecuta clicI cu mouse"ul, apsarea
diferitelor regiuni ale imaginii ducnd la desc!iderea unor documente 5678 diferite. &u alte cuvinte,
o imagine !art este o imagine mprit n regiuni, iar fiecare regiune reprezint o legtur ctre un alt
document. -n e#emplu de utilizare a imaginilor !art l constituie barele de butoane folosite n multe
site"uri ca instrumente de navigare.
Imaginile !art ofer posibilitatea de a folosi o singur imagine pentru a furniza legturi ctre mai
multe pagini. U putei imagina o imagine !art ca fiind compus din dou pri: imaginea n sine i o
!art invizibil care este aplicat peste imagine, mprind"o n regiuni. ceast !art folosete pentru
definirea regiunilor forme prestabilite: poligoane, cercuri sau dreptung!iuri. =n general, imaginile care
se preteaz la a fi folosite ca imagini !art sunt cele care conin forme geometrice care conduc la o
mprire natural a imaginii n regiuni.
=n funcie de modul cum sunt prelucrate imaginile i identificate adresele spre care indic fiecare
regiune, imaginile !art pot fi de dou tipuri:
1;. imagini de tip server
19. imagini de tip client
(ma&ini /art* pentru ser"er 8ser"er side9
$ imagine !art de tip server se caracterizeaz prin faptul c face apel la o aplicaie /un script3
de pe server care realizeaz determinarea regiunii pe care
s"a fcut clicI i ncarc documentul 5678 asociat acelei regiuni. >u este nevoie s v facei
griji n legtur cu scriptul care prelucreaz imaginea !art deoarece majoritatea serverelor au deja
instalat o astfel de aplicaie, cele mai cunoscute fiind Imagemap i 56Image.
<olosirea imaginilor !art de tip server parcurge urmtorii pai:
3D. vizitatorul face clicI pe o anumit zon a imaginii
31. coordonatele acestei zone sunt transmise serverului
3/. scriptul aflat pe server asociaz aceste coordonate cu -+8"ul unui anumit document
5678 /lista adreselor -+8 ale imaginilor asociate cu regiunile !rii se afl plasat tot pe server3
31. adresa -+8 mpreun cu coordonatele regiunii sunt trimise napoi la bro;ser care
desc!ide documentul 5678 corespunztor.
Este lesne de observat c parcurgerea tuturor acestor etape precum i interaciunea cu serverul
poate ncetini mult procesul de ncrcare a documentelor 5678 asociate regiunilor !rii. (ingurul
avantaj al folosirii imaginilor !art este faptul c funcioneaz n toate bro;serele. 6otui, deoarece
versiunile mai noi dect >etscape F.BF i Internet E#plorer F.B recunosc imaginile !art de tip client, se
va renuna treptat la folosirea imaginilor !art de tip server.
(ma&ini /art* de tip c!ient 8c!ient side9
Imaginile !art de tip client lucreaz independent de server. &nd folosim acest tip de imagini
!art plasm toate datele necesare prelucrrii !rii c!iar n corpul documentului 5678 astfel nct
bro;serul l e#ecut fr a mai fi necesar o intervenie din partea serverului.
Imaginile !art de tip client au avantaje evidente: sunt mult mai rapide, funcionarea lor este mult
simplificat, i, n plus, la trecerea cu mouse"ul peste !art, n bara de status a ferestrei bro;serului
apare adresa -+8 asociat fiecrei regiuni, ceea ce ofer informaii suplimentare vizitatorului.
Crearea unei ima&ini /art* de tip c!ient
,entru a include n documentul 5678 o !art pentru o anumit imagine se folosete etic!eta
container ?"8&C ?/"8&C. =ntre aceste etic!ete se plaseaz mai multe etic!ete ?8-08C care au
rolul de a defini coordonatele i forma regiunilor pe care dorim s le delimitm pe imagine, ca n
e#emplul urmtor:
L7, nameS%!arta%M
L+E s!apeS%rect% coordsS%#C, EC, #F, EF% !refS%-+8C%M
L+E s!apeS%polE% coordsS%#C, EC, #F, EF, q, #n, En% !refS%-+8F%M
L+E s!apeS%circle% coordsS%#, E, raza% !refS%-+8H%M
L?7,M
+egiunile definite n acest e#emplu sunt un dreptung!i, pentru care sunt specificate coordonatele
vrfurilor din stnga sus i dreapta jos, un poligon cu n vrfuri, definit prin coordonatele lor, i un cerc
definit prin coordonatele centrului i raz.
,entru a comunica bro;serului ce imagine trebuie s foloseasc pentru a crea imaginea !art se
folosete etic!eta pentru imagini ?A"FC, atributul src avnd ca valoare adresa fiierului grafic folosit.
=n plus, n cadrul etic!etei LI79M se folosete atributul usemap care are rolul de ancor /legtur
intern3. )e e#emplu, dac !arta pe care o folosim a fost definit n etic!eta L7,M cu numele
%!artaC% i folosete fiierul imagineB)gif atunci etic!eta LI79M va avea urmtoarea structur:
LI79 srcS%imagineC.gif% usemapS%R!artaC% ;idt!S%CBB% !eig!tS%CBB% borderS%B%M
=n e#emplul urmtor /E#emplul CG.C3 vom crea o imagine !art format din patru regiuni, trei
dreptung!iuri i un poligon cu patru vrfuri. ,entru a determina coordonatele vrfurilor fiecrei regiuni
am folosit 7icrosoft ,!oto Editor, dar putei folosi orice alt editor grafic. 8a plasarea cursorului
mouse"ului oriunde n cadrul imaginii, n bara de status /colul din stnga jos3 vei observa
coordonatele n pi#eli, ale punctului n care v gsii. m asociat fiecrei regiuni cte un document
5678 dintre cele create la capitolele anterioare. spectul acestei pagini este redat n <igura CG.C.
0(emplul 14. 1
L5678M
L5E)M
L6I68EMgraficaCL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%MImagini !artaL?5CML5+M
L7, nameS%!arta%M
L+E s!apeS%polE% coordsS%FD, CBD, JJ, CFF, CCC, FJ, CFG, HA% !refS%culoriC.!tml%M
L+E s!apeS%rect% coordsS%CHF, HG, FJG, G1% !refS%fonturiC.!tml%M
L+E s!apeS%rect% coordsS%CCJ, AC, FFJ, DF% !refS%listeC.!tml%M
L+E s!apeS%rect% coordsS%0C, DG, FF1, CFG% !refS%stiluriC.!tml%M
L?7,M
L5HM,entru a desc!ide cartile din imagine faceti clicI pe una dintre eleL?5HM
LI79 srcS%..?Imagini?booIsC.gif% usemapS%R!arta% ;idt!S%F0H% !eig!tS%CJF% borderS%B%M
L?'$)KM
L?5678M
2. (ma&ini animate
$ ima6ine animat, este format dintr"o serie de imagini /pentru animaie se folosete formatul
9I<3 care sunt afiate una dup cealalt crend aparena unei micri continue. E#ist multe site"uri
care ofer imagini animate pe care le putei descrca i salva pe !ard"disI pentru a le folosi n cadrul
site"ului dumneavoastr. Este suficient s desc!idei motorul de cutare pe care l folosii de obicei i s
introducei drept c!eie de cutare cuvintele %animated gifs% i vei obine un foarte mare numr de
rezultate.
vei, ns, i posibilitatea de a v crea propriile imagini animate. cest proces poate fi destul de
obositor, deoarece trebuie s creai toate imaginile care urmeaz s fac parte din procesul de animaie.
=n continuare este prezentat modul de realizare al unei animaii foarte simple, care realizeaz afiarea
liter cu liter a cuvntului >I7rIE.
<iecare secvena din cuvnt reprezint o imagine distinct, astfel c vom crea D fiiere 9I< care
vor conine secvenele: >I76IE, >I76I, >I76, >I7, >I7, >I, >, . -ltimul fiier
va conine o imagine fr nici o liter.
)eoarece imaginile sunt foarte simple am folosit pentru crearea lor utilitarul &aint, din "indos
/ 0ccessories, dar dac dorii s creai imagini mai comple#e este necesar s utilizai un editor grafic
mai performant.
)up crearea imaginilor i salvarea fiierelor cu e#tensia )gif se trece la ce"a
de"a doua etap: reunirea lor pentru a crea procesul de animaie. ceast animaie a fost realizat
cu ajutorul aplicaiei numite 9I< &onstruction (et pe care o putei gsi la adresa:
!ttp:??;;;.mind;orIs!op.com?alc!emE?
,rogramul ofer, pe lng crearea animaiei, i multe alte opiuni: crearea de butoane, bannere,
efecte de tranziie ale paginilor, etc.
=n meniul .ile al programului e#ist un 0nimation "i8ard care v va conduce pas cu pas de"a
lungul procesul de creare a animaiei. *izard"ul v va cere cteva informaii printre care ce fiiere
dorii s fac parte din procesul de animaie /n cazul nostru cele nou fiiere 9I<3, dac dorii ca
procesul s se desfoare fr oprire i care este intervalul de timp dintre dou afiri. )up ce
0nimation "i8ard a definitivat procesul de animaie nu mai avei altceva de fcut dect s salvai
fiierul astfel obinut i s"l folosii n pagina dumneavoastr. Includerea fiierului care conine
imaginea animat ntr"un document 5678 se face ca i la o imagine obinuit folosind etic!eta
LI79M.
E#emplul CG.F ilustreaz modul cum este inclus n pagin o imagine animat aspectul paginii
fiind cel din <igura CG.F.
0(emplul 14. /
L5678M
L5E)M
L6I68EMgraficaFL?6I68EM
L?5E)M
L'$)KM
L5C alignS%center%MImagini animateL?5CML5+M
L,MLI79 srcS%..?Imagini?animatie.gif%M
L?'$)KM
L?5678M
)ei imaginile animate sunt atractive i dau paginii un aspect dinamic, totui e#cesul de animaie
poate avea efecte contrare. ,rea multe imagini animate sau o animaie prea comple# pot conduce la
mrirea timpului de ncrcare a paginii. =n plus, animaia poate deveni obositoare i poate distrage
atenia vizitatorului de la coninutul paginii. U recomandm, deci, s folosii imaginile animate cu
grij i numai atunci cnd au un rol bine definit n cadrul paginii.
3. (ma&ini transparente
desea o imagine inclus ntr"o pagin arat mai bine dac are un fundal transparent. -n fundal
transparent nseamn c dei imaginea are un fundal de o anumit culoare, el nu este vizibil n pagin
deoarece fundalul paginii nlocuiete fundalul imaginii. )esigur, orice culoare din imagine poate fi
fcut transparent, dar cel mai adesea aceast te!nic se aplic asupra culorii de fundal.
)ac dorim s realizm un fundal transparent pentru o imagine trebuie s inem seama de o serie
de lucruri:
33. <undalul trebuie s aib o singur culoare i nu o combinaie de culori.
34. &uloarea de fundal nu trebuie s mai fie prezent altundeva n cadrul imaginii, deoarece
transparena se va aplica tuturor zonelor colorate cu aceeai culoare
37. Este recomandat ca fundalul paginii de *eb s aib atributul bgcolor setat n mod
e#plicit
39. <otografiile sau imaginile cu mai mult de FGA de culori nu sunt potrivite pentru a fi
transformate n imagini transparente deoarece n cadrul lor este greu de definit o singur culoare.
3;. Imaginile pe care dorim s le transformm n imagini transparente trebuie s fie n
format 9I<
=n E#emplul CG.H am folosit o imagine cu fundalul de culoare alb pe care am prelucrat"o cu
ajutorul aplicaiei 7icrosoft ,!oto Editor. >u este necesar dect s desc!idei fiierul 9I< cu imaginea
dorit, s selectai din meniul %ools opiunea +et %ransparent Color care permite alegerea i setarea
culorii pe care dorim s o facem transparent, apoi s salvai noua imagine sub un alt nume dect cea
original. Indiferent care este culoarea de fundal a paginii dumneavoastr, fundalul imaginii
transparente va avea aceeai culoare cu pagina aa cum se observ din <igura CG.H.
0(emplul 14. 1
L5678M
L5E)M
L6I68EMgraficaHL?6I68EM
L?5E)M
L'$)K bgcolorS%cEan%M
L5C alignS%center%MImagini transparenteL?5CML5+M
L)IU alignS%center%M
L5JMImaginea originalaL?5JM
LI79 srcS%..?Imagini?gold.gif%M
L5JMImaginea transparentaL?5JM
LI79 srcS%..?Imagini?goldVtr.gif%M
L?)IUM
L?'$)KM
L?5678M
,entru a verifica modul n care funcioneaz imaginea transparent pe diferite culori ale
fundalului paginii, atribuii atributului bgcolor i alte valori dect cea din e#emplu.
4. -e.umat
=n documentele *eb pot fi incluse diverse elemente avansate de grafic:
39. Imagini !art
4D. nimaie
41. Imagini transparente
$ imagine !art este o imagine care conine zone active pe care se poate efectua clicI cu mouse"
ul, fiecare zon conducnd la desc!iderea unui document 5678 diferit.
Imaginile !art sunt de dou tipuri:
4/. Imagini !art de tip server
41. Imagini !art de tip client /cele mai utilizate3
$ imagine !art de tip client se insereaz ntr"un document cu ajutorul etic!etei container
L7,M L?7,M. =n cadrul acestei etic!ete fiecare zon este definit prin intermediul etic!etei
L+EM.
Imaginile animate sunt fiiere 9I< care se includ n pagin ca orice alt imagine, folosind etic!eta
LI79M. ,entru a crea o imagine animat avei nevoie de un editor grafic, cu ajutorul cruia s creai
imaginile care vor face parte din componena animaiei i de un program special care s le reuneasc
ntr"un singur fiier 9I<.
Imaginile transparente sunt imagini la care una dintre culori /cel mai adesea culoarea de fundal3
este transformat n culoare transparent, astfel nct la includerea ei ntr"o pagin *eb fundalul
imaginii se va confunda cu fundalul paginii.
Capitolul 17
"otoare de c,utare $i metata6*uri
1. Ce este un motor de c*utare?
)ac avei o minim e#perien n navigarea pe *eb v"ai ntlnit, fr ndoial cu motoarele de
cutare. "otoarele de c,utare sunt aplicaii plasate pe servere deosebit de puternice, care conin baze
de date imense i care au drept scop cercetarea i inde#area sutelor de milioane de pagini *eb
e#istente. -tilitatea motoarelor de cutare este evident: fr ele ar fi aproape imposibil s gsim
informaiile care ne intereseaz n oceanul de informaii care este *eb"ul.
7otoarele de cutare conin un formular de tip cmp de editare n care utilizatorul introduce unul
sau mai multe cuvinte folosite drept cheie de c,utare. +ezultatele sunt furnizate sub forma unei liste de
pagini *eb care conin cuvintele c!eie introduse. Inde#area unei pagini de ctre un motor de cutare
nseamn asocierea cuvintelor c!eie cu coninutul informaional al acesteia. &ele mai folosite motoare
de cutare sunt, n acest moment, 9oogle, Ka!ooN, 8Ecos, 9o.com i E#cite.
7otoarele de cutare au drept scop inde#area tuturor paginilor e#istente pe *eb, dar, evident,
acest lucru este imposibil. $rict de performante ar fi programele cu care lucreaz, numrul de site"uri
care sunt publicate n permanen pe *eb depete posibilitile acestora. cesta este motivul pentru
care simpla postare a unui site pe *eb nu garanteaz ctui de puin c acesta va avea vizitatori.
)escoperirea lui de ctre motoarele de cutare poate dura ntre ase luni i un an. 6ocmai de aceea nu
trebuie s ateptai ca site"ul dumneavoastr s fie descoperit, ci trebuie s"l promovai activ, una dintre
metode fiind nscrierea lui n bazele de date ale motoarelor de cutare.
E#ist dou tipuri principale de motoare de cutare, care se bazeaz pe moduri diferite de a face
inde#area paginilor:
7otoarele de cutare de tip %pianjen% care realizeaz inde#area automat, pe baza cuvintelor
c!eie prezente n antetul documentelor 5678 /de e#emplu 9oogle3. cest tip de motoare folosesc
algoritmi e#trem de performani, care cerceteaz i inde#eaz milioane de pagini pe zi.
7otoarele de cutare care fac inde#area pe baza cuvintelor c!eie furnizate de creatorul paginii, la
nscrierea acesteia n baza de date a aplicaiei /de e#emplu Ka!ooN3. =nscrierea n baza de date se face
personal, de ctre autorul site"ului, iar evaluarea site"ului se face de ctre personal uman.
,entru a face mai eficient inde#area paginilor de ctre motoarele de tip %pianjen% limbajul
5678 include o categorie special de etic!ete numite metatag"uri.
2. Metata&-uri
"etata6*urile sunt o categorie special de etic!ete care sunt plasate n antetul documentului
5678 /n blocul L5E)M3. &a i celelalte elemente incluse n antetul documentului, cu e#cepia
titlului documentului, metatag"urile nu sunt vizibile pentru vizitatorul paginii.
,rimul metatag despre care vom vorbi este deja cunoscut i l"ai folosit de foarte multe ori pn
acum: este metatagul ?!A!#0C. (e utilizeaz conform sinta#ei:
L6I68EM6itlul paginii *ebL?6I68EM.
)up cum ai observat din e#emplele de pn acum, titlul paginii apare n bara de titlu a ferestrei
bro;serului.
7ulte dintre motoarele de cutare afieaz n lista de rezultate i titlul paginilor pe lng adresele
-+8. 6itlul paginii este informaia care l determin pe vizitator s intre sau nu pe pagina
dumneavoastr. 6itlul trebuie s fie o propoziie care s atrag atenia i n acelai timp s conin
informaiile eseniale privind subiectul i coninutul paginii.
&elelalte metatag"uri se introduc prin intermediul etic!etei ?"0!8C care nu este o etic!et
container. Etic!eta L7E6M admite o serie de atribute care ofer motoarelor de cutare diverse
informaii care s ajute la inde#area paginii. lte atribute ofer informaii bro;serului privind data de
e#pirare a documentului sau specific perioada de timp dup care documentul este rencrcat n mod
automat.
E#ist dou categorii de metatag"uri:
C. metatag"urile name
C. metatag"urile !ttp"eTuiv
Metata&-uri!e :name:
&ele mai folosite metatag"uri sunt cele care se refer la cuvintele c!eie care caracterizeaz pagina
i coninutul ei, oferind astfel informaii motoarelor de cutare. cestea sunt:
%IeE;ords%
%description%
%robots%
"etata6*ul :EeLwords:
7etatag"ul %IeE;ords% se introduce conform urmtoarei sinta#e:
L7E6 nameS%IeE;ords% contentS%lista cuvinte c!eie%M
8ista cuvintelor c!eie trebuie s includ toate cuvintele pe care considerai c le"ar putea
introduce un vizitator ca c!eie de cutare pentru a descoperi pagina dumneavoastr. &uvintele se scriu
desprite prin virgul, fr spaii intre ele. ,e lng cuvintele c!eie, putei folosi i combinaii de
cuvinte. )e e#emplu ntr"o pagin care ofer informaii despre crearea de pagini *eb i ;eb design,
cuvintele c!eie ar putea fi urmtoarele:
L7E6 nameS%IeE;ords% contentS%*eb design, creare pagini *eb, construire site, *eb site
design%M
9sirea cuvintelor i combinaiilor de cuvinte c!eie este o etap care trebuie tratat cu atenie.
,entru a aduce pagina dumneavoastr n atenia acelor vizitatori pentru care este ea conceput,
cuvintele c!eie trebuie alese cu atenie i ele trebuie s reflecte e#act elementele de coninut definitorii
ale paginii.
-nii dintre creatorii de pagini *eb care doresc s obin o poziionare mai bun n lista de
rezultate furnizate de motoarele de cutare folosesc n mod abuziv cuvintele c!eie, repetnd acelai
cuvnt sau combinaii de cuvinte de un numr foarte mare de ori sau folosind cuvinte c!eie care nu au
legtur cu subiectul paginii. &a urmare a acestor ncercri de %pclire% a motoarelor de cutare, au
fost dezvoltai algoritmi performani care identific tentativele de fraud i care se soldeaz fie cu
scderea cotaiei paginilor respective, fie c!iar cu eliminarea lor din baza de date a motorului de
cutare.
"etata6*ul :description:
7etatag"ul n cadrul cruia se realizeaz descrierea paginii este, de asemenea foarte important
pentru succesul acesteia. &a i cel anterior, se introduce n antetul documentului conform urmtoarei
sinta#e:
L7E6 nameS%description% contentS%descrierea subiectului paginii%M
7ulte motoare de cutare includ n lista de rezultate pe lng -+8"ul i titlul paginii i descrierea
ei. ,entru a face descrierea paginii dumneavoastr este bine s folosii combinaii de cuvinte c!eie,
reunite n fraze atractive i convingtoare. <ii concis n descriere i plasai informaiile eseniale la
nceput deoarece este posibil ca descrierile prea lungi s fie trunc!iate. &a i n cazul alegerii cuvintelor
c!eie, acordai o atenie deosebit formulrii unei descrieri ct mai potrivite i inei seama c aceasta
poate fi singura dumneavoastr ans de a"l convinge pe utilizator s desc!id pagina pe care ai creat"
o. )escrierea unei pagini poate arta astfel:
L7E6 nameS%description% contentS%6utorial de *eb design care va initiaza pas cu pas in
procesul de construire al unui site *eb. Invatati sa concepeti, sa creati si sa promovati propriul
dumneavoastra site.%M
,e lng metatag"ul care face descrierea paginii este recomandat introducerea, la nceputul
paginii, a unui comentariu n cadrul cruia s inserai descrierea. cest lucru este util deoarece e#ist
motoare de cutare care ignor metatag"urile i preiau primele cuvinte pe care le gsesc n pagin. )ac
ai reuit s formulai o descriere sugestiv i convingtoare, o putei folosi c!iar ca fraz de nceput n
partea vizibil a paginii.
"etata6*ul :robots:
(unt situaii cnd creatorul paginii *eb dorete ca anumite pagini s fie e#cluse de la inde#area
de ctre motoarele de cutare. )e e#emplu dac ai publicat site"ul pe *eb nainte de a fi terminat /dei
acest lucru este nerecomandat3 sau dac dorii s reactualizai coninutul anumitor pagini i dorii ca
pn la finalizarea modificrilor paginile s nu fie accesate de motoarele de cutare, putei folosi n
antetul paginilor respective metatag"ul %robots% astfel:
L7E6 nameS%robots% contentS%noinde#, nofollo;%M
ceast construcie comunic motoarelor de cutare s nu inde#eze pagina i n acelai timp s nu
urmeze nici una dintre legturile incluse n ea. tributul content poate lua urmtoarele valori:
all " permite inde#area tuturor paginilor
none " nu permite inde#area nici unei pagini i nici urmarea legturilor din cadrul lor
inde# " permite inde#area paginii
follo; " permite urmarea legturilor din pagin
noinde# " nu permite inde#area paginii
nofollo; " nu permite urmarea legturilor din cadrul paginii
lte metatag"uri name utilizate sunt:
L7E6 nameS%aut!or% contentS%numeVautor%M
,ermite specificarea numelui autorului paginii
L7E6 nameS%copErig!t% contentS%drepturi copErig!t%M
,ermite specificarea drepturilor de autor
L7E6 nameS%generator% contentS%numeV aplicatie%M
(pecific aplicaia cu care a fost creat pagina.
E#emplu:
L7E6 nameS%generator% contentS%7icrosoft <ront,age H.B%M
Metata&-uri!e 2http*eVuiv2
,e lng metatag"urile name care ofer informaii motoarelor de cutare, e#ist metatag"urile
!ttp"eTuiv care ofer informaii bro;serului privind documentul pe care urmeaz s"l desc!id. Iat n
continuare o list a acestor metatag"uri mpreun cu funciile fiecruia dintre ele.
!abel 17. 1
Etic!eta 2unc)ia
L7E6 !ttp"
eTuivS%&ontent"6Epe%
contentS%te#t?!tml] c!arsetSiso"
00GD"C%M
cest tip de metatag"uri sunt
ec!ivalente cu !eaderele 566,. Ele
comunic bro;serului care este tipul
paginii i cum s o afieze precum i
setul de caractere folosit /opional3
L7E6 !ttp"
eTuivS%&ontent"(cript"6Epe%
contentS%te#t?javascript%M
(pecific limbajul de script
folosit n document
L7E6 !ttp"
eTuivS%&ontent"(tEle"6Epe%
contentS%te#t?css%M
(pecific limbajul de foi de
stiluri folosit n document
L7E6 !ttp"
eTuivS%e#pires% contentS%dataV
e#pirariiM
,ermite precizarea datei la care
documentul poate fi considerat
e#pirat
L7E6 !ttp"eTuivS%refres!%
contentS%nrV secunde%M
L7E6 !ttp"eTuivS%refres!%
contentS%nr secunde]
urlSadresaVnoua%M
(pecific numrul de secunde
dup care pagina este rencrcat
automat de ctre bro;ser. tributul
content poate conine, opional, i
adresa -+8 a altei pagini care se va
ncrca n locul paginii curente.
ceast opiune este util cnd dorii
redirectarea vizitatorului ctre alt
pagin.
E#emplu:
L7E6 !ttp"eTuivS%refres!%
contentS%G]
urlS!ttp:??;;;.nouapagina.com%M
)up cum observai, metatag"urile de tip !ttp"eTuiv sunt folosite pentru a transmite bro;serului
diverse informaii privind documentul 5678. )in aceast categorie face parte i metatag"ul care
permite specificarea modului de tranziie ntre pagini:
L7E6 !ttp"eTuivS%,age"Enter% contentS%+eveal6rans/)urationSnrVsecunde,
6ransitionScodVtranzitie3%M
L7E6 !ttp"eTuivS%,age"E#it% contentS%+eveal6rans/)urationSnrVsecunde,
6ransitionScodVtranzitie3%M
unde: nrVsecunde reprezint durata tranziiei n secunde iar codVtranzitie poate fi unul dintre
codurile de mai jos. <iecare dintre ele realizeaz tranziia paginii n alt mod.
!abel 17. /
Cod de
tran.i)ie
Cum se 5ace tran.i)ia
B
)reptung!i care se
nc!ide
C
)reptung!i care se
desc!ide
F &erc care se nc!ide
H &erc care se desc!ide
J )e jos n sus
G )e sus n jos
A )e la stnga la dreapta
1 )e la dreapta la stnga
0
)ungi care se
deplaseaz spre dreapta
D
)ungi care se
deplaseaz n jos
CB
)reptung!iuri care se
deplaseaz spre dreapta
CC
)reptung!iuri care se
deplaseaz n jos
CF
,i#eli care %dizolv%
pagina
CH
&ortin care se nc!ide
orizontal
CJ
&ortin care se
desc!ide orizontal
CG
&ortin care se nc!ide
vertical
E#emplul CA.C ilustreaz funcionarea acestui metatag. ,utei observa modul de tranziie dintre
pagini din <igura CA.C.
0(emplul 17. 1
L5678M
L5E)M
L6I68EMmetaCL?6I68EM
L7E6 !ttp"eTuivS%page"enter% contentS%+eveal6rans/durationSG, transitionSB%M
L7E6 !ttp"eTuivS%page"e#it% contentS%+eveal6rans/durationSG, transitionSC%M
L?5E)M
L'$)K bgcolorS%red%M
L5C alignS%center%M6ranzitia intre paginiL?5CML5+M
,entru a observa modul de tranzitie apasati L !refS%metaF.!tml%MaiciL?M
L?'$)KM
L?5678M
,utei sc!imba codurile dup cum dorii pentru a observa i alte moduri de tranziie.
)ocumentul meta>)html creat n E#emplul CA.F servete doar pentru a e#emplifica modul n care
se face tranziia pentru intrarea n pagin.
0(emplul 17. /
L5678M
L5E)M
L6I68EMmetaFL?6I68EM
L?5E)M
L'$)K bgcolorS%Eello;%M
L5HM,entru a reveni la pagina anterioara apasati butonul 'acI al bro;seruluiL?5HM
L?'$)KM
L?5678M
8ten)ieM
m precizat c metatag"urile sunt incluse n antetul documentului 5678. tunci cnd folosii
cadre n paginile dumneavoastr nu uitai s plasai metatag"urile n blocul L5E)M al tuturor
documentelor care se desc!id n cadre i nu numai n documentul de definire a cadrelor
L<+7E(E6M.
3. -e.umat
7otoarele de cutare sunt aplicaii foarte puternice care au drept scop inde#area i adugarea n
baza lor de date a sutelor de milioane de pagini *eb e#istente.
,entru a facilita inde#area paginii de ctre motoarele de cutare, n antetul documentului 5678
se includ nite elemente speciale numite metatag"uri, prin intermediul etic!etei L7E6M.
&ele mai importante metatag"uri sunt cele care furnizeaz motoarelor de cutare lista de cuvinte
c!eie asociat paginii i descrierea acesteia /metatag"urile %IeE;ords% i %description% 3, precum i cel
care interzice inde#area paginilor /metatag"ul %robots% 3.
lte metatag"uri furnizeaz informaii bro;serului privind tipul paginii, intervalul de timp dup
care pagina este rencrcat automat, momentul e#pirrii, autorul, programul cu care a fost construit,
etc.
Crearea $i publicarea unui site web
m studiat pn acum elementele fundamentale ale limbajului 5678 inclusiv modul n care
acesta poate fi e#tins prin folosirea scripturilor &9I, a scripturilor :ava(cript i a foilor de stiluri. vei
la ndemn acum instrumentele necesare pentru a crea propriul dumneavoastr site *eb. )ar este oare
suficient4 +spunsul este nu.
,entru a crea un site *eb de calitate, care s comunice informaiile n mod logic i atractiv i care
s atrag vizitatori permaneni, cunoaterea limbajului 5678 nu este suficient. =nainte de a ncepe
scrierea codului 5678 pentru paginile dumneavoastr trebuie s parcurgei alte dou etape importante:
planificarea site"ului i stabilirea elementelor de *eb design. )up ce ai finalizat documentele 5678
care vor face parte din site trebuie s testai funcionarea linI"urilor i aspectul paginilor n diferite
bro;sere. .i, n fine, dup ce toate aceste etape au fost parcurse, urmeaz publicarea site"ului pe un
server *eb care s"l fac accesibil tuturor celor care navig!eaz pe *eb.
=n cele ce urmeaz vom discuta despre etapele care preced construirea documentelor 5678 care
vor forma site"ul i despre cele care urmeaz dup ce codul 5678 al paginilor a fost definitivat.
Capitolul 19
&lani5icarea site*ului
&lani5icarea este un aspect crucial n procesul de creare a unui site *eb, deoarece este etapa n
care se iau decizii care vor influena designul, implementarea i, mai trziu, promovarea site"ului.
*orld *ide *eb fiind un mediu desc!is i dinamic, planificarea este mai degrab un proces continuu
n care intervin sc!imbri determinate de nnoirea permanent a informaiilor i de apariia altora noi.
tunci cnd creai un site *eb trebuie s fii contient c e#ist o serie de factori asupra crora
creatorul site"ului nu are nici un control. ,rimul pas n procesul de planificare este identificarea acestor
factori i determinarea modului n care acetia pot afecta structura viitoare a site"ului dumneavoastr.
1. 0actori care nu pot 'i p!ani'icai
<actorii pe care creatorul site"ului nu i poate controla i prin urmare nu pot face obiectul unei
planificri riguroase sunt urmtorii:
Comportamentu! uti!i.atoru!ui.
cest factor implic faptul c nu putei controla cum va accesa utilizatorul informaiile din site"ul
dumneavoastr. *eb"ul este un sistem permeabil, aceasta nsemnnd c un vizitator poate intra n
interiorul site"ului nu numai prin pagina de nceput /pagina !ome3 ci i printr"o pagin oarecare.
Uizitatorul site"ului poate ajunge la el parcurgnd o list de rezultate furnizat de un motor de cutare,
sau prin intermediul unui linI aflat pe un alt site, sau parcurgnd o list de resurse. $ricare dintre aceste
metode l poate conduce pe vizitator la o alt pagin din interiorul site"ului, i nu la cea destinat de
dumneavoastr a fi pagina 5ome.
=n general, creatorul site"ului este tentat s structureze site"ul avnd n minte un anumit tip de
acces, cel mai adesea cel care pleac de la pagina de start, ceea ce conduce la alegerea unei anumite
structuri, la o anumit organizare a legturilor ntre pagini, etc. 6rebuie s avei permanent n vedere
faptul c vizitatorul site"ului poate avea un cu totul alt mod de a parcurge site"ul dect cel gndit de
dumneavoastr i s"i furnizai de"a lungul ntregului site elemente de navigaie clare care s"l ajute s
se orienteze.
$ro%seru! uti!i.atoru!ui.
a cum am mai discutat, e#ist o mare varietate de bro;sere folosite pentru a vizualiza paginile
*eb. ,rin urmare, vizitatorii site"ului vor percepe o imagine diferit a site"ului dumneavoastr, n
funcie de tipul de bro;ser folosit. &reatorul site"ului nu poate ti ce tip de bro;ser folosete un anumit
vizitator i deci nu are control asupra modului n care va fi afiat coninutul paginilor sale. )e e#emplu,
mai e#ist nc utilizatori care folosesc versiuni vec!i de >etscape sau E#plorer, care nu suport
anumite e#tensii 5678. E#ist de asemenea nc n uz bro;sere te#t, cum este 8En#, care nu suport
grafica. )ac vei plasa informaii eseniale n fiiere grafice, de e#emplu, aceti utilizatori nu vor avea
acces la ele.
)in acest motiv este bine s stabilii de la nceput care dorii s fie nivelul de accesibilitate al site"
ului dumneavoastr din acest punct de vedere. -n alt aspect este nelegerea faptului c 5678 este un
limbaj care este destinat definirii structurii documentului i nu al modului su de afiare. Este
recomandat s evitai specificarea n detaliu a aspectului paginilor sau optimizarea paginilor pentru un
anumit tip de bro;ser.
Le&*turi!e cu pa&ini externe.
=ntr"un site *eb e#ist de obicei legturi ctre resurse e#terioare site"ului care sunt i ele n afara
controlului dumneavoastr. ,aginile referite prin aceste legturi i pot sc!imba adresele, fcnd astfel
ca legtura s nu mai fie valabil /legturi perimate3. )e asemenea pot e#ista legturi rupte, n cazul
cnd serverul pe care este gzduit pagina respectiv are anumite dificulti te!nice. rinnd seama de
imposibilitatea de a controla acest aspect, pot fi adoptate mai multe metode de abordare:
(ite"ul s nu conin nici o legtur e#tern sau care s se afle n afara controlului direct
al designerului. Este metoda cea mai sigur. )in pcate, aceast strategie anuleaz posibilitatea ca
vizitatorul s beneficieze de informaii cone#e cu subiectul site"ului dumneavoastr aflate n
e#teriorul su.
&entralizarea resurselor. Este o practic des ntlnit pe *eb, aceea de a include toate
legturile e#terne ntr"o pagin special destinat acestora. 'eneficiul acestei strategii este c n
cazul cnd una dintre aceste legturi e#terne nu mai funcioneaz, vizitatorul se poate cu uurin
rentoarce la pagina de resurse pentru a testa urmtorul linI. =n plus, cu unele e#cepii, vizitatorii
vor parcurge cel puin o parte a site"ului nainte de a ajunge la pagina de legturi e#terne i a"l
prsi, eventual, definitiv.
Ieirea liber. Este cea mai fle#ibil abordare, permind plasarea legturilor e#terne
oriunde n cadrul paginilor. )ezavantajul ei major este c vizitatorul poate prsi prematur site"ul
pentru a urma un anumit linI.
)ac nu avei control asupra legturilor de la site ctre e#terior, este tot att de adevrat c nu
putei controla nici legturile care se fac din e#terior ctre site. cest lucru poate fi dezavantajos,
deoarece nu putei ti n ce mod este prezentat legtura ctre site"ul dumneavoastr. ,oate c referirea
la el este ironic sau ruvoitoare, ns acest lucru este dincolo de controlul dumneavoastr. 6ot ceea ce
putei face este s creai un site de calitate i cu un coninut valoros, care s conving prin el nsui.
&u toate c elementele prezentate mai sus pot prea descurajante, unele dintre ele prezint totui
i avantaje. stfel, permeabilitatea *eb"ului poate lucra n favoarea designerului, cu condiia ca acesta
s structureze atent informaiile prezentate i s ofere suficiente elemente de navigaie. $ pagin sau un
grup de pagini din cadrul unui site pot fi folosite ca referine n alte pagini sau c!iar ca elemente
constitutive ale unui alt site. )e e#emplu, un site de tip mono"pagin care face prezentarea unui manual
de 5678 poate fi folosit ca pagin individual ntr"un site de librrie electronic, sau poate constitui o
legtur util din interiorul unui site de design *eb, mrind astfel ansele ca pagina respectiv s fie
accesat de vizitatori printr"unul dintre aceste puncte.
2. #tape!e p!ani'ic*rii site-u!ui
,rocesul de planificare a unui site trebuie s parcurg urmtoarele etape:
(tabilirea audien)ei
(tabilirea scopului
)efinirea obiectivelor
&olectarea in5orma)iilor despre subiectul prezentat
(tabilirea speci5ica)iilor
(tabilirea modului de pre.entare
1udiena
,entru a crea un site de calitate i o comunicare eficient a informaiilor, o etap deosebit de
important este definirea audienei site"ului. udiena reprezint publicul cruia i se adreseaz site"ul.
(tabilirea audienei site"ului dumneavoastr este esenial deoarece contribuie la definirea coninutului
paginilor, precum i a organizrii i aspectului su. -n site *eb creat pe baza unor informaii precise
asupra audienei sale actuale i viitoare are mult mai multe anse de succes dect unul care nu se
adreseaz unui public specific.
(tabilirea audienei unui site implic doi pai:
)efinirea publicului int.
6rebuie s stabilii cui se adreseaz site"ul dumneavoastr. ,utei, de e#emplu s v adresai
%persoanelor care studiaz c!imia%. )ei este un enun care definete ntr"o oarecare msur audiena
site"ului, este de dorit ca definirea audienei s fie mai precis dect att. U putei adresa de pild,
specialitilor n c!imie, i atunci informaiile vor avea un nalt grad de specializare i un nivel tiinific
ridicat sau v putei adresa elevilor de liceu interesai de studiul c!imiei, sau care vor da e#amene la
aceast disciplin. =n acest caz informaiile vor fi de nivel mai general, legate de programa colar i de
tipurile de subiecte cu care elevii se vor confrunta la e#amene.
)ac, de e#emplu, dorii s creai un site comercial, stabilirea segmentului de pia cruia v
adresai este la fel de important. )ac intenionai s vindei produse cosmetice v vei adresa probabil
femeilor. )ar aceasta este o reprezentare mult prea general a publicului dumneavoastr. i putea s
fii mai specific, stabilindu"v drept segment de pia femeile cu vrsta mai mic de FG de ani. =n
aceast situaie este mai probabil c vor avea succes produsele de nfrumuseare mai ndrznee, n
vreme ce, dac v adresai femeilor de vrst medie, cele mai bine vndute vor fi produsele de
ntreinere, cremele anti"rid, etc.
&oncluzia care se impune este c definirea ct mai precis a audienei este definitorie pentru toate
etapele ulterioare ale elaborrii site"ului. &u ct mai bine definit este audiena, cu att ansele de a
crea un site de succes sunt mai mari.
)efinirea informaiilor necesare care privesc publicul int.
>u toate informaiile despre publicul int sunt eseniale n elaborarea site"ului. )ac intenionai
s v adresai specialitilor n c!imie, care anume caracteristici ale acestora sunt importante pentru
dumneavoastr4 >ivelul de educaie4 ria de specializare4 &aracteristici personale, precum nlimea
i greutatea4 Evident, e#ceptnd cazul n care intenionai s vindei prin intermediul site"ului
ec!ipament de laborator, ultimele informaii sunt inutile. ,rin urmare este necesar s identificai
informaiile relevante privitoare la audiena site"ului dumneavoastr.
Scopu!
(tabilirea scopului site"ului este etapa n care trebuie s rspundei la ntrebarea %de ce?%. )e ce
dorii s creai acest site4 )efiniia scopului site"ului reprezint tema conductoare n procesul de
construire a acestuia. -n site fr un scop clar i bine definit lanseaz un mesaj neconvingtor i ceos.
Uizitatorul se va ntreba, fr ndoial, %8a ce servete acest site4% i se va grbi s"l prseasc.
,entru a defini scopul site"ului trebuie s avei n vedere urmtoarele elemente:
ria de cuprindere a subiectului. ( presupunem c dorii s creai un site care s
conin informaii despre muzica rocI a anilor @AB. =ntr"o asemenea situaie, nu vei defini drept
subiect al site"ului muzica rocI n ansamblu, deoarece o definire att de vast depete cu mult
aria de cuprindere a subiectului dumneavoastr.
udiena. =n scopul site"ului trebuie s facei referire i la audiena stabilita anterior.
stfel, scopul site"ului ar putea fi definit n maniera urmtoare: %(ite"ul ofer informaii iubitorilor
muzicii rocI a anilor @AB, de vrst medie%.
>ivelul de detaliere a subiectului. 6rebuie s specificai dac v referii doar la grupurile
rocI reprezentative sau dorii s facei o istorie complet a perioadei.
'eneficiul sau avantajul vizitatorului. &e are de ctigat o persoan care viziteaz site"
ului dumneavoastr4 ,oate afla informaii inedite despre formaiile preferate, sau poate fi informat
cu privire la evoluia lor ulterioar.
(tabilirea scopului site"ului determin deciziile ulterioare ale designerului privind mesajul pe care
l transmite site"ul. -n scop bine articulat servete ca jalon pentru toate celelalte etape ale procesului de
planificare i creare a site"ului. (copul site"ului poate reprezenta c!iar prima informaie care le este
oferit vizitatorilor, la intrarea pe prima pagin.
D<iecti"e!e
)up ce ai stabilit audiena site"ului, care sunt informaiile privitoare la publicul int, precum i
scopul su, pasul urmtor const n combinarea tuturor acestor informaii i formularea unor obiective
specifice ale site"ului dumneavoastr. $biectivele reprezint o detaliere a scopului general al site"ului,
coninnd informaiile specifice care vor conduce la ndeplinirea scopului pentru care a fost creat site"
ul. )e e#emplu, dac scopul unui site este %s ofere informaii despre oraul ggg% , acesta poate fi dus
la ndeplinire prin intermediul unor obiective specifice i variate cum ar fi: informaii despre aezarea
geografic a oraului, despre dezvoltarea economic, despre viaa cultural, obiective turistice, etc. &u
alte cuvinte, n vreme ce scopul site"ului comunic ce avei de gnd s facei, obiectivele comunic ce
informaii vei oferi pentru a v ndeplini scopul propus.
(pre deosebire de scopul site"ului, obiectivele se pot modifica n timp, pe msur ce apar noi
informaii despre publicul int sau despre subiectul site"ului, cu ajutorul crora putei susine mai bine
scopul su.
Co!ectarea in'ormaii!or despre su<iect
Informaiile referitoare la subiectul site"ului includ att informaiile on!line ct i sursele clasice
de informaii. =n aceast etap vei colecta nu numai informaii legate de subiectul site"ului care vor fi
prezentate utilizatorului ci i informaiile i cunotinele de care avei nevoie pentru realizarea site"ului.
,aii necesari n construirea coleciei de informaii necesare sunt:
(tabilirea informaiilor necesare, att cele pe care le vei furniza vizitatorului ct i cele
care v sunt necesare dumneavoastr
)eterminarea modului cum vei obine aceste informaii. =n aceast etap trebuie s
identificai sursele de documentare. Informaiile despre subiectul ales le putei gsi pe *eb, n
literatura de specialitate, n diverse baze de date.
7odul de reactualizare a informaiilor. )ac informaiile pe care dorii s le prezentai
sunt dinamice i se perimeaz cu repeziciune, trebuie s stabilii cum intenionai s le actualizai i
care este intervalul de timp ntre dou reactualizri. )e e#emplu, dac intenionai s creai un site
care s prezinte tiri sau date despre vreme, ele vor trebui reactualizate zilnic sau c!iar mai
frecvent. )ac site"ul prezint informaii despre istorie, evident c informaiile vor fi reactualizate
mult mai rar, eventual la apariia unor noi descoperiri ar!eologice, de e#emplu.
Speci'icaii!e
(tabilirea specificaiilor pentru un site reprezint o detaliere a obiectivelor sale i definirea unor
cerine sau a unor restricii. (pecificaiile descriu n detaliu ce informaii vor fi oferite n paginile site"
ului i cum vor fi ele prezentate. )e e#emplu, dac unul dintre obiectivele unui site este %furnizarea de
legturi ctre surse bibliografice referitoare la subiect% , atunci specificaiile vor preciza care sunt
aceste surse bibliografice, care sunt adresele lor -+8, cte astfel de adrese vor fi incluse ntr"o pagin,
etc.
(pecificaiile trebuie s identifice toate resursele necesare atingerii obiectivelor: linI"uri, fiiere
grafice, fiiere de sunet sau video, alte elemente care vor fi incluse n site: formulare, imagini !art,
scripturi. )e asemenea, n cadrul specificaiilor trebuie stabilite i elementele care nu vor fi incluse n
pagini /dac este cazul3. )e e#emplu, se poate specifica s nu fie folosite anumite e#tensii 5678, sau
formulare, fiiere care s depeasc anumite dimensiuni, etc.
Modu! de pre.entare
,lanificarea modului de prezentare implic o serie de decizii care vor servi drept puncte de reper
n etapa de construire efectiv a site"ului. ceast etap poate include:
&rearea unor template"uri pentru site
&rearea unor mostre de documente 5678, imagini !art, sau formulare
Ealonarea n timp a etapelor de creare a site"ului
3. -e.umat
,rima etap a procesului de construire a unui site este planificarea. =n aceast etap trebuie
identificai factorii care nu pot fi controlai printre care se numr: comportamentul utilizatorului,
bro;serul cu care va fi vizualizat pagina i legturile cu pagini e#terne.
,lanificarea site"ului parcurge urmtoarele etape:
(tabilirea audienei site"ului
(tabilirea scopului site"ului
)efinirea obiectivelor site"ului
&olectarea informaiilor despre subiectul prezentat
(tabilirea specificaiilor site"ului
(tabilirea modului de prezentare a site"ului
-n site de calitate, care s ofere informaii valoroase n mod atractiv i s permit o comunicare
eficient a acestora nu se nate n mod ntmpltor. <r a avea o privire de ansamblu asupra aspectelor
stabilite n faza de planificare, ansele de a realiza un site de bun calitate sunt minime. )ac vei
ncepe s scriei direct codul 5678 fr s trecei prin etapa de planificare vei obine doar o
ngrmdire de pagini fr coeren, adesea defectuos legate ntre ele, cu un coninut neclar i slab
structurat.
Capitolul 1;
@esi6nul site*ului
$dat parcurs etapa de planificare, avnd clare audiena, scopul, obiectivele i specificaiile site"
ului, putei trece la etapa de creare efectiv. ,entru ca site"ul dumneavoastr s aib un aspect plcut, o
bun organizare, instrumente de navigare eficiente trebuie s cunoatei i s aplicai regulile
fundamentale de *eb design.
&nd suntei n faza de concepere a designului principalul dumneavoastr obiectiv este s creai
un aspect atractiv i s oferii vizitatorului site"ului un sentiment de satisfacie, pe msur ce acesta
parcurge paginile. )esignul unui site trebuie s ec!ilibreze performanele bro;serului, cu estetica i
funcionalitatea site"ului. =n etapa de design sunt luate deciziile de ordin practic care vor conduce la
ndeplinirea obiectivelor stabilite: cte imagini sau elemente grafice vei include n pagin, ct de mult
te#t vor conine paginile, ce te#te sau imagini vor fi folosite drept legturi.
1. :rincipii!e desi&nu!ui %e<
,entru a lua deciziile corecte n ceea ce privete designul unui site trebuie s avei n vedere
cteva principii de baz:
8socierea semni5ica)iilor. <olosii"v de puterea !Eperte#tului pentru a stabili legturi ntre
informaiile nrudite ca semnificaie.
"en)inerea competitivit,)ii. )eoarece *eb"ul este un mediu foarte competitiv, asigurai"v c
designul site"ului se menine la cel mai sczut cost posibil, din punctul de vedere al vizitatorului. cest
cost include timpul de ncrcare al paginilor, aplicaiile suplimentare necesare pentru vizualizarea
optim a paginilor precum i efortul depus de vizitator pentru a nelege informaiile prezentate.
2olosirea e5icient, a resurselor. legei pentru site"ul dumneavoastr acele elemente care vin n
ntmpinarea necesitilor utilizatorului, i sunt ct mai eficiente posibil din punctul de vedere al
dimensiunii fiierelor, al timpului de acces i al ntreinerii ulterioare.
Concentrarea pe necesit,)ile utili.atorului. cesta este, poate, cel mai important principiu de
*eb design i, parado#al, cel mai adesea ignorat. -n site *eb nu se construiete pentru a satisface
gustul designerului /sau al clientului pentru care lucreaz3 i nici pentru a etala cunotinele sale vaste
asupra celor mai noi te!nici de programare *eb, ci pentru a veni n ntmpinarea nevoii de informaii a
vizitatorilor si. <ocalizarea asupra utilizatorului este prioritatea principal a unui site de calitate.
Wn)ele6erea permeabilit,)ii. cest principiu se refer la nelegerea i asumarea faptului c
vizitatorul poate accesa un site prin oricare pagin a sa. )in acest motiv este de dorit ca informaiile din
cadrul unei pagini s se auto"susin fr a depinde de informaiile din restul site"ului. )ac acest lucru
nu este posibil, este obligatorie prezena unor instrumente de navigaie eficiente care s permit
vizitatorului orientarea cu uurin n interiorul site"ului.
Crearea unui aspect pl,cutT coerent $i 5luent. ,aginile site"ului trebuie s ofere impresia unui
tot bine organizat, elementele vizuale /icon"uri, elemente de navigare3 trebuie s fie coerente pe tot
parcursul site"ului, fiecare pagin trebuie s conin indicii asupra identitii site"ului i asupra scopului
ei.
'us)inerea interactivit,)ii. &!iar dac nu folosii formulare care asigur un grad nalt de
interactivitate cu vizitatorii site"ului, este obligatorie prezena unor informaii de contact /adresa de
mail a *ebmaster"ului, cel puin3 astfel nct utilizatorii s poat obine informaii suplimentare sau s
poat comunica eventualele probleme aprute la parcurgerea site"ului.
'us)inerea navi6a)iei. sigurarea unor instrumente de navigaie eficiente este una dintre
condiiile eseniale ale unui site de calitate. (e spune c un site bun este acela n care vizitatorul nu este
niciodat obligat s apese butonul 'acI al bro;serului.
2. Dr&ani.area unui site
'una organizare a site"ului este unul dintre elementele c!eie ale succesului su. 7odul de
organizare depinde de scopul, obiectivele i subiectul site"ului i se bazeaz pe principiile de design
enunate mai sus.
=n funcie de structura lor, site"urile se mpart n mai multe categorii:
site"uri liniare, formate dintr"o singur pagin /mono"pagin3
site"uri liniare formate din mai multe pagini /multi"pagin3
site"uri cu structur ierar!ic
site"uri cu structur de tip *eb
8egturile dintre pagini trebuie s fie corespunztoare tipului de site pe care l construii.
Site-uri!e !iniare mono-pa&in*
cest tip de site este, aa cum indic i numele, format dintr"o singur pagin. ceast structur
se folosete atunci cnd informaiile prezentate sunt sub form de te#t care se poate mpri firesc n
seciuni mai mici. Uizitatorii pot parcurge ntreaga pagin derulnd"o dar, de obicei, la nceputul paginii
e#ist o list de legturi care are rol de &uprins. cestea sunt nite legturi interne /ancore3 care conduc
rapid vizitatorul la seciunea care l intereseaz, fr a mai derula ntreaga pagin. =mprirea
coninutului paginii n seciuni mai mici se poate face folosind linii orizontale. Este indicat ca la fiecare
nou seciune s inserai o legtur intern ctre partea superioar a paginii unde se afl &uprinsul.
Site-uri!e !iniare mu!ti-pa&in*
(tructura de acest tip se folosete n situaia cnd informaiile prezentate se succed ntr"o ordine
secvenial, de la nceput la sfrit, informaiile prezentate ntr"o pagin bazndu"se pe cele din pagina
anterioar. ,entru a"l ndruma pe vizitator s parcurg site"ul n ordine, fiecare pagin trebuie s
conin o legtur cu pagina urmtoare, precum i cu cea anterioar. )e asemenea, este necesar s
inserai i o legtur cu prima pagin a site"ului care trebuie s conin &uprinsul, pentru a facilita i
saltul direct la o anumit pagin. =ntr"un site cu o astfel de structur paginile nu trebuie s fie prea lungi
/de dorit ar fi s nu depeasc un ecran3 pentru a face navigarea mai comod. &u toate c acest tip de
organizare este logic, nu trebuie s uitai principiul permeabilitii. ,entru un vizitator care va intra n
site printr"o pagin oarecare, indicaii de navigare cum ar fi %=nainte% , %=napoi% ar putea s nu aib prea
mult neles.
Site-uri!e cu structur* ierar/ic*
(ite"urile de acest tip sunt cele mai numeroase pe *eb. -n astfel de site este format dintr"o
pagin de baz /5ome3 de nivel zero, care conine legturi ctre alte pagini, fiecare pagin coninnd
cte o parte a subiectului site"ului. <iecare dintre aceste pagini de nivel unu poate avea, la rndul su,
legturi cu alte pagini, detaliind subiectul i furniznd informaii specifice.
-n e#emplu de site de acest tip este o librrie virtual. ,agina 5ome ar putea conine legturi
ctre diverse categorii: 'eletristic, Istorie, ,olitic, Economie, &alculatoare i Internet. )ac un
vizitator este interesat de un manual de programare n ,erl, el va alege legtura ctre &alculatoare i
Internet i va ajunge ntr"o pagin de nivelul unu unde va gsi legturi ctre ,rogramare, Internet,
5ard;are. Ua alege legtura ,rogramare care va desc!ide o pagin de nivelul doi care va conine o list
de titluri, printre care i manualul cutat.
tunci cnd concepei structura unui astfel de site, trebuie s acordai o mare atenie organizrii
logice i fluente a site"ului. <iecare pagin trebuie s conin o legtur ctre pagina 5ome astfel nct
vizitatorul s poat reveni la nceput fr s fie obligat s strbat toate nivelele. >u legai prima pagin
de prea multe pagini de nivelul unu ci ramificai"le n adncime. )ac site"ul este de mari dimensiuni,
introducei n partea superioar a fiecrei pagini o bar de navigare care informeaz vizitatorul despre
locul unde se afl. +evenind la e#emplul cu librria, un astfel de instrument de navigare ar putea arta
aa: #ome M Calculatoare / &rogramare)
=n plus, este indicat s oferii o bar de navigare secundar la baza paginii.
Site-uri!e de tip reea.
ceste site"uri au o structur liber. Ele sunt formate din mai multe pagini, fiecare putnd avea
legtur cu oricare alt pagin. E#ist i aici o pagin 5ome, ns de la ea, vizitatorul poate naviga prin
site fr a urma un drum precis. =n general, acest tip de site este potrivit pentru subiectele care nu au o
structur logic intern, subiecte recreaionale sau distractive. )ac dorii s creai un site de acest tip,
trebuie s avei grij s oferii n fiecare pagin, pe lng legturile cu alte pagini, o legtur ctre
pagina 5ome. =n plus, asigurai"v c materialul dumneavoastr este adecvat acestui tip de site
deoarece altfel site"ul va purta amprenta neconcordanei ntre subiectul abordat i modul su de
organizare.
3. Metodo!o&ia de construire a site-u!ui
)ei nu e#ist un mod unic de desfurare a procesului de construire a unui site, e#ist trei tipuri
de abordri posibile, pe care creatorul site"ului le poate alege sau combina, n funcie de necesiti.
Metoda 2Top-@o%n2
)ac designerul are nc de la nceput o idee clar asupra coninutului site"ului, aceast abordare
este cea mai potrivit. =n acest tip de metodologie, este creat mai nti pagina de nceput a site"ului
/pagina 5ome3 i apoi celelalte pagini. ,aginile pot conine un minim de informaii, urmnd ca la
dezvoltarea ulterioar a site"ului, ele s fie mbogite. vantajul major al acestei abordri este acela c
permite continuitatea vizual i de coninut, deoarece toate paginile vor fi construite n acord cu pagina
de start. $ metod foarte bun de a realiza acest lucru este crearea unor template"uri care s conin
acelai tip de elemente pentru toate paginile i care vor fi folosite drept tipare la momentul scrierii
codului 5678 pentru paginile respective.
Metoda 2$ottom-p2
ceast abordare se folosete cnd designerul nu cunoate de la nceput care vor fi structura i
aspectul final al site"ului, dar cunoate aspectul i coninutul unor pagini din cadrul su. ceast
situaie poate aprea cnd dorii ca site"ul s conin pagini deja e#istente, care au fost create n
procesul de dezvoltare al altui site, de e#emplu. &!iar dac nu deinei pagini create deja de la care s
pornii, aceast abordare permite crearea unor pagini individuale care ndeplinesc anumite obiective i
care pot fi legate apoi de o pagin 5ome. vantajul abordrii %'ottom"-p% este acela c, la construirea
paginilor individuale, nu mai suntei constrns la respectarea unui anumit stil, consecvent cu cel din
pagina 5ome. 6otui, ajustarea ulterioar a paginilor n sensul realizrii unui aspect unitar, este
necesar.
Metoda increment*rii
ceast metod const n construirea unei pagini de start i a unor pagini individuale legate de
acesta, avndu"se n vedere crearea unor pagini intermediare, pe msura necesitilor. 7etoda se
folosete atunci cnd este necesar construirea rapid a unui site care urmeaz a fi dezvoltat ulterior, n
loc de a"l construi n ntregime de la nceput. Este o metod nerecomandat nceptorilor, deoarece prin
adugirile ulterioare e#ist riscul de a obine un site defectuos organizat i lipsit de unitate.
4. Te/nici de desi&n %e<
,entru a realiza designul unui site sunt folosite o serie de te!nici cu ajutorul crora paginile
capt contur, att din punct de vedere vizual ct i din punct de vedere al organizrii legturilor i al
amplasrii coninutului n pagini. =n continuare sunt prezentate cteva dintre aceste te!nici, fiecare
dintre ele referindu"se la cte un aspect al designului site"ului.
Sc/ia site-u!ui
$dat ce v"ai decis asupra modului n care va fi structurat site"ul este foarte bine ca nainte de a
ncepe scrierea efectiv a codului 5678 pentru fiecare pagin n parte, s realizai o sc!i a ntregului
site.
,utei folosi n acest scop 7icrosoft *ord sau orice alt procesor de te#t. ,entru nceput creai un
document nou n care listai punctele majore pe care dorii s le acoperii n pagina 5ome.
<acei de asemenea o list a elementelor grafice pe care intenionai s le includei, nsoite de
indicaii privind aezarea lor n pagin. (tabilii care sunt paginile de nivel unu i ce informaii dorii s
oferii n cadrul lor, precum i paginile subordonate acestora care vor cuprinde detalierea subiectelor
anunate n paginile de nivel unu.
,entru a avea o imagine ct mai e#act a structurii site"ului nc din faza de sc!iare a sa este
recomandat s folosii bara de instrumente Outlining din meniul %ools M Customi8e din *ord. ceasta
v permite s stabilii nivelul paginilor i s realizai cu uurin ramificarea lor n adncime.
$ alt metod pentru a realiza sc!ia site"ului o constituie graficul /sau !arta3 site"ului. )ac nu
dorii s v complicai folosind un editor de te#t sau un program de grafic, putei realiza o astfel de
sc!i i pe !rtie, cu creionul. )esenai cte un dreptung!i pentru fiecare pagin din site, specificnd
n interiorul su scopul i obiectivele paginii, elementele i aranjarea lor n pagin. poi unii
dreptung!iurile prin sgei pentru a specifica traseele pe care le poate parcurge utilizatorul. (geile
reprezint de fapt legturile dintre pagini. vei grij ca spre pagina 5ome s indice toate sgeile,
pentru a asigura astfel o legtur cu ea din orice pagin a site"ului. =n acest mod putei planifica pentru
fiecare pagin ce urmeaz s vad, s neleag i s fac vizitatorul acesteia, precum i unde se poate
deplasa din pagina respectiv.
$ricare ar fi metoda folosit pentru a sc!ia site"ul, la fiecare pagin trebuie s v punei
urmtoarele ntrebri:
&e doresc s afle vizitatorul din aceast pagin4
&e doresc s fac vizitatorul n acest moment4
&e doresc s simt vizitatorul parcurgnd pagina4
-nde doresc s mearg vizitatorul n continuare4
)esigur, n ultim instan comportamentul i impresiile vizitatorului scap controlului
designerului, ns un site n care fiecare pagin d rspunsuri clare i limpezi acestor ntrebri are foarte
multe anse de a ntruni aprecierile pozitive ale vizitatorilor si.
&a6ina de intrare n site <pa6ina splash=
E#ist multe site"uri care nainte de pagina 5ome au o pagin de intrare n site, numit pa6in,
splash. (copul unei astfel de pagini este identificarea rapid a obiectului site"ului n timp ce se ncarc
restul de date. ,agina splas! are pentru site acelai rol pe care l are coperta unei cri sau prima pagin
a unei reviste. ceast prim pagin trebuie s se ncarce rapid, s aib un impact vizual puternic i s
comunice esenialul despre subiectul site"ului sau compania creia i aparine site"ul.
E#ist opinii divergente n legtur cu folosirea i utilitatea paginii splas! ntr"un site. 7ai ales
dac face apel la elemente multimedia, sunet, grafic, animaie comple# care ncetinesc timpul de
ncrcare, pagina splas! poate aduce mai degrab deservicii site"ului. =n plus, pagina splas! poate fi
resimit de vizitator ca o barier n accesul imediat la informaiile din interiorul site"ului.
&a6ina ome
)ei aspectul i coninutul paginii 5ome poate varia foarte multe de la un site la altul, e#ist
cteva elemente comune prezente n orice pagin de start:
Identificarea firmei sau companiei creia i aparine site"ul /dac este cazul3
)escrierea scopului site"ului
)escrierea structurii site"ului. ,agina 5ome are i funcia de &uprins al site"ului oferind
indicaii vizitatorilor asupra subiectelor abordate
(tabilirea relaiilor ntre seciunile de nivel unu ale site"ului i cele subordonate lor.
ceasta se realizeaz prin intermediul barelor de navigare, butoanelor, !rilor de imagini sau
listelor de legturi.
<urnizarea informaiilor de contact.
&a6inile din interior
,aginile de nivel unu reprezint diviziunile majore ale subiectului general al site"ului. E#ist
tentaia de a include prea multe informaii detaliate la acest nivel. )ac site"ul acoper un subiect vast,
cu o cantitate mare de informaii specifice, este bine s lsai detalierea acestora pentru paginile de
nivel doi. ,aginile de nivel unu trebuie s conin o descriere succint a subiectului acoperit precum i
legturi ctre paginile de nivel doi care detaliaz fiecare parte a subiectului. $ te!nic des utilizat este
plasarea resurselor suplimentare n pagini de nivelul trei. )e e#emplu o pagin de nivelul doi care ofer
pe lng te#t i imagini e#plicative ale unui anumite noiuni poate fi legat de pagini de nivel trei care
conin imaginile. &nd vizitatorul face clicI pe un anumit te#t aflat n pagina de nivel doi se desc!ide
pagina de nivel trei cu imaginea e#plicativ. vantajul acestei abordri este descongestionarea paginilor
de nivelul doi care cuprind detalierea subiectului.
(c!ia dumneavoastr trebuie s cuprind, pe lng modul de organizare a paginilor, i o list ct
mai complet a elementelor pe care dorii s le includei n fiecare pagin /imagini, formulare, fiiere
multimedia, etc.3.
0ra&mentarea in'ormaii!or
$mul poate procesa o cantitate limitat de informaii ntr"o anumit unitate de timp. )in acest
motiv, una dintre sarcinile specifice n designul *eb este fragmentarea informaiilor n secvene care s
nu depeasc posibilitile de cuprindere ale utilizatorului. &antitatea de informaii cuprins ntr"o
pagin nu trebuie s"l copleeasc pe vizitatorul paginii sau s mreasc timpul ei de ncrcare. )e
asemenea, modul de fragmentare al informaiei trebuie s focalizeze atenia vizitatorului asupra
principalelor subiecte abordate n pagin i s l ajute s ia cunotin n mod gradat de subiectul
prezentat. <ragmentarea corect a informaiilor este n avantajul designerului, deoarece l ajut s
creeze pagini reutilizabile. )ac fiecare pagin pe care o vei crea servete la ndeplinirea unui anumit
scop, putei include aceast pagin fie direct, fie ca o resurs util i n alte site"uri pe care le creai
ulterior i care au subiecte cone#e cu pagina respectiv.
=n cadrul site"ului fragmentarea informaiilor conduce la stabilirea modului n care va fi detaliat
subiectul, la determinarea numrului de pagini necesare pentru acesta precum i a nivelului paginilor.
)ei divizarea subiectului n pri mai mici este o te!nic deosebit de util, nu abuzai totui de puterea
!Eperte#tului. $ fragmentare e#cesiv a subiectului ntr"un mare numr de pagini este la fel de
obositoare ca i prezentarea acestuia n bloc. -n design eficient anticipeaz nevoia vizitatorului de a
obine informaii suplimentare i furnizeaz la momentul oportun legturi ctre paginile care detaliaz
acel punct.
=n cadrul unei pagini modul de fragmentare al informaiilor ine de logica intern a subiectului
prezentat. ,entru a diferenia prile constitutive ale subiectului unei pagini o mare importan o are
organizarea te#tului n cadrul paginii.
&ei mai muli dintre cei care navig!eaz pe *eb obinuiesc s %scaneze% paginile n cutare de
informaii. Ei citesc mai nti titlurile, listele, i primele fraze dintr"un paragraf. Este bine s inei
seama de acest lucru cnd organizai te#tul n pagin.
&oninutul paginii trebuie s fie ct mai uor de citit. <olosii paragrafe scurte, desprite prin linii
libere, evitai frazele prea lungi i folosii n mod judicios titlurile. ccentuai prile pe care vrei s le
scoatei n eviden n te#t prin ngroare sau scrierea lor cu alt culoare, dar nu n e#ces. buzul de
culori sau de te#te scrise cu caractere aldine fac pagina ncrcat i greoaie. Este indicat s v limitai la
un numr redus de tipuri de font. &ele mai apreciate sunt Uerdana i rial, deoarece sunt lizibile i
elegante. Este mai bine s evitai folosirea tipului 6imes >e; +oman, dei este un tip foarte folosit n
editarea de te#te. (pre deosebire de te#tele tiprite, pe monitor citirea se face cu FG2 mai ncet
deoarece monitorul adaug fonturilor un anumit grad de neclaritate /fu88iness3, mai accentuat la
fonturile cu serife, aa cum este 6imes >e; +oman. >u aranjai te#tul n pagin pe dou coloane astfel
nct vizitatorul s fie nevoit s revin n partea superioar a paginii pentru a citi ce"a de"a doua
coloan. cest format este potrivit pentru ziare i reviste dar nu i pentru o pagin *eb deoarece rupe
cursivitatea deplasrii n cadrul site"ului.
Le&area pa&ini!or
7odul n care vei realiza legturile dintre pagini depinde de structura site"ului. )ac optai
pentru o structur ierar!ic, legturile din interiorul site"ului vor fi adaptate acestei structuri. vantajul
structurii ierar!ice este c ofer utilizatorului posibilitatea unei navigri logice, plecnd de la
informaiile generale ctre cele particulare. )ezavantajul acestei te!nici este c utilizatorul trebuie s
urmeze o cale prestabilit pentru a ajunge la o anumit informaie, care se poate afla cteva linI"uri
distan de pagina 5ome.
$ alt manier de a realiza legturile din interiorul site"ului este de a lega fiecare pagin de toate
celelalte. Uei obine astfel o structur ne"ierar!ic care are avantajul c fiecare pagin se afl la
distan de un linI de oricare alta, inclusiv de pagina 5ome. ,entru site"urile de dimensiuni reduse o
astfel de structur poate funciona bine, ns pentru site"urile cu un mare numr de pagini numrul de
legturi crete rapid iar navigarea n interiorul site"ului devine foarte dificil. =n plus, utilizatorul nu are
la dispoziie o cale ierar!ic prin care poate ajunge la o informaie specific.
(nstrumente!e de na"i&are
,entru a realiza o navigare logic i eficient n cadrul site"ului instrumentele de navigare trebuie
s fie perfect adaptate modului n care sunt create legturile dintre pagini i n plus, s ofere indicii
vizuale asupra funciei lor. ,entru a crea un aspect vizual unitar al ntregului site i pentru a nu deruta
vizitatorul, este recomandat ca instrumentele de navigare s fie aceleai n toate paginile.
(tabilii de la nceput aspectul icon"urilor, butoanelor sau te#tului pe care le vei folosi drept
legturi i pstrai"l pe parcursul ntregului site. ceast te!nic ofer site"ului coeren i unitate i
stabilete imediat identitatea fiecrei pagini n cadrul site"ului. =n plus, folosirea repetat a acelorai
elemente grafice de navigare mrete eficiena bro;serului deoarece acestea sunt ncrcate la
desc!iderea primei pagini i stocate n memoria cache, fr a mai fi necesar ncrcarea lor la fiecare
nou pagin.
Instrumentele de navigare trebuie s fie ct mai uor de neles i localizat. )ac folosii o bar de
navigare plasai"o acolo unde vizitatorii sunt obinuii s o caute: n partea superioar a paginilor, n
stnga sau n dreapta paginii. <olosii o bar secundar de navigare la baza paginii, aceasta l va ajuta
pe vizitator s se deplaseze ntr"o alt seciune a site"ului fr a mai fi nevoit s deruleze pagina n sus
pn la bara principal de navigare.
)ac site"ul este de dimensiuni mari este o idee bun s creai o pagin special care s reprezinte
!arta site"ului i s plasai legtura ctre ea n bara principal de navigare din cadrul fiecrei pagini.
ceasta va permite vizitatorului s se orienteze n interiorul site"ului, oricare ar fi pagina prin care a
intrat n site. 5arta va conine legturi ctre toate paginile, grupate conform modului de organizare al
site"ului.
)e asemenea, dac folosii o structur ierar!ic, este util prezena unui instrument suplimentar
care s informeze vizitatorul asupra locului unde se afl n cadrul site"ului i a cii prin care a ajuns
aici, n maniera urmtoare:
#ome / &agina de nivel unu / &agina de nivel doi / &agina curent)
(n'ormaii!e despre site i pa&ina curent*
<iecare pagin a site"ului trebuie s conin indicaii privind scopul i obiectivele site"ului precum
i obiectivele specifice acelei pagini. =n faza de planificare ai colectat informaii privind publicul int,
ai formulat scopul i obiectivele ntregului site. cestea reprezint elementele fundamentale n jurul
crora este construit site"ul. <iecare pagin a sa are drept scop ndeplinirea unuia dintre obiective.
ceste informaii trebuie comunicate n pagina respectiv. Uizitatorul nu trebuie forat s g!iceasc ce
rol are o anumit pagin n cadrul site"ului.
7ulte site"uri prezente pe *eb conin o pagin special cu informaii de contact precum i o
pagin care conine informaii despre site i creatorii si /pagina 0bout3. 6otui este recomandat ca
aceste informaii s fie incluse i n subsolul paginilor din interiorul site"ului. Este bine s includei aici
informaii despre copErig!t, data ultimei reactualizri a paginii, despre organizaia sau compania creia
i este dedicat site"ul /dac este cazul3 i informaii de contact /adres de mail, numr de telefon, adres
potal3.
Dr&ani.area pa&inii cu aEutoru! ta<e!e!or
-nul dintre aspectele pe care trebuie s le avei n vedere la construirea unei pagini este rezoluia
ecranului. 7uli dintre vizitatorii paginii folosesc rezoluia de 0BB#ABB de pi#eli. $ pagin cu limea
mai mare de ABB de pi#eli poate face necesar derularea pe orizontal a paginii, care pentru muli
vizitatori este obositoare i incomod. )in acest motiv, este recomandat ca tot coninutul paginii s fie
inclus ntr"un tabel de baz cu limea de ABB de pi#eli.
!abelul de ba.,
&onstruirea paginii ncepe cu un tabel de baz, cu limea /;idt!3 de ABB de pi#eli, o linie i o
coloana. liniai tabelul la marginea din stnga sau centrat n pagin. (etai c!enarul /border3 la
valoarea %B% pentru a"l face invizibil pentru vizitator. =ntregul coninut al paginii va fi plasat n
interiorul acestui tabel.
sigurai"v c ai setat culoarea de fond /bgcolor3 pentru pagina dumneavoastr. $piunea
%default% las bro;serul s controleze culoarea fondului. )e cele mai multe ori aceasta este alb, dar
este mai bine s avei certitudinea c ea va aprea la fel n orice bro;ser, aa nct setai
bgcolorS%;!ite% sau orice alt culoare dorii.
=n funcie de felul cum dorii s v organizai site"ul i de scopul acestuia vei !otr unde dorii s
plasai bara principal de navigare.
>ara de navi6are n stn6a pa6inii
)ac ai decis s optai pentru plasarea barei de navigare n partea stnga /cea mai uzual
aezare3, vei include n tabelul de baz un tabel cu F sau H coloane.
)ac folosii un tabel cu F coloane setai distana ntre celule /cellpadding3 la valoarea %J% pentru
a spaia te#tul de marginea tabelului. ,utei specifica limea celulelor fie n pi#eli fie n procente.
)ac folosii un tabel cu H coloane, coloana din centru poate fi folosit ca %tampon% , care va
separa coninutul coloanei din stnga de coninutul celei din dreapta. (etai atributul border al tabelului
la %B% pentru ca marginea s nu fie vizibil. $dat stabilite aceste atribute, putei aduga n tabel attea
linii cte sunt necesare sau putei include un alt tabel n cel e#istent.
>ara de navi6are n partea superioara
,entru a construi o bar de navigare n partea de sus a paginii, trebuie s includei n tabelul de
baz un tabel cu o singura coloana. (etai atributele cellpadding S %J% i border S %B%. =n prima linie a
tabelului vei introduce logo"ul sau titlul site"ului, n linia a doua vei afia bara de navigare, iar pe
liniile urmtoare, coninutul paginii.
>ara de navi6are n partea dreapta
Este o abordare mai puin utilizat. &el mai adesea este folosit pentru paginile de tip catalog de
produse, unde imaginile i descrierea produselor sunt plasate n coloana din stnga, care ocup cea mai
mare parte a spaiului.
<olosirea tabelelor pentru organizarea coninutului paginii este o practic foarte folosit. 6abelele
vor pstra imaginile i te#tul acolo unde le"ai plasat. ,utei include i alte tabele n interiorul celor pe
care le"ai creat, n funcie de modul n care sunt organizate informaiile i de aspectul pe care dorii s
l dai paginii.
). Aree!i de desi&n
=n procesul de creare a unui site pot aprea o serie de greeli de design, cele mai multe datorate
nerespectrii te!nicilor i principiilor prezentate anterior.
:a&ini '*r* !e&*turi 82'und*turi29
-na dintre cele mai frustrante situaii n care se poate gsi o persoan care navig!eaz pe *eb
este o pagin fr instrumente de navigare i fr nici un indiciu privind site"ul cruia i aparine.
)esigur, site"ul din care face parte pagina poate fi localizat observnd prima parte a adresei -+8 a
paginii, care apare n bara de adrese a bro;serului. )ar a fora vizitatorul s efectueze aceast manevr
este cu totul nerecomandat. &el mai probabil acesta nu se va osteni s caute pagina 5ome a unui
asemenea site ci l va prsi definitiv. Evitai s creai asemenea pagini.
,rezena unor %fundturi% ntr"un site denot faptul c designerul nu a neles caracterul permeabil
al *eb"ului i ideea c un vizitator poate intra n site prin oricare pagin a sa. ,ericolul construirii unor
astfel de pagini apare mai ales n cazul site"urilor liniare multi"pagin, n care designerul dorete s
conduc vizitatorii de"a lungul site"ului pe un traseu liniar, prestabilit. ceasta nu nseamn c acest tip
de site"uri nu trebuie folosit, mai ales dac informaiile prezentate sunt adecvate acestui mod de
prezentare. 6rebuie ns acordat atenie instrumentelor de navigare care trebuie astfel concepute nct
vizitatorul s poat ajunge cu uurin cel puin la pagina 5ome. =n plus, informaiile despre site i
pagina curent nu trebuie s lipseasc din subsolul fiecrei pagini.
$ variaie a acestor pagini de tip %fundtur% o constituie paginile 5ome care ofer informaii
prea puine sau lipsite de semnificaie. )estul de des pot fi ntlnite pe *eb pagini 5ome care nu ofer
nici un fel de indicii asupra structurii sau coninutului site"ului, fr a mai vorbi de scopul i obiectivele
sale. Instrumentele de navigaie sunt absente, preferndu"se folosirea unor imagini sau te#te cu prea
puin semnificaie pentru a realiza accesul n diferitele seciuni ale site"ului. ,oate c este o abordare
avangardist, dar pentru marea majoritate a vizitatorilor este neplcut s ajung ntr"o asemenea pagin
aa nct este mai bine s respectai regulile clasice de design prezentate.
:a&ini 2uriae2
)ac paginile %fundtur% ofer prea puine indicii vizitatorului, e#ist i reversul lor: paginile
%uriae%. ceste pagini sunt ncrcate pn la refuz cu informaii, liste, imagini, linI"uri i alte
elemente. ,aginile de acest fel ridic dou mari probleme:
6impul de acces. 7ai ales dac pagina conine foarte multe imagini, timpul de ncrcare
al paginii poate fi foarte mare
(uprancrcarea cu informaii. )ac vei pune prea mult informaie ntr"o singur
pagin vizitatorul acesteia nu va fi capabil s o proceseze.
E#ist opinii care spun c lungimea unei pagini nu ar trebui s depeasc un ecran pentru a se
evita ca vizitatorul s deruleze pagina pe vertical. $ asemenea cerin este prea drastic i poate fi
adesea n dezavantajul prezentrii e#plicite a informaiilor. <ragmentarea subiectului trebuie s se fac
n funcie de logica lui intern i nu de reguli arbitrare cum este mrimea ferestrei bro;serului.
E#ist situaii n care paginile lungi ndeplinesc cel mai bine obiectivele urmrite. )e e#emplu, n
paginile de prezentare ale unor produse, pe un site comercial, plasarea descrierii produsului pe dou sau
mai multe pagini rupe cursivitatea prezentrii i se poate solda cu pierderea unor poteniali clieni.
nalog, dac pagina conine o list lung de elemente nrudite, ruperea listei este arbitrar i
dezavantajoas. ,e de alt parte, aglomerarea de informaii la nivelul unei singure pagini, mai ales cnd
ntre seciunile paginii nu e#ist o legtur intrinsec face ca pagina s apar ca un amalgam din care
vizitatorul va e#trage cu greu informaiile care l intereseaz.
)ac este necesar s folosii pagini foarte lungi nu uitai s oferii pe parcursul paginii ancore care
s conduc vizitatorul la nceputul seciunilor principale, precum i n partea superioara, respectiv
inferioar a paginii. )ac pagina conine mult te#t nu o ncrcai suplimentar i cu imagini sau cu
elemente multimedia deoarece timpul de acces va crete foarte mult.
#xcesu! de e!emente mu!timedia
<olosirea fr discernmnt a elementelor multimedia /imagine, sunet, video3 precum i folosirea
n e#ces a celor mai noi te!nologii *eb este adesea duntoare pentru site. )ac v adresai unei
audiene despre care presupunei c nu dispune de cone#iuni rapide, de ultimele versiuni de bro;sere
sau de aplicaiile necesare e#ecutrii i afirii corecte a unora dintre elementele din paginile site"ului,
este mai bine s nu includei aceste elemente.
stfel, dei aplicaiile create cu 7acromedia <las! sunt spectaculoase i se pot realiza efecte
speciale deosebit de atractive, un astfel de fiier poate ajunge cu uurin la dimensiuni care depesc C
megabEte, ceea ce ncetinete considerabil viteza de ncrcare a paginii. =n plus, pentru vizualizarea
corect a acestora, vizitatorul trebuie s descarce plug"in"ul (!ocI;ave n cazul cnd nu l are deja
instalat pe computerul propriu. Este foarte neplcut pentru vizitator s efectueze toate aceste operaii
doar pentru a constata c informaiile prezentate n aceast form puteau fi tot att de bine prezentate ca
te#t sau imagini obinuite.
$ soluie de compromis este aceea ca, simultan cu includerea unui astfel de fiier, s se pun la
dispoziia vizitatorului o opiune de %eludare% de tip %sIip intro% , atunci cnd prezentrile sunt folosite
doar cu rol de splas! screen, ca ecran de desc!idere a site"ului, de e#emplu.
=n plus, folosirea prezentrilor <las! fr ca acestea s serveasc unui scop bine definit nu face
altceva dect s distrag atenia vizitatorului de la subiectul site"ului.
$ alt greeal destul de des ntlnit este includerea fiierelor audio, fr ca acestea s aib
legtur cu scopul site"ului. E#ist designeri care consider c furnizarea unei muzici de fundal
sporete atractivitatea site"ului. =n realitate se ntmpl e#act contrariul. =n afara situaiei cnd subiectul
site"ului este legat de muzic sau cnd fiierele de sunet vin s completeze informaiile prezentate n
pagini, muzica de fundal nu face altceva dect s ncetineasc ncrcarea paginilor i s"l irite pe
vizitator, prin repetare. )ac este necesar s includei fiiere de sunet, lsai vizitatorului posibilitatea
de a opta pentru desc!iderea lor prin intermediul unei legturi, mai ales n cazul n care este vorba
despre fiiere de mari dimensiuni.
Este recomandat s procedai la fel i n cazul fiierelor video, avertizndu"l pe vizitator c pagina
respectiv se va desc!ide mai greu.
:a&ini ine&a!e
,aginile inegale conin informaii foarte diferite ca importan sau ca nivel de detaliere. &el mai
adesea se confrunt cu aceast problem paginile 5ome n care sunt incluse linI"uri ctre noile pagini
create n procesul de dezvoltare a site"ului. Este foarte uor s cdei n greeala de a include noile
legturi n pagina 5ome fr a mai respecta ierar!ia stabilit n etapa de organizare a site"ului.
)ac site"ul la care lucrai necesit crearea unor noi pagini trebuie s avei n vedere plasarea
acestora la nivelele specifice obiectivelor pe care le au precum i ncadrarea la locul cuvenit n structura
de legturi a site"ului prezentat n pagina 5ome.
Le&*turi '*r* semni'icaie
,rezena legturilor fr semnificaie este, de asemenea, o greeal de design foarte frecvent.
,robabil ai vzut de nenumrate ori n paginile *eb formulri ca aceasta:
,entru mai multe informatii apasati L !refS%info.!tml%MaiciL?M
&uvntul %aici% nu are n acest conte#t, nici o semnificaie. $ formulare mult mai potrivit ar
putea fi urmtoarea:
,uteti obtine aici L !refS%info.!tml%Mmai multe informatiiL?M
$ alt situaie este aceea n care documentul indicat nu are legtur, din punct de vedere al
coninutului, cu pagina care conine referina la el. 6oate linI"urile din cadrul unei pagini trebuie s
e#tind coninutul informaional al paginii, vizitatorul care urmeaz o legtur ateptndu"se ca aceasta
s i ofere informaii suplimentare despre subiect.
=n aceeai categorie se pot ncadra i legturile %banale% , care nu mbogesc prin nimic
informaiile prezentate. )e e#emplu o construcie ca aceasta:
'ine ati venit in L !refS%def.!tml%M,aginaL?M 5ome a -niversitatii
unde documentul def)html conine definiia de dicionar a cuvntului %pagina% , este o legtur
%banal% deoarece n acest conte#t informaia oferit nu servete nici unui scop. ,e de alt parte, ntr"o
pagin al crei subiect este vocabularul specific *eb"ului, o astfel de definiie ar fi foarte important.
-n alt tip de legturi fr semnificaie apare atunci cnd fragmentarea informaiei este dus la
e#trem prin folosirea unui numr foarte mare de linI"uri. (ubiectul este secionat n pri foarte mici iar
vizitatorul este obligat s parcurg un mare numr de pagini n adncime pentru a pune cap la cap
informaiile i a nelege sensul lor. $ abordare de acest tip rupe cursivitatea subiectului i mrete
efortul de a nelege i asimila al vizitatorului.
:a&ini de.or&ani.ate i stridente
cest tip de pagini sufer din pricina lipsei de organizare a coninutului. &!iar dac subiectul este
mprit n seciuni, unitile de informaie sunt mprtiate n pagin fr o sistematizare prealabil
care s focalizeze atenia vizitatorului ctre punctele importante. ceste pagini au prea multe culori,
adesea stridente, tipuri diferite de fonturi, sau imagini de fundal foarte ncrcate. desea este folosit n
e#ces animaia fr nici ca aceasta s aib vreo semnificaie sau legtur cu coninutul paginii i muzica
de fundal. spectul general al unor astfel de pagini este la fel de strident i iptor ca un decor de blci.
+. -e.umat
&onstruirea unui site necesit, pe lng o bun cunoatere a limbajului 5678, respectarea unor
principii i folosirea unor te!nici consacrate. (ite"ul trebuie s fie orientat ctre vizitator, ctre
nelegerea i satisfacerea nevoii de informaie a acestuia. )esignul trebuie s menin un ec!ilibru
ntre te!nologiile folosite i eficien, asigurnd o vitez convenabil de ncrcare a paginilor i o
vizualizare bun n cele mai populare dintre bro;sere. spectul site"ului trebuie s fie n concordan
cu scopul i obiectivele sale, evitnd e#cesele de orice fel.
,rincipiile care trebuie respectate n etapa de design sunt:
socierea semnificaiilor
7eninerea competitivitii
<olosirea eficient a resurselor
&oncentrarea pe necesitile utilizatorului
=nelegerea permeabilitii *eb"ului
&rearea unui aspect plcut, coerent i fluent
(usinerea interactivitii
(usinerea navigaiei
(trategia de construire a site"ului poate urma una dintre metodele stop"do;nZ , sbottom"upZ sau
metoda incrementrii.
=n procesul de design, prima etap o constituie sc!ia site"ului care trebuie s reflecte structura
acestuia: liniar, ierar!ic sau de tip *eb.
Informaia trebuie fragmentat astfel nct s nu depeasc puterea de asimilare a utilizatorului.
8egturile dintre pagini trebuie s fie stabilite astfel nct s permit o parcurgere logic a
coninutului site"ului, iar instrumentele de navigare trebuie adaptate modului n care sunt create
legturile dintre pagini, oferind indicii vizuale asupra funciei lor. Este recomandat ca instrumentele de
navigare s aib acelai aspect n toate paginile.
>erespectarea principiilor i te!nicilor de design poate s conduc la construirea unor pagini de
tip sfundturaZ , a unor pagini prea ncrcate cu informaii sau, dimpotriv, a unor pagini inegale. )e
asemenea, printre greelile de design care pot aprea sunt legturile fr semnificaie, e#cesul de
elemente multimedia, paginile dezorganizate sau stridente.
Capitolul 19
!estarea site*ului
Etapa de design a site"ului se desfoar n strns legtur cu cea de implementare, de scriere a
codului 5678 pentru paginile care fac parte din site. 6otui, procesul de creare a site"ului nu se poate
considera nc!eiat n momentul finalizrii tuturor documentelor 5678 care l formeaz. -rmeaz o
etap adesea tratat oarecum superficial, dei, ca i celelalte, este esenial pentru construirea unui site
de calitate: etapa de testare.
1. Corectarea pa&ini!or
&orectarea este unul din cele mai neglijate aspecte al publicisticii *eb. <oarte frecvent putei
ntlni pagini *eb cu multiple greeli de ortografie, gramatic, formatare, c!iar i n cazul site"urilor
importante. ,aginile cu greeli de ortografie, e#primri neglijente, reflect cel puin o insuficient
e#perien n acest domeniu i, de ce nu, c!iar lips de respect pentru vizitator.
&orectarea este neglijat n primul rnd datorit uurinei e#traordinare cu care te#tele pot fi
publicate electronic. ,utei crea o pagin ntr"un editor de te#t i aceasta poate fi publicat la doar
cteva minute dup terminarea ei, daca suntei suficient de rapid. &ei mai muli nu vor petrece ore n ir
verificnd e#istena eventualelor greeli gramaticale n te#tul editat, aa cum ar face"o, probabil, n
cazul unei tiprituri clasice, dac aceste erori i"ar costa o avere pentru a retipri CB.BBB de copii ale
documentului. )ac ai fcut o greeal, trebuie doar s desc!idei fiierul, s efectuai corectura i s l
republicai pe *eb, unde toat lumea l poate vedea. Este aceasta o strategie corect4 )esigur c nu.
&alitatea muncii pe care ai depus"o la crearea site"ului definete calitatea acestuia. 7ii, poate
milioane de utilizatori ar fi putut deja citi pagina n cauz. Este mult mai simplu s petrecei cteva ore
corectnd te#tul, pentru a evita ca ulterior s v luptai zile, sptmni sau luni n ir pentru a v
rectiga credibilitatea.
Iat cteva metode care v pot ajuta s corectai mai eficient paginile *eb:
43. -tilizai corectoare automate pentru ortografie i gramatic pentru a descoperi erorile
plictisitoare, fcute din grab sau din oboseal.
44. >u avei niciodat ncredere absolut n acest tip de corectoare pentru a descoperi erorile
mai subtile. )up utilizarea lor, ncrcai pagina n bro;ser i citii"o de cteva ori.
47. ,entru site"urile de dimensiuni mari citii documentele n mod repetat, cutnd de
fiecare dat un anumit tip particular de erori
49. 8a prima lectur concentrai"v atenia pe aspectul general al documentului i pe
descoperirea erorilor de formatare, a itemurilor lips sau a erorilor de plasare a acestora.
4;. 8a a doua lectur verificai logica i cursivitatea ideilor i a cuvintelor.
49. 8a a treia lectur, corectai minuios ntregul te#t verificnd sinta#a, ortografia,
punctuaia.
7D. =ntotdeauna verificai imaginile, figurile i !rile din pagin. sigurai"v c ele au
legtur cu te#tul de referin, i verificai te#tul e#plicativ care nsoete imaginea.
E#ist i erori ce vor persista uneori c!iar dup toate aceste verificri. )ac le descoperii dup
publicarea site"ului, nu mai rmne dect s le corectai atunci.
2. Testarea pa&ini!or
$dat terminat verificarea corectitudinii te#tului din pagini din punct de vedere gramatical i
logic, urmeaz etapa de testare a paginilor. =n aceast faz trebuie s v concentrai pe testarea
corectitudinii etic!etelor 5678, a linI"urilor, a imaginilor i a celorlalte elemente incluse n pagini.
Testarea !in>-uri!or
&ea mai simpl cale de testare a linI"urilor este de a ncrca pagina n bro;ser i de a da clicI pe
fiecare linI.
Uerificai funcionarea tuturor ancorelor din pagini care trebuie s acceseze seciunea din pagin
corespunztoare identificatorului ancorei. tenie la seciunile multiple ale aceleiai pagini etic!etate cu
acelai identificator. ceast greeal poate produce rezultate stranii. )aca bro;serul sare la o alt
seciune a paginii dect cea ateptat, verificai mai nti identificatorul ancorei n seciunea pe care
bro;serul o afieaz.
Uerificai apoi modul de funcionare a legturilor ctre alte documente, att n cadrul site"ului ct
i n afara sa, respectiv validitatea lor i dac paginile accesate sunt cele potrivite. )ac o anumit
pagin nu poate fi desc!is, verificai sinta#a linI"urilor i anume:
71. corectitudinea protocolului specificat
7/. e#tensia fiierului
71. e#istena simbolului p
8ten)ieM
=n ->IW, simbolul tilda /p3 este utilizat pentru a specifica directorul de start /#ome director$3 al
utilizatorului al crui nume urmeaz dup acest simbol.
<olosind simbolul p v putei referi la o pagin *eb astfel:
!ttp:??;;;.server.com?putilizator?pagina.!tml
:ro<!eme n 'uncionarea pa&ini!or =e<
Este posibil ca paginile *eb create s nu arate n bro;ser aa cum au fost ele proiectate.
+ezolvarea unor astfel de deficiene poate fi dificil, deoarece cnd scriei codul 5678 avei doar o
imagine mental a modului cum ar trebui s arate pagina. $ soluie pentru a face procesul de depanare
mai uor ar fi s vizualizai pagina cu ajutorul bro;serului pe msur ce o construii. ,utei izola
diversele seciuni ale paginii pentru a verifica funcionarea fiecreia dintre ele.
&ele mai multe greeli care pot aprea se datoreaz erorilor n codului sursa al paginii. (inta#a
codului este de o importanta critic n 5678. &ele mai comune probleme de sinta#a care apar sunt:
73. absena etic!etelor de nc!idere L ? M
74. mperec!erea etic!etelor 5678
77. g!ilimelele % %
79. imbricarea etic!etelor
Iat cteva dintre problemele cu care v putei confrunta:
H caracteristic, de 5ormatare a5ectea., o secven), mai mare de te(t dect era prev,.ut.
( presupunem c ai folosit ntr"o seciune a paginii una dintre etic!etele de titlu, L5HM de
e#emplu. 8a vizualizarea paginii n bro;ser constatai c nu doar te#tul pe care doreai s"l evideniai
este formatat astfel, ci o parte mai mare a te#tului din pagin.
$ astfel de situaie este provocat de:
7;. bsena unuia dintre caracterele % L % sau % M %
79. bsena etic!etei de nc!idere L?5HM
9D. Imbricarea defectuoas a etic!etelor 5678
$ etic!et de nc!idere creia i lipsete unul dintre caracterele %L %sau %M% nu va fi interpretat
corect de bro;ser, prin urmare formatul nu va lua sfrit dect n punctul n care bro;serul ntlnete
caracterul respectiv. ceasta poate determina afiarea ntr"un format greit a unui te#t.
)ac acest element este un titlu, tot te#tul dintre etic!eta de desc!idere asociat titlului i cea mai
apropiat etic!et de nc!idere ntlnit va fi afiat ca titlu. )aca acest element este te#t ancor, tot
te#tul dintre etic!eta de desc!idere LM i prima etic!et de nc!idere ntlnit va fi afiat ca o legtur
/de culoare albastru i subliniat3.
$ etic!et de nc!idere absent sau o mperec!ere inadecvata de etic!ete va provoca probleme
similare. -neori problemele sunt dificil de urmrit i rezolvat. -rmrirea unei probleme se face n sens
descendent, defeciunea trebuie cutat acolo unde ncepe secvena de cod eronat i nu unde se
sfrete.
H parte din te(tul pa6inii nu este a5i$at
6e#tul sau obiectele care lipsesc din pagina pot fi depistate prin urmrirea g!ilimelelor % % i a
etic!etelor greit nc!ise i care conin adrese -+8.
)ac pagina conine g!ilimele de desc!idere n interiorul unei etic!ete, i cele de nc!idere
trebuie s se regseasc n aceeai etic!et. $ etic!et din care lipsesc g!ilimelele de nc!idere nu este
interpretat corect i acest lucru poate produce rezultate bizare. )ac etic!eta creia i lipsesc
g!ilimelele este o etic!et ancor, ntreg te#tul de la primele g!ilimele pn la urmtoarele ntlnite ar
putea fi interpretat de bro;ser ca parte dintr"o adres -+8.
$ alt eroare care poate provoca acelai efect este nc!iderea greit a etic!etei coninnd o
adres -+8. )ac o astfel de etic!et nu este nc!is corespunztor, bro;serul ar putea interpreta orice
te#t care urmeaz, pn la etic!eta de nc!idere corespunztoare, ca fiind parte a adresei -+8.
,roblema se rezolv prin e#aminarea etic!etelor aflate naintea poriunii de te#t care nu este
afiat. Eroarea ar putea proveni de la orice etic!et care conine g!ilimele sau o adres -+8.
9!ilimelele utilizate n editorul de te#t cu ajutorul cruia scriei codul 5678 trebuie s fie ntotdeauna
n standard (&II. -nele editoare de te#t utilizeaz aa"numitele %smart Tuotes% , n care g!ilimele de
desc!idere arat diferit fa de cele de nc!idere. )ac procesorul de te#t cu care lucrai are aceast
posibilitate, ea trebuie dezactivat, deoarece acest tip de g!ilimele, nefiind n standardul (&II, nu vor
funciona corect n 5678.
85i$area de5ectuoas, a 5ormatului
=n cazul cnd formatul afiat de bro;ser nu este cel ateptat verificai mai nti compatibilitatea
dintre bro;ser i stilul de caractere specificat n codul 5678. 'ro;serul trebuie s fie capabil s
afieze stilul ales. tunci cnd sunt folosite stiluri logice, bro;serul este ultima instan n decizia
privind stilul caracterelor afiate.
$ metod rapid de verificare a e#istenei unei probleme de compatibilitate este de a afia
paginile utiliznd bro;sere diferite, dintre care unul s poat afia n mod sigur stilul de caracter
utilizat. )ac acel bro;ser afieaz te#tul incorect, se face verificarea codului 5678. )ac te#tul este
afiat corect, atunci e#ist o incompatibilitate cu celelalte bro;sere.
=n codul 5678, problema poate fi legat de o imbricare defectuoas a etic!etelor. Uerificai
modul cum au fost imbricate etic!etele de formatare din seciunea de pagin asociat cu eroarea
respectiv. stfel o construcie de tipul urmtor:
LE7MUa multumim ca ati vizitat L(6+$>9M,aginaL?E7MnoastraL?(6+$>9M
nu va funciona corect, deoarece etic!etele LE7M i L(6+$>9M sunt imbricate eronat.
3. -e.umat
)up etapele de planificare, design i implementare urmeaz etapa de testare a site"ului.
=n aceast etap se realizeaz:
91. &orectarea paginilor din punct de vedere ortografic i gramatical
9/. 6estarea legturilor din cadrul site"ului
91. 6estarea legturilor e#terne
93. )epanarea greelilor care in de sinta#a codului 5678
Etapa de testare este deosebit de important pentru impresia general lsat de site"ul
dumneavoastr. -n site cu ortografie neglijent, cu greeli de e#primare, cu legturi nefuncionale
poate ndeprta vizitatorii, orict de valoroase ar fi informaiile prezentate n interiorul su.
Capitolul /D
&ublicarea site*ului
=n sfrit, site"ul dumneavoastr este finalizat. i parcurs toate etapele, de la planificare, la
design i implementare, v"ai asigurat c toate elementele funcioneaz corect. venit momentul
publicrii pe *eb a site"ului, astfel nct rezultatele muncii dumneavoastr s fie cunoscute de toi
aceea care v vor vizita paginile. =n etapa publicrii pe *eb a site"ului intervin mai muli pai:
(tabilirea unui nume de domeniu
(tabilirea serverului *eb pe care va fi stocat /gzduit3 site"ul
$rganizarea i denumirea fiierelor n conformitate cu cerinele serverului gazd
6ransferul fiierelor
1. Gume!e de domeniu
,entru ca site"ul dumneavoastr s aib o identitate pe *eb avei nevoie de un nume de domeniu
pentru el. >umele de domeniu al site"ului va face parte din adresa -+8 a fiecrei pagini i va oferi site"
ului o prezen distinct pe *eb.
)omeniile principale de pe *eb pot fi de mai multe tipuri:
comerciale .com
educaionale .edu
guvernamentale .&o"
furnizorii de servicii de reea .net
instituii non"profit .or&
domeniile corespunztoare rilor lumii .ro, etc
,entru a obine un nume de domeniu pentru site avei la dispoziie dou posibiliti:
domeniu pltit
domeniu gratuit
@omeniu p!*tit
)ac site"ul pe care l"ai creat aparine firmei dumneavoastr sau unei firme client sau dac dorii
s avei o prezen stabil i credibil pe *eb cea mai bun opiune este s avei un domeniu pltit.
=nregistrarea unui domeniu nu este foarte costisitoare i va asigura site"ului dumneavoastr o identitate
serioas i credibil. =n plus, odat ce suntei proprietarul unui domeniu putei s sc!imbai locaia site"
ului /serverul *eb pe care este gzduit3 fr ca aceasta s necesite sc!imbarea domeniului.
,reul pentru nregistrarea unui nume de domeniu variaz destul de mult. -na dintre cele mai
convenabile oferte poate fi gsit la adresa !ttp:??;;;.CB"domains.com care ofer nregistrarea unui
nume de domeniu pentru CB -() anual precum i o serie de discount"uri pentru nregistrarea pe
perioade mai lungi. )ac dorii un domeniu romnesc /.ro3 putei obine informaii la adresa
!ttp:??;;;.rnc.ro. ,entru nregistrarea unui astfel de domeniu se percepe o ta# unic de AC -() /pre
valabil la data scrierii acestei cri3 fr alte ta#e anuale.
=n cazul cnd optai pentru un domeniu pltit, adresa -+8 a site"ului va fi de forma
!ttp:??;;;.dumneavoastra.com
@omeniu &ratuit
$binerea unui nume de domeniu gratuit este foarte simpl. E#ist multe companii on!line care
ofer astfel de domenii i, n plus, i spaiu de gzduire pentru site. )ac suntei nceptor i dorii s v
testai cunotinele de *eb design nou nvate, nu este o idee rea s construii un site %de prob%
folosind pentru acesta un domeniu i un serviciu de !osting gratuite. =n afara acestei situaii, dei poate
prea alegerea ideal, un domeniu gratuit poate aduce multe dezavantaje site"ului dumneavoastr.
,rima judecat de valoare asupra unui site este fcut pe baza numelui su de domeniu. =n cazul
unui domeniu gratuit adresa -+8 a site"ului va fi:
!ttp:??;;;.numefirmagazda.com?pdumneavoastra sau
!ttp:??;;;.dumneavoastra.numefirmagazda.com
Uizitatorii site"ului vor ti imediat c nu deinei propriul domeniu i folosii un serviciu de
!osting gratuit ceea ce v va afecta serios credibilitatea. 7ai ales dac site"ul este unul de afaceri,
folosirea unui domeniu i serviciu de !osting gratuit este cu totul contraindicat. =n plus, firmele care
ofer acest gen de servicii, impun afiarea unor bannere publicitare care distrag atenia vizitatorilor de
la coninutul site"ului i mresc timpul de ncrcare al paginilor.
2. Ser"iciu! de &*.duire =e< 8=e< /ostin&9
=nainte de a publica site"ul pe *eb este necesar o evaluare a necesitilor de acces, pentru a
determina ce fel de cont se potrivete site"ului dumneavoastr. ,lecnd de la presupunerea c deinei
deja o cone#iune la Internet, nu vom intra n amnunte privind alegerea unui furnizor de servicii
Internet /I(, j 'nternet +ervice &rovider3. 6otui, n cazul cnd nc nu deinei o cone#iune sau dorii
s sc!imbai provider"ul actual, v recomandm s studiai cu atenie ofertele principalilor furnizori de
servicii. vnd n vedere c nu v vei mai limita doar la simpla navigare pe *eb sau la sc!imbul de
emailuri ci vei dori s transferai i s ntreinei un site *eb necesitile dumneavoastr vor crete.
)in acest motiv este bine s v informai asupra unor detalii te!nice cum ar fi limea de band, mediul
de transmisie /anten satelit, cablu cu fibre optice, unde radio3, ce tip de server folosete, asistena
te!nic oferit, dac ofer gzduire pentru pagini *eb.
$piunile pentru gzduire sunt urmtoarele:
Instalarea unui server *eb propriu
-tilizarea serverului *eb al providerului de servicii Internet
-tilizarea unui server *eb aparinnd unei firme care ofer servicii de !osting
(nsta!area unui ser"er =e< propriu
Instalarea unui server *eb propriu este cea mai costisitoare soluie, dar ea ofer n sc!imb
avantaje semnificative. )ispunnd de o cone#iune dedicat se pot furniza servicii *eb FJ de ore?zi
utilizatorilor din lumea ntreag. Uei dispune de un control complet asupra serverului *eb i putei
publica orice dorii. ,utei configura serverul i pentru alte servicii, cum ar fi <6,, 9op!er, 6elnet,
scripturi &9I, etc. ,utei de asemenea avea propriul domeniu care va stabili o prezen distinct pe
*eb. dresa -+8 va avea forma urmtoare:
!ttp:??;;;.firmaVdumneavoastra.com?
=ntruct costurile necesare ec!ipamentului !ard;are, cone#iunii la Internet, configurrii i
ntreinerii unui server propriu depesc posibilitile unui utilizator obinuit, nu vom insista asupra
acestei soluii.
ti!i.area ser"eru!ui =e< a! pro"ideru!ui (S:
-tilizarea serverului *eb al providerului dumneavoastr de Internet este o opiune economic.
7uli dintre furnizorii de servicii Internet ofer n cadrul contului de acces i un anumit spaiu pe
serverele proprii pe care v putei plasa site"ul, fr a percepe ta#e suplimentare. )in pcate, spaiul
oferit este de obicei mic, de ordinul C"H 7b i nu sunt oferite faciliti pentru crearea de pagini
dinamice. ,entru a obine faciliti suplimentare va trebui s pltii n plus.
&u toate c fiierele standard, contul de email i fiierele publicate pe *eb utilizeaz acest spaiu,
F"H 7b sunt de regul suficieni pentru a menine un site modest ca dimensiuni. &ontul la I(, este
accesibil pe baza unei cone#iuni dial"up care permite o legtur cu o vitez de pn la GA Xbps.
=nainte de a desc!ide un astfel de cont, trebuie verificate detaliile privind spaiul de stocare, ta#ele
pentru spaiul adiional, n mod curent Fm pentru C 7b, eventualele alte ta#e. 6rebuie verificat de
asemenea disponibilitatea altor servicii, cum ar fi <6,, 9op!er, 6elnet, scripturi &9I, care ar trebui s
poat fi utilizate gratuit, n cazul n care e#ist.
-n cont la un provider I(, este o opiune economic dar, n acelai timp, limitat. >u e#ist
control al serverului *eb, serviciile adiionale rmnnd la latitudinea providerului. >u vei avea
propriul domeniu, iar adresa -+8 va arta astfel:
!ttp:??;;;.provider.com?pdumneavoastra
ti!i.area unui ser"iciu de /ostin&
&ea mai bun soluie din punctul de vedere al raportului servicii?pre o reprezint folosirea unui
serviciu de !osting pltit. $fertele de pe piaa romneasc sunt numeroase i variate ca pre. =nainte de
a face o alegere este bine s facei un studiu comparativ al acestora n privina spaiului pus la
dispoziie, al modului de transfer al fiierelor, al traficului impus precum i al prezenei diverselor
faciliti: scripturi &9I, baze de date, email personalizat, etc. >u trebuie s pierdei din vedere c site"ul
dumneavoastr se poate dezvolta astfel nct spaiul de stocare rezervat la nceput poate deveni
insuficient.
-tiliznd un serviciu de !osting adresa -+8 a site"ului va avea forma urmtoare:
!ttp:??;;;.dumneavoastra.com
)e asemenea vei beneficia i de una sau mai multe adrese de email personalizate de tipul:
adresahdumneavoastra.com
<olosirea serviciilor unei firme de !osting v permite ca, odat ce deinei propriul nume de
domeniu, s v transferai site"ul pe serverul *eb al firmei i s beneficiai de o prezen stabil pe
*eb. <irmele de !osting ofer uneori i nume de domenii pentru clienii lor ns e#ist riscul ca dac v
!otri s renunai la serviciile acelei firme s pierdei domeniul. )in acest motiv este mai bine s
tratai separat cele dou probleme.
3. Dr&ani.area i denumirea 'iiere!or
)ei aceast etap este intrinsec procesului de construire a site"ului, o vom discuta n acest
capitol, deoarece acum este momentul cnd o bun organizare a directoarelor, subdirectoarelor i
fiierelor devine deosebit de important.
Dr&ani.area directoare!or i 'iiere!or
Este foarte bine s organizai fiierele care fac parte din site pe computerul dumneavoastr e#act
aa cum ele vor fi organizate pe serverul *eb. (erverul *eb are un director %rdcin% /root3 unde vor
fi stocate toate fiierele site"ului. <olderul unde vei stoca aceste fiiere pe computerul personal va juca
rolul directorului %rdcin% al serverului. =n directorul %rdcin% va fi plasat fiierul care va conine
pagina %!ome% a site"ului, fiier denumit de obicei index)html sau index)htm.
)ac site"ul este de mici dimensiuni /ntre G i CB pagini3 putei plasa toate fiierele n acelai
director. )ac site"ul este mai mare, este recomandat s creai pentru fiecare seciune principal a sa
cte un subdirector care va conine fiierele asociate acelei seciuni. (ubdirectoarele pot conine la
rndul lor cte un fiier inde#. tunci cnd vei transfera fiierele de pe computerul dumneavoastr pe
serverul *eb vei putea s transferai ntregul subdirector cu fiierele coninute n el. )e asemenea
aceast metod va face i ntreinerea site"ului mult mai uoar.
$ alt problem este locul unde vei stoca imaginile. ,ractica standard este de a crea un
subdirector special n directorul %rdcin% unde s plasai toate imaginile din site. )ac procedai
astfel este e#trem de important s creai un subdirector similar cu aceeai amplasare i pe computerul
dumneavoastr. &alea de la pagina care apeleaz o imagine la imaginea respectiv trebuie s fie aceeai
i pe computerul dumneavoastr i pe server, altminteri imaginile nu se vor afia dup ce site"ul a fost
transferat pe server.
$ alt variant de stocare a imaginilor este crearea unui subdirector destinat imaginilor, plasat n
subdirectorul fiecrei pagini. &u aceleai precauii legate de calea corect ctre imagini, aceast metod
funcioneaz bine, ba c!iar mbuntete viteza de ncrcare a imaginilor n pagini. )ezavantajul
const n faptul c adesea este necesar s reinei mai multe copii ale aceleiai imagini n diferite
subdirectoare, n funcie de paginile unde este folosit.
Ceri'icarea nume!or 'iiere!or
8a mutarea fiierelor de pe computerul dumneavoastr pe serverul *eb se impune verificarea
numelor fiierelor care trebuie s fie compatibile cu sistemul pe sunt mutate.
$ atenie deosebit trebuie acordat denumirii i e#tensiei fiierelor. >u are importan dac
optai pentru e#tensia )html sau )htm. 6ot ce trebuie este s fii consecvent cu e#tensia aleas de"a
lungul ntregului site. )e asemenea, trebuie s avei n vedere c n sistemele ->IW, cele mai des
folosite ca servere *eb, denumirile fiierelor sunt case!sensitive. $ pagin denumit m$page)html nu
este totuna cu pagina M$&age)html. ,entru a evita confuziile folosii pentru denumirea fiierelor numai
litere mici.
4. Trans'eru! 'iiere!or
6ransferul fiierelor care compun site"ul de pe computerul propriu pe serverul *eb este o
operaiune relativ simpl, care const n copierea fiierelor pe server n locaia destinat site"ului
dumneavoastr. -nele dintre firmele de !osting asigur o aplicaie special destinat transferului
fiierelor, dar cea mai utilizat metod de transfer este prin intermediul unui client <6,.
-n client 2!& /.ile %ransfer &rotocol3 este o aplicaie prin intermediul creia se poate realiza
transferul fiierelor de pe un sistem pe altul. ,utei copia fiiere de pe computerul personal pe un alt
computer /operaie denumit Cpload3 dup cum putei prelua fiiere de pe un alt computer, pe
computerul personal /operaie denumit Donload3. &ele mai folosite programe <6, sunt Cute.%&
/!ttp:??;;;.cuteftp.com3 i "+G.%& /!ttp:??ips;itc!.com3. $dat ce ai instalat pe computerul
dumneavoastr un client <6,, v"ai nregistrat numele de domeniu i avei un cont la un serviciu de
gzduire totul este pregtit pentru transferul fiierelor care compun site"ul pe serverul gazd.
,entru a realiza transferul fiierelor, n general va trebui s urmai urmtorii pai:
&onectarea la Internet
)esc!iderea programului <6,. Uei observa o serie de casete de dialog n care trebuie
introduse informaiile necesare programului pentru a realiza cone#iunea cu computerul gazd.
,entru a face cone#iunea cu serverul trebuie s furnizai programului adresa <6, a !ost"ului
dumneavoastr. ceasta v este furnizat de firma de !osting la desc!iderea contului. )e asemenea,
programul v va cere numele de utilizator i parola pe care le"ai stabilit la desc!iderea contului. >u
uitai s de"bifai opiunea 0non$mous din meniul (ogin. ,rin introducerea numelui de utilizator i a
parolei vei cpta acces la contul dumneavoastr i vei putea intra n directorul unde vor fi plasate
fiierele site"ului.
$ alt informaie care trebuie furnizat programului este tipul fiierelor transferate. =n general
pentru fiierele 5678 se folosete opiunea 0+C'' iar pentru celelalte fiiere, opiunea binar$. 7ai
simplu, putei alege opiunea 0utoDetect prin care programul determin singur tipul fiierului i modul
cum va face transmiterea lui.
&elelalte casete de dialog pot fi lsate necompletate sau cu setrile pree#istente.
)up furnizarea acestor informaii programul <6, va realiza cone#iunea cu serverul gazd.
(electarea fiierelor pe care dorii s le copiai. Uei observa c fereastra aplicaiei <6, este
mprit n dou: ntr"o parte avei directoarele de pe computerul personal, n cealalt parte
directoarele de pe computerul gazd. (electai directorul care conine fiierele dumneavoastr i dai
comanda de transfer n directorul care v este destinat pe serverul gazd.
)ac folosii scripturi &9I asociate site"ului trebuie s le acordai o atenie special. &ele mai
multe servere necesit instalarea scripturilor &9I ntr"un subdirector special numit cgi!bin, aflat n
directorul dumneavoastr. ,entru plasarea i setarea corect a scripturilor trebuie s luai legtura cu
administratorul serverului gazd care v va oferi indicaiile necesare.
,e unele sisteme de operare modul de accesare al fiierelor este strict definit, permind sau
restricionnd citirea, scrierea sau e#ecutarea fiierelor de ctre diferii utilizatori. ceste faciliti sunt
setate de regul prin drepturile de acces atribuite fiierelor. )in acest motiv, verificarea modului de
setare a fiierelor este e#trem de important. )e e#emplu, n sistemele ->IW modul 1BG semnific
faptul c fiierele pot fi citite, modificate sau e#ecutate de proprietarul lor, n vreme ce ali utilizatori nu
le pot dect citi sau e#ecuta /dup caz3.
)up transferul fiierelor, pot aprea probleme de diverse tipuri. -neori, paginile publicate nu pot
fi accesate deloc, scripturile nu funcioneaz, etc. ,rimul lucru care trebuie verificat n acest caz este
dac fiierele se afl n directoarele potrivite. poi trebuie verificate permisiunile de acces pentru
directoare i fiiere, e#tensiile fiierelor, fiierele inde#. =n cazul cnd apar probleme, cea mai sigur
cale de rezolvare a lor este s luai legtura cu administratorul serverului gazd i s i cerei informaii
ct mai complete privind drepturile de acces pentru directoare, calea corect ctre scripturile folosite i,
n general, setrile necesare pentru buna funcionare a site"ului.
). -e.umat
=n etapa de publicare pe *eb a site"ului trebuie parcuri urmtorii pai:
(tabilirea unui nume de domeniu pentru site: gratuit sau pltit.
9sirea unui serviciu de gzduire convenabil sub raportul servicii?pre.
$rganizarea i denumirea directoarelor i fiierelor n conformitate cu cerinele
sistemului serverului gazd.
6ransferul fiierelor, cea mai folosit metod de transfer fiind prin <6,.
Cteva cuvinteYla 5inal
m ajuns, iat, la finalul cltoriei noastre. vei, acum, toate informaiile i instrumentele
necesare construirii unui site atrgtor, funcional i eficient. ,utei ncepe prin a v construi o pagin
personal pe care o putei plasa pe un server gratuit, pentru a e#ersa cunotinele dobndite. )ar acesta
este doar primul pas.
)esignul *eb este unul dintre domeniile cu un mare potenial de dezvoltare. 6ot mai multe firme
doresc site"uri pe *eb, fie pentru a derula afaceri prin intermediul lor, fie doar pentru a"i prezenta
oferta de produse i servicii. $ carier n acest domeniu este o alegere cu mari anse de succes pentru
orice tnr. 7ai mult, dei pe *eb"ul romnesc aceast zon este nc slab dezvoltat, putei s v
iniiai propria afacere care s se deruleze e#clusiv pe Internet.
ceast carte a urmrit s v ofere informaiile necesare unui start corect n domeniul designului
*eb. )ar nu trebuie s v oprii aici. )esignul i programarea *eb reprezint domenii vaste iar cartea
noastr a atins doar elementele de baz ale acestora. ,utei continua nvnd s programai n ,erl
pentru a crea scripturi &9I, putei nva :ava(cript, :ava sau un limbaj de interogare pentru bazele de
date stocate pe server. ,utei deveni familiar cu unul din editoarele puternice de 5678 /7acromedia
)ream;aver este cel mai utilizat n acest moment3 sau putei nva s stpnii foarte bine un program
de grafic /&orel)ra; sau dobe ,!otos!op de e#emplu3 pentru a crea grafic *eb. ,osibilitile sunt
nenumrate.
=n lumea *orld *ide *eb totul este ntr"o continu micare i dezvoltare. ceast carte v"a oferit
fundamentele programrii n 5678. &ontinuai s nvai, perfecionai"v continuu i succesul viitor
v este asigurat.