Bi Gi ng Mn Thi t K Web

Ph n 1: Ngn Ng Thi t K Web HTML

Chng 01

T NG QUAN V THI T K WEBSITE

Cc khi ni m So n th o trang web Cc th c a t p tin HTML Lm ti v xem m ngu n

I. CC KHI NI M 1. Khi ni m WebTnh, Web ng WEB TNH: c xy d ng b ng cc ngn ng HTML, DHTML dng thi t k cc trang web c n i dung t c n thay i v c p nh t. Thch h p v i c nhn, t ch c, doanh nghi p v a v nh m i lm quen v i mi tr ng Internet. o u i m: Thi t k ho p: Trnh by n t ng v v ph n m thu t chng ta c th hon ton t do trnh by cc t ng trn ton di n tch trang. T c truy c p nhanh v khng m t th i gian trong vi c truy v n c s d li u nh cc trang web ng. Chi ph u t th p: Chi ph xy d ng website tnh th p v khng ph i xy d ng cc c s d li u, l p trnh v chi ph cho vi c thu Hosting. . . Kh khn trong vi c thay i v c p nh t thng tin: Mu n thay i v c p nh t n i dung thng tin ph i bi t v ngn ng html, s d ng c cc chng trnh thi t k ho , thi t k web, c p nh t file ln server. Thng tin khng c tnh linh ho t: Do n i dung c thi t k c nhu c u v thng tin tng cao th s khng p ng c. Kh tch h p, nng c p, m r ng: Khi mu n m website tnh h u nh l ph i lm m i l i website. nh nn khi

o Nh c i m c b n: -

r ng, nng c p m t d

Web ng: Web ng l thu t ng c dng ch nh ng website c c s li u v c h tr b i cc ph n m m pht tri n web.

o V i web ng, thng tin hi n th c g i ra t 1 c s d li u khi ng i dng truy v n t i m t trang web. Ch ng h n ng d ng thng m i i n t (m t c a hng tr c tuy n) trng by catalogue s n ph m trn website hay theo di kho hng, khi m t m t hng c giao, ngay l p t c nh ng trang c lin quan n s n ph m ph n nh s thay i ny. o Web ng th ng c pht tri n b ng cc ngn ng l p trnh tin ti n nh PHP, ASP, ASP.NET, Java, CGI, Perl, v s d ng cc c s d li u quan h m nh nh Access, My SQL, MS SQL, Oracle o Thng tin trn web ng lun m i v n d dng c th ng xuyn c p nh t thng qua vi c s d ng cc cng c c p nh t c a cc ph n m m qu n tr web . o V v y website c h tr b i c s d li u l phng ti n trao i thng tin nhanh nh t v i ng i dng Internet. i u d nh n th y l nh ng website th ng xuyn c c p nh t s thu ht nhi u khch hng t i thm hn. o T t c cc website Thng m i i n t , cc m ng thng tin l n, cc website c a cc t ch c, doanh nghi p ho t ng chuyn nghi p trn Net u s d ng cng ngh web ng. C th ni web ng l website c a gi i chuyn nghi p ho t ng trn mi tr ng Internet.
Bin so n: Dng Thnh Ph t Trang 1

Bi Gi ng Mn Thi t K Web

Ph n 1: Ngn Ng Thi t K Web HTML

2. M ng Internet: M ng my tnh ton c u H th ng m ng c a cc m ng. Ti n thn ban u l m ng ARPANET(T ch c Advanced Research Projects Agency) c a M sng l p 1969. Ph c v trao i d li u gi a cc tr ng i h c & B qu c phng. 3. Cc d ch v c b n trn Internet WWW-Wold Wide Web: D ch v trao i,tm ki m truy c p thng tin trn m ng theo giao th c HTTP. c s d ng thng qua trnh duy t Web Email Eletronic Mail-Th i n t : D ch v trao i cc thng i p cho nhau SMTP(Simple Mail Tranfer Protocol) Pop3(Post office protocol 3) c qu n l b i cc Mail server nh:phetitc@yahoo.com,webmaster@clbtinhoc.net,phetit@hcm.fpt.vn FTP File Transfer Protocol Truy n t i t p tin : D ch v trao i t p tin gi a cc my trn Internet th ng c dng Download & Upload cc trang web t ng i thi t k n cc my ch thng qua cc chng trnh FTP nh FTP Explorer, FlashFXP. Chat Tn g u: D ch v cho php ng i dng trao i tr c tuy n v i nhau qua m ng internet b ng vn b n, m thanh, hnh nh Nh : AOL, Yahoo messenger

4. HTTP-Hyper Text Tranfer Protocol: Giao th c dng giao ti p v i cc trang Web.5. HTML-Hyper Text Makeup Language: Ngn ng nh d u siu vn b n dng thi t k trang Web. 6. WebPage-Trang Web: L m t t p tin vn b n so n th o theo ngn ng m r ng l HTML ho c HTM. 7. Web Site: Chuyn khu Web t p h p cc trang web thu c 1 ch th . 8. Home Page: Trang u tin-Trang ch c a 1 Website(Index.htm, Default.htm . . .) 9. WebServer: My ch web-My tnh c u hnh m nh, lu tr cc trang Web k t n i th ng xuyn v i m ng Internet cho php cc my khc truy c p thng tin. 10. Tn mi n-Domain Name-Web Server Name: phn bi t m i Web Server c m t a ch IP v c nh x b i 1 tn (VD:www.vietnamnet.vn). c xem nh tn giao d ch c a cng ty, t ch c trn Internet.Bao g m m qu c gia nh :Vi t Nam: .VN, Anh: .UK, M : .US, Nh t:.JP...) v 1 s lnh v c. .Com : Thng m i .Edu : T ch c gio d c .Net : Cc m ng thng tin .Info : Cc m ng thng tin .Int : T ch c qu c t .Org : Cc t ch c khc .Gov : T ch c chnh ph .Mil : T ch c qun s HTML c ph n

s h u 1 tn C th k t h p lnh v c v i m qu c gia nh www.tuoitre.com.vn . mi n ph i tr chi ph hng nm thng qua cc cng ty y quy n bn tn mi n. 11. Hosting: Khi hon t t website ph i c ghi lu vo 1 webserver no th m i truy c p c thng th ng l cc server c a ISP (Nh cung c p d ch v Internet hay n v chuyn d ng). Ty theo dung l ng, bng thng v m t s h tr m chi ph khc nhau. 12. URL-Uniform Resource Location: Website Trang ch m c a ch truy c p c a trang Web - 1 t p tin trong

http://Webservername//File.html nh khng c n khai bo khi truy c p VD:http://www.thoitrangtre.com.vn T c l: http://www.thoitrangtre.com.vn/Index.htm

Bin so n: Dng Thnh Ph t

Trang 2

Bi Gi ng Mn Thi t K Web

Ph n 1: Ngn Ng Thi t K Web HTML

13. Browser: Trnh duy t Web dng InternetExplorer, Netscape,FireFox. II.SO N TH O TRANG WEB

c v hi n th cc trang Web. Ph bi n hi n nay l:

