Xây dựng module tích hợp cho môn học động cơ đốt trong theo hướng hiện đại ứng dụng công nghệ thông tin

Và cũngăxu tăphátăt ăth căt ,ăng iănghiênăc u đƣăt pătrungăvƠoăvi cănghiênă c u,ă xơyă d ngă giáoă trìnhă mônă Đ ngă c ă đ tă trong theoă h ngă hi nă đ iă ngă d ngăcôngăngh ăthôngătin áp

TịM T T

V năđ ăxơyăd ng,ăbiênăso năgiáoătrìnhăchoăphùăh păv iăch ngătrìnhăđƠoăt oă

c aăt ngătr ngălƠăh tăs căc năthi t.ăTh căt ,ăhi nănayăh uăh tăcácătr ngăđ uăđƣăt ătrangăb ăchoămìnhănh ngăgiáoătrìnhăl uăhƠnhăn iăb ădoăchínhăcácăgi ngăviênăđangăcôngătácăt iăcácăKhoaăc aătr ngăbiênăso n.ăĐ uănƠyălƠăhoƠnătoƠnăch pănh năđ c

Và cũngăxu tăphátăt ăth căt ,ăng iănghiênăc u đƣăt pătrungăvƠoăvi cănghiênă

c u,ă xơyă d ngă giáoă trìnhă mônă Đ ngă c ă đ tă trong theoă h ngă hi nă đ iă ngă d ngăcôngăngh ăthôngătin ápăd ng vƠoăgi ngăd yăt iăb ămônăđ ngăc ăthu căKhoaăĐ ngă

l c,ătr ngăCaoăđ ngăk ăthu tăLỦăT ăTr ng ThƠnhăph ăH ăChíăMinh,ăn iăng iănghiênăc uăhi năđangăcôngătác

Đ ătƠiăắXơy d ng module tích h p cho môn h c Đ ng c đ t trong theo

h ng hi n đ i ng d ng công ngh thông tinẰ đƣăđ căti năhƠnhăv iăvi căs ă

d ngăph năm măthi tăk ,ăl p trình Adobe Dreamweaver CS5ăk tăh păv iăcácăph nă

m m,ăcôngăc ăh ătr :ăJavascript,ăPhotoshopăCS5.ăPh năm mănƠyăcóă uăđi mălƠăcácă

ph năm măcôngăc ăh ătr ăchoănóăr tăphongăphú,ăđaăd ng.ăĐ căbi tănóăcóăth ănơngă

c păvƠăc pănh tăthêmăcôngăc ăh ătr ăS năph măt oăraălƠăm tăfileăwebăđ cătrìnhăbƠyăd iăngônăng ăl pătrìnhăwebă.HTMLănênănóăcóădungăl ngăr tănh ănh ngăcóă

th ăch aăm tăkh iăl ngăki năth căkh ngăl

Đ ătƠiăđƣăgópăph năvƠoăvi căphátătri năvi că ngăd ngăthi tăb ăhi năđ iăvƠăcungă

c păthêmătƠiăli uăthamăkh oăchoăcácăk ăs ăvƠăgi ngăviênătrongăngƠnh

The project "The construction of integrated module for the course of internal combustion engine according to modern applications of information technology" has been conducted with the use of design software, the program Adobe Dreamweaver CS5 combined with software, support tools such as Javascript, Photoshop CS5 This software has the advantage that there is a wide range of diverse support tools for it In particular, it can be upgraded and updated with support tools The resulting product is a file web presented in web programming language HTML, so it has very low capacity but can contain a huge amount of knowledge

The project has contributed to the development of applications in modern equipment and provided additional references for engineers and lecturers in the industry

Hình 3.6:ăB ngăch cănĕng 28

Hình 3.7:ăăKh iăt oătrangăweb 29

Hình 5.3: T oăth ăm căcontent 68

Hình 5.7: Đo nămƣăcodeăt oăn n,ămƠuăch ,ăfontăch ,ăcanhăl ăchoăwebsite 70

Hình 5.8: Đo nămƣăcodeăhi năth ămenuăngangăc aăwebsite 71

Hình 5.9: Đo nămƣăcodeăhi năth ăv ătríăbannerăvƠămenuăngangătrênăkhungăs n 71

Hình 5.10: Nh păn iădungăvƠoăph năN iădungăwebsiteăc aăkhungăs nătrangăch 72

Hình 5.11: Đo nămƣăcodeăchènăvideoăclipăvƠoăv ătríăt ngă ngătrênătrangăch 72

Hình 5.13: Khungăs năc a trang con 74

Hình 5.15: Đo nămƣăcodeăhi n th ăv ătrí menu d c trênăkhungăs n 75

M C L C

Quy tăđ nhăgiaoăđ ătƠi

Xácănh năc aăcánăb ăh ngăd n

Phi uănh năxétălu năvĕnăth căsƿă- CBHD

1.1 LỦădoăch năđ ătƠi 1

1.8 Cácăb căth căhi n 5

Ch ng 2 C S Lụ THUY T V NGỌN NG THI T K WEB 6

2.1.2.1ăThẻăăHTML 6

Ch ng 3 GI I THI U PH N M M THI T K WEB ADOBE

DREAMWEAVER CS5 22

3.1 Gi iăthi uăt ngăquanăv ăAdobeăDreamweaverăCS5 22

3.2 T ngăquanăgiaoădi năDreamweaver 23

3.3 Thi tăk ăwebăv iăDreamweaver 27

3.3.10ăT oăTemplate 35

Ch ng 4 NGHIÊN C U, BIÊN SO N N I DUNG GIÁO TRỊNH 38

4.1 Ch ngătrìnhăđ ăc ngăchiăti t 38

4.2 Biênăso năn iădungăt ngămônăh cătheoăch ngătrìnhăđ ăc ngăchiăti t 64

Ch ng 5 THI T K , XỂY D NG CÁC MODULE B NG PH N M M

ADOBE DREAMWEAVER CS5 65

CH NG 1: D N NH P

1.1 Lý do ch n đ tƠi

Trong nh ngănĕmăg năđơy,ăv i s phát tri năvƠăđ uăt ,ăm r ng h p tác v i

qu c t trongălƿnhăv c giáo d c, chúngătaăđƣănh năđ c s h tr nhi uăh năv kinh

t và k thu t công ngh t nhi uăphía,ăđ c bi t là t nh ngăn c có n n giáo d c tiên ti n,ăđi uăđóăđƣăt o thu n l i cho giáo d c phát tri n Ngành công ngh ô tô cũngăkhôngăn măngoƠiăxuăh ngăđó,ăv i s áp d ng ngày càng nhi u các k thu t, công ngh m iăđ i v iăngƠnhăđƠoăt o v k thu t và công ngh ôătôăn c ta

Tuy nhiên, taăhòaănh păcƠngăsơuăvƠoăth ăgi iăthìănh ngănh căđi măc aăn cătaăcƠngăb căl ămƠărõănh tănh ăl căl ngălaoăđ ngăđ căđƠoăt oăch aăđáp ngăđ căyêuăc uăphátătri năkinhăt ănh ăk ănĕngăth căhƠnhăy u,ăkhôngăti păc năngayăđ căv iă

th căt ăs năxu t,ătácăphongăcôngănghi păch aăcao.ăVìăv y,ăvi căcungă ngăngu nălaoă

đ ngăcóăk ănĕngăphùăh păchoăs ăphátătri năc aăđ tăn călƠăd uăh iăđ căđ tăraăv i ngƠnhă giáoă d că nóiă chung,ă ngƠnhă ĐƠoă t oă vƠă d yă ngh ă nóiă riêngă mƠă đ că bi tă lƠăngƠnhăcôngăngh ôtôăph iăđápă ngăm tăcáchăk păth iăđ ăngu năl călaoăđ ngăVi tăNamăkhôngăb ăt tăh uăquáăxaăsoăv iăkhuăv căvƠăth ăgi i

