Giao Trinh Thiet Ke Web

Gio trnh Thiet ke Web : Chu Vn Honh - Email: chuhoanh.dhxdgmail.
com
Gio trnh thiet ke Web

1
<HTML>
... Ton b ni ca ti liu duoc dt dy
</HTML>
<TITLE>Tiu d ca ti liu</TITLE>
Phn I
Gii thiu ngn ng Html
I. Cc liu
1.1 HTML th nh cu trc ti
Cap the ny duoc su dung de xc nhan mot ti lieu l ti lieu HTML, tc l n c su dung
cc the HTML de trnh by. Ton bo noi dung cua ti lieu duoc dat gia cap the ny.
C php:

Trnh duyet s xem cc ti lieu khong su dung the <HTML> nhu nhng tep tin van ban
bnh thung.
1.2 HEAD
The HEAD duoc dng de xc dinh phan mo dau cho ti lieu.
C php:
1.3 TITLE
Cap the ny chi c the su dung trong phan mo dau cua ti lieu, tc l n phai nam trong the
pham vi gii han boi cap the <HEAD>.
C php:

1.4 BODY
The ny duoc su dung de xc dinh phan noi dung chnh cua ti lieu - phan than (body) cua
ti lieu. Trong phan than c the cha cc thong tin dinh dang nhat dinh de dat anh nen cho
ti lieu, mu nen, mu van ban sieu lien ket, dat le cho trang ti lieu... Nhng thong tin ny
duoc dat o phan tham so cua the.
<HEAD>
... Phn m du (HEADER) ca ti liu duoc dt dy
</HEAD>

Gio trnh Thiet ke Web : Chu Vn Honh - Email: chuhoanh.dhxdgmail.com

2
<BODY>
.... phn ni dung ca ti liu duoc dt dy
</BODY>
<HTML>
<HEAD>
<TITLE>Tiu d ca ti liu</TITLE>
</HEAD>
<BODY Cc tham s nu c>
... Ni dung ca ti liu
</BODY>
</HTML>
C php:

Tren day l c php co ban cua the BODY, tuy nhien bat dau t HTML 3.2 th c nhieu
thuoc tnh duoc su dung trong the BODY. Sau day l cc thuoc tnh chnh:

BACKGROUND= t mt nh no d lm nh nn (background) cho
vn bn. Gi tri ca tham s ny (phn sau du
bng) l URL ca file nh. Nu kich thuc nh nh
hon ca s trinh duyt thi ton b mn hinh ca s
trinh duyt s duoc lt kin bng nhiu nh.
BGCOLOR= t mu nn cho trang khi hin thi. Nu c hai tham
s BACKGROUND v BGCOLOR cng c gi tri thi
trinh duyt s hin thi mu nn truc, sau d mi ti
nh ln phia trn.
TEXT= Xc dinh mu ch ca vn bn, k c cc d muc.
ALINK=,VLINK=,LINK= Xc dinh mu sc cho cc siu lin kt trong vn
bn. Tuong ng, alink (active link) l lin kt dang
duoc kich hoat - tc l khi d duoc kich chut ln;
vlink (visited link) chi lin kt d tng duoc kich hoat;
Nhu vay mot ti lieu HTML co ban c cau trc nhu sau:
II. Cc th nh dng khi
2.1. th P
The <P> duoc su dung de dinh dang mot doan van ban.
C php:
<P>Ni dung doan vn bn</P>


3
2.2. Cc th nh dng mc H1/H2/H3/H4/H5/H6
HTML ho tro 6 mc de muc. Ch rang de muc chi l cc chi dan dinh dang ve mat logic,
tc l moi trnh duyet s the hien de muc dui mot khuon dang thch hop. C the o trnh
duyet ny l font ch 14 point nhung sang trnh duyet khc l font ch 20 point. e muc
cap 1 l cao nhat v giam dan den cap 6. Thong thung van ban o de muc cap 5 hay cap 6
thung c kch thuc nho hon van ban thong thung.
Dui day l cc the dng de dinh dang van ban o dang de muc:
<H1> ... </H1> inh dang d muc cp 1
2.3 Th xung dng BR
The ny khong c the ket thc tuong ng (</BR>), n c tc dung chuyen sang dng mi.
Luu , noi dung van ban trong ti lieu HTML s duoc trnh duyet Web the hien lien tuc,
cc khoang trang lien nhau, cc k tu tab, k tu xuong dng deu duoc coi nhu mot khoang
trang. e xuong dng trong ti lieu, ban phai su dung the <BR>
2.4 Th PRE
e gii han doan van ban d duoc dinh dang san ban c the su dung the <PRE>. Van ban
o gia hai the ny s duoc the hien giong het nhu khi chng duoc dnh vo, v du dau
xuong dng trong doan van ban gii han boi the <PRE> s c nghia chuyen sang dng
mi (trnh duyet s khong coi chng nhu dau cch)
C php:

III. Cc th nh dng danh sch
3.1. Danh sch thng th ng
C php:
<PRE>Vn bn d duoc dinh dang</PRE>
<UL>
<LI> Muc th nht
<LI> Muc th hai
</UL>

