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

2008·17.1 MB·Romanian

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: [phone],418728, 0723-570511, 0744-754983;
0368-415003,0368-415004
Fax:[phone]; E-mail: [email protected]
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 ([email protected])
Director tehnic: DanielDănilă-Bekesi ([email protected])
InRomănia: VogelBurda Communications SRLBraşov
Redactori: Mihaela Dogaru ([email protected],Daniel Dănilă-Bekesi
([email protected]), Andrei Licherdopol ([email protected] InGermania: VogelBurda Holding GmbH, Munchen,
Director: Dr.JanSchultze
CD:Andrei Licherdopol ([email protected])
Grafică, DTP: AncaBăIaş([email protected])
Manuscrisele, hlclusiv înformat electronic,expediate redacţieidevinproprietatea editurii.
Contabilitate şiadministraţie: Maria Parge, EvaSzaszka([email protected] Editura Îşirezervă dreptul de modificare amaterialelor primite. precum şiadatei de
Financial controller: Adrian Dumitru ([email protected]) apariţie. Reproducerea integralăsauparţială aarticolelor, informaţiilor sauaimaginilor
Reclamă: Cristian Pop([email protected], Leonte Mărginean apărute înrevistăestepermisă numai cuacordul scrisalediturii. Redacţia nu îşiasumă
([email protected])
răspunderea pentru greşeli şiinadvertenţe apărute în materialele colaboratorilor şiale
Marketing: Leonte Mărginean ([email protected])
Distribuţie: Ioana Bădescu ([email protected], 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<y TVo.ldICayil"t.OTnoPpOaeUka1g$"·
Cb)JPReera'lllonEastla,te HH·ll\oUktllg'!eO•C•t•a•IlhUsW'•'•'S•o•r"!,d~w!>·dldfl•••
OShopplno
.to!i))STPeQcrhts ••MFroelsluclhpboalr"ekehcl~1"b.,yoImneboufsthheebd1gagned5.slflaramudaslllblionmVbltlb.l1llih'Sls1tSo,IleY
C)TTVrll"el ••ADrnoaulgyhst,smlFylolrladt,eIcalnIUcellaulllllu'yelthOel'sGOP10lIahclecul,'20bI0C8k,."O'paIos<h;unld"""", PulVahool10 nw.O".l.k.for)'ou
·OAuthOllhes ta~lngsleps10extrld~. suspect111Marlll,'sdUlh 'a••• dom.'n 11.~"/l"~'
~ 'I'ellowPQQu •Moderaleelf.reisemaydlam.lltoi!lyprOlongrrlen's!rtts :~::I"~n~~';Q'".ndbv,ld•••.•b."•
•oLtdger'sIldlanc••letums10N~YorkfOlloWIIl!lhltdUlh
•SuptlBowl AuttrahanOpen NBA NCAAHoopţ NHl
Small Buslness
'•GDeatamWalenbNS{lltmee. MostPopul.r Ent~rt"inm.nt .N,.D.W5.VidloS
''SSeeUan:hOnlinAeds 10P1ll1puUbkr;8tC1lpIollncgelmes •.,.I..A..•,..•t.E•t<•choom~;on>l_••••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'<otiyostYuIy~SO2hIoppGll\.'alP9mgotfIstn'odl!!OUoVwin~lOlodt.lfdrlunneuoahwtoslonflef\w1bsnlyt.lancllOfl .wfHO.~r~~_.PN••I•d•"e•".•!•."'t*•~_n•.ci"nbk.v.s(t.t"h--...,tt'1-•1t•t_o_••••
VECHIVS.NOU:Aşa arăta pagina portalului de internet Yahoo! În1997 (stânga) şi
Wtekly Plcks. Today'~ WebEvmts. Ch:al.Weathtl Forecasls
R$Jldom Yahool Lmk· Yahoo' Shop iată care este aspectul său actual (dreapta) .
Cine lucrează în domeniul WEB de- ••paginaWEBtipicăulterioarăanului2000 bine în editorul/PC-ul propriu, va arăta
sign-ului şi în programarea WEB a arecarezoluţiedereferinţă 1.024x768(în bineşipeinternet.
constatat probabil dejacăstudiul pen- unelecazuri 1.152x864sau 1.280x 1024), Din păcate, numărul de pagini nefunc-
tru acumularea de noi cunoştinţe nu se paletă extinsă de culori, imagini mai mari ţionale sau defectuoase de pe internet ne
opreşte niciodată. Standardele de design, (până la 150-200KB),toate datorate per- dovedeşte cămulţi dintre ceicare folosesc
performanţele programării, CSS,HTML şi formanţelor ridicate alebrowser-elor, PC- editoarelevizualecredcăacesteasuplinesc
XHTML evoluează,browser-ele sunt actu- urilor şi ale legăturilor internet (lE 6/7, întotalitate noţiunile debază.
alizatefrecvent,plug-in-urile seînmulţesc, FireFox1.5/2,Opera 9.24,monitoarelor de Unaspectimportant caretrebuieavutîn
iarclienţiicertotmaimult.Pemăsură cevă 17şi19ţolisauwidescreen,vitezesimţitor vederelarealizareauneipaginiWEBestecă
cizelaţi o abilitate, descoperiţi altele noi, mărite ale conexiunilor la internet - 128, din momentul plasării paginii în internet,
care ar trebui învăţate. Internetul este un 512sau1.024Kb/s).Deoareces-apornit de aceasta trebuie să arate la felpentru orice
fenomen tânăr, în plină dezvoltare şi nu lapremisa căvitezeleactualesunt arhisufi- vizitator.
trebuiedecâtsăţineţipasulcuacesta.Puteţi ciente pentru încărcarea paginilor, de Vizitatorul trebuie săpoată:
constata uşor evoluţiaacestuia,uitându-vă multe ori, la accesarea acestora, suntem •• folosi oricare din browser-ele dispo-
pe o pagină web proprie de acum trei sau bombardaţi debanner-e, ferestrepop-up şi nibile;
patru ani; în majoritatea cazurilor, aţi alte variante de reclame care, alături de ••utilizaoricesistemdeoperare;
reface-oaltfel.Odată cumărirea intervalu- multitudinea de elemente din pagină, pot Ceicaresefolosescexlusivdeun editor
lui de timp lacare ne referim, putem găsi duceuşorladezorientareavizitatorului. vizualvor descoperi cu neplăcere că opa-
diferenţe enorme. Pentru a exemplifica Atât paginile realizate înainte de 2000 gină WEB care arată bine în respectivul
acestlucru, amluat caexemplu două vari- câtşiceledinmomentul defaţăauunlucru program deeditare,poate chiarşiînbrow-
ante ale site-ului www.yahoo.com. una comun: sebazeazăpeversiuni aleaceluiaşi ser-ul instalat pe calculator, nu va arăta
datând din 1997(sursa www.archive.org) limbaj.Deaceea,chiar şiîncondiţiileexis- delocbinepealtbrowser,iarpeunaltreilea
şi alta foarte recentă, din ianuarie 2008. tenţei a numeroase editoare WEB de tip totul ar putea descoperi un haos. Aceasta
Observaţiiledemaijossuntînmod normal WYSIWYG (what-you-see-is-what-you- numai din cauzăcănu dispun denoţiunile
valabilepentru oricare dintre pagini: get), cunoaşterea acestuia, ne referim cuajutorul cărorasămodificepagina,astfel
••paginadeWEBtipicădinanii 1995-2000 bineînţeles la HTML, este obligatorie. încâtsăaratelafelpentru toţivizitatorii.
avea rezoluţia de referinţă de 800x600(în Aceastamai alesîncontextul evoluţieiper- Săne imaginăm un depanator decalcu-
unelecazurichiarşimaipuţin, 640x480),o manente ainternetului. latoare care se agită şi se învârte în jurul
paletăredusădeculori,imaginicâtmaimici carcasei unui calculator, în speranţa că
(30-50KB),toate datorate performanţelor HTML - prima treaptă acunoaşterii acestavaredevenifuncţional. Celcareînsă
scăzute ale browserelor, calculatoarelor şi Cu toate că pentru majoritatea începăto- demontează, depanează şitesteazăcalcula-
alelegăturilor lainternet (lE4/5,Netscape rilor învăţarea HTML esteun demers evi- torul îl poate repune uşor în funcţiune.
5/6, diagonala monitorului de 15ţoli,mai dent, există şi anumiţi aşa-zişi "web Precum depanatorul, şi web designerul
rar 17,vitezemici de conectare la internet designeri", care, utilizând editoare WYSI- nostru trebuie săînţeleagă codul scriscare
16,32sau 64 Kb/s).O consecinţă supără- WYG, încearcă să treacă peste această genereazăînbrowser paginaweb.Dacănu
toare aacestor aspecteera reprezentată de etapă.Neavând anumite cunoştinţe HTML puteţi detecta greşealadin pagina de web,
cantitatearedusădeinformaţie pepagină. debază,aceştiacredcădacăopagină arată privind-o din afară,învăţaţi HTML casăo
INTRODUCERE - iNVATAREA CONTINUA
~ separarea con- mult utilizatele tabele poate induce ideea că
• 76.04% -Microson kltemet Exp/orer
16.80% -Fretox ţinutului de design. se va renunţa la tabele. Oare folosirea CSS
.5.59% -SSteri Cu alte cuvinte, înseamnă dispariţia tabelelor? Evident nu.
0.60% -Netscape
CSS oferă pe de o Tabelele şi CSS nu sunt mutual exclusive.
0.64% -Opera
.0.08% -Moz~a parte un conţinut Tabelele îşi păstrează locul şi importanţa
.0.19% -Altele care reflectă struc- lor, mai ales pentru controlul datelor
BROWSERE: Întopul popularităţii conduce Încă detaşat browser-ul tura logică a infor- tabelare. Utilizând însă mai pUţine tabele în
Microsoft. maţiei şi pe de altă layout, paginile se încarcă mai repede din
parte libertatea de a internet. în plus, CSS-ul oferă avantaje su-
puteţi vedea dinăuntru. XHTML încorpo- specifica exact aspectul fiecărui tag HTML; plimentare faţă de tabele. Astfel, aşa cum
rează HTML şi reprezintă calea de urmat ~ controlul eficient aseturilor de documen- am menţionat anterior, prin CSS se pot
pentru următorii ani. Internetul este plin de te complexe. Utilizarea puternicelor faci- controla culorile, plasarea imaginilor (in-
site-uri care vă oferă tutoriale gratuite pen- lităţi CSS permite designerilor controlul clusiv a celor din fundal - background
tru HTML, celmai autorizat fiind cel de la grafic (aspect şipoziţionare) alunui număr images), dimensiunea şi aspectul margini-
W3Schools (http://www.w3schools.com). nelimitat de pagini, prin modificarea unui lor, spaţierea (padding) şi chiar alinierea
care pe lângă tutoriale vă oferă şi posi- singur document master sau a unei foi de stânga / dreapta aelementelor de bloc pen-
bilitatea testării cunoştinţelor proprii. în- stil. Modificarea aspectului şi/sau poziţio- tru opoziţionare exactă în pagina web.
cercaţi să vă dezvoltaţi abilităţile învăţând nării elementelor dintr-o pagină web se
HTML sau XHTML -rezultatul sevavedea poate realiza cu ajutorul CSS, fară să fie Aspecte software
imediat în paginile de web proprii. nevoie să vă atingeţi de codul HTML. Un Aminteam în treacăt mai sus despre afi-
alt avantaj al CSS constă în flexibilitatea sa şarea paginii în browser şimai exact despre
CSS- O treaptă mai sus deosebită. Mai multe informaţii despre CSS posibilitatea ca aceasta să nu fie afişată co-
Cascading StyleSheets (CSS) trebuie privite găsiţi în oglinda "Rolul CSS". rect. Această problemă apare datorită dife-
capereche inseparabilă de HTML. CSSofe- renţelor de interpretare a codului CSS de
ră designerilor web două avantaje impor- Tabelele· unpasînapoi? către diferite browsere. Browser-ul de in-
tante în gestionarea unor pagini web, indi- Utilizarea CSS în structurarea unei pagini ternet este programul care înţelege codifi-
ferent de complexitatea lor: web cu ajutorul elementelor de bloc faţă de carea HTML şi CSS, afişând conform cu
ROLUL CSS
Cascading Style Sheets permit controlul as- Helvetica,Arial,sans-serif'size="6" puneţi săofaceţi câtmairepede.
pectului paginii, folosind o cantitate redusă color="Nnavy"T>itlu</h1> 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<body>. 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ă <h1>Titlu</h1> _ acestea, sefoloseşte:
este situaţia Încare se doreşte modificarea Când se definesc aceste atribute ÎnCSS, se <bodyleftmargin="O"topmargin="O"
atributelor unuitag existent. Înaceastă situ- controlează toate referinţele la <h1> 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 <h1> 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 <body>. 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 <body>.
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 <h1c1ass="blue"T>itlublue</hl> style-uri, de ce să nu o faceţi când editaţi
folosire poate fi tag-ul <h1> pentru con- <h1 c1ass="red"T>itlured</h1> propriile documente cu editorul favorit (fie
trolul atributelor unuititlu: <h1class="green">Titlugreen</h1> el Microsoft Word, OpenOffice Writer etc.).
-cod HTML DacăÎncănugestionaţi aspectul graficalsite- Editoarele moderne au incorporate mecanis-
<hl align="center"><fonftace="Verdana, uluiweb propriu cuCSS,este bine săvă pro- mele pentru gestionarea style-urilor.
aceasta pagină de web pe ecranul utiliza-
torului. Pe măsură ce rolul CSS în web
design creşte,estenecesară testarea aspec-
tului paginilor web în cele mai utilizate
-,
browsere.Aşacum amspus,niciunbrow- .
1Orb•••'..rO<>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"l<ft'lk«!.~nry hrr"o'oOU"A'''''tl rChIl'Speclol rChIp6puclol - rChip 6llUr:!ol
• Voeorolf,lo',O,l PCProctlc PCPr.1etlc PCf'roctic
plece de la acestea. Scopul este acela ca • P'''I1,r.2'),1 lonLJlIriu2007 Docor"br!e 2006 NolorTIbrlo 2000
pagina websăapară corectîntoate brows-
er-ele importante (celpuţin rE,FireFoxşi
Opera, deoarece acestea sunt utilizate în Afl,\ a1(>1.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'<IHIt",-aIPJ~'_I.'e~C"U"4lliCtIfPtwtIP},,S~,~~y•.,•mprtr•.•~.•t•uJ:tlIP ".~'f~QjlIllIol.t ••••••'"'tit", • 3.33% •MSN •Global <header> a pagi-
~ j '''''' _, 'f n" nilorwebsăexisteo
1~Ut111l1OQ,~,:uu' GG!lllHl<U1<1\l-IJ~me~nl.l<d~tCl1' m.JjduC••••c~'oo4l'I.1'~Cll11'
Ut""I.JIc.h'I'r~nduWl:.YOpful"~fttWlLtlIltlml'lencuu~(lin". 2.12%· AOL· Global descriere a site-ului
,,CIn.Ho'II:lPt*1~l.!mIO"It9n'·"<l~!OtdtO,"o;.")l".B',I,q'lJl,tm_I.t:lWtt\fllm.ltnr~d_''lTdgt~llgo.nllo:!l'\Jl~.Jncefl:meq<~l~nL.:we.lrhK~'"m •..J/'Jff lI/Vrl •.0.241%.38% •.AAsltkele•Global respectiv, prin in-
termediul meta
TAG-urilor.
INTRODUCERE - iNVATAREA CONTINUA
De exemplu, în meta TAG-uri se pla- cuvintelor cheiesăfiefăcutăconcisşiclar, lui,poate oferidetaliicare altfelar rămâne
seazăinformaţii despredomeniul deactivi- evitându-se plasareaunor textelungi. necunoscute persoaneicareîlaccesează.De
tate,cuvintecheiecaredescriuacestdome- aceea, pentru situaţia în care un site are
niu,autor etc. Harta site-ului multe ramificaţii (nivele şi subnivele) şi
Este indicat să nu fie niciodată omise Deoarece motoarele de căutare nu oferă chiardacăstructura saartrebuisăreiasădin
meta TAG-urile dintr-o pagină web. Deşi decâtinformaţiipunctuale asupraunui site, organizarea meniurilor şi legăturilor, este
unelemotoare decăutarenusemaibazează adică o referinţă face legătura către un recomandată totuşi plasarea unei hărţi a
exclusiv pe meta TAG-uri, specificarea punct din structura site-ului, este greu ca site-ului în structura acestuia. Harta
setului de caractere utilizat, domeniul, cinevasăaibăopriviredeansamblu asupra site-uluimaioferăinformaţiişidespreacele
cuvintelecheieetc.oferădetaliiimportante ariei pe care o acoperă site-ul. Plasarea la pagini carenu figureazăîn meniuri şiper-
despre respectivapaginăweb.Estededorit vedere aunei legăturicătre o seCţiunedis- miteonavigareuşoarădirectlaacelepagini
ca descrierea conţinutului, domeniului şi tinctă a site-ului, care să conţină structura careîlintereseazăpecelcareleaccesează.
REGULI XHTML
World Wide Web Consortium (W3C) reco- XHTML 1.0Transitional sefoloseşte În situ- mai vechi HTML În XHTML, atunci TAG-
mandă utilizarea limbajului XHTML În locul aţiile când seurmăreşte realizarea unui cod urile sevor recodifica astfel:
HTML.XHTML este un limbaj hibrid, arată şi cu facilităţi HTML care să arate bine şi În <TITLE>Revista CHIPOnline</TITLE>
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:
<title> Revista CHIPOnline </title>
bajul HTML, trecerea la XHTML este foarte <!DOCTYPEhtml PUBLIC,,-//W3C//DTDXHTML
În mod asemănător, <P> devine <P>,
uşoară. 1.0Transitional//EN"
<BODY> devine <body> ş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
<!DOCTYPEhtml PUBLIC,,-//W3C//DTD XHTML XHTML aceasta devine obligatorie de exem-
pagini noifolosind aceleaşi tehnici.
1.0Frameset//EN" plu width="55" şi nu width=55. Aplicaţi
Comutarea de laHTMLtradiţional laXHTML ,,http://www.w3.org/TR/xhtmll /DTD/xhtmll- această regulă tuturor atributelor.
1.0este laÎndemâna oricui dacă respectă frameset.dtd"> 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 <html xmlns=,,http://www.w3.org/1999/xhtml'' fie Închise neapărat cuTAG-ul pereche deex.
xml:lang= "en"lang="en">
se poate folosi <P> şi <li> fără a le şi
Documentele XHTML (ca orice document Înlocuind TAG-ul <html >.
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 <p>Un TAG ramas deschis.
documentului fiind identic cuunul HTML; declaraţiile DOCTYPE şi NAMESPACE. Din <p>Un paragraf fara TAG-ul pereche
<!DOCTYPEhtml PUBLIC,,-//W3C//DTD XHTML nefericire acest prolog XML cauzează pro- În XHTML, fiecare TAG, odată deschis,
1.OStrict//EN" bleme În unele browsere şi este recomand- trebuie să fie Închis:
,,http://www.w3.org/TR/xhtmll /DTD/xhtmll- abil sănu fie folosit. Scopul prologului este <p>Un TAG ramas deschis.</p>
strict.dtd"> deaspecifica codificarea alfabetului utilizat <p>Un paragraf initial fara TAG-ul
<html> În pagina web. ereche acuma trebuie inchis.</ >
<head> Dacăintenţionaţi săconstruiţi opagină care
<title>lIustrare XHTML</title> săvizeze oarie decuprindere internaţională ",fAG-urile nepereche trebuie
</head> şi care poate conţine caractere non ASCII lijînchlse şiele
<body> puteţi utiliza meta TAG-ul Content-type În
În XHTML, chiar şiTAG-urile nepereche pre-
<p>continut</p> locul prologului XML.Exemplul următor ilus-
cum <br> şi<img> trebuie săfie eleÎnse-
</body> trează acest meta TAG:
leÎnchise. Aceasta seface plasând un spaţiu
</html> <metahttp·equiv="Content-Type"
urmat deslash/> lasfârşitul TAG-ului:
XHTML 1.0poate specifica trei tipuri de content="text/html ;charset=UTF-8"/>
<br/>
documente XML carecorespund latrei
!tScrleţl toate fAG-urilecu <imgsrc="ojmagine.gif' />
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
<!DOCTYPEhtml PUBLIC,,-//W3C//DTD XHTML documentul nu se validează. Validarea TAG-ul <img> 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. <imgsrc="ojmagine.gif' alt="oimagine"
strict.dtd"> 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<tr>
mobile sau a altor dispozitive portabile ca- 19<td>Celula<br/>2-1</td>
pabile să navigheze pe internet. Pentru a na- 20<td><img src="table_pcpractic.jpg"
viga internet, acestea au nevoie de software border="O"/></td>
nou adecvat modului lorde funcţionare, fapt 21<td>Celula<br/>2-3</td>
care cecomplică semnificativ procesul de pro- 22</tr> dardul HTMLnu precizează ovaloarea impli-
gramare aunor pagini web. 23 <tr> cită pentru acest atribut. Atunci când se con-
Pentru a face internetul un loc mai bun atât 24<td><imgsrc="table_pcpractic.jpg" struieşte o pagină web şise omite precizarea
pentru web designeri cât şipentru utilizatori, border="O"/></td> valorii pentru atributul CELLSPACING,două
este extrem de important ca producătorii de 25<td>Celula<br/>3-2</td> browsere diferite vor afişa spaţieri diferite În
browsere şi programatorii să respecte cu 26<td><img src="table_pcpraetic.jpg" jurul celulelor tabelului.
stricteţe standardele atunci când dezvoltă noi border="O"/></td> Carezultat apare oregulă descriere aTAG-ului
aplicaţii. Internetul are nevoie de standarde 27</tr> TABLE,care cere ca atributul CELLSPACINGsă
deoarece acestea asigură accesul tuturor la 28</table> fie declarat În mod ex licit.Aşadar, secventa
aceeaşi informaţie, afişată Înacelaşi fel. 29</body> <table cellpadding="3"border="l"> .
Unexemplu des Întâlnit de interpretare difer- 30</html>_ </table>
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 <table celispacing="O"cellpadding="3"
da cu caracterul &nbsp; care forţează un intermediul browserului Microsoft seobservă border="l"> </table>
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<!DOCTYPEhtmlPUBLIC,,-//W3C//DTD există cel puţin un spaţiu. Acesta provoacă TAG-ul BODYÎn browser-ele Netscape şi In-
XHTML1.0Transitional//EN" mărirea nedorită aÎnălţimii celulei şiapariţia ternet Explorer. Poziţionarea secţiunii BODYse
2,,http://www.w3,org/TR/xhtmI1/DTD/ unei dungi negre (culoarea de background) face cuTOPMARGINşiLEFTMARGINÎninternet
xhtmll-transitional.dtd"> sub imagine. Oaltă consecinţă este căÎntrea- Explorer, iar pentru Netscape se face cu MAR-
3<html> ga linie este afectată, deci şi imaginea din GINHEIGHTşiMAR'GINWIDTH.Dacăsedoreşte
4<style> stânga sus. Pentru cineva care nu are exerci- poziţionarea corectă a paginii web Încolţul din
5td{padding: Opx;background-color: #000000; ţiul citirii codului HTML această deplasare stânga susaecranului pentru ambele browsere
text-align: center; poate deveni o problemă supărătoare pentru atunci TAG-ulBODYsescrie:
6font-size:14px; color:#FFFFFF;font-weight: că o asemenea eroare se depistează greu. <bodytopmargin="O"leftmargin="O"margin-
bold; Acest defect de reprezentare se elimină cel height="O"marginwidth="O"> </body>
s7afnosn-st-efraifm;i1ly:Verdana,Arial,Helvetica, fmăraăi sspiamţipilude secxrieimnd- liilfifefllt~j<Mit i''{-...i.IM!tiafflrt"j"'"m,,,,,mw!:le-\>lolxl MAojff.i•t<!itj§'l(.i.t..§ţ!iiafl.~i- H'" _Io'xl
8</style> plu liniadecod 12sau Addo"",I~H'IHTML~""';;'~""'-1<ml ~i~-B_' l..l.oca6on I""""-I<ml3II
~
9<body> 20. 11ARGINHEIGHT
10<table border="l"> Un alt exemplu, tipic
11<tr> pentru modul cum 'E"< :-
12<td><img src="table_pcpractic.jpg" acelaşi standard, cel Q
H
border="O"/></td> de HTML,poate avea •.~+
13<td>Celula<br/>1-2</td> implementări diferite Ht!l
14<td> este cel al spaţierii '~"
15<imgsrc="table_pcprac:ic.jpg" border="O"/> celulelor CELLSPAC- ..:J
16</td> ING Într-un tabel În "JlMy~ ~"r--- [llL)!i. ~'. <i'" ,2-1 #
17</tr> 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<CENTER > . 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