Giao trinh thiet ke web 1

22--22000099
GGIIÁÁOO TTRRÌÌNNHH
TTHHII TT KK WWEEBB
LLưưuu HHàànnhh NN ii BB

Giáo Trình Thi t K Web Trung Tâm CNTT (H.U.I)
Trang 1
CHƯƠNG I: GI I THI U V WEB
I.1. CÁC KHÁI NI M CƠ B N:
– Internet là m t m ng máy tính toàn c u trong ñó các máy truy n thông v i nhau theo
m t ngôn ng chung là TCP/IP.
– Intranet ñó là m ng c c b không n i vào Internet và cách truy n thông c a chúng
cũng theo ngôn ng chung là TCP/IP.
– Mô hình Client-Server: là mô hình khách-ch . Server ch a tài nguyên dùng chung
cho nhi u máy khách(Client) như các t p tin, tài li u, máy in… Ưu ñi m c a mô
hình này là ti t ki m v th i gian, tài chính, d qu n tr h th ng…Cách ho t ñ ng
c a mô hình này là máy Server trang thái ho t ñ ng(24/24) và ch yêu c u t phía
Client. Khi Client yêu c u thì máy Server ñáp ng yêu c u ñó.
– Internet Server là các Server cung c p các d ch v Internet(Web Server, Mail Server,
FTP Server…)
– Internet Service Provider(ISP): Là nơi cung c p các d ch v Internet cho khách hàng.
M i ISP có nhi u khách hàng và có th có nhi u lo i d ch v Internet khác nhau.
– Internet Protocol : Các máy s d ng trong m ng Internet liên l c v i nhau theo m t
tiêu chu n truy n thông g i là Internet Protocol (IP). IP Address-ñ a ch IP: ñ vi c
trao ñ i thông tin trong m ng Internet th c hi n ñư c thì m i máy trong m ng c n
ph i ñ nh danh ñ phân bi t v i các máy khác. M i máy tính trong m ng ñư c ñ nh
danh b ng m t nhóm các s ñư c g i là ñ a ch IP. ð a ch IP g m 4 s th p phân có
giá t 0 ñ n 255 và ñư c phân cách nhau b i d u ch m. Ví d 192.168.0.1 ð a ch IP
này có giá tr trong toàn m ng Internet. U ban phân ph i ñ a ch IP c a th gi i s
phân chia các nhóm ñ a ch IP cho các qu c gia khác nhau. Thông thư ng ñ a ch IP
c a m t qu c gia do các cơ quan bưu ñi n qu n lý và phân ph i l i cho các ISP. M t
máy tính khi thâm nh p vào m ng Internet c n có m t ñ a ch IP. ð a ch IP có th
c p t p th i ho c c p vĩnh vi n. Thông thư ng các máy Client k t n i vào m ng
Internet thông qua m t ISP b ng ñư ng ñi n tho i. Khi k t n i, ISP s c p t m th i
m t IP cho máy Client.
– Phương th c truy n thông tin trong Internet: Khi m t máy tính có ñ a ch IP là
x(máy X) g i tin ñ n máy tính có ñ a ch IP là y (máy Y) thì phương th c truy n tin
cơ b n di n ra như sau: N u máy X và máy Y cùng n m trên m t m ng con thì thông
tin s ñư c g i ñi tr c ti p. Còn máy X và Y không cùng n m trong m ng con thì
thông tin s ñư c chuy n t i m t máy trung gian có ñư ng thông v i các m ng khác
r i m i chuy n t i máy Y. Máy trung gian này g i là Gateway.
– World Wide Web(WWW): là m t d ch v ph bi n nh t hi n nay trên Internet. D ch
v này ñưa ra cách truy xu t các tài li u c a các máy ph c v d dàng thông qua các
giao ti p ñ h a. ð s d ng d ch v này máy Client c n có m t chương trình g i là
Web Browser.
– Web Browser(trình duy t): là trình duy t Web. Dùng ñ truy xu t các tài li u trên các
Web Server. Các trình duy t hi n nay là Internet Explorer, Nestcape
– Home page: là trang web ñ u tiên trong web site
– Hosting provider: là công ty ho c t ch c ñưa các trang c a chúng ta lên web
– Hyperlink : tên khác c a hypertextlink
– Publish: làm cho trang web ch y ñư c trên m ng
– URL(Unioform resource locator): m t ñ a ch ch ñ n m t file c th trong ngu n tài
nguyên m ng.

Trang 2
M i ngu n trên web có duy nh t m t ñ a ch r t khó nh . Vì v y, ngư i ta s
d ng URL là m t chu i cung c p ñ a ch Internet c a m t web site ho c
ngu n trên World Wide Web. ð nh d ng ñ c trưng là:
www.nameofsite.typeofsite.countrycode
Ví d :
207.46.130.149 ñư c bi u di n trong URL là www.microsoft.com
URL cũng nh n bi t giao th c c a site ho c ngu n ñư c truy c p. Giao th c
thông thư ng nh t là “http”, m t vài d ng URL khác là “gopher”, cung c p
ñ a ch Internet c a m t thư m c Gopher, và “ftp”, cung c p v trí m ng c a
ngu n FTP.
Có hai d ng URL:
URL tuy t ñ i – là ñ a ch Internet ñ y ñ c a m t trang ho c file, bao
g m giao th c, v trí m ng, ñư ng d n tuỳ ch n và tên file.
Ví d , http:// www.microsoft.com/ms.htm.
URL tương ñ i - mô t ng n g n ñ a ch t p tin k t n i có cùng ñư ng
d n v i t p tin hi n hành, URL tương ñ i ñơn gi n bao g m tên và ph n
m r ng c a t p tin.
Ví d : index.html
– Web server là m t chương trình ñáp ng l i các yêu c u truy xu t tài nguyên t trình
duy t.
I.2. GI I THI U KHÁI QUÁT V WEB
– Web là m t ng d ng ch y trên m ng(Client-Server), ñư c chia s kh p toàn c u.
– Trang web là m t file văn b n ch a nh ng tag HTML ho c nh ng ñ an mã ñ c bi t
mà trình duy t web (Web browser) có th hi u và thông d ch ñư c, file ñư c lưu v i
ph n m r ng là .html ho c htm.
– HTML (HyperText Markup Language), g m các ño n mã chu n ñư c quy ư c ñ
thi t k Web và ñư c hi n th b i trình duy t Web (Web Browser)
Hypertext (Hypertext link), là m t t hay m t c m t ñ c bi t dùng ñ t o
liên k t gi a các trang web
Markup: là cách ñ nh d ng văn b n ñ trình duy t hi u và thông d ch ñư c.
Language: ñây không là ngôn ng l p trình, mà ch là t p nh nh ng quy lu t
ñ ñ nh d ng văn b n trên trang web.
– Trình so n th o trang web :Có th so n th o web trên b t kỳ trình so n th o văn b n
nào. Các trình so n th o ph bi n hi n nay là: Notepad, FrontPage ho c
Dreamweaver.
I.3. TAG HTML:
Tag HTML là nh ng câu l nh n m gi a c p tag “<” và “>”, dùng ñ ñ nh d ng các văn
b n trên trang web. D ng chung c a m t tag HTML là:
<tagName ListProperties> Object </tagName>
Trong ñó:
– TagName : là tên m t tag HTML, vi t li n v i d u “< “, không có kho ng tr ng
– Object : là ñ i tư ng c n ñ nh d ng trong trang Web
– ListPropeties là danh sách thu c tính c a Tag, là nh ng ñ c ñi m b sung vào cho
m t tag, th t các thu c tính trong m t tag là tuỳ ý. N u có t 2 thu c tính tr lên
thì m i thu c tính cách nhau b i kho ng tr ng.
<TagName property1=’value1’ property2=’value2’…>Object</TagName>
– Giá tr c a thu c tính ñư c ñ t trong nháy ñơn ‘ ho c nháy ñôi “.(có th b qua)

Trang 3
– <TagName>: g i là tag m
– </TagName>: g i là tag ñóng. Thông thư ng thì các tag ñ u có tag ñóng. Tuy
nhiên có m t s tag không có tag ñóng
Ví d :<body BGCOLOR=”RED”>n i dung </body>
– Có th có nhi u tag l ng vào nhau, theo nguyên t c tag nào m trư c thì tag ñó
ñóng sau
Ví d :
<Tag1><Tag2>Object</Tag2></Tag1>
<B>Object1<I>Object2 </I></B>
– Trong trang HTML, n u m t tag b sai thì n i dung bên trong Tag ñó không hi n
th trên trình duy t
I.4. C U TRÚC CƠ B N C A TRANG WEB:
1. C u trúc trang web
– Ph n ñ u(<Head></Head>): là ph n ch a thông tin c a trang Web.
– Ph n thân (<Body></Body>): là ph n ch a n i dung c a trang Web.
– Ph n ñ u và ph n thân ñư c ñ t trong c p tag <HTML></HTML>
<HTML>
<HEAD>
N i dung thông tin c a trang web
</HEAD>
<BODY>
N i dung hi n th trên trình duy t
</BODY>
</HTML>
2. Hi n th trang web:
– Kh i ñ ng trình duy t Internet Explorer
– Ch n menu file,open, dùng browse tìm t p tin html m i t o
– Ho c double click vào tên t p tin .htm
I.5. CÁC TAG HTML CƠ B N :
I.5.1. <Title> : Hi n th n i dung tiêu ñ c a trang web trên thanh
tiêu ñ c a trình duy t.
– C p tag <Title> ñư c ñ t trong ph n <Head> c a trang HTML
– Cú pháp:
<TITLE> N i dung tiêu ñ </TITLE>
I.5.2. <Hn>: T o header, g m 6 c p header, ñư c ñ t trong ph n
BODY
– Cú pháp:
<Hn ALIGN= “Direction”> N i dung c a Header </Hn>
Trong ñó:
– Direction: g m các giá tr left, right, center, dùng ñ canh l cho header, m c ñ nh
là canh trái
TagName(m ) Properties TagName(ñóng)

Trang 4
– Ví d :
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
I.5.3. <P> :
– Dùng ñ ng t ño n và b t ñ u ño n m i
– Cú pháp:
<P ALIGN = “Direction”> N i dung c a ño n </P>
– Tag </P> không b t bu c.
– Tag <P> k ti p s t ñ ng b t ñ u m t ño n m i.
I.5.4. <BR>:
– Ng t dòng t i v trí c a c a tag.
Ví d :
<P>
Mary had a little lamb <br>
It’s fleece was white as snow<br>
Everywhere that Mary went <br>
She was followed by a little lamb<br>
</p>
I.5.5. <HR>:
– Dùng ñ k ñư ng ngang trang, không có tag ñóng
– Cú pháp:
<HR Align=”directtion” Width= “Value” Size=value color=#rrggbb>
Trong ñó:
Direction: g m các giá tr left, right, center
Width: ñ dài ñư ng k , tính b ng Pixel ho c %
Size: ñ dày c a ñư ng k , tính b ng pixel
Color: màu ñư ng k , có th dùng tên màu ho c dùng mã #rrggbb
Ví d :
<HTML>
<HEAD><TITLE>Welcome to HTML </TITLE></HEAD>
<BODY>
<H3> My first HTML document</H3>
<HR size = 5 align = center width = 50%>
<HR size = 15 align = left width = 80%>
<P> This is going to be real fun
</BODY>
</HTML>

Trang 5
I.5.6. <FONT>:
– Dùng ñ nh d ng font ch
– ð nh d ng Font ch cho c tài li u thì ñ t tag <Font> trong ph n <Body>
– ð nh d ng t ng ph n ho c t ng t thì ñ t t i v trí mu n ñ nh d ng
– Cú pháp:
<FONT Face=”fontName1, fontName2, fontName3” size=”value” Color=”rrggbb”>
N i dung hi n th
</FONT>
Ví d :
<HTML>
<HEAD>
<TITLE>Welcome to HTML</TITLE>
</HEAD>
<BODY>
<FONT SIZE = 3 COLOR = HOTPINK FACE = Arial>
My first HTML document </FONT>
<P> This is <FONT COLOR=BLUE SIZE = 6>going
</FONT> to be real fun
</BODY>
</HTML>
I.5.7. <BODY > :
– Ch a n i dung c a trang web
– Cú pháp:
<BODY>
N i dung chính c a trang web
</BODY>
– Các thu c tính c a <Body>
BgColor: thi t l p màu n n c a trang
Text: thi t l p màu ch
Link: màu c a siêu liên k t
Vlink: màu c a siêu liên k t ñã xem qua
Background: dùng load m t hình làm n n cho trang
LeftMargin: Canh l trái
TopMargin: Canh l trên c a trang
Ví d :
<HTML>
<HEAD><TITLE> Learning HTML</TITLE></HEAD>
<BODY BGCOLOR=”#0000FF” text=”yellow”>
<FONT COLOR = LIMEGRREN>Welcome to HTML</FONT>
</BODY>
</HTML>
Màu s c: Internet Explorer có th xác l p 16 màu theo tên như sau:
– Black, Silver, Gray, White, Maroon, Red, Purple, Fuchsia, Green, Lime, Olive,
Yellow, Navy, Blue, Teal, Aqua.
– M t s mã th p l c phân c a màu :#RRGGBB