V ăm tăch tăl ngăđƠoăt oăsoăv iănhuăc uăc aăth căti năxƣăh iăhi nănayăcònănhi uăb tăc pănh ăch ngătrìnhăđƠoăt o,ăthi tăb ăl căh uăch aăđápă ngăđ căv iăs ăphátătri năc aăcôngăngh ătrongăngƠnhălƠăm tăth căt ăĐi uăđóăđ aăđ năvi căng iă

đ căđƠoăt oăthi uănh ngăk ănĕngăngh ăm tăcáchăđángăquanătơm.ă Vi căxơyăd ngă

ch ngătrìnhăđƠoăt oăvƠătrangăthi tăb ăđ ngăb ălƠăm tăv năđ ăr tăquanătr ngăđ ăđ mă

b oăs ăth ngănh tăgi aălỦăthuy tăvƠăth căhƠnh,ăng iăh căkhôngăph iăh călỦăthuy t mƠăluônăph iăcóăth căt ă ngăd ngăđiăkèmăvƠăy uăt ăđ căbi tăquanătr ngălƠăph i phù

h păv iăth căt ăs năxu t.ă

Hi nănay,ătrênăc ăn căcóăr tănhi uătr ngăĐ iăh căậ Caoăđ ngăđƠoăt oăchuyênăngƠnhăcôngăngh ăôătô.ăTuyănhiên,ădoănhi uăy uăt ăkháchăquanăvƠăch ăquanănh :ăc ă

s ăv tăch t,ăđ iăngũăgiáoăviênăgi ngăd yăvƠăđ căbi tălƠăđ iăt ngăng iăh c,ăt călƠătùyăthu căvƠoăch tăl ngăsinhăviênăc aăcácătr ngămƠăm iătr ngăxơyăd ngăch ngătrìnhăđƠoăt oăchoăphùăh păv iătrìnhăđ ăti păthuăc aăsinhăviên.ăVƠăđ ătri năkhaiăth că

hi nătheoăđúngăch ngătrìnhăđƠoăt oăđƣăđ căphêăduy t,ăch păthu năthìăl i v păph iă

v năđ ănênăs ăd ngăgiáoătrìnhănƠoăđ ăgi ngăd yălƠăh pălỦ.ăM iăb căh căđ uăđiăkèmă

v iăm tăđ iăt ngăng iăh cănh tăđ nh,ăvìăv yăgiáoătrìnhăs ăd ngăgi ngăd yăph iăápă

d ngăđúng,ăphùăh păv iătrìnhăđ ăti păthuăc aăđ iăt ngăh c.ăVíăd :ăKhôngăth ăs ă

d ngăgiáoătrìnhădùngăgi ngăd yăb căĐ iăh căápăd ngăchoăb căTrungăc p

V năđ ăxơyăd ng,ăbiênăso năgiáoătrìnhăchoăphùăh păv iăch ngătrìnhăđƠoăt oă

c aăt ngătr ngălƠăh tăs căc năthi t.ăTh căt ,ăhi nănayăh uăh tăcácătr ngăđ uăđƣăt ătrangăb ăchoămìnhănh ngăgiáoătrìnhăl uăhƠnhăn iăb ădoăchínhăcácăgi ngăviênăđangăcôngătácăt iăcácăKhoaăc aătr ngăbiênăso n.ăĐ uănƠyălƠăhoƠnătoƠnăch pănh năđ c VƠătrongăđ ătƠiănghiênăc uănƠy,ăcũngăxu tăphátăt ăth căt ,ăng iănghiênăc uă

t pătrungăvƠoă vi cănghiênăc u,ăxơyăd ng giáo trìnhă mônă Đ ngăc đ tătrongă theo

h ngăhi năđ iă ngăd ngăcôngăngh ăthôngătin ápăd ng vào vi c gi ngăd yăt iăb ămônăđ ngăc ăthu căKhoaăĐ ngăl c,ătr ngăCaoăđ ngăk ăthu tăLỦăT ăTr ng Thành

ph ăH ăChíăMinh,ăn iăng iănghiênăc uăhi năđangăcôngătác

Nh ăđƣăđ ăc p,ăth căt ăhi nănayăcóăr tănhi uăgiáoătrìnhăv ămônăh cănƠy,ăv iă

nh ngăn iădungăphongăphúăvƠătheoănhi uătr ngăpháiăkhácănhau.ăT iăcácătr ngăĐ iă

h căl năcóăđƠoăt oăngƠnhăcôngăngh ăôătôănh :ăĐ iăh căS ăph măK ăthu tăThƠnhăph ă

H ăChíăMinh,ăĐ iăh căBáchăkhoaăThƠnhăph ăH ăChíăMinh,ăĐ iăh căBáchăkhoaăHƠă

N i,ă Đ iă h că Báchă khoaă ĐƠă N ngầđ uă cóă nh ngă giáoă trìnhă Đ ngă c ă đ tă trongăchu năm cădoăcácăth yăđ uăngƠnhăbiênăso n.ăVíăd :ăNguyênălỦăk tăc uăđ ngăc ăđ tătrong, GVC VõăVĕnăNhu n,ăThS.ăNguy năVĕnăTr ng,ăĐ iăh căS ăph măK ăthu tăThƠnhăph ăH ăChíăMinh,ă2006;ăGiáoătrìnhămônăh căK tăc uăđ ngăc ăđ tătrong,ăTS.ă

D ngăVi tăDũng,ăĐ iăh căBáchăkhoaăĐƠăN ng,ă2007ầăVƠăđaăs ăđ uăphơnăchiaăr tărõărƠngăgi aăh căph nălỦăthuy tăvƠăh căph năth căhƠnh

Doăđóăđòiăh iăsinhăviênăph iăcóăkh ănĕngăti păthuăt t.ăVìăv y,ăn uăápăd ngănguyênăb nănh ngăgiáoătrìnhăđóăvƠoăgi ngăd yăchoăcácătr ngăCaoăđ ng,ăTrungăc păngh ă đƠoă t oă ôă tôă nóiă chung,ă Khoaă Đ ngă l că tr ngă Caoă Đ ngă k ă thu tă LỦă T ă

Tr ng ThƠnhăph ăH ăChíăMinh nóiăriêngăthìăt ăl ăthƠnhăcôngăkhôngăcao.ăDoăh ngăđƠoăt oăc aătr ngălƠăđƠoăt oăraănh ngăcôngănhơnăk ăthu t,ăk ăthu tăviênăkhôngă

nh ngăhi uăv ălỦăthuy tămƠăcònăcóătayăngh ,ăcóăk ănĕngăth căhƠnh

ChínhăvìălỦădoăđó,ăng iănghiênăc uăđƣăt pătrungănghiênăc u,ăbiênăso n:

“Xơyăd ng moduleătíchăh păchoămônăh căĐ ngăc ăđ tătrongătheoăh ngăhi năđ iăngăd ngăcôngăngh ăthôngătin”

1.2 M c tiêu c a đ tài

M că tiêuă c aă đ ă tƠiă lƠă s ă d ngă ph nă m mă thi tă k ,ă l p trình web Adobe Dreamweaver CS5 k tă h pă v iă cácă ph nă m m,ă côngă c ă h ă tr :ă Javascript, PhotoshopăCS5ăđ ăxơyăd ngăgiáoătrìnhămônăĐ ngăc ăđ tătrong thƠnhăgiáoătrìnhăđi nă

t ătheoăh ngăhi năđ i

1.3 Đ i t ng nghiên c u

Đ iăt ngănghiênăc uăc aăđ ătƠiălƠ:ănghiênăc uăthi tăk ăbiênăso năgiáoătrìnhă

đi năt cho môn h c Đ ngăc ăđ t trong theoăh ng hi năđ i

1.4 Ph m vi nghiên c u

N iădungănghiênăc uăt pătrungă ăcácăv năđ ăsau:

- Nghiênăc u, biênăso năph nălỦăthuy tăc aămônăĐ ng c ăđ tătrong

- Nghiênăc u, biênăso năph năth căhƠnhăc aămônăTh căt păĐ ngăc ăc ăb n

- Nghiên c u, s ăd ngăph n m măthi tăk ,ăl pătrìnhăAdobe Dreamweaver CS5

k tăh păv iăcácăph năm m,ăcôngăc ăh ătr :ăJavascript,ăPhotoshopăCS5

- Ngônăng ăwebă.HTML

1.5 ụ nghĩa khoa h c và tính th c ti n c a đ tài

M căđíchăc aăđ ătƠiălƠăthi tăk ăgiáoătrìnhăđi năt ămônăh căĐ ngăc ăđ t trong theoă h ngă hi nă đ iă côngă ngh ă v iă vi că s ă d ngă ph nă m mă thi tă k ,ă l pă trìnhăMicrisoftăDreamwearăCS5ăk tăh păv iăcácăph năm m,ăcôngăc ăh ătr :ăJavascript,ăPhotoshop CS5 S năph măt oăraălƠăm tăfileăwebăđ cătrìnhăbƠyăd iăngônăng ăl pătrình web HTML.ă uăđi măc aăđ ătƠiălƠădoăfileăt oăraăcóăđuôi HTML nên nó có dungăl ngăr tănh ănh ngăcóăth ăch aăm tăkh iăl ngăki năth căkh ngăl ,ămƠăn uătaăinăthƠnhăsáchăđ ăs ăd ngăthìăt năkémăr tănhi uăchiăphíăcũngănh ăăkhóăkhĕnătrongă

vi căb oăqu n,ăs ăd ng

Đ ătƠiăgópăph năvƠoăvi căphátătri năvi că ngăd ngăthi tăb ăcôngăngh ăhi năđ iăvƠăcungăc păthêmătƠiăli uăthamăkh oăchoăcácăk ăs ăvƠăgi ngăviên,ăcũngănh ăsinhăviên trong ngành

 Xácăđ nh nhi măv ,ăđ iăt ngănghiênăc u

 Xácăđ nhăm cătiêuănghiênăc u

 PhơnătíchătƠiăli uăliênăh v iăth căt ăgi ngăd yă ătr ng Caoăđ ngăK ăthu tă

 Thi tăk ,ăbiênăso năgiáoătrình

 Giaiăđo nă2:

 Vi tăthuy tăminh

 HoƠnăthi năđ ătài

1.8 Các b c th c hi n

 Thamăkh oătƠiăli u,ăk tăh păliênăh ăth căti năc aătr ng

 Biênăso năgiáoătrìnhălỦăthuy tămônăĐ ngăc ăđ tătrong

 Biênăso năgiáoătrìnhăth căhƠnhămônăTh căt păđ ngăc ăc ăb n

 Thi tăk ăph năgiaoădi năchoăgiáoătrìnhăđi năt

 Thi tăk ăph năkhungăn năchoăgiáoătrìnhăđi năt

 Thi tăk ,ăb ătríăcácăđ ăm căchoăgiáoătrìnhăđi năt

 Thi tăk ăgánăph năn iădungăvƠoăcácăđ ăm c

 Ti năhƠnhăth ănghi m,ăthuăth păd ăli u

 Vi tăbáoăcáo

t ănĕmă1969,ăt ăỦăt ngăđ năgi nălƠătáchăbi tăn iădungăvƠăhìnhăd ngăc aătƠiăli u.ă

Đ nhăd ngăc aăHTMLăchoăphépătrìnhăduy tăWebăhi năth ăcácătƠiăli u baoăg măc ăMedia.ăB năthơnăm tătƠiăli uăHTMLăch ălƠănh ngăt pătinăvĕnăb năđ năgi nă(ASCII)ă

v iănh ngăthẻă(tag)ăho cănh ngădòngămƣăđ căbi tămƠăm tătrìnhăduy tăwebăbi tăcáchăthôngăd chăvƠăhi năth ătrênămƠnăhình

Ph năl năcácăchu năv ătrìnhăduy tăvƠăcácăcôngăngh ăliênăquanăđ năWebăđ uă

đ că phátă tri nă b iă Worldă Wideă Webă Consortium (W3C) M tă s ă nhƠă phátă tri nătrìnhăduy tăt oăraăm tăs ăthẻăkhácăchoătrìnhăduy tăc aăh ,ăcácăthẻănƠyăđôiăkhiăch aă

đ căh ătr ăb iăcácătrìnhăduy tăkhác,ăvìălỦădoănƠy,ăm tătrangăWebăcóăth ăhi năth ăr tă

hi uăqu ă ătrìnhăduy tănƠy,ănh ngăl iăr tăt iă ăm tătrìnhăduy tăkhác.ă

2.1.2 Các thƠnh ph n c a trang HTML

2.1.2.1 Thẻ HTML

Khiă m tă trìnhă duy tă webă hi nă th ă m tă trangă HTML,ă trìnhă duy tă s ă đ că fileăHTMLănƠyăvƠătìmăki măănh ngăđo nămƣăđ cătr ngătrongăfileăg iălƠăthẻă(tag).ăCácăthẻăHTMLăđ căđánhăd uăb iăkỦăhi uă"<ă"vƠă">".ăD ngăchungăc aăm tăthẻăHTMLălà:

<tag_nameăăăthu c_tính1="giáătr ă1"ăăthu c_tính2ă= "giáătr ă2"ă >ăChu iăvĕnă

b n,ăMedia </tag_name>

Víăd :ă<B>ăHTMLă</B>

ThẻănƠyă (<B>)ăbáoăchoătrìnhăduy tăhi năth ă đo năvĕnăb năHTMLă lƠăch ăină

đ m.ăCácăthẻăHTMLăbáoăchoătrìnhăduy tăbi tăkhiănƠoăthìăc năinăđ m,ăinănghiêngăvĕnă

b n,ălƠmăvĕnăb nătr ăthƠnhăHEADER,ăliênăk t đ năm tătrangăkhác,ăầ

- TrongăthẻăHTMLă<tag_name>ăthìăgi aă"<"ăvƠătag_nameăph iăđ căvi tăli nă

(gi aăchúngăkhôngăcóăkho ngătrắng)

- Thôngăth ngăm tăthẻăHTMLăđ uăcóăm tăthẻăđóngă</tag_name>.ăTrongăthẻăđóngăcóăch aăkỦăt ă"/",ăkỦăt ănƠyăbáoăchoătrìnhăduy tăbi tăhi uăl căc aăthẻănƠyăk tă

thúcăt iăđơy.ăH uăh tăcácăthẻăHTMLăđ uăcóăthẻăk tăthúc.ă

- M iăthẻăHTMLăcóăth ăcóăm t,ănhi uăho căkhôngăcóăthu cătính.ăM iăthu cătínhăcóăth ăcóăcácăgiáătr ăho căkhôngăcóăcácăgiáătr ăN uăcóăgiáătr ăthìăcácăgiáătr ănƠyă

th ngăđ căđ tătrongăc păd uăngo căkép

- CácăthẻăHTMLăcóăth ăđ căvi tăb ngăch ăth ngăhayăch ăhoa.ăTrìnhăduy tă

webăkhôngăphơnăbi tăđ nhăd ngănƠy

- Khôngăgi ngănh ăl pătrìnhătrongăcácăngônăng ăkhác,ăv iătrangăHTML,ăn uăcóăm tăl i,ătrangăWebăv năđ căhi năth ăm cădùăcóăth ăkhôngăđúngăỦăđ ăc aănhƠă

thi tăk

- Trìnhăduy tăwebăcóăcácăb ăt ăv ngăcácăthẻăm ,ădoăv yăđôiăkhiăm tăthẻ đ că