4
C 4 kieu danh sch:
` Danh sch khong sap xep ( hay khong dnh so) <UL>
Danh sch c sap xep (hay c dnh so) <OL>, moi muc trong da nh sch
duoc sap xep th tu.
Danh sch thuc don <MENU>
Danh sch phan cap <DIR>
Vi nhieu trnh duyet, danh sch phan cap v danh sch thuc don giong danh sch khong
dnh so, c the dng lan vi nhau. Vi the OL ta c c php sau:
trong d:
TYPE =1 Cc muc duoc sap xep theo th tu 1, 2, 3...
=a Cc muc duoc sap xep theo th tu a, b, c...
=A Cc muc duoc sap xep theo th tu A, B, C...
=i Cc muc duoc sap xep theo th tu i, ii, iii...
=/ Cc muc duoc sap xep theo th tu I, II, III...
Ngoi ra cn thuoc tnh START= xc dinh gi tri khoi dau cho danh sch.
The < LI > c thuoc tnh TYPE= xc dinh k hieu dau dng (bullet) dng truc moi muc
trong danh sch. Thuoc tnh ny c the nhan cc gi tri : disc (cham trn dam): circle (vng
trn): square (hnh vuong).
IV. Cc th nh dng k t
4.1. Cc th nh dng in k t
Sau day l cc the duoc su dung de quy dinh cc thuoc tnh nhu in nghieng, in dam, gach
chan... cho cc k tu, van ban khi duoc the hien tren trnh duyet.

<B> ... </B>
<STRONG> ... </STRONG>
n ch dm
<I> ... </I>
<EM> ... </EM>
n ch nghing
<OL TYPE=1/a/A/i/I>
<LI>Muc thu nhat
<LI>Muc thu hai
<LI>Muc thu ba
</OL>

5
<U> ... </U>
n ch gach chn
<DFN> nh du doan vn bn gia hai th ny l
dinh ngha ca mt t. Chng thung duoc in
nghing hoc th hin qua mt kiu dc bit
no d.
<S> ... </S>
<STRKE> ... </STRIKE>
n ch bi gach ngang.
<BIG> ... </BIG>
n ch ln hon binh thung bng cch tng
kich thuc font hin thi ln mt. Vic s dung
cc th <BIG>lng nhau tao ra hiu ng ch
tng dn. Tuy nhin di vi mi trinh duyt c
gii han v kich thuc di vi mi font ch,
vuot qu gii han ny, cc th <BIG> s khng
c y ngha.
<SMALL> ... </SMALL>
n ch nh hon binh thung bng cch gim
kich thuc font hin thi di mt. Vic s dung
cc th <SMALL>lng nhau tao ra hiu ng
ch gim dn. Tuy nhin di vi mi trinh
duyt c gii han v kich thuc di vi mi font
ch, vuot qu gii han ny, cc th <SMALL>
s khng c y ngha.
<SUP> ... </SUP>
inh dang chi s trn (SuperScript)
<SUB> ... </SUB>
inh dang chi s dui (SubScript)
<BASEFONT>
inh ngha kich thuc font ch duoc s dung
cho dn ht vn bn. Th ny chi c mt tham
s size= xc dinh c ch. Th <BASEFONT>
khng c th kt thc.
<FONT> ... </FONT>
Chon kiu ch hin thi. Trong th ny c th
dt hai tham s size= hoc color= xc dinh c
ch v mu sc doan vn bn nm gia hai
th. Kich thuc c th l tuyt di (nhn gi tri
t 1 dn 7) hoc tuong di (+2,-4...) so vi font
ch hin tai.

4.2. Cn l vn bn trong trang Web
Trong trnh by trang Web cua mnh cc ban luon phai ch den viec can le cc van ban
de trang Web c duoc mot bo cuc dep. Mot so cc the dinh dang nhu P, Hn, IMG... deu c
tham so ALIGN cho php ban can le cc van ban nam trong pham vi gii han boi cua cc
the d.
Cc gi tri cho tham so ALIGN:
LEFT Cn l tri
CENTER Cn gia trang
RGHT Cn l phi

6

Ngoi ra, chng ta c the su dung the CENTER de can gia trang mot khoi van ban.
C php:

4.3. Cc k t c bit
K tu & duoc su dung de chi chuoi k tu di sau duoc xem l mot thuc the duy nhat. K tu :
duoc su dung de tch cc k tu trong mot t.
K tu M ASCII Ten chuoi
< &#060 &lt
> &#062 &gt
& &#038 &amp
4.4. S dng mu sc trong thit k cc trang Web
Mot mu duoc tong hop t ba thnh phan mu chnh, d l: o (Red), Xanh l cay (Green),
Xanh nuc bien (Blue). Trong HTML mot gi tri mu l mot so nguyen dang hexa (he dem
co so 16) c dinh dang nhu sau:
#RRGGBB
trong d:
RR - l gi tri mu o.
GG - l gi tri mu Xanh l cay.
BB - l gi tri mu Xanh nuc bien.
Mu sac c the duoc xc dinh qua thuoc tnh bgcolor= hay color=. Sau dau bang c the l
gi tri RGB hay ten tieng Anh cua mu. Vi ten tieng Anh, ta chi c the chi ra 16 mu
trong khi vi gi tri RGB ta c the chi ti 256 mu.
Sau day l mot so gi tri mu co ban:

Mu sac Gi tri Ten tieng Anh
o
o sam
Xanh l cay
Xanh nhat
Xanh nuc bien
#FF0000
#8B0000
#00FF00
#90EE90
#0000FF
RED
DARKRED
GREEN
LIGHTGREEN
BLUE
<CENTER>Vn bn s duoc cn gia trang</CENTER>

7
Vng
Vng nhat
Trang
en
Xm
Nau
Tm
Tm nhat
Hong
Da cam
Mu dong phuc hai quan

#FFFF00
#FFFFE0
#FFFFFF
#000000
#808080
#A52A2A
#FF00FF
#EE82EE
#FFC0CB
#FFA500
#000080
#4169E1
#7FFFD4
YELLOW
LIGHTYELLOW
WHITE
BLACK
GRAY
BROWN
MAGENTA
VIOLET
PINK
ORANGE
NAVY
ROYALBLUE
AQUAMARINE

C php:

<BODY
LINK = color
ALINK = color
VLINK = color
BACKGROUND = url
BGCOLOR = color
TEXT = color
TOPMARGIN = pixels
RIGHTMARGIN = pixels
LEFTMARGIN = pixels
>
.... phn ni dung ca ti liu duoc dt dy

</BODY>

Sau day l nghia cc tham so cua the BODY:

Cc tham s y ngha
LNK Chi dinh mu ca vn bn siu lin kt
ALNK Chi dinh mu ca vn bn siu lin kt dang dang chon
VLNK Chi dinh mu ca vn bn siu lin kt d tng m

8
BACKGROUND Chi dinh dia chi ca nh dng lm nn
BGCOLOR Chi dinh mu nn
TEXT Chi dinh mu ca vn bn trong ti liu
SCROLL YES/NO - Xc dinh c hay khng thanh cun
TOPMARGN L trn
RGHTMARGN L phi
LEFTMARGN L tri

4.5. Chn kiu ch cho vn bn
C php:
<FONT
FACE = font-name
COLOR = color
SIZE = n >
...
</FONT>
4.6. Khi nim vn bn siu lin kt
Van ban sieu lien ket hay cn goi l sieu van ban l mot t, mot cum t hay mot cau tren
trang Web duoc dng de lien ket ti mot trang Web khc. Sieu van ban l moi trung trong
d cha cc lien ket (link) cua cc thong tin. Do WWW cau thnh t nhieu he thong khc
nhau, can phai c mot quy tac dat ten thong nhat cho tat ca cc van ban tren Web. Quy tac
dat ten d l URL (Universal Resource Locator).

Cc thnh phan cua URL duoc minh hoa o hnh tren.
D|ch v: L thnh phan bat buoc cua URL. N xc dinh cch thc trnh duyet cua my
khch lien lac vi my phuc vu nhu the no de nhan d lieu. C nhieu dich vu nhu http,
wais, ftp, gopher, telnet.
http://seIab.vnuh.edu.vn:8080 /~dir1/dir2/dir3/index.HTML#chapter001
Dich vu
Ten he thong
Cong
ung dan
Ten file
V du ve URL
Cc tham so,
bien, truy
van

9
Tn h thng : L thnh phan bat buoc cua URL. C the l ten mien day du cua my
phuc vu hoac chi l mot phan ten day du trung hop ny xay ra khi van ban duoc yeu cau
van nam tren mien cua ban. Tuy nhien nen su dung dung dan day du.
Cng : Khong l thnh phan bat buoc cua URL. Cong l dia chi socket cua mang dnh
cho mot giao thc cu the. Giao thc http ngam dinh noi vi cong 8080.
ung dn thu mc : L thnh phan bat buoc cua URL. Phai chi ra dung dan ti file
yeu cau khi ket noi vi bat ky he thong no. C the dung dan trong URL khc vi dung
dan thuc su trong he thong my phuc vu. Tuy nhien c the rt gon dung dan bang cch dat
biet danh (alias). Cc thu muc trong dung dan cch nhau boi dau gach cho (/).
Tn fiIe : Khong l thnh phan bat buoc cua URL. Thong thung my phuc vu duoc cau
hnh sao cho neu khong chi ra ten file th s tra ve file ngam dinh tren thu muc duoc yeu
cau. File ny thung c ten l index.html, index.htm, default.html hay default.htm. Neu
cng khong c cc file ny th thung ket qua tra ve l danh sch liet ke cc file hay thu
muc con trong thu muc duoc yeu cau
Cc tham s : Khong l thnh phan bat buoc cua URL. Neu URL l yeu cau tm kiem
tren mot co so d lieu th truy van s gan vo URL, d chnh l doan m dang sau dau
cham hoi (?).URL cng c the tra lai thong tin duoc thu thap t form. Trong trung hop
dau thang (#) xuat hien doan m dang sau l ten cua mot vi tr (location) trong file duoc chi
ra.
e tao ra mot sieu van ban chng ta su dung the <A>.
C php:
<A
HREF = url
NAME = name
TABNDEX = n
TITLE = title
TARGET = _blank / _self
>
... sieu vn ban
</A>

nghia cc tham so:

HREF ia chi ca trang Web duoc lin kt, l mt URL no d.
NAME t tn cho vi tri dt th.
TABLEINDEX Th tu di chuyn khi n phim Tab
TITLE Vn bn hin thi khi di chut trn siu lin kt.
TARGET M trang Web duoc lin trong mt ca s mi (_blank) hoc

10
trong ca s hin tai (_self), trong mt frame (tn frame).
4.7. a ch t ng i
URL duoc trnh by o tren l URL tuyet doi. Ngoi ra cn c URL tuong doi hay cn goi
l URL khong day du. ia chi tuong doi su dung su khc biet tuong doi gia van ban hien
thi v van ban can tham chieu ti. Cc thnh phan trong URL duoc ngan cch bang k tu
ngan cch (k tu gach cho /). e tao ra URL tuong doi, dau tien phai su dung k tu ngan
cch. URL day du hien tai s duoc su dung de tao nen URL day du mi. Nguyen tac l cc
thnh phan ben tri dau ngan cch cua URL hien tai duoc gi nguyen, cc thnh phan ben
phai duoc thay the bang thnh phan URL tuong doi. Ch rang trnh duyet khong gui URL
tuong doi, n bo sung vo URL co so d xc dinh truc thnh phan URL tuong doi xc
dinh sau thuoc tnh href=. K tu dau tien sau dau bang s xc dinh cc thnh phan no cua
URL hien tai s tham gia de tao nen URL mi.
V du, neu URL day du l: http://it-department.vnuh.edu.vn/HTML/index.htm th:
Du hai chm (:) chi dich vu gi nguyen nhung thay doi phan cn lai. V du
://www.fpt.com/ s tai trang chu cua my phuc vu www.fpt.com vi cng dich vu
http.
Du gach cho (/) chi dich vu v my phuc vu gi nguyen nhung ton bo dung
dan thay doi. V du /Javascript/index.htm s tai file index.htm cua thu muc
Javascript tren my phuc vu www.it-department.vnuh.edu.vn.
Khng c du phn cch chi c ten file l thay doi. V du index1.htm s tai file
index1.htm o trong thu muc HTML cua my phuc vu www.it-
department.vnuh.edu.vn.
Du thng (#): chi dich vu, my phuc vu, dung dan v ca ten file gi nguyen, chi
thay doi vi tr trong file.
Do dung dan duoc xem l don vi doc lap nen c the su dung phuong php dung dan
tuong doi nhu trong UNIX hay MS-DOS (tc l . chi thu muc hien tai cn .. chi thu muc
cha cua thu muc hien tai).
URL co so c the duoc xc dinh bang the <BASE>.
4.8. Kt ni mailto
Neu dat thuoc tnh href= cua the <a> gi tri mailto:addressdomain th khi kch hoat ket
noi s kch hoat chc nang thu dien tu cua trnh duyet.
<ADDRESS>
Trang WEB ny duoc
<A href=mailto:webmaster@vnuh.edu.vn >
WEBMASTER
<\A> bo tri

11
<\ADDRESS>
4.9. V mt ng thng nm ngang
C php:
<HR
ALIGN = LEFT / CENTER / RGHT
COLOR = color
NOSHADE
SIZE = n
WIDTH = width
>

nghia cc tham so:

ALIGN Cn l (cn tri, cn phi, cn gia)
COLOR t mu cho dung thng
NOSHADE Khng c bng
SIZE dy ca dung thng
WIDTH Chiu di (tinh theo pixel hoc % ca b rng ca s
trinh duyt).

The ny giong nhu the BR, n cng khong c the ket thc tuong ng.
V. Cc th chn m thanh, hnh nh
5.1. Gii thiu
Lien ket vi file da phuong tien cng tuong tu nhu lien ket bnh thung. Tuy vay phai dat
ten dng cho file da phuong tien. Phan mo rong cua file phai cho biet kieu cua file.
"#$% &'() *+
,-).
/0 12
Image/GIF .gif Vit tt ca Graphics nterchange Format. Khun
dang ny xut hin khi moi ngui c nhu cu trao
di nh trn nhiu h thng khc nhau. N duoc s
dung trn tt c cc h thng h tro giao din d
hoa. inh dang GF l dinh dang chun cho moi
trinh duyt WEB. Nhuoc dim ca n l chi th hin
duoc 256 mu.
M rng ca chun ny l GF89, duoc thm nhiu
chc nng cho cc ng dung dc bit nhu lm nh

12
nn trong sut - tc l nh c th ni bng cch lm
mu nn ging vi mu nn ca trinh duyt.
Image/JPEG .jpeg Vit tt ca Joint Photographic Expert Group. L
khun dang nh khc nhung c thm kh nng
nn.Uu dim ni bt ca khun dang ny l luu tr
duoc hng triu mu v d nn cao nn kich thuc
file nh nh hon v thi gian download nhanh hon.
N l co s cho khun dang MPEG. Tt c cc trinh
duyt du c kh nng xem nh JPEG.
Image/TIFF .tiff Vit tt ca Tagged mage File Format. uoc
Microsoft thit k d qut nh t my qut cng nhu
tao cc n phm.
Text/HTML .HTML,
.htm

PostScript .eps, .ps uoc tao ra d hin thi v in cc vn bn c cht
luong cao.
Adobe
Acrobat
.pdf Vit tt ca Portable Document Format. Acrobat
cng s dung cc siu lin kt ngay trong vn bn
cng ging nhu HTML. T phin bn 2.0, cc sn
phm ca Acrobat cho php lin kt gia nhiu vn
bn. Uu dim ln nht ca n l kh nng
WYSSYG.
Video/MPEG .mpeg Vit tt ca Motion Picture Expert Group, l dinh
dang dnh cho cc loai phim (video). y l khun
dang thng dung nht dnh cho phim trn WEB.
Video/AVI .avi L khun dnag phim do Microsoft dua ra.
Video/QuickTi
me
.mov Do Apple Computer dua ra, chun video ny duoc
cho l c nhiu uu dim hon MPEG v AV. Mc d
d duoc tich hop vo nhiu trinh duyt nhung vn
chua ph bin bng hai loai dinh dang trn.
Sound/AU .au
Sound/MIDI .mid L khun dang dnh cho m nhac din t ht sc
thng dung duoc nhiu trinh duyt trn cc h thng
khc nhau h tro. File Midi duoc tng hop s ho
truc tip t my tinh.
Sound/ReaIA
udio
.ram inh dang audio theo dng. Mt bt tin khi s dung
cc dinh dang khc l file m thanh thung c kich
thuc ln - do vy thi gian ti xung lu, Tri lai
audio dng bt du choi ngay khi ti duoc mt phn
file trong khi vn ti v cc phn khc.Mc d file
theo dinh dang ny khng nh hon so vi cc dinh
dang khc song chinh kh nng dng d khin dinh
dang ny ph hop vi kh nng choi ngay lp tc.
VRML .vrmI Vit tt ca Virtual Reality Modeling Language. Cc
file theo dinh dang ny cng ging nhu HTML. Tuy
nhin do trinh duyt c th hin thi duoc ca s 3
chiu nn ngui xem c th cm nhn duoc cm
gic ba chiu.

13
5.2. a m thanh vo mt ti liu HTML
C php:
<BGSOUND
SRC = url
LOOP = n
>

The ny khong c the ket thc tuong ng (</BGSOUND>). e choi lap lai vo han can chi
dinh LOOP = -1 hoac LOOP = INFINITE. The BGSOUND phai duoc dat trong phan
mo dau (tc l nam trong cap the HEAD).
5.3. Chn mt hnh nh, mt on video vo ti liu HTML
e chn mot file anh (.jpg, .gif, .bmp) hoac video (.mpg, .avi) vo ti lieu HTML, ban c
the su dung the IMG.
C php:
<IMG
ALIGN = TOP/MDDLE/BOTTOM
ALT = text
BORDER = n
SRC = url
WIDTH = width
HEIGHT = height
HSPACE = vspace
VSPACE = hspace
TITLE = title
DYNSRC = url
START = FLEOPEN/MOUSEOVER
LOOP = n
>

Trong d:
ALIGN = TOP/ MDDLE/
BOTTOM/ LEFT/ RGHT
Cn hng vn bn bao quanh nh
ALT = text Chi dinh vn bn s duoc hin thi nu chc nng
show picture ca browser bi tt di hay hin thi
thay th cho nh trn nhng trinh duyt khng c
kh nng hin thi d hoa. Vn bn ny cn duoc
goi l nhn ca nh. i vi trinh duyt c kh
nng h tro d hoa, dng vn bn ny s hin ln

14
khi di chut qua nh hay duoc hin thi trong vng
ca nh nu nh chua duoc ti v ht. Ch y phi
dt vn bn trong hai du nhy kp nu triong
vn bn cha du cch hay cc ky tu dc bit -
trong trung hop nguoc lai c th b du nhy
kp.
BORDER = n t kich thuc dung vin duoc v quanh nh
(tinh theo pixel).
SRC = url ia chi ca file nh cn chn vo ti liu.
WIDTH/HEIGHT Chi dinh kich thuc ca nh duoc hin thi.
HSPACE/VSPACE Chi dinh khong trng xung quanh hinh nh (tinh
theo pixel) theo bn phia trn, dui, tri, phi.
TITLE = title Vn bn s hin thi khi con chut tr trn nh
DYNSRC = url ia chi ca file video.
START =
FLEOPEN/MOUSEOVER
Chi dinh file video s duoc choi khi ti liu duoc
m hay khi tr con chut vo n. C th kt hop
c hai gi tri ny nhung phi phn cch chng bi
du phy.
LOOP = n/NFNTE Chi dinh s ln choi. Nu LOOP = NFNTE thi
file video s duoc choi v han ln.
VI. Cc th nh dng bng biu
Sau day l cc the tao bang chnh:

<TABLE> ... </TABLE> inh ngha mt bng
<TR> ... </TR> inh ngha mt hng trong bng
<TD> ... </TD> inh ngha mt trong hng
<TH> ... </TH> inh ngha cha tiu d ca ct
<CAPTION> ... </CAPTION> Tiu d ca bng

C php:
<TABLE
BORDER = n
BORDERCOLOR = color
BORDERCOLORDARK = color
BORDERCOLORLIGHT = color
BACKGROUND = url
BGCOLOR = color
CELLSPACING = spacing
CELLPADDING = pading

15
>
<CAPTION>Tiu d ca bng biu</CAPTION>
... inh ngha cc dng
<TR
ALIGN = LEFT/CENTER/RGHT
VALIGN = TOP/MDDLE/BOTTOM>
... inh ngha cc trong dng
<TD
VALIGN = TOP / MDDLE / BOTTOM
BORDERCOLOR = color
BORDERCOLORDARK = color
BORDERCOLORLIGHT = color
BACKBROUND = url
BGCOLOR = color
COLSPAN = n
ROWSPAN = n
>
... Ni dung ca
</TD>
...
</TR>
...
</TABLE>

nghia cc tham so:
ALIGN / VALIGN Cn l cho bng v ni dung trong mi .
BORDER Kich thuc dung k chia trong bng, duoc do theo
pixel. Gi tri 0 c ngha l khng xc dinh l, gia cc
trong bng chi c mt khong trng nh d phn
bit. Nu chi d border thi ngm dinh border=1. Vi
nhng bng c cu trc phc tap, nn dt l d ngui
xem c th phn bit r cc dng v ct.
BORDERCOLOR Mu dung k
BORDERCOLORDARK
BORDERCOLORLIGHT
Mu phia ti v phia sng cho dung k ni.
BACKGROUND ia chi ti tp nh dng lm nn cho bng
BGCOLOR Mu nn
CELLSPACING Khong cch gia cc trong bng
CELLPADDING Khong cch gia ni dung v dung k trong mi
ca bng.

16
COLSPAN Chi dinh s ko di trong bao nhiu ct
ROWSPAN Chi dinh s ko di trong bao nhiu hng

VII. FORM
7.1. HTML Forms
Cc HTML Form c the c cc hop van ban, hop danh sch lua chon, nt bam, nt chon...
7.2. To Form
e tao ra mot form trong ti lieu HTML, chng ta su dung the FORM vi c php nhu sau:
C php:
<FORM
ACTION = ulr
METHOD = GET | POST
NAME = name
TARGET = frame_name | _blank | _self
>

<INPUT ...>
<INPUT ...>

</FORM>

Trong d

ACTION ia chi s gi d liu ti khi form duoc submit (c th l
dia chi ti mt chuong trinh CG, mt trang ASP...).
METHOD Phuong thc gi d liu.
NAME Tn ca form.
TARGET Chi dinh ca s s hin thi kt qu sau khi gi d liu t
form dn server.

at cc doi tuong dieu khien (nhu hop van ban, o kiem tra, nt bam...) vo trang Web

C php the INPUT:
<INPUT

17
ALIGN = LEFT | CENTER | RGHT
TYPE = BUTTON | CHECKBOX | FLE | MAGE | PASSWORD |
RADO | RESET | SUBMT | TEXT
VALUE = value
>

7.3. To mt danh sch la chn
C php:

<SELECT NAME="tn danh sch" SIZE="chiu cao">
<OPTION VALUE=value1 SELECTED> Tn muc chon th nht
<OPTION VALUE=value2> Tn muc chon th hai

</SELECT>
7.4. To hp son tho vn bn
C php:

<TEXTAREA
COLS=s ct
ROWS=s hng
NAME=tn
>
Vn bn ban u
</TEXTAREA>


18
Phn II
thit k web s dng ms frontpage
I. CC THAO TC C B!N

1. Cc thao tc chnh khi so#n th&o m(t trang web
To m#i m&t trang web: Ch)n ch*c n,ng File/New/Page /Normal Page hay
ch)n icon New trn Toolbar.
L+u trang web: Ch)n ch*c n,ng File/Save hay ch)n icon Save trn Toolbar. .0
l+u trang web d+#i dng m&t tn khc ch)n ch*c n,ng File/Save As
Xem tr+#c hi0n th2 c4a trang web 7ang thi8t k8: Ch)n ch*c n,ng File/Preview
in Browser. Lc ny c9a s: trnh duy;t Internet Explorer (IE) s< hi0n th2 trang
web m chng ta 7ang son th>o. Nn l+u trang web tr+#c khi ch)n ch*c n,ng
ny.
C9a s: mn hnh son th>o trang web cung c?p 3 cch hi0u (view) khc nhau
v@ 1 trang web.
o N8u bn ch)n Normal view, bn c th0 bin tAp trang web d+#i dng
WYSIWYG. V dB bn c th0 g v,n b>n vo, thay 7:i mu sCc, kch
th+#c chD, b
o N8u bn ch)n HTML view, bn s< th?y 7+Ec cc m HTML t+$ng *ng v#i
cch trnh by c4a trang web c4a bn. V dB, n8u trong Normal view bn
chn vo m&t table th trong HTML view, bn s< th?y cc tag t+$ng *ng
nh+ sau:
<table border="1" width="100%">
<tr><td width="100%"> </td></tr>
</table>
o N8u bn ch)n Preview view, t+$ng tF v#i ch*c n,ng Preview in Browser
2. T#o cc thnh ph+n c,a trang web\
2.1. Th.i gian c1p nh1t (Time stamp)
Ch)n Insert/Date and Time.
Ch)n 72nh dng ngy thng v thGi gian ph hEp v#i nhu cIu c4a bn
2.2. 24.ng k5 ngang (Horizontal line)
Ch)n Insert/Horizotal line.
.Jt cc thu&c tnh cho 7+Gng kK ngang bLng cch double click chu&t ln n.
Sau 7 ch)n cc thng sM v@ Width, Height, Color, Alignment
2.3. List
Ch)n Format/Bullets and Numbering.
Sau khi h&p h&i thoi xu?t hi;n, bn hy ch)n cc dng bullet v numbering
t+$ng *ng.
.0 thay 7:i cc thu&c tnh c4a bullet nh+ mu sCc, ki0u chD, , ta ch)n
Format/Bullets and Numbering/Style

19
Ngoi ra, ta cn c th0 ch)n hnh >nh 70 thay cho cc ki 0u bullet thng th+Gng.
.0 thay 7:i, ta ch)n Format/Bullets and Numbering/Picture bullets, rNi ch)n
>nh dng 70 lm bullet
.0 bO 72nh dng bullets, ta ch)n Format/Bullets and Numbering/Plain Bullets.
2.4. Tables
Ng+Gi ta th+Gng dng table 70:
o Hi0n th2 cc thng tin c dng dng/c&t, v dB nh+ b>ng thGi kha bi0u,
thng tin s>n phPm, ..
o Trnh by (layout) cc v,n b>n(text) v cc >nh 7N h)a(graphics).
.0 to m&t b>ng, ta c th0 dng m&t trong hai cch:
o Ch)n Table/Insert Table. Khi h&p h&i thoi to b>ng hi;n ra, bn ph>i
cung c?p cc thng tin chi ti8t cho vi;c to b>ng, v dB nh+ sM dng, sM
c&t, kch th+#c, ...
o Ch)n Table/Draw Table. V#i ch*c n,ng ny, bn s< dng bt v< 70 to
cc dng, c&t
.0 khng hi;n (hide) border c4a b>ng, ta click ph>i chu&t ln table, ch)n Table
Properties/Border/Sizes bLng 0.
.0 tch m&t cell hay tr&n nhi@u cell li, ta ch)n Tabe rNi ch)n Split /Merge
Cells.
.0 thm hoJc xa cc cell, ta ch)n Table rNi ch)n Insert/Delete Cells.
2.5. M(t s7 hi8u 9ng ;<c bi8t
Chuy0n trang (Page transition): Ch)n Format/Page Transition
Hi;u *ng chD chuy0n 7&ng theo chi@u ngang (Marquees): Ch)n
Insert/Component/Marquee. Sau khi h&p thoi hi;n ra, bn g vo dng chD
cIn chuy0n 7&ng v 7Jt cc thu&c tnh khc nh+ mu sCc, font chD,
Thm hi;u *ng font chD cho cc hyperlink: Ch)n Format/Background, check
vo Enable hyperlink rollover effects. Sau 7 bn c th0 ch)n cc mu theo
muMn.
2.6. Chn &nh
Ch)n ch*c n,ng Insert/Picture/From File.
.Jt thu&c tnh v kch th+#c c4a >nh, click ph>i chu&t ln >nh, rNi ch)n Picture
Properties.
.0 to cc hotspot hyperlink, ta ch)n hnh v< t+$ng *ng (hnh chD nhAt,
ellipse, ) trn thanh toolbar pictures. Ch)n vng trn >nh, rNi 7i@n thng tin
c4a hyperlink vo
2.7. Chn hyperlink
Ch)n ch*c n,ng Insert/Hyperlink.
Sau khi h&p thoi hi;n ra, g vo hyperlink t+$ng *ng. C 3 dng:
o .2a chQ Internet, c dng: http:// V dB: http:// www.yahoo.com
o Lin k8t t#i m&t trang trong site, c dng: /th+ mBc/tn tAp tin. V dB:
../images/shopping.htm
o Lin k8t ngay chnh trong trang, 7Jt bLng bookmark.
3. 2>nh d#ng trang
Click ph>i chu&t ln trang, ch)n Page Properties.

20
.0 7Jt mu n@n cho trang, ch)n Background/Colors/Background
.0 7,t >nh n@n cho trang, ch)n Background/Formatting/Background picture.
.0 7Jt cc thng sM v@ mu sCc cho hyperlink, ch)n
Background/Colors/Hyperlink
.0 7Jt tiu 7@ cho trang ch)n General/Title.


21
II. TH@C HNH

1. T#o trang web cho nhm.

KhSi 7&ng Microsoft Front Page 2000.
Son trang web c nhn c4a nhm 7Jt tn l InfoGroup<n>.htm (v dB
nhm 1 s< l?y tn l InfoGroup1.htm). Cc thng tin chnh c4a cc thnh
vin trong nhm bao gNm: H) v tn, Cng vi;c v ch*c vB hi;n nay, .2a chQ
lin lc, .i;n thoi, Fax, Email, Mobile Phone, ... Ngoi ra cc nhm c th0 b:
sung cc thng tin khc.
Upload trang web 7 son ln website.
Th9 truy cAp trang web 7 t>i ln.

2. Tham kh&o cc site thng tin c,a Vi8t Nam
http://vnexpress.net/
http://www.vnn.vn/.
http://www.vdc.com.vn
3. Tham kh&o cc site bn hng nBi tiCng
http://shopping.yahoo.com
http://www.amazon.com
4. Tham kh&o cc site gi&i tr
http://greetings.yahoo.com
http://www.vnn.vn/ecards/
http://www.fpt.vn/Postcard/main.asp
http://www.geraldstevens.com/
http://www.1800flowers.com/
5. Tham kh&o cc site vD lao ;(ng vi8c lm t#i VN
http://203.162.5.43/ld2000/
http://www.vietname-business.com/jobnld/
http://www.jobsonline.saigonnet.vn/
6. T#o trang web ch9a cc hyperlink dng ;E truy c1p nhanh
To trang web 7Jt tn l Links.htm ch*a cc hyperlink 7 7@ cAp S trn. B:
sung thm cc hyperlink v cc phn loi khc m cc anh ch2 7 bi8t.
Upload ln website v ki0m tra li.
7. T#o trang HomePage
To trang web HomePage 7Jt tn l Default.htm gi#i thi;u v@ nhm v cc
cng vi;c m nhm 7ang tri0n khai.
K8t nMi hai trang 7 to vo HomePage.
Upload ln website v ki0m tra li.
8. ChFn ch, ;D ;E thiCt kC website
Website v@ d2ch vB vi;c lm.
Website v@ d2ch vB nh 7?t (http://www.nhadat.com).
Website bo 7i;n t9 (http://vnexpress.net )

22
Website tr+Gng h)c.
Website bn hng (c9a hng, siu th2 >o trn Internet)
Website d2ch vB gi>i tr nh+ ECards, .i;n hoa, ...
Cc ch4 7@ khc...

23
III. 2GNG K WEBSITE MIHN PH TRN INTERNET
1. Vo 72a chQ http://www.freeservers.com 70 7,ng k website miTn ph v#i 72a chQ
truy cAp c dng http://<yourname>.freeservers.com

2. G vo 72a chQ m bn dF 72nh 7,ng k ti yourname. Sau 7 click Go. Mn hnh
ti8p theo s< hi;n ra, bn ch)n mBc cuMi cng 100% Free Hosting Option v click
vo SignUp


24
3. Sau 7 bn hy 7i@n vo cc thng tin lin quan cIn thi8t nh+ H) tn, mAt khPu,
email, CuMi cng g vo ARTK 70 chCc rLng bn 7 7Nng v#i cc qui 72nh c4a
FreeServers khi cung c?p d2ch vB miTn ph ny.

4. N8u 7,ng k thnh cng, mn hnh sau s< hi;n ra 70 cung c?p cho bn m&t sM lFa
ch)n khi xy dFng website c4a mnh.


25


26
IV.THIJT KJ MKT SM WEBSITE MNU

1. ThiCt kC website theo mOu sau (http://greetings.yahoo.com)

2. ThiCt kC website theo mOu sau (http://www.flowers.com)

27

3. ThiCt kC website theo mOu sau (http://shopping.yahoo.com)


28
4. ThiCt kC website theo mOu sau (http://www.is-edu.hcmuns.edu.vn)


29
5. ThiCt kC website theo mOu sau (http://vnexpress.net)

6. ThiCt kC website theo mOu sau (http://www.codeproject.com)


30


31
7. ThiCt kC website theo mOu sau (http://www.bttvn.com )

2E tham kh&o cch thiCt kC cc trang web trn, hy:
- T>i v@ my bLng cch ch)n ch*c n,ng Save c4a IE.
- Dng MS Front Page 70 mS tAp tin 7 l+u ln
- Chuy0n qua li giDa cc mn hnh Normal View v HMTL View 70 bi8t cch thi8t
k8
VPi mQi trang web ; xem hy ch cc vRn ;D sau:
- Cch bM tr cc b>ng (table)
- Cch s9 dBng font chD
- Cch chn vo cc hnh >nh 70 trang tr
- Cch 72nh nghUa cc thu&c tnh nh+ mu chD, mu n@n, ...
- PhIn tUnh (khng thay 7:i) mVi khi click vo cc hyperlink chuy0n qua m&t n&i
dung m#i
TS cc trang web trn, hy tT thiCt kC cc trang cho website c,a nhm.


32

Phn I
Gii thiu ngn ng Html ....................................................................... 1
I. Cc th nh cu trc ti liu........................................................... 1
1.1 HTML................................................................................................................ 1
1.2 HEAD................................................................................................................ 1
1.3 TITLE................................................................................................................ 1
1.4 BODY................................................................................................................ 1
II. Cc th nh dng khi ........................................................................ 2
2.1. the P.................................................................................................................. 2
2.2. Cc the dinh dang de muc H1/H2/H3/H4/H5/H6 ............................................... 3
2.3 The xuong dng BR............................................................................................ 3
2.4 The PRE............................................................................................................. 3
III. Cc th nh dng danh sch........................................................... 3
3.1. Danh sch thong thung .................................................................................... 3
IV. Cc th nh dng k t..................................................................... 4
4.1. Cc the dinh dang in k tu ................................................................................. 4
4.2. Can le van ban trong trang Web......................................................................... 5
4.3. Cc k tu dac biet .............................................................................................. 6
4.4. Su dung mu sac trong thiet ke cc trang Web ................................................... 6
4.5. Chon kieu ch cho van ban ................................................................................ 8
4.6. Khi niem van ban sieu lien ket ......................................................................... 8
4.7. ia chi tuong doi ............................................................................................. 10
4.8. Ket noi mailto.................................................................................................. 10
4.9. V mot dung thang nam ngang ...................................................................... 11
V. Cc th chn m thanh, hnh nh .................................................. 11
5.1. Gii thieu ........................................................................................................ 11
5.2. ua am thanh vo mot ti lieu HTML.............................................................. 13
5.3. Chn mot hnh anh, mot doan video vo ti lieu HTML................................... 13
VI. Cc th nh dng bng biu......................................................... 14
VII. FORM........................................................................................................ 16

33
7.1. HTML Forms .................................................................................................. 16
7.2. Tao Form......................................................................................................... 16
7.3. Tao mot danh sch lua chon............................................................................. 1 7
7.4. Tao hop soan thao van ban............................................................................... 1 7
Phn II
thit k web s dng ms frontpage ................................................ 18

Giao Trinh Thiet Ke Web

Uploaded by

Document Information

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

Giao Trinh Thiet Ke Web

Uploaded by

Copyright:

Available Formats

Gio trnh Thiet ke Web : Chu Vn Honh - Email: chuhoanh.dhxdgmail.

You might also like