CH1 4 PDF

Chng 1
Gii thiu HTML - Cc Th C Bn
Mc tiu ca chng:
Kt thc chng ny, bn c th:
M t WWW.
nh ngha HTML.
M t vai tr ca cc trnh duyt.
Gii thch cc nh du ca HTML.
M t cu trc ca mt ti liu HTML.
S dng cc i tng nng cao mt trang Web.
S dng cc danh sch trnh by vn bn.
Chuyn i ti liu hin thi thnh ti liu HTML.
Gii thiu
Internet, World Wide Web, v Web page khng cn ch l cc thut ng
trong sch v. Gi y, nhng thut ng ny tr thnh hin thc. Internet hin
ang l h thng mng ln nht th gii v c xem l mng ca cc mng.
World Wide Web l mt phn ca Internet. World Wide Web gm nhiu my
ch dch chy dch v web nm ri rc trn khp th gii. My ch dch v web
cha thng tin m bt k ngi dng no trn th gii cng c th truy cp.
Nhng thng tin ny c t chc di hnh thc cc trang web. Trong chng
ny, bn s hc v HTML, y l mt phn quan trng trong lnh vc thit k v
pht trin trang web.
1.1 World Wide Web
Mng my tnh l mt nhm cc my tnh c ni kt vi nhau. Internet l
mng ca cc mng. Giao thc TCP/IP cung cp cc lin kt vi tt c cc my
tnh trn th gii.
World Wide Web (WWW) l mt b phn ca Internet. WWW khi u ch l
mt n nghin cu cp quc gia ti cc phng ngin cu CERN Thu S,
n nay n cung cp thng tin cho ngi dng trn ton th gii.
WWW hot ng da trn 3 c ch a cc ngun thng tin n vi ngi
dng. l:
Giao thc Ngi ta tun theo cc giao thc ny truy cp cc ti nguyn
thng qua Web.Giao thc truyn siu vn bn (HTTP) l mt giao thc c
WWW s dng.
a ch - WWW tun theo mt dng t tn thng nht truy cp cc ti
nguyn trn Web. Cc a ch URL c s dng tm cc trang v cc ti
nguyn trn mng.
1
HTML Ngn ng nh du siu vn bn c s dng to cc ti liu
c th truy cp trn mng. Ti liu HTML c to nh cc th v cc phn
t ca HTML. File c lu trn my ch dch v web vi phn m rng
.htm hoc .html.
Khi bn s dng trnh duyt yu cu mt thng tin no , my ch dch v
web s p ng yu cu ny. N s gi thng tin c yu cu n trnh duyt
di dng cc trang web. Trnh duyt nh dng thng tin do my ch gi n v
hin th n.
1.2 Gii thiu HTML
Ngn ng nh du siu vn bn ch r mt trang web c hin th nh th no
trong mt trnh duyt. S dng cc th v cc phn t ca HTML, bn c th:
iu khin hnh thc v ni dung ca trang.
Xut bn cc ti liu trc tuyn v truy xut thng tin trc tuyn bng cch
dng cc lin kt c chn vo ti liu HTML.
To cc biu mu trc tuyn. Nhng biu mu ny c th c s dng
thu thp thng tin v ngi dng, qun l cc giao dch
Chn cc i tng nh cc trch on m thanh, trch nh video, cc thnh
phn ActiveX v cc applet ca Java vo ti liu HTML.
Bn thn ti liu HTML l mt file vn bn c phn tn m rng .htm hoc .html.
Ti liu ny hnh thnh m ngun ca mt trang web. Khi c hin th trong
trnh son tho, ti liu l mt lot cc th v cc phn t quy nh cch trang
c hin th. Trnh duyt c file .htm / .html v hin th trang theo cc quy
nh .
V d, c php HTML di y s hin th thng ip My first HTML
document:
<HTML>
<HEAD>
<TITLE> Welcome to HTML</TITLE>
<BODY>
<H3> My first HTML document</H3>
</BODY>
</HTML>
Trnh duyt din dch cc cu lnh ny v hin th nh sau:
2
Hnh 1.1- Hin th trang web
1.3 Trnh duyt v Trnh son tho
Trnh duyt
Ti liu HTML c hin th trn mt trnh duyt. Trnh duyt l g? Trnh
duyt l mt ng dng c ci t trn my khch. Trnh duyt c m ngun
HTML v hin th trang theo cc cu lnh ch dn. Mt trnh duyt c dng
xem cc trang Web v iu hng. Trnh duyt c bit n sm nht l
Mosaic, c Trung tm ng dng siu my tnh quc gia (NCSA) pht trin.
Ngy nay, c sn nhiu trnh duyt duyt Internet. Netscapes Navigator v
Microsofts Internet Explorer l hai trnh duyt chnh ang c s dng. Trnh
duyt lm cho ngi dng s dng d dng nh n c giao din ho v vic
s dng chut trong .
Trnh son tho
to mt ti liu ngun, bn cn mt trnh son tho HTML. Ngy nay, c
nhiu trnh son tho ang c s dng:
Microsoft Frontpage l mt cng c tng hp c th c dng to, thit
k, v hiu chnh cc trang Web. Bn a vo cc vn bn, nh, bng v cc
phn t HTML khc vo trang Web ca mnh. Bn cng c th to biu mu
trong Frontpage.
Mt khi bn to giao din, trnh son tho Frontpage s to m HTML cn thit.
Notepad - bn c th s dng Notepad to ti liu HTML. xem ti liu
trong trnh duyt, bn phi lu ti liu vi phn tn m rng .htm / .html.
1.4 Cc th HTML
Cc lnh trong HTML c gi l cc th. Cc th ny c dng iu khin
ni dung v hnh thc trnh by ca ti liu HTML. Th bt u c th hin
bng hai du ngoc <>. Th ny ch s bt u ca cu lnh HTML. Th kt
thc c th hin bng du </ >, ch s kt thc ca mt cu lnh HTML.
V d, th HTML c s dng thng bo s bt u v kt thc ca mt ti
liu HTML.
<HTML>
3
..
</HTML>
Cc th khng phn bit ch thng v ch hoa, v th bn c th s dng
<html> thay v <HTML>.
Th HTML bao gm:
<PHN T THUC TNH = gi tr>
Phn t - nhn dng th.
Thuc tnh m t th.
Gi tr - l ni dung ca thuc tnh.
V d,
<BODY BGCOLOR = lavender>
Trong v d trn, BODY l phn t, BGCOLOR (nn) l thuc tnh v
lavender l gi tr. Khi c php HTML c thc hin, mu nn cho c trang
s l lavender.
<HTML>
<HEAD>
<TITLE> Welcome to HTML</TITLE>
</BODY>
</HTML>
Hnh 1.2- Thay i thuc tnh

1.5 Cu trc ca mt ti liu HTML
Mt ti liu HTML gm 3 phn chnh:
Phn HTML. Mi ti liu phi bt u bng mt th HTML <HTML> v kt
thc bng mt th HTML </HTML>.
Th HTML thng bo vi trnh duyt ni dung gia hai th ny l mt ti liu
HTML.
4
Phn tiu . Phn tiu bt u bng th <HEAD> v kt thc bng th
</HEAD>. Phn ny cha tiu c hin th trong thanh iu hng ca
trang Web. Tiu nm trong th TITLE, bt u bng th <TITLE> v kt
thc bng th </TITLE>.
Tiu l phn kh quan trng. Cc du mc (bookmarks) c dng
nh du mt Website. Trnh duyt s dng tiu lu tr cc du mc.
Khi ngi dng ang tm kim thng tin, tiu ca trang Web s cung cp
t kho chnh yu m ngi dng ang tm kim.
Phn tiu cn cha phn t META. Phn t META cung cp thng tin v
thng tin trn trang ca bn. N bao gm tn tc gi, tn phn mm m trong
trang c vit, tn cng ty, thng tin giao tip Phn t META s
dng s kt hp gia c tnh v gi tr.
V d, ch Graham Browne l tc gi, ngi ta s dng phn t META
sau:
<META name = Author content = Graham Browne>
Tc gi ca ti liu l Graham Browne.
Thuc tnh http-equiv c th c s dng thay th thuc tnh tn. My
ch HTTP s dng thuc tnh ny to mt u p ng (respond header)
HTTP. u p ng l u c truyn qua trnh duyt nhn bit d liu.
Nu trnh duyt bit phn u l ci g, n s c hnh ng c bit i vi
phn u .
V d,
<META http-equiv=Expires content=Wed, 15 Sep 1999
14 : 25 : 27 GMT>
s to mt u p ng HTTP:
Expires: Wed, 15 Sep 1999 14: 25: 27 GMT
V vy, nu ti liu c lu tr, HTTP s bit khi no truy xut bn copy
mi ca ti liu tng ng.
Phn thn vn bn nm sau phn tiu . Phn thn vn bn bao gm vn bn,
nh v cc lin kt m bn mun hin th trn trang Web ca mnh. Phn thn
vn bn bt u bng th <BODY> v kt thc bng th </BODY>.
<HTML>
<HEAD>
<TITLE> Welcome to the world of HTML</TITLE>
</HEAD>
<BODY>
<P> This is going to be reeal fun<P/>
</BODY>
</HTML>
5
1.6 Cc phn t HTML c bn
By gi, bn s hc mt s phn t HTML c bn. Cc phn t HTML c th
c phn loi nh sau:
Phn t mc khi (Block level elements) y l cc phn t xut hin
phn thn vn bn. Cc phn t mc khi c s dng kt cu ti liu ca
bn. Cc phn t ny c th cha cc phn t trong dng hoc mc vn bn
v cc phn t mc khi khc (ngoi tr phn t a ch (ADDRESS)). Khi
cc phn t mc khi bt u mt hng mi, bn khng cn ghi th kt
thc.
Mt s phn t mc khi thng thng:
Phn tiu (H1 n H6)
on vn bn (P)
Hng mc danh sch (LI)
ng nm ngang (HR)
Phn t mc vn bn hay trong dng (Inline or text level elements) y
l nhng phn t cha d liu. Cc phn t ny cng c th bao gm cc
phn t trong dng khc v khng ng u dng mi.
Mt s phn t mc vn bn thng thng bao gm:
EM, I, B v FONT (nhn mnh k t)
A (lin kt a vn bn)
BR (ngt dng)
APPLET (i tng c nhng)
IMG (nh)
Tiu (Headings)
Phn t ny c s dng cung cp tiu cho phn ni dung hin th trn
trang Web. Tt c cc phn t tiu phi c th kt thc. N bt u bng
<H> v kt thc bng </H> (Trong X l mt s nguyn t 1-6).
Phn tiu c hin th to v m hn phn bit chng vi phn cn li
ca vn bn. Bn c th hin th tiu mt trong su kch thc t H1 n
H6. Tt c nhng g bn cn lm l ch r kch thc, H1, H2Trnh duyt
ch trng n cch hin th.
<HTML>
<HEAD>
<TITLE>Introduction to HTML</TITLE>
<H1>Introduction to HTML </H1>
6
</HEAD>
</HTML>
Hnh 1.3- S dng headings

on vn bn (Paragraph)
Khi vit mt bi bo hay mt bi lun, bn chia ni dung thnh nhiu on.
Mc ch l nhm cc tng logic li vi nhau v nh dng ni dung.
Trong ti liu HTML, cc phn t mc vn bn c th c nhm thnh cc
on. Th on <P> c s dng nh du s bt u ca mt on mi.
<HTML>
<HEAD>
<TITLE>Welcome to HTML</TITLE>
<H3>My first HTML document</H3>
<P>This is going to be real fun
<H2> Using another heading</H2>
<P> Another paragraph element
</BODY>
</HTML>
7
Th kt thc on </P> l khng bt buc. Th <P> k tip s t ng bt u
mt on mi.
Thm a ch
Phn t <ADDRESS> c s dng hin th cc thng tin nh tc gi, a ch,
ch k.. cho ti liu HTML ca bn. Phn t <ADDRESS> thng hin th
cui trang v c th cha mt hoc mt s phn sau:
Lin kt n trang ch
c tnh chui tm kim.
Thng tin bn quyn.
<HTML>
<HEAD>
<P> This is going to be real fun
<H2>Using another heading</H2>
<ADDRESS>
<P><A> href=some address>Click here to register for
a free newsletter</A>
</ADDRESS>
</BODY>
</HTML
Bi tp 1
1. Vit m HTML cho mt trang Web vi tiu Using headings. B sung
tiu mc 3 cho vn bn My first HTML document.
2. To mt trang Web vi tiu Using Paragraphs. To 2 on vn bn.
Hin th tiu mc 5 gia hai on vn bn.
1.7 Nng cp trang Web
L mt nh thit k, bn c th nng cp trang Web lm cho n thn thin
ngi dng hn.
Cc th ngt
Phn t <BR> c s dng ch ngt dng trong ti liu HTML. Th <BR>
b sung k t xung dng (v v u dng) ti v tr ca th.
<HTML>
<HEAD>
8
<P>This is going to be real fun
<H2>Use another heading</H2>
<BR>
<H1>This is should surprise you</H1>
<ADDRESS>
<A href=some address>click h to register for a free
newsletter</A>
</ADDRESS>
</BODY>
</HTML>
Th ng ngang
Th k ng ngang <HR> c s dng k mt ng ngang trn mt trang.
Cc thuc tnh sau y gip iu khin cc ng ngang. N c mt th bt u,
khng c th kt thc v khng cha ni dung.
Thuc tnh M t
Align Ch v tr ca ng ngang. Bn c th canh l nm gia phi
tri. V d, canh l = nm gia.
width Ch di ca dng. N c th c xc nh bng cc im
hoc tnh theo phn trm. Mc nh l 100%, ngha l ton b
b ngang ca ti liu.
size Ch dy ca ng ngang v c xc nh bng cc im.
noshade Ch ng c hin th bng mu c thay v c bng.
<HTML>
<HEAD>
<TITLE>Welcome to HTML </TITLE>
<BODY>
<HR noshade size = 5 align = center width = 50%>
<HR size = 15 align = left width = 80%>
<HR>
<P> This is going to be real fun
</BODY>
</HTML>
9
Hnh 1.4- To cc vch k
S dng Font
Th <FONT> c s dng iu khin cch hin th vn bn trn trang Web.
Bn c th xc nh cc thuc tnh nh kch thc, mu sc, kiu
Bn c th t cc thuc tnh FONT cho c ti liu bng cch t phn t trong
th BODY. Ngoi ra, thuc tnh FONT c th c th cho tng t, tng phn, v
tng phn t trong trang.
Thuc tnh M t
COLOR c s dng ch mu ca FONT. Bn c th s dng tn
mu hoc xc nh gi tr thp lc phn.
SIZE c s dng ch kch thc ca font. Bn c th ch ra
mt lot cc kch thc ca FONT t 1 n 7. Kch thc ln
nht l 7 v nh nht l 1. Bn c th s dng mt kch thc
chnh v ch ra nhng kch thc tip theo lin quan n kch
thc chnh. V d, nu kch thc chnh l 3, th
KCH THC = +4 s tng ln 7
KCH THC = -1 s gim xung 2
FACE c s dng ch kiu ca font
Bn c th kt hp cc thuc tnh ca FONT trong cng mt th.
<HTML>
<HEAD>
<BODY>
<H3><FONT SIZE = 3 COLOR = HOTPINK FACE = Arial>My
first HTML document</FONT></H3>
10
<P> This is <FONT COLOR = BLUE SIZE = 6>going
</FONT>to be real fun
</BODY>
</HTML>
Hnh 1.5 - S dng cc fonts

