Tải bản đầy đủ (.doc) (209 trang)

TÌM HIỂU HTML VÀ THIẾT KẾ WEBSITE

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.71 MB, 209 trang )


   
 !"#$#%&'$()#*#)"
+#",#-&".#*#/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1234 5"

67,%"."891:
 ;6."/<*25=>?1@?=A.B."/
,CDE(-!F:
 ;GE 
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)
 H=>;6=<1"-."/012,C7
,%89195I"."8919J:
 K+KG-LM+L
M?=H7;LMH7NO7;:


MỤC LỤC
LỜI MỞ ĐẦU
1
CHƯƠNG I. NHỮNG KHÁI NIỆM CƠ SỞ 7
I.1. World Wide Web là gì? 7
I.2. HTML là gì? 11
I.3. Các đặc điểm của siêu văn bản 12
:::HG3P*,A*</,%*<C:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::HG3P*,A.-L?,%/$-?::::::::::::::::::::::::::::::::::::::::::::::
:::8919,%?QR+9*9:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

I.4. Soạn thảo văn bản - những vấn đề chung 14
:&::? S7,%?891:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::&
:&::-T7::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::U
:&::-4 !V :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::W
:&:&:) ?XQG%3L 7::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::Y
:&:':-*<D7Z79399[::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::\
Bài tập 21
CHƯƠNG II. TRÌNH BÀY TRANG 22
II.1. Tạo tiêu đề 22
II.2. Thẻ trình bày trang 24
:::GTF::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::&
:::- GFQT?]1%!?:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::^
Bài tập 32
CHƯƠNG III. DANH SÁCH VÀ BẢNG TRONG HTML 33
III.1. Các kiểu danh sách 33
:::_-.5-/$::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::_-5-/$:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::'
:::_--5@J::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::W
::&:_-*>*M3S ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::^
III.2. Bảng biểu 39
::: ) ?X:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::Y
:::G3= ,C12:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::&\
:::-,FE(::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::&'
Bài tập 49
CHƯƠNG IV. ĐƯA HÌNH ẢNH VÀO TÀI LIỆU HTML 50
IV.1. Hình ảnh tĩnh 50
:::L*2::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::'\
:::T`Oab::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::'\
IV.2. Các thuộc tính của thẻ chèn hình ảnh 51
::: GFc:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::'

&

::: GF8_7,%7dO7:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::'
::: GFcO;::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::'
::&: GFecd,%7ecd::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::'
Bài tập 54
CHƯƠNG V. CÁC MỐI LIÊN KẾT SIÊU VĂN BẢN 55
V.1. Thẻ neo và mối liên kết 55
::: GF7fdg::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::''
:::."?+%hdi9?3.::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::''
:::H@j !L5::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::'U
::&:H@j=05::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::'U
::':."Gh9?3.:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::'W
V.2. Dùng hình ảnh làm đầu mối liên kết 57
:::!61k]:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::'W
:::9*RTcfdc::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::'^
V.3. Đưa âm thanh vào tài liệu 59
:::."5"L*l:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::'Y
:::+lC::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::'Y
V.4. Đưa Video vào tài liệu 60
:&::mL*E9+::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::U\
:&::;XL*,E9+::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::U\
Bài tập 62
CHƯƠNG VI. BÀY TRÍ NỀN VÀ KHUNG 63
VI.1. Màu nền và văn bản 63
:::Hn% C:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::U
:::% 6Q,12:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::U
:::% Q5< 3."R GF;M;,%c;:::::::::::::::U
::&: GF,%% :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::U'
VI.2. Nạp hình ảnh làm nền cho trang văn bản 66

::: GFKcOfop;_:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::UU
:::89??.::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::UW
:::7!.,%+%3L Q]:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::UW
VI.3. Khung – Frames 68
:::??F. ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::UY
:::%*<gfcded::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::W
VI.4. Thiết lập Target, thẻ NOFRAME và IFRAME 74
:&::"3P*?9::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::W&
:&::T;ogfcde::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::W'
:&::;Xq?9RTgfcd::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::W'
Bài tập 76
CHƯƠNG VII. BIỂU MẪU STYLE VÀ CASCADING STYLE SHEET 77
VII.1. FORM 77
:::gof3%]r:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::WW
:::-%*<?+gof::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::W^
:::F) ?X+gof:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::^^
'

