Quan Tri Web

CNG TY IN TON V TRUYN S LIU

TRUNG TM IN TON TRUYN S LIU KV1

-------------- o0o -------------

GIO TRNH O TO

XY DNG V QUN TR

WEBSITE, PORTAL

H ni, nm 2003

1

itcvdcRectangle

itcvdcRectangle

MC LC

Chng I. Gii thiu v InterNet, World Wide Web ........................................ 6 1.1 Lch s pht trin .......................................................................................... 6 1.2 T chc ca Internet...................................................................................... 7 1.3 Vn qun l mng Internet ....................................................................... 9 1.4 Ngun gc World Wide Web...................................................................... 10 1.5 World Wide Web l g? .............................................................................. 11 1.6 Trnh duyt Web: ........................................................................................ 11 Chng 2: Tng quan v mt h thng Web................................................... 24 2.1 Gii thiu .................................................................................................... 24 2.2 M hnh h thng Web ni chung............................................................... 24 2.3. Nguyn tc hot ng ................................................................................ 25 Chng 3: Frontpage 2002 (Front page XP) ................................................... 27 3.1 M, ng, to mi, ghi mt trang hay mt Web site .................................. 28 3.2 nh dng font ch, paragraph,... ............................................................... 30 3.3 nh, m thanh ............................................................................................. 32 3.4 Bng(Table) ................................................................................................ 34 3.5 Hyperlink, Bookmark.................................................................................. 36 3.6 To khung (form) ........................................................................................ 38 Chng 4 Ngn ng nh du siu vn bn (HTML: Hyper Text Markup Language).......................................................................................................... 41 4.1 Khi nim.................................................................................................... 41 4.2 Cc th c bn:............................................................................................ 41 4.2.1 Cc th nh ngha on vn bn, kiu ch ............................................. 41 4.2.2 Cc th nh ngha bng, nh................................................................... 50 3.2.3 Tn mt i tng, hyperlink (th A)...................................................... 54 4.2.4 To form................................................................................................... 58 4.2.5 To khung (th Frame)............................................................................. 63 Chng 5: CSS (Cascading Style Sheets) ........................................................ 72 5.1 Khi qut ..................................................................................................... 72 5.2 K thut CSS (nhng k thut thng dng)................................................ 73 5. 3 Mt s thuc tnh hay dng trong CSS (cng th HTML) ........................ 75 Bi tp ............................................................................................................... 77 Chng 6 S dng phn mm Photoshop, Coreldraw p dng cho vic chnh sa, xut nh cho Web .................................................................................... 118 6.1- ho trn Web...................................................................................... 118 6.1.1Gii thiu ho trn web...................................................................... 118 6.1.2- ho trn Web khc g? ..................................................................... 120 6.2- X l ha trn Web: ........................................................................... 120 6.2.1- Phn mm x l ho photoshop...................................................... 120 6.2.1.1- C s v Photoshop ........................................................................... 120 6.2.1.2-Gii thiu cc cng c chn: .............................................................. 126 6.2.1.3 Cng c ct nh:.................................................................................. 132 6.2.1.4 Nhm cng c chnh sa nh:............................................................. 132 6.2.1.5 Cng c to ch: ................................................................................. 135

2

Gio trnh o to Xy dng v qun tr Website, Portal

Trung tm in ton Truyn s liu KV1

itcvdcRectangle

itcvdcNoteMarked set by itcvdc

6.2.1.6 Cc cng c bt v: ............................................................................ 137

6.2.1.7 - S dng cng c Eraser (E) ...................................................... 138 6.2.1.8 Cng c t mu cho i tng:........................................................... 138 6.2.1.8 Cng c to ng dn Path: ............................................................. 139 6.2.1.10 - Cc cng c to hnh: ..................................................................... 140 6.2.1.11 Cng c Zoom v Hand: ................................................................... 141 6.2.1.12- Cng c ly mu ............................................................................. 142 6.2.1.13 Nhng iu c bn v Layer :........................................................... 142 6.2.1.14 Mt n v knh:............................................................................... 147 6.2.1.15 Lm vic vi bng History (chuyn i nh n 1 trng thi bt k)......................................................................................................................... 148 6.2.1.16 Cn chnh mu cho nh:.................................................................... 149 6.2.2- S dng corel draw p dng cho thit k logo cho web..................... 160 6.2.2.1-C s v Corel Draw .......................................................................... 160 6.2.2.2- Lm vic vi Corel Draw: ................................................................. 160 6.2.3 - Gii thiu cc phn mm x l ho khc ....................................... 186 6.2.3.1 - Flash:................................................................................................. 186 6.2.3.2- Adobe Image Ready: ......................................................................... 186 6 .2.3.4- Xu hng v ho hin i trn Web............................................ 187 Chng 7. Cc phng php cp nht thng tin ln web............................... 188 7.1 FTP di dng dng lnh.......................................................................... 188 7.2 FTP di dng truyn file thng qua cc chng trnh ............................ 189 7.2.1 Gii thiu mt s chng trnh FTP Client ........................................... 189 7.2.2 To kt ni bng WS_FTP Pro client .................................................... 189 7.2.3 Truyn file.............................................................................................. 190 7.2.4 Mt vi chc nng ca WS_FTP ........................................................... 191 7.2.4.1 Sa thng tin Site profile c sn .................................................... 191 7.2.4.2. Cc chc nng x l file v folder trn giao din chng trnh ........ 192 7.2.4.3. Cc chc nng trn Menu .................................................................. 193

194 7.2.4.4 Cc thut ng thng dng trong khi s dng WS_FTP Pro ...............Chng 8: Gii thiu mt s ngn ng lp trnh Web Ngn ng lp trnh ASP ................................................................................................................. 195 8.1.Khi nim v CGI: .................................................................................... 195 8.1.1.Khi nim:.............................................................................................. 195 8.1.2.Cu trc: ................................................................................................. 195 8.1.3.V d v mt CGI vit bng Perl ........................................................... 195 8.2.Gii thiu mt s ngn ng lp trnh WEB .............................................. 196 8.2.1. Perl, vit tt ca Practical Extraction and Report Language ................ 196 8.2.2. PHP, vit tt ca PHP Hypertext Preprocessor..................................... 197 8.2.3.JSP, vit tt ca Java Server Pages ........................................................ 198 8.2.4.Javascript:............................................................................................... 199 8.2.5.ASP ........................................................................................................ 199 8.3. Ngn ng ASP ...................................................................................... 200 8.3.1 Kin thc c bn v VBScript ............................................................... 200 8.3.1.1- Bin v phm vi bin ......................................................................... 201 8.3.1.2- Cc kiu d liu: ................................................................................ 202

3



itcvdcRectangle

itcvdcNoteMarked set by itcvdc

itcvdcNoteAccepted set by itcvdc

8.3.1.3- Cc hm trong VBScript: .................................................................. 204 8.3.1.4- Cc ton t v biu thc .................................................................... 208 8.3.1.5- Cc cu trc iu khin...................................................................... 209 8.3.1.6. Cc cu trc lp.................................................................................. 210 8.3.2 - Ngn ng ASP..................................................................................... 212 8.3.3- M hnh ASP hot ng nh th no?.................................................. 213 8.3.4- To mt trang ASP ............................................................................... 214 8.3.4.1- Thm cc lnh Script ......................................................................... 215 8.3.4.2- S dng cc Server- Side VBScript v Javascript............................. 216 8.3.4.3- Khai bo bin trong ASP ................................................................... 216 8.3.4.4- Phm vi hot ng ca bin............................................................... 217 8.3.4.5- Cc bin phin v bin ng dng ...................................................... 218 8.3.4.6- Khai bo th tc, hm v cch gi..................................................... 218 8.3.4.7- Lin kt nhiu tp trong mt tp........................................................ 220 8.3..5- S dng cc i tng Component ..................................................... 222 8.3.5.1- Khi nim Components ..................................................................... 222 8.3.5.2- S dng cc i tng trong Component.......................................... 223 8.3.5.3- Cc phng thc v thuc tnh ca i tng................................... 224 8.3.5.4- Thit lp phm vi i tng .............................................................. 224 8.3.6- Lm vic vi tp hp (Collection) trong ASP...................................... 225 8.36.1- Truy xut theo tn............................................................................... 226 8.3.6.2- Truy xut theo ch s ......................................................................... 226 8.3.6.3- Truy xut n cc phn t ca Collection dng cu trc lnh .......... 226 8.3.6.4- S dng thuc tnh Count trong Collection....................................... 226 8.3.7- Cc i tng ca ASP......................................................................... 226 8.3.7.1- i tng Request ............................................................................. 227 8.3.7.2- i tng Response........................................................................... 232 8.3.7.3- i tng Server ............................................................................... 233 8.3.7.4- i tng Application ....................................................................... 233 8.3.7.5- i tng Session.............................................................................. 234 8.3.7.6 - Tp Global.asa .................................................................................. 234 8.3.7.8- Truy xut d liu trong ASP.............................................................. 238 8.3.8.1- To mt ODBC DSN......................................................................... 238 8.3.8.2- Cu hnh File DSN cho MS Access................................................... 238 8.3.8.3- Cu hnh File DSN cho SQL Server.................................................. 238 8.3.8.4- Cu hnh File DSN cho Oracle .......................................................... 239 8.3.8.5- Lin kt v truy xut CSDL bng i tng Connection.................. 239 8.3.8.6- S dng i tng RecordSet............................................................ 240 8.3.8.7- Cc thao tc d liu vi RecordSet ................................................... 241 8.3.9- Thao tc vi tp v th mc ................................................................. 242 8.3.9.1- i tng Drive................................................................................. 243 8.3.9.2- i tng Folder ............................................................................... 244 8.3.9.3- i tng File.................................................................................... 244 Chng 9: Qun tr my ch Web Server trn Windows ............................... 253 9.1. Gii thiu WEB Server ............................................................................ 253 9.2. Gii thiu mt s phn mm Web Server................................................ 253

4



itcvdcRectangle