Thm mu
Bn c th thm mu vo trang v vo cc phn t trong trang. Mu l thuc tnh
c th c s dng vi nhiu phn t. Bn cng c th thm mu vo th
BODY, th FONT, cc lin kt V d
<HTML>
<HEAD>
<TITLE> Learning HTML</TITLE>
</HEAD>
<BODY BGCOLOR=lavender>
<H2><FONT COLOR = LIMEGRREN>Welcome to
HTML</FONT></H2>
<P><FONT COLOR = RED> This is good fun</FONT></P>
</BODY>
</HTML>
C 3 mu chnh l , xanh l cy v xanh da tri. Mi mu chnh c xem nh
mt b hai s ca h s 16.
#RRGGBB
S thp lc phn 00 ch 0% ca mu trong khi s thp lc phn FF ch 100%
ca mu. Gi tr cui cng l mt m su s ch mu.
M thp lc phn Mu
#FF0000
#00FF00 Xanh l cy
11
#0000FF Xanh da tri
#000000 en
#FFFFFF Trng
Chn canh l
Thuc tnh canh l c s dng canh l cc phn t HTML trong trang Web.
Bn c th canh l vn bn, i tng, nh, on vn bn, phn on. Sau y,
bn s hc cch cn l vn bn.
Thuc tnh canh l chp nhn cc gi tr sau:
Gi tr M t
Left Vn bn dc hin th bn tri.
Center Vn bn c canh gia 2 l
Right Vn bn c hin th bn phi.
Justify Vn bn c canh u gia 2 l
Mc nh ph thuc vo canh l chnh ca vn bn. Nu canh l vn bn t tri
sang phi th mc nh l tri.
<HTML>
<HEAD>
<TITLE>Learning HTML</TITLE>
</HEAD>
<BODY BGCOLOR=lavender>
<H2 align = center><FONT COLOR = LIMEGREEN> Welcome to
HTML</FONT></H2>
<P align = right><FONT COLOR = RED> This is good
fun</FONT></P>
</BODY>
</HTML>
nh dng
HTML c nhiu th c th c s dng nh dng ni dung ca ti liu
HTML. Th c th c phn thnh:
Th nh dng mc vt l.
Th nh dng mc logic.
Th nh dng mc vt l
Th nh dng mc vt l l th xc nh hoc thay i c im ca vn bn m
bn p dng th.
Th M t V d
<B> </B> m <HTML>
<HEAD>
12
<TITLE>Learning
HTML</TITLE>
</HEAD>
<BODY>
<P><B> This is
good fun</B></P>
</BODY>
</HTML>
<I></I> Nghing <HTML>
<HEAD>
<TITLE>Learning
HTML
</TITLE>
</HEAD>
<BODY>
<P><I>This is good
fun</I></P>
</BODY>
</HTML>
<U></U> Gch chn <HTML>
<HEAD>
<TITLE>Learning
HTML
</TITLE>
</HEAD>
<BODY>
<P><U>This is good
fun</U></P>
</BODY>
</HTML>
<BIG></BIG> G kch thc ln hn bnh <HTML>
thng. N c s dng <HEAD>
hin th mt t, mt k t,
hoc mt cm t vi font <TITLE>Learning
ln hn so vi phn cn li HTML
ca vn bn. </TITLE>
</HEAD>
13
<BODY>
<P><BIG>This is
good</BIG>
fun</P>
</BODY>
</HTML>
<SMALL> G kch thc nh hn bnh <HTML>
</SMALL> thng. N c s dng <HEAD>
hin th mt t, mt k t,
hoc mt cm t vi font <TITLE>Learning
nh hn so vi phn cn li HTML
ca vn bn. </TITLE>
</HEAD>
<BODY>
<P><SMALL>This is
good</SMALL>
fun</P>
</BODY>
</HTML>
<STRIKE> Hin th du gch ngang c <HTML>
vn bn <HEAD>
<TITLE>Learning
HTML
</TITLE>
</HEAD>
<BODY>
<P><STRIKE>This is
good</STRIKE>
fun</P>
</BODY>
</HTML>
<SUP></SUP> Ch s trn <HTML>
<HEAD>
<TITLE>Mathematica
l Formula
</TITLE>
</HEAD>
<BODY>
14
<P>pi*r <SUP>2
</SUP></P>
</BODY>
</HTML>
<SUB></SUB> Ch s di <HTML>
<HEAD>
<TITLE>Chemical
Formula
</TITLE>
</HEAD>
<BODY>
<P>H <SUB>2
</SUB>0</P>
</BODY>
</HTML>
<CENTER> Canh gia vn bn <HTML>
</CENTER> <HEAD>
<TITLE>Learning
HTML
</TITLE>
</HEAD>
<BODY>
<P><CENTER>This is
good</CENTER>
fun</P>
</BODY>
</HTML>
Th nh dng mc logic
Th nh dng mc logic m t hiu ng cn thit ca vn bn. Hin th tht s
do trnh duyt iu khin.
Th nh dng mc vtk l c tt c cc trnh duyt hiu nh nhau. Th mc
logic c hiu theo trnh duyt trong ti liu HTML c hin th.
Th nh dng M t V d
mc logic
<EM></EM> Vn bn c nhn mnh <HTML>
<HEAD>
<TITLE>Learning
15
HTML
</TITLE>
</HEAD>
<BODY>
<P><EM>This is good
fun</EM></P>
</BODY>
</HTML>
<STRONG> Vn bn kiu ch m <HTML>
</STRONG> <HEAD>
<TITLE>Learning
HTML
</TITLE>
</HEAD>
<BODY>
<P><STRONG>This is
good
fun</STRONG></P>
</BODY>
</HTML>
<DFN></DFN> c s dng cho nh <HTML>
ngha <HEAD>
<TITLE>Learning
HTML
</TITLE>
</HEAD>
<BODY>
<P><DFN>Aqua</DFN>
is typically known
as water</P>
</BODY>
</HTML>
<CODE> c s dng trong cc <HTML>
</CODE> phn trch ca m chng <HEAD>
trnh
<TITLE>Learning
HTML
</TITLE>
</HEAD>
16
<BODY>
<P><CODE>x = X + 1
<BR>
Y = Y + 1</CODE>
</BODY>
</HTML>
<KBD></KBD> c s dng trong nh <HTML>
dng thun tu <HEAD>
<TITLE>Learning
HTML
</TITLE>
</HEAD>
<BODY>
<P><KBD>This is
good fun</KBD></P>
</BODY>
</HTML>
<VAR></VAR> c s dng cho cc <HTML>
bin s trong cc chc <HEAD>
nng chng trnh
<TITLE>Learning
HTML
</TITLE>
</HEAD>
<BODY>
<P><VAR>X</VAR>
</BODY>
</HTML>
<CITE></CITE> c s dng cho cc trch <HTML>
dn v tham chiu <HEAD>
<TITLE>Learning
HTML
</TITLE>
</HEAD>
<BODY>
Beauty lies in the
eyes of the
beholder<CITE>
17
rameshq
</CITE>
</BODY>
</HTML>
ABBR ch dng vit tt. V d, <HTML>
URL <HEAD>
<TITLE>Learning
HTML
</TITLE>
</HEAD>
<BODY>
<ABBR>UN</ABBR>
</BODY>
</HTML>
<BLINK> c s dng nhp <HTML>
</BLINK> nhy vn bn (xem trong <HEAD>
trnh duyt netscape)
<TITLE>Learning
HTML
</TITLE>
<BODY>
<P>This is good
<BLINK>fun</BLINK>
</BODY>
</HTML>
<DEL></DEL> c s dng ch vn <HTML>
bn c xo khi <HEAD>
phin bn c hn ca ti
liu. N c th l mt t <TITLE>Learning
hoc ton b on vn HTML
bn, danh sch hoc bng </TITLE>
<BODY>
<P>
You can make a
maxium of
<DEL>3</DEL>
attempts to
qualify for the
competition.
</BODY>
18
</HTML>
<INS></INS> c s dng ch vn <HTML>
bn c chn vo <HEAD>
trong ti liu. N c th l
mt t hoc ton b on <TITLE>Learning
vn bn, danh sch hoc HTML
bng. Bn c th s dng </TITLE>
thuc tnh tiu ch l
<BODY>
do thay i.
You can make a
maxium of
<DEL>3</DEL>
<INS>5
</INS>attempts to
qualify for the
competition.
</BODY>
</HTML>
Mi trnh duyt c cch thc hin cc phn t INS v DEL ring. Netscape
khng thc hin cc phn t ny.
Phn t BLINK khng tng thch trong Internet Explorer.
S dng cc k t c bit
Bn c th chn cc k t c bit vo vn bn ca ti liu HTML. bo m
trnh duyt khng nhm chng vi th HTML, bn phi thm m thot cho cc
k t c bit ny. nh dng l:
&code
Cc k t c M thot V d
bit
Ln hn (>) &gt <HTML>
<HEAD>
<TITLE>Learning HTML
</TITLE>
<BODY>
<CODE>If A > B
Then <BG>
A = A + 1
</CODE>
<P> The above statement used
special chararacters
19
</BODY>
</HTML>
Nh hn (<) &lt <HTML>
<HEAD>
</TITLE>
<BODY>
<CODE>If A < B
Then <BG>
A = A + 1
</CODE>
<P> The above statement used
special chararacters
</BODY>
</HTML>
Trch dn " <HTML>
<HEAD>
</TITLE>
<BODY>
" To be or not to be?
" That is the question
</BODY>
</HTML>
K t v & &amp <HTML>
<HEAD>
<BODY>
<P> William & Graham went
to the fair
</BODY>
</HTML>
Kt cu vn bn
S dng trch dn (Using Quotes)
Bn c th ch mt vn bn c trch dn trong ti liu bng cch s dng phn
t Q v BLOCKQUOTE. BLOCKQUOTE c s dng i vi cc phn trch
20
dn di v c hin th nh mt on vn bn tht vo hng u tin. Nu
phn trch dn ngn v khng cn ngt on, th s dng phn t Q. Khi s dng
phn t Q, bn phi ghi r du ngoc kp khng gii hn.
<HTML>
<HEAD>
<BODY>
<P> The blockquote element is used to format the
content in block of text.
<BLOCKQUOTE><FONT color = hotpink>
Humpty Dumpty sat on a wall
Humpty Dumpty had a great fall
All the Kings horses
And all the Kings men
Could not put Humpty Dumty together again
</FONT>
</BLOCKQUOTE>
<P> If you notice the content is rendered as a block
of text.
</BODY>
</HTML>
Khi c hin th trong trnh duyt:
Hnh 1.6- S dng Block quotes
21
Vn bn trc khi c nh dng
Nu bn mun vn bn c hin th vi nh dng c xc nh trc, th s
dng phn t PRE. Phn t ny c s dng xc nh nh dng cho vn
bn. Khi vn bn c hin th trong trnh duyt, n tun theo tt c cc m nh
dng c xc nh trong ti liu ngun HTML. V d,
<HTML>
<HEAD>
<BODY>
<PRE> Humpty Dumpty sat on a wall
Humpty Dumpty had a great fall
All the Kings horses
And all the Kings men
Could not put Humpty Dumty together again
</PRE>
</BODY>
</HTML>
Vn bn c hin th trong trnh duyt
Hnh 1.7- Vn bn trc khi c nh dng

Nhm cc phn t
C nhng trng hp bn mun chia vn bn trong mt trang Web thnh nhng
khi thng tin logic. Bn cng c th mun p dng cc thuc tnh thng thng
cho ton b khi. Cc phn t DIV v SPAN c s dng nhm ni dung.
Phn t DIV chia ti liu thnh cc phn c lin quan vi nhau. Phn t SPAN
c s dng ch mt khng trng ca k t. Phn t SPAN ch ni dung
trong dng cn phn t DIV ch ni dung mc khi.
22
<HTML>
<HEAD>
<TITLE> Learning HTML</TITLE>
<BODY>
<DIV>
Division 1
<P> The DIV element is used to group elements.
<P>Typically, DIV is used for block level elements
</DIV>
<DIV align = right><FONT size = 4 color = hotpink face
= Arial>
Division 2
<P>
This is a second division
<BG>
<H2>Are you having fun?</H2>
</FONT>
</DIV>
<P> The second division is right aligned.
<SPAN STYLE = FONT-SIZE:25; Color:BLUE>Common
formatting
</SPAN> is applied to all the elements in the division
</BODY>
</HTML>
Phn t SPAN khng tng thch trong Netscape.
23
Bi tp 2
1. To trang Web c tiu My first page. To mt tiu mc 2 vi tiu
Introduction to HTML. Thm 3 on vo trang . Mi on nn c
ti thiu l 5 dng. Cc on vn bn phi c tch ra bi 2 dng.
2. nh dng on vn bn nghing v mu blue.
3. Thm tiu mc 3 sau on th hai. Canh gia tiu v i font Arial.
4. Canh phi on th ba.
5. K mt ng thng sau tiu chnh. Canh gia ng . ng ny
nn ko di na trang.
6. i mu ca tiu chnh thnh mu limegreen. HTML nn c hin th
bng mu red. Canh gia tiu .
7. i mu ca trang thnh mu lavender.
8. Lm m on vn bn hai.
9. Thm on trch dn sau vo ti liu Refer to Page 2, chapter 3 for a
description of Image Maps.
10. Thm vo trang cc dng sau:
Tiu chun thch hp:
a. tui ti thiu l 25.
b. Khng gi chc v g c li.
11. Thay i tiu chun tui thnh 30 tui. Ngi c phi bit c thay i
ny.
12. Thm cc dng sau vo trang
The grade is the average of of Phyics, Chemistry & Mathematics marks.
Average> or = 90% Grade is A.
Average< 90 and > 75 Grade is B.
13. Hin th on vn bn 1 nh mt blockquote.
14. Thm mt on vn bn vo trang theo nh dng sau:
Little Miss Muffet
Sat on a Tuffet
Eating her curds and whey
There came a spider and sat dn beside her
And frightened Miss Muffet away
24
1.8 Danh sch
Cc danh sch c s dng nhm d liu mt cch logic. Bn c th thm
cc danh sch vo ti liu HTML nhm cc thng tin c lin quan vi nhau.
V d,
Hoa hng
Hoa hng dng
Hoa lan
To
Cam
Thu tin vng
Xoi
C th c nhm thnh:
Tri cy
To
Xoi
Cam
Hoa
Hoa thu tin vng
Hoa lan
Hoa hng
Hoa hng dng
Cc loi danh sch m bn c th chn vo ti liu HTML l:
Danh sch khng c sp xp.
Danh sch c sp xp.
Danh sch nh ngha.
Danh sch khng c sp xp
y l loi danh sch n gin nht m bn c th thm vo ti liu HTML.
Danh sch khng c sp xp l mt bulleted list. Cc mc c bt u
bng cc du bullet. Thut ng unordered c th gy nhm ln mt cht.
Danh sch c nm trong th danh sch khng c sp xp <UL></UL>.
Mi mc trong danh sch c nh du bng th <LI>, vit tt ca List Item.
Th kt thc </LI> khng bt buc.
<HTML>
<HEAD>
25
<BODY>
<UL>
<LI>Monday
<LI>Tuesday
<LI>Wednesday
<LI>Thursday
<LI>Friday
</UL>
</BODY>
</HTML>
Bn c th to ra danh sch lng ch nhm con ca
thng tin.
<HTML>
<HEAD>
<BODY>
<UL>
<LI>Monday
<UL>
<LI>Introduction to HTML
<LI>Creating Lists
</UL>
<LI>Tuesday
<UL>
<LI>Creating Tables
<LI>Inserting Images
</UL>
<LI>Wednesday
<LI>Thursday
<LI>Friday
</UL>
</BODY>
</HTML>
Bn c th s dng thuc tnh TYPE nh dng cc bullet c hin th cng
vi cc mc danh sch.
26
Thuc tnh Th V d
Bulleted <UL> v <LI> <HTML>
<HEAD>
<TITLE>Learning
HTML</TITLE>
<BODY>
<UL>
<LI>Monday
<UL>
<LI>Introduction to
HTML
<LI>Creating
Lists
</UL>
<LI>Tuesday
<UL>
<LI>Creating Tables
<LI>Inserting
Images
</UL>
<LI>Wednesday
<LI>Thursday
<LI>Friday
</UL>
</BODY>
</HTML>
Cc bullet c <LI TYPE = <HTML>
tu chnh SQUARE> <HEAD>
Cc bullet vung <TITLE>Learning
<LI TYPE = DISC> HTML</TITLE>
Cc bullet hnh cu <BODY>
<LI TYPE = CIRCLE> <UL>
Cc bullet hnh trn <LI>Monday
<UL>
<LI>Monday
27
</UL>
<LI TYPE =
DISC>Introduction
to HTML
<LI TYPE =
DISC>Creating Lists
</UL>
<LI>Tuesday
<UL>
<LI TYPE =
SQUARE>Creating
Tables
<LI TYPE =
SQUARE>Inserting
Images
</UL>
<LI>Wednesday
<UL>
<LI TYPE =
CIRCLE> Creating
Forms
<LI TYPE =
CIRCLE>Working with
Frames
</UL>
<LI>Thursday
<LI>Friday
</UL>
</BODY>
</HTML>
Thuc tnh TYPE khng c hin th trong Internet Explorer.