VII.2. Cascading style sheet 91
:::39e!39:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::Y
:::OAL e!39e99:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::Y
:::s,?*e!39e99:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::Y&
::&: P6e!39e99::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::Y^
::':-XF?+e!39e99:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::Y
::U:>FQ-e!39e99::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::Y
::W:">*e!39e99,A7:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::\
::^:/$= Q-!39ZE[:::::::::::::::::::::::::::::::::::::::::::::::::::U
CHƯƠNG VIII. CÔNG CỤ SOẠN THẢO TRỰC QUAN WEB
(MICROSOFT FRONTPAGE 2003) 129
VIII.1. Tạo một trang Web 129

:::KV5< DE(g?+9\\:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::Y
:::+G?tG9*39::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::\
:::+,%3= G?A::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::&:+G5C(::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::':q+,%% ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::'
VIII.2. Tổ chức một trang với các liên kết, danh sách và bảng 137
:::G!*9?3.,%+G?891::::::::::::::::::::::::::::::::::::::::::::::::::^
:::+GE-::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::&
:::u/G?,A-12::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::&&
::&:7I@]2?G?891:::::::::::::::::::::::::::::::::::::::::::::::::::::::'
::':+G8919A:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::W\
::':-9A::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::W
VIII.3. Phát triển nhanh một site với các template 182
:::G9*398919:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::^
:::+G8919A:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::^
:::+v!1"8919AQ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::^'
::&:,%3+1w-3XF:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::^W
::':-9*399?+3891e9::::::::::::::::::::::::::::::::::::::::::::::::::::::^^
::U:G9,%+G?891::::::::::::::::::::::::::::::::::::::::::::^Y
::W:= -!5uG9::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::Y
VIII.4. Tạo một site với sự trợ giúp của Wizard trong FrontPage 2003 192
:&::xGyz?E+9:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::Y
:&::;P*G9LB,%+g?+9:::::::::::::::::::::::::::::::::::::::::::::::::::::::Y&
:&::G*=0*-**+?:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::Y'
:&:&:,@?F5I3= 9::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::YY
:&:': P**2St-.-4 8919Q::::::YY
:&:U:= *2SQ.-4 Gq39:::::::::::::::::::::\
:&:W:;P*2SQ.-4 1k93::::::::::::::::::::::\&
Bài tập 207
U


CHƯƠNG I. NHỮNG KHÁI NIỆM CƠ SỞ
I.1. World Wide Web là gì?
8+?3E8E9891Z888[3%G-% !:
888E$?0"5I-% !%!?x{Ev+=
i9%?G?)%
R 0"5nvE5,A,L5@E-% !?
888Z=-pf[
R -+/M5I? !P*A-% !4 888 Z=
7[
R e , 12M  5I E| E%  !I 5u 6 - %  ! Z=
7[:
-?%1 G610"5=> ?}E=A5l!
OAL ,Cpf
% !{Ev?888h%3L 7M2M,E9+
3*M=0?]MaRBG5@j%BI5=>B1xGpf:
-pf=S*<
R L5nQ-0"Ev5I? !P*% !
R Q-!F3= ?6Zu/[% !
R Q12l% !M=G5=E~
FE(+pfj?}?893f9*+?

pf%!BI5=>5= BG%3L {Ev9++
/7M53= ?+-!

MBI? !P*9+5=
W

E~•


€:-0".-BI)!?+-%3L 71+S


€5,A=5LD,%•

€5,Ag:
Hl!3%G,FE(.-,Cpf:FE(%!-jAG*=
Z31+i[Q=Ev

 !"#$%&'
()*+,-*./*0*0,12*3()1
-5@E5+Zq?9E9q9?[
Gpf-jA,L5@,@G% !:I %!Q
pf."X,A•
4
€9+ 1xGE) L ."Z3%"0"&x#
#&$1[:FE(M5l!3%Gpf5-E) GB3%9+•
/*/*04/*056
-pf=05
Gpf=05.9+0"5n:H=E~QB
=" AG% !?vG-!=%3L L
:-pf=05BIS-%*<5=E~=05
Z=•::€J3%G/??+) ?X5=>5@J1x5=
E~[M,%BI1+S-E) L 5+:
-pf5=>24 !"5I++%-pfDE(Gpf
:;=G,FE(Q2*-*pf=05M2DXBpf


0*0/7
€:  pf  =0  5

?+5-E) E=A5l!+G3." ,12
`c?9q‚€ **39?:3€be **39?`ƒcb
^

„x?G%pf5<!5Q

0*0/7/7*/
€  ?+  .
pf=05?+,L5-E) +G2E=A5l!
(89/0+,0/,+,,1
„  x  ?G  %  pf  5<!  5Q

0*00/

?+7M-pf5=>Ev5I
R ."A%3L +n% !.-MZi9c,%;[
R ."A.I E1+%+n.@12Z?*[Zi9
:8;<
=38>
[
R OSG2M5=>M+n**39?+G?MZi9
89#
?@2A3#)>>:A8;>B
[
R +G12ES2Zi9
)>)A)
[
R +Gq+?Zi9
C?
[

R +G. %3L Zi9
C)A8C)A
[
R ?FE~GjE~1+%Zi9
D#@:?3<DB?A#8;=
EA:
[
R .2+-4 !=A E63L 2G%3L Zi9
FA)E
[
;%!!=Ev-!F=G(?)6 F5I? !
P*9?9MQ!" 3%].":-%!BI3%-
,12M]2l!5*=0LaA+EL
lL1x,LDE(-.L M1I =>?)>2<,A
-]25=,%j<6+-5025B!
<]."x?=An:
Y

; < DE(-!F5I? !P*9?9]."
%!%C ,%=DE(-!FB?]5G,%"c
5II -1-+Q-!.- :%"%+5I=BI
E|E%DE(-!F5I? !P*9?9=G(*(,(5V
3$+,L?/ ]."??G3A)
+%(:
 L%!?xE|E%01x=x ,12Z7!*9?9i[:
e ,123%-,12•€BIX*=5],% 
)*+-%3L 34 :;=5.*2)]."
?+.+9?9,P:
-L ,12E+%9E;93+5Ci ),%+
YU'=G=A0Z•+* 9?_?9€[,C.2Q-!F

?+=03:…!,,C--!FB?F L=+=M1"
-? !]-<":
_$-$L ,123%QG.†=?T=c3%
K9?9?h99:e .L*Hoiq+?Zc[YWUM
Y^\5,"G=0?]*w3."C 1).‡
?G5S@=.I 3." ,12:;Y^YM?+.3%,L
L/ .† Pll ˆ Zdf;[K9?9Z(!†[M
)!-5SL*?),),2?+,L?%3L M55=?G5C
-3= ?6 ,12?-!F++E|E%]."%3L 0:
?+"A ,12888M=DE(BIE|E%5
t%3L %!%3L .-4 -3.":;=,P!B
IE 3@?+i3G*+*X?+.,~S%:†
 P ,12X*+.*2P ,?0x?%,~B
\

I=‰5=>-.L-G:FB5B**<+?
1=A*-?I1vuQ9?9?+6<5l!:
I.2. HTML là gì?
HI*u1"?+%(M<G6*u1",%E|
I MG.I ,L*u1""Š5T%+%1G--!FBI
I 5=>:;6*u1"Ev1x8+?3E8E98913%7Z7!*9?
9i?. * 9[:
7+-2-J5I
u1"-%3L ?$ !",A-9EM,12M12ME
-M2M::,:,a
? !]?$ !"9+-3." ,121k,L
.F,%+GX
"."-5@E+,L.I+--+E@Z?+[
,A-"1@tiM5,A=Ev?+,L]."M+
-2*‹M5n%M:,:,a

K+S*?9ER99M,E9+3*M+ E3*M,%-/E(?$
"*.-?+-%3L Q:
-?8915<!5G%1)!?8+?3E8E98913%
-? ,125=>,"1k65-E)  ,12!
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"#;;"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#,(*(:G%3L 75=>
,"1kG*<C+2+(I1).‡M?G-!(I%+5B
5C BI55=>?1).]GL=0F%+:
HC %!BJ3%-L* ,12BI5=>?]E !LI
@?c!v!%.*2D6!5u]:I M".


&'O"+#"#S5"0"#C"#f !&1",",#(5"#H
#"2#",(#'#-$4
Œ,]3„5B%1##"#g""#g;<
":1<N#;(#5#"#+#0"#'#-$5"ny#$5#
;##;"0"###,<$:
$#t"!8"#f#t"<t&)"P&=?#,"H8"#'
#$$&)"P&=?#,(*(4j*<3}3% ‹+-M•-
*<x?GE+t%*-?Iil!E$].+%+%=0
F :
I.3.2. Độc lập với khái niệm trang và thứ tự các trang
GF)63%75G3P*,A.-L?:12
5=>?]1%!v!9+.F=AQDuI@Du?G1C
]„ V0MDuŠ*1C]„5=>.Ž+E%?5II@
+"GE :HGE%Q,127$$.1@":
I.3.3. Website và trang chủ - homepage
Gy9193%G1B-?y913."
,A ,%3.",A-?x1+%
k@=L:7%?L 8919
3.",A +%8+?3E8E9891h

