PhÇn I
Giíi thiÖu ng«n ng÷ Html
I. C¸c liÖu
1.1 HTML thÎ ®̃nh cÊu tróc tµi
CÆp thÎ nµy ®îc sö dông ®Ó x¸c nhËn mét tµi liÖu lµ tµi liÖu HTML, tøc lµ nă că sö dông c¸c thÎ HTML ®Ó tr×nh bµy. Toµn bé néi dung cña tµi liÖu ®îc ®Æt gi÷a cÆp thÎ nµy.
Có ph¸p: <HTML>
... Toµn bé néi cña tµi liÖu ®îc ®Æt ë ®©y
</HTML>
Tr×nh duyÖt sÏ xem c¸c tµi liÖu kh«ng sö dông thÎ <HTML> nh nh÷ng tÖp tin v¨n b¶n b×nh thêng.
1.2 HEAD
ThÎ HEAD ®îc dïng ®Ó x¸c ®̃nh phÇn më ®Çu cho tµi liÖu.
Có ph¸p:
<HEAD>
... PhÇn më ®Çu (HEADER) cña tµi liÖu ®îc ®Æt ë ®©y
</HEAD>
1.3 TITLE
CÆp thÎ nµy chØ că thÓ sö dông trong phÇn më ®Çu cña tµi liÖu, tøc lµ nă ph¶i n»m trong thÎ ph¹m vi giíi h¹n bëi cÆp thÎ <HEAD>.
Có ph¸p:
<TITLE>Tiªu ®̉ cña tµi liÖu</TITLE>
1.4 BODY
ThÎ nµy ®îc sö dông ®Ó x¸c ®̃nh phÇn néi dung chƯnh cña tµi liÖu - phÇn th©n (body) cña tµi liÖu. Trong phÇn th©n că thÓ chøa c¸c th«ng tin ®̃nh d¹ng nhÊt ®̃nh ®Ó ®Æt ¶nh n̉n cho tµi liÖu, mµu n̉n, mµu v¨n b¶n siªu liªn kƠt, ®Æt l̉ cho trang tµi liÖu... Nh÷ng th«ng tin nµy ®îc ®Æt ë phÇn tham sè cña thÎ.
Gi¸o tr×nh thiƠt kƠ Web
1
<BODY>
.... phÇn néi dung cña tµi liÖu ®îc ®Æt ë ®©y
</BODY>
Có ph¸p:
Trªn ®©y lµ có ph¸p c¬ b¶n cña thÎ BODY, tuy nhiªn b¾t ®Çu tơ HTML 3.2 th× că nhỉu thuéc tƯnh ®îc sö dông trong thÎ BODY. Sau ®©y lµ c¸c thuéc tƯnh chƯnh:
BACKGROUND=
§Æt mét ¶nh nµo ®ă lµm ¶nh n̉n (background) cho
v¨n b¶n. Gi¸ tr̃ cña tham sè nµy (phÇn sau dÊu
b»ng) lµ URL cña file ¶nh. NƠu kƯch thíc ¶nh nhá
h¬n cöa sæ tr×nh duyÖt th× toµn bé mµn h×nh cöa sæ
tr×nh duyÖt sÏ ®îc l¸t kƯn b»ng nhỉu ¶nh.
BGCOLOR=
§Æt mÇu n̉n cho trang khi hiÓn th̃. NƠu c¶ hai tham
sè BACKGROUND vµ BGCOLOR cïng că gi¸ tr̃ th×
tr×nh duyÖt sÏ hiÓn th̃ mÇu n̉n tríc, sau ®ă míi t¶i
¶nh lªn phƯa trªn.
TEXT=
X¸c ®̃nh mµu ch÷ cña v¨n b¶n, kÓ c¶ c¸c ®̉ môc.
ALINK=,VLINK=,LINK=
X¸c ®̃nh mµu s¾c cho c¸c siªu liªn kƠt trong v¨n
b¶n. T¬ng øng, alink (active link) lµ liªn kƠt ®ang
®îc kƯch ho¹t - tøc lµ khi ®· ®îc kƯch chuét lªn;
vlink (visited link) chØ liªn kƠt ®· tơng ®îc kƯch ho¹t;
Nh vËy mét tµi liÖu HTML c¬ b¶n că cÊu tróc nh sau:
<HTML>
<HEAD>
<TITLE>Tiªu ®̉ cña tµi liÖu</TITLE>
</HEAD>
<BODY C¸c tham sè nƠu că>
... Néi dung cña tµi liÖu
</BODY>
</HTML>
II. C¸c thÎ ®̃nh d¹ng khèi
2.1. thÎ P
ThÎ <P> ®îc sö dông ®Ó ®̃nh d¹ng mét ®o¹n v¨n b¶n.
Có ph¸p:
<P>Néi dung ®o¹n v¨n b¶n</P>
Gi¸o tr×nh thiƠt kƠ Web
2
2.2. C¸c thÎ ®̃nh d¹ng ®̉ môc H1/H2/H3/H4/H5/H6
HTML hç trî 6 møc ®̉ môc. Chó ư r»ng ®̉ môc chØ lµ c¸c chØ dÉn ®̃nh d¹ng v̉ mÆt logic, tøc lµ mçi tr×nh duyÖt sÏ thÓ hiÖn ®̉ môc díi mét khu«n d¹ng thƯch hîp. Că thÓ ë tr×nh duyÖt nµy lµ font ch÷ 14 point nhng sang tr×nh duyÖt kh¸c lµ font ch÷ 20 point. §̉ môc cÊp 1 lµ cao nhÊt vµ gi¶m dÇn ®Ơn cÊp 6. Th«ng thêng v¨n b¶n ë ®̉ môc cÊp 5 hay cÊp 6 thêng că kƯch thíc nhá h¬n v¨n b¶n th«ng thêng.
Díi ®©y lµ c¸c thÎ dïng ®Ó ®̃nh d¹ng v¨n b¶n ë d¹ng ®̉ môc:
<H1> ... </H1> §̃nh d¹ng ®̉ môc cÊp 1
<H2> ... </H2> §̃nh d¹ng ®̉ môc cÊp 2
<H3> ... </H3> §̃nh d¹ng ®̉ môc cÊp 3
<H4> ... </H4> §̃nh d¹ng ®̉ môc cÊp 4
<H5> ... </H5> §̃nh d¹ng ®̉ môc cÊp 5
<H6> ... </H6> §̃nh d¹ng ®̉ môc cÊp 6
2.3 ThÎ xuèng dßng BR
ThÎ nµy kh«ng că thÎ kƠt thóc t¬ng øng (</BR>), nă că t¸c dông chuyÓn sang dßng míi. Lu ư, néi dung v¨n b¶n trong tµi liÖu HTML sÏ ®îc tr×nh duyÖt Web thÓ hiÖn liªn tôc, c¸c kho¶ng tr¾ng lỉn nhau, c¸c kư tù tab, kư tù xuèng dßng ®̉u ®îc coi nh mét kho¶ng tr¾ng. §Ó xuèng dßng trong tµi liÖu, b¹n ph¶i sö dông thÎ <BR>
2.4 ThÎ PRE
§Ó giíi h¹n ®o¹n v¨n b¶n ®· ®îc ®̃nh d¹ng s½n b¹n că thÓ sö dông thÎ <PRE>. V¨n b¶n
gi÷a hai thÎ nµy sÏ ®îc thÓ hiÖn gièng hÖt nh khi chóng ®îc ®¸nh vµo, vƯ dô dÊu xuèng dßng trong ®o¹n v¨n b¶n giíi h¹n bëi thÎ <PRE> sÏ că ư nghÜa chuyÓn sang dßng míi (tr×nh duyÖt sÏ kh«ng coi chóng nh dÊu c¸ch)
Có ph¸p:
<PRE>V¨n b¶n ®· ®îc ®̃nh d¹ng</PRE>
III. C¸c thÎ ®̃nh d¹ng danh s¸ch
3.1. Danh s¸ch th«ng th-êng
Có ph¸p:
<UL>
<LI> Môc thø nhÊt
<LI> Môc thø hai
3
Gi¸o tr×nh thiƠt kƠ Web
</UL>
TYPE =1
=I
=i
=A
=a
Că 4 kiÓu danh s¸ch:
·` Danh s¸ch kh«ng s¾p xƠp ( hay kh«ng ®¸nh sè) <UL>
· Danh s¸ch că s¾p xƠp (hay că ®¸nh sè) <OL>, mçi môc trong da
®îc s¾p xƠp thø tù.
nh s¸ch
Danh s¸ch thùc ®¬n <MENU>
Danh s¸ch ph©n cÊp <DIR>
Víi nhỉu tr×nh duyÖt, danh s¸ch ph©n cÊp vµ danh s¸ch thùc ®¬n gièng danh s¸ch kh«ng ®¸nh sè, că thÓ dïng lÉn víi nhau. Víi thÎ OL ta că có ph¸p sau:
<OL TYPE=1/a/A/i/I>
<LI>Muc thu nhat <LI>Muc thu hai <LI>Muc thu ba
</OL>
trong ®ă:
C¸c môc ®îc s¾p xƠp theo thø tù 1, 2, 3...
C¸c môc ®îc s¾p xƠp theo thø tù a, b, c...
C¸c môc ®îc s¾p xƠp theo thø tù A, B, C...
C¸c môc ®îc s¾p xƠp theo thø tù i, ii, iii...
C¸c môc ®îc s¾p xƠp theo thø tù I, II, III...
Ngoµi ra cßn thuéc tƯnh START= x¸c ®̃nh gi¸ tr̃ khëi ®Çu cho danh s¸ch.
ThÎ < LI > că thuéc tƯnh TYPE= x¸c ®̃nh kư hiÖu ®Çu dßng (bullet) ®øng tríc mçi môc trong danh s¸ch. Thuéc tƯnh nµy că thÓ nhËn c¸c gi¸ tr̃ : disc (chÊm trßn ®Ëm); circle (vßng trßn); square (h×nh vu«ng).
IV. C¸c thÎ ®̃nh d¹ng kư tù
4.1. C¸c thÎ ®̃nh d¹ng in kư tù
Sau ®©y lµ c¸c thÎ ®îc sö dông ®Ó quy ®̃nh c¸c thuéc tƯnh nh in nghiªng, in ®Ëm, g¹ch ch©n... cho c¸c kư tù, v¨n b¶n khi ®îc thÓ hiÖn trªn tr×nh duyÖt.
<B> ... </B>
In ch÷ ®Ëm
<STRONG> ... </STRONG>
<I> ... </I>
In ch÷ nghiªng
<EM> ... </EM>
4
Gi¸o tr×nh thiƠt kƠ Web
<U> ... </U>
<DFN>
<S> ... </S>
<STRIKE> ... </STRIKE> <BIG> ... </BIG>
<SMALL> ... </SMALL>
<SUP> ... </SUP>
<SUB> ... </SUB>
<BASEFONT>
<FONT> ... </FONT>
In ch÷ g¹ch ch©n
§¸nh dÊu ®o¹n v¨n b¶n gi÷a hai thÎ nµy lµ ®̃nh nghÜa cña mét tơ. Chó ng thêng ®îc in nghiªng hoÆc thÓ hiÖn qua mét kiÓu ®Æc biÖt nµo ®ă.
In ch÷ b̃ g¹ch ngang.
In ch÷ lín h¬n b×nh thêng b»ng c¸ch t¨ng kƯch thíc font hiÖn thêi lªn mét. ViÖc sö dông c¸c thÎ <BIG>lång nhau t¹o ra hiÖu øng ch÷ t¨ng dÇn. Tuy nhiªn ®èi víi mçi tr×nh duyÖt că giíi h¹n v̉ kƯch thíc ®èi víi mçi font ch÷, vît qu¸ giíi h¹n nµy, c¸c thÎ <BIG> sÏ kh«ng că ư nghÜa.
In ch÷ nhá h¬n b×nh thêng b»ng c¸ch gi¶m kƯch thíc font hiÖn thêi ®i mét. ViÖc sö dông c¸c thÎ <SMALL>lång nhau t¹o ra hiÖu øng ch÷ gi¶m dÇn. Tuy nhiªn ®èi víi mçi tr×nh duyÖt că giíi h¹n v̉ kƯch thíc ®èi víi mçi font ch÷, vît qu¸ giíi h¹n nµy, c¸c thÎ <SMALL> sÏ kh«ng că ư nghÜa.
§̃nh d¹ng chØ sè trªn (SuperScript)
§̃nh d¹ng chØ sè díi (SubScript)
§̃nh nghÜa kƯch thíc font ch÷ ®îc sö dông cho ®Ơn hƠt v¨n b¶n. ThÎ nµy chØ că mét tham sè size= x¸c ®̃nh ć ch÷. ThÎ <BASEFONT> kh«ng că thÎ kƠt thóc.
Chän kiÓu ch÷ hiÓn th̃. Trong thÎ nµy că thÓ ®Æt hai tham sè size= hoÆc color= x¸c ®̃nh ć ch÷ vµ mµu s¾c ®o¹n v¨n b¶n n»m gi÷a hai thÎ. KƯch thíc că thÓ lµ tuyÖt ®èi (nhËn gi¸ tr̃ tơ 1 ®Ơn 7) hoÆc t¬ng ®èi (+2,-4...) so víi font ch÷ hiÖn t¹i.
4.2. C¨n l̉ v¨n b¶n trong trang Web
Trong tr×nh bµy trang Web cña m×nh c¸c b¹n lu«n ph¶i chó ư ®Ơn viÖc c¨n l̉ c¸c v¨n b¶n ®Ó trang Web că ®îc mét bè côc ®Ñp. Mét sè c¸c thÎ ®̃nh d¹ng nh P, Hn, IMG... ®̉u că tham sè ALIGN cho phĐp b¹n c¨n l̉ c¸c v¨n b¶n n»m trong ph¹m vi giíi h¹n bëi cña c¸c thÎ ®ă.
C¸c gi¸ tr̃ cho tham sè ALIGN:
LEFT
C¨n l̉ tr¸i
CENTER
C¨n gi÷a trang
RIGHT
C¨n l̉ ph¶i
5
Gi¸o tr×nh thiƠt kƠ Web
Ngoµi ra, chóng ta că thÓ sö dông thÎ CENTER ®Ó c¨n gi÷a trang mét khèi v¨n b¶n.
Có ph¸p:
<CENTER>V¨n b¶n sÏ ®îc c¨n gi÷a trang</CENTER>
4.3. C¸c kư tù ®Æc biÖt
Kư tù & ®îc sö dông ®Ó chØ chuçi kư tù ®i sau ®îc xem lµ mét thùc thÓ duy nhÊt. Kư tù ; ®îc sö dông ®Ó t¸ch c¸c kư tù trong mét tơ.
Kư tù
M· ASCII
Tªn chuçi
<
<
<
>
>
>
&
&
&
4.4. Sö dông mµu s¾c trong thiƠt kƠ c¸c trang Web
Mét mµu ®îc tæng hîp tơ ba thµnh phÇn mµu chƯnh, ®ă lµ: §á (Red), Xanh l¸ c©y (Green), Xanh níc biÓn (Blue). Trong HTML mét gi¸ tr̃ mµu lµ mét sè nguyªn d¹ng hexa (hÖ ®Ơm c¬ sè 16) că ®̃nh d¹ng nh sau:
#RRGGBB
trong ®ă:
- lµ gi¸ tr̃ mµu §á.
- lµ gi¸ tr̃ mµu Xanh l¸ c©y.
- lµ gi¸ tr̃ mµu Xanh níc biÓn.
Mµu s¾c că thÓ ®îc x¸c ®̃nh qua thuéc tƯnh bgcolor= hay color=. Sau dÊu b»ng că thÓ lµ gi¸ tr̃ RGB hay tªn tiƠng Anh cña mµu. Víi tªn tiƠng Anh, ta chØ că thÓ chØ ra 16 mµu trong khi víi gi¸ tr̃ RGB ta că thÓ chØ tíi 256 mµu.
Sau ®©y lµ mét sè gi¸ tr̃ mµu c¬ b¶n:
Mµu s¾c
Gi¸ tr̃
Tªn tiƠng Anh
§á
#FF0000
RED
§á sÉm
#8B0000
DARKRED
Xanh l¸ c©y
#00FF00
GREEN
Xanh nh¹t
#90EE90
LIGHTGREEN
Xanh níc biÓn
#0000FF
BLUE
6
Gi¸o tr×nh thiƠt kƠ Web
Vµng
#FFFF00
YELLOW
Vµng nh¹t
#FFFFE0
LIGHTYELLOW
Tr¾ng
#FFFFFF
WHITE
§en
#000000
BLACK
X¸m
#808080
GRAY
N©u
#A52A2A
BROWN
TƯm
#FF00FF
MAGENTA
TƯm nh¹t
#EE82EE
VIOLET
Hång
#FFC0CB
PINK
Da cam
#FFA500
ORANGE
Mµu ®ång phôc h¶i qu©n
#000080
NAVY
#4169E1
ROYALBLUE
#7FFFD4
AQUAMARINE
Có ph¸p:
<BODY
LINK
= color
ALINK
= color
VLINK
= color
BACKGROUND
= url
BGCOLOR
= color
TEXT
= color
TOPMARGIN
= pixels
RIGHTMARGIN
= pixels
LEFTMARGIN
= pixels
>
.... phÇn néi dung cña tµi liÖu ®îc ®Æt ë ®©y
</BODY>
Sau ®©y lµ ư nghÜa c¸c tham sè cña thÎ BODY:
C¸c tham sè
ư nghÜa
LINK
ChØ ®̃nh mµu cña v¨n b¶n siªu liªn kƠt
ALINK
ChØ ®̃nh mµu cña v¨n b¶n siªu liªn kƠt ®ang ®ang chän
VLINK
ChØ ®̃nh mµu cña v¨n b¶n siªu liªn kƠt ®· tơng më
7
Gi¸o tr×nh thiƠt kƠ Web
BACKGROUND
ChØ ®̃nh ®̃a chØ cña ¶nh dïng lµm n̉n
BGCOLOR
ChØ ®̃nh mµu n̉n
TEXT
ChØ ®̃nh mµu cña v¨n b¶n trong tµi liÖu
SCROLL
YES/NO - X¸c ®̃nh că hay kh«ng thanh cuén
TOPMARGIN
L̉ trªn
RIGHTMARGIN
L̉ ph¶i
LEFTMARGIN
L̉ tr¸i
4.5. Chän kiÓu ch÷ cho v¨n b¶n
Có ph¸p:
<FONT
FACE
= font-name
COLOR
= color
SIZE
= n >
...
</FONT>
4.6. Kh¸i niÖm v¨n b¶n siªu liªn kƠt
V¨n b¶n siªu liªn kƠt hay cßn gäi lµ siªu v¨n b¶n lµ mét tơ, mét côm tơ hay mét c©u trªn trang Web ®îc dïng ®Ó liªn kƠt tíi mét trang Web kh¸c. Siªu v¨n b¶n lµ m«i trêng trong ®ă chøa c¸c liªn kƠt (link) cña c¸c th«ng tin. Do WWW cÊu thµnh tơ nhỉu hÖ thèng kh¸c nhau, cÇn ph¶i că mét quy t¾c ®Æt tªn thèng nhÊt cho tÊt c¶ c¸c v¨n b¶n trªn Web. Quy t¾c
D̃ch vô Cæng Tªn file
http://selab.vnuh.edu.vn:8080 /~dir1/dir2/dir3/index.HTML#chapter001
Tªn hÖ thèng
§êng dÉn
C¸c tham sè,
biƠn, truy
vÊn
VƯ dô v̉ URL
®Æt tªn ®ă lµ URL (Universal Resource Locator).
C¸c thµnh phÇn cña URL ®îc minh ho¹ ë h×nh trªn.
D̃ch vô: Lµ thµnh phÇn b¾t buéc cña URL. Nă x¸c ®̃nh c¸ch thøc tr×nh duyÖt cña m¸y kh¸ch liªn l¹c víi m¸y phôc vô nh thƠ nµo ®Ó nhËn d÷ liÖu. Că nhỉu d̃ch vô nh http,
wais, ftp, gopher, telnet.
Gi¸o tr×nh thiƠt kƠ Web
8
Tªn hÖ thèng : Lµ thµnh phÇn b¾t buéc cña URL. Că thÓ lµ tªn mỉn ®Çy ®ñ cña m¸y phôc vô hoÆc chØ lµ mét phÇn tªn ®Çy ®ñ – trêng hîp nµy x¶y ra khi v¨n b¶n ®îc yªu cÇu vÉn n»m trªn mỉn cña b¹n. Tuy nhiªn nªn sö dông ®êng dÉn ®Çy ®ñ.
Cæng : Kh«ng lµ thµnh phÇn b¾t buéc cña URL. Cæng lµ ®̃a chØ socket cña m¹ng dµnh cho mét giao thøc cô thÓ. Giao thøc http ngÇm ®̃nh nèi víi cæng 8080.
§êng dÉn th môc : Lµ thµnh phÇn b¾t buéc cña URL. Ph¶i chØ ra ®êng dÉn tíi file yªu cÇu khi kƠt nèi víi bÊt kú hÖ thèng nµo. Că thÓ ®êng dÉn trong URL kh¸c víi ®êng dÉn thùc sù trong hÖ thèng m¸y phôc vô. Tuy nhiªn că thÓ rót gän ®êng dÉn b»ng c¸ch ®Æt biÖt danh (alias). C¸c th môc trong ®êng dÉn c¸ch nhau bëi dÊu g¹ch ch Đo (/).
Tªn file : Kh«ng lµ thµnh phÇn b¾t buéc cña URL. Th«ng thêng m¸y phôc vô ®îc cÊu h×nh sao cho nƠu kh«ng chØ ra tªn file th× sÏ tr¶ v̉ file ngÇm ®̃nh trªn th môc ®îc yªu cÇu. File nµy thêng că tªn lµ index.html, index.htm, default.html hay default.htm. NƠu c̣ng kh«ng că c¸c file nµy th× thêng kƠt qu¶ tr¶ v̉ lµ danh s¸ch liÖt kª c¸c file hay th môc con trong th môc ®îc yªu cÇu
C¸c tham sè : Kh«ng lµ thµnh phÇn b¾t buéc cña URL. NƠu URL lµ yªu cÇu t×m kiƠm trªn mét c¬ së d÷ liÖu th× truy vÊn sÏ g¾n vµo URL, ®ă chƯnh lµ ®o¹n m· ®»ng sau dÊu chÊm hái (?).URL c̣ng că thÓ tr¶ l¹i th«ng tin ®îc thu thËp tơ form. Trong trêng hîp dÊu th¨ng (#) xuÊt hiÖn ®o¹n m· ®¨ng sau lµ tªn cña mét ṽ trƯ (location) trong file ®îc chØ ra.
§Ó t¹o ra mét siªu v¨n b¶n chóng ta sö dông thÎ <A>.
Có ph¸p:
<A
HREF
= url
NAME
= name
TABINDEX
= n
TITLE
= title
TARGET
= _blank / _self
>
... siªu v¨n b¶n
</A>
ư nghÜa c¸c tham sè:
HREF
§̃a chØ cña trang Web ®îc liªn kƠt, lµ mét URL nµo ®ă.
NAME
§Æt tªn cho ṽ trƯ ®Æt thÎ.
TABLEINDEX
Thø tù di chuyÓn khi Ên phƯm Tab
TITLE
V¨n b¶n hiÓn th̃ khi di chuét trªn siªu liªn kƠt.
TARGET
Më trang Web ®îc liªn trong mét cöa sæ míi (_blank) hoÆc
9
Gi¸o tr×nh thiƠt kƠ Web
trong cöa sæ hiÖn t¹i (_self), trong mét frame (tªn frame).
4.7. §̃a chØ t-¬ng ®èi
URL ®îc tr×nh bµy ë trªn lµ URL tuyÖt ®èi. Ngoµi ra cßn că URL t¬ng ®èi hay cßn gäi lµ URL kh«ng ®Çy ®ñ. §̃a chØ t¬ng ®èi sö dông sù kh¸c biÖt t¬ng ®èi gi÷a v¨n b¶n hiÖn thêi vµ v¨n b¶n cÇn tham chiƠu tíi. C¸c thµnh phÇn trong URL ®îc ng¨n c¸ch b»ng kư tù ng¨n c¸ch (kư tù g¹ch chĐo /). §Ó t¹o ra URL t¬ng ®èi, ®Çu tiªn ph¶i sö dông kư tù ng¨n c¸ch. URL ®Çy ®ñ hiÖn t¹i sÏ ®îc sö dông ®Ó t¹o nªn URL ®Çy ®ñ míi. Nguyªn t¾c lµ c¸c thµnh phÇn bªn tr¸i dÊu ng¨n c¸ch cña URL hiÖn t¹i ®îc gi÷ nguyªn, c¸c thµnh phÇn bªn ph¶i ®îc thay thƠ b»ng thµnh phÇn URL t¬ng ®èi. Chó ư r»ng tr×nh duyÖt kh«ng göi URL t¬ng ®èi, nă bæ sung vµo URL c¬ së ®· x¸c ®̃nh tríc thµnh phÇn URL t¬ng ®èi x¸c ®̃nh sau thuéc tƯnh href=. Kư tù ®Çu tiªn sau dÊu b»ng sÏ x¸c ®̃nh c¸c thµnh phÇn nµo cña URL hiÖn t¹i sÏ tham gia ®Ó t¹o nªn URL míi.
VƯ dô, nƠu URL ®Çy ®ñ lµ: http://it-department.vnuh.edu.vn/HTML/index.htm th×:
DÊu hai chÊm (:) chØ d̃ch vô gi÷ nguyªn nhng thay ®æi phÇn cßn l¹i. VƯ dô
://www.fpt.com/ sÏ t¶i trang chñ cña m¸y phôc vô www.fpt.com víi cïng d̃ch vô http.
DÊu g¹ch chĐo (/) chØ d̃ch vô vµ m¸y phôc vô gi÷ nguyªn nhng toµn bé ®êng
dÉn thay ®æi. VƯ dô /Javascript/index.htm sÏ t¶i file index.htm cña th môc Javascript trªn m¸y phôc vô www.it-department.vnuh.edu.vn.
Kh«ng că dÊu ph©n c¸ch chØ că tªn file lµ thay ®æi. VƯ dô index1.htm sÏ t¶i file
index1.htm ë trong th môc HTML cña m¸y phôc vô www.it-
department.vnuh.edu.vn.
DÊu th¨ng (#): chØ d̃ch vô, m¸y phuc vô, ®êng dÉn vµ c¶ tªn file gi÷ nguyªn, chØ thay ®æi ṽ trƯ trong file.
Do ®êng dÉn ®îc xem lµ ®¬n ṽ ®éc lËp nªn că thÓ sö dông ph¬ng ph¸p ®êng dÉn t¬ng ®èi nh trong UNIX hay MS-DOS (tøc lµ . chØ th môc hiÖn t¹i cßn .. chØ th môc cha cña th môc hiÖn t¹i).
URL c¬ së că thÓ ®îc x¸c ®̃nh b»ng thÎ <BASE>.
4.8. KƠt nèi mailto
NƠu ®Æt thuéc tƯnh href= cña thÎ <a> gi¸ tr̃ mailto:address@domain th× khi kƯch ho¹t kƠt nèi sÏ kƯch ho¹t chøc n¨ng th ®iÖn tö cña tr×nh duyÖt.
<ADDRESS>
Trang WEB nµy ®îc
<A href=”mailto:webmaster@vnuh.edu.vn” >
WEBMASTER
<\A> b¶o tr×
Gi¸o tr×nh thiƠt kƠ Web
10
<\ADDRESS>
4.9. VÏ mét ®-êng th¼ng n»m ngang
Có ph¸p:
<HR
ALIGN
COLOR
= LEFT / CENTER / RIGHT
= color
NOSHADE
SIZE
WIDTH
= n
= width
>
nghÜa c¸c tham sè:
ALIGN
C¨n l̉ (c¨n tr¸i, c¨n ph¶i, c¨n gi÷a)
COLOR
§Æt mµu cho ®êng th¼ng
NOSHADE
Kh«ng că băng
SIZE
§é dµy cña ®êng th¼ng
WIDTH
Chỉu dµi (tƯnh theo pixel hoÆc % cña b̉ réng cöa sæ
tr×nh duyÖt).
ThÎ nµy gièng nh thÎ BR, nă c̣ng kh«ng că thÎ kƠt thóc t¬ng øng.
V. C¸c thÎ ch̀n ©m thanh, h×nh ¶nh
5.1. Giíi thiÖu
Liªn kƠt víi file ®a ph¬ng tiÖn c̣ng t¬ng tù nh liªn kƠt b×nh thêng. Tuy vËy ph¶i ®Æt tªn ®óng cho file ®a ph¬ng tiÖn. PhÇn më réng cña file ph¶i cho biƠt kiÓu cña file.
KiÓu
PhÇn më
M« t¶
réng
Image/GIF
.gif
ViƠt t¾t cña Graphics Interchange Format. Khu«n
d¹ng nµy xuÊt hiÖn khi mäi ngêi că nhu cÇu trao
®æi ¶nh trªn nhỉu hÖ thèng kh¸c nhau. Nă ®îc sö
dông trªn tÊt c¶ c¸c hÖ thèng hç trî giao diÖn ®å
ho¹. §̃nh d¹ng GIF lµ ®̃nh d¹ng chuÈn cho mäi
tr×nh duyÖt WEB. Nhîc ®iÓm cña nă lµ chØ thÓ hiÖn
®îc 256 mµu.
Më réng cña chuÈn nµy lµ GIF89, ®îc thªm nhỉu
chøc n¨ng cho c¸c øng dông ®Æc biÖt nh lµm ¶nh
11
Gi¸o tr×nh thiƠt kƠ Web
n̉n trong suèt - tøc lµ ¶nh că thÓ næi b»ng c¸ch lµm
mµu n̉n gièng víi mµu n̉n cña tr×nh duyÖt.
Image/JPEG
.jpeg
ViƠt t¾t cña Joint Photographic Expert Group. Lµ
khu«n d¹ng ¶nh kh¸c nhng că thªm kh¶ n¨ng
nĐn.¦u ®iÓm næi bËt cña khu«n d¹ng nµy lµ lu tr÷
®îc hµng triÖu mµu vµ ®é nĐn cao nªn kƯch thíc
file ¶nh nhá h¬n vµ thêi gian download nhanh h¬n.
Nă lµ c¬ së cho khu«n d¹ng MPEG. TÊt c¶ c¸c tr×nh
duyÖt ®̉u că kh¶ n¨ng xem ¶nh JPEG.
Image/TIFF
.tiff
ViƠt t¾t cña Tagged Image File Format. §îc
Microsoft thiƠt kƠ ®Ó quĐt ¶nh tơ m¸y quĐt c̣ng nh
t¹o c¸c Ên phÈm.
Text/HTML
.HTML,
.htm
PostScript
.eps, .ps
§îc t¹o ra ®Ó hiÓn th̃ vµ in c¸c v¨n b¶n că chÊt
lîng cao.
Adobe
.pdf
ViƠt t¾t cña Portable Document Format. Acrobat
Acrobat
c̣ng sö dông c¸c siªu liªn kƠt ngay trong v¨n b¶n
c̣ng gièng nh HTML. Tơ phiªn b¶n 2.0, c¸c s¶n
phÈm cña Acrobat cho phĐp liªn kƠt gi÷a nhỉu v¨n
b¶n. ¦u ®iÓm lín nhÊt cña nă lµ kh¶ n¨ng
WYSISYG.
Video/MPEG
.mpeg
ViƠt t¾t cña Motion Picture Expert Group, lµ ®̃nh
d¹ng dµnh cho c¸c lo¹i phim (video). §©y lµ khu«n
d¹ng th«ng dông nhÊt dµnh cho phim trªn WEB.
Video/AVI
.avi
Lµ khu«n dn¹g phim do Microsoft ®a ra.
Video/QuickTi
.mov
Do Apple Computer ®a ra, chuÈn video nµy ®îc
me
cho lµ că nhỉu u ®iÓm h¬n MPEG vµ AVI. MÆc dï
®· ®îc tƯch hîp vµo nhỉu tr×nh duyÖt nhng vÉn
cha phæ biƠn b»ng hai lo¹i ®̃nh d¹ng trªn.
Sound/AU
.au
Sound/MIDI
.mid
Lµ khu«n d¹ng dµnh cho ©m nh¹c ®iÖn tö hƠt søc
th«ng dông ®îc nhỉu tr×nh duyÖt trªn c¸c hÖ thèng
kh¸c nhau hç trî. File Midi ®îc tæng hîp sè ho¸
trùc tiƠp tơ m¸y tƯnh.
Sound/RealA
.ram
§̃nh d¹ng audio theo dßng. Mét bÊt tiÖn khi sö dông
udio
c¸c ®̃nh d¹ng kh¸c lµ file ©m thanh thêng că kƯch
thíc lín - do vËy thêi gian t¶i xuèng l©u, Tr¸i l¹i
audio dßng b¾t ®Çu ch¬i ngay khi t¶i ®îc mét phÇn
file trong khi vÉn t¶i v̉ c¸c phÇn kh¸c.MÆc dï file
theo ®̃nh d¹ng nµy kh«ng nhá h¬n so víi c¸c ®̃nh
d¹ng kh¸c song chƯnh kh¶ n¨ng dßng ®· khiƠn ®̃nh
d¹ng nµy phï hîp víi kh¶ n¨ng ch¬i ngay lËp tøc.
VRML
.vrml
ViƠt t¾t cña Virtual Reality Modeling Language. C¸c
file theo ®̃nh d¹ng nµy c̣ng gièng nh HTML. Tuy
nhiªn do tr×nh duyÖt că thÓ hiÓn th̃ ®îc cöa sæ 3
chỉu nªn ngêi xem că thÓ c¶m nhËn ®îc c¶m
gi¸c ba chỉu.
Gi¸o tr×nh thiƠt kƠ Web
12
5.2. §-a ©m thanh vµo mét tµi liÖu HTML
Có ph¸p:
<BGSOUND
SRC = url
LOOP = n
>
ThÎ nµy kh«ng că thÎ kƠt thóc t¬ng øng (</BGSOUND>). §Ó ch¬i lÆp l¹i v« h¹n cÇn chØ ®̃nh LOOP = -1 hoÆc LOOP = INFINITE. ThÎ BGSOUND ph¶i ®îc ®Æt trong phÇn më ®Çu (tøc lµ n»m trong cÆp thÎ HEAD).
5.3. Ch̀n mét h×nh ¶nh, mét ®o¹n video vµo tµi liÖu HTML
§Ó ch̀n mét file ¶nh (.jpg, .gif, .bmp) hoÆc video (.mpg, .avi) vµo tµi liÖu HTML, b¹n că thÓ sö dông thÎ IMG.
Có ph¸p:
<IMG
ALIGN
= TOP/MIDDLE/BOTTOM
ALT
= text
BORDER
= n
SRC
= url
WIDTH
= width
HEIGHT
= height
HSPACE
= vspace
VSPACE
= hspace
TITLE
= title
DYNSRC
= url
START
= FILEOPEN/MOUSEOVER
LOOP
= n
>
Trong ®ă:
ALIGN = TOP/ MIDDLE/
C¨n hµng v¨n b¶n bao quanh ¶nh
BOTTOM/ LEFT/ RIGHT
ALT = text
ChØ ®̃nh v¨n b¶n sÏ ®îc hiÓn th̃ nƠu chøc n¨ng
show picture cña browser b̃ t¾t ®i hay hiÓn th̃
thay thƠ cho ¶nh trªn nh÷ng tr×nh duyÖt kh«ng că
kh¶ n¨ng hiÓn th̃ ®å ho¹. V¨n b¶n nµy cßn ®îc
gäi lµ nh·n cña ¶nh. §èi víi tr×nh duyÖt că kh¶
n¨ng hç trî ®å ho¹, dßng v¨n b¶n nµy sÏ hiÖn lªn
13
Gi¸o tr×nh thiƠt kƠ Web
khi di chuét qua ¶nh hay ®îc hiÓn th̃ trong vïng
cña ¶nh nƠu ¶nh cha ®îc t¶i v̉ hƠt. Chó ư ph¶i
®Æt v¨n b¶n trong hai dÊu nh¸y kĐp nƠu triong
v¨n b¶n chøa dÊu c¸ch hay c¸c kư tù ®Æc biÖt -
trong trêng hîp ngîc l¹i că thÓ bá dÊu nh¸y
kĐp.
BORDER = n
§Æt kƯch thíc ®êng vỉn ®îc vÏ quanh ¶nh
(tƯnh theo pixel).
SRC = url
§̃a chØ cña file ¶nh cÇn ch̀n vµo tµi liÖu.
WIDTH/HEIGHT
ChØ ®̃nh kƯch thíc cña ¶nh ®îc hiÓn th̃.
HSPACE/VSPACE
ChØ ®̃nh kho¶ng trèng xung quanh h×nh ¶nh (tƯnh
theo pixel) theo bèn phƯa trªn, díi, tr¸i, ph¶i.
TITLE = title
V¨n b¶n sÏ hiÓn th̃ khi con chuét trá trªn ¶nh
DYNSRC = url
§̃a chØ cña file video.
START =
ChØ ®̃nh file video sÏ ®îc ch¬i khi tµi liÖu ®îc
FILEOPEN/MOUSEOVER
më hay khi trá con chuét vµo nă. Că thÓ kƠt hîp
c¶ hai gi¸ tr̃ nµy nhng ph¶i ph©n c¸ch chóng bëi
dÊu phÈy.
LOOP = n/INFINITE
ChØ ®̃nh sè lÇn ch¬i. NƠu LOOP = INFINITE th×
file video sÏ ®îc ch¬i v« h¹n lÇn.
VI. C¸c thÎ ®̃nh d¹ng b¶ng biÓu
Sau ®©y lµ c¸c thÎ t¹o b¶ng chƯnh:
<TABLE> ... </TABLE>
§̃nh nghÜa mét b¶ng
<TR> ... </TR>
§̃nh nghÜa mét hµng trong b¶ng
<TD> ... </TD>
§̃nh nghÜa mét « trong hµng
<TH> ... </TH>
§̃nh nghÜa « chøa tiªu ®̉ cña cét
<CAPTION> ... </CAPTION>
Tiªu ®̉ cña b¶ng
Có ph¸p:
<TABLE
ALIGN
= LEFT / CENTER / RIGHT
BORDER
= n
BORDERCOLOR
= color
BORDERCOLORDARK
= color
BORDERCOLORLIGHT
= color
BACKGROUND
= url
BGCOLOR
= color
CELLSPACING
= spacing
CELLPADDING
= pading
14
Gi¸o tr×nh thiƠt kƠ Web
>
<CAPTION>Tiªu ®̉ cña b¶ng biÓu</CAPTION>
... §̃nh nghÜa c¸c dßng
<TR
ALIGN = LEFT/CENTER/RIGHT
VALIGN = TOP/MIDDLE/BOTTOM>
... §̃nh nghÜa c¸c « trong dßng
<TD
ALIGN
= LEFT / CENTER / RIGHT
VALIGN
= TOP / MIDDLE / BOTTOM
BORDERCOLOR
= color
BORDERCOLORDARK
= color
BORDERCOLORLIGHT
= color
BACKBROUND
= url
BGCOLOR
= color
COLSPAN
= n
ROWSPAN
= n
>
... Néi dung cña «
</TD>
...
</TR>
...
</TABLE>
ư nghÜa c¸c tham sè:
ALIGN / VALIGN
C¨n l̉ cho b¶ng vµ néi dung trong mçi «.
BORDER
KƯch thíc ®êng kÎ chia « trong b¶ng, ®îc ®o theo
pixel. Gi¸ tr̃ 0 că nghÜa lµ kh«ng x¸c ®̃nh l̉, gi÷a c¸c
« trong b¶ng chØ că mét kho¶ng tr¾ng nhá ®Ó ph©n
biÖt. NƠu chØ ®Ó border th× ngÇm ®̃nh border=1. Víi
nh÷ng b¶ng că cÊu tróc phøc t¹p, nªn ®Æt l̉ ®Ó ngêi
xem că thÓ ph©n biÖt râ c¸c dßng vµ cét.
BORDERCOLOR
Mµu ®êng kÎ
BORDERCOLORDARK
Mµu phƯa tèi vµ phƯa s¸ng cho ®êng kÎ næi.
BORDERCOLORLIGHT
BACKGROUND
§̃a chØ tíi tÖp ¶nh dïng lµm n̉n cho b¶ng
BGCOLOR
Mµu n̉n
CELLSPACING
Kho¶ng c¸ch gi÷a c¸c « trong b¶ng
CELLPADDING
Kho¶ng c¸ch gi÷a néi dung vµ ®êng kÎ trong mçi «
cña b¶ng.
15
Gi¸o tr×nh thiƠt kƠ Web
COLSPAN
ChØ ®̃nh « sÏ kĐo dµi trong bao nhiªu cét
ROWSPAN
ChØ ®̃nh « sÏ kĐo dµi trong bao nhiªu hµng
VII. FORM
7.1. HTML Forms
C¸c HTML Form că thÓ că c¸c hép v¨n b¶n, hép danh s¸ch lùa chän, nót bÊm, nót chän...
7.2. T¹o Form
§Ó t¹o ra mét form trong tµi liÖu HTML, chóng ta sö dông thÎ FORM víi có ph¸p nh sau:
Có ph¸p:
<FORM
ACTION
= ulr
METHOD
= GET | POST
NAME
= name
TARGET
= frame_name
| _blank
|
_self
>
<!-- C¸c phÇn tö ®ỉu khiÓn cña form ®îc ®Æt ë ®©y --> <INPUT ...>
<INPUT ...>
</FORM>
Trong ®ă
ACTION
§̃a chØ sÏ göi d÷ liÖu tíi khi form ®îc submit (că thÓ lµ
®̃a chØ tíi mét ch¬ng tr×nh CGI, mét trang ASP...).
METHOD
Ph¬ng thøc göi d÷ liÖu.
NAME
Tªn cña form.
TARGET
ChØ ®̃nh cöa sæ sÏ hiÓn th̃ kƠt qu¶ sau khi göi d÷ liÖu tơ
form ®Ơn server.
§Æt c¸c ®èi tîng ®iÓu khiÓn (nh hép v¨n b¶n, « kiÓm tra, nót bÊm...) vµo trang Web
Có ph¸p thÎ INPUT:
<INPUT
Gi¸o tr×nh thiƠt kƠ Web
16
ALIGN = LEFT | CENTER | RIGHT
TYPE = BUTTON | CHECKBOX | FILE | IMAGE | PASSWORD | RADIO | RESET | SUBMIT | TEXT
VALUE = value
>
7.3. T¹o mét danh s¸ch lùa chän
Có ph¸p:
<SELECT NAME="tªn danh s¸ch" SIZE="chỉu cao">
<OPTION VALUE=value1 SELECTED> Tªn môc chän thø nhÊt <OPTION VALUE=value2> Tªn môc chän thø hai <!-- Danh s¸ch c¸c môc chän -->
</SELECT>
7.4. T¹o hép so¹n th¶o v¨n b¶n
Có ph¸p:
<TEXTAREA
COLS=sè cét
ROWS=sè hµng
NAME=tªn
>
V¨n b¶n ban ®Çu
</TEXTAREA>
Gi¸o tr×nh thiƠt kƠ Web
17
PhÇn II
thiƠt kƠ web sö dông ms frontpage
I. CÁC THAO TÁC CƠ BẢN
Các thao tác chính khi soạn thảo một trang web
Tạo mới một trang web: Chọn chức năng File/New/Page /Normal Page hay chọn icon New trên Toolbar.
Lưu trang web: Chọn chức năng File/Save hay chọn icon Save trên Toolbar. Để lưu trang web dưới dạng một tên khác chọn chức năng File/Save As…
Xem trước hiển thị của trang web đang thiết kế: Chọn chức năng File/Preview in Browser. Lúc này cửa sổ trình duyệt Internet Explorer (IE) sẽ hiển thị trang web mà chúng ta đang soạn thảo. Nên lưu trang web trước khi chọn chức năng này.
Cửa sổ màn hình soạn thảo trang web cung cấp 3 cách “hiểu” (view) khác nhau về 1 trang web.
o Nếu bạn chọn Normal view, bạn có thể biên tập trang web dưới dạng WYSIWYG. Ví dụ bạn có thể gõ văn bản vào, thay đổi màu sắc, kích thước chữ, … b
o Nếu bạn chọn HTML view, bạn sẽ thấy được các mã HTML tương ứng với cách trình bày của trang web của bạn. Ví dụ, nếu trong Normal view bạn chèn vào một table thì trong HTML view, bạn sẽ thấy các tag tương ứng như sau:
<table border="1" width="100%">
<tr><td width="100%"> </td></tr> </table>
o Nếu bạn chọn Preview view, tương tự với chức năng Preview in Browser
Tạo các thành phần của trang web\
2.1. Thời gian cập nhật (Time stamp)
Chọn Insert/Date and Time.
Chọn định dạng ngày tháng và thời gian phù hợp với nhu cầu của bạn
2.2. Đường kẻ ngang (Horizontal line)
Chọn Insert/Horizotal line.
Đặt các thuộc tính cho đường kẻ ngang bằng cách double click chuột lên nó. Sau đó chọn các thông số về Width, Height, Color, Alignment
2.3. List
Chọn Format/Bullets and Numbering.
Sau khi hộp hội thoại xuất hiện, bạn hãy chọn các dạng bullet và numbering tương ứng.
Để thay đổi các thuộc tính của bullet như màu sắc, kiểu chữ, …, ta chọn Format/Bullets and Numbering/Style
Gi¸o tr×nh thiÕt kÕ Web
18
Ngoài ra, ta còn có thể chọn hình ảnh để thay cho các kiểu bullet thông thường. Để thay đổi, ta chọn Format/Bullets and Numbering/Picture bullets, rồi chọn ảnh dùng để làm bullet
Để bỏ định dạng bullets, ta chọn Format/Bullets and Numbering/Plain Bullets.
2.4. Tables
Người ta thường dùng table để:
Hiển thị các thông tin có dạng dòng/cột, ví dụ như bảng thời khóa biểu, thông tin sản phẩm, ..
Trình bày (layout) các văn bản(text) và các ảnh đồ họa(graphics).
Để tạo một bảng, ta có thể dùng một trong hai cách:
Chọn Table/Insert Table. Khi hộp hội thoại tạo bảng hiện ra, bạn phải cung cấp các thông tin chi tiết cho việc tạo bảng, ví dụ như số dòng, số cột, kích thước, ...
Chọn Table/Draw Table. Với chức năng này, bạn sẽ dùng bút vẽ để tạo các dòng, cột
Để không hiện (hide) border của bảng, ta click phải chuột lên table, chọn Table Properties/Border/Sizes bằng 0.
Để tách một cell hay trộn nhiều cell lại, ta chọn Tabe rồi chọn Split /Merge Cells.
Để thêm hoặc xóa các cell, ta chọn Table rồi chọn Insert/Delete Cells.
2.5. Một số hiệu ứng đặc biệt
Chuyển trang (Page transition): Chọn Format/Page Transition…
Hiệu ứng chữ chuyển động theo chiều ngang (Marquees): Chọn Insert/Component/Marquee. Sau khi hộp thoại hiện ra, bạn gõ vào dòng chữ cần chuyển động và đặt các thuộc tính khác như màu sắc, font chữ, …
Thêm hiệu ứng font chữ cho các hyperlink: Chọn Format/Background, check
vào Enable hyperlink rollover effects. Sau đó bạn có thể chọn các màu theo ý muốn.
2.6. Chèn ảnh
Chọn chức năng Insert/Picture/From File.
Đặt thuộc tính và kích thước của ảnh, click phải chuột lên ảnh, rồi chọn Picture Properties.
Để tạo các hotspot hyperlink, ta chọn hình vẽ tương ứng (hình chữ nhật, ellipse, …) trên thanh toolbar pictures. Chọn vùng trên ảnh, rồi điền thông tin của hyperlink vào
2.7. Chèn hyperlink
Chọn chức năng Insert/Hyperlink.
Sau khi hộp thoại hiện ra, gõ vào hyperlink tương ứng. Có 3 dạng:
Địa chỉ Internet, có dạng: http://… Ví dụ: http:// www.yahoo.com
Liên kết tới một trang trong site, có dạng: /thư mục/tên tập tin. Ví dụ:
../images/shopping.htm
Liên kết ngay chính trong trang, đặt bằng bookmark.
Định dạng trang
Click phải chuột lên trang, chọn Page Properties.
Gi¸o tr×nh thiÕt kÕ Web
19
Để đặt màu nền cho trang, chọn Background/Colors/Background
Để đăt ảnh nền cho trang, chọn Background/Formatting/Background picture.
Để đặt các thông số về màu sắc cho hyperlink, chọn Background/Colors/Hyperlink
Để đặt tiêu đề cho trang chọn General/Title.
Gi¸o tr×nh thiÕt kÕ Web
20
II. THỰC HÀNH
Tạo trang web cho nhóm.
Khởi động Microsoft Front Page 2000.
Soạn trang web cá nhân của nhóm đặt tên là InfoGroup<n>.htm (ví dụ nhóm 1 sẽ lấy tên là InfoGroup1.htm). Các thông tin chính của các thành viên trong nhóm bao gồm: Họ và tên, Công việc và chức vụ hiện nay, Địa chỉ liên lạc, Điện thoại, Fax, Email, Mobile Phone, ... Ngoài ra các nhóm có thể bổ sung các thông tin khác.
Upload trang web đã soạn lên website.
Thử truy cập trang web đã tải lên.
Tham khảo các site thông tin của Việt Nam
http://vnexpress.net/
http://www.vnn.vn/.
http://www.vdc.com.vn
Tham khảo các site bán hàng nổi tiếng
http://shopping.yahoo.com
http://www.amazon.com
Tham khảo các 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/
Tham khảo các site về lao động việc làm tại VN
http://203.162.5.43/ld2000/
http://www.vietname-business.com/jobnld/
http://www.jobsonline.saigonnet.vn/
Tạo trang web chứa các hyperlink dùng để truy cập nhanh
Tạo trang web đặt tên là Links.htm chứa các hyperlink đã đề cập ở trên. Bổ sung thêm các hyperlink và các phân loại khác mà các anh chị đã biết.
Upload lên website và kiểm tra lại.
Tạo trang HomePage
Tạo trang web HomePage đặt tên là Default.htm giới thiệu về nhóm và các công việc mà nhóm đang triển khai.
Kết nối hai trang đã tạo vào HomePage.
Upload lên website và kiểm tra lại.
Chọn chủ đề để thiết kế website
Website về dịch vụ việc làm.
Website về dịch vụ nhà đất (http://www.nhadat.com).
Website báo điện tử (http://vnexpress.net )
Gi¸o tr×nh thiÕt kÕ Web
21
Website trường học.
Website bán hàng (cửa hàng, siêu thị ảo trên Internet)
Website dịch vụ giải trí như ECards, Điện hoa, ...
Các chủ đề khác...
Gi¸o tr×nh thiÕt kÕ Web
22
III. ĐĂNG KÍ WEBSITE MIỄN PHÍ TRÊN INTERNET
Vào địa chỉ http://www.freeservers.com để đăng kí website miễn phí với địa chỉ truy cập có dạng http://<yourname>.freeservers.com
Gõ vào địa chỉ mà bạn dự định đăng kí tại ô yourname. Sau đó click Go. Màn hình tiếp theo sẽ hiện ra, bạn chọn mục cuối cùng 100% Free Hosting Option và click vào SignUp
Gi¸o tr×nh thiÕt kÕ Web
23
Sau đó bạn hãy điền vào các thông tin liên quan cần thiết như Họ tên, mật khẩu, email, … Cuối cùng gõ vào ARTK để chắc rằng bạn đã đồng ý với các qui định của FreeServers khi cung cấp dịch vụ miễn phí này.
Nếu đăng kí thành công, màn hình sau sẽ hiện ra để cung cấp cho bạn một số lựa chọn khi xây dựng website của mình.
Gi¸o tr×nh thiÕt kÕ Web
24
Gi¸o tr×nh thiÕt kÕ Web
25
IV.THIẾT KẾ MỘT SỐ WEBSITE MẪU
Thiết kế website theo mẫu sau (http://greetings.yahoo.com)
Thiết kế website theo mẫu sau (http://www.flowers.com)
Gi¸o tr×nh thiÕt kÕ Web
26
Thiết kế website theo mẫu sau (http://shopping.yahoo.com)
Gi¸o tr×nh thiÕt kÕ Web
27
Thiết kế website theo mẫu sau (http://www.is-edu.hcmuns.edu.vn)
Gi¸o tr×nh thiÕt kÕ Web
28
5. Thiết kế website theo mẫu sau (http://vnexpress.net)
Thiết kế website theo mẫu sau (http://www.codeproject.com)
Gi¸o tr×nh thiÕt kÕ Web
29
Gi¸o tr×nh thiÕt kÕ Web
30
7. Thiết kế website theo mẫu sau (http://www.bttvn.com )
Để tham khảo cách thiết kế các trang web trên, hãy:
Tải về máy bằng cách chọn chức năng Save của IE.
Dùng MS Front Page để mở tập tin đã lưu lên
Chuyển qua lại giữa các màn hình Normal View và HMTL View để biết cách thiết
kế
Với mỗi trang web đã xem hãy chú ý các vấn đề sau:
Cách bố trí các bảng (table)
Cách sử dụng font chữ
Cách chèn vào các hình ảnh để trang trí
Cách định nghĩa các thuộc tính như màu chữ, màu nền, ...
Phần tĩnh (không thay đổi) mỗi khi click vào các hyperlink chuyển qua một nội
dung mới
Từ các trang web trên, hãy tự thiết kế các trang cho website của nhóm.
Gi¸o tr×nh thiÕt kÕ Web
31
PhÇn I
Giíi thiÖu ng«n ng÷ Html 1
I. C¸c thÎ ®Þnh cÊu tróc tµi liÖu 1
1.1 HTML 1
1.2 HEAD 1
1.3 TITLE 1
1.4 BODY 1
II. C¸c thÎ ®Þnh d¹ng khèi 2
2.1. thÎ P 2
2.2. C¸c thÎ ®Þnh d¹ng ®Ò môc H1/H2/H3/H4/H5/H6 3
2.3 ThÎ xuèng dßng BR 3
2.4 ThÎ PRE 3
III. C¸c thÎ ®Þnh d¹ng danh s¸ch 3
3.1. Danh s¸ch th«ng thêng 3
IV. C¸c thÎ ®Þnh d¹ng ký tù 4
4.1. C¸c thÎ ®Þnh d¹ng in ký tù 4
4.2. C¨n lÒ v¨n b¶n trong trang Web 5
4.3. C¸c ký tù ®Æc biÖt 6
4.4. Sö dông mµu s¾c trong thiÕt kÕ c¸c trang Web 6
4.5. Chän kiÓu ch÷ cho v¨n b¶n 8
4.6. Kh¸i niÖm v¨n b¶n siªu liªn kÕt 8
4.7. §Þa chØ t¬ng ®èi 10
4.8. KÕt nèi mailto 10
4.9. VÏ mét ®êng th¼ng n»m ngang 11
V. C¸c thÎ chÌn ©m thanh, h×nh ¶nh 11
5.1. Giíi thiÖu 11
5.2. §a ©m thanh vµo mét tµi liÖu HTML 13
5.3. ChÌn mét h×nh ¶nh, mét ®o¹n video vµo tµi liÖu HTML 13
VI. C¸c thÎ ®Þnh d¹ng b¶ng biÓu 14
VII. FORM 16
Gi¸o tr×nh thiÕt kÕ Web 32
7.1. HTML Forms 16
7.2. T¹o Form 16
7.3. T¹o mét danh s¸ch lùa chän 1 7
7.4. T¹o hép so¹n th¶o v¨n b¶n 1 7
PhÇn II
thiÕt kÕ web sö dông ms frontpage 18
Gi¸o tr×nh thiÕt kÕ Web
33
hiếu trung