Danh sch c sp xp
Danh sch c sp xp nm trong th <OL>.</OL>. Danh sch c sp xp
cng hin th cc mc danh sch. S khc nhau l cc mc danh sch hin th
theo th t c to ra mt cch t ng.
V d:
28
<HTML>
<HEAD>
<BODY>
<OL>
<LI>Monday
<LI>Tuesday
<LI>Wednesday
<LI>Thursday
<LI>Friday
</OL>
</BODY>
</HTML>
Bn c th t thuc tnh xc nh h thng s c to ra cho cc mc danh
sch.
Thuc tnh Th
Upper Roman <LI TYPE = I>
Lower Roman <LI TYPE = i>
Upper case <LI TYPE = A>
Lower case <LI TYPE = a>
Begin numbering with a digit other than 1 <OL START = n>
Thuc tnh START xc nh s bt u ca danh sch.
<HTML>
<HEAD>
<BODY>
<OL>
<LI>Monday
<OL>
<LI TYPE = i>Introduction to HTML
<LI TYPE = i>Creating Lists
</OL>
<LI>Tuesday
<OL>
<LI TYPE = A>Creating Tables
29
<LI TYPE = A>Inserting Images
</OL>
<LI>Wednesday
<OL START = 5>
<LI >Creating Forms
<LI >Working with Frames
</OL>
<LI>Thursday
<LI>Friday
</OL>
</BODY>
</HTML>
Bn c th lng cc danh sch c sp xp nh trong danh sch khng dduwocj
sp xp. Bn c th lng danh sch c sp xp trong danh sch khng c
sp xp v ngc li.
<HTML>
<HEAD>
<BODY>
<UL>
<LI>Monday
<OL>
<LI TYPE = i>Introduction to HTML
<LI TYPE = i>Creating Lists
</OL>
<LI>Tuesday
<OL>
<LI TYPE = A>Creating Tables
<LI TYPE = A>Inserting Images
</OL>
<LI>Wednesday
<LI>Thursday
<LI>Friday
</UL>
</BODY>
</HTML>
30
Danh sch nh ngha
Danh sch nh ngha c s dng to mt danh sch cc thut ng v nh
ngha ca cc thut ng . Danh sch nh ngha nm trong th <DL></DL>.
Th <DT> c s dng ch thut ng, cn th <DD> ch nh ngha.
<HTML>
<HEAD>
<BODY>
<DL>
<DT>Sunday
<DD> The first day of the week
<DT>HTML
<DD>Hypertext Markup Language
<DT>Internet
<DD> A netork of networks
<DT>TCP / IP
<DD>Transmission iu khin Protocol / Internet
Protocol
</DL>
</BODY>
</HTML>
Hnh 1.8- S dng cc danh sch nh ngha
31
Bi tp 3
1. To mt danh sch trn mt trang Web hin th thng tin sau:
Monday
9 am 11 am Workshop
Tuesday
10 am 11 am Training programme
Wednesday
Thursday
Holiday
Friday
2. To danh sch nh ngha sau:
Peacock
National bird of India
Internet
A network of networks
HTML
Hypertext Markup Language
3. To danh sch sau:
1. Introduction to HTML
a. Introduction to the World Wide Web
b. Introduction to HTML tags
Formatting text
Enhancing the text
2. Designing a Web Site
i. Designing the page
ii. Designing navigation
iii. Creating Hyperlinks.
1.9 Chuyn i ti liu

Khi bn ang to mt ti liu mi, bn c th s dng phn t HTML theo hng
dn v cu trc, nh mc vn bn v cc phn t HTML. Tuy nhin, nu ti liu
hin thi khng c nh dng HTML th sao? ng lo. Bn vn c th s dng
ti liu sau khi thc hin cc thay i cn thit. Cc bc nh sau:
1. M ti liu trong trnh son tho vn bn.
32
2. Lu file nh mt file HTML, ngha l vi phn tn m rng .htm hoc
.html
Cc th cn thit c chn vo trong ti liu.
V d.
1. Nhp vn bn sau vo Word.
Sunday is the first day of the week.
HTML stands for Hypertext Markup Language.
The Internet is a network of networks.
TCP /IP Transmission iu khin Protocol / Internet
Protocol
2. File / Save as
3. Trong hp Save as, chn HTML document / web page.
Hnh 1.9- Lu tp tin dng HTML

4. M file trong Notepad.
33
Hnh 1.10 C php HTML
Cc th HTML c chn vo trong ti liu. By gi bn c th thay i ti
liu cho ph hp vi yu cu ca mnh.
34
Tm tt
Trong chng ny, bn hc v World Wide Web. Bn cng hc
v ti liu HTML v cch to chng.
Chng ny cng cp n cu trc ca mt ti liu HTML v
cch s dng mt vi phn t c bn. Sau , bn bit cch
trnh by v cu trc ca vn bn.
35
Kim tra cc kin thc hc
I. in vo ch trng:
a. ..l mt b phn ca Internet.
b. Giao thc ni cc mng trn Internet c gi l .
c. .. l ngn ng chun m Web dng to v nhn
dng cc ti liu.
d. Lnh HTML c gi l
e. .. c dng nh du s kt thc ca ti liu
HTML.
f. .. l cc phn t HTML xut hin trong phn t
BODY.
g. Mu c xc nh bng cc mu chnh gm ..,
v
h. .. c dng nhm d liu mt cch logic trn
mt trang Web.
II. Hy ch ra cc cu sau y l ng hay sai:
a. SGML l phng php trnh by cc ngn ng nh mc vn bn.
b. Trnh duyt c dng to ti liu HTML.
c. Cc th HTML phn bit gia ch thng v ch hoa.
d. Phn t META c dng xc nh thng tin v ti liu HTML.
e. Cc phn t trong dng c th bao gm cc phn t mc khi.
f. Phn t P bt u trn mt dng mi theo nh dng.
36
Chng 2
Chun b mt Web Site - Cc siu lin kt
Mc tiu ca chng:
M t qu trnh thit k Web site.
Ni dung
iu hng
M t siu lin kt
To siu lin kt
M t cc quan h lin kt.
S dng mu vi cc lin kt.
Gii thiu
Bn ang nghin cu v cc trang Web. By gi, nu bn mun trao i thng
tin vi cc ngi dng khc, th mt trang Web cng . Tuy nhin, nu bn c
nhiu thng tin, c th bn s cn mt Web site. Trong chng ny, bn s hc
v thit k ni dung v cch trnh by mt Web site. Bn cng s hc cch chn
cc lin kt vo mt ti liu HTML.
2.1 Thit k mt Web site.
Mt Web site l mt tp hp cc trang web, cc file lin quan v cc danh mc
c lu tr trong mt Web server. Trang u tin ca mt Web site c gi l
home page hoc Index page. Trang u tin cho bn mt ci nhn tng qut
v cc thng tin m bn c th tm thy trn mt Web site.
Nu bn ang pht trin mt chng trnh ng dng, bn phi tri qua giai on
thit k. Nhng qui nh tng t cng s c p dng khi pht trin mt web
site.
Giai on thit k
Mc ch - nhn bit mc ch ca mt web site. Ti sao ngi dng cn mt
web site?
Ngi xem - nhn bit ngi xem chnh ca mnh. Cc web site tp on c
mt dng v v cm nhn khc vi cc web site gii tr.
B cc - chun b mt b cc (m t cch trnh by, ni dung, trnh t v thao
tc) cho web site ca bn nh r khi nim thit k mt trang web. Bn
nn ch cung cp cc thng tin sau cho mi trang
a. Tiu m t ti liu.
b. Ta chnh
c. mc ph
d. Mc ch ca trang
37
e. M t ni dung
f. Cc nh c s dng
g. M t v cc lin kt
T chc thng tin ca bn y l ni bn c th s nhn bit lc iu
hng cho web site ca bn. Bn bc c bn t chc thng tin:
Chia n thnh cc n v logic.
Sp th t theo mc quan trng v cc ch chung.
S dng th t trn xy dng mi quan h gia cc n v thng tin.
Giai on pht trin
Hai yu t quan trng m bn nn nh khi thit k mt web site l:
Cch trnh by ca trang web.
S iu hng trong web site.
a. Thit k cch trnh by v ni dung
Thng nht v a dng nguyn tc c bn l thng nht v a dng.
Ngha l, mi th nn ph hp vi nhau nh mt chnh th, nhng ng
thi cn a dng to s th v. S nht qun to ra v cng c tnh c
trng ca mt site. Mu, fonts, trnh by ct v cc phn t thit k khc
nn nht qun tt c cc phn ca site. Tt nhin, l bn khng mun
ngi c thy lng tng.
Hiu ng Bn nn xc nh r hiu ng do mt trang to ra. Chng hn:
Mt web site mang tnh hp tc phi c cc dng dp: chuyn nghip,
vng chc v ng tin cy.
Trong mt site gii tr, cc hiu ng cp nht hng ngy cn c ch
.
Nm vng mc ch ca web site khi bn bt tay vo thit k n. Cui cng, cn
phi lu c phi l mt ngi khi i picnic th n mc khc vi khi tham d
mt bui phng vn hay khng?
Cch trnh by - Trang web khng phi l trang c in ra. Ngha l cc
nguyn tc c p dng in c th khng p dng c trong mt trang
web. Trnh bt ngi c nhn qu nhiu vo mn hnh trong khi c. Sau
mt lc b cng mt v ngi c c th mt hng th. Vn bn nn nm
gn trong mt vi inch.
S dng mu - S dng mu l mt c im quan trng trong thit k
trang web. S dng mu ph thuc vo hiu ng m bn mun to. Sau
y l mt vi nguyn tc v s dng mu. Khng c cc nguyn tc cng
nhc, bn c th nu kin ring ca mnh.
Cc mu sng chnh hay ph (mu xanh da tri, mu , mu vng,
mu cam v mu xanh lc) sc s v ch s hnh phc. Cc mu ny
khng c s dng trong cc site chung.
38
Nu ch l en v trng, th mt mu sng c th c s dng
lm ni bt mt phn t.
Phn bng ti hn c t l mu en ln th thu ht v ng hong.
Chng c th c s dng cho tiu hoc cc ng ngang.
Phn bng nht c t sau v khng cn thit. Bng nht thng
lm nn rt tt.
Nn - Nn ca trang cng quan trng nh vn bn hoc ni dung ca
trang. Nu nn qu phc tp s lm cho ngi c khng tp trung vo ni
dung.
Nu bn ang s dng nh lm nn, bn cn nh phn gii mn
hnh. Bn s khng bit phn gii mn hnh m ngi c c th s
dng.
Vn bn v k thut to ch - y l ci m mi web site u c. Vn
bn c trang tr p th d c. Mt s nguyn tc lin quan n vn
bn l:
Trnh s dng qu nhiu font. Ti a c th s dng hai hoc ba font
lm ni bt mt phn c bit.
Khng nn s dng cng mt lc cc font ging nhau.
S dng cc font thng thng c sn. Mt trnh duyt ch c th hin
th mt font m ngi dng c trn h thng ca mnh. Nu ngi
dng khng c font xc nh th trnh duyt s thay th n bng mt
font khc. Sans-serif, Arial v Serif Times l cc font thng thng c
sn.
Cc thuc tnh nh m, nghing, gch chn c cc chc nng khc
nhau. Cc thuc tnh ny c s dng gy ch n mt phn ni
dung c bit. Khng nn s dng cc t vit hoa, ALL CAPS,
nhn mnh. Vn bn c gch chn ch siu lin kt; v vy khng
nn gch chn vn bn tr phi n l mt siu lin kt.
Tiu c th nm gia hoc khng, nhng phn thn vn bn th
khng nn canh gia.
Cc danh sch c du bullet u dng c s dng gy ch i
vi cc on vn bn ngn ring bit. Cc mc trong cc danh sch
c nh du bullet phi c t chc theo th bc logic. Ngha l,
ch c cc phn t ngang hng th mi nn c xp trong cng mt
mc.
Sai ng
Fruits Fruits
Apples Apples
Tomatoes Oranges
Vegetables Vegetables
39
Oranges Tomatoes
Cabbage Cabbage
b) iu hng trong web site (Navigation around the web site)
Cho d web site ca bn c li cun n u, nu nh n khng c mt lc
iu hng r rng, th ngi dng s mt ng i. Mt s h c th khng bao
gi quay tr li. Lc iu hng trong site ny khng ging trong site khc.
Tuy nhin c mt s nguyn tc c bn m bn cn nh:
Xc nh ni dung ca web site.
To mt lc iu hng gip ngi dng i n phn cn n mt
cch nhanh chng.
Cung cp cc phng tin tm thm thng tin.
C nhiu cch t chc mt web site:
Trnh by tuyn tnh Cch ny theo cu trc tuyn tnh. Gia cc trang c
s lin kt vi nhau. Mi trang c mi lin kt vi trang trc v sau n.
Trang cui c lin kt vi trang u. nh dng ny c s dng khi bn
ang trnh by cc thng tin c tnh tun t. V d, cc chng ca mt quyn
sch hoc cc t chiu ca mt bi trnh by m yu cu ngi dng c
thng tin theo th t lin tip nhau.
-------- -------- -------- --------

-------- -------- -------- --------
-------- -------- -------- --------
-- -- -- --
Hnh 2.1- Dng tuyn tnh (Linear layout)

Trnh by theo th bc y l cch trnh by thng thng nht trong
thit k web site. Trang ch lin kt vi nhiu trang khc. Ngi dng c th
chn mt lin kt v nhy n trang cn n. Mi trang u c lin kt vi
trang ch.
------ ------ ------
------ ------ ------
------
------
------ ------
------ ------
Hnh 2.2-Dng theo th bc Hierachical layout
40
Hnh 2.3- S dng layout dng th bc
Bn nh (Image map) - Mt s ngi dng thy trnh by bng hnh nh
th d hiu hn. V vy, nhiu homepage cha cc bn nh hoc bn
website. Khi ngi dng nhp vo mt im nng (hotspot) th ti liu lin
quan s c hin th. Hnh 2.4 minh ho mt biu nh. Khi ngi dng
nhp vo mt trong cc biu tng trong ng h, trang web lin quan s hin
th.
Hnh 2.4- S dng Image map

Khi bn quyt nh mt lc iu hng, l thi im thit k ti
liu. C mt vi nguyn tc m bn cn nh:
Siu lin kt (hyperlinks) nn r rng. T nn c gch chn v c mu
xanh da tri, bi v trn web, vn bn mu xanh da tri c quy c l siu
lin kt. Siu lin kt thng xut hin cui trang. Nu chng xut hin
gia on vn bn, c th s lm ngi c khng tp trung vo ti.
Cc trang con ( mc di) nn c mt thanh menu hoc mt thanh iu
hng, nu khng ngi c c th s khng nhn thy cc trang chnh. Hnh
2.5 minh ho cch s dng thanh iu hng dc theo vin tri ca trang.
Nu ngi dng nhp vo mt trong cc biu tng trn thanh iu hng,
th ngi s nhy t trang hin thi n trang mi.
41
Hnh 2.5 Thanh navigation pha hin th ni dung ca site
Lun lun c mt Bng mc lc (table of contents) ngi dng nhy sang
mt ti no . Hnh 2.6 minh ho cch s dng bng mc lc (TOC).
TOC c hin th cui trang. Ngi dng c th nhp vo mt ti no
nhy n trang cn n.
Hnh 2.6- Mt bng mc lc

Lun lun phi c nt Back v Forward trong cc trang ngi dng c
th iu hng n trang cn n. Trong khi trnh duyt cung cp cc chn
la ny, n s dng cc trang trong danh sch lc s, m c th khng phi
l trang kt hp trong web site.
2.2 Gii thiu siu lin kt
Kh nng chnh ca HTML l h tr cc siu lin kt. Mt siu lin kt hay ni
ngn gn l mt lin kt, l s ni kt vi mt ti liu hoc file khc ( ho, m
thanh, video) hoc ngay c n mt phn khc ca cng mt ti liu. Khi ngi
dng nhp vo siu lin kt, ngi c dn n URL m bn xc nh
trong lin kt.
Bn c th t lin kt n:
Mt phn khc ca cng mt ti liu.
42
Mt ti liu khc
Mt phn khc ca mt ti liu khc
Cc file khc - nh, m thanh, trch on video
Mt v tr hoc my ch khc
Cc loi lin kt
Cc lin kt c to ra c th l lin kt trong hoc lin kt ngoi:
Lin kt trong l cc lin kt vi cc phn trong cng mt ti liu hoc cng
mt web site.
Lin kt ngoi l cc lin kt vi cc trang trn web site khc hoc my ch
khc.
---
--- ---
---
--- ---
--- ---
--- --- --- --- ---
--- --- ---
--- ---
--- ---
Hnh 2.7- Lin kt trong v ngoi