9.3. Qun tr my ch WebServer trn Windows - Phn mm IIS Web Server......................................................................................................................... 255 9.3.1. Cc khi nim c bn............................................................................ 255 9.3.2. Ci t Internet Information Services IIS ............................................. 258 9.3.2.1. Chun b ci t.................................................................................. 258 9.3.2.2. Ci t Internet Information Services ................................................ 258 9.3.3. Qun tr Internet Information Services (IIS)......................................... 261 9.3.3.1. Cu hnh Internet Information Services............................................. 261 9.3.3.2 Stop/Start/Restart IIS .......................................................................... 275 9.3.3.3 Ci t cc cng c h tr bo mt .................................................... 276 Chng 10 Gii thiu v WebPortal v phng php thit k web ............... 282 10.1 Webportal l g? ...................................................................................... 282 10.2 Cc lu khi xy dng Webportal ......................................................... 282 10.3 Phng php thit k web...................................................................... 284 10.3.1 Xc nh mc ch, yu cu, i tng, nhu cu iu kin thit k Web......................................................................................................................... 285 10.3.2 K thut kho st, thu thp thng tin ................................................... 287 10.3.3 Phn tch, la chn cc thnh phn chnh ca Website, th t u tin 289 10.3.4 Phng n k thut, m hnh bo mt, vn hnh website ................... 290 10.3.5 Cu trc logic Web .............................................................................. 294 10.3.6 Cu trc c s d liu Web.................................................................. 296 10.3.7 Phng n trin khai xy dng Web.................................................... 298

5



itcvdcRectangle

Chng I. Gii thiu v InterNet, World Wide Web * INTERNET 1.1 Lch s pht trin Mng Internet ngy nay l mt mng ton cu, bao gm hng chc triu ngi s dng, c hnh thnh cui thp k 60 t mt th nghim ca B Quc phng M. Ti thi im ban u l mng ARPAnet ca Ban qun l d n nghin cu quc phng. ARPAnet l mt mng th nghim phc v cc nghin cu quc phng, mt trong nhng mc ch ca n l xy dng mt mng my tnh c kh nng chu ng cc s c (v d mt s nt mng b tn cng v ph hu nhng mng vn tip tc hot ng). Mng cho php mt my tnh bt k trn mng lin lc vi mi my tnh khc. Kh nng kt ni cc h thng my tnh khc nhau hp dn mi ngi, mt khc y cng l phng php thc t duy nht kt ni cc my tnh ca cc hng khc nhau. Kt qu l cc nh pht trin phn mm M, Anh v chu u bt u pht trin cc phn mm trn b giao thc TCP/IP (giao thc c s dng trong vic truyn thng trn Internet) cho tt c cc loi my. iu ny cng hp dn cc trng i hc, cc trung tm nghin cu ln v cc c quan chnh ph, nhng ni mong mun mua my tnh t cc nh sn xut, khng b ph thuc vo mt hng c nh no. Bn cnh cc h thng cc b LAN bt u pht trin cng vi s xut hin cc my bn (desktop workstations) - 1983. Phn ln cc my bn s dng Berkeley UNIX, phn mm cho kt ni TCP/IP c coi l mt phn ca h iu hnh ny. Mt iu r rng l cc mng ny c th kt ni vi nhau d dng. Trong qu trnh hnh thnh mng Internet, NSFNET (c s ti tr ca Hi Khoa hc quc gia M) ng mt vai tr tng i quan trng. Vo cui nhng nm 80, NFS thit lp 5 trung tm siu my tnh. Trc , nhng my tnh nhanh nht th gii c s dng cho cng vic pht trin v kh mi v mt vi hng ln. Vi cc trung tm mi ny, NFS cho php mi ngi hot ng trong lnh vc khoa hc c s dng. Ban u, NFS nh s dng ARPAnet ni 5 trung tm my tnh ny, nhng ny b thi quan liu v b my hnh chnh lm tht bi. V vy, NFS quyt nh xy dng mng ring ca mnh, vn da trn th tc TCP/IP, ng truyn tc 56 kbps. Cc trng i hc c ni thnh cc mng vng, v cc mng vng c ni vi cc trung tm siu my tnh. n cui nm 1987, khi lng thng tin truyn ti lm cc my tnh kim sot ng truyn v bn thn mng in thoi ni cc trung tm siu my tnh b qu ti, mt hp ng v nng cp mng NSFNET c k vi cng ty Merit Network Inc, cng ty ang cng vi IBM v MCI qun l mng gio dc Michigan. Mng c c nng cp bng ng in thoi nhanh nht lc by gi, cho php nng tc ln gp 20 ln. Cc my tnh kim sot mng

6



itcvdcRectangle

cng c nng cp. Vic nng cp mng vn lin tc c tin hnh, c bit trong nhng nm cui cng do s lng ngi s dng Internet tng nhanh chng. im quan trng ca NSFNET l n cho php mi ngi cng s dng. Trc NSFNET, ch c cc nh khoa hc, chuyn gia my tnh v nhn vin cc c quan chnh ph c kt ni Internet. NSF ch ti tr cho cc trng i hc ni mng, do mi sinh vin i hc u c kh nng lm vic trn Internet. Ngy nay mng Internet c pht trin nhanh chng trong gii khoa hc v gio dc ca M, sau pht trin rng ton cu, phc v mt cch c lc cho vic trao i thng tin trc ht trong cc lnh vc nghin cu, gio dc v gn y cho thng mi.

1.2 T chc ca Internet Internet l mt lin mng, tc l mng ca cc mng con. Vy u tin l vn kt ni hai mng con. kt ni hai mng con vi nhau, c hai vn cn gii quyt. V mt vt l, hai mng con ch c th kt ni vi nhau khi c mt my tnh c th kt ni vi c hai mng ny. Vic kt ni n thun v vy l cha th lm cho hai mng con c th trao i thng tin vi nhau. Vy vn th hai l my kt ni c v mt vt l vi hai mng con phi hiu c c hai giao thc truyn tin c s dng trn hai mng con ny v cc gi thng tin ca hai mng con s c gi qua nhau thng qua . My tnh ny c gi l Internet gateway hay router.

R

Net 1 Net 2

Hnh 1.1: Hai mng Net 1 v Net 2 kt ni thng qua router R.

Khi kt ni tr nn phc tp hn, cc my gateway cn phi bit v s kin trc ca cc mng kt ni. V d trong hnh sau y cho thy nhiu mng c kt ni bng 2 router.

R 1 R 2

Net 1 Net 2 Net 3

Hnh 1.2: 3 mng kt ni vi nhau thng qua 2 router

Nh vy, router R1 phi chuyn tt c cc gi thng tin n mt my nm

o cc my trong mng Net 2 hoc Net 3. Vi kch thc ln nh mng Internet, vic cc routers lm sao c th quyt nh v vic chuyn cc gi thng tin chcc mng s tr nn phc tp hn.

7



itcvdcRectangle

cc routers c th thc hin c cng vic chuyn mt s ln cc gi thng tin thuc cc mng khc nhau ngi ta ra quy tc l: Cc routers chuyn cc gi thng tin da trn a ch mng ca ni n, ch

eo s mng trn Internet ch khng phi l s

nh lch nhau. Giao thc TCP/IP ca Internet hot

chnh l im gip cho TCP/IP t ra rt mnh. Nh vy, ngi dng trong Internet hnh dung Internet l mt mng thng nht v bt k hai my no trn Internet u c ni vi nhau thng qua mt mng duy nht. Hnh v sau m t kin trc tng th ca Internet.

khng phi da trn a ch ca my nhn. Nh vy, da trn a ch mng nn tng s thng tin m router phi lu gi v s kin trc mng s tun thmy trn Internet. Trn Internet, tt c cc mng u c quyn bnh ng cho d chng c t chc hay s lng my l rt chng tun theo quan im sau: Tt cc cc mng con trong Internet nh l Ethernet, mt mng din rng nh NSFNET back bone hay mt lin kt im-im gia hai my duy nht u c coi nh l mt mng. iu ny xut pht t quan im u tin khi thit k giao thc TCP/IP l c th lin kt gia cc mng c kin trc hon ton khc nhau, khi nim "mng" i vi TCP/IP b n i phn kin trc vt l ca mng. y

Internet

host

(a)

8



itcvdcRectangle

router

Internet

Physical net

host

(b)

Hnh1.3: Mng Internet di con mt ngi s dng. Cc my c ni vi nhau thng qua mt mng duy nht. (b) - Kin trc tng qut ca mng Internet. Cc routers cung cp cc kt ni gia cc mng.

nh 1.4: Mng Internet chi tit hn

1.3 Vn qun l mng Internet

Sub net

Sub net

9

H

Sub net

Internet

Firewall

Switch, hub

Server System ISDN VPN



itcvdcRectangle

- Thc cht Internet khng thuc quyn qun l ca bt k ai. N khng c gim c, khng c ban qun tr. Bn c th tham gia hoc khng tham gia vo Internet, l quyn ca mi thnh vin. Mi mng thnh phn s c mt gim c hay ch tch, mt ckhng c mt t chc no c

quan chnh ph hoc mt hng iu hnh, nhng hu trch nhim v ton b Internet.

phng hng ht trin Internet. IAB hp nh k bn v cc vn nh cc chun, cch

phn chia ti nguyn, a ch ... - Mi ngi trn Internet nh thng qua y ban K

ut Internet (Internet Engineering Task Force - IETF). IETF cng l mt t hc t nguyn, c mc ch tho lun v cc vn k thut v s hot ng

i trng, IETF lp mt nhm k thut

y tnh ni vo Internet.

- Hip hi Internet (Internet Socity - ISOC) l mt hip hi t nguyn c mc ch pht trin kh nng trao i thng tin da vo cng ngh Internet. Hip hi bu ra Internet Architecture Board- IAB (y ban Kin trc mng). y ban ny c trch nhim a ra cc hng dn v k thut cng nhp

th hin nguyn vng ca mthcca Internet. Nu mt vn c conghin cu vn ny. - Nhm c trch nghin cu pht trin Internet (IRTF). - Trung tm thng tin mng (Network Information Center -NIC) gm c nhiu trung tm khu vc nh APNIC - khu vc chu -Thi Bnh Dng. NIC chu trch nhim phn tn v a ch cho cc mng m* WORLD WIDE WEB: Bt k mt c nhn no, ang s dng bt k loi my tnh no, bt k ni no, u c th truy cp c d liu trn Internet ch nh s dng mt chng trnh n gin l tng ca Tim Berners-Lee - Mt nh khoa hc ti phng th nghim vt l chu u (CERN) vo nm 1989.

Hnh 1.5: World Wide Web

1.4 Ngun gc World Wide Web. Vo cui nm 1980, Tim Berner Lee vit mt chng trnh lu tr d liu tn l Enquire l c s sau ny pht trin chng trnh cho Web server v

10



itcvdcRectangle

Web client u tin. Chng trnh ny c bt u vo thng 12 nm 1990 ti CERN v c qung b vo ma h nm 1991. "WorldWideWeb" trnh duyt

hm m rng cc tnh nng ca b trnh duyt Mosaic. 3C (World Wide Web Consortium) c hnh thnh vo cui nm 1994, vi

pht trin HTML mt cp u tin nht v pht n nay.

g hn l mt dch v ca

n thy trn mn hnh my

