Le Dinh Duy - Thiet Ke Va Lap Trinh Web Bang ASP

L nh Duy - H KHTN Tp. HCM

Email: [email protected]

Chng 1

GII THIU MNG INTERNET1. S LC V MNG INTERNET1.1. Lch s mng InternetMng Internet xut pht t mng ARPANET ca M v ngy nay tr thnh mng ton cu kt ni hng trm triu ngi trn th gii. Mng my tnh ton cu Internet c th c xem nh l mng ca tt c cc mng (network of networks), trong ngi dng ti bt c my tnh no u c th truy cp ti cc thng tin ca cc my khc (nu c php). Mng Internet ban u c bit di tn l ARPANET do t chc Advanced Research Projects Agency (ARPA) ca M thit lp nm 1969. Mc ch chnh ca mng ny l to c s cho cc my tnh nghin cu ca cc trng i hc c th kt ni v trao i vi nhau. Thit k ca ARPANET c o ch l mng vn c th hot ng khi mt phn ca n b ph hy trong cc trng hp chin tranh hoc thin tai. Ngy nay mng Internet l mt mng cng cng kt ni hng trm triu ngi trn th gii. V mt vt l, mng Internet s dng mt phn ca ton b cc ti nguyn ca cc mng vin thng cng cng ang tn ti (public telecommunication networks). V mt k thut, mng Internet s dng tp cc giao thc gi chung l TCP/IP (Transmission Control Protocol/Internet Protocol). Hai m phng ca cng ngh mng Internet l intranet and extranet cng s dng cc giao thc ny. S ra i ca giao thc HTTP v HMTL nh du mt bc ngoc mi trong vic s dng Internet. Cho ti nm 1990 cc dch v c bn ca Internet vn ch l e-mail, listserv, telnet, v ftp. Nm 1992, Tim Berners-Lee, mt nh vt l hc ti CERN pht trin cc giao thc cho World Wide Web (WWW). Trong khi tm kim cch lin kt cc ti liu khoa hc li vi nhau, anh ta to ra Hypertext Markup Language (HTML), mt tp con ca Standard Generalized Markup Language (SGML).

T mt chun cho cc ti liu vn bn, HTML ngy nay c th cha hnh nh, m thanh, video, v cho php pht trin cc ng dng thng qua Common Gateway Interface (CGI), ASP, JSP, PHP, Java Servlet, ....

Hnh 1.1 M hnh mng Internet

1.2. Mt s kin thc lin quan n mng Internet1.2.1. a ch IP (IP Address) a ch IP l mt con s 32-bit dng xc nh i tng nhn v gi thng tin trn Internet. Khi bn yu cu mt trang HTML hay gi e-mail, a ch IP ca bn s c gi i cng cc gi tin n a ch IP ca ngi nhn. Mt khi ngi nhn nhn c yu cu ca bn, h s cn c trn a ch IP m bn gi km gi kt qu tr v. n gin ha ngi ta phn con s ny thnh 4 con s 8 bit vit cch nhau bi du chm .. V mi my l mt phn ca mng nn ngi ta chia a ch IP thnh 2 phn l phn m t mng (network) m my thuc v v phn m t my (local host). Nu tt c cc bit ca vng m t my bng 0, th a ch IP dng m t a ch mng (network address); Nu tt c cc bit ca vng m t my bng 1, th a ch IP ny chnh l a ch broadcast (broadcast4


3




address); Nu khng thuc hai trng hp trn, a ch IP ny dng m t a ch my (host address). a ch IP t n khng cha thng tin v phn no m t mng, phn no m t my m thnh phn subnet mask i km vi mi a ch s cung cp thng tin ny. Theo qui c, vng cc bit 1 xc nh vng m t mng, v vng cc bit 0 xc nh vng m t my. Trong subnet mask ch gm 2 dy lin tc cc bit 1 v dy lin tc cc bit 0 nm lin tip nhau tnh t tri sang. Cc a ch IP c phn thnh 3 lp A, B, C ty theo gi tr ca 3 bytes u tin. Theo th:Class A B C Available Network Address 1 - 126 128.xxx 191.xxx 192.xxx.xxx 223.xxx.xxx # of Networks 126 16.384 2.097.152 # of Hosts 16.7 million 65.536 256 Default Subnet 255.0.0.0 255.255.0.0 255.255.255.0

Vic phn chia a ch IP trn Internet do ICANN chu trch nhim. a ch IP thng c qun l bi cc nh cung cp dch v Internet (ISP Internet Service Provider). Cc a ch IP ny thng c gi nm na l a ch IP thc. Nu bn mun thit lp mt website m ngi dng Internet c th truy cp vo c, t nht my ch cha website phi c a ch IP thc. Nu bn khng c a ch IP thc, bn phi s dng dch v webhosting thu ch t website trn cc my ch c a ch IP thc c kt ni vi Internet.

Hnh 1.2 - Minh ha thit lp giao thc TCP/IP

1.2.2. Tn min (Domain name) Tn min c th c xem nh l tn giao dch ca cng ty hay t chc trn Internet. Tn min ca cc cng ty thng mi thng c dng yourcompany.com. V d, cng ty Intel s ly tn l min l intel.com; cng ty Microsoft ly tn min l microsoft.com; ... Vic a ra khi nim tn min gip cho vic truy cp n cc ti nguyn trn Internet d dng hn. Vic nh x qua li gia tn min v a ch IP ca my phc v c thc hin bi DNS Server.


5

6