Trang 6
Mã th p l c phân Màu
#FF0000 RED
#00FF00 GREEN
#0000FF BLUE
#000000 BLACK
#FFFFFF WHITE
I.5.8. <IMG> :
– Dùng ñ chèn m t hình nh vào trang Web
– Cú pháp:
<Img src=”URL” alt=”Text” width=value height=value border=value>
o Src: xác ñ nh ñư ng d n t p tin c n load, s d ng ñư ng d n tương ñ i
<Img src=”../images/h1.gif”> .
o Alt: ch a n i dung văn b n thay th cho hình nh khi hình không load v
ñư c, n u load v ñư c thì s xu t hi n n i dung trong textbox m i khi
ngư i dùng ñưa chu t t i hình.
o Width, Height: dùng ñ xác ñ nh ch ñ phóng to thu nh hình nh.
o Align =” left/ right/top/bottom”: so hàng gi a hình nh và text
I.5.9. <BgSound> :
– Dùng ñ chèn m t âm thanh vào trangWeb. Âm thanh này s ñư c phát m i khi
ngư i s d ng m trang Web.
– Cú pháp:
<BgSound src=”filenhac” Loop=value>
o Src ch a ñ a ch file nh c, file này có ph n m r ng .mp3 , mdi, …
o Loop xác ñ nh ch ñ l p ñi l p l i c a bài hát, n u value< 0 thì l p vô
h n, value=n thì l p l i n l n r i t ñ ng t t.
I.5.10. <EMBED>:
– Cho phép ñưa âm thanh tr c ti p vào trang WEB.
– Cú pháp:
<EMBED SRC="URL" >
Ví d :
<EMBED SRC="clouds.mid" WIDTH="145" HEIGHT="61">
I.5.11. <Marquee></Marquee> :
– Dùng ñ ñi u khi n ñ i tư ng ch y m t cách t ñ ng trên trang Web
– Cú pháp:
<Marquee >Object</Marquee>
– Các thu c tính c a Marquee :
o Direction =up/ down / left / right dùng ñ ñi u khi n hư ng ch y.
o Behavior=alternate: ñ i tư ng ch y t l này sang l kia và ngư c l i.
Ví d :
<Marquee direction=up>ð i tư ng ch y lên </Marquee>
I.5.12. : N i dung trong c p tag này không hi n th
trong trang

Trang 7
Cú pháp: <! -- N i dung l i chú thích -->
I.5.13. <B>: ñ nh d ng ch ñ m
– Cú pháp
<B> N i dung ch ñ m</B>
Ví d :
<P><B> This is good fun</B></P>
I.5.14. Tag <I>: ð nh d ng ch nghiêng
– Cú pháp:
<I> N i dung ch nghiêng</I>
I.5.15. Tag <U>: G ch chân văn b n
– Cú pháp:
<U> N i dung ch g ch chân</U>
Ví d :
ð nh d ng kh i văn b n v a ñ m, nghiêng và g ch chân
<B><I><U> Trư ng ðHCN TP HCM</U></I></B>
I.5.16. Tag <BIG> và <SMALL>:
– Ch nh c ch to ho c nh hơn c ch xung quanh
– Cú pháp
<BIG>N i dung ch to </BIG>
<SMALL>N i dung ch nh </SMALL>
I.5.17. Tag <SUP> và <SUB> :
– ðưa ch lên cao ho c xu ng th p so v i văn b n bình thư ng
– Cú pháp:
<SUP>N i dung ch dưa lên cao </SUP>
<SUB>N i dung ch ñưa xu ng th p </SUB>
Ví d :
a<SUP>2</SUP>
H<SUB>2</SUB>O
I.5.18. <STRIKE>:
– G ch ngang văn b n
– Cú pháp:
<STRIKE>N i dung văn b n b g ch ngang </STRIKE>
I.5.19. <CODE>…</CODE>:
– Dùng ñ nh p m t dòng mã có ñ nh d ng ký t riêng. Dòng mã này không ñư c
th c hi n mà ñư c hi n th dư i d ng văn b n bình thư ng
– Cú pháp:
<CODE>
N i dung văn b n mu n ñ nh d ng
</CODE>

Trang 8
Ví d :
<CODE>
If (x > 0) <br>
x = x + 1<br>
else <br>
y = y + 1
</CODE>
I.5.20. <EM>: Văn b n ñư c nh n m nh (gi ng tag <I>)
– Cú pháp:
<EM>Văn b n ñư c nh n m nh</EM>
I.5.21. <STRONG>: ð nh d ng ch ñ m (gi ng <B>)
– Cú pháp:
<STRONG>Văn b n ñư c nh n m nh</STRONG>
I.5.22. <BLOCKQUOTE>:
– Dùng phân cách m t kh i văn b n ñ nh n m nh, ño n văn b n này ñư c tách ra
thành m t paragraph riêng, thêm kho ng tr ng trên và dư i ño n ñ ng th i th t vào
so v i l trái (tương ñương ch c năng c a phím tab)
– Cú pháp:
<BLOCKQUOTE>
N i dung kh i văn b n nh n m nh
</BLOCKQUOTE>
Ví d :
<HTML>
<HEAD><TITLE>Learning HTML</TITLE><HEAD>
<BODY>
<BLOCKQUOTE><FONT color = hotpink>
Humpty Dumpty sat on a wall
Humpty Dumpty had a great fall
All the King’s horses
And all the King’s men
Could not put Humpty Dumty together again
</FONT>
</BLOCKQUOTE>
</BODY>
</HTML>
I.5.23. <PRE>:
– Gi nguyên các ñ nh d ng như: ng t dòng, kho ng cách, thích h p v i vi c t o
b ng
– Cú pháp:
<PRE>
N i dung văn b n c n ñ nh d ng tr ơc v i t t c ñ nh d ng kho ng cách,
xu ng dòng và ng t hàng
</PRE>

Trang 9
Ví d :
<HTML>
<HEAD><TITLE>Learning HTML</TITLE><HEAD>
<BODY>
<PRE>
Humpty Dumpty sat on a wall
Humpty Dumpty had a great fall
All the King’s horses
And all the King’s men
Could not put Humpty Dumty together again
</PRE>
</BODY>
</HTML>
I.5.24. <DIV> <SPAN>:
– Chia văn b n thành các kh i, có chung m t ñ nh d ng
<DIV> chia văn b n thành m t kh i b t ñ u t m t dòng m i.
<SPAN> tách kh i nhưng không b t ñ u t m t dòng m i
– Cú pháp:
<DIV>N i dung c a kh i b t ñ u t m t dòng m i </DIV>
<SPAN>N i dung c a kh i trong 1 dòng </SPAN>
Ví d :
<HTML>
<HEAD><TITLE> Learning HTML</TITLE></HEAD>
<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<Br>
<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>

Trang 10
I.5.25. Các ký t ñ c bi t:
a. L n hơn (>): >
Ví d :
<CODE>
If A > B
Then <BR>
A = A + 1
</CODE>
b. Nh hơn (<): <
Ví d :
<CODE>
If A < B
Then <BR>
A = A + 1
</CODE>
c. C p nháy””: "
Ví d :
<BODY>
" To be or not to be? " That is the question
</BODY>
d. Ký t và &: &
Ví d :
<P> William & Graham went to the fair
e. Ký t kho ng tr ng:  
I.6. M T S THAO TÁC TRONG C A S TRÌNH DUY T
– Cách load l i trang Web: Click bi u tư ng Refresh (F5) trên thanh công c .
– Ch nh s a size ch hi n th trên trang: Ch n Menu View->Text size
– Ch nh l i font ch : Ch n Menu View->EnCoding
– Trong trư ng h p trang Web không hi n th ñư c Font ti ng Vi t:
– Ch n menu Tool ch n Internet Options->Ch n Tab Fonts ch n Font ti ng Vi t
– N u ch n r i mà không hi n th ñư c font ti ng Vi t thì ch n Menu
View >EnCoding ch n các font như User defined,Vietnamese….
– Các tuỳ ch n khác cho trang Web: Tools Internet option: Không Load hình xu ng,
ñ nh d ng liên k t,…
– Ch n trang web m c ñ nh khi m trình duy t

Trang 11
Hình 1
Hình 2

Trang 12
– Tab General(Hình 1): thi t l p các tùy ch n cho trình duy t
– Click nút Use Current: ch n trang hi n t i ñ load lên m i l n kh i ñ ng IE
– Use Default: ñ a ch trang Web m c ñ nh m i khi m trình duy t
Ví d m i khi m IE thì t ñ ng hi n th trang Web Yahoo trong ô Address
nh p: http://yahoo.com , n u ch n Use Blank thì hi n th trang tr ng .
– History: lưu l i các trang web ñã duy t qua t i máy Client và thông tin ñăng
nh p c a user hi n hành…
– N u kh ng mu n lưu l i: Ch n Delete Cookies và Delete Files.
– Có th thi t l p kho ng th i gian lưu tr trang trong ñ i tư ng History
b ng cách thay ñ i giá tr trong ô “Days to keep pages in history” .
– N u mu n xoá ñ i tư ng này thì nh n Clear history.
– Tab Advance(Hình 2): có th ch n các tùy ch n khác như:
– Ngăn ch n không cho t i hình xu ng trang web
– Màu liên k t, cách th hi n liên k t trên trang
– Copy hình nh t trang Web: Click ph i vào hình nh c n sao chép r i
ch n Save picture as, ho c Save background as,…
– Load v trang Web bao g m các hi u ng, script, hình nh… ch a trên
trang: Ch n Menu File Save As Ch n v trí lưu file Save.
– Hi u ch nh trang Web: View source->hi u ch nh ch n File Save ñ lưu
l i F5 ñ c p nh t l i n i dung v a hi u ch nh

Trang 13
CHƯƠNG II: SIÊU LIÊN K T-HÌNH NH
II.1. GI I THI U SIÊU LIÊN K T
II.1.1. Siêu liên k t:
Kh năng chính c a HTML là h tr các siêu liên k t. M t siêu liên k t cho phép ngư i
truy c p có th ñi t trang web này ñ n trang web khác. M t liên k t g m 3 ph n:
– Ngu n: ch a n i dung hi n th khi ngư i dùng truy c p ñ n, có th là m t trang web
khác, m t ño n film, m t hình nh ho c m t h p tho i ñ g i mail…
– Nhãn: có th là dòng văn b n ho c hình nh ñ ngư i dùng click vào khi mu n truy c p
ñ n liên k t, n u nhãn là văn b n thì thư ng ñư c g ch dư i
– ðích ñ n (target): xác ñ nh v trí ñ ngu n hi n th .
II.1.2. Các lo i liên k t
– Internal Hyperlink:(Liên k t trong) là các liên k t v i các ph n trong cùng m t tài li u
ho c liên k t các trang trong cùng m t web site.
– External Hyperlink (Liên k t ngoài) là các liên k t v i các trang trên web site khác.
II.2. T O SIÊU LIÊN K T
Cú pháp:
<A HREF=”URL”> Nhãn </A>
– Dùng URL tương ñ i ñ liên k t ñ n các trang trong cùng m t website
Ví d :
<HTML>
<HEAD> <TITLE> Using links</TITLE></HEAD>
<BODY>
<A HREF = “Doc2.htm”>Click here to view document 2</A>
</BODY>
</HTML>
– Dùng URL tuy t ñ i ñ liên k t ñ n các trang trong website khác
Ví d :
<A href="http://www.google.com"> liên k t ñ n Google</A>
II.2.1. Liên k t v i các ph n trong cùng m t trang web
– N u n i dung c a trang quá dài thì nên t o các Bookmark ñ nh y ñ n m t ph n c
th nào ñó trên chính trang web hi n hành.
– Cách t o liên k t ñ n các ph n trong cùng trang: g m 2 bư c

Trang 14
T o BookMark:
<A name=”tên Bookmark”> Nhãn </A> N i dung
T o liên k t ñ n Bookmark:
<A Href =”#tên Bookmark”>Nhãn c a text liên k t</A>
Ví d :
<HTML>
<HEAD><TITLE> Using htm links</TITLE> </HEAD>
<BODY>
<A HREF = “#Internet”>Internet</A><BR>
<A HREF = “#HTML”>Introduction to HTML</A><BR>
<A name = “Internet”>Internet</A>
Internet là m t m ng c a các m ng. Nghĩa là, các m ng máy tính
ñư c liên k t v i các m ng khác, n i các nư c và ngày nay là toàn
c u. Giao th c truy n thông là TCP/IP cung c p liên k t v i t t c
các máy tính trên th gi i
<A name = “HTML”>Introduction to HTML</A><BR>
Ngôn ng ñánh d u siêu văn b n là ngôn ng chu n mà web s
d ng ñ t o và nh n ra tài li u. M c dù không ph i là m t t p con
c a ngôn ng nâng c p tiêu chu n t ng quát (SGML), ngôn ng
ñánh d u siêu văn b n cũng có liên quan v i SGML. SGML là m t
phương pháp trình bày các ngôn ng ñ nh d ng tài li u. HTML là
ngôn ng ñánh d u ñư c s d ng ñ t o tài li u HTML. Các hư ng
d n ch rõ m t trang web nên ñư c hi n th như th nào trong trình
duy t
</BODY>
</HTML> K t qu trên trình duy t