888


BI=x=>=GXw-
?y91•%!G+M5=>*-
?I1k-,%+C ?y913X
.-6
BI+]2QGy919=
?+],„1
?Q!?FR•+9*9•BI
I 3%DFR•q?+E++?•5IlP*,%+
.+3."k@)!:
P!+9*93%?y91%1GE !L„x
?5< •.=Ev1V5< 
y919:
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;= %!
„)!M-?]E !L.- BII@vG? S
.+%+% :
.<$1#$<H"1$(i6&u

/&x#&&) ;#&'O"##x&u4
eDE(75I+2+-? ,12M*g"
"l##0"(S<$? A"0")<$1#$##'@:
‘M?++2+,12=M5I3%u1P- 5C
*25-E) B,%‰+MF6:::=0?]+2+
,12„m-E) L F>*Z.])!5=>[,%+5<
,% 5+ 5C5=>5IILB9+! < :
A7Œ=0$=,P!:HI3%u1P- 5C<
5-E) 5I1V5< ,%5I."XQ5+ 5C1kn*T
79EM,FE(
(FG1(FG1
:KGE !L„I@5+%!,A‰6
+0,%F6:
FE(ME• 5l!?+%3L 7
(FG1H7IJ0G(FG1
„5=>?]E !LI@%
Tiêu đề mức 1
7L  !  B  C    (  +  2+    ,  12    =
"$<$hc$[8X(344?$ ;t"/t&)
'

<#(i8"#$#%<$1#$<#'<$1#$#
#'@:
 !M;"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"M()&$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FE(M5ImG]2,%+?%3L EvT
(891
U

Z9[: !M<j?}-2%+„5=>E-,%+5l!:HC %!
5=>"3P*1k GF
=3+MP0U0STM
: GF

ef3%1V1 G*2B5,AT
(891
:
I.4.3. Các quy tắc chung
G5C <3= .+2+ ,121k7
R #* S"0"#*#"l"#f".0" 2#'() S"0"#4
F1#<m 2#C&##;#* Si"0"#*#4
R ksW&= n&'O"(#'() S"0"#8&=
##5"#u#<m 2#C'>H
R U.#-#C##w;"##'@#$4
R K5"0"+t S?#>€
1
€8 S#…#>€
(
€&i&'O" A(
#C&0# S8 $&.&##x"0"+t/&x#"0"#
-T†‡†‡
;B   M /  g"  -  "0"  +  t  &J"  ;  $    
ˆ/ˆ&x#":+tQ( S(< V† S"#S(#z‰‡‰
VH5W75PX
'.$5n1L!Ev
K{ tự Cách viết
` ’3“
b ’“
• ’4 +“
$?V ’1*“
W

’ ’*“
BIm-E•1]3 PMXF:::,%+? S1k

-5n6n*E) XF
(Y
,%
1
:?]E !L„1w4 .
iŽ5"*<k6n*E) 5B
(YEZ0[\01
^

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
7!i9?]E !LI@%3L ?="%+:_J3%G
??V=BGE ]2”
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-E•,12M]2MlM,E9+M
-3.":::+?8915C *2kx5l!:
FE(=%3L 7502E=A5l!
(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
Y

7!i9?]E !L?]1%!%3L ?="%+:
;A3?kC E) -j5=>+=GME) i E•j
5=>IL=GE) -%3L ?+%+%=05=0,A%
3L  5l!
(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(>1
(@?EK1
(F:1
 !M5IE|9+E},%*-L3•M?]1%!=?+
,12?=AEB‘Gtn*TMi E•.<"M5n
-T,%+0>*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
: ; -5n5IQ ,12Z7[
: "%+3%?891r


CHƯƠNG II. TRÌNH BÀY TRANG
II.1. Tạo tiêu đề
x5< -?,12=3%- 5C<3%u1Pt
*<Q,12==0M(M:::Œ<B5C(?}?%.-,A
*<l5I=59+E}+ PL:
BU/ 5C?+7:-IL- 5C*( G
,%+?]E !L==]
•  5C/
T5@JBE
(FG1(FG1
FE(
(FG1H7IG(FG1 0H7I&eJ
Tiêu
đề 1
•  5C/
T5@JBE

(F61(F61
FE(
(F61H7I6(F61 0H7I&eJ
Tiêu
đề 2
•  5C/
T5@JBE
(F1(F1
FE(


(F1H7I(F1 0H7I&eJ
Tiêu
đề 3
•  5C/&
T5@JBE
(Ff1(Ff1
FE(
(Ff1H7If(Ff1 0H7I&eJ
Tiêu
đề 4
•  5C/'
T5@JBE
(Fg1(Fg1
FE(
(Fg1H7Ig(Fg1 0H7I&eJ
Tiêu
đề 5
•  5C/U
T5@JBE

(Fh1(Fh1
FE(
(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
-%*<?]1%!?5I5@E2G5+,12,%
*2k?+*<lQ%3L :BC T5=>DE(=
?+%3L %!j?]1%!GT?]1%!F5@E*<
5@jZ
()EEA==1
[M5+,12Z
(>1
[Mi E•Z
(@1
[MF
6Z
(3A;A1
[M5=.TZ
(F1
[M5+,1255@E{
Z
(>A1
[M?FE~ S%3L Z
(@:?3<DB?A1
[
a. Định dạng phần địa chỉ

U#$-##'&x"#f8 ##-0"8#'@&JI
&,#"=;4
T5@E
()EEA==1()EEA==1
FE(
()EEA==1
;*/***^(@1
2@(@1
2W70c>/;*&/#27W70c#3iG6f(@1
*jG6kfghlmni
()EEA==1
"4 2 5=>
&

b. Đoạn văn bản
T%!Ev5Ii-5@G5+,12:T
(>1
Z??*[B
IEv.m GF5I)5@-?]1%!5+,12:
j3%AG5+*??*M-1%!?FE+-%*<
.-+%:=jB.+2?.+2GE•!DE•
?=A*??*M?t.k?+*<5@j
()EEA==1()EEA==1
:
G?]E !LILE•5< Q*??*(,%+:
T5@JE
(>1(>1
(>+,*o0**o,1(>1
G5+,12?•3%GE•?V:
]5< E•fZ??9f9 ?[.BL 3$i E•A

%jB-E(=GE) -ME+5BBI+GE•E-
ZGE•?V[6-5+,12<*2DE(T
(>1
:?=
>*%!j<EvT
(>1
503TM.<T5B:
XGT.-=-T 5C
(FG1##(Fh1
ME•.T

(F1
ME-M121I M:::5.m3 ,Li E•%
G5+,12A:<EvT
(>1
?=A,% -T
%!:
c. Xuống dòng
#C A&= n(?4Fg)"= n1x+J
o#.4Xn(?&'O""*#' n&'O"Ct&)# n&.
/0 
T5@JE
(@1
'

×