c nh thng qua cc siu lin kt (hyperlink). Siu lin kt v

hypertext u tin chy trn my NeXT - Step. Cng vo thi gian ny c nhiu cng trnh chun ho cc h thng Hypertext. Cc n lc ny tp trung vo lnh vc Internet theo s pht trin ca Hypertext Markup Language, hay HTML, c thit lp bi Tim Berner Lee. Phin bn u tin ny by gi gi l HTML 1.0 Nm 1993, mt sinh vin tr tn l Marc Andressen, trng i hc Illinois ti Urbana- Champaign to ra mt giao din ha u tin dnh cho Web c gi l Mosaic. Ban u n c pht trin trn nn X Windows, mt mi trng da vo Unix. (Lc Unix l h iu hnh ph bin nht cho cc h thng my tnh ni kt vi Internet). Sau , Nhng ngi lp trnh Mosaic bt u ngh ra cc phn m rng tu bin dnh cho HTML nWhng dn cu trc v strin ngn ng ny cho 1.5 World Wide Web l g? Theo W3C: World Wide Web l mng li ngun thng tin cho php ta khai thc thng qua mt s cng c, chng trnh hot ng di cc giao thc mng. World Wide Web l cng c, phng tin hay nInternet. Hiu th no l dch v Internet? l nhng cch thc c s dng trn Internet nhm gip cho vic trao i thng tin tr nn thun tin v d dng. Khng ging vi nhng dch v khc ca Internet, Web cung cp thng tin rt a dng, bao gm vn bn, hnh nh, m thanh, video, ngha l nhng g chng ta c th cm nhn c. Thng tin c biu din bng trang Web theo ng ngha ca mt trang m chng ta c th nhtnh. Mi thng tin u c th biu th trn trang Web , k c m thanh, hnh nh ng. Nhng vn l th nht ca Web nm kha cnh khc. Trang Web bn nhn thy trn mn hnh my tnh c kh nng lin kt vi nhng trang Web khc, dn ta n nhng ngun thng tin khc. Kh nng ny ca Web c bn cht l a ch tr ti ngun thng tin (trang Web) nm u trn Internet. Bng nhng siu lin kt ny, cc trang Web c th lin kt vi nhau thnh mt mng chng cht, trang ny ch ti trang khc, cho php ta chu du trn bin c thng tin.

1.6 Trnh duyt Web:

11



itcvdcRectangle

World Wide Web c bt u ti CERN (Conseil European pour la Recherche Nucleaire, by gi c gi l European Laboratory for Particle Physics). Mc d tng v Web xut pht t nhiu ni khc nhau, nhng mt ngh ban u c vit bng vn bn v c thng tin ti CERN vo nm 1989. CERN cn chu trch nhim v vic pht trin b trnh duyt Web u tin, v b trnh duyt ny c xut bn vo nm 1990.

nh duyt vi cc giao din ha m chng ta

r for Supercomputing Applications), t c s

thnh lp Mosaic Communications

n ca Netscape Navigator, vi bit dnh

t chy trn truyn hnh y gi thm ch khng cn s dng my tnh

ai b trnh duyt chnh c s dng ngy nay l Netscape Navigator v

Cc tnh nng y cho php trnh by cc trang phc tp hn, bao gm vic b tr nhiu ct

a ny h tr cc phn m ng Netscape. Cc tnh nng bao gm s h tr i vi cc khung (frame),

mt tnh nng trnh by trang trn Netscape Navigator 2.0 cho php hin th

B trnh duyt u tin ny c son tho trn mt my NeXT-Step. Khng ging nh cc b trthng nhn thy ngy nay, n ch hin th vn bn (text). Cc b trnh duyt khc cng sm c pht trin, bao gm Erwise, Viola, v Lynx. Ngy nay, nhiu my vn cn s dng cc b trnh duyt khng thuc ha ny, c bit l Lynx. Lynx c s dng ch yu trn cc h thng Unix v VMS, mc d n c sn i vi tt c cc trnh ng dng ln. Sau , NCSA (National Centeti trng i hc ca Illinois Urbana-Champaign, bt u quan tm n Web v bt u pht trin mt b trnh duyt. B trnh duyt ny, Mosaic for X, c xut bn rng ri trn cc nn X, PC/Windows v Macintosh vo thng 9 nm 1993. Mt trong nhng ngi lm vic trn n ny l mt sinh vin ti NCSA, cha tt nghip, tn Mark Andreessen. Vo nm 1994, Mark Andreessen v nm ngi khc ri NCSA Corporation, sau tr thnh Netscape Communications Corporation. Netscape xut bn phin bn u til "Mozilla", vo cui nm 1994. Trong khi , Microsoft pht trin Internet Explorer (lE), l i th cnh tranh chnh ca Netscape; Sun Microsystems pht trin HotJava; v America Online (AOL) pht trin b trnh duyt AOL ca ring h. Gn y, mt ng ty c tn l WebTV gii thiu mt b trnh duyc

nh s dng mt hp set-top. Btruy cp Web! HMicrosoft Internet Explorer. Thng 10 nm 1994 Netscape gii thiu Netscape Navigator 1.0 min ph i vi ngi s dng thng qua lnternet. Thng 3 nm 1995 Netscape Navigator 1.1 c cng b. N bao gm s h tr i vi cc tnh nng trnh by cao cp nh s dng cc font ha v cc bng biu HTML 3.0. ntext v cc hnh nh linh ng. Thng 9 nm 1995 Netscape gii thiu Netscape Navigator Gold 2.0, b trnh duyt ny cho php ngi s dng to, chnh sa v nh hng cc ti liu c tuyn mt cch d dng. V bn cht, b chnh str

r

12



itcvdcRectangle

nhiu c th c cun mt cch c lp trn mt mn hnh n; cc font v cc bng biu HTML 3.0. Thng 1 nm 1996 Netscape cng b cc plug-in, y l cc phn mm nh ci n cc tnh nng ca b trnh duyt.

y Modeling Language (VRML).

hng 8 nm 1996 Netscape cng b Netscape Navigator 3.0 h tr c Java v

Navigator.

ni ternet

xplorer 3.0.

hng 10 nm 1996 Netscape cng b Netscape Communicator, b trnh duyt

1997 Microsoff gii thiu Internet Explorer 3.0 cui cng dnh ho Macintosh. Microsoft lnternet Explorer 3.0 cung cp s h tr y i

bng biu, cc khung v cc khung ci tin (khng c ng bin v di ng). Vi phin bn ny, lnternet Explorer tr thnh b trnh

tiThng 4 nm 1996 Netscape cng b Netscape Navigator 3.0. N h tr cc th HTML mi, bao gm mu nn trong bng biu v cc chc nng nhng audio v video. Microsoft Internet Explorer 2.0 dnh cho Macintosh c xut bn. N h tr plug-in Shockwave, cc th HTML 2.0 v 3.0, QuickTime, v Virtual Realit Thng 5 nm 1996 Microsoft i *nternet Explorer 3.0 Beta sn sng. Thng 6 nm 1996 Netscape cng b rng c trn 130 nh pht trin plug-in ang to cc plug-in lm vic vi Netscape Navigator. N cng cng b rng site Internet ca n nhn trn 80 triu lt truy cp mt ngy v tch ly trn 10 t lt truy cp k t khi bt u. Microsoft tip tc pht trin IE 3.0, v s gii thiu kh nng m rng qua cc Active X control. TJavaScript. Mt s nh pht trin thuc nhm th ba lp ra cc s pht trin cc plug-in nhm tn dng tnh nng ca Netscape Navigator 3.0. c 175 plug-in c cng b cho Netscape Microsoft tung ra lnternet Explorer 3.0. Cc Web site ng u cung cp dung min ph m c th ch c xem bi nhng ngi s dng lnE Tny hp nht phn mm b trnh duyt Netscape Navigator 4.0, phn mm to HTML Netscape Com-poser, th in t Netscape Messenger, phn mm tho lun nhm Netscape Collabra, v phn mm cng tc thi gian thc Netscape Conference. Netscape cng b Netscape Navigator 4.0, bao gm s h tr i vi s nh v tuyt i, to lp v stylesheet, cc font HTML mi, v s h tr i vi Netscape ONE (the open network environment). Thng 1 nmcvi HTML 3.2, cc duyt u tin cho php nhng ngi s dng Macintosh xem cc trang Web c to nh s dng cascading stylesheet chun ca HTML.

13



itcvdcRectangle

Thng 4 nm 1997 Microsoft cng b Microsoft Internet Explorer 4.0. S h tr stylesheet ci tin. Dynamic HTML, v Active Desktop c xem nh l

i khi bn cn tm hiu b trnh duyt c nhng c tnh no v ai h tr chng. iu quan trng l bn phi nhn bit cc c tnh no c h tr bi cc b trnh duyt no v chng c thc thi ln u trong cc phin bn no. Nm vng iu ny, bn s c th thc hin cc quyt nh v kiu thit k v cc c tnh ca cc Web site da vo s phn tch cc s liu thng k server i vi nhng b trnh duyt no m ngi xem ca bn ang s dng v bao nhiu ngi trong s h khng th nhn thy cc c tnh m bn s dng. Trong mc ny, chng ta s xem xt chi tit hn v cc b trnh duyt m bn c th gp. Netscape Navigator Netscape Navigator hin ang l mt trong cc b trnh duyt ph bin nht trn World Wide Web. Trong khi b trnh duyt ny c sn nh l mt trnh ng dng ring bit, Netscape cng a n vo mt b sn phm c tn l Netscape Communicator; Communicator bao gm khng ch b trnh duyt, m cn cc cng c khc cng tc. i vi cc mc ch tho lun y, chng ta s ch xem xt b trnh duyt. a phng tin truyn thng, s tng tc, v cc k thut to hnh ng. C nhiu cch thc thi s tng tc hay di chuyn trn mt site. Mt cch l s dng GlF ng, m trong mt lot cc file GlF ti trn trang theo trnh t GlF l mt dng ha Netscape Navigator cng h tr th EMBED, tuy khng phi l HTML chnh thc, nhng n cho php nhng mt file audio. Th EMBED hot n. File

c nhng

mt ln sng mi trong s trnh duyt. Thng 7 nm 1997 Microsoft chng thc HTML 4.0 ca World Wide Web Consortium v cng b s h tr trong M icrosoft Internet Explorer 4.0. Cc c tnh chnh ca cc b trnh duyt

ng i vi cc phin bn ca Navigator 2.0 v cao hc iu khin bi mt plug-in.

14



itcvdcRectangle

itcvdcNoteUnmarked set by itcvdc

Hnh 1.6: B trnh duyt Netscape Navigator 7.0

Mt cch khc b sung s tng tc v a phng tin truyn thng vo Web l s dng Java v JavaScript. Java l mt ngn ng lp trnh theo hng i tng vi y c tnh v n c th c s dng chn cc applet vo cc trang Web hoc vit cc trnh ng dng ring bit. Java c th c chn vo mt trang HTML bng cch s dng th APPLET, c h tr bi Netscape 2.0 v cao hn, mc d n khng xut hin trong c t HTML chnh thc, cho n HTML 3.2. Mt khc, JavaScript l mt ngn ng to script v khng c s dng pht trin cc trnh ng dng ring bit. N c thc thi nh s dng th SCRIPT, nhng khng c thc thi trong Navigator cho n phin bn 3.05b. Cc plug-in, l cc mu phn mm nh c s dng m rng cc tnh nng ca mt chng trnh phn mm, c thc thi trong cc b trnh duyt Web bi Netscape Communications dnh cho Navigator bt u vi phin bn 2.0. Cc plug-in c th c s dng xem audio, video, 3D v nhiu th khc. Thm ch bn c th s dng chng xem cc mn hnh nn ca nhng ngi s dng khc. N ch ph thuc vo plug-in no m bn c (v bao nhiu RAM m bn c th dnh ring cho n!). n c th b sung cc form vo Web site ca bn bB ng cch s dng th

n c th s dng cc form tr li bt k cu hi no m bn FORM . Bthch, ly thng tin v nhng ngi s dng, v cung cp cho h mt c hi phn hi. Cc form c h tr bi Navigator k t phin bn 1.1.

15



itcvdcRectangle

Cc table, layout, v style Cc table l mt s tin b ln khi nhng ngi thit k Web sau cng c th trnh by thng tin trong cc hng v cc ct bng cch s dng cc table thay v text c nh dng sn. Netscape Navigator h tr cc table k t

n hn, bn nhn thy cc ame (khung). Mi frame ny c th c cun qua mt cch ring l. avigator h tr cc frame n gin k t phin bn 1.1. Nhiu c tnh th

cc mu frame) khng c h tr cho n phin bn 3.05b.