1. Chng trnh so n th o:Trang web l 1 t p tin vn b n khng nh d ng, ch a cc th (Tag). Vi t b ng m ngu n HTML trn chng trnh so n th o vn b n khng nh d ng nh: NotePad. Kh i ng : Start/Program/Accessories/NotePad Ghi ch: N u s d ng ch c d u, th ph i Thi t l p b ng m Unicode cho trnh g VietKey, Unikey, Ch n Font Unicode trong trnh so n th o (Format / Font Arial , Tahoma, . . .)

2.

t tn, Lu & M t p tin:T p tin lu tr c ph n m r ng l: .htm ho c .html Save as type: AllFilesEncoding: UTF-8 (N u n i dung c d u) Save

a. Lu t p tin: T i c a s so n th o: File/SaveFilename: Tn.html (VD: VD01.html)

b. Lu l i v i tn khc: T i c a s so n th o File/Save As c. M t p tin so n th o: T i c a s so n th o: File/Open Open Ch n t p tin c n m

3. Xem trang Web sau khi so n th o:Cch 1: M th m c lu tr tin .htm Cch 2: Kh i ng trnh duy t File/Open Ch n Browser K t qu hi n th

Double Click t p Ok

tm t p tin c n m

Bin so n: Dng Thnh Ph t

Trang 3

Bi Gi ng Mn Thi t K Web

Ph n 1: Ngn Ng Thi t K Web HTML

III.CC TH C A T P TIN HTML 1. Khi Ni m: T p tin HTML l 1 vn b n ch a cc th (Tag)Th m

t o cc thnh ph n c a ti li u. ng</Tnth >

Th ng

C u Trc T ng Qut C a Th :<Tnth [Thu ctnh]>Thnh ph n ch u tc Tn c a th V d 1:

t trong c p ngo c nh n: < . . . > C ho c khng c cc thu c tnh <B> Cho Cc B n </B> N i dung s in m

V d : <Font Size=4> Chc cc b n h c t t </Font> N i dung ch c c 4Ghi ch: Cho php cc th l ng nhau, Cho vi t cc th trn cng 1 dng ho c nhi u dng. Nn vi t c c u trc 2. C u Trc T ng Qut C a T p Tin HTML:
<HTML><HEAD> <TITLE> N i dung tiu </TITLE> </HEAD> <BODY> Ph n d li u c a trang web </BODY> </HTML>

<HTML> . . . </HTML> : B t <HEAD> . . . </HEAD> : Ph n <TITLE> N i dung tiu 3. V D Minh H a

u v k t thc t p tin HTML u trang web

</TITLE> : Hi n th n i dung trn thanh tiu

<BODY> N i dung trn trang </BODY> : Hi n th n i dung trn trang. T o t p tin v i n i dung nh sau
<HTML> <HEAD> <TITLE> GI I THI U </TITLE> </HEAD> <BODY> Cho m ng cc b n n v i HTML </BODY> </HTML>

Bin so n: Dng Thnh Ph t

Trang 4

Bi Gi ng Mn Thi t K Web

Ph n 1: Ngn Ng Thi t K Web HTML

4. V n

Ng t Dng T o t p tin v i n i dung nh sau:

<HTML> <HEAD> <TITLE> > BAI THO CO HAI MO </TITLE> </HEAD> <BODY> C HI M Th th n ng chi u m t khch th Say nhn xa r ng ni xanh l Kh tr i l ng l v trong tr o Th p thoang r ng m, c hi m </BODY>
</HTML>

Khng xu ng dng nh so n th o m ch t m r t dng ty theo kch th c c a s trnh duy t. ng t dng t o o n m i, t o dng tr ng: gi cc ph n t trn cng 1 dng: t vn b n trong c p th <P>...</P>

ng t dng khng t o o n m i: Chn th <BR> t i v tr mu n ng t dng t vn b n trong c p th <Nobr>...</Nobr> v s hi n thanh

Vn b n s b che khu t khi chi u r ng c a s trnh duy t khng cu n ngang. VD: T o t p tin v i n i dung nh sau
<HTML> <HEAD><TITLE> > BI TH C HI M </TITLE></HEAD> <BODY> C HI M <NOBR> Th th n ng chi u m t khch th<BR> Say nhn xa r ng ni xanh l<BR> Kh tr i l ng l v trong tr o<BR> Th p thong r ng m, c hi m </NOBR> </BODY> </HTML>

Bin so n: Dng Thnh Ph t

Trang 5

Bi Gi ng Mn Thi t K Web

Ph n 1: Ngn Ng Thi t K Web HTML

5. T o Ch Thch

t cu ghi ch vo c p th <!-- Cu ch thch-->

N i dung cu ch thch khng hi n th trn trnh duy t IV. LM TI TRANG WEB XEM M NGU N 1. Lm Ti N i Dung Khi ang hi n th m t trang web trn trnh duy t c th xem v i u ch nh n i dung m ngu n t trnh so n th o. Khi lu l i n i dung i u ch nh, t trnh duy t ta c th xem l i k t qu theo n i dung m i - Lm ti: Click bi u t ng Refesh (Ho c F5) 2. Xem M Ngu n: T trnh duy t c th xem m ngu n trang Web: Click Menu View/Source

Bin so n: Dng Thnh Ph t

Trang 6

Bi Gi ng Mn Thi t K Web

Ph n 1: Ngn Ng Thi t K Web HTML

Chng 02

CC TH

NH D NG VN B N
o o o o o
nh d ng k t , nh d ng o n S d ng mu Chn ng k ngang v k t c bi t Hi u ng chuy n ng ch Vn b n danh sach

I. 1.

nh D ng K T nh d ng Ki u dng - Style <B> N i dung vn b n </B> <I> N i dung vn b n </I> <U> N i dung vn b n </U> <S> N i dung vn b n </S> : : : : N i dung vn b n c in m N i dung vn b n c in nghing N i dung vn b n c g ch d i (chn) N i dung vn b n c g ch ngang

2. Thay

i Font, Size

<FONT FACE=FontName1, FontName2> N i dung vn b n </FONT> Xc nh Font cho N i dung vn b n, N u my truy c p khng c FontName1 s l y FontName2 . . . s l y Font m c nh c a trnh duy t. <BASEFONT SIZE=n> Xc nh c nh l 3. Xc ch cho c ti li u gi tr n: T 1 n 7 (8,10,12,14,16,24,36) m c

<FONT SIZE=n> N i dung vn b n </FONT> nh c ch cho n i dung vn b n VD: T o t p tin v i n i dung nh sau
<HTML> <HEAD> <TITLE>BAI THO CO HAI MO</TITLE> </HEAD> <BODY> <P><Font size=4><B>C HI M</B></Font></P> <NOBR><I> Th th n ng chi u m t khch th<BR> Say nhn xa r ng ni xanh l </I><BR> <B><i> Kh tr i l ng l v trong tr o<BR> Th p thong r ng m, c hi m</B></I> </NOBR> </BODY> </HTML>

Bin so n: Dng Thnh Ph t

Trang 7

Bi Gi ng Mn Thi t K Web

Ph n 1: Ngn Ng Thi t K Web HTML

3. Tao ch s Trn/D i <SUP> Vn b n </SUP> : <SUB> Vn b n </SUB> : VD:

