CREAREA = | PAGINILOR WEB amc Dave Taylor Traducere de Ariana Popescu si Gheorghe Musca (GE) «23 TeoraTitlul original: CREATING COOL HTML 4 WEB PAGES. Copyright © 1998 Teora Toate drepturile asupra versiunil in mba rom&na apartin Editurii Teora Reproducerea integral sau partial a textului sau a ilustratilor din aceasta carte este posibilé numai cu acordul prealabil scris al Editurl Teora. Copyright © 1998 by Teora, Original English language edition copyright 1998 by IDG Books Worldwide Inc. All rights reserved including the right of reproduction in whole or in part in any form. This ecition published by arrangement with the original publisher, IDG Books Worldwide, Inc., Foster City, California, USA, Creating Cool. -, and the IDG Books Worldwide logos are trademarks under exclusive license to IDG Books Worldwide Inc., from Intemational Data Group, Ine, Used by permission. 5 I 3 tol fax: 222.45.93 Siblu: Sos. Alba lulia nr. 40; tel: 069/21,04.72; tax: 069/29.51.27 Teora - Cartea prin posta "aed 34299~ CP 79-80, cod 72450 Bucuresti, Romania >> Tel/Fax: 252.1431 epp@teora.kappa.ro 7 Teora CP 78-30, cod 72450 Bucuresti, Romania Fax: 210.38,28 teora@teorakappa.ro Coperta: Gheorghe Popescu Tehnoredactare: Techno Media Sef de redaciie: Cora Radulian Birector General: Teodor Racucanu NOT 2463 CAL HTML 4, CREARE PAGINI WEB. ISBN 973-601-900-3 Printed in Romania Prefata Cine er trebui s8 cumpere aceasta carte? Ce trateaza ea? Ci rte? Ce trateaza ea? Cum citese aceest8 carte? De ce ar trebul s& citese aceasta carte? De ce v4 nu folosese, pur si simplu, un editor de pagini Web? Cine sunt eu> Bine ati venit! Hopat O alta carte despre Web. Prin ce este diferita de celelalte>* Iat8 otntrebere corects. Am scris aceasta pref crs aceast8 prefala pentru a réspunde la aceastntebare, Vieaus8 fl convinsc& raven rearee Paoinieh Web cu HTML 4 va rdspunde cetintelor dumneavoastrs si v8 to fcr In acelagi timp, ‘turd interesanta gi distractiva, . Despre ce trateaza aceasta carte Pe scut Creare Pagiilor Web cu HTML 4 este ltroducere tn TAL. HPL este prscurtaren dla Hyperfet Mashie tangege imbal de mrcape) i conaltilelimbajl ere peak Grea 8 facet publce prope documenta maltineas win Uae Web, Mitoane de uthuatointemar raf sauce orien brecum Amerie One, CompuServe Mersolt Nenion fesse Imedil extem de aac din pel de vedere situa nrc eae Wend Wie Web cu stort progrrnlos Internet Eaploves teeta Communicators Nvigeor Mosse nohe ae utizbnd HTL, pute ces documenteatractve afl la frontera Publicar interactive. Acesto ert motival penta cor ue hoes prin schiousle®invatarl timbajuls HIM In 1994, In sont opoen Wee Tee In privegte, am ivatat prin mead sncereal 9 grsel deo singurelereterinte pe cae le puteam gost cru cocunente Gein confure,scrlse de progremator, i documentate scouss la inininant Pen drnenvonstv ma sor tnd eens cate aca exoeriente cu softwares exemple Incase, puted Invate eee slementele de boza HTL i cum sa prlecat ed oe documente Web ule atacive, pe cares pomenali InternetCrearea Paginilor Web cu HTML 4 Pentru a conferi o mai mare atractivitate acestei cd, voi expune o parte din paginile pe care le-am proiectat si cBrora lis-eu decernat Premii, insatite de codul HTML care le-a generat gi voi explica ce se Intampls si de ce am implementat aceste pagini intrun anume mod 4 nu aitfel. Pana la urma, documentele Web atractive nu sunt neaparat| cele care contin imagini grafice numeroase sau elaborate, o mulfime de ‘mleroaplicati (epplet) Java sau mii de legaturi, Cu putin entuziasm si eva umor subtil, vetl vedea cum puteti expune informatie pur textual {in Web, intro menierd interesant8, angajanté din punct de vedere viauol, lila s distractiva - cu alte cuvinte, atractiva, Inainte de a va aprofunda in aceasta carte, ar tebui s8 stil elementele de baré despre functlonarea Intetnetului, cum 38 aveli acces la el $1 cum s8 utilzati programul dumneavoastrs de navigare Web, Dupa ce afi acumulat respectivele cunostinje de bers, vetivedea c& lucrorea de fat8 este o introducere distractiva In arta sista crestii documentelor Web interesante, de care veti fi mandru si pe care afi utllzatori vor dori 8 le vititeze gi exploreze De ce sa nu folosim pur si simplu un generator de pagini Web? Daca atifrunzarit deja aceast8 carte, pentru a vedee ce contine, ati observet numeroase exemple de lstinguri eu o mulime de instructiunt insotite de ,<" 51 ,>", Totus, reclamele din absolut toate revistele de Ccaleulatoare pe care le citi v8 spun, f4r8 urmé de indolal6, c8 nu e nevoie 68 v8 murdBriti mainile cu HTML, cénd putet utiliza un editor de pegini Web! Problema este c& fiecare editor de pagini Web pe care Lam vézut este estinat s8 creeze pagini pentru un program particular de navigace Web 1 dispune de o injelegere limitata a limbajului bogat, complex si continuu imbunstatit care este HTML-ul actual. Uslizati Microsoft Front Page si locatia dumneavoastré v2 arsta in mod cert mai bine in Internet Explorer (un produs Microsoft) deeat in Netscape Communicator. itlizoti Adobe Page Mill sau Claris Home Page si va vei lovi de probleme inversa: paginile vor fi mai aproape de pralectul dumneavoastra original daca utilizatorifolosesc Netscape Communicator. Esie o problema pe cat de subtils pe atat de ascunss. Un réspuns la aceasté problema inerenta este dat de recenaile proiectentilor Web care orets cd imensa majoritate a locatilor Web premiate din Internet sunt codificate manual, nu cu ajutorul generatoarelor de pegin Pretata NNiste prieteni pe care Farm ajutat ocazional la proiecteres on line mheu trimis recent un mesaj in care ma lmplorau 281i ajut, deoarece s-au lovit e insist de inconstanta prezentaril in diferite programe de navigare Dave, Ajutor! Toate arata diferit tn programe diferite de navigaret! Incepe sa devina un cosmar! Ce efect au Biversele prograne de explorare asupra modului in care este redata pagina? Clienta mee uttitzeaza ADL 1 din e-mail-ul pe care mi l-a trimis Tucrurtle arate rau de fot. Cand man uitat 1a pagina, pare in buna regula. Trebute facute cateva modificart ~ corp de liters, caractere aldine ~ dar ce se intanp)a? ‘Aceasta este une din cele mal mar frustrari ale tuturor protectantilor e pagini Web. Nu numai ca diversele versiuni de programe de explo- Fate accepts diverse versiuni de HTML, dar gi formatarea exacté cere ‘ezulta dintnun control HTML dat se modifies odeté cu programul de pavigare Web utilizat. De aceea regula, sfanté a tuturor protectantilor bbunl de pagini Wab este ,testeazs, testeazd, testeazé Intradevar, daca va vet! implica serios in dezvoltares de pagini Web, \-as sugera 38 eveli in vedere un plan similar cu al meu: Insinte de a declara in mod offcial ca atl inchelat un prolect, verificali toate peginile ‘cu cele mai recente dou edit ale celor doua programe principele de Ravigare, atét pe un Macintosh, cét gi pe un sistem Windows 95, (Asta Inseamna un total de opt programe de navigare diferte. In momentul de fe8 am instalat internet Explorer 3 si 4, Navigator 3 gi Communicator 4 pe embele calculatoare pe care le posed,) Conventii de text utilizate in aceasta carte ‘Textul tastat de utilizator apare cu caractere ingrosate, tn forma ‘urmatoare: ceva ce trebule tastat. Numele de fisiere, numele masinilor din Internet si directoarele apar Scrise cu font Courier, ca In eazul adresei urmétoare a locetiel Wed White House Guest Book, in care visitatori pot semna intro arte de Dpaspetl a Casel Abe wins tehouse .goV /Ml/ntnT/GUEEE 860K. hem Textul in format HTML apare seris in acelag stil special, tn forma urmétoare:Crearea Paginilor Web cu HTML 4 “ STITLE>Cum sa scrien pagini Web atractivec/TITLE> Chapter 1: uhat's a Web Page? Covers the basics of markup languages, how the Web itself works,. and different types of information in different documents, Chapter 2: vhat's a URL? Defines Uniform Resource Locators and explains how to make them for your own use. The chapter also includes Icontinuare)Crearea Paginilor Web cu HTML 4 (corre) brief discussions of FIP, Gopher , relate to URL construction. Chapter 3: Basic Keb Markup: HTHL ‘and e-mail as they: Gand vel alunge la jumstates citi, ve ft in masurd 54 ijeleget singur materiale de genul celui din figura de mai sus. La termineren acestel cart veti cunoaste si alte moduri de @ organize informoie, Pentru a faciita crearea de versiuni Web ale materialeloripsrite, Vet mai tnvata de ce modul de afisare HTML ilustrat in figura re este Desparat solutia optima de prezentare a informatie intrun medi eu hiperlegaturi cum este Webul, Dot st contactati pe autor? Trimet un mesaj de posts electronica be adres taylorintutve.com sau vittti pagina men personcis oe ce Web, a edrese EERRY/ wis sntaiRveYeoa/taynony Pagina-gozda a acest crt se ald le adress: HEEBE//ie. intl t1 ve. com/éooweb/ Dacé suntet! gata, s8 Incepemt Pretaga Capitla Copitetl Capitola Capito Capitola Copitoi Capitola Capitol Capitotul 1 2 3 “ 5: c z B 9 Capitolul 10; Capitotel 11: Capitolul 12: Ce este 0 paging Web? Ce este un Browser? GRLiuri: ce sunt gi cum se utilizeaze Notiuni HTML de baza Stiluri de text Liste si caractere speciale Addugarea referintelor si legaturilor Referinfe interne in cadrul documentelor.. ‘Adéugarea de imagini grafice pentru cosmetizarea" paginitor Tabele si cadre Proiectare avansata: fonduri, controale marquee si altele Harti de imagini, JavaScript gi aplicatii de asistenta Formulare $i introducerea datelor de la utilizator 21 4 53 n 85 100 14 ize m 199 222 253Capitolul 13: Copitolul 14: Capitolul 15: Capitolul 16: Capitotul 17: Capitolul 18: Capitolul 19: Anexa A: Anexa B: Anexa C: Anexa D: Anexa E: ‘Anexa F: Crearea Paginilor Web cu HTML 4 Interfata CGI (Common Gateway Interface) 278 Modele de stiluri 298 Imbunstatiri ale tabelelor si 316 Formulare avansate si elemente noi Introduse de HTML 4 wuss e sn 333 Facilitati suplimentare HTML 4.0 sesnnennne 347 ‘Ace in carul cu fan... 356 Pagini HTML dinamice gi vitorul Web-ult .r.csesnesnne 382 Construirea primet paginl ~ introducere 398 Ghidul pas cu pas al planificsriflocatiei WEB 410 Gasirea unel locatil pentru propria dumneavoastrs pagina WEB... ——— 418 Glosar.. 426 Ghid HTML, 434 Ce se afl pe CD-ROM runnin 446 Pretasa Capltolul 1: Ce este o paging Web? Ce este un Browser? .. Ceeste, de fapt, Web-ul? Medi liniare Hipermedi Locati tractive in Web Informatit din Web care nu sunt de tip HTML FIP vr Gopher $ telnet. : Intioducere in Netscape Navigator. Lansarea Netscape Navigator... ‘Modificarea pagini implicit Intioducere in Internet Fxplonet Lanserea Internet Explorer Modificarea pagin impli. Capltolul 2: URL-url e sunt $1 cum se utillzeaza Céutarea informatio in funul de date 41 GRLulle ne vin in out : ae Cities une ORL on oo oe 43 FTP prin URL 44 FTP enonim on oe 45Crearea Paginilor Web cu HTML 4 FTP cu nume de utilizator 45 Porturi 45 Utiizares URL-utlor de tip FTP. 46 Conversia spatilor din URL-url 47 GRLuri de tip Gopher 48 Post electronica prin URL 49 Telnet prin URL. 49 Acces la grupuri de stiri Usenet prin URL 50 Inima Webvulul: URLud de tip HTTP 51 Caplitolul 3: Noflun! HTML de baza. Bazele redactaril HTML. os : 53 HTML $i programe de nevigare . 54 Daca lai deschis, inchide non 56 Impastirea in paragrafe gi lini) 37 lmpartirea documentulul in sectuni 61 Inserares tttulul pegin : sn Informatii uzuale care se plaseazs la ef8rgt os 64 Definirea antetelor de sectune : 65 Rigla orizontala a vo 68 Capitolul 4: Stilurl de text. ‘Mai int, putina Istore ns Faciitares navigtrilfolosind caractere ingrogate gi alice Subliniere, caractere monospatiu gi ate modificdri ale textul 74 Uulizarea dimensiunilor culeriior sa corpurilor de Iter. n Aplicarea stilulor logle® ven ee 81 Combinarea tuturor proprietor 82, Capltolul 5: Liste s1 caractere speciale . Liste de tip define Liste neordonate (marcate) 39 Liste ordonate (numerotate) 9 Ceractere speciale in documente HTML vo 95 Spatiide afigare é 97 CComentari in eadrul codulul HTML 7 97 Capitolul 6: Adaugarea referintelor $1 legaturilor. Controale de formatare HTML mult-cuvant 100 Referinte etre alte pegini Web “102 Referizea informatilor non- Wed 104 RL-un relative . z 108 Cuprins Capitolul 7: Referinge interne in cadrul documentelor. 114 Definirea{intelorinte-un document Web o na ‘Adgugaree legaturilorcatre tinte din cadrul paginlor Web vn 1B, Seltur in eadrallistelor organizate 122 Legaturi cave tinte din documente externe 124 Capitolul 8: Addugarea de Imagini grafice pentru Cosmetizarea” paginilor 127 Diverse formate de imagine soso 128 Imagini GIF animate. . 130 Includerea imagiilor in paginile Wed 131 Alterative pentru programele de explorare Web de tip text... 135 Optiuni de aliniere a imagini. sncncay 3? Aliniere standard . vas 13 Alte alinier! mai sofisticate . : 140 Cateva exemple din lumen reald ve, 146 iTsvial Net eee : 146 -Reducerea la tacere a criti” : 149 istosia internet Mall vn 152 Unde pute gsi imagini? 156 Imagini nol create chiar de autori 156 Giip art sau biblioteci de imagini .la cute? 157 Programe de prelucrare @ tetelat nn n 158 Fotograi seanate vr : : smn, 160) Preluarea imaginilor din Internet . 7 162 Color transparente, a vos 165 ‘Aucio, video gi alte medi ns Semen s6) Flime toatt noaptea cssesoses : . vs 67 Auidia gl video de tip fan Se) Inirchetere : 169 Capltolul 9: Tabele $1 cadre Organizarea informatio in tabele.. Bazele formate tabelelor : Formetarea avansata atabalelor ws. 178 Posibiltat de generare a tabeleir in Internet Explorer 179 Modficarea marginilo sa caroajelor Artie egate de tabele Pagini in pagini: cadre Bazele organiza cadrelor : Speeficarea panourior si dimensiunilor de cadreCrearea Paginilor Web cu HTML 4 Capltolul 10: Protectare avansata: fondu controale marquee $1 altele .. Aliniereatextului si rgle orientale 200 Rigle la orizont 203 Umbre si culor pentru rigle 203 Lucrul eu liste 205 Culorisiimagini de fond. : “209 Modifcerea culoritextulul si legaturilor. 213 Derularea textulu in controsle marquee specie internet Explorer wun. 214 Audio integrat 216 ‘Adsugares de audio de fond 217 ‘Audio de fond in Internet Explorer . 218 Fonduri aevatice in internet Expiorer 218 Capitolul 11: Harfl de Imagini, JavaScript $1 aplicatll de asistenté .. 222 tt de magi Nn Dette are imagneacleat zr Gran animate : be Gt vn eimai on as neo tease deano : xo oy eer : 8 — — on aa lorie miioalctior (ppl) Jova xs Miepleat Jara nine ae Acie rnsnonnnnnnnn ie ve SOONEENN aap Apts desing Shockwave W RealAudio 28 Resco mo Shechve os 30 Capltolul 12: Formulare Introducerea datelor de fa utilizatos (© introducere in formularele HTML os 254 Producerea reectilor pe propria locetie. 257 ‘Adaugares meniurilor derulante vos 258 Un meniu derulant de pagini Web 261 Alte optiunt ale formularelor sa 29 Deavoltares formularelor propri printr-o for a Cautarusoare din propria pagina Alte artifiei pentru formulare 274 Cuprins Capitolut 13: interfaza CGI {Common Gateway interface} .. Interfota CGl de pe propriul dumneavoasts server Web Cel mai simplu exemplu CO! din lume Pagini Web intelgenteutlzand seripti CCl Tronsmitere seftes datelor {Un meniu derulant de pagini Web Preluarea informatilor din formule Capttolul 14: Modele de stiturt .. Inroducere in modelete de stitur Modele interne de stun Stlur specicate in antetl documenta Modele exteme de stu Aric utile pentru modelete de stir LLegature i moatics dimensiunes enum rn B12 Supraimprimare textull : . 313, Capitolul 15: Imbundtatirl ale tabelelor sl cadrelor 316 Tabele avansate.. ween BIT Bement no deisel invade de HTH 40 on : 321 Cade avANs ae rn = 324 Valor speciale TARGET. . 327 Cadre interne ven er Caplitolul 16: Formulare avansate $1 elementele nol Introduse de HTML 4 Tipal de intrare BUTTON, o ve 334 Utilzarea etichetelor in orgenizarea controlulu uiizatorui 336 Impattirea formularelor in seturl de eémpurt vn = 338 Controlul taste Tab la introducerea datelor : vanes 342, Aurbutele ACCESSKEY... se = 344 Etemente inactive (DISABLED) si protejate le scriere (READ-ONLY)... 345 Capltolul 17: Facititat! supiimentare HTML 4.0 Un nou mareaj HTML: Q Marcarea editéilor cu INS $i DEL . ' (Marzajul OBJECT von 350 Includerea elementelor grafice cu ajutorul mareajului OBJECT... 382. includerea unei alte pagini Web In propia paging . 352 Includeri de figiee pe server os 353,Crearea Paginilor Web cu HTML 4 Alte facility interesante Desparire automata in silabe Referinte interne ena ugor de realizat eu ID. In coneluzie Capltoful 18: Ace in carul cu fan. Generarea paginilor ugor de indexat cu ajutorul mercajului META. ‘Crearea unor tilurt sernificative tiizarea marcajului META Ate valor META posible Evaluarea continutulul cu PICS Protectia la programele de eautare Tnregistrazes la locatile Web de cautare gl indexare Tnregistrarea la un sit director Tnregistrarea la-un sit sau robot de cautare Uizarea Submit it (htp://www.submitst.com) ‘Spotut publictare pe baz8 de texe Publicitate in cooperare cu LinkExchange Mentinerea legsturi cu locale similare, utlizand un inel Web Bazele penourior publicitare Cea mai buns cale de a face publicitete propriei loca Capitolul 19: Pagini HTML dinamice $1 viltorul Web-ulul Pagini HTML dinamice cu stratus JavaScript Paginl HTML dinamice in visunea Microsoft Tehinologi dinamice pentru corpul de liters itpérire Contoate de pag nnn : © akernotive muzicala: MIDI Vitorul Webs. Anexa A: Construlrea primel pagini ~ Introducere. rea si editarea paginii HTML cu alutorul edtorulul Notepad wn. Introd Desctrcatea unei copii a programulul Paint Shop Pro Desearcaree eplicatil Graphic Converter Construct grafice cu ajutorul programului Paint Shop Pro ‘Testarea paginl propril cu Internet Explorer. TIncdrcarea pagini ct ajutorul aplicatiei FTP Explorer . (Ovultima verieare 354 34 354 355 356 387 Baz 383 392 "392 394 395 396 398 399 401 "402 403, 406 407 409 Cuprins ( 9) X ‘Anexa B: Ghidul pas cu pas al planifiedrit locaglel Web... Nivelul 1: Stebilirea conceptului ne Pasul 1: Stabilirea scopulul ao Pasul 3: Alegerea structuril situlul Web. 5 Nivelul 2: Constructia paginilor a3 Pesul 6: Optimizarea pentru cel mat lent! membri si sudiorilal Posul 8: Solicitatialtora 28 v8 verifice munca Nivelu 4: Incarcarea fiserelor pe serverul Web Posul 9: Pregatireafislerelor pentru server. Pasul 10: Verticarea URLului propriu Ukimul nivel: Anuntarea propriel pagini Web. "417 Anexa C: Gasirea unel locagil pentru propria dumneavoastra pagind Web. Propriety esentiale : Sit fara taxa Phronties Public Housing Project Tipe = Furizorl eft de ocat Web Best Internet Communications... Di's On tine Cafe Digital Landlords. Netcom Communications Northcoast intemet ‘The Well, Servere gaads comercole/Magazine virtuale Best internet Communications Branch Mall GyberHouse on Downtown Anywhere. VaWeb The Virtual Village Diu sunt sufclenteoptuni>Crearea Paginilor Web cu HTML 4 Anexa D: Glosar Anexa E: Ghid HTML.. Adaugarea imaginilor (Capitol 8) nmnsnsnsinn 434 HTML de baza (Capitolul 3 nu numa) 435, HTML avansat (Capitolul 10 gi nu numa) 435, Numai pentru Internet Explorer (Capitol 10) 436 Constructia formularelor (Capitola 12) vonnes 437 Formetarea caracterelar(Capitolul 4) 439 Har de imagin’ (Cpitolu 11) a 440 Cadre (Copitolul 9 si 15) : 440 Referinje hipertext (Capitolul 6 $17) ssn : 4a Liste (Capitotul 5) aa 442. Includerea scriptuilor in pagina (Capitol 11) Codur speciele de caractere pentru documentele HTML (Capitolul 5)... 443, Tabele (Capitolul 9) — — 443 Ce este un URL? (Cepitolul 2) sms 485, Anexa F: Ce se afla pe CD-ROM.. 446 Programe de navigare Web ionsnsnannn 487 Internet Explorer (Windows) = 447 Navigator (Windows). ee 447 Instrumente Web enn von 448 Eaitorul de imegini Cofee Cup (Windows) 448 FTP Explorer (Windows) : 448 Ecditoare de texte —— 449 ‘ApplePie (Windows) = 449 NotePad Plus (Windows) sworn 449 WebWeaver (Windows) vs ABO Grafs 450 ‘Animagte (Windows) = ven 450 Paint Shop Pro (Windows) = 450 Distracte joc nnn ronnns 51 Infinal.. . 451 Index. Ce este o Pagina Web? Ce este un Browser? Wseex: Medi liniare capitol Hipermedi Locatitatractive in Web Informasii din Web care nu sunt de tip HTML. Introducere tn Netscape Navigator Introducere in Microsoft Internet Explorer Este mportant 58 aveti cunostinte de baza referitoare la notiunee web" de informatil. De aceea, inainte de a trece la bazele eres Proprilor pagini Web atractive, sa aruncém o privire atenté supra @ Seed 8 reprernts Webs, cum functioneaté 31 ce este HTML. Promit 8 fu scurtHipermedi Crearea Paginilor Web cu HTML 4 Ce este, de fapt, Web-ul? Pentru a injelege World Wide Web, este indicat s8 considerém mai intai ‘modul in care este organizat8 informatie in medile tiparte, Aceste ‘medi, cred eu, reprezint8 un model edecvat pentru Web si modul sau de orgenizare, desi unll ar putea considera ¢8 jocurile, filmele, pro- gramele TV si alte medii de publicare a informatiei sunt mai potrvite ‘nel comparati eu Web-ul Medii liniare Sé ne gindim putin la caracteristicllefaice si de orgenizere ale Arti de fats. Ce se observa in principal? Cartea este compuss din unitati discrete de informatil: paginile, Paginile sunt organizate, in mod conceptual, n capitole, Capitolele sunt legate impreuns, cand astfel nastere c&ri. Intrun anume sens, ceea ce aveli in fats este 0 colectie de pegini orgenizate Intrun format care va determins s8 le cit intro anumita ordine, de la prima la ultima pagina. Cu toate acestea, 1 cexista nicl un motiy s8 nu sérili de la 0 pagina la alte $i s8 v8 creati propria strategie de navigare prin eceste informal ‘Ma mai urmérit? Eu numese acest exemplu de structurare & cértil organtzare liniard a informatie. Ca sifilmele, cele mai multe c&rt Inclusiv aceasta, sunt organizate in deca c@ Incepet lectura la Ineeputel e&rti gio terminate sférsitul e. Stine maginar, acum, 8 in oe $8 intosrcelpagine in mod fie, pute etnge sone ce lo Desa neces posin esegest nalts Pentru a tece le pagina urmatoare, Almgerea une ale zone © Sageets inapol = v8 conduce la pagine precedents Mal mult, nogine Thvh tunel cand priv cupsinl ei pute ange dexter oh apitel penta trece direct pagina unde incepeacel cape. alnget oats rons ~o'micspltogram 8 unui dichoner = v8 mut intra curfotl ae cate Un asemenea model se numeste hipermediu su hipertest, termen Imeginat de uni vizlonari ai stintecalculatoarelor ined de la mijlocul secolulul XX, cu precédere de catre Ted Nelson in cartea sa Computer Lib. Anumite avanteje pentru cititor devin evidente in aceast8 abordare ‘mal dinemicé a organizériiinformatiel. Un beneficiu imediat este c& indexul de subiecte devine realmente util: prin capacitates de a atinge lect de interes, fie un text explicatiy, fie o referints descriptiv Capitolul 1: Ce este o pagina Web?.. Putet utliza acceasi carte ca material de referint, in plus fata de manualul organizat liniar pe care il ofer8 cartes, Este eceeasi diferent dintie metoda optims a accesulul direct ofert de un CD eu muzica st fluxultniar el une! benal audio seu video. Un alt beneficial hipertextulul implica notele explicative de subsol Textul de subsol nu mai trebuie Inghesuit in partea de jos @ poginiy cu aiutorut hipertextulul, puteti atinge asteriscul sau aumérul note ala codrul textulul, ceea ce deschide o mica pegina care afigeara note de subsol, Inca o idee: putetiatinge o ilustratie pentru a obtine o versiune le sceré ‘mal more a acelelilustrati, sau chiar pentru a convert ustrove meg secventé animata sau In spatiu 3D, in eare puteti naviga sl exesning ‘obiectul respectiv din diverse puncte convenabile 4 mod evident, ceea ce descriu ale} sunt paginile Web, Dar exist8 o Posiblitate suplimentara e Web-ului care face lucrurile mult mai cistrace {ve sl interesante: paginile de informatie pot gsi pe sisteme raspan alte n lumea intreagé. Paginile In sine pot fi documente foarte vane plexe (s, In cazul ideal, interesante si atractive). Inchipuit-v4 urea toarele: tn loc 58 se serie ,Putetiviita pagine Casei Albe pentra, informatitsuplimentare", documentele Web permit legaturi drecte, astfl ineét cittorll pot efectua clic pe cuvintele scoase in evideng® din roponiie~ sau pe o imagine a clair ~ pentru afi condusl imectat ra locatia Web a Casei Albe. Locatii atractive in Web Figura 1-1 ilustreaza un document Web de tip text pe care il veti explora mai tarziu, In eceasts carte, Observeti, in special, cuvintele ‘subliniate, core represinta de fapt legatun alte ate documente Web late in alta parte in Internet Dect sunteliconectat la Internet si efectuat clic pe secvenja National Institute for Literacy, veti fi condus (electronic) la central din Washington, D.C, lustrat in figura 1-2. Ceea ce face ca toate acestea s8fiealst de solicitante pentru mine (s Pentru milicane de alt utiizatori) este feptul e& numarul documentete Web nu este de ordinul mitlor sau zecilor de mi, ci de ordinul milion. Inelor ~ practic atat de mult, inst nimeni nu leva vidtat vreodaté pe toate, Sunt disponibile atét de multe documente, incat regésicea infor matiei este probabll cea mei mare provocare din Intesnet. (Hopal edt > acl 88 scriu autostrada informationala, Vol incerca #8 evit acest ct seu, chiar dace metefora poate f util atunci cénd se Iau in eoneicevareCrearea Paginilor Web cu HTML 4 aspecte legate de trafic, vitexe de conexiune gi alte subiecte asems. natoare.) nt Sites on the Web + EE SSetemana boalomat Figura 1-1: Cateva local interesant Ge vzitat din Internet — a fe ease aor oeoememy Welcome to LINCS: Be 0 ~ si : Dia pa vasa Dseca Lad ayn NE ean a ‘Whats New? Top Ten" Literay Sites on Lt (Current Events and Information Litersey Forums and Listservs LINGS Regional Hubs & States Literacy Resources Figura 1-2: Insttutul National de Suinge Educationale CSorthe Web ~ Capitolul 1: Ce este o pagina webz. Informatii din Web care nu sunt de tip HTML FIP Desi este o cert ca cea mai mare parte a informatilor din World Wide Web constau in documente multimedia elaborate, scrise in HTM special pentru delectarea cittorilor din Web, un numar surprinedior de mate de documente provine de fapt din alte tipuri de servic de publ are a informatiior din Internet. Aceste documente sunt prezentate in cele mai atractive formate posibile, chia, de eatre programele de navigare Web. Gel mat simplu dintre diversele servictinformafionsle din Internet este FTP (File Transfer Protocol ~ protocol de transfer de figere). ETP este lun mecansim care va permite accesul Ia hard-diskurl exterme pentes a utea lista directoare si a avea acces direct la anumite fisiere, Fete disponibil de mult timp ~ cu mult inainte de aparitia Web-ului, Prin ttadiie, lucrul eu FTP este neplacut, iar interfata a fost intotdesuna dear la un pas de programarea directa a calculatorulul. De exemplu, de PE 0 masiné-gezdé UNIX, ar trebui s& testi urmatoarea seeventa de Comenal pentru a va conecta la gatekeeper. dec.com (textal intodias deutlizator este marcet cu caractere ingrosate) 4% ftp! gatekeeper dec. cont Connected to gatekeeper.dec.con 420 gatekeeper.dec.con FIP Server (Version 5.97 Fri. May 6 44:44:16 POT 1996) ready, Name (gatekeeper.dec.com: taylor): anonymous 331 Guest login ok, send ident a5 password. Password: taylor@intuitive,com 230 Guest Jogin ok, access ‘restrictious apply. ftp> dir hypertext 230 PORT comand successful. 130 Opening ASCII mode data connection for /bin/ls. total 11 Groxroxrcx 2 root system 512 Dec 28. 12:57 docs cterer= 1" ‘root system 2435 Feb 8 00:26 getekeeper. hone. hem) storer= 1" root” system 455” bee 28 22:17 getekeeper.hone.hatml keontinuare)Crearea Paginilor Web cu HTML 4 eoncinuare) Trwer-xr-x 1 root systen 20 Feb 8 00:20 home.htnl - gatekeeper. hone. html Gr-xr-xr-x 2 root system 512 Feb 8 23:13 includes Grearcar-x 2 root system $12 Feb 8 00:35 info droxrexr-x 2 root system 512 Feb 8 00:35 orgs Groxr-ar-x 2 root systen 512 Dec 29 22:05 pics. droxrexr-x 2 root system 512 Dec 26 12:57. util 226 Transfer complete. renote: hypertext G19 bytes received in 0.28 seconds (2.2 Kbytes/3) ftp> Acceracteriza 0 asemenee procedurs drept complexé ar fio subes- imare, FTP este rapid si usor de utlizet, bineinteles dupd ce yprinzi* tosta magia, dar esenta lucrului cu un calculator este c& ar trebui $8 te pot! axa pe ce doresti s8 realizes, $i nu pe cum trebule s8 realizeti ace! Tee Comparatt exemplul precedent cu urmatoarea proceduré de utlizere © programului Microsoft internet Explorer, pentru a avea acces direct le ceeagl arhiva (ver figura 1-3). In loc s8 tastati toste acele informetl, Geschideti pur 1 simplu locetle ftp: //gatekeeper.dec.con/ hypertext introducénd aceasta adress in caseta afigeta, atunct cind selectati optiunea Open Location din meniul File In acest exerplu, ftp indie’ Upul serviciulut disponibil, pertea :// este 0 notajie gic (dac nu misterioasé), ler gatekeeper. dec.con/hypertext este numele Caleulatorulu sal directorulul pe care dori sé vitualizeti. Apasati ‘pol Enter. Formatul locatel (ftp: //gatekeeper.dec.con/hypertext) este numit Descriptor Uniform de Resurse (Uniform Resource Locetor ~ URL). ‘Sunteti gate sa vieitet! confinutul unui director sau folder? Efectuot ce pe acel director 4i va veti muta in ecel loc. Dorit! s& preluati un fisler? Bfectuall clic pe fiser 91 Internet Explorer determin8 automat tipul fisferulul, v8 intreabs cum dont s8 denumit fisierul pe PCul dumneavoastré sill transfer8 pe sistemul local. Fars mult vorba si rs agitetie Pe parcursul acestei ctl vot utiliza termenul PC pentru a mé referi in (general la otice lip de calculator personal. De fapt, scru aceast& carte pe un Macintosh gi verific procedurile pe um sistem Windows 95. Capitolul 1: Ce este o pagina Web?... Gi) i | FPP areca ypertet at eatehepree com | centri day Figura 1-3: Microsoft internet Explorer viiteaza arhiva FTP Gatekeeper ‘a. companiei DEC Operares comods cu FTP nu este 6 trasaturs specifies a Internet Explorer, cio posibiltate a (uturor pachetelor de navigare Web, Inclusiv @ celebrului Netscape Navigator. Figure 1-4 ilustreaza aceeasi locatie iocatia FTP a companiel Digital) viauelizats in Navigator. ——— ——= = ‘Current directory is ihypertest Figura 1-4: Navigator viziteaza arhiva FTP Gatekeeper a companiel DEC {il ene local in cate diferente dinte hdr cuvinte devine impor- ten Til servis ln care vs pel conedia ete coen co cu umes sistem de transfer al informatie, iar nformatia propvis presenta este conginutul Pin analogs, Web este sistemul de rons al nformate lar limbajul de marcarehipertext HTML — este format ullzat pentru continu Unele din documentate HTML din Intemet nu sunt disponible n Webi proprioas cl sunt accesible direct prin FTP. Figure 15 Wusteaz8 un exempu de aces fe prima pote eunel pagal care este access doar printn progrem FTPCrearea Paginilor Web cu HTML 4 ‘sau, bineinfeles, prin programul dumneavonstré de explorare Web care cltegte informal FTP, SRC Modula-3 Version 2.11 ude 2 te rome Figura 1-5: Un document HTML transfera Gopher si tenet Programele de explorare Web pot percurge medi de informati de tip Gopher 51 va facilteaza conectorea la alte calculatoare prin telnet Pentru a vedea cat de utile sunt aceste posiblltat, s8 ne amintim cum mergeau lucrurile inainte ca Web-ul $8 creeze brega prin unificarea iverselor interfete, Figura 1-6 prezinta un ecran al programulul Windows HGopher. Aplicatia este ugor de folosit, dar nu va poate ajuta Ia FTP, documenta Web eau orice altesva, Figura 1-6: Gopher este o solugie alternativa limitaté In raport cu rogramele de explorare Web Capitolul 1: Ce este o pagina Web?, “Telnet este, de asemenea, destul de usar de folost: de pe o masing gexda UNIX, tastati pur si simplu cuvantul telnet, urmat de numele caleulatorului la care dort s8 va conectati. Remarcati faptul c® avelt nevoie de un cont pe coleulatorul de Ia cistanta, pentru a va putea conecta. Dar aici este buba: cum s8 ii minte toate numele de calculatoare? Posibilitatea de a oferi un unie punct de plecere pentru diversele servicli Internet reprezint8 un atu real al unui program de explorare Web. Figura 1-7 ilustreaza o pagina Web, In care legaturile sunt, de fept, referinte catre diverse tipuri de servici Internet. Utlizand aceasta pagin& Web nu trebuie s8 memorafi numele caiculatoareloraflate la distanya sau modalltatea prin care putet s8 ajungeti in acele locurl Pe masura ce veti invata cum s8 prolectal gl 88 creat! pagini Web, veti Tnvata gi cum 58 alegeti gi s8 utllzay|civersele serviell din Internet, Efectuatl clic aici pentru a continua, (A fost doar 0 glumé!) | Multi-Service Travel Destinations on the 'Net ermine Demet sion Figura 1-7: Sercl utile accesible no sngur8pagin8 Wed Introducere in Netscape Navigator In 1995 au evut loc, din perepectiva Internet, dous evenimente memo: le: imensa campanie din jurul lansari sistemulul de operare Win- cows 95 s1 prima oferté publica de actiunl ale unel miei companii rumite Netscape Communications. Netscape 2 insemnet, pur si simplu, 0 explozle pe scene informetionalé sia devenit rapid una din cele mal bine cotate compenii mici din Statele Unite. Ceea ce a stérnit,Crearea Paginilor Web cu HTML 4 de fept interesul tuturor In legsturd cu Netscape a fost Navigator, un program de explorare Web, cu totul temarcabll pe care compania il istribuie gretult comunitsti Internet. Program apérat initial sub hhumele NCSA Mosaic si ska erolt rapid o reputafie solid. ‘Au trecut mal bine de doi ans! Netscape continué s& conduc8 pluto- rnul, mentingndu-i reputatia de lider In domenlul Web prin puternicul Software de tip server gi prin aplleatia (mereu imbunstatite) Netscape Navigator. De fapt, programull de explorare evolueazé rapid ~ foarte rapid chiar ~ atat de rapid incdt in orice moment, compania dispune de fo versiune a edite'oficiale a programului Nevigator, de o edie beta a \ersiunil urmatoare gi de o edit beta anticipat& a versiunil de dupa Yersiunea urmatoare, special pentru proiectantil de aplicetl. Com la fiecare gase luni se lanseez8 © noua editie importants, ceea ce inseam- na c€ se depune un efort constant de intretinere a softwere-lul Daca nu at auzit de pachetul Communicator, pot s8 v8 spun c8 cesta teste un ansamblu format din Netseape Navigator siun grup de alte programe, printre care un pachet pentru conferinte video s! nu numa Baca suntet in aceeas! situate cu mine, veli avea nevole doar de progtemul lor de explorare. Restul pechetelor de progreme v8 sunt Inutile, desi existb o aplicatie care merité etentie: Composer. Acesta este editorul de pagini Web oferit de Netscape, care va permite s& faenerati pagint satisfacdtoare faré s8 va Incurcat In codificarea HTML, Totusl, rerultetele pe care le vet! putea obtine dupa ce percurgeti aceasté carte vor fl cu mult superioarel Cu toate acestea, nu trebule $8 v8 sim sat deoparte, deoarece Navigator cuprinde si 0 mulhime de lucrurl agreabile,Inclusiv un sister de conversetii (chat), un pachet de telefonie bazeta pe retea si altele Cea ce nu cuprinde nici Navigator niei Communicator este © mods- litete de acces la eles sau 0 conexiune telefonicé le Internet. Detalile unel conexiuni telefonice la Internet depagese putin domeniul tcestei crf, dare euficient of epunem 28 dacd v8 putefl conecta la Internet dela PC-ul dumneavoastes, este foarte probabil c@ utlizati ceva" numit protocol punt la punct (Point-to-Point Protocol ~ PPP). Baca v8 gandit la un telefon si le modul sau de functionare, PPP este ‘echivalentul imbajulul ,vorbit" de telefon pentru ca PC-ul 8 posts ‘conversa cu firuleare jese prin perete. Desigur, nu putet! utiliza un telefon decé nts dispuneti de un serviciu telefonic, ar un telefon din Europa, de exemplt, ar putea 88 nu inteleaga semnalele transmise pe lun cablu telefonie din Jeponie. In concluzie, este vorbe de fopt de un fensamblu de trl factori = telefon, standarde de semnel si servicit telefonice - care fac posible tonal si serviciul de ape! telefonic. Prin comparatie, ceea ce v8 trebule pentru a dispune de o conexiune Internet este un ton de apel (0 linie de apel de la un furnizor de servicil Capitolul 1: Ce este o pagina Web?. Internet, cum ar fi America Orrline, Netcom sau Best Internet Commu rications), un stendard acceptat de semnal (In acest caz, PPP) si un elefon® software (un program de explorare cum er fi Navigator sau Internet Explore) Lansarea Netscape Navigator Tocmai cititi aceasts carte, deci e foarte probabil s8 fi petrecut deja ceva timp navigand prin Web si s8 fii gata s8 publicati on-iine propriul imeterial, In caz contrar, vel fi bucuras 58 aflati cd e destul de simplu sa Back (inapol) ~ Efectuaticlie pe acest buton si vell sri la pagina ‘enterioaré celel pe care o vizualizet! In momentul respect. Puteti ‘merge mul pas! inapoi deca ati navigat suficient timp. O optiune gi mal interesanta: efectuati clic gi linet! butonul mouse-ulul apSset, Print (tipsrite) - Sunteti gata s8 pastratio cople pe hértie @ paginil vialtete? Efectuati clic pe pictograma de imprimare si copia va legi frumos la imprimanta. se Security (securitate) ~ VA intrebafi dacé pagina virualizata in mod ccurent este sigura sau nu? Efectuatl un simplu elie st vet obtine o sinteza de informatii despre statutul de securitate al paginll vizua- lizate. Nu vi ingrijorati daca 99% din paginile omline sunt declarate ‘ea find snesigute”; In orice caz, acest aspect este cu adevarat Important doar atunci c6nd se afigeaza informati cu grad inalt de confidentialtete ~ informatil cum ar finum&rul de securtate Capitolul 1: Ce este o pagina Web?.. sociala, declaratia beneara pentru tronzactii online sou o plats efectuatd prin carte de credit Stop ~ Atunci cand asteptati mult timp ca incarcarea unei pagini $8 fie inchelata, este ceconfortant s& sil c8 potl spune programulul Navigator ,En ordine, am vszut destul", efectuand clic pe acest buton, F gure 1-10 ilustreaz8 butoanele Netscape Navigator descrise mai sus. Figura 1-10: Butoanele principale ale barei cu instrumente de fucru din Navigator Modificarea paginii implicite Uh lucru pe care Ml veti gsi foarte ull pe mAsurd ce vel cli aceasta carte este posibilitstea medifcarii paginilimpliite din Netscepe Navigator, in aga fel neat s8 incepeti chiar cufisierul Coolweb: html ia loc s2+1 edutati pe sistemul dumneavoastré de fiecare dats. Operatia, este dastul de simpla g1 implica petru etape: 1, Deschidet! Navigator gi deplasati-va lafisierul Coolweb.html, aga cum s-0 ardtat anterior 2. In meniul Eait selectoti optiunes Preferences. Insta din partea stings efectuai cic pe .Navigation” si vet vedea un grup de optiuni eare seamén8 eu cele din figura 1-11 In mijfecul easetel de dialog exists o optiune nurmits Home Page (pagina gerd). 3, Electual clic pe butonul Current Page (pagina curents), 4, Electualicie pe OK gi gata! Dupa ce ati vazut cum se schimba pagina gazda implicit, o put modifica dup8 dorinta - In aga fel incat s8 indice pagina proprie din Web dupa ce afl creat-o sau s8 se Inceapa cu ericare din muttitudinea de pagini interesante care exist In Internet,Crearea Paginilor Web cu HTML 4 Figura 1-11; Modtficarea paginil gazda imple in Netscape Navigator Introducere in Internet Explorer Arfi trebuit s6 f trait inteo pesters ca s8 nu fireceptat toata agitatla Iscaté cu ocazia lanséril Windows 95. Acesta este mult mai mult dectt tn sistem de operare; este un mediu complet nou pentru utlzatoril de Cush un mediu care are drept scop sporirea usurintel in utiizarea calculatorutui, iar interfata mai unitera gi consistent La fel ca revizille constante fécute de Netscape asupra programului su de navigare, Microsoft a adoptat o cale agresivé de lensare a versiu- nilor noi, de indata ce compania le finalize. Surprinzstor este faptul ¢& [Microsoft pare sa forjeze lucrurile, Prima versiune a Microsoft Internet Explorer, inclusa In pachetul Windows 95 Plus Pack, ere acceptabila, deri lipseau multe din cele mal bune optiuni din Navigator. In momen- tul scrieril aceste cérfi, editile 4.0 ale ambelor programe de nevigare ‘au proprietati identice:diferentele se invart In urul componentelor ‘2uxillare, cum ar fi conferinte In grup (Microsoft are un design mal bun, Netscape are o implementare superioar8),telefonie bazata pe Internet (Microsoft are un sister mai bun) si discutit interactive (sunt cam la fel). Aproape ca nu exist8 controale HTML care s8 fie acceptate doar de unul din cele doua programe, spre deosebire de prima generale 2 acestor aplicati. Acest luctu este imbucurator; prolecte foarte soft ccate de pagini Web funcjioneszs in embele programe, cu céteva exceptii despre cere vol vorbi mai térziu, in cartea de fet8, O versiune de Internet Explorer este inclusa in Windows 98, deci va fi mat ugor #8 Capitolul 1: Ce este o pagina Web?... {glsiti acest program de navigare pe celculatoarele pe care le veth felosi. Lansarea Internet Explorer Dap ce sunteti gata s8 incepeti explorarea Webwului - sau doar a fisietelor incluse in aceasta carte ~ trebule s8 Identificati gi 8 lensati in ‘execute fie Explorer, fe Navigator, Putef face acest lucru In modul cel ‘mai usor executénd dublu-clic pe pictograma Internet de pe suprefeta de lusru a sistemului dumneevoastra, lansand aplicatia din Program Mana- get sau prin intermediul omniprezentului buton Start din Windows 95. La prime lansare a programului Explorer, aceste va incerca s8 se ‘cenecteze It pagina gazda Microsoft din World Wide Web, ceca ce poate constitui o problema dacé nu avetfinstalata conexiunea Internet. Daca se intampla aga cava, nu v6 ingrijorati; selectati Cancel atunc! ‘cénd programiul afigeazd o casetd de dielog care solleita un numar de telefon, sau cdnd semnaleaza in alt mod c& asteapta stabilirea unel ‘canexiunt internet. Vetisfarsi prin a privio pagin’ vide, der toste clementele de control vor fi prezente. Selectati acum Open File din meniul File (seu ullizatl secvenga rapids Ctl+O de la testeturs. Aceasté actiune va deschide caseta de dislog Open Local File, ilustrata Tfigura 1-12. Figura 1-12: Identificatfisierul Coohweb html sl efectuaticlie pe Open ‘Acum af! obtinut ceval Ar trebui ca Internet Explorer s& deschida prompt acest fisier s!imaginile grafice asociate gl 98 le afigeze pe toate Int-o fereastré eleganta. Apropo, e posibil sa avetl pe ecran bare cu Instrumente de lucru diferite, dar acestea se pot activa si dezactiva prin opiunile din meniul Preferences, Figura 1-13 ilustreazé cum ar trebui ‘sBarate pagina Web a carti de fa{6 pe ecranul dumneevoestrd,Crearea Paginilor Web cu HTML 4 Welcome to The Book CDROM! Examples Ongunied by Chapter « | am atneivteremoi tan metamauins | Figura 1-13: Pagina gazd8 a cirgide fa in internet Explorer Dacé bare cu instrumente de lucru este selectats, puteti observa un set de mici butoane care va pot ajuta s8 va deplesatiin Web, De la stanga Ia dreapta, aceste butoane v8 permit #8 va deplasctlinsinte #! Inepo! intrun grup de pegint vizitate, 68 opriftransferul unei pagini lente, «8 reimprospatatl pagina (adica obtinerea unei noi copii a paginil si reefigarea el pe ectan: acest buton va ajuts enorm atunei cénd dezvol tati propriile pagini Web) si s8 trace! Imediat la pagina gazdé ~ sou le cea impliits. Pictograme care lustreaza globul pamantese cu o lupa descupra va permite 08 vb deplosoli divest la pieyianiil favors de ccdutare in Web, cea in forms de casuta postala v8 conduce la progra ‘mul Microsoft Internet Mail and News (livrat impreuné cu Explorer), care v8 permite s8 trensmitell¢s@ receptionat posta electronics (e-mail) iar pictograma ce reprezinta un ziar v8 permite 38 porticipeti la oricare din mile de grupurt de diseutil online Usenet, Pictograme in form® de doser, avind o stea in centru, v8 permite #& deschidet lista locatilor dumneavoastra favorite; e posibil 24 fi aunit de aceasts facilitate si sub numele de lista semnelor de carte" (bookmarks). O roprietete utla ~disponibilé door In Internet Explorer ~ este accesibila prin butonul care reprezinta itera mare A cu ségeti in sus gi jos. Aceste ‘va mari sau micsore toate corpurile deliter8 din pagina Web curenta {(sageata in sus pentru marie, sigeete in jos pentru micgarare). Cu alte cuvinte, dacé vizualizati o pagina Web si fextul este prea mie pentru a fi eititlejer, efectuati clic pe butonul Larger pentru a mari toete textele Capitolul 1: Ce este o pagina Web?. @) Figura 1-14 iustreaza butosnele de pe bara cu instrumente de Iucru Internet Exploren Figura 1-14: Legaturi convenabite de pe bare cu Instrumente de tucru ternet Explorer Modificarea paginii implicite ‘Acum, dupa ce afi lansat programul, 98 examingim un ertficlu uti ininte de @ Incepe explorarea HTML si misterele 4i aventurile dezvol: tari paginilor Web: configurarea paginil implicite ca pagina Web Airactio care ar trebui sa fie deja afigat® pe ecran. Dupa ce vel invata ‘cum $8 serieti pagini Web atractve, vetl putes modifies pagina impl t8 ce lind pagina proprie sau, eventual o alta pagina utila din Pentru e modifica pagina implicit, efectuati clic pe butonul Preferences dds pe bara cu instrumente de luert sau din meniul View. Una din otiunile pe care le veti remarca acum este etichetata Home/Search, $i aceasta este cea cautat8. Selectajio 3i ar trebul s8 obineli ceva foarte, fasemBnator cu ceea ce este reprezentat in figura 1-15. een elon moeslaem | a “som | aa | — son |b 2a ae | eee eae aceon | Figura Deoarece vieualizati taemai pagina pe care vreti sa o definti ca pagingCrearea Paginilor Web cu HTML 4 selectatiintregul URL si apoi sa decupat! in caseta de text ,Address in zona Home Page a acestei casete de dialog, Aste este tot, La urmatoarea lansare a programulul Internet Explorer veti eves la indemana pagina Web a lucrSrit de fat observatie ironies: In versiunea 3.0 a programelor Navigator si Explorer, acesta din urma avea un buton dragut ,(lse Current" (util 2e8z8 pagina curent), pe cand Navigator nu. Acum, in versiunes 4.0, cel dol siau inversat pozitia asupra acestei optiuni uille, Care din cio vva Include in versiunea 5.0 Fit pe fa28 si vom afla impreuns! Foceti-v8 putin timp pentru a hoinari un ple si selectatj butonul Examples pentru a examina cum au fost organizete sutele de figlere- fexemplu, astfel incét s8 obfina dubluri ale informatillr lustrate din aceasta carte. Amintifiva 8 puteli orlcénd utiliza s8geata Inepoi de pe bara cu Instrumente de lucru, pentru a reveni la pagina vizualizeté| In ecest capitol afi parcurs rapid cBteva locatil disponibile in Internet si ati vazut curn putet! utiliza referinte Web pentru faves acces nu numai la docurnente HTML. Aji Invatat ¢& Rezumat pici soos programe de cxplorare Web pert aber fislerelor prin FTP, cdutarea In locatii Gopher si conectarea le alte masini din Internet, prin telnet. In cepitalul 2 vel inves- tiga misterele constructilor URLurllor, cate reprezinté esents schemel de legsturiInformationale WEB. URL-uri: ce sunt si cum se utilizeaza in acest Regasireainformatilor cu ajutorul URLuilor capitol Citren unui URL “Transfer fglerelor prin URL Pogta electronica prin URL Uutzerea URLurlior pentru diverse servicit Internet Gerstner sce ny ie document ish crelic lume dentro tn Weds Pane cue} Sp ce Yalelipinl concep in ses opt, vel gate abode sre tid devrt rosie! Acet capa pne'm ase dea estas deunde pronn ce sens sume putes bevel popr Sunt deste pe sur PT let era tauren coe a eqs cu conse Un-rfor Dupe ce vor tmnt aces ap v promt ct vomn eps deerrea Seon Cautarea informatiilor in fluxul de date Pe mBsur8 ce societatea nonstré a facut tranzitia de le produse la Informajie, am asistat lao accelerare repidé a unel probleme vechi de card lumea: identficerea resurselor necesare. Gésiren 3| objinerea resurselor au fost teme importante de-a lungul istoriel lumi fie c& @ fost vorbe de micodenii, combustibll, materi prime sau informatie. Astizi, ne-am agtepte ca sistemele de caleul $8 fact procesul de ccttare mal ugor. La urme urmei, nu Se presupune cA sistemele deCrearea Paginilor Web cu HTML 4 calcul sunt experte In parcurgerea unor mari cantitat de date pentru a isi ceea ce cdutatl? El bine, da si nu. ‘Mat inta, or trebui s8 fecem distinetie Inte date $1 inforrnati. Datele epretinta material brut™ ~ ceva stotcuprinzstor, dela flecere secventa din memoria digits si pan la spotiul de pe hard-disk-uri sau de pe benalle magnetice de rezerv8. Pe de alts parte, informatie sunt date relevante si valoroase pentru interesele proprli. Daca va interesesrs urentul Beat din anii'60, de exemply, informatile despre alte subiecte, cur ar fi sisteme de conalizare municipale seu ace de cusut nu sunt de foc ule, ci mai degrabs o batale de cap. Caleulatoarele au extins extraordinar de mult prolferaree datelor. Ca lurmare, seperarea informatio din fluxul masiv de date reprezinta una in provocarile fundamentale ale epoctinformetionale, Imi pot imagina cat de mult se va inrdutati situatia fn urmstorilzece ani, cénddin ce in € mai multe date vor cireula pe linille de comunicatie. Considerat din acest punet de vedere, Internet-ul se contrunta eu 0 mare problema, Deoarece nu dispune de nici a autoritete sau orga. nizatle centrals, marile depozlte de date din Inteznet sunt sranjate int-o manieré deloc semaificativa sau intuitiva, Este la fel de probabil 8 {sit informetit despre curentul Best pe o maging care apertine unei ambasade germane, sau pe un mie ealeulator al unei scoli de arte modeme din San Francisco. URL-urile ne vin in ajutor CERN este un institut de cercetare pentru fica energilorinelte, aflat in ENetia, care a creat tehnologia de baza a World Wide Web-ulut ‘Atuncl cénd Tim Berners-Lee si echipa sa de la CERN au inceput #8 rere un mecaniem commun peniea identificeiea unica « informatie gin spatiul de dete, ei au inteles necesitatea unel scheme care sd incap- suleze In mod elegant diversele parti si care #8 posta fi extinsé in asa fel incat 38 includa o mare varietate de servill internet. Rezultatul 8 fost URL, Pentru a prezenta succint problema, un URL este un descriptor unic care poate identifica orice document (simply sau hipertext) - imagine fafied, meniu sau element de Gopher, artical Usenet, calculator sau Shiar o arhiva de fisiere ~ oriunde in Internet sau pe masina dumnes: voastré, Aceasta proprietete face ca URLurile #8 fie atét de valoroase, desi formatul lor pare, la prima vedere, putin confus $i crptie. Numele de URL poste fl intespretat ca find ugor impropriv. De multe ffi, notarea URL-urilor pe masura ce navigat! in Web va ajut8 doar la aBsirea resurselor a doua cara, find, astfel, un fel de serviclu de tip fi, Capitolul 2: URL-uri: ce sunt si cum se utilizeazé G3) XG ‘agenda pentru c6latorlle dumneavostra prin Intemet. Localizerea resurselor ~ gAsirea informatilor pentru prima data tn Internet si World Wide Web - este 0 problem& pe care o tratez mai tart, in aceasta carte. Deocamdata, génditiva la URL-usi ca la-un fel de earfide viehe entru resursele specifice din retea, Citirea unui URL Pertea poritiva este c@ formatul de specificare @ unuil URL este consis. tent in raport cu multiplele servieii pe care acesta le cuprinde, inire ete s© pot aminiti stiri Usenet, Gopher, documente Web si athive FTP. Careguld generala, un URL este compus din urmetoarele elemente servictu :// nume-gezda: port / cale-director Nu toate aceste componente apar in flecare URL, asa cum veti vedea atunci cand vetiinvata despre diversele tipuri de URLeurl specifice dlverselor servicil, Sablonul de mai sus este ined un bun ghid general Ss sider urmatorul exemple: Aetp://ww. intuitive. con/taylor/ index.html : [In acest exemplu, serviciul este identificat prin http:// (HTTP inseam. 18 Protocol de Transfer HiperText, metoda prin cere documentele Web ‘sunt trnaferate prin internet). Utiliz8nd http, precizali programului client - programul Explorer sau Navigator pe care il flositi pe calcula {orul propriu pentru 8 naviga in Web - ca v8 conectati la un document Wet. Coleuletorul gozda care ofera informatia céutats este vee intuitive, com. Partea com (numité zona) precleeeza c& aceasts locatie este uns comercial; intuitive este domeniul sau gezde, or on este numele serverului Web, adicd un anumnit calculator De obicel 840 cum este cazul de fats, nu e nevole s& specificati un port (porturlie sunt oarecum asemanatoare canalelor TV), deoarece majoritatee servarelorutilizeaz8 numere standard, predefinite, de porturi. Pe server, dorim fglerul index.htm din directorul taylor. Aceasta este, de font gira mea personals, rmstorul URL este un exemplu ceva mal complex: Ttps//#tp.cts.com/pub/wal1st/ URLul identifies o arhiva de fisiere 9 firme! Wall Street Direct (stiu intérmplator acest ucru). Va puteti de seama c& URLul indica o arhiva din Sdentificatorul de serviciu (ftp, care insearna Protocol de Transfer de Fistere, modalitatee prin care fisierele sunt copiate in Internet), erverul sin acelnsi timn anzin enanectivn nate tn te eaeCrearea Paginilor Web cu HTML 4 Observati cd acest URL specifica faptul c8, dupa conectarea la serverul FTP, programul de navigare trebule $8 se pozitionere in directorul /oubjwailst/ si s8 afigeze fgierele din acel director. let incé un exemple: néis:alt.internet.services URLul precedent permite unui program de navigare sé citeasca grupul de stiri Usenet alt. internet services; observati c& ecest exempiuy de URL este oarecum diferit de celeaite. Prime observatie este c& nu specifica o masina gazda. Atunci cand configurai prograrnul de navigare (detalile difera de la program la program), Indica, inteun fisier de preferinte sau de configurare, ce gazd8 s8 utilzai pentru accesul [a Usenet. De obicei, gazda este serverul de stiri (news) al furnizorului dumneavonstrs de servicii Internet. Drept urmare, nu sunt necesare bare inelinate in formatul URLului, deoarece programul de navigare dispune deja de aceasté informatie. De aces, URLurile pentru resursele de stir se reduc la numele serviciulu $i celal grupulul de stir. Cu ajutorul URL-urilor puteti specifica © mare varietate de servielt Internet de publicare a informatilor. Sernificatia proprivzis8 a compo- rnentelor URL difers in mod subti in functie de tipul serviciulul speci ficat, In sectunile urm8toare, vom examina in detaliu URL-urileflecérul tip de serviciu FTP prin URL Daca suntet!familiarizat cu radécinile istorice ale Internetulul gi ale retelelor premergstoare (In special ARPANET), stti deja e& una din primele uulizar ale sisternulul a fost tranaferul rapid al iserelor Intre ‘gazde aflate [a locati ciferite, Mecanisrul standard de realizare a ‘ansferulul de figiere a fos, gl este inc8, FTP. Der, in timp ce calcula toarele s-au dotat cu interfete prietenosse, FTP armas in epoca de platra. Multi utlzatorifolosese incé interfee complicate de tip linke de ‘comanda, pentru aceasta funetie vital NOTA) £2? pan ntermeit una progrem de navigare Web est mult mal ‘comod decét prin interfets de tip nie de comands, Capitolul 2: URL-uri: ce sunt si cum se utilizeaza FTP anonim Pain FTP sunt accesibile milloane de fisiere din Internet. Pe majoritatea maginilor gezdé, nu ave nevoie nicl macer de un cont personel pentru a descérca fisierele cdutate. Asta pentru c& o practica standard in Internet, numita FTP anoniim, permite otiesrul utilzator #8 se conec: tere la 0 gazda FTP, utilizind numele anonymous. Dac& vi se cere 0 perola, tastati adress dumneavoastra de posta electronica, Printe alte Lslizari, pute folosi FTP anonim pentru a obtine programe noi pentru ) ~ de exemplu, . Acest control - sau ‘marca’ HTML, cum mal este numit - comunica unui interpretor HTML (program de navigare) ca documentul este scris gi formatet in limbajul HTML standard, Exemple de interpretoere HTML ar putea fi programulCrearea Paginilor Web cu HTML 4 Internet Explorer al companiei Microsoft, program de explorere Web inclus atst in pachetul Microsoft Plus! pentru Windows 95, c&t sin pachetul Internet Connection Kit al firmel Apple (si cate este disponibil ‘gratuit sila locatia Web Microsoft; vistati http://imw.microsoft..com/ Pentru a obtine o copie), HTML, la fel ca oricare alt limba de marcare, prezint6 unele probleme, 'S8 presupunem, de exemplu, c& dor! sa includeti cuvantul Inclusiv parantezele unghiulare - Inteun document. Trebuie 88 disp: neji de 0 modalitate de a impiedica interpretarea acestul cuvént drept control HTML, Pe parcursul acestei cdi vetlInvala cum sa includet! jasemenea informatii complicate in documentele propri. Deacamdata, vel n vedere asemenea probleme, pe masurd ce parcurgeli cartes, HTML si programe de navigare Ce se intémpla daca un program care interpreteaz HTML, cum ar fi Internet Explorer, citegte un fgier care nu confine nici un control HTML? S& presupunem c& afi creat recent fislerul notyet.himl, dar nu afi apucet sé edzugati controale HTML Fisierul dumnavoastra arats| Dave's Desk Somewhere in Cyberspace Dear Reader, Thank you for connecting to my Web server, but 1 regret to tell you that things aren't up and running yet! They will be .soon_, but’ they. arent todas. Sincerely, Dave Taylor ‘Arati destul de bine, desi unele randurl par mai scurte decdt cele cu care v-ati obignult In asemenea documente. Figura 3-1 ilustreazé cum ata figierul atunci cdnd este ctt de programul de explorare Internet Explorer Figura 31 nu reprezinta deloc ceea ce af! intentionet si este probabil destut de confuzs pentru cititor. Observati, de asemence, c&, desi plasarea unui ceracter subliniere inainte si dupa un cuvant coprezints, ey Capitolul 3: Notiuni HTML de baza ) inuunele sisteme, o indicatie ca acel cuvant trebuie subliniet (soon), aceasta nu face parte din HTML, deci caracterele subliniere sunt lasate neschimbate, indiferent dec8 au sau nu sens pentru eiliter. Figura 3-1: Fisierul not-yet hrm, fird marcaje HTML, redat in Explorer SOR SE Ripert notyet html fr marcaje HTML, recat In Explorer _ Ceea ce tebuie documentull din figure 1 sunt edteva contoale ATM - anumite informal pe cate programele de explorere Webe oate vila pentru a pagina $i formata Informal contnuts Im docu ment. Informatie de formatare mplcte din figerul notyet Men gost Velabile (din punet de vedere vizuel) pentru un cttor user dor programele de navigare Web le vor ignora cevarece nu fac pate din limbajol HTML. Cu alte cuvinte, dact nel vecem un caracter tt ce Prim coracter dintro propotie,aceesta este o indicate c& prosostia fs Inceputul una nou paragra, dar dupa cum se poste vedo Toore clarn figure 3-1, ou acest este cal programelor de explore Wea Wide Web. Press " ‘@ Exemplul ilstrat tn figura 3-1 poste prea acum putin simplist. Dar, pe Asura ce vefi lucra in HTML, sunt sigur e& atunel vand vet! erede 2 «ali pus la punct un document, Intrun anume fel, vei aves din cand in nd surpriza ca documentul sa arate dferit faté de ceea ce va asleptati, atunci cénd este redat de un programm de explorere Web, Testa ntotdeeuna documentele HTML, pin veualzarea lor intrunut s2u mal multe programe de explorare Wab, pentru av8 osigura cd fetal ats corect. De esemenea, doch v6 lov de situate In core progrand de explorareafgeazs toate controsele de formate, ioe #6 interpreters, inseam 0 al dent probabil igcral cu extensia tt” no de him. Programale Web sum merginte = dale un ier ont flilvorafga exect aga eum este, Pentru rezlve probleme, prs simplu redenumiti fisierul. 2 pyDaca a Crearea Paginilor Web cu HTML 4 lai deschis, inchide-1 Ratl multe controsle HTML sunt untayi de sine stétatore, unele dn ele Se mummoste cotnd contoale de inceput ssfaret. Controle! de incepet se mnannit Sontrot de deschidere er cel de afargit se nomegie wees de inchidere Sitnte, portant dire controaele de bats este cel ustrat anterior, Heap ane Sect fptul ea informatie care urmeas ete neem Uipbalul HTML. Marcajul este de tip pereche, decl nture Rauaell un marca) de Inchidere la sfargitul documentuul, core ea la f| ga morcajul de deschidere der are adéugels o bara incinre SERIMNG Ip aceeosi maniers, daca incepetio raza cursiva (seve cu crebuig sq melinate sau italce) cu (mareajul de scriere cust) dasahnae cgncheiatl cu . Orie element situatintre marceje de se aenidete $1 cel de nchidere capata otibutulacelul merce) ere ccura Ge Trcadrare a zonei pe care dori s8o formatatieste cosa merce umese notatia blac de sec{iure). Mae satel neatents specifica, de exemplu, o barSincinetsinvere Fel 2e de bara inclinata, cain <\HTHL> sau in alts vationts, pecronen oe gaplorare nu infelege acest control de Inchidere sli ignens ne Seenifcativs, deoarece contilul artebui sf apars lata sitl dupa care nu mai urmeaz8 nimic care sa fie penta, Rasanele slateme din Internet sunt foarte cludete gl pot alge sour nts ‘ezultate speciale pentru mercajele HTML care nu sumt etic Ekitduce aminte s8inchiti orice marco} pe cee Lat deschis este, cu siguranfa, un bun obicel Woo Stgdet 4 80 ve intémpla dacs pune ghilimele in jurul controale- 1 de kemelt, dack utlizati“" te inceputul docurentees wen enat Mk? Dack at presupus c¥ se vor afisa num ghilmelole, Wee auePtate, Teebuie 8 sublines faptul e8 programele de explore Hat fosrte simpliste in ceea ce privesteinterpretares imbejons HTML: Orice veriajie de a caracterele props specication HIME ‘Graduce le © paginare diferits de cea pe care afi Intentionat-o, sou la ‘anorarea completa a cererilor de formatare, In Capitolul 3: Nofiuni HTML de baza ee) N Impartirea in Paragrafe si linii (Skee portance maroj pe care evel vd - pe care leven fast prbsbi cel mst des apesia fap easy ses ee Parara/ ne saa ine nou. Exes dherse vane ey cen dou peti grea documente Web lebie slutle utines roar ele dous marcaje

gi
, itil Dave's Desk Sonenhere in Cyberspace Dear Reader, Pe Mant You for connecting to ay Wed server, but 1 recret to tell you {hat things aren't up. and running yet GRE MITT be soon, but they aren'® tovay, > : : Sincerely, 5 & ae Daye Taylor EGara 22 Moston cum rat ext HTL precedent inten progrem de navigare, = [este [RES terserseey | cesD Crearea Paginilor Web cu HTML 4 Versiunea din figura 32 a fsterulu rats ours imbunatie fata de figura 3-1, dar unele probleme se mentin ined, na cea din urm find fptul e& primele eétevs lini nu arat8 corect In zelul lr de 8 organiea textul cét mai ing, programele de explorare Web completenz8 tn ‘mod Implicit nile eu eat mai multe cuvinte pesibil. Completarea linilor este corecta, in ca2u! paragrafulu principal al figierulu, dar primele lint ar arBta mat aproape de ceea ce dari dacs aff indica rogramulul de explorare #8 react Ia lnie nous inte element in loc 58 le plaseze in access line. Modalitatea de a trece la linie nous in HTML este mareajul de linfe noua (break):
. Ca orice marca}, controlul
poate apsrea orlunde in text, inclusv la sfarsitulliniel pe care dor s8 0 intrerupet Controalele HTML nu tin sema de tere mari sau mici, ceea ce inseamna 68
gl
(si chiar
) sunt exact la fel. Textul HTML tn care este uilzat controlul
este prezentat in continuare! Dave's Desk
Sonewhere in Cyberspace

Dear Reader,

Thank you for connecting to my Web server, but I regret to tell you ‘that things aren't up and running yet! They will be _soon_, but they aren't today.

Sincerely,

/ HTM Dave Taylor © problema nerezolvata In aceasté paginare este faptul c& informetia legats de semnaturd trebule 38 fie indentats la drenpta cu estiva ccentimett, ca Intr-o not standard de afaceri, dar in programul de navigare este mentinuta in marginea din st8nga a documento Capitotut Nofiuni HTML de baz =) Marcajultinie noua in tsierul not-yet htm! Penira a emectaprobems, pute tia mercaul de informatie rooratat: . Brel urmalor lusueseh ne eee “PRC conser toate corctererc spare dln Ae ie inlet pete 8 scoaie never teres master fils Dave's Desks Soienhere in Cyberspace Ge Deir Reader, op Thank you for conecting to my Wed server, bu \ regret to tell you me m mee thit things aren't up and running yet! They will be soon, but they arene tedey. Dave Taylor Dupé adaugarea controlului

, oi

lulu 
, ati ajuns la formatarea doris, dar
cum a aparut alta problema: textl din blocul preformatat (materiel
Gintre 
 si 
) apare scris cu un corp de liter aiferit de lip,
monospatiy (courier). Patel observa diferent in figure 3, daca vi

Corpul de itera se refer la un anumit sti al caract
Gorpal de itera se refers la un anumi sia caracteretor, vind diverseCO)