nh năbi tăb iătrìnhăduy tănƠyănh ngăl iăkhôngăđ cănh năraăb iătrìnhăduy tăkhác.ăKhiă trìnhă duy tă khôngă hi uă m tă tagă nƠoă đó,ă nóă s ă t ă đ ngă b ă quaă thẻ đóă vƠă ch ă

thôngăd chăph năcònăl i

m tăph năc aătrangăweb

ToƠnăb ăcôngăvi căđ ăt o m tătrangăHTMLăn mătrongăc păthẻă<HTML>ăvƠă

</HTML>.ă Bênă trongă c pă thẻă nƠyă lƠă c pă thẻă <HEAD></HEAD>ă vƠă

<BODY></BODY>

CácăchúăthíchăHTMLăđ căbaoăb iă<! và >.ăDòngăvĕnăb năgi aăc păthẻănƠyăkhôngăđ căhi năth ătrongătrangăweb.ăKhiăd ch,ătrìnhăduy tăs b ăquaăcácăthƠnhăph nă

n mătrongăc păd uăchúăthíchă<! và >

Trìnhăduy tă webăb ăquaăcácăkho ngătrắngăđ uădòng,ănh ngă dòngă tr ng.ăDoă

v yăkhiăvi tăthẻăHTML,ătaăcóăth ăcanhăch nhăcácăthẻ,ăt oăcácădòngătr ngăngĕnăcáchăcácăchúăthích,ăầăsaoăchoăd ăqu nălỦămƠăkhôngăs ă nhăh ngăđ năn iădung,ăhìnhă

th căhi năth ăc aătrangăWeb.ăCácăchu năHTMLăquiăđ nh,ăm iăkỦăt ăxu ngăhƠngăs ă

đ căxemănh ăm tăkho ngătrắng.ăM tăchu iăcácăkỦăt ăkho ngătrắngăđ căxemănh ă

Nh ngătiêuăđ ăđ căth căhi nătrongăHTMLăb ngăcáchăđ tăđo năvĕnăb n gi aă

nh ngătagătiêuăđ ă(headingătag).ăD ngăcácătagătiêuăđ ăc aăHTMLălƠ:

<Hx> Text Appear in Heading </Hx>

xălƠăm tăs ăcóăgiáătr ăt ă1ăđ nă6ăch ăđ nhăkíchăcỡăc aătiêuăđ ăCácătiêuăđ ăđ căsắpăx păt ă1 (quanătr ngănh t)ăđ nă6ă(ítăquanătr ngănh t).ăCácădòngăhi năth ăcácăgiáă

tr ăchoăcácăHeadingăt ă1ăđ nă6ănh ăsau

MƣăHTMLăchoăhi năth ătrênălƠ:

Víăd : <H2 align="center"> Heading 2 - Center </H2>

2.1.3.1.2 Chia đo n văn b n vƠ xu ng dòng

- Xu ngădòng:ăkhiătrìnhăduy tăg pă2ăthẻă<BR>ăvƠă<P>ănóăs ăxu ngădòngăđ ăbắtăđ uăm tădòngăm i.ăS ăkhácăbi tăgi aă2ăthẻănƠyălƠă<BRă>ăs ăxu ngădòng,ă<P>ăs ăchènăm tădòngătr ngăvƠăxu ngădòng,ăh năn aăthẻă<BR>ăkhôngăcóăthẻăk tăthúcătrongăkhiă<P>ăcóăth ăcóăvƠăthẻă<P>ăcònăcóăthu cătínhăgi ngănh ăthẻăHeadingălƠăalignăđ ăchoăphépăcanhăch nhăvĕnăb nătrongăđo n Thẻă<P>ăcònăcóăm tăthu cătínhăkhácălƠăalignăcóăcácăgiáătr ăleftă(m căđ nh),ăcenterăvƠ rightăchoăphépăcanhăch nhăvĕnăb nătrongăđo nătrongăc aăs ătrìnhăduy t

- T oăđ ngăkẻ: Thẻă<HR>ăs ăt oăm tăđ ngăkẻăngangăquaătrangăWeb.ăCóăhaiăthu cătínhăth ngădùngălƠăsizeăvƠăwidth.ăThu cătínhăsizeăs ăxácăđ nhăkíchăth căc aă

đ ngăth ngă(tínhăb ngăpixel)ăv iăgiáătr ăm căđ nhălƠă2ăvƠăwidthăki măsoátăchi uă

r ngăđ ngăkẻ.ăTaăcóăth ăthi tăl păăgiáătr ăchoăWIDTHătheoăpixelăhayătheoăt ăl ă%ă

c aăc aăs ătrìnhăduy t.ăThẻănƠyăkhôngăcóăthẻăk tăthúc

- LƠmă vi că v iă cácă ki uă m uă (Style): HTMLă cungă c pă m tă s ă thẻă choă vi că

đ nhăd ngăvĕnăb nănh ăinăđ m,ănghiêng,ăầăCóăth ăli tăkêăm tăs ăthẻăc ăb nănh ăsau:

HTML tag K tăqu

<B>ăThisăisăBoldầ<B> This is Boldầ

<I>ăThisăisăItalicăầ</I> This is Italic ầ

<tt>ăThisăisăăTypewriterăầ</tt> This is Typewriter …

<U> This is Underline </U> This is Underline

2.1.3.1.3 M t s thẻ fortmatting khác

- Thẻă<Blockquote>: chènăm tăkh iăvĕnăb năđ cătrìnhăbƠyăth tăvƠoătrongăsoă

v iăph năthơnăvĕnăb n.ăV iătrangăHTML,ăđ aăvĕnăb năvƠoăc păthẻă<Blockquote>ăầătextăầă</Blockquote> đ ăt oăch cănĕngănƠy

- Thẻă <BaseFont>: thi tă l pă fontă ch ă m că đ nhă choă toƠnă b ă trangă webă vƠăkhôngă cóă thẻă k tă thúc.ă Thẻă nƠyă cóă cácă thu că tínhă lƠă face="fontă ch ",ă size="kíchă

th c"ăc aăch ăKíchăth căvĕnăb năcóăgiáătr ăt ă1ă(nh ănh t)ăđ nă7ă(l nănh t).ă

- Thẻă<Font>:ăthi tăl păcácăthu cătínhăv ăfontăch ăđ căhi năth ătrênătrangăweb.ăCácăthu cătínhăc aăthẻănƠyăbaoăg m:

+ Size: kíchăcỡăc aăch ăGiáătr ăthu cătínhănƠyăcóăgiáătr ăt ă1ă(nh ănh t)ăđ nă7ă(l nănh t).ăVíăd :ă<fontăsize="6"> Ngoài cách thi tăl păgiáătr ăd ngătuy tăđ iăchoăfontăch ănh ătrên,ătaăcònăcóăth ăthi tăl păgiáătr ăt ngăđ iăb ngăcáchăd aăvƠoăgiáătr ăkíchăcỡăđƣăcóăs nătr căđóăb ngăcáchăthêmăd uă"+"ă(tĕng)ăho că"-"ă(gi m)ăvƠoătr căgiáătr ăc aăthu cătínhăsize.ăVíăd :ă<fontăsize="+2">ăăs ătĕngăkíchăth căc aăfontăch ălênă2ăgiáătr ăsoăv iăfontăch ăhi năt i.ă

+ Face:ăTênăc aăfontăch ăđ căxácăđ nhăđ ăhi năth ăvĕnăb nătrênătrìnhăduy t

+ Color: Màuăsắcăc aăfontăch ăThu cătínhănƠyăđ căs ăd ngăkhiăc năthi tăl pămƠuăriêngăbi tăchoăđo n vĕnăb nătrongăthẻăfont.ăThôngăth ngămƠuăvĕnăb năđ căxácăđ nhătrongăthẻă<body>ăho căs ăd ngămƠuăm căđ nhăc aătrìnhăduy t.ă

Víăd ăv ăthẻăfont

<font size="-2">Font size:2 - color:red - face:vni-times</font><br>

