Cuprins Cteva cuvinte...nainte HTML i World Wide Web Capitolul 1 Primii pai Ce este HTML?

Standarde i e tensii HTML Con!inut i aspect ntr"un document HTML #neltele de care ave!i nevoie Cum s$ proceda!i? Conven!ii de nota!ie %e&umat Capitolul ' Structura unui document HTML 1. Ce este un document HTML? 2. (tic)ete de structur$ 3. *olosirea corect$ a etic)etelor 4. %e&umat 5. Test Capitolul + Culori 1. Sistemul de de,inire a culorilor 2. Coresponden!a dintre codurile )e a&ecimal i &ecimal 3. Culoarea ,undalului 4. Culoarea te tului 5. Culoarea le-$turilor 6. .le-erea culorilor 7. Culori /si-ure/ 8. %e&umat 9. Test Capitolul 0 *onturi 1. *ormatarea caracterelor 2. .ccentuarea te tului 3. (tic)ete lo-ice i etic)ete ,i&ice 4. %e&umat 5. Test Capitolul 1 *ormatarea te tului 1. Trecerea la un rnd nou 2. Titlurile 2Headin-s3 3. Para-ra,ele 4. Pre,ormatarea te tului 5. Centrarea te tului 6. .,iarea te tului pe o sin-ur$ linie 7. 4locul 56789 8. Linii ori&ontale 9. 7nserarea unei adrese potale 10. 7nserarea unui citat 11. 7nserarea caracterelor speciale 12. Su-estii privind aspectul te tului 13. %e&umat 14. Test Capitolul : Le-$turi 2Lin;"uri3

1. .dresa #%L 2. .drese absolute i adrese relative 3. Stabilirea le-$turilor 4. .ncore " le-$turi n cadrul aceleiai pa-ini 5. Le-$tura c$tre o pa-in$ a,lat$ n acelai director 2,older3 6. Le-$tura c$tre o pa-in$ locali&at$ n alt director 2,older3 7. Le-$tura c$tre pa-ini e terne 8. .le-erea culorilor pentru le-$turi 9. #tili&area potei electronice 2e"mail3 10. Le-$turi c$tre ,iiere oarecare 11. 6esc)iderea pa-inilor re,erite printr"o le-$tur$ 12. Crearea unei bare secundare de navi-are 13. %e&umat 14. Test Capitolul < 7ma-ini i elemente multimedia 1. *ormatele ,iierelor -ra,ice 2. Cteva metode de ob!inere a ima-inilor 3. 7nserarea unei ima-ini 4. 6imensionarea ima-inii 5. .linierea ima-inii i a te tului 6. 7ma-ini ,olosite ca ,ond 2bac;-round3 al pa-inii 7. 7ma-ini ,olosite ca le-$turi 8. 7ma-inile miniaturale 2t)umbnails3 9. 7ma-inile video 10. Sunetele 11. Su-estii privind ,olosirea ima-inilor i elementelor multimedia 12. 7ma-inile i timpul de nc$rcare al pa-inii 13. %e&umat 14. Test Capitolul = Liste 1. Liste neordonate 2. Liste ordonate 3. 7mbricarea listelor 4. Liste de de,ini!ii 5. %e&umat 6. Test Capitolul > Tabele 1. Crearea unui tabel 2. .linierea tabelului n pa-in$ 3. 6imensionarea unui tabel 4. Spa!ierea celulelor unui tabel 5. 6imensionarea celulelor unui tabel 6. .linierea con!inutului unei celule 7. 6e,inirea culorilor pentru un tabel 8. Titlul unui tabel 9. Capul de tabel 10. Tabele de ,orme oarecare 11. Celule ,$r$ con!inut 12. ?rupuri de coloane 13. .tribute pentru aspectul c)enarului unui tabel

14. Tabele imbricate 15. %ecomand$ri privind ,olosirea tabelelor 16. %e&umat 17. Test Capitolul 1@ Cadre 2*rames3 1. 6ocumentul de de,inire a cadrelor 2. Cadre imbricate 3. Controlul aspectului unui cadru 4. 4are de derulare 5. Po&i!ionarea documentului ntr"un cadru 6. Cadre interne 7. 6esc)iderea documentelor n alte cadre 8. Su-estii privind ,olosirea cadrelor 9. %e&umat 10. Test Capitolul 11 *ormulare 2*orms3 1. Ce este un ,ormular? 2. Crearea unui ,ormular 3. (tic)eta 57AP#T9 4. (tic)etele 5S(L(CT9 i 5BPT7BA9 5. (tic)eta 5T(CT.%(.9 6. 8alidarea datelor 7. %e&umat 8. Test Capitolul 1' Script"uri C?7 1. Ce este C?7? 2. Trans,erul datelor 3. ( ecu!ia script"ului 4. Structura unui script 5. ( emple de script"uri 6. 7nstalarea interpretorului Perl i a aplica!iei PWS 7. %e&umat Capitolul 1+ DavaScript 1. Ce este DavaScript? 2. Cum poate ,i inclus un script n pa-in$? 3. Modul de e ecu!ie al script"ului 4. Ce se poate reali&a cu DavaScript? 5. %e&umat Capitolul 10 *oi de stiluri 2CSS3 1. Ce este un stil? 2. Tipuri de ,oi de stiluri 3. (,ecte ob!inute cu aEutorul stilurilor 4. %e&umat Capitolul 11 (lemente avansate de -ra,ic$ 1. 7ma-ini )art$ 2. 7ma-ini animate 3. 7ma-ini transparente 4. %e&umat Capitolul 1: Motoare de c$utare i metata-"uri 1. Ce este un motor de c$utare?

2. Metata-"uri 3. %e&umat Crearea i publicarea unui site Capitolul 1< Plani,icarea 1. *actori care nu pot ,i plani,ica!i 2. (tapele plani,ic$rii site"ului 3. %e&umat Capitolul 1= 6esi-nul 1. Principiile desi-nului Feb 2. Br-ani&area unui site 3. Metodolo-ia de construire a site"ului 4. Te)nici de desi-n Feb 5. ?reeli de desi-n 6. %e&umat Capitolul 1> Testarea 1. Corectarea pa-inilor 2. Testarea pa-inilor 3. %e&umat Capitolul '@ Publicarea 1. Aumele de domeniu 2. Serviciul de -$&duire Web 2Web )ostin-3 3. Br-ani&area i denumirea ,iierelor 4. Trans,erul ,iierelor 5. %e&umat Cteva cuvinte...la ,inal .ne a 1 7nde etic)ete .ne a ' ?losar .ne a + Tabelul culorilor

Cteva cuvinte...nainte Internetul reprezint, fr ndoial, mediul de comunicare al iitorului, un iitor care, n multe pr!i ale lumii de"a a nceput. #l reprezint o erita$il re olu!ie pa%nic %i tcut, care rezid n a&ocierea pro're&i dintre informatic %i mi"loacele de comunicare, conduc(nd la o inte'rare fa&cinant a tuturor mi"loacelor tradi!ionale de comunicare) telefonie cla&ic %i mo$il, radio, tele iziune, tran&mi&ii de date, nre'i&trri audio %i ideo. *u aprut c+iar forme noi de comunicare, utilizate cu entuzia&m de milioane de oameni din lumea ntrea', cum &unt e,mail,ul %i c+at,ul, care de"a au do$(ndit re'uli proprii, o cultur %i c+iar %i un folclor propriu. Internetul a produ& totodat o e-traordinar democratizare a informa!iei %i comunicrii. . cantitate literalmente uria% de informa!ie, &u$ toate formele &ale) te-t, ima'ini &tatice &au ideo, &unet, adunate ntr,o /$i$liotec/ acce&i$il oricui, oric(nd, de la orice calculator le'at la re!ea, fa! de care c+iar %i cele mai complete enciclopedii cla&ice par o 'lum. * de enit o "oac de copil comunicarea direct, n timp real, cu eri%oara din 0lu", cu prietenul din *u&tralia, cu firma furnizoare din 1razilia

&au cu $anca din #l e!ia. 2unt &uficiente pentru toate ace&tea un computer, un modem %i o linie telefonic. 3e%i Internetul %i 4orld 4ide 4e$ cuno&c o e-pan&iune e-ponen!ial, &e afirm totu%i c &e afl nc n faza copilriei. 5aport(ndu,ne la o a&tfel de apreciere, am putea afirma c n 5om(nia Internetul e&te nc n fa%, dar cu un poten!ial de dez oltare cert %i rapid a&cendent. 0u toate c foarte mul!i tineri manife&t un intere& %i o de&c+idere e-traordinare ctre orice &u$iect le'at de Internet, ace&t domeniu e&te cel mai ade&ea i'norat n licee, &au tratat cu &uperficialitate. 6ro'ramele %colare nu l a$ordeaz dec(t tan'en!ial, prin urmare nu e-i&t manuale %colare dedicate, iar lucrrile de &pecialitate la un ni el acce&i$il &trluce&c prin a$&en!. 3e&i'nul %i pro'ramarea 4e$ &e afl ntr,o dez oltare accelerat %i con&tituie o orientare profe&ional cu un mare poten!ial de &ucce&, dar n mod parado-al, relati pu!ini tineri &e ndreapt azi ctre ace&te domenii. 7nul din moti e l con&tituie, de&i'ur, aten!ia in&uficient acordat ace&tor ramuri ale informaticii n n !m(ntul liceal, alturi de un contact direct cu Internetul e-trem de redu&, limitat mai ale& de po&i$ilit!ile te+nice %i economice actuale ale %colilor. *r'umentul principal care m,a determinat & &criu acea&t carte a fo&t un &onda" realizat n r(ndul ele ilor unui liceu de informatic, &onda" ale crui rezultate au confirmat impre&ia ini!ial. 8i anume faptul c, n marea lor ma"oritate 987:;, ele ii %i dore&c & n e!e nu doar & utilizeze Internetul, ci, urm(nd ndrzneala tipic (r&tei, & de in o prezen! acti n ace&t mediu de comunicare. 0ei mai mul!i %i dore&c ace&t lucru pentru a &e e-prima pe &ine, pentru a comunica lumii %i n acea&t form, faptul c e-i&t, c au calit!i, dorin!e, a&pira!ii, talente, cuno%tin!e, '(nduri, &entimente care merit & fie cuno&cute %i de ceilal!i. 8i cum pot fi pu&e toate ace&tea n aloare c(t mai eficient, ntr,un mod acce&i$il pentru milioane de oameni din lumea lar', dac nu pe un &ite 4e$< 2copul ace&tei cr!i, dedicate lim$a"ului &pecific Internetului, =>?@, %i te+nicilor uzuale de creare a unui &ite 4e$, e&te & i n e!e, nu doar pe tineri, ci pe to!i cei care %i dore&c ace&t lucru, & %i creeze propriul &ite pe Internet, cu minimum de efort %i co&turi, %i cu ma-imum de rezultate. 0artea nu %i propune & fie o lucrare academic, un manual e-+au&ti de =>?@ %i 4e$ de&i'n. 2u$iectele &unt e-trem de a&te %i ar fi fo&t impo&i$il cuprinderea lor ntr,o &in'ur lucrare. *m dorit & ofer o ima'ine de an&am$lu a&upra lim$a"ului =>?@, cu un marcat accent pe a&pectele practice ale utilizrii &ale, precum %i o trecere n re i&t a unora dintre cele mai folo&ite te+nici de pro'ramare care e-tind po&i$ilit!ile lim$a"ului) &cript,urile 0AI, Ba a2cript, pro'ramarea cu a"utorul foilor de &tiluri 022. 3e a&emenea, n partea a doua a cr!ii am prezentat etapele proce&ului de con&truire a unui &ite 4e$ %i c(te a dintre te+nicile uzuale de de&i'n 4e$. *dre&(ndu,&e mai ale& nceptorilor care &tp(ne&c totu%i elementele de $az 9utilizarea computerului %i &i&temul de operare 4indoC&, no!iuni de editare de te-t %i ima'ini;, cartea e&te &cri& ntr,un lim$a" care &e dore%te acce&i$il. Diecare no!iune prezentat e&te n&o!it de e-emple reprezentate de &ec en!e de cod =>?@ ce ilu&treaz modul ei de aplicare. 5ecomandarea noa&tr e&te ca cititorii & erifice per&onal toate ace&te e-emple, deoarece numai e-periment(nd pe cont propriu &e poate a"un'e la o $un n!ele'ere %i &tp(nire a efectelor codului =>?@ a&upra a&pectului pa'inii 4e$.

Enc+eiem cu &peran!a c acea&ta carte a con&titui un in&trument de lucru util %i c, la finalul ei cititorii or do$(ndi a$ilitatea de a con&trui, pu$lica %i men!ine un &ite propriu intere&ant, atr'tor %i perfect func!ional. 8i, de ce nu, ca o parte din ei & fac din acea&t acti itate o erita$il profe&ie. Aot$ asupra terminolo-iei utili&ate Entruc(t anumi!i termeni din lim$a en'lez, &pecifici domeniului a$ordat n prezenta lucrare, au intrat n lim$a"ul curent ca atare, i om utiliza %i noi n acea&t form. *m optat pentru folo&irea lor cu &tatut de neolo'i&me, n forma ori'inal, uneori cu forme fle-ionare ad,+oc, c+iar cu ri&cul de a fi con&iderate drept /$ar$ari&me/ de ctre lin' i%tii puritani. En definiti , n ace&t fel au intrat n lim$a" termeni de"a con&acra!i precum computer, tast, monitor, mouse, pixel, CDROM, modem, server, port, ca & dm numai c(te a e-emple. 6entru unii termeni am utilizat am$ele forme aflate n circula!ie, cum ar fi link legtur, font caracter, tag etichet. #-i&t %i autori care folo&e&c numai ec+i alentele rom(ne%ti ale ace&tor termeni. 0u toate c traducerea lor re&pect cel mai ade&ea &en&ul, ace&te ec+i alente nu au reu%it & &e impun n lumea informaticii, nu de pu!ine ori utilizarea lor conduc(nd, n mod parado-al, la confuzii &au nedumeriri. 9Fu or$im aici de tentati ele ridicole, cum ar fi de pilda icoan, &au, nc %i mai ru, iconi, utilizate de unii autori pentru icon, care fire%te c nu pot a ea reo %an& de &ucce&.; 6rezentm n continuare o li&t a ace&tor termeni. #-plica!ii a&upra &en&ului lor &e '&e&c n te-t %iG&au n 'lo&arul prezentat la &f(r%itul cr!ii. bro se r directo r do nlo ad e!mail folder link script "eb host, hosting icon tag template font site

HTML i World Wide Web Enainte de a ncepe prezentarea lim$a"ului =>?@, om face c(te a precizri de&pre &emnifica!ia conceptului World Wide Web 9ntr,o traducere apro-imati , p(nz de pian"en, cu &en&ul de re!ea, e-tin& n lumea lar';. 6recizrile ar putea prea inutile, dar realitatea e&te c de%i foarte mult lume or$e%te de&pre 4orld 4ide 4e$, pu!ini %tiu e-act ce reprezint. ?ai mult, datorit e-tinderii &ale e-ponen!iale %i a e-traordinarei &ale popularit!i, ade&ea no!iunea e&te confundat cu cea de Internet. 4orld 4ide 4e$ e&te n& doar o parte a Internetului. Internetul e-i&t de mai $ine de treizeci de ani. 1azele ace&tuia au fo&t pu&e la &f(r%itul anilor H60, ca urmare a unei ini!iati e a 3epartamentului de *prare al 2tatelor 7nite, care a ea drept &cop realizarea unei re!ele ro$u&te %i fia$ile de comunica!ii ntre computere aflate la di&tan!. 5e!eaua a ea rolul de a a&i'ura un contact permanent ntre elementele &ale componente, c+iar dac o parte din le'turi ar fi fo&t ntrerupte ca urmare a unui atac nuclear. 7lterior, re!eaua a ptrun& n domeniul ci il %i a fo&t adoptat rapid, ini!ial de lumea academic, mai apoi de companiile comerciale.

Internetul nu e&te altce a dec(t un an&am$lu alctuit dintr,un numr enorm de re!ele de computere interconectate, localizate pe toat &uprafa!a 'lo$ului, care &uport di er&e pac+ete &oftCare cum ar fi e,mailul, 'rupurile de %tiri 9ne sgroup;, protocoalele de tran&fer al fi%ierelor 9D>6;, Aop+er %i 4orld 4ide 4e$. 0u toate a anta"ele imen&e oferite de po&i$ilit!ile de comunicare 'lo$al a informa!iilor ca %i de rapiditatea comunicrii, Internetul a rma&, reme de dou decenii, doar apana"ul a'en!iilor 'u ernamentale %i al mediilor %tiin!ifice. ?oti ul l,a con&tituit dezor'anizarea &a ini!ial c a&i,total. Dolo&irea unor &tandarde de comunica!ie %i a unor pac+ete &oftCare foarte di er&e reprezentau ni%te $ariere te+nolo'ice aproape in&urmonta$ile pentru utilizatorii o$i%nui!i. En plu&, informa!iile acce&i$ile la acea reme pe Internet erau prezentate &u$ forma unor &imple fi%iere te-t %i nu n forma cuno&cut azi. 3ez oltarea e-plozi pe care a cuno&cut,o Internetul n ultimii zece ani a fo&t determinat de apari!ia 4orld 4ide 4e$. 4orld 4ide 4e$ a luat na%tere n 1989, ca urmare a eforturilor unor fizicieni ai 0#5F 9@a$oratorul #uropean de Dizica 6articulelor; de a pune la punct un &i&tem &tandardizat pentru crearea %i di&tri$uirea documentelor electronice oriunde pe 'lo$, &i&tem care & permit inte'rarea tuturor elementelor media) te-t, ima'ini, &unet. *%a cum do ede%te imen&a &a popularitate, 4e$,ul &,a do edit a fi mediul ideal pentru di&tri$uirea informa!iilor ntr,o maniera e-tin& %i acce&i$il. ?oti ul l con&tituie faptul c 4e$,ul a&i'ur o interfa! )Gpermedia pentru informa!ii. =Ipermedia reprezint ariatele tipuri de informa!ie 9te-t, ima'ini, fi%iere audio %i ideo; care pot fi localizate oriunde pe 'lo$, mpreun cu le'turile dintre ele. 6entru a tran&mite %i a afi%a informa!iile +Ipermedia, 4e$,ul folo&e%te un protocol de tran&fer 9un &et de re'uli; care e&te numit HTTP 9#$pertext %ransfer &rotocol, protocol de tran&mitere a +Iperte-tului;. 3eci, n e&en!, 4orld 4ide 4e$ e&te o colec!ie imen& de documente interconectate prin intermediul Internetului, care folo&e%te protocolul =>>6 pentru a afi%a elementele +Ipermedia. 6entru a face po&i$il o a&emenea performan!, &,a impu& nece&itatea ca fiecare computer conectat la Internet & fie identificat n mod unic, printr,un element numit adre&a 7P 9'nternet &rotocol;. *dre&a I6 e&te format din patru numere, fiecare mai mic de 255, de&pr!ite ntre ele prin punct 9de e-emplu 123.67.9.201;. En reme ce computerele lucreaz cu numere, oamenii prefer numele. 3in ace&t moti , fiecrei a&emenea adre&e I6 i &,a a&ociat %i un nume. 0um &unt &ute de milioane de computere n ntrea'a lume, a eni cu un nume unic care & diferen!ieze un computer de celelalte pare aproape impo&i$il. >otu%i, & ne amintim c Internetul e&te o re!ea de re!ele. #l e&te mpr!it n 'rupuri numite domenii care, la r(ndul lor, &unt mpr!ite n subdomenii. 3atorit ace&tui fapt, c+iar dac un computer poart un nume de&tul de comun, prin a&ocierea ace&tui nume cu domeniul %i &u$domeniile din care face parte, &e o$!ine un nume unic de identificare al computerului re&pecti . .r'anizarea domeniilor pe Internet re&pect un model ierar+ic. 6rimul ni el ierar+ic l con&tituie di er&ele tipuri de or'aniza!ii. >ot pe primul ni el &e afl %i domeniile core&punztoare !rilor lumii, de e-emplu uk, pentru ?area 1ritanie &au ro, pentru 5om(nia. 7rmtorul ni el ierar+ic l con&tituie or'aniza!iile, firmele, in&titu!iile care de!in propriile domenii %i &u$domenii. Internetul conecteaz dou tipuri de computere) serverele, care furnizeaz documentele, %i clien!ii, care &olicit %i afi%eaz documentele pentru a fi izualizate de utilizator. 6entru a acce&a %i afi%a documentele =>?@, pe computerul client ruleaz aplica!ii numite broFsere. 7neori termenii &er er 4e$ %i client 4e$ pot produce confuzii, deoarece &e refer at(t la computerele pe care ruleaz ace&te aplica!ii c(t %i la aplica!iile n &ine. 3in ace&t moti , pentru aplica!ia

client om folo&i termenul de bro ser, iar pentru aplica!ia &au pac+etul de aplica!ii care ruleaz pe &er er, termenul de aplicaie server. 5ela!ia client,&er er pe care &e $azeaz func!ionarea 4orld 4ide 4e$ e&te facilitat de protocolul de comunica!ie =>>6. Interac!iunea dintre $roC&erul 4e$ %i &er erul 4e$ ncepe cu o cerere din partea clientului. *plica!ia client tran&mite o cerere ctre aplica!ia &er er. *cea&t cerere poate con&ta n tran&miterea unui anumit document &au n efectuarea unei anumite tranzac!ii. *plica!ia &er er fie ndepline%te cererea clientului, caz n care o$iectul &olicitat e&te tran&mi& $roC&erului, fie o refuz, &itua!ie n care $roC&erul afi%eaz $inecuno&cutele me&a"e de eroare />+e pa'e cannot $e di&plaIed/ &au /Dile not found/. 0u alte cu inte, proce&ul izualizrii unei pa'ini 4e$ ncepe cu o cerere a $roC&erului 4e$ ctre &er erul 4e$. 1roC&erul tran&mite &er erului detalii de&pre el n&u%i %i de&pre fi%ierul pe care l dore%te prin intermediul unui )eader HTTP de cerere 9+eaderul e&te acea parte a unui pac+et de date care e&te pla&at naintea informa!iilor efecti tran&mi&e %i care poate con!ine adre&a &ur&ei %i a de&tina!iei, erificri ale erorilor %i alte c(mpuri;. 2er erul prime%te %i analizeaz +eaderele =>>6 de cerere n cutarea informa!iilor rele ante, cum ar fi numele fi%ierului care e&te &olicitat %i tran&mite napoi fi%ierul cerut mpreun cu +eaderele =>>6 de r&pun&. 1roC&erul folo&e%te +eaderele =>>6 de r&pun& pentru a determina cum & afi%eze rezultatele o$!inute. >re$uie & &u$liniem c $roC&erele nu au ne oie de cone-iune la Internet ca & func!ioneze. 6ute!i ncrca %i afi%a cu a"utorul $roC&erului dumnea oa&tr documente =>?@ care &unt &tocate pe propriul +ard,di&J. *cea&ta d, printre altele, po&i$ilitatea de a definiti a %i te&ta documentele =>?@ nainte de a le pu$lica pe Internet, e it(nd a&tfel prezentarea unor pa'ini nc nefinalizate, cu erori, &au care func!ioneaz defectuo&. Capitolul 1 Primii pai 1. Ce este HTML? HTML e&te o a$re iere de la #$pertext Markup (anguage %i reprezint &c+eletul oricrei pa'ini de 4e$. =>?@ nu e&te un lim$a" de pro'ramare. Fu e!i lucra aici cu aria$ile, e-pre&ii, tipuri de date, &tructuri de control. =>?@ e&te un lim$a" de&cripti , prin care &unt de&cri&e elementele &tructurale ale pa'inii de 4e$) titlurile, li&tele, ta$elele, para'rafele, le'turile cu alte pa'ini, precum %i a&pectul pe care l are pa'ina din punct de edere 'rafic. En fond, =>?@ e&te modul n care i comunicam $roC&erului ce elemente dorim & introducem n pa'ina 4e$ %i care e&te a&pectul ace&tora. 2. Standarde i extensii HTML =>?@ e&te un limbaE standardi&at, acea&ta n&emn(nd c orice $roC&er poate interpreta %i afi%a corect un document 4e$. 2inta-a de $az a lim$a"ului =>?@ e&te definit n er&iunea HTML +.'. En prezent a fo&t lan&at %i er&iunea =>?@ 4.0 care &e afl n cur& de &tandardizare. 3e la o er&iune la alta, lim$a"ului =>?@ i &e adu'a noi elemente. 3e a&emenea, fiecare tip de $roC&er 9Fet&cape Fa i'ator %i Internet #-plorer, n particular; folo&e%te anumite elemente ne,&tandard, pentru a m$unt!i capacit!ile lim$a"ului. #tic+etele noi, care nu fac parte din er&iunea &tandard poart numele de e tensii. En 'eneral, $roC&erele cele mai folo&ite, Fet&cape Fa i'ator %i Internet #-plorer recuno&c etic+etele =>?@ 3.2 %i o mare parte din cele nou introdu&e n =>?@ 4.0.

#&te recomandat & e ita!i e-ten&iile, n afara cazului c(nd a e!i un moti foarte &erio& pentru a le folo&i. 6entru utilizatorii $roC&erelor care nu recuno&c ace&te e-ten&ii, anumite pr!i ale documentului dumnea oa&tr pot de eni complet ilizi$ile. 1inen!ele&, e-ten&iile pot afecta n 'rade diferite a&pectul formal al pa'inii dumnea oa&tr. 3e e-emplu, folo&irea e-ten&iilor care !in de a&pectul liniilor orizontale inclu&e n pa'in nu a afecta n mod 'ra a&pectul pa'inii n $roC&erele care nu &uport ace&te e-ten&ii. 0ele mai multe dintre ace&tea or i'nora e-ten&iile %i or afi%a o line orizontal &tandard. 6e de alt parte, e-ten&iile care realizeaz formatarea %i alinierea te-tului %i a&pectul fonturilor pot face ca documentul & ai$ un a&pect foarte dezordonat n $roC&erele care nu &uport e-ten&ii de ace&t tip. 2au, n cazurile cele mai 'ra e, acea parte a documentului poate & nu fie deloc afi%at. 3. Coninut i aspect ntr-un document HTML 6entru a realiza documente 4e$ eficiente, cu impact a&upra cititorului, %i pentru a alorifica pe deplin puterea lim$a"ului =>?@, tre$uie & !ine!i &eama de o idee fundamental) =>?@ e&te de&tinat &tructurrii documentele %i nu doar formatrii n ederea afi%rii lor. =>?@ furnizeaz modalit!i ariate pentru a defini a&pectul documentului) &pecifica!ii le'ate de fonturi 9tipurile de caractere;, de formatare a te-tului, de culori, etc. 3e&i'ur, a&pectul formal e&te important, cci el poate eni n $eneficiul &au n detrimentul acce&i$ilit!ii informa!iilor prezentate. >otu%i, nu a&pectul formal, ci con!inutul documentului primeaz. =>?@ con!ine numeroa&e ci de &tructurare a con!inutului documentului fr a pune pro$lema felului cum or fi afi%ate elementele) titluri, li&te, para'rafe, ima'ini, etc. >oate ace&tea &unt definite n lim$a"ul =>?@ fr a impune $roC&erului & le afi%eze ntr,un anumit mod. 1roC&erului i &e la& a&tfel po&i$ilitatea de a afi%a re&pecti ele elemente n conformitate cu rolul pe care l au ele n &tructura documentului %i nu re&pect(nd re'ulile impu&e de creatorul documentului =>?@. ?arele a anta" al a$ordrii $azate pe con!inut fa! de cea $azat pe a&pect rezid n faptul c pa'inile dumnea oa&tr or fi izualizate cu tipuri diferite de $roC&ere, fiecare a (nd er&iuni diferite. En a$ordarea $azat pe aspect, dac $roC&erul nu recunoa%te indica!iile de formatare &pecificate, fie nu le e-ecut, fie le e-ecut eronat, a&tfel c &tructurarea pa'inii a a ea de &uferit. En a$ordarea $azat pe con!inut, indiferent cum a ale'e $roC&erul & e-ecute indica!iile de formatare, &emnifica!ia elementelor din pa'in a rm(ne ne&c+im$at. 3e e-emplu, dac e!i afi%a titlurile %i &u$titlurile din pa'in folo&ind tipuri diferite de fonturi, caractere cu &tiluri ariate) aldine 9$old, &au n'ro%ate;, cur&i e 9italice, &au nclinate;, &u$liniate, etc., un $roC&er care nu recunoa%te ace&te elemente ar putea afi%a titlurile n acela%i mod n care afi%eaz re&tul te-tului, a&tfel c &emnifica!ia lor n pa'in %i,ar pierde rele an!a. 6e de alt parte, dac e!i folo&i etic+etele &peciale pentru titluri, c+iar daca $roC&erul nu le recunoa%te, are po&i$ilitatea de a e iden!ia totu%i titlurile n cea mai $un manier pe care o are la di&pozi!ie, a&tfel nc(t &emnifica!ia lor pentru re&tul documentului &e a p&tra. 4. ne!te!e de care a"ei ne"oie In&trumentele minime de care a e!i ne oie pentru a realiza documente =>?@ &unt, n e&en!, urmtoarele) un editor de te t, cu a"utorul cruia & &crie!i documentul, un broFser, prin intermediul

cruia & izualiza!i a&pectul %i con!inutul documentului, un editor -ra,ic cu care & prelucra!i ima'inile pe care le e!i introduce n pa'in %i o cone iune la 7nternet. #ditoru! 6entru a &crie documente =>?@ a e!i la di&pozi!ie trei po&i$ilit!i) 1. Dolo&irea unui &implu editor de te t. 0el mai cuno&cut %i acce&i$il e&te Fotepad,ul din 4indoC&. .ten!ieH Fu e&te recomandat & folo&i!i un proce&or de te-t comple- cum e&te ?icro&oft 4ord, c+iar dac ace&ta poate &al a documentele n format =>?@ 9cu e-ten&ia )htm;, deoarece la &al area documentelor 4ord,ul adau' automat la te-tul documentului dumnea oa&tr o mare cantitate de cod con!in(nd informa!ii lip&ite de rele an! care ncarc inutil documentul %i mre%te dimen&iunile fi%ierului. 2. Dolo&irea unui editor HTML. *ce&t tip de editoare dedicate ofer facilit!i n &crierea codului, realizeaz corectarea documentului din punct de edere &intactic %i c+iar &criu &ec en!e de cod pentru anumite elemente pe care dori!i & le in&era!i n document. 3. Dolo&irea unui editor WIS7WI? 9"hat *ou +ee 's "hat *ou ,et, n traducere li$er /ceea ce ezi la editare e&te ceea ce o$!ii la izualizare/;. 7n editor de tip 4K2I4KA permite ale'erea %i formatarea, cu a"utorul mou&e,ului, a elementelor pe care dori!i & le include!i n pa'in) ta$ele, linJ,uri, formulare, pute!i &ta$ili tipul fonturilor, culorile, aran"area te-tului n pa'ina. 6e m&ur ce un anumit element e&te in&erat, editorul &crie n mod automat codul =>?@ core&punztor, fr ca utilizatorul & fie ne oit & inter in a&upra lui. >otu%i, dac a e!i cuno%tin!e de =>?@ pute!i inter eni la ni elul codului n orice manier dori!i, orice &c+im$are pe care o face!i n cod, reflect(ndu,&e automat n a&pectul pa'inii. 6rintre profe&ioni%ti per&i&t o contro er& n pri in!a tipurilor de editoare care ar tre$ui folo&ite pentru a edita documentele =>?@. En e&en!, pro$lema e&te acea&ta) e&te mai $ine &,!i con&truie%ti pa'inile folo&ind =>?@ /pur/, adic &criind totul tu n&u!i, &au e&te de preferat & folo&e%ti un editor de tipul 4K2I4KA< #ditoare deo&e$it de puternice de ace&t tip) ?acromedia 3reamCea er, ?icro&oft Dront 6a'e, 0offe 0up ca & dm numai c(te a e-emple, par a nclina definiti $alan!a n fa oarea ace&tui tip de editare. #le ofer facilita!i a an&ate de editare a pa'inii, inclu&i po&i$ilitatea de a crea pa'ini dinamice %i de a include &cript,uri Ba a2cript &au applet,uri Ba a. 0u a"utorul lor &e pot con&trui &ite,uri e-trem de comple-e. #-i&t, de a&emenea %i editoare de tip /$uilt,in/. *ce&tea &unt cel mai u%or de folo&it %i ade&ea &unt pu&e la di&pozi!ie de pro iderii care ofer %i &er icii 'ratuite de +o&tin' 9CCC.+ome.ro, CCC.r+p.ro, etc.;. #ditoarele de ace&t tip ofer un numr 9de o$icei redu&; de template,uri 9pa'ini preformatate;, %i doar c(te a op!iuni de editare) pute!i adu'a te-t, modifica tipul fonturilor, culoarea fundalului %i a te-tului, forma $utoanelor de na i'are, pute!i include un numr pre&ta$ilit de ima'ini. 3in pcate, 'radul de control a&upra a&pectului pa'inii e&te foarte redu&. 7tilizatorul e&te limitat la c(te a op!iuni, iar numrul mic de template,uri pu&e la di&pozi!ie face ca pa'ina & fie lip&ita de ori'inalitate. *!i putea, atunci, & ntre$a!i de ce mai e&te ne oie & n !a!i =>?@ dac e-i&t editoare profe&ionale care &criu codul n locul dumnea oa&tr. En fond, mul!i dintre Ce$ de&i'nerii profe&ioni%ti

le folo&e&c, deoarece a &crie codul unui &ite /$I +and/, cu a"utorul unui &implu editor de te-t, e&te o munca titanic %i mare con&umatoare de timp. 5&pun&ul e&te &implu) tre$uie & cunoa%te!i =>?@ deoarece oric(t de performant ar fi un editor 4K2I4KA, mai de reme &au mai t(rziu e!i '&i n &itua!ia de a inter eni la ni elul codului. 0ea mai comun &itua!ie e&te aceea n care, datorit multiplelor opera!ii de editare cum &unt mutarea, copierea, %ter'erea elementelor, anumite pr!i ale pa'inii nu or mai func!iona corect. 3e o$icei, inter en!iile nece&are a&upra codului pentru depanarea &a &unt minime %i u%or de realizat... cu condi!ia & %ti!i ce tre$uie & face!i. 0u alte cu inte, & %ti!i =>?@. En concluzie, oricare ar fi op!iunea dumnea oa&tr, fie c e!i folo&i un editor de =>?@ de tip te-t, fie c e!i folo&i unul de tip 4K2I4KA, pentru a putea con&trui documente 4e$ corecte %i func!ionale e&te ne oie & &tp(ni!i $ine lim$a"ul =>?@. $ro%seru! # ident, pentru a izualiza documentele dumnea oa&tr a e!i ne oie de un $roC&er. 5ecomandarea noa&tr e&te & de!ine!i cel pu!in dou dintre cele mai r&p(ndite $roC&ere, Internet #-plorer %i Fet&cape Fa i'ator, de dorit ar fi c+iar cu er&iuni diferite ale aceluia%i $roC&er. >e&tarea pa'inilor dumnea oa&tr &u$ diferite $roC&ere e&te o etap important naintea pu$licrii lor pe 4e$. 3e%i n anii de nceput ai 4e$,ului pro$lema a&pectului pa'inilor n diferite tipuri de $roC&ere era ital, deoarece erau folo&ite o mare di er&itate de $roC&ere, fiecare tip realiz(nd afi%area pa'inilor n maniera &a proprie, n prezent acea&t pro$lem %i,a pierdut din importan!. ?oti ul e&te acela c $roC&erele Internet #-plorer au acaparat cea mai mare parte din pia!, &tati&ticile art(nd c Internet #-plorer e&te tipul folo&it de 93: dintre utilizatori iar Fet&cape Fa i'ator de circa 6: dintre ei. #ditoru! &ra'ic 3e&i'ur, e!i dori & introduce!i ima'ini n pa'inile dumnea oa&tr. 6entru a putea & prelucra!i ima'inile n conformitate cu inten!iile dumnea oa&tr %i cu rolul lor n pa'in a e!i ne oie de un editor 'rafic. Fumrul editoarelor de ace&t tip e&te foarte mare, printre cele mai puternice %i mai cuno&cute fiind 0orel3raC %i *do$e 6+oto&+op. 6ute!i ale'e n& acel editor cu care &unte!i de"a familiarizat, c+iar dac mai pu!in performant, mai ale& dac pentru nceput nu dori!i & face!i prelucrri foarte comple-e ale ima'inilor. Conexiunea !a (nternet 2pre deo&e$ire de primele trei in&trumente, cone-iunea la Internet nu e&te a$&olut e&en!ial n etapa de con&truire a documentului =>?@. *%a cum &puneam, documentele =>?@ &e pot con&trui %i izualiza local, pe propriul computer. 0u toate ace&tea, e-i&ten!a unei cone-iuni Internet a a"uta foarte mult n proce&ul de n !are, %i nu numai. 6e de,o parte deoarece pe 4e$ e!i '&i nenumrate e-emple, %i $une %i rele, pe care le pute!i &tudia. En plu&, e!i a ea acce& la o cantitate uria% %i n continu cre%tere de re&ur&e, documenta!ie %i produ&e care or a"uta cu &i'uran! la con&truirea pa'inilor dumnea oa&tr. 8i, n fine, acce&ul la Internet e&te e&en!ial n etapa de te&tare a le'turilor cu pa'ini e-terne. ). Cum s* procedai?

6entru a folo&i eficient informa!iile din acea&t carte iat mai "o& c(te a indica!ii n pri in!a modului n care pute!i or'aniza acti itatea) 0rea!i, n folderul M$ Documents 9&au ntr,o alta loca!ie alea& de dumnea oa&tr; un folder de lucru numit "ork. 3e&c+ide!i editorul de te-t n care a!i ale& & lucra!i 9ar fi de dorit ca pe parcur&ul proce&ului de n !are & folo&i!i un &implu editor te-t, de e-emplu Fotepad;. 2crie!i 9edita!i; fiecare e-emplu pe care l '&i!i aici. 2al a!i,l n folderul dumnea oa&tr cu numele indicat n $locul L>I>@#M %i e-ten&ia )html. 6ute!i folo&i at(t e-ten&ia )html c(t %i e-ten&ia )htm dar e&te $ine ca odat ce a!i ale& o anumit e-ten&ie & fi!i con&ec ent n folo&irea ei. 3enumi!i, fi%ierele cu litere mici. .ten!ieH #ditorul de te-t -otepad &al eaz fi%ierele cu e-ten&ia implicita /)txt/. 3e aceea c(nd &al a!i e&te nece&ar & preciza!i n mod e-plicit e-ten&ia dorit 9)html &au )htm; 0(nd e!i &al a fi%ierul creat n Fotepad &,ar putea & con&tata!i c re&tul de fi%iere =>?@ pe care le,a!i &al at anterior nu apar n ferea&tr. 6entru a le edea, de&c+ide!i meniul .ile/+ave 0s))), iar n ferea&tra de&c+i& &electa!i din li&t 0ll files. 3e&c+ide!i cu $roC&erul utilizat fi%ierul =>?@ 9.ile/ Open/ 1ro se; pentru a edea cum arat pa'ina 4e$ de&cri& n fi%ierul dumnea oa&tr. 3up fiecare modificare pe care o face!i n fi%ierul =>?@ nu uita!i &,l &al a!i, altminteri &c+im$rile fcute nu &e or reflecta n a&pectul final al pa'inii. 6entru a o$&er a felul cum modificrile pe care le face!i n codul =>?@ &c+im$ a&pectul pa'inii, tre$uie & ap&a!i $utonul Refresh2Reload al $roC&erului. 6entru a putea & izualiza!i cu u%urin! a&pectul pa'inilor dumnea oa&tr e&te $ine & a e!i de&c+i&e permanent at(t editorul de te-t n care &crie!i documentul =>?@ c(t %i $roC&erul cu care l izualiza!i. +. Con"enii de notaie =>?@ nu e&te un lim$a" case!sensitive, adic nu face di&tinc!ia ntre literele mici %i cele mari9ma"u&cule;. *cea&ta n&eamn c indiferent cum &criem etic+etele, cu litere mari &au cu litere mici, ele or fi corect interpretate de $roC&er. 3in ace&t moti pe parcur&ul ace&tei lucrri om utiliza o con en!ie de nota!ie n care etic+etele 9tag,urile; =>?@ &unt &cri&e cu ma"u&cule iar atri$utele a&ociate ace&tora &unt &cri&e cu litere mici pentru o mai $un diferen!iere %i e iden!iere a ace&tora. 3e&i'ur c n documentele pe care le &crie!i pute!i re&pecta acea&t con en!ie &au pute!i &crie cu un &in'ur tip de litere, dup cum e&te mai u%or. 6e&te tot n cadrul te-tului, unde apar etic+ete, atri$ute &au alori ale ace&tora am folo&it caractere 0ourier FeC pentru a diferen!ia elementele de lim$a" de re&tul te-tului. 3e a&emenea, e!i o$&er a c, n e-emplele prezentate, codul =>?@ e&te &cri& indentat, adic aliniat la di er&e ni ele. 0a %i n cazul etic+etelor, ace&t lucru nu are importan! pentru $roC&er.

Indentarea e&te util doar dumnea oa&tr, pentru a diferen!ia %i urmri mai u%or di er&ele elemente pe care le include!i n document. >otu%i, dac n cazul etic+etelor pute!i opta pentru orice ariant dori!i n pri in!a &crierii lor, indentarea e&te recomandat c+iar %i pro'ramatorilor cu e-perien!. 7n cod neindentat e&te foarte 'reu de citit %i de depanat, n cazul apari!iei unor erori. ,. -e.umat 4orld 4ide 4e$ e&te o colec!ie imen& de documente interconectate prin intermediul Internetului, care a&i'ur o interfa! +Ipermedia pentru informa!ii. 6entru a tran&mite %i afi%a documentele, 4orld 4ide 4e$ folo&e%te protocolului de comunica!ie =>>6. Dunc!ionarea 4orld 4ide 4e$ &e $azeaz pe rela!ia client,&er er. 0lien!ii &unt $roC&erele 4e$ iar &er erele &unt &er erele 4e$. @im$a"ul =>?@ realizeaz de&crierea documentelor 4e$. 6rin intermediul &u i &e comunic $roC&erului ce elemente fac parte din pa'ina 4e$ %i care e&te a&pectul ace&tora. #&te recomandat crearea unor documente =>?@ orientate ctre con!inut %i nu ctre a&pect. 6entru a crea documente =>?@ a e!i ne oie de un &et minimal de in&trumente) un editor de te-t, un $roC&er, un editor 'rafic %i o cone-iune la Internet. Capitolul ' Structura unui document HTML 1. Ce este un document HTML? 7n document HTML nu e&te altce a dec(t un fi%ier te-t care, pe l(n' te-tul propriu,zi& ce a aprea n pa'in, con!ine %i o &erie de elemente &peciale, denumite etic)ete, &au marca"e 9tags, n lim$a en'lez;. Aot$ >oate celelalte elemente, de tip multimedia, care n&o!e&c documentul =>?@, cum &unt &unetul, ima'inile ideo, 'rafica, etc., nu fac parte din &tructura ace&tuia. 3ocumentul =>?@ include referin!e la ace&te elemente, prin intermediul unor etic+ete &peciale, care indic $roC&erului modul n care ele or fi ncrcate %i inte'rate n pa'ina 4e$. #tic+etele nu &unt in&truc!iuni n &en&ul cuno&cut al no!iunii, ele a (nd doar rolul de a comunica $roC&erului &emnifica!ia %i modul de afi%are al elementelor inclu&e, pri ind a&pectul te-tului, al fonturilor 9tipurilor de caractere; %i n 'eneral, al tuturor elementelor prezente n pa'in. #tic+etele &unt delimitate de perec+i de paranteze un'+iulare /L M/. 7nele etic+ete permit precizarea anumitor caracteri&tici ale elementului pe care l introduc n document prin intermediul unor perec+i caracteristic ! valoare numite atribute. #-i&t atri$ute &pecifice doar anumitor elemente %i atri$ute ce &unt utilizate n a&ociere cu mai multe etic+ete. . etic+et poate a ea unul, nici unul, &au mai multe atri$ute. @a r(ndul lor, atri$utelor li &e pot atri$ui valori diferite.

*t(t etic+etele c(t %i atri$utele &unt case!insensitive, ca atare nu a e-i&ta nici o diferen! de ac!iune ntre, & &punem, L+eadM, L=eadM, L=#*3M, &au c+iar L=ea3M. #le &unt ec+i alente. 6e de alt parte, aloarea unui atri$ut poate fi case!sensitive, cum, n principiu, e&te cazul loca!iilor fi%ierelor %i adre&elor 75@. 5e'ulile de folo&ire a etic+etelor, atri$utelor %i alorilor ace&tora reprezint sinta a lim$a"ului =>?@. 2imilar lim$a"elor de pro'ramare, n =>?@ re&pectarea &inta-ei lim$a"ului e&te determinant pentru o $un func!ionare a documentului. 2pre deo&e$ire de lim$a"ele compilate cum ar fi lim$a"ul 0, n care pro'ramele trec nainte de e-ecu!ie prin faza de compilare, etap n care compilatorul &emnaleaz e entualele 're%eli de &inta-, la documentele =>?@ nu &e nt(mpl ace&t lucru. 3ocumentele =>?@ &unt interpretate de $roC&er e-act a%a cum au fo&t ele &cri&e. 6rin urmare, orice 're%eal de &inta- &e a reflecta direct n a&pectul pa'inii 4e$, conduc(nd, de cele mai multe ori, la o func!ionare defectuoa& a ace&teia. 3ac la izualizarea pa'inii dumnea oa&tr cu $roC&erul con&tata!i c anumite &ec en!e ale pa'inii nu au a&pectul a%teptat, &au elementele pe care dori!i & le introduce!i nu &unt afi%ate, re eni!i a&upra documentului =>?@ %i erifica!i nc o dat &inta-a ace&tor elemente. =>?@ lucreaz ntr,o manier foarte u%or de n!ele&. En e&en! tre$uie & &crie!i te-tul %i & preciza!i elementele care dori!i & apar n pa'in %i & le include!i ntre anumite etic+ete &pecifice. 3e e-emplu, dac dorim & afi%m o propozi!ie cu caractere n'ro%ate 9$old;, om marca nceputul ace&teia folo&ind etic+eta L1M iar pentru marcarea &f(r%itului propozi!iei etic+eta LG1M. L1M *ce&ta e&te un te-t &cri& cu litere aldineLG1M .ten!ieH 1roC&erul nu !ine cont de numrul &pa!iilor dintre cu inte, afi%area fc(ndu,&e in aria$il cu un &in'ur &pa!iu. 3e a&emenea, nu &e poate preciza mrimea liniilor de te-t, ace&tea fiind de mrimea fere&trei $roC&erului 9prin redimen&ionarea fere&trei &e or rearan"a %i liniile de te-t;. 3up cum om edea mai t(rziu, &e poate preciza totu%i unde & &e termine un anumit r(nd %i cum &e poate alinia un te-t n pa'in. #tic+etele =>?@ &unt de dou tipuri) etic+ete container 9container tags; etic+ete vide 9empt$ tags; #tic+etele container &unt de forma) L>*AM $loc de te-t LG>*AM unde) L>*AM , marc+eaz nceputul unui $loc LG>*AM , marc+eaz &f(r%itul $locului #tic+etele &pecific formatul n care a fi afi%at te-tul con!inut ntre etic+eta de nceput %i cea de final. ?a"oritatea etic+etelor &unt de ace&t tip. . particularitate a etic+etelor container e&te c, n cazul unora dintre ele, prezen!a etic+etei de nc+idere 9LG>*AM; e&te op!ional. 6e parcur&ul capitolelor care or urma, om preciza e-plicit care anume &unt etic+etele care au acea&t proprietate.

#tic+etele vide au forma) L>*AM *ce&t tip de etic+ete nu &e refer la formatul te-telor, ci la introducerea anumitor elemente, ca de e-emplu) para'rafe, &f(r%it de linie, linii orizontale %i altele, deci dau indica!ii $roC&erului de&pre ce element e&te or$a %i de&pre cum & afi%eze acel element. #tic+etele ide nu au etic+et de nc+idere. 2. #tic/ete de structur* .rice document =>?@ con!ine dou &ec!iuni) antetul 9head; corpul documentului 9bod$; 2tructura 'eneral a unui document =>?@ e&te urmtoarea) 5HTML9 5H(.69 5T7TL(9 5JT7TL(9 5JH(.69 54B6I9 5J4B6I9 5JHTML9 3ocumentul e&te delimitat de etic+etele L=>?@M LG=>?@M %i e&te format din cele dou pr!i) antet 9head; , e&te delimitat de etic+etele L=#*3M LG=#*3M %i con!ine titlul documentului precum %i alte informa!ii pri ind documentul. En antetul documentului &e mai in&ereaz %i anumite &ec en!e de pro'ram 9&cript,uri;, care &e e-ecut la ncrcarea documentului n $roC&er) corp 9bodG; , care delimiteaz con!inutul propriu,zi& al documentului %i e&te inclu& ntre etic+etele L1.3KM LG1.3KM Iat acum %i &emnifica!ia etic+etelor men!ionate %i care fac parte din &tructura oricrui document =>?@) 5HTML9 5JHTML9 Entre ace&te etic+ete e&te inclu& ntre'ul document =>?@. #le comunic $roC&erului unde ncepe %i unde &e termin documentul. 5H(.69 5JH(.69 Entre ace&te etic+ete &unt inclu&e titlul, de"a men!ionat, precum %i alte informa!ii de&pre documentul =>?@. *ce&te elemente, numite metatag,uri &unt deo&e$it de importante pentru ca pa'ina & fie c(t mai $ine cotat de ctre motoarele de cutare. #le or face o$iectul unui capitol &eparat. ?etata',urile %i antetul n an&am$lul &u nu &unt izi$ile pentru izitator n pa'ina 4e$. >otu%i, la fel ca ntre' codul =>?@ al pa'inii, antetul poate fi izualizat &elect(nd din meniul $roC&erului op!iunea 3ie / +ource) 5T7TL(9 5JT7TL(9

2ta$ile%te titlul documentului =>?@. >itlul documentului e&te deo&e$it de important deoarece e&te unul din criteriile folo&ite de motoarele de cutare pentru inde-area pa'inii. 6rin urmare, &trdui!i, & '&i!i un titlu care & de&crie c(t mai corect %i complet con!inutul pa'inii dumnea oa&tr. .ten!ieH #tic+eta de mai &u& nu &ta$ile%te titlul care apare n cadrul pa'inii, ci pe acela care apare o$i%nuit n $ara de titlu a $roC&erului. 54B6I9 5J4B6I9 0on!ine de&crierea te-tului %i elementelor pa'inii. En corpul documentului &e &ta$ile&c, deci, a&pectul %i con!inutul pa'inii 4e$. #lementele con!inute n acea&t &ec!iune &unt izi$ile n pa'in. 6oate nu ine & crede!i, dar acum a e!i de"a po&i$ilitatea de a crea o pa'in foarte &impl de te-t. * e!i Fotepad,ul de&c+i&< 3ac nu, de&c+ide!i,l acum %i &crie!i e-emplul urmtor) ( emplul '. 1 L=>?@M L=#*3M L>I>@#M6a'ina meaLG>I>@#M LG=#*3M L1.3KM *m reu&it &a &criu prima mea pa'ina de 4e$. 7rmatoarea a fi cu mult mai $una. LG1.3KM LG=>?@M 2al a!i fi%ierul cu numele primapagina)html. *poi de&c+ide!i $roC&erul pe care l folo&i!i 9Internet #-plorer &au Fet&cape;, &electa!i meniul .ile / Open / 1ro se, cuta!i folderul n care a!i &al at fi%ierul, de&c+ide!i,l %i e!i afla n fa!a primului dumnea oa&tr document =>?@ ) Di'ura 2.1 3ac dori!i & &crie!i un te-t pe mai multe linii n pa'in, a tre$ui & folo&i!i etic+eta L15M 9de la line break;, care face trecerea pe o linie noua. #tic+eta L15M e&te de tip empt$, deci nu are etic+et de nc+idere. Encerca!i e-emplul de mai "o&, n care afi%area te-tului documentului &e a face pe dou r(nduri. ( emplul '. ' L=>?@M L=#*3M L>I>@#M6a'ina meaLG>I>@#M LG=#*3M L1.3KM *m reu&it &a &criu prima mea pa'ina de 4e$.L15M7rmatoarea a fi cu mult mai $una. LG1.3KM LG=>?@M *cum, documentul dumnea oa&tr a arta ca n Di'ura 2.2 3eoarece &tructura documentelor =>?@ o$i%nuite e&te n realitate mult mai comple-, e&te recomandat ca, pe m&ur ce proce&ul de editare a an&eaz, & introduce!i comentarii n te-t pentru a face acea&t &tructur c(t mai e-plicit. 0omentariile nu &unt izi$ile pentru $roC&er, ele &er e&c creatorului pa'inii pentru a da un 'rad cre&cut de lizi$ilitate documentului =>?@.

0omentariile con&tau n &curte informa!ii, e-plica!ii la elementele de cod utilizate, etc., fiind deo&e$it de utile ulterior, mai ale& n &itua!ia n care &e impune depanarea codului. 0omentariile &e introduc prin includerea te-tului ntre etic+etele de mai "o&. LN,, ,,M Iat dou e-emple) LN, , *ce&ta e&te un comentariu introdu& in pa'ina 4e$ , ,M LNO*ce&ta e&te un comentariu pe mai multe randuri care ia &far&it aici ,,M 3. 0o!osirea corect* a etic/ete!or #tic+etele container &e compun, a%a cum am zut mai de reme, din perec+i de etic+ete) etic+et de de&c+idere L>*AM %i de nc+idere LG>*AM. @a con&truirea unei pa'ini 4e$ comple-e e!i fi pu& ade&ea n &itua!ia de a folo&i mai multe etic+ete pentru aceea%i &ec en! de te-t. 3e pild, e!i dori & atri$ui!i unui te-t dou propriet!i) litere aldine &au n'ro%ate 9bold; %i te-t centrat n pa'in. 6entru acea&ta a tre$ui & utiliza!i dou perec+i de etic+ete, care de&criu cele dou propriet!i, n mod &imultan, metod numit imbricarea etic+etelor 9nested tags;, ca n e-emplul de mai "o&) L0#F>#5ML1M>e-t cu aldine &i centratLG1MLG0#F>#5M #&te foarte important ca, n cazul folo&irii mai multor etic+ete container mpreun, ele & fie pla&ate n mod corect. En acea&t &itua!ie, principiul de utilizare e&te) /Last 7n " *irst But/ 9@ID.;. *ce&t lucru n&eamn c ultima etic+et de&c+i& tre$uie & fie prima care &e nc+ide. .ten!ieH >re$uie & fi!i foarte atent la nc+iderea etic+etelor, pentru a nu nclca principiul @ID.. En caz contrar, &ec en!a de cod din pa'in nu a func!iona corect. Iat un e-emplu 'eneric de folo&ire corect a dou etic+ete) L>*A1ML>*A2M#tic+ete utilizate corectLG>*A2MLG>*A1M %i un altul de folo&ire incorect) L>*A1ML>*A2M#tic+ete utilizate incorectLG>*A1MLG>*A2M 4. -e.umat 7n document =>?@ e&te un fi%ier te-t care con!ine te-tul care a aprea n pa'in %i etic+ete. *ce&tea au rolul de a comunica $roC&erului &emnifica!ia %i modul de afi%are al elementelor inclu&e ntre ele.

#tic+etele &unt n&o!ite de atri$ute care &unt perec+i caracteristic ! valoare %i care au rolul de a &ta$ili di er&e caracteri&tici ale etic+etei. #tic+etele pot fi de dou tipuri) etic+ete container %i etic+ete ide. #tic+etele container nece&it etic+eta de nc+idere n timp ce etic+etele ide nu tre$uie nc+i&e. 7n document =>?@ e&te format din antet %i corp. #tic+etele de &tructur ale documentului &unt) L=>?@M LG=>?@M care delimiteaz documentul L=#*3M L=#*3M care delimiteaz antetul L>I>@#M LG>I>@#M care delimiteaz titlul documentului L1.3KM LG1.3KM care delimiteaz corpul documentului. Entr,un document =>?@ &e pot introduce comentarii prin introducerea te-tului ntre etic+etele LN,, ,,M Im$ricarea etic+etelor re&pect re'ula @ID.) prima etic+et de&c+i& e&te ultima care &e nc+ide. ). Test #%M( este un acronim de la4 a; $; c; =Iper >e-t ?arJer @ine =Iper >e-t ?arJup @an'ua'e =Iper >ec+nical ?et+od @i$rarI

5tichetele #%M( sunt incluse 6ntre4 a; $; c; P %i Q 9 %i ; L %i M

5tichetele 7i textul care nu sunt vi8ibile 6n pagin sunt plasate 6n blocul4 a; $; c; 1odI =ead >a$le

Ce fel de program este necesar pentru a scrie #%M(9 a; $; c; un editor de te-t un editor 'rafic =>?@ 3e elopment 4.0

O pagina "eb este format din dou pri4 a; $; c; >op %i 1ottom 1odI %i Drame&et =ead %i 1odI

Care etichete 6i comunica bro serului unde 6ncepe 7i unde se termin pagina9

a; $; c;

L=>?@M L=#*3M L1.3KM

Care dintre urmtoarele elemente nu poate fi gsit 6n seciunea #ead9 a; $; c; >itle >a$le ?etata'

:n construcia urmtoare4 L>I>@#M6a'ina meaLG>I>@#M 6a'ina mea repre8int4 a; $; c; Fumele fi%ierului =>?@ >itlul care a aprea n pa'ina 4e$ >itlul care a aprea n $ara de titlu a fere&trei $roC&erului

Care dintre urmtoarele fi7iere nu este un fi7ier #%M(9 a; $; c; mIpa'e.+tm mIpa'e.t-t mIpa'e.+tml

'at exemplul de mai ;os4 L>*A1M L>*A2M>e-tLG>*A2M L>*A3M>e-t L>*A4M>e-tLG>*A4M LG>*A3M>e-t LG>*A1M 5ste un exemplu de folosire corect a etichetelor9 a; $; c; Fu, deoarece nc+iderea etic+etelor nu re&pect re'ula @ID.. Fu, deoarece nu a em oie & folo&im mai mult de dou etic+ete im$ricate 3a, deoarece etic+etele &e nc+id corect.

Structura unui document HTML

1. $; '. c; +. $; 0. a; 1. c; :. a; <. $;

=. c; >. $; 1@. c;

Capitolul + Culori Culoarea reprezint un caracteri&tic e-trem de important a unei pa'ini 4e$. 7tilizat cu 'ri" %i m&ur, ea poate m$unt!i &u$&tan!ial a&pectul pa'inii, fc(nd,o mai lizi$il %i mai atracti , iar te-tul mai u%or de parcur&. 6e de alt parte, utilizarea e-ce&i &au inadec at a culorilor poate tran&forma un te-t de calitate ntr,un fel de caleido&cop o$o&itor, 'reu de urmrit, %i care i a determina pe mul!i izitatori & renun!e la a,l mai parcur'e. 3atorit faptului c ea reprezint un atri$ut al multor elemente ale documentelor 4e$ 9te-t, fundaluri, mar'ini, linJ,uri;, am optat pentru prezentarea detaliat a modului de utilizare al culorilor nc din acea&t etap a lucrrii noa&tre. 1. Sistemu! de de'inire a cu!ori!or 2i&temul 'eneral utilizat pentru definirea culorilor e&te %?4 prin care &unt &pecificate pentru fiecare culoare care &unt cantit!ile de ro%u 9Red;, erde 9,reen; %i al$a&tru 91lue; care o compun. En =>?@ orice culoare e&te de&emnat printr,un cod de 6 cifre +e-azecimale, dintre care primele dou reprezint cantitatea de ro%u, cele dou din mi"loc, cantitatea de erde, iar ultimele dou cantitatea de al$a&tru. 2i&temul +e-azecimal e&te un &i&tem de numera!ie care folo&e%te 16 cifre, e-i&t(nd urmtoarea core&ponden! ntre cifrele +e-azecimale %i cele zecimale) 0 0 1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 9 9 1 0 * 1 1 1 2 0 1 3 3 1 4 # 1 5 D 1

3e e-emplu, RDD0000 e&te codul pentru ro%u. 2emnifica!ia ace&tui cod e&te urmtoarea) cantitatea de ro%u e&te ma-im, iar cantit!ile de erde %i al$a&tru &unt e'ale cu 0. 0odul pentru erde pur e&te R00DD00 iar pentru al$a&tru e&te R0000DD. 3eoarece uneori definirea culorii prin intermediul codului &u +e-azecimal e&te incomod, &tandardul =>?@ 3.2 &ta$ile%te un &et de 16 culori &tandard. En ace&t caz, pentru aloarea atri$utului de culoare &e utilizeaz direct numele culorii, ca n e-emplul de mai "o&, n care &e &eteaz culoarea ma'enta pentru linJurile izitate) L1.3K linJS/ma'enta/M Fumele %i codul culorilor &ta$ilite n &tandardul =>?@3.2 &unt urmtoarele) Tabelul +. 1

Aume culoare aTua $lacJ $lue fuc+&ia 'raI 'reen lime maroon na I oli e purple red &il er teal IelloC C+ite

Cod )e a&ecimal R00DDDD R000000 R0000DD RDD00DD R808080 R008000 R00DD00 R800000 R000080 R808000 R800080 RDD0000 R000000 R008080 RDDDD00 RDDDDDD

?ai tre$uie men!ionat faptul c &e pot utiliza, pe l(n' culori, 100 de nuan!e de 'ri 9gra$;. #le &unt numerotate de la 1 la 100, /'raI 1/ fiind nuan!a cea mai nc+i&, iar /'raI 100/ cea mai de&c+i&. En *ne-a 3 e!i '&i ta$elul culorilor n&o!ite de codurile lor +e-azecimale. 2. Corespondena dintre coduri!e /exa.ecima! i .ecima! ?ulte dintre editoarele 'rafice folo&e&c pentru a defini culorile codul zecimal. 3e%i &e $azeaz %i ele pe acela%i &i&tem 5A1 de definire a culorilor, numerele care &ta$ile&c cantit!ile celor trei culori &unt &pecificate n &i&temul zecimal. 3e e-emplu, o culoare care are codul +e-azecimal R63DD80 a a ea codul zecimal 99, 255, 128. *cea&t core&ponden! &e realizeaz &implu, trec(nd fiecare dintre cele trei numere +e-azecimale din codul culorii n &i&temul zecimal) 63916;S99910; , DD916;S255910;, 80916;S128910; ?oti ul pentru care tre$uie & cunoa%te!i acea&t core&ponden! e&te acela c pentru a folo&i n documentul =>?@ o culoare al crei cod e&te dat n &i&temul zecimal, acea&ta tre$uie con ertit n cod +e-azecimal.

0on er&ia &e poate realiza foarte &implu folo&ind calculatorul din 4indoC& 9+tart / 0ccessories / Calculator; care tre$uie &etat pe op!iunea +cientific din meniul 3ie . Ue!i o$&er a o &erie de $utoane radio dintre care ne intere&eaz dou) #ex %i Dec. Fu a e!i altce a de fcut dec(t & &electa!i Dec, & ta&ta!i numrul n $aza 10 %i apoi & &electa!i op!iunea #ex. 5ezultatul con er&iei a aprea pe ecran. 0on er&ia in er& &e realizeaz n mod &imilar. 8i acum & trecem la lucruri mai atracti e %i & dm ia! pa'inii noa&tre adu'(ndu,i culori. Uom lua pe r(nd atri$utele etic+etei L1.3KM. 0u a"utorul lor &e pot &eta culorile fundalului, te-tului %i linJurilor) b-color , culoarea fundalului te t , culoarea te-tului lin; , culoarea linJurilor vlin; , culoarea linJurilor izitate alin; , culoarea linJului acti 3. Cu!oarea 'unda!u!ui 6entru a &ta$ili culoarea fundalului unei pa'ini folo&im atri$utul b-color 9background color; al etic+etei L1.3KM, cruia i atri$uim o aloare a&tfel) L1.3K $'colorS/R5A1 &au numeVculoare/M 2e poate folo&i drept aloare pentru atri$utul $'color fie codul +e-azecimal al culorii fie numele ei. Iat un e-emplu de pa'in cu fundal erde) ( emplul +. 1 L=>?@M L=#*3M L>I>@#Mculori1LG>I>@#M LG=#*3M L1.3K $'colorS/R00DD00/M L=1 ali'nS/center/M6a'ina cu fundal erdeLG=1ML=5M LG1.3KM LG=>?@M *&pectul pa'inii a fi cel din Di'ura 3.1. 4. Cu!oarea textu!ui 6entru a &eta culoarea te-tului din ntrea'a pa'in &e folo&e%te atri$utul te t al etic+etei L1.3KM, conform &inta-ei) L1.3K te-tS/R5A1 &au numeVculoare/M 3ac am &ta$ilit o culoare pentru te-tul din pa'in %i dorim & utilizm o alt culoare pentru o anumit &ec!iune a te-tului 9culoarea unui $loc de te-t;, om folo&i o etic+et de&pre care om or$i pe lar' n capitolul urmtor) etic+eta LD.F>M. *cea&ta e&te o etic+et container care cuprinde ntre etic+etele de nceput %i de final te-tul a crui culoare dorim & o modificm. 2ta$ilirea culorii &e face folo&ind atri$utul color al etic+etei conform &inta-ei)

LD.F> colorS/R5A1 &au numeVculoare/M>e-tLGD.F>M En #-emplul 3.2 culoarea te-tului e&te al$a&tru iar anumite cu inte &unt colorate n ro%u. *&pectul pa'inii a fi cel din Di'ura 3.2. ( emplul +. ' L=>?@M L=#*3M L>I>@#Mculori2LG>I>@#M LG=#*3M L1.3K $'colorS/RDDDDDD/ te-tS/R0000DD/M L=1 ali'nS/center/M>e-t al$a&tru &i ro&uLG=1M L=5M >e-tul din acea&ta pa'ina e&te al$a&tru cu mici LD.F> colorS/RDD0000/M e-ceptiiLGD.F>M LG1.3KM LG=>?@M ). Cu!oarea !e&*turi!or En 'eneral le'turile 9links; dintr,o pa'in 4e$ au culori pre&ta$ilite 9default;, a&tfel) $lue 9al$a&tru; , pentru le'turi red 9ro%u; , pentru le'tura acti a 9cea pe care e&te fi-at cur&orul mou&e,ului, cu $utonul &t(n' ap&at; purple 9 iolet; , pentru le'turile izitate, cele pe care &,a efectuat cel pu!in un click 6entru a &c+im$a culorile pre&ta$ilite &e folo&e&c urmtoarele atri$ute ale etic+etei L1.3KM) lin; pentru le'turi alin; pentru le'turile acti e vlin; pentru le'turile izitate conform &inta-ei) L1.3K linJS/R5A1 &au numeVculoare/ alinJS/R5A1 &au numeVculoare/ linJS/R5A1 &au numeVculoare/M 3ocumentul din #-emplul 3.3 creeaz o pa'in n care te-tul e&te ne'ru iar le'turile au culoarea erde, le'turile acti e culoarea al$a&tru %i cele izitate, culoarea ro%u. En e-emplu e&te folo&it etic+eta L*M %i atri$utul &au )re,, care or fi prezentate pe lar' n capitolul de&pre le'turi. En ace&t moment &in'urul lucru care ne intere&eaz e&te cum putem &ta$ili culorile ace&tora. ( emplul +. + L=>?@M L=#*3M L>I>@#Mculori3LG>I>@#M LG=#*3M L1.3K $'colorS/RDDDDDD/ te-tS/R000000/ linJS/R00DD00/ alinJS/R0000DD/ linJS/RDD0000/M L=1 ali'nS/center/M@e'aturi colorateLG=1M L=5M

L* +refS/culori1.+tml/M@e'atura catre primul e-empluLG*M LG1.3KM LG=>?@M *&pectul pa'inii a fi cel din Di'ura 3.3. +. 1!e&erea cu!ori!or 2unt multe elemente care tre$uie luate n con&iderare la ale'erea culorilor pentru o pa'in 4e$. 6rimul %i cel mai important e&te acela de a face con!inutul u%or de citit. *cea&ta n&eamn...a!i '+icitN @itere ne're pe fond al$. 3e%i n e&timenta!ie com$ina!ia de ro%u cu $leumarin e&te rafinat, ntr,o pa'in 4e$ literele ro%ii pe fond al$a&tru nu arat $ine %i &unt 'reu de citit. . alt com$ina!ie nefericit e&te cea cu fondul ne'ru &au de culoare foarte nc+i& %i te-tul de culoare al$. 2 nu uitm nici faptul c toate monitoarele di&pun de re'la"e ale &trlucirii luminoa&e %i ale contra&tului pe care utilizatorii le &eteaz diferit, n func!ie de preferin!ele per&onale, de toleran!a oc+iului, de iluminarea camerei, etc. 6e un monitor cu re'la"e medii ale contra&tului %i &trlucirii, un te-t de culoare ro%ie di&pu& pe un fundal ne'ru a fi ilizi$il, c+iar dac la alori ma-ime ale ace&tor caracteri&tici com$ina!ia poate 'enera efecte intere&ante. En ale'erea culorilor pentru un &ite e&te $ine & !ine!i &eama de c(te a elemente de p&i+olo'ia culorilor, pentru a &u$linia a&tfel me&a"ul pe care re!i & l tran&mite!i. Iat c(te a dintre &entimentele pe care le &u'ereaz culorile) 5o%u , a're&i itate, pa&iune, putere, italitate 5oz , feminitate, inocen!, moliciune 6ortocaliu , amuzament, e&elie, cldur, e-u$eran! Aal$en , &entimente poziti e %i cordialitate Uerde , lini%te, &ntate, pro&pe!ime *l$a&tru , autoritate, demnitate, &ecuritate, ncredere Uiolet , &ofi&ticare, &piritualitate, mi&ter ?aro , utilitate, le'tura cu pm(ntul, $o'!ie *l$ , puritate, ncredere, modernitate, rafinament Ari , &o$rietate, autoritate, &im! practic Fe'ru , &eriozitate, di&tinc!ie, +otr(re *le'erea culorilor pentru &ite tre$uie & fie n concordan! cu tema &ite,ului %i & &u$linieze me&a"ul &u. *&tfel, dac dori!i & con&trui!i un &ite de&tinat copiilor e!i folo&i culori e&ele %i luminoa&e, n reme ce pentru un &ite de&tinat prezentrii unei firme de con&ultan! financiar &unt potri ite culori &o$re %i care &u'ereaz &eriozitate %i ncredere. *le'erea culorilor pentru le'turi e&te, de a&emenea, important. @e'turile au, n mod pre&ta$ilit, anumite culori. 2c+im$area ace&tora, de%i po&i$il, l poate induce n eroare pe izitator. 0a %i n cazul te-tului, ale'e!i pentru le'turi, le'turile izitate %i le'tura acti culori care & in n contra&t cu culoarea &au ima'inea de fundal a pa'inii. 5m(ne!i con&ec ent culorilor ale&e pentru le'turi, pe parcur&ul ntre'ului &ite.

,. Cu!ori 2si&ure2 *%a cum era de a%teptat, nu toate monitoarele pot reproduce cele 16.777.000 de culori furnizate de codul 5A1. 0ele realizate cu te+nolo'ii mai ec+i, &au cele moderne &etate pentru numai 256 de culori pot reproduce corect doar un &et limitat de 256 de culori, a%a,numit palet 4e$ &au /culorile &i'ure 4e$/. Culorile /si-ure/ &unt cele definite prin &tandardul =>?@ 3.2 prezentat n ta$elul de mai &u& &au &unt realizate prin com$ina!ii ale urmtoarelor numere +e-azecimale) 00 33 66 99 00 DD 0odul +e-azecimal ariaz ntre RDDDDDD 9al$; %i R000000 9ne'ru;. 7n monitor &etat & afi%eze 256 de culori a ncerca afi%area unei culori din afara ace&tui &et prin fenomenul numit /dithering/ 9alternarea unui pi-el de o culoare cu un pi-el de alt culoare;, ceea ce uneori d rezultate, dar ade&ea rezultatul e departe de culoarea real. *lteori, computerul a afi%a culoarea /&i'ur/ cea mai apropiat de cea ori'inal. En principiu, o a&tfel de pro$lem poate prea minor. En realitate, pre&upun(nd c o pa'in 4e$ con!ine at(t te-tul c(t %i fundalul am$ele n culori /ne&i'ure/, prin modificarea lor de ctre computerul cititorului, nuan!ele /apro-imate/ pot face te-tul total ilizi$il. 6entru a e ita a&tfel de &urprize neplcute e&te &uficient & men!ine n limita celor 256 de culori /&i'ure/. 3e&i'ur, pute!i folo&i o com$ina!ie +e-azecimal ciudat, ca acea&ta) R12#081, dar nu e!i a ea nici o 'aran!ie n pri in!a modului n care a fi afi%at acea&t culoare n diferite $roC&ere %i pe diferite platforme. 3. -e.umat 0ulorile ntr,un document =>?@ &unt definite cu a"utorul codului 5A1 care e-prim n &i&tem +e-azecimal cantitatea de ro%u, erde %i al$a&tru prezent n fiecare culoare. 6entru a &ta$ili culorile ntr,o pa'in 4e$ &e folo&e&c atri$utele etic+etei L1.3KM dup urmtoarea &inta-) L1.3K $'colorS/R5A1 &au numeVculoare/ te-tS/R5A1 &au numeVculoare/ linJS/R5A1 &au numeVculoare/ alinJS/R5A1 &au numeVculoare/ linJS/R5A1 &au numeVculoare/Mcorpul documentuluiLG1.3KM *le'erea culorilor pentru o pa'in 4e$ tre$uie & fie n &tr(n& le'tur cu me&a"ul tran&mi& de acea&ta %i & permit citirea cu u%urin! a informa!iilor prezentate. 6entru a e ita afi%area defectuoa& a culorilor din pa'in e&te recomandat folo&irea culorilor /&i'ure/. 4. Test 1. a; +istemul pentru definirea culorilor este4 5ed, Areen, 1lue

$; c;

5ed, KelloC, 1lue 4+ite, 1lacJ, AraI

Culorile 6n #%M( pot fi specificate folosind4 a; $; c; 0odul zecimal 0odul +e-azecimal 0odul ?or&e

Care este cea mai mare cifr 6n sistemul hexa8ecimal9 a; $; c; 15 D *

O culoare care are 6n sistemul 8ecimal codul R,1 cu valorile4 <=, >?@, A< are codul hexa8ecimal4 a; $; c; R2#D*22 R300345 R66DD90

&entru a stabili culoarea fundalului paginii folosim4 a; $; c; L1.3K $acJ'roundS/culoare/M L1.3K colorS/culoare/M L1.3K $'colorS/culoare/M

+etarea culorii pentru tot textul din pagin se face cu4 a; $; c; LD.F> colorS/culoare/M L1.3K fontcolorS/culoare/M L1.3K te-tS/culoare/M

Cum se poate schimba culoarea unui bloc de text9 a; $; c; L0.@.5S/culoare/Mte-tLG0.@.5M L>#W> colorS/culoare/Mte-tLG>#W>M LD.F> colorS/culoare/Mte-tLGD.F>M

Care sunt culorile prestabilite pentru legturi, legturi active 7i legturi vi8itate9 a; $; c; al$a&tru, ro%u, iolet al$a&tru, erde, 'al$en ne'ru, al$a&tru, ro%u

Culoarea legturilor se poate schimba folosind4 a; $; L@IFX colorS/culoare/M L1.3K linJS/culoare/M

c;

L1.3K linJcolorS/culoare/M

0tributele linJ5 alinJ 7i linJ servesc la4 a; $; c; &ta$ilirea le'turilor &ta$ilirea culorilor pentru le'turi &ta$ilirea culorilor pentru ntrea'a pa'in

Culori
1. a; '. $; +. $; 0. a; 1. c; :. c; <. c; =. a; >. $; 1@. $;

Capitolul 0 *onturi Enainte de a a$orda tipurile de caractere care pot fi utilizate n documentele 4e$, &e cu ine men!ionat un fapt) =>?@ nu e&te un lim$a" orientat &pre a&pectul 9la$out; pa'inii, ci &pre con!inutul ace&teia. Importan!a ace&tei men!iuni rezid n aceea c etic+etele =>?@ nu impun, cum &,ar putea crede, ci /&ftuie&c/ marea arietate de $roC&ere care proce&eaz pa'ina 4e$, cum & afi%eze te-tul. 0eea ce impun ele cu ade rat e&te con!inutul, te-tul n &ine, nu forma de prezentare. 3e&i'ur c nu &e poate or$i de cealalt e-trem, a unui ar$itrariu a$&olut, n care fiecare $roC&er a afi%a te-tul &u$ o form a$&olut impre izi$il. 7n te-t cu o anumit formatare pentru Internet #-plorer, & &punem, a fi izualizat practic identic de to!i utilizatorii ace&tui tip de $roC&er) #-i&t numeroa&e etic+ete care permit formatarea caracterelor %i ne ofer po&i$ilitatea de a da te-tului din pa'ina 4e$ a&pectul dorit. 1. 0ormatarea caractere!or #tic+eta care &e folo&e%te pentru a da unui caracter &au unui %ir de caractere 9unui te-t; a&pectul dorit e&te etic+eta container 5*BAT9 5J*BAT9. Entre etic+eta de nceput %i cea de &f(r%it &e in&ereaz te-tul &au caracterul ale crui caracteri&tici dorim & le &ta$ilim. Enainte de a di&cuta de&pre atri$utele etic+etei LD.F>M & luam un e-emplu) LD.F> &izeS/2/ colorS/red/ faceS/arial/MIon @uca 0ara'iale LGD.F>M #fectul liniei de mai &u& e&te afi%area te-tului /Ion @uca 0ara'iale/ cu fonturi *rial, de culoare ro%ie %i de mrime e'al cu 2 puncte. 2 analizm &ucce&i cele trei atri$ute ale etic+etei LD.F>M)

si&e , dimen&iunea te-tului , poate fi un numr ntre 1 %i 7 9dimen&iuni a$&olute;, ntre ,1 %i ,3 &au ntre Y1 %i Y4 9dimen&iuni relati e, adic raportate la dimen&iunea de"a e-i&tent a fontului;. 3imen&iunea pre&ta$ilit 9default; a fonturilor e&te 3. 3ac dimen&iunile men!ionate dep%e&c inter alul 1,7, $roC&erul rotun"e%te automat alorile pentru a le ncadra n ace&t inter al. color , culoarea te-tului , e&te culoarea cu care a fi afi%at te-tul prezent ntre etic+ete 9n e-emplul no&tru, /Ion @uca 0ara'iale/ ;. ,ace , tipul de font , determin tipul de font care a fi utilizat la afi%area te-tului. >ipurile cele mai uzuale &unt) *rial >a+oma =el etica >ime& FeC 5oman 0ourier Uerdana *tri$utul etic+etei permite precizarea fie a unui &in'ur tip de font fie a mai multora, &eparate prin ir'ul. 6recizarea mai multor fonturi a"ut n e entualitatea c(nd primul tip indicat nu e&te in&talat pe calculatorul celui care iziteaz pa'ina, %i &e face ca n e-emplul de mai "o&. LD.F> faceS/arial, erdana, time& neC roman/M En acea&t &itua!ie $roC&erul a ale'e &in'ur din li&t primul tip de font pe care l recunoa%te, i'nor(ndu,le pe urmtoarele. .ten!ieH @a &ta$ilirea tipului de caracter utilizat n pa'in !ine!i &eama de faptul c nu to!i utilizatorii au in&talate pe computerele lor acela%i &et de caractere ca %i dumnea oa&tr. 3in ace&t moti , folo&irea unor caractere e-otice, de efect, poate conduce la un e%ec n cazul c(nd utilizatorul nu are in&talat acel font. 3in ace&t moti e&te de preferat folo&irea unor fonturi cu utilizare lar', cum &unt cele men!ionate mai &u&. En #-emplul 4.1 om aplica pe r(nd fiecare dintre cele trei atri$ute men!ionate a&upra unui te-t, a&pectul pa'inii de&cri&e de ace&t document fiind cel din Di'ura 4.1. a3 ( emplul 0. 1 L=>?@M L=#*3M L>I>@#Mfonturi1LG>I>@#M LG=#*3M L1.3K $'colorS/IelloC/M LD.F> &izeS/5/ faceS/ta+oma/ colorS/'reen/M?anual de =>?@ &i de&i'n 4e$LGD.F>ML15M LD.F> &izeS/Y3/ faceS/arial/ colorS/red/M?anual de =>?@ &i de&i'n 4e$LGD.F>ML15M LD.F> &izeS/,1/ faceS/courier neC/ colorS/$lue/M?anual de =>?@ &i de&i'n 4e$LGD.F>M LG1.3KM LG=>?@M

6entru a &ta$ili a&pectul te-tului unei ntre'i pa'ini 4e$, putem folo&i etic+eta 54.S(*BAT9. 2pre deo&e$ire de LD.F>M acea&ta nu e&te o etic+et container, deoarece efectul ei &e refer la tot te-tul din pa'in. Fu &e folo&e%te pentru a &ta$ili caracteri&ticile unui $loc de te-t. #&te indicat & fie inclu& n documentul =>?@ imediat dup etic+eta L1.3KM. *tri$utele etic+etei L1*2#D.F>M &unt acelea%i cu cele ale etic+etei LD.F>M, re&pecti ) si&e, color, ,ace. En #-emplul 4.2 om con&trui o pa'in creia i &etm te-tul cu atri$utele) face , tip de font *rial, &ize , dimen&iunea fontului 2, color , culoare al$a&tr. . parte din te-t a a ea alt tip de font, alt mrime %i culoare, ace&tea fiind &ta$ilite prin folo&irea etic+etei LD.F>M. b3 ( emplul 0. ' L=>?@M L=#*3M L>I>@#Mfonturi2LG>I>@#M LG=#*3M L1.3K $'colorS/C+ite/M L1*2#D.F> faceS/arial/ colorS/$lue/ &izeS/2/M *m a"un& la lectia de&pre fonturi a LD.F> faceS/arial $lacJ/ colorS/red/ &izeS/4/M?anualului de =>?@LGD.F>M LG1.3KM LG=>?@M 3up cum pute!i o$&er a din Di'ura 4.2, caracteri&ticile te-tului din pa'in au fo&t &etate cu a"utorul etic+etei L1*2#D.F>M. 6entru a afi%a &imultan o parte din te-t ntr,un mod diferit am folo&it etic+eta LD.F>M. 3e%i etic+eta L1*2#D.F>M face parte din &tandardul =>?@ 3.2, atri$utele &ale nu &unt recuno&cute de $roC&erele Fet&cape. 0a urmare, ace&ta a afi%a te-tul utiliz(nd propriile &etri pre&ta$ilite 9default;, i'nor(nd atri$utele men!ionate n etic+eta L1*2#D.F>M. 7rmtorul e-emplu 9#-emplul 4.3; afi%eaz un cu (nt a (nd literele de mrimi diferite. *&pectul ace&tei pa'ini e&te cel din Di'ura 4.3. c3 ( emplul 0. +

L=>?@M L=#*3M L>I>@#Mfonturi3LG>I>@#M LG=#*3M L1.3K $'colorS/C+ite/M L1*2#D.F> faceS/arial $lacJ/ colorS/red/M LD.F> &izeS/4/MALGD.F>M LD.F> &izeS/5/M5LGD.F>M LD.F> &izeS/6/M*LGD.F>M LD.F> &izeS/7/M>LGD.F>M LD.F> &izeS/6/M7LGD.F>M LD.F> &izeS/5/MILGD.F>M LD.F> &izeS/4/M>LGD.F>M LG1.3KM LG=>?@M

2 trecem n re i&t, n continuare, alte etic+ete care &c+im$ a&pectul unui caracter &au al unui $loc de te-t. 2. 1ccentuarea textu!ui 1. #tic+eta 547?9 5J47?9 face fonturile mai mari dec(t dimen&iunea curent.

L1IAM>e-t cu caractere mariLG1IAM >e-t cu caractere mari 2. #tic+eta 5SM.LL9 5JSM.LL9 face fonturile mai mici dec(t dimen&iunea curent.

L2?*@@M>e-t cu caractere miciLG2?*@@M >e-t cu caractere mici 3. #tic+etele 549 5J49 9bold; %i 5ST%BA?9 5JST%BA?9 realizeaz &crierea cu caractere aldine, &au n'ro%ate 9bold;. L1M>e-t in'ro&at 1LG1M Te t in-rosat 1 L2>5.FAM>e-t in'ro&at 2LG2>5.FAM Te t in-rosat ' 4. #tic+etele 579 5J79 9italic; %i 5(M9 5J(M9 9emphasi8ed;realizeaz &crierea cu caractere italice. LIM>e-t inclinat 1LGIM %ext inclinat B L#?M >e-t inclinat 2LG#?M %ext inclinat > 5. #tic+etele 5S9 5JS9 %i 5ST%7K(9 5JST%7K(9 realizeaz &crierea te-tului tiat de o linie orizontal. L2M>e-t taiat 1LG2M >e-t taiat 1 L2>5IX#M>e-t taiat 2LG2>5IX#M >e-t taiat 2 6. #tic+eta 5#9 5J#9 9underlined; realizeaz &u$linierea te-tului.

L7M>e-t &u$liniatLG7M >e-t &u$liniat .ten!ieH 7tilizarea te-tului &u$liniat tre$uie fcut cu 'ri", ntruc(t ace&ta poate fi confundat cu un linJ.

7. #tic+eta 5S#P9 5JS#P9 9superscript;. 6rin intermediul ei &e pot in&era n document caractereGte-te pla&ate dea&upra ni elului liniei de &criere. *pa in'+eata la 0 L276M0LG276M0 *pa in'+eata la 0 00 8. #tic+eta 5S#49 5JS#49 9subscript;. 6rin intermediul ei &e in&ereaz te-te pla&ate &u$ ni elul liniei de &criere. 0oordonatele WL271M1LG271M, KL271M2LG271M 0oordonatele W1, K2 #&te de remarcat faptul c etic+etele L1IAM %i L2?*@@M &unt e-ecutate diferit n di er&e $roC&ere) *&tfel, n Fet&cape L1IAM face te-tul mai mare cu un punct iar L2?*@@M mai mic cu un punct dec(t dimen&iunea curenta. En Internet #-plorer, L1IAM afi%eaz te-tul cu fonturi de dimen&iune 4 iar L2?*@@M cu fonturi de dimen&iune 2. #tic+etele L1IAM %i L2?*@@M pot fi repetate pentru a o$!ine un efect mai accentuat. #-emplele urmtoare ilu&treaz modul cum pot fi utilizate ace&te etic+ete. d3 ( emplul 0. 0 L=>?@M L=#*3M L>I>@#Mfonturi4LG>I>@#M LG=#*3M L1.3KM L1*2#D.F> faceS/arial/ colorS/$lue/M L1IAM#tic+eteLG1IAM care L#?M&c+im$aLG#?M a&pectul L2?*@@Mte-tuluiLG2?*@@M LG1.3KM LG=>?@M *&pectul pa'inii e&te cel din Di'ura 4.4 e3 ( emplul 0. 1 L=>?@M L=#*3M L>I>@#Mfonturi5LG>I>@#M LG=#*3M L1.3KM LD.F> faceS/arial/ &izeS/5/M*ce&ta e&te font *rial LGD.F>ML15M LD.F> faceS/al'erian/ &izeS/4/ colorS/'reen/M*ce&ta e&te font *l'erian LGD.F>ML15M LD.F> faceS/courier/ colorS/$lue/ML2>5.FAM*ce&ta e&te font 0ourier LG2>5.FAMLGD.F>ML15M LD.F> D*0#S/ i aldi/ &izeS/5/ colorS/'raI/ML7M*ce&ta e&te font Ui aldi LG7MLGD.F>ML15M LD.F> D*0#S/'aramond/ML#?M*ce&ta e&te font Aaramond LG#?MLGD.F>ML15M LD.F> D*0#S/modern/ &izeS/7/ colorS/$roCn/ML2>5IX#M*ce&ta e&te font ?odern LG2>5IX#MLGD.F>ML15M LG1.3KM LG=>?@M

6a'ina arat ca n Di'ura 4.5 3up cum a!i o$&er at mai &u&, e-i&t dou etic+ete al cror efect e&te acela%i) accentuarea te-tului fie prin &crierea cu caractere italice fie cu caractere aldine. 3. #tic/ete !o&ice i etic/ete 'i.ice #tic+etele L1M %i LIM &e nume&c etic+ete ,i&ice, iar L#?M %i L2>5.FAM etic+ete lo-ice. #tic+etele de titluri de la L=1M la L=6M &unt, de a&emenea, etic+ete lo'ice. 3iferen!a dintre cele dou tipuri de etic+ete e&te le'at de felul cum &unt ele e-ecutate de di er&ele tipuri de $roC&ere) *&tfel, etic+etele fizice impun $roC&erului afi%area n formatul e-act, precizat prin intermediul lor. 3ac $roC&erul nu &uport ace&t format, etic+etele &unt i'norate. 2pre deo&e$ire de etic+etele fizice, cele lo'ice la& $roC&erului li$ertatea de a ale'e cel mai $un mod de a ndeplini comanda tran&mi& prin etic+eta. 3e e-emplu, efectul etic+etei L#?M e&te, n cele mai multe $roC&ere, &crierea te-tului cu caractere italice. >otu%i, dac un anumit tip de $roC&er nu &uport ace&t format de caractere, a accentua totu%i te-tul ntr,un alt mod, cel mai $un de care di&pune. *lte etic+ete lo'ice utilizate n documentele =>?@ &unt) 5C7T(9 5JC7T(9 9citation; #tic+et folo&it pentru in&erarea unui citat. 3e o$icei, citatul e&te afi%at cu caractere italice. 5CB6(9 5JCB6(9 9code; #tic+ete folo&ite pentru in&erarea n te-t a unor &ec en!e de cod &cri&e ntr,un lim$a" de pro'ramare. En 'eneral &ec en!ele de cod &unt afi%ate cu fonturi 0ourier. 56*A9 5J6*A9 9definition; #tic+eta e&te folo&it pentru a in&era n te-t defini!ia unor termeni. #&te util la crearea inde-ului &au 'lo&arului unui document. 5K469 5JK469 9ke$board; *cea&t etic+et lo'ic &e folo&e%te pentru a indica un te-t care urmeaz a fi introdu& de la ta&tatur, ca n urmtorul e-emplu) 6entru a para&i pro'ramul ta&tati LX13MTuitLGX13M 5S.MP9 5JS.MP9 9sample; #&te o etic+et lo'ic folo&it pentru a in&era o mo&tr de te-t. 5TT9 5JTT9 9telet$pe; *cea&t etic+et &e folo&e%te pentru a afi%a te-tul inclu& ntre etic+ete cu fonturi monospaiate. >ipul de font mono&pa!iat 9cum e&te de e-emplu 0ourier; are proprietatea c fiecrui caracter i &e rezer acela%i numr de pi-eli pe ecran. *&tfel, caracterul /i/ a a ea alocat tot at(ta &pa!iu pe ecran ca %i caracterul /4/) /0ourier/ e&te un font mono&pa!iat. ?ai tre$uie precizat %i faptul c utilizarea unora dintre etic+etele de formatare a fonturilor a%a cum au fo&t prezentate ele n ace&t capitol tinde & fie nlocuit cu foile de &tiluri 9 Cascade +t$le +heets; de&pre care om or$i ntr,un capitol iitor. 4. -e.umat

6entru a &ta$ili a&pectul unei anumite &ec en!e de te-t acea&ta e&te inclu& ntre etic+etele 6D.F>M LGD.F>M conform &inta-ei) LD.F> &izeS/numar/ colorS/R5A1 &au numeVculoare/ faceS/tipVfont/M te-t LGD.F>M 6entru a &eta a&pectul te-tului n toat pa'ina 4e$ &e folo&e%te etic+eta L1*2#D.F>M conform &inta-ei) L1*2#D.F> &izeS/numar/ colorS/R5A1 &au numeVculoare/ faceS/tipVfont/M *ccentuarea te-tului &e poate face folo&ind di er&e etic+ete pentru &crierea cu caractere aldine, cu caractere italice, cu caractere mai mari &au mai mici dec(t dimen&iunea curent a fonturilor. #tic+etele &unt de dou tipuri) fizice %i lo'ice, etic+etele fizice fiind orientate ctre a&pectul te-tului iar cele lo'ice ctre &emnifica!ia te-tului n cadrul documentului. ). Test 2. a; $; c; &entru a stabili tipul de font pentru 6ntreaga pagin "eb se folose7te eticheta4 L3#D*7@>M L1*2#D.F>M L>*5A#>M

&entru a stabili tipul de font cu care se face afi7area unui text se folose7te atributul4 a; $; c; c+aracter tIpe face

Cnul dintre exemplele urmtoare este incorect) Care9 a; $; c; LD.F> faceS/arial/M LD.F> faceS/arial, erdana/M LD.F>faceS/ erdana/M

Ce reali8ea8 urmtoarea etichet9 LD.F> &izeS/Y1/M a; $; c; curent. *fi%eaz te-tul cu fonturi de mrime 1. *fi%eaz pe pa'in te-tul /Y1/. *fi%eaz te-tul cu fonturi de dimen&iune mai mare cu un punct dec(t dimen&iunea

:n afara etichetei L1M ce alt etichet se mai folose7te pentru a scrie un text cu caractere aldine9 a; $; L3*5XM L2>5.FAM

c;

L1IAM

5tichetele LIM 7i L#?M reali8ea84 a; $; c; &crierea te-tului cu caractere italice in&erarea unei ima'ini &crierea te-tului cu caractere mai mici dec(t cele curente

Ce este incorect 6n urmtorul exemplu9 LD.F> faceS/arial, erdana, time& neC roman/, &izeS/4/ML1Mte-tLGD.F>MLG1M a; $; c; Fu &e pot preciza mai multe tipuri de fonturi ca alori pentru atri$utul face. >ipurile &pecificate nu &e pot &crie cu caractere aldine #tic+etele LD.F>M %i L1M nu &e nc+id corect.

&rin ce se aseamn etichetele L2>5.FAM 7i L#?M9 a; $; c; 2unt am(ndou etic+ete lo'ice. 2unt am(ndou etic+ete fizice. 2er e&c am(ndou la &crierea te-tului cu caractere italice.

Care este gre7eala 6n urmtoarea construcie9 L1*2#D.F> faceS/arial/ &izeS/5/Mte-tLG1*2#D.F>M a; $; c; L1*2#D.F>M nu e&te o etic+eta container L1*2#D.F>M nu &uport atri$utul face L1*2#D.F>M nu &uport atri$utul &ize

Ce efect are urmtoarea etichet9 LD.F>S/arial, erdana, time& neC roman/M a; $; c; >e-tul &e afi%eaz cu toate cele trei tipuri de fonturi. >e-tul &e afi%eaz cu primul tip de font, dintre cele trei, pe care l recunoa%te $roC&erul. #tic+eta nu era nici un efect ntruc(t e&te incorect.

*onturi
1. $; '. c; +. c; 0. c; 1. $; :. a; <. c; =. a; >. a; 1@. $;

Capitolul 1 *ormatarea te tului #tic+etele de&pre care om or$i n continuare nu &e mai refer la particularit!ile fonturilor ci la felul n care poate fi ampla&at un te-t n cadrul pa'inii. Enainte de a di&cuta n amnunt de&pre etic+etele care permit formatarea te-tului, & facem c(te a precizri pri ind felul cum &unt afi%ate te-tele. 3up cum %ti!i, fi%ierele =>?@ &unt fi%iere te-t. *cea&ta n&eamn c atunci c(nd &al a!i fi%ierul re&pecti , el e&te &al at numai ca te-t, deci $roC&erul nu poate recunoa%te %i e-ecuta dec(t &trict acele comenzi pre zute de etic+etele =>?@. 3in ace&t moti , trecerea la un r(nd nou, care n editorul de te-t &e realizeaz prin ap&area ta&tei #F>#5, nu e&te recuno&cut de $roC&er) 7n alt a&pect e&te pla&area n te-t a &pa!iilor. 0+iar dac e!i introduce &pa!ii &uplimentare ntre cu inte atunci c(nd &crie!i documentul =>?@ n editorul de te-t, $roC&erul a afi%a in aria$il un &in'ur &pa!iu ntre dou cu inte. *ce&ta e&te moti ul pentru care fiecare dintre ace&te elemente de formatare a te-tului are o etic+et proprie care indic $roC&erului cum anume & fac afi%area. 1. Trecerea !a un r7nd nou >recerea la un r(nd nou &e realizeaz cu a"utorul etic+etei 54%9 9de la line break;. #tic+eta L15M nu e&te o etic+et container. #a are rolul de a comunica $roC&erului c te-ul care urmeaz dup etic+et a fi afi%at pe un r(nd nou a%a cum rezult din #-emplul 5.1. ( emplul 1. 1 L=>?@M L=#*3M L>I>@#Mte-t1LG>I>@#M LG=#*3M L1.3KM 1una ziuaL15M?a nume&c @uciaL15MIn at &a con&truie&c o pa'ina 4e$L15M LG1.3KM LG=>?@M *&pectul pa'inii de&cri&e n e-emplul de mai &u& e&te cel din Di'ura 5.1. #tic+eta L15M admite atri$utul clear care poate lua alorile left, ri'+t &au all. En mod normal, la nt(lnirea etic+etei L15M linia curent de te-t e&te ntrerupt %i &e face trecerea la o linie nou, ca %i la ac!ionarea ta&tei 5nter ntr,un editor de te-t. #-i&t n& &itua!ii c(nd dorim ca linia & fie afi%at l(n' un anumit element 9o ima'ine, &au un ta$el, de e-emplu; care $loc+eaz partea din &t(n'a &au din dreapta a liniei. En ace&te cazuri putem folo&i atri$utul clear al etic+etei L15M ca n #-emplul 5.2. 6ute!i o$&er a efectul atri$utului clear al etic+etei L15M n Di'ura 5.2. ( emplul 1. ' L=>?@M L=#*3M L>I>@#Mte-t2LG>I>@#M

LG=#*3M L1.3KM LI?A &rcS/..GIma'iniGtoad."p'/ ali'nS/left/M *ce&t te-t a fi afi&at intre ima'ine &i mar'inea dreapta a documentului. L15 clearS/left/M*ce&t te-t a fi afi&at &u$ ima'ine, aliniat &tan'a. Intre ace&t te-t &i dreapta ima'inii a e-i&ta un &patiu 'ol. LG1.3KM LG=>?@M 2. Tit!uri!e 8Headin&s9 7tilizarea titlurilor e&te "u&tificat de ne oia de a &u$linia prin format &tructura lo'ic a unui document, dar, nu n ultimul r(nd, %i de monotonia la care e-pune un te-t lun', lip&it de aria!ie n a&pect. Dire%te c un a&emenea te-t &f(r%e%te prin a o$o&i cititorul 4e$, o$i%nuit cu te-te &curte %i concentrate. 3in ace&t moti &e recomand /&par'erea/ te-telor mai lun'i %i or'anizarea lor n &ec en!e mai &curte, marcate de titluri %i &u$titluri, or'anizate ierar+ic, pe ni ele. >itlurile dintr,un document =>?@ &unt marcate cu a"utorul etic+etelor 5H19, 5H'9, 5H+9, 5H09, 5H19, 5H:9. #le &unt etic+ete container, deci nece&it etic+eta core&punztoare de nc+idere. #tic+eta L=1M define%te titlul de dimen&iunea ma-im, iar L=6M pe cel de dimen&iune minim. .ten!ieH 3e%i &tandardul =>?@ nu interzice utilizarea n orice ordine a titlurilor, e&te de preferat ca ace&tea & fie folo&ite n ordinea /normal/, pro're&i , fr a &ri pe&te reun ni el 9de pild de la =1 direct la =5;, pentru a e ita e entualele pro$leme la con ertirea te-tului n alte tipuri de fi%iere. En #-emplul 5.3 om folo&i toate cele %a&e etic+ete pentru titluri pentru a face o compara!ie cu dimen&iunea &tandard a te-tului. 6ute!i o$&er a efectul ace&tor etic+ete n Di'ura 5.3. ( emplul 1. + L=>?@M L=#*3M L>I>@#Mte-t3LG>I>@#M LG=#*3M L1.3KM L=1M>itlu =1LG=1M>e-t normal L=2M>itlu =2LG=2M>e-t normal L=3M>itlu =3LG=3M>e-t normal L=4M>itlu =4LG=4M>e-t normal L=5M>itlu =5LG=5M>e-t normal L=6M>itlu =6LG=6M>e-t normal LG1.3KM LG=>?@M #&te de men!ionat o proprietate intere&ant a etic+etelor de titluri, %i anume aceea c un te-t &cri& pe aceea%i linie cu un titlu e&te afi%at n pa'in pe r(ndul urmtor titlului, l&(ndu,&e o linie li$er ntre titlu %i te-t, de%i nu e&te prezent nici una dintre etic+etele L15M &au L6M.

#tic+etele de titlu accept atri$utul ali-n cu alorile left, center %i ri'+t pentru alinierea titlului $locului de te-t la &t(n'a 9n mod pre&ta$ilit;, n centru %i re&pecti la dreapta. Di'ura 5.4 red a&pectul pa'inii de&crie de documentul din #-emplul 5.4 care ilu&treaz modul de aliniere al titlurilor. ( emplul 1. 0 L=>?@M L=#*3M L>I>@#Mte-t4LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M>itluriLG=1ML=5M L=1 ali'nS/center/M >itlu de marime 1 aliniat in centru LG=1M L=2 ali'nS/ri'+t/M >itlu de marime 2 aliniat la dreapta LG=2M L=4M >itlu de marime 4 aliniat la &tan'a LG=4M LG1.3KM LG=>?@M 3. :ara&ra'e!e >recerea la un nou para'raf n cadrul te-tului &e realizeaz cu a"utorul etic+etei 5P9 5JP9. *cea&t etic+et comunic $roC&erului & in&ereze o linie li$er n te-t %i & nceap o nou linie. #tic+eta L6M e&te o etic+et container dar prezen!a etic+etei de nc+idere LG6M e&te op!ional n anumite &itua!ii. 3ac ea e&te prezent, indic $roC&erului & in&ereze o linie li$er %i dup $locul de te-t cuprin& ntre cele dou etic+ete. #tic+eta L6M admite atri$utul ali-n cu cele trei alori ale ace&tuia) left, center %i ri'+t, care permit alinierea te-tului la &t(n'a, centrat re&pecti la dreapta. #-emplul 5.5 ilu&treaz cele trei modalit!i de aliniere a te-tului. ( emplul 1. 1 L=>?@M L=#*3M L>I>@#Mte-t5LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M6ara'rafeLG=1ML=5M L6M *ce&ta e&te un para'raf aliniat la &tan'a. L6 ali'nS/ri'+t/M *ce&ta e&te un para'raf aliniat la dreapta. L6 ali'nS/center/M *ce&ta e&te un para'raf aliniat la centru. LG1.3KM LG=>?@M 3in Di'ura 5.5 care red a&pectul pa'inii de&cri&e n e-emplu &e poate o$&er a c alinierea la &t(n'a e&te implicit 9nu mai tre$uie &pecificat ali'nS/left/;. 2e mai poate o$&er a c nu a fo&t folo&it etic+eta de nc+idere a para'rafelor, deoarece la nt(lnirea unei noi etic+ete L6M ec+iul para'raf &e

con&ider nc+i&. >otu%i, prezen!a &au a$&en!a etic+etei de nc+idere a para'rafului atunci c(nd e&te prezent atri$utul ali'n tre$uie &ta$ilit cu 'ri", pentru a nu o$!ine rezultate neconforme cu dorin!ele dumnea oa&tr. En #-emplul 5.6 dorim & aliniem un nou para'raf n dreapta pa'inii, iar te-tul de pe r(ndul urmtor para'rafului, care e&te introdu& prin etic+eta L15M, & fie &cri& normal, de la captul din &t(n'a al pa'inii. ( emplul 1. : L=>?@M L=#*3M L>I>@#Mte-t6LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M6ara'rafeLG=1ML=5M *ce&t te-t e&te &cri& normal, incepand e la mar'inea din &tan'a. L6 ali'nS/ri'+t/M*ce&t te-t e&te aliniat la dreapta L15M7nde e&te afi&at ace&t te-t< LG1.3KM L=>?@M 3in Di'ura 5.6 &e poate o$&er a c afi%area nu &,a fcut conform inten!iilor noa&tre. ?oti ul e&te faptul c etic+eta L6 ali'nSZri'+tZM nu are etic+eta de nc+idere LG6M, %i prin urmare efectul &u &e prelun'e%te p(n la nt(lnirea unei alte etic+ete L6M. 3ac e!i nc+ide para'raful n mod e-plicit cu a"utorul etic+etei de nc+idere, nainte de trecerea la o linie nou, efectul a&upra te-tului a fi cel dorit a%a cum rezult din Di'ura 5.7. 3e%i aparent etic+etele L15M %i L6M au un efect a&emntor, %i anume trecerea la o linie nou, ele nu &unt e-ecutate la fel. L15M comunic $roC&erului unde &e nc+eie o linie, n reme ce L6M i impune & la&e o linie li$er %i & treac la un nou para'raf. 3ac folo&im atri$utul ali'n al etic+etei L6M n &itua!iile c(nd dup para'raf e&te introdu& un alt element n pa'in e&te recomandat nc+iderea n mod e-plicit a etic+etei re&pecti e. 4. :re'ormatarea textu!ui *%a cum am precizat la nceputul capitolului, atunci c(nd edita!i documentul =>?@ cu a"utorul unui editor de te-t, indiferent c(te &pa!ii e!i l&a ntre cu inte &au ntre liniile de te-t, $roC&erul a afi%a te-tul in aria$il cu un &in'ur &pa!iu ntre cu inte %i a a"u&ta lun'imea liniilor n func!ie de mrimea fere&trei. 0u alte cu inte, orice &pa!ii &au linii li$ere &uplimentare or fi i'norate de ctre $roC&er) *%a cum am zut mai &u&, trecerea la o linie nou &e realizeaz cu a"utorul etic+etei L15M iar in&erarea unei linii li$ere &e face cu a"utorul etic+etei L6M. #-i&t, n&, %i o etic+et care impune $roC&erului & afi%eze te-tul ntocmai cum a fo&t el formatat n documentul =>?@. #&te or$a de&pre etic+eta 5P%(9 5JP%(9. #tic+eta L65#M permite preformatarea te-tului %i men!ine &pa!ierea %i alinierea te-tului a%a cum a fo&t fcut n documentul &ur& =>?@. #tic+eta de nc+idere LG65#M e&te o$li'atorie. #-emplul 5.7 ilu&treaz modul cum poate fi folo&it etic+eta L65#M. *&pectul pa'inii de&cri&e n ace&t document e&te cel din Di'ura 5.8.

>e&ta!i e-emplul folo&ind etic+eta L65#M iar apoi elimina!i,o, pentru a o$&er a mai $ine efectul &u. ( emplul 1. < L=>?@M L=#*3M L>I>@#Mte-t7LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M>e-tul preformatatLG=1ML=5M *ce&ta e&te un te-t normal L6M .rar) @uni 8)00 5omana 9.00 ?atematica 10)00 Aeo'rafie 11.00 I&torie 12.00 DizicaL6M *ce&ta e&te te-tul de mai &u& preformatat L65#M .rar) @uni 8)00 5omana 9.00 ?atematica 10)00 Aeo'rafie 11.00 I&torie 12.00 Dizica LG65#M LG1.3KM LG=>?@M ). Centrarea textu!ui *%a cum am zut mai &u&, afi%area te-tului centrat n pa'in &e poate face cu a"utorul etic+etei L6M a (nd atri$utul ali'n &etat la aloarea /center/. . alt po&i$ilitate de a realiza ace&t lucru e&te de a utiliza o etic+et dedicat, incluz(nd te-tul ntre etic+etele 5C(AT(%9 5JC(AT(%9. #tic+eta L0#F>#5M e&te o etic+et container, prezen!a etic+etei de nc+idere fiind o$li'atorie. #-emplul 5.8 realizeaz centrarea unui te-t. ( emplul 1. = L=>?@M L=#*3M L>I>@#Mte-t8LG>I>@#M LG=#*3M L1.3KM

L=1 ali'nS/center/M0entrarea te-tului LG=1ML=5M L0#F>#5M *ce&ta e&te un te-t centrat. *ce&ta e&te un te-t centrat. *ce&ta e&te un te-t centrat. *ce&ta e&te un te-t centrat. *ce&ta e&te un te-t centrat. *ce&ta e&te un te-t centrat. *ce&ta e&te un te-t centrat. *ce&ta e&te un te-t centrat. LG0#F>#5M LG1.3KM LG=>?@M *&pectul pa'inii de&cri&e n e-emplul de mai &u& e&te cel din Di'ura 5.9. +. 1'iarea textu!ui pe o sin&ur* !inie En cazul c(nd &e dore%te afi%area unui te-t pe o &in'ur linie, c+iar dac ace&t lucru n&eamn dep%irea mar'inii fere&trei %i derularea ace&tuia pe orizontal, &e include $locul de te-t ntre etic+etele 5AB4%9 5JAB4%9. *cea&t etic+et mpiedic $roC&erul & limiteze lun'imea liniei la dimen&iunea fere&trei. #-emplul 5.9 ilu&treaz folo&irea etic+etei LF.15M, pa'ina a (nd a&pectul din Di'ura 5.10. ( emplul 1. > L=>?@M L=#*3M L>I>@#Mte-t9LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M>e-tul pe o &in'ura linie LG=1ML=5M LF.15M *ce&ta e&te un te-t care a fi afi&at pe o &in'ura linie, c+iar daca depa&e&te dimen&iunile unei fere&tre o$i&nuite. 6uteti erifica ace&t fapt prin reducerea dimen&iunilor fere&trei $roC&erului. LGF.15M LG1.3KM LG=>?@M ,. $!ocu! 56789 . alt modalitate de delimitare %i de formatare a unui $loc de te-t e&te folo&irea etic+etei container 56789 5J6789. 6rezen!a etic+etei de nc+idere e&te o$li'atorie. #tic+eta L3IUM realizeaz di izarea unui document =>?@ n &ec!iuni di&tincte, di iziune n care pot fi inclu&e, pe l(n' te-t, %i alte elemente) le'turi, ima'ini, formulare. 0a %i n cazul etic+etei pentru introducerea para'rafelor, etic+eta L3IUM admite atri$utul ali-n, pentru alinierea te-tului. Ualorile po&i$ile ale ace&tui atri$ut, de"a cuno&cute, &unt) left , aliniere la &t(n'a center , aliniere la centru ri'+t , aliniere la dreapta *linierea precizat de atri$utul ali'n al $locului are efect a&upra tuturor elementelor inclu&e n $locul L3IUM. 1locul L3IUM admite %i atri$utul noFrap, care interzice ntreruperea r(ndurilor de ctre $roC&er)

En documentul de&cri& n #-emplul 5.10 e&te ilu&trat utilizarea ace&tei etic+ete. 6a'ina a a ea a&pectul redat n Di'ura 5.11. ( emplul 1. 1@ L=>?@M L=#*3M L>I>@#Mte-t10LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M1locul di LG=1ML=5M *cea&ta linie e&te o linie de te-t normala. L3IU ali'nS/ri'+t/M *cea&ta e&te prima &ectiune a te-tului, aliniata dreapta.L15M LG3IUM L3IU ali'nS/center/M *cea&ta e&te a doua &ectiune a te-tului, aliniata central.L15M LG3IUM L3IU ali'nS/left/M *cea&ta e&te a treia &ectiune a te-tului, aliniata &tan'a.L15M LG3IUM LG1.3KM LG=>?@M 3. Linii ori.onta!e Entr,o pa'ina 4e$ pot fi in&erate linii orizontale care au rolul de a delimita diferitele zone ale pa'inii &au de a m$unt!i a&pectul ei e&tetic. *ce&t lucru &e face cu a"utorul etic+etei 5H%9. #tic+eta L=5M nu e&te o etic+et container deci nu e-i&t o etic+et de nc+idere. 6entru a confi'ura o linie orizontal &e utilizeaz urmtoarele atri$ute ale etic+etei L=5M) ali-n , permite alinierea liniei orizontale. Ualorile po&i$ile &unt left, center %i ri'+t Fidt) , &pecific lun'imea liniei , lun'imea poate fi &ta$ilit n pi-eli &au n procente din l!imea ecranului. si&e , &pecific 'ro&imea liniei, e-primat n pi-eli color , permite definirea culorii liniei *tri$utele etic+etei L=5M &unt ilu&trate n #-emplul 5.11. ( emplul 1. 11 L=>?@M L=#*3M L>I>@#Mte-t11LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M @inii orizontale LG=1M @inie aliniata la &tan'a, lun'ime 100:, 'ro&ime 2 L=5M @inie aliniata in centru , lun'ime 50:, 'ro&ime 5 pi-eli. L=5 ali'nS/center/ Cidt+S/50:/ &izeS/5/ colorS/$lacJ/M @inie aliniata la dreapta , lun'ime 150 de pi-eli, 'ro&ime 12 pi-eli , de culoare ro&ie. L=5 ali'nS/ri'+t/ Cidt+S150 &izeS12 colorS/red/M LG1.3KM

LG=>?@M 3in Di'ura 5.12 care red a&pectul pa'inii de&cri&e n e-emplul anterior &e poate o$&er a c &impla prezen! a etic+etei L=5M fr nici un fel de atri$ute duce la afi%area unei linii predefinite, de lun'ime e'al cu 100: din pa'in %i 'ro&imea e'al cu 2 pi-eli. *tri$utul color al etic+etei L=5M nu e&te &uportat de $roC&erul Fet&cape. En e-emplul urmtor 9#-emplul 5.12; om ilu&tra modul n care etic+eta L3IUM aliniaz elementele con!inute n interiorul &u, n cazul no&tru te-t %i linii orizontale. 6a'ina de&cri& n ace&t e-emplu a a ea a&pectul din Di'ura 5.13. ( emplul 1. 1' L=>?@M L=#*3M L>I>@#Mte-t12LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M@inii orizontaleLG=1ML=5M @inia de mai "o& e&te aliniata la &tan'a L=5 &izeS/3/ colorS/$lue/ Cidt+S/40:/ ali'nS/left/M @iniile de mai "o& &unt aliniate la centru cu a"utorul $locului 3IU L3IU ali'nS/center/M @inii aliniate la centru L=5 &izeS/10/ colorS/cIan/ Cidt+S/50:/M L=5 &izeS/5/ colorS/na I/ Cidt+S/400/M LG3IUM LG1.3KM L=>?@M 4. (nserarea unei adrese pota!e 3ac ntr,o pa'in 4e$ tre$uie inclu& o adre& po%tal, atunci putem folo&i etic+eta urmtoare) 5.66%(SS9 5J.66%(SS9. #tic+eta L*335#22M e&te o etic+et lo'ic %i are drept efect, n cele mai multe $roC&ere , afi%area te-tului cu caractere italice. En #-emplul 5.13 e&te in&erat n pa'in o adre&, a&pectul pa'inii fiind cel din Di'ura 5.14. ( emplul 1. 1+ L=>?@M L=#*3M L>I>@#Mte-t13LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M *dre&a LG=1ML=5M *dre&a firmei noa&tre e&te L*335#22M Aolden4e$ 0on&ult L15M 2tr. 6aradi&ului, Fr. 1L15M 1ucure&ti

LG*335#22M LG1.3KM LG=>?@M 1;. (nserarea unui citat 6entru a in&era un citat ntr,un te-t &e pot folo&i dou etic+ete, n func!ie de dimen&iunea citatului. *&tfel, dac citatul dep%e%te c(te a linii, &e folo&e%te etic+eta 54LBCKL#BT(9 5J4LBCKL#BT(9. #fectul ace&tei etic+ete e&te afi%area indentat a te-tului cuprin& ntre etic+eta de nceput %i cea de &f(r%it 9n ma"oritatea $roC&erelor; &au afi%area ace&tuia cu caractere italice 9rareori;. 3ac dorim ca ntr,un te-t & citam un termen, titlul unei lucrri &au & dm o referin!, putem include te-tul re&pecti ntre etic+etele 5C7T(9 5JC7T(9. En cele mai multe dintre $roC&ere, te-tul inclu& ntre etic+etele L0I>#M a fi afi%at cu caractere italice. #-emplul 5.14 ilu&treaz modul de folo&ire al celor dou etic+ete. 6a'ina de&cri& n e-emplu are a&pectul din Di'ura 5.15. ( emplul 1. 10 L=>?@M L=#*3M L>I>@#Mte-t14LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/MIn&erarea unui citatLG=1ML=5M >e-tul de mai "o& e&te un citat L1@.0X[7.>#M 6ro$a$ilitatea ca o felie de paine un&a cu unt &a cada pe co or cu fata un&a in "o& e&te direct proportionala cu aloarea co orului LG1@.0X[7.>#M 0itatul de mai &u& face parte din L0I>#M@e'ile lui ?urp+ILG0I>#M LG1.3KM LG=>?@M 11. (nserarea caractere!or specia!e 3e%i e&te impropriu & numim caracterul /$lanJ/ &au space un caracter &pecial, a (nd n edere frec en!a cu care e&te folo&it, totu%i ace&ta, ca %i alte caractere, e&te in&erat n pa'in cu a"utorul unei comenzi &peciale) comanda M 9comanda amper&and;. *%a cum %ti!i de"a, indiferent c(te &pa!ii om introduce atunci c(nd editm documentul =>?@, $roC&erul le a i'nora %i a afi%a cu intele cu un &in'ur &pa!iu ntre ele. 6entru a for!a introducerea &pa!iilor &uplimentare &e folo&e%te comanda \n$&p] 9no break space;. .ten!ie 0omanda ncepe cu &im$olul M 9amper&and; %i &e termin cu N 9punct %i ir'ul;. En #-emplul 5.15 e&te ilu&trat modul cum pot fi &pa!iate cu intele folo&ind comanda \n$&p] ( emplul 1. 11

L=>?@M L=#*3M L>I>@#Mte-t15LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/MIn&erarea caracterelor &pecialeLG=1ML=5M LD.F> &izeS/2/ faceS/arial/M 0u intele\n$&p] \n$&p] \n$&p] din\n$&p] \n$&p] \n$&p] ace&t\n$&p] \n$&p] \n$&p] te-t\n$&p] \n$&p] \n$&p] &unt\n$&p] \n$&p] \n$&p] de&partite\n$&p] \n$&p] \n$&p] de\n$&p] \n$&p] \n$&p] 'rupuri\n$&p] \n$&p] \n$&p] de\n$&p] \n$&p] \n$&p] trei\n$&p] \n$&p] \n$&p] &patii. LGD.F>M LG1.3KM LG=>?@M 3up cum o$&er a!i din Di'ura 5.16 cu intele &unt de&pr!ite prin trei &pa!ii n loc de unul &in'ur. 6ute!i adu'a oric(te &pa!ii dori!i n ace&t mod. 3e a&emenea, pentru a indenta un te-t, pute!i in&era la nceputul fiecrei linii numrul de comenzi \n$&p] e'al cu numrul de &pa!ii cu care re!i & indenta!i te-tul. Iat mai "o& un ta$el cu comenzile nece&are pentru a in&era n te-t cele mai cuno&cute caractere. Tabelul 1. 1 6enumir e caracter 2pa!iu li$er 0opIri'+t >rademar J 5e'i&tere d ?ai mic dec(t ?ai mare dec(t *mper&a nd A+ilimele 0ent 7n &fert . "umtate ^ _ ` L M \ / a b c %epre&en Comanda tarea -ra,ic$ HTML \n$&p] \copI] \R153] \re'] &au \R174] \lt] \'t] \amp] \Tuot] \R162 \R188 \R189

>rei &ferturi Arade 12. Su&estii pri"ind aspectu! textu!ui

d e

\R190 \R176

*&pectul te-tului ntr,o pa'in 4e$ e&te e&en!ial pentru calitatea ace&teia. 7n te-t lizi$il, &cri& cu caractere de dimen&iune potri it, $ine or'anizat %i a%ezat n pa'in a face din pa'ina dumnea oa&tr un mediu acce&i$il %i prieteno& care l a &timula pe izitatorul ace&teia & parcur' cu plcere informa!iile oferite. Iat c(te a &faturi referitoare la a&pectul pa'inilor 4e$, menite & a"ute la crearea unor te-te lizi$ile, c(t mai u%or de parcur& de ctre cititori. Fu folo&i!i fonturi de dimen&iuni prea mici &au fonturi cu &erife, cum e&te >ime& FeC 5oman. 3e%i e&te tipul cel mai utilizat pentru pu$lica!iile tiprite, te-tele &cri&e cu >ime& FeC 5oman &unt mai 'reu de citit de pe monitor. 6refera!i tipurile *rial, Uerdana, =el etica. Fu folo&i!i numai litere mari 9ma"u&cule;. >e-tele &cri&e cu ma"u&cule &unt mai 'reu de citit. Fu face!i e-ce& de caractere aldine 9n'ro%ate, bold;. @imita!i, la a accentua cu inte &au por!iuni redu&e din te-t. 3e a&emenea, nu folo&i!i caractere cur&i e 9nclinate, &au italice; n e-ce&. Fu folo&i!i prea multe tipuri de fonturi %i nici tipuri de fonturi rare. Dolo&irea unui mare numr de fonturi de dimen&iuni %i culori diferite a face ca pa'inile & arate ncrcate %i & fie 'reu de citit. Dolo&irea tipurilor de fonturi rare aduce dup &ine ri&cul ca izitatorul & nu le ai$ in&talate pe computerul propriu, a&tfel c te-tul a fi afi%at de $roC&er cu fonturile pre&ta$ilite. Fu aran"a!i te-tul n pa'in pe dou coloane. *cea&ta e&te o practic o$i%nuit n ziare %i re i&te dar nu e&te potri it ntr,o pa'in 4e$ deoarece for!eaz izitatorul ca odat a"un& la $aza pa'inii & o deruleze din nou pentru a citi ce,a de,a dou coloan. #&te $ine & folo&i!i fiecare etic+et n &copul pentru care a fo&t ea definit. Fu folo&i!i etic+etele de titlu pentru a accentua anumite pr!i ale te-tului care nu &unt titluri. Fu folo&i!i etic+eta L*335#22M pentru a in&era alte te-te dec(t adre&e &au etic+eta L0I>#M pentru a realiza &crierea cu caractere italice a te-tului. ?otoarele de cutare inde-eaz pa'inile 4e$ %i n func!ie de elementele 9etic+etele; care &unt inclu&e n ele iar folo&irea lor neadec at conduce la o inde-are eronat a pa'inii dumnea oa&tr. ?ulte motoare de cutare &caneaz pa'ina n cutarea titlurilor %i pe $aza lor con&truie&c o &c+i! a pa'inii. 3ac e!i folo&i etic+etele de titlu pentru a accentua anumite pr!i ale te-tului 9opera!ie pe care o pute!i realiza n mod corect folo&ind etic+eta LD.F>M; e!i oferi informa!ii eronate motoarelor de cutare. En ace&t fel, &cad %an&ele ca pa'inile dumnea oa&tr & fie identificate %i citite de cei intere&a!i. .ten!ieH Fu uita!i c pa'inile or fi pu$licate pe 4e$, unde, pentru a,%i atin'e &copul, adic pentru a fi citite, tre$uie mai nt(i de&coperite de cititori, cel mai frec ent prin intermediul motoarelor de cutare.

13. -e.umat 1roC&erul afi%eaz te-tele cu c(te un &in'ur &pa!iu ntre cu inte %i nu recunoa%te &f(r%itul de linie %i nceputul unei linii noi. #lementele de formatare a te-tului &e introduc n documentul =>?@ prin intermediul unor etic+ete &pecifice) trecerea la un r(nd nou) etic+eta L15M L15 clearS/left, ri'+t, all/Mte-t introducerea unui titlu) etic+etele L=1M , L=6M L=n ali'nS/left, ri'+t, center/Mte-tLG=nM introducerea unui para'raf) etic+eta L6M LG6M L6 ali'nS/left, ri'+t, center/ noCrapMte-tLG6M preformatarea te-tului) etic+eta L65#M LG65#M L65#Mte-tLG65#M centrarea te-tului) etic+eta L0#F>#5M LG0#F>#5M L0#F>#5Mte-tLG0#F>#5M afi%area te-tului pe o &in'ur line) etic+eta LF.15M LGF.15M LF.15Mte-tLGF.15M crearea unui di iziuni n te-t) etic+eta L3IUM LG3IUM L3IU ali'nS/left, ri'+t, center/Mte-tLG3IUM in&erarea unei linii orizontale) etic+eta L=5M L=5 &izeS/ aloare/ Cidt+S/ aloare/ colorS/R5A1 &au numeVculoare/ ali'nS/left, ri'+t, center/M in&erarea unei adre&e) etic+eta L*335#22M LG*335#22M L*335#22Mte-tLG*335#22M in&erarea unui citat) etic+etele L1@.0X[7.>#M LG1@.0X[7.>#M %i L0I>#M LG0I>#M L1@.0X[7.>#Mte-tLG1@.0X[7.>#M L0I>#Mte-tLG0I>#M in&erarea caracterelor &peciale prin comanda MN 14. Test +. a; $; c; Care este rolul etichetei L15M9 >recerea la un r(nd nou In&erarea unei linii li$ere n te-t In&erarea unei linii orizontale

&entru ca bro serul s afi7e8e textul a7a cum a fost el formatat 6n documentul #%M( se folose7te eticheta4 a; $; c; L6M L65#M L3IUM

Ce se va afi7a 6n urmtorul exemplu9 L6M>e-t1 L6 ali'nS/ri'+t/M>e-t2 a; $; c; >e-t1 %i >e-t2 or fi aliniate la dreapta, cu o linie li$er ntre ele >e-t1 a fi aliniat la &t(n'a, >e-t2 a fi aliniat la dreapta, cu o linie li$er ntre ele >e-t1 %i >e-t2 or fi &cri&e pe aceea%i linie

&entru a scrie un titlu de dimensiune maxim folosim eticheta4 a; $; c; L=1M L=6M L=7M

&entru a afi7a un text pe o singura linie4 a; $; c; folo&im etic+eta L15M folo&im etic+eta LF.15M nu folo&im nici o etic+et

Care dintre urmtoarele etichete nu reali8ea8 centrarea textului9 a; $; c; L6 ali'nS/center/M>e-tLG6M L0#F>#5M>e-tLG0#F>#5M L3IUM>e-tLG3IUM

Ce reali8ea8 eticheta L*335#22M9 a; $; c; in&erarea unui linJ in&erarea unei adre&e de e,mail in&erarea unei adre&e po%tale

&entru a insera 6ntr!o pagin o linie ori8ontal standard folosim eticheta4 a; $; c; L=5M L=5 Cidt+S/100/M L=5 &izeS/1/M

5ticheta L1@.0X[7.>#M folose7te la4 a; $; indentarea te-tului &crierea te-tului cu caractere italice

c;

in&erarea unui citat n te-t

Care dintre aceste afirmaii este fals9 a; >oate &pa!iile %i liniile li$ere introdu&e n te-t la editarea documentului =>?@ &unt afi%ate ntocmai de $roC&er) $; 7n te-t &cri& pe aceea%i linie cu o etic+et de titlu e&te afi%at &u$ titlu, c+iar dac nu e&te prezent etic+eta L15M. c; 6entru a introduce &pa!ii &uplimentare n te-t &e folo&e%te comanda \n$&p]

*ormatarea te tului
1. a; '. $; +. $; 0. a; 1. $; :. c; <. c; =. a; >. c; 1@. a;

Capitolul : Le-$turi 2lin;"uri3 Le-$turile 9link,urile; reprezint, poate, partea cea mai important a unei pa'ini 4e$. #le tran&form un te-t o$i%nuit n +Iperte-t , un nou tip de te-t, diferit de cel din cla&icele pa'ini de carte, care permite trecerea rapid de la o informa!ie aflat pe un anumit computer la alt informa!ie memorat pe un alt computer localizat oriunde n lume. 1. 1dresa -L 6entru a &ta$ili o le'tur cu o alt pa'in 9un alt fi%ier; tre$uie & &pecificm adresa #%L a ace&tuia. 75@ e&te un acronim, de la Cniform Resource (ocator, %i reprezint adre&a de identificare a unei re&ur&e 9a unui fi%ier; aflat pe calculatorul propriu &au pe orice alt calculator din lume conectat la Internet. . adre& 75@ con&t dintr,un %ir de caractere care identific n mod unic o anumit re&ur&, oferind informa!ii de&pre numele &er erului pe care e&te &tocat acea re&ur& precum %i de&pre localizarea ei. #-i&t mai multe etic+ete =>?@ care folo&e&c adre&a 75@ drept aloare pentru anumite atri$ute) etic+etele care introduc le'turi, ima'ini &au formulare. >oate ace&tea folo&e&c aceea%i &inta- a adre&ei 75@ pentru a &pecifica loca!ia unei anumite re&ur&e, indiferent de tipul ace&teia. 2inta-a 'eneral a unei adre&e 75@ e&te) sc)emaOJJserverP-a&daOportJcaleaPcatreP,isier unde)

sc)ema , reprezint unul dintre protocoalele de tran&fer al informa!iilor, cum ar fi =>>6, D>6, Aop+er, >elnet, etc. serverP-a&da , reprezint identificatorul &er erului pe care e&te 'zduit fi%ierul re&pecti . *ce&t identificator poate fi adre&a I6 a &er erului &au numele &u. port , reprezint numrul portului de comunica!ie prin intermediul cruia $roC&erul &e conecteaz la &er er. 2er erele de!in mai multe a&tfel de porturi, fiecare &er ind unui alt tip de comunica!ie) =>>6, D>6, po%t electronic, etc. 6ortul pre&ta$ilit n cazul tran&ferului prin =>>6 are numrul 80. Fumrul portului tre$uie precizat numai n cazul c(nd ace&ta e&te diferit de 80. caleaPcatreP,isier , reprezint localizarea ierar+ic a fi%ierului n &i&temul de directoare de pe &er er. *cea&ta con&t ntr,unul &au mai multe nume de&pr!ite prin caracterul /G/ 9slash; Iat c(te a e-emple de adre&e 75@ mpreun cu e-plica!ii referitoare la &inta-a lor) +ttp)GGCCC.autor.comGcarti.+tml En ace&t e-emplu adre&a 75@ indic documentul =>?@ numit carti)html care &e afl directorul rdcin al &er erului CCC.autor.com +ttp)GGCCC.autor.comG *cea&t adre& indic prima pa'in 9home page; a aceluia%i &er er. +ttp)GGCCC.autor.com)8080G #-emplul de mai &u& indic de a&emenea &pre prima pa'in a &er erului CCC.autor.com, dar &pecific(nd %i numrul portului care e&te diferit de cel pre&ta$ilit. +ttp)GGCCC.autor.comGcarti.+tmlRCe$de&i'n En ace&t e-emplu e&te indicat calea &pre documentul =>?@ carti)html aflat pe acela%i &er er, dar &pecific(ndu,&e o anumit &ec!iune a ace&tui document, &ec!iune denumit ebdesign. En cazul c(nd fi%ierul &pre care e&te fcut le'tura e&te &tocat pe propriul calculator &e folo&e%te o adre& 75@ de forma urmtoare) ,ileOJJserverJcaleaPcatreP,isier unde) server , reprezint numele computerului pe care e&te &tocat fi%ierul 9acela%i pe care ruleaz $roC&erul;. En ace&t caz, $roC&erul a acce&a fi%ierul folo&ind facilit!ile o$i%nuite ale &i&temului de operare de pe computerul propriu. caleaPcatreP,isier , reprezint localizarea fi%ierului n &tructura de directoare conform re'ulilor &i&temului de operare Fumele computerului per&onal poate fi nlocuit cu numele 'eneric /local)ost/. En ace&t caz, adre&a 75@ poate a ea urmtoarea form) ,ileOJJlocal)ostJcaleaPcatreP,isier 3e e-emplu fi%ierul culori)html care e&te &al at n folderul de lucru "ork din M$ Documents pe computerul per&onal a a ea urmtoarea adre& 75@) file)GGlocal+o&tG0)f?I 3ocument&f4orJfculori.+tml

>ermenul localhost poate fi omi&, deoarece e&te numele pre&ta$ilit al computerului propriu. En ace&t caz e&te nece&ar prezen!a unui caracter /G/ &uplimentar) file)GGG0)f?I 3ocument&f4orJfculori.+tml En practic, atunci c(nd dorim & adre&m un fi%ier aflat pe computerul propriu putem omite prima parte a adre&ei 75@ o$!in(nd urmtoarea form) 0)f?I 3ocument&f4orJfculori.+tml .ten!ieH 2e poate o$&er a c n cazul re&ur&elor &tocate pe &er ere e-terne, numele directoarelor care fac parte din calea ctre re&ur& &unt de&pr!ite prin caracterul /J/ 9slash;. @a fi%ierele &tocate pe computerul propriu, directoarele %i &u$directoarele care formeaz calea ctre fi%ier &unt de&pr!ite prin caracterul /Q/ 9backslash;. 0ele dou moduri de &criere &unt &pecifice celor dou &i&teme de operare) 7FIW, re&pecti 3.2,4indoC&. 3eoarece marea ma"oritate a &er erelor 4e$ folo&e&c &i&temul de operare 7FIW, calea ctre re&ur&ele &tocate pe ele &e &crie re&pect(nd con en!iile ace&tui &i&tem. ?ai mult, acea&t con en!ie &,a e-tin& %i la adre&ele 75@ referite de pe &i&teme 4indoC&. *&tfel, dac dori!i & adre&a!i un fi%ier numit foto);pg aflat pe di&cul C4, n M$ Documents, folderul 'magini pute!i folo&i adre&a 75@) 0)G?I 3ocument&GIma'iniGfoto."p' 2. 1drese a<so!ute i adrese re!ati"e 6entru a putea localiza un fi%ier n &tructura ierar+ic de directoare, n &copul de a &ta$ili o le'tur ctre el, &e poate folo&i adre&area absolut$ &au adre&area relativ$. .dresa absolut$ a unui fi%ier con!ine calea preci& %i complet ctre fi%ierul re&pecti pornind de la (rful ierar+iei de directoare) 0)G?anual =>?@G#-empleGculori.+tml Di%ierul culori)html &e afl pla&at pe di&cul C4, n directorul Manual #%M(, &u$directorul 5xemple. .dresa relativ$ a unui fi%ier precizeaz pozi!ia ace&tuia n raport cu documentul =>?@ din care e&te apelat. Uom re eni ce a mai "o& a&upra ace&tui &u$iect. 3. Sta<i!irea !e&*turi!or 6entru a in&era le'turi ntr,un document =>?@ folo&im etic+eta 5.9 5J.9. #tic+eta L*M e&te o etic+et container, prezen!a etic+etei de nc+idere fiind o$li'atorie. *tri$utul o$li'atoriu al etic+etei L*M e&te )re, 9#$pertext Reference; care prime%te ca aloare adre&a 75@ a fi%ierului cu care dorim & &ta$ilim le'tura. *ce&t fi%ier poate fi un document =>?@, o ima'ine &au un fi%ier de alt tip. 3ocumentul =>?@ n care e&te prezent le'tura &e nume%te surs$ iar fi%ierul ctre care e&te fcut le'tura &e nume%te !int$. 2inta-a etic+etei L*M e&te urmtoarea)

L* +refS/adre&aV75@/Mte-t &au ima'ineLG*M Entre etic+etele L*M %i LG*M poate fi pla&at un te-t o$i%nuit &au o ima'ine. En mod pre&ta$ilit te-tul inclu& ntre etic+etele L*M e&te afi%at &u$liniat %i de culoare al$a&tr iar ima'inile au un c+enar de culoare al$a&tr. Dolo&irea etic+etei L*M im$ricat cu etic+ete de formatare a te-tului, fonturi, li&te &au ta$ele &e face pla&(nd etic+eta L*M 6n interiorul ace&tora. En ace&t &en&, &tandardul =>?@ con&ider incorect o con&truc!ie ca acea&ta) L* +refS/adre&aV75@/MLD.F> faceS/tip/M@e'aturaLGD.F>MLG*M En locul ei om folo&i con&truc!ia) LD.F> faceS/tip/ML* +refS/adre&aV75@/M@e'aturaLG*MLGD.F>M .ten!ieH Fu e&te permi& im$ricarea mai multor etic+ete L*M. En func!ie de localizarea !intei 9a re&ur&ei referite de le'tur; putem cla&ifica le'turile a&tfel) le'turi n cadrul aceleia%i pa'ini 9ancore; le'turi ctre o pa'in aflat n acela%i folder le'turi ctre o pa'in aflat n alt folder le'turi ctre pa'ini e-terne 4. 1ncore - !e&*turi n cadru! ace!eiai pa&ini 6entru a facilita na i'area ntr,o pa'in care con!ine un te-t de mari dimen&iuni &e pot in&era n ace&ta anumite puncte de reper ctre care &e define&c le'turi. *ce&tea &e nume&c ancore. 6entru a pla&a o ancor &unt nece&are dou elemente) 1. Punctul &pre care dorim & facem le'tura. *ce&ta &e define%te in&er(nd n punctul din pa'in dorit 9de o$icei n dreptul unui anumit element din pa'in) un titlu, o ima'ine, o alt le'tur, un ta$el, etc.; etic+eta L*M, n&o!it de atri$utul name care prime%te ca aloare un nume de identificare atri$uit ancorei 9de e-emplu /numeVancora/ ;. 6rin urmare, identificarea punctului &pre care &e face le'tura &e realizeaz a&tfel) L* nameS/numeVancora/M LG*M 2. Le-$tura propriu"&is$R care &e define%te folo&ind atri$utul )re, al etic+etei L*M. En e-emplul de mai &u&, ace&ta prime%te ca aloare /RnumeVancora/. 2ta$ilirea le'turii &e realizeaz dup urmtoarea &inta-) L* +refS/RnumeVancora/Mte-t e-plicati LG*M >e-tul e-plicati al$a&tr. a fi afi%at n mod diferit, n format +IperlinJ, &u$liniat %i de culoare pre&ta$ilit

En momentul c(nd &e efectueaz clicJ cu mou&e,ul pe te-t e-plicati &e realizeaz un &alt n cadrul pa'inii, $roC&erul afi%(nd partea din pa'in care ncepe de la elementul n dreptul cruia a fo&t in&erat ancora. .ten!ieH 6rezen!a &emnului S, pla&at naintea numelui ancorei, e&te o$li'atorie. *ce&ta indic $roC&erului faptul c e&te or$a de&pre o le'tur intern, n cadrul pa'inii. En cazul n care &emnul e&te omi&, $roC&erul a cuta ace&t nume n afara pa'inii, unde, e ident, nu l a '&i. 6entru a introduce o le'tur ctre o ancor definit n alt document 9alt pa'in; aflat n acela%i director, atri$utul +ref prime%te o aloare de forma) +refS/numeVfi&ier.+tmlRnumeVancora/. #-emplul 6.1 ilu&treaz cele dou &itua!ii. 6entru a e-emplifica modul n care poate fi in&erat o ancor ntr,un alt document %i cum poate fi ea referit, am in&erat n documentul textB<)html ancora L* nameS/citat/M. ,3( emplul :. 1 L=>?@M L=#*3M L>I>@#Mle'aturi1LG>I>@#M LG=#*3M L1.3KM L* nameS/ancora1/MLG*M L=1 ali'nS/center/M*ncore definite in acela&i documentLG=1ML=5M L15M*L15M1L15M0L15M3L15M# L15MDL15MAL15M=L15MIL15MB L15MXL15M@L15M?L15MFL15M. L15M6L15M5L15M2L15M>L15M7 L15MUL15M4L15MgL15MWL15M L* +refS/Rancora1/M2u&LG*M L15ML15M L=1 ali'nS/center/ M*ncore definite in alt documentLG=1ML=5ML6M 0licJ L* +refS/te-t14.+tmlRcitat/M*I0I LG*M pentru a de&c+ide un document &ituat in alta pa'ina LG1.3KM LG=>?@M *&pectul pa'inii de&cri&e n ace&t e-emplu e&te cel din Di'ura 6.1. Bbserva!ie 0on&truc!iile de mai "o& au acela%i rol, %i anume in&erarea unei ancore denumit /ancora1/ n punctul din pa'in care con!ine elementul /#@#?#F>/. L* nameS/ancora1/M#@#?#F>LG*M L* nameS/ancora1/MLG*M#@#?#F>

En mod normal, etic+eta L*M fiind o etic+et container, ntre etic+etele de de&c+idere %i de nc+idere tre$uie & fi'ureze un te-t. >otu%i, n e-emplul de mai &u&, dorind & in&erm o ancor n dreptul titlului, am folo&it cea de,a doua con&truc!ie) L* nameS/ancora1/MLG*M L=1 ali'nS/center/M*ncore definite in acela&i documentLG=1M ?oti ul e&te acela c e&te con&iderat o practic incorect includerea etic+etelor de titlu ntre etic+etele L*M %i LG*M. 2e poate utiliza %i con&truc!ia urmtoare) L=1 ali'nS/center/ML* nameS/ancora1/M*ncore definite in acela&i documentLG*MLG=1M ). Le&*tura c*tre o pa&in* a'!at* n ace!ai director 8'o!der9 6entru a realiza o le'tur ctre o pa'in aflat n acela%i director &e procedeaz a&tfel) L* +refS/numeVfi&ier.+tml/Mte-t e-plicati LG*M unde) +ref reprezint atri$utul care &ta$ile%te calea ctre !inta cu care &e face le'tura. 3ac fi%ierul !int e&te n acela%i director, atri$utul prime%te ca aloare c+iar numele fi%ierului. te-t e-plicati , reprezint te-tul pe care &e face clicJ cu mou&e,ul pentru a acti a le'tura. 93e e-emplu /0licJ aici/ ;. *ce&t te-t e&te afi%at diferit fa! de re&tul te-tului , n 'eneral, &u$liniat %i de culoare al$a&tr. En #-emplul 6.2 e&te realizat o le'tur reciproc ntre dou pa'ini aflate n folderul de lucru "ork, pa'ina a (nd a&pectul din Di'ura 6.2. -3 ( emplul :. ' L=>?@M L=#*3M L>I>@#Mle'aturi2LG>I>@#M LG=#*3M L1.3KM L=1M6a'ina 1 LG=1ML=5M L* +refS/le'aturi3.+tml/M@inJ catre pa'ina 2 LG*M LG1.3KM LG=>?@M 2al a!i ace&t e-emplu cu numele legaturi>)html iar e-emplul urmtor 9#-emplul 6.3; cu numele legaturiA)html. )3 ( emplul :. + L=>?@M L=#*3M L>I>@#Mle'aturi3LG>I>@#M LG=#*3M L1.3KM L=1M6a'ina 2 LG=1ML=5M L* +refS/le'aturi2.+tml/M@inJ catre pa'ina 1 LG*M

LG1.3KM LG=>?@M @a fel cum a!i procedat %i p(n acum, de&c+ide!i una dintre cele dou pa'ini cu $roC&erul %i te&ta!i func!ionarea le'turii dintre ele. *m$ele documente =>?@ tre$uie &al ate n acela%i folder. Ue!i o$&er a c atunci c(nd afla!i n 6a'ina 1 %i face!i clicJ cu mou&e,ul pe te-tul @inJ catre 6a'ina 2 &e a de&c+ide cel de,al doilea document =>?@ %i in er&, le'tura dintre cele dou pa'ini fiind a&tfel reciproc. .ten!ieH Fumele fi%ierelor care reprezint alori ale atri$utului +ref &unt case sensitive. *cela%i lucru &e nt(mpl %i cu te-tul care de&emneaz alorile atri$utului name. *cea&ta n&eamn c fi%ierul legaturi?)html e&te diferit de fi%ierul (egaturi?)html, iar ancora L* nameS/ancora1/M e&te diferit de L* nameS/*ncora1/M 6entru a e ita 're%elile, e&te recomandat & denumi!i toate fi%ierele &au numele pentru ancore cu litere mici. +. Le&*tura c*tre o pa&in* !oca!i.at* n a!t director 8'o!der9 3ac pa'ina cu care rem & facem le'tura &e afl pe acela%i calculator, dar ntr,un alt folder, atunci pentru a preciza pozi!ia ei n &tructura de directoare &e poate folo&i adre&area relati &au adre&area a$&olut. *dre&area absolut$ &e realizeaz preciz(nd calea 9path; complet, pornind de la directorul rdcin, prin care &e poate a"un'e la fi%ierul de care rem & le'm pa'ina. 3e e-emplu, dac fi%ierul culoriB)html &e afl pe di&cul C4,n folderul M$ Documents, n folderul "ork, o le'tur ctre el &e a face n modul urmtor) L* +refS/0)G?I 3ocument&G4orJGculori1.+tmlM@inJLG*M *dre&area relativ$ precizeaz calea ctre documentul cu care facem le'tura pornind de la documentul n care ne aflm. 6entru a urca un ni el n &tructura de directoare &e folo&e%te %irul de caractere /..G / ( emplu 2 pre&upunem c ne aflm ntr,un document =>?@ numit legaturi>)html pla&at n folderul de lucru "ork. En afar de folderul "ork n care lucrm, n M$ Documents &e mai afl un folder, numit 'magini, ca n &tructura prezentat n 2c+ema 6.1.

Sc/ema +.1

CO CO M? @ocuments =or>

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

Sc/ema +.2

CO CO M? @ocuments Manua! HTML #xemp!e Le&aturi

e !e&aturi2./tm!

3orim & &ta$ilim o le'tur cu un fi%ier numit text>)html care &e afl n directorul 5xemple 9directorul printe al folderului no&tru, (egaturi;. *tunci referirea &e a face a&tfel) L* +refS/..Gte-t2.+tml/M@inJ la te-tLG*M *m urcat un ni el n ierar+ie a"un'(nd n directorul 5xemple %i am &pecificat numele fi%ierului cu care dorim & facem le'tura. 3ac fi%ierul text>)html &e afl cu dou ni ele mai &u& fa! de folderul n care lucrm, adic dac &e afl n folderul Manual #%M(, atunci adre&area &e face a&tfel) L* +refS/..G..Gte-t2.+tml/M@inJ la te-tLG*M

En 'eneral, de c(te ori e&te po&i$il, e&te de preferat & folo&i!i adre&area relati , pentru ca documentele =>?@ & fie porta$ile 9mutarea lor & nu in alideze le'turile &ta$ilite ntre di er&e documente;. ,. Le&*tura c*tre pa&ini externe . le'tur ctre o pa'ina e-tern &e realizeaz &implu, prin utilizarea etic+etei L*M LG*M, &pecific(nd adre&a 75@ a pa'inii ca aloare a atri$utului +ref a&tfel) +refS/+ttp)GG75@Vpa'ina/ 5eamintim c &pecificarea adre&ei 75@ &e poate face fie folo&ind numele &er erului pe care e&te &tocat pa'ina fie adre&a I6 a ace&tuia. # ident, pentru ca linJ,ul & func!ioneze, tre$uie ca utilizatorul & fie conectat la Internet 9lucru ala$il pentru toate le'turile e-terne;. En #-emplul 6.4 e&te &ta$ilit o le'tur ctre pa'ina de &tart Ka+oo. i3 ( emplul :. 0 L=>?@M L=#*3M L>I>@#Mle'aturi4LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M@inJ catre Ka+oo.comLG=1ML=5M L* +refS/+ttp)GGCCC.Ia+oo.com/M Ka+ooNLG*M LG1.3KM LG=>?@M *&pectul pa'inii e&te cel din Di'ura 6.3. 7n atri$ut util al etic+etei L*M e&te title. *ce&ta determin apari!ia unei mici fere&tre 9tool tip; n pa'ina 4e$ c(nd mou&e,ul &e afla pe o le'tur, ferea&tr n care e&te afi%at aloarea dat ace&tui atri$ut, care are a&tfel menirea de a furniza informa!ii &uplimentare de&pre &emnifica!ia unei le'turi. #-emplul 6.5 ilu&treaz utilitatea atri$utului title, a%a cum reie&e din Di'ura 6.4. E3( emplul :. 1 L=>?@M L=#*3M L>I>@#Mle'aturi5LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M*tri$utul titleLG=1ML=5M L* +refS/+ttp)GGCCC.'oo'le.com/ titleS/@e'atura catre Aoo'le.com/MAoo'leLG*M LG1.3KM LG=>?@M 3. 1!e&erea cu!ori!or pentru !e&*turi *m mai di&cutat de&pre ace&t &u$iect %i la capitolul de&pre culori. En mod pre&ta$ilit 9 default; &e utilizeaz trei culori pentru le'turi) culoare pentru le'turile nevi&itate 9nu &,a efectuat nici un clicJ pe ele; , al$a&tru

culoare pentru le'turile vi&itate 9&,a efectuat cel pu!in un clicJ pe ele; , iolet culoare pentru le'turile active 9dea&upra crora &e afl mou&e,ul la un moment dat, dar nc nu &,a efectuat clicJ; , ro%u 6entru a modifica dup preferin!e ace&te culori &e folo&e&c cele trei atri$ute ale etic+etei L1.3KM) lin; pentru le'turile ne izitate] vlin; pentru le'turile izitate] alin; pentru le'turile acti e. Ualorile pe care le pot lua ace&te atri$ute &unt culori definite prin nume &au conform codului +e-azecimal. #-emplul 6.6 ilu&treaz modul cum pot fi modificate culorile le'turilor, a%a cum &e poate o$&er a din Di'ura 6.5 care red a&pectul pa'inii de&cri&e n e-emplu. ;3 ( emplul :. : L=>?@M L=#*3M L>I>@#Mle'aturi6LG>I>@#M LG=#*3M L1.3K linJS/IelloC/ linJS/'reen/ alinJS/ma'enta/M L=1 ali'nS/center/M2etarea culorilor pentru linJ,uriLG=1ML=5M L15M'al$en pentru le'aturi, erde pentru le'aturi izitate &i ma'enta pentru le'aturi acti eL15M L* +refS/le'aturi2.+tml/M@inJ catre pa'ina 1 LG*ML15M L* +refS/le'aturi3.+tml/M@inJ catre pa'ina 2 LG*M LG1.3KM LG=>?@M 4. ti!i.area potei e!ectronice 8e-mai!9 Entr,o pa'in 4e$ &e pot afla le'turi care permit lan&area n e-ecu!ie a aplica!iei de e-pediere a me&a"elor electronice a celui care iziteaz pa'ina. Dc(nd clicJ pe te-tul care n&o!e%te le'tura, pro'ramul de po%ta electronic al izitatorului pa'inii &e a de&c+ide automat, a (nd c(mpul adre&ei de&tinatarului, />o)/ de"a completat cu adre&a de mail &pecificat n pa'in. 6entru a realiza ace&t lucru &e folo&e%te comanda mailtoO atri$utul +ref primind o aloare ca mai "o&) L* +refS/mailto)adre&aVe,mail/M 3ac pa'ina e&te izualizat cu $roC&erul Internet #-plorer iar izitatorul are in&talat un e,mail mana'er, cum &unt de pild aplica!iile ?icro&oft .utlooJ &au .utlooJ #-pre&, acti area le'turii a determina de&c+iderea unuia dintre ace&te pro'rame. En cazul n care mana'erul de e,mail default e&te de alt tip dec(t aplica!ia ?icro&oft, 9#udora, de e-emplu; acea&ta a porni de a&emenea automat, cu o nou pa'in +end %i cu adre&a de&tinatarului pre,completat. 3ac pa'ina e&te izualizat n Fet&cape, &e a de&c+ide pro'ramul de po%t electronic ncorporat n $roC&er) En e-emplul urmtor 9#-emplul 6.7;, n momentul c(nd izitatorul pa'inii face clicJ pe te-tul />rimite!i un me&a"/, aplica!ia de po%t electronic e&te lan&at automat, prin intermediul &er iciului

mailto), iar c(mpul care tre$uie completat cu adre&a de mail a de&tinatarului me&a"ului e&te de a&emenea completat automat cu adre&a autorhdomeniu.com a%a cum rezult din Di'ura 6.6. l3 ( emplul :. < L=>?@M L=#*3M L>I>@#Mle'aturi7LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M#-pediere de me&a"e electronice LG=1ML=5M L* +refS/mailto)autorhdomeniu.com/ titleS/adre&a mea de mail/M >rimiteti un me&a" LG*M LG1.3KM LG=>?@M 1;. Le&*turi c*tre 'iiere oarecare . pa'in 4e$ poate con!ine le'turi nu doar ctre alte fi%iere =>?@, dar %i ctre fi%iere de orice alt tip, aflate pe calculatorul propriu &au oriunde pe 4e$. 0a %i n cazul le'turilor cu alte pa'ini 9documente =>?@; om folo&i etic+eta L*M LG*M, a&tfel) L* +refS/75@Vfi&ierVde&tinatie/Mte-t e-plicati L*M Fefiind or$a de&pre un fi%ier =>?@, $roC&erul nu a putea & l proce&eze, a&tfel c a acti a proce&ul de tran&fer &au de de&crcare 9do nload;, urm(nd ca, dup tran&ferul inte'ral al fi%ierului, utilizatorul & l de&c+id cu un pro'ram adec at. En #-emplul 6.8, atunci c(nd &e efectueaz clicJ pe le'tur &e de&c+ide ca&eta de dialo' .ile do nload care permite) &al area fi%ierului pe di&c &au de&c+iderea fi%ierului n loca!ia curent m3 ( emplul :. = L=>?@M L=#*3M L>I>@#Mle'aturi8LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M@e'aturi catre fi&iere oarecareLG=1ML=5M L* +refS/+tml.zip/M @inJ catre fi&ierul doCnload.zip LG*M LG1.3KM LG=>?@M Di'ura 6.7 red efectul acti rii unei le'turi ctre un fi%ier oarecare. 11. @esc/iderea pa&ini!or re'erite printr-o !e&*tur*

6a'ina nou, apelat prin acti area unei le'turi &e poate de&c+ide n dou moduri, n raport cu pa'ina &ur&) n aceea%i ferea&tr ntr,o ferea&tr nou En mod pre&ta$ilit, le'turile de&c+id pa'ina pe care o refer n ferea&tra curent. *cea&ta n&eamn c dac e!i face clicJ pe un linJ, noua pa'in &e a ncrca n locul pa'inii de"a de&c+i&e 9n aceea%i in&tan! a $roC&erului;. 6entru a re eni la pa'ina anterioar tre$uie & ap&a!i $utonul 1ack al $roC&erului. *ce&t comportament &e poate &c+im$a cu a"utorul alorilor atri$utului tar-et, a&upra cruia om re eni la capitolul Cadre. Uom men!iona aici doar dou dintre ace&te alori, core&punztoare celor dou &itua!ii amintite. 6entru ca pa'ina apelat & &e de&c+id ntr,o ferea&tr nou, &e utilizeaz &inta-a 'eneric de mai "o&, n care atri$utul tar'et are aloarea /V$lanJ/) L* +refS/adre&aV75@/ tar'etS/V $lanJ/Mte-t e-plicati LG*M 6entru ca pa'ina referit & &e de&c+id n aceea%i ferea&tr cu pa'ina &ur&, atri$utului i &e a&ociaz aloarea /V&elf/) L* +refS/adre&aV75@/ tar'etS/V&elf/Mte-t e-plicati LG*M Di'ura 6.8 red modul n care &e de&c+ide o pa'in ntr,o nou ferea&tr, a%a cum e&te precizat n #-emplul 6.9. n3 ( emplul :. > L=>?@M L=#*3M L>I>@#Mle'aturi9LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M3e&c+iderea pa'inii in alta ferea&traLG=1M L=5M 6a'ina de mai "o& &e a de&c+ide intr,o ferea&tra noua L6M L* +refS/ta$el culori.+tml/ tar'etS/V$lanJ/M>a$elul culorilorLG*M LG1.3KM LG=>?@M 12. Crearea unei <are secundare de na"i&are En foarte multe &ite,uri a!i o$&er at, pro$a$il, e-i&ten!a, n partea de "o& a pa'inii, a unui $loc de te-t care con!ine le'turi ctre pa'inile care compun &ite,ul, le'turile fiind delimitate de mici linii erticale, ca n e-emplul de mai "o&) TCuloriT T*onturiT T4locuri de te tT 7tilitatea ace&tei $are e&te e ident le'at de facilitarea na i'rii n &ite, mai ale& n cazurile c(nd dimen&iunea pa'inii dep%e%te un ecran. En ace&t caz, utilizatorul tre$uie & deruleze la citire pa'inile pe ertical, a&tfel c linJ,urile de pe $ara de na i'are &uperioar nu mai &unt acce&i$ile.

. a&tfel de $ar &ecundar de na i'are &e poate realiza proced(nd ca n #-emplul 6.10. # ident, le'turile or face referire la fi%ierele =>?@ dorite de dumnea oa&tr. . pa'in care con!ine o a&tfel de $ar de na i'are a a ea a&pectul din Di'ura 6.9. o3 ( emplul :. 1@ L=>?@M L=#*3M L>I>@#Mle'aturi10LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M1ara de na i'areLG=1ML=5M L=4 ali'nS/center/M L* +refS/culori1.+tml/Mi0uloriiLG*M L* +refS/fonturi1.+tml/MiDonturiiLG*M L* +refS/te-t1.+tml/MiDormatarea te-tuluiiLG*M LG=4M LG1.3KM LG=>?@M 1ara ertical in&erat ntre te-tele care trimit la pa'inile re&pecti e e&te de o$icei pla&at pe ta&tatur pe aceea%i ta&t cu caracterul /f/ 9backslash;. 3ac dori!i ca $ara & fac parte din te-tul acti , o e!i in&era ntre etic+etele L*M %i LG*M, altminteri ea tre$uie pla&at n afara ace&tora, a&tfel) iL* +refS/culori1.+tml/M0uloriLG*Mi 13. -e.umat *dre&a 75@ con&t dintr,un %ir de caractere care identific n mod unic o anumit re&ur& oferind informa!ii de&pre numele &er erului pe care e&te &tocat acea re&ur& %i de&pre localizarea ei n &tructura de directoare de pe &er er. @e'turile &e introduc ntr,un document =>?@ prin intermediul etic+etei container L*M LG*M conform urmtoarei &inta-e 'enerale) L* +refS/adre&aV75@/ nameS/nume/ titleS/te-t/ tar'etS/tinta/Mte-t &au ima'ineLG*M En func!ie de locul unde e&te pla&at documentul referit e-i&t mai multe tipuri de le'turi) @e'turi n cadrul aceleia%i pa'ini 9le'turi interne, ancore;. 6entru a crea o le'tur intern &unt nece&ari doi pa%i) definirea numelui ancorei %i &ta$ilirea le'turii . @e'turi cu pa'ini aflate n acela%i director. 6entru a &ta$ili o le'tur cu o pa'in aflat n acela%i director &e &pecific drept aloare a atri$utului +ref c+iar numele fi%ierului =>?@. @e'turi cu pa'ini aflate n alt director. 6entru a &ta$ili loca!ia documentului cu care facem le'tura &e poate folo&i adre&area relati 9recomandat; &au adre&area a$&olut. @e'turile e-terne. En cazul le'turilor e-terne, atri$utul +ref prime%te ca aloare adre&a 75@ a pa'inii re&pecti e.

2e pot &ta$ili %i le'turi ctre fi%iere oarecare 9nu neaprat documente =>?@;. @a acti area unei a&tfel de le'turi &e de&c+ide ferea&tra de do nload a &i&temului. 0u a"utorul comenzii mailto) &e lan&eaz automat n e-ecu!ie aplica!ia de po%t electronic a izitatorului pa'inii. 14. Test 4. a; $; c; Care dintre urmtoarele afirmaii este fals4 #tic+eta L*M &er e%te la &ta$ilirea unei le'turi n cadrul aceleia%i pa'ini #tic+eta L*M &er e%te la &ta$ilirea unei le'turi ctre un fi%ier aflat pe acela%i calculator #tic+eta L*M &er e%te la &crierea te-tului cu caractere *rial.

&entru a preci8a numele fi7ierului spre care se face legtura se folose7te atributul4 a; $; c; name +ref file

Care este gre7eala din urmtoarea construcie9 L=2ML* nameS/R'r/MAre&ealaLG*ML=2M a; Fu e&te nici o 're%eala. $; *r fi tre$uit formulat) L=2ML* nameS/'r/MAre&ealaLG*MLG=2M c; *r fi tre$uit formulat) L* nameS/R'r/MLG*ML=2MAre&ealaLG=2M Ce reali8ea8 exemplul urmtor9 L* nameS/&ectiunea1/M2ectiunea 1LG*M a; $; c; In&ereaz o ancor n pa'in %i define%te numele ei. 2ta$ile%te o le'tur n cadrul pa'inii. 2ta$ile%te o le'tura la fi%ierul sectiuneaB)html.

.i7ierul contact)html, referit 6n legtura de mai ;os4 L* +refS/..Gcontact.+tml/M0ontactLG*M este locali8at 6n4 a; $; c; acela%i director ca %i fi%ierul curent directorul printe al fi%ierului curent directorul aflat cu dou ni ele mai &u& dec(t directorul curent

:n documentul culori)html am inclus urmtoarea ancor4

L* nameS/fundal/MLG*M :n acest ca8, construcia corect pentru a face legtura spre ea din cadrul unui alt document aflat 6n acela7i director este4 a; $; c; L* +refS/Rfundal/M1acJ'roundLG*M L* +refS/culori.+tmlVfundal/M1acJ'roundLG*M L* +refS/culori.+tmlRfundalM1acJ'roundLG*M

Care este aspectul unei legturi 6ntr!un text, 6n mod prestabilit DdefaultE9 a; $; c; de culoare al$a&tr %i &u$liniat de culoare ro%ie &u$liniat

Care dintre urmtoarele afirmaii este fals9 a; $; c; Fu e&te permi& im$ricarea mai multor etic+ete L*M. Fu e&te permi& &c+im$area culorilor le'turilor. Fu e&te permi& referin!a la alte fi%iere dec(t fi%ierele =>?@.

&entru a stabili o legtura cu site!ul extern CCC.$ooJ&.com folosim construcia4 a; $; c; L* +refS/+ttp)GGCCC.$ooJ&.com/M L* +refS/file)GGCCC.$ooJ&.com/M L* +refS/$ooJ&.com/M

.ie urmtoarea etichet inserat 6n pagin4 L* +refS/mailto)utilizatorhdomeniu.comM2end mailLG*M Dac se execut click pe textul /2end mail/) a; $; c; 2e de&c+ide pa'ina CCC.domeniu.com. 2e de&c+ide pro'ramul de mail al izitatorului pa'inii. 2e de&c+ide c&u!a de mail cu adre&a &pecificat.

Le-$turi
1. c; '. $; +. $; 0. a; 1. $; :. c; <. a; =. $; >. a; 1@. $;

Capitolul < 7ma-ini i elemente multimedia 7ma-inile i elementele multimedia con&tituie, fr ndoial, o latur intere&ant %i &pectaculoa& a oricrei pa'ini de 4e$. 6ute!i include n pa'inile dumnea oa&tr foto'rafii, ima'ini animate, &unete &au ima'ini ideo. *tunci c(nd &unt folo&ite n mod "udicio&, ace&te elemente pot m$o'!i con!inutul pa'inilor 4e$, oferindu,le un a&pect atracti %i profe&ional. 6e de alt parte, folo&irea lor n e-ce& poate da pa'inilor un a&pect ncrcat %i confuz %i poate conduce la mrirea con&idera$il a timpului de ncrcare al pa'inii. 1. 0ormate!e 'iiere!or &ra'ice Ima'inile &unt &tocate n fi%iere cu di er&e formate, cele mai folo&ite pe 4e$ fiind, a%a cum era fire&c, cele care confer un raport optim ntre calitatea ima'inii %i dimen&iunile fi%ierului. *cea&t op!iune e&te determinat de faptul c ma"oritatea utilizatorilor Internetului di&pun de cone-iuni telefonice dial,up, cu iteze de&tul de mici, a&tfel c timpul de ncrcare al fi%ierelor, care depinde de dimen&iunea ace&tora, de ine un factor determinant. 3ou dintre cele mai utilizate tipuri de fi%iere 'rafice &unt DP(? 9Foint &hotographic 5xperts ,roup; %i ?7* 9,raphics 'nterchange .ormat;. 0ormatu! A(0 Dormatul AID 9)gif; folo&e%te 256 de culori %i e&te ideal pentru icon,uri, ilu&tra!ii %i anima!ie. *ce&t format utilizeaz o te+nolo'ie &pecial de comprimare care reduce &emnificati dimen&iunile fi%ierelor 'rafice pentru un tran&fer mai rapid prin re!ea. En proce&ul de comprimare &e p&treaz toate caracteri&ticile ima'inii ori'inale, a&tfel c dup decomprimare ima'inea are acela%i a&pect ca %i ori'inalul. Ima'inile AID &uport efecte de tran&paren!, ntre!e&ere %i anima!ie, a&upra crora om re eni pe lar' n capitolul (lemente avansate de -ra,ic$. 3eoarece ma"oritatea $roC&erelor recuno&c formatul AID, ace&ta a de enit cel mai frec ent utilizat n pa'inile 4e$. 6oate fi folo&it pentru a include ima'ini direct n pa'ini 9ima'ini in!line; precum %i pentru a referi ima'inile prin intermediul unor le'turi e-terne. >otu%i, datorit numrului redu& de culori, formatul AID nu e&te potri it pentru foto'rafii &au ima'ini de calitate nalt. 6entru ace&t tip de ima'ini, cel mai adec at e&te formatul B6#A. 0ormatu! B:#A Dormatul B6#A 9);pg;, pe de alt parte, &uport un numr mult mai mare de culori 9apro-imati 16 milioane;. 3ac dori!i & folo&i!i ima'ini foto'rafice, formatul B6#A e&te recomandat, datorit calit!ii &uperioare a ima'inii. 3imen&iunile unui fi%ier B6#A nu depind de numrul de culori ci de 'radul de comprimare a ima'inii. Aradul de comprimare al formatului B6#A e&te mai ridicat dec(t cel al formatului AID. Fu e&te neo$i%nuit, de e-emplu, ca un fi%ier AID care are 200 de X$ & fie comprimat ca fi%ier B6#A p(n la dimen&iunea de 30 de X$.

6entru a realiza un 'rad at(t de nalt de comprimare a ima'inilor, formatul B6#A pierde anumite informa!ii din ima'inea ori'inal. 0u toate c la decomprimare ima'inea B6#A nu a fi a$&olut identic cu ima'inea ori'inal, diferen!ele or fi de cele mai multe ori ino$&er a$ile. Dormatul B6#A e&te potri it pentru ima'inile foto'rafice, dar el nu e&te adec at pentru ilu&tra!ii, de&ene &au ima'ini de dimen&iuni redu&e. *l'oritmii folo&i!i pentru comprimarea %i decomprimarea ima'inii altereaz n mod nota$il zonele de mari dimen&iuni colorate cu o &in'ur nuan!. 3in ace&t moti , atunci c(nd dori!i & include!i n pa'in un de&en &au o ilu&tra!ie care folo&e%te un numr redu& de culori, formatul AID e&te cel mai potri it. 2. C7te"a metode de o<inere a ima&ini!or * e!i la ndem(n di er&e moduri n care pute!i crea &au procura ima'ini pe care & le include!i n pa'inile dumnea oa&tr) 0rearea ima'inilor cu a"utorul unui pro'ram de 'rafic , cele mai performante &unt *do$e 6+oto&+op %i 0orel3raC. 2canarea foto'rafiilor realizate cu aparate foto tradi!ionale %i, e entual, prelucrarea lor ulterioar cu editoare 'rafice. Dolo&irea aparatelor de foto'rafiat di'itale , de%i &unt ni%te ec+ipamente nc de&tul de co&ti&itoare prezint marele a anta" c furnizeaz ima'ini di'itale &u$ form de fi%iere 'rafice n formate comune, care &e pot de&crca direct pe +ard,di&J, %i care &e pot utiliza ca atare &au dup o prelucrare 'rafic minim. 6reluarea ima'inilor de pe 4e$. Fumrul &ite,urilor care ofer colec!ii de ima'ini 'ratuite %i care pot fi utilizate li$er e&te imen&. >otu%i, atunci c(nd dori!i & folo&i!i n pa'ina dumnea oa&tr o ima'ine care nu face parte dintr,o a&tfel de colec!ie, tre$uie & a e!i n edere a&pectul drepturilor de autor. 6entru a prelua o ima'ine de pe 4e$ tre$uie & o &al a!i pe +ard,di&J,ul dumnea oa&tr. 6ute!i realiza ace&t lucru a&tfel) , , , , pla&a!i cur&orul pe ima'inea re&pecti %i ap&a!i $utonul drept al mou&e,ului &electa!i din meniul care &e de&c+ide +ave 'mage 0s))) n ferea&tra de dialo' &electa!i folderul de de&tina!ie %i numele fi%ierului ap&a!i $utonul +ave

#&te util & crea!i unul &au mai multe foldere dedicate ima'inilor, or'anizate pe tipuri 9icon, fundaluri, $utoane, ima'ini propriu,zi&e, etc.;, uneori alctuind ade rate $i$lioteci, n care & p&tra!i toate ima'inile pe care inten!iona!i & le folo&i!i n pa'inile dumnea oa&tr. 3e a&emenea, de mare utilitate &unt aplica!iile de 'e&tionare a ima'inilor, cum e&te de e-emplu cuno&cutul *032ee. .ten!ieH 3ac ima'inea nu e&te &al at n acela%i folder n care &e afl documentul =>?@ &ur& care folo&e%te ima'inea re&pecti , referin!a la ima'ine tre$uie & con!in calea corect ctre loca!ia ei, altminteri ima'inea nu a fi afi%at n pa'in. 3. (nserarea unei ima&ini

6entru a in&era o ima'ine n cadrul unei pa'ini 9o ima'ine in!line;, &e utilizeaz etic+eta 57M?9 9de la image;. #tic+eta LI?AM nu e&te o etic+et container, prin urmare nu nece&it o etic+et core&punztoare de nc+idere. 6entru a putea identifica ima'inea care a fi in&erat, &e utilizeaz atri$utul src 9source; al etic+etei LI?AM. *tri$utul &rc i comunica $roC&erului numele %i loca!ia ima'inii care urmeaz & fie in&erat. Ualoarea ace&tui atri$ut e&te adre&a 75@ a ima'inii re&pecti e. 3ac ima'inea &e afl n acela%i director cu fi%ierul =>?@ care face referire la ima'ine, atunci adre&a 75@ a ima'inii e&te formata numai din numele fi%ierului, inclu&i e-ten&ia. LI?A &rcS/ima'ine.e-ten&ie/M 3ac ima'inea &e afla ntr,un alt director, 75@,ul ima'inii tre$uie &pecificat fie prin adre&area a$&olut fie, prefera$il, prin cea relati . #-emplul 7.1 ilu&treaz modul n care &e pot in&era ntr,o pa'in dou ima'ini, una dintre ele afl(ndu,&e n acela%i folder ca %i pa'ina &ur&, iar cealalt n folderul 'magini. Di'ura 7.1 red a&pectul pa'inii de&cri&e n e-emplu. ( emplul <. 1 L=>?@M L=#*3M L>I>@#Mima'ini1LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/MIma'ini in pa'inaLG=1ML=5M Ima'ine aflata in acela&i folderL6M LI?A &rcS/ti'er.'if/ $orderS/5/ML6M Ima'ine aflata in folderul Ima'iniL6M LI?A &rcS/..GIma'iniG$erne&e."p'/ $orderS/1/ M LG1.3KM LG=>?@M En ace&t e-emplu e&te prezent %i atri$utul border al etic+etei LI?AM. *ce&ta e&te folo&it pentru a pla&a un c+enar n "urul ima'inii. Ualoarea atri$utului $order e&te numrul de pi-eli care reprezint 'ro&imea c+enarului din "urul ima'inii. *$&en!a atri$utului &au &etarea la aloarea /0/ face ca ace&t c+enar & nu fie prezent. 7n alt atri$ut util a&ociat etic+etei LI?AM e&te alt. *ce&t atri$ut permite afi%area unui te-t e-plicati n &pa!iul n care a fi afi%at ima'inea n pa'in. En #-emplul 7.2 e&te ilu&trat utilitatea atri$utului alt. ( emplul <. ' L=>?@M L=#*3M L>I>@#Mima'ini2LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M *tri$utul alt LG=1ML=5M *ce&ta e&te un...L15M

LI?A &rcS/..GIma'iniGoran'ero&e/ altS/trandafir/M LG1.3KM LG=>?@M 3up cum pute!i o$&er a din Di'ura 7.2 ima'inea pe care am inclu&,o n document nu e&te afi%at. ?oti ul e&te c am omi& inten!ionat e-ten&ia )gif a fi%ierului pentru a e-emplifica utilitatea atri$utului alt. 6rin urmare, dac dintr,un moti oarecare, ima'inea nu &e ncarc n pa'in, &e ncarc mai 'reu, &au e&te izualizat cu un $roC&er care nu &uport 'rafica, n zona rezer at ima'inii a fi afi%at te-tul &pecificat ca aloare a atri$utului alt. 3e a&emenea, te-tul &pecificat ca aloare pentru atri$utul alt a fi afi%at %i n cadrul unei mici fere&tre care &e de&c+ide n momentul c(nd cur&orul mou&e,ului e&te men!inut dea&upra ima'inii. Di'ura 7.3 red a&pectul pa'inii n cazul c(nd atri$utul &rc are aloarea corect) /oran'ero&e.'if/. 7n alt moti pentru care e&te indicat folo&irea atri$utului alt e&te acela c izitatorul pa'inii are po&i$ilitatea de a edea nc nainte de ncrcarea complet a ima'inii ce anume &e a afi%a n zona re&pecti . *&tfel, el are po&i$ilitatea de a a%tepta ncrcarea complet a ima'inii &au de a trece la alt pa'in. 4. @imensionarea ima&inii 3imen&ionarea ima'inii &e realizeaz cu a"utorul atri$utelor Fidt) , prin care &e &ta$ile%te l!imea ima'inii %i )ei-)t , prin care &e &ta$ile%te nl!imea ima'inii. En #-emplul 7.3 &unt precizate %i dimen&iunile ima'inii inclu&e n document. 2e o$&er c dimen&ionarea ima'inilor &e face n pi-eli. #&te, de&i'ur, po&i$il, ca dimen&ionarea & &e fac n procente, ca %i la liniile orizontale, de e-emplu. >otu%i, n afara unor cazuri &peciale, acea&ta e&te con&iderat o practic 're%it, deoarece $roC&erul a redimen&iona ima'inea iar rezultatele or fi de calitate &la$. ( emplul <. + L=>?@M L=#*3M L>I>@#Mima'ini3LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M3imen&ionarea ima'inilorLG=1ML=5M LI?A &rcS/ti'er.'if/ Cidt+S/350/ +ei'+tS/250/ML6M LG1.3KM LG=>?@M 6. .$&er (nd Di'ura 7.4 care red a&pectul pa'inii de&cri&e mai &u& putem remarca faptul c &etarea dimen&iunilor a afectat calitatea ima'inii deoarece dimen&iunile ori'inale ale ima'inii erau mai mici. 3imen&iunile ori'inale ale ima'inii tiger)gif, determinate cu a"utorul unui editor 'rafic, &unt) l!imeS200 pi-eli, nl!imeS125 pi-eli. 3ac dimen&iunile ima'inii n pa'in &unt &etate la alori con&idera$il mai mari dec(t dimen&iunile ima'inii ori'inale calitatea ima'inii inclu&e n pa'in a a ea de &uferit. 0oncluzia care &e impune e&te c dimen&ionarea ima'inilor din pa'in tre$uie & &e fac la alori c(t mai apropiate de dimen&iunile ini!iale ale ima'inilor.

U pute!i ntre$a atunci, de ce mai e&te nece&ar includerea atri$utelor de dimen&ionare a ima'inii. Fu numai c e&te nece&ar, dar e&te con&iderat o practic defectuoa& a$&en!a lor din cadrul etic+etei LI?AM. ?oti ul e&te acela c includerea dimen&iunilor ima'inii ofer $roC&erului po&i$ilitatea de a rezer a &pa!iu pentru ima'ine %i de a ncepe ncrcarea te-tului &imultan cu ncrcarea ima'inii. 3ac atri$utele de dimen&ionare nu &unt prezente, $roC&erul a efectua ni%te pa%i &uplimentari pentru a calcula &pa!iul din pa'in nece&ar afi%rii ima'inii. 3in ace&t moti afi%area te-tului nu a putea ncepe dec(t dup ce ima'inea e&te ncrcat n ntre'ime. #&te indicat & e itam o a&emenea &itua!ie deoarece ima'inile &e ncarc mai 'reu dec(t te-tul %i mul!i izitatori ai pa'inii nu or a%tepta &uficient pentru ca ntrea'a pa'in 9ima'ini %i te-t; & fie ncrcat. ). 1!inierea ima&inii i a textu!ui *linierea unei ima'ini n raport cu te-tul din pa'in &e realizeaz prin intermediul atri$utului ali-n, care poate lua urmtoarele alori) left , aliniere la &t(n'a] te-tul e&te di&pu& n partea dreapt a ima'inii ncadr(nd ima'inea ri'+t , aliniere la dreapta] te-tul e&te di&pu& n partea &t(n'a a ima'inii ncadr(nd ima'inea top , aliniere dea&upra] partea de &u& a ima'inii &e aliniaz cu prima linie a te-tului ce precede ima'inea middle , aliniere la mi"loc] mi"locul ima'inii &e aliniaz cu prima linie a te-tului ce precede ima'inea. $ottom , aliniere dede&u$t, la $az] partea de "o& a ima'inii &e aliniaz cu prima linie a te-tului. Ualorile left, ri'+t, %i $ottom ale atri$utului ali'n permit ca te-tul & fie di&pu& n "urul ima'inii, n reme ce top %i middle nu permit ace&t lucru. #-emplul 7.4 ilu&treaz modul de aliniere $ottom, a%a cum rezult din Di'ura 7.5. ( emplul <. 0 L=>?@M L=#*3M L>I>@#Mima'ini4LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M*linierea ima'inii &i te-tului 9$ottom;LG=1ML=5M LI?A &rcS/..GIma'iniGea'le+ed.'if/ ali'nS/$ottom/ Cidt+S/100/ +ei'+tS/66/ altS/ Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t. Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t. LG1.3KM LG=>?@M Di'ura 7.6 red modul de aliniere left iar Di'ura 7.7 modul de aliniere ri'+t.

ultur/M te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine

3in Di'ura 7.8 %i Di'ura 7.9 pute!i o$&er a modurile de aliniere top %i middle precum %i faptul c ace&te alinieri nu permit di&punerea te-tului n "urul ima'inii. *lte dou atri$ute utile, care &er e&c la alinierea ima'inii fa! de re&tul elementelor din pa'in, &unt atri$utele )space %i vspace. #le precizeaz di&tan!a, n pi-eli, pe orizontal, re&pecti pe ertical, dintre ima'ine %i re&tul elementelor din pa'in. En #-emplul 7. 4 om &c+im$a modul de aliniere n cadrul etic+etei LI?AM %i om adu'a atri$utele +&pace, re&pecti &pace, a&tfel) LI?A &rcS/..GIma'iniGea'le+ed.'if/ &paceS/10/ +&paceS/10/M ali'nS/left/ Cidt+S/100/ +ei'+tS/66/ altS/ ultur/

*&pectul pa'inii a fi cel din Di'ura 7.10. *!i o$&er at, pro$a$il, c dintre alorile pe care le poate lua atri$utul ali'n lip&e%te aloarea center. Entr,ade r, alinierea unei ima'ini la centrul pa'inii nu &e poate face prin intermediul atri$utului ali'n. 0entrarea unei ima'ini &e poate realiza numai dac e&te izolat de te-tul care o ncon"oar. 6entru acea&ta &e poate folo&i etic+eta L0#F>#5M &au &e poate include ima'inea ntr,un $loc para'raf &au ntr,un $loc L3IUM a (nd atri$utul ali'n &etat la aloarea center. #-emplul 7.5 ilu&treaz ace&t mod de aliniere folo&ind etic+eta L3IUM a&pectul pa'inii fiind cel din Di'ura 7.11. ( emplul <. 1 L=>?@M L=#*3M L>I>@#Mima'ini5LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M0entrarea unui ima'iniLG=1ML=5M Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t. L3IU ali'nS/center/M LI?A &rcS/..GIma'iniGde il.'if/ Cidt+S/64/ +ei'+tS/64/ altS/dracu&or/M LG3IUM Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t.Ima'ine te-t. LG1.3KM LG=>?@M #-emplul 7.6 ilu&treaz modul n care pot fi aliniate dou ima'ini fa! de te-tul din pa'in. 3in Di'ura 7.12 pute!i o$&er a c, dac alinierea la &t(n'a a ima'inii mpreun cu folo&irea atri$utelor +&pace %i &pace conduce la un a&pect ordonat al elementelor, a&pectul te-tului n raport cu ima'inea aliniat la dreapta depinde de dimen&iunea fere&trei $roC&erului. ( emplul <. : L=>?@M L=#*3M L>I>@#Mima'ini6LG>I>@#M LG=#*3M L1.3KM

L=1 ali'nS/center/M*linierea a doua ima'iniLG=1ML=5M LI?A &rcS/..GIma'iniGmtn&cene."p'/ ali'nS/left/ Cidt+S/200/ +ei'+tS/144/ ali'nS/left/ +&paceS/10/ &paceS/10/M Ima'ine te-t. Ima'ine te-t. Ima'ine te-t. Ima'ine te-t.Ima'ine te-t. Ima'ine te-t. Ima'ine te-t. Ima'ine te-t. LI?A &rcS/..GIma'iniG&un&cene."p'/ ali'nS/ri'+t/ Cidt+S/202/ +ei'+tS/132/ +&paceS/10/ &paceS/10/M Ima'ine te-t. Ima'ine te-t. Ima'ine te-t. Ima'ine te-t.Ima'ine te-t. Ima'ine te-t. Ima'ine te-t. Ima'ine te-t.Ima'ine te-t. Ima'ine te-t. Ima'ine te-t. Ima'ine te-t.Ima'ine te-t. Ima'ine te-t. Ima'ine te-t. Ima'ine te-t.Ima'ine te-t. Ima'ine te-t. Ima'ine te-t. Ima'ine te-t.Ima'ine te-t. Ima'ine te-t. Ima'ine te-t. Ima'ine te-t. LG1.3KM LG=>?@M +. (ma&ini 'o!osite ca 'ond 8<ac>&round3 a! pa&inii . ima'ine poate fi utilizat %i pentru a &ta$ili fondul unei pa'ini 4e$. En ace&t &cop &e folo&e%te atri$utul bac;-round al etic+etei L1.3KM, a (nd ca aloare adre&a 75@ a ima'inii. Ima'inea &e multiplic aliniat 9tiling; pe orizontal %i pe ertical p(n umple ntre'ul ecran. #-emplul 7.7 ilu&treaz utilizarea atri$utului $acJ'round. ( emplul <. < L=>?@M L=#*3M L>I>@#Mima'ini7LG>I>@#M LG=#*3M L1.3K $acJ'roundS/..GIma'iniG&ilJ."p'/M L=1 ali'nS/center/MIma'inea ca fond al pa'iniiLG=1ML=5M Dond de mata&e... LG1.3KM LG=>?@M Di'ura 7.13 red a&pectul unei pa'ini care folo&e%te ca fundal o ima'ine. ,. (ma&ini 'o!osite ca !e&*turi 6entru a folo&i o ima'ine drept le'tura &e procedeaz ca n urmtorul e-emplu) L* +refS/ta$elVculori.+tml/M LI?A &rcS/pri&m.'if/ Cidt+S/100/ +ei'+tS/80/ altS/culori/M LG*M 2,a folo&it etic+eta L*M prin intermediul creia am creat le'tura cu fi%ierul ta$elVculori.+tml. Entre etic+etele L*M %i LG*M am inclu& o ima'ine care nlocuie%te te-tul e-plicati pe care izitatorul urmeaz & fac clicJ cu mou&e,ul. Ima'inea &er e%te, deci, ca le'tur ctre o anumit pa'in. Ima'inea folo&it ca le'tura e&te prism)gif iar pa'ina &pre care e&te fcut le'tura e&te tabelGculori)html. En mod pre&ta$ilit ima'inea utilizat pe po&t de zon acti e&te ncon"urat de un c+enar a (nd culoarea unei le'turi 9al$a&tru;. 3ac &ta$ilim pentru atri$utul $order al etic+etei aloarea /0/ ace&t c+enar di&pare. #-emplul 7.8 prezint codul complet.

( emplul <. = L=>?@M L=#*3M L>I>@#Mima'ini8LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M Ima'ini cu le'aturi LG=1ML=5M L15M*m pu& o ima'ine cu le'atura pe pa'inaL6M L* +refS/ta$el culori.+tml/M LI?A &rcS/..GIma'iniGpri&m.'if/ Cidt+S/100/ +ei'+tS/80/ altS/culori/M LG*M LG1.3KM LG=>?@M En Di'ura 7.14 pute!i o$&er a modul n care func!ioneaz ima'inea folo&it ca le'tur n e-emplul de mai &u&. 3. (ma&ini!e miniatura!e 8t/um<nai!s9 3ac ntr,o pa'in 4e$ e&te nece&ar afi%area unui numr mare de ima'ini, ncrcarea pa'inii &e a face de&tul de 'reu. 3e multe ori, izitatorii pa'inii nu or a ea r$darea nece&ar pentru a a%tepta ncrcarea inte'ral a pa'inii. . &olu!ie de compromi& frec ent aplicat pentru &curtarea timpului de ncrcare a unei pa'ini ce prezint multe ima'ini o reprezint utilizarea ima'inilor miniaturale 9thumbnail,uri;. . ima'ine thumbnail e&te o er&iune de dimen&iuni redu&e a unei ima'ini mai mari, care &e ncarc mult mai rapid %i care, de%i e&te de dimen&iuni mici %i de calitate &czut, permite izitatorului & afle ce anume reprezint %i & decid dac e&te intere&at &au nu & de&c+id er&iunea inte'ral.. Ima'inea miniatural reprezint o le'tur &pre fi%ierul cu ima'inea ori'inal din care pro ine. En cazul n care izitatorul pa'inii dore%te & ad ima'inea ori'inal, o poate de&c+ide efectu(nd clicJ ima'inea thumbnail) 5ealizarea ima'inilor miniaturale &e poate face fie prin mic%orarea propor!ional a ima'inilor, fie prin reducerea lor la o dimen&iune pre&ta$ilit 9strech; c+iar dac ima'inea &e di&tor&ioneaz, n cazul n care &e dore%te, de pild, ca toate thumbnail!urile dintr,o pa'in & ai$ acelea%i dimen&iuni. #-i&t dou metode pentru a pla&a o ima'ine thumbnail n pa'in) folo&ind dou ima'ini, una fiind ima'inea thumbnail iar cealalt, ima'inea ori'inal folo&ind o &in'ur ima'ine, redimen&ionat 9mic%orat; direct n pa'in 0o!osirea a dou* ima&ini . ima'ine thumbnail e&te foarte u%or de realizat. .ricare ar fi pro'ramul de 'rafic pe care l folo&i!i, tot ceea ce a e!i de fcut e&te & '&i!i op!iunea Resi8e 9care de o$icei face parte din meniul 5dit &au 'mage; %i & preciza!i n ca&eta de dialo' care &e de&c+ide, dimen&iunile dorite. Ue!i o$&er a c e-i&t de re'ul o op!iune &eta$il pentru p&trarea propor!ionalit!ii cu dimen&iunile. 3ac e&te acti at, dup &ta$ilirea uneia dintre dimen&iuni 9 idth, de e-emplu;, cealalt 9height; e&te calculat automat.

En #-emplul 7.9 e&te pla&at o ima'ine thumbnail n pa'in, folo&ind prima metod, Di'ura 7.15 ilu&tr(nd func!ionarea ima'inii thumbnail. ( emplul <. > L=>?@M L=#*3M L>I>@#Mima'ini9LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M>+um$nail& , doua ima'iniLG=1ML=5M L6M L* +refS/..GIma'iniGzdo'.'if/M LI?A &rcS/..GIma'iniGzdo'Vt+.'if/MLG*M LG1.3KM L=>?@M Di%ierul 8dogGth)gif con!ine ima'inea thumbnail care e&te folo&it ca le'tur, pentru a referi ima'inea ori'inal, 8dog)gif. 3eoarece ima'inea thumbnail e&te folo&it ca o le'tura ctre ima'inea ori'inal, n "urul ei e&te afi%at un c+enar pre&ta$ilit al$a&tru. 3ac dori!i ca ace&t c+enar & nu mai fie afi%at, pute!i folo&i atri$utul $order al etic+etei LI?AM &etat la aloarea /0/. Ima'inea ori'inal &e a de&c+ide n aceea%i ferea&tr cu pa'ina n care e&te pla&at ima'inea thumbnail. 6entru a re eni n pa'in, tre$uie & ap&a!i $utonul 1ack al $roC&erului. 0o!osirea unei sin&ure ima&ini *cea&t metod e&te ade&ea preferat, deoarece folo&e%te un &in'ur fi%ier, cel care con!ine ima'inea ori'inal, miniaturizarea ei fc(ndu,&e c+iar n pa'in, cu a"utorul atri$utelor Cidt+ %i +ei'+t. #&te o metoda mai eficient %i mai rapid, deoarece ima'inea de dimen&iuni mari care urmeaz a fi afi%at e&te de"a ncrcat n memoria cache a $roC&erului %i e&te imediat di&poni$il pentru afi%are. En e-emplul urmtor 9#-emplul 7.10; am folo&it o &in'ur ima'ine pentru a ncrca at(t ima'inea thumbnail c(t %i pe cea cu dimen&iunile ori'inale. *&pectul pa'inii e&te redat n Di'ura 7.16. ( emplul <. 1@ L=>?@M L=#*3M L>I>@#Mima'ini10LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M>+um$nail& , o &in'ura ima'ineLG=1ML=5M L6M L* +refS/..GIma'iniGzdo'.'if/M LI?A &rcS/..GIma'iniGzdo'.'if/ Cidt+S/70/ +ei'+tS/76/MLG*M LG1.3KM L=>?@M 3up cum &e poate o$&er a, am creat un linJ 9cu a"utorul etic+etei L*M; la fi%ierul 8dog)gif care con!ine ima'inea ori'inal. *m folo&it drept le'tur aceea%i ima'ine, dar redimen&ionat, folo&ind atri$utele Cidt+ %i +ei'+t.

En e-emplul anterior, ima'inea thumbnail e&te ncrcat prima. En momentul c(nd izitatorul face click pe ea, e&te ncrcat ima'inea cu dimen&iunile ori'inale. * anta"ul ultimei metode e&te faptul c ima'inea e&te ncrcat de la nceput %i redimen&ionat pentru thumbnail, ceea ce face ca afi%area ima'inii cu dimen&iunile ori'inale & fie mai rapid. 4. (ma&ini!e "ideo 6entru a in&era o ima'ine ideo ntr,un document =>?@ &e folo&e&c atri$utele dGnsrc, controls, loop %i start ale etic+etei LI?AM. *tri$utul dGnsrc nlocuie%te atri$utul &rc %i permite in&erarea n documentul =>?@ a unei ima'ini ideo n acela%i mod n care e&te in&erat o ima'ine &tatic. Ualoarea atri$utului dIn&rc e&te adre&a 75@ a fi%ierului ideo care a fi inclu& n pa'in conform &inta-ei) LI?A dIn&rcS/75@Vfi&ierV ideo/M *ce&t atri$ut e&te o e-ten&ie Internet #-plorer %i nu e&te recuno&cut de $roC&erele Fet&cape. 6entru a izualiza o ima'ine ideo in!line ntr,un $roC&er Fet&cape, izitatorul pa'inii tre$uie & in&taleze un pro'ram au-iliar de tip plug!in. 3ac pro'ramul plug!in nu e&te di&poni$il pe computerul izitatorului, ima'inea ideo nu a putea fi afi%at. 2in'urul format de fi%iere ideo care e&te &uportat de e-ten&iile Internet #-plorer e&te .87 90udio 3ideo 'nterleave;, deoarece ace&ta e&te formatul de redare care e&te inclu& n $roC&er) 0on&truc!ia de mai "o& include ntr,un document =>?@ fi%ierul ideo introducere)avi care &e afl n folderul 3ideo) LI?A dIn&rcS/..GUideoGintroducere.a i/M #fectul ace&tei etic+ete e&te de&c+iderea de ctre $roC&er a unei fere&tre de izualizare n interiorul pa'inii 4e$, ferea&tr n care a rula clipul ideo introducere)avi, inclu&i &unetul, dac ace&ta face parte din clip %i computerul izitatorului e&te &etat & redea &unetele. 0a %i ima'inile o$i%nuite, ima'inea ideo e&te afi%at pe m&ur ce e&te ncrcat. 3eoarece nici un alt $roC&er n afar de Internet #-plorer nu recunoa%te acea&t e-ten&ie, e&te recomandat & include!i n cadrul etic+etei LI?AM %i atri$utul &rc prin care & furniza!i o ima'ine &tatic ce a fi afi%at n acela%i cadru. 1roC&erele care nu recuno&c e-ten&ia dIn&rc or afi%a ima'inea &tatic pe c(nd Internet #-plorer a afi%a ima'inea ideo. .rdinea n care apar cele dou atri$ute nu are importan!. 3e e-emplu) LI?A dIn&rcS/..GUideoGintro.a i/ &rcS/..GIma'iniGintro.'if/M En mod normal, Internet #-plorer red clipul ideo ntr,o ferea&tr n care nu &unt afi%ate nici un fel de $utoane de control. 7tilizatorul poate relua, opri &au continua redarea clipului efectu(nd clicJ dreapta cu mou&e,ul n interiorul fere&trei. 6entru a adu'a $utoane de control ace&tei fere&tre &e utilizeaz atri$utul controls al etic+etei LI?AM. *tri$utul control& nu are alocat nici o aloare, prezen!a &a a (nd doar &copul de a adu'a $utoanele de control a&emntoare celor de la aparatele ideo. 3e e-emplu) LI?A dIn&rcS/..GUideoGintro.a i/ &rcS/..GIma'iniGintro.'if/ control&M

0lipul ideo inclu& n pa'in e&te redat de $roC&er o &in'ur dat, de la nceput p(n la &f(r%it. 6entru a repeta redarea clipului de un anumit numr de ori e&te folo&it atri$utul loop. Ualorile po&i$ile ale atri$utului &unt) un numr ntre' care reprezint numrul de reluri ale clipului infinite, caz n care clipul e&te redat p(n c(nd utilizatorul &topeaz derularea &a ap&(nd $utonul &top al fere&trei de izualizare 9n cazul c(nd ferea&tra con!ine $utoanele de control; &au efectueaz clicJ dreapta cu mou&e,ul n ferea&tra de izualizare. #-emplul de mai "o& ilu&treaz modul n care poate fi &etat atri$utul loop) LI?A dIn&rcS/..GUideoGintro.a i/ &rcS/..GIma'iniGintro.'if/ control& loopS/infinite/M *%a cum am precizat, redarea ima'inii ideo ncepe imediat ce acea&ta a fo&t complet ncrcat n pa'in. 6entru a &c+im$a ace&t comportament &e folo&e%te atri$utul start care poate a ea alorile) mou&eo er, &itua!ie n care derularea ima'inii ideo ncepe n momentul c(nd mou&e,ul e&te pla&at dea&upra ima'inii fileopen, aloarea predefinit, &itua!ie n care derularea ima'inii ncepe imediat dup ncrcarea n pa'in 0ele dou alori pot fi com$inate pentru a &e realiza redarea ima'inii mai nt(i imediat dup ncrcarea n pa'in %i apoi de fiecare dat c(nd mou&e,ul e&te pla&at dea&upra ei, ca n e-emplul urmtor) LI?A dIn&rcS/..GUideoGintro.a i/ &tartS/fileopen, mou&eo er/M &rcS/..GIma'iniGintro.'if/ control& loopS/infinite/

Ima'inile ideo in!line pot fi tratate ca %i ima'inile &tatice. . a&tfel de ima'ine poate fi aliniat folo&ind atri$utul ali-n, &au poate fi &pa!iat fa! de te-tul care o ncon"oar. #-emplul 7.11 ilu&treaz atri$utele prezentate mai &u&. 6a'ina a a ea a&pectul din Di'ura 7.17. ( emplul <. 11 L=>?@M L=#*3M L>I>@#Mima'ini11LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/MIma'ini ideoLG=1ML=5M LD.F> &izeS/4/ colorS/$lue/M0lipul ideo de mai "o& face parte din "ocul =eroe& 3LGD.F>ML6M L0#F>#5M LI?A dIn&rcS/..GUideoG&+ield.a i/ &rcS/..GIma'iniG$anana.'if/ control& &tartS/fileopen, mou&eo er/ loopS/infinite/M LG0#F>#5M LG1.3KM LG=>?@M 1;. Sunete!e 3ac etic+eta LI?AM permite afi%area unei ima'ini de fundal, e-i&t %i o etic+et care realizeaz includerea n pa'ina 4e$ a unei muzici de fundal %i anume etic+eta 54?SB#A69. *cea&t etic+et e&te, de a&emenea, o e-ten&ie Internet #-plorer deci nu e&te recuno&cut %i e-ecutat n alte $roC&ere)

1roC&erul Internet #-plorer con!ine un decodor de &unet ncorporat %i permite inte'rarea prin etic+eta L1A2.7F3M a &unetului de fundal pentru o pa'in. 2inta-a etic+etei L1A2.7F3M e&te urmtoarea) L1A2.7F3 &rcS/75@Vfi&ierV&unet/ loopS/ aloare/M *tri$utul src are drept aloare adre&a 75@ a fi%ierului de &unet care e&te folo&it ca fundal &onor al pa'inii. En mod curent, Internet #-plorer recunoa%te trei tipuri de fi%iere de &unet) fi%iere cu e-ten&ia .%a" care e&te formatul nati pentru 60 fi%iere cu e-ten&ia .au, formatul nati pentru &i&temele 7FIW fi%iere cu e-ten&ia .midi, un format uni er&al acceptat pentru codificarea &unetelor 6entru a include ntr,o pa'in un fi%ier de &unet &e procedeaz ca n e-emplul urmtor) L1A2.7F3 &rcS/..G2unetGCellcome.Ca M 0a %i n cazul ima'inilor ideo in!line, fi%ierul de &unet e&te redat o &in'ur dat, la ncrcarea pa'inii. 6entru redarea &a repetat &e folo&e%te atri$utul loop al etic+etei L1A2.7F3M care poate a ea ca alori) un numr ntre', care reprezint numrul de reluri ale pie&ei infinite, caz n care pie&a muzical e&te reluat p(n c(nd utilizatorul pr&e%te pa'ina &au nc+ide ferea&tra $roC&erului. #-ecuta!i #-emplul 7.12 cu un $roC&er Internet #-plorer pentru a o$&er a efectul etic+etei L1A2.7F3M. 3e&i'ur, e&te nece&ar & &c+im$a!i adre&a 75@ a fi%ierului de &unet &pecific(nd un fi%ier e-i&tent pe +ard,di&J,ul dumnea oa&tr. ( emplul <. 1' L=>?@M L=#*3M L>I>@#Mima'ini12LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M?uzica de fundalLG=1ML=5M L6M LD.F> &izeS/4/ colorS/red/M?uzica &e a auzi pana cand eti inc+ide pa'inaLGD.F>M L1A2.7F3 &rcS/..G2unetG4elcom98.Ca / loopS/infinite/M LG1.3KM LG=>?@M 11. Su&estii pri"ind 'o!osirea ima&ini!or i e!emente!or mu!timedia 0(nd folo&i!i ima'ini ntr,o pa'in 4e$, tre$uie & pune!i ntre$area) /#&te nece&ar acea&t ima'ine &au ar fi &uficient & folo&e&c te-t</. 0+iar dac &e &pune c o ima'ine face c(t o mie de cu inte, ace&t lucru nu e&te ntotdeauna ade rat pe 4e$. Enlocuirea te-tului care con!ine informa!iile e&en!iale dintr,o pa'in 4e$ cu ima'ini e&te ade&ea o 're%eal.

7n prim moti e&te c nc mai e-i&t $roC&ere non,'rafice cum e&te @In-, care nu afi%eaz dec(t te-tul. *poi, c+iar %i n $roC&erele 'rafice, anumi!i utilizatori ar putea opta, din arii moti e, pentru dezacti area afi%rii ima'inilor. 7n alt moti ar fi acela c, din cauza duratei mari de ncrcare a fi%ierelor cu ima'ini de mari dimen&iuni, unii utilizatori ar putea renun!a pur %i &implu la de&c+iderea pa'inii. 8i nu n ultimul r(nd, deoarece, &pre deo&e$ire de te-t, ima'inile pot nt(mpina di er&e dificult!i te+nice la afi%are. Ima'inile dintr,o pa'in 4e$ tre$uie '(ndite ca ni%te in&trumente izuale care au rolul de a &u&!ine %i ilu&tra con!inutul &cri& al pa'inii. 3e e-emplu, ntr,un catalo' on!line ima'inile produ&elor prezentate &unt e&en!iale pentru con!inutul pa'inii re&pecti e. Icon,urile cu rol de le'turi &au in&trumente de na i'a!ie pot reprezenta repere izuale deo&e$it de utile n cadrul unui &ite. 3ar dac o ima'ine nu &er e%te unui &cop $ine definit n pa'in, e $ine & '(ndi!i de dou ori, nainte de a o folo&i. 3e a&emenea &e recomand & fi!i precaut %i n pri in!a ima'inilor folo&ite ca fundal 9background;. Entr,ade r, ace&tea pot oferi un a&pect &pectaculo& pa'inii dumnea oa&tr. En& tre$uie & fi!i con%tient de faptul c o ima'ine folo&it ca fundal a cre%te cu &i'uran! timpul nece&ar ncrcrii pa'inii. 3ac n cazul ima'inilor in!line te-tul &e poate afi%a naintea &au n timpul ncrcrii ima'inii, la ima'inile de fundal afi%area celorlalte elemente din pa'in nu a putea ncepe dec(t dup ncrcarea n ntre'ime a fundalului. ?ai mult, &pre deo&e$ire de ima'inile in!line, care pot m$o'!i con!inutul informa!ional al pa'inilor, ima'inile de fundal nu aduc cu ade rat dec(t foarte rar un &upliment de informa!ie. 3e%i a&pectul unei a&emenea pa'ini poate fi atr'tor, de cele mai multe ori folo&irea ima'inilor de fundal n com$ina!ii nefericite cu fonturi de anumite tipuri &au culori, fr contra&t &uficient, poate face pa'ina ncrcat %i 'reu de citit. 3ac totu%i decide!i & folo&i!i o ima'ine ca fundal al pa'inii e&te recomandat & &pecifica!i &imultan %i o culoare de fundal, adic & &eta!i atri$utul $'color. *&tfel, dac dintr,un moti oarecare ima'inea de fundal nu &e ncarc, pa'ina a a ea totu%i culoarea pre&ta$ilit de dumnea oa&tr. 0a %i ima'inile, %i celelalte elemente multimedia tre$uie folo&ite cu di&cernm(nt ntr,o pa'in 4e$. Ima'inile ideo au dimen&iuni &emnificati mai ari dec(t ima'inile &tatice, deci &e ncarc mult mai ncet dec(t ace&tea a&tfel nc(t includerea lor in!line a mri con&idera$il timpul de ncrcare al pa'inii. En plu&, formatele di er&e utilizate nu pot fi de&c+i&e ntotdeauna cu $roC&erul, unele impun(nd e-i&ten!a unor plug!in,uri &au c+iar unor pro'rame &peciale. . metod de compromi& recomandat e&te de&crierea con!inutului fi%ierului, e entual in&erarea unui fra'ment ideo e-emplificati 9sample; de dimen&iuni mult mai mici, &imilar cum a metodei thumbnail,urilor. 2e a&i'ur o le'tur %i &pre fi%ierul inte'ral, a&tfel nc(t, dup izualizarea e-emplului, izitatorul & poat ale'e dac a a%tepta timpul nece&ar ncrcrii &ale &au nu. ?uzica de fundal e&te de cele mai multe ori nerecomandat. Doarte mul!i izitatori pot izualiza pa'inile dumnea oa&tr a (nd &unetul dezacti at. Dolo&irea unei muzici de fundal ncetine%te

ncrcarea pa'inii %i, n plu&, e&te foarte po&i$il ca muzica pe care a!i ale&,o & nu fie pe 'u&tul celor care iziteaz pa'ina, $a c+iar & i determine & o pr&ea&c nainte de a citi con!inutul ace&teia. 3ac e&te nece&ar, totu%i, & introduce!i muzic &au &unet n pa'inile dumnea oa&tr, e&te o pre edere n!eleapt & pla&a!i fi%ierele de &unet &eparat %i & a&i'ura!i le'turi ctre ace&tea a&tfel nc(t izitatorul & le poat audia, dac dore%te. 12. (ma&ini!e i timpu! de nc*rcare a! pa&inii 7nul dintre cele mai importante a&pecte care tre$uie luate n con&iderare la includerea ima'inilor ntr,un document e&te timpul de nc$rcare a documentului. 3urata de ncrcare a pa'inilor depinde de mul!i factori. 3epinde de modemul %i cone-iunea izitatorului, de performan!ele &er erului 'azd, de trafic, de l!imea de $and, etc. 0um nu pute!i a ea control a&upra ace&tora, &in'urul lucru care rm(ne de fcut e&te & con&trui!i pa'inile a&tfel nc(t & ai$ o $un itez de ncrcare c+iar %i n cazul unui izitator care de!ine o cone-iune mode&t ca performan!e. 6e l(n' ale'erea cu foarte mult 'ri" a ima'inilor care or fi inclu&e n document, mai e-i&t c(te a modalit!i prin care poate fi ameliorat durata de ncrcare a pa'inii) .ptimizarea ima'inilor. Dolo&i!i, n mod "udicio& de in&trumentele de control al ima'inilor pu&e la di&pozi!ie de editorul 'rafic folo&it, optimiza!i dimen&iunile ima'inii %i numrul de culori la c(t mai pu!ine po&i$il. Encerca!i & '&i!i un raport optim ntre dimen&iunea fi%ierului %i calitatea ima'inii. # ita!i foto'rafiile &au ima'inile de fundal de dimen&iuni foarte mari. 5eutilizarea ima'inilor. *cea&t metod e&te eficient mai ale& n cazul icon,urilor &au elementelor 'rafice de na i'a!ie care &unt prezente n mai multe pa'ini pe parcur&ul unui &ite. 0ele mai multe $roC&ere re!in n memoria cache elementele documentelor care urmeaz a fi afi%ate. *&tfel, dac o ima'ine e&te utilizat n mai multe pa'ini acea&ta nu tre$uie ncrcat de fiecare dat n memorie ci e&te di&poni$il pentru a fi afi%at oric(nd &e face referirea la ea. 3i izarea documentelor de dimen&iuni mari n mai multe documente de dimen&iuni redu&e. *cea&t re'ul 'eneral include %i pa'inile care con!in ima'ini in!line. ?ai multe documente de dimen&iuni mai mici le'ate ntre ele prin le'turi &unt mai $ine acceptate de izitatori dec(t un &in'ur document foarte mare care nece&it un timp de ncrcare ndelun'at. 5e'ula 'eneral acceptat e&te men!inerea dimen&iunilor unui document 4e$ n "urul alorii de 50X$, incluz(nd aici %i ima'inile, de&i'ur. Dolo&irea ima'inilor thumbnail. 3ac pa'ina con!ine un mare numr de ima'ini, folo&i!i ima'ini miniaturale care & refere ima'inile ori'inale. En plu&, ntruc(t ima'inea ori'inal referit prin ima'inea thumbnail &e poate de&c+ide ntr,o nou ferea&tr, nefiind a&ociat cu re&tul elementelor din pa'in, e&te mai comod pentru izitator & o &al eze pe computerul propriu pentru o izualizare ulterioar. 2pecificarea dimen&iunile ima'inilor. En ace&t mod e&te e itat etapa calculrii de ctre $roC&er a &pa!iului nece&ar pentru afi%area ima'inii, m$unt!indu,&e iteza de ncrcare a pa'inii. 13. -e.umat

Dormatele cele mai utilizate pentru fi%ierele 'rafice &unt B6#A %i AID. In&erarea unei ima'ini ntr,un document =>?@ &e realizeaz cu a"utorul etic+etei LI?AM. 2inta-a etic+etei LI?AM e&te urmtoarea) LI?A &rcS/75@Vima'ine/ ali'nS/pozitie/ Cidt+S/ aloare/ +ei'+tS/ aloare/ &paceS/ aloare/ +&paceS/ aloare/ altS/te-t/ $orderS/ aloare/ dIn&rcS/75@Vima'ineV ideo/ loopS/ aloare/ &tartS/ aloare/ control&M unde) &rc precizeaz loca!ia ima'inii Cidt+ %i +ei'+t &ta$ile&c dimen&iunile ima'inii &pace %i +&pace &ta$ile&c di&tan!a pe ertical %i orizontal fa! de re&tul te-tului din pa'in ali'n aliniaz ima'inea fa! de te-tul din "urul ei alt furnizeaz un te-t e-plicati a&upra ima'inii $order &ta$ile%te 'ro&imea c+enarului ima'inii dIn&rc introduce o ima'ine ideo %i precizeaz loca!ia ei loop &pecific numrul de reluri ale ima'inii ideo &tart precizeaz momentul nceperii redrii ima'inii control& afi%eaz $utoanele de control ale fere&trei ideo Ima'inile pot fi folo&ite ca fond al pa'inii cu a"utorul atri$utului $acJ'round al etic+etei L1.3KM. . ima'ine poate &er i drept le'tur ctre un alt document =>?@ prin includerea etic+etei LI?AM ntre etic+etele L*M LG*M. . practic de& folo&it e&te in&erarea n pa'in a ima'inilor miniaturale care la e-ecutarea unui click pe ele de&c+id ima'inea ori'inal. ?uzica de fundal poate fi adu'at unui document prin intermediul etic+etei L1A2.7F3M. *le'erea ima'inilor care or fi inclu&e ntr,un document =>?@ tre$uie fcut cu 'ri", n func!ie de rolul ace&tora n &tructura documentului %i a (nd permanent n edere timpul de ncrcare al pa'inii. 14. Test ). a; $; c; :. a; $; c; <. Ce etichet folosim pentru a insera o imagine 6n pagin9 LI?AM L*M L6I0M 0tributul &rc serve7te la4 pozi!ionarea ima'inii n pa'in &ta$ilirea numelui %i loca!iei unde &e afl ima'inea crearea unei le'turi prin intermediul ima'inii 0tributele Cidt+ 7i +ei'+t ale etichetei LI?AM sunt folosite pentru4

a; $; c; =. a; $; c; 4. a; $; c;

dimen&ionarea te-tului alinierea ima'inii cu te-tul dimen&ionarea ima'inii Ce efect are absena atributelor Cidt+ 7i +ei'+t din eticheta LI?AM9 Fu &e afi%eaz ima'inea. Ima'inea &e afi%eaz pe toata &uprafa!a fere&trei $roC&erului. 1roC&erul a%teapt ncrcarea complet a ima'inii nainte de a ncepe afi%area te-tului. Care dintre atributele urmtoare permit afi7area textului 6n ;urul imaginii9 top $ottom middle

1;. Care dintre construciile urmtoare este folosit pentru a stabili ca fond al paginii imaginea rice)gif9 a; $; c; 11. LI?A $acJ'roundS/rice.'if/M LI?A &rcS/rice.'if/ $acJ'roundM L1.3K $acJ'roundS/rice.'if/M Ce reali8ea8 atributul alt 6n urmtoarea construcie9

LI?A &rcS/do'.'if/ altS/catel/M a; $; c; *fi%eaz cu (ntul catel l(n' ima'ine. *fi%eaz cu (ntul catel n &pa!iul rezer at ima'inii. *tri$uie fi%ierului dog)gif numele catel.

12. Care dintre urmtoarele construcii plasea8 imaginea 6n stHnga 7i alinia8 textul 6n ;urul imaginii9 a; $; c; 13. legtur9 a; $; c; 14. a; $; LI?A &rcS/moon.'if/ CrapS/left/M LI?A &rcS/moon.'if/ ali'nS/left/M LI?A &rcS/moon.'ifM ali'nS/Crap/M Care dintre urmtoarele construcii are drept efect folosirea imaginii sign)gif ca L* +refS/&emn.+tml/MLG*MLI?A &rcS/&i'n.'ifM L* &rcS/&emn.+tmlMLI?A +refS/&i'n.'if/MLG*M L* +refS/&emn.+tmlMLI?A &rcS/&i'n.'if/MLG*M &entru a include 6n pagin o imagine video se folose7te urmtoarea construcie4 LI?A &rcS/75@Vima'ine/M LI?A dIn&rcS/75@Vima'ine/M

c;

LI?A ideoS/75@Vima'ine/M

7ma-ini
1. a; '. $; +. c; 0. c; 1. $; :. c; <. $; =. $; >. c; 1@. $;

Capitolul = Liste @i&tele reprezint unele dintre cele mai o$i%nuite elemente dintr,o pa'in 4e$. *ce&tea &unt de&eori folo&ite pentru a prezenta informa!iile n mod or'anizat, ntr,o manier acce&i$il %i u%or de parcur&. #le pot fi de trei tipuri) d; li&te ordonate 9marcate prin numere &au litere;, e; li&te neordonate 9marcate prin cratime, $uline &au alte &im$oluri; f;li&te de de,ini!ii, afi%ate fr nici un fel de marca". En interiorul etic+etelor care delimiteaz o li&t pot fi folo&ite orice alte etic+ete =>?@, cum ar fi etic+ete de formatare a te-tului, le'turi, ima'ini, etc. 1. Liste neordonate . li&t neordonat$ reprezint o colec!ie de elemente nrudite, di&pu&e ntr,o ordine oarecare. 7n e-emplu tipic pentru o pa'in 4e$ e&te o li&t de linJ,uri &pre alte documente. *ce&t tip de li&t e&te de fapt un $loc de te-t delimitat de etic+etele 5#L9 5J#L9 9unordered listSli&t neordonat;. #tic+eta de nc+idere LG7@M e&te o$li'atorie. Diecare element al li&tei e&te introdu& prin etic+eta 5L79 9list item;. 0u toate c etic+eta L@IM e&te o etic+et container, etic+eta &a de nc+idere, LG@IM, e&te op!ional. 3ac nu e&te prezent, la nt(lnirea unei noi etic+ete L@IM &e con&ider c ec+ea etic+et e&te nc+i&. @i&ta a fi afi%at indentat fa! de re&tul pa'inii %i fiecare element al li&tei ncepe pe un r(nd nou. En mod pre&ta$ilit, fiecare element al li&tei a fi marcat 9bulleted; cu /$ulin/. #-emplul 8.1 con&truie%te o li&t neordonat, a&pectul &u fiind cel din Di'ura 8.1. ( emplul =. 1 L=>?@M L=#*3M L>I>@#Mli&te1LG>I>@#M LG=#*3M

L1.3KM L=1 ali'nS/center/M@i&ta neordonataLG=1ML=5M L7@M0ulori L@IM1lacJ L@IM4+ite L@IM5ed L@IMAreen L@IM1lue L@IMKelloC L@IM6urple L@IM*Tua LG7@M LG1.3KM LG=>?@M #tic+etele L7@M %i L@IM pot a ea definit atri$utul tGpe care &ta$ile%te caracterul afi%at n fa!a fiecrui element al li&tei. Ualorile po&i$ile al ace&tui atri$ut &unt) '; circle 9cerc; +; di&c 9di&c plin; , aloarea pre&ta$ilit i; &Tuare 9patrat; @i&ta din #-emplul 8.2 are atri$utul tIpe &etat la aloarea /&Tuare/. @i&ta e&te marcat a%a cum &e poate edea n Di'ura 8.2 ( emplul =. ' L=>?@M L=#*3M L>I>@#Mli&te2LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M*tri$utul tIpe la li&te neordonateLG=1ML=5M L7@ tIpeS/&Tuare/M@im$a"e de pro'ramare L@IM0 L@IM0YY L@IM6a&cal L@IM 1a&ic L@IM6erl LG7@M LG1.3KM LG=>?@M 2etarea atri$utului tIpe pentru un item al li&tei nlocuie%te tipul de marca" cu tipul &pecificat pentru acel item. En Di'ura 8.3 pute!i o$&er a efectul &etrii atri$utului tIpe pentru un item indi idual la li&tei. ( emplul =. + L=>?@M L=#*3M L>I>@#Mli&te3LG>I>@#M LG=#*3M L1.3KM

L=1 ali'nS/center/M*tri$utul tIpe la itemul unei li&te LG=1ML=5M L7@ tIpeS/&Tuare/M@im$a"e de pro'ramare L@IM0 L@IM0YY L@IM6a&cal L@I tIpeS/circle/M1a&ic L@IM6erl LG7@M LG1.3KM LG=>?@M 0orme particu!are de !iste neordonate "; Lista de directoare " e&te o li&t introdu& prin etic+eta 567%9 5J67%9. #tic+eta a fo&t ini!ial utilizat pentru alctuirea li&telor de fi%iere. ?ulte $roC&ere nu fac nici o diferen! ntre etic+etele L3I5M %i L7@M, efectul lor fiind acela%i. J; Lista de meniuri , utilizeaz etic+eta 5M(A#9. 7nele $roC&ere afi%eaz li&ta doar n format u%or diferit fa! de li&tele neordonate, altele n& folo&e&c c+iar un fel de meniu 'rafic de tip pull!do n pentru afi%area ace&tor li&te. 2. Liste ordonate . li&t ordonat$ e&te un $loc de te-t delimitat de etic+etele 5BL9 5JBL9 9ordered list , li&t ordonat;, etic+eta de nc+idere fiind o$li'atorie. Diecare element al li&tei e&te ini!iat de etic+eta 5L79 9list item;. 0a %i n cazul li&telor neordonate, li&ta a fi indentat fa! de re&tul pa'inii 4e$ %i fiecare element al li&tei a ncepe pe o linie nou. 3iferen!a fa! de li&tele neordonate e&te aceea c n ace&t caz marcarea elementelor &e face prin cifre, nu prin &im$oluri. #-emplul 8.4 afi%eaz o li&t ordonat, marcat cu cifre ara$e a&pectul ei fiind cel din Di'ura 8.4. ( emplul =. 0 L=>?@M L=#*3M L>I>@#Mli&te4LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M@i&ta ordonataLG=1ML=5M L.@M0a&ti'atorii concur&ului &unt) L@IM6ope&cu ?aria L@IMIone&cu Ion L@IM1ratu *na LG.@M LG1.3KM LG=>?@M 6entru etic+etele L.@M %i L@IM &e poate &eta atri$utul tGpeR care &ta$ile%te tipul de caractere utilizate pentru ordonarea li&tei. Ualorile po&i$ile ale ace&tui atri$ut &unt) * , pentru ordonare de tipul * , 1 , 0...9litere mari; a , pentru ordonare de tipul a , $ , c...9litere mici;

I , pentru ordonare de tipul I , II , III , IU...9cifre romane mari; i , pentru ordonare de tipul i , ii , iii , i ...9cifre romane mici; 1 , pentru ordonare de tipul 1 , 2 , 3...9cifre ara$e , op!iune pre&ta$ilit; 3e a&emenea etic+eta L.@M poate a ea &etat atri$utul start, care &ta$ile%te aloarea ini!ial a &ec en!ei de ordonare. Ualoarea ace&tui atri$ut tre$uie & fie un numr ntre' poziti . #-emplul 8.5 con&truie%te o li&t numerotat cu cifre romane mari ncep(nd de la pozi!ia a treia. *&pectul pa'inii care con!ine acea&t li&t e&te redat n Di'ura 8.5. ( emplul =. 1 L=>?@M L=#*3M L>I>@#Mli&te5LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M*tri$utul tIpe la li&te ordonateLG=1ML=5M L.@ tIpeS/I/ &tartS/3/M?anuale L@IMI&torie L@IMAeo'rafie L@IM1iolo'ie L@IM0+imie LG.@M LG1.3KM LG=>?@M 0a %i n cazul li&telor neordonate, &etarea atri$utului tIpe pentru un anumit item al li&tei nlocuie%te tipul de numerotare &ta$ilit pentru ntrea'a li&t cu tipul &pecificat pentru acel element. 3. (m<ricarea !iste!or En cadrul unei li&te, fie ea ordonat &au neordonat, &e pot include alte li&te, procedeu numit imbricare. Diecare li&t nou inclu& n precedenta &e a afi%a indentat fa! de ni elul li&tei anterioare. @i&tele pot fi im$ricate n toate modurile dorite, ca n #-emplul 8.6. Di'ura 8.6 red a&pectul li&tei con&truite n ace&t e-emplu. ( emplul =. : L=>?@M L=#*3M L>I>@#Mli&te6LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M@i&te im$ricateLG=1ML=5M L7@M L@IM1ulina 1 L.@M L@IMFumarul 1 L@IMFumarul 2 LG.@M L@IM1ulina 2 L@IM1ulina 3 L7@ tIpeS/&Tuare/M

L@IM6atrat 1 L@IM6atrat 2 L@IM6atrat 3 LG7@M L@IM1ulina 4 LG7@M LG1.3KM LG=>?@M 4. Liste de de'iniii @i&tele de de,ini!ii reprezint un tip &pecial de li&te n care elementele li&tei nu &unt nici numerotate 9ca n li&tele ordonate;, nici marcate prin $uline 9ca n li&tele neordonate; %i care prezint dou ni ele de indentare. @i&tele de defini!ii &unt $locuri de te-t inclu&e ntre etic+etele 56L9 5J6L9 9definition list;, etic+eta de nc+idere fiind o$li'atorie. Diecare element al li&tei e&te introdu& prin etic+eta 56T9 9definition term;. Diecare element introdu& prin etic+eta L3>M con!ine la r(ndul &u un numr de elemente care l define&c, introdu&e prin etic+eta 5669 9definition description;. 0a %i n cazul etic+etei L@IM, etic+etele de nc+idere LG3>M %i LG33M &unt op!ionale. En #-emplul 8.7 e&te con&truit o li&t de defini!ii. ( emplul =. < L=>?@M L=#*3M L>I>@#Mli&te7LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M@i&te de definitiiLG=1ML=5M L3@M L3>MIarna L33MFin'e L33M# fri' L33Mgiua e mai &curta dec(t noaptea L3>M6rima ara L33MFatura &e treze&te la iata L33MInflore&c pomii L33M2e intorc pa&arile calatoare L3>MUara L33M>otul e erde L33M# foarte cald L33Mgiua e mai lun'a dec(t noaptea L3>M>oamna L33M2e coc fructele L33M2e &tran'e recolta L33M0ad frunzele LG3@M LG1.3KM LG=>?@M

*&pectul li&tei de defini!ii de mai &u& e&te cel din Di'ura 8.7. #tic+etele L3@M %i LG3@M marc+eaz nceputul %i &f(r%itul li&tei, termenii care fac parte din li&t 9Iarna, 6rim ara, Uara, >oamna ; &unt introdu%i prin etic+eta L3>M iar defini!iile termenilor, prin etic+etele L33M. 2e pot realiza li&te ale cror elemente & fie linJ,uri, ima'ini &au $locuri de te-t. En #-emplul 8.8, elementele li&tei &unt ima'ini, a%a cum &e poate edea n Di'ura 8.8. ( emplul =. = L=>?@M L=#*3M L>I>@#Mli&te8LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M@i&te de ima'iniLG=1ML=5M L3@M L3>MDlori L33M LI?A &rcS/..GIma'iniGro&e1."p'/ Cidt+S/120/ +ei'+tS/120/M L33M LI?A &rcS/..GIma'iniGoran'ero&e.'if/ Cidt+S/120/ +ei'+tS/120/M L3>M>e-turi L33M LI?A &rcS/..GIma'iniG&ilJ."p'/ Cidt+S/120/ +ei'+tS/120/M L33M LI?A &rcS/..GIma'iniGlace.'if/ Cidt+S/120/ +ei'+tS/120/M LG3@M LG1.3KM LG=>?@M #-emplul 8.9 creeaz dou li&te im$ricate de le'turi. *&pectul pa'inii care con!ine acea&t li&t e&te redat n Di'ura 8.9. 6ute!i te&ta direct func!ionarea li&tei dac a!i &al at fi%ierele =>?@ con&truite la capitolele anterioare &u$ numele &pecificat n $locul L>I>@#M al fiecrui document. En cazul c(nd a!i preferat alte denumiri pentru fi%iere, pute!i &c+im$a numele fi%ierelor prezente n cadrul e-emplului cu propriile dumnea oa&tr fi%iere. ( emplul =. > L=>?@M L=#*3M L>I>@#Mli&te9LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M@i&te de le'aturiLG=1ML=5M L.@ tIpeS/I/M L@IM0ulori L.@M L@IML* +refS/culori1.+tml/M0uloarea fundaluluiLG*M L@IML* +refS/culori2.+tml/M0uloarea te-tuluiLG*M L@IML* +refS/culori3.+tml/M0uloarea le'aturilorLG*M LG.@M

L@IMDonturi L.@M L@IML* +refS/fonturi1.+tml/M#tic+eta D.F>LG*M L@IML* +refS/fonturi2.+tml/M#tic+eta 1*2#D.F>LG*M L@IML* +refS/fonturi4.+tml/M#tic+ete de accentuare a te-tuluiLG*M LG.@M LG.@M LG1.3KM LG=>?@M ). -e.umat Entr,o pa'in 4e$ pot fi introdu&e di er&e tipuri de li&te) l; @i&te neordonate prin etic+eta L7@M LG7@M, marcate prin &im$oluri de tip $uline, cercuri &au ptrate m; @i&te ordonate prin etic+eta L.@M LG.@M marcate prin cifre ara$e, cifre romane mari &au mici, litere mari &au mici n; @i&te de defini!ii prin etic+eta L3@M LG3@M nemarcate #lementele li&telor ordonate %i neordonate &e introduc prin etic+eta L@IM. #lementele li&telor de defini!ii &e introduc prin etic+etele L3>M %i L33M. @i&tele pot con!ine orice tip de elemente) te-t, ima'ini, linJ,uri &au alte li&te 9n ace&t caz o$!in(ndu,&e li&te im$ricate;. +. Test 11. a; $; c; 5ticheta L7@M se folose7te pentru a iniia4 o li&t ordonat o li&t neordonat dou li&te im$ricate

Care dintre urmtoarele afirmaii este fals9 a; $; c; #tic+eta L@IM &er e%te pentru a introduce fiecare element al unei li&te ordonate. #tic+eta L@IM &er e%te pentru a introduce fiecare element al unei li&te neordonate. #tic+eta L@IM &er e%te pentru a introduce fiecare element al unei li&te de defini!ii.

:n construcia L7@ tIpeS/&Tuare/M ce rol are atributul tIpe9 a; $; c; 0on&truie%te o li&t neordonat. 2ta$ile%te caracterul care a fi afi%at n fa!a fiecrui element al li&tei. 0on&truie%te o li&t care are ca elemente ima'ini.

O list ordonat este introdus prin eticheta4 a; L7@M

$; c;

L.@M L3@M

Ce rol are atributul tIpe 6n urmtoarea construcie4 L.@ tIpeS/a/M9 a; $; c; 0on&truie%te o li&t de litere care ncepe cu caracterul /a/. 0on&truie%te o li&t ordonat. 2ta$ile%te faptul c elementele li&tei or fi marcate cu litere mici.

Ce este incorect 6n exemplul urmtor9 L7@M L@IM@im$a"e de pro'ramare L.@M L@IM0YY L@IM6erl L@IMBa a LG.@M L@IM2i&teme de operareM L.@M L@IM?23o& L@IM7niLG7@M LG.@M a; $; c; Fu e&te permi& im$ricarea li&telor neordonate cu li&te ordonate. #&te a$&ent etic+eta de nc+idere LG@IM. #tic+etele L7@M %i L.@M nu &unt nc+i&e corect.

O list de definiii se introduce prin eticheta4 a; $; c; L7@M L3>M L3@M

Care este ordinea corect 6n care se introduc elementele unei liste de definiii9 a; $; c; a; L3@M L3>M L33M $; L33M L3>M L3@M c; L3>M L3@M L33M

Ce reali8ea8 urmtoarea construcie9 L7@M L@IMLI?A &rcS/pic1.'if/M L@IMLI?A &rcS/pic2.'if/M LG7@M a; $; 0on&truie%te o li&t de ima'ini marcate prin $uline. 0on&truie%te o li&t de linJ,uri ctre ima'inile &pecificate.

c;

Fimic, deoarece e&te incorect ca elementele unei li&te & fie ima'ini.

Cum sunt marcate elementele unei liste de definiii9 a; $; c; prin $uline prin numere nu &unt marcate

Liste
1. $; '. c; +. $; 0. $; 1. c; :. c; <. c; =. a; >. a; 1@. c;

Capitolul 9 Tabele
Tabelul e&te un element &tructural de $az n alctuirea unei pa'ini 4e$. En cadrul unui ta$el pot fi inclu&e oricare dintre elementele care fac parte din corpul unui document =>?@) te-t, ima'ini, linii orizontale, titluri, le'turi, alte ta$ele, etc. >a$elele con&tituie un in&trument e-trem de util de or'anizare a pa'inii 4e$, realiz(nd alinierea elementelor %i pla&area lor n locurile dorite de de&i'nerul pa'inii. 7n ta$el e&te o 'ril dreptun'+iular format din linii %i coloane. 0a&eta format la inter&ec!ia unei linii cu o coloan &e nume%te celul$. . linie a ta$elului e&te format dintr,un %ir de celule aliniate pe orizontal, iar o coloan$ e&te format dintr,un %ir de celule aliniate pe ertical. 0elulele ta$elului con!in date 9te-t, ima'ini, linJ,uri;, fiecare celul a (nd propriile op!iuni pentru culoarea fondului, culoarea te-tului, alinierea te-tului etc.

1. Crearea unui tabel

6entru a in&era un ta$el ntr,un document =>?@ &e folo&e&c etic+etele core&pondente <TABLE> </TABLE>. #tic+eta <TABLE> e&te o etic+et container, deci etic+eta de final e&te o$li'atorie. *$&en!a ei face ca ta$elul & nu fie afi%at corect. 6entru a in&era o linie ntr,un ta$el &e folo&e&c etic+etele <TR> </TR> 9table ro ;. Dolo&irea etic+etei de nc+idere </TR> e&te op!ional.

*%a cum &puneam, fiecare linie de ta$el e&te format din mai multe celule ce con!in date. . celul de date &e introduce cu etic+eta <TD> </TD> 9table data;. #tic+eta de nc+idere </TD> e&te de a&emenea op!ional. En #-emplul 9.1 am con&truit un ta$el format din patru linii, fiecare linie a (nd c(te dou celule de date. *&pectul ta$elului e&te redat n Di'ura 9.1.
( emplul >. 1

<HTML> <HEAD> <TITLE>tabele1</TITLE> </HEAD> <BODY> <H1 align="center">Crearea unui tabel</H1><HR> <TABLE> <TR> <TD>celula 11 <TD>celula 11 <TR> <TD>celula 1 <TD>celula <TR> <TD>celula !1 <TD>celula ! <TR> <TD>celula "1 <TD>celula " </TABLE> </BODY> </HTML>

En mod pre&ta$ilit, un ta$el nu are c+enar izi$il. 6entru a adu'a un c+enar unui ta$el, &e utilizeaz atri$utul border al etic+etei <TABLE>. *ce&t atri$ut poate primi ca aloare orice numr ntre' 9inclu&i 0; %i reprezint 'ro&imea n pi-eli a c+enarului ta$elului. 3aca atri$utul b#r$er nu e&te urmat de o aloare atunci c+enarul ta$elului a a ea o 'ro&ime pre&ta$ilit e'al cu 1 pi-el, iar o aloare e'al cu 0 a atri$utului b#r$er &emnific a$&en!a c+enarului. 0(nd atri$utul b#r$er are o aloare nenul c+enarul ta$elului are un a&pect tridimen&ional. En #-emplul 9.2 e&te con&truit un ta$el cu c+enar, a%a cum &e o$&er n Di'ura 9.2. 6entru a te&ta func!ionarea atri$utului b#r$er, nlocui!i n e-emplul de mai "o& aloarea /4/ %i cu alte alori. Fu uita!i ca dup fiecare modificare & &al a!i fi%ierul %i & ap&a!i $utonul Refresh2Reload al $roC&erului.
( emplul >. '

<HTML> <HEAD> <TITLE>tabele </TITLE> </HEAD> <BODY> <H1 align="center">C%enarul unui tabel</H1><HR> <TABLE b#r$er="""> <TR>

<TD>celula <TD>celula <TR> <TD>celula <TD>celula <TR> <TD>celula <TD>celula <TR> <TD>celula <TD>celula </TABLE> </BODY> </HTML>

11 1 1 !1 ! "1 "

0elulele unui ta$el pot con!ine %i alte elemente n afar de te-t) ima'ini, le'turi, formulare, etc. #-emplul 9.3 con&truie%te un ta$el cu dou linii %i dou coloane, celulele ta$elului a (nd drept con!inut ima'ini. *&pectul ta$elului e&te cel din Di'ura 9.3.
( emplul >. +

<HTML> <HEAD> <TITLE>tabele!</TITLE> </HEAD> <BODY> <H1 align="center">Tabel care c#ntine i&agini</H1><HR> <TABLE b#r$er="""> <TR> <TD><IM' (rc="))/I&agini/$#nut)gi*"> <TD><IM' (rc="))/I&agini/gi*t)gi*"> <TR> <TD><IM' (rc="))/I&agini/in+e(t)gi*"> <TD><IM' (rc="))/I&agini/gl#be)gi*"> </TABLE> </BODY> </HTML>

2. Alinierea tabelului n pagin

6entru a alinia un ta$el ntr,o pa'ina 4e$ &e utilizeaz atri$utul align al etic+etei <TABLE>, cu urmtoarele alori po&i$ile)
le*t 9 aloarea pre&ta$ilit; , te-tul care urmeaz dup punctul de in&erare al ta$elului a fi di&pu& n partea dreapt a ta$elului. center , te-tul care urmeaz dup punctul de in&erare al ta$elului a fi afi%at pe toat l!imea pa'inii, imediat &u$ ta$el. rig%t , te-tul care urmeaz dup punctul de in&erare al ta$elului a fi di&pu& n partea &t(n' a ta$elului.

En #-emplul 9.4 e&te ilu&trat con&truirea unui ta$el aliniat la dreapta. 6a'ina a a ea a&pectul din Di'ura 9.4.
( emplul >. 0

<HTML> <HEAD> <TITLE>tabele"</TITLE> </HEAD> <BODY> <H1 align="center">Alinierea tabelului in ,agina</H1><HR> <TABLE b#r$er="!" align="rig%t"> <TR> <TD>celula 11 <TD>celula 1 <TR> <TD>celula 1 <TD>celula </TABLE> Ace(t te-t e(te ,la(at in (tanga tabelului </BODY> </HTML>

3i&tan!a dintre ta$el %i celelalte elemente din pa'ina 4e$ poate fi &ta$ilit cu a"utorul atri$utelor
hspace %i vspace al etic+etei <TABLE>. Ualoarea atri$utului %(,ace poate fi orice numr poziti , inclu&i 0, %i reprezint di&tan!a pe

orizontal dintre ta$el %i celelalte elemente ale pa'inii 4e$. *nalo', aloarea atri$utului +(,ace reprezint di&tan!a pe ertical dintre ta$el %i celelalte elemente ale pa'inii. *tri$utele %(,ace %i +(,ace &unt recuno&cute numai de $roC&erele Fet&cape. #-emplul 9.5 ilu&treaz utilitatea celor dou atri$ute.
( emplul >. 1

<HTML> <HEAD> <TITLE>tabele.</TITLE> </HEAD> <BODY> <H1 align="center">/,atierea tabelului *ata $e re(tul te-tului </H1><HR> Tabelul $e &ai 0#( e(te (,atiat ,e +erticala *ata $e ace(t te-t cu 1. ,i-eli) Tabelul $e &ai 0#( e(te (,atiat ,e +erticala *ata $e ace(t te-t cu 1. ,i-eli) Tabelul $e &ai 0#( e(te (,atiat ,e +erticala *ata $e ace(t te-t cu 1. ,i-eli<BR> <TABLE b#r$er align="le*t" +(,ace="1." %(,ace="11"> <TR> <TD>celula 11 <TD>celula 1 <TR> <TD>celula 1 <TD>celula </TABLE> Ace(t te-t e(te ,la(at in $rea,ta tabelului la $i(tanta $e 11 ,i-eli ,e #ri2#ntala *ara $e tabel) Ace(t te-t e(te ,la(at in $rea,ta tabelului la $i(tanta $e 11 ,i-eli ,e #ri2#ntala *ara $e tabel) Ace(t te-t e(te ,la(at in $rea,ta tabelului la $i(tanta $e 11 ,i-eli ,e #ri2#ntala *ara $e tabel) </BODY> </HTML>

6entru a o$&er a efectul celor dou atri$ute edita!i ace&t e-emplu %i izualiza!i,l cu un $roC&er Fet&cape. *tri$utele nefiind recuno&cute de Internet #-plorer, a&pectul pa'inii la izualizarea cu ace&t $roC&er a fi cel din Di'ura 9.5.

3. Dimensionarea unui tabel

3imen&iunile unui ta$el , l!imea %i nl!imea , pot fi &ta$ilite e-act prin intermediul atri$utelor
width %i height ale etic+etei <TABLE>.

Ualorile ace&tor atri$ute pot fi) numere ntre'i poziti e reprezent(nd l!imea re&pecti nl!imea n pi-eli a ta$elului numere ntre'i ntre 1 %i 100, urmate de &emnul :, reprezent(nd procente din l!imea %i nl!imea total a pa'inii. Iat un e-emplu de ta$el cu nl!imea de 200 de pi-eli %i l!imea e'al cu 50: din l!imea pa'inii 9#-emplul 9.6;
( emplul >. :

<HTML> <HEAD> <TITLE>tabele3</TITLE> </HEAD> <BODY> <H1 align="center">Di&en(i#narea unui tabel</H1><HR> Tabel cu lungi&ea $e .14 $in ,agina (i inalti&ea $e 11 $e ,i-eli<5> <TABLE b#r$er 6i$t%=".14" %eig%t=" 11"> <TR> <TD>celula 11 <TD>celula 1 <TR> <TD>celula 1 <TD>celula </TABLE> </BODY> </HTML>

*&pectul ta$elului con&truit n documentul de mai &u& e&te cel din Di'ura 9.6. 3imen&iunile unui ta$el includ %i aloarea dat atri$utului b#r$er. 3e e-emplu, un ta$el cu o &in'ur linie %i o &in'ur coloan, cu dimen&iunile 6i$t%="111"7 %eig%t=".1" %i a (nd atri$utul b#r$er &etat la aloarea 10, a a ea drept &pa!iu util 80 de pi-eli pe l!ime %i 30 de pi-eli pe nl!ime. 7na dintre cele mai frec ente utilizri a ta$elelor e&te pozi!ionarea unui te-t ntr,o anumit zon a pa'inii, prin realizarea unui ta$el fr c+enar 9b#r$er="1"; cu o &in'ur linie %i o &in'ur coloan, ca n #-emplul 9.7.
( emplul >. <

<HTML> <HEAD>

<TITLE>tabele8</TITLE> </HEAD> <BODY> <H1 align="center">5#2iti#narea unui te-t</H1> <TABLE b#r$er="1" 6i$t%="314" %eig%t="1114" align="center"> <TR> <TD> Ace(t te-t e(te ,#2iti#nat in centrul ,aginii) Ace(t te-t e(te ,#2iti#nat in centrul ,aginii) Ace(t te-t e(te ,#2iti#nat in centrul ,aginii) Ace(t te-t e(te ,#2iti#nat in centrul ,aginii) Ace(t te-t e(te ,#2iti#nat in centrul ,aginii) </TABLE> </BODY> </HTML>

En Di'ura 9.7 e&te redat a&pectul ta$elului con&truit mai &u&.

4. Spaierea celulelor unui tabel

3i&tan!a dintre dou celule ecine &e define%te cu a"utorul atri$utului cellspacing al etic+etei
<TABLE>.

Ualorile ace&tui atri$ut pot fi numere ntre'i poziti e, inclu&i 0, %i reprezint di&tan!a n pi-eli dintre dou celule ecine. Ualoarea pre&ta$ilit a atri$utului cell(,acing e&te de 2 pi-eli. #-emplul 9.8 ilu&treaz func!ionarea atri$utului cell(,acing. *&pectul ta$elului e&te cel din Di'ura 9.8. 6ute!i modifica aloarea atri$utului cell(,acing pentru a o$&er a cum &e &pa!iaz celulele n func!ie de alorile pe care le da!i.
( emplul >. =

<HTML> <HEAD> <TITLE>tabele9</TITLE> </HEAD> <BODY> <H1 align="center">/,atierea celulel#r</H1><HR> <TABLE b#r$er="!" cell(,acing="11"> <TR> <TD>Maria <TD>B#g$an <TR> <TD>Ale-an$ru <TD>Irina </TABLE> </BODY> </HTML>

3i&tan!a dintre mar'inea unei celule %i con!inutul ei poate fi definit cu a"utorul atri$utului
cellpadding al etic+etei <TABLE>. Ualorile ace&tui atri$ut pot fi numere ntre'i poziti e, %i

reprezint di&tan!a n pi-eli dintre mar'inile celulei %i con!inutul ei. Ualoarea pre&ta$ilit a atri$utului cell,a$$ing e&te 1 pi-el. #-emplul 9.9 con&truie%te un ta$el n care di&tan!a dintre mar'inea celulelor %i con!inutul lor e&te de 20 de pi-eli. *&pectul ace&tui ta$el e&te cel din Di'ura 9.9.

( emplul >. >

<HTML> <HEAD> <TITLE>tabele:</TITLE> </HEAD> <BODY> <H1 align="center"> /,atierea te-tului in celule</H1><HR> <TABLE b#r$er cell,a$$ing=" 1"> <TR> <TD>Maria <TD>B#g$an <TR> <TD>Ale-an$ru <TD>Irina </TABLE> </BODY> </HTML>

5. Dimensionarea celulelor unui tabel

3imen&iunile unei celule de tip <TD> &au de tip <TH> 9 ezi mai "o& etic+eta <TH>; pot fi &ta$ilite e-act cu a"utorul a dou atri$ute ale ace&tor etic+ete) width pentru l!ime %i height pentru nl!ime. Ualorile po&i$ile ale ace&tor atri$ute &unt)
numere ntre'i poziti e 9inclu&i 0; reprezent(nd dimen&iunea n pi-eli a l!imii, re&pecti a nl!imii unei celule procente din l!imea , re&pecti nl!imea ta$elului.

En #-emplul 9.10 am dimen&ionat celula 11 la l!imea de 20: din l!imea ta$elului %i nl!imea e'al cu 75: din nl!imea lui. *%a cum &e poate o$&er a din Di'ura 9.10 dimen&ionarea indi idual a unei celule a afecta dimen&ionarea tuturor celulelor din linia %i coloana din care face parte celula re&pecti . 2e o$&er c celula 12 are l!imea e'al cu re&tul de 80: din l!imea ta$elului. 0elula 21 aflat pe aceea%i coloana cu celula dimen&ionat are acelea%i dimen&iuni ca %i ea.
( emplul >. 1@

<HTML> <HEAD> <TITLE>tabele11</TITLE> </HEAD> <BODY> <H1 align="center">Di&en(i#narea celulel#r</H1><HR> Tabel cu celule $i&en(i#nate in$i+i$ual<5> <TABLE b#r$er> <TR> <TD 6i$t%=" 14" %eig%t="8.4">celula 11 <TD>celula 1 <TR> <TD>celula 1 <TD>celula </TABLE> </BODY> </HTML>

6. Alinierea coninutului unei celule

*linierea pe orizontal a con!inutului unei celule &e face cu a"utorul atri$utului align care poate lua alorile)
le*t , la &t(n'a center , centrat , aloarea pre&ta$ilit rig%t , la dreapta

*linierea pe ertical a con!inutului unei celule &e face cu a"utorul atri$utului valign care poate lua alorile)

ba(eline , la $az b#tt#& , "o& &i$$le , la mi"loc, aloarea pre&ta$ilit t#, , &u&

*ce&te atri$ute pot fi ata%ate at(t etic+etei <TR> pentru a defini alinierea tuturor celulelor unei linii, c(t %i etic+etelor <TD> %i <TH> 9 ezi mai "o& etic+eta <TH>; pentru a &ta$ili alinierea te-tului ntr, o &in'ur celul. En #-emplul 9.11 e&te ilu&trat func!ionarea atri$utelor align %i +align. >e-tul din celulele primei, celei de,a doua %i celei de,a patra linii a fo&t aliniat prin atri$utul align a&ociat liniei, iar te-tul din celulele liniei a treia a fo&t aliniat prin atri$utul align a&ociat fiecrei celule n parte. *&pectul ta$elului e&te cel din Di'ura 9.11.
( emplul >. 11

<HTML> <HEAD> <TITLE>tabele11</TITLE> </HEAD> <BODY> <H1 align="center"> Alinierea c#ntinutului celulel#r</H1><HR> <TABLE b#r$er 6i$t%=".14" %eig%t="914"> <TR align="rig%t"> <TD>$rea,ta <TD>$rea,ta <TR align="center"> <TD>centru <TD>centru <TR> <TD +align="t#,">(u( <TD +align="b#tt#&">0#( <TR align="le*t"> <TD>(tanga <TD>(tanga </TABLE> </BODY> </HTML>

3ac e&te prezent un atri$ut de aliniere ata%at etic+etei <TR> %i pe linia re&pecti o anumit celul are propriul &u atri$ut de aliniere, atri$utul de aliniere a&ociat etic+etei <TD> are prioritate fa! de cel a&ociat etic+etei <TR>.

7. De inirea culorilor pentru un tabel

0uloarea de fond a unui ta$el &e &ta$ile%te cu a"utorul atri$utului bgcolor, care poate fi ata%at dup cum urmeaz)
ntre'ului ta$el prin etic+eta <TABLE>, unei linii prin etic+eta <TR> unei celule de date prin etic+eta <TD>

Ualorile pe care le poate primi atri$utul bgc#l#r &unt cele cuno&cute pentru culori. 3ac ntr,un ta$el &unt definite mai multe atri$ute bgc#l#r, atunci prioritatea e&te, n ordine de&cre&ctoare, urmtoarea) 1. 2. 3.
<TD> <TR> <TABLE> <,ri#ritatea cea &ai &ica;

En #-emplul 9.12 e&te ilu&trat folo&irea atri$utului bgc#l#r.

( emplul >. 1'

<HTML> <HEAD> <TITLE>tabele1 </TITLE> </HEAD> <BODY> <H1 align="center">Cul#ri in tabel</H1><HR> <TABLE b#r$er="." bgc#l#r="li&e"> <TR> <TD>celula 11 +er$e <TD bgc#l#r="re$">celula 1 r#(u <TR bgc#l#r="blue"> <TD>celula 1 alba(tru <TD bgc#l#r="=ell#6">celula galben <TR bgc#l#r="c=an"> <TD>celula !1 c=an <TD>celula ! c=an <TR> <TD>celula "1 +er$e <TD bgc#l#r="6%ite">celula " alb </TABLE> </BODY> </HTML>

3in Di'ura 9.12 pute!i o$&er a cum func!ioneaz prioritatea atri$utului bgc#l#r. *&tfel, culoarea ntre'ului ta$el a fo&t &ta$ilit prin etic+eta)
<TABLE bgc#l#r="li&e">

3ac o linie nu are &ta$ilit nici o alta culoare, culoarea liniei e&te erde de&c+i&. 6entru linia a doua a ta$elului e&te &ta$ilit culoarea al$a&tru)

<TR bgc#l#r="blue">)

0elulele care fac parte din acea&ta linie %i care nu au &ta$ilit o alta culoare, or fi al$a&tre 9celula 21;. 0elelalte celule or a ea culoarea &ta$ilit e-plicit pentru ele 9celula 22 a fi 'al$en;)
<TD bgc#l#r="=ell#6">

7n ta$el poate a ea drept fundal nu numai o culoare, ci %i o ima'ine. *ce&t efect &e o$!ine folo&ind atri$utul background al etic+etei <TABLE>, atri$utul primind ca aloare adre&a 75@ a ima'inii. *tri$utul bac>gr#un$ poate fi ata%at %i unei linii, &ta$ilind fundalul tuturor celulelor din linia re&pecti precum %i unei celule indi iduale, n ace&t caz &ta$ilind fundalul acelei celule. #-emplul 9.13 ilu&treaz ace&t atri$ut, ta$elul a (nd a&pectul redat n Di'ura 9.13.
( emplul >. 1+

<HTML> <HEAD> <TITLE>tabele1!</TITLE> </HEAD> <BODY> <H1 align="center">?un$alul unui tabel</H1><HR> <TABLE b#r$er="." 6i$t%=" 11" %eig%t="1 1" bac>gr#un$="))/I&agini/lace)gi*> <TR> <TD>celula 11 <TD>celula 1 <TR> <TD>celula 1 <TD>celula </TABLE> </BODY> </HTML>

0ulorile c+enarului unui ta$el &e pot &ta$ili folo&ind atri$utele)

bordercolor , permite &ta$ilirea culorii pentru c+enarul unui ta$el bordercolorlight , permite &ta$ilirea culorii mar'inilor din &t(n'a %i de &u& ale ta$elului bordercolordark , permite &ta$ilirea culorii mar'inilor din dreapta %i de "o& ale ta$elului

0uloarea te-tului din fiecare celul &e poate &ta$ili cu a"utorul e-pre&iei)
<?O@T c#l#r="AR'B (au nu&eBcul#are">te-t</?O@T>)

#-emplul 9.14 ilu&treaz folo&irea ace&tor atri$ute, a&pectul ta$elului fiind cel din Di'ura 9.14.
( emplul >. 10

<HTML> <HEAD> <TITLE>tabele1"</TITLE> </HEAD> <BODY>

<H1 align="center">Cul#rile c%enarului unui tabel</H1><HR> <TABLE b#r$er="11" b#r$erc#l#r$ar>="blue" b#r$erc#l#rlig%t="c=an"> <TR> <TD><?O@T c#l#r="green">celula 11</?O@T> <TD><?O@T c#l#r="blue">celula 1 </?O@T> <TD><?O@T c#l#r="re$">celula 1!</?O@T> <TR> <TD><?O@T c#l#r="teal">celula 1</?O@T> <TD><?O@T c#l#r="&agenta">celula </?O@T> <TD><?O@T c#l#r="li&e">celula !</?O@T> </TABLE> </BODY> </HTML>

*m &etat 'ro&imea c+enarului ta$elului la aloarea de 10 pi-eli, pentru a a ea un a&pect tridimen&ional mai pronun!at. 0u a"utorul atri$utului b#r$erc#l#r$ar> am &ta$ilit culoarea pr!ii /um$rite/ a c+enarului 9mar'inile de "o& %i din dreapta; iar cu a"utorul atri$utului b#r$erc#l#rlig%t, culoarea pr!ii /luminate/ a ace&tuia 9mar'inile de &u& %i din &t(n'a; iar te-tul din celule l,am &cri& cu culori diferite, folo&ind etic+eta <?O@T>. 0ulorile &ta$ilite pentru c+enarul e-terior al ta$elului &unt folo&ite %i pentru a colora liniile de&pr!itoare dintre celulele ta$elului. 6entru ace&tea partea /um$rit/ e&te format din muc+iile de &u& %i din &t(n'a iar partea /luminat/ e&te format din muc+iile de "o& %i din dreapta. 3ac dorim & colorm &eparat muc+iile care de&part liniile &au celulele ta$elului putem a&ocia atri$utele b#r$erc#l#r, b#r$erc#l#r$ar> %i b#r$erc#l#rlig%t etic+etelor <TR> %i <TD>. .ten!ieH *tri$utele b#r$erc#l#r, b#r$erc#l#r$ar> %i b#r$erc#l#rlig%t nu &unt recuno&cute de $roC&erul Fe&cape. Uizualiza!i pa'ina de mai &u& cu un $roC&er Fet&cape pentru a o$&er a a&pectul ei.

!. "itlul unui tabel

7nui ta$el i &e poate ata%a un titlu cu a"utorul etic+etei <CA T!"#> 9table captionStitlu ta$el;. *cea&t etic+et tre$uie pla&at n interiorul etic+etelor <TABLE> </TABLE>, dar nu n interiorul etic+etelor <TR> &au <TD>. >itlul unui ta$el poate fi aliniat cu a"utorul atri$utului align al etic+etei <CA5TIO@> care poate lua una dintre alorile)

b#tt#& , &u$ ta$el t#, , dea&upra ta$elului le*t , dea&upra, la &t(n'a ta$elului rig%t , dea&upra, la dreapta ta$elului

En #-emplul 9.15 titlul ta$elului e&te aliniat dea&upra &a. *&pectul pa'inii e&te cel din Di'ura 9.15.
( emplul >. 11

<HTML> <HEAD>

<TITLE>tabele1.</TITLE> </HEAD> <BODY> <H1 align="center">Titlul unui tabel</H1><HR> <TABLE b#r$er><CA5TIO@ align="t#,">Ma(ini <TR> <TD>Merce$e( <TD>Citr#en <TD>Caguar <TR> <TD>BMD <TD>E#l+# <TD>Renault </TABLE> </BODY> </HTML>

#. Capul $e tabel
7n ta$el poate a ea celule cu &emnifica!ia de cap de ta$el. *ce&te celule &unt introdu&e de etic+eta <T$> 9tabel headerScap de ta$el; n loc de <TD>. >oate atri$utele care pot fi ata%ate etic+etei <TD> pot fi de a&emenea ata%ate %i etic+etei <TH>. 0on!inutul celulelor definite cu <TH> e&te &cri& cu caractere aldine %i centrat. #-emplul 9.16 ilu&treaz modul n care &e pot in&era celule cu rol de cap de ta$el. 6ute!i o$&er a din e-emplu c elementele cu rol de cap de ta$el pot fi pla&ate at(t pe orizontal c(t %i pe ertical. *&pectul ta$elului e&te redat n Di'ura 9.16.
( emplul >. 1:

<HTML> <HEAD> <TITLE>tabele13</TITLE> </HEAD> <BODY> <H1 align="center">Ca,ul $e tabel</H1><HR><5> <TABLE b#r$er><CA5TIO@ align="b#tt#&">5returi &a(ini <TR> <TH>5ret <TH>Citr#en <TH>Caguar <TH>BMD <TH>E#l+# <TR> <TH>In $#lari <TD>.111 <TD>111111 <TD>.1111 <TD>91111 <TR> <TH>In lei <TD>. <TD>111 <TD>.1 <TD>91

</TABLE> </BODY> </HTML>

1%. "abele $e orme oarecare

#-i&t &itua!ii c(nd dorim ca o celul & &e e-tind pe&te celulele ecine, pe orizontal &au pe ertical. En ace&t mod &e o$!ine o &in'ur celul cu &uprafa!a e'al cu &uma &uprafe!elor celulelor ini!iale. *ce&t lucru &e poate realiza cu a"utorul atri$utelor colspan %i rowspan ale etic+etelor <TD> %i <TH>. *&tfel)
colspan , realizeaz e-tinderea unei celule pe&te celulele din dreapta ei. Ualoarea atri$utului

determin numrul de celule care &e unific. rowspan , realizeaz e-tinderea unei celule pe&te celulele de &u$ ea. Ualoarea atri$utului determin numrul de celule care &e unific. 2unt po&i$ile e-tinderi &imultane ale unei celule pe orizontal %i pe ertical. En ace&t caz, n etic+etele <TD> &au <TH> or fi prezente am$ele atri$ute c#l(,an %i r#6(,an. #-emplul 9.17 ilu&treaz modul cum &e realizeaz un ta$el cu celule unificate.
( emplul >. 1<

<HTML> <HEAD> <TITLE>tabele18</TITLE> </HEAD> <BODY> <H1 align="center">Tabele cu *#r&a #arecare</H1><HR> <TABLE b#r$er> <TR> <TD r#6(,an="!">celula 11<BR>celula 1<BR>celula !1 <TD>celula 1 <TD c#l(,an=" " r#6(,an="!">celula 1! 7 celula 1"<BR>celula !7 celula "<BR>celula !!7 celula !" <TR> <TD>celula <TR> <TD>celula ! <TR> <TD>celula "1 <TD c#l(,an="!">celula " 7 celula "!7 celula "" </TABLE> </BODY> </HTML>

>a$elul con&truit n ace&t e-emplu are 4 linii %i 4 coloane. *%a cum &e ede n Di'ura 9.17, prin folo&irea atri$utelor c#l(,an %i r#6(,an confi'ura!ia ta$elului &,a modificat a&tfel) celula 11 &,a e-tin& n "o& pe&te celulele 21 %i 31 9<TD r#6(,an="!">;, celula 12 a rma& nemodificat, celula 13 &,a e-tin& at(t &pre dreapta pe&te celula 14 c(t %i n "o&, pe&te celulele 23 %i 24 9<TD c#l(,an=" " r#6(,an="!">;.

0elulele 22, 32 %i 41 au rma& nemodificate iar celula 42 &,a e-tin& &pre dreapta pe&te celulele 43 %i 44 9<TD c#l(,an="!">) #tic+etelor <TD> %i <TH> li &e poate ata%a atri$utul nowrap. #l interzice a"u&tarea automat a lun'imii unei linii de te-t, a&tfel nc(t n ta$el pot aprea coloane cu o l!ime oric(t de mare. 7n ta$el n care e&te folo&it atri$utul n#6ra, e&te cel con&truit n #-emplul 9.18. *&pectul ta$elului e&te redat n Di'ura 9.18.
( emplul >. 1=

<HTML> <HEAD> <TITLE>tabele19</TITLE> </HEAD> <BODY> <H1 align="center"> Atributul n#6ra,</H1><HR> <TABLE b#r$er> <TR> <TD>celula 11 <TD>celula 1 <TR> <TD>celula 1 <TD n#6ra,>celula Te-tul $in acea(ta celula e(te *#arte lung </TABLE> </BODY> </HTML>

11. Celule r coninut

3ac un ta$el are celule fr con!inut 9celule ide;, atunci ace&te celule or aprea n ta$el fr un c+enar de delimitare. En &copul de a afi%a un c+enar pentru celulele ide &e poate proceda a&tfel)
dup etic+eta <TD> &e adau' %nbsp& dup etic+eta <TD> &e adau' <BR>

0aracterul Fnb(,G 9no break space; e&te, a%a cum am zut la capitolul *ormatarea te tului, caracterul &pa!iu. 7n &pa!iu introdu& prin intermediul ace&tui caracter nu a fi i'norat de $roC&er) En #-emplul 9.19 e&te ilu&trat modul n care pot fi create celule fr con!inut care & ai$ totu%i c+enar de delimitare. 3up cum o$&er a!i din Di'ura 9.19, celula 23 nu are c+enar de delimitare. 0elulele de pe a doua linie a ta$elului &unt ide dar au c+enar deoarece am folo&it Fnb(, %i <BR>.
( emplul >. 1>

<HTML> <HEAD> <TITLE>tabele1:</TITLE> </HEAD> <BODY> <H1 align="center">Celule *ara c#ntinut</H1><HR> <TABLE b#r$er> <TR> <TD>celula 11

<TD>celula 1 <TD>celula 1! <TR> <TD>Fnb(,G <TD><BR> <TD> </TABLE> </BODY> </HTML>

12. &rupuri $e coloane

#tic+etele <C"L'R"( > </C"L'R"( > permit definirea unui 'rup de coloane n cadrul unui ta$el. *tri$utele acceptate de <COL'ROH5> &unt)
span , determin numrul de coloane dintr,un 'rup width , determin o l!ime unic pentru coloanele din 'rup align , determin un tip unic de aliniere pentru coloanele din 'rup

3e e-emplu)
<COL'ROH5 (,an="!" 6i$t%="111"></COL'ROH5>

*m definit a&tfel un 'rup de trei coloane, fiecare a (nd l!imea de 100 de pi-eli. Entr,un $loc <COL'ROH5>, coloanele pot a ea confi'urri diferite dac &e utilizeaz etic+eta <C"L>, care admite atri$utele)
span , identific acea coloan din 'rup pentru care &e face confi'urarea. 3ac lip&e%te, atunci

coloanele &unt confi'urate n ordine. width , determin l!imea coloanei identificate prin (,an) align , determin alinierea con!inutului coloanei identificate prin (,an) 0el mai $ine pute!i n!ele'e func!ionarea ace&tei etic+ete din #-emplul 9.20. >a$elul din ace&t e-emplu are dimen&iunile de 420 de pi-eli l!ime %i 200 de pi-eli nl!ime %i e&te format din dou linii %i patru coloane. En ta$el a fo&t delimitat un 'rup de trei coloane 9primele trei coloane; prin etic+eta <COL'ROH5> iar n cadrul ace&tui 'rup au fo&t definite l!imea %i alinierea te-tului din fiecare coloane n parte. 0ea de,a patra coloan a ta$elului nu face parte din 'rupul de coloane. 3up nc+iderea etic+etei <COL'ROH5>, celulele de date au fo&t introdu&e n mod normal, cu a"utorul etic+etei <TD>.
( emplul >. '@

<HTML> <HEAD> <TITLE>tabele 1</TITLE> </HEAD> <BODY> <H1 align="center">'ru,uri $e c#l#ane</H1><HR> <TABLE b#r$er 6i$t%="" 1" %eig%t=" 11"> <COL'ROH5> <COL 6i$t%="31" align="le*t">

<COL 6i$t%="1 1" align="center"> <COL 6i$t%="191" align="rig%t"> </COL'ROH5> <TR> <TD +align="t#,">celula 11 <TD>celula 1 <TD +align="b#tt#&">celula 1! <TD>celula 1" <TR> <TD>celula 1 <TD>celula <TD>celula !! <TD>celula !" </TABLE> </BODY> </HTML>

3in Di'ura 9.20 &e poate o$&er a c n cadrul celulei 11 e&te re&pectat alinierea la &t(n'a a te-tului, deoarece ea a fo&t &etata ca atare prin con&truc!ia <COL 6i$t%="31" align="le*t">)
In ,lu(7 Jn ca$rul etic%etei <TD> a *#(t (tabilita Ki alinierea ,e +erticala a te-tului $in celulL7 atributul +align ,ri&in$ +al#area "t#,") In celula 1 nu e(te (etat atributul +align a(t*el JncMt te-tul re(,ectL alinierea (tabilitL ,rin c#n(trucNia <COL 6i$t%="1 1" align="center">) In celula 1! alinierea ,e #ri2#ntalL a te-tului e(te (tabilitL ,rin c#n(trucNia <COL 6i$t%="191" align="rig%t"> iar alinierea ,e +erticalL e(te (etatL Jn ca$rul etic%etei <TD> la +al#area "b#tt#&") Din *igurL (e &ai #b(er+L cL t#ate celulele care *ac ,arte $in c#l#anele inclu(e Jn bl#cul <COL'ROH5> re(,ectL (etLrile *Lcute Jn ca$rul ace(tui bl#c <celulele 17 Ki !;) Celulele 1" Ki " care *#r&ea2L c#l#ana a ,atra a tabelului neinclu(L Jn gru,ul $e c#l#ane7 re(,ectL atributele $e aliniere (,eci*icate Jn ca$rul etic%etei <TD>7 $acL e-i(tL)

#tic+eta <COL'ROH5> nu e&te recuno&cut de $roC&erele Fet&cape %i prin urmare nici atri$utele le'ate de dimen&ionarea coloanelor %i alinierea te-tului n interiorul lor.

13. Atribute pentru aspectul c'enarului unui tabel

1tri<utu! frame *tri$utul )ra*e al etic+etei <TABLE> permite &pecificarea laturilor din c+enarul unui ta$el care or fi izi$ile. Ualorile po&i$ile ale ace&tui atri$ut &unt)
+#i$ , elimin toate muc+iile e-terioare ale ta$elului ab#+e , afi%eaz o muc+ie n partea &uperioar a cadrului ta$elului bel#6 , afi%eaz o muc+ie n partea inferioar a cadrului ta$elului

%(i$e( , afi%eaz c(te o muc+ie n partea &uperioar %i inferioar cadrului ta$elului +(i$e( , afi%eaz o muc+ie n partea din &t(n'a %i din dreapta a cadrului ta$elului l%( , afi%eaz o muc+ie n partea din &t(n'a a cadrului ta$elului r%( , afi%eaz o muc+ie n partea din dreapta a cadrului ta$elului b#- , afi%eaz o muc+ie pe toate laturile cadrului ta$elului

1tri<utu! rules *tri$utul rules al etic+etei <TABLE> permite ale'erea unor delimitatori pentru celulele unui ta$el. Ualorile po&i$ile &unt)

n#ne , elimin toate muc+iile interioare ale ta$elului r#6( , afi%eaz muc+ii orizontale ntre toate liniile ta$elului c#l( , afi%eaz muc+ii erticale ntre toate coloanele ta$elului all , afi%eaz muc+ii ntre toate liniile %i coloanele

#-emplul 9.21 ilu&treaz ace&te atri$ute. *tri$utele *ra&e %i rule( pot fi com$inate %i cu atri$utele de colorare a c+enarului %i &e pot folo&i pentru a crea efecte intere&ante de aliniere n pa'in a%a cum &e poate edea n Di'ura 9.21.
( emplul >. '1

<HTML> <HEAD> <TITLE>tabele 1</TITLE> </HEAD> <BODY> <H1 align="center">Atributele *ra&e (i rule(</H1><HR> <TABLE b#r$erc#l#r="re$" 6i$t%=""11" *ra&e="l%(" rule(="c#l("> <TR> <TD>celula 11 <TD>celula 1 <TD>celula 1! <TR> <TD>celula 1 <TD>celula <TD>celula ! <TR> <TD>celula 1 <TD>celula <TD>celula ! </TABLE> </BODY> </HTML>

14. "abele imbricate

7n ta$el poate con!ine n celulele &ale %i alte elemente n afar de te-t, inclu&i un alt ta$el, form(nd a&tfel un an&am$lu de ta$ele im$ricate. En #-emplul 9.22 om ilu&tra modul n care &e pot im$rica dou ta$ele.
( emplul >. ''

<HTML> <HEAD> <TITLE>tabele </TITLE> </HEAD> <BODY> <H1 align="center">I&bricarea tabelel#r</H1><HR> <TABLE b#r$er="."> <TR> <TD>celula 11 tabelul 1 <TD> <TABLE b#r$er> <TR> <TD>celula 11 tabelul <TD>celula 1 tabelul <TR> <TD>celula 1 tabelul <TD>celula tabelul <TR> <TD>celula !1 tabelul <TD>celula ! tabelul </TABLE> <TR> <TD>celula 1 tabelul 1 <TD>celula tabelul 1 </TABLE> </BODY> </HTML>

*%a cum &e ede din Di'ura 9.22 ta$elul e&te format din dou linii %i dou coloane. En celula 21 a ta$elului am inclu& un alt ta$el, format din trei linii %i dou coloane.

15. (ecoman$ri pri)in$ olosirea tabelelor

>a$elele &e numr printre cele mai folo&ite elemente ntr,o pa'in 4e$. #le reprezint un in&trument practic indi&pen&a$il pentru definirea a&pectului pa'inii, ntruc(t permit alinierea corect a elementelor din pa'in) te-t, ima'ini, le'turi, etc. En interiorul unui ta$el &e pot include %i alte ta$ele, n func!ie de nece&it!i, form(nd o re!ea de ta$ele im$ricate. 2in'ura precau!ie pe care tre$uie & o a e!i n edere c(nd folo&i!i ta$ele n pa'inile dumnea oa&tr e&te cea le'at de etic+etele %i atri$utele &pecifice unui anumit tip de $roC&er) *%a dup cum a!i o$&er at din e-emplele prezentate, a&pectul pa'inilor poate & difere &im!itor de la un tip de $roC&er la altul, atunci c(nd un anumit element nu e&te recuno&cut. 3ac e!i con&idera c a&pectul ta$elelor e&te e&en!ial pentru pa'inile &ite,ului, e&te recomandat & limita!i la etic+etele &tandard, recuno&cute de toate $roC&erele . En *ne-a 1 e!i '&i o li&t a celor mai utilizate etic+ete mpreun cu men!iunea dac fac parte din &tandardul =>?@ 3.2.

16. (e*umat
>a$elele &e in&ereaz ntr,un document =>?@ cu a"utorul etic+etei container <TABLE>
</TABLE>

>a$elele &unt formate din linii, care &e introduc prin etic+eta <TR> iar fiecare linie e&te format din celule introdu&e prin etic+eta <TD>. 0elulele unui ta$el pot con!ine te-t, etic+ete de formatare a te-tului, ima'ini, le'turi, formulare &au alte ta$ele. #tic+etele <TABLE>, <TR> %i <TD> au o &erie de atri$ute comune)
align , c(nd e&te a&ociat cu <TABLE> &ta$ile%te alinierea ta$elului fa! de te-tul din "ur , c(nd e&te a&ociat cu <TR> &ta$ile%te alinierea te-tului din celulele liniei re&pecti e , c(nd e&te a&ociat cu <TD> &ta$ile%te alinierea te-tului din celul bgc#l#r &ta$ile%te culoarea fundalului pentru ntre'ul ta$el, o linie &au o celul. b#r$erc#l#r, b#r$erc#l#r$ar> %i b#r$erc#l#rlig%t &ta$ile&c culorile c+enarelor +align aliniaz te-tul pe ertical n cadrul ta$elului, al celulelor unei linii &au al unei celule indi iduale

>a$elul n ntre'ime &au o celul a &a pot a ea o ima'ine ca fundal, &pecificat cu a"utorul atri$utului bac>gr#un$. Aro&imea c+enarului ta$elului &e &ta$ile%te cu a"utorul atri$utului b#r$er. 3imen&iunile ta$elului &au ale unei celule indi iduale &e &ta$ile&c prin intermediul atri$utelor
6i$t% %i %eig%t.

0u a"utorul atri$utelor cell(,acing %i cell,a$$ing &e &ta$ile&c di&tan!a dintre celulele ta$elului, re&pecti di&tan!a dintre con!inutul celulelor %i mar'inile lor. 6entru a crea ta$ele de forme oarecare &e folo&e&c atri$utele c#l(,an %i r#6(,an care permit e-tinderea unei celule pe&te celulele din dreapta ei, re&pecti pe&te celulele de &u$ ea. 7nui ta$el i &e poate ata%a un titlu prin etic+eta <CA5TIO@> %i &e pot introduce celule cu rol de cap de ta$el prin etic+eta <TH>) Entr,un ta$el &e pot defini 'rupuri de coloane cu a"utorul etic+etei container <COL'ROH5> </COL'ROH5>. En cadrul ace&tui 'rup, a&pectul fiecrei coloane n parte e&te &ta$ilit prin etic+eta
<COL>)

?odul de afi%are al mar'inilor ta$elului precum %i al liniilor de&pr!itoare dintre linii %i celule &e poate &ta$ili cu a"utorul atri$utelor *ra&e %i rule(.

17. "est
1+. (a ce serve7te eticheta <TD>9

a; $; c;
1,.

6entru a in&era un ta$el n pa'in. 6entru a in&era o linie ntr,un ta$el. 6entru a in&era o celul de date ntr,o linie a ta$elului.
Crmtoarea construcie generea8 un tabel cu o line 7i dou celule)

<TABLE bgc#l#r="6%ite"> <TR bgc#l#r="re$"> <TD bgc#l#r="blue">celula 11 <TD>Celula 1 </TABLE>

Ce culoare vor avea cele dou celule9 a; *m(ndou al$, deoarece a%a e&te &etat culoarea ta$elului. $; *m(ndou ro%u, deoarece a%a a fo&t &etat culoarea liniei. c; 0elula 11 al$a&tru, deoarece culoarea ei a fo&t &etat e-plicit %i celula 12 ro%u, deoarece face parte din linia a crei culoare a fo&t &etat ro%u.
13. (a ce servesc atributele width 7i height ale etichetei <TABLE>9

a; $; c;
14.

2ta$ile&c dimen&iunile ta$elului n pa'in. *liniaz ta$elul fa! de re&tul elementelor din pa'in. 2ta$ile&c dimen&iunile celulelor ta$elului.
Ce efect are urmtoarea construcie4
<TABLE b#r$er cell(,acing="." cell,a$$ing="11">O

a; >e-tul din celule e&te di&tan!at cu 5 pi-eli fa! de c+enarul celulelor, iar celulele &unt di&tan!ate ntre ele cu 10 pi-eli. $; >e-tul din celule e&te di&tan!at cu 10 pi-eli fa! de c+enarul celulelor, iar celulele &unt di&tan!ate ntre ele cu 5 pi-eli. c; 0+enarul ta$elului are 'ro&imea de 5 pi-eli iar c+enarul celulelor 'ro&imea de 10 pi-eli.
2;. Care dintre urmtoarele construcii alinia8 la dreapta coninutul celor dou celule9

a; <TR align="le*t"><TD align="rig%t">celula 11<TD>celula 1 $; <TR><TD align="rig%t">celula 11<TD>celula 1 c; <TR align="rig%t"><TD>celula 11<TD>celula 1
21. (a ce folose7te eticheta <TH>9

a; $; c;
22.

Introduce o celul de date. Introduce o celul cu rol de cap de ta$el. Introduce o linie cu rol de cap de ta$el.
&entru a ata7a un titlu tabelului folosim eticheta4
<HEAD> <CA5TIO@> <TITLE>

a; $; c;
23.

Ce efect are atributul colspan 6n construcia urmtoare4

<TR><TD c#l(,an="!">cel 11 cel 1 cel 1!O

a; $; c;
24.

7nific trei celule pe orizontal. 7nific trei celule pe ertical. 7nific c(te trei celule, at(t pe orizontal c(t %i pe ertical.
:n care dintre construciile urmtoare chenarul tabelului nu este afi7at9
<TABLE b#r$er> </TABLE> <TABLE b#r$er="1"> </TABLE> <TABLE b#r$er="P1"> </TABLE>

a; $; c;
2).

0tributul align al etichetei <TABLE> reali8ea84

a; $; c;

*linierea ta$elului fa! de re&tul elementelor din pa'in. *linierea te-tului n ta$el. *linierea te-tului n fiecare celul a ta$elului

Tabele
1. c; '. c; +. a; 0. $; 1. c; :. $; <. $; =. a; >. $; 1@. a;

Capitolul 1@ Cadre 2,rames3 . modalitate de &tructurare a an&at a unui document =>?@ e&te mpr!irea fere&trei $roC&erului n mai multe fere&tre di&tincte, denumite cadre 9frame&;. *cea&t facilitate permite afi%area &imultan, n aceea%i ferea&tr a $roC&erului, a dou &au mai multe documente =>?@ diferite, c(te unul n fiecare cadru. 6entru a realiza ace&t lucru &unt nece&are urmtoarele) un document de definire a cadrelor care con!ine etic+etele care &ta$ile&c numrul, dimen&iunile %i a%ezarea cadrelor n pa'in c(te un fi%ier =>?@ pentru fiecare cadru n parte, prin care &e &ta$ile%te con!inutul cadrului re&pecti . 3e e-emplu, o pa'in 4e$ care con!ine dou cadre a fi definit prin trei documente =>?@) documentul de definire a cadrelor, care &pecific dimen&iunile %i a%ezarea cadrelor n pa'in] cele dou documente care de&criu con!inutul fiecrui cadru n parte. En e&en!, cadrele fac po&i$il afi%area n ferea&tra $roC&erului a mai multe pa'ini, &imultan. 1. @ocumentu! de de'inire a cadre!or

En cadrul documentului de definire a cadrelor, $locul L1.3KM LG1.3KM e&te nlocuit de $locul 5*%.M(S(T9 5J*%.M(S(T9. En ace&t tip de document $locul L1.3KM nu mai e&te folo&it. En interiorul $locului LD5*?#2#>M, fiecare cadru e&te introdu& prin etic+eta 5*%.M(9. 3efinirea documentului ce a fi afi%at ntr,un cadru &e face prin atri$utul src 9source;. *ce&ta e&te un atri$ut o$li'atoriu al etic+etei LD5*?#M, %i prime%te ca aloare adre&a 75@ a documentului =>?@ care a fi ncrcat n acel cadru. 3efinirea cadrelor &e face prin mpr!irea fere&trelor n linii %i coloane) mpr!irea unei fere&tre ntr,un numr de cadre de tip coloan &e face cu a"utorul atri$utului cols al etic+etei LD5*?#2#>M ce de&crie acea ferea&tr] mpr!irea unei fere&tre n cadre de tip linie &e face cu a"utorul atri$utului roFs al etic+etei LD5*?#2#>M care de&crie ferea&tra. Ualorile atri$utelor col& &i roC& &unt li&te de elemente &eparate prin ir'ul care de&criu modul n care &e face mpr!irea fere&trei. Ualorile ace&tor atri$ute pot fi e-primate n mai multe moduri) n pi-eli j n care caz aloarea e&te un numr ntre' n procente din dimen&iunea fere&trei 9un numr cuprin& ntre 1 %i 99, urmat de &im$olul :; n dimen&iuni relati e, nk. 2im$olul nk &emnific faptul c linia &au coloana a&tfel definit ocup a n,a parte din &pa!iul rma& dup di&punerea n ferea&tr a liniilor, re&pecti coloanelor precedente 9 ezi e-emplele de mai "o&;. ( emplul 1O col&S/200 , k , 50: , k *cea&t con&truc!ie de&crie o mpr!ire n patru cadre de tip coloan, dintre care prima are 200 pi-eli, a treia ocup "umtate din &pa!iul total di&poni$il, iar a doua %i a patra ocup n mod e'al re&tul de &pa!iu rma& di&poni$il. ( emplul 'O roC&S/200 , 50: , 1k , 2k / En ace&t e-emplu, pa'ina e&te mpr!it n patru cadre de tip linie, dintre care prima are 200 pi-eli, a doua ocup "umtate din &pa!iul total di&poni$il iar a treia %i a patra ocup re&tul de &pa!iu rma& di&poni$il, care &e mparte n trei pr!i e'ale, al treilea cadru ocup(nd o parte, iar al patrulea ocup(nd dou pr!i. Bbserva!ii dac mai multe elemente din li&t &unt confi'urate cu k , atunci &pa!iul di&poni$il rma& pentru ele &e a mpr!i n mod e'al. n cadrul unui $loc LD5*?#2#>M poate fi inclu& un cadru prin etic+eta LD5*?#M &au un alt $loc LD5*?#2#>M o$!in(ndu,&e a&tfel cadre im$ricate.

En ma"oritatea e-emplelor care or urma am folo&it ca 75@,uri pentru documentele pe care le con!in cadrele, pa'ini de"a con&truite n capitolele anterioare. 3ac a!i &al at documentele =>?@ cu numele &pecificate n etic+eta L>I>@#M pute!i erifica direct e-emplele care or urma. 3ac prefera!i & ncrca!i n cadrele de&cri&e n e-emplele urmtoare alte documente, a tre$ui & face!i modificrile nece&are &pecific(nd numele ace&tor fi%iere. #-emplul 10.1 mparte pa'ina n dou cadre erticale, fiecare ocup(nd "umtate din pa'in. *&pectul pa'inii e&te cel din Di'ura 10.1. ( emplul 1@. 1 L=>?@M L=#*3M L>I>@#Mcadre1LG>I>@#M LG=#*3M LD5*?#2#> col&S/k, k/M LD5*?# &rcS/li&te1.+tml/M LD5*?# &rcS/li&te4.+tml/M LGD5*?#2#>M LG=>?@M En #-emplul 10.2 e&te creat o pa'ina 4e$ cu trei cadre orizontale. 6rimul cadru are 100 de pi-eli, al treilea ocup 30: din ferea&tra $roC&erului, iar al doilea ocup re&tul &pa!iului. 6a'ina arat ca n Di'ura 10.2. ( emplul 1@. ' L=>?@M L=#*3M L>I>@#Mcadre2LG>I>@#M LG=#*3M LD5*?#2#> roC&S/100 , k , 30:/M LD5*?# &rcS/li&te1.+tml/M LD5*?# &rcS/li&te2.+tml/M LD5*?# &rcS/li&te3.+tml/M LGD5*?#2#>M LG=>?@M #-emplul 10.3 creaz o matrice ptrat de 4 cadre 92 - 2;. 6entru a realiza ace&t lucru, &e folo&e&c &imultan cele dou atri$ute col& %i roC&. 6a'ina de&cri& n ace&t document a a ea a&pectul din Di'ura 10.3. ( emplul 1@. + L=>?@M L=#*3M L>I>@#Mcadre3LG>I>@#M LG=#*3M LD5*?#2#> roC&S/k, k/ col&S/k, k/M LD5*?# &rcS/ta$ele1.+tml/M LD5*?# &rcS/ta$ele2.+tml/M LD5*?# &rcS/ta$ele4.+tml/M LD5*?# &rcS/ta$ele6.+tml/M LGD5*?#2#>M LG=>?@M

2. Cadre im<ricate 0adrele, ca %i alte elemente ale pa'inii 4e$ 9li&te, ta$ele;, &e pot im$rica, adic pot fi inclu&e cadre n interiorul altor cadre. En #-emplul 10.4 e&te creat o pa'in cu trei cadre mi-te. 6entru a con&trui pa'ina &e procedeaz din aproape n aproape. ?ai nt(i, pa'ina e&te mpr!it n dou cadre de tip coloan, dup care al doilea cadru e&te mpr!it n dou cadre de tip linie. 6a'ina a a ea a&pectul din Di'ura 10.4. ( emplul 1@. 0 L=>?@M L=#*3M L>I>@#Mcadre4LG>I>@#M LG=#*3M LD5*?#2#> col&S/30:, k/M LD5*?# &rcS/ta$ele1.+tml/M LD5*?#2#> roC&S/k, k/M LD5*?# &rcS/ta$ele2.+tml/M LD5*?# &rcS/ta$ele4.+tml/M LGD5*?#2#>M LGD5*?#2#>M LG=>?@M 3. Contro!u! aspectu!ui unui cadru Cu!oarea mar&inii cadru!ui 6entru a &ta$ili culoarea c+enarului unui cadru &e utilizeaz atri$utul bordercolor. *ce&t atri$ut prime%te ca aloare un nume de culoare &au o culoare definit n conformitate cu modelul 5A1. *tri$utul $ordercolor poate fi ata%at at(t etic+etei LD5*?#2#>M pentru a &ta$ili culoarea tuturor c+enarelor cadrelor inclu&e, c(t %i etic+etei LD5*?#M, pentru a &ta$ili culoarea c+enarului pentru un cadru indi idual. #-emplul 10.5 ilu&treaz atri$utul $ordercolor. 6a'ina de&cri& n ace&t document are a&pectul din Di'ura 10.5. ( emplul 1@. 1 L=>?@M L=#*3M L>I>@#Mcadre5LG>I>@#M LG=#*3M LD5*?#2#> col&S/20:, k/ $ordercolorS/'reen/ $orderS/15/M LD5*?# &rcS/te-t3.+tml/M LD5*?#2#> roC&S/k, k/M LD5*?# &rcS/te-t4.+tml/ $ordercolorS/$lue/M LD5*?# &rcS/te-t5.+tml/M LGD5*?#2#>M LGD5*?#2#>M LG=>?@M L*imea mar&inii cadru!ui

*tri$utul border al etic+etei LD5*?#2#>M permite confi'urarea l!imii c+enarelor tuturor cadrelor la un numr dorit de pi-eli. Ualoarea atri$utului $order e&te un numr ntre', ce reprezint numrul de pi-eli, aloarea pre&ta$ilit fiind de 5 pi-eli. En mod pre&ta$ilit, c+enarul unui cadru e&te afi%at %i are a&pect tridimen&ional. 6entru a o$!ine cadre fr c+enar &e utilizeaz &etarea $orderS/0/. *fi%area c+enarului unui cadru &e mai poate dezacti a %i dac &e utilizeaz atri$utul ,rameborder cu aloarea /no/. *ce&t atri$ut poate fi ata%at at(t etic+etei LD5*?#2#>M 9dezacti area fiind ala$il pentru toate cadrele inclu&e; c(t %i etic+etei LD5*?#M 9dezacti area fiind ala$ila numai pentru un &in'ur cadru;. Ualorile po&i$ile ale atri$utului frame$order &unt) Ie& , ec+i alent cu 1 no , ec+i alent cu 0 0adrele din #-emplul 10.6 nu au c+enar. 3up cum pute!i o$&er a din Di'ura 10.6 crearea unor cadre fr c+enar poate duce la apari!ia unor am$i'uit!i n pa'in a%a nc(t ace&t efect tre$uie folo&it cu aten!ie. ( emplul 1@. : L=>?@M L=#*3M L>I>@#Mcadre6LG>I>@#M LG=#*3M LD5*?#2#> roC&S/k, k/ $orderS/0/M LD5*?# &rcS/ta$ele1.+tml/M LD5*?# &rcS/ta$ele2.+tml/M LGD5*?#2#>M LG=>?@M @imensiunea cadru!ui 0+iar dac dimen&iunile unui cadru au fo&t &ta$ilite n mod e-plicit prin alorile atri$utelor etic+etei LD5*?#2#>M, utilizatorul are po&i$ilitatea de a altera ace&te dimen&iuni cu a"utorul mou&e, ului. En &copul pre enirii ace&tei &itua!ii &e poate utiliza atri$utul noresi&e, ata%at etic+etei LD5*?#M, al crui efect e&te cel de $locare a po&i$ilit!ii de redimen&ionare a cadrului. 4. $are de deru!are *tri$utul scrollin- al etic+etei LD5*?#M e&te utilizat pentru a adu'a unui cadru o $ar de derulare &au de defilare 9scrolling bar;, care permite na i'area n interiorul documentului afi%at n cadru. Ualorile po&i$ile ale atri$utului &crollin' &unt) Ie& , $ara de derulare e&te prezent ntotdeauna] no , $ara de derulare nu e&te di&poni$il] auto , $ara de derulare e&te izi$il atunci c(nd e&te nece&ar. *cea&ta op!iune la& $roC&erului po&i$ilitatea de a adu'a &au nu $ara, n func!ie de dimen&iunea te-tului din cadru.

#-emplul 10.7 ilu&treaz func!ionarea atri$utului &crollin' n cele trei &itua!ii. ( emplul 1@. < L=>?@M L=#*3M L>I>@#Mcadre7LG>I>@#M LG=#*3M LD5*?#2#> roC&S/k, k, k/M LD5*?# &rcS/te-t1.+tml/ &crollin'S/Ie&/ nore&izeM LD5*?# &rcS/te-t7.+tml/ &crollin'S/no/ nore&izeM LD5*?# &rcS/te-t8.+tml/ &crollin'S/auto/ nore&izeM LGD5*?#2#>M LG=>?@M 3in Di'ura 10.7 &e o$&er c, deoarece la primul cadru te-tul nu dep%e%te dimen&iunea fere&trei, $ara de derulare nu e&te afi%at de%i atri$utul &crollin' are aloarea /Ie&/. En cel de,al doilea cadru $ara de derulare nu e&te afi%at, indiferent de dimen&iunea te-tului din cadru. @a cel de,al treilea cadru, prezen!a &au a$&en!a $arei de derulare e&te condi!ionat de dimen&iunea te-tului. *ici, deoarece te-tul dep%e%te dimen&iunea fere&trei, $ara e&te afi%ata. ). :o.iionarea documentu!ui ntr-un cadru *tri$utele mar-in)ei-)t %i mar-inFidt) ale etic+etei LD5*?#M permit &ta$ilirea di&tan!ei n pi-eli dintre con!inutul unui cadru %i mar'inile erticale, re&pecti orizontale ale cadrului. Ualorile po&i$ile ale ace&tor atri$ute &unt) un numr de pi-eli procente din nl!imea, re&pecti din l!imea cadrului En #-emplul 10.8 ferea&tra $roC&erului e&te mpr!it n trei cadre de tip coloan de dimen&iuni e'ale. En toate cele trei cadre e&te afi%at acela%i document, ceea ce difer e&te pozi!ionarea documentului n fiecare cadru. *&tfel, n cadrul din &t(n'a, nu e&te &pecificat nici o aloare pentru atri$utele mar'in+ei'+t %i mar'inCidt+. En cadrul din mi"loc, &e &ta$ile%te di&tan!a de 50 de pi-eli ntre mar'inea &uperioar %i cea inferioar a cadrului %i te-t. En cadrul din dreapta &e &ta$ile%te o di&tan! de 30 de pi-eli ntre mar'inea din &t(n'a %i cea din dreapta a cadrului %i te-t. 6a'ina are a&pectul din Di'ura 10.8. ( emplul 1@. = L=>?@M L=#*3M L>I>@#Mcadre8LG>I>@#M LG=#*3M LD5*?#2#> col&S/k , k , k/M LD5*?# &rcS/te-t1.+tml/M LD5*?# &rcS/te-t1.+tml/ mar'in+ei'+tS/60/M LD5*?# &rcS/te-t1.+tml/ mar'inCidt+S/40/M LGD5*?#2#>M LG=>?@M

.ten!ieH ':. #-i&t $roC&ere care nu &uport cadre. 6entru ace&tea &e utilizeaz n interiorul $locului LD5*?#2#>M etic+eta 5AB*%.M(S9 5JAB*%.M(S9. 3ac $roC&erul poate & interpreteze cadre, a i'nora ce &e '&e%te n acea&t por!iune, iar dac nu, materialul cuprin& n zona LF.D5*?#2M LGF.D5*?#2M a fi &in'urul care a fi recuno&cut %i afi%at. #&te de precizat %i faptul c ntre LF.D5*?#2M LGF.D5*?#2M &e pot introduce orice alte etic+ete =>?@ 9inclu&i ima'ini, +IperlinJ,uri, ta$ele;. +. Cadre interne 8in-!ine 'rames9 7n cadru intern e&te &pecificat prin intermediul etic+etei 57*%.M(9 5J7*%.M(9. #a define%te o arie rectan'ular n interiorul documentului, arie n care $roC&erul a afi%a un alt document =>?@, complet, inclu&i mar'inile %i $arele de derulare. 7n cadru intern &e in&ereaz ntr,o pa'ina 4e$ n mod a&emntor cu o ima'ine, n interiorul $locului L1.3KM, a%a cum rezult din urmtorul e-emplu) LID5*?# &rcS/ta$ele10.+tml/ +ei'+tS40: Cidt+S50:M LGID5*?#M En ace&t caz, am &pecificat c dorim un cadru intern care are 40: din nl!imea %i 50: din l!imea pa'inii curente. *tri$utele acceptate de etic+eta LID5*?#M &unt n parte preluate de la etic+etele LD5*?#M %i LD5*?#2#>M, cum ar fi) src, border, ,rameborder, bordercolor, mar-in)ei-)t, mar-inFidt), scrollin-, name. . parte din atri$utele LD5*?#M &unt comune cu cele ale etic+etei LI?AM) vspace, )space, ali-n, Fidt), )ei-)t. En #-emplul 10.9 am con&truit un cadru intern n care &e de&c+ide unul dintre documentele =>?@ create la capitolul Tabele. ( emplul 1@. > L=>?@M L=#*3M L>I>@#Mcadre9LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M0adre interneLG=1ML=5M L0#F>#5M LID5*?# Cidt+S/60:/ +ei'+tS/50:/ nameS/icad/ &rcS/ta$ele4.+tml/M 3aca edeti ace&t te-t in&eamna ca $roC&erul dumne oa&tra nu &uporta cadre interne. L6ML* +refS/cadre10.+tml/M6a'ina fara cadre interneLG*M LGID5*?#M LG0#F>#5M LG1.3KM LG=>?@M 3in Di'ura 10.9 pute!i o$&er a c a&pectul unui cadru intern e&te ntruc(t a &imilar cu cel al unei ima'ini in!line. #tic+eta LID5*?#M &e introduce n cadrul $locului L1.3KM %i n cazul folo&irii ei nu mai e&te nece&ar un document de definire a cadrelor. 6entru &itua!ia c(nd $roC&erul nu accept cadre interne, am

a&i'urat o er&iune a pa'inii care nu con!ine a&tfel de cadre 9cadreB@)html; introdu& prin etic+eta L*M. 0on!inutul ace&tei pa'ini e&te foarte &implu, &er ind doar la ilu&trarea modului n care poate fi con&truit o alternati la pa'ina cu cadre interne 9#-emplul 10.10; ( emplul 1@. 1@ L=>?@M L=#*3M L>I>@#Mcadre10LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M6a'ina fara cadre interneLG=1ML=5M LG1.3KM LG=>?@M Iat un alt e-emplu 9#-emplul 10.11; n care am creat o pa'in care con!ine trei linJ,uri iar ace&tea de&c+id pa'inile referite de ele n cadrul intern din centrul pa'inii. Di'ura 10.10 red a&pectul ace&tei pa'ini. ( emplul 1@. 11 L=>?@M L=#*3M L>I>@#Mcadre11LG>I>@#M LG=#*3M L1.3KM L* +refS/ta$ele4.+tml/ tar'etS/icad/MDi&ierul1LG*ML15M L* +refS/ta$ele5.+tml/ tar'etS/icad/MDi&ierul2LG*ML15M L* +refS/ta$ele6.+tml/ tar'etS/icad/MDi&ierul3LG*ML15M L0#F>#5M LID5*?# Cidt+S/60:/ +ei'+tS/50:/ nameS/icad/ &rcS/cadre11.+tml/M 3aca edeti ace&t te-t in&eamna ca $roC&erul dumne oa&tra nu &uporta cadre interne. L6ML* +refS/cadre10.+tml/M6a'ina fara cadre interneLG*M LGID5*?#M LG0#F>#5M LG1.3KM LG=>?@M En e-emplu am folo&it atri$utul name al etic+etei LID5*?#M cu a"utorul cruia am atri$uit un nume ace&tui cadru %i anume /icad/. *ce&t lucru a fo&t nece&ar pentru a &pecifica, prin intermediul atri$utului tar-et al etic+etei L*M, faptul c linJ,urile &e or de&c+ide n cadrul intern. ,. @esc/iderea documente!or n a!te cadre 3ac ntr,unul dintre documentele de&c+i&e n cadru e-i&t linJ,uri, ace&tea or de&c+ide pa'inile referite de ele n cadrul curent. *ce&t comportament &e poate &c+im$a prin pla&area n etic+eta L*M a atri$utului tar-et, care precizeaz numele fere&trei 9cadrului; n care &e a ncrca pa'ina nou referit de le'tur, conform &inta-ei) L* +refS/75@/ tar'etS/numeVframe/M LG*M Fumele unui cadru e&te &ta$ilit prin atri$utul name al etic+etei LD5*?#M conform &inta-ei)

LD5*?# nameS/numeVframe/M En #-emplul 10.12 e&te prezentat o pa'ina 4e$ cu dou cadre. 3ocumentul de definire a cadrelor e&te cadreB>) html al crui a&pect e&te redat n Di'ura 10.11. ( emplul 1@. 1' L=>?@M L=#*3M L>I>@#Mcadre12LG>I>@#M LG=#*3M LD5*?#2#> col&S/20:, k/M LD5*?# &rcS/cadre13.+tml/M LD5*?# &rcS/cadre14.+tml/ nameS/cadruVdreapta/M LGD5*?#2#>M LG=>?@M 3ocumentul de definire a cadrelor mparte pa'ina n dou cadre de tip coloan. En cel din &t(n'a &e a de&c+ide documentul cadreBA)html iar n cel din dreapta, documentul cadreB<)html. 0el de,al doilea cadru a fo&t numit /cadruVdreapta/. En #-emplul 10.13 e&te creat documentul cadreBA)html. *ce&t document con!ine, dup cum o$&er a!i, patru linJ,uri. 6rin intermediul atri$utului tar'et am &pecificat cadrul n care &e or de&c+ide ace&tea. >oate ace&te le'turi de&c+id pa'inile referite de ele n cadrul drept. ( emplul 1@. 1+ L=>?@M L=#*3M L>I>@#Mcadre13LG>I>@#M LG=#*3M L1.3KM L* +refS/ta$ele6.+tml/ tar'etS/cadruVdreapta/M @e'atura 1 LG*ML15M L* +refS/ta$ele7.+tml/ tar'etS/cadruVdreapta/M @e'atura 2 LG*ML15M L* +refS/ta$ele8.+tml/ tar'etS/cadruVdreapta/M @e'atura 3 LG*ML15M L* +refS/cadre14.+tml/ tar'etS/cadruVdreapta/M =ome LG*ML15M LG1.3KM LG=>?@M En #-emplul 10.14 e&te creat documentul cadreB<)html. ( emplul 1@. 10 L=>?@M L=#*3M L>I>@#Mcadre14LG>I>@#M LG=#*3M

L1.3KM L=3M*ici &e or de&c+ide pa'inile referite de le'aturile din cadrul &tan'LG=3ML=5M LG1.3KM LG=>?@M 2al a!i cele trei fi%iere cu numele &pecificate %i de&c+ide!i cu $roC&erul fi%ierul cadreB>)html pentru a o$&er a cum func!ioneaz atri$utele prezentate. *tri$utul tar'et al etic+etei LD5*?#M accept %i anumite alori predefinite %i anume) V&elf , ncrcarea noii pa'ini are loc n cadrul curent V$lanJ , ncrcarea noii pa'ini are loc ntr,o ferea&tr nou, anonim Vparent , ncrcarea noii pa'ini are loc n cadrul printe al cadrului curent dac ace&ta e-i&t, altfel are loc n ferea&tra curent a $roC&erului Vtop , ncrcarea noii pa'ini are loc n ferea&tra $roC&erului ce con!ine cadrul curent. 7rmtorul e-emplu ilu&treaz felul cum func!ioneaz ace&te alori ale atri$utului tar'et. 3ocumentul de definire a cadrelor e&te prezentat n #-emplul 10.15 a&pectul &u fiind cel din Di'ura 10.12. 6a'ina con&truit n ace&t e-emplu con!ine dou cadre orizontale. En cel de &u& e&te ncrcat documentul cadreBI)html iar n cel de "o&, documentul cadreB=)html. ( emplul 1@. 11 L=>?@M L=#*3M L>I>@#Mcadre15LG>I>@#M LG=#*3M LD5*?#2#> roC&S/30:, k/M LD5*?# &rcS/cadre17.+tml/M LD5*?# &rcS/cadre16.+tml/M LGD5*?#2#>M LG=>?@M #-emplul 10.16 con&truie%te documentul cadreB=)html care con!ine trei le'turi ctre fi%iere =>?@ create la capitolul *ormatarea te tului. Diecare dintre ace&te le'aturi are &pecificat atri$utul tar'et pentru a ilu&tra modul n care func!ioneaz ace&ta. ( emplul 1@. 1: L=>?@M L=#*3M L>I>@#Mcadre16LG>I>@#M LG=#*3M L1.3KM L* +refS/te-t4.+tml/ tar'etS/V$lanJ/M *cea&ta le'atura &e de&c+ide in alta ferea&tra LG*ML15M L* +refS/te-t5.+tml/ tar'etS/V&elf/M *cea&ta le'atura &e de&c+ide in ferea&tra curenta LG*ML15M L* +refS/te-t6.+tml/ tar'etS/Vparent/M *cea&ta le'atura &e de&c+ide in ferea&tra parinte LG*ML15M LG1.3KM

LG=>?@M 3ocumentul cadreBI)html prezentat n #-emplul 10.17 e&te o pa'in 4e$ foarte &impl care &e a de&c+ide n cadrul de &u&. ( emplul 1@. 1< L=>?@M L=#*3M L>I>@#Mcadre17LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M*tri$utul tar'etLG=1M LG1.3KM LG=>?@M 6entru a o$&er a modul de func!ionare al atri$utului tar'et &al a!i cele trei fi%iere &u$ numele &pecificate %i de&c+ide!i cu $roC&erul documentul cadreB?)html. 3. Su&estii pri"ind 'o!osirea cadre!or 3e%i cadrele reprezint o maniera de&tul de &pectaculoa& de a &tructura o pa'in 4e$, ele prezint o mul!ime de deza anta"e. Encrcarea unei pa'ini care con!ine cadre &e face mai 'reu, inde-area pa'inii de ctre motoarele de cutare e&te mai dificil. 3e a&emenea, deoarece documentul din fiecare cadru are propriul 75@ , e&te mai 'reu pentru izitator & re!in adre&a pa'inii n .avorites. 8i, nu n ultimul r(nd, deoarece e-i&t $roC&ere care nu &uport cadrele, e&te indicat & a&i'ura!i pentru fiecare pa'in a&tfel &tructurat %i o er&iune fr cadre, ceea ce implic un efort &uplimentar. * (nd n edere toate ace&te a&pecte, e&te $ine & limita!i folo&irea cadrelor n pa'inile dumnea oa&tr doar la &itua!iile n care nu pute!i proceda altfel. 4. -e.umat Dolo&irea cadrelor ntr,un document =>?@ permite de&c+iderea mai multor pa'ini di&tincte n documentul re&pecti . 6entru a crea o pa'in care con!ine cadre &unt nece&are mai multe documente =>?@) documentul de definire a cadrelor c(te un document =>?@ pentru fiecare cadru definit 3ocumentul de definire a cadrelor nu con!ine $locul L1.3KM ace&ta fiind nlocuit de $locul LD5*?#2#>M LGD5*?#2#>M. En cadrul $locului LD5*?#2#>M fiecare cadru e&te introdu& prin etic+eta LD5*?#M. Empr!irea fere&trei n cadre de tip coloan &e face cu a"utorul atri$utului col& iar n cadre de tip linie &e face cu a"utorul atri$utului roC&. *m$ele atri$ute &unt a&ociate etic+etei LD5*?#2#>M. 6entru a &ta$ili l!imea c+enarului unui cadru &e folo&e%te atri$utul $order al etic+etei LD5*?#M. 6entru a &ta$ili culoarea c+enarului unui cadru &e folo&e%te atri$utul $ordercolor al etic+etei LD5*?#M. *ce&te atri$ute pot fi a&ociate %i etic+etei LD5*?#2#>M, caz n care efectul lor &e a aplica tuturor cadrelor din &et.

6rezen!a $arelor de derulare ntr,un cadru &e &ta$ile%te cu a"utorul atri$utului &crollin'. 6entru a pozi!iona documentul ntr,un cadru &e folo&e&c atri$utele mar'inCidt+ %i mar'in+ei'+t. Entr,o pa'in 4e$ &e pot introduce %i cadre interne, cu a"utorul etic+etei LID5*?#M LGID5*?#M. 6entru a &pecifica ferea&tra &au cadrul n care &e a de&c+ide un document &e folo&e%te atri$utul tar'et care poate a ea ca aloare numele fere&trei 9cadrului; &au poate a ea o aloare predefinit. #&te recomandat & a&i'ura!i o er&iune fr cadre a documentului =>?@, pentru ca ace&ta & poat fi izualizat cu $roC&erele care nu &uport cadre. 6entru acea&ta, elementele care fac parte din er&iunea fr cadre &e includ ntre etic+etele LF.D5*?#2M LGF.D5*?#2M. 1;. Test '<. a; $; c; :n ce 8on a unui document #%M( se introduce blocul LD5*?#2#>M9 En $locul L1.3KM En $locul L=#*3M LD5*?#2#>M formeaz un $loc &eparat.

Cum se introduce un cadru 6n pagin9 a; $; c; 6rin etic+eta LD5*?#2#>M 6rin etic+eta LD5*?#M 6rin etic+eta L250M

Dorim s 6mprim o pagin 6n trei cadre de tip coloan, primul avHnd ;umtate din pagin, iar celelalte dou spaiul rmas 6mprit 6n mod egal) Care dintre construciile urmtoare reali8ea8 acest lucru9 a; $; c; LD5*?#2#> col&S/k , k, k/ LD5*?#2#> col&S/50:, 1k , 2k/ LD5*?#2#> col&S/50:, k , k/

Ce reali8ea8 urmtoarea construcie9 L=>?@M LD5*?#2#> col&S/k, k/M LD5*?# &rcS/frame1.+tml/M LD5*?#2#> roC&S/k, k/M LD5*?# &rcS/frame2.+tml/M LD5*?# &rcS/frame3.+tmllM LGD5*?#2#>M LGD5*?#2#>M LG=>?@M a; Emparte pa'ina n patru cadre, dou de tip coloan, dou de tip linie.

$; de tip linie. c;

Emparte pa'ina n dou cadre de tip coloan, cel de,al doilea fiind mpr!it n dou cadre Emparte pa'ina n trei cadre de tip linie.

:n construcia urmtoare la ce folose7te atributul &crollin'9 LD5*?# &rcS/frame1.+tml/ &crollin'S/auto/M a; 6ermite auto,dimen&ionarea cadrului n func!ie de mrimea te-tului. $; *dau' automat $ara de derulare pentru ace&t cadru. c; @a& $roC&erului po&i$ilitatea de a adu'a &au nu $ara de derulare, n func!ie de mrimea te-tului din cadru. (a ce folosesc atributele mar'in+ei'+t 7i mar'inCidt+ ale etichetei LD5*?#M9 a; $; c; 3imen&ioneaz mar'inile cadrului. 3imen&ioneaz c+enarul cadrului. 2ta$ile&c di&tan!a dintre mar'inile cadrului %i con!inutul &u.

Cnde se introduce eticheta LID5*?#M9 a; $; c; En $locul L1.3KM En $locul LD5*?#2#>M En $locul LD5*?#M

(a ce serve7te atributul $ordercolor asociat etichetei LD5*?#2#>M9 a; $; c; 2ta$ile%te culoarea c+enarului unui cadru. 2ta$ile%te culoarea c+enarelor tuturor cadrelor definite n LD5*?#2#>M. 2ta$ile%te culoarea de fond a cadrelor definite n LD5*?#2#>M.

Care dintre urmtoarele construcii este corect9 a; $; c; LD5*?# nameS/numeVcadru/M LD5*?#2#> nameS/numeVcadru/M LD5*?#2#> +refS/numeVcadru/M

Cum se reali8ea8 deschiderea documentului dintr!un cadru 6ntr!o fereastra nou9 a; $; c; LD5*?# &rcS/frame1.+tml/ tar'etS/V&elf/M LD5*?# &rcS/frame1.+tml/ tar'etS/V$lanJ/M LD5*?# &rcS/frame1.+tml/ tar'etS/Vparent/M

Cadre
1. c; '. $; +. c; 0. $; 1. c;

:. c; <. a; =. $; >. a; 1@. $;

Capitolul 11 *ormulare 0u &i'uran! a!i zut cum arat un formular ntr,o pa'in 4e$. 3e e-emplu, atunci c(nd completa!i o carte de oa&pe!i 9guestbook; a e!i de,a face cu un formular. *tunci c(nd &electa!i mai multe op!iuni dintr,o li&t &au introduce!i un cu (nt ntr,un motor de cutare, folo&i!i, de a&emenea, un formular. Dormularul reprezint unul dintre cele puternice elemente ale unei pa'ini 4e$. 6rin intermediul formularelor &e realizeaz interacti itatea cu izitatorul pa'inii, ace&tea permi!(ndu, & o$!ine!i informa!ii de&pre cei care iziteaz pa'inile dumnea oa&tr. 1. Ce este un 'ormu!ar? 7n formular e&te un an&am$lu de zone acti e alctuit din mai multe tipuri de elemente) $utoane, ca&ete de &elec!ie, c(mpuri de editare, etc., ce permit utilizatorilor & introduc efecti informa!ii. *ce&te informa!ii &unt ulterior tran&mi&e &er erului pe care e&te 'zduit pa'ina dumnea oa&tr, unde or putea fi prelucrate. . &e&iune cu o pa'ina 4e$ ce con!ine un formular cuprinde dou etape) 7tilizatorul completeaz formularul %i, prin ap&area $utonului de e-pediere, trimite &er erului datele n&cri&e n formular. . aplica!ie dedicat de pe &er er 9un &cript; analizeaz informa!iile tran&mi&e %i, n func!ie de confi'ura!ia &criptului, fie &toc+eaz datele ntr,o $az de date, fie le tran&mite la o adre& de mail indicat de dumnea oa&tr. 3ac e&te nece&ar, &er erul poate e-pedia %i un me&a" de r&pun& utilizatorului. 0el mai important lucru pe care tre$uie &,l n!ele'e!i n le'tur cu formularele e&te c aici apar dou pro$leme di&tincte %i care nece&it in&trumente diferite pentru a le 'e&tiona. 6rima dintre ele e&te pla&area formularului n pa'in %i a&i'urarea $unei lui func!ionri. *ce&t lucru &e realizeaz prin =>?@ %i de el ne ocupm n ace&t capitol. 0ea de,a doua e&te 'e&tionarea %i prelucrarea informa!iilor pe care izitatorul le introduce prin intermediul formularului. *cea&t pro$lem e&te rezol at cu a"utorul &cripturilor 0AI &tocate pe &er er, &u$iect de&pre care om or$i n capitolul urmtor. 2tructura formularele poate aria, de la o &impl ca&et de te-t pentru introducerea unui %ir de caractere, p(n la un an&am$lu comple-, cu multiple &ec!iuni %i care ofer facilit!i puternice de tran&mitereGprelucrare a datelor. 2. Crearea unui 'ormu!ar

7n formular e&te definit ntr,un $loc delimitat de etic+etele 5*B%M9 5J*B%M9. #tic+eta LGD.5?M, de nc+idere, e&te o$li'atorie. En interiorul $locului &unt inclu&e) elementele formularului, n care izitatorul urmeaz & introduc informa!ii un $uton de e-pediere 9submit;, la ap&area cruia, datele &unt tran&mi&e ctre &er er op!ional, un $uton de anulare 9reset, cancel;, prin care utilizatorul poate anula datele n&cri&e n formular >ot ceea ce e&te inclu& ntre etic+eta de de&c+idere %i cea de nc+idere face parte din formular. #tic+eta LD.5?M are dou atri$ute e&en!iale) action j comunic $roC&erului unde & trimit datele introdu&e n formular. En 'eneral aloarea atri$utului action e&te adre&a 75@ a &criptului aflat pe &er erul care prime%te datele formularului. 3e e-emplu) LD.5? actionS/+ttp)GGCCC.Ia+oo.comGc'i,$inGnumeVfi&.c'i/M. met)od , precizeaz metoda utilizat de $roC&er pentru e-pedierea datelor formularului. *tri$utul met+od poate a ea dou alori) po&t , folo&it n cele mai multe cazuri. Indic &er erului & furnizeze datele direct &criptului ca date de intrare &tandard. 'et 9 aloarea implicit; , datele din formular &unt adu'ate la adre&a 75@ precizat de atri$utul action, ntre adre&a 75@ %i date fiind in&erat un /</. 3atele &unt adu'ate conform &inta-ei) numeVcampS aloareVcamp. Entre diferite &eturi de date e&te introdu& un /\/. 3e e-emplu) /+ttp)GGCCC.Ia+oo.comGc'i,$inGnumeVfi&.c'i< nume1S aloare1\nume2S aloare2/ 0ea mai facil cale prin care informa!iile introdu&e ntr,un formular pot par eni creatorului pa'inii e&te folo&irea comenzii mailtoO *m mai nt(lnit acea&t comand la capitolul Le-$turi n conte-tul urmtor) L* +refS/mailto)autorhdomeniu.com/M 3e data acea&ta nu mai e&te or$a de crearea unei le'turi care & lan&eze n e-ecu!ie aplica!ia de mail a utilizatorului, ci de tran&miterea datelor introdu&e n formular la o adre& de mail &pecificat de dumnea oa&tr. *ce&t lucru &e poate realiza preciz(nd ca /mailto)adre&aVmail/, ca n e-emplul urmtor) aloare a atri$utului action urmtoarea &ec en!)

LD.5? actionSmailto)autorhdomeniu.com met+odS/po&t/M

*%a cum &puneam, atri$utul action comunic $roC&erului unde & trimit datele introdu&e n formular. Dolo&ind comanda mailto) $roC&erului i &e indic & trimit datele la adre&a de mail &pecificat n comand. 3in pcate, acea&t comand nu e&te e-ecutat n ace&t mod dec(t de $roC&erele Fet&cape. 1roC&erele Internet #-plorer nu recuno&c comanda mailto) prezent n cadrul formularelor. *ce&tea o e-ecut la fel cum e&te ea e-ecutat atunci c(nd face parte din etic+eta L*M ca aloare a atri$utului +ref adic lan&eaz aplica!ia de mail a utilizatorului. 3in ace&t moti , inclu&i pentru trimiterea datelor la o adre& &pecificat de mail, &e folo&e&c &cripturi 0AI. 6entru a nu intra nc n amnunte pri ind &cripturile, om folo&i totu%i n e-emplele urmtoare comanda mailto) 5e!ine!i totu%i c afi%area corect a unui formular n pa'in nu e&te dec(t prima etap a utilizrii formularului. 6entru a face o te&tare complet tre$uie & a e!i un &cript in&talat pe &er er care & prelucreze datele din formular %i & le tran&mit la adre&a de mail &pecificat. 6entru a defini elementele care fac parte din formular &e utilizeaz etic+etele 57AP#T9, 5S(L(CT9, 5BPT7BA9 %i 5T(CT.%(.9. 3. #tic/eta 57AP#T9 6rin intermediul etic+etei 57AP#T9 &e pot introduce n formular c(mpuri de editare 9ca&ete de te-t;, c(mpuri de tip pass ord, $utoane de e-pediere %i anulare, $utoane radio %i ca&ete de alidare. #tic+eta LIF67>M are urmtoarele atri$ute) tGpe , prin care &e precizeaz tipul elementului. name , permite ata%area unui nume fiecrui element al formularului. value , permite atri$uirea unei alori ini!iale unui element al formularului. 6erec+ea de atri$ute nameJvalue 9numeG aloare; e&te deo&e$it de important pentru $una func!ionare a formularului. Diecare element introdu& prin etic+eta LIF67>M reprezint o aria$il. Informa!ia introdu& de utilizator n c(mpul elementului re&pecti reprezint aloarea pe care o prime%te acea&t aria$il. 3in ace&t moti , toate elementele introdu&e prin etic+eta LIF67>M tre$uie & ai$ atri$uit un nume. *ce&t lucru e&te o$li'atoriu deoarece, n caz contrar, aria$ila reprezentat de acel element nu a a ea un identificator. En plu&, e&te indicat & atri$ui!i nume di&tincte diferitelor elemente care fac parte din formular. *ltminteri, &criptul 0AI care prelucreaz datele nu a %ti & fac di&tinc!ia ntre aria$ile a (nd acela%i nume %i alori diferite. *tri$utul tIpe poate a ea urmtoarele alori) te-t , &e folo&e%te pentru a introduce un c(mp de editare pe o &in'ur linie pa&&Cord j &e folo&e%te pentru a in&era un c(mp de editare n care caracterele introdu&e &unt nlocuite cu a&teri&curi 9k; radio j folo&it pentru a in&era un %ir de $utoane radio 9elemente care &e folo&e&c pentru a &electa dintr,o li&t de op!iuni una %i numai una dintre ele;

c+ecJ$o- j folo&it pentru a introduce un %ir de ca&ete de alidare 9elemente care &e folo&e&c c(nd dintr,o li&t de op!iuni &e poate ale'e mai mult de o &in'ur ariant; &u$mit j &e folo&e%te pentru a introduce un $uton de e-pediere re&et j &e folo&e%te pentru a introduce un $uton de anulare a informa!iilor introdu&e n formular $utton , &e folo&e%te pentru a introduce n formular un $uton o$i%nuit +idden , &e folo&e%te pentru a introduce n formular un c(mp a&cun& Diecare dintre alorile atri$utului tIpe 'enereaz un anumit tip de element n cadrul formularului. #-emplul 11.1 creeaz un formular foarte &implu care con!ine un c(mp de editare %i un $uton de e-pediere. *&pectul formularului e&te redat n Di'ura 11.1. ( emplul 11. 1 L=>?@M L=#*3M L>I>@#Mformulare1LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M 0a&eta de te-t &i $uton de e-pediereLG=1ML=5M LD.5? actionS/mailto)adre&ahIII.com/ met+odS/po&t/M Introduceti adre&a d &. de mail) LIF67> tIpeS/te-t/ nameS/adre&a/ alueS/adre&a mail/ML15M LIF67> tIpeS/&u$mit/ alueS/e-pediaza/M LGD.5?M LG1.3KM LG=>?@M 3up cum o$&er a!i, numele atri$uit c(mpului de editare e&te /adre&a/ iar atri$utul alue a primit ca aloare %irul de caractere /adre&a mail/. *ce&t te-t a fi afi%at n interiorul c(mpului de editare, nainte ca utilizatorul & nceap introducerea informa!iilor. 3ac atri$utul alue nu era prezent &au era ini!ializat cu &trin'ul id 9 // ;, ca&eta de te-t ar fi fo&t 'oal. En cadrul formularului e&te prezent %i un $uton de e-pediere, in&erat de a&emenea prin intermediul etic+etei LIF67>M a (nd atri$utul tIpe &etat cu aloarea /&u$mit/. *%a cum &e o$&er din fi'ur, pe $uton e&te afi%at te-tul /e-pediaza/, deoarece pentru ace&t element, atri$utului alue i,a fo&t atri$uit ca aloare te-tul re&pecti . Casete de text En #-emplul 11.2 am creat un formular care con!ine trei ca&ete de te-t 9c(mpuri de editare; n care utilizatorul e&te ru'at & introduc numele, prenumele %i adre&a de mail, precum %i o ca&et de tip pass ord, care cere introducerea unei parole. *%a cum e!i o$&er a din Di'ura 11.2, o ca&et de tip pass ord e&te a&emntoare cu un c(mp de editare, &in'ura diferen! fiind aceea c aici caracterele nu &unt afi%ate n clar ci &unt nlocuite cu a&teri&curi. En plu&, formularul con!ine un $uton de e-pediere %i unul de anulare a datelor introdu&e. ( emplul 11. ' L=>?@M L=#*3M L>I>@#Mformulare2LG>I>@#M LG=#*3M L1.3KM

L=1 ali'nS/center/M0a&ete de te-tLG=1ML=5M LD.5? actionS/mailto)adre&ahIII.com/ met+odS/po&t/M Introduceti numele) LIF67> tIpeS/te-t/ nameS/nume/ alueS//ML15M Introduceti prenumele) LIF67> tIpeS/te-t/ nameS/prenume/ alueS//ML15M Introduceti adre&a de mail) LIF67> tIpeS/te-t/ nameS/mail/ alueS//ML15M Introduceti parola) LIF67> tIpeS/pa&&Cord/ nameS/parola/ML15M LIF67> tIpeS/re&et/ alueS/&ter'e/M LIF67> tIpeS/&u$mit/ alueS/e-pediaza/M LGD.5?M LG1.3KM LG=>?@M 6entru elementele de tip ca&et de te-t %i pass ord &unt utile %i atri$utele) ma len-t) j care &ta$ile%te numrul ma-im de caractere care poate fi introdu& n c(mpul de editare si&e j care &ta$ile%te l!imea ace&tui c(mp $utoane radio En #-emplul 11.3 am creat un formular care con!ine un %ir de $utoane radio, prin care &e cere prerea izitatorului de&pre o pa'in 4e$. 3up cum o$&er a!i, fiecare element de tip $uton radio are acela%i nume %i anume /opinie/ deoarece nu &e poate &electa dec(t un &in'ur element, a&tfel nc(t orice am$i'uitate e&te e-clu&. Diecare $uton radio tre$uie & ai$ o aloare. 3in ace&t moti pentru fiecare $uton atri$utul alue a fo&t &etat la o alt aloare. *le'erea uneia dintre op!iuni, de e-emplu /$una/, face ca aria$ila /opinie/ & primea&c aloarea /$una/. 6rin urmare, &er erului i a fi tran&mi& perec+ea /opinieS$una/. En plu&, o$&er a!i prezen!a atri$utului c)ec;ed, care are rolul de a pre&ta$ili o anumit op!iune, pe care n& utilizatorul o poate &c+im$a, dac dore%te. *&pectul formularului e&te cel din Di'ura 11.3. ( emplul 11. + L=>?@M L=#*3M L>I>@#Mformulare3LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M1utoane radioLG=1ML=5M LD.5? actionS/mailto)adre&ahIII.com/ met+odS/po&t/M 0e parere a eti de&pre acea&ta pa'ina<L15M LIF67> tIpeS/radio/ nameS/opinie/ alueS/foarte $una/ c+ecJedMDoarte $unaL15M LIF67> tIpeS/radio/ nameS/opinie/ alueS/$una/M1unaL15M LIF67> tIpeS/radio/ nameS/opinie/ alueS/de&tul de $una/M3e&tul de $unaL15M LIF67> tIpeS/radio/ nameS/opinie/ alueS/proa&ta/M6roa&taL15M LIF67> tIpeS/re&et/ alueS/anuleaza/M LIF67> tIpeS/&u$mit/ alueS/e-pediaza/M LGD.5?M

LG1.3KM LG=>?@M Casete de "a!idare #-emplul 11.4 creeaz un %ir de ca&ete de alidare, care &e deo&e$e&c de $utoanele radio prin faptul c &e pot &electa mai multe op!iuni dintre cele prezentate. Di'ura 11.4 red a&pectul formularului con&truit n ace&t e-emplu. ( emplul 11. 0 L=>?@M L=#*3M L>I>@#Mformulare4LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M0a&ete de alidareLG=1ML=5M LD.5? actionS/mailto)adre&ahIII.com/ met+odS/po&t/M 0are &unt +o$$I,urile dumnea oa&tra<L15M LIF67> tIpeS/c+ecJ$o-/ nameS/+o$$I/ alueS/&port/M2portL15M LIF67> tIpeS/c+ecJ$o-/ nameS/+o$$I/ alueS/film/MDilmL15M LIF67> tIpeS/c+ecJ$o-/ nameS/+o$$I/ alueS/lectura/M@ecturaL15M LIF67> tIpeS/c+ecJ$o-/ nameS/+o$$I/ alueS/"ocuri/MBocuri pe computerL15M LIF67> tIpeS/c+ecJ$o-/ nameS/+o$$I/ alueS/internet/M2urfin' pe netL15M LIF67> tIpeS/c+ecJ$o-/ nameS/+o$$I/ alueS/alpini&m/M*lpini&mL15M LIF67> tIpeS/&u$mit/ nameS/&u$mit/ alueS/e-pediaza/M LGD.5?M LG1.3KM LG=>?@M . ca&et de alidare are dou &tri) marcat &au nemarcat 9on &au off;. 0a %i la $utoanele radio, atri$utul name are n e-emplul con&iderat o &in'ur aloare, /+o$$I/, iar atri$utul alue are, pentru fiecare ca&et, alori di&tincte. 2er erului i &unt tran&mi&e numai acele alori care au fo&t marcate n ca&etele de alidare core&punztoare. 8i n cazul ca&etelor de alidare e&te po&i$il prezen!a atri$utului c)ec;ed care pre&electeaz o anumit op!iune &au mai multe. $utoane En cadrul unui formular &e pot introduce %i $utoane o$i%nuite 9altele dec(t $utoanele +ubmit %i Reset;. 5olul ace&tora e&te de a ini!ia anumite ac!iuni n momentul c(nd utilizatorul face clicJ cu mou&e,ul pe ele. @im$a"ul =>?@ nu ofer in&trumentele nece&are pentru a &pecifica ce anume &e nt(mpl c(nd $utonul e&te ap&at. 6entru acea&ta e&te nece&ar & include!i n documentul =>?@ &cripturi Ba a2cript care & trateze ace&te e enimente. 0a %i $utoanele +ubmit %i Reset, $utoanele o$i%nuite &unt inclu&e n formular cu a"utorul etic+etei LIF67>M a (nd atri$utul tIpe &etat la aloarea $utton) LIF67> tIpeS/$utton/ nameS/$uton/ alueS/te-t/M. >e-tul &pecificat ca aloare a atri$utului alue a fi afi%at pe $uton.

1utoanele pot fi folo&ite pentru a alida informa!iile introdu&e n formular, pentru a de&c+ide documente %i a ini!ia di er&e alte ac!iuni din partea $roC&erului. C7mpuri ascunse 8/idden 'ie!ds9 0(mpurile a&cun&e &unt elemente care fac parte dintr,un formular dar nu &unt izi$ile n cadrul pa'inii. 6rin intermediul ace&tora &e pot include n formular informa!ii care nu pot fi alterate de $roC&er &au de utilizator. Introducerea unui a&tfel de c(mp n formular &e face prin etic+eta LIF67> tIpeS/+idden/M. 0a %i n cazul celorlalte elemente ale formularului e&te nece&ar prezen!a atri$utelor name %i alue, ca n e-emplul urmtor) LIF67> tIpeS/+idden/ nameS/a&cun&/ alueS/modifica/M 0(mpurile a&cun&e pot &er i la o 'e&tionare mai $un a datelor tran&mi&e la &er er. 3e e-emplu, & pre&upunem c a em un formular care cere utilizatorului c(te a informa!ii ini!iale) numele %i adre&a. 6e $aza ace&tora, aplica!ia de pe &er er ini!iaz afi%area unui nou formular care &olicit introducerea unor informa!ii mai detaliate. 3eoarece e&te plicti&itor pentru izitator & reia introducerea informa!iilor ini!iale, &criptul poate fi confi'urat & depun primele informa!ii n c(mpurile a&cun&e ale celui de,al doilea formular. En acea&t &itua!ie e&te util folo&irea c(mpurilor a&cun&e deoarece &er erul proce&eaz un &in'ur formular la un moment dat %i nu are cum & %tie c cel de,al doilea formular a fo&t completat de aceea%i per&oan. 4. #tic/ete!e 5S(L(CT9 i 5BPT7BA9 0u a"utorul etic+etei 5S(L(CT9 5JS(L(CT9 &e poate introduce ntr,un formular un meniu derulant. 0rearea unui meniu pentru izitatorii pa'inii i a"ut la &electarea unor op!iuni dintr,o li&t predefinit. Diecare op!iune care face parte din $locul L2#@#0>M &e introduce prin etic+eta 5BPT7BA9. En #-emplul 11.5 e&te con&truit un meniu derulant, din care izitatorul poate &electa op!iunea dorit. *tri$utul name are acela%i rol ca %i n etic+eta LIF67>M. 3ac izitatorul &electeaz din meniu zodia >aur, de e-emplu, la ap&area $utonului de e-pediere, &er erului i e&te tran&mi& perec+ea) /zodiaStaur/. *tri$utul si&e e&te &etat la aloarea /1/. 2etarea atri$utului &ize la aloarea /1/ creeaz o un meniu derulant cu o &in'ur op!iune izi$il ini!ial a%a cum &e poate o$&er a din Di'ura 11.5. ( emplul 11. 1 L=>?@M L=#*3M L>I>@#Mformulare5LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M?eniu derulantLG=1ML=5M LD.5? actionS/mailto)adre&ahIII.com/ met+odS/po&t/M 0are e&te zodia dumnea oa&tra<L15M L2#@#0> nameS/zodia/ &izeS/1/M L.6>I.FM1er$ec L.6>I.FM>aur L.6>I.FMAemeni L.6>I.FM5ac

L.6>I.FM@eu L.6>I.FMDecioara L.6>I.FM1alanta L.6>I.FM2corpion L.6>I.FM2a'etator L.6>I.FM0apricorn L.6>I.FMUar&ator L.6>I.FM6e&ti LG2#@#0>M LIF67> tIpeS/&u$mit/ alueS/e-pediaza/M LGD.5?M LG1.3KM LG=>?@M 3ac atri$utul &ize e&te &etat la o aloare mai mare dec(t 1 meniul a afi%a un numr de op!iuni e'al cu acea&t aloare %i a con!ine o $ar de derulare pentru a face acce&i$ile %i celelalte op!iuni. En Di'ura 11.6 poate fi zut un meniu la care aloarea atri$utului &ize e&te 6. ). #tic/eta 5T(CT.%(.9 0u a"utorul etic+etei 5T(CT.%(.9 5JT(CT.%(.9 pute!i in&era n pa'in o ca&et de te-t multi,linie care permite izitatorului & introduc un te-t mai lun', care &e poate ntinde pe mai multe linii. *cea&t etic+et &e folo&e%te atunci c(nd dorim & cerem izitatorului o opinie de&pre un anumit &u$iect, care nece&it introducerea unui te-t mai lun' dec(t o &in'ur linie 9ace&t element &e mai nume%te %i ca&et de comentarii;. L>#W>*5#*M e&te o etic+et container, deci nece&it etic+eta de nc+idere LG>#W>*5#*M. *tri$utele roFs %i cols &ta$ile&c numrul de linii, re&pecti de coloane rezer ate pentru introducerea te-tului. #-emplul 11.6 introduce n pa'in o ca&et pentru comentarii, a&pectul ace&teia fiind redat n Di'ura 11.7. ( emplul 11. : L=>?@M L=#*3M L>I>@#Mformulare6LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M0a&eta de comentariiLG=1ML=5M LD.5? actionS/mailto)adre&ahIII.com/ met+odS/po&t/M 0are e&te opinia dumnea oa&tra de&pre ace&t film<L15M L>#W>*5#* nameS/comentariu/ roC&S/10/ col&S/40/MLG>#W>*5#*ML15M LIF67> tIpeS/&u$mit/ alueS/e-pediaza/M LGD.5?M LG1.3KM LG=>?@M >oate elementele prezentate pot fi reunite ntr,un &in'ur formular &au pute!i crea formulare diferite, n func!ie de informa!iile pe care dori!i & le o$!ine!i de la izitatorii pa'inii.

3ac dori!i & introduce!i n pa'in mai multe formulare, &au elemente de tipuri diferite n cadrul aceluia%i formular, tre$uie & a e!i n edere a&pectele care !in de alinierea ace&tora. . po&i$ilitate de a alinia elementele con!inute ntr,un formular e&te folo&irea ta$elelor. #-emplul 11.7 con!ine elemente de mai multe tipuri ncadrate ntr,un formular unic. 6entru alinierea unora dintre ele am folo&it un ta$el. *&pectul pa'inii de&cri&e n ace&t document e&te cel din Di'ura 11.8. ( emplul 11. < L=>?@M L=#*3M L>I>@#Mformulare7LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M*linierea elementelorLG=1ML=5M LD.5? actionS/mailto)adre&ahIII.com/ met+odS/po&t/M L=3M0omandati 6izzaLG=3ML6M L6M0ate pizza doriti< LIF67> nameS/nrpizza/ alueS/0/ &izeS3 ma-len't+S3ML6M LIF67> tIpeS/radio/ nameS/marime/ alueS/mare/ c+ecJedM?areL15M LIF67> tIpeS/radio/ nameS/marime/ alueS/medie/M?edieL15M LIF67> tIpeS/radio/ nameS/marime/ alueS/normala/MFormala L6M>oppin',uriL6M LIF67> tIpeS/c+ecJ$o-/ nameS/toppin'/ alueS/&alam/M2alamL15M LIF67> tIpeS/c+ecJ$o-/ nameS/toppin'/ alueS/carnati/M0arnatiL15M LIF67> tIpeS/c+ecJ$o-/ nameS/toppin'/ alueS/&unca/M2uncaL15M LIF67> tIpeS/c+ecJ$o-/ nameS/toppin'/ alueS/ciuperci/M0iuperciL15M LIF67> tIpeS/c+ecJ$o-/ nameS/toppin'/ alueS/ceapa/M0eapaL15M LIF67> tIpeS/c+ecJ$o-/ nameS/toppin'/ alueS/ma&line/M?a&line L6M L>*1@# Cidt+S/60:/M L>5M L>3 Cidt+S/20:/MFumele L>3MLIF67> tIpeS/te-t/ nameS/nume/M L>5M L>3 Cidt+S/20:/M>elefonul L>3MLIF67> tIpeS/te-t/ nameS/telefon/M L>5M L>3 Cidt+S/20:/M*dre&a L>3ML>#W>*5#* nameS/adre&a/ roC&S6 col&S50MLG>#W>*5#*M L>5M L>3 Cidt+S/20:/MFumrul cartii de credit L>3MLIF67> tIpeS/pa&&Cord/ nameS/creditcard/ &izeS20M LG>*1@#M L6M L0#F>#5M LIF67> tIpeS/&u$mit/ alueS/>rimite comanda/M LG0#F>#5M LGD.5?M LG1.3KM LG=>?@M

+. Ca!idarea date!or 7nul dintre a&pectele importante pe care tre$uie & le a e!i n edere atunci c(nd folo&i!i formulare n pa'inile dumnea oa&tr e&te alidarea datelor introdu&e de izitatorii lor. @im$a"ul =>?@ ofer relati pu!ine in&trumente pentru ndeplinirea ace&tei &arcini. >otu%i, a e!i la di&pozi!ie c(te a po&i$ilit!i. Dolo&i!i atri$utul ma-len't+ atunci c(nd introduce!i un c(mp de editare, pentru a mpiedica izitatorul & introduc un numr eronat de caractere. 3e e-emplu, dac cere!i introducerea ntr,o ca&et de te-t a codului numeric per&onal, acea ca&et nu tre$uie & permit introducerea a mai mult de 13 caractere, un c(mp de editare care cere introducerea codului po%tal nu tre$uie & permit introducerea a mai mult de 4 caractere, etc. 6entru a a&i'ura c izitatorul introduce date corecte ntr,un c(mp de editare 9de e-emplu o adre& de mail alid tre$uie & con!in o$li'atoriu caracterul /h/; nu e-i&t in&trumente =>?@. 6entru a realiza a&tfel de &arcini &unt nece&are &cripturi Ba a2cript. En capitolul DavaScript e!i '&i &cripuri utile care fac po&i$ile alidrile datelor, nc din momentul introducerii lor. Dolo&i!i de c(te ori e&te po&i$il $utoanele radio, ca&etele de alidare %i meniurile, pentru a &implifica proce&ul de introducere a datelor. Di!i c(t mai e-plicit, a&i'ura!i indica!iile nece&are pentru completarea formularelor, preciz(nd, unde e&te cazul, dac pot fi &electate mai multe op!iuni &au numai una &in'ur. .ten!ieH *&i'ura!i, c &criptul care prelucreaz informa!iile din formular are facilit!i de 'e&tionare a erorilor. 3ac e&te &emnalat o eroare, furniza!i izitatorului un me&a" de eroare e-plicit %i, e entual, c(te a corec!ii po&i$ile. 7na dintre cele mai fru&trante &itua!ii e&te ca dup completarea unui formular comple-, la apari!ia unei erori, izitatorul & fie ne oit & reia completarea inte'ral a formularului. # ita!i ace&t lucru utiliz(nd &cripturi care returneaz utilizatorului formularul completat, a (nd c(mpurile 're%ite marcate pentru corectare. Fu uita!i un amnunt foarte important) informa!iile introdu&e de izitatori n formulare &unt nece&are dumnea oa&tr, pentru a m$unt!i eficien!a %i calitatea &ite,ului &au c+iar pentru a derula afaceri prin intermediul &u. 3e aceea corectitudinea ace&tor date e&te e&en!ial. Dace!i n a%a fel nc(t izitatorii &ite,ului dumnea oa&tr & completeze u%or %i cu plcere formularele prezente n pa'ini. ,. -e.umat Dormularele &er e&c la &ta$ilirea unei le'turi interacti e cu izitatorii unei pa'ini 4e$ %i la o$!inerea de informa!ii de la ace%tia. 7n formular &e introduce n pa'in cu a"utorul etic+etei LD.5?M LGD.5?M. En cadrul ace&tei etic+ete pot fi inclu&e di er&e elemente care fac parte din formular)

prin etic+eta LIF67>M pot fi introdu&e c(mpuri de editare, c(mpuri de tip pass ord, $utoane radio, ca&ete de &elec!ie, $utoane de e-pediere, $utoane de anulare %i $utoane o$i%nuite prin etic+eta L2#@#0>M pot fi introdu&e meniuri derulante, fiecare element al meniului fiind introdu& prin etic+eta L.6>I.FM prin etic+eta L>#W>*5#*M pot fi introdu&e c(mpuri de editare multilinie. 6entru a &pecifica unde or fi trimi&e datele introdu&e n formular &e folo&e%te atri$utul action al etic+etei LD.5?M. 6entru a &ta$ili modul n care ace&te date &unt tran&mi&e &e folo&e%te atri$utul met+od al etic+etei LD.5?M. Dormularele reprezint partea izi$il a proce&ului de interac!iune cu izitatorul pa'inii 4e$. .dat ce datele au fo&t introdu&e n c(mpurile formularului, ele tre$uie tran&mi&e, prelucrate %i &tocate, n func!ie de ne oile creatorului pa'inii. *ce&t lucru &e realizeaz cu a"utorul &cripturilor 0AI in&talate pe &er er, de&pre care om or$i n capitolul urmtor. 3. Test 1. Ce atribut indic bro serului unde s trimit informaiile din formular9 a; $; c; input action met+od

2. Care dintre aceste valori nu aparine atributului met+od< a; $; c; Aet =ref 6o&t

3. Care dintre urmtoarele afirmaii este fals9 a; $; c; 6rin etic+eta LIF67>M &e pot introduce n formular c(mpuri de editare de tip pass ord. 6rin etic+eta LIF67>M &e pot introduce n formular $utoane radio. 6rin etic+eta LIF67>M &e pot introduce n formular meniuri derulante.

4. &entru a introduce 6n formular un buton de expediere se folose7te construcia4 a; $; c; LIF67> tIpeS/re&et/M LIF67> tIpeS/&u$mit/M LIF67> tIpeS/forCard/M

). .ie urmtoarea construcie4 LD.5? actionS/mailto)adre&ahIII.com/ met+odS/po&t/M LIF67> tIpeS/radio/ nameS/lim$a/ alueS/romana/M@im$a romana LIF67> tIpeS/radio/ nameS/lim$a/ alueS/'ermana/M@im$a 'ermana LIF67> tIpeS/radio/ nameS/lim$a/ alueS/ma'+iara/M@im$a ma'+iara LGD.5?M

Dac este bifat opiunea (imba romana, care este perechea nume2valoare care va fi transmis serverului9 a; $; c; /lim$aS@im$a romana/ /lim$aSromana/ /radioSromana/

+. Care este diferena dintre un cHmp de editare de tip text 7i unul de tip pass ord9 a; Entr,un c(mp de tip te-t &e pot introduce mai multe linii, ntr,unul de tip pass ord o &in'ur linie. $; Entr,un c(mp de tip te-t caracterele introdu&e &unt afi%ate, ntr,unul de tip pass ord &unt nlocuite cu a&teri&curi. c; 0(mpul de editare &e introduce cu a"utorul etic+etei LIF67>M, c(mpul de tip pass ord &e introduce cu a"utorul etic+etei L2#@#0>M. ,. &entru a insera 6ntr!un formular o caset de validare se folose7te eticheta LIF67>M cu atributul tIpe setat la valoarea4 a; $; c; /radio/ /c+ecJ$o-/ /option/

3. Ce reali8ea8 eticheta L2#@#0>M9 a; $; c; Introduce un $uton de anulare. Introduce un meniu derulant. Introduce o li&t de ca&ete de alidare.

4. (a ce serve7te eticheta L>#W>*5#*M9 a; $; c; 2ta$ile%te zona din ferea&tra $roC&erului care e&te rezer at pentru te-t. Introduce n formular un c(mp de editare multi,linie. Introduce n formular un c(mp de editare pe o &in'ur linie.

1;. Care dintre urmtoarele afirmaii este fals9 a; 3atele introdu&e n formular &unt trimi&e la &er er, dac e&te folo&it un &cript 0AI. $; 3atele introdu&e n formular &unt trimi&e la o adre& de mail &pecificat, dac e&te folo&it comanda mailto) c; 3atele introdu&e n formular &unt &tocate pe +ard,di&J,ul izitatorului pa'inii.

*ormulare
1. $; '. $; +. c; 0. $; 1. $; :. $;

<. $; =. $; >. $; 1@. c;

Capitolul 1' Scripturi C?7 6ro'ramare 0AI, &cripturi 0AI &unt cu inte care &t(rne&c, cel mai ade&ea, teama. ?ultora dintre cei care dore&c & creeze pa'ini 4e$ %i nu &unt pro'ramatori profe&ioni%ti acea&t zon le apare mi&terioa& %i dificil de n!ele&. En ace&t capitol om n !a c+e&tiunile fundamentale %i principiile care 'u erneaz realizarea ace&tor &cripturi precum %i modul lor de utilizare. Ue!i con&tata c, de%i realizarea unui &cript e&te de&tul de la$orioa& %i nece&it cunoa%terea aprofundat a cel pu!in unui lim$a" de pro'ramare 90YY &au 6erl;, nu a fi deloc 'reu & n!ele'e!i modul cum &unt ele concepute. Ue&tea $un e&te aceea c, de%i &tp(nirea unui lim$a" de pro'ramare e&te $ine enit, nu e&te a$&olut nece&ar pentru a putea utiliza &cripturi 0AI n pa'inile dumnea oa&tr. Fu e&te ne oie & crea!i propriile dumnea oa&tr &cripturi. 6e 4e$ e-i&t mii de &cripturi 'ratuite care pot fi de&crcate %i utilizate conform propriilor nece&it!i. >ot ceea ce a e!i de fcut e&te & n!ele'e!i principiile dup care &unt realizate, modul lor de func!ionare %i maniera n care tre$uie & le &eta!i pentru a le adapta ne oilor dumnea oa&tr. 1. Ce este CA(? 2 ncepem prin a preciza ce nu e&te C?7) nu e&te un lim$a" de pro'ramare. 0AI, pre&curtare de la Common ,ate a$ 'nterface, e&te un protocol standard de comunicare ntre documentele 4e$ %i aplica!iile localizate pe &er erul 4e$. Scripturile C?7 &unt pro-rame care re&pect ace&t protocol 9un protocol e&te un &et de re'uli;. 7n &cript 0AI e&te, deci, un pro'ram care comunic ntr,un anumit mod cu pa'ina dumnea oa&tr. #-i&ten!a ace&tui protocol de comunicare ntre pro'ramele de pe &er er %i documentele 4e$ permite crearea unor pa'ini interacti e %i dinamice, lucru care nu poate fi fcut folo&ind doar =>?@. *tunci c(nd $roC&erul &olicit un &cript 0AI aflat pe &er er, &er erul lan&eaz n e-ecu!ie &criptul %i i tran&mite ace&tuia +eaderele =>>6 de cerere primite de la $roC&er. 3up ce e-ecu!ia &criptului &e nc+eie, rezultatele &unt tran&mi&e &er erului, care formateaz +eaderele de r&pun& %i le tran&mite $roC&erului pentru ca ace&ta & afi%eze rezultatele. . alt po&i$ilitate e&te ca &criptul & con!in in&truc!iuni prin care +eaderele de r&pun& &unt confi'urate c+iar de &cript %i tran&mi&e de ace&ta direct $roC&erului. Indiferent dac &olicit un document 4e$ &au un &cript, $roC&erul tre$uie & cunoa&c loca!ia &er erului 4e$ %i numele fi%ierului &olicitat. *cea&t informa!ie i e&te tran&mi& $roC&erului prin intermediul atri$utului action al etic+etei LD.5?M care prime%te drept aloare adre&a 75@ a &criptului &tocat pe &er er. 3e o$icei, &cripturile 0AI &unt &tocate pe &er er ntr,un director &pecial de&tinat lor, care &e nume%te c&i-<in. 2. Trans'eru! date!or

*%a cum am zut n capitolul anterior, datele pe care dorim & le o$!inem de la izitatorul pa'inii &unt colectate prin intermediul formularelor. 3atele a&tfel colectate &unt tran&mi&e de ctre $roC&er la &er erul pe care e&te in&talat &criptul 0AI prin intermediul +eaderelor =>>6 de cerere. 0ele mai importante +eadere =>>6 de cerere &unt ?et %i Post. 6rin intermediul atri$utului met+od al etic+etei LD.5?M e&te &pecificat ce tip de +eader =>>6 de cerere e&te utilizat pentru a tran&fera datele la &er er. 3ac metoda folo&it e&te Aet, datele &unt tran&mi&e prin intermediul adre&ei 75@. 3ac folo&i!i metoda 6o&t datele &unt tran&mi&e &u$ forma unui fi%ier &eparat. #&te recomandat folo&irea metodei 6o&t atunci c(nd olumul de date tran&mi&e e&te mare 9dep%e%te 1024 de octe!i, lun'imea ma-im a unui 75@;. 3up ce metoda de tran&mitere e&te &ta$ilit, $roC&erul creeaz un +eader =>>6 de cerere prin care e&te identificat localizarea &criptului pe &er er %i apoi tran&mite +eaderul la &er er. 2er erul recep!ioneaz +eaderul de cerere %i apeleaz &criptul 0AI. .dat datele a"un&e la &er er, &criptul e&te lan&at n e-ecu!ie iar datele i &unt tran&mi&e ace&tuia prin intermediul unui tip &pecial de aria$ile numite variabile de mediu 9dac folo&i!i metoda Aet; &au prin intermediul fi%ierului &tandard de intrare 9dac folo&i!i metoda 6o&t;. 2criptul 0AI e-ecut &arcinile pentru care a fo&t conceput %i o$!ine anumite rezultate care urmeaz a fi tran&mi&e $roC&erului prin intermediul unor +eadere =>>6 de r&pun&. 3e o$icei, &criptul confi'ureaz un &in'ur +eader de r&pun&, %i anume 0ontent,>Ipe. *ce&t +eader comunic $roC&erului tipul de date care i or fi returnate) documente =>?@, ima'ini &au alt tip de fi%iere. 2er erul adau' %i el +eadere =>>6 de r&pun& &uplimentare, apoi &tr(n'e toate rezultatele %i +eaderele de r&pun& ntr,un pac+et care e&te tran&mi& $roC&erului. 1roC&erul l recep!ioneaz %i afi%eaz informa!iile primite n modul de&cri& de +eaderele de r&pun&. 3. #xecuia scriptu!ui 0e face &criptul 0AI dup ce e&te lan&at n e-ecu!ie< 5&pun&ul e&te &implu) e-ecut &arcinile pentru care a fo&t con&truit. 2arcinile pe care le poate realiza un &cript &unt di er&e %i numeroa&e. Iat c(te a e-emple) manipularea informa!iilor introdu&e prin intermediul formularelor manipularea +r!ilor de ima'ini 'enerarea contoarelor care monitorizeaz numrul de acce&ri ale pa'inii 9hit counters; con&truirea de motoare de cutare admini&trarea licita!iilor on!line crearea de aplica!ii interacti e cum ar fi forumurile &au camerele de c+at crearea %i manipularea $azelor de date 0um am mai &pu&, &crierea unui &cript care ndepline%te a&tfel de &arcini nu e&te &impl. 6entru a putea concepe un &cript e&te nece&ar cunoa%terea aprofundat a unui lim$a" de pro'ramare. 2unt utilizate lim$a"e ariate pentru realizarea &cripturilor) 6erl, 0 &au 0YY, Ui&ual 1a&ic, etc. 3e&crierea ace&tor lim$a"e %i a principiilor de pro'ramare dep%e%te cu mult o$iectul ace&tei cr!i. 3e altfel, a%a cum &puneam, pentru a con&trui o pa'ina 4e$ interacti cu a"utorul &cripturilor 0AI, nu e&te nece&ar & le crea!i c+iar dumnea oa&tr. 6e 4e$ e-i&t foarte multe &ite,uri care pun la di&pozi!ia izitatorilor mii de &cripturi 'ratuite. 3e o$icei ele &unt n&o!ite de in&truc!iuni de in&talare %i utilizare. 6ute!i ale'e dintre ace&tea pe acelea care &ati&fac cerin!ele dumnea oa&tr. >otu%i, pentru a face o ale'ere n cuno%tin! de cauz precum %i pentru a putea & face!i modificrile nece&are in&talrii %i func!ionrii &criptului, a e!i ne oie & cunoa%te!i c(te a no!iuni le'ate de &tructura unui &cript 0AI.

4. Structura unui script 2tructura unui &cript 0AI con!ine urmtoarele &ec!iuni) citirea datelor introdu&e prin intermediul formularului prelucrarea datelor %i efectuarea &arcinilor impu&e de pro'ramator afi%area rezultatelor. Citirea date!or 7nul dintre elementele de $az cu care lucreaz un &cript l con&tituie variabilele de mediu. Uaria$ilele de mediu &unt o cate'orie &pecial de aria$ile, folo&ite de &er er n proce&ul de e-ecu!ie al &criptului. *ce&te aria$ile con!in informa!ii de&pre &er er, de&pre $roC&er %i de&pre datele introdu&e de utilizator. Fumrul aria$ilelor de mediu e&te de&tul de mare, dar e-i&t c(te a care au o importan! &pecial pentru &cript. *ce&tea &unt) %(L#(STPM(THB6 L#(%IPST%7A? CBAT(ATPL(A?TH Uaria$ila de mediu %(L#(STPM(THB6 poate a ea cele dou alori de&pre care am mai amintit) Aet %i 6o&t. 6rin intermediul ei &er erul informeaz &criptul a&upra modului cum i &unt tran&mi&e datele. *%a cum am n !at n capitolul anterior, datele introdu&e de utilizator &unt tran&mi&e n perec+i numeG aloare. Uaria$ila de mediu L#(%IPST%7A? e&te folo&it pentru a re!ine datele de intrare n cazul folo&irii metodei Aet iar aria$ila CBAT(ATPL(A?TH e&te folo&it pentru a &pecifica lun'imea %irului de caractere citit din fi%ierul de intrare, n cazul folo&irii metodei 6o&t. Transmiterea datelor prin metoda ?et 0(nd &er erul folo&e%te metoda ?et datele introdu&e n formular &unt adu'ate la &f(r%itul adre&ei 75@ a &criptului. 6entru a face lucrurile mai clare, & luam un e-emplu. & pre&upunem c n pa'ina dumnea oa&tr &e afl un formular care con!ine dou c(mpuri de editare numite /nume/ %i /prenume/. 0u alte cu inte codul formularului dumnea oa&tr a arta a&tfel) LD.5? actionS/c'i,$inG&cript.c'i/ met+odS/Aet/M LIF67> tIpeS/te-t/ nameS/nume/MIntroduceti numele LIF67> tIpeS/te-t/ nameS/prenume/MIntroduceti prenumele LIF67> tIpeS/&u$mit/M LGD.5?M 2 mai pre&upunem c izitatorul introduce n c(mpul /nume/ aloarea /6ope&cu/ iar n c(mpul /prenume/ aloarea /Ion/ %i c adre&a 75@ a &criptului no&tru e&te CCC.+tml.comGc'i, $inG&criptulmeu.c'iG

*tunci &er erului i e&te tran&mi& urmtoarea adre& 75@) +ttp)GGCCC.+tml.comGc'i,$inG&criptulmeu.c'iG<numeS6ope&cu\prenumeSIon 8irul de caractere de dup &emnul de ntre$are e&te depu& n [7#5KV2>5IFA. Transmiterea datelor prin metoda Post ?etoda Post e&te cea mai folo&it n tran&miterea datelor. *tunci c(nd datele &unt trimi&e prin acea&t metod, ele &unt furnizate &criptului prin intermediul ,iierului standard de intrare, ST67A. 6entru a preciza &criptului lun'imea %irului de caractere 9numrul de octe!i; pe care l are de citit, acea&ta e&te re!inut n aria$ila de mediu 0.F>#F>V@#FA>=. Indiferent de metoda folo&it, dup citirea datelor &criptul tre$uie & le decodifice, adic & elimine din %irul de caractere primit toate caracterele care nu au fo&t introdu&e de utilizator) /\/, /S/ %i altele. 3up citirea %i decodificarea datelor &criptul e-ecut in&truc!iunile de proce&are a lor %i pre'te%te r&pun&ul pentru &er er. 1'iarea re.u!tate!or En 'eneral, r&pun&urile pe care &criptul le tran&mite &er erului &e mpart n dou cate'orii) 2arcina a fo&t ndeplinit cu &ucce& 2arcina nu a fo&t ndeplinit, au aprut erori. 3ac e-ecu!ia &criptului e&te ncununat de &ucce& iar &arcinile &ale au fo&t ndeplinite, ace&ta tran&mite &er erului un r&pun& n con&ecin!. 3ac, din di er&e moti e, au aprut erori la e-ecu!ia &criptului iar ace&ta nu %i,a du& &arcinile la $un &f(r%it, &er erului i e&te prezentat un me&a" de eroare, care tre$uie & con!in informa!ii de&pre natura erorii aprute. 3e e-emplu, & pre&upunem c n pa'ina dumnea oa&tr a!i pla&at un formular care &olicit datele per&onale ale izitatorului, care &unt tran&mi&e unui &cript a crui &arcin e&te & trimit ace&te date la o adre& &pecificat de mail 9acea&ta e&te una dintre cele mai comune utilizri ale &cripturilor;. 3up ce izitatorul a introdu& datele iar &criptul %i,a nc+eiat e-ecu!ia, e&te $ine & afi%eze un me&a" pentru izitator prin care l informeaz c datele &ale au fo&t e-pediate. 6e de alt parte, dac a &ur enit o eroare la introducerea datelor, izitatorului tre$uie &,i fie oferit un me&a" prin care e&te informat de&pre ace&t lucru %i, n plu&, de&pre po&i$ilitatea de a remedia eroarea. ?e&a"ele pri ind rezultatele e-ecu!iei pot fi trimi&e de &cript &er erului, care formateaz +eaderele =>>6 de r&pun&, &au &criptul poate formata el n&u%i +eaderele %i poate trimite rezultatele direct la $roC&er. #-i&t trei tipuri fundamentale de +eadere de r&pun&) 1. 2. Content"TGpe Location aria$ila de mediu

3.

Status

Content"tGpe 1roC&erul dumnea oa&tr prime%te +eadere de tipul 0ontent,>Ipe ori de c(te ori prime%te de la &er er un document =>?@, o ima'ine &au orice alt tip de fi%ier. Indiferent de natura fi%ierului tran&mi& de la &er er la $roC&er, &er erul a a&ocia fi%ierului ace&t +eader pentru a comunica $roC&erului tipul fi%ierului trimi&. >ipurile de fi%iere care pot fi tran&mi&e $roC&erului &unt a&ociate &u$ numele de tipuri M7M( 9Multipurpose 'nternet Mail 5xtensions;. 0la&ificarea &e $azeaz pe con!inutul fi%ierului trimi&. Iat cele %apte tipuri ?I?# fundamentale) >e-t ?ultipart ?e&&a'e *pplication Ima'e *udio Uideo Diecare dintre ace&te tipuri are un numr de &u$,tipuri. =eaderul 0ontent,>Ipe &pecific at(t tipul c(t %i &u$tipul ?I?# al fi%ierului trimi&. Iat c(te a e-emple) , , , , >e-tG=>?@ >e-tGplain Ima'eG'if Ima'eG"pe'

Location *ce&t +eader con!ine adre&a 75@ a documentului pe care &criptul dore%te &,l trimit ca r&pun& ctre $roC&er. 3e e-emplu, dac r&pun&ul pe care dori!i &,l primea&c izitatorul pa'inii dup tran&miterea datelor e&te un document =>?@ care &e nume%te multumesc)html atunci &criptul a con!ine un +eader ca ace&ta) @ocation) multume&c.+tml urmat de o linie li$er. En ace&t mod $roC&erul e&te redirec!ionat ctre 75@,ul documentului re&pecti . En &itua!ia c(nd folo&i!i +eaderul @ocation pentru a afi%a r&pun&ul, &criptul nu a mai include +eaderul de r&pun& 0ontent,>Ipe. Status =eaderul 2tatu& returneaz ctre $roC&er un cod format din trei cifre mpreun cu un te-t e-plicati . *!i zut de foarte multe ori ace&t +eader n &itua!iile c(nd cererea trimi& de $roC&er nu a fo&t ndeplinit, iar documentul &olicitat nu a putut fi furnizat de ctre &er er. Iat c(te a dintre cele mai cuno&cute coduri de &tatu&)

400 j 1ad reTue&t j apare n &itua!ia c(nd &inta-a +eaderului =>>6 de cerere a fo&t eronat 401 j 7naut+orized j apare c(nd, pentru a o$!ine documentul &olicitat, &unt nece&are anumite pri ile'ii de acce& 403 j Dor$idden j apare c(nd &er erul refuz acce&ul la document 404 j Dile Fot Dound j apare n &itua!ia c(nd &er erul nu poate '&i documentul &olicitat ). #xemp!e de scripturi @im$a"ul cel mai folo&it pentru &crierea &cripturilor e&te 6erl. 0+iar dac nu cunoa%te!i ace&t lim$a", dac a e!i totu%i cuno%tin!e minime de pro'ramare, nu a fi 'reu & n!ele'e!i &tructura &cripturilor prezentate n continuare. 3in pcate, &pre deo&e$ire de documentele =>?@ care pot fi &cri&e ntr,un &implu editor de te-t %i apoi izualizate cu a"utorul $roC&erului, cu &cripturile lucrurile nu mai &tau a%a. 6erl e&te un lim$a" interpretat. *cea&ta n&eamn c pute!i &crie codul &ur& ntr,un editor de te-t, cum ar fi Fotepad. 3ar pentru ca &criptul & func!ioneze, &er erul tre$uie & ai$ in&talat un interpretor de 6erl. ?a"oritatea &er erelor 4e$ de!in un a&tfel de interpretor. 3ac dori!i & in&tala!i %i dumnea oa&tr un interpretor 6erl %i & te&ta!i func!ionarea &cripturilor prezentate n e-emplele de mai "o&, $a mai mult, dac dori!i & tran&forma!i propriul calculator ntr,un &er er 4e$ pe care & pute!i rula &cripturi 6erl, precum %i & te&ta!i func!ionarea ntre'ului &ite, e!i afla cum pute!i realiza ace&t lucru n ultima parte a ace&tui capitol. 6entru moment, iat c(te a e-emple &imple de &cripturi 6erl din care pute!i face o idee de&pre &tructura unui &cript %i &inta-a lim$a"ului 6erl. 0el mai &implu &cript e&te cla&icul e-emplu /#ello, orld J/prezentat n #-emplul 12.1. *ce&t &cript ilu&treaz modul n care &e realizeaz confi'urarea +eaderului de r&pun& 0ontent,>Ipe %i afi%area unui document =>?@. ( emplul 1'. 1 1 RNGu&rG$inGperl 2 3 print /0ontent,>Ipe) te-tG+tmlfnfn/] 4 5 print /L=>?@Mfn/] 6 print /L=#*3Mfn/] 7 print /L>I>@#M=ello 4orld NLG>I>@#Mfn/] 8 print /LG=#*3Mfn/] 9 print /L1.3KMfn/] 10 print /L=1M=ello 4orld NLG=1Mfn/] 11 print /L6Mfn/] 12 print /L=3M=a e a nice daILG=3Mfn/] 13 print /LG1.3KMfn/] 14 print /LG=>?@Mfn/] @iniile &criptului nu &unt, n 'eneral, numerotate, numerotarea &er ind aici doar la referirea lor mai u%oar. *ce&t e-emplu &implu realizeaz afi%area pe ecran a te-tului /=ello 4orld N/, %i a me&a"ului /=a e a nice daI/. Fu e-i&t o etap de citire a datelor, deoarece nu e-i&t date de intrare. @inia 1 con!ine calea &pre interpretorul 6erl aflat pe &er er. 3ac &i&temul &u$ care lucreaz &er erul e&te 7FIW, &emnul R tre$uie ndeprtat. En linia a 3,a e&te confi'urat +eaderul =>>6 de

r&pun&, 0ontent,>Ipe. *%a cum o$&er a!i, documentul care a fi tran&mi& $roC&erului e&te de tip te-t, %i anume un document =>?@. 2ec en!a de caractere /fn/ care &e repet la finalul fiecrei linii &e nume%te secven!$ escape. 5olul ace&teia e&te & realizeze, la afi%are, trecerea pe r(ndul urmtor. 6e linia n care e&te definit +eaderul 0ontent,>Ipe e&te o$li'atorie prezen!a a dou &ec en!e e&cape. >oate in&truc!iunile &criptului &unt in&truc!iuni de afi%are. 6rin intermediul lor, &criptul de&crie $roC&erului pa'ina 4e$ pe care urmeaz & o afi%eze. 2tructura pa'inii con!ine, dup cum ede!i, toate &ec!iunile nece&are) etic+eta de de&c+idere a documentului) L=>?@M, antetul) L=#*3M %i corpul documentului) L1.3KM. 3ac dori!i & te&ta!i func!ionarea &criptului, &crie!i,l n Fotepad %i &al a!i,l &u$ numele hello)pl 9e-ten&ia .pl indic un pro'ram &cri& n lim$a"ul 6erl. 2e mai poate folo&i %i e-ten&ia .b-i;. *poi in&tala!i &criptul n directorul cgi!bin al &er erului dumnea oa&tr. 3up e-ecutarea &criptului, pa'ina de r&pun& arat ca n Di'ura 12.1 #-emplul urmtor realizeaz preluarea datelor introdu&e de izitator prin intermediul unui formular %i afi%area lor pe ecran. Dormularul pentru introducerea datelor prezentat n #-emplul 12.2 con!ine doar ca&ete de te-t, n care or fi introdu&e numele, prenumele %i adre&a de mail. *tri$utul action al etic+etei LD.5?M trimite la &criptul script>)pl aflat n directorul cgi!bin al &er erului. *&pectul formularului e&te cel din Di'ura 12.2 ( emplul 1'. ' L=>?@M L=#*3M L>I>@#Mc'i2LG>I>@#M LG=#*3M L1.3KM LD.5? met+odS/6.2>/ actionS/c'i,$inG&cript2.pl/M Fumele) LIF67> tIpeS/te-t/ nameS/nume/ML15M 6renumele) LIF67> tIpeS/te-t/ nameS/prenume/ML15M *dre&a de email) LIF67> tIpeS/te-t/ nameS/email/ML15M LIF67> tIpeS/&u$mit/ alueS/>rimite/M LGD.5?M LG1.3KM LG=>?@M .$&er a!i c datele &unt tran&mi&e la &criptul script>)pl aflat n directorul cgi!bin, prin intermediul metodei 6o&t. #-emplul 12.3 ilu&treaz modul de con&truire al &criptului script>)pl. ( emplul 1'. + 1 RNGu&rG$inGperl 2 3 R 6la&area datelor tran&mi&e prin metoda 6o&t in aria$ile 4 5 read92>3IF, m$uffer, m#FUnl0.F>#F>V@#FA>=lo;]

6 7 8 9 10 11

hpair&S&plit9G\G, m$uffer;] foreac+ mpair 9hpair&; n 9mname, m alue;S&plit9GSG, mpair;] m alueSp trGYG G] m alueSp &G:9Pa,f*,D0,9QPa,f*,D0,9Q;GpacJ9/0/, +e-9m1;;Ge']

13 mD.5?nmnameoSm alue] 14 o 15 Rafi&area rezultatului 16 17 print /0ontent,tIpe) te-tG+tmlfnfn/] 18 19 print /L=>?@Mfn/] 20 print /L=#*3Mfn/] 21 print /L>I>@#M?ultume&cNLG>I>@#Mfn/] 22 print /LG=#*3Mfn/] 23 print /L1.3KMfn/] 24 print /L=1M?ultume&cNLG=1Mfn/] 25 print /L15Mfn/] 26 print /L=4M3atele introdu&e &unt)LG+4Mfn/] 27 print /L15Mfn/] 28 print /L=3MmD.5?nlnumelo mD.5?nlprenumeloLG=3Mfn/] 29 print /L=3MmD.5?nlemailloLG=3Mfn/] 30 print /LG1.3KMfn/] 31 print /LG=>?@Mfn/] 2e impun c(te a e-plica!ii. ?ai nt(i, o$&er a!i pe liniile 1, 3 %i 15 prezen!a caracterului R. *ce&ta e&te modul de a introduce comentarii ntr,un pro'ram 6erl. 0omentariile &unt e-trem de utile, mai ale& la &cripturi. 7n &cript necomentat e&te foarte 'reu de utilizat. 0a %i n cazul comentariilor introdu&e n documentele =>?@, ace&tea &unt i'norate la e-ecu!ie. 6rima &ec!iune a &criptului realizeaz citirea datelor. 3eoarece ace&tea au fo&t tran&mi&e prin metoda 6o&t, o$&er a!i c citirea &e face din fi%ierul &tandard de citire, 2>3IF. Entre liniile 5 %i 14 &e realizeaz citirea, decodificarea datelor %i pla&area lor n aria$ilele core&punztoare. 2ec en!a dintre liniile 16 %i 31 reprezint partea de afi%are a rezultatelor. 0a %i n e-emplul anterior, o$&er a!i c linia n care &e face formatarea +eaderului de r&pun& 0ontent,>Ipe nece&it prezen!a a dou &ec en!e e&cape /fnfn/. 2 pre&upunem c datele introdu&e n formular &unt) nume , Ione&cu prenume , ?aria adre&a de mail , ionmarhIa+oo.com. *tunci pa'ina 'enerat de &cript a arata ca n Di'ura 12.3 *pelul &cripturilor nu &e face numai prin intermediul formularelor. 2e poate realiza %i prin intermediul ima'inilor &au al le'turilor. 6rezentm n continuare o pa'ina 4e$ care apeleaz &criptul

ip)pl prin intermediul unei le'turi. 2criptul realizeaz afi%area adre&ei I6 a computerului pe care e&te in&talat. #-emplul 12.4 prezint documentul =>?@ n care e&te apelat &criptul. *&pectul pa'inii e&te cel din Di'ura 12.4 ( emplul 1'. 0 L=>?@M L=#*3M L>I>@#Mc'i4LG>I>@#M LG=#*3M L1.3KM LD.F> faceS/arial/ &izeS/4/M 6entru a afla adre&a dumnea oa&tra de I6 apa&ati L* +refS/c'i,$inGip.pl/M aiciLG*M LGD.F>M LG1.3KM LG=>?@M 2criptul ip)pl folo&e%te aria$ila de mediu 5#?.>#V*335 pentru a o$!ine adre&a I6. En #-emplul 12.5 e&te prezentat &criptul ip)pl. ( emplul 1'. 1 1 RNGu&rG$inGperl 2 3 print /0ontent,>Ipe) te-tG+tmlfnfn/] 4 5 print /L=>?@Mfn/] 6 print /L=#*3Mfn/] 7 print /L>I>@#Mc'i3LG>I>@#Mfn/] 8 print /LG=#*3Mfn/] 9 print /L1.3KMfn/] 10 print /L6Mfn/] 11 print /L=3M*dre&a I6 a computerului d &. e&te) m#FUn5#?.>#V*335o LG=3Mfn/] 12 print /LG1.3KMfn/] 13 print /LG=>?@Mfn/] @a ap&area linJ,ului din documentul =>?@ e&te apelat &criptul, care afi%eaz pa'ina de r&pun& din Di'ura 12.5 # ident, dac e!i rula &criptul pe alt computer, adre&a I6 o$!inut a fi diferit. 0(nd &criptul e&te apelat printr,un linJ nu e-i&t po&i$ilitatea de a i &e tran&mite date. +. (nsta!area interpretoru!ui :er! i a ap!icaiei :=S 6entru a putea erifica func!ionarea e-emplelor prezentate precum %i a &cripturilor pe care dori!i & le folo&i!i n cadrul &ite,ului dumnea oa&tr nainte de etapa pu$licrii pe 4e$ tre$uie & a e!i in&talat un interpretor 6erl. 6ute!i de&crca %i in&tala interpretorul *cti e 6erl izit(nd adre&a) +ttp)GGCCC.'o&&land.comGcour&eGin&tall.+tml

@a aceea%i adre& pute!i '&i %i aplica!ia ?icro&oft 6er&onal 4e$ 2er er 9642; care e&te furnizat de ?icro&oft n pac+etele 4indoC& 98 %i 4indoC& 2000. 5ecomandm de&crcarea aplica!iei de la adre&a men!ionat, care are a anta"ul c include o corec!ie a unui bug de in&talare e-i&tent n er&iunea oficial ?icro&oft. .ten!ieH ?icro&oft 6er&onal 4e$ 2er er &e poate in&tala pe computerul per&onal a (nd rolul de aplica!ie &er er. .dat in&talat, computerul dumnea oa&tr a func!iona ntocmai ca un &er er 4e$, a&tfel nc(t e!i putea te&ta func!ionarea &cripturilor in&talate precum %i func!ionarea ntre'ului &ite. 3in pcate, ?icro&oft nu furnizeaz o aplica!ie &er er &imilar %i n pac+etele 4indoC& ?ilenium %i 4indoC& W6 iar aplica!ia 642 nu func!ioneaz dec(t pe &i&temele 4indoC& 98 %i 2000. @a adre&a indicat e!i '&i ndrumri preci&e %i complete a&upra tuturor pa%ilor pe care i a e!i de urmat pentru a in&tala at(t interpretorul 6erl c(t %i aplica!ia 6er&onal 4e$ 2er er. En plu&, &ite,ul re&pecti con!ine %i un foarte $un cur& de ini!iere n lim$a"ul 6erl n lim$a en'lez. ,. -e.umat 0AI e&te un protocol de comunicare face le'tura dintre &cripturile aflate pe &er erul 4e$ %i documentele =>?@. 7n &cript 0AI e&te o aplica!ie care re&pect ace&t protocol. 6rintre cele mai folo&ite &cripturi 0AI &unt cele care &er e&c la proce&area informa!iilor introdu&e ntr,un formular. >ran&ferul datelor de la formular la &er erul pe care &e afl &criptul &e face printr,una dintre cele dou metode) Aet &au 6o&t. 3up ce datele au fo&t tran&mi&e la &er er, &criptul le cite%te %i le decodific, le prelucreaz conform in&truc!iunilor &ale %i tran&mite un r&pun& ctre $roC&er. 1roC&erul afi%eaz rezultatele trimi&e de &cript n conformitate cu +eaderele de r&pun& inclu&e n pac+etul de date tran&mi&. Capitolul 1+ DavaScript 1. Ce este Ba"aScript? Ba a2cript e&te un limbaE de pro-ramare orientat pe o$iecte, care permite & oferi!i pa'inilor dumnea oa&tr un caracter mai dinamic %i interacti . 3ac a!i parcur& prima parte a cr!ii %i a e!i cuno%tin!e minime de pro'ramare, nu e!i a ea dificult!i n n!ele'erea modului n care func!ioneaz ace&t lim$a". .ten!ieH Ba a2cript nu e&te acela%i lucru cu lim$a"ul Ba a. 3e fapt, de%i numele &unt a&emntoare, &unt dou lim$a"e foarte diferite. 2pre deo&e$ire de Ba a, care e&te un lim$a" orientat pe o$iecte, comple-, a&emntor cu lim$a"ul 0YY, Ba a2cript e&te mult mai &implu %i mai u%or de folo&it. En timp ce Ba a

e&te un lim$a" pentru pro'ramatori, Ba a2cript e&te de&tinat neprofe&ioni%tilor care dore&c & m$unt!ea&c a&pectul %i func!ionalitatea pa'inilor de 4e$. Ba a2cript a fo&t dez oltat de Fet&cape 0orporation pentru a fi utilizat n $roC&erul Fet&cape Fa i'ator. 7n &cript Ba a2cript poate fi pla&at direct n pa'ina 4e$, fiind e-ecutat de $roC&er mpreun cu documentul 4e$ care,l con!ine. 1roC&erul Internet #-plorer 9 er&iunile mai noi dec(t I# 3.0; e-ecut %i el corect &cripturile Ba a2cript. Ba a2cript e&te un lim$a" interpretat, ca %i 6erl, dar n cazul &u nu tre$uie & mai face!i 'ri"i n pri in!a in&talrii unui interpretor deoarece ace&ta e&te inclu& n $roC&er. 0odul &ur& poate fi inclu& n pa'ina 4e$ &au poate fi pu& ntr,un fi%ier &eparat care e&te referit din pa'in. 0a %i n cazul &cripturilor 0AI, nici n ace&t caz nu e&te a$&olut nece&ar cunoa%terea lim$a"ului Ba a2cript pentru a putea in&era %i utiliza cu &ucce& a&tfel de &cripturi. #-i&t un numr impre&ionant de &cripturi 'ata de utilizare, care &e pot inte'ra cu u%urin! n codul &ur& al documentelor dumnea oa&tr. 2. Cum poate 'i inc!us un script n pa&in*? 2cripturile Ba a2cript pot fi inclu&e n pa'ina 4e$ n dou moduri) prin intermediul etic+etei 5SC%7PT9 5JSC%7PT9 prin intermediul unei proceduri eveniment Iat un e-emplu foarte &implu n care n document e&te inclu& un &cript care afi%eaz n pa'in te-tul /1una ziuaN/ prin intermediul etic+etei L205I6>M. *&pectul ace&tei pa'ini e&te cel din Di'ura 13.1. ( emplul 1+. 1 L=>?@M L=#*3M L>I>@#M"a a&cript1LG>I>@#M LG=#*3M L1.3KM L=1M6rimul e-emplu Ba a2criptLG=1ML=5M L205I6> lan'ua'eS/Ba a2cript/M document.Crite9/1una ziuaN/; LG205I6>M LG1.3KM LG=>?@M 7nul dintre atri$utele etic+etei L205I6>M e&te lan-ua-e prin care e&te &pecificat lim$a"ul n care e&te &cri& &criptul, n cazul ace&ta aloarea atri$utului fiind /Ba a2cript/. . alt modalitate de a include de a include un &cript n pa'in e&te &al area ace&tuia ca un fi%ier e-tern %i apelarea &a prin intermediul atri$utului src al etic+etei L205I6>M. En e-emplele de &cripturi care or urma e!i o$&er a di er&e moduri n care pot fi inclu&e n pa'inile 4e$ &cripturi Ba a2cript. Fu om intra n amnunte pri ind &inta-a lim$a"ului, deoarece acea&ta dep%e%te &u$iectul ace&tei cr!i. >otu%i, pentru a putea folo&i "udicio& un &cript Ba a2cript tre$uie & a e!i o ima'ine de&pre elementele e&en!iale cu care lucreaz Ba a2cript, o$iectele %i e enimentele.

D<iecte 7n obiect e&te un nou tip de date, care reune%te &u$ aceea%i denumire at(t datele c(t %i func!iile care le prelucreaz. 3atele &e nume&c propriet$!ile o$iectului iar func!iile &e nume&c metodele o$iectului. 6entru a e-emplifica ace&te concepte, & pre&upunem c dorim & con&truim un o$iect care & reprezinte o carte de izit, pe care l om numi 0ard. *ce&t o$iect a a ea urmtoarele propriet!i) , nume , adre& , telefon 6entru a defini un o$iect &e folo&e%te o func!ie numit constructor. En e-emplul no&tru, func!ia con&tructor a o$iectului 0ard a arata a&tfel) function 0ard9num, adr, tel; n t+i&.numeSnum] t+i&.adre&aSadr] t+i&.telefonStel] o En ace&t moment, con&tructorul o$iectului 0ard nc nu e&te complet, el con!ine numai propriet!ile o$iectului. *cum & con&truim %i o metod care & lucreze cu ace&t o$iect. 3eoarece dorim & tiprim cr!ile de izit pe care le om realiza cu a"utorul ace&tui o$iect, om crea o func!ie care a tipri propriet!ile o$iectului, numit 6rint0ard9;. function 6rint0ard9; n document.Crite9/Fumele) /, t+i&.nume, /fn/;] document.Crite9/*dre&a) /, t+i&.adre&a, /fn/;] document.Crite9/>elefonul) /, t+i&.telefon, /fn/;] o *cum putem &crie defini!ia complet a o$iectului no&tru) function 0ard9num, adr, tel; n t+i&.numeSnum] t+i&.adre&aSadr] t+i&.telefonStel] t+i&.6rint0ardS6rint0ard] o 2 trecem, acum, la folo&irea unui o$iect. 6entru a crea un o$iect concret, adic o in&tan! a o$iectului 0ard, &e folo&e%te cu (ntul c+eie neC. 7rmtoarea in&truc!iune con&truie%te o in&tan! a o$iectului 0ard, care &e nume%te ana)

anaSneC 0ard 9/*na ?unteanu/, /2tr. *pu&ului, nr.2, 1ucure&ti/, /6162345/; .dat ce a fo&t creat o nou in&tan! a o$iectului 0ard, metoda 6rint0ard poate fi folo&it a&tfel) ana.6rint0ard9; 8i acum, & punem toate ace&te &ec en!e de cod laolalt %i & folo&im o$iectul ntr,o pa'in 4e$, pentru a afi%a mai multe cr!i de izit. #-emplul 13.2 realizeaz ace&t lucru. *&pectul pa'inii de&cri&e n document e&te cel din Di'ura 13.2. ( emplul 1+. ' L=>?@M L=#*3M L>I>@#M"a a&cript2LG>I>@#M L205I6> lan'ua'eS/Ba a2cript/M function 6rint0ard9; n document.Crite9/L1MFumele)LG1M /, t+i&.nume, /L15M/;] document.Crite9/L1M*dre&a)LG1M /, t+i&.adre&a, /L15M/;] document.Crite9/L1M>elefonul)LG1M /, t+i&.telefon, /L=5M/;] o function 0ard9num, adr, tel; n t+i&.numeSnum] t+i&.adre&aSadr] t+i&.telefonStel] t+i&.6rint0ardS6rint0ard] o LG205I6>M LG=#*3M L1.3KM L=1 ali'nS/center/M0rearea o$iectelorLG=1M Inceputul &criptuluiL=5M L205I6> lan'ua'eS/Ba a2cript/M GG 0rearea a trei o$iecte noi anaSneC 0ard 9/*na ?unteanu/, /2tr. *pu&ului, nr.2, 1ucure&ti/, /6162345/; ionSneC 0ard9/Ion 6ope&cu/, /2tr. gorilor nr.1, 6loie&ti/, /456789/;] raduSneC 0ard9/5adu Ione&cu/, /2tr. Foptii, nr.3, 6ite&ti/, /201202/;] GG *fi&area lor ana.6rint0ard9;] ion.6rint0ard9;] radu.6rint0ard9;] LG205I6>M 2far&itul &criptului LG1.3KM LG=>?@M 6ute!i o$&er a modul n care a fo&t inclu& &criptul n pa'ina 4e$. *&tfel, defini!ia &criptului e&te pla&at n antetul documentului =>?@, iar apelul &criptului e&te fcut n corpul documentului. En cadrul &criptului apar dou linii precedate de %irul de caractere /GG/. *ce&ta e&te modul n care &e introduc comentariile n cadrul &cripturilor Ba a2cript.

#"enimente En continuare om di&cuta de&pre un alt concept fundamental cu care lucreaz Ba a2cript, %i anume evenimentul. 7n e eniment e&te o ac!iune care &ur ine la un moment dat %i n urma creia e&te declan%at e-ecu!ia unei anumite pr!i din pro'ram. .ri de c(te ori izitatorul face clicJ pe o le'tur, de e-emplu, c(nd introduce un te-t &au c+iar c(nd trece cu mou&e,ul dea&upra unei zone a pa'inii, &ur ine un e eniment la care &criptul reac!ioneaz 'ener(nd un r&pun&. Iat care &unt tipurile de e enimente cu care lucreaz Ba a2cript) Tabel 1+. 1 (veniment on*$ort on1lur on0+an'e on0licJ on#rror onDocu& on@oad on?ou&e. er on?ou&e.ut on2elect on2u$mit on7nload 6escriere *pare c(nd utilizatorul renun! la ncrcarea unei ima'ini *pare c(nd un o$iect din pa'in pierde focu&ul *pare c(nd un c(mp de editare e&te modificat de utilizator 9c(nd &e introduce un te-t; *pare c(nd utilizatorul face clicJ pe un element *pare c(nd un document &au o ima'ine nu &e ncarc corect *pare c(nd un element prime%te focu&ul *pare c(nd o pa'in &au o ima'ine %i termin ncrcarea *pare c(nd cur&orul mou&e,ului &e plim$ dea&upra unui element *pare c(nd cur&orul mou&e,ului pr&e%te elementul *pare c(nd utilizatorul &electeaz un te-t *pare c(nd e&te ap&at un $uton de tip 2u$mit *pare c(nd utilizatorul pr&e%te documentul &au &e&iunea curent.

3up cum ede!i, prin intermediul Ba a2cript &e poate r&punde unui mare numr de e enimente. *ce&t lucru &e realizeaz prin crearea unei proceduri eveniment. 6rocedurile e eniment nu &unt definite cu a"utorul etic+etei L205I6>M ci ele &unt atri$ute ale celorlalte etic+ete. 3e e-emplu, iat o le'tur care include o procedur e eniment) L* +refS/+ttp)GGCCC.amazon.com/

on?ou&e. erS/ CindoC.&tatu&SH0ea mai mare li$rarie irtualaH] return true/M 0licJ aiciLG*M .$&er a!i c ntrea'a procedur e eniment care r&punde la e enimentul ?ou&e. er e&te inclu& n etic+eta L*M. 2unt &pecificate dou in&truc!iuni care &e e-ecut n momentul c(nd cur&orul mou&e, ului e&te pla&at dea&upra le'turii. 6rima afi%eaz un me&a" n $ara de &tatu& a fere&trei, urmtoarea returneaz aloarea true, pentru a mpiedica %ter'erea me&a"ului. ?ai o$&er a!i c me&a"ul care a fi afi%at e&te delimitat de apo&trofuri. 3ac procedura e eniment e&te mai e-tin&, includerea ei n ntre'ime ntr,o etic+eta de ine nepractic. En acea&t &itua!ie, e&te mai a anta"o& & con&truim o func!ie care & trateze e enimentul. Dunc!ia e&te definit n &ec!iunea L=#*3M a documentului, iar n corpul documentului e&te apelat ca procedur e eniment. 3e e-emplu, & pre&upunem c am con&truit o func!ie e eniment numit 0ite&te9;. *tunci ea poate fi apelat a&tfel) L* +refS/Rcuprin&/ on?ou&e. erS/0ite&te9;]/M?er'i la 0uprin&LG*M En momentul c(nd mou&e,ul &e afl dea&upra le'turii, func!ia e&te lan&at n e-ecu!ie. 3. Modu! de execuie a! scriptu!ui 2cripturile inte'rate n cadrul pa'inilor &unt e aluate dup ce ncrcarea pa'inii &,a nc+eiat dar nainte ca acea&ta & fie afi%at. 6e de alt parte, &cripturile &tocate ca fi%iere &eparate &unt e aluate naintea tuturor &cripturilor in!line 9adic a celor inclu&e n pa'in;. Dunc!iile definite n cadrul &cripturilor nu &unt e-ecutate automat la ncrcarea pa'inilor ci a$ia atunci c(nd ace&tea &unt apelate, fie prin etic+eta L205I6>M fie printr,o procedur e eniment. 3ac a!i zut reodat un &cript Ba a2cript ntr,o pa'in 4e$, poate a!i remarcat un lucru aparent ciudat) ntre'ul &cript e&te inclu& ntre etic+etele =>?@ de comentariu) LN, , comentariu , ,M. ?oti ul e&te faptul c e-i&t $roC&ere care nu recuno&c %i nu pot e-ecuta &cripturile Ba a2cript. 3ac un document 4e$ care con!ine cod Ba a2cript e&te ncrcat ntr,un a&emenea $roC&er, n loc ca &criptul & fie e-ecutat, e&te afi%at n pa'in ntre'ul cod, ceea ce nu e&te de dorit. *%a dup cum %ti!i, comentariile &unt i'norate de $roC&er, a&tfel c includerea codului Ba a2cript ntre etic+etele de comentariu a duce la i'norarea ace&tei pr!i a documentului. #-cep!ie fac $roC&erele care recuno&c Ba a2cript %i care or identifica prezen!a Ba a2cript %i or e-ecuta &criptul. En concluzie, maniera recomandat pentru introducerea n pa'in a unui &cript e&te urmtoarea) L205I6> lan'ua'eS/Ba a2cript/M LN , , 0od Ba a2cript GG , ,M LG205I6>M *m n !at p(n acum cum poate fi inclu& codul Ba a2cript ntr,un document =>?@. 2 edem, mai departe, cum putem folo&i &cripturile Ba a2cript pentru a face pa'inile mai atracti e %i a le m$unt!i func!ionalitatea.

4. Ce se poate 'ace cu Ba"aScript? En continuare &unt prezentate c(te a e-emple de &cripturi cu a"utorul crora &e pot realiza lucruri care dep%e&c po&i$ilit!ile lim$a"ului =>?@, cum ar fi afi%area datei curente n pa'ina dumnea oa&tr, de&c+iderea unei fere&tre pop,up, afi%area unui me&a" n $ara de &tatu& a fere&trei $roC&erului, afi%area aleatoare a unor me&a"e n pa'in, ima'ini care %i &c+im$ a&pectul la trecerea mou&e,ului, %i, una dintre cele mai utile aplica!ii Ba a2cript, alidarea formularelor. 1'iarea unui mesaE n <ara de status *ce&t e-emplu ilu&treaz modul cum &e poate afi%a un me&a" n $ara de &tatu& 9aflat la $aza fere&trei $roC&erului; la trecerea cu mou&e,ul pe&te un anumit element din pa'in. 3e o$icei, ace&t element e&te un linJ &au o ima'ine. En #-emplul 13.3, elementul e&te o ima'ine. *&pectul pa'inii care con!ine &criptul e&te cel din Di'ura 13.3. ( emplul 1+. + L=>?@M L=#*3M L>I>@#M"a a&cript3LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M?e&a" in &tatu& $arLG=1ML=5M L=3M?e&a"ul apare la pla&area mou&e,ului pe ima'ineLG=3M LI?A &rcS/..GIma'iniGti'er.'if/ on?ou&e. erS/CindoC.&tatu&Sl*ce&ta e&te un ti'rul] return true/ on?ou&e.utS/CindoC.&tatu&Sl l]return true/M LG1.3KM LG=>?@M 1'iarea datei curente n pa&in* 2criptul urmtor preia data &i&temului de operare al utilizatorului %i o afi%eaz n pa'in. # ident, dac data &i&temului e&te &etat incorect, ea a aprea n pa'in ca atare. #-emplul 13.4 con&truie%te o pa'in 4e$ care con!ine un a&tfel de &cript, a&pectul pa'inii fiind redat n Di'ura 13.4. ( emplul 1+. 0 L=>?@M L=#*3M L>I>@#M"a a&cript4LG>I>@#M L205I6> lan'ua'eS/"a a&cript/M LN,, ar zi, data, luna aziSneC 3ate9; if9azi.'et3aI9SS0;n ziS/3uminica, / o el&e if9azi.'et3aI9;SS1;n ziS/@uni, / o el&e if9azi.'et3aI9;SS2;nziS/?arti, /o el&e if9azi.'et3aI9;SS3;nziS/?iercuri, /o el&e if9azi.'et3aI9;SS4;nziS/Boi, /o el&e if9azi.'et3aI9;SS5;nziS/Uineri, /o el&e if9azi.'et3aI9;SS6;nziS/2am$ata, /o if9azi.'et?ont+9;SS0;nlunaS/Ianuarie /o el&e if9azi.'et?ont+9;SS1;nlunaS/De$ruarie/o el&e if9azi.'et?ont+9;SS2;nlunaS/?artie/o

el&e if9azi.'et?ont+9;SS3;nlunaS/*prilie/o el&e if9azi.'et?ont+9;SS4;nlunaS/?ai/o el&e if9azi.'et?ont+9;SS5;nlunaS/Iunie/o el&e if9azi.'et?ont+9;SS6;nlunaS/Iulie/o el&e if9azi.'et?ont+9;SS7;nlunaS/*u'u&t/o el&e if9azi.'et?ont+9;SS8;nlunaS/2eptem$rie/o el&e if9azi.'et?ont+9;SS9;nlunaS/.ctom$rie/o el&e if9azi.'et?ont+9;SS10;nlunaS/Foiem$rie/o el&e if9azi.'et?ont+9;SS11;nlunaS/3ecem$rie/o dataSazi.'et3ate9; GG,,M LG205I6>M LG=#*3M L1.3KM L=1 ali'nS/center/M3ata calendari&ticaLG=1ML=5M LD.F> &izeS/3/ colorS/$lacJ/ faceS/arial/M*zi &untem in data de) L205I6> lan'ua'eS/Ba a2cript/M LN,, LD.F> &izeS/4/ colorS/red/ faceS/arial/M document.Crite9ziYl lYdataYl lYluna; GG,,M LG205I6>MLGD.F>M LG1.3KM LG=>?@M 0erestre pop-up 7nul din lucrurile care nu &e pot realiza folo&ind doar =>?@ e&te afi%area me&a"elor pop-up. *ce&te me&a"e apar ntr,o mic ferea&tr care &e nc+ide atunci c(nd e-ecuta!i o anumit ac!iune, de o$icei clicJ pe un $uton, &au pe un linJ. En #-emplul 13.5 e&te con&truit pa'ina principal din care e&te apelat ferea&tra pop!up. ( emplul 1+. 1 L=>?@M L=#*3M L>I>@#M"a a&cript5LG>I>@#M L205I6> lan'ua'eS/Ba a2cript/M LN,, function de&c+ide9; niCinSCindoC.open9/"a a&cript6.+tml/, /I4IF/, /&tatu&Sno, tool$arSno, locationSno, menuSno, Cidt+S200, +ei'+tS200/;]o GG,,M LG205I6>M LG=#*3M L1.3KM L=1 ali'nS/center/MDerea&tra pop,upLG=1ML=5M *cea&ta pa'ina demon&treaza cum poate fi creata o ferea&tra pop,upL15M Derea&tra &e de&c+ide la apa&area pe le'atura de mai "o& &i &e inc+ideL15M cand e&te apa&at $utonul .XL15M 3e&c+ide ferea&tra

L* +refS/R/ on0licJS/de&c+ide9;]/MaiciLG*M. LG1.3KM LG=>?@M Dire%te c tre$uie creat un document &eparat, care a fi afi%at n ferea&tra pop!up. En #-emplul 13.6 e&te con&truit documentul =>?@ 9;avascript=)html; care a fi afi%at n ferea&tra pop!up definit n e-emplul anterior. ( emplul 1+. : L=>?@M L=#*3M L>I>@#M"a a&cript6LG>I>@#M LG=#*3M L1.3KM L=3 ali'nS/center/M>e&t pop,upLG=3M LD.F> colorS/'reen/ faceSarialM*ti in atat &a creati o ferea&tra pop,upL15M *pa&ati .X ca &a re eniti in ferea&tra initiala L6M LD.5? nameS/form1/M LIF67> tIpeS/$utton/ alueS/.X/ on0licJS/CindoC.clo&e9;]/M LGD.5?M LG1.3KM LG=>?@M *&pectul pa'inii %i al fere&trei pop!up e&te redat n Di'ura 13.5. 6ute!i modifica documentul =>?@ care &e a de&c+ide n ferea&tra pop!up dup dorin! %i l pute!i &al a &u$ alt nume. Fu uita!i, n&, & face!i modificarea core&punztoare n func!ia de&c+ide9; din &cript. 1'iarea a!eatoare a unor mesaEe n pa&in* 7nul dintre lucrurile care i fac pe izitatorii pa'inii dumnea oa&tr & re in la ea cu re'ularitate e&te arietatea, fie n a&pect, fie, mai ale&, n con!inut. 7n mod de a face pa'inile mai ariate e&te de a afi%a di er&e me&a"e, citate &au ima'ini care & &e &c+im$e de fiecare dat c(nd e&te acce&at pa'ina. En #-emplul 13.7 e&te prezentat un &cript care realizeaz afi%area aleatoare a unui citat, ale& dintr, un %ir predefinit. *&pectul ace&tei pa'ini e&te redat n Di'ura 13.6. ( emplul 1+. < L=>?@M L=#*3M L>I>@#M"a a&cript7LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/M0itateLG=1ML=5M L205I6> lan'ua'eS/Ba a2cript/M LN,, citatSneC *rraI95;] autorSneC *rraI95;]

citatP0QS/.mul care,&i cunoa&te limitele e&te &in'urul care are &an&e &a o$tina ce rea./] autorP0QS/Aoet+e/] citatP1QS/6e &tancile cele mai inalte a"un' numai ulturii &i reptilele./] autorP1QS/?onte&Tuieu/] citatP2QS/6utine lucruri &unt atat de 'reu de &uportat ca un e-emplu $un./] autorP2QS/?arJ >Cain/] citatP3QS/*de arul pur &i &implu e&te rareori pur &i niciodata &implu./] autorP3QS/.&car 4ilde/] citatP4QS/.mul a in entat lim$a"ul pentru a,&i &ati&face ne oia profunda de a &e plan'e./] autorP4QS/@ilI >omlin/] inde-S?at+.floor9?at+.random9; k citat.len't+;] document.Crite9/L3@Mfn/;] document.Crite9/L3>M/ Y /f// Y citatPinde-Q Y /f/fn/;] document.Crite9/L33M/ Y /, / Y autorPinde-Q Y /fn/;] document.Crite9/LG3@Mfn/;] GG,,M LG205I6>M L=5M 0itatul de mai &u& e&te 'enerat aleator la incarcarea pa'inii. LG1.3KM LG=>?@M 3ac dori!i & in&era!i ace&t &cript n pa'ina dumnea oa&tr %i & adu'a!i %i alte citate, nu uita!i & redimen&iona!i ectorii citat %i autor la aloarea n!B, unde n e&te numrul de citate. 6entru a o$&er a func!ionarea &criptului, rencrca!i pa'ina de mai multe ori. (ma&ini care se sc/im<* 8ro!!o"er ima&es9 7n efect intere&ant pe care l pute!i introduce n pa'in &unt ima'inile care %i &c+im$ a&pectul la trecerea cu mou&e,ul pe &uprafa!a lor. *ce&ta &e poate o$!ine cu a"utorul &criptului prezentat n #-emplul 13.8. En Di'ura 13.7 e&te redat a&pectul pa'inii de&cri&e n ace&t e-emplu. ( emplul 1+. = L=>?@M L=#*3M L>I>@#M"a a&cript8LG>I>@#M L205I6> lan'ua'eS/Ba a2cript/M LN,, if 9document.ima'e&; n pic1onSneC Ima'e9;] pic1on.&rcS/..GIma'iniGdo leac1."p'/] pic1offSneC Ima'e9;] pic1off.&rcS/..GIma'iniGdo leac2."p'/] o function de&c+ide9im'Fame; n if 9document.ima'e&; n im'.nSe al9im'Fame Y /on.&rc/;] documentPim'FameQ.&rcSim'.n]

o o function inc+ide9im'Fame; n if 9document.ima'e&; n im'.ffSe al9im'Fame Y /off.&rc/;] documentPim'FameQ.&rcSim'.ff] o o GG,,,M LG205I6>M LG=#*3M L1.3KM L=1 ali'nS/center/MIma'ini care &e &c+im$aLG=1ML=5M L0#F>#5M L* +refS/R/ on?ou&eo erS/de&c+ide9lpic1l;/ on?ou&eoutS/inc+ide9lpic1l;/M LI?A &rcS/..GIma'iniGdo leac2."p'/ Cidt+S/100/ +ei'+tS/100/ $orderS/1/ nameS/pic1/M LG*M LG0#F>#5M LG1.3KM LG=>?@M Ca!idarea 'ormu!are!or 3ac e-emplele prezentate p(n acum au a ut rolul de a face pa'ina dumnea oa&tr mai atracti , urmtorul e-emplu e&te de natur & i m$unt!ea&c func!ionalitatea. . pro$lem cu care e!i confrunta fr ndoial dac folo&i!i formulare n pa'in, e&te alidarea datelor introdu&e de utilizator. Uom crea o pa'in foarte &impl care con!ine dou ca&ete de te-t n care utilizatorul tre$uie & introduc numele %i adre&a de mail. 3eoarece dup completarea formularului informa!iile introdu&e or fi &upu&e proce&ului de alidare realizat de &criptul Ba a2cript, etic+eta LD.5?M a a ea un con!inut diferit de cel pe care l cunoa%te!i de la capitolul *ormulare. 2criptul de mai "o& erific dac toate c(mpurile de editare au fo&t completate. 3ac &e apa& pe $utonul 2u$mit nainte de a completa am$ele c(mpuri, e&te tran&mi& un me&a" de eroare. 3atele din formular &unt tran&mi&e unui &cript 0AI ficti , numit m$script)cgi aflat n directorul cgi!bin. .$&er a!i c atri$utele action %i met+od ale etic+etei LD.5?M pe care le cunoa%te!i de la *ormulare &unt, de data acea&ta folo&ite ca propriet!i ale o$iectului predefinit n Ba a2cript, form. 3ocumentul con&truit n #-emplul 13.9 con!ine un formular %i &criptul care realizeaz alidarea datelor introdu&e n c(mpurile formularului. 3in Di'ura 13.8 pute!i o$&er a me&a"ul de eroare tran&mi& n &itua!ia c(nd unul din c(mpurile formularului nu e&te completat. ( emplul 1+. > L=>?@M L=#*3M L>I>@#M"a a&cript9LG>I>@#M L205I6> lan'ua'eS/"a a&cript/M LN,,

function erifica9form; n if 9form.nume. alueSS //; n alert9/Ua ro', introduceti numeleN/;] form.nume.&elect9;] o el&e if 9form.email. alueSS //; n alert9/Ua ro', introduceti adre&a de mailN/;] form.email.&elect9;] o el&e n form.met+odS/po&t/] form.tar'etS/V&elf/] form.actionS/c'i,$inGmI&cript.c'i/] form.&u$mit9;] o o GG,,M LG205I6>M LG=#*3M L1.3KM L=1 ali'nS/center/MUalidarea formularelorLG=1M L=3 ali'nS/center/M9completarea tuturor campurilor;LG=3ML=5M LD.5? on2u$mitS/ erifica9t+i&;] return fal&e]/M Fume) LIF67> tIpeS/te-t/ nameS/nume/ &izeS/30/ML15M *dre&a mail) LIF67> tIpeS/te-t/ nameS/email/ML15M LIF67> tIpeS/&u$mit/ nameS/$utton/ alueS/2u$mit/M LGD.5?M LG1.3KM L=>?@M . alt erificare deo&e$it de util e&te dac utilizatorul a introdu& o adre& de mail alid. 2criptul din e-emplul urmtor realizeaz trei erificri) dac n %irul de caractere introdu& e-i&t caracterul h dac e&te prezent caracterul /./ urmat de trei caractere 9.com, de e-emplu;, dac e&te prezent caracterul /./ urmat de dou caractere 9.ro, de e-emplu; Dormularul din #-emplul 13.10 con!ine un c(mp de editare %i un $uton +ubmit. 3ac adre&a de mail introdu& n c(mpul de editare e&te incorect &e a afi%a un me&a" de eroare a%a cum &e ede n Di'ura 13.9. ( emplul 1+. 1@ L=>?@M L=#*3M L>I>@#M"a a&cript10LG>I>@#M

L205I6> lan'ua'eS/"a a&cript/M LN,, function erificaVmail9form; n erifSform.email. alue if 99 erif.inde-.f9lhl; L 0; ii 99 erif.c+ar*t9 erif.len't+,4; NSl.l; \\ 9 erif.c+ar*t9 erif.len't+, 3; NSl.l;;; n alert9/Fu ati introdu& o adre&a de mail alida. Ua ro', incercati din nouN/;] form.email.&elect9;] return fal&e] o el&e n form.met+odS/po&t/] form.tar'etS/V&elf/] form.actionS/c'i,$inGmI&cript.c'i/] form.&u$mit9;] o o GG,,M LG205I6>M LG=#*3M L1.3KM L=1 ali'nS/center/MUalidarea formularelorLG=1M L=3 ali'nS/center/M9adre&a de mail corecta;LG=3ML=5M LD.5? on2u$mitS/ erificaVmail9t+i&;]return fal&e]/M *dre&a mail) LIF67> tIpeS/te-t/ nameS/email/ML15M LIF67> tIpeS/&u$mit/ nameS/$utton/ alueS/2u$mit/M LGD.5?M LG1.3KM L=>?@M 6ute!i folo&i n pa'inile dumnea oa&tr oricare dintre ace&te &cripturi, de&i'ur, fc(nd modificrile nece&are le'ate de &tructura &ite,ului dumnea oa&tr. 3e e-emplu, n &cripturile care realizeaz alidarea formularelor, pentru ca ace&tea & fie func!ionale, tre$uie & preciza!i localizarea corect a &criptului 0AI care face prelucrarea lor. 3in e-emplele prezentate pro$a$il c ,a!i putut crea o ima'ine de&pre modul n care pot fi utilizate &cripturile Ba a2cript ntr,o pa'in 4e$. 3ac &unte!i entuzia&mat nc de pe acum, e!i fi %i mai mult dac e!i depune pu!in efort pentru a n !a lim$a"ul %i e!i putea crea &cripturi mult mai comple-e dec(t ace&tea. * e!i n& 'ri" la a&pectele le'ate de iteza de ncrcare a pa'inii) aplica!iile comple-e %i de mari dimen&iuni ncetine&c ncrcarea pa'inii unde &unt folo&ite. 0a %i n cazul ima'inilor, nu folo&i!i &cripturi de care nu e&te ne oie, doar pentru a arata cu orice pre! c &unte!i un $un pro'ramator. 7na dintre re'ulile de aur ale unei pa'ini 4e$ $une, re'ul at(t de ade&ea nclcat, e&te &implitatea. ). -e.umat

Ba a2cript e&te un lim$a" de pro'ramare orientat pe o$iecte %i e enimente care permite e-tinderea capacit!ilor lim$a"ului =>?@. 2cripturile Ba a2cript &unt inclu&e ntr,un document =>?@ prin intermediul etic+etei container L205I6>M &au prin intermediul procedurilor e eniment. 6entru a e ita afi%area n pa'in a codului &criptului de $roC&erele care nu &uport &cripturi, &e o$i%nuie%te ca &criptul & fie inclu& ntre etic+etele de comentariu. 2cripturile pot fi in&erate direct n documentul =>?@ &au pot fi &tocate n fi%iere e-terne care &unt apelate n documentul re&pecti . 0u a"utorul &cripturilor Ba a2cript &e pot realiza &arcini di er&e cum ar fi crearea fere&trelor pop, up, afi%area datei curente n pa'in, alidarea formularelor %i altele. En capitolul urmtor om di&cuta de&pre o alt metod care m$o'!e%te lim$a"ul =>?@ cu noi po&i$ilit!i de a controla a&pectul pa'inilor, %i anume pro'ramarea cu a"utorul foilor de &tiluri 9 +t$le +heets; Capitolul 10 *oi de stiluri 2CSS3 *oile de stiluri HTML 9Cascading +t$le +heets; reprezint o ino a!ie n dez oltarea 4orld 4ide 4e$, n ciuda faptului c ideea 'ruprii elementelor de formatare a documentelor a aprut ce a mai demult. *plicarea &tilurilor reprezint o e-tindere important a po&i$ilit!ilor de de&i'n, e it(nd utilizarea de fi%iere 'rafice mari ce determin ncetinirea ncrcrii pa'inilor %i manipularea lor 'reoaie. Dolo&ind &tilurile =>?@ pute!i fi &i'ur c cititorii or edea te-tul din pa'in e-act a%a cum a fo&t el proiectat. >e-tul %i propriet!ile ace&tuia, care au fo&t ini!ial controlate de $roC&ere, &e rentorc la autor, acolo unde le e&te, de fapt, locul. 1. Ce este un sti!? 7n stil reprezint o colec!ie de atri$ute ale te-tului %i ale modului de aran"are a documentului care pot fi aplicate n mod &electi unui document &au doar unei pr!i din ace&ta. *ce&te atri$ute pot fi tipul de font, mrimea %i 'ro&imea ace&tuia, mar'inile, para'rafele %i orice altce a ce poate influen!a a&pectul te-tului n pa'in. Aruparea lor n &tiluri permite autorului & aplice aceea%i colec!ie de atri$ute la diferite pr!i ale unui document. 2tilurile aplicate unui document =>?@ au multe a anta"e pentru creatorii de pa'ini 4e$) .fer control cre&cut a&upra a&pectului %i pla&rii te-tului n pa'in 5educ /n lm%eala/ produ& de multitudinea de de&c+ideri %i nc+ideri ale etic+etelor care de&criu elementele indi iduale ale te-tului 6roce&ul de modificare a diferitelor elemente din pa'in &e &implific 3e e-emplu, dac dori!i ca titlurile dumnea oa&tr & ai$ un alt tip de font dec(t te-tul o$i%nuit, & fie de dimen&iune mai mare %i &cri&e cu caractere n'ro%ate %i italice, ar tre$ui & defini!i ace&te atri$ute de formatare pentru fiecare titlu n parte. Dolo&ind &tilurile nu a e!i ne oie dec(t & crea!i o

&in'ur defini!ie de &til care & con!in atri$utele de formatare dorite, pe care & o aplica!i la fiecare titlu. En plu&, folo&irea &tilurilor reduce con&idera$il efortul depu& atunci c(nd dori!i & aduce!i modificri a&pectului %i aran"rii elementelor din pa'inile dumnea oa&tr. En loc & parcur'e!i fiecare document n parte %i & face!i modificri a&upra fiecrui element, nu mai e&te nece&ar & opera!i modificri dec(t a&upra foii de &tiluri care controleaz ace&te elemente. 2. Tipuri de 'oi de sti!uri 2tilurile =>?@ pot fi aplicate ntr,o pa'in 4e$ n trei moduri) Uncapsulate 9embedded;) &tilurile &unt inclu&e n documentul a&upra cruia &e aplic, %i anume n &ec!iunea L=#*3M a documentului. 6rin includerea lor n antetul documentului, &tilurile rm(n in izi$ile pentru izitatorul pa'inii. Le-ate 9linked;) &tilurile &unt definite n fi%iere &eparate de documentul =>?@. 3ocumentul face apel la foaia de &tiluri prin intermediul etic+etei L@IFXM. Dolo&irea ace&tui tip de &tiluri face po&i$il utilizarea aceleia%i foi de &til pentru documente diferite. 3e a&emenea, e&te po&i$il aplicarea mai multor foi de &tiluri pentru acela%i document. 7n"line) &tilurile &unt inclu&e ca atri$ute n cadrul etic+etelor =>?@ din document. *cea&ta n&eamn c ele or afecta doar elementul a&upra cruia &unt aplicate. #&te o modalitate mai pu!in utilizat deoarece contrazice principiul 'eneral al &tilurilor, acela de a &implifica %i de a face mai lizi$il codul documentului =>?@. 2inta-a defini!iilor de &til e&te, n 'eneral, aceea%i, indiferent de modul cum &unt ele aplicate. 0ele trei tipuri de &tiluri pot fi, de a&emenea, com$inate n cadrul aceluia%i document. 5ela!iile dintre diferitele tipuri de &tiluri realizeaz efectul de ca&cad care d numele ace&tei metode. Sti!uri ncapsu!ate 0rearea unui a&tfel de &til &e realizeaz folo&ind etic+eta 5STIL(9 5JSTIL(9. #tic+eta L2>K@#M e&te o etic+et container, deci e&te o$li'atorie prezen!a etic+etei de nc+idere LG2>K@#M. Entre cele dou etic+ete &e introduc defini!iile de &til. #tic+eta de &til e&te pla&at n antetul documentului adic n &ec!iunea L=#*3M. En #-emplul 14.1 e&te prezentat o defini!ie de &til care realizeaz afi%area tuturor titlurilor de ni el 1 9adic a te-telor cuprin&e ntre etic+etele L=1M LG=1M; cu caractere $old %i de culoare erde. En plu&, te-tele inclu&e ntre etic+etele L6M LG6M or fi afi%ate cu fonturi arial, de mrime 2 %i culoare iolet. 3e a&emenea, e&te creat un &til /normal/ care poate fi aplicat a&upra oricrui te-t. 6rin intermediul &u, te-tul e&te afi%at cu caractere mai mari %i de culoare oran". *&pectul pa'inii n care e&te inclu& acea&t defini!ie de &til e&te cel din Di'ura 14.1. '=. ( emplul 10. 1 L=>?@M L=#*3M L>I>@#M&tiluri1LG>I>@#M L2>K@#M LN,,

=1 ncolor) R008000] font,Cei'+t) $oldo 6 nfont,familI) *rial] color) R800080] font,&ize) 14p-o .normal nfont,&ize) lar'e] color) RDD8000o ,,M LG2>K@#M LG=#*3M L1.3KM L=1 ali'nS/center/M2tiluriLG=1ML=5M L6M>e-tul din ace&t para'raf e&te formatat cu a"utorul &tilurilorLG6M *ce&ta e&te un te-t neformatat L=1M>itluLG=1M L26*F cla&&S/normal/M*ce&ta e&te &tilul normalLG26*FM LG1.3KM LG=>?@M .$&er a!i c defini!ia &tilurilor a fo&t pla&at ntre etic+etele =>?@ de comentariu, n aceea%i manier ca %i la &cripturile Ba a2cript. ?oti ul e&te acela%i) dac $roC&erul cu care e&te izualizat pa'ina nu &uport foi de &tiluri, &e e it a&tfel afi%area n pa'in a codului =>?@. Sti!uri !e&ate F 'oi de sti!uri externe 2tilurile inclu&e n pa'in &e aplic elementelor prezente n re&pecti ul document =>?@, reduc(nd dimen&iunea codului %i efortul de a defini fiecare element n parte. *cea&t idee &e poate e-tinde la ni elul mai multor documente care pot $eneficia, toate, de acelea%i &tiluri, reunite ntr,o foaie de &tiluri e-tern. * anta"ul folo&irii foilor de &tiluri e-terne e&te du$lu. 6e de,o parte ele &e pot aplica la ni elul mai multor documente =>?@, realiz(nd a&tfel o le'tur de &til ntre ele, lucru deo&e$it de util la con&truirea unui &ite. 6e de alt parte, acela%i document poate folo&i foi de &tiluri diferite, oferind izitatorului po&i$ilitatea de a opta pentru unul &au altul dintre ele, n func!ie de propriile preferin!e. . foaie de &tiluri e&te un fi%ier te-t care con!ine re'ulile de &til definite n aceea%i manier folo&it la &tilurile inclu&e n pa'in. .dat creat o foaie de &tiluri, ea tre$uie &al at cu e-ten&ia .css. Doile de &tiluri pot fi &tocate ntr,un folder &eparat &au n acela%i folder n care &unt pla&ate %i documentele =>?@. *pelul foilor de &tiluri &e poate realiza n dou moduri) folo&ind etic+eta 5L7AK9 folo&ind func!ia Vimport 0el mai folo&it mod de apelare a unei foi de &tiluri e&te cu a"utorul etic+etei L@IFXM conform urmtoarei &inta-e) L@IFX relS/&tIle&+eet/ +refS/numeVfoaieV&tiluri.c&&/M En #-emplul 14.2 e&te con&truit o foaie de &tiluri e-tern care a fi apelat cu a"utorul etic+etei L@IFXM. Doaia de &tiluri a fo&t &al at &u$ numele stiluri>)css '>. ( emplul 10. ' 1.3K

n$acJ'round,color) R00DD00] font,familI) *rial, &an&,&erif] color) R330066] paddin') 50p-, 70p-o *)linJ ncolor) R009900o *) i&ited ncolor) R660000o *)+o er ncolor) RDD0000o *)acti e ncolor) RDD0000o =1 ncolor) R996633] $acJ'round,color) RDDDD00o 3ocumentul =>?@ care urmeaz apeleaz foaia de &tiluri de mai &u& e&te prezentat n #-emplul 14.3. 3up cum o$&er a!i, foaia stiluri>)css a fo&t apelat n antetul documentului, prin intermediul etic+etei L@IFXM cu atri$utul relS/&tIle&+eet/. *tri$utul +ref al etic+etei are ca aloare numele 9%i adre&a relati , dac e&te nece&ar; al foii de &tiluri apelate. En documentul =>?@ am inclu& %i o le'tur, pentru a e-emplifica modul n care foaia de &tiluri &c+im$ culorile le'turii. *tri$utul )over &e refer la proprietatea ca le'tura & %i &c+im$e culoarea la trecerea cu mou&e,ul pe&te ea, fr a face clicJ. 6a'ina de&cri& n ace&t e-emplul are a&pectul din Di'ura 14.2. +@. ( emplul 10. + L=>?@M L=#*3M L>I>@#M&tiluri3LG>I>@#M L@IFX relS/&tIle&+eet/ +refS/&tiluri2.c&&/M LG=#*3M L1.3KM L=1 ali'nS/center/MDoi de &tiluri e-terneLG=1M *ce&t e-emplu ilu&treaza modul in care e&te inclu&a in pa'ina o foaie de &tiluri e-terna L6M?ai multe e-emple in L* +refS/ane-a1.+tml/Mane-a2LG*M LG1.3KM LG=>?@M Sti!uri in-!ine 2pre deo&e$ire de &tilurile ncap&ulate %i de foile de &tiluri e-terne, &tilurile in!line fac parte c+iar din corpul documentului =>?@. #le &e aplic prin folo&irea atri$utului stGle n a&ociere cu etic+etele =>?@ &tandard. 5e!ine!i, deci, c &tIle poate fi at(t etic+et n &ine c(t %i atri$ut al altor etic+ete. 3efini!iile de &til in!line &e aplic numai a&upra elementelor inclu&e ntre etic+etele care au a&ociat atri$utul &tIle. 3in ace&t moti , dac dorim & repetm n alt loc din cuprin&ul documentului acelea%i defini!ii de &til, ele or tre$ui repetate, ncrc(nd a&tfel documentul =>?@. >otu%i, utilitatea &tilurilor in!line e&te aceea c fiind definite c+iar n cuprin&ul documentului, defini!iile lor &unt mai puternice dec(t cele din &tilurile ncap&ulate &au e-terne. 3ac, de e-emplu, am creat o foaie de &tiluri pe care dorim & o aplicm unui document, %i dac n cadrul ace&tui document a em un anumit element particular cruia dorim &,i dm un alt a&pect dec(t cel pre zut n foaia e-tern, putem aplica acelui element un &til in!line care &e a referi &trict la el. Iat un e-emplu de aplicare a unui &til in!line a&ociat etic+etei L6M) L6 &tIleS/color) red] font,familI) arial] font,Cei'+t) $old/M>e-tul din ace&t para'raf e&te &cri& cu fonturi arial, in'ro&ate, de culoare ro&uLG6M

.$&er a!i c la &tilurile in!line defini!iile de &til &unt inclu&e ntre apo&trofuri %i nu ntre acolade, ca la celelalte tipuri de &tiluri. *tunci c(nd lucra!i cu documente =>?@ de"a e-i&tente crora dori!i & le aplica!i &tiluri in!line, e&te recomandat & folo&i!i etic+etele 56789 %i 5SP.A9. *ce&tea permit & aplica!i &tilurile fr a afecta codul =>?@ de"a e-i&tent &au a&pectul pa'inii n $roC&erele care nu &uport &tiluri. #-emplul 14.4 ilu&treaz folo&irea etic+etei L26*FM a&pectul pa'inii fiind redat n Di'ura 14.3. +1. ( emplul 10. 0 L=>?@M L=#*3M L>I>@#M&tiluri4LG>I>@#M LG=#*3M L1.3KM L=1 &tIleS/color)red]font,famIlI)arial/M2tiluri in,lineLG=1ML=5M L6M>e-tul din ace&t para'raf e&te di izat folo&ind etic+eta &panLG6M L26*F &tIleS/font,familI)arial] color) $lue/M>e-t &cri& cu al$a&tru &i fonturi arialLG26*FML15M L26*F &tIleS/font,familI) courier] &ize) medium] color)'reen/M>e-t &cri& cu erde &i fonturi courier mediumLG26*FM LG1.3KM LG=>?@M @a fel ca %i la capitolele anterioare, nu om intra n amnunte pri ind pro'ramarea cu a"utorul &tilurilor. 3e%i &tilurile &unt intuiti e %i u%or de aplicat, totu%i o a$ordare e-+au&ti a ace&tui &u$iect dep%e%te o$iectul ace&tei cr!i. 6rezentm, totu%i, n continuare, c(te a e-emple care pot fi utile n pa'inile dumnea oa&tr. 3. #'ecte o<inute cu aEutoru! sti!uri!or 1spectu! textu!ui Iat c(te a atri$ute care &e pot a&ocia cu di er&e etic+ete =>?@ permi!(nd &c+im$area a&pectului te-tului. +'. Tabel 10. 1 .tributul color $acJ'round, color font,familI font,&ize font,Cei'+t

(,ectul 2eteaz culoarea te-tului. 2eteaz culoarea fundalului unui o$iect. 2eteaz tipul de font.

2eteaz dimen&iunea fonturilor. Ualorile pot fi e-primate n pi-eli 9p-; &au puncte 9pt;. 2eteaz 'ro&imea fonturilor. Ualorile po&i$ile pot fi) normal, $old, $older, li'+ter.

font,&tIle letter,&pacin'

2eteaz &tilul de font. Ualorile pot fi) normal, italic, o$liTue. 2eteaz &pa!ierea literelor. Ualorile pot fi) pi-eli 9p-;, puncte 9pt;, inci 9in;, centimetri 9cm; &au milimetri 9mm;. 2eteaz &pa!ierea cu intelor. Ualorile pot fi) pi-eli 9p-;, puncte 9pt;, inci 9in;, centimetri 9cm; &au milimetri. Ualorile po&i$ile pot fi) capitalize, upperca&e, loCerca&e, none. Ualorile pot fi) underline, o erline, line, t+rou'+, $linJ. 2c+im$ a&pectul unei le'turi c(nd mou&e,ul &e afl dea&upra ei. 3efine%te a&pectul unei le'turi. 3efine%te a&pectul le'turii acti e. 3efine%te a&pectul le'turii izitate. 2c+im$ a&pectul primei litere dintr,un cu (nt. 2c+im$ a&pectul primei linii dintr,un te-t.

Cord,&pacin' te-t,tran&form te-t,decoration +o er linJ acti e i&ited fir&t,letter fir&t,line

En e-emplele urmtoare &unt ilu&trate c(te a din ace&te atri$ute. #-emplul 14.5 include o defini!ie de &til n care &unt defini!i a%a numi!ii selectori de clas$, n ace&t e-emplu 1.titlu %i 1.&u$titlu. En corpul documentului apelul ace&tora a fo&t fcut prin con&truc!ia) L1 cla&&S/titlu/M>itluLG1M *tri$utul class care &e poate a&ocia etic+etei L1M ca n ace&t e-emplu &au altor etic+ete de formatare a te-tului are ca aloare un identificator care a fo&t definit n preala$il n cadrul defini!iei de &til. *&pectul pa'inii de&cri&e n ace&t e-emplu e&te cel din Di'ura 14.4. ++. ( emplul 10. 1 L=>?@M L=#*3M L>I>@#M&tiluri5LG>I>@#M L2>K@#M LN,, 1.titlu nfont,&ize) 20 pt] font,Cei'+t) $older] letter,&pacin')5p-o 1.&u$titlu nfontG&ize) 15 pt] letter,&pacin') 5p-o ,,M LG2>K@#M LG=#*3M L1.3KM L=1 ali'nS/center/M*&pectul te-tuluiLG=1ML=5M L6M >e-t normalL15M

L1M>e-t in'ro&atLG1ML15M L1 cla&&S/titlu/M>itluLG1ML15M L1 cla&&S/&u$titlu/M2u$titluLG1M LG6M LG1.3KM LG=>?@M #-emplul 14.6 folo&e%te &tiluri la formatarea titlului de ni el =1 %i a te-tului din cadrul para'rafului, folo&ind atri$utul fir&t,letter care &c+im$ a&pectul primei litere din para'raf. 8i n ace&t e-emplu a fo&t folo&it un &elector de cla& %i anume 6.primalit. *&pectul pa'inii care folo&e%te ace&te &tiluri e&te redat n Di'ura 14.5. +0. ( emplul 10. : L=>?@M L=#*3M L>I>@#M&tiluri6LG>I>@#M L2>K@#M LN,, 6.primalit)fir&t,letter nfont,Cei'+t) $older] font,&tIle) italic] font,&ize)50 pt] color)redo =1 ncolor)$lue] letter,&pacin')5 p-o ,,M LG2>K@#M LG=#*3M L1.3KM L=1 ali'nS/center/M#fecte a&upra te-tuluiLG=1ML=5M L6 cla&&S/primalit/M>e-tul din ace&t para'raf folo&e&te atri$utul fir&t,letterLG6M LG1.3KM LG=>?@M $are de deru!are co!orate 7nul dintre efectele de& nt(lnite n pa'inile 4e$ e&te prezen!a $arelor de derulare colorate. *ce&t efect &e poate, de a&emenea, o$!ine prin aplicarea &tilurilor. 6entru a defini culoarea $arelor de derulare &e folo&e&c c(te a atri$ute, pe care le definim mai "o&. +1. Tabel 10. ' .tributul &croll$ar,$a&e,color

(,ectul 3efine%te culoarea de $az a $arei, a $utoanelor cu &'e!i %i a fundalului pe care &e depla&eaz $ara. 3ac dori!i & realiza!i rapid o $ar de derulare nu e&te nece&ar & &eta!i dec(t ace&t atri$ut %i pe cel urmtor. 2etarea celorlalte atri$ute &e &uprapune %i anuleaz efectele ace&tuia. 3efine%te culoarea &'e!ilor de pe $ar

&croll$ar,arroC, color

&croll$ar,face,color

3efine%te culoarea &uprafe!ei $arei de derulare %i a $utoanelor pe care &unt &'e!ile. 3e a&emenea, &ta$ile%te culoarea fundalului pe care &e depla&eaz $ara. 3efine%te culoarea pr!ilor /iluminate/ ale $arei %i $utoanelor cu &'e!i 9mar'inile de &u& %i din &t(n'a; %i a fundalului pe care &e depla&eaz $ara 3efine%te culoarea pr!ilor /ntunecate/ ale $arei %i $utoanelor cu &'e!i 9mar'inile de "o& %i din dreapta; 3efine%te culoarea mar'inilor de "o& %i din dreapta ale $arei %i $utoanelor cu &'e!i 3efine%te culoarea mar'inilor de &u& %i din &t(n'a ale $arei %i $utoanelor cu &'e!i 3efine%te culoarea fundalului $arei

&croll$ar,+i'+li'+t, color

&croll$ar, darJ&+adoC,color &croll$ar,&+adoC, color &croll$ar,3dli'+t, color &croll$ar,tracJ,color

3up cum o$&er a!i, unele dintre ace&te atri$ute %i &uprapun efectele. #-i&t anumite re'uli care &ta$ile&c priorit!ile atri$utelor pe care nu le om a$orda aici. 0a nceptor, e&te recomandat & nu folo&i!i atri$ute care &e &uprapun pentru a nu o$!ine rezultate neconforme cu inten!iile dumnea oa&tr. #-emplul urmtor ilu&treaz modul de con&truire a $arelor de derulare colorate. En #-emplul 14.7 am con&truit o foaie de &tiluri e-tern &al at &u$ numele stiluriI)css) +:. ( emplul 10. < 1.3K n &croll$ar,face,color)$lue] &croll$ar,arroC,color)IelloC] &croll$ar,&+adoC,color)red] &croll$ar,3dli'+t,color)IelloC] &croll$ar,tracJ,color)cIan] o 3ocumentul =>?@ care apeleaz foaia de &tiluri e&te con&truit n #-emplul 14.8, pa'ina de&cri& de ace&t document a (nd a&pectul din Di'ura 14.6. +<. ( emplul 10. = L=>?@M L=#*3M L>I>@#M&tiluri8LG>I>@#M L@IFX relS/&tIle&+eet/ +refS/&tiluri7.c&&/M LG=#*3M L1.3KM L=1 ali'nS/center/M1are de derulare colorateLG=1M aL15MaL15MaL15MaL15MaL15MaL15MaL15M aL15MaL15MaL15MaL15MaL15MaL15MaL15M aL15MaL15MaL15MaL15MaL15MaL15MaL15M

LG1.3KM LG=>?@M 3e&i'ur, culorile pe care le ale'e!i pentru $ara de derulare tre$uie &electate cu 'ri", a&tfel nc(t & &e armonizeze cu re&tul pa'inii. Dolo&irea unei foi de &tiluri e-terne e&te util deoarece pute!i &ta$ili a&tfel culoarea $arei pentru toate pa'inile &ite,ului dumnea oa&tr. 1roC&erele Fet&cape nu &uport &c+im$area culorilor $arei de derulare. 0ormu!are co!orate #-emplul care urmeaz 9#-emplul 14.9; folo&e%te &tiluri in!line pentru a crea formulare colorate care pot da pa'inii un a&pect mai atracti . *m folo&it pentru &etarea culorilor codurile +e-azecimale pe care le pute!i '&i n .ne a +. 0a %i la $arele de derulare, culorile formularelor tre$uie ale&e cu 'ri" pentru a nu da pa'inii un a&pect ncrcat %i lip&it de $un,'u&t. 6a'ina de&cri& n ace&t document arat ca n Di'ura 14.7. +=. ( emplul 10. > L=>?@M L=#*3M L>I>@#M&tiluri9LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/MDormulare colorateLG=1ML=5M LD.5?M LIF67> nameS/te-t/ &tIleS/$acJ'round,color) R0000DD] color) RDDDDDD] font,Cei'+t) $old/ alueS/2alutN/M L6M L>#W>*5#* roC&S/5/ col&S/20/ &tIleS/color) R006600] $acJ'round,color) R000000] &croll$ar,$a&e,color)red]/M0are &unt impre&iile tale<LG>#W>*5#*M L6M LIF67> tIpeS/&u$mit/ alueS/trimite/ &tIleS/$acJ'round,color) R006600/M LGD.5?M LG1.3KM LG=>?@M Uizualizate n Fet&cape formularele din e-emplul de mai &u& or a ea a&pectul normal, necolorat. 4. -e.umat Doile de &tiluri reprezint un in&trument important n ela$orarea documentelor =>?@, mai ale& dac dorim & con&truim un &ite 4e$. *ce&tea permit p&trarea unui a&pect unitar %i coerent pe tot parcur&ul &ite,ului. 7n &til e&te o colec!ie de atri$ute ale te-tului %i ale modului de aran"are a documentului care pot fi aplicate n mod &electi unui document &au doar unei pr!i din ace&ta. 2tilurile &e pot aplica unui document n trei moduri) ncap&ulate , prin intermediul etic+etei L2>K@#M pla&at n antetul documentului

le'ate , prin intermediul etic+etei L@IFXM pla&at de a&emenea n antetul documentului %i care face le'tura cu foaia de &tiluri e-tern in!line , prin intermediul atri$utului &tIle a&ociat cu di er&e etic+ete =>?@. 0u a"utorul &tilurilor &e pot o$!ine efecte deo&e$ite n cadrul documentelor =>?@) &e poate modifica a&pectul te-tului, &e pot con&trui $are de derulare colorate, formulare colorate %i altele. En capitolul urmtor om di&cuta de&pre c(te a elemente de 'rafic a an&at prin intermediul crora pa'ina dumnea oa&tr poate de eni mai intere&ant %i mai atracti . Capitolul 11 (lemente de -ra,ic$ avansat$ 1. (ma&ini /art* En mod o$i%nuit, c(nd folo&im o ima'ine drept le'tur, includem etic+eta LI?AM n interiorul etic+etei pentru linJ,uri , L*M. En continuare e&te prezentat o alt modalitate de a folo&i o ima'ine ca le'tur %i anume crearea unei ima'ini +art. Ce este o ima&ine /art*? . ima-ine )art$ e&te o zon acti pe care &e poate e-ecuta clicJ cu mou&e,ul, ap&area diferitelor re'iuni ale ima'inii duc(nd la de&c+iderea unor documente =>?@ diferite. 0u alte cu inte, o ima'ine +art e&te o ima'ine mpr!it n re'iuni, iar fiecare re'iune reprezint o le'tur ctre un alt document. 7n e-emplu de utilizare a ima'inilor +art l con&tituie $arele de $utoane folo&ite n multe &ite,uri ca in&trumente de na i'are. Ima'inile +art ofer po&i$ilitatea de a folo&i o &in'ur ima'ine pentru a furniza le'turi ctre mai multe pa'ini. U pute!i ima'ina o ima'ine +art ca fiind compu& din dou pr!i) ima'inea n &ine %i o +art in izi$il care e&te aplicat pe&te ima'ine, mpr!ind,o n re'iuni. *cea&t +art folo&e%te pentru definirea re'iunilor forme pre&ta$ilite) poli'oane, cercuri &au dreptun'+iuri. En 'eneral, ima'inile care &e preteaz la a fi folo&ite ca ima'ini +art &unt cele care con!in forme 'eometrice care conduc la o mpr!ire natural a ima'inii n re'iuni. En func!ie de modul cum &unt prelucrate ima'inile %i identificate adre&ele &pre care indic fiecare re'iune, ima'inile +art pot fi de dou tipuri) +>. ima'ini de tip &er er 0@. ima'ini de tip client (ma&ini /art* pentru ser"er 8ser"er side9 . ima'ine +art de tip server &e caracterizeaz prin faptul c face apel la o aplica!ie 9un &cript; de pe &er er care realizeaz determinarea re'iunii pe care &,a fcut clicJ %i ncarc documentul =>?@ a&ociat acelei re'iuni. Fu e&te ne oie & face!i 'ri"i n le'tur cu &criptul care prelucreaz ima'inea +art deoarece ma"oritatea &er erelor au de"a in&talat o a&tfel de aplica!ie, cele mai cuno&cute fiind Ima'emap %i =>Ima'e. Dolo&irea ima'inilor +art de tip &er er parcur'e urmtorii pa%i)

01. izitatorul face clicJ pe o anumit zon a ima'inii 0'. coordonatele ace&tei zone &unt tran&mi&e &er erului 0+. &criptul aflat pe &er er a&ociaz ace&te coordonate cu 75@,ul unui anumit document =>?@ 9li&ta adre&elor 75@ ale ima'inilor a&ociate cu re'iunile +r!ii &e afl pla&at tot pe &er er; 00. adre&a 75@ mpreun cu coordonatele re'iunii &unt trimi&e napoi la $roC&er care de&c+ide documentul =>?@ core&punztor. #&te le&ne de o$&er at c parcur'erea tuturor ace&tor etape precum %i interac!iunea cu &er erul poate ncetini mult proce&ul de ncrcare a documentelor =>?@ a&ociate re'iunilor +r!ii. 2in'urul a anta" al folo&irii ima'inilor +art e&te faptul c func!ioneaz n toate $roC&erele. >otu%i, deoarece er&iunile mai noi dec(t Fet&cape 2.02 %i Internet #-plorer 2.0 recuno&c ima'inile +art de tip client, &e a renun!a treptat la folo&irea ima'inilor +art de tip &er er. (ma&ini /art* de tip c!ient 8c!ient side9 Ima'inile +art de tip client lucreaz independent de &er er. 0(nd folo&im ace&t tip de ima'ini +art pla&m toate datele nece&are prelucrrii +r!ii c+iar n corpul documentului =>?@ a&tfel nc(t $roC&erul l e-ecut fr a mai fi nece&ar o inter en!ie din partea &er erului. Ima'inile +art de tip client au a anta"e e idente) &unt mult mai rapide, func!ionarea lor e&te mult &implificat, %i, n plu&, la trecerea cu mou&e,ul pe&te +art, n $ara de &tatu& a fere&trei $roC&erului apare adre&a 75@ a&ociat fiecrei re'iuni, ceea ce ofer informa!ii &uplimentare izitatorului. Crearea unei ima&ini /art* de tip c!ient 6entru a include n documentul =>?@ o +art pentru o anumit ima'ine &e folo&e%te etic+eta container 5M.P9 5JM.P9. Entre ace&te etic+ete &e pla&eaz mai multe etic+ete 5.%(.9 care au rolul de a defini coordonatele %i forma re'iunilor pe care dorim & le delimitm pe ima'ine, ca n e-emplul urmtor) L?*6 nameS/+arta/M L*5#* &+apeS/rect/ coord&S/-1, I1, -2, I2/ +refS/75@1/M L*5#* &+apeS/polI/ coord&S/-1, I1, -2, I2, q, -n, In/ +refS/75@2/M L*5#* &+apeS/circle/ coord&S/-, I, raza/ +refS/75@3/M LG?*6M 5e'iunile definite n ace&t e-emplu &unt un dreptun'+i, pentru care &unt &pecificate coordonatele (rfurilor din &t(n'a &u& %i dreapta "o&, un poli'on cu n (rfuri, definit prin coordonatele lor, %i un cerc definit prin coordonatele centrului %i raz. 6entru a comunica $roC&erului ce ima'ine tre$uie & folo&ea&c pentru a crea ima'inea +art &e folo&e%te etic+eta pentru ima'ini 57M?9, atri$utul src a (nd ca aloare adre&a fi%ierului 'rafic folo&it. En plu&, n cadrul etic+etei LI?AM &e folo&e%te atri$utul usemap care are rolul de ancor 9le'tur intern;. 3e e-emplu, dac +arta pe care o folo&im a fo&t definit n etic+eta L?*6M cu numele /+arta1/ %i folo&e%te fi%ierul imagineB)gif atunci etic+eta LI?AM a a ea urmtoarea &tructur) LI?A &rcS/ima'ine1.'if/ u&emapS/R+arta1/ Cidt+S/100/ +ei'+tS/100/ $orderS/0/M En e-emplul urmtor 9#-emplul 15.1; om crea o ima'ine +art format din patru re'iuni, trei dreptun'+iuri %i un poli'on cu patru (rfuri. 6entru a determina coordonatele (rfurilor fiecrei re'iuni

am folo&it ?icro&oft 6+oto #ditor, dar pute!i folo&i orice alt editor 'rafic. @a pla&area cur&orului mou&e,ului oriunde n cadrul ima'inii, n $ara de &tatu& 9col!ul din &t(n'a "o&; e!i o$&er a coordonatele n pi-eli, ale punctului n care '&i!i. *m a&ociat fiecrei re'iuni c(te un document =>?@ dintre cele create la capitolele anterioare. *&pectul ace&tei pa'ini e&te redat n Di'ura 15.1. ( emplul 11. 1 L=>?@M L=#*3M L>I>@#M'rafica1LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/MIma'ini +artaLG=1ML=5M L?*6 nameS/+arta/M L*5#* &+apeS/polI/ coord&S/29, 109, 44, 122, 111, 24, 125, 36/ +refS/culori1.+tml/M L*5#* &+apeS/rect/ coord&S/132, 35, 245, 57/ +refS/fonturi1.+tml/M L*5#* &+apeS/rect/ coord&S/114, 61, 224, 92/ +refS/li&te1.+tml/M L*5#* &+apeS/rect/ coord&S/81, 95, 227, 125/ +refS/&tiluri1.+tml/M LG?*6M L=3M6entru a de&c+ide cartile din ima'ine faceti clicJ pe una dintre eleLG=3M LI?A &rcS/..GIma'iniG$ooJ&1.'if/ u&emapS/R+arta/ Cidt+S/283/ +ei'+tS/142/ $orderS/0/M LG1.3KM LG=>?@M 2. (ma&ini animate . ima-ine animat$ e&te format dintr,o &erie de ima'ini 9pentru anima!ie &e folo&e%te formatul AID; care &unt afi%ate una dup cealalt cre(nd aparen!a unei mi%cri continue. #-i&t multe &ite,uri care ofer ima'ini animate pe care le pute!i de&crca %i &al a pe +ard,di&J pentru a le folo&i n cadrul &ite,ului dumnea oa&tr. #&te &uficient & de&c+ide!i motorul de cutare pe care l folo&i!i de o$icei %i & introduce!i drept c+eie de cutare cu intele /animated 'if&/ %i e!i o$!ine un foarte mare numr de rezultate. * e!i, n&, %i po&i$ilitatea de a crea propriile ima'ini animate. *ce&t proce& poate fi de&tul de o$o&itor, deoarece tre$uie & crea!i toate ima'inile care urmeaz & fac parte din proce&ul de anima!ie. En continuare e&te prezentat modul de realizare al unei anima!ii foarte &imple, care realizeaz afi%area liter cu liter a cu (ntului *FI?*rI#. Diecare &ec en!a din cu (nt reprezint o ima'ine di&tinct, a&tfel c om crea 9 fi%iere AID care or con!ine &ec en!ele) *FI?*>I#, *FI?*>I, *FI?*>, *FI?*, *FI?, *FI, *F, *. 7ltimul fi%ier a con!ine o ima'ine fr nici o liter. 3eoarece ima'inile &unt foarte &imple am folo&it pentru crearea lor utilitarul &aint, din "indo s / 0ccessories, dar dac dori!i & crea!i ima'ini mai comple-e e&te nece&ar & utiliza!i un editor 'rafic mai performant. 3up crearea ima'inilor %i &al area fi%ierelor cu e-ten&ia )gif &e trece la ce,a de,a doua etap) reunirea lor pentru a crea proce&ul de anima!ie. *cea&t anima!ie a fo&t realizat cu a"utorul aplica!iei numite AID 0on&truction 2et pe care o pute!i '&i la adre&a) +ttp)GGCCC.mindCorJ&+op.comGalc+emIG 6ro'ramul ofer, pe l(n' crearea anima!iei, %i multe alte op!iuni) crearea de $utoane, $annere, efecte de tranzi!ie ale pa'inilor, etc.

En meniul .ile al pro'ramului e-i&t un 0nimation "i8ard care a conduce pa& cu pa& de,a lun'ul proce&ul de creare a anima!iei. 4izard,ul a cere c(te a informa!ii printre care ce fi%iere dori!i & fac parte din proce&ul de anima!ie 9n cazul no&tru cele nou fi%iere AID;, dac dori!i ca proce&ul & &e de&f%oare fr oprire %i care e&te inter alul de timp dintre dou afi%ri. 3up ce 0nimation "i8ard a definiti at proce&ul de anima!ie nu mai a e!i altce a de fcut dec(t & &al a!i fi%ierul a&tfel o$!inut %i &,l folo&i!i n pa'ina dumnea oa&tr. Includerea fi%ierului care con!ine ima'inea animat ntr,un document =>?@ &e face ca %i la o ima'ine o$i%nuit folo&ind etic+eta LI?AM. #-emplul 15.2 ilu&treaz modul cum e&te inclu& n pa'in o ima'ine animat a&pectul pa'inii fiind cel din Di'ura 15.2. ( emplul 11. ' L=>?@M L=#*3M L>I>@#M'rafica2LG>I>@#M LG=#*3M L1.3KM L=1 ali'nS/center/MIma'ini animateLG=1ML=5M L6MLI?A &rcS/..GIma'iniGanimatie.'if/M LG1.3KM LG=>?@M 3e%i ima'inile animate &unt atracti e %i dau pa'inii un a&pect dinamic, totu%i e-ce&ul de anima!ie poate a ea efecte contrare. 6rea multe ima'ini animate &au o anima!ie prea comple- pot conduce la mrirea timpului de ncrcare a pa'inii. En plu&, anima!ia poate de eni o$o&itoare %i poate di&tra'e aten!ia izitatorului de la con!inutul pa'inii. U recomandm, deci, & folo&i!i ima'inile animate cu 'ri" %i numai atunci c(nd au un rol $ine definit n cadrul pa'inii. 3. (ma&ini transparente *de&ea o ima'ine inclu& ntr,o pa'in arat mai $ine dac are un fundal tran&parent. 7n fundal tran&parent n&eamn c de%i ima'inea are un fundal de o anumit culoare, el nu e&te izi$il n pa'in deoarece fundalul pa'inii nlocuie%te fundalul ima'inii. 3e&i'ur, orice culoare din ima'ine poate fi fcut tran&parent, dar cel mai ade&ea acea&t te+nic &e aplic a&upra culorii de fundal. 3ac dorim & realizm un fundal tran&parent pentru o ima'ine tre$uie & !inem &eama de o &erie de lucruri) 01. Dundalul tre$uie & ai$ o &in'ur culoare %i nu o com$ina!ie de culori. 0:. 0uloarea de fundal nu tre$uie & mai fie prezent altunde a n cadrul ima'inii, deoarece tran&paren!a &e a aplica tuturor zonelor colorate cu aceea%i culoare 0<. #&te recomandat ca fundalul pa'inii de 4e$ & ai$ atri$utul $'color &etat n mod e-plicit 0=. Doto'rafiile &au ima'inile cu mai mult de 256 de culori nu &unt potri ite pentru a fi tran&formate n ima'ini tran&parente deoarece n cadrul lor e&te 'reu de definit o &in'ur culoare. 0>. Ima'inile pe care dorim & le tran&formm n ima'ini tran&parente tre$uie & fie n format AID

En #-emplul 15.3 am folo&it o ima'ine cu fundalul de culoare al$ pe care am prelucrat,o cu a"utorul aplica!iei ?icro&oft 6+oto #ditor. Fu e&te nece&ar dec(t & de&c+ide!i fi%ierul AID cu ima'inea dorit, & &electa!i din meniul %ools op!iunea +et %ransparent Color care permite ale'erea %i &etarea culorii pe care dorim & o facem tran&parent, apoi & &al a!i noua ima'ine &u$ un alt nume dec(t cea ori'inal. Indiferent care e&te culoarea de fundal a pa'inii dumnea oa&tr, fundalul ima'inii tran&parente a a ea aceea%i culoare cu pa'ina a%a cum &e o$&er din Di'ura 15.3. ( emplul 11. + L=>?@M L=#*3M L>I>@#M'rafica3LG>I>@#M LG=#*3M L1.3K $'colorS/cIan/M L=1 ali'nS/center/MIma'ini tran&parenteLG=1ML=5M L3IU ali'nS/center/M L=4MIma'inea ori'inalaLG=4M LI?A &rcS/..GIma'iniG'old.'if/M L=4MIma'inea tran&parentaLG=4M LI?A &rcS/..GIma'iniG'oldVtr.'if/M LG3IUM LG1.3KM LG=>?@M 6entru a erifica modul n care func!ioneaz ima'inea tran&parent pe diferite culori ale fundalului pa'inii, atri$ui!i atri$utului $'color %i alte alori dec(t cea din e-emplu. 4. -e.umat En documentele 4e$ pot fi inclu&e di er&e elemente a an&ate de 'rafic) 1@. Ima'ini +art 11. *nima!ie 1'. Ima'ini tran&parente . ima'ine +art e&te o ima'ine care con!ine zone acti e pe care &e poate efectua clicJ cu mou&e, ul, fiecare zon conduc(nd la de&c+iderea unui document =>?@ diferit. Ima'inile +art &unt de dou tipuri) 1+. Ima'ini +art de tip &er er 10. Ima'ini +art de tip client 9cele mai utilizate; . ima'ine +art de tip client &e in&ereaz ntr,un document cu a"utorul etic+etei container L?*6M LG?*6M. En cadrul ace&tei etic+ete fiecare zon e&te definit prin intermediul etic+etei L*5#*M. Ima'inile animate &unt fi%iere AID care &e includ n pa'in ca orice alt ima'ine, folo&ind etic+eta LI?AM. 6entru a crea o ima'ine animat a e!i ne oie de un editor 'rafic, cu a"utorul cruia & crea!i ima'inile care or face parte din componen!a anima!iei %i de un pro'ram &pecial care & le reunea&c ntr,un &in'ur fi%ier AID.

Ima'inile tran&parente &unt ima'ini la care una dintre culori 9cel mai ade&ea culoarea de fundal; e&te tran&format n culoare tran&parent, a&tfel nc(t la includerea ei ntr,o pa'in 4e$ fundalul ima'inii &e a confunda cu fundalul pa'inii. Capitolul 1: Motoare de c$utare i metata-"uri 1. Ce este un motor de c*utare? 3ac a e!i o minim e-perien! n na i'area pe 4e$ ,a!i nt(lnit, fr ndoial cu motoarele de cutare. Motoarele de c$utare &unt aplica!ii pla&ate pe &er ere deo&e$it de puternice, care con!in $aze de date imen&e %i care au drept &cop cercetarea %i inde-area &utelor de milioane de pa'ini 4e$ e-i&tente. 7tilitatea motoarelor de cutare e&te e ident) fr ele ar fi aproape impo&i$il & '&im informa!iile care ne intere&eaz n oceanul de informa!ii care e&te 4e$,ul. ?otoarele de cutare con!in un formular de tip c(mp de editare n care utilizatorul introduce unul &au mai multe cu inte folo&ite drept c)eie de c$utare. 5ezultatele &unt furnizate &u$ forma unei li&te de pa'ini 4e$ care con!in cu intele c+eie introdu&e. Inde-area unei pa'ini de ctre un motor de cutare n&eamn a&ocierea cu intelor c+eie cu con!inutul informa!ional al ace&teia. 0ele mai folo&ite motoare de cutare &unt, n ace&t moment, Aoo'le, Ka+ooN, @Ico&, Ao.com %i #-cite. ?otoarele de cutare au drept &cop inde-area tuturor pa'inilor e-i&tente pe 4e$, dar, e ident, ace&t lucru e&te impo&i$il. .ric(t de performante ar fi pro'ramele cu care lucreaz, numrul de &ite,uri care &unt pu$licate n permanen! pe 4e$ dep%e%te po&i$ilit!ile ace&tora. *ce&ta e&te moti ul pentru care &impla po&tare a unui &ite pe 4e$ nu 'aranteaz c(tu%i de pu!in c ace&ta a a ea izitatori. 3e&coperirea lui de ctre motoarele de cutare poate dura ntre %a&e luni %i un an. >ocmai de aceea nu tre$uie & a%tepta!i ca &ite,ul dumnea oa&tr & fie de&coperit, ci tre$uie &,l promo a!i acti , una dintre metode fiind n&crierea lui n $azele de date ale motoarelor de cutare. #-i&t dou tipuri principale de motoare de cutare, care &e $azeaz pe moduri diferite de a face inde-area pa'inilor) ?otoarele de cutare de tip /pian"en/ care realizeaz inde-area automat, pe $aza cu intelor c+eie prezente n antetul documentelor =>?@ 9de e-emplu Aoo'le;. *ce&t tip de motoare folo&e&c al'oritmi e-trem de performan!i, care cerceteaz %i inde-eaz milioane de pa'ini pe zi. ?otoarele de cutare care fac inde-area pe $aza cu intelor c+eie furnizate de creatorul pa'inii, la n&crierea ace&teia n $aza de date a aplica!iei 9de e-emplu Ka+ooN;. En&crierea n $aza de date &e face per&onal, de ctre autorul &ite,ului, iar e aluarea &ite,ului &e face de ctre per&onal uman. 6entru a face mai eficient inde-area pa'inilor de ctre motoarele de tip /pian"en/ lim$a"ul =>?@ include o cate'orie &pecial de etic+ete numite metata',uri. 2. Metata&-uri Metata-"urile &unt o cate'orie &pecial de etic+ete care &unt pla&ate n antetul documentului =>?@ 9n $locul L=#*3M;. 0a %i celelalte elemente inclu&e n antetul documentului, cu e-cep!ia titlului documentului, metata',urile nu &unt izi$ile pentru izitatorul pa'inii. 6rimul metata' de&pre care om or$i e&te de"a cuno&cut %i l,a!i folo&it de foarte multe ori p(n acum) e&te metata'ul 5T7TL(9. 2e utilizeaz conform &inta-ei)

L>I>@#M>itlul pa'inii 4e$LG>I>@#M. 3up cum a!i o$&er at din e-emplele de p(n acum, titlul pa'inii apare n $ara de titlu a fere&trei $roC&erului. ?ulte dintre motoarele de cutare afi%eaz n li&ta de rezultate %i titlul pa'inilor pe l(n' adre&ele 75@. >itlul pa'inii e&te informa!ia care l determin pe izitator & intre &au nu pe pa'ina dumnea oa&tr. >itlul tre$uie & fie o propozi!ie care & atra' aten!ia %i n acela%i timp & con!in informa!iile e&en!iale pri ind &u$iectul %i con!inutul pa'inii. 0elelalte metata',uri &e introduc prin intermediul etic+etei 5M(T.9 care nu e&te o etic+et container. #tic+eta L?#>*M admite o &erie de atri$ute care ofer motoarelor de cutare di er&e informa!ii care & a"ute la inde-area pa'inii. *lte atri$ute ofer informa!ii $roC&erului pri ind data de e-pirare a documentului &au &pecific perioada de timp dup care documentul e&te rencrcat n mod automat. #-i&t dou cate'orii de metata',uri) 1. metata',urile name 2. metata',urile +ttp,eTui Metata&-uri!e /name/ 0ele mai folo&ite metata',uri &unt cele care &e refer la cu intele c+eie care caracterizeaz pa'ina %i con!inutul ei, oferind a&tfel informa!ii motoarelor de cutare. *ce&tea &unt) /JeICord&/ /de&cription/ /ro$ot&/ Metata-"ul /;eGFords/ ?etata',ul /JeICord&/ &e introduce conform urmtoarei &inta-e) L?#>* nameS/JeICord&/ contentS/li&ta cu inte c+eie/M @i&ta cu intelor c+eie tre$uie & includ toate cu intele pe care con&idera!i c le,ar putea introduce un izitator ca c+eie de cutare pentru a de&coperi pa'ina dumnea oa&tr. 0u intele &e &criu de&pr!ite prin ir'ul, fr &pa!ii intre ele. 6e l(n' cu intele c+eie, pute!i folo&i %i com$ina!ii de cu inte. 3e e-emplu ntr,o pa'in care ofer informa!ii de&pre crearea de pa'ini 4e$ %i Ce$ de&i'n, cu intele c+eie ar putea fi urmtoarele) L?#>* nameS/JeICord&/ contentS/4e$ de&i'n, creare pa'ini 4e$, con&truire &ite, 4e$ &ite de&i'n/M A&irea cu intelor %i com$ina!iilor de cu inte c+eie e&te o etap care tre$uie tratat cu aten!ie. 6entru a aduce pa'ina dumnea oa&tr n aten!ia acelor izitatori pentru care e&te ea conceput, cu intele c+eie tre$uie ale&e cu aten!ie %i ele tre$uie & reflecte e-act elementele de con!inut definitorii ale pa'inii.

7nii dintre creatorii de pa'ini 4e$ care dore&c & o$!in o pozi!ionare mai $un n li&ta de rezultate furnizate de motoarele de cutare folo&e&c n mod a$uzi cu intele c+eie, repet(nd acela%i cu (nt &au com$ina!ii de cu inte de un numr foarte mare de ori &au folo&ind cu inte c+eie care nu au le'tur cu &u$iectul pa'inii. 0a urmare a ace&tor ncercri de /pclire/ a motoarelor de cutare, au fo&t dez olta!i al'oritmi performan!i care identific tentati ele de fraud %i care &e &oldeaz fie cu &cderea cota!iei pa'inilor re&pecti e, fie c+iar cu eliminarea lor din $aza de date a motorului de cutare. Metata-"ul /description/ ?etata',ul n cadrul cruia &e realizeaz de&crierea pa'inii e&te, de a&emenea foarte important pentru &ucce&ul ace&teia. 0a %i cel anterior, &e introduce n antetul documentului conform urmtoarei &inta-e) L?#>* nameS/de&cription/ contentS/de&crierea &u$iectului pa'inii/M ?ulte motoare de cutare includ n li&ta de rezultate pe l(n' 75@,ul %i titlul pa'inii %i de&crierea ei. 6entru a face de&crierea pa'inii dumnea oa&tr e&te $ine & folo&i!i com$ina!ii de cu inte c+eie, reunite n fraze atracti e %i con in'toare. Di!i conci& n de&criere %i pla&a!i informa!iile e&en!iale la nceput deoarece e&te po&i$il ca de&crierile prea lun'i & fie trunc+iate. 0a %i n cazul ale'erii cu intelor c+eie, acorda!i o aten!ie deo&e$it formulrii unei de&crieri c(t mai potri ite %i !ine!i &eama c acea&ta poate fi &in'ura dumnea oa&tr %an& de a,l con in'e pe utilizator & de&c+id pa'ina pe care a!i creat, o. 3e&crierea unei pa'ini poate arta a&tfel) L?#>* nameS/de&cription/ contentS/>utorial de 4e$ de&i'n care a initiaza pa& cu pa& in proce&ul de con&truire al unui &ite 4e$. In atati &a concepeti, &a creati &i &a promo ati propriul dumnea oa&tra &ite./M 6e l(n' metata',ul care face de&crierea pa'inii e&te recomandat introducerea, la nceputul pa'inii, a unui comentariu n cadrul cruia & in&era!i de&crierea. *ce&t lucru e&te util deoarece e-i&t motoare de cutare care i'nor metata',urile %i preiau primele cu inte pe care le '&e&c n pa'in. 3ac a!i reu%it & formula!i o de&criere &u'e&ti %i con in'toare, o pute!i folo&i c+iar ca fraz de nceput n partea izi$il a pa'inii. Metata-"ul /robots/ 2unt &itua!ii c(nd creatorul pa'inii 4e$ dore%te ca anumite pa'ini & fie e-clu&e de la inde-area de ctre motoarele de cutare. 3e e-emplu dac a!i pu$licat &ite,ul pe 4e$ nainte de a fi terminat 9de%i ace&t lucru e&te nerecomandat; &au dac dori!i & reactualiza!i con!inutul anumitor pa'ini %i dori!i ca p(n la finalizarea modificrilor pa'inile & nu fie acce&ate de motoarele de cutare, pute!i folo&i n antetul pa'inilor re&pecti e metata',ul /ro$ot&/ a&tfel) L?#>* nameS/ro$ot&/ contentS/noinde-, nofolloC/M *cea&t con&truc!ie comunic motoarelor de cutare & nu inde-eze pa'ina %i n acela%i timp & nu urmeze nici una dintre le'turile inclu&e n ea. *tri$utul content poate lua urmtoarele alori) all , permite inde-area tuturor pa'inilor none , nu permite inde-area nici unei pa'ini %i nici urmarea le'turilor din cadrul lor inde- , permite inde-area pa'inii folloC , permite urmarea le'turilor din pa'in

noinde- , nu permite inde-area pa'inii nofolloC , nu permite urmarea le'turilor din cadrul pa'inii *lte metata',uri name utilizate &unt) L?#>* nameS/aut+or/ contentS/numeVautor/M 6ermite &pecificarea numelui autorului pa'inii L?#>* nameS/copIri'+t/ contentS/drepturi copIri'+t/M 6ermite &pecificarea drepturilor de autor L?#>* nameS/'enerator/ contentS/numeV aplicatie/M 2pecific aplica!ia cu care a fo&t creat pa'ina. #-emplu) L?#>* nameS/'enerator/ contentS/?icro&oft Dront6a'e 3.0/M Metata&-uri!e 2)ttp"eWuiv2 6e l(n' metata',urile name care ofer informa!ii motoarelor de cutare, e-i&t metata',urile +ttp,eTui care ofer informa!ii $roC&erului pri ind documentul pe care urmeaz &,l de&c+id. Iat n continuare o li&t a ace&tor metata',uri mpreun cu func!iile fiecruia dintre ele. Tabel 1:. 1 #tic+eta *unc!ia *ce&t tip de metata',uri &unt L?#>* +ttp, ec+i alente cu +eaderele =>>6. #le eTui S/0ontent,>Ipe/ comunic $roC&erului care e&te tipul contentS/te-tG+tml] c+ar&etSi&o, pa'inii %i cum & o afi%eze precum %i 8859,1/M &etul de caractere folo&it 9op!ional; L?#>* +ttp, 2pecific lim$a"ul de &cript eTui S/0ontent,2cript,>Ipe/ folo&it n document contentS/te-tG"a a&cript/M L?#>* +ttp, 2pecific lim$a"ul de foi de eTui S/0ontent,2tIle,>Ipe/ &tiluri folo&it n document contentS/te-tGc&&/M L?#>* eTui S/e-pire&/ e-pirariiM +ttp, 6ermite precizarea datei la care contentS/dataV documentul poate fi con&iderat e-pirat

L?#>* eTui S/refre&+/ &ecunde/M

+ttp, contentS/nrV

L?#>* +ttp, eTui S/refre&+/ contentS/nr &ecunde] urlSadre&aVnoua/M

2pecific numrul de &ecunde dup care pa'ina e&te rencrcat automat de ctre $roC&er. *tri$utul content poate con!ine, op!ional, %i adre&a 75@ a altei pa'ini care &e a ncrca n locul pa'inii curente. *cea&t op!iune e&te util c(nd dori!i redirectarea izitatorului ctre alt pa'in. #-emplu) L?#>* +ttp,eTui S/refre&+/ contentS/5] urlS+ttp)GGCCC.nouapa'ina.com/M

3up cum o$&er a!i, metata',urile de tip +ttp,eTui &unt folo&ite pentru a tran&mite $roC&erului di er&e informa!ii pri ind documentul =>?@. 3in acea&t cate'orie face parte %i metata',ul care permite &pecificarea modului de tranzi!ie ntre pa'ini) L?#>* +ttp,eTui S/6a'e,#nter/ >ran&itionScodVtranzitie;/M L?#>* +ttp,eTui S/6a'e,#-it/ >ran&itionScodVtranzitie;/M contentS/5e eal>ran&93urationSnrV&ecunde, contentS/5e eal>ran&93urationSnrV&ecunde,

unde) nrV&ecunde reprezint durata tranzi!iei n &ecunde iar codVtranzitie poate fi unul dintre codurile de mai "o&. Diecare dintre ele realizeaz tranzi!ia pa'inii n alt mod. Tabel 1:. ' Cod tran&i!ie 0 1 2 3 4 5 6 7 8 de Cum se ,ace tran&i!ia 3reptun'+i nc+ide 3reptun'+i de&c+ide care care &e &e

0erc care &e nc+ide 0erc care &e de&c+ide 3e "o& n &u& 3e &u& n "o& 3e la &t(n'a la dreapta 3e la dreapta la &t(n'a 3un'i care depla&eaz &pre dreapta &e

9 10 11 12 13 14 15

3un'i care depla&eaz n "o&

&e

3reptun'+iuri care &e depla&eaz &pre dreapta 3reptun'+iuri care &e depla&eaz n "o& 6i-eli care /dizol / pa'ina 0ortin care &e nc+ide orizontal 0ortin care de&c+ide orizontal &e

0ortin care &e nc+ide ertical

#-emplul 16.1 ilu&treaz func!ionarea ace&tui metata'. 6ute!i o$&er a modul de tranzi!ie dintre pa'ini din Di'ura 16.1. ( emplul 1:. 1 L=>?@M L=#*3M L>I>@#Mmeta1LG>I>@#M L?#>* +ttp,eTui S/pa'e,enter/ contentS/5e eal>ran&9durationS5, tran&itionS0/M L?#>* +ttp,eTui S/pa'e,e-it/ contentS/5e eal>ran&9durationS5, tran&itionS1/M LG=#*3M L1.3K $'colorS/red/M L=1 ali'nS/center/M>ranzitia intre pa'iniLG=1ML=5M 6entru a o$&er a modul de tranzitie apa&ati L* +refS/meta2.+tml/MaiciLG*M LG1.3KM LG=>?@M 6ute!i &c+im$a codurile dup cum dori!i pentru a o$&er a %i alte moduri de tranzi!ie. 3ocumentul meta>)html creat n #-emplul 16.2 &er e%te doar pentru a e-emplifica modul n care &e face tranzi!ia pentru intrarea n pa'in. ( emplul 1:. ' L=>?@M L=#*3M L>I>@#Mmeta2LG>I>@#M LG=#*3M L1.3K $'colorS/IelloC/M L=3M6entru a re eni la pa'ina anterioara apa&ati $utonul 1acJ al $roC&eruluiLG=3M LG1.3KM LG=>?@M .ten!ieH *m precizat c metata',urile &unt inclu&e n antetul documentului =>?@. *tunci c(nd folo&i!i cadre n pa'inile dumnea oa&tr nu uita!i & pla&a!i metata',urile n $locul L=#*3M al tuturor

documentelor care &e de&c+id n cadre %i nu numai n documentul de definire a cadrelor LD5*?#2#>M. 3. -e.umat ?otoarele de cutare &unt aplica!ii foarte puternice care au drept &cop inde-area %i adu'area n $aza lor de date a &utelor de milioane de pa'ini 4e$ e-i&tente. 6entru a facilita inde-area pa'inii de ctre motoarele de cutare, n antetul documentului =>?@ &e includ ni%te elemente &peciale numite metata',uri, prin intermediul etic+etei L?#>*M. 0ele mai importante metata',uri &unt cele care furnizeaz motoarelor de cutare li&ta de cu inte c+eie a&ociat pa'inii %i de&crierea ace&teia 9metata',urile /JeICord&/ %i /de&cription/ ;, precum %i cel care interzice inde-area pa'inilor 9metata',ul /ro$ot&/ ;. *lte metata',uri furnizeaz informa!ii $roC&erului pri ind tipul pa'inii, inter alul de timp dup care pa'ina e&te rencrcat automat, momentul e-pirrii, autorul, pro'ramul cu care a fo&t con&truit, etc. Crearea i publicarea unui site Feb *m &tudiat p(n acum elementele fundamentale ale lim$a"ului =>?@ inclu&i modul n care ace&ta poate fi e-tin& prin folo&irea &cripturilor 0AI, a &cripturilor Ba a2cript %i a foilor de &tiluri. * e!i la ndem(n acum in&trumentele nece&are pentru a crea propriul dumnea oa&tr &ite 4e$. 3ar e&te oare &uficient< 5&pun&ul e&te nu. 6entru a crea un &ite 4e$ de calitate, care & comunice informa!iile n mod lo'ic %i atracti %i care & atra' izitatori permanen!i, cunoa%terea lim$a"ului =>?@ nu e&te &uficient. Enainte de a ncepe &crierea codului =>?@ pentru pa'inile dumnea oa&tr tre$uie & parcur'e!i alte dou etape importante) planificarea &ite,ului %i &ta$ilirea elementelor de 4e$ de&i'n. 3up ce a!i finalizat documentele =>?@ care or face parte din &ite tre$uie & te&ta!i func!ionarea linJ,urilor %i a&pectul pa'inilor n diferite $roC&ere. 8i, n fine, dup ce toate ace&te etape au fo&t parcur&e, urmeaz pu$licarea &ite,ului pe un &er er 4e$ care &,l fac acce&i$il tuturor celor care na i'+eaz pe 4e$. En cele ce urmeaz om di&cuta de&pre etapele care preced con&truirea documentelor =>?@ care or forma &ite,ul %i de&pre cele care urmeaz dup ce codul =>?@ al pa'inilor a fo&t definiti at. Capitolul 1< Plani,icarea site"ului Plani,icarea e&te un a&pect crucial n proce&ul de creare a unui &ite 4e$, deoarece e&te etapa n care &e iau decizii care or influen!a de&i'nul, implementarea %i, mai t(rziu, promo area &ite,ului. 4orld 4ide 4e$ fiind un mediu de&c+i& %i dinamic, planificarea e&te mai de'ra$ un proce& continuu n care inter in &c+im$ri determinate de nnoirea permanent a informa!iilor %i de apari!ia altora noi. *tunci c(nd crea!i un &ite 4e$ tre$uie & fi!i con%tient c e-i&t o &erie de factori a&upra crora creatorul &ite,ului nu are nici un control. 6rimul pa& n proce&ul de planificare e&te identificarea ace&tor factori %i determinarea modului n care ace%tia pot afecta &tructura iitoare a &ite,ului dumnea oa&tr.

1. 0actori care nu pot 'i p!ani'icai Dactorii pe care creatorul &ite,ului nu i poate controla %i prin urmare nu pot face o$iectul unei planificri ri'uroa&e &unt urmtorii) Comportamentu! uti!i.atoru!ui. *ce&t factor implic faptul c nu pute!i controla cum a acce&a utilizatorul informa!iile din &ite,ul dumnea oa&tr. 4e$,ul e&te un sistem permeabil, acea&ta n&emn(nd c un izitator poate intra n interiorul &ite,ului nu numai prin pa'ina de nceput 9pa'ina +ome; ci %i printr,o pa'in oarecare. Uizitatorul &ite,ului poate a"un'e la el parcur'(nd o li&t de rezultate furnizat de un motor de cutare, &au prin intermediul unui linJ aflat pe un alt &ite, &au parcur'(nd o li&t de re&ur&e. .ricare dintre ace&te metode l poate conduce pe izitator la o alt pa'in din interiorul &ite,ului, %i nu la cea de&tinat de dumnea oa&tr a fi pa'ina =ome. En 'eneral, creatorul &ite,ului e&te tentat & &tructureze &ite,ul a (nd n minte un anumit tip de acce&, cel mai ade&ea cel care pleac de la pa'ina de &tart, ceea ce conduce la ale'erea unei anumite &tructuri, la o anumit or'anizare a le'turilor ntre pa'ini, etc. >re$uie & a e!i permanent n edere faptul c izitatorul &ite,ului poate a ea un cu totul alt mod de a parcur'e &ite,ul dec(t cel '(ndit de dumnea oa&tr %i &,i furniza!i de,a lun'ul ntre'ului &ite elemente de na i'a!ie clare care &,l a"ute & &e orienteze. $ro%seru! uti!i.atoru!ui. *%a cum am mai di&cutat, e-i&t o mare arietate de $roC&ere folo&ite pentru a izualiza pa'inile 4e$. 6rin urmare, izitatorii &ite,ului or percepe o ima'ine diferit a &ite,ului dumnea oa&tr, n func!ie de tipul de $roC&er folo&it. 0reatorul &ite,ului nu poate %ti ce tip de $roC&er folo&e%te un anumit izitator %i deci nu are control a&upra modului n care a fi afi%at con!inutul pa'inilor &ale. 3e e-emplu, mai e-i&t nc utilizatori care folo&e&c er&iuni ec+i de Fet&cape &au #-plorer, care nu &uport anumite e-ten&ii =>?@. #-i&t de a&emenea nc n uz $roC&ere te-t, cum e&te @In-, care nu &uport 'rafica. 3ac e!i pla&a informa!ii e&en!iale n fi%iere 'rafice, de e-emplu, ace%ti utilizatori nu or a ea acce& la ele. 3in ace&t moti e&te $ine & &ta$ili!i de la nceput care dori!i & fie ni elul de acce&i$ilitate al &ite, ului dumnea oa&tr din ace&t punct de edere. 7n alt a&pect e&te n!ele'erea faptului c =>?@ e&te un lim$a" care e&te de&tinat definirii &tructurii documentului %i nu al modului &u de afi%are. #&te recomandat & e ita!i &pecificarea n detaliu a a&pectului pa'inilor &au optimizarea pa'inilor pentru un anumit tip de $roC&er. Le&*turi!e cu pa&ini externe. Entr,un &ite 4e$ e-i&t de o$icei le'turi ctre re&ur&e e-terioare &ite,ului care &unt %i ele n afara controlului dumnea oa&tr. 6a'inile referite prin ace&te le'turi %i pot &c+im$a adre&ele, fc(nd a&tfel ca le'tura & nu mai fie ala$il 9le'turi perimate;. 3e a&emenea pot e-i&ta le'turi rupte, n cazul c(nd &er erul pe care e&te 'zduit pa'ina re&pecti are anumite dificult!i te+nice. rin(nd &eama de impo&i$ilitatea de a controla ace&t a&pect, pot fi adoptate mai multe metode de a$ordare) 2ite,ul & nu con!in nici o le'tur e-tern &au care & &e afle n afara controlului direct al de&i'nerului. #&te metoda cea mai &i'ur. 3in pcate, acea&t &trate'ie anuleaz po&i$ilitatea ca

izitatorul & $eneficieze de informa!ii cone-e cu &u$iectul &ite,ului dumnea oa&tr aflate n e-teriorul &u. 0entralizarea re&ur&elor. #&te o practic de& nt(lnit pe 4e$, aceea de a include toate le'turile e-terne ntr,o pa'in &pecial de&tinat ace&tora. 1eneficiul ace&tei &trate'ii e&te c n cazul c(nd una dintre ace&te le'turi e-terne nu mai func!ioneaz, izitatorul &e poate cu u%urin! rentoarce la pa'ina de re&ur&e pentru a te&ta urmtorul linJ. En plu&, cu unele e-cep!ii, izitatorii or parcur'e cel pu!in o parte a &ite,ului nainte de a a"un'e la pa'ina de le'turi e-terne %i a,l pr&i, e entual, definiti . Ie%irea li$er. #&te cea mai fle-i$il a$ordare, permi!(nd pla&area le'turilor e-terne oriunde n cadrul pa'inilor. 3eza anta"ul ei ma"or e&te c izitatorul poate pr&i prematur &ite,ul pentru a urma un anumit linJ. 3ac nu a e!i control a&upra le'turilor de la &ite ctre e-terior, e&te tot at(t de ade rat c nu pute!i controla nici le'turile care &e fac din e-terior ctre &ite. *ce&t lucru poate fi deza anta"o&, deoarece nu pute!i %ti n ce mod e&te prezentat le'tura ctre &ite,ul dumnea oa&tr. 6oate c referirea la el e&te ironic &au ru oitoare, n& ace&t lucru e&te dincolo de controlul dumnea oa&tr. >ot ceea ce pute!i face e&te & crea!i un &ite de calitate %i cu un con!inut aloro&, care & con in' prin el n&u%i. 0u toate c elementele prezentate mai &u& pot prea de&cura"ante, unele dintre ele prezint totu%i %i a anta"e. *&tfel, permea$ilitatea 4e$,ului poate lucra n fa oarea de&i'nerului, cu condi!ia ca ace&ta & &tructureze atent informa!iile prezentate %i & ofere &uficiente elemente de na i'a!ie. . pa'in &au un 'rup de pa'ini din cadrul unui &ite pot fi folo&ite ca referin!e n alte pa'ini &au c+iar ca elemente con&tituti e ale unui alt &ite. 3e e-emplu, un &ite de tip mono,pa'in care face prezentarea unui manual de =>?@ poate fi folo&it ca pa'in indi idual ntr,un &ite de li$rrie electronic, &au poate con&titui o le'tur util din interiorul unui &ite de de&i'n 4e$, mrind a&tfel %an&ele ca pa'ina re&pecti & fie acce&at de izitatori printr,unul dintre ace&te puncte. 2. #tape!e p!ani'ic*rii site-u!ui 6roce&ul de planificare a unui &ite tre$uie & parcur' urmtoarele etape) 2ta$ilirea audien!ei 2ta$ilirea scopului 3efinirea obiectivelor 0olectarea in,orma!iilor de&pre &u$iectul prezentat 2ta$ilirea speci,ica!iilor 2ta$ilirea modului de pre&entare 1udiena 6entru a crea un &ite de calitate %i o comunicare eficient a informa!iilor, o etap deo&e$it de important e&te definirea audien!ei &ite,ului. *udien!a reprezint pu$licul cruia i &e adre&eaz &ite,ul. 2ta$ilirea audien!ei &ite,ului dumnea oa&tr e&te e&en!ial deoarece contri$uie la definirea con!inutului pa'inilor, precum %i a or'anizrii %i a&pectului &u. 7n &ite 4e$ creat pe $aza unor informa!ii preci&e a&upra audien!ei &ale actuale %i iitoare are mult mai multe %an&e de &ucce& dec(t unul care nu &e adre&eaz unui pu$lic &pecific. 2ta$ilirea audien!ei unui &ite implic doi pa%i)

 3efinirea pu$licului !int. >re$uie & &ta$ili!i cui &e adre&eaz &ite,ul dumnea oa&tr. 6ute!i, de e-emplu & adre&a!i /per&oanelor care &tudiaz c+imia/. 3e%i e&te un enun! care define%te ntr,o oarecare m&ur audien!a &ite,ului, e&te de dorit ca definirea audien!ei & fie mai preci& dec(t at(t. U pute!i adre&a de pild, &peciali%tilor n c+imie, %i atunci informa!iile or a ea un nalt 'rad de &pecializare %i un ni el %tiin!ific ridicat &au pute!i adre&a ele ilor de liceu intere&a!i de &tudiul c+imiei, &au care or da e-amene la acea&t di&ciplin. En ace&t caz informa!iile or fi de ni el mai 'eneral, le'ate de pro'rama %colar %i de tipurile de &u$iecte cu care ele ii &e or confrunta la e-amene. 3ac, de e-emplu, dori!i & crea!i un &ite comercial, &ta$ilirea &e'mentului de pia! cruia adre&a!i e&te la fel de important. 3ac inten!iona!i & inde!i produ&e co&metice e!i adre&a pro$a$il femeilor. 3ar acea&ta e&te o reprezentare mult prea 'eneral a pu$licului dumnea oa&tr. *!i putea & fi!i mai &pecific, &ta$ilindu, drept &e'ment de pia! femeile cu (r&ta mai mic de 25 de ani. En acea&t &itua!ie e&te mai pro$a$il c or a ea &ucce& produ&ele de nfrumu&e!are mai ndrzne!e, n reme ce, dac adre&a!i femeilor de (r&t medie, cele mai $ine (ndute or fi produ&ele de ntre!inere, cremele anti,rid, etc. 0oncluzia care &e impune e&te c definirea c(t mai preci& a audien!ei e&te definitorie pentru toate etapele ulterioare ale ela$orrii &ite,ului. 0u c(t mai $ine definit e&te audien!a, cu at(t %an&ele de a crea un &ite de &ucce& &unt mai mari. 3efinirea informa!iilor nece&are care pri e&c pu$licul !int. Fu toate informa!iile de&pre pu$licul !int &unt e&en!iale n ela$orarea &ite,ului. 3ac inten!iona!i & adre&a!i &peciali%tilor n c+imie, care anume caracteri&tici ale ace&tora &unt importante pentru dumnea oa&tr< Fi elul de educa!ie< *ria de &pecializare< 0aracteri&tici per&onale, precum nl!imea %i 'reutatea< # ident, e-cept(nd cazul n care inten!iona!i & inde!i prin intermediul &ite,ului ec+ipament de la$orator, ultimele informa!ii &unt inutile. 6rin urmare e&te nece&ar & identifica!i informa!iile rele ante pri itoare la audien!a &ite,ului dumnea oa&tr. Scopu! 2ta$ilirea &copului &ite,ului e&te etapa n care tre$uie & r&punde!i la ntre$area /de ce?/. 3e ce dori!i & crea!i ace&t &ite< 3efini!ia &copului &ite,ului reprezint tema conductoare n proce&ul de con&truire a ace&tuia. 7n &ite fr un &cop clar %i $ine definit lan&eaz un me&a" necon in'tor %i ce!o&. Uizitatorul &e a ntre$a, fr ndoial, /@a ce &er e%te ace&t &ite</ %i &e a 'r$i &,l pr&ea&c. 6entru a defini &copul &ite,ului tre$uie & a e!i n edere urmtoarele elemente) *ria de cuprindere a &u$iectului. 2 pre&upunem c dori!i & crea!i un &ite care & con!in informa!ii de&pre muzica rocJ a anilor H60. Entr,o a&emenea &itua!ie, nu e!i defini drept &u$iect al &ite, ului muzica rocJ n an&am$lu, deoarece o definire at(t de a&t dep%e%te cu mult aria de cuprindere a &u$iectului dumnea oa&tr. *udien!a. En &copul &ite,ului tre$uie & face!i referire %i la audien!a &ta$ilita anterior. *&tfel, &copul &ite,ului ar putea fi definit n maniera urmtoare) /2ite,ul ofer informa!ii iu$itorilor muzicii rocJ a anilor H60, de (r&t medie/.

 Fi elul de detaliere a &u$iectului. >re$uie & &pecifica!i dac referi!i doar la 'rupurile rocJ reprezentati e &au dori!i & face!i o i&torie complet a perioadei. 1eneficiul &au a anta"ul izitatorului. 0e are de c(%ti'at o per&oan care iziteaz &ite,ului dumnea oa&tr< 6oate afla informa!ii inedite de&pre forma!iile preferate, &au poate fi informat cu pri ire la e olu!ia lor ulterioar. 2ta$ilirea &copului &ite,ului determin deciziile ulterioare ale de&i'nerului pri ind me&a"ul pe care l tran&mite &ite,ul. 7n &cop $ine articulat &er e%te ca "alon pentru toate celelalte etape ale proce&ului de planificare %i creare a &ite,ului. 2copul &ite,ului poate reprezenta c+iar prima informa!ie care le e&te oferit izitatorilor, la intrarea pe prima pa'in. D<iecti"e!e 3up ce a!i &ta$ilit audien!a &ite,ului, care &unt informa!iile pri itoare la pu$licul !int, precum %i &copul &u, pa&ul urmtor con&t n com$inarea tuturor ace&tor informa!ii %i formularea unor o$iecti e &pecifice ale &ite,ului dumnea oa&tr. .$iecti ele reprezint o detaliere a &copului 'eneral al &ite,ului, con!in(nd informa!iile &pecifice care or conduce la ndeplinirea &copului pentru care a fo&t creat &ite, ul. 3e e-emplu, dac &copul unui &ite e&te /& ofere informa!ii de&pre ora%ul ggg/ , ace&ta poate fi du& la ndeplinire prin intermediul unor o$iecti e &pecifice %i ariate cum ar fi) informa!ii de&pre a%ezarea 'eo'rafic a ora%ului, de&pre dez oltarea economic, de&pre ia!a cultural, o$iecti e turi&tice, etc. 0u alte cu inte, n reme ce &copul &ite,ului comunic ce a e!i de '(nd & face!i, o$iecti ele comunic ce informa!ii e!i oferi pentru a ndeplini &copul propu&. 2pre deo&e$ire de &copul &ite,ului, o$iecti ele &e pot modifica n timp, pe m&ur ce apar noi informa!ii de&pre pu$licul !int &au de&pre &u$iectul &ite,ului, cu a"utorul crora pute!i &u&!ine mai $ine &copul &u. Co!ectarea in'ormaii!or despre su<iect Informa!iile referitoare la &u$iectul &ite,ului includ at(t informa!iile on!line c(t %i &ur&ele cla&ice de informa!ii. En acea&t etap e!i colecta nu numai informa!ii le'ate de &u$iectul &ite,ului care or fi prezentate utilizatorului ci %i informa!iile %i cuno%tin!ele de care a e!i ne oie pentru realizarea &ite,ului. 6a%ii nece&ari n con&truirea colec!iei de informa!ii nece&are &unt) 2ta$ilirea informa!iilor nece&are, at(t cele pe care le e!i furniza izitatorului c(t %i cele care &unt nece&are dumnea oa&tr 3eterminarea modului cum e!i o$!ine ace&te informa!ii. En acea&t etap tre$uie & identifica!i &ur&ele de documentare. Informa!iile de&pre &u$iectul ale& le pute!i '&i pe 4e$, n literatura de &pecialitate, n di er&e $aze de date. ?odul de reactualizare a informa!iilor. 3ac informa!iile pe care dori!i & le prezenta!i &unt dinamice %i &e perimeaz cu repeziciune, tre$uie & &ta$ili!i cum inten!iona!i & le actualiza!i %i care e&te inter alul de timp ntre dou reactualizri. 3e e-emplu, dac inten!iona!i & crea!i un &ite care & prezinte %tiri &au date de&pre reme, ele or tre$ui reactualizate zilnic &au c+iar mai frec ent. 3ac &ite,

ul prezint informa!ii de&pre i&torie, e ident c informa!iile or fi reactualizate mult mai rar, e entual la apari!ia unor noi de&coperiri ar+eolo'ice, de e-emplu. Speci'icaii!e 2ta$ilirea &pecifica!iilor pentru un &ite reprezint o detaliere a o$iecti elor &ale %i definirea unor cerin!e &au a unor re&tric!ii. 2pecifica!iile de&criu n detaliu ce informa!ii or fi oferite n pa'inile &ite, ului %i cum or fi ele prezentate. 3e e-emplu, dac unul dintre o$iecti ele unui &ite e&te /furnizarea de le'turi ctre &ur&e $i$lio'rafice referitoare la &u$iect/ , atunci &pecifica!iile or preciza care &unt ace&te &ur&e $i$lio'rafice, care &unt adre&ele lor 75@, c(te a&tfel de adre&e or fi inclu&e ntr,o pa'in, etc. 2pecifica!iile tre$uie & identifice toate re&ur&ele nece&are atin'erii o$iecti elor) linJ,uri, fi%iere 'rafice, fi%iere de &unet &au ideo, alte elemente care or fi inclu&e n &ite) formulare, ima'ini +art, &cripturi. 3e a&emenea, n cadrul &pecifica!iilor tre$uie &ta$ilite %i elementele care nu or fi inclu&e n pa'ini 9dac e&te cazul;. 3e e-emplu, &e poate &pecifica & nu fie folo&ite anumite e-ten&ii =>?@, &au formulare, fi%iere care & dep%ea&c anumite dimen&iuni, etc. Modu! de pre.entare 6lanificarea modului de prezentare implic o &erie de decizii care or &er i drept puncte de reper n etapa de con&truire efecti a &ite,ului. *cea&t etap poate include) 0rearea unor template,uri pentru &ite 0rearea unor mo&tre de documente =>?@, ima'ini +art, &au formulare #%alonarea n timp a etapelor de creare a &ite,ului 3. -e.umat 6rima etap a proce&ului de con&truire a unui &ite e&te planificarea. En acea&t etap tre$uie identifica!i factorii care nu pot fi controla!i printre care &e numr) comportamentul utilizatorului, $roC&erul cu care a fi izualizat pa'ina %i le'turile cu pa'ini e-terne. 6lanificarea &ite,ului parcur'e urmtoarele etape) 2ta$ilirea audien!ei &ite,ului 2ta$ilirea &copului &ite,ului 3efinirea o$iecti elor &ite,ului 0olectarea informa!iilor de&pre &u$iectul prezentat 2ta$ilirea &pecifica!iilor &ite,ului 2ta$ilirea modului de prezentare a &ite,ului 7n &ite de calitate, care & ofere informa!ii aloroa&e n mod atracti %i & permit o comunicare eficient a ace&tora nu &e na%te n mod nt(mpltor. Dr a a ea o pri ire de an&am$lu a&upra a&pectelor &ta$ilite n faza de planificare, %an&ele de a realiza un &ite de $un calitate &unt minime. 3ac e!i ncepe & &crie!i direct codul =>?@ fr & trece!i prin etapa de planificare e!i o$!ine doar o n'rmdire de pa'ini fr coeren!, ade&ea defectuo& le'ate ntre ele, cu un con!inut neclar %i &la$ &tructurat.

Capitolul 1= 6esi-nul site"ului .dat parcur& etapa de planificare, a (nd clare audien!a, &copul, o$iecti ele %i &pecifica!iile &ite, ului, pute!i trece la etapa de creare efecti . 6entru ca &ite,ul dumnea oa&tr & ai$ un a&pect plcut, o $un or'anizare, in&trumente de na i'are eficiente tre$uie & cunoa%te!i %i & aplica!i re'ulile fundamentale de 4e$ de&i'n. 0(nd &unte!i n faza de concepere a de&i'nului principalul dumnea oa&tr o$iecti e&te & crea!i un a&pect atracti %i & oferi!i izitatorului &ite,ului un &entiment de &ati&fac!ie, pe m&ur ce ace&ta parcur'e pa'inile. 3e&i'nul unui &ite tre$uie & ec+ili$reze performan!ele $roC&erului, cu e&tetica %i func!ionalitatea &ite,ului. En etapa de de&i'n &unt luate deciziile de ordin practic care or conduce la ndeplinirea o$iecti elor &ta$ilite) c(te ima'ini &au elemente 'rafice e!i include n pa'in, c(t de mult te-t or con!ine pa'inile, ce te-te &au ima'ini or fi folo&ite drept le'turi. 1. :rincipii!e desi&nu!ui %e< 6entru a lua deciziile corecte n ceea ce pri e%te de&i'nul unui &ite tre$uie & a e!i n edere c(te a principii de $az) .socierea semni,ica!iilor. Dolo&i!i, de puterea +Iperte-tului pentru a &ta$ili le'turi ntre informa!iile nrudite ca &emnifica!ie. Men!inerea competitivit$!ii. 3eoarece 4e$,ul e&te un mediu foarte competiti , a&i'ura!i, c de&i'nul &ite,ului &e men!ine la cel mai &czut co&t po&i$il, din punctul de edere al izitatorului. *ce&t co&t include timpul de ncrcare al pa'inilor, aplica!iile &uplimentare nece&are pentru izualizarea optim a pa'inilor precum %i efortul depu& de izitator pentru a n!ele'e informa!iile prezentate. *olosirea e,icient$ a resurselor. *le'e!i pentru &ite,ul dumnea oa&tr acele elemente care in n nt(mpinarea nece&it!ilor utilizatorului, %i &unt c(t mai eficiente po&i$il din punctul de edere al dimen&iunii fi%ierelor, al timpului de acce& %i al ntre!inerii ulterioare. Concentrarea pe necesit$!ile utili&atorului. *ce&ta e&te, poate, cel mai important principiu de 4e$ de&i'n %i, parado-al, cel mai ade&ea i'norat. 7n &ite 4e$ nu &e con&truie%te pentru a &ati&face 'u&tul de&i'nerului 9&au al clientului pentru care lucreaz; %i nici pentru a etala cuno%tin!ele &ale a&te a&upra celor mai noi te+nici de pro'ramare 4e$, ci pentru a eni n nt(mpinarea ne oii de informa!ii a izitatorilor &i. Docalizarea a&upra utilizatorului e&te prioritatea principal a unui &ite de calitate. Un!ele-erea permeabilit$!ii. *ce&t principiu &e refer la n!ele'erea %i a&umarea faptului c izitatorul poate acce&a un &ite prin oricare pa'in a &a. 3in ace&t moti e&te de dorit ca informa!iile din cadrul unei pa'ini & &e auto,&u&!in fr a depinde de informa!iile din re&tul &ite,ului. 3ac ace&t lucru nu e&te po&i$il, e&te o$li'atorie prezen!a unor in&trumente de na i'a!ie eficiente care & permit izitatorului orientarea cu u%urin! n interiorul &ite,ului. Crearea unui aspect pl$cutR coerent i ,luent. 6a'inile &ite,ului tre$uie & ofere impre&ia unui tot $ine or'anizat, elementele izuale 9icon,uri, elemente de na i'are; tre$uie & fie coerente pe tot parcur&ul &ite,ului, fiecare pa'in tre$uie & con!in indicii a&upra identit!ii &ite,ului %i a&upra &copului ei.

Sus!inerea interactivit$!ii. 0+iar dac nu folo&i!i formulare care a&i'ur un 'rad nalt de interacti itate cu izitatorii &ite,ului, e&te o$li'atorie prezen!a unor informa!ii de contact 9adre&a de mail a 4e$ma&ter,ului, cel pu!in; a&tfel nc(t utilizatorii & poat o$!ine informa!ii &uplimentare &au & poat comunica e entualele pro$leme aprute la parcur'erea &ite,ului. Sus!inerea navi-a!iei. *&i'urarea unor in&trumente de na i'a!ie eficiente e&te una dintre condi!iile e&en!iale ale unui &ite de calitate. 2e &pune c un &ite $un e&te acela n care izitatorul nu e&te niciodat o$li'at & ape&e $utonul 1acJ al $roC&erului. 2. Dr&ani.area unui site 1una or'anizare a &ite,ului e&te unul dintre elementele c+eie ale &ucce&ului &u. ?odul de or'anizare depinde de &copul, o$iecti ele %i &u$iectul &ite,ului %i &e $azeaz pe principiile de de&i'n enun!ate mai &u&. En func!ie de &tructura lor, &ite,urile &e mpart n mai multe cate'orii) &ite,uri liniare, formate dintr,o &in'ur pa'in 9mono,pa'in; &ite,uri liniare formate din mai multe pa'ini 9multi,pa'in; &ite,uri cu &tructur ierar+ic &ite,uri cu &tructur de tip 4e$ @e'turile dintre pa'ini tre$uie & fie core&punztoare tipului de &ite pe care l con&trui!i. Site-uri!e !iniare mono-pa&in* *ce&t tip de &ite e&te, a%a cum indic %i numele, format dintr,o &in'ur pa'in. *cea&t &tructur &e folo&e%te atunci c(nd informa!iile prezentate &unt &u$ form de te-t care &e poate mpr!i fire&c n &ec!iuni mai mici. Uizitatorii pot parcur'e ntrea'a pa'in derul(nd,o dar, de o$icei, la nceputul pa'inii e-i&t o li&t de le'turi care are rol de 0uprin&. *ce&tea &unt ni%te le'turi interne 9ancore; care conduc rapid izitatorul la &ec!iunea care l intere&eaz, fr a mai derula ntrea'a pa'in. Empr!irea con!inutului pa'inii n &ec!iuni mai mici &e poate face folo&ind linii orizontale. #&te indicat ca la fiecare nou &ec!iune & in&era!i o le'tur intern ctre partea &uperioar a pa'inii unde &e afl 0uprin&ul. Site-uri!e !iniare mu!ti-pa&in* 2tructura de ace&t tip &e folo&e%te n &itua!ia c(nd informa!iile prezentate &e &ucced ntr,o ordine &ec en!ial, de la nceput la &f(r%it, informa!iile prezentate ntr,o pa'in $az(ndu,&e pe cele din pa'ina anterioar. 6entru a,l ndruma pe izitator & parcur' &ite,ul n ordine, fiecare pa'in tre$uie & con!in o le'tur cu pa'ina urmtoare, precum %i cu cea anterioar. 3e a&emenea, e&te nece&ar & in&era!i %i o le'tur cu prima pa'in a &ite,ului care tre$uie & con!in 0uprin&ul, pentru a facilita %i &altul direct la o anumit pa'in. Entr,un &ite cu o a&tfel de &tructur pa'inile nu tre$uie & fie prea lun'i 9de dorit ar fi & nu dep%ea&c un ecran; pentru a face na i'area mai comod. 0u toate c ace&t tip de or'anizare e&te lo'ic, nu tre$uie & uita!i principiul permea$ilit!ii. 6entru un izitator care a intra n &ite printr,o pa'in oarecare, indica!ii de na i'are cum ar fi /Enainte/ , /Enapoi/ ar putea & nu ai$ prea mult n!ele&. Site-uri!e cu structur* ierar/ic*

2ite,urile de ace&t tip &unt cele mai numeroa&e pe 4e$. 7n a&tfel de &ite e&te format dintr,o pa'in de $az 9=ome; de ni el zero, care con!ine le'turi ctre alte pa'ini, fiecare pa'in con!in(nd c(te o parte a &u$iectului &ite,ului. Diecare dintre ace&te pa'ini de ni el unu poate a ea, la r(ndul &u, le'turi cu alte pa'ini, detaliind &u$iectul %i furniz(nd informa!ii &pecifice. 7n e-emplu de &ite de ace&t tip e&te o li$rrie irtual. 6a'ina =ome ar putea con!ine le'turi ctre di er&e cate'orii) 1eletri&tic, I&torie, 6olitic, #conomie, 0alculatoare %i Internet. 3ac un izitator e&te intere&at de un manual de pro'ramare n 6erl, el a ale'e le'tura ctre 0alculatoare %i Internet %i a a"un'e ntr,o pa'in de ni elul unu unde a '&i le'turi ctre 6ro'ramare, Internet, =ardCare. Ua ale'e le'tura 6ro'ramare care a de&c+ide o pa'in de ni elul doi care a con!ine o li&t de titluri, printre care %i manualul cutat. *tunci c(nd concepe!i &tructura unui a&tfel de &ite, tre$uie & acorda!i o mare aten!ie or'anizrii lo'ice %i fluente a &ite,ului. Diecare pa'in tre$uie & con!in o le'tur ctre pa'ina =ome a&tfel nc(t izitatorul & poat re eni la nceput fr & fie o$li'at & &tr$at toate ni elele. Fu le'a!i prima pa'in de prea multe pa'ini de ni elul unu ci ramifica!i,le n ad(ncime. 3ac &ite,ul e&te de mari dimen&iuni, introduce!i n partea &uperioar a fiecrei pa'ini o $ar de na i'are care informeaz izitatorul de&pre locul unde &e afl. 5e enind la e-emplul cu li$rria, un a&tfel de in&trument de na i'are ar putea arta a%a) #ome M Calculatoare / &rogramare) En plu&, e&te indicat & oferi!i o $ar de na i'are &ecundar la $aza pa'inii. Site-uri!e de tip reea. *ce&te &ite,uri au o &tructur li$er. #le &unt formate din mai multe pa'ini, fiecare put(nd a ea le'tur cu oricare alt pa'in. #-i&t %i aici o pa'in =ome, n& de la ea, izitatorul poate na i'a prin &ite fr a urma un drum preci&. En 'eneral, ace&t tip de &ite e&te potri it pentru &u$iectele care nu au o &tructur lo'ic intern, &u$iecte recrea!ionale &au di&tracti e. 3ac dori!i & crea!i un &ite de ace&t tip, tre$uie & a e!i 'ri" & oferi!i n fiecare pa'in, pe l(n' le'turile cu alte pa'ini, o le'tur ctre pa'ina =ome. En plu&, a&i'ura!i, c materialul dumnea oa&tr e&te adec at ace&tui tip de &ite deoarece altfel &ite,ul a purta amprenta neconcordan!ei ntre &u$iectul a$ordat %i modul &u de or'anizare. 3. Metodo!o&ia de construire a site-u!ui 3e%i nu e-i&t un mod unic de de&f%urare a proce&ului de con&truire a unui &ite, e-i&t trei tipuri de a$ordri po&i$ile, pe care creatorul &ite,ului le poate ale'e &au com$ina, n func!ie de nece&it!i. Metoda 2Top-@o%n2 3ac de&i'nerul are nc de la nceput o idee clar a&upra con!inutului &ite,ului, acea&t a$ordare e&te cea mai potri it. En ace&t tip de metodolo'ie, e&te creat mai nt(i pa'ina de nceput a &ite,ului 9pa'ina =ome; %i apoi celelalte pa'ini. 6a'inile pot con!ine un minim de informa!ii, urm(nd ca la dez oltarea ulterioar a &ite,ului, ele & fie m$o'!ite. * anta"ul ma"or al ace&tei a$ordri e&te acela c permite continuitatea izual %i de con!inut, deoarece toate pa'inile or fi con&truite n acord cu pa'ina de &tart. . metod foarte $un de a realiza ace&t lucru e&te crearea unor template,uri care & con!in acela%i tip de elemente pentru toate pa'inile %i care or fi folo&ite drept tipare la momentul &crierii codului =>?@ pentru pa'inile re&pecti e. Metoda 2$ottom- p2

*cea&t a$ordare &e folo&e%te c(nd de&i'nerul nu cunoa%te de la nceput care or fi &tructura %i a&pectul final al &ite,ului, dar cunoa%te a&pectul %i con!inutul unor pa'ini din cadrul &u. *cea&t &itua!ie poate aprea c(nd dori!i ca &ite,ul & con!in pa'ini de"a e-i&tente, care au fo&t create n proce&ul de dez oltare al altui &ite, de e-emplu. 0+iar dac nu de!ine!i pa'ini create de"a de la care & porni!i, acea&t a$ordare permite crearea unor pa'ini indi iduale care ndepline&c anumite o$iecti e %i care pot fi le'ate apoi de o pa'in =ome. * anta"ul a$ordrii /1ottom,7p/ e&te acela c, la con&truirea pa'inilor indi iduale, nu mai &unte!i con&tr(n& la re&pectarea unui anumit &til, con&ec ent cu cel din pa'ina =ome. >otu%i, a"u&tarea ulterioar a pa'inilor n &en&ul realizrii unui a&pect unitar, e&te nece&ar. Metoda increment*rii *cea&t metod con&t n con&truirea unei pa'ini de &tart %i a unor pa'ini indi iduale le'ate de ace&ta, a (ndu,&e n edere crearea unor pa'ini intermediare, pe m&ura nece&it!ilor. ?etoda &e folo&e%te atunci c(nd e&te nece&ar con&truirea rapid a unui &ite care urmeaz a fi dez oltat ulterior, n loc de a,l con&trui n ntre'ime de la nceput. #&te o metod nerecomandat nceptorilor, deoarece prin adu'irile ulterioare e-i&t ri&cul de a o$!ine un &ite defectuo& or'anizat %i lip&it de unitate. 4. Te/nici de desi&n %e< 6entru a realiza de&i'nul unui &ite &unt folo&ite o &erie de te+nici cu a"utorul crora pa'inile capt contur, at(t din punct de edere izual c(t %i din punct de edere al or'anizrii le'turilor %i al ampla&rii con!inutului n pa'ini. En continuare &unt prezentate c(te a dintre ace&te te+nici, fiecare dintre ele referindu,&e la c(te un a&pect al de&i'nului &ite,ului. Sc/ia site-u!ui .dat ce ,a!i deci& a&upra modului n care a fi &tructurat &ite,ul e&te foarte $ine ca nainte de a ncepe &crierea efecti a codului =>?@ pentru fiecare pa'in n parte, & realiza!i o &c+i! a ntre'ului &ite. 6ute!i folo&i n ace&t &cop ?icro&oft 4ord &au orice alt proce&or de te-t. 6entru nceput crea!i un document nou n care li&ta!i punctele ma"ore pe care dori!i & le acoperi!i n pa'ina =ome. Dace!i de a&emenea o li&t a elementelor 'rafice pe care inten!iona!i & le include!i, n&o!ite de indica!ii pri ind a%ezarea lor n pa'in. 2ta$ili!i care &unt pa'inile de ni el unu %i ce informa!ii dori!i & oferi!i n cadrul lor, precum %i pa'inile &u$ordonate ace&tora care or cuprinde detalierea &u$iectelor anun!ate n pa'inile de ni el unu. 6entru a a ea o ima'ine c(t mai e-act a &tructurii &ite,ului nc din faza de &c+i!are a &a e&te recomandat & folo&i!i $ara de in&trumente Outlining din meniul %ools M Customi8e din 4ord. *cea&ta permite & &ta$ili!i ni elul pa'inilor %i & realiza!i cu u%urin! ramificarea lor n ad(ncime. . alt metod pentru a realiza &c+i!a &ite,ului o con&tituie 'raficul 9&au +arta; &ite,ului. 3ac nu dori!i & complica!i folo&ind un editor de te-t &au un pro'ram de 'rafic, pute!i realiza o a&tfel de &c+i! %i pe +(rtie, cu creionul. 3e&ena!i c(te un dreptun'+i pentru fiecare pa'in din &ite, &pecific(nd n interiorul &u &copul %i o$iecti ele pa'inii, elementele %i aran"area lor n pa'in. *poi uni!i dreptun'+iurile prin &'e!i pentru a &pecifica tra&eele pe care le poate parcur'e utilizatorul. 2'e!ile reprezint de fapt le'turile dintre pa'ini. * e!i 'ri" ca &pre pa'ina =ome & indice toate &'e!ile, pentru a a&i'ura a&tfel o le'tur cu ea din orice pa'in a &ite,ului. En ace&t mod pute!i planifica pentru

fiecare pa'in ce urmeaz & ad, & n!elea' %i & fac izitatorul ace&teia, precum %i unde &e poate depla&a din pa'ina re&pecti . .ricare ar fi metoda folo&it pentru a &c+i!a &ite,ul, la fiecare pa'in tre$uie & urmtoarele ntre$ri) 0e dore&c & afle izitatorul din acea&t pa'in< 0e dore&c & fac izitatorul n ace&t moment< 0e dore&c & &imt izitatorul parcur'(nd pa'ina< 7nde dore&c & mear' izitatorul n continuare< 3e&i'ur, n ultim in&tan! comportamentul %i impre&iile izitatorului &cap controlului de&i'nerului, n& un &ite n care fiecare pa'in d r&pun&uri clare %i limpezi ace&tor ntre$ri are foarte multe %an&e de a ntruni aprecierile poziti e ale izitatorilor &i. Pa-ina de intrare n site 2pa-ina splas)3 #-i&t multe &ite,uri care nainte de pa'ina =ome au o pa'in de intrare n &ite, numit pa-in$ splas). 2copul unei a&tfel de pa'ini e&te identificarea rapid a o$iectului &ite,ului n timp ce &e ncarc re&tul de date. 6a'ina &pla&+ are pentru &ite acela%i rol pe care l are coperta unei cr!i &au prima pa'in a unei re i&te. *cea&t prim pa'in tre$uie & &e ncarce rapid, & ai$ un impact izual puternic %i & comunice e&en!ialul de&pre &u$iectul &ite,ului &au compania creia i apar!ine &ite,ul. #-i&t opinii di er'ente n le'tur cu folo&irea %i utilitatea pa'inii &pla&+ ntr,un &ite. ?ai ale& dac face apel la elemente multimedia, &unet, 'rafic, anima!ie comple- care ncetine&c timpul de ncrcare, pa'ina &pla&+ poate aduce mai de'ra$ de&er icii &ite,ului. En plu&, pa'ina &pla&+ poate fi re&im!it de izitator ca o $arier n acce&ul imediat la informa!iile din interiorul &ite,ului. Pa-ina Home 3e%i a&pectul %i con!inutul pa'inii =ome poate aria foarte multe de la un &ite la altul, e-i&t c(te a elemente comune prezente n orice pa'in de &tart) Identificarea firmei &au companiei creia i apar!ine &ite,ul 9dac e&te cazul; 3e&crierea &copului &ite,ului 3e&crierea &tructurii &ite,ului. 6a'ina =ome are %i func!ia de 0uprin& al &ite,ului oferind indica!ii izitatorilor a&upra &u$iectelor a$ordate 2ta$ilirea rela!iilor ntre &ec!iunile de ni el unu ale &ite,ului %i cele &u$ordonate lor. *cea&ta &e realizeaz prin intermediul $arelor de na i'are, $utoanelor, +r!ilor de ima'ini &au li&telor de le'turi. Durnizarea informa!iilor de contact. Pa-inile din interior 6a'inile de ni el unu reprezint di iziunile ma"ore ale &u$iectului 'eneral al &ite,ului. #-i&t tenta!ia de a include prea multe informa!ii detaliate la ace&t ni el. 3ac &ite,ul acoper un &u$iect a&t, cu o cantitate mare de informa!ii &pecifice, e&te $ine & l&a!i detalierea ace&tora pentru pa'inile de ni el doi. 6a'inile de ni el unu tre$uie & con!in o de&criere &uccint a &u$iectului acoperit precum %i le'turi ctre pa'inile de ni el doi care detaliaz fiecare parte a &u$iectului. . te+nic de& utilizat e&te pla&area re&ur&elor &uplimentare n pa'ini de ni elul trei. 3e e-emplu o pa'in de ni elul doi care ofer pune!i

pe l(n' te-t %i ima'ini e-plicati e ale unui anumite no!iuni poate fi le'at de pa'ini de ni el trei care con!in ima'inile. 0(nd izitatorul face clicJ pe un anumit te-t aflat n pa'ina de ni el doi &e de&c+ide pa'ina de ni el trei cu ima'inea e-plicati . * anta"ul ace&tei a$ordri e&te de&con'e&tionarea pa'inilor de ni elul doi care cuprind detalierea &u$iectului. 2c+i!a dumnea oa&tr tre$uie & cuprind, pe l(n' modul de or'anizare a pa'inilor, %i o li&t c(t mai complet a elementelor pe care dori!i & le include!i n fiecare pa'in 9ima'ini, formulare, fi%iere multimedia, etc.;. 0ra&mentarea in'ormaii!or .mul poate proce&a o cantitate limitat de informa!ii ntr,o anumit unitate de timp. 3in ace&t moti , una dintre &arcinile &pecifice n de&i'nul 4e$ e&te fra'mentarea informa!iilor n &ec en!e care & nu dep%ea&c po&i$ilit!ile de cuprindere ale utilizatorului. 0antitatea de informa!ii cuprin& ntr,o pa'in nu tre$uie &,l cople%ea&c pe izitatorul pa'inii &au & mrea&c timpul ei de ncrcare. 3e a&emenea, modul de fra'mentare al informa!iei tre$uie & focalizeze aten!ia izitatorului a&upra principalelor &u$iecte a$ordate n pa'in %i & l a"ute & ia cuno%tin! n mod 'radat de &u$iectul prezentat. Dra'mentarea corect a informa!iilor e&te n a anta"ul de&i'nerului, deoarece l a"ut & creeze pa'ini reutiliza$ile. 3ac fiecare pa'in pe care o e!i crea &er e%te la ndeplinirea unui anumit &cop, pute!i include acea&t pa'in fie direct, fie ca o re&ur& util %i n alte &ite,uri pe care le crea!i ulterior %i care au &u$iecte cone-e cu pa'ina re&pecti . En cadrul &ite,ului fra'mentarea informa!iilor conduce la &ta$ilirea modului n care a fi detaliat &u$iectul, la determinarea numrului de pa'ini nece&are pentru ace&ta precum %i a ni elului pa'inilor. 3e%i di izarea &u$iectului n pr!i mai mici e&te o te+nic deo&e$it de util, nu a$uza!i totu%i de puterea +Iperte-tului. . fra'mentare e-ce&i a &u$iectului ntr,un mare numr de pa'ini e&te la fel de o$o&itoare ca %i prezentarea ace&tuia n $loc. 7n de&i'n eficient anticipeaz ne oia izitatorului de a o$!ine informa!ii &uplimentare %i furnizeaz la momentul oportun le'turi ctre pa'inile care detaliaz acel punct. En cadrul unei pa'ini modul de fra'mentare al informa!iilor !ine de lo'ica intern a &u$iectului prezentat. 6entru a diferen!ia pr!ile con&tituti e ale &u$iectului unei pa'ini o mare importan! o are or'anizarea te-tului n cadrul pa'inii. 0ei mai mul!i dintre cei care na i'+eaz pe 4e$ o$i%nuie&c & /&caneze/ pa'inile n cutare de informa!ii. #i cite&c mai nt(i titlurile, li&tele, %i primele fraze dintr,un para'raf. #&te $ine & !ine!i &eama de ace&t lucru c(nd or'aniza!i te-tul n pa'in. 0on!inutul pa'inii tre$uie & fie c(t mai u%or de citit. Dolo&i!i para'rafe &curte, de&pr!ite prin linii li$ere, e ita!i frazele prea lun'i %i folo&i!i n mod "udicio& titlurile. *ccentua!i pr!ile pe care re!i & le &coate!i n e iden! n te-t prin n'ro%are &au &crierea lor cu alt culoare, dar nu n e-ce&. *$uzul de culori &au de te-te &cri&e cu caractere aldine fac pa'ina ncrcat %i 'reoaie. #&te indicat & limita!i la un numr redu& de tipuri de font. 0ele mai apreciate &unt Uerdana %i *rial, deoarece &unt lizi$ile %i ele'ante. #&te mai $ine & e ita!i folo&irea tipului >ime& FeC 5oman, de%i e&te un tip foarte folo&it n editarea de te-te. 2pre deo&e$ire de te-tele tiprite, pe monitor citirea &e face cu 25: mai ncet deoarece monitorul adau' fonturilor un anumit 'rad de neclaritate 9fu88iness;, mai accentuat la fonturile cu &erife, a%a cum e&te >ime& FeC 5oman. Fu aran"a!i te-tul n pa'in pe dou coloane a&tfel nc(t izitatorul & fie ne oit & re in n partea &uperioar a pa'inii pentru a citi ce,a de,a doua coloan. *ce&t format e&te potri it pentru ziare %i re i&te dar nu %i pentru o pa'in 4e$ deoarece rupe cur&i itatea depla&rii n cadrul &ite,ului.

Le&area pa&ini!or ?odul n care e!i realiza le'turile dintre pa'ini depinde de &tructura &ite,ului. 3ac opta!i pentru o &tructur ierar+ic, le'turile din interiorul &ite,ului or fi adaptate ace&tei &tructuri. * anta"ul &tructurii ierar+ice e&te c ofer utilizatorului po&i$ilitatea unei na i'ri lo'ice, plec(nd de la informa!iile 'enerale ctre cele particulare. 3eza anta"ul ace&tei te+nici e&te c utilizatorul tre$uie & urmeze o cale pre&ta$ilit pentru a a"un'e la o anumit informa!ie, care &e poate afla c(te a linJ,uri di&tan! de pa'ina =ome. . alt manier de a realiza le'turile din interiorul &ite,ului e&te de a le'a fiecare pa'in de toate celelalte. Ue!i o$!ine a&tfel o &tructur ne,ierar+ic care are a anta"ul c fiecare pa'in &e afl la di&tan! de un linJ de oricare alta, inclu&i de pa'ina =ome. 6entru &ite,urile de dimen&iuni redu&e o a&tfel de &tructur poate func!iona $ine, n& pentru &ite,urile cu un mare numr de pa'ini numrul de le'turi cre%te rapid iar na i'area n interiorul &ite,ului de ine foarte dificil. En plu&, utilizatorul nu are la di&pozi!ie o cale ierar+ic prin care poate a"un'e la o informa!ie &pecific. (nstrumente!e de na"i&are 6entru a realiza o na i'are lo'ic %i eficient n cadrul &ite,ului in&trumentele de na i'are tre$uie & fie perfect adaptate modului n care &unt create le'turile dintre pa'ini %i n plu&, & ofere indicii izuale a&upra func!iei lor. 6entru a crea un a&pect izual unitar al ntre'ului &ite %i pentru a nu deruta izitatorul, e&te recomandat ca in&trumentele de na i'are & fie acelea%i n toate pa'inile. 2ta$ili!i de la nceput a&pectul icon,urilor, $utoanelor &au te-tului pe care le e!i folo&i drept le'turi %i p&tra!i,l pe parcur&ul ntre'ului &ite. *cea&t te+nic ofer &ite,ului coeren! %i unitate %i &ta$ile%te imediat identitatea fiecrei pa'ini n cadrul &ite,ului. En plu&, folo&irea repetat a acelora%i elemente 'rafice de na i'are mre%te eficien!a $roC&erului deoarece ace&tea &unt ncrcate la de&c+iderea primei pa'ini %i &tocate n memoria cache, fr a mai fi nece&ar ncrcarea lor la fiecare nou pa'in. In&trumentele de na i'are tre$uie & fie c(t mai u%or de n!ele& %i localizat. 3ac folo&i!i o $ar de na i'are pla&a!i,o acolo unde izitatorii &unt o$i%nui!i & o caute) n partea &uperioar a pa'inilor, n &t(n'a &au n dreapta pa'inii. Dolo&i!i o $ar &ecundar de na i'are la $aza pa'inii, acea&ta l a a"uta pe izitator & &e depla&eze ntr,o alt &ec!iune a &ite,ului fr a mai fi ne oit & deruleze pa'ina n &u& p(n la $ara principal de na i'are. 3ac &ite,ul e&te de dimen&iuni mari e&te o idee $un & crea!i o pa'in &pecial care & reprezinte +arta &ite,ului %i & pla&a!i le'tura ctre ea n $ara principal de na i'are din cadrul fiecrei pa'ini. *cea&ta a permite izitatorului & &e orienteze n interiorul &ite,ului, oricare ar fi pa'ina prin care a intrat n &ite. =arta a con!ine le'turi ctre toate pa'inile, 'rupate conform modului de or'anizare al &ite,ului. 3e a&emenea, dac folo&i!i o &tructur ierar+ic, e&te util prezen!a unui in&trument &uplimentar care & informeze izitatorul a&upra locului unde &e afl n cadrul &ite,ului %i a cii prin care a a"un& aici, n maniera urmtoare) #ome / &agina de nivel unu / &agina de nivel doi / &agina curent) (n'ormaii!e despre site i pa&ina curent*

Diecare pa'in a &ite,ului tre$uie & con!in indica!ii pri ind &copul %i o$iecti ele &ite,ului precum %i o$iecti ele &pecifice acelei pa'ini. En faza de planificare a!i colectat informa!ii pri ind pu$licul !int, a!i formulat &copul %i o$iecti ele ntre'ului &ite. *ce&tea reprezint elementele fundamentale n "urul crora e&te con&truit &ite,ul. Diecare pa'in a &a are drept &cop ndeplinirea unuia dintre o$iecti e. *ce&te informa!ii tre$uie comunicate n pa'ina re&pecti . Uizitatorul nu tre$uie for!at & '+icea&c ce rol are o anumit pa'in n cadrul &ite,ului. ?ulte &ite,uri prezente pe 4e$ con!in o pa'in &pecial cu informa!ii de contact precum %i o pa'in care con!ine informa!ii de&pre &ite %i creatorii &i 9pa'ina 0bout;. >otu%i e&te recomandat ca ace&te informa!ii & fie inclu&e %i n &u$&olul pa'inilor din interiorul &ite,ului. #&te $ine & include!i aici informa!ii de&pre copIri'+t, data ultimei reactualizri a pa'inii, de&pre or'aniza!ia &au compania creia i e&te dedicat &ite,ul 9dac e&te cazul; %i informa!ii de contact 9adre& de mail, numr de telefon, adre& po%tal;. Dr&ani.area pa&inii cu aEutoru! ta<e!e!or 7nul dintre a&pectele pe care tre$uie & le a e!i n edere la con&truirea unei pa'ini e&te rezolu!ia ecranului. ?ul!i dintre izitatorii pa'inii folo&e&c rezolu!ia de 800-600 de pi-eli. . pa'in cu l!imea mai mare de 600 de pi-eli poate face nece&ar derularea pe orizontal a pa'inii, care pentru mul!i izitatori e&te o$o&itoare %i incomod. 3in ace&t moti , e&te recomandat ca tot con!inutul pa'inii & fie inclu& ntr,un ta$el de $az cu l!imea de 600 de pi-eli. Tabelul de ba&$ 0on&truirea pa'inii ncepe cu un ta$el de $az, cu l!imea 9Cidt+; de 600 de pi-eli, o linie %i o coloana. *linia!i ta$elul la mar'inea din &t(n'a &au centrat n pa'in. 2eta!i c+enarul 9$order; la aloarea /0/ pentru a,l face in izi$il pentru izitator. Entre'ul con!inut al pa'inii a fi pla&at n interiorul ace&tui ta$el. *&i'ura!i, c a!i &etat culoarea de fond 9$'color; pentru pa'ina dumnea oa&tr. .p!iunea /default/ la& $roC&erul & controleze culoarea fondului. 3e cele mai multe ori acea&ta e&te al$, dar e&te mai $ine & a e!i certitudinea c ea a aprea la fel n orice $roC&er, a%a nc(t &eta!i $'colorS/C+ite/ &au orice alt culoare dori!i. En func!ie de felul cum dori!i & or'aniza!i &ite,ul %i de &copul ace&tuia e!i +otr unde dori!i & pla&a!i $ara principal de na i'are. 4ara de navi-are n stn-a pa-inii 3ac a!i deci& & opta!i pentru pla&area $arei de na i'are n partea &t(n'a 9cea mai uzual a%ezare;, e!i include n ta$elul de $az un ta$el cu 2 &au 3 coloane. 3ac folo&i!i un ta$el cu 2 coloane &eta!i di&tan!a ntre celule 9cellpaddin'; la aloarea /4/ pentru a &pa!ia te-tul de mar'inea ta$elului. 6ute!i &pecifica l!imea celulelor fie n pi-eli fie n procente. 3ac folo&i!i un ta$el cu 3 coloane, coloana din centru poate fi folo&it ca /tampon/ , care a &epara con!inutul coloanei din &t(n'a de con!inutul celei din dreapta. 2eta!i atri$utul $order al ta$elului la /0/ pentru ca mar'inea & nu fie izi$il. .dat &ta$ilite ace&te atri$ute, pute!i adu'a n ta$el at(tea linii c(te &unt nece&are &au pute!i include un alt ta$el n cel e-i&tent.

4ara de navi-are n partea superioara 6entru a con&trui o $ar de na i'are n partea de &u& a pa'inii, tre$uie & include!i n ta$elul de $az un ta$el cu o &in'ura coloana. 2eta!i atri$utele cellpaddin' S /4/ %i $order S /0/. En prima linie a ta$elului e!i introduce lo'o,ul &au titlul &ite,ului, n linia a doua e!i afi%a $ara de na i'are, iar pe liniile urmtoare, con!inutul pa'inii. 4ara de navi-are n partea dreapta #&te o a$ordare mai pu!in utilizat. 0el mai ade&ea e&te folo&it pentru pa'inile de tip catalo' de produ&e, unde ima'inile %i de&crierea produ&elor &unt pla&ate n coloana din &t(n'a, care ocup cea mai mare parte a &pa!iului. Dolo&irea ta$elelor pentru or'anizarea con!inutului pa'inii e&te o practic foarte folo&it. >a$elele or p&tra ima'inile %i te-tul acolo unde le,a!i pla&at. 6ute!i include %i alte ta$ele n interiorul celor pe care le,a!i creat, n func!ie de modul n care &unt or'anizate informa!iile %i de a&pectul pe care dori!i & l da!i pa'inii. ). Aree!i de desi&n En proce&ul de creare a unui &ite pot aprea o &erie de 're%eli de de&i'n, cele mai multe datorate nere&pectrii te+nicilor %i principiilor prezentate anterior. :a&ini '*r* !e&*turi 82'und*turi29 7na dintre cele mai fru&trante &itua!ii n care &e poate '&i o per&oan care na i'+eaz pe 4e$ e&te o pa'in fr in&trumente de na i'are %i fr nici un indiciu pri ind &ite,ul cruia i apar!ine. 3e&i'ur, &ite,ul din care face parte pa'ina poate fi localizat o$&er (nd prima parte a adre&ei 75@ a pa'inii, care apare n $ara de adre&e a $roC&erului. 3ar a for!a izitatorul & efectueze acea&t mane r e&te cu totul nerecomandat. 0el mai pro$a$il ace&ta nu &e a o&teni & caute pa'ina =ome a unui a&emenea &ite ci l a pr&i definiti . # ita!i & crea!i a&emenea pa'ini. 6rezen!a unor /fundturi/ ntr,un &ite denot faptul c de&i'nerul nu a n!ele& caracterul permea$il al 4e$,ului %i ideea c un izitator poate intra n &ite prin oricare pa'in a &a. 6ericolul con&truirii unor a&tfel de pa'ini apare mai ale& n cazul &ite,urilor liniare multi,pa'in, n care de&i'nerul dore%te & conduc izitatorii de,a lun'ul &ite,ului pe un tra&eu liniar, pre&ta$ilit. *cea&ta nu n&eamn c ace&t tip de &ite,uri nu tre$uie folo&it, mai ale& dac informa!iile prezentate &unt adec ate ace&tui mod de prezentare. >re$uie n& acordat aten!ie in&trumentelor de na i'are care tre$uie a&tfel concepute nc(t izitatorul & poat a"un'e cu u%urin! cel pu!in la pa'ina =ome. En plu&, informa!iile de&pre &ite %i pa'ina curent nu tre$uie & lip&ea&c din &u$&olul fiecrei pa'ini. . aria!ie a ace&tor pa'ini de tip /fundtur/ o con&tituie pa'inile =ome care ofer informa!ii prea pu!ine &au lip&ite de &emnifica!ie. 3e&tul de de& pot fi nt(lnite pe 4e$ pa'ini =ome care nu ofer nici un fel de indicii a&upra &tructurii &au con!inutului &ite,ului, fr a mai or$i de &copul %i o$iecti ele &ale. In&trumentele de na i'a!ie &unt a$&ente, prefer(ndu,&e folo&irea unor ima'ini &au te-te cu prea pu!in &emnifica!ie pentru a realiza acce&ul n diferitele &ec!iuni ale &ite,ului. 6oate c e&te o a$ordare a an'ardi&t, dar pentru marea ma"oritate a izitatorilor e&te neplcut & a"un' ntr,o a&emenea pa'in a%a nc(t e&te mai $ine & re&pecta!i re'ulile cla&ice de de&i'n prezentate. :a&ini 2uriae2

3ac pa'inile /fundtur/ ofer prea pu!ine indicii izitatorului, e-i&t %i re er&ul lor) pa'inile /uria%e/. *ce&te pa'ini &unt ncrcate p(n la refuz cu informa!ii, li&te, ima'ini, linJ,uri %i alte elemente. 6a'inile de ace&t fel ridic dou mari pro$leme) >impul de acce&. ?ai ale& dac pa'ina con!ine foarte multe ima'ini, timpul de ncrcare al pa'inii poate fi foarte mare 2uprancrcarea cu informa!ii. 3ac e!i pune prea mult informa!ie ntr,o &in'ur pa'in izitatorul ace&teia nu a fi capa$il & o proce&eze. #-i&t opinii care &pun c lun'imea unei pa'ini nu ar tre$ui & dep%ea&c un ecran pentru a &e e ita ca izitatorul & deruleze pa'ina pe ertical. . a&emenea cerin! e&te prea dra&tic %i poate fi ade&ea n deza anta"ul prezentrii e-plicite a informa!iilor. Dra'mentarea &u$iectului tre$uie & &e fac n func!ie de lo'ica lui intern %i nu de re'uli ar$itrare cum e&te mrimea fere&trei $roC&erului. #-i&t &itua!ii n care pa'inile lun'i ndepline&c cel mai $ine o$iecti ele urmrite. 3e e-emplu, n pa'inile de prezentare ale unor produ&e, pe un &ite comercial, pla&area de&crierii produ&ului pe dou &au mai multe pa'ini rupe cur&i itatea prezentrii %i &e poate &olda cu pierderea unor poten!iali clien!i. *nalo', dac pa'ina con!ine o li&t lun' de elemente nrudite, ruperea li&tei e&te ar$itrar %i deza anta"oa&. 6e de alt parte, a'lomerarea de informa!ii la ni elul unei &in'ure pa'ini, mai ale& c(nd ntre &ec!iunile pa'inii nu e-i&t o le'tur intrin&ec face ca pa'ina & apar ca un amal'am din care izitatorul a e-tra'e cu 'reu informa!iile care l intere&eaz. 3ac e&te nece&ar & folo&i!i pa'ini foarte lun'i nu uita!i & oferi!i pe parcur&ul pa'inii ancore care & conduc izitatorul la nceputul &ec!iunilor principale, precum %i n partea &uperioara, re&pecti inferioar a pa'inii. 3ac pa'ina con!ine mult te-t nu o ncrca!i &uplimentar %i cu ima'ini &au cu elemente multimedia deoarece timpul de acce& a cre%te foarte mult. #xcesu! de e!emente mu!timedia Dolo&irea fr di&cernm(nt a elementelor multimedia 9ima'ine, &unet, ideo; precum %i folo&irea n e-ce& a celor mai noi te+nolo'ii 4e$ e&te ade&ea duntoare pentru &ite. 3ac adre&a!i unei audien!e de&pre care pre&upune!i c nu di&pune de cone-iuni rapide, de ultimele er&iuni de $roC&ere &au de aplica!iile nece&are e-ecutrii %i afi%rii corecte a unora dintre elementele din pa'inile &ite,ului, e&te mai $ine & nu include!i ace&te elemente. *&tfel, de%i aplica!iile create cu ?acromedia Dla&+ &unt &pectaculoa&e %i &e pot realiza efecte &peciale deo&e$it de atracti e, un a&tfel de fi%ier poate a"un'e cu u%urin! la dimen&iuni care dep%e&c 1 me'a$Ite, ceea ce ncetine%te con&idera$il iteza de ncrcare a pa'inii. En plu&, pentru izualizarea corect a ace&tora, izitatorul tre$uie & de&carce plu',in,ul 2+ocJCa e n cazul c(nd nu l are de"a in&talat pe computerul propriu. #&te foarte neplcut pentru izitator & efectueze toate ace&te opera!ii doar pentru a con&tata c informa!iile prezentate n acea&t form puteau fi tot at(t de $ine prezentate ca te-t &au ima'ini o$i%nuite. . &olu!ie de compromi& e&te aceea ca, &imultan cu includerea unui a&tfel de fi%ier, & &e pun la di&pozi!ia izitatorului o op!iune de /eludare/ de tip /&Jip intro/ , atunci c(nd prezentrile &unt folo&ite doar cu rol de &pla&+ &creen, ca ecran de de&c+idere a &ite,ului, de e-emplu. En plu&, folo&irea prezentrilor Dla&+ fr ca ace&tea & &er ea&c unui &cop $ine definit nu face altce a dec(t & di&tra' aten!ia izitatorului de la &u$iectul &ite,ului.

. alt 're%eal de&tul de de& nt(lnit e&te includerea fi%ierelor audio, fr ca ace&tea & ai$ le'tur cu &copul &ite,ului. #-i&t de&i'neri care con&ider c furnizarea unei muzici de fundal &pore%te atracti itatea &ite,ului. En realitate &e nt(mpl e-act contrariul. En afara &itua!iei c(nd &u$iectul &ite,ului e&te le'at de muzic &au c(nd fi%ierele de &unet in & completeze informa!iile prezentate n pa'ini, muzica de fundal nu face altce a dec(t & ncetinea&c ncrcarea pa'inilor %i &,l irite pe izitator, prin repetare. 3ac e&te nece&ar & include!i fi%iere de &unet, l&a!i izitatorului po&i$ilitatea de a opta pentru de&c+iderea lor prin intermediul unei le'turi, mai ale& n cazul n care e&te or$a de&pre fi%iere de mari dimen&iuni. #&te recomandat & proceda!i la fel %i n cazul fi%ierelor ideo, a ertiz(ndu,l pe izitator c pa'ina re&pecti &e a de&c+ide mai 'reu. :a&ini ine&a!e 6a'inile ine'ale con!in informa!ii foarte diferite ca importan! &au ca ni el de detaliere. 0el mai ade&ea &e confrunt cu acea&t pro$lem pa'inile =ome n care &unt inclu&e linJ,uri ctre noile pa'ini create n proce&ul de dez oltare a &ite,ului. #&te foarte u%or & cde!i n 're%eala de a include noile le'turi n pa'ina =ome fr a mai re&pecta ierar+ia &ta$ilit n etapa de or'anizare a &ite,ului. 3ac &ite,ul la care lucra!i nece&it crearea unor noi pa'ini tre$uie & a e!i n edere pla&area ace&tora la ni elele &pecifice o$iecti elor pe care le au precum %i ncadrarea la locul cu enit n &tructura de le'turi a &ite,ului prezentat n pa'ina =ome. Le&*turi '*r* semni'icaie 6rezen!a le'turilor fr &emnifica!ie e&te, de a&emenea, o 're%eal de de&i'n foarte frec ent. 6ro$a$il a!i zut de nenumrate ori n pa'inile 4e$ formulri ca acea&ta) 6entru mai multe informatii apa&ati L* +refS/info.+tml/MaiciLG*M 0u (ntul /aici/ nu are n ace&t conte-t, nici o &emnifica!ie. . formulare mult mai potri it ar putea fi urmtoarea) 6uteti o$tine aici L* +refS/info.+tml/Mmai multe informatiiLG*M . alt &itua!ie e&te aceea n care documentul indicat nu are le'tur, din punct de edere al con!inutului, cu pa'ina care con!ine referin!a la el. >oate linJ,urile din cadrul unei pa'ini tre$uie & e-tind con!inutul informa!ional al pa'inii, izitatorul care urmeaz o le'tur a%tept(ndu,&e ca acea&ta & i ofere informa!ii &uplimentare de&pre &u$iect. En aceea%i cate'orie &e pot ncadra %i le'turile /$anale/ , care nu m$o'!e&c prin nimic informa!iile prezentate. 3e e-emplu o con&truc!ie ca acea&ta) 1ine ati enit in L* +refS/def.+tml/M6a'inaLG*M =ome a 7ni er&itatii unde documentul def)html con!ine defini!ia de dic!ionar a cu (ntului /pa'ina/ , e&te o le'tur /$anal/ deoarece n ace&t conte-t informa!ia oferit nu &er e%te nici unui &cop. 6e de alt parte, ntr,o pa'in al crei &u$iect e&te oca$ularul &pecific 4e$,ului, o a&tfel de defini!ie ar fi foarte important. 7n alt tip de le'turi fr &emnifica!ie apare atunci c(nd fra'mentarea informa!iei e&te du& la e-trem prin folo&irea unui numr foarte mare de linJ,uri. 2u$iectul e&te &ec!ionat n pr!i foarte mici iar

izitatorul e&te o$li'at & parcur' un mare numr de pa'ini n ad(ncime pentru a pune cap la cap informa!iile %i a n!ele'e &en&ul lor. . a$ordare de ace&t tip rupe cur&i itatea &u$iectului %i mre%te efortul de a n!ele'e %i a&imila al izitatorului. :a&ini de.or&ani.ate i stridente *ce&t tip de pa'ini &ufer din pricina lip&ei de or'anizare a con!inutului. 0+iar dac &u$iectul e&te mpr!it n &ec!iuni, unit!ile de informa!ie &unt mpr%tiate n pa'in fr o &i&tematizare preala$il care & focalizeze aten!ia izitatorului ctre punctele importante. *ce&te pa'ini au prea multe culori, ade&ea &tridente, tipuri diferite de fonturi, &au ima'ini de fundal foarte ncrcate. *de&ea e&te folo&it n e-ce& anima!ia fr nici ca acea&ta & ai$ reo &emnifica!ie &au le'tur cu con!inutul pa'inii %i muzica de fundal. *&pectul 'eneral al unor a&tfel de pa'ini e&te la fel de &trident %i !iptor ca un decor de $(lci. +. -e.umat 0on&truirea unui &ite nece&it, pe l(n' o $un cunoa%tere a lim$a"ului =>?@, re&pectarea unor principii %i folo&irea unor te+nici con&acrate. 2ite,ul tre$uie & fie orientat ctre izitator, ctre n!ele'erea %i &ati&facerea ne oii de informa!ie a ace&tuia. 3e&i'nul tre$uie & men!in un ec+ili$ru ntre te+nolo'iile folo&ite %i eficien!, a&i'ur(nd o itez con ena$il de ncrcare a pa'inilor %i o izualizare $un n cele mai populare dintre $roC&ere. *&pectul &ite,ului tre$uie & fie n concordan! cu &copul %i o$iecti ele &ale, e it(nd e-ce&ele de orice fel. 6rincipiile care tre$uie re&pectate n etapa de de&i'n &unt) *&ocierea &emnifica!iilor ?en!inerea competiti it!ii Dolo&irea eficient a re&ur&elor 0oncentrarea pe nece&it!ile utilizatorului En!ele'erea permea$ilit!ii 4e$,ului 0rearea unui a&pect plcut, coerent %i fluent 2u&!inerea interacti it!ii 2u&!inerea na i'a!iei 2trate'ia de con&truire a &ite,ului poate urma una dintre metodele stop,doCnZ , s$ottom,upZ &au metoda incrementrii. En proce&ul de de&i'n, prima etap o con&tituie &c+i!a &ite,ului care tre$uie & reflecte &tructura ace&tuia) liniar, ierar+ic &au de tip 4e$. Informa!ia tre$uie fra'mentat a&tfel nc(t & nu dep%ea&c puterea de a&imilare a utilizatorului. @e'turile dintre pa'ini tre$uie & fie &ta$ilite a&tfel nc(t & permit o parcur'ere lo'ic a con!inutului &ite,ului, iar in&trumentele de na i'are tre$uie adaptate modului n care &unt create le'turile dintre pa'ini, oferind indicii izuale a&upra func!iei lor. #&te recomandat ca in&trumentele de na i'are & ai$ acela%i a&pect n toate pa'inile. Fere&pectarea principiilor %i te+nicilor de de&i'n poate & conduc la con&truirea unor pa'ini de tip sfundturaZ , a unor pa'ini prea ncrcate cu informa!ii &au, dimpotri , a unor pa'ini ine'ale. 3e a&emenea, printre 're%elile de de&i'n care pot aprea &unt le'turile fr &emnifica!ie, e-ce&ul de elemente multimedia, pa'inile dezor'anizate &au &tridente.

Capitolul 1> Testarea site"ului #tapa de de&i'n a &ite,ului &e de&f%oar n &tr(n& le'tur cu cea de implementare, de &criere a codului =>?@ pentru pa'inile care fac parte din &ite. >otu%i, proce&ul de creare a &ite,ului nu &e poate con&idera nc+eiat n momentul finalizrii tuturor documentelor =>?@ care l formeaz. 7rmeaz o etap ade&ea tratat oarecum &uperficial, de%i, ca %i celelalte, e&te e&en!ial pentru con&truirea unui &ite de calitate) etapa de te&tare. 1. Corectarea pa&ini!or 0orectarea e&te unul din cele mai ne'li"ate a&pecte al pu$lici&ticii 4e$. Doarte frec ent pute!i nt(lni pa'ini 4e$ cu multiple 're%eli de orto'rafie, 'ramatic, formatare, c+iar %i n cazul &ite,urilor importante. 6a'inile cu 're%eli de orto'rafie, e-primri ne'li"ente, reflect cel pu!in o in&uficient e-perien! n ace&t domeniu %i, de ce nu, c+iar lip& de re&pect pentru izitator. 0orectarea e&te ne'li"at n primul r(nd datorit u%urin!ei e-traordinare cu care te-tele pot fi pu$licate electronic. 6ute!i crea o pa'in ntr,un editor de te-t %i acea&ta poate fi pu$licat la doar c(te a minute dup terminarea ei, daca &unte!i &uficient de rapid. 0ei mai mul!i nu or petrece ore n %ir erific(nd e-i&ten!a e entualelor 're%eli 'ramaticale n te-tul editat, a%a cum ar face,o, pro$a$il, n cazul unei tiprituri cla&ice, dac ace&te erori i,ar co&ta o a ere pentru a retipri 10.000 de copii ale documentului. 3ac a!i fcut o 're%eal, tre$uie doar & de&c+ide!i fi%ierul, & efectua!i corectura %i & l repu$lica!i pe 4e$, unde toat lumea l poate edea. #&te acea&ta o &trate'ie corect< 3e&i'ur c nu. 0alitatea muncii pe care a!i depu&,o la crearea &ite,ului define%te calitatea ace&tuia. ?ii, poate milioane de utilizatori ar fi putut de"a citi pa'ina n cauz. #&te mult mai &implu & petrece!i c(te a ore corect(nd te-tul, pentru a e ita ca ulterior & lupta!i zile, &ptm(ni &au luni n %ir pentru a rec(%ti'a credi$ilitatea. Iat c(te a metode care pot a"uta & corecta!i mai eficient pa'inile 4e$) 11. 7tiliza!i corectoare automate pentru orto'rafie %i 'ramatic pentru a de&coperi erorile plicti&itoare, fcute din 'ra$ &au din o$o&eal. 1:. Fu a e!i niciodat ncredere a$&olut n ace&t tip de corectoare pentru a de&coperi erorile mai &u$tile. 3up utilizarea lor, ncrca!i pa'ina n $roC&er %i citi!i,o de c(te a ori. 1<. 6entru &ite,urile de dimen&iuni mari citi!i documentele n mod repetat, cut(nd de fiecare dat un anumit tip particular de erori 1=. @a prima lectur concentra!i, aten!ia pe a&pectul 'eneral al documentului %i pe de&coperirea erorilor de formatare, a itemurilor lip& &au a erorilor de pla&are a ace&tora. 1>. @a a doua lectur erifica!i lo'ica %i cur&i itatea ideilor %i a cu intelor. :@. @a a treia lectur, corecta!i minu!io& ntre'ul te-t erific(nd &inta-a, orto'rafia, punctua!ia. :1. Entotdeauna erifica!i ima'inile, fi'urile %i +r!ile din pa'in. *&i'ura!i, c ele au le'tur cu te-tul de referin!, %i erifica!i te-tul e-plicati care n&o!e%te ima'inea. #-i&t %i erori ce or per&i&ta uneori c+iar dup toate ace&te erificri. 3ac le de&coperi!i dup pu$licarea &ite,ului, nu mai rm(ne dec(t & le corecta!i atunci.

2. Testarea pa&ini!or .dat terminat erificarea corectitudinii te-tului din pa'ini din punct de edere 'ramatical %i lo'ic, urmeaz etapa de te&tare a pa'inilor. En acea&t faz tre$uie & concentra!i pe te&tarea corectitudinii etic+etelor =>?@, a linJ,urilor, a ima'inilor %i a celorlalte elemente inclu&e n pa'ini. Testarea !in>-uri!or 0ea mai &impl cale de te&tare a linJ,urilor e&te de a ncrca pa'ina n $roC&er %i de a da clicJ pe fiecare linJ. Uerifica!i func!ionarea tuturor ancorelor din pa'ini care tre$uie & acce&eze &ec!iunea din pa'in core&punztoare identificatorului ancorei. *ten!ie la &ec!iunile multiple ale aceleia%i pa'ini etic+etate cu acela%i identificator. *cea&t 're%eal poate produce rezultate &tranii. 3aca $roC&erul &are la o alt &ec!iune a pa'inii dec(t cea a%teptat, erifica!i mai nt(i identificatorul ancorei n &ec!iunea pe care $roC&erul o afi%eaz. Uerifica!i apoi modul de func!ionare a le'turilor ctre alte documente, at(t n cadrul &ite,ului c(t %i n afara &a, re&pecti aliditatea lor %i dac pa'inile acce&ate &unt cele potri ite. 3ac o anumit pa'in nu poate fi de&c+i&, erifica!i &inta-a linJ,urilor %i anume) :'. :+. :0. corectitudinea protocolului &pecificat e-ten&ia fi%ierului e-i&ten!a &im$olului p

.ten!ieH En 7FIW, &im$olul tilda 9p; e&te utilizat pentru a &pecifica directorul de &tart 9 #ome director$; al utilizatorului al crui nume urmeaz dup ace&t &im$ol. Dolo&ind &im$olul p pute!i +ttp)GGCCC.&er er.comGputilizatorGpa'ina.+tml :ro<!eme n 'uncionarea pa&ini!or =e< #&te po&i$il ca pa'inile 4e$ create & nu arate n $roC&er a%a cum au fo&t ele proiectate. 5ezol area unor a&tfel de deficien!e poate fi dificil, deoarece c(nd &crie!i codul =>?@ a e!i doar o ima'ine mental a modului cum ar tre$ui & arate pa'ina. . &olu!ie pentru a face proce&ul de depanare mai u%or ar fi & izualiza!i pa'ina cu a"utorul $roC&erului pe m&ur ce o con&trui!i. 6ute!i izola di er&ele &ec!iuni ale pa'inii pentru a erifica func!ionarea fiecreia dintre ele. 0ele mai multe 're%eli care pot aprea &e datoreaz erorilor n codului &ur&a al pa'inii. 2inta-a codului e&te de o importanta critic n =>?@. 0ele mai comune pro$leme de &inta-a care apar &unt) :1. ::. :<. :=. a$&en!a etic+etelor de nc+idere L G M mperec+erea etic+etelor =>?@ '+ilimelele / / im$ricarea etic+etelor referi la o pa'in 4e$ a&tfel)

Iat c(te a dintre pro$lemele cu care pute!i confrunta)

B caracteristic$ de ,ormatare a,ectea&$ o secven!$ mai mare de te t dect era prev$&ut. 2 pre&upunem c a!i folo&it ntr,o &ec!iune a pa'inii una dintre etic+etele de titlu, L=3M de e-emplu. @a izualizarea pa'inii n $roC&er con&tata!i c nu doar te-tul pe care dorea!i &,l e iden!ia!i e&te formatat a&tfel, ci o parte mai mare a te-tului din pa'in. . a&tfel de &itua!ie e&te pro ocat de) :>. <@. <1. *$&en!a unuia dintre caracterele / L / &au / M / *$&en!a etic+etei de nc+idere LG=3M Im$ricarea defectuoa& a etic+etelor =>?@

. etic+et de nc+idere creia i lip&e%te unul dintre caracterele /L /&au /M/ nu a fi interpretat corect de $roC&er, prin urmare formatul nu a lua &f(r%it dec(t n punctul n care $roC&erul nt(lne%te caracterul re&pecti . *cea&ta poate determina afi%area ntr,un format 're%it a unui te-t. 3ac ace&t element e&te un titlu, tot te-tul dintre etic+eta de de&c+idere a&ociat titlului %i cea mai apropiat etic+et de nc+idere nt(lnit a fi afi%at ca titlu. 3aca ace&t element e&te te-t ancor, tot te-tul dintre etic+eta de de&c+idere L*M %i prima etic+et de nc+idere nt(lnit a fi afi%at ca o le'tur 9de culoare al$a&tru %i &u$liniat;. . etic+et de nc+idere a$&ent &au o mperec+ere inadec ata de etic+ete a pro oca pro$leme &imilare. 7neori pro$lemele &unt dificil de urmrit %i rezol at. 7rmrirea unei pro$leme &e face n &en& de&cendent, defec!iunea tre$uie cutat acolo unde ncepe &ec en!a de cod eronat %i nu unde &e &f(r%e%te. B parte din te tul pa-inii nu este a,iat >e-tul &au o$iectele care lip&e&c din pa'ina pot fi depi&tate prin urmrirea '+ilimelelor / / %i a etic+etelor 're%it nc+i&e %i care con!in adre&e 75@. 3ac pa'ina con!ine '+ilimele de de&c+idere n interiorul unei etic+ete, %i cele de nc+idere tre$uie & &e re'&ea&c n aceea%i etic+et. . etic+et din care lip&e&c '+ilimelele de nc+idere nu e&te interpretat corect %i ace&t lucru poate produce rezultate $izare. 3ac etic+eta creia i lip&e&c '+ilimelele e&te o etic+et ancor, ntre' te-tul de la primele '+ilimele p(n la urmtoarele nt(lnite ar putea fi interpretat de $roC&er ca parte dintr,o adre& 75@. . alt eroare care poate pro oca acela%i efect e&te nc+iderea 're%it a etic+etei con!in(nd o adre& 75@. 3ac o a&tfel de etic+et nu e&te nc+i& core&punztor, $roC&erul ar putea interpreta orice te-t care urmeaz, p(n la etic+eta de nc+idere core&punztoare, ca fiind parte a adre&ei 75@. 6ro$lema &e rezol prin e-aminarea etic+etelor aflate naintea por!iunii de te-t care nu e&te afi%at. #roarea ar putea pro eni de la orice etic+et care con!ine '+ilimele &au o adre& 75@. A+ilimelele utilizate n editorul de te-t cu a"utorul cruia &crie!i codul =>?@ tre$uie & fie ntotdeauna n &tandard *20II. 7nele editoare de te-t utilizeaz a%a,numitele /&mart Tuote&/ , n care '+ilimele de de&c+idere arat diferit fa! de cele de nc+idere. 3ac proce&orul de te-t cu care lucra!i are acea&t po&i$ilitate, ea tre$uie dezacti at, deoarece ace&t tip de '+ilimele, nefiind n &tandardul *20II, nu or func!iona corect n =>?@. .,iarea de,ectuoas$ a ,ormatului

En cazul c(nd formatul afi%at de $roC&er nu e&te cel a%teptat erifica!i mai nt(i compati$ilitatea dintre $roC&er %i &tilul de caractere &pecificat n codul =>?@. 1roC&erul tre$uie & fie capa$il & afi%eze &tilul ale&. *tunci c(nd &unt folo&ite &tiluri lo'ice, $roC&erul e&te ultima in&tan! n decizia pri ind &tilul caracterelor afi%ate. . metod rapid de erificare a e-i&ten!ei unei pro$leme de compati$ilitate e&te de a afi%a pa'inile utiliz(nd $roC&ere diferite, dintre care unul & poat afi%a n mod &i'ur &tilul de caracter utilizat. 3ac acel $roC&er afi%eaz te-tul incorect, &e face erificarea codului =>?@. 3ac te-tul e&te afi%at corect, atunci e-i&t o incompati$ilitate cu celelalte $roC&ere. En codul =>?@, pro$lema poate fi le'at de o im$ricare defectuoa& a etic+etelor. Uerifica!i modul cum au fo&t im$ricate etic+etele de formatare din &ec!iunea de pa'in a&ociat cu eroarea re&pecti . *&tfel o con&truc!ie de tipul urmtor) L#?MUa multumim ca ati izitat L2>5.FAM6a'inaLG#?Mnoa&traLG2>5.FAM nu a func!iona corect, deoarece etic+etele L#?M %i L2>5.FAM &unt im$ricate eronat. 3. -e.umat 3up etapele de planificare, de&i'n %i implementare urmeaz etapa de te&tare a &ite,ului. En acea&t etap &e realizeaz) <'. 0orectarea pa'inilor din punct de edere orto'rafic %i 'ramatical <+. >e&tarea le'turilor din cadrul &ite,ului <0. >e&tarea le'turilor e-terne <1. 3epanarea 're%elilor care !in de &inta-a codului =>?@ #tapa de te&tare e&te deo&e$it de important pentru impre&ia 'eneral l&at de &ite,ul dumnea oa&tr. 7n &ite cu orto'rafie ne'li"ent, cu 're%eli de e-primare, cu le'turi nefunc!ionale poate ndeprta izitatorii, oric(t de aloroa&e ar fi informa!iile prezentate n interiorul &u. Capitolul '@ Publicarea site"ului En &f(r%it, &ite,ul dumnea oa&tr e&te finalizat. *!i parcur& toate etapele, de la planificare, la de&i'n %i implementare, ,a!i a&i'urat c toate elementele func!ioneaz corect. * enit momentul pu$licrii pe 4e$ a &ite,ului, a&tfel nc(t rezultatele muncii dumnea oa&tr & fie cuno&cute de to!i aceea care or izita pa'inile. En etapa pu$licrii pe 4e$ a &ite,ului inter in mai mul!i pa%i) 2ta$ilirea unui nume de domeniu 2ta$ilirea &er erului 4e$ pe care a fi &tocat 9'zduit; &ite,ul .r'anizarea %i denumirea fi%ierelor n conformitate cu cerin!ele &er erului 'azd >ran&ferul fi%ierelor 1. Gume!e de domeniu 6entru ca &ite,ul dumnea oa&tr & ai$ o identitate pe 4e$ a e!i ne oie de un nume de domeniu pentru el. Fumele de domeniu al &ite,ului a face parte din adre&a 75@ a fiecrei pa'ini %i a oferi &ite, ului o prezen! di&tinct pe 4e$.

3omeniile principale de pe 4e$ pot fi de mai multe tipuri) comerciale .com educa!ionale .edu 'u ernamentale .&o" furnizorii de &er icii de re!ea .net in&titu!ii non,profit .or& domeniile core&punztoare !rilor lumii .ro, etc 6entru a o$!ine un nume de domeniu pentru &ite a e!i la di&pozi!ie dou po&i$ilit!i) domeniu pltit domeniu 'ratuit @omeniu p!*tit 3ac &ite,ul pe care l,a!i creat apar!ine firmei dumnea oa&tr &au unei firme client &au dac dori!i & a e!i o prezen! &ta$il %i credi$il pe 4e$ cea mai $un op!iune e&te & a e!i un domeniu pltit. Enre'i&trarea unui domeniu nu e&te foarte co&ti&itoare %i a a&i'ura &ite,ului dumnea oa&tr o identitate &erioa& %i credi$il. En plu&, odat ce &unte!i proprietarul unui domeniu pute!i & &c+im$a!i loca!ia &ite, ului 9&er erul 4e$ pe care e&te 'zduit; fr ca acea&ta & nece&ite &c+im$area domeniului. 6re!ul pentru nre'i&trarea unui nume de domeniu ariaz de&tul de mult. 7na dintre cele mai con ena$ile oferte poate fi '&it la adre&a +ttp)GGCCC.10,domain&.com care ofer nre'i&trarea unui nume de domeniu pentru 10 723 anual precum %i o &erie de di&count,uri pentru nre'i&trarea pe perioade mai lun'i. 3ac dori!i un domeniu rom(ne&c 9.ro; pute!i o$!ine informa!ii la adre&a +ttp)GGCCC.rnc.ro. 6entru nre'i&trarea unui a&tfel de domeniu &e percepe o ta- unic de 61 723 9pre! ala$il la data &crierii ace&tei cr!i; fr alte ta-e anuale. En cazul c(nd opta!i pentru un domeniu pltit, adre&a 75@ a &ite,ului a fi de forma +ttp)GGCCC.dumnea oa&tra.com @omeniu &ratuit .$!inerea unui nume de domeniu 'ratuit e&te foarte &impl. #-i&t multe companii on!line care ofer a&tfel de domenii %i, n plu&, %i &pa!iu de 'zduire pentru &ite. 3ac &unte!i nceptor %i dori!i & te&ta!i cuno%tin!ele de 4e$ de&i'n nou n !ate, nu e&te o idee rea & con&trui!i un &ite /de pro$/ folo&ind pentru ace&ta un domeniu %i un &er iciu de +o&tin' 'ratuite. En afara ace&tei &itua!ii, de%i poate prea ale'erea ideal, un domeniu 'ratuit poate aduce multe deza anta"e &ite,ului dumnea oa&tr. 6rima "udecat de aloare a&upra unui &ite e&te fcut pe $aza numelui &u de domeniu. En cazul unui domeniu 'ratuit adre&a 75@ a &ite,ului a fi) +ttp)GGCCC.numefirma'azda.comGpdumnea oa&tra &au +ttp)GGCCC.dumnea oa&tra.numefirma'azda.com Uizitatorii &ite,ului or %ti imediat c nu de!ine!i propriul domeniu %i folo&i!i un &er iciu de +o&tin' 'ratuit ceea ce a afecta &erio& credi$ilitatea. ?ai ale& dac &ite,ul e&te unul de afaceri, folo&irea unui domeniu %i &er iciu de +o&tin' 'ratuit e&te cu totul contraindicat. En plu&, firmele care ofer ace&t 'en de &er icii, impun afi%area unor $annere pu$licitare care di&tra' aten!ia izitatorilor de la con!inutul &ite,ului %i mre&c timpul de ncrcare al pa'inilor. 2. Ser"iciu! de &*.duire =e< 8=e< /ostin&9

Enainte de a pu$lica &ite,ul pe 4e$ e&te nece&ar o e aluare a nece&it!ilor de acce&, pentru a determina ce fel de cont &e potri e%te &ite,ului dumnea oa&tr. 6lec(nd de la pre&upunerea c de!ine!i de"a o cone-iune la Internet, nu om intra n amnunte pri ind ale'erea unui furnizor de &er icii Internet 9I26 j 'nternet +ervice &rovider;. >otu%i, n cazul c(nd nc nu de!ine!i o cone-iune &au dori!i & &c+im$a!i pro ider,ul actual, recomandm & &tudia!i cu aten!ie ofertele principalilor furnizori de &er icii. * (nd n edere c nu e!i mai limita doar la &impla na i'are pe 4e$ &au la &c+im$ul de emailuri ci e!i dori & tran&fera!i %i & ntre!ine!i un &ite 4e$ nece&it!ile dumnea oa&tr or cre%te. 3in ace&t moti e&te $ine & informa!i a&upra unor detalii te+nice cum ar fi l!imea de $and, mediul de tran&mi&ie 9anten &atelit, ca$lu cu fi$re optice, unde radio;, ce tip de &er er folo&e%te, a&i&ten!a te+nic oferit, dac ofer 'zduire pentru pa'ini 4e$. .p!iunile pentru 'zduire &unt urmtoarele) In&talarea unui &er er 4e$ propriu 7tilizarea &er erului 4e$ al pro iderului de &er icii Internet 7tilizarea unui &er er 4e$ apar!in(nd unei firme care ofer &er icii de +o&tin' (nsta!area unui ser"er =e< propriu In&talarea unui &er er 4e$ propriu e&te cea mai co&ti&itoare &olu!ie, dar ea ofer n &c+im$ a anta"e &emnificati e. 3i&pun(nd de o cone-iune dedicat &e pot furniza &er icii 4e$ 24 de oreGzi utilizatorilor din lumea ntrea'. Ue!i di&pune de un control complet a&upra &er erului 4e$ %i pute!i pu$lica orice dori!i. 6ute!i confi'ura &er erul %i pentru alte &er icii, cum ar fi D>6, Aop+er, >elnet, &cripturi 0AI, etc. 6ute!i de a&emenea a ea propriul domeniu care a &ta$ili o prezen! di&tinct pe 4e$. *dre&a 75@ a a ea forma urmtoare) +ttp)GGCCC.firmaVdumnea oa&tra.comG Entruc(t co&turile nece&are ec+ipamentului +ardCare, cone-iunii la Internet, confi'urrii %i ntre!inerii unui &er er propriu dep%e&c po&i$ilit!ile unui utilizator o$i%nuit, nu om in&i&ta a&upra ace&tei &olu!ii. ti!i.area ser"eru!ui =e< a! pro"ideru!ui (S: 7tilizarea &er erului 4e$ al pro iderului dumnea oa&tr de Internet e&te o op!iune economic. ?ul!i dintre furnizorii de &er icii Internet ofer n cadrul contului de acce& %i un anumit &pa!iu pe &er erele proprii pe care pute!i pla&a &ite,ul, fr a percepe ta-e &uplimentare. 3in pcate, &pa!iul oferit e&te de o$icei mic, de ordinul 1,3 ?$ %i nu &unt oferite facilit!i pentru crearea de pa'ini dinamice. 6entru a o$!ine facilit!i &uplimentare a tre$ui & plti!i n plu&. 0u toate c fi%ierele &tandard, contul de email %i fi%ierele pu$licate pe 4e$ utilizeaz ace&t &pa!iu, 2,3 ?$ &unt de re'ul &uficien!i pentru a men!ine un &ite mode&t ca dimen&iuni. 0ontul la I26 e&te acce&i$il pe $aza unei cone-iuni dial,up care permite o le'tur cu o itez de p(n la 56 X$p&. Enainte de a de&c+ide un a&tfel de cont, tre$uie erificate detaliile pri ind &pa!iul de &tocare, ta-ele pentru &pa!iul adi!ional, n mod curent 2m pentru 1 ?$, e entualele alte ta-e. >re$uie erificat de a&emenea di&poni$ilitatea altor &er icii, cum ar fi D>6, Aop+er, >elnet, &cripturi 0AI, care ar tre$ui & poat fi utilizate 'ratuit, n cazul n care e-i&t. 7n cont la un pro ider I26 e&te o op!iune economic dar, n acela%i timp, limitat. Fu e-i&t control al &er erului 4e$, &er iciile adi!ionale rm(n(nd la latitudinea pro iderului. Fu e!i a ea propriul domeniu, iar adre&a 75@ a arta a&tfel) +ttp)GGCCC.pro ider.comGpdumnea oa&tra ti!i.area unui ser"iciu de /ostin&

0ea mai $un &olu!ie din punctul de edere al raportului &er iciiGpre! o reprezint folo&irea unui &er iciu de +o&tin' pltit. .fertele de pe pia!a rom(nea&c &unt numeroa&e %i ariate ca pre!. Enainte de a face o ale'ere e&te $ine & face!i un &tudiu comparati al ace&tora n pri in!a &pa!iului pu& la di&pozi!ie, al modului de tran&fer al fi%ierelor, al traficului impu& precum %i al prezen!ei di er&elor facilit!i) &cripturi 0AI, $aze de date, email per&onalizat, etc. Fu tre$uie & pierde!i din edere c &ite,ul dumnea oa&tr &e poate dez olta a&tfel nc(t &pa!iul de &tocare rezer at la nceput poate de eni in&uficient. 7tiliz(nd un &er iciu de +o&tin' adre&a 75@ a &ite,ului a a ea forma urmtoare) +ttp)GGCCC.dumnea oa&tra.com 3e a&emenea e!i $eneficia %i de una &au mai multe adre&e de email per&onalizate de tipul) adre&ahdumnea oa&tra.com Dolo&irea &er iciilor unei firme de +o&tin' permite ca, odat ce de!ine!i propriul nume de domeniu, & tran&fera!i &ite,ul pe &er erul 4e$ al firmei %i & $eneficia!i de o prezen! &ta$il pe 4e$. Dirmele de +o&tin' ofer uneori %i nume de domenii pentru clien!ii lor n& e-i&t ri&cul ca dac +otr(!i & renun!a!i la &er iciile acelei firme & pierde!i domeniul. 3in ace&t moti e&te mai $ine & trata!i &eparat cele dou pro$leme. 3. Dr&ani.area i denumirea 'iiere!or 3e%i acea&t etap e&te intrin&ec proce&ului de con&truire a &ite,ului, o om di&cuta n ace&t capitol, deoarece acum e&te momentul c(nd o $un or'anizare a directoarelor, &u$directoarelor %i fi%ierelor de ine deo&e$it de important. Dr&ani.area directoare!or i 'iiere!or #&te foarte $ine & or'aniza!i fi%ierele care fac parte din &ite pe computerul dumnea oa&tr e-act a%a cum ele or fi or'anizate pe &er erul 4e$. 2er erul 4e$ are un director /rdcin/ 9root; unde or fi &tocate toate fi%ierele &ite,ului. Dolderul unde e!i &toca ace&te fi%iere pe computerul per&onal a "uca rolul directorului /rdcin/ al &er erului. En directorul /rdcin/ a fi pla&at fi%ierul care a con!ine pa'ina /+ome/ a &ite,ului, fi%ier denumit de o$icei index)html &au index)htm. 3ac &ite,ul e&te de mici dimen&iuni 9ntre 5 %i 10 pa'ini; pute!i pla&a toate fi%ierele n acela%i director. 3ac &ite,ul e&te mai mare, e&te recomandat & crea!i pentru fiecare &ec!iune principal a &a c(te un &u$director care a con!ine fi%ierele a&ociate acelei &ec!iuni. 2u$directoarele pot con!ine la r(ndul lor c(te un fi%ier inde-. *tunci c(nd e!i tran&fera fi%ierele de pe computerul dumnea oa&tr pe &er erul 4e$ e!i putea & tran&fera!i ntre'ul &u$director cu fi%ierele con!inute n el. 3e a&emenea acea&t metod a face %i ntre!inerea &ite,ului mult mai u%oar. . alt pro$lem e&te locul unde e!i &toca ima'inile. 6ractica &tandard e&te de a crea un &u$director &pecial n directorul /rdcin/ unde & pla&a!i toate ima'inile din &ite. 3ac proceda!i a&tfel e&te e-trem de important & crea!i un &u$director &imilar cu aceea%i ampla&are %i pe computerul dumnea oa&tr. 0alea de la pa'ina care apeleaz o ima'ine la ima'inea re&pecti tre$uie & fie aceea%i %i pe computerul dumnea oa&tr %i pe &er er, altminteri ima'inile nu &e or afi%a dup ce &ite,ul a fo&t tran&ferat pe &er er. . alt ariant de &tocare a ima'inilor e&te crearea unui &u$director de&tinat ima'inilor, pla&at n &u$directorul fiecrei pa'ini. 0u acelea%i precau!ii le'ate de calea corect ctre ima'ini, acea&t metod func!ioneaz $ine, $a c+iar m$unt!e%te iteza de ncrcare a ima'inilor n pa'ini. 3eza anta"ul con&t n faptul c ade&ea e&te nece&ar & re!ine!i mai multe copii ale aceleia%i ima'ini n diferite &u$directoare, n func!ie de pa'inile unde e&te folo&it. Ceri'icarea nume!or 'iiere!or

@a mutarea fi%ierelor de pe computerul dumnea oa&tr pe &er erul 4e$ &e impune erificarea numelor fi%ierelor care tre$uie & fie compati$ile cu &i&temul pe &unt mutate. . aten!ie deo&e$it tre$uie acordat denumirii %i e-ten&iei fi%ierelor. Fu are importan! dac opta!i pentru e-ten&ia )html &au )htm. >ot ce tre$uie e&te & fi!i con&ec ent cu e-ten&ia alea& de,a lun'ul ntre'ului &ite. 3e a&emenea, tre$uie & a e!i n edere c n &i&temele 7FIW, cele mai de& folo&ite ca &er ere 4e$, denumirile fi%ierelor &unt case!sensitive. . pa'in denumit m$page)html nu e&te totuna cu pa'ina M$&age)html. 6entru a e ita confuziile folo&i!i pentru denumirea fi%ierelor numai litere mici. 4. Trans'eru! 'iiere!or >ran&ferul fi%ierelor care compun &ite,ul de pe computerul propriu pe &er erul 4e$ e&te o opera!iune relati &impl, care con&t n copierea fi%ierelor pe &er er n loca!ia de&tinat &ite,ului dumnea oa&tr. 7nele dintre firmele de +o&tin' a&i'ur o aplica!ie &pecial de&tinat tran&ferului fi%ierelor, dar cea mai utilizat metod de tran&fer e&te prin intermediul unui client D>6. 7n client *TP 9.ile %ransfer &rotocol; e&te o aplica!ie prin intermediul creia &e poate realiza tran&ferul fi%ierelor de pe un &i&tem pe altul. 6ute!i copia fi%iere de pe computerul per&onal pe un alt computer 9opera!ie denumit Cpload; dup cum pute!i prelua fi%iere de pe un alt computer, pe computerul per&onal 9opera!ie denumit Do nload;. 0ele mai folo&ite pro'rame D>6 &unt Cute.%& 9+ttp)GGCCC.cuteftp.com; %i "+G.%& 9+ttp)GGip&Citc+.com;. .dat ce a!i in&talat pe computerul dumnea oa&tr un client D>6, ,a!i nre'i&trat numele de domeniu %i a e!i un cont la un &er iciu de 'zduire totul e&te pre'tit pentru tran&ferul fi%ierelor care compun &ite,ul pe &er erul 'azd. 6entru a realiza tran&ferul fi%ierelor, n 'eneral a tre$ui & urma!i urmtorii pa%i) 0onectarea la Internet 3e&c+iderea pro'ramului D>6. Ue!i o$&er a o &erie de ca&ete de dialo' n care tre$uie introdu&e informa!iile nece&are pro'ramului pentru a realiza cone-iunea cu computerul 'azd. 6entru a face cone-iunea cu &er erul tre$uie & furniza!i pro'ramului adre&a D>6 a +o&t,ului dumnea oa&tr. *cea&ta e&te furnizat de firma de +o&tin' la de&c+iderea contului. 3e a&emenea, pro'ramul a cere numele de utilizator %i parola pe care le,a!i &ta$ilit la de&c+iderea contului. Fu uita!i & de,$ifa!i op!iunea 0non$mous din meniul (ogin. 6rin introducerea numelui de utilizator %i a parolei e!i cpta acce& la contul dumnea oa&tr %i e!i putea intra n directorul unde or fi pla&ate fi%ierele &ite,ului. . alt informa!ie care tre$uie furnizat pro'ramului e&te tipul fi%ierelor tran&ferate. En 'eneral pentru fi%ierele =>?@ &e folo&e%te op!iunea 0+C'' iar pentru celelalte fi%iere, op!iunea binar$. ?ai &implu, pute!i ale'e op!iunea 0utoDetect prin care pro'ramul determin &in'ur tipul fi%ierului %i modul cum a face tran&miterea lui. 0elelalte ca&ete de dialo' pot fi l&ate necompletate &au cu &etrile pree-i&tente. 3up furnizarea ace&tor informa!ii pro'ramul D>6 a realiza cone-iunea cu &er erul 'azd. 2electarea fi%ierelor pe care dori!i & le copia!i. Ue!i o$&er a c ferea&tra aplica!iei D>6 e&te mpr!it n dou) ntr,o parte a e!i directoarele de pe computerul per&onal, n cealalt parte directoarele de pe computerul 'azd. 2electa!i directorul care con!ine fi%ierele dumnea oa&tr %i da!i comanda de tran&fer n directorul care e&te de&tinat pe &er erul 'azd. 3ac folo&i!i &cripturi 0AI a&ociate &ite,ului tre$uie & le acorda!i o aten!ie &pecial. 0ele mai multe &er ere nece&it in&talarea &cripturilor 0AI ntr,un &u$director &pecial numit cgi!bin, aflat n directorul dumnea oa&tr. 6entru pla&area %i &etarea corect a &cripturilor tre$uie & lua!i le'tura cu admini&tratorul &er erului 'azd care a oferi indica!iile nece&are. 6e unele &i&teme de operare modul de acce&are al fi%ierelor e&te &trict definit, permi!(nd &au re&tric!ion(nd citirea, &crierea &au e-ecutarea fi%ierelor de ctre diferi!i utilizatori. *ce&te facilit!i &unt

&etate de re'ul prin drepturile de acces atri$uite fi%ierelor. 3in ace&t moti , erificarea modului de &etare a fi%ierelor e&te e-trem de important. 3e e-emplu, n &i&temele 7FIW modul 705 &emnific faptul c fi%ierele pot fi citite, modificate &au e-ecutate de proprietarul lor, n reme ce al!i utilizatori nu le pot dec(t citi &au e-ecuta 9dup caz;. 3up tran&ferul fi%ierelor, pot aprea pro$leme de di er&e tipuri. 7neori, pa'inile pu$licate nu pot fi acce&ate deloc, &cripturile nu func!ioneaz, etc. 6rimul lucru care tre$uie erificat n ace&t caz e&te dac fi%ierele &e afl n directoarele potri ite. *poi tre$uie erificate permi&iunile de acce& pentru directoare %i fi%iere, e-ten&iile fi%ierelor, fi%ierele inde-. En cazul c(nd apar pro$leme, cea mai &i'ur cale de rezol are a lor e&te & lua!i le'tura cu admini&tratorul &er erului 'azd %i & i cere!i informa!ii c(t mai complete pri ind drepturile de acce& pentru directoare, calea corect ctre &cripturile folo&ite %i, n 'eneral, &etrile nece&are pentru $una func!ionare a &ite,ului. ). -e.umat En etapa de pu$licare pe 4e$ a &ite,ului tre$uie parcur%i urmtorii pa%i) 2ta$ilirea unui nume de domeniu pentru &ite) 'ratuit &au pltit. A&irea unui &er iciu de 'zduire con ena$il &u$ raportul &er iciiGpre!. .r'anizarea %i denumirea directoarelor %i fi%ierelor n conformitate cu cerin!ele &i&temului &er erului 'azd. >ran&ferul fi%ierelor, cea mai folo&it metod de tran&fer fiind prin D>6. Cteva cuvinteXla ,inal *m a"un&, iat, la finalul cltoriei noa&tre. * e!i, acum, toate informa!iile %i in&trumentele nece&are con&truirii unui &ite atr'tor, func!ional %i eficient. 6ute!i ncepe prin a con&trui o pa'in per&onal pe care o pute!i pla&a pe un &er er 'ratuit, pentru a e-er&a cuno%tin!ele do$(ndite. 3ar ace&ta e&te doar primul pa&. 3e&i'nul 4e$ e&te unul dintre domeniile cu un mare poten!ial de dez oltare. >ot mai multe firme dore&c &ite,uri pe 4e$, fie pentru a derula afaceri prin intermediul lor, fie doar pentru a,%i prezenta oferta de produ&e %i &er icii. . carier n ace&t domeniu e&te o ale'ere cu mari %an&e de &ucce& pentru orice t(nr. ?ai mult, de%i pe 4e$,ul rom(ne&c acea&t zon e&te nc &la$ dez oltat, pute!i & ini!ia!i propria afacere care & &e deruleze e-clu&i pe Internet. *cea&t carte a urmrit & ofere informa!iile nece&are unui &tart corect n domeniul de&i'nului 4e$. 3ar nu tre$uie & opri!i aici. 3e&i'nul %i pro'ramarea 4e$ reprezint domenii a&te iar cartea noa&tr a atin& doar elementele de $az ale ace&tora. 6ute!i continua n !(nd & pro'rama!i n 6erl pentru a crea &cripturi 0AI, pute!i n !a Ba a2cript, Ba a &au un lim$a" de intero'are pentru $azele de date &tocate pe &er er. 6ute!i de eni familiar cu unul din editoarele puternice de =>?@ 9?acromedia 3reamCa er e&te cel mai utilizat n ace&t moment; &au pute!i n !a & &tp(ni!i foarte $ine un pro'ram de 'rafic 90orel3raC &au *do$e 6+oto&+op de e-emplu; pentru a crea 'rafic 4e$. 6o&i$ilit!ile &unt nenumrate. En lumea 4orld 4ide 4e$ totul e&te ntr,o continu mi%care %i dez oltare. *cea&t carte ,a oferit fundamentele pro'ramrii n =>?@. 0ontinua!i & n !a!i, perfec!iona!i, continuu %i &ucce&ul iitor e&te a&i'urat.