i)

   

Crearea Paginilor Web cu HTML 4

cu o anumita dimensiune gi stil. Helvetica este un corp de litera,
Helvetica 12 puncte italic este un font. Inteun corp de iteré mono:
spafiu, flecare liters are exact aceeas) lstime. Zece carectere i mic
(ittiit) au, de exemplu, exact aceeas lajime precum zece caraclere
‘m' mic (mmmmmmmmnmm). In aceasta carte se ulizeazé un corp de
litera proportional, deci puteti vedee foarte clar ca zece caractere ‘t
sunt mult mai Inguste decét zece caractere

 

 

 

 

eee cor
poe eee ee eS SS

 

   

 

 

corect, dar corpul de lterd este difeit

 

 

Motivul pentru care programul Explorer @ modificet corpul de literd din
figure 3-4 este faptul c& prograrmul de navigare a presupus ¢é textul
preformatet este un listing de cod sau alté informatie tehnic8, Acesta
este contextul cel mai urual al marcajulul 
. In concluzie, @
functionat oerecum, dar nu este chiar ceea ce afi dort. (Puteti totus,
utiliza cu folos mercajul 
 in ate situati, aga cum veli vedea rai
térziu in acest capitol.) Deocamdata, lasati salutul §l numele meu in
‘marginea din stange a ecranului, eliminand controalele 
 si