Font size:4 - color:red - face:vni-times</font>

</body>

</html>

- Thẻă<Pre>:ăHi năth ăd ngăch ăđánhămáyăvƠăgi ănguyênăcácăkho ngătrắngăvƠă

d uăxu ngădòng

- Thẻă<Sub>:ăVĕnăb nătrongăthẻănƠyăs ăđ căvi tăd iăd ngăSubscript.ă

- Thẻă<Sup>:ăVĕnăb nătrongăthẻănƠyăs ăđ căvi tăd iăd ngăSupperscript.ă

- Thẻă<Big>ăvƠă<Small>:ăĐo năvĕnăb năn mătrongăthẻăs ăcó font-sizeăd ngă

ch ăl năho cănh ăt ngă ng

- Thẻă<Marquee>:ăVĕnăb năn măgi aăhaiăthẻănƠyăs ăch yăquaăch yăl iătuỳătheoăcácăgiáătr ăthu cătínhăđ căthi tăl p

2.1.3.2 Chèn hình nh vƠo trang HTML

Cóă nhi uă hìnhă nhă đ că h ă tr ă trênă Internetă nh :ă *.PICT, *.GIF, *.TIFF,

*.BMP,ă*.JPG,ă*.JPEGầăvƠăcácăhìnhă nhănƠyăđ căl păv iăflatform.ăTuyănhiênăd ngăchu năhi năth ătrongăm tătrangăwebălƠăGIFă(GraphicsăInterchangeăFormat).ăGIFănénă

cácăthôngătinăc aăhìnhă nhă(lƠmăgi măkíchăth căc aăt pătin)ăvƠăchuy nănóăthƠnh mã

nh ăphơnăđ ăchuy năquaăm ngăInternet.ăM tăd ngăhìnhă nhăkhácăth ngăhayăđ căs ă

d ngătrongăwebălƠăJPGăho căJPEGă(đ căđ tătênăsauăkhiănhómăJointăPhotographicăEngineeringăGroupăthi tăk ăraăd ngănƠy)

Đ ăchènăm tăhìnhă nhăvƠoătrangăweb,ăs ăd ngăthẻă<IMG >.ăThẻănƠyăkhôngăcóăthẻăk tăthúc.ăTrongăthẻănƠyăcóănhi uăthu cătínhănh ăsau:

+ăSRC:ăcóăgiáătr ălƠăđ ngăd năc aăfileăhìnhă nh.ăĐ ngăd nănƠyăth ngăđ căxácăđ nhălƠăcácăđ ngăd năt ngăđ iăho căđ ngăd năđ yăđ ăt ăm tăwebsiteăkhác.ă

V iăđ ngăd năt ngăđ i,ăđ ătruyăc păđ năth ăm căc păchaătaăs ăd ngăhaiăd uăch măvƠăd uăx ă:" /".ăă

Víăd :ă

<IMGăSRC="Images/h1.gif">ăăChènăhìnhăh1.gifătrongăth ăm căconăImages

<IMGăSRC=" /Images/h1.gif">ăChènăh1.gifăt ăth ăm căngangăhƠngăv iăth ăm că

hi năhƠnhătênălƠăImages

<IMGăSRC="www.microsoft.com/images/h1.gif">ăChènăhìnhăh1.gifătrongăth ăm căimagesăc aăwebsiteăcóădomainălƠămicrosoft.comă

+ăAlign:ăăcóăcácăgiáătr ătop,ămiddle,ăbottomă(m căđ nh),ăleft,ăcenter,ărightăs ă

đi uăkhi năv ătríăc aăvĕnăb năsoăv iăhìnhă nhătrong hàng

+ăAlt="text":ălƠăđo năvĕnăb năhi năth ăt iăv ătríăhìnhătrongăcácătr ngăh p:ăkhiă

ng iăs ăd ngătrìnhăduy tăkhôngăh ătr ăhình,ătắtăvi cătrìnhăbƠyăhìnhă nhătrongătrìnhăduy t,ăkhiăhìnhăch aăđ căt iăxong,ăKhiăđ aăconătr ăvƠoăvùngăhìnhă nh

+ Width, Height:ăCóăgiáătr ălƠăcácăs ănguyên,ălƠăgiáătr ăxácăđ nhăchi uăr ngăvƠăchi uăcaoăc aăhìnhătheoăpixels.ă

+ăHspace:ăKho ngăcáchătínhăb ngăpixelăc aăvĕnăb năxu tăhi năxungăquanhăăt iăhaiăbiênăd căc aăhìnhă nh

+ăVspace:ăGi ngănh ăthu cătínhătrênănh ngătínhătheoăchi uăđ ng

+ăBorder:ăthi tăl păđ ngăbiênăchoă nhătínhătheoăpixel.ăN uăkhôngămu năth yă

2.1.3.3 MƠu s c vƠ c u trúc cho n n

Trongăm tătrìnhăduy tăweb,ătaăđ căs ăd ngăcácămƠuăc aăh ăth ngăđ ăt oămƠuăchoăvĕn b năvƠăchoăn năc aătrangăweb.ăM iămƠuăđ căxácăđ nhăd aătrênăcácăgiáătr ăRed-Green-Blueă(RGB)ăc aănó.ăBaăs ănƠyăcóăgíaătr ă(vi tătheoăh ăth păphơn)ăt ă0ăt iă

255, m iăs ăth ăhi năc ngăđ ăc aăthƠnhăph nămƠuătheoăth ăt ăRed-Green-Blue Giáătr ăl mănh tăc aăc ă3ă(255-255-255)ăs ăchoăraămƠuătrắngăvƠăgiáătr ănh ănh tă(0-0-0)ăs ăchoăraămƠuăđen.ăT tăc ăcácămƠuăđ căbi uădi năb iăb ăbaăRGBăkhácănhau Cácă mƠuă đ că thi tă l pă trongă tƠiă li uă HTMLă b ngă cácă s ă hexaă cóă d ngă

#xxyyzz.ăTrongăđóăx,ăy,ăzălƠăcácăgiáătr ăt ăă0ăđ năF.ăxxălƠăgiáătr ăc aămƠuăred,ăyyălƠă

c aămƠuăGreenăvƠăzzălƠămƠuăBlue.ă

ThẻăBODYăchoăphépătaăthêmăvƠoăcácăthu cătínhăv ămƠuăsắcăc aătrangăweb.ă

<Body bgcolor="#xxxxxx" text="#xxxxxx" Link="#xxxxxx" Vlink = "#xxxxxx"> Trongăđóăm iăgiáătr ăxăcóăgiáătr ăt ă0ăđ n F

+ Bgcoloră=ămƠuăn n

+ Text:ăMƠuăc aăvĕnăb nătrongăph năthơnătrangăweb

+ Link:ăMƠuăsắcăc aăcácăliênăk tăsiêuăvĕnăb n.ăMƠuăm căđ nhălƠăBlue

+ Vlinkă(VisittedăLink):ăMƠuăsắcăc aăm tăm căsiêuăliênăk tăđƣăđ căxem.ăMƠuă

m căđ nhălƠăPurpleă(tím)

Ví d :ă

<html>

<body bgcolor="Green" text="#FF0000" link="blue" vlink="F0F0F0" >

Mau sau trong trang web <br>

<a href="#"> link 1 </A><br>

<B><A href="#">link 2</a></B>

</Body>

</HTML>

2.1.3.4 S d ng siêu đ ng d n (Hyperlink)

S căm nhăth tăs ăc aăWebălƠăkh ănĕngăt oăraănh ngăsiêuăliênăk tă(hyperlink)ă

đ năcácăthôngătinăliênăquan.ăNh ngăthôngătinănƠyăcóăth ălƠănh ngătrangăWebăkhác,ă

nh ngăhìnhă nh,ăơmăthanh,ăđo năphim,ăanimation,ăcácăch ngătrình,ăn iădungăc aăgopherăserver,ăm tătrìnhălog-inăvƠoămáyătínhă ăxaă(remote computer).v.v