V d mt a ch www.intel.com cho ta mt s thng tin sau: y l a ch ca mt my thuc t chc s hu tn min intel.com (chnh l cng ty Intel). a ch IP ca my ny s l 192.102.198.160 (s dng chng trnh nslookup tra) v my ny c tn l www (thng thng l my cung cp dch v web). Phn "com" trong tn min m t mc ch ca t chc (trong trng hp ny l "commercial" thng mi) v c gi l tn min cp 1 (top-level domain name). Phn ngay trc du . trong tn min trn thng thng l tn ca t chc (v d nh intel) c gi l tn min cp 2 (second-level domain name). Tn min cp 3 thng thng c dng nh ngha mt my phc v c th no v ton b chng s c nh x ti mt a ch Internet. Tn min cp 1 bao gm cc m quc gia ca cc nc tham gia Internet c quy nh bng hai ch ci theo tiu chun ISO 3166 nh Vit nam l VN , Anh quc l UK, Nht bn l JP, ... v 7 lnh vc dng chung, trong c 5 dng chung cho ton cu v 2 ch dng M. Nm tn min cp 1 dng chung l: .com: cng ty thng mi (commercial). .edu: cc trng hc, t chc gio dc (education). .net: cc mng (network) .int: cc t chc quc t (international organizations) .org: cc t chc khc (other organizations). Hai tn min cp 1 ch dng M l: .gov: cc t chc chnh ph (government). .mil: cc t chc qun s (military). Mt a ch IP c th c nh x cho nhiu tn min. iu ny cho php nhiu c nhn, cng ty v cc t chc chia s cng mt Internet server. Do tm quan trng ca tn min nn mt trong cc bc u tin ca vic xy dng website l thit lp tn min bng cch mua t cc cng ty c u quyn bn tn min (http://www.internic.net). Cc tn min c ui l .com rt thng dng trong cc giao dch quc t. Ngoi ra, cc cng ty Vit nam cng thng hay ly tn min c ui l .com.vn. s hu tn min, bn phi tr chi phL nh Duy - H KHTN Tp. HCM7

hng nm. Nu ht thi hn s hu m bn khng tr chi ph, tn min ny c th b ngi khc mua li (v s rt kh khn khi bn mun i li tn min ny t tay ngi khc). Trn Internet hin nay c nhiu ngi thng mua trc cc tn min ca cc cng ty m h d on s ni ting nhng cha lp trang web. Sau ny khi cc cng ty ny cn tn min, h s bn li vi gi rt t. Tuy nhin, bn vn c th mua trc tn min m cha cn lp website.

Hnh 1.3 Phn cp ca cc tn min

2. CC DCH V C BN CA MNG INTERNET2.1. World Wide Web (WWW)y l dch v thng dng nht trn Internet. s dng dch v ny, ngi dng cn c mt trnh duyt web thng c gi l browser. Hai trnh duyt thng dng nht hin nay l Internet Explorer ca cng ty Microsoft v Netscape Navigator ca cng ty Netscape. truy cp vo mt trang web, bn cn phi bit a ch (URL Uniform Resource Locator) ca trang web . V d, truy cp vo trang web ca cng ty Microsoft, bn g vo: http://www.microsoft.com/ms.htm. Do dch v ny s dng giao thc HTTP (Hypertext Transfer Protocol) nn mi a ch trang web lun c bt u l http://

8




Giao thc thng dng gi/nhn e-mail l SMTP(Simple Mail Transfer Protocol)/POP3 (Post Office Protocol 3). s dng dch v email, bn cn phi c: a ch email. Mt a ch email thng c dng name@domainname. V d, trong a ch email [email protected], duyld ng vai tr l tn, yahoo.com l tn min. a ch email c qun l bi mail server. Ti Vit Nam, cc nh cung cp dch v email thng l cc ISP nh VDC, FPT, SaigonNet. Do , tn min trong cc a ch email ca bn thng l: hcm.vnn.vn, hn.vnn.vn, hcm.fpt.vn, fpt.vn, saigonnet.vn, ... Tuy nhin, c rt nhiu website trn Internet cung cp dch v email min ph. Thng dng nht vn l Yahoo, Hotmail, ... Tn ng nhp v mt khu truy cp vo hp th: iu ny m bo rng ch c bn mi c th c v gi cc th ca chnh mnh.Hnh 1.4 Dng IE truy cp trang web cng ty Microsoft

2.3. Truyn, ti tp tin - FTPFTP (File Transfer Protocol) l dch v dng trao i cc tp tin gia cc my tinh trn Internet vi nhau. FTP thng c dng ti cc trang web t nhng ngi thit k n cc my ch. N cng thng c dng ti cc chng trnh v cc tp tin khc t cc my ch trn mng. Mt s chng trnh FTP vi giao din ha thn thin hu ch hin nay l: WS_FTP (http://www.ipswitch.com) CuteFTP (http://www.cuteftp.com) FTP Explorer (http://www.winsite.com)

Trong mi trang web m bn truy cp vo, bn c th thy c vn bn, hnh nh, m thanh, ... c trang tr v trnh by ht sc p mt. Ngoi ra, c th di chuyn ti cc trang web khc, bn c th s dng cc hyperlink (siu lin kt). Do con tr chut thng thay i hnh dng ngang qua mt i tng c cha hyperlink nn y l cch n gin nhn din chng. S ra i ca www thc s l mt bc ngot ln ca mng Internet bi v n to c hi cho bn truy cp n mt kho thng tin khng l vi hng triu triu trang web. iu ny m ra nhiu c hi v thch thc ln cho cng vic ca bn trong hin ti v tng lai.

2.2. Th in t - EmailE-mail (electronic mail) l dch v trao i cc thng ip in t bng mng vin thng. Cc thng ip ny thng c m ha di dng vn bn ASCII. Tuy nhin bn cng c th gi cc tp tin hnh nh, m thanh cng nh cc tp tin chng trnh km theo email. E-mail l mt trong nhng dch v nguyn thy ca Internet v c s dng rt rng ri. Chim phn ln thng lng trn mng Internet l e-mail.L nh Duy - H KHTN Tp. HCM

2.4. Tn gu - ChatDch v tn gu cho php ngi dng c th trao i trc tuyn vi nhau qua mng Internet. Cch thng dng nht l trao i bng vn bn. Nu ng truyn tt, bn c th tr chuyn tng t nh ni chuyn in thoi.

9

10




Cc chng trnh h tr tn gu thng dng hin nay l:

Google (http://www.google.com)

AOL Instant Messenger

Yahoo Messenger Cc chng trnh ny khng nhng h tr tn gu qua vn bn thng thng m cn h tr tr chuyn bng m thanh (voice chat) v hnh nh (webcam)

3. KHAI THC CC TI NGUYN CA MNG INTERNET3.1. Mt s website hu ch3.1.1. Tra cu thng tin Yahoo (http://www.yahoo.com) Altavista (http://www.altavista.com)


11

12




3.1.2. Th vin phn mm ZDNet (http://www.zdnet.com/downloads/) 3.1.3. Nghin cu, khoa hc, gio dc Codeguru (http://www.codeguru.com)

CNet (http://download.cnet.com)

CodeProject (http://www.codeproject.com)


13

14




MSDN (http://msdn.microsoft.com)

ProgrammersHeaven (http://www.programmersheaven.com)

3.1.4. Mua bn trc tuyn Expert exchange (http://www.experts-exchange.com) Amazon (http://www.amazon.com)


15

16




eBay (http://www.ebay.com)

3.2. Mt s cng c khai thc ti nguyn Internet3.2.1. Teleport Pro (http://www.tenmax.com) Cng c rt hu ch cho php ti ton b website. iu ny gip chng ta xem website offline ngay trn my ca mnh, tit kim thi gian truy cp Internet. Teleport Pro hot ng hon ton t ng, chng trnh t chia lm nhiu nhnh hot ng ng thi (multithreaded). Ngoi ra chng trnh ny cn c ch t ng ti theo lch (schedule)

Yahoo Shopping (http://shopping.yahoo.com)

Hnh 1.5 - Mn hnh giao din ca Teleport Pro

3.2.2. FlashGet (http://www.flashget.com) FlashGet l cng c nhm h tr cho ti cc tp tin trn Internet v qun l chng mt cch hiu qu. Thng thng, vic ti mt tp tin t Internet khng thnh cng do ng truyn chm hay mt s c no . FlashGet c bit hiu qu hai kh nng l ti cc tp tin ln v qun l cc tp tin ti v phc v cho nhu cu cp nht hoc ti li sau ny. FlashGet ti cc tp tin bng cch ch nh (split) cc tp tin thnh cc phn nh v ti cc phn ny ng thi.L nh Duy - H KHTN Tp. HCM17 18




iu ny tn dng ti a ng truyn rnh v gim thi gian ti mt tp tin rt ng k. Trong trng hp ng truyn chm hoc hay b t qung na chng, FlashGet duy tr c trng thi hin hnh cc tp tin ny c th tip tc ti mt khi ng truyn hot ng tt tr li. FlashGet tch hp vi cc trnh duyt mt khi bn click vo mt hyperlink c ti tp tin, chng trnh FlashGet s t ng bt ln v t ng ti tp tin v.

nhn nt Validate loi b cc links; cc websites khng cn hot ng v nt Refine tinh chnh kt qu tm kim hn na. Kt qu tm thy c trnh by trong ca s bn di trong nhng theo th t mc lin quan vi ch tm kim, c tn v a ch cc trang web, th t, ngy tm c v h thng d tm no tm c, v vi dng vn bn m t cc trang web . Cc font ch v mu sc trong cc ny c th c iu chnh theo ngi dng. Kt qu c t ng lu li sau ny xem li hoc cp nht (update), tc l tm kim li nhng ch tm nhng thng tin mi nn c kt qu rt nhanh. Khi c kt qu, Copernic ngh ta xem bng trnh duyt c sn c gi l Results Explorer, hoc khi ta nhn vo nt Results. Lc ny kt qu tm thy c trnh by chi tit hn v p hn di dng HTML.Trong Results Explorer, cc a ch tm c c th c duyt, ti v mt cch d dng thun tin, v c lu li sau ny xem li. Nu bn s dng Internet Explorer, nt Search trn Tool Bar s c Copernic s dng, v nh th trong khi lt trn Internet bt c lc no bn cng c th nhn nt Search tm kim thng tin bng Copernic.

4. MT S THUT NG THNG DNG Internet: Mng my tnh ton cu kt ni cc mng my tnh khp ni trn th gii. Tp cc giao thc c dng gi chung l TCP/IP. Intranet: Mng cc b c kin trc tng t mng Internet.Hnh 1.6 - Mn hnh giao din ca FlashGet

3.2.3. Copernic (http://www.copernic.com) Copernic l phn mm tm kim thng minh v a nng v n cho php ngi dng iu khin nhiu my tm kim (search engines) cng mt lc tm kim thng tin m mnh yu cu. Copernic c th s dng n 1000 my tm kim ni ting v quan trng nht trn Internet. Copernic tm kim cng mt lc trn tt c cc my tm kim trong nhm nn c kt qu rt nhanh.Trong khi tm kim n t ng loi b cc kt qu trng lp. Khi c kt qu, ngi dng c th

Website: Tp hp cc trang web. Website ca cc t chc hay c nhn trn mng bao gm tp hp cc trang web lin quan n t chc ny. Webpage: L trang web. C th hin th cc thng tin di dng vn bn, hnh nh, m thanh, ... Web browser: Trnh duyt web, dng hin th cc trang web. Cc web browser thng dng hin nay l Internet Explorer ca cng ty Microsoft v Netscape Navigator ca cng ty Netscape. Homepage: Trang ch hay cn gi l trang nh. Thng l trang u tin (mc nh) khi truy cp mt website.20


19




Hyperlink: siu lin kt. Dng lin kt cc trang web v dch v ca cc website trn Internet. IAP (Internet Access Provider): Nh cung cp ng truyn Internet. ISP (Internet Service Provider): Nh cung cp dch v Internet. Thng thng, bn phi thng qua mt ISP no ng k dch v truy cp Internet qua mng in thoi. Cc nh cung cp ISP hin nay ti Vit Nam l VDC, FPT, SaigonNet, NetNam, ... Search engines: My tm kim. Do s lng cc trang web trn Internet rt ln nn cc my tm kim s h tr cho bn khi cn truy tm cc trang web lin quan ti vn m bn quan tm trong tp hp khng l cc trang web ny. Cc my tm kim thng dng hin nay l Yahoo, Google, Altavista, ... HTTP, FTP, SMTP, POP3, ...: y l cc giao thc c dng cho cc dch v web, ftp, email trn Internet.

5.3. Ti tp tin bng emailThng thng trong cc mng m kt ni khng c duy tr lin tc, vic ti mt tp tin qua giao thc ftp hu nh rt kh khn. Tuy nhin bn c th vn ti c tp tin lu ftp server thng qua email vi s tr gip ca mt FTPMail Server. C th tm tt nh sau : 5.3.1. Hot ng ca FTPMail Server: Thay v bn phi kt ni trc tuyn ti FTP server (theo email ca bn l host.domain) v thc hin cc lnh ti tp tin v (cch ny thng t khi thnh cng v ng kt ni ca chng ta qu chm), FTPMail server s nhn yu cu ca bn qua email di dng cc lnh ca giao thc ftp, sau n s truy cp ti FTP server m bn yu cu ti tp tin v. Cui cng n s chuyn tp tin sau khi ti v thnh dng email ri gi v cho bn. 5.3.2. Cc bc thc hin: Bn cn phi bit a ch ca FTPMail Server gi yu cu n , v d bn c th s dng a ch sau [email protected]. Cc a ch khc c th l: [email protected], [email protected], [email protected] , [email protected]. Bn phi tm hiu cch vit cc lnh ftp yu cu FTPMail server ti tp tin v: c th lm iu ny bng cch gi email ti FTPMail Server, phn body g help. Cc lnh c bn l OPEN, DIR, GET, QUIT, ... i vi cc tp tin c kch thc ln, FTPMail Server s t ng "ch" (split) ra thnh cc mnh nh v kt qu l bn s nhn c rt nhiu email kt qu. c c tp tin m bn yu cu, cn phi "ni" (merge) cc kt qu ny li. Nu s dng Outlook Express, chng trnh ny s t ng lm cho bn. Cc FTPServer Mail thng rt bn, nn sau khi gi yu cu i bn phi kin nhn nh kt qu tr v (nu chm c th vi ngy). V d sau minh ha vic ti mt tp tin thng qua FTP Mail Server bng cch gi email n a ch [email protected] vi ni dung sau:

5. MT S CU HI THNG GP5.1. Cch lu mt trang web t InternetCch 1: Nu bn dng trnh duyt Internet Explorer t 5.0 tr ln hy chn chc nng Favorites/Add to Favorites sau nh du chn vo Make available offline. Khi ton b trang Web cng cc tp tin i km s c ti v. Ln sau, bn ch cn vo li Favorites v chn trang ti v. Cch 2: Nu bn mun lu tt c cc thnh phn ca trang web (bao gm hnh nh, ...) di dng mt tp tin th trong hp thoi Save As, chn dng Save As Type l Web Archive, single file (*.mht).

5.2. Lm th no sau khi check mail xong, mail vn cn trn serverSau khi check mail bng Outlook Express m mail vn khng b xa trn mail server.Bn vo Outlook Express chn menu Tools/Accounts. Chn account m bn setup nhn email t Yahoo. Chn mc Properties/Advanced. Trong mc Delivery, check vo Leave a copy of messages on server.


21

22




open ftp.ets.org cd /pub/toefl mode binary uuencode get 993007listb.pdf quit

Lnh open u tin s yu cu FTP Mail Server kt ni vi FTP Server ftp.ets.org. Lnh tip theo cd /pub/toefl yu cu chuyn n th mc c tp tin cn ti. Lnh mode binary yu cu server truyn d liu theo dng nh phn thay v dng vn bn ASCII. Lnh uuencode yu cu server m ha d liu trc khi truyn i. Lnh get yu cu server chuyn cho tp tin cn ly v v lnh quit chm dt kt ni vi server ftp.ets.org. Sau khi FTP Mail Server kt ni vi FTP Server thc hin cc lnh trn xong, tp tin ly v s c FTP Mail Server chuyn v cho bn qua ng email.

5.4. Phng chng cc virus bng Norton AntiVirusHin nay, virus ly lan qua ng email rt nhanh. Do c th bo v h thng ca bn khi b cc virus ly qua email, bn nn ci t chng trnh phng chng virus thng dng nht hin nay l Norton Antivirus. c im ca chng trnh ny l n c th kim tra virus ton b cc email ti v my ca bn trc khi bn c n. Khi gp virus, chng trnh s t ng thng bo hoc dit ngay ty theo yu cu ca bn. Do virus mi xut hin ngy cng nhiu, nn bn phi thng xuyn ti cc cp nht mi nht v cc virus mi ti website ca cng ty Symantec s hu phn mm ny. http://www.symantec.com/avcenter/download.html hoc cho chy chng trnh Live Update t ng cp nht cc thay i mi nht ca phn mm ny.Hnh 1.7 - Mn hnh giao din ca phn mm Norton Antivirus 2001

5.5. Phng chng virus ly lan qua ng emaily l mt mo vt gip trnh ly virus qua ng email khi my ca bn b nhim virus. Lu l n khng gip cho my bn trnh b nhim worm nhng n gip ngn chn vic s dng s a ch email ca bn ly tip cho nhng ngi khc. u tin, m Address Book ra v chn New Contact tng t nh thm vo mt tn mi. Trong ca s, thay v nh tn ca bn b, g vo: !000 (du chm than v 3 s khng). ca s bn di, ni m thay v g a ch email ca bn b, g vo dng ch sau: WormAlert. Sau cng, hon tt cng vic bng cch click Add, Enter v Ok "!000" s c t u tin trong Address Book v n c nh s 1. y s l "ngi" u tin m con Worm s bt u ly. Nhng ngi ny li c a ch email l "WormAlert", khng ng quy cch nn n khng th pht tn thng qua vic gi cho nhng ngi tip theo c a ch trong Address Book ca bn. Khi email khng c gi i, bn s nhn li mt thng bo ngay lp tc trong Inbox. Nh vy, nu bn nhn c mt email


23

24




ni rng "Email addressed to WormAlert could not be delivered", bn bit ngay l "Worm" ang nm ngay trong my bn.

5.6. S dng Internet trong hc tpKhi s dng cc my tm kim nh Yahoo, Altavista, ... trong vic tm cc trang web, mt trong cc nhng iu bt tin cho chng ta l s kt qu tr v qu nhiu. c th tm kim hiu qu hn trong lnh vc tin hc, bn c th vo mt trong 2 site gip tra cu thut ng tin hc l: http://www.webopedia.com v http://www.whatis.com . Ngoi vic gii thch ngha ca mi thut ng Tin hc, cc bn s tm c y cc lin kt ti cc site cha thng tin lin quan. V d, nu bn mun tm cc site cha cc hng dn lp trnh, cng nh cc k thut, ... v ASP, bn hy vo mt trong hai site trn g t cn tm kim l ASP. Trong trang gii thch thut ng v ASP, bn s nhn c cc lin kt ti cc site cn thit tm hiu v ASP.

gi email bng ting Vit, trong cc ng dng nh Yahoo Mail, Hotmail, Outlook, Outlook Express, bn phi thc hin nh sau: Trong Hotmail: t ch Rich Text Editor ON trong mc chn bn tri ngay trn phn ni dung ca email

5.7. Dng ting Vit Unicode trong cc email client xem c ting Vit Unicode trong cc email gi n cc a ch email Yahoo, Hotmail, bn phi t Encoding ca trnh duyt l UTF-8 (Chn View/Encoding/UTF-8).

Hnh 1.9 Thit lp ch h tr ting Vit Unicode trong Hotmail

Trong Yahoo Mail: t ch Color and Graphics trong mc Compose khi son tho email.

Hnh 1.8 Thit lp Encoding l UTF-8 trong trnh duyt IE


25

26




CU HI1. 2. 3. 4. 5. 6. Hy cho bit cc dch v Internet thng dng v cc giao thc c s dng cho cc dch v ny. Tm hiu cch phn lp trong a ch IP. Hy cho bit cc a ch IP ca Vit Nam thuc lp no. Ti sao cn phi c s nh x gia tn min v a ch IP? Hy cho bit tn ca dch v thc hin vic ny. Cho bit cc tn min c dng thng dng hin nay. Tm hiu mt s cng ty c y quyn cp tn min trn Internet. Ch ra mt li ch ca mng Internet m bn hay cng ty ca bn hoc c th c c.

Hnh 1.10 Thit lp ch h tr ting Vit Unicode trong Yahoo Mail

5.8. Chat ting Vit trong Yahoo MessengerTrn Windows NT/2000/XP, s dng UniKey 3.55 (http://unikey.sourceforge.net/bdownload.php#uk355) ta c th chat bng ting Vit Unicode trong Yahoo Messenger. thc hin, hy chn bng m Vietnamese Locale CP 1258 trong UniKey. dng CP 1258 my ca bn cn ci t h tr ting Vit ca Windows Vietnamese locale. Vi Windows XP, hy Control Panel/ Regional and Language Options/Languages/ Details. Sau , nu trong hp thoi "Text Services and Input languages" cha thy Vietnamese keyboard trong th chn "Add", sau chn Input Language l Vietnamese.


27

28




THC HNH1. MT S THAO TC C BN S DNG MNG INTERNET1.1. Kt ni kt ni c mng Internet, cn chun b cc bc sau: Modem (internal hoc external). ng in thoi. ng k dch v vi cc nh cung cp dch v Internet bit c s in thoi truy cp, tn ng nhp v mt khu. Ti Vit Nam, bn c th ng k vi cc nh cung cp sau VDC, FPT, SaiGonNet, . Sau khi ng k xong, bn s c nhn mt s tn ng nhp, mt khu v s in thoi m bn s quay s t my ca bn vo my ch ca nh cung cp dch v. i vi VDC, c th s dng cc dch v VNN1260, VNN1269, VNN-1260P. Dch v VNN1269 l dch v c dng kh ph bin hin nay vi s in thoi quay vo l 1269, tn ng nhp l vnn1269, mt khu l vnn1269. Sau khi ng k xong, vo mc Network Connections to mt kt ni vi nh cung cp dch v. Tham kho thm ti: http://support.vnn.vn/tailieu/#dichvu

Lu cc trang web li di dng cc tp tin ln sau c th theo di trn my. Dng chc nng Work Offline xem li cc trang web truy cp m khng cn kt ni li Internet. Khai bo proxy server nu my kt ni Internet thng qua proxy.

2. THIT LP DCH V EMAIL TRONG OUTLOOK EXPRESS thit lp dch v ny, bn thc hin cc bc sau: Khi ng Outlook Express. Vo mc Tools/Accounts.../Add/Mail Mn hnh sau s hin ra. Bn in vo H v tn. Tn ny s c dng hin th trong mc From trong cc email m bn gi i.

1.2. S dng Internet Explorer truy cp webSau khi kt ni Internet thnh cng, hy s dng Internet Explorer thc hin cc thao tc sau: Truy cp cc website c cp trn; Ln theo cc hyperlink truy cp n cc trang lin kt. Lu cc trang trn li trong Favorites. Ln sau, s dng Favorites c th chuyn n nhanh chng cc trang web ny. Refresh (yu cu li) cc trang web mi khi truy cp trang web gp li do ng truyn.L nh Duy - H KHTN Tp. HCM29

Sau khi in xong, bn nhn nt Next. Mn hnh sau s hin ra. Bn hy in vo a ch email ca mnh.30




Sau khi in xong, bn nhn nt Next. Mn hnh sau s hin ra. Bn hy in vo a ch SMTP v POP3 mail server.

Sau khi in xong, bn nhn nt Next. Mn hnh sau s hin ra. Bn hy in tn ng nhp v mt khu dng truy xut n mail server.


31

32




Sau khi in xong, bn nhn nt Next. Mn hnh sau s hin ra. Bn hy nhn nt Finish kt thc vic thit lp.

3. NG K DCH V EMAIL MIN PH http://mail.yahoo.com http://www.hotmail.com http://www.vol.vnn.vn http://mail.fptnet.com.vn/ http://www.netsoft.vnn.vn/webmail/

4. THAM KHO CC TRANG WEB SAU4.1. Cc site bn hng http://shopping.yahoo.com http://www.amazon.com http://www.ebay.com http://www.barnesandnoble.com/L nh Duy - H KHTN Tp. HCM33 34




4.2. Cc site gii tr http://greetings.yahoo.com http://www.geraldstevens.com/ http://www.1800flowers.com/ http://www.123greetings.com/ http://www.vnn.vn/ecards/ http://www.fpt.vn/Postcard/main.asp http://www.confidantvcd.com

5. CHIA S NG KT NI INTERNETMt n v (v d nh mt cng ty nh, mt qun cafe Internet, ...) mun kt ni vi Internet. tit kim, n v ny ch mun s dng mt ng kt ni bng in thoi cho tt c cc thnh vin mun truy cp Internet. Gii php ngh nh sau: Thit lp mt mng my tnh ni cc cc my ca n v. Cc my trm ci t h iu hnh Windows 9x, hoc Windows 2000, s dng giao thc TCP/IP. Ci t mt phn mm h tr v d nh WinGate (http://www.wingate.com) ngay ti my c gn modem, kt ni vi Internet. Thit lp cc thng s trong WinGate. Phn mm ny cung cp cc kh nng nh sau: Cho php chia s kt ni Internet. H thng s t ng quay s mi khi c yu cu kt ni Internet v s t ng ngt khi khng cn yu cu no na. Cho php kim sot cc website truy cp. Bn c th cm cc thnh vin truy cp cc website m bn khng cho php.

4.3. Cc site thng tin v bo in t ca Vit Nam http://vnexpress.net/ http://www.vnn.vn/ http://www.vdc.com.vn/ http://media.vdc.com.vn/ http://www.nhandan.org.vn/ http://www.sggp.org.vn/ http://www.laodong.com.vn/ http://www.nld.com.vn/ http://www.tuoitre.com.vn http://website.fptnet.com.vn/

4.4. Tham kho cc site v lao ng vic lm ti VN http://www.vietnamworks.com/ http://203.162.5.43/ld2000/ http://www.vietname-business.com/jobnld/ http://www.jobsonline.saigonnet.vn/ http://www.jobviet.com


35

36




Chng 2

THIT LP WEBSITE1. CI T WEBSERVERWebServer l chng trnh cung cp dch v www. Mt webserver c th phc v cho nhiu website. Port mc nh cho dch v web l 80. C nhiu phn mm h tr webserver. Trn mi trng ca Microsoft, thng dng nht vn l IIS (Internet Information Server) vi cc phin bn chy trn h iu hnh WindowsNT 4.0 v Windows 2000. Ngoi ra cc my s dng h iu hnh Win9x, Microsoft cng h tr ci t webserver thng qua phn mm PWS (Personal Web Server).

1.1. Ci t IIS trn Windows/XP 2000 Server v Windows 2000/XP Professional ci t IIS trn h iu hnh Windows 2000 Server hay Windows 2000 Professional, bn vo mc Start/Settings/Control Panel/Add Remove Programs. Chn mc Add/Remove Windows Components.Hnh 2.1 - Mn hnh Control Panel/Add Remove Programs

Trong ca s Windows Components Wizard, chn checkbox Internet Information Services.


37

38




Hnh 2.3 - Mn hnh qun tr v cu hnh IIS Hnh 2.2 - Mn hnh ci t cc Windows Components

1.2. Ci t Personal Web Server (PWS) trn Win 98 ci t Personal Web Server trn h iu hnh Windows 98, bn vo th mc \Add-ons\pws trn a CD dng ci t h iu hnh ny hoc a CD c phn NT Option Pack. Tm v chy tp tin setup.exe.

Cc dch v mc nh c ci l Web Server, FTP Server, Virtual SMTP Server. Sau khi ci t xong, cc th mc mc nh sau s c to ra: \Inetpub\ \Inetpub\wwwroot \systemroot\Help\iisHelp \systemroot\system32\inetsrv systemroot l th mc system32 trong th mc ci t Windows qun tr v cu hnh cc dch v ny, bn hy chy chng trnh Internet Services Manager trong mc Start/Programs/Administrative Tools. IIS ci t trn Windows 2000 Professional c mt s gii hn so ci t trn vi Windows 2000 Server nh ch c to mt website, s kt ni b gii hn,...


39

40




Hnh 2.4 - Mn hnh ci t Personal Web Server

Hnh 2.5 - Cc la chn cc thnh phn khi ci PWS

Chn cc thnh phn chnh ca Personal Web Server t mn hnh nh hnh 2.5. Sau khi ci t thnh cng xong, hy chy ci thm phin bn mi nht ca ADO c th h tr tt nht cho cc thao tc trn c s d liu (v d MDAC 2.6). qun l v cu hnh webserver ny, hy chy chng trnh Personal Web Manager.

Hnh 2.6 Mn hnh qun tr v cu hnh PWSL nh Duy - H KHTN Tp. HCM41 42




1.3. Cc cch thc truy cp n websiteSau khi ci xong webserver, truy cp n website ta dng cc cch sau: http://localhost/ http://127.0.0.1/ http:// v d: http://172.29.22.1 http:// v d: http://vm-98se/ http:// v d: http://www.hcmuns.edu.vn

2. CU HNH WEBSERVER2.1. Cc thng s chnhCc thng s mc nh chnh cho webserver l tn m t website (description), a ch IP v port gn cho website. Port mc nh cho website l 80. Nu bn s dng mt port khc, v d nh port 81 cho website, bn phi ghi r trong ng dn URL. V d: http://www.visc-network.com:81/ . Ngoi ra, cn c cc thng s lin quan n s lng cc kt ni ng thi (connections), n nh dng v ni lu tr tp tin nht k (log file) ghi li qu trnh truy cp website. IIS mc nh thit lp th mc C:\InetPub\wwwroot l home directory cho website c tn l Default WebSite.Hnh 2.7 - Mn hnh thit lp cc thng s cho website

2.2. Th mc Home DirectoryMi website phi c mt home directory. N c th c xem nh l th mc gc ca cy th mc web bi v n c nh x vi tn ca my ch cha website. Gi s, nu mt my c tn l www.microsoft.com v home directory l C:\Website\Microsoft, khi truy cp ti mt tp tin, v d nh Search.htm t trong th mc C:\Website\Microsoft, bn phi g vo ng dn sau: http://www.microsoft.com/search.htm. Nu trong th mc C:\Website\Microsoft, bn to mt th mc con c tn l C:\Website\Microsoft\Products, th truy cp ti tp tin windowsnt.htm trong th mc ny, bn phi g vo ng dn nh sau: http://www.microsoft.com/Products/windowsnt.htmL nh Duy - H KHTN Tp. HCM Email: [email protected]

43

44



IIS mc nh thit lp th mc C:\InetPub\wwwroot l home directory cho website c tn l Default WebSite. xem, hiu chnh th mc home directory cho mt website bn click phi chut vo website ri chn Properties. Sau chn mc Home Directory

Mt th mc o c mt tn i din (alias). y l tn m ngi dng s g vo trong ng dn khi mun truy cp n th mc ny. Do , khi to mt th mc o, bn cn phi cung cp 2 thng tin, l tn i din ca th mc o v ng dn vt l ca th mc ny. Trong v d sau, gi s bn thit lp c mt website c tn l www.is-edu.hcmuns.edu.vn, bng sau s minh ha vic nh x gia cc th mc vt l v ng dn tng ng khi mun truy cp n chng URL Path http://www.isedu.hcmuns.edu.vn C:\InetPub\wwwroot\ http://www.isScripts edu.hcmuns.edu.vn/Scripts/ D:\WebForum Forum http://www.isedu.hcmuns.edu.vn/Forum/ Trong Internet Services Manager, cc biu tng tng trng cho th mc o s khc vi cc biu tng tng trng cho th mc thc trong hin th cy th mc ca mt website. Physical Location C:\InetPub\wwwroot Alias (Home Directory) Scripts

2.4. Tp tin truy cp mc nh (Default document) truy cp ti mt trang web trn webserver, bn phi ch nh tn tp tin trong ng dn URL, v d nh: http://www.microsoft.com/ms.htm. Tuy nhin trong mt s trng hp, bn khng cn phi ch nh tn tp tin trong ng dn URL m vn nhn c trang web. iu ny thc hin c do c ch tp tin mc nh c thit lp trn webserver. Tp tin truy nhp mc nh l tp tin s c webserver tr v khi ngi dng khng ch nh tn tp tin c th trong ng dn URL. V d, nu bn ch g ng dn http://www.microsoft.com/ trong Address ca trnh duyt, bn vn truy cp c vo trang ch ca Mircrosoft d khng ch nh tp tin cha trang web ny. iu ny c c l do webserver tr v tp tin mc nh (trong trng hp ny l trang ch ca Microsoft ) cho tt c cc yu cu khng ch nh tn tp tin. Cc tp tin truy nhp mc nh thng c tn l default.htm, default.asp, index.htm, index.asp, ... Tuy nhin IIS cho php bn nh ngha bt k tn tp tin no l tp tin mc nh, ng thi cho php ngi dng khai bo nhiu tp tin mc nh cng lc. Khi mt46

Hnh 2.8 - Mn hnh thit lp thng s cho Home Directory

2.3. Th mc o (Virtual Directory) truy cp ti cc th mc khng nm trong th mc home directory, bn phi to mt th mc o. Mt th mc o l mt th mc m v mt vt l n khng cn phi nm trong th mc home directory nhng li c dng nh th mc tht trn ng dn truy cp.L nh Duy - H KHTN Tp. HCM

45




yu cu gi n webserver m khng ch nh tn tp tin, IIS s tm kim trong danh mc cc tp tin mc nh c khai bo, tp tin tn ti u tin s c tr v cho trnh duyt my client. V d nu bn nh ngha default.htm, default.asp l cc tp tin mc nh, th khi trn th mc hin hnh khng c tp tin default.htm m ch c tp tin default.asp, tp tin default.asp s c gi tr v cho trnh duyt. xem v hiu chnh cc tp tin mc nh, hy chn mc Properties ca website. Sau chn mc Documents.

2.5. t nhiu website trn mt web server (multiple hosting)Trong IIS, bn c th thit lp cu hnh cho nhiu website cng hot ng. Phn ny s cp n vn l lm th no nhiu website c th s dng cng mt port (gi s port 80). thc hin iu ny, bn ch cn nh r tn min ca website v tn port. Hai thng tin ny s giup IIS xc nh duy nht mt website. Bn vo mc Advance trong mc xc nh cc thng s chnh Web site (xem 2.1). Xem v d sau:

Hnh 2.10 - Mn hnh thit lp nhiu website cng hot ng Hnh 2.9 - Mn hnh thit lp danh sch cc tp tin mc nh


47

48




3. MT S VN LIN QUAN N AN TON3.1. Thit lp quyn truy cp thit lp quyn truy cp vo website cng nh cc th mc v tp tin trn website, bn vo mc Properties ca website ri chn Directory Security,

Hnh 2.12 - Mn hnh thit lp hn ch theo tn min, a ch IP

3.2. Nht k s dng (website logging)Bn c th lu li du vt ca cc truy cp ti website ca bn trong tp tin nht k. yu cu cc thng tin no ca vt truy cp s c lu li, bn chn mc Properties ca Log File.

Hnh 2.11 - Mn hnh thit lp quyn truy cp

thit lp hn ch hay m rng quyn truy cp vo website theo vng tn min, a ch IP, ... bn chn mc IP address and domain name restrictions

Hnh 2.13 - Mn hnh ch nh cc thng s c lu trong logfileL nh Duy - H KHTN Tp. HCM Email: [email protected]

49

50



4. MT S CU HI THNG GP4.1. Khng truy cp c trang webSau khi ci t xong IIS/PWS nhng th a ch http://localhost/ vn khng chy c. Trong trng hp ny hy kim tra webserver c khi ng (Start) hay cha hoc kim tra trong Internet Explorer mc Tools/Internet Options/Connections/LAN settings xem li cc thit lp ca Proxy server.

Cc a ch c sp xp theo chc nng h tr, rt tin cho vic nh gi u, nhc im ca tng nh cung cp dch v. Vi chc nng Tm kim nng cao, bn s d dng tm c nh cung cp dch v tha cc yu cu ca bn. Ngoi ra bn cn c th ng k nhn bn tin qua e-mail gii thiu v cc dch v webhosting mi nht. Sau y l mt s a ch cho php t cc trang web vit bng cc ngn ng ASP, PHP, JSP: ASP: http://www.1asphost.com/, http://www.brinkster.com, http://www.domaindlx.com/ , http://www.7host.com/ JSP: http://www.mycgiserver.com/ PHP: http://www.0php.com/free_PHP_hosting.php, http://www.free-php-hosting.com/, Sau khi ng k xong, bn s c cung cp mt a ch truy cp vo website ca mnh. Thng thng cc freeserver ch cung cp dch v gii hn v chn qung co vo cc trang web ca website ca bn.

4.2. Li The page cannot be foundKhi truy cp mt trang web m gp thng bo li nh sau:

The page cannot be foundThe page you are looking for might have been removed, had its name changed, or is temporarily unavailable

iu ny c ngha rng trang web m bn yu cu truy cp khng tn ti trn my ch. Hy kim tra li a ch trang web.

4.3. Li You are not unauthorized to view this pageKhi truy cp mt trang web m gp thng bo li nh sau:

4.5. Lm th no ti mt website ln my chVic a trang web ln mng thng thng bng mt trong hai cch sau: Dng dch v FTP. Ngha l nh cung cp s cung cp cho bn mt ti khon ng nhp vo FTP server cha trang web. Lc , bn s dng kt ni vo FTP server ny thng qua cc phn mm FTP Client nh Windows Commander, WS-FTP. Cch ny th rt thun tin v n gin, do c s dng rt ph bin. Tuy nhin dch v ny li hu nh khng c h tr khi bn ng k min ph. Ti cc website hosting cho php ngi dng s dng giao din web ca h upload tp tin ln. Tuy nhin cch ny b hn ch ch kch thc tp tin bn upload trong 1 ln v s lng tp tin c upload ng thi. Nu bn c khong 100 tp tin th vic upload s rt vt v.

You are not authorized to view this pageYou might not have permission to view this directory or page using the credentials you supplied.

iu ny c ngha rng bn khng c php truy cp trang web m bn ang yu cu truy cp. Hy kim tra li a ch trang web v quyn truy cp m bn ang s dng.

4.4. Cc a ch cho php t trang web (web hosting) min phHy truy cp vo website http://www.freewebspace.net khi bn cn tm kim mt my ch t trang web ca mnh. Website ny lin kt n hng trm a ch cung cp dch v lu tr trang web min ph.

4.6. Dng c s d liu trn cc my ch min phThng thng cc my ch min ph (freeserver) khng bao gi h tr c s d liu (CSDL) nh SQL Server, Oracle c, n gin lEmail: [email protected]


51

52



phi tr chi ph v phn mm. Thm ch khi bn tr tin cho thu ch (web hosting), cng phi tr thm tin mi c h tr SQL Server, Oracle, . Do , hu ht cc freeserver ch h tr ti a cho bn l Access nh Brinkster m thi, hoc l cc CSDL min ph khc nh MySQL, ... Thng thng do ngi dng khng c quyn thao tc trn my ch thu (server hosting) nn cc ng dng web khng th s dng cc system DSN m phi kt ni CSDL di dng DSN-less. Cch khai bo ny cng kh n gin, bn c th tham kho bt c ti liu hng dn lp trnh kt ni web vi CSDL no. Nu bn dng Access th trong phn ng dn n tp tin .mdb phi dng Server.MapPath nh x th mc gc ca webroot, khng c dng ng dn tuyt i dng: C:\mywebsite\db.

CU HI1. Hy cho bit vai tr ca cc phn mm nh IIS v PWS. 2. Phn bit th mc vt l v th mc o. ngha ca th mc o. 3. Cho bit cc tp tin mc nh thng dng i vi cc website. 4. Lm th no hn ch cc i tng c truy cp n mt tp tin hay mt th mc no . 5. Lm th no hn ch cc my tnh c php truy xut n website. 6. Lm th no c th pht hin cc s xm nhp tri php ca cc tin tc vo my ch ca bn.


53

54




THC HNH1. CI T V CU HNH WEBSERVERCi t IIS hay PWS ln my ca bn. Sau thc hin tun t cc bc cu hnh sau: Thay i th mc Home Directory: To trn my mt th mc cha website, v d: C:\MyWebSite v cu hnh sao cho th mc HomeDirectory ca Website tr v th mc ny thay cho th mc mc nh l C:\InetPub\wwwroot Truy cp theo ng dn n th mc vt l: To th mc BookStore trong th mc C:\MyWebSite. Sau unzip tp tin BookStore.zip nm trong AppSamples\BookStore ca a CD vo th mc ny. Truy cp ng dng BookStore t a ch: http://localhost/BookStore/ To th mc o: To mt th mc RealEstate ngoi th mc C:\MyWebSite, v d nh D:\RealEstate. Tip theo unzip tp tin RealEstate.zip nm trong th mc AppSamples\RealEstate ca a CD vo th mc ny. Sau to mt th mc o, ly tn l RealEstate sao cho tr n th mc D:\RealEstate. Truy cp ng dng RealEstate t a ch: http://localhost/RealEstate/ Kim tra web server c h tr ASP hay khng: To th mc D:\MyApp, sau to mt th mc o c tn l MyApp tr n th mc ny. To mt tp tin default.asp vi ni dung trong D:\MyApp ri chy th bng cch g vo a ch: http://localhost/MyApp/default.asp Cu hnh tp tin mc nh: Kim tra xem cc tp tin mc nh ca website l g. Sau cu hnh cho website truy cp cc tp tinh mc nh theo th t sau: default.asp, index.asp, default.htm, index.htm. Nu l IIS ci t trn webserver, cu hnh FTP server sao cho cc user khi kt ni vi server s c chuyn n th mc C:\MyWebSite. Cu hnh IIS sao cho c th hosting ng thi nhiu website.

2. NG K WEBSITE MIN PH TI FREESERVERSFreeservers cho php bn t website ca bn ln server ca h min ph. Tuy nhin dch v ny ch cho php trang web tnh, do cc trang web cha cc m ASP, PHP, khng thc hin c Vo a ch http://www.freeservers.com min ph vi a ch truy http://yourname.freeservers.com ng k website cp c dng


55

56




G vo a ch m bn d nh ng k ti yourname. Sau click Go. Mn hnh tip theo s hin ra, bn chn mc cui cng 100% Free Hosting Option v click vo SignUp

Nu ng k thnh cng, mn hnh sau s hin ra cung cp cho bn mt s la chn khi xy dng website ca mnh. Sau bn hy in vo cc thng tin lin quan cn thit nh H tn, mt khu, email, Cui cng g vo chui k t theo yu cu ging bn tri chc rng bn ng vi cc qui nh ca FreeServers khi cung cp dch v min ph ny.


57

58




3. CI T WEBSERVER IIS H TR PHPVo trang http://www.php.net/downloads.php, chn trong mc Windows Binaries/PHP 4.3.1 installer ti phn mm mi nht v. Thc hin chng trnh php-4.3.1-installer.exe chng trnh t ci t v cu hnh webserver IIS h tr PHP. Ch rng phi ci IIS trc khi ci PHP v trong mn hnh setup ca PHP, chn webserver tng ng vi webserver ang ci trn my ca bn (mc nh l Microsoft IIS 4 or higher)

4. NG K DCH V T TRANG WEB MIN PHHy vo cc a ch web h tr t trang web min ph c cp trong phn 4.4 ng k. Thng thng cc bc tun t nh sau: kim tra vic ci t c thnh cng hy khng, hy vo trnh qun l webserver IIS l Internet Information Services, chn phn Web Sites. Trong mc Home Directory, chn Configuration, kim tra xem trong Application Mappings c khai bo trnh x l trang php hay khng nh hnh sau: in vo cc thng tin ng k, tn ng nhp, mt khu, a ch email chng trnh gi thng tin yu cu xc nhn ng k. Sau khi ng k thnh cng, bn s c cung cp mt ni lu tr trn my ch v a ch trang web truy cp n ni ny. a website mnh thit k ln, bn s dng cc dch v ti tp tin ca ni h tr, c th l theo cch dng FTP hoc dng trnh duyt.L nh Duy - H KHTN Tp. HCM Email: [email protected]

59

60



Chng 3

THIT K TRANG WEB1. GII THIU V HTMLHTML l ngn ng dng xy dng trang web. N m t cch thc m d liu c hin th thng qua tp cc k hiu nh du thng c gi l tag. Cc tag ny c bao quanh bi cc du . V d: , , l cc tag HTML. Mt trang web thng thng gm c hai thnh phn chnh l: d liu ca trang web (v d nh vn bn, hnh nh, m thanh, ...) v cc tag HTML dng m t cch thc m cc d liu ny c hin th. Khi mt trang web c ti v trnh duyt, trnh duyt s cn c vo cc tag HTML nh dng d liu c hin th. V d sau cho thy, cng mt d liu l dng vn bn This is webpage. Tuy nhin nu c thm nh dng ca tag dng th hai, hnh thc hin th d liu s khc. M HTMLThis is webpage This is webpageMc d lc son tho bn c th ngt dng, hay thm nhiu khong trng vo nhng khi hin th, ba on trn u cho kt qu nh nhau l:The browser will ignore new lines and extra spaces in the textKhi bt u son tho mt trang web, cc tag c bn sau s ng vai tr l khung cho vic nh ngha mt trang HTML. Xt v d ca mt trang HTML n gin sau: Title of the web page An example of a simple web page. : nh ngha phm vi ca vn bn HTML. : nh ngha cc m t v trang HTML. Cc thng tin ny s khng hin th di dng ni dung ca trang web. : M t tiu ca trang. Tiu ca trang web thng c hin th nh l tiu ca ca s hin th trang web. Thng tin ny cng c th c dng bi mt s my tm kim xy dng ch mc cc trang web. : Xc nh vng thn ca trang web. y l phn m cc d liu cng vi cc tag HTML s c dng nh dng ni dung ca trang web.Hin th trn trnh duytThis is webpage This is webpageHu ht cc tag ca HTML u c tag bt u v tag kt thc tng ng. Tag kt thc tng ng vi mt tag ch khc ch c thm k t /. V d: tag c tag kt thc tng ng l . Cc tag khng phn bit ch thng v ch hoa. Ngha l cc tag , v l nh nhau. Trong qu trnh c trang web hin th, trnh duyt s b qua cc khong trng tha v cc du ngt dng gia vn bn d liu v cc tag. chnh l l do m ba on sau s cng c hin th nh nhau. on 1The browser will ignore new lines and extra spaces in the textMt tag thng thng bao gm hai thnh phn: tn ca tag (dng cho bit tag ny nh ngha ci g) v thuc tnh ca tag (dng cho bit d liu c hin th nh th no). V d sau minh ha vic thay i cc thuc tnh FACE v SIZE ca tag M HTMLThis is a web page This is a web pageon 2The browser will ignore new lines and extra spaces in the texton 3The browser will ignore new lines and extra spaces in the textHin th trn trnh duyt This is webpageThis is webpageEmail: [email protected] nh Duy - H KHTN Tp. HCM6162L nh Duy - H KHTN Tp. HCMEmail: [email protected]. MT S TAG C BN CA HTML2.1. nh dng trangnh dng trang thng thng bao gm cc thng tin v tiu trang, bng m k t c dng, mu nn, nh nn, t kha. t tiu cho trang web, ta dng tag , v d mun c tiu ca trang web thit k l Cho mng cc bn n vi trang web ny, ta dng: Cho mng cc bn n vi trang web ny t bng m m trang web dng, ta s dng thit lp cc thng s cho tag . V d thit lp sau: cho bit trang web s dng bng m Unicode-UTF-8. Ta c th t mu nn, nh nn cng nh mu ch cho ton b trang web bng cch t cc thuc tnh BGCOLOR, BACKGROUND v TEXT tng ng trong tag . V d sau t mu nn cho trang web l mu , mu ch l mu trng: . V d sau minh ha mt trang web c cc nh dng trang trnh by trn: Cho mng cc bn n vi trang web ny 2.2. nh dng vn bn2.2.1. nh dng phn on Tag c dng nh dng phn on (paragraph). Thuc tnh thng gp l ALIGN dng canh chnh d liu trong phn on l LEFT (tri), RIGHT (phi) CENTER (canh gia) hoc JUSTIFY (canh u hai bn). V d sau minh ha vic hin th khi t cc thuc tnh canh chnh cho tag bng cch ln lt gn thuc tnh ALIGN trong tag ny cc gi tr LEFT, CENTER, RIGHT:This is webpage This is webpage This is webpageHnh 3.1 Cc thuc tnh canh chnh ca tag Trong mt phn on, vic ngt dng trong lc son tho khng nh hng g n vic hin th. Trnh duyt ch hiu ngt dng trong mt phn on thng qua tag
. V d: H tn: L nh Duy Ngh nghip: Ging vin a ch: Khoa CNTT H Khoa Hc T Nhin Hnh 3.2 Khng th xung dng nh thit kL nh Duy - H KHTN Tp. HCM63 64Email: [email protected] nh Duy - H KHTN Tp. HCMEmail: [email protected] hin th mi mc trn mi dng, ta phi chnh li on m HTML trn bng cch thm vo cui mi mc tag
nh sau: H tn: L nh Duy
Ngh nghip: Ging vin
a ch: Khoa CNTT H Khoa Hc T Nhin
2.2.2. nh dng ch Tag nh dng font ch, mu sc, kch thc, ... ca vn bn. Cc thuc tnh ca tag ny thng l: FACE: loi font ch, SIZE: kch thc, COLOR: mu ch. Ngoi ra, nh dng ch in m ta dng tag , in nghing dng tag , gch di dng tag . Thuc tnh COLOR dng trong cc tag thng c nh ngha bng tn qui c (v d nh RED: mu , BLUE: mu xanh da tri, ...) hoc m RGB di dng 3 ch s h 16 bt u bng du # (v d nh #FF0000). V d sau nh dng on vn bn vi font Tahoma, in m, kch thc +2 (10pt)Thut x th ca ngi xa c kt qu hin th l: Thut x th ca ngi xa2.3. nh dng hnh nhHnh 3.3 Dng tag
khi mun xung dngNgoi ra, ta cng c th dng ng k ngang vi tag to s phn cch gia cc thnh phn trong trang web. Thuc tnh thng gp l ALIGN (dng canh chnh v tr ca ng ny) v COLOR (mu sc).Ni dung ca trang web Cp nht nm 2003. Mi kin, gp xin lin h Webmaster.Tag c dng chn mt nh hoc mt video clip vo trong mt trang web. Cc nh dng tp tin nh v video sau c h tr trn Internet Explorer: *.avi, *.bmp, *.emf, *.gif, *.jpg, *.jpeg, *.mov, *.mpg, *.mpeg, *.png, *.wmf, ... i vi trang web khng cha hnh nh, th ni dung vn bn s c hin th sau ny nm ton b trong trang web. Tuy nhin vi trang web c cha hnh nh, hnh nh s l mt tp tin c lp vi tp tin cha trang web. Tag dng trong trang web thng bo cho trnh duyt c tp tin nh v hin th ti v tr t tag ny. V d, mt trang web mun hin th hnh nh linh vt biu tng Seagames 22 sau on vn bn Linh vt Seagames 22, phi bao gm hai tp tin; Mt tp tin hnh nh v linh vt, v d linhvat.gif. Tp tin cn li cha on vn bn Linh vt Seagames 22 v tag nh sau: Linh vt Seagames 22 Hnh 3.4 Phn cch bng tag Cc thuc tnh chnh bao gm: SRC (tn tp tin hnh nh), WIDTH, HEIGHT (kch thc nh), BORDER (ng vin khung quanh nh), ALT (vn bn thay th dng khi khng hin th), ALIGNL nh Duy - H KHTN Tp. HCM65 66Email: [email protected] nh Duy - H KHTN Tp. HCMEmail: [email protected](canh chnh), ... Thuc tnh ALT cng c dng khi ta mun a chut n hnh nh v c dng ch nh tooltip hin th bn di.M HTML Download Email me Forum nghaHin th ca s ti tp tin theo giao thc FTP. Gi email M tp tin trong ca s nh ngha bi TARGET2.4. nh dng hyperlink (siu lin kt)Tag c dng t mt hyperlink. on vn bn (hay hnh nh, ...) nm gia cc tag v s ng vai tr nh l du hiu (anchor) hyperlink. Thng thng, con tr chut s thay i hnh dng (thng l hnh bn tay) khi di chuyn ngang qua on vn bn ny. Mt hyperlink cho php lin kt ti mt v tr khc ngay bn trong trang web cha hyperlink (lin kt ni) hoc ti mt trang web khc (lin kt ngoi). to mt lin kt ni, ta cn thc hin hai bc. Bc 1 l nh du v tr (bookmark) ca ni cn lin kt bng thuc tnh NAME. Bc 2 l to hyperlink n v tr va c nh du. V d sau minh ha vic to lin kt ni khi ngi dng nhn vo hyperlink Go to Chapter 1 th trnh duyt s chuyn n v tr ca Chapter 1 trong cng trang web M HTML Go to Chaper 2 ... ... Chapter 1Mt s gi tr c th c dng gn cho thuc tnh TARGET ca tag l: Gi tr ca TARGETName _blank _parent _self _top nghaNp trang web trong ca s hoc FRAME c tn l name Np trang web vo mt ca s trng mi. Ca s mi ny khng c tn. Np trang web vo ca s cha gn nht ca trang web hin hnh. Np trang web vo cng ca s vi trang web hin hnh. y l gi tr mc nh ca hyperlink. Np trang web vo ca s cao nht (topmost).Hin th trn trnh duytGo to chapter 12.5. nh dng mt s k t c bitChapter 1Du # trong mc HREF l du hiu ca lin kt ni. lin kt ti cc trang web khc, in a ch URL ca trang web vo mc HREF. Xem cc v d sau: M HTML Intel Home Page Home Click here DownloadHTML s dng cc k t c bit (v d nh nh du cc tag, ...), do hin th cc k t c bit ny, ta phi dng cc nhm k t thay th sau: K t cn hin th< > & khong trng , #, 1/2 , 1/3, 3 /4 , , M thay th< > & " &cent, &pound, &yen &frac14, &frac12, &frac34 &divide, &deg &reg, &copy nghaLin kt n trang my ch khc Lin kt n trang khc trong cng th mc Gi mt hm JavaScript Hin th ca s ti tp tin v.L nh Duy - H KHTN Tp. HCM6768Email: [email protected] nh Duy - H KHTN Tp. HCMEmail: [email protected]. Chuyn hng trang t ng (Automatic redirect) nh ngha mt trang s t ng chuyn sang mt a ch khc sau mt khong thi gian nh trc, ta chn ngay sau tag mt tag nh sau: Trang web cha tag trn s t ng chuyn sang trang mi http://domain/directory/file.html sau khong thi gian l 3 giy.3. NH DNG BNG BIUTag c dng nh dng bng cng vi cc tag , nh dng cc dng, ct. Cc dng, ct trong bng thng c gi l cell. Cc thuc tnh thng dng l: BORDER (nh ngha ng vin, nu t gi tr l 0 th s khng c ng vin), BGCOLOR (mu nn), ALIGN (canh chnh), WIDTH (chiu rng, c th theo % ca kch thc ca s hoc pixel), CELLPADDING (khong cch gia ni dung v ng bin ca cell), CELLSPACING (khong cch gia cc cell). on m HTML sau minh ha mt bng d liu gm c 2 dng, 2 ct, kch thc l 300 pixel, khong cch gia ni dung v ng bin ca cell l 5: MSSV H v tn 9901234 Trn c V Hnh 3. 6 Minh ha mt bng n gin trn (merge)/tch (split) cc dng hoc ct li vi nhau ta dng cc thuc tnh tng ng l ROWSPAN hoc COLSPAN. V d sau minh ha trong mt bng va c s trn/tch trn dng v ct: M nhm MSSV H v tn Nhm 01 9901234 Trn c Vn 9901235 Hong Minh V L nh Duy - H KHTN Tp. HCM6970Email: [email protected] nh Duy - H KHTN Tp. HCMEmail: [email protected] s x l d liu nhp t form), METHOD (phng thc chuyn d liu), NAME (tn ca form dng cho cc x l sau ny). Ngi dng nhp d liu cho form thng qua cc nhp liu (thng gi l cc controls) nh textbox, checkbox, radio button, push button, dropdown listbox, ... Cc nhp liu ny c t trong phn bao quanh bi cp tag v . Khi form c submit, d liu m ngi dng nhp vo trong cc nhp liu ny s c chuyn n chng trnh x l form theo dng =. Chnh v vy m thuc tnh NAME l thuc tnh rt quan trng khi khai bo cc nhp liu ny.Hnh 3. 7 Minh ha mt bng c trn/tch cc ctC hai cch thit lp b rng (WIDTH) ca mt cell hoc mt bng, l tnh theo % v tnh theo pixel. Trong nhiu trng hp, vic t theo % s lm cho kch thc bng thay i ty theo d liu v phn gii ca mn hnh my ngi dng, do m bo tnh nht qun trong hin th d liu ca bng, nn chn cch tnh theo pixel. Trong thit k trang web, cc bng biu ng vai tr rt quan trng v n l cng c chnh dng th hin cc trnh by phc tp ca trang web. Hin nay, cc phn mm h tr son tho trang web h tr vn cha tt cc thao tc phc tp trn bng biu. Do , cch tt nht l kt hp c hai. Ngha l, ngoi vic s dng cc phn mm ny pht sinh bng biu mt cch trc quan, ta phi s dng m HTML can thip khi cc phn mm ny khng p ng ni cc trnh by phc tp nht l khi c cc bng va lng vo nhau, cc dng ct trn/tch nhiu ln, ...Mt khi form c submit, cc d liu s c chuyn n cho chng trnh x l form theo dng =. Ngi ta dng du & ngn cch d liu ca 2 control khc nhau. V d sau minh ha mt form v d liu khi submit c dng: http://localhost/Update.asp?USERID=ledduy&FULLNAME=Le+Dinh +Duy&[email protected]&btnSubmit=Update Full Name:
Email:
4. FORM V CC THNH PHN CA FORMForm thng c dng nh l cng c h tr nhp liu cho cc ng dng trn Web, tng t nh cc hp thoi (dialog) trong cc ng dng trn Windows. Hot ng ca form thng thng l: ng dng hin th form yu cu nhn thng tin t ngi dng, ngi dng in cc thng tin v kt thc vic nhp liu bng cch submit form. Sau d liu s c chuyn n cc chng trnh x l tng ng. Tag c dng thit lp mt form nhp liu. Cc thuc tnh chnh l: ACTION (c dng ch nh chng trnhL nh Duy - H KHTN Tp. HCM Email: [email protected] 3. 8 Cch d liu c chuyn n trnh x l formMt s k t c bit s c chuyn i trc khi d liu c chuyn i:7172L nh Duy - H KHTN Tp. HCMEmail: [email protected] t thay th c chuyn i + %3D %0A %0D %25 %38 to cc nhp liu dng hp vn bn, nt nhn, checkbox, radio button, ta dng tag v t gi tr tng ng vi cc loi nhp liu cho thuc tnh TYPE.khong trng = du xung dng (line feed) v u dng (carriage return) % &K t nhp vonh thuc tnh TYPE=RESET trong tag . Trong khi nt nhn SUBMIT l nt nhn dng kt thc vic nhp liu ca form. to nt nhn dng ny, ta ch nh thuc tnh TYPE=SUBMIT trong tag . Gi tr gn cho thuc tnh VALUE chnh l nhn ca nt nhn. V d sau minh ha vic to ra hai nt nht Submit v Reset: 4.1. Hp vn bn (TextBox)Dng nhp d liu trn mt dng. to nhp liu dng ny, ta ch nh thuc tnh TYPE=TEXT trong tag . V d sau minh ha m HTML dng to ra mt nhp liu dng hp vn bn, c tn l USRNAME, kch thc l 25 k t, gi tr mc nh l ledduy:Username: 4.3. Radio buttonDng chn duy nht mt trong tp cc la chn c lit k. to ra mt nhm cc radio button, ta phi ch nh thuc tnh TYPE=RADIO trong tag ca cc radio button v cc radio buttuon ny phi c cng gi tr ca thuc tnh NAME. Khi form c submit, d liu ca radio button c chn (gi tr gn cho thuc tnh VALUE) s c chuyn i cng vi tn ca radio button ny. t mt radio button l mc nh, ta thm vo thuc tnh CHECKED. V d: V d sau minh ha la chn gii tnh (Sex) thng qua hai radio button Nam (Male) v N (Female):Sex:Male FemaleThuc tnh SIZE dng ch s k t hin th trong nhp liu (y cng chnh l chiu rng ca nhp liu). Thuc tnh MAXLENGTH dng ch s k t ti a c th c nhp. Khi mun ch nh d liu nhp vo control di dng mt khu (ngha l cc k t nhp vo s khng c hin th m thay vo l cc du *), ta ch nh thuc tnh TYPE=PASSWORD.V d:Password: 4.4. CheckboxDng chn mt hoc nhiu trong tp cc la chn c ngh. Khi ta ch nh thuc tnh TYPE=CHECKBOX trong tag , ta s to ra c mt nhp liu kiu checkbox. Tng t nh radio button, khi mt checkbox c check, gi tr tr v ca n tng ng vi gi tr ca thuc tnh VALUE. t mt check box l ON, ta thm vo thuc tnh CHECKED.Email: [email protected]. Nt nhn (Button)Khi ch nh thuc tnh TYPE=BUTTON trong tag ta s to c mt nt nhn ni chung. Trong form thng thng c hai loi nt nhn c bit l nt nhn SUBMIT v nt nhn RESET. Nt nhn RESET l nt nhn m khi ngi dng nhn chut vo, cc d liu ca cc nhp liu khc khc u c t v gi tr mc nh lc khi to. to ta s chL nh Duy - H KHTN Tp. HCM7374L nh Duy - H KHTN Tp. HCMEmail: [email protected] d sau minh ha mt nhm cc checkbox dng ly thng tin v cc ngn ng c chn:Language: English French Japanesevin s c lu tr trong mt nhp liu ca form c kiu l HIDDEN. Thng tin ny s khng c hin th trn mn hnh ca ngi dng nhng s c chuyn i mi khi form submit. to mt nhp liu c kiu l HIDDEN, ta ch nh thuc tnh TYPE=HIDDEN trong tag nh v d sau:4.5. Dropdown listboxDng la chn Ta s dng tag to. Mi mc ca dropdown listbox s c nh ngha bng tag . V d sau minh ha vic chn mt ngh nghip c lit k sn:Occupation: Other Engineer Teacher Doctor Worker Mi khi form c submit, ngoi cc nhp liu c hin th trn mn hnh, ta cng s c thm mt nhp liu c tn l USRID v gi tr l ledduy c chuyn n cho trnh x l4.7. Vng vn bn (TextArea)Dng nhp d liu trn nhiu dng. to nhp liu dng ny ta dng tag . D liu nm gia cp tag v chnh l gi tr tr v ca control dng ny. V d:Other information: Thuc tnh ROWS v COLS dng ch s dng v ct ca vng d liu nhp. V d sau minh ha mt form nhp liu gm c y cc nhp liu k trn: Username:
Password:
Sex:Male Female
Language: English French Japanese
Occupation: Other Engineer Teacher DoctorEmail: [email protected] t mt mc chn trong dropdown listbox l mc nh, ta thm vo thuc tnh SELECTED. to mt multi-select listbox ta t thm thuc tnh SIZE v MULTIPLE vo trong tag . Khi form c submit, d liu ca tng ng vi mc chn (gi tr gn cho thuc tnh VALUE ca tag ) trong dropdown listbox s c chuyn i cng vi tn ca dropdown listbox ny. V d trong trng hp v d trn, khi ngi dng chn Worker, gi tr tr v ca nhp liu ny s l 4.4.6. d liu n (Hidden field)Dng lu tr cc thng tin ca form cn thit cho chng trnh x l sau ny nhng li khng hin th di dng mt control no. Ta ly v d form cp nht thng tin mt sinh vin. Cc thng tin m ngi dng c th cp nht thng l H tn, Ngy thng nm sinh, ... s c hin th trn cc nhp liu ca form. Tuy nhin chng trnh x l form cp nht ny c th bit cn cp nht sinh vin no, cn phi c thm thng tin v M s sinh vin (gi s ng vai tr l kha chnh trong c s d liu). Thng tin v M s sinhL nh Duy - H KHTN Tp. HCM7576L nh Duy - H KHTN Tp. HCMEmail: [email protected]
Other information: Hnh 3.10 - Minh ha frameTag nh ngha cch t chc ca cc frame. Tag nh ngha chi tit tng frame. Cc thuc tnh ca tag l: ROWS (nh ngha s frame c phn theo chiu dc), COLS (nh ngha s frame c phn theo chiu ngang), FRAMEBORDER (nh ngha ng vin khung ca cc frame con, gi tr l YES hoc NO) Cc thuc tnh c bn ca tag l: SRC (a ch URL ca trang web s hin th trong frame), NAME (tn ca frame, c th dng trong thnh phn TARGET ca hyperlink), BORDER (ng vin khung, nu khng mun c ng vin th t gi tr ny v 0), MARGINHEIGHT, MARGINWIDTH (canh chnh l), SCROLLING (c hin th scrollbar hay khng, cc gi tr thng dng l YES, NO, AUTO), NORESIZE (khng cho php ngi dng hiu chnh kch thc ca frame window) nh ngha cc frame lng nhau ta dng cc tag lng nhau V d sau minh ha nh ngha ca trang web trn:Hnh 3. 9 Minh ha mt form nhp liu5. FRAMENi dung hin th trn trnh duyt c th c tch hp t nhiu ca s khc nhau, mi ca s cha mt URL tng ng vi mt trang web. V d sau cho ta thy c ba ca s, mt ca s cha thc n nm ngang, mt ca s cha thc n bn tri v mt ca s cha ni dung bn phi. Trong trng hp ny chng ta dng tag v nh ngha.L nh Duy - H KHTN Tp. HCM7778Email: [email protected] nh Duy - H KHTN Tp. HCMEmail: [email protected] Welcome to IS-EDU Site 6.2. Cc cch s dng style sheetsC 3 cch s dng style sheets ty vo nhu cu thit k: Bng cch lin kt (linking) n mt tp tin cha cc style sheet. Cch ny cho php bn thay i cch trnh by ca nhiu trang web mt cch d dng thng qua vic sa i mt tp tin cha cc style sheet ny m thi. Bng cch nhng (embedding) style sheet vo trong tp tin HTML. Cch ny cho php bn thay i cch trnh by ca tng trang web mt thng qua vic sa nh ngha style sheet ban u. Bng cch thm cc inline styles vo trang HTML. Cch ny cho php bn thay i mt cch nhanh chng cch th hn ca tng tag, hoc nhm cc tag hoc mt khi thng tin trn trang web.6. CASCADING STYLE SHEET (CSS)S dng style sheet gip cho ngi son tho trang web d dng hn trong thit k v hiu chnh cc trang web ng thi m bo tnh nht qun trong trnh by ca website. Mt style sheet l mt mu nh dng (template) ca cc HTML tag. Khi nim style sheet trong cc trang Web rt tng t vi khi nim templates trong MS Word. Bn c th thay i s trnh by ca mt vn bn Word thng qua vic thay i cc style trong vn bn ny. Mt cch tng t, bn c th thay i s trnh by ca cc trang Web bng cch thay i cc style sheet c gn cho cc HTML tag.6.3. C php c bn:C hai kiu linked and embedded style sheets u cha mt hoc nhiu nh ngha style. Mt nh ngha style (style definition) gm c mt HTML tag, sau l danh sch cc thuc tnh ca tag c t bn trong cc du { v }. Mi thuc tnh c xc nh bng tn thuc tnh, theo sau l du : v gi tr ca thuc tnh. Cc thuc tnh c phn cch vi nhau bi du ; . V d sau minh ha mt style definition gn cho tag : FONT{font-size: 15pt; font-weight: bold} Sau nh ngha mt style mi, dng n trong cc tag, ta gn tn style cho thuc tnh class trong tag . V d sau minh ha mt style c tn l txtInputText, sau c dng ch nh font ch cho dropdown listbox: Test Email: [email protected]. Cc li ch ca style sheet:S dng c cc thuc tnh nh leading, margins, indents, point sizes, and text background colors trong trang web. y l cc thuc tnh m cc tag HTML khng h tr trc tip. Thay i thuc tnh ca tng trang web hoc ton b cc trang web trong website m khng cn phi hiu chnh cc dng lin quan n nh dng trong cc tpt in HTML. V d, nu ta dng tag vi thuc tnh FACE=Arial ch nh font ch cho cc vn bn ca mi trang web trong website, ta s phi hiu chnh tng tag mt trong ton b cc trang web nu ta mun i tt c cc vn bn ny sang font ch khc, v d nh Tahom a.L nh Duy - H KHTN Tp. HCM7980L nh Duy - H KHTN Tp. HCMEmail: [email protected] Tui Tr Lao ng Thanh Nin ... 6.4. Lin kt n mt Style Sheet c th s dng cng mt style sheet cho bt k trang web no ca site, trc tin bn phi to mt tp tin .css lu tr cc nh ngha style, sau trong bt k cc trang web no mun s dng cc style sheet ny, bn phi tin hnh th tc lin kt. V d, nu bn c mt tp tin style sheet c tn l MYSTYLES.CSS t ti a ch http://internet-name/mystyles.css, lin kt vo trang web ca mnh, bn thm cc dng sau nm gia tag Title of article 6.6. S dng Inline StylesCc nh ngha Inline style nh hng trc tip n tag hin hnh. Chng c nhng vo bn trong tag bng cch s dng tham s STYLE . V d: Tui Tr Lao ng Thanh Nin 6.5. Nhng mt STYLE Block vo trang HTML nhng a style sheet, bn thm block vo u trang web gia tag v . Cch ny cho php bn thay i trnh by ca ch trang web hin ti m thi. Theo sau tag l bt k nh dng no v kt thc bi tag . V d sau nh ngha cc style cho cc tag , , , v :L nh Duy - H KHTN Tp. HCM8182Email: [email protected] nh Duy - H KHTN Tp. HCMEmail: [email protected] HNH1. S DNG PHN MM SWISH TO CC HIU NG HA N GINPhn mm Swish cho php to cc hiu ng ng t n gin n phc tp. Kt qu cui cng ca ng dng ny l tp tin .swf c th chy c trn cc trnh duyt c ci t sn Macromedia Flash Player. i tng chnh khi son tho mt hiu ng ng trn Swish c gi l Movie (on phim). Mt movie l tp hp ca nhiu Scene (phn cnh) khc nhau, mi scence bao gm tp hp cc Objects (i tng). Hai i tng chnh c h tr trong phin bn Swish 1.51 l Text Objects (tp cc k t) v Image Objects (hnh nh). Cc i tng ca scence c th hot hnh (animate) thng qua vic thit lp cc Effects (hiu ng). Cc hiu ng c lp trnh sn c th sinh ra cc Frames (khung hnh) tng ng.Hnh 3. 12 Ca s View WindowSau khi ci t xong, phi ng k s dng. Mt ng k s dng hp l s lm m i mc Purchase trong mn hnh lm vic ca Swish.1.2. Thit lp cc thng s c bn cho movieTrong tab General, hiu chnh cc thng s lin quan n chiu rng, chiu cao, mu nn, tc hin th ca cc khung hnh ca movie. Lu rng, ta cng c th hiu chnh chiu rng v chiu cao bng cch dng chut hiu chnh View Window.1.1. Ci t SwishCi t Swish t a CD. Khi ng ng dng Swish. Mn hnh lm vic chnh xut hin cng vi View WindowHnh 3. 13 Hiu chnh cc thng s c bn ca movie1.3. To lp mt movie n ginNgay khi khi ng, ng dng t ng to ra mt scence mi c tn l Scene1. Nu mun chn thm scene khc, hy nhn nt bn tri nt hnh ch T trn thanh cng c hoc chn trn thc n Modify/Insert Scene.Hnh 3. 11 Mn hnh lm vic chnh ca SwishL nh Duy - H KHTN Tp. HCMTa chn mt i tng vn bn vo scene bng cch nhn nt hnh ch T trn thanh cng c hoc chn trn thc n Modify/Insert Text. Trong trng hp c nhiu i tng vn bn83 84Email: [email protected] nh Duy - H KHTN Tp. HCMEmail: [email protected] cng mt scene, thit lp th t, ta chn i tng ri nhn cc nt mi tn ln hoc mi tn xung cho n khi t c v tr mong mun. thay i v tr mc nh ca vn bn va hin ra, click vo n trong ca s View Window v ko n v tr mong mun. V d ta ko on vn bn v pha phi ca View Window:Hnh 3. 14 Thay i v tr ca vn bn va chn vo thay i ni dung on vn bn, chn tab Text trong mn hnh lm vic chnh v thay th n. Chng ta cng c th thay i font ch, kch thc, mu sc, kiu ch (bold, italic, ...).Hnh 3. 16 Thit lp cc hiu ng cho cc i tngi vi mt s hiu ng, s c hp thoi yu cu bn nhp cc thuc tnh ca hiu ng. Nu mun gi cc thuc tnh mc nh, hy chn OK khi mn hnh thit lp hiu ng hin ra. V d:Hnh 3. 15 Hiu chnh ni dung v cc thuc tnh ca vn bn thm vo cc hiu ng cho i tng no trong scene, chn Timeline Tab v click trn i tng cn t hiu ng, sau nhn nt Add EffectHnh 3. 17 Thit lp cc thng s cho mt hiu ngL nh Duy - H KHTN Tp. HCM8586Email: [email protected] nh Duy - H KHTN Tp. HCMEmail: [email protected] xem th s trnh din ca cc hiu ng, ta nhn nt Play Movie trn Toolbar. Mun dng tip tc hiu chnh, nhn nt Stop. Sau khi lm xong, ta nhn nt Save Movie trn thanh cng c hoc chn trn thc n File/Save. Tp tin s c lu vi phn m rng l .swi. Sau ny, mun hiu chnh, ta c th m li tp tin ny. kim tra movie sau ny s thc hin nh th no trn trnh duyt, nhn vo nt Test In Browser nm ngoi cng trn thanh cng c.1.4. a cc movie vo trang web a movie va to vo trang web, trc tin phi kt xut movie ra dng .swf bng cch nhn nt SWF trn thanh cng c hoc chn trn thc n File/Export to SWF.Hnh 3. 19 Mn hnh ExportThao tc ny s a vo clipboard mt on m HTML dng m t movie va ri nh sau: Hnh 3. 18 Kt xut ra tp tin .swfSau , nhn vo tab Export, click vo copy HTML to ClipboardSau , dn on code HTML ny vo v tr cn chn movie trn trang web m ang son tho (ch s dng View HTML).L nh Duy - H KHTN Tp. HCM8788Email: [email protected] nh Duy - H KHTN Tp. HCMEmail: [email protected] tnh quan trng nht l Movie URL. Nu ta t movie th mc khc vi th mc ca trang web hin hnh, ta phi ch nh ng dn n movie trong nhp liu nyHnh 3. 20 Dn on m HTML m t movie vo trang web1.5. t li cc thng s ca movie trong FrontPageChuyn qua View Normal, click phi chut ln i tng ri chn ActiveX Control PropertiesHnh 3. 22 Cc thuc tnh ca movie2. S DNG PHN MM BUTTON STUDIO TO CC NT NHN DNG HA N GINButton Studio l phn mm h tr thit k v to cc button mt cch nhanh chng v d dng. Cc button c to ra c th c dng cho cc trang web, presentations, hay cc ng dng cn dng chng. Bc u tin nn chn hnh dng ca nt nhn bng cch chn vo tab Shape. Sau ta chn kch thc v nh v ca vn bn trong nt nhn bng cch chn vo nt Size+Positioning. Khng nn chn Auto Size v lc kch thc ca nt nhn s ph thuc vo ni dung vn bn hin th trn .Hnh 3. 21 t li thng s cho movie trn trang webL nh Duy - H KHTN Tp. HCM Email: [email protected] nh Duy - H KHTN Tp. HCMEmail: [email protected] 3. 23 Mn hnh lm vic ca phn mm Button StudioHnh 3. 25 Thit lp kch thc v nh vHnh 3. 24 Cc dng nt nhn c h tr snHnh 3. 26 Vn bn hin th trn nt nhnL nh Duy - H KHTN Tp. HCM9192Email: [email protected] nh Duy - H KHTN Tp. HCMEmail: [email protected] sang tab Text g ni dung vn bn s hin th trn nt nhn. ng thi thit lp cc thuc tnh ca vn bn nh l font ch, kch thc, mu sc. Sau khi lm xong, ta c th lu thit k li di dng tp tin .bs bng cch chn thc n File/Save As. Sau ny mun sa li, ta c th m tp tin v tip tc chnh sa. c th dng c trn trang web, ta phi chn chc nng Export trn thc n ra cc dng tp tin hnh nh .gif, .jpg.Gi s mun to mt i tng ha Headings, ta click vo biu tng Headings. Mn hnh h tr to cc Heading xut hin.3. S DNG PHN MM XARA WEBSTYLE TO CC HIU NG HAXara WebStyle l phn mm h tr to cc hiu ng ha t n gin n phc tp c th a vo trang web mt cch nhanh nht. Xara WebStyle c th c dng to cc Headings, banners, nt nhn, nh nn, Hnh 3. 28 Mn hnh h tr to cc HeadingsNhn vo nt Style bn tay tri, cc mu Headings c xy dng sn s hin ra. Chn mt mu, v d nh Web Style. thay i vn bn ca Heading, ta nhn vo nt Text v g vo on vn bn v d nh: Welcome to Ho Chi Minh City. Ta c th thay i font ch, t ch in m, in nghing ty thch y. Cc nt tip theo l Color v Texture cho php hiu chnh mu v mu t ca vn bn. Sau , ta c th thit lp bng bng cch nhn vo nt Shadow. Mc Themes cho php lu li cc thit lp v kiu, mu sc, to bng, ... k trn c th dng li cho thit k tng t sau ny. Mc Save kt xut i tng ra tp tin nh .GIF hoc .JPG dng trong trang webHnh 3. 27 Mn hnh lm vic ca Xara WebStyle to i tng no, hy click vo i tng . V d nh Heading, Buttons, Bullets, Background. Trong mn hnh to tng i tng nu mun tr v mn hnh chnh th chn nt Graphic Type.L nh Duy - H KHTN Tp. HCM9394Email: [email protected] nh Duy - H KHTN Tp. HCMEmail: [email protected] 3. 29 Hiu chnh vn bn ca HeadingHnh 3. 31 Thit lp shadowHnh 3. 30 Thit lp textureHnh 3. 32 Kt xut ra tp tin nh dng trong trang webL nh Duy - H KHTN Tp. HCM9596Email: [email protected] nh Duy - H KHTN Tp. HCMEmail: [email protected]. S DNG PHN MM BANNERSHOP ANIMATIOR TO CC NH NGGIFBannershop GIF Animator l phn mm h tr to cc nh web ng. Cc nh web ng c lu di nh dng .GIF c th c dng trong cc trang web v cc chng trnh khc.Hnh 3. 34 To ra cc frame v chn nh vo cc frameHnh 3. 33 Mn hnh lm vic ca BannerShop Gif Animator to mt nh web ng, trc tin hy thit lp cc thng s ca frame nh kch thc, mu nn, bng cch chn trn thc n Animation/Frame Size, Frame/Set Background Color ph hp vi cc kch thc cc nh s c chn vo tng frame. Sau , chn trn thc n chc nng Image/Import Image chn cc nh vo tng frame mt. Sau khi lm xong mt frame, hy chn trn thc n chc nng Frame/Insert New Frame chn thm mt frame mi ri li tip tc chn nh vo tng frame ny. Tip theo ta thit lp cc hiu ng Animation cho cc frame. Intro Animation ch hiu ng lc bt u hin th frame. Outro Animation ch hiu ng kt thc frame trc khi chuyn sang frame miHnh 3. 35 Cc hiu ng ca frameSau khi thc hin xong vic t hiu ng cho cc frame, nhn nt F9 hoc chn trn thc n chc nng Animation/Play Animation xem kt qu. Cui cng, ta chn trn thc n chc nng File/Save Document lu thit k trn li di dng tp tin .bsd. Tp tin ny sau c th m li hiu chnh. Chn chc nng File/Save Gif Animation kt xut ra tp tin .gif dng trong cc ng dng web.L nh Duy - H KHTN Tp. HCM9798Email: [email protected] nh Duy - H KHTN Tp. HCMEmail: [email protected]. MT S THAO TC C BN KHI THIT K TRANG WEB BNG MICROSOFT FRONTPAGE5.1. Gii thiu v FrontPageMS FrontPage cng vi Macromedia Dreamweaver MX hin ang l cc phn mm h tr thit k web thng dng nht hin nay. Chc nng chnh ca cc phn mm ny l h tr ngi dng to cc trang web mt cch d dng m khng cn thit phi bit nhiu kin thc v HTML. Khi khi ng, mn hnh lm vic ca MS FrontPage nh sau:mc, v d nh C:\MyWebSite. Trong th mc ny, t chc mt s th mc con nh images dng lu cc hnh nh, db dng lu cc tp tin c s d liu, Sau khi to xong th mc c cu trc nh trn, trong FrontPage ta to mi mt website tr n th mc C:\MyWebSite bng cch chn trn thc n chc nng File/New/Page or Web/Empty Web, sau g vo ng dn C:\MyWebSite trong ca mc Options/Specify the location of the new webHnh 3. 37 To mi mt website Hnh 3. 36 Mn hnh lm vic ca MS FrontPage bn tay tri l ca s Views. xem cu trc ca cc website di dng cc tp tin v cy th mc, ta click vo biu tng Folders. lm vic vi mt trang web, ta click vo biu tng Page. Click vo biu tng Hyperlinks s cho ta hnh dung ra s lin kt gia tp tin hin hnh vi cc tp tin khc.Vi vic to website ny, mi khi ta son tho mi bt k tp tin no, mc nh n s c lu trong th mc ny. Ngoi ra, ta c th ch nh bng m UTF-8 l bng m c dng mc nh khi to mi cc tp tin bng cch chn trn thc n chc nng Tools/Web Settings/Language.5.2. T chc website thun tin cho vic xut bn (publish) website sau ny, trc tin nn tp trung tt c cc thnh phn ca website vo mt thL nh Duy - H KHTN Tp. HCM99 100Email: [email protected] nh Duy - H KHTN Tp. HCMEmail: [email protected] S dng frames, bng biu, ... xp t (layout) cc thnh phn ca trang web To v thm vo cc thnh phn ca trang web nh vn bn (text), ha (graphics), bng biu, hyperlink, form, banner, ... nh dng vn bn bng cch dng cc style hoc style sheets FrontPage t ng to ra cc tag khi ta thc hin cc thao tc trn trong tab Normal. Tuy nhin t hiu qu cao trong vic thit k trang web, cn kt hp vi cc kin thc v HTML v chnh sa trong tab HTML Th nghim trang web bng cch chn tab Preview, hoc nt Preview in Browser Mt s lu khc: Khng nn dng font mc nh (default font) khi thit k trang web v n s b ph thuc v thit lp cu hnh ca trnh duyt pha ngi dng Trang ch ca website nn t l default.htm hoc default.asp.Hnh 3. 38 Thit lp bng m mc nh cho ton b cc trang ca website l UTF-85.3. Cc thao tc chnh khi son tho mt trang web to mi mt trang web, chn chc nng File/New/Page or Web/Blank Page. bn di trang web, ta thy 3 tab l Normal, HTML v Preview cho ta nhn trang web ang thit k 3 gc khc nhau. Tab Normal cho thy trang web gc thit k, tab HTML cho thy m HTML ca thit k tab Normal v tab Preview cho xem trc kt xut thc s ca trang web trn trnh duyt. thit k cc trang web nht qun v hiu qu nn thc hin tun t cc bc bt u thit k mt trang web trong MS FrontPage t cc thuc tnh chung cho ton b trang web nh bng m dng l UTF-8, tiu trang, mu nn, L nh Duy - H KHTN Tp. HCM101102Email: [email protected] nh Duy - H KHTN Tp. HCMEmail: [email protected] hnh: G vo mt on vn bn, sau thc hin nh dng theo cc bc sau: Dng chut nh du chn mt nhm cc t, sau thc hin nh dng font ch, kch thc ch, mu ch, hiu ng ch (nh in m, in nghing, gch di). Dng chut nh du chn ton b phn on, sau thc hin nh dng font, border and shading, canh chnh (alignment). Chuyn sang tab HTML xem cc tag v cc thuc tnh tng ng c FrontPage pht sinh. G vo cc on vn bn, sau s dng nt Bullets hoc nt Numbering t cc on vn bn ny v nh dng Bullets hoc Numbering. Thay i thuc tnh ca Bullets v Numbering va to ra5.5. Dng style v style sheet nh dng5.5.1. S dng inline style chn cc inline style vo cc i tng ca trang web, ta click phi chut ln i tng , chn mc Properties, sau chn Style. V d:Hnh 3. 39 Cc thuc tnh chung cho mt trang web5.4. nh dng vn bn (text) v phn on (paragraph)Mt phn on l mt khi vn bn c phn nh vi cc phn on khc bng phm Enter khi son tho. Nu ch mun xung dng m khng mun chuyn sang phn on khc th dng phm Shift+Enter. Mt phn on s c bao quanh bi cp tag , xung dng tng ng vi tag
, khong trng tng ng vi 6 k t: Ta c th nh dng theo nhm cc t c nh du chn hoc nh dng cho ton b vn bn. Cc nh dng c bn bao gm: font ch, kch thc, mu sc, in m/nghing, gch di, canh chnh tri/phi/gia/u hai bn.L nh Duy - H KHTN Tp. HCM103104Email: [email protected] nh Duy - H KHTN Tp. HCMEmail: [email protected] 3. 41 To cc style cho trang web Hnh 3. 40 S dng Inline Style5.5.2. S dng embeded style s dng embeded style, ta thc hin tun t cc bc sau: To ra cc style cho trang web hin hnh bng cch chn trn thc n chc nng Format/Style. Chn mc New to mi mt style, sau in vo cc thng tin cho style. V d: g vo Name (selector) l txtTitle, sau chn mc Format nh dng cho style c tn txtTitle vi Font l Tahoma, kch thc 18pt, mu , in m, p dng style va to vo mt i tng trong trang web, nh du i tng ri chn mc Normal, tm mc c tn txtTitleHnh 3. 42 To mi mt styleL nh Duy - H KHTN Tp. HCM Email: [email protected] nh Duy - H KHTN Tp. HCMEmail: [email protected] 3. 44 Lin kt mt tp tin .css vo trang web5.6. Chn hnh nh v nh ng Flash vo trang webnh dng nh thng dng cho thit k cc trang web l GIF v JPEG. nh GIF tuy b gii hn 256 mu nhng cho php to cc hot hnh (gif animation), nh JPEG cho php nh dng hn 256 mu v kch thc kh nh. Cc phn mm Button Studio, Banner Gif Animation, Paint Shop Pro, Adobe Photoshop l cc phn mm thng dng to v x l cc nh dng cho thit k web. nh ng Flash l cc tp tin dng .swf, c u im l kch thc nh trong khi c th m t c nhiu hot hnh, c dng kh thng dng trong thit k web hin nay. Phn mm Macromedia Flash MX, Swish l cc phn mm thng dng to cc nh ng ny. chn mt tp tin nh vo trang web, chn chc nng Insert/Picture/From File ... FrontPage s to ra tag dng . hin th vn bn dng tooltip khi a chut n hnh nh, hy t gi tr cho thuc tnh ALT ca tag IMG hoc chnh trong Picture Properties/General/Alternative presentationsL nh Duy - H KHTN Tp. HCM Email: [email protected] 3. 43 p dng style vo mt i tng trong trang web5.5.3. S dng Linking style s dng linking style, ta thc hin tun t cc bc sau: To mi tp tin dng CSS bng cch chn trn thc n chc nng File/New/Page or Web/Normal Style Sheet. Gi s lu tp tin ny li vi tn mystyle.css To mi cc style nh trong bc embeded style trn ri lu li. Trong tp tin mypage.htm, dng cc style c nh ngha trong tp tin mystyle.css, ta chn trn thc n chc nng Format/Style Sheet Links, ri ch nh tp tin mystyle.css.107108L nh Duy - H KHTN Tp. HCMEmail: [email protected] to mt hyperlink, nh du on vn bn hoc hnh nh c dng m t s lin kt, ri chn trn thc n chc nng Insert/Hyperlink (hoc nhn Ctrl+K). Hp thoi m t hyperlink xut hin:Hnh 3. 46 Thit lp hyperlinkTa c th t hyperlink sao cho lin kt n cc thnh phn trong cng mt trang, hoc n trang khc trong cng mt website, hoc n trang ca website khc. Ngoi ra, ta cng c th dng hyperlink to ra cc hp thoi ti d liu v, hoc khi ng trnh gi email, Thc hnh:Hnh 3. 45 Dng thuc tnh ALT chn mt nh ng Flash, ta phi chn mt on m m t nm trong cp tag , nh hng dn trong phn s dng phn mm Swish. Lu rng, cn chp nh vo th mc ch nh, v d l images, trong th mc ca website trc khi tin hnh thao tc chn nh. Hyperlink lin kt n mt trang web khc trong cng website. V d hy to trong tp tin default.htm mt button Gii thiu, sao cho khi ngi dng nhn vo n, trang web Intro.htm s hin th ra gii thiu v nhm hoc cng ty no . Hyperlink lin kt n mt trang web ca website khc. V d hy to trong tp tin default.htm mt button Lin kt, sao cho khi ngi dng nhn vo n, trang web v mn hc ny http://www.is-edu.hcmuns.edu.vn/~ldduy/WebCourse/ s hin th. Trong trng hp s dng frame, phi ch nh tn frame m trang web lin kt s c hin th.5.7. Chn hyperlink vo trang webHyperlink c dng kt ni cc trang web t trang ny sang trang khc. Khi ngi dng click vo hyperlink, trang web lin kt s c hin th trn trnh duyt.L nh Duy - H KHTN Tp. HCM109110Email: [email protected] nh Duy - H KHTN Tp. HCMEmail: [email protected] Hyperlink cho php gi trnh gi email to email. V d hy to trong tp tin default.htm mt button Gp , sao cho khi ngi dng nhn vo n, chng trnh gi email s xut hin gi email v a ch [email protected] Hyperlink cho php hin th ca s Save mt tp tin v my ngi dng. V d hy to trong tp tin default.htm mt button Font ting Vit, sao cho khi ngi dng nhn vo n, mt hp thoi lu tp tin s hin ln yu cu ti tp tin FontViet.zip v5.8. S dng bng biuNgoi chc nng thng thng l hin th d liu di dng bng, bng biu cn thng c dng cho vic sp t (layout) cc thnh phn trong trang web. chn mt bng biu vo trang web, chn trn thc n chc nng Table/Insert. Cc thng s cn lu : Border: khng hin th ng vin chn Border size l 0. Width: m bo table khng b resize khi phn gii mn hnh ca my ngi dng thay i, t kch thc ca table di dng pixel bng cch chn radio button In pixels Cell padding dng chnh khong cch t ng vin n vn bn trong mt cell Cell spacing dng chnh khong cch gia cc cell Background dng chnh mu nn ca table Canh chnh trong mi Cell Properties: Horizontal alignment dng chnh cc canh chnh theo chiu ngang. V d nh Left, Right, Center, Justify. Vertical alignment dng chnh cc canh chnh theo chiu dc. V d nh Top, Middle, Bottom Chnh border ca tng cell: vo Cell Properties/Style/Border Lu : FrontPage khng h tr tt khi thao tc trn cc bng phc tp dng nh nhiu bng lng nhau, c nhiu cell merge v split. Do , cn kt hp vi s hiu bit ca cc tag HTML v TABLE x l sao cho t c hiu qu ti u.Hnh 3. 47 Cc thuc tnh ca mt bng5.9. Chn cc web components5.9.1. Thi gian cp nht (Time stamp) Chn Insert/Date and Time. Sau chn nh dng ngy thng v thi gian ph hp vi nhu cu.L nh Duy - H KHTN Tp. HCM111112Email: [email protected] nh Duy - H KHTN Tp. HCMEmail: [email protected] 3. 48 Thit lp thng s cho Date, Time5.9.2. ng k ngang (Horizontal line) Chn Insert/Horizotal line. t cc thuc tnh cho ng k ngang bng cch double click chut ln n. Sau chn cc thng s v Width, Height, Color, Alignment.Hnh 3. 50 Cc thnh phn khc c h tr sn5.10. Mt s hiu ng c bit Chuyn trang Transition (Page transition): Chn Format/Page Hiu ng ch chuyn ng theo chiu ngang (Marquees): Chn Insert/Component/Marquee. Sau khi hp thoi hin ra, bn g vo dng ch cn chuyn ng v t cc thuc tnh khc nh mu sc, font ch, Thm hiu ng font ch cho cc hyperlink: Chn Format/Background, check vo Enable hyperlink rollover effects. Sau bn c th chn cc mu theo mun.5.11. To form nhp liuDng table layout trc cc thnh phn chnh ca form.Hnh 3. 49 Cc thng s cho Horizontal line5.9.3. Cc thnh phn khc Chn trong thc n Insert/Web component.To cc vn bn v cc control (textbox, dropdown listbox, button, radio, checkbox, text area, ...). Cc control c to bng cch g trc tip cc tag vo (dng tab HMTL).L nh Duy - H KHTN Tp. HCM113114Email: [email protected] nh Duy - H KHTN Tp. HCMEmail: [email protected] chnh cc thuc tnh ca control, c th chuyn sang tab Normal, click vo tng control, chn Form Field Properties chnh cc thuc tnh. Trong mi control ca form, cn lu cc thuc tnh nh Type (dng ch loi control no), Name (dng nh danh control v tham chiu n d liu m control lu gi sau ny), Value (dng ch gi tr d liu m control hin th), Size (kch thc control), ... Gn tag bao trm ln cc control ca form (k c table) Trong tag FORM, cn lu cc thuc tnh nh Name (dng nh danh form v tham chiu n cc control trong form), Action (dng tr n tp tin x l d liu t form), Method (dng ch phng thc gi d liu cho server). Mi form thng thng c 2 button control, mt button kiu submit v mt button kiu reset. Button reset dng reset d liu nhp, button submit dng submit d liu ca form sau khi ngi dng nhp xong. Sau khi to xong cc thnh phn ca form, thit lp phn trnh by cho form. Thc hnh: Thc hin tun t cc bc trn to mt form nh hnh sau:6. THIT K CC WEBSITE THEO MU6.1. Yahoo Greetings (http://greetings.yahoo.com)6.2. Flowers (http://www.flowers.com)Hnh 3. 51 Mt mu formL nh Duy - H KHTN Tp. HCM115 116Email: [email protected] nh Duy - H KHTN Tp. HCMEmail: [email protected]. Yahoo Shopping (http://shopping.yahoo.com)6.5. VN Express(http://vnexpress.net)6.4. IS EDU (http://www.is-edu.hcmuns.edu.vn)6.6. Code Project (http://www.codeproject.com)L nh Duy - H KHTN Tp. HCM117118Email: [email protected] nh Duy - H KHTN Tp. HCMEmail: [email protected] tham kho cch thit k cc trang web trn, hy: Ti v my bng cch chn chc nng Save ca IE. Dng MS Front Page m tp tin lu ln Chuyn qua li gia cc mn hnh Normal View v HMTL View bit cch thit k Vi mi trang web xem hy ch cc vn sau: Cch b tr cc bng (table) Cch s dng font ch Cch chn vo cc hnh nh trang tr Cch nh ngha cc thuc tnh nh mu ch, mu nn, ... Phn tnh (khng thay i) mi khi click vo cc hyperlink chuyn qua mt ni dung mi T cc trang web trn, hy t thit k cc trang cho website ca chnh mnh.thuc tnh style cho nhp liu, v d sau thit lp font ch cho mt dropdown list box: Other Engineer Teacher Doctor Worker 7.3. Ti sao khi chn Encoding ca mt trang web l UTF-8 th cc k t Unicode ting Vit khng hin th ng trong tab HTML ca FrontPage 2000FrontPage 2000 ca b Office 2000 khng h tr tnh nng ny, hy dng FrontPage trong b Office XP. Vi FrontPage ca Office XP, ta c th xem c ting Vit trong tab HTML ca trang web c Encoding l UTF-8.7. Nhng cu hi thng gp7.1. S dng ting Vit Unicode trong cc trang web c th to ra cc trang web ting Vit s dng bng m Unicode, trc tin phi t thuc tnh ca trang s dng bng m Unicode. Trong FrontPage, chn File/Page Properties/Language/HTML Encoding/Save the document as/UTF-8 hoc xem meta tag trong phn u ca trang web c thuc tnh charset l UTF-8 hay cha. V d: . g c ting Vit, hy s dng mt trong cc phn mm h tr nh UniKey, VietKey v chn bng m s dng l Unicode. Khi dng bng m Unicode, chng ta ch c th dng cc font h tr Unicode nh Arial, Tahoma, Times New Roman, Verdana, 7.4. Chui k t dng lm gy l chui k t dng ch khong trng. Lu rng trnh duyt s t ng b qua cc khong trng d trong qu trnh son tho do nu mun gia 2 on vn bn A v B c 3 khong trng, ta son: AB.7.5. Trong trang web c dng frame, lm th no bit c khi click vo mt hyperlink trong ca s bn ny, trang tng ng s c hin th ca s no?Mi frame u c tn nh ngha trong tp tin chung c tag , do trong mi tp tin c s ca frame, nu mun ch nh ca s s hin th ni dung tp tin khi ngi dng click vo hyperlink ta t thuc tnh TARGET trong tag . V d: . iu ny c ngha l khi click vo bt k hyperlink trong tp tin ny, ni dung ca tp tin do hyperlink ch ti s c hin th trong frame c tn l frContent7.2. nh dng font trong cc nhp liu dropdown listbox, text area thit lp nh dng font mong mun cho tng nhp liu dng ny, click vo nhp liu, chn Form Field Properties/Style/Format/Font. Thit lp bng cch ny s to raL nh Duy - H KHTN Tp. HCM119120Email: [email protected] nh Duy - H KHTN Tp. HCMEmail: [email protected]. Ting Vit trong cc phn mm Swish, Button Studio, Xara WebStyleDo trong cc phin bn ca cc phn mm ny cha h tr Unicode nn ta khng th dng font Arial hin th c cc k t ting Vit c. hin th ting Vit, phi dng cc font VNI (dng VNI-xxx) hoc TCVN3 (dng .vnxxx).7.8. Lm th no rt ngn thi gian ti nhKhi a cc i tng hnh nh, video, vo trang web, cn cn nhc k v n s lm tng kch thc ca website, ng thi s lm tng thi gian ti trang web v. Cc th thut sau s gip cho vic a hnh nh vo trang web hiu qu hn, tit kim c thi gian ti v: Hiu chnh kch thc ca hnh nh: Vi cc nh qu ln, cn chnh li kch thc (chiu rng, chiu cao) ca nh lm kch thc nh nh li. Lu l nu ta chnh thng s kch thc chiu rng, chiu cao ca nh bng cch t gi tr cho thuc tnh WIDTH v HEIGHT trong tag th thi gian ti v khng i, ch khc l kch thc ca nh hin th trn mn hnh trnh duyt m thi. Chn phn gii thp hn, mu t hn khi qut cc nh vo t my qut. Chuyn sang lu tr di dng JPEG v gim cht lng ca nh n mc cho php. Vi cch ny, d liu c nn tt hn lm kch thc tp tin nh nh hn. To thumbnail: Mt thumbnail l mt phin bn ca hnh nh nhng cho php ti nhanh hn. Nhn vo phin bn ny, ngi dng s quyt nh c cn thit phi ti phin bn hnh nh vi kch thc tht hay khng. Cch ny thng dng khi hin th cc trang web nhiu hnh nh. S dng thuc tnh ALT trong tag : thuc tnh ny s hin th vn bn m t v hnh nh, gip ngi xem c th hnh dung ra ngha ca hnh nh trong khi n ang c ti v.7.7. Cc cu hi thng gp khi dng phn mm MS FrontPageHi: Ti sao khi hin th trang web, font ch khng hin th ging nh trong lc thit k ca FrontPage Tr li: C th font hin th lc thit k ca FrontPage l Default font, do lc hin th trn trnh duyt, trnh duyt s ly font mc nh c thit lp (v d VNI-Times) tri vi font m FrontPage dng cho default font (v d Arial). trnh trng hp ny, bn nn t font cho cc vn bn lc thit k, trnh dng default font. Hi: Lm th no va xem danh sch cc th mc khi ang Page View Tr li: Nhn vo nt Toggle Pane.7.9. Cc cu hi thng gp khi dng phn mm SwishHi: Ti sao movie hin ra khi chn chc nng Test in Browser ra on vn bn khng ging nh on vn bn g trong lc thit k m ton l m Tr li: Bn cha ng k s dng phn mm. Hy ng k v export li.Hnh 3. 52 Va xem cu trc website trong Page ViewHi: C hai on vn bn cng hin th trn movie, lm th no hai on vn bn ny khng b hin th chng ln nhauEmail: [email protected] nh Duy - H KHTN Tp. HCM121122L nh Duy - H KHTN Tp. HCMEmail: [email protected] li: Chn Effect/Hide hoc Effect/Show iu khin on vn bn tng ng l hin th hoc du i Hi: Ti sao khng chy c movie to bng Swish trn Internet Explorer? Tr li: C th my cha ci t Flash Player. C th ci t Flash Player t phn mm Macromedia Flash MX t a CD WebCourse. Hi: Ti sao trang web c s dng movie to t Swish hin th rt lu? Tr li: Trong trng hp rt lu th c l tp tin .swf cha tn ti hoc ng dn n tp tin .swf khai bo trong on m HTML (gia cp tag ) cha chnh xc. Hy kim tra li tp tin .swf tng ng tn ti hay cha v ng dn n tp tin ny c khai bo ng hay cha.Bi tham khoBY BC THIT K TRANG WEB N TNG V HIU QUMc d vic thit k trang web i hi phi c nhiu kh nng v m thut, tuy nhin vn c th a ra mt qu trnh thit k c th gip bn tng kh nng to ra cc trang web hiu qu v n tng. C th nhiu ngi s cho rng vic a ra cc bc trong qu trnh thit k s lm mt i qu trnh sng to, iu ny c l ng i vi nhng nh thit k gii, nhng ngi c qu trnh thit k v sng to ca ring h. Nhng vi nhng ngi khng c o to bi bn v thc hnh nhiu th vic nghin cu xem ngi khc thit k v ng dng cc bc nh th no c th s gip ch rt nhiu cho h.1. Phn tch ngi dng v t nh gi chnh mnhNu bn khng bit ngi dng d nh l ai, th tt c vic thit k, cho d c c thc hin k lng n u cng ch dn n tht bi. Bn cn phi bit cc thng tin v ngi dng nh trnh , s thch, cc lnh vc quan tm, cu hnh trang thit b, phn mm, trnh a ra mt trang web v tch s. Bn cng cn phi phn tch cc mi quan tm v kh nng ca chnh bn. Bn c kh nng thit k cc trang web c hiu qu v n tng khng? Bn c trnh chuyn mn to ra c cc trang c lng thng tin phong ph da trn cc ti nguyn sn c khng? Sau y l mt s k thut gip cho bc ny : M t mc tiu: Hy xc nh chnh xc mc tiu ca trang ny mt cch ngn gn. Mc tiu cn c m t mt cch sc tch, r rng, khng qu rm r, chi tit. Xc nh vn gii quyt: T m t mc tiu bc trn, nu ra cc vn cn gii quyt t c mc tiu, tm tt phng php gii quyt, ...L nh Duy - H KHTN Tp. HCM123124Email: [email protected] nh Duy - H KHTN Tp. HCMEmail: [email protected] Xc nh ngi dng: Lit k cc c im ca khch hng nh tui tc, ngh nghip, gii tnh, thu nhp, trnh , vng c tr, cu hnh trang thit b, phn mm, vo mt danh sch phn tch v x l sau ny. Lit k cc ngun ti nguyn: Bn c sn nhng g hon thnh cng vic c v mt trang thit b, cng c phn mm, v c v trnh chuyn mn ? Bn c th lm c nhng g, v bn s nh gip nhng g ? Xy dng bng tin thc hin: Xc nh thi gian cn hon thnh sn phm vi cc ti nguyn sn c, thi gian cn thc hin tng bc ca qu trnh, a ra cng nhiu cch trnh by t kh nng ca chnh bn. Lun quan st v su tp cc trnh by tt ot gii, c nhiu ngi cng nhn, hay cc trnh by m bn thch, ... Lun cp nht cc thay i v cng ngh web. Bn nn lun c cc ti liu mi nht v HTML, cng nh cc thng tin v cc dng tp tin v cc thit b mi c h tr bi cc nh sn xut. Lun ghi nh: i tng nh gi cch trnh by l ngi dng ch khng phi bn. Th cng nhiu gii php cng tt v hy ghi nhn cc nhn xt, phn hi ca nhng ngi cng tc hon chnh thit k.2. Thit k