punénd la loc marcajele de paragraf 
.

Stati putin! Unde tastez toate astea? Este adecvat orice editor care vi
permite s& salvatifisiere obisnulte ASCII. Pe PC-ul meu, utilizes
RotePad, un program care este inclus gratuit in Windows 95, iar pe
sistemul meu Macintosh, programul SimpleText, dstrbuit de esemenea
‘retuit. Asigurati-va doar c& salvat figieul in format text-only si 8
utilizatiextensia de fisier ,.htmi*, astfel incét atunci cAnd deschideti
fislerul de test int-un program de navigare Web, acesta va fi interpretat
‘ca 0 pagin& Web. Anexa A este 0 demonstratie pas cu pas a procesului
de creare a unel pagini Web simple: daca nu mai putesi de curlozitate,
SErif la aceasts anexé si cititho.

 

Capitolul 3: Notiuni HTML de baza

imp4rtirea documentului in
sectiuni

Dasa vett arunca o privire atenta asupra unui document HTML complet
specifieat, veli observa c& este Impartit in dous sectiunk: cece ce eu
humesc sectiunea stationara (Informatia care of tipsrité In antet dac&
fisierul ar fio nota scrisa reala) si corpul propriuzis el mesajulul.
Génditi-vs la informatia pe care 0 gasitide obicel in partea de sus @
tunel asemenea note:

