You are on page 1of 191

Pagini WEB n HTML

Argument Capitolul 1. Capitolul 2. Capitolul 3. ..................................................................................................... Introducere n limbajul HTML .. 1.1. Structura unui document HTML . 1.1.1. Seciunea HEAD .. 1.1.2. Seciunea BODY .. Etichete (tag-uri) i atribute HTML ... 2.1. Etichete (tag-uri)...... 2.2. Atribute ... Formatarea textului ........ 3.1. Formatarea titlului .. 3.2. Formatarea textului . 3.3. Utilizarea caracterelor speciale ... Despre culori . 4.1. Sistemul de definire a culorilor ... 4.2. Corespondena dintre codurile hexazecimal i zecimal .. 4.3. Culoarea fundalului . 4.4. Culoarea textului . 4.5. Culoarea legturilor . 4.6. Culori sigure Imagini i elemente multimedia .. 5.1. Formatele fiierelor grafice . 5.1.1. Formatul GIF ............ 5.1.2. Formatul JPEG ............. 5.2. Inserarea unei imagini . 5.3. Dimensionarea imaginii .. 5.4. Alinierea imaginii i a textului 5.5. Imagini folosite ca fond (background) al paginii 5.6. Imaginile video ... 5.7. Sunetele ....... Cadre (frames) .. Legturile (referinele) 7.1. Legtura ctre o alt pagin - Link-urile . 7.2. Legtura ctre o seciune de pagin Ancorele ............. 7.3. Legtura ctre o adres de e-mail ........... 7.4. Utilizarea unei imagini ca legtur ......... 7.5. Schimbarea culorilor legturilor . Liste ... 8.1. Liste de tip definiie 8.2. Liste neordonate .. 8.3. Liste ordonate .. 8.4. Personalizarea listelor . Tabele Formulare . 10.1. Elementele unui formular .. 10.1.1. Cmpurile de editare .............. 10.1.2. Butoanele radio .. 10.1.3. Casetele de validare ... 10.1.4. Casetele de fiiere .............. 10.1.5. Listele de selecie ... 10.1.6. Butoanele de tip Submit i Reset 10.2. Trimiterea datelor dintr-un formular prin e-mail ..

Capitolul 4.

Capitolul 5.

Capitolul 6. Capitolul 7.

Capitolul 8.

Capitolul 9. Capitolul 10.

Cuprins

Cteva cuvinte...nainte HTML i World Wide Web Capitolul 1 Primii pai Ce este HTML? Standarde i extensii HTML Coninut i aspect ntr-un document HTML Uneltele de care avei nevoie Cum s procedai? Convenii de notaie Rezumat Capitolul 2 Structura unui document HTML 1. Ce este un document HTML? 2. Etichete de structur 3. Folosirea corect a etichetelor 4. Rezumat 5. Test Capitolul 3 Culori 1. Sistemul de definire a culorilor 2. Corespondena dintre codurile hexazecimal i zecimal 3. Culoarea fundalului 4. Culoarea textului 5. Culoarea legturilor 6. Alegerea culorilor 7. Culori "sigure" 8. Rezumat 9. Test Capitolul 4 Fonturi 1. Formatarea caracterelor 2. Accentuarea textului 3. Etichete logice i etichete fizice 4. Rezumat 5. Test Capitolul 5 Formatarea textului 1. Trecerea la un rnd nou 2. Titlurile (Headings) 3. Paragrafele 4. Preformatarea textului 5. Centrarea textului 6. Afiarea textului pe o singur linie 7. Blocul <DIV> 8. Linii orizontale 9. Inserarea unei adrese potale 10. Inserarea unui citat 11. Inserarea caracterelor speciale 12. Sugestii privind aspectul textului 13. Rezumat 14. Test

Capitolul 6 Legturi (Link-uri) 1. Adresa URL 2. Adrese absolute i adrese relative 3. Stabilirea legturilor 4. Ancore - legturi n cadrul aceleiai pagini 5. Legtura ctre o pagin aflat n acelai director (folder) 6. Legtura ctre o pagin localizat n alt director (folder)

7. Legtura ctre pagini externe 8. Alegerea culorilor pentru legturi 9. Utilizarea potei electronice (e-mail) 10. Legturi ctre fiiere oarecare 11. Deschiderea paginilor referite printr-o legtur 12. Crearea unei bare secundare de navigare 13. Rezumat 14. Test Capitolul 7 Imagini i elemente multimedia 1. Formatele fiierelor grafice 2. Cteva metode de obinere a imaginilor 3. Inserarea unei imagini 4. Dimensionarea imaginii 5. Alinierea imaginii i a textului 6. Imagini folosite ca fond (background) al paginii 7. Imagini folosite ca legturi 8. Imaginile miniaturale (thumbnails) 9. Imaginile video 10. Sunetele 11. Sugestii privind folosirea imaginilor i elementelor multimedia 12. Imaginile i timpul de ncrcare al paginii 13. Rezumat 14. Test Capitolul 8 Liste 1. Liste neordonate 2. Liste ordonate 3. Imbricarea listelor 4. Liste de definiii 5. Rezumat 6. Test Capitolul 9 Tabele 1. Crearea unui tabel 2. Alinierea tabelului n pagin 3. Dimensionarea unui tabel 4. Spaierea celulelor unui tabel 5. Dimensionarea celulelor unui tabel 6. Alinierea coninutului unei celule 7. Definirea culorilor pentru un tabel 8. Titlul unui tabel 9. Capul de tabel 10. Tabele de forme oarecare 11. Celule fr coninut 12. Grupuri de coloane 13. Atribute pentru aspectul chenarului unui tabel 14. Tabele imbricate 15. Recomandri privind folosirea tabelelor 16. Rezumat 17. Test Capitolul 10 Cadre (Frames) 1. Documentul de definire a cadrelor 2. Cadre imbricate 3. Controlul aspectului unui cadru 4. Bare de derulare 5. Poziionarea documentului ntr-un cadru 6. Cadre interne 7. Deschiderea documentelor n alte cadre

8. Sugestii privind folosirea cadrelor 9. Rezumat 10. Test Capitolul 11 Formulare (Forms) 1. Ce este un formular? 2. Crearea unui formular 3. Eticheta <INPUT> 4. Etichetele <SELECT> i <OPTION> 5. Eticheta <TEXTAREA> 6. Validarea datelor 7. Rezumat 8. Test Capitolul 12 Script-uri CGI 1. Ce este CGI? 2. Transferul datelor 3. Execuia script-ului 4. Structura unui script 5. Exemple de script-uri 6. Instalarea interpretorului Perl i a aplicaiei PWS 7. Rezumat Capitolul 13 JavaScript 1. Ce este JavaScript? 2. Cum poate fi inclus un script n pagin? 3. Modul de execuie al script-ului 4. Ce se poate realiza cu JavaScript? 5. Rezumat Capitolul 14 Foi de stiluri (CSS) 1. Ce este un stil? 2. Tipuri de foi de stiluri 3. Efecte obinute cu ajutorul stilurilor 4. Rezumat Capitolul 15 Elemente avansate de grafic 1. Imagini hart 2. Imagini animate 3. Imagini transparente 4. Rezumat Capitolul 16 Motoare de cutare i metatag-uri 1. Ce este un motor de cutare? 2. Metatag-uri 3. Rezumat 4. Crearea i publicarea unui site Capitolul 17 Planificarea 1. Factori care nu pot fi planificai 2. Etapele planificrii site-ului 3. Rezumat Capitolul 18 Designul 1. Principiile designului web 2. Organizarea unui site 3. Metodologia de construire a site-ului 4. Tehnici de design web 5. Greeli de design 6. Rezumat Capitolul 19 Testarea 1. Corectarea paginilor 2. Testarea paginilor 3. Rezumat Capitolul 20 Publicarea

1. Numele de domeniu 2. Serviciul de gzduire Web (Web hosting) 3. Organizarea i denumirea fiierelor 4. Transferul fiierelor 5. Rezumat Cteva cuvinte...la final Anexa 1 Index etichete Anexa 2 Glosar Anexa 3 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. Au aprut chiar forme noi de comunicare, utilizate cu entuziasm de milioane de oameni din lumea ntreag, cum sunt e-mail-ul i chat-ul, care deja au dobndit reguli proprii, o cultur i chiar i un folclor propriu. Internetul a produs totodat o extraordinar democratizare a informaiei i comunicrii. O cantitate literalmente uria de informaie, sub toate formele sale: text, imagini statice sau video, sunet, adunate ntr-o "bibliotec" accesibil oricui, oricnd, de la orice calculator legat la reea, fa de care chiar i cele mai complete enciclopedii clasice par o glum. A devenit o joac de copil comunicarea direct, n timp real, cu verioara din Cluj, cu prietenul din Australia, cu firma furnizoare din Brazilia sau cu banca din Elveia. Sunt suficiente pentru toate acestea un computer, un modem i o linie telefonic. Dei Internetul i World Wide Web cunosc o expansiune exponenial, se afirm totui c se afl nc n faza copilriei. Raportndu-ne la o astfel de apreciere, am putea afirma c n Romnia Internetul este nc n fa, dar cu un potenial de dezvoltare cert i rapid ascendent. Cu toate c foarte muli tineri manifest un interes i o deschidere extraordinare ctre orice subiect legat de Internet, acest domeniu este cel mai adesea ignorat n licee, sau tratat cu superficialitate. Programele colare nu l abordeaz dect tangenial, prin urmare nu exist manuale colare dedicate, iar lucrrile de specialitate la un nivel accesibil strlucesc prin absen. Designul i programarea Web se afl ntr-o dezvoltare accelerat i constituie o orientare profesional cu un mare potenial de succes, dar n mod paradoxal, relativ puini tineri se ndreapt azi ctre aceste domenii. Unul din motive l constituie, desigur, atenia insuficient acordat acestor ramuri ale informaticii n nvmntul liceal, alturi de un contact direct cu Internetul extrem de redus, limitat mai ales de posibilitile tehnice i economice actuale ale colilor. Argumentul 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 (87%), 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. Cei mai muli i doresc acest lucru pentru a se exprima pe sine, pentru a comunica lumii i n aceast form, faptul c exist, 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 Web? Scopul acestei cri, dedicate limbajului specific Internetului, HTML, i tehnicilor uzuale de creare a unui site Web, 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 maximum de rezultate. Cartea nu i propune s fie o lucrare academic, un manual exhaustiv de HTML i Web design. Subiectele sunt extrem de vaste i ar fi fost imposibil cuprinderea lor ntr-o singur lucrare. Am dorit s ofer o imagine de ansamblu asupra limbajului HTML, cu un marcat accent pe aspectele practice ale utilizrii sale, precum i o trecere n revist a unora dintre cele mai folosite tehnici de programare care

extind posibilitile limbajului: script-urile CGI, JavaScript, programarea cu ajutorul foilor de stiluri CSS. De asemenea, n partea a doua a crii am prezentat etapele procesului de construire a unui site Web i cteva dintre tehnicile uzuale de design Web. Adresndu-se mai ales nceptorilor care stpnesc totui elementele de baz (utilizarea computerului i sistemul de operare Windows, noiuni de editare de text i imagini), cartea este scris ntr-un limbaj care se dorete accesibil. Fiecare noiune prezentat este nsoit de exemple reprezentate de secvene de cod HTML ce ilustreaz modul ei de aplicare. Recomandarea noastr este ca cititorii s verifice personal toate aceste exemple, deoarece numai experimentnd pe cont propriu se poate ajunge la o bun nelegere i stpnire a efectelor codului HTML asupra aspectului paginii Web. ncheiem 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. Not asupra terminologiei utilizate 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. Am optat pentru folosirea lor cu statut de neologisme, n forma original, uneori cu forme flexionare ad-hoc, chiar 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 exemple. Pentru unii termeni am utilizat ambele forme aflate n circulaie, cum ar fi link legtur, font caracter, tag etichet. Exist i autori care folosesc numai echivalentele romneti ale acestor termeni. Cu toate c traducerea lor respect cel mai adesea sensul, aceste echivalente nu au reuit s se impun n lumea informaticii, nu de puine ori utilizarea lor conducnd, n mod paradoxal, la confuzii sau nedumeriri. (Nu 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.) Prezentm n continuare o list a acestor termeni. Explicaii asupra sensului lor se gsesc n text i/sau n glosarul prezentat la sfritul crii. browse r directo r downlo ad e-mail folder link script Web host, hosting icon tag template font site

HTML i World Wide Web nainte de a ncepe prezentarea limbajului HTML, vom face cteva precizri despre semnificaia conceptului World Wide Web (ntr-o traducere aproximativ, pnz de pianjen, cu sensul de reea, extins n lumea larg). Precizrile ar putea prea inutile, dar realitatea este c dei foarte mult lume vorbete despre World Wide Web, puini tiu exact ce reprezint. Mai mult, datorit extinderii sale

exponeniale i a extraordinarei sale populariti, adesea noiunea este confundat cu cea de Internet. World Wide Web este ns doar o parte a Internetului. Internetul exist de mai bine de treizeci de ani. Bazele acestuia au fost puse la sfritul anilor 60, ca urmare a unei iniiative a Departamentului de Aprare al Statelor Unite, care avea drept scop realizarea unei reele robuste i fiabile de comunicaii ntre computere aflate la distan. Reeaua avea rolul de a asigura un contact permanent ntre elementele sale componente, chiar dac o parte din legturi ar fi fost ntrerupte ca urmare a unui atac nuclear. Ulterior, 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 pachete software cum ar fi e-mailul, grupurile de tiri (newsgroup), protocoalele de transfer al fiierelor (FTP), Gopher i World Wide Web. Cu 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. Motivul l-a constituit dezorganizarea sa iniial cvasi-total. Folosirea unor standarde de comunicaie i a unor pachete software foarte diverse reprezentau nite bariere tehnologice aproape insurmontabile pentru utilizatorii obinuii. n plus, informaiile accesibile la acea vreme pe Internet erau prezentate sub forma unor simple fiiere text i nu n forma cunoscut azi. Dezvoltarea exploziv pe care a cunoscut-o Internetul n ultimii zece ani a fost determinat de apariia World Wide Web. World Wide Web a luat natere n 1989, ca urmare a eforturilor unor fizicieni ai CERN (Laboratorul European de Fizica Particulelor) 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: text, imagini, sunet. Aa cum dovedete imensa sa popularitate, Web-ul s-a dovedit a fi mediul ideal pentru distribuirea informaiilor ntr-o maniera extins i accesibil. Motivul l constituie faptul c Web-ul asigur o interfa hypermedia pentru informaii. Hypermedia reprezint variatele tipuri de informaie (text, imagini, fiiere audio i video) care pot fi localizate oriunde pe glob, mpreun cu legturile dintre ele. Pentru a transmite i a afia informaiile hypermedia, Web-ul folosete un protocol de transfer (un set de reguli) care este numit HTTP (Hypertext Transfer Protocol, protocol de transmitere a hypertextului). Deci, n esen, World Wide Web este o colecie imens de documente interconectate prin intermediul Internetului, care folosete protocolul HTTP pentru a afia elementele hypermedia. Pentru 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 IP (Internet Protocol). Adresa IP este format din patru numere, fiecare mai mic de 255, desprite ntre ele prin punct (de exemplu 123.67.9.201). n vreme ce computerele lucreaz cu numere, oamenii prefer numele. Din acest motiv, fiecrei asemenea adrese IP i s-a asociat i un nume. Cum 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. Totui, 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. Datorit acestui fapt, chiar 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. Organizarea domeniilor pe Internet respect un model ierarhic. Primul nivel ierarhic l constituie diversele tipuri de organizaii. Tot pe primul nivel se afl i domeniile corespunztoare rilor lumii, de exemplu uk, pentru Marea Britanie sau ro, pentru Romnia. Urmtorul nivel ierarhic l constituie organizaiile, firmele, instituiile care dein propriile domenii i subdomenii.

Internetul conecteaz dou tipuri de computere: serverele, care furnizeaz documentele, i clienii, care solicit i afieaz documentele pentru a fi vizualizate de utilizator. Pentru a accesa i afia documentele HTML, pe computerul client ruleaz aplicaii numite browsere. Uneori termenii server Web i client Web pot produce confuzii, deoarece se refer att la computerele pe care ruleaz aceste aplicaii ct i la aplicaiile n sine. Din acest motiv, pentru aplicaia client vom folosi termenul de browser, iar pentru aplicaia sau pachetul de aplicaii care ruleaz pe server, termenul de aplicaie server. Relaia client-server pe care se bazeaz funcionarea World Wide Web este facilitat de protocolul de comunicaie HTTP. Interaciunea dintre browserul Web i serverul Web ncepe cu o cerere din partea clientului. Aplicaia client transmite o cerere ctre aplicaia server. Aceast cerere poate consta n transmiterea unui anumit document sau n efectuarea unei anumite tranzacii. Aplicaia server fie ndeplinete cererea clientului, caz n care obiectul solicitat este transmis browserului, fie o refuz, situaie n care browserul afieaz binecunoscutele mesaje de eroare "The page cannot be displayed" sau "File not found". Cu alte cuvinte, procesul vizualizrii unei pagini Web ncepe cu o cerere a browserului Web ctre serverul Web. Browserul transmite serverului detalii despre el nsui i despre fiierul pe care l dorete prin intermediul unui header HTTP de cerere (headerul este acea parte a unui pachet de date care este plasat naintea informaiilor efectiv transmise i care poate conine adresa sursei i a destinaiei, verificri ale erorilor i alte cmpuri). Serverul primete i analizeaz headerele HTTP de cerere n cutarea informaiilor relevante, cum ar fi numele fiierului care este solicitat i transmite napoi fiierul cerut mpreun cu headerele HTTP de rspuns. Browserul folosete headerele HTTP de rspuns pentru a determina cum s afieze rezultatele obinute. Trebuie s subliniem c browserele nu au nevoie de conexiune la Internet ca s funcioneze. Putei ncrca i afia cu ajutorul browserului dumneavoastr documente HTML care sunt stocate pe propriul hard-disk. Aceasta v d, printre altele, posibilitatea de a definitiva i testa documentele HTML 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 Hypertext Markup Language i reprezint scheletul oricrei pagini de Web. HTML nu este un limbaj de programare. Nu vei lucra aici cu variabile, expresii, tipuri de date, structuri de control. HTML este un limbaj descriptiv, prin care sunt descrise elementele structurale ale paginii de Web: titlurile, listele, tabelele, paragrafele, legturile cu alte pagini, precum i aspectul pe care l are pagina din punct de vedere grafic. n fond, HTML este modul n care i comunicam browserului ce elemente dorim s introducem n pagina Web i care este aspectul acestora. 2. Standarde i extensii HTML HTML este un limbaj standardizat, aceasta nsemnnd c orice browser poate interpreta i afia corect un document Web. Sintaxa de baz a limbajului HTML este definit n versiunea HTML 3.2. n prezent a fost lansat i versiunea HTML 4.0 care se afl n curs de standardizare. De la o versiune la alta, limbajului HTML i se aduga noi elemente. De asemenea, fiecare tip de browser (Netscape Navigator i Internet Explorer, n particular) folosete anumite elemente ne-standard, pentru a mbunti capacitile limbajului. Etichetele noi, care nu fac parte din versiunea standard poart

numele de extensii. n general, browserele cele mai folosite, Netscape Navigator i Internet Explorer recunosc etichetele HTML 3.2 i o mare parte din cele nou introduse n HTML 4.0. Este recomandat s evitai extensiile, n afara cazului cnd avei un motiv foarte serios pentru a le folosi. Pentru utilizatorii browserelor care nu recunosc aceste extensii, anumite pri ale documentului dumneavoastr pot deveni complet ilizibile. Bineneles, extensiile pot afecta n grade diferite aspectul formal al paginii dumneavoastr. De exemplu, folosirea extensiilor care in de aspectul liniilor orizontale incluse n pagin nu va afecta n mod grav aspectul paginii n browserele care nu suport aceste extensii. Cele mai multe dintre acestea vor ignora extensiile i vor afia o line orizontal standard. Pe de alt parte, extensiile care realizeaz formatarea i alinierea textului i aspectul fonturilor pot face ca documentul s aib un aspect foarte dezordonat n browserele care nu suport extensii de acest tip. Sau, n cazurile cele mai grave, acea parte a documentului poate s nu fie deloc afiat. 3. Coninut i aspect ntr-un document HTML Pentru a realiza documente Web eficiente, cu impact asupra cititorului, i pentru a valorifica pe deplin puterea limbajului HTML, trebuie s inei seama de o idee fundamental: HTML este destinat structurrii documentele i nu doar formatrii n vederea afirii lor. HTML furnizeaz modaliti variate pentru a defini aspectul documentului: specificaii legate de fonturi (tipurile de caractere), de formatare a textului, de culori, etc. Desigur, aspectul formal este important, cci el poate veni n beneficiul sau n detrimentul accesibilitii informaiilor prezentate. Totui, nu aspectul formal, ci coninutul documentului primeaz. HTML conine numeroase ci de structurare a coninutului documentului fr a pune problema felului cum vor fi afiate elementele: titluri, liste, paragrafe, imagini, etc. Toate acestea sunt definite n limbajul HTML fr a impune browserului s le afieze ntr-un anumit mod. Browserului 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 HTML. Marele 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 browsere, fiecare avnd versiuni diferite. n abordarea bazat pe aspect, dac browserul nu recunoate indicaiile de formatare specificate, fie nu le execut, fie le execut eronat, astfel c structurarea paginii va avea de suferit. n abordarea bazat pe coninut, indiferent cum va alege browserul s execute indicaiile de formatare, semnificaia elementelor din pagin va rmne neschimbat. De exemplu, dac vei afia titlurile i subtitlurile din pagin folosind tipuri diferite de fonturi, caractere cu stiluri variate: aldine (bold, sau ngroate), cursive (italice, sau nclinate), subliniate, etc., un browser care nu recunoate aceste elemente ar putea afia titlurile n acelai mod n care afieaz restul textului, astfel c semnificaia lor n pagin i-ar pierde relevana. Pe de alt parte, dac vei folosi etichetele speciale pentru titluri, chiar daca browserul 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. Uneltele de care avei nevoie Instrumentele minime de care avei nevoie pentru a realiza documente HTML sunt, n esen, urmtoarele: un editor de text, cu ajutorul cruia s scriei documentul, un browser, prin intermediul cruia s vizualizai aspectul i coninutul documentului, un editor grafic cu care s prelucrai imaginile pe care le vei introduce n pagin i o conexiune la Internet.

Editorul Pentru a scrie documente HTML avei la dispoziie trei posibiliti: 1. Folosirea unui simplu editor de text. Cel mai cunoscut i accesibil este Notepad-ul din Windows. Atenie! Nu este recomandat s folosii un procesor de text complex cum este Microsoft Word, chiar dac acesta poate salva documentele n format HTML (cu extensia .htm), deoarece la salvarea documentelor Word-ul adaug automat la textul documentului dumneavoastr o mare cantitate de cod coninnd informaii lipsite de relevan care ncarc inutil documentul i mrete dimensiunile fiierului. 2. Folosirea unui editor HTML. Acest tip de editoare dedicate ofer faciliti n scrierea codului, realizeaz corectarea documentului din punct de vedere sintactic i chiar scriu secvene de cod pentru anumite elemente pe care dorii s le inserai n document. 3. Folosirea unui editor WYSIWYG (What You See Is What You Get, n traducere liber "ceea ce vezi la editare este ceea ce obii la vizualizare"). Un editor de tip WYSIWYG permite alegerea i formatarea, cu ajutorul mouse-ului, a elementelor pe care dorii s le includei n pagin: tabele, link-uri, formulare, putei stabili tipul fonturilor, culorile, aranjarea textului n pagina. Pe msur ce un anumit element este inserat, editorul scrie n mod automat codul HTML corespunztor, fr ca utilizatorul s fie nevoit s intervin asupra lui. Totui, dac avei cunotine de HTML putei interveni la nivelul codului n orice manier dorii, orice schimbare pe care o facei n cod, reflectndu-se automat n aspectul paginii. Printre profesioniti persist o controvers n privina tipurilor de editoare care ar trebui folosite pentru a edita documentele HTML. n esen, problema este aceasta: este mai bine s-i construieti paginile folosind HTML "pur", adic scriind totul tu nsui, sau este de preferat s foloseti un editor de tipul WYSIWYG? Editoare deosebit de puternice de acest tip: Macromedia Dreamweaver, Microsoft Front Page, Coffe Cup ca s dm numai cteva exemple, 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 JavaScript sau applet-uri Java. Cu ajutorul lor se pot construi site-uri extrem de complexe. Exist, de asemenea i editoare de tip "built-in". Acestea sunt cel mai uor de folosit i adesea sunt puse la dispoziie de providerii care ofer i servicii gratuite de hosting (www.home.ro, www.rhp.ro, etc.). Editoarele de acest tip ofer un numr (de obicei redus) de template-uri (pagini preformatate), i doar cteva opiuni de editare: putei aduga text, modifica tipul fonturilor, culoarea fundalului i a textului, forma butoanelor de navigare, putei include un numr prestabilit de imagini. Din pcate, gradul de control asupra aspectului paginii este foarte redus. Utilizatorul este limitat la cteva opiuni, iar numrul mic de template-uri puse la dispoziie face ca pagina s fie lipsita de originalitate. Ai putea, atunci, s v ntrebai de ce mai este nevoie s nvai HTML dac exist editoare profesionale care scriu codul n locul dumneavoastr. n fond, muli dintre web designerii profesioniti le folosesc, deoarece a scrie codul unui site "by hand", cu ajutorul unui simplu editor de text, este o munca titanic i mare consumatoare de timp. Rspunsul este simplu: trebuie s cunoatei HTML deoarece orict de performant ar fi un editor WYSIWYG, mai devreme sau mai trziu v vei gsi n situaia de a interveni la nivelul codului. Cea

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. De obicei, interveniile necesare asupra codului pentru depanarea sa sunt minime i uor de realizat... cu condiia s tii ce trebuie s facei. Cu alte cuvinte, s tii HTML. n concluzie, oricare ar fi opiunea dumneavoastr, fie c vei folosi un editor de HTML de tip text, fie c vei folosi unul de tip WYSIWYG, pentru a putea construi documente Web corecte i funcionale este nevoie s stpnii bine limbajul HTML. Browserul Evident, pentru a vizualiza documentele dumneavoastr avei nevoie de un browser. Recomandarea noastr este s deinei cel puin dou dintre cele mai rspndite browsere, Internet Explorer i Netscape Navigator, de dorit ar fi chiar cu versiuni diferite ale aceluiai browser. Testarea paginilor dumneavoastr sub diferite browsere este o etap important naintea publicrii lor pe Web. Dei n anii de nceput ai Web-ului problema aspectului paginilor n diferite tipuri de browsere era vital, deoarece erau folosite o mare diversitate de browsere, fiecare tip realiznd afiarea paginilor n maniera sa proprie, n prezent aceast problem i-a pierdut din importan. Motivul este acela c browserele Internet Explorer au acaparat cea mai mare parte din pia, statisticile artnd c Internet Explorer este tipul folosit de 93% dintre utilizatori iar Netscape Navigator de circa 6% dintre ei. Editorul grafic Desigur, vei dori s introducei imagini n paginile dumneavoastr. Pentru a putea s prelucrai imaginile n conformitate cu inteniile dumneavoastr i cu rolul lor n pagin avei nevoie de un editor grafic. Numrul editoarelor de acest tip este foarte mare, printre cele mai puternice i mai cunoscute fiind CorelDraw i Adobe Photoshop. Putei alege ns acel editor cu care suntei deja familiarizat, chiar dac mai puin performant, mai ales dac pentru nceput nu dorii s facei prelucrri foarte complexe ale imaginilor. Conexiunea la Internet Spre deosebire de primele trei instrumente, conexiunea la Internet nu este absolut esenial n etapa de construire a documentului HTML. Aa cum spuneam, documentele HTML se pot construi i vizualiza local, pe propriul computer. Cu toate acestea, existena unei conexiuni Internet v va ajuta foarte mult n procesul de nvare, i nu numai. Pe de-o parte deoarece pe Web vei gsi nenumrate exemple, 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 externe. 5. Cum s procedai? Pentru a folosi eficient informaiile din aceast carte iat mai jos cteva indicaii n privina modului n care v putei organiza activitatea: Creai-v n folderul My Documents (sau ntr-o alta locaie aleas de dumneavoastr) un folder de lucru numit Work. Deschidei editorul de text n care ai ales s lucrai (ar fi de dorit ca pe parcursul procesului de nvare s folosii un simplu editor text, de exemplu Notepad).

Scriei (editai) fiecare exemplu pe care l gsii aici. Salvai-l n folderul dumneavoastr cu numele indicat n blocul <TITLE> i extensia .html. Putei folosi att extensia .html ct i extensia .htm dar este bine ca odat ce ai ales o anumit extensie s fii consecvent n folosirea ei. Denumii-v fiierele cu litere mici. Atenie! Editorul de text Notepad salveaz fiierele cu extensia implicita ".txt". De aceea cnd salvai este necesar s precizai n mod explicit extensia dorit (.html sau .htm) Cnd vei salva fiierul creat n Notepad s-ar putea s constatai c restul de fiiere HTML pe care le-ai salvat anterior nu apar n fereastr. Pentru a le vedea, deschidei meniul File>Save As..., iar n fereastra deschis selectai din list All files. Deschidei cu browserul utilizat fiierul HTML (File> Open> Browse) pentru a vedea cum arat pagina Web descris n fiierul dumneavoastr. Dup fiecare modificare pe care o facei n fiierul HTML nu uitai s-l salvai, altminteri schimbrile fcute nu se vor reflecta n aspectul final al paginii. Pentru a observa felul cum modificrile pe care le facei n codul HTML schimb aspectul paginii, trebuie s apsai butonul Refresh/Reload al browserului. Pentru a putea s vizualizai cu uurin aspectul paginilor dumneavoastr este bine s avei deschise permanent att editorul de text n care scriei documentul HTML ct i browserul cu care l vizualizai. 6. Convenii de notaie HTML nu este un limbaj case-sensitive, adic nu face distincia ntre literele mici i cele mari(majuscule). Aceasta nseamn c indiferent cum scriem etichetele, cu litere mari sau cu litere mici, ele vor fi corect interpretate de browser. Din acest motiv pe parcursul acestei lucrri vom utiliza o convenie de notaie n care etichetele (tag-urile) HTML sunt scrise cu majuscule iar atributele asociate acestora sunt scrise cu litere mici pentru o mai bun difereniere i evideniere a acestora. Desigur 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. Peste tot n cadrul textului, unde apar etichete, atribute sau valori ale acestora am folosit caractere Courier New pentru a diferenia elementele de limbaj de restul textului. De asemenea, vei observa c, n exemplele prezentate, codul HTML este scris indentat, adic aliniat la diverse nivele. Ca i n cazul etichetelor, acest lucru nu are importan pentru browser. Indentarea v este util doar dumneavoastr, pentru a diferenia i urmri mai uor diversele elemente pe care le includei n document. Totui, dac n cazul etichetelor putei opta pentru orice variant dorii n privina scrierii lor, indentarea este recomandat chiar i programatorilor cu experien. Un cod neindentat este foarte greu de citit i de depanat, n cazul apariiei unor erori. 7. Rezumat World Wide Web este o colecie imens de documente interconectate prin intermediul Internetului, care asigur o interfa hypermedia pentru informaii.

Pentru a transmite i afia documentele, World Wide Web folosete protocolului de comunicaie HTTP. Funcionarea World Wide Web se bazeaz pe relaia client-server. Clienii sunt browserele Web iar serverele sunt serverele Web. Limbajul HTML realizeaz descrierea documentelor Web. Prin intermediul su i se comunic browserului ce elemente fac parte din pagina Web i care este aspectul acestora. Este recomandat crearea unor documente HTML orientate ctre coninut i nu ctre aspect. Pentru a crea documente HTML avei nevoie de un set minimal de instrumente: un editor de text, un browser, un editor grafic i o conexiune la Internet. Capitolul 2 Structura unui document HTML 1. Ce este un document HTML? Un document HTML nu este altceva dect un fiier text care, pe lng textul propriu-zis ce va aprea n pagin, conine i o serie de elemente speciale, denumite etichete, sau marcaje (tags, n limba englez). Not Toate celelalte elemente, de tip multimedia, care nsoesc documentul HTML, cum sunt sunetul, imaginile video, grafica, etc., nu fac parte din structura acestuia. Documentul HTML include referine la aceste elemente, prin intermediul unor etichete speciale, care indic browserului modul n care ele vor fi ncrcate i integrate n pagina Web. Etichetele nu sunt instruciuni n sensul cunoscut al noiunii, ele avnd doar rolul de a comunica browserului semnificaia i modul de afiare al elementelor incluse, privind aspectul textului, al fonturilor (tipurilor de caractere) i n general, al tuturor elementelor prezente n pagin. Etichetele sunt delimitate de perechi de paranteze unghiulare "< >". Unele etichete permit precizarea anumitor caracteristici ale elementului pe care l introduc n document prin intermediul unor perechi caracteristic - valoare numite atribute. Exist atribute specifice doar anumitor elemente i atribute ce sunt utilizate n asociere cu mai multe etichete. O etichet poate avea unul, nici unul, sau mai multe atribute. La rndul lor, atributelor li se pot atribui valori diferite. Att etichetele ct i atributele sunt case-insensitive, ca atare nu va exista nici o diferen de aciune ntre, s spunem, <head>, <Head>, <HEAD>, sau chiar <HeaD>. Ele sunt echivalente. Pe de alt parte, valoarea unui atribut poate fi case-sensitive, cum, n principiu, este cazul locaiilor fiierelor i adreselor URL. Regulile de folosire a etichetelor, atributelor i valorilor acestora reprezint sintaxa limbajului HTML. Similar limbajelor de programare, n HTML respectarea sintaxei limbajului este determinant pentru o bun funcionare a documentului. Spre deosebire de limbajele compilate cum ar fi limbajul C, n care programele trec nainte de execuie prin faza de compilare, etap n care compilatorul semnaleaz eventualele greeli de sintax, la documentele HTML nu se ntmpl acest lucru. Documentele HTML sunt interpretate de browser exact aa cum au fost ele scrise. Prin urmare, orice greeal de sintax se va reflecta direct n aspectul paginii Web, conducnd, de cele mai multe ori, la o funcionare defectuoas a acesteia.

Dac la vizualizarea paginii dumneavoastr cu browserul constatai c anumite secvene ale paginii nu au aspectul ateptat, sau elementele pe care dorii s le introducei nu sunt afiate, revenii asupra documentului HTML i verificai nc o dat sintaxa acestor elemente. HTML lucreaz ntr-o manier foarte uor de neles. n esen trebuie s scriei textul i s precizai elementele care dorii s apar n pagin i s le includei ntre anumite etichete specifice. De exemplu, dac dorim s afim o propoziie cu caractere ngroate (bold), vom marca nceputul acesteia folosind eticheta <B> iar pentru marcarea sfritului propoziiei eticheta </B>. <B> Acesta este un text scris cu litere aldine</B> Atenie! Browserul nu ine cont de numrul spaiilor dintre cuvinte, afiarea fcndu-se invariabil cu un singur spaiu. De asemenea, nu se poate preciza mrimea liniilor de text, acestea fiind de mrimea ferestrei browserului (prin redimensionarea ferestrei se vor rearanja i liniile de text). Dup cum vom vedea mai trziu, se poate preciza totui unde s se termine un anumit rnd i cum se poate alinia un text n pagin. Etichetele HTML sunt de dou tipuri: etichete container (container tags) etichete vide (empty tags) Etichetele container sunt de forma: <TAG> bloc de text </TAG> unde: <TAG> - marcheaz nceputul unui bloc </TAG> - marcheaz sfritul blocului Etichetele specific formatul n care va fi afiat textul coninut ntre eticheta de nceput i cea de final. Majoritatea etichetelor sunt de acest tip. O particularitate a etichetelor container este c, n cazul unora dintre ele, prezena etichetei de nchidere (</TAG>) este opional. Pe parcursul capitolelor care vor urma, vom preciza explicit care anume sunt etichetele care au aceast proprietate. Etichetele vide au forma: <TAG> Acest tip de etichete nu se refer la formatul textelor, ci la introducerea anumitor elemente, ca de exemplu: paragrafe, sfrit de linie, linii orizontale i altele, deci dau indicaii browserului despre ce element este vorba i despre cum s afieze acel element. Etichetele vide nu au etichet de nchidere. 2. Etichete de structur Orice document HTML conine dou seciuni: antetul (head) corpul documentului (body) Structura general a unui document HTML este urmtoarea:

<HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML> Documentul este delimitat de etichetele <HTML> </HTML> i este format din cele dou pri: antet (head) - este delimitat de etichetele <HEAD> </HEAD> i conine titlul documentului precum i alte informaii privind documentul. n antetul documentului se mai insereaz i anumite secvene de program (script-uri), care se execut la ncrcarea documentului n browser. corp (body) - care delimiteaz coninutul propriu-zis al documentului i este inclus ntre etichetele <BODY> </BODY> Iat acum i semnificaia etichetelor menionate i care fac parte din structura oricrui document HTML: <HTML> </HTML> ntre aceste etichete este inclus ntregul document HTML. Ele comunic browserului unde ncepe i unde se termin documentul. <HEAD> </HEAD> ntre aceste etichete sunt incluse titlul, deja menionat, precum i alte informaii despre documentul HTML. Aceste 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. Metatag-urile i antetul n ansamblul su nu sunt vizibile pentru vizitator n pagina Web. Totui, la fel ca ntreg codul HTML al paginii, antetul poate fi vizualizat selectnd din meniul browserului opiunea View > Source. <TITLE> </TITLE> Stabilete titlul documentului HTML. Titlul documentului este deosebit de important deoarece este unul din criteriile folosite de motoarele de cutare pentru indexarea paginii. Prin urmare, strduii-v s gsii un titlu care s descrie ct mai corect i complet coninutul paginii dumneavoastr. Atenie! Eticheta de mai sus nu stabilete titlul care apare n cadrul paginii, ci pe acela care apare obinuit n bara de titlu a browserului. <BODY> </BODY> Conine descrierea textului i elementelor paginii. n corpul documentului se stabilesc, deci, aspectul i coninutul paginii Web. Elementele coninute n aceast seciune sunt vizibile n pagin. Poate nu v vine s credei, dar acum avei deja posibilitatea de a crea o pagin foarte simpl de text. Avei Notepad-ul deschis? Dac nu, deschidei-l acum i scriei exemplul urmtor: Exemplul 2. 1 <HTML> <HEAD> <TITLE>Pagina mea</TITLE>

</HEAD> <BODY> Am reusit sa scriu prima mea pagina de Web. Urmatoarea va fi cu mult mai buna. </BODY> </HTML> Salvai fiierul cu numele primapagina.html. Apoi deschidei browserul pe care l folosii (Internet Explorer sau Netscape), selectai meniul File > Open > Browse, cutai folderul n care ai salvat fiierul, deschidei-l i v vei afla n faa primului dumneavoastr document HTML : Figura 2.1 Dac dorii s scriei un text pe mai multe linii n pagin, va trebui s folosii eticheta <BR> (de la line break), care face trecerea pe o linie noua. Eticheta <BR> este de tip empty, deci nu are etichet de nchidere. ncercai exemplul de mai jos, n care afiarea textului documentului se va face pe dou rnduri. Exemplul 2. 2 <HTML> <HEAD> <TITLE>Pagina mea</TITLE> </HEAD> <BODY> Am reusit sa scriu prima mea pagina de Web.<BR>Urmatoarea va fi cu mult mai buna. </BODY> </HTML> Acum, documentul dumneavoastr va arta ca n Figura 2.2 Deoarece structura documentelor HTML obinuite este n realitate mult mai complex, este recomandat ca, pe msur ce procesul de editare avanseaz, s introducei comentarii n text pentru a face aceast structur ct mai explicit. Comentariile nu sunt vizibile pentru browser, ele servesc creatorului paginii pentru a da un grad crescut de lizibilitate documentului HTML. Comentariile constau n scurte informaii, explicaii la elementele de cod utilizate, etc., fiind deosebit de utile ulterior, mai ales n situaia n care se impune depanarea codului. Comentariile se introduc prin includerea textului ntre etichetele de mai jos. <!-- --> Iat dou exemple: <!- - Acesta este un comentariu introdus in pagina Web - -> <!Acesta este un comentariu pe mai multe randuri care ia sfarsit aici --> 3. Folosirea corect a etichetelor Etichetele container se compun, aa cum am vzut mai devreme, din perechi de etichete: etichet de deschidere <TAG> i de nchidere </TAG>. La construirea unei pagini Web complexe vei fi pus adesea n situaia de a folosi mai multe etichete pentru aceeai secven de text. De pild, vei dori s atribuii unui text dou proprieti: litere aldine sau ngroate ( bold) i text centrat n pagin. Pentru aceasta va trebui s utilizai dou perechi de etichete, care descriu cele dou

proprieti, n mod simultan, metod numit imbricarea etichetelor (nested tags), ca n exemplul de mai jos: <CENTER><B>Text cu aldine si centrat</B></CENTER> Este foarte important ca, n cazul folosirii mai multor etichete container mpreun, ele s fie plasate n mod corect. n aceast situaie, principiul de utilizare este: " Last In - First Out" (LIFO). Acest lucru nseamn c ultima etichet deschis trebuie s fie prima care se nchide. Atenie! Trebuie s fii foarte atent la nchiderea etichetelor, pentru a nu nclca principiul LIFO. n caz contrar, secvena de cod din pagin nu va funciona corect. Iat un exemplu generic de folosire corect a dou etichete: <TAG1><TAG2>Etichete utilizate corect</TAG2></TAG1> i un altul de folosire incorect: <TAG1><TAG2>Etichete utilizate incorect</TAG1></TAG2> 4. Rezumat Un document HTML este un fiier text care conine textul care va aprea n pagin i etichete. Acestea au rolul de a comunica browserului semnificaia i modul de afiare al elementelor incluse ntre ele. Etichetele sunt nsoite de atribute care sunt perechi caracteristic - valoare i care au rolul de a stabili diverse caracteristici ale etichetei. Etichetele pot fi de dou tipuri: etichete container i etichete vide. Etichetele container necesit eticheta de nchidere n timp ce etichetele vide nu trebuie nchise. Un document HTML este format din antet i corp. Etichetele de structur ale documentului sunt: <HTML> </HTML> care delimiteaz documentul <HEAD> <HEAD> care delimiteaz antetul <TITLE> </TITLE> care delimiteaz titlul documentului <BODY> </BODY> care delimiteaz corpul documentului. ntr-un document HTML se pot introduce comentarii prin introducerea textului ntre etichetele <!-- --> Imbricarea etichetelor respect regula LIFO: prima etichet deschis este ultima care se nchide. 5. Test HTML este un acronim de la: a) b) c) Hyper Text Marker Line Hyper Text Markup Language Hyper Technical Method Library

Etichetele HTML sunt incluse ntre:

a) b) c)

[ i ] ( i ) < i >

Etichetele i textul care nu sunt vizibile n pagin sunt plasate n blocul: a) b) c) Body Head Table

Ce fel de program este necesar pentru a scrie HTML? a) b) c) un editor de text un editor grafic HTML Development 4.0

O pagina Web este format din dou pri: a) b) c) Top i Bottom Body i Frameset Head i Body

Care etichete i comunica browserului unde ncepe i unde se termin pagina? a) b) c) <HTML> <HEAD> <BODY>

Care dintre urmtoarele elemente nu poate fi gsit n seciunea Head? a) b) c) Title Table Metatag

n construcia urmtoare: <TITLE>Pagina mea</TITLE> Pagina mea reprezint: a) b) c) Numele fiierului HTML Titlul care va aprea n pagina Web Titlul care va aprea n bara de titlu a ferestrei browserului

Care dintre urmtoarele fiiere nu este un fiier HTML? a) b) c) mypage.htm mypage.txt mypage.html

Iat exemplul de mai jos:

<TAG1> <TAG2>Text</TAG2> <TAG3>Text <TAG4>Text</TAG4> </TAG3>Text </TAG1> Este un exemplu de folosire corect a etichetelor? a) b) c) Nu, deoarece nchiderea etichetelor nu respect regula LIFO. Nu, deoarece nu avem voie s folosim mai mult de dou etichete imbricate Da, deoarece etichetele se nchid corect.

Structura unui document HTML


1. b) 2. c) 3. b) 4. a) 5. c) 6. a) 7. b) 8. c) 9. b) 10. c)

Capitolul 3 Culori Culoarea reprezint un caracteristic extrem de important a unei pagini Web. Utilizat cu grij i msur, ea poate mbunti substanial aspectul paginii, fcnd-o mai lizibil i mai atractiv, iar textul mai uor de parcurs. Pe de alt parte, utilizarea excesiv sau inadecvat a culorilor poate transforma un text 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. Datorit faptului c ea reprezint un atribut al multor elemente ale documentelor Web (text, fundaluri, margini, link-uri), am optat pentru prezentarea detaliat a modului de utilizare al culorilor nc din aceast etap a lucrrii noastre. 1. Sistemul de definire a culorilor Sistemul general utilizat pentru definirea culorilor este RGB prin care sunt specificate pentru fiecare culoare care sunt cantitile de rou (Red), verde (Green) i albastru (Blue) care o compun. n HTML orice culoare este desemnat printr-un cod de 6 cifre hexazecimale, dintre care primele dou reprezint cantitatea de rou, cele dou din mijloc, cantitatea de verde, iar ultimele dou cantitatea de albastru. Sistemul hexazecimal este un sistem de numeraie care folosete 16 cifre, existnd urmtoarea coresponden ntre cifrele hexazecimale i cele zecimale: 0 1 2 3 4 5 6 7 8 9 1 1 1 1 1 1

0 0 1 2 3 4 5 6 7 8 9 A

1 B

2 C

3 D

4 E

5 F

De exemplu, #FF0000 este codul pentru rou. Semnificaia acestui cod este urmtoarea: cantitatea de rou este maxim, iar cantitile de verde i albastru sunt egale cu 0. Codul pentru verde pur este #00FF00 iar pentru albastru este #0000FF. Deoarece uneori definirea culorii prin intermediul codului su hexazecimal este incomod, standardul HTML 3.2 stabilete un set de 16 culori standard. n acest caz, pentru valoarea atributului de culoare se utilizeaz direct numele culorii, ca n exemplul de mai jos, n care se seteaz culoarea magenta pentru linkurile vizitate: <BODY vlink="magenta"> Numele i codul culorilor stabilite n standardul HTML3.2 sunt urmtoarele: Tabelul 3. 1 Nume culoare aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal yellow white Cod hexazecimal #00FFFF #000000 #0000FF #FF00FF #808080 #008000 #00FF00 #800000 #000080 #808000 #800080 #FF0000 #C0C0C0 #008080 #FFFF00 #FFFFFF

Mai trebuie menionat faptul c se pot utiliza, pe lng culori, 100 de nuane de gri ( gray). Ele sunt numerotate de la 1 la 100, "gray 1" fiind nuana cea mai nchis, iar "gray 100" cea mai deschis. n Anexa 3 vei gsi tabelul culorilor nsoite de codurile lor hexazecimale.

2. Corespondena dintre codurile hexazecimal i zecimal Multe dintre editoarele grafice folosesc pentru a defini culorile codul zecimal. Dei se bazeaz i ele pe acelai sistem RGB de definire a culorilor, numerele care stabilesc cantitile celor trei culori sunt specificate n sistemul zecimal. De exemplu, o culoare care are codul hexazecimal #63FF80 va avea codul zecimal 99, 255, 128. Aceast coresponden se realizeaz simplu, trecnd fiecare dintre cele trei numere hexazecimale din codul culorii n sistemul zecimal: 63(16)=99(10) , FF(16)=255(10), 80(16)=128(10) Motivul pentru care trebuie s cunoatei aceast coresponden este acela c pentru a folosi n documentul HTML o culoare al crei cod este dat n sistemul zecimal, aceasta trebuie convertit n cod hexazecimal. Conversia se poate realiza foarte simplu folosind calculatorul din Windows (Start > Accessories > Calculator) care trebuie setat pe opiunea Scientific din meniul View. Vei observa o serie de butoane radio dintre care ne intereseaz dou: Hex i Dec. Nu avei altceva de fcut dect s selectai Dec, s tastai numrul n baza 10 i apoi s selectai opiunea Hex. Rezultatul conversiei va aprea pe ecran. Conversia invers se realizeaz n mod similar. i acum s trecem la lucruri mai atractive i s dm via paginii noastre adugndu-i culori. Vom lua pe rnd atributele etichetei <BODY>. Cu ajutorul lor se pot seta culorile fundalului, textului i linkurilor: bgcolor - culoarea fundalului text - culoarea textului link - culoarea linkurilor vlink - culoarea linkurilor vizitate alink - culoarea linkului activ 3. Culoarea fundalului Pentru a stabili culoarea fundalului unei pagini folosim atributul bgcolor (background color) al etichetei <BODY>, cruia i atribuim o valoare astfel: <BODY bgcolor="#RGB sau nume_culoare"> Se poate folosi drept valoare pentru atributul bgcolor fie codul hexazecimal al culorii fie numele ei. Iat un exemplu de pagin cu fundal verde: Exemplul 3. 1 <HTML> <HEAD> <TITLE>culori1</TITLE> </HEAD> <BODY bgcolor="#00FF00"> <H1 align="center">Pagina cu fundal verde</H1><HR> </BODY> </HTML> Aspectul paginii va fi cel din Figura 3.1.

4. Culoarea textului Pentru a seta culoarea textului din ntreaga pagin se folosete atributul text al etichetei <BODY>, conform sintaxei: <BODY text="#RGB sau nume_culoare"> Dac am stabilit o culoare pentru textul din pagin i dorim s utilizm o alt culoare pentru o anumit seciune a textului (culoarea unui bloc de text), vom folosi o etichet despre care vom vorbi pe larg n capitolul urmtor: eticheta <FONT>. Aceasta este o etichet container care cuprinde ntre etichetele de nceput i de final textul a crui culoare dorim s o modificm. Stabilirea culorii se face folosind atributul color al etichetei conform sintaxei: <FONT color="#RGB sau nume_culoare">Text</FONT> n Exemplul 3.2 culoarea textului este albastru iar anumite cuvinte sunt colorate n rou. Aspectul paginii va fi cel din Figura 3.2. Exemplul 3. 2 <HTML> <HEAD> <TITLE>culori2</TITLE> </HEAD> <BODY bgcolor="#FFFFFF" text="#0000FF"> <H1 align="center">Text albastru si rosu</H1> <HR> Textul din aceasta pagina este albastru cu mici <FONT color="#FF0000"> exceptii</FONT> </BODY> </HTML> 5. Culoarea legturilor n general legturile (links) dintr-o pagin Web au culori prestabilite (default), astfel: blue (albastru) - pentru legturi red (rou) - pentru legtura activa (cea pe care este fixat cursorul mouse-ului, cu butonul stng apsat) purple (violet) - pentru legturile vizitate, cele pe care s-a efectuat cel puin un click Pentru a schimba culorile prestabilite se folosesc urmtoarele atribute ale etichetei <BODY>: link pentru legturi alink pentru legturile active vlink pentru legturile vizitate conform sintaxei: <BODY link="#RGB sau nume_culoare" alink="#RGB sau nume_culoare" vlink="#RGB sau nume_culoare"> Documentul din Exemplul 3.3 creeaz o pagin n care textul este negru iar legturile au culoarea verde, legturile active culoarea albastru i cele vizitate, culoarea rou. n exemplu este folosit eticheta

<A> i atributul sau href, care vor fi prezentate pe larg n capitolul despre legturi. n acest moment singurul lucru care ne intereseaz este cum putem stabili culorile acestora. Exemplul 3. 3 <HTML> <HEAD> <TITLE>culori3</TITLE> </HEAD> <BODY bgcolor="#FFFFFF" text="#000000" link="#00FF00" alink="#0000FF" vlink="#FF0000"> <H1 align="center">Legaturi colorate</H1> <HR> <A href="culori1.html">Legatura catre primul exemplu</A> </BODY> </HTML> Aspectul paginii va fi cel din Figura 3.3. 6. Alegerea culorilor Sunt multe elemente care trebuie luate n considerare la alegerea culorilor pentru o pagin Web. Primul i cel mai important este acela de a face coninutul uor de citit. Aceasta nseamn...ai ghicit! Litere negre pe fond alb. Dei n vestimentaie combinaia de rou cu bleumarin este rafinat, ntr-o pagin Web literele roii pe fond albastru nu arat bine i sunt greu de citit. O alt combinaie nefericit este cea cu fondul negru sau de culoare foarte nchis i textul de culoare alb. S nu uitm nici faptul c toate monitoarele dispun de reglaje ale strlucirii luminoase i ale contrastului pe care utilizatorii le seteaz diferit, n funcie de preferinele personale, de tolerana ochiului, de iluminarea camerei, etc. Pe un monitor cu reglaje medii ale contrastului i strlucirii, un text de culoare roie dispus pe un fundal negru va fi ilizibil, chiar dac la valori maxime ale acestor caracteristici combinaia poate genera efecte interesante. n alegerea culorilor pentru un site este bine s inei seama de cteva elemente de psihologia culorilor, pentru a sublinia astfel mesajul pe care vrei s l transmitei. Iat cteva dintre sentimentele pe care le sugereaz culorile: Rou - agresivitate, pasiune, putere, vitalitate Roz - feminitate, inocen, moliciune Portocaliu - amuzament, veselie, cldur, exuberan Galben - sentimente pozitive i cordialitate Verde - linite, sntate, prospeime Albastru - autoritate, demnitate, securitate, ncredere Violet - sofisticare, spiritualitate, mister Maro - utilitate, legtura cu pmntul, bogie Alb - puritate, ncredere, modernitate, rafinament Gri - sobrietate, autoritate, sim practic Negru - seriozitate, distincie, hotrre Alegerea culorilor pentru site trebuie s fie n concordan cu tema site-ului i s sublinieze mesajul su. Astfel, 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. Alegerea culorilor pentru legturi este, de asemenea, important. Legturile au, n mod prestabilit, anumite culori. Schimbarea acestora, dei posibil, l poate induce n eroare pe vizitator. Ca i n cazul textului, alegei pentru legturi, legturile vizitate i legtura activ culori care s vin n contrast cu culoarea sau imaginea de fundal a paginii. Rmnei consecvent culorilor alese pentru legturi, pe parcursul ntregului site. 7. Culori "sigure" Aa cum era de ateptat, nu toate monitoarele pot reproduce cele 16.777.000 de culori furnizate de codul RGB. Cele realizate cu tehnologii mai vechi, sau cele moderne setate pentru numai 256 de culori pot reproduce corect doar un set limitat de 256 de culori, aa-numit palet Web sau "culorile sigure Web". Culorile "sigure" sunt cele definite prin standardul HTML 3.2 prezentat n tabelul de mai sus sau sunt realizate prin combinaii ale urmtoarelor numere hexazecimale: 00 33 66 99 CC FF Codul hexazecimal variaz ntre #FFFFFF (alb) i #000000 (negru). Un monitor setat s afieze 256 de culori va ncerca afiarea unei culori din afara acestui set prin fenomenul numit "dithering" (alternarea unui pixel de o culoare cu un pixel de alt culoare), ceea ce uneori d rezultate, dar adesea rezultatul e departe de culoarea real. Alteori, 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 Web conine att textul ct i fundalul ambele n culori "nesigure", prin modificarea lor de ctre computerul cititorului, nuanele "aproximate" pot face textul total ilizibil. Pentru a evita astfel de surprize neplcute este suficient s v menine n limita celor 256 de culori "sigure". Desigur, putei folosi o combinaie hexazecimal ciudat, ca aceasta: #12EC8B, dar nu vei avea nici o garanie n privina modului n care va fi afiat aceast culoare n diferite browsere i pe diferite platforme. 8. Rezumat Culorile ntr-un document HTML sunt definite cu ajutorul codului RGB care exprim n sistem hexazecimal cantitatea de rou, verde i albastru prezent n fiecare culoare. Pentru a stabili culorile ntr-o pagin Web se folosesc atributele etichetei <BODY> dup urmtoarea sintax: <BODY bgcolor="#RGB sau nume_culoare" text="#RGB sau nume_culoare" link="#RGB sau nume_culoare" alink="#RGB sau nume_culoare" vlink="#RGB sau nume_culoare">corpul documentului</BODY> Alegerea culorilor pentru o pagin Web trebuie s fie n strns legtur cu mesajul transmis de aceasta i s permit citirea cu uurin a informaiilor prezentate. Pentru a evita afiarea defectuoas a culorilor din pagin este recomandat folosirea culorilor "sigure".

9. Test 1. a) b) c) Sistemul pentru definirea culorilor este: Red, Green, Blue Red, Yellow, Blue White, Black, Gray

Culorile n HTML pot fi specificate folosind: a) b) c) Codul zecimal Codul hexazecimal Codul Morse

Care este cea mai mare cifr n sistemul hexazecimal? a) b) c) 15 F A

O culoare care are n sistemul zecimal codul RGB cu valorile: 46, 250, 34 are codul hexazecimal: a) b) c) #2EFA22 #3CCD45 #66FF90

Pentru a stabili culoarea fundalului paginii folosim: a) b) c) <BODY background="culoare"> <BODY color="culoare"> <BODY bgcolor="culoare">

Setarea culorii pentru tot textul din pagin se face cu: a) b) c) <FONT color="culoare"> <BODY fontcolor="culoare"> <BODY text="culoare">

Cum se poate schimba culoarea unui bloc de text? a) b) c) <COLOR="culoare">text</COLOR> <TEXT color="culoare">text</TEXT> <FONT color="culoare">text</FONT>

Care sunt culorile prestabilite pentru legturi, legturi active i legturi vizitate? a) b) c) albastru, rou, violet albastru, verde, galben negru, albastru, rou

Culoarea legturilor se poate schimba folosind:

a) b) c)

<LINK color="culoare"> <BODY link="culoare"> <BODY linkcolor="culoare">

Atributele link, alink i vlink servesc la: a) b) c) stabilirea legturilor stabilirea culorilor pentru legturi stabilirea culorilor pentru ntreaga pagin

Culori
1. a) 2. b) 3. b) 4. a) 5. c) 6. c) 7. c) 8. a) 9. b) 10. b)

Capitolul 4 Fonturi nainte de a aborda tipurile de caractere care pot fi utilizate n documentele Web, se cuvine menionat un fapt: HTML nu este un limbaj orientat spre aspectul ( layout) paginii, ci spre coninutul acesteia. Importana acestei meniuni rezid n aceea c etichetele HTML nu impun, cum s-ar putea crede, ci "sftuiesc" marea varietate de browsere care proceseaz pagina Web, cum s afieze textul. Ceea ce impun ele cu adevrat este coninutul, textul n sine, nu forma de prezentare. Desigur c nu se poate vorbi de cealalt extrem, a unui arbitrariu absolut, n care fiecare browser va afia textul sub o form absolut imprevizibil. Un text cu o anumit formatare pentru Internet Explorer, s spunem, va fi vizualizat practic identic de toi utilizatorii acestui tip de browser. Exist numeroase etichete care permit formatarea caracterelor i ne ofer posibilitatea de a da textului din pagina Web aspectul dorit. 1. Formatarea caracterelor Eticheta care se folosete pentru a da unui caracter sau unui ir de caractere (unui text) aspectul dorit este eticheta container <FONT> </FONT>. ntre eticheta de nceput i cea de sfrit se insereaz textul sau caracterul ale crui caracteristici dorim s le stabilim. nainte de a discuta despre atributele etichetei <FONT> s luam un exemplu: <FONT size="2" color="red" face="arial">Ion Luca Caragiale </FONT> Efectul liniei de mai sus este afiarea textului "Ion Luca Caragiale" cu fonturi Arial, de culoare roie i de mrime egal cu 2 puncte. S analizm succesiv cele trei atribute ale etichetei <FONT>:

size - dimensiunea textului - poate fi un numr ntre 1 i 7 (dimensiuni absolute), ntre -1 i -3 sau ntre +1 i +4 (dimensiuni relative, adic raportate la dimensiunea deja existent a fontului). Dimensiunea prestabilit (default) a fonturilor este 3. Dac dimensiunile menionate depesc intervalul 1-7, browserul rotunjete automat valorile pentru a le ncadra n acest interval. color - culoarea textului - este culoarea cu care va fi afiat textul prezent ntre etichete (n exemplul nostru, "Ion Luca Caragiale" ). face - tipul de font - determin tipul de font care va fi utilizat la afiarea textului. Tipurile cele mai uzuale sunt: Arial Tahoma Helvetica Times New Roman Courier Verdana Atributul etichetei permite precizarea fie a unui singur tip de font fie a mai multora, separate prin virgul. Precizarea mai multor fonturi ajut n eventualitatea cnd primul tip indicat nu este instalat pe calculatorul celui care viziteaz pagina, i se face ca n exemplul de mai jos. <FONT face="arial, verdana, times new roman"> n aceast situaie browserul va alege singur din list primul tip de font pe care l recunoate, ignorndu-le pe urmtoarele. Atenie! La 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. Din acest motiv, folosirea unor caractere exotice, de efect, poate conduce la un eec n cazul cnd utilizatorul nu are instalat acel font. Din acest motiv este de preferat folosirea unor fonturi cu utilizare larg, cum sunt cele menionate mai sus. n Exemplul 4.1 vom aplica pe rnd fiecare dintre cele trei atribute menionate asupra unui text, aspectul paginii descrise de acest document fiind cel din Figura 4.1. a) Exemplul 4. 1 <HTML> <HEAD> <TITLE>fonturi1</TITLE> </HEAD> <BODY bgcolor="yellow"> <FONT size="5" face="tahoma" color="green">Manual de HTML si design Web</FONT><BR> <FONT size="+3" face="arial" color="red">Manual de HTML si design Web</FONT><BR> <FONT size="-1" face="courier new" color="blue">Manual de HTML si design Web</FONT> </BODY> </HTML> Pentru a stabili aspectul textului unei ntregi pagini Web, putem folosi eticheta <BASEFONT>. Spre deosebire de <FONT> aceasta nu este o etichet container, deoarece efectul ei se refer la tot textul din pagin. Nu se folosete pentru a stabili caracteristicile unui bloc de text.

Este indicat s fie inclus n documentul HTML imediat dup eticheta <BODY>. Atributele etichetei <BASEFONT> sunt aceleai cu cele ale etichetei <FONT>, respectiv: size, color, face. n Exemplul 4.2 vom construi o pagin creia i setm textul cu atributele: face - tip de font Arial, size - dimensiunea fontului 2, color - culoare albastr. O parte din text va avea alt tip de font, alt mrime i culoare, acestea fiind stabilite prin folosirea etichetei <FONT>. b) Exemplul 4. 2 <HTML> <HEAD> <TITLE>fonturi2</TITLE> </HEAD> <BODY bgcolor="white"> <BASEFONT face="arial" color="blue" size="2"> Am ajuns la lectia despre fonturi a <FONT face="arial black" color="red" size="4">Manualului de HTML</FONT> </BODY> </HTML> Dup cum putei observa din Figura 4.2, caracteristicile textului din pagin au fost setate cu ajutorul etichetei <BASEFONT>. Pentru a afia simultan o parte din text ntr-un mod diferit am folosit eticheta <FONT>. Dei eticheta <BASEFONT> face parte din standardul HTML 3.2, atributele sale nu sunt recunoscute de browserele Netscape. Ca urmare, acesta va afia textul utiliznd propriile setri prestabilite (default), ignornd atributele menionate n eticheta <BASEFONT>. Urmtorul exemplu (Exemplul 4.3) afieaz un cuvnt avnd literele de mrimi diferite. Aspectul acestei pagini este cel din Figura 4.3. c) Exemplul 4. 3

<HTML> <HEAD> <TITLE>fonturi3</TITLE> </HEAD> <BODY bgcolor="white"> <BASEFONT face="arial black" color="red"> <FONT size="4">G</FONT> <FONT size="5">R</FONT> <FONT size="6">A</FONT> <FONT size="7">T</FONT> <FONT size="6">U</FONT> <FONT size="5">I</FONT> <FONT size="4">T</FONT> </BODY> </HTML> S trecem n revist, n continuare, alte etichete care schimb aspectul unui caracter sau al unui bloc de text. 2. Accentuarea textului 1. Eticheta <BIG> </BIG> face fonturile mai mari dect dimensiunea curent.

<BIG>Text cu caractere mari</BIG> Text cu caractere mari 2. Eticheta <SMALL> </SMALL> face fonturile mai mici dect dimensiunea curent.

<SMALL>Text cu caractere mici</SMALL> Text cu caractere mici 3. Etichetele <B> </B> (bold) i <STRONG> </STRONG> realizeaz scrierea cu caractere aldine, sau ngroate (bold). <B>Text ingrosat 1</B> Text ingrosat 1 <STRONG>Text ingrosat 2</STRONG> Text ingrosat 2 4. Etichetele <I> </I> (italic) i <EM> </EM> (emphasized)realizeaz scrierea cu caractere italice. <I>Text inclinat 1</I> Text inclinat 1 <EM> Text inclinat 2</EM> Text inclinat 2 5. Etichetele <S> </S> i <STRIKE> </STRIKE> realizeaz scrierea textului tiat de o linie orizontal. <S>Text taiat 1</S> Text taiat 1 <STRIKE>Text taiat 2</STRIKE> Text taiat 2 6. Eticheta <U> </U> (underlined) realizeaz sublinierea textului.

<U>Text subliniat</U> Text subliniat Atenie! Utilizarea textului subliniat trebuie fcut cu grij, ntruct acesta poate fi confundat cu un link. 7. Eticheta <SUP> </SUP> (superscript). Prin intermediul ei se pot insera n document caractere/texte plasate deasupra nivelului liniei de scriere. Apa ingheata la 0 <SUP>0</SUP>C Apa ingheata la 0 0C 8. Eticheta <SUB> </SUB> (subscript). Prin intermediul ei se insereaz texte plasate sub nivelul liniei de scriere.

Coordonatele X<SUB>1</SUB>, Y<SUB>2</SUB> Coordonatele X1, Y2 Este de remarcat faptul c etichetele <BIG> i <SMALL> sunt executate diferit n diverse browsere. Astfel, n Netscape <BIG> face textul mai mare cu un punct iar <SMALL> mai mic cu un punct dect dimensiunea curenta. n Internet Explorer, <BIG> afieaz textul cu fonturi de dimensiune 4 iar <SMALL> cu fonturi de dimensiune 2. Etichetele <BIG> i <SMALL> pot fi repetate pentru a obine un efect mai accentuat. Exemplele urmtoare ilustreaz modul cum pot fi utilizate aceste etichete. d) Exemplul 4. 4 <HTML> <HEAD> <TITLE>fonturi4</TITLE> </HEAD> <BODY> <BASEFONT face="arial" color="blue"> <BIG>Etichete</BIG> care <EM>schimba</EM> aspectul <SMALL>textului</SMALL> </BODY> </HTML> Aspectul paginii este cel din Figura 4.4 e) Exemplul 4. 5 <HTML> <HEAD> <TITLE>fonturi5</TITLE> </HEAD> <BODY> <FONT face="arial" size="5">Acesta este font Arial </FONT><BR> <FONT face="algerian" size="4" color="green">Acesta este font Algerian </FONT><BR> <FONT face="courier" color="blue"><STRONG>Acesta este font Courier </STRONG></FONT><BR> <FONT FACE="vivaldi" size="5" color="gray"><U>Acesta este font Vivaldi </U></FONT><BR> <FONT FACE="garamond"><EM>Acesta este font Garamond </EM></FONT><BR> <FONT FACE="modern" size="7" color="brown"><STRIKE>Acesta este font Modern </STRIKE></FONT><BR> </BODY> </HTML> Pagina arat ca n Figura 4.5 Dup cum ai observat mai sus, exist dou etichete al cror efect este acelai: accentuarea textului fie prin scrierea cu caractere italice fie cu caractere aldine. 3. Etichete logice i etichete fizice Etichetele <B> i <I> se numesc etichete fizice, iar <EM> i <STRONG> etichete logice. Etichetele de titluri de la <H1> la <H6> sunt, de asemenea, etichete logice. Diferena dintre cele dou tipuri de etichete este legat de felul cum sunt ele executate de diversele tipuri de browsere.

Astfel, etichetele fizice impun browserului afiarea n formatul exact, precizat prin intermediul lor. Dac browserul nu suport acest format, etichetele sunt ignorate. Spre deosebire de etichetele fizice, cele logice las browserului libertatea de a alege cel mai bun mod de a ndeplini comanda transmis prin eticheta. De exemplu, efectul etichetei <EM> este, n cele mai multe browsere, scrierea textului cu caractere italice. Totui, dac un anumit tip de browser nu suport acest format de caractere, va accentua totui textul ntr-un alt mod, cel mai bun de care dispune. Alte etichete logice utilizate n documentele HTML sunt: <CITE> </CITE> (citation) Etichet folosit pentru inserarea unui citat. De obicei, citatul este afiat cu caractere italice. <CODE> </CODE> (code) Etichete folosite pentru inserarea n text a unor secvene de cod scrise ntr-un limbaj de programare. n general secvenele de cod sunt afiate cu fonturi Courier. <DFN> </DFN> (definition) Eticheta este folosit pentru a insera n text definiia unor termeni. Este util la crearea indexului sau glosarului unui document. <KBD> </KBD> (keyboard) Aceast etichet logic se folosete pentru a indica un text care urmeaz a fi introdus de la tastatur, ca n urmtorul exemplu: Pentru a parasi programul tastati <KBD>quit</KBD> <SAMP> </SAMP> (sample) Este o etichet logic folosit pentru a insera o mostr de text. <TT> </TT> (teletype) Aceast etichet se folosete pentru a afia textul inclus ntre etichete cu fonturi monospaiate. Tipul de font monospaiat (cum este de exemplu Courier) are proprietatea c fiecrui caracter i se rezerv acelai numr de pixeli pe ecran. Astfel, caracterul "i" va avea alocat tot atta spaiu pe ecran ca i caracterul "W": "Courier" este un font monospaiat. Mai trebuie precizat i faptul c utilizarea unora dintre etichetele de formatare a fonturilor aa cum au fost prezentate ele n acest capitol tinde s fie nlocuit cu foile de stiluri ( Cascade Style Sheets) despre care vom vorbi ntr-un capitol viitor. 4. Rezumat Pentru a stabili aspectul unei anumite secvene de text aceasta este inclus ntre etichetele <FONT> </FONT> conform sintaxei: <FONT size="numar" color="#RGB sau nume_culoare" face="tip_font"> text </FONT> Pentru a seta aspectul textului n toat pagina Web se folosete eticheta <BASEFONT> conform sintaxei: <BASEFONT size="numar" color="#RGB sau nume_culoare" face="tip_font"> Accentuarea textului se poate face folosind diverse etichete pentru scrierea cu caractere aldine, cu caractere italice, cu caractere mai mari sau mai mici dect dimensiunea curent a fonturilor.

Etichetele sunt de dou tipuri: fizice i logice, etichetele fizice fiind orientate ctre aspectul textului iar cele logice ctre semnificaia textului n cadrul documentului. 5. Test 2. a) b) c) Pentru a stabili tipul de font pentru ntreaga pagin Web se folosete eticheta: <DEFAULT> <BASEFONT> <TARGET>

Pentru a stabili tipul de font cu care se face afiarea unui text se folosete atributul: a) b) c) character type face

Unul dintre exemplele urmtoare este incorect. Care? a) b) c) <FONT face="arial"> <FONT face="arial, verdana"> <FONTface="verdana">

Ce realizeaz urmtoarea etichet? <FONT size="+1"> a) b) c) curent. Afieaz textul cu fonturi de mrime 1. Afieaz pe pagin textul "+1". Afieaz textul cu fonturi de dimensiune mai mare cu un punct dect dimensiunea

n afara etichetei <B> ce alt etichet se mai folosete pentru a scrie un text cu caractere aldine? a) b) c) <DARK> <STRONG> <BIG>

Etichetele <I> i <EM> realizeaz: a) b) c) scrierea textului cu caractere italice inserarea unei imagini scrierea textului cu caractere mai mici dect cele curente

Ce este incorect n urmtorul exemplu? <FONT face="arial, verdana, times new roman", size="4"><B>text</FONT></B> a) b) c) Nu se pot preciza mai multe tipuri de fonturi ca valori pentru atributul face. Tipurile specificate nu se pot scrie cu caractere aldine Etichetele <FONT> i <B> nu se nchid corect.

Prin ce se aseamn etichetele <STRONG> i <EM>?

a) b) c)

Sunt amndou etichete logice. Sunt amndou etichete fizice. Servesc amndou la scrierea textului cu caractere italice.

Care este greeala n urmtoarea construcie? <BASEFONT face="arial" size="5">text</BASEFONT> a) b) c) <BASEFONT> nu este o eticheta container <BASEFONT> nu suport atributul face <BASEFONT> nu suport atributul size

Ce efect are urmtoarea etichet? <FONT="arial, verdana, times new roman"> a) b) c) Textul se afieaz cu toate cele trei tipuri de fonturi. Textul se afieaz cu primul tip de font, dintre cele trei, pe care l recunoate browserul. Eticheta nu era nici un efect ntruct este incorect.

Fonturi
1. b) 2. c) 3. c) 4. c) 5. b) 6. a) 7. c) 8. a) 9. a) 10. b)

Capitolul 5 Formatarea textului Etichetele despre care vom vorbi n continuare nu se mai refer la particularitile fonturilor ci la felul n care poate fi amplasat un text n cadrul paginii. nainte de a discuta n amnunt despre etichetele care permit formatarea textului, s facem cteva precizri privind felul cum sunt afiate textele. Dup cum tii, fiierele HTML sunt fiiere text. Aceasta nseamn c atunci cnd salvai fiierul respectiv, el este salvat numai ca text, deci browserul nu poate recunoate i executa dect strict acele comenzi prevzute de etichetele HTML. Din acest motiv, trecerea la un rnd nou, care n editorul de text se realizeaz prin apsarea tastei ENTER, nu este recunoscut de browser. Un alt aspect este plasarea n text a spaiilor. Chiar dac vei introduce spaii suplimentare ntre cuvinte atunci cnd scriei documentul HTML n editorul de text, browserul va afia invariabil un singur spaiu ntre dou cuvinte. Acesta este motivul pentru care fiecare dintre aceste elemente de formatare a textului are o etichet proprie care indic browserului cum anume s fac afiarea.

1. Trecerea la un rnd nou Trecerea la un rnd nou se realizeaz cu ajutorul etichetei <BR> (de la line break). Eticheta <BR> nu este o etichet container. Ea are rolul de a comunica browserului c texul care urmeaz dup etichet va fi afiat pe un rnd nou aa cum rezult din Exemplul 5.1. Exemplul 5. 1 <HTML> <HEAD> <TITLE>text1</TITLE> </HEAD> <BODY> Buna ziua<BR>Ma numesc Lucia<BR>Invat sa construiesc o pagina Web<BR> </BODY> </HTML> Aspectul paginii descrise n exemplul de mai sus este cel din Figura 5.1. Eticheta <BR> admite atributul clear care poate lua valorile left, right sau all. n mod normal, la ntlnirea etichetei <BR> linia curent de text este ntrerupt i se face trecerea la o linie nou, ca i la acionarea tastei Enter ntr-un editor de text. Exist ns situaii cnd dorim ca linia s fie afiat lng un anumit element (o imagine, sau un tabel, de exemplu) care blocheaz partea din stnga sau din dreapta a liniei. n aceste cazuri putem folosi atributul clear al etichetei <BR> ca n Exemplul 5.2. Putei observa efectul atributului clear al etichetei <BR> n Figura 5.2. Exemplul 5. 2 <HTML> <HEAD> <TITLE>text2</TITLE> </HEAD> <BODY> <IMG src="../Imagini/toad.jpg" align="left"> Acest text va fi afisat intre imagine si marginea dreapta a documentului. <BR clear="left">Acest text va fi afisat sub imagine, aliniat stanga. Intre acest text si dreapta imaginii va exista un spatiu gol. </BODY> </HTML> 2. Titlurile (Headings) Utilizarea 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 expune un text lung, lipsit de variaie n aspect. Firete c un asemenea text sfrete prin a obosi cititorul Web, obinuit cu texte scurte i concentrate. Din acest motiv se recomand "spargerea" textelor mai lungi i organizarea lor n secvene mai scurte, marcate de titluri i subtitluri, organizate ierarhic, pe nivele. Titlurile dintr-un document HTML sunt marcate cu ajutorul etichetelor <H1>, <H2>, <H3>, <H4>, <H5>, <H6>. Ele sunt etichete container, deci necesit eticheta corespunztoare de nchidere. Eticheta <H1> definete titlul de dimensiunea maxim, iar <H6> pe cel de dimensiune minim. Atenie!

Dei standardul HTML 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 H1 direct la H5), pentru a evita eventualele probleme la convertirea textului n alte tipuri de fiiere. n Exemplul 5.3 vom folosi toate cele ase etichete pentru titluri pentru a face o comparaie cu dimensiunea standard a textului. Putei observa efectul acestor etichete n Figura 5.3. Exemplul 5. 3 <HTML> <HEAD> <TITLE>text3</TITLE> </HEAD> <BODY> <H1>Titlu H1</H1>Text normal <H2>Titlu H2</H2>Text normal <H3>Titlu H3</H3>Text normal <H4>Titlu H4</H4>Text normal <H5>Titlu H5</H5>Text normal <H6>Titlu H6</H6>Text normal </BODY> </HTML> Este de menionat o proprietate interesant a etichetelor de titluri, i anume aceea c un text scris pe aceeai linie cu un titlu este afiat n pagin pe rndul urmtor titlului, lsndu-se o linie liber ntre titlu i text, dei nu este prezent nici una dintre etichetele <BR> sau <P>. Etichetele de titlu accept atributul align cu valorile left, center i right pentru alinierea titlului blocului de text la stnga (n mod prestabilit), n centru i respectiv la dreapta. Figura 5.4 red aspectul paginii descrie de documentul din Exemplul 5.4 care ilustreaz modul de aliniere al titlurilor. Exemplul 5. 4 <HTML> <HEAD> <TITLE>text4</TITLE> </HEAD> <BODY> <H1 align="center">Titluri</H1><HR> <H1 align="center"> Titlu de marime 1 aliniat in centru </H1> <H2 align="right"> Titlu de marime 2 aliniat la dreapta </H2> <H4> Titlu de marime 4 aliniat la stanga </H4> </BODY> </HTML> 3. Paragrafele Trecerea la un nou paragraf n cadrul textului se realizeaz cu ajutorul etichetei <P> </P>. Aceast etichet comunic browserului s insereze o linie liber n text i s nceap o nou linie. Eticheta <P> este o etichet container dar prezena etichetei de nchidere </P> este opional n anumite

situaii. Dac ea este prezent, indic browserului s insereze o linie liber i dup blocul de text cuprins ntre cele dou etichete. Eticheta <P> admite atributul align cu cele trei valori ale acestuia: left, center i right, care permit alinierea textului la stnga, centrat respectiv la dreapta. Exemplul 5.5 ilustreaz cele trei modaliti de aliniere a textului. Exemplul 5. 5 <HTML> <HEAD> <TITLE>text5</TITLE> </HEAD> <BODY> <H1 align="center">Paragrafe</H1><HR> <P> Acesta este un paragraf aliniat la stanga. <P align="right"> Acesta este un paragraf aliniat la dreapta. <P align="center"> Acesta este un paragraf aliniat la centru. </BODY> </HTML> Din Figura 5.5 care red aspectul paginii descrise n exemplu se poate observa c alinierea la stnga este implicit (nu mai trebuie specificat align="left"). Se mai poate observa c nu a fost folosit eticheta de nchidere a paragrafelor, deoarece la ntlnirea unei noi etichete <P> vechiul paragraf se consider nchis. Totui, prezena sau absena etichetei de nchidere a paragrafului atunci cnd este prezent atributul align trebuie stabilit cu grij, pentru a nu obine rezultate neconforme cu dorinele dumneavoastr. n Exemplul 5.6 dorim s aliniem un nou paragraf n dreapta paginii, iar textul de pe rndul urmtor paragrafului, care este introdus prin eticheta <BR>, s fie scris normal, de la captul din stnga al paginii. Exemplul 5. 6 <HTML> <HEAD> <TITLE>text6</TITLE> </HEAD> <BODY> <H1 align="center">Paragrafe</H1><HR> Acest text este scris normal, incepand e la marginea din stanga. <P align="right">Acest text este aliniat la dreapta <BR>Unde este afisat acest text? </BODY> <HTML> Din Figura 5.6 se poate observa c afiarea nu s-a fcut conform inteniilor noastre. Motivul este faptul c eticheta <P align=right> nu are eticheta de nchidere </P>, i prin urmare efectul su se prelungete pn la ntlnirea unei alte etichete <P>. Dac vei nchide paragraful n mod explicit cu ajutorul etichetei de nchidere, nainte de trecerea la o linie nou, efectul asupra textului va fi cel dorit aa cum rezult din Figura 5.7. Dei aparent etichetele <BR> i <P> au un efect asemntor, i anume trecerea la o linie nou, ele nu sunt executate la fel. <BR> comunic browserului unde se ncheie o linie, n vreme ce <P> i impune s lase o linie liber i s treac la un nou paragraf. Dac folosim atributul align al etichetei

<P> n situaiile cnd dup paragraf este introdus un alt element n pagin este recomandat nchiderea n mod explicit a etichetei respective. 4. Preformatarea textului Aa cum am precizat la nceputul capitolului, atunci cnd editai documentul HTML cu ajutorul unui editor de text, indiferent cte spaii vei lsa ntre cuvinte sau ntre liniile de text, browserul va afia textul invariabil cu un singur spaiu ntre cuvinte i va ajusta lungimea liniilor n funcie de mrimea ferestrei. Cu alte cuvinte, orice spaii sau linii libere suplimentare vor fi ignorate de ctre browser. Aa cum am vzut mai sus, trecerea la o linie nou se realizeaz cu ajutorul etichetei <BR> iar inserarea unei linii libere se face cu ajutorul etichetei <P>. Exist, ns, i o etichet care impune browserului s afieze textul ntocmai cum a fost el formatat n documentul HTML. Este vorba despre eticheta <PRE> </PRE>. Eticheta <PRE> permite preformatarea textului i menine spaierea i alinierea textului aa cum a fost fcut n documentul surs HTML. Eticheta de nchidere </PRE> este obligatorie. Exemplul 5.7 ilustreaz modul cum poate fi folosit eticheta <PRE>. Aspectul paginii descrise n acest document este cel din Figura 5.8. Testai exemplul folosind eticheta <PRE> iar apoi eliminai-o, pentru a observa mai bine efectul su. Exemplul 5. 7 <HTML> <HEAD> <TITLE>text7</TITLE> </HEAD> <BODY> <H1 align="center">Textul preformatat</H1><HR> Acesta este un text normal <P> Orar: Luni 8:00 Romana 9.00 Matematica 10:00 Geografie 11.00 Istorie 12.00 Fizica<P> Acesta este textul de mai sus preformatat <PRE> Orar: Luni 8:00 Romana 9.00 Matematica 10:00 Geografie 11.00 Istorie 12.00 Fizica </PRE> </BODY> </HTML>

5. Centrarea textului Aa cum am vzut mai sus, afiarea textului centrat n pagin se poate face cu ajutorul etichetei <P> avnd atributul align setat la valoarea "center". O alt posibilitate de a realiza acest lucru este de a utiliza o etichet dedicat, incluznd textul ntre etichetele <CENTER> </CENTER>. Eticheta <CENTER> este o etichet container, prezena etichetei de nchidere fiind obligatorie. Exemplul 5.8 realizeaz centrarea unui text. Exemplul 5. 8 <HTML> <HEAD> <TITLE>text8</TITLE> </HEAD> <BODY> <H1 align="center">Centrarea textului </H1><HR> <CENTER> Acesta este un text centrat. Acesta este un text centrat. Acesta este un text centrat. Acesta este un text centrat. Acesta este un text centrat. Acesta este un text centrat. Acesta este un text centrat. Acesta este un text centrat. </CENTER> </BODY> </HTML> Aspectul paginii descrise n exemplul de mai sus este cel din Figura 5.9. 6. Afiarea textului pe o singur linie n cazul cnd se dorete afiarea unui text pe o singur linie, chiar dac acest lucru nseamn depirea marginii ferestrei i derularea acestuia pe orizontal, se include blocul de text ntre etichetele <NOBR> </NOBR>. Aceast etichet mpiedic browserul s limiteze lungimea liniei la dimensiunea ferestrei. Exemplul 5.9 ilustreaz folosirea etichetei <NOBR>, pagina avnd aspectul din Figura 5.10. Exemplul 5. 9 <HTML> <HEAD> <TITLE>text9</TITLE> </HEAD> <BODY> <H1 align="center">Textul pe o singura linie </H1><HR> <NOBR> Acesta este un text care va fi afisat pe o singura linie, chiar daca depaseste dimensiunile unei ferestre obisnuite. Puteti verifica acest fapt prin reducerea dimensiunilor ferestrei browserului. </NOBR> </BODY> </HTML> 7. Blocul <DIV> O alt modalitate de delimitare i de formatare a unui bloc de text este folosirea etichetei container <DIV> </DIV>. Prezena etichetei de nchidere este obligatorie. Eticheta <DIV> realizeaz divizarea unui document HTML n seciuni distincte, diviziune n care pot fi incluse, pe lng text, i alte elemente: legturi, imagini, formulare. Ca i n cazul etichetei pentru

introducerea paragrafelor, eticheta <DIV> admite atributul align, pentru alinierea textului. Valorile posibile ale acestui atribut, deja cunoscute, sunt: left - aliniere la stnga center - aliniere la centru right - aliniere la dreapta Alinierea precizat de atributul align al blocului are efect asupra tuturor elementelor incluse n blocul <DIV>. Blocul <DIV> admite i atributul nowrap, care interzice ntreruperea rndurilor de ctre browser. n documentul descris n Exemplul 5.10 este ilustrat utilizarea acestei etichete. Pagina va avea aspectul redat n Figura 5.11. Exemplul 5. 10 <HTML> <HEAD> <TITLE>text10</TITLE> </HEAD> <BODY> <H1 align="center">Blocul div</H1><HR> Aceasta linie este o linie de text normala. <DIV align="right"> Aceasta este prima sectiune a textului, aliniata dreapta.<BR> </DIV> <DIV align="center"> Aceasta este a doua sectiune a textului, aliniata central.<BR> </DIV> <DIV align="left"> Aceasta este a treia sectiune a textului, aliniata stanga.<BR> </DIV> </BODY> </HTML> 8. Linii orizontale ntr-o pagina Web pot fi inserate linii orizontale care au rolul de a delimita diferitele zone ale paginii sau de a mbunti aspectul ei estetic. Acest lucru se face cu ajutorul etichetei <HR>. Eticheta <HR> nu este o etichet container deci nu exist o etichet de nchidere. Pentru a configura o linie orizontal se utilizeaz urmtoarele atribute ale etichetei <HR>: align - permite alinierea liniei orizontale. Valorile posibile sunt left, center i right width - specific lungimea liniei - lungimea poate fi stabilit n pixeli sau n procente din limea ecranului. size - specific grosimea liniei, exprimat n pixeli color - permite definirea culorii liniei Atributele etichetei <HR> sunt ilustrate n Exemplul 5.11. Exemplul 5. 11 <HTML> <HEAD> <TITLE>text11</TITLE> </HEAD> <BODY>

<H1 align="center"> Linii orizontale </H1> Linie aliniata la stanga, lungime 100%, grosime 2 <HR> Linie aliniata in centru , lungime 50%, grosime 5 pixeli. <HR align="center" width="50%" size="5" color="black"> Linie aliniata la dreapta , lungime 150 de pixeli, grosime 12 pixeli , de culoare rosie. <HR align="right" width=150 size=12 color="red"> </BODY> </HTML> Din Figura 5.12 care red aspectul paginii descrise n exemplul anterior se poate observa c simpla prezen a etichetei <HR> fr nici un fel de atribute duce la afiarea unei linii predefinite, de lungime egal cu 100% din pagin i grosimea egal cu 2 pixeli. Atributul color al etichetei <HR> nu este suportat de browserul Netscape. n exemplul urmtor (Exemplul 5.12) vom ilustra modul n care eticheta <DIV> aliniaz elementele coninute n interiorul su, n cazul nostru text i linii orizontale. Pagina descris n acest exemplu va avea aspectul din Figura 5.13. Exemplul 5. 12 <HTML> <HEAD> <TITLE>text12</TITLE> </HEAD> <BODY> <H1 align="center">Linii orizontale</H1><HR> Linia de mai jos este aliniata la stanga <HR size="3" color="blue" width="40%" align="left"> Liniile de mai jos sunt aliniate la centru cu ajutorul blocului DIV <DIV align="center"> Linii aliniate la centru <HR size="10" color="cyan" width="50%"> <HR size="5" color="navy" width="400"> </DIV> </BODY> <HTML> 9. Inserarea unei adrese potale Dac ntr-o pagin Web trebuie inclus o adres potal, atunci putem folosi eticheta urmtoare: <ADDRESS> </ADDRESS>. Eticheta <ADDRESS> este o etichet logic i are drept efect, n cele mai multe browsere , afiarea textului cu caractere italice. n Exemplul 5.13 este inserat n pagin o adres, aspectul paginii fiind cel din Figura 5.14. Exemplul 5. 13 <HTML> <HEAD> <TITLE>text13</TITLE> </HEAD> <BODY> <H1 align="center"> Adresa </H1><HR> Adresa firmei noastre este <ADDRESS>

GoldenWeb Consult <BR> Str. Paradisului, Nr. 1<BR> Bucuresti </ADDRESS> </BODY> </HTML> 10. Inserarea unui citat Pentru a insera un citat ntr-un text se pot folosi dou etichete, n funcie de dimensiunea citatului. Astfel, dac citatul depete cteva linii, se folosete eticheta <BLOCKQUOTE> </BLOCKQUOTE>. Efectul acestei etichete este afiarea indentat a textului cuprins ntre eticheta de nceput i cea de sfrit (n majoritatea browserelor) sau afiarea acestuia cu caractere italice (rareori). Dac dorim ca ntr-un text s citam un termen, titlul unei lucrri sau s dm o referin, putem include textul respectiv ntre etichetele <CITE> </CITE>. n cele mai multe dintre browsere, textul inclus ntre etichetele <CITE> va fi afiat cu caractere italice. Exemplul 5.14 ilustreaz modul de folosire al celor dou etichete. Pagina descris n exemplu are aspectul din Figura 5.15. Exemplul 5. 14 <HTML> <HEAD> <TITLE>text14</TITLE> </HEAD> <BODY> <H1 align="center">Inserarea unui citat</H1><HR> Textul de mai jos este un citat <BLOCKQUOTE> Probabilitatea ca o felie de paine unsa cu unt sa cada pe covor cu fata unsa in jos este direct proportionala cu valoarea covorului </BLOCKQUOTE> Citatul de mai sus face parte din <CITE>Legile lui Murphy</CITE> </BODY> </HTML> 11. Inserarea caracterelor speciale Dei este impropriu s numim caracterul "blank" 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 & (comanda ampersand). Aa cum tii deja, indiferent cte spaii vom introduce atunci cnd editm documentul HTML, browserul le va ignora i va afia cuvintele cu un singur spaiu ntre ele. Pentru a fora introducerea spaiilor suplimentare se folosete comanda &nbsp; (no break space). Atenie Comanda ncepe cu simbolul & (ampersand) i se termin cu ; (punct i virgul). n Exemplul 5.15 este ilustrat modul cum pot fi spaiate cuvintele folosind comanda &nbsp; Exemplul 5. 15 <HTML>

<HEAD> <TITLE>text15</TITLE> </HEAD> <BODY> <H1 align="center">Inserarea caracterelor speciale</H1><HR> <FONT size="2" face="arial"> Cuvintele&nbsp; &nbsp; &nbsp; din&nbsp; &nbsp; &nbsp; acest&nbsp; &nbsp; &nbsp; text&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. </FONT> </BODY> </HTML> Dup cum observai din Figura 5.16 cuvintele sunt desprite prin trei spaii n loc de unul singur. Putei aduga oricte spaii dorii n acest mod. De asemenea, pentru a indenta un text, putei insera la nceputul fiecrei linii numrul de comenzi &nbsp; egal cu numrul de spaii cu care vrei s indentai textul. Iat mai jos un tabel cu comenzile necesare pentru a insera n text cele mai cunoscute caractere. Tabelul 5. 1 Denumir e caracter Spaiu liber Copyright Trademar k Registere d Mai mic dect Mai mare dect Ampersa nd Ghilimele Cent Un sfert O jumtate Trei sferturi Grade < > & " Reprezen Comand tarea grafic a HTML &nbsp; &copy; &#153; &reg; sau &#174; &lt; &gt; &amp; &quot; &#162 &#188 &#189 &#190 &#176

12. Sugestii privind aspectul textului Aspectul textului ntr-o pagin Web este esenial pentru calitatea acesteia. Un text 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 Web, menite s v ajute la crearea unor texte lizibile, ct mai uor de parcurs de ctre cititori. Nu folosii fonturi de dimensiuni prea mici sau fonturi cu serife, cum este Times New Roman. Dei este tipul cel mai utilizat pentru publicaiile tiprite, textele scrise cu Times New Roman sunt mai greu de citit de pe monitor. Preferai tipurile Arial, Verdana, Helvetica. citit. Nu facei exces de caractere aldine (ngroate, bold). Limitai-v la a accentua cuvinte sau poriuni reduse din text. De asemenea, nu folosii caractere cursive (nclinate, sau italice) n exces. Nu folosii prea multe tipuri de fonturi i nici tipuri de fonturi rare. Folosirea unui mare numr de fonturi de dimensiuni i culori diferite va face ca paginile s arate ncrcate i s fie greu de citit. Folosirea tipurilor de fonturi rare aduce dup sine riscul ca vizitatorul s nu le aib instalate pe computerul propriu, astfel c textul va fi afiat de browser cu fonturile prestabilite. Nu aranjai textul n pagin pe dou coloane. Aceasta este o practic obinuit n ziare i reviste dar nu este potrivit ntr-o pagin Web 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 etichet n scopul pentru care a fost ea definit. Nu folosii etichetele de titlu pentru a accentua anumite pri ale textului care nu sunt titluri. Nu folosii eticheta <ADDRESS> pentru a insera alte texte dect adrese sau eticheta <CITE> pentru a realiza scrierea cu caractere italice a textului. Motoarele de cutare indexeaz paginile Web i n funcie de elementele (etichetele) care sunt incluse n ele iar folosirea lor neadecvat conduce la o indexare eronat a paginii dumneavoastr. Multe motoare de cutare scaneaz pagina n cutarea titlurilor i pe baza lor construiesc o schi a paginii. Dac vei folosi etichetele de titlu pentru a accentua anumite pri ale textului (operaie pe care o putei realiza n mod corect folosind eticheta <FONT>) vei oferi informaii eronate motoarelor de cutare. n acest fel, scad ansele ca paginile dumneavoastr s fie identificate i citite de cei interesai. Atenie! Nu uitai c paginile vor fi publicate pe Web, 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. Rezumat Browserul afieaz textele cu cte un singur spaiu ntre cuvinte i nu recunoate sfritul de linie i nceputul unei linii noi. Elementele de formatare a textului se introduc n documentul HTML prin intermediul unor etichete specifice: Nu folosii numai litere mari (majuscule). Textele scrise cu majuscule sunt mai greu de

trecerea la un rnd nou: eticheta <BR> <BR clear="left, right, all">text introducerea unui titlu: etichetele <H1> - <H6> <Hn align="left, right, center">text</Hn> introducerea unui paragraf: eticheta <P> </P> <P align="left, right, center" nowrap>text</P> preformatarea textului: eticheta <PRE> </PRE> <PRE>text</PRE> centrarea textului: eticheta <CENTER> </CENTER> <CENTER>text</CENTER> afiarea textului pe o singur line: eticheta <NOBR> </NOBR> <NOBR>text</NOBR> crearea unui diviziuni n text: eticheta <DIV> </DIV> <DIV align="left, right, center">text</DIV> inserarea unei linii orizontale: eticheta <HR> <HR size="valoare" width="valoare" color="#RGB sau nume_culoare" align="left, right, center"> inserarea unei adrese: eticheta <ADDRESS> </ADDRESS> <ADDRESS>text</ADDRESS> inserarea unui citat: etichetele <BLOCKQUOTE> </BLOCKQUOTE> i <CITE> </CITE> <BLOCKQUOTE>text</BLOCKQUOTE> <CITE>text</CITE> 14. Test 3. a) b) c) Care este rolul etichetei <BR>? Trecerea la un rnd nou Inserarea unei linii libere n text Inserarea unei linii orizontale inserarea caracterelor speciale prin comanda &;

Pentru ca browserul s afieze textul aa cum a fost el formatat n documentul HTML se folosete eticheta: a) b) c) <P> <PRE> <DIV>

Ce se va afia n urmtorul exemplu? <P>Text1 <P align="right">Text2 a) b) c) Text1 i Text2 vor fi aliniate la dreapta, cu o linie liber ntre ele Text1 va fi aliniat la stnga, Text2 va fi aliniat la dreapta, cu o linie liber ntre ele Text1 i Text2 vor fi scrise pe aceeai linie

Pentru a scrie un titlu de dimensiune maxim folosim eticheta: a) b) c) <H1> <H6> <H7>

Pentru a afia un text pe o singura linie: a) b) c) folosim eticheta <BR> folosim eticheta <NOBR> nu folosim nici o etichet

Care dintre urmtoarele etichete nu realizeaz centrarea textului? a) b) c) <P align="center">Text</P> <CENTER>Text</CENTER> <DIV>Text</DIV>

Ce realizeaz eticheta <ADDRESS>? a) b) c) inserarea unui link inserarea unei adrese de e-mail inserarea unei adrese potale

Pentru a insera ntr-o pagin o linie orizontal standard folosim eticheta: a) b) c) <HR> <HR width="100"> <HR size="1">

Eticheta <BLOCKQUOTE> folosete la: a) b) c) indentarea textului scrierea textului cu caractere italice inserarea unui citat n text

Care dintre aceste afirmaii este fals? a) Toate spaiile i liniile libere introduse n text la editarea documentului HTML sunt afiate ntocmai de browser. b) Un text scris pe aceeai linie cu o etichet de titlu este afiat sub titlu, chiar dac nu este prezent eticheta <BR>. c) Pentru a introduce spaii suplimentare n text se folosete comanda &nbsp;

Formatarea textului
1. a) 2. b) 3. b) 4. a) 5. b) 6. c) 7. c) 8. a) 9. c) 10. a)

Capitolul 6 Legturi (link-uri) Legturile (link-urile) reprezint, poate, partea cea mai important a unei pagini Web. Ele transform un text obinuit n hypertext - un nou tip de text, 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. Adresa URL Pentru a stabili o legtur cu o alt pagin (un alt fiier) trebuie s specificm adresa URL a acestuia. URL este un acronim, de la Uniform Resource Locator, i reprezint adresa de identificare a unei resurse (a unui fiier) aflat pe calculatorul propriu sau pe orice alt calculator din lume conectat la Internet. O adres URL 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. Exist mai multe etichete HTML care folosesc adresa URL drept valoare pentru anumite atribute: etichetele care introduc legturi, imagini sau formulare. Toate acestea folosesc aceeai sintax a adresei URL pentru a specifica locaia unei anumite resurse, indiferent de tipul acesteia. Sintaxa general a unei adrese URL este: schema://server_gazda:port/calea_catre_fisier unde: schema - reprezint unul dintre protocoalele de transfer al informaiilor, cum ar fi HTTP, FTP, Gopher, Telnet, etc. server_gazda - reprezint identificatorul serverului pe care este gzduit fiierul respectiv. Acest identificator poate fi adresa IP a serverului sau numele su. port - reprezint numrul portului de comunicaie prin intermediul cruia browserul se conecteaz la server. Serverele dein mai multe astfel de porturi, fiecare servind unui alt tip de comunicaie: HTTP, FTP, pot electronic, etc. Portul prestabilit n cazul transferului prin HTTP are numrul 80. Numrul portului trebuie precizat numai n cazul cnd acesta este diferit de 80. calea_catre_fisier - reprezint localizarea ierarhic a fiierului n sistemul de directoare de pe server. Aceasta const ntr-unul sau mai multe nume desprite prin caracterul "/" (slash) Iat cteva exemple de adrese URL mpreun cu explicaii referitoare la sintaxa lor: http://www.autor.com/carti.html

n acest exemplu adresa URL indic documentul HTML numit carti.html care se afl directorul rdcin al serverului www.autor.com http://www.autor.com/ Aceast adres indic prima pagin (home page) a aceluiai server. http://www.autor.com:8080/ Exemplul de mai sus indic de asemenea spre prima pagin a serverului www.autor.com, dar specificnd i numrul portului care este diferit de cel prestabilit. http://www.autor.com/carti.html#webdesign n acest exemplu este indicat calea spre documentul HTML carti.html aflat pe acelai server, dar specificndu-se o anumit seciune a acestui document, seciune denumit webdesign. n cazul cnd fiierul spre care este fcut legtura este stocat pe propriul calculator se folosete o adres URL de forma urmtoare: file://server/calea_catre_fisier unde: server - reprezint numele computerului pe care este stocat fiierul (acelai pe care ruleaz browserul). n acest caz, browserul va accesa fiierul folosind facilitile obinuite ale sistemului de operare de pe computerul propriu. calea_catre_fisier - reprezint localizarea fiierului n structura de directoare conform regulilor sistemului de operare Numele computerului personal poate fi nlocuit cu numele generic "localhost". n acest caz, adresa URL poate avea urmtoarea form: file://localhost/calea_catre_fisier De exemplu fiierul culori.html care este salvat n folderul de lucru Work din My Documents pe computerul personal va avea urmtoarea adres URL: file://localhost/C:\My Documents\Work\culori.html Termenul localhost poate fi omis, deoarece este numele prestabilit al computerului propriu. n acest caz este necesar prezena unui caracter "/" suplimentar: file:///C:\My Documents\Work\culori.html n practic, atunci cnd dorim s adresm un fiier aflat pe computerul propriu putem omite prima parte a adresei URL obinnd urmtoarea form: C:\My Documents\Work\culori.html Atenie! Se poate observa c n cazul resurselor stocate pe servere externe, numele directoarelor care fac parte din calea ctre resurs sunt desprite prin caracterul "/" (slash). La fiierele stocate pe computerul propriu, directoarele i subdirectoarele care formeaz calea ctre fiier sunt desprite prin caracterul " \" (backslash). Cele dou moduri de scriere sunt specifice celor dou sisteme de operare: UNIX, respectiv DOS-Windows.

Deoarece marea majoritate a serverelor Web folosesc sistemul de operare UNIX, calea ctre resursele stocate pe ele se scrie respectnd conveniile acestui sistem. Mai mult, aceast convenie s-a extins i la adresele URL referite de pe sisteme Windows. Astfel, dac dorii s adresai un fiier numit foto.jpg aflat pe discul C:, n My Documents, folderul Imagini putei folosi adresa URL: C:/My Documents/Imagini/foto.jpg 2. Adrese absolute i adrese relative Pentru a putea localiza un fiier n structura ierarhic de directoare, n scopul de a stabili o legtur ctre el, se poate folosi adresarea absolut sau adresarea relativ. Adresa absolut a unui fiier conine calea precis i complet ctre fiierul respectiv pornind de la vrful ierarhiei de directoare: C:/Manual HTML/Exemple/culori.html Fiierul culori.html se afl plasat pe discul C:, n directorul Manual HTML, subdirectorul Exemple. Adresa relativ a unui fiier precizeaz poziia acestuia n raport cu documentul HTML din care este apelat. Vom reveni ceva mai jos asupra acestui subiect. 3. Stabilirea legturilor Pentru a insera legturi ntr-un document HTML folosim eticheta <A> </A>. Eticheta <A> este o etichet container, prezena etichetei de nchidere fiind obligatorie. Atributul obligatoriu al etichetei <A> este href (Hypertext Reference) care primete ca valoare adresa URL a fiierului cu care dorim s stabilim legtura. Acest fiier poate fi un document HTML, o imagine sau un fiier de alt tip. Documentul HTML n care este prezent legtura se numete surs iar fiierul ctre care este fcut legtura se numete int. Sintaxa etichetei <A> este urmtoarea: <A href="adresa_URL">text sau imagine</A> ntre etichetele <A> i </A> poate fi plasat un text obinuit sau o imagine. n mod prestabilit textul inclus ntre etichetele <A> este afiat subliniat i de culoare albastr iar imaginile au un chenar de culoare albastr. Folosirea etichetei <A> imbricat cu etichete de formatare a textului, fonturi, liste sau tabele se face plasnd eticheta <A> n interiorul acestora. n acest sens, standardul HTML consider incorect o construcie ca aceasta: <A href="adresa_URL"><FONT face="tip">Legatura</FONT></A> n locul ei vom folosi construcia: <FONT face="tip"><A href="adresa_URL">Legatura</A></FONT> Atenie! Nu este permis imbricarea mai multor etichete <A>. n funcie de localizarea intei (a resursei referite de legtur) putem clasifica legturile astfel: legturi n cadrul aceleiai pagini (ancore)

legturi ctre o pagin aflat n acelai folder legturi ctre o pagin aflat n alt folder legturi ctre pagini externe 4. Ancore - legturi n cadrul aceleiai pagini Pentru a facilita navigarea ntr-o pagin care conine un text de mari dimensiuni se pot insera n acesta anumite puncte de reper ctre care se definesc legturi. Acestea se numesc ancore. Pentru a plasa o ancor sunt necesare dou elemente: 1. Punctul spre care dorim s facem legtura. Acesta 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.) eticheta <A>, nsoit de atributul name care primete ca valoare un nume de identificare atribuit ancorei (de exemplu "nume_ancora" ). Prin urmare, identificarea punctului spre care se face legtura se realizeaz astfel: <A name="nume_ancora"> </A> 2. Legtura propriu-zis, care se definete folosind atributul href al etichetei <A>. n exemplul de mai sus, acesta primete ca valoare "#nume_ancora". Stabilirea legturii se realizeaz dup urmtoarea sintax: <A href="#nume_ancora">text explicativ</A> Textul explicativ va fi afiat n mod diferit, n format hyperlink, subliniat i de culoare prestabilit albastr. n momentul cnd se efectueaz click cu mouse-ul pe text explicativ se realizeaz un salt n cadrul paginii, browserul afind partea din pagin care ncepe de la elementul n dreptul cruia a fost inserat ancora. Atenie! Prezena semnului #, plasat naintea numelui ancorei, este obligatorie. Acesta indic browserului faptul c este vorba despre o legtur intern, n cadrul paginii. n cazul n care semnul este omis, browserul va cuta acest nume n afara paginii, unde, evident, nu l va gsi. Pentru a introduce o legtur ctre o ancor definit n alt document (alt pagin) aflat n acelai director, atributul href primete o valoare de forma: href="nume_fisier.html#nume_ancora". Exemplul 6.1 ilustreaz cele dou situaii. Pentru a exemplifica modul n care poate fi inserat o ancor ntr-un alt document i cum poate fi ea referit, am inserat n documentul text14.html ancora <A name="citat">. f) Exemplul 6. 1 <HTML> <HEAD> <TITLE>legaturi1</TITLE> </HEAD> <BODY> <A name="ancora1"></A> <H1 align="center">Ancore definite in acelasi document</H1><HR>

<BR>A<BR>B<BR>C<BR>D<BR>E <BR>F<BR>G<BR>H<BR>I<BR>J <BR>K<BR>L<BR>M<BR>N<BR>O <BR>P<BR>R<BR>S<BR>T<BR>U <BR>V<BR>W<BR>Z<BR>X<BR> <A href="#ancora1">Sus</A> <BR><BR> <H1 align="center" >Ancore definite in alt document</H1><HR><P> Click <A href="text14.html#citat">AICI </A> pentru a deschide un document situat in alta pagina </BODY> </HTML> Aspectul paginii descrise n acest exemplu este cel din Figura 6.1. Observaie Construciile de mai jos au acelai rol, i anume inserarea unei ancore denumit "ancora1" n punctul din pagin care conine elementul "ELEMENT". <A name="ancora1">ELEMENT</A> <A name="ancora1"></A>ELEMENT n mod normal, eticheta <A> fiind o etichet container, ntre etichetele de deschidere i de nchidere trebuie s figureze un text. Totui, n exemplul de mai sus, dorind s inserm o ancor n dreptul titlului, am folosit cea de-a doua construcie: <A name="ancora1"></A> <H1 align="center">Ancore definite in acelasi document</H1> Motivul este acela c este considerat o practic incorect includerea etichetelor de titlu ntre etichetele <A> i </A>. Se poate utiliza i construcia urmtoare: <H1 align="center"><A name="ancora1">Ancore definite in acelasi document</A></H1> 5. Legtura ctre o pagin aflat n acelai director (folder) Pentru a realiza o legtur ctre o pagin aflat n acelai director se procedeaz astfel: <A href="nume_fisier.html">text explicativ</A> unde: href reprezint atributul care stabilete calea ctre inta cu care se face legtura. Dac fiierul int este n acelai director, atributul primete ca valoare chiar numele fiierului. text explicativ - reprezint textul pe care se face click cu mouse-ul pentru a activa legtura. (De exemplu "Click aici" ). Acest text este afiat diferit fa de restul textului - n general, subliniat i de culoare albastr. n Exemplul 6.2 este realizat o legtur reciproc ntre dou pagini aflate n folderul de lucru Work, pagina avnd aspectul din Figura 6.2.

g) Exemplul 6. 2 <HTML> <HEAD> <TITLE>legaturi2</TITLE> </HEAD> <BODY> <H1>Pagina 1 </H1><HR> <A href="legaturi3.html">Link catre pagina 2 </A> </BODY> </HTML> Salvai acest exemplu cu numele legaturi2.html iar exemplul urmtor (Exemplul 6.3) cu numele legaturi3.html. h) Exemplul 6. 3 <HTML> <HEAD> <TITLE>legaturi3</TITLE> </HEAD> <BODY> <H1>Pagina 2 </H1><HR> <A href="legaturi2.html">Link catre pagina 1 </A> </BODY> </HTML> La fel cum ai procedat i pn acum, deschidei una dintre cele dou pagini cu browserul i testai funcionarea legturii dintre ele. Ambele documente HTML trebuie salvate n acelai folder. Vei observa c atunci cnd v aflai n Pagina 1 i facei click cu mouse-ul pe textul Link catre Pagina 2 se va deschide cel de-al doilea document HTML i invers, legtura dintre cele dou pagini fiind astfel reciproc. Atenie! Numele fiierelor care reprezint valori ale atributului href sunt case sensitive. Acelai lucru se ntmpl i cu textul care desemneaz valorile atributului name. Aceasta nseamn c fiierul legaturi5.html este diferit de fiierul Legaturi5.html, iar ancora <A name="ancora1"> este diferit de <A name="Ancora1"> Pentru a evita greelile, este recomandat s v denumii toate fiierele sau numele pentru ancore cu litere mici. 6. Legtura ctre o pagin localizat n alt director (folder) Dac 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. Adresarea absolut se realizeaz preciznd calea (path) complet, pornind de la directorul rdcin, prin care se poate ajunge la fiierul de care vrem s legm pagina. De exemplu, dac fiierul culori1.html se afl pe discul C:,n folderul My Documents, n folderul Work, o legtur ctre el se va face n modul urmtor: <A href="C:/My Documents/Work/culori1.html>Link</A>

Adresarea relativ precizeaz calea ctre documentul cu care facem legtura pornind de la documentul n care ne aflm. Pentru a urca un nivel n structura de directoare se folosete irul de caractere "../ " Exemplu S presupunem c ne aflm ntr-un document HTML numit legaturi2.html plasat n folderul de lucru Work. n afar de folderul Work n care lucrm, n My Documents se mai afl un folder, numit Imagini, ca n structura prezentat n Schema 6.1.

Schema 6.1

C: C: My Documents Work

e legaturi2.html
Imagini trandafir.gif

Dorim s realizm o legtur cu un fiier numit trandafir.gif din folderul Imagini. n acest caz, eticheta <A>, plasat n documentul legaturi2.html, va avea urmtoarea form: <A href="../Imagini/trandafir.gif">Deschide imaginea</A> Semnificaia este urmtoarea: Prin folosirea irului de caractere "../" (punct punct slash) se urc un nivel n ierarhia de directoare, n raport cu directorul curent. Prin urmare, ntruct folderul curent, n care se afl pagina de pornire este C:/My Documents/Work, prin utilizarea irului de caractere "../" se ajunge n folderul printe, care este C:/My Documents. De aici se continu calea n folderul Imagini, dup care se specific numele fiierului din acest folder cu care vrem s stabilim legtura. Exemplu S presupunem c ne aflm n documentul legaturi2.html poziionat ca n Schema 6.2.

Schema 6.2

C: C: My Documents Manual HTML Exemple Legaturi

e legaturi2.html
Dorim s stabilim o legtur cu un fiier numit text2.html care se afl n directorul Exemple (directorul printe al folderului nostru, Legaturi). Atunci referirea se va face astfel: <A href="../text2.html">Link la text</A> Am urcat un nivel n ierarhie ajungnd n directorul Exemple i am specificat numele fiierului cu care dorim s facem legtura. Dac fiierul text2.html se afl cu dou nivele mai sus fa de folderul n care lucrm, adic dac se afl n folderul Manual HTML, atunci adresarea se face astfel: <A href="../../text2.html">Link la text</A> n general, de cte ori este posibil, este de preferat s folosii adresarea relativ, pentru ca documentele HTML s fie portabile (mutarea lor s nu invalideze legturile stabilite ntre diverse documente). 7. Legtura ctre pagini externe O legtur ctre o pagina extern se realizeaz simplu, prin utilizarea etichetei <A> </A>, specificnd adresa URL a paginii ca valoare a atributului href astfel: href="http://URL_pagina" Reamintim c specificarea adresei URL se poate face fie folosind numele serverului pe care este stocat pagina fie adresa IP a acestuia. Evident, pentru ca link-ul s funcioneze, trebuie ca utilizatorul s fie conectat la Internet (lucru valabil pentru toate legturile externe).

n Exemplul 6.4 este stabilit o legtur ctre pagina de start Yahoo. i) Exemplul 6. 4 <HTML> <HEAD> <TITLE>legaturi4</TITLE> </HEAD> <BODY> <H1 align="center">Link catre Yahoo.com</H1><HR> <A href="http://www.yahoo.com"> Yahoo!</A> </BODY> </HTML> Aspectul paginii este cel din Figura 6.3. Un atribut util al etichetei <A> este title. Acesta determin apariia unei mici ferestre (tool tip) n pagina Web 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. Exemplul 6.5 ilustreaz utilitatea atributului title, aa cum reiese din Figura 6.4. j) Exemplul 6. 5 <HTML> <HEAD> <TITLE>legaturi5</TITLE> </HEAD> <BODY> <H1 align="center">Atributul title</H1><HR> <A href="http://www.google.com" title="Legatura catre Google.com">Google</A> </BODY> </HTML> 8. Alegerea culorilor pentru legturi Am mai discutat despre acest subiect i la capitolul despre culori. n mod prestabilit ( default) se utilizeaz trei culori pentru legturi: culoare pentru legturile nevizitate (nu s-a efectuat nici un click pe ele) - albastru culoare pentru legturile vizitate (s-a efectuat cel puin un click pe ele) - violet culoare pentru legturile active (deasupra crora se afl mouse-ul la un moment dat, dar nc nu s-a efectuat click) - rou Pentru a modifica dup preferine aceste culori se folosesc cele trei atribute ale etichetei <BODY>: link pentru legturile nevizitate; vlink pentru legturile vizitate; alink pentru legturile active. Valorile pe care le pot lua aceste atribute sunt culori definite prin nume sau conform codului hexazecimal. Exemplul 6.6 ilustreaz modul cum pot fi modificate culorile legturilor, aa cum se poate observa din Figura 6.5 care red aspectul paginii descrise n exemplu. k) Exemplul 6. 6

<HTML> <HEAD> <TITLE>legaturi6</TITLE> </HEAD> <BODY link="yellow" vlink="green" alink="magenta"> <H1 align="center">Setarea culorilor pentru link-uri</H1><HR> <BR>galben pentru legaturi, verde pentru legaturi vizitate si magenta pentru legaturi active<BR> <A href="legaturi2.html">Link catre pagina 1 </A><BR> <A href="legaturi3.html">Link catre pagina 2 </A> </BODY> </HTML> 9. Utilizarea potei electronice (e-mail) ntr-o pagin Web se pot afla legturi care permit lansarea n execuie a aplicaiei de expediere a mesajelor electronice a celui care viziteaz pagina. Fcnd click pe textul care nsoete legtura, programul de pota electronic al vizitatorului paginii se va deschide automat, avnd cmpul adresei destinatarului, "To:" deja completat cu adresa de mail specificat n pagin. Pentru a realiza acest lucru se folosete comanda mailto: atributul href primind o valoare ca mai jos: <A href="mailto:adresa_e-mail"> Dac pagina este vizualizat cu browserul Internet Explorer iar vizitatorul are instalat un e-mail manager, cum sunt de pild aplicaiile Microsoft Outlook sau Outlook Expres, activarea legturii va determina deschiderea unuia dintre aceste programe. n cazul n care managerul de e-mail default este de alt tip dect aplicaia Microsoft, (Eudora, de exemplu) aceasta va porni de asemenea automat, cu o nou pagin Send i cu adresa destinatarului pre-completat. Dac pagina este vizualizat n Netscape, se va deschide programul de pot electronic ncorporat n browser. n exemplul urmtor (Exemplul 6.7), n momentul cnd vizitatorul paginii face click pe textul "Trimitei 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 autor@domeniu.com aa cum rezult din Figura 6.6. l) Exemplul 6. 7 <HTML> <HEAD> <TITLE>legaturi7</TITLE> </HEAD> <BODY> <H1 align="center">Expediere de mesaje electronice </H1><HR> <A href="mailto:autor@domeniu.com" title="adresa mea de mail"> Trimiteti un mesaj </A> </BODY> </HTML> 10. Legturi ctre fiiere oarecare O pagin Web poate conine legturi nu doar ctre alte fiiere HTML, dar i ctre fiiere de orice alt tip, aflate pe calculatorul propriu sau oriunde pe Web. Ca i n cazul legturilor cu alte pagini (documente HTML) vom folosi eticheta <A> </A>, astfel:

<A href="URL_fisier_destinatie">text explicativ<A> Nefiind vorba despre un fiier HTML, browserul nu va putea s l proceseze, astfel c va activa procesul de transfer sau de descrcare (download), urmnd ca, dup transferul integral al fiierului, utilizatorul s l deschid cu un program adecvat. n Exemplul 6.8, atunci cnd se efectueaz click pe legtur se deschide caseta de dialog File download care permite: salvarea fiierului pe disc sau deschiderea fiierului n locaia curent m) Exemplul 6. 8 <HTML> <HEAD> <TITLE>legaturi8</TITLE> </HEAD> <BODY> <H1 align="center">Legaturi catre fisiere oarecare</H1><HR> <A href="html.zip"> Link catre fisierul download.zip </A> </BODY> </HTML> Figura 6.7 red efectul activrii unei legturi ctre un fiier oarecare. 11. Deschiderea paginilor referite printr-o legtur Pagina nou, apelat prin activarea unei legturi se poate deschide n dou moduri, n raport cu pagina surs: n aceeai fereastr ntr-o fereastr nou n mod prestabilit, legturile deschid pagina pe care o refer n fereastra curent. Aceasta nseamn c dac vei face click pe un link, noua pagin se va ncrca n locul paginii deja deschise (n aceeai instan a browserului). Pentru a reveni la pagina anterioar trebuie s apsai butonul Back al browserului. Acest comportament se poate schimba cu ajutorul valorilor atributului target, asupra cruia vom reveni la capitolul Cadre. Vom meniona aici doar dou dintre aceste valori, corespunztoare celor dou situaii amintite. Pentru ca pagina apelat s se deschid ntr-o fereastr nou, se utilizeaz sintaxa generic de mai jos, n care atributul target are valoarea "_blank": <A href="adresa_URL" target="_ blank">text explicativ</A> Pentru ca pagina referit s se deschid n aceeai fereastr cu pagina surs, atributului i se asociaz valoarea "_self": <A href="adresa_URL" target="_self">text explicativ</A> Figura 6.8 red modul n care se deschide o pagin ntr-o nou fereastr, aa cum este precizat n Exemplul 6.9.

n) Exemplul 6. 9 <HTML> <HEAD> <TITLE>legaturi9</TITLE> </HEAD> <BODY> <H1 align="center">Deschiderea paginii in alta fereastra</H1> <HR> Pagina de mai jos se va deschide intr-o fereastra noua <P> <A href="tabel culori.html" target="_blank">Tabelul culorilor</A> </BODY> </HTML> 12. Crearea unei bare secundare de navigare n foarte multe site-uri ai observat, probabil, existena, n partea de jos a paginii, a unui bloc de text care conine legturi ctre paginile care compun site-ul, legturile fiind delimitate de mici linii verticale, ca n exemplul de mai jos: |Culori| |Fonturi| |Blocuri de text| Utilitatea 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 link-urile de pe bara de navigare superioar nu mai sunt accesibile. O astfel de bar secundar de navigare se poate realiza procednd ca n Exemplul 6.10. Evident, legturile vor face referire la fiierele HTML dorite de dumneavoastr. O pagin care conine o astfel de bar de navigare va avea aspectul din Figura 6.9. o) Exemplul 6. 10 <HTML> <HEAD> <TITLE>legaturi10</TITLE> </HEAD> <BODY> <H1 align="center">Bara de navigare</H1><HR> <H4 align="center"> <A href="culori1.html">|Culori|</A> <A href="fonturi1.html">|Fonturi|</A> <A href="text1.html">|Formatarea textului|</A> </H4> </BODY> </HTML> Bara vertical inserat ntre textele care trimit la paginile respective este de obicei plasat pe tastatur pe aceeai tast cu caracterul "\" ( backslash). Dac dorii ca bara s fac parte din textul activ, o vei insera ntre etichetele <A> i </A>, altminteri ea trebuie plasat n afara acestora, astfel: |<A href="culori1.html">Culori</A>| 13. Rezumat

Adresa URL 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. Legturile se introduc ntr-un document HTML prin intermediul etichetei container <A> </A> conform urmtoarei sintaxe generale: <A href="adresa_URL" name="nume" title="text" target="tinta">text sau imagine</A> n funcie de locul unde este plasat documentul referit exist mai multe tipuri de legturi: Legturi n cadrul aceleiai pagini (legturi interne, ancore). Pentru a crea o legtur intern sunt necesari doi pai: definirea numelui ancorei i stabilirea legturii . Legturi cu pagini aflate n acelai director. Pentru a stabili o legtur cu o pagin aflat n acelai director se specific drept valoare a atributului href chiar numele fiierului HTML. Legturi cu pagini aflate n alt director. Pentru a stabili locaia documentului cu care facem legtura se poate folosi adresarea relativ (recomandat) sau adresarea absolut. Legturile externe. n cazul legturilor externe, atributul href primete ca valoare adresa URL a paginii respective. Se pot stabili i legturi ctre fiiere oarecare (nu neaprat documente HTML). La activarea unei astfel de legturi se deschide fereastra de download a sistemului. Cu ajutorul comenzii mailto: se lanseaz automat n execuie aplicaia de pot electronic a vizitatorului paginii. 14. Test 4. a) b) c) Care dintre urmtoarele afirmaii este fals: Eticheta <A> servete la stabilirea unei legturi n cadrul aceleiai pagini Eticheta <A> servete la stabilirea unei legturi ctre un fiier aflat pe acelai calculator Eticheta <A> servete la scrierea textului cu caractere Arial.

Pentru a preciza numele fiierului spre care se face legtura se folosete atributul: a) b) c) name href file

Care este greeala din urmtoarea construcie? <H2><A name="#gr">Greseala</A><H2> a) Nu este nici o greeala. b) Ar fi trebuit formulat: <H2><A name="gr">Greseala</A></H2> c) Ar fi trebuit formulat: <A name="#gr"></A><H2>Greseala</H2>

Ce realizeaz exemplul urmtor? <A name="sectiunea1">Sectiunea 1</A> a) b) c) Insereaz o ancor n pagin i definete numele ei. Stabilete o legtur n cadrul paginii. Stabilete o legtura la fiierul sectiunea1.html.

Fiierul contact.html, referit n legtura de mai jos: <A href="../contact.html">Contact</A> este localizat n: a) b) c) 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 ancor: <A name="fundal"></A> n acest caz, construcia corect pentru a face legtura spre ea din cadrul unui alt document aflat n acelai director este: a) b) c) <A href="#fundal">Background</A> <A href="culori.html_fundal">Background</A> <A href="culori.html#fundal>Background</A>

Care este aspectul unei legturi ntr-un text, n mod prestabilit (default)? a) b) c) de culoare albastr i subliniat de culoare roie subliniat

Care dintre urmtoarele afirmaii este fals? a) b) c) Nu este permis imbricarea mai multor etichete <A>. Nu este permis schimbarea culorilor legturilor. Nu este permis referina la alte fiiere dect fiierele HTML.

Pentru a stabili o legtura cu site-ul extern www.books.com folosim construcia: a) b) c) <A href="http://www.books.com"> <A href="file://www.books.com"> <A href="books.com">

Fie urmtoarea etichet inserat n pagin: <A href="mailto:utilizator@domeniu.com>Send mail</A> Dac se execut click pe textul "Send mail":

a) b) c)

Se deschide pagina www.domeniu.com. Se deschide programul de mail al vizitatorului paginii. Se deschide csua de mail cu adresa specificat.

Legturi
1. c) 2. b) 3. b) 4. a) 5. b) 6. c) 7. a) 8. b) 9. a) 10. b)

Capitolul 7 Imagini i elemente multimedia Imaginile i elementele multimedia constituie, fr ndoial, o latur interesant i spectaculoas a oricrei pagini de Web. Putei include n paginile dumneavoastr fotografii, imagini animate, sunete sau imagini video. Atunci cnd sunt folosite n mod judicios, aceste elemente pot mbogi coninutul paginilor Web, oferindu-le un aspect atractiv i profesional. Pe de alt parte, folosirea lor n exces poate da paginilor un aspect ncrcat i confuz i poate conduce la mrirea considerabil a timpului de ncrcare al paginii. 1. Formatele fiierelor grafice Imaginile sunt stocate n fiiere cu diverse formate, cele mai folosite pe Web fiind, aa cum era firesc, cele care confer un raport optim ntre calitatea imaginii i dimensiunile fiierului. Aceast opiune este determinat de faptul c majoritatea utilizatorilor Internetului dispun de conexiuni telefonice dial-up, cu viteze destul de mici, astfel c timpul de ncrcare al fiierelor, care depinde de dimensiunea acestora, devine un factor determinant. Dou dintre cele mai utilizate tipuri de fiiere grafice sunt JPEG (Joint Photographic Experts Group) i GIF (Graphics Interchange Format). Formatul GIF Formatul GIF (.gif) folosete 256 de culori i este ideal pentru icon-uri, ilustraii i animaie. Acest format utilizeaz o tehnologie 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 GIF suport efecte de transparen, ntreesere i animaie, asupra crora vom reveni pe larg n capitolul Elemente avansate de grafic. Deoarece majoritatea browserelor recunosc formatul GIF, acesta a devenit cel mai frecvent utilizat n paginile Web. Poate fi folosit pentru a include imagini direct n pagini (imagini in-line) precum i pentru a referi imaginile prin intermediul unor legturi externe.

Totui, datorit numrului redus de culori, formatul GIF nu este potrivit pentru fotografii sau imagini de calitate nalt. Pentru acest tip de imagini, cel mai adecvat este formatul JPEG. Formatul JPEG Formatul JPEG (.jpg), pe de alt parte, suport un numr mult mai mare de culori (aproximativ 16 milioane). Dac dorii s folosii imagini fotografice, formatul JPEG este recomandat, datorit calitii superioare a imaginii. Dimensiunile unui fiier JPEG nu depind de numrul de culori ci de gradul de comprimare a imaginii. Gradul de comprimare al formatului JPEG este mai ridicat dect cel al formatului GIF. Nu este neobinuit, de exemplu, ca un fiier GIF care are 200 de Kb s fie comprimat ca fiier JPEG pn la dimensiunea de 30 de Kb. Pentru a realiza un grad att de nalt de comprimare a imaginilor, formatul JPEG pierde anumite informaii din imaginea original. Cu toate c la decomprimare imaginea JPEG nu va fi absolut identic cu imaginea original, diferenele vor fi de cele mai multe ori inobservabile. Formatul JPEG este potrivit pentru imaginile fotografice, dar el nu este adecvat pentru ilustraii, desene sau imagini de dimensiuni reduse. Algoritmii folosii pentru comprimarea i decomprimarea imaginii altereaz n mod notabil zonele de mari dimensiuni colorate cu o singur nuan. Din acest motiv, atunci cnd dorii s includei n pagin un desen sau o ilustraie care folosete un numr redus de culori, formatul GIF este cel mai potrivit. 2. Cteva metode de obinere a imaginilor Avei la ndemn diverse moduri n care putei crea sau procura imagini pe care s le includei n paginile dumneavoastr: Crearea imaginilor cu ajutorul unui program de grafic - cele mai performante sunt Adobe Photoshop i CorelDraw. Scanarea fotografiilor realizate cu aparate foto tradiionale i, eventual, prelucrarea lor ulterioar cu editoare grafice. Folosirea aparatelor de fotografiat digitale - dei sunt nite echipamente 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 hard-disk, i care se pot utiliza ca atare sau dup o prelucrare grafic minim. Preluarea imaginilor de pe Web. Numrul site-urilor care ofer colecii de imagini gratuite i care pot fi utilizate liber este imens. Totui, 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. Pentru a prelua o imagine de pe Web trebuie s o salvai pe hard-diskul dumneavoastr. Putei realiza acest lucru astfel: plasai cursorul pe imaginea respectiv i apsai butonul drept al mouse-ului selectai din meniul care se deschide Save Image As... n fereastra de dialog selectai folderul de destinaie i numele fiierului apsai butonul Save

Este util s v creai unul sau mai multe foldere dedicate imaginilor, organizate pe tipuri (icon, fundaluri, butoane, imagini propriu-zise, etc.), uneori alctuind adevrate biblioteci, n care s pstrai

toate imaginile pe care intenionai s le folosii n paginile dumneavoastr. De asemenea, de mare utilitate sunt aplicaiile de gestionare a imaginilor, cum este de exemplu cunoscutul ACDSee. Atenie! Dac imaginea nu este salvat n acelai folder n care se afl documentul HTML 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. Inserarea unei imagini Pentru a insera o imagine n cadrul unei pagini (o imagine in-line), se utilizeaz eticheta <IMG> (de la image). Eticheta <IMG> nu este o etichet container, prin urmare nu necesit o etichet corespunztoare de nchidere. Pentru a putea identifica imaginea care va fi inserat, se utilizeaz atributul src (source) al etichetei <IMG>. Atributul src i comunica browserului numele i locaia imaginii care urmeaz s fie inserat. Valoarea acestui atribut este adresa URL a imaginii respective. Dac imaginea se afl n acelai director cu fiierul HTML care face referire la imagine, atunci adresa URL a imaginii este formata numai din numele fiierului, inclusiv extensia. <IMG src="imagine.extensie"> Dac imaginea se afla ntr-un alt director, URL-ul imaginii trebuie specificat fie prin adresarea absolut fie, preferabil, prin cea relativ. Exemplul 7.1 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 Imagini. Figura 7.1 red aspectul paginii descrise n exemplu. Exemplul 7. 1 <HTML> <HEAD> <TITLE>imagini1</TITLE> </HEAD> <BODY> <H1 align="center">Imagini in pagina</H1><HR> Imagine aflata in acelasi folder<P> <IMG src="tiger.gif" border="5"><P> Imagine aflata in folderul Imagini<P> <IMG src="../Imagini/bernese.jpg" border="1" > </BODY> </HTML> n acest exemplu este prezent i atributul border al etichetei <IMG>. Acesta este folosit pentru a plasa un chenar n jurul imaginii. Valoarea atributului border este numrul de pixeli care reprezint grosimea chenarului din jurul imaginii. Absena atributului sau setarea la valoarea "0" face ca acest chenar s nu fie prezent. Un alt atribut util asociat etichetei <IMG> este alt. Acest atribut permite afiarea unui text explicativ n spaiul n care va fi afiat imaginea n pagin. n Exemplul 7.2 este ilustrat utilitatea atributului alt. Exemplul 7. 2

<HTML> <HEAD> <TITLE>imagini2</TITLE> </HEAD> <BODY> <H1 align="center"> Atributul alt </H1><HR> Acesta este un...<BR> <IMG src="../Imagini/orangerose" alt="trandafir"> </BODY> </HTML> Dup cum putei observa din Figura 7.2 imaginea pe care am inclus-o n document nu este afiat. Motivul este c am omis intenionat extensia .gif a fiierului pentru a exemplifica utilitatea atributului alt. Prin urmare, dac dintr-un motiv oarecare, imaginea nu se ncarc n pagin, se ncarc mai greu, sau este vizualizat cu un browser care nu suport grafica, n zona rezervat imaginii va fi afiat textul specificat ca valoare a atributului alt. De asemenea, textul specificat ca valoare pentru atributul alt va fi afiat i n cadrul unei mici ferestre care se deschide n momentul cnd cursorul mouse-ului este meninut deasupra imaginii. Figura 7.3 red aspectul paginii n cazul cnd atributul src are valoarea corect: "orangerose.gif". Un 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. Astfel, el are posibilitatea de a atepta ncrcarea complet a imaginii sau de a trece la alt pagin. 4. Dimensionarea imaginii Dimensionarea imaginii se realizeaz cu ajutorul atributelor width - prin care se stabilete limea imaginii i height - prin care se stabilete nlimea imaginii. n Exemplul 7.3 sunt precizate i dimensiunile imaginii incluse n document. Se observ c dimensionarea imaginilor se face n pixeli. Este, desigur, posibil, ca dimensionarea s se fac n procente, ca i la liniile orizontale, de exemplu. Totui, n afara unor cazuri speciale, aceasta este considerat o practic greit, deoarece browserul va redimensiona imaginea iar rezultatele vor fi de calitate slab. Exemplul 7. 3 <HTML> <HEAD> <TITLE>imagini3</TITLE> </HEAD> <BODY> <H1 align="center">Dimensionarea imaginilor</H1><HR> <IMG src="tiger.gif" width="350" height="250"><P> </BODY> </HTML> 6. Observnd Figura 7.4 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. Dimensiunile originale ale imaginii tiger.gif, determinate cu ajutorul unui editor grafic, sunt: lime=200 pixeli, nlime=125 pixeli. Dac dimensiunile imaginii n pagin sunt setate la valori considerabil mai mari dect dimensiunile imaginii originale calitatea imaginii incluse n pagin va avea de suferit. Concluzia care

se impune este c dimensionarea imaginilor din pagin trebuie s se fac la valori ct mai apropiate de dimensiunile iniiale ale imaginilor. V putei ntreba atunci, de ce mai este necesar includerea atributelor de dimensionare a imaginii. Nu numai c este necesar, dar este considerat o practic defectuoas absena lor din cadrul etichetei <IMG>. Motivul este acela c includerea dimensiunilor imaginii ofer browserului posibilitatea de a rezerva spaiu pentru imagine i de a ncepe ncrcarea textului simultan cu ncrcarea imaginii. Dac atributele de dimensionare nu sunt prezente, browserul va efectua nite pai suplimentari pentru a calcula spaiul din pagin necesar afirii imaginii. Din acest motiv afiarea textului 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 textul i muli vizitatori ai paginii nu vor atepta suficient pentru ca ntreaga pagin (imagini i text) s fie ncrcat. 5. Alinierea imaginii i a textului Alinierea unei imagini n raport cu textul din pagin se realizeaz prin intermediul atributului align, care poate lua urmtoarele valori: left - aliniere la stnga; textul este dispus n partea dreapt a imaginii ncadrnd imaginea right - aliniere la dreapta; textul este dispus n partea stnga a imaginii ncadrnd imaginea top - aliniere deasupra; partea de sus a imaginii se aliniaz cu prima linie a textului ce precede imaginea middle - aliniere la mijloc; mijlocul imaginii se aliniaz cu prima linie a textului ce precede imaginea. bottom - aliniere dedesubt, la baz; partea de jos a imaginii se aliniaz cu prima linie a textului. Valorile left, right, i bottom ale atributului align permit ca textul s fie dispus n jurul imaginii, n vreme ce top i middle nu permit acest lucru. Exemplul 7.4 ilustreaz modul de aliniere bottom, aa cum rezult din Figura 7.5. Exemplul 7. 4 <HTML> <HEAD> <TITLE>imagini4</TITLE> </HEAD> <BODY> <H1 align="center">Alinierea imaginii si textului (bottom)</H1><HR> <IMG src="../Imagini/eaglehed.gif" align="bottom" width="100" height="66" alt="vultur"> Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text. Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text. </BODY> </HTML>

Figura 7.6 red modul de aliniere left iar Figura 7.7 modul de aliniere right. Din Figura 7.8 i Figura 7.9 putei observa modurile de aliniere top i middle precum i faptul c aceste alinieri nu permit dispunerea textului n jurul imaginii. Alte dou atribute utile, care servesc la alinierea imaginii fa de restul elementelor din pagin, sunt atributele hspace i vspace. Ele precizeaz distana, n pixeli, pe orizontal, respectiv pe vertical, dintre imagine i restul elementelor din pagin. n Exemplul 7. 4 vom schimba modul de aliniere n cadrul etichetei <IMG> i vom aduga atributele hspace, respectiv vspace, astfel: <IMG src="../Imagini/eaglehed.gif" vspace="10" hspace="10"> align="left" width="100" height="66" alt="vultur"

Aspectul paginii va fi cel din Figura 7.10. Ai 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. Centrarea unei imagini se poate realiza numai dac este izolat de textul care o nconjoar. Pentru aceasta se poate folosi eticheta <CENTER> sau se poate include imaginea ntr-un bloc paragraf sau ntr-un bloc <DIV> avnd atributul align setat la valoarea center. Exemplul 7.5 ilustreaz acest mod de aliniere folosind eticheta <DIV> aspectul paginii fiind cel din Figura 7.11. Exemplul 7. 5 <HTML> <HEAD> <TITLE>imagini5</TITLE> </HEAD> <BODY> <H1 align="center">Centrarea unui imagini</H1><HR> Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text. <DIV align="center"> <IMG src="../Imagini/devil.gif" width="64" height="64" alt="dracusor"> </DIV> Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text. </BODY> </HTML> Exemplul 7.6 ilustreaz modul n care pot fi aliniate dou imagini fa de textul din pagin. Din Figura 7.12 putei observa c, dac alinierea la stnga a imaginii mpreun cu folosirea atributelor hspace i vspace conduce la un aspect ordonat al elementelor, aspectul textului n raport cu imaginea aliniat la dreapta depinde de dimensiunea ferestrei browserului. Exemplul 7. 6 <HTML> <HEAD> <TITLE>imagini6</TITLE> </HEAD> <BODY> <H1 align="center">Alinierea a doua imagini</H1><HR>

<IMG src="../Imagini/mtnscene.jpg" align="left" width="200" height="144" align="left" hspace="10" vspace="10"> Imagine text. Imagine text. Imagine text. Imagine text.Imagine text. Imagine text. Imagine text. Imagine text. <IMG src="../Imagini/sunscene.jpg" align="right" width="202" height="132" hspace="10" vspace="10"> Imagine text. Imagine text. Imagine text. Imagine text.Imagine text. Imagine text. Imagine text. Imagine text.Imagine text. Imagine text. Imagine text. Imagine text.Imagine text. Imagine text. Imagine text. Imagine text.Imagine text. Imagine text. Imagine text. Imagine text.Imagine text. Imagine text. Imagine text. Imagine text. </BODY> </HTML> 6. Imagini folosite ca fond (background) al paginii O imagine poate fi utilizat i pentru a stabili fondul unei pagini Web. n acest scop se folosete atributul background al etichetei <BODY>, avnd ca valoare adresa URL a imaginii. Imaginea se multiplic aliniat (tiling) pe orizontal i pe vertical pn umple ntregul ecran. Exemplul 7.7 ilustreaz utilizarea atributului background. Exemplul 7. 7 <HTML> <HEAD> <TITLE>imagini7</TITLE> </HEAD> <BODY background="../Imagini/silk.jpg"> <H1 align="center">Imaginea ca fond al paginii</H1><HR> Fond de matase... </BODY> </HTML> Figura 7.13 red aspectul unei pagini care folosete ca fundal o imagine. 7. Imagini folosite ca legturi Pentru a folosi o imagine drept legtura se procedeaz ca n urmtorul exemplu: <A href="tabel_culori.html"> <IMG src="prism.gif" width="100" height="80" alt="culori"> </A> S-a folosit eticheta <A> prin intermediul creia am creat legtura cu fiierul tabel_culori.html. ntre etichetele <A> i </A> am inclus o imagine care nlocuiete textul explicativ pe care vizitatorul urmeaz s fac click 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 tabel_culori.html. n mod prestabilit imaginea utilizat pe post de zon activ este nconjurat de un chenar avnd culoarea unei legturi (albastru). Dac stabilim pentru atributul border al etichetei valoarea "0" acest chenar dispare. Exemplul 7.8 prezint codul complet. Exemplul 7. 8 <HTML> <HEAD> <TITLE>imagini8</TITLE>

</HEAD> <BODY> <H1 align="center"> Imagini cu legaturi </H1><HR> <BR>Am pus o imagine cu legatura pe pagina<P> <A href="tabel culori.html"> <IMG src="../Imagini/prism.gif" width="100" height="80" alt="culori"> </A> </BODY> </HTML> n Figura 7.14 putei observa modul n care funcioneaz imaginea folosit ca legtur n exemplul de mai sus. 8. Imaginile miniaturale (thumbnails) Dac ntr-o pagin Web este necesar afiarea unui numr mare de imagini, ncrcarea paginii se va face destul de greu. De multe ori, vizitatorii paginii nu vor avea rbdarea necesar pentru a atepta ncrcarea integral a paginii. O soluie de compromis frecvent aplicat pentru scurtarea timpului de ncrcare a unei pagini ce prezint multe imagini o reprezint utilizarea imaginilor miniaturale (thumbnail-uri). O 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 deschid 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 deschide efectund click imaginea thumbnail. Realizarea imaginilor miniaturale se poate face fie prin micorarea proporional a imaginilor, fie prin reducerea lor la o dimensiune prestabilit (strech) chiar dac imaginea se distorsioneaz, n cazul n care se dorete, de pild, ca toate thumbnail-urile dintr-o pagin s aib aceleai dimensiuni. Exist 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 (micorat) direct n pagin

Folosirea a dou imagini O imagine thumbnail este foarte uor de realizat. Oricare ar fi programul de grafic pe care l folosii, tot ceea ce avei de fcut este s gsii opiunea Resize (care de obicei face parte din meniul Edit sau Image) i s precizai n caseta de dialog care se deschide, dimensiunile dorite. Vei observa c exist de regul o opiune setabil pentru pstrarea proporionalitii cu dimensiunile. Dac este activat, dup stabilirea uneia dintre dimensiuni ( width, de exemplu), cealalt (height) este calculat automat. n Exemplul 7.9 este plasat o imagine thumbnail n pagin, folosind prima metod, Figura 7.15 ilustrnd funcionarea imaginii thumbnail. Exemplul 7. 9 <HTML> <HEAD> <TITLE>imagini9</TITLE> </HEAD>

<BODY> <H1 align="center">Thumbnails - doua imagini</H1><HR> <P> <A href="../Imagini/zdog.gif"> <IMG src="../Imagini/zdog_th.gif"></A> </BODY> <HTML> Fiierul zdog_th.gif conine imaginea thumbnail care este folosit ca legtur, pentru a referi imaginea original, zdog.gif. Deoarece imaginea thumbnail este folosit ca o legtura ctre imaginea original, n jurul ei este afiat un chenar prestabilit albastru. Dac dorii ca acest chenar s nu mai fie afiat, putei folosi atributul border al etichetei <IMG> setat la valoarea "0". Imaginea original se va deschide n aceeai fereastr cu pagina n care este plasat imaginea thumbnail. Pentru a reveni n pagin, trebuie s apsai butonul Back al browserului. Folosirea unei singure imagini Aceast metod este adesea preferat, deoarece folosete un singur fiier, cel care conine imaginea original, miniaturizarea ei fcndu-se chiar n pagin, cu ajutorul atributelor width i height. 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 browserului i este imediat disponibil pentru afiare. n exemplul urmtor (Exemplul 7.10) am folosit o singur imagine pentru a ncrca att imaginea thumbnail ct i pe cea cu dimensiunile originale. Aspectul paginii este redat n Figura 7.16. Exemplul 7. 10 <HTML> <HEAD> <TITLE>imagini10</TITLE> </HEAD> <BODY> <H1 align="center">Thumbnails - o singura imagine</H1><HR> <P> <A href="../Imagini/zdog.gif"> <IMG src="../Imagini/zdog.gif" width="70" height="76"></A> </BODY> <HTML> Dup cum se poate observa, am creat un link (cu ajutorul etichetei <A>) la fiierul zdog.gif care conine imaginea original. Am folosit drept legtur aceeai imagine, dar redimensionat, folosind atributele width i height. n exemplul anterior, imaginea thumbnail este ncrcat prima. n momentul cnd vizitatorul face click pe ea, este ncrcat imaginea cu dimensiunile originale. Avantajul 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. 9. Imaginile video Pentru a insera o imagine video ntr-un document HTML se folosesc atributele dynsrc, controls, loop i start ale etichetei <IMG>. Atributul dynsrc nlocuiete atributul src i permite inserarea n documentul HTML a unei imagini video n acelai mod n care este inserat o imagine static.

Valoarea atributului dynsrc este adresa URL a fiierului video care va fi inclus n pagin conform sintaxei: <IMG dynsrc="URL_fisier_video"> Acest atribut este o extensie Internet Explorer i nu este recunoscut de browserele Netscape. Pentru a vizualiza o imagine video in-line ntr-un browser Netscape, vizitatorul paginii trebuie s instaleze un program auxiliar de tip plug-in. Dac programul plug-in nu este disponibil pe computerul vizitatorului, imaginea video nu va putea fi afiat. Singurul format de fiiere video care este suportat de extensiile Internet Explorer este AVI (Audio Video Interleave), deoarece acesta este formatul de redare care este inclus n browser . Construcia de mai jos include ntr-un document HTML fiierul video introducere.avi care se afl n folderul Video: <IMG dynsrc="../Video/introducere.avi"> Efectul acestei etichete este deschiderea de ctre browser a unei ferestre de vizualizare n interiorul paginii Web, 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. Ca i imaginile obinuite, imaginea video este afiat pe msur ce este ncrcat. Deoarece nici un alt browser n afar de Internet Explorer nu recunoate aceast extensie, este recomandat s includei n cadrul etichetei <IMG> i atributul src prin care s furnizai o imagine static ce va fi afiat n acelai cadru. Browserele care nu recunosc extensia dynsrc vor afia imaginea static pe cnd Internet Explorer va afia imaginea video. Ordinea n care apar cele dou atribute nu are importan. De exemplu: <IMG dynsrc="../Video/intro.avi" src="../Imagini/intro.gif"> n mod normal, Internet Explorer red clipul video ntr-o fereastr n care nu sunt afiate nici un fel de butoane de control. Utilizatorul poate relua, opri sau continua redarea clipului efectund click dreapta cu mouse-ul n interiorul ferestrei. Pentru a aduga butoane de control acestei ferestre se utilizeaz atributul controls al etichetei <IMG>. Atributul controls nu are alocat nici o valoare, prezena sa avnd doar scopul de a aduga butoanele de control asemntoare celor de la aparatele video. De exemplu: <IMG dynsrc="../Video/intro.avi" src="../Imagini/intro.gif" controls> Clipul video inclus n pagin este redat de browser o singur dat, de la nceput pn la sfrit. Pentru a repeta redarea clipului de un anumit numr de ori este folosit atributul loop. Valorile 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 control) sau efectueaz click dreapta cu mouse-ul n fereastra de vizualizare. Exemplul de mai jos ilustreaz modul n care poate fi setat atributul loop: <IMG dynsrc="../Video/intro.avi" src="../Imagini/intro.gif" controls loop="infinite"> Aa cum am precizat, redarea imaginii video ncepe imediat ce aceasta a fost complet ncrcat n pagin. Pentru a schimba 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 Cele 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 exemplul urmtor: <IMG dynsrc="../Video/intro.avi" start="fileopen, mouseover"> src="../Imagini/intro.gif" controls loop="infinite"

Imaginile video in-line pot fi tratate ca i imaginile statice. O astfel de imagine poate fi aliniat folosind atributul align, sau poate fi spaiat fa de textul care o nconjoar. Exemplul 7.11 ilustreaz atributele prezentate mai sus. Pagina va avea aspectul din Figura 7.17. Exemplul 7. 11 <HTML> <HEAD> <TITLE>imagini11</TITLE> </HEAD> <BODY> <H1 align="center">Imagini video</H1><HR> <FONT size="4" color="blue">Clipul video de mai jos face parte din jocul Heroes 3</FONT><P> <CENTER> <IMG dynsrc="../Video/shield.avi" src="../Imagini/banana.gif" controls start="fileopen, mouseover" loop="infinite"> </CENTER> </BODY> </HTML> 10. Sunetele Dac eticheta <IMG> permite afiarea unei imagini de fundal, exist i o etichet care realizeaz includerea n pagina Web a unei muzici de fundal i anume eticheta <BGSOUND>. Aceast etichet este, de asemenea, o extensie Internet Explorer deci nu este recunoscut i executat n alte browsere. Browserul Internet Explorer conine un decodor de sunet ncorporat i permite integrarea prin eticheta <BGSOUND> a sunetului de fundal pentru o pagin. Sintaxa etichetei <BGSOUND> este urmtoarea: <BGSOUND src="URL_fisier_sunet" loop="valoare"> Atributul src are drept valoare adresa URL a fiierului de sunet care este folosit ca fundal sonor al paginii. n mod curent, Internet Explorer recunoate trei tipuri de fiiere de sunet: fiiere cu extensia .wav care este formatul nativ pentru PC fiiere cu extensia .au, formatul nativ pentru sistemele UNIX fiiere cu extensia .midi, un format universal acceptat pentru codificarea sunetelor Pentru a include ntr-o pagin un fiier de sunet se procedeaz ca n exemplul urmtor:

<BGSOUND src="../Sunet/wellcome.wav> Ca i n cazul imaginilor video in-line, fiierul de sunet este redat o singur dat, la ncrcarea paginii. Pentru redarea sa repetat se folosete atributul loop al etichetei <BGSOUND> 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 nchide fereastra browserului. Executai Exemplul 7.12 cu un browser Internet Explorer pentru a observa efectul etichetei <BGSOUND>. Desigur, este necesar s schimbai adresa URL a fiierului de sunet specificnd un fiier existent pe hard-disk-ul dumneavoastr. Exemplul 7. 12 <HTML> <HEAD> <TITLE>imagini12</TITLE> </HEAD> <BODY> <H1 align="center">Muzica de fundal</H1><HR> <P> <FONT size="4" color="red">Muzica se va auzi pana cand veti inchide pagina</FONT> <BGSOUND src="../Sunet/Welcom98.wav" loop="infinite"> </BODY> </HTML> 11. Sugestii privind folosirea imaginilor i elementelor multimedia Cnd folosii imagini ntr-o pagin Web, trebuie s v punei ntrebarea: "Este necesar aceast imagine sau ar fi suficient s folosesc text?". Chiar dac se spune c o imagine face ct o mie de cuvinte, acest lucru nu este ntotdeauna adevrat pe Web. nlocuirea textului care conine informaiile eseniale dintr-o pagin Web cu imagini este adesea o greeal. Un prim motiv este c nc mai exist browsere non-grafice cum este Lynx, care nu afieaz dect textul. Apoi, chiar i n browserele grafice, anumii utilizatori ar putea opta, din varii motive, pentru dezactivarea afirii imaginilor. Un 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 deschiderea paginii. i nu n ultimul rnd, deoarece, spre deosebire de text, imaginile pot ntmpina diverse dificulti tehnice la afiare. Imaginile dintr-o pagin Web trebuie gndite ca nite instrumente vizuale care au rolul de a susine i ilustra coninutul scris al paginii. De exemplu, 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. Dar dac o imagine nu servete unui scop bine definit n pagin, e bine s v gndii de dou ori, nainte de a o folosi. De asemenea se recomand s fii precaut i n privina imaginilor folosite ca fundal (background). 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. Dac n cazul imaginilor in-line textul 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. Mai 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. Dei 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. Dac 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. Astfel, dac dintr-un motiv oarecare imaginea de fundal nu se ncarc, pagina va avea totui culoarea prestabilit de dumneavoastr. Ca i imaginile, i celelalte elemente multimedia trebuie folosite cu discernmnt ntr-o pagin Web. 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 deschise ntotdeauna cu browserul, unele impunnd existena unor plug-in-uri sau chiar unor programe speciale. O metod de compromis recomandat este descrierea coninutului fiierului, eventual inserarea unui fragment video exemplificativ (sample) de dimensiuni mult mai mici, similar cumva metodei thumbnail-urilor. Se asigur o legtur i spre fiierul integral, astfel nct, dup vizualizarea exemplului, vizitatorul s poat alege dac va atepta timpul necesar ncrcrii sale sau nu. Muzica de fundal este de cele mai multe ori nerecomandat. Foarte muli vizitatori pot vizualiza paginile dumneavoastr avnd sunetul dezactivat. Folosirea 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 chiar s i determine s o prseasc nainte de a citi coninutul acesteia. Dac 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. Imaginile i timpul de ncrcare al paginii Unul dintre cele mai importante aspecte care trebuie luate n considerare la includerea imaginilor ntr-un document este timpul de ncrcare a documentului. Durata de ncrcare a paginilor depinde de muli factori. Depinde de modemul i conexiunea vizitatorului, de performanele serverului gazd, de trafic, de limea de band, etc. Cum 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 chiar i n cazul unui vizitator care deine o conexiune modest ca performane. Pe lng alegerea cu foarte mult grij a imaginilor care vor fi incluse n document, mai exist cteva modaliti prin care poate fi ameliorat durata de ncrcare a paginii: Optimizarea imaginilor. Folosii-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.

Reutilizarea imaginilor. Aceast 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. Cele mai multe browsere rein n memoria cache elementele documentelor care urmeaz a fi afiate. Astfel, 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. Divizarea documentelor de dimensiuni mari n mai multe documente de dimensiuni reduse. Aceast regul general include i paginile care conin imagini in-line. Mai 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. Regula general acceptat este meninerea dimensiunilor unui document Web n jurul valorii de 50Kb, incluznd aici i imaginile, desigur. Folosirea imaginilor thumbnail. Dac 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 deschide ntr-o nou fereastr, nefiind asociat cu restul elementelor din pagin, este mai comod pentru vizitator s o salveze pe computerul propriu pentru o vizualizare ulterioar. Specificarea dimensiunile imaginilor. n acest mod este evitat etapa calculrii de ctre browser a spaiului necesar pentru afiarea imaginii, mbuntindu-se viteza de ncrcare a paginii. 13. Rezumat Formatele cele mai utilizate pentru fiierele grafice sunt JPEG i GIF. Inserarea unei imagini ntr-un document HTML se realizeaz cu ajutorul etichetei <IMG>. Sintaxa etichetei <IMG> este urmtoarea: <IMG src="URL_imagine" align="pozitie" width="valoare" height="valoare" vspace="valoare" hspace="valoare" alt="text" border="valoare" dynsrc="URL_imagine_video" loop="valoare" start="valoare" controls> unde: pagin src precizeaz locaia imaginii width i height stabilesc dimensiunile imaginii vspace i hspace stabilesc distana pe vertical i orizontal fa de restul textului din align aliniaz imaginea fa de textul din jurul ei alt furnizeaz un text explicativ asupra imaginii border stabilete grosimea chenarului imaginii dynsrc 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 background al etichetei <BODY>. O imagine poate servi drept legtur ctre un alt document HTML prin includerea etichetei <IMG> ntre etichetele <A> </A>.

O practic des folosit este inserarea n pagin a imaginilor miniaturale care la executarea unui click pe ele deschid imaginea original. Muzica de fundal poate fi adugat unui document prin intermediul etichetei <BGSOUND>. Alegerea imaginilor care vor fi incluse ntr-un document HTML trebuie fcut cu grij, n funcie de rolul acestora n structura documentului i avnd permanent n vedere timpul de ncrcare al paginii. 14. Test 5. a) b) c) 6. a) b) c) 7. a) b) c) 8. a) b) c) 9. a) b) c) Ce etichet folosim pentru a insera o imagine n pagin? <IMG> <A> <PIC> Atributul src servete la: poziionarea imaginii n pagin stabilirea numelui i locaiei unde se afl imaginea crearea unei legturi prin intermediul imaginii Atributele width i height ale etichetei <IMG> sunt folosite pentru: dimensionarea textului alinierea imaginii cu textul dimensionarea imaginii Ce efect are absena atributelor width i height din eticheta <IMG>? Nu se afieaz imaginea. Imaginea se afieaz pe toata suprafaa ferestrei browserului. Browserul ateapt ncrcarea complet a imaginii nainte de a ncepe afiarea textului. Care dintre atributele urmtoare permit afiarea textului n jurul imaginii? top bottom middle

10. Care dintre construciile urmtoare este folosit pentru a stabili ca fond al paginii imaginea rice.gif? a) b) c) 11. <IMG background="rice.gif"> <IMG src="rice.gif" background> <BODY background="rice.gif"> Ce realizeaz atributul alt n urmtoarea construcie?

<IMG src="dog.gif" alt="catel"> a) Afieaz cuvntul catel lng imagine.

b) c)

Afieaz cuvntul catel n spaiul rezervat imaginii. Atribuie fiierului dog.gif numele catel.

12. Care dintre urmtoarele construcii plaseaz imaginea n stnga i aliniaz textul n jurul imaginii? a) b) c) <IMG src="moon.gif" wrap="left"> <IMG src="moon.gif" align="left"> <IMG src="moon.gif> align="wrap">

13. Care dintre urmtoarele construcii are drept efect folosirea imaginii sign.gif ca legtur? a) b) c) 14. a) b) c) <A href="semn.html"></A><IMG src="sign.gif> <A src="semn.html><IMG href="sign.gif"></A> <A href="semn.html><IMG src="sign.gif"></A> Pentru a include n pagin o imagine video se folosete urmtoarea construcie: <IMG src="URL_imagine"> <IMG dynsrc="URL_imagine"> <IMG video="URL_imagine">

Imagini
1. a) 2. b) 3. c) 4. c) 5. b) 6. c) 7. b) 8. b) 9. c) 10. b)

Capitolul 8 Liste Listele reprezint unele dintre cele mai obinuite elemente dintr-o pagin Web. Acestea sunt deseori folosite pentru a prezenta informaiile n mod organizat, ntr-o manier accesibil i uor de parcurs. Ele pot fi de trei tipuri: d) e) f) liste ordonate (marcate prin numere sau litere), liste neordonate (marcate prin cratime, buline sau alte simboluri) liste de definiii, afiate fr nici un fel de marcaj.

n interiorul etichetelor care delimiteaz o list pot fi folosite orice alte etichete HTML, cum ar fi etichete de formatare a textului, legturi, imagini, etc. 1. Liste neordonate

O list neordonat reprezint o colecie de elemente nrudite, dispuse ntr-o ordine oarecare. Un exemplu tipic pentru o pagin Web este o list de link-uri spre alte documente. Acest tip de list este de fapt un bloc de text delimitat de etichetele <UL> </UL> (unordered list=list neordonat). Eticheta de nchidere </UL> este obligatorie. Fiecare element al listei este introdus prin eticheta <LI> (list item). Cu toate c eticheta <LI> este o etichet container, eticheta sa de nchidere, </LI>, este opional. Dac nu este prezent, la ntlnirea unei noi etichete <LI> se consider c vechea etichet este nchis. Lista 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 ( bulleted) cu "bulin". Exemplul 8.1 construiete o list neordonat, aspectul su fiind cel din Figura 8.1. Exemplul 8. 1 <HTML> <HEAD> <TITLE>liste1</TITLE> </HEAD> <BODY> <H1 align="center">Lista neordonata</H1><HR> <UL>Culori <LI>Black <LI>White <LI>Red <LI>Green <LI>Blue <LI>Yellow <LI>Purple <LI>Aqua </UL> </BODY> </HTML> Etichetele <UL> i <LI> pot avea definit atributul type care stabilete caracterul afiat n faa fiecrui element al listei. Valorile posibile al acestui atribut sunt: g) h) i) circle (cerc) disc (disc plin) - valoarea prestabilit square (patrat)

Lista din Exemplul 8.2 are atributul type setat la valoarea "square". Lista este marcat aa cum se poate vedea n Figura 8.2 Exemplul 8. 2 <HTML> <HEAD> <TITLE>liste2</TITLE> </HEAD> <BODY> <H1 align="center">Atributul type la liste neordonate</H1><HR> <UL type="square">Limbaje de programare <LI>C <LI>C++ <LI>Pascal

<LI> Basic <LI>Perl </UL> </BODY> </HTML> Setarea atributului type pentru un item al listei nlocuiete tipul de marcaj cu tipul specificat pentru acel item. n Figura 8.3 putei observa efectul setrii atributului type pentru un item individual la listei. Exemplul 8. 3 <HTML> <HEAD> <TITLE>liste3</TITLE> </HEAD> <BODY> <H1 align="center">Atributul type la itemul unei liste </H1><HR> <UL type="square">Limbaje de programare <LI>C <LI>C++ <LI>Pascal <LI type="circle">Basic <LI>Perl </UL> </BODY> </HTML> Forme particulare de liste neordonate j) Lista de directoare - este o list introdus prin eticheta <DIR> </DIR>. Eticheta a fost iniial utilizat pentru alctuirea listelor de fiiere. Multe browsere nu fac nici o diferen ntre etichetele <DIR> i <UL>, efectul lor fiind acelai. k) Lista de meniuri - utilizeaz eticheta <MENU>. Unele browsere afieaz lista doar n format uor diferit fa de listele neordonate, altele ns folosesc chiar un fel de meniu grafic de tip pull-down pentru afiarea acestor liste. 2. Liste ordonate O list ordonat este un bloc de text delimitat de etichetele <OL> </OL> (ordered list - list ordonat), eticheta de nchidere fiind obligatorie. Fiecare element al listei este iniiat de eticheta <LI> (list item). Ca i n cazul listelor neordonate, lista va fi indentat fa de restul paginii Web i fiecare element al listei va ncepe pe o linie nou. Diferena fa de listele neordonate este aceea c n acest caz marcarea elementelor se face prin cifre, nu prin simboluri. Exemplul 8.4 afieaz o list ordonat, marcat cu cifre arabe aspectul ei fiind cel din Figura 8.4. Exemplul 8. 4 <HTML> <HEAD> <TITLE>liste4</TITLE> </HEAD> <BODY> <H1 align="center">Lista ordonata</H1><HR> <OL>Castigatorii concursului sunt:

<LI>Popescu Maria <LI>Ionescu Ion <LI>Bratu Ana </OL> </BODY> </HTML> Pentru etichetele <OL> i <LI> se poate seta atributul type, care stabilete tipul de caractere utilizate pentru ordonarea listei. Valorile posibile ale acestui atribut sunt: A - pentru ordonare de tipul A , B , C...(litere mari) a - pentru ordonare de tipul a , b , c...(litere mici) I - pentru ordonare de tipul I , II , III , IV...(cifre romane mari) i - pentru ordonare de tipul i , ii , iii , iv...(cifre romane mici) 1 - pentru ordonare de tipul 1 , 2 , 3...(cifre arabe - opiune prestabilit) De asemenea eticheta <OL> poate avea setat atributul start, care stabilete valoarea iniial a secvenei de ordonare. Valoarea acestui atribut trebuie s fie un numr ntreg pozitiv. Exemplul 8.5 construiete o list numerotat cu cifre romane mari ncepnd de la poziia a treia. Aspectul paginii care conine aceast list este redat n Figura 8.5. Exemplul 8. 5 <HTML> <HEAD> <TITLE>liste5</TITLE> </HEAD> <BODY> <H1 align="center">Atributul type la liste ordonate</H1><HR> <OL type="I" start="3">Manuale <LI>Istorie <LI>Geografie <LI>Biologie <LI>Chimie </OL> </BODY> </HTML> Ca i n cazul listelor neordonate, setarea atributului type pentru un anumit item al listei nlocuiete tipul de numerotare stabilit pentru ntreaga list cu tipul specificat pentru acel element. 3. Imbricarea listelor n cadrul unei liste, fie ea ordonat sau neordonat, se pot include alte liste, procedeu numit imbricare. Fiecare list nou inclus n precedenta se va afia indentat fa de nivelul listei anterioare. Listele pot fi imbricate n toate modurile dorite, ca n Exemplul 8.6. Figura 8.6 red aspectul listei construite n acest exemplu. Exemplul 8. 6 <HTML> <HEAD> <TITLE>liste6</TITLE> </HEAD> <BODY> <H1 align="center">Liste imbricate</H1><HR>

<UL> <LI>Bulina 1 <OL> <LI>Numarul 1 <LI>Numarul 2 </OL> <LI>Bulina 2 <LI>Bulina 3 <UL type="square"> <LI>Patrat 1 <LI>Patrat 2 <LI>Patrat 3 </UL> <LI>Bulina 4 </UL> </BODY> </HTML> 4. Liste de definiii Listele de definiii reprezint un tip special de liste n care elementele listei nu sunt nici numerotate (ca n listele ordonate), nici marcate prin buline (ca n listele neordonate) i care prezint dou nivele de indentare. Listele de definiii sunt blocuri de text incluse ntre etichetele <DL> </DL> (definition list), eticheta de nchidere fiind obligatorie. Fiecare element al listei este introdus prin eticheta <DT> (definition term). Fiecare element introdus prin eticheta <DT> conine la rndul su un numr de elemente care l definesc, introduse prin eticheta <DD> (definition description). Ca i n cazul etichetei <LI>, etichetele de nchidere </DT> i </DD> sunt opionale. n Exemplul 8.7 este construit o list de definiii. Exemplul 8. 7 <HTML> <HEAD> <TITLE>liste7</TITLE> </HEAD> <BODY> <H1 align="center">Liste de definitii</H1><HR> <DL> <DT>Iarna <DD>Ninge <DD>E frig <DD>Ziua e mai scurta dect noaptea <DT>Primavara <DD>Natura se trezeste la viata <DD>Infloresc pomii <DD>Se intorc pasarile calatoare <DT>Vara <DD>Totul e verde <DD>E foarte cald <DD>Ziua e mai lunga dect noaptea <DT>Toamna

<DD>Se coc fructele <DD>Se strange recolta <DD>Cad frunzele </DL> </BODY> </HTML> Aspectul listei de definiii de mai sus este cel din Figura 8.7. Etichetele <DL> i </DL> marcheaz nceputul i sfritul listei, termenii care fac parte din list (Iarna, Primvara, Vara, Toamna ) sunt introdui prin eticheta <DT> iar definiiile termenilor, prin etichetele <DD>. Se pot realiza liste ale cror elemente s fie link-uri, imagini sau blocuri de text. n Exemplul 8.8, elementele listei sunt imagini, aa cum se poate vedea n Figura 8.8. Exemplul 8. 8 <HTML> <HEAD> <TITLE>liste8</TITLE> </HEAD> <BODY> <H1 align="center">Liste de imagini</H1><HR> <DL> <DT>Flori <DD> <IMG src="../Imagini/rose1.jpg" width="120" height="120"> <DD> <IMG src="../Imagini/orangerose.gif" width="120" height="120"> <DT>Texturi <DD> <IMG src="../Imagini/silk.jpg" width="120" height="120"> <DD> <IMG src="../Imagini/lace.gif" width="120" height="120"> </DL> </BODY> </HTML> Exemplul 8.9 creeaz dou liste imbricate de legturi. Aspectul paginii care conine aceast list este redat n Figura 8.9. Putei testa direct funcionarea listei dac ai salvat fiierele HTML construite la capitolele anterioare sub numele specificat n blocul <TITLE> al fiecrui document. n cazul cnd ai preferat alte denumiri pentru fiiere, putei schimba numele fiierelor prezente n cadrul exemplului cu propriile dumneavoastr fiiere. Exemplul 8. 9 <HTML> <HEAD> <TITLE>liste9</TITLE> </HEAD> <BODY> <H1 align="center">Liste de legaturi</H1><HR> <OL type="I"> <LI>Culori <OL> <LI><A href="culori1.html">Culoarea fundalului</A>

<LI><A href="culori2.html">Culoarea textului</A> <LI><A href="culori3.html">Culoarea legaturilor</A> </OL> <LI>Fonturi <OL> <LI><A href="fonturi1.html">Eticheta FONT</A> <LI><A href="fonturi2.html">Eticheta BASEFONT</A> <LI><A href="fonturi4.html">Etichete de accentuare a textului</A> </OL> </OL> </BODY> </HTML> 5. Rezumat ntr-o pagin Web pot fi introduse diverse tipuri de liste: l) Liste neordonate prin eticheta <UL> </UL>, marcate prin simboluri de tip buline, cercuri sau ptrate m) Liste ordonate prin eticheta <OL> </OL> marcate prin cifre arabe, cifre romane mari sau mici, litere mari sau mici n) Liste de definiii prin eticheta <DL> </DL> nemarcate Elementele listelor ordonate i neordonate se introduc prin eticheta <LI>. Elementele listelor de definiii se introduc prin etichetele <DT> i <DD>. Listele pot conine orice tip de elemente: text, imagini, link-uri sau alte liste (n acest caz obinndu-se liste imbricate). 6. Test 15. a) b) c) Eticheta <UL> se folosete pentru a iniia: o list ordonat o list neordonat dou liste imbricate

Care dintre urmtoarele afirmaii este fals? a) b) c) Eticheta <LI> servete pentru a introduce fiecare element al unei liste ordonate. Eticheta <LI> servete pentru a introduce fiecare element al unei liste neordonate. Eticheta <LI> servete pentru a introduce fiecare element al unei liste de definiii.

n construcia <UL type="square"> ce rol are atributul type? a) b) c) Construiete o list neordonat. Stabilete caracterul care va fi afiat n faa fiecrui element al listei. Construiete o list care are ca elemente imagini.

O list ordonat este introdus prin eticheta: a) <UL>

b) c)

<OL> <DL>

Ce rol are atributul type n urmtoarea construcie: <OL type="a">? a) b) c) Construiete o list de litere care ncepe cu caracterul "a". Construiete o list ordonat. Stabilete faptul c elementele listei vor fi marcate cu litere mici.

Ce este incorect n exemplul urmtor? <UL> <LI>Limbaje de programare <OL> <LI>C++ <LI>Perl <LI>Java </OL> <LI>Sisteme de operare> <OL> <LI>MSDos <LI>Unix </UL> </OL> a) b) c) Nu este permis imbricarea listelor neordonate cu liste ordonate. Este absent eticheta de nchidere </LI>. Etichetele <UL> i <OL> nu sunt nchise corect.

O list de definiii se introduce prin eticheta: a) b) c) <UL> <DT> <DL>

Care este ordinea corect n care se introduc elementele unei liste de definiii? a) b) c) a) <DL> <DT> <DD> b) <DD> <DT> <DL> c) <DT> <DL> <DD>

Ce realizeaz urmtoarea construcie? <UL> <LI><IMG src="pic1.gif"> <LI><IMG src="pic2.gif"> </UL> a) b) c) Construiete o list de imagini marcate prin buline. Construiete o list de link-uri ctre imaginile specificate. Nimic, deoarece este incorect ca elementele unei liste s fie imagini.

Cum sunt marcate elementele unei liste de definiii?

a) b) c)

prin buline prin numere nu sunt marcate

Liste
1. b) 2. c) 3. b) 4. b) 5. c) 6. c) 7. c) 8. a) 9. a) 10. c)

Capitolul 9 Tabele
Tabelul este un element structural de baz n alctuirea unei pagini Web. n cadrul unui tabel pot fi incluse oricare dintre elementele care fac parte din corpul unui document HTML: text, imagini, linii orizontale, titluri, legturi, alte tabele, etc. Tabelele constituie un instrument extrem de util de organizare a paginii Web, realiznd alinierea elementelor i plasarea lor n locurile dorite de designerul paginii. Un tabel este o gril dreptunghiular format din linii i coloane. Caseta format la intersecia unei linii cu o coloan se numete celul. O 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. Celulele tabelului conin date (text, imagini, link-uri), fiecare celul avnd propriile opiuni pentru culoarea fondului, culoarea textului, alinierea textului etc.

1. Crearea unui tabel


Pentru a insera un tabel ntr-un document HTML se folosesc etichetele corespondente <TABLE> </TABLE>. Eticheta <TABLE> este o etichet container, deci eticheta de final este obligatorie. Absena ei face ca tabelul s nu fie afiat corect. Pentru a insera o linie ntr-un tabel se folosesc etichetele <TR> </TR> (table row). Folosirea etichetei de nchidere </TR> este opional. Aa cum spuneam, fiecare linie de tabel este format din mai multe celule ce conin date. O celul de date se introduce cu eticheta <TD> </TD> (table data). Eticheta de nchidere </TD> este de asemenea opional. n Exemplul 9.1 am construit un tabel format din patru linii, fiecare linie avnd cte dou celule de date. Aspectul tabelului este redat n Figura 9.1.
Exemplul 9. 1

<HTML> <HEAD> <TITLE>tabele1</TITLE> </HEAD> <BODY> <H1 align="center">Crearea unui tabel</H1><HR> <TABLE> <TR> <TD>celula 11 <TD>celula 11 <TR> <TD>celula 21 <TD>celula 22 <TR> <TD>celula 31 <TD>celula 32 <TR> <TD>celula 41 <TD>celula 42 </TABLE> </BODY> </HTML>

n mod prestabilit, un tabel nu are chenar vizibil. Pentru a aduga un chenar unui tabel, se utilizeaz atributul border al etichetei <TABLE>. Acest atribut poate primi ca valoare orice numr ntreg (inclusiv 0) i reprezint grosimea n pixeli a chenarului tabelului. Daca atributul border nu este urmat de o valoare atunci chenarul tabelului va avea o grosime prestabilit egal cu 1 pixel, iar o valoare egal cu 0 a atributului border semnific absena chenarului. Cnd atributul border are o valoare nenul chenarul tabelului are un aspect tridimensional. n Exemplul 9.2 este construit un tabel cu chenar, aa cum se observ n Figura 9.2. Pentru a testa funcionarea atributului border, nlocuii n exemplul de mai jos valoarea "4" i cu alte valori. Nu uitai ca dup fiecare modificare s salvai fiierul i s apsai butonul Refresh/Reload al browserului.
Exemplul 9. 2

<HTML> <HEAD> <TITLE>tabele2</TITLE> </HEAD> <BODY> <H1 align="center">Chenarul unui tabel</H1><HR> <TABLE border="4"> <TR> <TD>celula 11 <TD>celula 12 <TR> <TD>celula 21 <TD>celula 22 <TR> <TD>celula 31 <TD>celula 32 <TR> <TD>celula 41 <TD>celula 42 </TABLE>

</BODY> </HTML>

Celulele unui tabel pot conine i alte elemente n afar de text: imagini, legturi, formulare, etc. Exemplul 9.3 construiete un tabel cu dou linii i dou coloane, celulele tabelului avnd drept coninut imagini. Aspectul tabelului este cel din Figura 9.3.
Exemplul 9. 3

<HTML> <HEAD> <TITLE>tabele3</TITLE> </HEAD> <BODY> <H1 align="center">Tabel care contine imagini</H1><HR> <TABLE border="4"> <TR> <TD><IMG src="../Imagini/donut.gif"> <TD><IMG src="../Imagini/gift.gif"> <TR> <TD><IMG src="../Imagini/invest.gif"> <TD><IMG src="../Imagini/globe.gif"> </TABLE> </BODY> </HTML>

2. Alinierea tabelului n pagin


Pentru a alinia un tabel ntr-o pagina Web se utilizeaz atributul align al etichetei <TABLE>, cu urmtoarele valori posibile:
left (valoarea prestabilit) - textul care urmeaz dup punctul de inserare al tabelului va fi dispus n partea dreapt a tabelului. center - textul care urmeaz dup punctul de inserare al tabelului va fi afiat pe toat limea paginii, imediat sub tabel. right - textul care urmeaz dup punctul de inserare al tabelului va fi dispus n partea stng a tabelului.

n Exemplul 9.4 este ilustrat construirea unui tabel aliniat la dreapta. Pagina va avea aspectul din Figura 9.4.
Exemplul 9. 4

<HTML> <HEAD> <TITLE>tabele4</TITLE> </HEAD> <BODY> <H1 align="center">Alinierea tabelului in pagina</H1><HR> <TABLE border="3" align="right"> <TR> <TD>celula 11 <TD>celula 12 <TR> <TD>celula 21 <TD>celula 22 </TABLE> Acest text este plasat in stanga tabelului

</BODY> </HTML>

Distana dintre tabel i celelalte elemente din pagina Web poate fi stabilit cu ajutorul atributelor
hspace i vspace al etichetei <TABLE>. Valoarea atributului hspace poate fi orice numr pozitiv, inclusiv 0, i reprezint distana pe

orizontal dintre tabel i celelalte elemente ale paginii Web. Analog, valoarea atributului vspace reprezint distana pe vertical dintre tabel i celelalte elemente ale paginii. Atributele hspace i vspace sunt recunoscute numai de browserele Netscape. Exemplul 9.5 ilustreaz utilitatea celor dou atribute.
Exemplul 9. 5

<HTML> <HEAD> <TITLE>tabele5</TITLE> </HEAD> <BODY> <H1 align="center">Spatierea tabelului fata de restul textului </H1><HR> Tabelul de mai jos este spatiat pe verticala fata de acest text cu 15 pixeli. Tabelul de mai jos este spatiat pe verticala fata de acest text cu 15 pixeli. Tabelul de mai jos este spatiat pe verticala fata de acest text cu 15 pixeli<BR> <TABLE border align="left" vspace="15" hspace="10"> <TR> <TD>celula 11 <TD>celula 12 <TR> <TD>celula 21 <TD>celula 22 </TABLE> Acest text este plasat in dreapta tabelului la distanta de 10 pixeli pe orizontala fara de tabel. Acest text este plasat in dreapta tabelului la distanta de 10 pixeli pe orizontala fara de tabel. Acest text este plasat in dreapta tabelului la distanta de 10 pixeli pe orizontala fara de tabel. </BODY> </HTML>

Pentru a observa efectul celor dou atribute editai acest exemplu i vizualizai-l cu un browser Netscape. Atributele nefiind recunoscute de Internet Explorer, aspectul paginii la vizualizarea cu acest browser va fi cel din Figura 9.5.

3. Dimensionarea unui tabel


Dimensiunile unui tabel - limea i nlimea - pot fi stabilite exact prin intermediul atributelor width i height ale etichetei <TABLE>. Valorile acestor atribute pot fi: numere ntregi pozitive reprezentnd limea respectiv nlimea n pixeli a tabelului numere ntregi ntre 1 i 100, urmate de semnul %, reprezentnd procente din limea i nlimea total a paginii.

Iat un exemplu de tabel cu nlimea de 200 de pixeli i limea egal cu 50% din limea paginii (Exemplul 9.6)
Exemplul 9. 6

<HTML> <HEAD> <TITLE>tabele6</TITLE> </HEAD> <BODY> <H1 align="center">Dimensionarea unui tabel</H1><HR> Tabel cu lungimea de 50% din pagina si inaltimea de 200 de pixeli<P> <TABLE border width="50%" height="200"> <TR> <TD>celula 11 <TD>celula 12 <TR> <TD>celula 21 <TD>celula 22 </TABLE> </BODY> </HTML>

Aspectul tabelului construit n documentul de mai sus este cel din Figura 9.6. Dimensiunile unui tabel includ i valoarea dat atributului border. De exemplu, un tabel cu o singur linie i o singur coloan, cu dimensiunile width="100", height="50" i avnd atributul border setat la valoarea 10, va avea drept spaiu util 80 de pixeli pe lime i 30 de pixeli pe nlime. Una dintre cele mai frecvente utilizri a tabelelor este poziionarea unui text ntr-o anumit zon a paginii, prin realizarea unui tabel fr chenar (border="0") cu o singur linie i o singur coloan, ca n Exemplul 9.7.
Exemplul 9. 7

<HTML> <HEAD> <TITLE>tabele7</TITLE> </HEAD> <BODY> <H1 align="center">Pozitionarea unui text</H1> <TABLE border="0" width="60%" height="100%" align="center"> <TR> <TD> Acest text este pozitionat in centrul paginii. Acest text este pozitionat in centrul paginii. Acest text este pozitionat in centrul paginii. Acest text este pozitionat in centrul paginii. Acest text este pozitionat in centrul paginii. </TABLE> </BODY> </HTML>

n Figura 9.7 este redat aspectul tabelului construit mai sus.

4. Spaierea celulelor unui tabel

Distana dintre dou celule vecine se definete cu ajutorul atributului cellspacing al etichetei <TABLE>. Valorile acestui atribut pot fi numere ntregi pozitive, inclusiv 0, i reprezint distana n pixeli dintre dou celule vecine. Valoarea prestabilit a atributului cellspacing este de 2 pixeli. Exemplul 9.8 ilustreaz funcionarea atributului cellspacing. Aspectul tabelului este cel din Figura 9.8. Putei modifica valoarea atributului cellspacing pentru a observa cum se spaiaz celulele n funcie de valorile pe care le dai.
Exemplul 9. 8

<HTML> <HEAD> <TITLE>tabele8</TITLE> </HEAD> <BODY> <H1 align="center">Spatierea celulelor</H1><HR> <TABLE border="3" cellspacing="10"> <TR> <TD>Maria <TD>Bogdan <TR> <TD>Alexandru <TD>Irina </TABLE> </BODY> </HTML>

Distana dintre marginea unei celule i coninutul ei poate fi definit cu ajutorul atributului cellpadding al etichetei <TABLE>. Valorile acestui atribut pot fi numere ntregi pozitive, i reprezint distana n pixeli dintre marginile celulei i coninutul ei. Valoarea prestabilit a atributului cellpadding este 1 pixel. Exemplul 9.9 construiete un tabel n care distana dintre marginea celulelor i coninutul lor este de 20 de pixeli. Aspectul acestui tabel este cel din Figura 9.9.
Exemplul 9. 9

<HTML> <HEAD> <TITLE>tabele9</TITLE> </HEAD> <BODY> <H1 align="center"> Spatierea textului in celule</H1><HR> <TABLE border cellpadding="20"> <TR> <TD>Maria <TD>Bogdan <TR> <TD>Alexandru <TD>Irina </TABLE> </BODY> </HTML>

5. Dimensionarea celulelor unui tabel

Dimensiunile unei celule de tip <TD> sau de tip <TH> (vezi mai jos eticheta <TH>) pot fi stabilite exact cu ajutorul a dou atribute ale acestor etichete: width pentru lime i height pentru nlime. Valorile posibile ale acestor atribute sunt:
numere ntregi pozitive (inclusiv 0) reprezentnd dimensiunea n pixeli a limii, respectiv a nlimii unei celule procente din limea , respectiv nlimea tabelului.

n Exemplul 9.10 am dimensionat celula 11 la limea de 20% din limea tabelului i nlimea egal cu 75% din nlimea lui. Aa cum se poate observa din Figura 9.10 dimensionarea individual a unei celule va afecta dimensionarea tuturor celulelor din linia i coloana din care face parte celula respectiv. Se observ c celula 12 are limea egal cu restul de 80% din limea tabelului. Celula 21 aflat pe aceeai coloana cu celula dimensionat are aceleai dimensiuni ca i ea.
Exemplul 9. 10

<HTML> <HEAD> <TITLE>tabele10</TITLE> </HEAD> <BODY> <H1 align="center">Dimensionarea celulelor</H1><HR> Tabel cu celule dimensionate individual<P> <TABLE border> <TR> <TD width="20%" height="75%">celula 11 <TD>celula 12 <TR> <TD>celula 21 <TD>celula 22 </TABLE> </BODY> </HTML>

6. Alinierea coninutului unei celule


Alinierea pe orizontal a coninutului unei celule se face cu ajutorul atributului align care poate lua valorile:

left - la stnga center - centrat , valoarea prestabilit right - la dreapta

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

baseline - la baz bottom - jos middle - la mijloc, valoarea prestabilit top - sus

Aceste atribute pot fi ataate att etichetei <TR> pentru a defini alinierea tuturor celulelor unei linii, ct i etichetelor <TD> i <TH> (vezi mai jos eticheta <TH>) pentru a stabili alinierea textului ntro singur celul. n Exemplul 9.11 este ilustrat funcionarea atributelor align i valign.

Textul din celulele primei, celei de-a doua i celei de-a patra linii a fost aliniat prin atributul
align asociat liniei, iar textul din celulele liniei a treia a fost aliniat prin atributul align asociat

fiecrei celule n parte. Aspectul tabelului este cel din Figura 9.11.
Exemplul 9. 11

<HTML> <HEAD> <TITLE>tabele11</TITLE> </HEAD> <BODY> <H1 align="center"> Alinierea continutului celulelor</H1><HR> <TABLE border width="50%" height="80%"> <TR align="right"> <TD>dreapta <TD>dreapta <TR align="center"> <TD>centru <TD>centru <TR> <TD valign="top">sus <TD valign="bottom">jos <TR align="left"> <TD>stanga <TD>stanga </TABLE> </BODY> </HTML>

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

7. Definirea culorilor pentru un tabel


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

Valorile pe care le poate primi atributul bgcolor sunt cele cunoscute pentru culori. Dac ntr-un tabel sunt definite mai multe atribute bgcolor, atunci prioritatea este, n ordine descresctoare, urmtoarea: 1. 2. 3.
<TD> <TR> <TABLE> (prioritatea cea mai mica)

n Exemplul 9.12 este ilustrat folosirea atributului bgcolor.


Exemplul 9. 12

<HTML> <HEAD> <TITLE>tabele12</TITLE>

</HEAD> <BODY> <H1 align="center">Culori in tabel</H1><HR> <TABLE border="5" bgcolor="lime"> <TR> <TD>celula 11 verde <TD bgcolor="red">celula 12 rosu <TR bgcolor="blue"> <TD>celula 21 albastru <TD bgcolor="yellow">celula 22 galben <TR bgcolor="cyan"> <TD>celula 31 cyan <TD>celula 32 cyan <TR> <TD>celula 41 verde <TD bgcolor="white">celula 42 alb </TABLE> </BODY> </HTML>

Din Figura 9.12 putei observa cum funcioneaz prioritatea atributului bgcolor. Astfel, culoarea ntregului tabel a fost stabilit prin eticheta:
<TABLE bgcolor="lime">

Dac o linie nu are stabilit nici o alta culoare, culoarea liniei este verde deschis. Pentru linia a doua a tabelului este stabilit culoarea albastru:
<TR bgcolor="blue">.

Celulele care fac parte din aceasta linie i care nu au stabilit o alta culoare, vor fi albastre (celula 21). Celelalte celule vor avea culoarea stabilit explicit pentru ele (celula 22 va fi galben):
<TD bgcolor="yellow">

Un tabel poate avea drept fundal nu numai o culoare, ci i o imagine. Acest efect se obine folosind atributul background al etichetei <TABLE>, atributul primind ca valoare adresa URL a imaginii. Atributul background 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. Exemplul 9.13 ilustreaz acest atribut, tabelul avnd aspectul redat n Figura 9.13.
Exemplul 9. 13

<HTML> <HEAD> <TITLE>tabele13</TITLE> </HEAD> <BODY> <H1 align="center">Fundalul unui tabel</H1><HR> <TABLE border="5" width="200" height="120" background="../Imagini/lace.gif> <TR> <TD>celula 11 <TD>celula 12 <TR> <TD>celula 21

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

Culorile chenarului unui tabel se pot stabili folosind atributele:


bordercolor - permite stabilirea culorii pentru chenarul 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

Culoarea textului din fiecare celul se poate stabili cu ajutorul expresiei:


<FONT color="#RGB sau nume_culoare">text</FONT>.

Exemplul 9.14 ilustreaz folosirea acestor atribute, aspectul tabelului fiind cel din Figura 9.14.
Exemplul 9. 14

<HTML> <HEAD> <TITLE>tabele14</TITLE> </HEAD> <BODY> <H1 align="center">Culorile chenarului unui tabel</H1><HR> <TABLE border="10" bordercolordark="blue" bordercolorlight="cyan"> <TR> <TD><FONT color="green">celula 11</FONT> <TD><FONT color="blue">celula 12</FONT> <TD><FONT color="red">celula 13</FONT> <TR> <TD><FONT color="teal">celula 21</FONT> <TD><FONT color="magenta">celula 22</FONT> <TD><FONT color="lime">celula 23</FONT> </TABLE> </BODY> </HTML>

Am setat grosimea chenarului tabelului la valoarea de 10 pixeli, pentru a avea un aspect tridimensional mai pronunat. Cu ajutorul atributului bordercolordark am stabilit culoarea prii "umbrite" a chenarului (marginile de jos i din dreapta) iar cu ajutorul atributului bordercolorlight, culoarea prii "luminate" a acestuia (marginile de sus i din stnga) iar textul din celule l-am scris cu culori diferite, folosind eticheta <FONT>. Culorile stabilite pentru chenarul exterior al tabelului sunt folosite i pentru a colora liniile despritoare dintre celulele tabelului. Pentru acestea partea "umbrit" este format din muchiile de sus i din stnga iar partea "luminat" este format din muchiile de jos i din dreapta. Dac dorim s colorm separat muchiile care despart liniile sau celulele tabelului putem asocia atributele bordercolor, bordercolordark i bordercolorlight etichetelor <TR> i <TD>. Atenie! Atributele bordercolor, bordercolordark i bordercolorlight nu sunt recunoscute de browserul Nescape. Vizualizai pagina de mai sus cu un browser Netscape pentru a observa aspectul ei.

8. Titlul unui tabel


Unui tabel i se poate ataa un titlu cu ajutorul etichetei <CAPTION> (table caption=titlu tabel). Aceast etichet trebuie plasat n interiorul etichetelor <TABLE> </TABLE>, dar nu n interiorul etichetelor <TR> sau <TD>. Titlul unui tabel poate fi aliniat cu ajutorul atributului align al etichetei <CAPTION> care poate lua una dintre valorile:

bottom - sub tabel top - deasupra tabelului left - deasupra, la stnga tabelului right - deasupra, la dreapta tabelului

n Exemplul 9.15 titlul tabelului este aliniat deasupra sa. Aspectul paginii este cel din Figura 9.15.
Exemplul 9. 15

<HTML> <HEAD> <TITLE>tabele15</TITLE> </HEAD> <BODY> <H1 align="center">Titlul unui tabel</H1><HR> <TABLE border><CAPTION align="top">Masini <TR> <TD>Mercedes <TD>Citroen <TD>Jaguar <TR> <TD>BMW <TD>Volvo <TD>Renault </TABLE> </BODY> </HTML>

9. Capul de tabel
Un tabel poate avea celule cu semnificaia de cap de tabel. Aceste celule sunt introduse de eticheta <TH> (tabel header=cap de tabel) n loc de <TD>. Toate atributele care pot fi ataate etichetei <TD> pot fi de asemenea ataate i etichetei <TH>. Coninutul celulelor definite cu <TH> este scris cu caractere aldine i centrat. Exemplul 9.16 ilustreaz modul n care se pot insera celule cu rol de cap de tabel. Putei observa din exemplu c elementele cu rol de cap de tabel pot fi plasate att pe orizontal ct i pe vertical. Aspectul tabelului este redat n Figura 9.16.
Exemplul 9. 16

<HTML> <HEAD> <TITLE>tabele16</TITLE> </HEAD> <BODY> <H1 align="center">Capul de tabel</H1><HR><P> <TABLE border><CAPTION align="bottom">Preturi masini

<TR> <TH>Pret <TH>Citroen <TH>Jaguar <TH>BMW <TH>Volvo <TR> <TH>In dolari <TD>5000 <TD>100000 <TD>50000 <TD>80000 <TR> <TH>In lei <TD>5 <TD>100 <TD>50 <TD>80 </TABLE> </BODY> </HTML>

10. Tabele de forme oarecare


Exist situaii cnd dorim ca o celul s se extind peste celulele vecine, pe orizontal sau pe vertical. n acest mod se obine o singur celul cu suprafaa egal cu suma suprafeelor celulelor iniiale. Acest lucru se poate realiza cu ajutorul atributelor colspan i rowspan ale etichetelor <TD> i
<TH>.

Astfel:
colspan - realizeaz extinderea unei celule peste celulele din dreapta ei. Valoarea atributului determin numrul de celule care se unific. rowspan - realizeaz extinderea unei celule peste celulele de sub ea. Valoarea atributului determin numrul de celule care se unific.

Sunt posibile extinderi simultane ale unei celule pe orizontal i pe vertical. n acest caz, n etichetele <TD> sau <TH> vor fi prezente ambele atribute colspan i rowspan. Exemplul 9.17 ilustreaz modul cum se realizeaz un tabel cu celule unificate.
Exemplul 9. 17

<HTML> <HEAD> <TITLE>tabele17</TITLE> </HEAD> <BODY> <H1 align="center">Tabele cu forma oarecare</H1><HR> <TABLE border> <TR> <TD rowspan="3">celula 11<BR>celula 21<BR>celula 31 <TD>celula 12 <TD colspan="2" rowspan="3">celula 13 , celula 14<BR>celula 23, celula 24<BR>celula 33, celula 34 <TR> <TD>celula 22

<TR> <TD>celula 32 <TR> <TD>celula 41 <TD colspan="3">celula 42, celula 43, celula 44 </TABLE> </BODY> </HTML>

Tabelul construit n acest exemplu are 4 linii i 4 coloane. Aa cum se vede n Figura 9.17, prin folosirea atributelor colspan i rowspan configuraia tabelului s-a modificat astfel: celula 11 s-a extins n jos peste celulele 21 i 31 (<TD rowspan="3">), celula 12 a rmas nemodificat, celula 13 s-a extins att spre dreapta peste celula 14 ct i n jos, peste celulele 23 i 24 (<TD colspan="2" rowspan="3">). Celulele 22, 32 i 41 au rmas nemodificate iar celula 42 s-a extins spre dreapta peste celulele 43 i 44 (<TD colspan="3">. Etichetelor <TD> i <TH> li se poate ataa atributul nowrap. El interzice ajustarea automat a lungimii unei linii de text, astfel nct n tabel pot aprea coloane cu o lime orict de mare. Un tabel n care este folosit atributul nowrap este cel construit n Exemplul 9.18. Aspectul tabelului este redat n Figura 9.18.
Exemplul 9. 18

<HTML> <HEAD> <TITLE>tabele18</TITLE> </HEAD> <BODY> <H1 align="center"> Atributul nowrap</H1><HR> <TABLE border> <TR> <TD>celula 11 <TD>celula 12 <TR> <TD>celula 21 <TD nowrap>celula 22 Textul din aceasta celula este foarte lung </TABLE> </BODY> </HTML>

11. Celule fr coninut


Dac un tabel are celule fr coninut (celule vide), atunci aceste celule vor aprea n tabel fr un chenar de delimitare. n scopul de a afia un chenar pentru celulele vide se poate proceda astfel:
dup eticheta <TD> se adaug &nbsp; dup eticheta <TD> se adaug <BR>

Caracterul &nbsp; (no break space) este, aa cum am vzut la capitolul Formatarea textului, caracterul spaiu. Un spaiu introdus prin intermediul acestui caracter nu va fi ignorat de browser. n Exemplul 9.19 este ilustrat modul n care pot fi create celule fr coninut care s aib totui chenar de delimitare. Dup cum observai din Figura 9.19, celula 23 nu are chenar de delimitare. Celulele de pe a doua linie a tabelului sunt vide dar au chenar deoarece am folosit &nbsp i <BR>.

Exemplul 9. 19

<HTML> <HEAD> <TITLE>tabele19</TITLE> </HEAD> <BODY> <H1 align="center">Celule fara continut</H1><HR> <TABLE border> <TR> <TD>celula 11 <TD>celula 12 <TD>celula 13 <TR> <TD>&nbsp; <TD><BR> <TD> </TABLE> </BODY> </HTML>

12. Grupuri de coloane


Etichetele <COLGROUP> </COLGROUP> permit definirea unui grup de coloane n cadrul unui tabel. Atributele acceptate de <COLGROUP> 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

De exemplu:
<COLGROUP span="3" width="100"></COLGROUP>

Am definit astfel un grup de trei coloane, fiecare avnd limea de 100 de pixeli. ntr-un bloc <COLGROUP>, coloanele pot avea configurri diferite dac se utilizeaz eticheta <COL>, care admite atributele:
span - identific acea coloan din grup pentru care se face configurarea. Dac lipsete, atunci

coloanele sunt configurate n ordine. width - determin limea coloanei identificate prin span. align - determin alinierea coninutului coloanei identificate prin span. Cel mai bine putei nelege funcionarea acestei etichete din Exemplul 9.20. Tabelul din acest exemplu are dimensiunile de 420 de pixeli lime i 200 de pixeli nlime i este format din dou linii i patru coloane. n tabel a fost delimitat un grup de trei coloane (primele trei coloane) prin eticheta <COLGROUP> iar n cadrul acestui grup au fost definite limea i alinierea textului din fiecare coloane n parte. Cea de-a patra coloan a tabelului nu face parte din grupul de coloane. Dup nchiderea etichetei <COLGROUP>, celulele de date au fost introduse n mod normal, cu ajutorul etichetei <TD>.
Exemplul 9. 20

<HTML> <HEAD>

<TITLE>tabele20</TITLE> </HEAD> <BODY> <H1 align="center">Grupuri de coloane</H1><HR> <TABLE border width="420" height="200"> <COLGROUP> <COL width="60" align="left"> <COL width="120" align="center"> <COL width="180" align="right"> </COLGROUP> <TR> <TD valign="top">celula 11 <TD>celula 12 <TD valign="bottom">celula 13 <TD>celula 14 <TR> <TD>celula 21 <TD>celula 22 <TD>celula 33 <TD>celula 34 </TABLE> </BODY> </HTML>

Din Figura 9.20 se poate observa c n cadrul celulei 11 este respectat alinierea la stnga a textului, deoarece ea a fost setata ca atare prin construcia <COL width="60" align="left">.
n plus, n cadrul etichetei <TD> a fost stabilita i alinierea pe verticala a textului din celul, atributul valign primind valoarea "top". n celula 12 nu este setat atributul valign astfel nct textul respect alinierea stabilit prin construcia <COL width="120" align="center">. n celula 13 alinierea pe orizontal a textului este stabilit prin construcia <COL width="180" align="right"> iar alinierea pe vertical este setat n cadrul etichetei <TD> la valoarea "bottom". Din figur se mai observ c toate celulele care fac parte din coloanele incluse n blocul <COLGROUP> respect setrile fcute n cadrul acestui bloc (celulele 21, 22 i 23). Celulele 14 i 24 care formeaz coloana a patra a tabelului neinclus n grupul de coloane, respect atributele de aliniere specificate n cadrul etichetei <TD>, dac exist.

Eticheta <COLGROUP> nu este recunoscut de browserele Netscape i prin urmare nici atributele legate de dimensionarea coloanelor i alinierea textului n interiorul lor.

13. Atribute pentru aspectul chenarului unui tabel


Atributul frame Atributul frame al etichetei <TABLE> permite specificarea laturilor din chenarul unui tabel care vor fi vizibile. Valorile posibile ale acestui atribut sunt:

void - elimin toate muchiile exterioare ale tabelului above - afieaz o muchie n partea superioar a cadrului tabelului below - afieaz o muchie n partea inferioar a cadrului tabelului hsides - afieaz cte o muchie n partea superioar i inferioar cadrului tabelului vsides - afieaz o muchie n partea din stnga i din dreapta a cadrului tabelului lhs - afieaz o muchie n partea din stnga a cadrului tabelului rhs - afieaz o muchie n partea din dreapta a cadrului tabelului box - afieaz o muchie pe toate laturile cadrului tabelului

Atributul rules Atributul rules al etichetei <TABLE> permite alegerea unor delimitatori pentru celulele unui tabel. Valorile posibile sunt:

none - elimin toate muchiile interioare ale tabelului rows - afieaz muchii orizontale ntre toate liniile tabelului cols - afieaz muchii verticale ntre toate coloanele tabelului all - afieaz muchii ntre toate liniile i coloanele

Exemplul 9.21 ilustreaz aceste atribute. Atributele frame i rules pot fi combinate i cu atributele de colorare a chenarului i se pot folosi pentru a crea efecte interesante de aliniere n pagin aa cum se poate vedea n Figura 9.21.
Exemplul 9. 21

<HTML> <HEAD> <TITLE>tabele21</TITLE> </HEAD> <BODY> <H1 align="center">Atributele frame si rules</H1><HR> <TABLE bordercolor="red" width="400" frame="lhs" rules="cols"> <TR> <TD>celula 11 <TD>celula 12 <TD>celula 13 <TR> <TD>celula 21 <TD>celula 22 <TD>celula 23 <TR> <TD>celula 21 <TD>celula 22 <TD>celula 23 </TABLE> </BODY> </HTML>

14. Tabele imbricate


Un tabel poate conine n celulele sale i alte elemente n afar de text, inclusiv un alt tabel, formnd astfel un ansamblu de tabele imbricate. n Exemplul 9.22 vom ilustra modul n care se pot imbrica dou tabele.
Exemplul 9. 22

<HTML> <HEAD> <TITLE>tabele22</TITLE> </HEAD> <BODY> <H1 align="center">Imbricarea tabelelor</H1><HR> <TABLE border="5"> <TR> <TD>celula 11 tabelul 1 <TD> <TABLE border> <TR> <TD>celula 11 tabelul 2 <TD>celula 12 tabelul 2 <TR> <TD>celula 21 tabelul 2 <TD>celula 22 tabelul 2 <TR> <TD>celula 31 tabelul 2 <TD>celula 32 tabelul 2 </TABLE> <TR> <TD>celula 21 tabelul 1 <TD>celula 22 tabelul 1 </TABLE> </BODY> </HTML>

Aa cum se vede din Figura 9.22 tabelul este format din dou linii i dou coloane. n celula 21 a tabelului am inclus un alt tabel, format din trei linii i dou coloane.

15. Recomandri privind folosirea tabelelor


Tabelele se numr printre cele mai folosite elemente ntr-o pagin Web. Ele reprezint un instrument practic indispensabil pentru definirea aspectului paginii, ntruct permit alinierea corect a elementelor din pagin: text, imagini, legturi, etc. n interiorul unui tabel se pot include i alte tabele, n funcie de necesiti, formnd o reea de tabele imbricate. Singura precauie pe care trebuie s o avei n vedere cnd folosii tabele n paginile dumneavoastr este cea legat de etichetele i atributele specifice unui anumit tip de browser. Aa dup cum ai observat din exemplele prezentate, aspectul paginilor poate s difere simitor de la un tip de browser la altul, atunci cnd un anumit element nu este recunoscut. Dac vei considera c aspectul tabelelor este esenial pentru paginile site-ului, este recomandat s v limitai la etichetele standard, recunoscute de toate browserele . n Anexa 1 vei gsi o list a celor mai utilizate etichete mpreun cu meniunea dac fac parte din standardul HTML 3.2.

16. Rezumat
Tabelele se insereaz ntr-un document HTML cu ajutorul etichetei container <TABLE>
</TABLE>

Tabelele sunt formate din linii, care se introduc prin eticheta <TR> iar fiecare linie este format din celule introduse prin eticheta <TD>.

Celulele unui tabel pot conine text, etichete de formatare a textului, imagini, legturi, formulare sau alte tabele. Etichetele <TABLE>, <TR> i <TD> au o serie de atribute comune:
align - cnd este asociat cu <TABLE> stabilete alinierea tabelului fa de textul din jur - cnd este asociat cu <TR> stabilete alinierea textului din celulele liniei respective - cnd este asociat cu <TD> stabilete alinierea textului din celul bgcolor stabilete culoarea fundalului pentru ntregul tabel, o linie sau o celul. bordercolor, bordercolordark i bordercolorlight stabilesc culorile chenarelor valign aliniaz textul pe vertical n cadrul tabelului, al celulelor unei linii sau al unei celule individuale

Tabelul n ntregime sau o celul a sa pot avea o imagine ca fundal, specificat cu ajutorul atributului background. Grosimea chenarului tabelului se stabilete cu ajutorul atributului border. Dimensiunile tabelului sau ale unei celule individuale se stabilesc prin intermediul atributelor width i height. Cu ajutorul atributelor cellspacing i cellpadding se stabilesc distana dintre celulele tabelului, respectiv distana dintre coninutul celulelor i marginile lor. Pentru a crea tabele de forme oarecare se folosesc atributele colspan i rowspan care permit extinderea unei celule peste celulele din dreapta ei, respectiv peste celulele de sub ea. Unui tabel i se poate ataa un titlu prin eticheta <CAPTION> i se pot introduce celule cu rol de cap de tabel prin eticheta <TH>. ntr-un tabel se pot defini grupuri de coloane cu ajutorul etichetei container <COLGROUP> </COLGROUP>. n cadrul acestui grup, aspectul fiecrei coloane n parte este stabilit prin eticheta
<COL>.

Modul de afiare al marginilor tabelului precum i al liniilor despritoare dintre linii i celule se poate stabili cu ajutorul atributelor frame i rules.

17. Test
16. La ce servete eticheta <TD>?

a) b) c)
17.

Pentru a insera un tabel n pagin. Pentru a insera o linie ntr-un tabel. Pentru a insera o celul de date ntr-o linie a tabelului.
Urmtoarea construcie genereaz un tabel cu o line i dou celule.

<TABLE bgcolor="white"> <TR bgcolor="red"> <TD bgcolor="blue">celula 11 <TD>Celula 12

</TABLE>

Ce culoare vor avea cele dou celule? a) Amndou alb, deoarece aa este setat culoarea tabelului. b) Amndou rou, deoarece aa a fost setat culoarea liniei. c) Celula 11 albastru, deoarece culoarea ei a fost setat explicit i celula 12 rou, deoarece face parte din linia a crei culoare a fost setat rou.
18. La ce servesc atributele width i height ale etichetei <TABLE>?

a) b) c)
19.

Stabilesc dimensiunile tabelului n pagin. Aliniaz tabelul fa de restul elementelor din pagin. Stabilesc dimensiunile celulelor tabelului.
Ce efect are urmtoarea construcie:

<TABLE border cellspacing="5" cellpadding="10">?

a) Textul din celule este distanat cu 5 pixeli fa de chenarul celulelor, iar celulele sunt distanate ntre ele cu 10 pixeli. b) Textul din celule este distanat cu 10 pixeli fa de chenarul celulelor, iar celulele sunt distanate ntre ele cu 5 pixeli. c) Chenarul tabelului are grosimea de 5 pixeli iar chenarul celulelor grosimea de 10 pixeli.
20. Care dintre urmtoarele construcii aliniaz la dreapta coninutul celor dou celule?

a) <TR align="left"><TD align="right">celula 11<TD>celula 12 b) <TR><TD align="right">celula 11<TD>celula 12 c) <TR align="right"><TD>celula 11<TD>celula 12
21. La ce folosete eticheta <TH>?

a) b) c)
22.

Introduce o celul de date. Introduce o celul cu rol de cap de tabel. Introduce o linie cu rol de cap de tabel.
Pentru a ataa un titlu tabelului folosim eticheta:
<HEAD> <CAPTION> <TITLE>

a) b) c)
23.

Ce efect are atributul colspan n construcia urmtoare:

<TR><TD colspan="3">cel 11 cel 12 cel 13?

a) b) c)
24.

Unific trei celule pe orizontal. Unific trei celule pe vertical. Unific cte trei celule, att pe orizontal ct i pe vertical.
n care dintre construciile urmtoare chenarul tabelului nu este afiat?

a) b) c)
25.

<TABLE border> </TABLE> <TABLE border="0"> </TABLE> <TABLE border="-1"> </TABLE>

Atributul align al etichetei <TABLE> realizeaz:

a) b) c)

Alinierea tabelului fa de restul elementelor din pagin. Alinierea textului n tabel. Alinierea textului n fiecare celul a tabelului

Tabele
1. c) 2. c) 3. a) 4. b) 5. c) 6. b) 7. b) 8. a) 9. b) 10. a)

Capitolul 10 Cadre (frames) O modalitate de structurare avansat a unui document HTML este mprirea ferestrei browserului n mai multe ferestre distincte, denumite cadre (frames). Aceast facilitate permite afiarea simultan, n aceeai fereastr a browserului, a dou sau mai multe documente HTML diferite, cte unul n fiecare cadru. Pentru a realiza acest lucru sunt necesare urmtoarele: un document de definire a cadrelor care conine etichetele care stabilesc numrul, dimensiunile i aezarea cadrelor n pagin cte un fiier HTML pentru fiecare cadru n parte, prin care se stabilete coninutul cadrului respectiv. De exemplu, o pagin Web care conine dou cadre va fi definit prin trei documente HTML: 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 browserului a mai multe pagini, simultan. 1. Documentul de definire a cadrelor n cadrul documentului de definire a cadrelor, blocul <BODY> </BODY> este nlocuit de blocul <FRAMESET> </FRAMESET>. n acest tip de document blocul <BODY> nu mai este folosit. n interiorul blocului <FRAMESET>, fiecare cadru este introdus prin eticheta <FRAME>. Definirea documentului ce va fi afiat ntr-un cadru se face prin atributul src (source). Acesta este un atribut obligatoriu al etichetei <FRAME>, i primete ca valoare adresa URL a documentului HTML care va fi ncrcat n acel cadru. Definirea 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 etichetei <FRAMESET> ce descrie acea fereastr; mprirea unei ferestre n cadre de tip linie se face cu ajutorul atributului rows al etichetei <FRAMESET> care descrie fereastra. Valorile atributelor cols si rows sunt liste de elemente separate prin virgul care descriu modul n care se face mprirea ferestrei. Valorile acestor atribute pot fi exprimate n mai multe moduri: n pixeli n care caz valoarea este un numr ntreg n procente din dimensiunea ferestrei (un numr cuprins ntre 1 i 99, urmat de simbolul %) n dimensiuni relative, n*. Simbolul n* 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 exemplele de mai jos). Exemplul 1: cols="200 , * , 50% , * Aceast construcie descrie o mprire n patru cadre de tip coloan, dintre care prima are 200 pixeli, a treia ocup jumtate din spaiul total disponibil, iar a doua i a patra ocup n mod egal restul de spaiu rmas disponibil. Exemplul 2: rows="200 , 50% , 1* , 2* " n acest exemplu, pagina este mprit n patru cadre de tip linie, dintre care prima are 200 pixeli, 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. Observaii dac mai multe elemente din list sunt configurate cu * , atunci spaiul disponibil rmas pentru ele se va mpri n mod egal. n cadrul unui bloc <FRAMESET> poate fi inclus un cadru prin eticheta <FRAME> sau un alt bloc <FRAMESET> obinndu-se astfel cadre imbricate. n majoritatea exemplelor care vor urma am folosit ca URL-uri pentru documentele pe care le conin cadrele, pagini deja construite n capitolele anterioare. Dac ai salvat documentele HTML cu numele specificate n eticheta <TITLE> putei verifica direct exemplele care vor urma. Dac preferai s ncrcai n cadrele descrise n exemplele urmtoare alte documente, va trebui s facei modificrile necesare specificnd numele acestor fiiere. Exemplul 10.1 mparte pagina n dou cadre verticale, fiecare ocupnd jumtate din pagin. Aspectul paginii este cel din Figura 10.1. Exemplul 10. 1 <HTML> <HEAD> <TITLE>cadre1</TITLE> </HEAD>

<FRAMESET cols="*, *"> <FRAME src="liste1.html"> <FRAME src="liste4.html"> </FRAMESET> </HTML> n Exemplul 10.2 este creat o pagina Web cu trei cadre orizontale. Primul cadru are 100 de pixeli, al treilea ocup 30% din fereastra browserului, iar al doilea ocup restul spaiului. Pagina arat ca n Figura 10.2. Exemplul 10. 2 <HTML> <HEAD> <TITLE>cadre2</TITLE> </HEAD> <FRAMESET rows="100 , * , 30%"> <FRAME src="liste1.html"> <FRAME src="liste2.html"> <FRAME src="liste3.html"> </FRAMESET> </HTML> Exemplul 10.3 creaz o matrice ptrat de 4 cadre (2 x 2). Pentru a realiza acest lucru, se folosesc simultan cele dou atribute cols i rows. Pagina descris n acest document va avea aspectul din Figura 10.3. Exemplul 10. 3 <HTML> <HEAD> <TITLE>cadre3</TITLE> </HEAD> <FRAMESET rows="*, *" cols="*, *"> <FRAME src="tabele1.html"> <FRAME src="tabele2.html"> <FRAME src="tabele4.html"> <FRAME src="tabele6.html"> </FRAMESET> </HTML> 2. Cadre imbricate Cadrele, ca i alte elemente ale paginii Web (liste, tabele), se pot imbrica, adic pot fi incluse cadre n interiorul altor cadre. n Exemplul 10.4 este creat o pagin cu trei cadre mixte. Pentru a construi pagina se procedeaz din aproape n aproape. Mai nti, pagina este mprit n dou cadre de tip coloan, dup care al doilea cadru este mprit n dou cadre de tip linie. Pagina va avea aspectul din Figura 10.4. Exemplul 10. 4 <HTML> <HEAD> <TITLE>cadre4</TITLE> </HEAD> <FRAMESET cols="30%, *"> <FRAME src="tabele1.html"> <FRAMESET rows="*, *"> <FRAME src="tabele2.html">

<FRAME src="tabele4.html"> </FRAMESET> </FRAMESET> </HTML> 3. Controlul aspectului unui cadru Culoarea marginii cadrului Pentru a stabili culoarea chenarului unui cadru se utilizeaz atributul bordercolor. Acest atribut primete ca valoare un nume de culoare sau o culoare definit n conformitate cu modelul RGB. Atributul bordercolor poate fi ataat att etichetei <FRAMESET> pentru a stabili culoarea tuturor chenarelor cadrelor incluse, ct i etichetei <FRAME>, pentru a stabili culoarea chenarului pentru un cadru individual. Exemplul 10.5 ilustreaz atributul bordercolor. Pagina descris n acest document are aspectul din Figura 10.5. Exemplul 10. 5 <HTML> <HEAD> <TITLE>cadre5</TITLE> </HEAD> <FRAMESET cols="20%, *" bordercolor="green" border="15"> <FRAME src="text3.html"> <FRAMESET rows="*, *"> <FRAME src="text4.html" bordercolor="blue"> <FRAME src="text5.html"> </FRAMESET> </FRAMESET> </HTML> Limea marginii cadrului Atributul border al etichetei <FRAMESET> permite configurarea limii chenarelor tuturor cadrelor la un numr dorit de pixeli. Valoarea atributului border este un numr ntreg, ce reprezint numrul de pixeli, valoarea prestabilit fiind de 5 pixeli. n mod prestabilit, chenarul unui cadru este afiat i are aspect tridimensional. Pentru a obine cadre fr chenar se utilizeaz setarea border="0". Afiarea chenarului unui cadru se mai poate dezactiva i dac se utilizeaz atributul frameborder cu valoarea "no". Acest atribut poate fi ataat att etichetei <FRAMESET> (dezactivarea fiind valabil pentru toate cadrele incluse) ct i etichetei <FRAME> (dezactivarea fiind valabila numai pentru un singur cadru). Valorile posibile ale atributului frameborder sunt: yes - echivalent cu 1 no - echivalent cu 0 Cadrele din Exemplul 10.6 nu au chenar. Dup cum putei observa din Figura 10.6 crearea unor cadre fr chenar poate duce la apariia unor ambiguiti n pagin aa nct acest efect trebuie folosit cu atenie.

Exemplul 10. 6 <HTML> <HEAD> <TITLE>cadre6</TITLE> </HEAD> <FRAMESET rows="*, *" border="0"> <FRAME src="tabele1.html"> <FRAME src="tabele2.html"> </FRAMESET> </HTML> Dimensiunea cadrului Chiar dac dimensiunile unui cadru au fost stabilite n mod explicit prin valorile atributelor etichetei <FRAMESET>, utilizatorul are posibilitatea de a altera aceste dimensiuni cu ajutorul mouseului. n scopul prevenirii acestei situaii se poate utiliza atributul noresize, ataat etichetei <FRAME>, al crui efect este cel de blocare a posibilitii de redimensionare a cadrului. 4. Bare de derulare Atributul scrolling al etichetei <FRAME> este utilizat pentru a aduga unui cadru o bar de derulare sau de defilare (scrolling bar), care permite navigarea n interiorul documentului afiat n cadru. Valorile posibile ale atributului scrolling sunt: yes - bara de derulare este prezent ntotdeauna; no - bara de derulare nu este disponibil; auto - bara de derulare este vizibil atunci cnd este necesar. Aceasta opiune las browserului posibilitatea de a aduga sau nu bara, n funcie de dimensiunea textului din cadru. Exemplul 10.7 ilustreaz funcionarea atributului scrolling n cele trei situaii. Exemplul 10. 7 <HTML> <HEAD> <TITLE>cadre7</TITLE> </HEAD> <FRAMESET rows="*, *, *"> <FRAME src="text1.html" scrolling="yes" noresize> <FRAME src="text7.html" scrolling="no" noresize> <FRAME src="text8.html" scrolling="auto" noresize> </FRAMESET> </HTML> Din Figura 10.7 se observ c, deoarece la primul cadru textul nu depete dimensiunea ferestrei, bara de derulare nu este afiat dei atributul scrolling are valoarea "yes". n cel de-al doilea cadru bara de derulare nu este afiat, indiferent de dimensiunea textului din cadru. La cel de-al treilea cadru, prezena sau absena barei de derulare este condiionat de dimensiunea textului. Aici, deoarece textul depete dimensiunea ferestrei, bara este afiata. 5. Poziionarea documentului ntr-un cadru

Atributele marginheight i marginwidth ale etichetei <FRAME> permit stabilirea distanei n pixeli dintre coninutul unui cadru i marginile verticale, respectiv orizontale ale cadrului. Valorile posibile ale acestor atribute sunt: un numr de pixeli procente din nlimea, respectiv din limea cadrului n Exemplul 10.8 fereastra browserului 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. Astfel, n cadrul din stnga, nu este specificat nici o valoare pentru atributele marginheight i marginwidth. n cadrul din mijloc, se stabilete distana de 50 de pixeli ntre marginea superioar i cea inferioar a cadrului i text. n cadrul din dreapta se stabilete o distan de 30 de pixeli ntre marginea din stnga i cea din dreapta a cadrului i text. Pagina are aspectul din Figura 10.8. Exemplul 10. 8 <HTML> <HEAD> <TITLE>cadre8</TITLE> </HEAD> <FRAMESET cols="* , * , *"> <FRAME src="text1.html"> <FRAME src="text1.html" marginheight="60"> <FRAME src="text1.html" marginwidth="40"> </FRAMESET> </HTML> Atenie! 26. Exist browsere care nu suport cadre. Pentru acestea se utilizeaz n interiorul blocului <FRAMESET> eticheta <NOFRAMES> </NOFRAMES>. Dac browserul poate s interpreteze cadre, va ignora ce se gsete n aceast poriune, iar dac nu, materialul cuprins n zona <NOFRAMES> </NOFRAMES> va fi singurul care va fi recunoscut i afiat. Este de precizat i faptul c ntre <NOFRAMES> </NOFRAMES> se pot introduce orice alte etichete HTML (inclusiv imagini, hyperlink-uri, tabele). 6. Cadre interne (in-line frames) Un cadru intern este specificat prin intermediul etichetei <IFRAME> </IFRAME>. Ea definete o arie rectangular n interiorul documentului, arie n care browserul va afia un alt document HTML, complet, inclusiv marginile i barele de derulare. Un cadru intern se insereaz ntr-o pagina Web n mod asemntor cu o imagine, n interiorul blocului <BODY>, aa cum rezult din urmtorul exemplu: <IFRAME src="tabele10.html" height=40% width=50%> </IFRAME> n acest caz, am specificat c dorim un cadru intern care are 40% din nlimea i 50% din limea paginii curente. Atributele acceptate de eticheta <IFRAME> sunt n parte preluate de la etichetele <FRAME> i <FRAMESET>, cum ar fi: src, border, frameborder, bordercolor, marginheight, marginwidth, scrolling, name.

O parte din atributele <FRAME> sunt comune cu cele ale etichetei <IMG>: vspace, hspace, align, width, height. n Exemplul 10.9 am construit un cadru intern n care se deschide unul dintre documentele HTML create la capitolul Tabele. Exemplul 10. 9 <HTML> <HEAD> <TITLE>cadre9</TITLE> </HEAD> <BODY> <H1 align="center">Cadre interne</H1><HR> <CENTER> <IFRAME width="60%" height="50%" name="icad" src="tabele4.html"> Daca vedeti acest text inseamna ca browserul dumnevoastra nu suporta cadre interne. <P><A href="cadre10.html">Pagina fara cadre interne</A> </IFRAME> </CENTER> </BODY> </HTML> Din Figura 10.9 putei observa c aspectul unui cadru intern este ntructva similar cu cel al unei imagini in-line. Eticheta <IFRAME> se introduce n cadrul blocului <BODY> i n cazul folosirii ei nu mai este necesar un document de definire a cadrelor. Pentru situaia cnd browserul nu accept cadre interne, am asigurat o versiune a paginii care nu conine astfel de cadre (cadre10.html) introdus prin eticheta <A>. Coninutul acestei pagini este foarte simplu, servind doar la ilustrarea modului n care poate fi construit o alternativ la pagina cu cadre interne (Exemplul 10.10) Exemplul 10. 10 <HTML> <HEAD> <TITLE>cadre10</TITLE> </HEAD> <BODY> <H1 align="center">Pagina fara cadre interne</H1><HR> </BODY> </HTML> Iat un alt exemplu (Exemplul 10.11) n care am creat o pagin care conine trei link-uri iar acestea deschid paginile referite de ele n cadrul intern din centrul paginii. Figura 10.10 red aspectul acestei pagini. Exemplul 10. 11 <HTML> <HEAD> <TITLE>cadre11</TITLE> </HEAD> <BODY> <A href="tabele4.html" target="icad">Fisierul1</A><BR> <A href="tabele5.html" target="icad">Fisierul2</A><BR> <A href="tabele6.html" target="icad">Fisierul3</A><BR> <CENTER> <IFRAME width="60%" height="50%" name="icad" src="cadre11.html"> Daca vedeti acest text inseamna ca browserul dumnevoastra nu suporta cadre interne.

<P><A href="cadre10.html">Pagina fara cadre interne</A> </IFRAME> </CENTER> </BODY> </HTML> n exemplu am folosit atributul name al etichetei <IFRAME> cu ajutorul cruia am atribuit un nume acestui cadru i anume "icad". Acest lucru a fost necesar pentru a specifica, prin intermediul atributului target al etichetei <A>, faptul c link-urile se vor deschide n cadrul intern. 7. Deschiderea documentelor n alte cadre Dac ntr-unul dintre documentele deschise n cadru exist link-uri, acestea vor deschide paginile referite de ele n cadrul curent. Acest comportament se poate schimba prin plasarea n eticheta <A> a atributului target, care precizeaz numele ferestrei (cadrului) n care se va ncrca pagina nou referit de legtur, conform sintaxei: <A href="URL" target="nume_frame"> </A> Numele unui cadru este stabilit prin atributul name al etichetei <FRAME> conform sintaxei: <FRAME name="nume_frame"> n Exemplul 10.12 este prezentat o pagina Web cu dou cadre. Documentul de definire a cadrelor este cadre12. html al crui aspect este redat n Figura 10.11. Exemplul 10. 12 <HTML> <HEAD> <TITLE>cadre12</TITLE> </HEAD> <FRAMESET cols="20%, *"> <FRAME src="cadre13.html"> <FRAME src="cadre14.html" name="cadru_dreapta"> </FRAMESET> </HTML> Documentul de definire a cadrelor mparte pagina n dou cadre de tip coloan. n cel din stnga se va deschide documentul cadre13.html iar n cel din dreapta, documentul cadre14.html. Cel de-al doilea cadru a fost numit "cadru_dreapta". n Exemplul 10.13 este creat documentul cadre13.html. Acest document conine, dup cum observai, patru link-uri. Prin intermediul atributului target am specificat cadrul n care se vor deschide acestea. Toate aceste legturi deschid paginile referite de ele n cadrul drept. Exemplul 10. 13 <HTML> <HEAD> <TITLE>cadre13</TITLE> </HEAD> <BODY> <A href="tabele6.html" target="cadru_dreapta"> Legatura 1

</A><BR> <A href="tabele7.html" target="cadru_dreapta"> Legatura 2 </A><BR> <A href="tabele8.html" target="cadru_dreapta"> Legatura 3 </A><BR> <A href="cadre14.html" target="cadru_dreapta"> Home </A><BR> </BODY> </HTML> n Exemplul 10.14 este creat documentul cadre14.html. Exemplul 10. 14 <HTML> <HEAD> <TITLE>cadre14</TITLE> </HEAD> <BODY> <H3>Aici se vor deschide paginile referite de legaturile din cadrul stang</H3><HR> </BODY> </HTML> Salvai cele trei fiiere cu numele specificate i deschidei cu browserul fiierul cadre12.html pentru a observa cum funcioneaz atributele prezentate. Atributul target al etichetei <FRAME> accept i anumite valori predefinite i anume: _self - ncrcarea noii pagini are loc n cadrul curent _blank - ncrcarea noii pagini are loc ntr-o fereastr nou, anonim _parent - ncrcarea noii pagini are loc n cadrul printe al cadrului curent dac acesta exist, altfel are loc n fereastra curent a browserului _top - ncrcarea noii pagini are loc n fereastra browserului ce conine cadrul curent. Urmtorul exemplu ilustreaz felul cum funcioneaz aceste valori ale atributului target. Documentul de definire a cadrelor este prezentat n Exemplul 10.15 aspectul su fiind cel din Figura 10.12. Pagina construit n acest exemplu conine dou cadre orizontale. n cel de sus este ncrcat documentul cadre17.html iar n cel de jos, documentul cadre16.html. Exemplul 10. 15 <HTML> <HEAD> <TITLE>cadre15</TITLE> </HEAD> <FRAMESET rows="30%, *"> <FRAME src="cadre17.html"> <FRAME src="cadre16.html"> </FRAMESET> </HTML> Exemplul 10.16 construiete documentul cadre16.html care conine trei legturi ctre fiiere HTML create la capitolul Formatarea textului. Fiecare dintre aceste legaturi are specificat atributul target pentru a ilustra modul n care funcioneaz acesta.

Exemplul 10. 16 <HTML> <HEAD> <TITLE>cadre16</TITLE> </HEAD> <BODY> <A href="text4.html" target="_blank"> Aceasta legatura se deschide in alta fereastra </A><BR> <A href="text5.html" target="_self"> Aceasta legatura se deschide in fereastra curenta </A><BR> <A href="text6.html" target="_parent"> Aceasta legatura se deschide in fereastra parinte </A><BR> </BODY> </HTML> Documentul cadre17.html prezentat n Exemplul 10.17 este o pagin Web foarte simpl care se va deschide n cadrul de sus. Exemplul 10. 17 <HTML> <HEAD> <TITLE>cadre17</TITLE> </HEAD> <BODY> <H1 align="center">Atributul target</H1> </BODY> </HTML> Pentru a observa modul de funcionare al atributului target salvai cele trei fiiere sub numele specificate i deschidei cu browserul documentul cadre15.html. 8. Sugestii privind folosirea cadrelor Dei cadrele reprezint o maniera destul de spectaculoas de a structura o pagin Web, ele prezint o mulime de dezavantaje. ncrcarea unei pagini care conine cadre se face mai greu, indexarea paginii de ctre motoarele de cutare este mai dificil. De asemenea, deoarece documentul din fiecare cadru are propriul URL , este mai greu pentru vizitator s rein adresa paginii n Favorites. i, nu n ultimul rnd, deoarece exist browsere care nu suport cadrele, este indicat s asigurai pentru fiecare pagin astfel structurat i o versiune fr cadre, ceea ce implic un efort suplimentar. Avnd n vedere toate aceste aspecte, este bine s limitai folosirea cadrelor n paginile dumneavoastr doar la situaiile n care nu putei proceda altfel. 9. Rezumat Folosirea cadrelor ntr-un document HTML permite deschiderea mai multor pagini distincte n documentul respectiv. Pentru a crea o pagin care conine cadre sunt necesare mai multe documente HTML: documentul de definire a cadrelor

cte un document HTML pentru fiecare cadru definit Documentul de definire a cadrelor nu conine blocul <BODY> acesta fiind nlocuit de blocul <FRAMESET> </FRAMESET>. n cadrul blocului <FRAMESET> fiecare cadru este introdus prin eticheta <FRAME>. mprirea ferestrei n cadre de tip coloan se face cu ajutorul atributului cols iar n cadre de tip linie se face cu ajutorul atributului rows. Ambele atribute sunt asociate etichetei <FRAMESET>. Pentru a stabili limea chenarului unui cadru se folosete atributul border al etichetei <FRAME>. Pentru a stabili culoarea chenarului unui cadru se folosete atributul bordercolor al etichetei <FRAME>. Aceste atribute pot fi asociate i etichetei <FRAMESET>, caz n care efectul lor se va aplica tuturor cadrelor din set. Prezena barelor de derulare ntr-un cadru se stabilete cu ajutorul atributului scrolling. Pentru a poziiona documentul ntr-un cadru se folosesc atributele marginwidth i marginheight. ntr-o pagin Web se pot introduce i cadre interne, cu ajutorul etichetei <IFRAME> </IFRAME>. Pentru a specifica fereastra sau cadrul n care se va deschide un document se folosete atributul target care poate avea ca valoare numele ferestrei (cadrului) sau poate avea o valoare predefinit. Este recomandat s asigurai o versiune fr cadre a documentului HTML, pentru ca acesta s poat fi vizualizat cu browserele care nu suport cadre. Pentru aceasta, elementele care fac parte din versiunea fr cadre se includ ntre etichetele <NOFRAMES> </NOFRAMES>. 10. Test 27. a) b) c) n ce zon a unui document HTML se introduce blocul <FRAMESET>? n blocul <BODY> n blocul <HEAD> <FRAMESET> formeaz un bloc separat.

Cum se introduce un cadru n pagin? a) b) c) Prin eticheta <FRAMESET> Prin eticheta <FRAME> Prin eticheta <SRC>

Dorim s mprim o pagin n trei cadre de tip coloan, primul avnd jumtate din pagin, iar celelalte dou spaiul rmas mprit n mod egal. Care dintre construciile urmtoare realizeaz acest lucru? a) b) c) <FRAMESET cols="* , *, *" <FRAMESET cols="50%, 1* , 2*" <FRAMESET cols="50%, * , *"

Ce realizeaz urmtoarea construcie? <HTML>

<FRAMESET cols="*, *"> <FRAME src="frame1.html"> <FRAMESET rows="*, *"> <FRAME src="frame2.html"> <FRAME src="frame3.html'> </FRAMESET> </FRAMESET> </HTML> a) mparte pagina n patru cadre, dou de tip coloan, dou de tip linie. b) mparte pagina n dou cadre de tip coloan, cel de-al doilea fiind mprit n dou cadre de tip linie. c) mparte pagina n trei cadre de tip linie. n construcia urmtoare la ce folosete atributul scrolling? <FRAME src="frame1.html" scrolling="auto"> a) Permite auto-dimensionarea cadrului n funcie de mrimea textului. b) Adaug automat bara de derulare pentru acest cadru. c) Las browserului posibilitatea de a aduga sau nu bara de derulare, n funcie de mrimea textului din cadru. La ce folosesc atributele marginheight i marginwidth ale etichetei <FRAME>? a) b) c) Dimensioneaz marginile cadrului. Dimensioneaz chenarul cadrului. Stabilesc distana dintre marginile cadrului i coninutul su.

Unde se introduce eticheta <IFRAME>? a) b) c) n blocul <BODY> n blocul <FRAMESET> n blocul <FRAME>

La ce servete atributul bordercolor asociat etichetei <FRAMESET>? a) b) c) Stabilete culoarea chenarului unui cadru. Stabilete culoarea chenarelor tuturor cadrelor definite n <FRAMESET>. Stabilete culoarea de fond a cadrelor definite n <FRAMESET>.

Care dintre urmtoarele construcii este corect? a) b) c) <FRAME name="nume_cadru"> <FRAMESET name="nume_cadru"> <FRAMESET href="nume_cadru">

Cum se realizeaz deschiderea documentului dintr-un cadru ntr-o fereastra nou? a) b) c) <FRAME src="frame1.html" target="_self"> <FRAME src="frame1.html" target="_blank"> <FRAME src="frame1.html" target="_parent">

Cadre
1. c) 2. b) 3. c) 4. b) 5. c) 6. c) 7. a) 8. b) 9. a) 10. b)

Capitolul 11 Formulare Cu siguran ai vzut cum arat un formular ntr-o pagin Web. De exemplu, atunci cnd completai o carte de oaspei (guestbook) avei de-a face cu un formular. Atunci cnd selectai mai multe opiuni dintr-o list sau introducei un cuvnt ntr-un motor de cutare, folosii, de asemenea, un formular. Formularul reprezint unul dintre cele puternice elemente ale unei pagini Web. Prin intermediul formularelor se realizeaz interactivitatea cu vizitatorul paginii, acestea permindu-v s obinei informaii despre cei care viziteaz paginile dumneavoastr. 1. Ce este un formular? Un 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. Aceste informaii sunt ulterior transmise serverului pe care este gzduit pagina dumneavoastr, unde vor putea fi prelucrate. O sesiune cu o pagina Web ce conine un formular cuprinde dou etape: Utilizatorul completeaz formularul i, prin apsarea butonului de expediere, trimite serverului datele nscrise n formular. O aplicaie dedicat de pe server (un script) analizeaz informaiile transmise i, n funcie de configuraia scriptului, fie stocheaz datele ntr-o baz de date, fie le transmite la o adres de mail indicat de dumneavoastr. Dac este necesar, serverul poate expedia i un mesaj de rspuns utilizatorului. Cel 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. Prima dintre ele este plasarea formularului n pagin i asigurarea bunei lui funcionri. Acest lucru se realizeaz prin HTML i de el ne ocupm n acest capitol. Cea de-a doua este gestionarea i prelucrarea informaiilor pe care vizitatorul le introduce prin intermediul formularului. Aceast problem este rezolvat cu ajutorul scripturilor CGI stocate pe server, subiect despre care vom vorbi n capitolul urmtor.

Structura formularele poate varia, de la o simpl caset de text pentru introducerea unui ir de caractere, pn la un ansamblu complex, cu multiple seciuni i care ofer faciliti puternice de transmitere/prelucrare a datelor. 2. Crearea unui formular Un formular este definit ntr-un bloc delimitat de etichetele <FORM> </FORM>. Eticheta </FORM>, de nchidere, este obligatorie. n interiorul blocului sunt incluse: elementele formularului, n care vizitatorul urmeaz s introduc informaii un buton de expediere (submit), la apsarea cruia, datele sunt transmise ctre server opional, un buton de anulare (reset, cancel), prin care utilizatorul poate anula datele nscrise n formular Tot ceea ce este inclus ntre eticheta de deschidere i cea de nchidere face parte din formular. Eticheta <FORM> are dou atribute eseniale: action comunic browserului unde s trimit datele introduse n formular. n general valoarea atributului action este adresa URL a scriptului aflat pe serverul care primete datele formularului. De exemplu: <FORM action="http://www.yahoo.com/cgi-bin/nume_fis.cgi">. method - precizeaz metoda utilizat de browser pentru expedierea datelor formularului. Atributul method 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 implicit) - datele din formular sunt adugate la adresa URL precizat de atributul action, ntre adresa URL i date fiind inserat un "?". Datele sunt adugate conform sintaxei: nume_camp=valoare_camp. ntre diferite seturi de date este introdus un "&". De exemplu: "http://www.yahoo.com/cgi-bin/nume_fis.cgi? nume1=valoare1&nume2=valoare2" Cea mai facil cale prin care informaiile introduse ntr-un formular pot parveni creatorului paginii este folosirea comenzii mailto: Am mai ntlnit aceast comand la capitolul Legturi n contextul urmtor: <A href="mailto:autor@domeniu.com"> De data aceasta nu mai este vorba de crearea unei legturi care s lanseze n execuie aplicaia de mail a utilizatorului, ci de transmiterea datelor introduse n formular la o adres de mail specificat de dumneavoastr. Acest lucru se poate realiza preciznd ca valoare a atributului action urmtoarea secven: "mailto:adresa_mail", ca n exemplul urmtor: <FORM action=mailto:autor@domeniu.com method="post">

Aa cum spuneam, atributul action comunic browserului unde s trimit datele introduse n formular. Folosind comanda mailto: browserului i se indic s trimit datele la adresa de mail specificat n comand. Din pcate, aceast comand nu este executat n acest mod dect de browserele Netscape. Browserele Internet Explorer nu recunosc comanda mailto: prezent n cadrul formularelor. Acestea o execut la fel cum este ea executat atunci cnd face parte din eticheta <A> ca valoare a atributului href adic lanseaz aplicaia de mail a utilizatorului. Din acest motiv, inclusiv pentru trimiterea datelor la o adres specificat de mail, se folosesc scripturi CGI. Pentru a nu intra nc n amnunte privind scripturile, vom folosi totui n exemplele urmtoare comanda mailto: Reinei totui c afiarea corect a unui formular n pagin nu este dect prima etap a utilizrii formularului. Pentru 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. Pentru a defini elementele care fac parte din formular se utilizeaz etichetele <INPUT>, <SELECT>, <OPTION> i <TEXTAREA>. 3. Eticheta <INPUT> Prin intermediul etichetei <INPUT> se pot introduce n formular cmpuri de editare (casete de text), cmpuri de tip password, butoane de expediere i anulare, butoane radio i casete de validare. Eticheta <INPUT> are urmtoarele atribute: type - 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. Perechea de atribute name/value (nume/valoare) este deosebit de important pentru buna funcionare a formularului. Fiecare element introdus prin eticheta <INPUT> reprezint o variabil. Informaia introdus de utilizator n cmpul elementului respectiv reprezint valoarea pe care o primete aceast variabil. Din acest motiv, toate elementele introduse prin eticheta <INPUT> trebuie s aib atribuit un nume. Acest 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. Altminteri, scriptul CGI care prelucreaz datele nu va ti s fac distincia ntre variabile avnd acelai nume i valori diferite. Atributul type poate avea urmtoarele valori: text - se folosete pentru a introduce un cmp de editare pe o singur linie password se folosete pentru a insera un cmp de editare n care caracterele introduse sunt nlocuite cu asteriscuri (*) radio 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 ele) checkbox 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 variant) submit se folosete pentru a introduce un buton de expediere

reset 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 hidden - se folosete pentru a introduce n formular un cmp ascuns Fiecare dintre valorile atributului type genereaz un anumit tip de element n cadrul formularului. Exemplul 11.1 creeaz un formular foarte simplu care conine un cmp de editare i un buton de expediere. Aspectul formularului este redat n Figura 11.1. Exemplul 11. 1 <HTML> <HEAD> <TITLE>formulare1</TITLE> </HEAD> <BODY> <H1 align="center"> Caseta de text si buton de expediere</H1><HR> <FORM action="mailto:adresa@yyy.com" method="post"> Introduceti adresa dvs. de mail: <INPUT type="text" name="adresa" value="adresa mail"><BR> <INPUT type="submit" value="expediaza"> </FORM> </BODY> </HTML> Dup cum observai, numele atribuit cmpului de editare este "adresa" iar atributul value a primit ca valoare irul de caractere "adresa mail". Acest text va fi afiat n interiorul cmpului de editare, nainte ca utilizatorul s nceap introducerea informaiilor. Dac atributul value nu era prezent sau era iniializat cu stringul vid ( "" ), caseta de text ar fi fost goal. n cadrul formularului este prezent i un buton de expediere, inserat de asemenea prin intermediul etichetei <INPUT> avnd atributul type setat cu valoarea "submit". Aa cum se observ din figur, pe buton este afiat textul "expediaza", deoarece pentru acest element, atributului value i-a fost atribuit ca valoare textul respectiv. Casete de text n Exemplul 11.2 am creat un formular care conine trei casete de text (cmpuri de editare) n care utilizatorul este rugat s introduc numele, prenumele i adresa de mail, precum i o caset de tip password, care cere introducerea unei parole. Aa cum vei observa din Figura 11.2, o caset de tip password 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 expediere i unul de anulare a datelor introduse. Exemplul 11. 2 <HTML> <HEAD> <TITLE>formulare2</TITLE> </HEAD> <BODY> <H1 align="center">Casete de text</H1><HR> <FORM action="mailto:adresa@yyy.com" method="post"> Introduceti numele: <INPUT type="text" name="nume" value=""><BR> Introduceti prenumele: <INPUT type="text" name="prenume" value=""><BR>

Introduceti adresa de mail: <INPUT type="text" name="mail" value=""><BR> Introduceti parola: <INPUT type="password" name="parola"><BR> <INPUT type="reset" value="sterge"> <INPUT type="submit" value="expediaza"> </FORM> </BODY> </HTML> Pentru elementele de tip caset de text i password sunt utile i atributele: maxlength care stabilete numrul maxim de caractere care poate fi introdus n cmpul de editare size care stabilete limea acestui cmp Butoane radio n Exemplul 11.3 am creat un formular care conine un ir de butoane radio, prin care se cere prerea vizitatorului despre o pagin Web. Dup 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 exclus. Fiecare buton radio trebuie s aib o valoare. Din acest motiv pentru fiecare buton atributul value a fost setat la o alt valoare. Alegerea uneia dintre opiuni, de exemplu "buna", face ca variabila "opinie" s primeasc valoarea "buna". Prin urmare, serverului i va fi transmis perechea "opinie=buna". n plus, observai prezena atributului checked, care are rolul de a prestabili o anumit opiune, pe care ns utilizatorul o poate schimba, dac dorete. Aspectul formularului este cel din Figura 11.3. Exemplul 11. 3 <HTML> <HEAD> <TITLE>formulare3</TITLE> </HEAD> <BODY> <H1 align="center">Butoane radio</H1><HR> <FORM action="mailto:adresa@yyy.com" method="post"> Ce parere aveti despre aceasta pagina?<BR> <INPUT type="radio" name="opinie" value="foarte buna" checked>Foarte buna<BR> <INPUT type="radio" name="opinie" value="buna">Buna<BR> <INPUT type="radio" name="opinie" value="destul de buna">Destul de buna<BR> <INPUT type="radio" name="opinie" value="proasta">Proasta<BR> <INPUT type="reset" value="anuleaza"> <INPUT type="submit" value="expediaza"> </FORM> </BODY> </HTML> Casete de validare Exemplul 11.4 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. Figura 11.4 red aspectul formularului construit n acest exemplu. Exemplul 11. 4

<HTML> <HEAD> <TITLE>formulare4</TITLE> </HEAD> <BODY> <H1 align="center">Casete de validare</H1><HR> <FORM action="mailto:adresa@yyy.com" method="post"> Care sunt hobby-urile dumneavoastra?<BR> <INPUT type="checkbox" name="hobby" value="sport">Sport<BR> <INPUT type="checkbox" name="hobby" value="film">Film<BR> <INPUT type="checkbox" name="hobby" value="lectura">Lectura<BR> <INPUT type="checkbox" name="hobby" value="jocuri">Jocuri pe computer<BR> <INPUT type="checkbox" name="hobby" value="internet">Surfing pe net<BR> <INPUT type="checkbox" name="hobby" value="alpinism">Alpinism<BR> <INPUT type="submit" name="submit" value="expediaza"> </FORM> </BODY> </HTML> O caset de validare are dou stri: marcat sau nemarcat ( on sau off). Ca i la butoanele radio, atributul name are n exemplul considerat o singur valoare, "hobby", iar atributul value are, pentru fiecare caset, valori distincte. Serverului 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 checked care preselecteaz o anumit opiune sau mai multe. Butoane n cadrul unui formular se pot introduce i butoane obinuite (altele dect butoanele Submit i Reset). Rolul acestora este de a iniia anumite aciuni n momentul cnd utilizatorul face click cu mouse-ul pe ele. Limbajul HTML nu ofer instrumentele necesare pentru a specifica ce anume se ntmpl cnd butonul este apsat. Pentru aceasta este necesar s includei n documentul HTML scripturi JavaScript care s trateze aceste evenimente. Ca i butoanele Submit i Reset, butoanele obinuite sunt incluse n formular cu ajutorul etichetei <INPUT> avnd atributul type setat la valoarea button: <INPUT type="button" name="buton" value="text">. Textul specificat ca valoare a atributului value va fi afiat pe buton. Butoanele pot fi folosite pentru a valida informaiile introduse n formular, pentru a deschide documente i a iniia diverse alte aciuni din partea browserului. Cmpuri ascunse (hidden fields) Cmpurile ascunse sunt elemente care fac parte dintr-un formular dar nu sunt vizibile n cadrul paginii. Prin intermediul acestora se pot include n formular informaii care nu pot fi alterate de browser sau de utilizator. Introducerea unui astfel de cmp n formular se face prin eticheta <INPUT type="hidden">. Ca i n cazul celorlalte elemente ale formularului este necesar prezena atributelor name i value, ca n exemplul urmtor:

<INPUT type="hidden" name="ascuns" value="modifica"> Cmpurile ascunse pot servi la o gestionare mai bun a datelor transmise la server. De exemplu, s presupunem c avem un formular care cere utilizatorului cteva informaii iniiale: numele i adresa. Pe baza acestora, aplicaia de pe server iniiaz afiarea unui nou formular care solicit introducerea unor informaii mai detaliate. Deoarece 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. Etichetele <SELECT> i <OPTION> Cu ajutorul etichetei <SELECT> </SELECT> se poate introduce ntr-un formular un meniu derulant. Crearea unui meniu pentru vizitatorii paginii i ajut la selectarea unor opiuni dintr-o list predefinit. Fiecare opiune care face parte din blocul <SELECT> se introduce prin eticheta <OPTION>. n Exemplul 11.5 este construit un meniu derulant, din care vizitatorul poate selecta opiunea dorit. Atributul name are acelai rol ca i n eticheta <INPUT>. Dac vizitatorul selecteaz din meniu zodia Taur, de exemplu, la apsarea butonului de expediere, serverului i este transmis perechea: "zodia=taur". Atributul size este setat la valoarea "1". Setarea atributului size la valoarea "1" creeaz o un meniu derulant cu o singur opiune vizibil iniial aa cum se poate observa din Figura 11.5. Exemplul 11. 5 <HTML> <HEAD> <TITLE>formulare5</TITLE> </HEAD> <BODY> <H1 align="center">Meniu derulant</H1><HR> <FORM action="mailto:adresa@yyy.com" method="post"> Care este zodia dumneavoastra?<BR> <SELECT name="zodia" size="1"> <OPTION>Berbec <OPTION>Taur <OPTION>Gemeni <OPTION>Rac <OPTION>Leu <OPTION>Fecioara <OPTION>Balanta <OPTION>Scorpion <OPTION>Sagetator <OPTION>Capricorn <OPTION>Varsator <OPTION>Pesti </SELECT> <INPUT type="submit" value="expediaza"> </FORM> </BODY> </HTML>

Dac atributul size este setat la o valoare mai mare dect 1 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 Figura 11.6 poate fi vzut un meniu la care valoarea atributului size este 6. 5. Eticheta <TEXTAREA> Cu ajutorul etichetei <TEXTAREA> </TEXTAREA> putei insera n pagin o caset de text multi-linie care permite vizitatorului s introduc un text mai lung, care se poate ntinde pe mai multe linii. Aceast etichet se folosete atunci cnd dorim s cerem vizitatorului o opinie despre un anumit subiect, care necesit introducerea unui text mai lung dect o singur linie (acest element se mai numete i caset de comentarii). <TEXTAREA> este o etichet container, deci necesit eticheta de nchidere </TEXTAREA>. Atributele rows i cols stabilesc numrul de linii, respectiv de coloane rezervate pentru introducerea textului. Exemplul 11.6 introduce n pagin o caset pentru comentarii, aspectul acesteia fiind redat n Figura 11.7. Exemplul 11. 6 <HTML> <HEAD> <TITLE>formulare6</TITLE> </HEAD> <BODY> <H1 align="center">Caseta de comentarii</H1><HR> <FORM action="mailto:adresa@yyy.com" method="post"> Care este opinia dumneavoastra despre acest film?<BR> <TEXTAREA name="comentariu" rows="10" cols="40"></TEXTAREA><BR> <INPUT type="submit" value="expediaza"> </FORM> </BODY> </HTML> Toate 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. Dac 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. O posibilitate de a alinia elementele coninute ntr-un formular este folosirea tabelelor. Exemplul 11.7 conine elemente de mai multe tipuri ncadrate ntr-un formular unic. Pentru alinierea unora dintre ele am folosit un tabel. Aspectul paginii descrise n acest document este cel din Figura 11.8. Exemplul 11. 7 <HTML> <HEAD> <TITLE>formulare7</TITLE> </HEAD> <BODY> <H1 align="center">Alinierea elementelor</H1><HR> <FORM action="mailto:adresa@yyy.com" method="post"> <H3>Comandati Pizza</H3><P> <P>Cate pizza doriti? <INPUT name="nrpizza" value="0" size=3 maxlength=3><P>

<INPUT type="radio" name="marime" value="mare" checked>Mare<BR> <INPUT type="radio" name="marime" value="medie">Medie<BR> <INPUT type="radio" name="marime" value="normala">Normala <P>Topping-uri<P> <INPUT type="checkbox" name="topping" value="salam">Salam<BR> <INPUT type="checkbox" name="topping" value="carnati">Carnati<BR> <INPUT type="checkbox" name="topping" value="sunca">Sunca<BR> <INPUT type="checkbox" name="topping" value="ciuperci">Ciuperci<BR> <INPUT type="checkbox" name="topping" value="ceapa">Ceapa<BR> <INPUT type="checkbox" name="topping" value="masline">Masline <P> <TABLE width="60%"> <TR> <TD width="20%">Numele <TD><INPUT type="text" name="nume"> <TR> <TD width="20%">Telefonul <TD><INPUT type="text" name="telefon"> <TR> <TD width="20%">Adresa <TD><TEXTAREA name="adresa" rows=6 cols=50></TEXTAREA> <TR> <TD width="20%">Numrul cartii de credit <TD><INPUT type="password" name="creditcard" size=20> </TABLE> <P> <CENTER> <INPUT type="submit" value="Trimite comanda"> </CENTER> </FORM> </BODY> </HTML> 6. Validarea datelor Unul 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. Limbajul HTML ofer relativ puine instrumente pentru ndeplinirea acestei sarcini. Totui, avei la dispoziie cteva posibiliti. Folosii atributul maxlength atunci cnd introducei un cmp de editare, pentru a mpiedica vizitatorul s introduc un numr eronat de caractere. De exemplu, dac cerei introducerea ntr-o caset de text a codului numeric personal, acea caset nu trebuie s permit introducerea a mai mult de 13 caractere, un cmp de editare care cere introducerea codului potal nu trebuie s permit introducerea a mai mult de 4 caractere, etc. Pentru a v asigura c vizitatorul introduce date corecte ntr-un cmp de editare (de exemplu o adres de mail valid trebuie s conin obligatoriu caracterul "@") nu exist instrumente HTML. Pentru a realiza astfel de sarcini sunt necesare scripturi JavaScript. n capitolul JavaScript vei gsi scripuri utile care fac posibile validrile datelor, nc din momentul introducerii lor. Folosii de cte ori este posibil butoanele radio, casetele de validare i meniurile, pentru a simplifica procesul de introducere a datelor. Fii ct mai explicit, asigurai indicaiile necesare pentru

completarea formularelor, preciznd, unde este cazul, dac pot fi selectate mai multe opiuni sau numai una singur. Atenie! Asigurai-v c scriptul care prelucreaz informaiile din formular are faciliti de gestionare a erorilor. Dac este semnalat o eroare, furnizai vizitatorului un mesaj de eroare explicit i, eventual, cteva corecii posibile. Una dintre cele mai frustrante situaii este ca dup completarea unui formular complex, 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. Nu uitai un amnunt foarte important: informaiile introduse de vizitatori n formulare v sunt necesare dumneavoastr, pentru a mbunti eficiena i calitatea site-ului sau chiar pentru a derula afaceri prin intermediul su. De aceea corectitudinea acestor date este esenial. Facei n aa fel nct vizitatorii site-ului dumneavoastr s completeze uor i cu plcere formularele prezente n pagini. 7. Rezumat Formularele servesc la stabilirea unei legturi interactive cu vizitatorii unei pagini Web i la obinerea de informaii de la acetia. Un formular se introduce n pagin cu ajutorul etichetei <FORM> </FORM>. n cadrul acestei etichete pot fi incluse diverse elemente care fac parte din formular: prin eticheta <INPUT> pot fi introduse cmpuri de editare, cmpuri de tip password, butoane radio, casete de selecie, butoane de expediere, butoane de anulare i butoane obinuite prin eticheta <SELECT> pot fi introduse meniuri derulante, fiecare element al meniului fiind introdus prin eticheta <OPTION> prin eticheta <TEXTAREA> pot fi introduse cmpuri de editare multilinie. Pentru a specifica unde vor fi trimise datele introduse n formular se folosete atributul action al etichetei <FORM>. Pentru a stabili modul n care aceste date sunt transmise se folosete atributul method al etichetei <FORM>. Formularele reprezint partea vizibil a procesului de interaciune cu vizitatorul paginii Web. Odat ce datele au fost introduse n cmpurile formularului, ele trebuie transmise, prelucrate i stocate, n funcie de nevoile creatorului paginii. Acest lucru se realizeaz cu ajutorul scripturilor CGI instalate pe server, despre care vom vorbi n capitolul urmtor. 8. Test 1. Ce atribut indic browserului unde s trimit informaiile din formular? a) b) c) input action method

2. Care dintre aceste valori nu aparine atributului method?

a) b) c)

Get Href Post

3. Care dintre urmtoarele afirmaii este fals? a) b) c) Prin eticheta <INPUT> se pot introduce n formular cmpuri de editare de tip password. Prin eticheta <INPUT> se pot introduce n formular butoane radio. Prin eticheta <INPUT> se pot introduce n formular meniuri derulante.

4. Pentru a introduce n formular un buton de expediere se folosete construcia: a) b) c) <INPUT type="reset"> <INPUT type="submit"> <INPUT type="forward">

5. Fie urmtoarea construcie: <FORM action="mailto:adresa@yyy.com" method="post"> <INPUT type="radio" name="limba" value="romana">Limba romana <INPUT type="radio" name="limba" value="germana">Limba germana <INPUT type="radio" name="limba" value="maghiara">Limba maghiara </FORM> Dac este bifat opiunea Limba romana, care este perechea nume/valoare care va fi transmis serverului? a) b) c) "limba=Limba romana" "limba=romana" "radio=romana"

6. Care este diferena dintre un cmp de editare de tip text i unul de tip password? a) ntr-un cmp de tip text se pot introduce mai multe linii, ntr-unul de tip password o singur linie. b) ntr-un cmp de tip text caracterele introduse sunt afiate, ntr-unul de tip password sunt nlocuite cu asteriscuri. c) Cmpul de editare se introduce cu ajutorul etichetei <INPUT>, cmpul de tip password se introduce cu ajutorul etichetei <SELECT>. 7. Pentru a insera ntr-un formular o caset de validare se folosete eticheta <INPUT> cu atributul type setat la valoarea: a) b) c) "radio" "checkbox" "option"

8. Ce realizeaz eticheta <SELECT>? a) b) c) Introduce un buton de anulare. Introduce un meniu derulant. Introduce o list de casete de validare.

9. La ce servete eticheta <TEXTAREA>? a) b) c) Stabilete zona din fereastra browserului care este rezervat pentru text. Introduce n formular un cmp de editare multi-linie. Introduce n formular un cmp de editare pe o singur linie.

10. Care dintre urmtoarele afirmaii este fals? a) Datele introduse n formular sunt trimise la server, dac este folosit un script CGI. b) Datele introduse n formular sunt trimise la o adres de mail specificat, dac este folosit comanda mailto: c) Datele introduse n formular sunt stocate pe hard-disk-ul vizitatorului paginii.

Formulare
1. b) 2. b) 3. c) 4. b) 5. b) 6. b) 7. b) 8. b) 9. b) 10. c)

Capitolul 12 Scripturi CGI Programare CGI, scripturi CGI sunt cuvinte care strnesc, cel mai adesea, teama. Multora dintre cei care doresc s creeze pagini Web i nu sunt programatori profesioniti aceast zon le apare misterioas i dificil de neles. n acest capitol vom nva chestiunile fundamentale i principiile care guverneaz realizarea acestor scripturi precum i modul lor de utilizare. Vei constata c, dei realizarea unui script este destul de laborioas i necesit cunoaterea aprofundat a cel puin unui limbaj de programare (C++ sau Perl), nu v va fi deloc greu s nelegei modul cum sunt ele concepute. Vestea bun este aceea c, dei stpnirea unui limbaj de programare este binevenit, nu este absolut necesar pentru a putea utiliza scripturi CGI n paginile dumneavoastr. Nu este nevoie s creai propriile dumneavoastr scripturi. Pe Web exist mii de scripturi gratuite care pot fi descrcate i utilizate conform propriilor necesiti. Tot 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 CGI? S ncepem prin a preciza ce nu este CGI: nu este un limbaj de programare. CGI, prescurtare de la Common Gateway Interface, este un protocol standard de comunicare ntre documentele Web i aplicaiile localizate pe serverul Web. Scripturile CGI sunt programe care respect acest protocol (un protocol este un set de reguli). Un script CGI este, deci, un program care comunic ntr-un anumit mod cu pagina dumneavoastr.

Existena acestui protocol de comunicare ntre programele de pe server i documentele Web permite crearea unor pagini interactive i dinamice, lucru care nu poate fi fcut folosind doar HTML. Atunci cnd browserul solicit un script CGI aflat pe server, serverul lanseaz n execuie scriptul i i transmite acestuia headerele HTTP de cerere primite de la browser. Dup ce execuia scriptului se ncheie, rezultatele sunt transmise serverului, care formateaz headerele de rspuns i le transmite browserului pentru ca acesta s afieze rezultatele. O alt posibilitate este ca scriptul s conin instruciuni prin care headerele de rspuns sunt configurate chiar de script i transmise de acesta direct browserului. Indiferent dac solicit un document Web sau un script, browserul trebuie s cunoasc locaia serverului Web i numele fiierului solicitat. Aceast informaie i este transmis browserului prin intermediul atributului action al etichetei <FORM> care primete drept valoare adresa URL a scriptului stocat pe server. De obicei, scripturile CGI sunt stocate pe server ntr-un director special destinat lor, care se numete cgi-bin. 2. Transferul datelor Aa cum am vzut n capitolul anterior, datele pe care dorim s le obinem de la vizitatorul paginii sunt colectate prin intermediul formularelor. Datele astfel colectate sunt transmise de ctre browser la serverul pe care este instalat scriptul CGI prin intermediul headerelor HTTP de cerere. Cele mai importante headere HTTP de cerere sunt Get i Post. Prin intermediul atributului method al etichetei <FORM> este specificat ce tip de header HTTP de cerere este utilizat pentru a transfera datele la server. Dac metoda folosit este Get, datele sunt transmise prin intermediul adresei URL. Dac folosii metoda Post datele sunt transmise sub forma unui fiier separat. Este recomandat folosirea metodei Post atunci cnd volumul de date transmise este mare (depete 1024 de octei, lungimea maxim a unui URL). Dup ce metoda de transmitere este stabilit, browserul creeaz un header HTTP de cerere prin care este identificat localizarea scriptului pe server i apoi transmite headerul la server. Serverul recepioneaz headerul de cerere i apeleaz scriptul CGI. Odat datele ajunse la server, scriptul este lansat n execuie iar datele i sunt transmise acestuia prin intermediul unui tip special de variabile numite variabile de mediu (dac folosii metoda Get) sau prin intermediul fiierului standard de intrare (dac folosii metoda Post). Scriptul CGI execut sarcinile pentru care a fost conceput i obine anumite rezultate care urmeaz a fi transmise browserului prin intermediul unor headere HTTP de rspuns. De obicei, scriptul configureaz un singur header de rspuns, i anume Content-Type. Acest header comunic browserului tipul de date care i vor fi returnate: documente HTML, imagini sau alt tip de fiiere. Serverul adaug i el headere HTTP de rspuns suplimentare, apoi strnge toate rezultatele i headerele de rspuns ntr-un pachet care este transmis browserului. Browserul l recepioneaz i afieaz informaiile primite n modul descris de headerele de rspuns. 3. Execuia scriptului Ce face scriptul CGI dup ce este lansat n execuie? Rspunsul este simplu: execut sarcinile pentru care a fost construit. Sarcinile pe care le poate realiza un script sunt diverse i numeroase. Iat cteva exemple: manipularea informaiilor introduse prin intermediul formularelor manipularea hrilor de imagini generarea contoarelor care monitorizeaz numrul de accesri ale paginii (hit counters)

construirea de motoare de cutare administrarea licitaiilor on-line crearea de aplicaii interactive cum ar fi forumurile sau camerele de chat crearea i manipularea bazelor de date Cum am mai spus, scrierea unui script care ndeplinete astfel de sarcini nu este simpl. Pentru a putea concepe un script este necesar cunoaterea aprofundat a unui limbaj de programare. Sunt utilizate limbaje variate pentru realizarea scripturilor: Perl, C sau C++, Visual Basic, etc. Descrierea acestor limbaje i a principiilor de programare depete cu mult obiectul acestei cri. De altfel, aa cum spuneam, pentru a construi o pagina Web interactiv cu ajutorul scripturilor CGI, nu este necesar s le creai chiar dumneavoastr. Pe Web exist foarte multe site-uri care pun la dispoziia vizitatorilor mii de scripturi gratuite. De obicei ele sunt nsoite de instruciuni de instalare i utilizare. Putei alege dintre acestea pe acelea care satisfac cerinele dumneavoastr. Totui, 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 CGI. 4. Structura unui script Structura unui script CGI conine urmtoarele seciuni: citirea datelor introduse prin intermediul formularului prelucrarea datelor i efectuarea sarcinilor impuse de programator afiarea rezultatelor. Citirea datelor Unul dintre elementele de baz cu care lucreaz un script l constituie variabilele de mediu. Variabilele de mediu sunt o categorie special de variabile, folosite de server n procesul de execuie al scriptului. Aceste variabile conin informaii despre server, despre browser i despre datele introduse de utilizator. Numrul variabilelor de mediu este destul de mare, dar exist cteva care au o importan special pentru script. Acestea sunt: REQUEST_METHOD QUERY_STRING CONTENT_LENGTH Variabila de mediu REQUEST_METHOD poate avea cele dou valori despre care am mai amintit: Get i Post. Prin intermediul ei serverul informeaz scriptul asupra modului cum i sunt transmise datele. Aa cum am nvat n capitolul anterior, datele introduse de utilizator sunt transmise n perechi nume/valoare. Variabila de mediu QUERY_STRING este folosit pentru a reine datele de intrare n cazul folosirii metodei Get iar variabila CONTENT_LENGTH este folosit pentru a specifica lungimea irului de caractere citit din fiierul de intrare, n cazul folosirii metodei Post. Transmiterea datelor prin metoda Get Cnd serverul folosete metoda Get datele introduse n formular sunt adugate la sfritul adresei URL a scriptului.

Pentru a face lucrurile mai clare, s luam un exemplu. s presupunem c n pagina dumneavoastr se afl un formular care conine dou cmpuri de editare numite "nume" i "prenume". Cu alte cuvinte codul formularului dumneavoastr va arta astfel: <FORM action="cgi-bin/script.cgi" method="Get"> <INPUT type="text" name="nume">Introduceti numele <INPUT type="text" name="prenume">Introduceti prenumele <INPUT type="submit"> </FORM> S mai presupunem c vizitatorul introduce n cmpul "nume" valoarea "Popescu" iar n cmpul "prenume" valoarea "Ion" i c adresa URL a scriptului nostru este www.html.com/cgibin/scriptulmeu.cgi/ Atunci serverului i este transmis urmtoarea adres URL: http://www.html.com/cgi-bin/scriptulmeu.cgi/?nume=Popescu&prenume=Ion irul de caractere de dup semnul de ntrebare este depus n variabila de mediu QUERY_STRING. Transmiterea datelor prin metoda Post Metoda Post este cea mai folosit n transmiterea datelor. Atunci cnd datele sunt trimise prin aceast metod, ele sunt furnizate scriptului prin intermediul fiierului standard de intrare, STDIN. Pentru a preciza scriptului lungimea irului de caractere (numrul de octei) pe care l are de citit, aceasta este reinut n variabila de mediu CONTENT_LENGTH. 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: "&", "=" i altele. Dup citirea i decodificarea datelor scriptul execut instruciunile de procesare a lor i pregtete rspunsul pentru server. Afiarea rezultatelor n general, rspunsurile pe care scriptul le transmite serverului se mpart n dou categorii: Sarcina a fost ndeplinit cu succes Sarcina nu a fost ndeplinit, au aprut erori. Dac execuia scriptului este ncununat de succes iar sarcinile sale au fost ndeplinite, acesta transmite serverului un rspuns n consecin. Dac, din diverse motive, au aprut erori la execuia 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. De exemplu, 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 scripturilor). Dup ce vizitatorul a introdus datele iar scriptul i-a ncheiat execuia, este bine s afieze un mesaj pentru vizitator prin care l informeaz c datele sale au fost expediate. Pe 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. Mesajele privind rezultatele execuiei pot fi trimise de script serverului, care formateaz headerele HTTP de rspuns, sau scriptul poate formata el nsui headerele i poate trimite rezultatele direct la browser. Exist trei tipuri fundamentale de headere de rspuns: 1. 2. 3. Content-Type Location Status

Content-type Browserul dumneavoastr primete headere de tipul Content-Type ori de cte ori primete de la server un document HTML, o imagine sau orice alt tip de fiier. Indiferent de natura fiierului transmis de la server la browser, serverul va asocia fiierului acest header pentru a comunica browserului tipul fiierului trimis. Tipurile de fiiere care pot fi transmise browserului sunt asociate sub numele de tipuri MIME (Multipurpose Internet Mail Extensions). Clasificarea se bazeaz pe coninutul fiierului trimis. Iat cele apte tipuri MIME fundamentale: Text Multipart Message Application Image Audio Video Fiecare dintre aceste tipuri are un numr de sub-tipuri. Headerul Content-Type specific att tipul ct i subtipul MIME al fiierului trimis. Iat cteva exemple: Text/HTML Text/plain Image/gif Image/jpeg

Location Acest header conine adresa URL a documentului pe care scriptul dorete s-l trimit ca rspuns ctre browser. De exemplu, dac rspunsul pe care dorii s-l primeasc vizitatorul paginii dup transmiterea datelor este un document HTML care se numete multumesc.html atunci scriptul va conine un header ca acesta: Location: multumesc.html urmat de o linie liber. n acest mod browserul este redirecionat ctre URL-ul documentului respectiv. n situaia cnd folosii headerul Location pentru a afia rspunsul, scriptul nu va mai include headerul de rspuns Content-Type.

Status Headerul Status returneaz ctre browser un cod format din trei cifre mpreun cu un text explicativ. Ai vzut de foarte multe ori acest header n situaiile cnd cererea trimis de browser nu a fost ndeplinit, iar documentul solicitat nu a putut fi furnizat de ctre server. Iat cteva dintre cele mai cunoscute coduri de status: 400 Bad request apare n situaia cnd sintaxa headerului HTTP de cerere a fost eronat 401 Unauthorized apare cnd, pentru a obine documentul solicitat, sunt necesare anumite privilegii de acces 403 Forbidden apare cnd serverul refuz accesul la document 404 File Not Found apare n situaia cnd serverul nu poate gsi documentul solicitat 5. Exemple de scripturi Limbajul cel mai folosit pentru scrierea scripturilor este Perl. Chiar dac nu cunoatei acest limbaj, dac avei totui cunotine minime de programare, nu v va fi greu s nelegei structura scripturilor prezentate n continuare. Din pcate, spre deosebire de documentele HTML care pot fi scrise ntr-un simplu editor de text i apoi vizualizate cu ajutorul browserului, cu scripturile lucrurile nu mai stau aa. Perl este un limbaj interpretat. Aceasta nseamn c putei scrie codul surs ntr-un editor de text, cum ar fi Notepad. Dar pentru ca scriptul s funcioneze, serverul trebuie s aib instalat un interpretor de Perl. Majoritatea serverelor Web dein un astfel de interpretor. Dac dorii s instalai i dumneavoastr un interpretor Perl i s testai funcionarea scripturilor prezentate n exemplele de mai jos, ba mai mult, dac dorii s v transformai propriul calculator ntr-un server Web pe care s putei rula scripturi Perl, precum i s v testai funcionarea ntregului site, vei afla cum putei realiza acest lucru n ultima parte a acestui capitol. Pentru moment, iat cteva exemple simple de scripturi Perl din care v putei face o idee despre structura unui script i sintaxa limbajului Perl. Cel mai simplu script este clasicul exemplu " Hello, world !"prezentat n Exemplul 12.1. Acest script ilustreaz modul n care se realizeaz configurarea headerului de rspuns Content-Type i afiarea unui document HTML. Exemplul 12. 1 1 #!/usr/bin/perl 2 3 print "Content-Type: text/html\n\n"; 4 5 print "<HTML>\n"; 6 print "<HEAD>\n"; 7 print "<TITLE>Hello World !</TITLE>\n"; 8 print "</HEAD>\n"; 9 print "<BODY>\n"; 10 print "<H1>Hello World !</H1>\n"; 11 print "<P>\n"; 12 print "<H3>Have a nice day</H3>\n"; 13 print "</BODY>\n"; 14 print "</HTML>\n";

Liniile scriptului nu sunt, n general, numerotate, numerotarea servind aici doar la referirea lor mai uoar. Acest exemplu simplu realizeaz afiarea pe ecran a textului "Hello World !", i a mesajului "Have a nice day". Nu exist o etap de citire a datelor, deoarece nu exist date de intrare. Linia 1 conine calea spre interpretorul Perl aflat pe server. Dac sistemul sub care lucreaz serverul este UNIX, semnul # trebuie ndeprtat. n linia a 3-a este configurat headerul HTTP de rspuns, Content-Type. Aa cum observai, documentul care va fi transmis browserului este de tip text, i anume un document HTML. Secvena de caractere "\n" care se repet la finalul fiecrei linii se numete secven escape. Rolul acesteia este s realizeze, la afiare, trecerea pe rndul urmtor. Pe linia n care este definit headerul Content-Type este obligatorie prezena a dou secvene escape. Toate instruciunile scriptului sunt instruciuni de afiare. Prin intermediul lor, scriptul descrie browserului pagina Web pe care urmeaz s o afieze. Structura paginii conine, dup cum vedei, toate seciunile necesare: eticheta de deschidere a documentului: <HTML>, antetul: <HEAD> i corpul documentului: <BODY>. Dac dorii s testai funcionarea scriptului, scriei-l n Notepad i salvai-l sub numele hello.pl (extensia .pl indic un program scris n limbajul Perl. Se mai poate folosi i extensia .bgi). Apoi instalai scriptul n directorul cgi-bin al serverului dumneavoastr. Dup executarea scriptului, pagina de rspuns arat ca n Figura 12.1 Exemplul urmtor realizeaz preluarea datelor introduse de vizitator prin intermediul unui formular i afiarea lor pe ecran. Formularul pentru introducerea datelor prezentat n Exemplul 12.2 conine doar casete de text, n care vor fi introduse numele, prenumele i adresa de mail. Atributul action al etichetei <FORM> trimite la scriptul script2.pl aflat n directorul cgi-bin al serverului. Aspectul formularului este cel din Figura 12.2 Exemplul 12. 2 <HTML> <HEAD> <TITLE>cgi2</TITLE> </HEAD> <BODY> <FORM method="POST" action="cgi-bin/script2.pl"> Numele: <INPUT type="text" name="nume"><BR> Prenumele: <INPUT type="text" name="prenume"><BR> Adresa de email: <INPUT type="text" name="email"><BR> <INPUT type="submit" value="Trimite"> </FORM> </BODY> </HTML> Observai c datele sunt transmise la scriptul script2.pl aflat n directorul cgi-bin, prin intermediul metodei Post. Exemplul 12.3 ilustreaz modul de construire al scriptului script2.pl. Exemplul 12. 3 1 #!/usr/bin/perl 2

3 4 5 6 7 8 9 10 11

# Plasarea datelor transmise prin metoda Post in variabile read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'}); @pairs=split(/&/, $buffer); foreach $pair (@pairs) { ($name, $value)=split(/=/, $pair); $value=~ tr/+/ /; $value=~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg;

13 $FORM{$name}=$value; 14 } 15 #afisarea rezultatului 16 17 print "Content-type: text/html\n\n"; 18 19 print "<HTML>\n"; 20 print "<HEAD>\n"; 21 print "<TITLE>Multumesc!</TITLE>\n"; 22 print "</HEAD>\n"; 23 print "<BODY>\n"; 24 print "<H1>Multumesc!</H1>\n"; 25 print "<BR>\n"; 26 print "<H4>Datele introduse sunt:</h4>\n"; 27 print "<BR>\n"; 28 print "<H3>$FORM{'nume'} $FORM{'prenume'}</H3>\n"; 29 print "<H3>$FORM{'email'}</H3>\n"; 30 print "</BODY>\n"; 31 print "</HTML>\n"; Se impun cteva explicaii. Mai nti, observai pe liniile 1, 3 i 15 prezena caracterului #. Acesta este modul de a introduce comentarii ntr-un program Perl. Comentariile sunt extrem de utile, mai ales la scripturi. Un script necomentat este foarte greu de utilizat. Ca i n cazul comentariilor introduse n documentele HTML, acestea sunt ignorate la execuie. Prima seciune a scriptului realizeaz citirea datelor. Deoarece acestea au fost transmise prin metoda Post, observai c citirea se face din fiierul standard de citire, STDIN. ntre liniile 5 i 14 se realizeaz citirea, decodificarea datelor i plasarea lor n variabilele corespunztoare. Secvena dintre liniile 16 i 31 reprezint partea de afiare a rezultatelor. Ca i n exemplul anterior, observai c linia n care se face formatarea headerului de rspuns Content-Type necesit prezena a dou secvene escape "\n\n". S presupunem c datele introduse n formular sunt: nume - Ionescu prenume - Maria adresa de mail - ionmar@yahoo.com. Atunci pagina generat de script va arata ca n Figura 12.3 Apelul scripturilor nu se face numai prin intermediul formularelor. Se poate realiza i prin intermediul imaginilor sau al legturilor. Prezentm n continuare o pagina Web care apeleaz scriptul

ip.pl prin intermediul unei legturi. Scriptul realizeaz afiarea adresei IP a computerului pe care este instalat. Exemplul 12.4 prezint documentul HTML n care este apelat scriptul. Aspectul paginii este cel din Figura 12.4 Exemplul 12. 4 <HTML> <HEAD> <TITLE>cgi4</TITLE> </HEAD> <BODY> <FONT face="arial" size="4"> Pentru a afla adresa dumneavoastra de IP apasati <A href="cgi-bin/ip.pl"> aici</A> </FONT> </BODY> </HTML> Scriptul ip.pl folosete variabila de mediu REMOTE_ADDR pentru a obine adresa IP. n Exemplul 12.5 este prezentat scriptul ip.pl. Exemplul 12. 5 1 #!/usr/bin/perl 2 3 print "Content-Type: text/html\n\n"; 4 5 print "<HTML>\n"; 6 print "<HEAD>\n"; 7 print "<TITLE>cgi3</TITLE>\n"; 8 print "</HEAD>\n"; 9 print "<BODY>\n"; 10 print "<P>\n"; 11 print "<H3>Adresa IP a computerului dvs. este: $ENV{REMOTE_ADDR} </H3>\n"; 12 print "</BODY>\n"; 13 print "</HTML>\n"; La apsarea link-ului din documentul HTML este apelat scriptul, care afieaz pagina de rspuns din Figura 12.5 Evident, dac vei rula scriptul pe alt computer, adresa IP obinut va fi diferit. Cnd scriptul este apelat printr-un link nu exist posibilitatea de a i se transmite date. 6. Instalarea interpretorului Perl i a aplicaiei PWS Pentru a putea verifica funcionarea exemplelor prezentate precum i a scripturilor pe care dorii s le folosii n cadrul site-ului dumneavoastr nainte de etapa publicrii pe Web trebuie s avei instalat un interpretor Perl. Putei descrca i instala interpretorul Active Perl vizitnd adresa: http://www.gossland.com/course/install.html La aceeai adres putei gsi i aplicaia Microsoft Personal Web Server (PWS) care este furnizat de Microsoft n pachetele Windows 98 i Windows 2000. Recomandm descrcarea aplicaiei

de la adresa menionat, care are avantajul c include o corecie a unui bug de instalare existent n versiunea oficial Microsoft. Atenie! Microsoft Personal Web Server se poate instala pe computerul personal avnd rolul de aplicaie server. Odat instalat, computerul dumneavoastr va funciona ntocmai ca un server Web, astfel nct v vei putea testa funcionarea scripturilor instalate precum i funcionarea ntregului site. Din pcate, Microsoft nu furnizeaz o aplicaie server similar i n pachetele Windows Milenium i Windows XP iar aplicaia PWS nu funcioneaz dect pe sistemele Windows 98 i 2000. La adresa indicat vei gsi ndrumri precise i complete asupra tuturor pailor pe care i avei de urmat pentru a instala att interpretorul Perl ct i aplicaia Personal Web Server. n plus, site-ul respectiv conine i un foarte bun curs de iniiere n limbajul Perl n limba englez. 7. Rezumat CGI este un protocol de comunicare face legtura dintre scripturile aflate pe serverul Web i documentele HTML. Un script CGI este o aplicaie care respect acest protocol. Printre cele mai folosite scripturi CGI sunt cele care servesc la procesarea informaiilor introduse ntr-un formular. Transferul datelor de la formular la serverul pe care se afl scriptul se face printr-una dintre cele dou metode: Get sau Post. Dup ce datele au fost transmise la server, scriptul le citete i le decodific, le prelucreaz conform instruciunilor sale i transmite un rspuns ctre browser. Browserul afieaz rezultatele trimise de script n conformitate cu headerele de rspuns incluse n pachetul de date transmis. Capitolul 13 JavaScript 1. Ce este JavaScript? JavaScript este un limbaj de programare orientat pe obiecte, care v permite s oferii paginilor dumneavoastr un caracter mai dinamic i interactiv. Dac ai parcurs prima parte a crii i avei cunotine minime de programare, nu vei avea dificulti n nelegerea modului n care funcioneaz acest limbaj. Atenie! JavaScript nu este acelai lucru cu limbajul Java. De fapt, dei numele sunt asemntoare, sunt dou limbaje foarte diferite. Spre deosebire de Java, care este un limbaj orientat pe obiecte, complex, asemntor cu limbajul C++, JavaScript este mult mai simplu i mai uor de folosit. n timp ce Java este un limbaj pentru programatori, JavaScript este destinat neprofesionitilor care doresc s mbunteasc aspectul i funcionalitatea paginilor de Web. JavaScript a fost dezvoltat de Netscape Corporation pentru a fi utilizat n browserul Netscape Navigator. Un script JavaScript poate fi plasat direct n pagina Web, fiind executat de browser mpreun cu documentul Web care-l conine. Browserul Internet Explorer (versiunile mai noi dect IE 3.0) execut i el corect scripturile JavaScript.

JavaScript este un limbaj interpretat, ca i Perl, dar n cazul su nu trebuie s v mai facei griji n privina instalrii unui interpretor deoarece acesta este inclus n browser. Codul surs poate fi inclus n pagina Web sau poate fi pus ntr-un fiier separat care este referit din pagin. Ca i n cazul scripturilor CGI, nici n acest caz nu este absolut necesar cunoaterea limbajului JavaScript pentru a putea insera i utiliza cu succes astfel de scripturi. Exist un numr impresionant de scripturi gata de utilizare, care se pot integra cu uurin n codul surs al documentelor dumneavoastr. 2. Cum poate fi inclus un script n pagin? Scripturile JavaScript pot fi incluse n pagina Web n dou moduri: prin intermediul etichetei <SCRIPT> </SCRIPT> prin intermediul unei proceduri eveniment Iat un exemplu foarte simplu n care n document este inclus un script care afieaz n pagin textul "Buna ziua!" prin intermediul etichetei <SCRIPT>. Aspectul acestei pagini este cel din Figura 13.1. Exemplul 13. 1 <HTML> <HEAD> <TITLE>javascript1</TITLE> </HEAD> <BODY> <H1>Primul exemplu JavaScript</H1><HR> <SCRIPT language="JavaScript"> document.write("Buna ziua!") </SCRIPT> </BODY> </HTML> Unul dintre atributele etichetei <SCRIPT> este language prin care este specificat limbajul n care este scris scriptul, n cazul acesta valoarea atributului fiind "JavaScript". O alt modalitate de a include de a include un script n pagin este salvarea acestuia ca un fiier extern i apelarea sa prin intermediul atributului src al etichetei <SCRIPT>. n exemplele de scripturi care vor urma vei observa diverse moduri n care pot fi incluse n paginile Web scripturi JavaScript. Nu vom intra n amnunte privind sintaxa limbajului, deoarece aceasta depete subiectul acestei cri. Totui, pentru a putea folosi judicios un script JavaScript trebuie s avei o imagine despre elementele eseniale cu care lucreaz JavaScript, obiectele i evenimentele. Obiecte Un obiect este un nou tip de date, care reunete sub aceeai denumire att datele ct i funciile care le prelucreaz. Datele se numesc proprietile obiectului iar funciile se numesc metodele obiectului. Pentru a exemplifica aceste concepte, s presupunem c dorim s construim un obiect care s reprezinte o carte de vizit, pe care l vom numi Card. Acest obiect va avea urmtoarele proprieti: nume

adres telefon

Pentru a defini un obiect se folosete o funcie numit constructor. n exemplul nostru, funcia constructor a obiectului Card va arata astfel: function Card(num, adr, tel) { this.nume=num; this.adresa=adr; this.telefon=tel; } n acest moment, constructorul obiectului Card nc nu este complet, el conine numai proprietile obiectului. Acum s construim i o metod care s lucreze cu acest obiect. Deoarece 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 PrintCard(). function PrintCard() { document.write("Numele: ", this.nume, "\n"); document.write("Adresa: ", this.adresa, "\n"); document.write("Telefonul: ", this.telefon, "\n"); } Acum putem scrie definiia complet a obiectului nostru: function Card(num, adr, tel) { this.nume=num; this.adresa=adr; this.telefon=tel; this.PrintCard=PrintCard; } S trecem, acum, la folosirea unui obiect. Pentru a crea un obiect concret, adic o instan a obiectului Card, se folosete cuvntul cheie new. Urmtoarea instruciune construiete o instan a obiectului Card, care se numete ana: ana=new Card ("Ana Munteanu", "Str. Apusului, nr.2, Bucuresti", "6162345") Odat ce a fost creat o nou instan a obiectului Card, metoda PrintCard poate fi folosit astfel: ana.PrintCard() i acum, s punem toate aceste secvene de cod laolalt i s folosim obiectul ntr-o pagin Web, pentru a afia mai multe cri de vizit. Exemplul 13.2 realizeaz acest lucru. Aspectul paginii descrise n document este cel din Figura 13.2. Exemplul 13. 2 <HTML> <HEAD> <TITLE>javascript2</TITLE>

<SCRIPT language="JavaScript"> function PrintCard() { document.write("<B>Numele:</B> ", this.nume, "<BR>"); document.write("<B>Adresa:</B> ", this.adresa, "<BR>"); document.write("<B>Telefonul:</B> ", this.telefon, "<HR>"); } function Card(num, adr, tel) { this.nume=num; this.adresa=adr; this.telefon=tel; this.PrintCard=PrintCard; } </SCRIPT> </HEAD> <BODY> <H1 align="center">Crearea obiectelor</H1> Inceputul scriptului<HR> <SCRIPT language="JavaScript"> // Crearea a trei obiecte noi ana=new Card ("Ana Munteanu", "Str. Apusului, nr.2, Bucuresti", "6162345") ion=new Card("Ion Popescu", "Str. Zorilor nr.1, Ploiesti", "456789"); radu=new Card("Radu Ionescu", "Str. Noptii, nr.3, Pitesti", "201202"); // Afisarea lor ana.PrintCard(); ion.PrintCard(); radu.PrintCard(); </SCRIPT> Sfarsitul scriptului </BODY> </HTML> Putei observa modul n care a fost inclus scriptul n pagina Web. Astfel, definiia scriptului este plasat n antetul documentului HTML, iar apelul scriptului este fcut n corpul documentului. n cadrul scriptului apar dou linii precedate de irul de caractere "//". Acesta este modul n care se introduc comentariile n cadrul scripturilor JavaScript. Evenimente n continuare vom discuta despre un alt concept fundamental cu care lucreaz JavaScript, i anume evenimentul. Un eveniment este o aciune care survine la un moment dat i n urma creia este declanat execuia unei anumite pri din program. Ori de cte ori vizitatorul face click pe o legtur, de exemplu, cnd introduce un text sau chiar 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 JavaScript: Tabel 13. 1 Eveniment onAbort Descriere Apare cnd utilizatorul renun la ncrcarea unei imagini

onBlur onChange onClick onError onFocus onLoad onMouseOver onMouseOut onSelect onSubmit onUnload

Apare cnd un obiect din pagin pierde focusul Apare cnd un cmp de editare este modificat de utilizator (cnd se introduce un text) Apare cnd utilizatorul face click pe un element Apare cnd un document sau o imagine nu se ncarc corect Apare cnd un element primete focusul Apare cnd o pagin sau o imagine i termin ncrcarea Apare cnd cursorul mouse-ului se plimb deasupra unui element Apare cnd cursorul mouse-ului prsete elementul Apare cnd utilizatorul selecteaz un text Apare cnd este apsat un buton de tip Submit Apare cnd utilizatorul documentul sau sesiunea curent. prsete

Dup cum vedei, prin intermediul JavaScript se poate rspunde unui mare numr de evenimente. Acest lucru se realizeaz prin crearea unei proceduri eveniment. Procedurile eveniment nu sunt definite cu ajutorul etichetei <SCRIPT> ci ele sunt atribute ale celorlalte etichete. De exemplu, iat o legtur care include o procedur eveniment: <A href="http://www.amazon.com" onMouseOver=" window.status=Cea mai mare librarie virtuala; return true"> Click aici</A> Observai c ntreaga procedur eveniment care rspunde la evenimentul MouseOver este inclus n eticheta <A>. Sunt specificate dou instruciuni care se execut n momentul cnd cursorul mouseului este plasat deasupra legturii. Prima afieaz un mesaj n bara de status a ferestrei, urmtoarea returneaz valoarea true, pentru a mpiedica tergerea mesajului. Mai observai c mesajul care va fi afiat este delimitat de apostrofuri. Dac procedura eveniment este mai extins, includerea ei n ntregime ntr-o eticheta devine nepractic. n aceast situaie, este mai avantajos s construim o funcie care s trateze evenimentul. Funcia este definit n seciunea <HEAD> a documentului, iar n corpul documentului este apelat ca procedur eveniment. De exemplu, s presupunem c am construit o funcie eveniment numit Citeste(). Atunci ea poate fi apelat astfel: <A href="#cuprins" onMouseOver="Citeste();">Mergi la Cuprins</A> n momentul cnd mouse-ul se afl deasupra legturii, funcia este lansat n execuie.

3. Modul de execuie al scriptului Scripturile integrate n cadrul paginilor sunt evaluate dup ce ncrcarea paginii s-a ncheiat dar nainte ca aceasta s fie afiat. Pe de alt parte, scripturile stocate ca fiiere separate sunt evaluate naintea tuturor scripturilor in-line (adic a celor incluse n pagin). Funciile definite n cadrul scripturilor nu sunt executate automat la ncrcarea paginilor ci abia atunci cnd acestea sunt apelate, fie prin eticheta <SCRIPT> fie printr-o procedur eveniment. Dac ai vzut vreodat un script JavaScript ntr-o pagin Web, poate ai remarcat un lucru aparent ciudat: ntregul script este inclus ntre etichetele HTML de comentariu: <!- - comentariu - ->. Motivul este faptul c exist browsere care nu recunosc i nu pot executa scripturile JavaScript. Dac un document Web care conine cod JavaScript este ncrcat ntr-un asemenea browser, n loc ca scriptul s fie executat, este afiat n pagin ntregul cod, ceea ce nu este de dorit. Aa dup cum tii, comentariile sunt ignorate de browser, astfel c includerea codului JavaScript ntre etichetele de comentariu va duce la ignorarea acestei pri a documentului. Excepie fac browserele care recunosc JavaScript i care vor identifica prezena JavaScript i vor executa scriptul. n concluzie, maniera recomandat pentru introducerea n pagin a unui script este urmtoarea: <SCRIPT language="JavaScript"> <! - Cod JavaScript // - -> </SCRIPT> Am nvat pn acum cum poate fi inclus codul JavaScript ntr-un document HTML. S vedem, mai departe, cum putem folosi scripturile JavaScript pentru a face paginile mai atractive i a le mbunti funcionalitatea. 4. Ce se poate face cu JavaScript? n continuare sunt prezentate cteva exemple de scripturi cu ajutorul crora se pot realiza lucruri care depesc posibilitile limbajului HTML, cum ar fi afiarea datei curente n pagina dumneavoastr, deschiderea unei ferestre pop-up, afiarea unui mesaj n bara de status a ferestrei browserului, afiarea aleatoare a unor mesaje n pagin, imagini care i schimb aspectul la trecerea mouse-ului, i, una dintre cele mai utile aplicaii JavaScript, validarea formularelor. Afiarea unui mesaj n bara de status Acest exemplu ilustreaz modul cum se poate afia un mesaj n bara de status (aflat la baza ferestrei browserului) la trecerea cu mouse-ul peste un anumit element din pagin. De obicei, acest element este un link sau o imagine. n Exemplul 13.3, elementul este o imagine. Aspectul paginii care conine scriptul este cel din Figura 13.3. Exemplul 13. 3 <HTML> <HEAD> <TITLE>javascript3</TITLE> </HEAD> <BODY> <H1 align="center">Mesaj in status bar</H1><HR>

<H3>Mesajul apare la plasarea mouse-ului pe imagine</H3> <IMG src="../Imagini/tiger.gif" onMouseOver="window.status='Acesta este un tigru'; return true" onMouseOut="window.status=' ';return true"> </BODY> </HTML> Afiarea datei curente n pagin Scriptul 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. Exemplul 13.4 construiete o pagin Web care conine un astfel de script, aspectul paginii fiind redat n Figura 13.4. Exemplul 13. 4 <HTML> <HEAD> <TITLE>javascript4</TITLE> <SCRIPT language="javascript"> <!-var zi, data, luna azi=new Date() if(azi.getDay(==0){ zi="Duminica, " } else if(azi.getDay()==1){ zi="Luni, " } else if(azi.getDay()==2){zi="Marti, "} else if(azi.getDay()==3){zi="Miercuri, "} else if(azi.getDay()==4){zi="Joi, "} else if(azi.getDay()==5){zi="Vineri, "} else if(azi.getDay()==6){zi="Sambata, "} if(azi.getMonth()==0){luna="Ianuarie "} else if(azi.getMonth()==1){luna="Februarie"} else if(azi.getMonth()==2){luna="Martie"} else if(azi.getMonth()==3){luna="Aprilie"} else if(azi.getMonth()==4){luna="Mai"} else if(azi.getMonth()==5){luna="Iunie"} else if(azi.getMonth()==6){luna="Iulie"} else if(azi.getMonth()==7){luna="August"} else if(azi.getMonth()==8){luna="Septembrie"} else if(azi.getMonth()==9){luna="Octombrie"} else if(azi.getMonth()==10){luna="Noiembrie"} else if(azi.getMonth()==11){luna="Decembrie"} data=azi.getDate() //--> </SCRIPT> </HEAD> <BODY> <H1 align="center">Data calendaristica</H1><HR> <FONT size="3" color="black" face="arial">Azi suntem in data de: <SCRIPT language="JavaScript"> <!-<FONT size="4" color="red" face="arial"> document.write(zi+' '+data+' '+luna) //--> </SCRIPT></FONT> </BODY> </HTML>

Ferestre pop-up Unul din lucrurile care nu se pot realiza folosind doar HTML este afiarea mesajelor pop-up. Aceste mesaje apar ntr-o mic fereastr care se nchide atunci cnd executai o anumit aciune, de obicei click pe un buton, sau pe un link. n Exemplul 13.5 este construit pagina principal din care este apelat fereastra pop-up. Exemplul 13. 5 <HTML> <HEAD> <TITLE>javascript5</TITLE> <SCRIPT language="JavaScript"> <!-function deschide() {iwin=window.open("javascript6.html", "IWIN", "status=no, toolbar=no, location=no, menu=no, width=200, height=200");} //--> </SCRIPT> </HEAD> <BODY> <H1 align="center">Fereastra pop-up</H1><HR> Aceasta pagina demonstreaza cum poate fi creata o fereastra pop-up<BR> Fereastra se deschide la apasarea pe legatura de mai jos si se inchide<BR> cand este apasat butonul OK<BR> Deschide fereastra <A href="#" onClick="deschide();">aici</A>. </BODY> </HTML> Firete c trebuie creat un document separat, care va fi afiat n fereastra pop-up. n Exemplul 13.6 este construit documentul HTML (javascript6.html) care va fi afiat n fereastra pop-up definit n exemplul anterior. Exemplul 13. 6 <HTML> <HEAD> <TITLE>javascript6</TITLE> </HEAD> <BODY> <H3 align="center">Test pop-up</H3> <FONT color="green" face=arial>Ati invatat sa creati o fereastra pop-up<BR> Apasati OK ca sa reveniti in fereastra initiala <P> <FORM name="form1"> <INPUT type="button" value="OK" onClick="window.close();"> </FORM> </BODY> </HTML> Aspectul paginii i al ferestrei pop-up este redat n Figura 13.5.

Putei modifica documentul HTML care se va deschide n fereastra pop-up dup dorin i l putei salva sub alt nume. Nu uitai, ns, s facei modificarea corespunztoare n funcia deschide() din script. Afiarea aleatoare a unor mesaje n pagin Unul 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. Un mod de a face paginile mai variate este de a afia diverse mesaje, citate sau imagini care s se schimbe de fiecare dat cnd este accesat pagina. n Exemplul 13.7 este prezentat un script care realizeaz afiarea aleatoare a unui citat, ales dintrun ir predefinit. Aspectul acestei pagini este redat n Figura 13.6. Exemplul 13. 7 <HTML> <HEAD> <TITLE>javascript7</TITLE> </HEAD> <BODY> <H1 align="center">Citate</H1><HR> <SCRIPT language="JavaScript"> <!-citat=new Array(5); autor=new Array(5); citat[0]="Omul care-si cunoaste limitele este singurul care are sanse sa obtina ce vrea."; autor[0]="Goethe"; citat[1]="Pe stancile cele mai inalte ajung numai vulturii si reptilele."; autor[1]="Montesquieu"; citat[2]="Putine lucruri sunt atat de greu de suportat ca un exemplu bun."; autor[2]="Mark Twain"; citat[3]="Adevarul pur si simplu este rareori pur si niciodata simplu."; autor[3]="Oscar Wilde"; citat[4]="Omul a inventat limbajul pentru a-si satisface nevoia profunda de a se plange."; autor[4]="Lily Tomlin"; index=Math.floor(Math.random() * citat.length); document.write("<DL>\n"); document.write("<DT>" + "\"" + citat[index] + "\"\n"); document.write("<DD>" + "- " + autor[index] + "\n"); document.write("</DL>\n"); //--> </SCRIPT> <HR> Citatul de mai sus este generat aleator la incarcarea paginii. </BODY> </HTML> Dac 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-1, unde n este numrul de citate. Pentru a observa funcionarea scriptului, rencrcai pagina de mai multe ori. Imagini care se schimb (rollover images)

Un efect interesant pe care l putei introduce n pagin sunt imaginile care i schimb aspectul la trecerea cu mouse-ul pe suprafaa lor. Acesta se poate obine cu ajutorul scriptului prezentat n Exemplul 13.8. n Figura 13.7 este redat aspectul paginii descrise n acest exemplu. Exemplul 13. 8 <HTML> <HEAD> <TITLE>javascript8</TITLE> <SCRIPT language="JavaScript"> <!-if (document.images) { pic1on=new Image(); pic1on.src="../Imagini/dovleac1.jpg"; pic1off=new Image(); pic1off.src="../Imagini/dovleac2.jpg"; } function deschide(imgName) { if (document.images) { imgOn=eval(imgName + "on.src"); document[imgName].src=imgOn; } } function inchide(imgName) { if (document.images) { imgOff=eval(imgName + "off.src"); document[imgName].src=imgOff; } } //---> </SCRIPT> </HEAD> <BODY> <H1 align="center">Imagini care se schimba</H1><HR> <CENTER> <A href="#" onMouseover="deschide('pic1')" onMouseout="inchide('pic1')"> <IMG src="../Imagini/dovleac2.jpg" width="100" height="100" border="1" name="pic1"> </A> </CENTER> </BODY> </HTML> Validarea formularelor Dac exemplele prezentate pn acum au avut rolul de a face pagina dumneavoastr mai atractiv, urmtorul exemplu este de natur s i mbunteasc funcionalitatea. O problem cu care v vei confrunta fr ndoial dac folosii formulare n pagin, este validarea datelor introduse de utilizator.

Vom crea o pagin foarte simpl care conine dou casete de text n care utilizatorul trebuie s introduc numele i adresa de mail. Deoarece dup completarea formularului informaiile introduse vor fi supuse procesului de validare realizat de scriptul JavaScript, eticheta <FORM> va avea un coninut diferit de cel pe care l cunoatei de la capitolul Formulare. Scriptul de mai jos verific dac toate cmpurile de editare au fost completate. Dac se apas pe butonul Submit nainte de a completa ambele cmpuri, este transmis un mesaj de eroare. Datele din formular sunt transmise unui script CGI fictiv, numit myscript.cgi aflat n directorul cgi-bin. Observai c atributele action i method ale etichetei <FORM> pe care le cunoatei de la Formulare sunt, de data aceasta folosite ca proprieti ale obiectului predefinit n JavaScript, form. Documentul construit n Exemplul 13.9 conine un formular i scriptul care realizeaz validarea datelor introduse n cmpurile formularului. Din Figura 13.8 putei observa mesajul de eroare transmis n situaia cnd unul din cmpurile formularului nu este completat. Exemplul 13. 9 <HTML> <HEAD> <TITLE>javascript9</TITLE> <SCRIPT language="javascript"> <!-function verifica(form) { if (form.nume.value== "") { alert("Va rog, introduceti numele!"); form.nume.select(); } else if (form.email.value== "") { alert("Va rog, introduceti adresa de mail!"); form.email.select(); } else { form.method="post"; form.target="_self"; form.action="cgi-bin/myscript.cgi"; form.submit(); } } //--> </SCRIPT> </HEAD> <BODY> <H1 align="center">Validarea formularelor</H1> <H3 align="center">(completarea tuturor campurilor)</H3><HR> <FORM onSubmit="verifica(this); return false;"> Nume: <INPUT type="text" name="nume" size="30"><BR> Adresa mail: <INPUT type="text" name="email"><BR> <INPUT type="submit" name="button" value="Submit"> </FORM> </BODY>

<HTML> O alt verificare deosebit de util este dac utilizatorul a introdus o adres de mail valid. Scriptul din exemplul urmtor realizeaz trei verificri: dac n irul de caractere introdus exist caracterul @ dac este prezent caracterul "." urmat de trei caractere (.com, de exemplu), dac este prezent caracterul "." urmat de dou caractere (.ro, de exemplu) Formularul din Exemplul 13.10 conine un cmp de editare i un buton Submit. Dac adresa de mail introdus n cmpul de editare este incorect se va afia un mesaj de eroare aa cum se vede n Figura 13.9. Exemplul 13. 10 <HTML> <HEAD> <TITLE>javascript10</TITLE> <SCRIPT language="javascript"> <!-function verifica_mail(form) { verif=form.email.value if ((verif.indexOf('@') < 0) || ((verif.charAt(verif.length-4) !='.') && (verif.charAt(verif.length3) !='.'))) { alert("Nu ati introdus o adresa de mail valida. Va rog, incercati din nou!"); form.email.select(); return false; } else { form.method="post"; form.target="_self"; form.action="cgi-bin/myscript.cgi"; form.submit(); } } //--> </SCRIPT> </HEAD> <BODY> <H1 align="center">Validarea formularelor</H1> <H3 align="center">(adresa de mail corecta)</H3><HR> <FORM onSubmit="verifica_mail(this);return false;"> Adresa mail: <INPUT type="text" name="email"><BR> <INPUT type="submit" name="button" value="Submit"> </FORM> </BODY> <HTML> Putei folosi n paginile dumneavoastr oricare dintre aceste scripturi, desigur, fcnd modificrile necesare legate de structura site-ului dumneavoastr. De exemplu, n scripturile care realizeaz

validarea formularelor, pentru ca acestea s fie funcionale, trebuie s precizai localizarea corect a scriptului CGI care face prelucrarea lor. Din exemplele prezentate probabil c v-ai putut crea o imagine despre modul n care pot fi utilizate scripturile JavaScript ntr-o pagin Web. Dac 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 complexe dect acestea. Avei ns grij la aspectele legate de viteza de ncrcare a paginii: aplicaiile complexe i de mari dimensiuni ncetinesc ncrcarea paginii unde sunt folosite. Ca i n cazul imaginilor, nu folosii scripturi de care nu este nevoie, doar pentru a arata cu orice pre c suntei un bun programator. Una dintre regulile de aur ale unei pagini Web bune, regul att de adesea nclcat, este simplitatea. 5. Rezumat JavaScript este un limbaj de programare orientat pe obiecte i evenimente care permite extinderea capacitilor limbajului HTML. Scripturile JavaScript sunt incluse ntr-un document HTML prin intermediul etichetei container <SCRIPT> sau prin intermediul procedurilor eveniment. Pentru a evita afiarea n pagin a codului scriptului de browserele care nu suport scripturi, se obinuiete ca scriptul s fie inclus ntre etichetele de comentariu. Scripturile pot fi inserate direct n documentul HTML sau pot fi stocate n fiiere externe care sunt apelate n documentul respectiv. Cu ajutorul scripturilor JavaScript se pot realiza sarcini diverse cum ar fi crearea ferestrelor popup, afiarea datei curente n pagin, validarea formularelor i altele. n capitolul urmtor vom discuta despre o alt metod care mbogete limbajul HTML cu noi posibiliti de a controla aspectul paginilor, i anume programarea cu ajutorul foilor de stiluri ( Style Sheets) Capitolul 14 Foi de stiluri (CSS) Foile de stiluri HTML (Cascading Style Sheets) reprezint o inovaie n dezvoltarea World Wide Web, n ciuda faptului c ideea gruprii elementelor de formatare a documentelor a aprut ceva mai demult. Aplicarea stilurilor reprezint o extindere important a posibilitilor de design, evitnd utilizarea de fiiere grafice mari ce determin ncetinirea ncrcrii paginilor i manipularea lor greoaie. Folosind stilurile HTML putei fi sigur c cititorii vor vedea textul din pagin exact aa cum a fost el proiectat. Textul i proprietile acestuia, care au fost iniial controlate de browsere, se rentorc la autor, acolo unde le este, de fapt, locul. 1. Ce este un stil? Un stil reprezint o colecie de atribute ale textului i ale modului de aranjare a documentului care pot fi aplicate n mod selectiv unui document sau doar unei pri din acesta. Aceste atribute pot fi tipul de font, mrimea i grosimea acestuia, marginile, paragrafele i orice altceva ce poate influena aspectul textului n pagin. Gruparea lor n stiluri permite autorului s aplice aceeai colecie de atribute la diferite pri ale unui document.

Stilurile aplicate unui document HTML au multe avantaje pentru creatorii de pagini Web: Ofer control crescut asupra aspectului i plasrii textului n pagin Reduc "nvlmeala" produs de multitudinea de deschideri i nchideri ale etichetelor care descriu elementele individuale ale textului Procesul de modificare a diferitelor elemente din pagin se simplific De exemplu, dac dorii ca titlurile dumneavoastr s aib un alt tip de font dect textul 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. Folosind 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 foi de stiluri Stilurile HTML pot fi aplicate ntr-o pagin Web n trei moduri: ncapsulate (embedded): stilurile sunt incluse n documentul asupra cruia se aplic, i anume n seciunea <HEAD> a documentului. Prin includerea lor n antetul documentului, stilurile rmn invizibile pentru vizitatorul paginii. Legate (linked): stilurile sunt definite n fiiere separate de documentul HTML. Documentul face apel la foaia de stiluri prin intermediul etichetei <LINK>. Folosirea acestui tip de stiluri face posibil utilizarea aceleiai foi de stil pentru documente diferite. De asemenea, este posibil aplicarea mai multor foi de stiluri pentru acelai document. In-line: stilurile sunt incluse ca atribute n cadrul etichetelor HTML din document. Aceasta 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 HTML. Sintaxa definiiilor de stil este, n general, aceeai, indiferent de modul cum sunt ele aplicate. Cele trei tipuri de stiluri pot fi, de asemenea, combinate n cadrul aceluiai document. Relaiile dintre diferitele tipuri de stiluri realizeaz efectul de cascad care d numele acestei metode. Stiluri ncapsulate Crearea unui astfel de stil se realizeaz folosind eticheta <STYLE> </STYLE>. Eticheta <STYLE> este o etichet container, deci este obligatorie prezena etichetei de nchidere </STYLE>. ntre cele dou etichete se introduc definiiile de stil. Eticheta de stil este plasat n antetul documentului adic n seciunea <HEAD>. n Exemplul 14.1 este prezentat o definiie de stil care realizeaz afiarea tuturor titlurilor de nivel 1 (adic a textelor cuprinse ntre etichetele <H1> </H1>) cu caractere bold i de culoare verde. n plus, textele incluse ntre etichetele <P> </P> vor fi afiate cu fonturi arial, de mrime 2 i culoare violet.

De asemenea, este creat un stil "normal" care poate fi aplicat asupra oricrui text. Prin intermediul su, textul este afiat cu caractere mai mari i de culoare oranj. Aspectul paginii n care este inclus aceast definiie de stil este cel din Figura 14.1. 28. Exemplul 14. 1 <HTML> <HEAD> <TITLE>stiluri1</TITLE> <STYLE> <!-H1 {color: #008000; font-weight: bold} P {font-family: Arial; color: #800080; font-size: 14px} .normal {font-size: large; color: #FF8000} --> </STYLE> </HEAD> <BODY> <H1 align="center">Stiluri</H1><HR> <P>Textul din acest paragraf este formatat cu ajutorul stilurilor</P> Acesta este un text neformatat <H1>Titlu</H1> <SPAN class="normal">Acesta este stilul normal</SPAN> </BODY> </HTML> Observai c definiia stilurilor a fost plasat ntre etichetele HTML de comentariu, n aceeai manier ca i la scripturile JavaScript. Motivul este acelai: dac browserul cu care este vizualizat pagina nu suport foi de stiluri, se evit astfel afiarea n pagin a codului HTML. Stiluri legate foi de stiluri externe Stilurile incluse n pagin se aplic elementelor prezente n respectivul document HTML, reducnd dimensiunea codului i efortul de a defini fiecare element n parte. Aceast idee se poate extinde la nivelul mai multor documente care pot beneficia, toate, de aceleai stiluri, reunite ntr-o foaie de stiluri extern. Avantajul folosirii foilor de stiluri externe este dublu. Pe de-o parte ele se pot aplica la nivelul mai multor documente HTML, realiznd astfel o legtur de stil ntre ele, lucru deosebit de util la construirea unui site. Pe 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. O foaie de stiluri este un fiier text care conine regulile de stil definite n aceeai manier folosit la stilurile incluse n pagin. Odat creat o foaie de stiluri, ea trebuie salvat cu extensia .css. Foile de stiluri pot fi stocate ntr-un folder separat sau n acelai folder n care sunt plasate i documentele HTML. Apelul foilor de stiluri se poate realiza n dou moduri: folosind eticheta <LINK> folosind funcia @import Cel mai folosit mod de apelare a unei foi de stiluri este cu ajutorul etichetei <LINK> conform urmtoarei sintaxe:

<LINK rel="stylesheet" href="nume_foaie_stiluri.css"> n Exemplul 14.2 este construit o foaie de stiluri extern care va fi apelat cu ajutorul etichetei <LINK>. Foaia de stiluri a fost salvat sub numele stiluri2.css 29. Exemplul 14. 2 BODY {background-color: #CCFFCC; font-family: Arial, sans-serif; color: #330066; padding: 50px, 70px} A:link {color: #CC9900} A:visited {color: #660000} A:hover {color: #FFCC00} A:active {color: #FF0000} H1 {color: #996633; background-color: #FFFFCC} Documentul HTML care urmeaz apeleaz foaia de stiluri de mai sus este prezentat n Exemplul 14.3. Dup cum observai, foaia stiluri2.css a fost apelat n antetul documentului, prin intermediul etichetei <LINK> cu atributul rel="stylesheet". Atributul href al etichetei are ca valoare numele (i adresa relativ, dac este necesar) al foii de stiluri apelate. n documentul HTML am inclus i o legtur, pentru a exemplifica modul n care foaia de stiluri schimb culorile legturii. Atributul hover se refer la proprietatea ca legtura s i schimbe culoarea la trecerea cu mouse-ul peste ea, fr a face click. Pagina descris n acest exemplul are aspectul din Figura 14.2. 30. Exemplul 14. 3 <HTML> <HEAD> <TITLE>stiluri3</TITLE> <LINK rel="stylesheet" href="stiluri2.css"> </HEAD> <BODY> <H1 align="center">Foi de stiluri externe</H1> Acest exemplu ilustreaza modul in care este inclusa in pagina o foaie de stiluri externa <P>Mai multe exemple in <A href="anexa1.html">anexa2</A> </BODY> </HTML> Stiluri in-line Spre deosebire de stilurile ncapsulate i de foile de stiluri externe, stilurile in-line fac parte chiar din corpul documentului HTML. Ele se aplic prin folosirea atributului style n asociere cu etichetele HTML standard. Reinei, deci, c style poate fi att etichet n sine ct i atribut al altor etichete. Definiiile de stil in-line se aplic numai asupra elementelor incluse ntre etichetele care au asociat atributul style. Din acest motiv, dac dorim s repetm n alt loc din cuprinsul documentului aceleai definiii de stil, ele vor trebui repetate, ncrcnd astfel documentul HTML. Totui, utilitatea stilurilor in-line este aceea c fiind definite chiar n cuprinsul documentului, definiiile lor sunt mai puternice dect cele din stilurile ncapsulate sau externe. Dac, de exemplu, 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 extern, putem aplica acelui element un stil in-line care se va referi strict la el. Iat un exemplu de aplicare a unui stil in-line asociat etichetei <P>:

<P style="color: red; font-family: arial; font-weight: bold">Textul din acest paragraf este scris cu fonturi arial, ingrosate, de culoare rosu</P> Observai c la stilurile in-line definiiile de stil sunt incluse ntre apostrofuri i nu ntre acolade, ca la celelalte tipuri de stiluri. Atunci cnd lucrai cu documente HTML deja existente crora dorii s le aplicai stiluri in-line, este recomandat s folosii etichetele <DIV> i <SPAN>. Acestea v permit s aplicai stilurile fr a afecta codul HTML deja existent sau aspectul paginii n browserele care nu suport stiluri. Exemplul 14.4 ilustreaz folosirea etichetei <SPAN> aspectul paginii fiind redat n Figura 14.3. 31. Exemplul 14. 4 <HTML> <HEAD> <TITLE>stiluri4</TITLE> </HEAD> <BODY> <H1 style="color:red;font-famyly:arial">Stiluri in-line</H1><HR> <P>Textul din acest paragraf este divizat folosind eticheta span</P> <SPAN style="font-family:arial; color: blue">Text scris cu albastru si fonturi arial</SPAN><BR> <SPAN style="font-family: courier; size: medium; color:green">Text scris cu verde si fonturi courier medium</SPAN> </BODY> </HTML> La fel ca i la capitolele anterioare, nu vom intra n amnunte privind programarea cu ajutorul stilurilor. Dei stilurile sunt intuitive i uor de aplicat, totui o abordare exhaustiv a acestui subiect depete obiectul acestei cri. Prezentm, totui, n continuare, cteva exemple care v pot fi utile n paginile dumneavoastr. 3. Efecte obinute cu ajutorul stilurilor Aspectul textului Iat cteva atribute care se pot asocia cu diverse etichete HTML permind schimbarea aspectului textului. 32. color backgroundcolor font-family font-size font-weight Tabel 14. 1 Efectul Seteaz culoarea textului. Seteaz culoarea fundalului unui obiect. Seteaz tipul de font. Seteaz dimensiunea fonturilor. Valorile pot fi exprimate n pixeli (px) sau puncte (pt). Seteaz grosimea fonturilor. Valorile posibile pot fi: normal, bold, bolder, lighter.

Atributul

font-style letter-spacing

Seteaz stilul de font. Valorile pot fi: normal, italic, oblique. Seteaz spaierea literelor. Valorile pot fi: pixeli (px), puncte (pt), inci (in), centimetri (cm) sau milimetri (mm). Seteaz spaierea cuvintelor. Valorile pot fi: pixeli (px), puncte (pt), inci (in), centimetri (cm) sau milimetri. Valorile posibile pot fi: capitalize, uppercase, lowercase, none. Valorile pot fi: underline, overline, linethrough, blink. Schimb aspectul unei legturi cnd mouse-ul se afl deasupra ei. Definete aspectul unei legturi. Definete aspectul legturii active. Definete aspectul legturii vizitate. Schimb cuvnt. aspectul primei litere dintr-un

word-spacing text-transform text-decoration hover link active visited first-letter first-line

Schimb aspectul primei linii dintr-un text.

n exemplele urmtoare sunt ilustrate cteva din aceste atribute. Exemplul 14.5 include o definiie de stil n care sunt definii aa numiii selectori de clas, n acest exemplu B.titlu i B.subtitlu. n corpul documentului apelul acestora a fost fcut prin construcia: <B class="titlu">Titlu</B> Atributul class care se poate asocia etichetei <B> ca n acest exemplu sau altor etichete de formatare a textului are ca valoare un identificator care a fost definit n prealabil n cadrul definiiei de stil. Aspectul paginii descrise n acest exemplu este cel din Figura 14.4. 33. Exemplul 14. 5 <HTML> <HEAD> <TITLE>stiluri5</TITLE> <STYLE> <!-B.titlu {font-size: 20 pt; font-weight: bolder; letter-spacing:5px} B.subtitlu {font/size: 15 pt; letter-spacing: 5px} --> </STYLE> </HEAD> <BODY> <H1 align="center">Aspectul textului</H1><HR> <P> Text normal<BR> <B>Text ingrosat</B><BR>

<B class="titlu">Titlu</B><BR> <B class="subtitlu">Subtitlu</B> </P> </BODY> </HTML> Exemplul 14.6 folosete stiluri la formatarea titlului de nivel H1 i a textului din cadrul paragrafului, folosind atributul first-letter care schimb aspectul primei litere din paragraf. i n acest exemplu a fost folosit un selector de clas i anume P.primalit. Aspectul paginii care folosete aceste stiluri este redat n Figura 14.5. 34. Exemplul 14. 6 <HTML> <HEAD> <TITLE>stiluri6</TITLE> <STYLE> <!-P.primalit:first-letter {font-weight: bolder; font-style: italic; font-size:50 pt; color:red} H1 {color:blue; letter-spacing:5 px} --> </STYLE> </HEAD> <BODY> <H1 align="center">Efecte asupra textului</H1><HR> <P class="primalit">Textul din acest paragraf foloseste atributul first-letter</P> </BODY> </HTML> Bare de derulare colorate Unul dintre efectele des ntlnite n paginile Web este prezena barelor de derulare colorate. Acest efect se poate, de asemenea, obine prin aplicarea stilurilor. Pentru a defini culoarea barelor de derulare se folosesc cteva atribute, pe care le definim mai jos. 35. Tabel 14. 2 Efectul Definete culoarea de baz a barei, a butoanelor cu sgei i a fundalului pe care se deplaseaz bara. Dac dorii s realizai rapid o bar de derulare nu este necesar s setai dect acest atribut i pe cel urmtor. Setarea celorlalte atribute se suprapune i anuleaz efectele acestuia. Definete culoarea sgeilor de pe bar Definete culoarea suprafeei barei de derulare i a butoanelor pe care sunt sgeile. De asemenea, stabilete culoarea fundalului pe care se deplaseaz bara.

Atributul scrollbar-base-color

scrollbar-arrowcolor scrollbar-face-color

scrollbar-highlightcolor

Definete culoarea prilor "iluminate" ale barei i butoanelor cu sgei (marginile de sus i din stnga) i a fundalului pe care se deplaseaz bara Definete culoarea prilor "ntunecate" ale barei i butoanelor cu sgei (marginile de jos i din dreapta) Definete culoarea marginilor de jos i din dreapta ale barei i butoanelor cu sgei Definete culoarea marginilor de sus i din stnga ale barei i butoanelor cu sgei Definete culoarea fundalului barei

scrollbardarkshadow-color scrollbar-shadowcolor scrollbar-3dlightcolor scrollbar-track-color

Dup cum observai, unele dintre aceste atribute i suprapun efectele. Exist anumite reguli care stabilesc prioritile atributelor pe care nu le vom aborda aici. Ca nceptor, este recomandat s nu folosii atribute care se suprapun pentru a nu obine rezultate neconforme cu inteniile dumneavoastr. Exemplul urmtor ilustreaz modul de construire a barelor de derulare colorate. n Exemplul 14.7 am construit o foaie de stiluri extern salvat sub numele stiluri7.css. 36. Exemplul 14. 7 BODY { scrollbar-face-color:blue; scrollbar-arrow-color:yellow; scrollbar-shadow-color:red; scrollbar-3dlight-color:yellow; scrollbar-track-color:cyan; } Documentul HTML care apeleaz foaia de stiluri este construit n Exemplul 14.8, pagina descris de acest document avnd aspectul din Figura 14.6. 37. Exemplul 14. 8 <HTML> <HEAD> <TITLE>stiluri8</TITLE> <LINK rel="stylesheet" href="stiluri7.css"> </HEAD> <BODY> <H1 align="center">Bare de derulare colorate</H1> a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR> a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR> a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR> </BODY> </HTML> Desigur, culorile pe care le alegei pentru bara de derulare trebuie selectate cu grij, astfel nct s se armonizeze cu restul paginii. Folosirea unei foi de stiluri externe este util deoarece putei stabili astfel culoarea barei pentru toate paginile site-ului dumneavoastr. Browserele Netscape nu suport schimbarea culorilor barei de derulare.

Formulare colorate Exemplul care urmeaz (Exemplul 14.9) folosete stiluri in-line pentru a crea formulare colorate care pot da paginii un aspect mai atractiv. Am folosit pentru setarea culorilor codurile hexazecimale pe care le putei gsi n Anexa 3. Ca i la barele de derulare, culorile formularelor trebuie alese cu grij pentru a nu da paginii un aspect ncrcat i lipsit de bun-gust. Pagina descris n acest document arat ca n Figura 14.7. 38. Exemplul 14. 9 <HTML> <HEAD> <TITLE>stiluri9</TITLE> </HEAD> <BODY> <H1 align="center">Formulare colorate</H1><HR> <FORM> <INPUT name="text" style="background-color: #00CCFF; color: #FFFFFF; font-weight: bold" value="Salut!"> <P> <TEXTAREA rows="5" cols="20" style="color: #0066CC; background-color: #CCCCCC; scrollbar-base-color:red;">Care sunt impresiile tale?</TEXTAREA> <P> <INPUT type="submit" value="trimite" style="background-color: #0066CC"> </FORM> </BODY> </HTML> Vizualizate n Netscape formularele din exemplul de mai sus vor avea aspectul normal, necolorat. 4. Rezumat Foile de stiluri reprezint un instrument important n elaborarea documentelor HTML, mai ales dac dorim s construim un site Web. Acestea permit pstrarea unui aspect unitar i coerent pe tot parcursul site-ului. Un stil este o colecie de atribute ale textului i ale modului de aranjare a documentului care pot fi aplicate n mod selectiv unui document sau doar unei pri din acesta. Stilurile se pot aplica unui document n trei moduri: ncapsulate - prin intermediul etichetei <STYLE> plasat n antetul documentului legate - prin intermediul etichetei <LINK> plasat de asemenea n antetul documentului i care face legtura cu foaia de stiluri extern in-line - prin intermediul atributului style asociat cu diverse etichete HTML. Cu ajutorul stilurilor se pot obine efecte deosebite n cadrul documentelor HTML: se poate modifica aspectul textului, 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 15 Elemente de grafic avansat

1. Imagini hart n mod obinuit, cnd folosim o imagine drept legtur, includem eticheta <IMG> n interiorul etichetei pentru link-uri , <A>. n continuare este prezentat o alt modalitate de a folosi o imagine ca legtur i anume crearea unei imagini hart. Ce este o imagine hart? O imagine hart este o zon activ pe care se poate executa click cu mouse-ul, apsarea diferitelor regiuni ale imaginii ducnd la deschiderea unor documente HTML diferite. Cu alte cuvinte, o imagine hart este o imagine mprit n regiuni, iar fiecare regiune reprezint o legtur ctre un alt document. Un exemplu de utilizare a imaginilor hart l constituie barele de butoane folosite n multe site-uri ca instrumente de navigare. Imaginile hart ofer posibilitatea de a folosi o singur imagine pentru a furniza legturi ctre mai multe pagini. V putei imagina o imagine hart ca fiind compus din dou pri: imaginea n sine i o hart invizibil care este aplicat peste imagine, mprind-o n regiuni. Aceast hart folosete pentru definirea regiunilor forme prestabilite: poligoane, cercuri sau dreptunghiuri. n general, imaginile care se preteaz la a fi folosite ca imagini hart sunt cele care conin forme geometrice care conduc la o mprire natural a imaginii n regiuni. n funcie de modul cum sunt prelucrate imaginile i identificate adresele spre care indic fiecare regiune, imaginile hart pot fi de dou tipuri: 39. imagini de tip server 40. imagini de tip client Imagini hart pentru server (server side) O imagine hart de tip server se caracterizeaz prin faptul c face apel la o aplicaie (un script) de pe server care realizeaz determinarea regiunii pe care s-a fcut click i ncarc documentul HTML asociat acelei regiuni. Nu este nevoie s v facei griji n legtur cu scriptul care prelucreaz imaginea hart deoarece majoritatea serverelor au deja instalat o astfel de aplicaie, cele mai cunoscute fiind Imagemap i HTImage. Folosirea imaginilor hart de tip server parcurge urmtorii pai: 41. vizitatorul face click pe o anumit zon a imaginii 42. coordonatele acestei zone sunt transmise serverului 43. scriptul aflat pe server asociaz aceste coordonate cu URL-ul unui anumit document HTML (lista adreselor URL ale imaginilor asociate cu regiunile hrii se afl plasat tot pe server) 44. adresa URL mpreun cu coordonatele regiunii sunt trimise napoi la browser care deschide documentul HTML corespunztor. Este lesne de observat c parcurgerea tuturor acestor etape precum i interaciunea cu serverul poate ncetini mult procesul de ncrcare a documentelor HTML asociate regiunilor hrii. Singurul avantaj al folosirii imaginilor hart este faptul c funcioneaz n toate browserele. Totui, deoarece versiunile mai noi dect Netscape 2.02 i Internet Explorer 2.0 recunosc imaginile hart de tip client, se va renuna treptat la folosirea imaginilor hart de tip server. Imagini hart de tip client (client side)

Imaginile hart de tip client lucreaz independent de server. Cnd folosim acest tip de imagini hart plasm toate datele necesare prelucrrii hrii chiar n corpul documentului HTML astfel nct browserul l execut fr a mai fi necesar o intervenie din partea serverului. Imaginile hart de tip client au avantaje evidente: sunt mult mai rapide, funcionarea lor este mult simplificat, i, n plus, la trecerea cu mouse-ul peste hart, n bara de status a ferestrei browserului apare adresa URL asociat fiecrei regiuni, ceea ce ofer informaii suplimentare vizitatorului. Crearea unei imagini hart de tip client Pentru a include n documentul HTML o hart pentru o anumit imagine se folosete eticheta container <MAP> </MAP>. ntre aceste etichete se plaseaz mai multe etichete <AREA> care au rolul de a defini coordonatele i forma regiunilor pe care dorim s le delimitm pe imagine, ca n exemplul urmtor: <MAP name="harta"> <AREA shape="rect" coords="x1, y1, x2, y2" href="URL1"> <AREA shape="poly" coords="x1, y1, x2, y2, , xn, yn" href="URL2"> <AREA shape="circle" coords="x, y, raza" href="URL3"> </MAP> Regiunile definite n acest exemplu sunt un dreptunghi, 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. Pentru a comunica browserului ce imagine trebuie s foloseasc pentru a crea imaginea hart se folosete eticheta pentru imagini <IMG>, atributul src avnd ca valoare adresa fiierului grafic folosit. n plus, n cadrul etichetei <IMG> se folosete atributul usemap care are rolul de ancor (legtur intern). De exemplu, dac harta pe care o folosim a fost definit n eticheta <MAP> cu numele "harta1" i folosete fiierul imagine1.gif atunci eticheta <IMG> va avea urmtoarea structur: <IMG src="imagine1.gif" usemap="#harta1" width="100" height="100" border="0"> n exemplul urmtor (Exemplul 15.1) vom crea o imagine hart format din patru regiuni, trei dreptunghiuri i un poligon cu patru vrfuri. Pentru a determina coordonatele vrfurilor fiecrei regiuni am folosit Microsoft Photo Editor, dar putei folosi orice alt editor grafic. La plasarea cursorului mouse-ului oriunde n cadrul imaginii, n bara de status (colul din stnga jos) vei observa coordonatele n pixeli, ale punctului n care v gsii. Am asociat fiecrei regiuni cte un document HTML dintre cele create la capitolele anterioare. Aspectul acestei pagini este redat n Figura 15.1. Exemplul 15. 1 <HTML> <HEAD> <TITLE>grafica1</TITLE> </HEAD> <BODY> <H1 align="center">Imagini harta</H1><HR> <MAP name="harta"> <AREA shape="poly" coords="29, 109, 44, 122, 111, 24, 125, 36" href="culori1.html"> <AREA shape="rect" coords="132, 35, 245, 57" href="fonturi1.html"> <AREA shape="rect" coords="114, 61, 224, 92" href="liste1.html"> <AREA shape="rect" coords="81, 95, 227, 125" href="stiluri1.html"> </MAP> <H3>Pentru a deschide cartile din imagine faceti click pe una dintre ele</H3>

<IMG src="../Imagini/books1.gif" usemap="#harta" width="283" height="142" border="0"> </BODY> </HTML> 2. Imagini animate O imagine animat este format dintr-o serie de imagini (pentru animaie se folosete formatul GIF) care sunt afiate una dup cealalt crend aparena unei micri continue. Exist multe site-uri care ofer imagini animate pe care le putei descrca i salva pe hard-disk pentru a le folosi n cadrul site-ului dumneavoastr. Este suficient s deschidei motorul de cutare pe care l folosii de obicei i s introducei drept cheie de cutare cuvintele "animated gifs" i vei obine un foarte mare numr de rezultate. Avei, ns, i posibilitatea de a v crea propriile imagini animate. Acest 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 ANIMAIE. Fiecare secvena din cuvnt reprezint o imagine distinct, astfel c vom crea 9 fiiere GIF care vor conine secvenele: ANIMATIE, ANIMATI, ANIMAT, ANIMA, ANIM, ANI, AN, A. Ultimul fiier va conine o imagine fr nici o liter. Deoarece imaginile sunt foarte simple am folosit pentru crearea lor utilitarul Paint, din Windows > Accessories, dar dac dorii s creai imagini mai complexe este necesar s utilizai un editor grafic mai performant. Dup crearea imaginilor i salvarea fiierelor cu extensia .gif se trece la ce-a de-a doua etap: reunirea lor pentru a crea procesul de animaie. Aceast animaie a fost realizat cu ajutorul aplicaiei numite GIF Construction Set pe care o putei gsi la adresa: http://www.mindworkshop.com/alchemy/ Programul ofer, pe lng crearea animaiei, i multe alte opiuni: crearea de butoane, bannere, efecte de tranziie ale paginilor, etc. n meniul File al programului exist un Animation Wizard care v va conduce pas cu pas de-a lungul procesul de creare a animaiei. Wizard-ul v va cere cteva informaii printre care ce fiiere dorii s fac parte din procesul de animaie (n cazul nostru cele nou fiiere GIF), dac dorii ca procesul s se desfoare fr oprire i care este intervalul de timp dintre dou afiri. Dup ce Animation Wizard 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 HTML se face ca i la o imagine obinuit folosind eticheta <IMG>. Exemplul 15.2 ilustreaz modul cum este inclus n pagin o imagine animat aspectul paginii fiind cel din Figura 15.2. Exemplul 15. 2 <HTML> <HEAD> <TITLE>grafica2</TITLE> </HEAD> <BODY> <H1 align="center">Imagini animate</H1><HR> <P><IMG src="../Imagini/animatie.gif"> </BODY>

</HTML> Dei imaginile animate sunt atractive i dau paginii un aspect dinamic, totui excesul de animaie poate avea efecte contrare. Prea multe imagini animate sau o animaie prea complex pot conduce la mrirea timpului de ncrcare a paginii. n plus, animaia poate deveni obositoare i poate distrage atenia vizitatorului de la coninutul paginii. V recomandm, deci, s folosii imaginile animate cu grij i numai atunci cnd au un rol bine definit n cadrul paginii. 3. Imagini transparente Adesea o imagine inclus ntr-o pagin arat mai bine dac are un fundal transparent. Un 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. Desigur, orice culoare din imagine poate fi fcut transparent, dar cel mai adesea aceast tehnic se aplic asupra culorii de fundal. Dac dorim s realizm un fundal transparent pentru o imagine trebuie s inem seama de o serie de lucruri: 45. Fundalul trebuie s aib o singur culoare i nu o combinaie de culori. 46. Culoarea de fundal nu trebuie s mai fie prezent altundeva n cadrul imaginii, deoarece transparena se va aplica tuturor zonelor colorate cu aceeai culoare 47. Este recomandat ca fundalul paginii de Web s aib atributul bgcolor setat n mod explicit 48. Fotografiile sau imaginile cu mai mult de 256 de culori nu sunt potrivite pentru a fi transformate n imagini transparente deoarece n cadrul lor este greu de definit o singur culoare. 49. Imaginile pe care dorim s le transformm n imagini transparente trebuie s fie n format GIF n Exemplul 15.3 am folosit o imagine cu fundalul de culoare alb pe care am prelucrat-o cu ajutorul aplicaiei Microsoft Photo Editor. Nu este necesar dect s deschidei fiierul GIF cu imaginea dorit, s selectai din meniul Tools opiunea Set Transparent 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 Figura 15.3. Exemplul 15. 3 <HTML> <HEAD> <TITLE>grafica3</TITLE> </HEAD> <BODY bgcolor="cyan"> <H1 align="center">Imagini transparente</H1><HR> <DIV align="center"> <H4>Imaginea originala</H4> <IMG src="../Imagini/gold.gif"> <H4>Imaginea transparenta</H4> <IMG src="../Imagini/gold_tr.gif"> </DIV> </BODY> </HTML> Pentru a verifica modul n care funcioneaz imaginea transparent pe diferite culori ale fundalului paginii, atribuii atributului bgcolor i alte valori dect cea din exemplu.

4. Rezumat n documentele Web pot fi incluse diverse elemente avansate de grafic: 50. Imagini hart 51. Animaie 52. Imagini transparente O imagine hart este o imagine care conine zone active pe care se poate efectua click cu mouseul, fiecare zon conducnd la deschiderea unui document HTML diferit. Imaginile hart sunt de dou tipuri: 53. Imagini hart de tip server 54. Imagini hart de tip client (cele mai utilizate) O imagine hart de tip client se insereaz ntr-un document cu ajutorul etichetei container <MAP> </MAP>. n cadrul acestei etichete fiecare zon este definit prin intermediul etichetei <AREA>. Imaginile animate sunt fiiere GIF care se includ n pagin ca orice alt imagine, folosind eticheta <IMG>. Pentru 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 GIF. Imaginile transparente sunt imagini la care una dintre culori (cel mai adesea culoarea de fundal) este transformat n culoare transparent, astfel nct la includerea ei ntr-o pagin Web fundalul imaginii se va confunda cu fundalul paginii. Capitolul 16 Motoare de cutare i metatag-uri 1. Ce este un motor de cutare? Dac avei o minim experien n navigarea pe Web v-ai ntlnit, fr ndoial cu motoarele de cutare. Motoarele de cutare sunt aplicaii plasate pe servere deosebit de puternice, care conin baze de date imense i care au drept scop cercetarea i indexarea sutelor de milioane de pagini Web existente. Utilitatea motoarelor de cutare este evident: fr ele ar fi aproape imposibil s gsim informaiile care ne intereseaz n oceanul de informaii care este Web-ul. Motoarele de cutare conin un formular de tip cmp de editare n care utilizatorul introduce unul sau mai multe cuvinte folosite drept cheie de cutare. Rezultatele sunt furnizate sub forma unei liste de pagini Web care conin cuvintele cheie introduse. Indexarea unei pagini de ctre un motor de cutare nseamn asocierea cuvintelor cheie cu coninutul informaional al acesteia. Cele mai folosite motoare de cutare sunt, n acest moment, Google, Yahoo!, Lycos, Go.com i Excite. Motoarele de cutare au drept scop indexarea tuturor paginilor existente pe Web, dar, evident, acest lucru este imposibil. Orict de performante ar fi programele cu care lucreaz, numrul de site-uri care sunt publicate n permanen pe Web depete posibilitile acestora. Acesta este motivul pentru care simpla postare a unui site pe Web nu garanteaz ctui de puin c acesta va avea vizitatori. Descoperirea lui de ctre motoarele de cutare poate dura ntre ase luni i un an. Tocmai 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.

Exist dou tipuri principale de motoare de cutare, care se bazeaz pe moduri diferite de a face indexarea paginilor: Motoarele de cutare de tip "pianjen" care realizeaz indexarea automat, pe baza cuvintelor cheie prezente n antetul documentelor HTML (de exemplu Google). Acest tip de motoare folosesc algoritmi extrem de performani, care cerceteaz i indexeaz milioane de pagini pe zi. Motoarele de cutare care fac indexarea pe baza cuvintelor cheie furnizate de creatorul paginii, la nscrierea acesteia n baza de date a aplicaiei (de exemplu Yahoo!). nscrierea n baza de date se face personal, de ctre autorul site-ului, iar evaluarea site-ului se face de ctre personal uman. Pentru a face mai eficient indexarea paginilor de ctre motoarele de tip "pianjen" limbajul HTML include o categorie special de etichete numite metatag-uri. 2. Metatag-uri Metatag-urile sunt o categorie special de etichete care sunt plasate n antetul documentului HTML (n blocul <HEAD>). Ca i celelalte elemente incluse n antetul documentului, cu excepia titlului documentului, metatag-urile nu sunt vizibile pentru vizitatorul paginii. Primul metatag despre care vom vorbi este deja cunoscut i l-ai folosit de foarte multe ori pn acum: este metatagul <TITLE>. Se utilizeaz conform sintaxei: <TITLE>Titlul paginii Web</TITLE>. Dup cum ai observat din exemplele de pn acum, titlul paginii apare n bara de titlu a ferestrei browserului. Multe dintre motoarele de cutare afieaz n lista de rezultate i titlul paginilor pe lng adresele URL. Titlul paginii este informaia care l determin pe vizitator s intre sau nu pe pagina dumneavoastr. Titlul trebuie s fie o propoziie care s atrag atenia i n acelai timp s conin informaiile eseniale privind subiectul i coninutul paginii. Celelalte metatag-uri se introduc prin intermediul etichetei <META> care nu este o etichet container. Eticheta <META> admite o serie de atribute care ofer motoarelor de cutare diverse informaii care s ajute la indexarea paginii. Alte atribute ofer informaii browserului privind data de expirare a documentului sau specific perioada de timp dup care documentul este rencrcat n mod automat. Exist dou categorii de metatag-uri: 1. metatag-urile name 2. metatag-urile http-equiv Metatag-urile "name" Cele mai folosite metatag-uri sunt cele care se refer la cuvintele cheie care caracterizeaz pagina i coninutul ei, oferind astfel informaii motoarelor de cutare. Acestea sunt: "keywords" "description" "robots" Metatag-ul "keywords" Metatag-ul "keywords" se introduce conform urmtoarei sintaxe:

<META name="keywords" content="lista cuvinte cheie"> Lista cuvintelor cheie trebuie s includ toate cuvintele pe care considerai c le-ar putea introduce un vizitator ca cheie de cutare pentru a descoperi pagina dumneavoastr. Cuvintele se scriu desprite prin virgul, fr spaii intre ele. Pe lng cuvintele cheie, putei folosi i combinaii de cuvinte. De exemplu ntr-o pagin care ofer informaii despre crearea de pagini Web i web design, cuvintele cheie ar putea fi urmtoarele: <META name="keywords" content="Web design, creare pagini Web, construire site, Web site design"> Gsirea cuvintelor i combinaiilor de cuvinte cheie este o etap care trebuie tratat cu atenie. Pentru a aduce pagina dumneavoastr n atenia acelor vizitatori pentru care este ea conceput, cuvintele cheie trebuie alese cu atenie i ele trebuie s reflecte exact elementele de coninut definitorii ale paginii. Unii dintre creatorii de pagini Web care doresc s obin o poziionare mai bun n lista de rezultate furnizate de motoarele de cutare folosesc n mod abuziv cuvintele cheie, repetnd acelai cuvnt sau combinaii de cuvinte de un numr foarte mare de ori sau folosind cuvinte cheie care nu au legtur cu subiectul paginii. Ca urmare a acestor ncercri de "pclire" a motoarelor de cutare, au fost dezvoltai algoritmi performani care identific tentativele de fraud i care se soldeaz fie cu scderea cotaiei paginilor respective, fie chiar cu eliminarea lor din baza de date a motorului de cutare. Metatag-ul "description" Metatag-ul n cadrul cruia se realizeaz descrierea paginii este, de asemenea foarte important pentru succesul acesteia. Ca i cel anterior, se introduce n antetul documentului conform urmtoarei sintaxe: <META name="description" content="descrierea subiectului paginii"> Multe motoare de cutare includ n lista de rezultate pe lng URL-ul i titlul paginii i descrierea ei. Pentru a face descrierea paginii dumneavoastr este bine s folosii combinaii de cuvinte cheie, reunite n fraze atractive i convingtoare. Fii concis n descriere i plasai informaiile eseniale la nceput deoarece este posibil ca descrierile prea lungi s fie trunchiate. Ca i n cazul alegerii cuvintelor cheie, 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 deschid pagina pe care ai creato. Descrierea unei pagini poate arta astfel: <META name="description" content="Tutorial de Web design care va initiaza pas cu pas in procesul de construire al unui site Web. Invatati sa concepeti, sa creati si sa promovati propriul dumneavoastra site."> Pe lng metatag-ul care face descrierea paginii este recomandat introducerea, la nceputul paginii, a unui comentariu n cadrul cruia s inserai descrierea. Acest lucru este util deoarece exist motoare de cutare care ignor metatag-urile i preiau primele cuvinte pe care le gsesc n pagin. Dac ai reuit s formulai o descriere sugestiv i convingtoare, o putei folosi chiar ca fraz de nceput n partea vizibil a paginii. Metatag-ul "robots"

Sunt situaii cnd creatorul paginii Web dorete ca anumite pagini s fie excluse de la indexarea de ctre motoarele de cutare. De exemplu dac ai publicat site-ul pe Web nainte de a fi terminat (dei acest lucru este nerecomandat) 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: <META name="robots" content="noindex, nofollow"> Aceast construcie comunic motoarelor de cutare s nu indexeze pagina i n acelai timp s nu urmeze nici una dintre legturile incluse n ea. Atributul content poate lua urmtoarele valori: all - permite indexarea tuturor paginilor none - nu permite indexarea nici unei pagini i nici urmarea legturilor din cadrul lor index - permite indexarea paginii follow - permite urmarea legturilor din pagin noindex - nu permite indexarea paginii nofollow - nu permite urmarea legturilor din cadrul paginii Alte metatag-uri name utilizate sunt: <META name="author" content="nume_autor"> Permite specificarea numelui autorului paginii <META name="copyright" content="drepturi copyright"> Permite specificarea drepturilor de autor <META name="generator" content="nume_ aplicatie"> Specific aplicaia cu care a fost creat pagina. Exemplu: <META name="generator" content="Microsoft FrontPage 3.0"> Metatag-urile "http-equiv" Pe lng metatag-urile name care ofer informaii motoarelor de cutare, exist metatag-urile http-equiv care ofer informaii browserului privind documentul pe care urmeaz s-l deschid. Iat n continuare o list a acestor metatag-uri mpreun cu funciile fiecruia dintre ele. Tabel 16. 1 Eticheta Funcia Acest tip de metatag-uri sunt <META httpechivalente cu headerele HTTP. Ele equiv="Content-Type" comunic browserului care este tipul content="text/html; charset=isopaginii i cum s o afieze precum i 8859-1"> setul de caractere folosit (opional) <META httpSpecific limbajul de script equiv="Content-Script-Type" folosit n document content="text/javascript"> <META httpSpecific limbajul de foi de equiv="Content-Style-Type" stiluri folosit n document content="text/css"> <META equiv="expires" expirarii> httpPermite precizarea datei la care content="data_ documentul poate fi considerat expirat

<META equiv="refresh" secunde">

httpcontent="nr_

<META httpequiv="refresh" content="nr secunde; url=adresa_noua">

Specific numrul de secunde dup care pagina este rencrcat automat de ctre browser. Atributul content poate conine, opional, i adresa URL a altei pagini care se va ncrca n locul paginii curente. Aceast opiune este util cnd dorii redirectarea vizitatorului ctre alt pagin. Exemplu: <META http-equiv="refresh" content="5; url=http://www.nouapagina.com">

Dup cum observai, metatag-urile de tip http-equiv sunt folosite pentru a transmite browserului diverse informaii privind documentul HTML. Din aceast categorie face parte i metatag-ul care permite specificarea modului de tranziie ntre pagini: <META http-equiv="Page-Enter" Transition=cod_tranzitie)"> <META http-equiv="Page-Exit" Transition=cod_tranzitie)"> content="RevealTrans(Duration=nr_secunde, content="RevealTrans(Duration=nr_secunde,

unde: nr_secunde reprezint durata tranziiei n secunde iar cod_tranzitie poate fi unul dintre codurile de mai jos. Fiecare dintre ele realizeaz tranziia paginii n alt mod. Tabel 16. 2 Cod tranziie 0 1 2 3 4 5 6 7 8 9 de Cum se face tranziia Dreptunghi nchide Dreptunghi deschide care care se se

Cerc care se nchide Cerc care se deschide De jos n sus De sus n jos De la stnga la dreapta De la dreapta la stnga Dungi care deplaseaz spre dreapta Dungi care deplaseaz n jos se se

10 11 12 13 14 15

Dreptunghiuri care se deplaseaz spre dreapta Dreptunghiuri care se deplaseaz n jos Pixeli care "dizolv" pagina Cortin care se nchide orizontal Cortin care deschide orizontal se

Cortin care se nchide vertical

Exemplul 16.1 ilustreaz funcionarea acestui metatag. Putei observa modul de tranziie dintre pagini din Figura 16.1. Exemplul 16. 1 <HTML> <HEAD> <TITLE>meta1</TITLE> <META http-equiv="page-enter" content="RevealTrans(duration=5, transition=0"> <META http-equiv="page-exit" content="RevealTrans(duration=5, transition=1"> </HEAD> <BODY bgcolor="red"> <H1 align="center">Tranzitia intre pagini</H1><HR> Pentru a observa modul de tranzitie apasati <A href="meta2.html">aici</A> </BODY> </HTML> Putei schimba codurile dup cum dorii pentru a observa i alte moduri de tranziie. Documentul meta2.html creat n Exemplul 16.2 servete doar pentru a exemplifica modul n care se face tranziia pentru intrarea n pagin. Exemplul 16. 2 <HTML> <HEAD> <TITLE>meta2</TITLE> </HEAD> <BODY bgcolor="yellow"> <H3>Pentru a reveni la pagina anterioara apasati butonul Back al browserului</H3> </BODY> </HTML> Atenie! Am precizat c metatag-urile sunt incluse n antetul documentului HTML. Atunci cnd folosii cadre n paginile dumneavoastr nu uitai s plasai metatag-urile n blocul <HEAD> al tuturor documentelor care se deschid n cadre i nu numai n documentul de definire a cadrelor <FRAMESET>. 3. Rezumat

Motoarele de cutare sunt aplicaii foarte puternice care au drept scop indexarea i adugarea n baza lor de date a sutelor de milioane de pagini Web existente. Pentru a facilita indexarea paginii de ctre motoarele de cutare, n antetul documentului HTML se includ nite elemente speciale numite metatag-uri, prin intermediul etichetei <META>. Cele mai importante metatag-uri sunt cele care furnizeaz motoarelor de cutare lista de cuvinte cheie asociat paginii i descrierea acesteia (metatag-urile "keywords" i "description" ), precum i cel care interzice indexarea paginilor (metatag-ul "robots" ). Alte metatag-uri furnizeaz informaii browserului privind tipul paginii, intervalul de timp dup care pagina este rencrcat automat, momentul expirrii, autorul, programul cu care a fost construit, etc. Crearea i publicarea unui site web Am studiat pn acum elementele fundamentale ale limbajului HTML inclusiv modul n care acesta poate fi extins prin folosirea scripturilor CGI, a scripturilor JavaScript i a foilor de stiluri. Avei la ndemn acum instrumentele necesare pentru a crea propriul dumneavoastr site Web. Dar este oare suficient? Rspunsul este nu. Pentru a crea un site Web de calitate, care s comunice informaiile n mod logic i atractiv i care s atrag vizitatori permaneni, cunoaterea limbajului HTML nu este suficient. nainte de a ncepe scrierea codului HTML pentru paginile dumneavoastr trebuie s parcurgei alte dou etape importante: planificarea site-ului i stabilirea elementelor de Web design. Dup ce ai finalizat documentele HTML care vor face parte din site trebuie s testai funcionarea link-urilor i aspectul paginilor n diferite browsere. i, n fine, dup ce toate aceste etape au fost parcurse, urmeaz publicarea site-ului pe un server Web care s-l fac accesibil tuturor celor care navigheaz pe Web. n cele ce urmeaz vom discuta despre etapele care preced construirea documentelor HTML care vor forma site-ul i despre cele care urmeaz dup ce codul HTML al paginilor a fost definitivat. Capitolul 17 Planificarea site-ului Planificarea este un aspect crucial n procesul de creare a unui site Web, deoarece este etapa n care se iau decizii care vor influena designul, implementarea i, mai trziu, promovarea site-ului. World Wide Web fiind un mediu deschis i dinamic, planificarea este mai degrab un proces continuu n care intervin schimbri determinate de nnoirea permanent a informaiilor i de apariia altora noi. Atunci cnd creai un site Web trebuie s fii contient c exist o serie de factori asupra crora creatorul site-ului nu are nici un control. Primul pas n procesul de planificare este identificarea acestor factori i determinarea modului n care acetia pot afecta structura viitoare a site-ului dumneavoastr. 1. Factori care nu pot fi planificai Factorii pe care creatorul site-ului nu i poate controla i prin urmare nu pot face obiectul unei planificri riguroase sunt urmtorii: Comportamentul utilizatorului. Acest factor implic faptul c nu putei controla cum va accesa utilizatorul informaiile din site-ul dumneavoastr. Web-ul este un sistem permeabil, aceasta nsemnnd c un vizitator poate intra n

interiorul site-ului nu numai prin pagina de nceput (pagina home) ci i printr-o pagin oarecare. Vizitatorul site-ului poate ajunge la el parcurgnd o list de rezultate furnizat de un motor de cutare, sau prin intermediul unui link aflat pe un alt site, sau parcurgnd o list de resurse. Oricare 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 Home. 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. Trebuie 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. Browserul utilizatorului. Aa cum am mai discutat, exist o mare varietate de browsere folosite pentru a vizualiza paginile Web. Prin urmare, vizitatorii site-ului vor percepe o imagine diferit a site-ului dumneavoastr, n funcie de tipul de browser folosit. Creatorul site-ului nu poate ti ce tip de browser folosete un anumit vizitator i deci nu are control asupra modului n care va fi afiat coninutul paginilor sale. De exemplu, mai exist nc utilizatori care folosesc versiuni vechi de Netscape sau Explorer, care nu suport anumite extensii HTML. Exist de asemenea nc n uz browsere text, cum este Lynx, care nu suport grafica. Dac vei plasa informaii eseniale n fiiere grafice, de exemplu, aceti utilizatori nu vor avea acces la ele. Din acest motiv este bine s stabilii de la nceput care dorii s fie nivelul de accesibilitate al siteului dumneavoastr din acest punct de vedere. Un alt aspect este nelegerea faptului c HTML 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 browser. Legturile cu pagini externe. ntr-un site Web exist de obicei legturi ctre resurse exterioare site-ului care sunt i ele n afara controlului dumneavoastr. Paginile referite prin aceste legturi i pot schimba adresele, fcnd astfel ca legtura s nu mai fie valabil (legturi perimate). De asemenea pot exista legturi rupte, n cazul cnd serverul pe care este gzduit pagina respectiv are anumite dificulti tehnice. innd seama de imposibilitatea de a controla acest aspect, pot fi adoptate mai multe metode de abordare: Site-ul s nu conin nici o legtur extern sau care s se afle n afara controlului direct al designerului. Este metoda cea mai sigur. Din pcate, aceast strategie anuleaz posibilitatea ca vizitatorul s beneficieze de informaii conexe cu subiectul site-ului dumneavoastr aflate n exteriorul su. Centralizarea resurselor. Este o practic des ntlnit pe Web, aceea de a include toate legturile externe ntr-o pagin special destinat acestora. Beneficiul acestei strategii este c n cazul cnd una dintre aceste legturi externe nu mai funcioneaz, vizitatorul se poate cu uurin rentoarce la pagina de resurse pentru a testa urmtorul link. n plus, cu unele excepii, vizitatorii vor parcurge cel puin o parte a site-ului nainte de a ajunge la pagina de legturi externe i a-l prsi, eventual, definitiv.

Ieirea liber. Este cea mai flexibil abordare, permind plasarea legturilor externe oriunde n cadrul paginilor. Dezavantajul ei major este c vizitatorul poate prsi prematur site-ul pentru a urma un anumit link. Dac nu avei control asupra legturilor de la site ctre exterior, este tot att de adevrat c nu putei controla nici legturile care se fac din exterior ctre site. Acest lucru poate fi dezavantajos, deoarece nu putei ti n ce mod este prezentat legtura ctre site-ul dumneavoastr. Poate c referirea la el este ironic sau ruvoitoare, ns acest lucru este dincolo de controlul dumneavoastr. Tot ceea ce putei face este s creai un site de calitate i cu un coninut valoros, care s conving prin el nsui. Cu toate c elementele prezentate mai sus pot prea descurajante, unele dintre ele prezint totui i avantaje. Astfel, permeabilitatea Web-ului poate lucra n favoarea designerului, cu condiia ca acesta s structureze atent informaiile prezentate i s ofere suficiente elemente de navigaie. O pagin sau un grup de pagini din cadrul unui site pot fi folosite ca referine n alte pagini sau chiar ca elemente constitutive ale unui alt site. De exemplu, un site de tip mono-pagin care face prezentarea unui manual de HTML poate fi folosit ca pagin individual ntr-un site de librrie electronic, sau poate constitui o legtur util din interiorul unui site de design Web, mrind astfel ansele ca pagina respectiv s fie accesat de vizitatori printr-unul dintre aceste puncte. 2. Etapele planificrii site-ului Procesul de planificare a unui site trebuie s parcurg urmtoarele etape: Stabilirea audienei Stabilirea scopului Definirea obiectivelor Colectarea informaiilor despre subiectul prezentat Stabilirea specificaiilor Stabilirea modului de prezentare

Audiena Pentru a crea un site de calitate i o comunicare eficient a informaiilor, o etap deosebit de important este definirea audienei site-ului. Audiena reprezint publicul cruia i se adreseaz site-ul. Stabilirea audienei site-ului dumneavoastr este esenial deoarece contribuie la definirea coninutului paginilor, precum i a organizrii i aspectului su. Un site Web 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. Stabilirea audienei unui site implic doi pai: Definirea publicului int.

Trebuie s stabilii cui se adreseaz site-ul dumneavoastr. Putei, de exemplu s v adresai "persoanelor care studiaz chimia". Dei este un enun care definete ntr-o oarecare msur audiena site-ului, este de dorit ca definirea audienei s fie mai precis dect att. V putei adresa de pild, specialitilor n chimie, i atunci informaiile vor avea un nalt grad de specializare i un nivel tiinific ridicat sau v putei adresa elevilor de liceu interesai de studiul chimiei, sau care vor da examene 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 examene.

Dac, de exemplu, dorii s creai un site comercial, stabilirea segmentului de pia cruia v adresai este la fel de important. Dac intenionai s vindei produse cosmetice v vei adresa probabil femeilor. Dar aceasta este o reprezentare mult prea general a publicului dumneavoastr. Ai putea s fii mai specific, stabilindu-v drept segment de pia femeile cu vrsta mai mic de 25 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. Concluzia care se impune este c definirea ct mai precis a audienei este definitorie pentru toate etapele ulterioare ale elaborrii site-ului. Cu ct mai bine definit este audiena, cu att ansele de a crea un site de succes sunt mai mari. Definirea informaiilor necesare care privesc publicul int.

Nu toate informaiile despre publicul int sunt eseniale n elaborarea site-ului. Dac intenionai s v adresai specialitilor n chimie, care anume caracteristici ale acestora sunt importante pentru dumneavoastr? Nivelul de educaie? Aria de specializare? Caracteristici personale, precum nlimea i greutatea? Evident, exceptnd cazul n care intenionai s vindei prin intermediul site-ului echipament de laborator, ultimele informaii sunt inutile. Prin urmare este necesar s identificai informaiile relevante privitoare la audiena site-ului dumneavoastr. Scopul Stabilirea scopului site-ului este etapa n care trebuie s rspundei la ntrebarea " de ce?". De ce dorii s creai acest site? Definiia scopului site-ului reprezint tema conductoare n procesul de construire a acestuia. Un site fr un scop clar i bine definit lanseaz un mesaj neconvingtor i ceos. Vizitatorul se va ntreba, fr ndoial, "La ce servete acest site?" i se va grbi s-l prseasc. Pentru a defini scopul site-ului trebuie s avei n vedere urmtoarele elemente: Aria de cuprindere a subiectului. S presupunem c dorii s creai un site care s conin informaii despre muzica rock a anilor 60. ntr-o asemenea situaie, nu vei defini drept subiect al site-ului muzica rock n ansamblu, deoarece o definire att de vast depete cu mult aria de cuprindere a subiectului dumneavoastr. Audiena. n scopul site-ului trebuie s facei referire i la audiena stabilita anterior. Astfel, scopul site-ului ar putea fi definit n maniera urmtoare: "Site-ul ofer informaii iubitorilor muzicii rock a anilor 60, de vrst medie". Nivelul de detaliere a subiectului. Trebuie s specificai dac v referii doar la grupurile rock reprezentative sau dorii s facei o istorie complet a perioadei. Beneficiul sau avantajul vizitatorului. Ce are de ctigat o persoan care viziteaz siteului dumneavoastr? Poate afla informaii inedite despre formaiile preferate, sau poate fi informat cu privire la evoluia lor ulterioar. Stabilirea scopului site-ului determin deciziile ulterioare ale designerului privind mesajul pe care l transmite site-ul. Un scop bine articulat servete ca jalon pentru toate celelalte etape ale procesului de planificare i creare a site-ului. Scopul site-ului poate reprezenta chiar prima informaie care le este oferit vizitatorilor, la intrarea pe prima pagin. Obiectivele

Dup 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. Obiectivele reprezint o detaliere a scopului general al site-ului, coninnd informaiile specifice care vor conduce la ndeplinirea scopului pentru care a fost creat siteul. De exemplu, dac scopul unui site este "s ofere informaii despre oraul ZZZ" , 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. Cu 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. Spre 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. Colectarea informaiilor despre subiect 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. Paii necesari n construirea coleciei de informaii necesare sunt: Stabilirea informaiilor necesare, att cele pe care le vei furniza vizitatorului ct i cele care v sunt necesare dumneavoastr Determinarea modului cum vei obine aceste informaii. n aceast etap trebuie s identificai sursele de documentare. Informaiile despre subiectul ales le putei gsi pe Web, n literatura de specialitate, n diverse baze de date. Modul de reactualizare a informaiilor. Dac 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. De exemplu, dac intenionai s creai un site care s prezinte tiri sau date despre vreme, ele vor trebui reactualizate zilnic sau chiar mai frecvent. Dac site-ul prezint informaii despre istorie, evident c informaiile vor fi reactualizate mult mai rar, eventual la apariia unor noi descoperiri arheologice, de exemplu. Specificaiile Stabilirea specificaiilor pentru un site reprezint o detaliere a obiectivelor sale i definirea unor cerine sau a unor restricii. Specificaiile descriu n detaliu ce informaii vor fi oferite n paginile siteului i cum vor fi ele prezentate. De exemplu, 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 URL, cte astfel de adrese vor fi incluse ntr-o pagin, etc. Specificaiile trebuie s identifice toate resursele necesare atingerii obiectivelor: link-uri, fiiere grafice, fiiere de sunet sau video, alte elemente care vor fi incluse n site: formulare, imagini hart, scripturi. De asemenea, n cadrul specificaiilor trebuie stabilite i elementele care nu vor fi incluse n pagini (dac este cazul). De exemplu, se poate specifica s nu fie folosite anumite extensii HTML, sau formulare, fiiere care s depeasc anumite dimensiuni, etc.

Modul de prezentare Planificarea modului de prezentare implic o serie de decizii care vor servi drept puncte de reper n etapa de construire efectiv a site-ului. Aceast etap poate include: Crearea unor template-uri pentru site Crearea unor mostre de documente HTML, imagini hart, sau formulare Ealonarea n timp a etapelor de creare a site-ului

3. Rezumat Prima 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, browserul cu care va fi vizualizat pagina i legturile cu pagini externe. Planificarea site-ului parcurge urmtoarele etape: Stabilirea audienei site-ului Stabilirea scopului site-ului Definirea obiectivelor site-ului Colectarea informaiilor despre subiectul prezentat Stabilirea specificaiilor site-ului Stabilirea modului de prezentare a site-ului

Un 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. Fr a avea o privire de ansamblu asupra aspectelor stabilite n faza de planificare, ansele de a realiza un site de bun calitate sunt minime. Dac vei ncepe s scriei direct codul HTML 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 18 Designul site-ului Odat parcurs etapa de planificare, avnd clare audiena, scopul, obiectivele i specificaiile siteului, putei trece la etapa de creare efectiv. Pentru 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 Web design. Cnd 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. Designul unui site trebuie s echilibreze performanele browserului, 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 text vor conine paginile, ce texte sau imagini vor fi folosite drept legturi. 1. Principiile designului web Pentru a lua deciziile corecte n ceea ce privete designul unui site trebuie s avei n vedere cteva principii de baz:

Asocierea semnificaiilor. Folosii-v de puterea hypertextului pentru a stabili legturi ntre informaiile nrudite ca semnificaie. Meninerea competitivitii. Deoarece Web-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. Acest 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. Folosirea eficient a resurselor. Alegei 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 necesitile utilizatorului. Acesta este, poate, cel mai important principiu de Web design i, paradoxal, cel mai adesea ignorat. Un site Web nu se construiete pentru a satisface gustul designerului (sau al clientului pentru care lucreaz) i nici pentru a etala cunotinele sale vaste asupra celor mai noi tehnici de programare Web, ci pentru a veni n ntmpinarea nevoii de informaii a vizitatorilor si. Focalizarea asupra utilizatorului este prioritatea principal a unui site de calitate. nelegerea permeabilitii. Acest principiu se refer la nelegerea i asumarea faptului c vizitatorul poate accesa un site prin oricare pagin a sa. Din acest motiv este de dorit ca informaiile din cadrul unei pagini s se auto-susin fr a depinde de informaiile din restul site-ului. Dac 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 plcut, coerent i fluent. Paginile site-ului trebuie s ofere impresia unui tot bine organizat, elementele vizuale (icon-uri, elemente de navigare) trebuie s fie coerente pe tot parcursul site-ului, fiecare pagin trebuie s conin indicii asupra identitii site-ului i asupra scopului ei. Susinerea interactivitii. Chiar 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 Webmaster-ului, cel puin) astfel nct utilizatorii s poat obine informaii suplimentare sau s poat comunica eventualele probleme aprute la parcurgerea site-ului. Susinerea navigaiei. Asigurarea unor instrumente de navigaie eficiente este una dintre condiiile eseniale ale unui site de calitate. Se spune c un site bun este acela n care vizitatorul nu este niciodat obligat s apese butonul Back al browserului. 2. Organizarea unui site Buna organizare a site-ului este unul dintre elementele cheie ale succesului su. Modul 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-pagin) site-uri liniare formate din mai multe pagini (multi-pagin) site-uri cu structur ierarhic site-uri cu structur de tip Web

Legturile dintre pagini trebuie s fie corespunztoare tipului de site pe care l construii.

Site-urile liniare mono-pagin Acest tip de site este, aa cum indic i numele, format dintr-o singur pagin. Aceast structur se folosete atunci cnd informaiile prezentate sunt sub form de text care se poate mpri firesc n seciuni mai mici. Vizitatorii pot parcurge ntreaga pagin derulnd-o dar, de obicei, la nceputul paginii exist o list de legturi care are rol de Cuprins. Acestea sunt nite legturi interne (ancore) 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 Cuprinsul. Site-urile liniare multi-pagin Structura 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. Pentru 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. De asemenea, este necesar s inserai i o legtur cu prima pagin a site-ului care trebuie s conin Cuprinsul, 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 ecran) pentru a face navigarea mai comod. Cu toate c acest tip de organizare este logic, nu trebuie s uitai principiul permeabilitii. Pentru 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-urile cu structur ierarhic Site-urile de acest tip sunt cele mai numeroase pe Web. Un astfel de site este format dintr-o pagin de baz (Home) de nivel zero, care conine legturi ctre alte pagini, fiecare pagin coninnd cte o parte a subiectului site-ului. Fiecare dintre aceste pagini de nivel unu poate avea, la rndul su, legturi cu alte pagini, detaliind subiectul i furniznd informaii specifice. Un exemplu de site de acest tip este o librrie virtual. Pagina Home ar putea conine legturi ctre diverse categorii: Beletristic, Istorie, Politic, Economie, Calculatoare i Internet. Dac un vizitator este interesat de un manual de programare n Perl, el va alege legtura ctre Calculatoare i Internet i va ajunge ntr-o pagin de nivelul unu unde va gsi legturi ctre Programare, Internet, Hardware. Va alege legtura Programare care va deschide o pagin de nivelul doi care va conine o list de titluri, printre care i manualul cutat. Atunci cnd concepei structura unui astfel de site, trebuie s acordai o mare atenie organizrii logice i fluente a site-ului. Fiecare pagin trebuie s conin o legtur ctre pagina Home astfel nct vizitatorul s poat reveni la nceput fr s fie obligat s strbat toate nivelele. Nu legai prima pagin de prea multe pagini de nivelul unu ci ramificai-le n adncime. Dac 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. Revenind la exemplul cu librria, un astfel de instrument de navigare ar putea arta aa: Home > Calculatoare > Programare. n plus, este indicat s oferii o bar de navigare secundar la baza paginii. Site-urile de tip reea. Aceste site-uri au o structur liber. Ele sunt formate din mai multe pagini, fiecare putnd avea legtur cu oricare alt pagin. Exist i aici o pagin Home, 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. Dac 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 Home. 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. Metodologia de construire a site-ului Dei nu exist un mod unic de desfurare a procesului de construire a unui site, exist trei tipuri de abordri posibile, pe care creatorul site-ului le poate alege sau combina, n funcie de necesiti. Metoda "Top-Down" Dac 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 Home) i apoi celelalte pagini. Paginile pot conine un minim de informaii, urmnd ca la dezvoltarea ulterioar a site-ului, ele s fie mbogite. Avantajul 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. O 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 HTML pentru paginile respective. Metoda "Bottom-Up" Aceast 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. Aceast situaie poate aprea cnd dorii ca site-ul s conin pagini deja existente, care au fost create n procesul de dezvoltare al altui site, de exemplu. Chiar 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 Home. Avantajul abordrii "Bottom-Up" este acela c, la construirea paginilor individuale, nu mai suntei constrns la respectarea unui anumit stil, consecvent cu cel din pagina Home. Totui, ajustarea ulterioar a paginilor n sensul realizrii unui aspect unitar, este necesar. Metoda incrementrii Aceast 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. Metoda 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 exist riscul de a obine un site defectuos organizat i lipsit de unitate. 4. Tehnici de design web Pentru a realiza designul unui site sunt folosite o serie de tehnici 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 tehnici, fiecare dintre ele referindu-se la cte un aspect al designului site-ului. Schia site-ului Odat 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 HTML pentru fiecare pagin n parte, s realizai o schi a ntregului site.

Putei folosi n acest scop Microsoft Word sau orice alt procesor de text. Pentru nceput creai un document nou n care listai punctele majore pe care dorii s le acoperii n pagina Home. Facei de asemenea o list a elementelor grafice pe care intenionai s le includei, nsoite de indicaii privind aezarea lor n pagin. Stabilii 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. Pentru a avea o imagine ct mai exact a structurii site-ului nc din faza de schiare a sa este recomandat s folosii bara de instrumente Outlining din meniul Tools > Customize din Word. Aceasta v permite s stabilii nivelul paginilor i s realizai cu uurin ramificarea lor n adncime. O alt metod pentru a realiza schia site-ului o constituie graficul (sau harta) site-ului. Dac nu dorii s v complicai folosind un editor de text sau un program de grafic, putei realiza o astfel de schi i pe hrtie, cu creionul. Desenai cte un dreptunghi pentru fiecare pagin din site, specificnd n interiorul su scopul i obiectivele paginii, elementele i aranjarea lor n pagin. Apoi unii dreptunghiurile prin sgei pentru a specifica traseele pe care le poate parcurge utilizatorul. Sgeile reprezint de fapt legturile dintre pagini. Avei grij ca spre pagina Home 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. Oricare ar fi metoda folosit pentru a schia site-ul, la fiecare pagin trebuie s v punei urmtoarele ntrebri: Ce doresc s afle vizitatorul din aceast pagin? Ce doresc s fac vizitatorul n acest moment? Ce doresc s simt vizitatorul parcurgnd pagina? Unde doresc s mearg vizitatorul n continuare?

Desigur, 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. Pagina de intrare n site (pagina splash) Exist multe site-uri care nainte de pagina Home au o pagin de intrare n site, numit pagin splash. Scopul unei astfel de pagini este identificarea rapid a obiectului site-ului n timp ce se ncarc restul de date. Pagina splash are pentru site acelai rol pe care l are coperta unei cri sau prima pagin a unei reviste. Aceast 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. Exist opinii divergente n legtur cu folosirea i utilitatea paginii splash ntr-un site. Mai ales dac face apel la elemente multimedia, sunet, grafic, animaie complex care ncetinesc timpul de ncrcare, pagina splash poate aduce mai degrab deservicii site-ului. n plus, pagina splash poate fi resimit de vizitator ca o barier n accesul imediat la informaiile din interiorul site-ului. Pagina Home Dei aspectul i coninutul paginii Home poate varia foarte multe de la un site la altul, exist cteva elemente comune prezente n orice pagin de start:

Identificarea firmei sau companiei creia i aparine site-ul (dac este cazul) Descrierea scopului site-ului Descrierea structurii site-ului. Pagina Home are i funcia de Cuprins al site-ului oferind indicaii vizitatorilor asupra subiectelor abordate Stabilirea relaiilor ntre seciunile de nivel unu ale site-ului i cele subordonate lor. Aceasta se realizeaz prin intermediul barelor de navigare, butoanelor, hrilor de imagini sau listelor de legturi. Furnizarea informaiilor de contact. Paginile din interior Paginile de nivel unu reprezint diviziunile majore ale subiectului general al site-ului. Exist tentaia de a include prea multe informaii detaliate la acest nivel. Dac site-ul acoper un subiect vast, cu o cantitate mare de informaii specifice, este bine s lsai detalierea acestora pentru paginile de nivel doi. Paginile 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. O tehnic des utilizat este plasarea resurselor suplimentare n pagini de nivelul trei. De exemplu o pagin de nivelul doi care ofer pe lng text i imagini explicative ale unui anumite noiuni poate fi legat de pagini de nivel trei care conin imaginile. Cnd vizitatorul face click pe un anumit text aflat n pagina de nivel doi se deschide pagina de nivel trei cu imaginea explicativ. Avantajul acestei abordri este descongestionarea paginilor de nivelul doi care cuprind detalierea subiectului. Schia 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.). Fragmentarea informaiilor Omul poate procesa o cantitate limitat de informaii ntr-o anumit unitate de timp. Din acest motiv, una dintre sarcinile specifice n designul Web este fragmentarea informaiilor n secvene care s nu depeasc posibilitile de cuprindere ale utilizatorului. Cantitatea de informaii cuprins ntr-o pagin nu trebuie s-l copleeasc pe vizitatorul paginii sau s mreasc timpul ei de ncrcare. De 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. Fragmentarea corect a informaiilor este n avantajul designerului, deoarece l ajut s creeze pagini reutilizabile. Dac 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 conexe 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. Dei divizarea subiectului n pri mai mici este o tehnic deosebit de util, nu abuzai totui de puterea hypertextului. O fragmentare excesiv a subiectului ntr-un mare numr de pagini este la fel de obositoare ca i prezentarea acestuia n bloc. Un 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. Pentru a diferenia prile constitutive ale subiectului unei pagini o mare importan o are organizarea textului n cadrul paginii.

Cei mai muli dintre cei care navigheaz pe Web 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 textul n pagin. Coninutul paginii trebuie s fie ct mai uor de citit. Folosii paragrafe scurte, desprite prin linii libere, evitai frazele prea lungi i folosii n mod judicios titlurile. Accentuai prile pe care vrei s le scoatei n eviden n text prin ngroare sau scrierea lor cu alt culoare, dar nu n exces. Abuzul de culori sau de texte scrise cu caractere aldine fac pagina ncrcat i greoaie. Este indicat s v limitai la un numr redus de tipuri de font. Cele mai apreciate sunt Verdana i Arial, deoarece sunt lizibile i elegante. Este mai bine s evitai folosirea tipului Times New Roman, dei este un tip foarte folosit n editarea de texte. Spre deosebire de textele tiprite, pe monitor citirea se face cu 25% mai ncet deoarece monitorul adaug fonturilor un anumit grad de neclaritate (fuzziness), mai accentuat la fonturile cu serife, aa cum este Times New Roman. Nu aranjai textul 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. Acest format este potrivit pentru ziare i reviste dar nu i pentru o pagin Web deoarece rupe cursivitatea deplasrii n cadrul site-ului. Legarea paginilor Modul n care vei realiza legturile dintre pagini depinde de structura site-ului. Dac optai pentru o structur ierarhic, legturile din interiorul site-ului vor fi adaptate acestei structuri. Avantajul structurii ierarhice este c ofer utilizatorului posibilitatea unei navigri logice, plecnd de la informaiile generale ctre cele particulare. Dezavantajul acestei tehnici este c utilizatorul trebuie s urmeze o cale prestabilit pentru a ajunge la o anumit informaie, care se poate afla cteva link-uri distan de pagina Home. O alt manier de a realiza legturile din interiorul site-ului este de a lega fiecare pagin de toate celelalte. Vei obine astfel o structur ne-ierarhic care are avantajul c fiecare pagin se afl la distan de un link de oricare alta, inclusiv de pagina Home. Pentru 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 ierarhic prin care poate ajunge la o informaie specific. Instrumentele de navigare Pentru 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. Pentru 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. Stabilii de la nceput aspectul icon-urilor, butoanelor sau textului pe care le vei folosi drept legturi i pstrai-l pe parcursul ntregului site. Aceast tehnic 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 browserului deoarece acestea sunt ncrcate la deschiderea primei pagini i stocate n memoria cache, fr a mai fi necesar ncrcarea lor la fiecare nou pagin. Instrumentele de navigare trebuie s fie ct mai uor de neles i localizat. Dac 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. Folosii 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.

Dac site-ul este de dimensiuni mari este o idee bun s creai o pagin special care s reprezinte harta site-ului i s plasai legtura ctre ea n bara principal de navigare din cadrul fiecrei pagini. Aceasta va permite vizitatorului s se orienteze n interiorul site-ului, oricare ar fi pagina prin care a intrat n site. Harta va conine legturi ctre toate paginile, grupate conform modului de organizare al site-ului. De asemenea, dac folosii o structur ierarhic, este util prezena unui instrument suplimentar care s informeze vizitatorul asupra locului unde se afl n cadrul site-ului i a cii prin care a ajuns aici, n maniera urmtoare: Home > Pagina de nivel unu > Pagina de nivel doi > Pagina curent. Informaiile despre site i pagina curent Fiecare 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. Acestea reprezint elementele fundamentale n jurul crora este construit site-ul. Fiecare pagin a sa are drept scop ndeplinirea unuia dintre obiective. Aceste informaii trebuie comunicate n pagina respectiv. Vizitatorul nu trebuie forat s ghiceasc ce rol are o anumit pagin n cadrul site-ului. Multe site-uri prezente pe Web conin o pagin special cu informaii de contact precum i o pagin care conine informaii despre site i creatorii si (pagina About). Totui este recomandat ca aceste informaii s fie incluse i n subsolul paginilor din interiorul site-ului. Este bine s includei aici informaii despre copyright, data ultimei reactualizri a paginii, despre organizaia sau compania creia i este dedicat site-ul (dac este cazul) i informaii de contact (adres de mail, numr de telefon, adres potal). Organizarea paginii cu ajutorul tabelelor Unul dintre aspectele pe care trebuie s le avei n vedere la construirea unei pagini este rezoluia ecranului. Muli dintre vizitatorii paginii folosesc rezoluia de 800x600 de pixeli. O pagin cu limea mai mare de 600 de pixeli poate face necesar derularea pe orizontal a paginii, care pentru muli vizitatori este obositoare i incomod. Din acest motiv, este recomandat ca tot coninutul paginii s fie inclus ntr-un tabel de baz cu limea de 600 de pixeli. Tabelul de baz Construirea paginii ncepe cu un tabel de baz, cu limea (width) de 600 de pixeli, o linie i o coloana. Aliniai tabelul la marginea din stnga sau centrat n pagin. Setai chenarul (border) la valoarea "0" pentru a-l face invizibil pentru vizitator. ntregul coninut al paginii va fi plasat n interiorul acestui tabel. Asigurai-v c ai setat culoarea de fond (bgcolor) pentru pagina dumneavoastr. Opiunea "default" las browserul s controleze culoarea fondului. De cele mai multe ori aceasta este alb, dar este mai bine s avei certitudinea c ea va aprea la fel n orice browser, aa nct setai bgcolor="white" sau orice alt culoare dorii. n funcie de felul cum dorii s v organizai site-ul i de scopul acestuia vei hotr unde dorii s plasai bara principal de navigare. Bara de navigare n stnga paginii

Dac ai decis s optai pentru plasarea barei de navigare n partea stnga (cea mai uzual aezare), vei include n tabelul de baz un tabel cu 2 sau 3 coloane. Dac folosii un tabel cu 2 coloane setai distana ntre celule (cellpadding) la valoarea "4" pentru a spaia textul de marginea tabelului. Putei specifica limea celulelor fie n pixeli fie n procente. Dac folosii un tabel cu 3 coloane, coloana din centru poate fi folosit ca "tampon" , care va separa coninutul coloanei din stnga de coninutul celei din dreapta. Setai atributul border al tabelului la "0" pentru ca marginea s nu fie vizibil. Odat stabilite aceste atribute, putei aduga n tabel attea linii cte sunt necesare sau putei include un alt tabel n cel existent. Bara de navigare n partea superioara Pentru 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. Setai atributele cellpadding = "4" i border = "0". 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. Bara de navigare n partea dreapta Este o abordare mai puin utilizat. Cel 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. Folosirea tabelelor pentru organizarea coninutului paginii este o practic foarte folosit. Tabelele vor pstra imaginile i textul acolo unde le-ai plasat. Putei 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. 5. Greeli de design n procesul de creare a unui site pot aprea o serie de greeli de design, cele mai multe datorate nerespectrii tehnicilor i principiilor prezentate anterior. Pagini fr legturi ("fundturi") Una dintre cele mai frustrante situaii n care se poate gsi o persoan care navigheaz pe Web este o pagin fr instrumente de navigare i fr nici un indiciu privind site-ul cruia i aparine. Desigur, site-ul din care face parte pagina poate fi localizat observnd prima parte a adresei URL a paginii, care apare n bara de adrese a browserului. Dar a fora vizitatorul s efectueze aceast manevr este cu totul nerecomandat. Cel mai probabil acesta nu se va osteni s caute pagina Home a unui asemenea site ci l va prsi definitiv. Evitai s creai asemenea pagini. Prezena unor "fundturi" ntr-un site denot faptul c designerul nu a neles caracterul permeabil al Web-ului i ideea c un vizitator poate intra n site prin oricare pagin a sa. Pericolul 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. Aceasta nu nseamn c acest tip de site-uri nu trebuie folosit, mai ales dac informaiile prezentate sunt adecvate acestui mod de prezentare. Trebuie ns acordat atenie instrumentelor de navigare care trebuie astfel concepute nct vizitatorul s poat ajunge cu uurin cel puin la pagina Home. n plus, informaiile despre site i pagina curent nu trebuie s lipseasc din subsolul fiecrei pagini. O variaie a acestor pagini de tip "fundtur" o constituie paginile Home care ofer informaii prea puine sau lipsite de semnificaie. Destul de des pot fi ntlnite pe Web pagini Home 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 texte cu prea puin semnificaie pentru a realiza accesul n diferitele seciuni ale site-ului. Poate 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. Pagini "uriae" Dac paginile "fundtur" ofer prea puine indicii vizitatorului, exist i reversul lor: paginile "uriae". Aceste pagini sunt ncrcate pn la refuz cu informaii, liste, imagini, link-uri i alte elemente. Paginile de acest fel ridic dou mari probleme: Timpul de acces. Mai ales dac pagina conine foarte multe imagini, timpul de ncrcare al paginii poate fi foarte mare Suprancrcarea cu informaii. Dac vei pune prea mult informaie ntr-o singur pagin vizitatorul acesteia nu va fi capabil s o proceseze. Exist 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. O asemenea cerin este prea drastic i poate fi adesea n dezavantajul prezentrii explicite a informaiilor. Fragmentarea subiectului trebuie s se fac n funcie de logica lui intern i nu de reguli arbitrare cum este mrimea ferestrei browserului. Exist situaii n care paginile lungi ndeplinesc cel mai bine obiectivele urmrite. De exemplu, 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. Analog, dac pagina conine o list lung de elemente nrudite, ruperea listei este arbitrar i dezavantajoas. Pe de alt parte, aglomerarea de informaii la nivelul unei singure pagini, mai ales cnd ntre seciunile paginii nu exist o legtur intrinsec face ca pagina s apar ca un amalgam din care vizitatorul va extrage cu greu informaiile care l intereseaz. Dac 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. Dac pagina conine mult text nu o ncrcai suplimentar i cu imagini sau cu elemente multimedia deoarece timpul de acces va crete foarte mult. Excesul de elemente multimedia Folosirea fr discernmnt a elementelor multimedia (imagine, sunet, video) precum i folosirea n exces a celor mai noi tehnologii Web este adesea duntoare pentru site. Dac v adresai unei audiene despre care presupunei c nu dispune de conexiuni rapide, de ultimele versiuni de browsere sau de aplicaiile necesare executrii i afirii corecte a unora dintre elementele din paginile site-ului, este mai bine s nu includei aceste elemente. Astfel, dei aplicaiile create cu Macromedia Flash sunt spectaculoase i se pot realiza efecte speciale deosebit de atractive, un astfel de fiier poate ajunge cu uurin la dimensiuni care depesc 1 megabyte, ceea ce ncetinete considerabil viteza de ncrcare a paginii. n plus, pentru vizualizarea corect a acestora, vizitatorul trebuie s descarce plug-in-ul Shockwave 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 text sau imagini obinuite. O 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 "skip intro" , atunci cnd prezentrile sunt folosite doar cu rol de splash screen, ca ecran de deschidere a site-ului, de exemplu.

n plus, folosirea prezentrilor Flash fr ca acestea s serveasc unui scop bine definit nu face altceva dect s distrag atenia vizitatorului de la subiectul site-ului. O alt greeal destul de des ntlnit este includerea fiierelor audio, fr ca acestea s aib legtur cu scopul site-ului. Exist designeri care consider c furnizarea unei muzici de fundal sporete atractivitatea site-ului. n realitate se ntmpl exact 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. Dac este necesar s includei fiiere de sunet, lsai vizitatorului posibilitatea de a opta pentru deschiderea 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 deschide mai greu. Pagini inegale Paginile inegale conin informaii foarte diferite ca importan sau ca nivel de detaliere. Cel mai adesea se confrunt cu aceast problem paginile Home n care sunt incluse link-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 Home fr a mai respecta ierarhia stabilit n etapa de organizare a site-ului. Dac 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 Home. Legturi fr semnificaie Prezena legturilor fr semnificaie este, de asemenea, o greeal de design foarte frecvent. Probabil ai vzut de nenumrate ori n paginile Web formulri ca aceasta: Pentru mai multe informatii apasati <A href="info.html">aici</A> Cuvntul "aici" nu are n acest context, nici o semnificaie. O formulare mult mai potrivit ar putea fi urmtoarea: Puteti obtine aici <A href="info.html">mai multe informatii</A> O alt situaie este aceea n care documentul indicat nu are legtur, din punct de vedere al coninutului, cu pagina care conine referina la el. Toate link-urile din cadrul unei pagini trebuie s extind 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. De exemplu o construcie ca aceasta: Bine ati venit in <A href="def.html">Pagina</A> Home a Universitatii unde documentul def.html conine definiia de dicionar a cuvntului "pagina" , este o legtur "banal" deoarece n acest context informaia oferit nu servete nici unui scop. Pe de alt parte, ntr-o pagin al crei subiect este vocabularul specific Web-ului, o astfel de definiie ar fi foarte important. Un alt tip de legturi fr semnificaie apare atunci cnd fragmentarea informaiei este dus la extrem prin folosirea unui numr foarte mare de link-uri. Subiectul 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. O abordare de acest tip rupe cursivitatea subiectului i mrete efortul de a nelege i asimila al vizitatorului. Pagini dezorganizate i stridente Acest tip de pagini sufer din pricina lipsei de organizare a coninutului. Chiar 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. Aceste pagini au prea multe culori, adesea stridente, tipuri diferite de fonturi, sau imagini de fundal foarte ncrcate. Adesea este folosit n exces animaia fr nici ca aceasta s aib vreo semnificaie sau legtur cu coninutul paginii i muzica de fundal. Aspectul general al unor astfel de pagini este la fel de strident i iptor ca un decor de blci. 6. Rezumat Construirea unui site necesit, pe lng o bun cunoatere a limbajului HTML, respectarea unor principii i folosirea unor tehnici consacrate. Site-ul trebuie s fie orientat ctre vizitator, ctre nelegerea i satisfacerea nevoii de informaie a acestuia. Designul trebuie s menin un echilibru ntre tehnologiile folosite i eficien, asigurnd o vitez convenabil de ncrcare a paginilor i o vizualizare bun n cele mai populare dintre browsere. Aspectul site-ului trebuie s fie n concordan cu scopul i obiectivele sale, evitnd excesele de orice fel. Principiile care trebuie respectate n etapa de design sunt: Asocierea semnificaiilor Meninerea competitivitii Folosirea eficient a resurselor Concentrarea pe necesitile utilizatorului nelegerea permeabilitii Web-ului Crearea unui aspect plcut, coerent i fluent Susinerea interactivitii Susinerea navigaiei Strategia de construire a site-ului poate urma una dintre metodele top-down , bottom-up sau metoda incrementrii. n procesul de design, prima etap o constituie schia site-ului care trebuie s reflecte structura acestuia: liniar, ierarhic sau de tip Web. Informaia trebuie fragmentat astfel nct s nu depeasc puterea de asimilare a utilizatorului. Legturile 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. Nerespectarea principiilor i tehnicilor de design poate s conduc la construirea unor pagini de tip fundtura , a unor pagini prea ncrcate cu informaii sau, dimpotriv, a unor pagini inegale. De asemenea, printre greelile de design care pot aprea sunt legturile fr semnificaie, excesul de elemente multimedia, paginile dezorganizate sau stridente. Capitolul 19 Testarea site-ului

Etapa de design a site-ului se desfoar n strns legtur cu cea de implementare, de scriere a codului HTML pentru paginile care fac parte din site. Totui, procesul de creare a site-ului nu se poate considera ncheiat n momentul finalizrii tuturor documentelor HTML care l formeaz. Urmeaz o etap adesea tratat oarecum superficial, dei, ca i celelalte, este esenial pentru construirea unui site de calitate: etapa de testare. 1. Corectarea paginilor Corectarea este unul din cele mai neglijate aspecte al publicisticii Web. Foarte frecvent putei ntlni pagini Web cu multiple greeli de ortografie, gramatic, formatare, chiar i n cazul site-urilor importante. Paginile cu greeli de ortografie, exprimri neglijente, reflect cel puin o insuficient experien n acest domeniu i, de ce nu, chiar lips de respect pentru vizitator. Corectarea este neglijat n primul rnd datorit uurinei extraordinare cu care textele pot fi publicate electronic. Putei crea o pagin ntr-un editor de text i aceasta poate fi publicat la doar cteva minute dup terminarea ei, daca suntei suficient de rapid. Cei mai muli nu vor petrece ore n ir verificnd existena eventualelor greeli gramaticale n textul editat, aa cum ar face-o, probabil, n cazul unei tiprituri clasice, dac aceste erori i-ar costa o avere pentru a retipri 10.000 de copii ale documentului. Dac ai fcut o greeal, trebuie doar s deschidei fiierul, s efectuai corectura i s l republicai pe Web, unde toat lumea l poate vedea. Este aceasta o strategie corect? Desigur c nu. Calitatea muncii pe care ai depus-o la crearea site-ului definete calitatea acestuia. Mii, poate milioane de utilizatori ar fi putut deja citi pagina n cauz. Este mult mai simplu s petrecei cteva ore corectnd textul, 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 Web: 55. Utilizai corectoare automate pentru ortografie i gramatic pentru a descoperi erorile plictisitoare, fcute din grab sau din oboseal. 56. Nu avei niciodat ncredere absolut n acest tip de corectoare pentru a descoperi erorile mai subtile. Dup utilizarea lor, ncrcai pagina n browser i citii-o de cteva ori. 57. Pentru site-urile de dimensiuni mari citii documentele n mod repetat, cutnd de fiecare dat un anumit tip particular de erori 58. La 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. 59. La a doua lectur verificai logica i cursivitatea ideilor i a cuvintelor. 60. La a treia lectur, corectai minuios ntregul text verificnd sintaxa, ortografia, punctuaia. 61. ntotdeauna verificai imaginile, figurile i hrile din pagin. Asigurai-v c ele au legtur cu textul de referin, i verificai textul explicativ care nsoete imaginea. Exist i erori ce vor persista uneori chiar dup toate aceste verificri. Dac le descoperii dup publicarea site-ului, nu mai rmne dect s le corectai atunci. 2. Testarea paginilor Odat terminat verificarea corectitudinii textului 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 etichetelor HTML, a link-urilor, a imaginilor i a celorlalte elemente incluse n pagini. Testarea link-urilor

Cea mai simpl cale de testare a link-urilor este de a ncrca pagina n browser i de a da click pe fiecare link. Verificai funcionarea tuturor ancorelor din pagini care trebuie s acceseze seciunea din pagin corespunztoare identificatorului ancorei. Atenie la seciunile multiple ale aceleiai pagini etichetate cu acelai identificator. Aceast greeal poate produce rezultate stranii. Daca browserul sare la o alt seciune a paginii dect cea ateptat, verificai mai nti identificatorul ancorei n seciunea pe care browserul o afieaz. Verificai 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. Dac o anumit pagin nu poate fi deschis, verificai sintaxa link-urilor i anume: 62. 63. 64. corectitudinea protocolului specificat extensia fiierului existena simbolului ~

Atenie! n UNIX, simbolul tilda (~) este utilizat pentru a specifica directorul de start ( Home directory) al utilizatorului al crui nume urmeaz dup acest simbol. Folosind simbolul ~ v putei http://www.server.com/~utilizator/pagina.html Probleme n funcionarea paginilor Web Este posibil ca paginile Web create s nu arate n browser aa cum au fost ele proiectate. Rezolvarea unor astfel de deficiene poate fi dificil, deoarece cnd scriei codul HTML avei doar o imagine mental a modului cum ar trebui s arate pagina. O soluie pentru a face procesul de depanare mai uor ar fi s vizualizai pagina cu ajutorul browserului pe msur ce o construii. Putei izola diversele seciuni ale paginii pentru a verifica funcionarea fiecreia dintre ele. Cele mai multe greeli care pot aprea se datoreaz erorilor n codului sursa al paginii. Sintaxa codului este de o importanta critic n HTML. Cele mai comune probleme de sintaxa care apar sunt: 65. 66. 67. 68. absena etichetelor de nchidere < / > mperecherea etichetelor HTML ghilimelele " " imbricarea etichetelor referi la o pagin Web astfel:

Iat cteva dintre problemele cu care v putei confrunta: O caracteristic de formatare afecteaz o secven mai mare de text dect era prevzut. S presupunem c ai folosit ntr-o seciune a paginii una dintre etichetele de titlu, <H3> de exemplu. La vizualizarea paginii n browser constatai c nu doar textul pe care doreai s-l evideniai este formatat astfel, ci o parte mai mare a textului din pagin. O astfel de situaie este provocat de: 69. 70. 71. Absena unuia dintre caracterele " < " sau " > " Absena etichetei de nchidere </H3> Imbricarea defectuoas a etichetelor HTML

O etichet de nchidere creia i lipsete unul dintre caracterele "< "sau ">" nu va fi interpretat corect de browser, prin urmare formatul nu va lua sfrit dect n punctul n care browserul ntlnete caracterul respectiv. Aceasta poate determina afiarea ntr-un format greit a unui text. Dac acest element este un titlu, tot textul dintre eticheta de deschidere asociat titlului i cea mai apropiat etichet de nchidere ntlnit va fi afiat ca titlu. Daca acest element este text ancor, tot textul dintre eticheta de deschidere <A> i prima etichet de nchidere ntlnit va fi afiat ca o legtur (de culoare albastru i subliniat). O etichet de nchidere absent sau o mperechere inadecvata de etichete va provoca probleme similare. Uneori problemele sunt dificil de urmrit i rezolvat. Urmrirea unei probleme se face n sens descendent, defeciunea trebuie cutat acolo unde ncepe secvena de cod eronat i nu unde se sfrete. O parte din textul paginii nu este afiat Textul sau obiectele care lipsesc din pagina pot fi depistate prin urmrirea ghilimelelor " " i a etichetelor greit nchise i care conin adrese URL. Dac pagina conine ghilimele de deschidere n interiorul unei etichete, i cele de nchidere trebuie s se regseasc n aceeai etichet. O etichet din care lipsesc ghilimelele de nchidere nu este interpretat corect i acest lucru poate produce rezultate bizare. Dac eticheta creia i lipsesc ghilimelele este o etichet ancor, ntreg textul de la primele ghilimele pn la urmtoarele ntlnite ar putea fi interpretat de browser ca parte dintr-o adres URL. O alt eroare care poate provoca acelai efect este nchiderea greit a etichetei coninnd o adres URL. Dac o astfel de etichet nu este nchis corespunztor, browserul ar putea interpreta orice text care urmeaz, pn la eticheta de nchidere corespunztoare, ca fiind parte a adresei URL. Problema se rezolv prin examinarea etichetelor aflate naintea poriunii de text care nu este afiat. Eroarea ar putea proveni de la orice etichet care conine ghilimele sau o adres URL. Ghilimelele utilizate n editorul de text cu ajutorul cruia scriei codul HTML trebuie s fie ntotdeauna n standard ASCII. Unele editoare de text utilizeaz aa-numitele "smart quotes" , n care ghilimele de deschidere arat diferit fa de cele de nchidere. Dac procesorul de text cu care lucrai are aceast posibilitate, ea trebuie dezactivat, deoarece acest tip de ghilimele, nefiind n standardul ASCII, nu vor funciona corect n HTML. Afiarea defectuoas a formatului n cazul cnd formatul afiat de browser nu este cel ateptat verificai mai nti compatibilitatea dintre browser i stilul de caractere specificat n codul HTML. Browserul trebuie s fie capabil s afieze stilul ales. Atunci cnd sunt folosite stiluri logice, browserul este ultima instan n decizia privind stilul caracterelor afiate. O metod rapid de verificare a existenei unei probleme de compatibilitate este de a afia paginile utiliznd browsere diferite, dintre care unul s poat afia n mod sigur stilul de caracter utilizat. Dac acel browser afieaz textul incorect, se face verificarea codului HTML. Dac textul este afiat corect, atunci exist o incompatibilitate cu celelalte browsere. n codul HTML, problema poate fi legat de o imbricare defectuoas a etichetelor. Verificai modul cum au fost imbricate etichetele de formatare din seciunea de pagin asociat cu eroarea respectiv. Astfel o construcie de tipul urmtor:

<EM>Va multumim ca ati vizitat <STRONG>Pagina</EM>noastra</STRONG> nu va funciona corect, deoarece etichetele <EM> i <STRONG> sunt imbricate eronat. 3. Rezumat Dup etapele de planificare, design i implementare urmeaz etapa de testare a site-ului. n aceast etap se realizeaz: 72. Corectarea paginilor din punct de vedere ortografic i gramatical 73. Testarea legturilor din cadrul site-ului 74. Testarea legturilor externe 75. Depanarea greelilor care in de sintaxa codului HTML Etapa de testare este deosebit de important pentru impresia general lsat de site-ul dumneavoastr. Un site cu ortografie neglijent, cu greeli de exprimare, cu legturi nefuncionale poate ndeprta vizitatorii, orict de valoroase ar fi informaiile prezentate n interiorul su. Capitolul 20 Publicarea site-ului n sfrit, site-ul dumneavoastr este finalizat. Ai parcurs toate etapele, de la planificare, la design i implementare, v-ai asigurat c toate elementele funcioneaz corect. A venit momentul publicrii pe Web a site-ului, astfel nct rezultatele muncii dumneavoastr s fie cunoscute de toi aceea care v vor vizita paginile. n etapa publicrii pe Web a site-ului intervin mai muli pai: Stabilirea unui nume de domeniu Stabilirea serverului Web pe care va fi stocat (gzduit) site-ul Organizarea i denumirea fiierelor n conformitate cu cerinele serverului gazd Transferul fiierelor

1. Numele de domeniu Pentru ca site-ul dumneavoastr s aib o identitate pe Web avei nevoie de un nume de domeniu pentru el. Numele de domeniu al site-ului va face parte din adresa URL a fiecrei pagini i va oferi siteului o prezen distinct pe Web. Domeniile principale de pe Web pot fi de mai multe tipuri: comerciale .com educaionale .edu guvernamentale .gov furnizorii de servicii de reea .net instituii non-profit .org domeniile corespunztoare rilor lumii .ro, etc

Pentru a obine un nume de domeniu pentru site avei la dispoziie dou posibiliti: domeniu pltit domeniu gratuit Domeniu pltit

Dac 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 Web 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 schimbai locaia siteului (serverul Web pe care este gzduit) fr ca aceasta s necesite schimbarea domeniului. Preul pentru nregistrarea unui nume de domeniu variaz destul de mult. Una dintre cele mai convenabile oferte poate fi gsit la adresa http://www.10-domains.com care ofer nregistrarea unui nume de domeniu pentru 10 USD anual precum i o serie de discount-uri pentru nregistrarea pe perioade mai lungi. Dac dorii un domeniu romnesc ( .ro) putei obine informaii la adresa http://www.rnc.ro. Pentru nregistrarea unui astfel de domeniu se percepe o tax unic de 61 USD (pre valabil la data scrierii acestei cri) fr alte taxe anuale. n cazul cnd optai pentru un domeniu pltit, adresa URL a site-ului va fi de forma http://www.dumneavoastra.com Domeniu gratuit Obinerea unui nume de domeniu gratuit este foarte simpl. Exist multe companii on-line care ofer astfel de domenii i, n plus, i spaiu de gzduire pentru site. Dac suntei nceptor i dorii s v testai cunotinele de Web design nou nvate, nu este o idee rea s construii un site "de prob" folosind pentru acesta un domeniu i un serviciu de hosting gratuite. n afara acestei situaii, dei poate prea alegerea ideal, un domeniu gratuit poate aduce multe dezavantaje site-ului dumneavoastr. Prima judecat de valoare asupra unui site este fcut pe baza numelui su de domeniu. n cazul unui domeniu gratuit adresa URL a site-ului va fi: http://www.numefirmagazda.com/~dumneavoastra sau http://www.dumneavoastra.numefirmagazda.com Vizitatorii site-ului vor ti imediat c nu deinei propriul domeniu i folosii un serviciu de hosting gratuit ceea ce v va afecta serios credibilitatea. Mai ales dac site-ul este unul de afaceri, folosirea unui domeniu i serviciu de hosting gratuit este cu totul contraindicat. n plus, firmele care ofer acest gen de servicii, impun afiarea unor bannere publicitare care distrag atenia vizitatorilor de la coninutul site-ului i mresc timpul de ncrcare al paginilor. 2. Serviciul de gzduire Web (Web hosting) nainte de a publica site-ul pe Web este necesar o evaluare a necesitilor de acces, pentru a determina ce fel de cont se potrivete site-ului dumneavoastr. Plecnd de la presupunerea c deinei deja o conexiune la Internet, nu vom intra n amnunte privind alegerea unui furnizor de servicii Internet (ISP Internet Service Provider). Totui, n cazul cnd nc nu deinei o conexiune sau dorii s schimbai provider-ul actual, v recomandm s studiai cu atenie ofertele principalilor furnizori de servicii. Avnd n vedere c nu v vei mai limita doar la simpla navigare pe Web sau la schimbul de emailuri ci vei dori s transferai i s ntreinei un site Web necesitile dumneavoastr vor crete. Din acest motiv este bine s v informai asupra unor detalii tehnice cum ar fi limea de band, mediul de transmisie (anten satelit, cablu cu fibre optice, unde radio), ce tip de server folosete, asistena tehnic oferit, dac ofer gzduire pentru pagini Web. Opiunile pentru gzduire sunt urmtoarele: Instalarea unui server Web propriu Utilizarea serverului Web al providerului de servicii Internet Utilizarea unui server Web aparinnd unei firme care ofer servicii de hosting Instalarea unui server Web propriu

Instalarea unui server Web propriu este cea mai costisitoare soluie, dar ea ofer n schimb avantaje semnificative. Dispunnd de o conexiune dedicat se pot furniza servicii Web 24 de ore/zi utilizatorilor din lumea ntreag. Vei dispune de un control complet asupra serverului Web i putei publica orice dorii. Putei configura serverul i pentru alte servicii, cum ar fi FTP, Gopher, Telnet, scripturi CGI, etc. Putei de asemenea avea propriul domeniu care va stabili o prezen distinct pe Web. Adresa URL va avea forma urmtoare: http://www.firma_dumneavoastra.com/ ntruct costurile necesare echipamentului hardware, conexiunii la Internet, configurrii i ntreinerii unui server propriu depesc posibilitile unui utilizator obinuit, nu vom insista asupra acestei soluii. Utilizarea serverului Web al providerului ISP Utilizarea serverului Web al providerului dumneavoastr de Internet este o opiune economic. Muli 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 taxe suplimentare. Din pcate, spaiul oferit este de obicei mic, de ordinul 1-3 Mb i nu sunt oferite faciliti pentru crearea de pagini dinamice. Pentru a obine faciliti suplimentare va trebui s pltii n plus. Cu toate c fiierele standard, contul de email i fiierele publicate pe Web utilizeaz acest spaiu, 2-3 Mb sunt de regul suficieni pentru a menine un site modest ca dimensiuni. Contul la ISP este accesibil pe baza unei conexiuni dial-up care permite o legtur cu o vitez de pn la 56 Kbps. nainte de a deschide un astfel de cont, trebuie verificate detaliile privind spaiul de stocare, taxele pentru spaiul adiional, n mod curent 2$ pentru 1 Mb, eventualele alte taxe. Trebuie verificat de asemenea disponibilitatea altor servicii, cum ar fi FTP, Gopher, Telnet, scripturi CGI, care ar trebui s poat fi utilizate gratuit, n cazul n care exist. Un cont la un provider ISP este o opiune economic dar, n acelai timp, limitat. Nu exist control al serverului Web, serviciile adiionale rmnnd la latitudinea providerului. Nu vei avea propriul domeniu, iar adresa URL va arta astfel: http://www.provider.com/~dumneavoastra Utilizarea unui serviciu de hosting Cea mai bun soluie din punctul de vedere al raportului servicii/pre o reprezint folosirea unui serviciu de hosting pltit. Ofertele 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 CGI, baze de date, email personalizat, etc. Nu trebuie s pierdei din vedere c site-ul dumneavoastr se poate dezvolta astfel nct spaiul de stocare rezervat la nceput poate deveni insuficient. Utiliznd un serviciu de hosting adresa URL a site-ului va avea forma urmtoare: http://www.dumneavoastra.com De asemenea vei beneficia i de una sau mai multe adrese de email personalizate de tipul: adresa@dumneavoastra.com Folosirea serviciilor unei firme de hosting v permite ca, odat ce deinei propriul nume de domeniu, s v transferai site-ul pe serverul Web al firmei i s beneficiai de o prezen stabil pe Web. Firmele de hosting ofer uneori i nume de domenii pentru clienii lor ns exist riscul ca dac v hotri s renunai la serviciile acelei firme s pierdei domeniul. Din acest motiv este mai bine s tratai separat cele dou probleme. 3. Organizarea i denumirea fiierelor

Dei 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. Organizarea directoarelor i fiierelor Este foarte bine s organizai fiierele care fac parte din site pe computerul dumneavoastr exact aa cum ele vor fi organizate pe serverul Web. Serverul Web are un director "rdcin" ( root) unde vor fi stocate toate fiierele site-ului. Folderul 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 "home" a site-ului, fiier denumit de obicei index.html sau index.htm. Dac site-ul este de mici dimensiuni (ntre 5 i 10 pagini) putei plasa toate fiierele n acelai director. Dac 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. Subdirectoarele pot conine la rndul lor cte un fiier index. Atunci cnd vei transfera fiierele de pe computerul dumneavoastr pe serverul Web vei putea s transferai ntregul subdirector cu fiierele coninute n el. De asemenea aceast metod va face i ntreinerea site-ului mult mai uoar. O alt problem este locul unde vei stoca imaginile. Practica standard este de a crea un subdirector special n directorul "rdcin" unde s plasai toate imaginile din site. Dac procedai astfel este extrem de important s creai un subdirector similar cu aceeai amplasare i pe computerul dumneavoastr. Calea 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. O alt variant de stocare a imaginilor este crearea unui subdirector destinat imaginilor, plasat n subdirectorul fiecrei pagini. Cu aceleai precauii legate de calea corect ctre imagini, aceast metod funcioneaz bine, ba chiar mbuntete viteza de ncrcare a imaginilor n pagini. Dezavantajul 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. Verificarea numelor fiierelor La mutarea fiierelor de pe computerul dumneavoastr pe serverul Web se impune verificarea numelor fiierelor care trebuie s fie compatibile cu sistemul pe sunt mutate. O atenie deosebit trebuie acordat denumirii i extensiei fiierelor. Nu are importan dac optai pentru extensia .html sau .htm. Tot ce trebuie este s fii consecvent cu extensia aleas de-a lungul ntregului site. De asemenea, trebuie s avei n vedere c n sistemele UNIX, cele mai des folosite ca servere Web, denumirile fiierelor sunt case-sensitive. O pagin denumit mypage.html nu este totuna cu pagina MyPage.html. Pentru a evita confuziile folosii pentru denumirea fiierelor numai litere mici. 4. Transferul fiierelor Transferul fiierelor care compun site-ul de pe computerul propriu pe serverul Web este o operaiune relativ simpl, care const n copierea fiierelor pe server n locaia destinat site-ului dumneavoastr. Unele dintre firmele de hosting asigur o aplicaie special destinat transferului fiierelor, dar cea mai utilizat metod de transfer este prin intermediul unui client FTP. Un client FTP (File Transfer Protocol) este o aplicaie prin intermediul creia se poate realiza transferul fiierelor de pe un sistem pe altul. Putei copia fiiere de pe computerul personal pe un alt computer (operaie denumit Upload) dup cum putei prelua fiiere de pe un alt computer, pe computerul personal (operaie denumit Download). Cele mai folosite programe FTP sunt CuteFTP (http://www.cuteftp.com) i WS_FTP (http://ipswitch.com). Odat ce ai instalat pe computerul

dumneavoastr un client FTP, 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. Pentru a realiza transferul fiierelor, n general va trebui s urmai urmtorii pai: Conectarea la Internet Deschiderea programului FTP. Vei observa o serie de casete de dialog n care trebuie introduse informaiile necesare programului pentru a realiza conexiunea cu computerul gazd. Pentru a face conexiunea cu serverul trebuie s furnizai programului adresa FTP a host-ului dumneavoastr. Aceasta v este furnizat de firma de hosting la deschiderea contului. De asemenea, programul v va cere numele de utilizator i parola pe care le-ai stabilit la deschiderea contului. Nu uitai s de-bifai opiunea Anonymous din meniul Login. Prin 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. O alt informaie care trebuie furnizat programului este tipul fiierelor transferate. n general pentru fiierele HTML se folosete opiunea ASCII iar pentru celelalte fiiere, opiunea binary. Mai simplu, putei alege opiunea AutoDetect prin care programul determin singur tipul fiierului i modul cum va face transmiterea lui. Celelalte casete de dialog pot fi lsate necompletate sau cu setrile preexistente. Dup furnizarea acestor informaii programul FTP va realiza conexiunea cu serverul gazd. Selectarea fiierelor pe care dorii s le copiai. Vei observa c fereastra aplicaiei FTP este mprit n dou: ntr-o parte avei directoarele de pe computerul personal, n cealalt parte directoarele de pe computerul gazd. Selectai directorul care conine fiierele dumneavoastr i dai comanda de transfer n directorul care v este destinat pe serverul gazd. Dac folosii scripturi CGI asociate site-ului trebuie s le acordai o atenie special. Cele mai multe servere necesit instalarea scripturilor CGI ntr-un subdirector special numit cgi-bin, aflat n directorul dumneavoastr. Pentru plasarea i setarea corect a scripturilor trebuie s luai legtura cu administratorul serverului gazd care v va oferi indicaiile necesare. Pe unele sisteme de operare modul de accesare al fiierelor este strict definit, permind sau restricionnd citirea, scrierea sau executarea fiierelor de ctre diferii utilizatori. Aceste faciliti sunt setate de regul prin drepturile de acces atribuite fiierelor. Din acest motiv, verificarea modului de setare a fiierelor este extrem de important. De exemplu, n sistemele UNIX modul 705 semnific faptul c fiierele pot fi citite, modificate sau executate de proprietarul lor, n vreme ce ali utilizatori nu le pot dect citi sau executa (dup caz). Dup transferul fiierelor, pot aprea probleme de diverse tipuri. Uneori, paginile publicate nu pot fi accesate deloc, scripturile nu funcioneaz, etc. Primul lucru care trebuie verificat n acest caz este dac fiierele se afl n directoarele potrivite. Apoi trebuie verificate permisiunile de acces pentru directoare i fiiere, extensiile fiierelor, fiierele index. 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. 5. Rezumat n etapa de publicare pe Web a site-ului trebuie parcuri urmtorii pai: Stabilirea unui nume de domeniu pentru site: gratuit sau pltit. Gsirea unui serviciu de gzduire convenabil sub raportul servicii/pre. Organizarea i denumirea directoarelor i fiierelor n conformitate cu cerinele sistemului serverului gazd. Transferul fiierelor, cea mai folosit metod de transfer fiind prin FTP. Cteva cuvintela final

Am ajuns, iat, la finalul cltoriei noastre. Avei, acum, toate informaiile i instrumentele necesare construirii unui site atrgtor, funcional i eficient. Putei ncepe prin a v construi o pagin personal pe care o putei plasa pe un server gratuit, pentru a exersa cunotinele dobndite. Dar acesta este doar primul pas. Designul Web este unul dintre domeniile cu un mare potenial de dezvoltare. Tot mai multe firme doresc site-uri pe Web, fie pentru a derula afaceri prin intermediul lor, fie doar pentru a-i prezenta oferta de produse i servicii. O carier n acest domeniu este o alegere cu mari anse de succes pentru orice tnr. Mai mult, dei pe Web-ul romnesc aceast zon este nc slab dezvoltat, putei s v iniiai propria afacere care s se deruleze exclusiv pe Internet. Aceast carte a urmrit s v ofere informaiile necesare unui start corect n domeniul designului Web. Dar nu trebuie s v oprii aici. Designul i programarea Web reprezint domenii vaste iar cartea noastr a atins doar elementele de baz ale acestora. Putei continua nvnd s programai n Perl pentru a crea scripturi CGI, putei nva JavaScript, Java sau un limbaj de interogare pentru bazele de date stocate pe server. Putei deveni familiar cu unul din editoarele puternice de HTML (Macromedia Dreamwaver este cel mai utilizat n acest moment) sau putei nva s stpnii foarte bine un program de grafic (CorelDraw sau Adobe Photoshop de exemplu) pentru a crea grafic Web. Posibilitile sunt nenumrate. n lumea World Wide Web totul este ntr-o continu micare i dezvoltare. Aceast carte v-a oferit fundamentele programrii n HTML. Continuai s nvai, perfecionai-v continuu i succesul viitor v este asigurat.