Trang 15
II.2.2. Liên k t v i m t Bookmark m t tài li u khác
Cú pháp:
<A href=”http://www.site.com/path/Page.htm#tên Bookmark”>
Ví d :
– Trang main.htm
<HTML>
<HEAD><TITLE> Main document</TITLE></HEAD>
<BODY>
<A HREF = “C:Doc1.htm#Internet”>Internet</A><br>
<A HREF = “C:Doc1.htm#HTML”>Introduction to
HTML</A><br>
</BODY>
</HTML>
– Trang Doc1.htm
<HTML>
<HEAD><TITLE>Using Links</TITLE></HEAD>
<BODY>
<A name = “Internet”>Internet</A><BR>
Internet là m t m ng c a các m ng. Nghĩa là, m ng máy tính ñư c
liên k t v i các m ng khác, n i v i các nư c và ngày nay là toàn
c u. Giao th c truy n TCP/IP cung c p liên k t v i t t c các máy
tính trên th gi i.
<A name = “HTML”>Introduction to HTML</A><BR>
Ngôn ng ñánh d u siêu văn b n là ngôn ng chu n mà web s
d ng ñ t o và nh n ra tài li u. M c dù không ph i là m t t p con
c a ngôn ng nâng c p tiêu chu n t ng quát (SGML), ngôn ng
ñánh d u siêu văn b n cũng có liên quan v i SGML. SGML là m t
phương pháp trình bày các ngôn ng ñ nh d ng tài li u. HTML là
ngôn ng ñánh d u ñư c s d ng ñ t o tài li u HTML.
</BODY>
</HTML>
II.2.3. Liên k t ñ n h p thư e-mail
Cú pháp:
<A href=”mailto:ñ a ch Email”>Nhãn</A>
– N u siêu liên k t ñ t cu i trang thì dùng tag <ADDRESS>
Cú pháp:
<Address><A href=”mailto:ñ a ch Email”>Nhãn</A></Address>
II.3.HÌNH NH TRÊN TRANG WEB:
II.3.1. Các lo i nh :
a) nh .Gif (Graphics Interchange Format): ñư c s d ng ph bi n nh t trong các tài
li u HTML, d chuy n t i, ngay c các k t n i s d ng MODEM t c ñ ch m, h
tr 256 màu GIF. Các file GIF ñư c ñ nh d ng không ph thu c ph n n n
b) nh JPEG (Joint PhotoGraphic Expert Group) có ph n m r ng .JPG, là lo i nh
nén m t thông tin, nghĩa là nh sau khi b nén không gi ng như nh g c. Tuy nhiên,
trong quá trình phát l i thì nh cũng t t g n như nh g c. JPEG h tr hơn 16 tri u
màu và thư ng ñư c s d ng cho các nh có màu th c.

Trang 16
c) nh PNG (Portable Network Graphics) nén không m t d li u
II.3.2. Chèn hình nh
Cú pháp:
<IMG Src=URL Border=n Alt=”N i dung thay th ”>
URL: ñ a ch c a t p tin hình nh, thư ng s d ng ñ a ch tương ñ i, ví d :
<img src=”../image/hinh.gif”> không ph thu c v trí c a t p tin nh trên ñĩa
n: ñ dày c a ñư ng vi n, tính b ng pixel
Alt: N i dung thay th s hi n th khi hình không load ñư c, ho c khi ñưa chu t ngang
qua hình
II.3.3. Các thu c tính c a nh:
a) Dàn văn b n quanh hình nh:
<IMG SRC=URL Align= left> N i dung văn b n quanh hình nh
<IMG SRC=URL Align= Right> N i dung văn b n quanh hình nh
Ví d :
b) Kích thư c nh:
<IMG width=Value Height=Value>
Ví d :
<html>
<head><title>Image</title></head>
<body>
<img src="../image/Blue%20hills.jpg" width="150"
height="150">
</body>
</html>
c) Ch n văn b n bao quanh hình:
Canh l khi dàn văn b n xung quanh m t nh s tác ñ ng ñ n t t c các văn b n sau
ñó n u không chèn vào m t dòng k ñ c bi t. Thu c tính CLEAR trong tag BR làm
cho văn b n không b t ñ u n u l c th không b xóa ñi (nghĩa là t i c nh dư i c a
nh)
Cú pháp:
<BR CLEAR=Right> : Ngăn ch n văn b n dàn bên l ph i c a nh
<BR CLEAR=Left> : Ngăn ch n văn b n dàn bên l trái c a nh
<BR CLEAR=All> : Ngăn ch n văn b n dàn hai bên l c a nh

Trang 17
d) Thêm kho ng tr ng xung quanh nh
N u không mu n văn b n dàn xung quanh l trái c a nh thì ta có th thêm kho ng
tr ng xung quanh nh
Cú pháp:
<IMG SRC=URL HSPACE=n VSPACE=m>
HSPACE=n: Kho ng tr ng ñư c tính b ng pixel s thêm vào c bên ph i và bên
trái c a nh
VSPACE=m: Kho ng tr ng ñư c tính b ng pixel s thêm vào c bên trên và bên
dư i c a nh
e) Canh l cho nh: Có th canh l cho nh so v i m t dòng văn b n trong m t ñ an
Cú pháp:
<IMG SRC=URL ALIGN= “Direction”>Văn b n mu n canh l so v i nh
Direction: g m các giá tr : top, bottom, middle, texttop
Ví d :
II.3.4. Dùng nh làm liên k t:
Có th dùng hình nh ñ t o m t liên k t ñ n m t trang khác, ho c n u có m t nh l n,
b n có th t o nh nh hơn ho c m t bi u tư ng cho nó ñ nó có th hi n th nhanh
chóng trên trang web, sau ñó t o liên k t ñ ñưa ngư i truy c p ñ n nh có kích thư c
th t
Cú pháp:
<A HREF=”ð a ch trang liên k t”>
<IMG SRC=URL Alt=”n i dung thay th ”>Nhãn
</A>
II.3.5. B n ñ nh:
B n ñ nh là m t nh trong trang web ñư c chia ra làm nhi u vùng, m i vùng khi click
vào s liên k t ñ n m t ñ a ch URL
Cách t o:Trư c h t ph i chèn vào trang m t nh và ñ t nhãn cho nh
<IMG UseMap=”Label”>
<Map Name=”Label”>
<Area Shape= “type” coords=”x1,y1,x2,y2, …” href=”URL”>
</Map>

Trang 18
Trong ñó:
- Label: tên c a b n ñ nh
- Type: hình d ng c a các vùng trên nh, g m các lo i:
• Rect: Vùng hình ch nh t
• Circle: Vùng hình tròn
• Poly: Vùng hình ña giác
- Coords:to ñ các ñ nhc a hình
• Rect: (x1, y1, x2, y2) là to ñ 2 ñ nh chéo c a vùng hình CN
• Circle: (x, y, r) l n lư t là to ñ tâm và bán kính c a vùng hình tròn
• Poly: (x1, y1, x2, y2, x3, y3, …) là các ñ nh c a vùng hình ña giác
Ví d :
<html>
<head>
<title>Image</title>
</head>
<body>
<img src="../image/Blue%20hills.jpg" width="150" height="150" border="0"
usemap="#Map1">
<map name="Map1">
<area shape="rect" coords="73,3,149,66" href="B1.htm">
<area shape="poly" coords="152,81,71,75,62,109,97,123" href="B3.htm">
<area shape="circle" coords="37,32,27" href="b2.htm">
</map>
</body>
</html>
II.3.6. Hình n n :
Trong h u h t các trang web thư ng s d ng n n màu, v i m c ñích là làm n i b t n i
dung trang ñó. Tuy nhiên cũng có th s d ng hình nh ñ làm n n b ng thu c tính
BACKGROUND c a th BODY.
<BODY BACKGROUND= “bgimage.gif”>
yy
x
x

Trang 19
CHƯƠNG III: DANH SÁCH
III.1. DANH SÁCH KHÔNG CÓ TH T (Unorder List -UL)
Cú pháp:
<UL Type= Shape1>
<LI Type= Shape 2> N i dung 1
<LI Type= Shape 2> N i dung 2
…
</UL>
− Shape 1, Shape 2 là lo i bullet t ñ ng ñ t ñ u dòng trong danh sách
− Shape 1: nh hư ng ñ n toàn danh sách
− Shape 2: nh hư ng ñ n m t m c trong danh sách
− Các lo i shape:
o Circle: Bullet tròn, r ng
o Square: Bullet vuông
o Disc: Bullet tròn không r ng
Ví d :
<HTML>
<HEAD><TITLE>Learning HTML</TITLE>
<BODY>
<UL type=”Square”>
<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>
III.2. DANH SÁCH CÓ TH T (OrderList – OL)
Cú pháp:
<OL Type=x Start =n >
<LI Type =x1 Value=m> N i dung 1
<LI Type =x1 Value=m> N i dung 2
…
</OL>

Trang 20
− x: lo i ký t mu n s d ng trong danh sách g m :
A: Ch hoa
a: Ch thư ng
I: S la mã hoa
i: S la mã thư ng
1: Cho s m c ñ nh
− n: giá tr ñ u tiên c a danh sách
− x1: là lo i ký t s d ng cho dòng này và dòng ti p theo, làm m t nh hư ng c a x
− m: giá tr ñ u tiên c a dòng này, làm thay ñ i giá tr c a n
Ví d 1:
<HTML>
<HEAD><TITLE>Learning HTML</TITLE>
<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
<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>
Ví d 2: Có th l ng 2 lo i danh sách có th t và không có th t vào nhau
<HTML>
<HEAD><TITLE>Learning HTML</TITLE></HEAD>
<BODY>
<OL>
<LI>Monday
<UL>
<LI >Introduction to HTML
<LI >Creating Lists
</UL>
<LI>Tuesday
<UL type=’Disc’>
<LI >Creating Tables
<LI >Inserting Images
</UL>

Trang 21
<LI>Wednesday
<UL type=’cycle’>
<LI >Creating Forms
<LI >Working with Frames
</UL>
<LI>Thursday
<LI>Friday
</OL>
</BODY>
<HTML>
III.3. DANH SÁCH ð NH NGHĨA:
Trong HTML có m t tag ñ c bi t dùng ñ t o danh sách ñ nh nghĩa dành riêng cho vi c tra
c u, nhưng cũng thích h p cho danh sách nào ñ n i m t t v i m t di n gi i dài.
Cú pháp:
<DL>
<DT>Nh p t mu n ñ nh nghĩa
<DD>Nhâp n i dung ñ nh nghĩa
…
</DL>
Ví d :
<HTML>
<HEAD>
<TITLE>Learning HTML</TITLE>
</HEAD>
<BODY>
<h2> Definition List</h2>
<DL>
<DT>Pixel
<DD> Short for picture element. A pixel refers to the small dots that
make up an image on the screen. Pixel depth refers to the number of
colours which may be displayed.
<DT>Resolution
<DD>The quality of the display on a monitor. The higher the
resolution, the sharper the image. The number of pixels that can be
displayed on a screen defines resolution.
<DT>Scanner
<DD> A hardware device that allows the user to make electronic
copies of graphics or text.
</DL>
</BODY>
</HTML>

Trang 22

Trang 23
CHƯƠNG IV: B NG VÀ TRÌNH BÀY TRANG
IV.1. B NG
B ng thư ng ñư c s d ng ñ t o các văn b n nhi u c t ho c phân chia trang thành nhi u
vùng khác nhau r t ti n l i trong thi t k và trình bày trang web
Cú pháp:
<TABLE >
<TR>
<TD>N i dung trong ô 1</TD>
…
<TD>N i dung trong ô n</TD>
</TR>
<TR>
…
<TD>N i dung trong ô n</TD>
</TR>
…
</TABLE>
– Tag <table> </table> : ch th m t b ng
– Tag <tr>……</tr> : xác ñ nh m t dòng c a b ng
– Tag <td>……</td>: xác ñ nh m t ô ch a d li u c a b ng. D li u trong ô có th là
văn b n ho c hình nh…
Ví d 1:
<HTML>
<HEAD>
<TITLE>TABLE</TITLE>
</HEAD>
<BODY >
<table border="1">
<TR>
<TD>Cell 1</TD>
<TD>Cell 2</TD>
<TD>Cell 3</TD>
<TD>Cell 4</TD>
</TR>
</table>
</BODY>
</HTML>
Dòng 1
Dòng 2
C t 1
C t 2

Trang 24
Ví d 2:
<HTML>
<HEAD>
</HEAD>
<BODY >
<table border="1">
<TR>
<TD>Cell 1</TD>
</TR>
<TR>
<TD>Cell 2</TD>
</TR>
<TR>
<TD>Cell 3</TD>
</TR>
<TR>
<TD>Cell 4</TD>
</TR>
</table>
</BODY>
</HTML>
Ví d 3:
<HTML>
<HEAD>
</HEAD>
<BODY >
<table border="1">
<TR>
<TD>Cell 1</TD>
<TD>Cell 2</TD>
</TR>
<TR>
<TD>Cell 3</TD>
<TD>Cell 4</TD>
</TR>
</table>
</BODY>
</HTML>
IV.2. CÁC THU C TÍNH:
IV.2.1. Thu c tính c a b ng
f) Thêm khung vi n:
<Table Border =n>…<Table>
n: ñ dày c a khung vi n tính b ng Pixel
g) ð nh màu c a khung vi n và màu n n:

Trang 25
<Table BorderColor= “Color” BgColor=”Color”>…</Table>
h) T o bóng :
<Table BorderColorDark= “Color”> : Bóng ñ c nh dư i và ph i c a b ng
<Table BorderColorLight= “Color”> : Bóng ñ c nh trên trái c a b ng
i) ð nh chi u r ng và chi u cao c a b ng:
<Table Width =n height=m>, n là chi u r ng tính b ng Pixel
j) Canh l b ng:
<Table Align= left/ right/ center>…</table>
k) Thu c tính Cellpadding và CellSpacing:
<Table CellSpacing =”value”>: Kho ng cách gi a ñư ng vi n c a các ô
<Table CellPadding=”Value”>: Kho ng cách gi a ñư ng vi n c a ô v i văn
b n
l) Tag tiêu ñ c a Table:
<Caption> tiêu ñ </Caption>
- Tag <Caption> n m trong c p Tag <Table>…</Table>
IV.2.2. Thu c tính c a c t
a) Canh l theo chi u ngang:
<Td Align=left/ right/center>…</Td>
b) Canh l theo chi u ñ ng:
<Td Valign= Top/ Bottom/ Middle>…</Td>
c) Tr n ô:
<Td Colspan=n>: tr n n c t
<Td RowSpan=n>: tr n n dòng
d) Tag <th>:
Có tác d ng như <td> nhưng làm cho d li u trong ô ñư c in ñ m và canh gi a
<tr>
<th> N i dung </th>
</tr>
Ví d :
<TABLE border=2>
<tr>
<th> Cell 1 </th>
</tr>
<tr>
<th> Cell 2 </th>
</tr>
<TABLE>