t stylesheet (mt ti liu ring). iu ny c ngha rng ngi thit k nh mu on trong stylesheet. N cho php ngi thit k thay

hi mt ngi thit k ha c th yu cu mt trang chuyn v ha. Mt u im khc ca cc stylesheet l chng gip cho vic to Web

hn nhiu - chng hn, tt c cc table ca bn th t ng c hnh dng ging nhau. Bn s tm hiu thm v cc stylesheet

c stylesheet cho n nhiu ngi cha nhn thy chng.

xung cc hnh nh bn c th xem hng. Cc hnh nh ni tuyn c h tr bi Navigator k t phin bn

1.0. Cc hnh nh thng c s dng nh l cc lin kt. Mt cch s dng ca cc hnh nh l ng cc bn nh (imagemap). Mt bn nh l m , mi phn lin t bn vi mt ni khc trn Web. Cc bn nh, ging nh cc hnh nh,

phin bn 1.1, mc d mt s thuc tnh i vi th TABLE c b sung vo sau ny. Cc table tht s l mt c tnh thun li. Nu bn tng truy cp Web v i qua cc Web site c nhiu "" khc nhau, hay cc mc ring l trong ca s b trnh duyt lfrNv (chng hn nhTin b mi nht v style khi truy cp Web l stylesheet, mt khi nim ln u tin c thc thi trong mt b trnh duyt chnh bi Microsoff Corporation. tng ng sau cc stylesheet l ngi thit k Web c th ch nh cc thnh phn thit k cho ton b site trong mt ni. Chng hn, mt ngi thit k c th cho tt c cc on c font l mu xanh dng, v sau mi on s t ng c mu xanh dng. on nhn thng tin mu xanh dngch cn chi tt c cc on trn site sang bt k mt mu khc bng cch thay i stylesheet thay v thay i mi on. c tnh ny tit kim cho bn rt nhiu thi gian. C nhiu u im khc i vi cc stylesheet, chng hn nh kh nng gi cc stylesheet khc nhau cho nhng ngi s dng khc nhau. Mt ngi ang s dng mt b trnh duyt da vo li ni c th yu cu mt ti liu rt n gin, trong ksite nht qun tr nn d dngctrong chng 7. By gi, bn ch cn lu rng chng c h tr bi cc b trnh duyt mi hn. Netscape khng h tr cNavigator 4.0, v vy Hnh nh Kh nng c cc hnh nh em li cho Web mt u im vt tri so vi Gopher, tin thn ca n. Trong khi khng phi tt c cc b trnh duyt u c th xem cc hnh nh ni tuyn, nghi l trn cng mt trang vi text, tt c cc b trnh duyt u c kh nng ti c

dt nh c th nhp c chia thnh nhiu phn

kc thc thi trong Netscape k t phin bn 1.0.

16



itcvdcRectangle

Th v tin tc Nhiu b trnh duyt cho php ngi s dng c v gi e-mail hay cc bi bo Usenet newsgroup. Phng php tt c trong mt ny l mt phng php ph bin, trong n cho php nhng ngi thit k Web site hp nht cc lin kt vi cc newsgroup archive hay cc a ch e-mail nht nh nm ngay trong cc trang Web ca chng. C th v tin tc u c m t bi Navigator k t phin bn 1.0, mc d giao din ny thay i i cht vi cc phin bn mi n.

u bn d nh c mt Web site m nhng ngi s dng ca n c th mua hng ha. Hy xem chng 22 bit thm chi tit v Web

icrosoft lnternet Explorer hin ang phin bn 6.0. Microsoft pht trin , bao gm cc stylesheet v ActiveX.

tng tc, v cc k thut to hnh ng h tr cc k thut to hot hnh GlF. N cng h tr cc applet Java k

n 3.0b2. S bao hm ca th SCRIPT i vi JavaScript xut

hBo mt Trong khi c nhiu loi m ha trn Internet, bn c th quan tm n vic bo m s bo mt. Bt u vi Navigator 3.0, cc chng nhn k thut s c h tr. Cc phin bn mi hn ca Netscape c mt biu tng cha kha di cng cho php bn xem mt giao tc c an ton hay khng. iu ny s quan trng hn nbcommerce. Microsoft Internet Explorer Mmt s cng nghCc c tnh chnh : a phng tin truyn thng, sIEt phin bhin cng vi phin bn 3.0. Microsoft cng sao chp tng plug-in ca Netscape - hin c nhiu plug-in dnh cho c Navigator v IE. IE h tr cc form ngay t lc u - phin bn 1.0.

17



itcvdcRectangle

Hnh 1.7: B trnh duyt Internet Explorer 6.0 C l bin i hp dn nht trong vic pht trin IE l s gii thiu ca ActiveX. ActiveX c sng to bi Microsoft, iu chnh cc cng ngh hin c OLE 2.0 v OCX cho ph hp vi cc trnh ng dng lnternet. Mt ActiveX control l mt s kt hp gia mt plug-in v mt applet Java - n b sung tnh nng hot ng ging nh mt plug-in, v n chy mt cch c lp vi b trnh duyt, ging nh mt applet. Khng ging nh mt applet, ActiveX control c ti xung v c cha trn a cng ca ngi s dng.

c ActiveX control hin khng c h tr bC i bt k b trnh duyt no c d c mt plug-in Navigator cho php bn xem cc ActiveX ngoi IE m

control. S h tr i vi ActiveX bt u vi phin bn IE 3.0. Cc table, layout, v style Microsoft Internet Explorer h tr cc table k t phin bn 1.0 v cc frame k t phin bn 3.0. Cc ty chn m n h tr i vi cc frame hi khc vi

18



itcvdcRectangle

cc ty chn c h tr bi Netscape Navigator, v Microsoft pht minh ra cc frame (nh s dng th (FRAME). Bn s tm hiu thm v cc frame trong chng 5. Hnh nh IE h tr cc hnh nh k t phin bn 2.0. N khng h tr nhiu ty chn

chng hn nh canh gia, hoc dn text xung quanh i tng

IE h tr vic c v gi e-mail, cng vi vic c v gi n cc newsgroup.

ing nh Navigator, IE h tr cc chng nhn k thut s bo m s an n. Ngoi ra, IE c mt cng ngh c gi l Authenticode. Authenticode

ngi to phn mm k nhn phn mm ca h bng k thut nhng ngi s dng c th bit chc rng phn mm ny (bao gm c

ng IE m nhiu b m tm thy hp dn l kh nng s dng

ynx c pht trin ti trng i hc Kansas s dng trn h thng ca n da

n cho cc nh ng dng khc. N c bit ph bin cc trng i hc v trung hc,

g c cc Unix shell account. n c th c

u hnh di dng mt text reader c cc dng t cc trang Web. Vi h chng c cu hnh vi phn cng audio thch hp c gi l mt

tin da vo text. Bi v b trnh duyt ny khng ti cc hnh nh vo te c th nhanh chng c lt

ynx l mt b trnh duyt text-only, v vy nu bn mun ha hp vi nhng Lynx, bn s phi cung cp cc phng thc khc i vi hnh

ynx ti chng xung. ynx l mt v d hon ho v mt iu g m chng ta thng nhn thy

i phn mm - thng c mt s trao i gia cc c tnh (chng

b tr hnh nh, nh. IE cng h tr cc bn nh. Th v tin tc Bt u vi phin bn 2.0, Bo mt Gtocho php nhngsapplet Java) n t ni ging nh h ngh. Mt c tnh tro"parental controls" c ci sn vo b trnh duyt. Cc ci t ny s khng cho php ngi s dng xem cc Web site vn c cc ni dung khng th chp nhn c. Lynx Lring h. Phin bn hin hnh l 2.6. Lynx l mt b trnh duyt c hvo text v c u im chy trn cc h thng c hn. N c s dng phn ln trn cc h thng Unix v VMS, mc d bn c th s dng trni m cc sinh vin thnLynx cng ph bin i vi mt s ngi b khim th bi vcthng ca b tng hp ting ni, my tnh c ln cho ngi s dng. Ngoi ra, nhiu ngi s dng Web s khi ng Lynx khi h vi v mun tm cc ni dung thng nhiu i tng c kch c file ln, nn cc siqua tm ni dung thch hp. Lngi s dng nh nu khng hy cho php nhng ngi s dng LLtrong th gi

19



itcvdcRectangle

hn nh hnh nh, kiu nh dng, v cc frame), v cc yu cu h thng (chng hn nh cc vn nn ng dng v RAM). Trong khi Lynx khng h tr nhiu c tnh mi hn, bn cng khng cn nhiu RAM v mt my mi n chy n: Vi giao din dng lnh ca Lynx, n c th c a vo s ng nu bn quen vi vic tr v nhp chut.

a phng tin truyn thng, s tng tc, v cc k thut to hnh ng

cn nhp chut vo trong mt trng v g

bit th TABLE v sau phn chia thng tin ra nh mt loi form trnh by. Ngha l, tt c thng tin u nm v ngi

hng

nh by sau trong sch ny. c frame trong Lynx tng t nh cc table - trong khi Lynx nhn bit v x

frame, cc kt qu c th hon ton khc vi nhng m bn mong mun. Thay v m phng cc frame, Lynx cung cp cc lin

tr cc stylesheet.

, n lm vic vi cc bn nh. ynx lm vic tt hn vi cc bn nh pha client bi v n gip cho b

ng tm ra ni m cc vng khc nhau ca bn dn n. Trn

mt bn pha server, b trnh duyt nhp chut v mt cp a c gi n server. Lynx ch c kh nng gi cc ta (0,0), v v

ng cch ny khng em li hiu qu tt.

n khng th c e-mail ca bn t trong Lynx. Tuy nhin, bn c th gi e-ail t Lynx nu c mt lin kt n mt a ch e-mail hay mt tc gi

nh trong trang HTML. Lynx h tr vic c cc newsgroup v tr i cc bi bo newsgroup.

hd Lynx khng h tr cc GlF hnh ng, th EMBED, Java, JavaScript, cc plug-in hoc cu trc ActiveX. Lynx khng h tr cc form, mc d nhng ngi s dng Lynx phi nh hng qua chng nh s dng cc phm mi tn hay phm TAB trn bn phm thay v chnhp ni dung ca chng. Lynx c th iu khin cc hp kim, cc nt radio, cc nt thng thng, cc danh sch chn, v cc vng gi text. Cc table, layout v style Lynx khng h tr cc table, mc d n khng nht thit phi hin th chng nh bn mun. N nhnths dng c th tm ra h thng phn cp v theo di cc lin kt nu c, nbn s khng ph thuc qu nhiu vo cc hng v cc ct. Nu bn mun lp cc table c ngha i vi nhng ngi s dng Lynx, bn c th cn s dng th PRE, c trCl cc th kt hp vi ccgkt text vi cc frame khc nhau trn mt trang HTML. Sau , khi bn hc cch to cc frame, bn s tm hiu thm v th NOFRAMES, n c s dng cung cp ni dung thay th cho cc b trnh duyt vn khng hon ton h tr cc frame. Lynx khng h Hnh nh Nh c lu trn, b trnh duyt Lynx khng h tr hnh nh. Tuy nhinLtrnh duyt d dmt bn pha client, b trnh duyt c c hi x l text khc. Hy ghi nh rng, v khng c hnh nh, nn bn c hin th trong Lynx di dng cc lin kt text. Trn tvy ph Th v tin tc Bmc ch l

20



itcvdcRectangle

Bo mt Lynx hin khng h tr bt k c tnh an ton b sung no. NCSA Mosaic Ging nh Lynx, NCSA Mosaic l mt b trnh duyt c pht trin ti trng i hc. NCSA Mosaic l mt b trnh duyt c hn vi cc tnh nng gii hn, mc d

c th x l cc th HTML v cc loi file nhiu hn so vi Lynx. Mt nht gia NCSA Mosaic v Lynx l Lynx h tr

v cc k thut to hnh ng saic khng h tr cc GIF ng, th EMBED, cc applet Java,

c table, layout, v style tr cc table, cc frame, hay cc stylesheet.

u vi phin bn 2.0, Mosaic c th hin th cc file nh GlF v G .

bn trc y khng h tr ha.

Th v tin tc CSA Mosaic khng h tr vic c th v tin tc.

o mt n c

cc

AOL Vo nm 1995, nh cung cp dch v trc tuyn ln nht th gii, America Online (AOL) pht trin mt b trnh duyt Web. B trnh duyt AOL cho php nhng ngi s dng AOL chn bt k b trnh duyt no m h mun s dng cng vi dch v AOL.

ntrong cc im khc bit ln cc kiu nh dng file ha. Vo thng 1 nm 1997, Mosaic chm dt pht trin bt k phin bn mi no ca b trnh duyt. Tuy nhin, nhiu ngi vn cn s dng n. Mosaic c sn i vi cc trnh ng dng X-Windows, Macintosh v PC. a phng tin truyn thng, s tng tc, NCSA MoJavaScript, hay plug-in hoc cu trc ActiveX. N h tr cc form. CMosaic khng h Hnh nh y l mt trong cc lnh vc m trong Mosaic tin b hn nhiu so vi Lynx. Bt JPCc phinNCSA Mosaic khng h tr cc bn nh.

N BGing nh Lynx, NCSA Mosaic khng c cc h thng bo m an toci sn trong b trnh duyt. N khng h tr mt c tnh ging nh chng nhn k thut s.

21



itcvdcRectangle

i vi ngi s dng, li ch ca vic s dng b trnh duyt AOL l h c vo Web mt cch nhanh chng - mi th i qua AOL v c rt t th m

hi ti xung v cu hnh. im hn ch l cht lng ca b trnh duyt AOL km. Phn ln mt Web site c thit k lm vic tt trn cc3.0 aBJav ay cc thnh phn ActiveX. N h tr cc form.

B trnh duyt AOL h tr cc table v cc frame. B trnh duyt nhn bit th TABLE nhng khng c nhiu thuc tnh (hay ty chn) dnh cho n. C cc table v frame u c thc thi bt u vi phin bn 3.0. B trnh duyt AOL khng h tr cc stylesheet. Hnh nh Tt c cc phin bn ca b trnh duyt AOL u h tr ha v cc bn nh. Th v tin tc B trnh duyt AOL cho php khch hng s dng th v tin tc, nhng s truy cp b gii hn i vi nhng g m AOL cung cp - khng c s truy cp trc tip vo Internet. Bo mt B trnh duyt AOL khng cha bt k c tnh no tng s an ton cho cc giao tc trc tuyn. N khng h tr cc chng nhn k thut s. Web TV B trnh duyt WebTV cho php ngi s dng truy cp lnternet thng qua mt my truyn hnh. Mi trng ngi s dng tt khc vi mt my tnh, v vy nu bn quyt nh rng bn mun thu ht cng nhiu ngi s dng WebTV cng tt, bn nn kim tra cch hot ng phn m rng ca chng. a phng tin truyn thng, s tng tc, v cc k thut to hnh ng

a

N khng h tr th EMBED. cc applet Java, JavaScript, cc plug-

thngi s dng p

b trnh duyt khc u cn phi c mt "phin bn AOL" mi. Phin bn l phin bn sau cng.

phng tin truyn thng, s tng tc, v cc k thut to hnh ng. trnh duyt AOL khng h tr cc GIF ng, th EMBED, Java, hay aScript. N cng khng h tr cc plug-in h

Cc table, layout v style

B trnh duyt WebTV phin bn 0.9 h tr cc GIF ng v cc form, mc dn khng h tr s m ha ( bo m an ton) i vi thng tin c gi qucc form. in, hoc ActiveX.

22



itcvdcRectangle

Cc table, layout v cc style WebTV h tr cc table, tuy khng tun theo cch thng thng. B tduyt WebTV khng h tr cc frame hay stylesheet. Mt trong cc

rnh quy c

u rng ng

ri v s hin th khi c xem cc Web

nh nh trnh duyt WebTV h tr ha. C nhiu phn m rng chuyn bit i

c bn nh pha client.

h v tin tc trnh duyt WebTV cho php ngi s dng gi v nhn e-mail nhng hng c mt giao din trc tip i vi cc tin tc Usenet. Nhng ngi s ng vn c th c cc bi bo newsgroup c truy cp i xng trn cc eb site.

o mt trnh duyt WebTV khng cha bt k thnh phn bo m s an ton no, ao gm s h tr i vi cc chng nhn k thut s.

m tt chng:

hng bn nhng kin thc mang tnh khi nim v ternet, Web v cc tnh nng ca cc b trnh duyt web. Bn c th thy c ngun gc, s pht trin ca Internet, web mt cch khi qut.

kh hiu nht ca WebTV l thit b u cui c ci t vi mt chic nh l 544 pixel v n khng h tr vic cun theo chiu ngang. Nhngi s dng c kh nng gp cc rc site vn s dng cc thnh phn rng hn. HBvi WebTV. N cng h tr c TBkdW BBb

T C ny cung cp cho In

23



itcvdcRectangle

Ch 2.1

m

2.2 M

ng 2: Tng quan v mt h thng Web

Gii thiu Mt h thng Web l mt h thng cung cp thng tin trn mng Internet

ng qua cc thnh phn My ch, trnh duyt v ni dungth thng tin. Trong chng ny s gii thiu mt cch c bn nguyn l hot ng ca

t h thng Web cng nh cc thng tin lin quan ti cc cch thc xc h v tr ngun thng tin, cch thc trao i d liu gia my ch vi n

trnh duyt v cch thc th hin thng tin.

hnh h thng Web ni chung

Mng dch v Web l mng cc my tnh lin quan n dch v Web bao gm cc my ch dch v, cc my tnh v thit b phc v cho vic cung cp dch v Web. H thng bao gm: - ng kt ni vi mng cung cp dch v Internet

24



itcvdcRectangle

- Cc my ch cung cp dch v Web: cung cp cc dch v web hosting, cha cc phn mm Application Server m o vic pht trin cc dch v trn

2.3

Khi my client kt ni vo Internet (thng qua h thng mng LAN hay cc ng dial up..), ngi s dng dng trnh duyt web (web browser) g a ch tn min cn truy nhp (v d: http://home.vnn.vn) gi yu cu n my ch Web. Web Server xem xt v thc hin ht nhng yu cu t pha Web browser gi n. Kt qu l mt trang "thun HTML" c a ra Browser. Ngi s dng s hon ton trong sut vi nhng g ng sau ca mt Web server nh CGI Script, cc ng dng c s d liu. Trng hp l web tnh th web server s ly thng tin lu sn trn my ch dng th mc, file gi li theo yu cu ca client. Trng hp web ng (dng cc ngn ng lp trnh web nh ASP, PHP, JSP, CGI ... kt ni v khai thc c s d liu.

Mt v d: Khi c k hoch i cng tc ti H ni, A bit c th tm c cc thng tin lin quan ti thi tit H ni ti a ch Web

bweb, kt ni n cc c s d liu trn cc my tnh khc, mng khc - Cc my ch c s d liu, my ch chng thc, my ch tm kim ... - H thng tng la (c phn cng v phn mm) m bo an ton cho h thng my ch vi mi trng Internet. - H thng my trm iu hnh, cp nht thng tin cho my ch Web...

. Nguyn tc hot ng

http://home.vnn.vn http://home.vnn.vn

Server answer Server answer

I

ClienWeb Server

nternet

CGI API.

base

Greeting! Well come to Our site VNN Web Site on the Net We hope that you will find every thing you are looking for

Greeting! Well come to our site

thing you are looking for

Brows

Server HTM

Data We hop that you will find every

25



itcvdcRectangle

"http://hanoi.vnn.vn" a ch ny chnh l mt URI (Uniform Resource Identifier - world wide web address) . Khi A nhp URI trn vo trnh duyt th: 1. Trnh duyt s thc hin gi yu cu ly thng tin ti a ch xc nh

trong URL thng qua giao thc truyn d liu c tn l http. 2. My ch ni cha thng tin s xc nh nhng thng tin cn thit theo

yu cu da trn URI ca ngi s dng gi ti. Truyn thng tin lin qua ti yu cu ti ngi s dng thng qua giao thc truyn thng http.

3. Trnh duyt sau khi nhn c kt qu tr li ca my ch s tin hnh trnh by d liu kt qu nhn c theo khun dng nht nh. Bn thn trong kt qu nhn c cng bao gm cc lin kt ti thng tin v tr khc trn Web v cc v tr ny cng c xc nh bi cc URI.

Trong v d trn gii thiu cho chng ta ba cu trc ca Web gm: Xc nh v tr thng tin, Trao i v cch th hin thng tin:

1. Xc nh v tr thng tin: Mi resource trong Web s c xc nh bi Uniform Resource Identifier (URI). Trong v d trn, resource dng ly tng tin v thi tit H ni c xc nh bi URI: "http://hanoi.vnn.vn".

2. Trao i thng tin: Cc tc nhn ca Web (trnh duyt browser, web server, ) thc hin trao i thng tin thng qua cc message, cc message ny c hnh thnh khi c yu cu ca ngi s dng hoc khi thc nh ngha cch thc trao i d liu gia cc tc nhn trong Web, trong

th l: HTML, XML, dngha ny, trnh duyt s tr u c th gip ngi s dng khai thc thng tin m dng.

hin cc tin trnh x l d liu. Cc giao thc (Protocols) s

v d ny l giao thc HTTP.

Th hin thng tin: Cc message c hnh thnh khi trao i thng tin gia cc tc nhn trong web cha cc nh dng d liu. Ty thuc vo tng yu cu c th m cc inh dng th hin d liu s khc nhau. Trong trng hp khi nhn kt qu tr li t cc web server, cc nh dng c

liu nh, Da trn cc nh dng c nh nh by li sao cho d lit cch d

26



itcvdcRectangle

Ch

i a s cc trang Web trn Internet vit bng ngn ng HTML. Nu chng ta hng tho lm v ngn ng ny, chng ta vn c th to c cc trang Web dng thng qua cc chng trnh tm gi l cng c lm Web. C rt nhiu hng trnh nh vy v d nh: Frontpage, Hotdog, Dream weaver... rong ti liu ny chng ti gii thiu vi cc bn s dng chng trnh rontpage 2002:

- M, ng, to mi, ghi mt trang Web. - nh dng font ch, paragraph, mu ch, ...

- Lm vic vi bng.

- To Form

ng 3: Frontpage 2002 (Front page XP)

kdcTF

- nh, m thanh, ...

- Hyperlink, Bookmark.

Hnh 3.1: Giao din Frontpage 2002 ca s son tho

hi m Frontpage 2002, ging nh bt c mt chng trnh son tho no, chng ta s thy mt lot cc cng c pha trn. Cc cng c ny c th cho hin th hoc khng bng cch click chut phi ln thanh cng c ri chn loi cng v cn hin th.

K

27



itcvdcRectangle

Vi Frontpage c th son tho trang trc tip bng giao din trc quan hoc xy dng trc tip bng th HTML

Hnh 3.2 Giao din Frontpage 2002 ca s m

.1 M, ng, to mi, ghi mt trang hay mt Web site

mc trn my nh mt website. Khi ti s cc file windows qun l

tn _private, _vti_cnf, _vti_pvt). ny khng cn gi tr s dng v th

c k ng file ny.

Web ...

3+ To mi mt trang hay mt Website: Frontpage c kh nng coi mt thth mc c coi l website s sinh ra mt (Cc file ny nm trong cc th mc c Khi a website ln mng th cc filetr hi a ln mng chng ta nn xo b ton b nh Trn thanh cng c vo: File --> New --> Page or

28



itcvdcRectangle

Hnh 3.

Hnh 3.4: Chn template Sau chn trang cn to: C th chn mt trang trng (Blank page) hoc chn trang theo mt thit k c sn ca Front page(Page template) ri chn mt trong s cc mu c sn (C th l Frame). i vi Website chn Empty Web hoc Website Template. + M mt Website (Mt th mc c coi l Website):

Trn thanh cng c vo: File --> Open Web

3: To m t trang hay web

29



itcvdcRectangle

Hnh 2.5: M Website

. Sau chn th mc cn xy dng

Hnh 3.6: Chn th mc web 3.2 nh dng font ch, paragraph,... Font ch: Format --> Font... ri chn font cn hin th, v mu hin th ca don text. Hoc bn c th chn ngay ti Dropmenu font cn hin th (Ging mt s trnh son tho vn bn khc) v mu ti biu tng ch A trn thanh cng c. Paragraph: La chn on vn bn cn nh dng (Bi en), click chut phi vo on n bn ri chn Paragraph.

30



itcvdcRectangle

Hnh 3.7: t paragragh C nh dng theo: th

Alignment: Quy nh v tr ca on text . Gi tr: Defaut, left, right, center, Justify. - Identation: Xc nh l ca on text. Gi tr: Before text: Kho After text: Khong cch l phi.

trng u on text. c on text. Gi tr:

Line spacing: Khong cch gia cc dng trong on text.

-

ng cch l tri.

Ident first line: Khong- Spacing: Xc nh khong cch gia c Before: Khong cch pha trn on text. After: Khong cch pha di on text.

31



itcvdcRectangle

Hnh 3.8: Chn tham s paragraph 3.3 nh, m thanh nh, m thanh trong trang Web khng ph c xy dng trong trang

n c gi t file nh i. i l n

hay file m thanh bn ngomChn nh: Insert --> Picture -->From file... ri chn file nh cn chn.

Hnh 3.9: Insert nh

c tnh ca nh: Chn nh cn t thuc tnh, click chui phi chn Picture Properties...

32



itcvdcRectangle

Hnh 3.10: t c tnh ca nh

am s cho nh Hnh 3.11 : Chn th

33



itcvdcRectangle

To m hut phi vo trang chn Page properties, Ti mc background sound chn file m thanh cn chn.

thanh cho trang: Click c

m thanh nn

Table tham s sau: Size:

Alignment: V tr ca bng trong trang. Gi tr: Default, left, right, center. Border size: dy ca ng vin bng. Cellpadding: Khong cch phn t trong cell n ng vin bng. Cellspacing: Khong cch phn t ngoi cell n ng vin bng. Specify width: rng ca bng. Bn cng c th to bng bng biu tng trn thanh cng c hoc c th v bng bng cch Table --> Draw Table. Bn mun sa bng click chut phi vo bng cn sa chn Table Properties... cng c cc tham s nh trn.

Hnh 3.12: t 3.4 Bng(Table) To bng:

--> Insert --> Table... sau bn in cc- Rows: S lng hng trong bng. Colums: S lng ct trong bng. - Layout:

34



itcvdcRectangle

Hnh 3.13: Chn Thuc tnh cho bng To mu nn cho mClick chut phi vo bng hoc cell cn o mu nn chn Table properties (vi

roperties (vi cell). Ti mc Background c 2 la chn - Color: Chn mu nn cho bng hoc cell.

t bng hoc mt cell: t

Table) hoc Cell p - Use background picture: Chn mt file nh c sn lm nn.

35



itcvdcRectangle

Hnh 3.14: t tham s ca bng

ng(Bookmark): t tn. Trn thanh cng c vo Insert --> Bookmark..., ti bn g tn cho i tng cn t.

3.5 Hyperlink, Bookmark t tn cho mt i tChn i tng cn phn Bookmark name,

36



itcvdcRectangle

Hnh 3.15: t bookmark cho mt i tng

l mt on text, c th l nh,...).

t --> Hyperlink... (Phm nng Crtl+K, cng c th click chut vo g qu cu trn thanh cng c), ti phn URL ca ca s mi hin bn

nh a ch cn link n l

To siu lin kt (hyperlink): Chn i tng cn to hyperlink (c thSau , vo Inserbiu tn

c.

Hnh 3.16: To hyperlink

n mt i tng t tn trong mt trang no , bn vn lm nh trn nhng sau khi nh c Bookmark bn chn tn ca i tng cn link ti.

link

a ch n trang , ti m

37



itcvdcRectangle

Hnh 3.17: t thu tnh cho hyperlink

ng link c s dng frame, bn c th ch nh trang link n

n Target frame click chut vo biu

Same frame: Trang hin th ame cha ng link. e: Trang hin th ton b ca s (khng thuc frame no).

ndows: Trang hin th sang mt ca s mi (Khng thuc ca s cha

ame: Trang hin th sang frame cha (bao frame c cha ng link).

ung(form): n t thuc form (cc form field) phi nm trong khung ny th mi c

ngha. Insert --> Form --> Form. Khi to khung lun c Submit: Gi d liu n mt mt i t ng x l khc (c th l mt chng

c tip qua Email,...). ng cc form field.

c

Nu trang cha hin th ti frame no bng cch, ti phtng ci bt, ri chn cc tham s:

vo ng frWhole framNew Wiframe). Parent fr3.6 To khung (form) a, To kh Mi ph

2 nt chc nng :

trnh CGI, c th gi trClear: Xa d liu tro

38



itcvdcRectangle

Hnh 3.18: Toform

b, To cc form field

Gi tr l mt dng k t

t c thanh trt (Scrolling text box): Text Box m nhiu dng k t

ert --> Form--> Check Box. tr l cc la chn logic. S dng trong trng hp chn nhiu gi

tr cng mt lc

- Hp la chn logic (Radio Button) : Insert --> ForGi tr l cc la chn logic. S ng trong trng hp chn mt gi tr

- Hp lrop-down menu.

- File U C tc dng gi file ln m

(Push button): sert-->Form-->Push Button.

ng tin m ta gn cho chng

: (Phi nm trong khung)

- Hp text mt dng (One line text box): Insert --> Form --> One-line Text Box

- Hp texInsert --> Form --> ScrollingGi tr l mt on vn bn g

- Hp la chn (Check box): InsGi

m--> Radio Button. d

duy nht. a chn trt (Drop-down menu): Insert --> Form --> DGi tr l mt danh sch cc la chn c to sn pload:

Insert --> Form --> File Upload y ch

- Nt bmInGi tr l th

39



itcvdcRectangle

Mi formclick chu

field c cc c tnh ring ca chng. la chn cc tham s ny ta t phi vo form field ri chn Form Field Properties..

h dng trang c to form

y hng dn v cch trnh by trang v cc k thut nh dng vn bn. Qua bn c th to g b ph thuc vo nhng gii hn ca HTML. Mc d Frontpage 2002 cung cp cho bn hu ht cc k thut xy dng, bn c th thy mt trang web rt va , nhng k thc bn thn n vn cha rt n ) khng cn thit.

n th trn trnh duyt khng hon ton theo o din frontpage rt hon ho. V vy cho

n thc nht nh v m ngun ca n nht l khi bn m l cc trang web ng.

a cun sch ny s hng dn bn cch s dng m ngun ng trong vic son tho trang web hiu qu.

Hnh 3.19 : Hn+

Tm tt chng Chng n

nhng trang web m khn

hiu nhng th m ngun (HTMLc th l l do khi trang web himun ca bn mc d trn giatrang web ca bn hin th tt hn bn cung cn phi c ki

un lp trnh, s

Phn tip theo cHTML vi cc th c bn s d

40



itcvdcRectangle

Chng(HTML:

4 Ngn ng nh du siu vn bn Hyper Text Markup Language)

m HTML(Hypertext Markup La nh du siu vn bn, mt ngn ng thng dng hin th Web.

Ngn ng HTML khng phi l mt ngn ng lp trnh. HTML gi l ngn ng ch v n gm cc tp hp nh cc nhm k t theo mt quy tc m bn dng quy nh kiu dng, v tr, cch thc ca vn bn, nh, m thanh hay bt c mt i tng no khc cng vi s lin kt gia chng.

Cc trang vit bng ngn ng HTML c cu trc nh sau:

>

vn bn

h c bn: Cch nh ngha th:

C 2 loi th:

- Th c ni dung: >

: Bt u mt th. : Kt thc mt th.

Th rng: (Trng hp ny khng c kt thc th)

.2.1 Cc th nh ngha on vn bn, kiu ch

Th P: nh ngha on vn bn.

bn

4.1 Khi ni

nguage) l ngn ng

tiu trang

Test

Day la noi dung doan text

Hin th trn trnh duyt

Hn n h 4.1: Hin th on vn b

Th H: Quy nh kch c ca tiu .

C php: Tiu

Trong : x =1,2,3,4,5,6. x cng nh c ch cng ln.

M ngun

Test

Tieu de co chu lon nhat (H1) Tieu de co chu lon thu hai (H2) .. .. .. Tieu de co chu nho nhat


42



itcvdcRectangle

Hnh 4.2: V d v tiu vn bn

Th B: Ch m.

C php: Phn ch m

M ngun

Test Phan text chu dam < >/html

Hin th duyt trn trnh

Hnh m 4.3: on vn bn ch

43



itcvdcRectangle

Th I: Ch nghing.

C php: Phn ch nghing

M ngun

Test Phan text ch

u nghieng


Hnh 4.3: on vn bn ch nghing

Th U

>

M ngun

: Ch gch chn.

C php: Phn ch gch chn

Hnh 4.4: on vn bn ch gch chn

Th F

C php:

M.V

ONT: Quy nh font ch.

LOR=m mu hoc tn mu

t s tn font thng dng: .VnTime; .VnTimeH; .VnArial; nArialH;.VnAvant; .VnAvantH;...

M ngun

Test

body> Phn text c font Arial theo chun Unicode, c ch bng 2, m

Danh sch mc 1 Danh sch mc 2

ch mc 1

.....

Danh sch mc 2 Danh sch mc 1 Danh sch mc 2

M ngun

Test< De muc danh sach Danh sach muc 1Danh sach muc 1

DD>Danh sach muc 2

/body> /html>

/head>

Chi tit >

N Si Gn

c c dn bngi Vinhng nhbi nhng t di dn sau .

Hnh 4.16 Book mark

57



itcvdcRectangle

4.2.4 To form

- Th l cng c ch yu to cc trang web c tnh cht tngtc.

- Th cho php ngi s dng Browser nhp thng tin

hoc la chn trong cc kh nng c sn.

FORM method=POST action=ng dn n chng trnh>

ch thc trao i thng tin qua chng trnh.

- Mi form thng gn vi mt chng trnh thc hin gi l "script",chng trnh ny s tin hnh lm mt cng vic no khi ngi dng nhn nt chp nhn (submit) trn form.

C php:


62



itcvdcRectangle

Hnh 4.19: Th Select, textarea

4.2.5 To khung (th Frame)

C php:

.....

......

frames>

Le hoi

meset framespacing="0" border="0" rows="159,*" frameborder="0"> e="header" scrolling="no" noresize target="_top" src="top.html">

your browser doesn't support them.

y>

ml>

This page uses frames, but


Hnh 4.20: Ton b trang Frame

65



itcvdcRectangle

Hnh 4.21: Frame trn (top.html)

Hnh 4.22: Frame di (phu_tay_ho.html)

66



itcvdcRectangle

Tm tt chng M ngun HTML l mt trong nhng phn trng yu trong i Web.

nh sa l sau khi son g web qu ang w

p bn o web v n xy dn

eb ng. K ngun vi c h, hm trong cc ngn ng lp trnh l cc k quan trng quyt nh trang ng c t c s linh hot hay khng.

p

n

k to mt trang HTML c ni dung sau:

="Content-Type" content="text/html; charset=utf-8"> c hnh Visual Basic 6

ce="Arial" size=2 color="black" >

IU K ISUAL BASIC 6.0 iu khin label v command button Bi1: Modul Help Bi 2: Modul Display Bi 3: Modul Display1 Bi 4: Modul Display2 Bi 5: Modul About Bi 6: Modul Display3 Bi 7: Modul Move Bi 8: Modul Random Bi 9: Modul Form

tart

n textbox, o v mng iu khin i 11: Modul Multiply

lm vic vBn c th chtho cc tran

i m ngun v loi b hay thm vo cc tha cc cng c ti u cho tr

eb ca bn.

Chng ny gicc trang w

c c s cho vic son thhi vic kt hp m

tin c ln web

g

Bi t Bi tp v on v bn, kiu ch Bi 1: S dng trnh son tho text bt nh

Hnh 4.23 Bi tp 1 HTML

68



itcvdcRectangle

Bi 2: Hy son cc trang web nh hnh 4.24

Hnh 4.24: Bi tp 2

69



itcvdcRectangle

Bi tp v bng Bi 3: S dng trnh son tho text b t k lp trang HTML sao cho khi hin th nh hnh 4.25

H

nh 4.25. Bi tp 3

70



itcvdcRectangle

Bi tp v form Bi 5: S dng trnh son tho text bt k lp trang HTML sao cho khi hin th nh hnh 3.27

Hnh 4.27: Bi tp tng hp

71



itcvdcRectangle

Chng 5: CSS (Casca ing Style Sheets)

hin phong cch, tr gip HTML trong vic hin th, ng mu tr gip trnh by trong cc ng dng vn bn

bn (template trong MSWWord).

t m rng ca Web v l mt trong nhng hy vng ln thc hin tng tch web thnh hai phn: trnh by v ni dung.

cht, CSS l mt tp hp cc quy tc nh dng c nh ngha cho n i km vi vic mt ni dung c nh dng

iu ny gii ngha cho t "cascading".

d 5.1 Khi qut - CSS l ngn ng thtng t nh cc nh dca my

- CSS l m-V thccc th ca HTML. CSS lutheo th (HTML, XML,...) -

Hnh5.1: V tr ca CSS trn WEB-Internet

anguage

XLS-FO: Formatting Objects

SS c gn cng trang web (HTML) theo cc cch sau:

XLS-T: Transformation L

C

72



itcvdcRectangle

Gi t mt tp tin ngoi (external):

HEET HREF="style.css" TYPE="text/css">

ng vo trang HTML:

TYPE="text/css"> !--

dent: 10pt}

E="text-indent: 10pt">Indented paragraph

p (import):

ss">

import url(http://www.and.so.on.partial1.css); .and.so.on.partial2.css);

ate):

LINK REL=Stylesheet HREF="style.css" TYPE="text/css"> EL=Stylesheet HREF="style2.css" TYPE="text/css" TITLE="Loai

"> EL=Stylesheet HREF="style3.css" TYPE="text/css" TITLE="Loai

K REL="Alternate Stylesheet" HREF="style3.css" TYPE="text/css" LE="Man hinh" MEDIA=screen>

HREF="style4.css" TYPE="text/css" IA=print>

ut CSS (nhng k thut thng dng)

ndent: 10pt} - CSS r le (ruleset) - CSS selector

de aration

text-indent - CSS property

S value

g CSS CLASS:

l mt dng selector c bit, l tp hp nhiu nh ngha CSS v n cho bt k mt th HTML no. Khi dng th mi c tc dng ln th

L no gi n n.

/* class as selector */ footnote/>This element is associated with the CLASS

DDRESS> And so is this

:

E {color: red}

dng cho phn vn bn c lng trong 3 th HTML theo th t

hiu: (pseudo-element)

h c 2 phn t gi hiu, dng cho cc th hin th khi, dng (block, p, ...)

gi hiu:

lp gi iu:

lo : white} col r: red}