NENORAWDUM
catre
De la:

bata:
Subject:

 

‘Acestea sunt cele mai uzvale elemente de informatie de la Inceputul
lunei note, iar in continuare exlsté de obiceio rigla (0 linie) urmata de
sspajiu go, in care scrieticontinutul propriuzis al mesajulu

|n mod similar, figierele HTML sunt de obicei Imparite, din motive de
organizare, in dou8 sectiuni: antetul (sau headerul) care contine
informatia introductiva de formatere & pagini $1 corpul. Utilzati
aicajele pereche   si <200Y>  pentru a
delinita fiecare sectiune. Exemplul uematorilustreazé cum erat
fisierul notyet.htm!, dupé ce s-au adauget aceste controsle:

tL


Dave's DeskeBR>
Snewhere in Cyberspace
a
Dear Reader,


SFAD

 

Crearea Paginilor Web cu HTML 4

Recunose e8 informatile de formatare   si 
 nu adauga nimic la afigare. De asemenea, docurnentul nu
confine incé nici o informatie intraductiva despre formatarea HTML,
‘deci zona  este vids, Dacé ar fi s8 vizuaizat textul precedent
Inte-un program de explorare Web, el ar arBta cain figure 3-3, Mai
tarzu, cAnd vet! invata unele parfi mal complexe ale limbajulyi HTML,
veti vedea de ce notatia bloc de sectiune (de exemplu )
poate fi un avanta}

 

   

Co credeti ca s-arintdmpla daca as furniza informatia urmatoote unt
program de navigare Web?

“Dave"s DeskeBR>Sonenhere in
Cyberspace



 

 

 

acd presupunetc& afigacea pe ecron a exemplulul precedent va fi
‘exact la fl ca materialul spatat cu gria,ilustrat anterior (ve! figura 33),
vel dreptate,

 

Tineyl minte ca programele de explorare Web ignora caracterele Enter,
taburile si spatille multiple, etunci cand documentul este reformetet
pentru afigare. Aceasta sugerea28 c& puteti economisi mult spatiu ~ gi
pPulef{afiga pe ecran o portiune mai mare din sursa documentulul ~
enuntind pur si simplu la caracterele Enter suplimentare; dar va
recomand hotarat s4 nu faceti aga ceva. De ce? Pe scurt, serierea
documentulul Web plasand marcajele in poail logice face ca docu:
‘mentul $8 fie mai ugor de procesat ulterior. Eu am sers gla trebult 96
depanez mai bine de o mie de documente HTML, si v8 pat asigura c8,
‘curcét lucrurle sunt mal aglomerate, ou at8t vor finfelese iat putin
peste cateva séptéméni, cfd ve trebui 88 ed8ugali nele informati
sau s6 modifica continutul

Inserarea titlului paginii

Unut din tucrurile subtle (dar simple) pe care le putetl face estfel Incat
pagina dumneavoastra Web s& arate mal elevat este $2 dati un tila
Adecvat, cu sjutorul controlulul 


Pentru documentul dezvoltat in acest capitol, notyet.html, un tits
ddrégat ar fi unul care rela chiar mesajul din figer, ce in exerplul
urmater:



STITLENot Ready for Prine Time!


 

\u1e 35 ilustreaz8 cum va arate noul tly in pagina redata de progrs:
‘mul internet Explorer. Observat in special modificares de pe bare
supetoara a ferestrei (cunoscuta gi sub numele de baré de tly).

 

|| cette

 

Figura 3-5: Marcajul 



Dave's DeskeoR>
Somewhere in. Cyberspace



Dear Reader,

 ,
Thank: you for connecting to my Neb server, but T

regret to tell you

that things aren't up and running yet!

They wiT1 be soon, but they aren't today.


Page Design by Dave Taylor (taylor@intuitive.com)




E obligatorie utilizarea controlulul 
? Nici vorbs. Ca 31 alte
clemente HTML. diverse care apar in pagini Web, acest marcaj poate fi
folosit sau strit. (In paginile Web pe care le creet, am tendinfa of na
includ informatil de adress, dar mult! oameni prefers s& sibS aceasts
informatie in partea de jos 8 pagini) De acece eu numese morcajele
de tipul  evest-standard ~ sunt utile, dar nu sunt precence
Intotdeaune. Dupa cum putet! vedea in figura 36, materialul de tip

 

ys
Capitolul 3: Notiuni HTML de bazd )
i

adresd este afisat cu coractere italice, ceca ce poste fi destul de
atractiv in anumite pagini Web.

 

 
 
 
  
 

or
[rom

 

sisi

   
 

 

 

‘Pat Denby mPa eo ftivesen)

Figura 3-6: informayii  si 


Definirea antetelor de sectiune

Informatite de formatare dlscutate pans acum in acest capitol v8
Permit s8 creati documente atractive. Dar dacd pagina Curmnesvoastra
{rebuie organizats in sectiuni sau chiar in subseetiuni? Diversele nine,
{url de marcaje de formatare a subtitlurilorrexolvé aceasta silastic

Flecare nivel de subtitlu are un control de deschidere gi unul de inch.
ee. Mercajul pentru nivelul cel mai de sus este ; cel mel de Jos
{Perteu cea mal redus8 3! mal putin importanta sectiune) este ies
Pentru a specifica un suit pe niveul col mai de sus, ititeel ewte
Primul nivel de subtstius/Hi>.

‘Marcajele pentru formatarea subttlurlor vor filustrate mai bine in elts
Pagin8 decst notyet-html, deoarece acel document nu are nevoie de
Ssubttluri si este deja atractiv, Exemplul urmator este inceputel ura?
cuptins seu rezumat al unei locetii Web cu inforrnati despre filme,

<


STML€>The Coo Web Movie Database





Wel‘one to the Cool Web Movie Database. So far we. offer
[nfarmation on the many brilliant films of David Leans
S00 a Tot more will be on Tine.

 

feonuinsare)jor Web cu HTML 4

 

Crearea Pagi

Ieontindave!
the Early Years

si2>In Which Me Serve (1942)



FiIns with Sam Spiegel Product ions
The Bridge on the Riven Kwai (1957)
sti2>Lawrence of Arabia. (1962)

the Later Years

<
octor Zhtvago (1968) 

‘

-


This information maintained by Dave: Taylor







Figure 37 ilustrea28 modul in care textul precedent apare iatrun
program de explorare Web:

‘The Early Years
Ji Which Wo Serve 1942)

 

‘This Happy Breed (1989)
Films with Sam Spiegel Productions
‘The Bridge on the River Kwai (1957)
Laverenes of Aral (1962)

‘The Later Years

Doctor Zivage (1965)

Ryan's Daughter 1970)

 

Baza de date cu filme de David Lean, varlanta rezumatd

 

Figura 3
‘Cele mai multe pagini pe care le veti crea nu vor avea chiar atat de
multe subtiluri ca exemplul din figura 3-7.

Exemplul urmétor edauga cateva informatii despre unele filme, pentru
a lluste utlitatea diverselor subthur:

 

Nora)

Capitolul 3: Notiuni HTML de bazd

 




STITLE*The Cool Keb Movie Oatabase«/riTie>



 Welcome to the Cool Web Movie Database. So far we
offer

information on the many briltiant fins of david Lean;
goon, a lot more will be cn line.The Early Yearse/HI>
In Which We Serve (1942)

Go-directed and produced by Noel Coward, this film also
starred

Noe! Conard as Captain Kinross and Celia Johnson as Mrs.
Kinross.

sh2oThis Happy Breed (1948) 

Based on the play by floel Coward, this starred Robert
Newton and

agein featured Celia Johnson.

sHIoFitms with Sam Spiegel Producti ons«/H1>

si2>The Bridge on the River Kwai. (1957)
.

Produced: by Sam Spiegel, this film was ‘the first of the
Lean Blockbuster =

Fovies and featured a young Alec Guinness, WiTliam
Holden,

anda t ‘

brilliant performance from Sessue Hayakawa.

‘i2>Lanrence of Arabia (1962)

ne of my personal all-tine favorite movies, this epic
adventure

eelly established Lean as the creator of sweeping
Fanoranas. 2

‘Atunci c@nd exemplul precedent este vigualizat Intrun program de
explorece, diversele subtitiuri apar afigate cu diverse dimensiuny, ior
{nformatia care nu face parte din subtitlur apare afigat cu un font de
Up roman, féré caractere ingrogate (veri figura 3.8),

nul din lucrurile care trebule tinute minte despre HTML este c&
fonturle,clmensiunile s efectele proprivse din prezentarea finala pot
fi modificate de utiizator, pe baza preferintelor pe care acestia le
definesc in programele lot de explorare. Eu sustin ins8 ca foarte putinl
‘gameni modifica de fapt preferintele implicte, deci, daca pagina
dumneavoastré arata bine cu valorile predefinite,totul ein requl. Dacd
volerile predefinite conduc la afigari mal ciudate, cum se nants nian,
pla mal ales in Explorer, faceti experiente cu diverse valor din meniel
Preferences,Crearea Paginilor Web cu HTML 4

   

 

 

‘The Early Years
In Which We Serve (1942)

 

    
  
   
 

‘This Happy Breed 0940)

 

ms with Sm Sploge Productions |
The Bridge on he River Kwa (1987)

Lawrence of Arabia (1962)

  

 

 

 

Figura 3-8: Baza de date cu filme si text suplimentar

Rigla orizontala

Gn control HTML foarte util pentru organizarea viauel8 a documentulsi
dumneavoastra este marcajul de rigid orizontala: 
. Plasat oriunde
Intrun document Web, acest marca) produce o line subtire orizontals
afigata pe intreage latime @ pagini. Exemplul urmétor ikistrenza paging
‘cu informatit despre filme, in care s-au adaugat controale 


‘cHtMl>
“

SIITLEsThe Cool Keb Movie Database



‘

Welcome to the Cool Web Movie Database, So far we offer
information on the many brilliant fils’ of David Leans
soon, a lot more will be on Tine.



The Early Yearss/Hl>

‘
In hich We Serve. (1942)

Co-directed and produced by Noel Coward, this f#1m also
starred

Noel Conard as Captain Kinross and Celia Johnson as rs.
Kinross.

 

Capitolul 3: Notiuni HTML de baza

 

sideThis Happy Breed: (1944)
Based on the play by Noel Conard, this starred Robert
Newton end

again featured Celia Johnson

i>



The Bridge on the River Kwai (1957)

Produced by Sam Spiegel, this film was the first of the
Lean

blockbuster

‘iovies and featured a young Alec Guinness, William
Folden,

and a

Erilljant, performance from Sessue Hayakawa.

Pute( utiliza rigla orizontala de mai multe ori inteun document Web, ca
slorice alt element de marcare sau de prolectare, Utilizat judicios,
‘marcajul 
 este extrem de util pentru erearea paginilor interesante.
Figura 3.9 lustreaza documentul precedent, vizuaizat intrun program
de explorare,

 

Tn Which We Serve (1942)

 

| Tus Happy Breed (1944)

altoid cede een

 

     
 
   
   

 

Films with Sam Spiegel Productions
‘The Bridge on the River Kal 1957)

 

   

Figura

jaza de date cu filme si rigle orzontaleRezumat thous

Crearea Paginilor Web cu HTML 4

Tabelul 3-1 contine un sumar al marcajelor HTML discutate In acest
ccopito

      

 

 

 

 

 

  

 

   

 

 

Tabelul ‘Sumarul mareajelor din acest capitol

Marcaj HTML Marcaj de tnchidere Semnificajie

‘ADDRESS> =< /ADDRESS> Informatii despre adresa
si despre autor