<HTML> <HEAD> <TITLE> VAN BAN CHI SO TREN DUOI </TITLE> <BODY> Vn b n c ch s trn:AX<SUP>2</SUP>+BX+C=0<BR> Vn b n c ch s d i : H<SUB>2</SUB>O </BODY> </HEAD> </HTML>

T o ch s trn cho vn b n T o ch s d i cho vn b n

II.

NH D NG

O N

1. Thi t l p l trang <BODY Leftmargin=n1 Topmargin=n2> ..... ... </BODY> Thi t l p l tri trang (LeftMargin), l trn trang (TopMargin)Theo gi tr n1,n2 n v tnh l Pixcel 2. Canh l H ng: Left Right Center Justify 3. T o vn b n o n vn b n o n vn b n </P> Canh tri o n vn b n Canh ph i o n vn b n Canh gi a o n vn b n Canh m c u vn b n

<P Align=H ng>

<CENTER> Cc thnh ph n c n canh gi a</CENTER> m c l dng vn b n nh d ng khc cc dng vn b n trong n i dung dng t o m c ph n, chng. M i th c ch c nng phn o n, c p 1 l n nh t, c p 6 nh nh t, c th k t h p thu c tnh canh l .

<H1> N i dung vn b n
<H2> N i dung vn b n .....
Bin so n: Dng Thnh Ph t

m c c p 1</H1> m c c p 2</H2>

Trang 8

Bi Gi ng Mn Thi t K Web

Ph n 1: Ngn Ng Thi t K Web HTML

<H6> N i dung vn b n VD: <H3 Align=Center>

m c c p 6</H6>

m c c p, 3 canh l gi a</H3>

4. T o vn b n ch thch, trch d n <CITE>Vn b n ch thch</CITE> Vn b n ch thch nging, cng dng so v i vn b n tr c . III. S D NG MU xc l p mu c th dng Tn mu hay Tr th p l c phn tng ng. Tn mu Black Red Blue Navy Lime White Rurple Yellow Xanh X. m en Tr #000000 #FF0000 #0000FF #000800 Tn mu Olive Teal Maroon Gray Fuchsia Green Silver Aqua Nu vng Nu s m Nu Xm H ng L B c Ng c Tr #808000 #008080 #800000 #808080 #FF00FF #008000 #C0C0C0 #00FFFF 1. Cc m mu

V.Chanh #FFFF00 Tr ng .Ta Vng #FFFFFF #800080 #FFFF00

2. Xc l p mu chung cho trang Web Dng cc thu c tnh c a th BODY b n lin k t... . . . . . N i dung trang Web. . . . . </BODY> BgColor: Mu n n trang Text: Mu vn b n Link: Mu lin k t cha truy c p VLink: Mu lin k t truy c p Alink: Mu lin k t khi ang tr Mouse 3. Xc l p mu cho vn b n Dng thu c tnh Color c a th FONT VD: <FONT FACE=Tahoma COLOR=Red SIZE=3> Cng ngh thng tin </FONT>
Bin so n: Dng Thnh Ph t Trang 9

xc l p: mu n n, mu vn b n, mu cc vn VLink=Mu Alink=Mu>

<BODY BgColor=Mu Text=Mu Link=Mu

xc l p mu: cho n i dung vn b n ch

nh.

<FONT COLOR =Tr mu> N i dung vn b n </FONT>

Bi Gi ng Mn Thi t K Web

Ph n 1: Ngn Ng Thi t K Web HTML

IV.

NG K NGANG V K T

C BI T.

1. ng K Ngang <HR Size=n1 Width=n2 Align=H ng Color=mu Noshade> <HR> : T o ng k ngang di b ng chi u r ng c a s Size: Width: dy r ng (Pixcel ho c %)

Align: canh l Left(Tri), Center(Gi a),Right(Ph i) Color: Mu NoShade: Khng c bng VD: <HR Size=3 Width=50% Align="Right"> <HR Size=2 Width=75 Align=Center"> 2. K t c bi t Nh p M tn hay M s K t M tn &copy; TM &trade; &reg; c a k t tng ng M s K t M tn &#169; &quote; &#153; Kho ng tr ng &nbsp; &#174; M s &#34; &#160;

V d : T o t p tin HTM v i n i dung nh sau

<HTML> <BODY Bgcolor=Aqua> <P Align=Center><H3>Cc k hi u c bi t:</H3><P> <HR><Font Color=Blue> B n quy n: &#169; <BR> Thng hi u: &#153; <BR> Thng hi u ng k: &reg; <BR> Email: phetcm&#64;yahoo.com <BR></Font> <HR SIZE=3 WIDTH=50% NOSHADE> </BODY> </HTML>

V. HI U NG CHUY N NG CH <Marquee Behavior=Hi u ng Direction=H ng Loop=n1 ScrollDelay=n3 BgColor=Tr mu> Chu i k t </Marqueee>
Bin so n: Dng Thnh Ph t

ScrollAmount=n2

Trang 10

Bi Gi ng Mn Thi t K Web

Ph n 1: Ngn Ng Thi t K Web HTML

Trong : Hi u ng: +Scroll:B t +Slide:B t u t 1 c nh bi n m t u t 1 c nh d ng l i c nh kia c nh kia c nh kia u

+Alternate:B t n1: S l n l p

u t 1 c nh chuy n ng c l i

Hu ng: Left, Right, Up, Down H ng b t n2: Kho ng cch(Pixel) gi a m i l n l p n3: Th i gian ch gi a m i l n l p. VD: T o t p tin HTM v i n i dung nh sau

<HTML> <Marquee Behavior="alternate" Direction="right"> <Font color="red" Size=5> Cho cc b n! Chc cc b n h c t t</Font> </Marquee> </HTML>

VI. VN B N DANH SCH 1. Danh Sch Khng nh S Th T u m i o n. M i Danh sch khng nh s th t l: T o ch m c, hoa th (Bullets) m c s th t vo u dng. a. T o danh sch khng nh s th t <UL> <LI> M c 1 c a danh sch <LI> M c 2 c a danh sch ....... <LI> M c n c a danh sch </UL> VD: T o t p tin HTM v i n i dung nh sau
<HTML> <BODY> <H3> CHNG TRNH O T O THI T K WEB </H3> <UL> <LI> Ngn ng HTML &amp FrontPage <LI> DreamWeaver MX <LI> Khai thc v Qu n tr Domain, Hostting <LI> Ngn ng k ch b n JavaScript; <LI> Ngn ng l p trnh ASP &amp; SQLServer </UL> </BODY> </HTML>

Bin so n: Dng Thnh Ph t

Trang 11

Bi Gi ng Mn Thi t K Web

Ph n 1: Ngn Ng Thi t K Web HTML

b. Thay

i ki u dng cho ch m c Ap d ng cho t t c cc m c Ap d ng cho 1 m c ch nh :

<UL Type=Tr thu c tnh> : <LI Type= Tr thu c tnh> Cc tr thu c tnh: Disc: D u trn en (M c square: Hnh vung en Circle: Hnh trn r ng nh) c

VD: T o t p tin HTM v i n i dung nh sau

<HTML>