Trang 26
Ví d :
<HTML>
<HEAD>
</HEAD>
<BODY >
<table border="5" CellSpacing =10 BorderColorDark=red width=50%>
<TR>
<TD>Cell 1</TD>
<TD>Cell 2</TD>
</TR>
<TR>
<TD>Cell 3</TD>
<TD>Cell 4</TD>
</TR>
</table>
</BODY>
</HTML>
Ví d :
<Table border="1" bgcolor= “fuschia” bordercolor=”red” align=”center” Width=50%
Height=30%>
<caption> Properties of Table</caption>
<tr>
<th colspan="3"> Colspan</th>
</tr>
<tr>
<th Rowspan=”2”> Rowspan</th>
<td align=center>Cell 1</td>
<td align=center>Cell 2</td>
</tr>
<tr>
<td align=center> Cell 3</td>
<td align=center> Cell 4</td>
</tr>
</table>
Ví d : Thi t k m t trang web như m u

Trang 27
<html>
<head>
<title> Trinh bay trang</title>
</head>
<body>
<Table width="68%" height="135" border="1" cellspacing="0"
bordercolor="#990033">
<tr>
<th colspan="2" bgcolor="#FFCCFF">
<div align="center">Computer Model </div>
</th>
</tr>
<tr>
<td width="24%" height="98" valign="top">
<table width="100%" border="1" cellspacing="0">
<tr>
<td>Tin tuc</td>
</tr>
<tr>
<td>Giai tri</td>
</tr>
<tr>
<td>Quang cao</td>
</tr>
<tr>
<td height="23">The thao</td>
</tr>
</table>
</td>
<td width="76%" align="center">
<img src="../images/h2.jpg" width="106" height="92">
</td>
</tr>
</table>
</body>
</html>
IV.3. TRÌNH BÀY TRANG
Trong th c t , b ng thư ng ñư c s d ng ñ trình bày b c c cho toàn b trang web. N u
mu n thi t k m t trang th hi n văn b n trong c t d ng báo chí ho c phân trang thành
nh ng vùng có ch ñ khác nhau, thì b ng là m t công c c n thi t. M t trong nh ng nét
ñ c trưng h u d ng c a b ng ñó là trong m i table cell b n có th s d ng b t kỳ tag
HTML nào, ví d b n có th chèn m t tag <H1> trong m t cell ho c m t danh sách có th
t các m c ho c có th chèn m t b ng con trong m t b ng khác…
Ví d :
C n thi t k trang web g m nhi u vùng v i nh ng ch ñ khác nhau như hình
dư i ñây, thì b ng là công c h u hi u

Trang 28
Bư c 1: T o m t table th nh t g m 1 dòng và 2 c t
<table>
<tr>
<td>

</td>
<td>
<!--Tabble 2 -- >
</td>
</tr>
</table>

Trang 29
Bư c 2: t o table th 2 g m 3 dòng và 2 c t
<table>
<tr>
<td colspan =2>
<!—Chèn hình logo-->
</td>
</tr>
<tr>
<td rowspan =2>
<!--N i dung 1 -- >
</td>
<td>
<!--N i dung 2 -- >
</td>
</tr>
<tr>
<td>
<!--N i dung 3 -- >
</td>
</tr>
</table>

Trang 30
CHƯƠNG V: FRAME
V.1.KHÁI QUÁT V FRAME
−−−− Có th phân chia m t trang thành các khung, cho phép ngư i truy c p cùng m t lúc có
th xem nhi u trang mà không c n cu n màn hình, m i khung ch a m t trang web riêng
−−−− N u tài trang s d ng Frame thì không s tag Body
V.2.CÁCH T O M T FRAME LAYOUT
<HTML>
<HAED>
<TITLE>Page Title</TITLE>
</HEAD>
<FRAMESET>
Frame Definitions
</FRAMESET>
</HTML>
V.2.1. Các d ng frame : Tag <FRAMESET> có 2 thu c tính ROWS và
COLS
a) T o frame theo dòng
Cú pháp:
<HTML>
<HEAD><TITLE>N i dung tiêu ñ </TITLE></HEAD>
<Frameset Rows=”a, b…” >
<Frame name=”Name1” Src=”Content1.htm>
…..
<Frame name=”Name_n” Src=”Content_n.htm>
</Frameset>
</HTML>
Trong ñó:
a, b: là ñ cao c a các dòng th 1, th 2 …, có th tính b ng pixel ho c b ng %
Name: tên khung, (xác ñ nh ch c năng c a khung)
Content.htm: ñ a ch trang web xu t hi n ñ u tiên trong khung
Ví d :
<HTML>
<HEAD><TITLE>Frame</TITLE></HEAD>
<Frameset Rows=20%, 60%, 20% >
<Frame name=”Head” Src=”head.htm>
<Frame name=”Content1” Src=”Content1.htm>
</Frameset>
</HTML>
20%
20%
60%
<Frameset Rows=20%, 60%, 20%
>

Trang 31
b) T o frame theo c t
Cú pháp:
<HTML>
<HEAD><TITLE>N i dung tiêu ñ </TITLE></HEAD>
<Frameset Cols=”a, b…” >
…..
<Frame name=”Name_n” Src=”Content_n.htm>
</Frameset>
</HTML>
Ví d :
<HTML>
<HEAD><TITLE>Frame</TITLE></HEAD>
<Frameset Cols=30%, 30%, * >
<Frame name=”Baner” Src=”head.htm>
</Frameset>
</HTML>
V.2.2. Các thu c tính c a Frame:
a) Noresize: Không ñ i kích thư c
b) Scrolling: có/không có thanh cu n
Auto: Xu t hi n thanh cu n khi n i dung dài
Yes: luôn xu t hi n thanh cu n
No: không xu t hi n thanh cu n
Ví d :
<frameset rows="80,*" cols="*" frameborder="NO" border="0" >
<frame noresize src="topFrame" scrolling="NO" >
<frame noresize src="leftFrame" scrolling="NO" >
</frameset>
c) Frameborder: ñư ng vi n c a khung m c ñ nh là 1, mu n gi a các khung không
còn ñư ng vi n thì trong tag Frameset nh p thêm Border=0,
d) Marginwidth: hi u ch nh kho ng cách t n i dung ñ n l trái và ph i c a khung
(tính b ng pixel)
e) Marginheight: hi u ch nh kho ng cách t n i dung ñ n l trên và dư i c a khung
(tính b ng pixel)
30%
30%
*
<Frameset Cols=30%, 30%, * >

Trang 32
V.2.3. Các frame l ng nhau:
<Frameset >
<Frame name=”name” src=”Page.htm”>
<Frameset>
<Frame name=”name” src=”Page.htm”>
…
</Frameset>
…
</Frameset>
V.2.4. Liên k t frame:
Trang ñ u tiên c a khung ñư c ch ra trong thu c tính SRC, ta có th ch nh các trang
khác cùng xu t hi n trong khung ñó b ng cách ch ra v trí trang ñích
T i trang mu n t o liên k t v i khung, ta nh p cú pháp:
<a Href=”Page.htm Target=”name”>
Nhãn m c liên k t
</a>
Trong ñó :
Target=Name : tên c a khung mà trang mu n liên k t ñ n trong tag <Frame>
Page.htm: trang hi n th trong khung liên k t
Tag <Base>:
N u có nhi u liên k t ñ n các trang xu t hi n trong cùng m t khung thì thu c tính
target m c ñ nh ñ t trong tag <Base>
<Head>
<Base target=”name”>
<a href=”URL”>Nhãn liên k t</a>
…
</head>
Ví d : Thi t k trang web như sau:
Topframe
Mainframe
Leftframe

Trang 33
Cách th c hi n:
Trang chính: Chia trang thành 3 khung: topframe, leftframe và mainframe. Trang
Photo.htm ñ t trong left frame, logo.htm ñ t trong Topframe, Bester.htm, DuMont.htm,
Jacobs.htm ñ t trong mainframe
<HTML>
<HEAD><TITLE>Staff of The Colorado Experience</TITLE>
<FRAMESET ROWS="60,*">

<FRAME SRC="Logo.htm" marginheight=1 noresize scrolling=NO
name=Topframe>

<FRAMESET COLS="140,*">

<FRAME SRC="Photos.htm" NAME=Leftframe>

<FRAME SRC="Bester.htm" NAME=Mainframe>
</FRAMESET>
</FRAMESET>
</HEAD>
</HTML>
Trong ñó các trang Logo.htm, Photos.htm, Bester.htm ph i ñư c t o trư c
Photos.htm
<HTML>
<HEAD><TITLE>Staff hypertext links</TITLE>
<BASE TARGET=Mainframe>
</HEAD>
<BODY>
<CENTER>
<A HREF="Bester.htm"><IMG SRC="Bester.jpg" width=75 height=101> <BR>
Jeff Bester</A><BR><BR>
<A HREF="DuMont.htm"><IMG SRC="DuMont.jpg" width=75 height=101>
<BR> Brian DuMont</A><BR><BR>
<A HREF="Jacobs.htm"><IMG SRC="Jacobs.jpg" width=75 height=101><BR>
Dennis Jacobs</A><BR><BR>
</CENTER>
</BODY>
</HTML>
Logo.ht
Bester.htm
DuMont.ht
m
Photo.
topfram
mainfra
leftfram

Trang 34
Bester.htm
<HTML>
<HEAD><TITLE>Jeff Bester</TITLE></HEAD>
<BODY>
<IMG SRC="Bester2.jpg" WIDTH=90 HEIGHT=125 ALIGN=LEFT>
<FONT SIZE=2>
<TABLE>
<TR>
<TD VALIGN=TOP><B>Name:</B></TD>
<TD VALIGN=TOP>Jeff Bester</TD>
</TR>
<TR>
<TD VALIGN=TOP><B>Age:</B></TD>
<TD VALIGN=TOP>37</TD>
</TR>
<TR>
<TD VALIGN=TOP><B>Experience:</B></TD>
<TD VALIGN=TOP>Twelve years climbing. Three years with The Colorado
Experience</TD>
</TR>
<TR>
<TD VALIGN=TOP><B>EMT:</B></TD>
<TD VALIGN=TOP>Yes</TD>
</TR>
</TABLE><BR CLEAR=LEFT>
Jeff has led routes in Yosemite, Eldorado, Mount Ranier and Rocky
Mountain National Park. He has participated in expeditions in Denali,
Mexico and Nepal. We are happy to welcome back Jeff for his fourth
year with The Colorado Experience. Jeff will be leading tours to Eldorado
Canyon.
</FONT>
<BODY>
</HTML>
Trang Photos.htm

Trang 35
Các trang DuMont.htm, Jacobs.htm cũng thi t k tương t .
Logo.htm
<HTML>
<HEAD><TITLE>HEAD</TITLE></HEAD>
<BODY BACKGROUND="Mountain.jpg">
<IMG SRC="TCELogo.gif" WIDTH=550 HEIGHT=60>
</BODY>
</HTML>
V.2.5. Ph n t NOFRAMES
Ph n t NOFRAMES ñư c s d ng ñ ch n i dung thay th cho frame khi trình duy t
không h tr frame.
Cú pháp:
<HTML>
<HEAD><TITLE>Page title</TITLE></HEAD>
<FRAMESET>
Frame Definitions
</TRAMESET>
<NOFRAME>
<BODY>
Page Layout
</BODY>
</NOFRAME>
</HTML>

Trang 36
V.2.6. Ph n t IFRAME
N u mu n tr n văn b n và khung trong cùng m t trang thì ph i t o m t khung bên trong
trang b ng tag <iframe>, khi trình du êt không h tr thì n i dung trong IFRAME s b
tr l i
Cú pháp:
– T i v trí mu n chèn frame, nh p cú pháp:
<Iframe Src=”Page.htm” Name=”name” Width= x Height=y Align=left/ right>
N i dung thay th khi trình duy t không ch p nh n khung
</Iframe>
Trong ñó:
− Page.htm: là trang ñ u tiên xu t hi n trong khung
− Name: tên c a khung
− x, y: kích thư c c a khung
− Align: canh l
Ví d : thi t k trang web có d ng sau:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<center><img src="Logo.jpg" width="550" height="70"></center>
<iframe width="350" height="150" align="right" src="Bester.htm">
</iframe>
<h1> <font face="Arial, Helvetica, sans-serif">Staff </font></h1>
The staff at the Colorado Experience is here to helpwith all of your
climbing needs. All of our instructors are fully qualified, with yearsof
climbing and teaching experience. Scroll through the biographies at the
right for more information
</body>
</html>
Ph n t Iframe

