Sunteți pe pagina 1din 172
Ned Snell Crearea paginilor WED Traducere de Marius Moldovan FARM sce (eu My AI] BCU. -iAs) Teora Titlul original: Teach Yourself to Create Web Pages in 24 Hours Copyright © 2001, 2000 Teora Toate dreptuile asupra versiunil In mba roman& apartin EditutlTeora. Reproducerea integrala sau parjalé a textului sau ailustrafilr din aceasta carte este posibild numai cu acordul prealabil scrs al Edituril Teora. ‘Authorized translation from the English language edition published by SAMS Publishing. Copyright © 1999 All rights reserved. No part of this book may be reproduced or transmitted in any form cr by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher. Romanian language edition published by Teora Publishing, Copyright © 1999 Teora Calea Mogilor nr. 211, sector 2, Bucurest Fax: 01/210.38.28 e-mail teora@teora.kappao ‘Teora - Cartea prin posté CP 79~ 30, cod 72450 Bucuresti, Romania Tel: 017282.14. 31 ‘e-mail: epp@teora.kappa.ro Coperta: Gheorghe Popescu Tehnoredactare: Marius Stuparu Director Editorial: Diana Rotary Pregedinte: Teodor RADUCANU NOT 4589 CAL CREAREA PAGINILOR WEB ISBN: 973-20-0512-2 Printed in Romani Cuprins Introducere 7 PARTEAL Oa 1 Oa 2 Oa 3 Or 4 PARTEAAI-A Oa 5 Oa 6 Oa 7 Oa 8 PARTEA A IIA Oa 9 Or 10 Oa ot Oa 12 PARTEAAIV-A On 13 Or 14 Oa 15 Oa 16 PARTEAAV-A Oa 17 Ora 18 Oa 19 Oa 20 PARTEA AVA, Ora 21 Ore 22 Or 23 Ora 28 Anexa A Anexa B Anexa C ‘Anexa 0 Glosar_ 305 Index 310 Primi pai, prima paging Web Conceptul de editare a paginilor Web 11 Prezentarea unui program de editare a paginilor Web 25 ‘Crearea unel pagini Web la minut" 35 Crearea rapida a unel pagini originale cu alutorul unui gablon 52 Tillur, text si tabole Stabiirea ttllui, a culorior sia altor proprietati ale paginil 61 Inserarea si editarea toxtulul 69 Formatarea textului 86 COrganizarea textulul folosind tabele si rigle orizontale 97 Roferirea resurselor Legaturle 112 Crearea legéturilor 124 Definirea tintelor in pagina 132 Ltiizarea legaturilor la construirea unui sit Web 139 Insufietirea paginilor cu elemente multimedia CObjinerea (sau crearea) imaginlor pentru pagina Web 147 Inserarea imaginilor gia imaginii de fundal 163 Stlizarea paginilor cu olomente audio si video 176 Animarea imaginilor 188 Finisarea paginilor Exitarea codului HTML 196 Impartirea unei pagini in cadre 208 Proiectarea formularelor interactive 221 Plasarea mai multor legturi sub aceeasl imagine 232 Plasarea online Publicarea paginii 239 Cum va facet simtté prezenta pe Web 248 ‘Testarea si intretinerea paginl online 256 Dezvoltarea aptitudinilor de autor 264 Instalarea programulul Netscape Communicator 271 Ghid HTML 277 Resurse online pentru autorii de Web 298 Ce contine CD-ROM-ul? 302 Dedicatie Familied mele. Despre autor Ned Snell se ocupa de popularizarea stiinfei din anul 1986, and a inceput sA scrie ma- nuale pentra incepatori la una dintre cele mai mari companil de software. Dupa ce a scris manuale si alte materiale pentru pregatire s-a reprofilat sia Inceput s& scrie arti- cole in domeniul calculatoarelor, lucrand ca ziarst, apoi ca editor la dou8 mari reviste, Eige si Art & Design News. Scriitor independent din anul 1991, Snell a seris 12 citi in domeniul calculatoarelor si sute de articole,fiind si critic la revista Inside Technology Training, Cand nu scrie, Snell Iucreaza ca actor profesionist in piese de teatru, in reclame sau in filme. Locuieste in Florida impreuna cu sotia si cei doi copii ai Introducere Aproape toate cirtile care urmarese si invefe incepatorii cum se creeazd o pagina Web Incep la fel: va explici ce este o pagina Web gi de ce ati dori si aveti o pagina Web personal’, Binuiesc c& daci ai luat aceasta carte, afi fost deja online (cat de putin), ati vizut o pagini Web si siti de ce va dori o astfel de pagina, Prin urmare, nut dorifi sa irosifi pentru asa ceva nici macar una dintre cele 24 de ore alocate pentru aceasta carte Va vol ajuta si va creati proprife pagini Web et mai simplu gi mai repede posibil. De fapt, inainte se sfarseasca primele trei ore, veti sti si va descurcati in facilul, dar puternicul pregram pentru crearea paginilor Web (Netscape Composer), inclus pe CD-ul care insofeste aceastl carte, si vel fi creat prima dumneavoastra paging Web. Ce spuneti despre tn asemenea tur de for}a? Motivul aparitiei acestei carti Pentru a infelege aceasta carte fird si v3 treaci nidugeile, nu trebuie si fiti expert in Internet sau guru in calculatoare, act sti si lucrafi cu programe simple (cum ar fi un procesor de text) in Windows 95, 98 sau NT si si navigati de la o paging la alta in Internet, aveti toate cunostintele nece- sare pentru a parcurge aceasta carte La sférsitul ci, vei sti nu numal cum si creaji pagini Web grozave, utile dumnea- vvoastri sau mancii pe care o desfigurati,ci si cum sa le publicati pe Web pentru a le vvedea toati lumea, De ce sunt necesare programele de pe CD? Fibine, nu aveti neapirati nevoie de ele, Din punct de vedere tehnic, put pagini Web utlizand un simplu program de editare a textulut si aici vei invafa cate ceva despre cum s& realizati acest lucru. {nsa, pentru aproape toati lumea, crearea paginilor Web este mai ugoars si mai rapid cand se utilizeaza un program dedicat editarit pagintlor Web. Din acest motiy, pe CD exist 0 copie -ompleta a programului Netscape Communicator Netscape Communicator este un pachet de programe destinate Internet-ului si include (ve2i figura 1.1): un editor de pagini Web grozav (Netscape Composer), un browser ‘Web (renumital Netscape Navigator), un program pentru posta electronicd si tot ceea ce vi este necesar pentru a crea pagini Web sia va bucura de Internet. (Desi navigarea pe Internet folosind Communicator este grozavi, nu este nevoie si-utilizafi. Daca doriti, puteti si creati pagini Web in Composer si s& folositi in continuare propriul dumneavoastis browser Web sau program de post electronic.) Fora Lt. Pachetul de programe Netscape Communicator existent pe CD, fnclude un editor fe pagini Web, un browser Web si alte Instrumente pentru Internet Neos : asain a ee re eeeaee os ib in Componer penta vl sta incpei Dup parcurgerea ce ene ad nceh efenp oncets Conner era Eo Co pce rs meer or ae a ee espe be eae poise cae vi vor perie Fa rs paggam dear apap Woh. Be Stee cpt a reps talent care pelle olizaen programulai Composer In ultima or a acestui indrumar, vi vor fi prezentate o serie See means pages Web give ues dade ce 8 eh sermetiee Comber Te ingh Netz Community CD-l al caine orale de programe site, imaging ale emer af ge Poco aos een eo glee Ce ee Rox Modul de folosire a carti a a nearer ee ea corer Introducero Parteaa lila, .Referirea resurselor”, vi deaviluie minunata lume a legiturilo. ef afla nu rama cur sinserailegaturi in paginile dumneavonst i cum s crea legatari ire alte resurse decit paginile Web, cum ar fl mesajele grupulul de informafii sau adresele de post electronica, Partea a 1V-a, -insufleirea paginilorcu elemente multimedia", ilustreazs modu _de adSugar: fn paginile dumneavoasted a elementeloraudiovizale:imagini,fun- F osilun, sunt, seevente video si anima '$ "Pirtea a V-a, ,Finisarea paginilor”, vi duce dincolo de posibilitstile programulti poser, 2rineditarea cocul brutal paginilor Web in scopulcrericadrelor, gnilor cu Tegsturi multiple st prin alle aspecte avansate (inst nu prea tare) ale 2 pagin Web. Pirteaa Via, .Plasarea online”, vi prezinté pas cu pas publicarea paginilor in Fokerne: mod de testare side actualizare a paginilor Web, precum si modalitatic ppublctate peginilor dumneavoastr, Tot aici vi este prezentat $i modul de '—"tbundtiire a indemanSii dumneavoastré cu ajutorul unorfenicsinstrumente nc Dupa cum putsti vedea, elementele prezentate evolueaza gradat de la cele simple la cele mai difcils, de aceea cel mai bine este si cititi sectiunile in ordine. Din loc in loc + vor fi indicate -lementele peste care puteti sh care nu sunt neapirat nece- sare intro anumit’ activitate sau tebnict Dupa 24 de ore veti descoperi patru anexe utile: Anexa A, ,Instalarea programului Netscape Communicator", prezint& modul de instalare, cnfigurare 5 actualizare a programului Netscape Communicator dupa + copierea acestuia de pe CD-ul anexat earfi HTML’, reprezinta un ghid al comenzilor de creare a paginilor Web, ghid pe care il puteti folosi cind editati codul brut al paginilor Web (ceea ce afi invatat in partea a Va), ‘Anexa C, ,Resurse online pentru autorii de Web”, confine un catalog de pagini Wel ppe care le pate vizita pentru a invita mai multe despre editarea paginilor Web, pentru a curoaste noi programe de editare a paginilo: Web sau pentru a obtine imagini, animafii si alte elemente necesare ,condimentrii” creafiilor dumneavoastré Anexa D, ,Ce confine CD-ROM-ul?", descrie toate programele 5 fsierele incluse pe CD-RON-ul care insolegte carte In fine, mat exists un glosar, desi cartea foloseste foarte pufina terminologie de specia: litate, care este explicatd amdnuntt Ia locul aparitiei. rin urmare, sar putea sé nu aveti niciodata nevoie de glosar, Totusi, aveli unul pentru orice eventualitate Lucruri pe care le veti pricepe probabil si singur Pe mésura ce parcurgeti cartea, veti intalni diferite casete cu sugestii si alte ele- mente speciale. Cand le veti vedea, va veti da seama ce va ofera ficcare - ele, intradevar, nv necesité nici o explicatie. Pentru orice eventualitate, parcurgeti ran durile urmatoare: 10 De facut", sugesti si torment Pentru a indica exact cum se face un anurit cru, din loc in loc sunt foosite | nstructiuni de tipul ,pas cu pas’, denumite .De ficut”. In general textul care pre MO} cede pasi explica modu in care se foce ace facru. Prin urmare, daca don, pote ‘sari peste instructiunile respective. Totusi, atunci cand aveti senzatia ca nu afi inte- ‘yes pe deplin cum se face un anumit uer,executai pagi espectiv si probabil ‘el injelegeideeainainte de or parcurge pe tof. Uncor invajam anurnte uci humai executing, ‘Va atrag atenaasupratermenior nol important marcinducu pctograma Termerr now Acasa muse np des gio fae penta vi tas me rmorafitermeni necesaeinvatan Internetulu De asemenea, vefi ma intl rei por de sugestit prinse incase g Casta Sugesti va rath cum s faa! eva mal repede i mai usr sau cum pte conomisi imp si elo. este case sunt in ntregime optonale Caseta Observe eidentiazd un aspect important sau o hihi eae are legitrd cu ZS}, _| subectu cucen. sunt, de asemene, opine, ns ntotseauna mers fe te ZZ | atl nu vag 8 nterup, ‘aseta Aerie a previneasupra acini sau sual care a putea conduce la ceva “sf | ned, cum arf stergerea uns fiir important, Deaarece foarte pusine actu 4e pa parcursul edt gepior Web sunt In eu fl perculoes ini numa teva atl de cset ne tunel edn eit, vain seis. eo Ateliere La sfirtlfecrei or, exist um atelier usr si hazliu, concept penta consolida cele _mal importante deprinder si concepteprezentate in ora respec, Fecare atelier confine 16: Citeva intrebitscutefmpreund cu rspunsurile lr, care explichelementele interesante carer a fost inchseinlecte,deoarece nu conteibuiecitect la invatarea etait aneipagini Web (cu toate ct sunt interesante} Minitest:Ire-patra intebér cu mai mole réspansust cave va aut sa reper puictele importante, find in acelay timp wn ban pile) pentra glume, ars de care Exrtea nu arf putut fi concept [Actvitate: Cova cetrebuie fut pentru a exersa cee ce ai invtat in ora respectiv Sau cas preg petra ora urmateae. inca o precizare De fapt, nu mai sunt alte precizisi Pornificeasul si atacali Ora 1. Dupa douizeci si patru de ore de muncS, socotite din acest moment, vet sti editarea paginilor Web pe dinafard va allumese ci vi petrecetio zi cu mine. Cand Francis Ford Coppola face un film, azvarle scenariul pe fereastri si improvizeaza. In schimb, cnd Steven Spielberg face un film, inainte de a incepe filmarile intocmeste tun plan strict, pe care il respect8intocmai, Ambii regizori au fScut atat filme bune, cit sitele, prin urmare putem presupune ca ambele tipuri de abordari pot da rezultate. Dar cind suntei incepitor in editarea paginilor Web, este mai indicat s& lucrafi ca Steven Spielberg, dectt ca Francis Ford Coppola. inaintea construirii primel pagini este necesar ‘st vi facefio idee despre cum se nasc paginile Web si sa plinuifi cum si arate pagina dumneavoastri, Puteti improviza? Desiguy, ins& improvizarea la acest nivel ar putea s& ‘duct lao pagind mai pugin eficienta, a crel creare s4 dureze mai mult, s& duc la 1edepasirea bagetului cu milioane sia termenului cu siptimani" si asa mai depart. in aceasts ore va face otrecee in revista elementelor care alcituiesc pagiile Web sic enumerare a aspectelor de care trebuie s Fnei seama cid concepet propre cumente Web. La sfirsitl orei vei putea rspunde la urmatoarele itrebSt 1 Din ce eemente sunt alestuite paginile Web si cum funcfioneazd acestea? 1 Ce este HTML 4 de cetrebuie lat in sear? # Cum devin elementele de multimedia ~ imagini une, secvente video si animati = pti componente ale pagini? 1 Ce sunt ste si care sunt argumentele pro dumneavoastra? contra utilizar lor in pagina = Cum trebuie abordati organizarea mai multor pagini intrun sit Web? Structura unei pagini Web ‘Mai exista si componente optionale, ns majoritatea paginilor Web contin multe dintre clementele descrise in aceasta sectiune, Este important de stiut care sunt aceste compo- nente, deoarece operatiunea principal in editarea paginilor Web este stabilirea continu tului fiecdrei componente standard, o problema importanta fiind generat de modurile dliferte in care trateaza fiecare browser diferitele componente, (Mai multe despre acest aspect, veliafla ceva mai tarziu,) 42 Part I: Primi pasl, prima pagina Web Componente vizibile In mod obisnuit, componentele care sunt vizibile vizitatorilor datorta browserului, sunt urmitoarele (vezi figura 1-1): Fsuna 1.1. CAteva dintre componentele comune paginilor Web 1 Titlul (title), pe care browserele grafice (majoritatea browserelor de Windows, Macintosh si X Window) il afiseaza de obicei in bara de ttl a feestrei in care apare ah © Subtitturile (headings), pe care in mod normal browsercle le afigeazS cu caractere 1mati aldine sa flosind in alt moc de evidentiere. O pagina Web poate avea mai multe subtithuri care pot fi imbricate pan lao adncime de sase niveluri. Aceasta Jnseamnd c& pot exista subtilis, sub-subtitlur si asa mai departe ¥ Textul normal, care reprezint text de baza, cu scop general, din pagins. De obice, line si blocurile eu text normal sunt denumite de cAtre autorit Web paragrae. Dar in limbajul programului Netscape Editor, acest termen poate desemina orice bloc distnet de cuvinte aflat in pagina, indiferent daca este subtti, text normal sau alt element dterminat de proprittile asociate paragrafului respectiv. ¥ Somnittura (signature) fisata de obice in partea de jos a pagini In mod obignuit, semnitura indick autora paginii si include adesea adresa de poy electronica a sutorului (au a Webmaster-ului) pentru ca vizitatori s& poatatrimite comentari sau inrebai referitoare la pagina. Cateodata, adresa de post electronic este sub forma tunel legaturi mailto, astfel incat vzitatort pot si execute cle pe aceasta pentr ca pro- gramul lor de pos electronics 58 se deschidd cu un mesaj preadrsat autorulu “Til eal al pagini Web nu apare fa interior pag, lu det fees in care browser figezz8 pagina. Oricum, malortatea paginio au un Wu drt, sub forma unt text sau a unetimagin d pe eoren, cat indepinst oll pe care nH asociem til unel cd sau revste ~acala dea sta evident andr in tune pag, pnt a da un Ora 1: Conceptul de edtare a paginilor Web 13 ® Riglele orizontale, care imbraca pagina si o impart in sectiuni logice. ™ Imaginile intie, care sunt incluse in aspectul paginii pentru a o inviora sau pentru a transmite niste informati, 1 Modelul de fundat (background pattern), o imagine inline care, spre deosebire de naginile obisnuite, acoperd intregul fundal al pagini, astfel incdttextul si celelalte imagini apar deasupra ei 1 Animatiite, ect sau imagini care apar in pagina Web gi se migcd intr-un fel sau altul. Imaginile pot s4 apara cu intermitenfi sau s4 se succeada intrun ciclu, iar textul poate si dlipeascé sau s8 defileze pe ecran, 1 Hipertegiturile (sau simplu, legiturile)catre diferite elemente: alte pagini Web, fisiere multimedia (Imagini externe, animati, sunete, secvente video), fisiere document, adrese de posta electronicS si fisiere sau programe de pe alte tipuri de servere (cum ar fi Telnet, FTP si Gopher). Legiturile (links) mai pot duce etre anumite Jocuri din pagine curenta. = Imaginile-harta (Imagemaps), imaginl inline in care diferite zone ale imaginii au asociate legituridiferite. 1 Listele, care pot fi numerotate, marcate cu bulet-uri (ca aceasta) sau de alt gen. = Formularele (forms), zone in care vizitatori pot completa cimpurile libere pentru a ‘rAspunde unui chestionar online, pentru a comanda bunuri sau servicii gi atele Componente invizibile Fe lings comporentele care pot fi vizute nto pagina Web, aceasta sau, mai degraba, malfien de sire care alcdtuiesc pagina mai pot confine alte elemente. Aceteele- mente de obice nt sunt vinibileviitatorlor ut I 1 Ldentificare~ Figierele-pagind Web pot contnefelurit informati de identificare, printre care numle si/sau adresa de posta electronici a autorului gi codurt Special cae ajuti mecanismele cle cittare la determinarea subiectulul si confnutalu agin. * Comentari ~Comentaile apar sub forma unui text pe care autorl il doreste s fe ‘zt numa in czul ct dnecte a codului HTML al pagina gin cazul agit agin de citre un browser In general comentarilecuprind note refertoae la struc- Fina sau organizarenfigierului BTML Fes HTML Abrevicre pentru Hyperlet Markup Language. HMI. este un for mat de fiir in care sunt stocate paginile Web. Un figier HITMAL nu este altceva dec un fier text cu coduri speciale care indica browserului cum sh aligeze fsieul: cimensinile pentra lecare bloc de text, locurile de amplasare aimaginilor i altel © Codul JavaScript — in interiorul unui fisier HTML, liniile scrise in cod JavaScript pot conferi pagiit proprietai dinamice speciale. "= MiniaplcafiieJaoa (ava applets) ~ Aflate in sire separate, modulele de program scrise in limba} Java pot imbunstat interacunea dntre viztator, browser si server 1 Codul de procesare a formulareior $i aimaginilor-harta ~ Cod de program (sri in JavaScript sau ineun alt mba, denumit CGI uilizat la procesarea rior imagine $ 2 Yormulareor interactive 14 ait I: Primi pasi, prima pagina Web De facut: Identificarea componentelor unei pagini Web 1, Deschideti browserul Web, conectai-va la Internet si mergeti la orice pagina ‘Web dori. (Putet utiliza copia programului Netscape Navigator din aceasta carte sau un alt browser pe care il avels) 2. Priviti la bara cle ttl a ferestei in care apare browserul (bara situati cel mai ‘us, in care de obicei vedeti denumirea programulul utilizat) Probabil cA veth * vedea denumivea browserului pe care il utiizafi urmat8 de ttlul paginii Web pe care o vizualiza 3. Explorati pagina respectiva (si allele) si vedeti daca puteli identifica in paginile ‘iaitate toate elementele care urmeazi: ~ sublitluri de paragraf (de obicei text aldin, mare, format din cuvinte putine); ~text normal; liste (atat numerotate, cit si marcate); ~ legaturi (atasate textului sublinit sau imaginilor); —imagini; ~ sentra (0 estar cne anes program de pot ecto nd executati clic pe ea ce indcatorul mouse-tl deasupa uel egturl (tr a executa ci a ea), put vedea ‘in bara de tae acresa ta car due legaturarespectv. Pe ing arse la care duce o anumt egturd, mal put ata cite cava despre imagine pe care le veel ngagiea Web. Duce nccatorul mouse-ulu deesuora une imagin, execu clc-treapta gf alepe opisea Properties dia mania care apare. Ort renutat, va fast 0 ‘casei d ilo cu intra reetoare a denuite, mérimea su fiiruu care este soca imagine indicat de cumneavoas nliaénd acise thn va pute imbunaaiapttudinle de edtare a paginr Web studing Z esignulpepnior Web pe cae le vita, g ‘Tn majoritatea browser, a baz fret pare o bard de stare. De fecare dati cand Cum functioneaza o pagina Web? Cand creatio pagina Web, indiferent cum o facefi— cu ajutorul unui generator de paging {asa cum 0 vefi face in Ora 3, ,Crearea uni pagini Web sla minut»"),utlizind un editor ca Netscape Composer ori Mirosoft FrontPage sau, pur si simplu, tastind-o intr-un fisier text ~ceea ce obtineti este un fsier HTML care poate fi publicat pe un server Web. Un fisier HTML (vezi figura 1.2) contine tot textul care apare in pagind, plus codurile, denumite etichete (tags), care indica fiecare portiune de text ca pe un element distinct al paginit, De exemplu,etichetele HTML identifica o inie de text drept ttlul paginii, blocusile de text drept paragrafe, anumite linii sau cavinte drept legituri ga.m.d. Alte elichete HTML indica denumirile fisieelor cu imaginile inline care trebuie incluse in ppagind la afigarea pagini de citre browser. Un alt tip de cod HTML, denumit atribut, controleaza efectul etichetelor asupra ele- :mentelor cirora le sunt asociate. De exemplu, 0 etchetd poate stabili ca pagina $8 aba ‘un fundal colorat. Un atribut cuprins in eticheta respectiva precizeaz’ culoarea care va fi folositi ra 1: Conceptul de aditare a paginilor Web 15 Pe Ling identificarea elementelor pagini,etichetele HTML gi atributele lor influenteaza intr-o plaja langa formatarea paginti~ insd despre aceasta, vel alla putin mai tarziu. ‘Scopul malar edtoareor de agin Web, inclsi Netscape Composer, este dea va fen slucrafi ect cu codul HTML. In schimb, cra int-un mediy WYSIWYG (wat you see is ‘wha you get = cae ce ved este coeace objet) pute aranja format test gl gat- ade pe ecran ag cum a trebui si apard cn pagina este vazti cu browser. Tntimp ce fae acest luc, in cule, Composer cregard pentru dumneavoasta un docu: mont HTML ‘Gu toate aceste,existé motive pentru avi famiarza cu HTML. In Patea a Va, nisarea painor, ve dascoper tacit pe care fe pute tz tn page dumneavoasir Web, ‘ns peru cae edtoral furizat cu aceasta cate (asemenea ator edtoare) nv are instru- mente, Pentru a liz cele caractrstic va tobuls intra in cule gis ue cu HTML ~ cea e nu est ic, dup cum vf observa, pel Pa mrpconmmenc tyes comermmetent onees-n- 00-19 Figerul HIME SS eee ae Se a eee bootie (gon ne Same ours paginit BoP enim Lomein verte” ALE eC Mustrate — infigura 1 = | parte costa, vou te fr Lint wo fun sas tammy supe stan Un browser Veb este un program care le fa el palin dou era =i accesere documente HTML aflate pe servrele Web alate la dstana (aiizind un tee decane damit THE dene caren tenesl a snin Reet momen wo nterpetere eticheele HTML din document pene aaa pagina fn mod orespuneito pentru a rata legiurk cored aga mal depart Este importart de relinut eh tchetele HTML nu oft un control riguros al format psi aga cum af avea intra program de prelucae a textelor. Cu exceptia cazurlor end sunt utlizateexensile, HTML ni fae allcevadect st ldentifice ear element in parte, care browser sable in mod dferit cum sk afigeze pe ecran elementle respective. Estense, Extensile sunt adaosuri speciale la libajul HTML standard, Irtroduse de cbse declre creator de browee entra permite 16 Partea I: Primi pas, prima pagin Web Drowserului respectiv si facd Iucruri neincluse in HTML, (Vezi sectiunea ,Extensiile: aceasté ori.) posi contra’, care urmear {In momentulelaboritiacstt citi, doud dintre cele mai populare browsere(aiferite wersiant ale programelor Neacape Navigators Internet Explorer) dejin majortatea covarsitoare a peteh, Desi exist diferent subtle inte etichetele HTML pe cael sustnefiecare, compa continatdinte ele a dus ia ealizareaa dou browser cae afgeaa identic majoritatea paginilor Web. Aceacainseamné ci, pentru mjritateavisiatoilor de pe We, Paginle dumneavoasta vor aria aptoximatv fa fel cum le ede} in Communicator Celor care utilizeaz8 alte browsere, pagina dumneavoastr le va apa ct acelasi text ceeas organizare general nsd conjnutul grafic sate elemente de estetcd ar Puttea s difere mult de la un browser Ia atl, De fapt, in nee cazar, sa putea ca Imaginile gi ceelalte ornamente grafic s8 nw apars deloe Pentru a vedea cum apare munca durmneavosstr In ciferte browse, put destéca browsereefustrate in figurie 1.35 1.4 s8vzualali papa cu el. Adresele de pe Wed ecesae obi acestrbrawsare par in Ora 23, .Testareagntefnereapagii online’ Fentru a exemplifica aceasta variaffe cae apare de la un browser la alta figuile 13 1.4 prints aceeasi pagina care est ustrat in figura 11. Figura LI prezinta pagina aligta cu Netscape Navigator in timp ce figurile 1.3 3 14 o prezntsafiatS prin inter- ‘edit altor doud browsere: Cello si DOSLynx. Comparai cle dows fguri cu figura 1.1 pentra a observa diferencle de prezentare care apat Brovsserl ilustrat in figura 14, DOSLynx, este un browser pentru DOS (v8 mai amintti de DOS, nu) care nu afigeaz’ deci textal (browser text-only), Deg ntrun proces rapid de disparifie de pe Web (dar aflate inch acolo), acestebrowsere nu pot [ig imaginil inline gaia intregul text cu acelas tip decarater rin urmare, cu ist mat putin posibleste ca elementele important, cum sunt subtiurle, si fe ev- dlengiate u tere aldne sau prin subliniere: Unit mai flosesc aces tip de browser, desi majritateno fac deoarece nat tip de cont Interne corespureator sau Mu a hardware-ul necesar unui browser grafic Fis 13, Pagina prezenta’d in figura 11, afigatt ‘acum cx Cello Pou 14, Pagina prezentait in figuile 11 $413, fists acu cu DOStynx Datorits persistentei browserelor care nu Iucreaza in mod grafic (si datoritd unor navigatori care inhiba afisarea imaginilor inline pentru a mari viteza de afisare a ppaginilor), este important ca toate informatiile esentiale pe care le prezentati grafic para siin text. Mai ales legiturile aflate sub o harti-imagine trebuie si apara ca text 51 fn ale parte a pagini. Mai multe despre aceasta veti inva in Ora 9, ,Legaturile” 18 Partea k: Primi pasi, prima pagina Web De facut: Studiati codul sursd HTML al unei pagini Web 1. Deschideti browserul Web, conectat-v la Internet si mergetla orice pagina Web dont 2 Modifica modul de vizualizare al browserulu astelindts8 arate codul sursi HTML al paging: in Netscape Navigator (inclus pe CD-ROM), alegeti View, Page Source. in Internet Explorer 4,alegei View, Source. Jntr-un alt brovrser, uti o opfune de meniu care si cuprindi “Source” sau “HTML 3, Studiaficodul HTML, Nu va ingrijorati act mare parte din el pare o limba stdin; nu este nevoie 38 i in stare sf decodificai” pe loc un fisier HTML. act priviti mai atent, in difertele coduri vel observa ~textul care apae pe paginss ~ denumirile fsierelor care contin imaginile din paging; ~adrescle de pe Web indicate de legitur 4. Cind at ncheiatexaminarea coduluisurs& HTML, inchidetifereasrain care este afigat codul pentra a reveni la modul de aigare normal al browserului Pentru a v nia corect in editreapapntor Web, vi sunt necesarenofune de baz privng HTML, care va sunt prezenate a acest ord. Orcum, dup ora aceasta, pute uta cestl de mute despre HTML, col pun pind la area a Va Penta Incepitor, HTML est nk-unanumit fe ca o fos septicd Este necesar sce ‘est unde se fl, darn rst nu are de ce sv preocupe dc nu aare reo problema. { a Imaginile, sunetul si alte elemente multimedia Deoarece fgierul HTML confine numa text, componentelegrafce pe cre le vedeti in paginile Web selementele multimedia I care aveti acces din ele fac parte din Feral HTML propriv-ris. De altel, acstea pot fi legate de pagin in unal dintre surmatosrele dou’ modu 1 taginile intine sunt fsere gratice ale cor densi yi pusiie sunt srse in fiieral HTML si sunt identificate caimagin’ datoritéetichetelr Imagini inne Sunt imaginileincuse in prezentarea paginit~ toate imagine pe care le vee cind accesti pagina prin intermedi! browserul Elementele multimedia externe sunt ere care contin imagin, suncte sau secvente Viseo,isiere ale conor denumite si porte apar in sirsl HTML sub forma unor legit. Aceste fisiere me apar sin sunt redae in mod automat cao component @ pesinis In schimb, pagina prezitslegiturile care ind sunt activate, descarca Fisieral penta al red sas afisa, Interne sau extern, fisierele multimedia pe care le utiliza in paginile dumneavoastra Web impun browserulut nste cerint, Asfl, penta aafisa mainline acest tre- buie ste capabil si afigeze elemente grace. Fisierele mullimeatiaextere pot fi redate thigede ite browser sau, lucru mat des intlet, de cite o apictie ajthtoare sau program anexa) deschiss de ctre browser (Ora 1: Concoptul do editare a paginiior Web 19 Cand hotarati si includeti elemente multimedia in pagina dumneavoastra, trebuie si alegesi cu grij tipurile de fisiere pe care le utilizati. aptul ca fisierele HTML contin ‘numai text permite utilizatorilor cu diferite tipuri de calculatoare si acceseze paginile ‘Web. Este mai putin probabil ca fisierele grafice sa poata fi citite de o gamé larga de caledlatoare si, cu atat mai pufin isierele care contin sunet sau secvente video. CChiar $i in limita calculatoarelor compatible IBM sau Macintosh, trebuie sa va intrebati dacé fisierele multimedia folosite sunt recunoscute de un spectru larg de browsere si/sau aplicatiajutitoare, Veli iavita mai multe despre aceasté problema in Ora 13, "Obyinerea (sau crearea) imaginilor pentru pagina Web. Extensiile: pro si contra Limbajal HTML este standardiat, desi, terete orice browser Web poate citi orice document Web. Conform une conventi, toate browserele moderne recunosc HTML 2, nltimal set de etichete decarat egal” de ctr comittele care se ocups de standardle Internet. Standardizarea este bund finds fornizea autorlor Web siguranta c3 majoritatea browserelor var putea at ceea ce publica ei Deoarece orice Browser poate inflege i interprets toate eichetele HTML 2, pentru af sigur ct paginile Tor sunt accesible Linu nmr ef mai mare de vztator, atria deeat si se imiteze la etichetele respective Problema standardelor este of le evolueeza ince. Re Web, numat descarcarea are voie Bi fie lent evan tree fe rp, De ce? Peni cX primal browser grafic 8 pirat acarn patru ani, iar noi dalogim acum beneficiind de facia video fn timp real, Naserea si maturizaren Webcal ca medi grafic, nteratv, au avut loc dea lun: gl une singure administra prezidenfialea SUA. Asta da, rapiditate! HITML 2 confine coduri pentru toate elementele de Baza subtext normal ini ociontae, ist, legit magn inlne si alee, Ins& acum existt HTML 3, care confine toate etichetele din HTML 2s, supimenta, etichete pentru element ca a tet centrat si ext aliniat a dreapta: * tbele: 1 fanctt matematie: 1 modalitii e poritonare a text Hing’ imagine fine (in local amplasaei fcesluia deasupra sau dedesubtal magni) ‘Cd ereati pag peru orefea dip intranet, in care to uizatrlfolosese acest browser, uy ose nacesar svi pune! problema extensitor — puta foosi toate elicheele reeunascut de browse Cele mai bune browsere, printre care Navigator si Internet Explores, recunosc toate elichetele HTML 3 si chiar o parte dintre cele existente in HTML 4, apSrut de curdnd. Cu toate acestea, dezvoltarea paginilor Web a luat un astfel de avant incat atat Netscape, cit i Microsoft continua s4 includ’ in browserele lor etichete noi si facilitatt suplimentare caze nu fac parte din standardul aproba. 20 Partea | Primi pasi, prima pagina Web Cnd sunt folste inten document Web efectleacestorag-numit xen ale Himba- jului HTML pot & vizute mumat prin intermediul unui browser care le recunoast- Desigur Navigator recunoapte font extenile Netscape, ar Inert Explorer pe ele Microsoft, Un cr ete lay anne cin toate browserelerecunose toate tensile Din acest moti rebut si it atent candle uizai, fn generat, ind un browse incompatiblaceseazio paging in care sunt asfel de etichet, nue lntdmpla mic grav. Formatareabazata pe extensile necanoscue mu Spare, ned grosul” paghl ext i gafca) simane bebi ‘Autor care vor i proftedeaceseextensil sunt preocupai de fap ch uni vtator na ‘id pagina in toa spendoarea el Din acest mot, vei veda fot mai des pe Internet mesale a “Best when viewed through Netscape Navigator” (lea de viut cu Netscape Navigator) ‘sau Enhanced fo itrnet Explore" (Dezvoat pentru internet Explore) Prin ee autrul va informa ca tat extens 5 8, da dois v8 bucurat de toate Caractere agin, est ina! s lati un browser compat Modalitati de alcatuire a unui document {in fine, Inainte de a trece la crearea unui document Web, trebuie s& aveli in vedere urmitoarele aspecte: ™ Cum poate fi fragmentat mesajul pentru a-l organiza pe mai multe puncte? ' Cat de mare trebuie si fie pagina sau cite pagini sunt necesare pentru a spune tot cee de spus? Dupe a deo iat rdnea puters! mesjl ete conta, ar putas escape ch al df suri nce dame =| Schitafi o lista a punctelor si subpunctelor tratate in documentul dumneavoastea. Céte sunt si de cat material aveti nevoie pentru fiecare? Dupa acest exercitiu simplu, veti trece la stabiliea dimensiunii si scopului dacumentulsi, vunctele, Se succed ints-o ordine logic, fiecare parte nowa depinzand de urnizate In parile ancerioare? Imparyirea pe subpuncte a materialulut fireascd? Cum ati putea rearanja punctele pentru a le face s8 se deruleze {ntr-o ordine logied sau sa fie grupate in functie de subiect? Pe masurd ce Iucrati la structurd, vefi obtine o conturare a documentului, Cu c8t contu- ‘ali mai bine documental inainte de 2-1 compune, cu atat mai eficientd va fi elaborarea Jui, Mai mult, documentul rezultat va prezenta mesajul dumneavoastré intr-o manera claré si sor de uemirit ‘ecie’ paint pe ofa de rt peniu a stabi informapile cin teare pagina. Prince g Scenail de coacepere a unui document cu mai mut de te pain const Tn sciarea agile pe pretest unfele cu tin sau cu banda pentru a arta legturle inte ele. In timp ce v8 structurai document, ave in vedere organizarea logic a prezentri st smodal in care mateaful sar pate incadra in una dintre urmatoarelestructuri des intaite pe Weer Ora 1: Conceptul de editare a paginlor Web 2 Avizier~O singut8 pagina, simpla, care descrie de bbicei o persoans, o mic afacen sau un produ simplu. Majoritatea paginilor personale sunt de acest tip. Ele congin deseo leituri la resurseInrudite (sa favorite) de pe Web. (Netscape Page Wizard creeaza acest tip de pagins.) Liniard moropagind ~O pagina Web, scurta sau lung, proiectaté spre a fi citita sa mult su mai putin, de sus in jos. Adesea se foloseste regula de a diviza oastfel de paging in .pagini” virtuale. Cititoni pot parcurgeintreaga pagina derulando, insd putefifolost un cuprins si marcaje pentru ai ajuta 84 sard rapid la orice sectic tune. Aceas structurd este folositi pentru documente relat scurte (mai mil de 10 crane), in care toate informatie se deruleaza Frese de la inceput pnd lassi Liniard matipagind Se pasireaz4 ideea de la structura lniar4 monopaging, ns ddocumentu’ est impirfit in mai multe pagini care se stcced logic, ca paginile uneh ppovestir,Putet indruma ciitorul amplasind in partea de jos a fiecSrei pagini 0 legiturd spre pagina urmitoare. erarhica~ Structura Web clasic, Prima pagina (denumité uneor home page — agin Ae ba cone leit ete alte paginy care pezitd fear clte9 pane prince Pala subictuls. Ficaredintre acele pagini poate avea, la rindi i legaturtedtre alte pagini, divizand mal mult subiectul i farnizand informatiispecifice, Rezultats] este ostrucurs de arbore, aseménétoare celei prezentae in figura 1.5. Bk Froura 18, O structurd irarhict - 4 Tip Web strectura tip Web (prezentata in figura 1.6) este o structuriorarhick rk lerathi. Este un document cu mai multe paginy, fiecate putind avea olepaturaeitre oricave até pagind Sar putea sexist o pagina de baza inch dela ea ctor pot hoinds prin dociment fird a urma un drtim preci, Structure de tip Web mu Sunt fixe ele sunt bere si. prn urmare cele mai potivite pentru dstracte, subiete ecreaive sau alte subiececare idea rice tructurdierrhici sau seeveral. Suagestie: inate de a recurge lao structurd tip Web asiguratiovic& mesaul dumneavoastrd are int-ades var nevoie deo astfel de structurd, ar putea sé aveli probleme privind concentvarea) o ence Ora 1: Conceptl de exitare a paginlior Web 23 Atelier Fauna 16, O structurd i tip Web va eR 1 Desi in esenti, imi spuneti ck pot include in pagina mea toate aceste err \, interesante, ns trebles folosese mai elementele simples de vreme cece < mentele de efect se bazeazi pe extensii ar nil oameni nut pot vedea componen- tele grafce: Nu este pufin cain dezanjant? a ene Pa NA Exista gi alte modalitati de structurare a informatilor; variante ale fiecirei steucturi prezentate aici, Insi una dintre aceste structuri ar trebui si semene cu forma generalé a ‘mesajului dumneavoastra, deci sicu documentul dumneavoastrd. Cu alte cuvinie, dack ru va puteti decide asupra uneia dintre structur, este necesar i incercati sil structu- raft in mai multe feluri pind cdnd descoperif este potrvita una dintre acestestructuri Rezumat Daca dori ati putea sa va creati pagina Web servind 0 cafea bund geznd comod si jucanc-va nifel cu Page Wizard (Ora 3) sau cu orice editor de pagini Web, La sfarsit ‘ett avea un fiset HTML bun de publiat(dack nu de cit). Va finsa un fster care sf tndeplincasia seopul dunuieavoastd dea avea o pagina Web de primnd mand? In cazul in care suntet in cutare de aberprieteni, i vaatage pagina umneavoastra? Dact suntet in catitare de client, vi va crea pagina dumneavoastr8 0 Imagine mai buna decit a concurent? Dac& oferifinformati ute, o facet astelincat Wizilatoris& considere cl sunt intuitive si ck este ugor de navigatprinze ele? {In mod evident, crearea paginlor Web nu fine numa de tec; mai impliciestetics, exgonomie, site sociale si multe allele. Pentru a crea 0 pagink care si ating Scopul, intatrebuie 58 clpatat nite cunostinge solide privind modu de functionare a {uni document Web, ce poate si ce na poate face, Asta am dort s invita in aceasta fra nu am intenfiona st va impun structura aspectl sau modul de comportare a documentului: acesta fin de inspiratia dumaneavoastra, Ins8 am incereat si va furnizez “cunostinfele necesare, asifel incat pe vitor 34 aleget in cunostinta de cauza R Deranjant mu. in pratis, nu este 0 problema chiar asa de mare. mu este 0 problema chiar aga de mare. inainte de tate, rebut admitem majontatea covisitoae a celor care navighened pe Web pot ‘eden leet rf sl ml dnt lizeazs un browser ae se ter reteze cea mai mare parte a extension Deci si daca exagerati eu ienaginle fore mates buat pe extn, pagina dumnenvoastt va aria bine pete majeaten ‘Totus este important si retineti acest aspect, deoarece daca scrietio pagina i neti acest aspect, deoarece dac® scriefio pagina in editorul de la Netscape nu inseamna c& o seriefi numai pentrutilizatorii de Netscape. Un autor iste face astfelincat propriile documente si fi att cu caracter informativ i ardtoase, cit siaccesibile taturon 7 Minitest Rezolvat testu. urmitor pentru a vedea cit afi reusit sf invita Intrebari 4, Adevaratul ttla al onei pagini Web apare intotdeauna: 4. Cu caractere aldine, in interioral pagin ». fn bara detitlu a ferestrei browserului. €-Atita, cit sib, 4, Nici unul dintre rSspunsurileanterioare. 2. Imai aes vi nr pagin Wn eaten fe pt din fier ere ‘eontine pagina, cl sunt stocate separa in sires inserate la abgare de ctte ‘devia su fs? amen eee omen eee! 3. Paginile Web sunt stocate intr-un format de fier denumit a. Hyper Speed Mockup Literature (HSML); b, Hypertext Markup Language (HTML «Stephen (9; 4. Hyper Auto Retro Vaiant (HARV). Rispuncur 1. (8). Autor Web repetéadesea ttl paginil sub forma unui subtitu (variant a), dar pt Inldeaun, Singural on cre apa fotdenuna il rea ste cel preci la 24 2, Adevirat, Fiecare imagine se afla in propriul ¢ifisir, denumirea si pozitia acestuia fiind precizate in fisierul HTML pentru ca browsertl si stie care imagine 58 0 afigeze si unde. 3.00) Activitate La urmitoarea iesire pe Web, urmarifi in fereastra browserului zona in care apar adres gi denumirea paginii afigate (de obiced in bara de adresa situata imediat sub bara cu instrumente si deasupra paginii). Remarcati faptul ci majoritatea paginilor pe care le vizualizati sunt fisiere a chror denumire se termina cu extensia Jitm sau htm Acelea sunt fisiere HTML, asemanatoare cu cele pe care urmeaza s& le creali dumneavoasts Ora 2 Prezentarea unui program de editare a paginilor Web (Cand luca intsn editor pentru pagini Web de tip WYSIWYG (cum este Netscape Composer, furnizat impreund cu aceats carte), pagina dumneavoastra arat (cu pufine excep) exact asa cum leva apirea pe Web majoritajil viitalorlor. ‘Acest lucru este deosebit de avantajos fr el autor Web artrebu si-sinchipuie in timp cejonglesz8 cu codurile HTML, cum ar arita pagina In scopul de a-si verifca munca, a tebui 85 desehids fsierul team browser, dupa care sf revind la codul HITML pentru a face modificirile de rigoare. Cu un editor WYSIWYG, puteli si vedesi sis face toate acestea into singurd feasts, color gi pe iu {naceastt ora vé vor fi prezentate operafiunileobisnute din Netscape Composer pentru sti si le folosif{cdnd vet avea nevoie de ele in oreleurmstoare. La sfarsitul bre vei putea rispunde la urmatoaree intebark # Ince modus: se poste deschide Composer pentru difrite operafiuni? 1 Cum se cresei pagini noi? Cum se slvesz gi se redeschid paginile Web in Composer? 1 Cum se testaz4 modi in care wa arta pagina online? Se poate tipatirezultatul munci? ‘Se prsupune cai nstalat dja Netscape Communicator, conform desrii din Ane A, -lisalare programulu Netscape Communicator’. Deschiderea programului Netscape Composer Netscape Composer poate fi deschis in mai multe feluri, in functie de locul in care va aflafi cand incepeti sin functie de ce dori si faceti cu el. Deschiderea programului in Windows 95, 98 sau NT (Cand doriti sé jucrafi in Composer gi Netscape Communicator este inchis, deschideti programul Composer direct din meniul Windows Start alegind Programs, Netscape ‘Communicator, Netscape Composer (vez figura 2.1). Composer se deschide cu un fisier care confine 0 pagind Web nou, goal. Aveti posibilitatea sa incepefi Incrul la 26 Partea k: Primi pas, prima pagina Web pagina Web in acest fisier now sau sd deschideti un fisier existent procedind conform, descrienifacute ceva mai tirziu in sectiunea ,Deschiderea unui fisier (uneorl impreund cu Composer)” Cn uizaio versiune pentru Macintosh a programuli Communicator ant dea putea deschide Composer, tebul s} deschde Netscape Navigte, g [Inne reste enctea nce petogana Weapon ee Sunrafafa de lucru, se deschide component cae joacd ral da browsar (Nagata), Dar aceasta pictograné poate i modlicatd pen a oascideprogramul Compose. Deschiderea programului dintr-o alt& component& Cand deschideti programul Communicator se deschice in mod austomat si bara de componente. Uiilizand bara de componente sau menial Communicator, pteti trece de Ia orice componenta a pachetului la Composer. Fura 21. Deschiderea rogranutui Composer din menial Windows Start pentru a crea fo paging Web nowa Gy raters Greretcmetae Ktewvecemeerenact Smmthentet FS sano Wionatwes | Rfmeachnee Bcsirnou FR pone auce Brecon filet Bara de componente. Este o bard afgati de Communi e or P ia sunicator si confine patra picograme ene dnc sceendeschisind al comport. Navigator (pentru navigare pe Web), Mailbox (posta electronics), Discussions (grup de stir) si Composer Bara de componente poate flotants sau ,ancorata” in coltul din reaptnjos al feresre Cand treceti pentru prima datd in Composer dintr-o altf componenta in cadrul unei sesiuni Communicator, Composer se deschide cu un document now, gol, ca in cazul deschiderii lui din meniul Start. Cénd deschideti sau creati un fisier in Composer si poi tzecet lao alté components, fisierul respectiv rimane deschis in Composer. La revenirea in Composer dintr-o alté componenta, vé putetirelua Iucrul Ia fier! respectiv va 2: Prezentarea unui program de editare a paginilor Web a7 De féicut: Trecati in Composer din ato componente 1. Deschideti program Navigator aleg’nd Programs, Netscape Communicator, Netscape Navigator din menial Start. (In cazal in core conectarea la Internet poresfe automat, anulatio) 2. Cutati tata de componente. Tebuie 58 gisii sub forma une bare flotante, cu patra pictogeame (vezi figura 22) saa a unui ind de piclograme -ancorat in colful din dreapta-jos al ferestei programului Navigator. Freuna 2.2. Bara de consponente apare ‘sub forma inci Dave flotanie sau a wi rind de piciograne fancorat in coltul din ‘dreaptajosal ferestrel ‘rept-jos al ferste, lege Commuricator, Dock Component Bar dn bara de meriurl a ‘fcr componente. Pentru elvera bara de componente (pentru ao face din nou flotant), lege Communicator, Sow Component Ba ? Pent a comuta bara de component din forma fotant Tn forma ancorat in cotl din 3, Executaf clic pe pictograma programului Composer din bara de componente, pentru al deschide. 4, Executati clic pe pictograma programului Messenger din bara de componente, pentru a troce in acest program. 5. Alegeti Communicator, Page Composer din bara de meniusi, pentru a reveni in Compose 6, Utilizatibara de componente si meniul Communicator pentru a comuta de céteva cori intre componente ca s4 vedeti cum este ete caatunc end treed aa component la Composer, remain dschise {ab componente inpreurd cy ieee org oica Seta one. De exe, dacd Tusa ening tn Navigator, aol recat la Cornpser wind una dnte metodele desorise mai eeme, Navigator i sesiunea online ramén desis a funda a " ane Crearea unei pagi In menial Files oricirei componente avi rei modalti dea ncepe o sesiune de creare a unei pagin Web 1 File, New, Blank Page ~ Deschide programul Composer cu 0 pagint nous goals sala pentru editare 1 File, New, Page from Template ~Iniiaz8o pagina noud prin intermediul casete de dialog Tempate. In easeta de dialog se introduce pozitiapaginl Web care wrmeazi 28 Patea |: Primi pasi, prima pagina Web fie folosit ca sabion la inifierea noi pagin. (Veei Ora 4, ,Crearea rapid a unei pagini originale cu sjutoral unui gablon’ 1 File, New, Page from Wizard ~ Deschide programul Navigator (dacK nu vi aa cumva in els face legitura cu Page Wizard, care va ajuta si creat rapido pagina de baza simpla. (Vezi Ora 3, -Crearea a unei pagini Web «la minuto”) Dupa ce att creat in Navigator pagina de baz alegeti File, Edit Page pentru atrece in Composer shosalvait, De facut: Deschiderea unui fisier (unecr! tmpreun’ cu Composer) Pasi pentru deschiderea una fisier in vederea editarii in Composer sunt aceiagi ata pentru Navigator, cat si pentru Composer, Nu-i aga cl-ifrumos? 1. Cand va aflai in Navigator sau Composer, alegeti File, Open File. Va apirea caseta de dialog Open Page (prezentata in figura 2.3). v Fura 23. See ee eo tte Caseta de diatog Open | FaseeararamcPaTemTis ———— num. Page, accesibid att din | Qrermreun # teen : oak Navigator eats din = Eien teat || Composer 2. Introduceficalea si denumirea corespunzatoare fisierului sau executati cle pe bbutonul Choose File pentru a deschide caseta de dialog Open de tip Windows, pe care o puteti utiliza pentru a risfoi dupa fisier. Dupa cum se poate observ figura 23, mu este necesar si furnizati calea gi denumizea fgierulul in forma URL. ‘3. Dups introducerea corecta a ci si denumiri figierului in caseta de dialog Open Page, asigurati-va cd este selectat butonul de radio de langa eticheta Composer, poi executali clic pe butonul Open. Drept urmare,fisierul indicat va fi deschis Jn Composer, gata pentru editare. ‘in Composer, noc sa alge Fi, Open Page, ute executa clic pe butonul Open din bara ‘eu insrumante Composition. Acestbuton au deschidecaseta de log Open Page, i obigutacaseti de dialog Open cn Windows, pe cae o pute utiiza pentru a uta gla alge Fier, Deschiderea unui figier utilizand butonul New ‘in cazul in care doriti si creati un fisier cu o pagina nou’ sau sa deschideji unul exis- tent, dar nu vi place nici una dintre numeroasele modalitati care v-au fost prezentate {in acest scop, avefi la indemand inca una (cu sigurants, ultima), Dups cum veti vedea, utilizarea butonului New este mai putin convenabila decat metodele descrise anterior Executati clic pe butonul New din bara cu instrumente Composition a programului Composer pentru a deschide caseta de dialog Create New Page (vedi figura 2.4). in aceasta caseta de dialog, alegeti butonul care corespunde doringei dumneavoastré: 4 Primele trei butoane, Blank Page, From Template si From Page Wizard, au efect iden- tic cu cele trei optiuni avand aceleasi denumiri care se gisese in meniul File, New, Gra 2: Prezentarea unui program de editare a paginilor Web 29 ™ Open Local File are efectidentic cu executarea unui clic pe butonul Open din bara. ce instrumente a programului Composer (deschide obignuita caseta ce dialog Open in Windows, in care puteti alege un fisier). Founa 24, Caseta de dialog Create New Page din programul Composer Salvarea si denumirea fisierelor (Cd salvatiunfiser in Composer, trebuie 581 deni ~ probabil i vefi da dena- rire sub care va fi stocat pen server Web cind va fi publicat. nd vine momental publicii unei pagini Web, numele defsier poate cea probleme De exemple, sistemele ce operare Windows 95, 98, NT, chiar si cele pentru Macintosh, ‘va permit sf utilizat spas semmnee de punctuafie in denumirea fiierlor. Acest Juri na trebuie cut eind denurnitifisierele in Composer, desi Composer vi permite acest luc, deoarece ind vet incerca sl publica (eau doar si le vizualizal in Navigator) vel consttac& browseral nu le poate deschide. in general, ita veme folosiiextensile tm si nem i elimina spite si semnele de punctuate, pete da fisierelor orice denumire, Totus, denumirea fiieruiitrebuie siiseconformeze sistemului de operareutilizat de server De exempl, daci serverul Web pe care urmeazi si va publica documental (vert Ora 21, ,Publicarea paginii?) folosete sistem de operare DOS, isierele trebuie denumite respectind regula demt- rin 3: Numeleiseruel poate avea cel mult opt caractre, iar extensia cel mul rel (hex, me De asemenea, cio pagind este prima paging a une prezentiri cu mai multe pagini practica standard este dea o denim inciex. tn]. Uncle servere sunt configurate sf dleschida in mod automa fisierul index. bes) ind un viitator precizeazé un director fara a specifica sun fisier Oricum, acest lara fenctoneazA numai daciaveli pe server propria director De obict il vet aves, Dar daca impirtt un director cual este pfin probabil sf primal care plaseaz8 un figer index. itl, del serverul na vi va accepla documnenil. Jn conclure lege-v8 servers aflai care sunt convenfile de denumire pe care le ulizeaza, aint dea stabil denumirle finale ale iierlor HTML. Utilizarea optiunii AutoSave Programul Compaser confine o optiune AutoSave care salveaza toate fisierele deschise dle fiecare dati dupa ce s.a scurs un anumit numar de minute (in mod prestabi 10 minute) Salvarea se face in mod automat, far8 ca dumneavoasted sa intervenifi, ined numai dupa ce ati salvat fsierul, in mod deliberat, pentru prima dati. Pani cand fisierul nu a 30 Partea I: Primi pasi, prima pagina Web fost svat petra prima dats, opianea AntoSave mi face savarea automat in schimb, ‘hinreab cach dons salva seul (vezi gra 28). Exectai cle pe ton Yes Sin caveta de dint penta salva fiir sau pe butoml No petra a nehide easta de dnt naa eect savaren, ceca ce ace ch AstSave 8 repet nrearea al tri Dupt cea salvat fier, autosavare se face n continua autora Dac evecutai clic pe butomul Cancel din costa de log AutoSave sents dows era (et mai degra na ge itl): = Fisieral mu est salva; = optiunea AutoSave este dezactvatétemporar pein feelin ca, del nt va ta incre slvrea automat a iserul, Nuveen fl ntecbat doch dort Shsalvotdamneavoastea eval Dupe sala opine se eacveszS automat $i programa reincepe a pana inirebares la fecare 1 minute, g Ac aie at sau eal pen loa stab cui ‘minute up care si intrebatl daca dort ste iat salvarea. In acest sop, ale Eat, Preferences in Compose gis ve deschide casela de cio Prelerences. Pentru @ madifea numérui ge minuto, introduce un aumar nou in cmp de gd texul ims”, sue in pate Ge sus a caste de galop Pentru a dezactvaophiunea ALtoSave, ezactval casuta de valida de LingS tentul Atomataly save page every. Fiouna 25. Sppeateon co Caseta de dialog AutoSave | “0 Rartsestinatasenutrmensarin Cedee De facut: Salvarea unui figier 1. Executat lic pe butonul Save din bara eu instramente Composition sau sleget File, Save, Se va deschide 0 caset8 de dialog standard, Save. ‘ind svt un tier cu 0 pagind We ae de a prec titl acest casta af «az dalog Page Properties, se deschiée automat o ase de dal incre pute introduce until, eocamdat. introduce oie tly dori ~ vel aia ttl cespre ‘ur alle propia paint In Oa, Stables tu, culo 2 ator propit ale pagiir. 2. Alegeti un director, dact dorit, si tastati denumireafisierului, Nu este nevoie si tastatf si extensia; se adauga in mod automat extensia -hex. A. 3, Executati clic pe butonul OK. ra 2: Prezentarea unui program de editare a paginilor Web at Testarea in Navigator a fisierelor create cu Composer ‘Dupa cum veti abserva parcurgand aceasta carte, Composer este in mare masur’ WYSIWYG; in majoritatea cazurilor, paginile dumneavoastra vor arsta la fel cind sunt vizualizate cu Composer sau Navigator. Totusi, existé cdteva elemente care nu apar in Composer la fel cur apar intr-un browser, Astfe, este indicat ca, din cAnd in cSnd, s4 ,previzualizafi" cu Navigator pagina creaté, pentru a vedea cum apare ea vizitatorilor (sau vizitatorilor care folosese Navigator) irate de eva pe san Preven, aa dn anpaser mx ot EG | snteescancepo bso een spe taed tage cgh 8 SEA | fkaivote catgut si rte Pentru a previzualiza o pagina la care lucrati in Composer, alegeti File, Browse Page din bara de meniuri a acestuia (sau executati clic pe butonul Preview din bara cu Instrumente), Daca inainte dea executa clic pe butonul Preview, Navigator este deschis i afigeaz8 un fisier diferit, pentru a afisa fisierul aflat in editare se va deschide o noua fereastra Navigator. Daci Navigator prezinta deja fisierul editat (cum ar face-o dacd afi fi execu- tat cic pe butonul Preview mai devreme, in timpul editarii), fereastra respectiv’ deschide si reincarea automat pagina pentru a ilustra eventualele modificari aparute de Ja afigarea anterioars. Pontru a reveni la sesiunea de editare dupa previzualizarea unui document, alegeti Page Composerdin bara de componente sau din meniul Communicator | uutiza Fie, et Page pena reve din Navigstorn Composer dupa prvuaizarea fos ‘isiemlul in tutu, Provedind ast, nu reveni la sesiunea de edtare anteriaré:opiunea fait age desc o nou fread Compose care can o copie a agin respective. Ast, avea deschise dou fest Campocr pant aataea aces Pantua revenn Comper cupévauleare une pag in avg, iia tara de pro- rare dn Windows, combnaa de taste Gd sau bare de component. Utilizarea barelor cu instrumente din Composer ‘Toate functile din programul Composer pot fi apelate din bara de meniur, insi, pen- tru un acces mai rapid, multe dintre funcfile utilizate frecvent sunt disponibile in una dintre cele doua bare cu instrumente (vezi figura 2.6). Fecarebuton din barelecuinstrumente este prezetat in ora Toca ete deserisa acjiviea pe care o decangze2. De exemplu,butonul Insert Link este prazena in Ora 10, Cretea legato Composition - Contine butoane pentru deschiderea si crearea fisievelor,verificarea paginilor in Navigator, tipirire, editarea textului si adugarea unor elemente in pag 1a, cum ar fi kegsturile gi imaginile. 32 Partea I: Primi pasi, prima pagina Web & Formatting -Contine butoane si liste derulante pentru crearea listelor si operafiuni dde formatare a textului cum ar fi aplicarea stilurilor de paragraf, a fonturilor sia atributelor textului. ceitareastflc8 vei vedea mal pujin din pagina a care luca Gnd nu ave nevoie de una ‘ce (Gu dene una}, o pute ascunde alegind o opjune di pata de sus 2 menial View. g ‘ind se aa pe eoran ambele bare cu instrumente,aeslea meyoreazasuprataaferestel de In partea de sus a ferestre de editare prezentate in figura 2.6 se pot observa doua rin- duri de butoane. care rind eonstituie o bard cu instrument, desi cele dows bare creeazsimpresia nea singure atuncicind sunt alaturate Bara Composition Bara Formatting Figura 2.6, Barclecxitrmente It STTMT AEA Composer BSEe Reese eo ee \dentificarea butoanelor din barele cu instrumente Cet areauinventat nterfaa grafic cu itor sa iain c&butoanee aut txplctive de pe ecran vor permite wlizarea inten cae wiiztorul eet clic Pebutonulconspuncitor in od instinct datos intlegeisubcongiente = seri Gai! pctogramel de pe Bton Dupe vais cu el majorite butoaneor din bree cu nstrumente ale pro- gratmulu Comper sunt dtl ce infutv, De exp, butona Pint are imagines he impriment ic baton inset Link are imagines uni lan ink = eg Infeles Mca?) Ca toate acest ctevautoane wea putea prea cam inept. Din fei fat batoanele din bare cu instrament dnp de indent lt). Pntea tifa denamizea noi baton sah eel indeatorl mouse pret de teva ‘moment 9 denntuea va opie, PERI Indicate (oltip.Utlizate in male dine programe pent Windows, icaileSunt etchete cate apa pentru ientieabatonele din Brac es Gator mouse lu deasupa atonal timp ce o sean su dou iin urma mentinerit indie ‘eine ingcatoral mouse- lui deasupra primuluibuton dn partea sting bare co instrumente. Dupé ce apare inccatia,depasai indicator incet spre crept, deasuora buoanelr pe mésura ce vi dopastl de-alungul bate, vor apdea inal corespuna- tance tetra ton g Aceistaconsttule 0 metod8 ut dee ala por Duonull cat a bara cu Instrumente, Deplasarea barelor cu instrumente Ondinea bareor cu instrumente ale programului Composer ~ Composition 5 Formatting ~maeste fx In interiorul zone! destinatebarelor cu instrument, 2008 aflata in partea de sus a ferestre,puteti poztiona bara Formatting deasupra bare Compostion sau invers Pentru a schimba ordinea, pozifonafindcatorul mouse-ului dessupea éreptanghiviss ra 2: Prozentarea unui program de editare a paginilor Web 3a vertical din extroma sténgi a barei cu instrumente. Executati clic si mentineti apasat bbutonul mouse-ului, deplasati prin tragere bara cu instrumente in sus sau in jos (in interiorul zonei destinate barelor cu instrumente) pana in noua pozitie, apoi eliberati butonul mouse-ul ‘ene au modifica optiunea Showrhde corespunzitoare bari poi sah pagina, ef ‘Confguraatarelor cu instrumente este speci fileruu. Dack depasatio bar cu instru ‘configura respctva vai etdcut ri de cite ov daschidep pagina respect Tiparirea din Composer Pentru a tipari pagina pe care o editati,executafi clic pe butonul Print din bara cu Instrumente sau alegeti File, Print. Documentul este tiparit exact aga cum ar fi tiparit din Navigator ~ in listare sunt incluse formatarea textului si imaginile, ins sunt omise ceventualele modele de fundal, pentru a pistra textul lizibi. Pagina este divizata in Ducati dimensionate astfel incat si se incadreze pe foile de hirtic. Desis-r pute s ipa page pertrs o consular utroard, nu va apeptali ca starea 8 feo roprezentareevacé a flu in care pagiie dumneavoastraapar anne, Rezumat ‘Composer face multe ~ de fapt, prea multe pentru a putea fi mcar pomenite in aceast ‘ord. Totusi, in aceastd ord v-ati apucat de treabs si afi invatat sf inteati in Composer, 4 iesift din el gi si va invartiti prin el. Atat de normale cum vi se par aceste operat cle reprezinté beza realizari eficiente a paginilor Web, Dar, cu toate caktitile pe care le are, acestui program ii lipseste una: inteligenfa. Nu va poate spune dact pagina creat este bine organizats, bine prezentata sau bine scrisé. Sic toate cd aplick etichete HTML in documentul dumneavoastra cu constiinciozitate, ‘nu vA poate spune daca afi ales etichetele cele mai indicate pentru prezentarea cores- punzltoare a materialul Prin urmare, Composer inlocuieste numai timpul 1 munca, nu st judecata, Pentr a crea un document Web eficient, trebuie si infelegeti estetica Web. Din aceasté carte veti invata multe in aceasta privinta. Dar mai trebuie si vedeti multe alte pagini online si s4 Je catalogafi mental in functie de ceea ce va inspira aspectul si confinutul lor, si acestea pot si vi incdnte sau sa va pard anoste,plictisitoare sau incdlcite, Atelier Tar Am vézut materialul prezentat in aceastd ori cu privire In barele cu instrumente si optanite din mento programului Composer, plus o parte din material care ‘af prezentt in oreleurmétoare, cum arf cel referitor la imagini, Unde se a8 Jn opfiunile de meniw si butoancle referitoare la alte clement ale paginil pe care Jeam vizut pe Web, cam ar ft secventele video? 34 artea I: Primi pas, prima pagina Web R Composer este destul de bine dotat, avind instrumente pentru 90% din elementele folosite de 99% dintre creatori de pagini Web. Dar nu este un sistem universal, atotcuprinzator in ceea ce priveste crearea paginilor Web. Nu face totul ‘Acesta este motivul pentru care va amintesc in aceasti or’, precum si in altele, ck indiferent ce faceti in Composer, in subsol construiti un document HTML, Cand ajungett la elemente pentru care Composer nu dispune de instrumente, trebuie s8 renuntati la ,pilotul automat” sisi apasatt direct ,pedalele” HTML. Vetiface acest Iucru in Ora'I7, ,.Aitarea codului HTML’, sis-ar putea si descoperiti cd nu este chiar asa de dificil. Dar pana atunci, explorat si folesitblucrurile pe care le face Composer si ‘are sunt prezentate de la Ora 3 Ia Ora I Minitest Rezolvati testul urmitor pentru a vedea cit afi reusits8 invitati. Intrebari 1. Cand bara de componente a programului Communicator este ,ancoraté* 0 puteth vedea a, Pecheiul 11. . Cu un pret mai mic ¢: Libers pe ecran 4. fn colt din dreapta-jos al ferestee 2. Executaf clic pe butonul Preview in Composer pentru a testa cum ar arta creatia ddumneavoastrs ack: 2.0 publica pe Web f b. Arfi gata A creat alteineva, 4. Ati luat-o de la tnceput. 3.Se poate flosi denumirea .Noua Mea Pagina Webs htm” pentru un figier care contine fo pagina Web, Adevarat sau fals? 4 aduce alte modificiri, Popunouri 1. (@), Cand nu este ancorats, devine adevaraté varianta (¢). 2. (a). Previzualizarea prezintS cum ar arita pagina dumneavoastrs, In starea curenti, daca ari vazut8 online cu un browser. 3. als, Nu puteti folosi spain denumirea fisirelor care contin pagini Web. (Totus, -NouaMeaPaginaWeb.htm” ar fi corect.) Activitate Incepei si explorat programul Composer a pe un editor. Deschidef un fsier now gi ‘ncepeti si ett toxin el. Vedi ach putel 58 dai seama cum se formateaz3 text (Gugeste Incercfi si flosf butoanele din bara cu instramente Forming) sed = Ora 3 =. es Crearea unei pagini Web ,,la minut“ Netscape Page Wizard este una dintre componentele . generatoarelor de pagini de baz”. Utilizat la completarea unor campuri, permite incepatorilor in editarea Web si {si compund in umat cateva minute proprille pagini gazda. Ca orice Iucru creat pentru sporirea vitezet si a simplititi, Page Wizard obliga utilizatori si fac& o serie de compromisuri comparativ cu alte variante de editare. Este asemanator unui aparat fotografic de tip Polaroid: nu se pot face prea multe cu el, rezultatele obfinute nu sunt sgrozave; sunt confuze si fd aspect profesional, Insi se obtin aproape instantaneu. Cu toate acestea, Page Wizard nu poate fi depasit ca viteza si simplitate gi ofer’ incepa- torilor o cale foarte comoda de a se obignui cu elementele Web inainte de a trece la tehniile de editare mai pretentioase (si mai eficiente) care sunt descrise mai térziu in aceasta carte. Un alt aspect important este cA sar putea s8 alegeti Page Wizard pentru a rea o pagina cere sf serveasca drept material brut (,argil’ Web"), aceasta urmand a fi editatd si dezvoitata folosind tehnicile pe care le vefi invata pe masura ce parcurgefi cartea, La sfarsitul orei veti putea raspunde la urmatoarele intrebari: 1 Ce este Page Wizard si cum se porneste? Reprezinta Page Wizard solutia potrivits pentru dumneavoasts3? © Cum se creeaz§ in Page Wizard o pagin’ nou’ cu text, imagini si toate celelalte elemente? Ces face cu pagina la sfarsitul editiil? Ce este (si unde se afla) Page Wizard? Netscape Page Wizard (wizard=vrdjtor) se aseamand cu vzijtorul din Oz: se numeste vrijtor si pretinde sa fie unic, dar in realitate nu este asa. Totusi, in final (cum se intémpla si in poveste), Page Wizard va furnizeazi cvea ce dorit Sunteti familiarzat cu astfel de module ,vrijitor”. Ele au o interfatd prietenoasd si rutine automate care va conduc de-a lungul operafiunilor complicate, cum ar ft insta- larea sistemulut de operare Windows, crearea comenzilor rapide sau instalarea pachetului de programe Netscape Communicator. Din punet de vedere tehnic, Page Wizard nu este un vrajitor de Windows, Desi serveste unui scop similar, nu aratl si nu se comport ca an astfel de vrjitor. Elvi aj et eeaio pagina de bazd simpli per- sonalizats. Page Wizard este o pagin’ Web stocatd la urmatoarea adresi: hetp:/hone.netscape.con/ome/go1d4,0_vizard. htm) 36 Parta | Primi pas, prima pagina Web Este indicat sa folosesc Page Wizard? ‘Cand completa spaile goale din Page Wizaed, date furizate de dumneavoastrd sunt amplasate automat in poze corespunzatoare,intr-un sation (lemplate) al unei pagini Web. Sablonul nu este nici mai mult nici mai putin dest o pagind de baz foarte simpis si clas bon. Un gablon este o pagind Web finalizatt pe care o puteiedita st Feronalzn penta aca pop gid nin inp mal a sr decit daci ai incepe de la zero, Vezi Ora 4, .Crearea rapid a unei pagini originale ca sjutorul uni sablon Desi intioducerea altor date conduce a modificareacon¥inutuli organiarea paginit imine aceeas!indiferent de ceea ce tastal in Page Wizard. Page Wizard vi oferi posi bilitatea de a stabil nftisarea poginil prin alegerea unci textun pentru funda, a culorit textulul,precum sia marcaeor de ist sa lnilor orizontae (cu toate ch aceste opr de formatare as inconvenient, dups cur veti vedea mai tirziu in acest capitol). Insa aranjareaelementelor de text in pagins rimane neschimbat orice fi face. Tate paginile ‘create cu Page Wizard arata la el ~ diferd nurmaiconginutul (vezi figura 3.1). Sablonul uilizat de Page Wizard este proiecat pentru o pagind gazda personal si este eficient in acest sens, char dacd este cam redus ca dimensiuni sexcesiv de simplu Prin citeva aleger creative in timpul completari, urmate de o ugoara ajustare a paginit in Composer, puteti utiliza Page Wiad si la crearea unei pagini de afacen simple Foun eae pag de bce Pag pl est i Nee erorrtrsen grag ate cts | Die Wand = ome : setts ia i afer hot ick y Peaevons oman ost Putt win Page Wizard a nighabarea rapt a uel paging cre, ulterior, o pute nde fia tn Compose. (Chior daca ar trebui si utilizati Page Wizard in functie de scopul urmarit,organizarea generald a paginilsezullate este suficent de apropiati de ceea ce vreti s8 obtineti. Daca doriti ea pagina si alba un aspect cu totul diferit sau intentionati si elaborati un ra 3: Crearea unei pagini Web Ja minut 37 document Web format din mai multe pagini si figiere legate intre ele, ar i mai bine si treceti direct la ora urmatoare. Utilizarea modululul Page Wizard Modlul Page Wizard este utilizat online, Nu puteti si descarcati pagina Page Wizard 41 s8 o utiliza offline, deoarece Page Wizard va creeazA pagina preluand datele pe care le introduceti online gi prelucrandu-le cu ajutorul unui program aflat pe serverul Netscape, Remarcafi ci desi faceti editare, lcrati cu Page Wizard in Navigator, nu in Composer, Nu este necesar 58 deschiceti programul Composer pang cnd mu afi salvat pagina finalizats, aga cum se descrie mai tarziu in acest capitol ‘eemeteor pe cae le poate cone pagina: til, subtlur,paragrate gale. Datort soapuu titan mouluui Page Wizard, acest elements sunt autoexplctive si, pentru 2 ‘cata pagina, nu trebuie 8 ti prea mute despre semnifiaia denumirlor lor. (Orica, cin vf trece la pate aaa acest car, Tur, txt gl abe, vol descopert db ferare element cntro pagina Web jaca un rol speci, unis gc stablirea denumior sl utlia elamentelor pagilconsttuieo part importants a invari compunet gi edtarit Baginlor Wed. Pe misurd ce urmaf instucjiuie de crearea unl papi, vl inn dferite denarii ale ———— ‘Asemanea unui numar tot mal mare de pagin Web, si pagina prelueratscu Page Wizard este foxmata in ptr cadre Fiecerecadryapae cao mid fereasrasepaat. Vet wala cum s4 ‘cre proprilepagn Web formate dn cade In Ora 18, imps uel pagint i cadre” De facut: Pomiti modulul Page Wizard 1, Deschideti programul Navigator si conectati-va la Internet. a v at papind sau pagin goad ~ été vere Navigator este duschisg! sunt conectat g Sind cca asl, cons pe epi wut poxia do bar Nesp, 0 heen 2. In Navigator alegeti Fle, New, Page from Wizard, Aceasa i indicd browseralui vd coneceze I Poge Wizard. Ezranul care va apivea va semana cu cel din figura 32 3. in cadrulcetiv(coltul din dreapta-sus), derulaiin sus parteaintroductiva de la Netscape pentru a ajunge la butonul START, 4, Exeenaf cic pe bulonal START aflat in cadrul din dreapta-sus. Pagina va arita ca accea din figura 33. ‘Asa cum este iustrat in figura 3:3, pagina este imparft in tei cadee: ' Cadrul din stanga-sus, INSTRUCTIONS, desce fiecae element pe care il vet crea, Fiecare descrere confine legturi care, cind se executs cle pe ele afigeaza in cadrul de os un formular sat o lista de optim. * Cadrul dejos, CHOICES, constitue spatial in care vefitasa textul din formula. ze (pentru a crea continutul paginil) sau vefi alege, dintr-o list de optiuni, cum ¥ —_siarate pogina dumneavoastra 38 Partea : Primi pasi, prima pagina Web ¥ ™ Cadral din dreapta-sus, PREVIEW, prezinté o previzualizare a paginii. Pe masurd ce veti completa fiecare formular sau velialege una dintre optiunile din cadrul CHOICES (de jos), previzualizarea este actualizaté pentru a ilustra rezul tatul. (Dupa completarea primelor formulare, vet fi nevoit sti derulati in sus confinutul cadrului PREVIEW pentru a vedea portiunea de pagins pe care toc ‘mai ati creat-o.) ‘Fioura 3.2. tac A Nan fin ere rancoecovronToatt eee erat iad ——— Feet = Vice NETSCAPE PAGE WIZARD Eicon iin. Fava. = ae 7 Page Wsand Becton Your Page reece Serene nome pce ea (Ora 3: Crearea unei pagini Web .ta minut 39 in stcpuniteurmitoare sunt descrise maul de completare 2 tutor formulareor gi mod de dectuar a alegsiornecasare complet agin Formarle opjunie sunt preentate in ovinea in cate nan Tm eau INSTRUCTIONS (st8ng3-us). Inteducerea tell etecuareaaeger nu trebue Heute oie. Putei sa der |coninutut carl INSTRUCTIONS si 8 completa pagina mai depart ira completa anu | mite zone. De asemenea, in rice moment pute derla nant apo conjinuulcadrulut INSTRUCTIONS pentru arevedea zonele complotate (pe care le pute modtca sau stege ate don). Rete} in tna cu tei s8 completa tot ce gst Tn Page Wiard. Dac lsati gol un formula, jitorl pur simply serge eementl respect g once text uz pentru a enum. Daca nuvi deangs& modieat oyun tat zona Looks", vor fi uiiate a tale prestabite Jn seciunes Content din cadral INSTRUCTIONS, alegeilegiturile care deschid in cadtral CHOICES formlare de introducere a texts. Parcergefi pas ermtor g 1. Dera cadesl INSTRUCTIONS pina cind vedeti legit give yor page tile 5) (dati un sla pagin dumneavoastra), cain figura 3 Y 2 Bxecuta cle pe legaturarespectv cn cela din fra 34 3, Stergeti txt descripiv care st in formuslar tata itl pagini dlurineavoastr. Page Wizard il vafolos att a ttl al documenta (el care apareinoara de tla a browseruluivzitatoilon), cit sal paginli propriu-zse, plasnd-1in partea de us a acestia cu litere mari, aldine 4. Executai clic pe butonul Apply: Nou tha va aparea in cadrol PREVIEW, cen- vrat in prtea de sus pag (ver figura 33) Page Ware nsrear leo Ire ozonil deasupra desu nroducel. Utero, Ze | vet svea ocala st personatal aspect acestul element 4. Devulai cal INSTRUCTIONS pana cand vedet!legatura type an furoduetion {tastati ointroducere), cain Figura 35 6, Executal clic pe legatura respectiva. in cadrul CHOICES va aparea un formular caacela din figura 35. 7, Stergeti textul deseriptiv care este i a De facut: Introducet! continutul pag In cadral CHOICES va aparea un formular formula si tastafi o introducere de pand la 1000-de caractere. In timp ce tastai introducerea, puteti apasa tasta Enter pentru a intrerupe linile sax pentru a crea o linie goals. in acest fel, putesi crea © introdecere formata din citeva paragrafe (avand, in total, pana Ia 1000 de caractere). 40 area t Primi pasi, prima pagina Web hn fp Rae SRT Frouna 3.4. ceecene Your Page Fe gece 1 mhecwesne nate Tir para oooe Seite. seam oe a : Figura 3.5. Pee Un wit fnalisat | picts te Sam's Musie Hot Links Seen Seber sicadrul CHOICES | Ze Fatpagate ston pregitit pentru trebet ot, senanee ‘ditarenSntroduceri See amt Nes mesnitdicen out (ow trate eagle see haces Suge ounces 2 Page Wizard insereazd aceasta inroducere dp tit, sub forma unui paragrat normal, alinit Ia stinga (vezi figura 3.6), 6. Executali cic pe baton Apply. Nowa introducere va apirea in exdrul PREVIEW. 9, Derulaticadrel INSTRUCTIONS pan cind vedet legtura ad some hot ks {adiiugoti nist legitari fering a in igura 3.6 10, Executat cic pe legitura respectivs In cadral CHOICES va apérea un formar ea aela din figura 36 (ra 3: Crearea unl pagin Wab Ja minut at Y Figura 3.6. pace seeanuaz |) Sam's Music Hot Links (Gu cadrul PREVIEW) | wetetnow Se URL Cte) si cadrut CHOICES | i et ioe regatit pentra Mecraisnreoetrde || amet Sn yrhoe ft met Iegaturitefierbint | mn Ube tw dered camp Webeede He oltad agate fering iginamaacepcam re Seu, ews ewe hoe oe et Me you —S— ‘gulamenucarines Gon tonte wane nics 111, Formularul CHOICES: HOT LINKS va permite sa creatio list marcata care contine legaturi citre alte pagini sau documente. Fiecare legiturs din lista se creeaz8 astfel: "= Stergettextul descriptiv care apare pe linia Name din formular si tastatitextul Care dorfis8 apard in pagina dumneavoastra ca sursd a legaturil (textul pe care trebuie executat clic pentru a activa legatura). 1 Sterget textul descriptiv care apare pe linia URL din formular si tastati URL-ul ‘complet al locafiei in care trebuie dusi vizitatorii dacd executa clic pe textul precizat din linia Name. 1 Executaf clic pe butonul Apply. Pag in pat egitierecaieaoat area M a ] ‘es ot a pea spc nario a Page Wizard insereaztextul din linia Name ea element a istei mareate aa dupa subtitul centat Hot Links (vei cadrul PREVIEW cin figura 3.7) Incontinuare, vet posbilitatea #8 adaugati in ist inc’ otegaturafiebinte (Cepetind posal 11) sau si trecei la past urmtor (Este normal ca lista s& alba cel putin doua legtar ferbin! sa nil una; o isté marcath cu un singur element rata netire) a2 Partea I: Primi pas, prima pagina Web Ora 3: Crearea unel pagini Web la minut 43a Y Se ME cae Fura 37. A aver Legituitefierbingt | Hyovecysrcmalieness finalizate, afisate in ‘dru PREVIEW Set Wehaus o Sam's Musi essoimewt i e)| ‘Se ae Ferme Fre jouipe Rene fre | cant Sarthe rt ay ie Hot Li | es yorcmreapinhst [na rstescdee tl cera d ‘oss Dae Hor Ee isis 1 Boyar pS ok he Ree) 4 1 any inn ee, Wow Yoo) 1 esa Sew 8 Te Spent SSS g ‘Daci ati adaugat olepitrdferbinte gi witeror va hota renunat ta, derulat caéru INSTRUCTIONS pana la egtura peu introducer egturior Fein (edd sore hat inks) execute pe ea penbu a redsctide formularul CHOICES: HOT LINKS. | ao exacut ei pe Delete Hot Links. Seva ceschide an no formulas CHOICES, asemand- tor eu cel din figura 37, | Marcajele de bifare care apac in deeptulfiecreilepitur din std ara cf legatura va ramane ‘in document, Penta serge o eit, execute pe caseta sade vase, Lepatura va tiepatea instantanau ait cin Ist ct in caeul PREVIEW. 12. Derulati eadrul INSTRUCTIONS pan vedefilegitura type a paragraph of text serve tsa conlusion (stati un paragraf sa un text de inch) 13. Executat clic pe ea, fn cadrul CHOICES va apssea formularul CHOICES: CON- CLUSION! 14, Sterget tent desxiptiv cave apare in formar tsi o conchae foomats in mnosimuin 1000 de caractre. Casi in azul lst introdcer, putt apasa fasta Enter pentru a intrerupe ln sau pentru a crea o Tinie goala Page Wizard insereaza conchizia dumneavoastrs dupa setiunea Hot Links, sub forma unui paragral normal, alinat la stnga (vei figura 3.15), 15, Derulai cadrul INSTRUCTIONS pind vedetilegatura add an enait 1ink (inseraio legitura pentru posta eletronied), prezentata in figura 38. 16, Bxecutati clic pe ea. fn cadral CHOICES va apren un forma ca acela din figura 38 17, Formularul CHOICES: EMAIL LINK va permite 8 creaio seranatur care sf. apara in parte de os a paginil cumneavonstrs (vert figura 3.45. Semnatura include so Tegatura spre adresa damneavoastra de post electronica pentru a permite viziato- rior svi trimita un mesa prin posta electronics, Stergels textul descriptiv care ¥ pare in formalar 1 introducettadresa dumneavoastra de poslt electronic. < Devaeuel v Frou 3.8. Introducerea uses senuitur ald Se pee ‘nal orm on Wee Sant orton a dy ie Teer twe concen Web tet yoo ad ewsGescuatihevers Tipeyoneney tine | iritieareett Sector Shoes om as Jreeecereriee anes at 18, Executati clic pe Apply. Page Wizard va construi o semnatura in partea de jos a paginii. Semnatura include sdresa dumneavoastri de post electronica sub forma unci legaturi mailto. De facut: Stabilit! aspectul paginii dumneavoastré, In zona Looks din Page Wizard, avefi posibilitatea si personalizati aspectul paginii lamneavoastra din patru puncte de vedere: 1 alegerea culorii sau a modelului pentru fundal; 1 slegerea culorilor pentru text, legaturi gi legaturi viztate; 1 alegerea marcajelor de lists (pentru lista marcata care contine legaturile fierbinti); 1 slegerea -iglelor (lniilor) orizontale, Retinefi cd au este necesar sé faceti nici una dintre aceste alegeri. Dacd treceti peste ‘optlunile din zona Look, pagina dumneavoastra mu va folusi wuluare sau model de fundal, culcrile pentru text/legitur/legituri vizitate vor fi cele prestabilite pentru browserul vtlizat, iar marcajele de listd si xiglele orizontale vor fi simple, 1, Derulati cadrul INSTRUCTIONS pina vedeti legitura a preset color combination (o combinatie de eulori prestabliti), prezentatS in figura 39. Aceasta legatur’ va permite s8 alegeti un set complet de culori care deja se asorteaza bine, find necesae si alegeti separat fiecare culoare (pentru fundal, text, lega- tur si legitur vizitate) (Daca dorit si alegeti separatfiecare culoare, sili la pasul 4.) Estencicat ca penta loiturie vette si nu oe floseasd ocular porsonatzat. Ca care ravcheaz8 pe Web au reac condone; ise ateapt cao legtur viztata sa apard peste Tot euloare prestabit a browser a 44 Parteat: Primi pasi, prima pagina Web Y Foun 39, Alegerea nnei ‘conbinafi de cutort Sam's Music Hot Links prestablite aan (Sie Srowred ony Weed york nd SCLC tnd Ihe se 2. Bxecuta cic pe lepitura respectiv in partea de jos a cada va apirea un rind de calor a in figura 39, Reeae opiune include o culore pentra test, una pent Tegaturt si una penirulegaturiwztate toate tre find suprapase pe un patrtel care are culoarea fundalulu- Cele patruculori sunt asortate in mod corespunzito. 3. Alegeli o combinafe de culor executind cic pe ea, (Aci nu exist butonal Apply) 4. Daci mu af ales o combinaie de culor prestabilit sau dack doi si modifica una dintre culorile din combinafia alas, derulicadrul INSTRUCTIONS pana la sta de Tegituri care incepe cu background color. 5, Executafi cic pe unul inte elemente (dite de fuckgrund pattern) pent a afga tin rind de culori asemindtor elu statin cadrel CHOICES din figura 310. Ficuna 3.10. —_ Allegerea culoritor tacts Witentn Sateyrhone ra sty emic Sime Siiracenedauy tava Bevo au SLRS La eyes acne nw at seat tt (ra 8: Crearea unel pagini Web Ja minut” 45 6, Pentru a alegeo culoare,exectai clic pe unl intr patrielee olorate. 7. In scopul de aalege un model pentru fundal,execatafi clic pe legitorabnckground paler (model pete fandal}- In cadral CHOICES va apaiea un rind de calor! Ssemanator celts din Figura 3.11, incitlagitune se ugor de localiza. De aserenea ft ten a slegereafundslull pentru a ‘vi asgura ci text gileturl vor ie in vided faa de aoesta, dar nu vor fi nt-un cone trast zbitor cu al. (Dad se tdmpla 4 nu perepet cul, flo! combinatia preset {ecare autoi programul, daoarece else picep mai bine) @ ‘Cindalegticuoil, increas objet un contrast inte texts cuore de funda, astel ‘Alegre unui mode pentru fndalvaanuaalegereaantoroar a unelculort pent funda S ‘nsdn va afecta culo sabe pentru test, edturiglegstur vate Fioura 3.11, Alegerea modelulsi pentru dat Sam's Music Hot Links and teem “iene Sa yo ye ‘Senteem iteulsreliew teeta fees | = Sc tnatdeetpeaeroe ated cae = ay, anc att 8. Executati lic pe modetol dort. Dup& citeva clipe, in fereastra PREVIEW se vor vedea rezaltatle 9. Derulaticadral INSTRUCTIONS pentra a gt legiturachons a bullet styl (alegei tun model de mare), prezentatan figura 3.12. Modell de marca ales de dumneavoastst va impodobi lista marcats care confine legaturleFerbinti create anterior 10, Executat clic pelegiturarespectva In cadral CHOICES va aparea un rind de rmarcaje dela cain figura 312. Prima optione, o bulin na este un marca) de lista personalzat. Ea reprezinta opfiunea prestbllit, marcajl delist standard in HTML) 11, Pentru a alege un model de marcaj de lista, executat clic pe el v ¥ Fiona 3.12. Alegeren uni ‘model de marca ponte Histd Partea I: Primi pasi, prima pagina Web Pasty, hse at [acter \ be Byoreun chee hee tet toe be ou se Ba ose 12, Derulati cadrul INSTRUCTIONS pentru a gisi legatura choose a horizontal rile style (alege ti un model de rigld orizontala), prezentata in figura 3.13. Modelut de rigld orizontala ales de dumneavoastri va afeca toate riglele orizontale pe care Page Wieard le insereaza automat pentra a desparti sectiunile pagini Foun 3.13. Alegerea wrt ‘model de right orizontal. Fog mst eg yorum ge See parent ‘pee 13, ecu clic pe legiturarespeciv fn cadrul CHOICES va apres o coloank cu modele de nigltorizontala, can figura 3.13. (Prima opfiune,o nie simp, fu esto righ orzontala personalizata Ea repreintsopfiunea prestabilt, Tig orizontala standard in HTML) 14. Pentru a Jege un model de rigla orizontals, executatt clic pe Y ei) 2. Dupi ce ati verificat textul introdus (Ora 3: Createa unei pagini Web Ja minut" a7 Cnc aloge! un marca de sta sau o gl orzontl, pin cadrul PREVIEW gl evatuath | eff | Her otnke aera per tetra de tuna culo anu text aspect penta | leg igi orizomtale st marcjle de sta trebul sas in evidenfa fo fda, dat ru tebuie s iin contrast itor cu funda, txtul sau legate, mcs contastze ire | tte Cn aveti dub, ols opium pestabite (primal mar de st in area slang si prim rit onzonta in eoload), __E—E—Ee—e—ee De facut: Creati o pagina de baz& complet’ 1. Derulaticontinutul cadrului PREVIEW pentru a revedea optiunile ficute si textul tastat. Afi spus tot ce afi dorit si spunesi? Sunteti mulfumit de aspectal paginit ‘dumneavoastra? Adresa dumneavoastea de posti electronica si URL-uile intzo- , acest struc Inalobate oer sugentt cones alle salut care sav jute a stebiivea pul Contin sia mov de prezentare a acest. Detect acs fate bzezt pe rnp unani acepat pind design Cfident st pagnilor Web sau pe cbiclurile aparute ca prvire la modal de orgarizare a parr anumite scopurt page personel, anunfurile de afacer satel Aste, Ubioanele nu murat ct economies inp autorloeincepstor, Te oferdacestora si fant ch munca Tor corespundestandardelr § principitoracceptatepivind stl si Centiutul (Ora 4: Crearea rapid a une! pagin originale cu ajtorul unui sabton 55 Configurarea parametrilor pentru sabloanele aflate online Yarameti in cateporia Publishing case ce dialog Preerences stat in figura 4H tinin princpal de publiorea documenfula duraneavonteh nti pertta ce sunt puezenttstnal detalat i Ora, -Publicarea pain” nn, nine de acoeovea alin a un fer care consine un salon, tebu 8 sigue ete Wats cae de vatcane ce King textul "Keep Images with Pog”. (Ea ete bla fn med prea, dec in ara ex Si care kat modifcat anterior aren, casela de dalog Eclotenees ‘te coofigratdcotespuncitor pent accsarea sblonlah} {Un marca de b fare prezent lings textul “Keep Images with Page i precizeazd pro- _rimulsi Composer's slvezeeventneeimogint inline mpreana ee fgiral HEM Suni cind sats pagina (an salon sau pagind oarecare) pe ene eect online, Aceastagaranteazi prezenia pe PCul dumneavoastrd copier fierlor fc, inca cave ws tir st eine in documenta dumnenvensrs nee inte Etginile din sblon. Psercle gofce sunt salvate in vectorul im cove salva ger FITML) Acelasi mars de ile mai garanteazafaptol cx. ee re mitt documenta dumneavoastr nai server pentra publi, secstla set Baga imagine Frou 4.4, Categoria Publishing aeasetei de dialog Preferences eam: = } Bimmer | ES | seottinentmetnaowenaies fpr | jeter eet ete Co ee fe Unde se gisesc sabloane Pagina cu sabloane implicit a firmet Netscape contine o mare varietate de gabloane, printre care sunt reprezentate paginile destinate majoritati scopurilor (ves! fig Oricum, puteti gsi sabloane in multe locust Multimea de sabloane furnizati de Netscape oferi citeva avantaje specifice, Sabloanele sunt anume preiectate pentru a fi uilizate ca Communicates, avind incluse imbunata- tir ca Utlizarea extensiilor Netscape sia etichetelor HTML 3 pentru centrarea textulu, personalizarca culorilor, fundalur i altele, 56 Partea |: Primi pai, prima pagina Web 1 Seripturi utile (vedi Ora 19, ,Proiectarea formularelor interactive") pentru scopati fobisnuite, cum ar fi afisarea timpului sia datei curente intr-o paginns Web. = Butonul Netscape Now un fisier geafic legat la serverele FIP ale fiemei Netscape, astfel incat viztatorii paginii dumneavoastr au posibilitatea sa desearce ew ugurint’ Netscape Navigator si iil instaleze, dupa care si va viziteze din now pagina pentru ‘30 vedea formatata si pentra a rula scripturile din ea. (Dac& dorit, putot sterge cu tusurini3 imaginen Netscape Now!,) Fiouna 45. Pagina Netscape Templates presentnd legiturile spre fisierele co sabloane + camper Tene "ietatecatce Retineti ca, inainte de a edita un sablon pe care il gisii online, trebuie si salvati o copie a acestuia pe hard- — HR de la Horizontal Rule (right orizontala), Practic, {ind creati in Composer o Tinie orizontals, in dacumental dumneavo eticheta cin, a4 ‘Teoretc, orice browser se poate descurca folosind o linie orizontala, deoarece orice cal- calator poate desena o linie pe ecran (chiar daca o face numai cu liniute de despartire sau de subliniere). Linile sunt 0 modalitate comund de a adauga paginii puting atractie vvizualé side a separa sectiunile logice ale paginii sau ale documentului pentru a face comtunicarea mai eficient este inaers ‘in anumt pagin putt vede in orizntle gratis fumoase, car sa migcdn grag, | Sclipscsau dau mpresa db derlar, Ala nu sunt devant” HTML, cl gin insert area tl dub: de separar ide rumuseare. Veo Ora 4, .Instarea ima | indo sa imagini de funda’) : 98 Partea a tha: Trl, toxt stabele De f&cut: Inserati o linie orizontall ' 4. Pozifionati cursorul in locul in care vreti st inserafirigla 2. Executati clic pe butonul H. Line din bara cu instrumente Composition sau. alegeti Insert, Horizontal Line. Linia va apsrea in punctul de inserare, O puteli lisa aga sau puteti sii modificali aspectul alegind Horizontal Line Properties, aga cum este descr in continuare ‘Dupi ce inseratio line, pute si-i modificali aspect editind propriettile. Privit figura 8.2 pentru a vedea cum pasii desctisi in acest exercitiu pot crea iferte stiluri de lini, 1. Executati dublu-clic pe linie pentru a deschide caseta de dialog Horizontal Line Properties (vezi figura 8.1). v [ De facut: Formatati o linie v Frou B.1. ‘Stabilirea proprietafilor tuned lind orizontale iors ae som ae ip a ca edn rope ne pu il case de tare Soe area ae saat panty asa acest congue ea resi, Cth prox sep eicuebetlel Lr ewe ine cu pope pcx aor leah sat 2. cimpya Fight introduce roses linc exprimat in pel Grosimes tera este de 2 pnt semana o line foarte subfi, darviabis(le- Poet ut, Sait ape in cmp Width mimes ie, ub forma wn procent din Litimea ferestrei programului. Navigator ‘Valoarea prestabilit’, 100%, creat desnancs uel lin canto pore a feesta ncealat, Vataren 50% cls desenarea uel ini avin lnghnes egal cu umatate in lfm forest 4, Eeceutati clic pe unel dine butoanee din zona Alignment pentru a alin igh Pa eeatar pentru oceatra sau pentru ao ania la dreapa (Ae bce, Centra arat cel ma bine), Bolom Eta BTL din caseta de lalog Horontal Line Poperies vi perma si adaugai 8 fine tibtesuplimentae pin ceca eotare a codll HTL ve Ora 17, tara coor tar 4, Pentru a crea o umbra sub linie astfel neat sd para tridimensionalé (vezi figura 83}, bifaticaseta de validare 3D shading, ‘a 5:Executati clic pe OK. ra 8: Organizarea textuulfolosind tabole gl rigleorizontale 99 Tabelele Un tatelindifernt de loculin cate apa, este ocaitate de informati ara $eolonne Gilade ni cdoone fofmesel cule near pute arrj tet Bi, CENT ON demineseu | | Celula. Intr-un tabel, caseta formati la intersectia x lini L tunei coloane cu o linie se rnumeste celuld. Celula confine materialul tabeluui, sau datele. ‘to clu pute intoduoe text sau imag. Inc pu apn. Vel ata cum se introduce o imagine it-o Cu toate clini, coloaele i dateereprezi , tele reprezinth minim de elemente necesare Orica tabel un abe mal elabrat conn alte elemente (vel figura 2 stale clement (vat figura 83). Poa Sensi ater de ine sade clan un lyst desapra se ede tonne Tin de chem (ore) enre spar pe re celle pentra a forma o gril. Reyinetic&lnile de chenar pot cise astel init dale din celles apa organizatefrumos pe lin colon neincasetate (vezi figura 8.4). parson Ce eee Tablas sunt deebiee transparent, cence inteamnd cl fundalul pag ' cee ce inseam il este vel in Zoneleneacoperte de date side gril, nsh pot ave funda propetu (vel figura, 85). Acstaacperk numaifandall pagin, dale gla rida visti 100 Partea @ tha: Titi, text si tebeto Frou 83, Elementele unui tabel (i toate sunt necesare): lini, coloane, elute, date, indi de chenar, ttt, ‘anteturide inte st ‘anteturi de coloand a “ater fam a teat rar ties mecca este ae Total [DOE it Fauna 84, Un tabel ale carué Tinté de chenar mu sunt vizibile (END p Hone She Shep 2 95 ads met 2125 Cie Tg Page 058 itso multine de lurur pe care le pute fce pent a ormatatobelele dup ponturledumnesvoast. Nu ual tae formotarslabelr dumneavosset Scpinde tm mare mdaura de browseral cae le afgeah. Dinensiuneaceullor este cafeulats automat in funclle de mumaul de cloonesde ungines connate din cette. Latina coloanlor ete dterminaté de spatial neces aii celle ca confinutl cel ra ung. ind date din clue srt pre ung sau abel are mule coloane, continual celellor poate afgt automat pe mal me anduri peru ca fabeulo Inepain fread Cra 6: Organizarea textullfolosind tabele si rgle orizontale to1 Fauna 85, Un tabel ex funded pro- priw De facut: Creati un tabel in Composer 1. Pozitionati cursorul de editare in locul in care doriti sa facet tabelul 2. Executati clic pe butonul Insert Table din bara cu instrumente Composition (sau alegeti Inset, Table, Table). Va apirea caseta de dialog New Table Properties (vezi figura 8.6). [seta de lg Ww able Propo are val prestait pentu oh pana] Patel, pur simp, s ada tsa Enter pentru a insera un tabel simp, prasad (0 lie i doudcolane, ar mai tira, sag 3. Stabiliti dimensiunea si celelalte aspecte ale tabelului completind cdmpurile din caseta de dislog New Table Properties. (Refineti ck nu trebuie si formatati defi- nitiv tabelul acum; puteti si modificati mai tirziu orice aspect al tabelulti, chiar si numarul de lini sau de coloane, conform celor ce vor fi descrise in secfiunea Formatarez unui tabel in Composer”) Puteti stabili urmatori paramet ‘Number of 1ows/Number of columns (Numarul de lnii/coloane) ~ Introduce in fecare cimp un numér cuprins intre 1 si 100 ‘Table Alignment (Alinierea tabelului) ~Pozitionati tabelul pe pagin@, aliniat la stinga, la dreapta sau centrat, Include capton (Include titlu) ~Bifati aceasta caseta de validare pentru a adiu- 888.0 casetd cu text speciald care si conting tthal, Executati clic pe butonul Above Table pentru ca ttl s8 fie pozitionat deasupra tabelului sau pe butonul Below Table pentru a-l pozitiona sub tabel Sin ee ce asa Foe ease mut evident In mod prestailt, chenaral belli est iit hire gegen negra Fiouna 86. Inserarea tanh tbe now Dent avedea cm art abe In configutaa caret. Butonu App nu inch case de Pe misurd oe compa cdmpurie da caseta de alo, pute execu clic pe buon ADply ul arta eur doi, excutth ‘ig, det pul continua persnaizarea tabu. Can tabel the pe OK pentru afchide caseta de dialog. cepang Cling ct le men (sr eit ede Sn, a Tinea tbe (Tae wih) tien minima a acest (Tate min. eight) po ex ‘motveleprezetat noel anterior, est mai bine s8 evita exrimaea in pie: 24 imate su fora un procent di mérmeaferstel sau a uno nur de pel. ns din tncepte Semele mi, cum surtgosimearilor oot grosimea fr de chenar [Eerie ere A eee “able width (liimea abetalui) in mod prestabiit, tabelele sunt intinse pentru a sane tdesime ferestra i care sunt afigate- Dac dori ca tbe fle mai oe ets devtiare Tose width introduce in cimpul din stnga text lui "% of window” o valoare mai mica decat 100. Gra 8: Organizarea textululfolosind tabele sige orizontale 403 ‘y Table min. height (Inljimea minima a tabelului)~In mod prestabilit,naltimea tabelului este determinatS automat de confinutul su; cu cat sunt mai lungi datele dln cele, eu atit mai hang est tabelul. acd dosii ca tabelul si aiba o anumita {nltime minima, chars alune cand confinutul su mu necesits nalgimea respectiva, bifaticaseta de vaidare Table min. height, apo introduceti o valoare in cimpul din stinga tecului “% of window. (Pute(i introduce o valoare mai mare decat 100, deoareceviztatort pot dezula continutul feresteei) Equal colurm widths (Coloane de aceeasilatime) ~ Browserele ajusteaza automat 1afimea fiecdei coloane alateft este necesar ca datele din celulés8 incapa. in gene- ral, o coloani va fi afigat avnd litimea suficient de mare pentru a gizdui cel mai Jung continut de cela. Daca doriti ca tabelul dumneavoastra sa aib un aspect segulat, ca toate coloanle de aceeasiltime indiferent de conginut, bat aceasta caseta de vaidare 4. Pentru a adauga un fundal tabelului, configurati parametri din sectiunea Table Backgrouad a easete! de dialog New Table Properties, (Acesta va acoper toate zonele prin care rizbate fundalul pagini.) Putei stabili urmatorii parametri Nu pty uza prea o culoare $0 imagine petra funcla tell, deorece ‘imaginea scopes culerea Use Color ~Plaseaza in spatele tabelului o culoare continua. Dupa cé bifafi aceasta caseti de validare, executati clic pe dreptunghiul din dreapta pentru a derula un ‘meniu de culori din care sa alegeti culoarea dorita. Executati clic pe unul dintre ppatratele colarate sau pe butonul Other pentru a deschide o paleta de culori pen ‘tru crearea ¢ alegerea unei culori personalizate, Use Image Introduceti in acest cmp calea gi denumirea corespunzatoare fisierului care confine imaginea pentru fundalul tabelului (sau executaf clic pe butonul ‘Choose Image pentru a risfoi dupa un fisier grafic). Daca imaginea este mai mick decit tabelul fundalul tabelului va f format din copii aléturate ale imag la fel ca in cazul imaginii folosite pentru fundalul paginii. (Pentru a afla mat multe despre imagini, cit Ora 13, ,Obsinerea (sau crearea) imaginilor pentru pagina Web” ) upd aiara tall nou, vai observa un caroa cu tn nterupe care indie line de ‘chena {acd nu ai ls cael fe agate) sf ocaset decent cu Ini interop pentru ti fad af stat ca tabell sald tu). Aceste in apa nual in Composer pentru a inca abelu, no vr apérea gl atunc nd fserul ese vizwszt cu un browse. 5, Dupa ce ai completat caseta de dialog New Table Properties si afi executat cle pe OK, in document apare un tabel got. Completati celulele sau formatati ‘4 {abel conform celor prezentate in sectiunile urmitoare Introducerea datelor in tabel Dupa ce afi creat lniile si coloanele tabelului, a vent timpul sé introducefi datele in el (6125 dati un tu, dacd ati ales s& fe creat unl), 104 Partea a Ila: Titus, tots! tabole (celui care nu introduce nimic devine o celui bed iil cenaruui uel ele ‘bore ruse vid, arin patel el fndatultaeluu nu apare~ este ca cum cau respac- fed naar fae parte din tbe lta in aceasta oF, ve! descoperciteva modal dewtizare a eller liber a crearea unoretecte. Deocamdsta isd, retin cl trebue snout cava in fleare cla pn a toate nile de chenr seagate corspunzitor funda abel s& apara pe nega supraal a acest. Dacd exist veo clu n cae fu ae mic do introdu, ts {afin e un spt casa nu le Gols Introducerea textului gi a titlurilor Pentru a introduce text intr-o celula din tabel, pozitionati cursorul acolo executind un clic in celula. Dup& aceea tastati ce doriti— este atat de simplu! Pentru a adsuga titlul, ‘executafi clic in caseta incadrata cu linie intrerupti corespunzitoare zonei pentru ttl, pot tastafttlul dort. Dupa ce afi terminat de tastattextul intr celuls, apasatitasta ‘Tab pentru a sir a celula urmatoare. ‘Daca textul tastat depaseste latimea coloanei, va fi intrerupt, iar o parte din cuvinte vor {rece automat pe randul armitor, ca si cum celula ar fio pagind in miniatur’. Reinet totus cd textul nu este intrerupt decat intre cuvinte; dacd tastaft intr-o celulé un cuvant ‘excesiv de lung latimea celulei se modifica automat (si, prin urmare, litimea intregii coloane) pentru a putea gazdui text. ‘De fat, ttl pe care tata pe post de tu ru ebuiesreprezinteneaprat unit, oat fun anu text care oni s fle atiatdeasupra su dedesubtltabalti. Pentru a incepe un paragraf nou cand introduceti text intr-o celula sau in caseta de titlu, putefi apasa tasta Enter. De asemenea, utilizind aceleasi tehnici de selectare si for- ‘matare, puteli aplica aproape orice tip de formatare a textului pe care o putefiaplica altundeva in pagina Web. Mai precis, puteti aplica ' Fonturi si aribute (bold, italic, color gi asa mai departe); '= Formatarea lstelor (marcate, numeratate si imbricate}; 1 Alinierea (la stanga, la dreapta si pe centru); 1 Indentarea, tet contol alte pe orzontal a stnga, a Sreapta gi pe centr a text date cau uitzind instrumentleobisnuite de formatare a te din Compose (Dvonul Aigement sau Format, Aign). i plus, pute controla poi pe vertical a texull In cau — sus, moc gl os~ cn intermedi casa de dialog Table Properties CCeea ce trebuie rejinut cu privie la aliniere si indentare este ci formatarea se face rela- tiv la celui, nu la pagina sau la tabel. De exemplu, daca centratitextul dints-o celuls, textul este pozitionat in centrul celulet, nu in centrul tabelului sau al paging (Ora 8: Organizarea textuli folosind tabele si rgle orizontale 105 Formatarea unui tabel in Composer ‘Dup’ crearea tabelului siintroducerea dateloy, sar putea si fie necesara ajustarea sa prin adaugarea de lini si coloane, modificarea grosimii linllor de chenar sav perso- nalizarea lui in alte modus ‘Cea mai mare parle a formatarii unui tabel se face din cele trei sectiuni ale casetei de dialog Table Properties (vezi figurile de la 87 la 89), Pentru a deschide caseta de dia- Jog, mai inai pozt:ionafi cursorul de editare in tabelul, linia sau celula pe care doris s8 co formatati, Apoi alegefi Format, Table Properties. ‘mouse lu deasupra tabelly, iel sau cau pe cae dri sé ofarmatah, se execu g Casa de ilog Table Properties mai poate i deschis ate: se pozyoneazaindcatoru cic-dreipta ge alg proprietie tbe dn menial contextual, Dentru a vadea cum arattabeul in configura curent.Butonul Apply nu nchide caseta de g Pe mas. ce completa cémpurile din caseta de alalog, pute execute pe butonul Apsiy ‘log, Sci pute continua personalzare abel in echunea Table (ver figura 87), pute modifi oricaredinizeopfiunile ave Ia create abel Opiuile din sectunea Table sunt identice cu cele in caseta de dialog New Ibe Properties. Frum 8.7. Seefiunea Table din caseta de dialog Table Properties {in sectiunea Row (vezi figura 8.8), putelistabili ambele tipuri de aliniere, pe orizontala sipe verticalg, accnfinutului celulelor de pe o linie (valabilé atat pentru tex, cit si pentru imagini). Opfiunile din zona Horizontal Alignment pozitioneaza confinutul re- lativ la marginile laterale ale celulei, iar cele din zona Vertical Alignment relativ Ia mar- ginile superioara ¢.inferioara ale celulei. Optiunea Default, disponibila la ambele tipuri de aliniere, pistreazi alinierea existent (aplicatd anterior). 106 ‘Partea a tea: Tui, text si tabele g Pall asta meatball prin ragere si plasare cu mouse, Dupd ce poafona india forul mouse-ultdeasupr chenarl tell pe Tinie din sting sou pe oma dn eat, 81 indicstrul se transforma nto sigeat cu dous visu, execute ch i tape cu mouse pena a ngusta sau a rg taell Foun 88. Sectinnea Row din caseta de dialog Table Properties Frouna 88. Sectinsnea Cell din caseta de dialog Table Properties iipes Finn fr = {In sectiunea Cell (vezi figura 8), pute stabil alinierea corespunzatoare unei celle fr a afectacelelalte cele de pe linia respect. Tt aici mai puteli configura urmatorit paramets: 1 Cell spans (Celula intinsd) - Permite crearea unei celule care se intinde pe mai multe Tinii st coloane (vezi seciunea .Crearea tabelelor cu aspect neregulat”) (Ora 8: Organizarea textululfolosind tabelesIrigle orizontale 107 1 Tox style (Still text) - Utiizat acest caste de validate pentru a apica una dintre cle dou (sau ambele) stir de text optional, special desinate confinutulu din tabele, Header syle efoloseste la ingrogareaanteturilor de coloand sau de lini. Nonbreaking fae ea browsercle sin inferupsrindul de text inte cuvinte gi i Continae pe lniaurmatoar. Ale spus, obliga tabelul si extind coloana respectiva pentru co textal din cell s8ineapa pe un singur rind, chiar dach est format din nai multe cove 1 Cell width (Litimea celui ~ in mod prestabilit, stimea ceulelor dint-0 coloana fete determinatt automat de etre browser in fanctie de cella ca cel mat Tang, onfinut din oloand.Inroducind o valoare pentru lajimea cele (exprimata in pint sau ca procent din litimea intregul abel, putei face ca cela (3 coloana Enreo confines sig pstrezelafimea impusi,indferent de confinuul e 1 Coll min. height nltimea minima a cele’ ~ Precizeaz8 onatime minima (expri- trata in piellsau ea procent din indllimea tabelufs) a clued selectate,iniferent de Contino aceteia Anteturi de coloana si anteturi de linle Ce este, de fapt, un astfel de antet? Ei bine, este un text formatat diferit fati de celelalte date din tabe, atl incat si nu fie interpretat ca facind parte din datele tabelului, cica o eticheta care deserieo linie sau o cofoana (vezi figura 8.10). ‘Acestea flind zis2, puteti crea anteturi de coloand sau de linie aplicind o formatare tunica textului afat in linia de sus sau in cea de jos (anteturl de coloana) sau textului aflat in una dintre coloanele laterale (anteturi de linie). Aplicarea atributelor Bold sau Italic, utilizarea anui font difert, crearea unui fundal propriu celulelor care contin anteturile, alegerea unei anumite culori pentru text sau: toate acestea la un Toe sunt cciteva modalitai simple de creare a anteturilor. Daca doriti sé o luati pe calea tehnicd, putet utiliza caseta de dialog Table Properties pentru a aplica celulelor respective adevératele etichete pentru anteturi de tabel. Selectati cehula (au Iinia) pe care dori si ovutilizati ca antet, deschideti caseta de slog Table Properties, alegeti sectiunea Coll sibifati caseta de validare Header style, Fura 8.10, Anteturi de coloana pide lnie retest sae 108 Partea a t-a: Tir, tox i tabele Sas ERG | vilearea opiuni Hacer sty oin caseta de dog Tale Properties nu va imple s aplea SEF | ceutor spective go ata formatare, e]) Lucrul cu (ind rea un abel conform celor descriseanteroy stabi un nama de tin 3h de coloanesobtnet un tbel care esto gid simatic regula De multe or, ete chiar ce don Fins uneori, dup ce afi introdus nist dat, vet descoperi cd trebuie si adugali sau s8 stergeti lin sou coloane. Alter, ar putea st dori teen un tabelcomples saa nereglt in eave o cell 38s intind pe mal tite lin coloane saa nie st onfnd mai multe sa mai pufine celle decdtcelelalte {in sectiunile care urmeazs, veti invata cum si manipula linille,coloanele gi celulele pentru a rea un tabel care si aiba forma dorita Adaugarea gi stergerea linilor gi coloanelor ind introducetidatele, puoi sri de Ia ocelul a ata aplsind tasta Tab. Aceasta {ast vd deplaseaziprintre clue la el ca och ctitorulu; se misc pe lini dela stanga la dreapta, iar cid ajunge la capatul lini sare tn prima clulé cin parteastanga a Hee urmatoare. Ins ce crede(i? Cand ajungef la capatul ultimet ln si apAsatitasta Tab, apare o nous linieavind cursorul de editare pozifionat in prima cell din stanga, gata pent intro- dacereadatelor. AceastA facilitate vA permite s8 defini tbelul far a $i exact cate Lint va avea. Usliaind tasta Tab, puel introduce date incntinuu pand terminati de intro- dus toate datele. Pe masurd ce facet acest hucru, Composer va adiuga linile necesare. Desigur ci uncori ai putea dors adaugaj coloane sau si inseral lini inte liniile existent, in alt parte deedt la sf@rstultabelulu Wingo al exist un med d ava icone. Sond anno din abl so SEW | ect cic-rearta se alge ree, Table, ow sas eset, Tal, Column | ™ Pentru a adauga olinie, pozitionati cursorul de editare in linia de dexsupra loculi tunde doritisi fie inserat linia si alegeti Insert, Table, Row. Sub linia pe care se afl8 ccursorul de editare, va apirea o linie nous, § Pentru a aduga o coloans, pozitionaticursorul de editare in coloana din sténga locului in care doriti sa fie inserata coloana gi alegeti Insert, Table, Column. In dreapta coloanei in care se afld cursorul de editare, va apirea o coloand nous. Pentru a sterge linile sau coloanele, incepeti intotdeauna prin a pozifiona cursorul de editare undeva pe linia sau cotoana pe care dorit si o stergeti. Alegeti apoi Edit, Delete Table, Row sau Edit, Delete Table, Column, Cind stergeti lini sau coloane, amintii-vl aspectele urmatoare: 0 dats cu linia sau coloana stearsa sunt sterse gi datele din ea © Cind stergetio linie,lnile aflate dedesubt se deplaseaza in sus pentru a umple sgolul eimas. ra 8: Orgerizarea textubi flosind taboo si igleotzontalo 109 * Cand sergetocoloand, coloanele alate in partendreapt se deplasesz8 spre stinga | pentru a umple gol rimas, Crearea unor celule libere pentru efect Celulete care nu congin deloc date ~ nici micar un spatiu ~ se numese celle libre. fn ‘Composer, o celula liber’ aratd ca oricare alté celula, dar fra date. Cind se vizuali- 2ea24 tabelul,celala respectiva pare s5lipseasci cu desivargre; in zona ei nu apar nick chenarul nici furdalultabelului (daca existi vreunul), permifind fundalului pagini s& inst la vedere, Ca in cazul maltor tehnici ce editare Web, oceluld liber8 poate fi interpretata drept -greseala” sau ,efect dragut”, in functie de cum este privits. De exemplu, intr-un tabel «care confine atat anteturi de line, edt si anteturi de coloana (vezi figura 8111), o celula liberd reprezinta o solutie elegant de mascare a celulei incomode din coltul stanga-sus Ficuna 8.11. Un tabel care contine o celuld liberi coll din stanga-sus Crearea tabelelor cu aspect neregulat Privim tabelele ca >e nist grile regulate, insd nu este neaparat nevoie sa fie asa. O celula se poate intinde pe mai multe lini sau coloane pentru a ajuta la obtinerea unui anumit efec, ca in cazul prezentat in figura 8.12. Pentru a crea o celala asemanatoare celei din figura 8.12, executati clic pe celul8, apoi deschidet sectiunea Cell acasetei de dialog Table Properties, Introduceti in cimpurile Cell spans numarul de Init s/saw de coloane pe care se intinde celula. De exemple, celula mare din coful stanga-sus al tabelulu din figura 8.12 seintinde pe doua lini! si pe dou coloane, Oaltd metoda de creare a tabelelor neregulate const in a adauga sau a sterge celule 110 Partoa a tha: Tilur, text gi tabele Fra 8.12, Un tabel cu aspect neregulat AINTIT? Rezumat ‘Un tabel simp este usor de facut. $ aga este cel mat bine s8incepeti: cu un tabel sim plu, Nu va aventuratl prea curdnd in tabele mari si complicate Incercais8 va rezolvat problemelefolosind tabele simple, cate shai in Jur de o duziné de celule, nu numai pentru cd este o metoda bund de a invaja, csi pentru cl tabelelestufonse isi zadar- hicesc raunes dea fi, Acestea din urmé mai mult 2p8cesc vizitatort decit i Informeaza in cele din drm, efi avansa pe curba dezvotél tabelelor spre tehnict taf slide sf mal inteligente Atelier iar i Dispun de nite material pe care doresc sl introduc int-un tabel, ins nu vreau a tabelul mew si poath fi vieut numal in lumea HTML 3. Exist i alte posibiitai? 1. Eat teva metode prin cao pei cea ofct inten tae fe8 a1 Kimi viibil- tatenlabrowserelecompatbile HTMI 3. Conform primel metode,tastat abel in paging (in Composer) folosind spi pentralinireacoloaneor, api i aplicai pro- Daletatea de paragraf Formatted. Aceata it indics browser sd prezinte material Exrun font monospatit sis aigeze corespunzitor patie suplimentare, Nu velt Gispune de lini de chenar smu deo formatare deosebit, inst sproapeoriine va ‘dea ‘abel inclusiv cei care nu au browsere compatible HTML (chiar sce cu broveere care afgeaza numaitextl- O ala solute este si constr un tabe into imagine. Anumite programe de pre- Iucrae a imaginilor (cum ari Paint Shop Pro, cae est inchs pe CD-ROM eare incoeste carta) va permit asta texts il aranjai i slvali ca imagine sau a parte une immagini O alta metod const in creares tn tabelintun program de prelcrate a textelor Sau inteun program de calcul tabelaypecae sf fl pref cuajutoral unui pro- (Ora 8: Organizarea textlui folosind tabolo si rigle orizontale 444 ‘gram de captura a ecranului sisi tf salvatica imagine. Dacs tabelul dumneavoastra este relaiv simplu, prezentarea lui ca imagine este o modalitate bund de al pune la ispozitia tuturor utilizatorilor de browsere grafice. i. Se poate introduce un tabel inten tabel? R_ Desigur in plas, puteli obfine nist efecte interesante utilizaind linii de chenar dliferite pentra tabelul din interior (tabelul ,imbricat”), Putetirealiza chiar si 0 imbricare dutla: sa introduceti un tabel sin tabelul din interior Fentru a imbsica un tabel, creai intai tabetul exterior (tabelul printe), Pxecutafi clic pe celula in cere doriti sa introduceti un tabel, apot pe butonul Insert Table si creafi ‘un tabel procednd ca de obicei, Observs Jimbricat, anumiti parametri difera putin. De exemplu, vet stabil latimea tabelului sub forma unsai procent din celula périnfe (celula care contine tabelul imbricat), sub forma unai procent din fereast’, Minitest Rezolvatitestul urmiator pentru a vedea cit afi reusit s8 invajati Intrebari 1 Linia orizontala si rigla orizontala sunt douf lueruri diferite, Adevasat sau fals? 2.0 celulé care mu confine date si al cei chenar nu se vede este 8. O cella bera b.D exluls dita «0 celula care confine caracterul spafiu, 4.0 celulafeapan. 2. Aspectul textulut dintram tabel se modific8 wtiltzand a Instrumente speciale de formatare a textului din tabele, '. Aceleag instrumente care se folossc Ia formatarea oriirul alt text din pagina Web. Numai mouse-ul. dd. Nimic, Textul din tabel nu poate fi formatat. Raspunsuri 1. Fals, Cei doi termeni definesc acelagilucru, 2. (a). Dacd variasta (¢) ar fi adevdrati, chenarul celuleiar fi vizibil deoarece nu ar fi eu adevarat goals. 3.0) Activitate Uitafi-va la primele dumneavoastré pagini. Unde sunt separdrilelogice ale textului? incercti si insert init orizontale in locurile respective gi observa fect pe care il iv asupra aspect paging asupra posbilti de a0 cit ParTea a Ill-a Referirea resurselor Legaturile Legiturle constitu unul intr cele mai mari mister din crearea de pagini Web. Tate celelateelemente sunt Ia suprafafs dei sunt viibile, gi de aceen true arate corespuneator Spre deosebire de ele, lepiturile trebuie si fac ceva ~ sk actioneze corespunzitor. Legaturle sunt misterioase din cauza ck ceea ce fac in momental cind Sunt activate neste imediatviibil cu och ber, Din fercire,crearea legiturilor este surprinzitor de simp. Tat gmecheria este $8 for mula corect URL-al din subso. in aceosts or va sunt prezentate tote aspectele cu prvi lalegatur. La sférsitl acest ore vei putea rispunde la urmatcarle intra © Care sunt cele dous componente ale unet legaturi? © Unde poate duce o legitura? = Cum se formuleazé URL-urile pentru a referi toate tipurile de resurse Internet aflate la distanta (pagini Web, adrese de post electronic i altele)? Care este diferenta dintre o legaturd relatit gio legatura absoluta i ce importanta are? Din ce este formata o legatura? Fiecare legaturd are doua componente. Crearea legaturilor este o simpla chestiune de alegere a unui loc din paging care trebuie referit, urmata de furnizarea celor doua com- ponente: ' Sursa fegaturii, textul propriu-zis (sau imaginea) care apare pe pagin’ pentru a reprezenta legitura. Cand un vizitator activeaza o legitura, executd clic pe sursa legac furl pentru a activa URL-ul nevazut aflat sub ea, URL-ul care descrie pagina, fisierul sau serviciul Internet care trebuie accesat Ta activarea legaturi Puteti crea meniuri sau directoare de legituri asemanatoare celor din figura 9.1, asociind linilor care reprezinta legaturile proprietatea de paragraf List Item, Dup’ cum putes vedea in figura 9.1, legiturile nu trebuie sa fe pe linit separate. Pateti folosi drept lega- turd orice cuvant sau fraza din pagina, inclusiv subtitluxi (6au cuvinte din subtitluri), cavinte din paragrafe normale, elemente dintr-o lst sau chiar un singur caracter vind orice proprietate de paragraf, ra 9: Legaturile 113 Frou 91 Legtturite(subliniate) situate intext sae singure fntr-un meniu eke Ake Over yrsoae icmp ceed ef ise te sinew eae Sera ath beep cape ones Bea edb Ane KOs tebe ore 1984 Pet yer ten ee ee eee | eae ce tpn tons heey efoto hn eye Sursa legituri preia proprietaile de paragraf de la textul in care este inserat& sau de la cel ing care se aff, insd i puteti modifica oricand proprietatile, ca oricarul alt text. Legitura propriu-zisi nu este afectath de astfel de modificati Ce poate referi o legaturi? O legiturd poate refer orice resurs care poate fi specifcati cu un URL sau din fiere Locale sire de pe serverul pe care se afd pagina care contne legatura). Din acepsta categorie fc parte nu namal paginile Web aflate la distant sau pape a igiercle de pe serveral Web pe care se afla documentul dumneavoastr, ct aticolele din paginile respective, mesjele de posi electronica, precum si serverele Gopher # FTP Cu sirertnt chin incursiuniledamneavoasra pe Web deja af init legit spve stil de O legacura poste duce intnan anumitloe dintro paging Web, chiar fntsun toe din aceeasi pagind. De exempla, intro pagina Web lung, fccare rind din cuprins poate fi o legitur care duce nto anumit seciane a paginil (veri figura 92). Aste vkcator se pot deplsn in paging rapids ujor Locuri din pagina tn eae dc legature se Procedeul decreae a uneilegatur nu depinde de tipul resurse referite de legatur, Catone acesten, xh aspect de cate tbe sine eam cand compunee Olea Pentru egitur, fn secfiunile umdtoate sunt descrse in deta caracenaticlefecteut tip de URL. 144 Pattea a tka: Referivea esurselor Fiouna 92, Un meni (euprins) aledtuit dis legituri spre finte din acelagt docuent To Create a Web Page 24 Borst Pare Ft Steps Ft Web Page (neta ek Atorog > We Bah ad Fy Page vl Tne Put Ms Tie, Tent & Tables Patentandg eb Author Pagini Web Paginile Web sunt resursele referte cel mai des; si asta datorita unui motiv bine inte- meiat: putet fi sigur ¢8 persoana care vede pagina dumneavoastri, poate vedea si alte ppagini. Dec, egaturile citre pagini Web reprezint o buna modalitate de a furniza informati. in plus, permite vizitatorilor sa foloseascd aceleasi tehnici de navigare; directoarele Gopher, de exemplu, fi pot deruta pe navigatorti Web fara experienta. (Gra rai simpli cle de av sigurac& URL este exprimat crest este deal copia det tape Web, URL-urile corespunzitoare paginilor Web incep intotdeauna cu identificatorul de pro- tocol http://. Dupa acesta urmeaza denurmirea serverului Web gazdé, calea spre Fisieral care confine pagina si denumirea fisierului respectiv, cain exemplul alaturat netpi//aonege2a8/cale/tister. In uneteeazas, pute omite denumirea fsierulu, Exist servere care au fisiere presta- bilite pe care le fisenzd in mod automat atunci cind cineva acceseaza several sau un anwmitiretor, fel sf preciat o denumire de fier De exemplu, iets / new. ncp.c00/ acceseazi pagina presablits de pe serveal wwv.nep.con iar netps//uw.nep.con/psblications/ aacceseaz& pagina prestabilits din directorul publications de pe serverul ww.ncp com, (Observati cl exemplul pentru director se termind eu caracterul slash (/). Trebuie 58 inchéiti cu acest caracter de fiecare dat cind URL-ul HTTP nu se termina cu un nnume de fisier. Caracterul slash i indica serverului s8 acceseze fisierul prestabilt (de Ora 9: Legéturila 115 ‘obicei, 1Nosx. uM) Exist servere care acceseaz’ fisierul prestabilit chiar dacd omitett caracterul slash, Din motive de siguranta, cind creayi o legatura, este indicat s& folosiji ccaracterul slas. In sfarsit,aveti gril scrieti URL-ul exact cum apare in caseta Location din Navigator ind vizualizati pagina. Multe servere sunt sensibile la majuscule si nu vor recunoaste dlirectorul sau denumirea fisierului daci nu sunt scrise corespunzitor Tinte din pagina (ancore) Paginile Web pot confine locur predefinte care po fi referite prin legit. fn limba} HIML, acestepunct se nuimese acore 3 sunt create cu ajutorul etichetel ~ A de la ancar) In Composer, ele se ntmese tnt, De ce redeli ca fost aleasi drept emblema 4 programa Communicator frumoasa ancorinautici, dack ma din cauza ch are $i Semificaia de fnta Web? Luati-o aga cum este. uted a adiugati inte in propre pagini Web si apot st crea legitur spre ele in alte Jocuri din acest pagind satin pag diet. In pls, pute cred lepatar ele finte din alte paginide pe Web. ind creat ofnts (vezi Ora 1, ,Definirea intelorin paging), denumiti-o. Legiturile care finte se ceeaza asemanator clorcStre o pagind Web, cu o singurd diferent in URL-ul necesar legaturi vei adduga denumiea intel Pentru a refer tne cin ate tere stocate pe aceigl serve, pute uiiza denumir de cae ‘hte. Spe exemply, acest uta va est ui tunel end retro papi a unui document rmutiagin dntvo até paging a aeligi document. (Vedi secliuea urmatoare, denumita fier locale) Fisiere locale La fel cum pute referiresurse de pe orice server, putetireferis esurseaflate pe server pe care se alla documentul dumneavoasta, Este evident cf fel acest Iacra tune! cind crea legitan ire paginile unei prezentari cu mai multe pagin.Ins8 ar Pista a dorifsa seer alte rears alate pe serverul Web local (cum sun alt docu ment Web sauun fiir text) scare eonfin informa in egaturs cu subiectal pag ‘iimneavoast Dic punct de vedere tei, denumiri de cle pe care a introduet pentru a crea legatu cv iierel locale nu sunt URL-ut Tots, cd erat ologtur,Introguce aceste i ale To acl oc care afi introduce URL-u de referieaunelresurse alt a isan. in acest moti el sunt denumite generic tot U Cand formulati URL-urile pentru a crea legaturi citre resurse locale, trebuie s& avefiin vedere diferenja dintre denumirile de cale relative si denumisile de cale absolute, 116 Partea a Ila: Releriea resurselor Denumirile de cale relative Denumirile de cale relative contin numat informaia necesara gisirii resursei referite pplecand de Ia documentul care confine legatura. Cu alte cuvinte, calea spre resursa este data relativ la fisierul care confine legitura; din afara fisierulul respeciy,informatia, furnizati pe post de URL nu este suficient’ pentru localizarea fisierului care contine a4 ‘De exemplu, sé presupunem ci toate paginile unui document multipaging se afla in acelasi director de pe server si c3 denumirea uneia dintre ele este FLORIDA.HTM. Pentru a referi FLORIDA.HTM din orice pagina a documentului,trebuie s¥ introduceft ca URL al legiturii numai denumirea figierului. De exempt, ‘acd pentru a va publica documentul pe server folosi utonul do pubicae din Composer, ru trebui sv ace gil cu pve ta denumicle do cale role sila. Dupd cum ve va in Ora 21 .Publiczea panini, Composer se oud de ces acy in md automat ‘Totsi, penta vea control deptn asupreproptuui poset Wed g pene a putea reolva ‘fee problems care ar putea aprea, este importants iojelage prince care stat baza avastor denumi de cal, FLORIDA. ‘SA presupunem ci toate paginile in afara de prima, se afld intr-un dosar sau director , pundnduci eticheta message ID. Pentra a forma URL-ul,utilizati deserip- toral de protocol news: urmat de identiicatorul de mesa). Remarcatic& acesta nu se incadreaza intre cacacterele < > sic nu trebule sé include in URL si denumirea grupului de stiri ‘ews :D96018, THsdeshaw.com Fours 9.4. Antetul unui articol de stir’ din Collabra. Se pot vedea atat _gripele de stiri carora Tea fost transmis, mesajul, cat st identificatorul de mesaj ‘Dane Wed 18 un 987 21656300 Orewinio Nee Topte MeeMukegatincat Ora 9: Legaturile 424 Post URL-urile postale se gregese cel mai rar Tastafinallto: urmat de adresa de posta elec tronied. Asta-i tot. (Remarcati cd URL-ul postal nu confine cele doud earactere slash uti- lizate in URL-urile HTTE, FTP si Gopher) De exemplu: nai lto:asnel ¢nailserver.com 2H Inne a fotos ni legato alt adrest de post electronic cect adress =f! | dunceavoatea ert pormisiuneaadresantul, Leghtuileasito: sunt utiizate cel mai des n semnatura din subsolul pagini. (Vet invaja cum se creeazdo semndturd in Ora 10) Inst le putt folosi ound este necesar si le oferitcittoror o modalitate de a contacta pe cineva, De facut: Studia legtturila Parcurgeti pasil urmatori pentru a vedea modul in care sunt formulate legaturile pe care le vedeti online 1. Conectati-v la Internet si deschide|ibrowserul Web, (Folositi browseru ‘Netscape Navigator de pe CD-ul din aceasta carte, sau Internet Explorer. Cu alte browsere este posibil s8 nu putefi parcurge acest past) 2. Mergeti lao pagina pe care o doris localiza in a o legaturd, 3. Ducefiindcatoral mouse-ului deasupra et (88 a executa cli), apot privii la bbara de stare din partea de jos a ferestrei browserului. Acolo apare URL-ul referit de legiturd exact aga cur este formulat in fisieral HTML. 4. Explorai in acest mod galt legstui Incercaj sa gasiti in paginile Web pe care Ie Viztai in mod obignuit legit cre ~ alte pagini Web; te; ~fsiere; ~ directoare FTP; A ~adtese de post electronics. Rezumat Dupa cum veti vecea in urmatoarcle trei ore, crearea legiturilor este destul de simpla De fapt, crearea unei legsturi este partea cea mai usoara, mai ales cind copia legatura dlin alts parte. Partea cea mai grea este formularea corecté a URL-urilor. Acum, c8 afi Infeles toate aspectele legate de URL-uri, in urmatoarele ore vei invita niste trucuri prin care s& Vi asigurati ca le serieti corect atunci cind creati legaturile. 122 Partea aIll-a: Reterrea resurselor Atelier Tar i ned nu mi-am revenit dupa toatd afacerea asta cu cii absolute sau relative gi a inceput si ma doard capul. Nu se poate si rimén ignorant in aceasta privints si s3 sper ef treburile vor iesi bine? R. in anumite limite, se poate. Nu trebuie decit si avefi ineredere in Composer. Cand. creatilegituri catre documente locale, pentru a alege fsierul, utilizafi butonul Browse din caseta de dialog Link Properties; astfel Composer va putea formula ‘alea in local dumneavoastra. Apoi utilizai facilitiile de publicare a documentului oferite de Composer (veri Ora 21), in loc si Vi ocupafisingu Composer va ajusta automat legaturile citre figierl local stv. toate fisierelereferite, astfel incat legaturile vor funciona Minitest ‘Rezolvai testul urmator pentru a vedea ct ati eusit si tnvatal Intrebari 1, Pecare dintre clementele urmitoare le puteti reeri? a. Oalta pagina Web. Un figier (un document Word, de exemplu), ¢. Oadresi de posta electronica. d. Toate elementele anterioare. 2. Care sunt cele dou’ componente ale unei legaturi? 1, Pattea vazuta de vizitator (sosul legaturi) si adresa si/sau fisieruleltre care duce legatura (Ear), b. Partea vazuti de vizitator (bursa legaturi si adresa si/sau fisierul cltre care duce legstura (ORL). ¢ Partea viautd de vizitator (vArful legturi duce legitura (URN). . Partea vizuta de vizitator (sursa legaturi) si adtesa si/sau fisierul citre care duce legitura (URL). 3. Cand un vizitator executd clic pe o legaturd catre o adresa de posta electronica: ‘a. Primeste un mesa) de la dumneavoastri prin posta electronic, ’, Progranul la de posta electronic’ deschise un mesaj now, preadresat citre adresa confinuta in legaturd, . Caleulatorul lui tipareste 0 serisoare. d. Nu se intimpls nimic ~ legaturile de tip mailto sunt un banc ieftin 4 adeosa ican fisierul eatre care Ora 9: Legaturle 423 turd in propriile documente We Bookmarks (dact risfoiti cu Navigator) sau in lista Favorites (daca risfoit cu Internet Explores) o referinta pentru pagina respectiva. Dup cum veti vedea in Ora 10, acest Iucru nu numai 24 usureaza crearea legaturii, dar va si da siguranfa ci veti formula corect URL-l. Ora 10 Crearea legaturilor fn mod intentionat, aceasta este o or& usoar8, Singura dificultate in ceea ce priveste Conran ina rsregtc a s maganeg. ndh or sap etl ey esi mar paren cea naa at 8 eg al etl Imai n tats secret! din spe nop det Or Copierea legaturilor din alte pagini Sie carta ca parece cca ente a er re Tipit in pagina damneavoastra decumentul fini) sub forma tunel legit eta eane tela oarptema a as revo ta eae ca antes 2Eiatemrcara aeik ese in colelaltelocuri din care puteti prelua legaturi, este mai putin probabil a egture ia ngee reece es car ee es ‘upd cum ti legate pot fi atagateunul txt sau une magi. Gu toate acestea vei (Ora 10: Crearea legaturilor 125 Printre sursele din care puteti copia legituri sunt; & CasetaLocaticn din Navigator (in care apare URL-ul pagini curente) & Lista Bookmarks (din Navigator) sat lista Favorites (din Internet Explorer; & Antetul articolulut de stiri din programul pentru citirea strilor; {© Antetul unui mesaj din programul pentru posta electronicd; 1 Oricelegiturl care apare in pagina Web vizualizati cu Navigator af eee ln cpio eur in roa pani, mind maton speci ™ Suna itu este coat dest snc cnd copa eave din Isa Bookmarks a Beran Navistar, sus ep care paren Compsce ele nea oh iy Soca cone itu, dal roster coor a doe ee, in us or (Crd cop un eet dn ise Bosra en oxo} " Lenitua pel pepe de paras parapailin caret asrt sual cat | Caoropa ey toe poe eo cpr pana al || de sxc in njortatea browse, popetiedecaasersusesse ena: || oti pst de area ear De ot ac tea ees on | Aor ea formatarea dumneavoastr sd mascherelegdtur, Agel din tele urmatoare o metod de copiere sia metod8 de lipte pe cave site folositimpreun entra copin " Oegiturd din pagina Web afigaté la un moment dat in Navigator: excct Mlireapta pe UKL-ul din caseta Location, apolalegeti Cops din mesvel ec ntextual * legiturd asad into pagind Web: executteideapta pe legaturt sleet in ‘menial contextual Copy Link Location (veri figura 10.1} * O lepituri care exist in lista Bookmarks din Navigator: deschidei stain Navigator executing clic pe butonul Bookmarks ey Execuali cliereapia pe legaturarespectiva sf slegel di Link Location. * O legiturs cate ist in meniul Favorites din Internet Explorer: alegei din bara de eniur Favorites Organize Favorites. In caseta de dialog Organize fevers vec ati iedreapta pe legitur respectva st alegett Properties ih meniul core gone ApoltatafiCtl+insert pentru'a copia URL-ulin Clpbosea * O legituri care apare in antetul une tir sa al unui mesaj de posh electronic deschidet messju i localiza in antetulaestialegitura respec eet cle Areapla pe legit si alegei Copy Link Location, 126 Parea a Illa: Referirea resurselor entra ipo legatura in Clipboard in pagine dumnenvonst proces aste) 1. Avand pagina deschis4 in Composer, executati clic pe locu! in care dorii si insera legatura 2, Alegeti Edit, Paste (sau tastai Shifts Insert), Fesuna 10.1. Copierea uel logituri in Clipboard executand clicadreapta ag Tein bie vg Aire ad loins directory on | I Jie ip abo Pes bebe Ca variants, patel sit executati clie-dreapta pe locul in care doriti si lipif legatura, apoi sé alegoti Paste Link din meniul contextual. De facut: Copiatio legéturé prin tragere si plasare a 1 Deschidein Navigator pina (ape cakustorl damesavoase sau dis tans), ista Bookmark, grea sau mesajul de pot electronic in ean legatura 1) 2. Deschidet in Composer documenta de destinati a Fy 3. Ararat feresteledeschise pe suprafata de hucr asfel inci fe vzibile Foss O cle dea tacescetlurueste 58 execute dreapta pe un loc ber de pe bara de programe din Windows 9 srs aleget una dine cele doua uni /Tie” (vedi figura 102), Penta a copia prin agers pasar olgturd cle pagina deschisd in Navigator, rage pietograma vorespunestaregapini din cast Location in fereasraprogramulul Composer g 4. Derulaiereastraprogramlui Navigator (nu a drectorulu) pind vedi fora pe care dott o opi — 5. asc cle peer ine aps butona sting mouse age epatra In fren progamulu Composer e urd ce depasal egitara, Frattoat mouse-otvfon forma shel legator pentru a asta ct depos o leita ra 10: Crearea legaturilor 127 Y meer ory Fesuna 10.2, Ferestre aldturate pentru copiereaunet Tegaturi prin tragere UB scan oe Atria _ ‘Besa aaj caer Be, ‘ines Bocas sd bes Acar KOH El] eect ce et ke yee ssiesthcer aan” 43 Ants anv §} PF em 10 of the Ace Motion Picture Shes Bat meme 6. Cand indicatorul de legitura ajunge in fereastra programului Composer, cursorul de editare ii urmeaza miscirile. Daca trageti legitura spre una dintre ‘marginileferestrei, continutul ferestrei va fi derulat in directia respectiv Deplasatilegatura prin pagina pand cind cursorul de editare ajunge in locul in care dori s& inserati legatura, ‘A. 7. Eliberati butonul mouse-ului pentru a plasa legatura, Inserarea unei legaturi no’ 1. in Composer, ecutati cle pe locul din pagind in care dost sé apard letra 2. Executai cic pe butonul Insert Link din bara cu instrumente Composition. (Putlt fie si alegeti Insert, Link fe sf execwtaicicdreapta In Toculrespoetivsie8aleget Insert New Link din meni contextual) Se va deschide sectiunen Link n eneles de dialog Characier Properties, shstatain figura 10. 3. Completai cimpul din zona Link source (cu cuvintele care dori s8 apard pe pagind pentru a repreenta legitura), Dac i isa go, pe pagind va aptrea, ca strain legh- fori, URL 4. Introduces in cimpul Link toa page location or loca file, URL-ul unet resurse aflate 1a distant sao cae local Putt, de asemenea, si executat cic pe butonul Choose File pentr a isfoi dup un fisier focal 128 artes a ita: Reteriea rosurselor ‘ind inser eitud nova, aint dea deschidecaseta de dialog Link Properties, sigur cl ra este evident rm, Testu care este evidenft devine sursa eget ‘eH setunea Tansformare in fgatud a unl text eter, care urea in aceasta ora) | Foouna 103, Inserarea unei legaturi not 5. Executali lie pe OK. Sursa legaturii va aparea in pagina in punctul de editare. Sursa Jegituri este subliniati sf afigatd cu culoarea pentru textul legatarilor, corespunzi- toare paginii respective. Transformarea in legatura a unui text existent Pentru a transforma in legiturd un paragraf existent sau o bucati de text dintrun para- graf (care este paragraf normal, subtitlu, element de lista sau altceva), parcurgeti pasii urmitor: 1. Evilenfiafi in cadrul paginii cuvintele pe care doriti si le utilizati ca sursi a legaturii, 2, Deschideti sectiunea Link a casetei de dialog Character Properties executand clic-dreapta pe textul evidentiat s1alegand Create Link Using Selected din meniul contextual ilustrat in figura 10.4. (De asemenea, puteti deschide caseta de dialog uti- lizand oricare dintre metodele descrse in sectiunea ,Inserarea unei legaturi noi”.) Frouna 10.4, Utilézarea menixlai contextual pentru a teansforma tn legatura tun text existent Observati cd la deschiderea sectiunii Link a casetei de dialog, textul selectat apare in zona Link source (vezi figura 10.5). (Ora 10: Crearea legaturlor 129 Fioura 105, Proprietitile lunet legaturi provenite dintrun text existent Crearea unei semnaturi Serato ceva dct un fel dens de ncheere care ate gba de poster ttre dite ele at lcte vaste se aches ‘Amabild: Comentarii? intrebiri? Trimiteti-mi un e-mail la nsnel1Bsailsezver.com Formala: Daca aveti comentari sau intrebati refertoa contactati-ma laadresa nenelifnailserver.con Eficienta: Pentru raspuns: nsrelJénaiiserver.con Fe Ia aceasta agin’, Desi nu este neaparat necesar, in mod obignuit, paragratul ; vin snuit, paragraful care confine semnatura foloseste propristatea Address. lnsigi adresa de postd electronica este si legatura de tip ‘mailto, pe Langa faptul cS face parte din paragraful cu proprietatea Address. De facut: Creatl o semnéturé 1. Executati clic in locul unde doriti si fie amplasata seminatura (de obice’, la sGrstul paginii sau aproape de el si numai pe prima pagina a unui document camai state pagin) ae aan 7 Q 2. Tastafitextul dort, inclusiv adresa de posté electronica v ana 108, en ag Ber den mow Osemnditurd ‘care are sub adresa de posta electronist o Tegditura de tip mailto ¥ 130 Partea a tika: Referivea resursolor ¥ 3 Stobilitf propricttile de paragraf pentru semnturS (In figura 106 este folosits proprietatea Addres, conform practci standard.) 4. Evidentias numai adzesa de posta electronici si executat clic pe butonul Link din bara ca instrumente, 5. Introduceti in c8mpul Link to a page location or file legatura de tip mailto. De exemplar naslto:nsnelltnailserver.com 4 6, Executati clic pe OK. intaturarea legaturilor ‘Sa presupunem c& dorifi si inlaturati din pagina o legitura, dar dorifi ca textul sursd a Tegaturii sa ramina, Afi putea s8 stergetilegatura sisi tastati din nou textul. Aceasta se poate aplica pentru o legiturd sau dou, ins8 dac’ dortis& eliminati toate legaturile intro soctiune mai mare sau din intreaga paging, reintroducerea textului devine tisitoare, Putetiinsi cS evidentiati textul sisi alegeli Edit, Remove Link. Aceasts metoda da rezultate chiar daca evidengiati blocuri sau pagini intregi. Daca procedati astel, vor rHiméne sursele tuturor legiturilor si vor fi inlaturate legaturile de dedesubt, impreund cc sublinierea si culoarea corespunzatoare legiturl, Numai findca puteti crea legaturi citre orice loc, nu inseamna ca trebuie si o gi facet. Paginle care contin legaturi {ard rost nu sunt mai utile decat cele fara legaturi Veriticati cu grid fiecare loc catre care crea legitur. Este cu adevrat util cititorilor? Fornizeaza informasii noi sau pur gi simplu repeta ceea ce exista in locurile referite anterior? Par sa fie pe un server bun sau se ala pe unul incet sau adesea inaccesibil Dumneavoastré nu trebuie si le furnizat cittorilor cét mai multe legaturi ol trebuie si Te dati posibilitatea de a alege. Ca s& nui mai pomenim ca trebuie s& veriicaf,s8 actuali- ati sid completat cat mal des leyaturile existente, Procedati astfel yi vieitarit dum neavoastré vor reveni adesea! Atelier iar f Daci vreau si ofer un acces rapid spre resurse care au subiectapropiat de subiectol paginil mele, pots creezo legatura direct citre o catego director Web, cum ar fi Yahoo sau WWW Virtual Library? R Desigur. Multi oament procedcazi atl, Ca inotdesuna, este bine 8 trimitft ‘Webmasters un mesa prin poja electron isa cere permisines. dintrun Ora 10: Crearea legaturilor 434 {general in jerarhia de directoare € vizitatorului s3 coboare in ierari incercafisA nu fii prea exact. Referiti un punct cu caracter mai are tin de subiectul durmneavoastra si datic vole ie spre ceea ce il intereseaz8. Directoarele cores- Punzitoare categoriilorlargi sunt destul de stable si raman in acelagi Toc an la ‘ind, Directoarele care au confinut cu specific restrans pot s8 dispard sau sa i zabile. Minitest Rezolvaitestul armétor pentru a vedea cit af Tntrebari ate la niveluri mai mici) schimbe denumirea, iar legaturile spre ele devin inutili- i reugit s& invatagi, 1 Textulul corespunzator unei legituri de tip mailto, trebuie sic atribuiti proprietatea Address. Adevarat sau fals? 2. Pentru a crea o legatura in Composer: 1, Ducefiindizatorul mouse-ului deasupra Insert Link i introduce in caseta de dil b, Evidentiai un text existent, executai clic caseta de dialog numai URL-ul. © Citi Ora 1¢ pentru a invata cum se insereazd o imagine si legatura Lunut loc liber, executai clic pe butonul log atét sursa legaturii, cit si URL-ul. pe butonul Insert Link si introducefi in um se transforma in 4. Efectuatioricare dintre operatiunile anterioare, 3. Cea mai bung cale de a va asigura cB URL-ul este corect si actualizat este: 2. Si evitat reeritea nei ddacd mai ext . Si ereati legstura preluénd URL-u! din $8 verificatiortografie URL-ul 4. Sa efectuati oricare dintre operatiunile an’ Raspunsuti 1. als, Textl une: legaturi de tip mailto poate fi formatat dupa bunul plac. 24d). m Bt 3.0) list o scurttura pentru ca sho puteti gi! sor agin " a Navigator o nou tts Bookmarks, special esti Sle reer in vitor Cand navigai pe Webs itd ost pagini dacd nu o vizitati in fecare 2i pentru a verifica pagina respectiva prin copiere si lipire. terioare, paginilor pe care doriti Alnitio astfel de pagina, adaugati in ‘cand adaugati legituri in propriile Ora 11 Definirea tintelor in pagina Dac page Web arf cn ir legiturile arf fle din catalog de intl ar 6 seme dca, It expctia compara cs elementeednt-uncatlg de lets vl con- estve care sv ajute la creaealegatulion 2 Creat texulsursi pentru o legiturd care va duce la una dint Hint, apot Selecta ye 'n Ora 14, .nserarea imagiir gia imaginl de funda, ra ve wala rumal cam se = 'nsereaa imapin in paging, cis cum se uiizeaz8o epine dept sursd a egatr Sef! | Anticinez putin refering la imaginy, nsa treble 8 v8 spun c& egature pot folosh trie tp de suse care poate duce lao int: text, magi, cia har de gin’ cu pitt (vei Ora 20, .Pasrea mai mut lei smal mu 3. Erecutai cic pe butonal Insert Link dn bara ca instrumente Composition. Drept Lurmare, se va deschide setiunea Link a casetei de dialog Character Properties. 4. Lasat ibe cmpat Link toa page location or lea ile si execu clic pe bbutonal de ip radio de langa Current Page ln caseta din stinga va aprea o list eu derumiriletintelor din fsieralcurent,afgate in ones in cee spas in ¥ document (vez figura 11.5), 136 Parea a tia: Releriea resurselor ’ Fiouna 115. Composer afigenzit lista tintelor existente in pagind, fir dumueavoastrd 6 puteptatege pe cea la care sd duc Tegatura 5. fn cadral liste, ewcutati clic pe tinta dorits. Denumiea ei va aparea in cimpul Link to a page location or local file, precedats de semaul # (pound), cain figura 116. Executai dic pe OK. 6. Pentru a testa legitura, previzualizati pagina in Navigator. Flours 11.6. URL-ul corespu- confine demumirea |. [AS inte’ precedata de semmul # ‘enna sania | a 1. Creat pagina care trebuie si conn tne refer i inser intel. Flos penta inte deni sogstve cae s8 vi jute la cearea legion 2. Crea pagina care va conn legal, precum # sursele lessor pe care le ‘efi float pentru refer intl Sava acest pagind In crectoral care se 2 pagina care conineptel. 3, Exec clipe butonl Insert Link din bara ca instrumente Composition Drept urmare se va deschigesectones Link a casetldediog Character Properies i De facut: Referirea tintelor din cadrul altor pagini care va apartin al (Ora 11: Define tintolor in paging 137 Pentru calegitures8funcionezs, est important ca cle dou pagin, oa eae confine legit i cea cae confine intel, s fe pubicte In acelagldrectr al server (ven Ora 21, .Pablcare agi), 4. Introduce: in cimpul Link to a page location or local file denumirea fisierulut Care confine tintee, apol executati clic pe butonul de tip radio de lina Selected In caseta din stinga va aparea o list cu denumiile fintelor din fisierul ccurent, aigate in ordinea in care apar in document. ‘a 5: Executati dic pe tnta dorita, Denumirea ei va aparea in cimpul Link to a page location or local file, precedat8 de semnul #. Executati clic pe OK. Referirea tintelor din alte pagini online Desi acest lucru se poate reaiza, este putin mai dificil si creat legaturi citre finte care se afl inte-o pagina care nu va aparfine, ca si nu mai spunem de cele care se afla intr-0 pagina care este deja online. ‘Col mai bine este ca inainte de a refer fintdaflataInts-o pagina online, si aflafi URL-ul orespunzitor fini. Acesta este alcatuit din URL-ul paginii, semnul # si dentimirea fintei (vezi figura 11.6). De exemplu, URL-ul hetps//ino.test.con/exemplu, htnbtintal ccorespunde fintei tintal din pagina exempta. ntm de pe serverul www, test .con, ‘Cea mai simpli cale de a ala URL-urie fintelor dintz-un document online este 58 vizualizaji documental in Navigator si si gisiti in el legaturi cite jinte. Cand pozitio- nati indicatorul mouse-ului deasupra unei legaturi (far8 a executa clic), bara de stare a forestrei programului Navigator prezint URL-ul complet al resursei referite de legatu- x respectivi,inclusiv finta. O data cunoscut URL-ul complet a uneitinte, puteti crea o legsturd cite ea ca si cum afi crea o legaturi citre o pagina Web, adicd preciaand URL-ul in campul Link to a Page location or Ical file din sectiunea Link Properties. (Puteti ignora tot ceialti para: -metri din secfiunes Link Properties. Introduceti URL-ul complet impreund cu tinta si afi incheiat a4 (a intoteauna, tunel cd rete pagin care nu va apr, trebue 8 time autorull ‘agin en mesj prin gosta Sactroned pentru a cere acd atime pot ator cares fie de acord sete pagina, dar sa nu fede acord cu ‘etre intlor din paging. Aces ueru se poate tarp in situata in cre pagina conine tlemene de reclama sau ate informe pe care autor dorese ca toi vittoria le vad, | arreterea yor lear permit si srd peste matt respect Rezumat Probabil cA nu vetifolosi des tinte. Daca simfiti nevoia de a folosi finte, intaitrebuie si vv gandii daca nu este mai bine sa fragmentali pagina respectiva in cSteva pagini mai ici. ins} atunci cind are sens publicarea unui volum mare de informatit inti-o singurd pagina, tintele fi vor ajuta pe vizitatoris& se descurce ugor in acel nofan de informatii. 138 Partea Illa: Reforvea resurselor Atelier jan i As putea finaiza restul pag te dea inserafinte? Ma inteeb ce ar intém- placa fintele dacd a9 ma continua mult eu editarea si formatarea fisierului dups Eelam inserat. R in genera, este bine 8 defintvat toate celelalte aspect ale pagini inainte de a inser finfee Procednd ast tintele na vor ma ft deplaste i alte locurtdac ulterior mai ‘sit continual pagini adjugind, muitind sa inlocuind blocun de materi Refine totusi ci majortatenacivtailor de formatare mu afectaza fintele. Dac, de cxemplu, se modifies fontul sau alinierea unui blac de text care contneo tnt, fnta ‘a functiona in continua (dest pictograma pare s fi afectatd de schimbarea ain- tri sau de indentirle pe care le aplicai texts adacen Minitest Rezolvai test urmtor pentru a vedea cit afi reugi si inva Intrebair 1. Tintele sunt legate de ante blocuri de text sau de imagin, la fel ca legaturle. ‘Adevirat sa fas? 2. Cum mai este numitafinta? a. Hublow. b. Porsonalitate publics. «: Ancor 4. Geamnandur. Raspunsuri 1. Fals Tintele tau intr cbiectele din paging sinu necesita o ,sursi asemenea legiturilor 2.0. Activitate Revedefi paginile la care afi lucrat si ganditi-va daca nu ar fi mai bine s8 le rearanjati sub forma unor pagini care congin finte. Cand sunteli online, acordati o atenfie deose- bita paginilor care confin finte (chnd executati clic pe o legaturd si ajungett in alta parte a paginii tocmai ati descoperito legaturdl). De ce au fost folosite in pagina respectiva? CCredeti ci sunt utile? en Ora 12 Utilizarea legaturilor la construirea unui sit Web Pe lingi pogini, mai exist s stun’ grupur ce pagini legate inte ele. (Termenul est Web mai este folosit pentra a desemna serverul pe care sunt publica paginile respective: Vezi Ora 2, .Publicare paginit”) Un grup de pogici Web care nu contin legter inte create cu gi nu este un sit nu este alteeva deco mulkime de paginiindividuse, care na au legaturd una cu alt Daca legafi corespunzitor pagiile respective, ele vor forma un st coerent pe care vi- 2ator il pot explora bucwrandu-ee de confinutul fice pagin. In aceats on ve} revedea diferitle flu in care poate fi structurat un sit Web (prezentate in Ora 1, ,Conceptul de eitare a paginilor Web") si vet invata cum gi cind 54 tlizaifecare metoda in proicetele dumneavoastr, La sfrstal acest! ore vei putea rSspunle le urmatoarele intrebi 5 Cum putet sti ce fel de stracturd de sit uilizati intro anumiti situaie? "Ce legitri (neo tnt) trebuieinserte i functie de tip structuri situ, pentru a lega corespunedtor paginleintre ele? Ce trucuri ati putea folosi pent a v8 asigura cd situ dumneavoasted est aractv, logics ugor de parcars? = = Be Construirea unui sit liniar multipagina Paginile si legaturile din cadrul unui sit liniar multipagina au o configuratie care incu- 1ajeazd ctitorul si parcneps grepul de paging into anumitd ordine, de la inceput etre sfarsit (vezi figura 12.1) ‘AceastA structurs este utila cAnd situl dumneavoastra confine mai ales blocuri de text de dimensiune medie (cam cit un ecran), care trebuie citite intr-o ordine secventialA, de Ja inceput la sfarst. (Unii numesc aceasta structura slide show”, deoarece vizitatorul parcurge paginilein ordine, ca in cazul unei prezentari de diapozitive ~ slide show.) Lo Frou 121. Strueturaw multipaging 140 Partoa a ila: Reforiea resurselor ‘Si presupunem, de exemplu, cd aceasti carte a fost convertita intr-un sit Web. ,Orele” vor ajuta titorul atunci cind vor fi parcurse in ordine, deoarece fiecare capitol se bazeaza pe confinutul capitolelor anterioare. Prin urmare, pentru a incurajacititorul si Je parcurga in ordine, situ trebuie structuratastfel inci trecerea fireasca de la 0 pagin’ Ia alta (de la 0 ora la alta) si se fack in ordinea corespunzatoare, Un alt tip de continut ppotsivit pentru aceasté structurd ar putea fio povestire care este prea lunga pentru a incipea inte-o singura pagina sau niste instructiuni pas-cu-pas,plictisitor de lung. Fiecare pagina din cadrul unui sit liniar multipagind contine o legaturs, denumita ade- sea "Next sau “Continue”, care duce la pagina urmatoare. Mai pot fi oferite si alte Tegatur, ins trebuie avut in vedere faptul cl existenta prea multor legaturi in astfel de ‘pagini permite ciitorului 8 se abata de la ordinea fireasc si scopul acest structuri si ru mai fie atins, Sugesti privind designulsitulullinar muttipaging Pentru a obtine un design corespunzitor cind proecai un sit iniar multipagind este bine si avett in vedere urenitoarele aspect: mi pri matriall in pagini al ror contnut (ex simagin)s& poata frat in intrepime pe ecran, De Vreme ce Vaitatrultrece de 1 0 pagin la alla, nu dr tebu sk mal si devulezeconfinatl, Pana in ecare paginéo catitatecorespun- 2Aoare de text, veli permite viaitatorir s& exploreze como intregul sit executnd alice legitura “Nex” furnizaté de dumneavoas. tm Singora legitura necesari pe fecare paging este “Nest; de multe os, veticonsidera Ex ne sufcienth Tlusi, dack nu deranjai prea mal design, este frumos ca pe fiecae paging in afara primein st oferifi so legaturd “Back” (cre pagina anter\- fara) pent ca ctiforul si posta reveni daca doreste. De asemenea, este wild so fegatueh “Back to Start care ssl duct la prima paging, atl incdtcittorl sé poata reven la inceput din orice pagina 1 Ultima paging trebuie si contin intotdeauna olegturd cite prima pagins, ach furnizaioastel de legatar sii alt parte De facut: Creati un sit tiniar mutipaging ncepet! o pagiid n9ud. Dac dovii,ntroducet nig text in ca 2. In partea de sus a paginil tastafi ext. 3. Aplicati+stilul Heading 2 (pentru cas fle mare si ingrosat) st aliniayi Gi Iadreapta (in coll din dreaptasus al paginii) ‘Y 4 Salvati pagina sub denumirea Paginal htm, 5. Alege File, Save As si salvai pagina gi sub denumirea Pagina2.bin (0 now pagina care este identi eu prima). Y 6, Repetati past 5 pentru a crea pagiile Pagina}.btn,Zaginas htm si Paghna5.hen 7. Deschidefi Paginas, select textul Next si executai cic pe butonl Insert Link 8. Alegei agica?.nem ca URL al legit 9, Tansformati textual Next din 223ina2,nen into legaturd cite Pagina3, pe cel in aglna3. hun intro legStued catze Pagina, ia pe cel din Paginas, ntn Into lega~ turd catre Pagina. (Ora 12: Uitzara otra constuenunul st Web 141 Y 10. in Paqina5.nta, schimbati textul “Next” cu “Start Over”, fi ino legurh cre Pagina sha ieee 11 Peviualzai Papin, hin Navigators folsit legitura Next fost legtura Next pentru atrece deo pin la sta, Stal damnenvoasea linia lett dose paps ete ‘A gata, Umaieti paginile cum dorit pee Utilizarea paginilor cu structura liniara monopagina Atunei cind 1) aveti de prezentat mult text,2)textul se 3) dont sl prezentati intr-un mod eficient, cea mai potrivt este structura liniara monopaging (vezi figura 12.2). Aceasti structusd este folosité adesea in cazul materialelor foarte hungi care fac parte dlintrun sit multipagind mare, cind o pagina liniara bin saree paging mare, cine opegi iniars bine onganizats poate la local arte firesc in sectiuni mici si (i adesea omiss) abordare Faia 102. Uneven de ct tia ona Legaturi Tite rosorwws | Berea ee ene eee Sg ep le ce a rp ae «Definirea fintelor in pagina”) aflat’ undeva, mai jos, in pagina. Legaturile ajuts citi- snipe nt nr les pg Legit Usa ere esp nit te at lingo co xe along ‘pagina ¢i cu cat are mai multe sectiuni. Pence Baca pga ours de esau pate vittro pose extra eest de wer erlénd continu. In azul angio care depagese cine eran, vata Sent coin ng fepip050 cnc crane, vatetor tebe ajtah i 142 Partea a Illa: Referivea resurselor Ora 12: Vilizarea legéturilor la construrea unui sit Web 143 Sugesti privind designul structurlorliniare monopagin& ee Fam 3, toaree aspect O strata de tp 71 © Inserati o tinta chiar la inceputul paginii sau Langa cuprins, iar intre sectiunile bat paginiio Tegatura “Back to Top” citre tinta respectiva. Acestlucru fi va permite citi torului sd revina usorla cuprins dupa ce a citito sectiune oarecare. ' Limitagi numsrul imaginilor (vezi Ora 14, «Inserarea imaginilor sia imaginii de fundal”), deoarece aceasta structurd prezinté pericolul a, datorita confinutului << mare, descArcarea ei in browseru vizitatorului si dureze mult. Spre deosebire de Imagini, textul, chiar daca este mult, se migc& destul de repede prin retea. Prin turmare, daca va limita la una sau dowd imagini, amplasate de obicei la inceputul paginii, puteticapta atentia pe perioada descircirii pagini ae | j "= Derulati confinutul paginil. Daci depaseste 15 ecrane, trebuie sf aveliin vedere Lb transformatea ei intro structurieravhicd sau una secvenfal, moltipagina ] Uiilzati gle orizontale (vezi Ora 8, .Organizarea textului folosind tabele 9 rigle orizontale”) pentru a despirt vizual sectiunile. De féicut: Creati o pagina liniard, indexat 1. Deschideti o pagina de exerifiu, de preferat cu mult text (Puteti construfo ast fel de pagina copiind de mai multe ori textul existent in pagina.) 2. Inserafi cite o line orizontala dupa doua sau trei paragrafe 3! 3, Deasuprafiecrei lini orizontale,inscraio tints. Deni tintele Parte I ° Fe} > panels Tea saga mai deporte {n mod normal fiscare pagina dintr-un st stil Web confine un bloc de legaturi (adesea italian dr ig a na cen gt os pe TT Epes soto at cesta nitor Ho aR cng cance pel ea ma sa Partea Partea a Tha Seal oe | ean ugestii privind designul structurilor de tip Web 5. Evidentiag primi element din list, ,Partea I, si exeeuat cic pe butonul Insert Cand proiectafo structurd de tip Web, este bine si ave in vedere urmatoarele Link, Faceficalegitura 88 ducd la finta cu acelagi ume. caine 6, Repetati pasul 5 pentru celelate elemente din list 1 Tnainte de a recarge la structur8 de tip Web, asigurat-vi cS materialulrespectiv ‘A. 7. Provizualizati pagina in Navigators testat legaturite necesito afl de struct ch mu af apreit gre organiza logic online ™ Vizitatori se pot ratici ugorintr-un sit stil Web. Este indicat si includel!intotdeauna Crearea unui sit cu structura de tip Web soem ale tac soll puna de lee apo sv asigural ck ini contin o legaturs,usor de identifeat, tre pagina inal Structura de tip Web este o structura libera (vezi figura 12.3); paginile pot fi legate Astfel, vizitatori rataciti vor putea reveni ugor int-un punct de Tepe oo asta oricum intre ele. Aceasta structura este utila cand mai multe pagini contin informatii ili un now traseu. legate de continuta ltr pagini ar ca informatie respective s aiba o ordine lgicd sate seeventiall Intrn st sil Web, poate existao pag .inifiala” ca punct de incepat (a in sit jerarhic,desris ulterior in aceasta), nd de acolo tito pot hoinai prin st fi a turma un anumittraseu, Structure de tip Web sunt cele mai potvite penta subietele reveaoaledntaciv pent sbitele cae fear ce rganiare erred | sau secvenfial 144 Partea a ia: Referia resurselor (Ora 12: Utiizarea legdturlor la construrea unui sit Web 145 Back Fura 124, Froura 12.5. Fiecare pagind Osstructurs ierarhica ddintroun sit stil Web ‘confine, in mod normal, wn bloc de Tegaturi ‘tre colelalte pagini dale situlul (daca mu sunt prea numeroase) [irs et ac mca eet | MMR eet | faa en a wy a ee ea Sa Crearea unui sit cu structura ierarhica Find situ cel ma bine organizat (vet figura 125), situ ca structurdierarhied incepe cuto pagina cu conknut general, pagina ,niials” care conduce cite cteva pagin de Ja nielul dot care contin informati mai concrete. Fiecare dintre pagnile dela nivelul doi conduce cite pagini de la nivel tre, care contin informati si mai concrete 358 mai depart. Onganizareaatent a situ erahic nu este facut numa de dragal bunule sis. Modul de organizare a paginilor il ats pe viitator 8 glseasc ceca ce dost, mai ales atunclcind sta conine male informatidetalite Si presupunem, de exemplu, ci situl vinde haine gi c& dorim s8 curnpardm 0 cimasa bignuita, Prima pagina ar putea confine legatiri cre .Imbracdminte pentru femet Si limbricaminte penta barbafi. Alegem ,imbricdminte pentru barbat" st jungem Ino pagan de la nivel dor eace confine legatr catre cama, pantalont panto ‘Alegem scimai” si este fiat o pagind de la nivelul tei care oferé .Cimasi Sbisnuite” si «camfsi de ocare”.Alegem ,Cimsi obignaite”sajungem unde am dont. Modal de organizarea paginilor ne-ar f usuratcitarea chiar dca sil oferea sute de atcoe Sugestii privind designul sitului cu structurd ierarhic& un sit cu structurd jerarhic®, este bine si avefi in vedere urmitoarele Ca gi in cazul proiectri structurilor de tip Web, asigurati-va cd fiecare paging a situ- Tui contine o legaturi edtre prima pagina caze si fie usor de identificat,astel inca vizitatori si poata reveni la inceput fara fi obligati si urce numai cite un nivel cee poste tru a gasi o anamita informatie, la fel ca in. exemplul cu camasa. p ured appa Te aa Rezumat Organizarea paginilor dinte-un sit nu este 0 problems P in sit nu este 9 problems de editarc chiar a ea tine de administrarea continutului, Cand va este clar ceea ce incercaft ad = care este modul cel mai bun de a o spune, structura corecta a sitului devine tmediat evident’. Nu va réméne decit sd inserati hist le Gulden Nuvi rmine det i nist legatur (i, probabil, nigte finte) si... Dar Atelier T&R 1 $i daca intentionez si folosese mai multe tipuri de confinut: sec i dezordonat? Cum le pot ngloba inten singur model eth Frere R Nuestenevoiedeoarece pentru siturt Wel hibit Aceast sbordareincepe irate: *b mai complexe existd asa-numita abordare x0 paging initiala avand continut general 146 Partea a Illa: Reteiea rosurselor ‘care servegte ea punct de plecare. Insi pagina de pe nivelul doi, la care duce pagina initials, ponte fi 0 pagina liniar8, pagina inital a unet structari de tip Web, prima paginé a unei structuri Hiniare multipagina sau inceputul unei noi ierarhii Cu o abordare hibrids, puteti folost la nivelurile urmatoare structara cea mai potrivita pentra continutul paginilor secundare, in timp ce folositi pagina initials pentru a grupa intreaga afacere. Minitest Rezolvaf testul urmator pentru a vedea edt ati reust 58 invatat Intrebari 1. Afi reugit in sfarsits8terminagi povestea copldrei dumneavoastr si dort so ‘publica online, Fovestea are ase ptt mic, fiecare dntre ele confinand o iustafe Care este structura cea mal potrvita pentru ea? 2 Tiniar8 monopaging: b liniar8 multipaging; ¢-ierarhie 4. exbivor’ 2. Dorit sh publica un sit despre cchipa dumneavoastrd care si contin cite o pagina separati, cu poza sl Diografia flecarui membru. Presedintele este Phyllis, sub Phylis sunt treivicepreseinf iar sub fiecare vicepresedinte sunt patrutrintor. Ce fl de Structurd este potrvitd pentru situl care va confine aceste 16 pagini? 2 Tinara monopaging .Tiniara raultipagina; ierachicd; 4. conflictuals. Raspunsuri 1.) 2, (¢) Varianta (a) ar parea potrivitd, insi numeroasele fotografii din continut intérzie ‘descarcarea, In plus, mu reflecta dinamica echipei aga cum 6 face varianta (). Activitate Pentru un timp, nu va mai uitati la pagini,uital-va in schimb la situri. Cum sunt orga~ nizate siturile care vi plac? Puteti spune, de indata ce afi ajuns intr-un sit, ce fel de structur§ are? Plecind de la tipul confinutului ofeit de autor, puteti spune care este ‘motivul pentru care autorul a ales structura respectiva? A facut o alegere buna? Partea a IV-a Insufletirea paginilor cu elemente OrA 13 Obtinerea (sau crearea) imagi pentru pagina Web fn Ora 14, .nserarea imaginilor sia imaginii de fundal", vei incepe s& inserafiimagini in pagina, Dar partea cea mai grea in adaugarea imaginilor nu este inserarea, ci obfinerea imagirilor si aducerea lor in formatul corespunzitor. In aceasta ord veli invata cum, de unde si de ce si obfinet imagini pentru pagina dumneavoasta La sfrgitul acestei ore veti putea rSspunde la urmétoarele intrebi # De unde se pet obfine imagini pentru paginile Web? 1 Cum se pot erea pe cont propria imaginile? ¥ Caror reguli (ipulfisierului, rezolutia ial factori trebuie s8 Je corespundt fisicrele grafic pentru ca s& apara inteo pagina Web? sar x 4 Wily jor Imaginile inline Imaginile infne sunt imaginile care apar automat in cadrul paginii atunci cind pa este accesat prin intermediul unui browser grafic. ‘Nu confundati imaginile inline cu elementele media externe:imagini, videoclipuri, audioclipuri si majoritatea animatilor. Acestea sunt afigate sau redate numai cind vizi- tatorul activeazd o legstura; ele nu contribuie la crearea aspectului paginii, Elementele media externe, inclusiv imaginile externe, sunt tratate in Ora 15, ,Stilizarea paginilor cu elemente audio si video". Fisierele grafice de pe calculatoare pot avea diferite tipuri, Print cele mai cunoscute sunt fisierele .pcx $1 .bap, care se folosesc mai ales in Windows, sifisierele TIFF (.tif), «are se folosesc pe calculatoarele Macintosh si in publicatii. Cu toate acestea, cel mai ‘cunoscut tip de fiser grafic uilizat pentru imaginile inline este GIF (.gi£). Urmatorul ‘a popularitate este tipul JPEG (care are extensia .3p9 pe majoritatea sistemelon). f Ca ivagin inne se pot folosi ums iserele ep GIF gi JPEG, ar cella tpuri de tiie | at ols ca iain’ exe (ve Oa 15). 148 Pariea a IV-a: Insufletirea paginior cu etemente muitimedia Fisirele GIF ofera anumite avantae (vezi sectiunile,ibtreteserea” si Traneparenta”, care urmenzi in aceasta ord), dar sunt limitate la 256 de culor (sau 256 ce nuante de 2, in cazulimaginiloralb-negeu). Pentru majritatea imaginior, mai ales pentru cele desenate pe calculator, culorile pe 8 bli” sunt suficiente. Darin cazulfotografilog, su mai pare desprinsa din realitate. “Totusi faptul ci fsierele GIF sunt limitate la 256 de culori nu este neapiat un deza- vanta. Existi dou motive care vin in sprijinul ecesteiafirmati:, 1 Imaginile pe 16 bii (65.000 de culos) sau pe 24 de bi, true color (16 milioane de colon) tnd s8 ocupe mult mai mult spafiu deca cele pe 8 bili, Datorté acestui lucru,utilizarea lor ca imagini inline nu este indicat, deoarece descarcarea lor pe ‘browserul visitatorului dureaza prea mult (Ve2i sectiunea ,Dimensiunea fisierului“, care urmeazi in aceastd ord.) ' Majoritatea vizitatorlor ruleaza browserele in moduri grafice cu 256 de culori, care afiga culorile cu adancime mai mare sidetaile existente in imaginile pe 16 it si pe 24 de bi. Imaginile respective vor i afsate, insd nu vor arata mai bine deca cele cu 256 de culo Oricum, dacé dori si afigati mai mult de 256 de culori sau nuanfe de gr, o puteti face utilizind fisiere JPEG, ‘Toate browserele grafice pot afiga imaginile GIF inline, iar citeva pot afiga numai imagini GIE.Cele mai cunoscute browsere, Navigator si Internet Explorer, pot afisa si Jmagini JPEG. Prin urmare, toate imaginile inline pe care le folositiar trebui 8 fie GIF sau JPEG, iar atuncicind putetialege, ar trebui si favorizafiimaginile GIF Crearea si obtinerea fisierelor imagine De unde puteti face rost de imagini? Puteti sil creati au sa le obtinei) procedind ca {n continua, insd important este nu de unde provin, ci tipul fisterui, cimensiunea Jui, precum sf al factor De multe ori, cea mai buna cale de a face rost de imagini est si le creat. Aceast& cale ‘este mai usoara decat afi crede; daca sunteti in stare $4 ullizati un browser, atuncl Sun- tet in stares utiizat sun program de desenare sau de pictare. ictare/Desenare ~Pentra a Vi crea imaginle inline, pute utiliza un program de pictare sau de desenare. Ideal este ca programul respectivs8 va poats salva imaginea {in format GIF (sa, optional, EG). Dac8 nu poate, o puteticoseert. Convertre -Daci dort si folosit o imagine care nu est in format GIE sau JPEG, 0 pptefi convert in unul dintre aceste formate utiizind wn program de desenare sau un program de convertice. | programe turivateimpraund cu scnneraa, paratele fotografie dls sa clspor- | ele da captura video, pot sava imagine in format GF sau JPEG. Dacd nu po face acest lucru, apregpe toate vl oferdposibltatea de asa imagines In format TIF, pe care pute convert pot n format GIF sau JPEG uilzand un at program, cum afi Paint Shop | Pro ncius ge C0). (fa 18: Obtnerea (sau coues) magnor penn pagina Web 44 Scomare— Utlizind un scanner de ming, cu alimentatr sau plat putes sana fotografi san alte imagin sf lesa Gols programul de cane) ex magn GIF sau JPEG. 2 pres 2 a Fotognfire- Uilizand un aparat flora digital sau un disposi de capturk vdeo, ppatefi prelua o imagine din realitate. me 7 Ohi inet nse netic inane csr putt prea in tlitainea de magint extent. Ase put gsi oli de mea! lp Web or in ache le de programe comer seu shrewares no (UP) Pe Clip art. Fisiere grafic (une alte puri de sere multimedia, cum ae f animale scipurile aula eae sunt erate pentru af flee pag ‘We cau alte documente.Bibllotc cu atl de imagine gases pe Wed incase pachete de programe sau pe CD-us in magazine fe safer De reguls, colette de imagini na sunt prota prin dreptrt de autor, dec le pute foloi dupa bunul ummnenvonstrt plc Totus ext elect de imagiocas fant protjte pentru amu f uate inant scopur, De cee, eae ine ca inate de a fotos imaginin propria paging Web, ac evntulee stron! (pivind drptuie deautor) ene note coe de magi Ps CD-ROM exist ocolete de imap ile pentru creareaHstelor marcato, abarlor sia funder (pe care vel Iva se inseral In Ora 14), ‘De asemenea, n Axa ©, .Resuseonine pentru autor de Web", sunt preentate adresele or exec de magi onine care acopardo gama variaté de domen Lee {in general, colecille de imagini de pe Web ist prezinta articolele in carl unet pagini 8 lele in cadrul unei pagini ‘Web. Pentru a cofia o imagine din pagina respectiv direct in pagina dumneavoastra, ‘executafi pasii prezentati in exercitul care urmeaza. De facut: Copiati o imagine de pe Web tn pagina dumneavoastra 2 Chong psa toa pn onnon. 4. Salvafiiserul unde si sub ce denumire dort in caseta de dialog, va apirea ‘A descrise in Ora 14, pss selor Sear ae ae rs 150 Partea a IV-a: insufletirea paginlor cu elemente muitimedia ra 19: Obtinerea (sau crearea) imaginilor pent pagina Web 151 Ce trebuie stiut despre imaginile {nainte dea inserao imagine in pagina dumneavoasrs, tebe s8 avet in vedere turmatoarele aspect: ine Tipulfisieruui Ca o regu, incercai solos fisiere GIF ori de cite or este posbil,Procedind astel, avels garania cd imaginile pot 8 vazute de majoratea ulzatorilor care folosese brovsere grafice, In cazal in care dori si publica o fotografie sau aveti un fgier JPEG pe care mel pputeti convert in format GIF, putt folot ca imagine inline si un fst JPEG. Daca pro- dat atl fii constient c& ascandefiimagsinearespectva viitatorilor a cror browser ra recunoaste formatul JPEG (care sunt putin Fiouna 13.1, Preluarea unei imagini de pe Web Proggannul de editare a imaginilor vl permite tbl modelal de caloare ezolutia ait in cazul imagiilor GI eft sal color [PEG, Stbilii RGB ca model de Coote 372 dpi pent rezolufe. Aces parame forizeas orate optima inte spect imag i dimensiunes ser Dimensiunea fisierului ‘Teoretic, in cazul unei conexiuni Internet cu 28,8 Kbps, sunt necesare mai putin de 30 secunde pentru transferul unui fisier grafic de 20 KB de pe un server pe browser. Ins viteza cu care ajunge imaginea la nerval optical viztatorului depinde de mul ati fac- tor, Intre care viteza de accesare a discului serverului,viteza procesorului si memoria disponibila din calculatorul vizitatorului,calitatea brovserului si viteza de multitasking, Cu toate acestea, considerand ci viteza de transfer este ce 2 KB/s, putei estima sufi- lent de bine timpul in care pagina duumneavoastr’ se materialiazeaza pe ecranul ‘majoritStii viziatorifor Stiind acest lucru, rimane sé holdriti dumneavoastra cit vreti st astepte vizitstorul pentru a va vedea intreaga ,opera”, Se spune cA un navigator obisnuit de pe Web nu va astepta niciodata 30 de secunde descarcarea unei pagini, dar bineingeles c8 ceea ce se spune este, de obicei, gresit. Numai daca nu sunt bine moti- vali, viitatori vor pleca inainte sA treact cele 15-20 de secunde necesare contri paginii dumneavoastr Adaiugati la dimensiunea fisierului HTML dimensiunile imaginilor inline existente in pagina. Valoarea maxima recomandaté este 30 KB, ceea ce asigura aparita intregii pagini jn maximum 30 de secunde. Totusi este bine si incercafi si mentineti dimensiunea intregului packet la aproximativ 20 KB (Firi a mai pune la socoteald imaginile si cele- late fisiere externe, despre care veti invata in Ora 15). Este evident cd solutia cea mai bund estes folositi ct mai pusine imagini. Mai jos sunt enumerate si alte modalitii de a mentine pagina compact Utilizati imagin care ocupa 0 suprafatd mai mica in paging ~ In general, imagiri mat sic inseam fsiere mai mi, Utilzafi culor nai pufine ~ Cand desenai sau picat imagine, folositi cat mat putine culoriposibil pentru a obfine efectl dort, Cand lucraticu imagini care congin ‘multe culori (cum sunt cele scanate sau cele provenite din colecti de imagini),reduceti smirul de culori sau dimensiunea paleti de cular folosind un program de editare a imaginilor Majoritatea acestor programe dispun de opin care v8 permit sh transfor- maf imagine color in imagine albsnegra sau sd reduceti namarul tonurilor de cufoare dintr-o fotografie pentru a-i da aspectul unei pieturk. Ambele optiini reduc spectaculos dimensiunea fiserului si pot duce la absinerea unorefece interesante Creat o variant a pagini care sa confind numai text - Cand pagina dumneavoastrd ‘ste ncireata din punct de vedere grafic, creat cite o dublura penta fiecare dintre pagiile care umeazi dups prima pagina elimindnd numa confinutul grafic al acestra, CCreati pe prime pagina o legatura cite versiunea docamentului care confine numa text. Asie, vizitatori care folosese browsere in mod texts cei care nu vor s8astepte descireareaimaginilor, pot utiliza versiunea care confine num text, Utilizati miniturt si elemente multimedia externe ~In loc si afisafi imagini inline de dimensiuni ma: utlizali miniatur ale aestora (vezi figura 13-2) sau legatur, sub forma de text itr varianta externa imaginilorAstiel viztatori pot lege dact vor sau nu si vads imaginile respective, Viatotoriagteapta cu mai multa rabdare afisarea imaginilr aturcl clnd aleg et igi 38 Te vada Drepturile de autor Usurinta cu care imaginile pot fi scanate, convertte, copiate sau chiar preluate de pe Web este un fel de invitatie de incilcare a drepturilor de autor. Dar in ziua de azi, Web-ul este necrutitor fala de nerespectarea dreplurilor de autor. Autor isteti fae bine atunci cand insereaza la vedere atentiondri cu privire la drepturile de autor (vezi figura 133), pentra a fe aminti vizitatorilor ci munea Jor nu poate fi copiata Indiferent daca a fost sau nu insojité de atentioniri cu privire la drepturile de autor, nu Publicati nici o imagine decét dacs '™ Ali creato singus, prin desenare, pictare sau fotograficre eu un aparat fotogratic digital (Retineti ca s- publicarea fotografiet unei opere de art8, cum ar fi poza unei picturi 152 Partea a IV.2:Insuflotizea paginllor cu elements mutimecta existente intraun muzeu si care este protejati prin drepturi de autor, ar putea fio incaleare a drepturilor de autor) Foun 132. Miniaturile,versiunt reduse ale imaginilor Utah Photos (cue pot far arsine) “he ateving patos wes ake sng panera emer om our van Tete wee oe ao ‘© Afi obfinut-o scanind o lucrare proprie sau o operi de arta care nu este protejata prin drepturi de autor 1 Afi preluato dintr-o colectie de imagini ale cSrei atentionari privind drepturile de ‘autor precizeazi cf imaginile pe care le confine mu sunt protejate prin drepturi de autor sat cé pot fi publicate. (Dacd atentionarile respective va cer ca imaginile si fie insofite de numele autorului, conformati-vi.) ‘acd publica pe Web o lure prop, include Tn papa o iepiturdcreo not pind ‘roptunie de ato, n cares prciai cv rere toate crepurieasupra Intreteserea Intreteseren (interlacing) imaginilor GIF este 0 cale de a mari viteza aparents de afisare 2 Imaginlor din pagina dumneavoastaIntrefeserea nu afecteaza deloc aspect final A imugin sn hecesita modificareaalgortmuli de inserare sau formatare aimagini neh, modifics modal in care este afigata imaginea pe ecvan de ctr anumite browsere, De obice, pe durata descirciriunelimaginé GIF neintzetesute,browserulafigeaz3 un inlocaitor Ge imagine, iar imagines o va azo nurei dupa ce descircareas-a inches. Dack salva imaginea CIF in format intreesut, browserele care ecunose acest format 0 Vor affa pe musta ce 0 descarc. stil, imagines va aparea la inceput nelard clai- taten el imbunatitindu-se pe masa ce este descireat. Inrefeerea permite viitatorlor pagini durmneavonstr8 sii faci o idee despre cum that ogi, eine ca deattenrea se fiche. Dac vntatoral vede cea ce dlreste inane ca imagines si devind clara, poste trece mai departe fir si atepte inchelerea descircii (Ora 19: Obsinerea (cau erearea) imagiilor pentru pagina Web 183 Four 183. His Bee es a Nota ex privire la ee reptile de autor deffo oroge tne lexistentd intro pogind eee ane cartoon animals & figures, “Dip ames in co a 8 tl gt ne, omy ‘eer yea paw capris Toy et ro "rca ita oe oo rare at or ve ger ny 0 satis seer )00 We et rns Sato d) e166 Ho Cg rete eee tg eens i) eno wehit We wee Uw fom S-ar putea ca programul pe care il utilizati pentru a crea imagini GIF si va permi salvati imaginile in format intretesut sau neintretesut. Dack programul respectiv nu salveaza imaginile GIF decit in format neintretesut, putefi s& folosii un program cum ar fi Paint Shop Pro, pentru a convertifisierul in format intretesut. ce) Versiunile cu rezolutie scdzuta O alt cale de a oferi vizitatorlor ceva de vazut pind cind apar imaginile, estes uti lizai vers ale imaginior care si aibs o rezoltie foarte seSzuts, Acestea se salvenza cu ajutorul unui program de editare aimaginilor (i sub o denumire diferité de cea a versiunii cu rezofutie inal). Puteli defini sersiunoa cu rezoutie stzuta ca 0 eprezentare allernativi a unel imagini cu rezolutie inal, in cascta de dialog Image Properties (conform descrierii din Ora 14). {in browserele care oferd suport pentru reprezentirile alternative, mai int este afigata imaginea cu rezoluie scBautd. Aceasta apare repede deoarece, 0 data cu rezoluia, scade si dimensitnea fiieruli. In timp ce vzitatorul analizeaza versiunea cu rezolutie seSzuti, Navigator incard in fundal imaginea cu rezoluie nalts sho pregateste pentru afigare. Cand imaginea cu rezolutie inalté este gata, ia focul versiunii cu rezotutie Sclauta, La fel ca trefesereaimeginilor GIF aceas tehnic& permite vizitatorlor si fac o idee despre ceea ce congine imaginea, cu mult inaintea aparitiel imaginii finale Versinile cu rezoltiescizuth pot fi uilizateatat pentru imagine GIF, ct si pentru imaginile JPEG. Este evident c8 imzortantaintreeseri sia versunii cu rezolutie scdzutd exeste 0 data cu dimensivnea fserula a Ceara imaginor n Paint Shop Pro’ cum se salva un fer in fomat GIF nef, are urea Tn aoeast od, vet vala 154 Partea a IV-a: insufletivea paginilor cu elemente multimedia Transparenta in cazul unet imagini GIF aveti posibilitatea de a face ca una dintre cutori si fie trans- penta. Partie traneparente ale imaginli nse vid in pagina Web, deci ceea ce se aft Jr spatele imagini (de obicei, culoazea sau modelul de fundal) tanspate. Vetiavea dea face cu transparenta mult mat des deci vi inchipuit. De exemplu, cand consteuito imagine int-un program de pickie8 (cum ar fi Pant Shop Pro), pe lings patil desenate su pictte sierul creat confine si un fundal colorai de o anumitS ESimensiune, Dachinserai imaginea respectiva intr-o paging Web, fundalul v8 apare Sub forma unui patratcolorat staat in spate pixtilorpictate de dumneavoastrd (ve figura 13.) lar daca alegefi culoarea de fundal ca find cloare transparent, patzatul chin fundal va ft invizibl in pagina Web, permitnd fundalulu paginii si se vada. Composer nu contine optiuni pentru controlul transparentei: de aceea trebuie si alegeti culoarea transparenta cind crea sau editafi imaginea. In seciunea urmatoare veti invita cum se creeazA imagini in Paint Shop Pro scum se alege culoarea transparent. Dac8 nit ‘putedi alege culoarea transparent in programul de pictur preferat, creai imaginea in {cel program, apoi deschideti-o in Paint Shop Pro si stabiliti culoarea transparent (vezi “Convertiea fisieelor in format GIF sau JPEG", care urmeazé in aceasta or8). Froura 13.4. in exemplut de jos, culoarea transparent din imaginea GIE este culoarea de fundal Si de aceed, fundalul poginié transpare Crearea imaginilor in Paint Shop Pro CD-ROM-ul furnizat impreuné cw cartea confine o versiune de proba a programului Paint Shop Pro, un program de pictura bine dotat pe care il puteti folosi pentru a crea, fa edita sau a converti imaginile pentru paginile dumneavoastr, De fapt, Paint Shop Pro este atit de sofisticat incati-ag putea dedica o carte intreaga. ‘Dar noi avem de seris pagini Web gi, ca #8 fiu sincer, dack vi ofer numai notiunile de bbaza pentru a putea demara le veti descoperi pe celelate destul de usor. Ora 13: Obtinerea (sau croarea) imaginilor pentru pagina Web 155 in cteva dintee paginile care urmeaz, vi vol explicanotiunile de baz privind utilizarea programulit Paint Shop Pro pentru asi putea flosi a erearea, editarea $i formatarea imaginilor pe cae le vet utiliza in Composer. Crearea $i editarea unei imagini entra a crea o imagine, deschidei Paint Shop Pro si alegefi File, New sau executati clic pe butonul New Image din bara cu instrumente. Drept urmare, se va deschide caseta de dialog New Image, ilustrat in figura 13.5, In Pairt Shop Pro, tpul isirulu (GIF, JPEG etc.) nu se stabileste cdnd creyiimaginea, cl nd asa In cimpurite Width si Height clin cascta de dialog, se defineseltimea, espectiv alkimea (in pina a imaginil pe care o creat. Aceste dimensiuni pot fi stabilte dupa bounul plac sat pot fi ignorate acum si ajustate mai trziu Lista derulanta Image Type ate tel opfiunt 256 Colors, 256 Grays (nuante de gyi sau 167 Million Colors. Alegett 256 Colors sau 256 Grays pentru a crea o imagine pe 8 bi Evita a treia opine (vezi Sectiunea »Dimensiuneafsterului", ceva mai devreme in aceast3 078). Fura 135, Caseta de dialog New Image Remarcati ci dupa ce ati stabilit cei trei parametri (Width, Height si Image Type), in reapta textului Memory Requited va fi afisati dimensiunea aproximativa a fisierulul, exprimata in octet. ‘Dupa completarca casetei de dialog, executati clic pe OK pentru a incepe si pictati. Se ‘va deschide o fereastra goala (vezi figura 13.6), flancat’ de casetele cu instrumente pe care le vet utiliza pentru a picta sau a edita noua imagine: Seloct - Accact® cavetS cu instruments confine butoane pentru definirea si selectarea tunor zone ale imaginii, precum si pentru alegerea culorilor Paint ~ Aceast’ casetd cu instrumente contine butoane pentru alegerea instramentelor pe care le puteti utiliza: creion, pensuli, creti si altele. Fecare instrument are un efect propriy iar pent-u a crea efectele dorite, in cadrul aceleiasi imagini puteti utiliza cate instrumente dori De facut: Explorati programul Paint Shop Pro BB} Cea mai bura cale de a invata programul Paint Shop Pro este s& v8 jucati nil cu el. Pentru a ajuta sa explorai,avefi mai jos elfiva pasi pe care it puteltincerca 'B 1. inpartea de os a casetel cu instrumente Select veti psi dows pitrale care ‘y __ suprapun Ele repreznta culoarea de desenare (Foreground Colo) si culoarea 156 Partea a IVa: insuletirea paginlor cu elemente mutimedia ¥ defandal Background Color) fn adr une imagini pute! fotos cite culo de dlesenare dori, ns numa o singurdculoare de funda 2. Erecutafidublu cic pe caseta Foreground Color Va apirea caseta de dialog ias- trata in figura 137. Aleget o culoare executind cic pe a, apoiexecutati clic pe OK Foun 138, Rereastra cu noua imagine flancata dle casetele ‘cu instrumente NIBINEE Fiouna 1827. Alegerea culorié de ‘desenare 3. n confinaare, vei alege un instrument cx care s8aplcaticuloarea toma aleast. Execatat cic pe butonul Rectangle din caseta cu instrumente Pain, Indicator mouse-ulai devine dreptngh {Toate instumentlepenru deta formelor (Ractagl, Filed Rectangle, Oval g Filed Oval se ilizeza tn actg mod: so lege instrument, se execute se pie apasatbutonul mause-uli, po 8 datieste forma prin ager co muses Ora 13: Obtinorea (sau cxearea) imaginilor penteu pagina Web 187 jorul mouse-ului deasupra locului dorit. Executat clic finefi apasat e-ului si trageti mouse-ul. Veti observa ca, pe misurA ce trageti, apare un dreptunghi. Modificind distanfa si unghiul sub care trageti mouse-ul, puteli regla forma si dimensiunea dreptunghiului; cind arata asa cum dori, eliberati butonul mouse-ului. in paging va apsrea un dreptunghi desenat a culoarea pe care afi ales-o la pasil 2 5, Executati clic pe butonul Color Chalk din caseta cu instrumente Paint. Indicatorul mouse-ului ia forma unei bucafi de crea. Pentris a trasa o Tinie cx creta, executali clic in interiorul imagini,tineti apasat butonul mouse-ului si deplasati mouse-ul, Observati cA putefi desena si peste dreptungh (vezi figura 6, Executati din now dublu clic pe caseta Foreground Color $i alegeti alts culoare; ‘una care sa fie mult mai deschisd (sau mai inchisi) decit cea pe care tocmai afi Tolosito. 7. Executati clic pe butonul Flood Fill din caseta cu instrumente Paint. Acest instru- ‘ment umple forma selectati cu culoarea de desenare. 8, Executati clic in interiorul dreptunghiului. Dreptunghiul este umplut cu culoare, (Daca linia pe care afi trasat-o cu creta imparte dreptunghiul in dows, va fi lumpluta numai partea in care afi executat clic) Fauna 19.8. Pictarea Ati prins ideea? incercati, unul cite unul, si celelalteinstrumente de picturd pentru a vvedea cum lucteazi fiecare. Schimbafi de fiecare dati culoarea de desenare pentru a vedea si in zonele de suprapunere rezultatul folosirii noului instrument. Trecefi apoi la seefiuea urmatoa’e pentru a invita cum si adaugati text in imaginile dumneavoastra {va:Insufletivoa paginllor cu elemente multimedia, 458 Parte Utilizarea textului in imagini coon gramului Navigator, Imbina text (un N mare) si grafed in aceeas a a Cin a sxbioma Toll mimepre unt porn ee es ua pg 50 md cif hone pen cca) ces), Fas open aarti | arena ee —__J ca casta de dialog Add Text tai cle pe lu in cae drs par etl Ve apie casa de alg Ad (fe igure 189) In aeat caet de log, patel forts testa modu cos ( ecumensiane, a sin citeva modal not (adaugare de wnbr su ro 50 de grade) —— Dupa ce stabil formatarea dort, tstatitextl aces lop din partea de os a casetei de dialog). Cin af textul apare in imagine pare pe masurd ce il tastafi in cheiat, executai clic pe OK, iar Four 13.9, Adatugarca textulut ralune se numepie adaugare de text” i, in Pant Shop Pro, creation ; ; Chapa madd cn nro si oir cee at | a ae cae saat taro wten be | RES Me RG a sae nung bore oe fea sea apn ead onmee rea, | Sheers tare —_ (a 19: Obtinerea (sau crearea) imaginor pentru pagina Web 159 De facut: Salvarea unei imagini g! stabilirea tipululfigierulul, {n Paint Shop Pro, cind salvati prima data o imagine, stabil tipul fisierului in care va fi stocata (GIF sau JPEG, in cazul nostra), Pentru a salva imaginea, exceu- {ati clic pe butonul Save sau alegeti File, Save. Va apsitea caseta de dialog Save As (vex figora 13.10), 1. Tastafi denumirea imaginil in cimpul File Name al casetei de dialog, Nu tastafi siextensiaisierufui (cum arf. jpg), deoarece aceasta va fi adStgata automat la pasul 2 2, Derulafi lita List Files of Type si alegeli GIF sau JPEG. Observati ci denumiri tastate Ii este adiugata automat extensia potrivits 3. Daci este cazul, folosticasetele Drives si Dizectory pentru a indica locul in care si fie salvat fsieral. A. 4. Executali cle pe OK. Est bite 8 toca fiarle cu imaginie din pagin in Grectorl Th cre stocl gi eda agina props (inainte de a 0 publica pe serve) Putetl economist cvapaslsavind, {ela bin nceput, noua imapne in drectorl respect Figura 13.10. Salvarea unui fisier Optiunile GIF interlacing ¢i GIF Transparency Cand salvai un fsier GIF avefi posibiltatea sl salvai ca fisier GIF intretesut sau 58 configuratt parametrt de transparent. (Vedefi ,linteteserea” st Transparenta”, mai devreie in aceasts ort.) Retineti cd aceste optitini sunt disponibile nual dup’ ce ati ‘flzat lista derulanth List Files of Type din caseta de dialog Save As pentru a preciza i tipulfsierului este GE ‘Pentru a salva un ser in format GIF intrefesu, derulai lista File Sub-Format din case- ta de dialog Save As (vezi figura 13.10) si alegeti Version 89a-Interiaced. ‘pj respare sn pone ronald, sta Fie Sub Foal (in EE | exes te ts Sr yates Von meres Nonna oma 87a nu ofera suport pentru transparenfa. entra stabil opine de transparent, executai cle pe batonul Options din casela de dialog Save As. Se va deschidecaseta de dialog GIF Transperency Options, tral in figura 1311. Opjiunte exsiente sunt 160 Partea a IV.a:Insulleticea paginilor cu elemente multimedia (Ora 19: Obtinarea (sau croarea) imaginilor pentru pagina Web 161 Maintain Original File's Transparency Information — Utilizati aceast& optiune pentru a plstra configurarea transparentei unel imagini pe care nu ati creat-o dumnevoastr Do Not Save Any Transparency Information — Face ca nici o culoare si nu fie transpa- ‘ent; toate sunt vizibile. Set the Transparency Value to the Background Color ~ Determind in mod automat cculoarea de fundal so stabileste ca fiind transparent, astfel incit fundalul imagingl si zu fie vizibil.Folosfi aceast8 optiune pentru a inlstura fundalul din cadrul imaginilor. Dac intention = fcei ca undsul si transparent, a cesenayniciodata cu culoarea de ful Zonee care av aceagiculoare cu fundlu vor a indu lor, transparent (Putt. éesiguy, sac ca anumte pry le imagint sf ransparente pez a obfie un anumit ect) Fura 13:11. Configurarea ‘opfiunilor din enseta de dialog GIF Convertirea fisierelor in format GIF sau JPEG Cateodata dispuneti de un fsier grafic pe care doriti sil folostis se intampla ca aces- ta sf na fe in format GIF sau JPEG. Din fericire, majoritatea programelor de editare a imaginilor (printre care si Paint Shop Pro) pot converti multe tipuri de fisere in format GIF sau JPEG. ‘Daci optati pentru convertirea imaginior, nu uitafi c& de multe ori imaginile nu scap nevatamate in urma acest! proces. S-ar putea ca, In urma transformatii, imaginile 53 necesiteredimensionare, decupare sau alte operatiuni de aranjare. De asemenes, ai putea dlori a fnainte de a prolua fisieral in Composer, 5% configurati parametrii de trancp rena si alte optiuni. In astfel de cazuri, este ideal sé folositi programul dumneavoasira de editare a imaginilor att pentru convertirea formatului, cit si pentru editarea fisieru- lui grafic si abia dup aceea, s4inserati in Composer imaginea finalizata 1» Pentru a converti, in Paint Shop Pro, un fisier in format GIF sau JPEG, deschideti fisierul pentru editare alegind File, Open. Editatifiserul dupa bunul plac, epoi alegeti File, Save As pentru a deschide caseta de dialog Save As. (Nu folositi butonul Save din bara cu instrumente sau optiunea Save din meniul File. Procedand astfel, fisierul va fi salvat in formatul séu original.) In caseta de dialog Save As, alegeti noul tip al fiserului din lista List Files of Type. ‘= Pentru a converti mai multe fisiere, alegeti File, Batch Conversion pentru a deschide caseta de dialog Batch Conversion (vezi figura 13.12). inti selectai in sectiunea Inputa caseei de dialog figierele care trebuie convertite apoi precizati in sectiunea Output noul tip de fisier si celelalte caracteristici. Dupa ce executati clic pe OK, pro- gramul va incepe transformarea fisierelor respective. Frou 13:12. Convertirea Fisierelor Rezumat Dap cm ve ves or mst nrodaeresimainor in paging ete dest de Spit Apraspe fost probleme care pa sunt auzte de neregete eget de fer lp secorespuneitoycimensine nectespunzitare gama; Bar de stam Sun- tetsu deal de probleme de veme cep repule cre thu ejecta Atelier Minitest Rezolvaftestul urmator pentru a vedea cit afi reusit sf invafati, Intrebari 1. Care dintre imaginile urmatoare este cea mat potrivit® pentru a fi folositi ca imag inline intro pagina Web? : oo cond a. imagine GIF de 120 KB; . imagine JPEG de 15 imagine GIF de 15 KB; 4.imagine JPEG cu 16 milioane de culor 2. Peneaca maine durnneavoosel st parc se materilizeazi mai repede,trebu Si lesalva in formated m “ee a. JPEG; b. pe 16 biti «interfatat; d.intrefesu. Insufletrea paginior cu elements mutimedia. 3. Majoritatea utilizatorilor de Internet folosesc browsere care pot afiga imaginile inline in format GIF si JPEG. Adevarat sau fals? Raspunsuri 1. (©). Si celelalte variante pot fi utiliza ca imagini inline, ins3 este mai bine s fie folosite ca imagini externe (vezi Ora 15). 2.(d) 3. Adevirat. Majoritatea vizitatorilor folosese versiun recente ale programelor Netscape Navigator sau Internet Explorer, care oferd suport atat pentru formatul GIF, cat si pentru JPEG, Activitate Jncepeti si gincii in imagini pentru a stabil dac8 pagina dumneavoasta are nevoie de agin care arf acelen, Dup& ce af stablt acest luca, indie pe car le pte prelua din alta pare pe care tebuie si le creat. Ora 14 Inserarea imaginilor si a imaginii de fundai Imaginile sunt ca sarea:adaugat cite trebuie si unde trebue, si pagina durmneavoastri Web devine delicioasd —dac8 addugai prea mule, vzitatort ,o vor zbughi" de pe Internet sf cauteo stil de apa mineral fn aceast ori nu vet invita numa sincera in pagind imagin (pl imaginea de fun- dal) si 8 le controlaf aspectul cis eutlizai pentru a obfineefecte opie. La sfirsiul acess ore vel putea riepunde la urmitoarele intrebé # Cum se inereaza imagini into pagin Web? 11 Cum se controleazsaliniere, spafieren si dimensiunea imaginilor? * Cum se creaz8 .variante" ale imaginilor pentr ce al ciror browser nu poste asa Imagini? 1 Cum se translormé o imagine intro legiturd? 11 Cuim se insereaza imaginen de fundal? * Cum se creaca marca de list originales rile orizontae haz, asemandtoare celor din paginilerealizate cu Page Wizard (in Ora 3, .Crearea unei pagini Web sla minute" Inserarea unei imagi Inainte de a trece la inserarea sierului grafic fn pagind, trebuie sil pregatif conform celordiscutate in Ora 13, ,Obfinerea (sau crearea) imaginilor pentru pagina Web". Ideal este a fisierele grafie s fie stocate in acelagi director cu fgierul HTML cores- ppunzitor pagiaii in care apar Dack imaginileseafs in alté parte, Composer le poste copia automat in acelasi director. (Veu seciunea PAstrarea paginilor sa imaginilor Jnolalta", care urmeazd in aceasta ori.) | To inbajl reat de pag Web, pce" (tora), graphic” (tment gai) 164 Partea a NV-a: Insuietivea paginllor cu element mutimedia De ficut: Inseratio Imagine Dups ce ai pregatitimaginile,inseraf-le procedind astel 1. Poztionaficursorul de editare in locul in care dort s inseraji imaginea 2. Executai clic pe butonul Insert Image din bara cu instrumente sau alegeti Insert, Image. Se va deschide sectiunea Image a caselei de dialog Image Properties, prezentaté in figura 14.1. Four 14:1. Caseta de dialog Image Properties 3. Introduceti in cémpul Image Location calea gi demumirea fsterul care confine imaginea sau executaf clic pe butonul Choose File pentru a résfoi dupa el. 4, Executali clic pe OK. Imaginea va aparea in pagina f&ré nici o reprezentare alter- nativi, avind valorile prestablite pentru parametri Text alignment, Dimensions si Space around image. Pentru a modifica acesti parametri vedeti sectiunea urmatoare ,Formatarea imaginii*, iar pentru a crea reprezentiri alternative vedeti sectiunea intitulati ,Crearea varian- telor pentru imagini. a Formatarea imaginit Putetischimba modul de afgare si tratare a unetimagini inline tot din eefunea Image a casetei de dialog Image Properties, Aceste modifica se pot face a insererea imagini (vezi seciunea antrioars) sau ulterior acces ind secjiunea Image a casetel de dialog in tunul dint urmitoarele modur: 1 exectaji dublu cic pe imagine; 1 executafi cle dreapta deasupra imagint si alegeti Image Properties. Modificarea aliniert Fin intermediul sirului de butoane situate sub eticheta Text alignment in sectiunea Image a casetei de dialog Image Properties, putefi stabil poziia imaginiifati de textul adiacent. Textul poate fi pozitionat in dreapta imaginil in cinci moduri diferte, iar paragrafele din jurul imaginii pot fi directionate in st&nga sau in dreapta imagini Pentru a stabili modul de aliniere, executafi lic pe unl dintre cele sapte butoane, ra 14: Inserarea imaginilor sia imagini de fundal 165 Optiunile (in ordinea butoanelor, de la stinga spre dreapta) sunt urmatoarele © Prima linie de text trece in dreapta imaginii ar textul rimas incepe dedesubtul ei. Partea de sus a primei init de text este la acelasi nivel cu marginea de sus a imaginii (vezi figura 142). ' Prima linie de text trece in dreapta imaginil ar textul rimas incepe dedesubtul ei. Central pe orizontala al primei lini de fext este aliniat la mijlocul imaginii © Prima linie de text trece in dreapta imaginii, iar textul rimas incepe dedesubtul ei, Prima linie de text este plasatd deasupra liniel orizontale care trece prin mijlocul Iimaginil (vezi figura 143). Frouna 14.2. Imagine aliniatts eu pring buton din stdnga Hore deicetel Hw regal But how much do we realy know about the sigatic insect? Tein fect, a deadly killer? Many reports frem Asie ‘afm thet Monarch bitterfles heve been sighted in the viity of sreerome murders since wncient tines. More recently large Monarch | eee tepped, and when examined, waa found 4 be carrying eawitehblade tnd credit cards bearing an sls, Trevbing, indeed Fiouna 143. Imagine aliniats cual freilea butox din stinga al i ‘Ab the esl Mone | Ho detectel How regallBut how much do we relly know about the crignticincect?Tstinfoct, «deed kller? Many reports from Asie conf thot Monarch butterfies have been sighted in the vty of | groesome murders sine anclen tines. Mere recently. alarge Menerch | er repped, and when examined, was found to be cerying& awitehblede “Troubling indeed. eae Sereeemernrs enter 2 eS erie a 168 Partea a |V-a:Insuflotirea paginilor cu elemente multimedia 1 Prima lini de text trece in dreapta imaginii, iar textul rimas incepe dedesubtul ei Prima linie de text este aliniat fata de partea de jos a imaginii literele care coboars sub linia de baza (p, q etc.) depasind marginea inferioara a imaginit. * Prima linie de text trece in dreapta imagini, iar textul rimas incepe dedesubtul el Prima linie de text (Inclusiv literele care coboara sub linia de baza) se situeaz& in intregime deasupra marginil inferioare a imaginil {osc steoeiunul dine cele dova butoan pentru cecionarea ex n atera, pentru a vedea cera, webule st vizwalza pagina cu un browser. Aceastadecarece, in Compose, | extul din jurul iaginl nu est afta mod corespustr. | } 1 Textul infigoari latura dreapté a imaginii, Prima nie de text apare deasupra imaginii, ‘= Textul infigoara latura sting a imaginil. Prima linie de text apare deasupra imaginii (vedi figura 14.) Ficuna 144, Imagine aliniatd cu ulti! buton din dreapta facta deadly Kile? Many re canton that Monarch butterflies have bees ‘ghted in he vit ef gruesome murders since tncent times, More recently, lage Mevarch twee trepped, end when exained, wa fund to be carrying ¢awithblade end credit cards bearing an alias. Troubling, indeed, Modificarea dimensiunilor imaginil Cao regula, imaginea trebuie dimensionata corespunzitor inainte de a oinsera. Veji cobtine rezultate mai bune dac& dimensionaliimaginea In aplicatia cu care afi creat-o sau intr-un program de editare a imaginilos, decdt dacs facet acest lucru in Composer (vezi Ora 13) Imaginile scanate vor arata cel mai bine dack le stabiliti dimensiunea in programul de scanare, inaintea scandrii propriu-zise, Chiar si dupa scanare, este mat bine si redimensionafi imaginea in programul de scanare decit in Composer. Aceasta deoarece, in realitate, Composer nu schimba dimensiunile imaginli, ct aplicd ctichete pe care browserele compatible cu extensiile Netscape si le interpreteze si 4 scaleze imaginea cind o afieaza. Un browser na ste sa scaleze o imagine aga cum 0 face un program de editare a imaginilor iar probablitatea de aparitie a unor «zgarie- tur in imaginea scalata este mare. a 14: Inserarea imagines a Imaginl do fundal 167 Cutoate acestea adeviratul motiv pentru care nu este indicatéutilizarea parametrilor din zona Dimensions (din sectiunea Image a casetei de dialog Image Properties) este ca scalarea se bazeaz8 pe o extensie Netscape. Dacd totusi vel utiliza parametri respec- tv, imaginea ve aparea cu dimensiunle originale in browserele gafice care nu reeunose extensile Netscape. in schimb, act scala imaginea inir-un program de ceditare aimaginilr si nu utilizai parametil din zona Dimensions, imaginea va apaea corespunzitor in toate brovserele grafice. ack vi hota modificai dimensfuile imagini! n Compose, stabil inal (Height) si latimea (Width) imagini in caseta de dialog image Properties, Aveti posibi- litateasile exprimat in pili sau sub forma unui procent din mdrimea ferestze, in sod prestabilit,cdnd deschideti pentru prima data caseta de dialog, dimensiunile prezentate sunt dimensiunie originale ale imagini (exprimate in prseli). Putet event orisind la dimensiunile originale ale imaginii executnd clic pe butontal Original Size Netespectand propor dine nde sje cand modifialdimensivte, s-ar putea 62 ZEF, | setornaiimaginea pe oriental sau pe vricala, Pentru a evta acest ueru, bla casela de validae Constrain, far Composer va pista factorul de proportionate iii Modificarea spate sl addugarea chenarulu Jn zona Space Around Image di sectinea Image (a casetei de dslog Image Properties, desig), putefi mari spaiul dn jurul imagin,nmai pe lateral saw numa sus os. Mai putts incadrai imagine inten chenar negra isd stabil grosimea acest in pie) Fours 145, Pagina itustrata tn figura 144, avind ‘acu fur un spain ‘uplimentar G0 de pixel in stanga sin dreapta) si xn henar des peel ecly know about the engmtic insect? Tein 4ozt,adeodly llr? Mary reports fom Asia, ‘ovfirm that Monrch butterflies Rave been sighted inthe ily of grucesme murder since ancient tes More recent, e large Monarch was trapped, end when exained, was {and te be ceryng «switchblade ond eredit cards bearing on alas, Trovblng, indeed. ae Se poate observs cA exist un spatiu rezonabil in jurul imagini chiar $i atunci cind parametri respectivi au valorile prestabilite: 0 pentru spatiu si 0 penta chenar (Far chenar). Aruncafio privire la figura 144, Imaginea din figura respectiva foloseste valo- 168 Partea a {V2 Insulotirea paginilor cu elemente ruitimedia tile prestabilite ale parametrilor respectivi si nu este inghesuitd de text. Pentru a modi- fica spafierea si chenarul, procedatiastel: 1 Pentru a modifica spatiul care exist intre imagine si text in stanga si in dreapta aces- teia, precizati un numar de pieli in cimpul Left and Right. 1» Pentru a modifica spatiul care exist intre imagine si text deasupra si dedesubtul acesteia, precizafi un numir de pixeli in cémpul Top and Bottom. f= Pentru a adauga tn chenar in jurul imaginii (vezi figura 14.5), precizatiin edmpul Solid Border un numér de pixeli care s8 corespunda grosimii chenarului, Péstrarea paginior sia imaghilor laokli& entra eaiza acest cra, bifaicaseta de validare Keep Images with Page din subcate- gor Publishing a categoriei Composer din casta de dialog Preferences. Dack procedati ste, imaginle pe care le inserai in Composer sunt copiate automat in {lrcctorul in care se afd fisieral HTML, In acelagi tmp este reformulata calea cite fiser pentru ocorespunde noi aplasia acestuia. And pablicai pagina uilizdnd butonul de publicare (veri Ora 2, .Publcarea pagini’), Composer va inclica automat fslerele grafic in drectoral de pe server unde este publicatfsierul HTML. Aceate ote ocattcterstic ul, care vi aj s pasta lolalt isierele HTML 5 imaginile din ee. 5 presupunem ci af bifatcaseta de vaidare Keep Images with Page, dar nu vrei ca Imdgined pe cate tnseat la un moment dat sie copiataindirectorul unde se afl foierl HAL Pentru aceasta, bial casta de validare Leave image atthe original Jocation din sectunea Image. Ca srmare, imaginea ni va fi copats. ah Crearea variantelor pentru imagini Putefi ajuta browserele sf coopereze cu imaginile dumneavoastra prin intermediul a dou optiuni speciale: textulalternativ si versiunile cu rezolufie scdzutS. Aceste opfiunt Se configureazd in caseta de dialog Alternate Image Properties (vezi figura 14.6), care se deschide executind cli pe butonul Alt Text/LowRes din sectiunea Image a casetei de dialog Image Properties. Pentru a aplica una dintre optiuni, completati cimpul corespunzator (puteti utiliza ambele optiuni) Daca introducei in cdmpul Alternate text un gir de caractere vid ~ doud perechi de ghillmele a4 |e eemeemaeee n Sin nv een eo fn cémpul Alternate text putell introduce textul care doriti si apart in locul imaginii, ind browserul folosit nu ofer& suport pentru imagini, Incercati si- formutati astfel sae tletprme dees comuniestcde ctv nagine Dach na frz un texan ‘Methuen trowserele care fers suport pena test allerativ vor aia un ‘Cn dont 58 fos, nto pagina, aceas imagine de mal multe or, nu ave neve de tral mule cop ale Imagini, Dac pe server ex o copie a fisierull respect putt insera imaginea espectiva de cate oi dri (ra'14: Inserarea imaginilor sa imaginl de fundal 169 In astfel de browsere, textul alternativ fer nige informati i arata mai bine, in acelag timp. 4s chmpal Low roto, introduce cle si denumirea eu corespunzitor versiunii cu rezolatie scizutd. (Pentru a risfoi dup’ fisier, puteti executa clic pe butoni Choose File.) : alr pure ie pe ute Fiona 148, Caseta de dialog Alternate Image Properties Editarea imagi atonal Et Image in sefumea Image a casetel de dialog y image a caste de dialog Image Properties deschide programol de edlare imagine deat tn eategona Compe dn choc de daly Preferences (vezi figura 14.7). : " aaa Frouna 14,7, Definirea unset program de ‘editare ‘a imaginitor ‘Acolo pute introduce calea si denunire fierululcorespunzitoare programulu de etre pe care don sil ullizas. Figura 147 prezintacalea sl denumireafigeral 170 Partea a IV. Incuflotirea paginitor cu elemente multimedia corespunzatoare programului Paint Shop Pro, asa cum a fost instalat de pe CD-ROM. Cur aceasts configuratie, puteti edita in Paint Shop Pro o imagine aflata in pagina din Composer procednd astfel: deschideticaseta de dialog Image Properties corespunza- toare imaginii si executafi clic pe butonul Edit Image. $tergerea imaginilor Pentru a sterge 0 imagine, executati clic pe ea pentru a o evidentia, apoi apisafi tasta Delete sau executafi clic pe butonul Cut din bara cu instrumente. Refineti ed stergind imagine, o indepartafi numai din pagina Web, nu stergefi si fisierul care o contine, Acesta rimane pe hard-dise gill puteti folosialtadata, Mutarea imaginilor Pentru a muta o imagine (sau un alt element al pagini) dintr-un loc in altul, puteti so stergeti din locul respectiv si s& o inseratialtundeva. De asemenea, o mai putefi muta prin tragere si plasare cu mouse-ul: plasatiindicatoral mouse-ului deasupra imaginit UUangi indicator va apirea o mand), executati clic si finefi apdsat butonul mouse-ului, tragefi imaginea in noua pozitie i eliberati butonul mouse-ului Retineti cd dacé mutati imaginea prin tragere si plasare, nu aveti precizie in pozitio- narea ei pe pagina; riman valabile aceleasilimitari privind pozifionarea imaginit. Pateti, de exemplu, s8 mutati o imagine care precede un bloc de text intr-o pozitie situ- ata dupa elementul de pagind respectiv. Inserarea imaginilor in celulele unui tabel Inserarea unei imagini in celula unui tabel (vezi Ora 8, , Organizarea textului folosind tabele si rigle orizontale”) este similard inserarii imaginil in pagind. Singura diferent ste cd intdi trebuie sf executafi clic in celula respectiva pentru a pozifiona acolo cursorul Ge edlitare. Apoi pute s8 executati clic pe butonal Insert Image din bara cu instru- mente Composition si s4 folosti caseta de dialog Image Properties pentru a selecta si formata fisierul GIF sau JPEG. Dacé imaginea este mai mare decit celula in care afi inserat-o, celula se extince (la fel, linia si coloana din care face parte) pentru a putea gazdui imaginea. Daca imaginea nu ‘umple in intregime celula, mai puteti si adaiugati nite text si sa i pozitionafi fata de {imagine prin intermediul parametrilor din caseta de dialog image Properties, Crearea unor marcaje si rigle originale Probabil cd in paginile create au Netscape Page Wizard (vezi Ora 3, .Crearea unei pagini ‘Web la minut»") satin alte pagini incircate cu diferite elemente, afi vizut marcaje si linii orizontale grafice, multicolore (vezi figura 14.8). Acestea nu sunt marcaje lini reale, ca acelea create cu proprictatea Unnumbered List sau cu butonul Insert Orizontal Line, cl imagini inline care scaniéna cu marcajele sau cu linile Ora 14: Inserarea imaginilor si a imaginil de fundal 174 Imagine tip ine, denumite uneo ares nsereaz, simply inte paragrae, Marcjle sunt inerate nantes lnlor de text individual care folosese matt de paregraf deci Lis. (Dac floss! List laturt de marcaeleduraneavoastra Roza, i ava aaj su numeri proven dest List) Feniua Shyine eeltteopime cind inser magne pe post de mara, ing o fini detest, aleget al doles Buton din stings de su eicheta Tet alignment din sehen Images caste de dialog image Properties, Foura 148. Marcaje gi rigle originale | Re GO-FOM- tat si vel so runoas cole de iagin GIF petra marae ‘ge orgnle. Vee Ane, Ce coming CD-ROM? Utilizarea unei imagini ca legdtura Dupa cum ali invé:at in Ora 9, ,Legaturile’ fecare legitura are doua componente: urea logituril (pe care o vede gi executi clic visitatorul) gi URL-al (sau calea TocalA gi denumirea fisierului) accesat de Navigator cand se executa clic pe sursa legaturti ‘Transformarea unel imagini in legitura const in atagarea URL-ului de imagine. De f&cut: Transformati o imagine in leg&turd | Cénd transformati o imagine in legiturd, practic, folosti imaginea ca sursa a legi- He] turin focu textului. Pentru aceasta: ae e JQ} 1. inserati imagines in paging (conform descrieri din secfiunea ,Inserarea un QS imagini GIF sau JPEG in Composer") si formatati-o dupa dorinta. '¥' 2, Executafi clisdreapta deasupra imagini si alegeti Create Link Using Selected «din meniul contextual. (Alternativ, puteti si executafi dublu clic pe imagine pentru 1 deschide caseta de dialog Image Properties, poi s8 aleget eticheta sectiunii y Link) Se va deschide sectiunea Link a casctei de dialog Image Properties (veri 172 Partea a 1V-2: ineuttirea paginilor cu elemento mutimedia ¥ figura 149), avand in cimpul Link Source denumirea fisierului care conine imaginea, Frouna 14.9. Secfiunen Link a ‘casetei de dialog Image Properties, avaind 0 imagine ca sursd a legaturit 3, Introduceti in cimpul Link to a page location or local file, URL-ul,calea local A.” cau denumirea tints, respectind indicafile din Ora 10, ,Crearea legaiturilor”. Inserarea imaginii de fundal {inocu eulri de Funda, puteifoloio inane repetatt (led image) un fsler grate (GIF sau JPEG) repetatpefnregul fundal Cnd imoginea respetivs a fost construitsaste! ncit si se potrivease exact cu copie itn toate cele pou colfu aliturarea genereazdefecul une ,textur” continue, cs hun fundaful af acopest deo imagine enorma (vezi igura 14.1), Din fericre, ele {al eate creat cu ajutorul une magi iinuscule;pecesrea unui fee grafic eicont de mare pentra a acoped pagina, ar sufoca mejoitatea conexiuilor Interne 24 Pe CO-ROMG- atapet cri ve gs ofrumasacolecie de Imagini pentru extur de funda é (vs nea 0). | In locul texturii de fundal, puteti alege pentru repetare si o imagine care nu se imbind perfect cu copiile ei, Utilizand aceasta tehnicS, puteti crea efecte de fundal simpatice, Asemindtoare celui din figura 14.11. In fine, puteti utiliza drept fundal o singurd imagine, care este suficient de mare pentri a acopet!intregul fundal al paginii (fi care nu neces repetare). Dar acest lucra nu ste recomandabil, de vreme ce o imagine atit de mare necesita un timp indelungat pentsu desedreare, Mull vizitator ar trece lao alt pagin’ thainte ea fundalul paginit ‘Gumneavoastri si fi aparut ra 14: Inserarea imaginilor si a Imagini da tundal 473 Frouna 14.10. texturt de fundal obtinuta prin repetarea tuned imagind Frouna 14.11, Un fundal simpatic, obfinut prin repetorea tei imagini Fata cael Te eae ov ik, ot die abl sa, cata] {ericit", obositor pentru ochi, Le 2b sau Intewn ears Pen rou canst re eet) io clr de tt cor oe ee prsonate (ie Or, | ‘Sobien odoaga aor popata pag) aa eo dscseth | nin che ar hut du ce | Cir sess as epi, en dl tat dio sie ea ese bapa gp anid x mat Un mod ee sea ess led {atop pia pg an ol sens mat in ei auras aia ‘Sorts un xt set sa enema formes nape sma, ee cre mote tes unl monet a8 ns 174 Partea a IV-2: Insufltirea paginilor cu elemente mutimedia De ficut Insert o imagine de fundal 1. Deschieti asta de dialog Page Properties alegind Format, Page Colors and Properties. 2 Brecutai clic pe etiheta secfiunit Colors and Background. * 3. fn zona Background Image, bifaicaseta de validare din stanga cAmpului Use ¥ image 4. Tsai calea si denumiea figierului care confine imaginea ce va frepetaté sau ‘A. execlai clic pe butontl Choose File entra risfoi dup el Observai ck apareo casei de validare Leave image at original location, Aceast casetd de vaidare ae efectidentic cu al clei din setiunea Image acasetei de dialog Image Properties -impiedich progranl Composer si copieze automat imagines de fundal in dlirectorul unde ese stocat iseral HTM. Aceasta in cazul in care parametet din case- ta de dalog Preferences sunt configura pentra a pista imagine 5 fpierele HIM. Tnolata Rezumat fn prajitura care este pagina Web, imagine sunt bucfelele de cocoa. $, dup cam linc tof cea mai bund pri este cea care confine exact atta cocoa cit trebule ‘prea rultebucifele de cocolatso pun pe aceasi nivel cu una cae nu contine doco ioe (noc nelogia cu mancarea dumneavoastra preferat: bat de pizza ~ cascavel, tnt dearahide-jeleu, RAM ~ viteza procesorulu, longevitate distract ec) Trebuie si va intebati nu numai dachaveti nevoie de imagini sau cit si folosite si dee ile oles Imaginilefolosite advc ceva uti in pagind ~ ca fotografia autoruls Sau a aubieealu, oi a imaginile produselor sas ale locurilordeserise~ sat sunt ‘numa pentru decor? O imagine sau doud,adaugate de dragul sili, meritéostencala, ns numa dac& feugese a mbunatateasea impcesia alse, Dack imagines foosité pare aruncaté colo mat mult pentru aeveao imagine, rena la ea. Decorat- pagina ulizand o formatae ingyjitaa textulu,frumasejen natural aunei bune organiza sun text stent elaborat. Atelier ist in privinta imaginilor. Dar eu am vazut 0 mulfime de imagini in cele mai grozave pagini, care au cistigat si premii. Nu exagerezi putin in ceea cele priveste? R.Probabil.Totusi, sunt de acord ca exist situri nemaipomenite, cu un confinut grafic extraordinar. Dar pentru fiecare sit cAgligator de premii, exist o sutd de situri care cexagereazA cu imaginile f8r8 rost sau estompeaza textul folosind textur de fundal nnepotrivite. Cei care au castigat premii s-au folosit imaginile in mod inteligent si cu tun anumit scop. Nu vreau si va descurajez ca si nu mai foiosifi imagini, Vreau Ora 14: Inserarea imagirilor sla Imagini de fundal 475 ‘numai si v8 panei intrebarile potrvite nainte de a arunca o imagine veche in pagina lumneavoastrs,Putei fi sigur cd acela cae cgtigh premio fac me Minitest Rezolvafitestul urmator pentru a vedea ct af reusit s inva Intrebair 1.Cind utilizatiimagini, cum vi pute asigura cf acea care na Te pot vedea (si cet au dezactivat descircarea imaginior in browser lo) pagina? in browserul lor) pot inflege pagina? a. Nuse poate. Ghinionul lor. i b, Folosese nunai imagini JPEG. « Furnizez text ,alternativ” descriptiv pentru flecave imagine. 4. Nici una dine variantele anterioare, 2. Cel mat indicat loc pentru scalarea nei imagini (modificarea dimensiunilor el) este: a. Composer (sau un alt program de editare a paginilor Web). ». Un program de editare a imaginilor cum este Paint Shop Pro. Miami 4. BucStavia, 3. Majoritatea browserelor pot afi imaginile de fundal, dar nu toate, Adevirat sa fals? R&spunsuri 1). 2.0). 3. Adevarat, Activitate Deoarece acum sit inser iain gndif-vb mal malta cer ce dori taf Tec prin veh fotografie faniie~ out vreuna cave aetebul Scant sa pe carestoavet seanats pent pasinadunneavoosts de baci? Priv in jar-vedeti Cova cea fotogrfa penta pagina dumneavonsta? OrA 15 Stilizarea paginilor cu elemente audio si video Probabil ci va asteptatica utilizarea sunetului ga secventelor video sa fie printre cele rai dificil aspecte intalnite in crearea de pagini Web. In realitate, includerea unui ele- rent multimedia in pagina const in ingerareaunei simple legitur citrefisierul care Confine elemental respectiv. Dei, dact titi s8 creat o legatura, sii si includei ele- mente multimedia in pagina (vedi Partea a ll, ,Referirea resurselor”) [Nu vi riméne altceva de facut decat si creat legitura ss plasati pe un server pagina Impreuna cu fiserul multimedia refer. Dupa ce facei acest Iucru, redareafigerulut ‘multimedia fine de vizitator. Vzitatorul va ala continutul fisiruli multimedia numai ddacitipulfsierulu reerit poate firedat sau afisat de browserul sfu ori de un program faunalian Oricum, nu il putt ajuta decatincercind si flosititipur defisere cat mai ‘cunoseute. ‘Totusi asta nu inseamna cd nu avet nimi de invifat despre adugarea elementelor cexterne in paginile Web. La strsitul aestel ore veti putea rispundle la urmatoarele intrebie 1 Cum functioneaza ,clementele externe” sla ce pot fi folosite? 1 Care sunt cele mai intalnitetipuri de figiere utilizate ca elemente externe? ¥ Cum se alege tipulfsierului extern asfel incits& poata fi accesat pe Web de un public cit mai larg sau numai de un anurnit public? Cum se insereaza in documentul Web legaturi ctre elemente externe? Cum trebuie prezentatelegituriecitre elemente externe,astfel inci viitatorii si le sgisensch atractve st functionale? Elementele externe Elementele externe nu sunt afigate sau redate in mod automat, atunci cind pagina Web ‘este accesata de citre un vizitator Ele sunt descircate (pe calculatorul vizitatorului) 51 afigate sat redate numai dupa ce vizitatorul acceseaza legatura gh Element extern, Fier eferit printrolepitrs din pagina Web cae poate De multe or, na browserul afieazd sau red figierul referit. AcestIucru este ficut in locul Ii de eatre o aplcatie ajutatoare (Sau de un modul anexat, in cazul programului Navigator) Exist browsere care ofera suport nativ pentru astel de tipuri de fisere, dar ‘ind fisierul este indicat ca element extern est casi cum ar fi utlizats 6 apicate autatoare, Ora 15: Stilzarea paginilor cu elementa audlo si video 177 De exemplu, Navigator oferd suport nativ pentru fisiere grafice de tip JPEG; ste s le manipuleze atat ca elemente interne (imagini inline), cit si ca elemente externe, Cand 0 imagine JPEG ests indicata ca fisier extern, ea nu face parte din pagina si Navigator nu stie unde si 0 puna. Astfel, in ciuda capacitii sale de a afiga imagini inline de tip JPEG, Navigator deschide o now’ fereastra pentru a prezenta imaginea JPEG accesata «a figier extern (vezi figura 15.) Ce se intampld inss, dacs browserul viitatorului nu dispune de suport nativ gi nici de o aplicafie ajutatcare pentru un asemenea tip de fisier? Cnd vizitatorul executa clic pe legatura, browserul descaretfisierul gil salveaza pe hard dise, iar vizitatorul poate instala, mai tirziu, 0 aplicafie care si redea fisierul off-line. Deoarece fisierele care nut pot fi redate sunt descarcate si salvate, chiar si browserele text-only pot captura de pe Web fisierele externe, pentru a fi redate ulterior cu o aplicatie corespunzaitoare sau pe un sistem care dispune de suportul necesar. uri de elemente externe Foun 15.1, sualizarea unui fisier JPEG extern eu Navigator Utilizand tehnicile de includere a elementele externe, puteti crea legaturi citre orice tip de fisier, incepanc de la clipuri video si audio, pind la biblioteci de legare dinamic& (.22l) folosite de Microsoft Golf | li putes ajta pe vat st acest pure defisiee pe cae le ula, incluzand in pagina | legatur cate stuie de unde pot descicaapiai ajtatoare pentru redaeafsieelr. (et sectiunes ges pentru o prezetare adecat, care urmeaz fn aceast or.) Clipurile video si audio ar putea fi redate de citrevizitatoy ind fisierele pentru “Mierosoft Golf sunt itil ai putin petra programul respect). intrebarea pe care trebuie si s-0 puna orice autor de pagini Web nu este Ce elemente exteme a5 putea furniza?, d sOare ce pot reda sa ais browserele sf apical ajutatonre Fotoste In vizualizarea pagini mele?” 178 Partea a IV-a Insutletiea paginilor cu elemente multimedia Din pate, exists tendinta c ear sistem de operre sha tpl prope de ere aa esetescuteene sau oel putin £4 favorizeze anuimte tpi de fisiee. Astfl,anumte ery eeeniir ee hep anarene reine eae ‘depart. ined de cele mal multe ori un anurat tip de fee poate ft edat pe mai malte ‘lume sane verzt de un sing stem ee De empl easels in format Video fr Windows (oe) unt pee stem Decry ecient ee oo ei tg Sees fra care nu pot Roceste de ts ane, ave et ost w Uutnah format ca cea mai larg sustnere chiar dack na est niversl accept. T Alegel pul dese el mai agreat de ce chorale se desta pagina De Seton, artist grfici protesionisti tind si utlizezeealalatoare Macintosh. Dee ee due ebvensta 9 nore cu element xen Hntve commiaten reepeedeh acgen pure de iene cae fovorszn pre de Mac s Pancha upon virtotorlor ma multe versiuni le fisersor ou lemente aaa ere acc a format fen (ea sere insult Sues pen tru o prezentare acecvata", care urmeaza in aceastd ori). fn sfarsit, nu uitati cd, de rule ox, cei cu browsere text-only pot accesa elementele ee ae ea veda agile line Cand broweerl wuss fires SELass nicer extn descr fl savensa peters Acet aera permite SENSE Spec rede anu alle ra ape co jtorl rel apa caer le copene Gye ot auch pun clout ae ete ola eorepan- sate entra a reds sua aie Berl respec in cara Gasereior dverselor pur de elemente exes, este prevents eeasia cores. ncStarefiacar tip defer, Extensia ser este deosabt de important deoaree auth | Srowserl st stableasd aicaaattcare (sau mod nem) necesar8 resi sau fia | tira, ‘acd pubes un fer car conjine un elrnt exten gnu respect convania cu piv fetensi (de exempl, flo extensia.vid pent un videocp in format AV), apraape ‘Spur ed filer repectv nu va putea fl accsat dete atator, cu toate cd va fi descarcat pe caouatareleacestora Imaginile Conform celor prezentate in Ora 13, ,Obfinerea (sau crearea)imaginilor pentru pagina Web", pentru imaginil inline din paginile Web se foloseste cu precidereformatul GE. Inacelasiscop. da ca o frecvent mai mcf, este flost i formatul JPEG, care permite preventares unorimagini mai apropiate de ralitat. Des imagiile GIF si PEG pot fi Fotosive ca imagin inline, na exista nil un motiv pentru care si nu le ofr ca ele- mente extemne, De fapt exist motive cae sprijind ulizare lr a element externe. Sa presupunem c& avei de prezentat o mulfime de imagin ~ de exemplu, fotografi ale produselor pe care le comercalizafi, ale angoailor sau ae fami, Daca le inserai ca Fagin inline, chiar in format GIB va crete foarte mult timpul necesartransmiteit {nrc paginviaitatorului. Cu cit erste timpul necesar fis imaginl,cu att crese forsee co visitetorul sd tread lao alts pagina Far sk aprecieze in integime mess Ora 15: Silizarea paginilor cu elemente audio sl video 179 durmneavoastr,fntro asemenea situatie,incercafi si folosfi ct mai putine imagini inline gi s8fuenizaticelelalte imagini ca clemente externe care si fe accesate prin inter- medial unui menit sau al unor miniaturi (vezi sectiunea ,Sugesti pentru o prezentare decvata", care urmeaza in aceasté or), pamer Furnizarea imaginilor ca elemente externe are gi alte avantaje. Cand folosiiimagini inline si doriti sh evitaticonstruirea unei pagini a ciel afigare dureze o siptamand, trebule si compromitei aspectul imaginilor prin reducerea dimensiunilor acestora $i 2 rumirului de culo Cand imaginile sunt externe, puteti publica imagini cu calitatea dort de dumneavoas- tea chiar si itragini JPEG de calitatefotografics (pe 24 de biti), care ocupa intregul ecran (Este adevarat c& atuncl cind vizitatorul executd clic pe legatura cate o astfel de imagine, s.ar patea si astepte mult pind este afisata Insd in momentul in care vizita- torul a ales s8 vada un element extern, a vazut deja continutul documentulu si este foarte probabil si astepte rabditor) Aproape toti artigti care igi publica portofoiile pe ‘Web fornizeaz? fotografi ale hicriilor sub forma unor imagin JPEG externe deoarece ‘este cea mai buns cale de prezentare Desi ca imagin’ inline nu pot fi folosite decitimaginile GIP si JPEG, ca elemente ‘externe pot fi flosie alte formate pentru imagini, Imaginile GIF st JPEG au fost favorizate deoarece principale sisteme grafice de operare (Windows, Macintosh $i X Window) ofer suport pentru ele. Celelalte tipurl de fgiere grafice sunt recunoscute de aplicaile de pe unul sau dou dintre acese sisteme si foarte rar pe toate tei. In consecin{,putei oferi imagini in urmétoarele formate, isi ar fi mai bine sé le conver- tii ssi le publica in format GIF sau JPEG ort de cite ori este posibil Publisher's Paintbrush (PCX) si Windows Bitmap (BMP), principale formate {gafceutilizate in Windows (3.1, 95, NT 3198) Imaginile create cu programul Paint din Windows 95 pot fi salvate in orcare dintreaceste formate. Deoarece Paint poate fi utilizat ca aplicatie ajutatoare, orice browser grafic din Windows care utilizeazs aplicalt ajutitoare poate afisa figiee externe PCX si BME. $i in universul Mac exist aplicatit care ofera suport pentru fisiere PCX, cele care ofera supott pentru fisiere BMP find foarte putine. Prin urmare, este indicat s&folosti formatele PCX si BMP rumai ind documentele dumneavoastrd se adreseaza utilizatorilor de Windows. Tagged-Image File Format (TIF sau TIFF) Figierle TIFF sunt de multé vreme stan- dardul pentru imaginile scanate si majoritatea programelor pentru scanare salveaza limaginle scanate infisiere TIFF (pe ling alte formate) Fisierele TIFF sunt ideale pentra imaginile de inaltarezolufie destnate tiparii, dar ca elemente externe tind Skocupe mai mult spatiu dectt fisierele cu alte formate. Sunt utiizate pe toate tipurile de ssteme, ind aplicatile care ofera suport pentru ele sunt, de obicel, pro- sgramele de tehnoredactare computerizata, “Macintosh Picture PIC sau PICT): Formatul pentru imaginile de pe Macintosh. Caleulatoarele Macintosh oferd suport naiv pentru formatul PICT, dec orice vizitator care are Mac poate vedea fisierele PICT din documentul dumneavoastrd. Dar suportul ‘entra formatul PICT este ar intalit dincolo de lumea calculatoarelor Macintosh XBME: Formatul pentra imaginile bitmap din X Window. Sistemele X Window {mpreuna cu majoritatea interfefelor grafic pentru medié UNIX ofers suport nativ pentru formatul XBM, deci aproape toi viztatori care uilizeaza un sistem UNIX tu interfafa grafic, pot vedea fisierele XBM. Totus, suportal pentru formatal XBM este rar intl in afarasistemelor UNIX. 180 Partea a 1V-a: Insufletea paginilor cu elemento multimedia Secventele video re Web apar tri tipuri principale de formate video. Fiecare dintre ele ofera o calitate Video acceptabild (din punctul de vedere al vizualiziei pe calculator) si toate trei pot ‘avea gi confinut audio, Formatul MPEG ofera cea mai bund caitae, nsé fisierele MPEG sunt in general mai mari decatfiieree cu alt format care confin acelas clip. Video for Windows (AVI sau Audio-Video Interleave): Fisierele AVI contin atit imagine, cat si sunet si reprezinta standardul pentru videoclipuri in Windows 3.1 si Windows 95. Miniaplicatia Media Player din Windows 95 oferi suport nativ pentru fisire AVI, in timp ce utilzatort de Windows 3.1, pentru a redafisiere AVI, trebuie si instaleze programul de redare Video for Windows. $i utilizatorii de Mac pot instala programe de redare a fisierelor AVI (sau pot utiliza un browser care dispune de suport nativ pentru formatul AVL, cum ar fi Internet Explorer), ins in afara sis- temelor Windows, sunt mai bine susfinute formatele MPEG si MOV, Motion-Ficture Experts Group (MPG sau MPEG): Un standard independent desti- nat secventelor video si sunetului de inaltSealitate, Pe fiecare tip de sistem este necesar un program de redare a figieelor MPEG (cu toate ca imbunatafirile din Windows 95/NT si Mac vor permite curind ca fisierele MPEG si fie redate nativ pe rajoritatea ealculatoarelor) Datorité calitafi deosebite oferite de formatul MPEG si ‘a numérului mare de clipuri MPEG de pe Web, majoritatea navigatorior interesatt de secventele video au instalat un program de redare a fsierelor MPEG. QuickTime (QT sau MOV): QuickTime este standardul video pentru Macintosh, corespondentul lui Video for Windows. Toate sistemele Mac dispun de suport nativ pentru QuickTime, iar utiizatorialtorsisteme trebuie sf instaleze un program de redare sau un program-anexa (ori si foloseasca un browser care dispune de suport nativ). De exemplu, utilizatort Windows pot instala un program de redare a fisierelor QuickTime pe post de program ajutitor sau pot adauga la programmul Media Player o extonsie care permite redareafisierelor QuickTime. Mai exist Shockwave Director Shockwave este un program-anexi (disponiil in versiuni pentru Navigator si Internet Explorer) care permite browserului s& prezinte coninutul fisierelor multimedia create cu programul Director al firmei Macromedia. Deoarece Shockwave este gratuit, confinutulfisierelor create cu Director este accesibil oricSrul utlizator de Navigator sau Internet Explorer care se ,deraryeaza” 5811 descarce st st instaleze. Totus, pentru a crea confinutul trebuie sf cumpérati programul Director si, adesea, si faceli modificdri pe serveral unde il veti publica. Utara prosrmula Decor et cra gsrer mulineacesinte eae | ree Sets re ed eae daspre aceasta, vast Web al feel Macromedia, aati adresa Secventele audio hieep: //iww macromedia. co. Probabil cd secvenfele audio reprezinté partea cea mai confuza a fisierelor multimedia de pe Web. Acum exist 0 mulfime de formate, iar numéul lor ereste an de an ca turmare a incercirilor cle Imbundtatire a calitaif sau a vitezet de descarcare a infor- rmafiei audio, Ora 15: Stlizarea paginlor cu elemente audio si video 481 Desi exists tronsere care contin suport nav pentru teva formate audio, efectul este similiar: apical ajtatoare. Se desehice o ferent popsup care conine batoane de cone, cum arf Pay sa Rewind ee Bsc audio /AU sat SND): Cel mal cunoscat format audio; de sport nativ pentru acest format dipuncitevabrowsere si majsttenapicfirajttore penta redareasunetelor. Ci toate of Basi sudo ofer o caltate sizut, spinal larg de Care se bucra sh dimensiuea reds afisereor recomend penta mf folosit in maortatea czy cu excepiaelor i care este neceraio caltat rida. ‘Windows Sound Clip (WAV) Formatul standard penira cipal mio in Window: G.1,95, 98 iNT) Cabltea este aseménatoare cele oferite de Basic aco, nek acest format nu ete sstnut in afar sistem Windovre. Formatul WAV este indieat pentru furivarensunetelor etre iizator de Windows, RealAuco si TeueSpeec: Acst tandardeconcures28 pentru ulizare lor pe Web Insuportal ado in timp rea. Aid int rea” inseamnnd cl dateie audio pot redae pe msor ce sses Ia cent cesta na tebe astepte pnd se desearch tot fisierl, pentru ai asculta connate Drepturmare,flosind aceste formate pot & publiateFsiere auido mult mal mat inclusv programe nie de radi sau emi- shini indirect Pent afurnia in pagina dumneavoasta elemente extere in format RealAudio sau TrueSpeech, tebui configura sftware-l special de pe server Web. Petra redareaacestor formate exist programe gratuit, ieatrebue plait pent server Ponta anal mote dese za omalor Renda, TsSpesn si Soekwae ‘et pogo br URL reset ut ati neva ante on pe ato Ge Alte tipuri de fisiere Scopul principa. al tehnicilor descrise in aceasta ord este de a ofer, in paginile Web, legaturicdtre fisiere multimedia, Cu toate acestea, veti vedea 8 pasii descrsi in sect nea urmatoare pot fi folosifi pentru a pune la dispozitia vizitatorilor orice fisier. Repet, procedura de ctzare a unei legituri citre un fisier extern este aceeasi, indiferent de Confinutut fisterulul. Nu trebuie decat sa determinals daca cei vizafi au hardwware-ul $1 software-ul necesare vizualizari elementelor furnizate, Citeva dintre cele mai intalnite tipuri de fsiere oferite pe Web ca elemente externe ‘Adobe Acrotat (PDF): Adobe Acrobat reprezinti 0 incercare de a crea un format de document care sa fie uilizat pe mai multe platforme. Un fisier PDF (inclusiv fon- tril, formatarea si culorile textului con{inut) poate fi citit pe diferte sisteme, printre care Windows, Macintosh si X Window. ‘Adobe PostScript (PS): Limbaj de descriere a paginii, PostScript a fost folost la ‘nceput pentru documentele tiparite. Exist putini utilizatori care dispun de pro- sgrame pentru vizualizarea pe ecran a fisierelor PostScript, ins& mult mai multi (mai ales uilizatori de Mac) au imprimante PostScript i pot tipdri acest tip de fisiere. PostScript constituie o excelenta modalitate de distribuire a manualelor sau cSrtilor care urmeaz? a fi tiparite 182 Partea a IV-a:Insutetrea paginilor cu elemente mutimedia (Ora 15: Stiizarea paginiior cu elemente audio si video 183 ‘Text ASCII simplu (TXT): Nu este cea mai eleganta cale de a oferiinformatii, ins’, fri indoial’, este recunoscuté de toatd lumea: tofi vizitatorié de pe Internet pot citi un fisier text. Nu mai riméne decat sd stabil in ce limba scrief textul respectiv De facut: Retferiti un element extem Pentru a referi un element extern: 1. Pregatiti fsierul care confine elementul respectiv. Ideal ar fica fisierul s& se giseasca in acelasi director cu documentul,astfel incat legStura s8 poatd fi expri- ‘mati sub forma unei denumiri relative de cale. Cf enum un le pe carne sca element een rebue sk | utilizal) extensia standard corespunzatoare tipului respectiv de figier. Vezl sectiunea “pat mente enone nept o ‘¥ 2. Creafi sursa legaturit in unal dintre urmitoarele moduri: Compuneti textul pentru sursa legiturl Inserafi o imagine care si reprezinte sursa legituri 3, Selectati sursa lepaturii (evidentiind textul sau executand un clic pe imagine). 4. Executafi clic pe butonul Link din bara cu instrumente Composition. Se va deschide sectiunea Link a casetei de dialog Character Properties (vezi figura 15.2) Sursa legatusli pe care afi selectat-o apare in jumbtatea superioara a casetei de dialog, Four 152. Configurarea tunel legituri etre un element extern 5. Introducefi in cAmpul Link to a page location or local file denumirea completa a fisierului care confine elemental extern. 6, Executati clic pe OK. Legitura este gata ¥ 7-Tentru a vedea cum arata documental in Navigator, executafi clic pe butonul Preview din bara cu instrumente Composition. 48, Testati legitura pentru a va asigura ci atat ea, cit si figerul corespund configu- ratiel programului Navigator. Aceasta nu insearnna cl elementul extern va ‘4 funcfiona corespunzator intr-un mediu difert, dar este un inceput. Sugestii pentru o prezentare adecvata Dup cum putet vedea, crearea legituri cite wn element exten este mai simpla decit crearea sau obtinereafigeruli care confine elemental respectv, Dar secretul utlizaet tin element exten nu const in conigurarea legituri ia fsieruli cin prezentarea legaturiintrarn mod atractiv si uh in sectunie care urmeaza va sunt oferite sugesti pentru prezentarea adecvatsa ele- mmentelor exerne Precizati tipul si dimensiunea figierulul Ori de ete ori furnizati un element extern, precizafitipul si dimensiunea fier care ‘confine (veri Fgura 153)-Daca incudel in legiturd aceasta precizare (sau o plasafi foarte aproape dea}, inainte dea execu chic pe legiturs,vitatort vor putea rispunde la urtratoarele intrebai ¥ Dispun de programelenecesarerediri afisrit su executirtacestul tip de fisiere? 1 Dispun de timpulsi/sau rabdarea necesare deschtciri unui fier cu o astfel de dimens eae anes: sy er et Ran pee ok Se Be Te Ke Ha Fauna 153. Tipul si dimensiunea fislerui corespunzator clementului extern Sydney's Film Clip Archive entra : tegtur ree! rando in sirectar. | | cans i | Leigh in streetcar. | 2 sme) 4 Me in a streetcar. Refineti ci mult: dintre navigatorii de pe Web sunt inci novici, mai ales cand au dea face cu diferit tipuri de fisiere multimedia. Pentra mulfi dintre utilizatorii de browsere, configurarea aplicafilor ajutatoare este confuza si, in consecinta, nu 0 fac. | { 194 Partea a IV-a: Insufletrea paginior cu elemente multimedia Puteti face ca documentul dumneavoastrd si fie mai .prietenos" daci, pe langa tipul dimensiunea fsierului, 1 Descriefice inseamn& tipul fisierului si de ce este nevoie pentru a accesafisierul. Nu spuneti numai ca fisierul este AVI; spuneti ca fisierul este de tipul Video for Windows (AVI) si c& pentru redare necesits Windows 95/98/NT, respectiv progra- mul de redare Video for Windows pentru cei care au Windows 3.1 sau Macintosh. = Indicatite vizitatorilor unde pot gisi aplicatile ajutatoare necesare redirii sau afisi figierului respectiv. Dac& stifio sursa online corespunzitoare, puteti furniza 0 legatura citre aceasta. Astfel, cei care vor si vada fisierul si nu dispun de software-l necesat, pot si sar la sursa indicat, s8 obtind aplicatia ajutatoare si s8 revind la pagina dumneavoastra.(Vizitatorii pot proceda si astfel: descarc§ i salveazifisieral dumneavoastea, fac rost de aplicata ajutatoare, dupa care redau sau afiseaz4 offline fisierul.) 1% Oferitifgierul respectiv in mai multe formate, conform celor descrise ulterior in aceasté ord (vezi sectiunea ,Furnizafi elementele externe in mai multe formate”). Utilize imagini descriptive ca surs& a legaturt Ete bine cape Ling indicare tut fgierul sub forma unui text alata, 58 folosit rept sursi a legiturto imagine cae s reprezint ipl fsierului, De exemphu, Ca sursia legituri pentcu videoclipuri este potrvt o pictograma cu o camers video. © pictoprama legata de sunct, cam ar flo ureche sau un diftzor informeaza vizwal Viitatori eh legitura duce etre un fgier audio, Relinel cf utlizaren acestorimagini ‘hu poate nlocaltextul explicativ incu in legtur. In eau videoelipuilor ocamerd ‘ideo in miniaturd arate este vorba despre un videoclip, dar mu spine dacd este un fsier AVL MPEG sau MOV Mat il textulexpicalv est esenfal penta cei care uti- lizeazd browser text-only 4 ta wai: fn aseranea situa, cl cae tteazs browsee text-only pot ols elamentle eee. Dac flo oimegine ca surs a et una ofgaturd sub forma unui text. Prezentafi miniaturi ale imaginilor cu dimensiuni mari ‘Dup& cum am precizat deja in aceasta or8, miniaturile reprezintS o modalitate foarte potrivitt pentra a crea legituri semnificative catre imagini externe. Miniatura este 0 versiune redusi, cu rezolufie scAzuti, a unei imagini cu dimensiuni mari. Ba va ap3rea fn pagina sub forma unel imagini inline si serveste ca legiturd citre imaginea mare, cx rezoluie inal. Miniaturile le furnizeaza vizitatorilor o idee despre aspectul si continu- tul imaginii complete iar ei pot decide dacd meritf sau nu si o descarce. cI ‘vajtorul una program de adtare sau al unuia de converse, puta crea miniatu GIF ale imapinior JPEG gi le pute fois! dept eptur cate imagine JPES exter. Aceasta v8 armites8expoaal suport lp, fet pnt imain inline Ta format GF cha sates ld ori iagin JPEG exces, de ira catate, Ca in cazuloricSreilegituri citre un clement extern, impreund cu miniatura trebuie 3 furnizatitipal gi dimensiunea fisierului, Dacé aveti un grup de miniaturi care sunt Ora 15: Stiizarea paginior cu elomente audio si video 185 Jegaturicitre fisiere de acelasi tip si aproximativ acceasi dimensiune, puteti descrie | figierele o singura dati pentra intregul grup, cain figura 15.4, ai as _ mea Fauna 154, SEES ee eae See Miniaturi pe post de ——— = eae legituri etre imagini seo ee | Furnizati elementele exteme tn mai multe formate Patel reaizaconversiaimaginilr inte difrte formate cu ajutorl programelor de estar amano sau al ular de converte imeginlor Putgh convert f Bsierele in format video sau aio ins acest luru este a fl clftaea feral ‘euler ell orginal Cu tne ase dac pute efi sce at multe versiuni ale unl element extern lecae int-un alt format extinct pos me ver re inn al forma extn poste De exemplu,dack ofr acl videoclip ait in format AVI it in format MOY, pute sigur cL pot rea aproape tof viitatorl eu Windows sau Macintosh, Deck ‘fer o imagine externs att in format PEG, it i format CI ctor care pot vedea Imoginile PEG le furnizat o magine de callate 9 acca. asaleg ees ae vara scelor care pot vedea numa imaginile GIR tn figura 18 nt prezenate doa legit cite dous versun in formate erie ale aceuas videocle, Rezumat {in Composer, inglobarea figierelor cu elemente externe este o bagateli: asigurati-va ca cope eens gt or ce eh ui pute igri dest ach acco pre epee oe ea a Publica pagina si Composer v8 poate tas act acct lucre age cur reba (vezi Ora 21, ,Publicarea paginii”). Ceres 106 Partea a Wa: Insullatrea pagilor cu elemente muted (ra 15: Stizarea paginor cu elemento audio si video 187 Minitest Foun 155. Rezolvaftestul urmator pentru a vedea ci 2 inva Feta : pa afi reusit si inva videoclip, furnizat it Intrebari formate diferite ere §3* Brando in Streetcar... 1 Vi Weds (AD 62 righ in strootor. eae Partea dificla const in crearea sau alegerea tipului de fisier potrivit pentru a atinge scopul propus: un public cit mai larg sau un anumit public. Acas8, PC-urile sunt mult ‘mai intalnite decdt Mac-urile, prin urmare daca vizafi locuinfle, este mat indicat s& folosii fisiere in formate acceptate de Windows. Multi dintre angajatifirmelor, mai ales ingineri si cei de la departamentul tehnic, au sisteme UNIX cu interfats X Window. ‘Adesea, ei sunt trecuti cu vederea de citre autorii de pagini Web atunci cind stabilesc formatul fisierelor externe, Dack mesajul dumneavoastra se adreseazA si acestora, incercafi sé folosii fisire cu format corespunzitor sistemelor for Atelier jar { Dacd un videoclip sau un altfisier este deja referitintr-o alld pagind Web, pot si creer o legaturd cite el in loc sil farnizez eu insumi IR Sigur cA puteti: acest procedeu este destul de intlnit latins cteva regu care trebuie respectate in asemenea cazu in primul rand, ea intotdeauna, trite Webmaster ului care se ocup de stl espec- div un mesa prin posta electronics si cere permisiunea dea refer sil fserl Inal doilea rand, evita si referit fsierul in mod direct. Referfi pagina in care pare legatura. Pind la urm, stl care confine fsierul vi face o favoare; pte tmcars8 facet ca, nainte de a activa legstura,viztatoral si arunce o pivire asupra snesajulat din sit In plus, dact sil foloseste fiferulviolind dreptrile de autor {ceca ce este grew si aflati,referirea pagini in locul fiserulu va seuteste de a pica in acceasi abatre. Cand creat legatura,puteti utiliza tehnicile din Composer (tragere si plasare sau taiere 9 lipire} penruainsera cu usurinfdlegatura in documental dumneavoast 1, Care dintre elenentele urmitoare trebuie furnizate intotdeauna ca elemente externe? a. Imaginile JFEG. b. Imaginile GE « Fisierele video. . Fisierele audio. 2. Cae dine apecteleurmatoare i aut pe vztatorl in privinfa elementelor extere oferite in pagina dumneavoastra? p ioe a. Miniaturi ale imaginilor cu dimensivni mari . Legaturi catre programele de redare (ajutitoare sau anexa).. Text inclus fy sursa legaturi, prin care precizati tipul si dimensiunea figierului Toate cele de mai sus. 5, Cei mai mull avigtoi de pe We ndferet de tpl aewatruh pe cae ae Heese) npn de cel ecesne rer celor al cuneste formate sue vide Adevarat sau fals? 7 oa Raspunsuri 1. (9, Celelate optiuni (chiar sid) pot fi furnizate uneort in cadrul paging 2d). me 3. Adevirat Activitate Revedeti fisierele multimedia si paginile Web (inclusiv imaginile) pe care le credeti de ccuviinga. Eliminai-le pe cele care pot fi furnizate numai ca elemente externe. Printre cele ramase (cele care pot fi furnizateatat in pagind, ct sca elemente externe), exist vre- ‘unul care este mai indicat s& fie furnizat ca element extern? ORA 16 Animarea imaginilor [Ati vizitat vreodata o pagind Web care confinea 0 emblema rotitoare, aburi care se ridi- cau dintr-o ceased de cafea sau rigle grafice care licireau, palpaiau sau dansau? Poate ch nu sti dar aff avut dea face cu GiF-uri animate, niste imagini inline speciale, in format Gf care se succed cand sunt vizualizate cu un browser Web. [Urmeaza s& invatafi cum si creafi singur toate aceste oramente, La sfarsitul acestet ‘ore veti putea rispunde la urmatoarele intrebari: Ceeste un GIF animat? = Cum se creeazii cadrele care alcatuiese animatia? = Cum se combing cadrele ints-un fisier animat? 1 Cum se personalizeaza aspectele care jin de redarea animafiei, cum arf viteza cu care se succed cadrele? = Cum se inserea7 in pagind un GIF animat? Utilizarea GIF-urilor animate GIF-urile animate sunt exact ceea ce par fie: imagini GIF care se migc8. Spre deose- bire de celelalte tipuri de fisiece multimedia intalnite in acest capitol, GIF-urile animate pot contribui la aspectul pagini. In consecint, ca si celorlalte imagini inline, le putejt Controla alinierea, chenarul si celalfi parametri de formatare (vezi Ora 4, -Inserarea imaginilor sia imaginii de fundal"). Dar, spre deosebire de un fisier GIF obisnuit, un GIF animat se poate misca - mai put eadevirat, Un GIF animat nu este potrivit pentru prezentarea unui film Disney. Am putea spune ci GlF-urile animate prezinté 0 animatie simpla si foarte scurts, care insu- flefeste putin pagina f@r a incetins prea mult descarearea el lat cateva exemple de ‘GiF-uri animate: o luménare care palpi, o bomb (dle desen animat) care explodeazs, o linie orizontalé care lichreste si se onduleaza. Mfinile din figura 16.1 reprezint& un GIF animat; ele aplauda. (Nu va pot dovedi pe hint, dar este adevarat.) Fiouna 16.1. ‘Aceste mid aplauda | cur Pvt ari Prien te Cooma ORLANDO THEATRE PROJECT Ora 16: Animarea imaginior 189 g Pentre a ata adreselecdtorva situtl cu GIF-uri animate, consultai Aneva ©, .Resurse online pentru autrt ae Wed". Penta afla cum se copa imagine ~ fie ea cha GIF animat~ de pe Wed a chiar GIF animat ~ de pe Web pe calculator | | dumavas ej Ore 18, Obnetea (Sau rae) maginior pet pagina Web". | Pentru incepstori. cea mai bung cale de a obfine GIF-wri animate este de a le lua dintr-o bibliotecs. Pe Web exist zeci de situri cu GIF-uri animate (vezi figura 16.2). De fapt, chiar si atunel cAnd utilzati Netscape Page Wizard (vezi Ora 3, .Crearea unel pagini Web la minut»"), putei insera in pagina creat& marcaje sau rigle care sunt GIF-uri animate. a Compas fea suport WYSIVYYS complet pentru GIF-urle anime. In eeastra gin Compas, cesta sunt animate mod normal deci pentru a vedea anmaia nu este nece= ‘ars vualza seul cu un bowser Four 18.2, GIF-urile animate sunt uae sor de gasit online aaa | AwWweb Wiza o's SSMS, oesciney™™re! Sa oo aunt Ser GIF anima, inser in documentul din ‘omposer ca pe o imagine inline obisnuit,folosind butonul Insert Image sau alegan Inset image . Hono Inert Image sau aleghnd Dp inserar iParsinate st tate ca orice al imapine IF nn. olin thal vile real iagior Gf ehigaue pte ene Foonnd 1 si poajona 12 ari tet pelingt ek f silat 1 55 adit un cena 190 Partea a IV. insutetivea paginor cu elomente multimedia ‘Aceste modificiri se fac prin intermediul casetei de dialog Image Properties, care se deschide cand executati dublu-clic pe GIF-ul animat din pagina, Pentru detalii supli- mentare, revedeti Ora 1. Crearea GIF-urilor animate act doritis& v8 creafi proprie Glf-uri animate, aveti de parcurs dows etape. Desi un GIF animat este un singur figs el este aleStit din mai multe cadre, asemenea unet secvente de film. Fiecare cadru diferd putin de celelalte (vez figura 163) And sunt derulate rapid, se ‘reeaza iluzia unei imagini in migcare. (Majonitatea GIF-urilor animate sunt alcatuite din cel mult 12 cadre) inceput, GlF-urile animate smu sunt altceva decdt 0 serie de imagini (cadre) separate Fiouna 163, Ca orice animatie, la Cele dou’ etape care trebuie parcurse pentru crearea unui GIF animat sunt: 1. Crearea cadrelor separate. 2, Combinarea cadrelor intr-un singur fisier Fiecare cadru este creat ca un fisier GIF separat. De exempta, utilizand Paint Shop Pro, afi putea crea o imagine GIF static ce reprezintd un mugur inchis. Dups ce salvati imagines respectiva, o puteliedita pentru a arita ci mugurul s-a deschis putin, apoi salvati noua imagine inten nou fisieralegind File, Save As. Astfel, putefi crea o serie de imagini care, prezentate secvential si arate cum se deschide mugurul. 0 tehnica simp 5 eficients const in utilizarea unui GIF animat pentru a face textul si para putin cite putin. De exemplu, in cazul emblemei unei companii, puteti adduga 0 rout literd din numele companii la fiecare dow’ cadre. Prin animarea secventei respec: tive se creeaza impresia ca numele companiei apare singur pe ecran, litera cu liter. De facut: Creati imaginile necesare unel animatil act dort facet un scut exerci de animate, crea, conform descent urma- tonre,o serie de imagini pe care le vet combina ulterior, dupa parcurgereasectuni urmatoare 1. Deschideti programa Paint Shop Pro (existent pe CD) 2. incepet o nous imagine (alegind File, New). 3. Pentru a crea o imagine cu dimensiunile 100x100 pli, dati valoarea 100 para- metrilor Width si Height din easeta de dialog New Image 4. Alege File, Save Assi slvati imagines sub denumirea ose}. gif. (Aceasta va imaginea de inceput, dup care i vor face apariiaceelalte.) 5. Executai clic pe butontl Text din bara cu instrumente Paint at (ra 16: Animarea imaginilor 191 6. Executati clic pe imagine. Se va deschide caseta de dialog xt, ilustrata fi Beaute gh ta de dialog Add Text, itustrata in 7. Alegeti en font amuzant go dimensiune mare (18 puncte sau mai mull), 8, Tastatt prima literd a numelui dumneavoastrd in cimpul Text din partea de jos a casetei de dialog, apoi executat clic pe OK. * r , 9. Executati clic ings marginea din stinga a imaginii pentru a insera litera acolo, 10. Alegeti File, Save As sisalvatiisierul sub denumirea Yone2. gi 11, Repetat: pag de la6 Ia 10 pentru fiecare dintre literele rdimase. La fiecare repetare, introduce cite o litera in dreapta literei anterioare gi salva fisierul foosna un numa ma mare tie) net aga ma depart. Las ee} .g1 oat aga mal depart. Lassi a veti avea o serie de imagini cum este cea din figura 16.5. * ie Four 16.4, Utitizarea casetel de dialog Add Text din Paint Shop Pro la construirea catrelor de exercipiu Transformarea imaginilor in animati Dap ce af creat cadrle neces tei combina ntun fg Ast ura se fae cu un progam spec eh nin fier GIF de ip 6 Un astel de program este Git Construction Set 32 8; on Set 32, car pate gst a adresa !ntp/ few nndvshaho.cosleenalceny Ale etter asemandtone ptf gist prin accesarea legate dn stun cave contin CIF nine Dupi combinaresimaginr GIF cu ajstorl programuli utitar vf aves un sngur Gier GIF 8% care contin tote cadre. Fiierulespectv poate Bi neerat in Composer ca imagine inn asemeneaorcru alt ier (vee figura 16) 192 Partea a 1V-2 Ineuflatirea paginilor cu elemento multimedia Frouna 1655. Oastfel de serie de imagini constituie a ‘bum exercipin de creare a GIF-urilor animate eieicieli Fiouna 16.6, Utilizarea programului GIF Construction Set pentru gruparea ‘mat multor imagind GIF intr-unfigier GE animat De facut: Combinarea imaginilor GIF intr-o animatie Frogmmel GIF Conduction Se 5 confine en -rtor” care aj st aleget privind GiF-urile animate; de exemplu, daci animatia trebuie sa fie rulatd o sin- res aah Ge epats nesayh bucle p) Bl Freep pn acres trade nagine cara conform clo dese ntr. OF 2 Deschideti programal GIF Construction Set 32 (Programs, GIF Construction Set See eee St lege Re, Aromas ead Vtoral Sgearnn eg deinmpaere Ora 16: Animarea imaginitor 193 ¥ 3. Execute pe butonul Next. Visitor vl intreabs dack doris fotos mata into paging Web. Asiguajvi ch este selectata optiunea Yes, apo execu tai cic pe butonul Next 4. Vrajitoralv ntreabl ack doi ca animatias fie ,bucat 68 fe replat tit timp cit viztatoral vede pagina) sau eS fierulatd namaio singurd data: Alegelt opines dort spol exectati clic pebutonul Next 5. La ecranal urmator sunt treba care ete tpulimaginilor GIF pe cae le folositi. De vreme ce leat creat ci ajutoral unui program de desenare, alepeti ‘xecul lie pe butonul Next 6 in continua, sunt fntzebati ct doris fle intervalul de timp (delay) dinte cae (ve figura 167) Cu eat este mai mare mumara le, ew stat ma Inet ce face trecrea de lan coda ltl enimaa obtine o animate cit mal lng, ave nevote de un numdr mare de cade {inj de) de uninterval de imp mic inte elo sutime de secur "1 hn, Aredth). Cid ave numa cteva cadre, un interval de tmp mu va face ca ansimaia Sse deruleze prea repede pentru af vizuta. Penta exerne, leget opfiunen 90 hundredths (care cara ramneo jumtate de secund inate ca wredtorl inocu Fura 187. Vrijitarat die Gr Construction Set vt permite ‘a stabiligé viteza de redare animapiei are 7. La ecranul urmitor vise cere si Selecta fisierele care contin cadrele Bxecutat slic pebutonul Select si risfoitt dupa dreetoral unde sunt stocatefisieele GIF pe care leaf creat, Selectai toate fserele gi executal clic pe butonul Next, 8. Vidtoral vt anungs este gatas creeze animaia, Executaf clic pe butonul Done 9. In fereastre programului GIF Construction Set va apaiea codul cozespunztor animatiel creat (vezi figura 168. Alege File, Save pentru a salva animetia. 10, Executatclic pe butonal View pentra a urmirianimaia creat ‘iF Construction Set i s fac gall opera naar eg maginior GIF. x ajloral puto! croairelame animate, 8 etapanimafie, si conver \ideocipuleinGiF-url animate gi mule ale, Pentru a tia mai multe despre acest rogram, suc meniutl g manual (Programs, GIF Construction Set 32 Documentation), Frou 16.8. Inc Construction Set putes modifica ‘animatia finalizata Rezumat Dac stii sa creati imagini, stiti si creat serie de imagini ) ch ficare element din pagind (paragrat sau dnumire de fier grte) este incadrat de 0 Dereche de ecete. Compara cele cous guru stent g vel remarea repede madul in ‘are ecetle HTML ini browseculul oe trebue facut cu text icufieal cre aeshuese pagina Web, Majorttea pagintor Web contin mai mute element de cod dect exempt usta in cele oud fgu. Tous acest oxemplu confine elementee de ba gl aata cum sunt apicate. ete HTML, Dups cea nels exermpulprezantat, vei ti sufiient pentru 8 spice 4 orice etcets HTML, In Aner 8, hid HTML puto gsi un catalog de etichet i tribute HTML. | Frou 172. Codul sures HTML corespunzitor paginii | Sees eee iustrate tn figura v7. | wm Toenenarnnnne i 198 3: Finisarea paginilor Examindrid figura 172, putei observa c& pentru a identifica un element al paginii, de obicei (dar nu intotdeauna) sunt necesare doud etichete HTML: una care nu congine caracterul slash () linga prima paranteza ascufita si una care il contin. Prima este uti- lizata pentru a marca inceputul elementului de paging, iar a doua (denumit8 uneor telichet de inchidere ~ close tag) pentru a marca sfarsitul. De exemplu, etcheta <#T¥> din partea de sus a ferestrei marcheaza inceputul documenta HTML, srs sect. Dac v8 inrebat do ce unde etichete sunt cris cu tere marti ate FY | socjunea18R ca tril oe marcat de eticheta de inchidere . ore i, tt ‘$8 arunciim o privire asupra modulut in care etichetele, textul si denumirilefisierelor conlucreazé la construirea paginii,Fiecare document HTML incepe cu comand: rm> ‘Aceasti comands ii indica browserului c& citeste un document HTML si ci trebuie si il interpreteze ca atare, De obicei (dar nu intotdeauna), fi urmeazd eticheta: Aceasta informeaza browserul cl ceea ce urmeaza dup sunt informatii din antet. Desi acest informafii nu sunt afisate in pagina, sunt importante deoarece descriu documentul browserului, directoarelor si mecanismelor de ciutare pe Web. ‘Antetul unui fgier creat eu Composer contine toate informatie introduse in caseta de dialog Page Properties. Acestea nu cuprind numai elemente standard, ca tithul docu ‘mentului, cl si elemente de antet create cu extensiile Netscape. Aceste elemente confin textul introdus in sectiunile General si Advanced ale casetei de dialog Document Properties si sunt indicate cu una dintre etichetele: OTH WME, > ‘ort -2quIv> Etichetele care urmeaz8, si </117L8>, Incadreaza textul care constitue ttl Eticheta </#820>, existenth dupa ttl gi liniile de antet, informeaza browserul c& antetul s5-a sfarst. Urmeaza corpul paginii, marcat cu eticheta <G0z1>. Acesta confine tot ce se afigeaza pe pagina propriu-7isa, Primul element al corpului paginti din figura 172 este un subtitlu. Btichetele pentru subtitle (heading) se resin ugor: <i> pentru subtitlu de nivel 1, <> pentru subtitla de nivel 2 si asa mai departe. Primul sublitiu din exemplul prezentat este un subtitlu de nivel 1 <ii>The Alteznative Oscarsc/#l> (Observati ci sfarstul subtitlulul este marcat cu </> Imaginea inline figierul GIF novies git) este indicata cu eticheta c1Ms S80...» astfel: *novies.gif". Refine ct denumireafserlu care conineimaginentrebute fe incadrats de gh zndle-In eemplul nostra atbutele optional referitoae la spire, a imensinile | | | | Ora 17: Edftarea codulul HTML 199 imaginii sila chenarul din jurul imaginii apar intre partea de inceput a etichetel, <IMG SRC. .>, si paranteza ascutita (») care o incheie. Atributele sunt intotdeauna optionale si sunt prinse in interioruletichetet (intre parantezele ascutite). Obseralicticheta > nu neces echt de inci z20 5 Jyvadiat dupa etcheta <i s80...> urmeaz4 un paragraf de text normal (incepe cu yme). Remarcati ci nu este necesara o etichetd care si-l identifice; se presupune cd tex! care nu este marcat cu etichete este un paragraf normal. Refineti c& pentru a “dngepe un paragraf nou in timp ce introducetf text normal, nu este suficient s8 tastati igrptur de car. Pentru a intrerupe un paragraf si a incepe unl nou, trebie s8 intro- loft eticheta de paragraf nou (<P>), Este indicat s& incheiali paragraful cu eticheta de ‘—sfarsit de paragraf(</?>), dar nu este neaparat necesat, {n interiorul unai paragraf normal, putefiintalni urmatoarele etichete: ' Perechea <B> si </8> care incadeazd textul Alternative Oscars aplict stil de for- matare Bold 1 Perechea <i> si </1> care incadeaz& textul should aplic still de formatare Italic. icheta care incepe cu ck #F... eeeazd o legiturd cite oalté pagins,folosind text Acadeny Arards ca sursé a legaturi. Porjiunea <k HRE?= din interiorul legaturi araté cf, atunci cind este activaté ce catreciitor legaturatrebuie s& deschida fisierul sau URL-ul descrisinze ghilimele. Textul care se afl intre paranteza ascufité de dupa denumireafisieruli si eticheta de inchidere </A> este textul afigat in pa- sind ca sus a legatur Dups paragraful normal exist oetichets de paragraf nou care insereaz& olin goals. richeta urmétoare, <i, insereazlo lini osizontali;vidthe100¢ este un atibut, una dintre extensile Netscape pentru propretaile liniei orizontale (vezi Ora 7, “Formatarea tetului") Eticheta <tt> incepeo listh nenumerotatd. (Céuta eticheta </0L> care incheie lista) Fiecare elemental listei est incadrat intr etichetele <LI> si </LI> si confine o legaturd (<A HEP) cate c alt pagina. in partea final a iseruli,eticheta</s indies sfargtal doeumentulai HTML, ‘Asta tot entra aafla mai multe despre codul sursi HTML al paginilor pe care leat ‘reat in Composer sau al altor pagini de pe Web, parcurgeti pasi din sectiunea urmatoaze. incheie corpul paginli iar eticheta </armi> {ree de a 18a 20 contin descrirea tcetelor maids uate, pe care le pute inera | incomposer (eu inser, HTML Teg) sv int-un at eto HTML. nus, a nea B, |. sunt desrse toate cht gatrbutele pe cae le pute ap, Vizualizarea codului sursa HTML al unui document Studierea codulut sursi al documentelor Web constituie o modalitate foarte bund de a afla mai multe despre HTML. Puteti studia codul sursi al paginilor pe care le vedeti pe Web sau puteti si vizualizati codul sursé din subsolul documentelor pe care le creat in Partea a V-a: Finisarea pagintor Composer. Astfel, putefi s& vizualizafi codul surs& al documentului pe care il editat, si {aceti o mici modificare in Composer, apoi si vizualizati din nou codul sursa pentru a observa cum s-a modifica Pentru a vizualiza codul sursi HTML corespunzitor documentului curent din Navigator sau Composer, alegeji View, Page Source. Inserarea etichetelor HTML in Composer acd, dupa ce ati creat un document in Composer, doris inserai ics colo cite 0 etichetd pentru care Composer nu are buton sau meniu, puteiflosifuncia Insert Tag. ‘Aceasta functie V8 permite s8 inseralietichete fd a pirdst programul Composer pentru a edita documentu cu un alt program. ‘ey | Neind insert, HTML neal (ZY, | ess, exo dete poet atl una pnt ser ete pert cae ue pute insera orice echt HTML, chiar 9 pe cele care sunt magi. Cu tote mat de Composer c&nd pla proprititextul sau SSonsu men homes Sirota dau consti Cie thee TMLee es afigat in Composer aga cum ar aparea intr-un browser, ci sub forma unei pictograme de hed co beech us con pent ate ne {Sous tpl Shoo lt ema ca ones owe | eno seca ce pe on et tn ear esi |peranls Capea atau ote cm tagaa tro ar Sod oeai a tenons is ns Dee el toot My pst |e tena eta yoyo arose tt pind |Site rae elves meno tre | sete pt tana we pope ne, ee aa rd |intoigce | Tn exemotu care urmesa, vet inseraoetichetd de ini oriaontalé (<A>), pentru care | Comat spent este set sre ana ot | orev ent et De facut: Inserati o etichetd Pentru a ingerao elchetA HTML tn Composer, proce ast 1. Povtonaylcursorul de eitar in local unde dori sts afl echt 2. Alege Inert, HTML Tg, Se va deschde cast de dialog HTML Tag (ver ig ai. [Penta eta ec, vb st eau as cp pngaa arta Ca | rar wud coed dag Wo, ee pet cca ue | eres meee Pera geo le, aac le pap | tasta Dette a Ora 17: Editarea codulul HTML 208 ¥ Figura 173. Inserarea uneietichete HIML i 4 ‘a ‘ ie shal he i Sama i shooter Caselade dialog HTML Tag permite intoducereaunulconfinut cu lungime mare (eonine bare de derutre), nu att pent a putea introduce mai mute eichete, eft pentru a putea introduce o etonets foarte lungd (una cu mite atribute, cu srr lung de ext sau cu multe ‘denurde cle), dcd este carl, 3. Tastafi tot textul corespunzitor etichetei, Refinefic& astfel nu se poate introduce decit o singurd eticheta (0 singurd pereche de paranteze ascufite, 0 paranteza la Inceput si una la sfirgit). Foun 174. Plctograma etcheti, aigat tn Composer 4 | CE ance Aman Ores yo oscil i saci austen ation aA | ‘idczdsams AOstn ccs cs 6a Pal spee teal urchin wae Tair tpn cna ese ny oe ey ad q ap toctetonerre v 202 Partoa a V-a: Finisarea paginilor 4, Executai cle pe butonul Verify pentru ca programul si vrificeformularea etichetel: Dac af formulat cree chet, nu se ntimpld nici pute continua Dac af ft o gresealé (de exempla, daca ati omis paranteza ascutts dela sfaritletichete este fiat un meso] de eronre care desciegreeala Fut 5. Executai clic pe OK. In ocul unde afi poritionat cursor deecitare, este afgat 0 pictograma de etichetS (vei figura 173). Pentru a vedea efectl etichetel, exe- ‘A Cua cc pe butonal View in Browse. Utilizarea butonului Extra HTML din Composer Butonul Extra HTML poate fi vizut in unele dintre casetele de dialog utilizate Ia inserarea sau formatarea unei imagini, a uneirigle orizontale sau a unui tabel (vezi figura 175). Acest buton vi permite si introduceti manual atribute sau alte opfiuni corespunzatoare etichetei HTML controlate de caseta de dialog, ‘Totusi, butonul Extra HTML are o importanta destul de mic8 atunci cind scriei cod HTML. Pentru majritatea elementelor, in caseta de dialog sunt disponibile toate atributele optionale pe care ati putea dori sa le folositi. Butonul Extra HTML va per- ite, de asemenea, si inserati tntre etcheta de inceput si cea de incheiere, orice atribut sau cod HTML. Oricum, procedind astfel, nu avefi controlul asupra pozifei atributelor inserate intr etichete, iar pozifia este uneori important’. Feouna 17.8, Inserarea unui cod HIML suplimentar Utilizarea unui editor HTML Funcfia Insert HTML Tag din Composer este excelent atunci ind avefideinserat una sau dow etichete Ins ancl cind aveli mai mult de munct vel vedeac& este mai ‘sor si deschidefiiierul HTML intra editor HTML. si facef ce avet de fut sis revenfi in Composer penta fnisa pagina Ora 17: Ecitarea codulul HTML 203 in Composer ect inset cv un eter HTML sunt aati forma WYSIWYG, | ‘soja ed et ere Compact pune ge sap. fesso sot is tera wor eonrme deh eae vib mona un one iy {n principi, pute flosi ca editor HTMIL orice program capabil si salveze figiere plate in format tet ASC Pe un PC este ideal s&folositi programul Notepad din Windows, deoarece lucreezA mumai cu ase defigere si este mic; se deschide i se inchide repede, asifel c& patefisdintrati, si faceti modificrile dorite si sisi $i Windows WordPad (vezi figura 175) este potrivit pentru editarea codulai HTML, ins8 cind salvafifisierul, nu trebuie si uta ca, n casta de dialog Save, s8 alegetiopfiunea Text document din lista Save as Type (3 folosiextensia shea sau.) Fisuna 17.6. Un fisier HTML deschis | ca tn WerdPad {Skea ery-urercntee-typetcommhTves/bnhsshacesse-ste's Cu toate ci, pentru a edita codul HTML, poate fi folosit orice editor de text (cum ar fi ‘Simple Text pertru Macintosh s1 Notepad din Windows), un editor de text nu stie nimic despre HTML si, prin urmare, nu ne poate ajuta. Din acest motiy, adevaratele editoare de sursi HTML sunt accesori utile pentru Netscape Communicator, chiar dacé nu sunt de tipul WYSIWYG. Un editor HTML se deosebeste de un editor de text prin aceea ci, pe langa editarea fisierclor text simple, oferé meniuri si butoane pentru introducerea comoda gi corect& a etichetelor. De exemplu, intr-un editor HTML obisnuit, puteti aplica etichetele pentrs ingrosarea textului Bold) evidentiind textul si executand clic pe butonul B din bara cu Instrumente Inloc si vedet textul ingrosdndu-se (cum afi vedea in Composer, veti vvedea etichetele pentru ingrosare, <> si </>, incadrénd textul respectiv. Pentru editarea codului HTML in Windows exist 0 multime de utilitare, ale eSror vari- ante comerciale, shareware sau freeware le puteti pasi pe Web. (Vezi Ora 24, -Dezvoltarea aptitudinilor de autor”) 204 Partoa a V-a: Finsarea paginior (Ora 17; Editarea codulul HTML, 205 HTML Assistant HTML Assistant (vezi figura 17.7 este un editor HTML de ws general, pe care il gsi pe CD-ROM ca aplicate shareware. Face pereche buna cu Communicator, deoarece Ptetifolosi pentru a face lucruile pe care ns le ste Composer, in specal formulae (vezi Ora 19, ,Proiectarea formularelor interactive’). fn HTML Assistant puteli defini programul Navigator ca program de testare a fiserelor pe cae le editai(aleget File, Set ‘est Program Name). Dups ee faceti acest lucra, ori de cite ori executafi clic pe butonul ‘Test, Navigator se va deschide pentru a aig fisierul pe care il editai. Aste, veli putea vvedea cum ar aria fisierul respectv intesun browser compatbil cu extensile Netscape. Desi va permite accesul direct la codul HTML, HTML Assistant nu este un medi WYSIWYG, cum este Composer. Totusi este mai mult decat un simplu editor de text Dupa cum putefivecea in figura 17.7, HTML Assistant este bine dotat eu butosne gi clemente de meniu pentru aplicarea rapid a etichetelor De obicei, in HTML Assistant vet lucra astfe:tastai textul care doris fie afigat (sat introduceti denumirilefisierelor cu imagini sau URL-urile pentra legituri),evidentiati textul cu mouse-ul si executati clic pe unul dintre butoanele din bara cu instrumente pentru a aplica o pereche de etichete textulul selectat. Etichetele sunt afigate imediat in document. De exemplu, af putea si tastafio lini de text sisi executati clic pe unul dintre numerele de sub insrisul Heading (din prima bard cu instrumente) pentru a atribui textuluietichete de substi, In figura 17,7, puteti observa ok HTML Assistant are gi un buton Title, cu ajutorul clruia puteti crea ttl din textulselectat. Mai retnefi cd nu trebuie si introduce manual etichete ca <itsix, EAD sau <B000>; HTML Assistant le adaugé automat cind salvaifisierul x peat F Feoura 17,7. Cod HTML brut, editat in HTML Assistant {ie P Heset J [ieee ae]() sao Fagan ee Sse AeA EEE DN remeron {in Ora 24, vet imate cep ate mei deo FrontPage) pe cre ple eb n sreanaldurneavoas pe mir doen ma expeinenat Ca utilizator al pachetului Communicator, de obicei vetirespecta urmatorul algoritm: creati un document in Composer (pentru a profita de mediuil WYSIWYG), treceti in HITML Assistant pentru a crea formulare sau pentru a introduce un cod prea complicat pentru functia Insert HTML Tag din Composer, dupa care veli reveni in Composet Pentru a finisa documentul. (Pentru a trece mai ugor in HTML Assistant, il putefi defini a find editoral HTML prestabilt procednd conform descrieri din secfiunea urmitoare) Configurarea unui editor HTML in Composer Pentru a usura editarea codului sursi HTML, puteti configura un editor HTML in cate- {goria Composer din caseta de dialog Preferences (vezi figura 17.8), Programul defini ‘va fi deschis automat cind alegeti Edit, HTML Source. ‘sed nu af definite nic un eltor HTAL in caseta do calog Preferences, céndalegefi FHF | tsi. TUL Source, se daschideo case de caiog Open care va permite 8 soi 9 sk eget programul dort. Floura 17.8. Configurarea editoruluit HIML in categoria Composer din caseta de dialog Preferences acd vata in Compose cand deschideicasta do oialog Preferences, aceasta se va] eschde automat ia categoria Composer 1. Deschideti cascta de dialog Preferences alegind Edit, Preferences, apoi executati clic pe categoria Composer 2. Introduceti in cimpul HTML Source din sectiunea External Editors, calea si denumirea fisierului corespunzator aplicatiei de editare (sau executai clic pe ‘butonul Choose File pentru a risfoi dupé el). Putei utiliza ce program dori: HTML. Assistant, WordPad ori un alt editor de text sau editor HTML. 3. Executati clic p> OK. 206 Partes a V-a: Finisarea paginilor Rezumat Scresea codului HTML nu este char att de dificil. De fap, frumusefea cod HIML const in faptal ci screrea codulti corespunzstorelementelor simple (para- tafe de text, egtur i imagindnlne) este usoara, far cea corespunzatare ele- Ientelor complexe se bazeaza pe indemanarea ceruté de elementce simple Ca utilizator al programului Composer, nu va vet ptzece mal timp scriind codul corespunzstorelementelor simple, deoarece Composer dispune de butoanele si meni- tle necesare ceri or. In schimb, dupa ce proiecati un document in Compose, vei hilza fancfa Insert Tag sau un editor HTML pentru a sri estulcodului Atelier Tar 1 Am observa i, in exemplul de cod sursi HTML din figura 172, liniile de cod dln antet as fost indentat, Ce face indentarea? R.Nimic, Indentareablocuilor de cod HTML nu are nici un efectasupraaspectului agin, Autor cde pagini Web (si Composer) indenteaza anumite blocuri de cod penitsu a uguraidentifcareastructurl fiserului de cStre cel care il teste Browserelenu sunt indluentate; ele ignora indentarea codulu sursi HTML. Prin turmare, procedati cum v8 convine, {Am mat abservat cf etichetele sunt tiparite uneosi eu tere mar (2702) gi Alteoi cu litre mic (ctstle). Contetzi ce fel de itere folosesc? R Este bine si serie etichetele ca ltere mari, Nu trebuie procedat neaparat ag; browserele vor interpreta corectetichetele chiar dack sunt seis culitere mic. Dach alegeti View, Page Source pentru a vedea propriul cod HTML din Composer, veti Ditlea vedea cb nici macar Composer nu se yceranjeaza” sf sre etichetee cu litre CConvenfa aceptat este scrierea cu litere mari, deoareceelchetele scrse cu itere mari pot fi deosebite mai ugor de textul din cadrul documentului (bineinteles, cu ‘except cazuluicind tot confinatul paginil este errs astfel) De asemenea, dacd ‘lichetele pe care le adugafi sunt scrse cu litere man, vefi putea deoseb intre ele ‘codiul srs de dumneavoastra si cel sris de Composer. AcestIuera vi poate fi de folos cind incercais8localizattcauza unei probleme. 1 Am vizut sursele unor pagini de pe Web gi am observat iii de text precedate de ‘ticheta <i--,Textul respectiv au pare si fack parte din antet si nici mu est aigat cand pagina este vizoalizata cu un browser. Que pasa, mi antigo? (Ce se intimplt prictene?) R Orice text precedat de <!~ este un comentariu care a fost insert in sir pentru a explica ceva clo cae citesc codul sursd HTML. Comentarile pot intslite in toate tipurife de cod program ineusiv in HTML, si sunt inserate de itre programa tori pentru a-ajta pe aft (au chiar pe cel care lea scris) sd Intleaga codul atunci lind il cites. Ele na au efectasupra afigrt sau acfunilor documentuli,textal din Comentari find ignorat de etre browser la afigarea documentulu. (Pentru a adu- 2 comentar in fisierl surst HTML, utiliza fuctia Inset Tog sau un editor FITML. Incepeti comentaral cu <!-» tastaitextul dori, apo! incheaf-l eu =>) xempll desursi HTML prezentat in figura 172, nu confine comentarii deoarece a fost ereat cu Composer, care nu inserese8 nici un comentariu in mod automat. in sehitn, est posbil sini comentart in alte fisiresursi HTML pe eare le vei veda, Cind vet vizwaliza in Composer un figier care confine comentartacesten ‘orf afigate sub forma tnorpictograme de elicheti iar cand vet! vizuallzafiserul respect cu un browser, comentarile nu vor apirea deloc Minitest Rezolvati testul urmator pentru a vedea cat afi reusit s4 invatat Intrebari 1. acs o sectiune incepe cu eticheta <B00¥>, ce eticheté fi marcheazd sfarsitul? a, e200 b. <em> INTO d. </90D8> 2, Toate etichetele necesita o etichetd pereche de inchidere. Adevarat sau fals? Raspunsuri 1.@). 2, Fals. De exempla, eticheta <i> insereazd o riglé gi nu necesité eticheti de inchidere, Activitate Examinati codul sursa HTML al paginilor pe care le-afi creat in Composer. Cititi elichetele nce face legitura inte ees optune din meni sau butoanele care le-ati folosit cand afi creat etichetele. ee re ORA 18 impartirea unei pagini in cadre Cadrele reprezinta cel mai bun si, in acelasi timp, cel mai riu Jucru care i s-a .intm- plat” in ultima vreme Web-ului. Dacd af intalnit pe Web un document format din cadre, atunc!stiti ci sunt nemaipomenite, Cénd sunt afigate, ecranul aratd ca panoul de ‘comands al unui avion de vanatoare - 0 multime de zone independente si diferte care stimuleaza simultan creierul. Seamin’ cu faciitatea picture-in-picture int-o televiziu- ne pentru oamenif ai ciror ochi sunt att de infometati inet prezentarea unui singur program (sau a unei pagini) 0 data nu le furnizeaza suficiente informafi. Este evident A ulilizarea cadrelor mareste considerabil posibilitatea autorului de a ofer viitatorilor ‘mai multe scenarii de parcurgere a documentului, Cadrele ne fac s4 platim pentru toate aceste frumusefi. Ele incetinesc de obicei accesul initial la pagina (deoarece browserul trebuie si descarce mai multe fisiere), iar cind sunt proiectate necorespunzitor, obligh viitatori s8 deruleze exagerat de mult pentru a citi confinutul unet singure pagini. Morala? fnainte de a inghesui documentul in cadre, puneli-v8 urmatoarele intrebi {are sunt potrivite cadrele pentru ceea ce vreau si prezint?”, ,in cadrul ca dimensiunea pe care am stabilit-o, poate fi prezentati corespunaitor fiecare parte a confinutului?” si «Merit avantajele prezentirii cu cadre si trec peste navigatorli de pe Web care nu pot vedea cadrete?”, Daca toate trei rispunsurile sunt ,Da", dafi-i inainte cu cadrele, Va va placea sa le construifi La sfargitul acestei ore vefi putea rispunde la urmatoarele intrebari = Cum se creeazé documentul de definire a cadrelor (isierul HTML care creeazs cadreley? 18 Trebuie fcut ceva anume cu continutul fiecirui cadru? % Cum se creeaza o pagina Web formata din cadre? = Cum pot fi ajutati vizitatori ale ciror browsere nu pot aga documente formate din cadre? Ce trebuie facut pentru a crea un document cu cadre? Confinutul fiectrui cadru dinte-un document format din cade se afl inte-un document HITML separat (vezi figura 18.1). Modul de asamblare a acestor documente separate este descrs intr-un alt fisier HTML, documentul de definirea cadrelor (frame definition document) ra 16: impaitirea unei pagini tn cadre 208 Document de define a cadet Un ser HTML speck care xeazt Contes o pagina Web forma din cade, Ace fier contne demic fgerloreare ei agate made pnt pla elhelele cave sblee namdal tlersunen cotter Frou 18.1, Un document format din cadre arts & culleore Fiser HTML came Seon | Bree | errr tnsen a | Sitqueioecce ee | ID | Sa ae "Nu uta ca, tune! cin pubis un document format din cade su T face publica, sk ‘ndesaivitator cite documenta de define acadrelo, nu care unul dnt finale aligate in cade (ved Ora21,,Publcarea pagii Documentul de definire a cadrelor Documentul de definire a cadrelor nu contribuie ta confinutul paginii; el precizeaza ‘numai modul de impartire a paginil si documentele care trebuie afigate in cadrele aces- teia. URL wu afisat in caseta Netsite a ferestret din figura 18.1 corcepunde unui docu- ment de definire a cadrelor; acela este URL-ul accesat de catre vizitatori pentru a deschide documentul. In continuare, accesarea fiecirui cadru din pagini este gestionats de citre documertul de definite a cadrelor. CCrearea unui docement format din cadre presupune crearea documentelor HTML care vor fi afisate in cadre, alcdtuirea documentului de definire a cadrelor pentru a stabili numarul, climensiunea 3 alte aspect legate de cadre si desemnarea unui fisier pentru ficare cadru. Tn document de deine a cadeor pute insera un mesa care va aigat nual vakato- tor cae nu pot veda legate. (Vel secunea ,Adapara la browsere care nu recunose cal, are urmeaz in aceat od) saat A CL A NOD TIT: 210 Linii si coloane Ininteriorut documentului de defini a cadrelor, pagina poate f impart in cadre prin apicares uni dinte wmtoarele dou atibute (sta ambeler 1 tribal roxs impart pagina in tn orizontale; * atributl cots impart pagina in coloane vertical 1 ilizateimprouns (ver secunea .Constrairea unui document cu cadre complex”, {are urmeaza in aceasta ri, acest tribute impart pagina in rice combinafie de coloane, Atnbutele as i cOLS sunt urmateintotdeauna de semnnul egal () si deo valoare inte ghilimele Valoarea determina dimensianea relativa si nama de cadre de pe paging poate fi exprimat sub una dintre armitoaele tre forme: tun mumar crees28o lini (sao cleans) avin indimes (Sas sms) egal cu acel niumar de pil * un procent creea25o lini (6 o coloana) avin inakimen (sa limes) egal cu ace procen din inlhimes (sa afm ferestrei brovesera 1 in astrisecreeazSo lini Gao coloan a cite marime este determinats automat {le spatial ria lang celealte cadre create vital exprimarea vali su forma unui num de psa, deoarecerumatu de pixel spn reste browser vaiz lao patra la alta, ‘Numarul valorilor dintre ghilimele stabileste numarul de cadre de pe pagin’, ca in exemplele urmatoare: <ERIUESET ROWS="408, 608"> ereeaza dous lini: prima (cea de sus) are inltimea egals cu 40% din insltimea ferestrei, iar a doua (cea de jos) are inltimea egal cu 60% din {naltimea ferestrei, <ERINESET COLS+"200, "> creear& doua coloane: prima (cea din stanga) are olafime dde 200 de pixeli, iar a doua (cea din dreapta) ocupa restul ferestrei, <eeanEseT ROWS="*, +, 4, "> creeaza patrulinii de aceeasi marime. (Cand sunt uti- lizate mai multe asteriscui, fecdruia i se asociaz8 aceeasi valoare.) <FRNESET COLS="*, 208, 508"> creeazi treicoloane: prima (cea din stanga) ocup’ spaliul dias in stnga celolaltecoloane, « doua (vea dint nujlon) are Laine egal ‘cu 20% din lsjimea ferestrei sia treia (cea din dreapta) are lasimea egald cu 50% din Iifimea ferestrel Confinutul cadrului ‘Confinutul cadrului este furnizat de un figier HTML separat, pe care il creati ca pe ‘orice alt document Web. Totusi, este bine ea atunci cid creati un fisier care va fi afisat Inteuun cadru, si tineti cont de dimensiunea gi forma cadrului in care va fiafgat Browserele ajuti la ajustarea confinutului cadrelor aranjand automat textul in cadru gi scurtind linile orizontale. De asemenea, in cadru se pastreaz& si proprietafile de alini- cre. De exemplu, daca textul era centat in pagina cdnd lati creat, browserul il cen= treazd in cadru cAnd 1 afigeaz8. Cu toate acestea, browserele nu pot ajusta poziia si Ora 16: Impartivea unel pagini tn cadre a4 spafireaimagiior (ni a imagieorwlizate ca gl su marae) de mule ox imagine ingreunesc cadre Cadrele nu se creesr8 in Composer dest fiserele care sunt afte fn le pot fi create fn Coniposer Prin urmare, pentru a alse’ documentul de definite a cadelor rebuie st. tliat un editor HTML: Duphce af creat seed necesne, vel dot 9 vzualzat documentul de defini a cadkelor 9s justi i/sau 8 fesmatfcontintal Ssherwtor cao spars corespunzitor n cadre Atunci cd eonfnutl este maf mare deci dimensiuneacadrulut, browseree fi aadaugh automat cadrului bare de derulare. ned un document cu cadre care prezinS 0 ‘oleciedefisewe fragmenta i bare de derulare na este atratv i vstatonl obosese repede derulnd indelung~ mat ales dat sunt neve si derulese pe orizantala pens tra iti rindur ling! de text Or de te on este posi aust cenfnutal ena Snta near sau iver De féicut: Construiti un document format din dou’ cadre |. Utiizane un media pe care il dorii (cum ar fi Composer), creati confinutul documertelor care vor fi afisate in cadre, Daca este posibil, organizati si formatat-leastelincit si reducefi la minimum necesitatea de derulare a confinutului de eatre viztator 2 intr-un editor HTML, creati un fisier HTML nou. Introduceti in el etichetele de structurd necesare, impreuins cu fithul documentului cu cadre, ca in exemplul ‘urmator: cana eA ‘<LITLE>Pranes Denoc/TIT1E> </heD> <eo03> </a00t> yer aca nu sunt farina eu fier sursé HTL s cu eoarele HTML, ctl Ora 17, Estas coll HTML" 3. Inlocuii e\chetele <aoor> cu <esanser>, cain exemplal urmator, (Refinefi ch intrun document de definire a cadrelor, blocul <G00!> este inlocuit eu blocul <rRaMESET> simu aveti voie sf il utilizafi nicaier in fisier) <HEAD> <TITLE>Franes enoc/TISLE> </s8aD> <Faniese> PAMESETD </a> [Btichetele <rRanset> incadreazd intreaga definire a cadrelor. Dec tot codul pe ‘are il introduce in continuare trebuie 58 apat 212 Partea a V-a: Finisarea pagialor ¥ 4. Documental meu va fi impartit in doug coloane. De aceea, vol introduce intze ctichetele <Frawestt> atributul cols. Vreau ca prima coloand si fie ingust’ (30% din lfimea ferestrei) iar a doua s8 ocupe restul ferestrei: “<FROMESET'cOLS="308, > </EROUESED> ET> dn exomp am fl nrodus 01 mf abjinut cela etek, 5, Dupa ce am definit cadrele, voi defini confinutul lor. Pentru aceasta voi aduga ceticheta <FRAME saC> gi denumirilefisierelor care vor fi afigate in cadre (ntre ghilimele) Fgierele vor fi afisate in coloane, in ordinea (de la stinga la dreapta) fn care apar in blocul <FR4vese1> (de sus in jos). In exemplul urmator,figierul MULTE. TH va i afigat in prima coloané (cea din stinga): <FRANESET CoLS="308, > <EREME SRC= MULT HM" <ERIME SRC="DESCRIE.HTM"> </eRavEsED> 6. Documental eu cadre rezultat este afisat in figura 182. IatS codul complet al locument de definire a cadzelor: ‘<TITLE>Franes Deaoc/TITL#> </aExD> ‘<ERAMESET COLS="308, *"> "> ESCA. ATM'> </ranMeseD> <em> Zope Remarat ca tecae snr dosent ate n cate poate ava prepa imagine su CZF | cuoate de funda, deft ntl care 8 cone Observati cio micd modificare a atributelor din blocul <FRaMzs=r> schimbé radical aspectul paginii. Si presupunem, de exemplu, cd ag fi dori init in locul coloanelor. Pe tanga reformatarea documentelor sursi pentru a se conforma linilor, nu ar fi ‘trebuit decat sf schimb In documentul de definire a cadrelor atributul COLS cu RORS, cca in continuare: ‘<ERAMESET ROKS="308, 17> ‘<ERAME SRC*MOLTT ATH> <ERAME SRC>*DESCRIP.AIM"> </FRAMESED> (ra 18:inparive une pagin Tn caer, 213 Y Foun 182. i eee (age Pagina care See fact f ‘ ateroer } 2 | MULTIMEDIA i ay mops mae, it a SRE Breet aye se PUBAC | Its shtcensr deca pe tance neyo dre Toten ne Seep eke | Fisierele referite in etichetele <FAAME.SRC> vor fi afigate in lini de sus in jos, fn ordinea listata. Cu alte cuvinte, WOLTE A este afigat in linia de sus deoarece apare in prima elicheta <FRAME SiC>, iar DSSCRIE. TM este afigat in linia de jos. Varianta cu Rows este afigatd in figura 18.3, Construirea unui document cu cadre complex Desi exemplele ilustrate in figurile 18.2 si 18.3 sunt documente cu cadre in bunS regula, au anumite limita: Fura 183. Vartanea cu 80nS a paginiéustrate in figura 182 Mabie es many mopey and morre. Why? wel it coisng, Tec are sso my ieee frau aad ech vue diet player Cogee Ta asin ie ena presen he vaso pes of mkinein es yoo wa tale Tolown mere eat aches hc econ * 214 Partea a Va: Finisarea paginlor Contin numai init sau numai coloane, nu att lini, et ' Dack acfionati o legiturd din unul dintre cele doui cadre, fisierul referit de aceasta i locul celui din cactrul care confine legatura. Adesea, n astfel de documente, dortt «a vizitatoral si actioneze o legatura care si deschida un fisier intr-un alt cadru. Cele doua sectiuni care urmeaza va vor ardta cum s% modificati dacumentul de definire a cadrelor si legiturile din fisireleafisate pentru a construi un document cu ‘cadre de tip leading-edge. Ustlizarea linllor $i coloanelor impreund CCrearea unui document ca acela din figura 184, cate confine ai ni, ct i coloane, nece Sits imbricarea mai multor blocer aiveseP, fecare eu prop atibute iss 308, Insinte dea incepe, tebuie s& stabil car ste prim blo <HH2S07> (cel pent init sau cel pentru coioane) sa care este Blcalpizinte in care va fl imbrcat cela. Acest Ince 3 sabileste pe Baza configura agin pe care vrei so crea 1 Daca vreuna dintre ini se intnde pe intreag ltime a ferestret (fr af impanitsin coloane),blocal-parinte definest nile (6%) * Daca vreuna dint coloaneseintinde pe intreaga inaltime aferestre, de sus pins jos fra a fh impart in ini, blocukpinte definestecoloanle (05). * Daca toate ine sunt impeiten coloane gi toate coloanele sunt impart in lini, bloculpirinte definestecoloanele (C19) Frouna 184. Un document cu cadre ‘cave confine att lini, MULTIMEDIA _ Malina mas many mip sn arse. Wy a tengo tea ta nod ‘Scheegier seen per Cape hed i of hr elu oe sath te bootie peeecnponees De exempla, in pagina prezentata in figura 184, linia de jos se intinde dintr-o parte in alta a ferestrei Prin urmare, blocul-pirinte va defini linile din pagina. Pagina are dou, lini (cea de sus find imparfits in coloane) despartite n raportul 75/25. Deci blocul:parinte arati astéel: <ERANESED ROWSE"75R, </eeaweser> (Ora 18: impartivoa unel pagini in cada 215 ‘Acum tebuies& impart linia de sus in dow’ coloane, in rapotul 30/70, Fentra aceasta, inserati in blocul-périnte un nou bloc S<FRAMESE? 10KS="758, "9 FRAVESE? coUS-"308,0"> “rmvesi> </rantse In fina, adaugatn fecae bloc eichete<FRME Rc» pentru a apelafiserele agate in cele tel cadre <FRAMESE FORSSK, *°> “FRAMES COLSW"308,*°> Fen SRC-"V0L07. Has FRAME SRC-*DESCRIP. > <iaEseD SERAME SRO“OBFTNTAH'> </ERRNESED> Precizarea cadrului in care este deschis documentul referit Daca vet cre codul corespunzitor documentelor de definize a cadrelor asa cum v-am ardat pind acu fiecarelegaturd va deschide document refert in cadrul in care st afla ea, Dacd dori ca o legatura 8 deschid un fiir intrun alt cad, avei de ficut douh cra 1 si denumitifiecare cad in eicheta crise 8» din blocul in cre este defiit * st precizat, in interiorul legit, denumirea cadruui in care va fi deschis isierul referit de legiturarespeciva, Vom enum cadrele vane ca pune de plecare pagina iustrata in figura 184. fn etichota <Fth#e 52>, adaugali dup dentmirea fiterufui (un spat ier) atributul ‘hE cain exemplul de mai os <FEAMESEE TONS="75A, "> SERIMESET Gbis-"208, "> FRAME SRC'WLTE. HEM” MRME="Zcons"> CERAME_S8¢<"DESCREP. ATM" MAVEMTent"> crrmestt Staye sooers ewes Denumirile eadreloe apar numai conteazé cum le den A tee" Detunstdons”> ‘codul surs4, nu apar sin pagina, Prin urmare, na important este si le dafi o denumire unica ‘Acum trebuie sa editati legaturile din figierele afgate in cadre, pentru a adauga denu tmirea cadrului in care va fi deschis fisierul refert. Acest lucru se face adaugand, dupa ‘denumirea fsierulut referit in dfinitialegaturii, atributul T@RGE2- gi denumirea cadrului {intre ghilimele) cain exemplul urmator: <h HREP*"avidef.htn” TARGET="Detinitions"></a> Des adsugarea atributului Tasca? se face destul de usor face gi in Composer, Cand introduce}i cenumirea fisierului in sectiunea Link a casetei de dialog, Image Properties (vezi figura 185), dap denumirea fisierulu,tastati TaRcbt= intre ghilimele, trun editor HTML, putefi 216 Partea a V-a: Finlsarea paginilor poi Definitions. Composer va plasa automat ghilimelele in marginile textului pe care ‘ati introdus in cémpul respectiv, Daca plasatighilimelele ca in figura 185, textul introdus va aparea corect in sursa HTML, cu denumirea fisierului gi denumirea cadru- Jui cuprinse flecare inte ghilimele Fue 185. Adiugarea ‘atributulud TARGET sumed legiturt in Composer adel inca se ica, ah ‘Cand va fi acionatllegStura prezentatd in figura 185, fn cadrul Definitions (cadrul de jos) se va deschide fsierul avi. eT, inlocuindl pe DEFINE. $5 presupunem acum ck dor ca toate lepiturile din fisierul WTI -emm sii deschid fisieral in cadrul Text. in asemenea situa, puteti economist timp utilizind eicheta ‘2835 TARGET in antetul isierului core confine legturile. Toate legiturile din fisieral zespectiv isi vor deschide fisieral in cadrul indicat de eticheta «BASE TARGET>, nemaifi ind nevoie si addugati atributul TARGET in eticheta fecaeilegat ems ert “anSe TARGET=MText> <feexD> 200% ici spare detinizes pagintt </8001> “fem “Toate legaturile din fisicru scifat anterior fi vor deschide fiierul in cadrl Tex Adaptarea [a browsere care nu recunosc cadrele ‘Aga cum am menfionat deja in aceast® ord (chiar de doua ori, deci nu se poate sa mu fi bservat), documentele formate din cadre nu pot fi afigate de browserele care nut recunosc extensille Netscape pentru cadre Daca mite arnt TARGET dito leStud, eptura respective va deschige fier in (Ora 18: impartrea unol pagini tn cadre 217 (Cand nu se folosesc cadre, de obicei,extensile nu impiedic8 afigarea complet a ima- {ini In cel mai riu eaz se poate Intémpla cao parte a paginii (un tabel, de exemplu) si ‘hu apara sau agpectul ei i formatarea éaracterelor s8 revind la configuratia prestabilita in browser Insa cadrele sunt ,afurisite”~in browserele care nu recunose cadrele, ele fac terra incognita intaeaga pagina, ezultind nimic altceva decito trista pagina goald (pfu!) Ce puteti face in afar de a evita si folositi cadrele? Putetiaduga, in documentul de defini a cadrely eticheta <i0FRAMES>...<NOFRAMES> pentru a afisa un mesa) celor ‘are nt pot vedea cadrele-In exemplul urmétor, am addugat un mesa] <}OPRAHES> care confine olegitulcitreversiuneafr8 cadre a documentalu: <ERIMESER ROKS="751,*°> “ERABSER COLS="308,0°> ERE SROWOLT TH “ERRAE_SRODESCRLP. TWD “</ERMESED ERE SROEEIN 4°> ‘WORNEDThis docanent uses fcanee, If your broveer does not support franes, please view our ch #REF="franefree.ATW"9no franes version. </1><AOEEMES> </ERMMESED (Cand tn vititatorrdsfoieste documentul de definire a cadrelor, nu va vedea mesajul dintre etichetele ortaves> dach are un browser care recunoaste cadrele ~ nici ‘umneavoastrd mal vel vedea in Navigator. Mesajul respect l vor vedea numai cei al caror browser nu recunoaste cadrele. Tati osituafein care lipsa suportului pentru cadre in Composer ne este util: dacd velt dleschidefsterul care confine exemplul anterior, Composer va afiga mesajul cuprins inte etichetele cOFRAHES> (veri figura 18.6), deoarece nu dispune de suport de tip WYSIWYG pentra cadre, Din acest moti, putefi sil folosji pe Composer pentru a vvedea cum ara fisierul in browserele care nu recunosc cadrele,respectiv pe Navigator pentru a vedea cam arat& documentul in browserele care recunose cadrele Frouna 186, Mesajul <woenans> ‘sa cums apare in Composer, care se comport a un browser care mt ‘fisenzd cadre ice we atc iy aes Tonics ek 218 Partoa a Vi 3: Finiserea paginlor Creator de pagini Web folosese din ce in ce mai es etichete <iorRaNes> pentru a informa vizitatorii care nu pot vedea cadtele ci sunt ghinionisti, Mesajele de gerul “Sorry, this document must be viewed with Netscape Navigator 2.0 (or 30, or Communicator)", {ntélnite la tot pasul, ne arata c& popularitatea cadrelor este in crestere. Aceasta abor- dare abandoneazs in mod inutil milioane de utilizatori de pe Web —o minoritate in. scidere, ¢ adevarat, dar care inci numara milioane. Si apoi, rel i fiti emul ciruia ‘nusi pas decit de majoritate? Alternativ, putetifurniza o legatura citre 0 versiune fai cadre a documentulai dum- ‘neavoastra, aga cum am procedat eu in exemplul dat. Crearea versiunit fara cadre nu necesita efor: copiafi sub alta denumire fisiereleafigate in cadre si adaptatile for. ‘matarea 3ilegaturile pentru a corespunde unui document multipagina,far8 cadre. Apoi furnizat in blocul <ioFRavs> din documentul de definize a cadrelor,o legituré catre prima pagind a versiunil fara cadre. {in locul furnizarit unei versiunt fard cadre (sau pe lings aceasta), puteti solcita progra- ‘mul Netscape Now!, un program prin care Netscape Communication Corp. va da dreptl s8 insevati in paginile dumneavoastrd butonul Netscape Now, Acest buton este sursa legaturiicitre o pagina de la Netscape Communication, care indruma vizitatorii printro serie de formulare si optiuni pentru a descirca 0 versiune de Netscape pentru sistemul lor. (Pentru a vedea cadrele, au nevoie de versiunea 2.0 sau de una mai nous.) Cu ajutorul programului, puteti adduga butonul Netscape Now! in blocul <io#enies>.. Astfel, viztatori care se vid respinsi de documentul dumneavoasttd eu cacre, pot siti la Netscape si il ia 0 copie a pachetului Communicator si i revind pentru a vi admira Pagina. | Pagiie create cu Page Ward (ea Oa 9, ,Crearea une agin Web <a minut») seu cu BEF | ramen rte ce mee Oare trebuie s4 utilizati butonul? Pe de o parte, aga ajutafi viztatori sé obtind software-ul necesar pentru a vedea pagina, iar pe de alta, cheltuiti timp si bani (pentru server) pentru a face reclania gratuita unei companii multimilionare in dolari. Ela alegerea dumneavoastra. FrameGang Pe CD-ROM-ul care insoteste cartea exist un program nuit FrameGang, care transforma crearea documentelor de definire a cadrelor intr-o bagatelé. Usilizarea programului presupune si titi minimul necesar cu privire Ia codul pentru cadre, isa ugureaza efinirea cadrelor sciind o parte de cod si ajustand in mod automat valorle din linile <PRAMESET?, pe masurd ce trageti marginile cadrelor cu mouse-l Rezumat Cadrele constituie un exerciti de organizare si discernmant. Cel mai important laceu supra caruia trebuie si va decidet este daca vet utiliza cadre, Cand sunteti hotrdt folosti cadre, incercai si furnizaiintotdeauna un mesaj <oFRINES> gio variant fed care 3: Impartrea unel pagini In cadre 219 Atelier Tar cee Pees Minitest Rezolvati testul uumitor pentru a vedea cit afi reusit si invatati, Intrebsiri 1. Toate brovserele pot afga cadre, Adevirat su fas? 2. Cate dite afirmatilewrmatoare este adevératé i cazul paginilor Web formate din cadre? a. Tot fi destel de fumoase b, Sunt desl de ugor de creat ¢.O parte din vzitatori na le pot risfoicorespunzator 4 Tate afrmafite anteroare. 220 Partea 1: Fnisarea paginllor Raspunsuri 1. Fas. 2d). Activitate Revedeti cateva dintre paginile la care lucrafi si evaluai-le confinutul, Existé vreuna ‘are poate candida la forma cu cadre? Ora 19 Proiectarea formularelor interactive inteun fel, chiar gi un document HTML vech este interacto, prin faptul c& va permite ‘8 sirifila alte URL-uri sau ancore. Executati clic si el rispunde; asta-t interactivitatea. Dar mal exist un fel de interactvitate pentru care nu exist8 suport direct in cod HTML Un serit este un program care preianiste date de intrare de la vizitatoral unei agin le prelucreazK si furnizeazX un rezultat, Interactiunea poate fi simplA, cum arf preluarea mumelu si adres utillztorulut si adfugarea lor intro list de adrese, sau Iai complexa, cum arf prezentarea (nfunctie de precizavile vizitatorului) desfisura- toruli cu rateleIunare corespunzStoare cumprdri uneilocuinfe. HTML nu dispune ce astfel de func. Pent a pune la dispozitia vizitatorlor func interactive, de obice, pagina dumneavoastra trebuie s8 apeleze un program script care se aft pe server sau pe cient, HTML este suficient de ist} pentru prelua de le vizita- tor datele de intrare si pentru ale transmite unui program serip, iar in final si afigeze ‘eea ce produce seristl (presupandnd ch acestaformileazd datele de iesire in codurh HTML, Insé prelucrarea propriu-rs8 a datelorintroduse de ctreviztator fine numai si numai de programul script in aceasti orf ell inva despre una dintre cele mai importante aplcai ale scripturlor:formularele, (in Ora 20, «Plasarea mai moltorlegaturi sub dteeas| imagine”, vei descoper inci ceva: imaginle-hard) Problematic prezentata in aceasta ort cuprinde: 1 nofiuni generale privind conceptulserpturlor; 1 crearea si formaterea formularelor interactive, care preiau informa de la viitatoit agin dumneavoaste8; 1 modul in care una dint programele de pe CD-ROM tnlesneste utilizarea formula- ‘elon Scripturile CGI Ocarte de dimensiunea acestela, care si fie dedicat scripturilor CGI, ar i prea mic. Gide aceea, lectura unei astfel de cirfi s-ar putea s8 nu fie cel mai bun mod de a vi folositimpul. Nevola de a ti limbajul CGI este din ce in ce mai redusd, deoarece cistigi popularitate JavaScript, Java si alte limbaje de scripturi CGI. Abreviere pentru Common Gateway Interface. Un limbaj pentru scripturile apelate de paginile Web si care sunt rulate pe serverele Web. Java, JavaScript. Doui limba distincte, care nu se inrudesc defel, EESTI Javascript este un limbaj pentra scripturile rulate in browser (nu pe server) 222 Partea Va Finisarea paginlor si face, in mare parte, accleasi cru pe care le face CGI Jva este un ibs de pro- sramare de uz general, utiliza uneor pentru 8 adsuga paginior Web fc sup mentare Cutoateacestea,deocamdat,scipturte CGI reprezin ce mai bun mod de a activa formlarelesimaginile-hartt din documentcle dumneavoasr, Dar nainte de a v8 sand s8 sce sorptur,tebuie sa sit cate ceva despre CCL Programele CGI sunt rilate pe server, nin browser Regul limbajele de progra- mare preferate pentru srierea senpurilordifersinfuntiede ial serverul ial platformel. Majoritatea seeveelor Web din za de aise bazeazi pe UNIX si hcreaz Eel mai bine ow script serine in wn cintre binecunostutle limdaje shell din UNIX: Bourne sau Per. e eats parte, servercle care se bazeaa pe Windows sunt conf- orate pent scripture Visual Basic. Drept rma, ii este impos sv oer in cvast carte un exempl de cod script cares Functioneze corect pe orce server Codul HTML prezentatin carte ihstreaes most de afgare ani formular sau a unel Jmagint hart dd rezultate bune in Commnicttoy, ins scripture prezentate sant pentru Bourne fer i sar putes s8 nu mearga pe several dumneavoast CChiar daca serverul dumneavonsra dispune de suport penra script na este sigur ci furnizorl serverulu va va permite stl utiliza, Ineractmea accentuatadintre aitaton 3 serverl cre rulesea seripturi reprezints wn potential ric privindsecurta- tea serverulu.inainte de a construi un document care tlizeaa sarptuti Cl, vorbiti cu farnizoralserverului sau cu admsinistratoel de sistem pentru a fla dact ince condi ave voi sua script. Dup& aeea, cal impreuni cu adminsta- torul de sistem la testarea si implementares fieirul script pe ear i serie g Persona, cred cl el mal bine ete sv fac giant cu cea ce pare pe ng 58 isa pe alcneva (de obce,pe ct care gestionaz Serer Web unde publoat agin) sisi acd grin legatura cu scripture, neal unui orm, treba defi, In HTML inttigares dpe eran a acest. Aoi cucet irl respect alta (uni pro- | ramator sav chiar unui urizor de Internet 1 expel cur ors le manipulate dtele in formula i isa s8 se ocupe de problems Ta coninsare, Crearea formularelor interactive Cu siguranga cd ati vazut formulare pe Web. De exemplu,cind introduce un termen {ntr-un mecanism de ciutare (cum este Yahoo), utilizaji un formula. Formularele de ‘clutare cum sunt cele din Yahoo functioneaza astfel: 1. Executand instructiunle din fisierul HTML, browserul preiatermenul introdus de lumneavoastra gil transmite serverului Yahoo impreund cu denumirea si pozitia fisierului care confine scriptul necesar prelueririi datelor 2, Serverul lanseaza in executie scriptul respecti sii furnizeaza termenuil de ciutat ea pe o varlabila de intrare 3. La final, scriptul produce niste date de iesire (un listing cu rezultatele cdutiri) gi instrucfiunile de afisare a acestora intra document HTML. 4, Serverul trimite datele de iesire browserului pentru afi afgate. | J Ora 19: Protectarea formularelor interactive 223 Etapele credrii unui formular Pentru a crea un formular interactiy, trebuie si parcurgefi dowd etape: 1.Cuajutorul unor etichete HTML speciale, creafi un formvular vizbil care este afigat in pagina dumneavoastr3. Definia formularului cuprinde denumirile datelor de intrare pe care le preia formularul si adresa scriptului CGI care va prelucra datele respective. 2 Scriefi un script CGI care primeste datele din formulas, le trimite serverului, le prelu- ‘reaza si furnizeaza rezultatul Intrun anumit format, in cuuza problemeor legate de dversatea serveralor de complete sre scription Ct, aceasta or se ocup8 in primul rnd de pasu 1, creareaformularll de pe eran. Atributul METHOD: Cand construiti un formulay, trebuie si-i dati atributulul weTsoo din eticheta Foax una dintre cele doua valori: GBT sau 7057. Ambele valoriarati ci date introduse in formular de citre viitator trebuie transmise unui anumit script, ca date de intrare; difera ins modul de prezentare a datelor Pentru majoritatea formularelor este de preferat 20st pentru cA ti indicd serverului 4 furnizeze datele direct scriptului, ca date de intrare standard. CET, in schimb, este plasatintr-o variabils de mediu $i apoitrimis scriptulul, Utilizarea variabilei de medi permite programatorilor 58 defineasc4 mai exact modul in care va trata scriptul datele de intrare, oferindu-le practic 0 multime de posibilitti de prelucrare avansati Dar pentru prelucrarea formularelor simple, 20st este mai simpla si mai potrivits. Butoanele Submit ‘Atuncicind este folosita impreund cu atributul svar, una dintre etichetele HTML. pentru formulare creeaza pe ecran un buton cu inscriptia .Submit” (veai figura 192). De exemplu, linia urmitoare creeaza un buton Submit: <cruer Trees a4 Pe acest uton trebuie sf execute cic vztetori pentru a confirma cau terminat de intredus date in formulae. Cind un vistator execu clic pe baton Submit, browserul transite datele de intraze din formlar script sestinat pentra preurare Ji mod prestabit pe buton apare textual Submit", Prin adfugareaatibutull VALUE in etichet, pute face cape buton a8 apardfextal pe cat dori (Else va comporta Contnuare to can buton Submit) De exempla, lini urmitoare creeaza un Baton Submit insriptin Send Answers smitt> ‘acd formulas ete deta 8 vim ewverua eingur veloere de intrare, butonst Submit este opine. Apgsaea taste Ener transite automat formar, Toth, este bine ‘4 ob nui a Insara un buton Submit in eats formulrel <INEUT TYPEe"Suinit™ VARUE="Send Answers"> 224 Partea a Vea: Finisarea pagintor Defra formulareir neces severe mal mutor i de cos HTM, at focfa insert HTL Tag din Composer Insereazd num ct olin © 8, cr care nu recomand iru construe formutarlor. In pls, Composer nu poate afi ormularea in modl WYSIWYG: pentru ale vzvaltebul ape aNaigato. ‘Gea mai bund metods de define a formularor ete s scr coda int-un editor HTML 5! ‘A vertca vizvalizin fiir in Navigator, ASel, ma intl compune i formate pagina ‘a Composer, mai putin formulate. Apo lege View Et Document Source pentru 2 Seschide pagina It-un eitor HTML insera cod penta forme, Scriptarea unui formular Fen eput cat documents omikind formar Spe expire, am creat 0 posi pan pumen slr de pen coe aves eos BD bate art arms a> rico Poem/201b ca Seon SDMA te Your Adtrescr2> <tt> cron Four 19.4, 3 re Un exempta de document, Es i fir formutare Tell Us Your Address Definirea formularulul Definiaformalarulu intr tt corpul documentului este incadrati de etichetele <font si </>. Ea cuprinde att etichetele peniu cearen cimpurlor din formula, cit i textlasocatcémpurilor respective In eticheta <FoR> se introduc valrie corespunzitoae atributelor M00 (CEP sau £082) $AcTIOR Atsbutul ACTION contine inte ghilimele) denumirea fisieraful sau aprogra: | ula srit care va prekicra datele de intrare ale formularulu Deoarece formularul meu ese simplu, am folsi vloarea Post pentru atrbutul 12400, tarméned cadatel s fie prelucrate eu scripal pe cae il voi densi wast co “Mentionez o serverul meu cere ca sriptrile CI s fie stocate in directorul Co1-0n% ‘son 8 pentru nica n mod corespuneitrsrectorul ccL-B2¥, rebule 8 flasese oud puncte (.) pent a uca in arta server (Ora 19: Proiectarea formularelor interactive 225 {ats cum arati definitia formularului in acest moment: “<FORM HETHOD="POGN ACTION", ./CGI-BIN /MALLPOST.COI"> </roRe Pentrastributul 1128 dn eichela <INeUT> exist un gr de valor ie etichela <INEUE> ae oat avea dud forme, fear dine ele crend una tip decd: easels pet text, buton tip aioe, Vex secures CAmpuil ia frmulre formate lor cae umeaza In aoeesto, Dupli ce am stabifit modul de furnizare a datelor si denumirea fisierului script, webule si creiim cimpul de intzare de pe ecran si si-l denumim pentru ca script sf tie la ce se refers valoarea furnizata. Cimpurile de intrare sunt create cu ajutorul etichetel <unror sal aributelor ye, respectiviON8.TYF8 indica Gntre ghilimele)tipal cimpulul e intrare utiliza; de pilda, in exemplul urmator am folost vatoarea TEx? in scop de tea un eimp pentri introducerea une lini de text. Valoarea precizats inte ghilimele ‘dupa wats este denumirea asociaté valoriiintroduse de citre vizitator <PORH MBTHOD="POST™ ACTIONS*, ./CGI-BIN/MALLPOSP.c6I"> <INPUT TYEE="TEXT NAMES"Vieitoraddress" Si2B="4D">. </0R ‘Acum vreau si sriu ceva lingt cAmpul de intrare pentru ad spune vizitatorului ce date si introducd,Textul respect se definst si se formateazd ca in orice all fier HIML: <PORA METHOD=*?0St" ACTZOM*,./coI-BIN /MAILZOSP.cGI"> Tell us your <b>E-nail Adaxesec/b><INeUT TreEe™TeKr” NmiE="Visiternadeess’> </FORD 5 —— up vebrea “TEXT” a tibutui Type, a putt adiug arbutul $22 urmat deo ve ‘oace (6 exampl, S126—20"), pentru stabi lungimea cdmpulu de text (nearactre) een {ns final, voi adauga inainteaetichetei </r024> un buton Submit. Remarcafi ch am adaus gat inaintea butonului si o etichetd <> pentru al distanja putin. {In continuare este prezentat documentul informa sa final, care confine si butonul Submit iar in figura 19.2, formularul aga cum apare el pe ecran, cem> EAD <TITLE>Mdcese Forns/TITLE> </3830> coor <w2>TelL Us Your Aideass</t2> <FORM METVOD="FOST” ACTIGN”,/OGI-BIN /vATLEOSR. cot" Tell us your <b>E-rail Addressc/b><INPUD TYPESMTENT" MAEe"Visitoraddress"> <P 226 <iNnur Tyee="submit.query"> <p </RoR </800%> </a> Scrierea scriptulut Ca st vedeti cum arat un seript, vam prezentat vivatost. con impreuna ca desriezea I. Mai ott, emetic nile care fncep cu echo {hint menitesteansmitainformafi browserul, Prima lini descre ipa datelor (con- form spectficatiel MIME) cate sunt transmis browseruhs, penta ca Browseruls8 se clu s le interpreteze i acest az, este vorba despre un fier HTML). ups cum putet vede,lnilecare urmeazl defines un integer HTM cre va fi afigat in browse: in corp isierutal se pot observa dows lini care incep cw ecto. Prima Sfigeazh tent Thanks Yoo told us your adeeess is iar a doua aigeazévaloarea ‘usitoetsdveco, eve este valoaresintrodusa de viitatar in formalaz Aproape de Sfavsitul fisieralui apae olegtur car pagina in care se afl formularal, pent ca Viaitatorul 38 posts revert dups ce vede Fezllatl afsat de script aceastd secfiune un script simply, Four 192. Formularul finalizat ‘Tell Us Your Address | nares ed Ae [eee Siral £°F de la sfarstulfisierului inseamnd End of File (srsitulfiserului) Figura 193 prezinta formularul de iesire corespunzator datelor de intrare furnizate de un vizitator. echo cat ce 50F <tAD> STYTLE>Your Addzess«/TITLE> “</HEAD> <200e EOF echo © no eent-type: text/html anks! You told us your address is" i visitoradaress fh cat << 50 eben, SREP </pone> </atML> ° *, /uwe/Addcess. html" >Retuen to previous pagec/A><h> Ora 19: Proiectarea formularelor interactive 227 Frown 193. Formularul de iesire cu datele emu visitator Campurile din formulare $i formatarea lor {n exemplal prezentat anterior am folost un cimp de intrare de tip text (r¥PE="TEx0") cave creeaza peecrano casetS in care vizitatorultasteaz5 un text in afard de valearea tev, atuibutul TY9E mai poate lua una dine valrile: 4010 sau ‘aceeos, Fiecaredinte ele creeazd un at tip de cimp si sunt utile edn vizitatoraltre- buie i aleags datele de intrare cave corespund. Butoane de tip radio (<INPUT TYPE=RADIO>) ‘Tipul 29010 este folosit la crearea unor liste din care vizitatorul trebuie sa aleagk un ele- ‘ment executind clic pe butonul de tip radio din dreptul acestuia, Cand se apasi butonul Submit, scriptulut i se transmite valoarea prestabilit§ corespunzatoare bbutonului de tip radio ales. Observati ca liniile din exemplul urmator formeaza o lista ordonaté (<oL>} Fiecare element dintr-o list cu butoane de tip radio este creat printro linie <1N?0T> sepa~ 2at8. Toate butoanele au acelasiatribut ius, ins denumirile corespunzatoare valorilor itera: ap 4 <LI>cINDUT TYPE="RADIO" NAME="Character” VALUE= "Wito">Vito <LDDCINPUT TYHE="RADIO" NABA"Character” VALUES “Michael">Michael ‘<LIDCINPUT TYPE="RADIO" UAE="Character” VALUE "Predo">Fredo <j ‘Se poate observa ci linile sunt identice, cu exceptia valoni atrbutulli VALUE sia textultl de la sfarsitul lini (din afaraetichetei), care este afisat pe ecran in dreptul butonului, ‘Aceasth definitie de formular este afisata in pagina prezentatS in figura 19.4. Dupa ce ‘vzitatorul a ales un buton de tip radio sia executat clic pe butonul Submit, valoarea (VaUCE) corespunzatoare butonului de tip radio ales este transmisi serverului ca data de intrare pentru vasiabila Character. Foun 194, Baan Butoone de tip rion i soe Pi eve | eit \ie oe | 228 Partea a V-a: Finisarea pagintor Casete de validare (<INPUT TYPE=CHECKBOX>) Tipul ciscka0x este similar tipului RADIO, eu deosebirea cd permite vaitatorulul s8 aleaga mai multe elemente din list. Fiecare alegere este transmisi ca dati de intrare a varlabilei care i corespunde (Langa wt). Formularul definit in exemplul urmator este prezentat in figura 195, <LID<INPUT TYEES"CHECEBOX” NIME"Vito">Vito <LDCINPUT TYEES"CHECKEON” YAME="Yichael”>Michael <UD<INPUP TYPE="CHECKBOX” NAE="Fredo">Fredo <i> Four 195, Casete de validare ‘Dup’ ce vizitatorul a bifato caseti de validare sia executat clic pe butonul Submit, vvaloarea corespunzatoare casetei selectate este transmis serverului ca datd de intrare pentru variabila Character. Liste derulante i casete pentru text Jn fara eichetet 80, formslarele mai pot ff definite cu ajutorul uneia dintre etchetele SELECT sau TEXT, ‘Acest eicheteinlocuiescelichela <11#0T> altel spus, pute flos in cada lor tibutle vive vauit la fel cain elicheta x80, Diferd Ins tipalformilarulu creat. <st.207> creeaao lista derulanté cu opti. Ficare opiune este preczat in cad nel etichete corr» din blocul<seu¢e7, cain exermpal mito <SELSCT We" TVshow"> ‘cerviotFriende ‘Serio seinteld ‘crrton SeLfcTEDRee-iaw ‘crrIoi>The sinpeons SEETIOUDNGE Nightly Nous cyseLect> Observai ci una dntre tchetele <ort100 confine atibutul stcTeD.Aceasa este opti- nex selectati in mod prestabilit cid este afigt formblarul penta prima data, Dups ce ctlizatoralalege o optiune din formularal prezentat ca exemplu, opines respectiva ‘afi transmis sriptului ca valoare pentra variabila Show Formmlarul este prezentat in figura 19.6 (ra 19: Proiactarea formularelor interactive 220 Frama 1956, Olistd derutan a “<creTARER> creeazd o caset4 pentru text in care vizitatorul poate tasta un text mai lung. Aceasti etichett este utils pentru preluarea comentariilor facute de vizitatori referitor 1a pagina dumneavoastra. Q Dimensiunea 5. comportamentul casetei pentru text sunt determinate de o intreag lista de atribute. lata citeva dintre ele: = so#s-"vaJoare"” —_- Numérul de linii din caseta, cotse*valoaze” Nurul de coloane din caseta. wm wRAP=“OFF* Dezactiveazd ajustarea automata a textului din case Codul din exemplul urmétor creeaza caseta pentru text din figura 19.7: “<TENTARER 12ME="Conents </exnngex> Dupa ce vizitatorultasteaz& ceva in easets si executd clic pe butonul Submit, textul tastat va fi transmis scriptului ca valoare a variabilei Comments. ROWS "10" COLSH"50"> Fauna 197, O caseta pentru text 230 Partea a Va Finisarea paginilor Construirea unui formular in HTML Assistant Daca doriti un formular si vi descurajeaz’ gindul cd trebuie si scrieli codul HTML, nis titali cf exista citeva uilitare care vA pot ajuta. Unul dintre ele se afla chiar pe CD-ROM: HTML Assistant, (Retineti ci HTML Assistant, ca aproape toate uiltarele pentru for- rmulare, genereazd numai formularul care apare pe ecran. Prin urmare, codul scriptului de prelucrare a datelor trebuie scris separat.) Construirea formularelor in HTML Assistant este faciitata de existenta unet liste deru- lante care confine instrumentele definite de utilizator (USER TOOLS). Desi poate fi per~ sonalizat, lista confine, in mod prestabilit, multe dintreetichetele uilizate la crearea formularelor (vezi figura 19), Ba ESC see fesse ee te Js STS tn Four 19.8. Crearea formularelor in HTML Assistant Rezumat aca sunteti dispus (in starel)sA dati piept cu universul CGI, puteti face o multime de lucruri folosind formularele. Celelate tehniei utilizate sunt mai aspectuoase, dar nu sunt la fel de eficiente Atelier iar Este posibil ca, intr-un document cu cadre, si creez un formular intr-un cadru, iat datele lui de iesire si fie afigate intr-un alt cadru? R Desigur. De fapt, un astfel de document este chiar Netscape Page Wizard (vezi Ora 3, _sCrearea unei pagini We ela minut»"). De fiecare data cand un uilizator transmite din formular din cadrul de jos (care ofers formulare pentru crearea componentelor ra 19: Protectarea formularelor interactive 234 pagini), un script prehucreaz’ date introduse, iar previzvalizarea paginii din ‘adrul din dreapta-sus reflect’ modificarile Pentru a preciza cadrul in care si fe afigate datele de iesire provenite de la script, lrebuie sf include in eticheta <Fom, dupa denumirea fsierului script, atributul {TARGET impreund cu denumirea cadrului respectiv. lata un exemplu: <f0RM KETHODS"POST” ACTEONE™. ,/CGI-BIN/SAMPLE. CGT” TARGET-"TopPrane"> Bineingeles c3 pentru a putea face acest lucru,trebuie s& denumiti cadrele. Pentru etal suplimentare despre cadre, citifi Ora 18, ,imparfirea unei pagini in cadre”. Minitest Rezolvat testul armétor pentru a vedea cat afi reusit s& invatati Intrebari 1. Care dintre limbajele urmatoare este folosit in scripturile pentru paginile Web? a. ava b.CGL «JavaScript d. Toate limbajele anterioare 2, Putefi crea un formular functional folosind numai cod HTML. Adevarat sau fals? Raspunsuri 1.(@). 2, Fals. in codul HTML se specific numai aspectul formularului si citeva lucrari fitoare la modul in care formularul preia datele. Pentru ca formularul sa preia $i s8 prelucreze datele, pe langa codul HTML mai este necesar si un script. Activitate Luatilegatara ca furnizorul dumneavoastra de Internet (sau vizitafivi situl Web) $i aflai care sunt servicile de scriptare oferite de firma, Ora 20 Plasarea mai multor legaturi sub aceeasi Imagine Cu siguran ol ji viz n pagnile We aceleimagini grorave si barele cu butoane care contin sai ute legato Dad execu ci pe un baton so pe una dire zone smagini,sanget inten anit loc iar da exes cc in att pat, ange) in al loc, Eo treaba de profesionist eee Dar asta nu inseam cA nu 9 putet face, mai ales daca tinem seama de cele 19 ore de antrenament pe care le avet la activ. In aceasta ord veliinvata sé aplicai cele invtate in Ora 17, ,Editarea codului HTML’, si in Ora 19, ,Proiectarea formularelor interactive", pentru a crea aceste imagini cu mai multe legaturi. La sfarstul acestei ore veti putea | ispunde la urmitoarele intrebari ® . * a © Cum se croeazi o imagine inline care confine mai multe legituri? 1 Existd pe CD-ROM ceva care ma poate ajuta si fac mai ugor acest lucru? Imaginile-harta este ilustratd in figura 20.1. = caaeeumiaunence fi corespunde legaturit in cauz’, p peaonaimsginnes Imagine hart se osc construe uno cea mal deste, cum a 8 eile Es crete te peta aes roan fs anette a copies aa orgie innate cone tae rbeseone ee yr aaa aan Sees meee wee as coerce cee i a pina cc a Fura 2041 Executind elc te aifeite Locuri de pe faceast imagine-hart, sum activate legturi aiferite osute Cxers Loss Cu as ee Pe server sau pe client? (0 imagine-harta poate fi cris pentru asta pe un server staf prelucrata de wn script (CG tulat pe server sou poate fi codificatA in fisierul HTML pentru a fi rulata de browser (cen! Din punctul de vedere al autorului de pagini Web, imaginile-harta pentru client ofer4 iste avantaje deosebite: nu trebuie si stocafi suplimentar pe server un fisier hart Ris nu aveti dea face cu scripturile CGI de prelucrare a imaginilor-hart8 pentra server, {fod nu trebuie vi adaptafi particularitatior CGI ale serverului. Din pacate, imagi- nile-harté pentea client funcfioneaza numai daca browserul cunoaste relativ recentele txtensii Netscape pentra hartile de pe client. [n acest moment, astfel de browsere sunt ‘numai Navigator si Internet Explorer 4 Probabil c8 pins la urmd, fiind mai usor de folosi, imaginile-harta pentru client vor fi standardizate si vor dispune de suport in toate browserele. Alegerea imaginii $i definirea zonetor Indiferent de tipul imaginii-harts pe care vreti si o folositi, pentru a mapa o imagine trebuie st procedatiastfel tm alegeti o imagine corespunzitoare; 1 impinttiimeginea pe zone i stabilfi care este zona corespunzstoare fiecSrui URL; ¥ determinati coordonatele fiecsrei zone. Pera maginea-har pute) cos orc imagine Gf isd cele care conta figuri geometries rt mal indent Pte folos! si poe sau ae ago cre nu conti forme clare, defining idinela tn od arbitra, da exist posibitatea ca tatoo separ conte | 234 Partoa a V-a: Finisaroa paginlor Era de magi Pit Shop Pro se afl pe CD-ROM care nsoeste cata es ‘Acum, cham ales zonele rebut e af coordonaele: Dachdeschi imaginen ina editor ca Pant Shop Pro (vet! gurs 203) plimb mouseuldeaspea main pat vedea in mijlocul barei de stare cootdonatele (x, y) corespunzatoare punctutai in Eee as indctorl mouse Proedind atl puta coordonstee eat ale ColurtrSechet zone, Pract zona este definta prin cols et Fauna 20.2 O imagine GE potrivitd pentru 0 Imagine-harta Fisum 20.3. Determinarea ‘coordonatelor in Paint Shop Pro Wa webaa 89 lgue el eta cnr zn Dac er PI | cen na esta eeu pa epoca =a esl ee | flumai daca zona nu este atét de micd Incat precizia si conteze, 7 01a 20: Plasarea mai multorlegéturi sub aceeas! imagine 235 Pentru exemplificare, va vol prezenta in cele ce urmeazA modul de definire a zonelor imagint din figura 203, De obicei, pentru dreptunghiuri trebuie st precizati numai dous Colturis cel din stanga-sus si cel din dreapta-jos. (lind vorba despre un dreptunghi alle doud puncte sunt determinate usor de programul de mapare) Totus, in azul Sostru dreptunghiurile sunt inlinate si ar putea si nu objinem rezultatul dorit dac8 mu precizam fecare colt, Cercul se defnesteprecizindu-i central si ungimea razei (in pb) fer poligomul, predizandui fiecare colf, Eu am folosit urmatoarele coordonate: Pala din stanga: 3,19 18,5 78,64 60,76 Pla din dreapta: 139,4 158,17 99,75 84,58 Azul: 80,80 24 Casa: 56,87 104,87 124,197 44,198 ni trebuie pentru crearea imaginiicharts: URL-ul, denumirea si coor- ‘Acam am tot cf tdonatele corespunzitoare fiecdrei zone, De facut: Creati o imagine-hart& pentru client eta <P>, care le indica browserelor ci urmea2a o 1 Incepeti ce etic ‘si denuimirea atribuita ima- imagine hart, Eticheta <ta2> confine atributul SAM ginitharta (orice denumire doriti) Devens ony ain agi ran co eta HTML, wing | ve | Ee vr en ne stain in Sc a CT 2. In continuare, folosind eticheta nee: Eticheta 3228 contine atributul Si ‘822>), care apar in aceasta ordine. definti fiecare zona i URL-ul asociat ei. ‘tributul coosos st legatara (eticheta ‘Valoarea atributului si2@ indica forma Zonei (C1212, FECT, POL"), iar in atributul coowDs sunt precizate coordonatele {intre ghiimele). Perechile de coordonate sunt desparfite printr-un spafiu. Lintile turmatoare definesc imaginea-harts HartaMez eaten" (COORDS="3,19 18,5 78,64 60,76" 99,75 84,58" 1 104,87 124,187 $4,198" 1 “eanp NRE Re <a> 43, Bticheta «ims $80> care indicd imaginea inline nu apare in definitia ha O putet cre oriunde in corpul fsieralat HTML (sau acolo unde vrefis& Re fata imagines pe pagina), ca gi cum ar fi vorba despre o imagine inline Shisnuite Pentru a lege imaginea de imaginea-harta, trebuie s8 addugati alsibu- ful Uszza6 cu valoarea pe care i-atidat-o atributului Nae in eticheta IMs SRC="U6.GIE*-USENAP>Hartaten"> | | 236 Partea a V-a: Fnisarea paginlor Crearea unei imagini-harta pentru server Conceptul de create aimaginilor hata pentru server este analog celui utilizat la hile pent client, insd executa este diferta. Este important de retinut ci descriereazonelor imaginichart mu seafain fiierul HTML, ct nti-un fsier separat, pe cae rebut s3 IncSreati pe server Primal pas in creareaimaginilorharté pentru server const in aflarea denon programulai CGI pentru imagin-harta ia porfel acestua in structura de drectoare a serverului, Mojoritateaserverelorflosese unt dintre programeleurmatoare: ™ Imagemap,folosit pe serveele NCSA HTTP; HTimage, folosit pe serveree w3e htpd. Inte cele doua programe existé mii diferente fn ceea ce priveste codul din serul ca definifa hits cel din documental HTML. Fisierul cu definitia havi eongine cite o Hine pentru fiecare zona, in fiecare line ind incluse: denuminea forme pe care o are zona, coordonatele zone si URL-ul refer de zona respectiva Jn cazul programului Imagemap, precizat forma zonei, URL-ul,apol coordonatele ca sai jos rectangle /palastanga.hin 3,19 18,5 78,64 60,76 rectangle /paladreapta.htm 139,4 158,27 98,75 84,58 cizete fanul. nin 80,80 24 polygon feasa. hea 56,7 104,67 124,197 44,286 Jn cazal programatui HTImage, precizaf forma zone, coordonatele sil urmi, URL-l Fiecare pereche de coordonatetrebuie puss inte paranteze (rai pufin raza cerca ectangle (219) (18,5) (4,64h (60,76) /palastanga.hom rectangle (133,4) (156,29) (98,25) (8,59) /paladreapta. nin tecle (6,80) 24 faxal. htm polygon (55,87) (104,87) (024,190) (44,198) feasa.dem Salvati fisierul cu extensia MAP gi incarcafi:l pe server in directorul indicat de admi- nistratorul de sistem. CCreati in fsierul HTML o legiturd care si aiba drept sursi imaginea si, in acelai timp, si identifice pe server programul de prelucrare sifisierul cu definitia harti. Apoi adau- ‘gafiatributul 15122 in eticheta IMG sec care indica fsierul cu imaginea, pentru a ardta ‘cleste vorba despre imaginea utilizata pentru: hart De exemplu, codul pentru programul Imagemap este urmatorul: an /ogi-bin/inagenap/naps/Hartatiea.nap"> SROW"W6,GIE" ISHAP> <i Tar codul corespunzator programului HTImage este: <h HRBP**,./ogivbin/htinage/nape/tactaNea .nap"> ‘<IMG SRO="W5.G1E" ISMRP> <im (0.a 20; Piasarea mai muitor legaturi sub aceeasl imagine cova sean cleo won rete an roa tea Siar suai ee or ron ret 00 ah MapEdit ‘ ram care vd abt, ect pst ye CD-ROM ae instste carta este program cre eer es igerecd dena haror pet servere unde ruleazaInagerap pul st ce thttmage ee fn Mapp chide un er IF pe core ri bf ao imagine hart are etn ca mosel sated UR uleoespunstorSecsri dinte Sec arrestee cu dena hr pentru ipl deserve sree aa ou ns sare cust sn soda pcg rset es inl w jo econo inp pres (el igurn Fesuna 204. MapEAit Rezumat ev ins cA in rmaghllehat sunt desl de igen prea grew de feu Asia aaa aes ut den sone upr de deriten de etre vitor Atelier ian {fBste posibil cao legiturd dintr-o imagine-harts afigatd intr-un cadru s& deschidt onli toa oat R oe i. Pagi: necesari sunt asemandtori cu cei din cazul formularului dintr-un cereee re ieschide un Ggirn alt cadru, AdBugati dup8 URL-ul din etcheta A723 Stel in tmpgenc ctor her since cotusess 10" 20 eREPtopaneNea TARGET=To 238 Partea a V-a: Finisarea paginilor Minitest Rezolvati testul urmator pentru a vedea cit afi reusits8 invaati Intrebairi 1. Care dintre imaginile urmatoare este potrivita pentru o imagine-sharta? a, 0 fata zambitoare de culoare galbens, b.0 pozi cu ocean, € O harid a Americi Centrale, d.O minge albaste. 2, Daca va asteptati ca toi cei vizati si utlizeze browsere de frunte, ce magine-haris este mai indicat s8 folosii? a a. Pentru client ». Pentru server. «. Pentru salient. 4. Pentru cerber. 3. Pe majoritatea serverelor,scripturile CGI sunt stocat r scripturile CGI sunt stocate inte-un director special, num a. SCRIPTS rec mens b. SPECIAL © CGLCOMPARTMENT 4. CGLBIN R&spunsuri 1 ® Numai imaginea de la punctul (c) este imparit8 dlar in zone ugor de distins, 3.(@. Activitate Liat una dintre paginle dumneavoastr star . i wast care confine mat mult deo legit Va putei sind a o imagine care ar putea servi, in mos lng, ca tmaginerhar® pentru toate legsturile din pagind? Este posibl si gasitiimaginea respectiva i imagini sau trebule so creati? 8 8 spectiva intr colectie de Partea a Vi-a Plasarea online Ora 21 Publicarea paginii Faptul cb afi devenit un autor de pagini Web nu trebuie s-stie numai canarul ‘Gumnneavoastea. E normal s& doriti ca munca dumneavoastz4 s8 apard pe un server Web pentru a fi vizitata,apreciata i indrdgita de cei care navigheaz pe Web. Composer v8 este de mare ajutor in publicarea paginilor. Configurdnd cativa parametri presabilifi si organizandu-v8 corespunzatorfiserele, vllreusi si v8 publica paginile {Gi ulterior sf le actualizati) cu numai teva clicuri La sffrsitul acesei ore veti putea rispunde la urmatoarele intrebari: ‘= Unde sunt publicate paginile? Ce trebuie 58 verificatiinainte de a publica ceva? ‘Cum se configureazé Composer pentru ca publicarea 3 = Cum se utilizsaza butonul Publish din Composer? fie usor de facut? CAte ceva despre serverele Web Pobabil cd pe parcursul aplicailorefectuate pana acum v-ali hatirat unde sf va publi- ‘afi pagina. In €xz cA nu, lath céteva locur in care puteti gsi un server Web: La serviciu sau la scoals. La serviciu (sat la scoala) s-ar putea si aveti un server Web pe care vi este permis sf vi stocai pagina, Daci pagina are un confinat legat de servic {Efau de scoala), este de asteptat s& vi se permita sa 0 publicati gratuit Se poate observa insi cl acces gratuit la serverele fimetor sau ale universiitilor se iminueaz’ rapid pe masurd ce creste cererea si pentru c& aceste institut caut s& cstige bani de pe urma conectari la Internet. De asemenea, multe dintre sistemele din univ verse firme) sunt suprasoicitate, fiind posibil ca hardware-al lors fie invechit sau viteza de transfer inadecvata, Un astfel de sistem na poste ofer servicitcorespunzatoare viztatorilor dumneavoastr’, mai bine plats ctiva Rolar pe luna pentru a absine spatiu pe un server particular decat s& folositi gratuit spafil de pe un server amérat De la furnizorii particulari de Internet sau de la firmele prin care igh oferd servicitle coniline. De obicel, acesti farnizori ofer3 cel mai bun raport serviciu/ pret pentru publi- 240 Partea a Via: Plasarea online ‘area paginilor Web. Impreuna cu fiecare cont Internet, majoritatea furnizorilor parti- culari oferé un spatiu gratuit pe server sio list cu preturi in functie de spatial inchiiat. Cu toate cé s-ar putea sa fie convenabil s5 inchiriatispatiu Web dela firma care va furnizeaza contul Internet, putetiinchiria spagia sf din alt& parte. Este posibil ca un ‘bun furnizor de conturi si nu fie la fel de bun pentru inchiriat spatiu Web, datoriti preturilorridicate si/sau a slabelor servicli. Cu alte cuvinte, orientali-va 1 [nant dea alge un anumit turior de satu Web, vet de cite ot pagina Web a fei espetive la dente oe. Dacd server Toatinest anemia pginor la anurite ‘re sau pre inispomibi din edn in nd, cit un urge mal be dot. Construi-v singur unul. Dac pagina dumneavossir necesito securitate mai mare tpenira vine online) su olosest ntens script CCl a ales pene formula), ea mai bund sate este un server Web de ip inchouse Argumenele ae nin spe jinalconstruii proprutl server Web (char de ctr firnele rely ma) st petal seul calor nse a PCa pba dean alee le server in priml rnd el de a Netscape $i Microsoft respetiv larga dap tate nile per wafer dato usec naa un sem BON Th = Un server Web nu este etn. Hardwar-l i software-ulcorespunzitoare unul server mo- ‘est ot lunge upor la un pe de 4000 de dolar (sau mal mu}, ns eonecare permanent la lteret si viteza rica de ranstr carve do unserer Web, pot cost de ptt or ma smut ~ Inca lu |i plus, mai treble angajt sun expr cares se coupe n permanent de adminsrarea Server Web, Toate acest caine n inseamnd mul penta o fm cu peste 100 ce anga- Jat sau pentru femete mai mii al cdror pro neces unserer Web, Tui entra cele ‘ire mic, inchierea spat rmdne vata cea mal bun, Pregatirile dinaintea publicari Publicar pogin seamnt multe agrvitul nel cas: weab props exe usar de int, ns trebute stent pres nsinea de a publica pogine tal ot scat Shap apap cepstral pope Si fiietle care alte pagnnProcednd atl, pu preven bles oe ea tarziu (si s& faceti ca publicarea si fie o bagatela). Lis ‘Comunicarea cu fumnizorul serverului Cel mai important lucru care trebuie facut inaintea publicirii este si aflati cerintele si limite server pe cae urmeazas& publica pagina. Mai pecs, rebuie sf urmatoare ' Profocolul de comunicati folosit la inctrcarea fisierelor ~ Multe servere va permit ‘8 utilizafi protocotul valabil pe Web (HTTP), insa altele necesit ca fisierele s8 fle incdr- cale via FTR (Composer ofera suport pentru amandous.) ra 21: Pubiicarea paginil 2at ack sine fart eu tare uno cet inte TP ar pues dort a wiz | ent aincarca feel pe server via FTP. Dac incarca firele pe serverulfumzortl ‘Gureavoesr de internet, acesta vi vada instruct nacesare(eistante, de regi, pe sul Web al furizru) pentru publcteapaginlor pe server via FTP. in somo, utzareabulonuluiPubish are eAtevaavantae fade ullzarea protocol FTP Buona Pte ch eqn sg pe severe rel ees, os Sus o posing let eer 8 Sut ce sect uml malo oh int poet 1 Adress comple director in care vr fi stoctefiseele~Trebies8 fi URL-at complet corespuncitordiectorul in care vor fi stocate fierce, Acesta include rnamele server clea cite ctecoral dummneavoasra si densmiren acest deal Cstes vei prooral director in care 8 stcnt fost reel, Ares Tacra v scutes de Covi caee pot ii dae vreunul inte figeree de pe sistem (o paging o imagine ‘sau un alt fisier) are denumirea identicd cu a unuia dintre fisierele dumneavoastra. B Regul sau rstrcitecuprivire la denumsrileiierefor—Reguble de enuswire a ferrin a alt De exmp severe x laterns DOS CSteva dite cee cu pavormna UNIX mx peritcenumis de fisiere ma ng de opt Caracler exten ca tal mul de rel caractere, Cela bine este fafa aeste ‘est ininte dea dena peel, Dac afi denumt fiers inainte de a fla restric corspunzstone serveruli, dupa ce le aflai tebule facet modiicile acest danuir ste das uilzzt pentru prima paging a unul document Web format cin ‘ma uit paginczzl in care drctoulcontine deja. un flr duit index. hem, serverul va espoge fier durnneavoasr su va suprasrie pe cel existent 103 Daca rant de apubca pagina modal denumiea sau ponja vreunt fiir, verity st ssa legate celle eferineiteme implicate (cERANE SRC>, <IMG SAC> et) 1 Spasiul avut a dispozitie pe server ~ Daca va publicafi pagina pe serverul unei firme sau al unel universitag, probabil va tyebui sa va incadzaiiinte-un anumit spatia cu toate figirele (isiere HTML, imagini,elemente externe si scripturi). Daca inchiriafi spatiu de la un furnizor particular de Internet, taxa lunard este determinatd de spatiul ‘ocupat de fisiercle dumneavoastra. De aceea este important s§ stifi cit spatiu ocups setul dumneavoastrd de fisiere. [td 0 modalitate simpld de a afla spatiul ocupat de fisierele dumneavoastra: deschideti ‘Windows Explo:er (sau omologul lui pe Macintosh), evidentiatifigezele necesare ‘paginii,apoi cit in bara de stare din partea de jos a ferestrei spaliul acupat de fisierele selectate (vezi figura 21.1). Retineti cA aceasta metoda este valabila numai daci fisierele se afl ir acelasi director Daci anumitefisiere, cum ar fi imaginile sau scripturile, se afla m alte directoare,trebuie sa aflafi numarul de octeti ocupati de fisierele din fiecare director, apoi sa facet suma acestora pentru a afla spafiul total ocupat de pagina dumneavoastra 242 Partea a Via: Plasarea onine Forma 211, Spatiul total ocupat de pagina este afigat in ‘parten de jos a ferestret 1 Unde trebuie sit stocati scripturile - Daca utiliza seripturi CGI (vezi Ora 19 si Ora 20), trebuie si aflaji in primal rand daca serverul oferd suport pentru scripturile dumneavoasira, In al doilea rind, trebuie si aflati procedeul specific de incéreare a scripturilor, care poate si difere de modul de incireare a celorlatefisiere, De exempl, scripturile CGI sunt stocate de obicel intr-un director numit eo .bin; sar putea ca din motive de securitate, incarcarea fisiorelor in directorulegi.bin si necesite o parola spe- ciald sau un anumit procedeu. Numele si parola folosite pentru obfinerea accesulu la server ~ Pentru incdrcarea fisierelor,furnizorul serverului trebuie si va dea un nume (username) 3 0 parold (password). Daca furnizorul dumneavoasted nu cere parol, cautai alt furnizor, eoarece paginile dumneavoastra nu vor fi In siguranta pe un server care nu este pro- tejat cu parola, Verificarea listei cu figiere Stind acum tot ce trebuie 0k stilt decpre server, verificali (yi iar verificai figierele si legaturile dintre ele, Asigurati-vs c& au fost actuaizate legatarile corespunzatoare ceventualelor fisiere mutate sau redenumite In cursul compunerii paginii sau pregati- rilor pentru publicare, upd cum am mai menjinat nd put est bin <8 copa trun singur dretor toate iglerele care acsulesepagin ~ imagine inne selememle extere, Cina ve floss ‘ton Pubish, vt descopan lest aroape ipo s incre in acl tim toate figierele dato pagina complexa dacs nu se ai in celal recto. tp clulatorul dum- rnaavoasti, ct 9p sever. Retinefic& .legiturile” pe care trebuie si le verficati nu sunt numa legaturle care {nlanguie paginile, ci si cle si denumirile corespunzatoare urmatoarelor elemente! ra 21: Pubiicarea paginl 243 4 fipierele cu iragint inline; legaturile catre elementele externe; 1 etichetele <FRAME. SACD, care indicd denumirea si locul fisierului care va fi afisat {ntr-un anumit cadry; * legaturile cite fisierele script externe. Asigurati-vd, de asemenea, c3 toate fisierele cu elemente exteme au extensia corespun- zitoare tipului lor (vezi Ora 15), Pe baza extensieifisierului, browserele stabilese ap! catia ajutitoare sau programul-anexa necesar redarit sau afishrilfisierulul In cauza. {Daca descoperisi cd trebuie si corectai o extensie, nu uitai si modifica gi legatura care corespunde fisierului respectiv!) Configurarea parametrilor din subcategoria Publishing Prin configurare parametilr din subeategoria Publishing a cael de dialog Preferences objinet dows cru grozave: = Configuraiutonal Publish din Composer ees ce v8 usures28 att publicare, et fi octualicaeaulteroard a pagin legiturile si fie ajustate astfel incit si fit ferifi de erorile care apar la copierea paginilor pe sau de pe server. De facut: Configurati parametrii din subcategoria Publishing 1, Deschideiicaseta de dialog Preferences in una dintre componentele pachetulut ‘Communicator, alegind Edit, Preferences 2, Executati clic pe semnnul + de lings categoria Composer pentru a face si apara suubeategoria Publishing, Fura 212. Saacreeeer onene | Confgurarea toe parametritor din Seer es ‘subcategoria anaes inion, Publishing eames ctr a 244 Partea a Vi-a: Plasaroa ontine Y ‘ful in crept casetir ge validareacioneaz8 in dvd dee: cdndTocireaitigerele EB | ve server. tin tisereleimpreuna sl ajustoad legturil, ar cdnd descdrcai pagini de pe Web (e exe, abloane), fac aceas hc. 4, Asiguragiovs ed fn sectiunea Links and images sunt marcate ambele casete de vvalidare, Prima caseta de validare ii indic& programului Composer s8 creezé legaturile dintre fisierele din acelasi director folosind denumiri de cale relative, ‘Acesthucra asigurd functionarea legaturilor si pe server, cu condifia 88 fi inca cat pe server toate fisierele in aceleasi directoare ‘Dac bifati a doua caseta de validare, Composer copiaza automat toate fisierele ‘cs imaginile inline din pagina ori de cite ori un fisier HTML este incarcat pe server (cu butonul Publish) sau descarcat de pe Web. ‘nerent de Conigurajiapararetor dn subestegoriaPobishing, este bia slosh Seni de ae relative note leu dn aging cu excep iegaturor etre resuse ata itn ate URL). Pararei dnsudcaenoia Pbishing vA pot ja dacé west aca prin, car asta nv insearnd c ny rule a denarii de ale ua ln} ed paramatrs dn dept! celordoud caste de vaiare mua efect det asupre serdar gratin stcal in aceag decor cu ier HTML i aspra legato ctre ficta din acl! rector. Dacb av fier stocate in apart, ara inciearea paint saver oti eicheele pentru imagin nu mai ima valle, Composer nu va va aha. Pin urare, verti lgaturle cu ateni 5. Introduceti in primul cimp de sub Default publishing location, locafia exact (un URE-care incepe cu http:// sau fp://) in care vor ft incdrcate fisierele cind, folositi btonu Publish. ‘acd ational si pubes pagina pe ral multe servere san mal mute drctoare, ns tebui 8 faa in priv locas prectate in 20na Deas publishing location. Pur spl, ntroceai aes pe care o utiz oe mal des; cle taceipucrea ‘optus, vel avea posites introduet oat adres sau o a locate de cirectr. ack URL-ul introdus in primul chimp este a adress Web (htrp+//), Navigator va folosiinformatia respectiva atat la vizualizarea pagini,cAt sila trimiterea ei, In cazul in care adresa corespunde unui server FTE trebuie si completat si al doilea cimp. Acolo trebuie si precizati adresa Web corespunzatoare paginil (URL-ul prin intermediul ciruia vizitatori vor accesa pagina incarcata). A. 6, Bxecutati clic pe OK. Utilizarea butonului Publish din Composer Dacé afi configurat parametil referitori la publicare si v-ai pregAti fisieele, publi- ‘area pagini ese banals. Nu, nu se reduce totul la apasarea butonului Publish. Este ceea ce producitorilor de software le place s numeasca faciilat, pe cind celal fi spun pur si simplu nascocire Cx toate acestea, publicarea paginilor din Composer nu vi di nici o durere de cap. Ora 21: Pubiicaroa paginlt 248 ‘u jutsu! butonulu Publish din Compose, pagiile nu po fncircate det int-un singor ‘eto co po server. Dac dort 8 pubcajo pagina In mal mute dretoare sav subdrac- toate, tebuie s repeat procedure de pubcare pair car diectr in part De facut: Publicati o paginé 1. Deschideti in Composer o pagina oarecare sau prima pagina a unui document ‘multipagin’. 2, Executati ‘pe butonul Publish din bara cu instrumente Composition sau alegeli File, Publish. Va apirea o caseta de dialog similara celei din figura 21.3. Frouna 213. Caseta de diatog Publish 3. Vetficati daca textul care apare in cimpurile Page Title gi HTML Filename (si ‘are descriu pagina deschisa in Composer) corespunde paginii pe care vreti sii 0 publica. Duct nu, executati clic pe butonul Cancel si deschictifisierul care trebuie a 4. Text care apare iniial in cémpul HTTP or FTP Location to publish to reprezint& locatia precizata in subcategoria Publishing din caseta de dialog Preferences. Dack nu. darii sé publicati aceasti pagind in locatia respectivs, puteti introduce It URL. ‘tserci cd atresa se introduce in cdmpul HTTP ar FTP Location to publish to, cae este de fapt ost delat, dec adteslepeczate anterior pot fi registe nist espectiva 24 ‘Casetade dialog Publish va refine nul tizatortl (user name) corespunedorfedrat saver p care pula! papin! ip vitor vs furizeaz automat. in motive ce securitte, foley sunt memorte automat, Daca dori ca paroacorespunzatoareunul server 58 ie ‘mert ssi nyo mai tata a doun oa, bai caseta de valare Save password 5. Introduce{i numele utilizatorului si parola corespunzatoare serverului FTP sau HTIP pe care publicati pagina. Aveti grijis3 le tastafi exact asa cum v-a precizat administra:orul serverului, deoarece anuimite servere Web sunt sensibile 1a ¥ _modul de scriere (cu litere mari sau cu Titere mici). 246 Partea a Vi-a: Plasarea online ¥ 6:In caseta de sub Other files to include, puteti selecta fisierele (mai multe HTML, fgiere grafice, sripturi etc) care dorit si fie incdrcate pe server i dlirectorul incicat. Pentru aceasta trebuie si precizati care fisiere si fie afigate in lista vespectiva: Deoarace cin alge opunea Fes associated with this page, cassta de log Publish nu ‘a inclu in ist gi irl extern etre, este bin ca toate ree care fn de o anu paging safe stocate in asa director. Aste, vl putea alege opines Al Hie in page’s foldr apa: vt putea 8 slecty toate fislette nto singura opera. 1 Files associated with this page Dack alegeti aceasta optiune, in caseta de sub ‘Other files vor fi listate toate isierele inline (att imagine, cat si scripturile) care sunt referite in fgieral HTML, Refine cd fsierele atasate paginil prin inter~ rmediul legaturilor externe (veei Ora 10, ,Crearea legiturilor"), nu sunt inchuse. 1% AIT files in page’s folder ~ Dach alegeti aceasta optiune, n caseta de sub Other files vor fi listate toate fisierele (de toate ipurile) care se afl in acelasi director «cu fisierul HTML, Dacd ati fost previzitor si ati copiat in acelasi director cu fisicrul HTML toate fisierele referite (att cele inline, cat si cele cu elementele cexterne), prin intermediul acestei opfiuni vor fi disponibile toate Dupa ce afi ales care fisiere si apara in list, selectat fisierele care trebuie incir- cate, In mod prestabilit, sunt selectate toate fisierele din lists. Puteti deselecta (Gai reselecta) orice fisier executind clic peel 7, Dupa ce ati evidentiat in list3 toate fisierele care trebuie Incarcate, executati clic pe OK. Communicator se conecteaza la Internet sau la reteaua intranet (dack nu tste deja conectat), apoi la server si transmite numele utilizatoruli si parol. Daca serveral le accepté, Communicator trece la incircareafisirelor in direc- torul specificat in caseta de dialog Publish, ‘aed uizabutonu Publish petra Inca tijerel ao adtesé FTP, Communicator ttanser automat girl otosnd moc binr a protocol FTP. Fees HTML. care | sun give tet, pot ftanserateflasnd mogul ASC a protocol FT, ns rele | raf si maeitateafiereor cu element enter nu pot transfert atl deasace pot {péte ror Modul bina asigurdansfeul corect a tturor tiger (tet sau deat), ‘ate net o dat june Ia dating, accra pt Mutilated poblane, Rezumat Publicarea paginilor este o activitate simpl (care nu necesit8 o pricepere deosebits) daca pregitirite sunt facute corect, De cele mai multe oxi, problemele care apar la publi- tare sunt cauzate de greseli simple, cum ar fi plasarea in directoare diferte a fisierelor care tin de aceeasi pagina. Dacd sunteti atent la denumirile si amplasarea fiscrelor, daca respectati regulile serverulut si configuraticorect programul Composer, publi- ‘area vi se va pirea tunul dintre cele mai plicute aspecte ale credriipaginilor Web ~ ris- plata unei munci bine facute. ra 21: Publcarea paginit 2aT Atelier jan 1 Cese-vaintimpla dacs se schimbs standardul HTML? Paginile mele nu vor mai fiafigate de browserele care se conformeaz8 noului standard sau ofera suport pentru noileextenii? R Actualizaril fimbajului HTML sunt compatibile cu versiunile anterioare; cu alte cuvinte, etichetcle gi atrbutele nou adiugate reprezinta moduri noi de a face lucrurt vechi, Dar, cu siguranta, vechile metode si etichete vor fi valabile in continuare. Jn Ora 23, Testrensintetinere paginilonlne?, vel invita cum s8 v8 testa poginile HIME alate onine. 1 Cum imi actualizez pagina daca 0 modific? Si acest Iuctu il vel nvafa tot in Ora 23, Dar mai intai trebuie sA invatati cum si Anuntati celorlati pagina proaspat publicat ctiti Ora 22, ,Cum va faceli simita prezenfa pe Web". Minitest Rezolvati testul urmator pentru a vedea cat afi reusitsA invaati Intrebart 1. Daca aveti o paging Web stocatd intr-un fi bati denumizes fisiorului decit dact: ‘nu va place cum sun b. aveti prooriul director pe server, unde nu sunt stocate dectt fisierele dumnea- voastrs; .v-a dat voie administratorul serverului; dd. va place si trai periculos. 2. Pe majoritatea serverelor va puteli publica pagina folosind un client FTP pentru a incirca pe server fisierele necesare paginii, Adevarat sau fals? numit indechtm, nu trebuie si schim- R&spunsuri 10) 2. Adevarat Activitate Agi publicat vr20 paging pe parcursul acestei ore sau numai at citt ce v-am prezentat? Dac& nu, nu primiti nici un punct. Cateodatstreby iiativa; punefi mina si publicatio pagina, on OrA 22 Cum va faceti simtita prezenta pe Web act dup ce af plasat pagina pe server, ste nimeni de ea ru prea va est de fos. "bul ape penta cae cae ar pie tee dea post Inaceast ort vi afta cum i pute face publictate paginildumneavoases. La stig acestei ore vel putes raspunde la armtoarele intebr 1 Unde se afl cele mai importante directoore Web, pe cate a rebut st fle mentionaté si pagina dumneavoost? * Cum face st apara pagina in unui dintre acest drecoare? 1 Ce alte modalitii dea face publictatepoginiexista? * Com transmit prieteniloy, familiei sau clientilor un anunt prin posta electronic3? Mentionarea paginii in directoarele Web ei care pot fi vizati de dumneavoastra cind creati o pagina Web se impart in dou’ categorii: cunoscuti si necunoscuti Pe cunoscuti ii puteti anunfa direct procedind asa cum vel invifa in aceasta or, dar cel mai eficient mod de avi anunta pe necunoscuti este si va treceti pa lunuia dintre cele mai importante servicii de cButare pe Internet. lat citeva dintre aces- te servic Yahoo (ver m Excite: igura 22.1) Lycos: tons, 1yco8.com ™ Alta Vista: voww,altavista-digttel .con InfoSeek: sy, snfoseek.com WebCravler: auler.con (Ora 22: Cum va faceti simi prezenta pe Web 249 Feo 221 Yahoo este unul dirtre siete bee treconnee Web Srenimataacgs |——@-@ YAHOO! -@-@— / “ee a, GEE i ih ins ah! Tne bss th ens etdronms rem eg Lse eacMa Caate: euat a ‘ah ee ES ace ne ‘Ate enumantes ewe Recs intvien i eas EEmaiewet Business Economy — Be ‘acd pagina dumneavesta se eer la un anu sublet, este nes flosti rectoarele tru gsi si stoi alte papi care se rte la acees subiect. Mute ite ee ofr oft delet cdte agi cusubict sma. Cénd gsi! oastel de pag, pute timite un mesa administrator de server pet ai cere s&adauge in sta respectivolepturd cite pagina dumneavoastr. (De obice,pe payin respects apare 0 leitur malta cate Webmaster) De asemenea, pent 2 retuma servic, pte sh acing in propria it Woo st cu opt etre pagin sir, Cand pagina dumneavoaste8 apare in lista unui astfel de serviciu, va fi gasita ori de cite ofi cineva caati ceva legat de subiectul paginii, de titul el sau de cuvinte cheie din fea (vezi Ora 5, ,Siabilirea ttlului a culorilor sia altor proprietat ale pagini). De fapt, uncle dirtre paginile de cSutare vor gasi singure pagina dumneavoastra. Servicii ea Excite gl Alta Vista folosese programe (denumite uneori spidere sau crawlere) ca ajutcrul chrora cauté metodic pe Web si isi adauga noi pagint in propriile directoare, AdSugindu-va manual paginile in astel de directoare, e veli vedea listate mai repede si veti mari sanse'e ca cle sa fie categorisite corespunzator, astfel cresc gi sansele ca paginile dummeavoastr sa fie gisite de coi care vor intradevar si le vad. Regulile de adaugare a noilor pagini difera de la un director la altul. De aceea, trebui si incepeti prin a parcurge pagina de ba24 a directorului; acolo puteli gsi instructiuni, ‘un buton sau alteindicatit despre modul in care se adauga pagini in sit ‘nd wets adiugaiTotrun asl de director URL-u unui de afaced, fect ai nh cin pent a vedea cum apare concurana, apo asiguraiva cd documentul urmneavoas- ted est soci eelracatogor sau coins cho Asta, cine di paste concute, 0 pst éurmeavoasta 250 Partea a Vi-a: Plasarea online (Ora 22: Cum va facetisimfté prezenta pe Web 251 De fiicut: Ad&ugati-va situl tn Yahoo 1. Mergeti pe serverul Yahoo la adresa voor. yahoo.com 2. Exploraticategoriile din Yahoo si alegeti categoria in care se incadreaza pagina Fy cumneavoastr. EY 3. Revenitiin prima pagind din Yahoo si alegeti How to Suggest Your Site din partea de sus a paginii. Drept urmare, va apirea o lists de instructiuni, cain figura 222. Fura 22.2. Adtuigarea propriulué sit fn directorul Yahoo ‘he Yael dey ep jet Mo eee mgd ‘byte Sts te cen Yio St, aed ‘oh ea suena tri epcoreng We dre ‘tower Yeu egrdse np. ong be ao” ‘tweet bel mtr eae ‘eh ii ete a te angle eg Innes UH) ps toe ‘ep Chak Se Ya St i Abedin Yue! ningrt etpbenet you tae ed Yhs ecard gna koter Gecko | ay at ne poe gta 4 Urmand instructiunile, chutafi categoria fn care dori si ie listat situal dumnea- voastra, “ 5. Derulati lista cu situri care corespunde categoriei vizate i aleget legitura Suggest a Site, aflata sub lista. Se va deschide o pagind care confine indicatit privind propunerea unui sit. 6. Derulatt pagina st alegert din partea de jos butonul Proceed to Step One. Va fi afisat formularul din figura 22.3, 7. Introduceti in formular tithal paginli, URL-ul acesteia gi celelalte categorii in care vrei si apara Deseo cdnd adagat un stn und! entre crectoare (pena eae Yaoo gi Exot). URL-u ‘nu aareimedat norectr. Se poate nmol s astepta gi dvd plain pina se fiiueza adiugatea sul umneavoasta | v Frou 223, Addugarea fnformatiitor despre situl dumneavoastea in directorul Yaloo ence aw date pee {Hive deeetudeg main See rpc, Te Be tc (lect ore eer Die Bev oxo wa i ce de yt a ah 1 Poua top ee RE nd doe hata cone De ffcut: Adéugati-va situl in Excite - Aseinenea tuturor instrumentelor de ciutare care folosesc spidere, Excite scotoceste pe Web catalogindu-i conginutul, deci si situl dumneavoastra, pani la turms, Dar dacS ii sugerafi situ, il va gist mult mai repede. |, Mergeti pe serverul Excite la adresa 2, Derulai pagina si alegeti legitura Add URL din partea de jos a paginii, Se va ddoschide un formular ca acela din figura 22.4 3. Completa formularul. Pons sq pga durmeeast exe alt 9 eget cae epee eh [fs ‘dna somo sent tl pep descrees cesta pean chin casa fe calog Page Properties. (Vzi Ore 5} Mentionarea pagini deodata De curind au aparut unele servicii care se oferi (majoritatea contra cost) si va listeze situl in mai multe directoare si spicere cunoscute, iar pentru aceasta nu trebuie s& par- curgeti decit un singur pas. [Asemenea servicii costa intre 10 dolar (Site See) gi 100 de dolar. Retineti cd aceste ser~ viel transmit informatile despre pagina nu numai celor mai importante mecanisme de autare, csi unui numa mare (de ordinul sutelor) de directoare cu continut specific. 252 Partea a Via: Plasarea ontine Four 20.4, Sugerrea uni sit : Bie = z| cana Se | ea | saa i ‘Seta er Yr Desa ae CCateva dintre acestea sunt: 4 Site See (vezi figura 22.5) 1 Submit It (veri figura 226) e-tt.com 1 WebWeaver (vezi figura 22.7) nttps//asw,nebsit ‘note. cen/dls/index. tal Alte metode de a face publi Nu uitati cf nu toate metodele de a face publicitate tin de Web si nu toate sunt online, ‘Mentionati adresa sitului dumneavoastr si in urmatoarele locuri: in sermnatura din mesajele de posts electronics; 1 pe cartea de vizit8; 1 pe articolele de papetirie (personale sau ale firmel}; "= unde faceti publicitate firmei si unde se vind produsele firme ate Nu uitafi:teoreti (dar gi practic) tofi cunoscufii dumneavoastrd care vi viziteazi pag- Jina Web au acces la Internet, deci este foarte probabil sa alba si o adresa de posta elec- tronics. Prin urmare, 0 metoda foarte bund de a anunfa cunoscuflor pagina este si le transmitefi un mesaj prin posta electronics Fron 226 Site See Fauna 226, Submit Ie Roa. Samu ¢@ > Submit It! 1 | a i Senne tiga i Eater A a ae = . Eoin guncing your ste 1 the ‘ent eectasaanant Pentru a transmite un mesaj prin posta electronics, compuneti mesajul si enumerati in zona To a antetului adresele celor care trebuie sé primeasci mesajul (vezi figura 22.8). {n majortatea programelor de posta electronica, adresele sunt separate prin caracterul ; (punct si virguls), Rezumat Daca o pagin’ .piei” pe Web si nui nimeni in preajma si o aud, oare scoate vreun sunet? Nu sti si nu ar trebuis& pun intrebdri la care nu pot rispunde, Vrolam s§ spun ca dup ce «reali o pagind Web so publica treaba durmeavoastré este incheiatS. Resta fine de relams. 254 Partea a Via: Plasarea oniine ‘Fiouna 22.7. Webrierer eo Welcome, Please take a tour Frama 228, Transmiteren prin nematic posta electronica a a vu meer sung pagina Dear Friends: | Please visit my rew web ste ot: wunwredspoge.con | Erion | Atelier Tar i. Trebuie si verific sisi actualizez menfiondtile facute in directoarele Web? Eibine, dupa ce afi adaugat in directoarele Web o mentiune referitoare lao paging (idupi ce a devenit vizibila, ceea ce poate dura cateva zile) ar trebui si 0 chutati st SB o testati pentru a vedea daca functioneaza ca reclama. (Ora 22: Cum va faceisimité prezenta pe Web 255 Dups aceea putet uita de ea pind eind modificati adresa paginii sau denumirea fisierului in care este stocaté aceasta. De fiecare dati cand facefio astfel de modifi- care, rebuie si modificati si menfiondrile corespunzitoare din directoare. Minitest Rezolvati testul urmator pentru a vedea cit ati reusit 4 invatai intrebari 1. Nu aveti nit un moti ca si adugati propria pagind in directoareleintrelinute de crawlere;acestea fc tot ce trebuie. Adevarat sau fals? 2, Daca nu ii anunvafi pe ceilalti despre pagina dumneavoastr, ei a.Nu vor sti . O vor descoperi prin telepatie. Nuva vor mai iubi 4d. Toate variantele anterioate. Raspunsuri 1. Fals, Adsugarea manualé a paginii in astfel de directoare ajuta la gasirea mai a paginii sl imbunstatirea acuratei cu care este ,categorisita” 2.0. Activitate ‘Ciutatiin directoarele Web pagini care au acelasi subiect cu pagina dumneavoastra. Studiatile pe cele care vi impresioneazik: vi dau vreo idee de modificare a propriei pagini? OrA 23 Testarea si intretinerea paginii online Afi ficut mai mult deedt si publicati o pagina Web: afi infiintat 0 prezenta Web — si sperm ci este una care se va extinde si va evolua in timp (ca majoritatea). Dupa ce ati plasat pagina online, este important sa sis cum s8 0 actualizati si otestat. Astfel ‘vefi putea si imbundtatf i si o dezvoltati in timp, precum st si 0 menfineti functional La sfarsitul acestei ore vefi putea rispunde la urmatoarele intrebari © Cum se testeaza riguros o pagina Web? Cum vi asigurati c& pagina dumneavoastra va arta bine, indiferent de browserul utiliza de vizitator? © Cum se mentin functionale legaturile? = Cum puteti evalua usuringa de utilizare a paginii de citre vizitatori? = Cum se actualizeaza o pagind ori de cite ori este nevoie? Testarea paginilor De acord, stti ci pagina dumneavoastri functioneaza in Navigator far nici o pro- Dlema. Asadar, codul HTML din subsol este cue, da? (cuser insearnni, in acest context, foarte bun, excelent -n.red.) Nu neaparat. Browserele trateaza difert micile erovi din codul HTML. Dack faceti o mich eroare de sintaxa, sar putea ca pagina si arate bine intr-un browser, s& prezinte tiel probleme in altu sis prezinte probleme mai mari int-un al treilea. Este de refinut ci uneor, la trecerea de pe PC pe server, fsierele se altereaza. Aceasta deoarece diferitele platforme de calcul reprezinta usor diferit spatile goale si retururile de car, desi recunosc la fel caracterele de text. De fapt, din acest motiv browserele ‘gnori spatile goale si retorurile de car din fisierele HTML, Totusi, micile modificfri survenite pe parcursul transferului ine sisteme pot crea probleme ~ probleme de care nu aveti cum si sttl pana cind pagina nu este online si complet testat Sectiunile care urmeazi va vor arita cum se testeazd complet pagina dupd ce ajunge online, pentru a va asigura cd vizitatori vor avea parte exact de ceea ce doriti dumneavoastr3, Validarea codulul HTML ‘© metods bund de detectare a micilor erori din codul HTML consta in verificares paginii cu un validator HTML, care verifica pagina conform regulilor pentra HTML + al paginii damneavoasta raz Testarea 3 ntrefinorea paginl oning 287 Oalegere bund pentra validarea codulai HTML din paginile dumneavoastré 0 constituie HITML Validation Service de la firma WebTechs Software, care este folosit in exerci urmator, Dacd lls validator dela WebTechs pentru a evalua viablatea pag dumneavoastra |n browserle mai vct, va rebul gs vedei cum aat a in asemenea browser, acordsnd 0 alone deosebi aspecoior pe care valdatoulla etfs crept probleme, Ey De facut: Testati-vé pagina intr-un validator HTML 1. Mergefi la situl WebTechs situat la adzesa valsve.veb:echs.con/ ha WebTechs _Valldation Service i Inceputul on —— ql hestionarului deta | eee WIC Yale Wee Gas WebTecks G corer = ———t URtise eae Sctiee or, IS rrroe venert onions Fe eee] Se eee en ome 3. In prima porte a chestionarutu,taatafi URL-ul couplet inclusiv partea htp://) 4. in partea a doua a chestionarului (vezi figura 23.2), alegeti aspectele legate de verificarea codului HTML care vreti si fie ineluse in raportul validatoralu, 5. In partea atria, alegeti specificullimbajului HTML folosit in pagina dumnea- voastra. (Deca afi creat pagina in Composer, alegeti W3C 3.2. Astfel indicati veri= ficatoruluis& accepte etichetele HTML de nivel 3 si extensile Netscape.) {tv ce nivel ar rebut si taal testarea? Cac ai creat pagina ln Gompose, este aproape Sigur cdaiflostexensi Netscape, deoarce multe ante posible de formatare cin Composer impli extens. Aen Mozta, vei estringe recamsfilevriatorl a repel vel evita ca acesta 8 tratzeechetele de ormatae drep ero Pee alt parte,dac v8 procups vatiltatea pag in fara cetull Netscape, testarea ot | nivel sau 3 va vafurnza un apart locurlor n eares-ar putea sd apa probleme fa u~ ’ | ies de TIAL 2 sau in browseree cae nu recunose enensil ae Purtea n Vie: Plzsareo ortne Ora 28: Tostarea | intretinerea paginl online 259 a pagina (online, daca se poate) in mai multe browsere pentru a detecta eventualele ao probleme care apar in alte browsere decét Navigator. Analizand figurile de la 234 la Alegerea optiunilor HTML ee ‘cheose Report Options 6. In partea a patra, executat clic pe butonul Check URL pentru a genera un raport (vez figura 233). Validatoral va produce un raport care prezintierorile intl nite, Anaizinducle, vi puteli decide daca si cum si editaficodul HTML pentra a rezolva erorle pe care leconsiderafi semnificative. Foon 283. Validatoral deta Weblechs raporteasd orice problema HTML Dplon stings Leal, ut URE Aner Cat afi luceat la pagina in Composer, ati previzualiza-o periodic in Navigator pentru a vvedea cum va atta online, Dar ce se va intémpla cu celal navigatori de pe Web ~ cei care folosese versiuni mai vechi de Netscape gi Internet Explorer sau unul dintre cele~ Talte zeci de browsere? Cum le va apirea lor pagina? Dup& ce afi verificat si corectat codul HTML din paging, veti dori s8 vedeti cum apare ieee, | bao eee 236 putefi vedea cat de schimbatd poate aparea o pagind in diferite browsere. Dac descoperiti vreo problema in unul dintre browsere, trebuie si hotiriti dacé modi- Ficafi pagina pentru a elimina problema (ceea ee poate determina compromiterea for- ‘atari sau a altor caracteristic originale) sau sacrificati performantele paginii pentra 0 parte din vizitatori, in scopul menfinerii lor pentru alti, roma 23.4, O pagind vizutit cu Navigator 4 (versiunea Communicator) eee ea Porn ter ere eee en ioe ered Fura 235, Pagina prezentata in figura 234, vazutd cu Cello Este o idee buna si tineti pe aproape si alte browsere pentru a afla cum vad pagina dumneavoastra cei care nu folosesc acelasi browser. De exemplu, NCSA Mosaic si 260 Partea a Via: Plasarea online Microsoft Internet Explorer pot fi descireate gratuit de pe Web. (Daci aveti Windows 98, avetiinclus si Internet Explorer) Pentru a vedea cum arata pagina in afara progra- ‘mului Navigator, o puteti deschide in oricare dintre ele (consultalifiserele explicative ale acestora pentru a afla cum se deschide un figier HTML de pe disc). In AneraC, .Resurseonine pent autor de Web, gsi adresele do unde pute descr versie stareware gl reeware ale mai metor browser. Founa 23.6. Pagina prezentata in figura 23.4, oizutd cu DOStynx Desi aceste dou browsere reprezinta o alegere potrivitt deoarece sunt cunoscute, ambele sunt grafice (in multe privinf, similare cu Netscape Navigator) si dispun de suport pentru multe dintre extensile Netscape. De aceea, este posibil si nu fie mari diferente intre aspectele paginll din Navigator, Mosaic si Internet Explorer. Sind acest Jucru, ineercati s4 puneji mina pe un browser cit mai amérat, care sh nu dispuna de suport pentru extensille Netscape — de preferat un browser text-only, com este DOSLynx (vezi figura 23.6) Vizualizarea paginii cu acest browser va va ajuta si aflati cit de bine arata pagina in realitate, dezbricata de formatarea ei originals ‘Numirul browserelor in care testafi pagina depinde de categorie de vizitatori ctrora le este adresata, Nimeni nu stie cu certitudine citi oameni de pe Web folosesc un anu- mit browser. Totusi, conform estimarilor din acest moment, circa 80% (90% dups altele) din navigatorii de pe Web folosesc una dintre versiunile de Netscape Navigator si/sau_ Internet Explorer. Prin urmare, dacd pagina dumneavoastri araté bine in Navigator, puitelif sigur cé majoritatea celor de pe Web o vor vedea cum trebuie. Chiar si printreutilizatorii de Internet Explorer si Navigator, inci mai sunt multi care ‘nu au irecut la ultima (poate nit la penultima) versiune a browserului si folosesc o versiune mai veche. Diferenfele dintre Navigator 1.2 (care a aparut de cativa ani) si Communicator constau in suportul pentru cadre, JavaScript, GIF-uri animate, tabele gi multe alte elemente de rafinament. (Ora 23: Testaroa $i Intretinerea paginl online 261 ups ce ai estat pagina pentru cei din universul Netscape /Microsoft, mai rimén rnumai 10 pana la 20% din utlizatort de Web cfrora nu sii cum le va apirea pagina dlumneavoastrs. Probab ck mul date el folosesc una dintre numerossele verefuni dde NCSA Mosaic Din neferiire, Mosaic este disponbilint-o muafime de versiani proverite de I dfeite sure, fecare versiane find difenté, Dar daci vizualizali pogi- ha cuversiunea scala de NCSA Mosaic vel si cum vor vedea pagina aproximativ jumtate din cei care nu folosese Netscape. fn Fine, mat exsta dou tipuri de Browsere in cave trebuie sl testa pagina: 1 browsere mat vechi, rafice, care nu dispan de suport penta extensile Netscape, cum este Cello (veei figura 235) 1 browsere text-only, cum este DOSLynx (veri figura 23.6). Findct asemenea browsere sunt pe ale de dsparitie, nu trebul si testi pagina in ele decat daca vrei neapsats8 se comport corct in orce mei. Oricim,trebue s4 sii cf acest cr v8 obligh 88 rstranget la minimm formatarea pagini act intradevir dori si o vad tot Iumea, furnizat pagina in dows verstun: una originals, bogafin extensi, si una et mat simp, baza pe HTML 2~iarlegaturile cftre ce oer dint pagind ina, universal viibil (Fara cadre, v8 Tog), Testarea legaturilor {tn srg este importants testa (pars testa) toate legiturle din pagind. O data ce afi verficat lepsturile dintre fierce proprii intr pagin cite imaging elemente extern), nu mai rebuie si le verfiai dectt dack modifica vreun fiser Dar dacd pagina contin legitur tre resurse alate la distant (pagiile stor autori sau un alt fisier det cele pe care le controaf pe serve) trebuie le verifialt freevent deoarec, intr timp, Fierce referte pot fi mutate sau redenunit. Evaluarea ergonomiei paginii {In sectiunea precedents am explicat numa cum se veri integritatea paginit din punet de vedere tehnic. Cum rimane inal cu piste estetce:aspectul, senzafa pe care 0 reeazs ce fel de mise en scene (e. punere in scend =n red.) are? Cum interacjioneaz& cu viztatorii? Pott si gaseascd ceca cecauta? Vid parle mesajului pe care vrei 8 le ‘vad? Pot urma caleafieasei spre anumite artcole sau sunt impiedicati de o mullime de ci false gi de revenisi? Cea mai bund cale de a rispunde la acesteintrebiri este si adunafi citiva prieten (arf {deal ca acestia 3 nu sie prea multe despre pagind sau despre sublectul el) si/sau niste colaboratorisrini gf if urmériti cum rsfoiese pagina (ria indruma!. Urmarif elementele pe care le aleg executind clic cele pest care sa. Observati cind se intémpla s4 urmeze o anumitd cle gist nu giseascd ceca ce cauté sat ceea ce se asteapta si gaseaic8. i, bincinfles, ascultai-le comentarile De asemenea, mai putei evalua gradul de uilizare a paginii consulténd jurnalele de evident de pe server. Din acest jurnae se poate ala nurndrul celor care v-au vizitat pagina, isierele cele mal vizitate si ordinea in care vizitatori tind s8 vizualizeze fisierele dumneavoastra. Pentru aafla mai multe despre modul de analizare a jurnalelor 262 Parioa a Vi-a Plasarea online de evidenys de pe server, nai legatara cu adminstratoralserverult dumneavoasts in fait, na ita solos de flecare data o serntr® cares congind adresa dlumneavoastri de posta eletronich. Procedand astfel,vztator va vor putea trimite ‘comentar criic constructive Actualizarea paginii Actualizarea paginii este publicarea redux ‘© VA publicaifgierele conform celor descrise in Ora 21, ,Publicarea paginii". Noile fisiere vor fi suprascrise peste cele vechi. 1 Testatile, esta, testat-le. (Cand afi terminat,testaile din now.) Cand selectat figierele in caseta de dialog Publish, nu trebuie si selectati decdtfigierele [pe care le-ati modificat dela ultima publicare. Insa, daca pagina este complex gi afi modificat multe fisere, mai bine republicaji intreaga pagin§ pentru a fi sigur c& nu afi uitat vreun fisier. De exemplu, de cele mai multe ori nu se uti de paginile care au fost adaugate la document, insi se uité de noile versiuni ale poginilor existente, care acum confin legatui cite noile pagini, Cand adugati pagini noi la un document existent, reevaluati structura si ergonomia acestuia, Aceasta decarece pe mésura ce sunt adiugate paging legituri noi, documentul, bine structurat la inceput, poate si-si piarda integritatea structural, ramificéndu-se haotic, ilogic De fiecare dats cind addugati o pagin’ nou’, reevaluati structura intregului document incepind cu pagina de bazi. S-ar putea si gisifi o structurs mai potrivitd pentru noul continut al acestuia.Oricur, pind Ja urma, dup mai multe modificri i adiugari, va trebui si o luai dela inceput si s& reorganizafi intregul confinat intr-un mod mai unitar, Rezumat Gata. Atelier ian 1 Conginutul acest capitol are o nuanfa tehnick, Am neapirat nevote deo veifi care a codului HTMU? R Eibine, cel mai important este si verfcailepiturile = testa pagina in mai multe browser. Daci pagina trece de testle respective, sar putea s8 fein bund regula. Dar, de vreme ce sunt pe cae 5 v8 pier de elev vreau si v8 inarmes ci toate instrumentele de care ati putea aves nevoie. Pe mdsurhce cipal experient gh paginile dumneavoastrd devin mai complexe, cese st importana verfiketcodul (Ora 23; Testarea gi introtinorea paginl online 263 HTML. Prin urmare, deocamdatd nu e cazul si va faceti grij in aceasta privinga insa bucurat-va ca stiji cum 88 procedafi atunci cdnd vefi avea nevoie. Minitest Rezolvaf testul ermator pentru a vedea cit ali reusit sé invatai Tntrebairi 1. Verficind corespondenta codulut din pagina dumneavoast’ cu'codul HTML de nivel 2 sicorectind eventualele abatesi de Te acest nivel, asigurati cea mai mare com- palibltate cu browserele. Adevérat sau fals? ‘upunem cA pagina cumneavonstr aatd foarte bine dacd este vizualizati cu 0 Scie al wed de Navigator eum ar 12) care ste browserle rmstoate $3 putea s4 mu oafizeze bine: 2. Navigator 4 (Communicator) b.Lymx Internet Bxslorer 3, 4. Toate cele anterioare? Raspunsurt 1. Adevatat 2. (b). Dact pagina arat8 bine intr-un browser mai vechi, va ardta bine si in browserele ma ni (ec) Das, de vreme ce Navigator 1.2 este un browser grafic iar Lynx este text-only, nu pulei sti cum va arata in Lynx pana mu otestafi in el Activitate Consultati Anexa C pentru a afla adrese de unde puteti descarca browsere si desc&rcati cat de multe puteti. Apoi testafi in ele toate paginile create pnd acum. S-ar putea $8 fi surprins de ceea ce vedel OrA 24 = Dezvoltarea aptitudinilor de autor leste le hayite nae (elt capitol -n. ed) Sic cede? Aci nu v8 spun nimic care sf peat i adéugat media a cunogtnfele dumneavoastcl de autor (Sti Este un true itn. ca aunt chin v-au obligate& mergel la goal in ultima 2 de Hee gn af facut nim oat zu.) In aceash ord vei avea parte de un fl de discurs de absolvire. Dac ai parcurs majori- tate subiectelor prezentate, vai creat o baza desl de slid ca autor Dar inotdeau- 1a mai este cova de inviat, cite un ruc cave transform o pagina Web bund in una grozava Acum avelicunogtinfle necesae infelegerl uno nofuni mai avansate, pe Care leaf putes gis in alte cri sirilare sau pe Web In concur, in aceast ord vel gsi sugesti cu prvce la desvoliareaaptitudinilr prosspit dabindite La sfaryitl acest ore vel putea rspunde la urmatoaree intebir Ce urmeazd dupa ce ree de Composer? Ce fel de exer ma pt ajuta 8 capt experienfS ca autor indiferent de instru- mentee folost? ¥ Ce as putea cit pentru a trece fa nivelul urmator? Trecerea la alte programe ‘Sculptoritincep cu pietre obisnuite si evolueaza pang la marmurd. Asemenea unui sculptor, dact veti continua si creati pagini Web, intr-o buna zi nevoile dumneavoastrs vor depasi posibilittile programului Composer. Paginile care urmeaza descriu eateva dintre cele mai bune medi de creare a paginilor ‘Web impreund cu instrumentele aferente, Oricare dintre ele ar putea constitui pasul ‘urmator pentru un autor cu experienfa in Composer, Microsoft FrontPage Express Cu cativa ani in urms, pent a spor greutatea brovserului si, Netscape a adfugat lings el un program de eitae We (care, un an mai tari, a devenit Compose) Pentru anu rime mai prejos, Microsoft a replicat adfugan lingd Internet Explorer ‘un program de eitare Web numit FrontPage Express (Val figura 261) Dacd sve verstinea completa a programului Internet Explorer 4 sau dack aveli Windows 98 are Include Internet Explorer) aves FrontPage Express Dacd nu pull descrea grata de In Microsoft (vest Anexa C) Find o vesiune redus8a patenicului program FrontPage (dessin sectiunea urms- ‘oare) FrontPage Express seaming destl de mult cu Composer in el pel face cam Ora ezvoltarea apttudiniior de autor 265 accleasi cru pe care le puteiface in Composer, cele mat multe butoane st optiunt din menia find cam acelens. Dac alegeti ca FrontPage Express si ie urmtorul pro- {ram folost ca uizator al programulul Composer vel invita foarte wor 8-1 folosii, FrontPage Express face citevalucrri utile pe care Composer ni le face; de exemplu, confine o bard cu instrumente pentra formulare i un -¥rior” (wizard) pentru ‘rearea formulareor pas cu pa, ceea ce Vi aul sk scipatl de srierea coduli HTML. Instrumentele penis formulare din FrontPage Express nu creeaza ecriptul pentru pre- lcrarea datelor din formula ins8 pot crea formolare care prelucreazd singare datele dact server pe care este publicaté pagina ae instalate extensile FrontPage. (treat furnizoral serverului dack aceste extent sunt instalate pe server) De aseme- ‘nea, FrontPage Express vi permite 58 adiuigal o melodie de fundal (ca sunet inline) Cae est redata automat de ecare data cind pagina este accesaté de cstre un viztaton In plas, mat are cieva chichie. FrontPage Express nu red animafile inne (exist un bvion pent prev alizarea lor) simu dispune de un buton de previzualizare sau 0 optiune de menin care si permité recera intr-un browser pentrs a previzualiza pagina Cat toateacestea, merté sé fe urmitoral program dupa Comporer sau tn program care si completeze pe Composer Si este gratuit desigur Fioura 24.1. aa | FrontPage Express, i Sones inion replica lui Gates la me ere EE Composer luatraa actsnncn s Elles Seg rtcot s Eee ea | Esra vhosts ‘Bettman eet a Microsoft FrontPage Cas Composer, Microsoft FrontPage este tn mediu de tip WYSIWYG, destinatauto- rilor de Web care IncreazA in Windows 95:98 sau NT. Utilizdnd FrontPage Elitr (ome pporenta penru edtare), pueli crea cu ug fisiere HTML, deosrece butoanele st Sptiunle de menia va permits formataf textultastt ss inserai agin slegaturk ‘Mai malt, FrontPage confine oftreags familie de vrijitori cu ajutorul cirora pute crea rapid tabele, cadre, formulare si multe altee tn ceea ce prvest crearea paginilor Web, FrontPage face to ce face Composer gio smulime de licrurin plas Practic este wn instrament pentru crearea paginilor Web de 286 Para a Vi-a: Plasarea online ra 24: Dezvottarea aptitudnilor de autor 287 nivel profesional si este destul de usor de invitat de citre orice utilizator de Composer. ‘Totusi, FrontPage nu este destinat numai crearii paginilor Web. De exempla, folosind FrontPage Explorer, ilustrat in figura 24.2, puteti administra cu usurintS an sit Web ‘mpreund cu toate paginile gi celelaltefisiere din el. FrontPage contine si un software pentru servere Web, numit Personal Web Server, care transforma orice PC intrun server Web pentru unul sau mai multe situ, Personal Web Server, FrontPage Explorer si FrontPage Editor, impreund cu un set com= plet de instrumente pentru administrare $i securitate alcdtuiesc un produs complet destinatcredrii si intrtinerii sturilor Web, competed ectoral WYSIWYG. Prin umare, nd avai de rezohat probleme legate de g Spe deosebire de Compose FoatPae are carport un tor de achat HTML care HTML, rebui tee intra dtr eter cum afi Nolepad sau HTML Assistant, Pesmaeaer mesons ee [Bietwil ase a aig ais ex FrontPage Explorer an slltaraldestinat administraitsiturlor Web Liquid Motion Pro Programul Liguid Motion Po, de a Symantec, ace pent Java cea ce face Composer pentru HTMU: Cu autor fl xt care ns 8 programeze in imbajl Java, pot een $i publica anima Jaws, Lael cla creareaGIF-ilo animate se incepe ca cearea unorimagini separate core, atuncl cand sunt redate secvenal ceca sia de animate Tn contnuar,aceste imogin sunt prone n Liquid Motion Prose stabies optinile reeritoare la mod de redare a animate, cum sr fviten de edare su confi n are ncepe sa se pret aia, Dup tbe pando progam geet col av ala Pe rm pubicae Microsoft Offica 1 asistenti s&l pentru Internet Fiecare dintre programele de baza din pachetul Microsoft Office (Word, Excel, Power si Access) poate fi utilizat,intr-un anumit grad, pentru a produce consinut de pagina Web. Ele stu 5a is puna datele in format HTML pentru afi publicate pe Web sau pentru a fi ajustate intrun editor inaintea publicdrii De fapt, nurnai Word si PowerPoint stiu 8 creeze pagini Web complete. Versiunile lor din Office 97 (Word 97, Excel 97 si celelalte) dispun fiecare de aceasta facilitate indiferent daca au fost achiztionate cu pachetul Office 97 sau individual (insa pentru a o putea folosi, cind instalati programul trebuie sa instalai si si activati partea de creare a paginilor Web.) Versiunile din Office 95 pot fi completate cu partea de creare a paginilor Web prin instalarea unei familil de programe numite Internet Assistants. Fecare dintre aceste programe fi conferi capacitatea de a crea pagini Web ‘unuia dintre programele din pachetul Office 95. Exist céte un program Internet Assistant pentru fiecare dint cele patru programe din pachet, find disponibil atat pentru Windows, cat si pentru Macintosh. Farner stant ve cord proyanr dpc Oe 85 pacts | apn i sit es pe COREE Sa Dintre toate prog-amele pachetului Office, numai Word se comporté ca un adevérat ‘mediu pentru crearea paginilor Web. De fapt, daca deschideti un document HTML in Word, meniurile si barele cu instrumente din Word vor trece in modul de creare a paginilor Web si vor confine numai instrumentele necesare acestui scop. Word 97 mai dispune de un vriitor numit Web Page Wizard (vezi figura 24.3), care va permite si alegefi intre crearea unei pagini simple (care confine un model de fundal si marcaje srafice) si o pagird creatd pe baza gabloanelor de care dispune. Four 243. Web Page Wizard a Insert Heading Here Wa co are eT eT Desi Word face aceste lucrur, din acest punet de vedere nu este mai bun decit ‘Composer sau un alt instrument destinat credsii paginilor Web. Pentru un utilizator de Composer nu este altceva decit un instrument de conversie. 2 Pariea a Via: Plasa ‘online Word va permite s deschiet orice document Word (sou in document cu alt format, convert in Word) si salvai ca figir HTML. Cand facet acest lucr, Word converteste formatarea pagini in echivalental HTML cel mai apropat, iar imagine in format Gif indiferent de tpulfserulu orginal. Dupa acces, putef sl ajstatisirul in Composers sil publica. Acesta este cel mai sinpla mod Ge aprelue materialul enistent in documente Word (ezumate rapoarte et) isi il plasaf rapid online In ceea cell priveste, PowerPoint convertste orice prezentare cu diapocitive in dou versiuni pentru Web: 0 versune care confine numa clemente grafic (cu butoane pen- tru trecerea de la un diapociiv ta ltl) so versiune care confine numat tents destinaté celor care au browsere text-only Esto ugor scent un st Web cu ajtorul programa PowerPoint, inst est oat dif, ‘58 edta.Dacd 25 dorsi plasez online dapoiive din PowerPoint, 3g fll instrumental «in Otc 97 pentru a convert prezertaea din PowerPolt a format Word, aol fos! ropramul Word perru-a convert in format HTML. Atat Excel, cit si Access pot salva in format HTML fgiere sau date selectate, deci puteti incorpora usor in proiecte Web datele din astel de figiere. Microsoft Publisher 98 Pe ling& anunturi publicitare, brosur i articole desir ultima versiune a acest pro- sam de tehnoredactare computerizatd (ver! figura 244) tie sf creeze gi pagini Web. Fura 244, Publisher 98 BES OVE You here page gives your readow ther fret orgresstons ‘Tipe stet perpen onto, Pewee lien ceo aa Este un editor Web foarte potrivit pentru o anumita categorie de utiizatori: cei care ccunose putine despre crearea paginilor Web, dar au o mullime de proiecte drigute, create {in Publisher, si vor si le transforme in pagini Web. Celor care gti si creeze 0 pagina de Ja zero (ca dumneavoastrs), Publisher leva pAvea nifel fustrant. ‘Totus, rezultatele pot fi destul de frumoase,finand cont c& Publisher vine in spriinul utilizatorului cu o colectie de sabloane pentru situri Web si alte instrumente utile, curn Ora 24: Dezvottar 269 aptitudinilor de autor ar fibara cu instrumente pentru formulare (care tiu s8 lucreze cu extensiile FrontPage la fel ca FrontPage si FrontPage Express). Un impediment ar putea fi iaptul cin paginile create in Publisher pozilionarea obiectelor se bazeaza pe formatarea de tabel (vezi Ora 8, ,Organizarea textului folosind tabele gi rigle orizontale"), prin urmare s-ar putea ca pagina s# nu arate prea bine in browserele care nu dispun de suport pentru tabele, Cum se dobandeste experienta Ce putet face in continuare? Cum vet trece la nivelul urmator? $i, mai important, cum wenine deprinderile cApatate? lata céteva obiceiuri pe care trebuie si le adoptati pentru a avansa ‘Studiafi ind sunte pe Web, dnalizatipaginile pe care le visitas, nu v8 limita la sft Skul cv ate, nu numa din punct de vedere ten, cs din punet de vedere tstetic Dac opagini vi impresioneazs,intrebat-va de ce. Datorits maginlor, aspects {ui serieri,culorbr sa datortéunei combinai a acestor factor? Introduce in lista Bookmarks sturle care vi impresioneaed si vzitacle ct mai des Incercaf sf reine Iucrutile care va captear interesu ail esping) ca navigator Sunt sans ca mul ali sreagoneze laf Disecafi Cand o pagina va impresionenzi in mod deosebit, salvat-o in programal de editare (executind clic pe butonul Edit din browser), apoi studiati-o acolo. incercajis& réspun- defi la urmatoarele intrebri 1 In ce tipuri de isiere sunt stocate imaginile si ce proprietii le sunt aplicate? © Care este cursul elementelor de text din pagina si care sunt proprietatile acestora? Ce tehnici specale transpar din analiza codului HTML corespunzitor paginii (Glegeti View, Page Source)? © Cat de multe irformaii apar intr-o pagind dinteun sit Web multipagina? # Din ete pagini este format documentul si cum sunt legate intre ele? Fiji la curent ‘Urmarif ultimele nowt, mai ales pe cele care tn de evolufa standardelor HTML si Java, Aces luru il putef face vizitind in mod regulat pagina Netscape 5\ctind anunfurile care apar acolo, De asemenea, este bine sf vizitai din cdnd in cind o parte din siturile legate de crearea paginilor Web, siturk descrise in Anexa C. 270 Partea & Via: Plasaroa oniina Rezumat Ai inceput bine si probabil of niciodat nu vei avea nevoie si tifa mult decit sit acum despre crearen pagieilor Web, Inst mereu mai ete cova de inal, meteu este foc de mal mutt Pind una-alta, va mulfumese pentru cele 24 de ore petrecute impreuns. Si vi rog si revenifi la aceasta carte ori de cite ori avefi nevoie, La nol este deschis non-stop, Atelier Minitest Rezolvati testul urmétor pentru a vedea cit afi reusit si invstay Intrebari 1, Cine a fost primul, oul sau glina? 2. Care dintre programele prezentate in aceasta ora (mai exist si altele, desigur) pare si fie cel mai bun de utlizat dup Composer? mee a, Cod HTML brut gi nimic altceva b. Powerpoint 97, «FrontPage Express, 4. FrontPage, Raspunsuri 1. Oul. V-am pus aceasta intrebare casi vi relaxati 2.0, Activitate Mergetilalibrria favorita gi cAutai citi din acest domeniu, S-ar putea si gisiti citi de anul recut care sunt ceva mai ieftine acim Fste posibil ca in ele 4 gisifi chiar gi un CD cu software. Ele nu sunt expirate si nici deteriorate. Chiar dacs reprezintatrufan- alele de iri, prin aceste céfi va puteliimbogiti biblioteca de specalitate cu bani putin ANEXA A Instalarea programului Netscape Communicator In aceast8 anexd este descris modul de instalare a programului Netscape Communicator ce pe CD-ROM-ul atasat cirti. Este prezentat, de asemenea, modul in care pot fi achizijionate de la Netscape noile versiun ale acestui program. = Iain de a instal versiunea completa (cu cents) existent pe CD-ROM, copia artiva = ‘Communicator de pe CO-RON pe hare-sc! dumneevoastr conform insruunlor de pe CO, Instalarea sub Windows 95/98/NT Indiferent cd afi descSrcat programul de pe Internet (vezi secfiunea ,Descdrcarea noilor vyersituni") satt ati copiat de pe CD-ROM, veti incepe cu arhiva Communicator, care teste un fisier ,eve foarte mare, Aces fisir este o arhivd autoextractiva, (Nu necesita software pentru dezarhivare ) Pentru a instala arogramul Communicator, procedai astfek: 1. Executafi dub. clic pe pictograma fisierului arhiva, Dupa cateva clipe, va fi afigats emblema Communicator, apoi va apdrea un mesaj care va informeaz ci sunteti pe cale s8 instalaa programul Communicator si va intreabé daci doritis& continua Fama At. Ea eee Install Wizard a Se tort 2, Executati clic pe butonul Yes. Pe perioada cét Install Wizard se pregiteste, va fi afigat tun mesaj de siare. Dupa eéteva dlipe, se deschide un vrijtor ea acela din figura A. 3, Executati clic pe butonul Next. Apare acordul cu privire la licenta Netscape. Cititi, apoi executafi lic pe butonul Yes. 272 at rice vajtor, penta tec a pagina vematoareflasjbuton Hest, Dac dori 58 ‘event! ao pagindanteoard pct a modi ceva, pe executa clic pe Butonl Back. 4. Executai clic pe butomul Next Va apirea pagina prezentati in figura A2, unde tre- Die i stabi tipal instal * opfiunea Typical inchude namai componentele mai des flosite. Inceptori ar rebui Si foloseasc aces tip de instalare sist adaugecelelatte componente mai trzi, pe misura ce vor avea nevoie de ee tiunea Custom vi conduce prin citeva pagini suplimentare ale vrjtorulu, ‘unde alegeticomponentele care vreli st fie instalat, Dac oii instalai ‘numai anumite componente sau toate componentele, alegeti butonul de tip radio Custom. acd introduce! a cSmput Destination Dirctory un decor care nu exit, war va ‘rea in local cumeavoast ‘Alegeti butonul corespunzatortipului de instalare dorit si verificati daca directorul specifieat in cimpul Destination Directory corespunde cu directorul in care dori s8 fe instalat Communicator. Daca nu introduce un alt director sau folositi butonul Browse pentru a indica nul existent. Cand afi incheiat, executati clic pe butonul Next. EPA, | pacd la pasul 42 ses tpl deinstatare Typical, wecel ec la pasut 7, Ded af ale put | custom, continua eu pasul 5. Fiouns A2, Alegerea tipulu de instalare st confir- smarea directorulsi de fnstalare 5. Prima caseti de dialog corespunzitoare instalrii Custom este ilustrati in figura A.3 siare bifate toate componentele. Daca dori si instalati toate componentele progra- ‘mului, lisai toate casetele de validare bifate. Daci nu dorifi si instalati o anumita components, stergeti bifarea din caseta de validare care ficorespuncle. Dupa ce afi ales componentele care trebuie instalate, executati clic pe butonul Next. 6, Cea de a doua caseta de dialog corespunzitoare instalarii Custom este iustrata in figura AA siare bifate toate optiunile pentru extensii. Pentru fiecare dintre extensiile bifate. versiunea dumneavoastra de Windows va folosi Communicator pentra a dleschide fisirele cu extensia respectivs, De exemplu, daca lsati bifata caseta de va- Communicator 1273 lidare JPEG Image, Communicator devine aplicatia prestabilit8 pentru vizualizarea imaginilor JPEG. De fiecare dat cind deschideti un fisier JPEG dintr-un director Windows sau din Explorer, va fi deschis Communicator ca s8 v-o arate, Dupa ce af stabili:optiunile dorte, executati clic pe butonul Next. Frum AS. Alegerea ‘componentelor fneazul fnstaldrit Custom Fura Ad, Alegerea ‘extensilor care vor fi activate 7.Se deschide 0 sets de dialog in care pute stabil unde 6 apari Communicator in ‘menial Star n mod prestabilit, vrjtoral adaugs in meniul Programs componenta [Netscape Communicator Petru a accesao componenta vei procedaastfel:alegei Programs, Netscape Communicator din menil Stare iar din submenial care se dleschide, aleget componenta dort. Dacé dni ca submeniul Netscape Communicator si spar in alto, aleget Tocul respect din lista Existing Folders, 8. Bxecuaf cic pe butonal Next, Ete afgaté o casei de dialog care canine o ist cu optiunile alee de dumneavoasrs pe parcirs. Dac acesten corespand ct cea ce doris instalai executai clic pe bitoni Tnatall pentra a Incheininstalarea. tn 22 contrat exeeuta' cic pe butonul Back pentru a even la casetele de dialog anterioare si modifica oprinile 9. Dups ceconfrmatic& suntef de acord cu lista prezentats vrjitorul decomprims 274 fisierele gle stocheaza in directorul stabilit. in timp ce figierele sunt decomprimate, ‘va apirea un indicator de evolutie ects or doris cif filerl README dup nstalare, deschide Serul README. TAT 10. Dupa ce a decomprimat toate fisierele, vajitorul vi intreaba dact doriti si vedeti fisierul README. Acesta confine informafii importante cu privire la versiunea de Communicator pe care afi instalat-o. Executati clic pe butonul Yes pentru a citi fisierul in Notepad sau pe butonul No, daca dori sil tii altidata. 11, Dup’ ce ai cit fisierul README si ati inchis programul Notepad (sau afi executat lc pe butonul No la pasul 10), este afigat un mesa) care va informeaza c& instalarea $2 incheiat. Executati clic pe butonul OK, 12, Apare un mesaj care vi informeaza ci inainte de a folosi Communicator ar trebui i restartafisistemul de operare. Executati clic pe butonul OK. Dupa ce Windows restarteaz’, din punct de vedere tehnic instalarea este incheiata, ‘Totusi, mai aveti de facut citeva lucruri, Inti trebuie 88 configurati parametrii de comunicare ai programului Communicator astfel inct si fie posibil ca acesta s4 comunice cu furnizorul dumneavoastré de Internet (sau cu serverul proxy din rejeaua local), cu serverul de posta electronica si cu serverul de stir. Dacd afi avut instalat Netscape Navigator 3.0 sau o versiune mai noua a acestuia, Communicator va folosi configuratia de comunicare existenta. Daci nu afi actualizat o versiune anterioari, cind veli deschide Communicator pentru prima data, se va deschide automat un vrajtor numit Setup New Profile, care va cere informailecu privire la comunicafi. Ulterior, acesti parameti pot fi editayi manual, prin intermediul casetei de dialog Preferences (alegeti Edit, Preferences). Furiznd tea carte de vitorl Setup New Profe, raj un profil Communicator, un ‘up de params de comunicar corespunator unui singrutiizator. Daca sunt singura ‘persand care va flosi Communicator pe cleultorurespact, nu mal webu 8 vi gana la prof, de reme ce profil dumneavoastra a fost contigura.Totusl este bie ssi cd pot create mal mute profiurcte unu perry feeareutizator, Aste, Communicator ate oiosit pe acla cll dea ml tetort, | Penta a configure mai mute proflur, alee Programs, Netscape Communicator, Setup | Hew User Poti. Cin sunt detint mai mute pou, de ecare at cod se deschide Commune, pare o case de dog care cere wztoru si aga pou din | lista care aparen casa a | Dupi ce afi configurat parametrii de comunicare ai programului Communicator sl afi invatat sé rasfoiti pe Web cu Navigator, ar trebul si inregistrati la Netscape copia dumneavoastra de Communicator. Ca utilizator inregisrat,veli primi de la Netscape, prin posta electronic’, informatii despre ultimele produse, noi programe-anext (plug-ins), precum si alte informatii. Pentru a v3 inregistra, deschideti componenta [Navigator i conectati-vd la Internet; apoialegeti Help, Register Now. Vefi fi conectat lio pagina din situl Netscape, in care trebuie s& completa un formular pe baza caruia vedi fi inregistat Anoxa A: Inst 30a programului Netscape Communicator 275 Instalarea pe Macintosh Versunile pentru Macintosh (PPC 68) ale programului Netscape Communicator sant distribuiteca arhive autoextractive Stuf Inainte dea incepe, asiguraivé cai ales versunea rotrvita de Communicator Dach ave} calclator cu procesor PowerPC (Apple Fover Macintosh, PowerPC Perform 5x00 sau 00 orto copte dupd Macintosh), flesii versnea PPC, ir dackaveti an Macintosh ma vechy, folosii ver- stunea 68k. g {in scopul de a instala Communicator pentru Macintosh, procedat astfel: 1. Executati dub cic pe arhiv8 pentru ao deschide, Drepturmare, va fi creat un director de instalare ‘ 2 Deschidetidiectorul de instalare, 3. fn interior lui exist eteva directoare sf citevafsiere.Singurul fis Sit acordaf atente este aplicafia Communicator Instalier. Exect pentru a Incepeinstalarea, 4 In continuare va este prezentatéo caseth de dialog standard pentru instar. fn mod prestabilit, Netscape Installer este configurat si fac instalarea corespunzatoare opii- unit Easy install Aceastainseamnd cd vor fi instalate toate cele necesare pentru a obtine maximam de la Communicator Daci dort siinstalati numai anumite componente, putei alege din menial derulant optiunea Custom Insal. In caseta de dilog pent instalare putei stabil i direc~ torul in care dorifi si fe instalat Communicator in mod prestabllit,acesta Va f hard-discul principal. Dupa ce af stbilitoptiunile de instalare, executati die pe butonal Insta 5. Dupi ce execlati cic pe butonulIntall, o noud casei de dialog vi reaminteste cf Netscape Conmunicator recomandd restates calculatorului dupa instlare Executafi clic pe butonul Continue pentr a tece mai departe sau pe butonul Cancel Pentru a opriinstalarea. Dac executali clic pe Butonul Continue, Nard-diseal se va ‘ctva iar e ecran va fi afigat un indicator de evolutie care Va fine la carent cu stadia instal, La final va i afigatéo ald cased de dialog care va ofera posibli- tatea si aleget.ntrerestartarea calculatorula i pardsirea programului de nstalare. Se recomanda si restart clculatorul acum; data pérdsi programul de instalae $1 Incercafi si rulai programul Communicator fir a testarta, sar putea ca anumite faci s4 nu funcjioneze corect. 6. Dupi ce restatati caleulatorul, deschidet!directorul Netscape Communicator proaspit instalat (il gsi acolo unde Fai indicat programului de instalare fil Ppund) si execuati dublu clic pe pitograma Netscape Communicator pentru a lansa rogramul Communicator Dac afi avutinsalot Netscape Navigator 3.0 sau o versiune mai noua a acestuia, Communicator va folosi parametriexistenfi pentru a forma profil de ulizator prestabilit In caz contrat caseth de dialog viva cere st ereafi un profil de wilizator La sdrgtl install, Communicator vi recomand si restart calelaorl deci ante do Aree mal depart, tebuie si sali documentle a care unc acum gs nce apl- ‘ai respective chruia trebule jublu clic pe ea 276 2 Infor- Pentru aceasta trebuie ai introducefi in cAmpurile din caset& numele profi mafile cu privire la contal Internet. Descarcarea noilor versiuni Din cind in ctnd, vor apirea noi versini ale programului Communicator, Pinte cesta nu se num mama versitile mart care apr in fiecare an cli mice pro- grame care elimind defecte sau aduc tbundtifi minore. {a acest noutitiputeiajunge in mai multe meduri. Pentru inceput este ine st {csc progratmul Navigators si aleget Help, Software Updates. Navigator v8 onectesi Ta 0 pagind de la Netscape care oferlegaturi cee actualizat software, programe-anexd ee De asemenea este o idee bund si visita regulat pagina de baz a firmed Netscape (teept/nowe-retscope.ce) In pagina sa de bs23, Netscape publickanungur cu prvire {2 versuni no, versuni beta, programe care fac core (patches), programe-anex8 sla snulte alte subject. Este important ca inaint de a descirea 0 noutate 88 tit ‘unfurl legate de ea ANEXA B Ghid HTML 1 Etichete HTML = Imagini = Formulare = Tabele (HTML 3.0) 1 Etichete pentru cadre ® Etichete pentru programare 1 Lista culorilor si valoarea lor hexa ‘Aceasti anexa este un ghid al etichetelor HTML (al culorilor) pe care le pute folosi in documentele damneavoastré conform standardului HTML 2.0, Pe lang acestea sunt prezentate si etichetele care sunt definite In standardele HTML 3.0 si Netscape Navigator 20/30 Etichetele care sunt valabile att pentru HTML 3.0, cit si pentru Navigator 2.0/3.0 sunt marcate cu (HTML 3.0), iar cele care sunt valabile numai in Navigator 2.0/3.0, cu (NHTML), Mai sunt prezentate cateva etichete care nu sunt inci ineluse in Navigalor 2.0/3.0; acestea sunt marcate cu (numai HTML 3.0). Etichete HTML in aceasta secfue sunt enumerates explicate toate etchetele HTML pe care le pute foles in documentele create cu Gold sat cu un alt editor HTML extern. Pentru a afla cum pot fl inserateacesteeichete inten document, tt} Ora 17, Editarea codulu HIM ‘Textul inclus intro etichet& de comentariu este total ignorat de cBtre browserul Web. ‘extul poate confine etichete, elemente gi entitit <IDOCTYPE HTM, PUBLIC “-//Hetscape Comm, Corp.//DTD BIML//EN"> Este folosta de sistemele de validare a documentelor HTML (cum ar fi Halsoft,aflat la adresa http://w halsoft .can/htnl-val-svc/) pentru a indica nivelul de suport HTML corespunzitor unui document. Dack aceasta eticheta este folosita intr-un docu ‘ment, trebuie si ie plasatd pe prima lini, inaintea etichetei <HmML>. 278 <IDOCTYPE BIL PUBLIC °-//Netscape Comm. Corp, Strict//DTD HMa,//E"> Este folosita pentru a indica un set mai strict de teste cirora lea fost supus un docu ment de eitre sistemul de validare. Pentru amdnunte, vizitati situl Halsoft Ia adresa precizata anterior. Acest sit confine sistem de validare a documentelor si un grup de Fisiere ce contin defniil ipurilor de dacumente (DTD) si standardele HTML, Etichete de structuré <BMML>. ..</BTML> Incadreaza intregul document. ot include: <HEAD> <B0DY> <FRAMESET> <HEAD>... .</HEAD> fncadreaza antetul documentului HTML, Pot include: <Ti7i2> <ISINDEK> <GASE> <NEXTID> <LINK> <BR> <SCRIPT> Permise in: <Hm¥> <BODY>. . </BODY> fncadreaza corpul (lextul si etichetele) documentului HTML. Atribute: ‘RCKGROUN Lt (HTML 3.0) Dentumirea sau URL-ul unet imagini care va fi repetata pe fundalul paginii BECOLORS™. (NHTML) Culoarea fundalulut pagini * (NHTML) Culoarea textului din pagina, (NHTML) Culoarea legaturilor nevizitate. 2 (NHTML) Culoarea legiturilor activate, a (NHTML) Culoarea legaturitor viztate. a <H1> <H2> <EB> <I> <AS> <B> <B> <OL> DIR END <DD> RE '3§9 CIRBLE> <SCRIPT> <APPLED> <EMBED? Permise in: <urH> Etichete care pot fi incluse tn blocul <HEAD> <@UTLED. . . Indicé titlul documentului Permise in: Defineste valorile de baza ale documentului curent. Redefineste URL-ul de baz’ al documentului curent Defineste fereastra in care isi vor deschide fisierele referite toate legaturile din documental curent ‘Anexa B: Ghid HTML Permisi HEAD> ‘Arati ck documentul este un script-poarti care permite chutarea. Atribute: PROMPTS". (HTML 3.0) Prompterul cimpulut de ciutare. ermisd in:
  • ‘Aras legSturadinie documentulcurent sun alt document. In general, este folosita rhumai de programele care genereszA cod HTML. Atribute: ae URL ul documentului HTML refer Relat direct Relaia inversé; de obicei, adresa de post electronic& a autorului documentula aes Numérul de resursi universal TaTbEe. Titul legaturi veTHODS="..." Metodele suportate de cBtre obiect. Permisa in: oeT> Fate folositi la simularea mesajelor etre antetul de rispuns HTTP corespunzator unui document HTML. Atribul sarTp-pgUIve"..." [Numele antetului de rispuns HTT, ‘cowrent=*...* Valoarea atrbuité antetului de rspuns. ae." Numele informatiei meta. ‘ Indica documentul care urmeaza dupa documentul curent (asa cum defineste un utili- taro serie de docamente), Atribute: ermisi in: Subtitluri ‘Toate etichetele pentru subtiluri au urmatoarele caracterstict: (HTML 20) Aliniaza subtitil la miloe. (HTML 3.6) Aliniaza subtitlul Ia stanga. ALIGN“EFY 280 ‘Anoxa B: Ghid HTML et ALICE" RICHTY uiguergusttey® (GHTML 30) Alinin subtitle deapts, (ea HTML 30) Alii subi nambel arg unde se poate Pot include: <> <14G> <> LIN <> OAD cD Permise fn: s8L0CKQUOTE> . . Subtitlu de nivel 3 , Subtithu de nivel 4 . .. Subtitlu de nivel .
    . .. Subtitla de nivel 6

    .

    Un paragraf obignuit. Eticheta de inchidere () este optional. Atsibu |ALYGi="cENTER ALIGHe"LEET” (HTML 30) Aliniaz3 paragraful la mijloc. (HTML 30) Aliniaza paragraful la stings. (HTML 30) AliniazA paragraful la dreapta. (numai HTML 3.0) Aliniazd paragraful la ambele margini, unde se poate. Pot include: <> ... Declaré un bloc de text care, spre deosebire de cel declarat cu eticheta

    , nu are adiu- gatd la sfarsitolinie goal, Aiba tone*cenreRe (FITML 30) Aliniaza la mijloctextul definit de etichets, urenernzet® (HTML 3.) Aliniaza la stanga textul definit de eticheta utenerRgHT” (HTML 30) Aliniaza la dreapta textul defini de eichets, nurouersustreY (numai HTML 3.0) Unde este posibl,aliniaza la ambele rmargini textul definit de eticheta Pot include:

    cTABLED Legaituri >... Folosité cu atributul sae? creeazd o hiperlegitura citre un alt document sau citre 0 ancor§, iar cx atriputul NAME creeaza o ancora care poate fi refert’. Atribute: REP" ‘URL-ul referit de legaturt ‘aRcot= Fereastra in care este deschis documentul referit. wae, Numele ancoret referite. Pot include:
    «up Uste
      . - Lista ordonata (rumerotati). Atribute: meee" (NHTML) Stilul de numerotare a listel. Valorle posibile sunt: Aya, T, L9H STARTS." (NHTML) Valoarea cu care incepe numerotarea liste. Pot include: Permise in:
      ... Lista neordonata (marcata). Atribute: : res (NHTML) Semnul folosit la marcarea elementelor liste. * Valorile postbile sunt: sc, CIRCLE si SQUARE. Pot include: Permise in:
      E>. . Lista cu elemente de meni, (Not: A fost inlituraté din standardul HTML 3.0.) Pot include: Permise in:
      . . . Lista de directoare; elementele ain general mai puin de 20 de caractere. (Nota: Nu ‘mai apare in standardul HTML 3.0) Pot include: Permise in:
      Un clement care apar Atribute: tuna dintre listele definite cu
        , NU» sau ) Poate include:
        <>
        DIR ‘EMU>
           
          , ..
          Lista cu definiti sau cu elemente de glosar. Atributul compact indic& utlizarea unui format de prezentare mai restrins. Atribute: ComPxCT Pot include:
          Permise in:

          <> ia corespunz3toare unui termen dints-o list cu defini Poate include:
          {CODES

            KQUOTE>
              Permisi Anoxa B: Ghid HTML 283 Formatarea caracterelor Toate etichetele de iormatare a caracterelor au urmatoarele caracteristici: Pot include:
              Permise in:

              > {HS>
            1. PRED ‘ext mare; text care folosestefontuti mai mari deci textul standard, . .., . Text mic text care foloseste fonturi mai mici decat textul standard, . .. Text care apare ca indice. . .. ‘Text care apare ca exponent. ‘Text scris cu fonturi monospafiate, stil magind de scris. Cita. . . - Cod program; pentru codul sursi al unui program pentru calculator, ‘Accentuare; pentiu cazurile cind sunt necesare caractere italice accentuate, . . - 284 ‘Anoxa 8: Ghid HTML 205 ‘Text care explicd uilizatorului ce trebule si tasteze. , .. Exemplu; pentru exemple. , . . Evidentiere; pentru cazurile cind sunt necesare caractere ingrosate. Variabilé; pentru denumiri ale variabilelor de program. Alte elemente pentru machetarea textului Bichetee prezentate in continuarecreazaelemente de paging standard care constituie ‘categorie aparte deoarece nu sunt nil element de text (desi pot formata textel), nick immagint sou legaturi Spunefle clemente diese <> Right orizontala (NHTML) Grosimea right, exprimata in pixelt. (NHTML) Litimea rigli, exprimats in pixel. (NHTML) Modul de aliniere a rigli in paging. Valorle posi- bile sunt: Pt, RIGHT si cEvTER osmnor=*. (EITM) Face ca lina 5 fe desenat cu oculonre pind 8 umbrire, Permisi in: OLOCRGUOTE> BLIND cL> CULL

              <2> <> cD €HS> HO
            2. HDD

              49 HO LD

                (WHT)
              
              Dack este necesa, tect pe linia urmétoare text care i urmeazt
              
               
              
                 
              
               
              
              Permisd in: i>               
              c2> <> <> HD CG
            3. ... Folosite pentru prezentarea citatelor lungi. Pot include:

              <>

                       

            .... Centreazi tot ce este cuprins intre aceste etichete. Au prioritate mai mic decit tichetele

            <@IG> <>

            SHED <> <>
             TABLED
            
            Permise fn: GLOCKQUOTE>    
            
            
            . . .
            ‘Sunt utilizate pentru semnituri sau alte informati generale despre autorul documentul Pot include:
            CURR
            82> CHAD
          1. <@ont> Dimensiuni de caractere (NHTML) . .. <:MG> GLIMD «DAD EVD GSAMP>

          2.        “euE>         
            <> SD CHE>
          3. cPRED Stabileste dimensiunea implicité a fontului pentru pagina curent5, 286 Anexa B: Ghid HTML 287 Atcibute: Atribute: stage... Dimensiunea fontului, dela 1 a 7, Valoarea prestabilité este 3. ate Este folosit la definirea numelui hart, Permisi in: <$UP>

          4.  
            , ..
            
            Inserenz in documento imagine it
            
            Airibute
            
            rome Imaginea fost este o imagine hart pe ear se poate executa ci
            
            sie. UREulimagin
            
            nn Un text cre va fafa in browserele care nu dispn de suport pentra
            Imogin
            
            Stabilestealiniereaimagini, Dac are valoaea Ft au 81cin (HTML
            
            30, NHTML),tmaginen apa in stang, repo i despot ext
            
            care urmescX cunge pe lang imagine Calealte volo, 706, Sa
            
            2oteay, respec (NTMI) rexror, ASSO, AStIIN 3
            
            spor fosabilescalinereaimaginl pe vein fa de elle el-
            
            Imente de pe lina respect
            
            Spatial dintre imagine gi text alt deasupra sau dedesubtul
            
            Spatial dintre imagine i textul alt in stnga sau in dreapia
            
            (TMU 30) Litimea imagini in piel), Dak valoareawtiata nu ete
            
            cea rel imainea este sells corespunsiton.
            
            (HTML 30) inate imaginl Gin piel, Dac valoare ulizaé na
            
            fstecea reali, imaginea este stltdcorerpunedton
            
            (NEFTML) Tasead in jurul imagiit un chenar avn grosimea
            
            {i pixciegal cu valoarea prszats. fy eral iagintor cove sunt gt
            
            legal, valoarea atributull modified dimensiunes prestabiits pena
            
            Geran legaturioe
            
            (SPFTML) Cale st URL une magn care va ferent natn
            
            Imagini indstein SRC. De bic, magne indicat de acest stab
            
            este o imagine mal mil sna eu reclute mat mick det sages
            
            Fal
            
            (NHTTML) Este fotos pentru a asocia acestl magi o imagine hast
            
            Pent client precaath de etichete at ae=-maghores
            
            Perish ie <>  ID    GIN CETROND ND 
            CHD GaP 1S) CHD CLD eb CRD eaBLED Definesc o imagine-hart& pentru client. augue. SPACES... rowsnc=" useeaee™. anP>. Definesc, n imaginea-harta pentru client, 0 zond pe care se poate executa clic, Atribute: vet Este folosit Ia indicarea tipului zonei descrise de eticheta. Valorile posibile sunt: RECT, POLY gi CIRCLE. ccooRns=*...” ‘Acest atribut descrie punctele care definese zona descris de ticheta. AREF". ‘URL-ul care trebuie incircat cind se executa clic pe zona descrisa de etichetd. Permise in: <14>> Formulare

            <>

              aMEN>

                ‘Creeaza un meniu pop-up sau o listé derulanta din care se pot alege elemente. Atibu Denumirea sub care va fi transmis§ scriptului valoarea intro- usa de utilizator, Numarul elementelor care vor fi afigate. Daci este folosi ele- nnventele vor fori o lista derulant In caw contra, vor forma tun meniu pop-up. PLE PPermite alegerea mai multorelemente din lists Pot include: Permise in: <0

          5. BecoLoRe"..* Pot include: Tilul tabelulu. Atribute: mute" Pozitia ttlulut. Valorile posibile sunt 10P si 3o7z0¥ si alte Alinierea pe orizontala a continutului celulelor de pe linie, Valorile posibile sunt: 12°, Git si CENTER. Alinierea pe verticala a confinutului celulelor de pe linie. Valorie posibile sunt: 102, ID0LE, 20TT0% gi BASELINE (NHTML), (NHTML) Culoarea de fundal a celulelor de pe linie (numai Navigator 30). oconon ude: Permise in Definese o celula de antet. Atribute: aut [Alinierea pe orizontala a continutului celule, Valorile posibile Sunt: EFT, RIGHT gi CENTER. vaLION="..." Alinierea pe vertical a continutulul celuel. Valorie posibile sunt: T02, MIDDLE, BOTTOM si BASELINE (NHTML). owseane*...” _ Numérul de lini pe care se intinde celula. ‘COLSEANS*. ‘Numaeul de coloane pe care se intinde celula. wownar ‘Continual celulei nu va fi ajustat in mod automat, wrote" (NHTML) Latimea coloanet in care se afl celula,exprimata in pixel sau sub forma unui procent din latimea tabelului, pocoton",..” (NHFTML) Culoarea de fundal a celulei de antet (num Navigator 3.0). Pot include:

            <6

              AEN
                
                 
                
                

            . .
            .. Definesc o celuls cu date, Atribute: nureNe Alinierea pe orizontala a confinutului celule, Vatorite posible Sunt: LEPT,, RIGHT $i CENTER. WALION*...” ‘Alinierea pe vertical a continutululcelule. Vaorile posible ‘sunt: {0P, MIDDLE, BOTTOw st aAseLINE (HTML). rousente"...” _ Numarul de lini pe care se intinde celula, couseave*..." Nurul de coloane pe care se intinde celula, CContinutal celulei na va fi ajustat in mod automat, (NHTML) Latimea coloanei in care se afl celula, exprimata in piveli sau sub forma unui procent din latimea tabeluli, aocouore"...” — (NHITML) Culoarea de fundal a celulei (numai Navigator 30), Pot include:

            COD COIR AEM > RE


            Etichete pentru cadre Etichetele prezentate in aceasté sectiune sunt utilizate Ia crearea documentelor eu cadre. Pentru detalii privind aplicarea acestoretichete, iti Ora 18, Imparfiea unel pagini in cadre" ‘Anoxa 8: Ghid HTML 201 . .. (NHTML) Incadeeaz4 definite uni document cu cade. Atibute: Cos..." (NETML) Defineste numarulcloanelor de eden (S247) Deine Jor decade gi limen fow"...* __(NHTTML Define numa nor de cadres imen acest Pot include: * “ " Permise in: cHmoL> <<RAME> (NETL) Este folosit la definirea unui cade, Atribute: sk URL-ul documentului care va fi afigat in cadru. '@AGHINIDT":.." Dimensiunea in pixel a marginilor laterale ale cadrului. HSAGINHEIGHT-"...” Dimensiunea in pixeli a marginilor de sus, respectiv de jos. SCROLLINGS”..." Activeazd sau dezactiveazs afigarea barelor de derulare. Valorie posible sunt: YES, no si xUT0, onesi2, tilizatorul nu poate redimensiona cadrul. Permisa in: <FRIMESET> <NOFRAMES>.. . (NBT) Sunt fotosite la definirea unui bloc de text care va fi afigat de! Sunt folate a " fi afigat de browserele Web care nu Pot include:
            <> BIG GLIND «>