Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 162 trang
THÔNG TIN TÀI LIỆU
Thông tin cơ bản
Định dạng
Số trang
162
Dung lượng
2,39 MB
Nội dung
Ủ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$ 34 "#$#%&'#5##&6#7$8#&9"0"#+": 81$#;<".#&=#$1'>0"?'@ A4 "#:-$/##0;(B#CD(*4)+ 2* EFG4,#-"0""#H"".#C(I#C&.1$## ()"J?#1()&$14K+ 2EFGELFG#CB$ D#M "#%$4$)&$1EFGELFG<N&'O"##; '? 1 "#%$#"#&P(#&.&'O"(Q()5# ;'>H4 K+ 2EFG"#$ELFG<N&'O"#;4 R1$()<8".# AS"H()"#'>5#<$1#$ $+ 2TUV$$U$(( 8WXYV":XZ8$[ #3V": 3 $\<]483$ [ ":3^_833$ `4a#b4a8c$[$8F$ Udd YXW8F$ [<"YXW8c$[8[ 84e8"#f",g(&'O""0"#C ":8##$&M#5",' '? 1h4h".&(I )#$J"4$".()#1"#- 1#<$1? #(<333#=#4U#+#5N&.(#*#i #,(*(<$1<#$<#$3jY3jkV "0#S"l"0".&'O"4i"$<$h"l&i();+"# &'O"<m 2)i4$8"n".#*;+"#"#&9o 1pc". #<$1Q33$ #3$ [ <8#"0"#< ":5# ;3#'"".<q"#H"4U0";+"#&.&* =#I"#r"#$#%st"-"0"#C$#'"l".# A9#O":##""2$$8#)#$1 $8#t"&>(# #<0"#"0"t"#7$V<4R1"# '?&$1$+ 2o 68".#s$"#$8 A"#)"#786S($uv ##""24K<Nt&)&'O""###EvG"#$ELvGI&w #5EvGELvG"J(IL&.":"."#H"?#1&$1 ",&'O"1"# '?4 8 $<t#0#'#0"l":(1$"2"8"l "I#H"1#$#;#>&&0H&'O"#",(? <#$/05##0&.#'w(##8#5##&)84e4'@ 7&.##":&0#<=`8`d8 ]8e&"#f##<4 )$#&((1#":()Sy-w#: "#z&*".##;(#5##8.(1#&'O"8I Sy$1#,(*(#(0+#$('@&7"".8##w;5# ;$"3 $\<#vY{8#P("#+"#$'@#-( #xQ#,(*(&J";4 '@"n&#"i#*Y*B=D4Rx# #'?#:":1$()#'>#01&' ##;#4'@"$#'()&x##'?) |B$;".5D/7#>#*<$?B;".&}#D4 0"S($#P&'O"<t.~o1&7" {"#w##"(>4 HTML VÀ THIẾT KẾ WEB !"# $%&%'()*+,-*.*/01 2*%++&3456%78%-*9:;<=%>+'?-& &@ (60*%-*8-AB; @&8%-*9C4<%?DE*F'&;G*FDH8%I8%-*96J"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;%-*78%-*9:;<6J (60 AB;"%*B?P*%-*8-AB;"%*B*Q %"5R N7S*#&*&*%TU5'&&S*&*%T FD$&O&&STOV 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 WON=X46H%4C9&604CJW ON=X46H%87%%S*F'&60*9*/7*F'&W AB;"%*B60*F'&YZ5B4'&BW I.4. Soạn thảo văn bản - những vấn đề chung 14 1WF'&!&+[ (60*F'&AB;W1 17*\ (W 17>+,*]+&W^ 113+*F_Y'N**0%=%S+ (W` 174C*K (a (B=BB*bWc 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*MY'*\*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 WWe'"78&?7"#*9*/` We'"7?7"#*9*/c We'"77?G&Q' W1e'"74#%E4T=[&'+ III.2. Bảng biểu 31 WU+&3+*F_W N*"#=D+)6J;<& 76ML2^ 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 WWS4<1 W\f gh1 IV.2. Các thuộc tính của thẻ chèn hình ảnh 40 W+N*Mi(1 +N*MAe60j1W +N*Mi(1 1+N*Mkij60kij1 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 WW+N*Mljm11 W(%8-*F'&50%njo*BF'=(%8"11 WOG'p*+,S*?#%1 W1OG'p*D:&?#%1 W(%8-*N%*R%n*BF'=(%81 V.2. Dùng hình ảnh làm đầu mối liên kết 46 W',@;q&d1^ '&B '4Z*\ilji1^ V.3. Đưa âm thanh vào tài liệu 47 W(%8-*?-*S4r*'1` R5r*'J1` V.4. Đưa Video vào tài liệu 48 1Ws*S4%LB51c 1_&*S46%LB51c 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 WWOt*0+J W 0+@Y'6u;< W 0+Y'?C+#%=%8-*Z+N*M(UT(U60i(U W1+N*M60!0+W VI.2. Nạp hình ảnh làm nền cho trang văn bản 52 W+N*MiUlve A'*BF'F8 !,8)*605*0%=%S+Y'd VI.3. Khung – Frames 54 WF'&*FM8+&1 04Cmli jj VI.4. Thiết lập Target, thẻ NOFRAME và IFRAME 58 1W%-*=X4'F&B*c 1\vmli jw 1_&xF'BZ*\mli jw Bài tập 60 CHƯƠNG VII. BIỂU MẪU STYLE VÀ CASCADING STYLE SHEET 61 VII.1. FORM 61 WWmvl =0&dy^W W7*04C*F5&mvl ^ W*M3+*F_5mvl ^w VII.2. Cascading style sheet 71 W=%B*,=B`W %H%*%S+*,=BBB*` z'6'"F%4**,=BBB*`1 1+X*&@*,=BBB*`^ 7_*M*F5&*,=BBB*wW ^ ^(E%MY'7*,=BBB*wW `U-*E4*,=BBB*6H% (w c9*/D+*%Y'7"*,=Ba'"'L%&bw^ 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 WW]*?C+"KL2&mF5*k'&Bww WR5N**F'&*{N**B4='*BW WR560=D+N**F'&H%WW W1R5N*?J2W Wx5*600+W VIII.2. Tổ chức một trang với các liên kết, danh sách và bảng 106 WN*,4BF=%8605N**F'&AB;W^ R5N*L'"7Ww |9N**F'&6H%7;<&WWW 1%P*Gd<*FN**F'&AB;WWw R5N*AB;"%*BH%W U'%*7"%*BH%W VIII.3. Phát triển nhanh một site với các template 141 WN**B4='*BAB;"%*BW1 R5N*AB;"%*BH%W1 R5*},;%-AB;"%*BH%Y'*'W11 160=5R%;~7=$%_*MW1 U'%*7*B4='*BkBF"5'=AB;%*BW1^ ^N**B*$%&%'605N**F'&AB;W1` `(D+7*',?|%"'&N*"%*BW1c VIII.4. Tạo một site với sự trợ giúp của Wizard trong FrontPage 2003 149 1W •N*€%•'FL*R5"%*BW1w 1X4N*"%*B%SI605mF5*k'&BWW 1N*4D:&474%45F*WW 116G*FM?P=D+"%*BW1 1+*X4*&*%4<[%*{787*'>+'AB;"%*BY'*'W 1^(D+*&*%4<[%Y'87*'>+'"'&N*x%=BW` 1`X*&*%4<[%Y'87*'>+';q&B'%=Ww Bài tập 160 ` CHƯƠNG I. NHỮNG KHÁI NIỆM CƠ SỞ I.1. World Wide Web là gì? A5F=LA%LBAB;aAAAb=0N*R&7*0%&+,*&*%AAA L/'*F:-?P7*0%&+,0,*F•"‚L}&5&D$%oB0&FN& F!%3*0&*#* Z :-?t**}&LR&?#%6H%6%S?GLR&7*0%&+,*FAAA aD7l(b Z 7&%'5*9T?P*F+,X4*H%7*0%&+,>+'AAAaDkb Z %+6u;<T?PLƒL0&+,P?|%&%@'7*0%&+,aD (b 7F0&;+N&%@';':-?DE+F„LDH%?r, %H%*%S+6Jl( %*0%&+,"‚L}&*FAAAn*0%=%S+ (T<T6%LB5=%4T D:&*FdTgZIN*?G'p0I*P?DE!I';•%N*l( 7l(*D$&&[4C Z %S?t**Y'7:-L}&?P*F+,X4*0%&+, Z Y'7,*M=D+*F@a*|9b*0%&+, Z Y';<*r*0%&+,TDN*?D$&L… ML25%l(pF„*F'&AB%'=lB45F*" l(0,I*P?DE?D"'+IN**0%=%S+"‚L}&*B5&%'5*9 kT?'&=D+*F5&7, TI*P*F+,X4*B5?D$&L…† ‡ 7:-87*'I*P*3,*F5&7*0%=%S+ (;'5&[† ‡?#%6H% *D?%S*K60† ‡?#%6H%mk Or,=0N*6ML2876Jl(ML20,7p*H%N4*Da'%=;5obY' &D$%L}& !"#$%&' ()*+,-*./*0*0,12*3()1 7?GL'?5RaxF'&B*%LB*%x%BF"b c N*"#l(7p*H%6%S?G6GN**0%&+,U%P+0,Y'l(8-* *_6H%† 4 ‡*B5"'+;•%N*L3+%S+8-*#%a&%=0"0"&x# #&$1bML2T ?r,=0N*l(?7L3+N*I*=0"B*%5ˆ /*/*04/*056 7l(*D:&?#% N*l(*D:&?#%8&*B5:-?t**OD$&L…Y'I*D$& *'%-+*H%N**0%&+,*F}&N*7,D*0%=%S+%S*R%7l( *D:&?#%I*P&[7*04C?D$&L…*D:&?#%aD†‡&Q'=0N* 9*F*F5&3+*F_?DE?G&Q';•%?D$&L…bT60I*P;'5&[7 L3+%S+?5R 7l(?DE&%<%>+,-*?P5*507l("KL2&N*l(&#D N*6ML2Y'&%<%474l(*D:&?#%T&%<"K_&*'Il(&# † 0*0/7 ‡ l( *D:& ?#% *F5& ?7L3+LDH%?r,5N*=%8-*"%+6u;< fiFBx‰‡"+44=%BF"*=‡h+44=%BF"fŠih "‹•FN&*0l(?C,?Y † 0*0/7/7*/ ‡*F5&8%l(*D:& ?#%*F5&6%S?7L3+5N*<LDH%?r, (89/0+,0/,+,,1 "‹•FN&*0l(?C,?Y† 0*00/ ‡ F5& (T7l(?DEL}&?P Z (%8-**H%*0%=%S+5t*0%&+,87TaoBi60(Ub Z (%8-**H%8%P+LR&;&50%5t8G;<a"F%4*baoB :8;< =38> b Z [ N* <T ?#% *DE&T 5t '44=B* *F5& N* *F'&T aoB 89# ?@2A3#)>>:A8;>B b Z R5N*;<L[<aoB )>)A) b Z R5N*x5FaoB C? b Z R5N*8+&*0%=%S+aoB C)A8C)A b Z FML…N*pL…;&50%aoB D#@:?3<DB?A#8;=EA: b Z '8<57>+,DH"%+L@=%S+*<N**0%=%S+aoB FA)E b w &0,',&D$%*'L}&7,*MDN*&2F3*@+M?P*F+,X4 *BFB*TY,-+=0*d8%-*&*%7*&*%0,I*P=076u;<T d<r*'',*&*%?'4D:&*%SgH%&%'5L%S*r*%S;•% 6%S"KL2&78)%S+T;%P+*DE&F3*&E%*<&C&%#&6H%7d<?$% *D$&60pC@&*'5*7?:&%<*'?!I&',*&*%C*d8%-• *FDHt* +C+"KL2&7,*M?P*F+,X4*BFB**d8%-*&*%&0,0& %J+60&D$%"KL2&7,*MI*Fd?N*%60*%-&i?P%P+7*& ;75Y'7,87'+(0*-05?P%&D$%I*PLƒL0&"KL2&7, *M?P*F+,X4*BFB*DN*&24262?]=/56%S*F'9+*d 8%-*&*%*FR&*&*%FN&=H3**502 %S0,*F•LƒL0&:;•%)*D•&"%+6u;<a,4BF*Bo*b%+6u ;<=076u;<†*&%‡I*P&%_4&D$%?*d60+&3457 *0%=%S+=%>+'&D$%?8&4<%3*&*d8%-*F5&85*&*% *BFB*6*X U7%%S"%+6u;<L50*%BLB="5?Jo+3*605uWw^ DN*DH:a†54+*BFeFB'"‡b6J8<u&Y'7,*M*F5&*D:&='% &,6&6J77,*MI*FM*+SD5&D$%T;%-*7*F+,*d7*& *%C*%-* e/7*/%S"%+6u;<=0Y'N*8Œ"D*F\&D$%i*=0% BFBF"n(BB'+8%*#*&%S4OR%vox5F*aibuWw`^TuWwc% ?!6%-*N*D:&*Fd4~&#%=%8-*'%%J+;3*8•*FN*?[*G D8%P+=%8-*"%+6u;<uWwcwT*F5&8%=06%S*R%%S&%9+ 8Œ*+X*R*rr+Ž+ajlb*R%BFBa2,"ŒbT*3,7?[&&%S4F3* 63*6<*F5&6%S*F'*0%=%S+T%?!?D'F'N*?J7=D+*F@"%+6u;<*F7, *M"'55LƒL0&*d8%-*0%=%S+: F5&*-&%H%"%+6u;<AAAT&D$%"KL2&I*PLƒL0&?%*{*0% =%S+0,"'&*0%=%S+87*&>+'7#%=%8-*D6X,*'I*PL+=G *F5&o'=N*&*%45&4_*F5&8%6…&[%*R%0UŒ*+X*"%+6u;< W