Trang 37
CHƯƠNG VI: FORM
VI.1. GI I THI U FORM
VI.1.1. S d ng Form: Form ñư c s d ng khi c n:
– Thu th p thông tin tên, ñ a ch , s ñi n tho i, email, …ñ ñăng ký cho ngư i dùng
vào m t dich v ho c m t s ki n
– T p h p thông tin ñ mua hàng
– Thu th p thông tin ph n h i v m t Website
– Cung c p công c tìm ki m trên website
VI.1.2. Cách t o:
Cú pháp:
<Form Method=(Post Get) Action=script.url>
N i dung c a Form
</Form>
Trong ñó:
-Method: xác ñ nh phương th c ñưa d li u lên máy ch , có 2 giá tr :Post và Get
• N u giá tr là GET thì trình duy t s t o m t câu h i ch a trang URL, m t d u h i và
các giá tr do bi u m u t o ra. Trình duy t s ñ i script c a câu h i thành ki u ñư c
xác ñ nh trong URL ñ x lý.
• N u giá tr là POST thì d li u trên bi u m u s ñư c g i ñ n script như m t kh i d
li u
-Action: là ñ a ch c a script s th c hi n khi form ñư c submit
VI.2. CÁC PH N T C A FORM:
Các ph n t c a form thư ng s d ng trên trang web g m
• Input boxes: nh p d li u d ng text và number
• Radio buttons: dùng ñ ch n m t tùy ch n trong danh sách
• Selection lists: dùng cho m t danh sách dài các l a ch n, thư ng là trong Drop-
down list box
• Check boxes: ch ñ nh m t item ñư c ch n hay không
• Text area: m t text box có th ch a nhi u dòng
• Submit và Reset button: ñ g i form ñ n CGI script v a ñ reset form v tr ng
thái ban ñ u
VI.2.1. Input boxes
Là m t h p dòng ñơn dùng ñ nh p văn b n ho c s . ð t o các input boxes, s d ng tag
<INPUT>, tag <INPUT> còn ñư c s d ng cho nhi u lo i field khác trên form.
Cú pháp:
<FORM>
<INPUT TYPE=Object NAME=Text>
</FORM>
Các giá tr c a thu c tính TYPE: M c ñ nh giá tr c a TYPE là text, n u trong tag
<INPUT> không nh p thu c tính TYPE thì lo i input boxes là text

Trang 38
• TEXT
• PASSWORD
• CHECKBOX
• RADIO
• HIDDEN
• RESET
• SUBMIT
• TEXTAREA
• BUTTON
• IMAGE
Ví d :
<html>
<head><title>Form</title></head>
<body>
<form>
<table>
<tr>
<td width=100>FirstName: </td>
<td><input name =Firstname></td>
</tr>
<tr>
<td>LastName: </td>
<td><input name =Lastname></td>
</tr>
<tr>
<td>Address: </td>
<td><input name =Address></td>
</tr>
</table>
</form>
</body>
</html>
1. Text box: H p văn b n, do ngư i s d ng nh p vào
Cú pháp:
<Input Type=”Text” Value=”Value” Name=”name” Size=n Maxlength=m>
− Name : tên d li u ñ u vào server
− Value: D li u ban ñ u có s n trong text box
− Size: chi u r ng c a text box tính b ng s ký t (m c ñ nh là 20)
− Maxlength: s ký t t i ña có th nh p vào text box
text

Trang 39
2. T o h p Password: Nh ng ký t nh p vào hi n th dư i d ng d u ch m , thông tin
s không b mã hoá khi g i lên server
Cú pháp:
<Input Type=”password” Name=”name” size=n maxlength=n>
− Size: chi u r ng c a h p Password, tính b ng ký t
− Maxlength: S ký t t i ña có th nh p vào h p Password
Ví d :
<html>
<body>
<form><table>
<tr>
<td width=100>UserName </td>
<td><input name =UserName></td>
</tr>
<tr>
<td>Password: </td>
<td><input Type='password' name =Password></td>
</tr>
</table></form>
</body>
</html>
3. Checkbox: H p ch n, ngư i xem có th ñánh d u nhi u checkbox trong cùng 1b
Cú pháp:
<Input Type=”Checkbox” Name=”Name” Value=”Value” Checked> Nhãn
− Name: tên c a checkbox
− Value: xác ñ nh m i giá tr cho m i h p checkbox ñư c g i cho server khi
ngư i xem ñánh d u vào checkbox
− Checked: thu c tính ñ h p check box ñư c ch n m c ñ nh
Ví d :
<html>
<body>
<form><table>
<tr>
<td width=50 valign=top>Hobby: </td>
<td>
<Input Type='Checkbox' Name='st' Value='nhac' Checked> Music<br>
password

Trang 40
<Input Type='Checkbox' Name='st' Value='film'> Film<br>
<Input Type='Checkbox' Name='st' Value='thethao' > Sport
</td>
</tr>
</table></form>
</body>
</html>
4. Radio button: Cho phép ngư i xem ch ch n m t tuỳ ch n t i m i th i ñi m
Cú pháp:
<input type="radio" name="name" value="Value" checked>Nhãn
− Name: tên c a radio, k t n i các radio button v i nhau
− Value: Nh ng d li u s g i ñ n server khi radio button ñư c ch n
− Checked: thu c tính ñ radio button ñư c ch n m c ñ nh
Ví d :
<html>
<body>
<form><table>
<tr>
<td valign=top>User for</td>
<td>
<input type='radio' name=use value=home>Home<br>
<input type='radio' name=use value=bus>Business<br>
<input type='radio' name=use value=gov>Government<br>
<input type='radio' name=use value=ed>Educational Institution<br>
<input type='radio' name=use value=other>Other<br>
</td>
</tr>
</table></form>
</body>
</html>
5. Submit Button: T t c thông tin c a ngư i xem nh p vào s ñư c g i ñ n server
khi ngư i xem click nút Submit
Cú pháp:
<Input Type=”Submit” Value=”Submit Message” Name=”Name”>
checkbox

Trang 41
− Submit Message: Là ch xu t hi n trên Button
− Name: tên c a button
6. Reset Button:Thi t l p giá tr ban ñ u c a t t c các ñi u khi n trên form
Cú pháp:
<Input Type=”reset” Value=”Reset Message” Name=”Name”>
Có th t o nút Reset và Submit b ng hình nh v i cú pháp:
<Button Type=”reset” Name=”reset” Value=”reset”>
Nhãn ch l trái
<Image src=”Image.gif >Nhãn ch l ph i</Button>
Ví d :
7. Button: Nút dùng ñ th c hi n các l nh do ngư i s n d ng ñưa ra
Cú pháp:
<input type="button" name="Button" value="Button">
8. Hidden: là các field mà ngư i xem không nhìn th y trên trình duy t, nhưng v n là
m t ph n t trên form. Hidden field dùng ñ lưu tr thông tin trong các form trư c,
các thông tin này c n ñi kèm v i các d li u trong form hi n hành mà không mu n
ngư i xem nh p l i
Cú pháp:
<Input Type=’hidden’ Name=’Name’ Value=’Value’>
Name: tên mô t ng n g n thông tin c n lưu tr
Value: Thông tin c n lưu tr
VI.2.2. Selection List:
1. Drop down menu:
Cú pháp:
<Select Name=”Name” Size=n Multiple>
<Option Value=”Value” selected> Option 1
<Option Value=”Value” > Option 2
…
</Select>
- Nhãn:Gi i thi u Menu
- Name: tên d li u ñ u vào server
- Size: là chi u cao c a menu tính b ng hàng ch
- Multiple: là thu c tính cho phép ch n nhi u ñ m c (listbox)
- Selected: ñ m c ñư c ch n m c ñ nh
- Value: xác ñ nh d li u g i cho server n u ñ m c ñư c ch n

Trang 42
Ví d :
<html>
<head><title>Dropdown menu</title></head>
<body>
<form>
<select Name=Product>
<option value=1>ScanMaster
<option value=3>ScanMaster II
<option value=4>LaserPrint 1000
<option value=5> LaserPrint 5000
<option value=6>Print/scan 150
<option value=2> Print/scan 250
</Select>
</form>
</body>
</html>
2. N u thêm thu c tính Multiple thì ta ñư c d ng listbox
<html>
<head><title>Dropdown menu</title></head>
<body>
<form>
<select Name=Product size=5 Multiple>
<option value=1>ScanMaster
<option value=3>ScanMaster II
<option value=4>LaserPrint 1000
<option value=5> LaserPrint 5000
<option value=6>Print/scan 150
<option value=2> Print/scan 250
</Select>
</form>
</body></html>
3. Ph n t OPTGROUP: ñư c s d ng ñ nhóm các ch n l a thành các nhóm riêng.
Ví d :
<HTML>
<HEAD><Title>Using the Option Group</Title></head>
<BODY>
<FORM action= ‘htpp: // somesite.com / processform’ method= ‘post’>
<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>

Trang 43
VI.2.3. TextArea: H p văn b n cho phép nh p nhi u dòng
Cú pháp:
<TextArea Name=”name” Rows=n Cols=m Wrap>
Default text
</textarea>
− Rows: s dòng có th nh p vào TextArea (m c ñ nh là 4)
− Cols: ñ r ng c a textarea (tính b ng s ký t , m c ñ nh là 40)
− Wrap: các dòng ch t ñ ng dàn ra trong l c a vùng text area, Value:
virtual,physical
Ví d :
<html>
<head><title>Textarea</title></head>
<body>
<table>
<tr>
<td valign=top> Comments ?</td>
<td><textarea rows=4 cols=50 name=comments wrap=virtual></textarea>
</td>
</tr>
</table>
</body>
</html>
optgroup

Trang 44
VI.2.4. Nhãn: Dùng ñ t o nhãn liên k t v i thành ph n ñi kèm
Cú pháp:
<Label For=”idname”> N i dung label</label>
Idname: là giá tr c a th ôc tính ID trong thành ph n Form tương ng
Ví d :
<HTML>
<HEAD><TITLE>Using Labels</TITLE></HEAD>
<BODY>
<FORM action= 'http: // somesite.com' method = 'post'>
<table>
<tr>
<td><LABEL for= 'firstname'>Firsname: </LABEL></td>
<td><INPUT type='text' id='firstname'></td>
</tr>
<tr>
<td><LABEL for= 'lastname'> Last name: </LABEL></td>
<td><INPUT type= 'text' id= 'lastname'><BR></td>
</tr>
</table>
</FORM>
<BODY>
</HTML>
VI.2.5. Fieldset: Nhóm các ñ i tư ng gi ng nhau vào m t ph n logic
Cú pháp:
<Fieldset>
<Legend Align=”left, right”>Chú thích
</Legend>
Các thành ph n trong nhóm
</Fieldset>
-Tag<legend>: t o chú thích cho nhóm
-Align=left, right: ch v trí c a chú thích
Ví d :
<HTML>
<HEAD><TITLE>Job application</TITLE></HEAD>
<BODY >
<H1><CENTER><FONT SIZE = 4 COLOR= Forestgreen>Application Form
</CENTER></FONT></H1>
<HR><BR><FORM action= “http: // somesite.com / processform” method = “post”><P>
<FIELDSET>
<LEGEND>Position</LEGEND>
Application for the post of: <INPUT name= 'name' type= 'text' tabindex= '1'>
Label

Trang 45
</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
<INPUT name= 'lang' type='checkbox' value= 'german' tabindex= '8'> German
</FIELDSET>
<FIELDSET>
<LEGEND> Personal Information</LEGEND>
Name: <INPUT name = 'name' type= 'text' tabindex= '2'><BR>
<TEXTAREA name = 'address' rows= '3' cols = '30' tabindex = “3”>
Enter address</TEXTAREA>
</FIELDSET>
</FORM>
</BODY></HTML>

Trang 46
VI.2.6. ði u khi n các ph n t trên form:
1. ð nh th t Tab:
Dùng phím tab ñ di chuy n gi a các ñ itư ng trong form, m c ñ nh theo th t c a
mã HTML, mu n ñ nh l i th t ta dùng thu c tính TabIndex=n trong tag t o các
thành ph n c a form, trong ñó n là th t c a tab, có giá tr t 0 ñ n 32767
Trong m t form ta thư ng ñ nh th t tab cho các thành ph n : textbox, password,
checkbox, radio button, textarea, menu và button
2. T o phím t t:
−−−− Cách t o:
Trong tag t o các ph n t c a form ta dùng thu c tính Accesskey=”Phím t t”
−−−− S d ng phím t t: Nh n t h p phím Alt+Phím t t

Trang 47
CHƯƠNG VII:CASCADING STYLE SHEET-CSS
VII.1. GI I THI U
– B ng ki u (style sheet) nh m tho m n nhu c u th m m , ti n d ng nhưng gi tính
th ng nh t cho trang HTML. CSS cho phép ñ nh dang m t s tính ch t thông
thư ng cùng m t lúc cho t t c các ñ i tư ng trên trang ñư c ñánh d u b ng tag ñ c
bi t
– Ti n ích c a CSS là :
Ti t ki m th i gian
Khi thay ñ i ñ nh d ng ch c n thay ñ i CSS, các trang khác s t ñ ng c p
nh t s thay ñ i ñó
Có th dùng các CSS cùng v i JavaScript ñ t o các hi u ng ñ c bi t
– B t l i c a CSS:
Không m t trình duy t nào ch p nh n nó hoàn toàn
Ph i m t th i gian ñ h c cách s d ng
VII.2. CÁCH T O:
M t b ng m u ñư c t o b ng m t tên tag và m t hay nhi u các ñ nh nghĩa ñ xác ñ nh cách
th c hi n th c a các ñ i tư ng ñư c ñánh d u b ng tag ñó
VII.2.1. Phân lo i và cách t o:
Có 3 lo i :
– Inline style
– Internal style
– External style
a. Inline style:
Là ki u ñư c gán cho m t dòng ho c m t ño n văn b n, b ng cách s d ng thu c
tính style bên trong tag mu n ñ nh d ng
Cú pháp:
<TagName Style=”property1:value1;property2: value2;…”>
N i dung văn b n mu n ñ nh d ng
</TagName>
Ví d : <HTML>
<HEAD>
<TITLE>Setting Properties</TITLE>
</HEAD>
<BODY>
<P style = “color:aqua ; font- Style:italic, text- Align:center”>
This paragraph has an inline style applied to it
<P> This paragraph is displayed in the default style.
<P> Can you see the <SPAN style = color:red>difference
</SPAN> inthis line
</BODY>
</HTML>
b. Internal style :
Là b ng m u thích h p cho trang riêng l v i nhi u văn b n, b ng cách t o b ng
m u chung trên ñ u trang và dùng cho c trang HTML