2.3 To siu lin kt
to siu lin kt, bn phi xc nh hai thnh phn:
1. a ch y hoc URL ca file c ni kt.
2. im nng s cung cp lin kt. im nng c th l mt dng ca vn
bn hoc thm ch mt nh.
Khi ngi dng nhp vo im nng, trnh duyt c a ch c xc nh trong
URL v nhy n v tr mi.
a ch
Mi ngun trn web c duy nht mt a ch. V d, 207.46.130.149 l a ch
web site ca Microsoft. Lc , nh cc con s ny rt kh v d nhm ln. V
vy, ngi ta s dng cc Uniform Resource Locator (URL). URL l mt chui
cung cp a ch Internet ca mt web site hoc ngun trn World Wide Web.
nh dng c trng l:
www.nameofsite.typeofsite.countrycode
V d, 207.46.130.149 c th c biu din trong URL l www.microsoft.com
URL cng nhn bit giao thc m site hoc ngun c truy cp. Dng URL
thng thng nht l http, n cung cp cho Internet a ch ca mt trang web.
43
Mt vi dng URL khc l gopher, cung cp a ch Internet ca mt th mc
Gopher, v ftp, cung cp v tr mng ca mt ngun FTP.
URL c th ch n mt trang c th trong mt web site. V d,
www.microsoft.com/ms.htm s dn bn n trang ch ca Microsoft.
URL cng c th cp mt v tr trong mt ngun. V d, bn c th to mt
lin kt vi mt ti trong cng mt ti liu. Trong trng hp , nh danh
phn mnh c s dng cui URL. nh dng l:
Protocol:nameofsite / main document#fragment identifier
C hai dng URL:
URL tuyt i l a ch Internet y ca mt trang hoc file, bao gm
giao thc, v tr mng, ng dn tu chn v tn file. V d, http://
www.microsoft.com/ms.htm l mt URL tuyt i.
URL tng i - l mt URL vi mt hoc nhiu phn b thiu. Trnh duyt
ly thng tin b mt t trang cha URL. V d, nu giao thc b thiu, th trnh
duyt s s dng giao thc ca trang hin thi.
Neo
Th neo <A> c s dng xc nh vn bn hoc nh c xem nh l siu
lin kt trong ti liu HTML. Tham s HREF (tham chiu siu vn bn) c s
dng ch a ch hoc URL ca ti liu hoc file c lin kt. C php l:
<A HREF= URL">Hypertext</A>
C php ca HREF l:
<A HREF = protocol://host.domain:port/path/filename>Hypertext</A>
Giao thc y l mt dng giao thc. Mt s giao thc thng dng:
http giao thc truyn siu vn bn
telnet - m mt phn telnet
gopher tm mt file
ftp giao thc truyn file
mailto - gi e-mail
Host.domain y l a ch Internet ca my ch.
Cng y l s cng ca my ch ch.
Siu vn bn y l vn bn hoc nh m ngi dng phi nhp vo
kch hot lin kt.
Lin kt vi cc ti liu khc
Gi s c hai ti liu HTML trn a cng cc b, Doc1.htm v Doc2.htm.
to mt lin kt t Doc1.htm n Doc2.htm. Trang doc. Htm nh sau:
<HTML>
<HEAD>
<TITLE> Using links</TITLE>
44
</HEAD>
<BODY>
<H1><CENTER><FONT SIZE = 3 COLOR = HOTPINK>CREATING
LINKS</FONT><CENTER></H1>
<BR>
<BR>
<P>
on di y cp n vic to lin kt vi cc ti liu.
<A HREF = Doc2.htm>Click here to view document 2</A>
</BODY>
</HTML>
Khi ngi dng c th nhy n mt ti liu khc, bn c th cung cp cch
tr v trang ch hoc iu hng n mt file khc.
<HTML>
<HEAD>
<TITLE> Document 2</TITLE>
</HEAD>
<BODY>
<BR>
<BR>
<P>
y l ti liu 2. Trang ny s hin th khi bn nhp vo siu lin kt trong ti
liu 1.
<BR>
<BR>
<A HREF= Doc1.htm>Back Home</A>
</BODY>
</HTML>
Nu , bn s thy rng cc lin kt c gch chn. Trnh duyt lm vic
cho bn. N cng s i hnh dng con tr khi ngi dng di chuyn chut qua
lin kt.
v d trn, cc file nm trong cng mt th mc v v vy ch ra tn file trong
thng s HREF l . Tuy nhin, cc lin kt n cc file trong cc th mc khc
cng c th c cung cp. Cn c xc nh tn ng dn tuyt i v tng
i .
45
Tn ng dn tuyt i ch ng dn y t file n th mc gc. V
d, C:\mydirectory\html examples\Doc2.htm.
Tn ng dn tng i ch v tr ca file lin quan n v tr ca file hin
thi. V d, nu th mc hin thi l mydirectory, th tn ng dn s l <A
HREF= \Doc3.htm>Next page</A>
<HTML>
<HEAD>
</HEAD>
<BODY>
<BR>
<BR>
<P>
y l ti liu 2. Trang ny s hin th khi bn nhp vo siu lin kt trong ti
liu 1.
<BR>
<BR>
<A HREF= C:\Doc1.htm>Back Home</A>
<BR>
<BR>
<A HREF= ..\Doc3.htm>Next page</A>
</BODY>
</HTML>
V vy, nu bn mun lin kt vi cc ti liu khng c lin quan vi nhau, th
tn ng dn tuyt i s phc v cho mc ch ny. Tuy nhin, nu bn c mt
nhm ti liu c lin quan vi nhau, chng hn nh trnh tr gio trong HTML,
bn c th s dng tn ng dn tng i i vi cc ti liu trong nhm v
tn ng dn tuyt i i vi cc ti liu khng lin quan trc tip n ti.
Ngi dng c th ci t trnh tr gio ny trong th mc m ngi t chn
v n s vn hot ng.
Lin kt vi cc phn ca cng mt ti liu
Bn cng c th s dng th neo cho php ngi dng nhy n cc phn khc
nhau ca mt ti liu. V d, bn c th hin th ni dung ca trang web nh mt
lot cc lin kt. Khi ngi dng nhp vo mt ti no , cc chi tit nm
trong mt phn khc ca ti liu s c hin th.
Loi neo ny c gi l mt neo c t tn v thuc tnh HTML NAME c
s dng to cc lin kt ny.
46
<A NAME= marker>Topic name</A>
Bn khng phi s dng bt k vn bn no nh du im neo.
thc hin chuyn giao, hy s dng vch du trong tham s HREF.
<A HREF= #marker>Topic name</A>
# c hin th trc tn ca siu lin kt bo vi trnh duyt rng lin kt l
mt im c t tn trong mt ti liu. V vy, nu khng c ti liu no nm
trc biu tng # th trnh duyt bit rng lin kt nm trong cng ti liu.
<HTML>
<HEAD>
<TITLE> Using htm links</TITLE>
</HEAD>
<BODY>
<A HREF = #Internet>Internet</A>
<BR>
<BR>
<A HREF = #HTML>Introduction to HTML</A>
<BR>
<BR>
<A HREF = #Consistency>Unity and Variety</A>
<BR>
<BR>
<A name = Internet>Internet</A>
<BR>
<P>
Internet l mt mng ca cc mng. Ngha l, cc mng my tnh c lin kt
vi cc mng khc, ni cc nc v ngy nay l ton cu. Giao thc truyn
TCP/IP cung cp lin kt vi tt c cc my tnh trn th gii.
</P>
<A name = HTML>Introduction to HTML</A>
<BR>
<P>
Ngn ng nh du siu vn bn l ngn ng chun m web s dng to v
nhn ra ti liu. Mc d khng phi l mt tp con ca ngn ng nng cp tiu
chun tng qut (SGML), ngn ng nh du siu vn bn cng c lin quan vi
SGML. SGML l mt phng php trnh by cc ngn ng nh dng ti liu.
HTML l ngn ng nh du c s dng to ti liu HTML. Cc hng
dn ch r mt trang web nn c hin th nh th no trong trnh duyt.
</P>
47
<A name = Consistency>Unity and Variety</A>
<BR>
<P>
Nguyn tc c bn l thng nht v a dng. Ngha l, mi th nn ph hp vi
nhau nh trong mt chnh th, nhng ng thi phi a dng to s th v.
Tnh nht qun to ra v cng c tnh c trng ca mt site. Mu, font, b tr ct
v cc phn t thit k khc nn nht qun trong cc phn ca site. Bn s khng
mun sau mt lc ngi c thy lng tng v site m h ang ng.
</P>
</BODY>
</HTML>
Hnh 2.8- To cc links

Click vo Internet link.
Hnh 2.9- S dng cc lin kt (links)
48
Lin kt vi mt im c th mt ti liu khc
By gi, bn bit cch s dng du hiu trong cng mt ti liu, hy th nhy
n mt im c th mt ti liu khc.
nhy n mt im c th mt ti liu khc, bn phi xc nh tn ca ti
liu khi bn to du hiu. Trc tin trnh duyt c tn ti liu v m ti liu .
N s c du hiu v chuyn n mt im c th.
y l main.htm
<HTML>
<HEAD>
<TITLE> Main document</TITLE>
</HEAD>
<BODY>
<A HREF = C:\Doc1.htm#Internet>Internet</A>
<BR>
<BR>
<A HREF = C:\Doc1.htm#HTML>Introduction to HTML</A>
<BR>
<BR>
<A HREF = C:\Doc1.htm#Consistency>Unity and
Variety</A>
</BODY>
</HTML>
y l Doc1.htm
<HTML>
<HEAD>
<TITLE>Using Links</TITLE>
</HEAD>
<BODY>
<A name = Internet>Internet</A>
<BR>
<P>
Internet l mt mng ca cc mng. Ngha l, mng my tnh c lin kt vi
cc mng khc, ni vi cc nc v ngy nay l ton cu. Giao thc truyn
TCP/IP cung cp lin kt vi tt c cc my tnh trn th gii.
</P>
<A name = HTML>Introduction to HTML</A>
<BR>
49
<P>
Ngn ng nh du siu vn bn l ngn ng chun m web s dng to v
nhn ra ti liu. Mc d khng phi l mt tp con ca ngn ng nng cp tiu
chun tng qut (SGML), ngn ng nh du siu vn bn cng c lin quan vi
SGML. SGML l mt phng php trnh by cc ngn ng nh dng ti liu.
HTML l ngn ng nh du c s dng to ti liu HTML. Cc hng
dn ch r mt trang web nn c hin th nh th no trong trnh duyt.
</P>
<A name = Consistency>Unity and Variety</A>
<BR>
<P>
Nguyn tc c bn l thng nht v a dng. Ngha l, mi th nn ph hp vi
nhau nh trong mt chnh th, nhng ng thi phi a dng to s th v.
Tnh nht qun to ra v cng c tnh c trng ca mt site. Mu, font, b tr ct
v cc phn t thit k khc nn nht qun trng cc phn ca site. Bn s khng
mun sau mt lc ngi c thy lng tng v site m h ang ng.
</P>
</BODY>
</HTML>
S dng e-mail
Nu bn mun ngi dng gi e-mail cho bn, bn c th a mt c tnh vo
trong trang web cho php h gi e-mail t trnh duyt. Tt c nhng g bn cn
lm l chn gi tr mailto vo th lin kt.
<A HREF= mailto:thisperson@mymail.com>
Nu bn mun t lin kt e-mail cui trang, hy s dng th <ADDRESS>
siu lin kt c hin th cui trang Web.
<HTML>
<HEAD>
<TITLE> Main document</TITLE>
</HEAD>
<BODY>
<A HREF = c:\Doc1.htm#Internet>Internet</A>
<BR>
<BR>
<A HREF = c:\Doc1.htm#HTML>Introduction to HTML</A>
<BR>
<BR>
<A HREF = c:\Doc1.htm#Consistency>Unity and
Variety</A>
50
<BR>
<BR>
<BR>
<ADDRESS>
<A HREF= mailto:thisperson@mymail.com>Send your queries
to John Greene</A>
</ADDRESS>
</BODY>
</HTML>
Hnh 2.10- S dng e-mail
51
Bi tp
1. To 2 ti liu HTML, a.htm v b.htm
2. To mt lin kt t a.htm n b.htm
3. To mt lin kt ngc tr li t b.htm n a.htm
4. To mt ti liu HTML vi ni dung sau:
Internet
The Internet is a network of networks. That is, computer networks are linked to
other networks, spanning countries. The TCP/IP transfer protocol provides the
bindings that connect all these computers the world over.
Layout
A web page is not a printed page. That is, the guidelines that are applied to print
may not apply to a web page. Avoid making the reader scan too much of the
screen while reading the page. After a while it puts a strain on the eyes, and the
reader may lose interest. Text should be contained within a few inches width.
Linear Layout
Linear layout follows a linear structure. There is a sequential link between the
pages. Each page has a link to the previous and next page. The last page has a
link to the first page. This format is used when you are presenting sequential
information. For example, chapters of a book or slides of a presentation which
require the user to read the information in sequential order.
Pathnames
Absolute pathnames specify the complete path to the file from the root directory.
For example, C:\mydirectory\htmlexamples\Doc2.htm
Relative pathnames specify the location of the file relative to the location of the
current fiel. For example, if the current directory is mydirectory, then the
pathname will be<A HREF= ..\Doc3.htm>Next page</A>
5. To lin kt trong vi cc ti khc nhau trong ti liu ny.
2.4. Thit lp cc mi quan h