ackground: transparent; color: black}

mt vn bn c cu trc, c bt u t th ri n th v sau l cc th nh , ,...

ca cc th bc di c k tha thuc tnh ca cc c, font ch, cch l,...

cng thc hin vic k tha thuc tnh. V d nh:

t}

10pt - CS

Cch dn

CLASS hng gk

HTM

.footnote {font: 70%}

Ton b font ch c hin th trong vn bn vi ln l 10pt, ring i vi

bn trong th H1 s c hin th vi ln hn 1.8 ln (hay l

nh u c k tha, v d nh thuc tnh background.

t s thuc tnh hay dng trong CSS (cng th HTML)

phn vn18pt).

Khng phi mi thuc t

5. 3 M

Thuc tnh Mc ch Gi tr

(nn dng)

Tha k

nh dng ch

Color dng nh ngha mu ch hin th

#rrggbb c

font-weight ch nh kiu ch hin th (m, bo,...)

Bold lighter normal

c

font-family ch nh font ch .VnTime .VnArial

c

font-size kch c ch 12pt 15px

c

font-style kiu hin th Italic normal

c

text-decoration trang tr ch None underline overline line-through

c

Dn ch line-height ch nh cao dng %(font ch) c

vertical-align chnh theo chiu dc Top bottom middle sub super baseline

