THIẾT KẾT WEBSITE VỚI MTHL

Ủ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 13 1WF'&!&+[ (60*F'&AB;W 17*\ (W 17>+,*]+&W 113+*F^Y'N**0%=%S+ (W_ 174C*K (` (B=BB*aWb 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'*\*Fc;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d'"78&?7"#*9*/_ Wd'"7?7"#*9*/b Wd'"77?G&Q' W1d'"74#%E4T=[&'+ III.2. Bảng biểu 31 WU+&3+*F^W  N*"#=D+)6J;<& 76ML2e 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d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&c1e '&B '4Z*\ilji1e 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1b 1^&*S46%LB51b 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d A'*BF'F8 !,8)*605*0%=%S+Y'c 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*b 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&cyeW W7*04C*F5&mvl e W*M3+*F^5mvl ew 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*_e 7^*M*F5&*,=BBB*wW e e(E%MY'7*,=BBB*wW _U-*E4*,=BBB*6H% (w b9*/D+*%Y'7"*,=B`'"'L%&awe 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e R5N*L'"7Ww |9N**F'&6H%7;<&WWW 1%P*Gc<*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W1e eN**B*$%&%'605N**F'&AB;W1_ _(D+7*',?|%"'&N*"%*BW1b 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e(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;`AAAa=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 `D7l(a Z 7&%'5*9T?P*F+,X4*H%7*0%&+,>+'AAA`Dka Z %+6u;<T?PLƒL0&+,P?|%&%@'7*0%&+,`D (a 7F0&;+N&%@';':-?DE+F„LDH%?r, %H%*%S+6Jl( %*0%&+,"‚L}&*FAAAn*0%=%S+ (T<T6%LB5=%4T D:&*Fc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@`*|9a*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`'%=;5oaY' &D$%L}&   !"#$%&' ()*+,-*./*0*0,12*3()1 7?GL'?5R`xF'&B*%LB*%x%BF"a b N*"#l(7p*H%6%S?G6GN**0%&+,U%P+0,Y'l(8-* *^6H%† 4 ‡*B5"'+;•%N*L3+%S+8-*#%`&%=0"0"&x# #&$1a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:&?#%`D†‡&Q'=0N* 9*F*F5&3+*F^?DE?G&Q';•%?D$&L…aT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`oBi60(Ua Z (%8-**H%8%P+LR&;&50%5t8G;<`"F%4*a`oB :8;< =38> a Z [  N*  <T  ?#%  *DE&T  5t  '44=B*  *F5&  N*  *F'&T  `oB  89# ?@2A3#)>>:A8;>B a Z R5N*;<L[<`oB )>)A) a Z R5N*x5F`oB C? a Z R5N*8+&*0%=%S+`oB C)A8C)A a Z FML…N*pL…;&50%`oB D#@:?3<DB?A#8;=EA: a Z '8<57>+,DH"%+L@=%S+*<N**0%=%S+`oB FA)E a w &0,',&D$%*'L}&7,*MDN*&2F3*@+M?P*F+,X4 *BFB*TY,-+=0*c8%-*&*%7*&*%0,I*P=076u;<T c<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c<?$% *D$&60pC@&*'5*7?:&%<*'?!I&',*&*%C*c8%-• *FDHt* +C+"KL2&7,*M?P*F+,X4*BFB**c8%-*&*%&0,0& %J+60&D$%"KL2&7,*MI*Fc?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+*c 8%-*&*%*FR&*&*%FN&=H3**502  %S0,*F•LƒL0&:;•%)*D•&"%+6u;<`,4BF*Bo*a%+6u ;<=076u;<†*&%‡I*P&%^4&D$%?*c60+&3457 *0%=%S+=%>+'&D$%?8&4<%3*&*c8%-*F5&85*&*% *BFB*6*X U7%%S"%+6u;<L50*%BLB="5?Jo+3*605uWwe DN*DH:`†54+*BFdFB'"‡a6J8<u&Y'7,*M*F5&*D:&='% &,6&6J77,*MI*FM*+SD5&D$%T;%-*7*F+,*c7*& *%C*%-* d/7*/%S"%+6u;<=0Y'N*8Œ"D*F\&D$%i*=0% BFBF"n(BB'+8%*#*&%S4OR%vox5F*`iauWw_eTuWwb% ?!6%-*N*D:&*Fc4~&#%=%8-*'%%J+;3*8•*FN*?[*G D8%P+=%8-*"%+6u;<uWwbwT*F5&8%=06%S*R%%S&%9+ 8Œ*+X*R*rr+Ž+`jla*R%BFB`2,"ŒaT*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&*c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 [...]... I.3.3 Website và trang chủ - homepage Một website là một bó các trang web liên kết với nhau và liên kết với các trang ở bên ngoài chằng chịt như mạng nhện Hàng triệu Website liên kết với nhau tạo thành World Wide Web – WWW Có thể tưởng tượng như một ngọn núi nhỏ các trang web mỗi ngày một cao thêm, được phát triển bằng cách thêm vào nhiều trang web lý thú khác nữa Có thể minh hoạ hình ảnh của một website. .. Markup Language) HTML cho tác giả các ý nghĩa để: Phổ biến các tài liệu trực tuyến với các heading, văn bản, bảng, danh sách, ảnh, v.v… Truy tìm thông tin trực tuyến theo các liên kết siêu văn bản bằng việc kích vào một nút Thiết kế các định dạng cho việc kiểm soát các giao dịch (transaction) với các thiết bị từ xa, đối với người dùng trong việc tìm kiếm thông tin, tạo các sản phẩm, đặt hàng,.v.v… Bao... thành phần HTML ra sao Trong thực tiễn, HTML chỉ thực sự độc lập đối với phần cứng, chưa hoàn toàn độc lập đối với phần mềm Chỉ phần cốt lõi là chuẩn hoá, còn các phần mở rộng do từng nhà phát triển xây dựng thì không hoàn toàn tương thích nhau I.3.2 Độc lập với khái niệm trang và thứ tự các trang Một tính chất nữa là HTML độc lập với khái niệm trang Văn bản được trình bày tùy theo kích thước của cửa... trăm so với bề rộng của tài liệu) Thường thì trình duyệt tự tính toán sao cho bảng được bố trí hợp lý Dùng thuộc tính này bắt buộc trình duyệt cố gắng làm sao xếp được các ô vào bảng có bề rộng mong muốn đó Nếu đi cùng với hay lại có ý nghĩa tương tự đối với một ô 33 ROWSPAN Cho biết ô hiện thời chiếm mấy hàng của bảng, mặc định là 1 ALIGN Nếu nằm trong nó có ý nghĩa đối với đầu... cần đánh dấu điểm bắt đầu và điểm kết thúc của đoạn tiêu đề bằng cặp thẻ Heading, ví dụ Bộ duyệt sẽ hiển thị đoạn này với cỡ chữ to hơn và căn chính giữa Ví dụ, dòng sau đây trong tài liệu HTML Tiêu đề mức 1 sẽ được trình duyệt hiển thị thành Tiêu đề mức 1 Hiện nay có nhiều công cụ soạn thảo siêu văn bản mạnh như Microsoft FrontPage, Dream Weaver với giao diện trực quan và tự động... việc tìm hiểu cú pháp của HTML, nắm vững ý nghĩa của các thẻ khác nhau vẫn rất cần thiết để có thể tạo ra các trang Web động, tương tác với người sử dụng, tức là các ứng dụng Web sau này I.4.2 Các thẻ HTML Các thẻ dùng để báo cho trình duyệt cách thức trình bày văn bản trên màn hình hoặc dùng để chèn một mối liên kết đến các trang khác, một đoạn chương trình khác Mỗi thẻ gồm một từ khoá - KEYWORD... tương đương với tài liệu sau đây: Chỗ này là tiêu đề 17 Toàn bộ nội dung của tài liệu nằm ở đây: Các đoạn văn bản xen lẫn hình ảnh, âm thanh, video, các liên kết đến vị trí khác, tài liệu khác Tuy nhiên, để dễ theo dõi và phát hiện lỗi, nên trình bày như trong văn bản trước: dóng thẳng cột từng cặp thẻ, xuống dòng khi cần thiết, đặt... mỗi mục Cú pháp: Mục thứ 1 Mục thứ 2 …… Cặp thẻ … đánh dấu bắt đầu và kết thúc danh sách Nó có tác dụng lùi lề trái danh sách vào sâu hơn Các thẻ có tác dụng thể hiện bắt đầu một dòng mới với một chấm tròn Ví dụ: Mục thứ 1 Mục thứ 2 Mục thứ 3 Kết quả trả về một danh sách sau: • • • Mục thứ 1 Mục thứ 2 Mục thứ 3 27 Theo mặc định, mỗi mục thuộc... HTML cho phép liên kết nhiều trang văn bản rải rác khắp nơi trên Internet Nó có tác dụng che dấu sự phức tạp của Internet đối với người sử dụng Người dùng Internet có thể đọc văn bản mà không cần biết đến văn bản đó nằm ở đâu, hệ thống được xây dựng phức tạp như thế nào HTML thực sự đã vượt ra ngoài khuôn khổ khái niệm văn bản cổ điển I.3 Các đặc điểm của siêu văn bản I.3.1 Độc lập với phần cứng và phần... khác Kết thúc bảng III.2.3 Các ví dụ Ví dụ một bảng cơ bản gồm 2 dòng và 3 cột: ABC DEF Kết quả trả về: Ví dụ một bảng có Item 2 (tiêu thức 2) chiếm 2 hàng (dòng): Item 1 Item 2 Item 3 Item 4 Item 5 Kết . Ủ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: )    . 40 W+N*Mi(1 +N*MAd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 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e R5N*L'"7Ww |9N**F'&6H%7;<&WWW 1%P*Gc<*FN**F'&AB;WWw R5N*AB;"%*BH%W U'%*7"%*BH%W VIII.3.