Bn hc cch to lin kt vi cc ti liu. l cch dng thng thng nht
ca cc siu lin kt. C mt vi lin kt xc nh mi quan h gia mt lin kt
ny vi mt lin kt khc.
Phn t LINK c s dng ch mi quan h gia cc lin kt. Phn t c
xc nh trong phn u ca trang v khng c hin th vi ni dung ca trang.
Mi quan h c xc nh bng cch s dng thuc tnh rel.
<LINK rel=previous href= chapter1.html>
<LINK rel=next href= chapter3.html>
previous a bn n ti liu trc
52
next a bn n ti liu sau
2.5 Mu
Bng cch cung cp cc lin kt trong ti liu HTML, bn gip ngi dng iu
hng quanh web site hoc ngay c quanh cng mt ti liu nu l mt ti liu
di. Sau mt lc, ngi dng c th mt du vt ca trang hoc ti m h
xem. Bn c th nguyn nh vy, hoc bn c th cung cp mt c im
ch lin kt c nhp vo.
lm nh vy, bn phi thm mu vo khu vc nh dng lin kt.
LINK Mu mc nh l xanh da tri. nh vy v ngi dng gn mu
xanh da tri vi cc lin kt trong mt trang. Mt mu khc c th lm cho
ngi dng lng tng.
ALINK l cc lin kt hot ng. Khi ngi dng nhp vo lin kt, bn c
th i mu.
VLINK l lin kt c n. Mu mc nh l tm, nhng bn c th
chn mu khc.
<HTML>
<HEAD>
</HEAD>
<BODY LINK = blue ALINK = HOOTPINK>
LINKS</FONT></CENTER></H1>
<BR>
<BR>
<P>
y l ti liu 2. Trang ny hin th nu bn nhp vo siu lin kt trong ti liu
1.
<BR>
<BR>
<A HREF= C:\Doc1.htm>Back Home</A>
<BR>
<BR>
<A HREF= ..\Doc3.htm>Next page</A>
</BODY>
</HTML>
53
Bi tp
1. To mt ti liu HTML vi mt bng ni dung. Mi ti phi l mt siu
lin kt vi mt ti liu HTML khc.
2. To lin kt vi cc ti trong cng ti liu.
3. Hin th mt lin kt hot ng mu vng chanh v mt lin kt n mu
hng.
54
Tm tt
Chng ny bn v qu trnh thit k web site. Bn hc cch
thit k ni dung trang v cch trnh by mt site. Mt vi phng
php iu hng thng thng cng c cp n.
Chng ny cng gip cho bn bit qu trnh chn cc lin kt vo
mt ti liu HTML. Bn bit cch to cc lin kt vi cc ti
liu khc v vi cc phn trong cng mt ti liu HTML.
55
I. in vo ch trng
a. l qu trnh chun b thit k tng quan mt website.
b. .. ch mt lin kt vi mt trang web hoc website khc.
c. URL l ch vit tt ca
d. .. l cc lin kt vi cc trang trn cc website hoc my
ch khc.
e. Thng s c dng ch URL ca ngun trn web.
f. .. c dng nh du mt phn trong ti liu HTML.
g. Phn t c dng thit lp mi lin h gia cc lin
kt.
II. Hy ch ra cc cu sau y l ng hay sai
a. Lin kt ni b l lin kt vi mt phn trong mt ti liu trn mt website
khc.
b. URL tng i ch ng dn y n ngun trn Web.
c. Giao thc gopher c dng tm mt file trn Web.
d. Bn c th to lin kt bng cch dng thuc tnh id ca mt phn t.
e. Thuc tnh rel ch lin kt tin (forward link) vi mt ti liu.
f. Mu mc nh ca mt lin kt do trnh duyt xc nh v khng th thay
i.
g. Bn c th dng cc thuc tnh ch mt lin kt c xem hay cha.
56
Chng 3:
Bng v Hnh nh
Mc tiu ca chng:
To bng
Phn bit gia file gif v jpeg .
Chn nh vo trang Web.
To bn nh.
Thm m thanh vo ti liu HTML.
Gii thiu
Trong chng 1, bn hc cch nhm cc d liu lin quan vo cc danh sch.
Nhng cn c mt cch khc iu khin vic hin th vn bn trn mt trang
web. Trong chng ny, bn s hc cch to bng. Bn cng s hc cch chn
nh vo ti liu HTML v to bn nh.
3.1. To bng
Bn c th s dng bng vi cc hng v ct hin th d liu. Bng gip
chng ta iu khin v tr ca vn bn v nh trn trang Web, thay v giao tt c
cc vic cho trnh duyt.
Th <TABLE> c s dng to bng trong ti liu HTML.
Cc thuc tnh ca phn t <TABLE> p dng cho bng, ch khng phi d liu
c hin th trong bng. n v c bn ca bng l , v c nh ngha bng
th <TD>.
<HTML>
<HEAD>
<TITLE>Using Tables</TITLE>
</HEAD>
<BODY>
<TABLE>
<TD>
A single cell table
</TD>
</TABLE>
</BODY>
</HTML>
Bn c th thm nhiu to mt hng cc .
<HTML>
<HEAD>
57
</HEAD>
<BODY>
<TABLE>
<TD>Data Cell 1</TD>
</TABLE>
</BODY>
</HTML>
Bn c th thm hng vo bng. Mt hng c xc nh bng cch s dng th
<TR>.
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE>
<TR>
<TR>
</TABLE>
</BODY>
</HTML>
Cell1, Cell2, v Cell3 to mt hng. Trong khi , Cell4, Cell5, v Cell6 to
hng th hai.
Cc to thnh hng. Cc hng to thnh bng. iu ny c ni n trong c
php HTML, c s dng to bng. Th TD c lng trong th TR. Th TR
nm trong th TABLE m v ng.
Phn t CAPTION c s dng thm phn ch gii vo s. y, bn s s
dng n m t bng. CAPTION nm ngay sau th <TABLE> bt u. Bn c
th xc nh ch mt phn ch gii cho mt bng.
58
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE>
<CAPTION>Creating a Table</CAPTION>
<TR>
<TR>
</TABLE>
</BODY>
</HTML>
Thm tiu vo
By gi bn c th thm tiu vo mi ct trong bng. S dng th <TH>
nh tiu cho ct.
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE>
<TH>Employee name</TH>
<TH>Designation</TH>
<TH>Salary</TH>
<TR>
<TR>
59
</TABLE>
</BODY>
</HTML>
v d trn, vic nhn ra mt s kh nu khng c vn bn trong . Thuc
tnh BORDER c th c s dng nh ngha v cu trc ca bng. Thuc
tnh ny ch rng ca ng vin. Nu gi tr c t l 0 th ng vin s
khng hin th.
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER = 2>
<TH>Salary</TH>
<TR>
<TR>
</TABLE>
</BODY>
</HTML>
nh dng ni dung bng
By gi l lc cn nh dng i cht. Bn c th ch ra v tr ca vn bn trong
mi ca bng.
Cc thuc tnh canh l ngang (ALIGN) v canh l ng (VALIGN) c t
iu khin canh l trong cc ca bng.
Thuc tnh ALIGN c cc gi tr sau:
60
align = left
align = center
align = right
align = justify
Thuc tnh VALIGN c cc gi tr sau:
valign = top
valign = middle
valign = bottom
valign = ng c s (vn bn trong tt c cc trong mt hng bt u ng
c s chung cho tt c cc ).
Mc nh cho cc d liu l canh gia theo chiu dc v tri theo chiu ngang.
Trong khi , mc nh cho tiu l canh gia c chiu ngang v dc.
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER = 2>
<TH ALIGN = RIGHT>Salary</TH>
<TR>
<TD ALIGN = right VALIGN = bottom>Data Cell 1</TD>
<TR>
</TABLE>
</BODY>
</HTML>
trnh nhm ln, bn ch s dng mt thuc tnh align v valign trong mt .
<TD ALIGN=center VALIGN=bottom>
Lnh ny s t vn bn gia v di .
61
Tr vic a ni dung vo cc , bn c th thay i kch thc v mu ca
bng.
Bn c th xc nh rng ca bng. Ngha l, khu vc trn mn hnh m bng
chim. Thuc tnh WIDTH ca th TABLE s lm nhng g cn thit. Gi tr ca
thuc tnh c th l phn trm hoc im.
<TABLE WIDTH = 50%>
Lnh ny s ko bng rng ra 50% mn hnh.
Nu bn mun thm mu vo bng, hy s dng thuc tnh BGCOLOR. Gi tr
c th l tn ca mt mu hoc mt gi tr thp nh phn.
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER = 2 WIDTH = 50% BGCOLOR = lavender>
<TR>
<TR>
</TABLE>
</BODY>
</HTML>
Thm khong trng
Nu bng ca bn nhn c v cht chi, th bn c th thm khong trng vo.
Cellspacing l khong trng gia cc . Cellpadding l khong trng gia ng
vin ca v vn bn nm trong . Theo m t th thuc tnh CELLSPACING
xc nh cc khong trng gia cc bng im (pixel). Thuc tnh
CELLPADDING xc nh cc khong trng trong .
<HTML>
<HEAD>
62
</HEAD>
<BODY>
<TABLE BORDER = 2 BGCOLOR =lavender CELLSPACING = 2
CELLPADDING = 6>
<TR>
<TR>
</TABLE>
</BODY>
</HTML>
Nhp
C nhng lc bn mun kt hp cc hng hoc ct thnh mt . Ngha l, bn c
th to mt ct kt hp hn mt hng, hoc to mt hng kt hp hn mt
ct.
Thuc tnh COLSPAN v ROWSPAN c s dng to cc kt hp hn
mt ct hoc hng.
Thuc tnh COLSPAN c s dng vi th <TD>, trong khi thuc tnh
ROWSPAN c s dng vi th <TH>.
nhp ct m rng:
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER = 2 BGCOLOR = lavender CELLSPACING = 2
CELLPADDING = 6>
63
<TH ALIGN = CENTERCOLSPAN = 3>Quarter 1</TH>
<TH ALIGN = CENTERCOLSPAN = 3>Quarter 2</TH>
<TD>Jan</TD>
<TD> Feb</TD>
<TD>March</TD>
<TD>April</TD>
<TD>May</TD>
<TD>June</TD>
<TR>
<TD>1000</TD>
<TD>550</TD>
<TD>240</TD>
<TD>1500</TD>
<TD>2765</TD>
<TD>1240</TD>
<TR>
<TD>3000</TD>
<TD>2430</TD>
<TD>1250</TD>
<TD>900</TD>
<TD>3400</TD>
</TABLE>
</BODY>
</HTML>
64
Hnh 3.1- Spanning columns (Cc ct m rng)
nhp hng m rng:
<HTML>
<HEAD>
</HEAD>
<BODY>
CELLPADDING = 6>
<TR>
<TH></TH>
<TH></TH>
<TH>NUTS</TH>
<TH>BOLTS</TH>
<TH>Hammers</TH>
<TR>
<TD ROWSPAN = 3>Quarter 1 </TD>
<TD>Jan</TD>
<TD>2500</TD>
<TD>1000</TD>
<TD>1240</TD>
65
<TR>
<TD> Feb</TD>
<TD>3000</TD>
<TD>2500</TD>
<TD>4000</TD>
<TR>
<TD>March</TD>
<TD>3200</TD>
<TD>1000</TD>
<TD>2400</TD>
</TABLE>
</BODY>
</HTML>
Hnh 3.2- Spanning rows

Cc hng c th c nhm vo cc phn u, cui v thn bng. Mi phn phi
cha t nht mt hng do phn t TR nh. N thng c s dng i vi cc
bng di v bn mun ngi dng cun phn thn ca bng. Phn thn bng
cha cc hng d liu ca bng. Bn c th ch r thng tin ct trong phn u v
cui bng.
Khi ngi dng cun bng, phn u v cui khng cun theo phn thn bng.
Thng tin phn u v cui c th c in trn mi trang cha d liu trong
bng.
Phn t THEAD c s dng ch phn u ca bng.
66
Phn t TBODY c s dng ch phn thn bng. Nu bng ch cha
phn thn, khng cha phn u v cui th bn c th b th khi ng
TBODY.
Phn t TFOOD c s dng ch phn cui ca bng.
Cc phn THEAD, TFOOD, v TBODY phi c s ct bng nhau.
<TABLE>
<THEAD>
<TR> header information
<TBODY>
<TR> first row of block one data
<TR> second row of block one data
<TBODY>
<TR> . first row of block two data .
<TR> second row of block two data
<TFOOD>
<TR> footer information
</TABLE>
An example
<HTML>
<HEAD>
<TITLE>Using Headers and Footers</TITLE>
</HEAD>
CELLPADDING = 6>
<CAPTION>Creating a table</CAPTION>
<THEAD>
<TR>
<TH></TH>
<TH></TH>
<TH>NUTS</TH>
<TH>BOLTS</TH>
<TH>Hammers</TH>
</THEAD>
<TBODY>
<TR>
<TD ROWSPAN = 3>Quarter 1</TD>
67
<TD>Jan</TD>
<TD>2500</TD>
<TD>1000</TD>
<TD>1240</TD>
<TR>
<TD>Fed</TD>
<TD>3000</TD>
<TD>2500</TD>
<TD>4000</TD>
<TR>
<TD> March</TD>
<TD>3200</TD>
<TD>1000</TD>
<TD>2400</TD>
</TBODY>
<BODY>
<TR>
<TD ROWSPAN = 3>Quarter 2</TD>
<TD>April</TD>
<TD>300</TD>
<TD>1000</TD>
<TD>2000</TD>
<TR>
<TD>May</TD>
<TD>2010</TD>
<TD>250</TD>
<TD>4000</TD>
<TR>
<TD>June</TD>
<TD>1000</TD>
<TD>3600</TD>
<TD>2400</TD>
</TBODY>
<TFOOD>
<TR> My company Limited
68
</TFOOD>
</TABLE>
</HTML>
Bi tp 1
1. To bng sau:
Using tables
Employee name Designation Salary
John Manager 4000
David Officer 2500
Graham Executive 3000
2. To mt bng phn nh bo co s lng bn hng nm My Company
Limited. Hin th cc con s hng thng c nhm theo qu. Cc sn
phm alf: Clips, Staples v Pens.
3.3. nh dng nh
Mt nh gi tr bng mt ngn ch. Chc chn iu ny c th p dng cho
mt trang web. Cc hnh nh c chn vo trong trang Web c gi l nh ni
tuyn. nh c th l cc biu tng, bullet, nh, logo cng ty v nhiu ci khc.
Ngy nay, c nhiu nh dng ho ang c s dng. Tuy nhin, trn Web
c khc i cht. Ba nh dng ho thng thng c hin th trn hu ht
cc trnh duyt l:
GIF (Graphics Interchange Format) images (GIF)
GIF l nh dng thng thng nht c s dng trong cc ti liu HTML. Cc
file GIF c nh dng khng ph thuc phn nn v h tr n 256 mu. u
im ca cc file GIF l kh d chuyn ti, ngay c cc kt ni s dng
MODEM tc chm.
C hai tiu chun cho cc file .gif 87a v 89a (h tr trong sut)
nh dng GIF xen k
Mt file nh GIF thng thng hin th nh mt ln mt dng. Mc d cc nh
xen k c hin th mt ln mt dng, nhng th t c thay i.
nh GIF trong sut
Mt im c th trong sut hoc m. nh GIF trong sut l nh trong nn ca
nh cng mu vi trang Web. V d, cc biu tng v bullet c nn trong sut v
vy chng hp vi mu nn ca ti liu.
69
File .gif c background trong sut
File .gif c background khng trong sut
Hnh 3.3- Transparency

JPEG (Joint Photographic Expert Group) images (.JPEG)
Nn JPEG l mt lc nn mt thng tin. iu ny c ngha l nh sau khi b
nn khng ging nh nh gc. Tuy nhin, trong qu trnh pht li th nh cng tt
gn nh nh gc. Khi bn lu mt file vi nh dng JPEG, bn c th nh t l
nn. T l cng cao th nh cng t ging nh gc.
JPEG h tr hn 16 triu mu v thng c s dng cho cc nh c mu thc.
C cc file dng JPEG (phn m rng l .jpg) v cc dng GIF u nn nh
bo m tc chuyn ti qua Internet c nhanh hn. nh JPEG c th c
nn nhiu hn nhng chm hn trong qu trnh hin th so vi nh .GIF. C l
l l do ti sao nh .GIF ph bin trong ti liu HTML.
PNG (Portable Network Graphics)
nh dng cho mt file PNG l khng b mt (lossless). Trong nn lossless, d
liu nh c nn m khng b chi tit. Cc file PNG h tr nh mu thc v di
mu xm. Cc file PNG cng c th c nn chuyn qua mng.
Khi quyt nh nh dng ho, chng ta nn nh mt vi yu t:
Cht lng ca nh Cht lng ca nh c quan trng trong qu trnh hin
th khng?
ln d liu File cng ln th thi gian truyn cng lu.
Cc yu cu hin th - nh h tr trong sut, hin th tun t hay xen k.
Cc k thut nn c phn bit da vo vic chng c b bt cc chi tit v
mu khi nh hay khng, ngha l k thut nn b mt hay khng mt.
3.4. Chn nh
Th IMG c s dng chn nh vo ti liu HTML.
Th IMG
Th IMG c s dng chn nh vo ti liu HTML. Bn c th t th IMG
ti v tr nh c hin th. Th IMG khng c ni dung, n hin th ni dung
c ghi trong thuc tnh src.C php l:
<IMG SRC = URL">
70
trong , SRC (ngun) l thuc tnh v gi tr l URL, ch v tr chnh xc ca file
nh.
<HTML>
<HEAD>
<BODY>
<IMG SRC= C:\windows\clouds.gif>
</BODY>
</HEAD>
</HTML>
i khi, ch hnh nh khng th ni ln tt c. Bn cn phi cung cp cho ngi
dng mt vi u mi v mc ch ca hnh nh. Bn c th canh l nh vi vn
bn.
Thuc tnh ALIGN ca th IMG c th c s dng chnh canh l ca nh
vi vn bn xung quanh.
<IMG ALIGN=position SRC= PICTURE.GIF>
trong , v tr ca nh c th l trn, di, gia, tri hoc phi.
<HTML>
<HEAD>
<TITLE>Inserting an Image</TITLE>
<H1><CENTER><FONT SIZE=3 COLOR=FORESTGREEN>
<B>Inserting an Image</B>
</CENTER></FONT></H1>
<HR>
<BODY>
<IMG ALIGN=BOTTOM SRC= C:\circles.gif>Aligned at the
bottom</P>
<P>
<IMG ALIGN=TOP SRC= C:\circles.gif>Aligned at the
top</P>
<P>
<IMG ALIGN=MIDDLE SRC= C:\circles.gif> Alligned in
the middle</P>
</BODY>
</HEAD>
</HTML>
71
Hnh 3.4- Canh l vn bn
C th chng ta s ngc nhin khi bit rng mt s trnh duyt khng hin th cc
hnh nh. Trong trng hp , bn cn xc nh mt dng ch thch thay th
trong ti liu HTML. Thng s ALT c s dng ch ni dung nh ca bn.
<HTML>
<HEAD>
<H1><FONT SIZE=3 COLOR=FORESTGREEN>
<B><I>Inserting an Image</I></B>
</FONT></H1>
<HR>
<BODY>
<IMG SRC= C:\circles.gif ALT= Going round in
Circles>
</BODY>
</HEAD>
</HTML>
72
Nn ca trang cng quan trng nh vn bn. Bn cn ch n nn. Trong hu
ht cc trang ngi ta s dng nn mu, vi mc ch l lm ni ni dung trang
. Bn cng c th s dng nh lm nn.
lm iu , bn cn s dng thuc tnh BACKGROUND ca th BODY.
<BODY BACKGROUND= bgimage.gif> (ch URL hon chnh ca nh).
Nu nh nh hn phm vi hin th ca ti liu, th nh c xp k nhau lp
ton b vng hin th.
<HTML>
<HEAD>
<BODY BACKGROUND= c:\windows\clouds.gif>
<P>Using an image in the background.
</BODY>
</HEAD>
</HTML>
Cun
nh thng cun vi vn bn khi ngi dng cun trang trong trnh duyt. Nu
bn khng mun nh vy v thay v th to ra mt hiu ng hnh m, ngha l
vn bn cun nhng nh vn ng yn, th nhng g bn cn lm l t thuc tnh
BGPROPERTIES ca th BODY c nh.
<HTML>
<HEAD>
<BODY BACKGROUND= c:\windows\clouds.gif>
BGPROPERTIES=FIXED>
<P>Enter a whole lot of text