<BODY> <H3> CHNG TRNH O T O THI T K WEB</H3> <UL TYPE="circle"> <LI> Ngn ng HTML &amp; FrontPage <LI> DreamWeaver MX <LI TYPE="square">Qu n tr Domain, Hosting <LI TYPE="square"> Ngn ng k ch b n JavaScript; <LI TYPE="disc"> Ngn ng ASP &amp; SQLServer </UL> </BODY> </HTML>

2. Danh Sch C

nh S Th

Danh sch c nh s TT l: Lo i danh sch c nh th t theo s hay theo k t (Numbering) u m i o n. a. T o danh sch c nh s th t
<OL> <LI> M c 1 c a danh sch <LI> M c 2 c a danh sch ....... <LI> M c n c a danh sch </OL> Bin so n: Dng Thnh Ph t Trang 12

Bi Gi ng Mn Thi t K Web

Ph n 1: Ngn Ng Thi t K Web HTML

VD: T o t p tin HTM v i n i dung nh sau

<HTML> <BODY> <H3> CHNG TRNH O T O THI T K WEB </H3> <OL> <LI> Ngn ng HTML &amp FrontPage <LI> DreamWeaver MX <LI> Khai thc v Qu n tr Domain,Hostting <LI> Ngn ng k ch b n JavaScript; <LI> Ngn ng l p trnh ASP &amp; SQLServer </OL> </BODY></HTML>

b. Thay

i cch nh s th t Ki u STT cho ton vn b n danh sch Ki u STT cho 1 m c ch Ki u hi n th 1,2,3 . . . a,b,c . . . A,B,C. . . i,ii,iii . . . I,II,III . . . nh

<OL Type=Tr > <LI Type= Tr > M c c a danh sch Cc tr ki u Tr 1 a A i I

VD: T o t p tin HTM v i n i dung nh sau

<HTML> <BODY > <H3> CHNG TRNH O T O THI T K WEB </H3> <OL TYPE="A"> <LI> Ngn ng HTML &amp FrontPage <LI> DreamWeaver MX <LI> Ngn ng k ch b n JavaScript; <LI> Ngn ng ASP &amp; SQLServer </OL> </BODY> </HTML>

Bin so n: Dng Thnh Ph t

Trang 13

Bi Gi ng Mn Thi t K Web

Ph n 1: Ngn Ng Thi t K Web HTML

3. Ch

nh gi tr kh i

u Tc ng t t c cc m c trong danh sch tr khi m c trong Tc ng m c ch nh v cc m c sau

<OL Start=Tr > : dnh sch ch nh khc.

<LI Value = Tr > M c c a danh sch : n u cc m c ny khng ch nh khc. VD: T o t p tin HTM v i n i dung nh sau

<HTML> <BODY > <H3> CHNG TRNH O T O THI T K WEB </H3> <OL Type="1"> <LI> Ngn ng HTML &amp FrontPage <LI> DreamWeaver MX <LI> Ngn ng k ch b n JavaScript; <LI> Ngn ng ASP &amp; SQLServer </OL> <H3> CHNG TRNH O T O THI T K WEB NC</H3> <OL Type="1" START="5"> <LI> Ngn ng XML <LI> Ngn ng Visual Basic.Net <LI> Cng ngh ASP.Net </OL> </BODY> </HTML>

3. Danh Sch Dng

nh Ngha l p danh sch thu t ng . M i m c c a danh sch g m 2 ph n:

Khi bo thu t ng nh ngha thu t ng <DL> <DT> Khai bo thu t ng <DD> nh ngha thu t ng 1 <DD> nh ngha thu t ng 2 ....... </DT> ....... </DL> VD: T o t p tin HTM v i n i dung nh sau

Bin so n: Dng Thnh Ph t

Trang 14

Bi Gi ng Mn Thi t K Web

Ph n 1: Ngn Ng Thi t K Web HTML

<HTML> <BODY Text="Blue"> <B>CHNG TRNH O T O </B> <DL> <DT><Font Color="Red">TIN H C VN PH NG</FONT> <DD> Tin h c cn b n &amp; WindowsXP <DD> S an Th o vn b n MicroSoft Word <DD> X l b ng tnh MicroSoft Excel <DT><FONT Color="Red"> TIN H C QU N L </FONT> <DD> L p trnh CSDL MicroSoft Access 2003 <DD> Thi t k trnh chi u MicroSoft PowerPoint </DL> </BODY> </HTML>

4. Danh Sch L ng Nhau K t h p cc th <UL>, <OL>, <LI> VD: T o t p tin HTM v i n i dung nh sau
<HTML><BODY > <H3>CHNG TRNH O T O NGNH WEBSITE</H3> <OL TYPE="I"> <LI><B> THI T K WEBSITE </B> <OL TYPE = 1"> <LI> Ngn ng HTML &amp; ForntPage <LI> Ngn ng k ch b n JavaScript <LI> Media Flash MX <LI> Thi t k giao di n PhotoShop <LI> Thi t k WebSite Dreamweaver MX </OL> <LI><B> L P TRNH WEBSITE </B> <OL TYPE = "1"> <LI> Phn tch &amp; Thi t k CSDL <LI> L p trnh CSDL ASP.NET &amp; SQL Sever <LI> Qu n tr Website ti t t nghi p </B> <LI><B> </OL> </OL> </BODY></HTML>

l p danh sch l ng nhau

Bin so n: Dng Thnh Ph t

Trang 15

Bi Gi ng Mn Thi t K Web

Ph n 1: Ngn Ng Thi t K Web HTML

Chng 03

T CH C WEBSITE, D NG HNH NH, THI T L P LIN K T

o o o o T ch c lu tr Website S d ng hnh nh Thi t l p lin k t Nhng t p tin Media

I. T

CH C LU TR

WEBSITE

1. Cc t p tin HTML c a 1 Website 1 Website bao g m r t nhi u trang Web webpage (t p tin HTML). Khi lu tr ph i t ch c c c u trc thu n ti n trong qu n l, i u ch nh v sau. a ch (Domain Name) v 1 th m c. Khi a Website ln WebServer c c p 1

2. Trang ch c a 1 Website Trang ch (Home page) l c n p khi truy c p m khng r t p tin no (Ch nh p URL c a 1 Website) Th ng qui nh l: index.htm,default.htm,home.htm 1 Website u t trong cng 1 th m c. n ng d n.

VD: Truy c p: http://www.tuoitre.com.vn Ngha l: http://www.tuoitre.com.vn/Index.htm 3. T ch c lu tr a. T ch c Site 1 th m c T t c cc t p tin HTML v cc t p tin khc Thu n l i cho Website nh , t t p tin, khng c n quan tm

b. T ch c Site th m c theo ch c nng Bn trong th m c chnh, t ch c cc th m c con ch a cc t p tin c n i dung lin quan v i nhau. T i th m c chnh ch ch a t p tin ch m c v cc hnh nh c n thi t.(th m c chnh ch a trang ch , m i th m c con l 1 ho c 1 nhm cc trang con) Bn trong th m c chnh, t ch c cc th m c con ch a cc t p tin cng ki u. + Th m c chnh ch a trang ch v cc th m c con + 1 th m c con ch a cc trang HTML, + 1 th m c con ch a cc t p tin hnh nh. . . . . Thu n l i s d ng chung t p tin, d thay th b sung cc t p tin vo site. d. T ch c Site h n h p K t h p cch t ch c Site theo ch c nng v Cch t ch c Site theo ki u t p tin. 4. a. a ch tng a ch tuy t i n 1 t p tin ph i ghi y a ch URL. http://ServerName/ ng d n/ Tn t p tin VD: http://vietnamnet.vn/Tinkinhte/quocte/tin07.html
Bin so n: Dng Thnh Ph t Trang 16