00 <[e00> ~~Cerpul paginis HTM

ae —_ inle nous

 ‘ Informatie de formatare
HTML,

ine ine Nivel de subiitv a

cls nena _ Rigid orizontala

aT  ~~ Defineste un figierin
format

a ____Paragraf now

Re TPR Informatie preformatets

Jn acest capitol -2 prezentat o mare cantitate de informatil
Ajlnvejat majoritatea elementelor de bazd HTML si sunteti
‘aproape gate 58 Incepeti crearea proprillor pagin’ Web. Ar

deja capabil s8 reproduceli informatia formatets
(cea din capitolul de fata al acestei citi, pentru a lua cel mai
Te Indeména exemplu) Intr-un format atractiv pentns utilize
torl din World Wide Web. Capitolul 4 continu s8 exploreze
limbajul HTML, explic&nd cum se utilizeaza formatarea de tip
coractere aldine si cursive, cutn se adauga In text alte
celemente de scoatere in evidenta gi cum se pot face diverse
alte modificar in propoziti si paragrafe.

 

 

 

 

Stiluri de
text

in acest
capitol Modiicarestextulul prin sublinire, cevactere monospatiy

 

 

Facltarea navigatl folosind caractere ingrosate gi italice

glalte tipuri de fonturi
Uulzarea dimensiunilor, culorlor g1 a corpurilor de litera
Aplicarea stilurilor logice

Combinarea tuturor proprletajilor

 

Pr z2:zgivpercn intestate ale
present de xt le edacal informatie Prin stilt de
tert injlegspecicare cerecerlo ingrogaa alice $1 altor mod
Ha cae pot fecateasupr etl Capo present va estet
tone eementele principale se fedacal un dement HTP fn,
‘avira provrbaa hp Da a unt te et Pan a

 

crearea de pagini Web atractive.
Atunci cénd afi primit in dar prima cutle de creloane colorate, ai
Lovers prohahil de nastapAnit gi ail Incereat «4 folositi taste eso in
fiezare desen pe care lai colorat. Pana la urma, totusi, ati dat seama
ccSun subset de culori poate fi mult mai ull si atractiv. Avest lucru e
volabil gi pentru diversele comenzi de formatare din HTML: puteth
utliza toate comensile oriunde, dar o strategie mal bund este sa le
utilzaji acolo unde sunt cele mai adecvate. Multe pagini Web tind deja
safle prea Incarcate iar utlzarea in exces a caracterelor italice ¢1
Ingrogate face ca cversitatea sf fie gi mai neplacuta.

Cricum, vor fi situail in care veti dori s& scoatetl in evident anumite
ccurinte faze, tilur, numme sau alt gen de informafil, Vet invata cum =
faceti acest kvcru in HTML, inainte #8 terminati acest capitolCrearea Paginilor Web cu HTML 4

Mai intai, putina istorie

Proiectarea gi redactates paginilor exists de mi de ani - de cénd
‘oamenil au inceput s@ scrle, In scrleree egipteans antics, de exemplu,
existau bare vertcale care separau hieroglifele pentru a le face mai

uger de cit Inca inainte de anul 1000 dif, scrbil din toata lumea
ullizau diverse tehnici de prezentare a informatie pe © pagina, inclusiv
lluminare (prin adSugarea de aur sau argint in cerneal®, sau prin
Includeres altorimagini pe margini sau in jurul literelor) lusteat s alte
metode.

In vremea cénd Johann Gutenberg a introdus presa de tiparit, in
secolul XV, aces tipernits revolutioners cu placs grevaté mobila
interganjabils, proiectanti si artist codificeu deje diverse tehnicl de
paginare. O privre atupra Bibliei lui Gutenberg releva foptul c8 aceasta
prefigures28 multe din aspectele moderne ale aranjBriitextuli, inelusiv
caractere italice sl Ingrogate

\Va tntrebati de ce indrug vera! gl uscate despre istoria tehnoredactéril?
Eibine, e important sa ne dim seama ca textul cu caractere italice si,
Ingrogate are o semnificajie standard, unanim acceptat. Nu trebule #8
respectat|regulle Intocmal, dar daca scopul urmarit este s8: ajutafl pe
‘oameni s8 parcurga usor materialele durineavoastra Web si s8 gaseas-
<8 rapid ceea ce cautd, atuncl e bine s8 nu vita reguille de bazé,

Facilitarea navigarii folosind
caractere ingrosate si italice

In exemplele din capitolul 3, am mentionat c& una din notatile stan-
dard pentru subliniere nu furctioneazs in HTML. [n figura 3-1, am
Inclus exemplul _soon_, sperand c@ atunc! cand va freitt de un
program de navigate, cuvéntul respectiv va epéres inclinet (itellc) sau
Drezentat in altd manlerd care s& il scoat8 In evident.

na din cele mal importante carecteristit ale oric&rel tehnoredactari ~
in Web tau pe hértie - este utilizarea diverselor fontur g stiuri pentru
4 ajuta pe cititor s& parcurga materialul. De exemplu, imaginati-va
pagina de fa fr8 nici un fel de spatiere, paragrafe no, subtitur,
cuvinte cu caractere itaice sau ingrosate; ar ardta foarte pllctisitor. Mal
important, a i mult mai dificil s8 edutati o anumita informatie in
pagin& sau s8 o parcurgeti rapid, pentru a v8 da seama care este
sublectul tratat,

 

fA
Capitolul 4: Stiluri de text E73)
Yas

Imi place s8 rememorer diversele tipuri de atribute de text, imegi-
néncu-mi ca citesc materialul respectiv in fata unul auditorlu. Cuvintele
sau frazele inclinate sunt cele pe care le evidentiez in luarea mee de
ccuvant. Cuvintele sau frazele ingrogate mile imaginez ca ancore ~
celemente care ma ajut8 sa parcurg material si #6 identific puncte
spectiice. Aplicati aceasta analogie unui text seria gi veti vedea de ce
tillurle de sectiuni sunt scrise cu caractere ingrogate si nt cu italic:
titlurle ar fi mal greu de identificat daca nu ar ies in evident, Acelasl
rationament se aplie si pentru dlmensiunee textului: cuvintele mer ies
In evidenta in report cu textul adiacent seris cu ceractere mai miei

 

 

S8 vedern, acum, cum se definesc caracterele ingrogate si alice in
proiectarea paginilor Web, Formatarea Ingrogata sl Inclinaté necesita
marcaje HTML pereche:

‘+ Marcajul de formatareitalica Inclinata este , eu marcajul
pereche ,
‘= Marcajul de formatare Ingrogata este , cu marcajul
pereche 
Jata cum arat8 un scurt pasa HTML care contine atat text ingrogat cat
slindlinat:

 

Tt turns Gut , ‘the popular ‘and
fast-growing coffee chain, got its name from. the
Coffee-loving first mate in Melville's classic,
tale of pursuit and revenge Voby Dicks /I >,
although few people realize it.

Figure 4-1 ilustreaz8 cum arat8 informatia precedent inten program,
de navigare. Observatl cé am fcut o mic8 gregeala in codificare:
numele cartli Moby Dick are un marcaj deschis de talicizare (), der
am introdus in mod incorect spatii in marcajul pereche de inchidere

(= /1>). Ca urmare, cererea de a incheia pasajul ialicizat nue uate
in considerare le sfarsitul numelul Moby Dick. De asemenea, daca
vizuaizati acest text in Explorer sau Navigator, vei vedea cA fiecare
‘re un mod usor diferit de a trata o eroare de acest tip. Un motiv in
plus de 2 verifica paginile dumneavoastra Web in diverse programe de
navigarelSubliniere, caractere monospatiu s
alte modificari ale textului

Crearea Paginilor Web cu HTML 4

 

Figura 4-1: Caractere ingrosate, italic si 0 greseala

E obligatoriu ca imediat dup8 paranteza unghiulars deschis® 2 unui
marca] de formatare HTML s8 serieli codul de formatere; nu sunt
permise spati

 

Sunt disponibile 5 alte optiuni de formatare a textului in decumentele
Web:

‘oe Mareajul de sublintere este , ctu marcajul pereche 

 

‘> Marcajul monospatiu este , cu marcajul pereche  si  si ,
Textul poste fl ,tSiat" utlizind , eu marcejul pereche
.
Numele de monospagiu provine dela feptul ¢8 flecare liters dinteun
Font de acest tip ocupa exact aceeas lime, chiar dacs litera respec:
Livi ste destul de ingusth. Textul geris eu tn font menaspatia een
‘mang, de obicel, cu un text seri a maging. Acesta este un font
onospatiu. Fonturile proportionele sunt mult mal uzitate, Textul pe
care Il iit acum este seris cu un font proportional. Observatl ca
latimea literelor variaza pentru a sefacilita cities; cine! apariil ale
Itezel de exempl (il), au sunt la fel de late precum cine aparii ale
test (mmm)

 

    

 

 

E posibil s8 nu dort s& folositi marcajele  gi  prea des, datorita
posiblelor probleme pe care le implicé acestea. Programul Mosaic, de
‘exemplu, nu recunoaste in nici un fel marealul , lar unele versiuni
de Netscape Navigator ignora mareajele , De asemenea, etunci
cand creafl documente ce contin legaturl catre alte docurmente, leg’
turile sunt afigate cu o culoare diferita ~ de obicei albastru, Pentru @
scoate si mai mult in evidenta legaturite gi pentru a permite recunoas.

 

 

Capitolul

 

AA
Stiluri de text
x

tezea lor de catre utlizator de monitoere cu nuante de gil sau de tip
lb-negru, legaturile sunt afisate sublinit. Alcj spare problema maree
Jului : daca il utlizat intro paging Web, ce cuvinte subliniete
Teprezinta legsturi gi ce cuvinte reprezints text subliniat pur si simpli?
Figura 4.2 ilustreaza cler aceasta problema a caracterelor susliniate,

 

Figura 4-2: Legaturi sau tert subliniat?

Desi diferenta nu este vizibilé in figura 42, cuvéntul Starbuck repre
Zintd o referinta cAtre un alt document din World Wide Web, pe cand
tila cari, Moby Dick, este doar un cuvant sublet, Dup8 eum vedet,
sublinierea poate fl Inselatoare intra pagina Web, de aceea nu este
utlzata prea des,

Fonturile monospatiu sunt de multe ori mai utlle decat sublinterea, der
nici ele nu sunt folosite prea mult in paginile Web, Daca dort, de
exemplu, 58 simula intra gi esr ale unui sister de caleul, putets
afige textul respectiv cu marcajul monospaliu, ca in exemplul urmstor:

 

Rather than typing 0IR to find out what
Files you have in your, Unix account, you'll instead
want to type , as’ shown:

4% «B>1s

this that the-other

rovoacé sie afigarea textulul cu font monospatiu, dar conserva In
‘acelesi timp linlle ¢l spatirile originale dintre cuvinte,

ute combina mai multe controale HTML pentru a produce exact
lesirea pe care o urmériti. In figura 4:3, termenii DIR si ls aper sfigath
e test Ingrogat monaspatiuNow)

Crearea Paginilor Web cu HTML 4

 

 

Figura 4-3; impreund,  gf  produc test monospat ingrosat

Dacé lucraticu formule matematice sau aveti nevoie $8 utlizatl indict
superior si Inferior In paginile Web, exista dous marceje care ofers 0
formatere comoda, ca in exemplul ce urmeezé:

sH2>1f you could double the amount of water on the
planet — essentially HeSUB>20 ~ you'd
ever have to worry about mowing the lawn again; it'd be
under the ocean!"

Formatul rezultat este foarte atractiv sI se preteaz8 unor formule ebil
cconstruite sau generarll rapide de relati matematice, dupa cum se
poste vedea In figura 44

 

ee si = |
it you could double the amount of water oa

 

the planet -etentially H,0°- you'd never
have to wory about mowing the lawn
‘gain itd be ander the ocean!

 

Figura 4-4: Marcajele pentru india inferior $i superior in acyrune

 

 

 

Observati sici un ertificlu. Pentru s scoate textul fn evident, am inclus
Intregul pase] in marcajele de subtitlu 
. Acest iueru va mari in mod
automat textul silva afiga cu ceractere Ingrosate. Exists, ins8, 0
modalitate mai simpla de e realize acest ucru, dupa cum vetl vedea
‘mat tBralu, In acest capitol

In fine, uneor! dont s8 ardtaté unui vzitator al paginllo corecturs @
textulul, deel posibilitatea de a ,t8la" un text, afigdndut insB in cont
rnuare, Putet!fealiza acest lucru ~ In mejoritatea programelor de
texplorere Web = prin marcajul . [até cum ar arte acest lucru
inteun text sus

1a

(i
Capitolul 4: Stiluri de text
X
If you could double the anount of water on the planet
sMessentially  HeSUB>20Z ~ you'd never
have to worry about watering the lawn, again:
everything would be
Undsr the ocean!- buying a dryers. everything
would be. permanently wet!


 

Formstarea de tip corecturd (,t8ieze") funcjloneaza bine In acest caz -
dup cum puteti vedea in figura 4-5 ~ deoarece textul este destul de
mare (aminti:vé c& am utlizat artficul cu 
 pentru a obtine acest
Tuerui, dar decd textul ar fi fost mai mic, linia de talere bar fi facut
lizibil' Ca stare, asigurati-vé ca vieualizati cu atentie orice text cu
 inainte de ai da drumut in rejea.

In furcfie de programul de explorare Web pe care i tillzai, unele
marcaje HTML pot fi combinate, iar sltele nu. Combinarea caracterelor
ingrosate 3 talice nu functioneazé in anumite cazur, dar fiecare din ele
funetoneaza impreun’ cu .

 

——S|

 

Tyo could double the amount of water om
‘he planet essentially HO" you'd never
haveto worry about waterter teeta
teeicererthing reskin emer the

 

come buging
permanently wet!

 

yer everthing would be

 

 

 

Figura 4-5: Corecturl pe ecran cu ajutorul marcajulul 

Utilizarea dimensiunilor, culorilor
sia corpurilor de litera

© excensie recent® a limbajulul HTML reprezint& una din cele mai
tractive proprietsti: posiblitetea de a modifica dimensiunea, culoeres
$i co;pul de literé al fontulus utilizat. Dimensiunile fonturilor HTML
Variazé de la Ila 7, 1 find cel mai mic, ar 7 cel mai mare. Din pécate,
teste exact invers in comparatie cu numérarea dimensiunii subtithurilor,
fn care subtitlul  este cel mai mare, ier 
 este cel mal mic.

‘Toate modificarile caracteristcilor fontului se fee prin diverse variante
ale mercajulul , acestaflind primul marcaj Intanit care contine
atribate specifice, Mareajele HTML care pot avea atribute le specifics,
de obicel, prin perechi de forma nume=valoare. Marcajul  esteCrearea Paginilor Web cu HTML 4

un exemplu excelent: pentru a modifica dimensiunea unei postiuni de
text, utiliza formatarea

 

FONT SIZE*7>un text. inportant

In acest exemplu, cuvintele ,un text important! vor f alisate cu cea
mel mare dimensiune posibils 2 programului de nevigare,

Observati ca marcajul de inchidere  nu a trebuit s8 includs
etributele marcajulul de deschidere: nu a fost nevole s@ utilzati pentru a inchela textul seris eu font mare. Aceste este un
femanunt important care economiseste timp atunci cénd Incepeti s8
explorati formatéri mai complexe,

 

Dimensiunile fontului pot fi specificate in mod absolut, ca in exemplul
precedent, seu in mod relat. lata codul HTML prin care fontel unui
‘anumit cuvant este marit cu o unitate feya de textul din jurul su

AGEta ete UAT eNemahe , efectul va fl acelagi cu al marcajelor  sau
,

 

In mod similar, se poate specifica o culoare pentru o portiune de text,
prin folosirea altus atrbut al marcajulul . Numele logic este
color” gi utlizarea este imediata: secventa Sunt
Blbastrus/FONT> va afiga textul respectly cu culoerea specificats,
Exist& o mare varietate de culori care pot fi specificate prin nume gi
utetl avea un control gi mai bun al rezolutiel culorilor dacd utlizati
valori hexezecimale RGB (vol explica tehnica de identificare rosu-verde
albastru in capitolul 10) dar, pentru culorile de baz, putet lucrafard 38
V8 facet! grij In legsturd cu valorile lor RGB, specificéndule pur gi
simplu prin nume.

In legatura cu marcajele HTML care au atribute, o proprietate utilé a
limbajulut de marcere este posibiltatea specifica mal multoratrbute
In acelasi marca). Dacs doriti un text mare sl rogu, de exemply, pute
obtine acest lucru prin ¥are rosu,
Nu conteazé ordinea in care specificati perechile nume=vsloare, deci
 este identic, din punctul de vedere al
progremulul de navigare, cu  este specificarea FACE a
unvi corp de liters. Acesta este ins8 un atribut inselator, deosrece

bule s8 specificali numele exact al fontulul de pe sistemul uilizs-
torulu, ior acestea au nume diferte pe platforme diferite. De exernplu,
pe sistemul meu Macintosh, fontul standerd este , Times", der in
Wirdows 95, fontul echivalent se numeste ,Times Roman. Calcula
toorele actuele includ multe tipuri de fontuti, der, subliniez ined o dat,
hu exist 0 standardizare a numelor acestore

 

 

 

Avantaje si dezaventeje: specificati tipul fontulul cu atributul FACE al
‘moareajulul  si puteti precize ca valoare o lista de fonturl. Dace
\ret 3 fittsigur c& obtine fle Arial (un font raspéndit pe sistemele
Windows), le Chleago (un font popular pe sisteele Macintosh),
specifcat

‘tone! Faees"Arial .chicago*>Text ‘spectalTextslabs/FONT>

{in mod simile, textul se va afisa cu Helvetica Narrow, decd se poate,
su cu Arial Narrow off eu fontul normal,

Un uitim marcay s! vet! aven un axamplu care demonstreazé toate
aceste modifier ale textulu: pentru s schimba dimensiunea prede:
finita a textulul dintr-o pagina, pute utiliza  seu ceva
similar chiar le inceputul paginl, dar exists un marca) dedicat acestui
cop, numit . Utlizarea sa este exemplificela in continvare:

Comon Foods of the French
Quarter ne

You can visit Hew Orleans and have a
grest time without ever leaving

the picturesque and partyin’ French Quarter area,
particularly if you partake of some of these

fabulous Jocal foods:

Beignets — smal} deep-fried
donuts. in pondered sugar. Best with

a steaming fresh Seafcod Gunbos/
Soup that's delicious

Typically served with a side of white rice
that's best dunped into the soup directly. Skip the
chicken gumbo sone

Places serve too; the seafood is definitely better!
‘
Jambalaya —
best of all possible dinners. You'll just have
to order it so you can find out what it's about.
 ~ it's the
grease on the wheels of the tourist experience in the
French Quarter, but I'm not convinced it's as
necessary for 4 good time as the bars suggest..


Whatever you do, make sure you have FU

Ne/FONT>I

  

offees/FONT>.
NT> ~ a stenelike

  

    

 

  

In acest exemplu, ecranul este plin cu texte interesante si distrective,
Intro varletate de stilur l eulori (vezi figura 46).

      

Saar a
Common Foods of the French
Quarter

  
   
 
 

[sepa eden ertctne od

 

|] wee yo ela ere seetere FUN:

 

Figura 4-6: 0 mare varietate de culoris1 dlmensiuni speeficate prin
atributele marcajulul 

 

 

Capitolul 4: Stituri de text

Aplicarea stilurilor logice

Directivele de stil specific, discutate pind in acest moment, sunt usor

de inteles, Limbajul HTML permite si aga-numitele stilul logic, Stile

logice permit cittorilor (si programelor acestora) s8 definessca eviden
tier ale textull

Gele mol cunoscut sist loge sunt  pentru evidentere
 pentru evidntiere puernies Figura 49 eka
tn exemplar al acestor marcle

 

Figu’a 4-7: Stiluri logice in HTL

Ine

 

Plul din figura 4-7, primul punct (afigat cu caractere italice)
ste specificat prin Things are okay, lar al dellen punt
{ofisat cu caractere ingrogate) este specificat prin  ca text inclinat seu Ingroset, lar
Sele cous stiuri au semnificaiidiferte in tehnoredactare, aga cut ery
Precizat la inceputul acestui capitol. Bineinteles, suntet! liber #8 ue
proprile decial cu privite la tlizarea acestor marceje, dar eu personal
|i standardul HTML sunt specificate multe alte marceje logice, dar
acestea sunt folosite foarte rar. Pentru informaree dumnesvoastra, ele
sunt listate n tabelul 41 ~ afi putea face unele incerc&ri cu aceste
‘mares, pentru a vedea daca vi ajut la formatéile perticulere pe

«care le dori, dar veti descoper! probabil ¢8 toate sunt sinonime ea
‘marcajul de font monospaliu ,Crearea Paginilor Web cu HTML 4

 

Tabelul 4-1 Diverse marcaje logice pentru text

Marcaj de
chidere _Semnificagie

 

Marca) HTML

 

 

 

 

ite  Listing de progam
Sar oF Define de ew
Ska ___ Ten de totum AO).
  Exemplu de date introduse de 7

uzator
eo Ae teens / Abdo evo remnseUWaN12b

 

Combinarea tuturor proprietatilor

‘Aveli in continuare un exemplu de document HTML complex, vieualizet
intrun program de explorare Web. Exemplul include si meteriale
prezentate in capitolul 3.

 




STITLE*Travels with Tintins/TITLE>





<
Travels. with. Tintine/FONT>
OF the various reporters with whom I've traveled around
tthe world, including writers for UPIAP,
‘and Reuters , the ost. fascinating has clearly
heen Tintin, boy reporter from Selgiun
()



Probably the most enjoyable aspect. of our travels was his.
dog, Snowys/B>, although T don't know that our hosts
would agree! ‘



‘The First Trips Nepate/FONT>
>

After winning the Pulitzer for Adventure with Red
Rackhan's Treasurec/Im, Tintin told me he wanted @
vacation. Remembering Sone.of his earlier adventures, he
decided to visit Nepal. Early one Sunday, Twas sipping
my tea and reading the  xhen he rang me up,
asking whether I'd be able to take a break and cone
along)

 

Capitolul 4: Stiluri de text

 




Pte ght cum va arta tet precedent nt a
‘Consultati figura 4-8 pentru a vedeat pee ®

Documental din figura 4-8 este destul de atractiv, desi spatierea din
jurul actonimelor inciinate din prime frazd las de dovit Din ferieire,
Urele din cele mai recente progreme de navigere Web dedue faptul ca
f nevoie de un spatiu suplimentar dupé ultima carecter italic, dect
‘cesta devine si mai isbl. Observati, de asemenea, spatieres din jucul
foimatului <1, comparativ cu cele dous marcaje 
 pe care a trebuit
