specIal Creaţi uşor şi rapid propriul ~ Căi diferite către acelaşi rezultat ~ Optimizarea codului s ~ Soluţii gratuite pentru pagina web HTML se poate trece la includerea ima- grame gratuite care vă pot fi de un real 3 Editorial ginilor şi asamblarea structurii site-ului. folos, indiferent dacă vă ocupaţi de web 4 Cuprins Aflaţi din acest articol cum se face acest design sau de programare web, şi cu atât 5 CuprinsCD lucru şicare sunt formatele de imagine ce maimult dacălefaceţipeamândouă. pot fifolosite. 50 Apacheafacutpicioare 28 Paşifinali Instalarea unui server pe o staţie de lucru 6 Elementedebaza Unsiteesteoconstrucţie arborescentă rea- nu este neapărat anevoioasă, dar în anu- Realizareaunuisiteapresupus întotdeauna 1izatăcu fişiereHTM sau HTML. Acestea mite situaţii nu e o posibilitate viabilă. acumularea unor cunoştinţe. Procesul de trebuie stocate într-o structură de direc- AplicaţiaServer2Govăscuteştedebătăide învăţarenu seopreşteînsădupă finalizarea toare cepăstrează logicasite-ului. Plasarea cap, putând fifolosită pe orice mediu de primei pagini web, standardele noi, tren- fiecăruitipdefişierlaloculpotrivit simpli- stocare. durile precum şi necesităţile determinând ficăfinalizareasite-ului. perfecţionarea continuă. 54 Procesaregratuităaimaginilor 30 Mairapidpeaceeaşicale Dacănudoriţisăcheltuiţibanipeuneditor 12 Evoluţiabrowser-elorweb Odată cu vitezele de acces la internet şi grafic precum Photoshop, dar aveţi totuşi Programele de navigare pe internet fac dimensiunile documentelor HTMLtind să nevoie de o aplicaţie capabilă şi flexibilă, parte din viaţa noastră şi cu greu ne-am crească,graţie complexităţii paginilor web. soluţianu poatefidecâtGIMP. mai descurca astăzifărăele.Săne uităm în Existăposibilitateaoptimizării codului,fără » urmă pentru avedeacareaufostetapelede a renunţa la funcţionalitatea crescută a PRACTICA parcurs înevoluţiabrowser-elor. paginii. 56 Tips&tricks 32 Aceeaşitemă.altărealizare Celemaibunetips&trickspetemaHTML, O alternativă lapagina web structurată cu CSS,utilitare pentru homepage şi comerţ Conţinutulfnainteadesignului ajutorul tabelelor este împărţirea prin electronicaufostadunate deCHIP Special Dacă vă propuneţi să creaţi un site, este intermediul diviziunilor. În acestarticolvă înpaginileacestuiarticol. bine săaveţirăspuns laoîntrebare simplă, prezentăm modul de realizare a temei de genul cui seadresează acesta?După ce noastre cuajutorul diviziunilor. 61 DouăversiunipeacelaşiPC răspundeţi la această întrebare vă puteţi Ceicecreeazăconţinut web,trebuie să-Işi gândilaplanificare. 36 Sitedinamic testeze.Pentru evaluareaîn maimulte ver- Doriţi sămăriţi performanţa site-ului pro- siuni de browser, aflaţicum puteţi instala 18 Structurasite·ului priu? Utilizarea scripturilor PHP în con- IE6şiIE7peacelaşicalculator. După discuţii la modul general despre strucţia ultimei variante a site-ului nostru » tendinţele actualeşiplanificareasite-urilor, estecelmaibun exemplu înacestsens. SERVICE asositmomentul sătratăm tema concretă, aplicând câtevadin celeprezentate anteri- 40 Dinamicăsuplimentara 62 Internetpentrutoţi or. Cum putem face ca la o nouă încărcare Conexiuni provideri, beneficii,iatăînacest conţinutul paginii web să se schimbe articol câteva chestiuni despre care mai » REALIZARE automat? Răspunsul este dat de paginile doreaţisăaflaţipentru aalegeceamaibună webdinamice,careauînspatebazededate caledeafiprezenţi îninternet. FonnatareaHTML cepermit fieafişareaînpaginăainformaţi- După schiţarea machetei, următorul pas ilorlazi,fieexecutăcăutăriîn arhivă. 64 Tânărwebsite.cautgazdă constă în transpunerea acesteiaîn practică Menţinerea unei pagini web pe eternele » folosindHTML şiCSS. PROGRAME plaiuri alewww-ului presupune un culcuş sigurşirapid îninima unui server.Iatăcele 46 utilitaregratuitepentrudesignşiprogramare maibune ofertedegăzduire web,atât con- Înacestarticolvăprezentăm oseriedepro- tracost,câtşigratuite. CUPRINS CD CD-ulinclus poate fiutilizat Înconformi- tate cu parametrii definiţi În standardul Philips-YellowBook.Editura nuÎşiasumă responsabilitatea asupra eventualelor pa- Discul ataşat acestei ediţii a revistei gube provocate de utilizarea CD-uluiÎnalţi parametri decât ceistabiliţi În standardul CHIPSpecial reflectă conţinutul menţionat anterior. acesteia, cuprinzând aplicaţii dedicate lucrului cu paginile web. NOTĂ Interfaţa CD-uluiCHIPSPECIALeste con- cepută să ruleze optim pe o placă grafică Desigur, nu puteau lipsi nici aplicaţiile A cesuportă minim orezoluţie de 800 x600 Imnăsura posibilităţilor, am încercat să destinate prelucrării grafice şi machetării. şioadâncime aculoriide 16biţi. vă punem la dispoziţie cât mai multe Noi am propus Gimp pentru editare şi Deaceea, nu este recomandată folosirea din instrumentele necesare aplicării XNView pentru administrarea colecţiei acesteia Într-un mediu ce nu oferă mini- cunoştinţelor învăţate din articole. Ală- de imagini web, datorită combinaţiei de mul necesar! Interfaţa poate fi rulată atât sub Windows 95/98/Me, cât şi sub Win- turi de clasicele aplicaţii, v-am pregătit o viteză şi funcţionalitate care se apropie dows NT/2000/XP. serie de exemple către care sefac trimiteri destul de mult de soluţia Adobe, fiind Dincauza multitudinii deconfiguraţii, re- din articole. Cu ajutorul acestora, veţi totodată o soluţie gratuită. dacţia CHIPSPECIALnu Îşi poate asuma putea face teste şi veţi avea posibilitatea nicioresponsabilitate Îneventualitatea În care apar probleme Înfuncţionarea inter- de a deprinde mai uşor tehnicile aferente feţei şiaaplicaţiilor. Programele careau in- fiecăruia dintre acestea. Desigur, aplicaţiile şi paginile web nece- trat În componenţa CD-uluiCHIPSPECIAL sită servere pe care să ruleze. V-am pre- au fost testate şi selectate cu grijă În Aplicaţii utile gătit ocolecţie de pachete tip server, foar- redacţia CHIPSPECIALT.otuşi, redacţia nu Aveţi de ales între mai multe editoare te utile atât pentru testarea materialelor Îşi poate asuma nici o responsabilitate pentru funcţionarea anormală asoftware- avansate, dedicate programatorilor. Ma- aflate în lucru cât şi pentru publicarea uluişinicinu poate fifăcută responsabilă joritatea oferă suport atât pentru HTML, acestora, chiar şi de pe propriul Pc. Suita pentru eventualele daune produse. CD-ul XHTML, JavaScript, ASP cât şi pentru Server2Go este deosebit de atrăgătoare CHIPSPECIALa fost verificat Împotriva limbaje mai complexe de formatare, prin numeroasele facilităţi pe care leoferă viruşilor cu următoarele programe antivi- scripting şiprogramare. dar mai ales prin posibilitatea de a dis- rus(Înordine alfabetică): BitDefender Pro- fessionall0 (furnizat deSoftwin), F-Secure tribui o aplica ţie web ._- ~~-~ AntiVirus 5.51 (furnizat de Infodesign), pe un mediu read-on- w~ __ SG27~ ..1ot,'SCl..a.t__ ~022 Kaspersky LabAnti-Virus 6.0 (furnizat de ".:>sr.c.w:eboCtllalh~:~lsOt •••'fCP*> ~L.".....Q~,,,,,,,,,----~::J ly precum un CD-R . Kas-perskyLab-Rusia)şiPC-ciiin(furnizat ~r~3 ~O.··..M•I•CP.~•C.•L<•_rlw1~TwF"4d"~_~~l!-II!CQ"Ia"!>o'n-_"'-'-_.--o::l o~."F<.I'l'"~'l7:-I':J0J10-i'3II- J Nu în ultim ul ddeePGepneetCrCuADoD,vr)iă.ceruÎgnătrmebăsrăicloengtaatcetadţieateplleicfoaţniiicle, rând, am inclus o •. prinfax sau prine-mail, autorii programe- "· aplica ţie gratuită de ~ lorrespective. citire afişierelor PDF, ATENŢIEIPentru rularea corectă a inter- alături de nepreţuitele feţei CD-uluivă recomandăm setarea unei manuale de utilizare rezoluţii minime de 800x600,oadâncime a culorii de 16 biţi şi folosirea opţiunii pentru PHP şi SmallFonts! MySQL. Impressum Redacţia poate ficontaetată la: Telefon: 0268-415158,418728, 0723-570511, 0744-754983; 0368-415003,0368-415004 Fax:0268-418728; E-mail: redactie@fvd.ro Adresa redacţiei: 500010-Braşov,str.N.D.Coceanr.12 Adresa pentru corespondenţă: 500530-Braşov,OficiulPoştal 2,Căsuţa Poştală 4 Editura: VogelBurda Communications SRL Sediul editurii: 500010-Braşov Str.N.D.Cocea nr.12 Director General: DanBădescu (dan_badescu@vogelburda.ro) Director tehnic: DanielDănilă-Bekesi (dan_danila@vogelburda.ro) InRomănia: VogelBurda Communications SRLBraşov Redactori: Mihaela Dogaru (mihaela_dogaru@fvd.rol,Daniel Dănilă-Bekesi (dan_danila@fvd.ro), Andrei Licherdopol (andreUicherdopol@fvd.rol InGermania: VogelBurda Holding GmbH, Munchen, Director: Dr.JanSchultze CD:Andrei Licherdopol (andreUicherdopol@fvd.ro) Grafică, DTP: AncaBăIaş(anca_balas@fvd.ro) Manuscrisele, hlclusiv înformat electronic,expediate redacţieidevinproprietatea editurii. Contabilitate şiadministraţie: Maria Parge, EvaSzaszka(contabilitate@vogelburda.rol Editura Îşirezervă dreptul de modificare amaterialelor primite. precum şiadatei de Financial controller: Adrian Dumitru (adrian_dumitru@vogelburda.ro) apariţie. Reproducerea integralăsauparţială aarticolelor, informaţiilor sauaimaginilor Reclamă: Cristian Pop(cristian_pop@vogelburda.rol, Leonte Mărginean apărute înrevistăestepermisă numai cuacordul scrisalediturii. Redacţia nu îşiasumă (Ieonte_marginean@vogelburda.ro) răspunderea pentru greşeli şiinadvertenţe apărute în materialele colaboratorilor şiale Marketing: Leonte Mărginean (Ieonte_marginean@vogelburda.ro) Distribuţie: Ioana Bădescu (ioana_badescu@vogelburda.rol, imerenţilor. INTRODUCERE - INVATAREA CONTINUA Realizarea unui site sau a unei simple pagini au presupus Întotdeauna acumularea anumitor cunoştinţe. Procesul de Învăţare nu se opreşte Însă după finalizarea primului site fiindcă standardele noi, trendurile precum şi necesităţile clienţilor determină perfecţionarea continuă. În afară de cunoştinţele de bază, trebuie avute În vedere şi anumite aspecte secundare (browser-e, motoare de căutare), fără de care paginile sunt afişate defectuos sau nu prea sunt accesate. Victor Gheorghe /'iri' ('001- HeJp Yahoo! Rent Netisghing away$10,000 Help Kids Dn!y3d§vs}.:OCbe"r.,.1?1 l'Z:CIl:l::I ••.yf.t.ot;J I Q•••••~ 8Auto~ SeeVirgin's space jet B l' I4'l •• I li!fFlnanc:e Virim~IJthe ~s modt'l!;oflhefit~1 Mo" M••••••• ' do- O: Game. comm'ltlal EartMo-~;l(.e p11tl'S bwea'herl 'tilUClII IQ,lllro.COPU ~Ciroull' ••Photolofmod.l. erJ HoUob. t::!M{lIlS ttir.Mobile Web '14,~:~ty·:'.~~",1~),::·d PlanYaurGelll""'.y ~I'tusMjc:o";e. ..n".y•.•t•oblo.".uon.h,p••nbma·dldfl••• OShopplno .to!i))STPeQcrhts ••MFroelsluclhpboalr"ekehcl~1"b.,yoImneboufsthheebd1gagned5.slflaramudaslllblionmVbltlb.l1llih'Sls1tSo,IleY C)TTVrll"el ••ADrnoaulgyhst,smlFylolrladt,eIcalnIUcellaulllllu'yelthOel'sGOP10lIahclecul,'20bI0C8k,."O'paIosl_••••r••••••••••••••.h.akd.h,__rn MvYahool •Yahoohg$JlSI forY-..ld~ 9eatnce's Web Chude•Yahoo'lntemtt urt F·.OHualItwluanlrtlehaadd.Servicfl GTgoau1"r0"tl"9Y,O'''d'itlu Implementările CSSdiferă de la browser la de cod unitar la nivelulÎntregului site. The -codCSS browser. Unexemplu deimplementare dife- WorldWideWebConsortium recomandă uti- h1{text-align:right;font-size:16pt; rită a standardului HTMLeste legat de lizareaCSSÎntandem cuHTML. font-family:Verdana,Helvetica,Arial,sans-serif; TAG-ul. Dacă se doreşte plasarea Utilizând exclusiv codul HTML,arfi necesar color:navy} paginiiwebÎncolţuldinstânga susaferstrei ca atributele unui tag să fie specificate la Referinţa HTMLlaregula CSSvafi: browser-ului, evitând diferenţele dintre fiecare utilizare aacestuia. Şimai neplăcută

Titlu

_ acestea, sefoloseşte: este situaţia Încare se doreşte modificarea Când se definesc aceste atribute ÎnCSS, se din marginwidth="O"marginheight="O"> aţie, artrebui modificate toate apariţiile tag- Întregul site cuosingură definire sau regulă Fără standardul CSS,această problemă de ului respectiv În toate script-urile aferente (indiferent cât de complexă este structura poziţionare nu dispare. CuCSS,aceeaşi po- paginilor unui site. acestuia). ziţionare se realizează astfel: Cuvântul Cascading din numele CSSsem- Exemplul precedent poate fi extins pentru body{margin:O;padding:O;} nifică faptul că elementele subordonate situaţia când este nevoie de mai multe vari- Dar de ce este nevoie de ambele declaraţii moştenesc proprietăţile. Toate elementele ante ale tag-ului

la scrierea unor pentru atribute (margin şipadding)? Motivul HTMLaflate Într-un element ale cărui pro- titluri folosind culorile blue, red şi green. este căbrowser-ele utilizează metode diferite prietăţi au fost stabilite Într-o foaie de stil Atunci,codul CSSeste: de indentare a elementului . Dacă moştenesc proprietăţile respective. Unele h1.blue{text-align:right;font-size:16pt; se utilizează body { padding: O;} numai regulipotficontradictorii (saupot părea ast- font-family:Verdana,Helvetica,Arial, browserul Opera (atât subWindowscâtşisub fel)_Înacest caz, ultima regulă din cod este sans-serif;color:blue} Mac)va poziţiona corect,Înstânga sus, pagi- cecare se aplică. Precedenţa regulilor, tăria h1.red{text-align:right;font-size:16pt; naweb. Dacăseutilizează body{margin: O;} lorpoate fiÎnţeleasă uşordinmultele exem- font-family:Verdana,Helvetica,Arial,sans-serif; toate celelalte browsere (exceptând Opera) plede peinternet. Înoricesituaţie, folosirea color:red} vorpoziţiona corect pagina web. intensă aCSSpermite reducerea semnifica- hl.green {text-align:right;font-size:16pt; Cea mai bună cale de urmat este de a po- tivă a timpului de realizare şi modificare a font-family:Verdana,Helvetica,Arial,sans-serif; ziţiona paginile folosind ambele atribute unei pagini web. Totodată, CSSface codul color: reen} CSSpentru declaraţia . E HTMLmai lizibil,prineliminarea codului de Referinţele HTMLlaaceste reguliCSSvorfi: Şidacă tot v-aţi obişnuit să lucraţi cu stil şi structură. Un exemplu simplu de itlublue style-uri, de ce să nu o faceţi când editaţi folosire poate fi tag-ul
pentru con-
itlured
propriile documente cu editorul favorit (fie trolul atributelor unuititlu: Titlugreen

el Microsoft Word, OpenOffice Writer etc.). -cod HTML DacăÎncănugestionaţi aspectul graficalsite- Editoarele moderne au incorporate mecanis- t••"04 ser nu afişează perfect codul CSS, unele 4H1.1t""•••,.P'Wl. :•:,~:..:."•:..'•~..••t•:•:'I având imperfecţiuni de implementare a standardelor W3C. Diferenţele de "înţe- I ' legere"acoduluiCSSvariazădelabrowser la browser şiun programator web trebuie """:=':::"'''1· bsăroţwinsăerc.onCtudealatececstuevainştienubrsoăwdseear-veilnea, pcue .•.••~~HO.:.:'It•I"•"~,'.1l•."-•",?I1".,.0\"1.''"'"'9y1'",,"1~.'('=I~t~"••".rlIt•.l"l.••,•1.•,"OII~U"'~!''- [("l'f1Qp'hl.~Iw'If6If«e;~ptttfSt"lt,"elrP,o.I.•'Y•lD4'l.•"n•'l"lw••• imperfecţiuni cutot, trebuie luate aşacum • 6Iu.-RSSO.';, sunt şiconstrucţia paginilor webtrebuie să ••lT~l"l1.1 tll(llllPll f4lJ proporţie de 93,6%- vezi statistica de pe unt;"fI' 4ClJm paginaanterioară). Majoritatea celor care navighează pe internet utilizează Internet Explorer sau MozillaFirefox,cuprecizarea că numărul de utilizatori Opera este în creştere. Cu Motoare decăutare suntînfaptbazededatemasivecareacope- toate că fiecare dintre aceste ultime două Simplarealizare alllei pagini nu esteînsă răariainternetului şiconstau dintreipărţi: browser-e este actualizat constant, mulţi suficientă.Astfel,respectivulsitesauinfor- ~ celpuţin un program numit spider sau designeri web nu-şi actualizează periodic maţiaconţinută deacestatrebuiesăfieuşor crawlercare"scormoneşte" internetul, fur- versiunile propriilor pagini web.În plus,şi de găsit. Cel mai simplu mod de a găsi nizând informaţii; sistemeledeoperare (Windows, Linuxsau informaţia pe internet este prin interme- ~ bază de date care stochează aceleinfor- Mac OS)sunt actualizate frecvent şichiar diulunui motor decăutare. maţii; apar versiuni noi aleacestora, faptul afec- Motoarele de căutare sunt site-uri spe- ~ instrument de căutare prin bazade date tând şiaspectulpaginilor webînbrowsere. ciale din cu ajutorul cărora cei care na- care selectează informaţia pe baza unor O bună practică esteaceeade afiîn legă- vigheazăpeinternetgăsescinformaţiidespre cuvintecheieintroduse decătreutilizator. tură permanentă cu alţidesigneri web (de alte site-uri sau conţinute în acestea.Deşi De regulă, rezultatul căutărilor este dorit utilizatori de sisteme de operare existădiferenţeînmodulîncareestecăutată afişat paginat (de exemplu 10 rezultate diferite) pentru a avea o vedere rapidă informaţia,toate motoarele de căutare exe- afişatepe ecran) pentru a evitalistelungi, asupramodului deafişareapropriilor pagi- cutăînprincipialtreioperaţiunidebază: greu de parcurs şi de procesat. Motoarele niwebîn celemai diversecontexte. ~ cautăîninternet saupărţialeacestuia,pe de căutare au ajuns săfiespecializateşipe bazaunor cuvintecheie; alte categorii de informaţie decât celecla- •tG~;f",""",.-;o.loţ"" ••-~ ~ păstrează un index alcuvintelor pe care sice.Astfel,Googleoferăşiposibilitatea de .fk,..t.-: \.4Ow '''''''''''!.''* "'" le-augăsitşiloculunde le-augăsit; acăutaimagini(grupate pediversedimen- ~ permit navigatorilor săcautecuvintesau siuni). Cele mai accesate motoare de GO"'Jgle :.. ::;'I··~b."''' combinaţii aleacestoraînacelindex. căutare diferădelaţarălaţarăşidelaanla aPl'.'.tt:r~~M"."IU Motoarele mai vechi de căutare aveau an. La nivel global, conform unui studiu Web F=.~1·1'00II~,""", •••f9 un index care conţinea câtevasute de mii disponibil la http://marketshare.hitslink de pagini sau documente şirăspundeau la .com, pe primul loc se află Google, cu câtevamiidecererizilnic.Astăzimotoarele 77,04%,urmat deYahoo!(12,46%)şiMSN de căutare indexează sute de milioane de (3,33%)-veziimaginea demaijos. eIar.CwhIlp••••••S•I*?ct"\I"p1,I,l,O,l,~l,pdUa~.~'UY-"!"f'IMF\IIUIUta~c_••••..••'•.•.,••...tk~.Clilţnv."'14_:' pagini,şirăspund lazecidemilioanedece- Pentru caunelemotoarele decăutare să d''$I1 'l' ~~~c IP r ţ~"~i"'f!l.~1;1~·r':Yl. ,,:",",- reridecăutare zilnic.Motoarele decăutare indexezeşisăfurnizezenavigatorului inter- eţto"'.l-".luIft.Uţ.I~O.l"UOor_.0F0,.0.,I.iItk;f•l1•,Ct51hl"P.~"Mto..no Jo;•'.•',:1,_••, .rm~ah"O'JI;olU net informaţii des- Ct!lf.B2..E.21:lJTl PI!N•••f.td1«v8'..tt: fl pre site-uri estene- 4'.etJt'pv..,,~u,.uI",t"CICIl1oIOPtiJcIl•I.~•O.•.oIluIUlleG"l'ldu,lcipllflC:!IJl-,·P""'H.'l.m•j:;rt .•••,rc.t:J;ţ;t~,u,,~ • 77.04% •Google •Global 12.46%· Yahoo •Global cesarcaînsecţiunea B1'iGIlh'U4lU:'''"''<(''f!o'!.C"n' a pagi- ~ j '''''' _, 'f n" nilorwebsăexisteo 1~Ut111l1OQ,~,:uu' GG!lllHlRevista CHIPOnline funcţionează caHTML,dar are la bază XML. browsere care nu Înţeleg CSS.Declaraţia de seva scrie Pentru ceicares-auobişnuit săutilizeze lim- tip DTDeste: Revista CHIPOnline bajul HTML, trecerea la XHTML este foarte devine

, uşoară. 1.0Transitional//EN" devine şi aşa mai Utilizarea standardului XHTML 1.0 Transi- ,,http://www.w3.org/TR/xhtmll /DTD/ xhtmll- tional, o versiune a XHTML care funcţio- transitional.dtd"> departe. nează bine pe browserele actuale dar şi pe XHTML 1.0Frameset sefoloseşte Însituaţiile I!lPuneţl toate atributeleîn cele mai vechi (Netscape Navigator 4 şi când se urmăreşte partiţionarea ferestrei lijapostrofuri Internet Explorer 4), permite designerilor browserului in două sau mai multe cadre. În HTML, nu este obligatoriu ca atributele web să modifice fără probleme pagini web Declaraţia detip DTDeste: TAG-urilor să fie puse Între apostrofuri. În deja publicate În internet dar şisăelaboreze 1'1ToateTAG-uriletrebuie următoarele reguli simple: Declaraţia de NAMESPACEurmează imediat l1lisăfieînchise g aceleia de DTDşiareforma: DeschldeJidocumenteie CUDOCTYPE ÎnHTML,sepotdeschideTAG-urifără caelesă liNAMESPACEadecvat se poate folosi

şi

fără a le şi Documentele XHTML (ca orice document Înlocuind TAG-ul . HTML pot avea extensia .htm sau .html) tre- ilIEMulte pagini XHTMLÎncep cuun prolog Închide: buie săÎnceapă cudeclaraţia DOCTYPErestul XML opţional «?xml» care precede

Un TAG ramas deschis. documentului fiind identic cuunul HTML; declaraţiile DOCTYPE şi NAMESPACE. Din

Un paragraf fara TAG-ul pereche Un TAG ramas deschis.

strict.dtd"> deaspecifica codificarea alfabetului utilizat

Un paragraf initial fara TAG-ul În pagina web. ereche acuma trebuie inchis. Dacăintenţionaţi săconstruiţi opagină care lIustrare XHTML săvizeze oarie decuprindere internaţională ",fAG-urile nepereche trebuie şi care poate conţine caractere non ASCII lijînchlse şiele puteţi utiliza meta TAG-ul Content-type În În XHTML, chiar şiTAG-urile nepereche pre-

continut

locul prologului XML.Exemplul următor ilus- cum
şi trebuie săfie eleÎnse- trează acest meta TAG: leÎnchise. Aceasta seface plasând un spaţiu lasfârşitul TAG-ului: XHTML 1.0poate specifica trei tipuri de content="text/html ;charset=UTF-8"/>
documente XML carecorespund latrei !tScrleţl toate fAG-urilecu declaratii detip DOCTYPE(DTD): Strict, iiicaractere mici Transitional, şiFrameset. De remarcat spaţiul care precede slash-ul. XHTML 1.0Strict sefoloseşte În situaţiile Spredeosebire de HTML,XMLface distincţie Acesta este obligatoriu pentru ca browser- când seurmăreşte realizarea unui cod curat Între caractere mici şi majuscule. Toate ele mai vechi să poata reprezenta corect În şiordonat. Sefoloseşte Împreună cuCSSşi TAG-urile XHTML şi atributele trebuie ecran standardul XHTML. declaraţia detip DTDeste: scrise cu caractere mici, În caz contrar Observaţie: pentru a fi valid şi accesibil trebuie săaibă incluse atri- 1.0Strict//EN" trebuie să vă asigure că pagina web nu butele alt= ,,"şititle=,," forma nouă fiind: ,,http://www.w3 .org/TR/xhtmll /DTD/xhtmll- are erori. Dacă doriţi să modificaţi un document title="copertaCHIP"/> STANDARDE WEB Designerii şi programatorii de pagini web DERANJANT: Demulte ori o pagină arată sunt puşi deseori Însituaţia de a modifica de diferit În browsere diferite. mai multe ori unele secvenţe de cod pentru a rezolva problemele ridicate de diverse versi- uniale aceloraşi browsere şiaface caopagină să se afişeze corect. Aceaste cerinţe provoacă un consum de timp substanţial mărit pentru aceeaşi pagină web. Situaţia tinde săseÎnrău- tăţească datorită utilizării masive atelefoniei 18 mobile sau a altor dispozitive portabile ca- 19Celula
2-1 pabile să navigheze pe internet. Pentru a na- 20

nou adecvat modului lorde funcţionare, fapt 21Celula
2-3 care cecomplică semnificativ procesul de pro- 22 dardul HTMLnu precizează ovaloarea impli- gramare aunor pagini web. 23 cită pentru acest atribut. Atunci când se con- Pentru a face internetul un loc mai bun atât 24 valorii pentru atributul CELLSPACING,două este extrem de important ca producătorii de 25Celula
3-2 browsere diferite vor afişa spaţieri diferite În browsere şi programatorii să respecte cu 26

Carezultat apare oregulă descriere aTAG-ului aplicaţii. Internetul are nevoie de standarde 27 TABLE,care cere ca atributul CELLSPACINGsă deoarece acestea asigură accesul tuturor la 28 fie declarat În mod ex licit.Aşadar, secventa aceeaşi informaţie, afişată Înacelaşi fel. 29 . Unexemplu des Întâlnit de interpretare difer- 30_

ită acodului HTMLeste celalformatării spaţi- În browserele Firefox şi Opera tabelul se duce laafişarea incorectă a spaţierii celulelor i1or. De regulă, dacă Între elemente HTML afişează corect, pe când În Internet Explorer În browsere diferite, pecând, Încazul: sunt plasate mai multe spaţii (anu seconfun- (fie el IE7sau IE6)nu. Astfel, la afişarea prin

spaţiu În linie)acestea sunt ignorate.lnternet o dungă neagră sub imaginea din colţul tabelul va fi afişat corect, indiferent de tipul Explorerul Însă are un comportament diferit. dreapta sus altabelului. browser-ului. În acest cod sursă se reprezintă un tabel care Dacă privim cuatenţie codul sursă se observă Un alt exemplu mai vechi provine din imple- are Încelule text şiimagini: ca lalinia 15din cod, după TAG-ulde imagine mentarea diferită astandard ului HTMLpentru 1 sub imagine. Oaltă consecinţă este căÎntrea- Explorer, iar pentru Netscape se face cu MAR- 3 ga linie este afectată, deci şi imaginea din GINHEIGHTşiMAR'GINWIDTH.Dacăsedoreşte 4 plu liniadecod 12sau Addo"",I~H'IHTML~""';;'~""'-1 20. 11ARGINHEIGHT 10 Un alt exemplu, tipic 11 pentru modul cum 'E"< :- 12 de HTML,poate avea •.~+ 13 implementări diferite Ht!l 14 ING Într-un tabel În "JlMy~ ~"r--- [llL)!i. ~'. TAG-ul TABLE.Stan- MARGINI: Este bine să le respectaţi pentru fiecare browser. Calea de urmat la browser, efortul de a armoniza codul şi se recomandă de câte ori realizarea site- Indiferent de structura site-ului, publi- scris cu cerinţele specifice browserelor me- ului o reclamă. O caracteristică Java Script cul ţintă sau domeniul acestuia, utilizarea rită facut. de reţinut este că scripturile se execută pe XHTML este cea mai bună cale de urmat în Nu trebuie uitat că standardul pentru calculatorul clientului, caracteristică im- realizarea de pagini web, aşa cum de fapt JavaScript face parte din construcţia portantă atunci când se doreşte desconges- recomandă şi W3C . Pe lângă XHTML, fiecărui browser. Dat fiind faptul că imple- tionarea dialogului cu serverul internet. W3C recomandă insistent folosirea CSS. mentarea JavaScript OS) este, cu mici ex- Dacă programatorul web stăpâneşte aceste Chiar dacă implementarea standardelor cepţii, identică în cele mai utilizate browse- trei limbaje, XHTML, CSS şiJS,poate ataca pentru XHTML şi CSS diferă de la browser re, folosirea de cod JSnu va ridica probleme cu succes un proiect web nou. Scurt periplu de-a lungul evolutiei browser-elor web , Programele de navigare pe internet fac parte din viaţa noastră de zicuzişicugreu ne-am mai putea Închipui astăzi acti- vitatea profesională, dar şidivertismentul after hoursÎn lipsa acestora. Săne uităm puţin În urmă şisăvedem care au fost etapele de parcurs pentru ca browser-ele web săajungă la nivelul pecareÎI cunoaştem În zilele noastre. Mihaela Dogaru Primaetapă,abrowser-elor avantlalet- faptul căacestbrowser aintrodus pe piaţă Netscape, care s-a impus ca browser co- tre coincide cu momentul inventării suportul pentru sunet,imagine,bookmark- merciaLÎnmartie 1996afostlansată şicea www-ului (world wide web) în 1991. urişihistory. de-adouaversiunealuiNetscape,noutăţile Celdintâi,apărut simultan aşacumproba- în acestafiindframe-urile şiJavaScript.La bil aţi bănuit, avea o interfaţă exclusivîn Dictatura Netscape numai câtevaluni după aceea a apărut şi format text.Acestprim prototip (construit După Mosaic,larampă a apărut Netscape, Netscape 3, care oferea suport pentru de Tim Berners Lee, inventatorul www- lansatîndecembrie1994.Acestaeraînfapto aşa-numitele mouseovers (unul dintre cele ului, împreună cu Robert Cailliau) consta versiunemult îmbunătăţită aluiMosaic,cu mai populare şi mai răspândite scripturi într-un browser web pentru sistemul de suport pentru conexiuni multiple Tep/IP, carefacecaimagineasăsemodificeuşorcu operare NeXTStep. Deşi dispunea de o cookie-urişitag-ul . un efect plăcut atunci când utilizatorul interfaţă graficăcu utilizatorul, ladata lan- Compania mamă, Netscape Commu- trece cu mouse-ul peste ea) şi alte câteva sării browser-ul nu putea să afişeze însă nications Corporation acerut bani pentru caracteristici. Aceste trei browsere faceau pagini cu fotografii încastrate. De fapt, utilizareabrowser-ului său,deşiîlofereaşi legeapepiaţăîn aceavreme, Netscape 3în acestlucru afostposibilabialaapariţia lui gratuit unuipublicţintăalespesprânceană, specialdevenind un punct dereferinţă din NCSAMosaic,lansatînnoiembrie 1993.A Cum ar fi studenţii şi profesorii. Acest punct devederealexcelenţei.Oricealtpro- fost un pas uriaş înainte, având în vedere lucru a ajutat enorm la popularizarea lui gramdenavigaretrebuia săoferesuport cel

Celula
1-2

este cel al spaţierii '~" 15 celulelor CELLSPAC- ..:J 16

Chip Special Creaţi Uşor Şi Rapid Propriul Website

Similar Chip Special Creaţi Uşor Şi Rapid Propriul Website