</P>
</BODY>
</HEAD>
</HTML>
Siu nh
Cc nh bn chn vo ti liu HTML c th phc v nh cc siu lin kt. Nhng
nh nh th c gi l siu nh. Khi ngi dng nhp vo nh, ti liu hoc file
c ghi trong URL s hin th.
lm iu ny, bn cn chn nh trong th neo.
<HTML>
73
<HEAD>
<H1><FONT SIZE=3 COLOR=FORESTGREEN>
<B><I>Inserting an Image</I></B>
</FONT></H1>
<HR>
<BODY>
<A HREF= c:/Doc1.htm>
<IMG SRC= C:\Clouds.gif border = 0 ALT=Link to
Document1>
</A>
</BODY>
</HEAD>
</HTML>
Bi tp 2
1. To trang Web vi tiu Inserting Images. Thm mt ta cp hai
vo ti liu- Hc cch s dng nh. Canh gia tiu . i thnh font
Arial v mu xanh da tri. K mt ng nm gia sau tiu khong
na trang.
2. Chn 3 nh vo ti liu
3. Ghi mt dng m t nh gia mi nh.
4. To mt lin kt cho mi nh. Mt ti liu ring bit nn c hin th i
vi mi nh c nhp chut.
5. To mt trang Web mi vi tiu Using Watermarks. Thm vo trang
mt on vn bn 20 dng. on vn bn nn in nghing v mu .
Thm mt nh m vo nn.
3.5. Bn nh
Bn c th s dng nh trong trang Web to bn nh. Mt bn nh c
cc vng hot ng m bn c th gn cc lin kt vi chng. Cc vng ny gi
l cc im nng. Khi ngi dng nhp vo cc im nng, th cc lin kt
c kch hot.
To ca im nng c xc nh bng cch s dng vng (c th c hnh
dng khc nhau)Bn phi xc nh hnh dng v to ca vng nng.
Hnh dng M t
Default ch ton b vng. y l mc nh.
Rect ch vng hnh ch nht
Circle ch vng hnh trn
74
Poly ch vng hnh a gic
To c xc nh da vo gc trn v tri ca i tng.
To Phi hp
Rect Tri-x, trn-y, phi-x, di-y
Circle gia-x, gia-y, bn knh
Poly x1, y1, x2, y2, xN, yN
Cc loi bn nh
C hai loi bn nh:
Bn nh pha my ch c chng trnh da vo my ch din dch.
Khi ngi dng nhp vo bn nh, trnh duyt gi to im n chng
trnh trn my ch. Chng trnh ny din dch to v thc hin cc hnh
ng cn thit.
Bn nh pha client c th c tr trong cc file HTML v c chn
vo trong mt ti liu HTML cng vi cc phn t HTML khc. Khi ngi
dng nhp vo im nng trong mt bn nhpha client, trnh duyt din
dch to im v thc hin cc hnh ng cn thit.
Khi to bn nh, hy nh cc trnh duyt khng s dng ho. Bn cng nn
cung cp cc phng php iu hng lun phin khi s dng bn nh trong
mt trang Web.
To bn nh pha client
to mt bn nh pha client, bn phi s dng cc phn t MAP, AREA v
usemap. Phn t AREA c s dng to vng im nng. Phn t MAP
c dng chuyn cc vng nh vi cc URL tng ng. Thuc tnh usemap
lin kt mt phn t vi bn nh ca n.
to mt bn nh:
1. To mt file nh v lu n vi phn tn m rng l .GIF hoc .JPEG
2. To mt ti liu .htm.
3. Thm c php sau:
<HTML>
<BODY>
<A HREF = >
<CENTER>
<IMG SRC=c:/windows/clouds.gif WIDTH=176 HEIGHT=163
BORDER=1 usemap= #map1>
</A>
</center>
<MAP name= map1>
<AREA href= filel.html
75
alt= Contents
shape= rect
cords= 0, 0, 80, 80>
<AREA href= file2.html
alt= Search"
shape= rect
cords= 0, 80, 80, 163>
alt= Back
shape= circle
cords= 163, 175, 60>
alt= Purchase order
shape= poly
coords= 163, 0, 175, 28, 50, 50, 163, 0>
</MAP>
</BODY>
</HTML>
Bi tp 3
1. To mt bn nh pha client vi 4 vng nng hnh ch nht. Khi ngi
dng nhp vo mt im nng th mt ti liu s hin th. Mi im nng nn
lin kt vi mt ti liu khc.
3.6 Thm m thanh

m thanh l ci ngi ta mun nghe. Trang Web tng tc hp dn mt phn
nh thnh thong c ting bp bp khi ngi dng tng tc vi trang . MIDI l
nh dng chun ca cc file m nhc c s dng trong ti liu HTML. Cc
file MIDI tr cc nt nhc v cc nhc c cho cc bng tng ph nhc. Nhc c
in t to ra nhiu m thanh khc nhau trong card m thanh m phng m nhc.
Mt khc, cc file .wav (wave) v .au gi chnh xc ca m thanh.
Nhm thm m thanh vo trang Web ca bn, nhng g bn cn lm l tham
chiu n file m thanh (.wav hoc .midi) trn h thng ca bn.
V d,
<BGSOUND SRC= path\sound filename>
Nu bn khng xc nh ng dn th trnh duyt s tm file ti ni c cha
trang Web .
Nh cp, m nhc MIDI ch l m nhc tng hp. Tuy nhin, nu bn
mun thm file nhc ring ca mnh, hy ni mt ting hoc ht mt bi no .
76
Khi trang Web c hon tr, c th bn cn phi s dng file m thanh k thut
s.
Mt file m thanh k thut s cha thng tin m phng chnh xc file m
thanh gc. Tn s ly mu m thanh quyt nh cht lng ca file m thanh.
Tn s cng cao th cht lng m thanh cng tt. Bt li l ch n s tng
ln ca file. Cc file m thanh k thut s c th c lu vi mt trong hai nh
dng .au hoc .wav (wave files).
nh dng file .wav bt u vi Windows. T l nn chm v ln file ln.
nh dng file .au bt u vi cc my Unix. Lu tr m thanh k thut s th tt
hn. N c t l nn cao hn so vi cc file .wav.
<HTML>
<BODY>
<BGSOUND src= batman.mid>
<A id= ImageLink HREF = >
<CENTER>
<IMG SRC=c:\win98\clouds.gif WIDTH=176 HEIGHT=163
BORDER=1 usemap= #map1>
</A>
</center>
<MAP name= map1>
<AREA href= filel.html
alt= Truy cp Guide
shape= rect
cords= 0, 0, 80, 80>
alt= Search"
shape= rect
coords= 0, 80, 80, 163>
alt= Back
shape= circle
coords= 163, 175, 60>
alt= Contents
shape= poly
coords= 163, 0, 175, 28, 50, 50, 163, 0>
</MAP>
</BODY>
77
</HTML>
Phn t BGSOUND khng c Netscape Navigator h tr
78
Tm tt:
Trong chng ny, chng ta tho lun v bng v cch s dng
chng iu by vn bn v nh trn mt trang Web.
Chng ny cng cp n cc nh dng file nh thng thng
c s dng trn Web. Bn cng hc cch chn nh vo ti
liu HTML v canh l vn bn c nh.
Chng ny cn bn v vic to bn nh c th c s dng
trong ti liu HTML. Sau , bn hc cch a m thanh vo
mt trang HTML.
79
I. in vo ch trng.
a. Phn t .. c s dng m t bng.
b. Th . c s dng xc nh mt .
c. Thuc tnh .. c s dng t ni dung ca mt
pha trn ca .
d. Thuc tnh xc nh din tch trn trang m bng s
chim.
e. nh c chn vo mt rang Web c gi l nh
f. Hai tiu chun i vi file .GIF l v

g. Dng mu y ca PNG l
h. Th c s dng chn nh vo ti liu HTML.
i. Thng s c s dng xc nh vn bn thay
cho ho.
j. Vng hnh hc m chng ta gn mt lin kt c gi l

k. Thuc tnh . c s dng lin kt mt phn t
vi bn nhca n.
l. Cc file .. tr cc nt nhc v cc loi nhc c
ghi im.
II. Hy ch ra cc cu sau y l ng hay sai.
a. Th TH c s dng xc nh tiu ct cho mt bng.
b. giu ng vin gia cc , bn phi thay i gi tr ca thuc tnh
BORDER thnh 0.
c. Bn phi xc nh hn mt thuc tnh canh l trong mt .
d. Khong cch xc nh khong cch gia cc l v ni dung ca .
e. Thuc tnh COLSPAN c s dng vi th TH.
f. Thuc tnh BGPROPERTIES c s dng iu khin cun nh.
g. Bn nh pha client c th c chn vo mt ti liu HTML v hin
th trong trnh duyt nhng c x l ti my ch.
h. Tn s ly mu m thanh quyt nh cht lng file m thanh.
80
Chng 4
Biu mu v khung
Mc tiu ca chng
M t biu mu
Lit k cc phn t nhp thng thng trong HTML.
To biu mu
To v s dng khung
Gii thiu
Nu bn l mt ngi thng xuyn s dng Web, bn s hay gp hoc hay in
vo biu mu cc loi. Trong chng ny, bn s hc cch thm cc phn t nhp
d liu vo mt ti liu HTML v to mt biu mu. Bn cng s hc v khung
phn chia ti liu.
4.1. Gii thiu cc biu mu
Mt biu mu HTML l mt phn ca ti liu cha cc phn t c bit gi l
cc iu khin (control). Cc iu khin c s dng nhn thng tin vo t
ngi dng v cung cp mt tng tc no . D liu do ngi dng nhp vo
c th c hiu lc nh ngn ng script pha my khch v c chuyn n my
ch x l thm.
S dng cc biu mu
Cc biu mu trn World Wide Web kh nhiu v pht trin lin tc. Sau y l
mt s cch s dng biu mu thng thng:
Thu thp tn, a ch, s in thoi, e-mail v cc thng tin khc ng k
cho ngi dng vo mt dch v hoc s kin.
Tp hp thng tin mua mt mt hng no . V d, nu bn mun mua
mt quyn sch thng qua Internet, bn cn phi in tn, a ch gi th bu
in, phng thc thanh ton v cc thng tin lin quan khc.
Thu thp thng tin phn hi v mt Web site. Hu ht cc site cung cp dch
v u khuyn khch khch hng gi thng tin phn hi. Ngoi vic xy dng
mi quan h vi khch hng, y cn l mt ngun thng tin trao i hoc
ci tin.
Cung cp cng c tm kim cho web site. Cc site cung cp thng tin khc
nhau thng cung cp cho ngi dng mt hp tm kim cho php h nh
v thng tin nhanh hn.
Phn t FORM (Biu mu)
Phn t <FORM> c s dng to vng trn trang m s c xem nh mt
biu mu. N ch cch trnh by biu mu. Cc thuc tnh bao gm:
81
Thuc tnh M t
ACCEPT Thuc tnh ny xc nh danh sch cc kiu MIME c my
ch nhn ra, trong c cha script x l biu mu. C php
l:ACCEPT = Internet media type"
ACTION Thuc tnh ny xc nh v tr ca script s x l biu mu
hon chnh v c nhn. C php l ACTION = URL.
METHOD Thuc tnh ny xc nh phng thc d liu c gi n my
ch. N cng xc nh giao thc c s dng khi khch hng
gi d liu n my ch. Nu gi tr l GET th trnh duyt s to
mt cu hi cha trang URL, mt du hi v cc gi tr do biu
mu to ra. Trnh duyt s i script ca cu hi thnh kiu c
xc nh trong URL x l. Nu bn xc nh POST, d liu
trn biu mu s c gi n script nh mt khi d liu.
Ngi ta khng s dng chui cu hi. C php l : METHOD =
(GET POST).
V d, a mt biu mu n chng trnh x l biu mu
bn hy s dng phng php POST:
<FORM>
action=
http://mysite.com/processformmethod=
post>
form contents
</FORM>
4.2. Cc phn t nhp ca HTML
Khi bn to biu mu, bn c th t cc iu khin ln biu mu nhn d liu
vo t ngi dng. Cc iu khin ny thng c s dng vi phn t
<FORM>. Tuy nhin, bn cng c th s dng chng ngoi biu mu to cc
giao din ngi dng.
Phn t INPUT
Phn t <INPUT> xc nh loi v hnh thc ca iu khin c hin th trn
biu mu. Cc thuc tnh ca phn t l:
Thuc tnh M t
TYPE Thuc tnh ny ch loi phn t. Bn c th chn TEXT,
PASSWORD, CHECKBOX, RADIO, SUBMIT, RESET,
FILE, HIDDEN v BUTTON. Mc nh l TEXT.
NAME Thuc tnh ny ch tn ca iu khin. V d, nu bn c
nhiu hp vn bn trn mt biu mu, bn c th xc nh
chng bng cch t tn TEXT1, TEXT2, hoc bt k tn
no m bn chn. Phm vi hot ng ca thuc tnh tn nm
trong phn t FORM.
VALUE y l mt thuc tnh tu chn xc nh gi tr u tin ca
iu khin. Tuy nhin, nu TYPE l RADIO th bn bt
82
buc phi xc nh mt gi tr.
SIZE Thuc tnh ny ch rng ban u ca iu khin. Nu
TYPE l text hoc password th kch thc c xc
nh bng cc k t. i vi cc loi nhp khc, rng
c xc nh bng im.
MAXLENGTH Thuc tnh ny c s dng ch s k t ln nht c th
nm trong phn t text hoc password. Mc nh l
khng gii hn.
CHECKED y l thuc tnh logic ch nt ang bt. Thuc tnh ny
c s dng khi d liu nhp l radio hoc checkbox.
SRC SRC= URL. Thuc tnh ny c s dng khi bn nhp
vo mt nh. Thuc tnh xc nh v tr ca nh.
Cc loi d liu nhp
Phn ny bn v cc loi phn t nhp cng vi mt s c tnh v s kin
thng c s dng.
Nt bm
Nt bm to iu khin bm.
Tn M t
Name t hoc truy xut tn ca iu khin
Size t hoc truy xut kch thc ca iu khin
Type Truy xut loi iu khin bn trong c biu trng bi <INPUT
type=button>.
value t hoc truy xut gi tr ca<INPUT type=button>
C php:
<INPUT TYPE=button VALUE= click NAME= b1>
Vn bn
Loi ny to ra iu khin nhp vn bn dng n. Thuc tnh SIZE xc nh s
k t c th c hin th trong phn t Text. Thuc tnh MAXLENGTH ch s
k t ti a c th c nhp vo phn t Text.
<INPUT TYPE=text VALUE= NAME= textbox SIZE=20>
y, phn t Value hin th chui vn bn u tin v truy xut vn bn c
xc nh khi biu mu c nhn.
Hp kim (Checkbox)
To checkbox. Ngi dng c th chn hn mt checkbox. Khi chn phn t
checkbox, cp tn / gi tr c nhn vi biu mu. Gi tr mc nh ca
checkbox l bt. Phn t checkbox l mt phn t ni tuyn v khng cn th kt
thc.
83
c tnh
Tn M t
Checked t hoc truy xut trng thi ca checkbox.
Name t hoc truy xut tn ca checkbox.
Size t hoc truy xut kch thc ca checkbox.
Status t hoc truy xut xem checkbox c c chn hay khng.
Type Truy xut loi iu khin bn trong c biu trng bi
<INPUT type=checkbox>
value t hoc truy xut gi tr ca <INPUT type=checkbox>
Radio
To iu khin kiu nt radio. iu khin nt radio c s dng i vi cc tp
gi tr loi tr ln nhau. Cc iu khin nt tu chn trong nhm nn c cng tn.
Ngi dng ch c th chn mt chn la vo mt thi im no . Ch c nt
tu chn c chn trong nhm mi to nn cp tn / gi tr trong d liu c
nhn. Cc nt tu chn cn mt thuc tnh gi tr hin.
Cc c tnh
Tn M t
Checked t hoc truy xut trng thi ca nt radio.
Name t hoc truy xut tn ca iu khin.
Size t hoc truy xut kch thc ca iu khin.
Status t hoc truy xut xem nt radio c c chn hay khng.
type Truy xut loi iu khin bn trong c biu trng bi INPUT
type=radio>.
value t hoc truy xut gi tr ca <INPUT type=radio>.
C php:
<INPUT TYPE=radio NAME= sex VALUE= male>Male
Submit
To nt submit. Khi ngi dng nhp vo nt Submit, biu mu c nhn vo
v tr c xc nh trong thuc tnh action. Cp tn / gi tr ca nt submit hot
ng c nhn cng vi biu mu.
C php:
<INPUT TYPE=submit VALUE= click NAME= b1.
nh
To nt nhn dng nh. Gi tr ca thuc tnh src xc nh URL ca nh c t
trong nt ny. Khi ngi dng nhp vo iu khin nh, biu mu s c nhn
x l. To x v y (c o bng im) ca v tr nhp chut c chuyn
n my ch vi nh dng sau.
84
Name.x = valueofx
Name.y = valueofy
y, tn l tn ca iu khin.
Nu cc script khc nhau c kch hot ph thuc vo v tr nhp chut, iu
ny c th gy ngc nhin cho ngi dng ca cc trnh duyt khng h tr giao
din ho. V vy, bn c th s dng nhiu nt nhn vi cc nh khc nhau
thay v mt nt nhn ho n l. Nu cn trnh by c nhiu tranh nh, bn c
th s dng cc bn nh.
C php:
<INPUT TYPE= image SRC=usamap.gif NAME= name>
RESET
To nt reset. Khi ngi dng nhp vo nt ny, cc gi tr ca tt c cc iu
khin c ti thit lp tr v gi tr ban u c xc nh trong cc thuc tnh
gi tr ca chng.
Cc phn t nhp khc
Cc phn t nhp khc c th c s dng trn mt biu mu hoc to mt giao
din ngi dng. Mi phn t c th c thay i thng qua cc c tnh,
phng php v s kin.
Phn t vng vn bn
Phn t ny to iu khin nhp vn bn nhiu dng so vi hp vn bn mt
dng. Bn phi xc nh kch thc ca vng vn bn. Bn cng xc nh s
dng v ct trong vng vn bn. Tuy nhin, bn phi kt thc phn t vi th kt
thc </TEXTAREA>
Cc c tnh
Tn M t
Cols Truy xut rng ca vng vn bn.
Rows t hoc truy xut s hng ngang trong <TEXTAREA>.
Size t hoc truy xut kch thc ca iu khin.
Type Truy xut loi iu khin bn trong c biu trng bi
<TEXTAREA>.
Value t hoc truy xut gi tr ca <TEXTAREA>.
<HTML>
<P>
<TEXTAREA NAME= text1 COLS=20 ROWS=5> <TEXTAREA>
</HTML>
Phn t nt bm (BUTTON)
To iu khin nt bm. Khi ngi dng nhp vo nt, biu mu s c nhn
x l. Cp tn / gi tr ca nt c nhn cng vi biu mu.
85
c tnh
c tnh M t
Name Gn tn cho nt.
Value Gn gi tr cho nt.
Type Xc nh loi nt. Cc gi tr c th l:
Submit - To nt nhn biu mu khi c nhp vo.
Button - To nt kch hot mt script khi n c nhp vo.
Reset - To nt ti thit lp biu mu v cc gi tr ca iu khin
trn biu mu.
Mt nt bm dng submit ging mt phn t INPUT ca loi nt. S khc nhau
l ch khi phn t BUTTON c nhp vo th cp tn / gi tr c nhn cng
vi biu mu.
Mt nt bm dng submit cng cha mt nh v ging mt phn t INPUT c
loi l nh. S khc nhau l ch phn t INPUT c tr li nh l mt nh
phng trong khi phn t BUTTON c hin th nh mt nt chuyn ng ln
/ xung. Xem m c a ra di y trn Internet Explorer.
<HTML>
<HEAD>
<TITLE>Using Buttons</TITLE>
</HEAD>
<BODY>
<H2><CENTER><FONT size = 5 color = hotpink face =
arial>Personal Information</FONT></CENTER></H2>
<HR align = center>
<FORM action= http: // somesite.com method= post>
<P>
First name: <INPUT type= text name= first anme>
<BR><BR>
Last anme: <INPUT type= text name=
<last name><BR><BR>
<INPUT type= radio name= sex value= Male> Male
<INPUT type= radio name= sex value= Female>
Female<BR><BR><BR>
<BUTTON type= submit name= submit value= submit>
Send<IMG src= c: /happy.bmp alt= wow></BUTTON>
<BUTTON type= reset name= reset>
86
Reset<IMG src= c: /delete.bmp alt=
delete></BUTTON>
</P>
</FORM>
</BODY>
</HTML>
Hnh 4.1- Nhn nhp liu t ngi dng