c

75



itcvdcRectangle

Thuc tnh Mc ch Gi tr

(nn dng)

Tha k

Text-indent iu chnh dng u tin ca khi vn bn

px, pt, % c

Tex heo chiu ngang Left right justify center

c t-align dn t

Nn background-color ch nh mu nn #rrggbb

background-image ch nh nh nn url() L margin-top,

argin-left, ottom,

ch nh vic cch l px, pt c mmargin-bmargin-right, margin Dn trang list-style-type kiu dnh cho th UL, OL None

disc circle

re decimal lower-roman upper-roman lower-alpha upper-alpha

c

squa

list-style-image nh thay cho bullet url() c

list-style kiu vn tt Tm tt chng Chng ny gip bn c rang web hp d

c kh nng phong ph trong vic trang tr, to cc n hn. Bn c th s dng CSS to thnh tp hp cc nh

bsite iu s tin li hn nhiu trong vic son tho, tdng ring cho c we

76



itcvdcRectangle

sa i nh dng trang cng nh lm trang web c cu trc ng nht v huyn nghip hn.

nn ca trang Web) u Background

ht ckground-color:

ound-color:

/h1>

p>

c Bi tp I. Background (1

d> a

This is a paragraph < 2. t background l mt nh c sn

77



itcvdcRectangle

style type="text/css">

d-image:

ges/bgdesert.jpg")

body>

p>This is some text

is some text is some text

p>This is some text >

s is some text t

> is some text

t

some text is some text

t

xt is some text

t

ext text

is some text p>This is some text

/html>

h1 {color: #00ff00} h2 {color: #dda0dd} p {color: rgb(0,0,255)}

body> >This is header 1

/p>

< on vn bn

t/css">

<

h1 {text-align: center} h2 {text-align: left} h3 {text-align:

right}

is header 1 is header 2

This is header 3 4. Trnh by kiu ch

s"> overline}

: line-through} coration: underline}