s8le adaug ulterior in document, dupa ce am decie #8 folosese
‘marcajul  pentru ami crea propriul tile de secfiune.

Tazelal 42 fer un sumar al mulpllor marcaje de formatore a
textului, introduse tn acest capitol. a "

 
   
 
 

[feeovie tins

Space ace rata,

J at wp fh

 

 

 

Te Be Tip: Nepal

| ESR oe
5 ores

 

 

 

 

 

Hn document complex s atractivCrearea Paginilor Web cu HTML 4
Sumarul mareajelor din acest capitol Liste si
ae BRL 7
Marca HTML Semniteatie
Aligcors texting caractere

Tabelul

   

=

    

   

 

    

 

am areca speciale

      

ie de evidentiere

   

 

 

aoe “S/kBD> Text de i tastotura (similar eu gee Liste de tip definitie
Shoe) Ur SgGEE o> ie one numer) neordonae (aca)
ar Fines Beep de Ste atone carecmeopecian ocenee HTN
tr Comer n ca ear HTL
Sih RASA TED Ep oped ua
aie Shiie Fagen tata ,
SenSEFONT earner eo BA 272813 pz ete ou de ite tn oe
esta ponne Sich pone cos nse ononteunenteg) reco
sae (mares incl cxped salient nves soot
ee Wiitceraaere cece eaacererovendep samen teh
Hoxie Sie abe toast inal ine saein Wes Cups ee euch eeteopol wet
siz dimensiunes textului este 1:7, cu 7, putea utilize in beneficiul propriu diferitele stilurl de liste.
era spas fn Gack oe
pane ; eh
as Soars tee og aoe Liste de tip definitie
Seas tle BOB Cia cin cele ma bgt eee in ocumenee ca ate

    

paginieste un set de defini, referinte sau indexurl. Glosarele sunt
‘exemple clasice in acest sens; cuvintele sunt lstate in ordine alfabetic8,

‘Acest capitol a dezbatut formatarea caracterelor gi lurmats de defini ele termenilor respectiv. In HTML, Intreaga sectiune
avin. Capito ese deca uno subice ma ample 2a unti gloser va fi gestionata printro list de defini, cere este
jespre formatere, cum ar ft ineluderea in documentele inclust Intro pereche de marcaje de lista de defini 
 si 

Rezumat liixsior sumersiate si marcate, precum si creerea eecl aoetel perecm de anisole detec compre a
Pr In cad‘ul acestei perechi de marcaje, 0 definite se compune din doua
Gloserelor sau oltor liste de defi ee

~ Termenul definit ()

~ Descrierea definite! (<00>).Crearea Paginilor Web cu HTML 4

lata cum se poste utlize 0 lsta de definitl in HTML, pentru a defini
anumiti termeni din genetics:

Peat


© 

“SHIA Quick Glossary of Genetic Terms

Adapted from Davkins, The Extended Phenotype

o>
allonetry
A disproportionate relationship between size of a
body part and size of the whole body.
anaphase
Foreign bodies, usually protein molecules, which
provoke: the’ formation of antibodies.

autosone
A chromosome that 1s not one of the Sex chromosones.
 si <00> sunt marcaje dependente de
‘context: nu au sens decdt decd apes in interlorul unei perechi
.

Ce se intdmmpla dacd ulilizal! 
 sl 
 fard ale plasa tn interiorul
tunel perechi 
? Din fercire rezultatul este identic cu eel din
figura 5.2: semnificatia implicit a marcajelor 
 gi 
 este consis:
tent in cadrul programulul de navigare, fle c& acestea aparin cadrul
tunel liste sau nu. Imediat vet invaja despre un alt marcaj dependent de
context, care va strica in mod cert paginarea, dacé nu i includet! In
marcajele de definite de lista

 

 

Pentru a evita situatit predefinite snorocoase" care nu sunt consistente
In toate programele de navigare, verficatiintotdeauna formetarea
HTML cu mai multe asemenea programe, Inainte de a trage concluzia
8 formetarea este corecta. De aceste situatl se pot Impledica s1
prolectantii experimentati de pagini Web: prictena mea Lisa a dezvoltet
higte pagin’ noi pentru o locatie Web existenta si m-a rugal s8 arunc ©
privire. Fam réspuns 8 totul aret8 perfect dar am fost surprins c8 2
lasat nemodificat fondul implicit de euloere gel (in eapitolul 10 v8 voi
arta cum s4 modifica culoarea de fond a paginll). Ea a fost surprinsa
de acest lucru: ultase 8 programul el de explorare Web utilizeez8 albul
In loc de gri, drept culoare implicité de fond, .

 

Capitotul

fi
Liste si caractere speciale (
Xa

Liste neordonate (marcate)

Lstele de tp defintie sunt utile, dar ipul de Iista pe care it Intainils rut
‘mal des in World Wide Web este lista marcata (numita 3 listé neordona-
18). Listele neordonate incep cu 
 $1 se nchele cu 
, lar fiecare
clement al listel este defint prin controlul 
. Formatul este similar cu
celal listel de tip defnitie, ga cum se vede din exernplul urmator:

 

Cormon Herbal. remedies include:
ae

Blood Pressure - Balm, Black Haw, Garlic,
Hawthorn.

Aniseed, Caranay,
Grindelia.

Burns ~ Aloe, Chickweed, E0der,



Rezultetul asa cum apare vizualizat ntr-un program de navigare, este
‘atiacti, dupa cum se vede si din figura 5:3,

 

 

 

Figura 5-3: 0 list marcatd

 

Combinarea celor dous tipuride liste este gi mai util Lista de tip
definite arats foarte profesional datorita carecterelor ingrosate si
Incentat tar marcajul din dreptul fiecarui element intr list@ neor-
donatd este si el de mare efect. Solutia este includerea unel liste in
ccealalta, dup& cum urmeaz:

 

Common Herbal. renedies. include:
a>
Blood Pressures/B>

(eontinuare)& Crearea Paginilor Web cu HTML 4

iene g

» Sate
© Garlice/I>
Hanthorn:
peesfle ora
| <0T>Bronchit is
we
© cuipangel ica

 

   

 

 

Figura 5-4 ilustreaza reaultatul codului precedent, care genereaz8 o
peginare foarte frumoass.

 

Figura 5-4: © list Inclusd in alt it

 

Capitolul 5: Liste si caractere speciale

 

(bservat ca om ute sree nde in cols HTML dn
ep precedent rena sulcena sete care xe sebedara

NOTA) sisi cress igor ature eanspecnr cena
Bream enaigare da ore on nse esters
Eonar, pe cre vines ne resect
Afyatea din gua 54 repress cence a dot ef bunncept
Dolete, ore cod HTH resost cee ma bund aor Goede
Uist pi interment ca 0 dr nuove Sent ves ste
lip cm in ens car,dup cur ese dene seme te
Ir ecco oer cont Putt btn leftetsentehcintanea

‘complet lista de tip definite, aga cum demonstreazé exemplul urmnator,
‘care este mult mal simpla:

 

 
 

Geemon jierbalrenedies include:

=



als

abba

sLipslack
DeeloGarlie

Hawthorn.

 
   
   

  
     
    

 

  
   

 

      

| MbsIoAniseeds/i>-
= sUISCarawaye/ Es
‘LisGrisidelia.

Exemplul de mai sus ilustreaz8 pericolele si problemele ridicate de
limbelele de descriere de tipul HTML, Deoarece puteti realize anumite
‘operail in mai multe felur, trebule 68 vé punet!intrebarea: sunt intot.








‘sH2>Enchilada. Sauce


1, Heat @ large saucepan and saute the following

ingredients until. soft:



‘Large onion, chopped



2. Add 2 quart of water. 


3, Sprinkle ina quarter-cup of flour.

CW, sazz it up by adding:

Ue
‘
Two tablespoons chilis powder.
Tws teaspoons. cumin 2
0ne teaspoon garlic powder
pe

| Ge Finally, add a teaspoon of salt, if desired.
| 


Whisk as sauce thickens; then simmer for 20 minutes.



. Lista se Inchele cu marcajul de
inchidere . Fiecare element al liste! se defineste printr-un marca)
«lp.

 

 

A
Capitolul 5: Liste si caractere speciale ee)
x

 
  
  
  
   
  
   
 

Sa EI
Enchilada Sauce

[Eke

 

Figura 5-5: O refetd usoard de sos enchilada

‘Acum intelegeti ceea ce am vrut $8 spun anterior in legaturd cu
‘marcajele dependente de content: specifica elementele unel liste
ordcnate prin exact acelagi marcaj HTML, ca gi in cazul listelor neor-
donate: 
. Dacé nu specifica ce tip de list dori, cum poate sti
programul de navigare ceea ce intenflone{i? Semnificatia marcajului
 depinde de tipullistei in care se géseste.

 

In continuare, este prezentata reteta corectats, avand codul HTML,
Tesciis, astfel Incét s& beneficieze de avantajele listelor ordonate:

“
HEADS |



Enchi lada. Sauces/H2>
<>
Tvo tablespoons virgin olive ol]
| Large onion, chopped
 :
‘Two tablespoons chiT! ponder

Two teaspoons cunin

-

(eoncinuare)Crearea Paginilor Web cu HTML 4

{eontinuare)
Finally, adé a teaspoon of salt, if desired.


Whisk as sauce thickens; then sioner for 20 minutes.




Rezultatul (ved figura 5:6) nu numnal c& este corect, dar este mult mai
atractiv deoarece programele de navigare Web indenteaza automat
listele de acest tip, Drept urmare, elementele istel din interior sunt
indentate de dou or: prima oard deoarece fac parte din lista numero:
tnté sie dout oars deoarece epartin unel iste din interior eltel iste.

 

=e

jae Bl

 

| enchitada Sauce

 

 

In celal timp, indentare

   

 wiltims chestiune despre liste: exist un numar de mercaje HTML
rmostenite din vremurile sts6vechl ale proiectart Web. despre care se
presupune cf ofers posibiltai suplimentare de formatare a istelor, In
special marcajele  si . Din pacate, acestea nu au fost
hiciodata implementate pe scard larga si sunt minimalizate in mod
explicit in specificatia HTML 4.0. Pentru a genera text pe mai multe
Coloane, cea mal réspandita metods este ulizarea tabelelor (8
cchenar, ege cum vom vedea in detaliu In capitol 9.

 

 

Capitotul 5:

 

te si caractere speciale

 

Caractere speciale

ind

Not

ocumente HTML

Daca suntefi un eititor atent, atf observat poate o eroare tipagratica in
fejeta ilustrata anterior. Retetailinstruia pe bucatar sa foloseascS,
Ingrediente pentru un saute, dar cuvantol er fi trebuit scris cu accent
(seute), Limbile strdine contin diverse caractere speciale, numite
dlacritice, care ebuie uneori folosi inspec dace ae nent st
prezentati materialul in alta limba decat engleza. In mod deloc s
28tor, pute! include caractere speciale In codul HTML, utilzénd mar:
caje speciale, numite entitayi sau referinte de entitay

 

 

 

‘Spre deosebire de marcajele invatate pana acum, entitatile pentru
ccatactere speciale nu sunt incluse in poranteze unghiulare (<>); ele
Incep Intotdesune cu un ampersend (8) si se terminé cu punct st
virgul8 (5). Cele mai multe entitai! sunt oarecum mnemenice, dupe
cum reiese din tabelul 5-1

 

    

Tabelul 5-1 Caractere speciale in HTML
Caracter Cod HTML Semniticajie
& ‘ampersand

   
 
 
 
 
 

ral mic (less than)

 

_mal mare (greater than)

‘a mic cu accent ascufit (acute)
‘amic cu accent grav

‘2 mic cu accent clreumflex

2 mic cu doua puncte (umlaui)
‘2 mic eu inel (ring)

   

 

2 mie ligaturat

 

 

Nu toate programele de navigare pot afige toate aceste caracte
special programele compatibile cu sistemele Windows. Verificai
ceracterele in céteva programe de navigare insinte de ale utiliza in
prostllle redactari de pagini Web.

Pentru a crea o majusculé a unuia din caracterele din tebelul 5-1, serie!
prima literé a marcajulul de formatare ca liters mare: 80s] ash;, deCrearea Paginilor Web cu HTML 4

exemplu, va produce litera mare O t8iats, ca in cuvantul COPENHAGEN
(care trebuie tastat C80s1ash;PENHAGEN). Pentru a produce o vocalé
iferts de 2 cu un seman digcritic, modificati prima liter8 2 marcajulul
respectiv. Cuvantul Munchen, de exemplu, poate fl specificat corect

{nteun document HTML prin #Buum) snchen,

   

Crmatorul exemplu contine c&teva expresil din limbi stréine, pentru &
vedea cum functioneaz8 aceste marcaje de formatare:

The following are formatted using Bitibagti for
boldface, and alt;{agts for italics.



Is there a cafbeacutes nearby?





I want to eat dinner.


‘Y una mesa por mafntilde;ane, por favor.






 

 

Eu nu vorbesc de fapt franceza, germans, spaniolé sau itelions prea
bine, dar v8 garanter cA setul precedent de Intrebsri il va deruta pe
‘proape orice chelner din Europal Figure 5-7 ilustreaza ren
formateri precedente,

 

atul

    
   
   

 

 

Figura 5-7: Exemple lingvistice in Web

Exist8 unele probleme legate de caracterele internationale permise in
ccodul HTML de bazs, nu cea din urmé fiind absenta unor elemente
‘Situatia se imbunststeste ines continuu: nu mel suntellipsiti de
semnul de intrebare invers (2), de exemplu, daca vretls& scriet in

 

Capitolul 5: Liste si caractere speciale

sponiols. Utizati fiquest; pentru a insera acest caracter in documen:
tele dumneavoestrs. Daca vreti s8 specifica valute, puteti codifice lira
stelind (£) gi centul (¢) prin Bpound;, respectv, Acent;, Daca trebuie 38

drepturi de copiere, HTML permite acum simbolul de
opsight (2)! smbolut de meres inregistat (8) prin Bcopy; Ares,
care nu erau permise in versiunile enterioare.

 

Spatii de afisare

NOTA

Ocntitate de tip caracter special, care este utilizatéfrecvent in prolec-
taree paginilor Web si care nu reprezinté nicl un earacter sl nu se
‘afigeaz8 pe ecran, este spafiul de afisare (non-breaking space). Spec.
fica: prin Anbsp;, acesta va permite s8 fortati spat multiple intre
clemente si s8 asigurati faptul c& elementele de pe ambele laturi ale
acestor spatii sunt Intotdeauna adiacente, indiferent de modul in core
feresstra este dimensionata

lata un exemplu tipic:Iucraji la © pagina Web in cere doriti s8 aveti un
ccuvant separat printrun numar de spatii pe ambele laturi. Prima
Incercave a fi

Glifiite! anterteare’ Zr important eH

 

fife iter dare?

 

Daraceasta solutle nu va funciona: spatille suplimentare vor fl igno-
rate de c&tre programul de navigare. Modul corect de specificere este:

GilvintS)ahteriBare: Bibsp; Bhdsps" snportaNt” ghbspHanbsp!
cuvinte:ultertoare,

 

‘care va genera exact ceee ce afi dorit

Am realizat 0 copie a intregi liste de seferinfe de entitattincluse in
specifcatia HTML 4.0. O putefi vedea la http://www. intuitive. com/
coolweb/entittes.hemt.

 

Comentarii in cadrul codului HTML

Dect afi petrecut cova timp lucrand cu limbaje complexe de marcare,
recum HTML, stiti c& posibiltatea de a include informetli despre
evolitio documentului precum gI alte comentarit vé poate ajuta s8 v8
‘orgenizati si s8 va reamintiti decsile de codificare, atunci e&nd revenitt
ulterior Ia acele pagin

 

Din fericire, HTML permite un format specific (daca nu cludat) de
Rotate pentru comentaril in cadrul documentelor. Orice text incadratCrearea Paginilor Web cu HTML 4

de elementele  este consideret un comentariu si este
Jgnorat de programele de navigare Web, dup cum puteti vecea din
exemplul uemater:


~ Ultima modificare: 21 Februarie 1995 - >
STITLE>Enchi ada Sauee

sl- — insptrat dintreo veche reteta pe care an auzit-o in
Mexic, desi trebuie sa recunosc ca va fi foarte diferita,
deoarece chiar si faina din Juarez si din alte locurt
este altfel decat in State... - —>

Enchilada. Sauce


 

 

 

Atunci cénd modifie refeta de sos Enchilada prin adsugares comen-
{arilor de mal sus $i introduc textul intr-un pragram de navigare Web,
acesta nu efigeaza comentarille, dup& cum se poste vedee in figura 38
(care arate exact ca figura 58),

 

Bnchllads Sauce

 

 

 

Comenterl din belyuy, dar nici UNUT atisat

 

 

Utlizarea comentarilor nu este obligatorle, der dact v8 iansati in
cconstruirea unui spatiu Web complex care oferé multe documente,
simpla datere o fiecarul fisier se poste dovedi de neprefut. In ce ma
Priveste, introduc uneori glume sub forms de comentatli ia paginile
‘mele Web, doar pentru a vedea dacé oamenii se uitd vieadata 1a codul
sursal

‘Tabelut 5:2 contine un sumar al tuturor comenzilor invatate In acest
capitol

 

 

fA.
Capitolul 5: Liste si caractere speciale @3)

‘Tabelut 5-2 Mi

 

faje HTML discutate in acest capitol

 

   

 

 

 

 

 

 

 

 

Marej de

Marca) HTML __Tnchigere~ Semniteaye
Specie ee
a Die" tste de up aatnve
 __Somenteruincodui Tm

Flecare capitol de pana acum a dezvoltat gradul de profun.
Zime si de sofisticare a deprinderilor dumneavosstra tn
Bri ns acest capitol af invafat dversele pur delste

Rezumat fois ‘de combinare - impreuné cu multe mareaje de

formatare - pentru a obtine rezultete atractive. Capitelal
urmBtor este foarte amuzant. V8 ardtlegatura care lipseste ~
aproape textual. Bazet pe explicarea formatelor URL cis
, pentru text preformatat ~
Va permite s& specificat atimea cémpului utiliza, dupa cum erat
exemplul urmator

 

it's a hot, ‘hot day-in the park and Tots of peopie
are wandering around without clothes on! Here's a
ext picture of what I'm talking about:


  
    

CENSORED. |


Sorry, but until al] the releases are signed,
{ean't Tet you see this picturel

 

{In exemplul HTML precedent, am introdus In mod voit o eroare: em

spzcificat c@ textul preformatat trebule redat in poteze 8 lungimes

‘maxima a flecarel till de text este de cinci caractere (WIDTHS).

Aigerea propriu.zis8 arata foarte clar c& programul de explorare ignor&

‘aceesté comands de formatare, aga cum se vede din figura 6-1

aw
reas ESE

     

 

 

 

Figura 6-1: Un marcaj HTML cu atribute1

Crearea Paginilor Web cu HTML 4

Codul precedent se dovedeste a fi un excelent exemplu al problemelor
de care se lovesc proiectanti de pagini Web, Informatile de formatare
pe care le specifica In codul HTML pot fl interpretate atfel decat va
‘asteptati (dupa cum este ilustrat in figura 6-1) sau chier deloc,

Din fericie, majoritatea celorlalte maresje HTML functionesza corect
act specificat aribute adecvate, Puteli specifica orice dori In inte
rorul unui marcaj HTML de formatare: programul de navigare interpre:
tea28 numai acele alribute care au sens in contextul acelul marca). (V8
ultetichier distra pe aceasta tema. Ce-ati ice de un marcaj 
? Acest marcajfunctioneazd identic cu
marcajul 
, deoarece atributul aragreph este ~ dupa cum va asteptati
~ far8 sens. Pe de alts parle, se constat® c& 
 chiar
funetionenes, der despre asta vorn discuta mal térzluin aceast3 carte!)

[Nu pot exista spat intze < si numele marcajulul, day, in interiorul
acestuia, elementele sunt separate prin spafl

Referinte catre alte pagini Web

Marcajul HTML principal pentru referinte externe este ). Acesta trebule s& conjind atribute
Fara atribute, marcajul  nu are sens si nu afecteszé formatarea
Informatiei. Urmatorul exerplu va aves ca efect aflsaree far formatare
2 textulul

‘Reuil putett vizita Casa"AlbaCasa Albac/A> on Tine!

Linie precedents de cod HTML va fi efigat8 de un program de explorere
Web eu poriunea dintre marcajele  (marcsjele de encora) colorata
Jn albastru 5) subliniaté sau evidentiats Intro alta forma. Informatia
‘care ar trebul inclusa intre ghilimele este URL-ul paginii Web pe care
dori s8 o refer. De exemplu, URLul Casei Albe este

http:/ /nww.whi tehouse.gov /

 

Capitolul 6: Addugarea referintelo1

 

C problema devenita clasica in codul HTML este utllizarea simbolurilor

5 Fotunite pentru ghilimele; serverele Web nu sliu ce semnifies acestea
Verificati daca ghillmelele din documentele dumneavoastrs Web sunt
toate drepte: "25a" si nu “asa”. Acelasi lucru e valabil si pentru apos
toate: verficati e& toate apostroafele din codul HTML sunt drepte (°) si
1a rotunjte(*)

 

Exemplul urmétor contine o legatur8 hipertext activa, corect speci
a, cotre pogine Casei Albe:

 

‘Acun puteti vizita  on Tine!

 

ow nb tehouse.gov/

Urmatorul exemplu este met consistent si combin8 diversele formatari
HTML pentru a construi o pagina Web interesants si atractiva








<001>

Ip cyberspace, you can virtually’ travel anywhere, Of the
various places. that are fun to check out, however, few
are as interesting as the hone page for the

Federal Bureau of
Investigatione/A>

