giao-trinh-ebook-hoc-html-tieng-viet pps

Ủ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
&%_45*'8&4<%"'&*X(+6F:•k'F%"06…I*P%&D•&?DE
78%S**7N%'MI?!&I44C*R5F';DH47**F%P;}&|Y'
*BFB**F5&@&u&C?r,
I.2. HTML là gì?

OP4|;%-*&*%*F*502TCN*&&@4|;%-60Lƒ%P+T
N*8%P+6%S4|;%-*%-&•?\0*50;N77,*MI*P%P+?DE
&&@4|;%-L}&;•%A5F=LA%LBAB;=0 (a,4BFBo* 'F8+4
('&+'&Bb
 (5*7&%<7)&Q'?P
k|;%-7*0%=%S+*F/*+,-6H%7B'L%&T6u;<T;<&TL'"7T
<T66g
F+,*d*&*%*F/*+,-*B57=%8-*"%+6u;<;q&6%S8M
605N*_*
%-*8-7?GLR&56%S8%P"57*7&%'5LGa*F'"'*%5b6H%7
*%-*;G*{o'T?#%6H%&D$%L}&*F5&6%S*d8%-*&*%T*R57"<4‘T
?t*0&T66g
'5&["4FB'LZ"BB*"T6%LB5=%4"T"5+L=%4"T6079&L2&*F/*%-4
87*F5&7*0%=%S+Y'
7*F'&AB;?C,"%?N&0;R*3,*FA5F=LA%LBAB;=07*F'&
"%+6u ;<?DE6%-*  ;q& & &@ ?7L3+  "%+ 6u ;< ', V
4"#$#%11$"0"#=#O#
#n##'@?#5##8w(##8 $8"0"(=-&-"0"
<#0"444
7 0# S<#0#&u#t""#S":"
"2T
 !"T":"0"#C&0# SV4U0"
#C0"&x#"0"##H"5#&$1'>H(#5#4
#$%$&$$"T()'>t#'"0"
P5#8#&>#>4."."u#0"#J"#N&-"0";##t"
WW
#;;"5# !4U0"o#$0".~#M0"&x#&'O"")&6
Y#o#P<m 24K+ 2•$ 8
　
•$  <8

　
444
'()*"T&,'?"#-&5# t
*()4U0"###,#0"#'#5##8w(##8#$1
#5#44&*#€"g($€$()&$1$&.4
 +,()-!"T"#$#%-#*0"
#g>Y4.".0" 2"# S<t#H"1":Y&=?
'@<m 24'@ AY".#&7"(#",-&-
&.Q(I&w8#;#=&'O"w t#H"1#'#-$4#t"<t
&i'O$##9#0;("9&4
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 mềm
&)"P?#,"H#,(*( N**0%=%S+ (?DE6%-*
;q&N*4CJ"5R*<52*P;3*8•T*FN*7,2*P05?I?J+I*P
??DE*F;3*8dN*S*#&*D:&*M05
O%J+0,I&Q'=07*S4"%+6u;<I*P?DE*FdL+,S*%P*G
*F i',k*},)08&4<%"K'@'*',?|%&dI M".&'O"+#
"#S5"0"#C"#f !&1",",#(5"#H#"2#",
(#'#-$4
’&6d=‹?I0;R##"#g""#g;<":
1<N#;(#5#"#+#0"#'#-$5"ny#$5# ;#
#;"0"###,<$
$#t"!8"#f#t"<t&)"P&=?#,"H8"#'#$
$&)"P&=?#,(*(4p4C#*=„%=0+‘57T“74C•
FN&L5*{&047**F%Por,L/&*d8&50*50*D:&*M'+
W
I.3.2. Độc lập với khái niệm trang và thứ tự các trang
N**M3*@'=0 (?N=X46H%87%%S*F'&u;<?DE*Fd
;0,*},*B58M*DHY'K'"|%P*GK'"|FN&;J&'&*d"‹*+&]
:TK'"|•4;J&'&*d"‹?DE8”5L0%F'?P%P*G5-*N%L+&ON

L0%Y'6u;< (*/"/8&;GR-
I.3.3. Website và trang chủ - homepage
N*€B;"%*B=0N*;I7*F'&€B;=%8-*
6H%'+60=%8-*6H%7*F'&•;&50%
q&G*DR&S0&*F%S+AB;"%*B
=%8-*6H%'+*R5*0A5F=LA%LBAB;n
AAA
I*P*D•&*DE&DN*&_%~7
*F'&€B;•%&0,N*'5*T?DE47*
*F%P;q&7*605%J+*F'&€B;=)*_
87@'
I*P%5Rd<Y'N*€B;"%*BD
*F5&d6‹;
F'&Y',*F'&MZ–5B4'&B–I*P
%P+=0K'MZ–xF5*L55F–?P*rX4605
85*&*%=%8-*q&G*3,
X,5B4'&B=0*F'&€B;0;NL+,S*"‹•
F'?C+*%•%8%&D$%L}&;]*?C+*u
€B;"%*B
W
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
(i6();5##'@6("0"+t
•UYY8".#&'O"1$QS"H5#<$1#$##'@$4
#$/'?"8S""0";(i6":<#".&
4#(#$J"4#(4
‚#5# ;$\<&7"(i68.<N x"#"0"#C
;###x(#5#(0+##5#'@734KP
\#61&M"H":(0+#"2")4."0##;":
(i6/;"m~":5# ;4D"'+0,*'"‹*3,T7*FdL+,S*

87'+I*P%P*G}&N**F'&!&+[8&50*50&%#&'+
.<$1#$<H"1$(i6&u/
&x#&&) ;#&'O"##x&u4
KL2& (?P"5R*<57*F'&"%+6u;<T *g""l
##0"(S<$? A"0")<$1#$##'@—&RT
*F5&"5R*<56u;<*&*D$&T?P=0|%;X*7*%+?J*'4<%?7L3+
I60•*5TuM&%@'D:&*Fd"5R*<56u;<"‹s7L3+
%S+*ME4a*'8&d*3,?DEb605?C+60+#%?5R*%+?J?DE
?P*P%SI*B5,+C+
H% (’&*D:&*/D6X,OP=0|%;X*7*%+?J*'C?7
L3+?%P;]*?C+60?%P8-**_Y'?5R*%+?J;q&t4*\B'L%&T6ML2
(FG1(FG1
NL+,S*"‹%P*G?5R0,6H%•@*5:60uM
&%@'
ML2TL“&"'+?r,*F5&*0%=%S+ (
(FG1H7IJ0G(FG1
"‹?DE*FdL+,S*%P*G*0
Tiêu đề mức 1
W1
%S',I%J+&2"5R*<5"%+6u;<RD "$<$h
c$[8X(344?$ ;t"/t&)<#(i8
"#$#%<$1#$<#'<$1#$##'@
+,%T;"5(#"u#0":8g(~#M":"0"#C#0"
#ƒS",#-&".#1$"0"3&)8'>0"?'@<m
28H""0"H 23<
I.4.2. Các thẻ HTML
U0"#C A&0$"#$5# ;"0"##H"5#(
#5##$J" A&"#„()(=-&-"0"#0"T()&$1"#'>
5##0"444
 r#C6(()o#$0V

<AKL?E
V$7"?# S€%#>€E
€?#>€G4
 ,#-"0";###;Q()"J##CT#C(I
(<AKL?E1
#C
&.
(<AKL?E1
4XS1"#"#%$
MM
+#;#C&.4;#<N0"&)$
&$1Q(##C4
(<AKL?E1 NO0P7Q0R0ST(<AKL?E1
)<=#C#"."J8"#u&'O"7"0"#C.$##C/04U#f
".#C(I
(<AKL?E1
(#4
#*#C".„("0"#)"+#8""S#("0"#(<="#
-#>"#$;"#t"#;;#4U0"#)"+#&'O""#(#$1T#)"+#
g)"#)"+##g)"#y"#74
)#)"+#g)"-#'#"..#5#C;#(?#t"#;
&'O"4ML2T?PsN*d<605*F'&*0%=%S+*'L}&*\
(891
a'&Bb
+,%TCpF„7%<05"‹?DEL7605?r,O%J+0,?DE*%-*=X4
;q&*+N*M
=3+MP0U0STM
+N*Ml=0;]*;+N4<%
I?#%6H%*\
(891


W
I.4.3. Các quy tắc chung
N*"#?%J+C=D+)8%"5R*<5"%+6u;<;q& (
Z #* S"0"#*#"l"#f".0" 2#'() S"0"#4F1
#<m 2#C&##;#* Si"0"#*#4
Z ksW&= n&'O"(#'() S"0"#8&=##5
"#u#<m 2#C'>H
Z U.#-#C##w;"##'@#$4
Z K5"0"+t S?#>€
1
€8 S#…#>€
(
€&i&'O" A(#C&0#
S8 $&.&##x"0"+t/&x#"0"#-T†‡†‡
I%+&T/g"-"0"+t&J";$ˆ/ˆ&x#":+
tQ( S(< V† S"#S(#z‰‡‰
VH5W75PX
8)*/?t;%S*',L}&
K• tự Cách viết
f ˜=*™
h ˜&*™
† ˜>+5*™
U)*/*F]& ˜;"4™
˜ ˜'4™
I*Ps7L“&;d=+XT_*M605*F'&!&+[;q&7
?t*&%@'t4L3+_*M
(Y
60
1

FdL+,S*"‹;~>+'8&o”*?-4C
!q&%@'t4L3+?I
(YEZ0[\01
W^
I.4.4. Cấu trúc của một tài liệu HTML
7;&*".#"Su"#'<T
(F:1
(FA)E1(8:A1(8:A1(FA)E1
(@?EK1
(@?EK1
(F:1
!,oB*FdL+,S*%P*G*0%=%S+*FD*-05eQ%=0N**F'&
*F]&D'IN%L+&&d<š
k"J#C&*
(8:A1(8:A1
 n"#<N#;
##&*":"m<9#5# ;&7";4-…=#55# ;<N
"#$#;;#$&.4
$)) ":;Q(##C0"&x##w":
(@?EK1(@?EK1
47L“&6u;<Td<Tr*'T6%LB5T7#%=%
8-**R5*F'&AB;?J+4<%q•?r,
ML2D*0%=%S+ (?:&%<LDH%?r,
(F:1
(FA)E1(8:A13]      H7  I(8:A1(FA)E1
(@?EK1
RR^70ST7_`3Q0O
$*ab##^*#0Q0H
cddP \ cQ0#    T7  cQ0
(@?EK1

(F:1
!,oB*FdL+,S**Fd;0,*0%=%S+*FD*-05
H=R%Fq&%J+L3+7p?DE5%DN*TL3+o+#&L“&p?DE*P
%SDN*L3+7*0%=%S+*F50*50*D:&?D:&6H%*0%=%S+"'+?r,
(F:1
(FA)E1
(8:A13]H7I(8:A1
W`
(FA)E1
(@?EK1
RR^70ST7_`3Q0O
$*ab##^*#0Q0H
cddP\cQ0#T7cQ0(>1
(@?EK1
(F:1
+,%T?PLƒ*B5L„%6047*%S=•%T*Fd;0,D*F5&6u;<
*FDHLI&*—&N**{&t4*\To+#&L“&8%C*%-*T?t*7*\605:%
E4=)3*
I.4.5. Các phần tử HTML (HTML element)
);1$o#*###,4)###,
&'O"&0# SQ()"J#C(I#C&.4
U0"###,".#"Su"#w"S#5#"w8###,€(}€
"#H#*###,€"$€#0"6$.4
U.###,r8"#f".#C(I4
R<$1#$;&u"u#08",g("Su"":o
###,4
‚#=#'#P5#8-1(g"r"u#0<N#".
()#0$r$0$"#$-(5# ;<N#,(5#
3##'1(=(#4
Bài tập

W +7?t?%PY'"%+6u;<a (b
 -05=0*F'&AB;y
Wc
CHƯƠNG II. TRÌNH BÀY TRANG
II.1. Tạo tiêu đề
•?C+7*F'&6u;<*D$&=07*%+?JC=0|%;X**{&4C
Y'6u;<DD:&T 2T’&CI?J2F„F0&876H%4C*r
?P&D$%?*B5L„%5*+X*%S
I^9*%+?J*F5& (7*P%S7*%+?J42*+N605*Fd
L+,S*D&*&*D$&*d
• %+?J9W
\?G&Q'ILR&
(FG1(FG1
ML2
(FG1H7IG(FG1 0H7I&eJ
Tiêu đề 1
• %+?J9
\?G&Q'ILR&
(F61(F61
ML2
(F61H7I6(F61 0H7I&eJ
Tiêu đề 2
• %+?J9
\?G&Q'ILR&
(F1(F1
ML2
(F1H7I(F1 0H7I&eJ
Tiêu đề 3
• %+?J91
\?G&Q'ILR&

(Ff1(Ff1
ML2
(Ff1H7If(Ff1 0H7I&eJ
Tiêu đề 4
Ww
• %+?J9
\?G&Q'ILR&
(Fg1(Fg1
ML2
(Fg1H7Ig(Fg1 0H7I&eJ
Tiêu đề 5
• %+?J9^
\?G&Q'ILR&
(Fh1(Fh1
ML2
(Fh1H7Ih(Fh1 0H7I&eJ
Tiêu đề 6
II.2. Thẻ trình bày trang
II.2.1. Một số thẻ chính
7*04C*Fd;0,*F'&?P?GLR&<N*?5R6u;<604<%
q*F5&4C*rY'*0%=%S+I%J+*\?DE"KL2&D&*F5&*0%=%S+
0,p*Fd;0,N*"#*\*Fd;0,M?GLR&4C?G'pa
()EEA==1
bT
?5R6u;<a
(>1
bTo+#&L“&a
(@1
bTuM&%@'a
(3A;A1

bT?D$&8\
&'&a
(F1
bT?5R6u;<?!?GLR&"‚a
(>A1
bT*FML…&+[*0%=%S+
a
(@:?3<DB?A1
b
a. Định dạng phần địa chỉ
U#$-##'&x"#f8 ##-0"8#'@&JI&,#
"=;4
\?GLR&
()EEA==1()EEA==1
ML2
()EEA==1
;*/***^(@1
2@(@1
2W70c>/;*&/#27W70c#3iG6f(@1
*jG6kfghlmni
()EEA==1
U-*>+<*+?DE

b. Đoạn văn bản
\0,L}&?Po7?GN*?5R6u;<\
(>1
ak'F'&F'4bI*P
L}&8s*+N*M?P3?G7*Fd;0,?5R6u;<
p=0&%H%RN*?5R4'F'&F'4T7;0,*FML57*04C87*R5
*0  D$&  p  I  85<&  *F#&  85<&  N*  L“&  ',  K'  L“&  *FDH

4'F'&F'4T*F{8%q*F5&4C?G'p
()EEA==1()EEA==1
 N*"#*Fd
L+,S**P%SL“&?C+Y'4'F'&F'4*2*605
\?G&Q'LR&
(>1(>1
(>+,*o0**o,1(>1
N*?5R6u;<F•&=0N*L“&*F]&
d?C+L“&la'FF%'&BlB*+Fb8&I%S+=/o+#&L“&H%0
pI*7L2&DN*L3+7TL5?II*P*R5N*L“&L!7aN*L“&
*F]&b&%@'7?5R6u;<C4<%"KL2&*\
(>1
FD$&E40,pC
L}&*\
(>1
?:=\T8&C*\?I&
_)N*"#*\87D7*\*%+?J
(FG1##(Fh1
TL“&8\&'&
(F1
TL'"7T;<&;%P+T?!8s=+6%So+#&L“&*0N*?5R6u
;<H%U&CL}&**\
(>1
*FDH60"'+7*\0,
c. Xuống dòng
#C A&= n(?4Fg)"= n1x+Jo#.
4Xn(?&'O""*#' n&'O"Ct&)# n&./0 
\?G&Q'LR&
(@1
-+8&+#sN*L“&*F]&0p?:*+C+#o+#&L“&

H%*dC"KL2&*\
(@1
aFB'8b\FB'88&CI*\?I&8s*B5
W
d. Đường kẻ ngang
\0,*R5F'?D$&8\&'&a5F%•5*'=l+=Bb&u7&%@'74C
*F5&*0%=%S+
\?G&Q'LR&
(F1
(F^+poj$*k/q*++*o0**o/^*1
ML2
(F1
()EEA==1C*7m#Gnng#3A;()EEA==1
U-*>+<*+?DE
e. Căn chính giữa
#C A&""#f#&$1I"#*)4
\?G&Q'LR&
(3A;A1(3A;A1
\0,’&I*7L2&o+#&L“&8%8-**_?5R6u;<
f. Đoạn văn bản đã định dạng sẵn
%H%R?5R6u;<?!?DE?GLR&"‚a4FBZx5F'**BLbC?DE*P
%S;q&4&@I?NFN&8)*/8&?|%aL54<%*—&N*b-+8&I
*+N*M
L8EF
?%}&*d;JFN&t?G=0c8)*/ŠL“&JFN&1Tc60
W?DE*P%S*#%D+T“7;JFN&87I*P?DE=0*F“
\?G&Q'LR&
(>A1(>A1
F5&7*04C*FDH
e3+o+#&L“&"‹I)&Q'+,P"'&L“&H%a98&“=0L3+

7b
(>1
8&L}&-+I"‹?DE5%Do+#&L“&
ODE4”4L}&7*04C=%8-*3R
U&?DE9'7*04C?GLR&4'F'&F'4a*%+?JT?G'pTgb

U)*/iaI!Zi60vZccwZW=0wb4<%%P+=0"#L3+7
~3*"'55?-8)*/*%-4*B5•6G*FM=0;N%Y'c+,%8&L}&
ML2
(>AL8EF+,mi,1
;7rs) tu
vP@ t=e
(>A1
U-*>+<*+?DE
g. Trích dẫn nguồn tài liệu khác
XA&+"# ƒ()&$18#'@&'O"##;Q"#
#"."*#2$$#'()##'@".() n
= '?4
\?G&Q'LR&
(@:?3<DB?A1(@:?3<DB?A1
ML2
8c***^/
(@:?3<DB?A1
(>1=7#*?*;#//#*
//***^(@:?3<DB?A178/7*
U-*>+<*+?DE
*%8*B45BBL"
5x*,5+5€T*Bx'%Fv4B=%',4T
%*,5F%"5"T;B'==,"%"
FBB;BL

;+*'5*"+FB

;7rs) tu
vP@ t=e
II.2.2. Các thuộc tính của thẻ trình bày trang
a. Thuộc tính ALIGN của thẻ Paragraph
\
(>1
L}&?Po7?GN*?5R6u;<aD*Fd;0,•4C*FDHb
eDH%?r,*'*d%P+8Œ*N*"#7*+N*M8s*B5a
):89;
bY'II
*Pu=J*F7%a=Bx*Zt?GbTu&%@'aB*BFb5tu=J4<%aF%&*b
• u=J*F7%
(>):89;+:AC1(>1
<?5R6u;<?DEu=J*F7%Y'*F'&
ML2
(>):89;+:AC1
3!vwxR&y
3zdI7{tb
3&'0|y*!}
Rb007R0
(>1
U-*>+<*F<6JN*?5R6u;<?DEu=J;*F7%D"'+
• u&%@'
(>):89;+3A;A1(>1
<?5R6u;<?DEuM&%@'*F'&
ML2
(>):89;+3A;A1
3!vwxR&y

3zdI7{tb
3&'0|y*!}
Rb007R0
(>1
U-*>+<*F<6JN*?5R6u;<?DEu&%@'D"'+
1
Có lần tôi thấy một người đi
Chẳng biết về đâu nghĩ ngợi gì
Chân bước hững hờ theo bóng lẻ
Một mình làm cả cuộc phân ly
• 
u

=J4<%
(>):89;+89F1(>1
<?5R6u;<?DEu=J;4<%Y'*F'&
ML2
(>):89;+89F1
3!vwxR&y
3zdI7{tb
3&'0|y*!}
Rb007R0
(>1
U-*>+<*F<6JN*?5R6u;<?DEu=J;4<%D"'+
b. Thuộc tính Clear của thẻ xuống dòng
\o+#&L“&
(@1
’&I*+N*M8s*B5D"'+
(@3:A)+)::1
(@3:A)+:AC1

(@3:A)+89F1
7*\?DE"KL2&8%sd<T?P7L“&@o+3*%S;
LDH%T;*F7%',;4<%Y'd
c. Các kiểu đường kẻ ngang khác nhau
D•4C*F?!&%H%*%S+T*\
(F1
*R5N*?D$&8\&'&R,"+#*
%J+FN&K'"|0d7?D$&8\0,I*P?DE*',?|%?N?X
a<bT&]TL0%Tu=J*F7%Tu=J4<%Tg;q&7"KL2&7*+N*MY'
_&
(FL8EF+p=8~A+):89;+:ACo89F;?=F)EA1

Có lần tôi thấy một người đi
Chẳng biết về đâu nghĩ ngợi gì
Chân bước hững hờ theo bóng lẻ
Một mình làm cả cuộc phân ly
Có lần tôi thấy một người đi
Chẳng biết về đâu nghĩ ngợi gì
Chân bước hững hờ theo bóng lẻ
Một mình làm cả cuộc phân ly