WWWăs ăd ngăm tăcáchăđánhăđ aăch ăg iălƠăURLă(UniformăResorceăLocator)ă

đ ăch ăraănh ngăv ătríăc aănh ngăm cănh ăv y.ăNh ngăliênăk tănƠyăth ngăđ că

bi uădi năb iănh ngăch ămƠuăxanhăcóăg chăd iăvƠăđ căg iălƠăanchor

+ Thẻă<A>ăs ădùngăđ ăt oăcácăliênăk tăvƠăcóăd ngănh ăsau:

<A href=URL target=name> Text link, media </A>

Taăcóăth ăxemăAălà anchor, href là hypertext Reference

+ Thu cătínhătarget:ăTargetăcóăgiáătr ăđ căthi tăl pănh ătrongăb ngăd i Giáătr ụănghƿa

Name N pătrangăWebăvƠoătrongăc aăs ăhayăframeăcóătênălƠăname _blank N pătrangăWebăvƠoăc aăs ăm iăkhôngăcóătên

_parent N pătrangăwebăvƠoăc aăs ăchaăc aătrangăhi năhƠnh

_self Giáătr ăm căđ nh.ăN pătrangăwebăvƠoăc aăs ăhi năhƠnh

_top N pătrangăwebăvƠoăc aăs ăcao nh t

+ Thu cătínhăhref:ăĐ ngăd năc aăđ iăt ngăđ căliênăk tăt i.ăCácăăgiáătr ăc aăURLătrongăthu cătínhăhref.ăTaăcóăth ăphơnăchiaăraălƠmă2ălo iăliênăk t.ăLiênăk tăđ năcácăfileătrongăcùngăm tăwebsiteăvƠăliênăk tăđ năcácăfileătrongăwebsiteăkhác

●ăLiên k tătrongăcùngăwebsite:ăM iăgiáătr ăURLăđ uălƠăđ ngăd năt ngăđ iă(ralative link - đ ngăd nătínhăt ăth ăm căhi năhƠnh,ăth ăm căch aăliênăk tăđangă

so năth o)ăho căđ ngăd nătínhăt ăăDomain.ă

●ăLiênăk tăđ năm tăfileătrongăWebsiteăkhác:ăTaăs ăd ngăđ ngăd n URL tính

t ădomainăname

●ă Liênă k tă đ nă m tă bookmarkă trongă cùngă trangă hayă t íă m tă bookmarkă c aătrangăkhác:ăBookmarkălƠăm tăv ătríăđ căđánhăd uătrongătrangăweb.ăT ăm tăv ătrí,ătaăcóăth ăliênăk tăđ năv ătríăđƣăđ căđánhăd uănƠy.ăĐ ăliênăk tăđ năbookmark, ta thêm

d uă#ăvƠătênăbookmarkăngayăsauăgiáătr ăc aăURL.ăĐ ăt oăm tăbookmark,ătaăs ăd ngăthẻă<A>ăt iăv ătríăc năt oătheoăquiătắcăsau:ă<Aăname="tênbookmark">text</A>

2.1.3.5 Khung (Frame)

B ngăcáchădùngăkhungă(frame),ătaăcóăth ăngắtătrangăwebăthƠnhăcácăvùng riêng

bi tă(c aăs )ăvƠăth ăhi năcácăt pătinăHTMLăkhácănhauătrongăm iăvùng.ăV iăcáchănƠy,ă m iă vùngă cóă th ă chuy nă sangă trangă webă khácă trongă khiă cácă vùngă khácă v năkhôngăthayăđ i

Taăcóăth ăt oăkhungăb ngăcáchădùngăm tăh ăs ăđ nhănghƿaăt păkhungă- m tăt p tin HTMLăch ăch aăcácăthôngăătinăv ăcáchăth căphơnăchiaătrangăwebăvƠăcácăt pătinăs ă

đ căhi năth ătrongăm iăvùngăt ngă ng.ă

s ăcóăchi uăr ngăb ngăv iă50%ăc aăs ătrìnhăduy t,ăc tăth ăhaiăcóăchi uăr ngălƠă70ăpixelăvƠăc tăth ăbaăs ăcóăchi uăr ngăb ngăv iăph năcònăl iăc aăc aăs ătrìnhăduy tă(đ căth ăhi năb iăbi uăt ngă*ă).ă

CácăThẻăt oăframeăvƠăăthu cătính:

+ ThẻăFrameset: T oăm tăframe.ă

- SRC:ăXácăđ nhăđ ngăd năđ nătrangăc năn p

- Name:ăTênăc aăframe.ăS ăd ngăchoăthu cătínhătargetăc aăcácăliênăk t

- Scrooling:ă(yes,ăno,ăauto):ăXácăđ nhăvi căhi năth ăthanhăcu n.ă

<FRAME SRC="3.htm" NAME="frame3" SCROLLING="auto"> </FRAMESET>

</FRAMESET>

</HTML>

2.1.3.6 Các b ng (Tables)

V iăb ng,ătaăcóăth ăchiaăcácăph năkhácănhauăc a trang web thành các vùng và

đ tăcácăthôngătinăkhácănhauăvƠoăcácăvùngăđó.ăTaăs ăc măth yăr ngăcácăb ngăs ăr tă

h uăd ngăchoănhi uăcôngăvi căkhácănhau,ăt ătrìnhăbƠyăd ăli uătheoăd ngăc tăvƠăhƠngăchoăđ năvi căđ nhăv ăchínhăxácăcácăm cătrênăm tătrangăweb

+ Cĕnăb năv ăb ng

B ngăđ căđánhăd uăb ngăcácăthẻă<TABLE>ăvƠă</TABLE>.ăTrongăcácăthẻănƠy,ă taă s ă d ngă cácă thẻă đ nhă nghƿaă hƠngă c aă b ng,ă <TR>ă vƠă </TR>.ă Trongă m iăhƠng,ătaăl iăđ nhănghƿaăcácăôăc aăb ngăb ngăcácăthẻă<TD>ăvƠă</TD>.ăĐo nămƣăsauă

gi iăthi uăm tătrangăwebăch aăm tăb ngăc ăb n.ăTaăcóăth ăth yăb ngăđ căt oăraăb iă

đo nămƣănƠyătrongănh ăsau:

</BODY>

</HTML>

Vi căthi tăl păthu cătínhăBORDERăv iăgiáătr ă1ăs ăt oăraăđ ngăbiênădƠyă1ăpixelăxungăquanhăm iăôăc aăb ngăcũngănh ăxungăquanhăb ng.ăN uătaătĕngăgiáătr ănƠy,ăchi uădƠyăc aăđ ngăbiênăs ătĕngălên,ătuyănhiênăđ ngăkẻăgi aăcácăôăđ căgi ănguyênăchi uădƠyă1ăpixel.ă

2.2 Gi i thi u JavaScript

2.2.1 Gi i Thi u

Ngônăng ăđánhăd uăsiêuăvĕnăb năHTMLăcóăth ăch aăđ ngăm tăđ nhăd ngăchiă

ti tăv ăn iădungăvĕnăb năd i d ngăm tătrangăwebătƿnh.ăN iădungătrangănƠyăcóăth ăbaoăg măvĕn b năđƣăđ nhăd ng,ă nh,ăb ngăbi uăvƠăcácăsiêuăliênăk tăđ ăt oăraăm tă

ph ngăti nătrìnhăbƠyăthôngătinăm tăcáchă năt ng.ăTuyănhiên,ăngoƠiăs ăt ngătácă

m căđ ăth păc aăcácăsiêuăliênăk tăb ngăcáchăđ aăng iăs ăd ngăđiăt ătrangăweb này

đ nătrangăweb khác Nói chungăHTMLăkhôngăchoăphépăđápă ngăcácăthôngătinănh păvƠoăt ăphíaăng iădùngăngoƠiăvi căđ aăh ăt iăm tătrangăm i

