HTML Can Ban

Y BAN NHN DN THNH PH H NI
S BU CHNH VIN THNG H NI
GIO TRNH
HTML V THIT K WEBSITE
(M s gio trnh: 3CI3)
H NI. 2005
LI M U Ngn ng Siu vn bn HTML (Hyper Text Markup Language) l ngn ng biu din vn bn cho php ta a vo mt vn bn nhiu thuc tnh cn thit c th truyn thng qung b trn mng ton cc WWW (World Wide Web). HTML cho php ta a hnh nh ha vo vn bn, thay i cch by tr ca vn bn, v to nhng ti liu siu vn bn c kh nng i thoi tng tc vi ngi dng. HTML ch yu xoay quanh khi nim th (tag) lm nn tng. Mt v d v tag l <B>. Hu ht cc chc nng trn HTML c th m v th ng to thnh mt cp gii hn mt on vn bn. V d <B> v </B> l th bold ngha l ch bo. Ton b on vn bn gia <B> v </B> s c th hin di dng ch bo (hay ch m) khi vn bn c xem bng mt trnh duyt tng ng. V d <B> xin cho </B> s c hin ln l xin cho. to mt siu vn bn, ta c th dng bt c mt chng trnh son tho no (v d: NC-Norton Commander, EDIT - ca DOS, NotePad hay Write - ca Windows 3.x, WordPad ca Win95, WinWord 2.0 hay 6.0, FoxPro, Borland C++ IDE, Borland Pascal IDE, FrontPage, TextPad, v.v), ch cn nm c cc th ca HTML, v khi ghi vo a th cn lu di dng file text. Tn file c ui m rng l HTM (hoc HTML). Song c mt hn ch l dng vn bn khi ta son vi khi ta xem sau ny (trn WWW) khng ging nhau. Chnh v l m nhiu hng tung ra phn mm son siu vn bn What You See Is What You Get (WYSIWYGci ta thy cng l ci ta c c). Hng Microsoft cng tung ra mt tin ch c s dng rng ri. Ngoi ra, cn c nhiu tin ch chuyn i t dng RTF (c th son bng WinWord hay WordPad) sang HTML, hay cc phin bn sau ny ca trnh duyt Web nh NetScape c sn lun chc nng ny. Cc tin ch u ging nhau ch cho php ta g trc tip cc th vo vn bn nhng cng c th dng t hp ca thanh cng c (toolbar), hp thoi (dialog), thc n (menu) hay danh sch cc la chn (pop-up list). gch di on vn bn trong v d va ri, ta c th g vo xin cho, dng chut chn, ri bm vo nt Underline trn thanh cng c. Vn bn s t ng c chuyn thnh <U>xin cho</U> ( y th <U> v </U> l cp m/ng ca tag c chc nng gii hn on vn bn cn c gch di).
1
Ngy nay, do s pht trin nh thc l ca mng ton cc, HTML cng ngy cng tr nn phc tp v hon thin hn p ng c nhng yu cu mi ny sinh trong qu trnh pht trin (nh m thanh, hnh nh ng, v.v). Ngi ta gi l nhng phin bn ca HTML v nh s biu th. HTML 2, HTML 2+, HTML 3, l ch nhng phin bn sau ny. Mt trong nhng im mnh ca HTML l mt vn bn bt k nu tun th tiu chun HTML u c th hin ln mn hnh hay in ra, tm li l hiu c, bi bt k loi phn mm hay my tnh no m ngi c c, khng phn bit trnh duyt no (NetScape trn Windows hay Lynx trn UNIX, thm ch cho ngi khim th bng phn mm c bit). Ngi ta cn ang tranh ci nhiu trn Internet v HTML tt. nh hng nguyn thy ca HTML l to ra mt phng php vn nng lu gi v th hin thng tin. Sau ny ngi ta coi HTML nh mt ngn ng nh hng ni dung trong ti liu c g quan trng hn nhiu so vi ti liu c p khng. Tc gi rt mong nhn c s gp t bn c Xin chn thnh cm n.
- Tn mn hc: HTML V THIT K WEB - M s mn hc: 3CI3 - Thi gian: L thuyt + thc hnh 45T - Mc tiu: Cung cp cho hc vin cc kin thc c bn lin quan n ngn ng HTML v thit k Web. - Nhng kin thc cn phi c trang b trc khi hc: C kin thc v s dng my tnh. - Ni dung mn hc: Chng I: NHNG KHI NIM C S. Chng II: TRNH BY TRANG. Chng III: DANH SCH V BNG TRONG HTML. Chng IV: A HNH NH VO TI LIU HTML. Chng V: CC MI LIN KT SIU VN BN. Chng VI: BY TR NN V KHUNG. Chng VII: BIU MU STYLE V CASCADING STYLE SHEET. Chng VIII: CNG C SON THO TRC QUAN WEB (Microsoft FrontPage 2003) - i tng hc: Nhng ngi cn bit cc kin thc c bn v HTML v Website thit k Website tnh. - Bin son: B mn Cc h thng thng tin, Khoa Cng ngh thng tin, Trng H Cng Ngh, HQGHN.
MC LC LI M U 1 CHNG I. NHNG KHI NIM C S ......................................................... 9 I.1. World Wide Web l g? ................................................................................. 9 I.2. HTML l g? ................................................................................................. 12 I.3. Cc c im ca siu vn bn ................................................................... 13 I.3.1. c lp vi phn cng v phn mm ...................................................... 13 I.3.2. c lp vi khi nim trang v th t cc trang...................................... 14 I.3.3. Website v trang ch - homepage ............................................................ 14 I.4. Son tho vn bn - nhng vn chung .................................................. 15 I.4.1. Trang m ngun HTML v trang Web .................................................... 15 I.4.2. Cc th HTML ......................................................................................... 16 I.4.3. Cc quy tc chung .................................................................................... 17 I.4.4. Cu trc ca mt ti liu HTML .............................................................. 18 I.4.5. Cc phn t HTML (HTML element) ..................................................... 19 Bi tp .................................................................................................................. 19 CHNG II. TRNH BY TRANG ................................................................... 20 II.1. To tiu ................................................................................................... 20 II.2. Th trnh by trang .................................................................................... 21 II.2.1. Mt s th chnh ..................................................................................... 21 II.2.2. Cc thuc tnh ca th trnh by trang .................................................... 25 Bi tp .................................................................................................................. 27 CHNG III. DANH SCH V BNG TRONG HTML ............................... 28 III.1. Cc kiu danh sch ................................................................................... 28 III.1.1. Danh sch khng nh s th t ........................................................... 28 III.1.2. Danh sch nh s th t ...................................................................... 29 III.1.3. Danh sch cc nh ngha ...................................................................... 31 III.1.4. Danh sch phi hp, lng nhau ............................................................. 31
4
III.2. Bng biu.................................................................................................... 32 III.2.1. Khung cu trc ...................................................................................... 32 III.2.2. Mt s lu v bng ............................................................................. 33 III.2.3. Cc v d ................................................................................................ 37 Bi tp .................................................................................................................. 40 CHNG IV. A HNH NH VO TI LIU HTML ............................... 41 IV.1. Hnh nh tnh ............................................................................................. 41 IV.1.1. Tp nh .................................................................................................. 41 IV.1.2. Th <IMG> ....................................................................................... 41 IV.2. Cc thuc tnh ca th chn hnh nh ..................................................... 41 IV.2.1. Thuc tnh ALT .................................................................................... 41 IV.2.2. Thuc tnh WIDTH v HEIGHT .......................................................... 42 IV.2.3. Thuc tnh ALIGN ................................................................................ 43 IV.2.4. Thuc tnh VSPACE v HSPACE ........................................................ 43 Bi tp .................................................................................................................. 44 CHNG V. CC MI LIN KT SIU VN BN...................................... 45 V.1. Th neo v mi lin kt ............................................................................... 45 V.1.1. Thuc tnh HREF ................................................................................... 45 V.1.2. Lin kt ra ngoi External Links ......................................................... 45 V.1.3. a ch tuyt i ..................................................................................... 46 V.1.4. a ch tng i .................................................................................... 46 V.1.5. Lin kt ni ti Internal Link............................................................... 46 V.2. Dng hnh nh lm u mi lin kt ......................................................... 47 V.2.1. Thay ch bng hnh ................................................................................ 47 V.2.2. Image Map - th AREA.......................................................................... 47 V.3. a m thanh vo ti liu .......................................................................... 48 V.3.1. Lin kt n tp m thanh ...................................................................... 48 V.3.2. To m thanh nn ................................................................................... 48
5
V.4. a Video vo ti liu................................................................................. 49 V.4.1. Chn tp Video ....................................................................................... 49 V.4.2. Nhng tp video ..................................................................................... 49 Bi tp .................................................................................................................. 50 CHNG VI. BY TR NN V KHUNG ....................................................... 51 VI.1. Mu nn v vn bn .................................................................................. 51 VI.1.1. t mu nn .......................................................................................... 51 VI.1.2. Mu ch ca vn bn ............................................................................ 51 VI.1.3. Mu ca u mi lin kt - Thuc tnh LINK, VLINK v ALINK...... 51 VI.1.4. Thuc tnh v m mu ........................................................................... 52 VI.2. Np hnh nh lm nn cho trang vn bn ............................................... 53 VI.2.1. Thuc tnh BACKGROUND ................................................................ 53 VI.2.2. Water mark ............................................................................................ 53 VI.2.3. Hy k tn vo ti liu ca mnh .......................................................... 54 VI.3. Khung Frames ........................................................................................ 55 VI.3.1. Trang tr khung...................................................................................... 55 VI.3.2. Thnh phn FRAMESET ...................................................................... 56 VI.4. Thit lp Target, th NOFRAME v IFRAME ..................................... 59 VI.4.1. Thit lp Target ..................................................................................... 59 VI.4.2. Th NOFRAMES .................................................................................. 60 VI.4.2. Nhng frame - th IFRAME ................................................................. 60 Bi tp .................................................................................................................. 61 CHNG VII. BIU MU STYLE V CASCADING STYLE SHEET ....... 62 VII.1. FORM ....................................................................................................... 62 VII.1.1. FORM l g? ........................................................................................ 62 VII.1.2.Cc thnh phn trong FORM................................................................ 63 VII.1.3. Thm tnh cu trc cho FORM ............................................................ 70 VII.2. Cascading style sheet ............................................................................... 72
6
VII.2.1. Inline Style ........................................................................................... 72 VII.2.2. Gii thiu Style Sheet .......................................................................... 74 VII.2.3. Javascript Style Sheet .......................................................................... 75 VII.2.4. Thut ng Style Sheet .......................................................................... 77 VII.2.5. Cc ch thch trong Style Sheet ........................................................... 92 VII.2.6. Li ch ca cc Style Sheet .................................................................. 92 VII.2.7. Kt hp Style Sheet vi HTML ........................................................... 93 VII.2.8. Th t u tin ca cc style (Cascading) ............................................ 97 CHNG VIII. CNG C SON THO TRC QUAN WEB (MICROSOFT FRONTPAGE 2003) ................................................................. 100 VIII.1. To mt trang Web .............................................................................. 100 VIII.1.1. Bt u s dng FrontPage2003 ...................................................... 100 VIII.1.2. To mt trang t mt template ......................................................... 101 VIII.1.3. To v lu mt trang mi ................................................................. 102 VIII.1.4. To mt mc ................................................................................ 103 VIII.1.5. Chn font v mu ............................................................................. 104 VIII.2. T chc mt trang vi cc lin kt, danh sch v bng.................... 107 VIII.2.1. Thm mt hyperlink vo mt trang Web ......................................... 107 VIII.2.2. To mt danh sch ............................................................................ 110 VIII.2.3. T chc mt trang vi cc bng ....................................................... 112 VIII.2.4. Hin th hnh nh trn mt trang Web .............................................. 120 VIII.2.5. To mt Web site mi ...................................................................... 133 VIII.2.5.Khai thc site mi .............................................................................. 135 VIII.3. Pht trin nhanh mt site vi cc template ....................................... 142 VIII.3.1. Chn mt template Web site ............................................................ 143 VIII.3.2. To mt Web site mi ...................................................................... 144 VIII.3.3. To ty bin Web site mi ca ta ..................................................... 145 VIII.3.4. Thm v loi b cc li ch thch .................................................... 146
7
VIII.3.5. Khai thc template Personal Web Site ............................................. 147 VIII.3.6. Thm mt tem thi gian vo mt trang Web ................................... 148 VIII.3.7. Lu cc thay i sang mt site ......................................................... 149 VIII.4. To mt site vi s tr gip ca Wizard trong FrontPage 2003 ..... 150 VIII.4.1. M mt wizard to site ..................................................................... 150 VIII.4.2. Nhp mt site hin c vo FrontPage............................................... 152 VIII.4.3. Chn mt phng php import ........................................................ 152 VIII.4.4. Chn v tr lu site ....................................................................... 155 VIII.4.5. Thu thp thng tin phn hi t cc khch tham quan Web site ca ta ......................................................................................................................... 156 VIII.4.6. Lu thng tin phn hi ca khch tham quan sang mt file ............ 158 VIII.4.7. Nhn thng tin phn hi ca khch tham quan bng email ............. 160 Bi tp ................................................................................................................ 161 BNG CC T VIT TT ..............................................................................162 TI LIU THAM KHO...................................................................................163
CHNG I. NHNG KHI NIM C S I.1. World Wide Web l g? World Wide Web (WWW) l mt mng cc ti nguyn thng tin. WWW da trn 3 c ch cc ti nguyn ny tr nn sn dng cho ngi xem cng rng ri nht cng tt: - C ch t tn cng dng i vi vic nh dng cc ti nguyn trn WWW (nh cc URL) - Cc giao thc, truy nhp ti cc ti nguyn qua WWW (nh HTTP) - Siu vn bn, d dng chuyn i gia cc ti nguyn (nh HTML). Cc rng buc gia ba c ch c nu r di y Gii thiu v URL: Mi ti nguyn sn dng trn WWW ti liu HTML, nh, video clip, chng trnh, - c mt a ch m c th c m ha bi mt URL. Cc URL thng gm 3 phn: - Vic t tn ca cc c ch dng truy nhp ti nguyn - Tn ca my tnh lu tr (t chc) ti nguyn - Tn ca bn thn ti nguyn, nh mt ng dn V d coi URL ch r trang W3C Technical Reports: http://www.w3.org/TR URL ny c th c c nh sau: C mt ti liu sn dng theo giao thc HTTP, ang lu trong my www.w3.org, c th truy nhp theo ng dn /TR. Cc c ch khc ta c th thy trong cc ti liu HTML bao gm mailto i vi th in t v ftp i vi FTP. y l mt v d khc v URL. V d ny m ch ti hp th (mailbox) ca ngi dng: .y l vn bn Mi gp , xin gi th ti <A ref=mailto:joe@someplace.com>Joe Cool</A> Cc nh danh on (fragment identifiers):
9
Mt s URL m ch ti vic nh v mt ti nguyn. Kiu ny ca URL kt thc vi # theo sau bi mt du hiu kt ni (gi l cc nh danh on). V d, y l mt URL nh du mt mc tn l section_2: http://somesite.com/html/top.html#section_2 Cc URL tng i: Mt URL tng i khng theo c ch t tn. ng dn ca n thng tham chiu ti mt ti nguyn trn cng mt my nh ti liu hin ti. Cc URL tng i c th gm cc thnh phn ng dn tng i (nh .. ngha l mt mc trn trong cu trc c nh ngha bi ng dn), v c th bao gm cc du hiu on. Cc URL c gii quyt cho ton cc URL s dng mt URL gc. Nh mt v d ca gii php URL tng i, gi s chng ta c URL gc http://www.acme.com/support/intro.html. URL tng i trong nh du di y cho mt lin kt siu vn bn: <A href=suppliers.html>Suppliers</A> s m rng thnh URL y http://www.acme.com/support/suppliers.html trong khi URL tng i trong vic nh du cho mt nh di y <IMG src=../icons/logo.gif alt=logo> s m rng thnh URL y http://www.acme.com/icons/logo.gif Trong HTML, cc URL c dng : - Lin kt ti ti liu hoc ti nguyn khc, (xem A v LINK) - Lin kt ti kiu dng bn ngoi hoc kch bn (script) (xem LINK v SCRIPT) - Gm mt nh, i tng, hoc applet trong mt trang, (xem IMG, OBJECT, APPLET v INPUT) - To mt bn d nh (xem MAP v AREA) - To mt form (xem FORM) - To mt khung ti liu (xem FRAME v IFRAME) - Trch dn mt ch dn bn ngoi (xem Q, BLOCKQUOTE, INS v DEL) - Tham kho cc quy c siu d liu m t mt ti liu (xem HEAD)
10
Ngy nay ngi ta dng my tnh nh mt cng c rt hu ch truy nhp Internet, ch yu l tm kim thng tin. Cc thng tin ny c th l cc vn bn, hnh nh m thanh hay thng tin a phng tin Vi giao din thn thin bi vic s dng cc k hiu, biu tng rt gi t gn ging vi cc hnh nh i thng v ch cn nhng thao tc n gin ta c ngay thng tin cn tm kim trc mt. Nhu cu s dng my tnh truy cp Internet tm kim thng tin ngy cng nhiu v ngi s dng my tnh c trnh tin hc v ting Anh hiu cc thng bo ca my khc nhau. Lm th no mi ngi c th d dng s dng my tnh truy cp Internet nh mt cng c phc v c lc cho vic tra cu tm kim thng tin trn mng thng tin rng ln nht ton cc. Vic ny tr nn d dng hn bi tng siu vn bn (Hypertext). Siu vn bn l cc vn bn thng minh c th gip ngi c tm v cung cp cho h cc ti liu lin quan. Ngi c khng phi mt cng tm kim trong kho thng tin Internet v tn. Khi nim siu vn bn do nh tin hc Ted Nelson xut vo nm 1965 nh mt c m (Computer Dreams) v kh nng ca my tnh trong tng lai. ng hy vng v cc my tnh c tr tu nh con ngi, bit cch truy tm cc thng tin cn thit. D n thc hin siu vn bn l ca mt k s tr ngi Anh tn l Tim Berners Lee. Sau khi tt nghip i hc Oxfort (Anh) nm 1976, nm 1980 Tim vit mt chng trnh m phng mi lin kt hai chiu bt k trn mt th nh kiu lin kt siu vn bn. Nm 1989, trong khi lm vic ti Vin nghin cu k thut ht nhn chu u (CERN) ti Berne (Thy s), thy cc ng nghip rt vt v trong vic tra ti liu, Tim a ra mt n lu tr siu vn bn trn my tnh sao cho d dng tm kim ti liu hn. Trong th gii siu vn bn WWW, ngi s dng c th d dng i t ti liu ny sang ti liu khc thng qua cc mi lin kt. Nh vy ta c th du lch trong xa l thng tin phong ph trong khi vn ngi ti nh. K thut siu vn bn
11
gip cho ta khng phi sang tn Luvr Paris m vn c th chim ngng c cc kit tc hi ha. Chnh n gp phn to ra bc pht trin bng n ca Internet trong nhng nm gn y. I.2. HTML l g? ph bin thng tin trn ton cc, cn mt ngn ng ph bin v d hiu, mt kiu vic ph bin ting m m ton b cc my tnh c th hiu c. Ngn ng ph bin dng bi World Wide Web l HTML (Hyper Text Markup Language). HTML cho tc gi cc ngha : Ph bin cc ti liu trc tuyn vi cc heading, vn bn, bng, danh sch, nh,..v.v Truy tm thng tin trc tuyn theo cc lin kt siu vn bn bng vic kch vo mt nt Thit k cc nh dng cho vic kim sot cc giao dch (transaction) vi cc thit b t xa, i vi ngi dng trong vic tm kim thng tin, to cc sn phm, t hng,.v.v Bao gm spread-sheets, video clips, sound clips, v cc ng dng trc tip khc trong cc ti liu ca h. Cc trang Web y sinh ng m bn thy trn World Wide Web l cc trang siu vn bn c vit bng ngn ng nh du siu vn bn hay HTML HyperText Markup Language. HTML cho php bn to ra cc trang phi hp hi ha vn bn thng thng vi hnh nh, m thanh, video, cc mi lin kt n cc trang siu vn bn khc... Tn gi ngn ng dnh du siu vn bn phn nh ng thc cht ca cng c ny: nh (Markup): HTML l ngn ng ca cc th nh du - Tag. Cc th ny xc nh cch thc trnh by on vn bn tng ng trn mn hnh. n n (Language): HTML l mt ngn ng tng t nh cc ngn ng lp trnh, tuy nhin n gin hn. N c c php cht ch vit cc lnh thc
12
hin vic trnh din vn bn. Cc t kho c ngha xc nh c cng ng Internet tha nhn v s dng. V d b = bold, ul = unordered list, ... n n (Text): HTML u tin v trc ht l trnh by vn bn v da trn nn tng l mt vn bn. Cc thnh phn khc nh hnh nh, m thanh, hot hnh.. u phi cm neo vo mt on vn bn no . i n n (Hyper): HTML cho php lin kt nhiu trang vn bn ri rc khp ni trn Internet. N c tc dng che du s phc tp ca Internet i vi ngi s dng. Ngi dng Internet c th c vn bn m khng cn bit n vn bn nm u, h thng c xy dng phc tp nh th no. HTML thc s vt ra ngoi khun kh khi nim vn bn c in. I.3. Cc c im ca siu vn bn I.3.1. c lp vi phn cng v phn mm HTML c lp vi phn cng v phn mm. Mt ti liu HTML c vit bng mt phn mm son tho c th bt k, trn mt my c th no u c th c c trn bt k mt h thng tng thch no. iu ny c ngha l cc tp siu vn bn c th c trnh duyt hin th trn MAC hay PC ty m khng phi sa cha thay i g. S d c c tnh cht ny l v cc th ch din t yu cu cn phi lm g ch khng c th cn lm nh th no. C ng v l m bn khng th chc chn trang ti liu siu vn bn ca bn s hin ln mn hnh chnh xc l nh th no v cn tu theo trnh duyt th hin cc thnh phn HTML ra sao. Trong thc tin, HTML ch thc s c lp i vi phn cng, cha hon ton c lp i vi phn mm. Ch phn ct li l chun ho, c n cc phn m rng do tng nh pht trin xy dng th khng hon ton tng thch nhau.
13
I.3.2. c lp vi khi nim trang v th t cc trang Mt tnh cht na l HTML c lp vi khi nim trang. Vn bn c trnh by ty theo kch thc ca ca s hin th: ca s rng b ngang th s thu ngn hn, ca s hp b ngang th s c k o di ra hin th cho ht ni dung. di ca vn bn HTML thc s khng b hn ch. I.3.3. Website v trang ch - homepage Mt website l mt b cc trang web lin kt vi nhau v lin kt vi cc trang bn ngoi chng cht nh mng nhn. Hng triu Website lin kt vi nhau to thnh World Wide Web WWW C th tng tng nh mt ngn ni nh cc trang web m i ngy mt cao thm, c pht trin bng cch thm vo nhiu trang web l th khc na
C th minh ho hnh nh ca mt website nh trong hnh v bn
Trang ch hay trang chnh - home page c th hiu l ca chnh - front door thm nhp vo kho thng tin lin kt chng cht y.
Vy home page l trang web m b duyt s m ra u tin m i khi ngi dng bt u thm website.
14
I.4. Son tho vn bn - nhng vn chung I.4.1. Trang m ngun HTML v trang Web Trang m ngun HTML l mt tp vn bn bnh thng gm cc k t SCII, c th c to ra bng bt c trnh son tho thng thng no. Theo quy c, tt c cc tp m ngun ca trang siu vn bn phi c ui l .html hoc .htm. Khi trnh duyt (browser) c trang m ngun HTML, n s dch cc th lnh v hin th ln mn hnh my tnh th ta thng gi l trang Web. Vy trang web khng tn ti trn a cng ca my tnh cc b. N l ci th hin ca trang m ngun qua vic x l ca trnh duyt. Nh sau ny ta s thy, cc trnh duyt khc nhau c th hin th cng mt trang m ngun khng hon ton ging nhau. Ni son tho siu vn bn tc l to ra trang m ngun HTML ng quy nh duyt hiu c v hin th ng. S dng HTML son tho cc trang siu vn bn, v nguyn tc cng khng khc my so vi dng cc b son tho vn bn thng thng . Ch ng hn, trong son tho vn bn thng thng, lm ni bt cc tiu ta phi nh du n v chn c to, cn chnh gia... Chng trnh son tho vn bn s chn cc du hiu thch hp (ta khng nhn thy c) vo u v cui on tiu c chn th hin n theo yu cu. Vi HTML c ng tng t nh vy. lm ni bt cc tiu ta cn nh du im bt u v im kt thc ca on tiu bng cp th Heading, v d <H1>... </H1>. B duyt s hin th on ny vi c ch to hn v cn chnh gia. V d, d ng sau y trong ti liu HTML <H1>Ti u mc 1</H1>
s c trnh duyt hin th thnh Tiu mc 1

