Prof.

Eugenia Lucia Stamate

Limbajul HTML si elemente de design Web
Crearea si publicarea unui site Web
General troublemaker: Alex Ricochet
http://www.softpageinternet.ro/manual_html/
Cuprins
Cteva cuvinte...nainte
HTML i World Wide Web
Capitolul 1 Primii pai
1. Ce este !"L#
$. Stan%ar%e &i extensii !"L
'. Con(inut &i aspect )ntr*un %ocument !"L
+. ,neltele %e care a-e(i ne-oie
.. Cum s/ proce%a(i#
0. Con-en(ii %e nota(ie
1. Re2umat
Capitolul 2 Structura unui document HTML
1. Ce este un %ocument !"L#
$. Etichete %e structur/
'. 3olosirea corect/ a etichetelor
+. Re2umat
.. !est
Capitolul 3 Culori
1. Sistemul %e %efinire a culorilor
$. Corespon%en(a %intre co%urile hexa2ecimal &i 2ecimal
'. Culoarea fun%alului
+. Culoarea textului
.. Culoarea leg/turilor
0. Alegerea culorilor
1. Culori 4sigure4
5. Re2umat
6. !est
Capitolul !onturi
1. 3ormatarea caracterelor
$. Accentuarea textului
'. Etichete logice &i etichete fi2ice
+. Re2umat
.. !est
Capitolul " !ormatarea te#tului
1. !recerea la un r7n% nou
$. !itlurile 8ea%ings9
'. Paragrafele
+. Preformatarea textului
.. Centrarea textului
0. Afi&area textului pe o singur/ linie
1. :locul ;<=>?
5. Linii ori2ontale
6. =nserarea unei a%rese po&tale
1@. =nserarea unui citat
11. =nserarea caracterelor speciale
1$. Sugestii pri-in% aspectul textului
1'. Re2umat
1+. !est
Capitolul $ Le%&turi 'Lin()uri*
1. A%resa ,RL
$. A%rese absolute &i a%rese relati-e
'. Stabilirea leg/turilor
+. Ancore * leg/turi )n ca%rul aceleia&i pagini
.. Leg/tura c/tre o pagin/ aflat/ )n acela&i %irector 8fol%er9
0. Leg/tura c/tre o pagin/ locali2at/ )n alt %irector 8fol%er9
1. Leg/tura c/tre pagini externe
5. Alegerea culorilor pentru leg/turi
6. ,tili2area po&tei electronice 8e*mail9
1@. Leg/turi c/tre fi&iere oarecare
11. <eschi%erea paginilor referite printr*o leg/tur/
1$. Crearea unei bare secun%are %e na-igare
1'. Re2umat
1+. !est
Capitolul + ,ma%ini i elemente multimedia
1. 3ormatele fi&ierelor grafice
$. C7te-a meto%e %e ob(inere a imaginilor
'. =nserarea unei imagini
+. <imensionarea imaginii
.. Alinierea imaginii &i a textului
0. =magini folosite ca fon% 8backgroun%9 al paginii
1. =magini folosite ca leg/turi
5. =maginile miniaturale 8thumbnails9
6. =maginile -i%eo
1@. Sunetele
11. Sugestii pri-in% folosirea imaginilor &i elementelor multime%ia
1$. =maginile &i timpul %e )nc/rcare al paginii
1'. Re2umat
1+. !est
Capitolul - Li.te
1. Liste neor%onate
$. Liste or%onate
'. =mbricarea listelor
+. Liste %e %efini(ii
.. Re2umat
0. !est
Capitolul / Tabele
1. Crearea unui tabel
$. Alinierea tabelului )n pagin/
'. <imensionarea unui tabel
+. Spa(ierea celulelor unui tabel
.. <imensionarea celulelor unui tabel
0. Alinierea con(inutului unei celule
1. <efinirea culorilor pentru un tabel
5. !itlul unui tabel
6. Capul %e tabel
1@. !abele %e forme oarecare
11. Celule f/r/ con(inut
1$. Grupuri %e coloane
1'. Atribute pentru aspectul chenarului unui tabel
1+. !abele imbricate
1.. Recoman%/ri pri-in% folosirea tabelelor
10. Re2umat
11. !est
Capitolul 10 Cadre '!rame.*
1. <ocumentul %e %efinire a ca%relor
$. Ca%re imbricate
'. Controlul aspectului unui ca%ru
+. :are %e %erulare
.. Po2i(ionarea %ocumentului )ntr*un ca%ru
0. Ca%re interne
1. <eschi%erea %ocumentelor )n alte ca%re
5. Sugestii pri-in% folosirea ca%relor
6. Re2umat
1@. !est
Capitolul 11 !ormulare '!orm.*
1. Ce este un formular#
$. Crearea unui formular
'. Eticheta ;=AP,!?
+. Etichetele ;SELEC!? &i ;BP!=BA?
.. Eticheta ;!EC!AREA?
0. >ali%area %atelor
1. Re2umat
5. !est
Capitolul 12 Script)uri C1,
1. Ce este CG=#
$. !ransferul %atelor
'. Execu(ia script*ului
+. Structura unui script
.. Exemple %e script*uri
0. =nstalarea interpretorului Perl &i a aplica(iei PDS
1. Re2umat
Capitolul 13 2avaScript
1. Ce este Ea-aScript#
$. Cum poate fi inclus un script )n pagin/#
'. "o%ul %e execu(ie al script*ului
+. Ce se poate reali2a cu Ea-aScript#
.. Re2umat
Capitolul 1 !oi de .tiluri 'CSS*
1. Ce este un stil#
$. !ipuri %e foi %e stiluri
'. Efecte ob(inute cu aFutorul stilurilor
+. Re2umat
Capitolul 1" 3lemente avan.ate de %ra4ic&
1. =magini hart/
$. =magini animate
'. =magini transparente
+. Re2umat
Capitolul 1$ Motoare de c&utare i metata%)uri
1. Ce este un motor %e c/utare#
$. "etatag*uri
'. Re2umat
Crearea i publicarea unui .ite
Capitolul 1+ Plani4icarea
1. 3actori care nu pot fi planifica(i
$. Etapele planific/rii site*ului
'. Re2umat
Capitolul 1- 5e.i%nul
1. Principiile %esignului Geb
$. Brgani2area unui site
'. "eto%ologia %e construire a site*ului
+. !ehnici %e %esign Geb
.. Gre&eli %e %esign
0. Re2umat
Capitolul 1/ Te.tarea
1. Corectarea paginilor
$. !estarea paginilor
'. Re2umat
Capitolul 20 Publicarea
1. Aumele %e %omeniu
$. Ser-iciul %e g/2%uire Deb 8Deb hosting9
'. Brgani2area &i %enumirea fi&ierelor
+. !ransferul fi&ierelor
.. Re2umat
0. C7te-a cu-inte...la final
6ne#a 1 ,nde# etic7ete
6ne#a 2 1lo.ar
6ne#a 3 Tabelul culorilor

C7te-a cu-inte...)nainte
Internetul reprezint, fr ndoial, mediul de comunicare al viitorului, un viitor care, n multe pri ale lumii
deja a nceput. l reprezint o verita!il revoluie pa"nic "i tcut, care rezid n asocierea progresiv dintre
informatic "i mijloacele de comunicare, conduc#nd la o integrare fascinant a tuturor mijloacelor tradiionale
de comunicare: telefonie clasic "i mo!il, radio, televiziune, transmisii de date, nregistrri audio "i video. $u
aprut chiar forme noi de comunicare, utilizate cu entuziasm de milioane de oameni din lumea ntreag, cum
sunt e%mail%ul "i chat%ul, care deja au do!#ndit reguli proprii, o cultur "i chiar "i un folclor propriu.
Internetul a produs totodat o e&traordinar democratizare a informaiei "i comunicrii. ' cantitate
literalmente uria" de informaie, su! toate formele sale: te&t, imagini statice sau video, sunet, adunate ntr%o
(!i!liotec( accesi!il oricui, oric#nd, de la orice calculator legat la reea, fa de care chiar "i cele mai
complete enciclopedii clasice par o glum. $ devenit o joac de copil comunicarea direct, n timp real, cu
veri"oara din )luj, cu prietenul din $ustralia, cu firma furnizoare din *razilia sau cu !anca din lveia. +unt
suficiente pentru toate acestea un computer, un modem "i o linie telefonic.
,e"i Internetul "i -orld -ide -e! cunosc o e&pansiune e&ponenial, se afirm totu"i c se afl nc n faza
copilriei. .aport#ndu%ne la o astfel de apreciere, am putea afirma c n .om#nia 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 deschidere e&traordinare ctre orice su!iect legat de
Internet, acest domeniu este cel mai adesea ignorat n licee, sau tratat cu superficialitate. /rogramele "colare
nu l a!ordeaz dec#t tangenial, prin urmare nu e&ist manuale "colare dedicate, iar lucrrile de specialitate la
un nivel accesi!il strlucesc prin a!sen. ,esignul "i programarea -e! 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. 0nul din motive l constituie, desigur, atenia insuficient acordat acestor
ramuri ale informaticii n nvm#ntul liceal, alturi de un contact direct cu Internetul e&trem de redus, limitat
mai ales de posi!ilitile tehnice "i economice actuale ale "colilor.
$rgumentul principal care m%a determinat s scriu aceast carte a fost un sondaj realizat n r#ndul elevilor
unui liceu de informatic, sondaj ale crui rezultate au confirmat impresia iniial. 1i anume faptul c, n
marea lor majoritate 23456, elevii "i doresc s nvee nu doar s utilizeze Internetul, ci, urm#nd ndrzneala
tipic v#rstei, 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, cuno"tine, g#nduri, sentimente care merit s fie cunoscute "i de ceilali.
1i cum pot fi puse toate acestea n valoare c#t mai eficient, ntr%un mod accesi!il pentru milioane de oameni
din lumea larg, dac nu pe un site -e!7
+copul acestei cri, dedicate lim!ajului specific Internetului, 89:;, "i tehnicilor uzuale de creare a unui site
-e!, 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&haustiv de 89:; "i -e! design. +u!iectele
sunt e&trem de vaste "i ar fi fost imposi!il cuprinderea lor ntr%o singur lucrare. $m dorit s ofer o imagine
de ansam!lu asupra lim!ajului 89:;, cu un marcat accent pe aspectele practice ale utilizrii sale, precum "i
o trecere n revist a unora dintre cele mai folosite tehnici de programare care e&tind posi!ilitile lim!ajului:
script%urile )<I, =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 -e! "i c#teva
dintre tehnicile uzuale de design -e!.
$dres#ndu%se mai ales nceptorilor care stp#nesc totu"i elementele de !az 2utilizarea computerului "i
sistemul de operare -indows, noiuni de editare de te&t "i imagini6, cartea este scris ntr%un lim!aj care se
dore"te accesi!il. >iecare noiune prezentat este nsoit de e&emple reprezentate de secvene de cod 89:;
ce ilustreaz modul ei de aplicare.
.ecomandarea noastr este ca cititorii s verifice personal toate aceste e&emple, deoarece numai
e&periment#nd pe cont propriu se poate ajunge la o !un nelegere "i stp#nire a efectelor codului 89:;
asupra aspectului paginii -e!.
?ncheiem cu sperana c aceasta carte va constitui un instrument de lucru util "i c, la finalul ei cititorii vor
do!#ndi a!ilitatea de a construi, pu!lica "i menine un site propriu interesant, atrgtor "i perfect funcional.
1i, de ce nu, ca o parte din ei s fac din aceast activitate o verita!il profesie.
Not asupra terminologiei utilizate
?ntruc#t anumii termeni din lim!a englez, specifici domeniului a!ordat n prezenta lucrare, au intrat n
lim!ajul 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%hoc, chiar cu riscul de a fi considerate drept
(!ar!arisme( de ctre lingvi"tii puritani. ?n definitiv, n acest fel au intrat n lim!aj termeni deja consacrai
precum computer, tast, monitor, mouse, pixel, CDROM, modem, server, port, ca s dm numai c#teva
e&emple.
/entru unii termeni am utilizat am!ele forme aflate n circulaie, cum ar fi link legtur, font caracter, tag
etichet.
&ist "i autori care folosesc numai echivalentele rom#ne"ti ale acestor termeni. )u toate c traducerea lor
respect cel mai adesea sensul, aceste echivalente nu au reu"it s se impun n lumea informaticii, nu de
puine ori utilizarea lor conduc#nd, n mod parado&al, la confuzii sau nedumeriri. 2@u vor!im aici de
tentativele ridicole, cum ar fi de pilda icoan, sau, nc "i mai ru, iconi, utilizate de unii autori pentru icon,
care fire"te c nu pot avea vreo "ans de succes.6
/rezentm n continuare o list a acestor termeni. &plicaii asupra sensului lor se gsesc n te&t "i/sau n
glosarul prezentat la sf#r"itul crii.
broser !ont site
director host, hosting tag
donload "con template
e#mail $ink %eb
folder &cript
!"L &i Dorl% Di%e Deb
?nainte de a ncepe prezentarea lim!ajului 89:;, vom face c#teva precizri despre semnificaia
conceptului World Wide Web 2ntr%o traducere apro&imativ, p#nz de pianjen, cu sensul de reea,
e&tins n lumea larg6. /recizrile ar putea prea inutile, dar realitatea este c de"i foarte mult lume
vor!e"te despre -orld -ide -e!, puini "tiu e&act ce reprezint. :ai mult, datorit e&tinderii sale
e&poneniale "i a e&traordinarei sale populariti, adesea noiunea este confundat cu cea de Internet.
-orld -ide -e! este ns doar o parte a Internetului.
Internetul e&ist de mai !ine de treizeci de ani. *azele acestuia au fost puse la sf#r"itul anilor ABC, ca
urmare a unei iniiative a ,epartamentului de $prare al +tatelor 0nite, care avea drept scop
realizarea unei reele ro!uste "i fia!ile de comunicaii ntre computere aflate la distan. .eeaua avea
rolul de a asigura un contact permanent ntre elementele sale componente, chiar dac o parte din
legturi ar fi fost ntrerupte ca urmare a unui atac nuclear. 0lterior, reeaua a ptruns n domeniul
civil "i a fost adoptat rapid, iniial de lumea academic, mai apoi de companiile comerciale.
Internetul nu este altceva dec#t un ansam!lu alctuit dintr%un numr enorm de reele de computere
interconectate, localizate pe toat suprafaa glo!ului, care suport diverse pachete software cum ar fi
e%mailul, grupurile de "tiri 2nesgroup6, protocoalele de transfer al fi"ierelor 2>9/6, <opher "i -orld
-ide -e!.
)u toate avantajele imense oferite de posi!ilitile de comunicare glo!al a informaiilor ca "i de
rapiditatea comunicrii, Internetul a rmas, vreme de dou decenii, doar apanajul ageniilor
guvernamentale "i al mediilor "tiinifice. :otivul l%a constituit dezorganizarea sa iniial cvasi%total.
>olosirea unor standarde de comunicaie "i a unor pachete software foarte diverse reprezentau ni"te
!ariere tehnologice aproape insurmonta!ile pentru utilizatorii o!i"nuii. ?n plus, informaiile
accesi!ile la acea vreme pe Internet erau prezentate su! forma unor simple fi"iere 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 -e!.
-orld -ide -e! a luat na"tere n DE3E, ca urmare a eforturilor unor fizicieni ai ).@ 2;a!oratorul
uropean de >izica /articulelor6 de a pune la punct un sistem standardizat pentru crearea "i
distri!uirea documentelor electronice oriunde pe glo!, sistem care s permit integrarea tuturor
elementelor media: te&t, imagini, sunet. $"a cum dovede"te imensa sa popularitate, -e!%ul s%a
dovedit a fi mediul ideal pentru distri!uirea informaiilor ntr%o maniera e&tins "i accesi!il. :otivul
l constituie faptul c -e!%ul asigur o interfa hypermedia pentru informaii. 8Fpermedia
reprezint variatele tipuri de informaie 2te&t, imagini, fi"iere audio "i video6 care pot fi localizate
oriunde pe glo!, mpreun cu legturile dintre ele. /entru a transmite "i a afi"a informaiile
hFpermedia, -e!%ul folose"te un protocol de transfer 2un set de reguli6 care este numit HTTP
2'(pertext )ransfer *rotocol, protocol de transmitere a hFperte&tului6.
,eci, n esen, -orld -ide -e! este o colecie imens de documente interconectate prin
intermediul Internetului, care folose"te protocolul 899/ pentru a afi"a elementele hFpermedia.
/entru a face posi!il o asemenea performan, s%a impus necesitatea ca fiecare computer conectat la
Internet s fie identificat n mod unic, printr%un element numit adresa IP 2"nternet *rotocol6. $dresa
I/ este format din patru numere, fiecare mai mic de GHH, desprite ntre ele prin punct 2de e&emplu
DGI.B4.E.GCD6. ?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
imposi!il. 9otu"i, s ne amintim c Internetul este o reea de reele. l este mprit n grupuri numite
domenii care, la r#ndul lor, sunt mprite n subdomenii. ,atorit acestui fapt, chiar dac un
computer poart un nume destul de comun, prin asocierea acestui nume cu domeniul "i su!domeniile
din care face parte, se o!ine un nume unic de identificare al computerului respectiv.
'rganizarea domeniilor pe Internet respect un model ierarhic. /rimul nivel ierarhic l constituie
diversele tipuri de organizaii. 9ot pe primul nivel se afl "i domeniile corespunztoare rilor lumii,
de e&emplu uk, pentru :area *ritanie sau ro, pentru .om#nia.
0rmtorul nivel ierarhic l constituie organizaiile, firmele, instituiile care dein propriile domenii "i
su!domenii.
Internetul conecteaz dou tipuri de computere: serverele, care furnizeaz documentele, "i clienii,
care solicit "i afi"eaz documentele pentru a fi vizualizate de utilizator.
/entru a accesa "i afi"a documentele 89:;, pe computerul client ruleaz aplicaii numite browsere.
0neori termenii server -e! "i client -e! pot produce confuzii, deoarece se refer at#t la
computerele pe care ruleaz aceste aplicaii c#t "i la aplicaiile n sine. ,in acest motiv, pentru
aplicaia client vom folosi termenul de broser, iar pentru aplicaia sau pachetul de aplicaii care
ruleaz pe server, termenul de aplicaie server.
.elaia client%server pe care se !azeaz funcionarea -orld -ide -e! este facilitat de protocolul de
comunicaie 899/. Interaciunea dintre !rowserul -e! "i serverul -e! 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
ndepline"te cererea clientului, caz n care o!iectul solicitat este transmis !rowserului, fie o refuz,
situaie n care !rowserul afi"eaz !inecunoscutele mesaje de eroare (The page cannot be displayed(
sau (File not found(.
)u alte cuvinte, procesul vizualizrii unei pagini -e! ncepe cu o cerere a !rowserului -e! ctre
serverul -e!. *rowserul transmite serverului detalii despre el nsu"i "i despre fi"ierul pe care l
dore"te prin intermediul unui header HTTP de cerere 2headerul este acea parte a unui pachet de date
care este plasat naintea informaiilor efectiv transmise "i care poate conine adresa sursei "i a
destinaiei, verificri ale erorilor "i alte c#mpuri6. +erverul prime"te "i analizeaz headerele 899/ de
cerere n cutarea informaiilor relevante, cum ar fi numele fi"ierului care este solicitat "i transmite
napoi fi"ierul cerut mpreun cu headerele 899/ de rspuns. *rowserul folose"te headerele 899/
de rspuns pentru a determina cum s afi"eze rezultatele o!inute.
9re!uie s su!liniem c !rowserele nu au nevoie de cone&iune la Internet ca s funcioneze. /utei
ncrca "i afi"a cu ajutorul !rowserului dumneavoastr documente 89:; care sunt stocate pe
propriul hard%disJ. $ceasta v d, printre altele, posi!ilitatea de a definitiva "i testa documentele
89:; nainte de a le pu!lica pe Internet, evit#nd astfel prezentarea unor pagini nc nefinalizate, cu
erori, sau care funcioneaz defectuos.
Capitolul 1
Primii pa&i

1. Ce este HTML?
HTM este o a!reviere de la '(pertext Markup $anguage "i reprezint scheletul oricrei pagini de -e!.
89:; nu este un lim!aj de programare. @u vei lucra aici cu varia!ile, e&presii, tipuri de date, structuri
de control. 89:; este un lim!aj descriptiv, prin care sunt descrise elementele structurale ale paginii de
-e!: titlurile, listele, ta!elele, paragrafele, legturile cu alte pagini, precum "i aspectul pe care l are
pagina din punct de vedere grafic. ?n fond, 89:; este modul n care i comunicam !rowserului ce
elemente dorim s introducem n pagina -e! "i care este aspectul acestora.
2. Standarde i extensii HTML
89:; este un limba! standardizat, aceasta nsemn#nd c orice !rowser poate interpreta "i afi"a corect
un document -e!. +inta&a de !az a lim!ajului 89:; este definit n versiunea HTM "#$. ?n prezent a
fost lansat "i versiunea 89:; K.C care se afl n curs de standardizare. ,e la o versiune la alta,
lim!ajului 89:; i se aduga noi elemente. ,e asemenea, fiecare tip de !rowser 2@etscape @avigator "i
Internet &plorer, n particular6 folose"te anumite elemente ne%standard, pentru a m!unti capacitile
lim!ajului. tichetele noi, care nu fac parte din versiunea standard poart numele de e%tensii. ?n general,
!rowserele cele mai folosite, @etscape @avigator "i Internet &plorer recunosc etichetele 89:; I.G "i o
mare parte din cele nou introduse n 89:; K.C.
ste recomandat s evitai e&tensiile, n afara cazului c#nd avei un motiv foarte serios pentru a le folosi.
/entru utilizatorii !rowserelor care nu recunosc aceste e&tensii, anumite pri ale documentului
dumneavoastr pot deveni complet ilizi!ile.
*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 !rowserele care nu suport aceste e&tensii. )ele mai multe dintre acestea vor ignora
e&tensiile "i vor afi"a 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 ai! un aspect foarte dezordonat n
!rowserele care nu suport e&tensii de acest tip. +au, n cazurile cele mai grave, acea parte a
documentului poate s nu fie deloc afi"at.
3. Coninut i aspect ntr-un document HTML
/entru a realiza documente -e! eficiente, cu impact asupra cititorului, "i pentru a valorifica pe deplin
puterea lim!ajului 89:;, tre!uie s inei seama de o idee fundamental: 89:; este destinat
structurrii documentele "i nu doar formatrii n vederea afi"rii lor.
89:; furnizeaz modaliti variate pentru a defini aspectul documentului: specificaii legate de fonturi
2tipurile de caractere6, de formatare a te&tului, de culori, etc. ,esigur, aspectul formal este important, cci
el poate veni n !eneficiul sau n detrimentul accesi!ilitii informaiilor prezentate.
9otu"i, nu aspectul formal, ci coninutul documentului primeaz. 89:; conine numeroase ci de
structurare a coninutului documentului fr a pune pro!lema felului cum vor fi afi"ate elementele: titluri,
liste, paragrafe, imagini, etc. 9oate acestea sunt definite n lim!ajul 89:; fr a impune !rowserului s
le afi"eze ntr%un anumit mod. *rowserului i se las astfel posi!ilitatea de a afi"a respectivele elemente n
conformitate cu rolul pe care l au ele n structura documentului "i nu respect#nd regulile impuse de
creatorul documentului 89:;.
:arele avantaj al a!ordrii !azate pe coninut fa de cea !azat pe aspect rezid n faptul c paginile
dumneavoastr vor fi vizualizate cu tipuri diferite de !rowsere, fiecare av#nd versiuni diferite.
?n a!ordarea !azat pe aspect, dac !rowserul nu recunoa"te indicaiile de formatare specificate, fie nu le
e&ecut, fie le e&ecut eronat, astfel c structurarea paginii va avea de suferit.
?n a!ordarea !azat pe coninut, indiferent cum va alege !rowserul s e&ecute indicaiile de formatare,
semnificaia elementelor din pagin va rm#ne neschim!at.
,e e&emplu, dac vei afi"a titlurile "i su!titlurile din pagin folosind tipuri diferite de fonturi, caractere
cu stiluri variate: aldine 2!old, sau ngro"ate6, cursive 2italice, sau nclinate6, su!liniate, etc., un !rowser
care nu recunoa"te aceste elemente ar putea afi"a titlurile n acela"i mod n care afi"eaz restul te&tului,
astfel c semnificaia lor n pagin "i%ar pierde relevana.
/e de alt parte, dac vei folosi etichetele speciale pentru titluri, chiar daca !rowserul nu le recunoa"te,
are posi!ilitatea de a evidenia totu"i titlurile n cea mai !un manier pe care o are la dispoziie, astfel
nc#t 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 89:; 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 gra&ic cu care s prelucrai imaginile
pe care le vei introduce n pagin "i o cone%iune la Internet.
3ditorul
/entru a scrie documente 89:; avei la dispoziie trei posi!iliti:
D. >olosirea unui simplu editor de te%t.
)el mai cunoscut "i accesi!il este @otepad%ul din -indows.
'tenie(
@u este recomandat s folosii un procesor de te&t comple& cum este :icrosoft -ord, chiar dac acesta
poate salva documentele n format 89:; 2cu e&tensia +htm6, deoarece la salvarea documentelor -ord%ul
adaug automat la te&tul documentului dumneavoastr o mare cantitate de cod conin#nd informaii
lipsite de relevan care ncarc inutil documentul "i mre"te dimensiunile fi"ierului.
G. >olosirea unui editor HTM.
$cest tip de editoare dedicate ofer faciliti n scrierea codului, realizeaz corectarea documentului din
punct de vedere sintactic "i chiar scriu secvene de cod pentru anumite elemente pe care dorii s le
inserai n document.
I. >olosirea unui editor W)*IW)+ 2%hat ,ou &ee "s %hat ,ou -et, n traducere li!er (ceea ce vezi
la editare este ceea ce o!ii la vizualizare(6.
0n editor de tip -L+I-L< permite alegerea "i formatarea, cu ajutorul mouse%ului, a elementelor pe
care dorii s le includei n pagin: ta!ele, linJ%uri, formulare, putei sta!ili tipul fonturilor, culorile,
aranjarea te&tului n pagina. /e msur ce un anumit element este inserat, editorul scrie n mod automat
codul 89:; corespunztor, fr ca utilizatorul s fie nevoit s intervin asupra lui. 9otu"i, dac avei
cuno"tine de 89:; putei interveni la nivelul codului n orice manier dorii, orice schim!are pe care o
facei n cod, reflect#ndu%se automat n aspectul paginii.
/rintre profesioni"ti persist o controvers n privina tipurilor de editoare care ar tre!ui folosite pentru a
edita documentele 89:;. ?n esen, pro!lema este aceasta: este mai !ine s%i construie"ti paginile
folosind 89:; (pur(, adic scriind totul tu nsui, sau este de preferat s folose"ti un editor de tipul
-L+I-L<7 ditoare deose!it de puternice de acest tip: :acromedia ,reamweaver, :icrosoft >ront
/age, )offe )up ca s dm numai c#teva e&emple, par a nclina definitiv !alana n favoarea acestui tip
de editare. le ofer facilitai avansate de editare a paginii, inclusiv posi!ilitatea 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.
&ist, de asemenea "i editoare de tip (!uilt%in(. $cestea sunt cel mai u"or de folosit "i adesea sunt puse
la dispoziie de providerii care ofer "i servicii gratuite de hosting 2www.home.ro, www.rhp.ro, etc.6.
ditoarele de acest tip ofer un numr 2de o!icei redus6 de template%uri 2pagini preformatate6, "i doar
c#teva opiuni de editare: putei aduga te&t, modifica tipul fonturilor, culoarea fundalului "i a te&tului,
forma !utoanelor de navigare, putei include un numr presta!ilit de imagini. ,in pcate, gradul de
control asupra aspectului paginii este foarte redus. 0tilizatorul este limitat la c#teva opiuni, iar numrul
mic de template%uri puse la dispoziie face ca pagina s fie lipsita de originalitate.
$i putea, atunci, s v ntre!ai de ce mai este nevoie s nvai 89:; dac e&ist editoare profesionale
care scriu codul n locul dumneavoastr. ?n fond, muli dintre we! designerii profesioni"ti le folosesc,
deoarece a scrie codul unui site (!F hand(, cu ajutorul unui simplu editor de te&t, este o munca titanic "i
mare consumatoare de timp.
.spunsul este simplu: tre!uie s cunoa"tei 89:; deoarece oric#t de performant ar fi un editor
-L+I-L<, mai devreme sau mai t#rziu 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 o!icei, interveniile necesare asupra codului pentru depanarea sa sunt minime "i u"or de realizat... cu
condiia s "tii ce tre!uie s facei. )u alte cuvinte, s "tii 89:;.
?n concluzie, oricare ar fi opiunea dumneavoastr, fie c vei folosi un editor de 89:; de tip te&t, fie c
vei folosi unul de tip -L+I-L<, pentru a putea construi documente -e! corecte "i funcionale este
nevoie s stp#nii !ine lim!ajul 89:;.
8ro9.erul
vident, pentru a vizualiza documentele dumneavoastr avei nevoie de un !rowser. .ecomandarea
noastr este s deinei cel puin dou dintre cele mai rsp#ndite !rowsere, Internet &plorer "i @etscape
@avigator, de dorit ar fi chiar cu versiuni diferite ale aceluia"i !rowser. 9estarea paginilor dumneavoastr
su! diferite !rowsere este o etap important naintea pu!licrii lor pe -e!.
,e"i n anii de nceput ai -e!%ului pro!lema aspectului paginilor n diferite tipuri de !rowsere era vital,
deoarece erau folosite o mare diversitate de !rowsere, fiecare tip realiz#nd afi"area paginilor n maniera
sa proprie, n prezent aceast pro!lem "i%a pierdut din importan. :otivul este acela c !rowserele
Internet &plorer au acaparat cea mai mare parte din pia, statisticile art#nd c Internet &plorer este
tipul folosit de EI5 dintre utilizatori iar @etscape @avigator de circa B5 dintre ei.
3ditorul %ra4ic
,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,raw "i $do!e /hotoshop. /utei alege ns acel editor cu care suntei deja familiarizat, chiar dac
mai puin performant, mai ales dac pentru nceput nu dorii s facei prelucrri foarte comple&e ale
imaginilor.
Cone#iunea la ,nternet
+pre deose!ire de primele trei instrumente, cone&iunea la Internet nu este a!solut esenial n etapa de
construire a documentului 89:;. $"a cum spuneam, documentele 89:; 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 -e! vei gsi nenumrate e&emple, "i !une "i rele, pe care le putei studia. ?n
plus, vei avea acces la o cantitate uria" "i n continu cre"tere de resurse, documentaie "i produse care
v vor ajuta cu siguran la construirea paginilor dumneavoastr. 1i, 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 c#teva indicaii n privina modului n
care v putei organiza activitatea:
)reai%v n folderul M( Documents 2sau ntr%o alta locaie aleas de dumneavoastr6 un folder de
lucru numit %ork.
,eschidei editorul de te&t n care ai ales s lucrai 2ar fi de dorit ca pe parcursul procesului de
nvare s folosii un simplu editor te&t, de e&emplu @otepad6.
+criei 2editai6 fiecare e&emplu pe care l gsii aici.
+alvai%l n folderul dumneavoastr cu numele indicat n !locul <TITLE> "i e&tensia +html. /utei
folosi at#t e&tensia +html c#t "i e&tensia +htm dar este !ine ca odat ce ai ales o anumit e&tensie s
fii consecvent n folosirea ei. ,enumii%v fi"ierele cu litere mici.
'tenie(
ditorul de te&t .otepad salveaz fi"ierele cu e&tensia implicita (+txt(. ,e aceea c#nd salvai este necesar
s precizai n mod e&plicit e&tensia dorit 2+html sau +htm6
)#nd vei salva fi"ierul creat n @otepad s%ar putea s constatai c restul de fi"iere 89:; pe care le%
ai salvat anterior nu apar n fereastr. /entru a le vedea, deschidei meniul !ile>&ave /s+++, iar n
fereastra deschis selectai din list /ll files.
,eschidei cu !rowserul utilizat fi"ierul 89:; 2!ile> Open> 0rose6 pentru a vedea cum arat
pagina -e! descris n fi"ierul dumneavoastr.
,up fiecare modificare pe care o facei n fi"ierul 89:; nu uitai s%l salvai, altminteri schim!rile
fcute nu se vor reflecta n aspectul final al paginii.
/entru a o!serva felul cum modificrile pe care le facei n codul 89:; schim! aspectul paginii,
tre!uie s apsai !utonul Refresh1Reload al !rowserului.
/entru a putea s vizualizai cu u"urin aspectul paginilor dumneavoastr este !ine s avei deschise
permanent at#t editorul de te&t n care scriei documentul 89:; c#t "i !rowserul cu care l
vizualizai.
%. Con"enii de notaie
89:; nu este un lim!aj case#sensitive, adic nu face distincia ntre literele mici "i cele mari2majuscule6.
$ceasta nseamn c indiferent cum scriem etichetele, cu litere mari sau cu litere mici, ele vor fi corect
interpretate de !rowser. ,in acest motiv pe parcursul acestei lucrri vom utiliza o convenie de notaie n
care etichetele 2tag%urile6 89:; sunt scrise cu majuscule iar atri!utele asociate acestora sunt scrise cu
litere mici pentru o mai !un 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 u"or.
/este tot n cadrul te&tului, unde apar etichete, atri!ute sau valori ale acestora am folosit caractere
)ourier @ew pentru a diferenia elementele de lim!aj de restul te&tului.
,e asemenea, vei o!serva c, n e&emplele prezentate, codul 89:; este scris indentat, adic aliniat la
diverse nivele. )a "i n cazul etichetelor, acest lucru nu are importan pentru !rowser. Indentarea v este
util doar dumneavoastr, pentru a diferenia "i urmri mai u"or diversele elemente pe care le includei n
document. 9otu"i, dac n cazul etichetelor putei opta pentru orice variant dorii n privina scrierii lor,
indentarea este recomandat chiar "i programatorilor cu e&perien. 0n cod neindentat este foarte greu de
citit "i de depanat, n cazul apariiei unor erori.
&. 'e(umat
-orld -ide -e! este o colecie imens de documente interconectate prin intermediul Internetului, care
asigur o interfa hFpermedia pentru informaii.
/entru a transmite "i afi"a documentele, -orld -ide -e! folose"te protocolului de comunicaie 899/.
>uncionarea -orld -ide -e! se !azeaz pe relaia client%server. )lienii sunt !rowserele -e! iar
serverele sunt serverele -e!.
;im!ajul 89:; realizeaz descrierea documentelor -e!. /rin intermediul su i se comunic
!rowserului ce elemente fac parte din pagina -e! "i care este aspectul acestora. ste recomandat
crearea unor documente 89:; orientate ctre coninut "i nu ctre aspect.
/entru a crea documente 89:; avei nevoie de un set minimal de instrumente: un editor de te&t, un
!rowser, un editor grafic "i o cone&iune la Internet.
Capitolul $
Structura unui %ocument !"L


1. Ce este un document HTML?
0n document HTM nu este altceva dec#t un fi"ier te&t care, pe l#ng te&tul propriu%zis ce va
aprea n pagin, conine "i o serie de elemente speciale, denumite etichete, sau marcaje 2tags, n
lim!a englez6.
:ot&
9oate celelalte elemente, de tip multimedia, care nsoesc documentul 89:;, cum sunt sunetul,
imaginile video, grafica, etc., nu fac parte din structura acestuia. ,ocumentul 89:; include referine la
aceste elemente, prin intermediul unor etichete speciale, care indic !rowserului modul n care ele vor fi
ncrcate "i integrate n pagina -e!.
tichetele nu sunt instruciuni n sensul cunoscut al noiunii, ele av#nd doar rolul de a comunica
!rowserului semnificaia "i modul de afi"are al elementelor incluse, privind aspectul te&tului, al
fonturilor 2tipurilor de caractere6 "i n general, al tuturor elementelor prezente n pagin. tichetele
sunt delimitate de perechi de paranteze unghiulare "< >".
0nele etichete permit precizarea anumitor caracteristici ale elementului pe care l introduc n
document prin intermediul unor perechi caracteristic # valoare numite atribute. &ist atri!ute
specifice doar anumitor elemente "i atri!ute ce sunt utilizate n asociere cu mai multe etichete. '
etichet poate avea unul, nici unul, sau mai multe atri!ute. ;a r#ndul lor, atri!utelor li se pot atri!ui
valori diferite.
$t#t etichetele c#t "i atri!utele sunt case#insensitive, ca atare nu va e&ista nici o diferen de aciune
ntre, s spunem, <head>, <Head>, <HEAD>, sau chiar <HeaD>. le sunt echivalente. /e de alt
parte, valoarea unui atri!ut poate fi case#sensitive, cum, n principiu, este cazul locaiilor fi"ierelor "i
adreselor 0.;.
.egulile de folosire a etichetelor, atri!utelor "i valorilor acestora reprezint sinta%a lim!ajului
89:;. +imilar lim!ajelor de programare, n 89:; respectarea sinta&ei lim!ajului este
determinant pentru o !un funcionare a documentului.
+pre deose!ire de lim!ajele compilate cum ar fi lim!ajul ), n care programele trec nainte de
e&ecuie prin faza de compilare, etap n care compilatorul semnaleaz eventualele gre"eli de sinta&,
la documentele 89:; nu se nt#mpl acest lucru. ,ocumentele 89:; sunt interpretate de !rowser
e&act a"a cum au fost ele scrise. /rin urmare, orice gre"eal de sinta& se va reflecta direct n
aspectul paginii -e!, conduc#nd, de cele mai multe ori, la o funcionare defectuoas a acesteia.
,ac la vizualizarea paginii dumneavoastr cu !rowserul constatai c anumite secvene ale paginii
nu au aspectul a"teptat, sau elementele pe care dorii s le introducei nu sunt afi"ate, revenii asupra
documentului 89:; "i verificai nc o dat sinta&a acestor elemente.
89:; lucreaz ntr%o manier foarte u"or de neles. ?n esen tre!uie s scriei te&tul "i s precizai
elementele care dorii s apar n pagin "i s le includei ntre anumite etichete specifice. ,e
e&emplu, dac dorim s afi"m o propoziie cu caractere ngro"ate 2!old6, vom marca nceputul
acesteia folosind eticheta <B> iar pentru marcarea sf#r"itului propoziiei eticheta </B>.
<B> Acesta este un text scris cu litere aldine</B>
'tenie(
*rowserul nu ine cont de numrul spaiilor dintre cuvinte, afi"area fc#ndu%se invaria!il cu un singur
spaiu. ,e asemenea, nu se poate preciza mrimea liniilor de te&t, acestea fiind de mrimea ferestrei
!rowserului 2prin redimensionarea ferestrei se vor rearanja "i liniile de te&t6.
,up cum vom vedea mai t#rziu, se poate preciza totu"i unde s se termine un anumit r#nd "i cum se
poate alinia un te&t n pagin.
tichetele 89:; sunt de dou tipuri:
etichete container 2container tags6
etichete vide 2empt( tags6
tichetele container sunt de forma:
<TAG> bloc de text </TAG>
unde:
<TAG> % marcheaz nceputul unui !loc
</TAG> % marcheaz sf#r"itul !locului
tichetele specific formatul n care va fi afi"at te&tul coninut ntre eticheta de nceput "i cea de
final. :ajoritatea etichetelor sunt de acest tip. ' particularitate a etichetelor container este c, n
cazul unora dintre ele, prezena etichetei de nchidere (</TAG>6 este opional. /e parcursul
capitolelor care vor urma, vom preciza e&plicit care anume sunt etichetele care au aceast
proprietate.
tichetele vide au forma:
<TAG>
$cest tip de etichete nu se refer la formatul te&telor, ci la introducerea anumitor elemente, ca de
e&emplu: paragrafe, sf#r"it de linie, linii orizontale "i altele, deci dau indicaii !rowserului despre ce
element este vor!a "i despre cum s afi"eze acel element.
tichetele vide nu au etichet de nchidere.
2. )tic*ete de structur$
'rice document 89:; conine dou seciuni:
antetul 2head6
corpul documentului 2bod(6
+tructura general a unui document 89:; este urmtoarea:
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
,ocumentul este delimitat de etichetele <HTL> </HTL> "i este format din cele dou pri:
antet 2head6 % este delimitat de etichetele <HEAD> </HEAD> "i conine titlul documentului precum
"i alte informaii privind documentul. ?n antetul documentului se mai insereaz "i anumite secvene
de program 2script%uri6, care se e&ecut la ncrcarea documentului n !rowser+
corp 2body6 % care delimiteaz coninutul propriu%zis al documentului "i este inclus ntre etichetele
<B!D"> </B!D">
Iat acum "i semnificaia etichetelor menionate "i care fac parte din structura oricrui document
89:;:
<HTML> </HTML>
?ntre aceste etichete este inclus ntregul document 89:;. le comunic !rowserului unde ncepe "i
unde se termin documentul.
<HEAD> </HEAD>
?ntre aceste etichete sunt incluse titlul, deja menionat, precum "i alte informaii despre documentul
89:;. $ceste elemente, numite metatag%uri sunt deose!it de importante pentru ca pagina s fie c#t
mai !ine cotat de ctre motoarele de cutare. le vor face o!iectul unui capitol separat.
:etatag%urile "i antetul n ansam!lul su nu sunt vizi!ile pentru vizitator n pagina -e!. 9otu"i, la fel
ca ntreg codul 89:; al paginii, antetul poate fi vizualizat select#nd din meniul !rowserului
opiunea 2ie 3 &ource+
<TITLE> </TITLE>
+ta!ile"te titlul documentului 89:;.
9itlul documentului este deose!it 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 c#t mai corect
"i complet coninutul paginii dumneavoastr.
'tenie(
ticheta de mai sus nu sta!ile"te titlul care apare n cadrul paginii, ci pe acela care apare o!i"nuit n !ara
de titlu a !rowserului.
<BODY> </BODY>
)onine descrierea te&tului "i elementelor paginii. ?n corpul documentului se sta!ilesc, deci, aspectul
"i coninutul paginii -e!. lementele coninute n aceast seciune sunt vizi!ile n pagin.
/oate nu v vine s credei, dar acum avei deja posi!ilitatea de a crea o pagin foarte simpl de te&t.
$vei @otepad%ul deschis7 ,ac nu, deschidei%l acum "i scriei e&emplul urmtor:
,%emplul $# -
<HTL>
<HEAD>
<TITLE>#a$ina %ea</TITLE>
</HEAD>
<B!D">
A% reusit sa scriu &ri%a %ea &a$ina de 'eb. (r%atoarea )a *i cu %ult
%ai buna.
</B!D">
</HTL>
+alvai fi"ierul cu numele primapagina+html. $poi deschidei !rowserul pe care l folosii 2Internet
&plorer sau @etscape6, selectai meniul !ile 3 Open 3 0rose, cutai folderul n care ai salvat
fi"ierul, deschidei%l "i v vei afla n faa primului dumneavoastr document 89:; : >igura G.D
$m reusit sa scriu prima mea pagina de -e!. 0rmatoarea va fi cu mult mai !una.
,ac dorii s scriei un te&t pe mai multe linii n pagin, va tre!ui s folosii eticheta <B+> 2de la
line break6, care face trecerea pe o linie noua. ticheta <B+> este de tip empt(, deci nu are etichet de
nchidere. ?ncercai e&emplul de mai jos, n care afi"area te&tului documentului se va face pe dou
r#nduri.
,%emplul $# $
<HTL>
<HEAD>
<TITLE>#a$ina %ea</TITLE>
</HEAD>
<B!D">
A% reusit sa scriu &ri%a %ea &a$ina de 'eb.<B+>(r%atoarea )a *i cu
%ult %ai buna.
</B!D">
</HTL>
$cum, documentul dumneavoastr va arta ca n >igura G.G
$m reusit sa scriu prima mea pagina de -e!.
0rmatoarea va fi cu mult mai !una.
,eoarece structura documentelor 89:; o!i"nuite 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 c#t mai e&plicit. )omentariile nu sunt vizi!ile pentru !rowser, ele servesc
creatorului paginii pentru a da un grad crescut de lizi!ilitate documentului 89:;.
)omentariile constau n scurte informaii, e&plicaii la elementele de cod utilizate, etc., fiind deose!it
de utile ulterior, mai ales n situaia n care se impune depanarea codului.
)omentariile se introduc prin includerea te&tului ntre etichetele de mai jos.
<,-- -->
Iat dou e&emple:
<,- - Acesta este un co%entariu introdus in &a$ina 'eb - ->
<,.Acesta este un co%entariu
&e %ai %ulte randuri
care ia s*arsit aici -->
3. +o!osirea corect$ a etic*ete!or
tichetele container se compun, a"a cum am vzut mai devreme, din perechi de etichete: etichet de
deschidere <TAG> "i de nchidere </TAG>.
;a construirea unei pagini -e! comple&e vei fi pus adesea n situaia de a folosi mai multe etichete
pentru aceea"i secven de te&t.
,e pild, vei dori s atri!uii unui te&t dou proprieti: litere aldine sau ngro"ate 2bold6 "i te&t
centrat n pagin. /entru aceasta va tre!ui s utilizai dou perechi de etichete, care descriu cele dou
proprieti, n mod simultan, metod numit imbricarea etichetelor 2nested tags6, ca n e&emplul de
mai jos:
</E0TE+><B>Text cu aldine si centrat</B><//E0TE+>
ste foarte important ca, n cazul folosirii mai multor etichete container mpreun, ele s fie plasate
n mod corect.
?n aceast situaie, principiul de utilizare este: (ast In . /irst 0ut( 2;I>'6. $cest lucru nseamn c
ultima etichet deschis tre!uie s fie prima care se nchide.
6ten;ie<
9re!uie s fii foarte atent la nchiderea etichetelor, pentru a nu nclca principiul ;I>'. ?n caz contrar,
secvena de cod din pagin nu va funciona corect.
Iat un e&emplu generic de folosire corect a dou etichete:
<TAG1><TAG2>Etichete utili3ate corect</TAG2></TAG1>
"i un altul de folosire incorect:
<TAG1><TAG2>Etichete utili3ate incorect</TAG1></TAG2>
4. 'e(umat
0n document 89:; este un fi"ier te&t care conine te&tul care va aprea n pagin "i etichete.
$cestea au rolul de a comunica !rowserului semnificaia "i modul de afi"are al elementelor incluse
ntre ele.
tichetele sunt nsoite de atri!ute care sunt perechi caracteristic # valoare "i care au rolul de a
sta!ili diverse caracteristici ale etichetei. tichetele pot fi de dou tipuri: etichete container "i etichete
vide. tichetele container necesit eticheta de nchidere n timp ce etichetele vide nu tre!uie nchise.
0n document 89:; este format din antet "i corp. tichetele de structur ale documentului sunt:
<HTL> </HTL> care delimiteaz documentul
<HEAD> <HEAD> care delimiteaz antetul
<TITLE> </TITLE> care delimiteaz titlul documentului
<B!D"> </B!D"> care delimiteaz corpul documentului.
?ntr%un document 89:; se pot introduce comentarii prin introducerea te&tului ntre etichetele <,--
-->
Im!ricarea etichetelor respect regula ;I>': prima etichet deschis este ultima care se nchide.
#. Test
1. ')M$ este un acronim de la4
a6 8Fper 9e&t :arJer ;ine
!6 8Fper 9e&t :arJup ;anguage
c6 8Fper 9echnical :ethod ;i!rarF
2. 5tichetele ')M$ sunt incluse 6ntre4
a6 4 "i 5
!6 ( "i 6
c6 < "i >
3. 5tichetele 7i textul care nu sunt vi8ibile 6n pagin sunt plasate 6n blocul4
a6 Bod7
!6 Head
c6 Table
. Ce fel de program este necesar pentru a scrie ')M$9
a6 un editor de te&t
!6 un editor grafic
c6 89:; ,evelopment K.C
". O pagina %eb este format din dou pri4
a6 To& "i Botto%
!6 Bod7 "i 8ra%eset
c6 Head "i Bod7
$. Care etichete 6i comunica broserului unde 6ncepe 7i unde se termin pagina9
a6 <HTL>
!6 <HEAD>
c6 <B!D">
+. Care dintre urmtoarele elemente nu poate fi gsit 6n seciunea 'ead9
a6 Title
!6 Table
c6 etata$
-. :n construcia urmtoare4
<TITLE>#a$ina %ea</TITLE>
Pagina mea repre8int4
a6 @umele fi"ierului 89:;
!6 9itlul care va aprea n pagina -e!
c6 9itlul care va aprea n !ara de titlu a ferestrei !rowserului
/. Care dintre urmtoarele fi7iere nu este un fi7ier ')M$9
a6 mFpage.htm
!6 mFpage.t&t
c6 mFpage.html
10. "at exemplul de mai ;os4
<TAG1>
<TAG2>Text</TAG2>
<TAG9>Text
<TAG:>Text</TAG:>
</TAG9>Text
</TAG1>
5ste un exemplu de folosire corect a etichetelor9
a6 @u, deoarece nchiderea etichetelor nu respect regula ;I>'.
!6 @u, deoarece nu avem voie s folosim mai mult de dou etichete im!ricate
c6 ,a, deoarece etichetele se nchid corect.
.aspunsuri
-# !6
$# c6
"# !6
1# a6
2# c6
3# a6
4# !6
5# c6
6# !6
-7# c6
Capitolul '
Culori
8uloarea reprezint un caracteristic e&trem de important a unei pagini -e!. 0tilizat cu grij "i
msur, ea poate m!unti su!stanial aspectul paginii, fc#nd%o mai lizi!il "i mai atractiv, iar
te&tul mai u"or 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 o!ositor, greu de urmrit, "i care i va determina pe muli vizitatori s
renune la a%l mai parcurge.
,atorit faptului c ea reprezint un atri!ut al multor elemente ale documentelor -e! 2te&t,
fundaluri, margini, linJ%uri6, 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 9+: prin care sunt specificate pentru fiecare
culoare care sunt cantitile de ro"u 2Red6, verde 2-reen6 "i al!astru 20lue6 care o compun.
?n 89:; orice culoare este desemnat printr%un cod de B cifre he&azecimale, dintre care primele
dou reprezint cantitatea de ro"u, cele dou din mijloc, cantitatea de verde, iar ultimele dou
cantitatea de al!astru.
+istemul he&azecimal este un sistem de numeraie care folose"te DB cifre, e&ist#nd urmtoarea
coresponden ntre cifrele he&azecimale "i cele zecimale:
C D G I K H B 4 3 E DC DD DG DI DK DH
C D G I K H B 4 3 E $ * ) , >
,e e&emplu, M>>CCCC este codul pentru ro"u. +emnificaia acestui cod este urmtoarea: cantitatea de
ro"u este ma&im, iar cantitile de verde "i al!astru sunt egale cu C. )odul pentru verde pur este
MCC>>CC iar pentru al!astru este MCCCC>>.
,eoarece uneori definirea culorii prin intermediul codului su he&azecimal este incomod,
standardul 89:; I.G sta!ile"te un set de DB culori standard.
?n acest caz, pentru valoarea atri!utului de culoare se utilizeaz direct numele culorii, ca n e&emplul
de mai jos, n care se seteaz culoarea magenta pentru linJurile vizitate:
<B!D" )lin;<"%a$enta">
@umele "i codul culorilor sta!ilite n standardul 89:;I.G sunt urmtoarele:
Tabelul "# -
Nume
culoare
8od
he%azecimal
aNua MCC>>>>
!lacJ MCCCCCC
!lue MCCCC>>
fuchsia M>>CC>>
graF M3C3C3C
green MCC3CCC
lime MCC>>CC
maroon M3CCCCC
navF MCCCC3C
olive M3C3CCC
purple M3CCC3C
red M>>CCCC
silver M)C)C)C
teal MCC3C3C
Fellow M>>>>CC
white M>>>>>>
:ai tre!uie menionat faptul c se pot utiliza, pe l#ng culori, DCC de nuane de gri 2gra(6. le sunt
numerotate de la D la DCC, (graF D( fiind nuana cea mai nchis, iar (graF DCC( cea mai deschis. ?n
$ne&a I vei gsi ta!elul culorilor nsoite de codurile lor he&azecimale.
2. Corespondena dintre coduri!e *exa(ecima! i (ecima!
:ulte dintre editoarele grafice folosesc pentru a defini culorile codul zecimal. ,e"i se !azeaz "i ele
pe acela"i sistem .<* de definire a culorilor, numerele care sta!ilesc cantitile celor trei culori sunt
specificate n sistemul zecimal.
,e e&emplu, o culoare care are codul he&azecimal MBI>>3C va avea codul zecimal EE, GHH, DG3.
$ceast coresponden se realizeaz simplu, trec#nd fiecare dintre cele trei numere he&azecimale din
codul culorii n sistemul zecimal:
BI
2DB6
OEE
2DC6
, >>
2DB6O
GHH
2DC6
, 3C
2DB6
ODG3
2DC6
:otivul pentru care tre!uie s cunoa"tei aceast coresponden este acela c pentru a folosi n
documentul 89:; o culoare al crei cod este dat n sistemul zecimal, aceasta tre!uie convertit n
cod he&azecimal.
)onversia se poate realiza foarte simplu folosind calculatorul din -indows 2&tart 3 /ccessories 3
Calculator6 care tre!uie setat pe opiunea &cientific din meniul 2ie. Pei o!serva o serie de !utoane
radio dintre care ne intereseaz dou: 'ex "i Dec. @u avei altceva de fcut dec#t s selectai Dec, s
tastai numrul n !aza DC "i apoi s selectai opiunea 'ex. .ezultatul conversiei va aprea pe ecran.
)onversia invers se realizeaz n mod similar.
1i acum s trecem la lucruri mai atractive "i s dm via paginii noastre adug#ndu%i culori. Pom lua
pe r#nd atri!utele etichetei <B!D">. )u ajutorul lor se pot seta culorile fundalului, te&tului "i
linJurilor:
bgcolor % culoarea fundalului
text % culoarea te&tului
link % culoarea linJurilor
vlink % culoarea linJurilor vizitate
alink % culoarea linJului activ
3. Cu!oarea ,unda!u!ui
/entru a sta!ili culoarea fundalului unei pagini folosim atri!utul bgcolor 2background color6 al
etichetei <B!D">= cruia i atri!uim o valoare astfel:
<B!D" b$color<">+GB sau nu%e?culoare">
+e poate folosi drept valoare pentru atri!utul b$color fie codul he&azecimal al culorii fie numele ei.
Iat un e&emplu de pagin cu fundal verde:
,%emplul "# -
<HTL>
<HEAD>
<TITLE>culori1</TITLE>
</HEAD>
<B!D" b$color<">@@88@@">
<H1 ali$n<"center">#a$ina cu *undal )erde</H1><H+>
</B!D">
</HTL>
$spectul paginii va fi cel din >igura I.D .
Pagina cu fun%al -er%e
4. Cu!oarea textu!ui
/entru a seta culoarea te&tului din ntreaga pagin se folose"te atri!utul text al etichetei <B!D">=
conform sinta&ei:
<B!D" text<">+GB sau nu%e?culoare">
,ac am sta!ilit o culoare pentru te&tul din pagin "i dorim s utilizm o alt culoare pentru o
anumit seciune a te&tului 2culoarea unui !loc de te&t6, vom folosi o etichet despre care vom vor!i
pe larg n capitolul urmtor: eticheta <8!0T>. $ceasta este o etichet container care cuprinde ntre
etichetele de nceput "i de final te&tul a crui culoare dorim s o modificm. +ta!ilirea culorii se face
folosind atri!utul color al etichetei conform sinta&ei:
<8!0T color<">+GB sau nu%e?culoare">Text</8!0T>
?n &emplul I.G culoarea te&tului este al!astru iar anumite cuvinte sunt colorate n ro"u. $spectul
paginii va fi cel din >igura I.G .
!ext albastru &i ro&u
!extul %in aceasta pagina este albastru cu mici exceptii
,%emplul "# $
<HTL>
<HEAD>
<TITLE>culori2</TITLE>
</HEAD>
<B!D" b$color<">888888" text<">@@@@88">
<H1 ali$n<"center">Text albastru si rosu</H1>
<H+>
Textul din aceasta &a$ina este albastru cu %ici
<8!0T color<">88@@@@"> exce&tii</8!0T>
</B!D">
</HTL>
#. Cu!oarea !e-$turi!or
?n general legturile 2links6 dintr%o pagin -e! au culori presta!ilite 2default6, astfel:
blue 2al!astru6 % pentru legturi
red 2ro"u6 % pentru legtura activa 2cea pe care este fi&at cursorul mouse%ului, cu !utonul st#ng
apsat6
&ur&le 2violet6 % pentru legturile vizitate, cele pe care s%a efectuat cel puin un click
/entru a schim!a culorile presta!ilite se folosesc urmtoarele atri!ute ale etichetei <B!D">:
link pentru legturi
alink pentru legturile active
vlink pentru legturile vizitate
conform sinta&ei:
<B!D" lin;<">+GB sau nu%e?culoare"
alin;<">+GB sau nu%e?culoare" )lin;<">+GB sau nu%e?culoare">
,ocumentul din &emplul I.I creeaz o pagin n care te&tul este negru iar legturile au culoarea
verde, legturile active culoarea al!astru "i cele vizitate, culoarea ro"u. ?n e&emplu este folosit
eticheta <A> "i atri!utul sau href= care vor fi prezentate pe larg n capitolul despre legturi. ?n
acest moment singurul lucru care ne intereseaz este cum putem sta!ili culorile acestora.
,%emplul "# "
<HTL>
<HEAD>
<TITLE>culori9</TITLE>
</HEAD>
<B!D" b$color<">888888" text<">@@@@@@" lin;<">@@88@@" alin;<">@@@@88"
)lin;<">88@@@@">
<H1 ali$n<"center">Le$aturi colorate</H1>
<H+>
<A hre*<"culori1.ht%l">Le$atura catre &ri%ul exe%&lu</A>
</B!D">
</HTL>
$spectul paginii va fi cel din >igura I.I .
%. .!e-erea cu!ori!or
+unt multe elemente care tre!uie luate n considerare la alegerea culorilor pentru o pagin -e!.
/rimul "i cel mai important este acela de a face coninutul u"or de citit. $ceasta nseamn...ai ghicitQ
;itere negre pe fond al!.
,e"i n vestimentaie com!inaia de ro"u cu !leumarin este rafinat, ntr%o pagin -e! literele ro"ii
pe fond al!astru nu arat !ine "i sunt greu de citit. ' alt com!inaie nefericit este cea cu fondul
negru sau de culoare foarte nchis "i te&tul de culoare al!.
+ 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
ochiului, de iluminarea camerei, etc.
/e un monitor cu reglaje medii ale contrastului "i strlucirii, un te&t de culoare ro"ie dispus pe un
fundal negru va fi ilizi!il, chiar dac la valori ma&ime ale acestor caracteristici com!inaia poate
genera efecte interesante.
?n alegerea culorilor pentru un site este !ine s inei seama de c#teva elemente de psihologia
culorilor, pentru a su!linia astfel mesajul pe care vrei s l transmitei.
Iat c#teva dintre sentimentele pe care le sugereaz culorile:
.o"u % agresivitate, pasiune, putere, vitalitate
.oz % feminitate, inocen, moliciune
/ortocaliu % amuzament, veselie, cldur, e&u!eran
<al!en % sentimente pozitive "i cordialitate
Perde % lini"te, sntate, prospeime
$l!astru % autoritate, demnitate, securitate, ncredere
Piolet % sofisticare, spiritualitate, mister
:aro % utilitate, legtura cu pm#ntul, !ogie
$l! % puritate, ncredere, modernitate, rafinament
<ri % so!rietate, autoritate, sim practic
@egru % seriozitate, distincie, hotr#re
$legerea culorilor pentru site tre!uie s fie n concordan cu tema site%ului "i s su!linieze 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
so!re "i care sugereaz seriozitate "i ncredere.
$legerea culorilor pentru legturi este, de asemenea, important. ;egturile au, n mod presta!ilit,
anumite culori. +chim!area acestora, de"i posi!il, 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. .m#nei consecvent culorilor alese pentru
legturi, pe parcursul ntregului site.
&. Cu!ori /si-ure/
$"a cum era de a"teptat, nu toate monitoarele pot reproduce cele DB.444.CCC de culori furnizate de
codul .<*. )ele realizate cu tehnologii mai vechi, sau cele moderne setate pentru numai GHB de
culori pot reproduce corect doar un set limitat de GHB de culori, a"a%numit palet -e! sau (culorile
sigure -e!(.
8ulorile ;sigure; sunt cele definite prin standardul 89:; I.G prezentat n ta!elul de mai sus sau
sunt realizate prin com!inaii ale urmtoarelor numere he&azecimale: CC II BB EE )) >>
)odul he&azecimal variaz ntre M>>>>>> 2al!6 "i MCCCCCC 2negru6.
0n monitor setat s afi"eze GHB de culori va ncerca afi"area unei culori din afara acestui set prin
fenomenul numit (dithering( 2alternarea unui pi&el de o culoare cu un pi&el de alt culoare6, ceea ce
uneori d rezultate, dar adesea rezultatul e departe de culoarea real. $lteori, computerul va afi"a
culoarea (sigur( cea mai apropiat de cea original.
?n principiu, o astfel de pro!lem poate prea minor. ?n realitate, presupun#nd c o pagin -e!
conine at#t te&tul c#t "i fundalul am!ele n culori (nesigure(, prin modificarea lor de ctre
computerul cititorului, nuanele (apro&imate( pot face te&tul total ilizi!il.
/entru a evita astfel de surprize neplcute este suficient s v menine n limita celor GHB de culori
(sigure(.
,esigur, putei folosi o com!inaie he&azecimal ciudat, ca aceasta: MDG)3*, dar nu vei avea nici
o garanie n privina modului n care va fi afi"at aceast culoare n diferite !rowsere "i pe diferite
platforme.
0. 'e(umat
)ulorile ntr%un document 89:; sunt definite cu ajutorul codului .<* care e&prim n sistem
he&azecimal cantitatea de ro"u, verde "i al!astru prezent n fiecare culoare.
/entru a sta!ili culorile ntr%o pagin -e! se folosesc atri!utele etichetei <B!D"> dup urmtoarea
sinta&:
<B!D" b$color<">+GB sau nu%e?culoare" text<">+GB sau nu%e?culoare"
lin;<">+GB sau nu%e?culoare" alin;<">+GB sau nu%e?culoare" )lin;<">+GB
sau nu%e?culoare">cor&ul docu%entului</B!D">
$legerea culorilor pentru o pagin -e! tre!uie s fie n str#ns legtur cu mesajul transmis de
aceasta "i s permit citirea cu u"urin a informaiilor prezentate.
/entru a evita afi"area defectuoas a culorilor din pagin este recomandat folosirea culorilor
(sigure(.
1. Test
11. &istemul pentru definirea culorilor este4
a6 .ed, <reen, *lue
!6 .ed, Lellow, *lue
c6 -hite, *lacJ, <raF
12. Culorile 6n ')M$ pot fi specificate folosind4
a6 )odul zecimal
!6 )odul he&azecimal
c6 )odul :orse
13. Care este cea mai mare cifr 6n sistemul hexa8ecimal9
a6 DH
!6 >
c6 $
1. O culoare care are 6n sistemul 8ecimal codul R-0 cu valorile4 <=, >?@, A< are codul hexa8ecimal4
a6 MG>$GG
!6 MI)),KH
c6 MBB>>EC
1". *entru a stabili culoarea fundalului paginii folosim4
a6 <B!D" bac;$round<"culoare">
!6 <B!D" color<"culoare">
c6 <B!D" b$color<"culoare">
1$. &etarea culorii pentru tot textul din pagin se face cu4
a6 <8!0T color<"culoare">
!6 <B!D" *ontcolor<"culoare">
c6 <B!D" text<"culoare">
1+. Cum se poate schimba culoarea unui bloc de text9
a6 </!L!+<"culoare">text<//!L!+>
!6 <TEAT color<"culoare">text</TEAT>
c6 <8!0T color<"culoare">text</8!0T>
1-. Care sunt culorile prestabilite pentru legturi, legturi active 7i legturi vi8itate9
a6 al!astru, ro"u, violet
!6 al!astru, verde, gal!en
c6 negru, al!astru, ro"u
1/. Culoarea legturilor se poate schimba folosind4
a6 <LI0B color<"culoare">
!6 <B!D" lin;<"culoare">
c6 <B!D" lin;color<"culoare">
20. /tributele link= alink 7i vlink servesc la4
a6 sta!ilirea legturilor
!6 sta!ilirea culorilor pentru legturi
c6 sta!ilirea culorilor pentru ntreaga pagin
8ulori
-# a6
$# !6
"# !6
1# a6
2# c6
3# c6
4# c6
5# a6
6# !6
-7# !6
Capitolul +
3onturi
?nainte de a a!orda tipurile de caractere care pot fi utilizate n documentele -e!, se cuvine menionat
un fapt: 89:; nu este un lim!aj orientat spre aspectul 2la(out6 paginii, ci spre coninutul acesteia.
Importana acestei meniuni rezid n aceea c etichetele 89:; nu impun, cum s%ar putea crede, ci
(sftuiesc( marea varietate de !rowsere care proceseaz pagina -e!, cum s afi"eze te&tul. )eea ce
impun ele cu adevrat este coninutul, te&tul n sine, nu forma de prezentare.
,esigur c nu se poate vor!i de cealalt e&trem, a unui ar!itrariu a!solut, n care fiecare !rowser va
afi"a te&tul su! o form a!solut imprevizi!il. 0n te&t cu o anumit formatare pentru Internet
&plorer, s spunem, va fi vizualizat practic identic de toi utilizatorii acestui tip de !rowser+
&ist numeroase etichete care permit formatarea caracterelor "i ne ofer posi!ilitatea de a da
te&tului din pagina -e! aspectul dorit.
1. +ormatarea caractere!or
ticheta care se folose"te pentru a da unui caracter sau unui "ir de caractere 2unui te&t6 aspectul dorit
este eticheta container <O!T> </O!T>#
?ntre eticheta de nceput "i cea de sf#r"it se insereaz te&tul sau caracterul ale crui caracteristici
dorim s le sta!ilim.
?nainte de a discuta despre atri!utele etichetei <8!0T> s luam un e&emplu:
<8!0T si3e<"2" color<"red" *ace<"arial">Ion Luca /ara$iale </8!0T>
fectul liniei de mai sus este afi"area te&tului (on Luca Caragiale( cu fonturi $rial, de culoare ro"ie "i
de mrime egal cu G puncte.
+ analizm succesiv cele trei atri!ute ale etichetei <8!0T>:
"i#e % dimensiunea te&tului % poate fi un numr ntre D "i 4 2dimensiuni a!solute6, ntre %D "i %I sau
ntre RD "i RK 2dimensiuni relative, adic raportate la dimensiunea deja e&istent a fontului6.
,imensiunea presta!ilit 2default6 a fonturilor este I.
,ac dimensiunile menionate dep"esc intervalul D%4, !rowserul rotunje"te automat valorile pentru a
le ncadra n acest interval.
color % culoarea te&tului % este culoarea cu care va fi afi"at te&tul prezent ntre etichete 2n e&emplul
nostru, (on Luca Caragiale( 6.
face % tipul de font % determin tipul de font care va fi utilizat la afi"area te&tului.
9ipurile cele mai uzuale sunt:
!rial
Tahoma
Helvetica
9imes @ew .oman
/ourier
Verdana
$tri!utul etichetei permite precizarea fie a unui singur tip de font fie a mai multora, separate prin
virgul. /recizarea mai multor fonturi ajut n eventualitatea c#nd primul tip indicat nu este instalat
pe calculatorul celui care viziteaz pagina, "i se face ca n e&emplul de mai jos.
<8!0T *ace<"arial= )erdana= ti%es neC ro%an">
?n aceast situaie !rowserul va alege singur din list primul tip de font pe care l recunoa"te,
ignor#ndu%le pe urmtoarele.
'tenie(
;a sta!ilirea tipului de caracter utilizat n pagin inei seama de faptul c nu toi utilizatorii au instalate
pe computerele lor acela"i set de caractere ca "i dumneavoastr. ,in acest motiv, folosirea unor caractere
e&otice, de efect, poate conduce la un e"ec n cazul c#nd 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 &emplul K.D vom aplica pe r#nd fiecare dintre cele trei atri!ute menionate asupra unui te&t,
aspectul paginii descrise de acest document fiind cel din >igura K.D.
,%emplul 1# -
<HTL>
<HEAD>
<TITLE>*onturi1</TITLE>
</HEAD>
<B!D" b$color<"7elloC">
<8!0T si3e<"D" *ace<"taho%a" color<"$reen">anual de HTL si desi$n
'eb</8!0T><B+>
<8!0T si3e<"E9" *ace<"arial" color<"red">anual de HTL si desi$n
'eb</8!0T><B+>
<8!0T si3e<"-1" *ace<"courier neC" color<"blue">anual de HTL si
desi$n 'eb</8!0T>
</B!D">
</HTL>
/entru a sta!ili aspectul te&tului unei ntregi pagini -e!, putem folosi eticheta <BA$EO!T># +pre
deose!ire de <8!0T> aceasta nu este o etichet container, deoarece efectul ei se refer la tot te&tul
din pagin. @u se folose"te pentru a sta!ili caracteristicile unui !loc de te&t.
ste indicat s fie inclus n documentul 89:; imediat dup eticheta <B!D">. $tri!utele etichetei
<BAFE8!0T> sunt acelea"i cu cele ale etichetei <8!0T>, respectiv: "i#e= color= face.
?n &emplul K.G vom construi o pagin creia i setm te&tul cu atri!utele:
*ace % tip de font $rial, si3e % dimensiunea fontului G, color % culoare al!astr. ' parte din te&t va
avea alt tip de font, alt mrime "i culoare, acestea fiind sta!ilite prin folosirea etichetei <8!0T>.
Exe%&l'l 1# $
<HTL>
<HEAD>
<TITLE>*onturi2</TITLE>
</HEAD>
<B!D" b$color<"Chite">
<BAFE8!0T *ace<"arial" color<"blue" si3e<"2">
A% aGuns la lectia des&re *onturi a <8!0T *ace<"arial blac;"
color<"red" si3e<":">anualului de HTL</8!0T>
</B!D">
</HTL>
,up cum putei o!serva din >igura K.G, caracteristicile te&tului din pagin au fost setate cu ajutorul
etichetei <BAFE8!0T>. /entru a afi"a simultan o parte din te&t ntr%un mod diferit am folosit eticheta
<8!0T>.
,e"i eticheta <BAFE8!0T> face parte din standardul 89:; I.G, atri!utele sale nu sunt recunoscute
de !rowserele @etscape. )a urmare, acesta va afi"a te&tul utiliz#nd propriile setri presta!ilite
2default6, ignor#nd atri!utele menionate n eticheta <BAFE8!0T>.
0rmtorul e&emplu 2&emplul K.I6 afi"eaz un cuv#nt av#nd literele de mrimi diferite. $spectul
acestei pagini este cel din >igura K.I.
,%emplul 1# "
<HTL>
<HEAD>
<TITLE>*onturi9</TITLE>
</HEAD>
<B!D" b$color<"Chite">
<BAFE8!0T *ace<"arial blac;" color<"red">
<8!0T si3e<":">G</8!0T>
<8!0T si3e<"D">+</8!0T>
<8!0T si3e<"H">A</8!0T>
<8!0T si3e<"I">T</8!0T>
<8!0T si3e<"H">(</8!0T>
<8!0T si3e<"D">I</8!0T>
<8!0T si3e<":">T</8!0T>
</B!D">
</HTL>
+ trecem n revist, n continuare, alte etichete care schim! aspectul unui caracter sau al unui !loc
de te&t.
2. .ccentuarea textu!ui
D. ticheta <BI(> </BI(> face fonturile mai mari dec#t dimensiunea curent.
<BIG>Text cu caractere %ari</BIG>
Te"t cu caractere mari
G. ticheta <$MALL> </$MALL> face fonturile mai mici dec#t dimensiunea curent.
<FALL>Text cu caractere %ici</FALL>
Te"t cu caractere mici
I. tichetele <B> </B> 2bold6 "i <$T)O!(> </$T)O!(> realizeaz scrierea cu caractere aldine,
sau ngro"ate 2bold6.
<B>Text in$rosat 1</B>
!ext ingrosat 1
<FT+!0G>Text in$rosat 2</FT+!0G>
!ext ingrosat $
K. tichetele <I> </I> 2italic6 "i <EM> </EM> 2emphasi8ed6realizeaz scrierea cu caractere
italice.
<I>Text inclinat 1</I>
Text inclinat 1
<E> Text inclinat 2</E>
Text inclinat 2
H. tichetele <$> </$> "i <$T)I*E> </$T)I*E> realizeaz scrierea te&tului tiat de o linie
orizontal.
<F>Text taiat 1</F>
Te"t taiat #
<FT+IBE>Text taiat 2</FT+IBE>
Te"t taiat $
B. ticheta <+> </+> 2underlined6 realizeaz su!linierea te&tului.
<(>Text subliniat</(>
Te"t subliniat
'tenie(
0tilizarea te&tului su!liniat tre!uie fcut cu grij, ntruc#t acesta poate fi confundat cu un linJ.
4. ticheta <$+,> </$+,> 2superscript6. /rin intermediul ei se pot insera n document
caractere/te&te plasate deasupra nivelului liniei de scriere.
A&a in$heata la @ <F(#>@</F(#>/
!pa ingheata la %
%
C
3. ticheta <$+B> </$+B> 2subscript6. /rin intermediul ei se insereaz te&te plasate su! nivelul
liniei de scriere.
/oordonatele A<F(B>1</F(B>= "<F(B>2</F(B>
Coordonatele &#' ($
ste de remarcat faptul c etichetele <BIG> "i <FALL> sunt e&ecutate diferit n diverse !rowsere+
$stfel, n @etscape <BIG> face te&tul mai mare cu un punct iar <FALL> mai mic cu un punct dec#t
dimensiunea curenta.
?n Internet &plorer, <BIG> afi"eaz te&tul cu fonturi de dimensiune K iar <FALL> cu fonturi de
dimensiune G. tichetele <BIG> "i <FALL> pot fi repetate pentru a o!ine un efect mai accentuat.
&emplele urmtoare ilustreaz modul cum pot fi utilizate aceste etichete.
,%emplul 1# 1
<HTL>
<HEAD>
<TITLE>*onturi:</TITLE>
</HEAD>
<B!D">
<BAFE8!0T *ace<"arial" color<"blue">
<BIG>Etichete</BIG> care <E>schi%ba</E> as&ectul
<FALL>textului</FALL>
</B!D">
</HTL>
$spectul paginii este cel din >igura K.K
,%emplul 1# 2
<HTL>
<HEAD>
<TITLE>*onturiD</TITLE>
</HEAD>
<B!D">
<8!0T *ace<"arial" si3e<"D">Acesta este *ont Arial </8!0T><B+>
<8!0T *ace<"al$erian" si3e<":" color<"$reen">Acesta este *ont
Al$erian </8!0T><B+>
<8!0T *ace<"courier" color<"blue"><FT+!0G>Acesta este *ont /ourier
</FT+!0G></8!0T><B+>
<8!0T 8A/E<")i)aldi" si3e<"D" color<"$ra7"><(>Acesta este *ont
Ji)aldi </(></8!0T><B+>
<8!0T 8A/E<"$ara%ond"><E>Acesta este *ont Gara%ond </E></8!0T><B+>
<8!0T 8A/E<"%odern" si3e<"I" color<"broCn"><FT+IBE>Acesta este *ont
odern </FT+IBE></8!0T><B+>
</B!D">
</HTL>
/agina arat ca n >igura K.H
,up cum ai o!servat mai sus, e&ist dou etichete al cror efect este acela"i: accentuarea te&tului
fie prin scrierea cu caractere italice fie cu caractere aldine.
3. )tic*ete !o-ice i etic*ete ,i(ice
tichetele <B> "i <I> se numesc etichete &izice, iar <E> "i <FT+!0G> etichete logice. tichetele de
titluri de la <H1> la <HH> sunt, de asemenea, etichete logice. ,iferena dintre cele dou tipuri de
etichete este legat de felul cum sunt ele e&ecutate de diversele tipuri de !rowsere+
$stfel, etichetele fizice impun !rowserului afi"area n formatul e&act, precizat prin intermediul lor.
,ac !rowserul nu suport acest format, etichetele sunt ignorate.
+pre deose!ire de etichetele fizice, cele logice las !rowserului li!ertatea de a alege cel mai !un mod
de a ndeplini comanda transmis prin eticheta. ,e e&emplu, efectul etichetei <E> este, n cele mai
multe !rowsere, scrierea te&tului cu caractere italice. 9otu"i, dac un anumit tip de !rowser nu
suport acest format de caractere, va accentua totu"i te&tul ntr%un alt mod, cel mai !un de care
dispune.
$lte etichete logice utilizate n documentele 89:; sunt:
<-ITE> </-ITE> 2citation6 tichet folosit pentru inserarea unui citat. ,e o!icei, citatul este
afi"at cu caractere italice.
<-ODE> </-ODE> 2code6 tichete folosite pentru inserarea n te&t a unor secvene de cod scrise ntr%
un lim!aj de programare. ?n general secvenele de cod sunt afi"ate cu fonturi )ourier.
<D!> </D!> 2definition6 ticheta este folosit pentru a insera n te&t definiia unor termeni. ste
util la crearea inde&ului sau glosarului unui document.
<*BD> </*BD> 2ke(board6 $ceast etichet logic se folose"te pentru a indica un te&t care urmeaz
a fi introdus de la tastatur, ca n urmtorul e&emplu:
#entru a &arasi &ro$ra%ul tastati <BBD>Kuit</BBD>
<$AM,> </$AM,> 2sample6 ste o etichet logic folosit pentru a insera o mostr de te&t.
<TT> </TT> 2telet(pe6 $ceast etichet se folose"te pentru a afi"a te&tul inclus ntre etichete cu
fonturi monospaiate. 9ipul de font monospaiat 2cum este de e&emplu /ourier6 are proprietatea c
fiecrui caracter i se rezerv acela"i numr de pi&eli pe ecran. $stfel, caracterul (i( va avea alocat tot
at#ta spaiu pe ecran ca "i caracterul ('(:
"/ourier" este un *ont %onos&aLiat.
:ai tre!uie precizat "i faptul c utilizarea unora dintre etichetele de formatare a fonturilor a"a cum
au fost prezentate ele n acest capitol tinde s fie nlocuit cu foile de stiluri 2Cascade &t(le &heets6
despre care vom vor!i ntr%un capitol viitor.
4. 'e(umat
/entru a sta!ili aspectul unei anumite secvene de te&t aceasta este inclus ntre etichetele <8!0T>
</8!0T> conform sinta&ei:
<8!0T si3e<"nu%ar" color<">+GB sau nu%e?culoare" *ace<"ti&?*ont"> text
</8!0T>
/entru a seta aspectul te&tului n toat pagina -e! se folose"te eticheta <BAFE8!0T> conform
sinta&ei:
<BAFE8!0T si3e<"nu%ar" color<">+GB sau nu%e?culoare" *ace<"ti&?*ont">
$ccentuarea te&tului se poate face folosind diverse etichete pentru scrierea cu caractere aldine, cu
caractere italice, cu caractere mai mari sau mai mici dec#t dimensiunea curent a fonturilor.
tichetele sunt de dou tipuri: fizice "i logice, etichetele fizice fiind orientate ctre aspectul te&tului
iar cele logice ctre semnificaia te&tului n cadrul documentului.
#. Test
21. *entru a stabili tipul de font pentru 6ntreaga pagin %eb se folose7te eticheta4
a6 <DE8A(LT>
!6 <BAFE8!0T>
c6 <TA+GET>
22. *entru a stabili tipul de font cu care se face afi7area unui text se folose7te atributul4
a6 character
!6 t7&e
c6 *ace
23. Bnul dintre exemplele urmtoare este incorect+ Care9
a6 <8!0T *ace<"arial">
!6 <8!0T *ace<"arial= )erdana">
c6 <8!0T*ace<")erdana">
2. Ce reali8ea8 urmtoarea etichet9
<8!0T si3e<"E1">
a6 $fi"eaz te&tul cu fonturi de mrime D.
!6 $fi"eaz pe pagin te&tul ()#(.
c6 $fi"eaz te&tul cu fonturi de dimensiune mai mare cu un punct dec#t dimensiunea curent.
2". :n afara etichetei <B> ce alt etichet se mai folose7te pentru a scrie un text cu caractere aldine9
a6 <DA+B>
!6 <FT+!0G>
c6 <BIG>
2$. 5tichetele <I> 7i <EM> reali8ea84
a6 scrierea te&tului cu caractere italice
!6 inserarea unei imagini
c6 scrierea te&tului cu caractere mai mici dec#t cele curente
2+. Ce este incorect 6n urmtorul exemplu9
<8!0T *ace<"arial= )erdana= ti%es neC ro%an"=
si3e<":"><B>text</8!0T></B>
a6 @u se pot preciza mai multe tipuri de fonturi ca valori pentru atri!utul *ace.
!6 9ipurile specificate nu se pot scrie cu caractere aldine
c6 tichetele <8!0T> "i <B> nu se nchid corect.
2-. *rin ce se aseamn etichetele <STRONG> 7i <EM>?
a6 +unt am#ndou etichete logice.
!6 +unt am#ndou etichete fizice.
c6 +ervesc am#ndou la scrierea te&tului cu caractere italice.
2/. Care este gre7eala 6n urmtoarea construcie9
<BAFE8!0T *ace<"arial" si3e<"D">text</BAFE8!0T>
a6 <BAFE8!0T> nu este o eticheta container
!6 <BAFE8!0T> nu suport atri!utul *ace
c6 <BAFE8!0T> nu suport atri!utul si3e
30. Ce efect are urmtoarea etichet9
<8!0T<"arial= )erdana= ti%es neC ro%an">
a6 9e&tul se afi"eaz cu toate cele trei tipuri de fonturi.
!6 9e&tul se afi"eaz cu primul tip de font, dintre cele trei, pe care l recunoa"te !rowserul.
c6 ticheta nu era nici un efect ntruc#t este incorect.
/onturi
-# !6
$# c6
"# c6
1# c6
2# !6
3# a6
4# c6
5# a6
6# a6
-7# !6
Capitolul .
3ormatarea textului
tichetele despre care vom vor!i 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
etichetele care permit formatarea te&tului, s facem c#teva precizri privind felul cum sunt afi"ate
te&tele.
,up cum "tii, fi"ierele 89:; sunt fi"iere te&t. $ceasta nseamn c atunci c#nd salvai fi"ierul
respectiv, el este salvat numai ca te&t, deci !rowserul nu poate recunoa"te "i e&ecuta dec#t strict acele
comenzi prevzute de etichetele 89:;. ,in acest motiv, trecerea la un r#nd nou, care n editorul de
te&t se realizeaz prin apsarea tastei @9., nu este recunoscut de !rowser+
0n alt aspect este plasarea n te&t a spaiilor. )hiar dac vei introduce spaii suplimentare ntre
cuvinte atunci c#nd scriei documentul 89:; n editorul de te&t, !rowserul va afi"a invaria!il un
singur spaiu ntre dou cuvinte.
$cesta este motivul pentru care fiecare dintre aceste elemente de formatare a te&tului are o etichet
proprie care indic !rowserului cum anume s fac afi"area.
1. Trecerea !a un r2nd nou
9recerea la un r#nd nou se realizeaz cu ajutorul etichetei <B)> 2de la line break6. ticheta <B+> nu
este o etichet container. a are rolul de a comunica !rowserului c te&ul care urmeaz dup etichet
va fi afi"at pe un r#nd nou a"a cum rezult din &emplul H.D.
,%emplul 2# -
<HTL>
<HEAD>
<TITLE>text1</TITLE>
</HEAD>
<B!D">
Buna 3iua<B+>a nu%esc Lucia<B+>In)at sa construiesc o &a$ina 'eb<B+>
</B!D">
</HTL>
$spectul paginii descrise n e&emplul de mai sus este cel din >igura H.D .
ticheta <B+> admite atri!utul clear care poate lua valorile le*t, ri$ht sau all.
?n mod normal, la nt#lnirea etichetei <B+> 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. &ist ns situaii c#nd dorim ca
linia s fie afi"at l#ng un anumit element 2o imagine, sau un ta!el, de e&emplu6 care !locheaz
partea din st#nga sau din dreapta a liniei.
?n aceste cazuri putem folosi atri!utul clear al etichetei <B+> ca n &emplul H.G. /utei o!serva
efectul atri!utului clear al etichetei <B+> n >igura H.G.
,%emplul 2# $
<HTL>
<HEAD>
<TITLE>text2</TITLE>
</HEAD>
<B!D">
<IG src<"../I%a$ini/toad.G&$" ali$n<"le*t">
Acest text )a *i a*isat intre i%a$ine si %ar$inea drea&ta a
docu%entului.
<B+ clear<"le*t">Acest text )a *i a*isat sub i%a$ine= aliniat stan$a.
Intre acest text si drea&ta i%a$inii )a exista un s&atiu $ol.
</B!D">
</HTL>
2. Tit!uri!e 3Headin-s4
0tilizarea titlurilor este justificat de nevoia de a su!linia prin format structura logic a unui
document, dar, nu n ultimul r#nd, "i de monotonia la care e&pune un te&t lung, lipsit de variaie n
aspect. >ire"te c un asemenea te&t sf#r"e"te prin a o!osi cititorul -e!, o!i"nuit 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 su!titluri, organizate ierarhic, pe nivele.
9itlurile dintr%un document 89:; sunt marcate cu ajutorul etichetelor <H.>, <H/>, <H0>, <H1>,
<H2>, <H3>. le sunt etichete container, deci necesit eticheta corespunztoare de nchidere.
ticheta <H1> define"te titlul de dimensiunea ma&im, iar <HH> pe cel de dimensiune minim.
'tenie(
,e"i standardul 89:; 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 2de pild de la 8D direct la 8H6,
pentru a evita eventualele pro!leme la convertirea te&tului n alte tipuri de fi"iere.
?n &emplul H.I vom folosi toate cele "ase etichete pentru titluri pentru a face o comparaie cu
dimensiunea standard a te&tului. /utei o!serva efectul acestor etichete n >igura H.I.
,%emplul 2# "
<HTL>
<HEAD>
<TITLE>text9</TITLE>
</HEAD>
<B!D">
<H1>Titlu H1</H1>Text nor%al
<H2>Titlu H2</H2>Text nor%al
<H9>Titlu H9</H9>Text nor%al
<H:>Titlu H:</H:>Text nor%al
<HD>Titlu HD</HD>Text nor%al
<HH>Titlu HH</HH>Text nor%al
</B!D">
</HTL>
ste de menionat o proprietate interesant a etichetelor de titluri, "i anume aceea c un te&t scris pe
aceea"i linie cu un titlu este afi"at n pagin pe r#ndul urmtor titlului, ls#ndu%se o linie li!er ntre
titlu "i te&t, de"i nu este prezent nici una dintre etichetele <B+> sau <#>.
tichetele de titlu accept atri!utul align cu valorile le*t, center "i ri$ht pentru alinierea
titlului !locului de te&t la st#nga 2n mod presta!ilit6, n centru "i respectiv la dreapta. >igura H.K red
aspectul paginii descrie de documentul din &emplul H.K care ilustreaz modul de aliniere al
titlurilor.
,%emplul 2# 1
<HTL>
<HEAD>
<TITLE>text:</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">Titluri</H1><H+>
<H1 ali$n<"center">
Titlu de %ari%e 1 aliniat in centru
</H1>
<H2 ali$n<"ri$ht">
Titlu de %ari%e 2 aliniat la drea&ta
</H2>
<H:>
Titlu de %ari%e : aliniat la stan$a
</H:>
</B!D">
</HTL>
3. 5ara-ra,e!e
9recerea la un nou paragraf n cadrul te&tului se realizeaz cu ajutorul etichetei <,> </,>. $ceast
etichet comunic !rowserului s insereze o linie li!er n te&t "i s nceap o nou linie. ticheta
<#> este o etichet container dar prezena etichetei de nchidere </#> este opional n anumite
situaii. ,ac ea este prezent, indic !rowserului s insereze o linie li!er "i dup !locul de te&t
cuprins ntre cele dou etichete.
ticheta <#> admite atri!utul align cu cele trei valori ale acestuia: le*t, center "i ri$ht, care
permit alinierea te&tului la st#nga, centrat respectiv la dreapta.
&emplul H.H ilustreaz cele trei modaliti de aliniere a te&tului.
,%emplul 2# 2
<HTL>
<HEAD>
<TITLE>textD</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">#ara$ra*e</H1><H+>
<#> Acesta este un &ara$ra* aliniat la stan$a.
<# ali$n<"ri$ht"> Acesta este un &ara$ra* aliniat la drea&ta.
<# ali$n<"center"> Acesta este un &ara$ra* aliniat la centru.
</B!D">
</HTL>
,in >igura H.H care red aspectul paginii descrise n e&emplu se poate o!serva c alinierea la st#nga
este implicit 2nu mai tre!uie specificat ali$n<"le*t"6. +e mai poate o!serva c nu a fost folosit
eticheta de nchidere a paragrafelor, deoarece la nt#lnirea unei noi etichete <#> vechiul paragraf se
consider nchis. 9otu"i, prezena sau a!sena etichetei de nchidere a paragrafului atunci c#nd este
prezent atri!utul ali$n tre!uie sta!ilit cu grij, pentru a nu o!ine rezultate neconforme cu
dorinele dumneavoastr.
?n &emplul H.B dorim s aliniem un nou paragraf n dreapta paginii, iar te&tul de pe r#ndul urmtor
paragrafului, care este introdus prin eticheta <B+>= s fie scris normal, de la captul din st#nga al
paginii.
,%emplul 2# 3
<HTL>
<HEAD>
<TITLE>textH</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">#ara$ra*e</H1><H+>
Acest text este scris nor%al= ince&and e la %ar$inea din stan$a.
<# ali$n<"ri$ht">Acest text este aliniat la drea&ta
<B+>(nde este a*isat acest textM
</B!D">
<HTL>
,in >igura H.B se poate o!serva c afi"area nu s%a fcut conform inteniilor noastre. :otivul este
faptul c eticheta
<# ali$n<Nri$htN> nu are eticheta de nchidere </#>, "i prin urmare efectul su se prelunge"te
p#n la nt#lnirea unei alte etichete <#>.
,ac vei nchide paragraful n mod e&plicit cu ajutorul etichetei de nchidere, nainte de trecerea la o
linie nou, efectul asupra te&tului va fi cel dorit a"a cum rezult din >igura H.4.
,e"i aparent etichetele <B+> "i <#> au un efect asemntor, "i anume trecerea la o linie nou, ele nu
sunt e&ecutate la fel. <B+> comunic !rowserului unde se ncheie o linie, n vreme ce <#> i impune
s lase o linie li!er "i s treac la un nou paragraf. ,ac folosim atri!utul ali$n al etichetei <#> n
situaiile c#nd dup paragraf este introdus un alt element n pagin este recomandat nchiderea n
mod e&plicit a etichetei respective.
4. 5re,ormatarea textu!ui
$"a cum am precizat la nceputul capitolului, atunci c#nd editai documentul 89:; cu ajutorul unui
editor de te&t, indiferent c#te spaii vei lsa ntre cuvinte sau ntre liniile de te&t, !rowserul va afi"a
te&tul invaria!il cu un singur spaiu ntre cuvinte "i va ajusta lungimea liniilor n funcie de mrimea
ferestrei. )u alte cuvinte, orice spaii sau linii li!ere suplimentare vor fi ignorate de ctre !rowser+
$"a cum am vzut mai sus, trecerea la o linie nou se realizeaz cu ajutorul etichetei <B+> iar
inserarea unei linii li!ere se face cu ajutorul etichetei <#>.
&ist, ns, "i o etichet care impune !rowserului s afi"eze te&tul ntocmai cum a fost el formatat n
documentul 89:;. ste vor!a despre eticheta <,)E> </,)E>#
ticheta <#+E> permite preformatarea te&tului "i menine spaierea "i alinierea te&tului a"a cum a
fost fcut n documentul surs 89:;. ticheta de nchidere </#+E> este o!ligatorie.
&emplul H.4 ilustreaz modul cum poate fi folosit eticheta <#+E>. $spectul paginii descrise n
acest document este cel din >igura H.3.
9estai e&emplul folosind eticheta <#+E> iar apoi eliminai%o, pentru a o!serva mai !ine efectul su.
,%emplul 2# 4
<HTL>
<HEAD>
<TITLE>textI</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">Textul &re*or%atat</H1><H+>
Acesta este un text nor%al <#>
!rarO
Luni
PO@@ +o%ana
Q.@@ ate%atica
1@O@@ Geo$ra*ie
11.@@ Istorie
12.@@ 8i3ica<#>
Acesta este textul de %ai sus &re*or%atat
<#+E>
!rarO
Luni
PO@@ +o%ana
Q.@@ ate%atica
1@O@@ Geo$ra*ie
11.@@ Istorie
12.@@ 8i3ica
</#+E>
</B!D">
</HTL>
#. Centrarea textu!ui
$"a cum am vzut mai sus, afi"area te&tului centrat n pagin se poate face cu ajutorul etichetei <#>
av#nd atri!utul ali$n setat la valoarea "center".
' alt posi!ilitate de a realiza acest lucru este de a utiliza o etichet dedicat, incluz#nd te&tul ntre
etichetele
<-E!TE)> </-E!TE)># ticheta </E0TE+> este o etichet container, prezena etichetei de nchidere
fiind o!ligatorie.
&emplul H.3 realizeaz centrarea unui te&t.
,%emplul 2# 5
<HTL>
<HEAD>
<TITLE>textP</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">/entrarea textului </H1><H+>
</E0TE+>
Acesta este un text centrat. Acesta este un text centrat. Acesta
este un text centrat. Acesta este un text centrat. Acesta este un
text centrat. Acesta este un text centrat. Acesta este un text
centrat. Acesta este un text centrat.
<//E0TE+>
</B!D">
</HTL>
$spectul paginii descrise n e&emplul de mai sus este cel din >igura H.E.
%. .,iarea textu!ui pe o sin-ur$ !inie
?n cazul c#nd se dore"te afi"area unui te&t pe o singur linie, chiar dac acest lucru nseamn
dep"irea marginii ferestrei "i derularea acestuia pe orizontal, se include !locul de te&t ntre
etichetele <!OB)> </!OB)>.
$ceast etichet mpiedic !rowserul s limiteze lungimea liniei la dimensiunea ferestrei.
&emplul H.E ilustreaz folosirea etichetei <0!B+>, pagina av#nd aspectul din >igura H.DC.
,%emplul 2# 6
<HTL>
<HEAD>
<TITLE>textQ</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">Textul &e o sin$ura linie </H1><H+>
<0!B+>
Acesta este un text care )a *i a*isat &e o sin$ura linie= chiar
daca de&aseste di%ensiunile unei *erestre obisnuite. #uteti
)eri*ica acest *a&t &rin reducerea di%ensiunilor *erestrei
broCserului.
</0!B+>
</B!D">
</HTL>
&. 6!ocu! <DIV>
' alt modalitate de delimitare "i de formatare a unui !loc de te&t este folosirea etichetei container
<DI4> </DI4>. /rezena etichetei de nchidere este o!ligatorie.
ticheta <DIJ> realizeaz divizarea unui document 89:; n seciuni distincte, diviziune n care pot
fi incluse, pe l#ng te&t, "i alte elemente: legturi, imagini, formulare. )a "i n cazul etichetei pentru
introducerea paragrafelor, eticheta <DIJ> admite atri!utul align, pentru alinierea te&tului. Palorile
posi!ile ale acestui atri!ut, deja cunoscute, sunt:
le*t % aliniere la st#nga
center % aliniere la centru
ri$ht % aliniere la dreapta
$linierea precizat de atri!utul ali$n al !locului are efect asupra tuturor elementelor incluse n
!locul <DIJ>. *locul <DIJ> admite "i atri!utul no5ra&= care interzice ntreruperea r#ndurilor de
ctre !rowser+
?n documentul descris n &emplul H.DC este ilustrat utilizarea acestei etichete. /agina va avea
aspectul redat n >igura H.DD.
,%emplul 2# -7
<HTL>
<HEAD>
<TITLE>text1@</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">Blocul di)</H1><H+>
Aceasta linie este o linie de text nor%ala.
<DIJ ali$n<"ri$ht">
Aceasta este &ri%a sectiune a textului= aliniata drea&ta.<B+>
</DIJ>
<DIJ ali$n<"center">
Aceasta este a doua sectiune a textului= aliniata central.<B+>
</DIJ>
<DIJ ali$n<"le*t">
Aceasta este a treia sectiune a textului= aliniata stan$a.<B+>
</DIJ>
</B!D">
</HTL>
0. Linii ori(onta!e
?ntr%o pagina -e! pot fi inserate linii orizontale care au rolul de a delimita diferitele zone ale paginii
sau de a m!unti aspectul ei estetic. $cest lucru se face cu ajutorul etichetei <H)># ticheta <H+>
nu este o etichet container deci nu e&ist o etichet de nchidere.
/entru a configura o linie orizontal se utilizeaz urmtoarele atri!ute ale etichetei <H+>:
align % permite alinierea liniei orizontale. Palorile posi!ile sunt le*t, center "i ri$ht
5i6th % specific lungimea liniei % lungimea poate fi sta!ilit n pi&eli sau n procente din limea
ecranului.
"i#e % specific grosimea liniei, e&primat n pi&eli
color % permite definirea culorii liniei
$tri!utele etichetei <H+> sunt ilustrate n &emplul H.DD.
,%emplul 2# --
<HTL>
<HEAD>
<TITLE>text11</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center"> Linii ori3ontale </H1>
Linie aliniata la stan$a= lun$i%e 1@@R= $rosi%e 2 <H+>
Linie aliniata in centru = lun$i%e D@R= $rosi%e D &ixeli.
<H+ ali$n<"center" Cidth<"D@R" si3e<"D" color<"blac;">
Linie aliniata la drea&ta = lun$i%e 1D@ de &ixeli= $rosi%e 12
&ixeli = de culoare rosie.
<H+ ali$n<"ri$ht" Cidth<1D@ si3e<12 color<"red">
</B!D">
</HTL>
,in >igura H.DG care red aspectul paginii descrise n e&emplul anterior se poate o!serva c simpla
prezen a etichetei <H+> fr nici un fel de atri!ute duce la afi"area unei linii predefinite, de
lungime egal cu DCC5 din pagin "i grosimea egal cu G pi&eli.
$tri!utul color al etichetei <H+> nu este suportat de !rowserul @etscape.
?n e&emplul urmtor 2&emplul H.DG6 vom ilustra modul n care eticheta <DIJ> 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 H.DI.
,%emplul 2# -$
<HTL>
<HEAD>
<TITLE>text12</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">Linii ori3ontale</H1><H+>
Linia de %ai Gos este aliniata la stan$a
<H+ si3e<"9" color<"blue" Cidth<":@R" ali$n<"le*t">
Liniile de %ai Gos sunt aliniate la centru cu aGutorul blocului DIJ
<DIJ ali$n<"center">
Linii aliniate la centru
<H+ si3e<"1@" color<"c7an" Cidth<"D@R">
<H+ si3e<"D" color<"na)7" Cidth<":@@">
</DIJ>
</B!D">
<HTL>
1. 7nserarea unei adrese pota!e
,ac ntr%o pagin -e! tre!uie inclus o adres po"tal, atunci putem folosi eticheta urmtoare:
<ADD)E$$> </ADD)E$$>.
ticheta <ADD+EFF> este o etichet logic "i are drept efect, n cele mai multe !rowsere, afi"area
te&tului cu caractere italice.
?n &emplul H.DI este inserat n pagin o adres, aspectul paginii fiind cel din >igura H.DK.
,%emplul 2# -"
<HTL>
<HEAD>
<TITLE>text19</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center"> Adresa </H1><H+>
Adresa *ir%ei noastre este
<ADD+EFF>
Golden'eb /onsult <B+>
Ftr. #aradisului= 0r. 1<B+>
Bucuresti
</ADD+EFF>
</B!D">
</HTL>
18. 7nserarea unui citat
/entru a insera un citat ntr%un te&t se pot folosi dou etichete, n funcie de dimensiunea citatului.
$stfel, dac citatul dep"e"te c#teva linii, se folose"te eticheta <BLO-*7+OTE> </BLO-*7+OTE>#
fectul acestei etichete este afi"area indentat a te&tului cuprins ntre eticheta de nceput "i cea de
sf#r"it 2n majoritatea !rowserelor6 sau afi"area acestuia cu caractere italice 2rareori6.
,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 etichetele <-ITE> </-ITE>.
?n cele mai multe dintre !rowsere, te&tul inclus ntre etichetele </ITE> va fi afi"at cu caractere
italice.
&emplul H.DK ilustreaz modul de folosire al celor dou etichete. /agina descris n e&emplu are
aspectul din >igura H.DH.
,%emplul 2# -1
<HTL>
<HEAD>
<TITLE>text1:</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">Inserarea unui citat</H1><H+>
Textul de %ai Gos este un citat
<BL!/BS(!TE>
#robabilitatea ca o *elie de &aine unsa cu unt sa cada &e co)or cu
*ata unsa in Gos este direct &ro&ortionala cu )aloarea co)orului
</BL!/BS(!TE>
/itatul de %ai sus *ace &arte din </ITE>Le$ile lui ur&h7<//ITE>
</B!D">
</HTL>
11. 7nserarea caractere!or specia!e
,e"i este impropriu s numim caracterul (!lanJ( sau space un caracter special, av#nd n vedere
frecvena cu care este folosit, totu"i acesta, ca "i alte caractere, este inserat n pagin cu ajutorul unei
comenzi speciale: comanda < 2comanda ampersand6.
$"a cum "tii deja, indiferent c#te spaii vom introduce atunci c#nd editm documentul 89:;,
!rowserul le va ignora "i va afi"a cuvintele cu un singur spaiu ntre ele. /entru a fora introducerea
spaiilor suplimentare se folose"te comanda Tnbs&U 2no break space6.
'tenie
)omanda ncepe cu sim!olul < 2ampersand6 "i se termin cu = 2punct "i virgul6.
?n &emplul H.DH este ilustrat modul cum pot fi spaiate cuvintele folosind comanda Tnbs&U
Exe%&l'l 2# -2
<HTL>
<HEAD>
<TITLE>text1D</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">Inserarea caracterelor s&eciale</H1><H+>
<8!0T si3e<"2" *ace<"arial">
/u)inteleTnbs&U Tnbs&U Tnbs&U dinTnbs&U Tnbs&U Tnbs&U acestTnbs&U
Tnbs&U Tnbs&U textTnbs&U Tnbs&U Tnbs&U suntTnbs&U Tnbs&U Tnbs&U
des&artiteTnbs&U Tnbs&U Tnbs&U deTnbs&U Tnbs&U Tnbs&U $ru&uriTnbs&U
Tnbs&U Tnbs&U deTnbs&U Tnbs&U Tnbs&U treiTnbs&U Tnbs&U Tnbs&U
s&atii.
</8!0T>
</B!D">
</HTL>
,up cum o!servai din >igura H.DB cuvintele sunt desprite prin trei spaii n loc de unul singur.
/utei aduga oric#te spaii dorii n acest mod. ,e asemenea, pentru a indenta un te&t, putei insera
la nceputul fiecrei linii numrul de comenzi Tnbs&U egal cu numrul de spaii cu care vrei s
indentai te&tul.
Iat mai jos un ta!el cu comenzile necesare pentru a insera n te&t cele mai cunoscute caractere.
Tabelul 2# -

>enumire
caracter
9eprezentarea
gra&ic
8omanda
HTM
+paiu li!er
Tnbs&U
)opFright S
Tco&7U
9rademarJ T
T>1D9U
.egistered U
Tre$U sau
T>1I:U
:ai mic dec#t V
TltU
:ai mare dec#t W
T$tU
$mpersand X
Ta%&U
<hilimele (
TKuotU
)ent Y
T>1H2
0n sfert Z
T>1PP
' jumtate [
T>1PQ
9rei sferturi \
T>1Q@
<rade ]
T>1IH
12. Su-estii pri"ind aspectu! textu!ui
$spectul te&tului ntr%o pagin -e! este esenial pentru calitatea acesteia. 0n te&t lizi!il, scris cu
caractere de dimensiune potrivit, !ine organizat "i a"ezat n pagin va face din pagina
dumneavoastr un mediu accesi!il "i prietenos care l va stimula pe vizitatorul acesteia s parcurg
cu plcere informaiile oferite.
Iat c#teva sfaturi referitoare la aspectul paginilor -e!, menite s v ajute la crearea unor te&te
lizi!ile, c#t mai u"or de parcurs de ctre cititori.
@u folosii fonturi de dimensiuni prea mici sau fonturi cu serife, cum este 9imes @ew .oman.
,e"i este tipul cel mai utilizat pentru pu!licaiile tiprite, te&tele scrise cu 9imes @ew .oman
sunt mai greu de citit de pe monitor. /referai tipurile $rial, Perdana, 8elvetica.
@u folosii numai litere mari 2majuscule6. 9e&tele scrise cu majuscule sunt mai greu de citit.
@u facei e&ces de caractere aldine 2ngro"ate, bold6. ;imitai%v la a accentua cuvinte sau
poriuni reduse din te&t. ,e asemenea, nu folosii caractere cursive 2nclinate, sau italice6 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 ai! instalate pe
computerul propriu, astfel c te&tul va fi afi"at de !rowser cu fonturile presta!ilite.
@u aranjai te&tul n pagin pe dou coloane. $ceasta este o practic o!i"nuit n ziare "i reviste
dar nu este potrivit ntr%o pagin -e! deoarece foreaz vizitatorul ca odat ajuns la !aza paginii
s o deruleze din nou pentru a citi ce%a de%a dou coloan.
ste !ine s folosii fiecare etichet n scopul pentru care a fost ea definit. @u folosii etichetele
de titlu pentru a accentua anumite pri ale te&tului care nu sunt titluri. @u folosii eticheta
<ADD+EFF> pentru a insera alte te&te dec#t adrese sau eticheta </ITE> pentru a realiza scrierea
cu caractere italice a te&tului.
:otoarele de cutare inde&eaz paginile -e! "i n funcie de elementele 2etichetele6 care sunt incluse
n ele iar folosirea lor neadecvat conduce la o inde&are eronat a paginii dumneavoastr.
:ulte motoare de cutare scaneaz pagina n cutarea titlurilor "i pe !aza lor construiesc o schi a
paginii.
,ac vei folosi etichetele de titlu pentru a accentua anumite pri ale te&tului 2operaie pe care o
putei realiza n mod corect folosind eticheta <8!0T>6 vei oferi informaii eronate motoarelor de
cutare. ?n acest fel, scad "ansele ca paginile dumneavoastr s fie identificate "i citite de cei
interesai.
'tenie(
@u uitai c paginile vor fi pu!licate pe -e!, unde, pentru a%"i atinge scopul, adic pentru a fi citite,
tre!uie mai nt#i descoperite de cititori, cel mai frecvent prin intermediul motoarelor de cutare.
13. 'e(umat
*rowserul afi"eaz te&tele cu c#te un singur spaiu ntre cuvinte "i nu recunoa"te sf#r"itul de linie "i
nceputul unei linii noi. lementele de formatare a te&tului se introduc n documentul 89:; prin
intermediul unor etichete specifice:
trecerea la un r#nd nou: eticheta <B+>
<B+ clear<"le*t= ri$ht= all">text
introducerea unui titlu: etichetele <H1> - <HH>
<Hn ali$n<"le*t= ri$ht= center">text</Hn>
introducerea unui paragraf: eticheta <#> </#>
<# ali$n<"le*t= ri$ht= center" noCra&>text</#>
preformatarea te&tului: eticheta <#+E> </#+E>
<#+E>text</#+E>
centrarea te&tului: eticheta </E0TE+> <//E0TE+>
</E0TE+>text<//E0TE+>
afi"area te&tului pe o singur line: eticheta <0!B+> </0!B+>
<0!B+>text</0!B+>
crearea unui diviziuni n te&t: eticheta <DIJ> </DIJ>
<DIJ ali$n<"le*t= ri$ht= center">text</DIJ>
inserarea unei linii orizontale: eticheta <H+>
<H+ si3e<")aloare" Cidth<")aloare" color<">+GB sau nu%e?culoare"
ali$n<"le*t= ri$ht= center">
inserarea unei adrese: eticheta <ADD+EFF> </ADD+EFF>
<ADD+EFF>text</ADD+EFF>
inserarea unui citat: etichetele <BL!/BS(!TE> </BL!/BS(!TE> "i </ITE> <//ITE>
<BL!/BS(!TE>text</BL!/BS(!TE>
</ITE>text<//ITE>
inserarea caracterelor speciale prin comanda 8=
14. Test
31. Care este rolul etichetei <BR>?
a6 9recerea la un r#nd nou
!6 Inserarea unei linii li!ere n te&t
c6 Inserarea unei linii orizontale
32. *entru ca broserul s afi7e8e textul a7a cum a fost el formatat 6n documentul ')M$ se folose7te
eticheta4
a6 <#>
!6 <#+E>
c6 <DIJ>
33. Ce se va afi7a 6n urmtorul exemplu9
<#>Text1
<# ali$n<"ri$ht">Text2
a6 Te"t# "i Te"t$ vor fi aliniate la dreapta, cu o linie li!er ntre ele
!6 Te"t# va fi aliniat la st#nga, Te"t$ va fi aliniat la dreapta, cu o linie li!er ntre ele
c6 Te"t# "i Te"t$ vor fi scrise pe aceea"i linie
3. *entru a scrie un titlu de dimensiune maxim folosim eticheta4
a6 <H1>
!6 <HH>
c6 <HI>
3". *entru a afi7a un text pe o singura linie4
a6 folosim eticheta <B+>
!6 folosim eticheta <0!B+>
c6 nu folosim nici o etichet
3$. Care dintre urmtoarele etichete nu reali8ea8 centrarea textului9
a6 <# ali$n<"center">Text</#>
!6 </E0TE+>Text<//E0TE+>
c6 <DIJ>Text</DIJ>
3+. Ce reali8ea8 eticheta <ADDRESS>9
a6 inserarea unui linJ
!6 inserarea unei adrese de e%mail
c6 inserarea unei adrese po"tale
3-. *entru a insera 6ntr#o pagin o linie ori8ontal standard folosim eticheta4
a6 <H+>
!6 <H+ Cidth<"1@@">
c6 <H+ si3e<"1">
3/. 5ticheta <BLOCKQUOTE> folose7te la4
a6 indentarea te&tului
!6 scrierea te&tului cu caractere italice
c6 inserarea unui citat n te&t
0. Care dintre aceste afirmaii este fals9
aC 9oate spaiile "i liniile li!ere introduse n te&t la editarea documentului 89:; sunt afi"ate
ntocmai de !rowser+
bC 0n te&t scris pe aceea"i linie cu o etichet de titlu este afi"at su! titlu, chiar dac nu este prezent
eticheta <B+>.
cC /entru a introduce spaii suplimentare n te&t se folose"te comanda Tnbs&^
/ormatarea te%tului
-# a6
$# !6
"# !6
1# a6
2# !6
3# c6
4# c6
5# a6
6# c6
-7# a6
Capitolul 0
Leg/turi 8link*uri9
egturile 2link%urile6 reprezint, poate, partea cea mai important a unei pagini -e!. le
transform un te&t o!i"nuit n hFperte&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. .dresa 'L
/entru a sta!ili o legtur cu o alt pagin 2un alt fi"ier6 tre!uie s specificm adresa ?9 a
acestuia. 0.; este un acronim, de la Bniform Resource $ocator, "i reprezint adresa de identificare a
unei resurse 2a unui fi"ier6 aflat pe calculatorul propriu sau pe orice alt calculator din lume conectat
la Internet. ' adres 0.; 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.
&ist mai multe etichete 89:; care folosesc adresa 0.; drept valoare pentru anumite atri!ute:
etichetele care introduc legturi, imagini sau formulare. 9oate acestea folosesc aceea"i sinta& a
adresei 0.; pentru a specifica locaia unei anumite resurse, indiferent de tipul acesteia.
+inta&a general a unei adrese 0.; este:
schema@AAserverBgazda@portAcaleaBcatreB&isier
unde:
schema % reprezint unul dintre protocoalele de transfer al informaiilor, cum ar fi 899/, >9/,
<opher, 9elnet, etc.
serverBgazda % reprezint identificatorul serverului pe care este gzduit fi"ierul respectiv. $cest
identificator poate fi adresa I/ a serverului sau numele su.
port % reprezint numrul portului de comunicaie prin intermediul cruia !rowserul se conecteaz la
server. +erverele dein mai multe astfel de porturi, fiecare servind unui alt tip de comunicaie: 899/,
>9/, po"t electronic, etc. /ortul presta!ilit n cazul transferului prin 899/ are numrul 3C.
@umrul portului tre!uie precizat numai n cazul c#nd acesta este diferit de 3C.
caleaBcatreB&isier % reprezint localizarea ierarhic a fi"ierului n sistemul de directoare de pe server.
$ceasta const ntr%unul sau mai multe nume desprite prin caracterul (/( 2slash6
Iat c#teva e&emple de adrese 0.; mpreun cu e&plicaii referitoare la sinta&a lor:
http*++www.autor.com+carti.html
?n acest e&emplu adresa 0.; indic documentul 89:; numit carti+html care se afl directorul
rdcin al serverului www.autor.com
http*++www.autor.com+
$ceast adres indic prima pagin 2home page6 a aceluia"i server.
http*++www.autor.com*,%,%+
&emplul de mai sus indic de asemenea spre prima pagin a serverului www.autor.com, dar
specific#nd "i numrul portului care este diferit de cel presta!ilit.
http*++www.autor.com+carti.html-webdesign
?n acest e&emplu este indicat calea spre documentul 89:; carti+html aflat pe acela"i server, dar
specific#ndu%se o anumit seciune a acestui document, seciune denumit ebdesign.
?n cazul c#nd fi"ierul spre care este fcut legtura este stocat pe propriul calculator se folose"te o
adres 0.; de forma urmtoare:
&ile@AAserverAcaleaBcatreB&isier
unde:
server % reprezint numele computerului pe care este stocat fi"ierul 2acela"i pe care ruleaz
!rowserul6. ?n acest caz, !rowserul va accesa fi"ierul folosind facilitile o!i"nuite ale sistemului de
operare de pe computerul propriu.
caleaBcatreB&isier % reprezint localizarea fi"ierului n structura de directoare conform regulilor
sistemului de operare
@umele computerului personal poate fi nlocuit cu numele generic ;localhost;# ?n acest caz, adresa
0.; poate avea urmtoarea form:
&ile@AAlocalhostAcaleaBcatreB&isier
,e e&emplu fi"ierul culori+html care este salvat n folderul de lucru %ork din M( Documents pe
computerul personal va avea urmtoarea adres 0.;:
file*++localhost+C*.My /ocuments.Wor0.culori.html
9ermenul localhost poate fi omis, deoarece este numele presta!ilit al computerului propriu. ?n acest
caz este necesar prezena unui caracter (/( suplimentar:
file*+++C*.My /ocuments.Wor0.culori.html
?n practic, atunci c#nd dorim s adresm un fi"ier aflat pe computerul propriu putem omite prima
parte a adresei 0.; o!in#nd urmtoarea form:
C*.My /ocuments.Wor0.culori.html
'tenie(
+e poate o!serva c n cazul resurselor stocate pe servere e&terne, numele directoarelor care fac parte din
calea ctre resurs sunt desprite prin caracterul (A( 2slash6.
;a fi"ierele stocate pe computerul propriu, directoarele "i su!directoarele care formeaz calea ctre fi"ier
sunt desprite prin caracterul (C( 2backslash6. )ele dou moduri de scriere sunt specifice celor dou
sisteme de operare: 0@I_, respectiv ,'+%-indows.
,eoarece marea majoritate a serverelor -e! folosesc sistemul de operare 0@I_, calea ctre resursele
stocate pe ele se scrie respect#nd conveniile acestui sistem. :ai mult, aceast convenie s%a e&tins "i
la adresele 0.; referite de pe sisteme -indows. $stfel, dac dorii s adresai un fi"ier numit
foto+;pg aflat pe discul C4= n M( Documents= folderul "magini putei folosi adresa 0.;:
C*+My /ocuments+magini+foto.jpg
2. .drese a9so!ute i adrese re!ati"e
/entru a putea localiza un fi"ier n structura ierarhic de directoare, n scopul de a sta!ili o legtur
ctre el, se poate folosi adresarea absolut sau adresarea relativ.
'dresa absolut a unui fi"ier conine calea precis "i complet ctre fi"ierul respectiv pornind de la
v#rful ierarhiei de directoare:
C*+Manual HTML+1"emple+culori.html
>i"ierul culori+html se afl plasat pe discul C4, n directorul Manual ')M$= su!directorul 5xemple.
'dresa relativ a unui fi"ier precizeaz poziia acestuia n raport cu documentul 89:; din care este
apelat. Pom reveni ceva mai jos asupra acestui su!iect.
3. Sta9i!irea !e-$turi!or
/entru a insera legturi ntr%un document 89:; folosim eticheta <A> </A>#
ticheta <A> este o etichet container, prezena etichetei de nchidere fiind o!ligatorie.
$tri!utul o!ligatoriu al etichetei <A> este href 2'(pertext Reference6 care prime"te ca valoare
adresa 0.; a fi"ierului cu care dorim s sta!ilim legtura. $cest fi"ier poate fi un document 89:;,
o imagine sau un fi"ier de alt tip. ,ocumentul 89:; n care este prezent legtura se nume"te surs
iar fi"ierul ctre care este fcut legtura se nume"te int. +inta&a etichetei <A> este urmtoarea:
<A hre*<"adresa?(+L">text sau i%a$ine</A>
?ntre etichetele <A> "i </A> poate fi plasat un te&t o!i"nuit sau o imagine. ?n mod presta!ilit te&tul
inclus ntre etichetele <A> este afi"at su!liniat "i de culoare al!astr iar imaginile au un chenar de
culoare al!astr. >olosirea etichetei <A> im!ricat cu etichete de formatare a te&tului, fonturi, liste
sau ta!ele se face plas#nd eticheta <A> 6n interiorul acestora.
?n acest sens, standardul 89:; consider incorect o construcie ca aceasta:
<A hre*<"adresa?(+L"><8!0T *ace<"ti&">Le$atura</8!0T></A>
?n locul ei vom folosi construcia:
<8!0T *ace<"ti&"><A hre*<"adresa?(+L">Le$atura</A></8!0T>
'tenie(
@u este permis im!ricarea mai multor etichete <A>.
?n funcie de localizarea intei 2a resursei referite de legtur6 putem clasifica legturile astfel:
legturi n cadrul aceleia"i pagini 2ancore6
legturi ctre o pagin aflat n acela"i folder
legturi ctre o pagin aflat n alt folder
legturi ctre pagini e&terne
4. .ncore - !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:
D. Punctul spre care dorim s facem legtura.
$cesta se define"te inser#nd n punctul din pagin dorit 2de o!icei n dreptul unui anumit element
din pagin: un titlu, o imagine, o alt legtur, un ta!el, etc.6 eticheta <A>, nsoit de atri!utul
na%e care prime"te ca valoare un nume de identificare atri!uit ancorei 2de e&emplu
(nume_ancora( 6. /rin urmare, identificarea punctului spre care se face legtura se realizeaz
astfel:
<A na%e<"nu%e?ancora"> </A>
G. egtura propriu.zisD care se define"te folosind atri!utul href al etichetei V$W. ?n e&emplul
de mai sus, acesta prime"te ca valoare (Mnu%e?ancora(. +ta!ilirea legturii se realizeaz dup
urmtoarea sinta&:
<A hre*<">nu%e?ancora">text ex&licati)</A>
9e&tul e&plicativ va fi afi"at n mod diferit, n format hFperlinJ, su!liniat "i de culoare presta!ilit
al!astr.
?n momentul c#nd se efectueaz clicJ cu mouse%ul pe te&t e&plicativ se realizeaz un salt n cadrul
paginii, !rowserul afi"#nd partea din pagin care ncepe de la elementul n dreptul cruia a fost
inserat ancora.
'tenie(
/rezena semnului E, plasat naintea numelui ancorei, este o!ligatorie. $cesta indic !rowserului faptul c
este vor!a despre o legtur intern, n cadrul paginii. ?n cazul n care semnul este omis, !rowserul 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 2alt pagin6 aflat n acela"i
director, atri!utul hre* prime"te o valoare de forma:
hre*<"nu%e?*isier.ht%l>nu%e?ancora".
&emplul B.D 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 textD<+html ancora
<A na%e<"citat">.
,%emplul 3# -
<HTL>
<HEAD>
<TITLE>le$aturi1</TITLE>
</HEAD>
<B!D">
<A na%e<"ancora1"></A>
<H1 ali$n<"center">Ancore de*inite in acelasi docu%ent</H1><H+>
<B+>A<B+>B<B+>/<B+>D<B+>E
<B+>8<B+>G<B+>H<B+>I<B+>V
<B+>B<B+>L<B+><B+>0<B+>!
<B+>#<B+>+<B+>F<B+>T<B+>(
<B+>J<B+>'<B+>W<B+>A<B+>
<A hre*<">ancora1">Fus</A>
<B+><B+>
<H1 ali$n<"center" >Ancore de*inite in alt docu%ent</H1><H+><#>
/lic;
<A hre*<"text1:.ht%l>citat">AI/I </A>
&entru a deschide un docu%ent situat in alta &a$ina
</B!D">
</HTL>
$spectul paginii descrise n acest e&emplu este cel din >igura B.D .
0bservaie
)onstruciile de mai jos au acela"i rol, "i anume inserarea unei ancore denumit "ancora1" n
punctul din pagin care conine elementul (;:@9(.
<A na%e<"ancora1">ELEE0T</A>
<A na%e<"ancora1"></A>ELEE0T
?n mod normal, eticheta <A> fiind o etichet container, ntre etichetele de deschidere "i de nchidere
tre!uie s figureze un te&t. 9otu"i, n e&emplul de mai sus, dorind s inserm o ancor n dreptul
titlului, am folosit cea de%a doua construcie:
<A na%e<"ancora1"></A>
<H1 ali$n<"center">Ancore de*inite in acelasi docu%ent</H1>
:otivul este acela c este considerat o practic incorect includerea etichetelor de titlu ntre
etichetele <A> "i </A>.
+e poate utiliza "i construcia urmtoare:
<H1 ali$n<"center"><A na%e<"ancora1">Ancore de*inite in acelasi
docu%ent</A></H1>
#. Le-$tura c$tre o pa-in$ a,!at$ n ace!ai director 3,o!der4
/entru a realiza o legtur ctre o pagin aflat n acela"i director se procedeaz astfel:
<A hre*<"nu%e?*isier.ht%l">text ex&licati)</A>
unde:
hre* reprezint atri!utul care sta!ile"te calea ctre inta cu care se face legtura. ,ac fi"ierul int
este n acela"i director, atri!utul prime"te ca valoare chiar numele fi"ierului.
text ex&licati) % reprezint te&tul pe care se face clicJ cu mouse%ul pentru a activa legtura.
2,e e&emplu
(Clic0 aici( 6. $cest te&t este afi"at diferit fa de restul te&tului % n general, su!liniat "i de culoare
al!astr.
?n &emplul B.G este realizat o legtur reciproc ntre dou pagini aflate n folderul de lucru %ork,
pagina av#nd aspectul din >igura B.G.
,%emplul 3# $
<HTL>
<HEAD>
<TITLE>le$aturi2</TITLE>
</HEAD>
<B!D">
<H1>#a$ina 1 </H1><H+>
<A hre*<"le$aturi9.ht%l">Lin; catre &a$ina 2 </A>
</B!D">
</HTL>
+alvai acest e&emplu cu numele legaturi>+html iar e&emplul urmtor 2&emplul B.I6 cu numele
legaturiA+html.
,%emplul 3# "
<HTL>
<HEAD>
<TITLE>le$aturi9</TITLE>
</HEAD>
<B!D">
<H1>#a$ina 2 </H1><H+>
<A hre*<"le$aturi2.ht%l">Lin; catre &a$ina 1 </A>
</B!D">
</HTL>
;a fel cum ai procedat "i p#n acum, deschidei una dintre cele dou pagini cu !rowserul "i testai
funcionarea legturii dintre ele.
$m!ele documente 89:; tre!uie salvate n acela"i folder. Pei o!serva c atunci c#nd v aflai n
/agina D "i facei clicJ cu mouse%ul pe te&tul Lin0 catre Pagina $ se va deschide cel de%al doilea
document 89:; "i invers, legtura dintre cele dou pagini fiind astfel reciproc.
'tenie(
@umele fi"ierelor care reprezint valori ale atri!utului hre* sunt case sensitive. $cela"i lucru se
nt#mpl "i cu te&tul care desemneaz valorile atri!utului na%e.
$ceasta nseamn c fi"ierul legaturi?+html este diferit de fi"ierul $egaturi?+html= iar ancora <A
na%e<"ancora1"> este diferit de <A na%e<"Ancora1">
/entru a evita gre"elile, este recomandat s v denumii toate fi"ierele sau numele pentru ancore cu
litere mici.
%. Le-$tura c$tre o pa-in$ !oca!i(at$ n a!t director 3,o!der4
,ac pagina cu care vrem s facem legtura se afl pe acela"i calculator, dar ntr%un alt folder, atunci
pentru a preciza poziia ei n structura de directoare se poate folosi adresarea relativ sau adresarea
a!solut.
$dresarea absolut se realizeaz preciz#nd calea 2path6 complet, pornind de la directorul rdcin,
prin care se poate ajunge la fi"ierul de care vrem s legm pagina.
,e e&emplu, dac fi"ierul culoriD+html se afl pe discul C4,n folderul M( Documents, n folderul
%ork, o legtur ctre el se va face n modul urmtor:
<A hre*<"/O/7 Docu%ents/'or;/culori1.ht%l>Lin;</A>
$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 folose"te "irul de
caractere (../ (
,%emplu
+ presupunem c ne aflm ntr%un document 89:; 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 +chema B.D.

,orim s realizm o legtur cu un fi"ier numit trandafir+gif din folderul "magini.
?n acest caz, eticheta <A>, plasat n documentul legaturi>+html, va avea urmtoarea form:
<A hre*<"../I%a$ini/tranda*ir.$i*">Deschide i%a$inea</A>
+emnificaia este urmtoarea:
/rin folosirea "irului de caractere (../( 2punct punct slash6 se urc un nivel n ierarhia de directoare,
n raport cu directorul curent. /rin urmare, ntruc#t folderul curent, n care se afl pagina de pornire
este
8@
8@
Wor(
M> 5ocument.
,ma%ini
le%aturi2.7tml
tranda4ir.%i4
e
Sc7ema $.1
C41M( Documents1%ork, prin utilizarea "irului de caractere (../( se ajunge n folderul printe, care
este C41M( Documents+ ,e aici se continu calea n folderul "magini, dup care se specific numele
fi"ierului din acest folder cu care vrem s sta!ilim legtura.
,%emplu
+ presupunem c ne aflm n documentul legaturi>+html poziionat ca n +chema B.G.

,orim s sta!ilim o legtur cu un fi"ier numit text>+html care se afl n directorul 5xemple
2directorul printe al folderului nostru, $egaturi6. $tunci referirea se va face astfel:
<A hre*<"../text2.ht%l">Lin; la text</A>
$m urcat un nivel n ierarhie ajung#nd n directorul 5xemple "i am specificat numele fi"ierului cu
care dorim s facem legtura.
,ac fi"ierul 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:
<A hre*<"../../text2.ht%l">Lin; la text</A>
?n general, de c#te ori este posi!il, este de preferat s folosii adresarea relativ, pentru ca
documentele 89:; s fie porta!ile 2mutarea lor s nu invalideze legturile sta!ilite ntre diverse
documente6.
&. Le-$tura c$tre pa-ini externe
' legtur ctre o pagina e&tern se realizeaz simplu, prin utilizarea etichetei <A> </A>,
specific#nd adresa 0.; a paginii ca valoare a atri!utului hre* astfel:
hre*<"htt&O//(+L?&a$ina"
Le%aturi
8@
8@
Manual HTML
M> 5ocument.
3#emple
Sc7ema $.2
le%aturi2.7tml e
.eamintim c specificarea adresei 0.; se poate face fie folosind numele serverului pe care este
stocat pagina fie adresa I/ a acestuia. vident, pentru ca linJ%ul s funcioneze, tre!uie ca
utilizatorul s fie conectat la Internet 2lucru vala!il pentru toate legturile e&terne6.
?n &emplul B.K este sta!ilit o legtur ctre pagina de start Lahoo.
,%emplul 3# 1
<HTL>
<HEAD>
<TITLE>le$aturi:</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">Lin; catre "ahoo.co%</H1><H+>
<A hre*<"htt&O//CCC.7ahoo.co%"> "ahoo,</A>
</B!D">
</HTL>
$spectul paginii este cel din >igura B.I.
0n atri!ut util al etichetei <A> este title. $cesta determin apariia unei mici ferestre 2tool tip6 n
pagina -e! c#nd mouse%ul se afla pe o legtur, fereastr n care este afi"at valoarea dat acestui
atri!ut, care are astfel menirea de a furniza informaii suplimentare despre semnificaia unei legturi.
&emplul B.H ilustreaz utilitatea atri!utului title, a"a cum reiese din >igura B.K.
,%emplul 3# 2
<HTL>
<HEAD>
<TITLE>le$aturiD</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">Atributul title</H1><H+>
<A hre*<"htt&O//CCC.$oo$le.co%" title<"Le$atura catre
Goo$le.co%">Goo$le</A>
</B!D">
</HTL>
0. .!e-erea cu!ori!or pentru !e-$turi
$m mai discutat despre acest su!iect "i la capitolul despre culori. ?n mod presta!ilit 2default6 se
utilizeaz trei culori pentru legturi:
culoare pentru legturile nevizitate 2nu s%a efectuat nici un clicJ pe ele6 % al!astru
culoare pentru legturile vizitate 2s%a efectuat cel puin un clicJ pe ele6 % violet
culoare pentru legturile active 2deasupra crora se afl mouse%ul la un moment dat, dar nc nu s%a
efectuat clicJ6 % ro"u
/entru a modifica dup preferine aceste culori se folosesc cele trei atri!ute ale etichetei <B!D">:
link pentru legturile nevizitate^
vlink pentru legturile vizitate^
alink pentru legturile active.
Palorile pe care le pot lua aceste atri!ute sunt culori definite prin nume sau conform codului
he&azecimal.
&emplul B.B ilustreaz modul cum pot fi modificate culorile legturilor, a"a cum se poate o!serva
din >igura B.H care red aspectul paginii descrise n e&emplu.
,%emplul 3# 3
<HTL>
<HEAD>
<TITLE>le$aturiH</TITLE>
</HEAD>
<B!D" lin;<"7elloC" )lin;<"$reen" alin;<"%a$enta">
<H1 ali$n<"center">Fetarea culorilor &entru lin;-uri</H1><H+>
<B+>$alben &entru le$aturi= )erde &entru le$aturi )i3itate si %a$enta
&entru le$aturi acti)e<B+>
<A hre*<"le$aturi2.ht%l">Lin; catre &a$ina 1 </A><B+>
<A hre*<"le$aturi9.ht%l">Lin; catre &a$ina 2 </A>
</B!D">
</HTL>
1. ti!i(area potei e!ectronice 3e-mai!4
?ntr%o pagin -e! se pot afla legturi care permit lansarea n e&ecuie a aplicaiei de e&pediere a
mesajelor electronice a celui care viziteaz pagina. >c#nd clicJ pe te&tul care nsoe"te legtura,
programul de po"ta electronic al vizitatorului paginii se va deschide automat, av#nd c#mpul adresei
destinatarului, (To*( deja completat cu adresa de mail specificat n pagin. /entru a realiza acest
lucru se folose"te comanda %ailto9 atri!utul hre* primind o valoare ca mai jos:
<A hre*<"%ailtoOadresa?e-%ail">
,ac pagina este vizualizat cu !rowserul Internet &plorer iar vizitatorul are instalat un e%mail
manager, cum sunt de pild aplicaiile :icrosoft 'utlooJ sau 'utlooJ &pres, activarea legturii va
determina deschiderea unuia dintre aceste programe. ?n cazul n care managerul de e%mail default
este de alt tip dec#t aplicaia :icrosoft, 2udora, de e&emplu6 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 deschide programul de po"t electronic ncorporat n
!rowser+
?n e&emplul urmtor 2&emplul B.46, n momentul c#nd vizitatorul paginii face clicJ pe te&tul
(Trimite2i un mesaj(, aplicaia de po"t electronic este lansat automat, prin intermediul serviciului
%ailtoO, iar c#mpul care tre!uie completat cu adresa de mail a destinatarului mesajului este de
asemenea completat automat cu adresa autor3domeniu.com a"a cum rezult din
>igura B.B.
,%emplul 3# 4
<HTL>
<HEAD>
<TITLE>le$aturiI</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">Ex&ediere de %esaGe electronice
</H1><H+>
<A hre*<"%ailtoOautorXdo%eniu.co%" title<"adresa %ea de %ail">
Tri%iteti un %esaG </A>
</B!D">
</HTL>
18. Le-$turi c$tre ,iiere oarecare
' pagin -e! poate conine legturi nu doar ctre alte fi"iere 89:;, dar "i ctre fi"iere de orice alt
tip, aflate pe calculatorul propriu sau oriunde pe -e!. )a "i n cazul legturilor cu alte pagini
2documente 89:;6 vom folosi eticheta <A> </A>, astfel:
<A hre*<"(+L?*isier?destinatie">text ex&licati)<A>
@efiind vor!a despre un fi"ier 89:;, !rowserul nu va putea s l proceseze, astfel c va activa
procesul de transfer sau de descrcare 2donload6, urm#nd ca, dup transferul integral al fi"ierului,
utilizatorul s l deschid cu un program adecvat.
?n &emplul B.3, atunci c#nd se efectueaz clicJ pe legtur se deschide caseta de dialog !ile
donload care permite:
salvarea fi"ierului pe disc sau
deschiderea fi"ierului n locaia curent
,%emplul 3# 5
<HTL>
<HEAD>
<TITLE>le$aturiP</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">Le$aturi catre *isiere oarecare</H1><H+>
<A hre*<"ht%l.3i&">
Lin; catre *isierul doCnload.3i&
</A>
</B!D">
</HTL>
>igura B.4 red efectul activrii unei legturi ctre un fi"ier oarecare.
11. :esc*iderea pa-ini!or re,erite printr-o !e-$tur$
/agina nou, apelat prin activarea unei legturi se poate deschide n dou moduri, n raport cu
pagina surs:
n aceea"i fereastr
ntr%o fereastr nou
?n mod presta!ilit, legturile deschid pagina pe care o refer n fereastra curent. $ceasta nseamn
c dac vei face clicJ pe un linJ, noua pagin se va ncrca n locul paginii deja deschise 2n aceea"i
instan a !rowserului6. /entru a reveni la pagina anterioar tre!uie s apsai !utonul 0ack al
!rowserului.
$cest comportament se poate schim!a cu ajutorul valorilor atri!utului target, asupra cruia vom
reveni la capitolul 8adre.
Pom meniona aici doar dou dintre aceste valori, corespunztoare celor dou situaii amintite.
/entru ca pagina apelat s se deschid ntr%o fereastr nou, se utilizeaz sinta&a generic de mai
jos, n care atri!utul tar$et are valoarea "?blan;":
<A hre*<"adresa?(+L" tar$et<"? blan;">text ex&licati)</A>
/entru ca pagina referit s se deschid n aceea"i fereastr cu pagina surs, atri!utului i se asociaz
valoarea "?sel*":
<A hre*<"adresa?(+L" tar$et<"?sel*">text ex&licati)</A>
>igura B.3 red modul n care se deschide o pagin ntr%o nou fereastr, a"a cum este precizat n
&emplul B.E.
,%emplul 3# 6
<HTL>
<HEAD>
<TITLE>le$aturiQ</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">Deschiderea &a$inii in alta *ereastra</H1> <H+>
#a$ina de %ai Gos se )a deschide intr-o *ereastra noua
<#>
<A hre*<"tabel culori.ht%l" tar$et<"?blan;">Tabelul culorilor</A>
</B!D">
</HTL>
12. Crearea unei 9are secundare de na"i-are
?n foarte multe site%uri ai o!servat, pro!a!il, e&istena, n partea de jos a paginii, a unui !loc 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:
HCuloriH H3onturiH H:locuri %e textH
0tilitatea acestei !are este evident legat de facilitarea navigrii n site, mai ales n cazurile c#nd
dimensiunea paginii dep"e"te un ecran. ?n acest caz, utilizatorul tre!uie s deruleze la citire paginile
pe vertical, astfel c linJ%urile de pe !ara de navigare superioar nu mai sunt accesi!ile.
' astfel de !ar secundar de navigare se poate realiza proced#nd ca n &emplul B.DC. vident,
legturile vor face referire la fi"ierele 89:; dorite de dumneavoastr. ' pagin care conine o astfel
de !ar de navigare va avea aspectul din >igura B.E.
,%emplul 3# -7
<HTL>
<HEAD>
<TITLE>le$aturi1@</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">Bara de na)i$are</H1><H+>
<H: ali$n<"center">
<A hre*<"culori1.ht%l">Y/uloriY</A>
<A hre*<"*onturi1.ht%l">Y8onturiY</A>
<A hre*<"text1.ht%l">Y8or%atarea textuluiY</A>
</H:>
</B!D">
</HTL>
*ara vertical inserat ntre te&tele care trimit la paginile respective este de o!icei plasat pe
tastatur pe aceea"i tast cu caracterul (`( 2backslash6. ,ac dorii ca !ara s fac parte din te&tul
activ, o vei insera ntre etichetele <A> "i </A>, altminteri ea tre!uie plasat n afara acestora, astfel:
Y<A hre*<"culori1.ht%l">/ulori</A>Y
13. 'e(umat
$dresa 0.; 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.
;egturile se introduc ntr%un document 89:; prin intermediul etichetei container <A> </A>
conform urmtoarei sinta&e generale:
<A hre*<"adresa?(+L" na%e<"nu%e" title<"text" tar$et<"tinta">text sau
i%a$ine</A>
?n funcie de locul unde este plasat documentul referit e&ist mai multe tipuri de legturi:
;egturi n cadrul aceleia"i pagini 2legturi interne, ancore6. /entru a crea o legtur intern sunt
necesari doi pa"i: definirea numelui ancorei "i sta!ilirea legturii .
;egturi cu pagini aflate n acela"i director. /entru a sta!ili o legtur cu o pagin aflat n acela"i
director se specific drept valoare a atri!utului hre* chiar numele fi"ierului 89:;.
;egturi cu pagini aflate n alt director. /entru a sta!ili locaia documentului cu care facem legtura
se poate folosi adresarea relativ 2recomandat6 sau adresarea a!solut.
;egturile e&terne. ?n cazul legturilor e&terne, atri!utul hre* prime"te ca valoare adresa 0.; a
paginii respective.
+e pot sta!ili "i legturi ctre fi"iere oarecare 2nu neaprat documente 89:;6. ;a activarea unei
astfel de legturi se deschide fereastra de donload a sistemului.
)u ajutorul comenzii %ailtoO se lanseaz automat n e&ecuie aplicaia de po"t electronic a
vizitatorului paginii.
14. Test
1. Care dintre urmtoarele afirmaii este fals4
a6 ticheta <A> serve"te la sta!ilirea unei legturi n cadrul aceleia"i pagini
!6 ticheta <A> serve"te la sta!ilirea unei legturi ctre un fi"ier aflat pe acela"i calculator
c6 ticheta <A> serve"te la scrierea te&tului cu caractere $rial.
2. *entru a preci8a numele fi7ierului spre care se face legtura se folose7te atributul4
a6 na%e
!6 hre*
c6 *ile
3. Care este gre7eala din urmtoarea construcie9
<H2><A na%e<">$r">Greseala</A><H2>
a6 @u este nici o gre"eala.
!6 $r fi tre!uit formulat:
<H2><A na%e<"$r">Greseala</A></H2>
c6 $r fi tre!uit formulat:
<A na%e<">$r"></A><H2>Greseala</H2>
. Ce reali8ea8 exemplul urmtor9
<A na%e<"sectiunea1">Fectiunea 1</A>
a6 Insereaz o ancor n pagin "i define"te numele ei.
!6 +ta!ile"te o legtur n cadrul paginii.
c6 +ta!ile"te o legtura la fi"ierul sectiuneaD+html.
". !i7ierul contact+html, referit 6n legtura de mai ;os4
<A hre*<"../contact.ht%l">/ontact</A>
este locali8at 6n4
a6 acela"i director ca "i fi"ierul curent
!6 directorul printe al fi"ierului curent
c6 directorul aflat cu dou nivele mai sus dec#t directorul curent
$. :n documentul culori+html am inclus urmtoarea ancor4
<A na%e<"*undal"></A>
:n acest ca8, construcia corect pentru a face legtura spre ea din cadrul unui alt document
aflat 6n acela7i director este4
a6 <A hre*<">*undal">Bac;$round</A>
!6 <A hre*<"culori.ht%l?*undal">Bac;$round</A>
c6 <A hre*<"culori.ht%l>*undal>Bac;$round</A>
+. Care este aspectul unei legturi 6ntr#un text, 6n mod prestabilit EdefaultC9
a6 de culoare al!astr "i su!liniat
!6 de culoare ro"ie
c6 su!liniat
-. Care dintre urmtoarele afirmaii este fals9
a6 @u este permis im!ricarea mai multor etichete <A>.
!6 @u este permis schim!area culorilor legturilor.
c6 @u este permis referina la alte fi"iere dec#t fi"ierele 89:;.
/. *entru a stabili o legtura cu site#ul extern www.books.com folosim construcia4
a6 <A hre*<"htt&O//CCC.boo;s.co%">
!6 <A hre*<"*ileO//CCC.boo;s.co%">
c6 <A hre*<"boo;s.co%">
"0. !ie urmtoarea etichet inserat 6n pagin4
<A hre*<"%ailtoOutili3atorXdo%eniu.co%>Fend %ail</A>
Dac se execut click pe textul "4end mail":
a6 +e deschide pagina www.domeniu.com.
!6 +e deschide programul de mail al vizitatorului paginii.
c6 +e deschide csua de mail cu adresa specificat.
egturi
-# c6
$# !6
"# !6
1# a6
2# !6
3# c6
4# a6
5# !6
6# a6
-7# !6
Capitolul 1
=magini &i elemente multime%ia
Imaginile Fi elementele multimedia constituie, fr ndoial, o latur interesant "i spectaculoas a
oricrei pagini de -e!. /utei include n paginile dumneavoastr fotografii, imagini animate, sunete
sau imagini video. $tunci c#nd sunt folosite n mod judicios, aceste elemente pot m!ogi coninutul
paginilor -e!, 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 considera!il a timpului
de ncrcare al paginii.
1. +ormate!e ,iiere!or -ra,ice
Imaginile sunt stocate n fi"iere cu diverse formate, cele mai folosite pe -e! fiind, a"a cum era
firesc, cele care confer un raport optim ntre calitatea imaginii "i dimensiunile fi"ierului.
$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 fi"ierelor, care
depinde de dimensiunea acestora, devine un factor determinant.
,ou dintre cele mai utilizate tipuri de fi"iere grafice sunt GP,+ 2Foint *hotographic 5xperts
-roup6 "i +I/ 2-raphics "nterchange !ormat6.
!ormatul 1,!
>ormatul <I> 2+gif6 folose"te GHB de culori "i este ideal pentru icon%uri, ilustraii "i animaie. $cest
format utilizeaz o tehnologie special de comprimare care reduce semnificativ dimensiunile
fi"ierelor grafice pentru un transfer mai rapid prin reea. ?n procesul de comprimare se pstreaz toate
caracteristicile imaginii originale, astfel c dup decomprimare imaginea are acela"i aspect ca "i
originalul.
Imaginile <I> suport efecte de transparen, ntreesere "i animaie, asupra crora vom reveni pe
larg n capitolul ,lemente avansate de gra&ic.
,eoarece majoritatea !rowserelor recunosc formatul <I>, acesta a devenit cel mai frecvent utilizat n
paginile -e!. /oate fi folosit pentru a include imagini direct n pagini 2imagini in#line6 precum "i
pentru a referi imaginile prin intermediul unor legturi e&terne.
9otu"i, datorit numrului redus de culori, formatul <I> nu este potrivit pentru fotografii sau imagini
de calitate nalt. /entru acest tip de imagini, cel mai adecvat este formatul =/<.
!ormatul 2P31
>ormatul =/< 2+;pg6, pe de alt parte, suport un numr mult mai mare de culori 2apro&imativ DB
milioane6. ,ac dorii s folosii imagini fotografice, formatul =/< este recomandat, datorit
calitii superioare a imaginii. ,imensiunile unui fi"ier =/< nu depind de numrul de culori ci de
gradul de comprimare a imaginii. <radul de comprimare al formatului =/< este mai ridicat dec#t
cel al formatului <I>. @u este neo!i"nuit, de e&emplu, ca un fi"ier <I> care are GCC de a! s fie
comprimat ca fi"ier =/< p#n la dimensiunea de IC de a!.
/entru a realiza un grad at#t de nalt de comprimare a imaginilor, formatul =/< pierde anumite
informaii din imaginea original. )u toate c la decomprimare imaginea =/< nu va fi a!solut
identic cu imaginea original, diferenele vor fi de cele mai multe ori ino!serva!ile.
>ormatul =/< 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 nota!il zonele de mari dimensiuni colorate cu o singur nuan. ,in acest
motiv, atunci c#nd dorii s includei n pagin un desen sau o ilustraie care folose"te un numr redus
de culori, formatul <I> este cel mai potrivit.
2. C2te"a metode de o9inere a ima-ini!or
$vei la ndem#n 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 $do!e /hotoshop
"i )orel,raw.
+canarea fotografiilor realizate cu aparate foto tradiionale "i, eventual, prelucrarea lor ulterioar cu
editoare grafice.
>olosirea aparatelor de fotografiat digitale % de"i sunt ni"te echipamente nc destul de costisitoare
prezint marele avantaj c furnizeaz imagini digitale su! form de fi"iere grafice n formate comune,
care se pot descrca direct pe hard%disJ, "i care se pot utiliza ca atare sau dup o prelucrare grafic
minim.
/reluarea imaginilor de pe -e!. @umrul site%urilor care ofer colecii de imagini gratuite "i care pot
fi utilizate li!er este imens. 9otu"i, atunci c#nd dorii s folosii n pagina dumneavoastr o imagine
care nu face parte dintr%o astfel de colecie, tre!uie s avei n vedere aspectul drepturilor de autor.
/entru a prelua o imagine de pe -e! tre!uie s o salvai pe hard%disJ%ul dumneavoastr. /utei
realiza acest lucru astfel:
% plasai cursorul pe imaginea respectiv "i apsai !utonul drept al mouse%ului
% selectai din meniul care se deschide &ave "mage /s+++
% n fereastra de dialog selectai folderul de destinaie "i numele fi"ierului
% apsai !utonul &ave
ste util s v creai unul sau mai multe foldere dedicate imaginilor, organizate pe tipuri 2icon,
fundaluri, !utoane, imagini propriu%zise, etc.6, uneori alctuind adevrate !i!lioteci, 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.
'tenie(
,ac imaginea nu este salvat n acela"i folder n care se afl documentul 89:; surs care folose"te
imaginea respectiv, referina la imagine tre!uie s conin calea corect ctre locaia ei, altminteri
imaginea nu va fi afi"at n pagin.
3. 7nserarea unei ima-ini
/entru a insera o imagine n cadrul unei pagini 2o imagine in#line6, se utilizeaz eticheta <IM(> 2de
la image6. ticheta <IG> nu este o etichet container, prin urmare nu necesit o etichet
corespunztoare de nchidere.
/entru a putea identifica imaginea care va fi inserat, se utilizeaz atri!utul "rc 2source6 al etichetei
<IG>. $tri!utul src i comunica !rowserului numele "i locaia imaginii care urmeaz s fie
inserat. Paloarea acestui atri!ut este adresa 0.; a imaginii respective.
,ac imaginea se afl n acela"i director cu fi"ierul 89:; care face referire la imagine, atunci
adresa 0.; a imaginii este formata numai din numele fi"ierului, inclusiv e&tensia.
<IG src<"i%a$ine.extensie">
,ac imaginea se afla ntr%un alt director, 0.;%ul imaginii tre!uie specificat fie prin adresarea
a!solut fie, prefera!il, prin cea relativ.
&emplul 4.D ilustreaz modul n care se pot insera ntr%o pagin dou imagini, una dintre ele
afl#ndu%se n acela"i folder ca "i pagina surs, iar cealalt n folderul "magini. >igura 4.D red
aspectul paginii descrise n e&emplu.
,%emplul 4# -
<HTL>
<HEAD>
<TITLE>i%a$ini1</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">I%a$ini in &a$ina</H1><H+>
I%a$ine a*lata in acelasi *older<#>
<IG src<"ti$er.$i*" border<"D"><#>
I%a$ine a*lata in *olderul I%a$ini<#>
<IG src<"../I%a$ini/bernese.G&$" border<"1" >
</B!D">
</HTL>
?n acest e&emplu este prezent "i atri!utul bor6er al etichetei <IG>. $cesta este folosit pentru a
plasa un chenar n jurul imaginii. Paloarea atri!utului border este numrul de pi&eli care reprezint
grosimea chenarului din jurul imaginii. $!sena atri!utului sau setarea la valoarea (C( face ca acest
chenar s nu fie prezent.
0n alt atri!ut util asociat etichetei <IG> este alt. $cest atri!ut permite afi"area unui te&t e&plicativ
n spaiul n care va fi afi"at imaginea n pagin.
?n &emplul 4.G este ilustrat utilitatea atri!utului alt.
,%emplul 4# $
<HTL>
<HEAD>
<TITLE>i%a$ini2</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center"> Atributul alt </H1><H+>
Acesta este un...<B+>
<IG src<"../I%a$ini/oran$erose" alt<"tranda*ir">
</B!D">
</HTL>
,up cum putei o!serva din >igura 4.G imaginea pe care am inclus%o n document nu este afi"at.
:otivul este c am omis intenionat e&tensia +gif a fi"ierului pentru a e&emplifica utilitatea
atri!utului alt. /rin urmare, dac dintr%un motiv oarecare, imaginea nu se ncarc n pagin, se
ncarc mai greu, sau este vizualizat cu un !rowser care nu suport grafica, n zona rezervat
imaginii va fi afi"at te&tul specificat ca valoare a atri!utului alt.
,e asemenea, te&tul specificat ca valoare pentru atri!utul alt va fi afi"at "i n cadrul unei mici
ferestre care se deschide n momentul c#nd cursorul mouse%ului este meninut deasupra imaginii.
>igura 4.I red aspectul paginii n cazul c#nd atri!utul src are valoarea corect:
"oran$erose.$i*".
0n alt motiv pentru care este indicat folosirea atri!utului alt este acela c vizitatorul paginii are
posi!ilitatea de a vedea nc nainte de ncrcarea complet a imaginii ce anume se va afi"a n zona
respectiv. $stfel, el are posi!ilitatea de a a"tepta ncrcarea complet a imaginii sau de a trece la alt
pagin.
4. :imensionarea ima-inii
,imensionarea imaginii se realizeaz cu ajutorul atri!utelor 5i6th % prin care se sta!ile"te limea
imaginii "i height % prin care se sta!ile"te nlimea imaginii.
?n &emplul 4.I sunt precizate "i dimensiunile imaginii incluse n document. +e o!serv c
dimensionarea imaginilor se face n pi&eli. ste, desigur, posi!il, ca dimensionarea s se fac n
procente, ca "i la liniile orizontale, de e&emplu. 9otu"i, n afara unor cazuri speciale, aceasta este
considerat o practic gre"it, deoarece !rowserul va redimensiona imaginea iar rezultatele vor fi de
calitate sla!.
,%emplul 4# "
<HTL>
<HEAD>
<TITLE>i%a$ini9</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">Di%ensionarea i%a$inilor</H1><H+>
<IG src<"ti$er.$i*" Cidth<"9D@" hei$ht<"2D@"><#>
</B!D">
</HTL>
'!serv#nd >igura 4.K 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: limeOGCC
pi&eli, nlimeODGH pi&eli.
,ac dimensiunile imaginii n pagin sunt setate la valori considera!il mai mari dec#t dimensiunile
imaginii originale calitatea imaginii incluse n pagin va avea de suferit. )oncluzia care se impune
este c dimensionarea imaginilor din pagin tre!uie s se fac la valori c#t mai apropiate de
dimensiunile iniiale ale imaginilor.
P putei ntre!a atunci, de ce mai este necesar includerea atri!utelor de dimensionare a imaginii.
@u numai c este necesar, dar este considerat o practic defectuoas a!sena lor din cadrul
etichetei <IG>.
:otivul este acela c includerea dimensiunilor imaginii ofer !rowserului posi!ilitatea de a rezerva
spaiu pentru imagine "i de a ncepe ncrcarea te&tului simultan cu ncrcarea imaginii. ,ac
atri!utele de dimensionare nu sunt prezente, !rowserul va efectua ni"te pa"i suplimentari pentru a
calcula spaiul din pagin necesar afi"rii imaginii. ,in acest motiv afi"area te&tului nu va putea
ncepe dec#t dup ce imaginea este ncrcat n ntregime.
ste indicat s evitam o asemenea situaie deoarece imaginile se ncarc mai greu dec#t te&tul "i
muli vizitatori ai paginii nu vor a"tepta suficient pentru ca ntreaga pagin 2imagini "i te&t6 s fie
ncrcat.
#. .!inierea ima-inii i a textu!ui
$linierea unei imagini n raport cu te&tul din pagin se realizeaz prin intermediul atri!utului align,
care poate lua urmtoarele valori:
le*t % aliniere la st#nga^ te&tul este dispus n partea dreapt a imaginii ncadr#nd imaginea
ri$ht % aliniere la dreapta^ te&tul este dispus n partea st#nga a imaginii ncadr#nd imaginea
to& % aliniere deasupra^ partea de sus a imaginii se aliniaz cu prima linie a te&tului ce precede
imaginea
%iddle % aliniere la mijloc^ mijlocul imaginii se aliniaz cu prima linie a te&tului ce precede
imaginea.
botto% % aliniere dedesu!t, la !az^ partea de jos a imaginii se aliniaz cu prima linie a te&tului.
Palorile le*t, ri$ht, "i botto% ale atri!utului ali$n permit ca te&tul s fie dispus n jurul
imaginii, n vreme ce to& "i %iddle nu permit acest lucru.
&emplul 4.K ilustreaz modul de aliniere botto%, a"a cum rezult din >igura 4.H.
,%emplul 4# 1
<HTL>
<HEAD>
<TITLE>i%a$ini:</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">Alinierea i%a$inii si textului (botto%6</H1><H+>
<IG src<"../I%a$ini/ea$lehed.$i*" ali$n<"botto%" Cidth<"1@@"
hei$ht<"HH" alt<")ultur">
I%a$ine text.I%a$ine text.I%a$ine text.I%a$ine text.I%a$ine
text.I%a$ine text.I%a$ine text.I%a$ine text.I%a$ine text.I%a$ine
text.I%a$ine text.I%a$ine text.I%a$ine text.I%a$ine text.I%a$ine
text.I%a$ine text.
I%a$ine text.I%a$ine text.I%a$ine text.I%a$ine text.I%a$ine
text.I%a$ine text.I%a$ine text.I%a$ine text.
</B!D">
</HTL>
>igura 4.B red modul de aliniere le*t iar >igura 4.4 modul de aliniere ri$ht.
,in >igura 4.3 "i >igura 4.E putei o!serva modurile de aliniere to& "i %iddle precum "i faptul c
aceste alinieri nu permit dispunerea te&tului n jurul imaginii.
$lte dou atri!ute utile, care servesc la alinierea imaginii fa de restul elementelor din pagin, sunt
atri!utele h"&ace "i v"&ace. le precizeaz distana, n pi&eli, pe orizontal, respectiv pe vertical,
dintre imagine "i restul elementelor din pagin.
?n &emplul 4. K vom schim!a modul de aliniere n cadrul etichetei <IG> "i vom aduga atri!utele
hs&ace, respectiv )s&ace, astfel:
<IG src<"../I%a$ini/ea$lehed.$i*" ali$n<"le*t" Cidth<"1@@" hei$ht<"HH"
alt<")ultur" )s&ace<"1@" hs&ace<"1@">
$spectul paginii va fi cel din >igura 4.DC.
$i o!servat, pro!a!il, c dintre valorile pe care le poate lua atri!utul ali$n lipse"te valoarea
center. ?ntr%adevr, alinierea unei imagini la centrul paginii nu se poate face prin intermediul
atri!utului ali$n. )entrarea unei imagini se poate realiza numai dac este izolat de te&tul care o
nconjoar. /entru aceasta se poate folosi eticheta </E0TE+> sau se poate include imaginea ntr%un
!loc paragraf sau ntr%un !loc <DIJ> av#nd atri!utul ali$n setat la valoarea center.
&emplul 4.H ilustreaz acest mod de aliniere folosind eticheta <DIJ> aspectul paginii fiind cel din
>igura 4.DD.
,%emplul 4# 2
<HTL>
<HEAD>
<TITLE>i%a$iniD</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">/entrarea unui i%a$ini</H1><H+>
I%a$ine text.I%a$ine text.I%a$ine text.I%a$ine text.I%a$ine
text.I%a$ine text.I%a$ine text.I%a$ine text.
<DIJ ali$n<"center">
<IG src<"../I%a$ini/de)il.$i*" Cidth<"H:" hei$ht<"H:"
alt<"dracusor">
</DIJ>
I%a$ine text.I%a$ine text.I%a$ine text.I%a$ine text.I%a$ine
text.I%a$ine text.I%a$ine text.I%a$ine text.
</B!D">
</HTL>
&emplul 4.B ilustreaz modul n care pot fi aliniate dou imagini fa de te&tul din pagin.
,in >igura 4.DG putei o!serva c, dac alinierea la st#nga a imaginii mpreun cu folosirea
atri!utelor hs&ace "i )s&ace conduce la un aspect ordonat al elementelor, aspectul te&tului n
raport cu imaginea aliniat la dreapta depinde de dimensiunea ferestrei !rowserului.
,%emplul 4# 3
<HTL>
<HEAD>
<TITLE>i%a$iniH</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">Alinierea a doua i%a$ini</H1><H+>
<IG src<"../I%a$ini/%tnscene.G&$" ali$n<"le*t" Cidth<"2@@"
hei$ht<"1::" ali$n<"le*t" hs&ace<"1@" )s&ace<"1@">
I%a$ine text. I%a$ine text. I%a$ine text. I%a$ine text.I%a$ine text.
I%a$ine text. I%a$ine text. I%a$ine text.
<IG src<"../I%a$ini/sunscene.G&$" ali$n<"ri$ht" Cidth<"2@2"
hei$ht<"192" hs&ace<"1@" )s&ace<"1@">
I%a$ine text. I%a$ine text. I%a$ine text. I%a$ine text.I%a$ine text.
I%a$ine text. I%a$ine text. I%a$ine text.I%a$ine text. I%a$ine text.
I%a$ine text. I%a$ine text.I%a$ine text. I%a$ine text. I%a$ine text.
I%a$ine text.I%a$ine text. I%a$ine text. I%a$ine text. I%a$ine
text.I%a$ine text. I%a$ine text. I%a$ine text. I%a$ine text.
</B!D">
</HTL>
%. 7ma-ini ,o!osite ca ,ond 39ac;-round9 a! pa-inii
' imagine poate fi utilizat "i pentru a sta!ili fondul unei pagini -e!. ?n acest scop se folose"te
atri!utul backgro'n6 al etichetei <B!D">, av#nd ca valoare adresa 0.; a imaginii. Imaginea se
multiplic aliniat 2tiling6 pe orizontal "i pe vertical p#n umple ntregul ecran.
&emplul 4.4 ilustreaz utilizarea atri!utului bac;$round.
,%emplul 4# 4
<HTL>
<HEAD>
<TITLE>i%a$iniI</TITLE>
</HEAD>
<B!D" bac;$round<"../I%a$ini/sil;.G&$">
<H1 ali$n<"center">I%a$inea ca *ond al &a$inii</H1><H+>
8ond de %atase...
</B!D">
</HTL>
>igura 4.DI red aspectul unei pagini care folose"te ca fundal o imagine.
&. 7ma-ini ,o!osite ca !e-$turi
/entru a folosi o imagine drept legtura se procedeaz ca n urmtorul e&emplu:
<A hre*<"tabel?culori.ht%l">
<IG src<"&ris%.$i*" Cidth<"1@@" hei$ht<"P@" alt<"culori">
</A>
+%a folosit eticheta <A> prin intermediul creia am creat legtura cu fi"ierul tabel?culori.ht%l.
?ntre etichetele <A> "i </A> am inclus o imagine care nlocuie"te te&tul e&plicativ pe care vizitatorul
urmeaz s fac clicJ cu mouse%ul. Imaginea serve"te, 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 presta!ilit imaginea utilizat pe post de zon activ este nconjurat de un
chenar av#nd culoarea unei legturi 2al!astru6. ,ac sta!ilim pentru atri!utul border al etichetei
valoarea (C( acest chenar dispare.
&emplul 4.3 prezint codul complet.
,%emplul 4# 5
<HTL>
<HEAD>
<TITLE>i%a$iniP</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center"> I%a$ini cu le$aturi </H1><H+>
<B+>A% &us o i%a$ine cu le$atura &e &a$ina<#>
<A hre*<"tabel culori.ht%l">
<IG src<"../I%a$ini/&ris%.$i*" Cidth<"1@@" hei$ht<"P@" alt<"culori">
</A>
</B!D">
</HTL>
?n >igura 4.DK putei o!serva modul n care funcioneaz imaginea folosit ca legtur n e&emplul
de mai sus.
0. 7ma-ini!e miniatura!e 3t*um9nai!s4
,ac ntr%o pagin -e! este necesar afi"area unui numr mare de imagini, ncrcarea paginii se va
face destul de greu. ,e multe ori, vizitatorii paginii nu vor avea r!darea necesar pentru a a"tepta
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 2thumbnail%uri6. ' imagine
thumbnail este o versiune de dimensiuni reduse a unei imagini mai mari, care se ncarc mult mai
rapid "i care, de"i este de dimensiuni mici "i de calitate sczut, permite vizitatorului s afle ce
anume reprezint "i s decid dac este interesat sau nu s deschid versiunea integral..
Imaginea miniatural reprezint o legtur spre fi"ierul cu imaginea original din care provine. ?n
cazul n care vizitatorul paginii dore"te s vad imaginea original, o poate deschide efectu#nd clicJ
imaginea thumbnail+
.ealizarea imaginilor miniaturale se poate face fie prin mic"orarea proporional a imaginilor, fie
prin reducerea lor la o dimensiune presta!ilit 2strech6 chiar dac imaginea se distorsioneaz, n
cazul n care se dore"te, de pild, ca toate thumbnail#urile dintr%o pagin s ai! acelea"i dimensiuni.
&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 2mic"orat6 direct n pagin
!olo.irea a dou& ima%ini
' imagine thumbnail este foarte u"or de realizat. 'ricare ar fi programul de grafic pe care l folosii,
tot ceea ce avei de fcut este s gsii opiunea Resi8e 2care de o!icei face parte din meniul 5dit sau
"mage6 "i s precizai n caseta de dialog care se deschide, dimensiunile dorite. Pei o!serva c e&ist
de regul o opiune seta!il pentru pstrarea proporionalitii cu dimensiunile. ,ac este activat,
dup sta!ilirea uneia dintre dimensiuni 2idth, de e&emplu6, cealalt 2height6 este calculat automat.
?n &emplul 4.E este plasat o imagine thumbnail n pagin, folosind prima metod, >igura 4.DH
ilustr#nd funcionarea imaginii thumbnail.
,%emplul 4# 6
<HTL>
<HEAD>
<TITLE>i%a$iniQ</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">Thu%bnails - doua i%a$ini</H1><H+>
<#>
<A hre*<"../I%a$ini/3do$.$i*">
<IG src<"../I%a$ini/3do$?th.$i*"></A>
</B!D">
<HTL>
>i"ierul 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 afi"at un chenar presta!ilit al!astru. ,ac dorii ca acest chenar s nu mai
fie afi"at, putei folosi atri!utul border al etichetei <IG> setat la valoarea (C(. Imaginea original
se va deschide n aceea"i fereastr cu pagina n care este plasat imaginea thumbnail. /entru a reveni
n pagin, tre!uie s apsai !utonul 0ack al !rowserului.
!olo.irea unei .in%ure ima%ini
$ceast metod este adesea preferat, deoarece folose"te un singur fi"ier, cel care conine imaginea
original, miniaturizarea ei fc#ndu%se chiar n pagin, cu ajutorul atri!utelor Cidth "i hei$ht. ste
o metoda mai eficient "i mai rapid, deoarece imaginea de dimensiuni mari care urmeaz a fi afi"at
este deja ncrcat n memoria cache a !rowserului "i este imediat disponi!il pentru afi"are.
?n e&emplul urmtor 2&emplul 4.DC6 am folosit o singur imagine pentru a ncrca at#t imaginea
thumbnail c#t "i pe cea cu dimensiunile originale. $spectul paginii este redat n >igura 4.DB.
,%emplul 4# -7
<HTL>
<HEAD>
<TITLE>i%a$ini1@</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">Thu%bnails - o sin$ura i%a$ine</H1><H+>
<#>
<A hre*<"../I%a$ini/3do$.$i*">
<IG src<"../I%a$ini/3do$.$i*" Cidth<"I@" hei$ht<"IH"></A>
</B!D">
<HTL>
,up cum se poate o!serva, am creat un linJ 2cu ajutorul etichetei <A>6 la fi"ierul 8dog+gif care
conine imaginea original. $m folosit drept legtur aceea"i imagine, dar redimensionat, folosind
atri!utele Cidth "i hei$ht.
?n e&emplul anterior, imaginea thumbnail este ncrcat prima. ?n momentul c#nd 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 afi"area
imaginii cu dimensiunile originale s fie mai rapid.
1. 7ma-ini!e "ideo
/entru a insera o imagine video ntr%un document 89:; se folosesc atri!utele 6:n"rc, control",
loo& "i "tart ale etichetei <IG>.
$tri!utul 6:n"rc nlocuie"te atri!utul src "i permite inserarea n documentul 89:; a unei imagini
video n acela"i mod n care este inserat o imagine static.
Paloarea atri!utului d7nsrc este adresa 0.; a fi"ierului video care va fi inclus n pagin conform
sinta&ei:
<IG d7nsrc<"(+L?*isier?)ideo">
$cest atri!ut este o e&tensie Internet &plorer "i nu este recunoscut de !rowserele @etscape. /entru a
vizualiza o imagine video in#line ntr%un !rowser @etscape, vizitatorul paginii tre!uie s instaleze un
program au&iliar de tip plug#in. ,ac programul plug#in nu este disponi!il pe computerul
vizitatorului, imaginea video nu va putea fi afi"at.
+ingurul format de fi"iere video care este suportat de e&tensiile Internet &plorer este 'HI 2/udio
2ideo "nterleave6, deoarece acesta este formatul de redare care este inclus n !rowser+ )onstrucia de
mai jos include ntr%un document 89:; fi"ierul video introducere+avi care se afl n folderul 2ideo:
<IG d7nsrc<"../Jideo/introducere.a)i">
fectul acestei etichete este deschiderea de ctre !rowser a unei ferestre de vizualizare n interiorul
paginii -e!, 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 o!i"nuite,
imaginea video este afi"at pe msur ce este ncrcat.
,eoarece nici un alt !rowser n afar de Internet &plorer nu recunoa"te aceast e&tensie, este
recomandat s includei n cadrul etichetei <IG> "i atri!utul src prin care s furnizai o imagine
static ce va fi afi"at n acela"i cadru. *rowserele care nu recunosc e&tensia d7nsrc vor afi"a
imaginea static pe c#nd Internet &plorer va afi"a imaginea video. 'rdinea n care apar cele dou
atri!ute nu are importan. ,e e&emplu:
<IG d7nsrc<"../Jideo/intro.a)i" src<"../I%a$ini/intro.$i*">
?n mod normal, Internet &plorer red clipul video ntr%o fereastr n care nu sunt afi"ate nici un fel
de !utoane de control. 0tilizatorul poate relua, opri sau continua redarea clipului efectu#nd clicJ
dreapta cu mouse%ul n interiorul ferestrei.
/entru a aduga !utoane de control acestei ferestre se utilizeaz atri!utul control" al etichetei
<IG>. $tri!utul controls nu are alocat nici o valoare, prezena sa av#nd doar scopul de a aduga
!utoanele de control asemntoare celor de la aparatele video. ,e e&emplu:
<IG d7nsrc<"../Jideo/intro.a)i" src<"../I%a$ini/intro.$i*" controls>
)lipul video inclus n pagin este redat de !rowser o singur dat, de la nceput p#n la sf#r"it.
/entru a repeta redarea clipului de un anumit numr de ori este folosit atri!utul loo&. Palorile
posi!ile ale atri!utului sunt:
un numr ntreg care reprezint numrul de reluri ale clipului
in*inite, caz n care clipul este redat p#n c#nd utilizatorul stopeaz derularea sa aps#nd !utonul
stop al ferestrei de vizualizare 2n cazul c#nd fereastra conine !utoanele de control6 sau efectueaz
clicJ dreapta cu mouse%ul n fereastra de vizualizare.
&emplul de mai jos ilustreaz modul n care poate fi setat atri!utul loo&:
<IG d7nsrc<"../Jideo/intro.a)i" src<"../I%a$ini/intro.$i*" controls
loo&<"in*inite">
$"a cum am precizat, redarea imaginii video ncepe imediat ce aceasta a fost complet ncrcat n
pagin. /entru a schim!a acest comportament se folose"te atri!utul "tart care poate avea valorile:
%ouseo)er, situaie n care derularea imaginii video ncepe n momentul c#nd mouse%ul este plasat
deasupra imaginii
*ileo&en, valoarea predefinit, situaie n care derularea imaginii ncepe imediat dup ncrcarea n
pagin
)ele dou valori pot fi com!inate pentru a se realiza redarea imaginii mai nt#i imediat dup
ncrcarea n pagin "i apoi de fiecare dat c#nd mouse%ul este plasat deasupra ei, ca n e&emplul
urmtor:
<IG d7nsrc<"../Jideo/intro.a)i" src<"../I%a$ini/intro.$i*" controls
loo&<"in*inite" start<"*ileo&en= %ouseo)er">
Imaginile video in#line pot fi tratate ca "i imaginile statice. ' astfel de imagine poate fi aliniat
folosind atri!utul align, sau poate fi spaiat fa de te&tul care o nconjoar.
&emplul 4.DD ilustreaz atri!utele prezentate mai sus. /agina va avea aspectul din >igura 4.D4.
,%emplul 4# --
<HTL>
<HEAD>
<TITLE>i%a$ini11</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">I%a$ini )ideo</H1><H+>
<8!0T si3e<":" color<"blue">/li&ul )ideo de %ai Gos *ace &arte din
Gocul Heroes 9</8!0T><#>
</E0TE+>
<IG d7nsrc<"../Jideo/shield.a)i" src<"../I%a$ini/banana.$i*"
controls start<"*ileo&en= %ouseo)er" loo&<"in*inite">
<//E0TE+>
</B!D">
</HTL>
18. Sunete!e
,ac eticheta <IG> permite afi"area unei imagini de fundal, e&ist "i o etichet care realizeaz
includerea n pagina -e! a unei muzici de fundal "i anume eticheta <B($O+!D>. $ceast etichet
este, de asemenea, o e&tensie Internet &plorer deci nu este recunoscut "i e&ecutat n alte
!rowsere+
*rowserul Internet &plorer conine un decodor de sunet ncorporat "i permite integrarea prin
eticheta <BGF!(0D> a sunetului de fundal pentru o pagin. +inta&a etichetei <BGF!(0D> este
urmtoarea:
<BGF!(0D src<"(+L?*isier?sunet" loo&<")aloare">
$tri!utul "rc are drept valoare adresa 0.; a fi"ierului de sunet care este folosit ca fundal sonor al
paginii.
?n mod curent, Internet &plorer recunoa"te trei tipuri de fi"iere de sunet:
fi"iere cu e&tensia .9av care este formatul nativ pentru /)
fi"iere cu e&tensia .au, formatul nativ pentru sistemele 0@I_
fi"iere cu e&tensia .midi, un format universal acceptat pentru codificarea sunetelor
/entru a include ntr%o pagin un fi"ier de sunet se procedeaz ca n e&emplul urmtor:
<BGF!(0D src<"../Funet/Cellco%e.Ca)>
)a "i n cazul imaginilor video in#line, fi"ierul de sunet este redat o singur dat, la ncrcarea
paginii. /entru redarea sa repetat se folose"te atri!utul loo& al etichetei <BGF!(0D> care poate
avea ca valori:
un numr ntreg, care reprezint numrul de reluri ale piesei
in*inite, caz n care piesa muzical este reluat p#n c#nd utilizatorul prse"te pagina sau
nchide fereastra !rowserului.
&ecutai &emplul 4.DG cu un !rowser Internet &plorer pentru a o!serva efectul etichetei
<BGF!(0D>. ,esigur, este necesar s schim!ai adresa 0.; a fi"ierului de sunet specific#nd un fi"ier
e&istent pe hard%disJ%ul dumneavoastr.
,%emplul 4# -$
<HTL>
<HEAD>
<TITLE>i%a$ini12</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">u3ica de *undal</H1><H+>
<#>
<8!0T si3e<":" color<"red">u3ica se )a au3i &ana cand )eti inchide
&a$ina</8!0T>
<BGF!(0D src<"../Funet/'elco%QP.Ca)" loo&<"in*inite">
</B!D">
</HTL>
11. Su-estii pri"ind ,o!osirea ima-ini!or i e!emente!or mu!timedia
)#nd folosii imagini ntr%o pagin -e!, tre!uie s v punei ntre!area: (ste necesar aceast
imagine sau ar fi suficient s folosesc te&t7(. )hiar dac se spune c o imagine face c#t o mie de
cuvinte, acest lucru nu este ntotdeauna adevrat pe -e!. ?nlocuirea te&tului care conine informaiile
eseniale dintr%o pagin -e! cu imagini este adesea o gre"eal.
0n prim motiv este c nc mai e&ist !rowsere non%grafice cum este ;Fn&, care nu afi"eaz dec#t
te&tul.
$poi, chiar "i n !rowserele grafice, anumii utilizatori ar putea opta, din varii motive, pentru
dezactivarea afi"rii imaginilor.
0n alt motiv ar fi acela c, din cauza duratei mari de ncrcare a fi"ierelor cu imagini de mari
dimensiuni, unii utilizatori ar putea renuna pur "i simplu la deschiderea paginii.
1i nu n ultimul r#nd, deoarece, spre deose!ire de te&t, imaginile pot nt#mpina diverse dificulti
tehnice la afi"are.
Imaginile dintr%o pagin -e! tre!uie g#ndite ca ni"te 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 deose!it de utile n cadrul unui site. ,ar dac o imagine nu
serve"te unui scop !ine definit n pagin, e !ine s v g#ndii de dou ori, nainte de a o folosi.
,e asemenea se recomand s fii precaut "i n privina imaginilor folosite ca fundal 2background6.
?ntr%adevr, acestea pot oferi un aspect spectaculos paginii dumneavoastr. ?ns tre!uie s fii
con"tient de faptul c o imagine folosit ca fundal va cre"te cu siguran timpul necesar ncrcrii
paginii. ,ac n cazul imaginilor in#line te&tul se poate afi"a naintea sau n timpul ncrcrii
imaginii, la imaginile de fundal afi"area celorlalte elemente din pagin nu va putea ncepe dec#t dup
ncrcarea n ntregime a fundalului.
:ai mult, spre deose!ire de imaginile in#line, care pot m!ogi coninutul informaional al paginilor,
imaginile de fundal nu aduc cu adevrat dec#t foarte rar un supliment de informaie. ,e"i aspectul
unei asemenea pagini poate fi atrgtor, de cele mai multe ori folosirea imaginilor de fundal n
com!inaii nefericite cu fonturi de anumite tipuri sau culori, fr contrast suficient, poate face pagina
ncrcat "i greu de citit.
,ac totu"i v decidei s folosii o imagine ca fundal al paginii este recomandat s specificai
simultan "i o culoare de fundal, adic s setai atri!utul b$color. $stfel, dac dintr%un motiv
oarecare imaginea de fundal nu se ncarc, pagina va avea totu"i culoarea presta!ilit de
dumneavoastr.
)a "i imaginile, "i celelalte elemente multimedia tre!uie folosite cu discernm#nt ntr%o pagin -e!.
Imaginile video au dimensiuni semnificativ mai ari dec#t imaginile statice, deci se ncarc mult mai
ncet dec#t acestea astfel nc#t includerea lor in#line va mri considera!il timpul de ncrcare al
paginii.
?n plus, formatele diverse utilizate nu pot fi deschise ntotdeauna cu !rowserul, unele impun#nd
e&istena unor plug#in%uri sau chiar unor programe speciale.
' metod de compromis recomandat este descrierea coninutului fi"ierului, eventual inserarea unui
fragment video e&emplificativ 2sample6 de dimensiuni mult mai mici, similar cumva metodei
thumbnail%urilor. +e asigur o legtur "i spre fi"ierul integral, astfel nc#t, dup vizualizarea
e&emplului, vizitatorul s poat alege dac va a"tepta timpul necesar ncrcrii sale sau nu.
:uzica de fundal este de cele mai multe ori nerecomandat. >oarte muli vizitatori pot vizualiza
paginile dumneavoastr av#nd sunetul dezactivat. >olosirea unei muzici de fundal ncetine"te
ncrcarea paginii "i, n plus, este foarte posi!il ca muzica pe care ai ales%o s nu fie pe gustul celor
care v viziteaz pagina, !a chiar s i determine s o prseasc nainte de a citi coninutul acesteia.
,ac este necesar, totu"i, s introducei muzic sau sunet n paginile dumneavoastr, este o prevedere
neleapt s plasai fi"ierele de sunet separat "i s asigurai legturi ctre acestea astfel nc#t
vizitatorul s le poat audia, dac dore"te.
12. 7ma-ini!e i timpu! de nc$rcare a! pa-inii
0nul dintre cele mai importante aspecte care tre!uie luate n considerare la includerea imaginilor
ntr%un document este timpul de Incrcare 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 !and, etc. )um nu putei
avea control asupra acestora, singurul lucru care v rm#ne de fcut este s v construii paginile
astfel nc#t s ai! o !un vitez de ncrcare chiar "i n cazul unui vizitator care deine o cone&iune
modest ca performane.
/e l#ng alegerea cu foarte mult grij a imaginilor care vor fi incluse n document, mai e&ist c#teva
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 c#t mai
puine posi!il. ?ncercai s gsii un raport optim ntre dimensiunea fi"ierului "i calitatea imaginii.
vitai 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
!rowsere rein n memoria cache elementele documentelor care urmeaz a fi afi"ate. $stfel, dac o
imagine este utilizat n mai multe pagini aceasta nu tre!uie ncrcat de fiecare dat n memorie ci
este disponi!il pentru a fi afi"at oric#nd 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. :ai multe documente de dimensiuni
mai mici legate ntre ele prin legturi sunt mai !ine acceptate de vizitatori dec#t un singur document
foarte mare care necesit un timp de ncrcare ndelungat. .egula general acceptat este meninerea
dimensiunilor unui document -e! n jurul valorii de HCa!, incluz#nd 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, ntruc#t imaginea original referit prin
imaginea thumbnail se poate deschide 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 !rowser a
spaiului necesar pentru afi"area imaginii, m!untindu%se viteza de ncrcare a paginii.
13. 'e(umat
>ormatele cele mai utilizate pentru fi"ierele grafice sunt =/< "i <I>.
Inserarea unei imagini ntr%un document 89:; se realizeaz cu ajutorul etichetei <IG>.
+inta&a etichetei <IG> este urmtoarea:
<IG src<"(+L?i%a$ine" ali$n<"&o3itie" Cidth<")aloare" hei$ht<")aloare"
)s&ace<")aloare" hs&ace<")aloare" alt<"text" border<")aloare"
d7nsrc<"(+L?i%a$ine?)ideo" loo&<")aloare" start<")aloare" controls>
unde:
src precizeaz locaia imaginii
Cidth "i hei$ht sta!ilesc dimensiunile imaginii
)s&ace "i hs&ace sta!ilesc distana pe vertical "i orizontal fa de restul te&tului din pagin
ali$n aliniaz imaginea fa de te&tul din jurul ei
alt furnizeaz un te&t e&plicativ asupra imaginii
border sta!ile"te grosimea chenarului imaginii
d7nsrc introduce o imagine video "i precizeaz locaia ei
loo& specific numrul de reluri ale imaginii video
start precizeaz momentul nceperii redrii imaginii
controls afi"eaz !utoanele de control ale ferestrei video
Imaginile pot fi folosite ca fond al paginii cu ajutorul atri!utului bac;$round al etichetei <B!D">.
' imagine poate servi drept legtur ctre un alt document 89:; prin includerea etichetei <IG>
ntre etichetele <A> </A>.
' practic des folosit este inserarea n pagin a imaginilor miniaturale care la e&ecutarea unui click
pe ele deschid imaginea original.
:uzica de fundal poate fi adugat unui document prin intermediul etichetei <BGF!(0D>.
$legerea imaginilor care vor fi incluse ntr%un document 89:; tre!uie fcut cu grij, n funcie de
rolul acestora n structura documentului "i av#nd permanent n vedere timpul de ncrcare al paginii.
14. Test
"1. Ce etichet folosim pentru a insera o imagine 6n pagin9
a6 <IG>
!6 <A>
c6 <#I/>
"2. /tributul src serve7te la4
a6 poziionarea imaginii n pagin
!6 sta!ilirea numelui "i locaiei unde se afl imaginea
c6 crearea unei legturi prin intermediul imaginii
"3. /tributele wi!" 7i "#i$"! ale etichetei <IMG> sunt folosite pentru4
a6 dimensionarea te&tului
!6 alinierea imaginii cu te&tul
c6 dimensionarea imaginii
". Ce efect are absena atributelor wi!" 7i "#i$"! din eticheta <IMG>9
a6 @u se afi"eaz imaginea.
!6 Imaginea se afi"eaz pe toata suprafaa ferestrei !rowserului.
c6 *rowserul a"teapt ncrcarea complet a imaginii nainte de a ncepe afi"area te&tului.
"". Care dintre atributele urmtoare permit afi7area textului 6n ;urul imaginii9
a6 to&
!6 botto%
c6 %iddle
"$. Care dintre construciile urmtoare este folosit pentru a stabili ca fond al paginii imaginea rice+gif9
a6 <IG bac;$round<"rice.$i*">
!6 <IG src<"rice.$i*" bac;$round>
c6 <B!D" bac;$round<"rice.$i*">
"+. Ce reali8ea8 atributul al! 6n urmtoarea construcie9
<IG src<"do$.$i*" alt<"catel">
a6 $fi"eaz cuv#ntul catel l#ng imagine.
!6 $fi"eaz cuv#ntul catel n spaiul rezervat imaginii.
c6 $tri!uie fi"ierului dog+gif numele catel.
"-. Care dintre urmtoarele construcii plasea8 imaginea 6n stHnga 7i alinia8 textul 6n ;urul imaginii9
a6 <IG src<"%oon.$i*" Cra&<"le*t">
!6 <IG src<"%oon.$i*" ali$n<"le*t">
c6 <IG src<"%oon.$i*> ali$n<"Cra&">
"/. Care dintre urmtoarele construcii are drept efect folosirea imaginii sign+gif ca legtur9
a6 <A hre*<"se%n.ht%l"></A><IG src<"si$n.$i*>
!6 <A src<"se%n.ht%l><IG hre*<"si$n.$i*"></A>
c6 <A hre*<"se%n.ht%l><IG src<"si$n.$i*"></A>
$0. *entru a include 6n pagin o imagine video se folose7te urmtoarea construcie4
a6 <IG src<"(+L?i%a$ine">
!6 <IG d7nsrc<"(+L?i%a$ine">
c6 <IG )ideo<"(+L?i%a$ine">
Imagini
-# a6
$# !6
"# c6
1# c6
2# !6
3# c6
4# !6
5# !6
6# c6
-7# !6
Capitolul 5
Liste
;istele reprezint unele dintre cele mai o!i"nuite elemente dintr%o pagin -e!. $cestea sunt deseori
folosite pentru a prezenta informaiile n mod organizat, ntr%o manier accesi!il "i u"or de parcurs.
le pot fi de trei tipuri:
liste ordonate 2marcate prin numere sau litere6,
liste neordonate 2marcate prin cratime, !uline sau alte sim!oluri6
liste de de&iniii, afi"ate fr nici un fel de marcaj.
?n interiorul etichetelor care delimiteaz o list pot fi folosite orice alte etichete 89:;, cum ar fi
etichete de formatare a te&tului, legturi, imagini, etc.
1. Liste neordonate
' list neordonat reprezint o colecie de elemente nrudite, dispuse ntr%o ordine oarecare. 0n
e&emplu tipic pentru o pagin -e! este o list de linJ%uri spre alte documente.
$cest tip de list este de fapt un !loc de te&t delimitat de etichetele
<+L> </+L> 2unordered listOlist neordonat6. ticheta de nchidere </(L> este o!ligatorie.
>iecare element al listei este introdus prin eticheta <LI> 2list item6. )u toate c eticheta <LI> este o
etichet container, eticheta sa de nchidere, </LI>, este opional. ,ac nu este prezent, la
nt#lnirea unei noi etichete <LI> se consider c vechea etichet este nchis.
;ista va fi afi"at indentat fa de restul paginii "i fiecare element al listei ncepe pe un r#nd nou. ?n
mod presta!ilit, fiecare element al listei va fi marcat 2bulleted6 cu (!ulin(. &emplul 3.D
construie"te o list neordonat, aspectul su fiind cel din
>igura 3.D.
,%emplul 5# -
<HTL>
<HEAD>
<TITLE>liste1</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">Lista neordonata</H1><H+>
<(L>/ulori
<LI>Blac;
<LI>'hite
<LI>+ed
<LI>Green
<LI>Blue
<LI>"elloC
<LI>#ur&le
<LI>AKua
</(L>
</B!D">
</HTL>
tichetele <(L> "i <LI> pot avea definit atri!utul t:&e care sta!ile"te caracterul afi"at n faa
fiecrui element al listei. Palorile posi!ile al acestui atri!ut sunt:
circle 2cerc6
disc 2disc plin6 % valoarea presta!ilit
sKuare 2patrat6
;ista din &emplul 3.G are atri!utul t7&e setat la valoarea "sKuare". ;ista este marcat a"a cum se
poate vedea n >igura 3.G
,%emplul 5# $
<HTL>
<HEAD>
<TITLE>liste2</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">Atributul t7&e la liste neordonate</H1><H+>
<(L t7&e<"sKuare">Li%baGe de &ro$ra%are
<LI>/
<LI>/EE
<LI>#ascal
<LI> Basic
<LI>#erl
</(L>
</B!D">
</HTL>
+etarea atri!utului t7&e pentru un item al listei nlocuie"te tipul de marcaj cu tipul specificat pentru
acel item.
?n >igura 3.I putei o!serva efectul setrii atri!utului t7&e pentru un item individual la listei.
,%emplul 5# "
<HTL>
<HEAD>
<TITLE>liste9</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">Atributul t7&e la ite%ul unei liste </H1><H+>
<(L t7&e<"sKuare">Li%baGe de &ro$ra%are
<LI>/
<LI>/EE
<LI>#ascal
<LI t7&e<"circle">Basic
<LI>#erl
</(L>
</B!D">
</HTL>
!orme particulare de li.te neordonate
ista de directoare . este o list introdus prin eticheta <DI)> </DI)>. ticheta a fost iniial
utilizat pentru alctuirea listelor de fi"iere. :ulte !rowsere nu fac nici o diferen ntre etichetele
<DI+> "i <(L>= efectul lor fiind acela"i.
ista de meniuri % utilizeaz eticheta <ME!+>. 0nele !rowsere afi"eaz lista doar n format u"or
diferit fa de listele neordonate, altele ns folosesc chiar un fel de meniu grafic de tip pull#don
pentru afi"area acestor liste.
2. Liste ordonate
' list ordonat este un !loc de te&t delimitat de etichetele <OL> </OL> 2ordered list % list
ordonat6, eticheta de nchidere fiind o!ligatorie.
>iecare element al listei este iniiat de eticheta <LI> 2list item6. )a "i n cazul listelor neordonate,
lista va fi indentat fa de restul paginii -e! "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 sim!oluri.
&emplul 3.K afi"eaz o list ordonat, marcat cu cifre ara!e aspectul ei fiind cel din >igura 3.K.
,%emplul 5# 1
<HTL>
<HEAD>
<TITLE>liste:</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">Lista ordonata</H1><H+>
<!L>/asti$atorii concursului suntO
<LI>#o&escu aria
<LI>Ionescu Ion
<LI>Bratu Ana
</!L>
</B!D">
</HTL>
/entru etichetele <!L> "i <LI> se poate seta atri!utul t:&eD care sta!ile"te tipul de caractere
utilizate pentru ordonarea listei. Palorile posi!ile ale acestui atri!ut sunt:
A % pentru ordonare de tipul $ , * , )...2litere mari6
a % pentru ordonare de tipul a , ! , c...2litere mici6
I % pentru ordonare de tipul I , II , III , IP...2cifre romane mari6
i % pentru ordonare de tipul i , ii , iii , iv...2cifre romane mici6
1 % pentru ordonare de tipul D , G , I...2cifre ara!e % opiune presta!ilit6
,e asemenea eticheta <!L> poate avea setat atri!utul "tart= care sta!ile"te valoarea iniial a
secvenei de ordonare. Paloarea acestui atri!ut tre!uie s fie un numr ntreg pozitiv.
&emplul 3.H construie"te o list numerotat cu cifre romane mari ncep#nd de la poziia a treia.
$spectul paginii care conine aceast list este redat n >igura 3.H.
,%emplul 5# 2
<HTL>
<HEAD>
<TITLE>listeD</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">Atributul t7&e la liste ordonate</H1><H+>
<!L t7&e<"I" start<"9">anuale
<LI>Istorie
<LI>Geo$ra*ie
<LI>Biolo$ie
<LI>/hi%ie
</!L>
</B!D">
</HTL>
)a "i n cazul listelor neordonate, setarea atri!utului t7&e pentru un anumit item al listei nlocuie"te
tipul de numerotare sta!ilit pentru ntreaga list cu tipul specificat pentru acel element.
3. 7m9ricarea !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 afi"a indentat fa de nivelul listei anterioare.
;istele pot fi im!ricate n toate modurile dorite, ca n &emplul 3.B. >igura 3.B red aspectul listei
construite n acest e&emplu.
,%emplul 5# 3
<HTL>
<HEAD>
<TITLE>listeH</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">Liste i%bricate</H1><H+>
<(L>
<LI>Bulina 1
<!L>
<LI>0u%arul 1
<LI>0u%arul 2
</!L>
<LI>Bulina 2
<LI>Bulina 9
<(L t7&e<"sKuare">
<LI>#atrat 1
<LI>#atrat 2
<LI>#atrat 9
</(L>
<LI>Bulina :
</(L>
</B!D">
</HTL>
4. Liste de de,iniii
;istele de de&iniii reprezint un tip special de liste n care elementele listei nu sunt nici numerotate
2ca n listele ordonate6, nici marcate prin !uline 2ca n listele neordonate6 "i care prezint dou nivele
de indentare.
;istele de definiii sunt !locuri de te&t incluse ntre etichetele <DL> </DL> 2definition list6, eticheta
de nchidere fiind o!ligatorie. >iecare element al listei este introdus prin eticheta <DT> 2definition
term6. >iecare element introdus prin eticheta <DT> conine la r#ndul su un numr de elemente care l
definesc, introduse prin eticheta <DD> 2definition description6.
)a "i n cazul etichetei <LI>, etichetele de nchidere </DT> "i </DD> sunt opionale. ?n &emplul
3.4 este construit o list de definiii.
,%emplul 5# 4
<HTL>
<HEAD>
<TITLE>listeI</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">Liste de de*initii</H1><H+>
<DL>
<DT>Iarna
<DD>0in$e
<DD>E *ri$
<DD>Wiua e %ai scurta decZt noa&tea
<DT>#ri%a)ara
<DD>0atura se tre3este la )iata
<DD>In*loresc &o%ii
<DD>Fe intorc &asarile calatoare
<DT>Jara
<DD>Totul e )erde
<DD>E *oarte cald
<DD>Wiua e %ai lun$a decZt noa&tea
<DT>Toa%na
<DD>Fe coc *ructele
<DD>Fe stran$e recolta
<DD>/ad *run3ele
</DL>
</B!D">
</HTL>
$spectul listei de definiii de mai sus este cel din >igura 3.4.
tichetele <DL> "i </DL> marcheaz nceputul "i sf#r"itul listei, termenii care fac parte din list
2arna, Prim56ara, 7ara, Toamna 6 sunt introdu"i prin eticheta <DT> iar definiiile termenilor, prin
etichetele <DD>.
+e pot realiza liste ale cror elemente s fie linJ%uri, imagini sau !locuri de te&t. ?n &emplul 3.3,
elementele listei sunt imagini, a"a cum se poate vedea n >igura 3.3.
,%emplul 5# 5
<HTL>
<HEAD>
<TITLE>listeP</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">Liste de i%a$ini</H1><H+>
<DL>
<DT>8lori
<DD>
<IG src<"../I%a$ini/rose1.G&$" Cidth<"12@" hei$ht<"12@">
<DD>
<IG src<"../I%a$ini/oran$erose.$i*" Cidth<"12@" hei$ht<"12@">
<DT>Texturi
<DD>
<IG src<"../I%a$ini/sil;.G&$" Cidth<"12@" hei$ht<"12@">
<DD>
<IG src<"../I%a$ini/lace.$i*" Cidth<"12@" hei$ht<"12@">
</DL>
</B!D">
</HTL>
&emplul 3.E creeaz dou liste im!ricate de legturi. $spectul paginii care conine aceast list este
redat n >igura 3.E. /utei testa direct funcionarea listei dac ai salvat fi"ierele 89:; construite la
capitolele anterioare su! numele specificat n !locul <TITLE> al fiecrui document. ?n cazul c#nd ai
preferat alte denumiri pentru fi"iere, putei schim!a numele fi"ierelor prezente n cadrul e&emplului
cu propriile dumneavoastr fi"iere.
,%emplul 5# 6
<HTL>
<HEAD>
<TITLE>listeQ</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">Liste de le$aturi</H1><H+>
<!L t7&e<"I">
<LI>/ulori
<!L>
<LI><A hre*<"culori1.ht%l">/uloarea *undalului</A>
<LI><A hre*<"culori2.ht%l">/uloarea textului</A>
<LI><A hre*<"culori9.ht%l">/uloarea le$aturilor</A>
</!L>
<LI>8onturi
<!L>
<LI><A hre*<"*onturi1.ht%l">Eticheta 8!0T</A>
<LI><A hre*<"*onturi2.ht%l">Eticheta BAFE8!0T</A>
<LI><A hre*<"*onturi:.ht%l">Etichete de accentuare a textului</A>
</!L>
</!L>
</B!D">
</HTL>
#. 'e(umat
?ntr%o pagin -e! pot fi introduse diverse tipuri de liste:
;iste neordonate prin eticheta <(L> </(L>, marcate prin sim!oluri de tip !uline, cercuri sau ptrate
;iste ordonate prin eticheta <!L> </!L> marcate prin cifre ara!e, cifre romane mari sau mici, litere
mari sau mici
;iste de definiii prin eticheta <DL> </DL> nemarcate
lementele listelor ordonate "i neordonate se introduc prin eticheta <LI>.
lementele listelor de definiii se introduc prin etichetele <DT> "i <DD>.
;istele pot conine orice tip de elemente: te&t, imagini, linJ%uri sau alte liste 2n acest caz o!in#ndu%
se liste im!ricate6.
%. Test
$1. 5ticheta <UL> se folose7te pentru a iniia4
a6 o list ordonat
!6 o list neordonat
c6 dou liste im!ricate
$2. Care dintre urmtoarele afirmaii este fals9
a6 ticheta <LI> serve"te pentru a introduce fiecare element al unei liste ordonate.
!6 ticheta <LI> serve"te pentru a introduce fiecare element al unei liste neordonate.
c6 ticheta <LI> serve"te pentru a introduce fiecare element al unei liste de definiii.
$3. :n construcia <UL !%&#'(s)*ar#(> ce rol are atributul !%&#9
a6 )onstruie"te o list neordonat.
!6 +ta!ile"te caracterul care va fi afi"at n faa fiecrui element al listei.
c6 )onstruie"te o list care are ca elemente imagini.
$. O list ordonat este introdus prin eticheta4
a6 <(L>
!6 <!L>
c6 <DL>
$". Ce rol are atributul !%&# 6n urmtoarea construcie4 <OL !%&#'(a(>9
a6 )onstruie"te o list de litere care ncepe cu caracterul (a(.
!6 )onstruie"te o list ordonat.
c6 +ta!ile"te faptul c elementele listei vor fi marcate cu litere mici.
$$. Ce este incorect 6n exemplul urmtor9
<(L>
<LI>Li%baGe de &ro$ra%are
<!L>
<LI>/EE
<LI>#erl
<LI>Va)a
</!L>
<LI>Fiste%e de o&erare>
<!L>
<LI>FDos
<LI>(nix
</(L>
</!L>
a6 @u este permis im!ricarea listelor neordonate cu liste ordonate.
!6 ste a!sent eticheta de nchidere </LI>.
c6 tichetele <(L> "i <!L> nu sunt nchise corect.
$+. O list de definiii se introduce prin eticheta4
a6 <(L>
!6 <DT>
c6 <DL>
$-. Care este ordinea corect 6n care se introduc elementele unei liste de definiii9
a6 a6 <DL> <DT> <DD>
!6 !6 <DD> <DT> <DL>
c6 c6 <DT> <DL> <DD>
$/. Ce reali8ea8 urmtoarea construcie9
<(L>
<LI><IG src<"&ic1.$i*">
<LI><IG src<"&ic2.$i*">
</(L>
a6 )onstruie"te o list de imagini marcate prin !uline.
!6 )onstruie"te o list de linJ%uri ctre imaginile specificate.
c6 @imic, deoarece este incorect ca elementele unei liste s fie imagini.
+0. Cum sunt marcate elementele unei liste de definiii9
a6 prin !uline
!6 prin numere
c6 nu sunt marcate
iste
-# !6
$# c6
"# !6
1# !6
2# c6
3# c6
4# c6
5# a6
6# a6
-7# c6
Capitolul 6
!abele
Tabelul este un element structural de !az n alctuirea unei pagini -e!. ?n cadrul unui ta!el pot fi
incluse oricare dintre elementele care fac parte din corpul unui document 89:;: te&t, imagini, linii
orizontale, titluri, legturi, alte ta!ele, etc. 9a!elele constituie un instrument e&trem de util de
organizare a paginii -e!, realiz#nd alinierea elementelor "i plasarea lor n locurile dorite de
designerul paginii.
0n ta!el este o gril dreptunghiular format din linii "i coloane. )aseta format la intersecia unei
linii cu o coloan se nume"te celul.
' linie a ta!elului este format dintr%un "ir de celule aliniate pe orizontal, iar o coloan este format
dintr%un "ir de celule aliniate pe vertical.
)elulele ta!elului conin date 2te&t, imagini, linJ%uri6, fiecare celul av#nd propriile opiuni pentru
culoarea fondului, culoarea te&tului, alinierea te&tului etc.
1. Crearea unui ta9e!
/entru a insera un ta!el ntr%un document 89:; se folosesc etichetele corespondente <TABLE>
</TABLE>. ticheta <TABLE> este o etichet container, deci eticheta de final este o!ligatorie.
$!sena ei face ca ta!elul s nu fie afi"at corect.
/entru a insera o linie ntr%un ta!el se folosesc etichetele <T)> </T)> 2table ro6. >olosirea
etichetei de nchidere </T+> este opional.
$"a cum spuneam, fiecare linie de ta!el este format din mai multe celule ce conin date. ' celul de
date se introduce cu eticheta <TD> </TD> 2table data6. ticheta de nchidere </TD> este de
asemenea opional.
?n &emplul E.D am construit un ta!el format din patru linii, fiecare linie av#nd c#te dou celule de
date. $spectul ta!elului este redat n >igura E.D.
,%emplul 6# -
<HTL>
<HEAD>
<TITLE>tabele1</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">/rearea unui tabel</H1><H+>
<TABLE>
<T+>
<TD>celula 11
<TD>celula 11
<T+>
<TD>celula 21
<TD>celula 22
<T+>
<TD>celula 91
<TD>celula 92
<T+>
<TD>celula :1
<TD>celula :2
</TABLE>
</B!D">
</HTL>
?n mod presta!ilit, un ta!el nu are chenar vizi!il. /entru a aduga un chenar unui ta!el, se utilizeaz
atri!utul bor6er al etichetei <TABLE>. $cest atri!ut poate primi ca valoare orice numr ntreg
2inclusiv C6 "i reprezint grosimea n pi&eli a chenarului ta!elului.
,aca atri!utul border nu este urmat de o valoare atunci chenarul ta!elului va avea o grosime
presta!ilit egal cu D pi&el, iar o valoare egal cu C a atri!utului border semnific a!sena
chenarului.
)#nd atri!utul border are o valoare nenul chenarul ta!elului are un aspect tridimensional.
?n &emplul E.G este construit un ta!el cu chenar, a"a cum se o!serv n >igura E.G. /entru a testa
funcionarea atri!utului border, nlocuii n e&emplul de mai jos valoarea (K( "i cu alte valori. @u
uitai ca dup fiecare modificare s salvai fi"ierul "i s apsai !utonul Refresh1Reload al
!rowserului.
,%emplul 6# $
<HTL>
<HEAD>
<TITLE>tabele2</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">/henarul unui tabel</H1><H+>
<TABLE border<":">
<T+>
<TD>celula 11
<TD>celula 12
<T+>
<TD>celula 21
<TD>celula 22
<T+>
<TD>celula 91
<TD>celula 92
<T+>
<TD>celula :1
<TD>celula :2
</TABLE>
</B!D">
</HTL>
)elulele unui ta!el pot conine "i alte elemente n afar de te&t: imagini, legturi, formulare, etc.
&emplul E.I construie"te un ta!el cu dou linii "i dou coloane, celulele ta!elului av#nd drept
coninut imagini. $spectul ta!elului este cel din >igura E.I.
,%emplul 6# "
<HTL>
<HEAD>
<TITLE>tabele9</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">Tabel care contine i%a$ini</H1><H+>
<TABLE border<":">
<T+>
<TD><IG src<"../I%a$ini/donut.$i*">
<TD><IG src<"../I%a$ini/$i*t.$i*">
<T+>
<TD><IG src<"../I%a$ini/in)est.$i*">
<TD><IG src<"../I%a$ini/$lobe.$i*">
</TABLE>
</B!D">
</HTL>
2. .!inierea ta9e!u!ui n pa-in$
/entru a alinia un ta!el ntr%o pagina -e! se utilizeaz atri!utul align al etichetei <TABLE>, cu
urmtoarele valori posi!ile:
le*t 2valoarea presta!ilit6 % te&tul care urmeaz dup punctul de inserare al ta!elului va fi dispus n
partea dreapt a ta!elului.
center % te&tul care urmeaz dup punctul de inserare al ta!elului va fi afi"at pe toat limea
paginii, imediat su! ta!el.
ri$ht % te&tul care urmeaz dup punctul de inserare al ta!elului va fi dispus n partea st#ng a
ta!elului.
?n &emplul E.K este ilustrat construirea unui ta!el aliniat la dreapta. /agina va avea aspectul din
>igura E.K.
,%emplul 6# 1
<HTL>
<HEAD>
<TITLE>tabele:</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">Alinierea tabelului in &a$ina</H1><H+>
<TABLE border<"9" ali$n<"ri$ht">
<T+>
<TD>celula 11
<TD>celula 12
<T+>
<TD>celula 21
<TD>celula 22
</TABLE>
Acest text este &lasat in stan$a tabelului
</B!D">
</HTL>
,istana dintre ta!el "i celelalte elemente din pagina -e! poate fi sta!ilit cu ajutorul atri!utelor
h"&ace "i v"&ace al etichetei <TABLE>.
Paloarea atri!utului hs&ace poate fi orice numr pozitiv, inclusiv C, "i reprezint distana pe
orizontal dintre ta!el "i celelalte elemente ale paginii -e!.
$nalog, valoarea atri!utului )s&ace reprezint distana pe vertical dintre ta!el "i celelalte elemente
ale paginii. $tri!utele hs&ace "i )s&ace sunt recunoscute numai de !rowserele @etscape.
&emplul E.H ilustreaz utilitatea celor dou atri!ute.
,%emplul 6# 2
<HTL>
<HEAD>
<TITLE>tabeleD</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">F&atierea tabelului *ata de restul textului
</H1><H+>
Tabelul de %ai Gos este s&atiat &e )erticala *ata de acest text cu 1D
&ixeli. Tabelul de %ai Gos este s&atiat &e )erticala *ata de acest
text cu 1D &ixeli. Tabelul de %ai Gos este s&atiat &e )erticala *ata
de acest text cu 1D &ixeli<B+>
<TABLE border ali$n<"le*t" )s&ace<"1D" hs&ace<"1@">
<T+>
<TD>celula 11
<TD>celula 12
<T+>
<TD>celula 21
<TD>celula 22
</TABLE>
Acest text este &lasat in drea&ta tabelului la distanta de 1@ &ixeli
&e ori3ontala *ara de tabel. Acest text este &lasat in drea&ta
tabelului la distanta de 1@ &ixeli &e ori3ontala *ara de tabel. Acest
text este &lasat in drea&ta tabelului la distanta de 1@ &ixeli &e
ori3ontala *ara de tabel.
</B!D">
</HTL>
/entru a o!serva efectul celor dou atri!ute editai acest e&emplu "i vizualizai%l cu un !rowser
@etscape.
$tri!utele nefiind recunoscute de Internet &plorer, aspectul paginii la vizualizarea cu acest !rowser
va fi cel din >igura E.H.
3. :imensionarea unui ta9e!
,imensiunile unui ta!el % limea "i nlimea % pot fi sta!ilite e&act prin intermediul atri!utelor
5i6th "i height ale etichetei <TABLE>.
Palorile acestor atri!ute pot fi:
numere ntregi pozitive reprezent#nd limea respectiv nlimea n pi&eli a ta!elului
numere ntregi ntre D "i DCC, urmate de semnul 5, reprezent#nd procente din limea "i
nlimea total a paginii.
Iat un e&emplu de ta!el cu nlimea de GCC de pi&eli "i limea egal cu HC5 din limea paginii
2&emplul E.B6
,%emplul 6# 3
<HTL>
<HEAD>
<TITLE>tabeleH</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">Di%ensionarea unui tabel</H1><H+>
Tabel cu lun$i%ea de D@R din &a$ina si inalti%ea de 2@@ de &ixeli<#>
<TABLE border Cidth<"D@R" hei$ht<"2@@">
<T+>
<TD>celula 11
<TD>celula 12
<T+>
<TD>celula 21
<TD>celula 22
</TABLE>
</B!D">
</HTL>
$spectul ta!elului construit n documentul de mai sus este cel din >igura E.B.
,imensiunile unui ta!el includ "i valoarea dat atri!utului border. ,e e&emplu, un ta!el cu o
singur linie "i o singur coloan, cu dimensiunile Cidth<"1@@"= hei$ht<"D@" "i av#nd
atri!utul border setat la valoarea DC, va avea drept spaiu util 3C de pi&eli pe lime "i IC de pi&eli
pe nlime.
0na dintre cele mai frecvente utilizri a ta!elelor este poziionarea unui te&t ntr%o anumit zon a
paginii, prin realizarea unui ta!el fr chenar 2border<"@"6 cu o singur linie "i o singur coloan,
ca n &emplul E.4.
,%emplul 6# 4
<HTL>
<HEAD>
<TITLE>tabeleI</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">#o3itionarea unui text</H1>
<TABLE border<"@" Cidth<"H@R" hei$ht<"1@@R" ali$n<"center">
<T+>
<TD>
Acest text este &o3itionat in centrul &a$inii. Acest text este
&o3itionat in centrul &a$inii. Acest text este &o3itionat in
centrul &a$inii. Acest text este &o3itionat in centrul &a$inii.
Acest text este &o3itionat in centrul &a$inii.
</TABLE>
</B!D">
</HTL>
?n >igura E.4 este redat aspectul ta!elului construit mai sus.
4. Spaierea ce!u!e!or unui ta9e!
,istana dintre dou celule vecine se define"te cu ajutorul atri!utului cell"&acing al etichetei
<TABLE>.
Palorile acestui atri!ut pot fi numere ntregi pozitive, inclusiv C, "i reprezint distana n pi&eli dintre
dou celule vecine. Paloarea presta!ilit a atri!utului cells&acin$ este de G pi&eli.
&emplul E.3 ilustreaz funcionarea atri!utului cells&acin$. $spectul ta!elului este cel din
>igura E.3. /utei modifica valoarea atri!utului cells&acin$ pentru a o!serva cum se spaiaz
celulele n funcie de valorile pe care le dai.
,%emplul 6# 5
<HTL>
<HEAD>
<TITLE>tabeleP</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">F&atierea celulelor</H1><H+>
<TABLE border<"9" cells&acin$<"1@">
<T+>
<TD>aria
<TD>Bo$dan
<T+>
<TD>Alexandru
<TD>Irina
</TABLE>
</B!D">
</HTL>
,istana dintre marginea unei celule "i coninutul ei poate fi definit cu ajutorul atri!utului
cell&a66ing al etichetei <TABLE>. Palorile acestui atri!ut pot fi numere ntregi pozitive, "i
reprezint distana n pi&eli dintre marginile celulei "i coninutul ei. Paloarea presta!ilit a atri!utului
cell&addin$ este D pi&el.
&emplul E.E construie"te un ta!el n care distana dintre marginea celulelor "i coninutul lor este de
GC de pi&eli. $spectul acestui ta!el este cel din >igura E.E.
,%emplul 6# 6
<HTL>
<HEAD>
<TITLE>tabeleQ</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center"> F&atierea textului in celule</H1><H+>
<TABLE border cell&addin$<"2@">
<T+>
<TD>aria
<TD>Bo$dan
<T+>
<TD>Alexandru
<TD>Irina
</TABLE>
</B!D">
</HTL>
#. :imensionarea ce!u!e!or unui ta9e!
,imensiunile unei celule de tip <TD> sau de tip <TH> 2vezi mai jos eticheta <TH>6 pot fi sta!ilite
e&act cu ajutorul a dou atri!ute ale acestor etichete: 5i6th pentru lime "i height pentru nlime.
Palorile posi!ile ale acestor atri!ute sunt:
numere ntregi pozitive 2inclusiv C6 reprezent#nd dimensiunea n pi&eli a limii, respectiv a nlimii
unei celule
procente din limea , respectiv nlimea ta!elului.
?n &emplul E.DC am dimensionat celula DD la limea de GC5 din limea ta!elului "i nlimea egal
cu 4H5 din nlimea lui. $"a cum se poate o!serva din >igura E.DC dimensionarea individual a unei
celule va afecta dimensionarea tuturor celulelor din linia "i coloana din care face parte celula
respectiv. +e o!serv c celula DG are limea egal cu restul de 3C5 din limea ta!elului. )elula
GD aflat pe aceea"i coloana cu celula dimensionat are acelea"i dimensiuni ca "i ea.
,%emplul 6# -7
<HTL>
<HEAD>
<TITLE>tabele1@</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">Di%ensionarea celulelor</H1><H+>
Tabel cu celule di%ensionate indi)idual<#>
<TABLE border>
<T+>
<TD Cidth<"2@R" hei$ht<"IDR">celula 11
<TD>celula 12
<T+>
<TD>celula 21
<TD>celula 22
</TABLE>
</B!D">
</HTL>
%. .!inierea coninutu!ui unei ce!u!e
$linierea pe orizontal a coninutului unei celule se face cu ajutorul atri!utului align care poate lua
valorile:
le*t % la st#nga
center % centrat , valoarea presta!ilit
ri$ht % la dreapta
$linierea pe vertical a coninutului unei celule se face cu ajutorul atri!utului valign care poate lua
valorile:
baseline % la !az
botto% % jos
%iddle % la mijloc, valoarea presta!ilit
to& % sus
$ceste atri!ute pot fi ata"ate at#t etichetei <T+> pentru a defini alinierea tuturor celulelor unei linii,
c#t "i etichetelor <TD> "i <TH> 2vezi mai jos eticheta <TH>6 pentru a sta!ili alinierea te&tului ntr%o
singur celul. ?n &emplul E.DD este ilustrat funcionarea atri!utelor ali$n "i )ali$n.
9e&tul din celulele primei, celei de%a doua "i celei de%a patra linii a fost aliniat prin atri!utul ali$n
asociat liniei, iar te&tul din celulele liniei a treia a fost aliniat prin atri!utul ali$n asociat fiecrei
celule n parte. $spectul ta!elului este cel din >igura E.DD.
,%emplul 6# --
<HTL>
<HEAD>
<TITLE>tabele11</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center"> Alinierea continutului celulelor</H1><H+>
<TABLE border Cidth<"D@R" hei$ht<"P@R">
<T+ ali$n<"ri$ht">
<TD>drea&ta
<TD>drea&ta
<T+ ali$n<"center">
<TD>centru
<TD>centru
<T+>
<TD )ali$n<"to&">sus
<TD )ali$n<"botto%">Gos
<T+ ali$n<"le*t">
<TD>stan$a
<TD>stan$a
</TABLE>
</B!D">
</HTL>
,ac este prezent un atri!ut de aliniere ata"at etichetei <T+> "i pe linia respectiv o anumit celul
are propriul su atri!ut de aliniere, atri!utul de aliniere asociat etichetei <TD> are prioritate fa de
cel asociat etichetei <T+>.
&. :e,inirea cu!ori!or pentru un ta9e!
)uloarea de fond a unui ta!el se sta!ile"te cu ajutorul atri!utului bgcolor, care poate fi ata"at dup
cum urmeaz:
ntregului ta!el prin eticheta <TABLE>,
unei linii prin eticheta <T+>
unei celule de date prin eticheta <TD>
Palorile pe care le poate primi atri!utul b$color sunt cele cunoscute pentru culori.
,ac ntr%un ta!el sunt definite mai multe atri!ute b$color, atunci prioritatea este, n ordine
descresctoare, urmtoarea:
D. <TD>
G. <T+>
I. <TABLE> (&rioritatea cea %ai %ica6
?n &emplul E.DG este ilustrat folosirea atri!utului b$color.
,%emplul 6# -$
<HTL>
<HEAD>
<TITLE>tabele12</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">/ulori in tabel</H1><H+>
<TABLE border<"D" b$color<"li%e">
<T+>
<TD>celula 11 )erde
<TD b$color<"red">celula 12 rosu
<T+ b$color<"blue">
<TD>celula 21 albastru
<TD b$color<"7elloC">celula 22 $alben
<T+ b$color<"c7an">
<TD>celula 91 c7an
<TD>celula 92 c7an
<T+>
<TD>celula :1 )erde
<TD b$color<"Chite">celula :2 alb
</TABLE>
</B!D">
</HTL>
,in >igura E.DG putei o!serva cum funcioneaz prioritatea atri!utului b$color. $stfel, culoarea
ntregului ta!el a fost sta!ilit prin eticheta:
<TABLE b$color<"li%e">
,ac o linie nu are sta!ilit nici o alta culoare, culoarea liniei este verde deschis. /entru linia a doua
a ta!elului este sta!ilit culoarea al!astru:
<T+ b$color<"blue">.
)elulele care fac parte din aceasta linie "i care nu au sta!ilit o alta culoare, vor fi al!astre 2celula
GD6. )elelalte celule vor avea culoarea sta!ilit e&plicit pentru ele 2celula GG va fi gal!en6:
<TD b$color<"7elloC">
0n ta!el poate avea drept fundal nu numai o culoare, ci "i o imagine. $cest efect se o!ine folosind
atri!utul backgro'n6 al etichetei <TABLE>, atri!utul primind ca valoare adresa 0.; a imaginii.
$tri!utul bac;$round poate fi ata"at "i unei linii, sta!ilind fundalul tuturor celulelor din linia
respectiv precum "i unei celule individuale, n acest caz sta!ilind fundalul acelei celule.
&emplul E.DI ilustreaz acest atri!ut, ta!elul av#nd aspectul redat n >igura E.DI.
,%emplul 6# -"
<HTL>
<HEAD>
<TITLE>tabele19</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">8undalul unui tabel</H1><H+>
<TABLE border<"D" Cidth<"2@@" hei$ht<"12@"
bac;$round<"../I%a$ini/lace.$i*>
<T+>
<TD>celula 11
<TD>celula 12
<T+>
<TD>celula 21
<TD>celula 22
</TABLE>
</B!D">
</HTL>
)ulorile chenarului unui ta!el se pot sta!ili folosind atri!utele:
bor6ercolor % permite sta!ilirea culorii pentru chenarul unui ta!el
bor6ercolorlight % permite sta!ilirea culorii marginilor din st#nga "i de sus ale ta!elului
bor6ercolor6ark % permite sta!ilirea culorii marginilor din dreapta "i de jos ale ta!elului
)uloarea te&tului din fiecare celul se poate sta!ili cu ajutorul e&presiei:
<8!0T color<">+GB sau nu%e?culoare">text</8!0T>.
&emplul E.DK ilustreaz folosirea acestor atri!ute, aspectul ta!elului fiind cel din >igura E.DK.
,%emplul 6# -1
<HTL>
<HEAD>
<TITLE>tabele1:</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">/ulorile chenarului unui tabel</H1><H+>
<TABLE border<"1@" bordercolordar;<"blue" bordercolorli$ht<"c7an">
<T+>
<TD><8!0T color<"$reen">celula 11</8!0T>
<TD><8!0T color<"blue">celula 12</8!0T>
<TD><8!0T color<"red">celula 19</8!0T>
<T+>
<TD><8!0T color<"teal">celula 21</8!0T>
<TD><8!0T color<"%a$enta">celula 22</8!0T>
<TD><8!0T color<"li%e">celula 29</8!0T>
</TABLE>
</B!D">
</HTL>
$m setat grosimea chenarului ta!elului la valoarea de DC pi&eli, pentru a avea un aspect
tridimensional mai pronunat.
)u ajutorul atri!utului bordercolordar; am sta!ilit culoarea prii (um!rite( a chenarului
2marginile de jos "i din dreapta6 iar cu ajutorul atri!utului bordercolorli$ht, culoarea prii
(luminate( a acestuia 2marginile de sus "i din st#nga6 iar te&tul din celule l%am scris cu culori diferite,
folosind eticheta <8!0T>.
)ulorile sta!ilite pentru chenarul e&terior al ta!elului sunt folosite "i pentru a colora liniile
despritoare dintre celulele ta!elului. /entru acestea partea (um!rit( este format din muchiile de
sus "i din st#nga iar partea (luminat( este format din muchiile de jos "i din dreapta.
,ac dorim s colorm separat muchiile care despart liniile sau celulele ta!elului putem asocia
atri!utele bordercolor, bordercolordar; "i bordercolorli$ht etichetelor <T+> "i <TD>.
'tenie(
$tri!utele bordercolor, bordercolordar; "i bordercolorli$ht nu sunt recunoscute de
!rowserul @escape.
Pizualizai pagina de mai sus cu un !rowser @etscape pentru a o!serva aspectul ei.
0. Tit!u! unui ta9e!
0nui ta!el i se poate ata"a un titlu cu ajutorul etichetei <-A,TIO!> 2table captionOtitlu ta!el6.
$ceast etichet tre!uie plasat n interiorul etichetelor <TABLE> </TABLE>, dar nu n interiorul
etichetelor <T+> sau <TD>.
9itlul unui ta!el poate fi aliniat cu ajutorul atri!utului align al etichetei </A#TI!0> care poate lua
una dintre valorile:
botto% % su! ta!el
to& % deasupra ta!elului
le*t % deasupra, la st#nga ta!elului
ri$ht % deasupra, la dreapta ta!elului
?n &emplul E.DH titlul ta!elului este aliniat deasupra sa. $spectul paginii este cel din >igura E.DH.
,%emplul 6# -2
<HTL>
<HEAD>
<TITLE>tabele1D</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">Titlul unui tabel</H1><H+>
<TABLE border></A#TI!0 ali$n<"to&">asini
<T+>
<TD>ercedes
<TD>/itroen
<TD>Va$uar
<T+>
<TD>B'
<TD>Jol)o
<TD>+enault
</TABLE>
</B!D">
</HTL>
1. Capu! de ta9e!
0n ta!el poate avea celule cu semnificaia de cap de ta!el. $ceste celule sunt introduse de eticheta
<TH> 2tabel headerOcap de ta!el6 n loc de <TD>.
9oate atri!utele care pot fi ata"ate etichetei <TD> pot fi de asemenea ata"ate "i etichetei <TH>.
)oninutul celulelor definite cu <TH> este scris cu caractere aldine "i centrat.
&emplul E.DB ilustreaz modul n care se pot insera celule cu rol de cap de ta!el. /utei o!serva din
e&emplu c elementele cu rol de cap de ta!el pot fi plasate at#t pe orizontal c#t "i pe vertical.
$spectul ta!elului este redat n >igura E.DB.
,%emplul 6# -3
<HTL>
<HEAD>
<TITLE>tabele1H</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">/a&ul de tabel</H1><H+><#>
<TABLE border></A#TI!0 ali$n<"botto%">#returi %asini
<T+>
<TH>#ret
<TH>/itroen
<TH>Va$uar
<TH>B'
<TH>Jol)o
<T+>
<TH>In dolari
<TD>D@@@
<TD>1@@@@@
<TD>D@@@@
<TD>P@@@@
<T+>
<TH>In lei
<TD>D
<TD>1@@
<TD>D@
<TD>P@
</TABLE>
</B!D">
</HTL>
18. Ta9e!e de ,orme oarecare
&ist situaii c#nd dorim ca o celul s se e&tind peste celulele vecine, pe orizontal sau pe
vertical. ?n acest mod se o!ine o singur celul cu suprafaa egal cu suma suprafeelor celulelor
iniiale.
$cest lucru se poate realiza cu ajutorul atri!utelor col"&an "i ro5"&an ale etichetelor <TD> "i
<TH>.
$stfel:
col"&an % realizeaz e&tinderea unei celule peste celulele din dreapta ei. Paloarea atri!utului
determin numrul de celule care se unific.
ro5"&an % realizeaz e&tinderea unei celule peste celulele de su! ea. Paloarea atri!utului determin
numrul de celule care se unific.
+unt posi!ile e&tinderi simultane ale unei celule pe orizontal "i pe vertical. ?n acest caz, n
etichetele <TD> sau <TH> vor fi prezente am!ele atri!ute cols&an "i roCs&an. &emplul E.D4
ilustreaz modul cum se realizeaz un ta!el cu celule unificate.
,%emplul 6# -4
<HTL>
<HEAD>
<TITLE>tabele1I</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">Tabele cu *or%a oarecare</H1><H+>
<TABLE border>
<T+>
<TD roCs&an<"9">celula 11<B+>celula 21<B+>celula 91
<TD>celula 12
<TD cols&an<"2" roCs&an<"9">celula 19 = celula 1:<B+>celula 29=
celula 2:<B+>celula 99= celula 9:
<T+>
<TD>celula 22
<T+>
<TD>celula 92
<T+>
<TD>celula :1
<TD cols&an<"9">celula :2= celula :9= celula ::
</TABLE>
</B!D">
</HTL>
9a!elul construit n acest e&emplu are K linii "i K coloane. $"a cum se vede n >igura E.D4, prin
folosirea atri!utelor cols&an "i roCs&an configuraia ta!elului s%a modificat astfel: celula DD s%a
e&tins n jos peste celulele GD "i ID 2<TD roCs&an<"9">6, celula DG a rmas nemodificat, celula
DI s%a e&tins at#t spre dreapta peste celula DK c#t "i n jos, peste celulele GI "i GK 2<TD
cols&an<"2" roCs&an<"9">6.
)elulele GG, IG "i KD au rmas nemodificate iar celula KG s%a e&tins spre dreapta peste celulele KI "i
KK 2<TD cols&an<"9">.
tichetelor <TD> "i <TH> li se poate ata"a atri!utul no5ra&. l interzice ajustarea automat a
lungimii unei linii de te&t, astfel nc#t n ta!el pot aprea coloane cu o lime oric#t de mare. 0n ta!el
n care este folosit atri!utul noCra& este cel construit n &emplul E.D3. $spectul ta!elului este redat
n >igura E.D3.
,%emplul 6# -5
<HTL>
<HEAD>
<TITLE>tabele1P</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center"> Atributul noCra&</H1><H+>
<TABLE border>
<T+>
<TD>celula 11
<TD>celula 12
<T+>
<TD>celula 21
<TD noCra&>celula 22 Textul din aceasta celula este *oarte lun$
</TABLE>
</B!D">
</HTL>
11. Ce!u!e ,$r$ coninut
,ac un ta!el are celule fr coninut 2celule vide6, atunci aceste celule vor aprea n ta!el fr un
chenar de delimitare. ?n scopul de a afi"a un chenar pentru celulele vide se poate proceda astfel:
dup eticheta <TD> se adaug 8nb"&;
dup eticheta <TD> se adaug <B)>
)aracterul Tnbs&U 2no break space6 este, a"a cum am vzut la capitolul /ormatarea te%tului,
caracterul spaiu. 0n spaiu introdus prin intermediul acestui caracter nu va fi ignorat de !rowser+
?n &emplul E.DE este ilustrat modul n care pot fi create celule fr coninut care s ai! totu"i
chenar de delimitare. ,up cum o!servai din >igura E.DE, celula GI nu are chenar de delimitare.
)elulele de pe a doua linie a ta!elului sunt vide dar au chenar deoarece am folosit Tnbs& "i <B+>.
,%emplul 6# -6
<HTL>
<HEAD>
<TITLE>tabele1Q</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">/elule *ara continut</H1><H+>
<TABLE border>
<T+>
<TD>celula 11
<TD>celula 12
<TD>celula 19
<T+>
<TD>Tnbs&U
<TD><B+>
<TD>
</TABLE>
</B!D">
</HTL>
12. <rupuri de co!oane
tichetele <-OL()O+,> </-OL()O+,> permit definirea unui grup de coloane n cadrul unui ta!el.
$tri!utele acceptate de </!LG+!(#> sunt:
"&an % determin numrul de coloane dintr%un grup
5i6th % determin o lime unic pentru coloanele din grup
align % determin un tip unic de aliniere pentru coloanele din grup
,e e&emplu:
</!LG+!(# s&an<"9" Cidth<"1@@"><//!LG+!(#>
$m definit astfel un grup de trei coloane, fiecare av#nd limea de DCC de pi&eli.
?ntr%un !loc </!LG+!(#>, coloanele pot avea configurri diferite dac se utilizeaz eticheta <-OL>,
care admite atri!utele:
"&an % identific acea coloan din grup pentru care se face configurarea. ,ac lipse"te, atunci
coloanele sunt configurate n ordine.
5i6th % determin limea coloanei identificate prin s&an.
align % determin alinierea coninutului coloanei identificate prin s&an.
)el mai !ine putei nelege funcionarea acestei etichete din &emplul E.GC. 9a!elul din acest
e&emplu are dimensiunile de KGC de pi&eli lime "i GCC de pi&eli nlime "i este format din dou
linii "i patru coloane.
?n ta!el a fost delimitat un grup de trei coloane 2primele trei coloane6 prin eticheta </!LG+!(#> iar
n cadrul acestui grup au fost definite limea "i alinierea te&tului din fiecare coloane n parte. )ea
de%a patra coloan a ta!elului nu face parte din grupul de coloane. ,up nchiderea etichetei
</!LG+!(#>, celulele de date au fost introduse n mod normal, cu ajutorul etichetei <TD>.
,%emplul 6# $7
<HTL>
<HEAD>
<TITLE>tabele2@</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">Gru&uri de coloane</H1><H+>
<TABLE border Cidth<":2@" hei$ht<"2@@">
</!LG+!(#>
</!L Cidth<"H@" ali$n<"le*t">
</!L Cidth<"12@" ali$n<"center">
</!L Cidth<"1P@" ali$n<"ri$ht">
<//!LG+!(#>
<T+>
<TD )ali$n<"to&">celula 11
<TD>celula 12
<TD )ali$n<"botto%">celula 19
<TD>celula 1:
<T+>
<TD>celula 21
<TD>celula 22
<TD>celula 99
<TD>celula 9:
</TABLE>
</B!D">
</HTL>
,in >igura E.GC se poate o!serva c n cadrul celulei DD este respectat alinierea la st#nga a te&tului,
deoarece ea a fost setata ca atare prin construcia </!L Cidth<"H@" ali$n<"le*t">.

[n &lus= \n cadrul etichetei <TD> a *ost stabilita ]i alinierea &e
)erticala a textului din celul^= atributul )ali$n &ri%ind )aloarea
"to&".
[n celula 12 nu este setat atributul )ali$n ast*el \ncZt textul
res&ect^ alinierea stabilit^ &rin construcLia </!L Cidth<"12@"
ali$n<"center">. [n celula 19 alinierea &e ori3ontal^ a textului este
stabilit^ &rin construcLia </!L Cidth<"1P@" ali$n<"ri$ht"> iar alinierea
&e )ertical^ este setat^ \n cadrul etichetei <TD> la )aloarea "botto%".
Din *i$ur^ se %ai obser)^ c^ toate celulele care *ac &arte din
coloanele incluse \n blocul </!LG+!(#> res&ect^ set^rile *^cute \n
cadrul acestui bloc (celulele 21= 22 ]i 296. /elulele 1: ]i 2: care
*or%ea3^ coloana a &atra a tabelului neinclus^ \n $ru&ul de coloane=
res&ect^ atributele de aliniere s&eci*icate \n cadrul etichetei <TD>=
dac^ exist^.
ticheta </!LG+!(#> nu este recunoscut de !rowserele @etscape "i prin urmare nici atri!utele
legate de dimensionarea coloanelor "i alinierea te&tului n interiorul lor.
13. .tri9ute pentru aspectu! c*enaru!ui unui ta9e!
6tributul frame
$tri!utul fra%e al etichetei <TABLE> permite specificarea laturilor din chenarul unui ta!el care vor
fi vizi!ile.
Palorile posi!ile ale acestui atri!ut sunt:
)oid % elimin toate muchiile e&terioare ale ta!elului
abo)e % afi"eaz o muchie n partea superioar a cadrului ta!elului
beloC % afi"eaz o muchie n partea inferioar a cadrului ta!elului
hsides % afi"eaz c#te o muchie n partea superioar "i inferioar cadrului ta!elului
)sides % afi"eaz o muchie n partea din st#nga "i din dreapta a cadrului ta!elului
lhs % afi"eaz o muchie n partea din st#nga a cadrului ta!elului
rhs % afi"eaz o muchie n partea din dreapta a cadrului ta!elului
box % afi"eaz o muchie pe toate laturile cadrului ta!elului
6tributul rules
$tri!utul r'le" al etichetei <TABLE> permite alegerea unor delimitatori pentru celulele unui ta!el.
Palorile posi!ile sunt:
none % elimin toate muchiile interioare ale ta!elului
roCs % afi"eaz muchii orizontale ntre toate liniile ta!elului
cols % afi"eaz muchii verticale ntre toate coloanele ta!elului
all % afi"eaz muchii ntre toate liniile "i coloanele
&emplul E.GD ilustreaz aceste atri!ute. $tri!utele *ra%e "i rules pot fi com!inate "i cu atri!utele
de colorare a chenarului "i se pot folosi pentru a crea efecte interesante de aliniere n pagin a"a cum
se poate vedea n >igura E.GD.
,%emplul 6# $-
<HTL>
<HEAD>
<TITLE>tabele21</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">Atributele *ra%e si rules</H1><H+>
<TABLE bordercolor<"red" Cidth<":@@" *ra%e<"lhs" rules<"cols">
<T+>
<TD>celula 11
<TD>celula 12
<TD>celula 19
<T+>
<TD>celula 21
<TD>celula 22
<TD>celula 29
<T+>
<TD>celula 21
<TD>celula 22
<TD>celula 29
</TABLE>
</B!D">
</HTL>
14. Ta9e!e im9ricate
0n ta!el poate conine n celulele sale "i alte elemente n afar de te&t, inclusiv un alt ta!el, form#nd
astfel un ansam!lu de ta!ele im!ricate.
?n &emplul E.GG vom ilustra modul n care se pot im!rica dou ta!ele.
,%emplul 6# $$
<HTL>
<HEAD>
<TITLE>tabele22</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">I%bricarea tabelelor</H1><H+>
<TABLE border<"D">
<T+>
<TD>celula 11 tabelul 1
<TD>
<TABLE border>
<T+>
<TD>celula 11 tabelul 2
<TD>celula 12 tabelul 2
<T+>
<TD>celula 21 tabelul 2
<TD>celula 22 tabelul 2
<T+>
<TD>celula 91 tabelul 2
<TD>celula 92 tabelul 2
</TABLE>
<T+>
<TD>celula 21 tabelul 1
<TD>celula 22 tabelul 1
</TABLE>
</B!D">
</HTL>
$"a cum se vede din >igura E.GG ta!elul este format din dou linii "i dou coloane. ?n celula GD a
ta!elului am inclus un alt ta!el, format din trei linii "i dou coloane.
1#. 'ecomand$ri pri"ind ,o!osirea ta9e!e!or
9a!elele se numr printre cele mai folosite elemente ntr%o pagin -e!. le reprezint un instrument
practic indispensa!il pentru definirea aspectului paginii, ntruc#t permit alinierea corect a
elementelor din pagin: te&t, imagini, legturi, etc. ?n interiorul unui ta!el se pot include "i alte
ta!ele, n funcie de necesiti, form#nd o reea de ta!ele im!ricate.
+ingura precauie pe care tre!uie s o avei n vedere c#nd folosii ta!ele n paginile dumneavoastr
este cea legat de etichetele "i atri!utele specifice unui anumit tip de !rowser+ $"a dup cum ai
o!servat din e&emplele prezentate, aspectul paginilor poate s difere simitor de la un tip de !rowser
la altul, atunci c#nd un anumit element nu este recunoscut. ,ac vei considera c aspectul ta!elelor
este esenial pentru paginile site%ului, este recomandat s v limitai la etichetele standard,
recunoscute de toate !rowserele .
?n $ne&a D vei gsi o list a celor mai utilizate etichete mpreun cu meniunea dac fac parte din
standardul 89:; I.G.
1%. 'e(umat
9a!elele se insereaz ntr%un document 89:; cu ajutorul etichetei container <TABLE> </TABLE>
9a!elele sunt formate din linii, care se introduc prin eticheta <T+> iar fiecare linie este format din
celule introduse prin eticheta <TD>.
)elulele unui ta!el pot conine te&t, etichete de formatare a te&tului, imagini, legturi, formulare sau
alte ta!ele.
tichetele <TABLE>, <T+> "i <TD> au o serie de atri!ute comune:
ali$n
% c#nd este asociat cu <TABLE> sta!ile"te alinierea ta!elului fa de te&tul din jur
% c#nd este asociat cu <T+> sta!ile"te alinierea te&tului din celulele liniei respective
% c#nd este asociat cu <TD> sta!ile"te alinierea te&tului din celul
b$color sta!ile"te culoarea fundalului pentru ntregul ta!el, o linie sau o celul.
bordercolor, bordercolordar; "i bordercolorli$ht sta!ilesc culorile chenarelor
)ali$n aliniaz te&tul pe vertical n cadrul ta!elului, al celulelor unei linii sau al unei celule
individuale
9a!elul n ntregime sau o celul a sa pot avea o imagine ca fundal, specificat cu ajutorul atri!utului
bac;$round.
<rosimea chenarului ta!elului se sta!ile"te cu ajutorul atri!utului border.
,imensiunile ta!elului sau ale unei celule individuale se sta!ilesc prin intermediul atri!utelor Cidth
"i hei$ht.
)u ajutorul atri!utelor cells&acin$ "i cell&addin$ se sta!ilesc distana dintre celulele ta!elului,
respectiv distana dintre coninutul celulelor "i marginile lor.
/entru a crea ta!ele de forme oarecare se folosesc atri!utele cols&an "i roCs&an care permit
e&tinderea unei celule peste celulele din dreapta ei, respectiv peste celulele de su! ea.
0nui ta!el i se poate ata"a un titlu prin eticheta </A#TI!0> "i se pot introduce celule cu rol de cap
de ta!el prin eticheta <TH>.
?ntr%un ta!el se pot defini grupuri de coloane cu ajutorul etichetei container </!LG+!(#>
<//!LG+!(#>. ?n cadrul acestui grup, aspectul fiecrei coloane n parte este sta!ilit prin eticheta
</!L>.
:odul de afi"are al marginilor ta!elului precum "i al liniilor despritoare dintre linii "i celule se
poate sta!ili cu ajutorul atri!utelor *ra%e "i rules.
1&. Test
+1. $a ce serve7te eticheta <TD>9
a6 /entru a insera un ta!el n pagin.
!6 /entru a insera o linie ntr%un ta!el.
c6 /entru a insera o celul de date ntr%o linie a ta!elului.
+2. Brmtoarea construcie generea8 un tabel cu o line 7i dou celule+
<TABLE b$color<"Chite">
<T+ b$color<"red">
<TD b$color<"blue">celula 11
<TD>/elula 12
</TABLE>
Ce culoare vor avea cele dou celule9
a6 $m#ndou al!, deoarece a"a este setat culoarea ta!elului.
!6 $m#ndou ro"u, deoarece a"a a fost setat culoarea liniei.
c6 )elula DD al!astru, deoarece culoarea ei a fost setat e&plicit "i celula DG ro"u, deoarece face parte
din linia a crei culoare a fost setat ro"u.
+3. $a ce servesc atributele wi!" 7i "#i$"! ale etichetei <TABLE>9
a6 +ta!ilesc dimensiunile ta!elului n pagin.
!6 $liniaz ta!elul fa de restul elementelor din pagin.
c6 +ta!ilesc dimensiunile celulelor ta!elului.
+. Ce efect are urmtoarea construcie4
<TABLE border cells&acin$<"D" cell&addin$<"1@">M
a6 9e&tul din celule este distanat cu H pi&eli fa de chenarul celulelor, iar celulele sunt distanate
ntre ele cu DC pi&eli.
!6 9e&tul din celule este distanat cu DC pi&eli fa de chenarul celulelor, iar celulele sunt distanate
ntre ele cu H pi&eli.
c6 )henarul ta!elului are grosimea de H pi&eli iar chenarul celulelor grosimea de DC pi&eli.
+". Care dintre urmtoarele construcii alinia8 la dreapta coninutul celor dou celule9
a6 <T+ ali$n<"le*t"><TD ali$n<"ri$ht">celula 11<TD>celula 12
!6 <T+><TD ali$n<"ri$ht">celula 11<TD>celula 12
c6 <T+ ali$n<"ri$ht"><TD>celula 11<TD>celula 12
+$. $a ce folose7te eticheta <T+>9
a6 Introduce o celul de date.
!6 Introduce o celul cu rol de cap de ta!el.
c6 Introduce o linie cu rol de cap de ta!el.
++. *entru a ata7a un titlu tabelului folosim eticheta4
a6 <HEAD>
!6 </A#TI!0>
c6 <TITLE>
+-. Ce efect are atributul c,ls&an 6n construcia urmtoare4
<T+><TD cols&an<"9">cel 11 cel 12 cel 19M
a6 0nific trei celule pe orizontal.
!6 0nific trei celule pe vertical.
c6 0nific c#te trei celule, at#t pe orizontal c#t "i pe vertical.
+/. :n care dintre construciile urmtoare chenarul tabelului nu este afi7at9
a6 <TABLE border> </TABLE>
!6 <TABLE border<"@"> </TABLE>
c6 <TABLE border<"-1"> </TABLE>
-0. /tributul ali$n al etichetei <TABLE> reali8ea84
a6 $linierea ta!elului fa de restul elementelor din pagin.
!6 $linierea te&tului n ta!el.
c6 $linierea te&tului n fiecare celul a ta!elului.
Tabele
-# c6
$# c6
"# a6
1# !6
2# c6
3# !6
4# !6
5# a6
6# !6
-7# a6
Capitolul 1@
Ca%re 8frames9
' modalitate de structurare avansat a unui document 89:; este mprirea ferestrei !rowserului n mai
multe ferestre distincte, denumite cadre 2frames6.
$ceast facilitate permite afi"area simultan, n aceea"i fereastr a !rowserului, a dou sau mai multe
documente 89:; diferite, c#te unul n fiecare cadru.
/entru a realiza acest lucru sunt necesare urmtoarele:
un document de definire a cadrelor care conine etichetele care sta!ilesc numrul, dimensiunile "i
a"ezarea cadrelor n pagin
c#te un fi"ier 89:; pentru fiecare cadru n parte, prin care se sta!ile"te coninutul cadrului respectiv.
,e e&emplu, o pagin -e! care conine dou cadre va fi definit prin trei documente 89:;:
documentul de definire a cadrelor, care specific dimensiunile "i a"ezarea cadrelor n pagin^
cele dou documente care descriu coninutul fiecrui cadru n parte.
?n esen, cadrele fac posi!il afi"area n fereastra !rowserului a mai multe pagini, simultan.
1. :ocumentu! de de,inire a cadre!or
?n cadrul documentului de definire a cadrelor, !locul <B!D"> </B!D"> este nlocuit de !locul
<)AME$ET> </)AME$ET>. ?n acest tip de document !locul <B!D"> nu mai este folosit.
?n interiorul !locului <8+AEFET>= fiecare cadru este introdus prin eticheta <)AME>.
,efinirea documentului ce va fi afi"at ntr%un cadru se face prin atri!utul "rc (source6. $cesta este
un atri!ut o!ligatoriu al etichetei <8+AE>= "i prime"te ca valoare adresa 0.; a documentului 89:;
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 atri!utului col" al
etichetei <8+AEFET> ce descrie acea fereastr^
mprirea unei ferestre n cadre de tip linie se face cu ajutorul atri!utului ro5" al etichetei
<8+AEFET> care descrie fereastra.
Palorile atri!utelor cols si roCs sunt liste de elemente separate prin virgul care descriu modul n
care se face mprirea ferestrei.
Palorile acestor atri!ute pot fi e&primate n mai multe moduri:
n pi&eli b n care caz valoarea este un numr ntreg
n procente din dimensiunea ferestrei 2un numr cuprins ntre D "i EE, urmat de sim!olul 56
n dimensiuni relative, nc. +im!olul nc 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 2vezi
e&emplele de mai jos6.
,%emplul -@
cols<"2@@ = _ = D@R = _
$ceast construcie descrie o mprire n patru cadre de tip coloan, dintre care prima are GCC pi&eli, a
treia ocup jumtate din spaiul total disponi!il, iar a doua "i a patra ocup n mod egal restul de spaiu
rmas disponi!il.
,%emplul $@
roCs<"2@@ = D@R = 1_ = 2_ "
?n acest e&emplu, pagina este mprit n patru cadre de tip linie, dintre care prima are GCC pi&eli, a doua
ocup jumtate din spaiul total disponi!il iar a treia "i a patra ocup restul de spaiu rmas disponi!il,
care se mparte n trei pri egale, al treilea cadru ocup#nd o parte, iar al patrulea ocup#nd dou pri.
0bservaii
dac mai multe elemente din list sunt configurate cu c , atunci spaiul disponi!il rmas pentru ele se
va mpri n mod egal.
n cadrul unui !loc <8+AEFET> poate fi inclus un cadru prin eticheta <8+AE> sau un alt !loc
<8+AEFET> o!in#ndu%se astfel cadre im!ricate.
?n majoritatea e&emplelor care vor urma am folosit ca 0.;%uri pentru documentele pe care le conin
cadrele, pagini deja construite n capitolele anterioare. ,ac ai salvat documentele 89:; cu numele
specificate n eticheta V9I9;W putei verifica direct e&emplele care vor urma. ,ac preferai s ncrcai
n cadrele descrise n e&emplele urmtoare alte documente, va tre!ui s facei modificrile necesare
specific#nd numele acestor fi"iere.
&emplul DC.D mparte pagina n dou cadre verticale, fiecare ocup#nd jumtate din pagin. $spectul
paginii este cel din >igura DC.D.
,%emplul -7# -
<HTL>
<HEAD>
<TITLE>cadre1</TITLE>
</HEAD>
<8+AEFET cols<"_= _">
<8+AE src<"liste1.ht%l">
<8+AE src<"liste:.ht%l">
</8+AEFET>
</HTL>
?n &emplul DC.G este creat o pagina -e! cu trei cadre orizontale. /rimul cadru are DCC de pi&eli, al treilea
ocup IC5 din fereastra !rowserului, iar al doilea ocup restul spaiului. /agina arat ca n >igura DC.G.
,%emplul -7# $
<HTL>
<HEAD>
<TITLE>cadre2</TITLE>
</HEAD>
<8+AEFET roCs<"1@@ = _ = 9@R">
<8+AE src<"liste1.ht%l">
<8+AE src<"liste2.ht%l">
<8+AE src<"liste9.ht%l">
</8+AEFET>
</HTL>
&emplul DC.I creaz o matrice ptrat de K cadre 2G & G6. /entru a realiza acest lucru, se folosesc simultan
cele dou atri!ute cols "i roCs. /agina descris n acest document va avea aspectul din >igura DC.I.
,%emplul -7# "
<HTL>
<HEAD>
<TITLE>cadre9</TITLE>
</HEAD>
<8+AEFET roCs<"_= _" cols<"_= _">
<8+AE src<"tabele1.ht%l">
<8+AE src<"tabele2.ht%l">
<8+AE src<"tabele:.ht%l">
<8+AE src<"tabeleH.ht%l">
</8+AEFET>
</HTL>
2. Cadre im9ricate
)adrele, ca "i alte elemente ale paginii -e! 2liste, ta!ele6, se pot im!rica, adic pot fi incluse cadre n
interiorul altor cadre. ?n &emplul DC.K este creat o pagin cu trei cadre mi&te. /entru a construi pagina se
procedeaz din aproape n aproape. :ai nt#i, 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 DC.K.
,%emplul -7# 1
<HTL>
<HEAD>
<TITLE>cadre:</TITLE>
</HEAD>
<8+AEFET cols<"9@R= _">
<8+AE src<"tabele1.ht%l">
<8+AEFET roCs<"_= _">
<8+AE src<"tabele2.ht%l">
<8+AE src<"tabele:.ht%l">
</8+AEFET>
</8+AEFET>
</HTL>
3. Contro!u! aspectu!ui unui cadru
Culoarea mar%inii cadrului
/entru a sta!ili culoarea chenarului unui cadru se utilizeaz atri!utul bor6ercolor. $cest atri!ut prime"te
ca valoare un nume de culoare sau o culoare definit n conformitate cu modelul .<*.
$tri!utul bordercolor poate fi ata"at at#t etichetei <8+AEFET> pentru a sta!ili culoarea tuturor
chenarelor cadrelor incluse, c#t "i etichetei <8+AE>, pentru a sta!ili culoarea chenarului pentru un cadru
individual.
&emplul DC.H ilustreaz atri!utul bordercolor. /agina descris n acest document are aspectul din >igura
DC.H.
,%emplul -7# 2
<HTL>
<HEAD>
<TITLE>cadreD</TITLE>
</HEAD>
<8+AEFET cols<"2@R= _" bordercolor<"$reen" border<"1D">
<8+AE src<"text9.ht%l">
<8+AEFET roCs<"_= _">
<8+AE src<"text:.ht%l" bordercolor<"blue">
<8+AE src<"textD.ht%l">
</8+AEFET>
</8+AEFET>
</HTL>
L&;imea mar%inii cadrului
$tri!utul bor6er al etichetei <8+AEFET> permite configurarea limii chenarelor tuturor cadrelor la un
numr dorit de pi&eli. Paloarea atri!utului border este un numr ntreg, ce reprezint numrul de pi&eli,
valoarea presta!ilit fiind de H pi&eli. ?n mod presta!ilit, chenarul unui cadru este afi"at "i are aspect
tridimensional.
/entru a o!ine cadre fr chenar se utilizeaz setarea border<"@".
$fi"area chenarului unui cadru se mai poate dezactiva "i dac se utilizeaz atri!utul fra%ebor6er cu
valoarea (no(. $cest atri!ut poate fi ata"at at#t etichetei <8+AEFET> 2dezactivarea fiind vala!il pentru
toate cadrele incluse6 c#t "i etichetei <8+AE> 2dezactivarea fiind vala!ila numai pentru un singur cadru6.
Palorile posi!ile ale atri!utului *ra%eborder sunt:
7es % echivalent cu D
no % echivalent cu C
)adrele din &emplul DC.B nu au chenar. ,up cum putei o!serva din >igura DC.B crearea unor cadre fr
chenar poate duce la apariia unor am!iguiti n pagin a"a nc#t acest efect tre!uie folosit cu atenie.
,%emplul -7# 3
<HTL>
<HEAD>
<TITLE>cadreH</TITLE>
</HEAD>
<8+AEFET roCs<"_= _" border<"@">
<8+AE src<"tabele1.ht%l">
<8+AE src<"tabele2.ht%l">
</8+AEFET>
</HTL>
5imen.iunea cadrului
)hiar dac dimensiunile unui cadru au fost sta!ilite n mod e&plicit prin valorile atri!utelor etichetei
<8+AEFET>, utilizatorul are posi!ilitatea de a altera aceste dimensiuni cu ajutorul mouse%ului.
?n scopul prevenirii acestei situaii se poate utiliza atri!utul nore"i#e, ata"at etichetei <8+AE>, al crui
efect este cel de !locare a posi!ilitii de redimensionare a cadrului.
4. 6are de deru!are
$tri!utul "crolling al etichetei <8+AE> este utilizat pentru a aduga unui cadru o !ar de derulare sau
de defilare 2scrolling bar6, care permite navigarea n interiorul documentului afi"at n cadru. Palorile posi!ile
ale atri!utului scrollin$ sunt:
7es % !ara de derulare este prezent ntotdeauna^
no % !ara de derulare nu este disponi!il^
auto % !ara de derulare este vizi!il atunci c#nd este necesar. $ceasta opiune las !rowserului
posi!ilitatea de a aduga sau nu !ara, n funcie de dimensiunea te&tului din cadru.
&emplul DC.4 ilustreaz funcionarea atri!utului scrollin$ n cele trei situaii.
,%emplul -7# 4
<HTL>
<HEAD>
<TITLE>cadreI</TITLE>
</HEAD>
<8+AEFET roCs<"_= _= _">
<8+AE src<"text1.ht%l" scrollin$<"7es" noresi3e>
<8+AE src<"textI.ht%l" scrollin$<"no" noresi3e>
<8+AE src<"textP.ht%l" scrollin$<"auto" noresi3e>
</8+AEFET>
</HTL>
,in >igura DC.4 se o!serv c, deoarece la primul cadru te&tul nu dep"e"te dimensiunea ferestrei, !ara de
derulare nu este afi"at de"i atri!utul scrollin$ are valoarea (7es(.
?n cel de%al doilea cadru !ara de derulare nu este afi"at, indiferent de dimensiunea te&tului din cadru.
;a cel de%al treilea cadru, prezena sau a!sena !arei de derulare este condiionat de dimensiunea te&tului.
$ici, deoarece te&tul dep"e"te dimensiunea ferestrei, !ara este afi"ata.
#. 5o(iionarea documentu!ui ntr-un cadru
$tri!utele %arginheight "i %argin5i6th ale etichetei <8+AE> permit sta!ilirea distanei n pi&eli
dintre coninutul unui cadru "i marginile verticale, respectiv orizontale ale cadrului. Palorile posi!ile ale
acestor atri!ute sunt:
un numr de pi&eli
procente din nlimea, respectiv din limea cadrului
?n &emplul DC.3 fereastra !rowserului este mprit n trei cadre de tip coloan de dimensiuni egale. ?n toate
cele trei cadre este afi"at acela"i document, ceea ce difer este poziionarea documentului n fiecare cadru.
$stfel, n cadrul din st#nga, nu este specificat nici o valoare pentru atri!utele %ar$inhei$ht "i
%ar$inCidth.
?n cadrul din mijloc, se sta!ile"te distana de HC de pi&eli ntre marginea superioar "i cea inferioar a cadrului
"i te&t.
?n cadrul din dreapta se sta!ile"te o distan de IC de pi&eli ntre marginea din st#nga "i cea din dreapta a
cadrului "i te&t. /agina are aspectul din >igura DC.3.
,%emplul -7# 5
<HTL>
<HEAD>
<TITLE>cadreP</TITLE>
</HEAD>
<8+AEFET cols<"_ = _ = _">
<8+AE src<"text1.ht%l">
<8+AE src<"text1.ht%l" %ar$inhei$ht<"H@">
<8+AE src<"text1.ht%l" %ar$inCidth<":@">
</8+AEFET>
</HTL>
'tenie(
&ist !rowsere care nu suport cadre. /entru acestea se utilizeaz n interiorul !locului <8+AEFET>
eticheta <!O)AME$> </!O)AME$>. ,ac !rowserul poate s interpreteze cadre, va ignora ce se gse"te
n aceast poriune, iar dac nu, materialul cuprins n zona <0!8+AEF> </0!8+AEF> va fi singurul care
va fi recunoscut "i afi"at.
ste de precizat "i faptul c ntre <0!8+AEF> </0!8+AEF> se pot introduce orice alte etichete 89:;
2inclusiv imagini, hFperlinJ%uri, ta!ele6.
%. Cadre interne 3in-!ine ,rames4
0n cadru intern este specificat prin intermediul etichetei <I)AME> </I)AME>. a define"te o arie
rectangular n interiorul documentului, arie n care !rowserul va afi"a un alt document 89:;, complet,
inclusiv marginile "i !arele de derulare.
0n cadru intern se insereaz ntr%o pagina -e! n mod asemntor cu o imagine, n interiorul !locului
<B!D">, a"a cum rezult din urmtorul e&emplu:
<I8+AE src<"tabele1@.ht%l" hei$ht<:@R Cidth<D@R> </I8+AE>
?n acest caz, am specificat c dorim un cadru intern care are KC5 din nlimea "i HC5 din limea paginii
curente.
$tri!utele acceptate de eticheta <I8+AE> sunt n parte preluate de la etichetele <8+AE> "i
<8+AEFET>, cum ar fi:
"rc= bor6er= fra%ebor6er= bor6ercolor= %arginheight= %argin5i6th=
"crolling= na%e<
' parte din atri!utele <8+AE> sunt comune cu cele ale etichetei <IG>:
v"&ace= h"&ace= align= 5i6th= height.
?n &emplul DC.E am construit un cadru intern n care se deschide unul dintre documentele 89:; create la
capitolul Tabele.
,%emplul -7# 6
<HTL>
<HEAD>
<TITLE>cadreQ</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">/adre interne</H1><H+>
</E0TE+>
<I8+AE Cidth<"H@R" hei$ht<"D@R" na%e<"icad" src<"tabele:.ht%l">
Daca )edeti acest text insea%na ca broCserul du%ne)oastra nu
su&orta cadre interne.
<#><A hre*<"cadre1@.ht%l">#a$ina *ara cadre interne</A>
</I8+AE>
<//E0TE+>
</B!D">
</HTL>
,in >igura DC.E putei o!serva c aspectul unui cadru intern este ntruc#tva similar cu cel al unei imagini in#
line.
ticheta <I8+AE> se introduce n cadrul !locului <B!D"> "i n cazul folosirii ei nu mai este necesar un
document de definire a cadrelor. /entru situaia c#nd !rowserul nu accept cadre interne, am asigurat o
versiune a paginii care nu conine astfel de cadre 2cadreD@+html6 introdus prin eticheta <A>. )oninutul
acestei pagini este foarte simplu, servind doar la ilustrarea modului n care poate fi construit o alternativ la
pagina cu cadre interne 2&emplul DC.DC6
,%emplul -7# -7
<HTL>
<HEAD>
<TITLE>cadre1@</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">#a$ina *ara cadre interne</H1><H+>
</B!D">
</HTL>
Iat un alt e&emplu 2&emplul DC.DD6 n care am creat o pagin care conine trei linJ%uri iar acestea deschid
paginile referite de ele n cadrul intern din centrul paginii. >igura DC.DC red aspectul acestei pagini.
,%emplul -7# --
<HTL>
<HEAD>
<TITLE>cadre11</TITLE>
</HEAD>
<B!D">
<A hre*<"tabele:.ht%l" tar$et<"icad">8isierul1</A><B+>
<A hre*<"tabeleD.ht%l" tar$et<"icad">8isierul2</A><B+>
<A hre*<"tabeleH.ht%l" tar$et<"icad">8isierul9</A><B+>
</E0TE+>
<I8+AE Cidth<"H@R" hei$ht<"D@R" na%e<"icad" src<"cadre11.ht%l">
Daca )edeti acest text insea%na ca broCserul du%ne)oastra nu
su&orta cadre interne.
<#><A hre*<"cadre1@.ht%l">#a$ina *ara cadre interne</A>
</I8+AE>
<//E0TE+>
</B!D">
</HTL>
?n e&emplu am folosit atri!utul na%e al etichetei <I8+AE> cu ajutorul cruia am atri!uit un nume acestui
cadru "i anume "icad". $cest lucru a fost necesar pentru a specifica, prin intermediul atri!utului target al
etichetei <A>, faptul c linJ%urile se vor deschide n cadrul intern.
&. :esc*iderea documente!or n a!te cadre
,ac ntr%unul dintre documentele deschise n cadru e&ist linJ%uri, acestea vor deschide paginile referite de
ele n cadrul curent.
$cest comportament se poate schim!a prin plasarea n eticheta <A> a atri!utului target= care precizeaz
numele ferestrei 2cadrului6 n care se va ncrca pagina nou referit de legtur, conform sinta&ei:
<A hre*<"(+L" tar$et<"nu%e?*ra%e"> </A>
@umele unui cadru este sta!ilit prin atri!utul na%e al etichetei <8+AE> conform sinta&ei:
<8+AE na%e<"nu%e?*ra%e">
?n &emplul DC.DG este prezentat o pagina -e! cu dou cadre. ,ocumentul de definire a cadrelor este
cadreD>+ html al crui aspect este redat n >igura DC.DD.
,%emplul -7# -$
<HTL>
<HEAD>
<TITLE>cadre12</TITLE>
</HEAD>
<8+AEFET cols<"2@R= _">
<8+AE src<"cadre19.ht%l">
<8+AE src<"cadre1:.ht%l" na%e<"cadru?drea&ta">
</8+AEFET>
</HTL>
,ocumentul de definire a cadrelor mparte pagina n dou cadre de tip coloan. ?n cel din st#nga se va
deschide documentul cadreDA+html iar n cel din dreapta, documentul cadreD<+html. )el de%al doilea cadru a
fost numit (cadru?drea&ta(.
?n &emplul DC.DI este creat documentul cadreDA+html. $cest document conine, dup cum o!servai, patru
linJ%uri. /rin intermediul atri!utului tar$et am specificat cadrul n care se vor deschide acestea. 9oate
aceste legturi deschid paginile referite de ele n cadrul drept.
,%emplul -7# -"
<HTL>
<HEAD>
<TITLE>cadre19</TITLE>
</HEAD>
<B!D">
<A hre*<"tabeleH.ht%l" tar$et<"cadru?drea&ta">
Le$atura 1
</A><B+>
<A hre*<"tabeleI.ht%l" tar$et<"cadru?drea&ta">
Le$atura 2
</A><B+>
<A hre*<"tabeleP.ht%l" tar$et<"cadru?drea&ta">
Le$atura 9
</A><B+>
<A hre*<"cadre1:.ht%l" tar$et<"cadru?drea&ta">
Ho%e
</A><B+>
</B!D">
</HTL>
?n &emplul DC.DK este creat documentul cadreD<+html.
,%emplul -7# -1
<HTL>
<HEAD>
<TITLE>cadre1:</TITLE>
</HEAD>
<B!D">
<H9>Aici se )or deschide &a$inile re*erite de le$aturile din cadrul
stan$</H9><H+>
</B!D">
</HTL>
+alvai cele trei fi"iere cu numele specificate "i deschidei cu !rowserul fi"ierul cadreD>+html pentru a o!serva
cum funcioneaz atri!utele prezentate.
$tri!utul tar$et al etichetei <8+AE> accept "i anumite valori predefinite "i anume:
?sel* % ncrcarea noii pagini are loc n cadrul curent
?blan; % ncrcarea noii pagini are loc ntr%o fereastr nou, anonim
?&arent % ncrcarea noii pagini are loc n cadrul printe al cadrului curent dac acesta e&ist, altfel are
loc n fereastra curent a !rowserului
?to& % ncrcarea noii pagini are loc n fereastra !rowserului ce conine cadrul curent.
0rmtorul e&emplu ilustreaz felul cum funcioneaz aceste valori ale atri!utului tar$et.
,ocumentul de definire a cadrelor este prezentat n &emplul DC.DH aspectul su fiind cel din >igura DC.DG.
/agina construit n acest e&emplu conine dou cadre orizontale. ?n cel de sus este ncrcat documentul
cadreDI+html iar n cel de jos, documentul cadreD=+html.
,%emplul -7# -2
<HTL>
<HEAD>
<TITLE>cadre1D</TITLE>
</HEAD>
<8+AEFET roCs<"9@R= _">
<8+AE src<"cadre1I.ht%l">
<8+AE src<"cadre1H.ht%l">
</8+AEFET>
</HTL>
&emplul DC.DB construie"te documentul cadreD=+html care conine trei legturi ctre fi"iere 89:; create la
capitolul /ormatarea te%tului. >iecare dintre aceste legaturi are specificat atri!utul tar$et pentru a ilustra
modul n care funcioneaz acesta.
,%emplul -7# -3
<HTL>
<HEAD>
<TITLE>cadre1H</TITLE>
</HEAD>
<B!D">
<A hre*<"text:.ht%l" tar$et<"?blan;">
Aceasta le$atura se deschide in alta *ereastra
</A><B+>
<A hre*<"textD.ht%l" tar$et<"?sel*">
Aceasta le$atura se deschide in *ereastra curenta
</A><B+>
<A hre*<"textH.ht%l" tar$et<"?&arent">
Aceasta le$atura se deschide in *ereastra &arinte
</A><B+>
</B!D">
</HTL>
,ocumentul cadreDI+html prezentat n &emplul DC.D4 este o pagin -e! foarte simpl care se va deschide n
cadrul de sus.
,%emplul -7# -4
<HTL>
<HEAD>
<TITLE>cadre1I</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">Atributul tar$et</H1>
</B!D">
</HTL>
/entru a o!serva modul de funcionare al atri!utului tar$et salvai cele trei fi"iere su! numele specificate "i
deschidei cu !rowserul documentul cadreD?+html.
0. Su-estii pri"ind ,o!osirea cadre!or
,e"i cadrele reprezint o maniera destul de spectaculoas de a structura o pagin -e!, 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 0.; , este mai greu pentru
vizitator s rein adresa paginii n !avorites. 1i, nu n ultimul r#nd, deoarece e&ist !rowsere care nu suport
cadrele, este indicat s asigurai pentru fiecare pagin astfel structurat "i o versiune fr cadre, ceea ce
implic un efort suplimentar.
$v#nd n vedere toate aceste aspecte, este !ine s limitai folosirea cadrelor n paginile dumneavoastr doar la
situaiile n care nu putei proceda altfel.
1. 'e(umat
>olosirea cadrelor ntr%un document 89:; permite deschiderea mai multor pagini distincte n documentul
respectiv.
/entru a crea o pagin care conine cadre sunt necesare mai multe documente 89:;:
documentul de definire a cadrelor
c#te un document 89:; pentru fiecare cadru definit
,ocumentul de definire a cadrelor nu conine !locul <B!D"> acesta fiind nlocuit de !locul <8+AEFET>
</8+AEFET>. ?n cadrul !locului <8+AEFET> fiecare cadru este introdus prin eticheta <8+AE>.
?mprirea ferestrei n cadre de tip coloan se face cu ajutorul atri!utului cols iar n cadre de tip linie se face
cu ajutorul atri!utului roCs. $m!ele atri!ute sunt asociate etichetei <8+AEFET>.
/entru a sta!ili limea chenarului unui cadru se folose"te atri!utul border al etichetei <8+AE>. /entru a
sta!ili culoarea chenarului unui cadru se folose"te atri!utul bordercolor al etichetei <8+AE>. $ceste
atri!ute pot fi asociate "i etichetei <8+AEFET>, caz n care efectul lor se va aplica tuturor cadrelor din set.
/rezena !arelor de derulare ntr%un cadru se sta!ile"te cu ajutorul atri!utului scrollin$.
/entru a poziiona documentul ntr%un cadru se folosesc atri!utele %ar$inCidth "i %ar$inhei$ht.
?ntr%o pagin -e! se pot introduce "i cadre interne, cu ajutorul etichetei <I8+AE> </I8+AE>.
/entru a specifica fereastra sau cadrul n care se va deschide un document se folose"te atri!utul tar$et care
poate avea ca valoare numele ferestrei 2cadrului6 sau poate avea o valoare predefinit.
ste recomandat s asigurai o versiune fr cadre a documentului 89:;, pentru ca acesta s poat fi
vizualizat cu !rowserele care nu suport cadre. /entru aceasta, elementele care fac parte din versiunea fr
cadre se includ ntre etichetele <0!8+AEF> </0!8+AEF>.
18. Test
-1. :n ce 8on a unui document ')M$ se introduce blocul <-RAMESET>9
a6 ?n !locul <B!D">
!6 ?n !locul <HEAD>
c6 <8+AEFET> formeaz un !loc separat.
-2. Cum se introduce un cadru 6n pagin9
a6 /rin eticheta <8+AEFET>
!6 /rin eticheta <8+AE>
c6 /rin eticheta <F+/>
-3. 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
a6 <8+AEFET cols<"_ = _= _"
!6 <8+AEFET cols<"D@R= 1_ = 2_"
c6 <8+AEFET cols<"D@R= _ = _"
-. Ce reali8ea8 urmtoarea construcie9
<HTL>
<8+AEFET cols<"_= _">
<8+AE src<"*ra%e1.ht%l">
<8+AEFET roCs<"_= _">
<8+AE src<"*ra%e2.ht%l">
<8+AE src<"*ra%e9.ht%l`>
</8+AEFET>
</8+AEFET>
</HTL>
a6 ?mparte pagina n patru cadre, dou de tip coloan, dou de tip linie.
!6 ?mparte pagina n dou cadre de tip coloan, cel de%al doilea fiind mprit n dou cadre de tip linie.
c6 ?mparte pagina n trei cadre de tip linie.
-". :n construcia urmtoare la ce folose7te atributul scr,llin$9
<8+AE src<"*ra%e1.ht%l" scrollin$<"auto">
a6 /ermite auto%dimensionarea cadrului n funcie de mrimea te&tului.
!6 $daug automat !ara de derulare pentru acest cadru.
c6 ;as !rowserului posi!ilitatea de a aduga sau nu !ara de derulare, n funcie de mrimea te&tului din
cadru.
-$. $a ce folosesc atributele .ar$in"#i$"! 7i .ar$inwi!" ale etichetei <-RAME>9
a6 ,imensioneaz marginile cadrului.
!6 ,imensioneaz chenarul cadrului.
c6 +ta!ilesc distana dintre marginile cadrului "i coninutul su.
-+. Bnde se introduce eticheta <I-RAME>9
a6 ?n !locul <B!D">
!6 ?n !locul <8+AEFET>
c6 ?n !locul <8+AE>
--. $a ce serve7te atributul /,r#rc,l,r asociat etichetei <-RAMESET>?
a6 +ta!ile"te culoarea chenarului unui cadru.
!6 +ta!ile"te culoarea chenarelor tuturor cadrelor definite n <8+AEFET>.
c6 +ta!ile"te culoarea de fond a cadrelor definite n <8+AEFET>.
-/. Care dintre urmtoarele construcii este corect9
a6 <8+AE na%e<"nu%e?cadru">
!6 <8+AEFET na%e<"nu%e?cadru">
c6 <8+AEFET hre*<"nu%e?cadru">
/0. Cum se reali8ea8 deschiderea documentului dintr#un cadru 6ntr#o fereastra nou9
a6 <8+AE src<"*ra%e1.ht%l" tar$et<"?sel*">
!6 <8+AE src<"*ra%e1.ht%l" tar$et<"?blan;">
c6 <8+AE src<"*ra%e1.ht%l" tar$et<"?&arent">
8adre
-# c6
$# !6
"# c6
1# !6
2# c6
3# c6
4# a6
5# !6
6# a6
-7# !6
Capitolul 11
3ormulare
)u siguran ai vzut cum arat un formular ntr%o pagin -e!. ,e e&emplu, atunci c#nd completai
o carte de oaspei 2guestbook6 avei de%a face cu un formular. $tunci c#nd selectai mai multe opiuni
dintr%o list sau introducei un cuv#nt ntr%un motor de cutare, folosii, de asemenea, un formular.
>ormularul reprezint unul dintre cele puternice elemente ale unei pagini -e!. /rin intermediul
formularelor se realizeaz interactivitatea cu vizitatorul paginii, acestea permi#ndu%v s o!inei
informaii despre cei care viziteaz paginile dumneavoastr.
1. Ce este un ,ormu!ar?
0n formular este un ansam!lu de zone active alctuit din mai multe tipuri de elemente: !utoane,
casete de selecie, c#mpuri 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 -e! ce conine un formular cuprinde dou etape:
0tilizatorul completeaz formularul "i, prin apsarea !utonului de e&pediere, trimite serverului datele
nscrise n formular.
' aplicaie dedicat de pe server 2un script6 analizeaz informaiile transmise "i, n funcie de
configuraia scriptului, fie stocheaz datele ntr%o !az 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 tre!uie s%l nelegei n legtur cu formularele este c aici apar
dou pro!leme distincte "i care necesit instrumente diferite pentru a le gestiona.
/rima dintre ele este plasarea formularului n pagin "i asigurarea !unei lui funcionri. $cest lucru
se realizeaz prin 89:; "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 pro!lem este rezolvat cu ajutorul scripturilor )<I stocate pe
server, su!iect despre care vom vor!i n capitolul urmtor.
+tructura formularele poate varia, de la o simpl caset de te&t pentru introducerea unui "ir de
caractere, p#n la un ansam!lu comple&, cu multiple seciuni "i care ofer faciliti puternice de
transmitere/prelucrare a datelor.
2. Crearea unui ,ormu!ar
0n formular este definit ntr%un !loc delimitat de etichetele
<O)M> </O)M># ticheta </8!+>, de nchidere, este o!ligatorie.
?n interiorul !locului sunt incluse:
elementele formularului, n care vizitatorul urmeaz s introduc informaii
un !uton de e&pediere 2submit6, la apsarea cruia, datele sunt transmise ctre server
opional, un !uton de anulare 2reset, cancel6, prin care utilizatorul poate anula datele nscrise n
formular
9ot ceea ce este inclus ntre eticheta de deschidere "i cea de nchidere face parte din formular.
ticheta <8!+> are dou atri!ute eseniale:
action b comunic !rowserului unde s trimit datele introduse n formular. ?n general valoarea
atri!utului action este adresa 0.; a scriptului aflat pe serverul care prime"te datele formularului.
,e e&emplu:
<8!+ action<"htt&O//CCC.7ahoo.co%/c$i-bin/nu%e?*is.c$i">.
%etho6 % precizeaz metoda utilizat de !rowser pentru e&pedierea datelor formularului.
$tri!utul %ethod poate avea dou valori:
&ost % folosit n cele mai multe cazuri. Indic serverului s furnizeze datele direct scriptului ca date
de intrare standard.
$et 2valoarea implicit6 % datele din formular sunt adugate la adresa 0.; precizat de atri!utul
action, ntre adresa 0.; "i date fiind inserat un "M". ,atele sunt adugate conform sinta&ei:
nu%e?ca%&<)aloare?ca%&.
?ntre diferite seturi de date este introdus un (X(. ,e e&emplu:
"htt&O//CCC.7ahoo.co%/c$i-bin/nu%e?*is.c$iM
nu%e1<)aloare1Tnu%e2<)aloare2"
)ea mai facil cale prin care informaiile introduse ntr%un formular pot parveni creatorului paginii
este folosirea comenzii %ailto9 $m mai nt#lnit aceast comand la capitolul egturi n conte&tul
urmtor:
<A hre*<"%ailtoOautorXdo%eniu.co%">
,e data aceasta nu mai este vor!a 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 preciz#nd ca valoare a atri!utului action urmtoarea secven:
"%ailtoOadresa?%ail"= ca n e&emplul urmtor:
<8!+ action<%ailtoOautorXdo%eniu.co% %ethod<"&ost">
$"a cum spuneam, atri!utul action comunic !rowserului unde s trimit datele introduse n
formular. >olosind comanda %ailtoO !rowserului i se indic s trimit datele la adresa de mail
specificat n comand.
,in pcate, aceast comand nu este e&ecutat n acest mod dec#t de !rowserele @etscape.
*rowserele Internet &plorer nu recunosc comanda %ailtoO prezent n cadrul formularelor.
$cestea o e&ecut la fel cum este ea e&ecutat atunci c#nd face parte din eticheta <A> ca valoare a
atri!utului hre* adic lanseaz aplicaia de mail a utilizatorului.
,in acest motiv, inclusiv pentru trimiterea datelor la o adres specificat de mail, se folosesc
scripturi )<I. /entru a nu intra nc n amnunte privind scripturile, vom folosi totu"i n e&emplele
urmtoare comanda %ailtoO
.einei totu"i c afi"area corect a unui formular n pagin nu este dec#t prima etap a utilizrii
formularului. /entru a face o testare complet tre!uie 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 etichetele <I!,+T>, <$ELE-T>,
<O,TIO!> "i <TE=TA)EA>.
3. )tic*eta <INPUT>
/rin intermediul etichetei <I!,+T> se pot introduce n formular c#mpuri de editare 2casete de te&t6,
c#mpuri de tip passord, !utoane de e&pediere "i anulare, !utoane radio "i casete de validare.
ticheta <I0#(T> are urmtoarele atri!ute:
t:&e % prin care se precizeaz tipul elementului.
na%e % permite ata"area unui nume fiecrui element al formularului.
val'e % permite atri!uirea unei valori iniiale unui element al formularului.
/erechea de atri!ute na%eAval'e 2nume/valoare6 este deose!it de important pentru !una
funcionare a formularului.
>iecare element introdus prin eticheta <I0#(T> reprezint o varia!il. Informaia introdus de
utilizator n c#mpul elementului respectiv reprezint valoarea pe care o prime"te aceast varia!il.
,in acest motiv, toate elementele introduse prin eticheta <I0#(T> tre!uie s ai! atri!uit un nume.
$cest lucru este o!ligatoriu deoarece, n caz contrar, varia!ila reprezentat de acel element nu va
avea un identificator.
?n plus, este indicat s atri!uii nume distincte diferitelor elemente care fac parte din formular.
$ltminteri, scriptul )<I care prelucreaz datele nu va "ti s fac distincia ntre varia!ile av#nd
acela"i nume "i valori diferite.
$tri!utul t7&e poate avea urmtoarele valori:
text % se folose"te pentru a introduce un c#mp de editare pe o singur linie
&assCord b se folose"te pentru a insera un c#mp de editare n care caracterele introduse sunt
nlocuite cu asteriscuri 2c6
radio b folosit pentru a insera un "ir de !utoane radio 2elemente care se folosesc pentru a selecta
dintr%o list de opiuni una "i numai una dintre ele6
chec;box b folosit pentru a introduce un "ir de casete de validare 2elemente care se folosesc c#nd
dintr%o list de opiuni se poate alege mai mult de o singur variant6
sub%it b se folose"te pentru a introduce un !uton de e&pediere
reset b se folose"te pentru a introduce un !uton de anulare a informaiilor introduse n formular
button % se folose"te pentru a introduce n formular un !uton o!i"nuit
hidden % se folose"te pentru a introduce n formular un c#mp ascuns
>iecare dintre valorile atri!utului t7&e genereaz un anumit tip de element n cadrul formularului.
&emplul DD.D creeaz un formular foarte simplu care conine un c#mp de editare "i un !uton de
e&pediere. $spectul formularului este redat n >igura DD.D.
,%emplul --# -
<HTL>
<HEAD>
<TITLE>*or%ulare1</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center"> /aseta de text si buton de ex&ediere</H1><H+>
<8!+ action<"%ailtoOadresaX777.co%" %ethod<"&ost">
Introduceti adresa d)s. de %ailO
<I0#(T t7&e<"text" na%e<"adresa" )alue<"adresa %ail"><B+>
<I0#(T t7&e<"sub%it" )alue<"ex&edia3a">
</8!+>
</B!D">
</HTL>
,up cum o!servai, numele atri!uit c#mpului de editare este "adresa" iar atri!utul )alue a primit
ca valoare "irul de caractere "adresa %ail". $cest te&t va fi afi"at n interiorul c#mpului de
editare, nainte ca utilizatorul s nceap introducerea informaiilor. ,ac atri!utul )alue nu era
prezent sau era iniializat cu stringul vid 2 (( 6, caseta de te&t ar fi fost goal.
?n cadrul formularului este prezent "i un !uton de e&pediere, inserat de asemenea prin intermediul
etichetei <I0#(T> av#nd atri!utul t7&e setat cu valoarea "sub%it". $"a cum se o!serv din
figur, pe !uton este afi"at te&tul "ex&edia3a", deoarece pentru acest element, atri!utului )alue i%
a fost atri!uit ca valoare te&tul respectiv.
Ca.ete de te#t
?n &emplul DD.G am creat un formular care conine trei casete de te&t 2c#mpuri de editare6 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 o!serva din >igura DD.G, o caset de tip
passord este asemntoare cu un c#mp de editare, singura diferen fiind aceea c aici caracterele
nu sunt afi"ate n clar ci sunt nlocuite cu asteriscuri.
?n plus, formularul conine un !uton de e&pediere "i unul de anulare a datelor introduse.
,%emplul --# $
<HTL>
<HEAD>
<TITLE>*or%ulare2</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">/asete de text</H1><H+>
<8!+ action<"%ailtoOadresaX777.co%" %ethod<"&ost">
Introduceti nu%eleO
<I0#(T t7&e<"text" na%e<"nu%e" )alue<""><B+>
Introduceti &renu%eleO
<I0#(T t7&e<"text" na%e<"&renu%e" )alue<""><B+>
Introduceti adresa de %ailO
<I0#(T t7&e<"text" na%e<"%ail" )alue<""><B+>
Introduceti &arolaO
<I0#(T t7&e<"&assCord" na%e<"&arola"><B+>
<I0#(T t7&e<"reset" )alue<"ster$e">
<I0#(T t7&e<"sub%it" )alue<"ex&edia3a">
</8!+>
</B!D">
</HTL>
/entru elementele de tip caset de te&t "i passord sunt utile "i atri!utele:
%axlength b care sta!ile"te numrul ma&im de caractere care poate fi introdus n c#mpul de editare
"i#e b care sta!ile"te limea acestui c#mp
8utoane radio
?n &emplul DD.I am creat un formular care conine un "ir de !utoane radio, prin care se cere prerea
vizitatorului despre o pagin -e!. ,up cum o!servai, fiecare element de tip !uton radio are acela"i
nume "i anume "o&inie" deoarece nu se poate selecta dec#t un singur element, astfel nc#t orice
am!iguitate este e&clus.
>iecare !uton radio tre!uie s ai! o valoare. ,in acest motiv pentru fiecare !uton atri!utul )alue a
fost setat la o alt valoare. $legerea uneia dintre opiuni, de e&emplu "buna", face ca varia!ila
"o&inie" s primeasc valoarea "buna". /rin urmare, serverului i va fi transmis perechea
"o&inie<buna".
?n plus, o!servai prezena atri!utului checke6, care are rolul de a presta!ili o anumit opiune, pe
care ns utilizatorul o poate schim!a, dac dore"te. $spectul formularului este cel din >igura DD.I.
,%emplul --# "
<HTL>
<HEAD>
<TITLE>*or%ulare9</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center"> </H1><H+>
<8!+ action<"%ailtoOadresaX777.co%" %ethod<"&ost">
/e &arere a)eti des&re aceasta &a$inaM<B+>
<I0#(T t7&e<"radio" na%e<"o&inie" )alue<"*oarte buna"
chec;ed>8oarte buna<B+>
<I0#(T t7&e<"radio" na%e<"o&inie" )alue<"buna">Buna<B+>
<I0#(T t7&e<"radio" na%e<"o&inie" )alue<"destul de buna">Destul de
buna<B+>
<I0#(T t7&e<"radio" na%e<"o&inie" )alue<"&roasta">#roasta<B+>
<I0#(T t7&e<"reset" )alue<"anulea3a">
<I0#(T t7&e<"sub%it" )alue<"ex&edia3a">
</8!+>
</B!D">
</HTL>
Ca.ete de validare
&emplul DD.K creeaz un "ir de casete de validare, care se deose!esc de !utoanele radio prin faptul
c se pot selecta mai multe opiuni dintre cele prezentate. >igura DD.K red aspectul formularului
construit n acest e&emplu.
,%emplul --# 1
<HTL>
<HEAD>
<TITLE>*or%ulare:</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center</H1><H+>
<8!+ action<"%ailtoOadresaX777.co%" %ethod<"&ost">
/are sunt hobb7-urile du%nea)oastraM<B+>
<I0#(T t7&e<"chec;box" na%e<"hobb7" )alue<"s&ort">F&ort<B+>
<I0#(T t7&e<"chec;box" na%e<"hobb7" )alue<"*il%">8il%<B+>
<I0#(T t7&e<"chec;box" na%e<"hobb7" )alue<"lectura">Lectura<B+>
<I0#(T t7&e<"chec;box" na%e<"hobb7" )alue<"Gocuri">Vocuri &e
co%&uter<B+>
<I0#(T t7&e<"chec;box" na%e<"hobb7" )alue<"internet">Fur*in$ &e
net<B+>
<I0#(T t7&e<"chec;box" na%e<"hobb7" )alue<"al&inis%">Al&inis%<B+>
<I0#(T t7&e<"sub%it" na%e<"sub%it" )alue<"ex&edia3a">
</8!+>
</B!D">
</HTL>
' caset de validare are dou stri: marcat sau nemarcat 2on sau off6. )a "i la !utoanele radio,
atri!utul na%e are n e&emplul considerat o singur valoare, "hobb7", iar atri!utul )alue are,
pentru fiecare caset, valori distincte. +erverului i sunt transmise numai acele valori care au fost
marcate n casetele de validare corespunztoare.
1i n cazul casetelor de validare este posi!il prezena atri!utului checke6 care preselecteaz o
anumit opiune sau mai multe.
8utoane
?n cadrul unui formular se pot introduce "i !utoane o!i"nuite 2altele dec#t !utoanele &ubmit "i Reset6.
.olul acestora este de a iniia anumite aciuni n momentul c#nd utilizatorul face clicJ cu mouse%ul
pe ele. ;im!ajul 89:; nu ofer instrumentele necesare pentru a specifica ce anume se nt#mpl
c#nd !utonul este apsat. /entru aceasta este necesar s includei n documentul 89:; scripturi
=ava+cript care s trateze aceste evenimente.
)a "i !utoanele &ubmit "i Reset, !utoanele o!i"nuite sunt incluse n formular cu ajutorul etichetei
<I0#(T> av#nd atri!utul t7&e setat la valoarea button:
<I0#(T t7&e<"button" na%e<"buton" )alue<"text">.
9e&tul specificat ca valoare a atri!utului )alue va fi afi"at pe !uton.
*utoanele pot fi folosite pentru a valida informaiile introduse n formular, pentru a deschide
documente "i a iniia diverse alte aciuni din partea !rowserului.
Cmpuri a.cun.e '7idden 4ield.*
)#mpurile ascunse sunt elemente care fac parte dintr%un formular dar nu sunt vizi!ile n cadrul
paginii. /rin intermediul acestora se pot include n formular informaii care nu pot fi alterate de
!rowser sau de utilizator. Introducerea unui astfel de c#mp n formular se face prin eticheta
<I0#(T t7&e<"hidden">.
)a "i n cazul celorlalte elemente ale formularului este necesar prezena atri!utelor na%e "i )alue,
ca n e&emplul urmtor:
<I0#(T t7&e<"hidden" na%e<"ascuns" )alue<"%odi*ica">
)#mpurile ascunse pot servi la o gestionare mai !un a datelor transmise la server. ,e e&emplu, s
presupunem c avem un formular care cere utilizatorului c#teva informaii iniiale: numele "i adresa.
/e !aza acestora, aplicaia de pe server iniiaz afi"area 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 c#mpurile ascunse ale celui de%al doilea formular. ?n
aceast situaie este util folosirea c#mpurilor 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
aceea"i persoan.
4. )tic*ete!e <SELECT> i <OPTION>
)u ajutorul etichetei <$ELE-T> </$ELE-T> 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 !locul <FELE/T> se introduce prin eticheta <O,TIO!>.
?n &emplul DD.H este construit un meniu derulant, din care vizitatorul poate selecta opiunea dorit.
$tri!utul na%e are acela"i rol ca "i n eticheta <I0#(T>. ,ac vizitatorul selecteaz din meniu zodia
9aur, de e&emplu, la apsarea !utonului de e&pediere, serverului i este transmis perechea:
"3odia<taur". $tri!utul "i#e este setat la valoarea "1". +etarea atri!utului si3e la valoarea "1"
creeaz o un meniu derulant cu o singur opiune vizi!il iniial a"a cum se poate o!serva din >igura
DD.H.
,%emplul --# 2
<HTL>
<HEAD>
<TITLE>*or%ulareD</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">eniu derulant</H1><H+>
<8!+ action<"%ailtoOadresaX777.co%" %ethod<"&ost">
/are este 3odia du%nea)oastraM<B+>
<FELE/T na%e<"3odia" si3e<"1">
<!#TI!0>Berbec
<!#TI!0>Taur
<!#TI!0>Ge%eni
<!#TI!0>+ac
<!#TI!0>Leu
<!#TI!0>8ecioara
<!#TI!0>Balanta
<!#TI!0>Fcor&ion
<!#TI!0>Fa$etator
<!#TI!0>/a&ricorn
<!#TI!0>Jarsator
<!#TI!0>#esti
</FELE/T>
<I0#(T t7&e<"sub%it" )alue<"ex&edia3a">
</8!+>
</B!D">
</HTL>
,ac atri!utul si3e este setat la o valoare mai mare dec#t D meniul va afi"a un numr de opiuni
egal cu aceast valoare "i va conine o !ar de derulare pentru a face accesi!ile "i celelalte opiuni. ?n
>igura DD.B poate fi vzut un meniu la care valoarea atri!utului si3e este B.
#. )tic*eta <TEXTAREA>
)u ajutorul etichetei <TE=TA)EA> </TE=TA)EA> 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 etichet se folose"te atunci c#nd dorim s cerem vizitatorului o opinie despre un anumit
su!iect, care necesit introducerea unui te&t mai lung dec#t o singur linie 2acest element se mai
nume"te "i caset de comentarii6. <TEATA+EA> este o etichet container, deci necesit eticheta de
nchidere </TEATA+EA>.
$tri!utele ro5" "i col" sta!ilesc numrul de linii, respectiv de coloane rezervate pentru
introducerea te&tului.
&emplul DD.B introduce n pagin o caset pentru comentarii, aspectul acesteia fiind redat n >igura
DD.4.
,%emplul --# 3
<HTL>
<HEAD>
<TITLE>*or%ulareH</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center"> </H1><H+>
<8!+ action<"%ailtoOadresaX777.co%" %ethod<"&ost">
/are este o&inia du%nea)oastra des&re acest *il%M<B+>
<TEATA+EA na%e<"co%entariu" roCs<"1@" cols<":@"></TEATA+EA><B+>
<I0#(T t7&e<"sub%it" )alue<"ex&edia3a">
</8!+>
</B!D">
</HTL>
9oate elementele prezentate pot fi reunite ntr%un singur formular sau putei crea formulare diferite,
n funcie de informaiile pe care dorii s le o!inei de la vizitatorii paginii.
,ac dorii s introducei n pagin mai multe formulare, sau elemente de tipuri diferite n cadrul
aceluia"i formular, tre!uie s avei n vedere aspectele care in de alinierea acestora. ' posi!ilitate de
a alinia elementele coninute ntr%un formular este folosirea ta!elelor.
&emplul DD.4 conine elemente de mai multe tipuri ncadrate ntr%un formular unic. /entru alinierea
unora dintre ele am folosit un ta!el. $spectul paginii descrise n acest document este cel din >igura
DD.3.
,%emplul --# 4
<HTL>
<HEAD>
<TITLE>*or%ulareI</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">Alinierea ele%entelor</H1><H+>
<8!+ action<"%ailtoOadresaX777.co%" %ethod<"&ost">
<H9>/o%andati #i33a</H9><#>
<#>/ate &i33a doritiM
<I0#(T na%e<"nr&i33a" )alue<"@" si3e<9 %axlen$th<9><#>
<I0#(T t7&e<"radio" na%e<"%ari%e" )alue<"%are" chec;ed>are<B+>
<I0#(T t7&e<"radio" na%e<"%ari%e" )alue<"%edie">edie<B+>
<I0#(T t7&e<"radio" na%e<"%ari%e" )alue<"nor%ala">0or%ala
<#>To&&in$-uri<#>
<I0#(T t7&e<"chec;box" na%e<"to&&in$" )alue<"sala%">Fala%<B+>
<I0#(T t7&e<"chec;box" na%e<"to&&in$" )alue<"carnati">/arnati<B+>
<I0#(T t7&e<"chec;box" na%e<"to&&in$" )alue<"sunca">Funca<B+>
<I0#(T t7&e<"chec;box" na%e<"to&&in$" )alue<"ciu&erci">/iu&erci<B+>
<I0#(T t7&e<"chec;box" na%e<"to&&in$" )alue<"cea&a">/ea&a<B+>
<I0#(T t7&e<"chec;box" na%e<"to&&in$" )alue<"%asline">asline
<#>
<TABLE Cidth<"H@R">
<T+>
<TD Cidth<"2@R">0u%ele
<TD><I0#(T t7&e<"text" na%e<"nu%e">
<T+>
<TD Cidth<"2@R">Tele*onul
<TD><I0#(T t7&e<"text" na%e<"tele*on">
<T+>
<TD Cidth<"2@R">Adresa
<TD><TEATA+EA na%e<"adresa" roCs<H cols<D@></TEATA+EA>
<T+>
<TD Cidth<"2@R">0u%^rul cartii de credit
<TD><I0#(T t7&e<"&assCord" na%e<"creditcard" si3e<2@>
</TABLE>
<#>
</E0TE+>
<I0#(T t7&e<"sub%it" )alue<"Tri%ite co%anda">
<//E0TE+>
</8!+>
</B!D">
</HTL>
%. =a!idarea date!or
0nul dintre aspectele importante pe care tre!uie s le avei n vedere atunci c#nd folosii formulare n
paginile dumneavoastr este validarea datelor introduse de vizitatorii lor. ;im!ajul 89:; ofer
relativ puine instrumente pentru ndeplinirea acestei sarcini. 9otu"i, avei la dispoziie c#teva
posi!iliti.
>olosii atri!utul %axlen$th atunci c#nd introducei un c#mp 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 tre!uie s permit introducerea a mai mult
de DI caractere, un c#mp de editare care cere introducerea codului po"tal nu tre!uie s permit
introducerea a mai mult de K caractere, etc.
/entru a v asigura c vizitatorul introduce date corecte ntr%un c#mp de editare 2de e&emplu o adres
de mail valid tre!uie s conin o!ligatoriu caracterul (d(6 nu e&ist instrumente 89:;. /entru a
realiza astfel de sarcini sunt necesare scripturi =ava+cript. ?n capitolul Gava*cript vei gsi scripuri
utile care fac posi!ile validrile datelor, nc din momentul introducerii lor.
>olosii de c#te ori este posi!il !utoanele radio, casetele de validare "i meniurile, pentru a simplifica
procesul de introducere a datelor. >ii c#t mai e&plicit, asigurai indicaiile necesare pentru
completarea formularelor, preciz#nd, unde este cazul, dac pot fi selectate mai multe opiuni sau
numai una singur.
'tenie(
$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, c#teva
corecii posi!ile.
0na 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. vitai acest lucru
utiliz#nd scripturi care returneaz utilizatorului formularul completat, av#nd c#mpurile gre"ite
marcate pentru corectare.
@u uitai un amnunt foarte important: informaiile introduse de vizitatori n formulare v sunt
necesare dumneavoastr, pentru a m!unti eficiena "i calitatea site%ului sau chiar pentru a derula
afaceri prin intermediul su. ,e aceea corectitudinea acestor date este esenial.
>acei n a"a fel nc#t vizitatorii site%ului dumneavoastr s completeze u"or "i cu plcere formularele
prezente n pagini.
&. 'e(umat
>ormularele servesc la sta!ilirea unei legturi interactive cu vizitatorii unei pagini -e! "i la
o!inerea de informaii de la ace"tia.
0n formular se introduce n pagin cu ajutorul etichetei <8!+> </8!+>.
?n cadrul acestei etichete pot fi incluse diverse elemente care fac parte din formular:
prin eticheta <I0#(T> pot fi introduse c#mpuri de editare, c#mpuri de tip passord, !utoane radio,
casete de selecie, !utoane de e&pediere, !utoane de anulare "i !utoane o!i"nuite
prin eticheta <FELE/T> pot fi introduse meniuri derulante, fiecare element al meniului fiind introdus
prin eticheta <!#TI!0>
prin eticheta <TEATA+EA> pot fi introduse c#mpuri de editare multilinie.
/entru a specifica unde vor fi trimise datele introduse n formular se folose"te atri!utul action al
etichetei <8!+>. /entru a sta!ili modul n care aceste date sunt transmise se folose"te atri!utul
%ethod al etichetei <8!+>.
>ormularele reprezint partea vizi!il a procesului de interaciune cu vizitatorul paginii -e!. 'dat
ce datele au fost introduse n c#mpurile formularului, ele tre!uie transmise, prelucrate "i stocate, n
funcie de nevoile creatorului paginii. $cest lucru se realizeaz cu ajutorul scripturilor )<I instalate
pe server, despre care vom vor!i n capitolul urmtor.
0. Test
1. Ce atribut indic broserului unde s trimit informaiile din formular9
a6 in&ut
!6 action
c6 %ethod
2. Care dintre aceste valori nu aparine atributului %ethod7
a6 Get
!6 Hre*
c6 #ost
3. Care dintre urmtoarele afirmaii este fals9
a6 /rin eticheta <I0#(T> se pot introduce n formular c#mpuri de editare de tip passord.
!6 /rin eticheta <I0#(T> se pot introduce n formular !utoane radio.
c6 /rin eticheta <I0#(T> se pot introduce n formular meniuri derulante.
. *entru a introduce 6n formular un buton de expediere se folose7te construcia4
a6 <I0#(T t7&e<"reset">
!6 <I0#(T t7&e<"sub%it">
c6 <I0#(T t7&e<"*orCard">
". !ie urmtoarea construcie4
<8!+ action<"%ailtoOadresaX777.co%" %ethod<"&ost">
<I0#(T t7&e<"radio" na%e<"li%ba" )alue<"ro%ana">Li%ba ro%ana
<I0#(T t7&e<"radio" na%e<"li%ba" )alue<"$er%ana">Li%ba $er%ana
<I0#(T t7&e<"radio" na%e<"li%ba" )alue<"%a$hiara">Li%ba %a$hiara
</8!+>
Dac este bifat opiunea $imba romana, care este perechea nume1valoare care va fi transmis
serverului9
a6 "li%ba<Li%ba ro%ana"
!6 "li%ba<ro%ana"
c6 "radio<ro%ana"
$. Care este diferena dintre un cHmp de editare de tip text 7i unul de tip passord9
a6 ?ntr%un c#mp de tip te&t se pot introduce mai multe linii, ntr%unul de tip passord o singur linie.
!6 ?ntr%un c#mp de tip te&t caracterele introduse sunt afi"ate, ntr%unul de tip passord sunt nlocuite
cu asteriscuri.
c6 )#mpul de editare se introduce cu ajutorul etichetei <I0#(T>, c#mpul de tip passord se
introduce cu ajutorul etichetei <FELE/T>.
+. *entru a insera 6ntr#un formular o caset de validare se folose7te eticheta <I0#(T> cu atributul
t7&e setat la valoarea4
a6 "radio"
!6 "chec;box"
c6 "o&tion"
-. Ce reali8ea8 eticheta <FELE/T>9
a6 Introduce un !uton de anulare.
!6 Introduce un meniu derulant.
c6 Introduce o list de casete de validare.
/. $a ce serve7te eticheta <TEATA+EA>9
a6 +ta!ile"te zona din fereastra !rowserului care este rezervat pentru te&t.
!6 Introduce n formular un c#mp de editare multi%linie.
c6 Introduce n formular un c#mp de editare pe o singur linie.
10. Care dintre urmtoarele afirmaii este fals9
a6 ,atele introduse n formular sunt trimise la server, dac este folosit un script )<I.
!6 ,atele introduse n formular sunt trimise la o adres de mail specificat, dac este folosit
comanda %ailtoO
c6 ,atele introduse n formular sunt stocate pe hard%disJ%ul vizitatorului paginii.
/ormulare
-# !6
$# !6
"# c6
1# !6
2# !6
3# !6
4# !6
5# !6
6# !6
-7# c6
Capitolul 1$
Scripturi CG=
/rogramare )<I, scripturi )<I sunt cuvinte care st#rnesc, cel mai adesea, teama. :ultora dintre cei
care doresc s creeze pagini -e! "i nu sunt programatori profesioni"ti aceast zon le apare
misterioas "i dificil de neles. ?n acest capitol vom nva chestiunile fundamentale "i principiile
care guverneaz realizarea acestor scripturi precum "i modul lor de utilizare. Pei constata c, de"i
realizarea unui script este destul de la!orioas "i necesit cunoa"terea aprofundat a cel puin unui
lim!aj de programare 2)RR sau /erl6, nu v va fi deloc greu s nelegei modul cum sunt ele
concepute.
Pestea !un este aceea c, de"i stp#nirea unui lim!aj de programare este !inevenit, nu este a!solut
necesar pentru a putea utiliza scripturi )<I n paginile dumneavoastr. @u este nevoie s creai
propriile dumneavoastr scripturi. /e -e! e&ist mii de scripturi gratuite care pot fi descrcate "i
utilizate conform propriilor necesiti. 9ot ceea ce avei de fcut este s nelegei principiile dup
care sunt realizate, modul lor de funcionare "i maniera n care tre!uie s le setai pentru a le adapta
nevoilor dumneavoastr.
1. Ce este C<7?
+ ncepem prin a preciza ce nu este 8+I: nu este un lim!aj de programare.
)<I, prescurtare de la Common -atea( "nterface, este un protocol standard de comunicare ntre
documentele -e! "i aplicaiile localizate pe serverul -e!.
*cripturile 8+I sunt programe care respect acest protocol 2un protocol este un set de reguli6. 0n
script )<I este, deci, un program care comunic ntr%un anumit mod cu pagina dumneavoastr.
&istena acestui protocol de comunicare ntre programele de pe server "i documentele -e! permite
crearea unor pagini interactive "i dinamice, lucru care nu poate fi fcut folosind doar 89:;.
$tunci c#nd !rowserul solicit un script )<I aflat pe server, serverul lanseaz n e&ecuie scriptul "i
i transmite acestuia headerele 899/ de cerere primite de la !rowser. ,up ce e&ecuia scriptului se
ncheie, rezultatele sunt transmise serverului, care formateaz headerele de rspuns "i le transmite
!rowserului pentru ca acesta s afi"eze rezultatele. ' alt posi!ilitate este ca scriptul s conin
instruciuni prin care headerele de rspuns sunt configurate chiar de script "i transmise de acesta
direct !rowserului.
Indiferent dac solicit un document -e! sau un script, !rowserul tre!uie s cunoasc locaia
serverului -e! "i numele fi"ierului solicitat. $ceast informaie i este transmis !rowserului prin
intermediul atri!utului action al etichetei <8!+> care prime"te drept valoare adresa 0.; a
scriptului stocat pe server. ,e o!icei, scripturile )<I sunt stocate pe server ntr%un director special
destinat lor, care se nume"te c%i)bin.
2. Trans,eru! date!or
$"a cum am vzut n capitolul anterior, datele pe care dorim s le o!inem de la vizitatorul paginii
sunt colectate prin intermediul formularelor. ,atele astfel colectate sunt transmise de ctre !rowser la
serverul pe care este instalat scriptul )<I prin intermediul headerelor 899/ de cerere.
)ele mai importante headere 899/ de cerere sunt (et "i ,o"t. /rin intermediul atri!utului %ethod
al etichetei <8!+> este specificat ce tip de header 899/ de cerere este utilizat pentru a transfera
datele la server. ,ac metoda folosit este Get, datele sunt transmise prin intermediul adresei 0.;.
,ac folosii metoda #ost datele sunt transmise su! forma unui fi"ier separat.
ste recomandat folosirea metodei #ost atunci c#nd volumul de date transmise este mare
2dep"e"te DCGK de octei, lungimea ma&im a unui 0.;6. ,up ce metoda de transmitere este
sta!ilit, !rowserul creeaz un header 899/ de cerere prin care este identificat localizarea scriptului
pe server "i apoi transmite headerul la server. +erverul recepioneaz headerul de cerere "i apeleaz
scriptul )<I.
'dat datele ajunse la server, scriptul este lansat n e&ecuie iar datele i sunt transmise acestuia prin
intermediul unui tip special de varia!ile numite variabile de mediu 2dac folosii metoda Get6 sau
prin intermediul fi"ierului standard de intrare 2dac folosii metoda #ost6.
+criptul )<I e&ecut sarcinile pentru care a fost conceput "i o!ine anumite rezultate care urmeaz a
fi transmise !rowserului prin intermediul unor headere 899/ de rspuns. ,e o!icei, scriptul
configureaz un singur header de rspuns, "i anume /ontent-T7&e. $cest header comunic
!rowserului tipul de date care i vor fi returnate: documente 89:;, imagini sau alt tip de fi"iere.
+erverul adaug "i el headere 899/ de rspuns suplimentare, apoi str#nge toate rezultatele "i
headerele de rspuns ntr%un pachet care este transmis !rowserului. *rowserul l recepioneaz "i
afi"eaz informaiile primite n modul descris de headerele de rspuns.
3. )xecuia scriptu!ui
)e face scriptul )<I dup ce este lansat n e&ecuie7 .spunsul este simplu: e&ecut sarcinile pentru
care a fost construit. +arcinile pe care le poate realiza un script sunt diverse "i numeroase. Iat c#teva
e&emple:
manipularea informaiilor introduse prin intermediul formularelor
manipularea hrilor de imagini
generarea contoarelor care monitorizeaz numrul de accesri ale paginii 2hit counters6
construirea de motoare de cutare
administrarea licitaiilor on#line
crearea de aplicaii interactive cum ar fi forumurile sau camerele de chat
crearea "i manipularea !azelor de date
)um am mai spus, scrierea unui script care ndepline"te astfel de sarcini nu este simpl. /entru a
putea concepe un script este necesar cunoa"terea aprofundat a unui lim!aj de programare. +unt
utilizate lim!aje variate pentru realizarea scripturilor: /erl, ) sau )RR, Pisual *asic, etc. ,escrierea
acestor lim!aje "i a principiilor de programare dep"e"te cu mult o!iectul acestei cri. ,e altfel, a"a
cum spuneam, pentru a construi o pagina -e! interactiv cu ajutorul scripturilor )<I, nu este
necesar s le creai chiar dumneavoastr. /e -e! e&ist foarte multe site%uri care pun la dispoziia
vizitatorilor mii de scripturi gratuite. ,e o!icei ele sunt nsoite de instruciuni de instalare "i
utilizare. /utei alege dintre acestea pe acelea care satisfac cerinele dumneavoastr. 9otu"i, pentru a
face o alegere n cuno"tin de cauz precum "i pentru a putea s facei modificrile necesare
instalrii "i funcionrii scriptului, avei nevoie s cunoa"tei c#teva noiuni legate de structura unui
script )<I.
4. Structura unui script
+tructura unui script )<I conine urmtoarele seciuni:
citirea datelor introduse prin intermediul formularului
prelucrarea datelor "i efectuarea sarcinilor impuse de programator
afi"area rezultatelor.
Citirea datelor
0nul dintre elementele de !az cu care lucreaz un script l constituie variabilele de mediu.
Paria!ilele de mediu sunt o categorie special de varia!ile, folosite de server n procesul de e&ecuie
al scriptului. $ceste varia!ile conin informaii despre server, despre !rowser "i despre datele
introduse de utilizator. @umrul varia!ilelor de mediu este destul de mare, dar e&ist c#teva care au o
importan special pentru script.
$cestea sunt:
)E7+E$T>METHOD
7+E)Y>$T)I!(
-O!TE!T>LE!(TH
Paria!ila de mediu )E7+E$T>METHOD poate avea cele dou valori despre care am mai amintit: Get
"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 perechi
nume/valoare.
Paria!ila de mediu 7+E)Y>$T)I!( este folosit pentru a reine datele de intrare n cazul folosirii
metodei Get iar varia!ila -O!TE!T>LE!(TH este folosit pentru a specifica lungimea "irului de
caractere citit din fi"ierul de intrare, n cazul folosirii metodei #ost.
Transmiterea datelor prin metoda (et
)#nd serverul folose"te metoda (et datele introduse n formular sunt adugate la sf#r"itul adresei
0.; 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 c#mpuri de editare numite "nu%e" "i "&renu%e". )u alte
cuvinte codul formularului dumneavoastr va arta astfel:
<8!+ action<"c$i-bin/scri&t.c$i" %ethod<"Get">
<I0#(T t7&e<"text" na%e<"nu%e">Introduceti nu%ele
<I0#(T t7&e<"text" na%e<"&renu%e">Introduceti &renu%ele
<I0#(T t7&e<"sub%it">
</8!+>
+ mai presupunem c vizitatorul introduce n c#mpul "nu%e" valoarea "#o&escu" iar n c#mpul
"&renu%e" valoarea "Ion" "i c adresa 0.; a scriptului nostru este www.html.com/cgi%
!in/scriptulmeu.cgi/
$tunci serverului i este transmis urmtoarea adres 0.;:
htt&O//CCC.ht%l.co%/c$i-bin/scri&tul%eu.c$i/Mnu%e<#o&escuT&renu%e<Ion
1irul de caractere de dup semnul de ntre!are este depus n varia!ila de mediu S(E+"?FT+I0G.
Transmiterea datelor prin metoda ,o"t
:etoda ,o"t este cea mai folosit n transmiterea datelor. $tunci c#nd datele sunt trimise prin
aceast metod, ele sunt furnizate scriptului prin intermediul &iFierului standard de intrare,
*T>IN. /entru a preciza scriptului lungimea "irului de caractere 2numrul de octei6 pe care l are de
citit, aceasta este reinut n varia!ila de mediu /!0TE0T?LE0GTH.
Indiferent de metoda folosit, dup citirea datelor scriptul tre!uie s le decodifice, adic s elimine
din "irul de caractere primit toate caracterele care nu au fost introduse de utilizator: (X(, (O( "i altele.
,up citirea "i decodificarea datelor scriptul e&ecut instruciunile de procesare a lor "i pregte"te
rspunsul pentru server.
64iarea re?ultatelor
?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 !un sf#r"it, serverului i este prezentat un mesaj de eroare,
care tre!uie 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 2aceasta este una dintre cele mai comune utilizri ale scripturilor6. ,up
ce vizitatorul a introdus datele iar scriptul "i%a ncheiat e&ecuia, este !ine s afi"eze 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 tre!uie s%i fie oferit un mesaj prin care este informat
despre acest lucru "i, n plus, despre posi!ilitatea de a remedia eroarea.
:esajele privind rezultatele e&ecuiei pot fi trimise de script serverului, care formateaz headerele
899/ de rspuns, sau scriptul poate formata el nsu"i headerele "i poate trimite rezultatele direct la
!rowser.
&ist trei tipuri fundamentale de headere de rspuns:
D. -ontent?T:&e
G. Location
I. $tat'"
-ontent?t:&e
*rowserul dumneavoastr prime"te headere de tipul /ontent-T7&e ori de c#te ori prime"te de la
server un document 89:;, o imagine sau orice alt tip de fi"ier. Indiferent de natura fi"ierului
transmis de la server la !rowser, serverul va asocia fi"ierului acest header pentru a comunica
!rowserului tipul fi"ierului trimis.
9ipurile de fi"iere care pot fi transmise !rowserului sunt asociate su! numele de tipuri MIM,
2Multipurpose "nternet Mail 5xtensions6. )lasificarea se !azeaz pe coninutul fi"ierului trimis. Iat
cele "apte tipuri :I: fundamentale:
9e&t
:ultipart
:essage
$pplication
Image
$udio
Pideo
>iecare dintre aceste tipuri are un numr de su!%tipuri. 8eaderul /ontent-T7&e specific at#t tipul
c#t "i su!tipul :I: al fi"ierului trimis. Iat c#teva e&emple:
% 9e&t/89:;
% 9e&t/plain
% Image/gif
% Image/jpeg
Location
$cest header conine adresa 0.; a documentului pe care scriptul dore"te s%l trimit ca rspuns ctre
!rowser. ,e e&emplu, dac rspunsul pe care dorii s%l primeasc vizitatorul paginii dup
transmiterea datelor este un document 89:; care se nume"te multumesc+html atunci scriptul va
conine un header ca acesta:
LocationO %ultu%esc.ht%l
urmat de o linie li!er. ?n acest mod !rowserul este redirecionat ctre 0.;%ul documentului
respectiv. ?n situaia c#nd folosii headerul Location pentru a afi"a rspunsul, scriptul nu va mai
include headerul de rspuns
/ontent-T7&e.
$tat'"
8eaderul Ftatus returneaz ctre !rowser un cod format din trei cifre mpreun cu un te&t
e&plicativ. $i vzut de foarte multe ori acest header n situaiile c#nd cererea trimis de !rowser nu a
fost ndeplinit, iar documentul solicitat nu a putut fi furnizat de ctre server. Iat c#teva dintre cele
mai cunoscute coduri de status:
8%% 9 :ad re;uest b apare n situaia c#nd sinta&a headerului 899/ de cerere a fost eronat
8%# 9 <nauthori=ed b apare c#nd, pentru a o!ine documentul solicitat, sunt necesare anumite
privilegii de acces
8%> 9 Forbidden b apare c#nd serverul refuz accesul la document
8%8 9 File ?ot Found b apare n situaia c#nd serverul nu poate gsi documentul solicitat
#. )xemp!e de scripturi
;im!ajul cel mai folosit pentru scrierea scripturilor este /erl. )hiar dac nu cunoa"tei acest lim!aj,
dac avei totu"i cuno"tine minime de programare, nu v va fi greu s nelegei structura scripturilor
prezentate n continuare.
,in pcate, spre deose!ire de documentele 89:; care pot fi scrise ntr%un simplu editor de te&t "i
apoi vizualizate cu ajutorul !rowserului, cu scripturile lucrurile nu mai stau a"a.
/erl este un lim!aj 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 tre!uie s ai! instalat un
interpretor de /erl. :ajoritatea serverelor -e! 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, !a mai mult, dac dorii s v transformai propriul calculator ntr%un server -e! 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 c#teva e&emple simple de scripturi /erl din care v putei face o idee despre
structura unui script "i sinta&a lim!ajului /erl. )el mai simplu script este clasicul e&emplu ('ello,
orld J(prezentat n &emplul DG.D. $cest script ilustreaz modul n care se realizeaz configurarea
headerului de rspuns /ontent-T7&e "i afi"area unui document 89:;.
,%emplul -$# -
1 >,/usr/bin/&erl
2
9 &rint "/ontent-T7&eO text/ht%lanan"U
:
D &rint "<HTL>an"U
H &rint "<HEAD>an"U
I &rint "<TITLE>Hello 'orld ,</TITLE>an"U
P &rint "</HEAD>an"U
Q &rint "<B!D">an"U
1@ &rint "<H1>Hello 'orld ,</H1>an"U
11 &rint "<#>an"U
12 &rint "<H9>Ha)e a nice da7</H9>an"U
19 &rint "</B!D">an"U
1: &rint "</HTL>an"U
;iniile scriptului nu sunt, n general, numerotate, numerotarea servind aici doar la referirea lor mai
u"oar. $cest e&emplu simplu realizeaz afi"area pe ecran a te&tului (Hello World @(, "i a mesajului
(Ha6e a nice day(. @u e&ist o etap de citire a datelor, deoarece nu e&ist date de intrare.
;inia D conine calea spre interpretorul /erl aflat pe server. ,ac sistemul su! care lucreaz serverul
este 0@I_, semnul M tre!uie ndeprtat. ?n linia a I%a este configurat headerul 899/ de rspuns,
/ontent-T7&e. $"a cum o!servai, documentul care va fi transmis !rowserului este de tip te&t, "i
anume un document 89:;.
+ecvena de caractere "an" care se repet la finalul fiecrei linii se nume"te secven escape. .olul
acesteia este s realizeze, la afi"are, trecerea pe r#ndul urmtor. /e linia n care este definit headerul
/ontent-T7&e este o!ligatorie prezena a dou secvene escape.
9oate instruciunile scriptului sunt instruciuni de afi"are. /rin intermediul lor, scriptul descrie
!rowserului pagina -e! pe care urmeaz s o afi"eze. +tructura paginii conine, dup cum vedei,
toate seciunile necesare: eticheta de deschidere a documentului: <HTL>= antetul: <HEAD> "i
corpul documentului: <B!D">.
,ac dorii s testai funcionarea scriptului, scriei%l n @otepad "i salvai%l su! numele hello+pl
2e&tensia #pl indic un program scris n lim!ajul /erl. +e mai poate folosi "i e&tensia #bgi6. $poi
instalai scriptul n directorul cgi#bin al serverului dumneavoastr.
,up e&ecutarea scriptului, pagina de rspuns arat ca n >igura DG.D
&emplul urmtor realizeaz preluarea datelor introduse de vizitator prin intermediul unui formular
"i afi"area lor pe ecran. >ormularul pentru introducerea datelor prezentat n &emplul DG.G conine
doar casete de te&t, n care vor fi introduse numele, prenumele "i adresa de mail. $tri!utul action al
etichetei <8!+> trimite la scriptul script>+pl aflat n directorul cgi#bin al serverului. $spectul
formularului este cel din >igura DG.G
,%emplul -$# $
<HTL>
<HEAD>
<TITLE>c$i2</TITLE>
</HEAD>
<B!D">
<8!+ %ethod<"#!FT" action<"c$i-bin/scri&t2.&l">
0u%eleO
<I0#(T t7&e<"text" na%e<"nu%e"><B+>
#renu%eleO
<I0#(T t7&e<"text" na%e<"&renu%e"><B+>
Adresa de e%ailO
<I0#(T t7&e<"text" na%e<"e%ail"><B+>
<I0#(T t7&e<"sub%it" )alue<"Tri%ite">
</8!+>
</B!D">
</HTL>
'!servai c datele sunt transmise la scriptul script>+pl aflat n directorul
cgi#bin, prin intermediul metodei #ost. &emplul DG.I ilustreaz modul de construire al scriptului
script>+pl.
,%emplul -$# "
1 >,/usr/bin/&erl
2
9 > #lasarea datelor trans%ise &rin %etoda #ost in )ariabile
:
D read(FTDI0= bbu**er= bE0Jc`/!0TE0T?LE0GTH`d6U
H X&airs<s&lit(/T/= bbu**er6U
I *oreach b&air (X&airs6
P c
Q (bna%e= b)alue6<s&lit(/</= b&air6U
1@ b)alue<e tr/E/ /U
11 b)alue<e s/R(4a-*A-8@-Q54a-*A-8@-Q56/&ac;("/"= hex(b166/e$U
19 b8!+cbna%ed<b)alueU
1: d
1D >a*isarea re3ultatului
1H
1I &rint "/ontent-t7&eO text/ht%lanan"U
1P
1Q &rint "<HTL>an"U
2@ &rint "<HEAD>an"U
21 &rint "<TITLE>ultu%esc,</TITLE>an"U
22 &rint "</HEAD>an"U
29 &rint "<B!D">an"U
2: &rint "<H1>ultu%esc,</H1>an"U
2D &rint "<B+>an"U
2H &rint "<H:>Datele introduse suntO</h:>an"U
2I &rint "<B+>an"U
2P &rint "<H9>b8!+c`nu%e`d b8!+c`&renu%e`d</H9>an"U
2Q &rint "<H9>b8!+c`e%ail`d</H9>an"U
9@ &rint "</B!D">an"U
91 &rint "</HTL>an"U
+e impun c#teva e&plicaii. :ai nt#i, o!servai pe liniile D, I "i DH prezena caracterului M. $cesta
este modul de a introduce comentarii ntr%un program /erl. )omentariile sunt e&trem de utile, mai
ales la scripturi. 0n script necomentat este foarte greu de utilizat. )a "i n cazul comentariilor
introduse n documentele 89:;, acestea sunt ignorate la e&ecuie.
/rima seciune a scriptului realizeaz citirea datelor. ,eoarece acestea au fost transmise prin metoda
#ost, o!servai c citirea se face din fi"ierul standard de citire, +9,I@. ?ntre liniile H "i DK se
realizeaz citirea, decodificarea datelor "i plasarea lor n varia!ilele corespunztoare. +ecvena dintre
liniile DB "i ID reprezint partea de afi"are a rezultatelor. )a "i n e&emplul anterior, o!servai c linia
n care se face formatarea headerului de rspuns /ontent-T7&e necesit prezena a dou secvene
escape "anan".
+ presupunem c datele introduse n formular sunt:
nume % Ionescu
prenume % :aria
adresa de mail % ionmardFahoo.com.
$tunci pagina generat de script va arata ca n >igura DG.I

$pelul scripturilor nu se face numai prin intermediul formularelor. +e poate realiza "i prin
intermediul imaginilor sau al legturilor. /rezentm n continuare o pagina -e! care apeleaz
scriptul ip+pl prin intermediul unei legturi. +criptul realizeaz afi"area adresei I/ a computerului pe
care este instalat.

&emplul DG.K prezint documentul 89:; n care este apelat scriptul. $spectul paginii este cel din
>igura DG.K
,%emplul -$# 1
<HTL>
<HEAD>
<TITLE>c$i:</TITLE>
</HEAD>
<B!D">
<8!0T *ace<"arial" si3e<":">
#entru a a*la adresa du%nea)oastra de I# a&asati
<A hre*<"c$i-bin/i&.&l"> aici</A>
</8!0T>
</B!D">
</HTL>
+criptul ip+pl folose"te varia!ila de mediu +E!TE?ADD+ pentru a o!ine adresa I/. ?n &emplul DG.H
este prezentat scriptul ip+pl.
,%emplul -$# 2
1 >,/usr/bin/&erl
2
9 &rint "/ontent-T7&eO text/ht%lanan"U
:
D &rint "<HTL>an"U
H &rint "<HEAD>an"U
I &rint "<TITLE>c$i9</TITLE>an"U
P &rint "</HEAD>an"U
Q &rint "<B!D">an"U
1@ &rint "<#>an"U
11 &rint "<H9>Adresa I# a co%&uterului d)s. esteO
bE0Jc+E!TE?ADD+d </H9>an"U
12 &rint "</B!D">an"U
19 &rint "</HTL>an"U
;a apsarea linJ%ului din documentul 89:; este apelat scriptul, care afi"eaz pagina de rspuns din
>igura DG.H
vident, dac vei rula scriptul pe alt computer, adresa I/ o!inut va fi diferit. )#nd scriptul este
apelat printr%un linJ nu e&ist posi!ilitatea de a i se transmite date.
%. 7nsta!area interpretoru!ui 5er! i a ap!icaiei 5>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 pu!licrii pe -e! tre!uie s avei instalat
un interpretor /erl. /utei descrca "i instala interpretorul $ctive /erl vizit#nd adresa:
http*++www.gossland.com+course+install.html
;a aceea"i adres putei gsi "i aplicaia :icrosoft /ersonal -e! +erver 2/-+6 care este furnizat de
:icrosoft n pachetele -indows E3 "i -indows GCCC. .ecomandm descrcarea aplicaiei de la
adresa menionat, care are avantajul c include o corecie a unui bug de instalare e&istent n
versiunea oficial :icrosoft.
'tenie(
:icrosoft /ersonal -e! +erver se poate instala pe computerul personal av#nd rolul de aplicaie server.
'dat instalat, computerul dumneavoastr va funciona ntocmai ca un server -e!, astfel nc#t v vei
putea testa funcionarea scripturilor instalate precum "i funcionarea ntregului site.
,in pcate, :icrosoft nu furnizeaz o aplicaie server similar "i n pachetele -indows :ilenium "i
-indows _/ iar aplicaia /-+ nu funcioneaz dec#t pe sistemele -indows E3 "i GCCC.
;a adresa indicat vei gsi ndrumri precise "i complete asupra tuturor pa"ilor pe care i avei de
urmat pentru a instala at#t interpretorul /erl c#t "i aplicaia /ersonal -e! +erver. ?n plus, site%ul
respectiv conine "i un foarte !un curs de iniiere n lim!ajul /erl n lim!a englez.
&. 'e(umat
)<I este un protocol de comunicare face legtura dintre scripturile aflate pe serverul -e! "i
documentele 89:;. 0n script )<I este o aplicaie care respect acest protocol.
/rintre cele mai folosite scripturi )<I sunt cele care servesc la procesarea informaiilor introduse
ntr%un formular.
9ransferul datelor de la formular la serverul pe care se afl scriptul se face printr%una dintre cele dou
metode: Get sau #ost.
,up ce datele au fost transmise la server, scriptul le cite"te "i le decodific, le prelucreaz conform
instruciunilor sale "i transmite un rspuns ctre !rowser.
*rowserul afi"eaz rezultatele trimise de script n conformitate cu headerele de rspuns incluse n
pachetul de date transmis.
Capitolul 1'
Ea-aScript
1. Ce este ?a"aScript?
=ava+cript este un limba! de programare orientat pe o!iecte, care v permite s oferii paginilor
dumneavoastr un caracter mai dinamic "i interactiv. ,ac ai parcurs prima parte a crii "i avei
cuno"tine minime de programare, nu vei avea dificulti n nelegerea modului n care funcioneaz
acest lim!aj.
'tenie(
=ava+cript nu este acela"i lucru cu lim!ajul =ava. ,e fapt, de"i numele sunt asemntoare, sunt dou
lim!aje foarte diferite. +pre deose!ire de =ava, care este un lim!aj orientat pe o!iecte, comple&,
asemntor cu lim!ajul )RR, =ava+cript este mult mai simplu "i mai u"or de folosit. ?n timp ce =ava este
un lim!aj pentru programatori, =ava+cript este destinat neprofesioni"tilor care doresc s m!unteasc
aspectul "i funcionalitatea paginilor de -e!.
=ava+cript a fost dezvoltat de @etscape )orporation pentru a fi utilizat n !rowserul @etscape
@avigator. 0n script =ava+cript poate fi plasat direct n pagina -e!, fiind e&ecutat de !rowser
mpreun cu documentul -e! care%l conine. *rowserul Internet &plorer 2versiunile mai noi dec#t
I I.C6 e&ecut "i el corect scripturile =ava+cript.
=ava+cript este un lim!aj interpretat, ca "i /erl, dar n cazul su nu tre!uie s v mai facei griji n
privina instalrii unui interpretor deoarece acesta este inclus n !rowser. )odul surs poate fi inclus
n pagina -e! sau poate fi pus ntr%un fi"ier separat care este referit din pagin.
)a "i n cazul scripturilor )<I, nici n acest caz nu este a!solut necesar cunoa"terea lim!ajului
=ava+cript pentru a putea insera "i utiliza cu succes astfel de scripturi. &ist un numr impresionant
de scripturi gata de utilizare, care se pot integra cu u"urin 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 -e! n dou moduri:
prin intermediul etichetei <$-)I,T> </$-)I,T>
prin intermediul unei proceduri eveniment
Iat un e&emplu foarte simplu n care n document este inclus un script care afi"eaz n pagin te&tul
(*una ziuaQ( prin intermediul etichetei <F/+I#T>. $spectul acestei pagini este cel din >igura DI.D.
,%emplul -"# -
<HTL>
<HEAD>
<TITLE>Ga)ascri&t1</TITLE>
</HEAD>
<B!D">
<H1>#ri%ul exe%&lu Va)aFcri&t</H1><H+>
<F/+I#T lan$ua$e<"Va)aFcri&t">
docu%ent.Crite("Buna 3iua,"6
</F/+I#T>
</B!D">
</HTL>
0nul dintre atri!utele etichetei <F/+I#T> este lang'age prin care este specificat lim!ajul n care
este scris scriptul, n cazul acesta valoarea atri!utului fiind "Va)aFcri&t".
' alt modalitate de a include de a include un script n pagin este salvarea acestuia ca un fi"ier
e&tern "i apelarea sa prin intermediul atri!utului "rc al etichetei <F/+I#T>.
?n e&emplele de scripturi care vor urma vei o!serva diverse moduri n care pot fi incluse n paginile
-e! scripturi =ava+cript.
@u vom intra n amnunte privind sinta&a lim!ajului, deoarece aceasta dep"e"te su!iectul acestei
cri. 9otu"i, pentru a putea folosi judicios un script =ava+cript tre!uie s avei o imagine despre
elementele eseniale cu care lucreaz =ava+cript, o!iectele "i evenimentele.
@biecte
0n obiect este un nou tip de date, care reune"te su! aceea"i denumire at#t datele c#t "i funciile care
le prelucreaz. ,atele se numesc proprietile o!iectului iar funciile se numesc metodele
o!iectului.
/entru a e&emplifica aceste concepte, s presupunem c dorim s construim un o!iect care s
reprezinte o carte de vizit, pe care l vom numi /ard. $cest o!iect va avea urmtoarele proprieti:
% nume
% adres
% telefon
/entru a defini un o!iect se folose"te o funcie numit constructor. ?n e&emplul nostru, funcia
constructor a o!iectului /ard va arata astfel:
*unction /ard(nu%= adr= tel6
c
this.nu%e<nu%U
this.adresa<adrU
this.tele*on<telU
d
?n acest moment, constructorul o!iectului /ard nc nu este complet, el conine numai proprietile
o!iectului.
$cum s construim "i o metod care s lucreze cu acest o!iect. ,eoarece dorim s tiprim crile de
vizit pe care le vom realiza cu ajutorul acestui o!iect, vom crea o funcie care va tipri proprietile
o!iectului, numit #rint/ard(6.
*unction #rint/ard(6
c
docu%ent.Crite("0u%eleO "= this.nu%e= "an"6U
docu%ent.Crite("AdresaO "= this.adresa= "an"6U
docu%ent.Crite("Tele*onulO "= this.tele*on= "an"6U
d
$cum putem scrie definiia complet a o!iectului nostru:
*unction /ard(nu%= adr= tel6
c
this.nu%e<nu%U
this.adresa<adrU
this.tele*on<telU
this.#rint/ard<#rint/ardU
d
+ trecem, acum, la folosirea unui o!iect. /entru a crea un o!iect concret, adic o instan a
o!iectului )ard, se folose"te cuv#ntul cheie neC. 0rmtoarea instruciune construie"te o instan a
o!iectului /ard, care se nume"te ana:
ana<neC /ard ("Ana unteanu"= "Ftr. A&usului= nr.2= Bucuresti"=
"H1H29:D"6
'dat ce a fost creat o nou instan a o!iectului /ard, metoda #rint/ard poate fi folosit astfel:
ana.#rint/ard(6
1i acum, s punem toate aceste secvene de cod laolalt "i s folosim o!iectul ntr%o pagin -e!,
pentru a afi"a mai multe cri de vizit. &emplul DI.G realizeaz acest lucru. $spectul paginii
descrise n document este cel din >igura DI.G.
,%emplul -"# $
<HTL>
<HEAD>
<TITLE>Ga)ascri&t2</TITLE>
<F/+I#T lan$ua$e<"Va)aFcri&t">
*unction #rint/ard(6
c
docu%ent.Crite("<B>0u%eleO</B> "= this.nu%e= "<B+>"6U
docu%ent.Crite("<B>AdresaO</B> "= this.adresa= "<B+>"6U
docu%ent.Crite("<B>Tele*onulO</B> "= this.tele*on= "<H+>"6U
d
*unction /ard(nu%= adr= tel6
c
this.nu%e<nu%U
this.adresa<adrU
this.tele*on<telU
this.#rint/ard<#rint/ardU
d
</F/+I#T>
</HEAD>
<B!D">
<H1 ali$n<"center">/rearea obiectelor</H1>
Ince&utul scri&tului<H+>
<F/+I#T lan$ua$e<"Va)aFcri&t">
// /rearea a trei obiecte noi
ana<neC /ard ("Ana unteanu"= "Ftr. A&usului= nr.2= Bucuresti"=
"H1H29:D"6
ion<neC /ard("Ion #o&escu"= "Ftr. Worilor nr.1= #loiesti"=
":DHIPQ"6U
radu<neC /ard("+adu Ionescu"= "Ftr. 0o&tii= nr.9= #itesti"=
"2@12@2"6U
// A*isarea lor
ana.#rint/ard(6U
ion.#rint/ard(6U
radu.#rint/ard(6U
</F/+I#T>
F*arsitul scri&tului
</B!D">
</HTL>
/utei o!serva modul n care a fost inclus scriptul n pagina -e!. $stfel, definiia scriptului este
plasat n antetul documentului 89:;, 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.
3venimente
?n continuare vom discuta despre un alt concept fundamental cu care lucreaz =ava+cript, "i anume
evenimentul. 0n eveniment este o aciune care survine la un moment dat "i n urma creia este
declan"at e&ecuia unei anumite pri din program. 'ri de c#te ori vizitatorul face clicJ pe o
legtur, de e&emplu, c#nd introduce un te&t sau chiar c#nd trece cu mouse%ul deasupra unei zone a
paginii, survine un eveniment la care scriptul reacioneaz gener#nd un rspuns.
Iat care sunt tipurile de evenimente cu care lucreaz =ava+cript:
Tabel -"# -
,veniment >escriere
onAbort
$pare c#nd utilizatorul renun la ncrcarea unei
imagini
onBlur
$pare c#nd un o!iect din pagin pierde focusul
on/han$e
$pare c#nd un c#mp de editare este modificat de
utilizator 2c#nd se introduce un te&t6
on/lic;
$pare c#nd utilizatorul face clicJ pe un element
onError
$pare c#nd un document sau o imagine nu se
ncarc corect
on8ocus
$pare c#nd un element prime"te focusul
onLoad
$pare c#nd o pagin sau o imagine "i termin
ncrcarea
onouse!)er
$pare c#nd cursorul mouse%ului se plim!
deasupra unui element
onouse!ut
$pare c#nd cursorul mouse%ului prse"te
elementul
onFelect
$pare c#nd utilizatorul selecteaz un te&t
onFub%it
$pare c#nd este apsat un !uton de tip +u!mit
on(nload
$pare c#nd utilizatorul prse"te 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 etichetei <F/+I#T> ci ele sunt atri!ute ale
celorlalte etichete. ,e e&emplu, iat o legtur care include o procedur eveniment:
<A hre*<"htt&O//CCC.a%a3on.co%"
onouse!)er<" CindoC.status<f/ea %ai %are librarie )irtualafU return
true"> /lic; aici</A>
'!servai c ntreaga procedur eveniment care rspunde la evenimentul ouse!)er este inclus n
eticheta <A>. +unt specificate dou instruciuni care se e&ecut n momentul c#nd cursorul mouse%
ului este plasat deasupra legturii. /rima afi"eaz un mesaj n !ara de status a ferestrei, urmtoarea
returneaz valoarea true, pentru a mpiedica "tergerea mesajului. :ai o!servai c mesajul care va
fi afi"at este delimitat de apostrofuri.
,ac procedura eveniment este mai e&tins, includerea ei n ntregime ntr%o eticheta devine
nepractic. ?n aceast situaie, este mai avantajos s construim o funcie care s trateze evenimentul.
>uncia este definit n seciunea <HEAD> a documentului, iar n corpul documentului este apelat ca
procedur eveniment. ,e e&emplu, s presupunem c am construit o funcie eveniment numit
/iteste(6. $tunci ea poate fi apelat astfel:
<A hre*<">cu&rins" onouse!)er<"/iteste(6U">er$i la /u&rins</A>
?n momentul c#nd 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 ncheiat dar
nainte ca aceasta s fie afi"at. /e de alt parte, scripturile stocate ca fi"iere separate sunt evaluate
naintea tuturor scripturilor in#line 2adic a celor incluse n pagin6. >unciile definite n cadrul
scripturilor nu sunt e&ecutate automat la ncrcarea paginilor ci a!ia atunci c#nd acestea sunt apelate,
fie prin eticheta <F/+I#T> fie printr%o procedur eveniment.
,ac ai vzut vreodat un script =ava+cript ntr%o pagin -e!, poate ai remarcat un lucru aparent
ciudat: ntregul script este inclus ntre etichetele 89:; de comentariu:
<,- - co%entariu - ->.
:otivul este faptul c e&ist !rowsere care nu recunosc "i nu pot e&ecuta scripturile =ava+cript. ,ac
un document -e! care conine cod =ava+cript este ncrcat ntr%un asemenea !rowser, n loc ca
scriptul s fie e&ecutat, este afi"at n pagin ntregul cod, ceea ce nu este de dorit. $"a dup cum "tii,
comentariile sunt ignorate de !rowser, astfel c includerea codului =ava+cript ntre etichetele de
comentariu va duce la ignorarea acestei pri a documentului. &cepie fac !rowserele 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:
<F/+I#T lan$ua$e<"Va)aFcri&t">
<, - -
/od Va)aFcri&t
// - ->
</F/+I#T>
$m nvat p#n acum cum poate fi inclus codul =ava+cript ntr%un document 89:;. + vedem, mai
departe, cum putem folosi scripturile =ava+cript pentru a face paginile mai atractive "i a le m!unti
funcionalitatea.
4. Ce se poate ,ace cu ?a"aScript?
?n continuare sunt prezentate c#teva e&emple de scripturi cu ajutorul crora se pot realiza lucruri care
dep"esc posi!ilitile lim!ajului 89:;, cum ar fi afi"area datei curente n pagina dumneavoastr,
deschiderea unei ferestre pop%up, afi"area unui mesaj n !ara de status a ferestrei !rowserului,
afi"area aleatoare a unor mesaje n pagin, imagini care "i schim! aspectul la trecerea mouse%ului,
"i, una dintre cele mai utile aplicaii =ava+cript, validarea formularelor.
64iarea unui me.aA n bara de .tatu.
$cest e&emplu ilustreaz modul cum se poate afi"a un mesaj n !ara de status 2aflat la !aza ferestrei
!rowserului6 la trecerea cu mouse%ul peste un anumit element din pagin. ,e o!icei, acest element
este un linJ sau o imagine. ?n &emplul DI.I, elementul este o imagine. $spectul paginii care conine
scriptul este cel din >igura DI.I.
,%emplul -"# "
<HTL>
<HEAD>
<TITLE>Ga)ascri&t9</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">esaG in status bar</H1><H+>
<H9>esaGul a&are la &lasarea %ouse-ului &e i%a$ine</H9>
<IG src<"../I%a$ini/ti$er.$i*" onouse!)er<"CindoC.status<`Acesta
este un ti$ru`U
return true" onouse!ut<"CindoC.status<` `Ureturn true">
</B!D">
</HTL>
64iarea datei curente n pa%in&
+criptul urmtor preia data sistemului de operare al utilizatorului "i o afi"eaz n pagin. vident,
dac data sistemului este setat incorect, ea va aprea n pagin ca atare. &emplul DI.K construie"te
o pagin -e! care conine un astfel de script, aspectul paginii fiind redat n >igura DI.K.
,%emplul -"# 1
<HTL>
<HEAD>
<TITLE>Ga)ascri&t:</TITLE>
<F/+I#T lan$ua$e<"Ga)ascri&t">
<,--
)ar 3i= data= luna
a3i<neC Date(6
i*(a3i.$etDa7(<<@6c 3i<"Du%inica= " d
else i*(a3i.$etDa7(6<<16c 3i<"Luni= " d
else i*(a3i.$etDa7(6<<26c3i<"arti= "d
else i*(a3i.$etDa7(6<<96c3i<"iercuri= "d
else i*(a3i.$etDa7(6<<:6c3i<"Voi= "d
else i*(a3i.$etDa7(6<<D6c3i<"Jineri= "d
else i*(a3i.$etDa7(6<<H6c3i<"Fa%bata= "d
i*(a3i.$etonth(6<<@6cluna<"Ianuarie "d
else i*(a3i.$etonth(6<<16cluna<"8ebruarie"d
else i*(a3i.$etonth(6<<26cluna<"artie"d
else i*(a3i.$etonth(6<<96cluna<"A&rilie"d
else i*(a3i.$etonth(6<<:6cluna<"ai"d
else i*(a3i.$etonth(6<<D6cluna<"Iunie"d
else i*(a3i.$etonth(6<<H6cluna<"Iulie"d
else i*(a3i.$etonth(6<<I6cluna<"Au$ust"d
else i*(a3i.$etonth(6<<P6cluna<"Fe&te%brie"d
else i*(a3i.$etonth(6<<Q6cluna<"!cto%brie"d
else i*(a3i.$etonth(6<<1@6cluna<"0oie%brie"d
else i*(a3i.$etonth(6<<116cluna<"Dece%brie"d
data<a3i.$etDate(6
//-->
</F/+I#T>
</HEAD>
<B!D">
<H1 ali$n<"center">Data calendaristica</H1><H+>
<8!0T si3e<"9" color<"blac;" *ace<"arial">A3i sunte% in data deO
<F/+I#T lan$ua$e<"Va)aFcri&t">
<,--
<8!0T si3e<":" color<"red" *ace<"arial">
docu%ent.Crite(3iE` `EdataE` `Eluna6
//-->
</F/+I#T></8!0T>
</B!D">
</HTL>
!ere.tre pop)up
0nul din lucrurile care nu se pot realiza folosind doar 89:; este afi"area mesajelor pop)up. $ceste
mesaje apar ntr%o mic fereastr care se nchide atunci c#nd e&ecutai o anumit aciune, de o!icei
clicJ pe un !uton, sau pe un linJ.
?n &emplul DI.H este construit pagina principal din care este apelat fereastra pop#up.
,%emplul -"# 2
<HTL>
<HEAD>
<TITLE>Ga)ascri&tD</TITLE>
<F/+I#T lan$ua$e<"Va)aFcri&t">
<,--
*unction deschide(6
ciCin<CindoC.o&en("Ga)ascri&tH.ht%l"= "I'I0"= "status<no=
toolbar<no= location<no= %enu<no= Cidth<2@@= hei$ht<2@@"6Ud
//-->
</F/+I#T>
</HEAD>
<B!D">
<H1 ali$n<"center">8ereastra &o&-u&</H1><H+>
Aceasta &a$ina de%onstrea3a cu% &oate *i creata o *ereastra &o&-
u&<B+>
8ereastra se deschide la a&asarea &e le$atura de %ai Gos si se
inchide<B+>
cand este a&asat butonul !B<B+>
Deschide *ereastra
<A hre*<">" on/lic;<"deschide(6U">aici</A>.
</B!D">
</HTL>
>ire"te c tre!uie creat un document separat, care va fi afi"at n fereastra pop#up. ?n &emplul DI.B
este construit documentul 89:; 2;avascript=+html6 care va fi afi"at n fereastra pop#up definit n
e&emplul anterior.
,%emplul -"# 3
<HTL>
<HEAD>
<TITLE>Ga)ascri&tH</TITLE>
</HEAD>
<B!D">
<H9 ali$n<"center">Test &o&-u&</H9>
<8!0T color<"$reen" *ace<arial>Ati in)atat sa creati o *ereastra &o&-
u&<B+>
A&asati !B ca sa re)eniti in *ereastra initiala
<#>
<8!+ na%e<"*or%1">
<I0#(T t7&e<"button" )alue<"!B"
on/lic;<"CindoC.close(6U">
</8!+>
</B!D">
</HTL>
$spectul paginii "i al ferestrei pop#up este redat n >igura DI.H.
/utei modifica documentul 89:; care se va deschide n fereastra pop#up dup dorin "i l putei
salva su! alt nume. @u uitai, ns, s facei modificarea corespunztoare n funcia deschide(6 din
script.
64iarea aleatoare a unor me.aAe n pa%in&
0nul 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.
0n mod de a face paginile mai variate este de a afi"a diverse mesaje, citate sau imagini care s se
schim!e de fiecare dat c#nd este accesat pagina.
?n &emplul DI.4 este prezentat un script care realizeaz afi"area aleatoare a unui citat, ales dintr%un
"ir predefinit. $spectul acestei pagini este redat n >igura DI.B.
,%emplul -"# 4
<HTL>
<HEAD>
<TITLE>Ga)ascri&tI</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">/itate</H1><H+>
<F/+I#T lan$ua$e<"Va)aFcri&t">
<,--
citat<neC Arra7(D6U
autor<neC Arra7(D6U
citat4@5<"!%ul care-si cunoaste li%itele este sin$urul care are
sanse sa obtina ce )rea."U
autor4@5<"Goethe"U
citat415<"#e stancile cele %ai inalte aGun$ nu%ai )ulturii si
re&tilele."U
autor415<"ontesKuieu"U
citat425<"#utine lucruri sunt atat de $reu de su&ortat ca un
exe%&lu bun."U
autor425<"ar; TCain"U
citat495<"Ade)arul &ur si si%&lu este rareori &ur si niciodata
si%&lu."U
autor495<"!scar 'ilde"U
citat4:5<"!%ul a in)entat li%baGul &entru a-si satis*ace ne)oia
&ro*unda de a se &lan$e."U
autor4:5<"Lil7 To%lin"U
index<ath.*loor(ath.rando%(6 _ citat.len$th6U
docu%ent.Crite("<DL>an"6U
docu%ent.Crite("<DT>" E "a"" E citat4index5 E "a"an"6U
docu%ent.Crite("<DD>" E "- " E autor4index5 E "an"6U
docu%ent.Crite("</DL>an"6U
//-->
</F/+I#T>
<H+>
/itatul de %ai sus este $enerat aleator la incarcarea &a$inii.
</B!D">
</HTL>
,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#D, unde n este numrul de citate. /entru a
o!serva funcionarea scriptului, rencrcai pagina de mai multe ori.
,ma%ini care .e .c7imb& 'rollover ima%e.*
0n efect interesant pe care l putei introduce n pagin sunt imaginile care "i schim! aspectul la
trecerea cu mouse%ul pe suprafaa lor. $cesta se poate o!ine cu ajutorul scriptului prezentat n
&emplul DI.3. ?n >igura DI.4 este redat aspectul paginii descrise n acest e&emplu.
,%emplul -"# 5
<HTL>
<HEAD>
<TITLE>Ga)ascri&tP</TITLE>
<F/+I#T lan$ua$e<"Va)aFcri&t">
<,--
i* (docu%ent.i%a$es6
c
&ic1on<neC I%a$e(6U
&ic1on.src<"../I%a$ini/do)leac1.G&$"U
&ic1o**<neC I%a$e(6U
&ic1o**.src<"../I%a$ini/do)leac2.G&$"U
d
*unction deschide(i%$0a%e6
c
i* (docu%ent.i%a$es6
c
i%$!n<e)al(i%$0a%e E "on.src"6U
docu%ent4i%$0a%e5.src<i%$!nU
d
d
*unction inchide(i%$0a%e6
c
i* (docu%ent.i%a$es6
c
i%$!**<e)al(i%$0a%e E "o**.src"6U
docu%ent4i%$0a%e5.src<i%$!**U
d
d
//--->
</F/+I#T>
</HEAD>
<B!D">
<H1 ali$n<"center">I%a$ini care se schi%ba</H1><H+>
</E0TE+>
<A hre*<">" onouseo)er<"deschide(`&ic1`6"
onouseout<"inchide(`&ic1`6">
<IG src<"../I%a$ini/do)leac2.G&$" Cidth<"1@@" hei$ht<"1@@"
border<"1" na%e<"&ic1">
</A>
<//E0TE+>
</B!D">
</HTL>
Balidarea 4ormularelor
,ac e&emplele prezentate p#n acum au avut rolul de a face pagina dumneavoastr mai atractiv,
urmtorul e&emplu este de natur s i m!unteasc funcionalitatea. ' pro!lem cu care v vei
confrunta fr ndoial dac folosii formulare n pagin, este validarea datelor introduse de
utilizator.
Pom crea o pagin foarte simpl care conine dou casete de te&t n care utilizatorul tre!uie s
introduc numele "i adresa de mail. ,eoarece dup completarea formularului informaiile introduse
vor fi supuse procesului de validare realizat de scriptul =ava+cript, eticheta <8!+> va avea un
coninut diferit de cel pe care l cunoa"tei de la capitolul /ormulare.
+criptul de mai jos verific dac toate c#mpurile de editare au fost completate. ,ac se apas pe
!utonul +u!mit nainte de a completa am!ele c#mpuri, este transmis un mesaj de eroare. ,atele din
formular sunt transmise unui script )<I fictiv, numit m(script+cgi aflat n directorul cgi#bin.
'!servai c atri!utele action "i %ethod ale etichetei <8!+> pe care le cunoa"tei de la
/ormulare sunt, de data aceasta folosite ca proprieti ale o!iectului predefinit n =ava+cript, *or%.
,ocumentul construit n &emplul DI.E conine un formular "i scriptul care realizeaz validarea
datelor introduse n c#mpurile formularului. ,in >igura DI.3 putei o!serva mesajul de eroare
transmis n situaia c#nd unul din c#mpurile formularului nu este completat.
,%emplul -"# 6
<HTL>
<HEAD>
<TITLE>Ga)ascri&tQ</TITLE>
<F/+I#T lan$ua$e<"Ga)ascri&t">
<,--
*unction )eri*ica(*or%6
c
i* (*or%.nu%e.)alue<< ""6
c
alert("Ja ro$= introduceti nu%ele,"6U
*or%.nu%e.select(6U
d
else i* (*or%.e%ail.)alue<< ""6
c
alert("Ja ro$= introduceti adresa de %ail,"6U
*or%.e%ail.select(6U
d
else
c
*or%.%ethod<"&ost"U
*or%.tar$et<"?sel*"U
*or%.action<"c$i-bin/%7scri&t.c$i"U
*or%.sub%it(6U
d
d
//-->
</F/+I#T>
</HEAD>
<B!D">
<H1 ali$n<"center">Jalidarea *or%ularelor</H1>
<H9 ali$n<"center">(co%&letarea tuturor ca%&urilor6</H9><H+>
<8!+ onFub%it<")eri*ica(this6U return *alseU">
0u%eO
<I0#(T t7&e<"text" na%e<"nu%e" si3e<"9@"><B+>
Adresa %ailO
<I0#(T t7&e<"text" na%e<"e%ail"><B+>
<I0#(T t7&e<"sub%it" na%e<"button" )alue<"Fub%it">
</8!+>
</B!D">
<HTL>
' alt verificare deose!it 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 d
dac este prezent caracterul (#( urmat de trei caractere 2.com, de e&emplu6,
dac este prezent caracterul (#( urmat de dou caractere 2.ro, de e&emplu6
>ormularul din &emplul DI.DC conine un c#mp de editare "i un !uton &ubmit. ,ac adresa de mail
introdus n c#mpul de editare este incorect se va afi"a un mesaj de eroare a"a cum se vede n
>igura DI.E.
,%emplul -"# -7
<HTL>
<HEAD>
<TITLE>Ga)ascri&t1@</TITLE>
<F/+I#T lan$ua$e<"Ga)ascri&t">
<,--
*unction )eri*ica?%ail(*or%6
c
)eri*<*or%.e%ail.)alue
i* (()eri*.index!*(`X`6 < @6 YY (()eri*.charAt()eri*.len$th-:6 ,
<`.`6 TT ()eri*.charAt()eri*.len$th-96 ,<`.`666
c
alert("0u ati introdus o adresa de %ail )alida. Ja ro$=
incercati din nou,"6U
*or%.e%ail.select(6U
return *alseU
d
else
c
*or%.%ethod<"&ost"U
*or%.tar$et<"?sel*"U
*or%.action<"c$i-bin/%7scri&t.c$i"U
*or%.sub%it(6U
d
d
//-->
</F/+I#T>
</HEAD>
<B!D">
<H1 ali$n<"center">Jalidarea *or%ularelor</H1>
<H9 ali$n<"center">(adresa de %ail corecta6</H9><H+>
<8!+ onFub%it<")eri*ica?%ail(this6Ureturn *alseU">
Adresa %ailO
<I0#(T t7&e<"text" na%e<"e%ail"><B+>
<I0#(T t7&e<"sub%it" na%e<"button" )alue<"Fub%it">
</8!+>
</B!D">
<HTL>
/utei folosi n paginile dumneavoastr oricare dintre aceste scripturi, desigur, fc#nd modificrile
necesare legate de structura site%ului dumneavoastr. ,e e&emplu, n scripturile care realizeaz
validarea formularelor, pentru ca acestea s fie funcionale, tre!uie s precizai localizarea corect a
scriptului )<I care face prelucrarea lor.
,in e&emplele prezentate pro!a!il c v%ai putut crea o imagine despre modul n care pot fi utilizate
scripturile =ava+cript ntr%o pagin -e!. ,ac suntei entuziasmat nc de pe acum, vei fi "i mai
mult dac vei depune puin efort pentru a nva lim!ajul "i vei putea crea scripturi mult mai
comple&e dec#t 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 !un programator. 0na
dintre regulile de aur ale unei pagini -e! !une, regul at#t de adesea nclcat, este simplitatea.
#. 'e(umat
=ava+cript este un lim!aj de programare orientat pe o!iecte "i evenimente care permite e&tinderea
capacitilor lim!ajului 89:;.
+cripturile =ava+cript sunt incluse ntr%un document 89:; prin intermediul etichetei container
<F/+I#T> sau prin intermediul procedurilor eveniment. /entru a evita afi"area n pagin a codului
scriptului de !rowserele care nu suport scripturi, se o!i"nuie"te ca scriptul s fie inclus ntre
etichetele de comentariu.
+cripturile pot fi inserate direct n documentul 89:; sau pot fi stocate n fi"iere 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,
afi"area datei curente n pagin, validarea formularelor "i altele.
In capitolul urm/tor -om %iscuta %espre o alt/ meto%/ care
)mbog/(e&te limbaFul !"L cu noi posibilit/(i %e a controla
aspectul paginilorJ &i anume programarea cu aFutorul foilor
%e stiluri 8St@!e S*eets9 Capitolul 1+
3oi %e stiluri 8CSS9
/oile de stiluri HTM 2Cascading &t(le &heets6 reprezint o inovaie n dezvoltarea -orld -ide
-e!, n ciuda faptului c ideea gruprii elementelor de formatare a documentelor a aprut ceva mai
demult. $plicarea stilurilor reprezint o e&tindere important a posi!ilitilor de design, evit#nd
utilizarea de fi"iere grafice mari ce determin ncetinirea ncrcrii paginilor "i manipularea lor
greoaie.
>olosind stilurile 89:; putei fi sigur c cititorii vor vedea te&tul din pagin e&act a"a cum a fost el
proiectat. 9e&tul "i proprietile acestuia, care au fost iniial controlate de !rowsere, se rentorc la
autor, acolo unde le este, de fapt, locul.
1. Ce este un sti!?
0n stil reprezint o colecie de atri!ute 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 atri!ute pot fi
tipul de font, mrimea "i grosimea acestuia, marginile, paragrafele "i orice altceva ce poate influena
aspectul te&tului n pagin. <ruparea lor n stiluri permite autorului s aplice aceea"i colecie de
atri!ute la diferite pri ale unui document.
+tilurile aplicate unui document 89:; au multe avantaje pentru creatorii de pagini -e!:
'fer control crescut asupra aspectului "i plasrii te&tului n pagin
.educ (nvlm"eala( produs de multitudinea de deschideri "i nchideri ale etichetelor 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 ai! un alt tip de font dec#t te&tul o!i"nuit, s
fie de dimensiune mai mare "i scrise cu caractere ngro"ate "i italice, ar tre!ui s definii aceste
atri!ute de formatare pentru fiecare titlu n parte. >olosind stilurile nu avei nevoie dec#t s creai o
singur definiie de stil care s conin atri!utele de formatare dorite, pe care s o aplicai la fiecare
titlu.
?n plus, folosirea stilurilor reduce considera!il efortul depus atunci c#nd 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
dec#t asupra foii de stiluri care controleaz aceste elemente.
2. Tipuri de ,oi de sti!uri
+tilurile 89:; pot fi aplicate ntr%o pagin -e! n trei moduri:
Jncapsulate 2embedded6: stilurile sunt incluse n documentul asupra cruia se aplic, "i anume n
seciunea <HEAD> a documentului. /rin includerea lor n antetul documentului, stilurile rm#n
invizi!ile pentru vizitatorul paginii.
egate 2linked6: stilurile sunt definite n fi"iere separate de documentul 89:;. ,ocumentul face
apel la foaia de stiluri prin intermediul etichetei <LI0B>. >olosirea acestui tip de stiluri face posi!il
utilizarea aceleia"i foi de stil pentru documente diferite. ,e asemenea, este posi!il aplicarea mai
multor foi de stiluri pentru acela"i document.
In.line: stilurile sunt incluse ca atri!ute n cadrul etichetelor 89:; din document. $ceasta nseamn
c ele vor afecta doar elementul asupra cruia sunt aplicate. ste o modalitate mai puin utilizat
deoarece contrazice principiul general al stilurilor, acela de a simplifica "i de a face mai lizi!il codul
documentului 89:;.
+inta&a definiiilor de stil este, n general, aceea"i, indiferent de modul cum sunt ele aplicate. )ele
trei tipuri de stiluri pot fi, de asemenea, com!inate n cadrul aceluia"i document. .elaiile dintre
diferitele tipuri de stiluri realizeaz efectul de cascad care d numele acestei metode.
Stiluri ncap.ulate
)rearea unui astfel de stil se realizeaz folosind eticheta
<$TYLE> </$TYLE># ticheta <FT"LE> este o etichet container, deci este o!ligatorie prezena
etichetei de nchidere </FT"LE>. ?ntre cele dou etichete se introduc definiiile de stil. ticheta de
stil este plasat n antetul documentului adic n seciunea <HEAD>.
?n &emplul DK.D este prezentat o definiie de stil care realizeaz afi"area tuturor titlurilor de nivel D
2adic a te&telor cuprinse ntre etichetele <H1> </H1>6 cu caractere !old "i de culoare verde. ?n
plus, te&tele incluse ntre etichetele <#> </#> vor fi afi"ate cu fonturi arial, de mrime G "i culoare
violet.
,e asemenea, este creat un stil (normal( care poate fi aplicat asupra oricrui te&t. /rin intermediul
su, te&tul este afi"at cu caractere mai mari "i de culoare oranj. $spectul paginii n care este inclus
aceast definiie de stil este cel din >igura DK.D.
,%emplul -1# -
<HTL>
<HEAD>
<TITLE>stiluri1</TITLE>
<FT"LE>
<,--
H1 ccolorO >@@P@@@U *ont-Cei$htO boldd
# c*ont-*a%il7O ArialU colorO >P@@@P@U *ont-si3eO 1:&xd
.nor%al c*ont-si3eO lar$eU colorO >88P@@@d
-->
</FT"LE>
</HEAD>
<B!D">
<H1 ali$n<"center">Ftiluri</H1><H+>
<#>Textul din acest &ara$ra* este *or%atat cu aGutorul stilurilor</#>
Acesta este un text ne*or%atat
<H1>Titlu</H1>
<F#A0 class<"nor%al">Acesta este stilul nor%al</F#A0>
</B!D">
</HTL>
'!servai c definiia stilurilor a fost plasat ntre etichetele 89:; de comentariu, n aceea"i
manier ca "i la scripturile =ava+cript. :otivul este acela"i: dac !rowserul cu care este vizualizat
pagina nu suport foi de stiluri, se evit astfel afi"area n pagin a codului 89:;.
Stiluri le%ate C 4oi de .tiluri e#terne
+tilurile incluse n pagin se aplic elementelor prezente n respectivul document 89:;, reduc#nd
dimensiunea codului "i efortul de a defini fiecare element n parte. $ceast idee se poate e&tinde la
nivelul mai multor documente care pot !eneficia, toate, de acelea"i stiluri, reunite ntr%o foaie de
stiluri e&tern.
$vantajul folosirii foilor de stiluri e&terne este du!lu. /e de%o parte ele se pot aplica la nivelul mai
multor documente 89:;, realiz#nd astfel o legtur de stil ntre ele, lucru deose!it de util la
construirea unui site. /e de alt parte, acela"i document poate folosi foi de stiluri diferite, oferind
vizitatorului posi!ilitatea de a opta pentru unul sau altul dintre ele, n funcie de propriile preferine.
' foaie de stiluri este un fi"ier te&t care conine regulile de stil definite n aceea"i manier folosit la
stilurile incluse n pagin. 'dat creat o foaie de stiluri, ea tre!uie salvat cu e&tensia .c... >oile de
stiluri pot fi stocate ntr%un folder separat sau n acela"i folder n care sunt plasate "i documentele
89:;.
$pelul foilor de stiluri se poate realiza n dou moduri:
folosind eticheta <LI!*>
folosind funcia @i%&ort
)el mai folosit mod de apelare a unei foi de stiluri este cu ajutorul etichetei <LI0B> conform
urmtoarei sinta&e:
<LI0B rel<"st7lesheet" hre*<"nu%e?*oaie?stiluri.css">
?n &emplul DK.G este construit o foaie de stiluri e&tern care va fi apelat cu ajutorul etichetei
<LI0B>. >oaia de stiluri a fost salvat su! numele stiluri>+css
,%emplul -1# $
B!D"
cbac;$round-colorO >//88//U
*ont-*a%il7O Arial= sans-seri*U
colorO >99@@HHU
&addin$O D@&x= I@&xd
AOlin; ccolorO >//QQ@@d
AO)isited ccolorO >HH@@@@d
AOho)er ccolorO >88//@@d
AOacti)e ccolorO >88@@@@d
H1 ccolorO >QQHH99U
bac;$round-colorO >8888//d
,ocumentul 89:; care urmeaz apeleaz foaia de stiluri de mai sus este prezentat n &emplul
DK.I. ,up cum o!servai, foaia stiluri>+css a fost apelat n antetul documentului, prin intermediul
etichetei <LI0B> cu atri!utul rel<"st7lesheet". $tri!utul hre* al etichetei are ca valoare
numele 2"i adresa relativ, dac este necesar6 al foii de stiluri apelate. ?n documentul 89:; am
inclus "i o legtur, pentru a e&emplifica modul n care foaia de stiluri schim! culorile legturii.
$tri!utul hover se refer la proprietatea ca legtura s "i schim!e culoarea la trecerea cu mouse%ul
peste ea, fr a face clicJ. /agina descris n acest e&emplul are aspectul din >igura DK.G.
,%emplul -1# "
<HTL>
<HEAD>
<TITLE>stiluri9</TITLE>
<LI0B rel<"st7lesheet" hre*<"stiluri2.css">
</HEAD>
<B!D">
<H1 ali$n<"center">8oi de stiluri externe</H1>
Acest exe%&lu ilustrea3a %odul in care este inclusa in &a$ina o *oaie
de stiluri externa
<#>ai %ulte exe%&le in <A hre*<"anexa1.ht%l">anexa2</A>
</B!D">
</HTL>
Stiluri in)line
+pre deose!ire de stilurile ncapsulate "i de foile de stiluri e&terne, stilurile in#line fac parte chiar din
corpul documentului 89:;. le se aplic prin folosirea atri!utului "t:le n asociere cu etichetele
89:; standard. .einei, deci, c st7le poate fi at#t etichet n sine c#t "i atri!ut al altor etichete.
,efiniiile de stil in#line se aplic numai asupra elementelor incluse ntre etichetele care au asociat
atri!utul st7le. ,in acest motiv, dac dorim s repetm n alt loc din cuprinsul documentului
acelea"i definiii de stil, ele vor tre!ui repetate, ncrc#nd astfel documentul 89:;. 9otu"i, utilitatea
stilurilor in#line este aceea c fiind definite chiar n cuprinsul documentului, definiiile lor sunt mai
puternice dec#t 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 dec#t 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 etichetei <#>:
<# st7le<"colorO redU *ont-*a%il7O arialU *ont-Cei$htO bold">Textul din
acest &ara$ra* este scris cu *onturi arial= in$rosate= de culoare
rosu</#>
'!servai c la stilurile in#line definiiile de stil sunt incluse ntre apostrofuri "i nu ntre acolade, ca la
celelalte tipuri de stiluri.
$tunci c#nd lucrai cu documente 89:; deja e&istente crora dorii s le aplicai stiluri in#line, este
recomandat s folosii etichetele <DI4> "i <$,A!>. $cestea v permit s aplicai stilurile fr a
afecta codul 89:; deja e&istent sau aspectul paginii n !rowserele care nu suport stiluri.
&emplul DK.K ilustreaz folosirea etichetei <F#A0> aspectul paginii fiind redat n >igura DK.I.
,%emplul -1# 1
<HTL>
<HEAD>
<TITLE>stiluri:</TITLE>
</HEAD>
<B!D">
<H1 st7le<"colorOredU*ont-*a%7l7Oarial">Ftiluri in-line</H1><H+>
<#>Textul din acest &ara$ra* este di)i3at *olosind eticheta s&an</#>
<F#A0 st7le<"*ont-*a%il7OarialU colorO blue">Text scris cu albastru
si *onturi arial</F#A0><B+>
<F#A0 st7le<"*ont-*a%il7O courierU si3eO %ediu%U colorO$reen">Text
scris cu )erde si *onturi courier %ediu%</F#A0>
</B!D">
</HTL>
;a fel ca "i la capitolele anterioare, nu vom intra n amnunte privind programarea cu ajutorul
stilurilor. ,e"i stilurile sunt intuitive "i u"or de aplicat, totu"i o a!ordare e&haustiv a acestui su!iect
dep"e"te o!iectul acestei cri. /rezentm, totu"i, n continuare, c#teva e&emple care v pot fi utile
n paginile dumneavoastr.
3. ),ecte o9inute cu aAutoru! sti!uri!or
6.pectul te#tului
Iat c#teva atri!ute care se pot asocia cu diverse etichete 89:; permi#nd schim!area aspectului
te&tului.
Tabel -1# -
'tributul ,&ectul
color
+eteaz culoarea te&tului.
bac;$round-color
+eteaz culoarea fundalului unui o!iect.
*ont-*a%il7
+eteaz tipul de font.
*ont-si3e
+eteaz dimensiunea fonturilor. Palorile pot fi
e&primate n pi&eli 2p&6 sau puncte 2pt6.
*ont-Cei$ht
+eteaz grosimea fonturilor. Palorile posi!ile pot fi:
normal, !old, !older, lighter.
*ont-st7le
+eteaz stilul de font. Palorile pot fi: normal, italic,
o!liNue.
letter-s&acin$
+eteaz spaierea literelor. Palorile pot fi: pi&eli
2p&6, puncte 2pt6, inci 2in6, centimetri 2cm6 sau
milimetri 2mm6.
Cord-s&acin$
+eteaz spaierea cuvintelor. Palorile pot fi: pi&eli
2p&6, puncte 2pt6, inci 2in6, centimetri 2cm6 sau
milimetri.
text-trans*or%
Palorile posi!ile pot fi: capitalize, uppercase,
lowercase, none.
text-decoration
Palorile pot fi: underline, overline, line%through,
!linJ.
ho)er
+chim! aspectul unei legturi c#nd mouse%ul se
afl deasupra ei.
lin;
,efine"te aspectul unei legturi.
acti)e
,efine"te aspectul legturii active.
)isited
,efine"te aspectul legturii vizitate.
*irst-letter
+chim! aspectul primei litere dintr%un cuv#nt.
*irst-line
+chim! aspectul primei linii dintr%un te&t.
?n e&emplele urmtoare sunt ilustrate c#teva din aceste atri!ute.
&emplul DK.H include o definiie de stil n care sunt definii a"a numiii selectori de clas, n acest
e&emplu B.titlu "i B.subtitlu. ?n corpul documentului apelul acestora a fost fcut prin
construcia:
<B class<"titlu">Titlu</B>
$tri!utul class care se poate asocia etichetei <*W ca n acest e&emplu sau altor etichete de formatare
a te&tului are ca valoare un identificator care a fost definit n preala!il n cadrul definiiei de stil.
$spectul paginii descrise n acest e&emplu este cel din >igura DK.K.
,%emplul -1# 2
<HTL>
<HEAD>
<TITLE>stiluriD</TITLE>
<FT"LE>
<,--
B.titlu c*ont-si3eO 2@ &tU *ont-Cei$htO bolderU letter-s&acin$OD&xd
B.subtitlu c*ont/si3eO 1D &tU letter-s&acin$O D&xd
-->
</FT"LE>
</HEAD>
<B!D">
<H1 ali$n<"center">As&ectul textului</H1><H+>
<#>
Text nor%al<B+>
<B>Text in$rosat</B><B+>
<B class<"titlu">Titlu</B><B+>
<B class<"subtitlu">Fubtitlu</B>
</#>
</B!D">
</HTL>
&emplul DK.B folose"te stiluri la formatarea titlului de nivel 8D "i a te&tului din cadrul paragrafului,
folosind atri!utul *irst-letter care schim! aspectul primei litere din paragraf. 1i n acest
e&emplu a fost folosit un selector de clas "i anume #.&ri%alit.
$spectul paginii care folose"te aceste stiluri este redat n >igura DK.H.
,%emplul -1# 3
<HTL>
<HEAD>
<TITLE>stiluriH</TITLE>
<FT"LE>
<,--
#.&ri%alitO*irst-letter c*ont-Cei$htO bolderU *ont-st7leO italicU
*ont-si3eOD@ &tU colorOredd
H1 ccolorOblueU letter-s&acin$OD &xd
-->
</FT"LE>
</HEAD>
<B!D">
<H1 ali$n<"center">E*ecte asu&ra textului</H1><H+>
<# class<"&ri%alit">Textul din acest &ara$ra* *oloseste atributul
*irst-letter</#>
</B!D">
</HTL>
8are de derulare colorate
0nul dintre efectele des nt#lnite n paginile -e! este prezena !arelor de derulare colorate. $cest
efect se poate, de asemenea, o!ine prin aplicarea stilurilor. /entru a defini culoarea !arelor de
derulare se folosesc c#teva atri!ute, pe care le definim mai jos.
Tabel -1# $
'tributul ,&ectul
scrollbar-base-
color
,efine"te culoarea de !az a !arei, a
!utoanelor cu sgei "i a fundalului pe care se
deplaseaz !ara. ,ac dorii s realizai rapid
o !ar de derulare nu este necesar s setai
dec#t acest atri!ut "i pe cel urmtor. +etarea
celorlalte atri!ute se suprapune "i anuleaz
efectele acestuia.
scrollbar-arroC-
color
,efine"te culoarea sgeilor de pe !ar
scrollbar-*ace-
color
,efine"te culoarea suprafeei !arei de
derulare "i a !utoanelor pe care sunt sgeile.
,e asemenea, sta!ile"te culoarea fundalului
pe care se deplaseaz !ara.
scrollbar-
hi$hli$ht-color
,efine"te culoarea prilor (iluminate( ale
!arei "i !utoanelor cu sgei 2marginile de sus
"i din st#nga6 "i a fundalului pe care se
deplaseaz !ara
scrollbar-
dar;shadoC-color
,efine"te culoarea prilor (ntunecate( ale
!arei "i !utoanelor cu sgei 2marginile de jos
"i din dreapta6
scrollbar-shadoC-
color
,efine"te culoarea marginilor de jos "i din
dreapta ale !arei "i !utoanelor cu sgei
scrollbar-9dli$ht-
color
,efine"te culoarea marginilor de sus "i din
st#nga ale !arei "i !utoanelor cu sgei
scrollbar-trac;-
color
,efine"te culoarea fundalului !arei
,up cum o!servai, unele dintre aceste atri!ute "i suprapun efectele. &ist anumite reguli care
sta!ilesc prioritile atri!utelor pe care nu le vom a!orda aici. )a nceptor, este recomandat s nu
folosii atri!ute care se suprapun pentru a nu o!ine rezultate neconforme cu inteniile
dumneavoastr.
&emplul urmtor ilustreaz modul de construire a !arelor de derulare colorate.
?n &emplul DK.4 am construit o foaie de stiluri e&tern salvat su! numele stiluriI+css+
,%emplul -1# 4
B!D"
c
scrollbar-*ace-colorOblueU
scrollbar-arroC-colorO7elloCU
scrollbar-shadoC-colorOredU
scrollbar-9dli$ht-colorO7elloCU
scrollbar-trac;-colorOc7anU
d
,ocumentul 89:; care apeleaz foaia de stiluri este construit n &emplul DK.3, pagina descris de
acest document av#nd aspectul din >igura DK.B.
,%emplul -1# 5
<HTL>
<HEAD>
<TITLE>stiluriP</TITLE>
<LI0B rel<"st7lesheet" hre*<"stiluriI.css">
</HEAD>
<B!D">
<H1 ali$n<"center">Bare de derulare colorate</H1>
a<B+>a<B+>a<B+>a<B+>a<B+>a<B+>a<B+>
a<B+>a<B+>a<B+>a<B+>a<B+>a<B+>a<B+>
a<B+>a<B+>a<B+>a<B+>a<B+>a<B+>a<B+>
</B!D">
</HTL>
,esigur, culorile pe care le alegei pentru !ara de derulare tre!uie selectate cu grij, astfel nc#t s se
armonizeze cu restul paginii. >olosirea unei foi de stiluri e&terne este util deoarece putei sta!ili
astfel culoarea !arei pentru toate paginile site%ului dumneavoastr.
*rowserele @etscape nu suport schim!area culorilor !arei de derulare.
!ormulare colorate
&emplul care urmeaz 2&emplul DK.E6 folose"te stiluri in#line pentru a crea formulare colorate care
pot da paginii un aspect mai atractiv. $m folosit pentru setarea culorilor codurile he&azecimale pe
care le putei gsi n 'ne%a ". )a "i la !arele de derulare, culorile formularelor tre!uie alese cu grij
pentru a nu da paginii un aspect ncrcat "i lipsit de !un%gust. /agina descris n acest document arat
ca n >igura DK.4.
,%emplul -1# 6
<HTL>
<HEAD>
<TITLE>stiluriQ</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">8or%ulare colorate</H1><H+>
<8!+>
<I0#(T na%e<"text" st7le<"bac;$round-colorO >@@//88U colorO
>888888U *ont-Cei$htO bold" )alue<"Falut,">
<#>
<TEATA+EA roCs<"D" cols<"2@" st7le<"colorO >@@HH//U bac;$round-
colorO >//////U scrollbar-base-colorOredU">/are sunt i%&resiile
taleM</TEATA+EA>
<#>
<I0#(T t7&e<"sub%it" )alue<"tri%ite" st7le<"bac;$round-colorO
>@@HH//">
</8!+>
</B!D">
</HTL>
Pizualizate 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 ela!orarea documentelor 89:;, mai ales dac
dorim s construim un site -e!. $cestea permit pstrarea unui aspect unitar "i coerent pe tot
parcursul site%ului.
0n stil este o colecie de atri!ute 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 etichetei <FT"LE> plasat n antetul documentului
legate % prin intermediul etichetei <LI0B> plasat de asemenea n antetul documentului "i care face
legtura cu foaia de stiluri e&tern
in#line % prin intermediul atri!utului st7le asociat cu diverse etichete 89:;.
)u ajutorul stilurilor se pot o!ine efecte deose!ite n cadrul documentelor 89:;: se poate modifica
aspectul te&tului, se pot construi !are de derulare colorate, formulare colorate "i altele.
?n capitolul urmtor vom discuta despre c#teva elemente de grafic avansat prin intermediul crora
pagina dumneavoastr poate deveni mai interesant "i mai atractiv.
Capitolul 1.
Elemente %e grafic/ a-ansat/
1. 7ma-ini *art$
?n mod o!i"nuit, c#nd folosim o imagine drept legtur, includem eticheta <IG> n interiorul
etichetei pentru linJ%uri , <A>. ?n continuare este prezentat o alt modalitate de a folosi o imagine ca
legtur "i anume crearea unei imagini hart.
Ce e.te o ima%ine 7art&D
' imagine hart este o zon activ pe care se poate e&ecuta clicJ cu mouse%ul, apsarea diferitelor
regiuni ale imaginii duc#nd la deschiderea unor documente 89:; diferite. )u alte cuvinte, o
imagine hart este o imagine mprit n regiuni, iar fiecare regiune reprezint o legtur ctre un alt
document. 0n e&emplu de utilizare a imaginilor hart l constituie !arele de !utoane folosite n multe
site%uri ca instrumente de navigare.
Imaginile hart ofer posi!ilitatea de a folosi o singur imagine pentru a furniza legturi ctre mai
multe pagini. P putei imagina o imagine hart ca fiind compus din dou pri: imaginea n sine "i
o hart invizi!il care este aplicat peste imagine, mprind%o n regiuni. $ceast hart folose"te
pentru definirea regiunilor forme presta!ilite: poligoane, cercuri sau dreptunghiuri. ?n general,
imaginile care se preteaz la a fi folosite ca imagini hart 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 hart pot fi de dou tipuri:
imagini de tip server
imagini de tip client
,ma%ini 7art& pentru .erver '.erver .ide*
' imagine hart de tip server se caracterizeaz prin faptul c face apel la o aplicaie 2un script6 de pe
server care realizeaz determinarea regiunii pe care
s%a fcut clicJ "i ncarc documentul 89:; asociat acelei regiuni. @u este nevoie s v facei griji n
legtur cu scriptul care prelucreaz imaginea hart deoarece majoritatea serverelor au deja instalat
o astfel de aplicaie, cele mai cunoscute fiind Imagemap "i 89Image.
>olosirea imaginilor hart de tip server parcurge urmtorii pa"i:
vizitatorul face clicJ pe o anumit zon a imaginii
coordonatele acestei zone sunt transmise serverului
scriptul aflat pe server asociaz aceste coordonate cu 0.;%ul unui anumit document 89:; 2lista
adreselor 0.; ale imaginilor asociate cu regiunile hrii se afl plasat tot pe server6
adresa 0.; mpreun cu coordonatele regiunii sunt trimise napoi la !rowser care deschide
documentul 89:; corespunztor.
ste lesne de o!servat c parcurgerea tuturor acestor etape precum "i interaciunea cu serverul poate
ncetini mult procesul de ncrcare a documentelor 89:; asociate regiunilor hrii. +ingurul avantaj
al folosirii imaginilor hart este faptul c funcioneaz n toate !rowserele. 9otu"i, deoarece
versiunile mai noi dec#t @etscape G.CG "i Internet &plorer G.C recunosc imaginile hart de tip client,
se va renuna treptat la folosirea imaginilor hart de tip server.
,ma%ini 7art& de tip client 'client .ide*
Imaginile hart de tip client lucreaz independent de server. )#nd folosim acest tip de imagini hart
plasm toate datele necesare prelucrrii hrii chiar n corpul documentului 89:; astfel nc#t
!rowserul l e&ecut fr a mai fi necesar o intervenie din partea serverului.
Imaginile hart de tip client au avantaje evidente: sunt mult mai rapide, funcionarea lor este mult
simplificat, "i, n plus, la trecerea cu mouse%ul peste hart, n !ara de status a ferestrei !rowserului
apare adresa 0.; asociat fiecrei regiuni, ceea ce ofer informaii suplimentare vizitatorului.
Crearea unei ima%ini 7art& de tip client
/entru a include n documentul 89:; o hart pentru o anumit imagine se folose"te eticheta
container <MA,> </MA,>. ?ntre aceste etichete se plaseaz mai multe etichete <A)EA> care au rolul
de a defini coordonatele "i forma regiunilor pe care dorim s le delimitm pe imagine, ca n e&emplul
urmtor:
<A# na%e<"harta">
<A+EA sha&e<"rect" coords<"x1= 71= x2= 72" hre*<"(+L1">
<A+EA sha&e<"&ol7" coords<"x1= 71= x2= 72= g= xn= 7n" hre*<"(+L2">
<A+EA sha&e<"circle" coords<"x= 7= ra3a" hre*<"(+L9">
</A#>
.egiunile definite n acest e&emplu sunt un dreptunghi, pentru care sunt specificate coordonatele
v#rfurilor din st#nga sus "i dreapta jos, un poligon cu n v#rfuri, definit prin coordonatele lor, "i un
cerc definit prin coordonatele centrului "i raz.
/entru a comunica !rowserului ce imagine tre!uie s foloseasc pentru a crea imaginea hart se
folose"te eticheta pentru imagini <IM(>, atri!utul "rc av#nd ca valoare adresa fi"ierului grafic
folosit. ?n plus, n cadrul etichetei <IG> se folose"te atri!utul '"e%a& care are rolul de ancor
2legtur intern6. ,e e&emplu, dac harta pe care o folosim a fost definit n eticheta <A#> cu
numele "harta1" "i folose"te fi"ierul imagineD+gif atunci eticheta <IG> va avea urmtoarea
structur:
<IG src<"i%a$ine1.$i*" use%a&<">harta1" Cidth<"1@@" hei$ht<"1@@"
border<"@">
?n e&emplul urmtor 2&emplul DH.D6 vom crea o imagine hart format din patru regiuni, trei
dreptunghiuri "i un poligon cu patru v#rfuri. /entru a determina coordonatele v#rfurilor fiecrei
regiuni am folosit :icrosoft /hoto ditor, dar putei folosi orice alt editor grafic. ;a plasarea
cursorului mouse%ului oriunde n cadrul imaginii, n !ara de status 2colul din st#nga jos6 vei o!serva
coordonatele n pi&eli, ale punctului n care v gsii. $m asociat fiecrei regiuni c#te un document
89:; dintre cele create la capitolele anterioare. $spectul acestei pagini este redat n >igura DH.D.
,%emplul -2# -
<HTL>
<HEAD>
<TITLE>$ra*ica1</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">I%a$ini harta</H1><H+>
<A# na%e<"harta">
<A+EA sha&e<"&ol7" coords<"2Q= 1@Q= ::= 122= 111= 2:= 12D= 9H"
hre*<"culori1.ht%l">
<A+EA sha&e<"rect" coords<"192= 9D= 2:D= DI" hre*<"*onturi1.ht%l">
<A+EA sha&e<"rect" coords<"11:= H1= 22:= Q2" hre*<"liste1.ht%l">
<A+EA sha&e<"rect" coords<"P1= QD= 22I= 12D" hre*<"stiluri1.ht%l">
</A#>
<H9>#entru a deschide cartile din i%a$ine *aceti clic; &e una dintre
ele</H9>
<IG src<"../I%a$ini/boo;s1.$i*" use%a&<">harta" Cidth<"2P9"
hei$ht<"1:2" border<"@">
</B!D">
</HTL>
2. 7ma-ini animate
' imagine animat este format dintr%o serie de imagini 2pentru animaie se folose"te formatul <I>6
care sunt afi"ate una dup cealalt cre#nd aparena unei mi"cri continue. &ist multe site%uri care
ofer imagini animate pe care le putei descrca "i salva pe hard%disJ pentru a le folosi n cadrul site%
ului dumneavoastr. ste suficient s deschidei motorul de cutare pe care l folosii de o!icei "i s
introducei drept cheie de cutare cuvintele (animated gifs( "i vei o!ine un foarte mare numr de
rezultate.
$vei, ns, "i posi!ilitatea de a v crea propriile imagini animate. $cest proces poate fi destul de
o!ositor, deoarece tre!uie 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 afi"area liter cu liter a cuv#ntului $@I:$eI.
>iecare secvena din cuv#nt reprezint o imagine distinct, astfel c vom crea E fi"iere <I> care vor
conine secvenele: $@I:$9I, $@I:$9I, $@I:$9, $@I:$, $@I:, $@I, $@, $. 0ltimul fi"ier
va conine o imagine fr nici o liter.
,eoarece imaginile sunt foarte simple am folosit pentru crearea lor utilitarul *aint, din %indos 3
/ccessories, dar dac dorii s creai imagini mai comple&e este necesar s utilizai un editor grafic
mai performant.
,up crearea imaginilor "i salvarea fi"ierelor 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 <I> )onstruction +et pe care o putei gsi la adresa:
http*++www.mindwor0shop.com+alchemy+
/rogramul ofer, pe l#ng crearea animaiei, "i multe alte opiuni: crearea de !utoane, !annere, efecte
de tranziie ale paginilor, etc.
?n meniul !ile al programului e&ist un /nimation %i8ard care v va conduce pas cu pas de%a lungul
procesul de creare a animaiei. -izard%ul v va cere c#teva informaii printre care ce fi"iere dorii s
fac parte din procesul de animaie 2n cazul nostru cele nou fi"iere <I>6, dac dorii ca procesul s
se desf"oare fr oprire "i care este intervalul de timp dintre dou afi"ri. ,up ce /nimation
%i8ard a definitivat procesul de animaie nu mai avei altceva de fcut dec#t s salvai fi"ierul astfel
o!inut "i s%l folosii n pagina dumneavoastr. Includerea fi"ierului care conine imaginea animat
ntr%un document 89:; se face ca "i la o imagine o!i"nuit folosind eticheta <IG>.
&emplul DH.G ilustreaz modul cum este inclus n pagin o imagine animat aspectul paginii fiind
cel din >igura DH.G.
,%emplul -2# $
<HTL>
<HEAD>
<TITLE>$ra*ica2</TITLE>
</HEAD>
<B!D">
<H1 ali$n<"center">I%a$ini ani%ate</H1><H+>
<#><IG src<"../I%a$ini/ani%atie.$i*">
</B!D">
</HTL>
,e"i imaginile animate sunt atractive "i dau paginii un aspect dinamic, totu"i 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 o!ositoare "i poate distrage
atenia vizitatorului de la coninutul paginii. P recomandm, deci, s folosii imaginile animate cu
grij "i numai atunci c#nd au un rol !ine definit n cadrul paginii.
3. 7ma-ini transparente
$desea o imagine inclus ntr%o pagin arat mai !ine dac are un fundal transparent. 0n fundal
transparent nseamn c de"i imaginea are un fundal de o anumit culoare, el nu este vizi!il n pagin
deoarece fundalul paginii nlocuie"te fundalul imaginii. ,esigur, orice culoare din imagine poate fi
fcut transparent, dar cel mai adesea aceast tehnic se aplic asupra culorii de fundal.
,ac dorim s realizm un fundal transparent pentru o imagine tre!uie s inem seama de o serie de
lucruri:
>undalul tre!uie s ai! o singur culoare "i nu o com!inaie de culori.
)uloarea de fundal nu tre!uie s mai fie prezent altundeva n cadrul imaginii, deoarece transparena
se va aplica tuturor zonelor colorate cu aceea"i culoare
ste recomandat ca fundalul paginii de -e! s ai! atri!utul b$color setat n mod e&plicit
>otografiile sau imaginile cu mai mult de GHB de culori nu sunt potrivite pentru a fi transformate n
imagini transparente deoarece n cadrul lor este greu de definit o singur culoare.
Imaginile pe care dorim s le transformm n imagini transparente tre!uie s fie n format <I>
?n &emplul DH.I am folosit o imagine cu fundalul de culoare al! pe care am prelucrat%o cu ajutorul
aplicaiei :icrosoft /hoto ditor. @u este necesar dec#t s deschidei fi"ierul <I> 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 su! un alt nume dec#t cea
original. Indiferent care este culoarea de fundal a paginii dumneavoastr, fundalul imaginii
transparente va avea aceea"i culoare cu pagina a"a cum se o!serv din >igura DH.I.
,%emplul -2# "
<HTL>
<HEAD>
<TITLE>$ra*ica9</TITLE>
</HEAD>
<B!D" b$color<"c7an">
<H1 ali$n<"center">I%a$ini trans&arente</H1><H+>
<DIJ ali$n<"center">
<H:>I%a$inea ori$inala</H:>
<IG src<"../I%a$ini/$old.$i*">
<H:>I%a$inea trans&arenta</H:>
<IG src<"../I%a$ini/$old?tr.$i*">
</DIJ>
</B!D">
</HTL>
/entru a verifica modul n care funcioneaz imaginea transparent pe diferite culori ale fundalului
paginii, atri!uii atri!utului b$color "i alte valori dec#t cea din e&emplu.
4. 'e(umat
?n documentele -e! pot fi incluse diverse elemente avansate de grafic:
Imagini hart
$nimaie
Imagini transparente
' imagine hart este o imagine care conine zone active pe care se poate efectua clicJ cu mouse%ul,
fiecare zon conduc#nd la deschiderea unui document 89:; diferit.
Imaginile hart sunt de dou tipuri:
Imagini hart de tip server
Imagini hart de tip client 2cele mai utilizate6
' imagine hart de tip client se insereaz ntr%un document cu ajutorul etichetei container <A#>
</A#>. ?n cadrul acestei etichete fiecare zon este definit prin intermediul etichetei <A+EA>.
Imaginile animate sunt fi"iere <I> care se includ n pagin ca orice alt imagine, folosind eticheta
<IG>. /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 fi"ier <I>.
Imaginile transparente sunt imagini la care una dintre culori 2cel mai adesea culoarea de fundal6 este
transformat n culoare transparent, astfel nc#t la includerea ei ntr%o pagin -e! fundalul imaginii
se va confunda cu fundalul paginii.
Capitolul 10
"otoare %e c/utare &i metatag*uri
1. Ce este un motor de c$utare?
,ac avei o minim e&perien n navigarea pe -e! v%ai nt#lnit, fr ndoial cu motoarele de
cutare. Motoarele de cutare sunt aplicaii plasate pe servere deose!it de puternice, care conin
!aze de date imense "i care au drept scop cercetarea "i inde&area sutelor de milioane de pagini -e!
e&istente. 0tilitatea motoarelor de cutare este evident: fr ele ar fi aproape imposi!il s gsim
informaiile care ne intereseaz n oceanul de informaii care este -e!%ul.
:otoarele de cutare conin un formular de tip c#mp de editare n care utilizatorul introduce unul sau
mai multe cuvinte folosite drept cheie de cutare. .ezultatele sunt furnizate su! forma unei liste de
pagini -e! care conin cuvintele cheie introduse. Inde&area unei pagini de ctre un motor de cutare
nseamn asocierea cuvintelor cheie cu coninutul informaional al acesteia. )ele mai folosite
motoare de cutare sunt, n acest moment, <oogle, LahooQ, ;Fcos, <o.com "i &cite.
:otoarele de cutare au drept scop inde&area tuturor paginilor e&istente pe -e!, dar, evident, acest
lucru este imposi!il. 'ric#t de performante ar fi programele cu care lucreaz, numrul de site%uri
care sunt pu!licate n permanen pe -e! dep"e"te posi!ilitile acestora. $cesta este motivul
pentru care simpla postare a unui site pe -e! nu garanteaz c#tu"i de puin c acesta va avea
vizitatori. ,escoperirea lui de ctre motoarele de cutare poate dura ntre "ase luni "i un an. 9ocmai
de aceea nu tre!uie s a"teptai ca site%ul dumneavoastr s fie descoperit, ci tre!uie s%l promovai
activ, una dintre metode fiind nscrierea lui n !azele de date ale motoarelor de cutare.
&ist dou tipuri principale de motoare de cutare, care se !azeaz pe moduri diferite de a face
inde&area paginilor:
:otoarele de cutare de tip (pianjen( care realizeaz inde&area automat, pe !aza cuvintelor cheie
prezente n antetul documentelor 89:; 2de e&emplu <oogle6. $cest tip de motoare folosesc
algoritmi e&trem de performani, care cerceteaz "i inde&eaz milioane de pagini pe zi.
:otoarele de cutare care fac inde&area pe !aza cuvintelor cheie furnizate de creatorul paginii, la
nscrierea acesteia n !aza de date a aplicaiei 2de e&emplu LahooQ6. ?nscrierea n !aza 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( lim!ajul 89:;
include o categorie special de etichete numite metatag%uri.
2. Metata--uri
Metatag.urile sunt o categorie special de etichete care sunt plasate n antetul documentului 89:;
2n !locul <HEAD>6. )a "i celelalte elemente incluse n antetul documentului, cu e&cepia titlului
documentului, metatag%urile nu sunt vizi!ile pentru vizitatorul paginii.
/rimul metatag despre care vom vor!i este deja cunoscut "i l%ai folosit de foarte multe ori p#n
acum: este metatagul <TITLE>. +e utilizeaz conform sinta&ei:
<TITLE>Titlul &a$inii 'eb</TITLE>.
,up cum ai o!servat din e&emplele de p#n acum, titlul paginii apare n !ara de titlu a ferestrei
!rowserului.
:ulte dintre motoarele de cutare afi"eaz n lista de rezultate "i titlul paginilor pe l#ng adresele
0.;. 9itlul paginii este informaia care l determin pe vizitator s intre sau nu pe pagina
dumneavoastr. 9itlul tre!uie s fie o propoziie care s atrag atenia "i n acela"i timp s conin
informaiile eseniale privind su!iectul "i coninutul paginii.
)elelalte metatag%uri se introduc prin intermediul etichetei <META> care nu este o etichet container.
ticheta <ETA> admite o serie de atri!ute care ofer motoarelor de cutare diverse informaii care
s ajute la inde&area paginii. $lte atri!ute ofer informaii !rowserului privind data de e&pirare a
documentului sau specific perioada de timp dup care documentul este rencrcat n mod automat.
&ist dou categorii de metatag%uri:
D. metatag%urile na%e
G. metatag%urile htt&-eKui)
Metata%)urile "name"
)ele mai folosite metatag%uri sunt cele care se refer la cuvintele cheie care caracterizeaz pagina "i
coninutul ei, oferind astfel informaii motoarelor de cutare. $cestea sunt:
";e7Cords"
"descri&tion"
"robots"
Metatag.ul Ake:5or6"A
:etatag%ul ";e7Cords" se introduce conform urmtoarei sinta&e:
<ETA na%e<";e7Cords" content<"lista cu)inte cheie">
;ista cuvintelor cheie tre!uie s includ toate cuvintele pe care considerai c le%ar putea introduce
un vizitator ca cheie de cutare pentru a descoperi pagina dumneavoastr. )uvintele se scriu
desprite prin virgul, fr spaii intre ele. /e l#ng cuvintele cheie, putei folosi "i com!inaii de
cuvinte. ,e e&emplu ntr%o pagin care ofer informaii despre crearea de pagini -e! "i we! design,
cuvintele cheie ar putea fi urmtoarele:
<ETA na%e<";e7Cords" content<"'eb desi$n= creare &a$ini 'eb= construire
site= 'eb site desi$n">
<sirea cuvintelor "i com!inaiilor de cuvinte cheie este o etap care tre!uie tratat cu atenie. /entru
a aduce pagina dumneavoastr n atenia acelor vizitatori pentru care este ea conceput, cuvintele
cheie tre!uie alese cu atenie "i ele tre!uie s reflecte e&act elementele de coninut definitorii ale
paginii.
0nii dintre creatorii de pagini -e! care doresc s o!in o poziionare mai !un n lista de rezultate
furnizate de motoarele de cutare folosesc n mod a!uziv cuvintele cheie, repet#nd acela"i cuv#nt sau
com!inaii de cuvinte de un numr foarte mare de ori sau folosind cuvinte cheie care nu au legtur
cu su!iectul 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 chiar cu eliminarea lor din !aza de date a motorului de
cutare.
Metatag.ul A6e"cri&tionA
:etatag%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:
<ETA na%e<"descri&tion" content<"descrierea subiectului &a$inii">
:ulte motoare de cutare includ n lista de rezultate pe l#ng 0.;%ul "i titlul paginii "i descrierea ei.
/entru a face descrierea paginii dumneavoastr este !ine s folosii com!inaii de cuvinte cheie,
reunite n fraze atractive "i convingtoare. >ii concis n descriere "i plasai informaiile eseniale la
nceput deoarece este posi!il ca descrierile prea lungi s fie trunchiate. )a "i n cazul alegerii
cuvintelor cheie, acordai o atenie deose!it formulrii unei descrieri c#t mai potrivite "i inei seama
c aceasta poate fi singura dumneavoastr "ans de a%l convinge pe utilizator s deschid pagina pe
care ai creat%o. ,escrierea unei pagini poate arta astfel:
<ETA na%e<"descri&tion" content<"Tutorial de 'eb desi$n care )a initia3a
&as cu &as in &rocesul de construire al unui site 'eb. In)atati sa
conce&eti= sa creati si sa &ro%o)ati &ro&riul du%nea)oastra site.">
/e l#ng 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
reu"it s formulai o descriere sugestiv "i convingtoare, o putei folosi chiar ca fraz de nceput n
partea vizi!il a paginii.
Metatag.ul Arobot"A
+unt situaii c#nd creatorul paginii -e! dore"te ca anumite pagini s fie e&cluse de la inde&area de
ctre motoarele de cutare. ,e e&emplu dac ai pu!licat site%ul pe -e! nainte de a fi terminat 2de"i
acest lucru este nerecomandat6 sau dac dorii s reactualizai coninutul anumitor pagini "i dorii ca
p#n la finalizarea modificrilor paginile s nu fie accesate de motoarele de cutare, putei folosi n
antetul paginilor respective metatag%ul (robots( astfel:
<ETA na%e<"robots" content<"noindex= no*olloC">
$ceast construcie comunic motoarelor de cutare s nu inde&eze pagina "i n acela"i timp s nu
urmeze nici una dintre legturile incluse n ea. $tri!utul 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
index % permite inde&area paginii
*olloC % permite urmarea legturilor din pagin
noindex % nu permite inde&area paginii
no*olloC % nu permite urmarea legturilor din cadrul paginii
$lte metatag%uri na%e utilizate sunt:
<ETA na%e<"author" content<"nu%e?autor">
/ermite specificarea numelui autorului paginii
<ETA na%e<"co&7ri$ht" content<"dre&turi co&7ri$ht">
/ermite specificarea drepturilor de autor
<ETA na%e<"$enerator" content<"nu%e? a&licatie">
+pecific aplicaia cu care a fost creat pagina.
&emplu:
<ETA na%e<"$enerator" content<"icroso*t 8ront#a$e 9.@">
Metata%)urile "http-eu!""
/e l#ng metatag%urile na%e care ofer informaii motoarelor de cutare, e&ist metatag%urile htt&-
eKui) care ofer informaii !rowserului privind documentul pe care urmeaz s%l deschid. Iat n
continuare o list a acestor metatag%uri mpreun cu funciile fiecruia dintre ele.
Tabel -3# -
Eticheta
/uncia
<ETA htt&-
eKui)<"/ontent-T7&e"
content<"text/ht%lU
charset<iso-PPDQ-1">
$cest tip de metatag%uri sunt
echivalente cu headerele 899/. le
comunic !rowserului care este tipul
paginii "i cum s o afi"eze precum "i
setul de caractere folosit 2opional6
<ETA htt&-
eKui)<"/ontent-Fcri&t-
T7&e"
content<"text/Ga)ascri&t"
>
+pecific lim!ajul de script folosit n
document
<ETA htt&-
eKui)<"/ontent-Ft7le-
T7&e" content<"text/css">
+pecific lim!ajul de foi de stiluri
folosit n document
<ETA htt&-
eKui)<"ex&ires"
content<"data? ex&irarii>
/ermite precizarea datei la care
documentul poate fi considerat
e&pirat
<ETA htt&-
eKui)<"re*resh"
content<"nr? secunde">
<ETA htt&-
eKui)<"re*resh"
content<"nr secundeU
url<adresa?noua">
+pecific numrul de secunde dup
care pagina este rencrcat automat
de ctre !rowser. $tri!utul content
poate conine, opional, "i adresa
0.; a altei pagini care se va ncrca
n locul paginii curente. $ceast
opiune este util c#nd dorii
redirectarea vizitatorului ctre alt
pagin.
&emplu:
<ETA htt&-eKui)<"re*resh"
content<"DU
url<htt&O//CCC.noua&a$ina.c
o%">
,up cum o!servai, metatag%urile de tip htt&-eKui) sunt folosite pentru a transmite !rowserului
diverse informaii privind documentul 89:;. ,in aceast categorie face parte "i metatag%ul care
permite specificarea modului de tranziie ntre pagini:
<ETA htt&-eKui)<"#a$e-Enter" content<"+e)ealTrans(Duration<nr?secunde=
Transition<cod?tran3itie6">
<ETA htt&-eKui)<"#a$e-Exit" content<"+e)ealTrans(Duration<nr?secunde=
Transition<cod?tran3itie6">
unde: nr?secunde reprezint durata tranziiei n secunde iar cod?tran3itie poate fi unul dintre
codurile de mai jos. >iecare dintre ele realizeaz tranziia paginii n alt mod.
Tabel -3# $
8od de
tranziie
8um se &ace tranziia
C ,reptunghi care se nchide
D ,reptunghi care se deschide
G )erc care se nchide
I )erc care se deschide
K ,e jos n sus
H ,e sus n jos
B ,e la st#nga la dreapta
4 ,e la dreapta la st#nga
3
,ungi care se deplaseaz
spre dreapta
E
,ungi care se deplaseaz n
jos
DC
,reptunghiuri care se
deplaseaz spre dreapta
DD
,reptunghiuri care se
deplaseaz n jos
DG /i&eli care (dizolv( pagina
DI
)ortin care se nchide
orizontal
DK
)ortin care se deschide
orizontal
DH
)ortin care se nchide
vertical
&emplul DB.D ilustreaz funcionarea acestui metatag. /utei o!serva modul de tranziie dintre
pagini din >igura DB.D.
,%emplul -3# -
<HTL>
<HEAD>
<TITLE>%eta1</TITLE>
<ETA htt&-eKui)<"&a$e-enter" content<"+e)ealTrans(duration<D=
transition<@">
<ETA htt&-eKui)<"&a$e-exit" content<"+e)ealTrans(duration<D=
transition<1">
</HEAD>
<B!D" b$color<"red">
<H1 ali$n<"center">Tran3itia intre &a$ini</H1><H+>
#entru a obser)a %odul de tran3itie a&asati <A
hre*<"%eta2.ht%l">aici</A>
</B!D">
</HTL>
/utei schim!a codurile dup cum dorii pentru a o!serva "i alte moduri de tranziie.
,ocumentul meta>+html creat n &emplul DB.G serve"te doar pentru a e&emplifica modul n care se
face tranziia pentru intrarea n pagin.
,%emplul -3# $
<HTL>
<HEAD>
<TITLE>%eta2</TITLE>
</HEAD>
<B!D" b$color<"7elloC">
<H9>#entru a re)eni la &a$ina anterioara a&asati butonul Bac; al
broCserului</H9>
</B!D">
</HTL>
'tenie(
$m precizat c metatag%urile sunt incluse n antetul documentului 89:;. $tunci c#nd folosii cadre n
paginile dumneavoastr nu uitai s plasai metatag%urile n !locul <HEAD> al tuturor documentelor care
se deschid n cadre "i nu numai n documentul de definire a cadrelor <8+AEFET>.
3. 'e(umat
:otoarele de cutare sunt aplicaii foarte puternice care au drept scop inde&area "i adugarea n !aza
lor de date a sutelor de milioane de pagini -e! e&istente.
/entru a facilita inde&area paginii de ctre motoarele de cutare, n antetul documentului 89:; se
includ ni"te elemente speciale numite metatag%uri, prin intermediul etichetei <ETA>.
)ele mai importante metatag%uri sunt cele care furnizeaz motoarelor de cutare lista de cuvinte
cheie asociat paginii "i descrierea acesteia 2metatag%urile (JeFwords( "i (description( 6, precum "i
cel care interzice inde&area paginilor 2metatag%ul (ro!ots( 6.
$lte metatag%uri furnizeaz informaii !rowserului 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 Geb
$m studiat p#n acum elementele fundamentale ale lim!ajului 89:; inclusiv modul n care acesta
poate fi e&tins prin folosirea scripturilor )<I, a scripturilor =ava+cript "i a foilor de stiluri. $vei la
ndem#n acum instrumentele necesare pentru a crea propriul dumneavoastr site -e!. ,ar este oare
suficient7 .spunsul este nu.
/entru a crea un site -e! de calitate, care s comunice informaiile n mod logic "i atractiv "i care s
atrag vizitatori permaneni, cunoa"terea lim!ajului 89:; nu este suficient. ?nainte de a ncepe
scrierea codului 89:; pentru paginile dumneavoastr tre!uie s parcurgei alte dou etape
importante: planificarea site%ului "i sta!ilirea elementelor de -e! design. ,up ce ai finalizat
documentele 89:; care vor face parte din site tre!uie s testai funcionarea linJ%urilor "i aspectul
paginilor n diferite !rowsere. 1i, n fine, dup ce toate aceste etape au fost parcurse, urmeaz
pu!licarea site%ului pe un server -e! care s%l fac accesi!il tuturor celor care navigheaz pe -e!.
?n cele ce urmeaz vom discuta despre etapele care preced construirea documentelor 89:; care vor
forma site%ul "i despre cele care urmeaz dup ce codul 89:; al paginilor a fost definitivat.
Capitolul 11
Planificarea site*ului
Plani&icarea este un aspect crucial n procesul de creare a unui site -e!, deoarece este etapa n care
se iau decizii care vor influena designul, implementarea "i, mai t#rziu, promovarea site%ului. -orld
-ide -e! fiind un mediu deschis "i dinamic, planificarea este mai degra! un proces continuu n
care intervin schim!ri determinate de nnoirea permanent a informaiilor "i de apariia altora noi.
$tunci c#nd creai un site -e! tre!uie s fii con"tient 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 ace"tia pot afecta structura viitoare a site%ului
dumneavoastr.
1. +actori care nu pot ,i p!ani,icai
>actorii pe care creatorul site%ului nu i poate controla "i prin urmare nu pot face o!iectul unei
planificri riguroase sunt urmtorii:
Comportamentul utili?atorului.
$cest factor implic faptul c nu putei controla cum va accesa utilizatorul informaiile din site%ul
dumneavoastr. -e!%ul este un sistem permeabil, aceasta nsemn#nd c un vizitator poate intra n
interiorul site%ului nu numai prin pagina de nceput 2pagina home6 ci "i printr%o pagin oarecare.
Pizitatorul site%ului poate ajunge la el parcurg#nd o list de rezultate furnizat de un motor de
cutare, sau prin intermediul unui linJ aflat pe un alt site, sau parcurg#nd 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 8ome.
?n general, creatorul site%ului este tentat s structureze site%ul av#nd 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. 9re!uie s avei permanent n vedere
faptul c vizitatorul site%ului poate avea un cu totul alt mod de a parcurge site%ul dec#t cel g#ndit de
dumneavoastr "i s%i furnizai de%a lungul ntregului site elemente de navigaie clare care s%l ajute
s se orienteze.
8ro9.erul utili?atorului.
$"a cum am mai discutat, e&ist o mare varietate de !rowsere folosite pentru a vizualiza paginile
-e!. /rin urmare, vizitatorii site%ului vor percepe o imagine diferit a site%ului dumneavoastr, n
funcie de tipul de !rowser folosit. )reatorul site%ului nu poate "ti ce tip de !rowser folose"te un
anumit vizitator "i deci nu are control asupra modului n care va fi afi"at coninutul paginilor sale. ,e
e&emplu, mai e&ist nc utilizatori care folosesc versiuni vechi de @etscape sau &plorer, care nu
suport anumite e&tensii 89:;. &ist de asemenea nc n uz !rowsere te&t, cum este ;Fn&, care
nu suport grafica. ,ac vei plasa informaii eseniale n fi"iere grafice, de e&emplu, ace"ti
utilizatori nu vor avea acces la ele.
,in acest motiv este !ine s sta!ilii de la nceput care dorii s fie nivelul de accesi!ilitate al site%
ului dumneavoastr din acest punct de vedere. 0n alt aspect este nelegerea faptului c 89:; este
un lim!aj care este destinat definirii structurii documentului "i nu al modului su de afi"are. ste
recomandat s evitai specificarea n detaliu a aspectului paginilor sau optimizarea paginilor pentru
un anumit tip de !rowser.
Le%&turile cu pa%ini e#terne.
?ntr%un site -e! e&ist de o!icei legturi ctre resurse e&terioare site%ului care sunt "i ele n afara
controlului dumneavoastr. /aginile referite prin aceste legturi "i pot schim!a adresele, fc#nd
astfel ca legtura s nu mai fie vala!il 2legturi perimate6. ,e asemenea pot e&ista legturi rupte, n
cazul c#nd serverul pe care este gzduit pagina respectiv are anumite dificulti tehnice. ein#nd
seama de imposi!ilitatea de a controla acest aspect, pot fi adoptate mai multe metode de a!ordare:
+ite%ul s nu conin nici o legtur e&tern sau care s se afle n afara controlului direct al
designerului. ste metoda cea mai sigur. ,in pcate, aceast strategie anuleaz posi!ilitatea ca
vizitatorul s !eneficieze de informaii cone&e cu su!iectul site%ului dumneavoastr aflate n
e&teriorul su.
)entralizarea resurselor. ste o practic des nt#lnit pe -e!, aceea de a include toate legturile
e&terne ntr%o pagin special destinat acestora. *eneficiul acestei strategii este c n cazul c#nd una
dintre aceste legturi e&terne nu mai funcioneaz, vizitatorul se poate cu u"urin rentoarce la pagina
de resurse pentru a testa urmtorul linJ. ?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.
Ie"irea li!er. ste cea mai fle&i!il a!ordare, permi#nd plasarea legturilor e&terne oriunde n
cadrul paginilor. ,ezavantajul ei major este c vizitatorul poate prsi prematur site%ul pentru a urma
un anumit linJ.
,ac nu avei control asupra legturilor de la site ctre e&terior, este tot at#t 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. 9ot ceea ce
putei face este s creai un site de calitate "i cu un coninut valoros, care s conving prin el nsu"i.
)u toate c elementele prezentate mai sus pot prea descurajante, unele dintre ele prezint totu"i "i
avantaje. $stfel, permea!ilitatea -e!%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 chiar ca elemente
constitutive ale unui alt site. ,e e&emplu, un site de tip mono%pagin care face prezentarea unui
manual de 89:; poate fi folosit ca pagin individual ntr%un site de li!rrie electronic, sau poate
constitui o legtur util din interiorul unui site de design -e!, 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 tre!uie s parcurg urmtoarele etape:
+ta!ilirea audienei
+ta!ilirea scopului
,efinirea obiectivelor
)olectarea in&ormaiilor despre su!iectul prezentat
+ta!ilirea speci&icaiilor
+ta!ilirea modului de prezentare
6udien;a
/entru a crea un site de calitate "i o comunicare eficient a informaiilor, o etap deose!it de
important este definirea audienei site%ului. $udiena reprezint pu!licul cruia i se adreseaz site%
ul. +ta!ilirea audienei site%ului dumneavoastr este esenial deoarece contri!uie la definirea
coninutului paginilor, precum "i a organizrii "i aspectului su. 0n site -e! creat pe !aza unor
informaii precise asupra audienei sale actuale "i viitoare are mult mai multe "anse de succes dec#t
unul care nu se adreseaz unui pu!lic specific.
+ta!ilirea audienei unui site implic doi pa"i:
,efinirea pu!licului int.
9re!uie s sta!ilii cui se adreseaz site%ul dumneavoastr. /utei, de e&emplu s v adresai
(persoanelor care studiaz chimia(. ,e"i este un enun care define"te ntr%o oarecare msur
audiena site%ului, este de dorit ca definirea audienei s fie mai precis dec#t at#t. P putei
adresa de pild, speciali"tilor n chimie, "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
chimiei, 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 su!iecte cu care elevii se vor confrunta
la e&amene.
,ac, de e&emplu, dorii s creai un site comercial, sta!ilirea segmentului de pia cruia v
adresai este la fel de important. ,ac intenionai s vindei produse cosmetice v vei adresa
pro!a!il femeilor. ,ar aceasta este o reprezentare mult prea general a pu!licului dumneavoastr.
$i putea s fii mai specific, sta!ilindu%v drept segment de pia femeile cu v#rsta mai mic de
GH de ani. ?n aceast situaie este mai pro!a!il c vor avea succes produsele de nfrumuseare mai
ndrznee, n vreme ce, dac v adresai femeilor de v#rst medie, cele mai !ine v#ndute vor fi
produsele de ntreinere, cremele anti%rid, etc.
)oncluzia care se impune este c definirea c#t mai precis a audienei este definitorie pentru toate
etapele ulterioare ale ela!orrii site%ului. )u c#t mai !ine definit este audiena, cu at#t "ansele de
a crea un site de succes sunt mai mari.
,efinirea informaiilor necesare care privesc pu!licul int.
@u toate informaiile despre pu!licul int sunt eseniale n ela!orarea site%ului. ,ac intenionai
s v adresai speciali"tilor n chimie, care anume caracteristici ale acestora sunt importante
pentru dumneavoastr7 @ivelul de educaie7 $ria de specializare7 )aracteristici personale,
precum nlimea "i greutatea7 vident, e&cept#nd cazul n care intenionai s vindei prin
intermediul site%ului echipament de la!orator, ultimele informaii sunt inutile. /rin urmare este
necesar s identificai informaiile relevante privitoare la audiena site%ului dumneavoastr.
Scopul
+ta!ilirea scopului site%ului este etapa n care tre!uie s rspundei la ntre!area (de ceK(. ,e ce
dorii s creai acest site7 ,efiniia scopului site%ului reprezint tema conductoare n procesul de
construire a acestuia. 0n site fr un scop clar "i !ine definit lanseaz un mesaj neconvingtor "i
ceos. Pizitatorul se va ntre!a, fr ndoial, (;a ce serve"te acest site7( "i se va gr!i s%l
prseasc.
/entru a defini scopul site%ului tre!uie s avei n vedere urmtoarele elemente:
$ria de cuprindere a su!iectului. + presupunem c dorii s creai un site care s conin informaii
despre muzica rocJ a anilor ABC. ?ntr%o asemenea situaie, nu vei defini drept su!iect al site%ului
muzica rocJ n ansam!lu, deoarece o definire at#t de vast dep"e"te cu mult aria de cuprindere a
su!iectului dumneavoastr.
$udiena. ?n scopul site%ului tre!uie s facei referire "i la audiena sta!ilita anterior. $stfel, scopul
site%ului ar putea fi definit n maniera urmtoare: (+ite%ul ofer informaii iu!itorilor muzicii rocJ a
anilor ABC, de v#rst medie(.
@ivelul de detaliere a su!iectului. 9re!uie s specificai dac v referii doar la grupurile rocJ
reprezentative sau dorii s facei o istorie complet a perioadei.
*eneficiul sau avantajul vizitatorului. )e are de c#"tigat o persoan care viziteaz site%ului
dumneavoastr7 /oate afla informaii inedite despre formaiile preferate, sau poate fi informat cu
privire la evoluia lor ulterioar.
+ta!ilirea scopului site%ului determin deciziile ulterioare ale designerului privind mesajul pe care l
transmite site%ul. 0n scop !ine articulat serve"te ca jalon pentru toate celelalte etape ale procesului de
planificare "i creare a site%ului. +copul site%ului poate reprezenta chiar prima informaie care le este
oferit vizitatorilor, la intrarea pe prima pagin.
@biectivele
,up ce ai sta!ilit audiena site%ului, care sunt informaiile privitoare la pu!licul int, precum "i
scopul su, pasul urmtor const n com!inarea tuturor acestor informaii "i formularea unor
o!iective specifice ale site%ului dumneavoastr. '!iectivele reprezint o detaliere a scopului general
al site%ului, conin#nd 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 ora"ul fff( ,
acesta poate fi dus la ndeplinire prin intermediul unor o!iective specifice "i variate cum ar fi:
informaii despre a"ezarea geografic a ora"ului, despre dezvoltarea economic, despre viaa
cultural, o!iective turistice, etc. )u alte cuvinte, n vreme ce scopul site%ului comunic ce avei de
g#nd s facei, o!iectivele comunic ce informaii vei oferi pentru a v ndeplini scopul propus.
+pre deose!ire de scopul site%ului, o!iectivele se pot modifica n timp, pe msur ce apar noi
informaii despre pu!licul int sau despre su!iectul site%ului, cu ajutorul crora putei susine mai
!ine scopul su.
Colectarea in4orma;iilor de.pre .ubiect
Informaiile referitoare la su!iectul site%ului includ at#t informaiile on#line c#t "i sursele clasice de
informaii. ?n aceast etap vei colecta nu numai informaii legate de su!iectul site%ului care vor fi
prezentate utilizatorului ci "i informaiile "i cuno"tinele de care avei nevoie pentru realizarea site%
ului.
/a"ii necesari n construirea coleciei de informaii necesare sunt:
+ta!ilirea informaiilor necesare, at#t cele pe care le vei furniza vizitatorului c#t "i cele care v sunt
necesare dumneavoastr
,eterminarea modului cum vei o!ine aceste informaii. ?n aceast etap tre!uie s identificai
sursele de documentare. Informaiile despre su!iectul ales le putei gsi pe -e!, n literatura de
specialitate, n diverse !aze de date.
:odul de reactualizare a informaiilor. ,ac informaiile pe care dorii s le prezentai sunt dinamice
"i se perimeaz cu repeziciune, tre!uie s sta!ilii 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 tre!ui reactualizate zilnic sau chiar mai frecvent. ,ac
site%ul prezint informaii despre istorie, evident c informaiile vor fi reactualizate mult mai rar,
eventual la apariia unor noi descoperiri arheologice, de e&emplu.
Speci4ica;iile
+ta!ilirea specificaiilor pentru un site reprezint o detaliere a o!iectivelor 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 o!iectivele unui site este
(furnizarea de legturi ctre surse !i!liografice referitoare la su!iect( , atunci specificaiile vor
preciza care sunt aceste surse !i!liografice, care sunt adresele lor 0.;, c#te astfel de adrese vor fi
incluse ntr%o pagin, etc.
+pecificaiile tre!uie s identifice toate resursele necesare atingerii o!iectivelor: linJ%uri, fi"iere
grafice, fi"iere de sunet sau video, alte elemente care vor fi incluse n site: formulare, imagini hart,
scripturi. ,e asemenea, n cadrul specificaiilor tre!uie sta!ilite "i elementele care nu vor fi incluse n
pagini 2dac este cazul6. ,e e&emplu, se poate specifica s nu fie folosite anumite e&tensii 89:;,
sau formulare, fi"iere care s dep"easc anumite dimensiuni, etc.
Modul 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 89:;, imagini hart, sau formulare
"alonarea 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 tre!uie
identificai factorii care nu pot fi controlai printre care se numr: comportamentul utilizatorului,
!rowserul cu care va fi vizualizat pagina "i legturile cu pagini e&terne.
/lanificarea site%ului parcurge urmtoarele etape:
+ta!ilirea audienei site%ului
+ta!ilirea scopului site%ului
,efinirea o!iectivelor site%ului
)olectarea informaiilor despre su!iectul prezentat
+ta!ilirea specificaiilor site%ului
+ta!ilirea modului de prezentare a site%ului
0n site de calitate, care s ofere informaii valoroase n mod atractiv "i s permit o comunicare
eficient a acestora nu se na"te n mod nt#mpltor. >r a avea o privire de ansam!lu asupra
aspectelor sta!ilite n faza de planificare, "ansele de a realiza un site de !un calitate sunt minime.
,ac vei ncepe s scriei direct codul 89:; fr s trecei prin etapa de planificare vei o!ine doar
o ngrmdire de pagini fr coeren, adesea defectuos legate ntre ele, cu un coninut neclar "i sla!
structurat.
Capitolul 15
<esignul site*ului
'dat parcurs etapa de planificare, av#nd clare audiena, scopul, o!iectivele "i specificaiile site%
ului, putei trece la etapa de creare efectiv. /entru ca site%ul dumneavoastr s ai! un aspect plcut,
o !un organizare, instrumente de navigare eficiente tre!uie s cunoa"tei "i s aplicai regulile
fundamentale de -e! design.
)#nd suntei n faza de concepere a designului principalul dumneavoastr o!iectiv 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 tre!uie s echili!reze performanele !rowserului, cu estetica "i
funcionalitatea site%ului. ?n etapa de design sunt luate deciziile de ordin practic care vor conduce la
ndeplinirea o!iectivelor sta!ilite: c#te imagini sau elemente grafice vei include n pagin, c#t de
mult te&t vor conine paginile, ce te&te sau imagini vor fi folosite drept legturi.
1. 5rincipii!e desi-nu!ui Be9
/entru a lua deciziile corecte n ceea ce prive"te designul unui site tre!uie s avei n vedere c#teva
principii de !az:
'socierea semni&icaiilor# >olosii%v de puterea hFperte&tului pentru a sta!ili legturi ntre
informaiile nrudite ca semnificaie.
Meninerea competitivitii# ,eoarece -e!%ul este un mediu foarte competitiv, asigurai%v c
designul site%ului se menine la cel mai sczut cost posi!il, 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.
/olosirea e&icient a resurselor# $legei pentru site%ul dumneavoastr acele elemente care vin n
nt#mpinarea necesitilor utilizatorului, "i sunt c#t mai eficiente posi!il din punctul de vedere al
dimensiunii fi"ierelor, al timpului de acces "i al ntreinerii ulterioare.
8oncentrarea pe necesitile utilizatorului# $cesta este, poate, cel mai important principiu de -e!
design "i, parado&al, cel mai adesea ignorat. 0n site -e! nu se construie"te pentru a satisface gustul
designerului 2sau al clientului pentru care lucreaz6 "i nici pentru a etala cuno"tinele sale vaste
asupra celor mai noi tehnici de programare -e!, ci pentru a veni n nt#mpinarea nevoii de informaii
a vizitatorilor si. >ocalizarea asupra utilizatorului este prioritatea principal a unui site de calitate.
Jnelegerea permeabilitii# $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 posi!il, este o!ligatorie prezena unor instrumente de navigaie eficiente care s permit
vizitatorului orientarea cu u"urin n interiorul site%ului.
8rearea unui aspect plcutD coerent Fi &luent# /aginile site%ului tre!uie s ofere impresia unui tot
!ine organizat, elementele vizuale 2icon%uri, elemente de navigare6 tre!uie s fie coerente pe tot
parcursul site%ului, fiecare pagin tre!uie s conin indicii asupra identitii site%ului "i asupra
scopului ei.
*usinerea interactivitii# )hiar dac nu folosii formulare care asigur un grad nalt de
interactivitate cu vizitatorii site%ului, este o!ligatorie prezena unor informaii de contact 2adresa de
mail a -e!master%ului, cel puin6 astfel nc#t utilizatorii s poat o!ine informaii suplimentare sau
s poat comunica eventualele pro!leme aprute la parcurgerea site%ului.
*usinerea navigaiei# $sigurarea unor instrumente de navigaie eficiente este una dintre condiiile
eseniale ale unui site de calitate. +e spune c un site !un este acela n care vizitatorul nu este
niciodat o!ligat s apese !utonul *acJ al !rowserului.
2. Cr-ani(area unui site
*una organizare a site%ului este unul dintre elementele cheie ale succesului su. :odul de organizare
depinde de scopul, o!iectivele "i su!iectul site%ului "i se !azeaz 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 2mono%pagin6
site%uri liniare formate din mai multe pagini 2multi%pagin6
site%uri cu structur ierarhic
site%uri cu structur de tip -e!
;egturile dintre pagini tre!uie s fie corespunztoare tipului de site pe care l construii.
Site)urile liniare mono)pa%in&
$cest tip de site este, a"a cum indic "i numele, format dintr%o singur pagin. $ceast structur se
folose"te atunci c#nd informaiile prezentate sunt su! form de te&t care se poate mpri firesc n
seciuni mai mici. Pizitatorii pot parcurge ntreaga pagin derul#nd%o dar, de o!icei, la nceputul
paginii e&ist o list de legturi care are rol de )uprins. $cestea sunt ni"te legturi interne 2ancore6
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. ste
indicat ca la fiecare nou seciune s inserai o legtur intern ctre partea superioar a paginii unde
se afl )uprinsul.
Site)urile liniare multi)pa%in&
+tructura de acest tip se folose"te n situaia c#nd informaiile prezentate se succed ntr%o ordine
secvenial, de la nceput la sf#r"it, informaiile prezentate ntr%o pagin !az#ndu%se pe cele din
pagina anterioar. /entru a%l ndruma pe vizitator s parcurg site%ul n ordine, fiecare pagin tre!uie
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 tre!uie s conin )uprinsul, pentru a facilita "i
saltul direct la o anumit pagin. ?ntr%un site cu o astfel de structur paginile nu tre!uie s fie prea
lungi 2de dorit ar fi s nu dep"easc un ecran6 pentru a face navigarea mai comod. )u toate c acest
tip de organizare este logic, nu tre!uie s uitai principiul permea!ilitii. /entru un vizitator care va
intra n site printr%o pagin oarecare, indicaii de navigare cum ar fi (?nainte( , (?napoi( ar putea s nu
ai! prea mult neles.
Site)urile cu .tructur& ierar7ic&
+ite%urile de acest tip sunt cele mai numeroase pe -e!. 0n astfel de site este format dintr%o pagin de
!az 28ome6 de nivel zero, care conine legturi ctre alte pagini, fiecare pagin conin#nd c#te o
parte a su!iectului site%ului. >iecare dintre aceste pagini de nivel unu poate avea, la r#ndul su,
legturi cu alte pagini, detaliind su!iectul "i furniz#nd informaii specifice.
0n e&emplu de site de acest tip este o li!rrie virtual. /agina 8ome ar putea conine legturi ctre
diverse categorii: *eletristic, Istorie, /olitic, conomie, )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, 8ardware.
Pa alege legtura /rogramare care va deschide o pagin de nivelul doi care va conine o list de
titluri, printre care "i manualul cutat.
$tunci c#nd concepei structura unui astfel de site, tre!uie s acordai o mare atenie organizrii
logice "i fluente a site%ului. >iecare pagin tre!uie s conin o legtur ctre pagina 8ome astfel
nc#t vizitatorul s poat reveni la nceput fr s fie o!ligat s str!at toate nivelele. @u legai
prima pagin de prea multe pagini de nivelul unu ci ramificai%le n ad#ncime. ,ac site%ul este de
mari dimensiuni, introducei n partea superioar a fiecrei pagini o !ar de navigare care informeaz
vizitatorul despre locul unde se afl. .evenind la e&emplul cu li!rria, un astfel de instrument de
navigare ar putea arta a"a: 'ome W Calculatoare 3 *rogramare+
?n plus, este indicat s oferii o !ar de navigare secundar la !aza paginii.
Site)urile de tip re;ea.
$ceste site%uri au o structur li!er. le sunt formate din mai multe pagini, fiecare put#nd avea
legtur cu oricare alt pagin. &ist "i aici o pagin 8ome, ns de la ea, vizitatorul poate naviga
prin site fr a urma un drum precis. ?n general, acest tip de site este potrivit pentru su!iectele care
nu au o structur logic intern, su!iecte recreaionale sau distractive. ,ac dorii s creai un site de
acest tip, tre!uie s avei grij s oferii n fiecare pagin, pe l#ng legturile cu alte pagini, o
legtur ctre pagina 8ome. ?n plus, asigurai%v c materialul dumneavoastr este adecvat acestui
tip de site deoarece altfel site%ul va purta amprenta neconcordanei ntre su!iectul a!ordat "i modul
su de organizare.
3. Metodo!o-ia de construire a site-u!ui
,e"i nu e&ist un mod unic de desf"urare a procesului de construire a unui site, e&ist trei tipuri de
a!ordri posi!ile, pe care creatorul site%ului le poate alege sau com!ina, n funcie de necesiti.
Metoda ETop)5o9nE
,ac designerul are nc de la nceput o idee clar asupra coninutului site%ului, aceast a!ordare este
cea mai potrivit. ?n acest tip de metodologie, este creat mai nt#i pagina de nceput a site%ului
2pagina 8ome6 "i apoi celelalte pagini. /aginile pot conine un minim de informaii, urm#nd ca la
dezvoltarea ulterioar a site%ului, ele s fie m!ogite. $vantajul major al acestei a!ordri este acela
c permite continuitatea vizual "i de coninut, deoarece toate paginile vor fi construite n acord cu
pagina de start. ' metod foarte !un de a realiza acest lucru este crearea unor template%uri care s
conin acela"i tip de elemente pentru toate paginile "i care vor fi folosite drept tipare la momentul
scrierii codului 89:; pentru paginile respective.
Metoda E8ottom)FpE
$ceast a!ordare se folose"te c#nd designerul nu cunoa"te de la nceput care vor fi structura "i
aspectul final al site%ului, dar cunoa"te aspectul "i coninutul unor pagini din cadrul su. $ceast
situaie poate aprea c#nd dorii ca site%ul s conin pagini deja e&istente, care au fost create n
procesul de dezvoltare al altui site, de e&emplu. )hiar dac nu deinei pagini create deja de la care s
pornii, aceast a!ordare permite crearea unor pagini individuale care ndeplinesc anumite o!iective
"i care pot fi legate apoi de o pagin 8ome. $vantajul a!ordrii (*ottom%0p( este acela c, la
construirea paginilor individuale, nu mai suntei constr#ns la respectarea unui anumit stil, consecvent
cu cel din pagina 8ome. 9otu"i, 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, av#ndu%se n vedere crearea unor pagini intermediare, pe msura necesitilor. :etoda se
folose"te atunci c#nd este necesar construirea rapid a unui site care urmeaz a fi dezvoltat ulterior,
n loc de a%l construi n ntregime de la nceput. ste o metod nerecomandat nceptorilor, deoarece
prin adugirile ulterioare e&ist riscul de a o!ine un site defectuos organizat "i lipsit de unitate.
4. Te*nici de desi-n Be9
/entru a realiza designul unui site sunt folosite o serie de tehnici cu ajutorul crora paginile capt
contur, at#t din punct de vedere vizual c#t "i din punct de vedere al organizrii legturilor "i al
amplasrii coninutului n pagini. ?n continuare sunt prezentate c#teva dintre aceste tehnici, fiecare
dintre ele referindu%se la c#te un aspect al designului site%ului.
Sc7i;a .ite)ului
'dat ce v%ai decis asupra modului n care va fi structurat site%ul este foarte !ine ca nainte de a
ncepe scrierea efectiv a codului 89:; pentru fiecare pagin n parte, s realizai o schi a
ntregului site.
/utei folosi n acest scop :icrosoft -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 8ome.
>acei de asemenea o list a elementelor grafice pe care intenionai s le includei, nsoite de
indicaii privind a"ezarea lor n pagin. +ta!ilii care sunt paginile de nivel unu "i ce informaii dorii
s oferii n cadrul lor, precum "i paginile su!ordonate acestora care vor cuprinde detalierea
su!iectelor anunate n paginile de nivel unu.
/entru a avea o imagine c#t mai e&act a structurii site%ului nc din faza de schiare a sa este
recomandat s folosii !ara de instrumente Outlining din meniul )ools W Customi8e din -ord.
$ceasta v permite s sta!ilii nivelul paginilor "i s realizai cu u"urin ramificarea lor n ad#ncime.
' alt metod pentru a realiza schia site%ului o constituie graficul 2sau harta6 site%ului. ,ac nu
dorii s v complicai folosind un editor de te&t sau un program de grafic, putei realiza o astfel de
schi "i pe h#rtie, cu creionul. ,esenai c#te un dreptunghi pentru fiecare pagin din site, specific#nd
n interiorul su scopul "i o!iectivele paginii, elementele "i aranjarea lor n pagin. $poi unii
dreptunghiurile prin sgei pentru a specifica traseele pe care le poate parcurge utilizatorul. +geile
reprezint de fapt legturile dintre pagini. $vei grij ca spre pagina 8ome 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 schia site%ul, la fiecare pagin tre!uie s v punei urmtoarele
ntre!ri:
)e doresc s afle vizitatorul din aceast pagin7
)e doresc s fac vizitatorul n acest moment7
)e doresc s simt vizitatorul parcurg#nd pagina7
0nde doresc s mearg vizitatorul n continuare7
,esigur, n ultim instan comportamentul "i impresiile vizitatorului scap controlului designerului,
ns un site n care fiecare pagin d rspunsuri clare "i limpezi acestor ntre!ri are foarte multe
"anse de a ntruni aprecierile pozitive ale vizitatorilor si.
Pagina de intrare In site Lpagina splashM
&ist multe site%uri care nainte de pagina 8ome au o pagin de intrare n site, numit pagin
splash. +copul unei astfel de pagini este identificarea rapid a o!iectului site%ului n timp ce se
ncarc restul de date. /agina splash are pentru site acela"i rol pe care l are coperta unei cri sau
prima pagin a unei reviste. $ceast prim pagin tre!uie s se ncarce rapid, s ai! un impact
vizual puternic "i s comunice esenialul despre su!iectul site%ului sau compania creia i aparine
site%ul.
&ist opinii divergente n legtur cu folosirea "i utilitatea paginii splash ntr%un site. :ai ales dac
face apel la elemente multimedia, sunet, grafic, animaie comple& care ncetinesc timpul de
ncrcare, pagina splash poate aduce mai degra! deservicii site%ului. ?n plus, pagina splash poate fi
resimit de vizitator ca o !arier n accesul imediat la informaiile din interiorul site%ului.
Pagina Home
,e"i aspectul "i coninutul paginii 8ome poate varia foarte multe de la un site la altul, e&ist c#teva
elemente comune prezente n orice pagin de start:
Identificarea firmei sau companiei creia i aparine site%ul 2dac este cazul6
,escrierea scopului site%ului
,escrierea structurii site%ului. /agina 8ome are "i funcia de )uprins al site%ului oferind indicaii
vizitatorilor asupra su!iectelor a!ordate
+ta!ilirea relaiilor ntre seciunile de nivel unu ale site%ului "i cele su!ordonate lor. $ceasta se
realizeaz prin intermediul !arelor de navigare, !utoanelor, hrilor de imagini sau listelor de legturi.
>urnizarea informaiilor de contact.
Paginile din interior
/aginile de nivel unu reprezint diviziunile majore ale su!iectului general al site%ului. &ist tentaia
de a include prea multe informaii detaliate la acest nivel. ,ac site%ul acoper un su!iect vast, cu o
cantitate mare de informaii specifice, este !ine s lsai detalierea acestora pentru paginile de nivel
doi. /aginile de nivel unu tre!uie s conin o descriere succint a su!iectului acoperit precum "i
legturi ctre paginile de nivel doi care detaliaz fiecare parte a su!iectului. ' tehnic des utilizat
este plasarea resurselor suplimentare n pagini de nivelul trei. ,e e&emplu o pagin de nivelul doi
care ofer pe l#ng te&t "i imagini e&plicative ale unui anumite noiuni poate fi legat de pagini de
nivel trei care conin imaginile. )#nd vizitatorul face clicJ pe un anumit te&t aflat n pagina de nivel
doi se deschide pagina de nivel trei cu imaginea e&plicativ. $vantajul acestei a!ordri este
descongestionarea paginilor de nivelul doi care cuprind detalierea su!iectului.
+chia dumneavoastr tre!uie s cuprind, pe l#ng modul de organizare a paginilor, "i o list c#t mai
complet a elementelor pe care dorii s le includei n fiecare pagin 2imagini, formulare, fi"iere
multimedia, etc.6.
!ra%mentarea in4orma;iilor
'mul poate procesa o cantitate limitat de informaii ntr%o anumit unitate de timp. ,in acest motiv,
una dintre sarcinile specifice n designul -e! este fragmentarea informaiilor n secvene care s nu
dep"easc posi!ilitile de cuprindere ale utilizatorului. )antitatea de informaii cuprins ntr%o
pagin nu tre!uie s%l cople"easc pe vizitatorul paginii sau s mreasc timpul ei de ncrcare. ,e
asemenea, modul de fragmentare al informaiei tre!uie s focalizeze atenia vizitatorului asupra
principalelor su!iecte a!ordate n pagin "i s l ajute s ia cuno"tin n mod gradat de su!iectul
prezentat. >ragmentarea corect a informaiilor este n avantajul designerului, deoarece l ajut s
creeze pagini reutiliza!ile. ,ac fiecare pagin pe care o vei crea serve"te 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 su!iecte cone&e cu pagina respectiv.
?n cadrul site%ului fragmentarea informaiilor conduce la sta!ilirea modului n care va fi detaliat
su!iectul, la determinarea numrului de pagini necesare pentru acesta precum "i a nivelului paginilor.
,e"i divizarea su!iectului n pri mai mici este o tehnic deose!it de util, nu a!uzai totu"i de
puterea hFperte&tului. ' fragmentare e&cesiv a su!iectului ntr%un mare numr de pagini este la fel
de o!ositoare ca "i prezentarea acestuia n !loc. 0n design eficient anticipeaz nevoia vizitatorului de
a o!ine 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 su!iectului
prezentat. /entru a diferenia prile constitutive ale su!iectului unei pagini o mare importan o are
organizarea te&tului n cadrul paginii.
)ei mai muli dintre cei care navigheaz pe -e! o!i"nuiesc s (scaneze( paginile n cutare de
informaii. i citesc mai nt#i titlurile, listele, "i primele fraze dintr%un paragraf. ste !ine s inei
seama de acest lucru c#nd organizai te&tul n pagin.
)oninutul paginii tre!uie s fie c#t mai u"or de citit. >olosii paragrafe scurte, desprite prin linii
li!ere, evitai frazele prea lungi "i folosii n mod judicios titlurile. $ccentuai prile pe care vrei s
le scoatei n eviden n te&t prin ngro"are sau scrierea lor cu alt culoare, dar nu n e&ces. $!uzul
de culori sau de te&te scrise cu caractere aldine fac pagina ncrcat "i greoaie. ste indicat s v
limitai la un numr redus de tipuri de font. )ele mai apreciate sunt Perdana "i $rial, deoarece sunt
lizi!ile "i elegante. ste mai !ine s evitai folosirea tipului 9imes @ew .oman, de"i este un tip
foarte folosit n editarea de te&te. +pre deose!ire de te&tele tiprite, pe monitor citirea se face cu GH5
mai ncet deoarece monitorul adaug fonturilor un anumit grad de neclaritate 2fu88iness6, mai
accentuat la fonturile cu serife, a"a cum este 9imes @ew .oman. @u aranjai te&tul n pagin pe dou
coloane astfel nc#t 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 -e!
deoarece rupe cursivitatea deplasrii n cadrul site%ului.
Le%area pa%inilor
:odul n care vei realiza legturile dintre pagini depinde de structura site%ului. ,ac optai pentru o
structur ierarhic, legturile din interiorul site%ului vor fi adaptate acestei structuri. $vantajul
structurii ierarhice este c ofer utilizatorului posi!ilitatea unei navigri logice, plec#nd de la
informaiile generale ctre cele particulare. ,ezavantajul acestei tehnici este c utilizatorul tre!uie s
urmeze o cale presta!ilit pentru a ajunge la o anumit informaie, care se poate afla c#teva linJ%uri
distan de pagina 8ome.
' alt manier de a realiza legturile din interiorul site%ului este de a lega fiecare pagin de toate
celelalte. Pei o!ine astfel o structur ne%ierarhic care are avantajul c fiecare pagin se afl la
distan de un linJ de oricare alta, inclusiv de pagina 8ome. /entru site%urile de dimensiuni reduse o
astfel de structur poate funciona !ine, ns pentru site%urile cu un mare numr de pagini numrul de
legturi cre"te rapid iar navigarea n interiorul site%ului devine foarte dificil. ?n plus, utilizatorul nu
are la dispoziie o cale ierarhic prin care poate ajunge la o informaie specific.
,n.trumentele de navi%are
/entru a realiza o navigare logic "i eficient n cadrul site%ului instrumentele de navigare tre!uie 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 acelea"i n toate paginile.
+ta!ilii de la nceput aspectul icon%urilor, !utoanelor sau te&tului pe care le vei folosi drept legturi
"i pstrai%l pe parcursul ntregului site. $ceast tehnic ofer site%ului coeren "i unitate "i sta!ile"te
imediat identitatea fiecrei pagini n cadrul site%ului. ?n plus, folosirea repetat a acelora"i elemente
grafice de navigare mre"te eficiena !rowserului deoarece acestea sunt ncrcate la deschiderea
primei pagini "i stocate n memoria cache, fr a mai fi necesar ncrcarea lor la fiecare nou
pagin.
Instrumentele de navigare tre!uie s fie c#t mai u"or de neles "i localizat. ,ac folosii o !ar de
navigare plasai%o acolo unde vizitatorii sunt o!i"nuii s o caute: n partea superioar a paginilor, n
st#nga sau n dreapta paginii. >olosii o !ar secundar de navigare la !aza 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 p#n la !ara principal de navigare.
,ac site%ul este de dimensiuni mari este o idee !un s creai o pagin special care s reprezinte
harta site%ului "i s plasai legtura ctre ea n !ara 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. 8arta va conine legturi ctre toate paginile, grupate conform modului de organizare al
site%ului.
,e asemenea, dac folosii o structur ierarhic, 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 3 *agina de nivel unu 3 *agina de nivel doi 3 *agina curent+
,n4orma;iile de.pre .ite i pa%ina curent&
>iecare pagin a site%ului tre!uie s conin indicaii privind scopul "i o!iectivele site%ului precum "i
o!iectivele specifice acelei pagini. ?n faza de planificare ai colectat informaii privind pu!licul int,
ai formulat scopul "i o!iectivele ntregului site. $cestea reprezint elementele fundamentale n jurul
crora este construit site%ul. >iecare pagin a sa are drept scop ndeplinirea unuia dintre o!iective.
$ceste informaii tre!uie comunicate n pagina respectiv. Pizitatorul nu tre!uie forat s ghiceasc
ce rol are o anumit pagin n cadrul site%ului.
:ulte site%uri prezente pe -e! conin o pagin special cu informaii de contact precum "i o pagin
care conine informaii despre site "i creatorii si 2pagina /bout6. 9otu"i este recomandat ca aceste
informaii s fie incluse "i n su!solul paginilor din interiorul site%ului. ste !ine s includei aici
informaii despre copFright, data ultimei reactualizri a paginii, despre organizaia sau compania
creia i este dedicat site%ul 2dac este cazul6 "i informaii de contact 2adres de mail, numr de
telefon, adres po"tal6.
@r%ani?area pa%inii cu aAutorul tabelelor
0nul dintre aspectele pe care tre!uie s le avei n vedere la construirea unei pagini este rezoluia
ecranului. :uli dintre vizitatorii paginii folosesc rezoluia de 3CC&BCC de pi&eli. ' pagin cu
limea mai mare de BCC de pi&eli poate face necesar derularea pe orizontal a paginii, care pentru
muli vizitatori este o!ositoare "i incomod. ,in acest motiv, este recomandat ca tot coninutul
paginii s fie inclus ntr%un ta!el de !az cu limea de BCC de pi&eli.
Tabelul de baz
)onstruirea paginii ncepe cu un ta!el de !az, cu limea 2Cidth6 de BCC de pi&eli, o linie "i o
coloana. $liniai ta!elul la marginea din st#nga sau centrat n pagin. +etai chenarul 2border6 la
valoarea (C( pentru a%l face invizi!il pentru vizitator. ?ntregul coninut al paginii va fi plasat n
interiorul acestui ta!el.
$sigurai%v c ai setat culoarea de fond 2b$color6 pentru pagina dumneavoastr. 'piunea
(default( las !rowserul s controleze culoarea fondului. ,e cele mai multe ori aceasta este al!, dar
este mai !ine s avei certitudinea c ea va aprea la fel n orice !rowser, a"a nc#t setai
b$color<"Chite" sau orice alt culoare dorii.
?n funcie de felul cum dorii s v organizai site%ul "i de scopul acestuia vei hotr unde dorii s
plasai !ara principal de navigare.
:ara de navigare In stNnga paginii
,ac ai decis s optai pentru plasarea !arei de navigare n partea st#nga 2cea mai uzual a"ezare6,
vei include n ta!elul de !az un ta!el cu G sau I coloane.
,ac folosii un ta!el cu G coloane setai distana ntre celule 2cell&addin$6 la valoarea (K( pentru
a spaia te&tul de marginea ta!elului. /utei specifica limea celulelor fie n pi&eli fie n procente.
,ac folosii un ta!el cu I coloane, coloana din centru poate fi folosit ca (tampon( , care va separa
coninutul coloanei din st#nga de coninutul celei din dreapta. +etai atri!utul border al ta!elului la
(C( pentru ca marginea s nu fie vizi!il. 'dat sta!ilite aceste atri!ute, putei aduga n ta!el at#tea
linii c#te sunt necesare sau putei include un alt ta!el n cel e&istent.
:ara de navigare In partea superioara
/entru a construi o !ar de navigare n partea de sus a paginii, tre!uie s includei n ta!elul de !az
un ta!el cu o singura coloana. +etai atri!utele cell&addin$ < ":" "i border < "@". ?n prima
linie a ta!elului vei introduce logo%ul sau titlul site%ului, n linia a doua vei afi"a !ara de navigare,
iar pe liniile urmtoare, coninutul paginii.
:ara de navigare In partea dreapta
ste o a!ordare 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 st#nga, care ocup cea
mai mare parte a spaiului.
>olosirea ta!elelor pentru organizarea coninutului paginii este o practic foarte folosit. 9a!elele vor
pstra imaginile "i te&tul acolo unde le%ai plasat. /utei include "i alte ta!ele 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.
#. <ree!i de desi-n
?n procesul de creare a unui site pot aprea o serie de gre"eli de design, cele mai multe datorate
nerespectrii tehnicilor "i principiilor prezentate anterior.
Pa%ini 4&r& le%&turi 'E4und&turiE*
0na dintre cele mai frustrante situaii n care se poate gsi o persoan care navigheaz pe -e! 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 o!serv#nd prima parte a adresei 0.; a paginii,
care apare n !ara de adrese a !rowserului. ,ar a fora vizitatorul s efectueze aceast manevr este
cu totul nerecomandat. )el mai pro!a!il acesta nu se va osteni s caute pagina 8ome a unui
asemenea site ci l va prsi definitiv. vitai s creai asemenea pagini.
/rezena unor (fundturi( ntr%un site denot faptul c designerul nu a neles caracterul permea!il al
-e!%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 dore"te s
conduc vizitatorii de%a lungul site%ului pe un traseu liniar, presta!ilit. $ceasta nu nseamn c acest
tip de site%uri nu tre!uie folosit, mai ales dac informaiile prezentate sunt adecvate acestui mod de
prezentare. 9re!uie ns acordat atenie instrumentelor de navigare care tre!uie astfel concepute
nc#t vizitatorul s poat ajunge cu u"urin cel puin la pagina 8ome. ?n plus, informaiile despre
site "i pagina curent nu tre!uie s lipseasc din su!solul fiecrei pagini.
' variaie a acestor pagini de tip (fundtur( o constituie paginile 8ome care ofer informaii prea
puine sau lipsite de semnificaie. ,estul de des pot fi nt#lnite pe -e! pagini 8ome care nu ofer
nici un fel de indicii asupra structurii sau coninutului site%ului, fr a mai vor!i de scopul "i
o!iectivele sale. Instrumentele de navigaie sunt a!sente, prefer#ndu%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 a!ordare avangardist, dar pentru marea majoritate a vizitatorilor este neplcut s ajung ntr%o
asemenea pagin a"a nc#t este mai !ine s respectai regulile clasice de design prezentate.
Pa%ini EuriaeE
,ac paginile (fundtur( ofer prea puine indicii vizitatorului, e&ist "i reversul lor: paginile
(uria"e(. $ceste pagini sunt ncrcate p#n la refuz cu informaii, liste, imagini, linJ%uri "i alte
elemente. /aginile de acest fel ridic dou mari pro!leme:
9impul de acces. :ai 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 capa!il s o proceseze.
&ist opinii care spun c lungimea unei pagini nu ar tre!ui s dep"easc 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 su!iectului tre!uie s se fac n
funcie de logica lui intern "i nu de reguli ar!itrare cum este mrimea ferestrei !rowserului.
&ist situaii n care paginile lungi ndeplinesc cel mai !ine o!iectivele 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 ar!itrar "i
dezavantajoas. /e de alt parte, aglomerarea de informaii la nivelul unei singure pagini, mai ales
c#nd 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 cre"te foarte mult.
3#ce.ul de elemente multimedia
>olosirea fr discernm#nt a elementelor multimedia 2imagine, sunet, video6 precum "i folosirea n
e&ces a celor mai noi tehnologii -e! este adesea duntoare pentru site. ,ac v adresai unei
audiene despre care presupunei c nu dispune de cone&iuni rapide, de ultimele versiuni de !rowsere
sau de aplicaiile necesare e&ecutrii "i afi"rii corecte a unora dintre elementele din paginile site%
ului, este mai !ine s nu includei aceste elemente.
$stfel, de"i aplicaiile create cu :acromedia >lash sunt spectaculoase "i se pot realiza efecte speciale
deose!it de atractive, un astfel de fi"ier poate ajunge cu u"urin la dimensiuni care dep"esc D
mega!Fte, ceea ce ncetine"te considera!il viteza de ncrcare a paginii. ?n plus, pentru vizualizarea
corect a acestora, vizitatorul tre!uie s descarce plug%in%ul +hocJwave n cazul c#nd nu l are deja
instalat pe computerul propriu. ste foarte neplcut pentru vizitator s efectueze toate aceste operaii
doar pentru a constata c informaiile prezentate n aceast form puteau fi tot at#t de !ine prezentate
ca te&t sau imagini o!i"nuite.
' soluie de compromis este aceea ca, simultan cu includerea unui astfel de fi"ier, s se pun la
dispoziia vizitatorului o opiune de (eludare( de tip (sJip intro( , atunci c#nd prezentrile sunt
folosite doar cu rol de splash screen, ca ecran de deschidere a site%ului, de e&emplu.
?n plus, folosirea prezentrilor >lash fr ca acestea s serveasc unui scop !ine definit nu face
altceva dec#t s distrag atenia vizitatorului de la su!iectul site%ului.
' alt gre"eal destul de des nt#lnit este includerea fi"ierelor audio, fr ca acestea s ai! legtur
cu scopul site%ului. &ist designeri care consider c furnizarea unei muzici de fundal spore"te
atractivitatea site%ului. ?n realitate se nt#mpl e&act contrariul. ?n afara situaiei c#nd su!iectul site%
ului este legat de muzic sau c#nd fi"ierele de sunet vin s completeze informaiile prezentate n
pagini, muzica de fundal nu face altceva dec#t s ncetineasc ncrcarea paginilor "i s%l irite pe
vizitator, prin repetare. ,ac este necesar s includei fi"iere de sunet, lsai vizitatorului posi!ilitatea
de a opta pentru deschiderea lor prin intermediul unei legturi, mai ales n cazul n care este vor!a
despre fi"iere de mari dimensiuni.
ste recomandat s procedai la fel "i n cazul fi"ierelor video, avertiz#ndu%l pe vizitator c pagina
respectiv se va deschide mai greu.
Pa%ini ine%ale
/aginile inegale conin informaii foarte diferite ca importan sau ca nivel de detaliere. )el mai
adesea se confrunt cu aceast pro!lem paginile 8ome n care sunt incluse linJ%uri ctre noile
pagini create n procesul de dezvoltare a site%ului. ste foarte u"or s cdei n gre"eala de a include
noile legturi n pagina 8ome fr a mai respecta ierarhia sta!ilit n etapa de organizare a site%ului.
,ac site%ul la care lucrai necesit crearea unor noi pagini tre!uie s avei n vedere plasarea
acestora la nivelele specifice o!iectivelor pe care le au precum "i ncadrarea la locul cuvenit n
structura de legturi a site%ului prezentat n pagina 8ome.
Le%&turi 4&r& .emni4ica;ie
/rezena legturilor fr semnificaie este, de asemenea, o gre"eal de design foarte frecvent.
/ro!a!il ai vzut de nenumrate ori n paginile -e! formulri ca aceasta:
#entru %ai %ulte in*or%atii a&asati <A hre*<"in*o.ht%l">aici</A>
)uv#ntul "aici" nu are n acest conte&t, nici o semnificaie. ' formulare mult mai potrivit ar
putea fi urmtoarea:
#uteti obtine aici <A hre*<"in*o.ht%l">%ai %ulte in*or%atii</A>
' alt situaie este aceea n care documentul indicat nu are legtur, din punct de vedere al
coninutului, cu pagina care conine referina la el. 9oate linJ%urile din cadrul unei pagini tre!uie s
e&tind coninutul informaional al paginii, vizitatorul care urmeaz o legtur a"tept#ndu%se ca
aceasta s i ofere informaii suplimentare despre su!iect.
?n aceea"i categorie se pot ncadra "i legturile (!anale( , care nu m!ogesc prin nimic informaiile
prezentate. ,e e&emplu o construcie ca aceasta:
Bine ati )enit in <A hre*<"de*.ht%l">#a$ina</A> Ho%e a (ni)ersitatii
unde documentul def+html conine definiia de dicionar a cuv#ntului (pagina( , este o legtur
(!anal( deoarece n acest conte&t informaia oferit nu serve"te nici unui scop. /e de alt parte, ntr%
o pagin al crei su!iect este voca!ularul specific -e!%ului, o astfel de definiie ar fi foarte
important.
0n alt tip de legturi fr semnificaie apare atunci c#nd fragmentarea informaiei este dus la e&trem
prin folosirea unui numr foarte mare de linJ%uri. +u!iectul este secionat n pri foarte mici iar
vizitatorul este o!ligat s parcurg un mare numr de pagini n ad#ncime pentru a pune cap la cap
informaiile "i a nelege sensul lor. ' a!ordare de acest tip rupe cursivitatea su!iectului "i mre"te
efortul de a nelege "i asimila al vizitatorului.
Pa%ini de?or%ani?ate i .tridente
$cest tip de pagini sufer din pricina lipsei de organizare a coninutului. )hiar dac su!iectul este
mprit n seciuni, unitile de informaie sunt mpr"tiate n pagin fr o sistematizare preala!il
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 ai! 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 !#lci.
%. 'e(umat
)onstruirea unui site necesit, pe l#ng o !un cunoa"tere a lim!ajului 89:;, respectarea unor
principii "i folosirea unor tehnici consacrate. +ite%ul tre!uie s fie orientat ctre vizitator, ctre
nelegerea "i satisfacerea nevoii de informaie a acestuia. ,esignul tre!uie s menin un echili!ru
ntre tehnologiile folosite "i eficien, asigur#nd o vitez convena!il de ncrcare a paginilor "i o
vizualizare !un n cele mai populare dintre !rowsere. $spectul site%ului tre!uie s fie n concordan
cu scopul "i o!iectivele sale, evit#nd e&cesele de orice fel.
/rincipiile care tre!uie respectate n etapa de design sunt:
$socierea semnificaiilor
:eninerea competitivitii
>olosirea eficient a resurselor
)oncentrarea pe necesitile utilizatorului
?nelegerea permea!ilitii -e!%ului
)rearea unui aspect plcut, coerent "i fluent
+usinerea interactivitii
+usinerea navigaiei
+trategia de construire a site%ului poate urma una dintre metodele gtop%downh , g!ottom%uph sau
metoda incrementrii.
?n procesul de design, prima etap o constituie schia site%ului care tre!uie s reflecte structura
acestuia: liniar, ierarhic sau de tip -e!.
Informaia tre!uie fragmentat astfel nc#t s nu dep"easc puterea de asimilare a utilizatorului.
;egturile dintre pagini tre!uie s fie sta!ilite astfel nc#t s permit o parcurgere logic a
coninutului site%ului, iar instrumentele de navigare tre!uie adaptate modului n care sunt create
legturile dintre pagini, oferind indicii vizuale asupra funciei lor. ste recomandat ca instrumentele
de navigare s ai! acela"i aspect n toate paginile.
@erespectarea principiilor "i tehnicilor de design poate s conduc la construirea unor pagini de tip
gfundturah , a unor pagini prea ncrcate cu informaii sau, dimpotriv, a unor pagini inegale. ,e
asemenea, printre gre"elile de design care pot aprea sunt legturile fr semnificaie, e&cesul de
elemente multimedia, paginile dezorganizate sau stridente.
Capitolul 16
!estarea site*ului
tapa de design a site%ului se desf"oar n str#ns legtur cu cea de implementare, de scriere a
codului 89:; pentru paginile care fac parte din site. 9otu"i, procesul de creare a site%ului nu se
poate considera ncheiat n momentul finalizrii tuturor documentelor 89:; care l formeaz.
0rmeaz o etap adesea tratat oarecum superficial, de"i, 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 pu!licisticii -e!. >oarte frecvent putei nt#lni
pagini -e! cu multiple gre"eli de ortografie, gramatic, formatare, chiar "i n cazul site%urilor
importante. /aginile cu gre"eli de ortografie, e&primri neglijente, reflect cel puin o insuficient
e&perien n acest domeniu "i, de ce nu, chiar lips de respect pentru vizitator.
)orectarea este neglijat n primul r#nd datorit u"urinei e&traordinare cu care te&tele pot fi
pu!licate electronic. /utei crea o pagin ntr%un editor de te&t "i aceasta poate fi pu!licat la doar
c#teva minute dup terminarea ei, daca suntei suficient de rapid. )ei mai muli nu vor petrece ore n
"ir verific#nd e&istena eventualelor gre"eli gramaticale n te&tul editat, a"a cum ar face%o, pro!a!il,
n cazul unei tiprituri clasice, dac aceste erori i%ar costa o avere pentru a retipri DC.CCC de copii ale
documentului. ,ac ai fcut o gre"eal, tre!uie doar s deschidei fi"ierul, s efectuai corectura "i s
l repu!licai pe -e!, unde toat lumea l poate vedea. ste aceasta o strategie corect7 ,esigur c
nu.
)alitatea muncii pe care ai depus%o la crearea site%ului define"te calitatea acestuia. :ii, poate
milioane de utilizatori ar fi putut deja citi pagina n cauz. ste mult mai simplu s petrecei c#teva
ore corect#nd te&tul, pentru a evita ca ulterior s v luptai zile, sptm#ni sau luni n "ir pentru a v
rec#"tiga credi!ilitatea.
Iat c#teva metode care v pot ajuta s corectai mai eficient paginile -e!:
0tilizai corectoare automate pentru ortografie "i gramatic pentru a descoperi erorile plictisitoare,
fcute din gra! sau din o!oseal.
@u avei niciodat ncredere a!solut n acest tip de corectoare pentru a descoperi erorile mai su!tile.
,up utilizarea lor, ncrcai pagina n !rowser "i citii%o de c#teva ori.
/entru site%urile de dimensiuni mari citii documentele n mod repetat, cut#nd de fiecare dat un
anumit tip particular de erori
;a 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.
;a a doua lectur verificai logica "i cursivitatea ideilor "i a cuvintelor.
;a a treia lectur, corectai minuios ntregul te&t verific#nd sinta&a, ortografia, punctuaia.
?ntotdeauna verificai imaginile, figurile "i hrile din pagin. $sigurai%v c ele au legtur cu te&tul
de referin, "i verificai te&tul e&plicativ care nsoe"te imaginea.
&ist "i erori ce vor persista uneori chiar dup toate aceste verificri. ,ac le descoperii dup
pu!licarea site%ului, nu mai rm#ne dec#t 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 tre!uie s v concentrai pe testarea
corectitudinii etichetelor 89:;, a linJ%urilor, a imaginilor "i a celorlalte elemente incluse n pagini.
Te.tarea lin()urilor
)ea mai simpl cale de testare a linJ%urilor este de a ncrca pagina n !rowser "i de a da clicJ pe
fiecare linJ.
Perificai funcionarea tuturor ancorelor din pagini care tre!uie s acceseze seciunea din pagin
corespunztoare identificatorului ancorei. $tenie la seciunile multiple ale aceleia"i pagini etichetate
cu acela"i identificator. $ceast gre"eal poate produce rezultate stranii. ,aca !rowserul sare la o alt
seciune a paginii dec#t cea a"teptat, verificai mai nt#i identificatorul ancorei n seciunea pe care
!rowserul o afi"eaz.
Perificai apoi modul de funcionare a legturilor ctre alte documente, at#t n cadrul site%ului c#t "i
n afara sa, respectiv validitatea lor "i dac paginile accesate sunt cele potrivite. ,ac o anumit
pagin nu poate fi deschis, verificai sinta&a linJ%urilor "i anume:
corectitudinea protocolului specificat
e&tensia fi"ierului
e&istena sim!olului i
'tenie(
?n 0@I_, sim!olul tilda 2i6 este utilizat pentru a specifica directorul de start 2'ome director(6 al
utilizatorului al crui nume urmeaz dup acest sim!ol.
>olosind sim!olul i v putei referi la o pagin -e! astfel: http*++www.ser6er.com+Autili=ator+pagina.html
Probleme n 4unc;ionarea pa%inilor Web
ste posi!il ca paginile -e! create s nu arate n !rowser a"a cum au fost ele proiectate. .ezolvarea
unor astfel de deficiene poate fi dificil, deoarece c#nd scriei codul 89:; avei doar o imagine
mental a modului cum ar tre!ui s arate pagina. ' soluie pentru a face procesul de depanare mai
u"or ar fi s vizualizai pagina cu ajutorul !rowserului pe msur ce o construii. /utei izola
diversele seciuni ale paginii pentru a verifica funcionarea fiecreia dintre ele.
)ele mai multe gre"eli care pot aprea se datoreaz erorilor n codului sursa al paginii. +inta&a
codului este de o importanta critic n 89:;. )ele mai comune pro!leme de sinta&a care apar sunt:
a!sena etichetelor de nchidere < / W
mperecherea etichetelor 89:;
ghilimelele ( (
im!ricarea etichetelor
Iat c#teva dintre pro!lemele cu care v putei confrunta:
0 caracteristic de &ormatare a&ecteaz o secven mai mare de te%t decNt era prevzut#
+ presupunem c ai folosit ntr%o seciune a paginii una dintre etichetele de titlu, <H9> de e&emplu.
;a vizualizarea paginii n !rowser 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:
$!sena unuia dintre caracterele ( < ( sau ( W (
$!sena etichetei de nchidere </H9>
Im!ricarea defectuoas a etichetelor 89:;
' etichet de nchidere creia i lipse"te unul dintre caracterele (< (sau (>( nu va fi interpretat
corect de !rowser, prin urmare formatul nu va lua sf#r"it dec#t n punctul n care !rowserul nt#lne"te
caracterul respectiv. $ceasta poate determina afi"area ntr%un format gre"it a unui te&t.
,ac acest element este un titlu, tot te&tul dintre eticheta de deschidere asociat titlului "i cea mai
apropiat etichet de nchidere nt#lnit va fi afi"at ca titlu. ,aca acest element este te&t ancor, tot
te&tul dintre eticheta de deschidere <A> "i prima etichet de nchidere nt#lnit va fi afi"at ca o
legtur 2de culoare al!astru "i su!liniat6.
' etichet de nchidere a!sent sau o mperechere inadecvata de etichete va provoca pro!leme
similare. 0neori pro!lemele sunt dificil de urmrit "i rezolvat. 0rmrirea unei pro!leme se face n
sens descendent, defeciunea tre!uie cutat acolo unde ncepe secvena de cod eronat "i nu unde se
sf#r"e"te.
0 parte din te%tul paginii nu este a&iFat
9e&tul sau o!iectele care lipsesc din pagina pot fi depistate prin urmrirea ghilimelelor ( ( "i a
etichetelor gre"it nchise "i care conin adrese 0.;.
,ac pagina conine ghilimele de deschidere n interiorul unei etichete, "i cele de nchidere tre!uie s
se regseasc n aceea"i etichet. ' etichet din care lipsesc ghilimelele de nchidere nu este
interpretat corect "i acest lucru poate produce rezultate !izare. ,ac eticheta creia i lipsesc
ghilimelele este o etichet ancor, ntreg te&tul de la primele ghilimele p#n la urmtoarele nt#lnite
ar putea fi interpretat de !rowser ca parte dintr%o adres 0.;.
' alt eroare care poate provoca acela"i efect este nchiderea gre"it a etichetei conin#nd o adres
0.;. ,ac o astfel de etichet nu este nchis corespunztor, !rowserul ar putea interpreta orice te&t
care urmeaz, p#n la eticheta de nchidere corespunztoare, ca fiind parte a adresei 0.;.
/ro!lema se rezolv prin e&aminarea etichetelor aflate naintea poriunii de te&t care nu este afi"at.
roarea ar putea proveni de la orice etichet care conine ghilimele sau o adres 0.;. <hilimelele
utilizate n editorul de te&t cu ajutorul cruia scriei codul 89:; tre!uie s fie ntotdeauna n
standard $+)II. 0nele editoare de te&t utilizeaz a"a%numitele (smart Nuotes( , n care ghilimele de
deschidere arat diferit fa de cele de nchidere. ,ac procesorul de te&t cu care lucrai are aceast
posi!ilitate, ea tre!uie dezactivat, deoarece acest tip de ghilimele, nefiind n standardul $+)II, nu
vor funciona corect n 89:;.
'&iFarea de&ectuoas a &ormatului
?n cazul c#nd formatul afi"at de !rowser nu este cel a"teptat verificai mai nt#i compati!ilitatea
dintre !rowser "i stilul de caractere specificat n codul 89:;. *rowserul tre!uie s fie capa!il s
afi"eze stilul ales. $tunci c#nd sunt folosite stiluri logice, !rowserul este ultima instan n decizia
privind stilul caracterelor afi"ate.
' metod rapid de verificare a e&istenei unei pro!leme de compati!ilitate este de a afi"a paginile
utiliz#nd !rowsere diferite, dintre care unul s poat afi"a n mod sigur stilul de caracter utilizat.
,ac acel !rowser afi"eaz te&tul incorect, se face verificarea codului 89:;. ,ac te&tul este afi"at
corect, atunci e&ist o incompati!ilitate cu celelalte !rowsere.
?n codul 89:;, pro!lema poate fi legat de o im!ricare defectuoas a etichetelor. Perificai modul
cum au fost im!ricate etichetele de formatare din seciunea de pagin asociat cu eroarea respectiv.
$stfel o construcie de tipul urmtor:
<E>Ja %ultu%i% ca ati )i3itat <FT+!0G>#a$ina</E>noastra</FT+!0G>
nu va funciona corect, deoarece etichetele <E> "i <FT+!0G> sunt im!ricate eronat.
3. 'e(umat
,up etapele de planificare, design "i implementare urmeaz etapa de testare a site%ului.
?n aceast etap se realizeaz:
)orectarea paginilor din punct de vedere ortografic "i gramatical
9estarea legturilor din cadrul site%ului
9estarea legturilor e&terne
,epanarea gre"elilor care in de sinta&a codului 89:;
tapa de testare este deose!it de important pentru impresia general lsat de site%ul
dumneavoastr. 0n site cu ortografie neglijent, cu gre"eli de e&primare, cu legturi nefuncionale
poate ndeprta vizitatorii, oric#t de valoroase ar fi informaiile prezentate n interiorul su.
Capitolul $@
Publicarea site*ului
?n sf#r"it, 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 pu!licrii pe
-e! a site%ului, astfel nc#t rezultatele muncii dumneavoastr s fie cunoscute de toi aceea care v
vor vizita paginile. ?n etapa pu!licrii pe -e! a site%ului intervin mai muli pa"i:
+ta!ilirea unui nume de domeniu
+ta!ilirea serverului -e! pe care va fi stocat 2gzduit6 site%ul
'rganizarea "i denumirea fi"ierelor n conformitate cu cerinele serverului gazd
9ransferul fi"ierelor
1. Dume!e de domeniu
/entru ca site%ul dumneavoastr s ai! o identitate pe -e! avei nevoie de un nume de domeniu
pentru el. @umele de domeniu al site%ului va face parte din adresa 0.; a fiecrei pagini "i va oferi
site%ului o prezen distinct pe -e!.
,omeniile principale de pe -e! pot fi de mai multe tipuri:
comerciale .com
educaionale .edu
guvernamentale .%ov
furnizorii de servicii de reea .net
instituii non%profit .or%
domeniile corespunztoare rilor lumii .ro, etc
/entru a o!ine un nume de domeniu pentru site avei la dispoziie dou posi!iliti:
domeniu pltit
domeniu gratuit
5omeniu pl&tit
,ac site%ul pe care l%ai creat aparine firmei dumneavoastr sau unei firme client sau dac dorii s
avei o prezen sta!il "i credi!il pe -e! cea mai !un opiune este s avei un domeniu pltit.
?nregistrarea unui domeniu nu este foarte costisitoare "i va asigura site%ului dumneavoastr o
identitate serioas "i credi!il. ?n plus, odat ce suntei proprietarul unui domeniu putei s schim!ai
locaia site%ului 2serverul -e! pe care este gzduit6 fr ca aceasta s necesite schim!area
domeniului.
/reul pentru nregistrarea unui nume de domeniu variaz destul de mult. 0na dintre cele mai
convena!ile oferte poate fi gsit la adresa http*++www.#%Bdomains.com care ofer nregistrarea unui
nume de domeniu pentru DC 0+, anual precum "i o serie de discount%uri pentru nregistrarea pe
perioade mai lungi. ,ac dorii un domeniu rom#nesc 2.ro6 putei o!ine informaii la adresa
http*++www.rnc.ro. /entru nregistrarea unui astfel de domeniu se percepe o ta& unic de BD 0+,
2pre vala!il la data scrierii acestei cri6 fr alte ta&e anuale.
?n cazul c#nd optai pentru un domeniu pltit, adresa 0.; a site%ului va fi de forma
http*++www.dumnea6oastra.com
5omeniu %ratuit
'!inerea unui nume de domeniu gratuit este foarte simpl. &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 cuno"tinele de -e! design nou nvate, nu este o idee rea s construii un site (de pro!(
folosind pentru acesta un domeniu "i un serviciu de hosting gratuite. ?n afara acestei situaii, de"i
poate prea alegerea ideal, un domeniu gratuit poate aduce multe dezavantaje site%ului
dumneavoastr.
/rima judecat de valoare asupra unui site este fcut pe !aza numelui su de domeniu. ?n cazul unui
domeniu gratuit adresa 0.; a site%ului va fi:
http*++www.numefirmaga=da.com+Adumnea6oastra sau
http*++www.dumnea6oastra.numefirmaga=da.com
Pizitatorii site%ului vor "ti imediat c nu deinei propriul domeniu "i folosii un serviciu de hosting
gratuit ceea ce v va afecta serios credi!ilitatea. :ai ales dac site%ul este unul de afaceri, folosirea
unui domeniu "i serviciu de hosting gratuit este cu totul contraindicat. ?n plus, firmele care ofer
acest gen de servicii, impun afi"area unor !annere pu!licitare care distrag atenia vizitatorilor de la
coninutul site%ului "i mresc timpul de ncrcare al paginilor.
2. Ser"iciu! de -$(duire >e9 3>e9 *ostin-4
?nainte de a pu!lica site%ul pe -e! este necesar o evaluare a necesitilor de acces, pentru a
determina ce fel de cont se potrive"te site%ului dumneavoastr. /lec#nd de la presupunerea c deinei
deja o cone&iune la Internet, nu vom intra n amnunte privind alegerea unui furnizor de servicii
Internet 2I+/ b "nternet &ervice *rovider6. 9otu"i, n cazul c#nd nc nu deinei o cone&iune sau
dorii s schim!ai provider%ul actual, v recomandm s studiai cu atenie ofertele principalilor
furnizori de servicii. $v#nd n vedere c nu v vei mai limita doar la simpla navigare pe -e! sau la
schim!ul de emailuri ci vei dori s transferai "i s ntreinei un site -e! necesitile dumneavoastr
vor cre"te. ,in acest motiv este !ine s v informai asupra unor detalii tehnice cum ar fi limea de
!and, mediul de transmisie 2anten satelit, ca!lu cu fi!re optice, unde radio6, ce tip de server
folose"te, asistena tehnic oferit, dac ofer gzduire pentru pagini -e!.
'piunile pentru gzduire sunt urmtoarele:
Instalarea unui server -e! propriu
0tilizarea serverului -e! al providerului de servicii Internet
0tilizarea unui server -e! aparin#nd unei firme care ofer servicii de hosting
,n.talarea unui .erver Web propriu
Instalarea unui server -e! propriu este cea mai costisitoare soluie, dar ea ofer n schim! avantaje
semnificative. ,ispun#nd de o cone&iune dedicat se pot furniza servicii -e! GK de ore/zi
utilizatorilor din lumea ntreag. Pei dispune de un control complet asupra serverului -e! "i putei
pu!lica orice dorii. /utei configura serverul "i pentru alte servicii, cum ar fi >9/, <opher, 9elnet,
scripturi )<I, etc. /utei de asemenea avea propriul domeniu care va sta!ili o prezen distinct pe
-e!. $dresa 0.; va avea forma urmtoare:
http*++www.firmaCdumnea6oastra.com+
?ntruc#t costurile necesare echipamentului hardware, cone&iunii la Internet, configurrii "i ntreinerii
unui server propriu dep"esc posi!ilitile unui utilizator o!i"nuit, nu vom insista asupra acestei
soluii.
Ftili?area .erverului Web al providerului ,SP
0tilizarea serverului -e! al providerului dumneavoastr de Internet este o opiune economic. :uli
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 o!icei mic, de ordinul D%I :! "i nu sunt oferite faciliti pentru crearea de pagini dinamice.
/entru a o!ine faciliti suplimentare va tre!ui s pltii n plus.
)u toate c fi"ierele standard, contul de email "i fi"ierele pu!licate pe -e! utilizeaz acest spaiu, G%I
:! sunt de regul suficieni pentru a menine un site modest ca dimensiuni. )ontul la I+/ este
accesi!il pe !aza unei cone&iuni dial%up care permite o legtur cu o vitez de p#n la HB a!ps.
?nainte de a deschide un astfel de cont, tre!uie verificate detaliile privind spaiul de stocare, ta&ele
pentru spaiul adiional, n mod curent Gj pentru D :!, eventualele alte ta&e. 9re!uie verificat de
asemenea disponi!ilitatea altor servicii, cum ar fi >9/, <opher, 9elnet, scripturi )<I, care ar tre!ui
s poat fi utilizate gratuit, n cazul n care e&ist.
0n cont la un provider I+/ este o opiune economic dar, n acela"i timp, limitat. @u e&ist control
al serverului -e!, serviciile adiionale rm#n#nd la latitudinea providerului. @u vei avea propriul
domeniu, iar adresa 0.; va arta astfel:
http*++www.pro6ider.com+Adumnea6oastra
Ftili?area unui .erviciu de 7o.tin%
)ea mai !un soluie din punctul de vedere al raportului servicii/pre o reprezint folosirea unui
serviciu de hosting pltit. 'fertele de pe piaa rom#neasc sunt numeroase "i variate ca pre. ?nainte
de a face o alegere este !ine s facei un studiu comparativ al acestora n privina spaiului pus la
dispoziie, al modului de transfer al fi"ierelor, al traficului impus precum "i al prezenei diverselor
faciliti: scripturi )<I, !aze de date, email personalizat, etc. @u tre!uie s pierdei din vedere c
site%ul dumneavoastr se poate dezvolta astfel nc#t spaiul de stocare rezervat la nceput poate
deveni insuficient.
0tiliz#nd un serviciu de hosting adresa 0.; a site%ului va avea forma urmtoare:
http*++www.dumnea6oastra.com
,e asemenea vei !eneficia "i de una sau mai multe adrese de email personalizate de tipul:
adresa3dumnea6oastra.com
>olosirea serviciilor unei firme de hosting v permite ca, odat ce deinei propriul nume de
domeniu, s v transferai site%ul pe serverul -e! al firmei "i s !eneficiai de o prezen sta!il pe
-e!. >irmele de hosting ofer uneori "i nume de domenii pentru clienii lor ns e&ist riscul ca dac
v hotr#i s renunai la serviciile acelei firme s pierdei domeniul. ,in acest motiv este mai !ine
s tratai separat cele dou pro!leme.
3. Cr-ani(area i denumirea ,iiere!or
,e"i aceast etap este intrinsec procesului de construire a site%ului, o vom discuta n acest capitol,
deoarece acum este momentul c#nd o !un organizare a directoarelor, su!directoarelor "i fi"ierelor
devine deose!it de important.
@r%ani?area directoarelor i 4iierelor
ste foarte !ine s organizai fi"ierele care fac parte din site pe computerul dumneavoastr e&act a"a
cum ele vor fi organizate pe serverul -e!. +erverul -e! are un director (rdcin( 2root6 unde vor fi
stocate toate fi"ierele site%ului. >olderul unde vei stoca aceste fi"iere pe computerul personal va juca
rolul directorului (rdcin( al serverului. ?n directorul (rdcin( va fi plasat fi"ierul care va conine
pagina (home( a site%ului, fi"ier denumit de o!icei index+html sau index+htm.
,ac site%ul este de mici dimensiuni 2ntre H "i DC pagini6 putei plasa toate fi"ierele n acela"i
director. ,ac site%ul este mai mare, este recomandat s creai pentru fiecare seciune principal a sa
c#te un su!director care va conine fi"ierele asociate acelei seciuni. +u!directoarele pot conine la
r#ndul lor c#te un fi"ier inde&. $tunci c#nd vei transfera fi"ierele de pe computerul dumneavoastr
pe serverul -e! vei putea s transferai ntregul su!director cu fi"ierele coninute n el. ,e asemenea
aceast metod va face "i ntreinerea site%ului mult mai u"oar.
' alt pro!lem este locul unde vei stoca imaginile. /ractica standard este de a crea un su!director
special n directorul (rdcin( unde s plasai toate imaginile din site. ,ac procedai astfel este
e&trem de important s creai un su!director similar cu aceea"i amplasare "i pe computerul
dumneavoastr. )alea de la pagina care apeleaz o imagine la imaginea respectiv tre!uie s fie
aceea"i "i pe computerul dumneavoastr "i pe server, altminteri imaginile nu se vor afi"a dup ce
site%ul a fost transferat pe server.
' alt variant de stocare a imaginilor este crearea unui su!director destinat imaginilor, plasat n
su!directorul fiecrei pagini. )u acelea"i precauii legate de calea corect ctre imagini, aceast
metod funcioneaz !ine, !a chiar m!unte"te viteza de ncrcare a imaginilor n pagini.
,ezavantajul const n faptul c adesea este necesar s reinei mai multe copii ale aceleia"i imagini
n diferite su!directoare, n funcie de paginile unde este folosit.
Beri4icarea numelor 4iierelor
;a mutarea fi"ierelor de pe computerul dumneavoastr pe serverul -e! se impune verificarea
numelor fi"ierelor care tre!uie s fie compati!ile cu sistemul pe sunt mutate.
' atenie deose!it tre!uie acordat denumirii "i e&tensiei fi"ierelor. @u are importan dac optai
pentru e&tensia +html sau +htm. 9ot ce tre!uie este s fii consecvent cu e&tensia aleas de%a lungul
ntregului site. ,e asemenea, tre!uie s avei n vedere c n sistemele 0@I_, cele mai des folosite ca
servere -e!, denumirile fi"ierelor sunt case#sensitive. ' pagin denumit m(page+html nu este
totuna cu pagina M(*age+html. /entru a evita confuziile folosii pentru denumirea fi"ierelor numai
litere mici.
4. Trans,eru! ,iiere!or
9ransferul fi"ierelor care compun site%ul de pe computerul propriu pe serverul -e! este o operaiune
relativ simpl, care const n copierea fi"ierelor pe server n locaia destinat site%ului
dumneavoastr. 0nele dintre firmele de hosting asigur o aplicaie special destinat transferului
fi"ierelor, dar cea mai utilizat metod de transfer este prin intermediul unui client >9/.
0n client /TP 2!ile )ransfer *rotocol6 este o aplicaie prin intermediul creia se poate realiza
transferul fi"ierelor de pe un sistem pe altul. /utei copia fi"iere de pe computerul personal pe un alt
computer 2operaie denumit Bpload6 dup cum putei prelua fi"iere de pe un alt computer, pe
computerul personal 2operaie denumit Donload6. )ele mai folosite programe >9/ sunt Cute!)*
2http*++www.cuteftp.com6 "i %&G!)* 2http*++ipswitch.com6. 'dat ce ai instalat pe computerul
dumneavoastr un client >9/, v%ai nregistrat numele de domeniu "i avei un cont la un serviciu de
gzduire totul este pregtit pentru transferul fi"ierelor care compun site%ul pe serverul gazd.
/entru a realiza transferul fi"ierelor, n general va tre!ui s urmai urmtorii pa"i:
)onectarea la Internet
,eschiderea programului >9/. Pei o!serva o serie de casete de dialog n care tre!uie introduse
informaiile necesare programului pentru a realiza cone&iunea cu computerul gazd.
/entru a face cone&iunea cu serverul tre!uie s furnizai programului adresa >9/ a host%ului
dumneavoastr. $ceasta v este furnizat de firma de hosting la deschiderea contului. ,e asemenea,
programul v va cere numele de utilizator "i parola pe care le%ai sta!ilit la deschiderea contului. @u
uitai s de%!ifai opiunea /non(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
fi"ierele site%ului.
' alt informaie care tre!uie furnizat programului este tipul fi"ierelor transferate. ?n general pentru
fi"ierele 89:; se folose"te opiunea /&C"" iar pentru celelalte fi"iere, opiunea binar(. :ai simplu,
putei alege opiunea /utoDetect prin care programul determin singur tipul fi"ierului "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 >9/ va realiza cone&iunea cu serverul gazd.
+electarea fi"ierelor pe care dorii s le copiai. Pei o!serva c fereastra aplicaiei >9/ 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 fi"ierele dumneavoastr "i dai comanda de
transfer n directorul care v este destinat pe serverul gazd.
,ac folosii scripturi )<I asociate site%ului tre!uie s le acordai o atenie special. )ele mai multe
servere necesit instalarea scripturilor )<I ntr%un su!director special numit cgi#bin, aflat n
directorul dumneavoastr. /entru plasarea "i setarea corect a scripturilor tre!uie s luai legtura cu
administratorul serverului gazd care v va oferi indicaiile necesare.
/e unele sisteme de operare modul de accesare al fi"ierelor este strict definit, permi#nd sau
restricion#nd citirea, scrierea sau e&ecutarea fi"ierelor de ctre diferii utilizatori. $ceste faciliti
sunt setate de regul prin drepturile de acces atri!uite fi"ierelor. ,in acest motiv, verificarea
modului de setare a fi"ierelor este e&trem de important. ,e e&emplu, n sistemele 0@I_ modul 4CH
semnific faptul c fi"ierele pot fi citite, modificate sau e&ecutate de proprietarul lor, n vreme ce ali
utilizatori nu le pot dec#t citi sau e&ecuta 2dup caz6.
,up transferul fi"ierelor, pot aprea pro!leme de diverse tipuri. 0neori, paginile pu!licate nu pot fi
accesate deloc, scripturile nu funcioneaz, etc. /rimul lucru care tre!uie verificat n acest caz este
dac fi"ierele se afl n directoarele potrivite. $poi tre!uie verificate permisiunile de acces pentru
directoare "i fi"iere, e&tensiile fi"ierelor, fi"ierele inde&. ?n cazul c#nd apar pro!leme, cea mai sigur
cale de rezolvare a lor este s luai legtura cu administratorul serverului gazd "i s i cerei
informaii c#t mai complete privind drepturile de acces pentru directoare, calea corect ctre
scripturile folosite "i, n general, setrile necesare pentru !una funcionare a site%ului.
#. 'e(umat
?n etapa de pu!licare pe -e! a site%ului tre!uie parcur"i urmtorii pa"i:
+ta!ilirea unui nume de domeniu pentru site: gratuit sau pltit.
<sirea unui serviciu de gzduire convena!il su! raportul servicii/pre.
'rganizarea "i denumirea directoarelor "i fi"ierelor n conformitate cu cerinele sistemului serverului
gazd.
9ransferul fi"ierelor, cea mai folosit metod de transfer fiind prin >9/.
C7te-a cu-inteKla final
$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 cuno"tinele do!#ndite. ,ar acesta este doar
primul pas.
,esignul -e! este unul dintre domeniile cu un mare potenial de dezvoltare. 9ot mai multe firme doresc
site%uri pe -e!, 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 t#nr.
:ai mult, de"i pe -e!%ul rom#nesc aceast zon este nc sla! 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 -e!.
,ar nu tre!uie s v oprii aici. ,esignul "i programarea -e! reprezint domenii vaste iar cartea noastr
a atins doar elementele de !az ale acestora. /utei continua nv#nd s programai n /erl pentru a crea
scripturi )<I, putei nva =ava+cript, =ava sau un lim!aj de interogare pentru !azele de date stocate pe
server. /utei deveni familiar cu unul din editoarele puternice de 89:; 2:acromedia ,reamwaver este
cel mai utilizat n acest moment6 sau putei nva s stp#nii foarte !ine un program de grafic
2)orel,raw sau $do!e /hotoshop de e&emplu6 pentru a crea grafic -e!. /osi!ilitile sunt nenumrate.
?n lumea -orld -ide -e! totul este ntr%o continu mi"care "i dezvoltare. $ceast carte v%a oferit
fundamentele programrii n 89:;. )ontinuai s nvai, perfecionai%v continuu "i succesul viitor v
este asigurat.
Anexa 1
=n%ex etichete
,tichetA'tribut >escriere :rowser
<A></A>
)reeaz o legtur 2cu atri!utul hre*6 sau
identific o ancor 2cu atri!utul na%e6
+tandard
89:; I.G
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
Hre*<(+L
+pecific adresa 0.; a intei legturii
+tandard
89:; I.G
0a%e<nu%e
+pecific identificatorul unei ancore
+tandard
89:; I.G
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
Tar$et<nu%e
,efine"te numele ferestrei n care se va
deschide documentul referit
&plorer,
@etscape
Title<strin$
+pecific un titlu pentru fereastra n care se
va deschide documentul specificat
+tandard
89:; I.G
<ADD+EFF></ADD
+EFF>
Insereaz o adres po"tal
+tandard
89:; I.G
<A+EA>
,efine"te o zon activ ntr%o imagine hart
+tandard
89:; I.G
Alt<strin$
+pecific un te&t alternativ pentru
!rowserele non%grafice
+tandard
89:; I.G
/oords<lista
coord
)oordonatele care definesc aria, desprite
prin virgule
+tandard
89:; I.G
Hre*<(+L
+pecific adresa 0.; asociat ariei
+tandard
89:; I.G
Fha&e<*or%a
,efine"te forma zonei active
+tandard
89:; I.G
Tar$et<nu%e
+pecific numele ferestrei n care se va
deschide documentul referit prin aria
respectiv
@etscape
Title<strin$
+pecific un titlu pentru aria respectiv &plorer
<B></B>
9e&tul este scris cu caractere aldine 2!old6
+tandard
89:; I.G
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
<BAFE8!0T>
/recizeaz caracteristicile fonturilor din
documentul curent
+tandard
89:; I.G
/olor<culoare
+pecific culoarea fonturilor &plorer
8ace<ti&
*onturi
+pecific tipul fonturilor &plorer
Fi3e<)aloare
+pecific dimensiunea fonturilor &plorer
<BIG></BIG>
$fi"eaz te&tul cu fonturi mai mari
+tandard
89:; I.G
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
<BGF!(0D>
,efine"te fundalul sonor pentru un
document
&plorer
loo&<)aloare
+eteaz numrul de reluri ale !ucii
muzicale.
Palori posi!ile: un numr ntreg sau
in*inite
&plorer
src<(+L
>urnizeaz adresa 0.; a fi"ierului audio. &plorer
<BL!/BS(!TE></
BL!/BS(!TE>
Include un citat. 9e&tul este indentat fa de
marginea din st#nga a ferestrei
+tandard
89:; I.G
<B!D"></B!D">
,elimiteaz corpul documentului
+tandard
89:; I.G
Alin;<culoare
,efine"te culoarea legturii active
+tandard
89:; I.G
Bac;$round<(+L
+pecific adresa 0.; a imaginii de fundal
al paginii
+tandard
89:; I.G
B$color<culoar
e
,efine"te culoarea fundalului paginii
+tandard
89:; I.G
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
Le*t%ar$in<)al
oare
+pecific dimensiunea n pi&eli a marginii
din st#nga a paginii
&plorer
Lin;<culoare
,efine"te culoarea legturilor
+tandard
89:; I.G
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
Text<culoare
,efine"te culoarea te&tului din pagin
+tandard
89:; I.G
To&%ar$in<)alo
are
+pecific dimensiunea n pi&eli a marginii
de sus a paginii
&plorer
Jlin;<culoare
,efine"te culoarea legturilor vizitate
+tandard
89:; I.G
<B+>
+pecific sf#r"itul unei linii "i nceputul
unei linii noi
+tandard
89:; I.G
clear<%ar$ine
?ntrerupe linia curent "i ncepe noul r#nd la
marginea dorit.
Palori posi!ile: le*t, ri$ht, none, all.
+tandard
89:; I.G
</A#TI!0><//A#
TI!0>
,efine"te titlul unui ta!el
+tandard
89:; I.G
Ali$n<&o3itie
+pecific poziia n care se aliniaz titlul.
Palori posi!ile: to&, botto% 2@etscape6,
le*t, ri$ht, center 2&plorer6
+tandard
89:; I.G
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
Jali$n<&o3itie
+pecific poziia pe vertical a titlului.
Palori posi!ile: to&, botto%
&plorer
</E0TE+><//E0T
E+>
)entreaz te&tul
+tandard
89:; I.G
</ITE><//ITE>
Insereaz un citat
+tandard
89:; I.G
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
</!DE><//!DE>
Insereaz o mostr de cod
+tandard
89:; I.G
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
</!L>
,efine"te o coloan n cadrul unui grup de
coloane
&plorer
Ali$n<&o3itie
+pecific alinierea coloanei.
Palori posi!ile: le*t, center, ri$ht
&plorer
F&an<n
+pecific numrul de coloane afectate de
eticheta </!L>
&plorer
</!LG+!(#><//!
LG+!(#>
,efine"te un grup de coloane n cadrul unui
ta!el
&plorer
Ali$n<&o3itie
+pecific alinierea pe orizontal a te&tului
din coloane.
Palori posi!ile: le*t, center, ri$ht
&plorer
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer
F&an<n
+ta!ile"te numrul de coloane din grup &plorer
Ft7le<stil
+pecific un stil in#line pentru etichet &plorer
Jali$n<&o3itie
+eteaz alinierea pe vertical a te&tului din
coloane.
Palori posi!ile: to&, %iddle, botto%
&plorer
'idth<)aloare
+eteaz limea fiecrei coloane din grup, n
pi&eli sau n procente
&plorer
<DD></DD>
,efine"te elementul unei liste de definiii
+tandard
89:; I.G
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
<D80></D80>
>ormateaz te&tul inclus ca o definiie
+tandard
89:; I.G
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
<DI+></DI+>
)reeaz o list de directoare, elementele
fiind introduse prin eticheta <LI>
+tandard
89:; I.G
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
T7&e<%arcaG
+pecific tipul de marcaj.
Palori posi!ile: circle, disc, sKuare.
&plorer,
@etscape
<DIJ></DIJ>
)reeaz o diviziune ntr%un document
+tandard
89:; I.G
Ali$n<&o3itie
$liniaz elementele incluse n !locul
<DIJ>.
Palori posi!ile: le*t, center, ri$ht
+tandard
89:; I.G
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
0oCra&
Interzice ntreruperea liniilor din !loc &plorer
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
<DL></<DL>
)reeaz o list de definiii
+tandard
89:; I.G
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
<DT></DT>
Introduce un element al unei liste de
definiii
+tandard
89:; I.G
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
<E></E>
$ccentueaz te&tul inclus ntre etichete prin
scrierea cu caractere italice
+tandard
89:; I.G
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
<8!0T></8!0T>
+eteaz caracteristicile te&tului inclus ntre
etichete
+tandard
89:; I.G
/olor<culoare
+eteaz culoarea te&tului
+tandard
89:; I.G
8ace<lista
ti&uri *ont
+pecific tipurile de font
&plorer,
@etscape
Fi3e<)aloare
+pecific dimensiunea te&tului. Palori
posi!ile: D%4 2valori a!solute6, Rn sau bn
2valori relative la dimensiunea curent6
+tandard
89:; I.G
<8!+></8!+>
,efine"te un formular
+tandard
89:; I.G
Action<(+L
+pecific adresa 0.; a script%ului care va
prelucra datele din formular
+tandard
89:; I.G
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
Enct7&e<%od de
codare
+pecific modul de codare al datelor
+tandard
89:; I.G
ethod<%etoda
+pecific metoda de transmitere a datelor.
Palori posi!ile #ost= Get
+tandard
89:; I.G
0a%e<nu%e
+pecific un nume pentru formular pentru a
fi folosit de un script =ava+cript
@etscape
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
Tar$et<nu%e
+pecific numele ferestrei n care vor fi
afi"ate rezultatele dup procesarea
formularului
&plorer,
@etscape
<8+AE></8+AE
>
,efine"te un cadru ntr%un set de cadre
&plorer,
@etscape
Border<n
+eteaz grosimea chenarului unui cadru @etscape
Bordercolor<cu
loare
+eteaz culoarea chenarului unui cadru
&plorer,
@etscape
8ra%eborder<)a
loare
+ta!ile"te dac chenarul cadrului va fi
afi"at.
Palori posi!ile: 7es/no 2@etscape6,
1 / @ 2@etscape, &plorer6
&plorer,
@etscape
ar$inhei$ht<n
+eteaz distana n pi&eli, dintre coninutul
cadrului "i marginile superioar "i inferioar
&plorer,
@etscape
ar$inCidth<n
+eteaz distana n pi&eli, dintre coninutul
cadrului "i marginile din st#nga "i din
dreapta
&plorer,
@etscape
0a%e<nu%e
+pecific numele cadrului
&plorer,
@etscape
0oresi3e
$nuleaz posi!ilitatea utilizatorului de a
redimensiona cadrul
&plorer,
@etscape
Fcrollin$<)alo
are
+pecific dac sunt prezente !arele de
derulare.
Palori posi!ile: 7es, no, auto
&plorer,
@etscape
Frc<(+L
+pecific adresa 0.; a documentului care
se va deschide n cadru
&plorer,
@etscape
<8+AEFET></8+
AEFET>
,efine"te un set de cadre
&plorer,
@etscape
Border<n
+eteaz grosimea chenarelor cadrelor din
set
@etscape
Bordercolor<cu
loare
+eteaz culoarea chenarelor cadrelor din set
&plorer,
@etscape
/ols<lista
+pecific numrul "i limea cadrelor din set
&plorer,
@etscape
8ra%eborder<)a
loare
+ta!ile"te dac chenarele cadrelor vor fi
afi"ate.
Palori posi!ile: Fes/no 2@etscape6,
D / C 2@etscape, &plorer6
&plorer,
@etscape
8ra%es&acin$<n
,efine"te grosimea chenarelor cadrelor din
set
&plorer
+oCs<lista
+pecific numrul "i nlimea cadrelor din
set
&plorer,
@etscape
<Hn></Hn>
Inserarea titlurilor. . ia valori ntre D 2titlu
de nivel ma&im6 "i B 2titlu de nivel minim6
+tandard
89:; I.G
Ali$n<&o3itie
+pecific alinierea titlului.
Palori posi!ile: left, right, center
+tandard
89:; I.G
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
<HEAD></HEAD>
,elimiteaz antetul documentului
+tandard
89:; I.G
<Hn></Hn>
Insereaz un n te&t titlu de nivel n, unde n
este ntre D "i B.
+tandard
89:; I.G
Ali$n<t7&e
+pecific alinierea titlului.
Palori posi!ile: le*t, center, ri$ht.
+tandard
89:; I.G
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
<H+>
Introduce o linie orizontal
+tandard
89:; I.G
Ali$n<&o3itie
+pecific alinierea liniei.
Palori posi!ile: le*t, center, ri$ht
+tandard
89:; I.G
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
/olor<culoare
+eteaz culoarea liniei &plorer
Fi3e<)aloare
+pecific grosimea liniei, n pi&eli
+tandard
89:; I.G
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
'idth<)aloare
+pecific limea liniei, n pi&eli sau n
procente din limea paginii
+tandard
89:; I.G
<HTL></HTL>
,elimiteaz documentul 89:;
+tandard
89:; I.G
<I></I>
$fi"eaz te&tul cu caractere italice
+tandard
89:; I.G
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
<I8+AE></I8+A
E>
,efine"te un cadru intern &plorer
Ali$n<&o3itie
+eteaz poziia cadrului fa de te&tul care l
nconjoar.
Palori posi!ile: to&, center, botto%,
le*t, ri$ht
&plorer
8ra%eborder<)a
loare
+ta!ile"te dac chenarul cadrului va fi
afi"at.
Palori posi!ile: 1 sau @.
&plorer
Hei$ht<n
+eteaz nlimea cadrului, n pi&eli &plorer
ar$inhei$ht<n
+eteaz distana n pi&eli, dintre coninutul
cadrului "i marginile superioar "i inferioar
&plorer
ar$inCidth<n
+eteaz distana n pi&eli, dintre coninutul
cadrului "i marginile din st#nga "i din
dreapta
&plorer
0a%e<nu%e
+pecific numele cadrului &plorer
Fcrollin$<)alo
are
+pecific dac sunt prezente !arele de
derulare.
Palori posi!ile: 7es, no
&plorer
Frc<(+L
+pecific adresa 0.; a documentului care
se va deschide n cadru
&plorer
'idth<n
+eteaz limea cadrului, n pi&eli &plorer
<IG>
Insereaz o imagine n document
+tandard
89:; I.G
Ali$n<&o3itie
$liniaz imaginea fa de te&tul din jur.
Palori posi!ile: to&, %iddle, botto%,
le*t= ri$ht
+tandard
89:; I.G
Alt<strin$
+pecific un te&t alternativ imaginii
+tandard
89:; I.G
Border<n
+eteaz limea n pi&eli a chenarului n
jurul imaginii
+tandard
89:; I.G
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
/ontrols
$daug !utoane de control ferestrei n care
ruleaz un clip video
&plorer
D7nsrc<(+L
+pecific adresa 0.; a fi"ierului video &plorer
Hei$ht<n
+pecific nlimea imaginii, n pi&eli
+tandard
89:; I.G
Hs&ace<n
+pecific distana pe orizontal dintre
imagine "i te&tul din jur
+tandard
89:; I.G
Is%a&
Indic faptul c imaginea este o zon activ,
atunci c#nd este inclus ntre etichetele
<A></A>
+tandard
89:; I.G
Loo&<)aloare
+eteaz numrul de reluri al clipului video.
Paloarea poate fi un numr ntreg sau
in*inite.
&plorer
0a%e<nu%e
>urnizeaz un nume pentru imagine, pentru
a fi folosit de un script =ava+cript
@etscape
Frc<(+L
+pecific adresa 0.; a imaginii
+tandard
89:; I.G
Ftart<)aloare
+pecific momentul nceperii clipului.
Palori posi!ile: 8ile!&en, ouse!)er
&plorer
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
(se%a&<(+L
+pecific legtura cu identificatorul hrii
aplicate imaginii
+tandard
89:; I.G
Js&ace<n
+pecific distana pe vertical dintre
imagine "i te&tul din jur
+tandard
89:; I.G
'idth<n
+pecific limea imaginii, n pi&eli
+tandard
89:; I.G
<I0#(T
t7&e<"button">
)reeaz un element de tip !uton n cadrul
unui formular
&plorer,
@etscape
0a%e<nu%e
+pecific numele parametrului care va fi
transmis script%ului care proceseaz
formularul
&plorer,
@etscape
on/lic;<scri&t
+pecific script%ul care va fi e&ecutat dac
se efectueaz clicJ pe !uton
&plorer,
@etscape
Jalue<strin$
+pecific te&tul care va fi afi"at pe !uton
&plorer,
@etscape
<I0#(T
t7&e<"chec;box
">
)reeaz un element de tip caset de validare
n cadrul unui formular
+tandard
89:; I.G
/hec;ed
:archeaz elementul ca fiind iniial selectat
+tandard
89:; I.G
0a%e<nu%e
+pecific numele parametrului care va fi
transmis script%ului care proceseaz
formularul, dac acest element este selectat
+tandard
89:; I.G
on/lic;<scri&t
+pecific script%ul care va fi apelat dac
acest element este selectat
&plorer,
@etscape
)alue<strin$
+pecific valoarea parametrului care va fi
transmis script%ului care proceseaz
formularul, dac acest element este selectat
+tandard
89:; I.G
<I0#(T
t7&e<"hidden">
)reeaz un element ascuns n cadrul
formular
+tandard
89:; I.G
0a%e<nu%e
+pecific numele parametrului care va fi
transmis script%ului care proceseaz
formularul
+tandard
89:; I.G
Jalue<strin$
+pecific valoarea acestui element care va fi
transmis script%ului
+tandard
89:; I.G
<I0#(T
t7&e<"i%a$e">
)reeaz un element de tip imagine n cadrul
unui formular
+tandard
89:; I.G
Ali$n<&o3itie
$liniaz elementul fa de te&tul care
nsoe"te elementele din formular.
Palori posi!ile: to&, %iddle, botto%
+tandard
89:; I.G
Border<n
+eteaz grosimea chenarului imaginii, n
pi&eli
+tandard
89:; I.G
on/lic;<scri&t
+pecific script%ul care va fi apelat dac se
efectueaz clicJ pe imagine
&plorer,
@etscape
0a%e<nu%e
+pecific numele parametrului care va fi
transmis script%ului care proceseaz
formularul
+tandard
89:; I.G
Frc<(+L
+pecific adresa 0.; a imaginii
+tandard
89:; I.G
<I0#(T
t7&e<"&assCord
">
)reeaz un c#mp de tip passord ntr%un
formular
+tandard
89:; I.G
axlen$th<n
+pecific numrul ma&im de caractere care
pot fi introduse
+tandard
89:; I.G
0a%e<nu%e
+pecific numele parametrului care va fi
transmis script%ului care proceseaz
formularul
+tandard
89:; I.G
onBlur<scri&t
+pecific un script care va fi apelat c#nd
mouse%ul prse"te elementul
&plorer,
@etscape
on/han$e<scri&
t
+pecific un script care va fi apelat c#nd
coninutul c#mpului este schim!at
&plorer,
@etscape
on8ocus<scri&t
+pecific un script care va fi apelat c#nd
mouse%ul se afl poziionat pe acest c#mp
&plorer,
@etscape
onFelect<scri&
t
+pecific un script care va fi apelat c#nd se
efectueaz clicJ pe acest c#mp
&plorer,
@etscape
Fi3e<n
+pecific numrul de caractere care vor fi
afi"ate n interiorul c#mpului
+tandard
89:; I.G
Jalue<strin$
+pecific valoarea iniial a c#mpului "i
valoarea care va fi transmis script%ului care
proceseaz formularul
+tandard
89:; I.G
<I0#(T
t7&e<"radio">
)reeaz un element de tip !uton radio n
cadrul unui formular
+tandard
89:; I.G
/hec;ed
:archeaz elementul ca iniial selectat
+tandard
89:; I.G
0a%e<nu%e
+pecific numele parametrului care va fi
transmis script%ului care proceseaz
formularul, dac acest element este selectat
+tandard
89:; I.G
on/lic;<scri&t
+pecific script%ul care va fi apelat dac
acest element este selectat
&plorer,
@etscape
Jalue<strin$
+pecific valoarea parametrului care va fi
transmis script%ului, dac acest element este
selectat
+tandard
89:; I.G
<I0#(T
t7&e<"reset">
)reeaz un !uton de tip Reset ntr%un
formular
+tandard
89:; I.G
on/lic;<scri&t
+pecific script%ul care va fi e&ecutat dac
se efectueaz clicJ pe !uton
&plorer,
@etscape
Jalue<strin$
+pecific te&tul care va fi afi"at pe !uton
2presta!ilit acesta este .eset6
+tandard
89:; I.G
<I0#(T
t7&e<"sub%it">
)reeaz un !uton de tip &ubmit ntr%un
formular
+tandard
89:; I.G
0a%e<nu%e
+pecific numele parametrului care va fi
transmis script%ului care proceseaz
formularul
+tandard
89:; I.G
on/lic;<scri&t
+pecific script%ul care va fi e&ecutat dac
se efectueaz clicJ pe !uton
&plorer,
@etscape
Jalue<strin$
+pecific te&tul care va fi afi"at pe !uton
2presta!ilit acesta este +u!mit6
+tandard
89:; I.G
<I0#(T
t7&e<"text">
)reeaz un element de tip c#mp de editare
ntr%un formular
+tandard
89:; I.G
axlen$th<n
+pecific numrul ma&im de caractere
acceptate
+tandard
89:; I.G
0a%e<nu%e
+pecific numele parametrului care va fi
transmis script%ului care proceseaz
formularul
+tandard
89:; I.G
onBlur<scri&t
+pecific un script care va fi apelat c#nd
mouse%ul prse"te elementul
&plorer,
@etscape
on/han$e<scri&
t
+pecific un script care va fi apelat c#nd
coninutul c#mpului este schim!at
&plorer,
@etscape
on8ocus<scri&t
+pecific un script care va fi apelat c#nd
mouse%ul se afl poziionat pe acest c#mp
&plorer,
@etscape
onFelect<scri&
t
+pecific un script care va fi apelat c#nd se
efectueaz clicJ pe acest c#mp
&plorer,
@etscape
Fi3e<n
+pecific numrul de caractere care vor fi
afi"ate n interiorul c#mpului
+tandard
89:; I.G
Jalue<strin$
+pecific valoarea iniial pentru acest
c#mp "i valoarea care va fi transmis script%
ului
+tandard
89:; I.G
<BBD></BBD>
9e&tul inclus ntre etichete este un te&t de
tip (intrare de la tastatur(
+tandard
89:; I.G
<LI></LI>
,elimiteaz elementul unei liste
+tandard
89:; I.G
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
T7&e<*or%at
+pecific forma de marcaj a elementului.
+tandard
89:; I.G
Jalue<n
+eteaz numrul acestui element n cadrul
listei la valoarea n
+tandard
89:; I.G
<LI0B>
,efine"te o legtur ntre documentul n
care este prezent eticheta "i un alt
document
+tandard
89:; I.G
Hre*<(+L
+pecific adresa 0.; a documentului int
+tandard
89:; I.G
+el<relatie
+pecific relaia dintre documentul curent "i
documentul int
+tandard
89:; I.G
+e)<relatie
+pecific relaia dintre documentul int "i
documentul curent
+tandard
89:; I.G
Title<strin$
+pecific un titlu pentru documentul int
+tandard
89:; I.G
T7&e<strin$
+pecific tipul documentului int. +e
folose"te n asociere cu foile de stiluri unde
tipul are valoarea te&t/css
&plorer,
@etscape
<A#></A#>
,efine"te o hart conin#nd zone active n
cadrul unei imagini hart
+tandard
89:; I.G
0a%e<nu%e
+pecific un nume pentru hart
+tandard
89:; I.G
<A+S(EE></A+
S(EE>
)reeaz un te&t derulant &plorer
Ali$n<&o3itie
$liniaz te&tul derulant fata de te&tul din
jur.
Palori posi!ile: to&, botto%, %iddle
&plorer
Beha)ior<ti&
de %iscare
,efine"te tipul de mi"care.
Palori posi!ile: scroll, slide,
alternate
&plorer
B$color<culoar
e
,efine"te un fundal pentru te&tul derulant &plorer
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer
Direction<dire
ctia de
%iscare
,efine"te direcia de deplasare.
Palori posi!ile: le*t, ri$ht
&plorer
Hei$ht<n
,efine"te nlimea zonei de te&t, n pi&eli &plorer
Hs&ace<n
+pecific distana pe orizontal ntre te&tul
derulant "i te&tul din jur
&plorer
Loo&<)aloare
+eteaz numrul de animaii ale te&tului &plorer
Ft7le<stil
+pecific un stil in#line pentru etichet &plorer
Js&ace<n
+pecific distana pe vertical ntre te&tul
derulant "i te&tul din jur
&plorer
'idth<n
,efine"te limea ariei de te&t derulant &plorer
<E0(></E0(>
,efine"te o list de tip meniu
+tandard
89:; I.G
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
T7&e<ti&
%arcaG
,efine"te tipul de marcaj pentru list.
Palori posi!ile: circle, disc, sNuare
&plorer,
@etscape
<ETA>
>urnizeaz informaii suplimentare despre
document
+tandard
89:; I.G
/harset<set de
caractere
+pecific setul de caractere care va fi
utilizat n document
&plorer
/ontent<strin$
+pecific valoarea meta%informaiei
+tandard
89:; I.G
Htt&-
eKui)<strin$
+pecific numele meta%informaiei, n
echivalent 899/. /rovoac includerea
informaiilor despre document n headerul
899/ care este transmis de server,
!rowserului
+tandard
89:; I.G
0a%e<nu%e
+pecific numele meta%informaiei
+tandard
89:; I.G
<0!B+></0!B+>
Interzice ntreruperea liniilor n te&tul inclus
ntre etichete
&plorer,
@etscape
<0!8+AEF></0!
8+AEF>
,efine"te coninutul furnizat !rowserelor
care nu suport cadre
&plorer,
@etscape
<0!F/+I#T></0!
F/+I#T>
,efine"te coninutul furnizat !rowserelor
care nu suport script%uri
@etscape
<!L></!L>
,efine"te o list ordonat
+tandard
89:; I.G
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
Ftart<n
+eteaz numerotarea listei ncep#nd de la
valoarea n
+tandard
89:; I.G
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
T7&e<*or%at
+eteaz formatul de marcare a listei.
Palori posi!ile: $ 2litere mari6, a 2litere
mici6, I 2cifre romane mari6, i 2cifre romane
mici6, D 2cifre ara!e6
+tandard
89:; I.G
<!#TI!0></!#TI
!0>
,efine"te o opiune n cadrul unui !loc
<FELE/T>ntr%un formular
+tandard
89:; I.G
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
Felected
:archeaz elementul ca fiind iniial selectat
+tandard
89:; I.G
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
Jalue<strin$
+pecific valoarea returnat script%ului care
prelucreaz formularul
+tandard
89:; I.G
<#></#>
+pecific nceputul "i sf#r"itul unui paragraf
+tandard
89:; I.G
Ali$n<&o3itie
$liniaz te&tul din paragraf.
Palori posi!ile: le*t, center, ri$ht
+tandard
89:; I.G
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
<#+E></#+E>
)reeaz un !loc de te&t care respect
formatarea predefinit n documentul
89:;
+tandard
89:; I.G
<F></F>
<FT+IBE></FT+I
BE>
.ealizeaz afi"area te&tului tiat de o linie
orizontal
+tandard
89:; I.G
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
<F/+I#T></F/+I
#T>
,efine"te un script n cadrul unui document
&plorer,
@etscape
Lan$ua$e<li%ba
+pecific lim!ajul script%ului.
Palori posi!ile: Ga)ascri&t, )bscri&t
&plorer,
@etscape
Frc<(+L
+pecific adresa 0.; a documentului care
conine script%ul
&plorer,
@etscape
<FELE/T></FELE
/T>
,efine"te un element de tip meniu ntr%un
formular
+tandard
89:; I.G
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
ulti&le
/ermite selectarea de opiuni multiple din
meniu
+tandard
89:; I.G
0a%e<nu%e
,efine"te numele parametrilor
corespunztori opiunilor din meniu.
$cestea vor fi transmise script%ului care
proceseaz formularul
+tandard
89:; I.G
onBlur<scri&t
+pecific un script care va fi apelat c#nd
mouse%ul prse"te elementul
@etscape
on/han$e<scri&
t
+pecific un script care va fi apelat c#nd
coninutul c#mpului este schim!at
@etscape
on/lic;<scri&t
+pecific un script care va fi apelat c#nd se
efectueaz clicJ pe acest c#mp
@etscape
on8ocus<scri&t
+pecific un script care va fi apelat c#nd
mouse%ul este poziionat pe acest c#mp
@etscape
Fi3e<n
,ac nOD este afi"at un meniu de tip sus/jos,
daca nWD se afi"eaz un meniu cu !ar de
derulare
+tandard
89:; I.G
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
<FALL></FALL
>
$fi"eaz te&tul cu fonturi de dimensiune
mai mic dec#t cea curent
+tandard
89:; I.G
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
<F#A0></F#A0>
,efine"te un sector de te&t pentru a i se
aplica un stil
&plorer,
@etscape
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
<FT+!0G></FT+!
0G>
$fi"eaz te&tul cu caractere aldine
+tandard
89:; I.G
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
<FT"LE></FT"LE
>
,efine"te un stil n cadrul unui document
&plorer,
@etscape
T7&e<*or%at
+pecific formatul stilului. ?ntotdeauna
valoarea este text/css
&plorer,
@etscape
<F(B></F(B>
/ermite scrierea indicilor inferiori
+tandard
89:; I.G
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
<F(#></F(#>
/ermite scrierea indicilor superiori
+tandard
89:; I.G
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
<TABLE></TABLE
>
,efine"te un ta!el
+tandard
89:; I.G
Ali$n<&o3itie
$liniaz ta!elul fa de te&tul din jur.
Palori posi!ile: left, right, center
+tandard
89:; I.G
Bac;$round<(+L
,efine"te o imagine de fundal pentru ta!el &plorer
B$color<culoar
e
,efine"te o culoare de fundal pentru ta!el
&plorer,
@etscape
Border<n
+pecific grosimea n pi&eli a chenarului
ta!elului
+tandard
89:; I.G
Bordercolor<cu
loare
,efine"te culoarea chenarului &plorer
Bordercolordar
;<culoare
,efine"te culoarea laturilor de jos "i dreapta
ale ta!elului
&plorer
Bordercolorli$
ht<culoare
,efine"te culoarea laturilor de sus "i st#nga
ale ta!elului
&plorer
/ell&addin$<n
+pecific distana dintre marginea celulelor
"i te&tul din interiorul lor
+tandard
89:; I.G
/ells&acin$<n
+pecific distana dintre celule
+tandard
89:; I.G
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
/ols<n
+pecific numrul de coloane din ta!el
&plorer,
@etscape
8ra%e<&o3itie
chenar
,efine"te poziia laturilor din chenar care
vor fi afi"ate.
Palori posi!ile: border, )oid, abo)e,
beloC, hsides, )sides, lhs, rhs,
box
&plorer
Hei$ht<n
,efine"te nlimea ta!elului n pi&eli sau
procente
+tandard
89:; I.G
Hs&ace<n
+pecific distana pe orizontal ntre
marginile ta!elului "i elementele din jur
@etscape
0oCra&
Interzice ntreruperea liniilor n cadrul
celulelor ta!elului
&plorer
+ules<%ar$ini
+pecific unde vor fi afi"ate chenarele
celulelor.
Palori posi!ile: none, roCs, cols, all
&plorer
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
Jali$n<&o3itie
$liniaz te&tul din ta!el.
Palori posi!ile: to&, center, botto%,
baseline
&plorer
Js&ace<n
+pecific distana pe vertical ntre
marginile ta!elului "i elementele din jur
@etscape
'idth<n
,efine"te limea ta!elului n pi&eli sau
procente din limea paginii
+tandard
89:; I.G
<TD></TD>
,efine"te o celul de date n ta!el
+tandard
89:; I.G
Ali$n<&o3itie
$liniaz coninutul celulei.
Palori posi!ile: le*t, center, ri$ht
+tandard
89:; I.G
Bac;$round<(+L
+pecific o imagine de fundal pentru celul &plorer
B$color<culoar
e
+pecific o culoare de fundal pentru celul
&plorer,
@etscape
Bordercolor<cu
loare
,efine"te culoarea chenarului celulei &plorer
Bordercolordar
;<culoare
,efine"te culoarea laturilor de jos "i dreapta
ale celulei
&plorer
Bordercolorli$
ht<culoare
,efine"te culoarea laturilor de sus "i st#nga
ale celulei
&plorer
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
/ols&an<n
+pecific e&tinderea celulei curente peste n
coloane vecine
+tandard
89:; I.G
Hei$ht<n
,efine"te nlimea celulei n pi&eli
+tandard
89:; I.G
0oCra&
Interzice ntreruperea linei de te&t n celul
+tandard
89:; I.G
+oCs&an<n
+pecific e&tinderea celulei curente peste n
linii vecine
+tandard
89:; I.G
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
Jali$n<&o3itie
$liniaz coninutul celulei.
Palori posi!ile: top, center, !ottom, !aseline
+tandard
89:; I.G
'idth<n
,efine"te limea celulei n pi&eli
+tandard
89:; I.G
<TEATA+EA></TE
ATA+EA>
)reeaz un c#mp de editare multi%linie n
cadrul unui formular
+tandard
89:; I.G
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
/ols<n
+pecific numrul de coloane 2caractere6
disponi!ile pe orizontal
+tandard
89:; I.G
0a%e<nu%e
+pecific numele parametrului care va fi
transmis script%ului care proceseaz
formularul
+tandard
89:; I.G
onBlur<scri&t
+pecific un script care va fi apelat c#nd
mouse%ul prse"te elementul
@etscape
on/han$e<scri&
t
+pecific un script care va fi apelat c#nd
coninutul c#mpului este schim!at
@etscape
on8ocus<scri&t
+pecific un script care va fi apelat c#nd
mouse%ul se afl poziionat pe acest c#mp
@etscape
onFelect<scri&
t
+pecific un script care va fi apelat c#nd se
efectueaz clicJ pe acest c#mp
@etscape
+oCs<n
+pecific numrul de linii disponi!ile pe
orizontal
+tandard
89:; I.G
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
'ra&<ti&
+eteaz tipul de ntrerupere a liniilor de te&t.
Palori posi!ile: o**, )irtual
2ntreruperea te&tului e afi"at dar nu e
transmis la server6, &h7sical
2ntreruperea e afi"at "i transmis la server6
@etscape
<TH></TH>
,efine"te un cap de ta!el
+tandard
89:; I.G
Ali$n<&o3itie
$liniaz coninutul celulelor.
Palori posi!ile: left, center, right
+tandard
89:; I.G
Bac;$round<(+L
+pecific o imagine de fundal pentru celul &plorer
B$color<culoar
e
+pecific o culoare de fundal pentru celul
&plorer,
@etscape
Bordercolor<cu
loare
,efine"te culoarea chenarului celulei &plorer
Bordercolordar
;<culoare
,efine"te culoarea laturilor de jos "i dreapta
ale celulei
&plorer
Bordercolorli$
ht<culoare
,efine"te culoarea laturilor de sus "i st#nga
ale celulei
&plorer
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
/ols&an<n
+pecific e&tinderea celulei curente peste n
coloane vecine
+tandard
89:; I.G
Hei$ht<n
,efine"te nlimea celulei n pi&eli
+tandard
89:; I.G
0oCra&
Interzice ntreruperea linei de te&t n celul
+tandard
89:; I.G
+oCs&an<n
+pecific e&tinderea celulei curente peste n
linii vecine
+tandard
89:; I.G
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
Jali$n<&o3itie
$liniaz coninutul celulei.
Palori posi!ile: top, center, !ottom, !aseline
+tandard
89:; I.G
'idth<n
,efine"te limea celulei n pi&eli
+tandard
89:; I.G
<TITLE></TITLE
>
,efine"te titlul documentului 89:;
+tandard
89:; I.G
<T+></T+>
,efine"te o linie de celule ntr%un ta!el
+tandard
89:; I.G
Ali$n<&o3itie
$liniaz coninutul celulelor din line.
Palori posi!ile: le*t, center, ri$ht
+tandard
89:; I.G
B$color<culoar
e
+pecific o culoare de fundal pentru
ntreaga linie
&plorer,
@etscape
Bordercolor<cu
loare
,efine"te culoarea chenarului liniei &plorer
Bordercolordar
;<culoare
,efine"te culoarea laturilor de jos "i dreapta
ale liniei
&plorer
Bordercolorli$
ht<culoare
,efine"te culoarea laturilor de sus "i st#nga
ale liniei
&plorer
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
0oCra&
Interzice ntreruperea liniilor de te&t pentru
toate celulele liniei
&plorer
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
Jali$n<&o3itie
$liniaz coninutul celulelor din cadrul
liniei.
Palori posi!ile: to&, center, botto%,
baseline
+tandard
89:; I.G
<TT></TT>
>ormateaz te&tul inclus ntre etichete n stil
monospaiat
+tandard
89:; I.G
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
<(></(>
$fi"eaz te&tul su!liniat
+tandard
89:; I.G
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
<(L></(L>
,efine"te o list neordonat
+tandard
89:; I.G
/lass<nu%e
+pecific o clas de stiluri care controleaz
aspectul acestei etichete
&plorer,
@etscape
Ft7le<stil
+pecific un stil in#line pentru etichet
&plorer,
@etscape
T7&e<*or%at
,efine"te formatul marcajului pentru
elementele listei.
Palori posi!ile: circle, disc, sKuare
+tandard
89:; I.G
Anexa $
<ic(ionar %e termeni
applet 2i =ava6 0n program =ava de dimensiuni reduse care poate
fi inclus ntr%un document 89:;. $pplet%urile
difer de programele =ava prin aceea c sunt
restricionate din punct de vedere al accesului la
anumite resurse ale computerului pe care ruleaz,
precum "i al accesului la resursele reelei. $ceste
restricii sunt impuse pentru a preveni nclcrile
accidentale sau deli!erate ale securitii sistemului.
$+)II +istemul standard de codificare a caracterelor
folosit pentru a reprezenta literele mari "i mici,
cifrele, caracterele speciale de pe tastatur, etc.
+istemul $+)II cuprinde DG3 de coduri, fiecare
dintre acestea fiind reprezentat printr%un numr
!inar de 4 cifre, ntre CCCCCCC "i DDDDDDD.
+istemul $+)II e&tins cuprinde GHB de coduri,
ultimele DG3 fiind folosite pentru a reprezenta
caractere nestandard: litere accentuate sau care nu
fac parte din alfa!etul latin, de e&emplu.
!ps 2!its per second6 0nitatea de msur a vitezei de transfer a datelor.
0n modem de HBa poate transmite datele cu o
vitez de p#n la H4 CCC !ps.
!rowser 0n program care permite vizualizarea
hFperte&tului "i navigarea ntre diferite resurse
aflate pe -e!.
)<I
2)ommon <atewaF
Interface6
0n set de reguli care descrie modul de comunicare
dintre un server -e! "i anumite aplicaii aflate pe
acesta, numite programe )<I. 'rice aplicaie poate
fi un program )<I dac respect regulile de intrare
a datelor, respectiv de afi"are a rezultatelor impuse
de standardul )<I.
cgi%!in @umele atri!uit directorului de pe serverul -e! n
care sunt stocate programele )<I.
client
2computer i
aplicaie i6
0n computer sau o aplicaie software care este
folosit pentru a contacta "i a o!ine anumite date de
la un alt computer sau aplicaie 2server6.
dial%up ' cone&iune temporar ntre dou computere prin
intermediul liniei telefonice.
director 0n nod n sistemul ierarhic de fi"iere, care poate
conine alte noduri: fi"iere sau alte directoare.
download /rocesul de transfer al unui fi"ier de pe un alt
computer pe computerul propriu.
domeniu 2i Internet6 0n grup de computere din reeaua Internet care
mpart acela"i nume de domeniu. @umele de
domeniu sunt formate din dou sau mai multe pri
separate prin punct. /artea din st#nga este cea mai
specific, cea din dreapta este cea mai general.
0n computer poate face parte din mai multe
domenii 2poate avea mai multe nume de domeniu6,
dar un nume de domeniu indic n mod unic spre
un singur computer.
e%mail 2electronic
mail6
0n sistem de transmitere a datelor 2mesaje tip te&t,
imagini, 89:;, etc.6 ntre doi sau mai muli
utilizatori, pe reeaua Internet. /o"t electronic.
folder +inonim, n sistemele -indows, cu director.
>9/
2>ile 9ransfer
/rotocol6
:etoda de transfer a fi"ierelor ntre dou locaii de
pe Internet. /rin >9/ un computer poate fi conectat
la un alt computer de pe Internet pentru a se realiza
trimiterea sau primirea fi"ierelor. +istemul >9/ a
fost inventat "i utilizat cu mult nainte de -orld
-ide -e!.
<I>
2<raphic Interchange
>ormat6
0nul dintre cele mai folosite formate pentru
codificarea imaginilor, folosit mai ales n cazul
imaginilor cu numr redus de culori 2GHB6 "i care
conin zone e&tinse colorate cu aceea"i culoare.
<opher 0n sistem ierarhizat de meniuri care conin
informaii despre resursele disponi!ile pe Internet.
<opher folose"te o interfa de tip te&t "i
funcioneaz pe principiul client/server, ceea ce
nseamn c pentru a putea accesa sistemul este
necesar o aplicaie <opher client. ,e"i a cunoscut
o larg popularitate la mijlocul anilor kEC n prezent
este n general nlocuit de -orld -ide -e!. $stzi
nu mai e&ist dec#t relativ puine servere <opher.
header /artea de la nceputul unui pachet de date care
conine informaii despre coninutul pachetului,
adresa sursei "i a destinaiei, verificri ale erorilor
"i alte c#mpuri.
host 0n computer dintr%o reea care este furnizorul unor
servicii pentru celelalte computere din reea cum ar
fi +:9/ 2e%mail6 sau 899/ 2---6
89:;
28Fperte&t :arJup
;anguage6
;im!ajul folosit pentru a crea documente -e!.
,ocumentele 89:; pot fi vizualizate folosind un
!rowser.
899/
28Fperte&t 9ransfer
/rotocol6
/rotocolul de transfer al fi"ierelor de tip hFperte&t.
ste cel mai important protocol folosit n -orld
-ide -e!.
hFperte&t, hFpermedia 0n te&t care conine legturi 2linJ%uri6 ctre alte
documente. &tinderea hFperte&tului prin
includerea elementelor media: sunet, imagini,
video este cunoscut su! numele de hFpermedia.
Internet ' imens reea de reele de computere
interconectate, care acoper ntreg glo!ul.
I/
2Internet /rotocol6
0n numr format din patru grupuri de numere mai
mici de GHB, separate prin punct care identific n
mod unic fiecare computer conectat la Internet.
I+/
2Internet +ervice
/rovider6
' instituie care furnizeaz contra cost acces la
reeaua Internet.
=ava 0n lim!aj de programare orientat pe o!iecte,
inventat de firma +un :icrosFstems, folosit adesea
pentru a realiza aplicaii pentru Internet. ;im!ajul
=ava este utilizat foarte frecvent pentru a crea
aplicaii de dimensiuni reduse numite applet%uri
care pot fi incluse n paginile -e!.
=ava+cript 0n lim!aj de programare utilizat pentru face
paginile -e! dinamice "i interactive.
=/<
2=oint /hotographic
&perts <roup6
0n format foarte utilizat pentru fi"ierele grafice.
ste folosit pentru imagini fotografice cu numr
foarte mare de culori.
legtura 2linJ6 ' referin aflat ntr%un document ctre un alt
punct din acela"i document sau ctre un document
diferit. ;a efectuarea de clicJ cu mouse%ul pe
legtur, !rowserul afi"eaz documentul specificat
n referin.
:I:
2:ultipurpose Internet
:ail &tensions6
;a origine, standardul care define"te tipurile de
fi"iere ata"ate unui mesaj prin e%mail. ste folosit
pe scar larg pentru a defini diversele tipuri de
fi"iere transmise prin reea.
motor de cutare
2search engine6
0n sistem de aplicaii folosit pentru a cuta
informaii n -orld -ide -e!.
&emple: <oogle, Lahoo, ;Fcos, etc.
port D. ;ocul de intrare sau ie"ire a informaiilor n/din
computer. ,e e&emplu, un port serial este locul
unde este conectat modemul.
G. 0n numr care face parte uneori din adresa
0.;, semnific#nd un anumit serviciu oferit de
server. >iecare serviciu oferit de server deine un
numr standard de port, de e&emplu 899/ deine
portul 3C.
protocol 2i Internet6 0n set de reguli formale care regleaz transferul de
informaii prin reeaua Internet. /rotocoalele de
nivel sczut definesc standardele de tip electric sau
fizic iar protocoalele de nivel nalt definesc
standardele privind formatarea datelor, sinta&a
mesajelor, setul de caractere, etc.
plug%in ' aplicaie de dimensiuni reduse care adaug
anumite caracteristici sau e&tinde ntr%o anumit
direcie posi!ilitile unei aplicaii mai largi.
.<* 2.ed, <reen,
*lue6
+istemul standard de codificare a culorilor. >iecare
culoare este desemnat printr%o com!inaie de trei
numere scrise fie n sistemul zecimal fie n cel
he&azecimal, care specific ce cantitate de ro"u,
verde "i al!astru intr n componena culorii
respective.
script 0n program scris ntr%un lim!aj de programare
cum ar fi )/)RR, /erl, =ava+cript "i altele, care
poate fi e&ecutat de !rowser 2client%side script6 sau
de server 2server%side script6
server D. 0n computer care furnizeaz anumite servicii
altor computere conectate n reea.
G. ' aplicaie care asigur anumite servicii altor
aplicaii numite clieni. ;egtura dintre client "i
server are drept scop transmiterea de informaii
respect#nd un anumit protocol.
+:9/
2+imple :ail 9ransfer
/rotocol6
/rotocolul principal utilizat pentru a transmite
informaii de tip e%mail de la un server la altul
9)//I/
29ransmission )ontrol
/rotocol/Internet
/rotocol6
' suit de protocoale care definesc n ansam!lu
transmiterea datelor pe Internet. ;a origine, a fost
destinat sistemului de operare 0@I_, n prezent
este inclus n toate sistemele de operare
importante.
0@I_ )el mai utilizat sistem de operare folosit pentru
serverele de Internet.
upload /rocesul de transfer al datelor de pe computerul
personal pe un alt computer.
0.;
20niform .esource
;ocator6
$dresa unei resurse disponi!ile pe Internet. /rima
parte a adresei se nume"te schem. +chema
precizeaz protocolul de transfer al datelor, cea
utilizat n cadrul -e! fiind http.
-orld -ide -e!
2---6
' colecie imens de documente de tip hFperte&t
conectate prin intermediul reelei Internet "i care
folose"te protocolul 899/ pentru transferul
informaiilor.
/rescurtri uzuale: -e!, ---, -I.