HƣngăNetscapeăCommunicationsăthu căt păđoƠnăSunăMicrosystemsăđ aăraăm tă

gi iă phápă b ngă cáchă t oă raă m tă t pă cácă l nhă đínhă kèmă theoă trangă HTMLă g iă lƠăJavaScript.ăS ăd ngăJavaScript,ătaăcóăth ăxơyăd ngăcácăbi uăm u,ăcôngăc ătínhătoánă

và nh ngăgi iăphápăđ ăt oăraătrangăwebăđ ng.ăTr căkhiăcóăJavaScript,ăm iăho tă

đ ngăgi aăng iăs ăd ngăv iăs ăt ngătácăphíaămáyăch ăăph iăthôngăquaănh ngă ngă

d ngăweb h tăs c tinhăviăvƠămáyăch ăwebăcaoăc p

JavaScript là ngônă ng ă l pă trìnhă ki uă thôngă d chă dùngă choă Web.ă Cácă đo nă

ch ngătrìnhăvi tăb ngăngônăng ănƠyănhúngătrongăcácătrangăHTMLăvƠăs ăđ căcácătrìnhăduy tăthôngăd chăđ ăth căhi n.ăCácăngônăng ăScriptăchoăphépăphátătri nănhanhăvƠăd ădƠngăcácăch ngătrìnhăđ năgi năh nălƠăcácăngônăng ăd ngăbiênăd chănh ălƠăC,ăC++ Cúăphápăc a JavaScriptăl iăgi ngăv iăngônăng ăC,ăC++ JavaScriptăđ căh ă

tr ătrênăh uăh tăcácătrìnhăduy t

2.2.2 Cách th c vi t m t đo n mƣ JavaScript

Trongăc păthẻă<SCRIPT>: JavaScript đ căthêmăvƠoătrangăHTMLăb ngăcáchă

s ăd ngăc păthẻălƠă:<SCRIPTălanguage=”JavaScript“>ăvƠă</SCRIPT>.ăV ănguyênătắcăcácăđo nămƣăJavaScriptăcóăth ăđ tăt iăb tăkỳăv ătríănƠoătrongătrangăHTMLăvƠă