Trang 48
Cú pháp:
<Head>
<Style>
TagName{property1: value 1; property2: value 2…}
(l p l i cho m i tag có thu c tính c n ñ nh d ng)
</Style>
</Head>
Ví d :
<HTML>
<HEAD>
<STYLE TYPE=”text/css”>
H1,H2 { color: limegreen; font-family: Arial }
</STYLE>
</HEAD>
<BODY>
<H1>This is the H1 element</H1>
<H2>This is the H2 element</H2>
<H3>This is the H3 element with its default style as displayed in
the browser</H3>
</BODY>
</HTML>
c. External style :
Là m t b ng ki u ñư c lưu tr thành m t file bên ngoài và ñư c liên k t v i trang
HTML.B ng ki u này s ñư c áp d ng và nh hư ng cho t t c các trang c a m t
website.
– Cách t o:
T o m t t p tin văn b n m i
Nh p tên các tag mu n ñ nh d ng thu c tính theo m u:
TagName{property1: value1; property2:value2;…}
Lưu t p tin v i ñ nh d ng Text Only và có ph n m r ng .css
– Cách dùng External style:
Cú pháp:
<Head>
<Link Rel=StyleSheet Type=”text/css” Href=”tên t p tin.css”>
</Head>
Ví d :
T o t p tin Sheet1.css
H2 {color:blue; font-style:italic}
P{text-align:justify; text-indent:8pt; font:10pt/15pt “Myriad Roman”,”Verdana”}

Trang 49
Trang1.htm
<HTML>
<HEAD><TITLE> Changing the rules</TITLE>
<LINK REL=stylesheet HREF=”sheet1.css” TYPE=”text/css”>
</HEAD>
<BODY>
<H2> Changing the rules is fun</H2>
<P> Changing the rules may not be such fun
<H2>The H2 element again</H2>
</BODY>
</HTML>
Trang2.htm
<HTML>
<HEAD><TITLE> Changing the rules</TITLE>
<LINK REL=stylesheet HREF=”sheet1.css” TYPE=”text/css”>
</HEAD>
<BODY>
<H2> This document ues the sheet1 style sheet</H2>
<P>Selecting this option could delete all your files
<H2>The H2 element again</H2>
</BODY>
</HTML>
VII.3. ð NH B NG M U CHO L P (CLASS):
Có th chia các y u t trong HTML thành các l p ñ áp d ng ki u m u hi u qu hơn
Cú pháp:
−−−− Trong ph n <Style > nh p cú pháp:
<STYLE>
.ClassName{thu c tính1:giá tr 1;thu c tính2:giá tr 2;…}
</STYLE>
−−−− Trong ph n <Body>, ñánh d u ph n n m trong l p b ng cú pháp:
<Body>
<TagName Class=”ClassName”>N i dung </TagName>
</Body>
Ví d : <HTML>
<HEAD>
<STYLE>
.water{color:blue}
.danger{color:red}
</STYLE>
</HEAD>
<BODY>
<p class=water>test water
<P class=danger>test danger
</BODY></HTML>

Trang 50
VII.3.1. ð nh các tag riêng bi t:
Dùng áp d ng cho m t phàn t riêng bi t trên trang Web
Cú pháp:
−−−− Trong Tag Style nh p :
TagName#IDName{th/tính1: giá tr 1; thu c tính2: giá tr 2;…}
−−−− Trong tag Body nh p :
<TagName ID=IDName> N i dung</TagName>
Ví d 1:
<HTML>
<HEAD><TITLE> ID Selectors</TITLE>
<STYLE>
#control { color: red ;FONT-WEIGHT:BOLD}
</STYLE>
</HEAD>
<BODY>
<SPAN id='control'>Fire is this color</SPAN>This paragraph has
no style applied
</BODY></HTML>
Ví d 2:
<HTML>
<HEAD><TITLE> combining ID and class Selector</TITLE>
<STYLE>
.forest { color: green;font-weight:bold }
.danger { color: red;font-weight:bold }
#control{ color: blue;font-weight:bold }
</STYLE>
</HEAD>
<BODY>
<P class='forest'>green things
<P class='danger'>fire hazards
<EM class='forest'> more green things</EM><BR>
<EM class='danger'>more fire hazards</EM>
<UL>
<LI class='danger'>things that burn
<LI class='forest'>things that don’t burn
</UL>
<P id='control'> water </P>
</BODY>
</HTML>

Trang 51
VII.3.2. T o các tag tuỳ ý:
Có 2 lo i tag chung có th k t n i Class hay các ID ñ t o các tag tuỳ ý . c n phân bi t ñ i
tư ng c p kh i và c p hàng:
- ð i tư ng c p kh i như m t ño n văn, thư ng b t ñ u m t dòng m i và có th ch a
các ñ i tư ng c p kh i khác g m các tag: P, H1, Body, table
- ð i tư ng c p hàng thư ng không t o dòng m i, thư ng ch a văn b n và các y u t
trong hàng khác g n các tag: B, Font
- Các tag DIV và SPAN: có th k t n i v i các ph n t c p kh i và ID ñ t o ra các tag
tuỳ ý. Trong ñó DIV phù h p v i các ñ i tư ng c p kh i, SPAN phù h p v i các ñ i
tư ng c p hàng
1. T o tag c p kh i tuỳ ý:
Cú pháp: B ng cách thêm m t l p ho c ID vào tag DIV và ñ nh m u c n có
− Trong ph n Style ho c m t b ng m u bên ngoài ta nh p:
DIV.ClassName{th/tính1:giá tr 1; thu c tính 2: giá tr 2…}
v i ClassName là tên l p s s d ng. ho c:
DIV#Idname{thu c tính1:g tr 1; thu c tính 2: giá tr 2…}
v i IDName là tên cá bi t c a tag DIV
− Áp d ng tag c p kh i tuỳ ý vào trang HTML: T i ñ u ph n văn b n mu n ñ nh
d ng, nh p cú pháp
<DIV Class=”ClassName” IDname=”Idname”>N i dung </DIV>
(bên trong có th ch a các tag <P> ho c <H1>)
2. T o các tag trong hàng tuỳ ý:
K t n i nhi u ki u ñ nh d ng văn b n trong m t tag
Cú pháp:
− Trong ph n Style, nh p cú pháp:
SPAN.Classname {th/tính1:giá tr 1; th/tính2: giá tr 2…}
Ho c:
SPAN#IDname {th/tính1:giá tr 1; th/tính 2: giá tr 2…}
− Áp d ng tag trong hàng tuỳ ý vào trang HTML: T i ñ u ño n văn b n mu n ñ nh
d ng, nh p cú pháp:
<SPAN Class=”classname”> n i dung văn b n</SPAN>
Ho c:
<SPAN ID=”IDName”> N i dung văn b n</SPAN>
3. Các thu c tính ñ nh d ng văn b n:
a) Ch n b font:
font-family: familyname1, familyname2…
b) T o ch nghiêng:
Font-style: italic
c) T o ch ñ m:
Font-weight: bold
d) ð nh c ch :

