Ủ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 [...]... Độ dài của văn bản HTML thực sự không bị hạn chế 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... Các phần tử HTML (HTML element) Một tài liệu HTML tạo nên từ nhiều thành phần HTML Một thành phần HTML được đánh dấu bằng một cặp thẻ mở và thẻ đóng Các thành phần HTML có thể cấu trúc phân cấp hình cây, thành phần "mẹ" chứa nhiều thành phần "con" khác lồng bên trong nó Có thành phần rỗng, chỉ có thẻ mở Để soạn thảo tài liệu HTML đúng cú pháp, cần nắm vững cấu trúc của từng thành phần HTML Không giống... thích hợp (ta không nhìn thấy được) vào đầu và cuối đoạn tiêu đề được chọn để thể hiện nó theo yêu cầu Với HTML cũng tương tự như vậy Để làm nổi bật các tiêu đề ta 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... hoạ hình ảnh của một website như trong hình vẽ bên Trang chủ hay trang chính - 'home page' có thể hiểu là cửa chính - 'front door' để thâm nhập vào kho thông tin liên kết chằng chịt ấy Vậy home page là trang web mà bộ duyệt sẽ mở ra đầu tiên mỗi khi người dùng bắt đầu thăm website 13 I.4 Soạn thảo văn bản - những vấn đề chung I.4.1 Trang mã nguồn HTML và trang Web Trang mã nguồn HTML là một tệp văn... FrontPage, Dream Weaver với giao diện trực quan và tự động sinh mã HTML, cho phép soạn thảo siêu văn bản như soạn thảo thông thường Tuy nhiên, 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... 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 < /HTML> 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 các thẻ vào nơi hợp... 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 gồm spread-sheets, video clips, sound clips, và các ứng dụng trực tiếp khác trong các tài liệu của họ Các trang... liệu HTML Mọi tài liệu HTML đều có khung cấu trúc như sau: < /HTML> Hãy xem trình duyệt hiển thị tài liệu trên như thế nào Dĩ nhiên là một trang trắng chưa có nội dung gì cả ! Giữa cặp thẻ tiêu đề là dòng chữ sẽ hiện lên trên thanh tiêu đề của cửa sổ khi trình duyệt đọc tài liệu Nếu bỏ trống thì trình duyệt sẽ cho hiện tên tệp thay vào... dòng văn bản, hình ảnh, âm thanh, video, các mối liên kết tạo nên trang Web đều phải nằm ở đây Ví dụ như tài liệu HTML đơn giản dưới đây: Chỗ này là tiêu đề 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 < /HTML> Hãy xem trình duyệt trình bày tài liệu trên như... màn hình Ngôn ngữ (Language): HTML là một ngôn ngữ tương tự như các ngôn ngữ lập trình, tuy nhiên đơn giản hơn Nó có cú pháp chặt chẽ để viết các lệnh thực 11 hiện việc trình diễn văn bản Các từ khoá có ý nghĩa xác định được cộng đồng Internet thừa nhận và sử dụng Ví dụ b = bold,　 ul = unordered list,　 Văn bản (Text): HTML đầu tiên và trước hết là để trình bày văn bản và dựa trên nền tảng là một văn . 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. Ủ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: )    . |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:;<=%>+'?-& &@