coration: none}

2> 3>

w.w3schools.com">a>

5. Trnh by on vn bn

ype="text/css">

head>

ody>

p> me text in a

aragraph me text in a

aragraph a

in a h

/body>

p.uppercuppercasp.lowercase {textlowercase} p.ccapitalize}

III. nh dng kiu ch

. Thit lp kiu ch h3 {font-family: times} p {font-family: courier} p.sansserif {font-family: sans-serif} This is header 3

is is a paragraph

raph

/html>

1

>

< Th This is a parag <

2. Thit lp c ch html>

">

%}

body>

is header 1

<

This is header 2

This is a paragraph

3. Thit lp mu ch

tml>

ext/css"> style: italic} style: normal} tyle: oblique}

1>

raph

al}

small-caps}

pe 4 does not iant"

s="normal">

4. S dng nhiu kiu ch trong cng mt on vn bn

head> <

This is a paragraph

is is a paragraph

/body>

Th <

5. Thit lp c cho kiu ch m

t: normal}

eight: bold} weight: 900}

ss="normal">

ss="thick">

ss="thicker"> his is a paragraph

p.normal {font-weighp.thick {font-wp.thicker {font-

This is a paragraph

IV. ng vin - Border 1. Thit lp kiu mu ca ng vin

html> head>

p class="dashed">

A s

p.dotted dotted} pdashedp.solid {border-stsolid} p.doubdouble} pgroove} p.ridge {rip.inset {bordeinset} p.outset {booutset} <

A dotted border /p>

ge"> order

"inset"> er

utset"> >

/html>

ome text

p ovedouble">

t Some text

Some text Some

Note: Netscape 4 does not support the "border-color" property. Use the "border" property to set the borders and colors in Netscape. Some text

in IntExplorer if it is usedUse the "border-stylproperty to set the bofirst in Inte

rec

if it is used e the

border-style"

/html>

ognized in Internet Exploreralone. Us"property to set the borders first with Internet Explorer.

r-style: solid; order-top-width:

/head>

p>The "border-top-width" property is not

Internet

perty to set

bottom:

000

>

/head>

body>

p>Note:

rt the "border-" property. Use

with pe.

/body>

p {border-medium solid #ff0}

000

body>

ape 4 does not

support the "border-

dth" ty to set the of the left

etscape.

left" property. Use the "border-left-wiproperwidth border in N

8. Thit lp tt c cc thuc tnh ca ng vin bn phi trong mt khai o

head>

"text/css">

ht: medium ff0000

/head>

p>Note: Netscape 4 does not support the "border-right" property. Use the "border-right-width" property to set the width of the right border in

b

<

Netscape.

/html>

head>

border-width: 5px} two p.

{border-strder-widtbo

10px} hree p.t

{border-styrder-widtbo

10px 1px} our p.f

{ rder-stbo

border-width: 5px px 1px medium 10

}

ss="one">

Some text

11. Thit lp cc thuc tnh ca ng vin trong mt khai bo

dium double

/head>

p { border: mergb(250,0,255) } < Some text V. Cn l on vn bn

n tri ca on vn

in {margin-left:

>

s a

1. Thit lp l b

p.marg2cm}

paragraph This is a

aragraph

h

is a paragraph th a left margin

h

ody>

pThis is a paragraph This is aparagrap ThiswiThis is a paragrapwith a left margin

style

/head> >

s is a

a paragraph his is a

p class="margin"> his is a paragraph ith a right margin his is a paragraph

argin /body> /html>

2. Th< p.margin {margin-right: 5cm} margin-

d>

a paragraph a paragraph

aragraph

This is a paragraph with a bottom margin This is a paragraph with a bottom margin This is a paragraph This is a paragraph This is a paragraph This is a paragraph

5. Thit lp cc thuc tnh l trong mt khai bo

html>

style type="text/css">

3cm 4cm} tyle>