Trang 52
Font-size: xx-smallho c x-small, small, medium, large, x-large, xx-large ho c
Font-size:12pt (giá tr c th )
Có th ñ nh d ng các thu c tính ch nghiêng, ñ m và c ch cùng m t lúc:
Font: italic bold size
e) Màu c a ch :
Color: colorName/#rrggbb
f) Màu n n c a ch :
Background:colorName/#rrggbb
g) ð nh kho ng các gi a các t , các ký t :
Word-spacing:n (n: kho ng cách gi a các t , tính b ng pixel)
Letter-spacing:n (n: kho ng cách gi a các t , tính b ng pixel)
h) Canh l cho văn b n:
Text-Align: left, right, center, justify
i) Thay ñ i d ng ch :
Text-transform: capitalize, uppercase, lowercase
4. ð nh d ng danh sách:
List-style:circle ch m tròn r ng
List-style: disc ch m tròn ñen
List-style: square ch m ñen vuông
List-style: decimal ñánh s r p
List-style: lower-alpha th t alpha
List-style: upper-alpha th t alpha ch in hoa
List-style: upper-roman s la mã hoa
List-style: lower-roman s la mã thư ng
5. ð nh d ng màu n n:
Body{color:#rrggbb}
blockquote{background-color:#rrggbb}
background:bacground-color
background :background-image
background: background –position
background: background-repeat
background: background-attachment
6. ð nh d ng Hypertext link
A{Text-Decoration:none}: không g ch dư i
A:visited{color:#rrggbb}
A:link{styles cho v trí chưa ñư c xem}
A:active{style cho nh ng link ñang click}
A:hover{style khi tr lư t qua link}

Trang 53
CHƯƠNG VIII: GI I THI U DREAMWEAVER
VIII.1. GI I THI U
− Macromedia Dreamweaver MX 2004 là m t công c thi t k web chuyên nghi p, ph n
c t lõi c a nó là HTML (HyperText Markup Language), là m t công c m nh, d dùng,
b n có th d dàng thi t k và phát tri n m t trang web ho c m t website l n
− Dreamweaver MX 2004 là m t công c tr c quan, trong ñó có th b sung Javascrip,
bi u m u, b ng bi u và nhi u lo i ñ i tư ng khác mà không c n vi t m t ño n mã nào.
− Dreamweaver MX 2004 s d ng các công ngh web, chu n HTML và cung c p kh
năng tương thích v i các trình duy t web cũ, v i Dreamweaver MX 2004 b n có th
thi t k b ng ch ñ Design view ho c Code view ho c Code and Design
VIII.2. CÀI ð T
− Macromedia Dreamweaver MX 2004 là m t chương trình trong b Macromedia MX,
b n nên cài ñ t trên máy tr n b Macromedia MX ñ có ñ y ñ các chương trình h tr
cho Dreamweaver thi t k trang web ñ p và sinh ñ ng hơn
− Sau khi cài ñ t, b n kh i ñ ng Macromedia Draemvaerver MX 2004 theo ñư ng d n
Start Programs Macromedia Macromedia Dreamweaver MX 2004
VIII.3. MÀN HÌNH DREAMWEAVER:
1. Insert Bar: G m các ch c năng ti n ích dùng ñ chèn các ñ i tư ng vào trang web, và
ñ nh các thu c tính cho ñ i tư ng
− Common: Chèn các ñ i tư ng: Image, Flash, Date, Template, …
− Layout: Ch a các công c trình bày trang, g m 3 ch ñ : Standard, Expended,
Layout
− Forms: Ch a các công c t o Form
− Text: Dùng ñ nh d ng văn b n
− HTML: ch a các công c t o trang web b ng code view
2. Document Toolbar: Ch a các nút cho phép xem trang web d ng Design hay d ng
Code
− Show code view: Xem d ng trang HTML
− Show Design view: Xem trang d ng thi t k , s d ng các công c c a Dreamwerver
− Show code and design view: Chia c a s làm 2 ph n: ph n trên d ng code view,
ph n dư i d ng Design view
− Title: tiêu ñ c a trang Web
− Preview/Debug in Browser:Xem k t qu trang web thông qua trình duy t web
− Document Window: C a s dùng ñ t o và hi u ch nh trang Web
3. Properties Inspector: Hi n th các thu c tính c a các ñ i tư ng ñang ñư c ch n, ñ ng
th i cho phép ch nh s a các thu c tính ñó
4. Panel groups: Là nhóm các Panel cho phép qu n lý các ñ i tư ng trong trang Web
− B t / t t các thanh Panel: Ch n menu Window Ch n thanh Panel tương ng
− M r ng các thanh Panel: Click vào mũi tên góc trái c a m i Panel

Trang 54
5. Site Panel: Cho phép qu n lý các t p tin, thư m c trong b Web (gi ng Windows
Explorer).
Thanh công c c a Site Panel
Connect/Disconnect: Ch c năng k t n i/ ng t k t n i v i Remote site, ch có tác
d ng v i Remote site s d ng phương th c truy n FTP, WebDAV ho c Sourcesafe, m c
ñ nh Dreamweaver MX 2004 s ng t k t n i kh i remote site n u nó tr ng thái ch 30
phút. Có th thay ñ i th i gian này b ng cách ch n:Edit/ Preferences/Site
Refresh: Ch c năng c p nh t t p tin, thư m c cho Remote site gi ng v i Local
Site c a chính nó. Thư ng không s d ng ch c năng này vì khi t o Site m i
Dreamweaver MX 2004 luôn ñánh d u check vào m c Refresh Remote File list
Automatically
Get File: ch c năng chép File t remote Site vào Local Site. Tuỳ thu c vào Enable
File Check in và Check out mà các t p tin chép vào có thu c tính ñ ơc phép ghi
hay ch ñ c
Put File: Chép t p tin t Local Site lên Remote Site
Check out files: Ki m tra t p tin Remote Site chép vào hay chép ch ng lên t p
tin Local Site
Tag Selector Properties Inspector Site panel
Document toolbar Document window Panel groupInsert bar
Window size Download time

Trang 55
Check in files: Ki m tra t p tin Local Site chép vào hay chép ch ng lên t p tin
Remote Site
Expand/Collapse: hi n th 2 c a s Local Site và Remote Site
6. Status bar: Thanh tr ng thái, n m dư i ñáy c a Document Window, hi n th Tag
Selector, Window size, Document size và Download time.
− Tag Selector: Hi n th các tag HTML t i v trí hi n hành c a con tr , khi t o trang
Web m i thì ph n t duy nh t hi n th trong Tag Selector là BODY.
− Document size and Download time: Kích c ư c ch ng c a tài li u và th i gian t i
tài li u xu ng, có th ñi u ch nh t c ñ download b ng cách:
o Ch n Edit Preferences Ch n m c Status bar
o T i m c Connection speed Ch n t c ñ tương ng
− Window size: Hi n th kích thư c hi n t i c a tài li u, ñư c tính b ng Pixel. Khi
ñ nh kích thư c c a trang web ph i tính ñ n vi c sao cho an toàn ñ i v i m i ñ
phân gi i. Cách thay ñ i kích thư c c a tài li u theo m t trong các kích thư c ñ nh
s n ho c theo m t giá tr khác: Click chu t vào mũi tên bên c nh Window size
o Ch n m t kích thư c có s n, ho c
o Ch n Edit size ñ ñ nh m t kích thư c khác
o Trong h p tho i Preferences
o Width: ñ nh chi u r ng
o Height: ñ nh chi u cao
VIII.4. K HO CH THI T K M T WEBSITE
VIII.4.1. Các yêu c u cơ b n khi thi t k website:
− Xác ñ nh yêu c u và m c ñích c a Website
− Chu n b n i dung cho các trang
− Phác th o khuôn m u (Template) cho trang, thư ng các trang có cùng ch ñ thì s
d ng chung m t template
− Xác ñ nh c u trúc c a Website, có 3 ki u c u trúc:
o Tuy n tính
o Phân c p
o Hình chóp
− Tuỳ theo m c ñích c a Website mà ch n ki u phù h p
VIII.4.2. Thao tác t o b Web cơ b n:
1. Khi thi t k m t Website c n quan tâm ñ n 2 v n ñ :
− N i dung ch ñ chính, t ñó ch n b c c, h màu cho tương ng, (ví d :
Website thương m i ph i sáng s a, rõ ràng v b c c, …) sau ñó thu th p ñ y ñ
tài li u, phân nhóm theo n i dung, t ñó quy t ñ nh c n bao nhiêu trang, n i dung
c a t ng trang
− Ch n hình nh, logo, Banner, h th ng nút liên k t, nh minh ho , nh b c c,
nh trang trí…
− Phác ho sơ ñ liên k t trên gi y ñ th y r m i liên k t gi a các trang ñơn trong
m t website
2. Cách t o m t Website m i:
− Trong Document Window, ch n Site Manage sites New Site xu t hi n
h p tho i Site Definition Ch n Tab Advance, trong m c Local info:

Trang 56
− Site name: ñ t tên Site, tên này xu t hi n trong h p tho i Edit Site
− Local Root Folder: Khai báo ñư ng d n c a folder lưu tr Website trên ñĩa
c ng b ng cách nh p ñư ng d n ñ n thư m c ho c Click vào bi u tư ng Folder
và ch ñư ng d n ñ n folder
− Default Images folder: khai báo ñư ng d n ñ n thư m c ch a các hình nh c a
trang Web, thư m c này ph i n m trong Local root Folder ñã khai báo trên, tât
c các hình nh trong trang web m c ñ nh ñư c lưu trong thư m c này
− Refresh Local file list Automatically: khi ñư c ch n, Dreamweaver t ñ ng c p
nh t c trúc file trong b ng Local Folder c a Site Panel, vi c c p nh t này s s
d ng m t ít tài nguyên c a h th ng, ta có th c p nh t khi c n b ng cách ch n
View Refresh Local trong Site Window
− HTTP Address: Nh p ñ a ch c a site, Dreamweaver s s d ng ñ a ch này ñ
qu n lý site và liên k t các file trong site
− Enable Cache: khi ñư c ch n, Dreamweaver t o m t file lưu tr các thông tin v
link gi a các file trong site. Sau khi ch n xong Click OK Click Done ñ hoàn
t t công vi c t o site m i
3. Ki m tra Website ñã t o:

Trang 57
− M site Panel :b ng cách ch n Window File ta th y ñư c thư m c ch a Site,
n u chưa t o Folder ch a hình nh thì t i ñây b n Click ph i chu t vào tên Site
Ch n New Folder Nh p tên thư m c là Images. Trong website ph i ch a 2
folder : folder HTML g m các file .htm và folder image ch a hình nh c a
website
− ð m r ng c a s Site Panel Click ch n nút Expand/Collapse
4. M m t site có s n:
− Cách 1: Click vào menu hi n th tên Site trên Toolbar c a Site Panel, ch n tên
Site mu n m trong danh sách x xu ng
− Cách 2: Ch n menu Site Manage Sites Ch n tên Site mu n m Done
5. Hi u ch nh Site:
− Ch n menu Site Manage Sites
− Ch n tên Site c n hi u ch nh Click nút Edit
− Xu t hi n h p tho i Site Definition th c hi n hi u ch nh OK Done
T o m t Site m i
Hi u ch nh Site
T o m t Site m i gi ng site ñang ch n
Xoá Site
Xu t thông tin m t Site ra t p tin .ste
D n nh p thư m c, t p tin vào Site
ch n tên
site c n m
Expand/Collapse

Trang 58
6. Dùng hình Bitmap làm nh n n cho trang Web:
− Trong c a s Document, ch n Modify Page Properties, xu t hi n h p tho i
Page Propeties, ch n m c Appearance
− Text Color: ch n màu cho text
− Background Color: Ch n màu n n cho trang
− Background Image: Ch n t p tin nh làm n n b ng cách click nút Browse…
VIII.4.3. Thi t k các trang Web ñơn
− T i màn hình kh i ñ ng ch n m c Create new Ch n HTML

Trang 59
− Xu t hi n Document Window, ñây là nơi thi t k trình bày n i dung c a t ng trang web
ñơn, sau khi thi t k xong m i trang trang web ñư c lưu dư i d ng m t t p tin có ph n
m r ng .HTM (ho c .HTML) trong thư m c ñã ñư c khai báo trong m c Local Root
Folder
VIII.4.4. T o liên k t các trang Web ñơn thành m t Website
1. Cách t o:
− ð t o liên k t, c n phân bi t trang ngu n và trang ñích.
• Trang ngu n là trang ch a các nút liên k t (có th là ñ i tư ng nh
ho c ch )
• Trang ñích là trang c n liên k t ñ n
− M trang ngu n
− Ch n nút liên k t
− Trong Properties Inspector, t i m c link, th c hi n m t trong hai cách
sau:
• Cách 1: Click nút kéo mũi tên ch ñ n tên t p tin c n liên k t
trong Site Panel
• Cách 2: Click nút m h p tho i Select File
o Look in: Ch n tên Site
o File name: Ch n tên trang Web c n liên k t ñ n
2. Ki m tra h th ng liên k t trong Site:
−−−− File Check Page Check links
−−−− Xu t hi n Result inspector, Ch n nhóm Link Checker
−−−− T i m c Show, ch n Broken Links
−−−− C t Files là danh sách các t p tin có ch a liên k t gãy
−−−− C t Broken link: Ch a tên t p tin không liên k t ñư c
−−−− Phía dư i th ng kê s trang ki m tra, t ng s liên k t, s liên k t t t,
s liên k t gãy và s liên k t ngo i
Các d ng ki m tra liên k t:
−−−− Check links in Current Document: ki m tra liên k t trong trang hi n
hành
−−−−
−−−− Check links for entire Site: ki m tra liên k t cho t t c các trang
trong site
−−−− Check links for Selected files /folders in Site: ki m tra nhóm t p tin/
thư m c ñư c ch n trong Site

Trang 60
3. Xem k t qu b ng trình duy t và hi u ch nh
− Ch n File / Preview in Browser / iexplore
− Ho c Click nút Preview /Debug in Browser
4. K t n i và ñưa Website lên Web Server
C n ph i lưu l i t t c các t p tin trư c khi xu t b n Website. Xu t b n Website
là chép thư m c g c (root) c a Site lên Server c a các nhà cung c p d ch v
Internet (ISP).
Trong Macromedia Dremwearver MX 2004, xu t b n Website c n có bư c k t
n i v i Server trư c r i m i Put File lên sau
Cách th c hi n:
− Trong Site Panel, ch n Site c n xu t b n
− Click nút Put Files, ñ ñưa Site lên Server
− K t n i v i Remote Site:N u khi t o Site m i ta chưa xác ñ nh Remote Site
(Thư m c ch a Site trên Server), nên sau khi click Put File s xu t hi n thông
báo yêu c u k t n i v i Remote Site

Trang 61
− Ch n Yes, Xu t hi n h p tho i Site Definition
− Ch n m c Remote Info, trong khung Access, ch n Local/ Network (gi l p
m t thư m c trên m ng c c b , ho c trên m t thư m c khác c a ñĩa c ng)
− T i m c Remote Folder, Click bi u tư ng Folder, ñ tìm thư m c m i ch a
Site
5. Xu t b n Site lên Remote Site:
− Trong Site Panel, ch n l i tên Site c n xu t b n
− Click nút Put File
− Xu t hi n h p tho i: Are you sure you wish to put the entire site?
− Click OK
− Xu t hi n h p tho i k t n i, các t p tin và thư m c c a Site l n lư t ñư c
chép t site lên Remote Site
6. Ki m tra l i trên Remote Site
− Click nút Expand trong Site Panel: Màn hình chia làm 2 ph n: Bên trái là
Remote Site, Bên ph i là Local Site
VIII.4.5. Site Map:
1. Xem m t Site Map:
− Site map là m t sơ ñ c u trúc Site, nó hi n th v trí và s phân c p c a các
t p tin trong Site. M t Site khi ñư c t o ñ y ñ liên k t, có th xem dư i
d ng Site map
− C n ph i ñ nh nghĩa trang HomePage trư c ho c trong Site ph i có trang
Index.htm
− Trong Site Panel, ch n Map view trong khung Site view
ClickCh n thư m c m i ch a Site

Trang 62
− Ho c click nút Expand/Collapse Click ch n Site Map
2. T o liên k t trong Site Map:Có th t o liên k t trang m t cách tr c quan và
ñơn gi n b ng cách s d ng Site Map. Cách th c hi n như sau:
−−−− T o Site m i trong ñó ph i có trang Index.htm ho c Home Page
o Ch n Site Manage Sites Click nút Edit
o Xu t hi n c a s Definition Ch n Site Map Layout
o Home Page: ñư ng d n ñ n t p tin Index OK Done
−−−− T o liên k t b ng SiteMap
o Click nút Expand/Collapse ñ m r ng Site Panel
o Click ch n nút SiteMap
o Màn hình xu t hi n trang Index.htm trong site
−−−− T o liên k t phân c p:
o Click ph i trên file Index ch n Link to new File

Trang 63
o Xu t hi n h p tho i Link to New File:
o File Name: Nh p tên file
o Title: tiêu ñ c a trang
o Text of Link: dòng text ñ liên k t
−−−− T o liên k t nhanh:
o Ch n t p tin c n t o liên k t
o Click bi u tư ng liên k t bên c nh t p tin ñư c ch n
o Kéo mũi tên liên k t ñ n t p tin liên k t ñ n
o Sau khi liên k t, ñư c SiteMap
Liên k t ñ n File m i
Liên k t ñ n File ñã

Trang 64
CHƯƠNG IX: ð NH D NG VĂN B N- S D NG CSS
IX.1. ð NH D NG VĂN B N
−−−− Cách nh p gi ng như các trình so n th o văn b n khác, m i ph n n i dung ñư c phân
cách b ng cách xu ng dòng, n u xu ng dòng trong cùng m t ño n (Paragraph) thì
nh n Shift + Enter, n u ng t ño n thì nh n Enter.
−−−− ð hi u ch nh văn b n thư ng s d ng thanh công c Properties Inspector. Cách t ng
quát là ñánh d u kh i văn b n ch n ki u ñ nh d ng
−−−− S d ng thanh công c Properties Inspector:
IX.1.1. Font:
− Cách 1:T i m c format Ch n các heading, ñây là các ñ nh d ng m u, bao g m
Font ch , ki u ch , size, …thư ng dùng làm tiêu ñ
− Cách ch n nhóm Font ch : Ch n văn b n, r i ch n nhóm Font trên Font menu
c a Properties Inspector ho c ch n menu Text Font. Trong Dreamweaver, ki u
Font ch ñư c ñ nh thành t ng nhóm, m i nhóm g m nhi u font, m t Font chính
và các Font d phòng. Có th t o ra các nhóm Font tuỳ ý b ng cách t i muc
Font Ch n Edit Font List
Ch n Font trong khung Available Fonts, Click nút ñưa các font ñư c
ch n qua khung Chosen fonts
T o thêm nhóm Font m i
Xoá nhóm ra kh i Font List
S p x p các nhóm Font theo th t

Trang 65
1. Font size:
− Ch n kh i văn b n, Ch n c ch trong m c Size c a Properties Inspector, ho c
ch n Text Size. Size ch trong Dreamweaver g m 17 Font Size, trong ñó có 8
m c th hi n b ng s , t 9 ñ n 36 và 9 m c th hi n b ng ch
2. Font Color:
Ch n kh i văn b n, Click nút Text Color, ch n màu ho c ch n Text Color
3. Canh l ño n văn b n
− Ch n Text Align ho c Click công c
IX.1.2. Danh sách d ng li t kê:
− Ch n Text List
− Unordered List: Chèn Bulletted ñ u dòng
− Ordered List: ðánh s th t ñ u dòng
Thay ñ i thu c tính li t kê:
− ð t d u nháy trong danh sách li t kê
− Ch n Text List Properties ho c click nút List Item. Xu t hi n h p tho i List
Properties
− List Type: Ch n ki u danh sách (Bullets ho c Numbered)
− Style: Lo i Ch m tròn ho c vuông
− Start count: S b t d u cho danh sách li t kê
List item:
− New Style: li t kê nhi u c p
− Reset count to: s b t ñ u cho danh sách con
Click nút Text color ch n

Trang 66
IX.2. S D NG CSS (CASCADING STYLE SHEETS)
− CSS (Cascading Style Sheets) cũng là m t d ng HTML Style. Nhưng phong phú hơn
v thu c tính và ng d ng. M t CSS không nh ng t p h p các ñ nh d ng, mà còn có
th giúp ñ nh v , vi n khung, ñ t màu n n…
− CSS có th ñính kèm trong trang ho c lưu riêng thành m t t p tin ki u CSS ph c v
cùng lúc cho nhi u trang
IX.2.1. T o CSS c c b :
1. Cách t o:
− Ch n Text CSS Styles New…Xu t hi n h p tho i New CSS Style:
− Ho c Window CSS Style, m CSS Panel, Click nút New CSS Style
− Name: Tên c a CSS m i, ph i b t ñ u b ng d u ch m(.)
− Selector Type: Ch n lo i CSS
− Define in: New Style Sheet File: t o m t t p tin CSS
− This document only: Ch s d ng CSS cho trang c c b
− Ch n OK, xu t hi n h p tho i CSS Style definition
− Trong m c category, ch n Type, sau ñó ch n các ñ nh d ng cho CSS
− Ch n xong,Click Apply OK
− Trong CSS Panel xu t hi n Style v a t o
2. Áp d ng CSS c c b :
− Ch n n i dung văn b n c n ñ nh d ng
− Trong CSS Style Panel, ch n tên CSS

Trang 67
IX.2.2. T o m t t p tin CSS:
T p tin ki u CSS là m t t p tin ph tr cho Site, n m trong thư m c root c a Site
1. Cách t o:
−−−− Text CSS Styles New
−−−− Trong h p tho i New CSS Style
−−−− Selector Type: Ch n Advanced
−−−− Define in: New Style Sheet file, OK
−−−− H p tho i yêu c u lưu t p tin CSS, có ph n m r ng .CSS
2. Áp d ng CSS t t p tin CSS:
−−−− M trang HTML c n s d ng t p tin CSS
−−−− Ch n Text CSS Style Attach Style Sheet.
−−−− Ho c Click nút Attach Style Sheet trong Style Panel.
−−−− Ch n t p tin CSS c n k t n i, Click nút Browse…
−−−− Add as:
o Link: Ch liên k t v i t p tin CSS ñ s d ng
o Import : Chép t p tin CSS vào trang
3. Hi u ch nh m t CSS:
−−−− Click ph i tr n tên CSS trong CSS Style Panel
−−−− Ch n Edit, th c hi n hi u ch nh
4. Xoá m t CSS Styles:
Khi xoá m t CSS Style thì nh ng n i dung áp d ng CSS Style b xoá s tr v
tr ng thái ban ñ u
−−−− Ch n CSS Style c n xoá
−−−− Click nút Delete CSS Style trong CSS Style Panel
−−−− Ho c Click chu t ph i, ch n Delete
Attach Style Sheet
New Style Sheet
Delete Style

Trang 68
CHƯƠNG X: HÌNH NH VÀ LIÊN K T TRANG TRONG
DREAMWEAVER
X.1.CHÈN HÌNH NH VÀO TRANG WEB:
X.1.1. Chèn nh vào trang:
− nh trong thư m c Images c a Site:
ð t d u nháy t i v trí c n chèn nh
Drag chu t kéo t p tin nh trong Site Panel th vào trang
− nh ngoài Site:
Ch n Insert Image
Xu t hi n h p tho i Select Image Source
Ch n t p tin nh c n chèn OK
X.1.2. Hi u ch nh thu c tính c a nh:
− Ch n nh ñã chèn
− Window Properties
Image: ð t tên cho nh
W (Width), H (Height): ð r ng và chi u cao c a nh, tính b ng Pixel
Src: ñư ng d n tương ñ i ñ n t p tin nh
Alt: câu thông báo xu t hi n trên trình duy t khi rê chu t vào nh
Link: ð a ch URL nơi c n liên k t ñ n
Edit: Chuy n qua Macromedia Fire Works hi u ch nh nh
Crop: C t xén nh
Brightness/Contrast: Ch nh ñ sáng t i c a nh
Sharpen: Ch nh ñ s c nét cho nh
Resample:Lưu l i kích thư c ñã ñi u ch nh
Optimize in Fireworks: chuy n qua Macromedia FireWoks ñ hi u ch nh
Map : b ng ñ liên k t nh
VSpace, Hspace: Kho ng cách trên, dư i, trái, ph i gi a ph n n i dung
văn b n ñ n nh
Target: Khung ch a trang liên k t ñ n
Low Src: tên t p tin nh ph có ñ phân gi i th p, làm nh thay th khi
ch hi n th nh chính trên trình duy t
Border: ñư ng vi n nh
Align: canh l trái, ph i, gi a…

Trang 69
X.1.3. Chèn khung nh:
Trong thi t k , nhi u lúc c n d phòng trư c cho nh trang trí, nhưng chưa có nh
thích h p, ta có th chèn trư c m t khung nh v i kích thư c xác ñ nh ñ gi ch
− Ch n Insert Image Objects Image Placeholder
− Xu t hi n h p tho i Image Placeholder
− Nh p tên, kích thư c, màu cho khung nh
Chèn nh vào khung nh:
− Double click vào khung c n chèn nh
− Xu t hi n h p tho i Select Image Source, ch n t p tin nh c n chèn vào khung
X.1.4. Insert Rollover Image:
− Insert Image Objects Rollover Image, Xu t hi n h p tho i Rolloveer Image
Original Image: nh g c
Rollover Image: nh khi rê chu t vào
X.1.5. Chèn Flash:
− Insert Media Flash
− Ch n t p tin ki u .swf
− T i v trí chèn xu t hi n bi u tư ng Flahs
Hi u ch nh thu c tính c a Flash

Trang 70
Flash: Tên ñ i tư ng Flash
W (Width), H (Height): Chi u r ng và chi u cao c a nh Flash
File: tên t p tin Shockware c a Flash
Src: tên t p tin g c c a Flash
Edit: Hi u ch nh trong Macromedia Flash
Reset size: tr v kích thư c ban ñ u
Loop: nh Flash l p vô t n
AutoPlay: t ñ ng di n ho t khi m tranng
Vspace, Hspace: kho ng cách trên, dư i, trái, ph i c a ñ i tư ng Flash
ñ n văn b n
Quality: ch t lư ng khi hi n th
Show All: hi n th t t c ñ i tư ng trong khung
No Border: không gi i h n trong khung vi n
Exact fit: v khít trong khung vi n
Align: canh l
Bg: màu n n dư i nh Flash
X.1.6. nh n n trang
− nh n n là nhh t ñ ng l p ñ y trang Web. Khi thi t k , b n nên ch n nh ng m u
n n th t nh t, ch s m ho c n n th t s m, ch màu sáng ñ ngư i xem d ñ c
− Tuỳ thu c vào t ng lo i n n mà xác ñ nh kích thư c nh n n cho phù h p, t o nh
n n v i s Kb càng nh thì trang hi n th càng nhanh
1. Cách t o nh n n:
ð t tr trong trang
ch n Modify Page Properties
Bacground Images : nh p ñư ng d n ñ n t p tin nh làm n n
2. nh n n trang c ñ nh không l p
ðây là d ng n n khó th c hi n, kích thư c nh thư ng r t l n, nên ph i nén ñ gi m
s Kb t i ña,
T o nh n n c ñ nh, không l p b ng CSS:
− Thi t k nh c n làm n n
− Ch n Text CSS Styles New CSS Style, Trong h p tho i New CSS Style:
− Selector: Nh p tên Style
− Selector Style: Ch n m c Advanced
− Define in: This document only OK, Xu t hi n h p tho i CSS Style
definition:
− Trong m c Category, ch n Background
− Background Image: tên t p tin nh làm n n
− Repeat: No Repeat (không l p)
− Attachment: fixed (n n c ñ nh không b cu n)
− Horizontal, vertical Position: center OK
S d ng CSS nh n n
− Khi t o CSS Style, trong CSS Style Panel xu t hi n tên Style v a t o
− ð ñưa CSS Style nh n n v a t o làm n n cho trang, Click ph i trên Tag
<Body> c a trang, ch n Set Class Ch n tên Style v a t o
X.1.7. T o Web Photo album:

Trang 71
1. Ch c năng: T o b sưu t p các hình nh hay cu n Album giúp ngư i s d ng qu n
lý và ch n xem t ng hình m t cách nhanh nh t
2. Cách t o: ð th c hi n ch c năng này c n ph i cài ñ t Macromedia Fireworks và
m t thư m c ch a các hình photo
− Ch n Commands Create Web Photo album
− Xu t hi n h p tho i Create Web Photo Album
− Nh p các thông s :
− Photo Album Title: Nh p tiêu ñ c a Album
− Subheading Info : Nh p tiêu ñ ph ( Xu t hi n dư i tiêu ñ chính)
− Other Info: Nh ng thông tin b xung
− Source Images Folder: ð a ch c a folder ch a hình
− Destination folder: ð a ch c a Photo Album sau khi t o
− Thumbnail size: Kích thư c c a hình trong trang chính
− Show files name : Ghi/ Không ghi tên file dư i m i hình
− Column: s c t hình có trong trang chính
− Thumbnail format: Ch n ki u ñ nh d ng hình trong trang Index
− Ch n ki u ñ nh d ng hình trong trang con
− Scale : t l hình so v i trang Index
− Creat navigation page for each photo: Có / không t o cho m i hình m t trang
riêng ñ b xung thêm trong tin
Nh p xong click OK, ch k t qu , xu t hi n thông báo Album ñã ñư c t o, Vào
c a s Site Panel xu t hi n thêm các folder:
− Folder Thumbnail: ch a các file JPG
− Folder Page ch a các file .HTM cho m i Image tương ng (trang con)
− T p tin Index.htm trong Folder ch a Website, ñây là t p tin Album chính
M t p tin Index.htm và di chuy n gi a các trang b ng các Hyperlink Next
Previous, Home
3. B sung thông tin cho m i trang con:
− Trong Site Panel, m t p tin mu n b sung thông tin trong Folder Page
− Nh p thông tin, trình bày theo ý mu n, lưu l i
− ð i tên t p tin này thành Gallery.htm

Trang 72
− Gán ñ nh d ng Template vào cho File Gallery.htm, m t p tin Index, xem k t
qu
X.1.8. T o Library Item:
1. Khái ni m: Library ch a các thành ph n c a trang như hình nh, văn b n và
các ñ i tư ng khác mà ta có nhu c u s d ng l i ho c c n c p nh t thư ng
xuyên. Các thành ph n này g i là Library Items. Cách t o Library Item:
2. Cách t o:M AssetsPanel (Window Assets), trong Assets Panel, Click
nút Library, Ch n thành ph n mu n t o Library Item và th c hi n m t trong
các bư c sau
Drag chu t kéo thành ph n ñư c ch n th vào khung Library ð t tên
Click nút New Library Item và ñ t tên
Ch n Modify Library Add Object to Library và ñ t tên
3. Nh p Library Item vào trang m i:
− ð t d u nháy vào nơi mu n nh p Library Item
− Kéo Library Item t Assets Panel th vào document Window, ho c click nút
Insert trong Assets Panel
4. Hi u ch nh Library Item:
− Ch n Library Item trong khung Library Click nút Edit
− Xu t hi n h p tho i cho phép hi u ch nh library Item
− Click Save xu t hi n h p tho i b n có mu n c p nh t t t c trang Web có
s d ng Library trong site không, Yes : ñ c p nh t, No : không.
− Sau này có th c p nh t b ng cách ch n Modify Library Update pages:
c p nh t t t c nh ng trang có s d ng Library Item
5. Tách Library Item trong Document kh i Library:
− Ch n Library Item trong trang Web hi n hành
− Click nút Detach from Original trên Properties Inspector, khi ñó library b
tách ra thành t ng ñ i tư ng và không còn liên quan ñ n Library, ta có th
hi u ch nh t ng ñ i tư ng
− T o l i Library Item b ng m t library ñang s d ng trong trang
− Có th dùng m t Library trong trang ñ t o l i m t Library Item, n u Library
Item b m t
− Ch n Library trên trang Web hi n hành
− Click nút Recreate trên Properties Inspector, Library Item s ñư c t o l i

Giao trinh thiet ke web 1

Recommended

Recommended

More Related Content

Similar to Giao trinh thiet ke web 1

Similar to Giao trinh thiet ke web 1 (20)

Giao trinh thiet ke web 1