15
Hin nay c nhiu cng c son tho siu vn bn mnh nh Microsoft FrontPage, Dream Weaver.. vi giao din trc quan v t ng sinh m HTML, cho php son tho siu vn bn nh son tho thng thng. Tuy nhin, vic tm hiu c php ca HTML, nm vng ngha ca cc th khc nhau v n rt cn thit c th to ra cc trang Web ng, tng tc vi ngi s dng, tc l cc ng dng Web sau ny. I.4.2. Cc th HTML Cc th dng bo cho trnh duyt cch thc trnh by vn bn trn mn hnh hoc dng ch n mt mi lin kt n cc trang khc, mt on chng trnh khc... Mi th gm mt t kho - KEYWORD - bao bc bi hai du b hn (<) v ln hn (>). Hu ht cc lnh th hin bng mt cp hai th: th m ( <KEYWORD>) v th ng (</KEYWORD>). Du gch cho ("/") k hiu th ng. Lnh s tc ng vo on vn bn nm gia hai th. <KEYWORD> on vn bn chu tc ng ca lnh</KEYWORD> Mt s th khng c cp, chng c gi l cc th c th m <KEYWORD> m thi. Nhiu th c k m cc thuc tnh (attribute), cung cp thm cc tham s chi tit hn cho vic thc hin lnh. Cc thuc tnh c chia lm hai loi: thuc tnh bt buc v thuc tnh khng bt buc hay tu chn. Mt thuc tnh l bt buc nu nh phi c n th th lnh mi thc hin c. V d, chn mt hnh nh vo trang ti liu ta dng th <IMG> (Image). Tuy nhin, cn ch r ci nh no s c dn vo y. iu ny c thit lp bng thuc tnh SRC="a ch c i vi th <IMG>. ca tp nh". Thuc tnh SRC l bt buc phi n hay th n. Ch
16
I.4.3. Cc quy tc chung Mt s iu cn lu khi son tho siu vn bn bng HTML: - Nhiu du cch lin nhau cng ch c tc dng nh mt du cch. Bn phi s dng th th hin nhiu du gin cch lin nhau. - G Enter xung dng c xem nh mt du cch, xung hng th chng ta phi s dng th tng ng - C th vit tn th khng phn bit ch in thng v in hoa. - V cc k t du ln hn >, du nh hn < c dng lm th nh du, do hin th cc k t ny HTML quy nh cch vit: > < Ni chung, quy tc vit cc k t c bit trong HTML l tn_quy_nh ca k t nm gia du ampersand - v du chm phy ; &t n_quy_nh; 5 k t c bit hay dng K t < > K t trng & Cch vit < > " &
C th chn cc d ng bnh lun, ch thch... vo trang m ngun bng cch t gia cp du ch thch . Trnh duyt s b qua khng x t n phn m nm gia cp du : 
17
I.4.4. Cu trc ca mt ti liu HTML Mi ti liu HTML u c khung cu trc nh sau: <HTML> <HEAD><TITLE></TITLE></HEAD> <BODY> </BODY> </HTML> Hy xem trnh duyt hin th ti liu trn nh th no. D nhin l mt trang trng cha c ni dung g c Gia cp th tiu <TITLE>... </TITLE> l dng ch s hin ln trn thanh tiu ca ca s khi trnh duyt c ti liu. Nu b trng th trnh duyt s cho hin tn tp thay vo . Ton b ni dung ca ti liu nm gia hai th xc nh thn ca trang <BODY>... </BODY>. Cc d ng vn bn, hnh nh, m thanh, video, cc mi lin kt... to nn trang Web u phi nm y. V d nh ti liu HTML n gin di y: <HTML> <HEAD><TITLE>Ch ny l ti u </TITLE></HEAD> <BODY> Ton b ni dung ca ti liu nm y: Cc on vn bn xen ln hnh nh, m thanh, video, cc li n kt n v tr khc, ti liu khc... </BODY> </HTML> Hy xem trnh duyt trnh by ti liu trn nh th no. Nh li rng nhiu du cch ch c coi nh mt, du xung d ng ch c th hin nh mt du cch nn ti liu trn hon ton tng ng vi ti liu sau y: <HTML> <HEAD> <TITLE>Ch ny l ti u
</TITLE>
18
</HEAD> <BODY> Ton b ni dung ca ti liu nm y: Cc on vn bn xen ln hnh nh, m thanh, video, cc li n kt n v tr khc, ti liu khc...<P> </BODY> </HTML> Tuy nhin, d theo di v pht hin l i, nn trnh by nh trong vn bn trc: dng th ng ct tng cp th, xung d ng khi cn thit, t cc th vo ni hp l nht. I.4.5. Cc phn t HTML (HTML element) Mt ti liu HTML to nn t nhiu thnh phn HTML. Mt thnh phn HTML c nh du bng mt cp th m v th ng. Cc thnh phn HTML c th cu trc phn cp hnh cy, thnh phn m cha nhiu thnh phn con khc lng bn trong n. C thnh phn rng, ch c th m. son tho ti liu HTML ng c php, cn nm vng cu trc ca tng thnh phn HTML. hng ging nh khi lp trnh, nu bn mc li c php HTLM s khng c mt thng bo li no bo cho bit m trnh duyt s hiu lm v trnh by trang Web khng nh bn mun m thi. Bi tp 1. Nu cc c im ca siu vn bn (HTML) 2. Th no l trang Web?
19
CHNG II. TRNH BY TRANG II.1. To tiu M u cc trang vn bn thng l cc tiu cn lm ni bt tng phn ca vn bn nh Chng, Mc,... c ng cn c mc r rng khc vi phn thn ngi c theo di cho thun tin. C 6 mc tiu trong HTML. Cch th hin cc tiu ph thuc vo trnh duyt nhng thng thng th: Tiu mc 1 Th nh ngha c dng: V d: <H1>Ti u Tiu mc 2 Th nh ngha c dng: V d: <H2>Ti u Tiu mc 3 Th nh ngha c dng: V d: <H3>Ti u Tiu mc 4 Th nh ngha c dng: V d: <H4>Ti u 4</H4> cho ta ti u
20
<H1>...</H1>
1</H1>
cho ta ti u
tng ng
Tiu 1
<H2>...</H2>
2</H2>
cho ta ti u
tng ng
Tiu 2
<H3>...</H3>
3</H3>
cho ta ti u
tng ng
Tiu 3
<H4>...</H4>
tng ng
Tiu 4
Tiu mc 5 Th nh ngha c dng: V d: <H5>Ti u Tiu mc 6 Th nh ngha c dng: V d: <H6>Ti u 6</H6> cho ta ti u tng ng Tiu 6 II.2. Th trnh by trang II.2.1. Mt s th chnh Cc thnh phn trnh by trang nh dng c mt on vn bn v phi nm trong phn thn ca ti liu. C nhiu th c s dng nhng trong ti liu ny ch trnh by mt s th trnh by chnh: nh dng phn a ch ( <ADDRESS>), on vn bn (<P>), xung d ng (<BR>), cn chnh gia (<CENTER>), ng k ngang (<HR>), on vn bn nh dng sn (<PRE>), trch dn ngun ti liu (<BLOCKQUOTE>) a. nh dng phn a ch Cho bit thng tin nh a ch, danh thip v tc gi, thng t u hay cui ti liu. Th nh dng: <ADDRESS></ADDRESS> V d: <ADDRESS> Newsletter editor <BR> J.R. Brown<BR> JimquickPost Nes, Jumquick, CT 01234<BR> Tel (123) 456 7890 </ADDRESS> Kt qu thu c: <H6>...</H6> 5</H5> cho ta ti u tng ng Tiu 5 <H5>...</H5>
21
b. on vn bn Th ny dng xc nh mt on vn bn. Th <P> (Paragraph) c th dng km thuc tnh n nh cch trnh by on vn bn. Ch l gii hn mt on paragraph, cch by tr do cc thnh phn khc to thnh. Thng ch c khong trng khong mt d ng hay na d ng trc paragraph, tr khi nm trong phn a ch <ADDRESS></ADDRESS>. Mt s trnh duyt th hin d ng u ca paragraph tht vo. Th nh ngha dng: <P>...</P> <P align=left|center|right>...</P> Mt on vn bn r ng l mt d ng trng. V u d ng CR (Carriage Return) khng c hiu lc xung d ng mi m ch c tc dng nh mt du cch, do c th to mt d ng dn cch (mt d ng trng) gia cc on vn bn cn phi s dng th <P>. Trng hp ny ch cn dng th <P> n l, khng cn th ng. Ch : mt s th khc nh cc th tiu <H1>,...,<H6>, d ng k ngang <HR>, danh sch, bng biu,... km lun vic xung d ng thnh mt on vn bn mi. Khng cn dng thm th <P> trc v sau cc th ny. c. Xung dng Th ny dng xung dng mi. Bt buc xung dng ti v tr gp t kha ny. Dng mi c cn l nh dng c b t ng khi dng qu di Th nh ngha dng: <BR> Nu khng mun chn mt d ng trng m ch n thun mun xung d ng mi th cn s dng th <BR> (Break). Th Break khng cn c th ng km theo.
22
d. ng k ngang Th ny to ra ng k ngang (Horizontal Rule) ngn cch gia cc phn trong ti liu. Th nh ngha dng: <HR> <HR width=n%|n(pixel) size=n align=left|center|righ noshade> V d: <HR> <ADDRESS>February 8, 1995, CERN</ADDRESS> Kt qu thu c:
e. Cn chnh gia Th ny dng cn chnh on vn bn gia chiu rng trang vn bn. Th nh ngha dng: <CENTER>...</CENTER> Th ny c ng c tc dng xung d ng khi kt thc on vn bn. f. on vn bn nh dng sn Gii hn on vn bn c nh dng sn (pre -formatted) cn c th hin bng phng ch c rng k t khng i (do phi th ng ct). Nu khng c thuc tnh WIDTH i cng th b rng mc nh l 80 k t/d ng. B rng 40,80 v 132 c th hin ti u, c n cc b rng khc c th c lm tr n. Th nh ngha dng: <PRE>...</PRE> Trong cc thnh phn trc: Du xung d ng s c ngha chuyn sang d ng mi (ch khng c n l du cch) <P> khng dng. Nu n s c coi nh xung d ng c ph p dng cc thnh phn lin kt nhn mnh Khng c cha cc thnh phn nh dng paragraph (tiu , a ch,)
23
K t TAB (c m US-ASCII v ISO-8859-1 l 9) phi hiu l s du cch nh nht sao cho n k t tip theo v tr l bi ca 8. Tuy nhin khng nn dng. V d: <PRE WIDTH=80> Nguyn Vn A Th rn Trn Th B Th Sn </PRE> Kt qu thu c: Nguyn Vn A Th rn Trn Th B Th Sn g. Trch dn ngun ti liu khc Dng trch d n mt on vn bn, thng c th hin bng ch nghing c cn l tht vo trong (nh mt paragraph) v thng c mt dng trng trn v di. Th nh ngha dng: <BLOCKQUOTE>...</BLOCKQUOTE> V d: I think the poem ends <BLOCKQUOTE> <P>Soft you now, the fair Ophelia. Nymph, in thy orisons, be all my sins remembed. </BLOCKQUOTE> but I am not sure. Kt qu thu c:
I think the poem ends Soft you now, the fair Ophelia. Nymph, in thy orisons, be all my sins remembed. but I am not sure.
24
II.2.2. Cc thuc tnh ca th trnh by trang a. Thuc tnh ALIGN ca th Paragraph Th <P> dng xc nh mt on vn bn (nh trnh by phn trc). Di y ta tm hiu k thm mt s cc thuc tnh km theo ( ALIGN) ca n. C th cn l tri (left - mc nh), cn gia (center) hoc cn l phi (right). Cn l tri: <P ALIGN=LEFT></P>
C on vn bn c cn l tri ca trang. V d: <P ALIGN=LEFT> C ln ti thy mt ngi i Chng bit v u ngh ngi g Chn bc hng h theo bng l Mt mnh lm c cuc phn ly </P> Kt qu tr v mt on vn bn c cn l bn tri nh sau:
C ln ti thy mt ngi i Chng bit v u ngh ngi g Chn bc hng h theo bng l Mt mnh lm c cuc phn ly
Cn gia:
<P ALIGN=CENTER></P>
C on vn bn c cn chnh gia trang. V d: <P ALIGN=CENTER> C ln ti thy mt ngi i Chng bit v u ngh ngi g Chn bc hng h theo bng l Mt mnh lm c cuc phn ly </P> Kt qu tr v mt on vn bn c cn gia nh sau:
C ln ti thy mt ngi i Chng bit v u ngh ngi g Chn bc hng h theo bng l 25 Mt mnh lm c cu c phn ly
Cn l phi:
<P ALIGN=RIGHT></P>
C on vn bn c cn l bn phi ca trang. V d: <P ALIGN=RIGHT> C ln ti thy mt ngi i Chng bit v u ngh ngi g Chn bc hng h theo bng l Mt mnh lm c cuc phn ly </P> Kt qu tr v mt on vn bn c cn l bn phi nh sau:
C ln ti thy mt ngi i Chng bit v u ngh ngi g Chn bc hng h theo bng l Mt mnh lm c cuc phn ly
b. Thuc tnh Clear ca th xung dng Th xung d ng <BR> c ng c 3 thuc tnh km theo nh sau: <BR CLEAR=ALL> <BR CLEAR=LEFT> <BR CLEAR=RIGHT> Cc th c s dng khi chn hnh nh, cc d ng ch xut hin bn di, bn tri hay bn phi ca hnh. c. Cc kiu ng k ngang khc nhau Nh phn trn gii thiu, th <HR> to mt ng k ngang chy sut chiu rng ca s mn hnh. Cc ng k ny c th c thay i m (mnh), ngn, di, cn l tri, cn l phi, bng cch s dng cc thuc tnh ca chng. <HR WIDTH=n% SIZE=n ALIGN=LEFT|RIGHT NOSHADE> Trong :
26
Th, thuc tnh <HR>
Miu t Chn d ng k ngang sut chiu rng ca s mn hnh Thay i di ca ng k, chim n% rng ca WIDTH = n% s mn hnh. Nu khng c % ng sau th di tnh theo n v pixcel Thay i m hay mnh ca ng k. n l s SIZE = n pixcel Cn l tri|phi. ng k ngang mc nh c cn ALIGN=LEFT|RIGHT chnh gia NOSHADE Khng c bng m, ng k thnh mu en Bi tp 1. Tiu trong trang Web c my mc chnh? 2. Nu cc thuc tnh ca th Paragraph (<P>). Hy to mt trang web n gin trong c s dng tiu mc 2 v th Paragraph (<P>). 3. To mt trang web n gin t gii thiu v mnh, bn bao nhiu tui, bn lm g, s thch ca bn.
27
CHNG III. DANH SCH V BNG TRONG HTML III.1. Cc kiu danh sch Vic lit k danh sch s lm cho vn bn tr nn sng sa v d theo di. Trong HTML c mt s kiu danh sch nh danh sch nh s th t, danh sch khng nh s th t, danh sch nh ngha, danh sch kiu bng chn v danh sch kiu th mc. Mt s trnh duyt khng h tr danh sch kiu bng chn v danh sch kiu th mc. III.1.1. Danh sch khng nh s th t Danh sch khng nh s th t lit k cc mc bng mt chm tr n u m i mc. C php: <UL> <LI> Mc th 1 <LI> Mc th 2 </UL> Cp th <UL></UL> nh du bt u v kt thc danh sch. N c tc dng li l tri danh sch vo su hn. Cc th <LI> c tc dng th hin bt u mt d ng mi vi mt chm tr n. V d: <UL> <LI> Mc th 1 <LI> Mc th 2 <LI> Mc th 3 </UL> Kt qu tr v mt danh sch sau:
Mc th 1 Mc th 2 Mc th 3
28
Theo mc nh, m i mc thuc mc th nht ca danh sch khng nh s th t bt u bng mt chm tr n, c n m i mc thuc mc th hai s bt u bng mt v ng tr ng. Ta vn c th thay i bng cch s dng thuc tnh TYPE C php: <UL TYPE=DISC|CIRCLE|SQUARE> hoc <UI TYPE=DISC|CIRCLE|SQUARE> V d: <UL> <LI TYPE=CIRCLE> Mc th 1 <LI TYPE=CIRCLE> Mc th 2 <LI TYPE=CIRCLE> Mc th 3 </UL> Kt qu tr v mt danh sch sau:
o o Mc th 1 Mc th 3
o Mc th 2
III.1.2. Danh sch nh s th t Danh sch nh s th t ging nh danh sch khng nh s th t nhng cc chm tr n u m i mc s c thay bi vic nh s th t cc mc . C php: <OL> <LI> Mc th 1 <LI> Mc th 2 </OL> Cp th <OL></OL> nh du bt u v kt thc danh sch. N c tc dng li l tri danh sch vo su hn.
29
Cc th <LI> c tc dng th hin bt u mt d ng mi vi mt s th t tng ng. V d: <OL> <LI> Mc th 1 <LI> Mc th 2 <LI> Mc th 3 </OL> Kt qu tr v mt danh sch sau:
1. Mc th 1 2. Mc th 2 3. Mc th 3
C th dng thuc tnh TYPE la chn cc cch nh th t khc nhau khi bt u m i mc trong mt danh sch c nh s th t: Ch in hoa A,B,C, (TYPE=A) Ch in thng a,b,c, (TYPE=a)
Ch s La m ln I,II,III, (TYPE=I) Ch s La m nh i, ii, iii, (TYPE=i) S th t 1,2,3,4, C Php: <OL TYPE=A|a|I|i|1> Hoc <LI TYPE=A|a|I|i|1> V d: <UL> <LI TYPE=I> Mc th 1 <LI TYPE=I> Mc th 2 <LI TYPE=I> Mc th 3 </UL>
30
(TYPE=1), y l la chn mc nh
Kt qu tr v mt danh sch sau:

I. Mc th 1 III. Mc th 3
II. Mc th 2
III.1.3. Danh sch cc nh ngha Danh sch cc nh ngha trng ging nh mt bng t vng hay bng gii thch cc thut ng li vo trong. C php: <OL TYPE=A|a|I|i|1> hoc <LI TYPE=A|a|I|i|1> V d: <DL> <DT> Mc <DD> Ni <DT> Mc <DD> Ni <DT> Mc <DD> Ni </DL> th 1 dung mc th 1 th 2 dung mc th 2 th 3 dung mc th 3
Kt qu tr v mt danh sch sau:

Mc th 1 Ni dung mc th 1 Mc th 2 Ni dung mc th 2 Mc th 3 Ni dung mc th 3
III.1.4. Danh sch phi hp, lng nhau Cc kiu danh sch nu trn u c th lng nhau v lng nhau nhiu mc. V d:
31
<UL> <LI>Mc <UL> <LI>Mc <LI>Mc </UL> <LI>Mc <UL> <LI>Mc <LI>Mc </UL> </UL>
1 1.1 1.2 2 2.1 2.2
Kt qu tr v:
Mc 1 Mc 1.1 Mc 1.2 Mc 2 Mc 2.1 Mc 2.2
III.2. Bng biu III.2.1. Khung cu trc Gii hn bng: nh ngha mt hng: nh ngha mt : cha tiu : u ca bng: <TABLE></TABLE> <TR></TR> <TD></TD> <TH></TH>. (H=Header) <CAPTION></CAPTION>
C php to khung cu trc ca mt bng: <TABLE> <TR> <TH> T n ct 1 </TH> <TH> T n ct 2 </TH> ... </TR> <TR> <TD> 1 dng 1 </TD>
32
<TD> 2 dng 1 </TD> .... </TR> ........ </TABLE> V d: <TABLE> <TR> <TH> H v t n </TH> <TH> Lp </TH> <TH> Qu qun </TH> </TR> <TR> <TD> Bi Thanh Trc </TD> <TD> K50CA </TD> <TD> H Ni </TD> </TR> <TR> <TD> Nguyn Mai Hng </TD> <TD> K50CB </TD> <TD> Thanh Ha </TD> </TR> </TABLE> Kt qu thu c bng nh sau: H v tn Bi Thanh Trc Nguyn Mai Hng L p K50CA K50CB Qu qun H Ni Thanh Ha
III.2.2. Mt s lu v bng r ng th khng c ng bao. Mun r ng c ng bao phi dng du cch khng b d ng: <TD> </TD> hoc <TD><BR></TD> C th li dng ROWSPAN v COLSPAN to bng c chng ch o ln nhau nhng khng nn lm dng.
33
i lc hnh nh nm ngoi ta mun a hnh nh vo. Nguyn nhn l do HTML c vit nh sau: <TD> <IMG SRC=url> </TD> Du xung d ng y coi nh du cch do c s chng ch o hnh nh vi k t trng . Cch khc phc nh sau: <TD><IMG SRC=url></TD> <TABLE></TABLE> Mc nh bng khng c ng bao nu khng i vi thuc tnh BORDER. Bng c cc thuc tnh sau: BORDER nh ngha mt bng c ng bao. Tuy nhin khng lm nh hng ti rng ca bng. BORDER=<gi tr> Cho ph p khai bo dy ca ng bao cho ph p chnh ng bao ngoi m hn ng bao trong d nhn hn, mt khc nu gi tr bng khng li cho ph p dnh ch cho s liu bn trong, nht l i vi nhng bng compact. CELLSPACING=<gi tr> Khong cch gia cc . CELLPADDING=<gi tr> Khong cch gia ni dung ca v ng bao. <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0> Cho ta bng compact nht c th c (dnh tt c cho ni dung). WIDTH=<gi tr hay phn trm> Nu i cng vi <TABLE> thuc tnh ny c ngha m t chiu rng mong mun ca bng (tnh tuyt i bng pixels hay theo phn trm so vi b rng ca ti liu). Thng th trnh duyt t tnh ton sao cho bng c b tr hp l. Dng
34
thuc tnh ny bt buc trnh duyt c gng lm sao xp c cc vo bng c b rng mong mun . Nu i cng vi <TH> hay <TD> li c ngha tng t i vi mt . ROWSPAN Cho bit hin thi chim my hng ca bng, mc nh l 1. ALIGN Nu nm trong <CAPTION> n c ngha i vi u ca hng nm trn hay nm di, c gi tr hoc TOP hoc BOTTOM (mc nh l TOP). Nu nm trong <TR>, <TH> hay <TD> c gi tr LEFT, CENTER hay RIGHT v iu khin vic t ni dung ca cn bn tri, vo gia hay cn bn phi. VALIGN Nu nm trong <TR>, <TH> hay <TD> c th c cc gi tr TOP, MIDDLE, BOTTOM hay BASELINE iu khin vic t ni dung ca ln trn, vo gia (theo chiu dc) hay xung di v c ng c th l tt c cng cc trong hng cng cn theo mt ng nm ngang. <TD ></TD> C ngha l d liu bng (Table Data), ch c xut hin trong mt hng ca bng. M i hng khng nht thit phi c cng s v d ng ngn hn s c chp thm r ng vo bn phi. M i ch c cha cc thnh phn bnh thng khc nm trong phn thn ca ti liu. Cc thuc tnh mc nh l: ALIGN=left v VALIGN=middle. Cc mc nh ny c th thay i bi cc thuc tnh trong <TR> v li thay i tip bi thuc tnh ALIGN hoc VALIGN khai bo ring cho tng . Bnh thng mc nh th ni dung s c b d ng cho va vo kh rng ca tng . Dng thuc tnh NOWRAP trong <TD> cm vic . <TD></TD> c ng c th cha cc thuc tnh NOWRAP, COLSPAN v ROWSPAN. NOWRAP Nh ni trn, cn thn trng khi dng thuc tnh ny ph ng c qu rng.
35
COLSPAN C th xut hin trong bt k no (<TH> hay <TD>) v ch rng bnh trng ra my ct ca bng, mc nh l 1. <TH > </TH> C ngha l tiu ca bng (Table Header), cc ny tng t nh bnh thng khc c nh ngha bng <TD>, c iu font ch m v c thuc tnh mc nh l ALIGN=Center. <TH ></TH> c ng c th cha thuc tnh VALIGN, NOWRAP, COLSPAN v ROWSPAN. <CAPTION > </CAPTION> t u cho mt bng nn phi nm trong mt cp <TABLE> song khng c nm trong hng hay ct. Thuc tnh mc nh l ALIGN=Top (u t u bng), song c th t l ALIGN=Bottom (cui bng). u c th cha bt k thnh phn no mt c th cha v lun c cn l vo gia bng (theo chiu ngang) v c th c ng c b d ng cho ph hp. Di y l bng tm tt lit k cc thuc tnh ca th xy dng bng: Th/Thuc tnh ngha TABLE - Bt u bng BORDER - t khung ni 3D xung quanh bng. t <TABLE BORDER=n BORDER=0 s lm mt bin bao quanh. CELLSPACING=n CELLSPACING - t dy ca d ng k ngang trong CELLPADDING=n BGCOLOR="#rrggbb"> bng. CELLPADDING - t kch thc ca mt . BGCOLOR - t mu nn ca bng. <TR> B3/4t u mt d ng ca bng Table row. B3/4t u mt ca bng (bt u ct trong mt <TD> bng). Th <TH> ging nh <TD> nhng cho ch m v <TH> cn chnh gia - (heading). <CAPTION> t tiu (u ) cho mt bng Thuc tnh dng km bn trong cc th <TR>, <TH> ALIGN=MIDDLE|RIGHT hay <TD> cn l ch trong mt ca bng theo chiu ngang VALIGN=TOP|BOTTOM Thuc tnh dng km cc th <TR>, <TH> hay <TD>
36
WIDTH=n% COLSPAN=n
ROWSPAN=n </TABLE> III.2.3. Cc v d
gin mt theo chiu ngang chim nhiu ct hn cc trn d ng khc. Thuc tnh dng km cc th <TH> hay <TD> t rng ca . Thuc tnh dng km cc th <TH> hay <TD> gin mt theo chiu ngang chim nhiu ct hn cc trn d ng khc. Thuc tnh dng km cc th <TH> hay <TD> gin mt theo chiu ng chim nhiu d ng hn cc ct khc Kt thc bng
V d mt bng c bn gm 2 d ng v 3 ct: <TABLE BORDER> <TR> <TD>A</TD><TD>B</TD><TD>C</TD> </TR> <TR> <TD>D</TD><TD>E</TD><TD>F</TD> </TR> </TABLE> Kt qu tr v:
V d mt bng c Item 2 (tiu thc 2) chim 2 hng (d ng): <TABLE BORDER> <TR> <TD>Item 1</TD> <TD ROWSPAN=2>Item 2</TD> <TD>Item 3</TD> </TR> <TR> <TD>Item 4</TD> <TD>Item 5</TD> </TR>
37
</TABLE> Kt qu tr v:
V d mt bng c Item 1 (tiu thc 2) chim 2 hng (d ng): <TABLE BORDER> <TR> <TD ROWSPAN=2>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD> </TR> <TR> <TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD> </TR> </TABLE> Kt qu tr v:
V d bng c Item 2 (tiu thc 2) chim 2 ct: <TABLE BORDER> <TR> <TD>Item 1</TD> <TD COLSPAN=2>Item 2</TD> </TR> <TR> <TD>Item 3</TD> <TD>Item 4</TD> <TD>Item 5</TD> </TR> </TABLE> Kt qu tr v:
38
V d mt bng c tiu : <TABLE BORDER> <TR> <TH>Head 1</TH> <TH>Head 2</TH> <TH>Head 3</TH> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE> Kt qu tr v:
V d mt bng c tiu chim 2 ct: <TABLE BORDER> <TR> <TH COLSPAN=2>Head 1</TH> <TH COLSPAN=2>Head 2</TH> </TR> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD> </TR> <TR> <TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD> </TR> </TABLE> Kt qu tr v:
39
Bi tp 1. Sa phn gii thiu ca bn (bi tp 3, chng 2) sao cho cc mc a v dng danh sch v lit k 5 th bn thch nht di dng s. 2. p dng nhng g hc trn, hy to mt danh sch nh sau: Top level 1 Top level 2 1. Second Level o Fact 1 o Fact 2 Top level 3
3. p dng nhng g hc trn, hy to bng ging nh sau: Thng k Lp 1A Lp 1B Lp 1C Tng kt nm hc 2003 - 2004 HS gii HS kh HS trung bnh 35 4 0 20 10 12 5 25 20
40
CHNG IV. A HNH NH VO TI LIU HTML IV.1. Hnh nh tnh IV.1.1. Tp nh M i nh c lu gi trong my tnh thnh mt tp ring bit. Tp nh c nhiu nh dng khc nhau, th hin qua phn m rng (ui) ca tn tp: *.bmp, *.gif, *.jpeg, *.jpg, Tuy nhin cc trnh duyt ch c th hiu c cc tp nh di dng GIF hay JPEG. Hnh nh dng GIF c s dng rng ri nht trn Internet, sau l n cc nh dng JPEG. IV.1.2. Th <IMG> C php chn nh vo trang Web: <IMG SRC=URL> IMG (Image), thuc tnh SRC (Source) l ng dn n ni ly tp nh. Gi tr ca thuc tnh SRC c gn bng URL l mt a ch trn my tnh a phng hay trn Internet. N ch ra ni lu tr tp nh cn chn vo. a ch URL bo cho trnh duyt bit cn ly tp nh u. Nu tp nh nm ngay trn my tnh a phng th cn ghi r ng dn Nu tp nh ly t mt ni khc trn Internet th phi ghi y a ch URL V d: <IMG SRC=logo.gif> IV.2. Cc thuc tnh ca th chn hnh nh
Trong th IMG c n c mt s thuc tnh khc nh: ALT, WIDTH,