tr căthẻă</BODY>.ăTuyănhiênăđ ăd ăqu nălỦ,ăng iătaăth ngăđ tăchúngătrongăc păthẻă<HEAD>ă</HEAD>.ăChúngătaănênăđ tămƣăc aănóătrongăchúăthíchătrangăHTMLă(trongăc păd uă<!- - và - ->

Trongă cácă s ă ki nă (event): Mƣă JavaScriptă cònă đ că đ tă trongă cácă s ă ki nă(event)ă c aă thẻă HTMLă theoă cúă pháp:ă <tag_htmlă ă onEvent=”ă đo nă mƣă JavaScriptă

“>ầ</tag_html>.ă Taă th yă trongă cácă s ă ki nă (onEvent)ă mƣă JavaScriptă đ că đ tătrongăc păd uă“ ”.ăCácăđo nămƣănƠyăth ngălƠăcácăhƠmădoăng iăs ăd ngăvi tăho că

do ngônăng ăcungăc pănh măm căđíchăth căhi năm tătácăv ănƠoăđó

Cácăchúăthíchăc aăJavaScriptăgi ngănh ăngônăng ăC,ăC++ălƠăđ căđ tătrongă

c pă /*ă vƠă ă */ă n uă chúă thíchă trênă nhi uă dòngă vƠă sauă d uă //ă n uă ă trênă m tă dòng

M iăcơuăl nhăc aăJavaScriptăk tăthúcăb iăd uăch măph y(;)

Ví dụ:

<HTML>

<HEAD>

<SCRIPT language="JavaScript">

<! // năđ iăv iăcácătrìnhăduy tăkhôngăh ătr ăJavaScriptă

functionăshow_hello()ăă//ăVi tăm tăhƠmătênălƠăshow_hello

varăfullname=”NguyenăVanăAn”;ă//khaiăbáoăm tăbi n

alert(“chƠoăb nă“ă+ăfullname);ă/*s ăd ngăhƠmăc aăJavaScriptăxu tăra

h păh iătho iăthôngăbáo.ă*/

Cácăbi năJavaScriptăvƠăki uăd ăli u

- Bi nălƠătênăđ căgánăchoăm tăvùngănh ăs ăd ngăđ ăl uătr ăd ăli u.ăTr căkhiă

s ăd ngătaăph iăkhaiăbáoăbi năs ăd ngăt ăkhoáăvarătheoăcúăpháp:ăvar ten_bien;

JavaScriptăphơnăbi tăkỦăt ăhoaăvƠăth ng,ădoăv yăbi nătenăs ăkhácăv iăTen,ăvƠă

t ăkhoáăvarăph iălƠăch ăth ng.ăăăăăăă

Taăcũngăcóăth ăkhaiăbáoănhi uăbi năm tăl tăvƠăv aăkhaiăbáoăv aăgánăgiáătr Víăd : varăa,ăb=10,ăc=”Tuan”;

Ch ng 3: GI I THI U PH N M M THI T K WEB

ADOBE DREAMWEAVER CS5

3.1 Gi i thi u tổng quan v Adobe Dreamweaver CS5

AdobeăDreamweaverălƠăm tăcôngăc ăx ălỦăm nhăm ădƠnhăchoănh ngăng iăthi tăk ăweb,ăng iădùngăcóăth ăt ă mìnhăl pătrìnhăvƠăphátă tri nă ngăd ng webă ănhi uăc păđ ăN uăch ăd ngă ăm căđ ăhi uăbi tăch aănhi uăv ăcácăngônăng ăl pătrìnhă webă thìă Dreamweaveră v nă đápă ngă đ că nhuă c uă thi tă k ă Websiteă chuyênănghi p

Ng iădùngăkhôngăchuyênăch ăvi căc nătìmăchoămìnhăm tăm uătrangăwebăv aă

ý trên Internet, dùngăcôngăc ăso năth oăthôngăth ngăđ ăch nhăs aăhayăthêmăb tă

m tăs ăthƠnhăph n,ăr iăt oăraăm tăTemplate đ ăápăd ngăchoătoƠnăb ăWebsite

Hình 3.1 :ăGi iăthi uăph năm măAdobeăDreamweaverăCS5

NgoƠiănh ngătínhănĕngăkéoăth ăđ ăxơyăd ngătrangăweb,ăDreamweaver còn cungăc păm tămôiătr ngăvi tămƣăv iăđ yăđ ăch cănĕngăbaoăg măcácăcôngăc ăvi tămƣă(nh ătôămƠuămƣ,ăb ăsungăthẻătag,ăthanhăcôngăc ămƣ),ăh ătr ăcácăngônăng ăl pătrìnhăthôngăd ngăHTML, CSS, Javascript, ASP VBScript, PHP hay XML N uă

mu năxơyăd ngăcácă ngăd ngăwebăđ ngăch yătrênăcôngăngh ămáyăch ăASP.NET, ASP, JSP và PHP thìăDreamweaverăhoƠnătoƠnăcóăth ăđápă ngăđ căcácăd ăánăl nă

này

Giaoădi năs ăd ngăđ căb ătríătr căquanăvƠăthơnăthi năv iăng iăs ăd ng,ăkhuă

v căso năth oăđo nămƣăđ căđánhăs ăth ăt ă ăcácădòngăvƠăcóătôămƠuătheoăt ngăthẻăgiúpăti năchoăvi cătheoădõi,ăki mătra.ăNgoƠiăgiaoădi năm căđ nh,ăch ngătrìnhăcònă

h ătr ănhi uăd ngăgiaoădi năv iăcáchăb ătríăvíătríăthanhăcôngăc ăkhácănhau,ăt iătínhănĕngăDesigner (đ iăv iăphiênăb năDreamweaverăCS5)

Adobe Dreamweaver cóăth ăk tăh păcácăph năm măkhácăc aăhƣngăAdobeăđ ă

t oăraăm tăs năph măhoƠnăh o,ăvíăd ănh ăAdobeăPhotoshopăgiúpăch nhăs aăvƠăthi tă

k ăhìnhă nhăchoăWebsite

3.2 Tổng quan giao di n Dreamweaver

Hình 3.3 :ăB ngăcomponent

●ă VùngălƠmăvi căchính

Hình 3.4:ăVùngălƠmăvi căchính

●ăăB ngăthu cătính

Hình 3.5:ăB ngăthu cătính

●ăăB ngăch cănĕng

Hình 3.6:ăB ngăch cănĕng

3.3 Thi t k web v i Dreamweaver

3.3.1 T o th m c ch a toàn b web

Côngăvi căđ uătiên c aăvi căt oăraăm tătrangăwebălƠăph iăt oăraăm tăth ăm căđ ă

ch aătoƠnăb ănh ngăgìăliênăquanăđ nătrangăweb.ăTrongăth ăm căđóăs ăt oăti păcácă

th ăm căkhácădùngăđ ăch aăd ăli uănh : th ăm căImage,ăth ăm căFlash,ăth ăm căDataầ

3.3.2 T o m i m t trang web

Kh iăđ ngăDreamweaver,ătrongăc aăs ăđ uătiênăc aăch ngătrìnhăch năHTML

đ ăm ăm tătrangătƠiăli uăm i.ăHo căvƠoămenuăFile,ăch năNew.ăTrongăm căBlank Page ch năHTML vƠăb măvƠoănútăCreate đ ăkh iăt oăm tătrangăm iă(hìnhă3.7)

Hình 3.7:ăăKh iăt oătrangăweb

3.3.3 L u m t trang web

L uătrangăwebăl iăb ngăcáchăvƠoămenuăFile,ăch năSave ho căSave as.ăSauăđóă

l uătrangăwebăvƠoăth ăm căch aăb ăwebăv iăd ngă*.html

L uăỦ, trangăch ăc aăwebsiteăbắtăbu căph iăđ tătênălƠ index.html vƠăph iăđ că

l uăngayătrongăth ăm căch aăb web

3.3.4 Đ nh d ng trang web

Hình 3.8:ăThu cătínhătrangăweb Sauăkhiăl uăl iătrangăwebăthƠnhăcông,ăvƠoămenuăModifyăch năPage Properties

đ ăcƠiăđ tăđ nhăd ngăchoătrangăweb

Trongăh pătho i Page Properties ch nhăcácăthôngăs ăsauă(hìnhă3.8):

M căAppearance (HTML):

+ Background image: Ch nă Browseă vƠă duy tă đ nă t pă tină nhă dùngă lƠmă n nă choătrang web

+ Background: B măvƠoănútăb ngămƠuăvƠăch ăra mƠuăn năchoătrangăweb

+ Text: Ch ăđ nhămƠuăch ăm căđ nh

+ Link: Ch ăđ nhămƠuăch ăm căđ nhăkhiăb năt oăliênăk tăchoănó

+ Left margin: Nh păvƠoăkho ngăcáchăl ătráiăsoăv iăn iădungătrangăweb

+ Top margin: Nh păvƠoăkho ngăcáchăl ătrênăsoăv iăn iădungătrang web

+ Margin width: nh păvƠoăđ ăr ngăc aătrangăweb

+ Margin height: nh păvƠoăđ ăcaoăc aătrangăweb

M căTitle/Encoding:

Hình 3.9:ăTiêuăđ ăvƠăb ngămƣ

+ Title: Nh pătiêuăđ ăc aătrangăweb

+ăCácăm căkhácăc ăđ ăm căđ nh

Sauăkhiătinhăch nhăđ nhăd ngătrangăwebăxong,ăch năOKăđ ăthi tăl pă(hìnhă3.9)

3.3.5 Xem trang web trên trình duy t

TrongăquáătrìnhălƠmăvi c,ăn uămu năxemăth ătrang web trên trìnhăduy tăthì

b măCtrl+S đ ăl uăl i,ăsauăđóăb măphímăF12 đ ăxemătrênătrìnhăduy tăđƣăcƠiăđ tălƠmă

m căđ nhăho căb măch năvƠoăbi uăt ngăcóăhìnhătráiăđ tă ăbênătrênăvƠăch nătrìnhăduy tăc năxem

3.3.6 T o b ng trong trang web

3.3.6.1 Chèn b ng

N uămu năt oăm tătrangăwebăcóăcácăn iădungăđ căđ tă ăcácăv ătríăphùăh păvƠă

d ătìmăraătrênăcácăb ămáyătìmăki măthì c năt oăraăm tăb ngătr căkhiănh păn iădung.ă

Đ ăth căhi năvƠoăMenuăInsert,ăch năTable

Hình 3.10:ăThi tăl păthu cătínhăb ng

H pă tho iă Tableă hi nă ra,ă nh pă s ă dòngă trongă m că Rows,ă s ă c tă trongă m căColumns,ăđ ăr ngăc aăTableătrongăm căTable width vƠătrongăm căBorder thickness

nh păvƠoăgiáătr ăđ ăl năc aăkhungătrongăb ngăsauăđóăb măOKă(hìnhă3.10)

3.3.6.2 Đ nh d ng b ng

B măchu tăvƠoăđ ngăkhungăc aăb ng,ăkhungăthu cătínhăc aăb ngăhi năraăbênă

d iănh ăhìnhă3.11

Hình 3.11:ăĐ nhăd ngăb ng

3.3.6.3 Thay đổi c u trúc b ng

Hình 3.12:ăThêmădòngăvƠoăb ng TrongăquáătrìnhălƠmăvi c,ăb ng t oăraăcóăth ăch aăphùăh p,ăcóăth ăthayăđ iăc uătrúcăc aăb ngăv iănh ngăn iădungăsau:

+ăThêmădòng:ăch nădòngămu năchènăthêmăm tădòngăm iăphíaăsauănó.ăCh năModify > Table > Insert Rows or Columns

Trongăc aăs ăhi năra,ăđánhăd uăch nătr căm căRows và Below the Selection Trongăm căNumber of rows,ăđánhăs ădòngămu năchènăvƠăb măOKă(hìnhă3.12) +ăThêmăc t:ăch năc t mu năchènăthêmăc tăm iăphíaăbênăph iănó.ăTh căhi năl iăcácăthaoătácăt ngăt ănh ăthêmădòngănh ngăđánhăd uăch nătr căch ăColumns + Xóa dòng: ch nădòngămu năxóa,ăch năModify > Table > Delete row (ho că

b măchu tăph iăvƠoădòngămu năxóa,ăch năTable > Delete row)

+ Xóaăc t:ăch năc tămu năxóa,ăvƠoăModify > Table > Delete column (ho că

b măchu tăph iăvƠoăc tămu năxóa,ăch năTable > Delete column)

+ Tr năô:ăch năcácăôămu nătr n,ăch nă Modify > Table > Merge cells (ho că

b măvƠoăbi uăt ngătr năôă ăd iăkhungăthu cătính)

+ Táchăô:ăch năvƠoăôămu nătách,ăch nă Modify > Table > Splits cells (ho că

b măvƠoăbi uăt ngătáchăôă ăd iăkhungăthu cătính)

+ Canh l ăvĕnăb nătrongăô

Hình 3.13:ăCanhăl ăchoăvĕnăb nătrongăô

3.3.7 Chèn hình vào trang web

Hình 3.14:ăThu cătínhăc aăhìnhă nh

3.3.7.2 Chèn nh đ ng flash, video clip vƠo trang web

Vào Insert > media >ăch năSWF ho căFLV tùyătheoăđ nhăd ngăt pătinăc năchèn.ăSauăđóăduy tăđ n Fileăflashăho căFileăVideoăvƠăb măOK