ỦY BAN NHÂN DÂN THÀNH PHỐ HÀ NỘI  GIÁO TRÌNH HTML VÀ THIẾT KẾ WEBSITE (Mã số giáo trình: )     !"#$#%&'$()#*#)"+#",#-& ".#*#/0(1$"2"333$  34 "#$#%&'#5##&6#7$8#&9"0"#+": 81$#;<".#&=#$1'>0"?'@ A4 "#:-$/##0;(B#CD(*4)+ 2* EFG4,#-"0""#H"".#C(I#C&.1$## ()"J?#1()&$14K+ 2EFGELFG#CB$ D#M "#%$4$)&$1EFGELFG<N&'O"##; '? 1 "#%$#"#&P(#&.&'O"(Q()5# ;'>H4 K+ 2EFG"#$ELFG<N&'O"#;4 R1$()<8".# AS"H()"#'>5#<$1#$ $+ 2TUV$$U$(( 8WXYV":XZ8$[ #3V": 3 $\<]483$ [ ":3^_833$ `4a#b4a8c$[$8F$ Udd YXW8F$ [<"YXW8c$[8[ 84e8"#f",g(&'O""0"#C ":8##$&M#5",' '? 1h4h".&(I )#$J"4$".()#1"#- 1#<$1? #(<333#=#4U#+#5N&.(#*#i #,(*(<$1<#$<#$3jY3jkV "0#S"l"0".&'O"4i"$<$h"l&i();+"# &'O"<m 2)i4$8"n".#*;+"#"#&9o 1pc". #<$1Q33$ #3$ [ <8#"0"#< ":5# ;3#'"".<q"#H"4U0";+"#&.&* =#I"#r"#$#%st"-"0"#C$#'"l".# A9#O":##""2$$8#)#$1 $8#t"&>(# #<0"#"0"t"#7$V<4R1"# '?&$1$+ 2o 68".#s$"#$8 A"#)"#786S($uv  ##""24K<Nt&)&'O""###EvG"#$ELvGI&w  #5EvGELvG"J(IL&.":"."#H"?#1&$1 ",&'O"1"# '?4 8 $<t#0#'#0"l":(1$"2"8"l "I#H"1#$#;#>&&0H&'O"#",(? <#$/05##0&.#'w(##8#5##&)84e4'@ 7&.##":&0#<=&#x4`8`d8 ]8e&"#f##<4 )$#&((1#":()Sy-w#: "#z&*".##;(#5##8.(1#&'O"8I Sy$1#,(*(#(0+#$('@&7"".8##w;5# ;$"3 $\<#vY{8#P("#+"#$'@#-( #xQ#,(*(&J";4 '@"n&#"i#*Y*B=D4Rx# #'?#:":1$()#'>#01&' ##;#4'@"$#'()&x##'?) |B$;".5D/7#>#*<$?B;".&}#D4 0"S($#P&'O"<t.~o1&7" {"#w##"(>4   HTML VÀ THIẾT KẾ WEB  !"#  $%&%'()*+,-*.*/01  2*%++&3456%78%-*9:;<=%>+'?-& &@ (60*%-*8-AB;  @&8%-*9C4<%?DE*F'&;G*FDH8%I8%-*96J"K L2&7,*M  N%L+& Chương I: NHỮNG KHÁI NIỆM CƠ SỞ. Chương II: TRÌNH BÀY TRANG. Chương III: DANH SÁCH VÀ BẢNG TRONG HTML. Chương IV: ĐƯA HÌNH ẢNH VÀO TÀI LIỆU HTML. Chương V: CÁC MỐI LIÊN KẾT SIÊU VĂN BẢN. Chương VI: BÀY TRÍ NỀN VÀ KHUNG. Chương VII: BIỂU MẪU STYLE VÀ CASCADING STYLE SHEET. Chương VIII: CÔNG CỤ SOẠN THẢO TRỰC QUAN WEB (Microsoft FrontPage 2003)  O#%*DE&@&&D$%C;%-*78%-*9:;<6J (60 AB;"%*B?P*%-*8-AB;"%*B*Q  %"5R N7S*#&*&*%TU5'&&S*&*%T FD$&O&&STOV 1 MỤC LỤC LỜI MỞ ĐẦU 1 CHƯƠNG I. NHỮNG KHÁI NIỆM CƠ SỞ 8 I.1. World Wide Web là gì? 8 I.2. HTML là gì? 11 I.3. Các đặc điểm của siêu văn bản 12 WON=X46H%4C9&604CJW ON=X46H%87%%S*F'&60*9*/7*F'&W AB;"%*B60*F'&YZ5B4'&BW I.4. Soạn thảo văn bản - những vấn đề chung 14 1WF'&!&+[ (60*F'&AB;W1 17*\ (W 17>+,*]+&W^ 113+*F_Y'N**0%=%S+ (W` 174C*K (a (B=BB*bWc Bài tập 18 CHƯƠNG II. TRÌNH BÀY TRANG 19 II.1. Tạo tiêu đề 19 II.2. Thẻ trình bày trang 20 W N*"#*\M 7*+N*MY'*\*Fd;0,*F'&1 Bài tập 26 CHƯƠNG III. DANH SÁCH VÀ BẢNG TRONG HTML 27 III.1. Các kiểu danh sách 27 WWe'"78&?7"#*9*/` We'"7?7"#*9*/c We'"77?G&Q' W1e'"74#%E4T=[&'+ III.2. Bảng biểu 31 WU+&3+*F_W  N*"#=D+)6J;<& 76ML2^ Bài tập 39 CHƯƠNG IV. ĐƯA HÌNH ẢNH VÀO TÀI LIỆU HTML 40 IV.1. Hình ảnh tĩnh 40 WWS4<1 W\f gh1 IV.2. Các thuộc tính của thẻ chèn hình ảnh 40 W+N*Mi(1 +N*MAe60j1W +N*Mi(1 1+N*Mkij60kij1 Bài tập 43  CHƯƠNG V. CÁC MỐI LIÊN KẾT SIÊU VĂN BẢN 44 V.1. Thẻ neo và mối liên kết 44 WW+N*Mljm11 W(%8-*F'&50%njo*BF'=(%8"11 WOG'p*+,S*?#%1 W1OG'p*D:&?#%1 W(%8-*N%*R%n*BF'=(%81 V.2. Dùng hình ảnh làm đầu mối liên kết 46 W',@;q&d1^ '&B '4Z*\ilji1^ V.3. Đưa âm thanh vào tài liệu 47 W(%8-*?-*S4r*'1` R5r*'J1` V.4. Đưa Video vào tài liệu 48 1Ws*S4%LB51c 1_&*S46%LB51c Bài tập 49 CHƯƠNG VI. BÀY TRÍ NỀN VÀ KHUNG 50 VI.1. Màu nền và văn bản 50 WWOt*0+J W 0+@Y'6u;< W 0+Y'?C+#%=%8-*Z+N*M(UT(U60i(U W1+N*M60!0+W VI.2. Nạp hình ảnh làm nền cho trang văn bản 52 W+N*MiUlve A'*BF'F8 !,8)*605*0%=%S+Y'd VI.3. Khung – Frames 54 WF'&*FM8+&1 04Cmli jj VI.4. Thiết lập Target, thẻ NOFRAME và IFRAME 58 1W%-*=X4'F&B*c 1\vmli jw 1_&xF'BZ*\mli jw Bài tập 60 CHƯƠNG VII. BIỂU MẪU STYLE VÀ CASCADING STYLE SHEET 61 VII.1. FORM 61 WWmvl =0&dy^W W7*04C*F5&mvl ^ W*M3+*F_5mvl ^w VII.2. Cascading style sheet 71 W=%B*,=B`W %H%*%S+*,=BBB*` z'6'"F%4**,=BBB*`1 1+X*&@*,=BBB*`^ 7_*M*F5&*,=BBB*wW ^ ^(E%MY'7*,=BBB*wW `U-*E4*,=BBB*6H% (w c9*/D+*%Y'7"*,=Ba'"'L%&bw^ CHƯƠNG VIII. CÔNG CỤ SOẠN THẢO TRỰC QUAN WEB (MICROSOFT FRONTPAGE 2003) 99 VIII.1. Tạo một trang Web 99 WW]*?C+"KL2&mF5*k'&Bww WR5N**F'&*{N**B4='*BW WR560=D+N**F'&H%WW W1R5N*?J2W Wx5*600+W VIII.2. Tổ chức một trang với các liên kết, danh sách và bảng 106 WN*,4BF=%8605N**F'&AB;W^ R5N*L'"7Ww |9N**F'&6H%7;<&WWW 1%P*Gd<*FN**F'&AB;WWw R5N*AB;"%*BH%W U'%*7"%*BH%W VIII.3. Phát triển nhanh một site với các template 141 WN**B4='*BAB;"%*BW1 R5N*AB;"%*BH%W1 R5*},;%-AB;"%*BH%Y'*'W11 160=5R%;~7=$%_*MW1 U'%*7*B4='*BkBF"5'=AB;%*BW1^ ^N**B*$%&%'605N**F'&AB;W1` `(D+7*',?|%"'&N*"%*BW1c VIII.4. Tạo một site với sự trợ giúp của Wizard trong FrontPage 2003 149 1W •N*€%•'FL*R5"%*BW1w 1X4N*"%*B%SI605mF5*k'&BWW 1N*4D:&474%45F*WW 116G*FM?P=D+"%*BW1 1+*X4*&*%4<[%*{787*'>+'AB;"%*BY'*'W 1^(D+*&*%4<[%Y'87*'>+'"'&N*x%=BW` 1`X*&*%4<[%Y'87*'>+';q&B'%=Ww Bài tập 160 ` CHƯƠNG I. NHỮNG KHÁI NIỆM CƠ SỞ I.1. World Wide Web là gì? A5F=LA%LBAB;aAAAb=0N*R&7*0%&+,*&*%AAA L/'*F:-?P7*0%&+,0,*F•"‚L}&5&D$%oB0&FN& F!%3*0&*#* Z :-?t**}&LR&?#%6H%6%S?GLR&7*0%&+,*FAAA aD7l(b Z 7&%'5*9T?P*F+,X4*H%7*0%&+,>+'AAAaDkb Z %+6u;<T?PLƒL0&+,P?|%&%@'7*0%&+,aD (b 7F0&;+N&%@';':-?DE+F„LDH%?r, %H%*%S+6Jl( %*0%&+,"‚L}&*FAAAn*0%=%S+ (T<T6%LB5=%4T D:&*FdTgZIN*?G'p0I*P?DE!I';•%N*l( 7l(*D$&&[4C Z %S?t**Y'7:-L}&?P*F+,X4*0%&+, Z Y'7,*M=D+*F@a*|9b*0%&+, Z Y';<*r*0%&+,TDN*?D$&L… ML25%l(pF„*F'&AB%'=lB45F*"  l(0,I*P?DE?D"'+IN**0%=%S+"‚L}&*B5&%'5*9 kT?'&=D+*F5&7,  TI*P*F+,X4*B5?D$&L…†  ‡ 7:-87*'I*P*3,*F5&7*0%=%S+ (;'5&[†  ‡?#%6H% *D?%S*K60†  ‡?#%6H%mk Or,=0N*6ML2876Jl(ML20,7p*H%N4*Da'%=;5obY' &D$%L}&   !"#$%&' ()*+,-*./*0*0,12*3()1 7?GL'?5RaxF'&B*%LB*%x%BF"b c N*"#l(7p*H%6%S?G6GN**0%&+,U%P+0,Y'l(8-* *_6H%† 4 ‡*B5"'+;•%N*L3+%S+8-*#%a&%=0"0"&x# #&$1bML2T ?r,=0N*l(?7L3+N*I*=0"B*%5ˆ /*/*04/*056 7l(*D:&?#% N*l(*D:&?#%8&*B5:-?t**OD$&L…Y'I*D$& *'%-+*H%N**0%&+,*F}&N*7,D*0%=%S+%S*R%7l( *D:&?#%I*P&[7*04C?D$&L…*D:&?#%aD†‡&Q'=0N* 9*F*F5&3+*F_?DE?G&Q';•%?D$&L…bT60I*P;'5&[7 L3+%S+?5R 7l(?DE&%<%>+,-*?P5*507l("KL2&N*l(&#D N*6ML2Y'&%<%474l(*D:&?#%T&%<"K_&*'Il(&# † 0*0/7 ‡  l(  *D:&  ?#%  *F5& ?7L3+LDH%?r,5N*=%8-*"%+6u;< fiFBx‰‡"+44=%BF"*=‡h+44=%BF"fŠih "‹•FN&*0l(?C,?Y † 0*0/7/7*/ ‡*F5&8%l(*D:& ?#%*F5&6%S?7L3+5N*<LDH%?r, (89/0+,0/,+,,1 "‹•FN&*0l(?C,?Y† 0*00/ ‡ F5& (T7l(?DEL}&?P Z (%8-**H%*0%=%S+5t*0%&+,87TaoBi60(Ub Z (%8-**H%8%P+LR&;&50%5t8G;<a"F%4*baoB :8;< =38> b Z [  N*  <T  ?#%  *DE&T  5t  '44=B*  *F5&  N*  *F'&T  aoB  89# ?@2A3#)>>:A8;>B b Z R5N*;<L[<aoB )>)A) b Z R5N*x5FaoB C? b Z R5N*8+&*0%=%S+aoB C)A8C)A b Z FML…N*pL…;&50%aoB D#@:?3<DB?A#8;=EA: b Z '8<57>+,DH"%+L@=%S+*<N**0%=%S+aoB FA)E b w &0,',&D$%*'L}&7,*MDN*&2F3*@+M?P*F+,X4 *BFB*TY,-+=0*d8%-*&*%7*&*%0,I*P=076u;<T d<r*'',*&*%?'4D:&*%SgH%&%'5L%S*r*%S;•% 6%S"KL2&78)%S+T;%P+*DE&F3*&E%*<&C&%#&6H%7d<?$% *D$&60pC@&*'5*7?:&%<*'?!I&',*&*%C*d8%-• *FDHt* +C+"KL2&7,*M?P*F+,X4*BFB**d8%-*&*%&0,0& %J+60&D$%"KL2&7,*MI*Fd?N*%60*%-&i?P%P+7*& ;75Y'7,87'+(0*-05?P%&D$%I*PLƒL0&"KL2&7, *M?P*F+,X4*BFB*DN*&24262?]=/56%S*F'9+*d 8%-*&*%*FR&*&*%FN&=H3**502  %S0,*F•LƒL0&:;•%)*D•&"%+6u;<a,4BF*Bo*b%+6u ;<=076u;<†*&%‡I*P&%_4&D$%?*d60+&3457 *0%=%S+=%>+'&D$%?8&4<%3*&*d8%-*F5&85*&*% *BFB*6*X U7%%S"%+6u;<L50*%BLB="5?Jo+3*605uWw^ DN*DH:a†54+*BFeFB'"‡b6J8<u&Y'7,*M*F5&*D:&='% &,6&6J77,*MI*FM*+SD5&D$%T;%-*7*F+,*d7*& *%C*%-* e/7*/%S"%+6u;<=0Y'N*8Œ"D*F\&D$%i*=0% BFBF"n(BB'+8%*#*&%S4OR%vox5F*aibuWw`^TuWwc% ?!6%-*N*D:&*Fd4~&#%=%8-*'%%J+;3*8•*FN*?[*G D8%P+=%8-*"%+6u;<uWwcwT*F5&8%=06%S*R%%S&%9+ 8Œ*+X*R*rr+Ž+ajlb*R%BFBa2,"ŒbT*3,7?[&&%S4F3* 63*6<*F5&6%S*F'*0%=%S+T%?!?D'F'N*?J7=D+*F@"%+6u;<*F7, *M"'55LƒL0&*d8%-*0%=%S+: F5&*-&%H%"%+6u;<AAAT&D$%"KL2&I*PLƒL0&?%*{*0% =%S+0,"'&*0%=%S+87*&>+'7#%=%8-*D6X,*'I*PL+=G *F5&o'=N*&*%45&4_*F5&8%6…&[%*R%0UŒ*+X*"%+6u;< W