ody>

p> paragraph

/p>

p class="margin"> with

p> s a paragraph

>

< p padding bn phi ca

"> ight:

er="1">

ecell with dding. This cell with a

ing.

<

tyle

This is a tablecell with top padding

/table>

a <

4. Thit lp padding pha di ca

pe="text/css"> ng-bottom:

cm} e>

table border="1">

/td>

5. Thit lp cc thuc tnh ca paddi

ng trong mt khai bo

e="text/css"> }

ues {padding: 0.5cm 2.

der="1">

tablecell with on each side

VI.

p danh sch khng nh s th t

/css">

c

-type: circle

type: square

: none

c">

a

>

ass="square">

i>

"none"> offee

Danh sch List 1. Thit l Coca Col li>Coca Cola

Tea oca Cola

l> a">

>Coffee li>

Cola l>

yle type="text/css"> ol.decim {ol.lroman{list-style-type: lower-rool.u{liol.lalpha {list-styol.{list-style < Coffee Tea Coca Cola Coffee Tea >Coffee

Coca

3. Ly nh lm n v nh du

l>

xt/css"> l

: ow.gif"

>

y>

b> not style-

oca Cola /ul>

/html>

4. t ch cho n v nh du

e

osition: outside

ul.inside { list-style-position: insid} ul.outside { ist-style-pl

} Note: Netscape 4 does not support the "list-style-position" ro

list has a value of "inside":

lass="inside">

lementary f bergamot oil. This combination creates an ultra fine tea where

ll purpose" tea made of freshly picked, organic jasmine flowers.

delight that is naturally sweet and almost ported from the Cape of Good Hope has

reminds us of those tangy tea blends currently uld be pointed out that this is completely free of redients.

perty. This

Earl Grey Tea - A fine black tea, fermented to perfection in a complementary

his combination creates an ultra fine tea where to this much-revered beverage.

"all purpose" tea made of freshly picked, organic jasmine flowers.

er fruity delight that is naturally sweet and almost ent tea imported from the Cape of Good Hope has

ul body that reminds us of those tangy tea blends currently ould be pointed out that this is completely free of

other ingredients.

blend of bergamot oil. Tprecision and process gives birth Jasmine Tea - A fabulouscamellia sinensis (green tea) and Honeybush Tea - A supunbelievable! This magnifica smooth and fruitfon the market. However it shflavoring agents and

108



itcvdcRectangle

5. Thit lp cc thuc tnh trong mt khai bo

Coca Cola

ul { list-style: square inside url("/images/arrow.gif") } Note: Netscape 4 does not display the images or position the list. Coffee Tea

109



itcvdcRectangle

VIII. Dimension 1. Thit lp chiu rng v chiu di cho nh img.normal { height: auto; width: auto } img.big { height: 80pax; width: 100px } img.small { height: 30px; width: 50px

width="72" height="40"> 2. Tng khong cch gia cc dng p.increase {line-height: 1cm}

This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph

This is a paragraph This is a

paragraph This is a paragraph This is

a paragraph This is a paragraph This This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph

is a paragraph This is a paragraph

This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph IX. Classification Phn loi

1. n hoc hin th on vn bn

The div section is invisible

no distance between the two paragraphs.

div {display: none} p {display: inline}

With the value of "inline" there should be

111



itcvdcRectangle

With the value of "inline" there should be no distance between the two paragraphs.

2. Thit lp nh xut hin trong mt on vn bn

<

float to the left in theparagraph.

img { float: left

}

body>

With the value of "left" the image will

112



itcvdcRectangle

3. V tr tng i ca on vn bn so vi v tr bnh thng

type="text/css">

position:relative;

="ex2">Headi

4. V tr tng i ca dng tiu

h1 { position:relative;

left:40 } Heading A This is a paragraph. Heading B This is a paragraph. Heading C This is a paragraph. Heading D This is a paragraph.

5. V tr tuyt i ca on vn bn

h1.x { position:absolute; left:100; top:150 }

114



itcvdcRectangle

This is a heading With absolute positioning, an element can be

anywhere on a

The LEFT position of the

ppixels from the to

6. Khng hin th mt on vn bn

h1.one { visibility:visible } h1.two { visibility:hidden }

115



itcvdcRectangle

Note: Netscape 4 does not support the "visibility" property. Heading one Heading two Where is heading two?

7. Thay i con tr Note: Netscape 4 does not support the "cursor" property. Move the mouse over the words to see the cursor Auto Crosshair Default Pointer Move e-resize ne-resize

change.

116



itcvdcRectangle

nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help

117



itcvdcRectangle

Chcho v 6.1- 6.1- S l

cho bn tin ca bn v mi ngi xem nh thch hp, bn tin ca bn c th

c c, ngi xem c th lt qua site

Documents

Quan Tri Web