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? '. (tic)ete de structur$ *. +olosirea corect$ a etic)etelor ,. %e&umat -. Test Capitolul * Culori 1. Sistemul de de.inire a culorilor '. Coresponden!a dintre codurile )e a&ecimal i &ecimal *. Culoarea .undalului ,. Culoarea te tului -. Culoarea le/$turilor 0. 1le/erea culorilor 2. Culori 3si/ure3 4. %e&umat 5. Test Capitolul , +onturi 1. +ormatarea caracterelor '. 1ccentuarea te tului *. (tic)ete lo/ice i etic)ete .i&ice ,. %e&umat -. Test Capitolul - +ormatarea te tului 1. Trecerea la un rnd nou '. Titlurile 6Headin/s7 *. Para/ra.ele ,. Pre.ormatarea te tului -. Centrarea te tului 0. 1.iarea te tului pe o sin/ur$ linie 2. 8locul 9:;<= 4. Linii ori&ontale 5. ;nserarea unei adrese potale 1>. ;nserarea unui citat 11. ;nserarea caracterelor speciale 1'. Su/estii privind aspectul te tului 1*. %e&umat 1,. Test Capitolul 0 Le/$turi 6Lin?"uri7 1. 1dresa #%L '. 1drese absolute i adrese relative *. Stabilirea le/$turilor

,. 1ncore " le/$turi n cadrul aceleiai pa/ini -. Le/$tura c$tre o pa/in$ a.lat$ n acelai director 6.older7 0. Le/$tura c$tre o pa/in$ locali&at$ n alt director 6.older7 2. Le/$tura c$tre pa/ini e terne 4. 1le/erea culorilor pentru le/$turi 5. #tili&area potei electronice 6e"mail7 1>. Le/$turi c$tre .iiere oarecare 11. :esc)iderea pa/inilor re.erite printr"o le/$tur$ 1'. Crearea unei bare secundare de navi/are 1*. %e&umat 1,. Test Capitolul 2 ;ma/ini i elemente multimedia 1. +ormatele .iierelor /ra.ice '. Cteva metode de ob!inere a ima/inilor *. ;nserarea unei ima/ini ,. :imensionarea ima/inii -. 1linierea ima/inii i a te tului 0. ;ma/ini .olosite ca .ond 6bac?/round7 al pa/inii 2. ;ma/ini .olosite ca le/$turi 4. ;ma/inile miniaturale 6t)umbnails7 5. ;ma/inile video 1>. Sunetele 11. Su/estii privind .olosirea ima/inilor i elementelor multimedia 1'. ;ma/inile i timpul de nc$rcare al pa/inii 1*. %e&umat 1,. Test Capitolul 4 Liste 1. Liste neordonate '. Liste ordonate *. ;mbricarea listelor ,. Liste de de.ini!ii -. %e&umat 0. Test Capitolul 5 Tabele 1. Crearea unui tabel '. 1linierea tabelului n pa/in$ *. :imensionarea unui tabel ,. Spa!ierea celulelor unui tabel -. :imensionarea celulelor unui tabel 0. 1linierea con!inutului unei celule 2. :e.inirea culorilor pentru un tabel 4. Titlul unui tabel 5. Capul de tabel 1>. Tabele de .orme oarecare 11. Celule .$r$ con!inut 1'. @rupuri de coloane 1*. 1tribute pentru aspectul c)enarului unui tabel 1,. Tabele imbricate 1-. %ecomand$ri privind .olosirea tabelelor 10. %e&umat 12. Test Capitolul 1> Cadre 6+rames7 1. :ocumentul de de.inire a cadrelor

'. Cadre imbricate *. Controlul aspectului unui cadru ,. 8are de derulare -. Po&i!ionarea documentului ntr"un cadru 0. Cadre interne 2. :esc)iderea documentelor n alte cadre 4. Su/estii privind .olosirea cadrelor 5. %e&umat 1>. Test Capitolul 11 +ormulare 6+orms7 1. Ce este un .ormular? '. Crearea unui .ormular *. (tic)eta 9;AP#T= ,. (tic)etele 9S(L(CT= i 9BPT;BA= -. (tic)eta 9T(CT1%(1= 0. <alidarea datelor 2. %e&umat 4. Test Capitolul 1' Script"uri C@; 1. Ce este C@;? '. Trans.erul datelor *. ( ecu!ia script"ului ,. Structura unui script -. ( emple de script"uri 0. ;nstalarea interpretorului Perl i a aplica!iei PWS 2. %e&umat Capitolul 1* DavaScript 1. Ce este DavaScript? '. Cum poate .i inclus un script n pa/in$? *. Modul de e ecu!ie al script"ului ,. Ce se poate reali&a cu DavaScript? -. %e&umat Capitolul 1, +oi de stiluri 6CSS7 1. Ce este un stil? '. Tipuri de .oi de stiluri *. (.ecte ob!inute cu aEutorul stilurilor ,. %e&umat Capitolul 1- (lemente avansate de /ra.ic$ 1. ;ma/ini )art$ '. ;ma/ini animate *. ;ma/ini transparente ,. %e&umat Capitolul 10 Motoare de c$utare i metata/"uri 1. Ce este un motor de c$utare? '. Metata/"uri *. %e&umat Crearea i publicarea unui site Capitolul 12 Plani.icarea 1. +actori care nu pot .i plani.ica!i '. (tapele plani.ic$rii site"ului *. %e&umat Capitolul 14 :esi/nul 1. Principiile desi/nului Feb

'. Br/ani&area unui site *. Metodolo/ia de construire a site"ului ,. Te)nici de desi/n Feb -. @reeli de desi/n 0. %e&umat Capitolul 15 Testarea 1. Corectarea pa/inilor '. Testarea pa/inilor *. %e&umat Capitolul '> Publicarea 1. Aumele de domeniu '. Serviciul de /$&duire Web 6Web )ostin/7 *. Br/ani&area i denumirea .iierelor ,. Trans.erul .iierelor -. %e&umat Cteva cuvinte...la .inal 1ne a 1 ;nde etic)ete 1ne a ' @losar 1ne a * Tabelul culorilor

Cteva cuvinte...nainte Internetul reprezint, fr ndoial, mediul de comunicare al viitorului, un viitor care, n multe pri ale lumii deja a nceput. El reprezint o veritabil revoluie panic i tcut, care rezid n asocierea progresiv dintre informatic i mijloacele de comunicare, conducnd la o integrare fascinant a tuturor mijloacelor tradiionale de comunicare: telefonie clasic i mobil, radio, televiziune, transmisii de date, nregistrri audio i video. u aprut c!iar forme noi de comunicare, utilizate cu entuziasm de milioane de oameni din lumea ntreag, cum sunt e"mail"ul i c!at"ul, care deja au dobndit reguli proprii, o cultur i c!iar i un folclor propriu. Internetul a produs totodat o e#traordinar democratizare a informaiei i comunicrii. $ cantitate literalmente uria de informaie, sub toate formele sale: te#t, imagini statice sau video, sunet, adunate ntr"o %bibliotec% accesibil oricui, oricnd, de la orice calculator legat la reea, fa de care c!iar i cele mai complete enciclopedii clasice par o glum. devenit o joac de copil comunicarea direct, n timp real, cu verioara din &luj, cu prietenul din ustralia, cu firma furnizoare din 'razilia sau cu banca din Elveia. (unt suficiente pentru toate acestea un computer, un modem i o linie telefonic. )ei Internetul i *orld *ide *eb cunosc o e#pansiune e#ponenial, se afirm totui c se afl nc n faza copilriei. +aportndu"ne la o astfel de apreciere, am putea afirma c n +omnia Internetul este nc n fa, dar cu un potenial de dezvoltare cert i rapid ascendent. &u toate c foarte muli tineri manifest un interes i o desc!idere e#traordinare ctre orice subiect legat de Internet, acest domeniu este cel mai adesea ignorat n licee, sau tratat cu superficialitate. ,rogramele colare nu l abordeaz dect tangenial, prin urmare nu e#ist manuale colare dedicate, iar lucrrile de specialitate la un nivel accesibil strlucesc prin absen. )esignul i programarea *eb se afl ntr"o dezvoltare accelerat i constituie o orientare profesional cu un mare potenial de succes, dar n mod parado#al, relativ puini tineri se ndreapt azi ctre aceste domenii.

-nul din motive l constituie, desigur, atenia insuficient acordat acestor ramuri ale informaticii n nvmntul liceal, alturi de un contact direct cu Internetul e#trem de redus, limitat mai ales de posibilitile te!nice i economice actuale ale colilor. rgumentul principal care m"a determinat s scriu aceast carte a fost un sondaj realizat n rndul elevilor unui liceu de informatic, sondaj ale crui rezultate au confirmat impresia iniial. .i anume faptul c, n marea lor majoritate /0123, elevii i doresc s nvee nu doar s utilizeze Internetul, ci, urmnd ndrzneala tipic vrstei, s devin o prezen activ n acest mediu de comunicare. &ei mai muli i doresc acest lucru pentru a se e#prima pe sine, pentru a comunica lumii i n aceast form, faptul c e#ist, c au caliti, dorine, aspiraii, talente, cunotine, gnduri, sentimente care merit s fie cunoscute i de ceilali. .i cum pot fi puse toate acestea n valoare ct mai eficient, ntr"un mod accesibil pentru milioane de oameni din lumea larg, dac nu pe un site *eb4 (copul acestei cri, dedicate limbajului specific Internetului, 5678, i te!nicilor uzuale de creare a unui site *eb, este s i nvee, nu doar pe tineri, ci pe toi cei care i doresc acest lucru, s i creeze propriul site pe Internet, cu minimum de efort i costuri, i cu ma#imum de rezultate. &artea nu i propune s fie o lucrare academic, un manual e#!austiv de 5678 i *eb design. (ubiectele sunt e#trem de vaste i ar fi fost imposibil cuprinderea lor ntr"o singur lucrare. m dorit s ofer o imagine de ansamblu asupra limbajului 5678, cu un marcat accent pe aspectele practice ale utilizrii sale, precum i o trecere n revist a unora dintre cele mai folosite te!nici de programare care e#tind posibilitile limbajului: script"urile &9I, :ava(cript, programarea cu ajutorul foilor de stiluri &((. )e asemenea, n partea a doua a crii am prezentat etapele procesului de construire a unui site *eb i cteva dintre te!nicile uzuale de design *eb. dresndu"se mai ales nceptorilor care stpnesc totui elementele de baz /utilizarea computerului i sistemul de operare *indo;s, noiuni de editare de te#t i imagini3, cartea este scris ntr"un limbaj care se dorete accesibil. <iecare noiune prezentat este nsoit de e#emple reprezentate de secvene de cod 5678 ce ilustreaz modul ei de aplicare. +ecomandarea noastr este ca cititorii s verifice personal toate aceste e#emple, deoarece numai e#perimentnd pe cont propriu se poate ajunge la o bun nelegere i stpnire a efectelor codului 5678 asupra aspectului paginii *eb. =nc!eiem cu sperana c aceasta carte va constitui un instrument de lucru util i c, la finalul ei cititorii vor dobndi abilitatea de a construi, publica i menine un site propriu interesant, atrgtor i perfect funcional. .i, de ce nu, ca o parte din ei s fac din aceast activitate o veritabil profesie. Aot$ asupra terminolo/iei utili&ate =ntruct anumii termeni din limba englez, specifici domeniului abordat n prezenta lucrare, au intrat n limbajul curent ca atare, i vom utiliza i noi n aceast form. m optat pentru folosirea lor cu statut de neologisme, n forma original, uneori cu forme fle#ionare ad"!oc, c!iar cu riscul de a fi considerate drept %barbarisme% de ctre lingvitii puritani. =n definitiv, n acest fel au intrat n limbaj termeni deja consacrai precum computer, tast, monitor, mouse, pixel, CDROM, modem, server, port, ca s dm numai cteva e#emple. ,entru unii termeni am utilizat ambele forme aflate n circulaie, cum ar fi link legtur, font caracter, tag etichet. E#ist i autori care folosesc numai ec!ivalentele romneti ale acestor termeni. &u toate c traducerea lor respect cel mai adesea sensul, aceste ec!ivalente nu au reuit s se impun n lumea informaticii, nu de puine ori utilizarea lor conducnd, n mod parado#al, la confuzii sau nedumeriri.

/>u vorbim aici de tentativele ridicole, cum ar fi de pilda icoan, sau, nc i mai ru, iconi, utilizate de unii autori pentru icon, care firete c nu pot avea vreo ans de succes.3 ,rezentm n continuare o list a acestor termeni. E#plicaii asupra sensului lor se gsesc n te#t i?sau n glosarul prezentat la sfritul crii. bro ser director do nloa d e!mail folder link script "eb font host, hosting icon site tag template

HTML i World Wide Web =nainte de a ncepe prezentarea limbajului 5678, vom face cteva precizri despre semnificaia conceptului World Wide Web /ntr"o traducere apro#imativ, pnz de pianjen, cu sensul de reea, e#tins n lumea larg3. ,recizrile ar putea prea inutile, dar realitatea este c dei foarte mult lume vorbete despre *orld *ide *eb, puini tiu e#act ce reprezint. 7ai mult, datorit e#tinderii sale e#poneniale i a e#traordinarei sale populariti, adesea noiunea este confundat cu cea de Internet. *orld *ide *eb este ns doar o parte a Internetului. Internetul e#ist de mai bine de treizeci de ani. 'azele acestuia au fost puse la sfritul anilor @AB, ca urmare a unei iniiative a )epartamentului de prare al (tatelor -nite, care avea drept scop realizarea unei reele robuste i fiabile de comunicaii ntre computere aflate la distan. +eeaua avea rolul de a asigura un contact permanent ntre elementele sale componente, c!iar dac o parte din legturi ar fi fost ntrerupte ca urmare a unui atac nuclear. -lterior, reeaua a ptruns n domeniul civil i a fost adoptat rapid, iniial de lumea academic, mai apoi de companiile comerciale. Internetul nu este altceva dect un ansamblu alctuit dintr"un numr enorm de reele de computere interconectate, localizate pe toat suprafaa globului, care suport diverse pac!ete soft;are cum ar fi e"mailul, grupurile de tiri /ne sgroup3, protocoalele de transfer al fiierelor /<6,3, 9op!er i *orld *ide *eb. &u toate avantajele imense oferite de posibilitile de comunicare global a informaiilor ca i de rapiditatea comunicrii, Internetul a rmas, vreme de dou decenii, doar apanajul ageniilor guvernamentale i al mediilor tiinifice. 7otivul l"a constituit dezorganizarea sa iniial cvasi"total. <olosirea unor standarde de comunicaie i a unor pac!ete soft;are foarte diverse reprezentau nite bariere te!nologice aproape insurmontabile pentru utilizatorii obinuii. =n plus, informaiile accesibile la acea vreme pe Internet erau prezentate sub forma unor simple fiiere te#t i nu n forma cunoscut azi. )ezvoltarea e#ploziv pe care a cunoscut"o Internetul n ultimii zece ani a fost determinat de apariia *orld *ide *eb. *orld *ide *eb a luat natere n CD0D, ca urmare a eforturilor unor fizicieni ai &E+> /8aboratorul European de <izica ,articulelor3 de a pune la punct un sistem standardizat pentru crearea i distribuirea documentelor electronice oriunde pe glob, sistem care s permit integrarea tuturor elementelor media: te#t, imagini, sunet. a cum dovedete imensa sa popularitate, *eb"ul s"a dovedit a fi mediul ideal pentru distribuirea informaiilor ntr"o maniera e#tins i accesibil. 7otivul l constituie faptul c *eb"ul asigur o interfa )Gpermedia pentru informaii. 5Epermedia reprezint variatele tipuri de informaie /te#t, imagini, fiiere audio i video3 care pot fi localizate oriunde pe glob, mpreun cu legturile dintre ele. ,entru a transmite i a afia informaiile !Epermedia, *eb"ul

folosete un protocol de transfer /un set de reguli3 care este numit HTTP /#$pertext %ransfer &rotocol, protocol de transmitere a !Eperte#tului3. )eci, n esen, *orld *ide *eb este o colecie imens de documente interconectate prin intermediul Internetului, care folosete protocolul 566, pentru a afia elementele !Epermedia. ,entru a face posibil o asemenea performan, s"a impus necesitatea ca fiecare computer conectat la Internet s fie identificat n mod unic, printr"un element numit adresa ;P /'nternet &rotocol3. dresa I, este format din patru numere, fiecare mai mic de FGG, desprite ntre ele prin punct /de e#emplu CFH.A1.D.FBC3. =n vreme ce computerele lucreaz cu numere, oamenii prefer numele. )in acest motiv, fiecrei asemenea adrese I, i s"a asociat i un nume. &um sunt sute de milioane de computere n ntreaga lume, a veni cu un nume unic care s diferenieze un computer de celelalte pare aproape imposibil. 6otui, s ne amintim c Internetul este o reea de reele. El este mprit n grupuri numite domenii care, la rndul lor, sunt mprite n subdomenii. )atorit acestui fapt, c!iar dac un computer poart un nume destul de comun, prin asocierea acestui nume cu domeniul i subdomeniile din care face parte, se obine un nume unic de identificare al computerului respectiv. $rganizarea domeniilor pe Internet respect un model ierar!ic. ,rimul nivel ierar!ic l constituie diversele tipuri de organizaii. 6ot pe primul nivel se afl i domeniile corespunztoare rilor lumii, de e#emplu uk, pentru 7area 'ritanie sau ro, pentru +omnia. -rmtorul nivel ierar!ic l constituie organizaiile, firmele, instituiile care dein propriile domenii i subdomenii. Internetul conecteaz dou tipuri de computere: serverele, care furnizeaz documentele, i clien!ii, care solicit i afieaz documentele pentru a fi vizualizate de utilizator. ,entru a accesa i afia documentele 5678, pe computerul client ruleaz aplicaii numite broFsere. -neori termenii server *eb i client *eb pot produce confuzii, deoarece se refer att la computerele pe care ruleaz aceste aplicaii ct i la aplicaiile n sine. )in acest motiv, pentru aplicaia client vom folosi termenul de bro ser, iar pentru aplicaia sau pac!etul de aplicaii care ruleaz pe server, termenul de aplicaie server. +elaia client"server pe care se bazeaz funcionarea *orld *ide *eb este facilitat de protocolul de comunicaie 566,. Interaciunea dintre bro;serul *eb i serverul *eb ncepe cu o cerere din partea clientului. plicaia client transmite o cerere ctre aplicaia server. ceast cerere poate consta n transmiterea unui anumit document sau n efectuarea unei anumite tranzacii. plicaia server fie ndeplinete cererea clientului, caz n care obiectul solicitat este transmis bro;serului, fie o refuz, situaie n care bro;serul afieaz binecunoscutele mesaje de eroare %6!e page cannot be displaEed% sau %<ile not found%. &u alte cuvinte, procesul vizualizrii unei pagini *eb ncepe cu o cerere a bro;serului *eb ctre serverul *eb. 'ro;serul transmite serverului detalii despre el nsui i despre fiierul pe care l dorete prin intermediul unui )eader HTTP de cerere /!eaderul este acea parte a unui pac!et de date care este plasat naintea informaiilor efectiv transmise i care poate conine adresa sursei i a destinaiei, verificri ale erorilor i alte cmpuri3. (erverul primete i analizeaz !eaderele 566, de cerere n cutarea informaiilor relevante, cum ar fi numele fiierului care este solicitat i transmite napoi fiierul cerut mpreun cu !eaderele 566, de rspuns. 'ro;serul folosete !eaderele 566, de rspuns pentru a determina cum s afieze rezultatele obinute. 6rebuie s subliniem c bro;serele nu au nevoie de cone#iune la Internet ca s funcioneze. ,utei ncrca i afia cu ajutorul bro;serului dumneavoastr documente 5678 care sunt stocate pe propriul !ard"disI. ceasta v d, printre altele, posibilitatea de a definitiva i testa documentele 5678 nainte de a le publica pe Internet, evitnd astfel prezentarea unor pagini nc nefinalizate, cu erori, sau care funcioneaz defectuos.

Capitolul 1 Primii pai 1. Ce este HTML? HTML este o abreviere de la #$pertext Markup (anguage i reprezint sc!eletul oricrei pagini de *eb. 5678 nu este un limbaj de programare. >u vei lucra aici cu variabile, e#presii, tipuri de date, structuri de control. 5678 este un limbaj descriptiv, prin care sunt descrise elementele structurale ale paginii de *eb: titlurile, listele, tabelele, paragrafele, legturile cu alte pagini, precum i aspectul pe care l are pagina din punct de vedere grafic. =n fond, 5678 este modul n care i comunicam bro;serului ce elemente dorim s introducem n pagina *eb i care este aspectul acestora. 2. Standarde i extensii HTML 5678 este un limbaE standardi&at, aceasta nsemnnd c orice bro;ser poate interpreta i afia corect un document *eb. (inta#a de baz a limbajului 5678 este definit n versiunea HTML *.'. =n prezent a fost lansat i versiunea 5678 J.B care se afl n curs de standardizare. )e la o versiune la alta, limbajului 5678 i se aduga noi elemente. )e asemenea, fiecare tip de bro;ser />etscape >avigator i Internet E#plorer, n particular3 folosete anumite elemente ne"standard, pentru a mbunti capacitile limbajului. Etic!etele noi, care nu fac parte din versiunea standard poart numele de e tensii. =n general, bro;serele cele mai folosite, >etscape >avigator i Internet E#plorer recunosc etic!etele 5678 H.F i o mare parte din cele nou introduse n 5678 J.B. Este recomandat s evitai e#tensiile, n afara cazului cnd avei un motiv foarte serios pentru a le folosi. ,entru utilizatorii bro;serelor care nu recunosc aceste e#tensii, anumite pri ale documentului dumneavoastr pot deveni complet ilizibile. 'ineneles, e#tensiile pot afecta n grade diferite aspectul formal al paginii dumneavoastr. )e e#emplu, folosirea e#tensiilor care in de aspectul liniilor orizontale incluse n pagin nu va afecta n mod grav aspectul paginii n bro;serele care nu suport aceste e#tensii. &ele mai multe dintre acestea vor ignora e#tensiile i vor afia o line orizontal standard. ,e de alt parte, e#tensiile care realizeaz formatarea i alinierea te#tului i aspectul fonturilor pot face ca documentul s aib un aspect foarte dezordonat n bro;serele care nu suport e#tensii de acest tip. (au, n cazurile cele mai grave, acea parte a documentului poate s nu fie deloc afiat. 3. Coninut i aspect ntr-un document HTML ,entru a realiza documente *eb eficiente, cu impact asupra cititorului, i pentru a valorifica pe deplin puterea limbajului 5678, trebuie s inei seama de o idee fundamental: 5678 este destinat structurrii documentele i nu doar formatrii n vederea afirii lor. 5678 furnizeaz modaliti variate pentru a defini aspectul documentului: specificaii legate de fonturi /tipurile de caractere3, de formatare a te#tului, de culori, etc. )esigur, aspectul formal este important, cci el poate veni n beneficiul sau n detrimentul accesibilitii informaiilor prezentate. 6otui, nu aspectul formal, ci coninutul documentului primeaz. 5678 conine numeroase ci de structurare a coninutului documentului fr a pune problema felului cum vor fi afiate elementele: titluri, liste, paragrafe, imagini, etc. 6oate acestea sunt definite n limbajul 5678 fr a impune bro;serului s le afieze ntr"un anumit mod. 'ro;serului i se las astfel posibilitatea de a afia respectivele elemente n conformitate cu rolul pe care l au ele n structura documentului i nu respectnd regulile impuse de creatorul documentului 5678.

7arele avantaj al abordrii bazate pe coninut fa de cea bazat pe aspect rezid n faptul c paginile dumneavoastr vor fi vizualizate cu tipuri diferite de bro;sere, fiecare avnd versiuni diferite. =n abordarea bazat pe aspect, dac bro;serul nu recunoate indicaiile de formatare specificate, fie nu le e#ecut, fie le e#ecut eronat, astfel c structurarea paginii va avea de suferit. =n abordarea bazat pe con!inut, indiferent cum va alege bro;serul s e#ecute indicaiile de formatare, semnificaia elementelor din pagin va rmne nesc!imbat. )e e#emplu, dac vei afia titlurile i subtitlurile din pagin folosind tipuri diferite de fonturi, caractere cu stiluri variate: aldine /bold, sau ngroate3, cursive /italice, sau nclinate3, subliniate, etc., un bro;ser care nu recunoate aceste elemente ar putea afia titlurile n acelai mod n care afieaz restul te#tului, astfel c semnificaia lor n pagin i"ar pierde relevana. ,e de alt parte, dac vei folosi etic!etele speciale pentru titluri, c!iar daca bro;serul nu le recunoate, are posibilitatea de a evidenia totui titlurile n cea mai bun manier pe care o are la dispoziie, astfel nct semnificaia lor pentru restul documentului se va pstra. 4. ne!te!e de care a"ei ne"oie Instrumentele minime de care avei nevoie pentru a realiza documente 5678 sunt, n esen, urmtoarele: un editor de te t, cu ajutorul cruia s scriei documentul, un broFser, prin intermediul cruia s vizualizai aspectul i coninutul documentului, un editor /ra.ic cu care s prelucrai imaginile pe care le vei introduce n pagin i o cone iune la ;nternet. #ditoru! ,entru a scrie documente 5678 avei la dispoziie trei posibiliti: C. <olosirea unui simplu editor de te t. &el mai cunoscut i accesibil este >otepad"ul din *indo;s. 1ten!ieH >u este recomandat s folosii un procesor de te#t comple# cum este 7icrosoft *ord, c!iar dac acesta poate salva documentele n format 5678 /cu e#tensia )htm3, deoarece la salvarea documentelor *ord"ul adaug automat la te#tul documentului dumneavoastr o mare cantitate de cod coninnd informaii lipsite de relevan care ncarc inutil documentul i mrete dimensiunile fiierului. F. <olosirea unui editor HTML. cest tip de editoare dedicate ofer faciliti n scrierea codului, realizeaz corectarea documentului din punct de vedere sintactic i c!iar scriu secvene de cod pentru anumite elemente pe care dorii s le inserai n document. H. <olosirea unui editor WIS;WI@ /"hat *ou +ee 's "hat *ou ,et, n traducere liber %ceea ce vezi la editare este ceea ce obii la vizualizare%3. -n editor de tip *K(I*K9 permite alegerea i formatarea, cu ajutorul mouse"ului, a elementelor pe care dorii s le includei n pagin: tabele, linI"uri, formulare, putei stabili tipul fonturilor, culorile, aranjarea te#tului n pagina. ,e msur ce un anumit element este inserat, editorul scrie n mod automat codul 5678 corespunztor, fr ca utilizatorul s fie nevoit s intervin asupra lui. 6otui, dac avei cunotine de 5678 putei interveni la nivelul codului n orice manier dorii, orice sc!imbare pe care o facei n cod, reflectndu"se automat n aspectul paginii. ,rintre profesioniti persist o controvers n privina tipurilor de editoare care ar trebui folosite pentru a edita documentele 5678. =n esen, problema este aceasta: este mai bine s"i construieti paginile folosind 5678 %pur%, adic scriind totul tu nsui, sau este de preferat s foloseti un editor de

tipul *K(I*K94 Editoare deosebit de puternice de acest tip: 7acromedia )ream;eaver, 7icrosoft <ront ,age, &offe &up ca s dm numai cteva e#emple, par a nclina definitiv balana n favoarea acestui tip de editare. Ele ofer facilitai avansate de editare a paginii, inclusiv posibilitatea de a crea pagini dinamice i de a include script"uri :ava(cript sau applet"uri :ava. &u ajutorul lor se pot construi site"uri e#trem de comple#e. E#ist, de asemenea i editoare de tip %built"in%. cestea sunt cel mai uor de folosit i adesea sunt puse la dispoziie de providerii care ofer i servicii gratuite de !osting /;;;.!ome.ro, ;;;.r!p.ro, etc.3. Editoarele de acest tip ofer un numr /de obicei redus3 de template"uri /pagini preformatate3, i doar cteva opiuni de editare: putei aduga te#t, modifica tipul fonturilor, culoarea fundalului i a te#tului, forma butoanelor de navigare, putei include un numr prestabilit de imagini. )in pcate, gradul de control asupra aspectului paginii este foarte redus. -tilizatorul este limitat la cteva opiuni, iar numrul mic de template"uri puse la dispoziie face ca pagina s fie lipsita de originalitate. i putea, atunci, s v ntrebai de ce mai este nevoie s nvai 5678 dac e#ist editoare profesionale care scriu codul n locul dumneavoastr. =n fond, muli dintre ;eb designerii profesioniti le folosesc, deoarece a scrie codul unui site %bE !and%, cu ajutorul unui simplu editor de te#t, este o munca titanic i mare consumatoare de timp. +spunsul este simplu: trebuie s cunoatei 5678 deoarece orict de performant ar fi un editor *K(I*K9, mai devreme sau mai trziu v vei gsi n situaia de a interveni la nivelul codului. &ea mai comun situaie este aceea n care, datorit multiplelor operaii de editare cum sunt mutarea, copierea, tergerea elementelor, anumite pri ale paginii nu vor mai funciona corect. )e obicei, interveniile necesare asupra codului pentru depanarea sa sunt minime i uor de realizat... cu condiia s tii ce trebuie s facei. &u alte cuvinte, s tii 5678. =n concluzie, oricare ar fi opiunea dumneavoastr, fie c vei folosi un editor de 5678 de tip te#t, fie c vei folosi unul de tip *K(I*K9, pentru a putea construi documente *eb corecte i funcionale este nevoie s stpnii bine limbajul 5678. $ro%seru! Evident, pentru a vizualiza documentele dumneavoastr avei nevoie de un bro;ser. +ecomandarea noastr este s deinei cel puin dou dintre cele mai rspndite bro;sere, Internet E#plorer i >etscape >avigator, de dorit ar fi c!iar cu versiuni diferite ale aceluiai bro;ser. 6estarea paginilor dumneavoastr sub diferite bro;sere este o etap important naintea publicrii lor pe *eb. )ei n anii de nceput ai *eb"ului problema aspectului paginilor n diferite tipuri de bro;sere era vital, deoarece erau folosite o mare diversitate de bro;sere, fiecare tip realiznd afiarea paginilor n maniera sa proprie, n prezent aceast problem i"a pierdut din importan. 7otivul este acela c bro;serele Internet E#plorer au acaparat cea mai mare parte din pia, statisticile artnd c Internet E#plorer este tipul folosit de DH2 dintre utilizatori iar >etscape >avigator de circa A2 dintre ei. #ditoru! &ra'ic )esigur, vei dori s introducei imagini n paginile dumneavoastr. ,entru a putea s prelucrai imaginile n conformitate cu inteniile dumneavoastr i cu rolul lor n pagin avei nevoie de un editor grafic. >umrul editoarelor de acest tip este foarte mare, printre cele mai puternice i mai cunoscute fiind &orel)ra; i dobe ,!otos!op. ,utei alege ns acel editor cu care suntei deja familiarizat, c!iar dac mai puin performant, mai ales dac pentru nceput nu dorii s facei prelucrri foarte comple#e ale imaginilor.

Conexiunea !a (nternet (pre deosebire de primele trei instrumente, cone#iunea la Internet nu este absolut esenial n etapa de construire a documentului 5678. a cum spuneam, documentele 5678 se pot construi i vizualiza local, pe propriul computer. &u toate acestea, e#istena unei cone#iuni Internet v va ajuta foarte mult n procesul de nvare, i nu numai. ,e de"o parte deoarece pe *eb vei gsi nenumrate e#emple, i bune i rele, pe care le putei studia. =n plus, vei avea acces la o cantitate uria i n continu cretere de resurse, documentaie i produse care v vor ajuta cu siguran la construirea paginilor dumneavoastr. .i, n fine, accesul la Internet este esenial n etapa de testare a legturilor cu pagini e#terne. ). Cum s* procedai? ,entru a folosi eficient informaiile din aceast carte iat mai jos cteva indicaii n privina modului n care v putei organiza activitatea: &reai"v n folderul M$ Documents /sau ntr"o alta locaie aleas de dumneavoastr3 un folder de lucru numit "ork. )esc!idei editorul de te#t n care ai ales s lucrai /ar fi de dorit ca pe parcursul procesului de nvare s folosii un simplu editor te#t, de e#emplu >otepad3. (criei /editai3 fiecare e#emplu pe care l gsii aici. (alvai"l n folderul dumneavoastr cu numele indicat n blocul L6I68EM i e#tensia )html. ,utei folosi att e#tensia )html ct i e#tensia )htm dar este bine ca odat ce ai ales o anumit e#tensie s fii consecvent n folosirea ei. )enumii"v fiierele cu litere mici. 1ten!ieH Editorul de te#t -otepad salveaz fiierele cu e#tensia implicita %)txt%. )e aceea cnd salvai este necesar s precizai n mod e#plicit e#tensia dorit /)html sau )htm3 &nd vei salva fiierul creat n >otepad s"ar putea s constatai c restul de fiiere 5678 pe care le"ai salvat anterior nu apar n fereastr. ,entru a le vedea, desc!idei meniul .ile/+ave 0s))), iar n fereastra desc!is selectai din list 0ll files. )esc!idei cu bro;serul utilizat fiierul 5678 /.ile/ Open/ 1ro se3 pentru a vedea cum arat pagina *eb descris n fiierul dumneavoastr. )up fiecare modificare pe care o facei n fiierul 5678 nu uitai s"l salvai, altminteri sc!imbrile fcute nu se vor reflecta n aspectul final al paginii. ,entru a observa felul cum modificrile pe care le facei n codul 5678 sc!imb aspectul paginii, trebuie s apsai butonul Refresh2Reload al bro;serului. ,entru a putea s vizualizai cu uurin aspectul paginilor dumneavoastr este bine s avei desc!ise permanent att editorul de te#t n care scriei documentul 5678 ct i bro;serul cu care l vizualizai. +. Con"enii de notaie

5678 nu este un limbaj case!sensitive, adic nu face distincia ntre literele mici i cele mari/majuscule3. ceasta nseamn c indiferent cum scriem etic!etele, cu litere mari sau cu litere mici, ele vor fi corect interpretate de bro;ser. )in acest motiv pe parcursul acestei lucrri vom utiliza o convenie de notaie n care etic!etele /tag"urile3 5678 sunt scrise cu majuscule iar atributele asociate acestora sunt scrise cu litere mici pentru o mai bun difereniere i evideniere a acestora. )esigur c n documentele pe care le scriei putei respecta aceast convenie sau putei scrie cu un singur tip de litere, dup cum v este mai uor. ,este tot n cadrul te#tului, unde apar etic!ete, atribute sau valori ale acestora am folosit caractere &ourier >e; pentru a diferenia elementele de limbaj de restul te#tului. )e asemenea, vei observa c, n e#emplele prezentate, codul 5678 este scris indentat, adic aliniat la diverse nivele. &a i n cazul etic!etelor, acest lucru nu are importan pentru bro;ser. Indentarea v este util doar dumneavoastr, pentru a diferenia i urmri mai uor diversele elemente pe care le includei n document. 6otui, dac n cazul etic!etelor putei opta pentru orice variant dorii n privina scrierii lor, indentarea este recomandat c!iar i programatorilor cu e#perien. -n cod neindentat este foarte greu de citit i de depanat, n cazul apariiei unor erori. ,. -e.umat *orld *ide *eb este o colecie imens de documente interconectate prin intermediul Internetului, care asigur o interfa !Epermedia pentru informaii. ,entru a transmite i afia documentele, *orld *ide *eb folosete protocolului de comunicaie 566,. <uncionarea *orld *ide *eb se bazeaz pe relaia client"server. &lienii sunt bro;serele *eb iar serverele sunt serverele *eb. 8imbajul 5678 realizeaz descrierea documentelor *eb. ,rin intermediul su i se comunic bro;serului ce elemente fac parte din pagina *eb i care este aspectul acestora. Este recomandat crearea unor documente 5678 orientate ctre coninut i nu ctre aspect. ,entru a crea documente 5678 avei nevoie de un set minimal de instrumente: un editor de te#t, un bro;ser, un editor grafic i o cone#iune la Internet. Capitolul ' Structura unui document HTML 1. Ce este un document HTML? -n document HTML nu este altceva dect un fiier te#t care, pe lng te#tul propriu"zis ce va aprea n pagin, conine i o serie de elemente speciale, denumite etic)ete, sau marcaje /tags, n limba englez3. Aot$ 6oate celelalte elemente, de tip multimedia, care nsoesc documentul 5678, cum sunt sunetul, imaginile video, grafica, etc., nu fac parte din structura acestuia. )ocumentul 5678 include referine la aceste elemente, prin intermediul unor etic!ete speciale, care indic bro;serului modul n care ele vor fi ncrcate i integrate n pagina *eb. Etic!etele nu sunt instruciuni n sensul cunoscut al noiunii, ele avnd doar rolul de a comunica bro;serului semnificaia i modul de afiare al elementelor incluse, privind aspectul te#tului, al fonturilor /tipurilor de caractere3 i n general, al tuturor elementelor prezente n pagin. Etic!etele sunt delimitate de perec!i de paranteze ung!iulare %L M%.

-nele etic!ete permit precizarea anumitor caracteristici ale elementului pe care l introduc n document prin intermediul unor perec!i caracteristic ! valoare numite atribute. E#ist atribute specifice doar anumitor elemente i atribute ce sunt utilizate n asociere cu mai multe etic!ete. $ etic!et poate avea unul, nici unul, sau mai multe atribute. 8a rndul lor, atributelor li se pot atribui valori diferite. tt etic!etele ct i atributele sunt case!insensitive, ca atare nu va e#ista nici o diferen de aciune ntre, s spunem, L!eadM, L5eadM, L5E )M, sau c!iar L5ea)M. Ele sunt ec!ivalente. ,e de alt parte, valoarea unui atribut poate fi case!sensitive, cum, n principiu, este cazul locaiilor fiierelor i adreselor -+8. +egulile de folosire a etic!etelor, atributelor i valorilor acestora reprezint sinta a limbajului 5678. (imilar limbajelor de programare, n 5678 respectarea sinta#ei limbajului este determinant pentru o bun funcionare a documentului. (pre deosebire de limbajele compilate cum ar fi limbajul &, n care programele trec nainte de e#ecuie prin faza de compilare, etap n care compilatorul semnaleaz eventualele greeli de sinta#, la documentele 5678 nu se ntmpl acest lucru. )ocumentele 5678 sunt interpretate de bro;ser e#act aa cum au fost ele scrise. ,rin urmare, orice greeal de sinta# se va reflecta direct n aspectul paginii *eb, conducnd, de cele mai multe ori, la o funcionare defectuoas a acesteia. )ac la vizualizarea paginii dumneavoastr cu bro;serul constatai c anumite secvene ale paginii nu au aspectul ateptat, sau elementele pe care dorii s le introducei nu sunt afiate, revenii asupra documentului 5678 i verificai nc o dat sinta#a acestor elemente. 5678 lucreaz ntr"o manier foarte uor de neles. =n esen trebuie s scriei te#tul i s precizai elementele care dorii s apar n pagin i s le includei ntre anumite etic!ete specifice. )e e#emplu, dac dorim s afim o propoziie cu caractere ngroate /bold3, vom marca nceputul acesteia folosind etic!eta L'M iar pentru marcarea sfritului propoziiei etic!eta L?'M. L'M cesta este un te#t scris cu litere aldineL?'M 1ten!ieH 'ro;serul nu ine cont de numrul spaiilor dintre cuvinte, afiarea fcndu"se invariabil cu un singur spaiu. )e asemenea, nu se poate preciza mrimea liniilor de te#t, acestea fiind de mrimea ferestrei bro;serului /prin redimensionarea ferestrei se vor rearanja i liniile de te#t3. )up cum vom vedea mai trziu, se poate preciza totui unde s se termine un anumit rnd i cum se poate alinia un te#t n pagin. Etic!etele 5678 sunt de dou tipuri: etic!ete container /container tags3 etic!ete vide /empt$ tags3 Etic!etele container sunt de forma: L6 9M bloc de te#t L?6 9M unde: L6 9M " marc!eaz nceputul unui bloc L?6 9M " marc!eaz sfritul blocului

Etic!etele specific formatul n care va fi afiat te#tul coninut ntre etic!eta de nceput i cea de final. 7ajoritatea etic!etelor sunt de acest tip. $ particularitate a etic!etelor container este c, n cazul unora dintre ele, prezena etic!etei de nc!idere /L?6 9M3 este opional. ,e parcursul capitolelor care vor urma, vom preciza e#plicit care anume sunt etic!etele care au aceast proprietate. Etic!etele vide au forma: L6 9M cest tip de etic!ete nu se refer la formatul te#telor, ci la introducerea anumitor elemente, ca de e#emplu: paragrafe, sfrit de linie, linii orizontale i altele, deci dau indicaii bro;serului despre ce element este vorba i despre cum s afieze acel element. Etic!etele vide nu au etic!et de nc!idere. 2. #tic/ete de structur* $rice document 5678 conine dou seciuni: antetul /head3 corpul documentului /bod$3 (tructura general a unui document 5678 este urmtoarea: 9HTML= 9H(1:= 9T;TL(= 9JT;TL(= 9JH(1:= 98B:I= 9J8B:I= 9JHTML= )ocumentul este delimitat de etic!etele L5678M L?5678M i este format din cele dou pri: antet /head3 " este delimitat de etic!etele L5E )M L?5E )M i conine titlul documentului precum i alte informaii privind documentul. =n antetul documentului se mai insereaz i anumite secvene de program /script"uri3, care se e#ecut la ncrcarea documentului n bro;ser) corp /bodG3 " care delimiteaz coninutul propriu"zis al documentului i este inclus ntre etic!etele L'$)KM L?'$)KM Iat acum i semnificaia etic!etelor menionate i care fac parte din structura oricrui document 5678: 9HTML= 9JHTML= =ntre aceste etic!ete este inclus ntregul document 5678. Ele comunic bro;serului unde ncepe i unde se termin documentul. 9H(1:= 9JH(1:= =ntre aceste etic!ete sunt incluse titlul, deja menionat, precum i alte informaii despre documentul 5678. ceste elemente, numite metatag"uri sunt deosebit de importante pentru ca pagina s fie ct mai bine cotat de ctre motoarele de cutare. Ele vor face obiectul unui capitol separat. 7etatag"urile i antetul n ansamblul su nu sunt vizibile pentru vizitator n pagina *eb. 6otui, la fel ca ntreg codul 5678 al paginii, antetul poate fi vizualizat selectnd din meniul bro;serului opiunea 3ie / +ource)

9T;TL(= 9JT;TL(= (tabilete titlul documentului 5678. 6itlul documentului este deosebit de important deoarece este unul din criteriile folosite de motoarele de cutare pentru inde#area paginii. ,rin urmare, strduii"v s gsii un titlu care s descrie ct mai corect i complet coninutul paginii dumneavoastr. 1ten!ieH Etic!eta de mai sus nu stabilete titlul care apare n cadrul paginii, ci pe acela care apare obinuit n bara de titlu a bro;serului. 98B:I= 9J8B:I= &onine descrierea te#tului i elementelor paginii. =n corpul documentului se stabilesc, deci, aspectul i coninutul paginii *eb. Elementele coninute n aceast seciune sunt vizibile n pagin. ,oate nu v vine s credei, dar acum avei deja posibilitatea de a crea o pagin foarte simpl de te#t. vei >otepad"ul desc!is4 )ac nu, desc!idei"l acum i scriei e#emplul urmtor: ( emplul '. 1 L5678M L5E )M L6I68EM,agina meaL?6I68EM L?5E )M L'$)KM m reusit sa scriu prima mea pagina de *eb. -rmatoarea va fi cu mult mai buna. L?'$)KM L?5678M (alvai fiierul cu numele primapagina)html. poi desc!idei bro;serul pe care l folosii /Internet E#plorer sau >etscape3, selectai meniul .ile / Open / 1ro se, cutai folderul n care ai salvat fiierul, desc!idei"l i v vei afla n faa primului dumneavoastr document 5678 : <igura F.C )ac dorii s scriei un te#t pe mai multe linii n pagin, va trebui s folosii etic!eta L'+M /de la line break3, care face trecerea pe o linie noua. Etic!eta L'+M este de tip empt$, deci nu are etic!et de nc!idere. =ncercai e#emplul de mai jos, n care afiarea te#tului documentului se va face pe dou rnduri. ( emplul '. ' L5678M L5E )M L6I68EM,agina meaL?6I68EM L?5E )M L'$)KM m reusit sa scriu prima mea pagina de *eb.L'+M-rmatoarea va fi cu mult mai buna. L?'$)KM L?5678M cum, documentul dumneavoastr va arta ca n <igura F.F )eoarece structura documentelor 5678 obinuite este n realitate mult mai comple#, este recomandat ca, pe msur ce procesul de editare avanseaz, s introducei comentarii n te#t pentru a face aceast structur ct mai e#plicit. &omentariile nu sunt vizibile pentru bro;ser, ele servesc creatorului paginii pentru a da un grad crescut de lizibilitate documentului 5678. &omentariile constau n scurte informaii, e#plicaii la elementele de cod utilizate, etc., fiind deosebit de utile ulterior, mai ales n situaia n care se impune depanarea codului.

&omentariile se introduc prin includerea te#tului ntre etic!etele de mai jos. LN"" ""M Iat dou e#emple: LN" " cesta este un comentariu introdus in pagina *eb " "M LNO cesta este un comentariu pe mai multe randuri care ia sfarsit aici ""M 3. 0o!osirea corect* a etic/ete!or Etic!etele container se compun, aa cum am vzut mai devreme, din perec!i de etic!ete: etic!et de desc!idere L6 9M i de nc!idere L?6 9M. 8a construirea unei pagini *eb comple#e vei fi pus adesea n situaia de a folosi mai multe etic!ete pentru aceeai secven de te#t. )e pild, vei dori s atribuii unui te#t dou proprieti: litere aldine sau ngroate / bold3 i te#t centrat n pagin. ,entru aceasta va trebui s utilizai dou perec!i de etic!ete, care descriu cele dou proprieti, n mod simultan, metod numit imbricarea etic!etelor /nested tags3, ca n e#emplul de mai jos: L&E>6E+ML'M6e#t cu aldine si centratL?'ML?&E>6E+M Este foarte important ca, n cazul folosirii mai multor etic!ete container mpreun, ele s fie plasate n mod corect. =n aceast situaie, principiul de utilizare este: % Last ;n " +irst But% /8I<$3. nseamn c ultima etic!et desc!is trebuie s fie prima care se nc!ide. cest lucru

1ten!ieH 6rebuie s fii foarte atent la nc!iderea etic!etelor, pentru a nu nclca principiul 8I<$. =n caz contrar, secvena de cod din pagin nu va funciona corect. Iat un e#emplu generic de folosire corect a dou etic!ete: L6 9CML6 9FMEtic!ete utilizate corectL?6 9FML?6 9CM i un altul de folosire incorect: L6 9CML6 9FMEtic!ete utilizate incorectL?6 9CML?6 9FM 4. -e.umat -n document 5678 este un fiier te#t care conine te#tul care va aprea n pagin i etic!ete. cestea au rolul de a comunica bro;serului semnificaia i modul de afiare al elementelor incluse ntre ele. Etic!etele sunt nsoite de atribute care sunt perec!i caracteristic ! valoare i care au rolul de a stabili diverse caracteristici ale etic!etei. Etic!etele pot fi de dou tipuri: etic!ete container i etic!ete vide. Etic!etele container necesit etic!eta de nc!idere n timp ce etic!etele vide nu trebuie nc!ise.

-n document 5678 este format din antet i corp. Etic!etele de structur ale documentului sunt: L5678M L?5678M care delimiteaz documentul L5E )M L5E )M care delimiteaz antetul L6I68EM L?6I68EM care delimiteaz titlul documentului L'$)KM L?'$)KM care delimiteaz corpul documentului. =ntr"un document 5678 se pot introduce comentarii prin introducerea te#tului ntre etic!etele LN"" ""M Imbricarea etic!etelor respect regula 8I<$: prima etic!et desc!is este ultima care se nc!ide. ). Test #%M( este un acronim de la4 a3 b3 c3 5Eper 6e#t 7arIer 8ine 5Eper 6e#t 7arIup 8anguage 5Eper 6ec!nical 7et!od 8ibrarE

5tichetele #%M( sunt incluse 6ntre4 a3 b3 c3 P i Q / i 3 L i M

5tichetele 7i textul care nu sunt vi8ibile 6n pagin sunt plasate 6n blocul4 a3 b3 c3 'odE 5ead 6able

Ce fel de program este necesar pentru a scrie #%M(9 a3 b3 c3 un editor de te#t un editor grafic 5678 )evelopment J.B

O pagina "eb este format din dou pri4 a3 b3 c3 6op i 'ottom 'odE i <rameset 5ead i 'odE

Care etichete 6i comunica bro serului unde 6ncepe 7i unde se termin pagina9 a3 b3 c3 L5678M L5E )M L'$)KM

Care dintre urmtoarele elemente nu poate fi gsit 6n seciunea #ead9 a3 b3 6itle 6able

c3

7etatag

:n construcia urmtoare4 L6I68EM,agina meaL?6I68EM ,agina mea repre8int4 a3 b3 c3 >umele fiierului 5678 6itlul care va aprea n pagina *eb 6itlul care va aprea n bara de titlu a ferestrei bro;serului

Care dintre urmtoarele fi7iere nu este un fi7ier #%M(9 a3 b3 c3 mEpage.!tm mEpage.t#t mEpage.!tml

'at exemplul de mai ;os4 L6 L6 L6 L6 L?6 L?6 9CM 9FM6e#tL?6 9FM 9HM6e#t 9JM6e#tL?6 9JM 9HM6e#t 9CM

5ste un exemplu de folosire corect a etichetelor9 a3 b3 c3 >u, deoarece nc!iderea etic!etelor nu respect regula 8I<$. >u, deoarece nu avem voie s folosim mai mult de dou etic!ete imbricate )a, deoarece etic!etele se nc!id corect.

Structura unui document HTML

1. b3 '. c3 *. b3 ,. a3 -. c3 0. a3 2. b3 4. c3 5. b3 1>. c3

Capitolul * Culori Culoarea reprezint un caracteristic e#trem de important a unei pagini *eb. -tilizat cu grij i msur, ea poate mbunti substanial aspectul paginii, fcnd"o mai lizibil i mai atractiv, iar te#tul mai uor de parcurs.

,e de alt parte, utilizarea e#cesiv sau inadecvat a culorilor poate transforma un te#t de calitate ntr"un fel de caleidoscop obositor, greu de urmrit, i care i va determina pe muli vizitatori s renune la a"l mai parcurge. )atorit faptului c ea reprezint un atribut al multor elemente ale documentelor *eb /te#t, fundaluri, margini, linI"uri3, am optat pentru prezentarea detaliat a modului de utilizare al culorilor nc din aceast etap a lucrrii noastre. 1. Sistemu! de de'inire a cu!ori!or (istemul general utilizat pentru definirea culorilor este %@8 prin care sunt specificate pentru fiecare culoare care sunt cantitile de rou /Red3, verde /,reen3 i albastru /1lue3 care o compun. =n 5678 orice culoare este desemnat printr"un cod de A cifre !e#azecimale, dintre care primele dou reprezint cantitatea de rou, cele dou din mijloc, cantitatea de verde, iar ultimele dou cantitatea de albastru. (istemul !e#azecimal este un sistem de numeraie care folosete CA cifre, e#istnd urmtoarea coresponden ntre cifrele !e#azecimale i cele zecimale: C C F F H H J J G G A A 1 1 0 0 D D C B C ' C F & C H ) C J

)e e#emplu, R<<BBBB este codul pentru rou. (emnificaia acestui cod este urmtoarea: cantitatea de rou este ma#im, iar cantitile de verde i albastru sunt egale cu B. &odul pentru verde pur este RBB<<BB iar pentru albastru este RBBBB<<. )eoarece uneori definirea culorii prin intermediul codului su !e#azecimal este incomod, standardul 5678 H.F stabilete un set de CA culori standard. =n acest caz, pentru valoarea atributului de culoare se utilizeaz direct numele culorii, ca n e#emplul de mai jos, n care se seteaz culoarea magenta pentru linIurile vizitate: L'$)K vlinIS%magenta%M >umele i codul culorilor stabilite n standardul 5678H.F sunt urmtoarele: Tabelul *. 1 Aume culoare aTua blacI blue fuc!sia graE green Cod )e a&ecimal RBB<<<< RBBBBBB RBBBB<< R<<BB<< R0B0B0B RBB0BBB

lime maroon navE olive purple red silver teal Eello; ;!ite

RBB<<BB R0BBBBB RBBBB0B R0B0BBB R0BBB0B R<<BBBB R&B&B&B RBB0B0B R<<<<BB R<<<<<<

7ai trebuie menionat faptul c se pot utiliza, pe lng culori, CBB de nuane de gri / gra$3. Ele sunt numerotate de la C la CBB, %graE C% fiind nuana cea mai nc!is, iar %graE CBB% cea mai desc!is. =n ne#a H vei gsi tabelul culorilor nsoite de codurile lor !e#azecimale. 2. Corespondena dintre coduri!e /exa.ecima! i .ecima! 7ulte dintre editoarele grafice folosesc pentru a defini culorile codul zecimal. )ei se bazeaz i ele pe acelai sistem +9' de definire a culorilor, numerele care stabilesc cantitile celor trei culori sunt specificate n sistemul zecimal. )e e#emplu, o culoare care are codul !e#azecimal RAH<<0B va avea codul zecimal DD, FGG, CF0. ceast coresponden se realizeaz simplu, trecnd fiecare dintre cele trei numere !e#azecimale din codul culorii n sistemul zecimal: AH/CA3SDD/CB3 , <</CA3SFGG/CB3, 0B/CA3SCF0/CB3 7otivul pentru care trebuie s cunoatei aceast coresponden este acela c pentru a folosi n documentul 5678 o culoare al crei cod este dat n sistemul zecimal, aceasta trebuie convertit n cod !e#azecimal. &onversia se poate realiza foarte simplu folosind calculatorul din *indo;s /+tart / 0ccessories / Calculator3 care trebuie setat pe opiunea +cientific din meniul 3ie . Uei observa o serie de butoane radio dintre care ne intereseaz dou: #ex i Dec. >u avei altceva de fcut dect s selectai Dec, s tastai numrul n baza CB i apoi s selectai opiunea #ex. +ezultatul conversiei va aprea pe ecran. &onversia invers se realizeaz n mod similar. .i acum s trecem la lucruri mai atractive i s dm via paginii noastre adugndu"i culori. Uom lua pe rnd atributele etic!etei L'$)KM. &u ajutorul lor se pot seta culorile fundalului, te#tului i linIurilor: b/color " culoarea fundalului te t " culoarea te#tului lin? " culoarea linIurilor vlin? " culoarea linIurilor vizitate alin? " culoarea linIului activ

3. Cu!oarea 'unda!u!ui ,entru a stabili culoarea fundalului unei pagini folosim atributul b/color /background color3 al etic!etei L'$)KM, cruia i atribuim o valoare astfel: L'$)K bgcolorS%R+9' sau numeVculoare%M (e poate folosi drept valoare pentru atributul bgcolor fie codul !e#azecimal al culorii fie numele ei. Iat un e#emplu de pagin cu fundal verde: ( emplul *. 1 L5678M L5E )M L6I68EMculoriCL?6I68EM L?5E )M L'$)K bgcolorS%RBB<<BB%M L5C alignS%center%M,agina cu fundal verdeL?5CML5+M L?'$)KM L?5678M spectul paginii va fi cel din <igura H.C. 4. Cu!oarea textu!ui ,entru a seta culoarea te#tului din ntreaga pagin se folosete atributul te t al etic!etei L'$)KM, conform sinta#ei: L'$)K te#tS%R+9' sau numeVculoare%M )ac am stabilit o culoare pentru te#tul din pagin i dorim s utilizm o alt culoare pentru o anumit seciune a te#tului /culoarea unui bloc de te#t3, vom folosi o etic!et despre care vom vorbi pe larg n capitolul urmtor: etic!eta L<$>6M. ceasta este o etic!et container care cuprinde ntre etic!etele de nceput i de final te#tul a crui culoare dorim s o modificm. (tabilirea culorii se face folosind atributul color al etic!etei conform sinta#ei: L<$>6 colorS%R+9' sau numeVculoare%M6e#tL?<$>6M =n E#emplul H.F culoarea te#tului este albastru iar anumite cuvinte sunt colorate n rou. spectul paginii va fi cel din <igura H.F. ( emplul *. ' L5678M L5E )M L6I68EMculoriFL?6I68EM L?5E )M L'$)K bgcolorS%R<<<<<<% te#tS%RBBBB<<%M L5C alignS%center%M6e#t albastru si rosuL?5CM L5+M 6e#tul din aceasta pagina este albastru cu mici L<$>6 colorS%R<<BBBB%M e#ceptiiL?<$>6M L?'$)KM L?5678M ). Cu!oarea !e&*turi!or

=n general legturile /links3 dintr"o pagin *eb au culori prestabilite /default3, astfel: blue /albastru3 " pentru legturi red /rou3 " pentru legtura activa /cea pe care este fi#at cursorul mouse"ului, cu butonul stng apsat3 purple /violet3 " pentru legturile vizitate, cele pe care s"a efectuat cel puin un click ,entru a sc!imba culorile prestabilite se folosesc urmtoarele atribute ale etic!etei L'$)KM: lin? pentru legturi alin? pentru legturile active vlin? pentru legturile vizitate conform sinta#ei: L'$)K linIS%R+9' sau numeVculoare% alinIS%R+9' sau numeVculoare% vlinIS%R+9' sau numeVculoare%M )ocumentul din E#emplul H.H creeaz o pagin n care te#tul este negru iar legturile au culoarea verde, legturile active culoarea albastru i cele vizitate, culoarea rou. =n e#emplu este folosit etic!eta L M i atributul sau )re., care vor fi prezentate pe larg n capitolul despre legturi. =n acest moment singurul lucru care ne intereseaz este cum putem stabili culorile acestora. ( emplul *. * L5678M L5E )M L6I68EMculoriHL?6I68EM L?5E )M L'$)K bgcolorS%R<<<<<<% te#tS%RBBBBBB% linIS%RBB<<BB% alinIS%RBBBB<<% vlinIS%R<<BBBB%M L5C alignS%center%M8egaturi colorateL?5CM L5+M L !refS%culoriC.!tml%M8egatura catre primul e#empluL? M L?'$)KM L?5678M spectul paginii va fi cel din <igura H.H. +. 1!e&erea cu!ori!or (unt multe elemente care trebuie luate n considerare la alegerea culorilor pentru o pagin *eb. ,rimul i cel mai important este acela de a face coninutul uor de citit. ceasta nseamn...ai g!icitN 8itere negre pe fond alb. )ei n vestimentaie combinaia de rou cu bleumarin este rafinat, ntr"o pagin *eb literele roii pe fond albastru nu arat bine i sunt greu de citit. $ alt combinaie nefericit este cea cu fondul negru sau de culoare foarte nc!is i te#tul de culoare alb. ( nu uitm nici faptul c toate monitoarele dispun de reglaje ale strlucirii luminoase i ale contrastului pe care utilizatorii le seteaz diferit, n funcie de preferinele personale, de tolerana oc!iului, de iluminarea camerei, etc. ,e un monitor cu reglaje medii ale contrastului i strlucirii, un te#t de culoare roie dispus pe un fundal negru va fi ilizibil, c!iar dac la valori ma#ime ale acestor caracteristici combinaia poate genera efecte interesante.

=n alegerea culorilor pentru un site este bine s inei seama de cteva elemente de psi!ologia culorilor, pentru a sublinia astfel mesajul pe care vrei s l transmitei. Iat cteva dintre sentimentele pe care le sugereaz culorile: +ou " agresivitate, pasiune, putere, vitalitate +oz " feminitate, inocen, moliciune ,ortocaliu " amuzament, veselie, cldur, e#uberan 9alben " sentimente pozitive i cordialitate Uerde " linite, sntate, prospeime lbastru " autoritate, demnitate, securitate, ncredere Uiolet " sofisticare, spiritualitate, mister 7aro " utilitate, legtura cu pmntul, bogie lb " puritate, ncredere, modernitate, rafinament 9ri " sobrietate, autoritate, sim practic >egru " seriozitate, distincie, !otrre legerea culorilor pentru site trebuie s fie n concordan cu tema site"ului i s sublinieze mesajul su. stfel, dac dorii s construii un site destinat copiilor vei folosi culori vesele i luminoase, n vreme ce pentru un site destinat prezentrii unei firme de consultan financiar sunt potrivite culori sobre i care sugereaz seriozitate i ncredere. legerea culorilor pentru legturi este, de asemenea, important. 8egturile au, n mod prestabilit, anumite culori. (c!imbarea acestora, dei posibil, l poate induce n eroare pe vizitator. &a i n cazul te#tului, alegei pentru legturi, legturile vizitate i legtura activ culori care s vin n contrast cu culoarea sau imaginea de fundal a paginii. +mnei consecvent culorilor alese pentru legturi, pe parcursul ntregului site. ,. Cu!ori 2si&ure2 a cum era de ateptat, nu toate monitoarele pot reproduce cele CA.111.BBB de culori furnizate de codul +9'. &ele realizate cu te!nologii mai vec!i, sau cele moderne setate pentru numai FGA de culori pot reproduce corect doar un set limitat de FGA de culori, aa"numit palet *eb sau %culorile sigure *eb%. Culorile 3si/ure3 sunt cele definite prin standardul 5678 H.F prezentat n tabelul de mai sus sau sunt realizate prin combinaii ale urmtoarelor numere !e#azecimale: BB HH AA DD && << &odul !e#azecimal variaz ntre R<<<<<< /alb3 i RBBBBBB /negru3. -n monitor setat s afieze FGA de culori va ncerca afiarea unei culori din afara acestui set prin fenomenul numit %dithering% /alternarea unui pi#el de o culoare cu un pi#el de alt culoare3, ceea ce uneori d rezultate, dar adesea rezultatul e departe de culoarea real. lteori, computerul va afia culoarea %sigur% cea mai apropiat de cea original. =n principiu, o astfel de problem poate prea minor. =n realitate, presupunnd c o pagin *eb conine att te#tul ct i fundalul ambele n culori %nesigure%, prin modificarea lor de ctre computerul cititorului, nuanele %apro#imate% pot face te#tul total ilizibil. ,entru a evita astfel de surprize neplcute este suficient s v menine n limita celor FGA de culori %sigure%.

)esigur, putei folosi o combinaie !e#azecimal ciudat, ca aceasta: RCFE&0', dar nu vei avea nici o garanie n privina modului n care va fi afiat aceast culoare n diferite bro;sere i pe diferite platforme. 3. -e.umat &ulorile ntr"un document 5678 sunt definite cu ajutorul codului +9' care e#prim n sistem !e#azecimal cantitatea de rou, verde i albastru prezent n fiecare culoare. ,entru a stabili culorile ntr"o pagin *eb se folosesc atributele etic!etei L'$)KM dup urmtoarea sinta#: L'$)K bgcolorS%R+9' sau numeVculoare% te#tS%R+9' sau numeVculoare% linIS%R+9' sau numeVculoare% alinIS%R+9' sau numeVculoare% vlinIS%R+9' sau numeVculoare%Mcorpul documentuluiL?'$)KM legerea culorilor pentru o pagin *eb trebuie s fie n strns legtur cu mesajul transmis de aceasta i s permit citirea cu uurin a informaiilor prezentate. ,entru a evita afiarea defectuoas a culorilor din pagin este recomandat folosirea culorilor %sigure%. 4. Test 1. a3 b3 c3 +istemul pentru definirea culorilor este4 +ed, 9reen, 'lue +ed, Kello;, 'lue *!ite, 'lacI, 9raE

Culorile 6n #%M( pot fi specificate folosind4 a3 b3 c3 &odul zecimal &odul !e#azecimal &odul 7orse

Care este cea mai mare cifr 6n sistemul hexa8ecimal9 a3 b3 c3 CG <

O culoare care are 6n sistemul 8ecimal codul R,1 cu valorile4 <=, >?@, A< are codul hexa8ecimal4 a3 b3 c3 RFE< FF RH&&)JG RAA<<DB

&entru a stabili culoarea fundalului paginii folosim4 a3 b3 L'$)K bacIgroundS%culoare%M L'$)K colorS%culoare%M

c3

L'$)K bgcolorS%culoare%M

+etarea culorii pentru tot textul din pagin se face cu4 a3 b3 c3 L<$>6 colorS%culoare%M L'$)K fontcolorS%culoare%M L'$)K te#tS%culoare%M

Cum se poate schimba culoarea unui bloc de text9 a3 b3 c3 L&$8$+S%culoare%Mte#tL?&$8$+M L6EW6 colorS%culoare%Mte#tL?6EW6M L<$>6 colorS%culoare%Mte#tL?<$>6M

Care sunt culorile prestabilite pentru legturi, legturi active 7i legturi vi8itate9 a3 b3 c3 albastru, rou, violet albastru, verde, galben negru, albastru, rou

Culoarea legturilor se poate schimba folosind4 a3 b3 c3 L8I>X colorS%culoare%M L'$)K linIS%culoare%M L'$)K linIcolorS%culoare%M

0tributele linI5 alinI 7i vlinI servesc la4 a3 b3 c3 stabilirea legturilor stabilirea culorilor pentru legturi stabilirea culorilor pentru ntreaga pagin

Culori
1. a3 '. b3 *. b3 ,. a3 -. c3 0. c3 2. c3 4. a3 5. b3 1>. b3

Capitolul , +onturi =nainte de a aborda tipurile de caractere care pot fi utilizate n documentele *eb, se cuvine menionat un fapt: 5678 nu este un limbaj orientat spre aspectul / la$out3 paginii, ci spre coninutul acesteia.

Importana acestei meniuni rezid n aceea c etic!etele 5678 nu impun, cum s"ar putea crede, ci %sftuiesc% marea varietate de bro;sere care proceseaz pagina *eb, cum s afieze te#tul. &eea ce impun ele cu adevrat este coninutul, te#tul n sine, nu forma de prezentare. )esigur c nu se poate vorbi de cealalt e#trem, a unui arbitrariu absolut, n care fiecare bro;ser va afia te#tul sub o form absolut imprevizibil. -n te#t cu o anumit formatare pentru Internet E#plorer, s spunem, va fi vizualizat practic identic de toi utilizatorii acestui tip de bro;ser) E#ist numeroase etic!ete care permit formatarea caracterelor i ne ofer posibilitatea de a da te#tului din pagina *eb aspectul dorit. 1. 0ormatarea caractere!or Etic!eta care se folosete pentru a da unui caracter sau unui ir de caractere /unui te#t3 aspectul dorit este etic!eta container 9+BAT= 9J+BAT=. =ntre etic!eta de nceput i cea de sfrit se insereaz te#tul sau caracterul ale crui caracteristici dorim s le stabilim. =nainte de a discuta despre atributele etic!etei L<$>6M s luam un e#emplu: L<$>6 sizeS%F% colorS%red% faceS%arial%MIon 8uca &aragiale L?<$>6M Efectul liniei de mai sus este afiarea te#tului %Ion 8uca &aragiale% cu fonturi roie i de mrime egal cu F puncte. ( analizm succesiv cele trei atribute ale etic!etei L<$>6M: si&e " dimensiunea te#tului " poate fi un numr ntre C i 1 /dimensiuni absolute3, ntre "C i "H sau ntre YC i YJ /dimensiuni relative, adic raportate la dimensiunea deja e#istent a fontului3. )imensiunea prestabilit /default3 a fonturilor este H. )ac dimensiunile menionate depesc intervalul C"1, bro;serul rotunjete automat valorile pentru a le ncadra n acest interval. color " culoarea te#tului " este culoarea cu care va fi afiat te#tul prezent ntre etic!ete /n e#emplul nostru, %Ion 8uca &aragiale% 3. .ace " tipul de font " determin tipul de font care va fi utilizat la afiarea te#tului. 6ipurile cele mai uzuale sunt: rial 6a!oma 5elvetica 6imes >e; +oman &ourier Uerdana tributul etic!etei permite precizarea fie a unui singur tip de font fie a mai multora, separate prin virgul. ,recizarea mai multor fonturi ajut n eventualitatea cnd primul tip indicat nu este instalat pe calculatorul celui care viziteaz pagina, i se face ca n e#emplul de mai jos. L<$>6 faceS%arial, verdana, times ne; roman%M =n aceast situaie bro;serul va alege singur din list primul tip de font pe care l recunoate, ignorndu"le pe urmtoarele. 1ten!ieH 8a stabilirea tipului de caracter utilizat n pagin inei seama de faptul c nu toi utilizatorii au instalate pe computerele lor acelai set de caractere ca i dumneavoastr. )in acest motiv, folosirea rial, de culoare

unor caractere e#otice, de efect, poate conduce la un eec n cazul cnd utilizatorul nu are instalat acel font. )in acest motiv este de preferat folosirea unor fonturi cu utilizare larg, cum sunt cele menionate mai sus. =n E#emplul J.C vom aplica pe rnd fiecare dintre cele trei atribute menionate asupra unui te#t, aspectul paginii descrise de acest document fiind cel din <igura J.C. a7 ( emplul ,. 1 L5678M L5E )M L6I68EMfonturiCL?6I68EM L?5E )M L'$)K bgcolorS%Eello;%M L<$>6 sizeS%G% faceS%ta!oma% colorS%green%M7anual de 5678 si design *ebL?<$>6ML'+M L<$>6 sizeS%YH% faceS%arial% colorS%red%M7anual de 5678 si design *ebL?<$>6ML'+M L<$>6 sizeS%"C% faceS%courier ne;% colorS%blue%M7anual de 5678 si design *ebL?<$>6M L?'$)KM L?5678M ,entru a stabili aspectul te#tului unei ntregi pagini *eb, putem folosi etic!eta 981S(+BAT=. (pre deosebire de L<$>6M aceasta nu este o etic!et container, deoarece efectul ei se refer la tot te#tul din pagin. >u se folosete pentru a stabili caracteristicile unui bloc de te#t. Este indicat s fie inclus n documentul 5678 imediat dup etic!eta L'$)KM. tributele etic!etei L' (E<$>6M sunt aceleai cu cele ale etic!etei L<$>6M, respectiv: si&e, color, .ace. =n E#emplul J.F vom construi o pagin creia i setm te#tul cu atributele: face " tip de font rial, size " dimensiunea fontului F, color " culoare albastr. $ parte din te#t va avea alt tip de font, alt mrime i culoare, acestea fiind stabilite prin folosirea etic!etei L<$>6M. b7 ( emplul ,. ' L5678M L5E )M L6I68EMfonturiFL?6I68EM L?5E )M L'$)K bgcolorS%;!ite%M L' (E<$>6 faceS%arial% colorS%blue% sizeS%F%M m ajuns la lectia despre fonturi a L<$>6 faceS%arial blacI% colorS%red% sizeS%J%M7anualului de 5678L?<$>6M L?'$)KM L?5678M )up cum putei observa din <igura J.F, caracteristicile te#tului din pagin au fost setate cu ajutorul etic!etei L' (E<$>6M. ,entru a afia simultan o parte din te#t ntr"un mod diferit am folosit etic!eta L<$>6M. )ei etic!eta L' (E<$>6M face parte din standardul 5678 H.F, atributele sale nu sunt recunoscute de bro;serele >etscape. &a urmare, acesta va afia te#tul utiliznd propriile setri prestabilite /default3, ignornd atributele menionate n etic!eta L' (E<$>6M. -rmtorul e#emplu /E#emplul J.H3 afieaz un cuvnt avnd literele de mrimi diferite. acestei pagini este cel din <igura J.H. c7 ( emplul ,. * spectul

L5678M L5E )M L6I68EMfonturiHL?6I68EM L?5E )M L'$)K bgcolorS%;!ite%M L' (E<$>6 faceS%arial blacI% colorS%red%M L<$>6 sizeS%J%M9L?<$>6M L<$>6 sizeS%G%M+L?<$>6M L<$>6 sizeS%A%M L?<$>6M L<$>6 sizeS%1%M6L?<$>6M L<$>6 sizeS%A%M-L?<$>6M L<$>6 sizeS%G%MIL?<$>6M L<$>6 sizeS%J%M6L?<$>6M L?'$)KM L?5678M ( trecem n revist, n continuare, alte etic!ete care sc!imb aspectul unui caracter sau al unui bloc de te#t. 2. 1ccentuarea textu!ui C. Etic!eta 98;@= 9J8;@= face fonturile mai mari dect dimensiunea curent.

L'I9M6e#t cu caractere mariL?'I9M 6e#t cu caractere mari F. Etic!eta 9SM1LL= 9JSM1LL= face fonturile mai mici dect dimensiunea curent.

L(7 88M6e#t cu caractere miciL?(7 88M 6e#t cu caractere mici H. Etic!etele 98= 9J8= /bold3 i 9ST%BA@= 9JST%BA@= realizeaz scrierea cu caractere aldine, sau ngroate /bold3. L'M6e#t ingrosat CL?'M Te t in/rosat 1 L(6+$>9M6e#t ingrosat FL?(6+$>9M Te t in/rosat ' J. Etic!etele 9;= 9J;= /italic3 i 9(M= 9J(M= /emphasi8ed3realizeaz scrierea cu caractere italice. LIM6e#t inclinat CL?IM %ext inclinat B LE7M 6e#t inclinat FL?E7M %ext inclinat > G. Etic!etele 9S= 9JS= i 9ST%;K(= 9JST%;K(= realizeaz scrierea te#tului tiat de o linie orizontal.

L(M6e#t taiat CL?(M 6e#t taiat C L(6+IXEM6e#t taiat FL?(6+IXEM 6e#t taiat F A. Etic!eta 9#= 9J#= /underlined3 realizeaz sublinierea te#tului.

L-M6e#t subliniatL?-M 6e#t subliniat 1ten!ieH -tilizarea te#tului subliniat trebuie fcut cu grij, ntruct acesta poate fi confundat cu un linI. 1. Etic!eta 9S#P= 9JS#P= /superscript3. ,rin intermediul ei se pot insera n document caractere?te#te plasate deasupra nivelului liniei de scriere. pa ing!eata la B L(-,MBL?(-,M& pa ing!eata la B B& 0. Etic!eta 9S#8= 9JS#8= /subscript3. ,rin intermediul ei se insereaz te#te plasate sub nivelul liniei de scriere. &oordonatele WL(-'MCL?(-'M, KL(-'MFL?(-'M &oordonatele WC, KF Este de remarcat faptul c etic!etele L'I9M i L(7 88M sunt e#ecutate diferit n diverse bro;sere) stfel, n >etscape L'I9M face te#tul mai mare cu un punct iar L(7 88M mai mic cu un punct dect dimensiunea curenta. =n Internet E#plorer, L'I9M afieaz te#tul cu fonturi de dimensiune J iar L(7 88M cu fonturi de dimensiune F. Etic!etele L'I9M i L(7 88M pot fi repetate pentru a obine un efect mai accentuat. E#emplele urmtoare ilustreaz modul cum pot fi utilizate aceste etic!ete. d7 ( emplul ,. , L5678M L5E )M L6I68EMfonturiJL?6I68EM L?5E )M L'$)KM L' (E<$>6 faceS%arial% colorS%blue%M L'I9MEtic!eteL?'I9M care LE7Msc!imbaL?E7M aspectul L(7 88Mte#tuluiL?(7 88M L?'$)KM L?5678M spectul paginii este cel din <igura J.J e7 ( emplul ,. L5678M L5E )M L6I68EMfonturiGL?6I68EM L?5E )M L'$)KM L<$>6 faceS%arial% sizeS%G%M cesta este font rial L?<$>6ML'+M

L<$>6 faceS%algerian% sizeS%J% colorS%green%M cesta este font lgerian L?<$>6ML'+M L<$>6 faceS%courier% colorS%blue%ML(6+$>9M cesta este font &ourier L?(6+$>9ML?<$>6ML'+M L<$>6 < &ES%vivaldi% sizeS%G% colorS%graE%ML-M cesta este font Uivaldi L?-ML?<$>6ML'+M L<$>6 < &ES%garamond%MLE7M cesta este font 9aramond L?E7ML?<$>6ML'+M L<$>6 < &ES%modern% sizeS%1% colorS%bro;n%ML(6+IXEM cesta este font 7odern L?(6+IXEML?<$>6ML'+M L?'$)KM L?5678M ,agina arat ca n <igura J.G )up cum ai observat mai sus, e#ist dou etic!ete al cror efect este acelai: accentuarea te#tului fie prin scrierea cu caractere italice fie cu caractere aldine. 3. #tic/ete !o&ice i etic/ete 'i.ice Etic!etele L'M i LIM se numesc etic!ete .i&ice, iar LE7M i L(6+$>9M etic!ete lo/ice. Etic!etele de titluri de la L5CM la L5AM sunt, de asemenea, etic!ete logice. )iferena dintre cele dou tipuri de etic!ete este legat de felul cum sunt ele e#ecutate de diversele tipuri de bro;sere) stfel, etic!etele fizice impun bro;serului afiarea n formatul e#act, precizat prin intermediul lor. )ac bro;serul nu suport acest format, etic!etele sunt ignorate. (pre deosebire de etic!etele fizice, cele logice las bro;serului libertatea de a alege cel mai bun mod de a ndeplini comanda transmis prin etic!eta. )e e#emplu, efectul etic!etei LE7M este, n cele mai multe bro;sere, scrierea te#tului cu caractere italice. 6otui, dac un anumit tip de bro;ser nu suport acest format de caractere, va accentua totui te#tul ntr"un alt mod, cel mai bun de care dispune. lte etic!ete logice utilizate n documentele 5678 sunt: 9C;T(= 9JC;T(= /citation3 Etic!et folosit pentru inserarea unui citat. )e obicei, citatul este afiat cu caractere italice. 9CB:(= 9JCB:(= /code3 Etic!ete folosite pentru inserarea n te#t a unor secvene de cod scrise ntr"un limbaj de programare. =n general secvenele de cod sunt afiate cu fonturi &ourier. 9:+A= 9J:+A= /definition3 Etic!eta este folosit pentru a insera n te#t definiia unor termeni. Este util la crearea inde#ului sau glosarului unui document. 9K8:= 9JK8:= /ke$board3 ceast etic!et logic se folosete pentru a indica un te#t care urmeaz a fi introdus de la tastatur, ca n urmtorul e#emplu: ,entru a parasi programul tastati LX')MTuitL?X')M 9S1MP= 9JS1MP= /sample3 Este o etic!et logic folosit pentru a insera o mostr de te#t. 9TT= 9JTT= /telet$pe3 ceast etic!et se folosete pentru a afia te#tul inclus ntre etic!ete cu fonturi monospaiate. 6ipul de font monospaiat /cum este de e#emplu &ourier3 are proprietatea c fiecrui caracter i se rezerv acelai numr de pi#eli pe ecran. stfel, caracterul %i% va avea alocat tot atta spaiu pe ecran ca i caracterul %*%:

%&ourier% este un font monospaiat. 7ai trebuie precizat i faptul c utilizarea unora dintre etic!etele de formatare a fonturilor aa cum au fost prezentate ele n acest capitol tinde s fie nlocuit cu foile de stiluri / Cascade +t$le +heets3 despre care vom vorbi ntr"un capitol viitor. 4. -e.umat ,entru a stabili aspectul unei anumite secvene de te#t aceasta este inclus ntre etic!etele 6<$>6M L?<$>6M conform sinta#ei: L<$>6 sizeS%numar% colorS%R+9' sau numeVculoare% faceS%tipVfont%M te#t L?<$>6M ,entru a seta aspectul te#tului n toat pagina *eb se folosete etic!eta L' (E<$>6M conform sinta#ei: L' (E<$>6 sizeS%numar% colorS%R+9' sau numeVculoare% faceS%tipVfont%M ccentuarea te#tului se poate face folosind diverse etic!ete pentru scrierea cu caractere aldine, cu caractere italice, cu caractere mai mari sau mai mici dect dimensiunea curent a fonturilor. Etic!etele sunt de dou tipuri: fizice i logice, etic!etele fizice fiind orientate ctre aspectul te#tului iar cele logice ctre semnificaia te#tului n cadrul documentului. ). Test 2. a3 b3 c3 &entru a stabili tipul de font pentru 6ntreaga pagin "eb se folose7te eticheta4 L)E< -86M L' (E<$>6M L6 +9E6M

&entru a stabili tipul de font cu care se face afi7area unui text se folose7te atributul4 a3 b3 c3 c!aracter tEpe face

Cnul dintre exemplele urmtoare este incorect) Care9 a3 b3 c3 L<$>6 faceS%arial%M L<$>6 faceS%arial, verdana%M L<$>6faceS%verdana%M

Ce reali8ea8 urmtoarea etichet9 L<$>6 sizeS%YC%M a3 b3 c3 curent. fieaz te#tul cu fonturi de mrime C. fieaz pe pagin te#tul %YC%. fieaz te#tul cu fonturi de dimensiune mai mare cu un punct dect dimensiunea

:n afara etichetei L'M ce alt etichet se mai folose7te pentru a scrie un text cu caractere aldine9 a3 b3 c3 L) +XM L(6+$>9M L'I9M

5tichetele LIM 7i LE7M reali8ea84 a3 b3 c3 scrierea te#tului cu caractere italice inserarea unei imagini scrierea te#tului cu caractere mai mici dect cele curente

Ce este incorect 6n urmtorul exemplu9 L<$>6 faceS%arial, verdana, times ne; roman%, sizeS%J%ML'Mte#tL?<$>6ML?'M a3 b3 c3 >u se pot preciza mai multe tipuri de fonturi ca valori pentru atributul face. 6ipurile specificate nu se pot scrie cu caractere aldine Etic!etele L<$>6M i L'M nu se nc!id corect.

&rin ce se aseamn etichetele L(6+$>9M 7i LE7M9 a3 b3 c3 (unt amndou etic!ete logice. (unt amndou etic!ete fizice. (ervesc amndou la scrierea te#tului cu caractere italice.

Care este gre7eala 6n urmtoarea construcie9 L' (E<$>6 faceS%arial% sizeS%G%Mte#tL?' (E<$>6M a3 b3 c3 L' (E<$>6M nu este o etic!eta container L' (E<$>6M nu suport atributul face L' (E<$>6M nu suport atributul size

Ce efect are urmtoarea etichet9 L<$>6S%arial, verdana, times ne; roman%M a3 b3 c3 6e#tul se afieaz cu toate cele trei tipuri de fonturi. 6e#tul se afieaz cu primul tip de font, dintre cele trei, pe care l recunoate bro;serul. Etic!eta nu era nici un efect ntruct este incorect.

+onturi
1. b3 '. c3 *. c3 ,. c3 -. b3 0. a3 2. c3 4. a3 5. a3

1>. b3

Capitolul +ormatarea te tului Etic!etele despre care vom vorbi n continuare nu se mai refer la particularitile fonturilor ci la felul n care poate fi amplasat un te#t n cadrul paginii. =nainte de a discuta n amnunt despre etic!etele care permit formatarea te#tului, s facem cteva precizri privind felul cum sunt afiate te#tele. )up cum tii, fiierele 5678 sunt fiiere te#t. ceasta nseamn c atunci cnd salvai fiierul respectiv, el este salvat numai ca te#t, deci bro;serul nu poate recunoate i e#ecuta dect strict acele comenzi prevzute de etic!etele 5678. )in acest motiv, trecerea la un rnd nou, care n editorul de te#t se realizeaz prin apsarea tastei E>6E+, nu este recunoscut de bro;ser) -n alt aspect este plasarea n te#t a spaiilor. &!iar dac vei introduce spaii suplimentare ntre cuvinte atunci cnd scriei documentul 5678 n editorul de te#t, bro;serul va afia invariabil un singur spaiu ntre dou cuvinte. cesta este motivul pentru care fiecare dintre aceste elemente de formatare a te#tului are o etic!et proprie care indic bro;serului cum anume s fac afiarea. 1. Trecerea !a un r7nd nou 6recerea la un rnd nou se realizeaz cu ajutorul etic!etei 98%= /de la line break3. Etic!eta L'+M nu este o etic!et container. Ea are rolul de a comunica bro;serului c te#ul care urmeaz dup etic!et va fi afiat pe un rnd nou aa cum rezult din E#emplul G.C. ( emplul -. 1 L5678M L5E )M L6I68EMte#tCL?6I68EM L?5E )M L'$)KM 'una ziuaL'+M7a numesc 8uciaL'+MInvat sa construiesc o pagina *ebL'+M L?'$)KM L?5678M spectul paginii descrise n e#emplul de mai sus este cel din <igura G.C. Etic!eta L'+M admite atributul clear care poate lua valorile left, rig!t sau all. =n mod normal, la ntlnirea etic!etei L'+M linia curent de te#t este ntrerupt i se face trecerea la o linie nou, ca i la acionarea tastei 5nter ntr"un editor de te#t. E#ist ns situaii cnd dorim ca linia s fie afiat lng un anumit element /o imagine, sau un tabel, de e#emplu3 care bloc!eaz partea din stnga sau din dreapta a liniei. =n aceste cazuri putem folosi atributul clear al etic!etei L'+M ca n E#emplul G.F. ,utei observa efectul atributului clear al etic!etei L'+M n <igura G.F. ( emplul -. ' L5678M L5E )M L6I68EMte#tFL?6I68EM L?5E )M L'$)KM

LI79 srcS%..?Imagini?toad.jpg% alignS%left%M cest te#t va fi afisat intre imagine si marginea dreapta a documentului. L'+ clearS%left%M cest te#t va fi afisat sub imagine, aliniat stanga. Intre acest te#t si dreapta imaginii va e#ista un spatiu gol. L?'$)KM L?5678M 2. Tit!uri!e 8Headin&s9 -tilizarea titlurilor este justificat de nevoia de a sublinia prin format structura logic a unui document, dar, nu n ultimul rnd, i de monotonia la care e#pune un te#t lung, lipsit de variaie n aspect. <irete c un asemenea te#t sfrete prin a obosi cititorul *eb, obinuit cu te#te scurte i concentrate. )in acest motiv se recomand %spargerea% te#telor mai lungi i organizarea lor n secvene mai scurte, marcate de titluri i subtitluri, organizate ierar!ic, pe nivele. 6itlurile dintr"un document 5678 sunt marcate cu ajutorul etic!etelor 9H1=, 9H'=, 9H*=, 9H,=, 9H-=, 9H0=. Ele sunt etic!ete container, deci necesit etic!eta corespunztoare de nc!idere. Etic!eta L5CM definete titlul de dimensiunea ma#im, iar L5AM pe cel de dimensiune minim. 1ten!ieH )ei standardul 5678 nu interzice utilizarea n orice ordine a titlurilor, este de preferat ca acestea s fie folosite n ordinea %normal%, progresiv, fr a sri peste vreun nivel /de pild de la 5C direct la 5G3, pentru a evita eventualele probleme la convertirea te#tului n alte tipuri de fiiere. =n E#emplul G.H vom folosi toate cele ase etic!ete pentru titluri pentru a face o comparaie cu dimensiunea standard a te#tului. ,utei observa efectul acestor etic!ete n <igura G.H. ( emplul -. * L5678M L5E )M L6I68EMte#tHL?6I68EM L?5E )M L'$)KM L5CM6itlu 5CL?5CM6e#t normal L5FM6itlu 5FL?5FM6e#t normal L5HM6itlu 5HL?5HM6e#t normal L5JM6itlu 5JL?5JM6e#t normal L5GM6itlu 5GL?5GM6e#t normal L5AM6itlu 5AL?5AM6e#t normal L?'$)KM L?5678M Este de menionat o proprietate interesant a etic!etelor de titluri, i anume aceea c un te#t scris pe aceeai linie cu un titlu este afiat n pagin pe rndul urmtor titlului, lsndu"se o linie liber ntre titlu i te#t, dei nu este prezent nici una dintre etic!etele L'+M sau L,M. Etic!etele de titlu accept atributul ali/n cu valorile left, center i rig!t pentru alinierea titlului blocului de te#t la stnga /n mod prestabilit3, n centru i respectiv la dreapta. <igura G.J red aspectul paginii descrie de documentul din E#emplul G.J care ilustreaz modul de aliniere al titlurilor. ( emplul -. , L5678M L5E )M

L6I68EMte#tJL?6I68EM L?5E )M L'$)KM L5C alignS%center%M6itluriL?5CML5+M L5C alignS%center%M 6itlu de marime C aliniat in centru L?5CM L5F alignS%rig!t%M 6itlu de marime F aliniat la dreapta L?5FM L5JM 6itlu de marime J aliniat la stanga L?5JM L?'$)KM L?5678M 3. :ara&ra'e!e 6recerea la un nou paragraf n cadrul te#tului se realizeaz cu ajutorul etic!etei 9P= 9JP=. ceast etic!et comunic bro;serului s insereze o linie liber n te#t i s nceap o nou linie. Etic!eta L,M este o etic!et container dar prezena etic!etei de nc!idere L?,M este opional n anumite situaii. )ac ea este prezent, indic bro;serului s insereze o linie liber i dup blocul de te#t cuprins ntre cele dou etic!ete. Etic!eta L,M admite atributul ali/n cu cele trei valori ale acestuia: left, center i rig!t, care permit alinierea te#tului la stnga, centrat respectiv la dreapta. E#emplul G.G ilustreaz cele trei modaliti de aliniere a te#tului. ( emplul -. L5678M L5E )M L6I68EMte#tGL?6I68EM L?5E )M L'$)KM L5C alignS%center%M,aragrafeL?5CML5+M L,M cesta este un paragraf aliniat la stanga. L, alignS%rig!t%M cesta este un paragraf aliniat la dreapta. L, alignS%center%M cesta este un paragraf aliniat la centru. L?'$)KM L?5678M )in <igura G.G care red aspectul paginii descrise n e#emplu se poate observa c alinierea la stnga este implicit /nu mai trebuie specificat alignS%left%3. (e mai poate observa c nu a fost folosit etic!eta de nc!idere a paragrafelor, deoarece la ntlnirea unei noi etic!ete L,M vec!iul paragraf se consider nc!is. 6otui, prezena sau absena etic!etei de nc!idere a paragrafului atunci cnd este prezent atributul align trebuie stabilit cu grij, pentru a nu obine rezultate neconforme cu dorinele dumneavoastr. =n E#emplul G.A dorim s aliniem un nou paragraf n dreapta paginii, iar te#tul de pe rndul urmtor paragrafului, care este introdus prin etic!eta L'+M, s fie scris normal, de la captul din stnga al paginii. ( emplul -. 0 L5678M L5E )M

L6I68EMte#tAL?6I68EM L?5E )M L'$)KM L5C alignS%center%M,aragrafeL?5CML5+M cest te#t este scris normal, incepand e la marginea din stanga. L, alignS%rig!t%M cest te#t este aliniat la dreapta L'+M-nde este afisat acest te#t4 L?'$)KM L5678M )in <igura G.A se poate observa c afiarea nu s"a fcut conform inteniilor noastre. 7otivul este faptul c etic!eta L, alignSZrig!tZM nu are etic!eta de nc!idere L?,M, i prin urmare efectul su se prelungete pn la ntlnirea unei alte etic!ete L,M. )ac vei nc!ide paragraful n mod e#plicit cu ajutorul etic!etei de nc!idere, nainte de trecerea la o linie nou, efectul asupra te#tului va fi cel dorit aa cum rezult din <igura G.1. )ei aparent etic!etele L'+M i L,M au un efect asemntor, i anume trecerea la o linie nou, ele nu sunt e#ecutate la fel. L'+M comunic bro;serului unde se nc!eie o linie, n vreme ce L,M i impune s lase o linie liber i s treac la un nou paragraf. )ac folosim atributul align al etic!etei L,M n situaiile cnd dup paragraf este introdus un alt element n pagin este recomandat nc!iderea n mod e#plicit a etic!etei respective. 4. :re'ormatarea textu!ui a cum am precizat la nceputul capitolului, atunci cnd editai documentul 5678 cu ajutorul unui editor de te#t, indiferent cte spaii vei lsa ntre cuvinte sau ntre liniile de te#t, bro;serul va afia te#tul invariabil cu un singur spaiu ntre cuvinte i va ajusta lungimea liniilor n funcie de mrimea ferestrei. &u alte cuvinte, orice spaii sau linii libere suplimentare vor fi ignorate de ctre bro;ser) a cum am vzut mai sus, trecerea la o linie nou se realizeaz cu ajutorul etic!etei L'+M iar inserarea unei linii libere se face cu ajutorul etic!etei L,M. E#ist, ns, i o etic!et care impune bro;serului s afieze te#tul ntocmai cum a fost el formatat n documentul 5678. Este vorba despre etic!eta 9P%(= 9JP%(=. Etic!eta L,+EM permite preformatarea te#tului i menine spaierea i alinierea te#tului aa cum a fost fcut n documentul surs 5678. Etic!eta de nc!idere L?,+EM este obligatorie. E#emplul G.1 ilustreaz modul cum poate fi folosit etic!eta L,+EM. spectul paginii descrise n acest document este cel din <igura G.0. 6estai e#emplul folosind etic!eta L,+EM iar apoi eliminai"o, pentru a observa mai bine efectul su. ( emplul -. 2 L5678M L5E )M L6I68EMte#t1L?6I68EM L?5E )M L'$)KM L5C alignS%center%M6e#tul preformatatL?5CML5+M cesta este un te#t normal L,M $rar: 8uni

0:BB +omana D.BB 7atematica CB:BB 9eografie CC.BB Istorie CF.BB <izicaL,M cesta este te#tul de mai sus preformatat L,+EM $rar: 8uni 0:BB +omana D.BB 7atematica CB:BB 9eografie CC.BB Istorie CF.BB <izica L?,+EM L?'$)KM L?5678M ). Centrarea textu!ui a cum am vzut mai sus, afiarea te#tului centrat n pagin se poate face cu ajutorul etic!etei L,M avnd atributul align setat la valoarea %center%. $ alt posibilitate de a realiza acest lucru este de a utiliza o etic!et dedicat, incluznd te#tul ntre etic!etele 9C(AT(%= 9JC(AT(%=. Etic!eta L&E>6E+M este o etic!et container, prezena etic!etei de nc!idere fiind obligatorie. E#emplul G.0 realizeaz centrarea unui te#t. ( emplul -. 4 L5678M L5E )M L6I68EMte#t0L?6I68EM L?5E )M L'$)KM L5C alignS%center%M&entrarea te#tului L?5CML5+M L&E>6E+M cesta este un te#t centrat. cesta este un te#t centrat. cesta este un te#t centrat. cesta este un te#t centrat. cesta este un te#t centrat. cesta este un te#t centrat. cesta este un te#t centrat. cesta este un te#t centrat. L?&E>6E+M L?'$)KM L?5678M spectul paginii descrise n e#emplul de mai sus este cel din <igura G.D. +. 1'iarea textu!ui pe o sin&ur* !inie =n cazul cnd se dorete afiarea unui te#t pe o singur linie, c!iar dac acest lucru nseamn depirea marginii ferestrei i derularea acestuia pe orizontal, se include blocul de te#t ntre etic!etele 9AB8%= 9JAB8%=. ceast etic!et mpiedic bro;serul s limiteze lungimea liniei la dimensiunea ferestrei. E#emplul G.D ilustreaz folosirea etic!etei L>$'+M, pagina avnd aspectul din <igura G.CB.

 ( emplul -. 5 L5678M L5E )M L6I68EMte#tDL?6I68EM L?5E )M L'$)KM L5C alignS%center%M6e#tul pe o singura linie L?5CML5+M L>$'+M cesta este un te#t care va fi afisat pe o singura linie, c!iar daca depaseste dimensiunile unei ferestre obisnuite. ,uteti verifica acest fapt prin reducerea dimensiunilor ferestrei bro;serului. L?>$'+M L?'$)KM L?5678M ,. $!ocu! 9:;<= $ alt modalitate de delimitare i de formatare a unui bloc de te#t este folosirea etic!etei container 9:;<= 9J:;<=. ,rezena etic!etei de nc!idere este obligatorie. Etic!eta L)IUM realizeaz divizarea unui document 5678 n seciuni distincte, diviziune n care pot fi incluse, pe lng te#t, i alte elemente: legturi, imagini, formulare. &a i n cazul etic!etei pentru introducerea paragrafelor, etic!eta L)IUM admite atributul ali/n, pentru alinierea te#tului. Ualorile posibile ale acestui atribut, deja cunoscute, sunt: left " aliniere la stnga center " aliniere la centru rig!t " aliniere la dreapta linierea precizat de atributul align al blocului are efect asupra tuturor elementelor incluse n blocul L)IUM. 'locul L)IUM admite i atributul noFrap, care interzice ntreruperea rndurilor de ctre bro;ser) =n documentul descris n E#emplul G.CB este ilustrat utilizarea acestei etic!ete. ,agina va avea aspectul redat n <igura G.CC. ( emplul -. 1> L5678M L5E )M L6I68EMte#tCBL?6I68EM L?5E )M L'$)KM L5C alignS%center%M'locul divL?5CML5+M ceasta linie este o linie de te#t normala. L)IU alignS%rig!t%M ceasta este prima sectiune a te#tului, aliniata dreapta.L'+M L?)IUM L)IU alignS%center%M ceasta este a doua sectiune a te#tului, aliniata central.L'+M L?)IUM L)IU alignS%left%M ceasta este a treia sectiune a te#tului, aliniata stanga.L'+M L?)IUM L?'$)KM L?5678M

3. Linii ori.onta!e =ntr"o pagina *eb pot fi inserate linii orizontale care au rolul de a delimita diferitele zone ale paginii sau de a mbunti aspectul ei estetic. cest lucru se face cu ajutorul etic!etei 9H%=. Etic!eta L5+M nu este o etic!et container deci nu e#ist o etic!et de nc!idere. ,entru a configura o linie orizontal se utilizeaz urmtoarele atribute ale etic!etei L5+M: ali/n " permite alinierea liniei orizontale. Ualorile posibile sunt left, center i rig!t Fidt) " specific lungimea liniei " lungimea poate fi stabilit n pi#eli sau n procente din limea ecranului. si&e " specific grosimea liniei, e#primat n pi#eli color " permite definirea culorii liniei tributele etic!etei L5+M sunt ilustrate n E#emplul G.CC. ( emplul -. 11 L5678M L5E )M L6I68EMte#tCCL?6I68EM L?5E )M L'$)KM L5C alignS%center%M 8inii orizontale L?5CM 8inie aliniata la stanga, lungime CBB2, grosime F L5+M 8inie aliniata in centru , lungime GB2, grosime G pi#eli. L5+ alignS%center% ;idt!S%GB2% sizeS%G% colorS%blacI%M 8inie aliniata la dreapta , lungime CGB de pi#eli, grosime CF pi#eli , de culoare rosie. L5+ alignS%rig!t% ;idt!SCGB sizeSCF colorS%red%M L?'$)KM L?5678M )in <igura G.CF care red aspectul paginii descrise n e#emplul anterior se poate observa c simpla prezen a etic!etei L5+M fr nici un fel de atribute duce la afiarea unei linii predefinite, de lungime egal cu CBB2 din pagin i grosimea egal cu F pi#eli. tributul color al etic!etei L5+M nu este suportat de bro;serul >etscape. =n e#emplul urmtor /E#emplul G.CF3 vom ilustra modul n care etic!eta L)IUM aliniaz elementele coninute n interiorul su, n cazul nostru te#t i linii orizontale. ,agina descris n acest e#emplu va avea aspectul din <igura G.CH. ( emplul -. 1' L5678M L5E )M L6I68EMte#tCFL?6I68EM L?5E )M L'$)KM L5C alignS%center%M8inii orizontaleL?5CML5+M 8inia de mai jos este aliniata la stanga L5+ sizeS%H% colorS%blue% ;idt!S%JB2% alignS%left%M 8iniile de mai jos sunt aliniate la centru cu ajutorul blocului )IU L)IU alignS%center%M 8inii aliniate la centru L5+ sizeS%CB% colorS%cEan% ;idt!S%GB2%M L5+ sizeS%G% colorS%navE% ;idt!S%JBB%M L?)IUM

L?'$)KM L5678M 4. (nserarea unei adrese pota!e )ac ntr"o pagin *eb trebuie inclus o adres potal, atunci putem folosi etic!eta urmtoare: 91::%(SS= 9J1::%(SS=. Etic!eta L ))+E((M este o etic!et logic i are drept efect, n cele mai multe bro;sere , afiarea te#tului cu caractere italice. =n E#emplul G.CH este inserat n pagin o adres, aspectul paginii fiind cel din <igura G.CJ. ( emplul -. 1* L5678M L5E )M L6I68EMte#tCHL?6I68EM L?5E )M L'$)KM L5C alignS%center%M dresa L?5CML5+M dresa firmei noastre este L ))+E((M 9olden*eb &onsult L'+M (tr. ,aradisului, >r. CL'+M 'ucuresti L? ))+E((M L?'$)KM L?5678M 1;. (nserarea unui citat ,entru a insera un citat ntr"un te#t se pot folosi dou etic!ete, n funcie de dimensiunea citatului. stfel, dac citatul depete cteva linii, se folosete etic!eta 98LBCKL#BT(= 9J8LBCKL#BT(=. Efectul acestei etic!ete este afiarea indentat a te#tului cuprins ntre etic!eta de nceput i cea de sfrit /n majoritatea bro;serelor3 sau afiarea acestuia cu caractere italice /rareori3. )ac dorim ca ntr"un te#t s citam un termen, titlul unei lucrri sau s dm o referin, putem include te#tul respectiv ntre etic!etele 9C;T(= 9JC;T(=. =n cele mai multe dintre bro;sere, te#tul inclus ntre etic!etele L&I6EM va fi afiat cu caractere italice. E#emplul G.CJ ilustreaz modul de folosire al celor dou etic!ete. ,agina descris n e#emplu are aspectul din <igura G.CG. ( emplul -. 1, L5678M L5E )M L6I68EMte#tCJL?6I68EM L?5E )M L'$)KM L5C alignS%center%MInserarea unui citatL?5CML5+M 6e#tul de mai jos este un citat L'8$&X[-$6EM ,robabilitatea ca o felie de paine unsa cu unt sa cada pe covor cu fata unsa in jos este direct proportionala cu valoarea covorului L?'8$&X[-$6EM

&itatul de mai sus face parte din L&I6EM8egile lui 7urp!EL?&I6EM L?'$)KM L?5678M 11. (nserarea caractere!or specia!e )ei este impropriu s numim caracterul %blanI% sau space un caracter special, avnd n vedere frecvena cu care este folosit, totui acesta, ca i alte caractere, este inserat n pagin cu ajutorul unei comenzi speciale: comanda M /comanda ampersand3. a cum tii deja, indiferent cte spaii vom introduce atunci cnd editm documentul 5678, bro;serul le va ignora i va afia cuvintele cu un singur spaiu ntre ele. ,entru a fora introducerea spaiilor suplimentare se folosete comanda \nbsp] /no break space3. 1ten!ie &omanda ncepe cu simbolul M /ampersand3 i se termin cu N /punct i virgul3. =n E#emplul G.CG este ilustrat modul cum pot fi spaiate cuvintele folosind comanda \nbsp] ( emplul -. 1L5678M L5E )M L6I68EMte#tCGL?6I68EM L?5E )M L'$)KM L5C alignS%center%MInserarea caracterelor specialeL?5CML5+M L<$>6 sizeS%F% faceS%arial%M &uvintele\nbsp] \nbsp] \nbsp] din\nbsp] \nbsp] \nbsp] acest\nbsp] \nbsp] \nbsp] te#t\nbsp] \nbsp] \nbsp] sunt\nbsp] \nbsp] \nbsp] despartite\nbsp] \nbsp] \nbsp] de\nbsp] \nbsp] \nbsp] grupuri\nbsp] \nbsp] \nbsp] de\nbsp] \nbsp] \nbsp] trei\nbsp] \nbsp] \nbsp] spatii. L?<$>6M L?'$)KM L?5678M )up cum observai din <igura G.CA cuvintele sunt desprite prin trei spaii n loc de unul singur. ,utei aduga oricte spaii dorii n acest mod. )e asemenea, pentru a indenta un te#t, putei insera la nceputul fiecrei linii numrul de comenzi \nbsp] egal cu numrul de spaii cu care vrei s indentai te#tul. Iat mai jos un tabel cu comenzile necesare pentru a insera n te#t cele mai cunoscute caractere. Tabelul -. 1 :enumire caracter (paiu liber &opErig!t 6rademarI +egistered ^ _ ` %epre&entarea Comanda /ra.ic$ HTML \nbsp] \copE] \RCGH] \reg] sau \RC1J]

7ai dect 7ai dect

mic mare

L M \ % a b c d e

\lt] \gt] \amp] \Tuot] \RCAF \RC00 \RC0D \RCDB \RC1A

mpersand 9!ilimele &ent -n sfert $ jumtate 6rei sferturi 9rade 12. Su&estii pri"ind aspectu! textu!ui

spectul te#tului ntr"o pagin *eb este esenial pentru calitatea acesteia. -n te#t lizibil, scris cu caractere de dimensiune potrivit, bine organizat i aezat n pagin va face din pagina dumneavoastr un mediu accesibil i prietenos care l va stimula pe vizitatorul acesteia s parcurg cu plcere informaiile oferite. Iat cteva sfaturi referitoare la aspectul paginilor *eb, menite s v ajute la crearea unor te#te lizibile, ct mai uor de parcurs de ctre cititori. >u folosii fonturi de dimensiuni prea mici sau fonturi cu serife, cum este 6imes >e; +oman. )ei este tipul cel mai utilizat pentru publicaiile tiprite, te#tele scrise cu 6imes >e; +oman sunt mai greu de citit de pe monitor. ,referai tipurile rial, Uerdana, 5elvetica. citit. >u facei e#ces de caractere aldine /ngroate, bold3. 8imitai"v la a accentua cuvinte sau poriuni reduse din te#t. )e asemenea, nu folosii caractere cursive /nclinate, sau italice3 n e#ces. >u folosii prea multe tipuri de fonturi i nici tipuri de fonturi rare. <olosirea unui mare numr de fonturi de dimensiuni i culori diferite va face ca paginile s arate ncrcate i s fie greu de citit. <olosirea tipurilor de fonturi rare aduce dup sine riscul ca vizitatorul s nu le aib instalate pe computerul propriu, astfel c te#tul va fi afiat de bro;ser cu fonturile prestabilite. >u aranjai te#tul n pagin pe dou coloane. ceasta este o practic obinuit n ziare i reviste dar nu este potrivit ntr"o pagin *eb deoarece foreaz vizitatorul ca odat ajuns la baza paginii s o deruleze din nou pentru a citi ce"a de"a dou coloan. Este bine s folosii fiecare etic!et n scopul pentru care a fost ea definit. >u folosii etic!etele de titlu pentru a accentua anumite pri ale te#tului care nu sunt titluri. >u folosii etic!eta L ))+E((M pentru a insera alte te#te dect adrese sau etic!eta L&I6EM pentru a realiza scrierea cu caractere italice a te#tului. >u folosii numai litere mari /majuscule3. 6e#tele scrise cu majuscule sunt mai greu de

7otoarele de cutare inde#eaz paginile *eb i n funcie de elementele /etic!etele3 care sunt incluse n ele iar folosirea lor neadecvat conduce la o inde#are eronat a paginii dumneavoastr. 7ulte motoare de cutare scaneaz pagina n cutarea titlurilor i pe baza lor construiesc o sc!i a paginii. )ac vei folosi etic!etele de titlu pentru a accentua anumite pri ale te#tului /operaie pe care o putei realiza n mod corect folosind etic!eta L<$>6M3 vei oferi informaii eronate motoarelor de cutare. =n acest fel, scad ansele ca paginile dumneavoastr s fie identificate i citite de cei interesai. 1ten!ieH >u uitai c paginile vor fi publicate pe *eb, unde, pentru a"i atinge scopul, adic pentru a fi citite, trebuie mai nti descoperite de cititori, cel mai frecvent prin intermediul motoarelor de cutare. 13. -e.umat 'ro;serul afieaz te#tele cu cte un singur spaiu ntre cuvinte i nu recunoate sfritul de linie i nceputul unei linii noi. Elementele de formatare a te#tului se introduc n documentul 5678 prin intermediul unor etic!ete specifice: trecerea la un rnd nou: etic!eta L'+M L'+ clearS%left, rig!t, all%Mte#t introducerea unui titlu: etic!etele L5CM " L5AM L5n alignS%left, rig!t, center%Mte#tL?5nM introducerea unui paragraf: etic!eta L,M L?,M L, alignS%left, rig!t, center% no;rapMte#tL?,M preformatarea te#tului: etic!eta L,+EM L?,+EM L,+EMte#tL?,+EM centrarea te#tului: etic!eta L&E>6E+M L?&E>6E+M L&E>6E+Mte#tL?&E>6E+M afiarea te#tului pe o singur line: etic!eta L>$'+M L?>$'+M L>$'+Mte#tL?>$'+M crearea unui diviziuni n te#t: etic!eta L)IUM L?)IUM L)IU alignS%left, rig!t, center%Mte#tL?)IUM inserarea unei linii orizontale: etic!eta L5+M L5+ sizeS%valoare% ;idt!S%valoare% colorS%R+9' sau numeVculoare% alignS%left, rig!t, center%M inserarea unei adrese: etic!eta L ))+E((M L? ))+E((M L ))+E((Mte#tL? ))+E((M inserarea unui citat: etic!etele L'8$&X[-$6EM L?'8$&X[-$6EM i L&I6EM L?&I6EM L'8$&X[-$6EMte#tL?'8$&X[-$6EM L&I6EMte#tL?&I6EM

 14. Test *. a3 b3 c3

inserarea caracterelor speciale prin comanda MN

Care este rolul etichetei L'+M9 6recerea la un rnd nou Inserarea unei linii libere n te#t Inserarea unei linii orizontale

&entru ca bro serul s afi7e8e textul a7a cum a fost el formatat 6n documentul #%M( se folose7te eticheta4 a3 b3 c3 L,M L,+EM L)IUM

Ce se va afi7a 6n urmtorul exemplu9 L,M6e#tC L, alignS%rig!t%M6e#tF a3 b3 c3 6e#tC i 6e#tF vor fi aliniate la dreapta, cu o linie liber ntre ele 6e#tC va fi aliniat la stnga, 6e#tF va fi aliniat la dreapta, cu o linie liber ntre ele 6e#tC i 6e#tF vor fi scrise pe aceeai linie

&entru a scrie un titlu de dimensiune maxim folosim eticheta4 a3 b3 c3 L5CM L5AM L51M

&entru a afi7a un text pe o singura linie4 a3 b3 c3 folosim etic!eta L'+M folosim etic!eta L>$'+M nu folosim nici o etic!et

Care dintre urmtoarele etichete nu reali8ea8 centrarea textului9 a3 b3 c3 L, alignS%center%M6e#tL?,M L&E>6E+M6e#tL?&E>6E+M L)IUM6e#tL?)IUM

Ce reali8ea8 eticheta L ))+E((M9 a3 b3 c3 inserarea unui linI inserarea unei adrese de e"mail inserarea unei adrese potale

&entru a insera 6ntr!o pagin o linie ori8ontal standard folosim eticheta4 a3 L5+M

b3 c3

L5+ ;idt!S%CBB%M L5+ sizeS%C%M

5ticheta L'8$&X[-$6EM folose7te la4 a3 b3 c3 indentarea te#tului scrierea te#tului cu caractere italice inserarea unui citat n te#t

Care dintre aceste afirmaii este fals9 a3 6oate spaiile i liniile libere introduse n te#t la editarea documentului 5678 sunt afiate ntocmai de bro;ser) b3 -n te#t scris pe aceeai linie cu o etic!et de titlu este afiat sub titlu, c!iar dac nu este prezent etic!eta L'+M. c3 ,entru a introduce spaii suplimentare n te#t se folosete comanda \nbsp]

+ormatarea te tului
1. a3 '. b3 *. b3 ,. a3 -. b3 0. c3 2. c3 4. a3 5. c3 1>. a3

Capitolul 0 Le/$turi 6lin?"uri7 Le/$turile /link"urile3 reprezint, poate, partea cea mai important a unei pagini *eb. Ele transform un te#t obinuit n !Eperte#t " un nou tip de te#t, diferit de cel din clasicele pagini de carte, care permite trecerea rapid de la o informaie aflat pe un anumit computer la alt informaie memorat pe un alt computer localizat oriunde n lume. 1. 1dresa -L ,entru a stabili o legtur cu o alt pagin /un alt fiier3 trebuie s specificm adresa #%L a acestuia. -+8 este un acronim, de la Cniform Resource (ocator, i reprezint adresa de identificare a unei resurse /a unui fiier3 aflat pe calculatorul propriu sau pe orice alt calculator din lume conectat la Internet. $ adres -+8 const dintr"un ir de caractere care identific n mod unic o anumit resurs, oferind informaii despre numele serverului pe care este stocat acea resurs precum i despre localizarea ei. E#ist mai multe etic!ete 5678 care folosesc adresa -+8 drept valoare pentru anumite atribute: etic!etele care introduc legturi, imagini sau formulare. 6oate acestea folosesc aceeai sinta# a adresei -+8 pentru a specifica locaia unei anumite resurse, indiferent de tipul acesteia. (inta#a general a unei adrese -+8 este:

sc)emaOJJserverP/a&daOportJcaleaPcatreP.isier unde: sc)ema " reprezint unul dintre protocoalele de transfer al informaiilor, cum ar fi 566,, <6,, 9op!er, 6elnet, etc. serverP/a&da " reprezint identificatorul serverului pe care este gzduit fiierul respectiv. cest identificator poate fi adresa I, a serverului sau numele su. port " reprezint numrul portului de comunicaie prin intermediul cruia bro;serul se conecteaz la server. (erverele dein mai multe astfel de porturi, fiecare servind unui alt tip de comunicaie: 566,, <6,, pot electronic, etc. ,ortul prestabilit n cazul transferului prin 566, are numrul 0B. >umrul portului trebuie precizat numai n cazul cnd acesta este diferit de 0B. caleaPcatreP.isier " reprezint localizarea ierar!ic a fiierului n sistemul de directoare de pe server. ceasta const ntr"unul sau mai multe nume desprite prin caracterul %?% /slash3 Iat cteva e#emple de adrese -+8 mpreun cu e#plicaii referitoare la sinta#a lor: !ttp:??;;;.autor.com?carti.!tml =n acest e#emplu adresa -+8 indic documentul 5678 numit carti)html care se afl directorul rdcin al serverului ;;;.autor.com !ttp:??;;;.autor.com? ceast adres indic prima pagin /home page3 a aceluiai server. !ttp:??;;;.autor.com:0B0B? E#emplul de mai sus indic de asemenea spre prima pagin a serverului ;;;.autor.com, dar specificnd i numrul portului care este diferit de cel prestabilit. !ttp:??;;;.autor.com?carti.!tmlR;ebdesign =n acest e#emplu este indicat calea spre documentul 5678 carti)html aflat pe acelai server, dar specificndu"se o anumit seciune a acestui document, seciune denumit ebdesign. =n cazul cnd fiierul spre care este fcut legtura este stocat pe propriul calculator se folosete o adres -+8 de forma urmtoare: .ileOJJserverJcaleaPcatreP.isier unde: server " reprezint numele computerului pe care este stocat fiierul /acelai pe care ruleaz bro;serul3. =n acest caz, bro;serul va accesa fiierul folosind facilitile obinuite ale sistemului de operare de pe computerul propriu. caleaPcatreP.isier " reprezint localizarea fiierului n structura de directoare conform regulilor sistemului de operare >umele computerului personal poate fi nlocuit cu numele generic 3local)ost3. =n acest caz, adresa -+8 poate avea urmtoarea form: .ileOJJlocal)ostJcaleaPcatreP.isier )e e#emplu fiierul culori)html care este salvat n folderul de lucru "ork din M$ Documents pe computerul personal va avea urmtoarea adres -+8: file:??local!ost?&:f7E )ocumentsf*orIfculori.!tml

6ermenul localhost poate fi omis, deoarece este numele prestabilit al computerului propriu. =n acest caz este necesar prezena unui caracter %?% suplimentar: file:???&:f7E )ocumentsf*orIfculori.!tml =n practic, atunci cnd dorim s adresm un fiier aflat pe computerul propriu putem omite prima parte a adresei -+8 obinnd urmtoarea form: &:f7E )ocumentsf*orIfculori.!tml 1ten!ieH (e poate observa c n cazul resurselor stocate pe servere e#terne, numele directoarelor care fac parte din calea ctre resurs sunt desprite prin caracterul %J% /slash3. 8a fiierele stocate pe computerul propriu, directoarele i subdirectoarele care formeaz calea ctre fiier sunt desprite prin caracterul % Q% /backslash3. &ele dou moduri de scriere sunt specifice celor dou sisteme de operare: ->IW, respectiv )$("*indo;s. )eoarece marea majoritate a serverelor *eb folosesc sistemul de operare ->IW, calea ctre resursele stocate pe ele se scrie respectnd conveniile acestui sistem. 7ai mult, aceast convenie s"a e#tins i la adresele -+8 referite de pe sisteme *indo;s. stfel, dac dorii s adresai un fiier numit foto);pg aflat pe discul C4, n M$ Documents, folderul 'magini putei folosi adresa -+8: &:?7E )ocuments?Imagini?foto.jpg 2. 1drese a<so!ute i adrese re!ati"e ,entru a putea localiza un fiier n structura ierar!ic de directoare, n scopul de a stabili o legtur ctre el, se poate folosi adresarea absolut$ sau adresarea relativ$. 1dresa absolut$ a unui fiier conine calea precis i complet ctre fiierul respectiv pornind de la vrful ierar!iei de directoare: &:?7anual 5678?E#emple?culori.!tml <iierul culori)html se afl plasat pe discul C4, n directorul Manual #%M(, subdirectorul 5xemple. 1dresa relativ$ a unui fiier precizeaz poziia acestuia n raport cu documentul 5678 din care este apelat. Uom reveni ceva mai jos asupra acestui subiect. 3. Sta<i!irea !e&*turi!or ,entru a insera legturi ntr"un document 5678 folosim etic!eta 91= 9J1=. Etic!eta L M este o etic!et container, prezena etic!etei de nc!idere fiind obligatorie. tributul obligatoriu al etic!etei L M este )re. /#$pertext Reference3 care primete ca valoare adresa -+8 a fiierului cu care dorim s stabilim legtura. cest fiier poate fi un document 5678, o imagine sau un fiier de alt tip. )ocumentul 5678 n care este prezent legtura se numete surs$ iar fiierul ctre care este fcut legtura se numete !int$. (inta#a etic!etei L M este urmtoarea: L !refS%adresaV-+8%Mte#t sau imagineL? M

=ntre etic!etele L M i L? M poate fi plasat un te#t obinuit sau o imagine. =n mod prestabilit te#tul inclus ntre etic!etele L M este afiat subliniat i de culoare albastr iar imaginile au un c!enar de culoare albastr. <olosirea etic!etei L M imbricat cu etic!ete de formatare a te#tului, fonturi, liste sau tabele se face plasnd etic!eta L M 6n interiorul acestora. =n acest sens, standardul 5678 consider incorect o construcie ca aceasta: L !refS%adresaV-+8%ML<$>6 faceS%tip%M8egaturaL?<$>6ML? M =n locul ei vom folosi construcia: L<$>6 faceS%tip%ML !refS%adresaV-+8%M8egaturaL? ML?<$>6M 1ten!ieH >u este permis imbricarea mai multor etic!ete L M. =n funcie de localizarea intei /a resursei referite de legtur3 putem clasifica legturile astfel: legturi n cadrul aceleiai pagini /ancore3 legturi ctre o pagin aflat n acelai folder legturi ctre o pagin aflat n alt folder legturi ctre pagini e#terne 4. 1ncore - !e&*turi n cadru! ace!eiai pa&ini ,entru a facilita navigarea ntr"o pagin care conine un te#t de mari dimensiuni se pot insera n acesta anumite puncte de reper ctre care se definesc legturi. cestea se numesc ancore. ,entru a plasa o ancor sunt necesare dou elemente: C. Punctul spre care dorim s facem legtura. cesta se definete insernd n punctul din pagin dorit /de obicei n dreptul unui anumit element din pagin: un titlu, o imagine, o alt legtur, un tabel, etc.3 etic!eta L M, nsoit de atributul name care primete ca valoare un nume de identificare atribuit ancorei /de e#emplu %numeVancora% 3. ,rin urmare, identificarea punctului spre care se face legtura se realizeaz astfel: L nameS%numeVancora%M L? M F. Le/$tura propriu"&is$R care se definete folosind atributul )re. al etic!etei L M. =n e#emplul de mai sus, acesta primete ca valoare %RnumeVancora%. (tabilirea legturii se realizeaz dup urmtoarea sinta#: L !refS%RnumeVancora%Mte#t e#plicativL? M 6e#tul e#plicativ va fi afiat n mod diferit, n format !EperlinI, subliniat i de culoare prestabilit albastr. =n momentul cnd se efectueaz clicI cu mouse"ul pe te#t e#plicativ se realizeaz un salt n cadrul paginii, bro;serul afind partea din pagin care ncepe de la elementul n dreptul cruia a fost inserat ancora. 1ten!ieH

,rezena semnului S, plasat naintea numelui ancorei, este obligatorie. cesta indic bro;serului faptul c este vorba despre o legtur intern, n cadrul paginii. =n cazul n care semnul este omis, bro;serul va cuta acest nume n afara paginii, unde, evident, nu l va gsi. ,entru a introduce o legtur ctre o ancor definit n alt document /alt pagin3 aflat n acelai director, atributul !ref primete o valoare de forma: !refS%numeVfisier.!tmlRnumeVancora%. E#emplul A.C ilustreaz cele dou situaii. ,entru a e#emplifica modul n care poate fi inserat o ancor ntr"un alt document i cum poate fi ea referit, am inserat n documentul textB<)html ancora L nameS%citat%M. .7 ( emplul 0. 1 L5678M L5E )M L6I68EMlegaturiCL?6I68EM L?5E )M L'$)KM L nameS%ancoraC%ML? M L5C alignS%center%M ncore definite in acelasi documentL?5CML5+M L'+M L'+M'L'+M&L'+M)L'+ME L'+M<L'+M9L'+M5L'+MIL'+M: L'+MXL'+M8L'+M7L'+M>L'+M$ L'+M,L'+M+L'+M(L'+M6L'+ML'+MUL'+M*L'+MgL'+MWL'+M L !refS%RancoraC%M(usL? M L'+ML'+M L5C alignS%center% M ncore definite in alt documentL?5CML5+ML,M &licI L !refS%te#tCJ.!tmlRcitat%M I&I L? M pentru a desc!ide un document situat in alta pagina L?'$)KM L?5678M spectul paginii descrise n acest e#emplu este cel din <igura A.C. Bbserva!ie &onstruciile de mai jos au acelai rol, i anume inserarea unei ancore denumit %ancoraC% n punctul din pagin care conine elementul %E8E7E>6%. L nameS%ancoraC%ME8E7E>6L? M L nameS%ancoraC%ML? ME8E7E>6 =n mod normal, etic!eta L M fiind o etic!et container, ntre etic!etele de desc!idere i de nc!idere trebuie s figureze un te#t. 6otui, n e#emplul de mai sus, dorind s inserm o ancor n dreptul titlului, am folosit cea de"a doua construcie: L nameS%ancoraC%ML? M L5C alignS%center%M ncore definite in acelasi documentL?5CM 7otivul este acela c este considerat o practic incorect includerea etic!etelor de titlu ntre etic!etele L M i L? M.

(e poate utiliza i construcia urmtoare: L5C alignS%center%ML nameS%ancoraC%M ncore definite in acelasi documentL? ML?5CM ). Le&*tura c*tre o pa&in* a'!at* n ace!ai director 8'o!der9 ,entru a realiza o legtur ctre o pagin aflat n acelai director se procedeaz astfel: L !refS%numeVfisier.!tml%Mte#t e#plicativL? M unde: !ref reprezint atributul care stabilete calea ctre inta cu care se face legtura. )ac fiierul int este n acelai director, atributul primete ca valoare c!iar numele fiierului. te#t e#plicativ " reprezint te#tul pe care se face clicI cu mouse"ul pentru a activa legtura. /)e e#emplu %&licI aici% 3. cest te#t este afiat diferit fa de restul te#tului " n general, subliniat i de culoare albastr. =n E#emplul A.F este realizat o legtur reciproc ntre dou pagini aflate n folderul de lucru "ork, pagina avnd aspectul din <igura A.F. /7 ( emplul 0. ' L5678M L5E )M L6I68EMlegaturiFL?6I68EM L?5E )M L'$)KM L5CM,agina C L?5CML5+M L !refS%legaturiH.!tml%M8inI catre pagina F L? M L?'$)KM L?5678M (alvai acest e#emplu cu numele legaturi>)html iar e#emplul urmtor /E#emplul A.H3 cu numele legaturiA)html. )7 ( emplul 0. * L5678M L5E )M L6I68EMlegaturiHL?6I68EM L?5E )M L'$)KM L5CM,agina F L?5CML5+M L !refS%legaturiF.!tml%M8inI catre pagina C L? M L?'$)KM L?5678M 8a fel cum ai procedat i pn acum, desc!idei una dintre cele dou pagini cu bro;serul i testai funcionarea legturii dintre ele. mbele documente 5678 trebuie salvate n acelai folder. Uei observa c atunci cnd v aflai n ,agina C i facei clicI cu mouse"ul pe te#tul 8inI catre ,agina F se va desc!ide cel de"al doilea document 5678 i invers, legtura dintre cele dou pagini fiind astfel reciproc. 1ten!ieH >umele fiierelor care reprezint valori ale atributului !ref sunt case sensitive. ntmpl i cu te#tul care desemneaz valorile atributului name. celai lucru se

ceasta nseamn c fiierul legaturi?)html este diferit de fiierul (egaturi?)html, iar ancora L nameS%ancoraC%M este diferit de L nameS% ncoraC%M ,entru a evita greelile, este recomandat s v denumii toate fiierele sau numele pentru ancore cu litere mici. +. Le&*tura c*tre o pa&in* !oca!i.at* n a!t director 8'o!der9 )ac pagina cu care vrem s facem legtura se afl pe acelai calculator, dar ntr"un alt folder, atunci pentru a preciza poziia ei n structura de directoare se poate folosi adresarea relativ sau adresarea absolut. dresarea absolut$ se realizeaz preciznd calea /path3 complet, pornind de la directorul rdcin, prin care se poate ajunge la fiierul de care vrem s legm pagina. )e e#emplu, dac fiierul culoriB)html se afl pe discul C4,n folderul M$ Documents, n folderul "ork, o legtur ctre el se va face n modul urmtor: L !refS%&:?7E )ocuments?*orI?culoriC.!tmlM8inIL? M dresarea relativ$ precizeaz calea ctre documentul cu care facem legtura pornind de la documentul n care ne aflm. ,entru a urca un nivel n structura de directoare se folosete irul de caractere %..? % ( emplu ( presupunem c ne aflm ntr"un document 5678 numit legaturi>)html plasat n folderul de lucru "ork. =n afar de folderul "ork n care lucrm, n M$ Documents se mai afl un folder, numit 'magini, ca n structura prezentat n (c!ema A.C.

Sc/ema +.1

CO CO M? @ocuments =or>

e !e&aturi2./tm!
(ma&ini tranda'ir.&i'

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

Sc/ema +.2

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

e !e&aturi2./tm!
)orim s stabilim o legtur cu un fiier numit text>)html care se afl n directorul 5xemple /directorul printe al folderului nostru, (egaturi3. tunci referirea se va face astfel: L !refS%..?te#tF.!tml%M8inI la te#tL? M m urcat un nivel n ierar!ie ajungnd n directorul 5xemple i am specificat numele fiierului cu care dorim s facem legtura. )ac fiierul text>)html se afl cu dou nivele mai sus fa de folderul n care lucrm, adic dac se afl n folderul Manual #%M(, atunci adresarea se face astfel: L !refS%..?..?te#tF.!tml%M8inI la te#tL? M =n general, de cte ori este posibil, este de preferat s folosii adresarea relativ, pentru ca documentele 5678 s fie portabile /mutarea lor s nu invalideze legturile stabilite ntre diverse documente3. ,. Le&*tura c*tre pa&ini externe $ legtur ctre o pagina e#tern se realizeaz simplu, prin utilizarea etic!etei L M L? M, specificnd adresa -+8 a paginii ca valoare a atributului !ref astfel: !refS%!ttp:??-+8Vpagina% +eamintim c specificarea adresei -+8 se poate face fie folosind numele serverului pe care este stocat pagina fie adresa I, a acestuia. Evident, pentru ca linI"ul s funcioneze, trebuie ca utilizatorul s fie conectat la Internet /lucru valabil pentru toate legturile e#terne3. =n E#emplul A.J este stabilit o legtur ctre pagina de start Ka!oo. i7 ( emplul 0. , L5678M L5E )M L6I68EMlegaturiJL?6I68EM L?5E )M L'$)KM L5C alignS%center%M8inI catre Ka!oo.comL?5CML5+M L !refS%!ttp:??;;;.Ea!oo.com%M Ka!ooNL? M L?'$)KM L?5678M

spectul paginii este cel din <igura A.H. -n atribut util al etic!etei L M este title. cesta determin apariia unei mici ferestre /tool tip3 n pagina *eb cnd mouse"ul se afla pe o legtur, fereastr n care este afiat valoarea dat acestui atribut, care are astfel menirea de a furniza informaii suplimentare despre semnificaia unei legturi. E#emplul A.G ilustreaz utilitatea atributului title, aa cum reiese din <igura A.J. E7 ( emplul 0. L5678M L5E )M L6I68EMlegaturiGL?6I68EM L?5E )M L'$)KM L5C alignS%center%M tributul titleL?5CML5+M L !refS%!ttp:??;;;.google.com% titleS%8egatura catre 9oogle.com%M9oogleL? M L?'$)KM L?5678M 3. 1!e&erea cu!ori!or pentru !e&*turi m mai discutat despre acest subiect i la capitolul despre culori. =n mod prestabilit / default3 se utilizeaz trei culori pentru legturi: culoare pentru legturile nevi&itate /nu s"a efectuat nici un clicI pe ele3 " albastru culoare pentru legturile vi&itate /s"a efectuat cel puin un clicI pe ele3 " violet culoare pentru legturile active /deasupra crora se afl mouse"ul la un moment dat, dar nc nu s"a efectuat clicI3 " rou ,entru a modifica dup preferine aceste culori se folosesc cele trei atribute ale etic!etei L'$)KM: lin? pentru legturile nevizitate] vlin? pentru legturile vizitate] alin? pentru legturile active. Ualorile pe care le pot lua aceste atribute sunt culori definite prin nume sau conform codului !e#azecimal. E#emplul A.A ilustreaz modul cum pot fi modificate culorile legturilor, aa cum se poate observa din <igura A.G care red aspectul paginii descrise n e#emplu. ?7 ( emplul 0. 0 L5678M L5E )M L6I68EMlegaturiAL?6I68EM L?5E )M L'$)K linIS%Eello;% vlinIS%green% alinIS%magenta%M L5C alignS%center%M(etarea culorilor pentru linI"uriL?5CML5+M L'+Mgalben pentru legaturi, verde pentru legaturi vizitate si magenta pentru legaturi activeL'+M L !refS%legaturiF.!tml%M8inI catre pagina C L? ML'+M L !refS%legaturiH.!tml%M8inI catre pagina F L? M L?'$)KM L?5678M

4. ti!i.area potei e!ectronice 8e-mai!9 =ntr"o pagin *eb se pot afla legturi care permit lansarea n e#ecuie a aplicaiei de e#pediere a mesajelor electronice a celui care viziteaz pagina. <cnd clicI pe te#tul care nsoete legtura, programul de pota electronic al vizitatorului paginii se va desc!ide automat, avnd cmpul adresei destinatarului, %6o:% deja completat cu adresa de mail specificat n pagin. ,entru a realiza acest lucru se folosete comanda mailtoO atributul !ref primind o valoare ca mai jos: L !refS%mailto:adresaVe"mail%M )ac pagina este vizualizat cu bro;serul Internet E#plorer iar vizitatorul are instalat un e"mail manager, cum sunt de pild aplicaiile 7icrosoft $utlooI sau $utlooI E#pres, activarea legturii va determina desc!iderea unuia dintre aceste programe. =n cazul n care managerul de e"mail default este de alt tip dect aplicaia 7icrosoft, /Eudora, de e#emplu3 aceasta va porni de asemenea automat, cu o nou pagin +end i cu adresa destinatarului pre"completat. )ac pagina este vizualizat n >etscape, se va desc!ide programul de pot electronic ncorporat n bro;ser) =n e#emplul urmtor /E#emplul A.13, n momentul cnd vizitatorul paginii face clicI pe te#tul %6rimitei un mesaj%, aplicaia de pot electronic este lansat automat, prin intermediul serviciului mailto:, iar cmpul care trebuie completat cu adresa de mail a destinatarului mesajului este de asemenea completat automat cu adresa autorhdomeniu.com aa cum rezult din <igura A.A. l7 ( emplul 0. 2 L5678M L5E )M L6I68EMlegaturi1L?6I68EM L?5E )M L'$)KM L5C alignS%center%ME#pediere de mesaje electronice L?5CML5+M L !refS%mailto:autorhdomeniu.com% titleS%adresa mea de mail%M 6rimiteti un mesaj L? M L?'$)KM L?5678M 1;. Le&*turi c*tre 'iiere oarecare $ pagin *eb poate conine legturi nu doar ctre alte fiiere 5678, dar i ctre fiiere de orice alt tip, aflate pe calculatorul propriu sau oriunde pe *eb. &a i n cazul legturilor cu alte pagini /documente 56783 vom folosi etic!eta L M L? M, astfel: L !refS%-+8VfisierVdestinatie%Mte#t e#plicativL M >efiind vorba despre un fiier 5678, bro;serul nu va putea s l proceseze, astfel c va activa procesul de transfer sau de descrcare /do nload3, urmnd ca, dup transferul integral al fiierului, utilizatorul s l desc!id cu un program adecvat. =n E#emplul A.0, atunci cnd se efectueaz clicI pe legtur se desc!ide caseta de dialog .ile do nload care permite: salvarea fiierului pe disc sau desc!iderea fiierului n locaia curent m7 ( emplul 0. 4

L5678M L5E )M L6I68EMlegaturi0L?6I68EM L?5E )M L'$)KM L5C alignS%center%M8egaturi catre fisiere oarecareL?5CML5+M L !refS%!tml.zip%M 8inI catre fisierul do;nload.zip L? M L?'$)KM L?5678M <igura A.1 red efectul activrii unei legturi ctre un fiier oarecare. 11. @esc/iderea pa&ini!or re'erite printr-o !e&*tur* ,agina nou, apelat prin activarea unei legturi se poate desc!ide n dou moduri, n raport cu pagina surs: n aceeai fereastr ntr"o fereastr nou =n mod prestabilit, legturile desc!id pagina pe care o refer n fereastra curent. ceasta nseamn c dac vei face clicI pe un linI, noua pagin se va ncrca n locul paginii deja desc!ise /n aceeai instan a bro;serului3. ,entru a reveni la pagina anterioar trebuie s apsai butonul 1ack al bro;serului. cest comportament se poate sc!imba cu ajutorul valorilor atributului tar/et, asupra cruia vom reveni la capitolul Cadre. Uom meniona aici doar dou dintre aceste valori, corespunztoare celor dou situaii amintite. ,entru ca pagina apelat s se desc!id ntr"o fereastr nou, se utilizeaz sinta#a generic de mai jos, n care atributul target are valoarea %VblanI%: L !refS%adresaV-+8% targetS%V blanI%Mte#t e#plicativL? M ,entru ca pagina referit s se desc!id n aceeai fereastr cu pagina surs, atributului i se asociaz valoarea %Vself%: L !refS%adresaV-+8% targetS%Vself%Mte#t e#plicativL? M <igura A.0 red modul n care se desc!ide o pagin ntr"o nou fereastr, aa cum este precizat n E#emplul A.D. n7 ( emplul 0. 5 L5678M L5E )M L6I68EMlegaturiDL?6I68EM L?5E )M L'$)KM L5C alignS%center%M)esc!iderea paginii in alta fereastraL?5CM L5+M ,agina de mai jos se va desc!ide intr"o fereastra noua L,M L !refS%tabel culori.!tml% targetS%VblanI%M6abelul culorilorL? M L?'$)KM L?5678M

12. Crearea unei <are secundare de na"i&are =n foarte multe site"uri ai observat, probabil, e#istena, n partea de jos a paginii, a unui bloc de te#t care conine legturi ctre paginile care compun site"ul, legturile fiind delimitate de mici linii verticale, ca n e#emplul de mai jos: TCuloriT T+onturiT T8locuri de te tT -tilitatea acestei bare este evident legat de facilitarea navigrii n site, mai ales n cazurile cnd dimensiunea paginii depete un ecran. =n acest caz, utilizatorul trebuie s deruleze la citire paginile pe vertical, astfel c linI"urile de pe bara de navigare superioar nu mai sunt accesibile. $ astfel de bar secundar de navigare se poate realiza procednd ca n E#emplul A.CB. Evident, legturile vor face referire la fiierele 5678 dorite de dumneavoastr. $ pagin care conine o astfel de bar de navigare va avea aspectul din <igura A.D. o7 ( emplul 0. 1> L5678M L5E )M L6I68EMlegaturiCBL?6I68EM L?5E )M L'$)KM L5C alignS%center%M'ara de navigareL?5CML5+M L5J alignS%center%M L !refS%culoriC.!tml%Mi&uloriiL? M L !refS%fonturiC.!tml%Mi<onturiiL? M L !refS%te#tC.!tml%Mi<ormatarea te#tuluiiL? M L?5JM L?'$)KM L?5678M 'ara vertical inserat ntre te#tele care trimit la paginile respective este de obicei plasat pe tastatur pe aceeai tast cu caracterul %f% / backslash3. )ac dorii ca bara s fac parte din te#tul activ, o vei insera ntre etic!etele L M i L? M, altminteri ea trebuie plasat n afara acestora, astfel: iL !refS%culoriC.!tml%M&uloriL? Mi 13. -e.umat dresa -+8 const dintr"un ir de caractere care identific n mod unic o anumit resurs oferind informaii despre numele serverului pe care este stocat acea resurs i despre localizarea ei n structura de directoare de pe server. 8egturile se introduc ntr"un document 5678 prin intermediul etic!etei container L M L? M conform urmtoarei sinta#e generale: L !refS%adresaV-+8% nameS%nume% titleS%te#t% targetS%tinta%Mte#t sau imagineL? M =n funcie de locul unde este plasat documentul referit e#ist mai multe tipuri de legturi: 8egturi n cadrul aceleiai pagini /legturi interne, ancore3. ,entru a crea o legtur intern sunt necesari doi pai: definirea numelui ancorei i stabilirea legturii .

8egturi cu pagini aflate n acelai director. ,entru a stabili o legtur cu o pagin aflat n acelai director se specific drept valoare a atributului !ref c!iar numele fiierului 5678. 8egturi cu pagini aflate n alt director. ,entru a stabili locaia documentului cu care facem legtura se poate folosi adresarea relativ /recomandat3 sau adresarea absolut. 8egturile e#terne. =n cazul legturilor e#terne, atributul !ref primete ca valoare adresa -+8 a paginii respective. (e pot stabili i legturi ctre fiiere oarecare /nu neaprat documente 56783. 8a activarea unei astfel de legturi se desc!ide fereastra de do nload a sistemului. &u ajutorul comenzii mailto: se lanseaz automat n e#ecuie aplicaia de pot electronic a vizitatorului paginii. 14. Test 4. a3 b3 c3 Care dintre urmtoarele afirmaii este fals4 Etic!eta L M servete la stabilirea unei legturi n cadrul aceleiai pagini Etic!eta L M servete la stabilirea unei legturi ctre un fiier aflat pe acelai calculator Etic!eta L M servete la scrierea te#tului cu caractere rial.

&entru a preci8a numele fi7ierului spre care se face legtura se folose7te atributul4 a3 b3 c3 name !ref file

Care este gre7eala din urmtoarea construcie9 L5FML nameS%Rgr%M9resealaL? ML5FM a3 >u este nici o greeala. b3 r fi trebuit formulat: L5FML nameS%gr%M9resealaL? ML?5FM c3 r fi trebuit formulat: L nameS%Rgr%ML? ML5FM9resealaL?5FM Ce reali8ea8 exemplul urmtor9 L nameS%sectiuneaC%M(ectiunea CL? M a3 b3 c3 Insereaz o ancor n pagin i definete numele ei. (tabilete o legtur n cadrul paginii. (tabilete o legtura la fiierul sectiuneaB)html.

.i7ierul contact)html, referit 6n legtura de mai ;os4 L !refS%..?contact.!tml%M&ontactL? M este locali8at 6n4

a3 b3 c3

acelai director ca i fiierul curent directorul printe al fiierului curent directorul aflat cu dou nivele mai sus dect directorul curent

:n documentul culori)html am inclus urmtoarea ancor4 L nameS%fundal%ML? M :n acest ca8, construcia corect pentru a face legtura spre ea din cadrul unui alt document aflat 6n acela7i director este4 a3 b3 c3 L !refS%Rfundal%M'acIgroundL? M L !refS%culori.!tmlVfundal%M'acIgroundL? M L !refS%culori.!tmlRfundalM'acIgroundL? M

Care este aspectul unei legturi 6ntr!un text, 6n mod prestabilit DdefaultE9 a3 b3 c3 de culoare albastr i subliniat de culoare roie subliniat

Care dintre urmtoarele afirmaii este fals9 a3 b3 c3 >u este permis imbricarea mai multor etic!ete L M. >u este permis sc!imbarea culorilor legturilor. >u este permis referina la alte fiiere dect fiierele 5678.

&entru a stabili o legtura cu site!ul extern ;;;.booIs.com folosim construcia4 a3 b3 c3 L !refS%!ttp:??;;;.booIs.com%M L !refS%file:??;;;.booIs.com%M L !refS%booIs.com%M

.ie urmtoarea etichet inserat 6n pagin4 L !refS%mailto:utilizatorhdomeniu.comM(end mailL? M Dac se execut click pe textul %(end mail%: a3 b3 c3 (e desc!ide pagina ;;;.domeniu.com. (e desc!ide programul de mail al vizitatorului paginii. (e desc!ide csua de mail cu adresa specificat.

Le/$turi
1. c3 '. b3 *. b3 ,. a3 -. b3 0. c3 2. a3 4. b3

5. a3 1>. b3

Capitolul 2 ;ma/ini i elemente multimedia ;ma/inile i elementele multimedia constituie, fr ndoial, o latur interesant i spectaculoas a oricrei pagini de *eb. ,utei include n paginile dumneavoastr fotografii, imagini animate, sunete sau imagini video. tunci cnd sunt folosite n mod judicios, aceste elemente pot mbogi coninutul paginilor *eb, oferindu"le un aspect atractiv i profesional. ,e de alt parte, folosirea lor n e#ces poate da paginilor un aspect ncrcat i confuz i poate conduce la mrirea considerabil a timpului de ncrcare al paginii. 1. 0ormate!e 'iiere!or &ra'ice Imaginile sunt stocate n fiiere cu diverse formate, cele mai folosite pe *eb fiind, aa cum era firesc, cele care confer un raport optim ntre calitatea imaginii i dimensiunile fiierului. ceast opiune este determinat de faptul c majoritatea utilizatorilor Internetului dispun de cone#iuni telefonice dial"up, cu viteze destul de mici, astfel c timpul de ncrcare al fiierelor, care depinde de dimensiunea acestora, devine un factor determinant. )ou dintre cele mai utilizate tipuri de fiiere grafice sunt DP(@ /Foint &hotographic 5xperts ,roup3 i @;+ /,raphics 'nterchange .ormat3. 0ormatu! A(0 <ormatul 9I< /)gif3 folosete FGA de culori i este ideal pentru icon"uri, ilustraii i animaie. cest format utilizeaz o te!nologie special de comprimare care reduce semnificativ dimensiunile fiierelor grafice pentru un transfer mai rapid prin reea. =n procesul de comprimare se pstreaz toate caracteristicile imaginii originale, astfel c dup decomprimare imaginea are acelai aspect ca i originalul. Imaginile 9I< suport efecte de transparen, ntreesere i animaie, asupra crora vom reveni pe larg n capitolul (lemente avansate de /ra.ic$. )eoarece majoritatea bro;serelor recunosc formatul 9I<, acesta a devenit cel mai frecvent utilizat n paginile *eb. ,oate fi folosit pentru a include imagini direct n pagini /imagini in!line3 precum i pentru a referi imaginile prin intermediul unor legturi e#terne. 6otui, datorit numrului redus de culori, formatul 9I< nu este potrivit pentru fotografii sau imagini de calitate nalt. ,entru acest tip de imagini, cel mai adecvat este formatul :,E9. 0ormatu! B:#A <ormatul :,E9 /);pg3, pe de alt parte, suport un numr mult mai mare de culori /apro#imativ CA milioane3. )ac dorii s folosii imagini fotografice, formatul :,E9 este recomandat, datorit calitii superioare a imaginii. )imensiunile unui fiier :,E9 nu depind de numrul de culori ci de gradul de comprimare a imaginii. 9radul de comprimare al formatului :,E9 este mai ridicat dect cel al formatului 9I<. >u este neobinuit, de e#emplu, ca un fiier 9I< care are FBB de Xb s fie comprimat ca fiier :,E9 pn la dimensiunea de HB de Xb. ,entru a realiza un grad att de nalt de comprimare a imaginilor, formatul :,E9 pierde anumite informaii din imaginea original. &u toate c la decomprimare imaginea :,E9 nu va fi absolut identic cu imaginea original, diferenele vor fi de cele mai multe ori inobservabile.

<ormatul :,E9 este potrivit pentru imaginile fotografice, dar el nu este adecvat pentru ilustraii, desene sau imagini de dimensiuni reduse. lgoritmii folosii pentru comprimarea i decomprimarea imaginii altereaz n mod notabil zonele de mari dimensiuni colorate cu o singur nuan. )in acest motiv, atunci cnd dorii s includei n pagin un desen sau o ilustraie care folosete un numr redus de culori, formatul 9I< este cel mai potrivit. 2. C7te"a metode de o<inere a ima&ini!or vei la ndemn diverse moduri n care putei crea sau procura imagini pe care s le includei n paginile dumneavoastr: &rearea imaginilor cu ajutorul unui program de grafic " cele mai performante sunt dobe ,!otos!op i &orel)ra;. (canarea fotografiilor realizate cu aparate foto tradiionale i, eventual, prelucrarea lor ulterioar cu editoare grafice. <olosirea aparatelor de fotografiat digitale " dei sunt nite ec!ipamente nc destul de costisitoare prezint marele avantaj c furnizeaz imagini digitale sub form de fiiere grafice n formate comune, care se pot descrca direct pe !ard"disI, i care se pot utiliza ca atare sau dup o prelucrare grafic minim. ,reluarea imaginilor de pe *eb. >umrul site"urilor care ofer colecii de imagini gratuite i care pot fi utilizate liber este imens. 6otui, atunci cnd dorii s folosii n pagina dumneavoastr o imagine care nu face parte dintr"o astfel de colecie, trebuie s avei n vedere aspectul drepturilor de autor. ,entru a prelua o imagine de pe *eb trebuie s o salvai pe !ard"disI" ul dumneavoastr. ,utei realiza acest lucru astfel: " " " " plasai cursorul pe imaginea respectiv i apsai butonul drept al mouse"ului selectai din meniul care se desc!ide +ave 'mage 0s))) n fereastra de dialog selectai folderul de destinaie i numele fiierului apsai butonul +ave

Este util s v creai unul sau mai multe foldere dedicate imaginilor, organizate pe tipuri /icon, fundaluri, butoane, imagini propriu"zise, etc.3, uneori alctuind adevrate biblioteci, n care s pstrai toate imaginile pe care intenionai s le folosii n paginile dumneavoastr. )e asemenea, de mare utilitate sunt aplicaiile de gestionare a imaginilor, cum este de e#emplu cunoscutul &)(ee. 1ten!ieH )ac imaginea nu este salvat n acelai folder n care se afl documentul 5678 surs care folosete imaginea respectiv, referina la imagine trebuie s conin calea corect ctre locaia ei, altminteri imaginea nu va fi afiat n pagin. 3. (nserarea unei ima&ini ,entru a insera o imagine n cadrul unei pagini /o imagine in!line3, se utilizeaz etic!eta 9;M@= /de la image3. Etic!eta LI79M nu este o etic!et container, prin urmare nu necesit o etic!et corespunztoare de nc!idere.

,entru a putea identifica imaginea care va fi inserat, se utilizeaz atributul src /source3 al etic!etei LI79M. tributul src i comunica bro;serului numele i locaia imaginii care urmeaz s fie inserat. Ualoarea acestui atribut este adresa -+8 a imaginii respective. )ac imaginea se afl n acelai director cu fiierul 5678 care face referire la imagine, atunci adresa -+8 a imaginii este formata numai din numele fiierului, inclusiv e#tensia. LI79 srcS%imagine.e#tensie%M )ac imaginea se afla ntr"un alt director, -+8"ul imaginii trebuie specificat fie prin adresarea absolut fie, preferabil, prin cea relativ. E#emplul 1.C ilustreaz modul n care se pot insera ntr"o pagin dou imagini, una dintre ele aflndu"se n acelai folder ca i pagina surs, iar cealalt n folderul 'magini. <igura 1.C red aspectul paginii descrise n e#emplu. ( emplul 2. 1 L5678M L5E )M L6I68EMimaginiCL?6I68EM L?5E )M L'$)KM L5C alignS%center%MImagini in paginaL?5CML5+M Imagine aflata in acelasi folderL,M LI79 srcS%tiger.gif% borderS%G%ML,M Imagine aflata in folderul ImaginiL,M LI79 srcS%..?Imagini?bernese.jpg% borderS%C% M L?'$)KM L?5678M =n acest e#emplu este prezent i atributul border al etic!etei LI79M. cesta este folosit pentru a plasa un c!enar n jurul imaginii. Ualoarea atributului border este numrul de pi#eli care reprezint grosimea c!enarului din jurul imaginii. bsena atributului sau setarea la valoarea %B% face ca acest c!enar s nu fie prezent. -n alt atribut util asociat etic!etei LI79M este alt. e#plicativ n spaiul n care va fi afiat imaginea n pagin. =n E#emplul 1.F este ilustrat utilitatea atributului alt. ( emplul 2. ' L5678M L5E )M L6I68EMimaginiFL?6I68EM L?5E )M L'$)KM L5C alignS%center%M tributul alt L?5CML5+M cesta este un...L'+M LI79 srcS%..?Imagini?orangerose% altS%trandafir%M L?'$)KM L?5678M )up cum putei observa din <igura 1.F imaginea pe care am inclus"o n document nu este afiat. 7otivul este c am omis intenionat e#tensia )gif a fiierului pentru a e#emplifica utilitatea atributului alt. ,rin urmare, dac dintr"un motiv oarecare, imaginea nu se ncarc n pagin, se ncarc mai greu, cest atribut permite afiarea unui te#t

sau este vizualizat cu un bro;ser care nu suport grafica, n zona rezervat imaginii va fi afiat te#tul specificat ca valoare a atributului alt. )e asemenea, te#tul specificat ca valoare pentru atributul alt va fi afiat i n cadrul unei mici ferestre care se desc!ide n momentul cnd cursorul mouse"ului este meninut deasupra imaginii. <igura 1.H red aspectul paginii n cazul cnd atributul src are valoarea corect: %orangerose.gif%. -n alt motiv pentru care este indicat folosirea atributului alt este acela c vizitatorul paginii are posibilitatea de a vedea nc nainte de ncrcarea complet a imaginii ce anume se va afia n zona respectiv. stfel, el are posibilitatea de a atepta ncrcarea complet a imaginii sau de a trece la alt pagin. 4. @imensionarea ima&inii )imensionarea imaginii se realizeaz cu ajutorul atributelor Fidt) " prin care se stabilete limea imaginii i )ei/)t " prin care se stabilete nlimea imaginii. =n E#emplul 1.H sunt precizate i dimensiunile imaginii incluse n document. (e observ c dimensionarea imaginilor se face n pi#eli. Este, desigur, posibil, ca dimensionarea s se fac n procente, ca i la liniile orizontale, de e#emplu. 6otui, n afara unor cazuri speciale, aceasta este considerat o practic greit, deoarece bro;serul va redimensiona imaginea iar rezultatele vor fi de calitate slab. ( emplul 2. * L5678M L5E )M L6I68EMimaginiHL?6I68EM L?5E )M L'$)KM L5C alignS%center%M)imensionarea imaginilorL?5CML5+M LI79 srcS%tiger.gif% ;idt!S%HGB% !eig!tS%FGB%ML,M L?'$)KM L?5678M A. $bservnd <igura 1.J care red aspectul paginii descrise mai sus putem remarca faptul c setarea dimensiunilor a afectat calitatea imaginii deoarece dimensiunile originale ale imaginii erau mai mici. )imensiunile originale ale imaginii tiger)gif, determinate cu ajutorul unui editor grafic, sunt: limeSFBB pi#eli, nlimeSCFG pi#eli. )ac dimensiunile imaginii n pagin sunt setate la valori considerabil mai mari dect dimensiunile imaginii originale calitatea imaginii incluse n pagin va avea de suferit. &oncluzia care se impune este c dimensionarea imaginilor din pagin trebuie s se fac la valori ct mai apropiate de dimensiunile iniiale ale imaginilor. U putei ntreba atunci, de ce mai este necesar includerea atributelor de dimensionare a imaginii. >u numai c este necesar, dar este considerat o practic defectuoas absena lor din cadrul etic!etei LI79M. 7otivul este acela c includerea dimensiunilor imaginii ofer bro;serului posibilitatea de a rezerva spaiu pentru imagine i de a ncepe ncrcarea te#tului simultan cu ncrcarea imaginii. )ac atributele de dimensionare nu sunt prezente, bro;serul va efectua nite pai suplimentari pentru a calcula spaiul din pagin necesar afirii imaginii. )in acest motiv afiarea te#tului nu va putea ncepe dect dup ce imaginea este ncrcat n ntregime.

Este indicat s evitam o asemenea situaie deoarece imaginile se ncarc mai greu dect te#tul i muli vizitatori ai paginii nu vor atepta suficient pentru ca ntreaga pagin /imagini i te#t3 s fie ncrcat. ). 1!inierea ima&inii i a textu!ui linierea unei imagini n raport cu te#tul din pagin se realizeaz prin intermediul atributului ali/n, care poate lua urmtoarele valori: left " aliniere la stnga] te#tul este dispus n partea dreapt a imaginii ncadrnd imaginea rig!t " aliniere la dreapta] te#tul este dispus n partea stnga a imaginii ncadrnd imaginea top " aliniere deasupra] partea de sus a imaginii se aliniaz cu prima linie a te#tului ce precede imaginea middle " aliniere la mijloc] mijlocul imaginii se aliniaz cu prima linie a te#tului ce precede imaginea. bottom " aliniere dedesubt, la baz] partea de jos a imaginii se aliniaz cu prima linie a te#tului. Ualorile left, rig!t, i bottom ale atributului align permit ca te#tul s fie dispus n jurul imaginii, n vreme ce top i middle nu permit acest lucru. E#emplul 1.J ilustreaz modul de aliniere bottom, aa cum rezult din <igura 1.G. ( emplul 2. , L5678M L5E )M L6I68EMimaginiJL?6I68EM L?5E )M L'$)KM L5C alignS%center%M linierea imaginii si te#tului /bottom3L?5CML5+M LI79 srcS%..?Imagini?eagle!ed.gif% alignS%bottom% ;idt!S%CBB% !eig!tS%AA% altS%vultur%M Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t. Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t. L?'$)KM L?5678M <igura 1.A red modul de aliniere left iar <igura 1.1 modul de aliniere rig!t. )in <igura 1.0 i <igura 1.D putei observa modurile de aliniere top i middle precum i faptul c aceste alinieri nu permit dispunerea te#tului n jurul imaginii. lte dou atribute utile, care servesc la alinierea imaginii fa de restul elementelor din pagin, sunt atributele )space i vspace. Ele precizeaz distana, n pi#eli, pe orizontal, respectiv pe vertical, dintre imagine i restul elementelor din pagin. =n E#emplul 1. J vom sc!imba modul de aliniere n cadrul etic!etei LI79M i vom aduga atributele !space, respectiv vspace, astfel: LI79 srcS%..?Imagini?eagle!ed.gif% vspaceS%CB% !spaceS%CB%M alignS%left% ;idt!S%CBB% !eig!tS%AA% altS%vultur%

spectul paginii va fi cel din <igura 1.CB. i observat, probabil, c dintre valorile pe care le poate lua atributul align lipsete valoarea center. =ntr"adevr, alinierea unei imagini la centrul paginii nu se poate face prin intermediul atributului align. &entrarea unei imagini se poate realiza numai dac este izolat de te#tul care o nconjoar. ,entru aceasta se poate folosi etic!eta L&E>6E+M sau se poate include imaginea ntr"un bloc paragraf sau ntr"un bloc L)IUM avnd atributul align setat la valoarea center. E#emplul 1.G ilustreaz acest mod de aliniere folosind etic!eta L)IUM aspectul paginii fiind cel din <igura 1.CC. ( emplul 2. L5678M L5E )M L6I68EMimaginiGL?6I68EM L?5E )M L'$)KM L5C alignS%center%M&entrarea unui imaginiL?5CML5+M Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t. L)IU alignS%center%M LI79 srcS%..?Imagini?devil.gif% ;idt!S%AJ% !eig!tS%AJ% altS%dracusor%M L?)IUM Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t.Imagine te#t. L?'$)KM L?5678M E#emplul 1.A ilustreaz modul n care pot fi aliniate dou imagini fa de te#tul din pagin. )in <igura 1.CF putei observa c, dac alinierea la stnga a imaginii mpreun cu folosirea atributelor !space i vspace conduce la un aspect ordonat al elementelor, aspectul te#tului n raport cu imaginea aliniat la dreapta depinde de dimensiunea ferestrei bro;serului. ( emplul 2. 0 L5678M L5E )M L6I68EMimaginiAL?6I68EM L?5E )M L'$)KM L5C alignS%center%M linierea a doua imaginiL?5CML5+M LI79 srcS%..?Imagini?mtnscene.jpg% alignS%left% ;idt!S%FBB% !eig!tS%CJJ% alignS%left% !spaceS%CB% vspaceS%CB%M Imagine te#t. Imagine te#t. Imagine te#t. Imagine te#t.Imagine te#t. Imagine te#t. Imagine te#t. Imagine te#t. LI79 srcS%..?Imagini?sunscene.jpg% alignS%rig!t% ;idt!S%FBF% !eig!tS%CHF% !spaceS%CB% vspaceS%CB%M Imagine te#t. Imagine te#t. Imagine te#t. Imagine te#t.Imagine te#t. Imagine te#t. Imagine te#t. Imagine te#t.Imagine te#t. Imagine te#t. Imagine te#t. Imagine te#t.Imagine te#t. Imagine te#t. Imagine te#t. Imagine te#t.Imagine te#t. Imagine te#t. Imagine te#t. Imagine te#t.Imagine te#t. Imagine te#t. Imagine te#t. Imagine te#t. L?'$)KM L?5678M

+. (ma&ini 'o!osite ca 'ond 8<ac>&round7 a! pa&inii $ imagine poate fi utilizat i pentru a stabili fondul unei pagini *eb. =n acest scop se folosete atributul bac?/round al etic!etei L'$)KM, avnd ca valoare adresa -+8 a imaginii. Imaginea se multiplic aliniat /tiling3 pe orizontal i pe vertical pn umple ntregul ecran. E#emplul 1.1 ilustreaz utilizarea atributului bacIground. ( emplul 2. 2 L5678M L5E )M L6I68EMimagini1L?6I68EM L?5E )M L'$)K bacIgroundS%..?Imagini?silI.jpg%M L5C alignS%center%MImaginea ca fond al paginiiL?5CML5+M <ond de matase... L?'$)KM L?5678M <igura 1.CH red aspectul unei pagini care folosete ca fundal o imagine. ,. (ma&ini 'o!osite ca !e&*turi ,entru a folosi o imagine drept legtura se procedeaz ca n urmtorul e#emplu: L !refS%tabelVculori.!tml%M LI79 srcS%prism.gif% ;idt!S%CBB% !eig!tS%0B% altS%culori%M L? M ("a folosit etic!eta L M prin intermediul creia am creat legtura cu fiierul tabelVculori.!tml. =ntre etic!etele L M i L? M am inclus o imagine care nlocuiete te#tul e#plicativ pe care vizitatorul urmeaz s fac clicI cu mouse"ul. Imaginea servete, deci, ca legtur ctre o anumit pagin. Imaginea folosit ca legtura este prism)gif iar pagina spre care este fcut legtura este tabelGculori)html. =n mod prestabilit imaginea utilizat pe post de zon activ este nconjurat de un c!enar avnd culoarea unei legturi /albastru3. )ac stabilim pentru atributul border al etic!etei valoarea %B% acest c!enar dispare. E#emplul 1.0 prezint codul complet. ( emplul 2. 4 L5678M L5E )M L6I68EMimagini0L?6I68EM L?5E )M L'$)KM L5C alignS%center%M Imagini cu legaturi L?5CML5+M L'+M m pus o imagine cu legatura pe paginaL,M L !refS%tabel culori.!tml%M LI79 srcS%..?Imagini?prism.gif% ;idt!S%CBB% !eig!tS%0B% altS%culori%M L? M L?'$)KM L?5678M =n <igura 1.CJ putei observa modul n care funcioneaz imaginea folosit ca legtur n e#emplul de mai sus.

3. (ma&ini!e miniatura!e 8t/um<nai!s9 )ac ntr"o pagin *eb este necesar afiarea unui numr mare de imagini, ncrcarea paginii se va face destul de greu. )e multe ori, vizitatorii paginii nu vor avea rbdarea necesar pentru a atepta ncrcarea integral a paginii. $ soluie de compromis frecvent aplicat pentru scurtarea timpului de ncrcare a unei pagini ce prezint multe imagini o reprezint utilizarea imaginilor miniaturale /thumbnail"uri3. $ imagine thumbnail este o versiune de dimensiuni reduse a unei imagini mai mari, care se ncarc mult mai rapid i care, dei este de dimensiuni mici i de calitate sczut, permite vizitatorului s afle ce anume reprezint i s decid dac este interesat sau nu s desc!id versiunea integral.. Imaginea miniatural reprezint o legtur spre fiierul cu imaginea original din care provine. =n cazul n care vizitatorul paginii dorete s vad imaginea original, o poate desc!ide efectund clicI imaginea thumbnail) +ealizarea imaginilor miniaturale se poate face fie prin micorarea proporional a imaginilor, fie prin reducerea lor la o dimensiune prestabilit /strech3 c!iar dac imaginea se distorsioneaz, n cazul n care se dorete, de pild, ca toate thumbnail!urile dintr"o pagin s aib aceleai dimensiuni. E#ist dou metode pentru a plasa o imagine thumbnail n pagin: folosind dou imagini, una fiind imaginea thumbnail iar cealalt, imaginea original folosind o singur imagine, redimensionat /micorat3 direct n pagin

0o!osirea a dou* ima&ini $ imagine thumbnail este foarte uor de realizat. $ricare ar fi programul de grafic pe care l folosii, tot ceea ce avei de fcut este s gsii opiunea Resi8e /care de obicei face parte din meniul 5dit sau 'mage3 i s precizai n caseta de dialog care se desc!ide, dimensiunile dorite. Uei observa c e#ist de regul o opiune setabil pentru pstrarea proporionalitii cu dimensiunile. )ac este activat, dup stabilirea uneia dintre dimensiuni / idth, de e#emplu3, cealalt /height3 este calculat automat. =n E#emplul 1.D este plasat o imagine thumbnail n pagin, folosind prima metod, <igura 1.CG ilustrnd funcionarea imaginii thumbnail. ( emplul 2. 5 L5678M L5E )M L6I68EMimaginiDL?6I68EM L?5E )M L'$)KM L5C alignS%center%M6!umbnails " doua imaginiL?5CML5+M L,M L !refS%..?Imagini?zdog.gif%M LI79 srcS%..?Imagini?zdogVt!.gif%ML? M L?'$)KM L5678M <iierul 8dogGth)gif conine imaginea thumbnail care este folosit ca legtur, pentru a referi imaginea original, 8dog)gif. )eoarece imaginea thumbnail este folosit ca o legtura ctre imaginea original, n jurul ei este afiat un c!enar prestabilit albastru. )ac dorii ca acest c!enar s nu mai fie afiat, putei folosi atributul border al etic!etei LI79M setat la valoarea %B%. Imaginea original se va

desc!ide n aceeai fereastr cu pagina n care este plasat imaginea thumbnail. ,entru a reveni n pagin, trebuie s apsai butonul 1ack al bro;serului. 0o!osirea unei sin&ure ima&ini ceast metod este adesea preferat, deoarece folosete un singur fiier, cel care conine imaginea original, miniaturizarea ei fcndu"se c!iar n pagin, cu ajutorul atributelor ;idt! i !eig!t. Este o metoda mai eficient i mai rapid, deoarece imaginea de dimensiuni mari care urmeaz a fi afiat este deja ncrcat n memoria cache a bro;serului i este imediat disponibil pentru afiare. =n e#emplul urmtor /E#emplul 1.CB3 am folosit o singur imagine pentru a ncrca att imaginea thumbnail ct i pe cea cu dimensiunile originale. spectul paginii este redat n <igura 1.CA. ( emplul 2. 1> L5678M L5E )M L6I68EMimaginiCBL?6I68EM L?5E )M L'$)KM L5C alignS%center%M6!umbnails " o singura imagineL?5CML5+M L,M L !refS%..?Imagini?zdog.gif%M LI79 srcS%..?Imagini?zdog.gif% ;idt!S%1B% !eig!tS%1A%ML? M L?'$)KM L5678M )up cum se poate observa, am creat un linI /cu ajutorul etic!etei L M3 la fiierul 8dog)gif care conine imaginea original. m folosit drept legtur aceeai imagine, dar redimensionat, folosind atributele ;idt! i !eig!t. =n e#emplul anterior, imaginea thumbnail este ncrcat prima. =n momentul cnd vizitatorul face click pe ea, este ncrcat imaginea cu dimensiunile originale. vantajul ultimei metode este faptul c imaginea este ncrcat de la nceput i redimensionat pentru thumbnail, ceea ce face ca afiarea imaginii cu dimensiunile originale s fie mai rapid. 4. (ma&ini!e "ideo ,entru a insera o imagine video ntr"un document 5678 se folosesc atributele dGnsrc, controls, loop i start ale etic!etei LI79M. tributul dGnsrc nlocuiete atributul src i permite inserarea n documentul 5678 a unei imagini video n acelai mod n care este inserat o imagine static. Ualoarea atributului dEnsrc este adresa -+8 a fiierului video care va fi inclus n pagin conform sinta#ei: LI79 dEnsrcS%-+8VfisierVvideo%M cest atribut este o e#tensie Internet E#plorer i nu este recunoscut de bro;serele >etscape. ,entru a vizualiza o imagine video in!line ntr"un bro;ser >etscape, vizitatorul paginii trebuie s instaleze un program au#iliar de tip plug!in. )ac programul plug!in nu este disponibil pe computerul vizitatorului, imaginea video nu va putea fi afiat. (ingurul format de fiiere video care este suportat de e#tensiile Internet E#plorer este 1<; /0udio 3ideo 'nterleave3, deoarece acesta este formatul de redare care este inclus n bro;ser )

&onstrucia de mai jos include ntr"un document 5678 fiierul video introducere)avi care se afl n folderul 3ideo: LI79 dEnsrcS%..?Uideo?introducere.avi%M Efectul acestei etic!ete este desc!iderea de ctre bro;ser a unei ferestre de vizualizare n interiorul paginii *eb, fereastr n care va rula clipul video introducere)avi, inclusiv sunetul, dac acesta face parte din clip i computerul vizitatorului este setat s redea sunetele. &a i imaginile obinuite, imaginea video este afiat pe msur ce este ncrcat. )eoarece nici un alt bro;ser n afar de Internet E#plorer nu recunoate aceast e#tensie, este recomandat s includei n cadrul etic!etei LI79M i atributul src prin care s furnizai o imagine static ce va fi afiat n acelai cadru. 'ro;serele care nu recunosc e#tensia dEnsrc vor afia imaginea static pe cnd Internet E#plorer va afia imaginea video. $rdinea n care apar cele dou atribute nu are importan. )e e#emplu: LI79 dEnsrcS%..?Uideo?intro.avi% srcS%..?Imagini?intro.gif%M =n mod normal, Internet E#plorer red clipul video ntr"o fereastr n care nu sunt afiate nici un fel de butoane de control. -tilizatorul poate relua, opri sau continua redarea clipului efectund clicI dreapta cu mouse"ul n interiorul ferestrei. ,entru a aduga butoane de control acestei ferestre se utilizeaz atributul controls al etic!etei LI79M. tributul controls nu are alocat nici o valoare, prezena sa avnd doar scopul de a aduga butoanele de control asemntoare celor de la aparatele video. )e e#emplu: LI79 dEnsrcS%..?Uideo?intro.avi% srcS%..?Imagini?intro.gif% controlsM &lipul video inclus n pagin este redat de bro;ser o singur dat, de la nceput pn la sfrit. ,entru a repeta redarea clipului de un anumit numr de ori este folosit atributul loop. Ualorile posibile ale atributului sunt: un numr ntreg care reprezint numrul de reluri ale clipului infinite, caz n care clipul este redat pn cnd utilizatorul stopeaz derularea sa apsnd butonul stop al ferestrei de vizualizare /n cazul cnd fereastra conine butoanele de control3 sau efectueaz clicI dreapta cu mouse"ul n fereastra de vizualizare. E#emplul de mai jos ilustreaz modul n care poate fi setat atributul loop: LI79 dEnsrcS%..?Uideo?intro.avi% srcS%..?Imagini?intro.gif% controls loopS%infinite%M a cum am precizat, redarea imaginii video ncepe imediat ce aceasta a fost complet ncrcat n pagin. ,entru a sc!imba acest comportament se folosete atributul start care poate avea valorile: mouseover, situaie n care derularea imaginii video ncepe n momentul cnd mouse"ul este plasat deasupra imaginii fileopen, valoarea predefinit, situaie n care derularea imaginii ncepe imediat dup ncrcarea n pagin &ele dou valori pot fi combinate pentru a se realiza redarea imaginii mai nti imediat dup ncrcarea n pagin i apoi de fiecare dat cnd mouse"ul este plasat deasupra ei, ca n e#emplul urmtor: LI79 dEnsrcS%..?Uideo?intro.avi% startS%fileopen, mouseover%M srcS%..?Imagini?intro.gif% controls loopS%infinite%

Imaginile video in!line pot fi tratate ca i imaginile statice. $ astfel de imagine poate fi aliniat folosind atributul ali/n, sau poate fi spaiat fa de te#tul care o nconjoar. E#emplul 1.CC ilustreaz atributele prezentate mai sus. ,agina va avea aspectul din <igura 1.C1. ( emplul 2. 11 L5678M L5E )M L6I68EMimaginiCCL?6I68EM L?5E )M L'$)KM L5C alignS%center%MImagini videoL?5CML5+M L<$>6 sizeS%J% colorS%blue%M&lipul video de mai jos face parte din jocul 5eroes HL?<$>6ML,M L&E>6E+M LI79 dEnsrcS%..?Uideo?s!ield.avi% srcS%..?Imagini?banana.gif% controls startS%fileopen, mouseover% loopS%infinite%M L?&E>6E+M L?'$)KM L?5678M 1;. Sunete!e )ac etic!eta LI79M permite afiarea unei imagini de fundal, e#ist i o etic!et care realizeaz includerea n pagina *eb a unei muzici de fundal i anume etic!eta 98@SB#A:=. ceast etic!et este, de asemenea, o e#tensie Internet E#plorer deci nu este recunoscut i e#ecutat n alte bro;sere) 'ro;serul Internet E#plorer conine un decodor de sunet ncorporat i permite integrarea prin etic!eta L'9($->)M a sunetului de fundal pentru o pagin. (inta#a etic!etei L'9($->)M este urmtoarea: L'9($->) srcS%-+8VfisierVsunet% loopS%valoare%M tributul src are drept valoare adresa -+8 a fiierului de sunet care este folosit ca fundal sonor al paginii. =n mod curent, Internet E#plorer recunoate trei tipuri de fiiere de sunet: fiiere cu e#tensia .%a" care este formatul nativ pentru ,& fiiere cu e#tensia .au, formatul nativ pentru sistemele ->IW fiiere cu e#tensia .midi, un format universal acceptat pentru codificarea sunetelor ,entru a include ntr"o pagin un fiier de sunet se procedeaz ca n e#emplul urmtor: L'9($->) srcS%..?(unet?;ellcome.;avM &a i n cazul imaginilor video in!line, fiierul de sunet este redat o singur dat, la ncrcarea paginii. ,entru redarea sa repetat se folosete atributul loop al etic!etei L'9($->)M care poate avea ca valori: un numr ntreg, care reprezint numrul de reluri ale piesei infinite, caz n care piesa muzical este reluat pn cnd utilizatorul prsete pagina sau nc!ide fereastra bro;serului.

E#ecutai E#emplul 1.CF cu un bro;ser Internet E#plorer pentru a observa efectul etic!etei L'9($->)M. )esigur, este necesar s sc!imbai adresa -+8 a fiierului de sunet specificnd un fiier e#istent pe !ard"disI"ul dumneavoastr. ( emplul 2. 1' L5678M L5E )M L6I68EMimaginiCFL?6I68EM L?5E )M L'$)KM L5C alignS%center%M7uzica de fundalL?5CML5+M L,M L<$>6 sizeS%J% colorS%red%M7uzica se va auzi pana cand veti inc!ide paginaL?<$>6M L'9($->) srcS%..?(unet?*elcomD0.;av% loopS%infinite%M L?'$)KM L?5678M 11. Su&estii pri"ind 'o!osirea ima&ini!or i e!emente!or mu!timedia &nd folosii imagini ntr"o pagin *eb, trebuie s v punei ntrebarea: %Este necesar aceast imagine sau ar fi suficient s folosesc te#t4%. &!iar dac se spune c o imagine face ct o mie de cuvinte, acest lucru nu este ntotdeauna adevrat pe *eb. =nlocuirea te#tului care conine informaiile eseniale dintr"o pagin *eb cu imagini este adesea o greeal. -n prim motiv este c nc mai e#ist bro;sere non"grafice cum este 8En#, care nu afieaz dect te#tul. poi, c!iar i n bro;serele grafice, anumii utilizatori ar putea opta, din varii motive, pentru dezactivarea afirii imaginilor. -n alt motiv ar fi acela c, din cauza duratei mari de ncrcare a fiierelor cu imagini de mari dimensiuni, unii utilizatori ar putea renuna pur i simplu la desc!iderea paginii. .i nu n ultimul rnd, deoarece, spre deosebire de te#t, imaginile pot ntmpina diverse dificulti te!nice la afiare. Imaginile dintr"o pagin *eb trebuie gndite ca nite instrumente vizuale care au rolul de a susine i ilustra coninutul scris al paginii. )e e#emplu, ntr"un catalog on!line imaginile produselor prezentate sunt eseniale pentru coninutul paginii respective. Icon"urile cu rol de legturi sau instrumente de navigaie pot reprezenta repere vizuale deosebit de utile n cadrul unui site. )ar dac o imagine nu servete unui scop bine definit n pagin, e bine s v gndii de dou ori, nainte de a o folosi. )e asemenea se recomand s fii precaut i n privina imaginilor folosite ca fundal /background3. =ntr"adevr, acestea pot oferi un aspect spectaculos paginii dumneavoastr. =ns trebuie s fii contient de faptul c o imagine folosit ca fundal va crete cu siguran timpul necesar ncrcrii paginii. )ac n cazul imaginilor in!line te#tul se poate afia naintea sau n timpul ncrcrii imaginii, la imaginile de fundal afiarea celorlalte elemente din pagin nu va putea ncepe dect dup ncrcarea n ntregime a fundalului. 7ai mult, spre deosebire de imaginile in!line, care pot mbogi coninutul informaional al paginilor, imaginile de fundal nu aduc cu adevrat dect foarte rar un supliment de informaie. )ei aspectul unei asemenea pagini poate fi atrgtor, de cele mai multe ori folosirea imaginilor de fundal n combinaii nefericite cu fonturi de anumite tipuri sau culori, fr contrast suficient, poate face pagina ncrcat i greu de citit.

)ac totui v decidei s folosii o imagine ca fundal al paginii este recomandat s specificai simultan i o culoare de fundal, adic s setai atributul bgcolor. stfel, dac dintr"un motiv oarecare imaginea de fundal nu se ncarc, pagina va avea totui culoarea prestabilit de dumneavoastr. &a i imaginile, i celelalte elemente multimedia trebuie folosite cu discernmnt ntr"o pagin *eb. Imaginile video au dimensiuni semnificativ mai ari dect imaginile statice, deci se ncarc mult mai ncet dect acestea astfel nct includerea lor in!line va mri considerabil timpul de ncrcare al paginii. =n plus, formatele diverse utilizate nu pot fi desc!ise ntotdeauna cu bro;serul, unele impunnd e#istena unor plug!in"uri sau c!iar unor programe speciale. $ metod de compromis recomandat este descrierea coninutului fiierului, eventual inserarea unui fragment video e#emplificativ /sample3 de dimensiuni mult mai mici, similar cumva metodei thumbnail"urilor. (e asigur o legtur i spre fiierul integral, astfel nct, dup vizualizarea e#emplului, vizitatorul s poat alege dac va atepta timpul necesar ncrcrii sale sau nu. 7uzica de fundal este de cele mai multe ori nerecomandat. <oarte muli vizitatori pot vizualiza paginile dumneavoastr avnd sunetul dezactivat. <olosirea unei muzici de fundal ncetinete ncrcarea paginii i, n plus, este foarte posibil ca muzica pe care ai ales"o s nu fie pe gustul celor care v viziteaz pagina, ba c!iar s i determine s o prseasc nainte de a citi coninutul acesteia. )ac este necesar, totui, s introducei muzic sau sunet n paginile dumneavoastr, este o prevedere neleapt s plasai fiierele de sunet separat i s asigurai legturi ctre acestea astfel nct vizitatorul s le poat audia, dac dorete. 12. (ma&ini!e i timpu! de nc*rcare a! pa&inii -nul dintre cele mai importante aspecte care trebuie luate n considerare la includerea imaginilor ntr"un document este timpul de nc$rcare a documentului. )urata de ncrcare a paginilor depinde de muli factori. )epinde de modemul i cone#iunea vizitatorului, de performanele serverului gazd, de trafic, de limea de band, etc. &um nu putei avea control asupra acestora, singurul lucru care v rmne de fcut este s v construii paginile astfel nct s aib o bun vitez de ncrcare c!iar i n cazul unui vizitator care deine o cone#iune modest ca performane. ,e lng alegerea cu foarte mult grij a imaginilor care vor fi incluse n document, mai e#ist cteva modaliti prin care poate fi ameliorat durata de ncrcare a paginii: $ptimizarea imaginilor. <olosii"v n mod judicios de instrumentele de control al imaginilor puse la dispoziie de editorul grafic folosit, optimizai dimensiunile imaginii i numrul de culori la ct mai puine posibil. =ncercai s gsii un raport optim ntre dimensiunea fiierului i calitatea imaginii. Evitai fotografiile sau imaginile de fundal de dimensiuni foarte mari. +eutilizarea imaginilor. ceast metod este eficient mai ales n cazul icon"urilor sau elementelor grafice de navigaie care sunt prezente n mai multe pagini pe parcursul unui site. &ele mai multe bro;sere rein n memoria cache elementele documentelor care urmeaz a fi afiate. stfel, dac o imagine este utilizat n mai multe pagini aceasta nu trebuie ncrcat de fiecare dat n memorie ci este disponibil pentru a fi afiat oricnd se face referirea la ea.

 )ivizarea documentelor de dimensiuni mari n mai multe documente de dimensiuni reduse. ceast regul general include i paginile care conin imagini in!line. 7ai multe documente de dimensiuni mai mici legate ntre ele prin legturi sunt mai bine acceptate de vizitatori dect un singur document foarte mare care necesit un timp de ncrcare ndelungat. +egula general acceptat este meninerea dimensiunilor unui document *eb n jurul valorii de GBXb, incluznd aici i imaginile, desigur. <olosirea imaginilor thumbnail. )ac pagina conine un mare numr de imagini, folosii imagini miniaturale care s refere imaginile originale. =n plus, ntruct imaginea original referit prin imaginea thumbnail se poate desc!ide ntr"o nou fereastr, nefiind asociat cu restul elementelor din pagin, este mai comod pentru vizitator s o salveze pe computerul propriu pentru o vizualizare ulterioar. (pecificarea dimensiunile imaginilor. =n acest mod este evitat etapa calculrii de ctre bro;ser a spaiului necesar pentru afiarea imaginii, mbuntindu"se viteza de ncrcare a paginii. 13. -e.umat <ormatele cele mai utilizate pentru fiierele grafice sunt :,E9 i 9I<. Inserarea unei imagini ntr"un document 5678 se realizeaz cu ajutorul etic!etei LI79M. (inta#a etic!etei LI79M este urmtoarea: LI79 srcS%-+8Vimagine% alignS%pozitie% ;idt!S%valoare% !eig!tS%valoare% vspaceS%valoare% !spaceS%valoare% altS%te#t% borderS%valoare% dEnsrcS%-+8VimagineVvideo% loopS%valoare% startS%valoare% controlsM unde: pagin src precizeaz locaia imaginii ;idt! i !eig!t stabilesc dimensiunile imaginii vspace i !space stabilesc distana pe vertical i orizontal fa de restul te#tului din align aliniaz imaginea fa de te#tul din jurul ei alt furnizeaz un te#t e#plicativ asupra imaginii border stabilete grosimea c!enarului imaginii dEnsrc introduce o imagine video i precizeaz locaia ei loop specific numrul de reluri ale imaginii video start precizeaz momentul nceperii redrii imaginii controls afieaz butoanele de control ale ferestrei video

Imaginile pot fi folosite ca fond al paginii cu ajutorul atributului bacIground al etic!etei L'$)KM. $ imagine poate servi drept legtur ctre un alt document 5678 prin includerea etic!etei LI79M ntre etic!etele L M L? M. $ practic des folosit este inserarea n pagin a imaginilor miniaturale care la e#ecutarea unui click pe ele desc!id imaginea original. 7uzica de fundal poate fi adugat unui document prin intermediul etic!etei L'9($->)M.

legerea imaginilor care vor fi incluse ntr"un document 5678 trebuie fcut cu grij, n funcie de rolul acestora n structura documentului i avnd permanent n vedere timpul de ncrcare al paginii. 14. Test ). a3 b3 c3 0. a3 b3 c3 2. a3 b3 c3 4. a3 b3 c3 4. a3 b3 c3 Ce etichet folosim pentru a insera o imagine 6n pagin9 LI79M L M L,I&M 0tributul src serve7te la4 poziionarea imaginii n pagin stabilirea numelui i locaiei unde se afl imaginea crearea unei legturi prin intermediul imaginii 0tributele ;idt! 7i !eig!t ale etichetei LI79M sunt folosite pentru4 dimensionarea te#tului alinierea imaginii cu te#tul dimensionarea imaginii Ce efect are absena atributelor ;idt! 7i !eig!t din eticheta LI79M9 >u se afieaz imaginea. Imaginea se afieaz pe toata suprafaa ferestrei bro;serului. 'ro;serul ateapt ncrcarea complet a imaginii nainte de a ncepe afiarea te#tului. Care dintre atributele urmtoare permit afi7area textului 6n ;urul imaginii9 top bottom middle

1;. Care dintre construciile urmtoare este folosit pentru a stabili ca fond al paginii imaginea rice)gif9 a3 b3 c3 11. LI79 bacIgroundS%rice.gif%M LI79 srcS%rice.gif% bacIgroundM L'$)K bacIgroundS%rice.gif%M Ce reali8ea8 atributul alt 6n urmtoarea construcie9

LI79 srcS%dog.gif% altS%catel%M a3 b3 c3 fieaz cuvntul catel lng imagine. fieaz cuvntul catel n spaiul rezervat imaginii. tribuie fiierului dog)gif numele catel.

12. Care dintre urmtoarele construcii plasea8 imaginea 6n stHnga 7i alinia8 textul 6n ;urul imaginii9

a3 b3 c3

LI79 srcS%moon.gif% ;rapS%left%M LI79 srcS%moon.gif% alignS%left%M LI79 srcS%moon.gifM alignS%;rap%M

13. Care dintre urmtoarele construcii are drept efect folosirea imaginii sign)gif ca legtur9 a3 b3 c3 14. a3 b3 c3 L !refS%semn.!tml%ML? MLI79 srcS%sign.gifM L srcS%semn.!tmlMLI79 !refS%sign.gif%ML? M L !refS%semn.!tmlMLI79 srcS%sign.gif%ML? M &entru a include 6n pagin o imagine video se folose7te urmtoarea construcie4 LI79 srcS%-+8Vimagine%M LI79 dEnsrcS%-+8Vimagine%M LI79 videoS%-+8Vimagine%M

;ma/ini
1. a3 '. b3 *. c3 ,. c3 -. b3 0. c3 2. b3 4. b3 5. c3 1>. b3

Capitolul 4 Liste 8istele reprezint unele dintre cele mai obinuite elemente dintr"o pagin *eb. cestea sunt deseori folosite pentru a prezenta informaiile n mod organizat, ntr"o manier accesibil i uor de parcurs. Ele pot fi de trei tipuri: d3 e3 f3 liste ordonate /marcate prin numere sau litere3, liste neordonate /marcate prin cratime, buline sau alte simboluri3 liste de de.ini!ii, afiate fr nici un fel de marcaj.

=n interiorul etic!etelor care delimiteaz o list pot fi folosite orice alte etic!ete 5678, cum ar fi etic!ete de formatare a te#tului, legturi, imagini, etc. 1. Liste neordonate $ list neordonat$ reprezint o colecie de elemente nrudite, dispuse ntr"o ordine oarecare. -n e#emplu tipic pentru o pagin *eb este o list de linI"uri spre alte documente. cest tip de list este de fapt un bloc de te#t delimitat de etic!etele 9#L= 9J#L= /unordered listSlist neordonat3. Etic!eta de nc!idere L?-8M este obligatorie.

<iecare element al listei este introdus prin etic!eta 9L;= /list item3. &u toate c etic!eta L8IM este o etic!et container, etic!eta sa de nc!idere, L?8IM, este opional. )ac nu este prezent, la ntlnirea unei noi etic!ete L8IM se consider c vec!ea etic!et este nc!is. 8ista va fi afiat indentat fa de restul paginii i fiecare element al listei ncepe pe un rnd nou. =n mod prestabilit, fiecare element al listei va fi marcat / bulleted3 cu %bulin%. E#emplul 0.C construiete o list neordonat, aspectul su fiind cel din <igura 0.C. ( emplul 4. 1 L5678M L5E )M L6I68EMlisteCL?6I68EM L?5E )M L'$)KM L5C alignS%center%M8ista neordonataL?5CML5+M L-8M&ulori L8IM'lacI L8IM*!ite L8IM+ed L8IM9reen L8IM'lue L8IMKello; L8IM,urple L8IM Tua L?-8M L?'$)KM L?5678M Etic!etele L-8M i L8IM pot avea definit atributul tGpe care stabilete caracterul afiat n faa fiecrui element al listei. Ualorile posibile al acestui atribut sunt: g3 !3 i3 circle /cerc3 disc /disc plin3 " valoarea prestabilit sTuare /patrat3

8ista din E#emplul 0.F are atributul tEpe setat la valoarea %sTuare%. 8ista este marcat aa cum se poate vedea n <igura 0.F ( emplul 4. ' L5678M L5E )M L6I68EMlisteFL?6I68EM L?5E )M L'$)KM L5C alignS%center%M tributul tEpe la liste neordonateL?5CML5+M L-8 tEpeS%sTuare%M8imbaje de programare L8IM& L8IM&YY L8IM,ascal L8IM 'asic L8IM,erl L?-8M L?'$)KM L?5678M

(etarea atributului tEpe pentru un item al listei nlocuiete tipul de marcaj cu tipul specificat pentru acel item. =n <igura 0.H putei observa efectul setrii atributului tEpe pentru un item individual la listei. ( emplul 4. * L5678M L5E )M L6I68EMlisteHL?6I68EM L?5E )M L'$)KM L5C alignS%center%M tributul tEpe la itemul unei liste L?5CML5+M L-8 tEpeS%sTuare%M8imbaje de programare L8IM& L8IM&YY L8IM,ascal L8I tEpeS%circle%M'asic L8IM,erl L?-8M L?'$)KM L?5678M 0orme particu!are de !iste neordonate j3 Lista de directoare " este o list introdus prin etic!eta 9:;%= 9J:;%=. Etic!eta a fost iniial utilizat pentru alctuirea listelor de fiiere. 7ulte bro;sere nu fac nici o diferen ntre etic!etele L)I+M i L-8M, efectul lor fiind acelai. I3 Lista de meniuri " utilizeaz etic!eta 9M(A#=. -nele bro;sere afieaz lista doar n format uor diferit fa de listele neordonate, altele ns folosesc c!iar un fel de meniu grafic de tip pull!do n pentru afiarea acestor liste. 2. Liste ordonate $ list ordonat$ este un bloc de te#t delimitat de etic!etele 9BL= 9JBL= /ordered list " list ordonat3, etic!eta de nc!idere fiind obligatorie. <iecare element al listei este iniiat de etic!eta 9L;= /list item3. &a i n cazul listelor neordonate, lista va fi indentat fa de restul paginii *eb i fiecare element al listei va ncepe pe o linie nou. )iferena fa de listele neordonate este aceea c n acest caz marcarea elementelor se face prin cifre, nu prin simboluri. E#emplul 0.J afieaz o list ordonat, marcat cu cifre arabe aspectul ei fiind cel din <igura 0.J. ( emplul 4. , L5678M L5E )M L6I68EMlisteJL?6I68EM L?5E )M L'$)KM L5C alignS%center%M8ista ordonataL?5CML5+M L$8M&astigatorii concursului sunt: L8IM,opescu 7aria L8IMIonescu Ion L8IM'ratu na L?$8M L?'$)KM

L?5678M ,entru etic!etele L$8M i L8IM se poate seta atributul tGpeR care stabilete tipul de caractere utilizate pentru ordonarea listei. Ualorile posibile ale acestui atribut sunt: " pentru ordonare de tipul , ' , &.../litere mari3 a " pentru ordonare de tipul a , b , c.../litere mici3 I " pentru ordonare de tipul I , II , III , IU.../cifre romane mari3 i " pentru ordonare de tipul i , ii , iii , iv.../cifre romane mici3 C " pentru ordonare de tipul C , F , H.../cifre arabe " opiune prestabilit3 )e asemenea etic!eta L$8M poate avea setat atributul start, care stabilete valoarea iniial a secvenei de ordonare. Ualoarea acestui atribut trebuie s fie un numr ntreg pozitiv. E#emplul 0.G construiete o list numerotat cu cifre romane mari ncepnd de la poziia a treia. spectul paginii care conine aceast list este redat n <igura 0.G. ( emplul 4. L5678M L5E )M L6I68EMlisteGL?6I68EM L?5E )M L'$)KM L5C alignS%center%M tributul tEpe la liste ordonateL?5CML5+M L$8 tEpeS%I% startS%H%M7anuale L8IMIstorie L8IM9eografie L8IM'iologie L8IM&!imie L?$8M L?'$)KM L?5678M &a i n cazul listelor neordonate, setarea atributului tEpe pentru un anumit item al listei nlocuiete tipul de numerotare stabilit pentru ntreaga list cu tipul specificat pentru acel element. 3. (m<ricarea !iste!or =n cadrul unei liste, fie ea ordonat sau neordonat, se pot include alte liste, procedeu numit imbricare. <iecare list nou inclus n precedenta se va afia indentat fa de nivelul listei anterioare. 8istele pot fi imbricate n toate modurile dorite, ca n E#emplul 0.A. <igura 0.A red aspectul listei construite n acest e#emplu. ( emplul 4. 0 L5678M L5E )M L6I68EMlisteAL?6I68EM L?5E )M L'$)KM L5C alignS%center%M8iste imbricateL?5CML5+M L-8M L8IM'ulina C L$8M L8IM>umarul C L8IM>umarul F

L?$8M L8IM'ulina F L8IM'ulina H L-8 tEpeS%sTuare%M L8IM,atrat C L8IM,atrat F L8IM,atrat H L?-8M L8IM'ulina J L?-8M L?'$)KM L?5678M 4. Liste de de'iniii 8istele de de.ini!ii reprezint un tip special de liste n care elementele listei nu sunt nici numerotate /ca n listele ordonate3, nici marcate prin buline /ca n listele neordonate3 i care prezint dou nivele de indentare. 8istele de definiii sunt blocuri de te#t incluse ntre etic!etele 9:L= 9J:L= /definition list3, etic!eta de nc!idere fiind obligatorie. <iecare element al listei este introdus prin etic!eta 9:T= /definition term3. <iecare element introdus prin etic!eta L)6M conine la rndul su un numr de elemente care l definesc, introduse prin etic!eta 9::= /definition description3. &a i n cazul etic!etei L8IM, etic!etele de nc!idere L?)6M i L?))M sunt opionale. =n E#emplul 0.1 este construit o list de definiii. ( emplul 4. 2 L5678M L5E )M L6I68EMliste1L?6I68EM L?5E )M L'$)KM L5C alignS%center%M8iste de definitiiL?5CML5+M L)8M L)6MIarna L))M>inge L))ME frig L))Mgiua e mai scurta dect noaptea L)6M,rimavara L))M>atura se trezeste la viata L))MInfloresc pomii L))M(e intorc pasarile calatoare L)6MUara L))M6otul e verde L))ME foarte cald L))Mgiua e mai lunga dect noaptea L)6M6oamna L))M(e coc fructele L))M(e strange recolta L))M&ad frunzele L?)8M L?'$)KM

L?5678M spectul listei de definiii de mai sus este cel din <igura 0.1. Etic!etele L)8M i L?)8M marc!eaz nceputul i sfritul listei, termenii care fac parte din list /Iarna, ,rimvara, Uara, 6oamna 3 sunt introdui prin etic!eta L)6M iar definiiile termenilor, prin etic!etele L))M. (e pot realiza liste ale cror elemente s fie linI"uri, imagini sau blocuri de te#t. =n E#emplul 0.0, elementele listei sunt imagini, aa cum se poate vedea n <igura 0.0. ( emplul 4. 4 L5678M L5E )M L6I68EMliste0L?6I68EM L?5E )M L'$)KM L5C alignS%center%M8iste de imaginiL?5CML5+M L)8M L)6M<lori L))M LI79 srcS%..?Imagini?roseC.jpg% ;idt!S%CFB% !eig!tS%CFB%M L))M LI79 srcS%..?Imagini?orangerose.gif% ;idt!S%CFB% !eig!tS%CFB%M L)6M6e#turi L))M LI79 srcS%..?Imagini?silI.jpg% ;idt!S%CFB% !eig!tS%CFB%M L))M LI79 srcS%..?Imagini?lace.gif% ;idt!S%CFB% !eig!tS%CFB%M L?)8M L?'$)KM L?5678M E#emplul 0.D creeaz dou liste imbricate de legturi. spectul paginii care conine aceast list este redat n <igura 0.D. ,utei testa direct funcionarea listei dac ai salvat fiierele 5678 construite la capitolele anterioare sub numele specificat n blocul L6I68EM al fiecrui document. =n cazul cnd ai preferat alte denumiri pentru fiiere, putei sc!imba numele fiierelor prezente n cadrul e#emplului cu propriile dumneavoastr fiiere. ( emplul 4. 5 L5678M L5E )M L6I68EMlisteDL?6I68EM L?5E )M L'$)KM L5C alignS%center%M8iste de legaturiL?5CML5+M L$8 tEpeS%I%M L8IM&ulori L$8M L8IML !refS%culoriC.!tml%M&uloarea fundaluluiL? M L8IML !refS%culoriF.!tml%M&uloarea te#tuluiL? M L8IML !refS%culoriH.!tml%M&uloarea legaturilorL? M L?$8M L8IM<onturi L$8M

L8IML !refS%fonturiC.!tml%MEtic!eta <$>6L? M L8IML !refS%fonturiF.!tml%MEtic!eta ' (E<$>6L? M L8IML !refS%fonturiJ.!tml%MEtic!ete de accentuare a te#tuluiL? M L?$8M L?$8M L?'$)KM L?5678M ). -e.umat =ntr"o pagin *eb pot fi introduse diverse tipuri de liste: l3 8iste neordonate prin etic!eta L-8M L?-8M, marcate prin simboluri de tip buline, cercuri sau ptrate m3 8iste ordonate prin etic!eta L$8M L?$8M marcate prin cifre arabe, cifre romane mari sau mici, litere mari sau mici n3 8iste de definiii prin etic!eta L)8M L?)8M nemarcate Elementele listelor ordonate i neordonate se introduc prin etic!eta L8IM. Elementele listelor de definiii se introduc prin etic!etele L)6M i L))M. 8istele pot conine orice tip de elemente: te#t, imagini, linI"uri sau alte liste /n acest caz obinndu"se liste imbricate3. +. Test 1-. a3 b3 c3 5ticheta L-8M se folose7te pentru a iniia4 o list ordonat o list neordonat dou liste imbricate

Care dintre urmtoarele afirmaii este fals9 a3 b3 c3 Etic!eta L8IM servete pentru a introduce fiecare element al unei liste ordonate. Etic!eta L8IM servete pentru a introduce fiecare element al unei liste neordonate. Etic!eta L8IM servete pentru a introduce fiecare element al unei liste de definiii.

:n construcia L-8 tEpeS%sTuare%M ce rol are atributul tEpe9 a3 b3 c3 &onstruiete o list neordonat. (tabilete caracterul care va fi afiat n faa fiecrui element al listei. &onstruiete o list care are ca elemente imagini.

O list ordonat este introdus prin eticheta4 a3 b3 c3 L-8M L$8M L)8M

Ce rol are atributul tEpe 6n urmtoarea construcie4 L$8 tEpeS%a%M9

a3 b3 c3

&onstruiete o list de litere care ncepe cu caracterul %a%. &onstruiete o list ordonat. (tabilete faptul c elementele listei vor fi marcate cu litere mici.

Ce este incorect 6n exemplul urmtor9 L-8M L8IM8imbaje de programare L$8M L8IM&YY L8IM,erl L8IM:ava L?$8M L8IM(isteme de operareM L$8M L8IM7()os L8IM-ni# L?-8M L?$8M a3 b3 c3 >u este permis imbricarea listelor neordonate cu liste ordonate. Este absent etic!eta de nc!idere L?8IM. Etic!etele L-8M i L$8M nu sunt nc!ise corect.

O list de definiii se introduce prin eticheta4 a3 b3 c3 L-8M L)6M L)8M

Care este ordinea corect 6n care se introduc elementele unei liste de definiii9 a3 b3 c3 a3 L)8M L)6M L))M b3 L))M L)6M L)8M c3 L)6M L)8M L))M

Ce reali8ea8 urmtoarea construcie9 L-8M L8IMLI79 srcS%picC.gif%M L8IMLI79 srcS%picF.gif%M L?-8M a3 b3 c3 &onstruiete o list de imagini marcate prin buline. &onstruiete o list de linI"uri ctre imaginile specificate. >imic, deoarece este incorect ca elementele unei liste s fie imagini.

Cum sunt marcate elementele unei liste de definiii9 a3 b3 c3 prin buline prin numere nu sunt marcate

Liste
1. b3 '. c3 *. b3 ,. b3 -. c3 0. c3 2. c3 4. a3 5. a3 1>. c3

Capitolul 9 Tabele
Tabelul este un element structural de baz n alctuirea unei pagini *eb. =n cadrul unui tabel pot fi incluse oricare dintre elementele care fac parte din corpul unui document 5678: te#t, imagini, linii orizontale, titluri, legturi, alte tabele, etc. 6abelele constituie un instrument e#trem de util de organizare a paginii *eb, realiznd alinierea elementelor i plasarea lor n locurile dorite de designerul paginii. -n tabel este o gril dreptung!iular format din linii i coloane. &aseta format la intersecia unei linii cu o coloan se numete celul$. $ linie a tabelului este format dintr"un ir de celule aliniate pe orizontal, iar o coloan$ este format dintr"un ir de celule aliniate pe vertical. &elulele tabelului conin date /te#t, imagini, linI"uri3, fiecare celul avnd propriile opiuni pentru culoarea fondului, culoarea te#tului, alinierea te#tului etc.

1. Crearea unui tabel

,entru a insera un tabel ntr"un document 5678 se folosesc etic!etele corespondente <TABLE> </TABLE>. Etic!eta <TABLE> este o etic!et container, deci etic!eta de final este obligatorie. bsena ei face ca tabelul s nu fie afiat corect. ,entru a insera o linie ntr"un tabel se folosesc etic!etele <TR> </TR> /table ro 3. <olosirea etic!etei de nc!idere </TR> este opional. a cum spuneam, fiecare linie de tabel este format din mai multe celule ce conin date. $ celul de date se introduce cu etic!eta <TD> </TD> /table data3. Etic!eta de nc!idere </TD> este de asemenea opional. =n E#emplul D.C am construit un tabel format din patru linii, fiecare linie avnd cte dou celule de date. spectul tabelului este redat n <igura D.C.
( emplul 5. 1

<HTML> <HEAD> <TITLE>tabele1</TITLE> </HEAD> <BODY> <H1 align="center">Crearea unui tabel</H1><HR>

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

11 11 1 !1 ! "1 "

=n mod prestabilit, un tabel nu are c!enar vizibil. ,entru a aduga un c!enar unui tabel, se utilizeaz atributul border al etic!etei <TABLE>. cest atribut poate primi ca valoare orice numr ntreg /inclusiv B3 i reprezint grosimea n pi#eli a c!enarului tabelului. )aca atributul b#r$er nu este urmat de o valoare atunci c!enarul tabelului va avea o grosime prestabilit egal cu C pi#el, iar o valoare egal cu B a atributului b#r$er semnific absena c!enarului. &nd atributul b#r$er are o valoare nenul c!enarul tabelului are un aspect tridimensional. =n E#emplul D.F este construit un tabel cu c!enar, aa cum se observ n <igura D.F. ,entru a testa funcionarea atributului b#r$er, nlocuii n e#emplul de mai jos valoarea %J% i cu alte valori. >u uitai ca dup fiecare modificare s salvai fiierul i s apsai butonul Refresh2Reload al bro;serului.
( emplul 5. '

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

&elulele unui tabel pot conine i alte elemente n afar de te#t: imagini, legturi, formulare, etc. E#emplul D.H construiete un tabel cu dou linii i dou coloane, celulele tabelului avnd drept coninut imagini. spectul tabelului este cel din <igura D.H.

( emplul 5. *

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

2. Alinierea tabelului n pagin

,entru a alinia un tabel ntr"o pagina *eb se utilizeaz atributul align al etic!etei <TABLE>, cu urmtoarele valori posibile:
le*t /valoarea prestabilit3 " te#tul care urmeaz dup punctul de inserare al tabelului va fi dispus n partea dreapt a tabelului. center " te#tul care urmeaz dup punctul de inserare al tabelului va fi afiat pe toat limea paginii, imediat sub tabel. rig%t " te#tul care urmeaz dup punctul de inserare al tabelului va fi dispus n partea stng a tabelului.

=n E#emplul D.J este ilustrat construirea unui tabel aliniat la dreapta. ,agina va avea aspectul din <igura D.J.
( emplul 5. ,

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

)istana dintre tabel i celelalte elemente din pagina *eb poate fi stabilit cu ajutorul atributelor
hspace i vspace al etic!etei <TABLE>. Ualoarea atributului %(,ace poate fi orice numr pozitiv, inclusiv B, i reprezint distana pe

orizontal dintre tabel i celelalte elemente ale paginii *eb.

nalog, valoarea atributului +(,ace reprezint distana pe vertical dintre tabel i celelalte elemente ale paginii. tributele %(,ace i +(,ace sunt recunoscute numai de bro;serele >etscape. E#emplul D.G ilustreaz utilitatea celor dou atribute.
( emplul 5. -

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

,entru a observa efectul celor dou atribute editai acest e#emplu i vizualizai"l cu un bro;ser >etscape. tributele nefiind recunoscute de Internet E#plorer, aspectul paginii la vizualizarea cu acest bro;ser va fi cel din <igura D.G.

3. Dimensionarea unui tabel

)imensiunile unui tabel " limea i nlimea " pot fi stabilite e#act prin intermediul atributelor width i height ale etic!etei <TABLE>. Ualorile acestor atribute pot fi: numere ntregi pozitive reprezentnd limea respectiv nlimea n pi#eli a tabelului numere ntregi ntre C i CBB, urmate de semnul 2, reprezentnd procente din limea i nlimea total a paginii. Iat un e#emplu de tabel cu nlimea de FBB de pi#eli i limea egal cu GB2 din limea paginii /E#emplul D.A3
( emplul 5. 0

<HTML> <HEAD> <TITLE>tabele3</TITLE> </HEAD>

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

spectul tabelului construit n documentul de mai sus este cel din <igura D.A. )imensiunile unui tabel includ i valoarea dat atributului b#r$er. )e e#emplu, un tabel cu o singur linie i o singur coloan, cu dimensiunile 6i$t%="111"7 %eig%t=".1" i avnd atributul b#r$er setat la valoarea CB, va avea drept spaiu util 0B de pi#eli pe lime i HB de pi#eli pe nlime. -na dintre cele mai frecvente utilizri a tabelelor este poziionarea unui te#t ntr"o anumit zon a paginii, prin realizarea unui tabel fr c!enar /b#r$er="1"3 cu o singur linie i o singur coloan, ca n E#emplul D.1.
( emplul 5. 2

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

=n <igura D.1 este redat aspectul tabelului construit mai sus.

4. Spaierea celulelor unui tabel

)istana dintre dou celule vecine se definete cu ajutorul atributului cellspacing al etic!etei
<TABLE>.

Ualorile acestui atribut pot fi numere ntregi pozitive, inclusiv B, i reprezint distana n pi#eli dintre dou celule vecine. Ualoarea prestabilit a atributului cell(,acing este de F pi#eli. E#emplul D.0 ilustreaz funcionarea atributului cell(,acing. spectul tabelului este cel din <igura D.0. ,utei modifica valoarea atributului cell(,acing pentru a observa cum se spaiaz celulele n funcie de valorile pe care le dai.
( emplul 5. 4

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

)istana dintre marginea unei celule i coninutul ei poate fi definit cu ajutorul atributului cellpadding al etic!etei <TABLE>. Ualorile acestui atribut pot fi numere ntregi pozitive, i reprezint distana n pi#eli dintre marginile celulei i coninutul ei. Ualoarea prestabilit a atributului cell,a$$ing este C pi#el. E#emplul D.D construiete un tabel n care distana dintre marginea celulelor i coninutul lor este de FB de pi#eli. spectul acestui tabel este cel din <igura D.D.
( emplul 5. 5

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

5. Dimensionarea celulelor unui tabel

)imensiunile unei celule de tip <TD> sau de tip <TH> /vezi mai jos etic!eta <TH>3 pot fi stabilite e#act cu ajutorul a dou atribute ale acestor etic!ete: width pentru lime i height pentru nlime. Ualorile posibile ale acestor atribute sunt:
numere ntregi pozitive /inclusiv B3 reprezentnd dimensiunea n pi#eli a limii, respectiv a nlimii unei celule procente din limea , respectiv nlimea tabelului.

=n E#emplul D.CB am dimensionat celula CC la limea de FB2 din limea tabelului i nlimea egal cu 1G2 din nlimea lui. a cum se poate observa din <igura D.CB dimensionarea individual a unei celule va afecta dimensionarea tuturor celulelor din linia i coloana din care face parte celula

respectiv. (e observ c celula CF are limea egal cu restul de 0B2 din limea tabelului. &elula FC aflat pe aceeai coloana cu celula dimensionat are aceleai dimensiuni ca i ea.
( emplul 5. 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 coninutului unei celule se face cu ajutorul atributului align care poate lua valorile:

le*t " la stnga center " centrat , valoarea prestabilit rig%t " la dreapta

linierea pe vertical a coninutului unei celule se face cu ajutorul atributului valign care poate lua valorile:

ba(eline " la baz b#tt#& " jos &i$$le " la mijloc, valoarea prestabilit t#, " sus

ceste atribute pot fi ataate att etic!etei <TR> pentru a defini alinierea tuturor celulelor unei linii, ct i etic!etelor <TD> i <TH> /vezi mai jos etic!eta <TH>; pentru a stabili alinierea te#tului ntr" o singur celul. =n E#emplul D.CC este ilustrat funcionarea atributelor align i +align. 6e#tul din celulele primei, celei de"a doua i celei de"a patra linii a fost aliniat prin atributul align asociat liniei, iar te#tul din celulele liniei a treia a fost aliniat prin atributul align asociat fiecrei celule n parte. spectul tabelului este cel din <igura D.CC.
( emplul 5. 11

<HTML> <HEAD> <TITLE>tabele11</TITLE> </HEAD> <BODY> <H1 align="center"> Alinierea c#ntinutului celulel#r</H1><HR> <TABLE b#r$er 6i$t%=".14" %eig%t="914"> <TR align="rig%t">

<TD>$rea,ta <TD>$rea,ta <TR align="center"> <TD>centru <TD>centru <TR> <TD +align="t#,">(u( <TD +align="b#tt#&">0#( <TR align="le*t"> <TD>(tanga <TD>(tanga </TABLE> </BODY> </HTML>

)ac este prezent un atribut de aliniere ataat etic!etei <TR> i pe linia respectiv o anumit celul are propriul su atribut de aliniere, atributul de aliniere asociat etic!etei <TD> are prioritate fa de cel asociat etic!etei <TR>.

7. De inirea culorilor pentru un tabel

&uloarea de fond a unui tabel se stabilete cu ajutorul atributului bgcolor, care poate fi ataat dup cum urmeaz:
ntregului tabel prin etic!eta <TABLE>, unei linii prin etic!eta <TR> unei celule de date prin etic!eta <TD>

Ualorile pe care le poate primi atributul bgc#l#r sunt cele cunoscute pentru culori. )ac ntr"un tabel sunt definite mai multe atribute bgc#l#r, atunci prioritatea este, n ordine descresctoare, urmtoarea: C. F. H.
<TD> <TR> <TABLE> <,ri#ritatea cea &ai &ica;

=n E#emplul D.CF este ilustrat folosirea atributului bgc#l#r.

( emplul 5. 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 " </TABLE> </BODY> </HTML>

alb

)in <igura D.CF putei observa cum funcioneaz prioritatea atributului bgc#l#r. stfel, culoarea ntregului tabel a fost stabilit prin etic!eta:
<TABLE bgc#l#r="li&e">

)ac o linie nu are stabilit nici o alta culoare, culoarea liniei este verde desc!is. ,entru linia a doua a tabelului este stabilit culoarea albastru:
<TR bgc#l#r="blue">)

&elulele care fac parte din aceasta linie i care nu au stabilit o alta culoare, vor fi albastre /celula FC3. &elelalte celule vor avea culoarea stabilit e#plicit pentru ele /celula FF va fi galben3:
<TD bgc#l#r="=ell#6">

-n tabel poate avea drept fundal nu numai o culoare, ci i o imagine. cest efect se obine folosind atributul background al etic!etei <TABLE>, atributul primind ca valoare adresa -+8 a imaginii. tributul bac>gr#un$ poate fi ataat i unei linii, stabilind fundalul tuturor celulelor din linia respectiv precum i unei celule individuale, n acest caz stabilind fundalul acelei celule. E#emplul D.CH ilustreaz acest atribut, tabelul avnd aspectul redat n <igura D.CH.
( emplul 5. 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>

&ulorile c!enarului unui tabel se pot stabili folosind atributele:

bordercolor " permite stabilirea culorii pentru c!enarul unui tabel bordercolorlight " permite stabilirea culorii marginilor din stnga i de sus ale tabelului bordercolordark " permite stabilirea culorii marginilor din dreapta i de jos ale tabelului

&uloarea te#tului din fiecare celul se poate stabili cu ajutorul e#presiei:

<?O@T c#l#r="AR'B (au nu&eBcul#are">te-t</?O@T>)

E#emplul D.CJ ilustreaz folosirea acestor atribute, aspectul tabelului fiind cel din <igura D.CJ.
( emplul 5. 1,

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

m setat grosimea c!enarului tabelului la valoarea de CB pi#eli, pentru a avea un aspect tridimensional mai pronunat. &u ajutorul atributului b#r$erc#l#r$ar> am stabilit culoarea prii %umbrite% a c!enarului /marginile de jos i din dreapta3 iar cu ajutorul atributului b#r$erc#l#rlig%t, culoarea prii %luminate% a acestuia /marginile de sus i din stnga3 iar te#tul din celule l"am scris cu culori diferite, folosind etic!eta <?O@T>. &ulorile stabilite pentru c!enarul e#terior al tabelului sunt folosite i pentru a colora liniile despritoare dintre celulele tabelului. ,entru acestea partea %umbrit% este format din muc!iile de sus i din stnga iar partea %luminat% este format din muc!iile de jos i din dreapta. )ac dorim s colorm separat muc!iile care despart liniile sau celulele tabelului putem asocia atributele b#r$erc#l#r, b#r$erc#l#r$ar> i b#r$erc#l#rlig%t etic!etelor <TR> i <TD>. 1ten!ieH tributele b#r$erc#l#r, b#r$erc#l#r$ar> i b#r$erc#l#rlig%t nu sunt recunoscute de bro;serul >escape. Uizualizai pagina de mai sus cu un bro;ser >etscape pentru a observa aspectul ei.

!. "itlul unui tabel

-nui tabel i se poate ataa un titlu cu ajutorul etic!etei <CA T!"#> /table captionStitlu tabel3. ceast etic!et trebuie plasat n interiorul etic!etelor <TABLE> </TABLE>, dar nu n interiorul etic!etelor <TR> sau <TD>. 6itlul unui tabel poate fi aliniat cu ajutorul atributului align al etic!etei <CA5TIO@> care poate lua una dintre valorile:

b#tt#& " sub tabel t#, " deasupra tabelului le*t " deasupra, la stnga tabelului

rig%t " deasupra, la dreapta tabelului

=n E#emplul D.CG titlul tabelului este aliniat deasupra sa. spectul paginii este cel din <igura D.CG.
( emplul 5. 1-

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

#. Capul $e tabel
-n tabel poate avea celule cu semnificaia de cap de tabel. ceste celule sunt introduse de etic!eta <T$> /tabel headerScap de tabel3 n loc de <TD>. 6oate atributele care pot fi ataate etic!etei <TD> pot fi de asemenea ataate i etic!etei <TH>. &oninutul celulelor definite cu <TH> este scris cu caractere aldine i centrat. E#emplul D.CA ilustreaz modul n care se pot insera celule cu rol de cap de tabel. ,utei observa din e#emplu c elementele cu rol de cap de tabel pot fi plasate att pe orizontal ct i pe vertical. spectul tabelului este redat n <igura D.CA.
( emplul 5. 10

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

<TD>. <TD>111 <TD>.1 <TD>91 </TABLE> </BODY> </HTML>

1%. "abele $e orme oarecare

E#ist situaii cnd dorim ca o celul s se e#tind peste celulele vecine, pe orizontal sau pe vertical. =n acest mod se obine o singur celul cu suprafaa egal cu suma suprafeelor celulelor iniiale. cest lucru se poate realiza cu ajutorul atributelor colspan i rowspan ale etic!etelor <TD> i
<TH>.

stfel:
colspan " realizeaz e#tinderea unei celule peste celulele din dreapta ei. Ualoarea atributului

determin numrul de celule care se unific. rowspan " realizeaz e#tinderea unei celule peste celulele de sub ea. Ualoarea atributului determin numrul de celule care se unific. (unt posibile e#tinderi simultane ale unei celule pe orizontal i pe vertical. =n acest caz, n etic!etele <TD> sau <TH> vor fi prezente ambele atribute c#l(,an i r#6(,an. E#emplul D.C1 ilustreaz modul cum se realizeaz un tabel cu celule unificate.
( emplul 5. 12

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

6abelul construit n acest e#emplu are J linii i J coloane. a cum se vede n <igura D.C1, prin folosirea atributelor c#l(,an i r#6(,an configuraia tabelului s"a modificat astfel: celula CC s"a e#tins n jos peste celulele FC i HC /<TD r#6(,an="!">3, celula CF a rmas nemodificat, celula CH

s"a e#tins att spre dreapta peste celula CJ ct i n jos, peste celulele FH i FJ /<TD c#l(,an=" " r#6(,an="!">3. &elulele FF, HF i JC au rmas nemodificate iar celula JF s"a e#tins spre dreapta peste celulele JH i JJ /<TD c#l(,an="!">) Etic!etelor <TD> i <TH> li se poate ataa atributul nowrap. El interzice ajustarea automat a lungimii unei linii de te#t, astfel nct n tabel pot aprea coloane cu o lime orict de mare. -n tabel n care este folosit atributul n#6ra, este cel construit n E#emplul D.C0. spectul tabelului este redat n <igura D.C0.
( emplul 5. 14

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

11. Celule r coninut

)ac un tabel are celule fr coninut /celule vide3, atunci aceste celule vor aprea n tabel fr un c!enar de delimitare. =n scopul de a afia un c!enar pentru celulele vide se poate proceda astfel:
dup etic!eta <TD> se adaug %nbsp& dup etic!eta <TD> se adaug <BR>

&aracterul Fnb(,G /no break space3 este, aa cum am vzut la capitolul +ormatarea te tului, caracterul spaiu. -n spaiu introdus prin intermediul acestui caracter nu va fi ignorat de bro;ser) =n E#emplul D.CD este ilustrat modul n care pot fi create celule fr coninut care s aib totui c!enar de delimitare. )up cum observai din <igura D.CD, celula FH nu are c!enar de delimitare. &elulele de pe a doua linie a tabelului sunt vide dar au c!enar deoarece am folosit Fnb(, i <BR>.
( emplul 5. 15

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

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

12. &rupuri $e coloane

Etic!etele <C"L'R"( > </C"L'R"( > permit definirea unui grup de coloane n cadrul unui tabel. tributele acceptate de <COL'ROH5> sunt:
span " determin numrul de coloane dintr"un grup width " determin o lime unic pentru coloanele din grup align " determin un tip unic de aliniere pentru coloanele din grup

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

m definit astfel un grup de trei coloane, fiecare avnd limea de CBB de pi#eli. =ntr"un bloc <COL'ROH5>, coloanele pot avea configurri diferite dac se utilizeaz etic!eta <C"L>, care admite atributele:
span " identific acea coloan din grup pentru care se face configurarea. )ac lipsete, atunci

coloanele sunt configurate n ordine. width " determin limea coloanei identificate prin (,an) align " determin alinierea coninutului coloanei identificate prin (,an) &el mai bine putei nelege funcionarea acestei etic!ete din E#emplul D.FB. 6abelul din acest e#emplu are dimensiunile de JFB de pi#eli lime i FBB de pi#eli nlime i este format din dou linii i patru coloane. =n tabel a fost delimitat un grup de trei coloane /primele trei coloane3 prin etic!eta <COL'ROH5> iar n cadrul acestui grup au fost definite limea i alinierea te#tului din fiecare coloane n parte. &ea de"a patra coloan a tabelului nu face parte din grupul de coloane. )up nc!iderea etic!etei <COL'ROH5>, celulele de date au fost introduse n mod normal, cu ajutorul etic!etei <TD>.
( emplul 5. '>

<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>

)in <igura D.FB se poate observa c n cadrul celulei CC este respectat alinierea la stnga a te#tului, deoarece ea a fost setata ca atare prin construcia <COL 6i$t%="31" align="le*t">)
In ,lu(7 Jn ca$rul etic%etei <TD> a *#(t (tabilita Ki alinierea ,e +erticala a te-tului $in celulL7 atributul +align ,ri&in$ +al#area "t#,") In celula 1 nu e(te (etat atributul +align a(t*el JncMt te-tul re(,ectL alinierea (tabilitL ,rin c#n(trucNia <COL 6i$t%="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)

Etic!eta <COL'ROH5> nu este recunoscut de bro;serele >etscape i prin urmare nici atributele legate de dimensionarea coloanelor i alinierea te#tului n interiorul lor.

13. Atribute pentru aspectul c'enarului unui tabel

1tri<utu! frame tributul )ra*e al etic!etei <TABLE> permite specificarea laturilor din c!enarul unui tabel care vor fi vizibile. Ualorile posibile ale acestui atribut sunt:

+#i$ " elimin toate muc!iile e#terioare ale tabelului ab#+e " afieaz o muc!ie n partea superioar a cadrului tabelului bel#6 " afieaz o muc!ie n partea inferioar a cadrului tabelului %(i$e( " afieaz cte o muc!ie n partea superioar i inferioar cadrului tabelului +(i$e( " afieaz o muc!ie n partea din stnga i din dreapta a cadrului tabelului l%( " afieaz o muc!ie n partea din stnga a cadrului tabelului r%( " afieaz o muc!ie n partea din dreapta a cadrului tabelului b#- " afieaz o muc!ie pe toate laturile cadrului tabelului

1tri<utu! rules

tributul rules al etic!etei <TABLE> permite alegerea unor delimitatori pentru celulele unui tabel. Ualorile posibile sunt:

n#ne " elimin toate muc!iile interioare ale tabelului r#6( " afieaz muc!ii orizontale ntre toate liniile tabelului c#l( " afieaz muc!ii verticale ntre toate coloanele tabelului all " afieaz muc!ii ntre toate liniile i coloanele

E#emplul D.FC ilustreaz aceste atribute. tributele *ra&e i rule( pot fi combinate i cu atributele de colorare a c!enarului i se pot folosi pentru a crea efecte interesante de aliniere n pagin aa cum se poate vedea n <igura D.FC.
( emplul 5. '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

-n tabel poate conine n celulele sale i alte elemente n afar de te#t, inclusiv un alt tabel, formnd astfel un ansamblu de tabele imbricate. =n E#emplul D.FF vom ilustra modul n care se pot imbrica dou tabele.
( emplul 5. ''

<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 <TD>celula <TR> <TD>celula <TD>celula <TR> <TD>celula <TD>celula </TABLE> <TR> <TD>celula <TD>celula </TABLE> </BODY> </HTML>

11 tabelul 1 tabelul 1 tabelul tabelul !1 tabelul ! tabelul

1 tabelul 1 tabelul 1

a cum se vede din <igura D.FF tabelul este format din dou linii i dou coloane. =n celula FC a tabelului am inclus un alt tabel, format din trei linii i dou coloane.

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

6abelele se numr printre cele mai folosite elemente ntr"o pagin *eb. Ele reprezint un instrument practic indispensabil pentru definirea aspectului paginii, ntruct permit alinierea corect a elementelor din pagin: te#t, imagini, legturi, etc. =n interiorul unui tabel se pot include i alte tabele, n funcie de necesiti, formnd o reea de tabele imbricate. (ingura precauie pe care trebuie s o avei n vedere cnd folosii tabele n paginile dumneavoastr este cea legat de etic!etele i atributele specifice unui anumit tip de bro;ser) a dup cum ai observat din e#emplele prezentate, aspectul paginilor poate s difere simitor de la un tip de bro;ser la altul, atunci cnd un anumit element nu este recunoscut. )ac vei considera c aspectul tabelelor este esenial pentru paginile site"ului, este recomandat s v limitai la etic!etele standard, recunoscute de toate bro;serele . =n ne#a C vei gsi o list a celor mai utilizate etic!ete mpreun cu meniunea dac fac parte din standardul 5678 H.F.

16. (e*umat
6abelele se insereaz ntr"un document 5678 cu ajutorul etic!etei container <TABLE>
</TABLE>

6abelele sunt formate din linii, care se introduc prin etic!eta <TR> iar fiecare linie este format din celule introduse prin etic!eta <TD>. &elulele unui tabel pot conine te#t, etic!ete de formatare a te#tului, imagini, legturi, formulare sau alte tabele. Etic!etele <TABLE>, <TR> i <TD> au o serie de atribute comune:
align " cnd este asociat cu <TABLE> stabilete alinierea tabelului fa de te#tul din jur " cnd este asociat cu <TR> stabilete alinierea te#tului din celulele liniei respective " cnd este asociat cu <TD> stabilete alinierea te#tului din celul bgc#l#r stabilete culoarea fundalului pentru ntregul tabel, o linie sau o celul. b#r$erc#l#r, b#r$erc#l#r$ar> i b#r$erc#l#rlig%t stabilesc culorile c!enarelor

 +align aliniaz te#tul pe vertical n cadrul tabelului, al celulelor unei linii sau al unei celule individuale

6abelul n ntregime sau o celul a sa pot avea o imagine ca fundal, specificat cu ajutorul atributului bac>gr#un$. 9rosimea c!enarului tabelului se stabilete cu ajutorul atributului b#r$er. )imensiunile tabelului sau ale unei celule individuale se stabilesc prin intermediul atributelor 6i$t% i %eig%t. &u ajutorul atributelor cell(,acing i cell,a$$ing se stabilesc distana dintre celulele tabelului, respectiv distana dintre coninutul celulelor i marginile lor. ,entru a crea tabele de forme oarecare se folosesc atributele c#l(,an i r#6(,an care permit e#tinderea unei celule peste celulele din dreapta ei, respectiv peste celulele de sub ea. -nui tabel i se poate ataa un titlu prin etic!eta <CA5TIO@> i se pot introduce celule cu rol de cap de tabel prin etic!eta <TH>) =ntr"un tabel se pot defini grupuri de coloane cu ajutorul etic!etei container <COL'ROH5> </COL'ROH5>. =n cadrul acestui grup, aspectul fiecrei coloane n parte este stabilit prin etic!eta
<COL>)

7odul de afiare al marginilor tabelului precum i al liniilor despritoare dintre linii i celule se poate stabili cu ajutorul atributelor *ra&e i rule(.

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

a3 b3 c3
1,.

,entru a insera un tabel n pagin. ,entru a insera o linie ntr"un tabel. ,entru a insera o celul de date ntr"o linie a tabelului.
Crmtoarea construcie generea8 un tabel cu o line 7i dou celule)

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

Ce culoare vor avea cele dou celule9 a3 mndou alb, deoarece aa este setat culoarea tabelului. b3 mndou rou, deoarece aa a fost setat culoarea liniei. c3 &elula CC albastru, deoarece culoarea ei a fost setat e#plicit i celula CF rou, deoarece face parte din linia a crei culoare a fost setat rou.
13. (a ce servesc atributele width 7i height ale etichetei <TABLE>9

a3

(tabilesc dimensiunile tabelului n pagin.

b3 c3
14.

liniaz tabelul fa de restul elementelor din pagin. (tabilesc dimensiunile celulelor tabelului.
Ce efect are urmtoarea construcie4

<TABLE b#r$er cell(,acing="." cell,a$$ing="11">O

a3 6e#tul din celule este distanat cu G pi#eli fa de c!enarul celulelor, iar celulele sunt distanate ntre ele cu CB pi#eli. b3 6e#tul din celule este distanat cu CB pi#eli fa de c!enarul celulelor, iar celulele sunt distanate ntre ele cu G pi#eli. c3 &!enarul tabelului are grosimea de G pi#eli iar c!enarul celulelor grosimea de CB pi#eli.
2;. Care dintre urmtoarele construcii alinia8 la dreapta coninutul celor dou celule9

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

a3 b3 c3
22.

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

a3 b3 c3
23.

Ce efect are atributul colspan 6n construcia urmtoare4

cel 1!O

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

a3 b3 c3
24.

-nific trei celule pe orizontal. -nific trei celule pe vertical. -nific cte trei celule, att pe orizontal ct i pe vertical.
: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>

a3 b3 c3
2).

0tributul align al etichetei <TABLE> reali8ea84

a3 b3 c3

linierea tabelului fa de restul elementelor din pagin. linierea te#tului n tabel. linierea te#tului n fiecare celul a tabelului

Tabele

1. c3 '. c3 *. a3 ,. b3 -. c3 0. b3 2. b3 4. a3 5. b3 1>. a3

Capitolul 1> Cadre 6.rames7 $ modalitate de structurare avansat a unui document 5678 este mprirea ferestrei bro;serului n mai multe ferestre distincte, denumite cadre /frames3. ceast facilitate permite afiarea simultan, n aceeai fereastr a bro;serului, a dou sau mai multe documente 5678 diferite, cte unul n fiecare cadru. ,entru a realiza acest lucru sunt necesare urmtoarele: un document de definire a cadrelor care conine etic!etele care stabilesc numrul, dimensiunile i aezarea cadrelor n pagin cte un fiier 5678 pentru fiecare cadru n parte, prin care se stabilete coninutul cadrului respectiv. )e e#emplu, o pagin *eb care conine dou cadre va fi definit prin trei documente 5678: documentul de definire a cadrelor, care specific dimensiunile i aezarea cadrelor n pagin] cele dou documente care descriu coninutul fiecrui cadru n parte. =n esen, cadrele fac posibil afiarea n fereastra bro;serului a mai multe pagini, simultan. 1. @ocumentu! de de'inire a cadre!or =n cadrul documentului de definire a cadrelor, blocul L'$)KM L?'$)KM este nlocuit de blocul 9+%1M(S(T= 9J+%1M(S(T=. =n acest tip de document blocul L'$)KM nu mai este folosit. =n interiorul blocului L<+ 7E(E6M, fiecare cadru este introdus prin etic!eta 9+%1M(=. )efinirea documentului ce va fi afiat ntr"un cadru se face prin atributul src /source3. cesta este un atribut obligatoriu al etic!etei L<+ 7EM, i primete ca valoare adresa -+8 a documentului 5678 care va fi ncrcat n acel cadru. )efinirea cadrelor se face prin mprirea ferestrelor n linii i coloane: mprirea unei ferestre ntr"un numr de cadre de tip coloan se face cu ajutorul atributului cols al etic!etei L<+ 7E(E6M ce descrie acea fereastr] mprirea unei ferestre n cadre de tip linie se face cu ajutorul atributului roFs al etic!etei L<+ 7E(E6M care descrie fereastra. Ualorile atributelor cols si ro;s sunt liste de elemente separate prin virgul care descriu modul n care se face mprirea ferestrei. Ualorile acestor atribute pot fi e#primate n mai multe moduri: n pi#eli j n care caz valoarea este un numr ntreg

n procente din dimensiunea ferestrei /un numr cuprins ntre C i DD, urmat de simbolul 23 n dimensiuni relative, nk. (imbolul nk semnific faptul c linia sau coloana astfel definit ocup a n"a parte din spaiul rmas dup dispunerea n fereastr a liniilor, respectiv coloanelor precedente /vezi e#emplele de mai jos3. ( emplul 1O colsS%FBB , k , GB2 , k ceast construcie descrie o mprire n patru cadre de tip coloan, dintre care prima are FBB pi#eli, a treia ocup jumtate din spaiul total disponibil, iar a doua i a patra ocup n mod egal restul de spaiu rmas disponibil. ( emplul 'O ro;sS%FBB , GB2 , Ck , Fk % =n acest e#emplu, pagina este mprit n patru cadre de tip linie, dintre care prima are FBB pi#eli, a doua ocup jumtate din spaiul total disponibil iar a treia i a patra ocup restul de spaiu rmas disponibil, care se mparte n trei pri egale, al treilea cadru ocupnd o parte, iar al patrulea ocupnd dou pri. Bbserva!ii dac mai multe elemente din list sunt configurate cu k , atunci spaiul disponibil rmas pentru ele se va mpri n mod egal. n cadrul unui bloc L<+ 7E(E6M poate fi inclus un cadru prin etic!eta L<+ 7EM sau un alt bloc L<+ 7E(E6M obinndu"se astfel cadre imbricate. =n majoritatea e#emplelor care vor urma am folosit ca -+8"uri pentru documentele pe care le conin cadrele, pagini deja construite n capitolele anterioare. )ac ai salvat documentele 5678 cu numele specificate n etic!eta L6I68EM putei verifica direct e#emplele care vor urma. )ac preferai s ncrcai n cadrele descrise n e#emplele urmtoare alte documente, va trebui s facei modificrile necesare specificnd numele acestor fiiere. E#emplul CB.C mparte pagina n dou cadre verticale, fiecare ocupnd jumtate din pagin. spectul paginii este cel din <igura CB.C. ( emplul 1>. 1 L5678M L5E )M L6I68EMcadreCL?6I68EM L?5E )M L<+ 7E(E6 colsS%k, k%M L<+ 7E srcS%listeC.!tml%M L<+ 7E srcS%listeJ.!tml%M L?<+ 7E(E6M L?5678M =n E#emplul CB.F este creat o pagina *eb cu trei cadre orizontale. ,rimul cadru are CBB de pi#eli, al treilea ocup HB2 din fereastra bro;serului, iar al doilea ocup restul spaiului. ,agina arat ca n <igura CB.F. ( emplul 1>. ' L5678M

L5E )M L6I68EMcadreFL?6I68EM L?5E )M L<+ 7E(E6 ro;sS%CBB , k , HB2%M L<+ 7E srcS%listeC.!tml%M L<+ 7E srcS%listeF.!tml%M L<+ 7E srcS%listeH.!tml%M L?<+ 7E(E6M L?5678M E#emplul CB.H creaz o matrice ptrat de J cadre /F # F3. ,entru a realiza acest lucru, se folosesc simultan cele dou atribute cols i ro;s. ,agina descris n acest document va avea aspectul din <igura CB.H. ( emplul 1>. * L5678M L5E )M L6I68EMcadreHL?6I68EM L?5E )M L<+ 7E(E6 ro;sS%k, k% colsS%k, k%M L<+ 7E srcS%tabeleC.!tml%M L<+ 7E srcS%tabeleF.!tml%M L<+ 7E srcS%tabeleJ.!tml%M L<+ 7E srcS%tabeleA.!tml%M L?<+ 7E(E6M L?5678M 2. Cadre im<ricate &adrele, ca i alte elemente ale paginii *eb /liste, tabele3, se pot imbrica, adic pot fi incluse cadre n interiorul altor cadre. =n E#emplul CB.J este creat o pagin cu trei cadre mi#te. ,entru a construi pagina se procedeaz din aproape n aproape. 7ai nti, pagina este mprit n dou cadre de tip coloan, dup care al doilea cadru este mprit n dou cadre de tip linie. ,agina va avea aspectul din <igura CB.J. ( emplul 1>. , L5678M L5E )M L6I68EMcadreJL?6I68EM L?5E )M L<+ 7E(E6 colsS%HB2, k%M L<+ 7E srcS%tabeleC.!tml%M L<+ 7E(E6 ro;sS%k, k%M L<+ 7E srcS%tabeleF.!tml%M L<+ 7E srcS%tabeleJ.!tml%M L?<+ 7E(E6M L?<+ 7E(E6M L?5678M 3. Contro!u! aspectu!ui unui cadru Cu!oarea mar&inii cadru!ui ,entru a stabili culoarea c!enarului unui cadru se utilizeaz atributul bordercolor. cest atribut primete ca valoare un nume de culoare sau o culoare definit n conformitate cu modelul +9'.

tributul bordercolor poate fi ataat att etic!etei L<+ 7E(E6M pentru a stabili culoarea tuturor c!enarelor cadrelor incluse, ct i etic!etei L<+ 7EM, pentru a stabili culoarea c!enarului pentru un cadru individual. E#emplul CB.G ilustreaz atributul bordercolor. ,agina descris n acest document are aspectul din <igura CB.G. ( emplul 1>. L5678M L5E )M L6I68EMcadreGL?6I68EM L?5E )M L<+ 7E(E6 colsS%FB2, k% bordercolorS%green% borderS%CG%M L<+ 7E srcS%te#tH.!tml%M L<+ 7E(E6 ro;sS%k, k%M L<+ 7E srcS%te#tJ.!tml% bordercolorS%blue%M L<+ 7E srcS%te#tG.!tml%M L?<+ 7E(E6M L?<+ 7E(E6M L?5678M L*imea mar&inii cadru!ui tributul border al etic!etei L<+ 7E(E6M permite configurarea limii c!enarelor tuturor cadrelor la un numr dorit de pi#eli. Ualoarea atributului border este un numr ntreg, ce reprezint numrul de pi#eli, valoarea prestabilit fiind de G pi#eli. =n mod prestabilit, c!enarul unui cadru este afiat i are aspect tridimensional. ,entru a obine cadre fr c!enar se utilizeaz setarea borderS%B%. fiarea c!enarului unui cadru se mai poate dezactiva i dac se utilizeaz atributul .rameborder cu valoarea %no%. cest atribut poate fi ataat att etic!etei L<+ 7E(E6M /dezactivarea fiind valabil pentru toate cadrele incluse3 ct i etic!etei L<+ 7EM /dezactivarea fiind valabila numai pentru un singur cadru3. Ualorile posibile ale atributului frameborder sunt: Ees " ec!ivalent cu C no " ec!ivalent cu B &adrele din E#emplul CB.A nu au c!enar. )up cum putei observa din <igura CB.A crearea unor cadre fr c!enar poate duce la apariia unor ambiguiti n pagin aa nct acest efect trebuie folosit cu atenie. ( emplul 1>. 0 L5678M L5E )M L6I68EMcadreAL?6I68EM L?5E )M L<+ 7E(E6 ro;sS%k, k% borderS%B%M L<+ 7E srcS%tabeleC.!tml%M L<+ 7E srcS%tabeleF.!tml%M L?<+ 7E(E6M L?5678M

@imensiunea cadru!ui &!iar dac dimensiunile unui cadru au fost stabilite n mod e#plicit prin valorile atributelor etic!etei L<+ 7E(E6M, utilizatorul are posibilitatea de a altera aceste dimensiuni cu ajutorul mouse" ului. =n scopul prevenirii acestei situaii se poate utiliza atributul noresi&e, ataat etic!etei L<+ 7EM, al crui efect este cel de blocare a posibilitii de redimensionare a cadrului. 4. $are de deru!are tributul scrollin/ al etic!etei L<+ 7EM este utilizat pentru a aduga unui cadru o bar de derulare sau de defilare /scrolling bar3, care permite navigarea n interiorul documentului afiat n cadru. Ualorile posibile ale atributului scrolling sunt: Ees " bara de derulare este prezent ntotdeauna] no " bara de derulare nu este disponibil] auto " bara de derulare este vizibil atunci cnd este necesar. ceasta opiune las bro;serului posibilitatea de a aduga sau nu bara, n funcie de dimensiunea te#tului din cadru. E#emplul CB.1 ilustreaz funcionarea atributului scrolling n cele trei situaii. ( emplul 1>. 2 L5678M L5E )M L6I68EMcadre1L?6I68EM L?5E )M L<+ 7E(E6 ro;sS%k, k, k%M L<+ 7E srcS%te#tC.!tml% scrollingS%Ees% noresizeM L<+ 7E srcS%te#t1.!tml% scrollingS%no% noresizeM L<+ 7E srcS%te#t0.!tml% scrollingS%auto% noresizeM L?<+ 7E(E6M L?5678M )in <igura CB.1 se observ c, deoarece la primul cadru te#tul nu depete dimensiunea ferestrei, bara de derulare nu este afiat dei atributul scrolling are valoarea %Ees%. =n cel de"al doilea cadru bara de derulare nu este afiat, indiferent de dimensiunea te#tului din cadru. 8a cel de"al treilea cadru, prezena sau absena barei de derulare este condiionat de dimensiunea te#tului. ici, deoarece te#tul depete dimensiunea ferestrei, bara este afiata. ). :o.iionarea documentu!ui ntr-un cadru tributele mar/in)ei/)t i mar/inFidt) ale etic!etei L<+ 7EM permit stabilirea distanei n pi#eli dintre coninutul unui cadru i marginile verticale, respectiv orizontale ale cadrului. Ualorile posibile ale acestor atribute sunt: un numr de pi#eli procente din nlimea, respectiv din limea cadrului =n E#emplul CB.0 fereastra bro;serului este mprit n trei cadre de tip coloan de dimensiuni egale. =n toate cele trei cadre este afiat acelai document, ceea ce difer este poziionarea documentului n fiecare cadru.

stfel, n cadrul din stnga, nu este specificat nici o valoare pentru atributele margin!eig!t i margin;idt!. =n cadrul din mijloc, se stabilete distana de GB de pi#eli ntre marginea superioar i cea inferioar a cadrului i te#t. =n cadrul din dreapta se stabilete o distan de HB de pi#eli ntre marginea din stnga i cea din dreapta a cadrului i te#t. ,agina are aspectul din <igura CB.0. ( emplul 1>. 4 L5678M L5E )M L6I68EMcadre0L?6I68EM L?5E )M L<+ 7E(E6 colsS%k , k , k%M L<+ 7E srcS%te#tC.!tml%M L<+ 7E srcS%te#tC.!tml% margin!eig!tS%AB%M L<+ 7E srcS%te#tC.!tml% margin;idt!S%JB%M L?<+ 7E(E6M L?5678M 1ten!ieH '0. E#ist bro;sere care nu suport cadre. ,entru acestea se utilizeaz n interiorul blocului L<+ 7E(E6M etic!eta 9AB+%1M(S= 9JAB+%1M(S=. )ac bro;serul poate s interpreteze cadre, va ignora ce se gsete n aceast poriune, iar dac nu, materialul cuprins n zona L>$<+ 7E(M L?>$<+ 7E(M va fi singurul care va fi recunoscut i afiat. Este de precizat i faptul c ntre L>$<+ 7E(M L?>$<+ 7E(M se pot introduce orice alte etic!ete 5678 /inclusiv imagini, !EperlinI"uri, tabele3. +. Cadre interne 8in-!ine 'rames9 -n cadru intern este specificat prin intermediul etic!etei 9;+%1M(= 9J;+%1M(=. Ea definete o arie rectangular n interiorul documentului, arie n care bro;serul va afia un alt document 5678, complet, inclusiv marginile i barele de derulare. -n cadru intern se insereaz ntr"o pagina *eb n mod asemntor cu o imagine, n interiorul blocului L'$)KM, aa cum rezult din urmtorul e#emplu: LI<+ 7E srcS%tabeleCB.!tml% !eig!tSJB2 ;idt!SGB2M L?I<+ 7EM =n acest caz, am specificat c dorim un cadru intern care are JB2 din nlimea i GB2 din limea paginii curente. tributele acceptate de etic!eta LI<+ 7EM sunt n parte preluate de la etic!etele L<+ 7EM i L<+ 7E(E6M, cum ar fi: src, border, .rameborder, bordercolor, mar/in)ei/)t, mar/inFidt), scrollin/, name. $ parte din atributele L<+ 7EM sunt comune cu cele ale etic!etei LI79M: vspace, )space, ali/n, Fidt), )ei/)t. =n E#emplul CB.D am construit un cadru intern n care se desc!ide unul dintre documentele 5678 create la capitolul Tabele. ( emplul 1>. 5 L5678M L5E )M L6I68EMcadreDL?6I68EM L?5E )M

L'$)KM L5C alignS%center%M&adre interneL?5CML5+M L&E>6E+M LI<+ 7E ;idt!S%AB2% !eig!tS%GB2% nameS%icad% srcS%tabeleJ.!tml%M )aca vedeti acest te#t inseamna ca bro;serul dumnevoastra nu suporta cadre interne. L,ML !refS%cadreCB.!tml%M,agina fara cadre interneL? M L?I<+ 7EM L?&E>6E+M L?'$)KM L?5678M )in <igura CB.D putei observa c aspectul unui cadru intern este ntructva similar cu cel al unei imagini in!line. Etic!eta LI<+ 7EM se introduce n cadrul blocului L'$)KM i n cazul folosirii ei nu mai este necesar un document de definire a cadrelor. ,entru situaia cnd bro;serul nu accept cadre interne, am asigurat o versiune a paginii care nu conine astfel de cadre /cadreB@)html3 introdus prin etic!eta L M. &oninutul acestei pagini este foarte simplu, servind doar la ilustrarea modului n care poate fi construit o alternativ la pagina cu cadre interne /E#emplul CB.CB3 ( emplul 1>. 1> L5678M L5E )M L6I68EMcadreCBL?6I68EM L?5E )M L'$)KM L5C alignS%center%M,agina fara cadre interneL?5CML5+M L?'$)KM L?5678M Iat un alt e#emplu /E#emplul CB.CC3 n care am creat o pagin care conine trei linI"uri iar acestea desc!id paginile referite de ele n cadrul intern din centrul paginii. <igura CB.CB red aspectul acestei pagini. ( emplul 1>. 11 L5678M L5E )M L6I68EMcadreCCL?6I68EM L?5E )M L'$)KM L !refS%tabeleJ.!tml% targetS%icad%M<isierulCL? ML'+M L !refS%tabeleG.!tml% targetS%icad%M<isierulFL? ML'+M L !refS%tabeleA.!tml% targetS%icad%M<isierulHL? ML'+M L&E>6E+M LI<+ 7E ;idt!S%AB2% !eig!tS%GB2% nameS%icad% srcS%cadreCC.!tml%M )aca vedeti acest te#t inseamna ca bro;serul dumnevoastra nu suporta cadre interne. L,ML !refS%cadreCB.!tml%M,agina fara cadre interneL? M L?I<+ 7EM L?&E>6E+M L?'$)KM L?5678M =n e#emplu am folosit atributul name al etic!etei LI<+ 7EM cu ajutorul cruia am atribuit un nume acestui cadru i anume %icad%. cest lucru a fost necesar pentru a specifica, prin intermediul atributului tar/et al etic!etei L M, faptul c linI"urile se vor desc!ide n cadrul intern.

,. @esc/iderea documente!or n a!te cadre )ac ntr"unul dintre documentele desc!ise n cadru e#ist linI"uri, acestea vor desc!ide paginile referite de ele n cadrul curent. cest comportament se poate sc!imba prin plasarea n etic!eta L M a atributului tar/et, care precizeaz numele ferestrei /cadrului3 n care se va ncrca pagina nou referit de legtur, conform sinta#ei: L !refS%-+8% targetS%numeVframe%M L? M >umele unui cadru este stabilit prin atributul name al etic!etei L<+ 7EM conform sinta#ei: L<+ 7E nameS%numeVframe%M =n E#emplul CB.CF este prezentat o pagina *eb cu dou cadre. )ocumentul de definire a cadrelor este cadreB>) html al crui aspect este redat n <igura CB.CC. ( emplul 1>. 1' L5678M L5E )M L6I68EMcadreCFL?6I68EM L?5E )M L<+ 7E(E6 colsS%FB2, k%M L<+ 7E srcS%cadreCH.!tml%M L<+ 7E srcS%cadreCJ.!tml% nameS%cadruVdreapta%M L?<+ 7E(E6M L?5678M )ocumentul de definire a cadrelor mparte pagina n dou cadre de tip coloan. =n cel din stnga se va desc!ide documentul cadreBA)html iar n cel din dreapta, documentul cadreB<)html. &el de"al doilea cadru a fost numit %cadruVdreapta%. =n E#emplul CB.CH este creat documentul cadreBA)html. cest document conine, dup cum observai, patru linI"uri. ,rin intermediul atributului target am specificat cadrul n care se vor desc!ide acestea. 6oate aceste legturi desc!id paginile referite de ele n cadrul drept. ( emplul 1>. 1* L5678M L5E )M L6I68EMcadreCHL?6I68EM L?5E )M L'$)KM L !refS%tabeleA.!tml% targetS%cadruVdreapta%M 8egatura C L? ML'+M L !refS%tabele1.!tml% targetS%cadruVdreapta%M 8egatura F L? ML'+M L !refS%tabele0.!tml% targetS%cadruVdreapta%M 8egatura H L? ML'+M L !refS%cadreCJ.!tml% targetS%cadruVdreapta%M 5ome L? ML'+M

L?'$)KM L?5678M =n E#emplul CB.CJ este creat documentul cadreB<)html. ( emplul 1>. 1, L5678M L5E )M L6I68EMcadreCJL?6I68EM L?5E )M L'$)KM L5HM ici se vor desc!ide paginile referite de legaturile din cadrul stangL?5HML5+M L?'$)KM L?5678M (alvai cele trei fiiere cu numele specificate i desc!idei cu bro;serul fiierul cadreB>)html pentru a observa cum funcioneaz atributele prezentate. tributul target al etic!etei L<+ 7EM accept i anumite valori predefinite i anume: Vself " ncrcarea noii pagini are loc n cadrul curent VblanI " ncrcarea noii pagini are loc ntr"o fereastr nou, anonim Vparent " ncrcarea noii pagini are loc n cadrul printe al cadrului curent dac acesta e#ist, altfel are loc n fereastra curent a bro;serului Vtop " ncrcarea noii pagini are loc n fereastra bro;serului ce conine cadrul curent. -rmtorul e#emplu ilustreaz felul cum funcioneaz aceste valori ale atributului target. )ocumentul de definire a cadrelor este prezentat n E#emplul CB.CG aspectul su fiind cel din <igura CB.CF. ,agina construit n acest e#emplu conine dou cadre orizontale. =n cel de sus este ncrcat documentul cadreBI)html iar n cel de jos, documentul cadreB=)html. ( emplul 1>. 1L5678M L5E )M L6I68EMcadreCGL?6I68EM L?5E )M L<+ 7E(E6 ro;sS%HB2, k%M L<+ 7E srcS%cadreC1.!tml%M L<+ 7E srcS%cadreCA.!tml%M L?<+ 7E(E6M L?5678M E#emplul CB.CA construiete documentul cadreB=)html care conine trei legturi ctre fiiere 5678 create la capitolul +ormatarea te tului. <iecare dintre aceste legaturi are specificat atributul target pentru a ilustra modul n care funcioneaz acesta. ( emplul 1>. 10 L5678M L5E )M L6I68EMcadreCAL?6I68EM L?5E )M L'$)KM L !refS%te#tJ.!tml% targetS%VblanI%M ceasta legatura se desc!ide in alta fereastra L? ML'+M L !refS%te#tG.!tml% targetS%Vself%M

ceasta legatura se desc!ide in fereastra curenta L? ML'+M L !refS%te#tA.!tml% targetS%Vparent%M ceasta legatura se desc!ide in fereastra parinte L? ML'+M L?'$)KM L?5678M )ocumentul cadreBI)html prezentat n E#emplul CB.C1 este o pagin *eb foarte simpl care se va desc!ide n cadrul de sus. ( emplul 1>. 12 L5678M L5E )M L6I68EMcadreC1L?6I68EM L?5E )M L'$)KM L5C alignS%center%M tributul targetL?5CM L?'$)KM L?5678M ,entru a observa modul de funcionare al atributului target salvai cele trei fiiere sub numele specificate i desc!idei cu bro;serul documentul cadreB?)html. 3. Su&estii pri"ind 'o!osirea cadre!or )ei cadrele reprezint o maniera destul de spectaculoas de a structura o pagin *eb, ele prezint o mulime de dezavantaje. =ncrcarea unei pagini care conine cadre se face mai greu, inde#area paginii de ctre motoarele de cutare este mai dificil. )e asemenea, deoarece documentul din fiecare cadru are propriul -+8 , este mai greu pentru vizitator s rein adresa paginii n .avorites. .i, nu n ultimul rnd, deoarece e#ist bro;sere care nu suport cadrele, este indicat s asigurai pentru fiecare pagin astfel structurat i o versiune fr cadre, ceea ce implic un efort suplimentar. vnd n vedere toate aceste aspecte, este bine s limitai folosirea cadrelor n paginile dumneavoastr doar la situaiile n care nu putei proceda altfel. 4. -e.umat <olosirea cadrelor ntr"un document 5678 permite desc!iderea mai multor pagini distincte n documentul respectiv. ,entru a crea o pagin care conine cadre sunt necesare mai multe documente 5678: documentul de definire a cadrelor cte un document 5678 pentru fiecare cadru definit )ocumentul de definire a cadrelor nu conine blocul L'$)KM acesta fiind nlocuit de blocul L<+ 7E(E6M L?<+ 7E(E6M. =n cadrul blocului L<+ 7E(E6M fiecare cadru este introdus prin etic!eta L<+ 7EM. =mprirea ferestrei n cadre de tip coloan se face cu ajutorul atributului cols iar n cadre de tip linie se face cu ajutorul atributului ro;s. mbele atribute sunt asociate etic!etei L<+ 7E(E6M.

,entru a stabili limea c!enarului unui cadru se folosete atributul border al etic!etei L<+ 7EM. ,entru a stabili culoarea c!enarului unui cadru se folosete atributul bordercolor al etic!etei L<+ 7EM. ceste atribute pot fi asociate i etic!etei L<+ 7E(E6M, caz n care efectul lor se va aplica tuturor cadrelor din set. ,rezena barelor de derulare ntr"un cadru se stabilete cu ajutorul atributului scrolling. ,entru a poziiona documentul ntr"un cadru se folosesc atributele margin;idt! i margin!eig!t. =ntr"o pagin *eb se pot introduce i cadre interne, cu ajutorul etic!etei LI<+ 7EM L?I<+ 7EM. ,entru a specifica fereastra sau cadrul n care se va desc!ide un document se folosete atributul target care poate avea ca valoare numele ferestrei /cadrului3 sau poate avea o valoare predefinit. Este recomandat s asigurai o versiune fr cadre a documentului 5678, pentru ca acesta s poat fi vizualizat cu bro;serele care nu suport cadre. ,entru aceasta, elementele care fac parte din versiunea fr cadre se includ ntre etic!etele L>$<+ 7E(M L?>$<+ 7E(M. 1;. Test '2. a3 b3 c3 :n ce 8on a unui document #%M( se introduce blocul L<+ 7E(E6M9 =n blocul L'$)KM =n blocul L5E )M L<+ 7E(E6M formeaz un bloc separat.

Cum se introduce un cadru 6n pagin9 a3 b3 c3 ,rin etic!eta L<+ 7E(E6M ,rin etic!eta L<+ 7EM ,rin etic!eta L(+&M

Dorim s 6mprim o pagin 6n trei cadre de tip coloan, primul avHnd ;umtate din pagin, iar celelalte dou spaiul rmas 6mprit 6n mod egal) Care dintre construciile urmtoare reali8ea8 acest lucru9 a3 b3 c3 L<+ 7E(E6 colsS%k , k, k% L<+ 7E(E6 colsS%GB2, Ck , Fk% L<+ 7E(E6 colsS%GB2, k , k%

Ce reali8ea8 urmtoarea construcie9 L5678M L<+ 7E(E6 colsS%k, k%M L<+ 7E srcS%frameC.!tml%M L<+ 7E(E6 ro;sS%k, k%M L<+ 7E srcS%frameF.!tml%M L<+ 7E srcS%frameH.!tmllM L?<+ 7E(E6M L?<+ 7E(E6M L?5678M

a3 =mparte pagina n patru cadre, dou de tip coloan, dou de tip linie. b3 =mparte pagina n dou cadre de tip coloan, cel de"al doilea fiind mprit n dou cadre de tip linie. c3 =mparte pagina n trei cadre de tip linie. :n construcia urmtoare la ce folose7te atributul scrolling9 L<+ 7E srcS%frameC.!tml% scrollingS%auto%M a3 ,ermite auto"dimensionarea cadrului n funcie de mrimea te#tului. b3 daug automat bara de derulare pentru acest cadru. c3 8as bro;serului posibilitatea de a aduga sau nu bara de derulare, n funcie de mrimea te#tului din cadru. (a ce folosesc atributele margin!eig!t 7i margin;idt! ale etichetei L<+ 7EM9 a3 b3 c3 )imensioneaz marginile cadrului. )imensioneaz c!enarul cadrului. (tabilesc distana dintre marginile cadrului i coninutul su.

Cnde se introduce eticheta LI<+ 7EM9 a3 b3 c3 =n blocul L'$)KM =n blocul L<+ 7E(E6M =n blocul L<+ 7EM

(a ce serve7te atributul bordercolor asociat etichetei L<+ 7E(E6M9 a3 b3 c3 (tabilete culoarea c!enarului unui cadru. (tabilete culoarea c!enarelor tuturor cadrelor definite n L<+ 7E(E6M. (tabilete culoarea de fond a cadrelor definite n L<+ 7E(E6M.

Care dintre urmtoarele construcii este corect9 a3 b3 c3 L<+ 7E nameS%numeVcadru%M L<+ 7E(E6 nameS%numeVcadru%M L<+ 7E(E6 !refS%numeVcadru%M

Cum se reali8ea8 deschiderea documentului dintr!un cadru 6ntr!o fereastra nou9 a3 b3 c3 L<+ 7E srcS%frameC.!tml% targetS%Vself%M L<+ 7E srcS%frameC.!tml% targetS%VblanI%M L<+ 7E srcS%frameC.!tml% targetS%Vparent%M

Cadre
1. c3 '. b3 *. c3 ,. b3 -. c3 0. c3 2. a3

4. b3 5. a3 1>. b3

Capitolul 11 +ormulare &u siguran ai vzut cum arat un formular ntr"o pagin *eb. )e e#emplu, atunci cnd completai o carte de oaspei /guestbook3 avei de"a face cu un formular. tunci cnd selectai mai multe opiuni dintr"o list sau introducei un cuvnt ntr"un motor de cutare, folosii, de asemenea, un formular. <ormularul reprezint unul dintre cele puternice elemente ale unei pagini *eb. ,rin intermediul formularelor se realizeaz interactivitatea cu vizitatorul paginii, acestea permindu"v s obinei informaii despre cei care viziteaz paginile dumneavoastr. 1. Ce este un 'ormu!ar? -n formular este un ansamblu de zone active alctuit din mai multe tipuri de elemente: butoane, casete de selecie, cmpuri de editare, etc., ce permit utilizatorilor s introduc efectiv informaii. ceste informaii sunt ulterior transmise serverului pe care este gzduit pagina dumneavoastr, unde vor putea fi prelucrate. $ sesiune cu o pagina *eb ce conine un formular cuprinde dou etape: -tilizatorul completeaz formularul i, prin apsarea butonului de e#pediere, trimite serverului datele nscrise n formular. $ aplicaie dedicat de pe server /un script3 analizeaz informaiile transmise i, n funcie de configuraia scriptului, fie stoc!eaz datele ntr"o baz de date, fie le transmite la o adres de mail indicat de dumneavoastr. )ac este necesar, serverul poate e#pedia i un mesaj de rspuns utilizatorului. &el mai important lucru pe care trebuie s"l nelegei n legtur cu formularele este c aici apar dou probleme distincte i care necesit instrumente diferite pentru a le gestiona. ,rima dintre ele este plasarea formularului n pagin i asigurarea bunei lui funcionri. lucru se realizeaz prin 5678 i de el ne ocupm n acest capitol. cest

&ea de"a doua este gestionarea i prelucrarea informaiilor pe care vizitatorul le introduce prin intermediul formularului. ceast problem este rezolvat cu ajutorul scripturilor &9I stocate pe server, subiect despre care vom vorbi n capitolul urmtor. (tructura formularele poate varia, de la o simpl caset de te#t pentru introducerea unui ir de caractere, pn la un ansamblu comple#, cu multiple seciuni i care ofer faciliti puternice de transmitere?prelucrare a datelor. 2. Crearea unui 'ormu!ar -n formular este definit ntr"un bloc delimitat de etic!etele 9+B%M= 9J+B%M=. Etic!eta L?<$+7M, de nc!idere, este obligatorie. =n interiorul blocului sunt incluse: elementele formularului, n care vizitatorul urmeaz s introduc informaii

un buton de e#pediere /submit3, la apsarea cruia, datele sunt transmise ctre server opional, un buton de anulare /reset, cancel3, prin care utilizatorul poate anula datele nscrise n formular 6ot ceea ce este inclus ntre etic!eta de desc!idere i cea de nc!idere face parte din formular. Etic!eta L<$+7M are dou atribute eseniale: action j comunic bro;serului unde s trimit datele introduse n formular. =n general valoarea atributului action este adresa -+8 a scriptului aflat pe serverul care primete datele formularului. )e e#emplu: L<$+7 actionS%!ttp:??;;;.Ea!oo.com?cgi"bin?numeVfis.cgi%M. met)od " precizeaz metoda utilizat de bro;ser pentru e#pedierea datelor formularului. tributul met!od poate avea dou valori: post " folosit n cele mai multe cazuri. Indic serverului s furnizeze datele direct scriptului ca date de intrare standard. get /valoarea implicit3 " datele din formular sunt adugate la adresa -+8 precizat de atributul action, ntre adresa -+8 i date fiind inserat un %4%. )atele sunt adugate conform sinta#ei: numeVcampSvaloareVcamp. =ntre diferite seturi de date este introdus un %\%. )e e#emplu: %!ttp:??;;;.Ea!oo.com?cgi"bin?numeVfis.cgi4 numeCSvaloareC\numeFSvaloareF% &ea mai facil cale prin care informaiile introduse ntr"un formular pot parveni creatorului paginii este folosirea comenzii mailtoO m mai ntlnit aceast comand la capitolul Le/$turi n conte#tul urmtor: L !refS%mailto:autorhdomeniu.com%M )e data aceasta nu mai este vorba de crearea unei legturi care s lanseze n e#ecuie aplicaia de mail a utilizatorului, ci de transmiterea datelor introduse n formular la o adres de mail specificat de dumneavoastr. cest lucru se poate realiza preciznd ca valoare a atributului action urmtoarea secven: %mailto:adresaVmail%, ca n e#emplul urmtor: L<$+7 actionSmailto:autorhdomeniu.com met!odS%post%M a cum spuneam, atributul action comunic bro;serului unde s trimit datele introduse n formular. <olosind comanda mailto: bro;serului i se indic s trimit datele la adresa de mail specificat n comand. )in pcate, aceast comand nu este e#ecutat n acest mod dect de bro;serele >etscape. 'ro;serele Internet E#plorer nu recunosc comanda mailto: prezent n cadrul formularelor. cestea o e#ecut la fel cum este ea e#ecutat atunci cnd face parte din etic!eta L M ca valoare a atributului !ref adic lanseaz aplicaia de mail a utilizatorului.

)in acest motiv, inclusiv pentru trimiterea datelor la o adres specificat de mail, se folosesc scripturi &9I. ,entru a nu intra nc n amnunte privind scripturile, vom folosi totui n e#emplele urmtoare comanda mailto: +einei totui c afiarea corect a unui formular n pagin nu este dect prima etap a utilizrii formularului. ,entru a face o testare complet trebuie s avei un script instalat pe server care s prelucreze datele din formular i s le transmit la adresa de mail specificat. ,entru a defini elementele care fac parte din formular se utilizeaz etic!etele 9;AP#T=, 9S(L(CT=, 9BPT;BA= i 9T(CT1%(1=. 3. #tic/eta 9;AP#T= ,rin intermediul etic!etei 9;AP#T= se pot introduce n formular cmpuri de editare /casete de te#t3, cmpuri de tip pass ord, butoane de e#pediere i anulare, butoane radio i casete de validare. Etic!eta LI>,-6M are urmtoarele atribute: tGpe " prin care se precizeaz tipul elementului. name " permite ataarea unui nume fiecrui element al formularului. value " permite atribuirea unei valori iniiale unui element al formularului. ,erec!ea de atribute nameJvalue /nume?valoare3 este deosebit de important pentru buna funcionare a formularului. <iecare element introdus prin etic!eta LI>,-6M reprezint o variabil. Informaia introdus de utilizator n cmpul elementului respectiv reprezint valoarea pe care o primete aceast variabil. )in acest motiv, toate elementele introduse prin etic!eta LI>,-6M trebuie s aib atribuit un nume. cest lucru este obligatoriu deoarece, n caz contrar, variabila reprezentat de acel element nu va avea un identificator. =n plus, este indicat s atribuii nume distincte diferitelor elemente care fac parte din formular. ltminteri, scriptul &9I care prelucreaz datele nu va ti s fac distincia ntre variabile avnd acelai nume i valori diferite. tributul tEpe poate avea urmtoarele valori: te#t " se folosete pentru a introduce un cmp de editare pe o singur linie pass;ord j se folosete pentru a insera un cmp de editare n care caracterele introduse sunt nlocuite cu asteriscuri /k3 radio j folosit pentru a insera un ir de butoane radio /elemente care se folosesc pentru a selecta dintr"o list de opiuni una i numai una dintre ele3 c!ecIbo# j folosit pentru a introduce un ir de casete de validare /elemente care se folosesc cnd dintr"o list de opiuni se poate alege mai mult de o singur variant3 submit j se folosete pentru a introduce un buton de e#pediere reset j se folosete pentru a introduce un buton de anulare a informaiilor introduse n formular button " se folosete pentru a introduce n formular un buton obinuit !idden " se folosete pentru a introduce n formular un cmp ascuns <iecare dintre valorile atributului tEpe genereaz un anumit tip de element n cadrul formularului. E#emplul CC.C creeaz un formular foarte simplu care conine un cmp de editare i un buton de e#pediere. spectul formularului este redat n <igura CC.C. ( emplul 11. 1 L5678M

L5E )M L6I68EMformulareCL?6I68EM L?5E )M L'$)KM L5C alignS%center%M &aseta de te#t si buton de e#pediereL?5CML5+M L<$+7 actionS%mailto:adresahEEE.com% met!odS%post%M Introduceti adresa dvs. de mail: LI>,-6 tEpeS%te#t% nameS%adresa% valueS%adresa mail%ML'+M LI>,-6 tEpeS%submit% valueS%e#pediaza%M L?<$+7M L?'$)KM L?5678M )up cum observai, numele atribuit cmpului de editare este %adresa% iar atributul value a primit ca valoare irul de caractere %adresa mail%. cest te#t va fi afiat n interiorul cmpului de editare, nainte ca utilizatorul s nceap introducerea informaiilor. )ac atributul value nu era prezent sau era iniializat cu stringul vid / %% 3, caseta de te#t ar fi fost goal. =n cadrul formularului este prezent i un buton de e#pediere, inserat de asemenea prin intermediul etic!etei LI>,-6M avnd atributul tEpe setat cu valoarea %submit%. a cum se observ din figur, pe buton este afiat te#tul %e#pediaza%, deoarece pentru acest element, atributului value i"a fost atribuit ca valoare te#tul respectiv. Casete de text =n E#emplul CC.F am creat un formular care conine trei casete de te#t /cmpuri de editare3 n care utilizatorul este rugat s introduc numele, prenumele i adresa de mail, precum i o caset de tip pass ord, care cere introducerea unei parole. a cum vei observa din <igura CC.F, o caset de tip pass ord este asemntoare cu un cmp de editare, singura diferen fiind aceea c aici caracterele nu sunt afiate n clar ci sunt nlocuite cu asteriscuri. =n plus, formularul conine un buton de e#pediere i unul de anulare a datelor introduse. ( emplul 11. ' L5678M L5E )M L6I68EMformulareFL?6I68EM L?5E )M L'$)KM L5C alignS%center%M&asete de te#tL?5CML5+M L<$+7 actionS%mailto:adresahEEE.com% met!odS%post%M Introduceti numele: LI>,-6 tEpeS%te#t% nameS%nume% valueS%%ML'+M Introduceti prenumele: LI>,-6 tEpeS%te#t% nameS%prenume% valueS%%ML'+M Introduceti adresa de mail: LI>,-6 tEpeS%te#t% nameS%mail% valueS%%ML'+M Introduceti parola: LI>,-6 tEpeS%pass;ord% nameS%parola%ML'+M LI>,-6 tEpeS%reset% valueS%sterge%M LI>,-6 tEpeS%submit% valueS%e#pediaza%M L?<$+7M L?'$)KM L?5678M

,entru elementele de tip caset de te#t i pass ord sunt utile i atributele: ma len/t) j care stabilete numrul ma#im de caractere care poate fi introdus n cmpul de editare si&e j care stabilete limea acestui cmp $utoane radio =n E#emplul CC.H am creat un formular care conine un ir de butoane radio, prin care se cere prerea vizitatorului despre o pagin *eb. )up cum observai, fiecare element de tip buton radio are acelai nume i anume %opinie% deoarece nu se poate selecta dect un singur element, astfel nct orice ambiguitate este e#clus. <iecare buton radio trebuie s aib o valoare. )in acest motiv pentru fiecare buton atributul value a fost setat la o alt valoare. legerea uneia dintre opiuni, de e#emplu %buna%, face ca variabila %opinie% s primeasc valoarea %buna%. ,rin urmare, serverului i va fi transmis perec!ea %opinieSbuna%. =n plus, observai prezena atributului c)ec?ed, care are rolul de a prestabili o anumit opiune, pe care ns utilizatorul o poate sc!imba, dac dorete. spectul formularului este cel din <igura CC.H. ( emplul 11. * L5678M L5E )M L6I68EMformulareHL?6I68EM L?5E )M L'$)KM L5C alignS%center%M'utoane radioL?5CML5+M L<$+7 actionS%mailto:adresahEEE.com% met!odS%post%M &e parere aveti despre aceasta pagina4L'+M LI>,-6 tEpeS%radio% nameS%opinie% valueS%foarte buna% c!ecIedM<oarte bunaL'+M LI>,-6 tEpeS%radio% nameS%opinie% valueS%buna%M'unaL'+M LI>,-6 tEpeS%radio% nameS%opinie% valueS%destul de buna%M)estul de bunaL'+M LI>,-6 tEpeS%radio% nameS%opinie% valueS%proasta%M,roastaL'+M LI>,-6 tEpeS%reset% valueS%anuleaza%M LI>,-6 tEpeS%submit% valueS%e#pediaza%M L?<$+7M L?'$)KM L?5678M Casete de "a!idare E#emplul CC.J creeaz un ir de casete de validare, care se deosebesc de butoanele radio prin faptul c se pot selecta mai multe opiuni dintre cele prezentate. <igura CC.J red aspectul formularului construit n acest e#emplu. ( emplul 11. , L5678M L5E )M L6I68EMformulareJL?6I68EM L?5E )M L'$)KM L5C alignS%center%M&asete de validareL?5CML5+M L<$+7 actionS%mailto:adresahEEE.com% met!odS%post%M &are sunt !obbE"urile dumneavoastra4L'+M LI>,-6 tEpeS%c!ecIbo#% nameS%!obbE% valueS%sport%M(portL'+M LI>,-6 tEpeS%c!ecIbo#% nameS%!obbE% valueS%film%M<ilmL'+M

LI>,-6 tEpeS%c!ecIbo#% nameS%!obbE% valueS%lectura%M8ecturaL'+M LI>,-6 tEpeS%c!ecIbo#% nameS%!obbE% valueS%jocuri%M:ocuri pe computerL'+M LI>,-6 tEpeS%c!ecIbo#% nameS%!obbE% valueS%internet%M(urfing pe netL'+M LI>,-6 tEpeS%c!ecIbo#% nameS%!obbE% valueS%alpinism%M lpinismL'+M LI>,-6 tEpeS%submit% nameS%submit% valueS%e#pediaza%M L?<$+7M L?'$)KM L?5678M $ caset de validare are dou stri: marcat sau nemarcat / on sau off3. &a i la butoanele radio, atributul name are n e#emplul considerat o singur valoare, %!obbE%, iar atributul value are, pentru fiecare caset, valori distincte. (erverului i sunt transmise numai acele valori care au fost marcate n casetele de validare corespunztoare. .i n cazul casetelor de validare este posibil prezena atributului c)ec?ed care preselecteaz o anumit opiune sau mai multe. $utoane =n cadrul unui formular se pot introduce i butoane obinuite /altele dect butoanele +ubmit i Reset3. +olul acestora este de a iniia anumite aciuni n momentul cnd utilizatorul face clicI cu mouse"ul pe ele. 8imbajul 5678 nu ofer instrumentele necesare pentru a specifica ce anume se ntmpl cnd butonul este apsat. ,entru aceasta este necesar s includei n documentul 5678 scripturi :ava(cript care s trateze aceste evenimente. &a i butoanele +ubmit i Reset, butoanele obinuite sunt incluse n formular cu ajutorul etic!etei LI>,-6M avnd atributul tEpe setat la valoarea button: LI>,-6 tEpeS%button% nameS%buton% valueS%te#t%M. 6e#tul specificat ca valoare a atributului value va fi afiat pe buton. 'utoanele pot fi folosite pentru a valida informaiile introduse n formular, pentru a desc!ide documente i a iniia diverse alte aciuni din partea bro;serului. C7mpuri ascunse 8/idden 'ie!ds9 &mpurile ascunse sunt elemente care fac parte dintr"un formular dar nu sunt vizibile n cadrul paginii. ,rin intermediul acestora se pot include n formular informaii care nu pot fi alterate de bro;ser sau de utilizator. Introducerea unui astfel de cmp n formular se face prin etic!eta LI>,-6 tEpeS%!idden%M. &a i n cazul celorlalte elemente ale formularului este necesar prezena atributelor name i value, ca n e#emplul urmtor: LI>,-6 tEpeS%!idden% nameS%ascuns% valueS%modifica%M &mpurile ascunse pot servi la o gestionare mai bun a datelor transmise la server. )e e#emplu, s presupunem c avem un formular care cere utilizatorului cteva informaii iniiale: numele i adresa. ,e baza acestora, aplicaia de pe server iniiaz afiarea unui nou formular care solicit introducerea unor informaii mai detaliate. )eoarece este plictisitor pentru vizitator s reia introducerea informaiilor iniiale, scriptul poate fi configurat s depun primele informaii n cmpurile ascunse ale celui de"al doilea formular. =n aceast

situaie este util folosirea cmpurilor ascunse deoarece serverul proceseaz un singur formular la un moment dat i nu are cum s tie c cel de"al doilea formular a fost completat de aceeai persoan. 4. #tic/ete!e 9S(L(CT= i 9BPT;BA= &u ajutorul etic!etei 9S(L(CT= 9JS(L(CT= se poate introduce ntr"un formular un meniu derulant. &rearea unui meniu pentru vizitatorii paginii i ajut la selectarea unor opiuni dintr"o list predefinit. <iecare opiune care face parte din blocul L(E8E&6M se introduce prin etic!eta 9BPT;BA=. =n E#emplul CC.G este construit un meniu derulant, din care vizitatorul poate selecta opiunea dorit. tributul name are acelai rol ca i n etic!eta LI>,-6M. )ac vizitatorul selecteaz din meniu zodia 6aur, de e#emplu, la apsarea butonului de e#pediere, serverului i este transmis perec!ea: %zodiaStaur%. tributul si&e este setat la valoarea %C%. (etarea atributului size la valoarea %C% creeaz o un meniu derulant cu o singur opiune vizibil iniial aa cum se poate observa din <igura CC.G. ( emplul 11. L5678M L5E )M L6I68EMformulareGL?6I68EM L?5E )M L'$)KM L5C alignS%center%M7eniu derulantL?5CML5+M L<$+7 actionS%mailto:adresahEEE.com% met!odS%post%M &are este zodia dumneavoastra4L'+M L(E8E&6 nameS%zodia% sizeS%C%M L$,6I$>M'erbec L$,6I$>M6aur L$,6I$>M9emeni L$,6I$>M+ac L$,6I$>M8eu L$,6I$>M<ecioara L$,6I$>M'alanta L$,6I$>M(corpion L$,6I$>M(agetator L$,6I$>M&apricorn L$,6I$>MUarsator L$,6I$>M,esti L?(E8E&6M LI>,-6 tEpeS%submit% valueS%e#pediaza%M L?<$+7M L?'$)KM L?5678M )ac atributul size este setat la o valoare mai mare dect C meniul va afia un numr de opiuni egal cu aceast valoare i va conine o bar de derulare pentru a face accesibile i celelalte opiuni. =n <igura CC.A poate fi vzut un meniu la care valoarea atributului size este A. ). #tic/eta 9T(CT1%(1= &u ajutorul etic!etei 9T(CT1%(1= 9JT(CT1%(1= putei insera n pagin o caset de te#t multi"linie care permite vizitatorului s introduc un te#t mai lung, care se poate ntinde pe mai multe linii. ceast etic!et se folosete atunci cnd dorim s cerem vizitatorului o opinie despre un anumit subiect, care necesit introducerea unui te#t mai lung dect o singur linie /acest element se mai

numete i caset de comentarii3. L6EW6 +E M este o etic!et container, deci necesit etic!eta de nc!idere L?6EW6 +E M. tributele roFs i cols stabilesc numrul de linii, respectiv de coloane rezervate pentru introducerea te#tului. E#emplul CC.A introduce n pagin o caset pentru comentarii, aspectul acesteia fiind redat n <igura CC.1. ( emplul 11. 0 L5678M L5E )M L6I68EMformulareAL?6I68EM L?5E )M L'$)KM L5C alignS%center%M&aseta de comentariiL?5CML5+M L<$+7 actionS%mailto:adresahEEE.com% met!odS%post%M &are este opinia dumneavoastra despre acest film4L'+M L6EW6 +E nameS%comentariu% ro;sS%CB% colsS%JB%ML?6EW6 +E ML'+M LI>,-6 tEpeS%submit% valueS%e#pediaza%M L?<$+7M L?'$)KM L?5678M 6oate elementele prezentate pot fi reunite ntr"un singur formular sau putei crea formulare diferite, n funcie de informaiile pe care dorii s le obinei de la vizitatorii paginii. )ac dorii s introducei n pagin mai multe formulare, sau elemente de tipuri diferite n cadrul aceluiai formular, trebuie s avei n vedere aspectele care in de alinierea acestora. $ posibilitate de a alinia elementele coninute ntr"un formular este folosirea tabelelor. E#emplul CC.1 conine elemente de mai multe tipuri ncadrate ntr"un formular unic. ,entru alinierea unora dintre ele am folosit un tabel. spectul paginii descrise n acest document este cel din <igura CC.0. ( emplul 11. 2 L5678M L5E )M L6I68EMformulare1L?6I68EM L?5E )M L'$)KM L5C alignS%center%M linierea elementelorL?5CML5+M L<$+7 actionS%mailto:adresahEEE.com% met!odS%post%M L5HM&omandati ,izzaL?5HML,M L,M&ate pizza doriti4 LI>,-6 nameS%nrpizza% valueS%B% sizeSH ma#lengt!SHML,M LI>,-6 tEpeS%radio% nameS%marime% valueS%mare% c!ecIedM7areL'+M LI>,-6 tEpeS%radio% nameS%marime% valueS%medie%M7edieL'+M LI>,-6 tEpeS%radio% nameS%marime% valueS%normala%M>ormala L,M6opping"uriL,M LI>,-6 tEpeS%c!ecIbo#% nameS%topping% valueS%salam%M(alamL'+M LI>,-6 tEpeS%c!ecIbo#% nameS%topping% valueS%carnati%M&arnatiL'+M LI>,-6 tEpeS%c!ecIbo#% nameS%topping% valueS%sunca%M(uncaL'+M LI>,-6 tEpeS%c!ecIbo#% nameS%topping% valueS%ciuperci%M&iuperciL'+M LI>,-6 tEpeS%c!ecIbo#% nameS%topping% valueS%ceapa%M&eapaL'+M LI>,-6 tEpeS%c!ecIbo#% nameS%topping% valueS%masline%M7asline

L,M L6 '8E ;idt!S%AB2%M L6+M L6) ;idt!S%FB2%M>umele L6)MLI>,-6 tEpeS%te#t% nameS%nume%M L6+M L6) ;idt!S%FB2%M6elefonul L6)MLI>,-6 tEpeS%te#t% nameS%telefon%M L6+M L6) ;idt!S%FB2%M dresa L6)ML6EW6 +E nameS%adresa% ro;sSA colsSGBML?6EW6 +E M L6+M L6) ;idt!S%FB2%M>umrul cartii de credit L6)MLI>,-6 tEpeS%pass;ord% nameS%creditcard% sizeSFBM L?6 '8EM L,M L&E>6E+M LI>,-6 tEpeS%submit% valueS%6rimite comanda%M L?&E>6E+M L?<$+7M L?'$)KM L?5678M +. Ca!idarea date!or -nul dintre aspectele importante pe care trebuie s le avei n vedere atunci cnd folosii formulare n paginile dumneavoastr este validarea datelor introduse de vizitatorii lor. 8imbajul 5678 ofer relativ puine instrumente pentru ndeplinirea acestei sarcini. 6otui, avei la dispoziie cteva posibiliti. <olosii atributul ma#lengt! atunci cnd introducei un cmp de editare, pentru a mpiedica vizitatorul s introduc un numr eronat de caractere. )e e#emplu, dac cerei introducerea ntr"o caset de te#t a codului numeric personal, acea caset nu trebuie s permit introducerea a mai mult de CH caractere, un cmp de editare care cere introducerea codului potal nu trebuie s permit introducerea a mai mult de J caractere, etc. ,entru a v asigura c vizitatorul introduce date corecte ntr"un cmp de editare /de e#emplu o adres de mail valid trebuie s conin obligatoriu caracterul %h%3 nu e#ist instrumente 5678. ,entru a realiza astfel de sarcini sunt necesare scripturi :ava(cript. =n capitolul DavaScript vei gsi scripuri utile care fac posibile validrile datelor, nc din momentul introducerii lor. <olosii de cte ori este posibil butoanele radio, casetele de validare i meniurile, pentru a simplifica procesul de introducere a datelor. <ii ct mai e#plicit, asigurai indicaiile necesare pentru completarea formularelor, preciznd, unde este cazul, dac pot fi selectate mai multe opiuni sau numai una singur. 1ten!ieH sigurai"v c scriptul care prelucreaz informaiile din formular are faciliti de gestionare a erorilor. )ac este semnalat o eroare, furnizai vizitatorului un mesaj de eroare e#plicit i, eventual, cteva corecii posibile.

-na dintre cele mai frustrante situaii este ca dup completarea unui formular comple#, la apariia unei erori, vizitatorul s fie nevoit s reia completarea integral a formularului. Evitai acest lucru utiliznd scripturi care returneaz utilizatorului formularul completat, avnd cmpurile greite marcate pentru corectare. >u uitai un amnunt foarte important: informaiile introduse de vizitatori n formulare v sunt necesare dumneavoastr, pentru a mbunti eficiena i calitatea site"ului sau c!iar pentru a derula afaceri prin intermediul su. )e aceea corectitudinea acestor date este esenial. <acei n aa fel nct vizitatorii site"ului dumneavoastr s completeze uor i cu plcere formularele prezente n pagini. ,. -e.umat <ormularele servesc la stabilirea unei legturi interactive cu vizitatorii unei pagini *eb i la obinerea de informaii de la acetia. -n formular se introduce n pagin cu ajutorul etic!etei L<$+7M L?<$+7M. =n cadrul acestei etic!ete pot fi incluse diverse elemente care fac parte din formular: prin etic!eta LI>,-6M pot fi introduse cmpuri de editare, cmpuri de tip pass ord, butoane radio, casete de selecie, butoane de e#pediere, butoane de anulare i butoane obinuite prin etic!eta L(E8E&6M pot fi introduse meniuri derulante, fiecare element al meniului fiind introdus prin etic!eta L$,6I$>M prin etic!eta L6EW6 +E M pot fi introduse cmpuri de editare multilinie. ,entru a specifica unde vor fi trimise datele introduse n formular se folosete atributul action al etic!etei L<$+7M. ,entru a stabili modul n care aceste date sunt transmise se folosete atributul met!od al etic!etei L<$+7M. <ormularele reprezint partea vizibil a procesului de interaciune cu vizitatorul paginii *eb. $dat ce datele au fost introduse n cmpurile formularului, ele trebuie transmise, prelucrate i stocate, n funcie de nevoile creatorului paginii. cest lucru se realizeaz cu ajutorul scripturilor &9I instalate pe server, despre care vom vorbi n capitolul urmtor. 3. Test 1. Ce atribut indic bro serului unde s trimit informaiile din formular9 a3 b3 c3 input action met!od

2. Care dintre aceste valori nu aparine atributului met!od4 a3 b3 c3 9et 5ref ,ost

3. Care dintre urmtoarele afirmaii este fals9 a3 b3 ,rin etic!eta LI>,-6M se pot introduce n formular cmpuri de editare de tip pass ord. ,rin etic!eta LI>,-6M se pot introduce n formular butoane radio.

c3

,rin etic!eta LI>,-6M se pot introduce n formular meniuri derulante.

4. &entru a introduce 6n formular un buton de expediere se folose7te construcia4 a3 b3 c3 LI>,-6 tEpeS%reset%M LI>,-6 tEpeS%submit%M LI>,-6 tEpeS%for;ard%M

). .ie urmtoarea construcie4 L<$+7 actionS%mailto:adresahEEE.com% met!odS%post%M LI>,-6 tEpeS%radio% nameS%limba% valueS%romana%M8imba romana LI>,-6 tEpeS%radio% nameS%limba% valueS%germana%M8imba germana LI>,-6 tEpeS%radio% nameS%limba% valueS%mag!iara%M8imba mag!iara L?<$+7M Dac este bifat opiunea (imba romana, care este perechea nume2valoare care va fi transmis serverului9 a3 b3 c3 %limbaS8imba romana% %limbaSromana% %radioSromana%

+. Care este diferena dintre un cHmp de editare de tip text 7i unul de tip pass ord9 a3 =ntr"un cmp de tip te#t se pot introduce mai multe linii, ntr"unul de tip pass ord o singur linie. b3 =ntr"un cmp de tip te#t caracterele introduse sunt afiate, ntr"unul de tip pass ord sunt nlocuite cu asteriscuri. c3 &mpul de editare se introduce cu ajutorul etic!etei LI>,-6M, cmpul de tip pass ord se introduce cu ajutorul etic!etei L(E8E&6M. ,. &entru a insera 6ntr!un formular o caset de validare se folose7te eticheta LI>,-6M cu atributul tEpe setat la valoarea4 a3 b3 c3 %radio% %c!ecIbo#% %option%

3. Ce reali8ea8 eticheta L(E8E&6M9 a3 b3 c3 Introduce un buton de anulare. Introduce un meniu derulant. Introduce o list de casete de validare.

4. (a ce serve7te eticheta L6EW6 +E M9 a3 b3 c3 (tabilete zona din fereastra bro;serului care este rezervat pentru te#t. Introduce n formular un cmp de editare multi"linie. Introduce n formular un cmp de editare pe o singur linie.

1;. Care dintre urmtoarele afirmaii este fals9

a3 )atele introduse n formular sunt trimise la server, dac este folosit un script &9I. b3 )atele introduse n formular sunt trimise la o adres de mail specificat, dac este folosit comanda mailto: c3 )atele introduse n formular sunt stocate pe !ard"disI"ul vizitatorului paginii.

+ormulare
1. b3 '. b3 *. c3 ,. b3 -. b3 0. b3 2. b3 4. b3 5. b3 1>. c3

Capitolul 1' Scripturi C@; ,rogramare &9I, scripturi &9I sunt cuvinte care strnesc, cel mai adesea, teama. 7ultora dintre cei care doresc s creeze pagini *eb i nu sunt programatori profesioniti aceast zon le apare misterioas i dificil de neles. =n acest capitol vom nva c!estiunile fundamentale i principiile care guverneaz realizarea acestor scripturi precum i modul lor de utilizare. Uei constata c, dei realizarea unui script este destul de laborioas i necesit cunoaterea aprofundat a cel puin unui limbaj de programare /&YY sau ,erl3, nu v va fi deloc greu s nelegei modul cum sunt ele concepute. Uestea bun este aceea c, dei stpnirea unui limbaj de programare este binevenit, nu este absolut necesar pentru a putea utiliza scripturi &9I n paginile dumneavoastr. >u este nevoie s creai propriile dumneavoastr scripturi. ,e *eb e#ist mii de scripturi gratuite care pot fi descrcate i utilizate conform propriilor necesiti. 6ot ceea ce avei de fcut este s nelegei principiile dup care sunt realizate, modul lor de funcionare i maniera n care trebuie s le setai pentru a le adapta nevoilor dumneavoastr. 1. Ce este CA(? ( ncepem prin a preciza ce nu este C@;: nu este un limbaj de programare. &9I, prescurtare de la Common ,ate a$ 'nterface, este un protocol standard de comunicare ntre documentele *eb i aplicaiile localizate pe serverul *eb. Scripturile C@; sunt pro/rame care respect acest protocol /un protocol este un set de reguli3. -n script &9I este, deci, un program care comunic ntr"un anumit mod cu pagina dumneavoastr. E#istena acestui protocol de comunicare ntre programele de pe server i documentele *eb permite crearea unor pagini interactive i dinamice, lucru care nu poate fi fcut folosind doar 5678. tunci cnd bro;serul solicit un script &9I aflat pe server, serverul lanseaz n e#ecuie scriptul i i transmite acestuia !eaderele 566, de cerere primite de la bro;ser. )up ce e#ecuia scriptului se nc!eie, rezultatele sunt transmise serverului, care formateaz !eaderele de rspuns i le transmite bro;serului pentru ca acesta s afieze rezultatele. $ alt posibilitate este ca scriptul s conin instruciuni prin care !eaderele de rspuns sunt configurate c!iar de script i transmise de acesta direct bro;serului.

Indiferent dac solicit un document *eb sau un script, bro;serul trebuie s cunoasc locaia serverului *eb i numele fiierului solicitat. ceast informaie i este transmis bro;serului prin intermediul atributului action al etic!etei L<$+7M care primete drept valoare adresa -+8 a scriptului stocat pe server. )e obicei, scripturile &9I sunt stocate pe server ntr"un director special destinat lor, care se numete c&i-<in. 2. Trans'eru! date!or a cum am vzut n capitolul anterior, datele pe care dorim s le obinem de la vizitatorul paginii sunt colectate prin intermediul formularelor. )atele astfel colectate sunt transmise de ctre bro;ser la serverul pe care este instalat scriptul &9I prin intermediul !eaderelor 566, de cerere. &ele mai importante !eadere 566, de cerere sunt @et i Post. ,rin intermediul atributului met!od al etic!etei L<$+7M este specificat ce tip de !eader 566, de cerere este utilizat pentru a transfera datele la server. )ac metoda folosit este 9et, datele sunt transmise prin intermediul adresei -+8. )ac folosii metoda ,ost datele sunt transmise sub forma unui fiier separat. Este recomandat folosirea metodei ,ost atunci cnd volumul de date transmise este mare /depete CBFJ de octei, lungimea ma#im a unui -+83. )up ce metoda de transmitere este stabilit, bro;serul creeaz un !eader 566, de cerere prin care este identificat localizarea scriptului pe server i apoi transmite !eaderul la server. (erverul recepioneaz !eaderul de cerere i apeleaz scriptul &9I. $dat datele ajunse la server, scriptul este lansat n e#ecuie iar datele i sunt transmise acestuia prin intermediul unui tip special de variabile numite variabile de mediu /dac folosii metoda 9et3 sau prin intermediul fiierului standard de intrare /dac folosii metoda ,ost3. (criptul &9I e#ecut sarcinile pentru care a fost conceput i obine anumite rezultate care urmeaz a fi transmise bro;serului prin intermediul unor !eadere 566, de rspuns. )e obicei, scriptul configureaz un singur !eader de rspuns, i anume &ontent"6Epe. cest !eader comunic bro;serului tipul de date care i vor fi returnate: documente 5678, imagini sau alt tip de fiiere. (erverul adaug i el !eadere 566, de rspuns suplimentare, apoi strnge toate rezultatele i !eaderele de rspuns ntr"un pac!et care este transmis bro;serului. 'ro;serul l recepioneaz i afieaz informaiile primite n modul descris de !eaderele de rspuns. 3. #xecuia scriptu!ui &e face scriptul &9I dup ce este lansat n e#ecuie4 +spunsul este simplu: e#ecut sarcinile pentru care a fost construit. (arcinile pe care le poate realiza un script sunt diverse i numeroase. Iat cteva e#emple: manipularea informaiilor introduse prin intermediul formularelor manipularea !rilor de imagini generarea contoarelor care monitorizeaz numrul de accesri ale paginii /hit counters3 construirea de motoare de cutare administrarea licitaiilor on!line crearea de aplicaii interactive cum ar fi forumurile sau camerele de c!at crearea i manipularea bazelor de date &um am mai spus, scrierea unui script care ndeplinete astfel de sarcini nu este simpl. ,entru a putea concepe un script este necesar cunoaterea aprofundat a unui limbaj de programare. (unt utilizate limbaje variate pentru realizarea scripturilor: ,erl, & sau &YY, Uisual 'asic, etc. )escrierea acestor limbaje i a principiilor de programare depete cu mult obiectul acestei cri. )e altfel, aa cum spuneam, pentru a construi o pagina *eb interactiv cu ajutorul scripturilor &9I, nu este necesar

s le creai c!iar dumneavoastr. ,e *eb e#ist foarte multe site"uri care pun la dispoziia vizitatorilor mii de scripturi gratuite. )e obicei ele sunt nsoite de instruciuni de instalare i utilizare. ,utei alege dintre acestea pe acelea care satisfac cerinele dumneavoastr. 6otui, pentru a face o alegere n cunotin de cauz precum i pentru a putea s facei modificrile necesare instalrii i funcionrii scriptului, avei nevoie s cunoatei cteva noiuni legate de structura unui script &9I. 4. Structura unui script (tructura unui script &9I conine urmtoarele seciuni: citirea datelor introduse prin intermediul formularului prelucrarea datelor i efectuarea sarcinilor impuse de programator afiarea rezultatelor. Citirea date!or -nul dintre elementele de baz cu care lucreaz un script l constituie variabilele de mediu. Uariabilele de mediu sunt o categorie special de variabile, folosite de server n procesul de e#ecuie al scriptului. ceste variabile conin informaii despre server, despre bro;ser i despre datele introduse de utilizator. >umrul variabilelor de mediu este destul de mare, dar e#ist cteva care au o importan special pentru script. cestea sunt: %(L#(STPM(THB: L#(%IPST%;A@ CBAT(ATPL(A@TH Uariabila de mediu %(L#(STPM(THB: poate avea cele dou valori despre care am mai amintit: 9et i ,ost. ,rin intermediul ei serverul informeaz scriptul asupra modului cum i sunt transmise datele. a cum am nvat n capitolul anterior, datele introduse de utilizator sunt transmise n perec!i nume?valoare. Uariabila de mediu L#(%IPST%;A@ este folosit pentru a reine datele de intrare n cazul folosirii metodei 9et iar variabila CBAT(ATPL(A@TH este folosit pentru a specifica lungimea irului de caractere citit din fiierul de intrare, n cazul folosirii metodei ,ost. Transmiterea datelor prin metoda @et &nd serverul folosete metoda @et datele introduse n formular sunt adugate la sfritul adresei -+8 a scriptului. ,entru a face lucrurile mai clare, s luam un e#emplu. s presupunem c n pagina dumneavoastr se afl un formular care conine dou cmpuri de editare numite %nume% i %prenume%. &u alte cuvinte codul formularului dumneavoastr va arta astfel: L<$+7 actionS%cgi"bin?script.cgi% met!odS%9et%M LI>,-6 tEpeS%te#t% nameS%nume%MIntroduceti numele LI>,-6 tEpeS%te#t% nameS%prenume%MIntroduceti prenumele LI>,-6 tEpeS%submit%M L?<$+7M

( mai presupunem c vizitatorul introduce n cmpul %nume% valoarea %,opescu% iar n cmpul %prenume% valoarea %Ion% i c adresa -+8 a scriptului nostru este ;;;.!tml.com?cgi" bin?scriptulmeu.cgi? tunci serverului i este transmis urmtoarea adres -+8: !ttp:??;;;.!tml.com?cgi"bin?scriptulmeu.cgi?4numeS,opescu\prenumeSIon .irul de caractere de dup semnul de ntrebare este depus n variabila de mediu [-E+KV(6+I>9. Transmiterea datelor prin metoda Post 7etoda Post este cea mai folosit n transmiterea datelor. tunci cnd datele sunt trimise prin aceast metod, ele sunt furnizate scriptului prin intermediul .iierului standard de intrare, ST:;A. ,entru a preciza scriptului lungimea irului de caractere /numrul de octei3 pe care l are de citit, aceasta este reinut n variabila de mediu &$>6E>6V8E>965. Indiferent de metoda folosit, dup citirea datelor scriptul trebuie s le decodifice, adic s elimine din irul de caractere primit toate caracterele care nu au fost introduse de utilizator: %\%, %S% i altele. )up citirea i decodificarea datelor scriptul e#ecut instruciunile de procesare a lor i pregtete rspunsul pentru server. 1'iarea re.u!tate!or =n general, rspunsurile pe care scriptul le transmite serverului se mpart n dou categorii: (arcina a fost ndeplinit cu succes (arcina nu a fost ndeplinit, au aprut erori. )ac e#ecuia scriptului este ncununat de succes iar sarcinile sale au fost ndeplinite, acesta transmite serverului un rspuns n consecin. )ac, din diverse motive, au aprut erori la e#ecuia scriptului iar acesta nu i"a dus sarcinile la bun sfrit, serverului i este prezentat un mesaj de eroare, care trebuie s conin informaii despre natura erorii aprute. )e e#emplu, s presupunem c n pagina dumneavoastr ai plasat un formular care solicit datele personale ale vizitatorului, care sunt transmise unui script a crui sarcin este s trimit aceste date la o adres specificat de mail /aceasta este una dintre cele mai comune utilizri ale scripturilor3. )up ce vizitatorul a introdus datele iar scriptul i"a nc!eiat e#ecuia, este bine s afieze un mesaj pentru vizitator prin care l informeaz c datele sale au fost e#pediate. ,e de alt parte, dac a survenit o eroare la introducerea datelor, vizitatorului trebuie s"i fie oferit un mesaj prin care este informat despre acest lucru i, n plus, despre posibilitatea de a remedia eroarea. 7esajele privind rezultatele e#ecuiei pot fi trimise de script serverului, care formateaz !eaderele 566, de rspuns, sau scriptul poate formata el nsui !eaderele i poate trimite rezultatele direct la bro;ser. E#ist trei tipuri fundamentale de !eadere de rspuns: C. F. Content"TGpe Location

H.

Status

Content"tGpe 'ro;serul dumneavoastr primete !eadere de tipul &ontent"6Epe ori de cte ori primete de la server un document 5678, o imagine sau orice alt tip de fiier. Indiferent de natura fiierului transmis de la server la bro;ser, serverul va asocia fiierului acest !eader pentru a comunica bro;serului tipul fiierului trimis. 6ipurile de fiiere care pot fi transmise bro;serului sunt asociate sub numele de tipuri M;M( /Multipurpose 'nternet Mail 5xtensions3. &lasificarea se bazeaz pe coninutul fiierului trimis. Iat cele apte tipuri 7I7E fundamentale: 6e#t 7ultipart 7essage pplication Image udio Uideo <iecare dintre aceste tipuri are un numr de sub"tipuri. 5eaderul &ontent"6Epe specific att tipul ct i subtipul 7I7E al fiierului trimis. Iat cteva e#emple: " " " " 6e#t?5678 6e#t?plain Image?gif Image?jpeg

Location cest !eader conine adresa -+8 a documentului pe care scriptul dorete s"l trimit ca rspuns ctre bro;ser. )e e#emplu, dac rspunsul pe care dorii s"l primeasc vizitatorul paginii dup transmiterea datelor este un document 5678 care se numete multumesc)html atunci scriptul va conine un !eader ca acesta: 8ocation: multumesc.!tml urmat de o linie liber. =n acest mod bro;serul este redirecionat ctre -+8"ul documentului respectiv. =n situaia cnd folosii !eaderul 8ocation pentru a afia rspunsul, scriptul nu va mai include !eaderul de rspuns &ontent"6Epe. Status 5eaderul (tatus returneaz ctre bro;ser un cod format din trei cifre mpreun cu un te#t e#plicativ. i vzut de foarte multe ori acest !eader n situaiile cnd cererea trimis de bro;ser nu a fost ndeplinit, iar documentul solicitat nu a putut fi furnizat de ctre server. Iat cteva dintre cele mai cunoscute coduri de status: JBB j 'ad reTuest j apare n situaia cnd sinta#a !eaderului 566, de cerere a fost eronat JBC j -naut!orized j apare cnd, pentru a obine documentul solicitat, sunt necesare anumite privilegii de acces

JBH j <orbidden j apare cnd serverul refuz accesul la document JBJ j <ile >ot <ound j apare n situaia cnd serverul nu poate gsi documentul solicitat ). #xemp!e de scripturi 8imbajul cel mai folosit pentru scrierea scripturilor este ,erl. &!iar dac nu cunoatei acest limbaj, dac avei totui cunotine minime de programare, nu v va fi greu s nelegei structura scripturilor prezentate n continuare. )in pcate, spre deosebire de documentele 5678 care pot fi scrise ntr"un simplu editor de te#t i apoi vizualizate cu ajutorul bro;serului, cu scripturile lucrurile nu mai stau aa. ,erl este un limbaj interpretat. ceasta nseamn c putei scrie codul surs ntr"un editor de te#t, cum ar fi >otepad. )ar pentru ca scriptul s funcioneze, serverul trebuie s aib instalat un interpretor de ,erl. 7ajoritatea serverelor *eb dein un astfel de interpretor. )ac dorii s instalai i dumneavoastr un interpretor ,erl i s testai funcionarea scripturilor prezentate n e#emplele de mai jos, ba mai mult, dac dorii s v transformai propriul calculator ntr"un server *eb pe care s putei rula scripturi ,erl, precum i s v testai funcionarea ntregului site, vei afla cum putei realiza acest lucru n ultima parte a acestui capitol. ,entru moment, iat cteva e#emple simple de scripturi ,erl din care v putei face o idee despre structura unui script i sinta#a limbajului ,erl. &el mai simplu script este clasicul e#emplu % #ello, orld J%prezentat n E#emplul CF.C. cest script ilustreaz modul n care se realizeaz configurarea !eaderului de rspuns &ontent"6Epe i afiarea unui document 5678. ( emplul 1'. 1 C RN?usr?bin?perl F H print %&ontent"6Epe: te#t?!tmlfnfn%] J G print %L5678Mfn%] A print %L5E )Mfn%] 1 print %L6I68EM5ello *orld NL?6I68EMfn%] 0 print %L?5E )Mfn%] D print %L'$)KMfn%] CB print %L5CM5ello *orld NL?5CMfn%] CC print %L,Mfn%] CF print %L5HM5ave a nice daEL?5HMfn%] CH print %L?'$)KMfn%] CJ print %L?5678Mfn%] 8iniile scriptului nu sunt, n general, numerotate, numerotarea servind aici doar la referirea lor mai uoar. cest e#emplu simplu realizeaz afiarea pe ecran a te#tului %5ello *orld N%, i a mesajului %5ave a nice daE%. >u e#ist o etap de citire a datelor, deoarece nu e#ist date de intrare. 8inia C conine calea spre interpretorul ,erl aflat pe server. )ac sistemul sub care lucreaz serverul este ->IW, semnul R trebuie ndeprtat. =n linia a H"a este configurat !eaderul 566, de rspuns, &ontent"6Epe. a cum observai, documentul care va fi transmis bro;serului este de tip te#t, i anume un document 5678. (ecvena de caractere %fn% care se repet la finalul fiecrei linii se numete secven!$ escape. +olul acesteia este s realizeze, la afiare, trecerea pe rndul urmtor. ,e linia n care este definit !eaderul &ontent"6Epe este obligatorie prezena a dou secvene escape.

6oate instruciunile scriptului sunt instruciuni de afiare. ,rin intermediul lor, scriptul descrie bro;serului pagina *eb pe care urmeaz s o afieze. (tructura paginii conine, dup cum vedei, toate seciunile necesare: etic!eta de desc!idere a documentului: L5678M, antetul: L5E )M i corpul documentului: L'$)KM. )ac dorii s testai funcionarea scriptului, scriei"l n >otepad i salvai"l sub numele hello)pl /e#tensia .pl indic un program scris n limbajul ,erl. (e mai poate folosi i e#tensia .b/i3. poi instalai scriptul n directorul cgi!bin al serverului dumneavoastr. )up e#ecutarea scriptului, pagina de rspuns arat ca n <igura CF.C E#emplul urmtor realizeaz preluarea datelor introduse de vizitator prin intermediul unui formular i afiarea lor pe ecran. <ormularul pentru introducerea datelor prezentat n E#emplul CF.F conine doar casete de te#t, n care vor fi introduse numele, prenumele i adresa de mail. tributul action al etic!etei L<$+7M trimite la scriptul script>)pl aflat n directorul cgi!bin al serverului. spectul formularului este cel din <igura CF.F ( emplul 1'. ' L5678M L5E )M L6I68EMcgiFL?6I68EM L?5E )M L'$)KM L<$+7 met!odS%,$(6% actionS%cgi"bin?scriptF.pl%M >umele: LI>,-6 tEpeS%te#t% nameS%nume%ML'+M ,renumele: LI>,-6 tEpeS%te#t% nameS%prenume%ML'+M dresa de email: LI>,-6 tEpeS%te#t% nameS%email%ML'+M LI>,-6 tEpeS%submit% valueS%6rimite%M L?<$+7M L?'$)KM L?5678M $bservai c datele sunt transmise la scriptul script>)pl aflat n directorul cgi!bin, prin intermediul metodei ,ost. E#emplul CF.H ilustreaz modul de construire al scriptului script>)pl. ( emplul 1'. * C RN?usr?bin?perl F H R ,lasarea datelor transmise prin metoda ,ost in variabile J G read/(6)I>, mbuffer, mE>Unl&$>6E>6V8E>965lo3] A hpairsSsplit/?\?, mbuffer3] 1 foreac! mpair /hpairs3 0 n D /mname, mvalue3Ssplit/?S?, mpair3] CB mvalueSp tr?Y? ?] CC mvalueSp s?2/Pa"f "<B"DQPa"f "<B"DQ3?pacI/%&%, !e#/mC33?eg] CH CJ CG m<$+7nmnameoSmvalue] o Rafisarea rezultatului

CA C1 print %&ontent"tEpe: te#t?!tmlfnfn%] C0 CD print %L5678Mfn%] FB print %L5E )Mfn%] FC print %L6I68EM7ultumescNL?6I68EMfn%] FF print %L?5E )Mfn%] FH print %L'$)KMfn%] FJ print %L5CM7ultumescNL?5CMfn%] FG print %L'+Mfn%] FA print %L5JM)atele introduse sunt:L?!JMfn%] F1 print %L'+Mfn%] F0 print %L5HMm<$+7nlnumelo m<$+7nlprenumeloL?5HMfn%] FD print %L5HMm<$+7nlemailloL?5HMfn%] HB print %L?'$)KMfn%] HC print %L?5678Mfn%] (e impun cteva e#plicaii. 7ai nti, observai pe liniile C, H i CG prezena caracterului R. cesta este modul de a introduce comentarii ntr"un program ,erl. &omentariile sunt e#trem de utile, mai ales la scripturi. -n script necomentat este foarte greu de utilizat. &a i n cazul comentariilor introduse n documentele 5678, acestea sunt ignorate la e#ecuie. ,rima seciune a scriptului realizeaz citirea datelor. )eoarece acestea au fost transmise prin metoda ,ost, observai c citirea se face din fiierul standard de citire, (6)I>. =ntre liniile G i CJ se realizeaz citirea, decodificarea datelor i plasarea lor n variabilele corespunztoare. (ecvena dintre liniile CA i HC reprezint partea de afiare a rezultatelor. &a i n e#emplul anterior, observai c linia n care se face formatarea !eaderului de rspuns &ontent"6Epe necesit prezena a dou secvene escape %fnfn%. ( presupunem c datele introduse n formular sunt: nume " Ionescu prenume " 7aria adresa de mail " ionmarhEa!oo.com. tunci pagina generat de script va arata ca n <igura CF.H pelul scripturilor nu se face numai prin intermediul formularelor. (e poate realiza i prin intermediul imaginilor sau al legturilor. ,rezentm n continuare o pagina *eb care apeleaz scriptul ip)pl prin intermediul unei legturi. (criptul realizeaz afiarea adresei I, a computerului pe care este instalat. E#emplul CF.J prezint documentul 5678 n care este apelat scriptul. din <igura CF.J ( emplul 1'. , L5678M L5E )M L6I68EMcgiJL?6I68EM L?5E )M L'$)KM L<$>6 faceS%arial% sizeS%J%M ,entru a afla adresa dumneavoastra de I, apasati L !refS%cgi"bin?ip.pl%M aiciL? M spectul paginii este cel

L?<$>6M L?'$)KM L?5678M (criptul ip)pl folosete variabila de mediu +E7$6EV ))+ pentru a obine adresa I,. =n E#emplul CF.G este prezentat scriptul ip)pl. ( emplul 1'. C RN?usr?bin?perl F H print %&ontent"6Epe: te#t?!tmlfnfn%] J G print %L5678Mfn%] A print %L5E )Mfn%] 1 print %L6I68EMcgiHL?6I68EMfn%] 0 print %L?5E )Mfn%] D print %L'$)KMfn%] CB print %L,Mfn%] CC print %L5HM dresa I, a computerului dvs. este: mE>Un+E7$6EV ))+o L?5HMfn%] CF print %L?'$)KMfn%] CH print %L?5678Mfn%] 8a apsarea linI"ului din documentul 5678 este apelat scriptul, care afieaz pagina de rspuns din <igura CF.G Evident, dac vei rula scriptul pe alt computer, adresa I, obinut va fi diferit. &nd scriptul este apelat printr"un linI nu e#ist posibilitatea de a i se transmite date. +. (nsta!area interpretoru!ui :er! i a ap!icaiei :=S ,entru a putea verifica funcionarea e#emplelor prezentate precum i a scripturilor pe care dorii s le folosii n cadrul site"ului dumneavoastr nainte de etapa publicrii pe *eb trebuie s avei instalat un interpretor ,erl. ,utei descrca i instala interpretorul ctive ,erl vizitnd adresa: !ttp:??;;;.gossland.com?course?install.!tml 8a aceeai adres putei gsi i aplicaia 7icrosoft ,ersonal *eb (erver /,*(3 care este furnizat de 7icrosoft n pac!etele *indo;s D0 i *indo;s FBBB. +ecomandm descrcarea aplicaiei de la adresa menionat, care are avantajul c include o corecie a unui bug de instalare e#istent n versiunea oficial 7icrosoft. 1ten!ieH 7icrosoft ,ersonal *eb (erver se poate instala pe computerul personal avnd rolul de aplicaie server. $dat instalat, computerul dumneavoastr va funciona ntocmai ca un server *eb, astfel nct v vei putea testa funcionarea scripturilor instalate precum i funcionarea ntregului site. )in pcate, 7icrosoft nu furnizeaz o aplicaie server similar i n pac!etele *indo;s 7ilenium i *indo;s W, iar aplicaia ,*( nu funcioneaz dect pe sistemele *indo;s D0 i FBBB. 8a adresa indicat vei gsi ndrumri precise i complete asupra tuturor pailor pe care i avei de urmat pentru a instala att interpretorul ,erl ct i aplicaia ,ersonal *eb (erver. =n plus, site"ul respectiv conine i un foarte bun curs de iniiere n limbajul ,erl n limba englez.

,. -e.umat &9I este un protocol de comunicare face legtura dintre scripturile aflate pe serverul *eb i documentele 5678. -n script &9I este o aplicaie care respect acest protocol. ,rintre cele mai folosite scripturi &9I sunt cele care servesc la procesarea informaiilor introduse ntr"un formular. 6ransferul datelor de la formular la serverul pe care se afl scriptul se face printr"una dintre cele dou metode: 9et sau ,ost. )up ce datele au fost transmise la server, scriptul le citete i le decodific, le prelucreaz conform instruciunilor sale i transmite un rspuns ctre bro;ser. 'ro;serul afieaz rezultatele trimise de script n conformitate cu !eaderele de rspuns incluse n pac!etul de date transmis. Capitolul 1* DavaScript 1. Ce este Ba"aScript? :ava(cript este un limbaE de pro/ramare orientat pe obiecte, care v permite s oferii paginilor dumneavoastr un caracter mai dinamic i interactiv. )ac ai parcurs prima parte a crii i avei cunotine minime de programare, nu vei avea dificulti n nelegerea modului n care funcioneaz acest limbaj. 1ten!ieH :ava(cript nu este acelai lucru cu limbajul :ava. )e fapt, dei numele sunt asemntoare, sunt dou limbaje foarte diferite. (pre deosebire de :ava, care este un limbaj orientat pe obiecte, comple#, asemntor cu limbajul &YY, :ava(cript este mult mai simplu i mai uor de folosit. =n timp ce :ava este un limbaj pentru programatori, :ava(cript este destinat neprofesionitilor care doresc s mbunteasc aspectul i funcionalitatea paginilor de *eb. :ava(cript a fost dezvoltat de >etscape &orporation pentru a fi utilizat n bro;serul >etscape >avigator. -n script :ava(cript poate fi plasat direct n pagina *eb, fiind e#ecutat de bro;ser mpreun cu documentul *eb care"l conine. 'ro;serul Internet E#plorer /versiunile mai noi dect IE H.B3 e#ecut i el corect scripturile :ava(cript. :ava(cript este un limbaj interpretat, ca i ,erl, dar n cazul su nu trebuie s v mai facei griji n privina instalrii unui interpretor deoarece acesta este inclus n bro;ser. &odul surs poate fi inclus n pagina *eb sau poate fi pus ntr"un fiier separat care este referit din pagin. &a i n cazul scripturilor &9I, nici n acest caz nu este absolut necesar cunoaterea limbajului :ava(cript pentru a putea insera i utiliza cu succes astfel de scripturi. E#ist un numr impresionant de scripturi gata de utilizare, care se pot integra cu uurin n codul surs al documentelor dumneavoastr. 2. Cum poate 'i inc!us un script n pa&in*? (cripturile :ava(cript pot fi incluse n pagina *eb n dou moduri: prin intermediul etic!etei 9SC%;PT= 9JSC%;PT= prin intermediul unei proceduri eveniment

Iat un e#emplu foarte simplu n care n document este inclus un script care afieaz n pagin te#tul %'una ziuaN% prin intermediul etic!etei L(&+I,6M. spectul acestei pagini este cel din <igura CH.C. ( emplul 1*. 1 L5678M L5E )M L6I68EMjavascriptCL?6I68EM L?5E )M L'$)KM L5CM,rimul e#emplu :ava(criptL?5CML5+M L(&+I,6 languageS%:ava(cript%M document.;rite/%'una ziuaN%3 L?(&+I,6M L?'$)KM L?5678M -nul dintre atributele etic!etei L(&+I,6M este lan/ua/e prin care este specificat limbajul n care este scris scriptul, n cazul acesta valoarea atributului fiind %:ava(cript%. $ alt modalitate de a include de a include un script n pagin este salvarea acestuia ca un fiier e#tern i apelarea sa prin intermediul atributului src al etic!etei L(&+I,6M. =n e#emplele de scripturi care vor urma vei observa diverse moduri n care pot fi incluse n paginile *eb scripturi :ava(cript. >u vom intra n amnunte privind sinta#a limbajului, deoarece aceasta depete subiectul acestei cri. 6otui, pentru a putea folosi judicios un script :ava(cript trebuie s avei o imagine despre elementele eseniale cu care lucreaz :ava(cript, obiectele i evenimentele. D<iecte -n obiect este un nou tip de date, care reunete sub aceeai denumire att datele ct i funciile care le prelucreaz. )atele se numesc propriet$!ile obiectului iar funciile se numesc metodele obiectului. ,entru a e#emplifica aceste concepte, s presupunem c dorim s construim un obiect care s reprezinte o carte de vizit, pe care l vom numi &ard. cest obiect va avea urmtoarele proprieti: " nume " adres " telefon ,entru a defini un obiect se folosete o funcie numit constructor. =n e#emplul nostru, funcia constructor a obiectului &ard va arata astfel: function &ard/num, adr, tel3 n t!is.numeSnum] t!is.adresaSadr] t!is.telefonStel] o =n acest moment, constructorul obiectului &ard nc nu este complet, el conine numai proprietile obiectului.

cum s construim i o metod care s lucreze cu acest obiect. )eoarece dorim s tiprim crile de vizit pe care le vom realiza cu ajutorul acestui obiect, vom crea o funcie care va tipri proprietile obiectului, numit ,rint&ard/3. function ,rint&ard/3 n document.;rite/%>umele: %, t!is.nume, %fn%3] document.;rite/% dresa: %, t!is.adresa, %fn%3] document.;rite/%6elefonul: %, t!is.telefon, %fn%3] o cum putem scrie definiia complet a obiectului nostru: function &ard/num, adr, tel3 n t!is.numeSnum] t!is.adresaSadr] t!is.telefonStel] t!is.,rint&ardS,rint&ard] o ( trecem, acum, la folosirea unui obiect. ,entru a crea un obiect concret, adic o instan a obiectului &ard, se folosete cuvntul c!eie ne;. -rmtoarea instruciune construiete o instan a obiectului &ard, care se numete ana: anaSne; &ard /% na 7unteanu%, %(tr. pusului, nr.F, 'ucuresti%, %ACAFHJG%3 $dat ce a fost creat o nou instan a obiectului &ard, metoda ,rint&ard poate fi folosit astfel: ana.,rint&ard/3 .i acum, s punem toate aceste secvene de cod laolalt i s folosim obiectul ntr"o pagin *eb, pentru a afia mai multe cri de vizit. E#emplul CH.F realizeaz acest lucru. spectul paginii descrise n document este cel din <igura CH.F. ( emplul 1*. ' L5678M L5E )M L6I68EMjavascriptFL?6I68EM L(&+I,6 languageS%:ava(cript%M function ,rint&ard/3 n document.;rite/%L'M>umele:L?'M %, t!is.nume, %L'+M%3] document.;rite/%L'M dresa:L?'M %, t!is.adresa, %L'+M%3] document.;rite/%L'M6elefonul:L?'M %, t!is.telefon, %L5+M%3] o function &ard/num, adr, tel3 n t!is.numeSnum] t!is.adresaSadr] t!is.telefonStel] t!is.,rint&ardS,rint&ard] o L?(&+I,6M

L?5E )M L'$)KM L5C alignS%center%M&rearea obiectelorL?5CM Inceputul scriptuluiL5+M L(&+I,6 languageS%:ava(cript%M ?? &rearea a trei obiecte noi anaSne; &ard /% na 7unteanu%, %(tr. pusului, nr.F, 'ucuresti%, %ACAFHJG%3 ionSne; &ard/%Ion ,opescu%, %(tr. gorilor nr.C, ,loiesti%, %JGA10D%3] raduSne; &ard/%+adu Ionescu%, %(tr. >optii, nr.H, ,itesti%, %FBCFBF%3] ?? fisarea lor ana.,rint&ard/3] ion.,rint&ard/3] radu.,rint&ard/3] L?(&+I,6M (farsitul scriptului L?'$)KM L?5678M ,utei observa modul n care a fost inclus scriptul n pagina *eb. stfel, definiia scriptului este plasat n antetul documentului 5678, iar apelul scriptului este fcut n corpul documentului. =n cadrul scriptului apar dou linii precedate de irul de caractere %??%. cesta este modul n care se introduc comentariile n cadrul scripturilor :ava(cript. #"enimente =n continuare vom discuta despre un alt concept fundamental cu care lucreaz :ava(cript, i anume evenimentul. -n eveniment este o aciune care survine la un moment dat i n urma creia este declanat e#ecuia unei anumite pri din program. $ri de cte ori vizitatorul face clicI pe o legtur, de e#emplu, cnd introduce un te#t sau c!iar cnd trece cu mouse"ul deasupra unei zone a paginii, survine un eveniment la care scriptul reacioneaz genernd un rspuns. Iat care sunt tipurile de evenimente cu care lucreaz :ava(cript: Tabel 1*. 1 (veniment on bort on'lur on&!ange on&licI onError on<ocus on8oad :escriere pare cnd utilizatorul renun la ncrcarea unei imagini pare cnd un obiect din pagin pierde focusul pare cnd un cmp de editare este modificat de utilizator /cnd se introduce un te#t3 pare cnd utilizatorul face clicI pe un element pare cnd un document sau o imagine nu se ncarc corect pare cnd un element primete focusul pare cnd o pagin sau o imagine i termin ncrcarea

on7ouse$ver on7ouse$ut on(elect on(ubmit on-nload

pare cnd cursorul mouse"ului se plimb deasupra unui element pare cnd cursorul mouse"ului prsete elementul pare cnd utilizatorul selecteaz un te#t pare cnd este apsat un buton de tip (ubmit pare cnd utilizatorul documentul sau sesiunea curent. prsete

)up cum vedei, prin intermediul :ava(cript se poate rspunde unui mare numr de evenimente. cest lucru se realizeaz prin crearea unei proceduri eveniment. ,rocedurile eveniment nu sunt definite cu ajutorul etic!etei L(&+I,6M ci ele sunt atribute ale celorlalte etic!ete. )e e#emplu, iat o legtur care include o procedur eveniment: L !refS%!ttp:??;;;.amazon.com% on7ouse$verS% ;indo;.statusS@&ea mai mare librarie virtuala@] return true%M &licI aiciL? M $bservai c ntreaga procedur eveniment care rspunde la evenimentul 7ouse$ver este inclus n etic!eta L M. (unt specificate dou instruciuni care se e#ecut n momentul cnd cursorul mouse" ului este plasat deasupra legturii. ,rima afieaz un mesaj n bara de status a ferestrei, urmtoarea returneaz valoarea true, pentru a mpiedica tergerea mesajului. 7ai observai c mesajul care va fi afiat este delimitat de apostrofuri. )ac procedura eveniment este mai e#tins, includerea ei n ntregime ntr"o etic!eta devine nepractic. =n aceast situaie, este mai avantajos s construim o funcie care s trateze evenimentul. <uncia este definit n seciunea L5E )M a documentului, iar n corpul documentului este apelat ca procedur eveniment. )e e#emplu, s presupunem c am construit o funcie eveniment numit &iteste/3. tunci ea poate fi apelat astfel: L !refS%Rcuprins% on7ouse$verS%&iteste/3]%M7ergi la &uprinsL? M =n momentul cnd mouse"ul se afl deasupra legturii, funcia este lansat n e#ecuie. 3. Modu! de execuie a! scriptu!ui (cripturile integrate n cadrul paginilor sunt evaluate dup ce ncrcarea paginii s"a nc!eiat dar nainte ca aceasta s fie afiat. ,e de alt parte, scripturile stocate ca fiiere separate sunt evaluate naintea tuturor scripturilor in!line /adic a celor incluse n pagin3. <unciile definite n cadrul scripturilor nu sunt e#ecutate automat la ncrcarea paginilor ci abia atunci cnd acestea sunt apelate, fie prin etic!eta L(&+I,6M fie printr"o procedur eveniment. )ac ai vzut vreodat un script :ava(cript ntr"o pagin *eb, poate ai remarcat un lucru aparent ciudat: ntregul script este inclus ntre etic!etele 5678 de comentariu: LN" " comentariu " "M. 7otivul este faptul c e#ist bro;sere care nu recunosc i nu pot e#ecuta scripturile :ava(cript. )ac un document *eb care conine cod :ava(cript este ncrcat ntr"un asemenea bro;ser, n loc ca

scriptul s fie e#ecutat, este afiat n pagin ntregul cod, ceea ce nu este de dorit. a dup cum tii, comentariile sunt ignorate de bro;ser, astfel c includerea codului :ava(cript ntre etic!etele de comentariu va duce la ignorarea acestei pri a documentului. E#cepie fac bro;serele care recunosc :ava(cript i care vor identifica prezena :ava(cript i vor e#ecuta scriptul. =n concluzie, maniera recomandat pentru introducerea n pagin a unui script este urmtoarea: L(&+I,6 languageS%:ava(cript%M LN " " &od :ava(cript ?? " "M L?(&+I,6M m nvat pn acum cum poate fi inclus codul :ava(cript ntr"un document 5678. ( vedem, mai departe, cum putem folosi scripturile :ava(cript pentru a face paginile mai atractive i a le mbunti funcionalitatea. 4. Ce se poate 'ace cu Ba"aScript? =n continuare sunt prezentate cteva e#emple de scripturi cu ajutorul crora se pot realiza lucruri care depesc posibilitile limbajului 5678, cum ar fi afiarea datei curente n pagina dumneavoastr, desc!iderea unei ferestre pop"up, afiarea unui mesaj n bara de status a ferestrei bro;serului, afiarea aleatoare a unor mesaje n pagin, imagini care i sc!imb aspectul la trecerea mouse"ului, i, una dintre cele mai utile aplicaii :ava(cript, validarea formularelor. 1'iarea unui mesaE n <ara de status cest e#emplu ilustreaz modul cum se poate afia un mesaj n bara de status /aflat la baza ferestrei bro;serului3 la trecerea cu mouse"ul peste un anumit element din pagin. )e obicei, acest element este un linI sau o imagine. =n E#emplul CH.H, elementul este o imagine. spectul paginii care conine scriptul este cel din <igura CH.H. ( emplul 1*. * L5678M L5E )M L6I68EMjavascriptHL?6I68EM L?5E )M L'$)KM L5C alignS%center%M7esaj in status barL?5CML5+M L5HM7esajul apare la plasarea mouse"ului pe imagineL?5HM LI79 srcS%..?Imagini?tiger.gif% on7ouse$verS%;indo;.statusSl cesta este un tigrul] return true% on7ouse$utS%;indo;.statusSl l]return true%M L?'$)KM L?5678M 1'iarea datei curente n pa&in* (criptul urmtor preia data sistemului de operare al utilizatorului i o afieaz n pagin. Evident, dac data sistemului este setat incorect, ea va aprea n pagin ca atare. E#emplul CH.J construiete o pagin *eb care conine un astfel de script, aspectul paginii fiind redat n <igura CH.J. ( emplul 1*. , L5678M L5E )M L6I68EMjavascriptJL?6I68EM

L(&+I,6 languageS%javascript%M LN"" var zi, data, luna aziSne; )ate/3 if/azi.get)aE/SSB3n ziS%)uminica, % o else if/azi.get)aE/3SSC3n ziS%8uni, % o else if/azi.get)aE/3SSF3nziS%7arti, %o else if/azi.get)aE/3SSH3nziS%7iercuri, %o else if/azi.get)aE/3SSJ3nziS%:oi, %o else if/azi.get)aE/3SSG3nziS%Uineri, %o else if/azi.get)aE/3SSA3nziS%(ambata, %o if/azi.get7ont!/3SSB3nlunaS%Ianuarie %o else if/azi.get7ont!/3SSC3nlunaS%<ebruarie%o else if/azi.get7ont!/3SSF3nlunaS%7artie%o else if/azi.get7ont!/3SSH3nlunaS% prilie%o else if/azi.get7ont!/3SSJ3nlunaS%7ai%o else if/azi.get7ont!/3SSG3nlunaS%Iunie%o else if/azi.get7ont!/3SSA3nlunaS%Iulie%o else if/azi.get7ont!/3SS13nlunaS% ugust%o else if/azi.get7ont!/3SS03nlunaS%(eptembrie%o else if/azi.get7ont!/3SSD3nlunaS%$ctombrie%o else if/azi.get7ont!/3SSCB3nlunaS%>oiembrie%o else if/azi.get7ont!/3SSCC3nlunaS%)ecembrie%o dataSazi.get)ate/3 ??""M L?(&+I,6M L?5E )M L'$)KM L5C alignS%center%M)ata calendaristicaL?5CML5+M L<$>6 sizeS%H% colorS%blacI% faceS%arial%M zi suntem in data de: L(&+I,6 languageS%:ava(cript%M LN"" L<$>6 sizeS%J% colorS%red% faceS%arial%M document.;rite/ziYl lYdataYl lYluna3 ??""M L?(&+I,6ML?<$>6M L?'$)KM L?5678M 0erestre pop-up -nul din lucrurile care nu se pot realiza folosind doar 5678 este afiarea mesajelor pop-up. ceste mesaje apar ntr"o mic fereastr care se nc!ide atunci cnd e#ecutai o anumit aciune, de obicei clicI pe un buton, sau pe un linI. =n E#emplul CH.G este construit pagina principal din care este apelat fereastra pop!up. ( emplul 1*. L5678M L5E )M L6I68EMjavascriptGL?6I68EM L(&+I,6 languageS%:ava(cript%M LN"" function desc!ide/3

ni;inS;indo;.open/%javascriptA.!tml%, %I*I>%, %statusSno, toolbarSno, locationSno, menuSno, ;idt!SFBB, !eig!tSFBB%3]o ??""M L?(&+I,6M L?5E )M L'$)KM L5C alignS%center%M<ereastra pop"upL?5CML5+M ceasta pagina demonstreaza cum poate fi creata o fereastra pop"upL'+M <ereastra se desc!ide la apasarea pe legatura de mai jos si se inc!ideL'+M cand este apasat butonul $XL'+M )esc!ide fereastra L !refS%R% on&licIS%desc!ide/3]%MaiciL? M. L?'$)KM L?5678M <irete c trebuie creat un document separat, care va fi afiat n fereastra pop!up. =n E#emplul CH.A este construit documentul 5678 /;avascript=)html3 care va fi afiat n fereastra pop!up definit n e#emplul anterior. ( emplul 1*. 0 L5678M L5E )M L6I68EMjavascriptAL?6I68EM L?5E )M L'$)KM L5H alignS%center%M6est pop"upL?5HM L<$>6 colorS%green% faceSarialM ti invatat sa creati o fereastra pop"upL'+M pasati $X ca sa reveniti in fereastra initiala L,M L<$+7 nameS%formC%M LI>,-6 tEpeS%button% valueS%$X% on&licIS%;indo;.close/3]%M L?<$+7M L?'$)KM L?5678M spectul paginii i al ferestrei pop!up este redat n <igura CH.G. ,utei modifica documentul 5678 care se va desc!ide n fereastra pop!up dup dorin i l putei salva sub alt nume. >u uitai, ns, s facei modificarea corespunztoare n funcia desc!ide/3 din script. 1'iarea a!eatoare a unor mesaEe n pa&in* -nul dintre lucrurile care i fac pe vizitatorii paginii dumneavoastr s revin la ea cu regularitate este varietatea, fie n aspect, fie, mai ales, n coninut. -n mod de a face paginile mai variate este de a afia diverse mesaje, citate sau imagini care s se sc!imbe de fiecare dat cnd este accesat pagina. =n E#emplul CH.1 este prezentat un script care realizeaz afiarea aleatoare a unui citat, ales dintr" un ir predefinit. spectul acestei pagini este redat n <igura CH.A. ( emplul 1*. 2 L5678M L5E )M

L6I68EMjavascript1L?6I68EM L?5E )M L'$)KM L5C alignS%center%M&itateL?5CML5+M L(&+I,6 languageS%:ava(cript%M LN"" citatSne; rraE/G3] autorSne; rraE/G3] citatPBQS%$mul care"si cunoaste limitele este singurul care are sanse sa obtina ce vrea.%] autorPBQS%9oet!e%] citatPCQS%,e stancile cele mai inalte ajung numai vulturii si reptilele.%] autorPCQS%7ontesTuieu%] citatPFQS%,utine lucruri sunt atat de greu de suportat ca un e#emplu bun.%] autorPFQS%7arI 6;ain%] citatPHQS% devarul pur si simplu este rareori pur si niciodata simplu.%] autorPHQS%$scar *ilde%] citatPJQS%$mul a inventat limbajul pentru a"si satisface nevoia profunda de a se plange.%] autorPJQS%8ilE 6omlin%] inde#S7at!.floor/7at!.random/3 k citat.lengt!3] document.;rite/%L)8Mfn%3] document.;rite/%L)6M% Y %f%% Y citatPinde#Q Y %f%fn%3] document.;rite/%L))M% Y %" % Y autorPinde#Q Y %fn%3] document.;rite/%L?)8Mfn%3] ??""M L?(&+I,6M L5+M &itatul de mai sus este generat aleator la incarcarea paginii. L?'$)KM L?5678M )ac dorii s inserai acest script n pagina dumneavoastr i s adugai i alte citate, nu uitai s redimensionai vectorii citat i autor la valoarea n!B, unde n este numrul de citate. ,entru a observa funcionarea scriptului, rencrcai pagina de mai multe ori. (ma&ini care se sc/im<* 8ro!!o"er ima&es9 -n efect interesant pe care l putei introduce n pagin sunt imaginile care i sc!imb aspectul la trecerea cu mouse"ul pe suprafaa lor. cesta se poate obine cu ajutorul scriptului prezentat n E#emplul CH.0. =n <igura CH.1 este redat aspectul paginii descrise n acest e#emplu. ( emplul 1*. 4 L5678M L5E )M L6I68EMjavascript0L?6I68EM L(&+I,6 languageS%:ava(cript%M LN"" if /document.images3 n picConSne; Image/3] picCon.srcS%..?Imagini?dovleacC.jpg%] picCoffSne; Image/3] picCoff.srcS%..?Imagini?dovleacF.jpg%] o function desc!ide/img>ame3

n if /document.images3 n img$nSeval/img>ame Y %on.src%3] documentPimg>ameQ.srcSimg$n] o o function inc!ide/img>ame3 n if /document.images3 n img$ffSeval/img>ame Y %off.src%3] documentPimg>ameQ.srcSimg$ff] o o ??"""M L?(&+I,6M L?5E )M L'$)KM L5C alignS%center%MImagini care se sc!imbaL?5CML5+M L&E>6E+M L !refS%R% on7ouseoverS%desc!ide/lpicCl3% on7ouseoutS%inc!ide/lpicCl3%M LI79 srcS%..?Imagini?dovleacF.jpg% ;idt!S%CBB% !eig!tS%CBB% borderS%C% nameS%picC%M L? M L?&E>6E+M L?'$)KM L?5678M Ca!idarea 'ormu!are!or )ac e#emplele prezentate pn acum au avut rolul de a face pagina dumneavoastr mai atractiv, urmtorul e#emplu este de natur s i mbunteasc funcionalitatea. $ problem cu care v vei confrunta fr ndoial dac folosii formulare n pagin, este validarea datelor introduse de utilizator. Uom crea o pagin foarte simpl care conine dou casete de te#t n care utilizatorul trebuie s introduc numele i adresa de mail. )eoarece dup completarea formularului informaiile introduse vor fi supuse procesului de validare realizat de scriptul :ava(cript, etic!eta L<$+7M va avea un coninut diferit de cel pe care l cunoatei de la capitolul +ormulare. (criptul de mai jos verific dac toate cmpurile de editare au fost completate. )ac se apas pe butonul (ubmit nainte de a completa ambele cmpuri, este transmis un mesaj de eroare. )atele din formular sunt transmise unui script &9I fictiv, numit m$script)cgi aflat n directorul cgi!bin. $bservai c atributele action i met!od ale etic!etei L<$+7M pe care le cunoatei de la +ormulare sunt, de data aceasta folosite ca proprieti ale obiectului predefinit n :ava(cript, form. )ocumentul construit n E#emplul CH.D conine un formular i scriptul care realizeaz validarea datelor introduse n cmpurile formularului. )in <igura CH.0 putei observa mesajul de eroare transmis n situaia cnd unul din cmpurile formularului nu este completat. ( emplul 1*. 5 L5678M L5E )M L6I68EMjavascriptDL?6I68EM

L(&+I,6 languageS%javascript%M LN"" function verifica/form3 n if /form.nume.valueSS %%3 n alert/%Ua rog, introduceti numeleN%3] form.nume.select/3] o else if /form.email.valueSS %%3 n alert/%Ua rog, introduceti adresa de mailN%3] form.email.select/3] o else n form.met!odS%post%] form.targetS%Vself%] form.actionS%cgi"bin?mEscript.cgi%] form.submit/3] o o ??""M L?(&+I,6M L?5E )M L'$)KM L5C alignS%center%MUalidarea formularelorL?5CM L5H alignS%center%M/completarea tuturor campurilor3L?5HML5+M L<$+7 on(ubmitS%verifica/t!is3] return false]%M >ume: LI>,-6 tEpeS%te#t% nameS%nume% sizeS%HB%ML'+M dresa mail: LI>,-6 tEpeS%te#t% nameS%email%ML'+M LI>,-6 tEpeS%submit% nameS%button% valueS%(ubmit%M L?<$+7M L?'$)KM L5678M $ alt verificare deosebit de util este dac utilizatorul a introdus o adres de mail valid. (criptul din e#emplul urmtor realizeaz trei verificri: dac n irul de caractere introdus e#ist caracterul h dac este prezent caracterul %.% urmat de trei caractere /.com, de e#emplu3, dac este prezent caracterul %.% urmat de dou caractere /.ro, de e#emplu3 <ormularul din E#emplul CH.CB conine un cmp de editare i un buton +ubmit. )ac adresa de mail introdus n cmpul de editare este incorect se va afia un mesaj de eroare aa cum se vede n <igura CH.D. ( emplul 1*. 1> L5678M L5E )M L6I68EMjavascriptCBL?6I68EM L(&+I,6 languageS%javascript%M

LN"" function verificaVmail/form3 n verifSform.email.value if //verif.inde#$f/lhl3 L B3 ii //verif.c!ar t/verif.lengt!"J3 NSl.l3 \\ /verif.c!ar t/verif.lengt!" H3 NSl.l333 n alert/%>u ati introdus o adresa de mail valida. Ua rog, incercati din nouN%3] form.email.select/3] return false] o else n form.met!odS%post%] form.targetS%Vself%] form.actionS%cgi"bin?mEscript.cgi%] form.submit/3] o o ??""M L?(&+I,6M L?5E )M L'$)KM L5C alignS%center%MUalidarea formularelorL?5CM L5H alignS%center%M/adresa de mail corecta3L?5HML5+M L<$+7 on(ubmitS%verificaVmail/t!is3]return false]%M dresa mail: LI>,-6 tEpeS%te#t% nameS%email%ML'+M LI>,-6 tEpeS%submit% nameS%button% valueS%(ubmit%M L?<$+7M L?'$)KM L5678M ,utei folosi n paginile dumneavoastr oricare dintre aceste scripturi, desigur, fcnd modificrile necesare legate de structura site"ului dumneavoastr. )e e#emplu, n scripturile care realizeaz validarea formularelor, pentru ca acestea s fie funcionale, trebuie s precizai localizarea corect a scriptului &9I care face prelucrarea lor. )in e#emplele prezentate probabil c v"ai putut crea o imagine despre modul n care pot fi utilizate scripturile :ava(cript ntr"o pagin *eb. )ac suntei entuziasmat nc de pe acum, vei fi i mai mult dac vei depune puin efort pentru a nva limbajul i vei putea crea scripturi mult mai comple#e dect acestea. vei ns grij la aspectele legate de viteza de ncrcare a paginii: aplicaiile comple#e i de mari dimensiuni ncetinesc ncrcarea paginii unde sunt folosite. &a i n cazul imaginilor, nu folosii scripturi de care nu este nevoie, doar pentru a arata cu orice pre c suntei un bun programator. -na dintre regulile de aur ale unei pagini *eb bune, regul att de adesea nclcat, este simplitatea. ). -e.umat :ava(cript este un limbaj de programare orientat pe obiecte i evenimente care permite e#tinderea capacitilor limbajului 5678.

(cripturile :ava(cript sunt incluse ntr"un document 5678 prin intermediul etic!etei container L(&+I,6M sau prin intermediul procedurilor eveniment. ,entru a evita afiarea n pagin a codului scriptului de bro;serele care nu suport scripturi, se obinuiete ca scriptul s fie inclus ntre etic!etele de comentariu. (cripturile pot fi inserate direct n documentul 5678 sau pot fi stocate n fiiere e#terne care sunt apelate n documentul respectiv. &u ajutorul scripturilor :ava(cript se pot realiza sarcini diverse cum ar fi crearea ferestrelor pop" up, afiarea datei curente n pagin, validarea formularelor i altele. =n capitolul urmtor vom discuta despre o alt metod care mbogete limbajul 5678 cu noi posibiliti de a controla aspectul paginilor, i anume programarea cu ajutorul foilor de stiluri / +t$le +heets3 Capitolul 1, +oi de stiluri 6CSS7 +oile de stiluri HTML /Cascading +t$le +heets3 reprezint o inovaie n dezvoltarea *orld *ide *eb, n ciuda faptului c ideea gruprii elementelor de formatare a documentelor a aprut ceva mai demult. plicarea stilurilor reprezint o e#tindere important a posibilitilor de design, evitnd utilizarea de fiiere grafice mari ce determin ncetinirea ncrcrii paginilor i manipularea lor greoaie. <olosind stilurile 5678 putei fi sigur c cititorii vor vedea te#tul din pagin e#act aa cum a fost el proiectat. 6e#tul i proprietile acestuia, care au fost iniial controlate de bro;sere, se rentorc la autor, acolo unde le este, de fapt, locul. 1. Ce este un sti!? -n stil reprezint o colecie de atribute ale te#tului i ale modului de aranjare a documentului care pot fi aplicate n mod selectiv unui document sau doar unei pri din acesta. ceste atribute pot fi tipul de font, mrimea i grosimea acestuia, marginile, paragrafele i orice altceva ce poate influena aspectul te#tului n pagin. 9ruparea lor n stiluri permite autorului s aplice aceeai colecie de atribute la diferite pri ale unui document. (tilurile aplicate unui document 5678 au multe avantaje pentru creatorii de pagini *eb: $fer control crescut asupra aspectului i plasrii te#tului n pagin +educ %nvlmeala% produs de multitudinea de desc!ideri i nc!ideri ale etic!etelor care descriu elementele individuale ale te#tului ,rocesul de modificare a diferitelor elemente din pagin se simplific )e e#emplu, dac dorii ca titlurile dumneavoastr s aib un alt tip de font dect te#tul obinuit, s fie de dimensiune mai mare i scrise cu caractere ngroate i italice, ar trebui s definii aceste atribute de formatare pentru fiecare titlu n parte. <olosind stilurile nu avei nevoie dect s creai o singur definiie de stil care s conin atributele de formatare dorite, pe care s o aplicai la fiecare titlu. =n plus, folosirea stilurilor reduce considerabil efortul depus atunci cnd dorii s aducei modificri aspectului i aranjrii elementelor din paginile dumneavoastr. =n loc s parcurgei fiecare document n parte i s facei modificri asupra fiecrui element, nu mai este necesar s operai modificri dect asupra foii de stiluri care controleaz aceste elemente.

2. Tipuri de 'oi de sti!uri (tilurile 5678 pot fi aplicate ntr"o pagin *eb n trei moduri: Uncapsulate /embedded3: stilurile sunt incluse n documentul asupra cruia se aplic, i anume n seciunea L5E )M a documentului. ,rin includerea lor n antetul documentului, stilurile rmn invizibile pentru vizitatorul paginii. Le/ate /linked3: stilurile sunt definite n fiiere separate de documentul 5678. )ocumentul face apel la foaia de stiluri prin intermediul etic!etei L8I>XM. <olosirea acestui tip de stiluri face posibil utilizarea aceleiai foi de stil pentru documente diferite. )e asemenea, este posibil aplicarea mai multor foi de stiluri pentru acelai document. ;n"line: stilurile sunt incluse ca atribute n cadrul etic!etelor 5678 din document. ceasta nseamn c ele vor afecta doar elementul asupra cruia sunt aplicate. Este o modalitate mai puin utilizat deoarece contrazice principiul general al stilurilor, acela de a simplifica i de a face mai lizibil codul documentului 5678. (inta#a definiiilor de stil este, n general, aceeai, indiferent de modul cum sunt ele aplicate. &ele trei tipuri de stiluri pot fi, de asemenea, combinate n cadrul aceluiai document. +elaiile dintre diferitele tipuri de stiluri realizeaz efectul de cascad care d numele acestei metode. Sti!uri ncapsu!ate &rearea unui astfel de stil se realizeaz folosind etic!eta 9STIL(= 9JSTIL(=. Etic!eta L(6K8EM este o etic!et container, deci este obligatorie prezena etic!etei de nc!idere L?(6K8EM. =ntre cele dou etic!ete se introduc definiiile de stil. Etic!eta de stil este plasat n antetul documentului adic n seciunea L5E )M. =n E#emplul CJ.C este prezentat o definiie de stil care realizeaz afiarea tuturor titlurilor de nivel C /adic a te#telor cuprinse ntre etic!etele L5CM L?5CM3 cu caractere bold i de culoare verde. =n plus, te#tele incluse ntre etic!etele L,M L?,M vor fi afiate cu fonturi arial, de mrime F i culoare violet. )e asemenea, este creat un stil %normal% care poate fi aplicat asupra oricrui te#t. ,rin intermediul su, te#tul este afiat cu caractere mai mari i de culoare oranj. spectul paginii n care este inclus aceast definiie de stil este cel din <igura CJ.C. '4. ( emplul 1,. 1 L5678M L5E )M L6I68EMstiluriCL?6I68EM L(6K8EM LN"" 5C ncolor: RBB0BBB] font";eig!t: boldo , nfont"familE: rial] color: R0BBB0B] font"size: CJp#o .normal nfont"size: large] color: R<<0BBBo ""M L?(6K8EM L?5E )M L'$)KM L5C alignS%center%M(tiluriL?5CML5+M L,M6e#tul din acest paragraf este formatat cu ajutorul stilurilorL?,M cesta este un te#t neformatat L5CM6itluL?5CM

L(, > classS%normal%M cesta este stilul normalL?(, >M L?'$)KM L?5678M $bservai c definiia stilurilor a fost plasat ntre etic!etele 5678 de comentariu, n aceeai manier ca i la scripturile :ava(cript. 7otivul este acelai: dac bro;serul cu care este vizualizat pagina nu suport foi de stiluri, se evit astfel afiarea n pagin a codului 5678. Sti!uri !e&ate F 'oi de sti!uri externe (tilurile incluse n pagin se aplic elementelor prezente n respectivul document 5678, reducnd dimensiunea codului i efortul de a defini fiecare element n parte. ceast idee se poate e#tinde la nivelul mai multor documente care pot beneficia, toate, de aceleai stiluri, reunite ntr"o foaie de stiluri e#tern. vantajul folosirii foilor de stiluri e#terne este dublu. ,e de"o parte ele se pot aplica la nivelul mai multor documente 5678, realiznd astfel o legtur de stil ntre ele, lucru deosebit de util la construirea unui site. ,e de alt parte, acelai document poate folosi foi de stiluri diferite, oferind vizitatorului posibilitatea de a opta pentru unul sau altul dintre ele, n funcie de propriile preferine. $ foaie de stiluri este un fiier te#t care conine regulile de stil definite n aceeai manier folosit la stilurile incluse n pagin. $dat creat o foaie de stiluri, ea trebuie salvat cu e#tensia .css. <oile de stiluri pot fi stocate ntr"un folder separat sau n acelai folder n care sunt plasate i documentele 5678. pelul foilor de stiluri se poate realiza n dou moduri: folosind etic!eta 9L;AK= folosind funcia Vimport &el mai folosit mod de apelare a unei foi de stiluri este cu ajutorul etic!etei L8I>XM conform urmtoarei sinta#e: L8I>X relS%stEles!eet% !refS%numeVfoaieVstiluri.css%M =n E#emplul CJ.F este construit o foaie de stiluri e#tern care va fi apelat cu ajutorul etic!etei L8I>XM. <oaia de stiluri a fost salvat sub numele stiluri>)css '5. ( emplul 1,. ' '$)K nbacIground"color: R&&<<&&] font"familE: rial, sans"serif] color: RHHBBAA] padding: GBp#, 1Bp#o :linI ncolor: R&&DDBBo :visited ncolor: RAABBBBo :!over ncolor: R<<&&BBo :active ncolor: R<<BBBBo 5C ncolor: RDDAAHH] bacIground"color: R<<<<&&o )ocumentul 5678 care urmeaz apeleaz foaia de stiluri de mai sus este prezentat n E#emplul CJ.H. )up cum observai, foaia stiluri>)css a fost apelat n antetul documentului, prin intermediul etic!etei L8I>XM cu atributul relS%stEles!eet%. tributul !ref al etic!etei are ca valoare numele /i

adresa relativ, dac este necesar3 al foii de stiluri apelate. =n documentul 5678 am inclus i o legtur, pentru a e#emplifica modul n care foaia de stiluri sc!imb culorile legturii. tributul )over se refer la proprietatea ca legtura s i sc!imbe culoarea la trecerea cu mouse"ul peste ea, fr a face clicI. ,agina descris n acest e#emplul are aspectul din <igura CJ.F. *>. ( emplul 1,. * L5678M L5E )M L6I68EMstiluriHL?6I68EM L8I>X relS%stEles!eet% !refS%stiluriF.css%M L?5E )M L'$)KM L5C alignS%center%M<oi de stiluri e#terneL?5CM cest e#emplu ilustreaza modul in care este inclusa in pagina o foaie de stiluri e#terna L,M7ai multe e#emple in L !refS%ane#aC.!tml%Mane#aFL? M L?'$)KM L?5678M Sti!uri in-!ine (pre deosebire de stilurile ncapsulate i de foile de stiluri e#terne, stilurile in!line fac parte c!iar din corpul documentului 5678. Ele se aplic prin folosirea atributului stGle n asociere cu etic!etele 5678 standard. +einei, deci, c stEle poate fi att etic!et n sine ct i atribut al altor etic!ete. )efiniiile de stil in!line se aplic numai asupra elementelor incluse ntre etic!etele care au asociat atributul stEle. )in acest motiv, dac dorim s repetm n alt loc din cuprinsul documentului aceleai definiii de stil, ele vor trebui repetate, ncrcnd astfel documentul 5678. 6otui, utilitatea stilurilor in!line este aceea c fiind definite c!iar n cuprinsul documentului, definiiile lor sunt mai puternice dect cele din stilurile ncapsulate sau e#terne. )ac, de e#emplu, am creat o foaie de stiluri pe care dorim s o aplicm unui document, i dac n cadrul acestui document avem un anumit element particular cruia dorim s"i dm un alt aspect dect cel prevzut n foaia e#tern, putem aplica acelui element un stil in!line care se va referi strict la el. Iat un e#emplu de aplicare a unui stil in!line asociat etic!etei L,M: L, stEleS%color: red] font"familE: arial] font";eig!t: bold%M6e#tul din acest paragraf este scris cu fonturi arial, ingrosate, de culoare rosuL?,M $bservai c la stilurile in!line definiiile de stil sunt incluse ntre apostrofuri i nu ntre acolade, ca la celelalte tipuri de stiluri. tunci cnd lucrai cu documente 5678 deja e#istente crora dorii s le aplicai stiluri in!line, este recomandat s folosii etic!etele 9:;<= i 9SP1A=. cestea v permit s aplicai stilurile fr a afecta codul 5678 deja e#istent sau aspectul paginii n bro;serele care nu suport stiluri. E#emplul CJ.J ilustreaz folosirea etic!etei L(, >M aspectul paginii fiind redat n <igura CJ.H. *1. ( emplul 1,. , L5678M L5E )M L6I68EMstiluriJL?6I68EM L?5E )M L'$)KM L5C stEleS%color:red]font"famElE:arial%M(tiluri in"lineL?5CML5+M L,M6e#tul din acest paragraf este divizat folosind etic!eta spanL?,M

L(, > stEleS%font"familE:arial] color: blue%M6e#t scris cu albastru si fonturi arialL?(, >ML'+M L(, > stEleS%font"familE: courier] size: medium] color:green%M6e#t scris cu verde si fonturi courier mediumL?(, >M L?'$)KM L?5678M 8a fel ca i la capitolele anterioare, nu vom intra n amnunte privind programarea cu ajutorul stilurilor. )ei stilurile sunt intuitive i uor de aplicat, totui o abordare e#!austiv a acestui subiect depete obiectul acestei cri. ,rezentm, totui, n continuare, cteva e#emple care v pot fi utile n paginile dumneavoastr. 3. #'ecte o<inute cu aEutoru! sti!uri!or 1spectu! textu!ui Iat cteva atribute care se pot asocia cu diverse etic!ete 5678 permind sc!imbarea aspectului te#tului. *'. color bacIground" color font"familE font"size font";eig!t font"stEle letter"spacing Tabel 1,. 1 (.ectul (eteaz culoarea te#tului. (eteaz culoarea fundalului unui obiect. (eteaz tipul de font. (eteaz dimensiunea fonturilor. Ualorile pot fi e#primate n pi#eli /p#3 sau puncte /pt3. (eteaz grosimea fonturilor. Ualorile posibile pot fi: normal, bold, bolder, lig!ter. (eteaz stilul de font. Ualorile pot fi: normal, italic, obliTue. (eteaz spaierea literelor. Ualorile pot fi: pi#eli /p#3, puncte /pt3, inci /in3, centimetri /cm3 sau milimetri /mm3. (eteaz spaierea cuvintelor. Ualorile pot fi: pi#eli /p#3, puncte /pt3, inci /in3, centimetri /cm3 sau milimetri. Ualorile posibile pot fi: capitalize, uppercase, lo;ercase, none. Ualorile pot fi: underline, overline, line" t!roug!, blinI. (c!imb aspectul unei legturi cnd mouse"ul se afl deasupra ei. )efinete aspectul unei legturi. )efinete aspectul legturii active.

1tributul

;ord"spacing te#t"transform te#t"decoration !over linI active

visited first"letter first"line

)efinete aspectul legturii vizitate. (c!imb cuvnt. aspectul primei litere dintr"un

(c!imb aspectul primei linii dintr"un te#t.

=n e#emplele urmtoare sunt ilustrate cteva din aceste atribute. E#emplul CJ.G include o definiie de stil n care sunt definii aa numiii selectori de clas$, n acest e#emplu '.titlu i '.subtitlu. =n corpul documentului apelul acestora a fost fcut prin construcia: L' classS%titlu%M6itluL?'M tributul class care se poate asocia etic!etei L'M ca n acest e#emplu sau altor etic!ete de formatare a te#tului are ca valoare un identificator care a fost definit n prealabil n cadrul definiiei de stil. spectul paginii descrise n acest e#emplu este cel din <igura CJ.J. **. ( emplul 1,. L5678M L5E )M L6I68EMstiluriGL?6I68EM L(6K8EM LN"" '.titlu nfont"size: FB pt] font";eig!t: bolder] letter"spacing:Gp#o '.subtitlu nfont?size: CG pt] letter"spacing: Gp#o ""M L?(6K8EM L?5E )M L'$)KM L5C alignS%center%M spectul te#tuluiL?5CML5+M L,M 6e#t normalL'+M L'M6e#t ingrosatL?'ML'+M L' classS%titlu%M6itluL?'ML'+M L' classS%subtitlu%M(ubtitluL?'M L?,M L?'$)KM L?5678M E#emplul CJ.A folosete stiluri la formatarea titlului de nivel 5C i a te#tului din cadrul paragrafului, folosind atributul first"letter care sc!imb aspectul primei litere din paragraf. .i n acest e#emplu a fost folosit un selector de clas i anume ,.primalit. spectul paginii care folosete aceste stiluri este redat n <igura CJ.G. *,. ( emplul 1,. 0 L5678M L5E )M L6I68EMstiluriAL?6I68EM L(6K8EM LN"" ,.primalit:first"letter nfont";eig!t: bolder] font"stEle: italic] font"size:GB pt] color:redo 5C ncolor:blue] letter"spacing:G p#o ""M L?(6K8EM L?5E )M

L'$)KM L5C alignS%center%MEfecte asupra te#tuluiL?5CML5+M L, classS%primalit%M6e#tul din acest paragraf foloseste atributul first"letterL?,M L?'$)KM L?5678M $are de deru!are co!orate -nul dintre efectele des ntlnite n paginile *eb este prezena barelor de derulare colorate. cest efect se poate, de asemenea, obine prin aplicarea stilurilor. ,entru a defini culoarea barelor de derulare se folosesc cteva atribute, pe care le definim mai jos. *-. Tabel 1,. ' (.ectul )efinete culoarea de baz a barei, a butoanelor cu sgei i a fundalului pe care se deplaseaz bara. )ac dorii s realizai rapid o bar de derulare nu este necesar s setai dect acest atribut i pe cel urmtor. (etarea celorlalte atribute se suprapune i anuleaz efectele acestuia. )efinete culoarea sgeilor de pe bar )efinete culoarea suprafeei barei de derulare i a butoanelor pe care sunt sgeile. )e asemenea, stabilete culoarea fundalului pe care se deplaseaz bara. )efinete culoarea prilor %iluminate% ale barei i butoanelor cu sgei /marginile de sus i din stnga3 i a fundalului pe care se deplaseaz bara )efinete culoarea prilor %ntunecate% ale barei i butoanelor cu sgei /marginile de jos i din dreapta3 )efinete culoarea marginilor de jos i din dreapta ale barei i butoanelor cu sgei )efinete culoarea marginilor de sus i din stnga ale barei i butoanelor cu sgei )efinete culoarea fundalului barei

1tributul scrollbar"base"color

scrollbar"arro;" color scrollbar"face"color

scrollbar"!ig!lig!t" color

scrollbar" darIs!ado;"color scrollbar"s!ado;" color scrollbar"Hdlig!t" color scrollbar"tracI"color

)up cum observai, unele dintre aceste atribute i suprapun efectele. E#ist anumite reguli care stabilesc prioritile atributelor pe care nu le vom aborda aici. &a nceptor, este recomandat s nu folosii atribute care se suprapun pentru a nu obine rezultate neconforme cu inteniile dumneavoastr. E#emplul urmtor ilustreaz modul de construire a barelor de derulare colorate. =n E#emplul CJ.1 am construit o foaie de stiluri e#tern salvat sub numele stiluriI)css) *0. ( emplul 1,. 2

'$)K n scrollbar"face"color:blue] scrollbar"arro;"color:Eello;] scrollbar"s!ado;"color:red] scrollbar"Hdlig!t"color:Eello;] scrollbar"tracI"color:cEan] o )ocumentul 5678 care apeleaz foaia de stiluri este construit n E#emplul CJ.0, pagina descris de acest document avnd aspectul din <igura CJ.A. *2. ( emplul 1,. 4 L5678M L5E )M L6I68EMstiluri0L?6I68EM L8I>X relS%stEles!eet% !refS%stiluri1.css%M L?5E )M L'$)KM L5C alignS%center%M'are de derulare colorateL?5CM aL'+MaL'+MaL'+MaL'+MaL'+MaL'+MaL'+M aL'+MaL'+MaL'+MaL'+MaL'+MaL'+MaL'+M aL'+MaL'+MaL'+MaL'+MaL'+MaL'+MaL'+M L?'$)KM L?5678M )esigur, culorile pe care le alegei pentru bara de derulare trebuie selectate cu grij, astfel nct s se armonizeze cu restul paginii. <olosirea unei foi de stiluri e#terne este util deoarece putei stabili astfel culoarea barei pentru toate paginile site"ului dumneavoastr. 'ro;serele >etscape nu suport sc!imbarea culorilor barei de derulare. 0ormu!are co!orate E#emplul care urmeaz /E#emplul CJ.D3 folosete stiluri in!line pentru a crea formulare colorate care pot da paginii un aspect mai atractiv. m folosit pentru setarea culorilor codurile !e#azecimale pe care le putei gsi n 1ne a *. &a i la barele de derulare, culorile formularelor trebuie alese cu grij pentru a nu da paginii un aspect ncrcat i lipsit de bun"gust. ,agina descris n acest document arat ca n <igura CJ.1. *4. ( emplul 1,. 5 L5678M L5E )M L6I68EMstiluriDL?6I68EM L?5E )M L'$)KM L5C alignS%center%M<ormulare colorateL?5CML5+M L<$+7M LI>,-6 nameS%te#t% stEleS%bacIground"color: RBB&&<<] color: R<<<<<<] font";eig!t: bold% valueS%(alutN%M L,M L6EW6 +E ro;sS%G% colsS%FB% stEleS%color: RBBAA&&] bacIground"color: R&&&&&&] scrollbar"base"color:red]%M&are sunt impresiile tale4L?6EW6 +E M L,M LI>,-6 tEpeS%submit% valueS%trimite% stEleS%bacIground"color: RBBAA&&%M

L?<$+7M L?'$)KM L?5678M Uizualizate n >etscape formularele din e#emplul de mai sus vor avea aspectul normal, necolorat. 4. -e.umat <oile de stiluri reprezint un instrument important n elaborarea documentelor 5678, mai ales dac dorim s construim un site *eb. cestea permit pstrarea unui aspect unitar i coerent pe tot parcursul site"ului. -n stil este o colecie de atribute ale te#tului i ale modului de aranjare a documentului care pot fi aplicate n mod selectiv unui document sau doar unei pri din acesta. (tilurile se pot aplica unui document n trei moduri: ncapsulate " prin intermediul etic!etei L(6K8EM plasat n antetul documentului legate " prin intermediul etic!etei L8I>XM plasat de asemenea n antetul documentului i care face legtura cu foaia de stiluri e#tern in!line " prin intermediul atributului stEle asociat cu diverse etic!ete 5678. &u ajutorul stilurilor se pot obine efecte deosebite n cadrul documentelor 5678: se poate modifica aspectul te#tului, se pot construi bare de derulare colorate, formulare colorate i altele. =n capitolul urmtor vom discuta despre cteva elemente de grafic avansat prin intermediul crora pagina dumneavoastr poate deveni mai interesant i mai atractiv. Capitolul 1(lemente de /ra.ic$ avansat$ 1. (ma&ini /art* =n mod obinuit, cnd folosim o imagine drept legtur, includem etic!eta LI79M n interiorul etic!etei pentru linI"uri , L M. =n continuare este prezentat o alt modalitate de a folosi o imagine ca legtur i anume crearea unei imagini !art. Ce este o ima&ine /art*? $ ima/ine )art$ este o zon activ pe care se poate e#ecuta clicI cu mouse"ul, apsarea diferitelor regiuni ale imaginii ducnd la desc!iderea unor documente 5678 diferite. &u alte cuvinte, o imagine !art este o imagine mprit n regiuni, iar fiecare regiune reprezint o legtur ctre un alt document. -n e#emplu de utilizare a imaginilor !art l constituie barele de butoane folosite n multe site"uri ca instrumente de navigare. Imaginile !art ofer posibilitatea de a folosi o singur imagine pentru a furniza legturi ctre mai multe pagini. U putei imagina o imagine !art ca fiind compus din dou pri: imaginea n sine i o !art invizibil care este aplicat peste imagine, mprind"o n regiuni. ceast !art folosete pentru definirea regiunilor forme prestabilite: poligoane, cercuri sau dreptung!iuri. =n general, imaginile care se preteaz la a fi folosite ca imagini !art sunt cele care conin forme geometrice care conduc la o mprire natural a imaginii n regiuni.

=n funcie de modul cum sunt prelucrate imaginile i identificate adresele spre care indic fiecare regiune, imaginile !art pot fi de dou tipuri: *5. imagini de tip server ,>. imagini de tip client (ma&ini /art* pentru ser"er 8ser"er side9 $ imagine !art de tip server se caracterizeaz prin faptul c face apel la o aplicaie /un script3 de pe server care realizeaz determinarea regiunii pe care s"a fcut clicI i ncarc documentul 5678 asociat acelei regiuni. >u este nevoie s v facei griji n legtur cu scriptul care prelucreaz imaginea !art deoarece majoritatea serverelor au deja instalat o astfel de aplicaie, cele mai cunoscute fiind Imagemap i 56Image. <olosirea imaginilor !art de tip server parcurge urmtorii pai: ,1. vizitatorul face clicI pe o anumit zon a imaginii ,'. coordonatele acestei zone sunt transmise serverului ,*. scriptul aflat pe server asociaz aceste coordonate cu -+8"ul unui anumit document 5678 /lista adreselor -+8 ale imaginilor asociate cu regiunile !rii se afl plasat tot pe server3 ,,. adresa -+8 mpreun cu coordonatele regiunii sunt trimise napoi la bro;ser care desc!ide documentul 5678 corespunztor. Este lesne de observat c parcurgerea tuturor acestor etape precum i interaciunea cu serverul poate ncetini mult procesul de ncrcare a documentelor 5678 asociate regiunilor !rii. (ingurul avantaj al folosirii imaginilor !art este faptul c funcioneaz n toate bro;serele. 6otui, deoarece versiunile mai noi dect >etscape F.BF i Internet E#plorer F.B recunosc imaginile !art de tip client, se va renuna treptat la folosirea imaginilor !art de tip server. (ma&ini /art* de tip c!ient 8c!ient side9 Imaginile !art de tip client lucreaz independent de server. &nd folosim acest tip de imagini !art plasm toate datele necesare prelucrrii !rii c!iar n corpul documentului 5678 astfel nct bro;serul l e#ecut fr a mai fi necesar o intervenie din partea serverului. Imaginile !art de tip client au avantaje evidente: sunt mult mai rapide, funcionarea lor este mult simplificat, i, n plus, la trecerea cu mouse"ul peste !art, n bara de status a ferestrei bro;serului apare adresa -+8 asociat fiecrei regiuni, ceea ce ofer informaii suplimentare vizitatorului. Crearea unei ima&ini /art* de tip c!ient ,entru a include n documentul 5678 o !art pentru o anumit imagine se folosete etic!eta container 9M1P= 9JM1P=. =ntre aceste etic!ete se plaseaz mai multe etic!ete 91%(1= care au rolul de a defini coordonatele i forma regiunilor pe care dorim s le delimitm pe imagine, ca n e#emplul urmtor: L7 , nameS%!arta%M L +E s!apeS%rect% coordsS%#C, EC, #F, EF% !refS%-+8C%M L +E s!apeS%polE% coordsS%#C, EC, #F, EF, q, #n, En% !refS%-+8F%M L +E s!apeS%circle% coordsS%#, E, raza% !refS%-+8H%M L?7 ,M

+egiunile definite n acest e#emplu sunt un dreptung!i, pentru care sunt specificate coordonatele vrfurilor din stnga sus i dreapta jos, un poligon cu n vrfuri, definit prin coordonatele lor, i un cerc definit prin coordonatele centrului i raz. ,entru a comunica bro;serului ce imagine trebuie s foloseasc pentru a crea imaginea !art se folosete etic!eta pentru imagini 9;M@=, atributul src avnd ca valoare adresa fiierului grafic folosit. =n plus, n cadrul etic!etei LI79M se folosete atributul usemap care are rolul de ancor /legtur intern3. )e e#emplu, dac !arta pe care o folosim a fost definit n etic!eta L7 ,M cu numele %!artaC% i folosete fiierul imagineB)gif atunci etic!eta LI79M va avea urmtoarea structur: LI79 srcS%imagineC.gif% usemapS%R!artaC% ;idt!S%CBB% !eig!tS%CBB% borderS%B%M =n e#emplul urmtor /E#emplul CG.C3 vom crea o imagine !art format din patru regiuni, trei dreptung!iuri i un poligon cu patru vrfuri. ,entru a determina coordonatele vrfurilor fiecrei regiuni am folosit 7icrosoft ,!oto Editor, dar putei folosi orice alt editor grafic. 8a plasarea cursorului mouse"ului oriunde n cadrul imaginii, n bara de status /colul din stnga jos3 vei observa coordonatele n pi#eli, ale punctului n care v gsii. m asociat fiecrei regiuni cte un document 5678 dintre cele create la capitolele anterioare. spectul acestei pagini este redat n <igura CG.C. ( emplul 1-. 1 L5678M L5E )M L6I68EMgraficaCL?6I68EM L?5E )M L'$)KM L5C alignS%center%MImagini !artaL?5CML5+M L7 , nameS%!arta%M L +E s!apeS%polE% coordsS%FD, CBD, JJ, CFF, CCC, FJ, CFG, HA% !refS%culoriC.!tml%M L +E s!apeS%rect% coordsS%CHF, HG, FJG, G1% !refS%fonturiC.!tml%M L +E s!apeS%rect% coordsS%CCJ, AC, FFJ, DF% !refS%listeC.!tml%M L +E s!apeS%rect% coordsS%0C, DG, FF1, CFG% !refS%stiluriC.!tml%M L?7 ,M L5HM,entru a desc!ide cartile din imagine faceti clicI pe una dintre eleL?5HM LI79 srcS%..?Imagini?booIsC.gif% usemapS%R!arta% ;idt!S%F0H% !eig!tS%CJF% borderS%B%M L?'$)KM L?5678M 2. (ma&ini animate $ ima/ine animat$ este format dintr"o serie de imagini /pentru animaie se folosete formatul 9I<3 care sunt afiate una dup cealalt crend aparena unei micri continue. E#ist multe site"uri care ofer imagini animate pe care le putei descrca i salva pe !ard"disI pentru a le folosi n cadrul site"ului dumneavoastr. Este suficient s desc!idei motorul de cutare pe care l folosii de obicei i s introducei drept c!eie de cutare cuvintele %animated gifs% i vei obine un foarte mare numr de rezultate. vei, ns, i posibilitatea de a v crea propriile imagini animate. cest proces poate fi destul de obositor, deoarece trebuie s creai toate imaginile care urmeaz s fac parte din procesul de animaie. =n continuare este prezentat modul de realizare al unei animaii foarte simple, care realizeaz afiarea liter cu liter a cuvntului >I7 rIE. <iecare secvena din cuvnt reprezint o imagine distinct, astfel c vom crea D fiiere 9I< care vor conine secvenele: >I7 6IE, >I7 6I, >I7 6, >I7 , >I7, >I, >, . -ltimul fiier va conine o imagine fr nici o liter.

)eoarece imaginile sunt foarte simple am folosit pentru crearea lor utilitarul &aint, din "indo s / 0ccessories, dar dac dorii s creai imagini mai comple#e este necesar s utilizai un editor grafic mai performant. )up crearea imaginilor i salvarea fiierelor cu e#tensia )gif se trece la ce"a de"a doua etap: reunirea lor pentru a crea procesul de animaie. ceast animaie a fost realizat cu ajutorul aplicaiei numite 9I< &onstruction (et pe care o putei gsi la adresa: !ttp:??;;;.mind;orIs!op.com?alc!emE? ,rogramul ofer, pe lng crearea animaiei, i multe alte opiuni: crearea de butoane, bannere, efecte de tranziie ale paginilor, etc. =n meniul .ile al programului e#ist un 0nimation "i8ard care v va conduce pas cu pas de"a lungul procesul de creare a animaiei. *izard"ul v va cere cteva informaii printre care ce fiiere dorii s fac parte din procesul de animaie /n cazul nostru cele nou fiiere 9I<3, dac dorii ca procesul s se desfoare fr oprire i care este intervalul de timp dintre dou afiri. )up ce 0nimation "i8ard a definitivat procesul de animaie nu mai avei altceva de fcut dect s salvai fiierul astfel obinut i s"l folosii n pagina dumneavoastr. Includerea fiierului care conine imaginea animat ntr"un document 5678 se face ca i la o imagine obinuit folosind etic!eta LI79M. E#emplul CG.F ilustreaz modul cum este inclus n pagin o imagine animat aspectul paginii fiind cel din <igura CG.F. ( emplul 1-. ' L5678M L5E )M L6I68EMgraficaFL?6I68EM L?5E )M L'$)KM L5C alignS%center%MImagini animateL?5CML5+M L,MLI79 srcS%..?Imagini?animatie.gif%M L?'$)KM L?5678M )ei imaginile animate sunt atractive i dau paginii un aspect dinamic, totui e#cesul de animaie poate avea efecte contrare. ,rea multe imagini animate sau o animaie prea comple# pot conduce la mrirea timpului de ncrcare a paginii. =n plus, animaia poate deveni obositoare i poate distrage atenia vizitatorului de la coninutul paginii. U recomandm, deci, s folosii imaginile animate cu grij i numai atunci cnd au un rol bine definit n cadrul paginii. 3. (ma&ini transparente desea o imagine inclus ntr"o pagin arat mai bine dac are un fundal transparent. -n fundal transparent nseamn c dei imaginea are un fundal de o anumit culoare, el nu este vizibil n pagin deoarece fundalul paginii nlocuiete fundalul imaginii. )esigur, orice culoare din imagine poate fi fcut transparent, dar cel mai adesea aceast te!nic se aplic asupra culorii de fundal. )ac dorim s realizm un fundal transparent pentru o imagine trebuie s inem seama de o serie de lucruri: ,-. <undalul trebuie s aib o singur culoare i nu o combinaie de culori. ,0. &uloarea de fundal nu trebuie s mai fie prezent altundeva n cadrul imaginii, deoarece transparena se va aplica tuturor zonelor colorate cu aceeai culoare

,2. Este recomandat ca fundalul paginii de *eb s aib atributul bgcolor setat n mod e#plicit ,4. <otografiile sau imaginile cu mai mult de FGA de culori nu sunt potrivite pentru a fi transformate n imagini transparente deoarece n cadrul lor este greu de definit o singur culoare. ,5. Imaginile pe care dorim s le transformm n imagini transparente trebuie s fie n format 9I< =n E#emplul CG.H am folosit o imagine cu fundalul de culoare alb pe care am prelucrat"o cu ajutorul aplicaiei 7icrosoft ,!oto Editor. >u este necesar dect s desc!idei fiierul 9I< cu imaginea dorit, s selectai din meniul %ools opiunea +et %ransparent Color care permite alegerea i setarea culorii pe care dorim s o facem transparent, apoi s salvai noua imagine sub un alt nume dect cea original. Indiferent care este culoarea de fundal a paginii dumneavoastr, fundalul imaginii transparente va avea aceeai culoare cu pagina aa cum se observ din <igura CG.H. ( emplul 1-. * L5678M L5E )M L6I68EMgraficaHL?6I68EM L?5E )M L'$)K bgcolorS%cEan%M L5C alignS%center%MImagini transparenteL?5CML5+M L)IU alignS%center%M L5JMImaginea originalaL?5JM LI79 srcS%..?Imagini?gold.gif%M L5JMImaginea transparentaL?5JM LI79 srcS%..?Imagini?goldVtr.gif%M L?)IUM L?'$)KM L?5678M ,entru a verifica modul n care funcioneaz imaginea transparent pe diferite culori ale fundalului paginii, atribuii atributului bgcolor i alte valori dect cea din e#emplu. 4. -e.umat =n documentele *eb pot fi incluse diverse elemente avansate de grafic: ->. Imagini !art -1. nimaie -'. Imagini transparente $ imagine !art este o imagine care conine zone active pe care se poate efectua clicI cu mouse" ul, fiecare zon conducnd la desc!iderea unui document 5678 diferit. Imaginile !art sunt de dou tipuri: -*. Imagini !art de tip server -,. Imagini !art de tip client /cele mai utilizate3 $ imagine !art de tip client se insereaz ntr"un document cu ajutorul etic!etei container L7 ,M L?7 ,M. =n cadrul acestei etic!ete fiecare zon este definit prin intermediul etic!etei L +E M. Imaginile animate sunt fiiere 9I< care se includ n pagin ca orice alt imagine, folosind etic!eta LI79M. ,entru a crea o imagine animat avei nevoie de un editor grafic, cu ajutorul cruia s creai

imaginile care vor face parte din componena animaiei i de un program special care s le reuneasc ntr"un singur fiier 9I<. Imaginile transparente sunt imagini la care una dintre culori /cel mai adesea culoarea de fundal3 este transformat n culoare transparent, astfel nct la includerea ei ntr"o pagin *eb fundalul imaginii se va confunda cu fundalul paginii. Capitolul 10 Motoare de c$utare i metata/"uri 1. Ce este un motor de c*utare? )ac avei o minim e#perien n navigarea pe *eb v"ai ntlnit, fr ndoial cu motoarele de cutare. Motoarele de c$utare sunt aplicaii plasate pe servere deosebit de puternice, care conin baze de date imense i care au drept scop cercetarea i inde#area sutelor de milioane de pagini *eb e#istente. -tilitatea motoarelor de cutare este evident: fr ele ar fi aproape imposibil s gsim informaiile care ne intereseaz n oceanul de informaii care este *eb"ul. 7otoarele de cutare conin un formular de tip cmp de editare n care utilizatorul introduce unul sau mai multe cuvinte folosite drept c)eie de c$utare. +ezultatele sunt furnizate sub forma unei liste de pagini *eb care conin cuvintele c!eie introduse. Inde#area unei pagini de ctre un motor de cutare nseamn asocierea cuvintelor c!eie cu coninutul informaional al acesteia. &ele mai folosite motoare de cutare sunt, n acest moment, 9oogle, Ka!ooN, 8Ecos, 9o.com i E#cite. 7otoarele de cutare au drept scop inde#area tuturor paginilor e#istente pe *eb, dar, evident, acest lucru este imposibil. $rict de performante ar fi programele cu care lucreaz, numrul de site"uri care sunt publicate n permanen pe *eb depete posibilitile acestora. cesta este motivul pentru care simpla postare a unui site pe *eb nu garanteaz ctui de puin c acesta va avea vizitatori. )escoperirea lui de ctre motoarele de cutare poate dura ntre ase luni i un an. 6ocmai de aceea nu trebuie s ateptai ca site"ul dumneavoastr s fie descoperit, ci trebuie s"l promovai activ, una dintre metode fiind nscrierea lui n bazele de date ale motoarelor de cutare. E#ist dou tipuri principale de motoare de cutare, care se bazeaz pe moduri diferite de a face inde#area paginilor: 7otoarele de cutare de tip %pianjen% care realizeaz inde#area automat, pe baza cuvintelor c!eie prezente n antetul documentelor 5678 /de e#emplu 9oogle3. cest tip de motoare folosesc algoritmi e#trem de performani, care cerceteaz i inde#eaz milioane de pagini pe zi. 7otoarele de cutare care fac inde#area pe baza cuvintelor c!eie furnizate de creatorul paginii, la nscrierea acesteia n baza de date a aplicaiei /de e#emplu Ka!ooN3. =nscrierea n baza de date se face personal, de ctre autorul site"ului, iar evaluarea site"ului se face de ctre personal uman. ,entru a face mai eficient inde#area paginilor de ctre motoarele de tip %pianjen% limbajul 5678 include o categorie special de etic!ete numite metatag"uri. 2. Metata&-uri Metata/"urile sunt o categorie special de etic!ete care sunt plasate n antetul documentului 5678 /n blocul L5E )M3. &a i celelalte elemente incluse n antetul documentului, cu e#cepia titlului documentului, metatag"urile nu sunt vizibile pentru vizitatorul paginii. ,rimul metatag despre care vom vorbi este deja cunoscut i l"ai folosit de foarte multe ori pn acum: este metatagul 9T;TL(=. (e utilizeaz conform sinta#ei:

L6I68EM6itlul paginii *ebL?6I68EM. )up cum ai observat din e#emplele de pn acum, titlul paginii apare n bara de titlu a ferestrei bro;serului. 7ulte dintre motoarele de cutare afieaz n lista de rezultate i titlul paginilor pe lng adresele -+8. 6itlul paginii este informaia care l determin pe vizitator s intre sau nu pe pagina dumneavoastr. 6itlul trebuie s fie o propoziie care s atrag atenia i n acelai timp s conin informaiile eseniale privind subiectul i coninutul paginii. &elelalte metatag"uri se introduc prin intermediul etic!etei 9M(T1= care nu este o etic!et container. Etic!eta L7E6 M admite o serie de atribute care ofer motoarelor de cutare diverse informaii care s ajute la inde#area paginii. lte atribute ofer informaii bro;serului privind data de e#pirare a documentului sau specific perioada de timp dup care documentul este rencrcat n mod automat. E#ist dou categorii de metatag"uri: C. metatag"urile name F. metatag"urile !ttp"eTuiv Metata&-uri!e 3name3 &ele mai folosite metatag"uri sunt cele care se refer la cuvintele c!eie care caracterizeaz pagina i coninutul ei, oferind astfel informaii motoarelor de cutare. cestea sunt: %IeE;ords% %description% %robots% Metata/"ul 3?eGFords3 7etatag"ul %IeE;ords% se introduce conform urmtoarei sinta#e: L7E6 nameS%IeE;ords% contentS%lista cuvinte c!eie%M 8ista cuvintelor c!eie trebuie s includ toate cuvintele pe care considerai c le"ar putea introduce un vizitator ca c!eie de cutare pentru a descoperi pagina dumneavoastr. &uvintele se scriu desprite prin virgul, fr spaii intre ele. ,e lng cuvintele c!eie, putei folosi i combinaii de cuvinte. )e e#emplu ntr"o pagin care ofer informaii despre crearea de pagini *eb i ;eb design, cuvintele c!eie ar putea fi urmtoarele: L7E6 design%M nameS%IeE;ords% contentS%*eb design, creare pagini *eb, construire site, *eb site

9sirea cuvintelor i combinaiilor de cuvinte c!eie este o etap care trebuie tratat cu atenie. ,entru a aduce pagina dumneavoastr n atenia acelor vizitatori pentru care este ea conceput, cuvintele c!eie trebuie alese cu atenie i ele trebuie s reflecte e#act elementele de coninut definitorii ale paginii. -nii dintre creatorii de pagini *eb care doresc s obin o poziionare mai bun n lista de rezultate furnizate de motoarele de cutare folosesc n mod abuziv cuvintele c!eie, repetnd acelai cuvnt sau combinaii de cuvinte de un numr foarte mare de ori sau folosind cuvinte c!eie care nu au legtur cu subiectul paginii. &a urmare a acestor ncercri de %pclire% a motoarelor de cutare, au

fost dezvoltai algoritmi performani care identific tentativele de fraud i care se soldeaz fie cu scderea cotaiei paginilor respective, fie c!iar cu eliminarea lor din baza de date a motorului de cutare. Metata/"ul 3description3 7etatag"ul n cadrul cruia se realizeaz descrierea paginii este, de asemenea foarte important pentru succesul acesteia. &a i cel anterior, se introduce n antetul documentului conform urmtoarei sinta#e: L7E6 nameS%description% contentS%descrierea subiectului paginii%M 7ulte motoare de cutare includ n lista de rezultate pe lng -+8"ul i titlul paginii i descrierea ei. ,entru a face descrierea paginii dumneavoastr este bine s folosii combinaii de cuvinte c!eie, reunite n fraze atractive i convingtoare. <ii concis n descriere i plasai informaiile eseniale la nceput deoarece este posibil ca descrierile prea lungi s fie trunc!iate. &a i n cazul alegerii cuvintelor c!eie, acordai o atenie deosebit formulrii unei descrieri ct mai potrivite i inei seama c aceasta poate fi singura dumneavoastr ans de a"l convinge pe utilizator s desc!id pagina pe care ai creat" o. )escrierea unei pagini poate arta astfel: L7E6 nameS%description% contentS%6utorial de *eb design care va initiaza pas cu pas in procesul de construire al unui site *eb. Invatati sa concepeti, sa creati si sa promovati propriul dumneavoastra site.%M ,e lng metatag"ul care face descrierea paginii este recomandat introducerea, la nceputul paginii, a unui comentariu n cadrul cruia s inserai descrierea. cest lucru este util deoarece e#ist motoare de cutare care ignor metatag"urile i preiau primele cuvinte pe care le gsesc n pagin. )ac ai reuit s formulai o descriere sugestiv i convingtoare, o putei folosi c!iar ca fraz de nceput n partea vizibil a paginii. Metata/"ul 3robots3 (unt situaii cnd creatorul paginii *eb dorete ca anumite pagini s fie e#cluse de la inde#area de ctre motoarele de cutare. )e e#emplu dac ai publicat site"ul pe *eb nainte de a fi terminat /dei acest lucru este nerecomandat3 sau dac dorii s reactualizai coninutul anumitor pagini i dorii ca pn la finalizarea modificrilor paginile s nu fie accesate de motoarele de cutare, putei folosi n antetul paginilor respective metatag"ul %robots% astfel: L7E6 nameS%robots% contentS%noinde#, nofollo;%M ceast construcie comunic motoarelor de cutare s nu inde#eze pagina i n acelai timp s nu urmeze nici una dintre legturile incluse n ea. tributul content poate lua urmtoarele valori: all " permite inde#area tuturor paginilor none " nu permite inde#area nici unei pagini i nici urmarea legturilor din cadrul lor inde# " permite inde#area paginii follo; " permite urmarea legturilor din pagin noinde# " nu permite inde#area paginii nofollo; " nu permite urmarea legturilor din cadrul paginii lte metatag"uri name utilizate sunt: L7E6 nameS%aut!or% contentS%numeVautor%M ,ermite specificarea numelui autorului paginii

L7E6 nameS%copErig!t% contentS%drepturi copErig!t%M ,ermite specificarea drepturilor de autor L7E6 nameS%generator% contentS%numeV aplicatie%M (pecific aplicaia cu care a fost creat pagina. E#emplu: L7E6 nameS%generator% contentS%7icrosoft <ront,age H.B%M Metata&-uri!e 2)ttp"eWuiv2 ,e lng metatag"urile name care ofer informaii motoarelor de cutare, e#ist metatag"urile !ttp"eTuiv care ofer informaii bro;serului privind documentul pe care urmeaz s"l desc!id. Iat n continuare o list a acestor metatag"uri mpreun cu funciile fiecruia dintre ele. Tabel 10. 1 Etic!eta +unc!ia cest tip de metatag"uri sunt L7E6 !ttp" ec!ivalente cu !eaderele 566,. Ele eTuivS%&ontent"6Epe% comunic bro;serului care este tipul contentS%te#t?!tml] c!arsetSiso" paginii i cum s o afieze precum i 00GD"C%M setul de caractere folosit /opional3 L7E6 !ttp" (pecific limbajul de script eTuivS%&ontent"(cript"6Epe% folosit n document contentS%te#t?javascript%M L7E6 !ttp" (pecific limbajul de foi de eTuivS%&ontent"(tEle"6Epe% stiluri folosit n document contentS%te#t?css%M L7E6 eTuivS%e#pires% e#pirariiM !ttp" ,ermite precizarea datei la care contentS%dataV documentul poate fi considerat e#pirat (pecific numrul de secunde dup care pagina este rencrcat automat de ctre bro;ser. tributul content poate conine, opional, i adresa -+8 a altei pagini care se va ncrca n locul paginii curente. ceast opiune este util cnd dorii redirectarea vizitatorului ctre alt pagin. E#emplu: L7E6 !ttp"eTuivS%refres!% contentS%G] urlS!ttp:??;;;.nouapagina.com%M

L7E6 eTuivS%refres!% secunde%M

!ttp" contentS%nrV

L7E6 !ttp" eTuivS%refres!% contentS%nr secunde] urlSadresaVnoua%M

)up cum observai, metatag"urile de tip !ttp"eTuiv sunt folosite pentru a transmite bro;serului diverse informaii privind documentul 5678. )in aceast categorie face parte i metatag"ul care permite specificarea modului de tranziie ntre pagini: L7E6 !ttp"eTuivS%,age"Enter% 6ransitionScodVtranzitie3%M contentS%+eveal6rans/)urationSnrVsecunde,

L7E6 !ttp"eTuivS%,age"E#it% 6ransitionScodVtranzitie3%M

contentS%+eveal6rans/)urationSnrVsecunde,

unde: nrVsecunde reprezint durata tranziiei n secunde iar codVtranzitie poate fi unul dintre codurile de mai jos. <iecare dintre ele realizeaz tranziia paginii n alt mod. Tabel 10. ' Cod tran&i!ie B C F H J G A 1 0 D CB CC CF CH CJ CG de Cum se .ace tran&i!ia )reptung!i nc!ide )reptung!i desc!ide care care se se

&erc care se nc!ide &erc care se desc!ide )e jos n sus )e sus n jos )e la stnga la dreapta )e la dreapta la stnga )ungi care deplaseaz spre dreapta )ungi care deplaseaz n jos se se

)reptung!iuri care se deplaseaz spre dreapta )reptung!iuri care se deplaseaz n jos ,i#eli care %dizolv% pagina &ortin care se nc!ide orizontal &ortin care desc!ide orizontal se

&ortin care se nc!ide vertical

E#emplul CA.C ilustreaz funcionarea acestui metatag. ,utei observa modul de tranziie dintre pagini din <igura CA.C. ( emplul 10. 1 L5678M L5E )M L6I68EMmetaCL?6I68EM L7E6 !ttp"eTuivS%page"enter% contentS%+eveal6rans/durationSG, transitionSB%M

L7E6 !ttp"eTuivS%page"e#it% contentS%+eveal6rans/durationSG, transitionSC%M L?5E )M L'$)K bgcolorS%red%M L5C alignS%center%M6ranzitia intre paginiL?5CML5+M ,entru a observa modul de tranzitie apasati L !refS%metaF.!tml%MaiciL? M L?'$)KM L?5678M ,utei sc!imba codurile dup cum dorii pentru a observa i alte moduri de tranziie. )ocumentul meta>)html creat n E#emplul CA.F servete doar pentru a e#emplifica modul n care se face tranziia pentru intrarea n pagin. ( emplul 10. ' L5678M L5E )M L6I68EMmetaFL?6I68EM L?5E )M L'$)K bgcolorS%Eello;%M L5HM,entru a reveni la pagina anterioara apasati butonul 'acI al bro;seruluiL?5HM L?'$)KM L?5678M 1ten!ieH m precizat c metatag"urile sunt incluse n antetul documentului 5678. tunci cnd folosii cadre n paginile dumneavoastr nu uitai s plasai metatag"urile n blocul L5E )M al tuturor documentelor care se desc!id n cadre i nu numai n documentul de definire a cadrelor L<+ 7E(E6M. 3. -e.umat 7otoarele de cutare sunt aplicaii foarte puternice care au drept scop inde#area i adugarea n baza lor de date a sutelor de milioane de pagini *eb e#istente. ,entru a facilita inde#area paginii de ctre motoarele de cutare, n antetul documentului 5678 se includ nite elemente speciale numite metatag"uri, prin intermediul etic!etei L7E6 M. &ele mai importante metatag"uri sunt cele care furnizeaz motoarelor de cutare lista de cuvinte c!eie asociat paginii i descrierea acesteia /metatag"urile %IeE;ords% i %description% 3, precum i cel care interzice inde#area paginilor /metatag"ul %robots% 3. lte metatag"uri furnizeaz informaii bro;serului privind tipul paginii, intervalul de timp dup care pagina este rencrcat automat, momentul e#pirrii, autorul, programul cu care a fost construit, etc. Crearea i publicarea unui site Feb m studiat pn acum elementele fundamentale ale limbajului 5678 inclusiv modul n care acesta poate fi e#tins prin folosirea scripturilor &9I, a scripturilor :ava(cript i a foilor de stiluri. vei la ndemn acum instrumentele necesare pentru a crea propriul dumneavoastr site *eb. )ar este oare suficient4 +spunsul este nu. ,entru a crea un site *eb de calitate, care s comunice informaiile n mod logic i atractiv i care s atrag vizitatori permaneni, cunoaterea limbajului 5678 nu este suficient. =nainte de a ncepe scrierea codului 5678 pentru paginile dumneavoastr trebuie s parcurgei alte dou etape importante:

planificarea site"ului i stabilirea elementelor de *eb design. )up ce ai finalizat documentele 5678 care vor face parte din site trebuie s testai funcionarea linI"urilor i aspectul paginilor n diferite bro;sere. .i, n fine, dup ce toate aceste etape au fost parcurse, urmeaz publicarea site"ului pe un server *eb care s"l fac accesibil tuturor celor care navig!eaz pe *eb. =n cele ce urmeaz vom discuta despre etapele care preced construirea documentelor 5678 care vor forma site"ul i despre cele care urmeaz dup ce codul 5678 al paginilor a fost definitivat. Capitolul 12 Plani.icarea site"ului Plani.icarea este un aspect crucial n procesul de creare a unui site *eb, deoarece este etapa n care se iau decizii care vor influena designul, implementarea i, mai trziu, promovarea site"ului. *orld *ide *eb fiind un mediu desc!is i dinamic, planificarea este mai degrab un proces continuu n care intervin sc!imbri determinate de nnoirea permanent a informaiilor i de apariia altora noi. tunci cnd creai un site *eb trebuie s fii contient c e#ist o serie de factori asupra crora creatorul site"ului nu are nici un control. ,rimul pas n procesul de planificare este identificarea acestor factori i determinarea modului n care acetia pot afecta structura viitoare a site"ului dumneavoastr. 1. 0actori care nu pot 'i p!ani'icai <actorii pe care creatorul site"ului nu i poate controla i prin urmare nu pot face obiectul unei planificri riguroase sunt urmtorii: Comportamentu! uti!i.atoru!ui. cest factor implic faptul c nu putei controla cum va accesa utilizatorul informaiile din site"ul dumneavoastr. *eb"ul este un sistem permeabil, aceasta nsemnnd c un vizitator poate intra n interiorul site"ului nu numai prin pagina de nceput /pagina !ome3 ci i printr"o pagin oarecare. Uizitatorul site"ului poate ajunge la el parcurgnd o list de rezultate furnizat de un motor de cutare, sau prin intermediul unui linI aflat pe un alt site, sau parcurgnd o list de resurse. $ricare dintre aceste metode l poate conduce pe vizitator la o alt pagin din interiorul site"ului, i nu la cea destinat de dumneavoastr a fi pagina 5ome. =n general, creatorul site"ului este tentat s structureze site"ul avnd n minte un anumit tip de acces, cel mai adesea cel care pleac de la pagina de start, ceea ce conduce la alegerea unei anumite structuri, la o anumit organizare a legturilor ntre pagini, etc. 6rebuie s avei permanent n vedere faptul c vizitatorul site"ului poate avea un cu totul alt mod de a parcurge site"ul dect cel gndit de dumneavoastr i s"i furnizai de"a lungul ntregului site elemente de navigaie clare care s"l ajute s se orienteze. $ro%seru! uti!i.atoru!ui. a cum am mai discutat, e#ist o mare varietate de bro;sere folosite pentru a vizualiza paginile *eb. ,rin urmare, vizitatorii site"ului vor percepe o imagine diferit a site"ului dumneavoastr, n funcie de tipul de bro;ser folosit. &reatorul site"ului nu poate ti ce tip de bro;ser folosete un anumit vizitator i deci nu are control asupra modului n care va fi afiat coninutul paginilor sale. )e e#emplu, mai e#ist nc utilizatori care folosesc versiuni vec!i de >etscape sau E#plorer, care nu suport anumite e#tensii 5678. E#ist de asemenea nc n uz bro;sere te#t, cum este 8En#, care nu suport grafica. )ac vei plasa informaii eseniale n fiiere grafice, de e#emplu, aceti utilizatori nu vor avea acces la ele.

)in acest motiv este bine s stabilii de la nceput care dorii s fie nivelul de accesibilitate al site" ului dumneavoastr din acest punct de vedere. -n alt aspect este nelegerea faptului c 5678 este un limbaj care este destinat definirii structurii documentului i nu al modului su de afiare. Este recomandat s evitai specificarea n detaliu a aspectului paginilor sau optimizarea paginilor pentru un anumit tip de bro;ser. Le&*turi!e cu pa&ini externe. =ntr"un site *eb e#ist de obicei legturi ctre resurse e#terioare site"ului care sunt i ele n afara controlului dumneavoastr. ,aginile referite prin aceste legturi i pot sc!imba adresele, fcnd astfel ca legtura s nu mai fie valabil /legturi perimate3. )e asemenea pot e#ista legturi rupte, n cazul cnd serverul pe care este gzduit pagina respectiv are anumite dificulti te!nice. rinnd seama de imposibilitatea de a controla acest aspect, pot fi adoptate mai multe metode de abordare: (ite"ul s nu conin nici o legtur e#tern sau care s se afle n afara controlului direct al designerului. Este metoda cea mai sigur. )in pcate, aceast strategie anuleaz posibilitatea ca vizitatorul s beneficieze de informaii cone#e cu subiectul site"ului dumneavoastr aflate n e#teriorul su. &entralizarea resurselor. Este o practic des ntlnit pe *eb, aceea de a include toate legturile e#terne ntr"o pagin special destinat acestora. 'eneficiul acestei strategii este c n cazul cnd una dintre aceste legturi e#terne nu mai funcioneaz, vizitatorul se poate cu uurin rentoarce la pagina de resurse pentru a testa urmtorul linI. =n plus, cu unele e#cepii, vizitatorii vor parcurge cel puin o parte a site"ului nainte de a ajunge la pagina de legturi e#terne i a"l prsi, eventual, definitiv. Ieirea liber. Este cea mai fle#ibil abordare, permind plasarea legturilor e#terne oriunde n cadrul paginilor. )ezavantajul ei major este c vizitatorul poate prsi prematur site"ul pentru a urma un anumit linI. )ac nu avei control asupra legturilor de la site ctre e#terior, este tot att de adevrat c nu putei controla nici legturile care se fac din e#terior ctre site. cest lucru poate fi dezavantajos, deoarece nu putei ti n ce mod este prezentat legtura ctre site"ul dumneavoastr. ,oate c referirea la el este ironic sau ruvoitoare, ns acest lucru este dincolo de controlul dumneavoastr. 6ot ceea ce putei face este s creai un site de calitate i cu un coninut valoros, care s conving prin el nsui. &u toate c elementele prezentate mai sus pot prea descurajante, unele dintre ele prezint totui i avantaje. stfel, permeabilitatea *eb"ului poate lucra n favoarea designerului, cu condiia ca acesta s structureze atent informaiile prezentate i s ofere suficiente elemente de navigaie. $ pagin sau un grup de pagini din cadrul unui site pot fi folosite ca referine n alte pagini sau c!iar ca elemente constitutive ale unui alt site. )e e#emplu, un site de tip mono"pagin care face prezentarea unui manual de 5678 poate fi folosit ca pagin individual ntr"un site de librrie electronic, sau poate constitui o legtur util din interiorul unui site de design *eb, mrind astfel ansele ca pagina respectiv s fie accesat de vizitatori printr"unul dintre aceste puncte. 2. #tape!e p!ani'ic*rii site-u!ui ,rocesul de planificare a unui site trebuie s parcurg urmtoarele etape: (tabilirea audien!ei (tabilirea scopului )efinirea obiectivelor

&olectarea in.orma!iilor despre subiectul prezentat (tabilirea speci.ica!iilor (tabilirea modului de pre&entare

1udiena ,entru a crea un site de calitate i o comunicare eficient a informaiilor, o etap deosebit de important este definirea audienei site"ului. udiena reprezint publicul cruia i se adreseaz site"ul. (tabilirea audienei site"ului dumneavoastr este esenial deoarece contribuie la definirea coninutului paginilor, precum i a organizrii i aspectului su. -n site *eb creat pe baza unor informaii precise asupra audienei sale actuale i viitoare are mult mai multe anse de succes dect unul care nu se adreseaz unui public specific. (tabilirea audienei unui site implic doi pai: )efinirea publicului int.

6rebuie s stabilii cui se adreseaz site"ul dumneavoastr. ,utei, de e#emplu s v adresai %persoanelor care studiaz c!imia%. )ei este un enun care definete ntr"o oarecare msur audiena site"ului, este de dorit ca definirea audienei s fie mai precis dect att. U putei adresa de pild, specialitilor n c!imie, i atunci informaiile vor avea un nalt grad de specializare i un nivel tiinific ridicat sau v putei adresa elevilor de liceu interesai de studiul c!imiei, sau care vor da e#amene la aceast disciplin. =n acest caz informaiile vor fi de nivel mai general, legate de programa colar i de tipurile de subiecte cu care elevii se vor confrunta la e#amene. )ac, de e#emplu, dorii s creai un site comercial, stabilirea segmentului de pia cruia v adresai este la fel de important. )ac intenionai s vindei produse cosmetice v vei adresa probabil femeilor. )ar aceasta este o reprezentare mult prea general a publicului dumneavoastr. i putea s fii mai specific, stabilindu"v drept segment de pia femeile cu vrsta mai mic de FG de ani. =n aceast situaie este mai probabil c vor avea succes produsele de nfrumuseare mai ndrznee, n vreme ce, dac v adresai femeilor de vrst medie, cele mai bine vndute vor fi produsele de ntreinere, cremele anti"rid, etc. &oncluzia care se impune este c definirea ct mai precis a audienei este definitorie pentru toate etapele ulterioare ale elaborrii site"ului. &u ct mai bine definit este audiena, cu att ansele de a crea un site de succes sunt mai mari. )efinirea informaiilor necesare care privesc publicul int.

>u toate informaiile despre publicul int sunt eseniale n elaborarea site"ului. )ac intenionai s v adresai specialitilor n c!imie, care anume caracteristici ale acestora sunt importante pentru dumneavoastr4 >ivelul de educaie4 ria de specializare4 &aracteristici personale, precum nlimea i greutatea4 Evident, e#ceptnd cazul n care intenionai s vindei prin intermediul site"ului ec!ipament de laborator, ultimele informaii sunt inutile. ,rin urmare este necesar s identificai informaiile relevante privitoare la audiena site"ului dumneavoastr. Scopu! (tabilirea scopului site"ului este etapa n care trebuie s rspundei la ntrebarea % de ce?%. )e ce dorii s creai acest site4 )efiniia scopului site"ului reprezint tema conductoare n procesul de construire a acestuia. -n site fr un scop clar i bine definit lanseaz un mesaj neconvingtor i ceos. Uizitatorul se va ntreba, fr ndoial, %8a ce servete acest site4% i se va grbi s"l prseasc.

,entru a defini scopul site"ului trebuie s avei n vedere urmtoarele elemente: ria de cuprindere a subiectului. ( presupunem c dorii s creai un site care s conin informaii despre muzica rocI a anilor @AB. =ntr"o asemenea situaie, nu vei defini drept subiect al site"ului muzica rocI n ansamblu, deoarece o definire att de vast depete cu mult aria de cuprindere a subiectului dumneavoastr. udiena. =n scopul site"ului trebuie s facei referire i la audiena stabilita anterior. stfel, scopul site"ului ar putea fi definit n maniera urmtoare: %(ite"ul ofer informaii iubitorilor muzicii rocI a anilor @AB, de vrst medie%. >ivelul de detaliere a subiectului. 6rebuie s specificai dac v referii doar la grupurile rocI reprezentative sau dorii s facei o istorie complet a perioadei. 'eneficiul sau avantajul vizitatorului. &e are de ctigat o persoan care viziteaz site" ului dumneavoastr4 ,oate afla informaii inedite despre formaiile preferate, sau poate fi informat cu privire la evoluia lor ulterioar. (tabilirea scopului site"ului determin deciziile ulterioare ale designerului privind mesajul pe care l transmite site"ul. -n scop bine articulat servete ca jalon pentru toate celelalte etape ale procesului de planificare i creare a site"ului. (copul site"ului poate reprezenta c!iar prima informaie care le este oferit vizitatorilor, la intrarea pe prima pagin. D<iecti"e!e )up ce ai stabilit audiena site"ului, care sunt informaiile privitoare la publicul int, precum i scopul su, pasul urmtor const n combinarea tuturor acestor informaii i formularea unor obiective specifice ale site"ului dumneavoastr. $biectivele reprezint o detaliere a scopului general al site"ului, coninnd informaiile specifice care vor conduce la ndeplinirea scopului pentru care a fost creat site" ul. )e e#emplu, dac scopul unui site este %s ofere informaii despre oraul ggg% , acesta poate fi dus la ndeplinire prin intermediul unor obiective specifice i variate cum ar fi: informaii despre aezarea geografic a oraului, despre dezvoltarea economic, despre viaa cultural, obiective turistice, etc. &u alte cuvinte, n vreme ce scopul site"ului comunic ce avei de gnd s facei, obiectivele comunic ce informaii vei oferi pentru a v ndeplini scopul propus. (pre deosebire de scopul site"ului, obiectivele se pot modifica n timp, pe msur ce apar noi informaii despre publicul int sau despre subiectul site"ului, cu ajutorul crora putei susine mai bine scopul su. Co!ectarea in'ormaii!or despre su<iect Informaiile referitoare la subiectul site"ului includ att informaiile on!line ct i sursele clasice de informaii. =n aceast etap vei colecta nu numai informaii legate de subiectul site"ului care vor fi prezentate utilizatorului ci i informaiile i cunotinele de care avei nevoie pentru realizarea site"ului. ,aii necesari n construirea coleciei de informaii necesare sunt: (tabilirea informaiilor necesare, att cele pe care le vei furniza vizitatorului ct i cele care v sunt necesare dumneavoastr

 )eterminarea modului cum vei obine aceste informaii. =n aceast etap trebuie s identificai sursele de documentare. Informaiile despre subiectul ales le putei gsi pe *eb, n literatura de specialitate, n diverse baze de date. 7odul de reactualizare a informaiilor. )ac informaiile pe care dorii s le prezentai sunt dinamice i se perimeaz cu repeziciune, trebuie s stabilii cum intenionai s le actualizai i care este intervalul de timp ntre dou reactualizri. )e e#emplu, dac intenionai s creai un site care s prezinte tiri sau date despre vreme, ele vor trebui reactualizate zilnic sau c!iar mai frecvent. )ac site"ul prezint informaii despre istorie, evident c informaiile vor fi reactualizate mult mai rar, eventual la apariia unor noi descoperiri ar!eologice, de e#emplu. Speci'icaii!e (tabilirea specificaiilor pentru un site reprezint o detaliere a obiectivelor sale i definirea unor cerine sau a unor restricii. (pecificaiile descriu n detaliu ce informaii vor fi oferite n paginile site" ului i cum vor fi ele prezentate. )e e#emplu, dac unul dintre obiectivele unui site este %furnizarea de legturi ctre surse bibliografice referitoare la subiect% , atunci specificaiile vor preciza care sunt aceste surse bibliografice, care sunt adresele lor -+8, cte astfel de adrese vor fi incluse ntr"o pagin, etc. (pecificaiile trebuie s identifice toate resursele necesare atingerii obiectivelor: linI"uri, fiiere grafice, fiiere de sunet sau video, alte elemente care vor fi incluse n site: formulare, imagini !art, scripturi. )e asemenea, n cadrul specificaiilor trebuie stabilite i elementele care nu vor fi incluse n pagini /dac este cazul3. )e e#emplu, se poate specifica s nu fie folosite anumite e#tensii 5678, sau formulare, fiiere care s depeasc anumite dimensiuni, etc. Modu! de pre.entare ,lanificarea modului de prezentare implic o serie de decizii care vor servi drept puncte de reper n etapa de construire efectiv a site"ului. ceast etap poate include: &rearea unor template"uri pentru site &rearea unor mostre de documente 5678, imagini !art, sau formulare Ealonarea n timp a etapelor de creare a site"ului

3. -e.umat ,rima etap a procesului de construire a unui site este planificarea. =n aceast etap trebuie identificai factorii care nu pot fi controlai printre care se numr: comportamentul utilizatorului, bro;serul cu care va fi vizualizat pagina i legturile cu pagini e#terne. ,lanificarea site"ului parcurge urmtoarele etape: (tabilirea audienei site"ului (tabilirea scopului site"ului )efinirea obiectivelor site"ului &olectarea informaiilor despre subiectul prezentat (tabilirea specificaiilor site"ului (tabilirea modului de prezentare a site"ului

-n site de calitate, care s ofere informaii valoroase n mod atractiv i s permit o comunicare eficient a acestora nu se nate n mod ntmpltor. <r a avea o privire de ansamblu asupra aspectelor stabilite n faza de planificare, ansele de a realiza un site de bun calitate sunt minime. )ac vei ncepe s scriei direct codul 5678 fr s trecei prin etapa de planificare vei obine doar o ngrmdire de pagini fr coeren, adesea defectuos legate ntre ele, cu un coninut neclar i slab structurat. Capitolul 14 :esi/nul site"ului $dat parcurs etapa de planificare, avnd clare audiena, scopul, obiectivele i specificaiile site" ului, putei trece la etapa de creare efectiv. ,entru ca site"ul dumneavoastr s aib un aspect plcut, o bun organizare, instrumente de navigare eficiente trebuie s cunoatei i s aplicai regulile fundamentale de *eb design. &nd suntei n faza de concepere a designului principalul dumneavoastr obiectiv este s creai un aspect atractiv i s oferii vizitatorului site"ului un sentiment de satisfacie, pe msur ce acesta parcurge paginile. )esignul unui site trebuie s ec!ilibreze performanele bro;serului, cu estetica i funcionalitatea site"ului. =n etapa de design sunt luate deciziile de ordin practic care vor conduce la ndeplinirea obiectivelor stabilite: cte imagini sau elemente grafice vei include n pagin, ct de mult te#t vor conine paginile, ce te#te sau imagini vor fi folosite drept legturi. 1. :rincipii!e desi&nu!ui %e< ,entru a lua deciziile corecte n ceea ce privete designul unui site trebuie s avei n vedere cteva principii de baz: 1socierea semni.ica!iilor. <olosii"v de puterea !Eperte#tului pentru a stabili legturi ntre informaiile nrudite ca semnificaie. Men!inerea competitivit$!ii. )eoarece *eb"ul este un mediu foarte competitiv, asigurai"v c designul site"ului se menine la cel mai sczut cost posibil, din punctul de vedere al vizitatorului. cest cost include timpul de ncrcare al paginilor, aplicaiile suplimentare necesare pentru vizualizarea optim a paginilor precum i efortul depus de vizitator pentru a nelege informaiile prezentate. +olosirea e.icient$ a resurselor. legei pentru site"ul dumneavoastr acele elemente care vin n ntmpinarea necesitilor utilizatorului, i sunt ct mai eficiente posibil din punctul de vedere al dimensiunii fiierelor, al timpului de acces i al ntreinerii ulterioare. Concentrarea pe necesit$!ile utili&atorului. cesta este, poate, cel mai important principiu de *eb design i, parado#al, cel mai adesea ignorat. -n site *eb nu se construiete pentru a satisface gustul designerului /sau al clientului pentru care lucreaz3 i nici pentru a etala cunotinele sale vaste asupra celor mai noi te!nici de programare *eb, ci pentru a veni n ntmpinarea nevoii de informaii a vizitatorilor si. <ocalizarea asupra utilizatorului este prioritatea principal a unui site de calitate. Un!ele/erea permeabilit$!ii. cest principiu se refer la nelegerea i asumarea faptului c vizitatorul poate accesa un site prin oricare pagin a sa. )in acest motiv este de dorit ca informaiile din cadrul unei pagini s se auto"susin fr a depinde de informaiile din restul site"ului. )ac acest lucru nu este posibil, este obligatorie prezena unor instrumente de navigaie eficiente care s permit vizitatorului orientarea cu uurin n interiorul site"ului. Crearea unui aspect pl$cutR coerent i .luent. ,aginile site"ului trebuie s ofere impresia unui tot bine organizat, elementele vizuale /icon"uri, elemente de navigare3 trebuie s fie coerente pe tot

parcursul site"ului, fiecare pagin trebuie s conin indicii asupra identitii site"ului i asupra scopului ei. Sus!inerea interactivit$!ii. &!iar dac nu folosii formulare care asigur un grad nalt de interactivitate cu vizitatorii site"ului, este obligatorie prezena unor informaii de contact /adresa de mail a *ebmaster"ului, cel puin3 astfel nct utilizatorii s poat obine informaii suplimentare sau s poat comunica eventualele probleme aprute la parcurgerea site"ului. Sus!inerea navi/a!iei. sigurarea unor instrumente de navigaie eficiente este una dintre condiiile eseniale ale unui site de calitate. (e spune c un site bun este acela n care vizitatorul nu este niciodat obligat s apese butonul 'acI al bro;serului. 2. Dr&ani.area unui site 'una organizare a site"ului este unul dintre elementele c!eie ale succesului su. 7odul de organizare depinde de scopul, obiectivele i subiectul site"ului i se bazeaz pe principiile de design enunate mai sus. =n funcie de structura lor, site"urile se mpart n mai multe categorii: site"uri liniare, formate dintr"o singur pagin /mono"pagin3 site"uri liniare formate din mai multe pagini /multi"pagin3 site"uri cu structur ierar!ic site"uri cu structur de tip *eb

8egturile dintre pagini trebuie s fie corespunztoare tipului de site pe care l construii. Site-uri!e !iniare mono-pa&in* cest tip de site este, aa cum indic i numele, format dintr"o singur pagin. ceast structur se folosete atunci cnd informaiile prezentate sunt sub form de te#t care se poate mpri firesc n seciuni mai mici. Uizitatorii pot parcurge ntreaga pagin derulnd"o dar, de obicei, la nceputul paginii e#ist o list de legturi care are rol de &uprins. cestea sunt nite legturi interne /ancore3 care conduc rapid vizitatorul la seciunea care l intereseaz, fr a mai derula ntreaga pagin. =mprirea coninutului paginii n seciuni mai mici se poate face folosind linii orizontale. Este indicat ca la fiecare nou seciune s inserai o legtur intern ctre partea superioar a paginii unde se afl &uprinsul. Site-uri!e !iniare mu!ti-pa&in* (tructura de acest tip se folosete n situaia cnd informaiile prezentate se succed ntr"o ordine secvenial, de la nceput la sfrit, informaiile prezentate ntr"o pagin bazndu"se pe cele din pagina anterioar. ,entru a"l ndruma pe vizitator s parcurg site"ul n ordine, fiecare pagin trebuie s conin o legtur cu pagina urmtoare, precum i cu cea anterioar. )e asemenea, este necesar s inserai i o legtur cu prima pagin a site"ului care trebuie s conin &uprinsul, pentru a facilita i saltul direct la o anumit pagin. =ntr"un site cu o astfel de structur paginile nu trebuie s fie prea lungi /de dorit ar fi s nu depeasc un ecran3 pentru a face navigarea mai comod. &u toate c acest tip de organizare este logic, nu trebuie s uitai principiul permeabilitii. ,entru un vizitator care va intra n site printr"o pagin oarecare, indicaii de navigare cum ar fi %=nainte% , %=napoi% ar putea s nu aib prea mult neles. Site-uri!e cu structur* ierar/ic*

(ite"urile de acest tip sunt cele mai numeroase pe *eb. -n astfel de site este format dintr"o pagin de baz /5ome3 de nivel zero, care conine legturi ctre alte pagini, fiecare pagin coninnd cte o parte a subiectului site"ului. <iecare dintre aceste pagini de nivel unu poate avea, la rndul su, legturi cu alte pagini, detaliind subiectul i furniznd informaii specifice. -n e#emplu de site de acest tip este o librrie virtual. ,agina 5ome ar putea conine legturi ctre diverse categorii: 'eletristic, Istorie, ,olitic, Economie, &alculatoare i Internet. )ac un vizitator este interesat de un manual de programare n ,erl, el va alege legtura ctre &alculatoare i Internet i va ajunge ntr"o pagin de nivelul unu unde va gsi legturi ctre ,rogramare, Internet, 5ard;are. Ua alege legtura ,rogramare care va desc!ide o pagin de nivelul doi care va conine o list de titluri, printre care i manualul cutat. tunci cnd concepei structura unui astfel de site, trebuie s acordai o mare atenie organizrii logice i fluente a site"ului. <iecare pagin trebuie s conin o legtur ctre pagina 5ome astfel nct vizitatorul s poat reveni la nceput fr s fie obligat s strbat toate nivelele. >u legai prima pagin de prea multe pagini de nivelul unu ci ramificai"le n adncime. )ac site"ul este de mari dimensiuni, introducei n partea superioar a fiecrei pagini o bar de navigare care informeaz vizitatorul despre locul unde se afl. +evenind la e#emplul cu librria, un astfel de instrument de navigare ar putea arta aa: #ome M Calculatoare / &rogramare) =n plus, este indicat s oferii o bar de navigare secundar la baza paginii. Site-uri!e de tip reea. ceste site"uri au o structur liber. Ele sunt formate din mai multe pagini, fiecare putnd avea legtur cu oricare alt pagin. E#ist i aici o pagin 5ome, ns de la ea, vizitatorul poate naviga prin site fr a urma un drum precis. =n general, acest tip de site este potrivit pentru subiectele care nu au o structur logic intern, subiecte recreaionale sau distractive. )ac dorii s creai un site de acest tip, trebuie s avei grij s oferii n fiecare pagin, pe lng legturile cu alte pagini, o legtur ctre pagina 5ome. =n plus, asigurai"v c materialul dumneavoastr este adecvat acestui tip de site deoarece altfel site"ul va purta amprenta neconcordanei ntre subiectul abordat i modul su de organizare. 3. Metodo!o&ia de construire a site-u!ui )ei nu e#ist un mod unic de desfurare a procesului de construire a unui site, e#ist trei tipuri de abordri posibile, pe care creatorul site"ului le poate alege sau combina, n funcie de necesiti. Metoda 2Top-@o%n2 )ac designerul are nc de la nceput o idee clar asupra coninutului site"ului, aceast abordare este cea mai potrivit. =n acest tip de metodologie, este creat mai nti pagina de nceput a site"ului /pagina 5ome3 i apoi celelalte pagini. ,aginile pot conine un minim de informaii, urmnd ca la dezvoltarea ulterioar a site"ului, ele s fie mbogite. vantajul major al acestei abordri este acela c permite continuitatea vizual i de coninut, deoarece toate paginile vor fi construite n acord cu pagina de start. $ metod foarte bun de a realiza acest lucru este crearea unor template"uri care s conin acelai tip de elemente pentru toate paginile i care vor fi folosite drept tipare la momentul scrierii codului 5678 pentru paginile respective. Metoda 2$ottom- p2 ceast abordare se folosete cnd designerul nu cunoate de la nceput care vor fi structura i aspectul final al site"ului, dar cunoate aspectul i coninutul unor pagini din cadrul su. ceast situaie poate aprea cnd dorii ca site"ul s conin pagini deja e#istente, care au fost create n

procesul de dezvoltare al altui site, de e#emplu. &!iar dac nu deinei pagini create deja de la care s pornii, aceast abordare permite crearea unor pagini individuale care ndeplinesc anumite obiective i care pot fi legate apoi de o pagin 5ome. vantajul abordrii %'ottom"-p% este acela c, la construirea paginilor individuale, nu mai suntei constrns la respectarea unui anumit stil, consecvent cu cel din pagina 5ome. 6otui, ajustarea ulterioar a paginilor n sensul realizrii unui aspect unitar, este necesar. Metoda increment*rii ceast metod const n construirea unei pagini de start i a unor pagini individuale legate de acesta, avndu"se n vedere crearea unor pagini intermediare, pe msura necesitilor. 7etoda se folosete atunci cnd este necesar construirea rapid a unui site care urmeaz a fi dezvoltat ulterior, n loc de a"l construi n ntregime de la nceput. Este o metod nerecomandat nceptorilor, deoarece prin adugirile ulterioare e#ist riscul de a obine un site defectuos organizat i lipsit de unitate. 4. Te/nici de desi&n %e< ,entru a realiza designul unui site sunt folosite o serie de te!nici cu ajutorul crora paginile capt contur, att din punct de vedere vizual ct i din punct de vedere al organizrii legturilor i al amplasrii coninutului n pagini. =n continuare sunt prezentate cteva dintre aceste te!nici, fiecare dintre ele referindu"se la cte un aspect al designului site"ului. Sc/ia site-u!ui $dat ce v"ai decis asupra modului n care va fi structurat site"ul este foarte bine ca nainte de a ncepe scrierea efectiv a codului 5678 pentru fiecare pagin n parte, s realizai o sc!i a ntregului site. ,utei folosi n acest scop 7icrosoft *ord sau orice alt procesor de te#t. ,entru nceput creai un document nou n care listai punctele majore pe care dorii s le acoperii n pagina 5ome. <acei de asemenea o list a elementelor grafice pe care intenionai s le includei, nsoite de indicaii privind aezarea lor n pagin. (tabilii care sunt paginile de nivel unu i ce informaii dorii s oferii n cadrul lor, precum i paginile subordonate acestora care vor cuprinde detalierea subiectelor anunate n paginile de nivel unu. ,entru a avea o imagine ct mai e#act a structurii site"ului nc din faza de sc!iare a sa este recomandat s folosii bara de instrumente Outlining din meniul %ools M Customi8e din *ord. ceasta v permite s stabilii nivelul paginilor i s realizai cu uurin ramificarea lor n adncime. $ alt metod pentru a realiza sc!ia site"ului o constituie graficul /sau !arta3 site"ului. )ac nu dorii s v complicai folosind un editor de te#t sau un program de grafic, putei realiza o astfel de sc!i i pe !rtie, cu creionul. )esenai cte un dreptung!i pentru fiecare pagin din site, specificnd n interiorul su scopul i obiectivele paginii, elementele i aranjarea lor n pagin. poi unii dreptung!iurile prin sgei pentru a specifica traseele pe care le poate parcurge utilizatorul. (geile reprezint de fapt legturile dintre pagini. vei grij ca spre pagina 5ome s indice toate sgeile, pentru a asigura astfel o legtur cu ea din orice pagin a site"ului. =n acest mod putei planifica pentru fiecare pagin ce urmeaz s vad, s neleag i s fac vizitatorul acesteia, precum i unde se poate deplasa din pagina respectiv. $ricare ar fi metoda folosit pentru a sc!ia site"ul, la fiecare pagin trebuie s v punei urmtoarele ntrebri: &e doresc s afle vizitatorul din aceast pagin4

&e doresc s fac vizitatorul n acest moment4 &e doresc s simt vizitatorul parcurgnd pagina4 -nde doresc s mearg vizitatorul n continuare4

)esigur, n ultim instan comportamentul i impresiile vizitatorului scap controlului designerului, ns un site n care fiecare pagin d rspunsuri clare i limpezi acestor ntrebri are foarte multe anse de a ntruni aprecierile pozitive ale vizitatorilor si. Pa/ina de intrare n site 6pa/ina splas)7 E#ist multe site"uri care nainte de pagina 5ome au o pagin de intrare n site, numit pa/in$ splas). (copul unei astfel de pagini este identificarea rapid a obiectului site"ului n timp ce se ncarc restul de date. ,agina splas! are pentru site acelai rol pe care l are coperta unei cri sau prima pagin a unei reviste. ceast prim pagin trebuie s se ncarce rapid, s aib un impact vizual puternic i s comunice esenialul despre subiectul site"ului sau compania creia i aparine site"ul. E#ist opinii divergente n legtur cu folosirea i utilitatea paginii splas! ntr"un site. 7ai ales dac face apel la elemente multimedia, sunet, grafic, animaie comple# care ncetinesc timpul de ncrcare, pagina splas! poate aduce mai degrab deservicii site"ului. =n plus, pagina splas! poate fi resimit de vizitator ca o barier n accesul imediat la informaiile din interiorul site"ului. Pa/ina Home )ei aspectul i coninutul paginii 5ome poate varia foarte multe de la un site la altul, e#ist cteva elemente comune prezente n orice pagin de start: Identificarea firmei sau companiei creia i aparine site"ul /dac este cazul3 )escrierea scopului site"ului )escrierea structurii site"ului. ,agina 5ome are i funcia de &uprins al site"ului oferind indicaii vizitatorilor asupra subiectelor abordate (tabilirea relaiilor ntre seciunile de nivel unu ale site"ului i cele subordonate lor. ceasta se realizeaz prin intermediul barelor de navigare, butoanelor, !rilor de imagini sau listelor de legturi. <urnizarea informaiilor de contact. Pa/inile din interior ,aginile de nivel unu reprezint diviziunile majore ale subiectului general al site"ului. E#ist tentaia de a include prea multe informaii detaliate la acest nivel. )ac site"ul acoper un subiect vast, cu o cantitate mare de informaii specifice, este bine s lsai detalierea acestora pentru paginile de nivel doi. ,aginile de nivel unu trebuie s conin o descriere succint a subiectului acoperit precum i legturi ctre paginile de nivel doi care detaliaz fiecare parte a subiectului. $ te!nic des utilizat este plasarea resurselor suplimentare n pagini de nivelul trei. )e e#emplu o pagin de nivelul doi care ofer pe lng te#t i imagini e#plicative ale unui anumite noiuni poate fi legat de pagini de nivel trei care conin imaginile. &nd vizitatorul face clicI pe un anumit te#t aflat n pagina de nivel doi se desc!ide pagina de nivel trei cu imaginea e#plicativ. vantajul acestei abordri este descongestionarea paginilor de nivelul doi care cuprind detalierea subiectului. (c!ia dumneavoastr trebuie s cuprind, pe lng modul de organizare a paginilor, i o list ct mai complet a elementelor pe care dorii s le includei n fiecare pagin /imagini, formulare, fiiere multimedia, etc.3.

0ra&mentarea in'ormaii!or $mul poate procesa o cantitate limitat de informaii ntr"o anumit unitate de timp. )in acest motiv, una dintre sarcinile specifice n designul *eb este fragmentarea informaiilor n secvene care s nu depeasc posibilitile de cuprindere ale utilizatorului. &antitatea de informaii cuprins ntr"o pagin nu trebuie s"l copleeasc pe vizitatorul paginii sau s mreasc timpul ei de ncrcare. )e asemenea, modul de fragmentare al informaiei trebuie s focalizeze atenia vizitatorului asupra principalelor subiecte abordate n pagin i s l ajute s ia cunotin n mod gradat de subiectul prezentat. <ragmentarea corect a informaiilor este n avantajul designerului, deoarece l ajut s creeze pagini reutilizabile. )ac fiecare pagin pe care o vei crea servete la ndeplinirea unui anumit scop, putei include aceast pagin fie direct, fie ca o resurs util i n alte site"uri pe care le creai ulterior i care au subiecte cone#e cu pagina respectiv. =n cadrul site"ului fragmentarea informaiilor conduce la stabilirea modului n care va fi detaliat subiectul, la determinarea numrului de pagini necesare pentru acesta precum i a nivelului paginilor. )ei divizarea subiectului n pri mai mici este o te!nic deosebit de util, nu abuzai totui de puterea !Eperte#tului. $ fragmentare e#cesiv a subiectului ntr"un mare numr de pagini este la fel de obositoare ca i prezentarea acestuia n bloc. -n design eficient anticipeaz nevoia vizitatorului de a obine informaii suplimentare i furnizeaz la momentul oportun legturi ctre paginile care detaliaz acel punct. =n cadrul unei pagini modul de fragmentare al informaiilor ine de logica intern a subiectului prezentat. ,entru a diferenia prile constitutive ale subiectului unei pagini o mare importan o are organizarea te#tului n cadrul paginii. &ei mai muli dintre cei care navig!eaz pe *eb obinuiesc s %scaneze% paginile n cutare de informaii. Ei citesc mai nti titlurile, listele, i primele fraze dintr"un paragraf. Este bine s inei seama de acest lucru cnd organizai te#tul n pagin. &oninutul paginii trebuie s fie ct mai uor de citit. <olosii paragrafe scurte, desprite prin linii libere, evitai frazele prea lungi i folosii n mod judicios titlurile. ccentuai prile pe care vrei s le scoatei n eviden n te#t prin ngroare sau scrierea lor cu alt culoare, dar nu n e#ces. buzul de culori sau de te#te scrise cu caractere aldine fac pagina ncrcat i greoaie. Este indicat s v limitai la un numr redus de tipuri de font. &ele mai apreciate sunt Uerdana i rial, deoarece sunt lizibile i elegante. Este mai bine s evitai folosirea tipului 6imes >e; +oman, dei este un tip foarte folosit n editarea de te#te. (pre deosebire de te#tele tiprite, pe monitor citirea se face cu FG2 mai ncet deoarece monitorul adaug fonturilor un anumit grad de neclaritate /fu88iness3, mai accentuat la fonturile cu serife, aa cum este 6imes >e; +oman. >u aranjai te#tul n pagin pe dou coloane astfel nct vizitatorul s fie nevoit s revin n partea superioar a paginii pentru a citi ce"a de"a doua coloan. cest format este potrivit pentru ziare i reviste dar nu i pentru o pagin *eb deoarece rupe cursivitatea deplasrii n cadrul site"ului. Le&area pa&ini!or 7odul n care vei realiza legturile dintre pagini depinde de structura site"ului. )ac optai pentru o structur ierar!ic, legturile din interiorul site"ului vor fi adaptate acestei structuri. vantajul structurii ierar!ice este c ofer utilizatorului posibilitatea unei navigri logice, plecnd de la informaiile generale ctre cele particulare. )ezavantajul acestei te!nici este c utilizatorul trebuie s urmeze o cale prestabilit pentru a ajunge la o anumit informaie, care se poate afla cteva linI"uri distan de pagina 5ome. $ alt manier de a realiza legturile din interiorul site"ului este de a lega fiecare pagin de toate celelalte. Uei obine astfel o structur ne"ierar!ic care are avantajul c fiecare pagin se afl la

distan de un linI de oricare alta, inclusiv de pagina 5ome. ,entru site"urile de dimensiuni reduse o astfel de structur poate funciona bine, ns pentru site"urile cu un mare numr de pagini numrul de legturi crete rapid iar navigarea n interiorul site"ului devine foarte dificil. =n plus, utilizatorul nu are la dispoziie o cale ierar!ic prin care poate ajunge la o informaie specific. (nstrumente!e de na"i&are ,entru a realiza o navigare logic i eficient n cadrul site"ului instrumentele de navigare trebuie s fie perfect adaptate modului n care sunt create legturile dintre pagini i n plus, s ofere indicii vizuale asupra funciei lor. ,entru a crea un aspect vizual unitar al ntregului site i pentru a nu deruta vizitatorul, este recomandat ca instrumentele de navigare s fie aceleai n toate paginile. (tabilii de la nceput aspectul icon"urilor, butoanelor sau te#tului pe care le vei folosi drept legturi i pstrai"l pe parcursul ntregului site. ceast te!nic ofer site"ului coeren i unitate i stabilete imediat identitatea fiecrei pagini n cadrul site"ului. =n plus, folosirea repetat a acelorai elemente grafice de navigare mrete eficiena bro;serului deoarece acestea sunt ncrcate la desc!iderea primei pagini i stocate n memoria cache, fr a mai fi necesar ncrcarea lor la fiecare nou pagin. Instrumentele de navigare trebuie s fie ct mai uor de neles i localizat. )ac folosii o bar de navigare plasai"o acolo unde vizitatorii sunt obinuii s o caute: n partea superioar a paginilor, n stnga sau n dreapta paginii. <olosii o bar secundar de navigare la baza paginii, aceasta l va ajuta pe vizitator s se deplaseze ntr"o alt seciune a site"ului fr a mai fi nevoit s deruleze pagina n sus pn la bara principal de navigare. )ac site"ul este de dimensiuni mari este o idee bun s creai o pagin special care s reprezinte !arta site"ului i s plasai legtura ctre ea n bara principal de navigare din cadrul fiecrei pagini. ceasta va permite vizitatorului s se orienteze n interiorul site"ului, oricare ar fi pagina prin care a intrat n site. 5arta va conine legturi ctre toate paginile, grupate conform modului de organizare al site"ului. )e asemenea, dac folosii o structur ierar!ic, este util prezena unui instrument suplimentar care s informeze vizitatorul asupra locului unde se afl n cadrul site"ului i a cii prin care a ajuns aici, n maniera urmtoare: #ome / &agina de nivel unu / &agina de nivel doi / &agina curent) (n'ormaii!e despre site i pa&ina curent* <iecare pagin a site"ului trebuie s conin indicaii privind scopul i obiectivele site"ului precum i obiectivele specifice acelei pagini. =n faza de planificare ai colectat informaii privind publicul int, ai formulat scopul i obiectivele ntregului site. cestea reprezint elementele fundamentale n jurul crora este construit site"ul. <iecare pagin a sa are drept scop ndeplinirea unuia dintre obiective. ceste informaii trebuie comunicate n pagina respectiv. Uizitatorul nu trebuie forat s g!iceasc ce rol are o anumit pagin n cadrul site"ului. 7ulte site"uri prezente pe *eb conin o pagin special cu informaii de contact precum i o pagin care conine informaii despre site i creatorii si /pagina 0bout3. 6otui este recomandat ca aceste informaii s fie incluse i n subsolul paginilor din interiorul site"ului. Este bine s includei aici informaii despre copErig!t, data ultimei reactualizri a paginii, despre organizaia sau compania creia i este dedicat site"ul /dac este cazul3 i informaii de contact /adres de mail, numr de telefon, adres potal3.

Dr&ani.area pa&inii cu aEutoru! ta<e!e!or -nul dintre aspectele pe care trebuie s le avei n vedere la construirea unei pagini este rezoluia ecranului. 7uli dintre vizitatorii paginii folosesc rezoluia de 0BB#ABB de pi#eli. $ pagin cu limea mai mare de ABB de pi#eli poate face necesar derularea pe orizontal a paginii, care pentru muli vizitatori este obositoare i incomod. )in acest motiv, este recomandat ca tot coninutul paginii s fie inclus ntr"un tabel de baz cu limea de ABB de pi#eli. Tabelul de ba&$ &onstruirea paginii ncepe cu un tabel de baz, cu limea /;idt!3 de ABB de pi#eli, o linie i o coloana. liniai tabelul la marginea din stnga sau centrat n pagin. (etai c!enarul /border3 la valoarea %B% pentru a"l face invizibil pentru vizitator. =ntregul coninut al paginii va fi plasat n interiorul acestui tabel. sigurai"v c ai setat culoarea de fond /bgcolor3 pentru pagina dumneavoastr. $piunea %default% las bro;serul s controleze culoarea fondului. )e cele mai multe ori aceasta este alb, dar este mai bine s avei certitudinea c ea va aprea la fel n orice bro;ser, aa nct setai bgcolorS%;!ite% sau orice alt culoare dorii. =n funcie de felul cum dorii s v organizai site"ul i de scopul acestuia vei !otr unde dorii s plasai bara principal de navigare. 8ara de navi/are n stn/a pa/inii )ac ai decis s optai pentru plasarea barei de navigare n partea stnga /cea mai uzual aezare3, vei include n tabelul de baz un tabel cu F sau H coloane. )ac folosii un tabel cu F coloane setai distana ntre celule /cellpadding3 la valoarea %J% pentru a spaia te#tul de marginea tabelului. ,utei specifica limea celulelor fie n pi#eli fie n procente. )ac folosii un tabel cu H coloane, coloana din centru poate fi folosit ca %tampon% , care va separa coninutul coloanei din stnga de coninutul celei din dreapta. (etai atributul border al tabelului la %B% pentru ca marginea s nu fie vizibil. $dat stabilite aceste atribute, putei aduga n tabel attea linii cte sunt necesare sau putei include un alt tabel n cel e#istent. 8ara de navi/are n partea superioara ,entru a construi o bar de navigare n partea de sus a paginii, trebuie s includei n tabelul de baz un tabel cu o singura coloana. (etai atributele cellpadding S %J% i border S %B%. =n prima linie a tabelului vei introduce logo"ul sau titlul site"ului, n linia a doua vei afia bara de navigare, iar pe liniile urmtoare, coninutul paginii. 8ara de navi/are n partea dreapta Este o abordare mai puin utilizat. &el mai adesea este folosit pentru paginile de tip catalog de produse, unde imaginile i descrierea produselor sunt plasate n coloana din stnga, care ocup cea mai mare parte a spaiului. <olosirea tabelelor pentru organizarea coninutului paginii este o practic foarte folosit. 6abelele vor pstra imaginile i te#tul acolo unde le"ai plasat. ,utei include i alte tabele n interiorul celor pe care le"ai creat, n funcie de modul n care sunt organizate informaiile i de aspectul pe care dorii s l dai paginii.

). Aree!i de desi&n =n procesul de creare a unui site pot aprea o serie de greeli de design, cele mai multe datorate nerespectrii te!nicilor i principiilor prezentate anterior. :a&ini '*r* !e&*turi 82'und*turi29 -na dintre cele mai frustrante situaii n care se poate gsi o persoan care navig!eaz pe *eb este o pagin fr instrumente de navigare i fr nici un indiciu privind site"ul cruia i aparine. )esigur, site"ul din care face parte pagina poate fi localizat observnd prima parte a adresei -+8 a paginii, care apare n bara de adrese a bro;serului. )ar a fora vizitatorul s efectueze aceast manevr este cu totul nerecomandat. &el mai probabil acesta nu se va osteni s caute pagina 5ome a unui asemenea site ci l va prsi definitiv. Evitai s creai asemenea pagini. ,rezena unor %fundturi% ntr"un site denot faptul c designerul nu a neles caracterul permeabil al *eb"ului i ideea c un vizitator poate intra n site prin oricare pagin a sa. ,ericolul construirii unor astfel de pagini apare mai ales n cazul site"urilor liniare multi"pagin, n care designerul dorete s conduc vizitatorii de"a lungul site"ului pe un traseu liniar, prestabilit. ceasta nu nseamn c acest tip de site"uri nu trebuie folosit, mai ales dac informaiile prezentate sunt adecvate acestui mod de prezentare. 6rebuie ns acordat atenie instrumentelor de navigare care trebuie astfel concepute nct vizitatorul s poat ajunge cu uurin cel puin la pagina 5ome. =n plus, informaiile despre site i pagina curent nu trebuie s lipseasc din subsolul fiecrei pagini. $ variaie a acestor pagini de tip %fundtur% o constituie paginile 5ome care ofer informaii prea puine sau lipsite de semnificaie. )estul de des pot fi ntlnite pe *eb pagini 5ome care nu ofer nici un fel de indicii asupra structurii sau coninutului site"ului, fr a mai vorbi de scopul i obiectivele sale. Instrumentele de navigaie sunt absente, preferndu"se folosirea unor imagini sau te#te cu prea puin semnificaie pentru a realiza accesul n diferitele seciuni ale site"ului. ,oate c este o abordare avangardist, dar pentru marea majoritate a vizitatorilor este neplcut s ajung ntr"o asemenea pagin aa nct este mai bine s respectai regulile clasice de design prezentate. :a&ini 2uriae2 )ac paginile %fundtur% ofer prea puine indicii vizitatorului, e#ist i reversul lor: paginile %uriae%. ceste pagini sunt ncrcate pn la refuz cu informaii, liste, imagini, linI"uri i alte elemente. ,aginile de acest fel ridic dou mari probleme: 6impul de acces. 7ai ales dac pagina conine foarte multe imagini, timpul de ncrcare al paginii poate fi foarte mare (uprancrcarea cu informaii. )ac vei pune prea mult informaie ntr"o singur pagin vizitatorul acesteia nu va fi capabil s o proceseze. E#ist opinii care spun c lungimea unei pagini nu ar trebui s depeasc un ecran pentru a se evita ca vizitatorul s deruleze pagina pe vertical. $ asemenea cerin este prea drastic i poate fi adesea n dezavantajul prezentrii e#plicite a informaiilor. <ragmentarea subiectului trebuie s se fac n funcie de logica lui intern i nu de reguli arbitrare cum este mrimea ferestrei bro;serului. E#ist situaii n care paginile lungi ndeplinesc cel mai bine obiectivele urmrite. )e e#emplu, n paginile de prezentare ale unor produse, pe un site comercial, plasarea descrierii produsului pe dou sau mai multe pagini rupe cursivitatea prezentrii i se poate solda cu pierderea unor poteniali clieni. nalog, dac pagina conine o list lung de elemente nrudite, ruperea listei este arbitrar i dezavantajoas. ,e de alt parte, aglomerarea de informaii la nivelul unei singure pagini, mai ales cnd

ntre seciunile paginii nu e#ist o legtur intrinsec face ca pagina s apar ca un amalgam din care vizitatorul va e#trage cu greu informaiile care l intereseaz. )ac este necesar s folosii pagini foarte lungi nu uitai s oferii pe parcursul paginii ancore care s conduc vizitatorul la nceputul seciunilor principale, precum i n partea superioara, respectiv inferioar a paginii. )ac pagina conine mult te#t nu o ncrcai suplimentar i cu imagini sau cu elemente multimedia deoarece timpul de acces va crete foarte mult. #xcesu! de e!emente mu!timedia <olosirea fr discernmnt a elementelor multimedia /imagine, sunet, video3 precum i folosirea n e#ces a celor mai noi te!nologii *eb este adesea duntoare pentru site. )ac v adresai unei audiene despre care presupunei c nu dispune de cone#iuni rapide, de ultimele versiuni de bro;sere sau de aplicaiile necesare e#ecutrii i afirii corecte a unora dintre elementele din paginile site"ului, este mai bine s nu includei aceste elemente. stfel, dei aplicaiile create cu 7acromedia <las! sunt spectaculoase i se pot realiza efecte speciale deosebit de atractive, un astfel de fiier poate ajunge cu uurin la dimensiuni care depesc C megabEte, ceea ce ncetinete considerabil viteza de ncrcare a paginii. =n plus, pentru vizualizarea corect a acestora, vizitatorul trebuie s descarce plug"in"ul (!ocI;ave n cazul cnd nu l are deja instalat pe computerul propriu. Este foarte neplcut pentru vizitator s efectueze toate aceste operaii doar pentru a constata c informaiile prezentate n aceast form puteau fi tot att de bine prezentate ca te#t sau imagini obinuite. $ soluie de compromis este aceea ca, simultan cu includerea unui astfel de fiier, s se pun la dispoziia vizitatorului o opiune de %eludare% de tip %sIip intro% , atunci cnd prezentrile sunt folosite doar cu rol de splas! screen, ca ecran de desc!idere a site"ului, de e#emplu. =n plus, folosirea prezentrilor <las! fr ca acestea s serveasc unui scop bine definit nu face altceva dect s distrag atenia vizitatorului de la subiectul site"ului. $ alt greeal destul de des ntlnit este includerea fiierelor audio, fr ca acestea s aib legtur cu scopul site"ului. E#ist designeri care consider c furnizarea unei muzici de fundal sporete atractivitatea site"ului. =n realitate se ntmpl e#act contrariul. =n afara situaiei cnd subiectul site"ului este legat de muzic sau cnd fiierele de sunet vin s completeze informaiile prezentate n pagini, muzica de fundal nu face altceva dect s ncetineasc ncrcarea paginilor i s"l irite pe vizitator, prin repetare. )ac este necesar s includei fiiere de sunet, lsai vizitatorului posibilitatea de a opta pentru desc!iderea lor prin intermediul unei legturi, mai ales n cazul n care este vorba despre fiiere de mari dimensiuni. Este recomandat s procedai la fel i n cazul fiierelor video, avertizndu"l pe vizitator c pagina respectiv se va desc!ide mai greu. :a&ini ine&a!e ,aginile inegale conin informaii foarte diferite ca importan sau ca nivel de detaliere. &el mai adesea se confrunt cu aceast problem paginile 5ome n care sunt incluse linI"uri ctre noile pagini create n procesul de dezvoltare a site"ului. Este foarte uor s cdei n greeala de a include noile legturi n pagina 5ome fr a mai respecta ierar!ia stabilit n etapa de organizare a site"ului. )ac site"ul la care lucrai necesit crearea unor noi pagini trebuie s avei n vedere plasarea acestora la nivelele specifice obiectivelor pe care le au precum i ncadrarea la locul cuvenit n structura de legturi a site"ului prezentat n pagina 5ome. Le&*turi '*r* semni'icaie

,rezena legturilor fr semnificaie este, de asemenea, o greeal de design foarte frecvent. ,robabil ai vzut de nenumrate ori n paginile *eb formulri ca aceasta: ,entru mai multe informatii apasati L !refS%info.!tml%MaiciL? M &uvntul %aici% nu are n acest conte#t, nici o semnificaie. $ formulare mult mai potrivit ar putea fi urmtoarea: ,uteti obtine aici L !refS%info.!tml%Mmai multe informatiiL? M $ alt situaie este aceea n care documentul indicat nu are legtur, din punct de vedere al coninutului, cu pagina care conine referina la el. 6oate linI"urile din cadrul unei pagini trebuie s e#tind coninutul informaional al paginii, vizitatorul care urmeaz o legtur ateptndu"se ca aceasta s i ofere informaii suplimentare despre subiect. =n aceeai categorie se pot ncadra i legturile %banale% , care nu mbogesc prin nimic informaiile prezentate. )e e#emplu o construcie ca aceasta: 'ine ati venit in L !refS%def.!tml%M,aginaL? M 5ome a -niversitatii unde documentul def)html conine definiia de dicionar a cuvntului %pagina% , este o legtur %banal% deoarece n acest conte#t informaia oferit nu servete nici unui scop. ,e de alt parte, ntr"o pagin al crei subiect este vocabularul specific *eb"ului, o astfel de definiie ar fi foarte important. -n alt tip de legturi fr semnificaie apare atunci cnd fragmentarea informaiei este dus la e#trem prin folosirea unui numr foarte mare de linI"uri. (ubiectul este secionat n pri foarte mici iar vizitatorul este obligat s parcurg un mare numr de pagini n adncime pentru a pune cap la cap informaiile i a nelege sensul lor. $ abordare de acest tip rupe cursivitatea subiectului i mrete efortul de a nelege i asimila al vizitatorului. :a&ini de.or&ani.ate i stridente cest tip de pagini sufer din pricina lipsei de organizare a coninutului. &!iar dac subiectul este mprit n seciuni, unitile de informaie sunt mprtiate n pagin fr o sistematizare prealabil care s focalizeze atenia vizitatorului ctre punctele importante. ceste pagini au prea multe culori, adesea stridente, tipuri diferite de fonturi, sau imagini de fundal foarte ncrcate. desea este folosit n e#ces animaia fr nici ca aceasta s aib vreo semnificaie sau legtur cu coninutul paginii i muzica de fundal. spectul general al unor astfel de pagini este la fel de strident i iptor ca un decor de blci. +. -e.umat &onstruirea unui site necesit, pe lng o bun cunoatere a limbajului 5678, respectarea unor principii i folosirea unor te!nici consacrate. (ite"ul trebuie s fie orientat ctre vizitator, ctre nelegerea i satisfacerea nevoii de informaie a acestuia. )esignul trebuie s menin un ec!ilibru ntre te!nologiile folosite i eficien, asigurnd o vitez convenabil de ncrcare a paginilor i o vizualizare bun n cele mai populare dintre bro;sere. spectul site"ului trebuie s fie n concordan cu scopul i obiectivele sale, evitnd e#cesele de orice fel. ,rincipiile care trebuie respectate n etapa de design sunt: socierea semnificaiilor 7eninerea competitivitii <olosirea eficient a resurselor

&oncentrarea pe necesitile utilizatorului =nelegerea permeabilitii *eb"ului &rearea unui aspect plcut, coerent i fluent (usinerea interactivitii (usinerea navigaiei

(trategia de construire a site"ului poate urma una dintre metodele stop"do;nZ , sbottom"upZ sau metoda incrementrii. =n procesul de design, prima etap o constituie sc!ia site"ului care trebuie s reflecte structura acestuia: liniar, ierar!ic sau de tip *eb. Informaia trebuie fragmentat astfel nct s nu depeasc puterea de asimilare a utilizatorului. 8egturile dintre pagini trebuie s fie stabilite astfel nct s permit o parcurgere logic a coninutului site"ului, iar instrumentele de navigare trebuie adaptate modului n care sunt create legturile dintre pagini, oferind indicii vizuale asupra funciei lor. Este recomandat ca instrumentele de navigare s aib acelai aspect n toate paginile. >erespectarea principiilor i te!nicilor de design poate s conduc la construirea unor pagini de tip sfundturaZ , a unor pagini prea ncrcate cu informaii sau, dimpotriv, a unor pagini inegale. )e asemenea, printre greelile de design care pot aprea sunt legturile fr semnificaie, e#cesul de elemente multimedia, paginile dezorganizate sau stridente. Capitolul 15 Testarea site"ului Etapa de design a site"ului se desfoar n strns legtur cu cea de implementare, de scriere a codului 5678 pentru paginile care fac parte din site. 6otui, procesul de creare a site"ului nu se poate considera nc!eiat n momentul finalizrii tuturor documentelor 5678 care l formeaz. -rmeaz o etap adesea tratat oarecum superficial, dei, ca i celelalte, este esenial pentru construirea unui site de calitate: etapa de testare. 1. Corectarea pa&ini!or &orectarea este unul din cele mai neglijate aspecte al publicisticii *eb. <oarte frecvent putei ntlni pagini *eb cu multiple greeli de ortografie, gramatic, formatare, c!iar i n cazul site"urilor importante. ,aginile cu greeli de ortografie, e#primri neglijente, reflect cel puin o insuficient e#perien n acest domeniu i, de ce nu, c!iar lips de respect pentru vizitator. &orectarea este neglijat n primul rnd datorit uurinei e#traordinare cu care te#tele pot fi publicate electronic. ,utei crea o pagin ntr"un editor de te#t i aceasta poate fi publicat la doar cteva minute dup terminarea ei, daca suntei suficient de rapid. &ei mai muli nu vor petrece ore n ir verificnd e#istena eventualelor greeli gramaticale n te#tul editat, aa cum ar face"o, probabil, n cazul unei tiprituri clasice, dac aceste erori i"ar costa o avere pentru a retipri CB.BBB de copii ale documentului. )ac ai fcut o greeal, trebuie doar s desc!idei fiierul, s efectuai corectura i s l republicai pe *eb, unde toat lumea l poate vedea. Este aceasta o strategie corect4 )esigur c nu. &alitatea muncii pe care ai depus"o la crearea site"ului definete calitatea acestuia. 7ii, poate milioane de utilizatori ar fi putut deja citi pagina n cauz. Este mult mai simplu s petrecei cteva ore corectnd te#tul, pentru a evita ca ulterior s v luptai zile, sptmni sau luni n ir pentru a v rectiga credibilitatea.

Iat cteva metode care v pot ajuta s corectai mai eficient paginile *eb: --. -tilizai corectoare automate pentru ortografie i gramatic pentru a descoperi erorile plictisitoare, fcute din grab sau din oboseal. -0. >u avei niciodat ncredere absolut n acest tip de corectoare pentru a descoperi erorile mai subtile. )up utilizarea lor, ncrcai pagina n bro;ser i citii"o de cteva ori. -2. ,entru site"urile de dimensiuni mari citii documentele n mod repetat, cutnd de fiecare dat un anumit tip particular de erori -4. 8a prima lectur concentrai"v atenia pe aspectul general al documentului i pe descoperirea erorilor de formatare, a itemurilor lips sau a erorilor de plasare a acestora. -5. 8a a doua lectur verificai logica i cursivitatea ideilor i a cuvintelor. 0>. 8a a treia lectur, corectai minuios ntregul te#t verificnd sinta#a, ortografia, punctuaia. 01. =ntotdeauna verificai imaginile, figurile i !rile din pagin. sigurai"v c ele au legtur cu te#tul de referin, i verificai te#tul e#plicativ care nsoete imaginea. E#ist i erori ce vor persista uneori c!iar dup toate aceste verificri. )ac le descoperii dup publicarea site"ului, nu mai rmne dect s le corectai atunci. 2. Testarea pa&ini!or $dat terminat verificarea corectitudinii te#tului din pagini din punct de vedere gramatical i logic, urmeaz etapa de testare a paginilor. =n aceast faz trebuie s v concentrai pe testarea corectitudinii etic!etelor 5678, a linI"urilor, a imaginilor i a celorlalte elemente incluse n pagini. Testarea !in>-uri!or &ea mai simpl cale de testare a linI"urilor este de a ncrca pagina n bro;ser i de a da clicI pe fiecare linI. Uerificai funcionarea tuturor ancorelor din pagini care trebuie s acceseze seciunea din pagin corespunztoare identificatorului ancorei. tenie la seciunile multiple ale aceleiai pagini etic!etate cu acelai identificator. ceast greeal poate produce rezultate stranii. )aca bro;serul sare la o alt seciune a paginii dect cea ateptat, verificai mai nti identificatorul ancorei n seciunea pe care bro;serul o afieaz. Uerificai apoi modul de funcionare a legturilor ctre alte documente, att n cadrul site"ului ct i n afara sa, respectiv validitatea lor i dac paginile accesate sunt cele potrivite. )ac o anumit pagin nu poate fi desc!is, verificai sinta#a linI"urilor i anume: 0'. 0*. 0,. corectitudinea protocolului specificat e#tensia fiierului e#istena simbolului p

1ten!ieH =n ->IW, simbolul tilda /p3 este utilizat pentru a specifica directorul de start / #ome director$3 al utilizatorului al crui nume urmeaz dup acest simbol. <olosind simbolul p v putei !ttp:??;;;.server.com?putilizator?pagina.!tml :ro<!eme n 'uncionarea pa&ini!or =e< referi la o pagin *eb astfel:

Este posibil ca paginile *eb create s nu arate n bro;ser aa cum au fost ele proiectate. +ezolvarea unor astfel de deficiene poate fi dificil, deoarece cnd scriei codul 5678 avei doar o imagine mental a modului cum ar trebui s arate pagina. $ soluie pentru a face procesul de depanare mai uor ar fi s vizualizai pagina cu ajutorul bro;serului pe msur ce o construii. ,utei izola diversele seciuni ale paginii pentru a verifica funcionarea fiecreia dintre ele. &ele mai multe greeli care pot aprea se datoreaz erorilor n codului sursa al paginii. (inta#a codului este de o importanta critic n 5678. &ele mai comune probleme de sinta#a care apar sunt: 0-. 00. 02. 04. absena etic!etelor de nc!idere L ? M mperec!erea etic!etelor 5678 g!ilimelele % % imbricarea etic!etelor

Iat cteva dintre problemele cu care v putei confrunta: B caracteristic$ de .ormatare a.ectea&$ o secven!$ mai mare de te t dect era prev$&ut. ( presupunem c ai folosit ntr"o seciune a paginii una dintre etic!etele de titlu, L5HM de e#emplu. 8a vizualizarea paginii n bro;ser constatai c nu doar te#tul pe care doreai s"l evideniai este formatat astfel, ci o parte mai mare a te#tului din pagin. $ astfel de situaie este provocat de: 05. 2>. 21. bsena unuia dintre caracterele % L % sau % M % bsena etic!etei de nc!idere L?5HM Imbricarea defectuoas a etic!etelor 5678

$ etic!et de nc!idere creia i lipsete unul dintre caracterele %L %sau %M% nu va fi interpretat corect de bro;ser, prin urmare formatul nu va lua sfrit dect n punctul n care bro;serul ntlnete caracterul respectiv. ceasta poate determina afiarea ntr"un format greit a unui te#t. )ac acest element este un titlu, tot te#tul dintre etic!eta de desc!idere asociat titlului i cea mai apropiat etic!et de nc!idere ntlnit va fi afiat ca titlu. )aca acest element este te#t ancor, tot te#tul dintre etic!eta de desc!idere L M i prima etic!et de nc!idere ntlnit va fi afiat ca o legtur /de culoare albastru i subliniat3. $ etic!et de nc!idere absent sau o mperec!ere inadecvata de etic!ete va provoca probleme similare. -neori problemele sunt dificil de urmrit i rezolvat. -rmrirea unei probleme se face n sens descendent, defeciunea trebuie cutat acolo unde ncepe secvena de cod eronat i nu unde se sfrete. B parte din te tul pa/inii nu este a.iat 6e#tul sau obiectele care lipsesc din pagina pot fi depistate prin urmrirea g!ilimelelor % % i a etic!etelor greit nc!ise i care conin adrese -+8. )ac pagina conine g!ilimele de desc!idere n interiorul unei etic!ete, i cele de nc!idere trebuie s se regseasc n aceeai etic!et. $ etic!et din care lipsesc g!ilimelele de nc!idere nu este interpretat corect i acest lucru poate produce rezultate bizare. )ac etic!eta creia i lipsesc g!ilimelele este o etic!et ancor, ntreg te#tul de la primele g!ilimele pn la urmtoarele ntlnite ar putea fi interpretat de bro;ser ca parte dintr"o adres -+8.

$ alt eroare care poate provoca acelai efect este nc!iderea greit a etic!etei coninnd o adres -+8. )ac o astfel de etic!et nu este nc!is corespunztor, bro;serul ar putea interpreta orice te#t care urmeaz, pn la etic!eta de nc!idere corespunztoare, ca fiind parte a adresei -+8. ,roblema se rezolv prin e#aminarea etic!etelor aflate naintea poriunii de te#t care nu este afiat. Eroarea ar putea proveni de la orice etic!et care conine g!ilimele sau o adres -+8. 9!ilimelele utilizate n editorul de te#t cu ajutorul cruia scriei codul 5678 trebuie s fie ntotdeauna n standard (&II. -nele editoare de te#t utilizeaz aa"numitele %smart Tuotes% , n care g!ilimele de desc!idere arat diferit fa de cele de nc!idere. )ac procesorul de te#t cu care lucrai are aceast posibilitate, ea trebuie dezactivat, deoarece acest tip de g!ilimele, nefiind n standardul (&II, nu vor funciona corect n 5678. 1.iarea de.ectuoas$ a .ormatului =n cazul cnd formatul afiat de bro;ser nu este cel ateptat verificai mai nti compatibilitatea dintre bro;ser i stilul de caractere specificat n codul 5678. 'ro;serul trebuie s fie capabil s afieze stilul ales. tunci cnd sunt folosite stiluri logice, bro;serul este ultima instan n decizia privind stilul caracterelor afiate. $ metod rapid de verificare a e#istenei unei probleme de compatibilitate este de a afia paginile utiliznd bro;sere diferite, dintre care unul s poat afia n mod sigur stilul de caracter utilizat. )ac acel bro;ser afieaz te#tul incorect, se face verificarea codului 5678. )ac te#tul este afiat corect, atunci e#ist o incompatibilitate cu celelalte bro;sere. =n codul 5678, problema poate fi legat de o imbricare defectuoas a etic!etelor. Uerificai modul cum au fost imbricate etic!etele de formatare din seciunea de pagin asociat cu eroarea respectiv. stfel o construcie de tipul urmtor: LE7MUa multumim ca ati vizitat L(6+$>9M,aginaL?E7MnoastraL?(6+$>9M nu va funciona corect, deoarece etic!etele LE7M i L(6+$>9M sunt imbricate eronat. 3. -e.umat )up etapele de planificare, design i implementare urmeaz etapa de testare a site"ului. =n aceast etap se realizeaz: 2'. &orectarea paginilor din punct de vedere ortografic i gramatical 2*. 6estarea legturilor din cadrul site"ului 2,. 6estarea legturilor e#terne 2-. )epanarea greelilor care in de sinta#a codului 5678 Etapa de testare este deosebit de important pentru impresia general lsat de site"ul dumneavoastr. -n site cu ortografie neglijent, cu greeli de e#primare, cu legturi nefuncionale poate ndeprta vizitatorii, orict de valoroase ar fi informaiile prezentate n interiorul su. Capitolul '> Publicarea site"ului =n sfrit, site"ul dumneavoastr este finalizat. i parcurs toate etapele, de la planificare, la design i implementare, v"ai asigurat c toate elementele funcioneaz corect. venit momentul publicrii pe *eb a site"ului, astfel nct rezultatele muncii dumneavoastr s fie cunoscute de toi aceea care v vor vizita paginile. =n etapa publicrii pe *eb a site"ului intervin mai muli pai: (tabilirea unui nume de domeniu

(tabilirea serverului *eb pe care va fi stocat /gzduit3 site"ul $rganizarea i denumirea fiierelor n conformitate cu cerinele serverului gazd 6ransferul fiierelor

1. Gume!e de domeniu ,entru ca site"ul dumneavoastr s aib o identitate pe *eb avei nevoie de un nume de domeniu pentru el. >umele de domeniu al site"ului va face parte din adresa -+8 a fiecrei pagini i va oferi site" ului o prezen distinct pe *eb. )omeniile principale de pe *eb pot fi de mai multe tipuri: comerciale .com educaionale .edu guvernamentale .&o" furnizorii de servicii de reea .net instituii non"profit .or& domeniile corespunztoare rilor lumii .ro, etc

,entru a obine un nume de domeniu pentru site avei la dispoziie dou posibiliti: domeniu pltit domeniu gratuit @omeniu p!*tit )ac site"ul pe care l"ai creat aparine firmei dumneavoastr sau unei firme client sau dac dorii s avei o prezen stabil i credibil pe *eb cea mai bun opiune este s avei un domeniu pltit. =nregistrarea unui domeniu nu este foarte costisitoare i va asigura site"ului dumneavoastr o identitate serioas i credibil. =n plus, odat ce suntei proprietarul unui domeniu putei s sc!imbai locaia site" ului /serverul *eb pe care este gzduit3 fr ca aceasta s necesite sc!imbarea domeniului. ,reul pentru nregistrarea unui nume de domeniu variaz destul de mult. -na dintre cele mai convenabile oferte poate fi gsit la adresa !ttp:??;;;.CB"domains.com care ofer nregistrarea unui nume de domeniu pentru CB -() anual precum i o serie de discount"uri pentru nregistrarea pe perioade mai lungi. )ac dorii un domeniu romnesc / .ro3 putei obine informaii la adresa !ttp:??;;;.rnc.ro. ,entru nregistrarea unui astfel de domeniu se percepe o ta# unic de AC -() /pre valabil la data scrierii acestei cri3 fr alte ta#e anuale. =n cazul cnd optai pentru un domeniu pltit, adresa -+8 a site"ului va fi de forma !ttp:??;;;.dumneavoastra.com @omeniu &ratuit $binerea unui nume de domeniu gratuit este foarte simpl. E#ist multe companii on!line care ofer astfel de domenii i, n plus, i spaiu de gzduire pentru site. )ac suntei nceptor i dorii s v testai cunotinele de *eb design nou nvate, nu este o idee rea s construii un site %de prob% folosind pentru acesta un domeniu i un serviciu de !osting gratuite. =n afara acestei situaii, dei poate prea alegerea ideal, un domeniu gratuit poate aduce multe dezavantaje site"ului dumneavoastr. ,rima judecat de valoare asupra unui site este fcut pe baza numelui su de domeniu. =n cazul unui domeniu gratuit adresa -+8 a site"ului va fi: !ttp:??;;;.numefirmagazda.com?pdumneavoastra sau !ttp:??;;;.dumneavoastra.numefirmagazda.com

Uizitatorii site"ului vor ti imediat c nu deinei propriul domeniu i folosii un serviciu de !osting gratuit ceea ce v va afecta serios credibilitatea. 7ai ales dac site"ul este unul de afaceri, folosirea unui domeniu i serviciu de !osting gratuit este cu totul contraindicat. =n plus, firmele care ofer acest gen de servicii, impun afiarea unor bannere publicitare care distrag atenia vizitatorilor de la coninutul site"ului i mresc timpul de ncrcare al paginilor. 2. Ser"iciu! de &*.duire =e< 8=e< /ostin&9 =nainte de a publica site"ul pe *eb este necesar o evaluare a necesitilor de acces, pentru a determina ce fel de cont se potrivete site"ului dumneavoastr. ,lecnd de la presupunerea c deinei deja o cone#iune la Internet, nu vom intra n amnunte privind alegerea unui furnizor de servicii Internet /I(, j 'nternet +ervice &rovider3. 6otui, n cazul cnd nc nu deinei o cone#iune sau dorii s sc!imbai provider"ul actual, v recomandm s studiai cu atenie ofertele principalilor furnizori de servicii. vnd n vedere c nu v vei mai limita doar la simpla navigare pe *eb sau la sc!imbul de emailuri ci vei dori s transferai i s ntreinei un site *eb necesitile dumneavoastr vor crete. )in acest motiv este bine s v informai asupra unor detalii te!nice cum ar fi limea de band, mediul de transmisie /anten satelit, cablu cu fibre optice, unde radio3, ce tip de server folosete, asistena te!nic oferit, dac ofer gzduire pentru pagini *eb. $piunile pentru gzduire sunt urmtoarele: Instalarea unui server *eb propriu -tilizarea serverului *eb al providerului de servicii Internet -tilizarea unui server *eb aparinnd unei firme care ofer servicii de !osting (nsta!area unui ser"er =e< propriu Instalarea unui server *eb propriu este cea mai costisitoare soluie, dar ea ofer n sc!imb avantaje semnificative. )ispunnd de o cone#iune dedicat se pot furniza servicii *eb FJ de ore?zi utilizatorilor din lumea ntreag. Uei dispune de un control complet asupra serverului *eb i putei publica orice dorii. ,utei configura serverul i pentru alte servicii, cum ar fi <6,, 9op!er, 6elnet, scripturi &9I, etc. ,utei de asemenea avea propriul domeniu care va stabili o prezen distinct pe *eb. dresa -+8 va avea forma urmtoare: !ttp:??;;;.firmaVdumneavoastra.com? =ntruct costurile necesare ec!ipamentului !ard;are, cone#iunii la Internet, configurrii i ntreinerii unui server propriu depesc posibilitile unui utilizator obinuit, nu vom insista asupra acestei soluii. ti!i.area ser"eru!ui =e< a! pro"ideru!ui (S: -tilizarea serverului *eb al providerului dumneavoastr de Internet este o opiune economic. 7uli dintre furnizorii de servicii Internet ofer n cadrul contului de acces i un anumit spaiu pe serverele proprii pe care v putei plasa site"ul, fr a percepe ta#e suplimentare. )in pcate, spaiul oferit este de obicei mic, de ordinul C"H 7b i nu sunt oferite faciliti pentru crearea de pagini dinamice. ,entru a obine faciliti suplimentare va trebui s pltii n plus. &u toate c fiierele standard, contul de email i fiierele publicate pe *eb utilizeaz acest spaiu, F"H 7b sunt de regul suficieni pentru a menine un site modest ca dimensiuni. &ontul la I(, este accesibil pe baza unei cone#iuni dial"up care permite o legtur cu o vitez de pn la GA Xbps. =nainte de a desc!ide un astfel de cont, trebuie verificate detaliile privind spaiul de stocare, ta#ele pentru spaiul adiional, n mod curent Fm pentru C 7b, eventualele alte ta#e. 6rebuie verificat de asemenea disponibilitatea altor servicii, cum ar fi <6,, 9op!er, 6elnet, scripturi &9I, care ar trebui s poat fi utilizate gratuit, n cazul n care e#ist.

-n cont la un provider I(, este o opiune economic dar, n acelai timp, limitat. >u e#ist control al serverului *eb, serviciile adiionale rmnnd la latitudinea providerului. >u vei avea propriul domeniu, iar adresa -+8 va arta astfel: !ttp:??;;;.provider.com?pdumneavoastra ti!i.area unui ser"iciu de /ostin& &ea mai bun soluie din punctul de vedere al raportului servicii?pre o reprezint folosirea unui serviciu de !osting pltit. $fertele de pe piaa romneasc sunt numeroase i variate ca pre. =nainte de a face o alegere este bine s facei un studiu comparativ al acestora n privina spaiului pus la dispoziie, al modului de transfer al fiierelor, al traficului impus precum i al prezenei diverselor faciliti: scripturi &9I, baze de date, email personalizat, etc. >u trebuie s pierdei din vedere c site"ul dumneavoastr se poate dezvolta astfel nct spaiul de stocare rezervat la nceput poate deveni insuficient. -tiliznd un serviciu de !osting adresa -+8 a site"ului va avea forma urmtoare: !ttp:??;;;.dumneavoastra.com )e asemenea vei beneficia i de una sau mai multe adrese de email personalizate de tipul: adresahdumneavoastra.com <olosirea serviciilor unei firme de !osting v permite ca, odat ce deinei propriul nume de domeniu, s v transferai site"ul pe serverul *eb al firmei i s beneficiai de o prezen stabil pe *eb. <irmele de !osting ofer uneori i nume de domenii pentru clienii lor ns e#ist riscul ca dac v !otri s renunai la serviciile acelei firme s pierdei domeniul. )in acest motiv este mai bine s tratai separat cele dou probleme. 3. Dr&ani.area i denumirea 'iiere!or )ei aceast etap este intrinsec procesului de construire a site"ului, o vom discuta n acest capitol, deoarece acum este momentul cnd o bun organizare a directoarelor, subdirectoarelor i fiierelor devine deosebit de important. Dr&ani.area directoare!or i 'iiere!or Este foarte bine s organizai fiierele care fac parte din site pe computerul dumneavoastr e#act aa cum ele vor fi organizate pe serverul *eb. (erverul *eb are un director %rdcin% / root3 unde vor fi stocate toate fiierele site"ului. <olderul unde vei stoca aceste fiiere pe computerul personal va juca rolul directorului %rdcin% al serverului. =n directorul %rdcin% va fi plasat fiierul care va conine pagina %!ome% a site"ului, fiier denumit de obicei index)html sau index)htm. )ac site"ul este de mici dimensiuni /ntre G i CB pagini3 putei plasa toate fiierele n acelai director. )ac site"ul este mai mare, este recomandat s creai pentru fiecare seciune principal a sa cte un subdirector care va conine fiierele asociate acelei seciuni. (ubdirectoarele pot conine la rndul lor cte un fiier inde#. tunci cnd vei transfera fiierele de pe computerul dumneavoastr pe serverul *eb vei putea s transferai ntregul subdirector cu fiierele coninute n el. )e asemenea aceast metod va face i ntreinerea site"ului mult mai uoar. $ alt problem este locul unde vei stoca imaginile. ,ractica standard este de a crea un subdirector special n directorul %rdcin% unde s plasai toate imaginile din site. )ac procedai astfel este e#trem de important s creai un subdirector similar cu aceeai amplasare i pe computerul dumneavoastr. &alea de la pagina care apeleaz o imagine la imaginea respectiv trebuie s fie aceeai i pe computerul dumneavoastr i pe server, altminteri imaginile nu se vor afia dup ce site"ul a fost transferat pe server. $ alt variant de stocare a imaginilor este crearea unui subdirector destinat imaginilor, plasat n subdirectorul fiecrei pagini. &u aceleai precauii legate de calea corect ctre imagini, aceast metod funcioneaz bine, ba c!iar mbuntete viteza de ncrcare a imaginilor n pagini. )ezavantajul

const n faptul c adesea este necesar s reinei mai multe copii ale aceleiai imagini n diferite subdirectoare, n funcie de paginile unde este folosit. Ceri'icarea nume!or 'iiere!or 8a mutarea fiierelor de pe computerul dumneavoastr pe serverul *eb se impune verificarea numelor fiierelor care trebuie s fie compatibile cu sistemul pe sunt mutate. $ atenie deosebit trebuie acordat denumirii i e#tensiei fiierelor. >u are importan dac optai pentru e#tensia )html sau )htm. 6ot ce trebuie este s fii consecvent cu e#tensia aleas de"a lungul ntregului site. )e asemenea, trebuie s avei n vedere c n sistemele ->IW, cele mai des folosite ca servere *eb, denumirile fiierelor sunt case!sensitive. $ pagin denumit m$page)html nu este totuna cu pagina M$&age)html. ,entru a evita confuziile folosii pentru denumirea fiierelor numai litere mici. 4. Trans'eru! 'iiere!or 6ransferul fiierelor care compun site"ul de pe computerul propriu pe serverul *eb este o operaiune relativ simpl, care const n copierea fiierelor pe server n locaia destinat site"ului dumneavoastr. -nele dintre firmele de !osting asigur o aplicaie special destinat transferului fiierelor, dar cea mai utilizat metod de transfer este prin intermediul unui client <6,. -n client +TP /.ile %ransfer &rotocol3 este o aplicaie prin intermediul creia se poate realiza transferul fiierelor de pe un sistem pe altul. ,utei copia fiiere de pe computerul personal pe un alt computer /operaie denumit Cpload3 dup cum putei prelua fiiere de pe un alt computer, pe computerul personal /operaie denumit Do nload3. &ele mai folosite programe <6, sunt Cute.%& /!ttp:??;;;.cuteftp.com3 i "+G.%& /!ttp:??ips;itc!.com3. $dat ce ai instalat pe computerul dumneavoastr un client <6,, v"ai nregistrat numele de domeniu i avei un cont la un serviciu de gzduire totul este pregtit pentru transferul fiierelor care compun site"ul pe serverul gazd. ,entru a realiza transferul fiierelor, n general va trebui s urmai urmtorii pai: &onectarea la Internet )esc!iderea programului <6,. Uei observa o serie de casete de dialog n care trebuie introduse informaiile necesare programului pentru a realiza cone#iunea cu computerul gazd. ,entru a face cone#iunea cu serverul trebuie s furnizai programului adresa <6, a !ost"ului dumneavoastr. ceasta v este furnizat de firma de !osting la desc!iderea contului. )e asemenea, programul v va cere numele de utilizator i parola pe care le"ai stabilit la desc!iderea contului. >u uitai s de"bifai opiunea 0non$mous din meniul (ogin. ,rin introducerea numelui de utilizator i a parolei vei cpta acces la contul dumneavoastr i vei putea intra n directorul unde vor fi plasate fiierele site"ului. $ alt informaie care trebuie furnizat programului este tipul fiierelor transferate. =n general pentru fiierele 5678 se folosete opiunea 0+C'' iar pentru celelalte fiiere, opiunea binar$. 7ai simplu, putei alege opiunea 0utoDetect prin care programul determin singur tipul fiierului i modul cum va face transmiterea lui. &elelalte casete de dialog pot fi lsate necompletate sau cu setrile pree#istente. )up furnizarea acestor informaii programul <6, va realiza cone#iunea cu serverul gazd. (electarea fiierelor pe care dorii s le copiai. Uei observa c fereastra aplicaiei <6, este mprit n dou: ntr"o parte avei directoarele de pe computerul personal, n cealalt parte directoarele de pe computerul gazd. (electai directorul care conine fiierele dumneavoastr i dai comanda de transfer n directorul care v este destinat pe serverul gazd. )ac folosii scripturi &9I asociate site"ului trebuie s le acordai o atenie special. &ele mai multe servere necesit instalarea scripturilor &9I ntr"un subdirector special numit cgi!bin, aflat n directorul dumneavoastr. ,entru plasarea i setarea corect a scripturilor trebuie s luai legtura cu administratorul serverului gazd care v va oferi indicaiile necesare.

,e unele sisteme de operare modul de accesare al fiierelor este strict definit, permind sau restricionnd citirea, scrierea sau e#ecutarea fiierelor de ctre diferii utilizatori. ceste faciliti sunt setate de regul prin drepturile de acces atribuite fiierelor. )in acest motiv, verificarea modului de setare a fiierelor este e#trem de important. )e e#emplu, n sistemele ->IW modul 1BG semnific faptul c fiierele pot fi citite, modificate sau e#ecutate de proprietarul lor, n vreme ce ali utilizatori nu le pot dect citi sau e#ecuta /dup caz3. )up transferul fiierelor, pot aprea probleme de diverse tipuri. -neori, paginile publicate nu pot fi accesate deloc, scripturile nu funcioneaz, etc. ,rimul lucru care trebuie verificat n acest caz este dac fiierele se afl n directoarele potrivite. poi trebuie verificate permisiunile de acces pentru directoare i fiiere, e#tensiile fiierelor, fiierele inde#. =n cazul cnd apar probleme, cea mai sigur cale de rezolvare a lor este s luai legtura cu administratorul serverului gazd i s i cerei informaii ct mai complete privind drepturile de acces pentru directoare, calea corect ctre scripturile folosite i, n general, setrile necesare pentru buna funcionare a site"ului. ). -e.umat =n etapa de publicare pe *eb a site"ului trebuie parcuri urmtorii pai: (tabilirea unui nume de domeniu pentru site: gratuit sau pltit. 9sirea unui serviciu de gzduire convenabil sub raportul servicii?pre. $rganizarea i denumirea directoarelor i fiierelor n conformitate cu cerinele sistemului serverului gazd. 6ransferul fiierelor, cea mai folosit metod de transfer fiind prin <6,. Cteva cuvinteXla .inal m ajuns, iat, la finalul cltoriei noastre. vei, acum, toate informaiile i instrumentele necesare construirii unui site atrgtor, funcional i eficient. ,utei ncepe prin a v construi o pagin personal pe care o putei plasa pe un server gratuit, pentru a e#ersa cunotinele dobndite. )ar acesta este doar primul pas. )esignul *eb este unul dintre domeniile cu un mare potenial de dezvoltare. 6ot mai multe firme doresc site"uri pe *eb, fie pentru a derula afaceri prin intermediul lor, fie doar pentru a"i prezenta oferta de produse i servicii. $ carier n acest domeniu este o alegere cu mari anse de succes pentru orice tnr. 7ai mult, dei pe *eb"ul romnesc aceast zon este nc slab dezvoltat, putei s v iniiai propria afacere care s se deruleze e#clusiv pe Internet. ceast carte a urmrit s v ofere informaiile necesare unui start corect n domeniul designului *eb. )ar nu trebuie s v oprii aici. )esignul i programarea *eb reprezint domenii vaste iar cartea noastr a atins doar elementele de baz ale acestora. ,utei continua nvnd s programai n ,erl pentru a crea scripturi &9I, putei nva :ava(cript, :ava sau un limbaj de interogare pentru bazele de date stocate pe server. ,utei deveni familiar cu unul din editoarele puternice de 5678 /7acromedia )ream;aver este cel mai utilizat n acest moment3 sau putei nva s stpnii foarte bine un program de grafic /&orel)ra; sau dobe ,!otos!op de e#emplu3 pentru a crea grafic *eb. ,osibilitile sunt nenumrate. =n lumea *orld *ide *eb totul este ntr"o continu micare i dezvoltare. ceast carte v"a oferit fundamentele programrii n 5678. &ontinuai s nvai, perfecionai"v continuu i succesul viitor v este asigurat.