c. T ch c Site th m c theo ki u t p tin

i&

a ch tuy t

i.

Khi tham chi u

Bi Gi ng Mn Thi t K Web

Ph n 1: Ngn Ng Thi t K Web HTML

b.

a ch tng

i. n 1 t p tin cng th m c t p tin chnh: Tn t p tin n 1 t p tin khc th m c t p tin chnh: ng d n/Tn t p tin ch th m c c p trn th m c ch a t p tin chnh: T p tin HTML

Khi tham chi u Khi tham chi u VD:

Ghi ch: S d ng ../

T p tin hnh nh tham chi u: Logo.jpg : S ghi: ../../Images/Logo.jpg II. S D NG HNH NH Cc ki u t p tin hnh nh cho php: .jpg,gif,.png,.bmp S d ng hnh nh c n cn nh c: SL nh/1trang, kch th c v c i thi n t c truy c p. Ph i lu hnh nh v tr no trong th m c chnh c a Website phn gi i, nh m 1. Khi qut

2. Thi t l p nh n n cho trang S d ng thu c tnh Background trong th BODY <BODY Background=Tn t p tin Bgproperties =Fixed> Tn t p tin : L a ch tuy t i or tng i c a t p tin nh ng Bgproperties =Fixed : Hnh nh m b t

VD: B sung thu c tnh nh n n vo 1 trang html b t k. Gi s t p tin nh lu trong th m c Images. T p tin Htm lu trong th m c Htmls <BODY Background ="../Images/Bgr06.JPG" > 3. Chn hnh nh vo trang Web <IMG Src=Tn t p tin Alt=Cu ch thch> Tn t p tin : L VD: a ch tuy t i or tng i c a nh Cu ch thch: Hi n th trn trnh duy t khi tr Mouse vo hnh <Img Src="../Images/P02.jpg"> <Img Src="../Images/P06.jpg" Alt= y l Bill Gates"> nh kch th c nh chn <IMG Src=Tn t p tin Width=n1 Height=n2> n1, n2 : L t l % so v i kch th c i t ng ch a n ho c kch th c tnh theo Pixel. VD: <IM Src="../Images/P03.jpg" Width="150" Height="100"> nh chn kch th c r ng 150Pixel cao 100Pixel <IMG Src="Images/P03.jpg" Width=30%" Height=50%"> nh chn kch th c r ng =30% chi u r ng c a s . 50% Chi u cao c a s .

Bin so n: Dng Thnh Ph t

Trang 17

Bi Gi ng Mn Thi t K Web

Ph n 1: Ngn Ng Thi t K Web HTML

T o khung vi n cho nh <IMG Src=Tn t p tin Border=n> n: dy ng vi n <IMG Src=Tn t p tin Align=H ng> H ng: Top: Ph n u th ng hng v i dng u VB. u VB. u VB. Middle: Ph n gi a th ng hng v i dng Bottom: Ph n cu i th ng hng v i dng Canh l hnh nh.

Left: Bin tri nh cn th ng l tri trang, VB bao quanh bn ph i nh. Right: Bin ph i nh cn th ng l ph i trang, VB bao quang bn tri nh. N u khng khai bo m c nh l thu c tnh Bottom VD: T o t p tin HTM v i n i dung nh sau
<HTML> <BODY > <H3 Align=Center>My tnh "b tay" v i ti s n c a Bill Gates</H3> <Img Src="Images/Billgates.jpg" Align=Right Width=120 o Nha" Border=1> Alt="Bill Gates (tri) v T ng th ng B <P Align=Justify> Bill Gates, ng i sng l p Cng ty ph n m m Microsoft v l ng i giu nh t th gi i, cho bi t c quan thu c a M ph i lu tr cc d li u ti chnh c a ng vo m t my tnh c bi t, b i ti s n B o c a ng qu nhi u.<BR>Pht bi u t i m t h i ngh do Microsoft t ch c Lisbon, th Nha, ng ni r ng m t my tnh thng th ng khng th x l ng cc s li u ti chnh c a ng ...</P> </BODY>

III. THI T L P LIN K T TRONG TRANG WEB 1. Khi qut Cc siu lin k t (Hyper Link) l c t li c a t p tin HTML cho php truy c p trang khc trn cng my tnh hay my tnh khc. Ti li u lin k t c th l cc t p tin: Hnh nh, m thanh, Multimedia, HTML . . . Khi Click vo lin k t s truy c p t i L lin k t VD: a ch truy c p s th c hi n t ng n cc

2. Lin k t c c b (Local Link) n cc ti li u Trn cng my . <A HREF = a ch lin k t> Nhn lin k t </A> <A HREF =/Htmls/Gioithieu.htm> Gi i thi u</A>

Bin so n: Dng Thnh Ph t

Trang 18

Bi Gi ng Mn Thi t K Web

Ph n 1: Ngn Ng Thi t K Web HTML

n 1 v tr trn cng trang Web <A HREF =#Tn ch > Nhn lin k t </A> Khai bo ch n: <A NAME =Tn ch> . . . </A> Ghi ch: Tn ch b t c v tr no trn cng t p tin. VD: T o t p tin HTM v i n i dung nh sau
<HTML> <BODY Background="Images/bg.jpg" Bgproperties =Fixed> <A Name="#Dau"><H3 Align="center">CHNG TRNH O T O</H3></A> 1.K thu t vin tin h c<BR> <A Href="VD13.html"> 2.Chuyn ngnh Website </A> <HR> <Font Size=4 Color=Red>K thu t vin tin h c </Font><BR> <A Href="#HP1"> H c ph n I </A><BR> <A Href="#HP2"> H c ph n II </A><BR> <A Href="#HP3"> H c ph n III </A> <OL Type="I"> <A Name="#HP1"> <LI> Tin H c Cn B n <OL> <LI>T ng quan c u trc my tnh <LI>H i u hnh Windows &amp;Internet </OL></A> <A Name="#HP2"> <LI> Tin H c Vn Ph ng <OL> <LI> Microsoft Word <LI> MicroSoft Excel </OL></A> <A Name="#HP3"> <LI>Tin H c Qu n L <OL> <LI> Microsoft Access <LI> MicroSoft PowerPoint </OL></A> </OL></P> <P align=Right><A Href="#Dau"> u trang </A></P> </BODY> </HTML>

Bin so n: Dng Thnh Ph t

Trang 19

Bi Gi ng Mn Thi t K Web

Ph n 1: Ngn Ng Thi t K Web HTML

3. Lin k t t L lin k t Lin k t

xa(Remote Link) n ti li u lu tr trn my khc. n1 a ch URL Nhn lin k t </A>

<A HREF =http://URL>

VD: Lin k t VD: n1 a ch Email

<A HREF =http://www.vietnamnet.vn> Website tin t c vi t nam</A> <A HREF =Mailto: S m chng trnh mail m c a ch Email>Nhn lin k t </A> nh so n v g i th.