HEIGHT, ALIGN, VSPACE, HSPACE, BORDER IV.2.1. Thuc tnh ALT Thuc tnh ALT ALTernative cho ph p ta chn mt on ch thay th vo ch c hnh v hin ln xu ch thch khi a tr chut vo nh. Thuc tnh ny dng trong trng hp trnh duyt khng hin th c hnh nh th s hin d ng vn bn thay th. Lm nh vy nhng ngi s dng trnh duyt khng c kh
41
nng c nh hay tt chc nng c nh tng tc c th bit c l hnh nh g v h c th chn xem sau nu c thi gian. Nn lun s dng thuc tnh ny khi a hnh nh vo trang Web v nhiu ngi mun c tc cao, lt nhanh qua cc thng tin l chnh tt chc nng c nh ca trnh duyt vn c th bit c nh mang ni dung g. V d: <IMG SRC=face.gif ALT=Nhay mat>
Hin nh
nh (khng hin ln) khi c v khng s dng thuc tnh ALT
Nu khng s dng thuc tnh ALT th ti ch c hnh s hin t IMAGE hoc biu tng nh b khuyt. IV.2.2. Thuc tnh WIDTH v HEIGHT Thuc tnh WIDTH v HEIGHT dng xc nh chiu rng v chiu cao ca nh. Gi tr ny c th tnh theo phn trm (%) hoc pixel. Ch : Nu t chiu rng v chiu cao khng chun s lm hnh trong nh b co gin m o i. khc phc nhc im ny, ta nn x l nh kch thc ph hp vi yu cu. V d: <IMB SRC=face.gif WIDTH=100 HEIGHT=100>
<IMB SRC=face.gif WIDTH=50 HEIGHT=50>