FedWorld, a great
starting point. for Government. Research

 SmalT
Business. Adzinistration

sLI> A HREF=*http://wen.ssa.gov/t>Social Security
Adninistration

  5
SLI> 

 

(continuare)Crearea Paginilor Web cu HTML 4

 

Iconctiare)



Figura 6-2 araté ca pagina precedent8 este destul de atractivs, atunci
ind este vizualizat& Intrun program de explorare. Aspectul neplacut s1
confuzia provocata de URL-uri sunt ascunse cu gti eittori pot
efectua clic pe numele une! agenti pentru a se conecta direct la aces
agente.

  

==

 

Government Site on the Web

 

 

 

Figura 6-2: Locatil guvernamentale in Web

Observati in figura 6-2 c& prima legsturd catre Agentia Stetelor Unite
pentru Dezvoltare Internationala este un URL complex, avand spec.
ficate o cale si un nume de pagin8. Observafi, de asemenea, c@ textul
White House de Ia ineaputul poginis Web eats acum evidengia $1
subliniat, reprezentand so legatura Web real

Injelegerea aceste sectuni din capitol de fap este un extraordinor
as Inainte in invatarealimbejulul HTML. Dup8 ce tnvd{ati=8 consti
ancore, vei in masurd s8 constrult cuprinsuri Web cu puncte de start
pentru explorarea celot mai interesante locur din Internet

Der cum putet refer! informatil care nu sunt continute intrun
document Web? Urmatoarea secfiune vB aratd acest lucru,

Referirea informatiilor non-Web

Pentru a indica un material care nu este un document Web, folositi pur
sisimplu un URL adecvat, aga cum s.a specifica in capitolul 2. Dac

 

 

Capitolul 6: Adaugarea referintelo1

©

li, de exemplu, ca FedWorld are o locatle FTP, pute cree un URL
cctre ea, dupa cum urmeszé:

‘Ftpi// ftp. feaword:aoy/’ i

Putetiapol include URLul th codul HTML, ca veloare diferité a unul
tribut HREF, in forma

A HRer=e
FedWorlds/A>

  

tp. feduorld.gov/*Arhiva de Fister

Exemplul urmatorilustreaza codut HTML discutat In sectiunea prece-
denta, caruia i sau addugat locatia FTP FedWorld si locatia Gopher
Comisiel pentru Protectia Consumatorilor:

iTS
‘
Visiting the White House and Other Government
Sitese/TITLe> g

      

‘you can virtually travel anywhere. Of the
various places that are fun, to check out, however, few -
aretas interesting as the hone page for'the<)

A’ UREF=ht tp: //niw whi tehouse-gov/*>hhite, House.
sh2>Governsent Sites on the Webe/ié>

sib

SLI> Federa] Bureau of
Invest gat ions/Ar :
hHREF="ftp://ttp.fedwor|d.gov/*>The Feckor1d rite
Archivee/A> a

she SA HREF=*nt2p://mnfednor)d,g0¥/*>Fediorlé, 2 great
Starting point for Governnent.Research :
ste: ck Hr

for, Literacy- oe
‘Is  : pene
“
Agency for International Development (1)s/As 0

: 25 (eonuinuarey

 

 

 

ney (aie nL SO on len nat itte

 

 

 

surfaceCrearea Paginilor Web cu HTML 4

 

Ieontiniace
 

 <2 HREF="gopher: //cpsc.gov/"U-S. Consumer Product
Safety Conmissione/A>

 "



 i

 

  

In programul meu de navigare, codul precedent arata aproape identic
cu versiunea precedent, cu exceptia faptulul ¢@ sunt lstate daus
felemente nol (vezi figure 6-3). Acest exemplu subliniez® una din
alittle reste ale limbajului HTML: toate ancorele (referintele hiper-
text), indferent de tipul informatiel indicate, arata a fel inte paging
‘Web. Nu apar pictograme draguie in éreptul locatilor Gopher, arhivelor
FTP ete. Paginile contin seturi uniforme de referinte catce alte puncte
din Internet care contin sesurse interesante, valoroase sau distractive

 
  

[trousers

 
   
  

Government Sites on the Web

 

Figura 6-3: Care tocol sunt ue tp Gopher?

{In capitol 1, figura 1-7 v-a ardtet cum puteti cadifica diversele tipuri
de informetie fn format HTML. Reiau aici aceeas!figur8, sub numele de
figura 64.

 

1 Binatone cscs
cee ia

1 tna ne onde

+ mun i exc
1 es

Figura 6-4: Un exemplu de legaturi nor

   

2
‘Acum puteti aprecia complexitatea ascunss gi surpringétosre a figuri
Ilustrata de urmatorul cod HTML:

 K
STUTLE>*Multi-Service. Trayel Destinations on the ‘iete/
TITLES

 

sHomulti~Service Travel Destinations on the ‘Net

Drop me 2 notel

i>

Gopher

<> 3
sh_HREF="gopher://gopher. loc. gov/">Library of
Cengress. Gopher’ Service,



zip to the Whole Earth
"Leetronic. Link.
Icontiouare}Crearea Paginilor Web cu HTML 4

icontinare}
erectiati “cle
aici pentru a-mi trimite un mesa).
In loc de aga ceva, legstura este integraté in mod delicat gi transparent
in text

‘=H HREFS*Aat1EoF tay oro InELAEtVe.Com*>Dtop me &
note!

Incercatis8 eviiaifolosireaetichetelor de genul Clic alc! pentru
referinfele hipertext; paginile Web atractive se objin prin integrarea
creativa, semnificativa si neinsidioas& a legaturilor In text

 

 

URL-uri relative

Posibilitatea de conexiune cu surse de informatilexterne ¢i alte locayi
din Internet repretints, in mod evident. un mare setViclu pentru proiec-
tant Web, dar dacs va opr lel gi nu invatali mal mult, veli putes
vvedea doar o jumatate a tabloulut. Singurul marca} pe care mai trebule
‘5811 asimilati este modul de referite al allor documente de pe serverul
propriu,

Dest paginile personale au adesea un format simplu, similar exern-
plelor din acest capitol (cu alte cuvinte: cateva paragrafe despre
ppersoana, poate un grafic sau dou, si apaiolist8 de local favorite din
Web), locatile ceva mai complexe gi sofisticate au un numar de
documente Web diferite, Aceste local includ legsturlle corespun
zBloare c&tre alte documente din aceeasi locate, astfl incat cittoll pot
ttece cu uguringé de Ia un document a altul.

Exist un mod simp unul complicat de a refer! documente Interne
(documentele de pe serverul dumneavoastra). Modul complicat se

 

Capitolul 6: Addugarea referintelor...

 

bazeazs pe exemplele precedente: punet! in evidenta URL-urle com:
plete ale fiecdrel pagini si utlizati acele URL-usi ca marcale de referings
hipertext. Modul simplu de referire # unul alt document de pe serverui
dumneavoastra consta in specificares doar a numelui de document
(sat a cBii $1 numelui), far8 nici o informatie despre prefixul URL. De
exemplu, dacé aveti o pagin8 de inceput numita hone. htm gio a douse
agin’ numite resune.html in acelasl director de pe server, ati putea
crea urmatoarea legaturs

oi" Wel Gone’ to™

 

esti tian "SF ead ay

(Observatie: Pedantil ar folos! bineinteles codul HTML
PBeacute; sunkeacute; in loc de resune.)

URLurile relative functioneaza pe beza faptulul ¢& programul de
avigare edauga numele maginil gazda si calea paginil curente la
fecere referint& (cu alte cuvinte, daca pagina dumneavoastra Web este
le acresa http://wwn.col lege.edu/joe/hone.html si existé o rele
int cBtre un URL relativ de forma A HREF=research html, atunch
referinta propriu-isa construita de browser atuncl cdind va sol

pagina respectiva va fi http: //ww.col lege.edu/Joe/
research. html).

 

 

Dace dori, puteti modifica prefixul predefinit al legsturilor din pagina
dumneavoastra, utilizand marcajul . De
exemplu,  ve
face 2a toate URL-urile relative s& fie rezolvate de masina gazda alt-
server in loc de masina www,

Poate doriti s8 s& pune la dlspozitia eltitorilor mal multe fiiere de pe
serverul dumneavoastra gi doritio manier8 rationalé de a le organiza. 0
structurd ierarhizat8 de tip director poate fi un avanta] considerebil.

'S8 presupunem c& dezvoltalio locatie Web pentru un magazin local de
delicatese. In plus fet& de pagine de bazs, dori s& furnizafi diverse
Informatii despre sendwich-urile ¢! supele disponibile online, Cu géndul
|e dezvoltarile vitoare, af! putea opte pentru organizarea informatie!


© STITLE>Dave's On Vine Deli
‘
‘
elcone to the Virtual World of Dave's On line
Delit
Sandwich Choices:
Turkey on 3
|v croissant 
Ham and Cheese
Veggie el sght

Soups of the Day:
Pub
Tonato

Corn Chowder
“


Please order at the
counter



 

 

 

Capitolul 6: Adaugarea referintelor... Gi
X

Neva pagina gazda virtual& cu delicatese (pe care obignuitii Web-ului
© numesc root, sau prima pagina pe care vistatorl o pot vedea otunch
‘cénd au ajuns la o locatie) va fi formatats conform celorilustrate
ancerior in figura 65,

Desi nu o puteti sesiza, codul HTML contine o inadvertents. Pentru a
Intelege problema ~ care este destul de freevents in documentele
complexe de gerul celui de fata - analizati ce se intémpla atuncl cand
Cineva doreste mai multe informa despre supa de rosli si orez, in loc
dde supa simpla de rosil. Ambele referinte indies aceeasi paginé secun-
ddar&: soups/tomato.hm, dar acest lueru ar avea sens doar dact aces
Pagina ar contine informal despre ambele supe. Sunt ganse ca pagina
s8fle doar despre supa de rosil, ceea ce jar Idea pe lubitorl de supa de
ro$i gi orez (una din favoritele mele) putin descumpénit

Dac& un utiizator Web ajunge la pagina de delicatese si doreste 38 efle
‘mei multe despre supa de inte, de exemplu, ar putea efectua clic pe
legatura hipertext Lent]. Utilizatorul er vieualizn apoi pagine soups/
lentil nem, care oferd informatii despre supa si care include poate
© imagine grafic8. Dar cum ati putea edauge 0 legatura inapoi le
pagina gazds de delicatese? Odservati codul urmator, acordsnd atentie
sporité ultimelor eéteva ln

 

 

aiTML> a


‘Lenti1 Soup: A Cornerstone of the Virtual
Deli ‘ :






It will come. as no surprise to regular patrons of the
Virtual Deli that:our lentil soup has quickly becone one
of the most popular itens, With its combination of six
different lentil beans. sone succulent organic vegetables
and our carefully filtered fresh spring water, a hot bow!
‘of our lentil. soup on a cold day. is unquestionably one of
life's pleasures.

We'd Jove to tell you the recipe too, but ne feel like
you really need cone in and try it for yourself.

<> 2

stoWe Also Recommend: 
a veggie sandwich to acconpany.

iR>

“A HREFS*



 

  

 

/deli-html">Back up to the rain menu.SFA)

Crearea Paginilor Web cu HTML 4

Atunci céind viitatorif locate! virtuale cu delicetese ajung la paging
creat de textul HTML anterior, su deplaset cu un nivel mai jos in
structure lerethica de directoare a serverulul,f&r8 $8 stie acest luctu.
URLurlle din document ne spun Insa ce se intdmpla. Meniul principal
este ..delt.htn]. Sandwich-ul recomandat alaturi de aceasta supa se
afl intr-un alt director - de aici specificatia sa de director de forma

+ ./sandwi ches /. Observell figura 66, pentru a vedea cum arata
pagina respectiva intr-un browser.

 

 

Lentil Soup.

 

 

 

 

 

 

 

Figura 6-6: Supa speciald de inte

In Ustingurile precedente putefi observa utilizarea adreselor relative de
fisiere, De exemplu, "../del4 html" urcd un nivel in sistem de fisiere
pentru a identifice pagina delshtml. Aceast8 notatie faciliteazé codifl-
ccarea HTML, dar trebule s8fiti constient de aparitia unor probleme
atunc cand deplasafio pagina fér8 a deplasa restul fisierelor.

 

 

‘A avea URLurl mai scurte este un moti suficient pentru a utiliza
‘URL relative in prolectarea paginli dumneavoastra, dar exista un
altul gi mai bun: locatia Web (colectia de pagini si imagini grafice) este
‘mult mal portabila de la sistem Ia sistem, alunci c&nd se utlizeaza
‘adresarea reativa

$4 presupunem cé aff Inchiriat spatiu de la Best Internet Communics-
tlons gi e& adresa paginli gazda este http://www. best..con/-nyacct/
Flecare referinta absolutd are deci aceast8 adresA ca prima portlune,
astfel incat imaginea grafiea myface.gif din directorul de fotografi este
‘accesibild prin URL-ul http: //waw.best .com/-ayacct/photos/
nyface.gif.

Ce se intémpls dacé v8 inregistrati propriul nume de domeniu peste
‘cateva sSptimini i doriti ca toate referintele cBtre domeniul
www.best.com s& dispara? Daca atl folosit URLuri absolute, va trebui
8 editat flecare referintA din flecare fisier HTML - 0 sarcing destul de
neplacutd. Pe de alté parte, dacd ati foiosit URL-ur relative, in care

 

 

Aa
Capitolul 6: Adaugarea referintelor... €3)
‘as

fotografia ar fi fost referits prin photos/myface.oif, afl putea muta pur
si simplu intregul set de fisiere si Imagini grafice si acesta ar functiona
far8 nici o modificarel

 

Tabelul 6-1 contine un sumar al marcajelor HTML descrise in acest
capitol

 

 

 

 

Tabelul 6-1 Sumar al marcajelor HTML din acest capitol
z Mareal de

Mafeaj HTML ___Inchidere _Sernnificagle

~ <[i> Marco) de tip ancora

 

 

HREF-urT Referinia hipertext

In acest capitol ati nvatat cum s& include! legaturlcatre alte
Jocetit din World Wide Web si din Internet. Ati invatat, de
fasemenea, cum 38 organizati un set de documente Web in

ReZUMALE  Girectoare vsor de manevrat i cum s& specifica, cu efort

minim, alte documente de pe serverul propriu. Cepitolul 7
este dedicat referintelor interne din documente, care v8
permit #8 includeti un cuprins le inceputul unul document
Web de dimensiune mare. Se explica si modul de utllizare
marcajelor interne din documente, ca legatur active ce
permit selturi la pozitl specifice dintr-un document Web.Referinte
interne in
cadrul
documentelor

Definirea tintelor intrun document Web

uacest, Adaugarea legaturllor catre {inte din cadrul paginilor Web

capitol

Salturl in cadrul istelor orgenizete
Legaturi cate tinte din documente externe

 

  

tran anumtoe en acelay ddcument sau inten docurment fest de

 

 

Definirea tintelor intr-un
document Web

‘Am arStat in capitolul precedent c@ marcejul de tip ancors  este
arcajele HTML de bazé din aceastd carte care v8

primul dintre
leat atribute. Observat| ca In loc de un format de

permite s8 spi

 

   

 

 

Capitolul 7: Referinte interne... a)

{cenul , care ar fi fost mei consistent cu celelalte
arcaje HTML intélnite pind acum, formatul marcajului ancora este
. Acest format este utll deoarece unele marcaje com:
Flexe, in special comenzile de includere  imaginilor grafice, au zect de
Variante. Imaginativa un maccaj de tipul : . Valoarea poste f
rice seevents de caractere, numere sl semne de punctuate, dar va
recomand s8 va limita lao strategie de tip mnemonic in atribuires
numelor, de genul section] sau references. Unele programe de
navigare impun ca toate caracterele din ancort #8 fie liters mii. deciCrearea Paginilor Web cu HTML 4

ar trebul s8 testati aceasta restricjie nainte de a dezvolta un document
complex, sau s8 V3 limita la tere miei pentra a evita orice problems
potential

 

Urmatorut exemplu ilstreazé cum ar ardta un set de marcaje dintrun
ocument ce contine recomandari de proiectare Web. Ancorele sunt
construite pe Deze numelui recomandari si a numsrulus specific al
acestela, spot fi referte ca legaturl catre restul documentulut
Observafic nu exist spatil in numele ancorelor:

“
“I>MEB: DESIGN GUIDELINES«/HI>


oD

apoRule #ie/t>
Understand the intended users and uses of your Web
site then focus the design and Jayout around their needs
and interests.  :
 .
o> me
SA NANE=* rute2*>
| .
Be sparing with graphical elenents.
15/0
Oe

E ;
‘
Pages should load within no nore than thirty seconds,
“including all
o>
Seo s
A NAME=*ruled*>
wininize colar palettes.
 £
oes
| SR NAMES utes!

 

   

 

   

  
 

   

 

 

ia

Capitolul 7: Referinte interne...

\Vaualizatintrun program de navigare Web (vesi figura 7-1), documen-
tel precedent arats ca o lista atractiva de recomandari de prolectare
Deoarece ancorele sunt destinatil in cadrul peginii curente si mu
legaturi edtre exterior, textul dintre  31  nu este scos fn
eetidenta In niet un fel atunci céind este afiget. Totusl, deoarece definitia.
unctulut de destinafie este un marcaj de ip ancora obisnuit ~ desi cu
ae otribute decat HREF ~ trebule inchis ea orice alt marca] pereche,
Pentru'a avea un marcaj corespunzator  pentru flecare encoré cu
‘ume. Deoarece textul nu este scos in evident8, puteli plasa marcajul
 imediat dup defintia punctului respectiv, cain verianta . Versiunile intiale ale imbsjului HTML selicitau ea 0
peteche de marcaje s& contina neepsrat ceve, deci vel intlai destul de
freevent formatari de genul celor de mai sus.

Ceca ce am realizet in acest exemplu nu este numai adaugarea lege
turilor catre flecare recomandare de proiectare, ci i adaugerea unei
legaturl cétre inceputul documentulul, care ar putea fifolosita ca

legatura rapida cétre inceputul paginii, din orice punct din document.

Observati introducerea noului marca) 
. Textul dintre
marcajele 
 si 
 este indentat in bloc (adic&
Indentat cu un teb, atat fa}& de marginea din sténga cat faf8 de ce
din dreapta). Eu utilizes destul de mult 
 In paginile mele
Web si veti ajunge la concluzia c& acesta este un marcaj de indentare
de uz general, care va fi un instrument util de lveru in proiectaren
eginilor Web. Alt marcaj nou, , centiearé orizontal mate
Haul din pagin8. Von discuta despre acest marca} in cepitolul 19.8 Crearea Paginilor Web cu HTML 4

Adaugarea legaturilor catre tinte
din cadrul paginilor Web

Corespondentul unei ancore in HTML este marcajul de formetare care
defineste sa[tul sau legature activa din cadrul documentulul. Aceasta
teste 0 Varionta a mareajului  pe care o stit deja atributul necesar
este 6 alt referinta hipertext de tip HREF, URLul find inlocult de deta
aceasta cu numele ancorei, prefatat de simbolul diez (#.

De exemplu, daca ancora la care dort sa va conectati este specificats
prin go to the
guidelines

Atunel end se creeaza documente Web atractive, scopul este de a se
‘evita fraze de genul cele| urmatoare:

 

    

C1ick here to see the
guidelines.
In loc de aga ceva, incercati s& integral seferinjele In text Intrun mod
natural, cain exemplul:

 

SGSAPHRERS FaUdeT Hee "SvestaReuae Tineke /A>

(© modalitate frecvents in care at) putea utiliza ancorele cu nume este
ccrearea une lini! succinte de sumar la Inceputul decumentuli
‘Amintifiva ¢@  va crea un font mai mic, deci ar trebui
18 vedeti Imediat ce se intémpla aici

A NAME="guidel ines">
“
| -
| Stone ‘size-z>
Rule 1
Rule 2 |
Rule 3 |
Ka. hrefetruledstule.&

ce

‘

coed

Rule #1:
aS [continuare)

 

 

 

 

Capitolul 7: Referinte interne... G3)

ontnuare
Understand the intended users and uses of your Wed
site then focus the design and Yayout around their needs
ind interests. 





Rule #2:

Ge sparing with graphical elenents.



sbi>

“A NAME *ruTe3*>



“Pages should Toad within no more than thirty seconds,
‘including all. graphical elenents.



ou



 

 

DirBoaule #4:
‘
 :
-

‘Acest cod HTML extinde pagina precedents, astfel incét s& ofere
Ltilzatorilor un mod foarte simplu de a sari lao recomandare specifica,
‘950 cum ilustreaza figura 7-2, fara afl nevolti s8 deruleze pagine.

     

eis eee ieeroesin as Sen ene ee
‘WEB DESIGN GUIDELINES fi

 

 

 

 

 

 

Figura 7-

 

: Recomandiri plus o lst de salturi rapide plasata la inceputCrearea Paginilor Web cu HTML 4

Pentrw a infelege un ot med de utlizare @ referinfelor interne, exe:
rmine{i exemplul HTML de mai jos, care ar putea inlocul introducerea
prea scurta din exemplul precedent. Observalic& legaturile contin mult
mel multe informati gi ge integreaza mel natural In prezentare:

“
=A NANE®" top>
“WEB DESIGN GUIDELINES


Jinile the number of web pages that are available on line
increases every day, the quality of these pages seems: to
be declining, with more and sore people (and programs, to
be fair) violating basic design guidelines. There are a
“variety of reasons involved, but one that's coon is @
Simple lack of experience with layout.

Some ‘design rules might seen obscure, Hike
“ minimizing the color palette size,
“which 5 clearly specific to the World Wide Web, but
others, suchas being sparing with
“graphical elésents desta
Lee
The, ost important idea ts: that “FouTcoLoRecneeinaced
“Web“pages. start with good content rather than:
Ewith goad’ form, layout or design’ The desian_stiould
[Sprig from the content and, the information therein.

 

 

    

 

Vizualizate intr-un program de navigare, recomandarile de protectare
Web sunt destul de placute la vedere gl ugor de navigat. Toate leg®-
turile active ¢l informatie deepre ancare sunt nrcunee in mod adecvat
sau suficient de subll,astel incdt eititorul se poste concentra esupra
‘materialulul in sine (vezi figura 7-3).

Ceca ce ilustrez In acest exemplu cu recomandari de prolectare este,
de fapt, o implementare a notelor de subsol i a citetelor din articole,
La inceputul acestel carjl am explicat c& hipertextul este 0 extensie
Jogieé a stilului nostru actual de scrlere ~ cu remarc!intre paranteze,
definitt de termeni pe margine, nate de subsol galte elemente simi
lare. Hipertextul reprezinta Ins8 mal mult decst simple legaturi de lun
document le elt, iar limbajul HTML va permite s8 ereati toate aceste
teferinfe in cadrul aceleiasi paginl

 

 

 

‘WER DESIGN GUIDELINES.

 

       
 

| Semi ati
Sordi tats bly

 

 

 

 

Figura 7-3: Comentaril despre proiectare cu lista de reteringe

Pentru @ ne Intoarce putin n timp, pe vremea c&nd savantit au intre-
vvazut pentru prima daté necesitatea citarilor in munca de cercetare,
pentru a sustine si explica provenienta enumitor puncte de vedere si
‘dei, ceea ce ef au imaginst este surprinzator de apropiat de ceea ce
puter realize asthzi eu ajutorul documentelor Web. Dac& sunteti
Eurpring de ceva intun asemenea articol, sau dac& articolul vee
deschis apetitul pentru o tratare mal extinsa a sublectulu, putet
tfectua clic pe citarea respectiva. V8 deplasali apo! instantaneu leo
tectiune de referinge, ar cltarea respectiva este aflgatt fn partea
fuperioaré a ecranulul, pentru a putea vedea de unde s& obtineti
informatisuplimentare,

Figura 7-4 ilustreaza ce sar intSmpla daca ati dor! mal multe informatit
despre regula a dou, referta in document prin legature

Banane

Banana ‘este unul din fructele cele
mai exotice dar si cele maf usor de cunparat cin lune.

 

 

‘Sursa HTML pare destul de rezonabila, dar comportarea rezultaté nu
este cea pe care o asteptat!: utilizatori care sar la marcajul "banane”™
vor avea textul ,Banana este ..” ea prims linfe din fereestra progr

‘mulut lor de navigare; subtitul 
 va fi cw a linie in afara eerenulu

© strategie mult mai bund este inversarea celor dous elemente, dupa
cum urmeazs:


Banane

Banana este unul din fructele cele mai exotice dar si
cele mai usor de cunparat din lune,

Testa! intotdeauna documentele Web inainte de a le da drumut in
lume. Atrag etentia cét se poate de serios esupre acestui lucru, Proble
‘me subtile, cum ar fi amplasarea marcajelor de tip ancor8, sunt gregeli
lasice ce pot i intélnite im anumite pagini Web, altfel, destul de
pretentioase.

Salturi in cadrul listelor organizate

Ancorele si punctele de salt sunt folosite frecvent gi pentru ai ajuta pe
cititori sa navigheze in liste de dimensiuni mar, eu informatisortate
alfabetic. Sé consideram urmatoarea redactere simplé a unel aaende
telefonice:


|
Section shoreéut:
| SAUIRERS"ea-c5A-c]
A HREE=*46-h"5[0-H.
SATHREF=*#1-1">[1-U]  -
[H=N] 
ESACHREES"#0-5°>[0-S]ea> ">
ESAHREF=*#t-2"> (T-2]
[SHR>A-Ce/Aoe >

 

     

   

 

 

eontinuare)

  
  
   
  
  
 

 

 

Capitolul 7: Referinte interne.

Benson, George (x5531)-
Coleman, Ornette (x5143)-

Coltrane, John (x8544)
D-He/R>-
Dorsey, Tom (x9412)

EN ington, Duke (13133) 

Getz, Stan (x1222) 

HODEA’ NAMER*|-1"51-Le/Aoe/ a>
Jackson, Milt (x0é34)

Laffite, Guy (x5358) 

4-Ne/Ao-
Yonk, Thelonious (x3333) 

Noone, Jinny (x5123) 

‘SH2>0-Se/hs

Parker, Charlie (x4141) 
deterson, Oscar (x8983)-

Reinhard®, Django ” (x5351)

eHt>T-2s/H2>
Taylor, Billy (33321) 
Waller, Fats. (x1321)


 

 

 

 

Desi codul HTML din exemplul precedent este complex, figura 7-5
‘rat8 nu numei c& rezultatul este atracti, c $i e8 este 0 modalitate
lis de prezentare 2 informatie,

i

MN

 

t
Figura 7-5: Agenda telefonica a Insttutului de JazzCrearea Paginilor Web cu HTML 4

V8 puteli da seama cat de complex poste deveni un text HTML, daca vi
imaginoli cd flecare element din lista de telefoane este de fapt o legaturs
etre pagina gazda a persoanel respective sau alt material relevant aflat
tundeva in Web. Fiecarelinie de informatie afigata de programul de
navigare poate fi rezutaiul a patru sau chier cine lini HTML

Legaturi catre tinte din documente
externe

‘Acum, dup ce vali familarizat cu conceptul de salt in interiorul unul
singur document, va veti bucura $6 aflatic& puteti aduga notatia de
forma tancora sila sférsitul orie&rul URL, pentru a face ca aces
legatura sé refere direct un anumit punctancoré din document!
respectiv

 

Sa presupunem, de exemplu, e& pagina cu recomandatrl de proiectare
Web ar rezida pe un sistem numit www, intuitive.com gl e8 URLul
complet or fi http://w. intui tive.com/articies/design-
guide. htm. (Chiar aga gi este. Incercatil)

  

© vizits fa aceasta pagina araté c& exista diverse marcaje de tip ancoré
fn codul HTML, inclusiv referinga #highl ights de la inceputul doc
‘mentulul, care v8 permite sa sari direct la cuprinsul de bez8. V8 puteti
lega, dinteo alts pagina Web, direct la acel punct, ca in exemplul
uurmator:

 


FONT: SIZE*6>Wlat Nakes ‘a Good Neb Page?



read the guidelines thereine/a>.




US

besign for your intended usersBe sparing with graphical elementsc/A >
Pages should lead in Tess than 30
seconds

Hinimize color palettes

Neb sites should always be content.
centrice/A>

sLIvsh_ HREF="http://wm.intui tive,con/articles/design=
guide-htmlfrule?*>dne qualified. visitor is worch a dozen
‘anonymous. browsers

Pages stiould constantly be new and. up
to-date. 

 Lview Pro: hitp/ me. 1view.com/

Imagini GIF animate

‘Trebule facuta o mentiune specialé despre aga-numitele GIFurl
animate, Acestea se bazeazd pe 0 procedura foarte simp, asems-

Capitolul 8: Adaugarea de iniagini gratice.

 

natosie cu cea care stdtea la baza caleidoscopurllor de odinioars: 0
secven}& de Imagini grafice cu treceri line de la una la elta poste ft
rulata in aga fel incét s& apard ca o imagine animet8. De fapt, aceasta
‘este gltehnica de redare a filmelor. Dacé afi privit vreodata un cadru de
1018 cirematografics, stij c& este vorba de o imagine statics. Urmarifi
Insa imaginlle statice cu o vitex8 suficient de mare gi vefi aves iluzia de
migcare si viata.

Putet!abtine imagini GIF animate din diverse surse, in special din
pachelele arhivate cu imagini de tip clip-art gl de la locafille Web listate
fn acest copitol, dar putet! crea Imagini proprii cu unele pachete
software de enimatie de tip shareware. Pentru platforme Macintosh,
recomand GIFBuilder, lar pentru Windows 95, sugerez #8 Incercali GIF
Construction Set. latd locatile lor din Web:

= GIFBullder: :

http: //iawwn.epfl .ch/Staft/Yves. Piquet/clip29i f-hone;
Gi fBuilder htm) : : paeene me

‘© GIF Construction Set:
http: //www.mindworkshop,con/alcheny/aifcon-html

Includerea imaginilor in paginile
Web

 

Includerea imeginilor intrun document Web este imediatd - utilizaji
‘marcajul de formatare  (imagine). La fel ca marcajul encora ,
marcajul IMG are un singur atribut esenfial, SRC=nimegrafic i, la fel
2 rigia rizontals 
, nu are marcaj-pereche pentru inchidere,
Pentru a include imaginea din fisierul banner.aif. codul HTML ar fi

ERG aS

 

 

 

   

‘Atuncl c€nd avet! un fisier GIF, utlizati controlul  pentru a insera
{cel filer in text. $8 presupunem c& am un figier numit black-box.gif
Pe care vreau s&l utlizez ca element grafic initial in pagina mea Web,
Exemplul urmator arata cum ar aparea acest fiser intnun document
HTML:

  

Lear
ee
ee eke
Si eee sea

    

      
          

 

  va permite s& specificatt dh
ctribute. Singurul atribut care trebule obligatoriu s8 apard in mar
 este 0 specificare a fsierului surs8 a imaginil, de tipul
‘SRC=nunef ister. Figura 8-1 ilustreaza secventa HTML precedenta,
‘tunel cénd este vizualizaté intrun program de explorere.

 

  

 

 

Imagine grafca specifica, dar nu incarcata

 

Casta mies din figura Bl, care confine un patrat rogu (m8 r09. atl, in
‘aceasta ilustajie) si un x in interior, nu este Imaginea pe care am vrut
138 0 includ, co indiealle din partea programulut Internet Explorer
‘rat8nd c8 $2 specificat o imagine graficd prin marcajul  care nu
‘fost Incdreats. In acest coz, imaginea nu a fost incarcata deoarece
‘am scils gregit numele figlerului grafic, specifictnd black-box. off si loc
de black-box gif. (Ati remarcat?) O gregeald de acest gen este un alt
motiv intemeiat pentru a teste in mod extensiv paginile dumneavoastra
Web, inainte ca alti utilizator s8 le vititere.

 

 

Pentru a corecta problema, am scris corect numele fsierulu. Figura 82
slustreaza pagina Web rezultata atunel cénd toate informatille sunt
Inedreate corect. (Pare mult mal atractv deca cea cu imagines
neinesreata, ce zicet?)

 

 

    

THE DARK BOX

Welcome to the Dark Box

SESS Tomer me ia

 

 

 

 

 

Figura 8-2: Pagina Web Dark Box

 

Dumreavoastra dispuneti poate de o conexiune Internet de vitez’
‘mare. dar aminti-vé c& mul oameni sunt limita la conexiuni foarte
lente prin telefon (dial-up) cu viteze de 28.800 baud eau - doamne
fereste! - chiar mat micl. Utilizatoril serviellor online Prodigy, America
Online sau CompuServe pot avea acces le pagini Web, dar perfor
man} pot fi foarte reduse. Graficele meri conduc la un volum mare
de date care este transferat catre ulizatorgI, de aceea, iat mai mult
timp in cazul conexiunilor Internet lente, Avei{ in vedere intotdeauna $i
foptulc& mult utliztorl sar pur si simplu peste Incarcarea graficelor,
dac& acestea nu sunt esentiale pentru infelegerea paginil.

 

(© regula empirics spune c8 flecare 1K de Imagini grafice conduce le ©
secunds timp de Incércare de o secunda pentru utllizatorii de conexiuni
dial. Decl, atunci cfd creatl Imaginl grafice, merit® £8 v8 uitaf la
The: Dark Box.

 :

Dare you continue? 



, chenarul elbastru ar dispirea. Vom mat
discuta pe aceasta tem@ ulterior, deci fii pregatif

 

 

Alternative pentru programele de
explorare Web de

  

ip text

esi cele mai eunoscute programe de navigare - Navigator si Internet,
Explerer - ofera suport pentru o mare varietate de formate gratice,
{existe #1 un program important de navigare Web, numit Lynx, cere este
proiectat pentru display-uri de tip text: Lynx este intlnit cel mat adesen
be sisteme UNIX, in care utilizatoril dispun de conexiuni telefonice.
Chiara viteze foarte mic! de conectare, Lynx permite multor utilizetor!
8 navigheze in Web gi #8 se distreze.

Dar programul Lynx nu poate afiga Imagini grafice, Ca urmare, este
Permis un atribut suplimentar al marcajului “IMG>, special pentru
‘aceasts situate, Secventa magics este ALT=text-alternativ. Ceea ce
apare pe post de text-alternativ este afigat in situatia in care ulilizatorul
‘nu poste vizualize imagini sau opteaz8 pentru eliminarea ine&rcéri
raficslor, pentru a accelera navigarea In Web (aproximativ 10% din
Utilizator! fac acest lucru in mod eurent, dupé unele estimarl pe care
leam vazut)/Crearea Paginilor Web cu HTML 4

Pentru a injelege de ce este necesar elementul ALT=, urmariffiguea 6-4,
care ilustreaz8 cum se vede pagina Dark Box din figura 83 In
programul Lynx,

    
     

 

 

 

 

 

——— |

Figura 8-4: Pagina Dark Box afisat8 de programul de tip text Lynx

 

Usiizatorul se offs in fata unel probleme evidente: cum s& r&spund la
Intrebarea pusa? De aceea trebuie s& Include intotdeauna informatit
‘semnificative In atributul ALT. Exerplul urmator araté cum 0 usoar8
‘modificare 2 codului HTML face ca pagina s8 deving clark pentru un
Utilizator care dispune doar de un program de tip text

year? 
> dor din sxpes
‘lent propre, aceste i lula pe utilzston sti dea seema despre co este
Yorbain paging (ert sibine) Incerearea este factorulchele penteve
Srv cum s8 optimizat acest proces in cadul peginl dumnenvonsea,

   
 
 
 
   
   
 

 

 

 

 

Figura 8-5: Pagina Dark Box - versiune text

 

   

iniere a imaginii

‘Mergetila prima sectiune din acest capitol i studiat figure 8-3. Pit cu
‘Stente slinferea relativa a textului Dare you continue? eu pictogramele:
YES si NO. Textul este alinit Ia baza pictogramelor si arata foarte bine.

Dar ce sar Intampla dac8 oti dor o alta aliniere? Sa decd utenti
diverse alinieri pentru grafice multiple? Vi puteti astepta la un al treilea
‘atribut al marcajulul de formatare , ALIGN, care vé oferd un
control precis a alintei(=: €rearea Paginilor Web cu HTML 4

Aliniere standard

  

et ein standard sunt ALLGKtop,ALIGN-mi de
ALIGN=bot ton, In mod implicit, imaginile si materialele adiacente sunt
alinjate a baza imaginil, aga cum se vede in figura 8-3. Urmatoatea|
secventa HTML exemplifies eceste tel optiuni de aliniere:

 


“Ha>AT i gistope/He> "©
pare jou’continue?’¢/h>
Be careful! This takes courage! (ALIGN=t0p)




‘. Una din optiunile noi va permite s& specifi
atimea (WIDTH) $1 inalyimea (HEIGHT) graficulu, ineinte ca acesta s8
fle inesreet, ceea ce face ca documentul 88 fle redat mal rapid pe
‘ec-an, chiat inainte ca graficul s8 fie recepilonat. Valorile sunt specifi-
‘cae in pixell, dupa cum urmeazé:

   

 

 

 

Exemplul precedent va rezerva pe ecran o caset& de 200 x 350 de
piseli pentru graficul respectlv, ceea ce-va permite afigarea paginil,
Inclusiv a intregulul text, Inainte chiar de receptionarea imaginil de la
serverul Web. Aceasta permite cititorulul s8 Inceapa imediet cltirea por
tlunli de text a paginii Web. Fifi ns atenti cu aceste atribute, deoarece
ddazé in cealitate aveti un grafic de 100 x 200 de pixeli, programele
Navigator si Explorer vor scale imeginea pentru a o Incadra in spattul
‘de 200 x 350 de pixell, facdndo sa arate destul de ciudat.

Un alt atribut pe care Lam menfionat mat devreme tn acest capitol este
BORDER (chens poate fifolosit cu mare efect: v8 permite s&
specifica lajiniea exacta a Cliensruful din jurul unet Imagintlegator8,
[att un exemplu:+ Cfearea Paginilor Web cu HTML 4: +

sh HREF="left'>

| SAHREF=*center*>
‘pSALUREF="right*>
Stee eee mation

[ SA Hees tbencentecesetHG. Sice"box oi BDRDER-OS
IeS/SENTE REY z

Graficul rezultat este afigat in figura 8:9, Observati c& specificaree
BORDER imi permite sa Indic migearea urmatoare recomendata prin
simpla emplasare a unul chenar albastru (sau gr, pentru figurile din
‘acenst8 carte) in urul patratului respectiv. Prin acelagiatribut am
anulat chenarul elbastru din jurul butoanelor Yes g1 No, iustrate mal
devreme in acest capital

    

 

 

 

 

 

 

 

2¢-t0e In Microsoft Internet Explorer

 

Alte doua atribute care, in opinia mea, sunt utile pentru alinieres
Imaginllor sunt VSPACE gi HSPACE, ale controland epatiul vertical gf
orizontal din jurul fiecarei Imagini grafice. Sa considerém un exempla
de aliniere la dreapta sila stange. La sfigare, textl incepe de la 0
distents diferté fat& de marginea din stanga, funcje de lajimea graf-
Ccului, Cu ajutorul atzibutulul HSPACE, pot rerolva aceast& problems,
specificénd un num&r diferit de pixeli ca spatiu orizontal dintre grafic $i
textul adiacent, dupa cum urmeszs:

 

   

doesn't have
ed/in. the Mac

   
 

      

caligsretults nthe csTeschTontc/oe on
[Stpsinpletext application being used, if possible,

4
Capitolul 8: Adaugarea de imagini gratice.... (4

 

   
  

[Gh Vaca FHn8 Wine tha wit
aha ata yeep
ie ie

        

Sisco ie ee
scattigeectonustantnstcseutos

 

 

ming Etidig en wpa soe SienSpangnitae ta
ea ta Lid ie a oc

 

  

SPACE corecteazi allnlerea graficd

 

Un tucru mai putin evident care trebule abservat in figura 8-10 este
faptul c& HSPACE edauga numsrul specifiat de pixel vzi pe ambele
lateri ale graficulul. VSPACE face acelagi lucru pe verticela. Dacé
‘specificati zece pixeli de spotiu vid deasupra unui grafic, vei obtine
2ec8 pixeli de epatiu vid gi dedesubtul imaginll, © siternaliva = dace
dorfi cu adevarat un spatiu gol doar intr-o parte a imaginil, nu in
‘amandoua ~ este s8 adéugati spajul vid ca parte « graficulul respect.
In acest moment, aff invajet cum 88 evefi un control real asupra afigarit
docimentulul si putet!Incepe prolectarea unor pagini Web tractive.
Dartrebuie s8 mai mentionez un etribut de formatare, inelnte de @
Incepe 88 folositi diversele optiun! ale marcajulul .

 

 

 

Dact facet! diverse experimente, veti constata c8 in situstia in care
Impuneti ca textul s8 curg8 In jurul unul grafic de dimensiuni mari,
‘este greu 58 deplasati un anumit material sub graficul respectiv.
‘Marcajele 
 31 
 provoacd treceree la lina urmatoare din zone
: CLEARS, De exemplu, utlizji 
 pentru o
deplasare in jos, atat ct este necesar Incdt s8 se ajunga ls margines
din stanga, 
, pentru deplasare in jos pén& cénd
marginea din dreapta este libera, sau 
 pentru deple-
sare in jos pind cénd ambele margini sunt libere. Cel mai adesea, veti
intélni forma 
.

 

Combinand toate aceste atribute suplimentare, lat o lectie despre
pictogramele specifice Macintosh:

   

 

 

 

J AlT the filess: applications, and information needed to
“run and maintain the Macintosh operating. system and 211
© the goodies: therein, The tiny-Mac icon inside the folder

  

   

7 Ease

 

Figura 8-11: Lecfia despre pictogramele MacintoshCrearea Paginilor Web cu HTML 4 3

Cateva exemple din lumea reala

Aceasta sectiune trece In revista unele opfiunl interesante legate de
lfafice gi redactare, pe care le-am utiizt in diverse proiecte de pagini
Web. Toate paginile exists gi online, dacs dorifi #8 le examinati per
sonal, dar aici puteti beneficia, in plus, de esistents.

Trivial Net

Prima noastrd oprire este la pagina gazdA Trivial Net, o locatie dedicata
Ccunostinelor elementare despre calculatoare, pe care eu si amicul meu
Kevin Savetz em proiectat~o pentru a ne amuza, Scopul meu in cadrul
aceste locatil particulare fost ca Interfatas@ fie foarte directa,
atractiva gi 58 se incarce repede. Veti vedea In listing c@ am ultlzat
frecvent marcajul 
, conform celor discutate anterior: alc
Puteti vedea cat de util este acest marca) pentru a departa textul de
‘marginile pagini

NOTA) vitor ncine steno oct ieret i adres:

htpp://mmw. trivial .net/

 

 

  

  

‘The Online Edition...

fore Crs a nee

doin the Nailing List

 

Figura 8-12: Aruncat! o privce la Trivial Net

 

Capitolul 8: Adaugarea de imagint grafice.

 

 

Putetl vedea pagina respectiva in figura 8-12, lar ceea ce urmeazé este
sursa HTML a acestei pagin

iitui>
P