<A HREF =Mailto:phetcm@yahoo.com> G i Mail cho ti </A>

4. Dng hnh nh lm nhn lin k t. <A HREF=http://URL><Img Src=T p tin nh></A> VD: 5. M M c <A HREF =http://www.vietnamnet.vn> <Img Src=../Images/vietnamnet.jpg> </A> lin k t trong 1 c a s ring. nh cc lin k t c m trn c a s hi n t i m 1 c a s ring th s d ng:

<A HREF=. . . . TARGET=_Blank>Nhn lin k t </A> VD: <A HREF=http://www.vietnamnet.vn Targer=_Blank > <Img Src=../Images/vietnamnet.jpg> </A> VD: T o t p tin HTM v i n i dung nh sau
<HTML><BODY Background ="Images/Bgr07.JPG" Bgproperties=Fixed Link="Black" link="Blue"> <P Align="center"> <Font Size=4 Color="BLUE"> <B>DANH B WEBSITE</B> </Font> </P> <DL> <DT><B>Tin T c</B> <DD><A Href="http://www.vietnamnet.vn"> Tin t c vi t nam</A> <DD> <A Href="http://www.Tuoitre.com.vn"> Bo tu i tr </A> <DT> <B>Gi i tr</B> <DD> <A Href="http://www.nhacso.net target="_balnk"> Nh c s Online</A> <DD> <A Href="http://www.ngoisao.net target="_balnk">Gi i thi u ngi sao</A> </DL> <B>Lin k t qu ng co</B><BR> <A Href="http://www.echip.com.vn" target="_balnk"> <Img Src="Images/echip.jpg" width="130" heigh="60"> </A> <A Href="http://www.vietnamnet.vn" target="_balnk"> <Img Src="Images/vnnet.jpg" width="130" heigh="60"></A><HR> Lin h :<A Href="Mailto:phetcm@yahoo.com">G i mail </A> </BODY></HTML>

Bin so n: Dng Thnh Ph t

Trang 20

Bi Gi ng Mn Thi t K Web

Ph n 1: Ngn Ng Thi t K Web HTML

6. T o lin k t cho t p tin Media <A HREF=Tn t p tin Media" target=_blank> Nhn lin k t </A> Nhn lin k t: l vn b n ho c hnh nh Target=_blank: M c a s ring. VD: T o t p tin HTM v i n i dung nh sau
<HTML> <Body> <H3> Nh c Onlie</H3> <A HREF="chiaxa.wma" target=_blank> Chia xa </A><BR> <A HREF="Noibuonchimsao.wmv">N i bu n chim so </A> <Body> </HTML>

7. Lin k t DownLoad t o lin k t Download ti li u: Ta chuy n ti li u thnh cc d ng t p tin Zip,Rar, pdf, .doc . . . sau t o lin k t n cc t p tin ny. IV. NHNG T P TIN MEDIA Cc d ng t p tin m thanh thng d ng trn Internet: .wav, .mp3, .wmv, .wma,.mpeg, .Ra, .Rm . . . hay cc t p tin Flash : .swf <Embed Src=Tn t p tin AutoStart=True|False Align=H ng Widht=n1 Height=n2> Align, Width, Height : Cc thu c tnh i u khi n Control VD: T o t p tin HTM v i n i dung nh sau
<HTML> <Embed SRC="chiaxa.wma" AutoStart=False > <BR><BR> <Embed SRC="Tainan.mpeg" AutoStart=true width=300 Height=250> </HTML>

Bin so n: Dng Thnh Ph t

Trang 21

Bi Gi ng Mn Thi t K Web

Ph n 1: Ngn Ng Thi t K Web HTML

Chng 04

THI T K B NG BI U, BI U M U, KHUNG
o o o Thi t k b ng bi u Table Thi t k bi u m u Form Thi t k bi u khung - Frame

I. THI T K B NG BI U- TABLE 1. Thi t K B ng Bi u - Form B ng l m t c u trc g m nhi u hng giao v i nhi u c t l k thu t trnh by cc thnh ph n trn trang web (Thi t k b c c trang web) C n pht th o c u trc b ng tr c khi thi t k .
<TABLE><CAPTION>N i dung tiu b ng </CAPTION> <TR> <TH>N i dung tiu c t 1</TH> <TH>N i dung tiu c t 2</TH> .... </TR> <TR> <TD>N i dung 1 dng 1 </TD> <TD>N i dung 2 dng 1 </TD> .... </TR> ....... </TABLE>

2.

nh D ng Table
<TABLE BORDER=n BORDERCOLOR=Tr mu> ....... </TABLE>

a. T o ng vi n.

S dng thu c tnh Border trong th Table, n tnh b ng Pixel, m c T o ng vi n c bng.

<TABLE Border=n BorderColorDark=Tr BorderColorLight=Tr > ....... </TABLE>

nh l 2.

BorderColorDark: Mu b. Thi t l p

BorderColorLight: Mu sng. r ng v canh l b ng

....... </TABLE> <TABLE Widht=n Alight= Center / Left/ Right >

n:

r ng c

nh tnh b ng pixel Ho c

r ng tng

i % kch th c c a s .

Center: Canh gi a c a s trnh duy t, Vn b n khng cu n bao quanh. Left: Canh tri c a s trnh duy t, Vn b n s cu n bao quanh bn ph i b ng. Right: Canh ph i c a s trnh duy t, vn b n s cu n quanh bn tri b ng.
Bin so n: Dng Thnh Ph t Trang 22

Bi Gi ng Mn Thi t K Web

Ph n 1: Ngn Ng Thi t K Web HTML

c. Xc l p mu, nh n n cho b ng, hng, . Dng thu c tnh Bgcolor v Background trong cc th tng ng. Thu c tnh ngha <Table Bgcolor=Tr > Mu n n cho ton b ng <Table Background=Image.gif> nh n n cho tan b ng <TR Bgcolor=Tr > Mu n n cho tan hng <TR Background=Image.gif> nh n n cho tan hng <TD Bgcolor=Tr > Mu n n cho <TD Background=Image.gif> nh n n cho <TH Bgcolor=Tr > Mu n n cho tiu <TH Background=Image.gif> nh n n cho tiu d. nh d ng . Canh l n i dung trong :Dng thu c tnh Align cho cc th tng ng Thu c tnh ngha <TD Align=H ng> Canh theo chi u ngang cc h ng: Left, Right, Center <TD VAlign=H ng> Canh theo chi u d c cc h ng: Top, Bottom, Middle <TH Align=H ng> Canh hng tiu theo chi u ngang <TH VAlign=H ng> Canh hng tiu theo chi u d c <TR Align=H ng> Canh theo chi u ngang cc trong hng <TR VAlign=H ng> Canh theo chi u d c cc trong hng Kho ng cch trong v gi a cc CellSpacing=n Kho ng cch gi a cc . CellPadding=n Kh ang cch quanh n i dung Pixel m c nh l 2 Pixcel. t o Thi t k b ng trn : Dng thu c tnh RowSpan v ColSpan cho th TD. TH c nhi u hng/c t. T T T T o c o c o tiu o tiu ngha cao n hng r ng n c t c cao n hng c r ng n c t