42
IV.2.3. Thuc tnh ALIGN Thuc tnh ALIGN cho ph p chnh li v tr ca nh theo c hai chiu ngang v chiu dc. Theo chiu dc: ALIGN=MIDDLE, ALIGN=TOP, ALIGN=BOTTOM
ALIGN=TOP Theo chiu ngang:
ALIGN=MIDDLE
ALIGN=BOTTOM
ALIGN=LEFT, ALIGN=RIGHT
ALIGN=LEFT
ALIGN=RIGHT
Nu nh khng c thuc tnh ny th mc nh nh c t ti ng ni t th IMG dng trn cng d ng ch, theo cnh di ca khung nhn. IV.2.4. Thuc tnh VSPACE v HSPACE Khi s dng thuc tnh ALIGN, nh c chn vo d ng vn bn vi cc ch dnh st lin. Thuc tnh VSPACE v HSPACE dng to khong trng nh vin xung quanh nh (tnh theo n v pixel). VSPACE=n HSPACE=n Thm khong trng theo chiu dc Thm khong trng theo chiu ngang
V d: <IMG SEC=face.gif VSPACE=20 HSPACE=20>
43
Bi tp 1. Hy cho bit ti sao cc nh di y c th c nhng vo trong mt ti liu HTML? Vit on code c dng nhng cc nh .
2. To mt trang web v chn cc nh sao cho nh nm pha bn tri, v cc on vn bn nm bn phi. 3. To mt trang web v chn cc nh sao cho nhh c cn gia v cc on vn bn nm trn hoc bn di.
44
CHNG V. CC MI LIN KT SIU VN BN V.1. Th neo v mi lin kt Cc lin kt siu vn bn trong mt ti liu HTML l tham chiu n mt ti liu khc hay mt phn ti liu khc nm trong ti liu . Lin kt siu vn bn gm c ba phn: giao thc, ci neo v a ch hay URL to mt mi lin kt th vic u tin cn lm l thit lp ci neo. Cp th to neo l <A></A> (Anchor). Th ny c nhiu thuc tnh bt buc phi xc nh r, ta s tm hiu k hn phn sau. V.1.1. Thuc tnh HREF HREF (Hypertext REFerence tham chiu siu vn bn) c dng lin kt n: Mt ti liu khc (external link) hay Mt phn khc nm trong chnh ti liu ang c (internal link) Giao thc tham chiu HREF l HTTP. Nu l lin kt ni ti internal link th khng cn phi c phn giao thc. V.1.2. Lin kt ra ngoi External Links lin kt n mt ti liu khc, ta cn phi bit a ch URL ca ti liu ch. C ng cn phi ch ch , thng l mt nhm vi t lm u mi lin kt. Nhm t ny s i mu phn bit, con chut tr vo s c hnh bn tay v khi nhn chut th trang siu vn bn ch s c hin th. Nn chn cc t lm u mi sao cho gi t v sao cho t nhin, khng nh hng n ni dung v ngha ca cu vn. Trnh s dng lp i lp li cu nhn vo y khi to u mi lin kt. C php to ra mt mi lin kt ti ti liu khc - lin kt ra ngoi - l nh sau: <A HREF="URL"> Nhm t u mi li n kt</A>
45
V.1.3. a ch tuyt i Khi lin kt ti mt tp nm ngoi my tnh cc b ta phi nu r giao thc v y a ch URL ca tp ch. <A HREF="full URL">... </A> V d: <A HREF="http://www.vnu.edu.vn/index.html>HQG H Ni</A> <A REF="http://www.srl.rmit.edu.au/sa/vicsa.html>Victorian Subject Associations on Internet</A> V.1.4. a ch tng i Nu lin kt n mt tp ngay trn my ch ca bn th khng cn dng a ch URL tuyt i m dng a ch tng i. Thay cho URL l tn tp cng vi ng n n th mc ni cha tp ch. <A HREF="path & filename">... </A> V d: <A HREF="examples/exam1.htm">V d 1</A> V.1.5. Lin kt ni ti Internal Link C ng c th to mi lin kt trong bn thn ti liu siu vn bn, t phn ny n phn khc. iu ny rt c ch khi ti liu c kch thc ln. Ta c th to mc lc ton b ni dung trn phn u trang gm tn cc chng v lin kt tng tn chng n phn ni dung tng ng. lm iu ny, cn nh du im ch - book mark- ca lin kt bng th neo <A NAME="T n im ch"> c n trong th neo ti im u ca mi lin kt th thay URL bng tn ni trn. <A HREF="T n im ch"> Lu c thm du "#". V d, to lin kt ni ti t y nhy v u trang ta cn to mt book mark u trang vi tn l Top ch ng hn. Sau , to th neo lin kt d ng di nh sau
46
<A HREF=" Top"> v
u trang </A>
V.2. Dng hnh nh lm u mi lin kt V.2.1. Thay ch bng hnh Nh phn trn, cu trc thnh phn HTML mi lin kt siu vn bn l: <A HREF="u mi li n kt"> thay u mi lin kt bi mt biu tng, hay mt hnh nh... Ta ch cn chn mt hnh nh hay biu tng vo v tr ca u mi lin kt. V d: <A HREF=http://www.vnu.edu.vn><IMG SRC=Logo.gif></A> V.2.2. Image Map - th AREA Th hnh dung ta c mt bn a l hnh chnh. Khi nhn chut vo vng din tch ca mt tnh th mt trang thng tin tng ng vi tnh s hin ra. chnh l Image Map. Vi Image Map, u mi lin kt l mt vng trn mt hnh nh c hnh dng ty no . Cc cng c son tho trc quan cho ph p d dng to Image Map. Mt v d v m ngun HTML ca thnh phn Image Map nh sau: <MAP NAME=Map01> <AREA HREF=chapter1.html SHAPE=rect coords=6, 22, 167, 169> <AREA HREF=chapter2.html SHAPE=circle coords=259, 106, 36> <AREA HREF=chapter3.html SHAPE=polygon coords=123, 196, 56, 211, 278, 201> </MAP> <IMG BORDER=0 SRC=image.gif WIDTH=400 HEIGHT=600 USEMAP= Map01> on m trn s to 3 u mi lin kt l ba vng hnh ch nht (rect), hnh tr n (circle) v hnh tam gic (polygon) trn nn nh image.gif. Khi nhn chut vo phm vi 3 vng ny th cc tp tng ng chapter1.html, chapter2.html v chapter3.html s c np v hin th.
47
V.3. a m thanh vo ti liu V.3.1. Lin kt n tp m thanh chn mt on m thnh vo ti liu HTML ta c ng theo ng quy tc to mi lin kt thng thng. Trong th neo, ti a im URL by gi l a ch ca tp m thanh. Di y l mt v d v vic chn m thnh vo ti liu. Khi nhn chut vo mi lin kt ny, tp m thanh s c pht li. <A HREF=music/papa.rmi>Papa</A> V.3.2. To m thanh nn Khng nhng c th chn tp m thanh vo ti liu HTML m c n c th nhng m thanh vo ti liu, ngha l m thanh nn pht ra khi trang ti liu bt u hin th. nhng m thanh vo ti liu ta dng th <EMBED SRC=URL HEIGHT=n WIDTH=n AUTOSTART=true|false LOOP=true|false> Trong : Thuc tnh SRC=URL M t ng dn n tp m thanh Chiu cao ca khung nhn cho giao din iu HEIGHT=n khin ca phn mm pht m thanh Chiu rng ca khung nhn cho giao din iu WIDTH=n khin ca phn mm pht m thanh m thanh t ng c kch hot khi bt u AUTOSTART=true|false np ti liu hin th (nn t l true) LOOP=true|false Thit lp vic lp li nhiu ln hay ch mt ln t th <EMBED> u th khung nhn ca giao din iu khin vic pht tp m thanh xut hin . V d: <EMBED SRD=music/papa.rmi HEIGHT=50 WIDTH=200 AUTOSTART=true LOOP=true>
48
V.4. a Video vo ti liu V.4.1. Chn tp Video Vic chn tp video vo ti liu HTML c ng ging nh chn tp m thanh. V d on m sau y s chn mt on phim video vo ti liu. N s to ra mt mi lin kt ti tp video chn v khi ta nhn chut vo mi lin kt th s c xem li tp video . <A HREF=film.mpg>Film</A> Ch : Cc tp video u c kch thc kh ln nn hy cn nhc v tc ng truyn ca ngi dng. V.4.2. Nhng tp video Th <EMBED> c ng dng nhng tp video vo ti liu: V d: <EMBED SRC=film/film.mov HEIGHT=144 WIDTH=160> C ng tng t nh cc thuc tnh ca vic chn tp m thanh: Thuc tnh SRC=URL HEIGHT=n WIDTH=n AUTOPLAY=true|false M t Tn v ng dn n tp video Chiu cao ca khung hnh chiu video Chiu rng ca khung hnh chiu video t cho video t chy khi bt u np ti liu (khng bt buc)
Cho hin giao din iu khin ca phn mm CONTROLLER=true|flase video lin ngay pha di khung hnh. Thuc tnh ny khng bt buc. Mc nh l true. LOOP=true|false Thit lp vic lp li nhiu ln hay ch mt ln
V tr t th <EMBED> l ni xut hin khung hnh video.
49
Bi tp 1. To mt trang khc gii thiu chi tit hn v mnh v c lin kt ti trang gii thiu chnh ca mnh. 2. Chn 2 nh vo trong trang gii thiu chnh sao cho khi click vo nh th trang gii thiu chi tit c m ra. Yu cu: nh th nht s dng ng dn tuyt i, nh th hai s dng ng dn tng i ti trang cn lin kt. 3. To mt trang th ba trong c chn mt on Video clips gia trang.
50
CHNG VI. BY TR NN V KHUNG VI.1. Mu nn v vn bn VI.1.1. t mu nn vn bn tr nn p v hp dn, i khi t nn cho trang siu vn bn. Thuc tnh BGCOLOR (Background Color). Dng thuc tnh ny km th <BODY> t mu nn cho vn bn. C php nh sau: <BODY BGCOLOR="#rrggbb"> Ni dung ca ti liu </BODY> trong mu. rrggbb l red-green-blue, b ba s hai ch s h m 16, xc nh m
VI.1.2. Mu ch ca vn bn Thuc tnh TEXT. Thuc tnh ny thit lp mu cho cc con ch trong vn bn, tr cc u mi lin kt phi c mu khc i. <BODY TEXT="#rrggbb"> Ni dung ca ti liu </BOD > VI.1.3. Mu ca u mi lin kt - Thuc tnh LINK, VLINK v ALINK Ba thuc tnh trn t mu ca cc u mi siu lin kt. LINK - t mu hin th trc khi nhn chut vo n thm ch lin kt. VLINK - t mu sau khi ch lin kt c n thm (visited. ALINK - t mu khi bn kch hot, ang nhn chut vo (active Cc mu mc nh l: LINK=blue, VLINK=purple and ALINK=red <BODY LINK="#rrggbb" VLINK="#rrggbb" ALINK="#rrggbb"> Ni dung ca ti liu </BODY> Kt hp cng vi nhau
51
<HTML> <HEAD> <TITLE>Color Control Example</TITLE> </HEAD> <BODY BGCOLOR="#000000" TEXT="#F0F0F0" LINK="#FFFF00" VLINK="#22AA22" ALINK="#0077FF"> y l mt ti liu lm v d v thit t mu. Cc ch mu xm sng tr n n n en, v <A HREF="nowhere.htm">u mi li n kt</A> u ti n c mu vng, chuyn mu xanh l cy sng khi c kch hot v c mu xanh nht khi im ch c thm </BODY> </HTML> Lu : T hp mu nh trn ch c thit t mt ln cho ton vn bn. Hy thn trng khi lu chn m bo d c, d nhn. VI.1.4. Thuc tnh v m mu <BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb" VLINK="#rrggbb" ALINK="#rrggbb"> Thuc tnh BGCOLOR TEXT LINK VLINK ALINK M t t mu nn t mu cc con ch, tr cc mi ni. t mu ban u ca u mi lin kt khi cha kch hot t mu u mi lin kt khi thm ch t mu u mi lin kt khi kch hot
Mt vi m mu hay dng: Mu black white pale grey dark green green pale blue/green pale blue navy blue M #000000 #FFFFFF #DBDDE5 #306020 #405060 #00FFFF #A5D6F7 #000020
52
burgundy yellow purple red orange red orange neon blue pale purple/orchid maroon scarlet pale purple firebirch
#800040 #FFFF00 #601050 #FF0000 #FF2400 #FF7F00 #4D4DFF #9370DB #8E236B #8C1717 #6B238E #8E2323
Tuy nhin hin nay nhiu trnh duyt chp nhn dng tn mu ting Anh thay cho cc ch s rt kh nh trn. VI.2. Np hnh nh lm nn cho trang vn bn VI.2.1. Thuc tnh BACKGROUND C th dng thuc tnh ny to mt nh nn cho trang ti liu siu vn bn. Thay cho xc nh mu ta cn ch ra tn tp hnh nh km ng dn. <BOD BACKGROUND ="ng dn ti tp nh"> Ni dung ti liu </BOD > V d: <BODY BACKGROUND="images/backgnd.gif"> Khi dng nh lm nn cho trang Web cn phi np mt tp hnh nh. Nh ta bit tp nh thng c kch thc ln, lm chm vic hin th trang ti liu. Do cn chn tp nh c kch thc nh lm nh nn. Ton b trang vn bn s c lt nn bng hnh nh ny nh ta lt nn nh bng gch hoa. VI.2.2. Water mark Nhiu trang web c nn trang tr gn cht c nh, c n phn vn bn s cun tri bn trn m i khi ta di chuyn thanh trt. Hiu ng ny c to ra nh thit lp thm thuc tnh cho nh nn l
53
bgproperties="fixed" V d: <BODY BACKGROUND="images/backgnd.gif" bgproperties="fixed"> VI.2.3. Hy k tn vo ti liu ca mnh Mt thng l nn tun theo l k tn vo ti liu. N gip cho ngi c bit c nhng thng tin ti thiu v tc gi son ra ti liu, thi gian cp nht... Vic a thm a ch ca ti liu Web vo cui trang s gip cho ngi c lu li c xut x ca trang ti liu. l cha ni n ngha quan trng ca phn ch k ny trong cc ti liu chnh thc hoc c tnh thng mi. Phn ch k thng gm cc thng tin sau: Ngy khi to ln u. Ngy sa cha cp nht gn nht. Tn (v e-mail) ca tc gi Tuyn b v bn quyn (nu cn ) URL on m HTML ca phn ch k i loi c th nh sau: <HR SIZE=1> <FONT SIZE=-1> Ngy vit: 20 September 1998 <BR> Ngy cp nht: 20 October 2001<BR> Tc gi: <A HREF="mailto:webmaster@vitti.vnu.edu.vn"> Nguyn Vn Hng</A> email: webmaster@vitti.vnu.edu.vn"><BR> <P> Copyright © Vin o to cng ngh thng tin VITTI, HQG H ni, 1998. <HR SIZE=1> URL: http://www.vnu.edu.vn/index.htm </FONT>
54
Th <A HREF="mailto:webmaster@vitti.vnu.edu.vn">... </A> l mi lin kt n dch v th in t, khi tr chut vo y s kch hot dch v e-mail gi n a ch nu sau lnh mailto. Hy tp thi quen thm ch k vo ti liu ca mnh VI.3. Khung Frames HTML c cc th trnh by cho ph p chia vng hin th ca ca s trnh duyt thnh nhiu khung, m i khung l mt ca s c lp, hin th mt ti liu HTML khc nhau. Khung cho ph p ngi thit k hin th ng b nhiu ti liu HTML khc nhau tin theo di, so snh. V d, trong khung bn tri hin th cc nt bm, c n khung bn phi hin th ti liu tng ng. VI.3.1. Trang tr khung Trang HTML thc hin by tr cc khung (gi l frameset document) c cu trc khc trang thng thng, khng c khung. Trang thng c 2 phn, HEAD v BODY. Trang by tr khung c HEAD v FRAMESET thay cho BODY. Thnh phn FRAMESET t chc cc khung trong ca s trnh duyt. N c ng c th cha th NOFRAMES x l trng hp trnh duyt khng h tr frame. Cc thnh phn thng thng khc vn nm trong BODY khng c xut hin trc th m FRAMESET. Nu khng, thnh phn FRAMESET s b b qua. V d: Di y l mt v d n gin. <HTML> <HEAD> <TITLE>A simple frameset document</TITLE> </HEAD> <FRAMESET cols="20%, 80%"> <FRAMESET rows="100, 200"> <FRAME src="frame1.html"> <FRAME src="frame2.gif">
55
</FRAMESET> <FRAME src="frame3.html"> <NOFRAMES> <P>This frameset document contains: ..... </NOFRAMES> </FRAMESET> </HTML> on m trn s to 3 khung, c bi tr nh di y.
Hnh VI.1. t qu chy on code v d Khi trnh duyt khch khng h tr khung th cc khung s khng c hin th m thnh phn NOFRAMES s c x l. VI.3.2. Thnh phn FRAMESET Th FRAMESET dng phn chia vng hin th trong ca s trnh duyt thnh cc khung hnh ch nht. M i khung hnh ch nht gi l mt frame, c nh ngha bng th FRAME. a. Cc thuc tnh v v d minh ha rows = Danh sch cc cao ca cc khung
56
Danh sch gm nhiu phn t, cch nhau du phy. M i phn t xc nh cao (s d ng ) ca mt khung. Chia chiu ng thnh bao nhiu khung th danh sch c by nhiu phn t. Chiu cao th hin bng - s pixel, - t l phn trm chiu cao mn hnh - hay t l phn chiu cao c n li. Gi tr mc nh l 100%, tc ch c mt khung theo chiu ngang. cols = Danh sch cc rng ca cc khung. ngha tng t nh trn. Gi tr mc nh l 100%, tc ch c mt khung theo chiu dc. Thuc tnh row thit lp vic chia khung theo chiu ngang trong mt frameset. Nu khng nh ngha, th cc ct trong khung s chim ton b chiu cao vng hin th. Thuc tnh cols thit lp vic chia khung theo chiu ng trong mt frameset. Nu khng nh ngha, th cc d ng trong khung s chim ton b chiu rng vng hin th. Phi hp hai thuc tnh s to ra li cc khung. Cc v d. 1- Chia mn hnh thnh hai na: na trn v na di: <FRAMESET rows="50%, 50%"> ...the rest of the definition... </FRAMESET> 2- Chia mn hnh thnh 3 ct. Ct gia rng 250 pixels. Ct u chim 25% ca phn c n li v ct th 3 chim 75% ca phn rng c n li. <FRAMESET cols="1*,250,3*"> ...the rest of the definition... </FRAMESET> 3- To li gm 2 x 3 = 6 khung. <FRAMESET rows="30%,70%" cols="33%,34%,33%"> ...the rest of the definition...
57
</FRAMESET> 4- Chia chiu ng mn hnh thnh 4 khung. Khung th nht chim 30% ca chiu cao vng hin th. Khung th hai c chiu cao c nh 400 pixel. Du sao c ngha l hai khung th 3, th 4 chia nhau phn c n li. Khung th 4 c chiu cao l 2* , gp i khung th 3 (v * tng ng vi 1*). Nu chiu cao vng hin th l 1000 pixel th cao ca cc khung 1,2,3,4 ln lt l: 300, 400, 100, 200 pixel !. <FRAMESET rows="30%,400,*,2*"> ...the rest of the definition... </FRAMESET> b. Chia khung lng nhau v thnh phn FRAME Vic chia khung c th lng nhau nhiu mc. V d: chia chiu rng thnh 3 khung ng, sau khung gia li c chia thnh 2 phn trn v di. <FRAMESET cols="33%, 33%, 34%"> ...contents of first frame... <FRAMESET rows="40%, 50%"> ...contents of second frame, first row... ...contents of second frame, second row... </FRAMESET> ...contents of third frame... </FRAMESET> Th FRAME nh ngha mt khung hnh c th (trong nhiu khung hnh ca frameset). Cc thuc tnh name = Tn ca khung. C th dng tn ny lm ch ca mi siu lin kt. src = URI Tr n trang ti liu s hin th trong khung.
58
noresize Khng cho ph p co gin li kch thc scrolling = auto|yes|no Thit lp thanh cun. auto: Xut hin thanh cun khi cn thit. y l gi tr mc nh. yes: Lun c thanh cun. no: Lun khng c thanh cun. frameborder = 1|0 Thit lp ng bin. 1: C ng bin gia khung ang x t vi cc khung k n. y l gi tr mc nh. 0: Khng c ng bin gia khung ang x t vi cc khung k n. marginwidth = s pixel Thit lp rng l chiu rng = khong trng gia phn hin th ni dung v bin tri, bin phi. Gi tr mc nh tu theo b duyt. marginheight = s pixel Thit lp rng l chiu cao = khong trng gia phn hin th ni dung v bin trn, bin di. Gi tr mc nh tu theo trnh duyt. Lu : Ni dung trong mt frame khng c thuc v chnh trang ti liu nh ngha frameset. VI.4. Thit lp Target, th NOFRAME v IFRAME VI.4.1. Thit lp Target Thuc tnh target l xc nh tp ti liu HTML s hin th trong khung. target = tn khung ch. Thit lp tn ca khung m ti liu s m ra trong khung . Thuc tnh ny dng vi cc thnh phn to mi lin kt : (A, LINK), image map (AREA), v FORM.
59
VI.4.2. Th NOFRAMES Thnh phn NOFRAMES thit lp ni dung cn hin th khi trnh khch khng h tr frame hoc tt chc nng hin th frame. Thnh phn NOFRAMES t phn cui ca thnh phn FRAMESET. V d: <HTML> <HEAD> <TITLE>A frameset document with NOFRAMES</TITLE> </HEAD> <FRAMESET cols="50%, 50%"> <FRAME src="main.html"> <FRAME src="table_of_contents.html"> <NOFRAMES> <P>Here is the <A href="main-noframes.html"> non-frame based version of the document.</A> </NOFRAMES> </FRAMESET> </HTML> VI.4.2. Nhng frame - th IFRAME Thnh phn IFRAME cho ph p ngi thit k chn mt frame vo gia mt khi vn bn text v hin th mt ti liu HTML khc bn trong. Thuc tnh SRC thit lp ti liu ngun hin th trong frame. Cc thuc tnh: name = tn. tham chiu trong ti liu width = rng ca inline frame. height = cao ca inline frame. V d: <IFRAME src="foo.html" width="400" height="500" scrolling="auto" frameborder="1"> [Your user agent does not support frames or is currently configured not to display frames. However, you may visit <A href="foo.html">the related document.</A>] </IFRAME>
60
Inline frames mc nh l khng co gin c, khng cn phi nu r noresize. Bi tp 1. Sa trang gii thiu tm tt v mnh sao cho nn ca trang l mt nh bt k, trang gii thiu chi tit c nn mu xanh nc bin nht. 2. Dng th IFRAME nhng trang th 3 vo trong trang gii thiu tm tt (trang ch).
61
CHNG VII. BIU MU STYLE V CASCADING STYLE SHEET VII.1. FORM VII.1.1. FORM l g? a. Chc nng ca FORM m rng kh nng phc v ngi s dng, dch v Web cn phi s dng cc ng dng khc bn ngoi. V d NSD yu cu tm kim trong c s d liu, ly cc thng tin tc thi, lun c cp nht.... lm c iu ny dch v Web phi chuyn yu cu ca NSD n mt ng dng khc. ng dng ny s thc hin yu cu v tr li kt qu cho Web server chuyn tip n NSD. Form l mt cch chuyn d liu t NSD n cho Web Server x l. Forms c s dng rng ri trn WWW. Cc forms rt tin li cho ngi dng in cc yu cu tm kim, cc biu mu iu tra, nhp d liu u vo cho cc ng dng.. C nhiu thnh phn khc nhau (gi l cc iu khin control) trong mt form. Tu theo yu cu giao tip vi NSD cn chn thnh phn thch hp nht. Khi to form bn c ng cn phi ch r cho my ch dch v bit cch x l form. C nhiu loi chng trnh ng dng khc nhau trong my ch dch v lm vic ny: cc chng trnh CGI, ISAPI, cc script ASP, JSP, Java Bean, Servlet... To form l khu u tin trong vic xy dng giao tip gia NSD vi cc ng dng Internet / Intranet. b. Thnh phn ca FORM Cp th to Form l <FORM...>...</FORM>. Mi thnh phn ca form nh s trnh by di y u phi nm trong phm vi gii hn bi cp th ny. Cng thc khung to form l: <FORM METHOD=POST ACTION="URL"> Ton b cac thanh phn khac b n trong form n m </FORM> y
62
Thuc tnh METHOD ch ra phng thc trao i d liu gia trnh duyt Web v my ch Web. C 2 phng thc l POST, GET. i vi form phng thc thng l POST. Thuc tnh ACTION thit lp a ch URL ca chng trnh s nhn v x l d liu gi t form. VII.1.2.Cc thnh phn trong FORM Nh nu trn, c nhiu loi thnh phn khc nhau trong mt Form. Di y s trnh by ln lt nhng im c bn nht. a. Hp vn bn TextBox Hp vn bn l ni g vo mt d liu kiu xu k t. Hp vn bn s c hin th nh sau: Bottom of Form 1
Th to ra n l: <INPUT TYPE="TEXT" NAME="Tn" SIZE="n"> Trong TEXT l t kho ng vi kiu l Text box, Tn l tn ca hp vn bn ny c n n l mt s nguyn ch ra chiu di ca trng. Tn phi duy nht trong trang, khng c trng nhau. b. Hp mt khu Password Hp mt khu l ni g vo mt mt khu kiu xu k t. Hp mt khu c hin th nh sau:
Th to ra n l: <INPUT TYPE="PASSWORD" SIZE="n"> Trong PASSWORD l t kho to hp mt khu, n l s nguyn ch ra chiu di ca hp. Hp mt khu khc hp vn bn ch khi g cc k t t bn phm th n khng hin th k t tng ng trong khung m thay bng cc du sao *.
63
Lu : Vic hin th k t du * thay th ch c tc dng che giu vi ngi nhn ti my cc b. Password vn c gi vo mng di dng r, khng m ho, c th b xem trm. Nhim v m l ca giao thc mng. c. Vng vn bn Text Windows Vng vn bn, hin th nhiu d ng vn bn. Vng vn bn c dng nh sau :
Cng thc vit l: <TEXTAREA NAME= OTenVung" ROWS=m COLS=n> Van ban hien thi</TEXTAREA> trong , Tn vng l tn ca vng vn bn, m v n l cc s nguyn, ch ra chiu cao v chiu rng ca vng vn bn. Nu bn trng phn on vn bn s hin th th s khng c vn bn no xut hin trong ca s. V d: <TEXTAREA NAME="COMMENTS" ROWS=5 COLS=50> Bn cn phi thng xuy n cp nht cc mu virus mi nht</TEXTAREA> d. Cc la chn Radio Button Cc nt chn radio l mt nhm nt tr n, ch cho ph p bn c chn mt trong nhiu nt. Nt radio c dng nh sau:
Cng thc vit: <INPUT TYPE="RADIO" NAME="T n_nhm_nt" VALUE="gi_tr_c_chn"> Nhn nt
Trong RADIO l t kho ng vi kiu nt chn Radio, nhn nt i l xu k t s xut hin cnh nt. V d:
64
on m to nt radio u tin - Mastercard - l: <INPUT TYPE="RADIO" NAME="PAYMENT" VALUE="Mastercard">Master Card Trong v d trn, thuc tnh NAME c gn tr PAYMENT l tn nhm nt Radio, gm 3 nt cho ph p la chn mt trong 3 cch thanh ton, thuc tnh VALUE nhn kt qa cu tr li ng vi la chn Mastercard . Lu phn bit gia Mastercard l gi tr ca la chn vi Mastercard l nhn nt, tc cm ch hin cnh nt radio. Ta c th thay nhn nt bng mt xu bt k, v d Th tn dng MasterCard". D nhin c mt nt radio li tng ng vi mt d ng m HTML nh trn. Lu rng thuc tnh NAME phi nh nhau cho ton b cc nt radio ca cng mt nhm. Trong v d trn th tt c cc nt u phi cng c NAME =[PAYMENT]. Trong mt nhm nt radio, mt nt c th c thuc tnh CHECKED, ngha l n c nh du chn sn khi m trang Web. e. nh du CheckBoxes nh du, nh du mt hoc vi la chn. dnh du c dng nh sau:
Cng thc vit: <INPUT TYPE="checkbox" NAME="T n nhm nt" VALUE="gi tr c chn"> Nhan o i V d:
65
Khc vi nt radio bn c th nh du chn nhiu ng thi trong cng mt nhm nh du. V d cng thc to ra checkbox u tin trn l: <INPUT TYPE="CHECKBOX" NAME="DELIVERY" VALUE="Overnight">Overnight ngha ca cc thuc tnh c ng tng t nh ca nt radio. Trong mt nhm nh du, mt s c th c thuc tnh CHECKED v c nh du chn sn khi m trang Web. f. Danh sch la chn thnh phn SELECT
Cng thc to menu l: <SELECT NAME="MENU" SIZE="5"> <OPTION>Menu item 1 <OPTION>Menu item 2 <OPTION SELECTED>Menu item 3 <OPTION>Menu item 4 <OPTION>Menu item 5 <OPTION>Menu item 6 <OPTION>Menu item 7 <OPTION>Menu item 8 </SELECT> trong thuc tnh SIZE xc nh s mc chn c th nhn thy trong ca s cun. OPTION SELECTED xc nh la chn mc nh ban u. C th to menu bung xung c dng nh sau nu ta t thuc tnh SIZE=1:
to bng chn kiu ny ch cn b thuc tnh SIZE trong on m trn. Mc nh, danh sch chn SELECT ch cho ph p chn mt mc chn. Thuc tnh MULTIPLE cho ph p nh du chn nhiu mc. g. Hp chn tp
66
Cho ph p hin th hp chn tp hoc nhp tn tp trc tip. V d.
Khi nhn chut vo nt Browse th hp thoi Choose File s m v cho ph p chn tp. Cch vit: <INPUT T PE="FILE"NAME="fileName"> Khi nhp tn tp vo trng text hay chn tp (bng nt Browse) th tn tp s c gn cho thuc tnh VALUE ca thnh phn ny. h. Nt Send v Clear Khi ngi s dng in xong th phi hoc gi kt qu i, hoc xo sch v in li t u: Send - gi kt qu i. Clear - xo sch v lm li t u. Hai nt lm vic ny c dng:
M to ra hai nt ny l: <INPUT TYPE="SUBMIT" VALUE="Send form"> <INPUT TYPE="RESET" VALUE="Clear form"> trong hai xu k t trong ngoc k p Send form, Clear form gn cho thuc tnh VALUE s hin th trn nt tng ng. D nhin ta c thay bng xu no khc tu , ch ng hn gi i, in li. i. Nt nhn Push Button Ngoi hai nt kiu Submit v Reset lun gn vi form v c chc nng quy nh trc nh trn, c th to nt nhn gn vi nhng hnh ng x l khc do ta t thit k. M ngun to nt nhn tng qut kiu ny l . <Button type="button" name="T n nt"> Nhn nt </BUTTON>
67
Tn nt tham chiu, c n nhn nt l nhn s hin th trn nt. Nu mun trang tr mt biu tng hay hnh nh trn nt ch cn thay th phn nhn nt bng hnh nh. <BUTTON type="button" name="T n nt"><IMG SRC="Tp nh" ALT="Dng ch thay th"></BUTTON> Lu : phi cung cp d ng ch thay th cho thnh phn IMG. Khng c gn mt image map vi thnh phn IMG cha trong mt th BUTTON. gn cc hm chc nng x l vi mt nt nhn, ta dng cc thuc tnh v s kin ni ti ca nt nh onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout... Phn trnh by v Scripting s nu r vn ny. j. Nt nhn bng hnh nh C th to nt nhn trc tip bng mt hnh nh. <INPUT type="image" NAME = "T n nt" SRC="T n nh">
Khi nhn nt, form c gi i cng vi cc to x,y tnh bng pixel, k t gc trn - tri ca hnh nh. Cc s liu ny c gi i di dng. name.x=x-value name.y=y-value y name l gi tr ca thuc tnh name ca nt; x-value, y-value l cc to . Nu vic x l khc nhau ph thuc to ca im nhn chut m trnh khch khng h tr hnh nh th phi dng gii php khc: dng nhiu button hoc image map v script. k. Cc trng n Cc trng n khng hin th trn form nhng c dng gi thng tin cho Server. V d: <INPUT TYPE="HIDDEN" NAME="previous-url" VALUE="URL"> on m trn to mt lin kt trn trang cho ph p NSD nhn nt ti mt trang Web ti a ch URL nht nh no ch khng phi dng phm BACK.
68
Mt v d na l in t ng mc Subject trong email c th dng mt trng n nh sau: <INPUT TYPE="HIDDEN" NAME="subject" VALUE="membership form"> on m ny in xu k t gn cho thuc tnh VALUE vo d ng ch subject trong email. l. Nhn Th label Cc nt c nhn ngm nh, gn bng thuc tnh value Cc thnh phn c n li nh text fields, checkboxes, radio buttons, menus khng c nhn ngm nh. C th hin th mt xu k t k bn thch hp lm nhn nh ta vn lm trn. Tuy nhin, c t HTML c thnh phn LABEL gn nhn cho cc thnh phn iu khin khc. Cp th <LABEL>... </LABEL> LABEL. Thuc tnh FOR ca th label <LABEL for="Id"> Thuc tnh ny nhm gn nhn cho thnh phn iu khin tr bi Id. Id l tn nh danh ca thnh phn iu khin. Nu khng c thuc tnh for th ngm nh l gn cho thnh phn iu khin cha trong cp th LABEL ang x t. C th nhiu hn mt LABEL cho cng mt thnh phn iu khin V d: <FORM action="..." method="post"> <TABLE> <TR> <TD><LABEL for="fname">First Name</LABEL> <TD><INPUT type="text" name="firstname" id="fname"> <TR> <TD><LABEL for="lname">Last Name</LABEL> <TD><INPUT type="text" name="lastname" id="lname"> </TABLE>
69
dng nh ngha thnh phn
</FORM> Gn nhn khng dng thuc tnh FOR gn nhn cho mt thnh phn iu khin m khng dng thuc tnh FOR, thnh phn iu khin phi nm bn trong thnh phn LABEL. Lc ny, mt thnh phn LABEL ch cha mt thnh phn iu khin. Cc ch lm nhn c th t trc hay sau thnh phn iu khin. V d: gn nhn cho 2 thnh phn text field. <FORM action="..." method="post"> <P> <LABEL> First Name <INPUT type="text" name="firstname"> </LABEL> <LABEL> <INPUT type="text" name="lastname"> Last Name </LABEL> </P> </FORM> VII.1.3. Thm tnh cu trc cho FORM a. FIELDSET v LEGEND Thnh phn FIELDSET cho ph p nhm mt s thnh phn iu khin c lin quan vi nhau. NSD d hiu hn, c n ngi thit k trang c ng d x l di chuyn focus hn. Thnh phn LEGEND cho ph p gn mt d ng ch gii cho mt FIELDSET Cc thuc tnh align = top|bottom|left|right top: legend t pha trn ca fieldset. y l gi tr mc nh.

bottom: legend t pha di ca fieldset. left: legend t pha tri. right: legend t pha phi ca fieldset.
Vi d <FORM action="..." method="post"> <P> <FIELDSET>

70
<LEGEND>Personal Information</LEGEND> Last Name: <INPUT name="personal_lastname" type="text"> First Name: <INPUT name="personal firstname" type="text"> Address: <INPUT name="personal address" type="text"> </FIELDSET> <FIELDSET> <LEGEND>Medical History</LEGEND> <INPUT name="history_illness" type="checkbox" value="Smallpox"> Smallpox <INPUT name="history_illness" type="checkbox" value="Mumps"> Mumps <INPUT name="history_illness" type="checkbox" value="Dizziness"> Dizziness <INPUT name="history_illness" type="checkbox" value="Sneezing"> Sneezing </FIELDSET> <FIELDSET> <LEGEND>Current Medication</LEGEND> Are you currently taking any medication? <INPUT name="medication_now" type="radio" value="Yes">Yes <INPUT name="medication_now" type="radio" value="No">No <BR> If you are currently taking medication, please indicate it in the space below: <TEXTAREA name="current_medication" rows="5" cols="50"> </TEXTAREA> </FIELDSET> </FORM> Trnh duyt s hin th nh sau:
71
Hnh VII.1. t qu v d VII.2. Cascading style sheet Style Sheets l mt c tnh quan trng m c th c dng trong HTML ng (Dynamic HTML). Mc d trang Web khng tht s cn phi c mt style sheet, nhng vic dng n c nhiu li ch. Trong phn ny, ta s lm quen v cng ngh style sheet dng nng cao vic thit kt v pht trin trang Web. VII.2.1. Inline Style Mt c tnh quan trng ca Dynamic HTML l cc style ng. Ta c th thay i style ca nhiu phn t HTML trn trang sau khi n c hin th trong trang. S thay i c th th hin bng cch p li tng tc ca ngi dng hoc s kin thay i trng thi (nh s kin thay i kch thc). C hai cch thay i style ca trang: Thay i style bn trong Vit cc scripts thay i style S dng cc inline style ta c th vit cc style ng m khng phi vit thm script vo trang. Mt inline style l mt style m c gn vo mt phn t c bit. Style khng h tr cho tt c cc phn t ca mt kiu hoc mt lp no . Mt inline style c nh ngha dng thuc tnh STYLE cho tag ca cc phn t. V d, nu ta
72
mun gn mu ca <H1> (Heading 1) thnh mu , ta c th gn thuc tnh STYLE ca th H1. <H1 ST LE=color:red> Nu ta mun dng script sa mt inline style bt k lc no, khi ta phi dng i tng style (Style Object). Style Object h tr mi thuc tnh m CSS h tr cho cc style. dng thuc tnh trong scrip: Loi b gch ni t tn thuc tnh style CSS Thay i ch u tin ca t sau gch ni thnh ch vit hoa V d, thuc tnh CSS font-weight thnh fontWeight trong DHTML. Hoc text-align thnh textAlign. Ta hy xem mt v d xa mi th. Ta s dng inline style gn cc thuc tnh ca nhn t <P>. Xem on code di y trong Internet Explorer: <HTML> <HEAD> <TITLE>Setting Properties</TITLE> </HEAD> <BODY> <P style = color:aqua; font-Style:italic; textAlign:center;> This paragraph has an inline style applied to it <BR> <P> This paragraph is displayed in the default style. <BR> <P>Can you see the <SPAN style = color:red>difference</SPAN>in this line </BODY> <HTML>
73
Hnh VII.2. S dung Inline Style VII.2.2. Gii thiu Style Sheet Style sheet l ni m ta qun l v iu khin cc style. Style sheet m t din mo v vic biu din ca mt ti liu HTML nh n s c a ra trn mn hnh, hoc in ra ngoi. Trong thc t, ta c th ngh v n nh mt khun mu cn c vo cc ti liu HTML ca ta. c bit ta c ng c th nh r v tr v s xut hin ca cc phn t trn mt trang v to cc hiu ng c bit. V d ta c th to mt style sheet nh ngha cho th <H1> l ch b o v nghing v mu xanh. Hoc th phn t <P> c a ra vi mu vi font Arial. Ta c th nh ngha thng tin style m ta mun trong mt v tr style sheet. Khi style sheet c th c lin kt tt c cc trang trong mt Web site to mt din mo thch hp, ng nht qua site bn trong. Ta c th nh ngha nhiu style sheet v lin kt chng thnh mt tp nh nhau ca cc trang Web mm do hn nhiu trong khi to cc trang Web. Mt trang Web c th khng c style sheet, nu khng c style sheet c xc nh, khi trnh duyt s s dng cch hin th theo quy c ngm nh ca n. V d, mt th <H1> lun c hin th cng mt nh dng, cc on v cc l c ng nh vy. D sao vic dng style sheet ta c th xc nh cch m th <H1> c hin th trong trnh duyt. V mt l thuyt, ta c th dng bt k cng ngh style sheet no vi HTML. D sao thc t th ch cng ngh Cascading Style Sheet (CSS) c cc trnh duyt
74
h tr tt. CSS l mt chun c pht trin bi World Wide Web Consortium (thng gi l W3C) dng trong cc trnh duyt Web. VII.2.3. Javascript Style Sheet Netscape h tr cc cascading style sheet. N c ng h tr style sheet m c vit trng ging JavaScript v dng m hnh i tng ti liu Document Object Model (DOM). Khi ra nh ngha mt style sheet ta c th khai bo kiu nh: text/CSS - - Trong trng hp ny n tm c php CSS. text/JavaScript Trong trng hp ny n tm c php JavaScript style sheet. Khi dng c php JavaScript trong phn t <STYLE>, ta phi xc nh thuc tnh cc th ca i tng ti liu. Trong m hnh i tng ti liu, cc phn t HTML c i x nh cc i tng. Mt i tng c cc thuc tnh v c th c truy nhp nh ngha din mo v style ca phn t. Mt thuc tnh tr v c th hot ng nh mt i tng vi mt tp cc thuc tnh. V d, mt trang Web c i x nh mt i tng ti liu. i tng ti liu c mt thuc tnh cc th. Thuc tnh cc th c mt i tng H2. i tng H2 c mt thuc tnh gi l color m c th c truy nhp v thay i khi c yu cu. Document.tags.H2.color = limegreen V d: <HTML> <HEAD> <ST LE T LE = text/javascript> tags.P.fontSize = 25pt; tags.P.marginLeft = 15pt; tags.H2.color = hotpink; </STYLE> </HEAD> <BODY> <H2>This is an H2 element with a style applied</H2> <BR> <P>This is a paragraph element </BODY> </HTML>
75
Tt c cc phn t khc u tha k t phn t <BODY>. Nu ta mun cung cp mt style mc nh cho tt c cc phn t trong mt ti liu, ta c th t style yu cu trong phn t <BODY>. on m sau chy trn trnh duyt netscape: V d: <HTML> <HEAD> <STYLE TYPE = text/javascript> tags.body.color=red; </STYLE> </HEAD> <BODY> <H2>This is an H2 element</H2> <BR> <P>This is a paragraph element </BODY> </HTML>
Hnh VII.3. H tr mt style bnh thng V d: <HTML> <HEAD> <ST LE T PE = text/css> BODY {color:limegreen} </STYLE> </HEAD> <BODY>
76
<H2>This is an H2 element</H2> <BR> <P>This is a paragraph element</P </BODY> </HTML> Nu ta phi t nhiu thuc tnh cho mt phn t, ta c th dng c php rt ngn li m: <HTML> <HEAD> <ST LE T PE = text/javascript> with (tags.P) { color=hotpink; fontStyle=italic; fontFamily=helvetica; fontSize=20pt; } </STYLE> </HEAD> <BODY> <P>This is a paragraph element</P> </BODY> </HTML> VII.2.4. Thut ng Style Sheet Mt cascading style sheet nh ngha cc style m c th c cung cp cho cc trang hoc cc phn t trang. Lut style - - Mt cascading style sheet l mt tp cc lut. Mt lut nh ngha nh dng ca ti liu. V d, ta c th to mt lut style quy nh tt c cc <H2> xut hin vi mu xanh. Style Sheet - - l mt danh sch cc lut. N c th c nhng vo trong ti liu HTML. Trong trng hp n c gi l mt style sheet nhng. Mt style sheet c ng c th c to nh mt file bn ngoi v lin kt vi ti liu HTML. Cc lut style c th c cung cp la chn cc phn ca mt trang Web. V d, ta c th quy nh mt on vn bn xut hin dng ch m v nghing. Vic ny c gi l khai bo bn trong style (inline style declaration) nh cc style c cung cp chia cc phn t HTML trn mt trang Web.
77
Cc lut - - Mt style sheet c th gm mt hoc nhiu lut. Phn u ca lut c gi l Selector. M i selector c c thuc tnh v cc gi tr kt hp vi n. V d: A RuleSelector{Declarationsproperty: value; property: value; } Phn ca lut km theo bn trong cc ngoc nhn c gi l Khai bo (Declaration). Mt khai bo c hai phn, phn trc du hai chm l thuc tnh (Property) v phn sau du hai chm l gi tr (Value) ca thuc tnh . Cc khai bo phn chia ra bi du chm phy (;). Ta khng cn t mt du phy chm sau khai bo cui cng. V d: H1 {color:blue} H1 l Selector, color:blue l khai bo. Bn trong khai bo: {Thuc tnh:Gi tr} Color l thuc tnh, blue l gi tr. Ta c th t m i lut tch ri bn trong cc th STYLE. Trong trng hp cc header ca ta s c lit k. V d: <HTML> <HEAD> <ST LE T PE = text/css> H1{ color:limegreen } H1{ font-family: Arial } { color: limegreen } H2{ font-family:Arial } </STYLE> </HEAD> <H1>This is the H1 element</H1> <H2>This is the H2 element</H2> <H3>This is the H3 element with its default style as displayed in the browser</H3> </HTML>
78
Ta c ng c th nhm cc lut. M i khai bo c phn chia bi mt du chm phy. V d: <HTML> <HEAD> <ST LE T PE = text/css> H1, H2{ color: limegreen;font-family: Arial;} </STYLE> </HEAD> <H1>This is the H1 element</H1> <H2>This is the H2 element</H2> <H3>This is the H3 element with its default style as displayed in the browser</H3> </HTML>
Hnh VII.4. Lut nhm Cc Selector Selector c th c nh ngha nh, mt xu m quy nh cc lut no h tr cho cc phn t no. C hai kiu c bn ca cc selector - Cc selector n gin (Simple selectors) - HTML Selectors - Class selectors
79
- ID Selectors - Cc selector ng cnh (Contextual selectors) a. Cc selector n gin (Simple selectors) S dng d nht. N m t mt phn t khng k v tr ca n trong cu trc ti liu. Quy nh H1 l mt selector n gin. V d: H1 {color:blue} HTML Selector Seletor ny s dng cc tn ca cc phn t HTML. Ch khc l ta loi b cc mc nhn. Nh vy, th <P> HTML tr thnh P. Trong v d di y, trong khi nh ngha style, phn t P khng c cc mc nhn. iu ny bi v, phn t <P> HTML c i x nh mt selector. V d: <HTML> <HEAD> <ST LE T PE=text/css> P{font-style:italic; font-weight:bold;color:limegreen} </STYLE> </HEAD> y cc ni dung ca <P> c xc nh. Phn t <P> c i x nh mt phn t HTML. <P>This selectors use the names of HTML elements. The only fifference is that you remove the brackets.</P> </BODY> </HTML>
Hnh VII.5. S dng mt HTML selector

80
Class Selector Cc selector ny dng thuc tnh CLASS ca cc phn t HTML. Mi phn t, m thy c, c mt thuc tnh CLASS m c dng gn mt quy nh. Thay v ta c th gn mt quy nh lp cho nhiu phn t ca mt kiu n khi ta mun hin th nhiu mu khc nhau. Trong trng hp ta s dng mt quy nh lp cho <H2>. CLASS Selector c bt u vi mt du chm (.) gi l k t c (flag), theo sau bi tn lp ca selector. S tt hn chn cc tn lp theo mc ch hn l mt tn m m t mu hoc style ca h. V d, ta c th mun on A xut hin dng ch nghing, cc on khc xut hin vi style khc, trong trng hp on A c th c mt quy nh lp.slant. V d: <ST LE T PE=text/css> .water { color: blue } .danger { color: red } </STYLE> <P class=water>test water <P class=danger>test danger <P>no style <BR> <EM class=danger>italic</EM>
Hnh VII.6. S dng CL SS selector

81
V d: <HTML> <HEAD> <ST LE T PE=text/javascript> classes.water.all.color = blue classes.danger.all.color = red </STYLE> </HEAD> <P class=water>test water <P class=danger>test danger <P>no style <BR> <EM class=danger>italic</EM> </BODY> </HTML> Khi dng c php JavaScript, ta khng th dng gch ni bn trong cc tn lp. Bi v JavaScript c gch ni nh mt du tr (-) m l mt ton t JavaScript. Cc tn lp khng th gm bt k ton t JavaScript no. Khi nh ngha mt style class: Ta c th xc nh cc phn t HTML no c th dng style ny Ta c th dng t kha tt c cho tt c cc phn t c th dng n. V d: <HTML> <HEAD> <ST LE T PE=text/css> all.hotpink {color:hotpink;} P.BLUE {color: blue; font-weight:bold;} H5.red1 {color:red; font-weight:bold;} </STYLE> </HEAD> <BODY bgColor = lavender> <P CLASS=BLUE>This paragraph is blue.</P> <P>This paragraph does not use the class BLUE.</P> <H5 CLASS=red1>This is an H5 element that tried to use the red1 class</H5> <P CLASS=hotpink>This paragraph is hotpink. <H5 CLASS=hotpink>This is an H5 element that has been allowed to use hotpink style.</H5> </BODY>
82
</HTML>
Hnh VII.7. Xc nh cc phn t V d: <HTML> <HEAD> <STYLE TYPE=text/javascript> classes.HOTPINK.all.color=hotpink; classes.BLUE.P.color = blue; classes.BLUE.P.fontWeight = bold; classes.red1.H5.color = red; classes.red1.H5.fontWeight = bold; </STYLE> </HEAD> <BODY bgColor = lavender> <P CLASS=BLUE>This paragraph is blue.</P> <P>This paragraph does not use the class BLUE.</P> <H5 CLASS=hotpink>This an H5 element that tried to use the red1 class</H5> <P CLASS=hotpink>This paragraph is hot pink. <H5 CLASS=hotpink>This is an H5 element that has been allowed to use hotpink style.</H5> </BODY>
83
</HTML> ID Selector Mt ID Selector dng thuc tnh ID ca mt phn t HTML. Mt ID selector c dng cung cp mt style cho mt phn t c th trn trang Web. V d, ta c th dng mt ID selector cung cp cho mt tiu <H2>. Khng c ngha l cng mt style s c cung cp cho s kin khc ca mt phn t <H2> trn cng mt trang, tr khi ch r. N tng t nh vic dng mt inline style do mt style c cung cp cho mt phn t xc nh. Mt ID selector c bt u bi mt du thng ( ). Khi dng c php JavaScript, ta phi dng thuc tnh ID. V d: <HTML> <HEAD> <TITLE> ID Selectors</TITLE> </HEAD> <BODY> <ST LE T PE=text/css> #control {color: red} </STYLE> <H2 id=control>Fire is this colour</H2> <BR> <P>This paragraph has no style applied </BODY> </HTML>
Hnh VII.8. S dng ID selector

84
V d: <HTML> <HEAD> <TITLE>Combining ID and Class Selectors</TITLE> </HEAD> <BODY> <ST LE T PE=text/css> .forest {color: green } .danger {color: red } #control {color: blue } </STYLE> <P class=forest>green things <P class=danger>fire hazards </P> <EM class=forest>more green things</EM> <BR> <EM class=danger>more fire hazards</EM> <UL> <LI class=danger>things that burn <LI class=forest>things that dont burn </UL> <P id=control>water</P> </BODY> </HTML>
85
Hnh VII.9. t hp ID v Class selector V d: <HTML> <HEAD> <TITLE>Combining ID and Class Selectors</TITLE> </HEAD> <BODY> <ST LE T PE=text/javascript> With (classes.forest.all) { Color = green; } With (classes.danger.all){ Color = red; } idss.control.color = blue; </STYLE> <P class=forest>green things <P class=danger>fire hazards </P> <EM class=forest>more green things</EM> <BR> <EM class=danger>more fire hazards</EM> <UL>
86
<LI class=danger>things that burn <LI class=forest>things that dont burn </UL> <P id=control>water</P> </BODY> </HTML> b. Cc selector ng cnh (Contextual Selectors) Mt contextual seclector cp n ng cnh ca cc phn t. lm mi th sng sa hn, i khi ta c hai phn t vi cng mt gi tr. Phn t chnh hoc phn t cha c mt phn t con bn trong n. Trong trng hp , thay i style ca phn t con ta cn dng mt contextual selector. iu ny da trn khi nim k tha, ni m phn t con k tha style c gn cho phn t cha. Mt v d thng thng l phn t <BODY>. Khi ta thm mt phn t vo m i phn t <BODY> cha bn trong nhng k tha ca <BODY>. <p><b></b></p> P l cha v B l con. By gi th xem n c iu khin ra sao? Sau khi ta khng mun tt c cc phn t trn trang Web xut hin cng mt style. Nh vy, ta phi ghi s k tha. Trong trng hp ta s phi thay i style ca phn t con. Xem on code di y: V d: <HTML> <HEAD> <TITLE>Contextual selectors</TITLE> </HEAD> <ST LE T PE=text/css> BODY { color:blue; Background:lavender; Font-family:Arial; } UL {color:red} </STYLE> Selector UL trong style sheet xc nh rng danh sch khng nh s mu , do tt c cc phn t LI s l mu tr khi n c ghi s k tha ny.
87
<UL> <LI> mangoes <LI> oranges <LI> apples </UL> Selector UL Selector trong style sheet xc nh rng cc ch mc danh sch s l mu . Chng tha k font Arial t khai bo BODY, mu t khai bo UL. Nu ta xc nh mt font family trong khai bo UL, n s ghi khai bo selector BODY. Khng c selector OL trong style sheet, do danh mc OL k tha cc thuc tnh ca n t selector BODY. <OL> <LI> managoes <LI> oranges <LI> apples </OL> </BODY> </HTML>
Hnh VII.10. Contextual Selectors Cc phn t khng c k tha trong style sheet nh cc selector s k tha cc thuc tnh ca phn t cha n. Trong v d di y, cc phn t B v I ang k tha cc thuc tnh ca selector P.
88
V d: <HTML> <HEAD> <TITLE>Contextual Selectors</TITLE> </HEAD> <ST LE T PE=text/css> BODY { color:blue; background:lavender; font-family:Arial; } P {color:hotpink} </STYLE> <BODY> <P> <B>I am having fun</B><BR> <I>This is fun too</I><BR> s tr v ca cc thuc tnh ca selector P, ng n li </P> I am having fun <BR> This is fun too </BODY> </HTML>
Hnh VII.11. Contextual Selectors

89
V d: <HTML> <ST LE T PE=text/javascript> With (tags.BODY){ color=blue; backgroundColor=lavender; fontFamily=Arial; } tags.P.color=hotpink; </STYLE> <BODY> <P> <B>I am having fun</B><BR> <I>This is fun too</I><BR> <P> I am having fun <BR> This is fun too </BODY> </HTML> Thay i cc lut Ta phi tm hiu chnh sa style ca mt phn t c th. C th cc k tha khi ta mun lm cc th trn phm vi ton cc, cho tt c cc trang trong web site. Ta c th mun chnh sa mt style nh ngha bi mt style sheet nh mt lp hoc style ton cc. Khi ta lm iu ny, s sa i c mt hiu ng gn sng. l, style ca tt c cc phn t trn trang m a ra style sheet c bit c thay i. V d, ta c mt nh ngha style sheet m xc nh hai style: Mt style ton cc m cung cp ton b phn t <H2> (green, arial font, normal size) Mt lp style chung gi l cnh bo (red, bold, italic) m s cung cp bt k mt phn t no m s dng lp . Hai v d sau y miu t vic dng style sheet gi l sheet1.css m c lin kt vi 1.htm u tin v sau l 2.htm
90
V d: sheet1.css: H2 {color:blue; font-style:italic;} .warning {color:red; font-weight:bold; fontstyle:italic;} Copy on code ny v ghi vi tn sheet1.css Sau trong file f1.htm ta s dng n nh sau: f1.htm <HTML> <HEAD> <TITLE>Changing the Rules</TITLE> <LINK REL=stylesheet HREF=sheet1.css T PE=text/css> </HEAD> <H2>Changing the rules is fun</H2> <BR> <P class=warning>Changing the rules may not be such fun <H2>The H2 element again<p> </HTML>
Hnh VII.12. S dng mt style sheet thng thng

91
Trong file f2.htm ta c ng s dng: f2.htm <HTML> <HEAD> <TITLE>Changing the Rules</TITLE> <LINK REL=stylesheet HREF=sheet1.css T PE=text/css> </HEAD> <H2>This document uses the sheet1 style sheet<H2> <BR> <P class=warning>Selecting this option could delete all your files <H2>The H2 element again<P> </HTML> VII.2.5. Cc ch thch trong Style Sheet Cc ch thch (comments) l mt c tnh m hu ht cc ngn ng pht trin u h tr. Ta c ng c th thm cc ch thch vo mt style sheet gip lu gi vt ca cc style m c h tr thng qua trang. Cc ch thch c bao quanh bi cc du /*. Khng c t lng vo nhau. Vi cascading style sheet, c php l: H1 {color:blue;} /*Cc phn t H1 mu xanh*/ tags.H1.color=blue; /*Cc phn t H1 mu xanh*/ Vi JavaScript style sheet, c php l: tags.H1.color=blue; //Cc phn t H1 mu xanh VII.2.6. Li ch ca cc Style Sheet Nu ta mun s dng iu khin ln hn vi cc trang Web ta nn s dng style. Ta c th s dng style sheet cho: a. Ghi cc ngm nh trnh duyt M i trnh duyt c cch th hin cc trang Web ring ca n. Ngy nay, cc chuyn vin pht trin khng c quyn vi trang c th hin trong mt trnh duyt. Ta khng bit c trnh duyt no trn ton cu c s dng. Vi cc style sheet ta c th ghi cc mc nh truyn thng ca trnh duyt v gn n thnh ca ring ta. V d, ta c th xc nh style trong phn t <H1> nh sau:
92
<H1><FONT SIZE=3 COLOR=AQUA> <B><I>Overriding the browser</I></B> </FONT></H1> b. B tr trang Cc style sheet c th c dng hin th font, thay i mu sc, m khng thay i cu trc ca trang web. Ngha l mt ngi thit k c th tch ri cc yu cu thit k trc quan t cu trc logic ca trang Web v nh a ch khc nhau. Vic dng cc o tng i trong style sheet ca ta, ta c th biu din ti liu trng p hn trn mn hnh ti bt k phn gii no. c. Cc Style Sheet c th c ti s dng Sau khi ta nh ngha thng tin style, ta c th nhng style sheet vo trong ti liu HTML. Ta c ng c th lin kt ton b cc trang trn web site ti style sheet. iu ny m bo rng cc trang web ca ta c mt din mo ng b khi chng c hin th. Nh vy ta c th c mt nn thng thng, logo cng ty v mt s thng tin chun trong mt style sheet. iu ny s m bo rng mt ci nhn thng thng v cm gic trn Web site. Hy tng tng nu c hng trm trang v ta phi nh ngha style ca m i trang ring bit. d. To mt ln Ta c th to mt style sheet v lin kt nhiu ti liu ti n. Tt c cc ti liu s c mt din mo. D sao quan trng nht l khi ta to mt thay i ti style sheet tt c cc ti liu lin kt ti style sheet s mang li s thay i. VII.2.7. Kt hp Style Sheet vi HTML C nhiu cch kt hp style sheet vi HTML - Phn t STYLE - Thuc tnh Style - Phn t lin kt Phn t STYLE (STYLE element) Phn t STYLE c chn vo trong phn t <HEAD> ca mt ti liu vi ton b lut t gia cc th m v ng. Khi cc trang c hin th, ch ti liu m c STYLE c nhng vo mi b tc ng. Th <STYLE> c mt tham s -TYPE. Tham s ny xc nh kiu Internet Media nh text/css.
93
V d: <HTML> <ST LE T PE=text/css> H1 {color:maroon;} P {color:hotpink; Font-family:Arial; } </STYLE> <BOD bgcolor=lavender> <H1>I am having fun</H1> <P>This is al about having fun with style sheets</P> </BODY> </HTML>
Hnh VII.13. S dng phn t STYLE <HTML> <HEAD> <ST LE T PE=text/javascript> tags.H1.color=maroon; with (tags.P){ color=hotpink; fontFamily=Arial; } </STYLE> </HEAD> <BODY bgcolor=lavender> <H1>I am having fun</H1> <P>This is all about having fun with style sheets</P>
94
</BODY> </HTML>
Hnh VII.14. S dng phn t STYLE Thuc tnh STYLE Thuc tnh STYLE c dng cung cp style sheet cho cc phn t ring l. Mt Style Sheet c th nh bng mt lut. S dng thuc tnh Style ta c th b qua phn t Style v t cc khai bo trc tip vo trong cc th bt u ring l. <H2 style=color:green; font-family: Arial> </H2> Thng thng, ta c th ch dng thuc tnh ny nu ta ang thay i style ca mt phn t c bit. Nu ta c nh cung cp cng mt style trn ton b ti liu, khi y khng tht s l cch hay t c iu ny. V d: <HTML> <P ST LE=color:blue; font-style:italic> This line will be blue and italicized. <P> This line will not be blue or in italics. </HTML>
95
Hnh VII.15. S dng thuc tnh STYLE Phn t lin kt (Link Element) Nu ta mun dng phn t lin kt, khi Style Sheet phi c tch khi ti liu. Khi a ch Web vi style sheet c th c thm vo. <LINK REL=stylesheet HREF=stylesmine.css Type=text/css > Phi c c thuc tnh rel=stylesheet hoc trnh duyt s khng ti style sheet. V d: Sheet1.css H2 {color.blue; font-style:italic;} P {color:yellow;} File.htm <HTML> <HEAD> <TITLE>Linking external style sheets</STYLE> <LINK REL=ST LESHEET T PE=text/css HREF=sheet1.css> </HEAD> <BODY> <H2>This is an H2 element</H2> <BR>
96
<P>This is a paragraph </BODY> </HTML> Sheet1.css tags.H2.color=blue; tags.H2.fontStyle=Italic; tags.H2.color=yellow; File.htm <HTML> <HEAD> <TITLE>A Good Title</TITLE> <LINK REL=ST LESHEET T PE=text/javascript HREF=sheet1.css> </HEAD> <BODY> <H2>This is an H2 element</H2> <BR> <P>This is a paragraph </BODY> </HTML> VII.2.8. Th t u tin ca cc style (Cascading) Khi ta ang dng nhiu k thut cung cp cc style (lin kt v nhng) vo trang Web, c mt cch trnh duyt quyt nh chn style no. Trnh duyt xp qua tt c cc lut c xc nh v chn mt lut quan trng nht. Style sheet cc b c u tin cao nht. Tip theo l style sheet ton cc vi style sheet lin kt ti pha trn. V d, nu mt d ng trn trang Web nh ngha <P> l mu qua mt style sheet lin kt, tt c cc on vn s l mu tr <P> trn, m s l mu xanh dng. <HTML> <LINK REL=stylesheet HREF=sheet1.css Type=text/css>
97
<P ST LE=color:limegreen> This line will be limegreen. <P> This line will not be limegreen. </HTML>
Hnh VII.16. Cascading style Thuc tnh Scripting font fontSize fontStyle textAlign textIndent verticalAlign border borderWidth borderBottom borderColor clip height left top zIndex
Thuc tnh Font properties
Tn CSS Font font-size font-style Text-align Text-indent vertical-align border border-width border-bottom border-color Clip heiht Left Top z-index
Text properties
Box properties
Positioning properties
98
Bi tp 1. To ra mt trang web mi dng ng nhp c giao din nh hnh di (s dng FORM).
2. To mt file css t mc nh kiu font v mu cho cc phn gii thiu ca bn.
99
CHNG VIII. CNG C SON THO TRC QUAN WEB (MICROSOFT FRONTPAGE 2003) VIII.1. To mt trang Web VIII.1.1. Bt u s dng FrontPage2003 Front Pages2003 cha tt c cc cng c m ta cn to, xut, v qun l mt World Wide Web site chuyn nghip, bt mt v th v.
Hnh VIII.1. Giao din ha Ta s thy giao din ha ngi dng ca chng trnh, giao din ny ging nh mt b x l vn bn vi mt vi nt, thanh cng c, v menu ph. Khi ta chy FrontPage ln u tin, chng trnh to mt trang Web mi ta c th bt u lm vic ngay lp tc. Khi lm vic, ta c th thy chnh xc din mo ca trang Web nh th no khi mt ngi no xem trang bng mt trnh duyt Web.
100
Nu ta mun xem Internet Explorer s hin th trang Web nh th no, ta c th nhn nt Preview trn thanh cng c Views. Khi ca s hiu chnh ca ta s c thay bng mt trnh duyt mini. ng trnh duyt mini v quay v cng vic ca ta, nhn nt Design trn thanh cng c . VIII.1.2. To mt trang t mt template By gi ta bit i cht v cc thanh cng c v ca s hiu chnh, ta c th sn sng to trang Web ring cho mnh: 1. M menu Start, sau tm v chy FrontPage2003. FrontPage m ra, mt trang trng s c to ra dnh cho ta 2. to mt trang Web mi, chn menu File New. Khung new m ra nm bn phi ca s nh trong hnh
Hnh VIII.2. Khung New 3. Click vo More page template trong phn New page. Hp thoi Page Template m ra, ta c th lit k tt c cc template ta c th s dng khi np trang Web mi.
101
4. tm hiu thm v mt template, click vo n mt ln v c phn Description ca hp thoi. M i trang Web Frontpage phi c da vo mt template 5. bt u vi trang hon ton trng, chn biu tng Normal Page; nu khng, chn mt trong cc biu tng khc 6. Click vo nt OK. Hp thoi Page Template ng li. FronPage s to trang Web mi v m n trong ca s bin tp. Ta c th bt u lm vic vi n ngay lp tc. VIII.1.3. To v lu mt trang mi Khi ta lu mt file ln u tin, ta c th chn mt tn no thch hp hn tn v tiu hin c. Vic chn mt tiu ngn gn, c tnh m t l quan trng v hai l do: N gip ngi ta s dng trang ca ta v n gip ngi khc tm thy n. Tiu trang c hin th trong thanh tiu ca trnh duyt Web. N c ng c s dng bi cc cng c tm kim. V d, khi ta tm kim v mt thng tin no trn Google ti http://www.google.com, m i trang Web xut hin c lit k theo tiu ca n. Ta t cho trang ca ta mt tn v tiu mi khi ta lu n ln u tin: 1. Click nt Save trn thanh cng c Standard. Hp thoi Save As s xut hin (hnh v di)
Hnh VIII.3. Ca s Save As

102
2. S dng hp thoi ny, tm v m th mc ni m ta s lu cc trang Web m ta to. 3. Trong hp text File name, t mt tn mi cho file, phi chc chn l n c phn m rng.htm (hoc.html) 4. Phn Page Title hin th tiu hin hnh. chn mt tiu mi, click vo nt Change Title. Hp thoi Set Page Title s m ra. 5. Tiu ca mt trang nn c tnh m t v xc tch. Nhp mt tiu mi trong hp text Page Title v click OK. Ta s quay tr v hp thoi Save As. 6. Click nt Save. Sau khi bn t tn v lu mt trang Web, ta c th lu li n mt cch nhanh chng bng cch click nt Save trn thanh cng c Standard. Tn file ta chn trc s c s dng li mt cch t ng. VIII.1.4. To mt mc Text trn mt trang Web c th c tch bit vi cc text khc bng cch chuyn i n thnh mt tiu chnh, mt mc bt mt ni bt vi text xung quanh. Nh gii thiu trong phn Tiu trong HTML trn, cc tiu chnh c sp xp theo kch c t 1 (ln nht) n 6 (nh nht), v chng c s dng cho vi cng mt mc ch nh mt mc trong mt bi bo, mt on vn bn, no . Chng c ng c th c dng lm cc tiu con vi mt mc ln hn, lm cc on trch dn c phng ln, v cho nhng mc ch khc nhm thu ht s ch . chuyn i text thnh mt tiu chnh, thc hin cc bc sau y: 1. Chn text bng cch k o chut ln trn n. Text c bt sng. 2. M menu Style xung trn thanh cng c Formatting chn mt trong su kch c tiu chnh, nh c chng minh ha trong hnh di
103
Hnh VIII.4. Hp thoi Style Formatting Text c chn (v bt k text trong cng mt on) s tr thnh mt tiu chnh. Kch c hin th ca mt tiu chnh ph thuc vo trnh duyt Web c s dng bi mt khch tham quan n site ca ta v cch n c cu hnh nh th no. Nhng theo lut chung, ta c th tin cy vo mt ht thng phn loi kch c t 1 n 6. Cc tiu chnh c th c s dng theo nhiu cch nht nh th chng l text. Mt iu ngoi l l mt tiu chnh phi chim khong ring ca n. thy trc tip c iu ny, hy bt sng mt t trong mt on v chuyn i n thnh mt tiu chnh. Mi th trong on tr thnh mt tiu chnh. VIII.1.5. Chn font v mu Vo thi im ny, text m ta thm vo mt trang Web s c hin th bng cch s dng cng mt mu v font mc nh nh trong Internet Explorer: VNITimes, 12 point, mu en. Ta c th thay i tng kha cnh ny ca text (v cc kha cnh khc).
104
Mt font c th c chn cho tt c cc text trn mt trang, cc on c th, thm ch phn ca mt on. Bt k font hin c trn my tnh ca ta c th s dng v s trng tuyt vi khi ta xem trang Web trn my tnh . Tuy nhin, nhng ngi tham quan n Web site ca ta s khng xem trang trn my tnh ca ta. Cc trang ca ta to s trng khc bit vi cc trang ca ngi khc. Khi ta ang to cc trang Web, cc font m ta chn c th s c sn cho cng nhiu khch tham quan ca ta cng tt. Nhiu font s ring bit cho mt h iu hnh c th - nhng ngi dng Windows, Mac, v Linux khng chia s nhiu font. Nu mt font khng c sn, mt font mc nh, ch ng hn Arial, Helvetica, Times Roman, hoc Verdana s c s dng cho font . Kch c ca font c th c ch nh lm mt kch c point hoc mt t l t 1 (nh nht) n 7 (ln nht). nh dng mt font trn mt trang Web m ta ang bin son, hy thc hin cc bc sau: 1. Chn on text mun thay i 2. Trn thanh cng c Formatting, s dng menu Font th xung chn mt font c th. Text c hin th ngay lp tc bng font mi. Ta ch c th chn mt font vi menu ny (xem bc 6 tm cch xc nh nhiu font) 3. Trn cng thanh cng c, s dng menu Size th xung xc nh mt kch c font. 4. chn mt mu text khc v thc hin cc thay i khc, chn lnh Format, Font. Hp thoi Font s hin ra (xem hnh v di)
105
Hnh VIII.5. Hp thoi Font 5. S dng menu Color th xung chn mt mu cho text. Nu ta chn Automatic thay v mt mu, mu mc nh c s dng. 6. xc nh danh sch cc font, nhp chng vo trong hp danh sch Font, c tch bit bi cc du phy. 7. xem chc nng ca mt hiu ng c th, hy chn hp kim ca n trong khung Effects. Khung Preview hin th din mo ca text mu vi nh dng c chn - k c hiu ng c chn. 8. Khi ta hi l ng vi din mo ca text, hy click nt OK. Bi v FrontPage cho ta thy dng v ca mt trang trng nh th no trong khi n c bin son, ta thy c ngay lp tc font v style c chn. Nu ta mun xem mt d ng text c nh dng nh th no, hy click vo n. Thanh cng c Formatting s c cp nht cho bit nhng g m ta p dng vo text .
106
VIII.2. T chc mt trang vi cc lin kt, danh sch v bng By gi ta quen thuc vi vic thm text vo mt trang Web, ta s sn sng thc hin bc k tip v t chc ni dung ca trang trnh by theo nhiu cch khc nhau. Cc danh sch (list) l cc nhm thng tin c lin quan c tch bit bng cc du bullet, s, hoc nhng k hiu khc. Cc bng (table) l cc hp cha text, ha hoc ngay c cc table nh hn. Siu lin kt (hyperlink) l cc lin kt c th click c th c s dng ti mt trang mi trong mt trnh duyt Web. VIII.2.1. Thm mt hyperlink vo mt trang Web Cc ti liu trn World Wide Web c th c ni kt li vi nhau bng cc hyperlink cc vng c th click ca mt trang Web nhm lm cho mt trang mi hoc mt loi file khc c m trong mt trnh duyt Web. Cc hyperlink thng c kt ti text, nhng iu ny khng phi l mt yu cu. Ta c th t mt lin kt trn bt k phn no ca mt trang Web: cc nh, nt, applet Java, cc phim QuickTime, cc file m thanh MP3. Cc text hyperlink c hin th theo mt cch nhm tch bit chng vi text khc trn mt trang. Cch thng thng nht m cc hyperlink c trnh by trong mt trnh duyt Web l bng cch gch di text c lin kt. Hnh di minh ha mt trang Web cha ba hyperlink c nhn bit bng cc ng gch di.
107
Hnh VIII.6. V d Hyperlink trong trang Web Mt hyperlink cha mt URL, y l dng vit tt ca Uniorm Resource Locator, nhng c mt cch n gin hn nhiu m t chng: mt URL l mt a ch dn n mt iu no trn Web. Cc trnh duyt Web thng hin th a ch ca trang m ta ang xem trong thanh Address ca trnh duyt Mt s URL mu bao gm trang ch Sams Publishing ti http://www.sampublishing.com, cng c tm kim ca Google ti http://www.google.com /unclesam, v server Knowledge Base FTP ca Microsoft ti http://ftp.microsoft.com Ti hyperlink c ng c th c s dng gi email mi - nhng a ch ny bt u bng mailto: v theo sau l mt a ch email. V d nh mailto: bernie@mail.house.gov to mt hyperlink, thc hin nhng bc sau: 1. Trn mt trang Web ang m trong ca s bin son, r chut ln trn phn ca trang m s c kt hp vi lin kt. Phn ca trang s c bt sng cho thy n c chn. 2. Chn Insert, Hyperlink (hoc clink nt Insert Hyperlink trn thanh cng c Standard). Hp thoi Insert Hyperlink xut hin (hnh v di)
108
Hnh VIII.7. Hp thoi Insert Hyperlink Cc hyperlink c th c kt hp vi cc file trn my tnh ca ta hoc bt k a ch trn World Wide Web: - Nu ta lin kt vi mt file trn my tnh ca ta, hy s dng hp thoi tm v chn file - Nu ta lin kt ti mt a ch Web, nhp a ch trong trng text Address (hoc dn n t Windows Clipboard, nu n c sao ch p t trnh duyt Web). Sau clink OK. Nu hp thoi Insert Hyperlink ng li, ta s quay tr v ca s bin son. Nu Hyperlink c kt hp vi text, n s c gch di trn trang Web. Sau khi thm mt hyperlink vo mt trang, ta c th thay i n bng cch click chut phi lin kt. Sau trn menu ng cnh va xut hin, chn Hyperlink Properties. Hp thoi Edit Hyperlink m ra. loi b hon ton mt lin kt, clink chut vo Remove Link.
109
Hnh VIII.8. Hp thoi Edit Hyperlink VIII.2.2. To mt danh sch Trong hu ht cc trnh duyt Web, cc on text c tch bit bng cc d ng trng v c canh th ng bn l tri, nhng khng c tht vo. Mt cch khc t chc text l bin i n thnh mt danh sch. Trn mt trang Web, cc danh sch l cc nhm mc lin quan c tch bit vi phn c n li ca trang bng cc s, bullet, hoc cc k hiu tng t. Ta c th s dng hai loi danh sch: - Cc danh sch c nh s, vi m i mc c mt s duy nht ng trc - Cc danh sch khng c nh s, vi m i mc c mt du bullet, du tr n hoc mt k t khc ng trc. Text ng trc l mt danh sch hai mc khng c nh s. K t . Tng t nh cc du bullet thng c hin th trn trang Web. chuyn i cc d ng text thnh mt danh sch, thc hin nhng bc sau y: 1. Chn text s c chuyn i thnh danh sch. 2. Click nt Unnumbered List hoc nt Numbered List trn thanh cng c Formatting 3. Khi mt danh sch c bin son, click phm Enter thm mt mc mi. Mt bullet hoc s xut hin trn mt d ng mi.
110
4. thay i cch mt danh sch c trnh by, t con tr trn mt mc danh sch, click chut phi v chn List Properties t menu tt va xut hin. hp thoi List Properties xut hin (hnh v di)
Hnh VIII.9. Hp thoi List Properties Hp thoi ny c th c s dng xc nh mt s khi u khc cho mt danh sch c nh s v din mo ca cc bullet trong mt danh sch khng c nh s. Cc danh sch c th c t bn trong cc danh sch khc. Hnh di minh ha mt vi danh sch c sp xp lng nhau.
111
Hnh VIII.10. V d v danh sch Nh c minh ha trn, cc bullet hin th k bn cc mc trong mt danh sch khng c nh s cung cp mt gi v danh sch m chng thuc v danh sch . Nu mt danh sch khng c nh s c t bn trong mt danh sch khc th hai danh sch c cc kiu bullet khc nhau. t mt mc danh sch bn trong mt danh sch khc, bt sng mc v click nt Increase Ident (trn thanh cng c) hai ln. y mt mc ra khi mt danh sch khc, bt sng n v nhp nt Decrease Indent hai ln. Ta c th t mt danh sch vo su bn trong mt danh sch khc bao nhiu cp ty . VIII.2.3. T chc mt trang vi cc bng Mt trong nhng iu lm bi ri nhng nh thit k trang Web ln u tin l trng thi hay thay i ca mt trang Web. Text, ha v nhng phn khc hay thay i ca mt trang Web di chuyn ph thuc vo cch chng c trnh by. Cng mt trang c th trng khc nhau ng k trong hai trnh duyt khc nhau trn cc my tnh khc nhau. Thm ch n c th thay i din mo trn mt my tnh nu ca s trnh duyt c nh li kch c.
112
Nhng ngi thit k Web c th kim sot c din mo ca cc thnh phn trang mt cch nhiu hn bng cch t chng trong cc bng. Cc bng l cc li hnh ch nht c chia thnh cc ring bit. Thng tin c th c t vo tng ny canh th ng chng theo chiu dc hay chiu ngang vi thng tin trong cc khc. Nu ta cm thy kh hnh thnh khi nim v mt bng khi n c lin quan n mt trang Web, hy ngh n mt lch treo tng:
Hnh VIII.11. S dng bng sp xp lch Mt lch ging nh trn l mt bng hnh ch nht cha mt nhm . Trn mt lch treo tng, m i ngy chim mt ring ca n trong bng. Tn ca m i ngy t SUN n SAT, c ng chim ring ca n. Cc bng c chia thnh cc ct dc v cc hng ngang. Lch treo tng c minh ha c by ct v su hng. Mc ch chnh ca cc bng l t chc thng tin vn phi c cn th ng vi cc hng v cc ct. Ta c th s dng cc bng hin th d liu ch ng hn nh bo co chi ph trong cc ct d c. Cn thng text trong bng Mc d cc bng hu dng cho vic trnh by trang, nhng chng c ng l mt cch hiu qu trnh by text trong cc hng v ct dng bng. Bi v ta c th to mt bng vi FrontPage, ta phi quyt nh bao nhiu hng v ct m n s cha, cc ct c m t tri sang phi v cc hng c m t trn xung di. Cc bng c hin th di dng mt li r ng khi chng c thm vo mt trang Web. Hnh di minh ha mt bng mi c to cha hai ct v bn hng.
113
Hnh VIII.12. To bng S hng v s ct trong mt bng quyt nh s ban u m n cha. Bng hnh trn cha 8 . Thm mt bng vo mt trang Mt bng r ng khi n c to trn mt trang Web. Sau ta in vo cc ring l ca n. thm mt bng vo mt trang, thc hin nhng bc sau y: 1. Vi cc trang m trong ca s bin son, click vo ni m bng s c chn. 2. Trn thanh menu chn Table Insert Table. Hp thoi Insert Table m ra nh c minh ha hnh di
114
Hnh VIII.13. Hp thoi Insert Table 3. Trong phn Size, s dng cc hp danh sch Rows and Columns xc lp kch thc ca bng. La chn m ta thc hin khng nht thit phi c nh. Ta c th thm v bt cc hng v cc ct ra khi bng khi ta lm vic vi n. Do , cc gi tr ban u khng quan trng. Phn Size xc lp cc hng, ct, v s trong bng, nhng n khng quyt nh bao nhiu khong trng m table chim trn trang Web khi n hin th. Mt bng thng chim cng nhiu phn ca trang cng cn thit hin th ni dung ca cc .
115
4. to lng khong trng m mt s s chim, chn hp kim Specify Width v chn mt n v o: a. i vi mt chiu rng c th, chn mt ty chn In Pexels v nhp chiu rng m ta mun vo trng text nm gn k b. xc lp chiu rng di dng t l phn trm ca khong trng c sn trn trang (c o t cnh ny sang cnh kia), chn ty chn In Percent v g nhp mt t l phn trm t 1 n 100 vo trng text n m g n k . c. Nu ta chn mt chiu rng 100%, bng s chim tt c m n c th chim. 5. xc lp chiu cao ca bng, lp li bc 4 vi trng Height. C thm ba cch tinh chnh mt bng l xc lp cc gi tr ng vin, khong cch m v khong cch ca n. ng vin (border) xc nh kch thc ca ng vin bao quanh bng. Nu n c xc lp sang 0, ng vin v tt c ng li ca n s bin mt. Cc ca bng s vn cn th ng mt cch chnh xc, nhng s khng r rng cho thy rng mt bng ang c s dng trn trang. Khong cch m (cell padding) l lng khong trng bao quanh ni dung ca m i . Nu ta tng padding t gi tr mc nh l 1, cc s tr nn ln hn trong khi ni dung ca n s vn gi cng mt kch c. Khong cch (cell spacing) l lng khong trng trong ng vin li gia . iu ny lm cho chiu rng v chiu cao ca cc trng li tr nn ln hn, nu ng vin c th nhn thy c. Khi khong cch ng tng, bng m rng trong khi cc vn gi cng mt kch c. 1. Trong hp thoi Insert Table, s dng cc hp danh sch Border, Cell Padding, v Cell Spacing xc lp cc gi tr ny khi cn thit. 2. Khi ta hon tt vic xc lp bng, click nt OK. Thm d liu vo mt bng Khi ta c mt bng trn mt trang, ta c th thm cc text vo bt k ca n: click con tr trong mt v bt u nhp. Ta c ng c th s dng cc lnh ct, sao ch p v dn hoc r v th in y mt .
116
Cc bng bt u vi tt c v hng c cng mt kch c v FrontPage c gng lm cho chng c cng mt kch c khi ta thm text. T bao bc xung quanh m p phi ca mt nh th n nm trn l phi ca mt trang. Khi ta in y mt bng, nhn phm Tab nhy n k tip nm bn phi (hoc hng k tip) hoc nhn cc phm Shift v Tab cng mt lc di chuyn theo hng ngc li. Mt iu khc thng xy ra nu ta nhn Tab khi ta sau cng trong bng ( hng di cng v ct nm tn cng bn phi): FrontPage to mt hng mi v di chuyn con tr vo u tin trn hng ny. iu ny cho ph p ta tip tc thm d liu mi vo mt bng ngay c nu ta nh gi thp s hng m ta cn khi n c to. thm mt hoc nhiu ct hoc hng vo mt bng, thc hin cc bc sau y: 1. Click mt nm k ni cc mi s c chn vo. 2. Trn thanh menu chn Table Insert Rows or Columns. Hp thoi Insert Rows or Columns xut hin (hnh di)
Hnh VIII.14. Hp thoi Insert Rows or Columns 3. Chn cc ty chn Columns hoc Rows 4. Chn s ct hoc hng chn trong hp danh sch Number Of. Chng c thm k bn c chn bc 1. 5. Trong phn Position, chn mt ty chn quyt nh chnh xc ni m cc ct hoc hng mi s c t . 6. Click OK.
117
Loi b cc hng hoc ct ra khi bng Cc hng v ct c ng c th b xa sau khi ta chn chng: 1. t con tr ln trn ng vin bng bn ngoi ca mt hng hoc ct m ta mun xa. Di chuyn con tr xung quanh ng vin n khi n thay i thnh mt m i tn nh mu en tr vo bng. 2. Click mt ln. Hng hoc ct theo hng ca m i tn c bt sng. 3. xa n, nhn phm Delete hoc click chut phi vo vng c bt sng v chn Delete Rows hoc Delete Columns t menu tt va xut hin. Thay i kch c ca mt bng Theo lut chung, FrontPage nh kch c ca mt bng tt c cc chim cng mt lng khong trng tr khi mt s trong chng cha text qu ln n n i khng th thc hin c iu ny. Mt cch d dng nh dng mt bng sao cho n chim t khong trng hn l thu nh n n chim lng khong trng ti thiu cn thit: click bt c ni no trn bng v chn (trn thanh menu) Table AutoFit to Contents. Ta c ng c th nh li kch c mt bng cc hng v ct c th c chiu rng pixel hoc t l phn trm c th: 1. Click chut phi vo mt trong cc trong hng hoc ct . 2. Trong menu tt va m ra, chn lnh menu Cell Properties. Hp thoi Cell Properties xut hin, hp thoi ny c th c s dng xc lp chiu rng ca mt theo cng mt cch nh mt bng c cu hnh.
118
Hnh VIII.15. Hp thoi Cell Properties 3. xc lp chiu rng ca , chn hp kim Specify Width, chn In Pixels hoc In Percent, v sau nhp mt gi tr vo trng text nm gn k . 4. i vi chiu cao, chn Specify Height v lp li cc hng dn bc 3. 5. Nu ta mun loi b mt gi tr chiu cao hoc chiu rng cho mt , xa du kim ra khi hp Specify Height hoc hp Specify Width. Nu cc khc trong hng hoc ct khng c xc lp cc gi tr, tt c cc c hin th vi cng mt kch c. 6. Click OK. FrontPage c th s dng cc kch thc mi ca quyt nh cc khc trong cng mt hng v ct s c nh kch c nh th no. Lut chung sau c p dng: Nu l ln nht trong hng hoc ct ca n, th cc khc s c m rng c cng mt kch c. Khi ta xc lp c kch thc cho mt bng c th, ta khng nn s dng li Table AutoFit to Contents nu khng ta s hy nhng thay i ca ta.
119
VIII.2.4. Hin th hnh nh trn mt trang Web Lm vic vi cc nh theo cc dng khc nhau Trc khi ta bt u lm vic vi hnh nh ha, iu quan trng l ta phi bit loi no ca cc nh dng ta nn s dng. S minh ha bng hnh nh c th c biu din trn mt my tnh theo hng chc dng khc nhau nhng ngi thit k Web cn quen thuc vi ba dng: GIF, JPEG, v PNG. Ta c mt vi trong s cc file ny trn my tnh ca Graphic Interchange Format (GIF) hoc Joint Photographic Experts Group (JPEG). Mt dng mi hn m n ang tr nn ph bin l Portable Network Graphics (PNG). Dng GIF Dng GIF cha cc nh c gii hn ch 256 mu. Dng ny l tng cho cc nh c nhiu mu ng nht (cc nt menu), cc nh ha nh (cc biu tng, qung co), v nhng hnh nh khc vn khng i hi chi tit r n t. Nu mt nh chp c hin th di dng GIF, u tin n phi c lm gim sao cho khng qu 256 mu xut hin khc nhau trong nh. Dng GIF h tr hai hiu ng c bit thng thy trn Web: trong sut v hot hnh. trong sut (transparency) l mt k thut nhm lm cho mt phn ca mt nh h a hp vi nn ca trang, nn c th l mt mu ng nht hoc mt nh. trong sut s lm vic bng cch ch nh mt mu trong mt nh GIF lm mu trong sut, mu ny s khng c hin th khi nh c hin th trn mt trang Web. thy c trc tip iu ny, hy xem hai nh GIF trn mt trang trong hnh di
Hnh VIII.16. nh trong sut v nh khng trong sut
120
Mt nh GIF c th c to ng bng cch hin th mt s nh GIF c lin quan theo trnh t. Nhng nh ny c lu tr cng vi nhau trong mt file n vi thng tin v khong thi gian bao lu hon thnh mt nh, th t ca s hin th, v s ln lp li qua trnh t. Chc ta thy hng trm nh ng khi ta duyt Web; chng c ng l mt cng ngh m cc nh qung co a thch. Dng JPEG Dng FPEG cha cc nh c cht lng nh chp vn c th cha hng ngn mu khc nhau. lm cho kch c file tr nn hp l, lm cho nh ti nhanh hn trn Web hoc c truyn ti bi phng tin khc, JPEG s dng mt k thut n n d liu nhm lm cho kch c file nh hn nhng b li cht lng nh b mt. Khi mt file JPEG c to ra bi mt camera k thut s, my qu t hoc phn mm, th ngi ta cn t c s cn bng gia kch c v cht lng. r n t v chiu su nh cng cao th kch c ca file cng ln. Do n n, JPEG thng l la chn thch hp nht cho cc nh phc tp vi s mu ln. Cc file JPEG thch hp i vi vic hin th cc nh chp c qu t vn khng c cc vng mu ng nht. JPEG thng l la chn k m cho cc nh vi cc vng ln c mt mu n. Do cch x l vic n n, cc ng gn sng (thng c gi l rng ca) s xut hin trng m hn. Dng PNG Dng PNG c gii thiu thay th v ci tin dng GIF v JPEG. N c th c s dng hin th cc nh c 256 mu hoc t hn, ging nh mt dng GIF (dng PNG-8), cc nh c hng ngn mu, ging nh mt dng JPEG (dng PNG-24). Cc nh PNG c ng c th h tr trong sut v cc hiu ng c bit khc. Nhng nh thit k Web site thong th trong vic chn PNG bi v n khng lun c h tr trong cc trnh duyt Web. Internet Explorer 4 v Netscape Navigator 4 nhng n bn u tin ca mt trong hai chng trnh ny vn c th hin th cc nh ha PNG m khng cn tr gip ca mt plug-in (mt chng trnh m rng cc tnh nng ca mt trnh duyt).
121
Ngy nay, cc phin bn hin hnh ca nm trnh duyt thng dng nht Internet Explorer, Netscape Navigator, Mozilla, Opera, v Safari - h tr PNG, mc d hu ht cc trnh duyt khng h tr tt c cc tnh nng ca n. Chn dng thch hp Bng cch s dng FrontPage, ta c th thm cc nh ha sang mt site theo nhiu dng khc m ta c th quen thuc: BMP (Windows Bitmaps), EPS (Encapsulated PostScript), RAS (Raster), TGA (Truevision Targa Graphics Adapter), Tiff (Tagged Image File), v WMF (Windows Meta File). Khi ta thm mt trong cc nh ny vo mt trang v sau lu n, FrontPage s chuyn i n sang dng GIF nu n cha 256 mu hoc t hn, hoc dng JPEG nu n cha nhiu hn. Phn mm khuyn khch ta s dng GIF hoc JPEG. Quy tc chung l s dng JPEG cho cc nh chp v s dng GIF hoc PNG cho mi th khc. Khi mt nh JPEG phc tp hoc ln n mc kch c file ca n l 30KB hoc ln hn, ta hy lm cho nh tr nn n gin hn hoc thay th n bng mt nh khc. iu ny ngn nh chim mt lng thi gian qu nhiu xut hin khi mt ngi dng Web xem n trn mt trang bng mt mi lin kt modem quay s. Thm mt nh vo mt trang By gi ta bit i cht v cc nh ha, ta sn sng t chng ln trn cc trang Web ring ca ta. Trong FrontPage, hnh nh c thm vo mt trang Web khi n ang c hiu chnh. Ta c th thc hin iu ny bng nhiu cch: Ta c th r mt file t mt th mc hoc Windows Explorer; sao ch p n sang Clopboard v dn n trn trang; chn Insert Picture From File; hoc nhp mt nt. Ty chn sau cng l d nht, do n c s dng trong phn ny. thm mt nh vo mt trang Web, hy thc hin cc bc sau: 1. M trang m ta mun hiu chnh 2. t con tr ti v tr trn trang ni nh s hin th 3. Trn menu h thng, chn Insert Picture From File trn thanh cng c Standard.Hp thoi Picture xut hin. S dng hp thoi ny tm th mc cha nh. Ta khng th nh tn ca nh m ta mun phi
122
khng ? Hy click vo bn phi ca nt Views v chn Thumbnails t menu bt ln va xut hin. Cc nh c kch c thu nh ca m i hnh nh s c hin th, nh c minh ha trong hnh di.
Hnh VIII.17. Chn nh 4. Chn nh v click insert. File c hin th nh mt phn ca trang trong ca s hiu chnh, cho ph p ta xem din mo ca n ngay lp tc. Khi mt nh c t trn mt trang, phn ni dung trang s di chuyn dnh ch trng. Text v cc thnh phn trang khc chy xung quanh hoc bn di trang. di chuyn nh, nhp k o r n n mt v tr mi. Mc d dng nh nh c trn vi trang Web, nhng n vn nm trong file ring ca n file m ta chn bng hp thoi Picture. Trnh by hnh nh vi text Ln u tin ta thm mt nh vo mt phn ca text trong FrontPage, c th ta khng hi l ng vi din mo ca n. Text chy mt cch vng v t m p ca nh, li nhiu khong trng xung quanh n.
123
Vic chn mt kiu bao bc (wrapping style) mi cho nh s x l vn ny. Kiu bao bc l mt xc lp click chn nh s c hin th nh th no tng ng vi text nm gn k v ni dung khc trn trang. chn kiu bao bc nh, hy thc hin cc bc sau: 1. Click p vo nh. Hp thoi Picture Properties m ra (xem hnh di)
Hnh VIII.18. Hp thoi Picture Properties 2. Nu tab Appearance khng xut hin, click tn tab a n ln pha trn. 3. Chn mt trong cc ty chn nm bn di tiu chnh Wrapping Style click biu tng nm trn cc nhn None, Left, hoc Right. Cc biu tng cho bit cch nh s c t nh th no tng ng vi text. 4. thm hoc gim lng khong trng gia cc cnh ca nh v text, hy iu chnh xc lp Horizonal Spacing. 5. b sung hoc loi b mt s khong trng nm trn nh v y, hy iu chnh phn Vertical Spacing.
124
6. Click OK. Khi hp thoi Picture Properties ng li v ta s thy kt qu trn trang ca ta. Kiu bao bc ca mt nh ch quyt nh cch n c hin th bn text nm gn k. thm mt khong d ng trng trc v sau mt nh, hy t con tr nm bn tri hoc bn phi ca nh v nhn Enter chn mt ngt on. chn mt ngt d ng nh hn, hy nhn Shift + Enter. Mt cch khc to ty bin v tr ca mt nh l s dng xc lp cn chnh ca n. Xc lp ny tng t nh kiu bao bc, quyt nh cch mt nh s c cn th ng k bn cc nh v text khc c chiu bao bc. xc lp kiu cn chnh ca mt nh, hy thc hin cc bc sau: 1. Click p vo nh. Hp thoi Picture Properties m ra. 2. Nu tab Appearance khng xut hin, click tn ca tab a n ln pha trn. 3. Bn di tiu chnh Layout, chn mt trong cc ty chn ca hp danh sch Alignment: a. Left alignment v Righe alignment lm cho nh xut hin pha bn tri hoc bn phi ca text xung quanh. b. Top alignment cn th ng cc m p nh ca nh v text. Bottom alignment cn th ng cc m p y ca nh v text. y c ng l kiu cn chnh mc nh cho mt nh mi. c. Moddle alignment cn th ng phn chnh ca nh so vi y ca text. d. Absolute Moddle alignment cn th ng phn chnh gia ca nh vi phn chnh gia ca text. C nhiu ty chn khc, nhng tt c chng tng t nh su ty chn ny. Ta c th s dng cc ty chn cn chnh text, hnh nh, hoc bt c nhng g khc vn nh hin th. 4. Click OK.
125
Thm mt lin kt (Hyperlink) Bt k text hoc ha trn mt trang Web c th c mt hyperlink c kt hp vi n. Lin kt ny c th tr vo mt trang hoc mt file trn cng mt Web site, mt site trn Web, hoc bt k ngun ti nguyn khc vn c mt a ch internet. thm mt hyperlink vo mt nh, hy thc hin cc bc sau: 1. Click vo nh. Cc nm nh xut hin ti cc gc v cnh ca nh biu th rng n c chn cho vic hiu chnh. 2. Click nt Insert Hyperlink trn thanh cng c Standard. Hp thoi Insert Hyperlink m ra, nh c minh ha hnh di. Hp ny c th c s dng chn nhiu loi lin kt: a. Nu lin kt dn n mt trang Web hoc file khc trn my tnh ca ta, s dng hp thoi ny tm v nhp file . Tn ca n xut hin trong trng Address. b. Nu lin kt l mt a ch email, click biu tng Email Address trong khung Link To. Hp thoi s hin th trng Email Address v trng subject. in thng tin vo nhng trng ny. c. Nu lin kt l mt a ch Web khc, nhp n vo trng Address (hoc sao ch p a ch t thanh Address ca trnh duyt Web v dn n vo trng.
126
Hnh VIII.19. Hp thoi Insert Hyperlink 3. m trnh duyt v tm ng a ch, click nt Browse the Web (hnh trn). 4. Click OK. Thm mt ch thch Mt trong nhng cch lm cho cc trang Web ca ta tr nn kh dng hn l cung cp cho m i nh mt ch thch nhm m t nh. Khi mt trang ang c ti xung, mt s trnh duyt Web hin th ch thch ca mt nh trong vng c chim bi nh . Nu nh ang c s dng l mt nt menu hoc cho mt s mc ch nh hng no , ch thch cho ph p nhng ngi dng ca ta tn dng n trc khi nh c ti xung. Nhng ngi s dng mt kt ni Internet chm (56.6K hoc thp hn) s cm kch cch c x tao nh ny, c bit nu nh ln. Cc ni dung m t text c ng l cch duy nht m mt trnh duyt Web ch text ch ng hn nh Linux c th lm cho bt k nh tr nn c ngha. Nu mt nh phi c np hng Web ca ta, th n nn c text m t mc ch ca n.
127
Bng cch cung cp text ny, ta cung cp thm thng tin v cc ni dung ca trang m cc cng c tm kim c th tn dng. Dch tm kim Google Images ti images.google.com, hin th cc nh ph hp vi mt hoc nhiu t kha, tn dng cc ch thch. Ta c ng cung cp thng tin cn thit cho nhng ngi dng b khuyt tt s dng Web site ca ta, nhm tang kh nng truy cp. Mc ch truy cp, l mt trong nhng ch nng bng nht ca nhng nh thit k Web ngy nay, l bo m rng Website c th c s dng vi cc b c mn hnh ha cng ngh h tr khc. Bng cch cung cp ch thch cho m i nh - c bit cc nh c kt hp cc hyperlink - ta m rng nhng ngi xem tng lai i vi mt site. thm mt ch thch vo mt nh hoc hiu chnh mt ch thch hin c, hy thc hin cc bc sau: 1. Hy click p nh. Hp thoi Picture Properties s m ra. 2. Click tab General a n ln pha trc. Tab ny c th c s dng thay i hoc thay th mt nh, chn mt hyperlink, hoc cung cp mt ch thch v mt thng tin m t khc. 3. Nhp mt ch thch ngn gn cho nh trong trng text (hoc thay th ch thch hin c, nu c), nh c minh ha trong hnh di
128
Hnh VIII.20. Thm mt ch thch vo mt nh 4. Click OK. xem trang ca ta trng ging nh th no m khng c nh, hu ht cc trnh duyt Web c th c cu hnh ngng hin th chng. Trong Internet Explorer 6, hy thc hin cc bc sau: 1. Trn menu h thng chn Tool Internet Options. Hp thoi Internet Options c m ra. 2. Click tab Advanced a n ln pha trc. 3. Cun xung danh sch Setting cho n khi ta tm thy phn Multimedia. 4. Xa du kim k bn hp kim Show Picture. 5. Click OK. Cc nh s khng c hin th trong cc trang Web m ta ti sau im , mc d mt s trang trong cache hoc b nh m vn c n cung cp cc hnh nh ha. Ta c th m li ch hin th nh bng cch chn hp kim Show Pictures. Thm mt Clip Art vo mt nh
129
FrontPage 2003 c mt th vin cha hng ngn nh clip art, nh chp, v cc file a phng tin khc. Nhng nh ny c th c kt nhp vo trong cc trang Web ring ca ta. Th vin clip art cha FrontPage v bt k sn phm Of-fice khc m ta s dng, ch ng hn nh cc phin bn trc ca FrontPage. N c ng c th cha mt s nh ha, nh chp k thut s, v cc nh khc trn my tnh ca ta Microsoft Clip Organizer c nh km vi Office tm kim trn my tnh ca ta dnh cho c file nh ha v a phng tin khc. tm v thm clip art vo mt trang, thc hin cc bc sau: 1. t con tr ti v tr ni nh s c chn vo. 2. Trn menu h thng chn Insert Picture Clip Art. Khung Clip Art m ra nm bn phi ca b bin son (xem hnh di). Ta c ng c th c hi xem Clip Organizer c nn c lp hng mc cho c c file a phng tin trn h thng ca ta hay khng. iu ny mt nhiu thi gian v c th c hin vo bt c lc no, do khng cn phi thc hin n ngay lp tc.
Hnh VIII.21. Tm kim Clip rt

130
3. Trong khung Clip Art, nhp mt hoc nhiu t vo trong hp Search For nhm m t loi nh m ta tm. 4. thc hin mt tm kim, ta hy s dng hp danh sch Search In. FrontPage c th tm kim tp hp clip art ring ca n, nh Office khc, cc clip m ta t chc, hoc tt c ba th ny cng mt lc. 5. thu hp thm n, hy s dng hp danh sch Results Souuld Be. Th vin clip art cha cc loi a phng tin: cc bn v clip art, cc nh chp, phim v m thanh. Ta c th tm kim mt loi tt c chng. 6. Click nt Go. Cc file ph hp vi vic tm kim ca ta c hin th trong khung. Cc nh thumbnail ca m i nh clip art v cc nh chp c hin th - s dng thanh cun xem chng. Hnh trn th hin kt qu tm kim. 7. Khi ta tm c mt nh m ta thch, ny click p vo n, nh s xut hin trn trang, thng vi kch c ln hn nhiu so vi nhng g m ta mong mun. Ta s c th nh li kch c nh ny khi cn thit. Clip Art t th vin thng ln hn nhiu so vi nhng g ta mong i. iu ny l do phn thit k bi v ta c th d dng thu nh mt nh sang mt kch c m ta mun m khng lm mt cht lng nh ca n. Vic tng kch c v duy tr mt cht lng th kh hn nhiu (thng khng thc hin c). Khi ta thm clip art vo mt trang, nh gc vn nm trong th vin. Nhng thay i m ta thc hin vi nh s khng thay i bn gc ca nh. Nu ta khng th tm thy clip art ph hp trong th vin c nh km vi FrontPage 2003, th cc file a phng tin khc dnh cho cc trang Web ca ta c sn trn Web site Microsoft Office Online. i n , hy thc hin cc bc sau: 1. Nu khung Clip Art khng c m, hy chn Insert Picture Clip Art. 2. Click lin kt Clip Art on Office Online nm cui cng. Trnh duyt Web ca ta m ra ti Microsoft Office Clip Art and Media site, ni ta c th duyt theo tng hng mc hoc tm kim cc t kha c th. Cc file m ta chn t Office Online c nhp t ng vo th vin clip art ca FrontPage 2003.
131
Thay i kch c ca mt nh Kch c ca bt k nh no trn mt trang Web u c th thay i c c tng n mt kch c ln hn, c thu nh thnh mt kch c nh, hoc ngay c c bin dng chiu rng c mt t l khc vi chiu cao. Kch c ca mt nh c th c thay i theo hai cch trong FrontPage. Ta c th nh li kch c nh thc, nhm thay i file cha nh, hoc thay i kch c hin th ca nh. Cc nh c biu din trn mt trang Web c th c hin th cc kch c ln hn hoc nh hn kch c thc ca n, iu ny lm cho cng mt nh c trnh by vi nhng kch c khc nhau trn hai trang khc nhau ca mt Web site. Bi v l do ny, nn iu quan trng l ta phi lu n s khc bit gia vic nh li kch c mt nh v vic ch hin th nh vi mt kch c khc, nhm khng thay i file ha gc. Nu ta khng bao gi hin th nh vi mt kch c ln hn, th vic nh li kch c nh l mt la chn tt hn v n s ti nhanh hn khi mt khch tham quan xem trang Web ca ta. (Nu nh khng bt ngun t th vin clip art, hy lu mt bn sao ca nh ln hn bt k v tr no). Cc nh clip art trng p hn khi chng c nh li kch c mt cch c nh thay v c hin th vi mt kch c ln hn bi v FrontPage lm mt cng vic hiu chnh nh no trn file lm nhn cc m p v lm r n t cc chi tit. Tin trnh ny c gi l vic ly li mu (resampling) nh. nh li kch c mt nh, thc hin cc bc: 1. Click vo nh. Cc nm chn xut hin xung quanh cc m p ca nh, nh c minh ha trong hnh di. Khi ta t chut ln trn mt trong cc nm ny, con tr bin thnh mt m i tn, iu ny biu th rng ta c th k o cc nm xung quanh. 2. thay i kch c ca nh, k o mt nm n mt v tr mi: a. thay i chiu cao, gi nm ti phn chnh gia ca nh hoc y ca nh. b. thay i chiu rng, gi nm ti phn chnh gia ca cnh tri v phi.
132
c. thay i kch c trong khi duy tr chiu rng v chiu cao, gi bt k gc no. nh thay i kch c khi cc nm c di chuyn, cho ph p ta xem trc vic thay i trc khi n c hon tt. 3. Nh nm. Mt hp nh xut hin k bn nh. Click hp ny m mt menu th xung vn quyt nh nh s c nh li kch c nh th no. 4. Chn Only Modify Size Attributes thay i kch c hin th ca nh. 5. Chn Resample Picture to Match Size nh li kch c nh mt cch c nh. thay i kch c, hy k o hp n mt v tr mi lm cho nh ln hoc nh hn, Sau khi clip art c thm vo mt trang, n c th c xem nh bt k nh khc. Ta c th di chuyn n v ng quanh, thm mt ch thch, v thc hin nhng thay i khc. VIII.2.5. To mt Web site mi trn ta c th thc hin cc cng vic thao tc n l trn mt trang Web. By gi ta s tm hiu v hc cch to mt Web site mi ra sao. Vic nhp (importing) cc file tr nn c bit tin li nu ta c mt s ti liu c to bng Microsoft Word hoc chng trnh khc m ta mun a ln World Wide Web. To mt Web site mi FrontPage cung cp nhiu tnh nng nhm gip ta d dng to, qun l, v xut cc Web site. Cc site c qun l bi FrontPage c t chc vi vic s dng cc file th mc ca my tnh. Mt site chim mt th mc chnh v mt s th mc con, m i th mc con phc v mt mc ch khc nhau. Khi mt th mc c ch nh lm mt th mc chnh cho mt site, th n khng c s dng cho bt k site no khc na. Khi FrontPage c ci t, mt th mc My Web Sites c to bn trong My Documents thuc my tnh ca ta. y l mt ni tt lu tr cc th mc ring l m s cha cc site ta to ra. to mt Web site mi ngay t u, chy FrontPage v thc hin cc bc sau:
133
1. Trn menu h thng chn File New. Khung New m ra nm dc theo cnh phi ca giao din FrontPage, k bn ca s ni cc trang Web c bin son. 2. Click hyperlink More Web Site Template.
Hnh VIII.22. Hp thoi Web Site Templates Cc Web site c to trong FrontPage bng cch s dng cc template, cc phin bn d tr ca mt s Web site m ta c th to ty bin. Ta s Tm hiu k hn trong phn sau. 3. Chn biu tng ca template On-Page Web Site, template ny c s dng to mt site n gin, khng cha g c ngoi tr mt trang Web trng. K tip, ta c th to mt th mc mi trn my tnh ca ta ni cc site s c lu . 1. Click nt Browse. Hp thoi New Web Site Location m ra, nh c minh ha trong hnh di.
134
Hnh VIII.23. Hp thoi New Web Site Locations 2. M i Web site c qun l bi FrontPage phi c cung cp bi th mc ring ca n. Trc khi ta c th thc hin iu , hy tm v m th mc ny ni ta s lu gi th mc ny mt v tr thch hp l th mc My Web Site bn trong My Documents. 3. to mt th mc cho site mi ca ta, hy click nt Create New Folder, c minh ha trong hnh trn. Hp thoi New Folder m ra. 4. Nhp tn th mc mi trong trng Name v click nt OK. Th mc c m v hin th trong menu Look In th xung ca hp thoi New Web Site Location. m mt trang Web trong ca s bin son, click p file. Click p index.htm m trang ch ca site va mi c to hiu chnh. quay tr v khung xem Folder VIII.2.5.Khai thc site mi Khi ta to mt Web site mi, FrontPage s thm tt c file v th mc cn thit k vo th mc chnh ca site. cho ta mt trang r rng v nhng g m site cha, n c hin th trong khung xem Folders, c minh ha hnh di. (C th ta khng nhn thy khung nhn Folder List nm bn tri khung nhn Folders).
135
Hnh VIII.24. Khung nhn Folders Nh bit, Giao din ngi dng ca FrontPage thay i ph thuc vo nhng g m ta ang s dng n lm vic. Ta c th lm vic trn mt trang trong ca s bin son trong khung xem Design v kim tra n trong mt trnh duyt Web trong khung nhn Preview. chuyn i t mt khung xem ny sang mt khung nhn khc, click thanh Views cui m p ca giao din. Khung nhn Folders lm ging nh mt file th mc - ta c th k o v th cc file di chuyn chng xung quanh, v ta c th i tn hoc xa chng (click chut phi vo file v chn Rename hoc Delete t menu tt). m mt trang Web trong ca s bin son, click p vo file. Click p vo index.htm m mt trang ch ca site va mi c to hiu chnh. quay tr v khung nhn Folders, click tab Web site nm trn ca s bin son hoc chn Views Folders Thm mt trang mi vo mt Site Ta bit rng FrontPage c th c s dng to v hiu chnh cc trang Web vn khng phi l mt phn ca bt k Web site no.
136
Nhng trang ny c th c thm vo mt site, nh c cp phn k tip. Ta c ng c th to mt trang mi vn c thm vo site m ta ang hiu chnh: 1. Trn menu h thng chn File New m khung New nu n cha c m. 2. Chn loi trang ta mun to: i vi mt trang hon ton trng, click hyperlink Blank Page. i vi cc loi trang khc, click lin kt More Page Templates. Hp thoi Page Templates xut hin, lit k cc loi template m trang mi c th c da vo . Chn biu tng ca template m ta mun v lick OK. Trong th mc chnh ca site, FrontPage to mt trang mi bng cch s dng template v t cho n mt tn ch ng hn nh new_page_1.htm hoc new_page_2.htm. Tn trang s c mt k t du sao (*) theo sau khi n cha nhng thay i cha c lu. Click nt Save trong thanh cng c Standard lu file ang hin th trong ca s bin son. Trn menu h thng chn File Save All lu tt c cc file ang m hiu chnh. ng mt Web site, chn File Close. Nu bt k cc trang c hiu chnh cha c lu, mt hp thoi c m ra dnh cho m i trang hi c mun lu file hay khng. Click Yes lu file hoc No loi b cc thay i. Nhp cc file vo mt site World Wide Web c th trnh by cc loi ti liu khc ngoi cc trang Web: - Cc file nh ha dng GIF, JPEG, PNG, v cc dng khc - Cc file m thanh ch ng hn nh cc file WAV, MIDI v MP3 - Cc file Movie theo dng AVI, MOB, MPD, v QuickTime - Cc chng trnh Macromedia Shockwave v Flash, v cc chng trnh tng tc khc. Khi ta to mt site mi, th mc ca n s cha mt th mc con images trong ni hnh nh ca mt site c th c lu tr. Nu ta ang lm vic vi cc loi media khc, ta c th mun to cc th mc dnh cho chng - ch ng hn nh sound cho bt k file m thanh m ta ang s dng. Mt cch kt hp nhng file media ny v cc file khc vo trong site ca ta l nhp (import) chng vo trong site:
137
1. Vi site ang m, chn File Import. Hp thoi m ra, lit k cc file m ta chn nhp vo site. Nu ta cha nhp, th danh sch r ng. 2. Click nt Add File. Hp thoi Add File to Import List m ra.
Hnh VIII.25. Hp thoi dd File to Import List 3. S dng hp thoi ny tm v m th mc cha file . Sau click file. File c lit k trong hp thoi Import. 4. Click Add File chn mt file khc nhp, hoc click OK nhp cc file c chn vo site ca ta. Cc file c nhp tr thnh mt phn ca site. Bt c khi no ta sao ch p site sang mt th mc mi hoc xut bn n ln World Wide Web, file s c a vo. Mt file nhp c th c k o n mt th mc khc thuc site ny t khung nhn Folders hoc khung Folder List. Xa mt site Mt Web site c qun l bi FrontPage c th b xa theo hai cch, mt s khc bit cc k quan trng m ta cn lu trc khi xa mt site.
138
Cch th nht xa mt site l loi b n hon ton: iu ny s xa sch th mc cha site, tt c cc th mc con ca n, cng tt c cc trang, hnh nh, v cc file khc vn to nn site. Cch th hai l ch xa cc file v th mc m FrontPage s dng qun l site, li nguyn vn mi th khc. Khi ta lm vic trn mt Web site bng FrontPage, phn mm to ra mt s th mc v file c s dng nhm bo tr site (v d: FrontPage theo di khi no tng file ca site c xut cui cng t my tnh ca ta ln World Wide Web). Vic xa thng tin FrontPage ca site s ch xa cc file v th mc m FrontPage s dng hu cnh qun l site. Mi th khc trang, hnh nh v file khc khng b loi b. Mt site khng c ni dung FrontPage vn c xem mt cch bnh thng bng mt trnh duyt Web nhng ta s khng th m n hiu chnh trong FrontPage. Ta c th m cc trang ring l trong site hiu chnh, nhng ta khng th p dng mt theme vo mt site, thm cc th mc chia s vo nhiu trang hoc p dng bt k tnh nng khc c lin quan n ton b mt site. xa mt vi hoc tt c cc file trong mt site, hy thc hin cc bc sau: 1. Nu site khng c m, trn menu h thng chn File Open Site. Hp thoi Open xut hin, hy s dng n chn th mc chnh ca site, v click Open. 2. Nu danh sch th mc khng c hin th, hy m n: Click View Folder List. 3. Click chut phi vo tn ca site d ng trn cng trong menu th mc v trong menu tt va c m, hy chn lnh Delete (nh minh ha trong hnh di)
139
Hnh VIII.26. Xa mt th mc Mt hp thoi m ra cho ph p ta xa thng tin FrontPage hoc xa ton b Web site. C hai hot ng ny u mang tnh vnh vin, v th ta nn cn thn khi s dng chng. 4. xa mt site hoc thng tin FrontPage ca n, chn mt ty chn v nhp OK. 5. ng hp thoi m khng xa bt c thng tin no, click Cancel. Mt site hon ton b xa s khng th phc hi tr li. Nu ta loi b thng tin FrontPage ra khi mt site, th n c th c to li sau : trn menu h thng chn File Open, v sau s dng hp thoi Open tm v chn th mc chnh ca site. FrontPage hi ta c mun chuyn i th mc ny thnh mt Web site hay khng clikc Yes. Sau FrontPage s to thng tin n cn qun l site. Cc file v th mc n Nu ta m mt th mc ca mt Web site bn ngoi FrontPage, ta s nhn thy n cha cc th mc v file khng th hin th trong khung nhn Folders hoc khung Folders List ng ch nht l ton b mt nhm th mc c tn _vti_cnf
140
ang c s dng bi FrontPage lm mt phn trong cc tnh nng qun l site ca n. Mc d cc tn ca chng lm cho chng dng nh l cc trang Web, ha v i loi nh th, nhng cc file cha thng tin v cc file trong site ca ta ch ng hn nh thi im sau cng m mt file c th c chnh sa. Cc file trong th mc _vti_cnf c ng c s dng cho vic qun l site. Nhng file ny khng nn xa (mc d FrontPage c th to li chng nu cn thit) Khi ta xa thng tin FrontPage c kt hp vi mt site, nhng th mc v file ny l nhng g c loi b. S dng ti liu World trn Web FrontPage c kt nhp cht ch vi cc chng trnh khc trong b Microsoft Office. Kt qu l ta c th d dng kt nhp d liu c to bng mt chng trnh vo mt chng trnh khc. V d, ta c th lm cho cc ti liu c to bng Microsoft Word tr thnh mt phn ca Web site. Ta c th thc hin iu ny theo hai cch. Cch d dng l nhp (import) mt ti liu Word vo trong site ca ta v n theo dng n. Nhng tham quan n site ca ta h c th xem cc ti liu Word s c th xem file bng cch ti n vi Word. Khi ta mt ti liu theo dng Word, ta khng th hiu chnh n vi FrontPage. Thay vo , khi ta c m n theo cch bnh thng - bng cch click p file trong khung nhn Folders hoc danh sch Folders n m trong Microsoft Word. Nhng ngi dng s cm thy thun li hn nhiu khi xem thng tin ca ta nu n c chuyn i t dng ti liu Word sang mt hoc nhiu trang Web. chuyn i ni dung mt ti liu Word sang mt trang Web: 1. Nhp ti liu bng cch trn menu h thng chn File Import, nhng ta thng thc hin i vi bt k file. 2. Nu ta khng lm vic trong khung xem Folders, click nt Folder bn di ca s hin ti. 3. Click chut phi vo ti liu trong khung xem Folders, v sau chn Open With FrontPage (Open as HTML) t menu tt va xut hin (xem hnh di)
141
Hnh VIII.27. Hiu chnh mt ti liu Word trong FrontPage Ln u tin ta thc hin iu ny vi mt ti liu, c th n khng c sn mt chuyn i hin th file mt cch chnh xc. Mt hp thoi s xut hin hi ta c mun ci mt b chuyn i hay khng. Bi v ta ang chuyn i ti liu thnh mt trang Web, click No. Khi ta s dng n hiu chnh mt ti liu Word, mt trang Web mi c to cha cc ni dung ca ti liu. Ti liu ny c th cha nhiu nh dng cng nhiu cng tt, cc la chn font, kiu cn chnh v style c s dng trong Microsoft Word s c chuyn sang FrontPage. Sau khi chuyn i, n c th c lu mt cch bnh thng: Click nt Save trn thanh cng c Standard hoc chn File Save. VIII.3. Pht trin nhanh mt site vi cc template Khi bt u to cc Web site ring ca ta bng FrontPage 2003, chng trnh dng nh kh gy n tng. Vic bit ni bt u v ni thc hin c th l mt cng vic gy bi ri khi ta cha bao gi s dng phn mm ny. FrontPage lm cho cng vic ny d qun l hn thng qua vic s dng cc template, cc site c to sn m phn mm bit cch t to.
142
Cc template cho ph p ta pht trin mt site hon chnh trong mt vi pht v sau dnh nhng n lc ca ta vo vic to ty bin site thay v ta to mt site ngay t u. Cc template tit kim cho ta rt nhiu thi gian khi chng ph hp cho mt d n. VIII.3.1. Chn mt template Web site FrontPage cung cp mt vi chc template Web site v trang nhm gip ta c mt s khi u d dng v nhanh chng. M i template l mt khung sn m ta c th to ty bin bng cch thm v loi b text v thc hin cc thay i khc. Phn mm cha cc templage dnh cho mt s cch ph bin nht m cc nh xut bn s dng Worl Wide Web. Cc template site c ci sn cha mt site c nhn, mt site cng ty, mt trang phn hi khch hng v mt trang mc lc. Tt c cc site FrontPage v cc trang Web bt u t cc template. Cc template sau y c th c s dng bt u mt site: One Page Web Site - Mt site c mt trang trng v khng c g khc. Personal Web Site - Mt site c cc trang ni ta c th m t chnh mnh, chia s nh k thut s, v vit v nhng s thch ca ta v cc Web site m ta a thch nht. Customer Support Web Site - Mt site cho ph p mt cng ty cung cp s h tr khch hng thng qua cc trang m t sn phm, mt din n tho lun, mu biu phn hi (feedback form), form tm kim site, v mt trang c cc cu hi thng gp. Project Web Site - Mt site dnh cho mt d n hp tc, vi cc trang dnh cho thng tin thnh vin, tnh hnh d n, mt thi biu, cc cuc tho lun nhm v mt ni lu tr. SharePoint Team Site - Mt site dnh cho vic cng tc ca nhm c mt lch, mt danh sch tc v, mt th vin file, v mt danh sch contact. C ng c mt template Empty Web Site vn to mt site khng cha cc file. N khc vi template One-Page Web Site im n thiu mt trang index.htm.
143
VIII.3.2. To mt Web site mi Trong bn gi u, ta lm vic trn cc trang Web m khng t chng vo cc Web site ring ca chng. Ta c th d dng bt u mt d n Web mi bng cch to mt site mi trc khi bt k trang c to. Bi v tt c cc site bt u t mt template, ta phi chn mt template bt u mt d n: 1. Trn menu h thng chn File New. Khung menu m trong FrontPage nm dc theo m p phi ca ca s bin son.
Hnh VIII.28. Hp thoi New Location c s dng cho FrontPage bit ni lu site ca ta 2. Click hyperlink More Web Site Templates. Hp thoi Web Site Templates m ra, lit k cc template m ta c th s dng to mt site mi. N c ng lit k cc wizard ta lm vic d dng hn. 3. Chn template s dng cho site ca ta click biu tng ca n. Tip theo, ta nn to mt th mc mi ni site s c lu trn my tnh ca ta. 4. Click nt Browse. Hp thoi ny tm v m th mc ni ta s lu cc Web site ca ta. 5. S hp thoi ny tm v m th mc ni ta s lu cc Web site ca ta.
144
6. M i site s c cung cp th mc con ring ca n: to mt th mc con, click nt Create New Folder, nh c minh ha hnh trn. Hp thoi New Folder m ra. 7. Nhp mt tn cho th mc trong trng Name, v sau click nt OK. Hp thoi ng li, a ta tr v li hp thoi New Web Site Location. 8. Click nt Open. The mc m ta chn c hin th trong trng text Specify the Location of the New Web Site. 9. Click OK. FrontPage s to site, lp y th mc cc trang Web, hnh nh, v cc th mc con. VIII.3.3. To ty bin Web site mi ca ta Sau khi mt Web site mi c to t mt template, ta c th bt u thc hin cc thay i to ty bin site ny. FrontPage s hin th mt site va mi to trong khung xem Folders ta c th thy tt c cc file m n cha, nh minh ha trong hnh di. Tt c cc trang Web trong site nm trong th mc chnh ca n. C ng c mt s th mc con c s dng bi FrontPage v mt vi th mc con m ta mun s dng, ch ng hn nh images (dnh cho hnh nh), v _private (dnh cho cc file m cc site khch tham quan s khng th thy c).
Hnh VIII.29. hung nhn Folders

145
Mt th mc con _private ca mt Web site, th mc con ny ban u r ng, c th c s dng lm v tr cho cc file m c che giu cc khch tham quan n Web site ca ta. Nu ta to mt Web site ni khch tham quan c th cung cp cho ta cc a ch th tn ca h, th mc ny c th c s dng lm mt ni ngn nga thng tin ny khi nhng cp mt soi mi. Nu ta khng s dng template Empty Web Site, th th mc chnh thuc site ca ta s cha mt file c bit c tn index.htm. y l trang ch ca site trang m cc khch tham quan s thy khi h yu cu a ch Web chnh thuc site ca ta. Mt s template cha cc th mc phc v mt mc ch ring cho template . V d, template Personal Web Site cha mt th mc photogallery c s dng cho cc trang vn hin th cc nh k thut s. bt u lm vic trn Web site mi ca ta, hy m mt trong cc trang dnh hiu chnh: Click p vo tn ca trang trong khung nhn Folders. Trang m ra trong ca s hiu chnh, ni ta c th lm vic trn n, nh ta thng thc hin vi bt k trang khc, hy thc hin cc thay i v lu n vi nt Save trn thanh cng c Standard. quay tr v khung nhn Folders, click tab Web Site nm phn trn cng ca ca s bin son. VIII.3.4. Thm v loi b cc li ch thch Trn m i trang trong cc site c to t mt template FrontPage cung cp thng tin hng dn v mt s trang theo dng cc li ch thch (comment), text c hin th bng text mu ta c t Comment. Cc li bnh ch c hin th khi mt trang ang hiu chnh trong FrontPage nhng c che giu khi n hin th trong mt trnh duyt Web. thy c iu ny, hy click nt Preview bn di ca s bin son. Text ch thch khng xut hin trn trang. hiu chnh mt li ch thch, click p n. Mt hp thoi Comment m ra vi li ch thch chng trong mt vng text. Sau khi thc hin cc thay i, click OK lu chng. Mt li ch thch mi c th c thm vo mt trang Web: 1. Vi trang m ra hiu chnh, click vo ni m li ch thch c chn vo . 2. Trn menu Standard chn Insert Comment m hp thoi Comment.
146
3. Nhp text ch thch v click OK. Li ch thch s xut hin trn trang bng text mu ta. Ta c th xa cc ch thch vo bt k lc no, thm ch nu chng l mt phn ca mt template site hoc template trang. Click li ch thch m ta mun xa v nhn phm Delete. VIII.3.5. Khai thc template Personal Web Site D sm hay mun, th hu ht cc nh xut bn Web u s to cc tra ng ch ring cho mnh, mt ni lm cho h tr nn ni ting trn World Wide Web. Ta c th d dng to mt file t truyn cho s thch chuyn mn hoc c nhn ca ta bng cch s dng template Personal Web Site. Template ny gm cc thnh phn sau y: Index.htm, trang ch ca site, cung cp mt ni cho n cc khch tham quan v t gii thiu v mnh. Photo.htm, mt trang chia s cc nh k thut s hoc cc hnh nh khc. Interest.htm, mt ni tt m t cc s thch ca ta v cung cp cc hyperlink dn n cc Web site lin quan. Favorite.htm, mt danh sch cc hyperlink dn n cc Web site a thch nht ca ta. Aboutme.htm, mt trang ni ta c th cung cp mt bn di hn v tiu s ca ta. Feedback.htm, mt ni m nhng khch tham quan n site ca ta c th li cho ta mt thng ip. Tng trang ny cha mt thanh lin kt (link bar), mt hng gm cc nt ha vn c th c click tham quan phn c n li ca site. xem cch hot ng ca cc thanh lin kt trn site mi ca ta, click nt Preview in Browser trn thanh cng c Standard. Site m ra trong trnh duyt Web chnh ca ta. Trn cc trang Web ca site mi, ta c th thay i hu ht text, cc tiu chnh v cc hyperlink bng cch hiu chnh chng mt cch bnh thng. Cc template c ng t mt s th trn cc trang Web vn khng th c hiu chnh theo cch m ta mong i: cc thanh lin kt, cc biu ng trang vn
147
hin th tiu ca mt trang, v cc tem thi gian (timestamp) vn hin th ngy thng trn lch. y l cc thnh phn Web cc thnh phn trang c bit s c h tr bi FrontPage nhm b sung chc nng vo mt site. VIII.3.6. Thm mt tem thi gian vo mt trang Web Trang chnh trong template Persional Web Site, index.htm, cha mt thnh phn tem thi gian nm cui trang, ngay sau text. This page last updates nh trong This page last updated 01/12/2004. Thnh phn tem thi gian hin th ngy thng m trang Web c hiu chnh ln sau cng. N t ng thay i m i khi c bt k ci g trn trang b thay i. Bng cch s dng thnh phn ny, ta c th cho ph p cc khch tham quan bit c thng tin trn trang hin hnh nh th no. Thay v cng vic mt nhiu thi gian ca hot ng click ngy thng bng tay khi ta hiu chnh trang, ta c th t mt ngy thnh phn tem thi gian ln trn n. thm mt tem thi gian vo mt trang Web, hy thc hin cc bc sau: 1. Nu trang khng c m trong ca s bin son, click p ln file ca n trong khung nhn Folders. 2. Click mt v tr trn trang ni mt tem thi gian c th xut hin. 3. Trn menu Standard chn Insert Date and Time. Hp thoi Insert, Date and Time m ra (xem hnh di).
Hnh VIII.30. Hp thoi Date and Time

148
4. Chn mt trong cc ty chn Display xc nh nhng g lm cho tem thi gian thay i: Nu n thay i bt c khi no thc hin bng tay mt thay i cho trang, chn Date This Page Wass Last Editor. Nu n cng thay i khi FrontPage cp nht trang v mt l do no , chn Date This Page Was Last utomatically Updated. 5. Trong menu Date Format th xung, chn cch m ngy thng s xut hin. 6. Nu mt thi gian c ng c hin th, trong menu Time format th xung, thay i gi tr t (none) sang gi tr khc. 7. Click OK. Tem thi gian xut hin trn trang, trng ging nh chnh ta nhp n vo. Sau khi mt tem thi gian c thm, thc hin mt thay i, click p n trong ca s hiu chnh, hp thoi Date and Time m li. Tt c cc thnh phn Web khc c hiu chnh theo cng mt cch. VIII.3.7. Lu cc thay i sang mt site Nu ta to mt Web site c nhn t mt template, ta c th lm vi n bng cch hiu chnh text, tiu chnh v cc hyperlink. lu mt trang sau khi lm vic trn n, click nt Save trn thanh cng c Standard. xa mt trang hoc bt k file khc, loi b n vnh vin ra khi site, hy thc hin cc bc sau y: 1. Quay tr v khung nhn Folders: click tab Web Site nm trn cng ca s hiu chnh. 2. Click phi tn file trong khung xem Folder. 3. Chn Delete t menu tt 4. Mt hp thoi Confirm Delete hi file c nn thc s b xa hay khng. Click Yes xc nh vic xa hoc No nu ta thay i nh. Khi ta sn sng xem cng vic m ta thc hin, hy click nt Preview in Browser trn thanh cng c Standard. Site ca ta m ra trong mt trnh duyt Web, v ta c th thng thc n ging nh nhng ngi khc s tham quan n click cc hyperlink hoc cc nt thanh lin kt xem m i trang.
149
VIII.4. To mt site vi s tr gip ca Wizard trong FrontPage 2003 VIII.4.1. M mt wizard to site Nhiu phn mm s dng wizard, cc hp thoi vn c lm cho mt cng vic kh khn tr nn d dng bng cch phn chia n thnh mt lot cu hi. FrontPage v cc chng trnh khc trong b Office c xc lp trn mt my tnh thng qua wizard c ci t, do hnh thc ny s quen thuc vi ta. Trong FrontPage, cc wizard c th c xem l cc template thng minh. Chng c th c s dng to cc site v cc trang Web qu phc tp n n i khng th x l bng mt template. Bng cch phn chia mt tc v thnh mt lot cc bc n gin hn, cc wizard gip ta c th to cc Web site phc tp - ch ng hn nh mt site cng ty chuyn nghip 20 trang hoc site h tr khch hng - bng cch tr li vi cu hi n gin. Hai loi wizard c sn trong FrontPage: cc wizard Web site to ton b cc site v cc wizard mt trang. Cc wizard c th c to khi ta ang to mt site mi hoc thm mt trang mi vo mt site hin hnh. gi ra mt site wizard, hy thc hin cc bc sau: 1. Trn menu Standard chn File New. Khung New m ra ( pha bn phi ca s - xem hnh v di)
150
Hnh VIII.31. Khung New 2. Click hyperlink More Web Site Templates. Hp thoi Web Site Templates m ra vi tab General nm trn cng. Ta c th s dng mt s wizard to ton b mt site: Database Interface Wizard s to mt site vn c th ni kt vi mt c s d liu Microsoft ccess, hin th cc record trn cc trang Web v lu thng tin c thu thp trn site vo sang c s d liu. Discussion Web Site Wizard to mt bng thng bo ni cc khch tham quan n site ca ta c th giao tip vi nhau. Corporate Presence Wizard sao chp mt Web site hin c sang my tnh ca ta, ngay c nu n khng c to bng FrontPage. 3. khi ng mt wizard, chn n v click nt OK. Hp thoi chnh ca wizard xut hin. 4. s dng wizard, tr li tng cu hi m n t ra sau click Next xem cu hi tip theo. Khi ta tin n cu hi sau cng, mt nt Finish hin th thay cho nt Next. 5. Khi ta sn sng hon tt nhng ty chn m ta chn trong wizard, click Finish.
151
VIII.4.2. Nhp mt site hin c vo FrontPage Nu ta to cc Web site bng phn khc trc khi s dng FrontPage, th ta nn quan tm n Import Web Site Wizard, vn c th c s dng a mt site v tt c file ca n vo trong FrontPage hiu chnh. Vi wizard ny, ta c th tn dng cc tnh nng ca FrontPage trn mt site m ban u khng c to bng phn mm ny. Wizard c th nhp mt site t mt th mc trn my tnh ca ta, mt th mc trn mng, hoc mt Web site trn Internet. nhp mt site, hy thc hin cc bc sau: 1. Trn menu Standard chn File New m khung New. 2. Click hyperlink More Web site Templates. Hp thoi Site Templates m ra, lit k tt c cc site wizard m ta c th chn. 3. Chn biu tng Import Web Site Wizard. Trong hp danh sch Specify the Location of the New Web Site, FrontPage chn mt tn cho mt th mc mi ni cc file ca site s c lu tr. 4. chn mt th mc khc, click nt Browse. Hp thoi New Web Site Location s xut hin. S dng hp thoi ny tm kim v m th mc ni ta s lu tr cc Web site m ta s lm vic trn bng FrontPage. 5. M i site FrontPage phi c cung cp th mc ring ca n. to mt th mc cho site c nhp vo ny, click nt Create New Folder. Hp thoi New Folder xut hin. 6. Cho th mc mt tn trong Name v click OK. 7. Trong hp thoi New Web Site Location, click nt Open. Th mc c lit k trong hp thoi danh sch Specify the Location of the New Website trong Import Web Wizard. 8. Click OK. Import Web Wizard m ra. VIII.4.3. Chn mt phng php import Cu hi u tin c hi bi Import Web Site Wizard l cch truy tm site, nh c trnh by hnh di
152
Hnh VIII.32. Import Web Site Wizard Mt site c th c nhp theo nm cch, ph thuc vo v tr ca n v kiu truy cp no m ta c i vi v tr : FrontPage Server Extensions hoc SharePoint Servicess, mt k thut hiu qu i h i mt Web server c trang b vi mt trong nhng tnh nng ny. FPT (File Transfer Protocol), cch ph bin nht m cc file c trao i trn Internet. HTTP (HyperTExxt Transfer Protocol), mt cch truy tm cc trang Web v cc file khc vn c th truy xut trn mt mng cc b. WebDAV, mt h thng to ni dung Web t ph bin hn cc phng php khc. Cch tt nht nhp mt site l s dng FrontPage Server Extensions hoc SharePoint Services bi v iu ny c th truy tm cc trang v cc file khc c a vo mt Web site ngay c nu chng khng c trnh by trc tip cho cc khch tham quan. Khi ta s dng FrontPage to mt Web site, n s lm vic vi nhiu file hu cnh trong sut qu trnh chun b mt trang. V d, nu site ca ta s dng mt theme, s c hn hai chc file ha v cc th mc con ca n. Nhng file ny khng bao gi c biu din trc tip cho nhng ngi tham quan site ca ta.
153
Thay vo , chng c s dng bi FrontPage to cc nt hover, ha v nh dng cc trang. Bng cch s dng cc server extension hoc SharePoint Servicers, wizard c ng c th nhp cc site con (subsite) cc Web site c cha bn trong cc th mc ca mt site khc. (V d, mt Web site trong th mc C:\My Sites\Sports\baseball). Nu site nhp nm trn mt phn m rng Web server hoc SharePoint, ta c th s dng chng nhp Web site ny v ton b site con ca n: 1. Chn FrontPage Server Extensions hoc SharePoint Services. 2. Nhp a ch Web ca trang ch Web thuc site vo trong trng text Web Site Location. a vo cc site con, chn hp kim Include Subsites. Nu site m ta mun nhp nm trn my tnh ca ta (hoc trong mt th mc my tnh khc trn mng ca ta), ta c th sao ch p n t th mc : 1. Chn ty chn File System v click p Browse. Hp thoi New Publish Location xut hin. S dng hp thoi ny tm v chn th mc chnh ca Web site (th mc ni trang ch ca n c lu tr). 2. Chn th mc v click Open. Th mc c hin th trong trng text Web Site Location. 3. nhp cc site con cng mt lc (nu c), chn hp kim Include Subsites. Nu site nm trn mt Web server m ta c th truy cp bng cch s dng File Transfer Protocol (FTP), mt tiu chun chung cho vic trao i cc file vi mt Internet server, ta c th s dng FTP account ca ta nhp site. Sau y l cch thc hin: 1. Chn FTP. 2. Trong trng text Web Site Location, nhp a ch ca FTP server. Bi v n ang s dng FTP, a ch s c ftp:// ng trc thay v http:// 3. Trong trng Root Directory, g nhp v tr v tn ca th mc m ta cha trang ch ca site.
154
4. Nu server i hi Passive FTP, click hp kim Use Passive FTP. Nu ta khng th tn dng cc phn m rng hoc SharePoint, th FTP l la chn tt nht trong cc ty chn c n li. Nu site nm trn mt Web server m khng c trang b cc phn m rng hoc SharePoint (hoc nu ta khng bit), ta c th lu cc file bng vic truy tm chng t Web bng cch s dng HTTP. Ty chn HTTP khng hiu qu bng cc phn m rng, SharePoint, hoc FTP - ch ly cc trang c lin kt cng cng t trang ch. N c ng b qua cc file c s dng to cc trang , ch ng hn nh cc theme FrontPage v nhng file khc vn c s dng to site. Tuy nhin, bin php sau cng l HTTP c th c s dng nhp site: 1. Chn HTTP. 2. Nhp a ch Web ca trang ch thuc site trong trng text Web Site Location. FrontPage t m v a ch: Thay v s dng mt a ch chnh ch ng hn nh www.example.com, n c th hn v c ng tham chiu tn ca trang ch (ni cch khc, mt a ch no nh www.example.com/index.html). 3. Sau khi chn mt trong nhng phng php import, click Next tip tc. Wizard c cp nht phn nh s la chn ca ta. 4. Nu ta ang nhp mt site t mt v tr c bo v bi password, mt hp thoi Name and Password Required m ra. S dng cc trng Name v Pasword cung cp thng tin ng nhp ca ta, v sau click OK. Sau khi chn mt phng php nhp, click Next. VIII.4.4. Chn v tr lu site Cu hi k tip m wizard c th t ra l ni lu site. Bi v ta chn mt th mc, n xut hin trong trng text trng Local Copy Location, trng ny c tt ta khng th thay i n. Tuy nhin, c mt cch thay i mt thc hin mt thay i nu ta thay i nh v chn mt th mc khc: 1. Hy chn hp kim Add to Current Web Site. Trng Location Copy Location v nt Browse tr nn c chn.
155
2. Click nt Browse. Hp thoi New Page Location xut hin. S dng hp thoi ny chn (hoc to) mt th mc mi ni m cc file ca site s c lu. 3. Chn th mc v click Open. Hp thoi ng li, a ta tr v wizard. 4. Chn hp Add to Current Web Site. Click Next i n cu hi k tip. VIII.4.5. Thu thp thng tin phn hi t cc khch tham quan Web site ca ta Mt trong nhng form d nht to l mt trang phn hi - mt v tr trong site ca ta ni nhng khch tham quan c th gi cho ta mt li nhn x t gp ring t. iu ny cung cp mt dch v tin li cho nhng khch tham quan ca ta v c mt u im th hai n cho ph p ta b qua a ch email ca ta t site ca ta. Ti sao iu ny li hu dng? Khi ta bt u xut Web, bt k a ch email m ta t trn mt trang s nhanh chng c pht hin bi cc spammer - nhng ngi tip th email tp nhp lp y cc inbox bng nhng li ngh mang tnh thng mi khng cn thit. tm cc a ch thm vo cc danh sch th tn ca h, c spammer thng xuyn s dng phn mm truy tm cc trang trn World Wide Web. iu m ta chc chn khng th trnh khi l site ca ta s c tm thy nhanh chng bi nhng chng trnh ny - thng l trong mt thi gian ngn t mt n hai tun. Bng cch t mt trang phn hi thay v a ch ca ta trn site ca ta, ta s gim i lng spam m ta nhn c. thm mt trang phn hi vo site ca ta, hy thc hin cc bc sau: 1. M site (nu n cha c m) v trn menu Standard chn File New. Khung New m nm dc theo ca s bin son. 2. Click hyperlink More Page Templates. Hp thoi Page Templates m ra, hin th cc trang m ta c th to bng cch s dng cc template hoc wizard. 3. Chn biu tng Feedback Form v click OK. Mt trang phn hi to s dng cc mu, text v nn ging vi phn c n li ca site. N m trong ca s bin son. Mt ng chm chm biu th cc ng vin ca form. M i phn ca form phi c t trong ng bin son ny. u trang,
156
mt on c t mu ta m t form v cung cp mt s thng tin hng dn v cch n c s dng. Text ny l mt li bnh ch, text gii thch xut hin ch trong ca s bin son ca FrontPage ch khng phi khi mt trang c xem trong mt trnh duyt Web. ( kim tra iu ny, click nt Preview ben di ca s bin son).
Hnh VIII.33. Hiu chnh mt trang phn hi 4. xa li ch thch, click n mt ln v nhn phm Delete. 5. Nu ta mun thay i cch din t ca mt cu hi, hiu chnh n nh ta thng thc hin i vi bt k text khc trong FrontPage: Nhp con tr trn trng v s dng bn phm thm hoc loi b cc thng tin. 6. Vic nh v v nh dng cc thnh phn khc nhau ca form c ng c th c thay i ging nh bt k phn khc ca mt trang Web. 7. xa bt k phn ca form, k o chut ln trn n v nhn phm Delete Khi mt trang phn hi c to ra, FrontPage xc lp n lu cc cu tr li sang file feedback.txt trong th mc _private ca Web site.
157
thc thi iu ny, ta phi xut site ca ta ln mt Web server c trang b bng FrontPage Server Extensions hoc SharePoint Servers, nhng ci tin nhm gip nhng ngi s dng FrontPage thm cc tnh nng c bit (ging nh vy) vo cc site ca h. Vo thi im ny, ta c th thay i cch thng tin phn hi ca khch tham quan c lu nh th no. N c th c lu sang mt file theo nhiu dng khc nhau hoc gi n ta bng mt email. VIII.4.6. Lu thng tin phn hi ca khch tham quan sang mt file Nhng cu tr li c thu thp trn mt form c th c lu tr trong mt file trn Web server ca ta theo ba dng khc nhau: - Text - Dng ny c th c xem trong mt b bin son text hoc c ti trong mt chng trnh c s d liu v trang bng tnh, ch ng hn nh Microsoft Acccess v Microsoft Excel. - HTML - Dng ny c th c c bng mt trnh duyt. - XML y l mt dng ph bin cho d liu c tch hp rng ri vo FrontPage 2003 v cc chng trnh c n li ca b Office. lu thng tin phn hi sang mt file, hy thc hin nhng bc sau y: 1. Click phi bt c ni no trong cc ng vin ca form - ng chm chm c minh ha ban u hnh trn. 2. Chn Form Properties t menu ng cnh. Hp thoi Properties xut hin nh c minh ha trong hnh di.
158
Hnh VIII.34. Chn cch lu thng tin phn hi ca khch 3. Thng tin phn hi ca khch tham quan s c lu di dng text. chn mt dng khc, click nt Options. Hp thoi Saving Results xut hin. 4. S dng hp File Format x xung chn mt dng cho thng tin ph n hi: gip ta c d dng vi Microsoft Excel v nhng chng trnh c s d liu khc, hy chn Text Data-base Using Comma as a Separator. iu ny to mt file text vi phn m rng tn file.csv. c n bng mt trnh duyt Web, mt la chn tt l HTML hoc Formatted Text Within HTML. iu ny to ra mt file.html vn s dng cng mt nh dng vi cc trang Web m ta to bng ForntPage. lu theo dng XML, chn XML. iu ny to ra mt file.xml. 5. Click OK. 6. chn th mc ni file s c lu tr , click nt Browse. Hp thoi Current Web site xut hin. S dng hp thoi ny chn mt trong nhng th mc trn site ca ta. 7. Click OK ng hp thoi Form Properties. Form s c xc lp lu tr cc thng ip phn hi trong mt file c ch nh. Nu file ny khng hin hu khi mt ngi no s dng form phn hi s c to ra.
159
VIII.4.7. Nhn thng tin phn hi ca khch tham quan bng email Thng tin phn hi c ng c th c gi n ta bng email thay v c lu trong mt site ca ta. Khi n c gi n, n trng ging nh sau: Message Type: Suggestion Subject: Web Site Username: Sam Snett UserEmail: snett@samspublishing.com ContractRequested: ContacRequested Date: 22 Aug 2003 Time: 21:19:30 Comments: In this thing on? Trong email, cc cu tr li khc nhau trn form phn hi c hin th trn cc d ng ring bit. Trong v d ny, Sam Snett vi a ch email snett@samspublishing.com gi mt ngh vi ch Web Site. Mail hin th cui. Sam t cu hi, Is this thing on? Th phn hi bt ngun t mt a ch t ng tr li c thit lp bi Web host ca ta - ta c th thay i a ch ny thnh a ch ca ngi ang lin lc vi ta nh mt m t phn k tip. gi cc tr li phn hi n mt a ch email, hy thc hin cc bc sau: 1. Click chut phi bt c ni no trong form v chn Form Properties t menu tt va xut hin. Hp thoi Form Properties m ra. 2. Nhp mt a ch email trong trng text E-mail Address. a ch ny phi l a ch email ca ta hoc a ch ca mt ngi ang tr li th cho site ca ta. 3. Xa bt k text trong hp Filename. Thng tin phn hi s c gi bng th bng cch s dng dng ca v d SamSnett. chn mt dng khc, click nt Options. Hp thoi Saving Result xut hin. 4. Click tab Email Result a n ln pha trc. 5. Chn mt dng trong hp Email Format th xung. Cc ty chn c sn ging nh c ty chn dnh cho cc file. Email phn hi c cung cp d ng ch Data posted to form 1, theo sau l a ch Web ca trang phn hi.
160
6. xc lp mt d ng ch khc v gip d dng tm nhng email ny, hy g nhp n trong trng text Subject Line. 7. tn dng a ch email ca ngi in y thng tin vo form, nhp text UserEmail trong trng text Reply-To Line v chn hp kim Form Field Name nm ngay k bn n (xem hnh di).
Hnh VIII.35. Hp thoi Saving Result Click OK ng hp thoi Saving Results, v sau click OK ng hp thoi Form Properties. Khi lu kt qu ca mt form di dng email, FrontPage c th hin th mt hp thoi ch nh rng form khng th gi kt qu bng email v hi xem a ch email c nn c loi b hay khng. Nu ta bit rng Web server ca ta cung cp cc server Extensions hoc SharePoint, hy click No gi li a ch email v b qua li cnh bo. Sau khi ta xut trang phn hi, n s hot ng mt cch chnh xc. Bi tp 1. Thay v t vit cc th HTML, hy dng cng c FrontPage to tt c cc trang Web cho cc bi tp nhng chng trc.
161
BNG CC T VIT TT Browser: trnh duyt l chng trnh c ni dung ca file XML v hin th thng tin ca file ln trn mn hnh. Cascading Style Sheets: mt ngn ng khai bo cch hin th cc phn t trong file XML. Style sheet: l cch gi tt ca Cascading Style Sheets nhng n m ch n mt file cha cc khai bo style.7 HTML: Hyper Text Markup Language. WWW: World Wide Web Markup: nh du Language: Ngn ng Text: Vn bn Rect: Hnh ch nht Circle: Hnh tr n Polygon: Hnh tam gic Transparency: trong sut
162
TI LIU THAM KHO [1] 24 bi t hc thit k Web vi Front Page 2003, Thun Thnh, NXB Thanh nin. [2] HTML, DHTML and JavaScript, Aptech WorldWides book.
163

HTML Can Ban

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Can Ban

Uploaded by

Copyright:

Available Formats

Y BAN NHN DN THNH PH H NI

S BU CHNH VIN THNG H NI

C th minh ho hnh nh ca mt website nh trong hnh v bn

s c trnh duyt hin th thnh Tiu mc 1

Th, thuc tnh <HR>

Kt qu tr v mt danh sch sau:

Kt qu tr v mt danh sch sau:

1 1.1 1.2 2 2.1 2.2

ROWSPAN=n </TABLE> III.2.3. Cc v d

Trong th IMG c n c mt s thuc tnh khc nh: ALT, WIDTH,

nh (khng hin ln) khi c v khng s dng thuc tnh ALT

<IMB SRC=face.gif WIDTH=50 HEIGHT=50>

ALIGN=TOP Theo chiu ngang:

V d: <IMG SEC=face.gif VSPACE=20 HSPACE=20>

<A HREF=" Top"> v

V tr t th <EMBED> l ni xut hin khung hnh video.

Cng thc vit: <INPUT TYPE="RADIO" NAME="T n_nhm_nt" VALUE="gi_tr_c_chn"> Nhn nt

Cho ph p hin th hp chn tp hoc nhp tn tp trc tip. V d.

dng nh ngha thnh phn

Vi d <FORM action="..." method="post"> <P> <FIELDSET>

Hnh VII.5. S dng mt HTML selector

Hnh VII.6. S dng CL SS selector

Hnh VII.8. S dng ID selector

Hnh VII.11. Contextual Selectors

Hnh VII.12. S dng mt style sheet thng thng

Thuc tnh Font properties

Bi tp 1. To ra mt trang web mi dng ng nhp c giao din nh hnh di (s dng FORM).

2. To mt file css t mc nh kiu font v mu cho cc phn gii thiu ca bn.

Hnh VIII.3. Ca s Save As

Hnh VIII.16. nh trong sut v nh khng trong sut

Hnh VIII.21. Tm kim Clip rt

Hnh VIII.29. hung nhn Folders

Hnh VIII.30. Hp thoi Date and Time

You might also like