Chn la
Phn t SELECT c s dng hin th mt danh sch cc tu chn cho
ngi dng. Mi chn la c biu trng bi mt phn t OPTION. Mt phn
t SELECT phi cha t nht mt phn t OPTION. Tu chn m ngi dng
chn c biu trng bi mt khi ni bt.
c tnh
c tnh M t
Name Gn tn cho phn t. Khi biu mu c nhn, thuc tnh tn
c ghp vi gi tr c chn.
Size Nu c nhiu tu chn ngi dng cun qua, kch thc xc
nh s hng trong danh sch nn c hin th cng mt lc.
Multiple L thuc tnh logic cho php ngi dng chn nhiu hn mt tu
chn.
Mi tu chn trong hp chn c hiu lc ho kim tra s m t vn bn ca
n v xem th n c c chn hay khng.
87
Mng Options cung cp mt danh mc vo danh sch cc tu chn trong phn t
nhp SELECT. Mi tu chn c mt c tnh Selected v Text cho php chng ta
kim tra tu chn c chn hay khng v truy xut vn bn ca tu chn. V
vy, bn c th kim tra mi mc nhp trong mng v lm cho n c hiu lc.
<HTML>
<HEAD>
<TITLE>Using selections</TITLE>
</HEAD>
<BODY>
<H3><CENTER><FONT color = blue>Job
Description</FONT><CENTER></H3>
<FORM action= http: // somesite.com / processform
method = post>
<P>
Job Description
<SELECT NAME= Job SIZE= 1>
<OPTION VALUE= 1>Web Developer
<OPTION VALUE= 2>Web Designer
<OPTION VALUE= 3 SELECTED>Web Administrator
</SELECT>
<BR>
<BR>
Experience
<SELECT NAME= Experience SIZE= 3>
<OPTION VALUE= 1 SELECTED>1 year
<OPTION VALUE= 2>1 3 years
<OPTION VALUE= 3>None
</SELECTED>
<BR><BR>
<INPUT type= submit value= Send><INPUT type=
reset>
</P>
</FORM>
</HTML>
Khi biu mu c nhn, chn la c chn cho Job Description s c
ghp vi tn Job v chn la c chn Experience s c ghp vi tn
Experience.
88
Phn t OPTGROUP c s dng nhm cc chn la thnh cc cp bc. V
d, bng ni dung c th c tn chng. ti v ti nh trong chng c th
c nhm trong tn chng.
c tnh
c tnh M t
Selected y l thuc tnh logic c s dng chn trc mt tu
chn.
Value Xc nh gi tr c nhn vo cho tu chn c chn. Gi tr
ny c ghp vi tn ca phn t SELECT. Ni dung ca
phn t OPTION l gi tr mc nh.
Lable Xc nh vn bn c hin th cho tu chn.
<HTML>
<Head>
<Title>Using the Option Group</Title>
</head>
<body>
<FORM action= htpp: // somesite.com / processform
method= post>
<P>
<SELECT name= course>
<OPTGROUP>
<OPTION value= Internetintro>Introduction to the Internet
<OPTION value= Introhtml>Introduction to HTML
<OPTION value= Introweb>Introduction to the web page designing
</OPTGROUP>
<OPTGROUP>
<OPTION value= vbintro>Visual Basic An Introduction
<OPTION value= vbdev>Visual Basic Application Development
</OPTGROUP>
</SELECT>
</FORM>
</body>
</html>
Phn t LABEL
Phn t LABEL c s dng gn thng tin vo cc phn t iu khin. V
d, phn t TEXT khng c nhn tng minh. Bn c th gn nhn vo phn t
89
vn bn khi trang c hin th. Bn phi xc nh thuc tnh ID ca iu
khin ang c kt hp.
<HTML>
<HEAD>
<TITLE>Using Labels</TITLE>
</HEAD>
<BODY>
<H2><CENTER><FONT size = 5 color = hotpink face =
arial>Personal Information </FONT></CENTER></H2>
<HR align = center>
<FORM action= http: // somesite.com method = post>
<P>
<LABEL for= firstname: </LABEL>
<INPUT type= text id= firstname><BR><BR>
<LABEL for= lastname>Last name: </LABEL>
<INPUT type= text id= lastname><BR><BR>
<INPUT type= radio name= sex value= Female>
Female<BR><BR><BR>
<INPUT type= submit name= submit value= submit>
<INPUT type= reset name= reset name= reset
value= reset>
</P>
</FORM>
</HTML>
4.3. To biu mu
Bn hc v phn t <FORM> v cc iu khin c th c thm vo biu
mu nhn d liu nhp vo t ngi dng. Trong phn ny, bn s to mt
biu mu nhn thng tin v mt ngi xin vic. Cc nt RESET v SUBMIT
thc hin cc cng vic cn thit.
<HTML>
<HEAD>
<TITLE>Job application</TITLE>
</HEAD>
<BODY >
<H1><CENTER><FONT SIZE = 4 COLOR=
Forestgreen>Application Form </CENTER></FONT></H1>
<HR>
90
<BR>
method = post>
<P>
<LABEL for= firstname>Name: </LABEL>
<INPUT type= text id= firstname><BR>
<P>Area of Interest
<BR><BR>
<INPUT TYPE=RADIO NAME= CONTROL1 VALUE= 0
CHECKED> Web designer
<INPUT TYPE=RADIO NAME= CONTROL1 VALUE= 1 > Web
Administrator
<INPUT TYPE=RADIO NAME= CONTROL1 VALUE= 2 > Web
Developer
<P>Experience
<SELECT NAME= CONTROL2>
<OPTION>None</OPTION>
<OPTION>1 Year</OPTION>
<OPTION>3 Years</OPTION>
<OPTION>5 Years </OPTION>
</SELECT>
<BR>
</P>Comments
<BR>
<TEXTAREA NAME= CONTROL3 COLS= 30 ROWS= 5> Type
your comments here.</TEXTAREA>
<BR>
<P><INPUT NAME= CONTROL4 TYPE=CHECKBOX CHECKED>Send
acknowledgement
<BR>
<P><INPUT TYPE= SUBMIT VALUE= OK>
<INPUT TYPE= RESET VALUE= RESET>
</FORM>
</BODY>
</HTML>
iu khin cc phn t
Khi c nhiu phn t trn mt form, th cn phi iu khin chng.
91
t tiu im (focus)
Mt phn t hot ng khi n nhn tiu im. V d, vo vn bn trong phn
t TEXT, tiu im phi nm trn phn t. Khi phn t mt tiu im, n s
khng hot ng na.
Cch n gin nht t tiu im trn phn t l dng thit b tr nhp n
hoc dng bn phm truy cp.
Th t tab
Thuc tnh tabindex ca mt phn t xc nh trnh t phn t nhn tiu im
thng qua bn phm. y bao gm cc phn t c lng trong cc phn t
khc. Gi tr c th l bt c s no gia 0 v 32767. iu hng bt u vi
phn t c gi tr tabindex thp nht. Nu bn gn cng mt gi tr tabindex cho
hn mt phn t, th phn t s nhn tiu im theo th t n xut hin trong ti
liu.
Nu phn t khng h tr thuc tnh tabindex, n s l phn t cui cng nhn
tiu im. Nu bn v hiu ho mt phn t, n s khng c lit k vo th t
tab.
<HTML>
<HEAD>
</HEAD>
<BODY >
<HR>
<BR>
method = post>
<P>
<INPUT tabindex = 1 type= text id= firstname><BR>
<P>Area of Interest
<BR><BR>
<INPUT tabindex = 2 TYPE=RADIO NAME= CONTROL1 VALUE= 0
CHECKED> Web designer
<INPUT tabindex 2 TYPE=RADIO NAME= CONTROL1 VALUE= 1 >
Web Administrator
<INPUT tabindex 2 TYPE=RADIO NAME= CONTROL1 VALUE= 2 >
Web Developer
<P>Experience
92
<SELECT tabindex= 3 NAME= CONTROL2>
</SELECT>
<BR>
</P>Comments
<BR>
<TEXTAREA tabindex 4 NAME= CONTROL3 COLS= 30 ROWS= 5>
Type your comments here.</TEXTAREA>
<BR>
<P><INPUT tabindex= 5 NAME= CONTROL4 TYPE=CHECKBOX
CHECKED>Send acknowledgement
<BR>
<P><INPUT tabindex = 6 TYPE= SUBMIT VALUE= OK disable=
true>
<INPUT TYPE= RESET VALUE= RESET>
</FORM>
</BODY>
< /HTML>
Cc phm truy cp
Thuc tnh phm truy cp c s dng gn mt phm truy cp vi mt phn
t. Phm truy cp l mt k t n trong b k t ti liu v thng c s
dng cng vi phm Alt. Khi ngi dng nhn phm truy cp, phn t c xc
nh nhn tiu im v bt u hot ng.
<HTML>
<HEAD>
</HEAD>
<BODY >
<HR>
<BR>
method = post>
93
<P>
<INPUT truy cpkey = N tabindex = 1 type=
text id= firstname><BR>
<P>Area of Interest
<BR><BR>
<INPUT tabindex = 2 TYPE=RADIO NAME= CONTROL1
VALUE= 0 CHECKED> Web designer
<INPUT tabindex 2 TYPE=RADIO NAME= CONTROL1 VALUE=
1 > Web Administrator
<INPUT tabindex 2 TYPE=RADIO NAME= CONTROL1 VALUE=
2 > Web Developer
<P>Experience
<SELECT tabindex= 3 NAME= CONTROL2>
</SELECT>
<BR>
</P>Comments
<BR>
<TEXTAREA accesskey = C tabindex = 4 NAME=
CONTROL3 COLS= 30 ROWS= 5> Type your comments
here.</TEXTAREA>
<BR>
<P><INPUT accesskey = A tabindex = 5 NAME=
CONTROL4 TYPE=CHECKBOX CHECKED>Send acknowledgement
<BR>
<P><INPUT accesskey = O tabindex = 6 TYPE=
SUBMIT VALUE= OK>
<INPUT accesskey = R TYPE= RESET VALUE= RESET>
</FORM>
</BODY>
</HTML>
Cc phn t v hiu ho
Nu bn lm vic vi trnh son tho vn bn, bn s thy rng nu khng m ti
liu no th cc tu chn lu v nh dng s b v hiu ho. Trong th gii cc
94
trang web, bn c th v hiu ho cc phn t hoc trng thi ch c c
nu bn khng mun ngi dng truy cp chng. V d, khi bn hin th mt
biu mu, bn c th v hiu ho Submit cho n khi ngi dng nhp d liu
vo.
Thuc tnh b v hiu ho c s dng iu khin truy cp mt phn t. Khi
mt iu khin b v hiu ho, n khng c lit k trong th t tab, iu khin
khng nhn c tiu im v cui cng cc gi tr ca iu khin b v hiu ho
khng c nhn cng vi biu mu. Mt iu khin b v hiu ho c th c
kch hot nh cc script lc thc hin.
Thuc tnh ch c xc nh xem ngi dng c thay i ni dung ca phn t
hay khng. Phn t c thuc tnh ch c hot ng c lit k trong th t tab
v nhn tiu im nhng ngi dng khng th thay i ni dung ca phn
t.Thuc tnh ch c c th c thay i nh cc script lc thc hin.
Cu trc biu mu
Bn c th nhm cc iu khin ging nhau ca mt biu mu vo cc phn logic
bng cch dng phn t FIELDSET. V d, tt c cc phn t INPUT c loi l
vn bn c nhm vo vi nhau.
Phn t LEGEND c s dng gn ch thch vo phn t FIELDSET.
Thuc tnh canh l c s dng xc nh v tr ca phn ch gii i vi
fieldset. Cc gi tr c th cho thuc tnh canh l l:
Gi tr M t
Top Ch gii nm trn u fieldset. y l gi tr mc nh.
Bottom Ch gii nm cui fieldset.
Left Ch gii nm bn tri ca fieldset.
Right Ch gii nm bn phi fieldset.
<HTML>
<HEAD>
</HEAD>
<BODY >
<HR>
<BR>
method = post>
<P>
<FIELDSET>
<LEGEND>Position</LEGEND>
95
Application for the post of: <INPUT name= name type=
text tabindex= 1>
</FIELDSET>
<FIELDSET>
<LEGEND> Personal Information</LEGEND>
Name: <INPUT name = name type= text tabindex=
2><BR><TEXTAREA name = address rows= 5 cols =
30 tabindex = 3>Enter address</TEXTAREA>
</FIELDSET>
<FIELDSET>
<LEGEND>Sex</LEGEND>
<INPUT name= sex
type= radio
value= Male tabindex 4 >Male
<INPUT name= sex
type= radio
value= Female tabindex 4> Female
</FIELDSET>
<FIELDSET>
<LEGEND>Educational Qualifications</LEGEND>
<INPUT name= qualif
type=radio
value= grad tabindex= 5> Graduate
<INPUT name= qualif
type=radio
value= postgrad tabindex= 5> Postgraduate
</FIELDSET>
<FIELDSET>
<LEGEND>Language known</LEGEND>
INPUT name= lang
type=checkbox
value= english tabindex= 6> English
INPUT name= lang
type=checkbox
value= french tabindex= 7> French
PINPUT name= lang
96
type=checkbox
value= german tabindex= 8> German
</FIELDSET>
</FORM>
</BODY>
</HTML>
Bi tp 1
1. To mt biu mu chp nhn cc chi tit sau ca ngi dng:
Tn
a ch v s in thoi
Gii tnh, tui
Ngn ng c th s dng (vi ba chn la)
a cho ngi dng tu chn xc lp li hoc nhn biu mu.
2. To mt biu mu hin th danh sch tn sch. Chp nhn cc chi tit mua sau
y t ngi dng:
Tn
a ch bu in v s in thoi
Cch thanh ton - hi phiu chi hay th tn dng
Cho ngi dng chn la xc nhn hay hu n t hng.
3. To mt mu t bo.
Thng tin c nhn
H tn
a ch
Thnh ph, Nc, M nhn dng c nhn
S in thoi
Bo c t mang n. a ra 5 la chn. Ngi dng c th chn hn mt.
Thi hn t bo 1 nm, 3 nm, 5 nm.
Phng thc thanh ton - hi phiu chi, th tn dng
Cho php ngi dng xc nhn hay hu n t hng.
4.4 Khung
Khung chia ca s ca trnh duyt web thnh cc vng ring bit, mi vng hin
th mt trang ring bit c th cun c. Mi khung l mt ca s duy nht
trong ca s chnh. V d, bn c th s dng 3 khung trong trang Web. Mt
khung c biu ng, mt khung cho menu iu hng v mt khung hin th
d liu. Mi khung c th c to, thay i v cun c lp vi nhau.
97
Mt ti liu HTML chun c phn tiu v thn. Mt ti liu HTML c khung
th c phn tiu v phn FRAMESET. Phn FRAMESET xc nh cch trnh
by trong ca s ca ngi dng.
Bn khng th s dng phn t t BODY v FRAMESET cng vi nhau.
Trnh duyt nhn phn t u tin xut hin trong ti liu v l i cc phn t
sau. Ngha l, nu bn s dng phn t BODY, th phn t RFAMESET sau
s b l i v ngc li.
Khung c to ra bng cch s dng FRAMESET. Cc thuc tnh nh sau:
Thuc tnh M t
Rows Xc nh cch trnh by khung ngang di dng im, phn
trm v chiu di tng i. Gi tr mc nh l 100%, ngha l
mt dng.
Cols Xc nh cch trnh by khung dc di dng im, phn trm
v chiu di tng i. Gi tr mc nh l 100%. N xc nh
ch mt ct.
Phn t FRAME xc nh hnh thc v ni dung ca mt khung n vi mt
FRAMESET. V d, ti liu sau to ra 2 khung hnh ch nht bng nhau v lp
kn ca s chnh.
<HTML>
<HEAD><TITLE>Two equal Frames</TITLE>
</HEAD>
<FRAMESET COLS= 50%, *>
<FRAME SRC= x.htm>
<FRAME SRC= y.htm>
</FRAMSET>
</HTML>
Hnh 1.3- To cc Frames