Thu c tnh <TD RowSpan=n> <TD ColSpan=n> <TH RowSpan=n> <TH ColSpan=n>

VD: T o t p tin HTM v i n i dung nh sau

<HTML> <BODY> <TABLE Border=1 BorderColor= "Purple" CellSpacing=0 Width=650> <Caption><H2> K T QU H C T P</Caption> <TR VAlign=Middle Align=Center BgColor="Lime"> <TH RowSpan=2 Width=150>H V tn<BR>H c Sinh</TH> <TH ColSpan=2 Width=150> Nm Sinh</TH> <TH RowSpan=2 Width=70> i m<BR>TB</TH> <TH RowSpan=2 Width=130> X p L ai</TH> </TR> <TR Align=Center BgColor="Lime"> <TH Width=75> Nam </TH> <TH Width=75>N </TH> </TR> <TR Align=Center> <TD Align="Left"> L Thanh Xun </TD> <TD> &nbsp; </TD> <TD> 1950 </TD> <TD> 8.5 </TD>

Bin so n: Dng Thnh Ph t

Trang 23

Bi Gi ng Mn Thi t K Web

Ph n 1: Ngn Ng Thi t K Web HTML

<TD> Gi i</TD> </TR> ..... <TR Align=Center> <TD Align="Left"> Lu Th M c</TD> <TD>1985 </TD> <TD> &nbsp; </TD> <TD> 4.5 </TD> <TD> Km </TD> </TR> <TR Align="Center" BgColor="Lime"> <TD ColSpan=3> <B>T ng s h c sinh t:</B></TD> <TD ColSpan=2> <B>4 H c sinh<B></TD> </TR> </TABLE></BODY> </HTML>

II. THI T K BI U M U FORM 1. Gi i Thi u Form Bi u m u l m t k thu t cho php ch trang web giao ti p v i ng i truy c p. Trn trang web ng i dng c th c yu c u tr l i m t cu h i, cho 1 ki n, ch n m t m c trong danh sch nh tr c . . . ch trang web s ti p nh n v x l thng tin y. C u trc t ng qut <FORM Cc thu c tnh> N i dung bi u m u Nt g i d li u </FORM> 2. nh Ngha Form D ng 1: Ch trnh by khng g i d li u <Form Name=Tn> Cc i t ng trong Form </Form> D ng 2: Thng tin t Form chuy n cho a ch Mail <Form Name=Tn Method=Post Action=Mailto: Cc i t ng trong Form </Form> a ch mail>

D ng 3: Thng tin t Form chuy n ln Webserver <Form Name=Tn Method=Post Action=Trang x l> Cc i t ng trong Form </Form> 3. Thi t K Cc Thnh Ph n a. H p vn b n Text box
Bin so n: Dng Thnh Ph t Trang 24

Bi Gi ng Mn Thi t K Web

Ph n 1: Ngn Ng Thi t K Web HTML

<Input Type=Text Name=Tn Value=Tr m c b. H p vn b n Password <Input Type=Password Name=Tn Value=Tr m c c. Nt g i d Ho c li u Submit Button

nh Size=n Maxlength=m>

n: chi u di Textbox tnh b ng s k t , m: S k t t i a c th nh p nh Size=n Maxlength=m>

n: chi u di Textbox tnh b ng s k t , m: S k t t i a c th nh p <Input Type=Submit Value=Nhn> Ho c <Button Type=Submit Value=Nhn> </Button><Button Type=Submit> <Img= nh> </Button> d. Nt h y d li u v a nh p - Reset Button <Input Type=Reset Value=Nhn > VD: T o trang Dangnhap.htm
<html> <body> <form>

<h3 align="center"> NG NH P DI N N</h3> Tn ng nh p: <input type="text" size="20"> <BR> M t kh u: <input type="password" size="20"> <BR> <input type="submit" value=" ng nh p"> <input type="reset" value="Ph c h i"> </Form> </body> </html>

VD: T o trang Timkiem.htm

<html> <body> <FORM name=f action="http://www.google.com.vn/search?+q"> <Img Src="../Images/google.gif" Width=80> <INPUT size=20 name=q> <input type="submit" value=Tm ki m"> </FORM </body></html>

Bin so n: Dng Thnh Ph t

Trang 25

Bi Gi ng Mn Thi t K Web

Ph n 1: Ngn Ng Thi t K Web HTML

e. Khung vn b n TextArea <TextArea Name=Tn Rows=n1 Cols=n2 Wrap> Vn b n m c Wrap: Cu n vn b n xu ng dng khi VD: T o trang Gopy.thm
<body> <Form method="POST" action="Mailto: phetcm@yahoo.com"> <h3 align="center"> NG GP KI N</h3> H v tn:<input type="text" size="40"><BR> N i dung gp :<textarea rows="3 cols="30"></textarea> <BR> <input type="submit" value="G i i" > <input type="reset" value="Ph c H i"> </Form> </body> </html> <html>

nh </TextArea>

n l ph i

f. Nt ch n Radio Button <Input Type=Radio Name=Tn Value=Tri Checked> g. H p ki m Checkbox <Input Type=CheckBox Name=Tn Value=Tri Checked> Value=Tr : Gi tr On/ Off khi g i ln Server VD: T o trang thamdo.htm
<html> <body> <form method="POST" action="Mailto: phetcm@yahoo.com"> <h3 align="center">PHI U THM D KI N</h3> Tn ng nh p:<input type="text" name="Ten" size="20"> Gi i tnh : <input type="radio" value="1" name="phai" checked >Nam <input type="radio" value=0" name="phai" >N <BR> Nh ng m c b n th ng quan tm trn Internet : <input type="checkbox" name="C1" value=1">Tin t c<br> <input type="checkbox" name="C3" value=1">Gi i tr<br> <input type="checkbox" name="C2" value=1">H c t p<br> <input type="checkbox" name="C4" value=1">M c khc<br> <input type="submit" value="G i i"> <input type="reset" value="Ph c H i"> </Form> </body> </html>

Bin so n: Dng Thnh Ph t

Trang 26

Bi Gi ng Mn Thi t K Web

Ph n 1: Ngn Ng Thi t K Web HTML

h. H p danh sch ch n Combobox <Select Name=Tn Size=n Multiple> <Option Value=D li u Selected> Chu i k t ..... </Select> Value=Tr : Gi tr g i ln Server Ghi ch: th c hi n lin k t khi ng i dng ch n 1 gi tr t ComboBox. Thm thu c tnh sau vo th <Select> onchange="window.open(this.options[this.selectedIndex].value,'_blank')" VD: T o trang Lienket.htm
<html><body> <FORM name=links> <H3>Lin k t website</H3> <SELECT onchange="window.open(this.options[this.selectedIndex].value, '_blank')" size=1> <Option selected>-------- Tin tuc ---------</Option> <Option value=www.laodong.com.vn>Bo lao ng</Option> <Option value=www.vnexpress.net>Tin Vi t Nam</Option> <Option value=www.tuoitre.com.vn>Bo Tu i Tr </Option> </SELECT> </FORM> </body></html>