Cc thuc tnh ca phn t FRAME bao gm:
98
Thuc tnh M t
Name Thuc tnh ny gn tn cho khung hin thi.
Src Thuc tnh ny xc nh v tr ca ti liu u tin nm trong
khung.
Noresite y l mt thuc tnh logic. N quy nh ca s khung
khng c i kch thc.
Scrolling Thuc tnh ny xc nh cc kiu cun cho ca s khung. Cc
gi tr c th:
Auto Cung cp cun cho ca s khung khi cn thit. y l
gi tr mc nh.
Yes Lun cung cp cho ca s khung cc thit b cun.
No y l cc thit b khng cun cho ca s khung.
Frameborder Xc nh vin khung. Cc gi tr c th l:
1 L gi tr mc nh. B phn cch c v gia cc
khung hin thi v mi khung ni lin.
0 - Gia khung hin thi v mi khung ni lin khng c b
phn cch no. Tuy nhin, b phn cch ca cc khung ni
lin s c hin th nu c t.
Marginwidth Xc nh khong trng c hin th gia ni dung ca
khung v l phi v tri ca khung.
Gi tr phi ln hn mt im.
Marginheight Xc nh v tr c hin th gia ni dung ca khung v l
trn di ca khung.
Gi tr phi ln hn mt im.
<HTML>
<HEAD><TITLE>SCROLLING Test</TITLE></HEAD>
<FRAMESET ROWS= *,* >
<FRAME SRC= SCROLL1.HTM SCROLLING= no>
<FRAME SRC= SCROLL2.HTM SCROLLING= yes>
</FRAMSET>
</HTML>
99
Hnh 4.4- Scrolling Frames
<HTML>
<HEAD>
<TITLE>Using frames</TITLE>
</HEAD>
<FRAMESET cols= 20%, 80%>
<FRAMESET rows= 100, 200>
<FRAME src= scroll1.htm noresize>
<FRAME src= x.htm>
</FRAMSET>
<FRAME src= c:\win98\clouds.gif>
</FRAMESET>
</HTML>
100
Hnh 4.5- Controlling resizing
M sau to ra 3 ct: ct 2 c rng c nh l 250 im, ct 1 chim 25%
khong trng cn li v ct 3 chim 75% khong trng cn li.
<HTML>
<HEAD>
<TITLE>Using frames</TITLE>
</HEAD>
<FRAMESET cols= 1*, 250, 3* >
<FRAME src = x.htm frameborder = 0>
<FRAME src= scroll2.htm >frameborder = 0
marginwidth=25>
<FRAME src= y.htm>
</FRAMSET>
</HTML>
Cc khung lng nhau (Nested framesets)
Bn c th to cc khung lng bt c mc no.
<HTML>
<HEAD>
<TITLE>Nested Frames</TITLE>
</HEAD>
<FRAMESET cols= 33%, 33%, 34%>
<FRAME src = scroll1.htm >
101
<FRAME rows= 40%, 50% >
<FRAME src= x.htm>
<FRAME src= y.htm>
</FRAMESET>
<FRAME src = c:\win98\clouds.gif>
</FRAMESET>
</HTML>
Hnh 4.6- Nested frames
Bi tp 2
1. To mt ti liu HTML cha khung c mt ct v hai dng. Hin th
mt ti liu khc nhau trong mi khung.
2. To mt ti liu c khung dng ba ct. Ct 2 nn c 3 dng khung. Hin
th vn bn trong hai ct u tin. Hin th mt nh trong ct 3.
Lin kt vi khung
Khi to lin kt trong trang web bn c th to mt khung nh l mc tiu ca
lin kt. Trc khi bn to lin kt, hy nhn qua hng dn m trnh duyt tun
theo:
Nu bn xc nh mt khung trong thuc tnh ch ca mt phn t, th ti
liu c phn t xc nh s c ti vo trong khung khi phn t hot
ng.
Nu thuc tnh target khng c t, th thuc tnh target ca phn t
BASE s c s dng xc nh khung.
102
Nu c phn t v phn t BASE u khng cp n target, th ti liu
c ti vo khung c cha phn t.
Nu khng tm thy khung, trnh duyt s to mt ca s v khung mi v
ti ti liu vo khung mi .
Thuc tnh target c s dng ch tn ca khung trong ti liu nn c
m.
Khi to khung, bn phi t thuc tnh tn. Tn ny c s dng khi to lin
kt.
Sau khi bn thay i ni dung ca mt khung th nh ngha frameset ban u b
mt i.
Nu bn c nhiu lin kt ch cng mt target, bn c th t mt target mc nh
trong phn t BASE. Sau , vic xc nh thuc tnh target trong mi phn t s
khng cn thit na.
Main.htm
<HTML>
<FRAMESET COLS= 40%, 60%, >
<FRAME SRC = IMAGES.HTM NAME= Images SCROLLING=
yes >
<FRAMESET ROWS= 60, * >
<FRAME SRC= LOGO.HTM NAME= Logo SCROLLING= no
FRAMEBORDER= no>
<FRAME SRC= IMAGE1.HTM NAME= Main>
</FRAMESET>
</FRAMESET>
</HTML>
Images.htm
<HTML>
<BODY>
<BASE TARGET= Main>
<A HREF= IMAGE1.HTM><IMG SRC=
c:\merlin.gif></A><P>
<A HREF= IMAGE2.HTM><IMG SRC=
c:\circles.gif></A><P>
<A HREF= IMAGE3.HTM><IMG SRC= c:\happy.bmp></A><P>
</BODY>
</HTML>
Image1.htm
<HTML>
103
<H1><I><FONT SIZE =5 COLOR = HOTPINK>I am a
Magician<I></H1>
</FONT>
</BODY>
</HTML>
Image2.htm
<HTML>
<H1><I><FONT SIZE =3 COLOR = LIMEGREEN>Going around in
circles<I></H1>
</FONT>
</HTML>
Image3.htm
<HTML>
<H1><I><FONT SIZE = 3 COLOR = MAROON>Laughter is the
best medicine</I></H1>
</FONT>
</HTML>
Logo.htm
<HTML>
<H1><CENTER><FONT SIZE = 5 COLOR = RED>Welcome to
Aptech International</CENTER></H1>
</FONT>
</HTML>
Phn t NOFRAMES
Nu trnh duyt khng h tr khung, vi t cch l ngi pht trin, bn nn
cung cp ni dung thay th hin th.
Phn t NOFRAMES c s dng ch ni dung thay th. N ch hot ng
khi trnh duyt khng h tr khung.
<HTML>
<FRAMESET COLS= 40%, 60%>
<FRAME SRC= IMAGES.HTM NAME= Images SCROLLING=
Yes>
<FRAMESET ROWS= 60,* >
<FRAME SRC= LOGO.HTM NAME= Logo
SCROLLING= no
FRAMEBORDER= no>
<FRAME SRC= IMAGE1.HTM NAME= Main>
<NOFRAMES>
104
Khung khng c hin th. Nhp vo <A href= main.htm> c mt phin
bn khng c khung.</A>
</NOFRAMES>
</FRAMESET>
</FRAMESET>
</HTML>
Khung trong dng: phn t IFRAME
Phn t IFRAME c s dng ch khung ni hoc khung trong dng. Bn
c th to, chn mt khung vo mt khi vn bn. Khi trnh duyt khng h tr
khung th cc ni dung nm trong th IFRAME s b tr li. Khung trong dng
khng th thay i kch thc. Cc thuc tnh l:
Thuc tnh M t
Name Gn tn cho khung hin thi
Width Ch rng ca khung trong dng
Height Ch chiu cao ca khung trong dng
<HTML>
<P>
Bn ang hc v khung.
<BR>
<BR>
<IFRAME Src= scroll2.htm width= 100 height= 150
scrolling= auto frameborder= 1>
[The browser does not support frames or is currently
configured not display frames. The <A href=
scroll1.htm>related</A>]
</IFRAME>
<BR>
<P><FONT color = hotpink>The above is an inline frame
</HTML>
105
Hnh 4.7- Inline frames
Khng th thay i kch thc khung trong dng.
Bi tp 3
1. To mt ti liu vi mt ct v hai dng khung. i mu nn ca khung 3
thnh mu xanh nht. Hin th 4 nh trong ct. Chn mt lin kt hin th mt
vn bn trong khung 3 khi ngi dng nhp vo nh. Hin th tiu mc hai
trong khung 2 l Good Fun Travels and Tours. i thnh mu . Ngi dng
khng th thay i kch thc khung 2.
2.To mt trang Web vi phn thn mu xanh nht. Chn hai on vo ti liu.
Vn bn nn in nghing v c mu xanh da tri.
3. Chn mt khung trong dng gia hai on. Ni dung ca khung nn l mt
nh.
106
Tm tt
Chng ny bao qut cc phn t nhp HTML. Chng ny
cp n cc biu mu v cch to chng. Chng cng bn v
khung v cch to khung lng nhau.
107
I. in vo ch trng
a. .. . l mt phn ca ti liu c dng nhn d liu
nhp t ngi dng.
b. Phn t .. ..c dng to biu mu trn mt trang
Web.
c. Phn t .c dng xc nh loi v hnh thc ca cc
iu khin trn mt biu mu.
d. Loi nhp ...to nt nhp ho.
e. Phn t . c dng to iu khin nhp vn bn nhiu
dng.
f. Thuc tnh . ca mt phn t xc nh v tr ca mt
phn t trong th t tab.
g. .. c dng nhm cc iu khin ging nhau trn
mt biu mu.
II. Hy ch ra cc cu sau y l ng hay sai
a. Phng php GET c dng nhn d liu nhp ca ngi dng nh
mt khi d liu vo my ch.
b. Thuc tnh MAXLENGTH c dng xc nh kch thc ca iu
khin vn bn.
c. Mi iu khin radio trong nhm nn c cng tn.
d. Mt nt dng l submit ging mt phn t nhp ca kiu nt bm.
e. Phn t SELECT phi cha t nht mt phn t OPTION.
f. Mt khung c th c thay i m khng ph thuc cc khung khc
trong ti liu HTML.
g. Phn t FRAMESET phi c khai bo sau phn t BODY.
h. Thuc tnh resize c dng thay i kch thc mt khung ni tuyn.
108

CH1 4 PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CH1 4 PDF

Uploaded by

Copyright:

Available Formats

Chng 1

Gii thiu HTML - Cc Th C Bn

Hnh 1.2- Thay i thuc tnh

Hnh 1.3- S dng headings

Hnh 1.5 - S dng cc fonts

Hnh 1.6- S dng Block quotes

Hnh 1.7- Vn bn trc khi c nh dng

Thuc tnh TYPE khng c hin th trong Internet Explorer.

Hnh 1.8- S dng cc danh sch nh ngha

1.9 Chuyn i ti liu

Hnh 1.9- Lu tp tin dng HTML

-------- -------- -------- --------

Hnh 2.1- Dng tuyn tnh (Linear layout)

Hnh 2.2-Dng theo th bc Hierachical layout

Hnh 2.4- S dng Image map

Hnh 2.6- Mt bng mc lc

Hnh 2.7- Lin kt trong v ngoi

Hnh 2.8- To cc links

Hnh 2.9- S dng cc lin kt (links)

Hnh 2.10- S dng e-mail

2.4. Thit lp cc mi quan h

Hnh 3.2- Spanning rows

File .gif c background khng trong sut

Hnh 3.3- Transparency

3.6 Thm m thanh

Phn t BGSOUND khng c Netscape Navigator h tr

Hnh 4.1- Nhn nhp liu t ngi dng

Hnh 1.3- To cc Frames

Hnh 4.6- Nested frames

You might also like