<html> <body> <form method="POST" action="Mailto: phetcm@yahoo.com"> <h3 align="center">PHI U THM D KI N</h3> <Font size=2> <Table> <TR><TD>Tn ng nh p:</TD> <TD> <input type="text" name="Ten" size="40"> Gi i tnh : <input type="radio" value="V1" name="phai" checked >Nam <input type="radio" value="V2" name="phai" >N </TD> </TR> <TR><TD>M t kh u:</TD> <TD> <input type="password" name="T2" size="30"></TD> </TR> <TR><TD Colspan=2> S thch c a b n</TD> </TR> <TR><TD></TD> <TD> <select size="4" name="Sothich"> <option selected>Truy c p Internet</option> <option> c sch bo</option>

VD: T o t p tin HTM v i n i dung nh sau

Bin so n: Dng Thnh Ph t

Trang 27

Bi Gi ng Mn Thi t K Web

Ph n 1: Ngn Ng Thi t K Web HTML

<option>Xem Tivai</option> <option>Tham quan du l ch</option> <option>D o ph & Shopping</option> </select></TD> </TR> <TR> <TD COLSPAN=2> Nh ng m c b n th ng quan tm trn Internet</TD> </TR> <TR><TD></TD> <TD> <input type="checkbox" name="C1" value="ON">Tin t c<br> <input type="checkbox" name="C3" value="ON">Gi i tr<br> <input type="checkbox" name="C2" value="ON">Gc h c t p<br> <input type="checkbox" name="C4" value="ON">Cc m c khc</TD> </TR> website t t hn</TD> <TR><TD Colspan=2> N i dung gp </TR> <TR><TD></TD> <TD> <textarea rows="3" name="Noidung" cols="30"></textarea></TD> </TR> <TR><TD></TD> <TD> <input type="submit" value="G i i" name="Gui"> <input type="reset" value="Ph c H i" name="Phuchoi"> </TD> </TR></Form></Font> </body></html>

III. THI T K KHUNG - FRAME 1. Thi t K Khung - Frame L 1 k thu t chia trang web thnh nhi u Khung, m i khung hi n th 1 trang web ho c 1 t p tin nh. Khng s d ng th Body khi thi t k khung. <FrameSet Rows=Tr cc c t Cols=Tr cc dng> <Frame Name =Tn1 Src=Url1> ............. <Frame Name =Tnn Src=Urln> </FrameSet> + Kch thu c tuy t Url: i tnh theo pixel i theo c a s trnh duy t.

Tr cc c t, Tr cc dng: + % kch th c tng

a ch t p tin hi n th trong khung.

Ghi ch : Cho php thi t k khung l ng nhau

Bin so n: Dng Thnh Ph t Trang 28

Bi Gi ng Mn Thi t K Web

Ph n 1: Ngn Ng Thi t K Web HTML

2.

nh D ng Khung i b ng cch

a. Xc l p ng vi n. M c nh khung c t o c ng vi n l 5 Pixel. C thay th thay dng cc thu c tnh sau: <FrameSet FrameBorder=n1 FrameSpacing=n2 BorderColor=tr > ....... </FrameSet> n1=1/0: ng vi n hi n th (M c n2: dy ng vi n Tr : Tn mu cho ng vi n b. Xc l p kho ng cch l khung. M c nh kho ng cch n i dung v i khung l 8 Pixel. C th xc l p l khung b ng: nh)/khng hi n th

<Frame . . . . MarginWidth=n1 MarginHeight=n2>

n1: Kho ng cch l tri, ph i n2: Kho ng cch l trn, d i c. Xc l p thanh cu n. M c Tr : nh thanh cu n s hi n th khi kch th c khung khng <Frame . . . . .Scrolling=tr > Auto: Tr m c nh ch hi n th khi n i dung v t qu kch th c khung. Yes: Lun hi n thi No: Khng bao gi hi n thi d. C nh kch th c khung i khi ng i dng ko vi n khung. ngn c n vi c M c nh kch th c s thay hi u chnh kch th c 3. CH B c 1: cho n i dung.

<Frame . . . . . NoResize> NH KHUNG HI N TH CHO LIN K T. t tn khung cho t p tin thi t k khung. Dng thu c tnh Name c a th Frame.

B c 2: Xc nh ch n cho lin k t. Trong t p tin ch a lin k t, dng thu c tnh Target c a th <A Href> ch nh khung hi n thi VD: T o t p tin Tintuc.HTM v i n i dung nh sau
<html> <frameset rows="100,500" framespacing="0" border="0" frameborder="0" > <frame name="Top" scrolling="no" noresize src="Images/Banner.jpg" marginwidth="0" marginheight="0"> <frameset cols="150,600"> <frame name="Left" src="DMTin.HTM"> <frame name="Right" noresize src="Tinkt.HTM"> </frameset> </frameset> </html>

Bin so n: Dng Thnh Ph t

Trang 29

Bi Gi ng Mn Thi t K Web

Ph n 1: Ngn Ng Thi t K Web HTML

VD: T o t p tin DMTin.htm v i n i dung nh sau

<html> <body > <H3 Align= Center>TIN T C</H3> <a href="Tinkt.HTM" target="Right" >Kinh t </a><BR> <a href="TinCT.HTM" target="Right">Chnh tr </a> </body> </html>

Trang TinKT.htm
<HTML> <Body > <H3 ALIGN=CENTER> C m c ch ng khon: Knh t o v n cho nh u t?</H3> <img src="Images/tinchungkhoan.jpg" align=left width=120> <P Align=Justify><font size="2"> ngh cc cng ty ch ng khon, ngn hng ki m sot ch t M i y UBCKNN g i cng vn giao d ch v cho vay c m c mua c phi u, nh m h n ch r i ro. Gi i chuyn mn cho r ng, cha c n thi t ph i lo l ng, b i ch ng khon tng l d u hi u t t v v n trong t m ki m sot. Theo UBCKNN, n ngy 20-3 c kho ng 13 tri u c phi u cc lo i c c m c v i t ng gi tr kho ng ng. y ban c yu c u ph i h p v i Ngn hng Nh n c lin k t qu n l vi c cho 751 t vay v c m c ch ng khan cc ngn hng thng m i. </font></P> </Body> </HTML>

Trang TinCT.htm
<HTML> <Body > <H3 Align=Center>Lm vi c trong B ... online</H3> <img src="Images/tinbo.jpg" align=right width=120 > <font size="2"> <P ALign=Justify> M t lnh o S Ti nguyn - Mi tr ng & Nh t H i Phng ''ku'': n u khng o t o cn b g p th khng theo k p quy trnh lm vi c c a B nh t l p d ng tri t cng ngh thng tin trong gi i quy t cng vi c ra ng i, ra vi c v khoa h c. <b><BR> ng d ng cng ngh nhu n nhuy n vo cng vi c </b><BR> ng Mai i Tr c, B tr ng B Ti nguyn - Mi tr ng (TN&MT)<BR> T th i cn lm lnh o t nh Bnh nh p d ng nhu n nhuy n cng ngh thng tin trong qu n l i u hnh v cng l ng i u tin sng l p ra t Bnh nh i n t - m t trong nh ng t bo i nt a phng s m nh t.</Font></P> </Body> </HTML>

Bin so n: Dng Thnh Ph t

Trang 30