Đây là bản xem thử online, xin hãy chọn download miễn phí bên dưới để xem bản đẹp dạng .pdf
TRƯỜNG ĐẠI HC ĐÀ LT  
KHOA CÔNG NGHTHÔNG TIN  
Thc sỹ  
Hoàng Mnh Hùng  
BÀI GING TÓM TT  
LP TRÌNH WEB  
Dành cho sinh viên ngành Cao Đẳng  
(Lưu hành ni b)  
Đà Lt 2008  
MC LC  
 
Lp trình Web  
2
Lp trình Web  
CHƯƠNG 1: GII THIU HTML – CÁC SIÊU LIÊN KT  
Kết thúc chương này, bn có th:  
¾
¾
¾
¾
¾
¾
Mô tvInternet  
Mô tvHTML  
Viết mt tài liu HTML đơn gin  
Sdng siêu liên kết trong tài liu HTML  
Sdng th<META>  
Sdng các ký tự đặc bit trong tài liu HTML  
1
.1 GII THIU  
“Internet”,“World Wide Web”, và “Web page” không chcòn là các thut ng. Giờ  
đây, các thut ng này đã tr thành hin thc. Internet là mng máy tính ln nht trên  
thế gii, được xem như là mng ca các mng. World Wide Web là mt tp con ca  
Internet. World Wide Web gm các Web Servers có mt khp mi nơi trên thế gii.  
Các Web server cha thông tin mà bt kngười dùng nào trên thế gii cũng có thể  
truy cp được. Các thông tin đó được lưu trdưới dng các trang Web.  
Trong phn này, chúng ta s hc v Ngôn ng đánh du siêu văn bn (HTML), đây là  
mt phn quan trng trong lãnh vc thiết kế và phát trin thế gii Web.  
1
.2 GII THIU INTERNET  
Mng là mt nhóm các máy tính kết ni vi nhau. Internet là mng ca các mng.  
Giao thc TCP/IP (Transmission Control Protocol/Internet Protocol) cung cp vic kết  
ni tt ccác máy tính trên thế gii.  
Hình 1.1: Internet  
World Wide Web là mt tp con ca Internet. Nó bt đầu như  đề án nghiên cu cp  
quc gia ti phòng nghiên cu CERN Thy Sĩ. Ngày nay, nó cung cp thông tin cho  
người dùng trên toàn thế gii.  
WWW hot động da trên 3 cơ chế để đưa các tài nguyên có giá trị đến vi người  
dùng. Đó là:  
4
 
Lp trình Web  


Giao thc: Người dùng tuân theo các giao thc này để truy cp tài nguyên trên  
Web. HyperText Transfer Protocol(HTTP) là giao thc được WWW sdng.  
Địa ch: WWW tuân theo mt cách thc đặt tên thng nht để truy cp vào các  
tài nguyên trên Web. URL được sdng để nhn dng các trang và các tài  
nguyên trên Web.  

HTML: Ngôn ngữ đánh du siêu văn bn (HTML) được s dng để to các tài  
liu có thtruy cp trên Web. Tài liu HTML được to ra bng cách sdng  
các th và các phn t ca HTML. File được lưu trên Web server vi đuôi .htm  
hoc .html.  
Khi bn s dng trình duyt để yêu cu mt s thông tin nào đó, Web server s đáp  
ng các yêu cu đó. Nó gi thông tin được yêu cu đến trình duyt dưới dng các  
trang web. Trình duyt định dng thông tin do máy chgi vvà hin thi chúng.  
Hình 1.2: Trình duyt yêu cu đến máy chủ  
1
.3 GII THIU HTML  
Ngôn ngữ đánh du siêu văn bn chrõ mt trang Web được hin thnhư thế nào trong  
mt trình duyt. Sdng các thvà các phn tHTML, bn có th:  


Điu khin hình thc và ni dung ca trang  
Xut bn các tài liu trc tuyến và truy xut thông tin trc tuyến bng cách sử  
dng các liên kết được chèn vào tài liu HTML  


To các biu mu trc tuyến để thu thp thông tin v người dùng, qun lý các  
giao dch .....  
Chèn các đối tượng như audio clip, video clip, các thành phn ActiveX và các  
Java Applet vào tài liu HTML  
Tài liu HTML to thành mã ngun ca trang Web. Khi được xem trên trình son  
tho, tài liu này là mt chui các thvà các phn t, mà chúng xác định trang web  
hin th như thế nào. Trình duyt đọc các file có đuôi .htm hay .html và hin th trang  
web đó theo các lnh có trong đó.  
Ví d, theo cú pháp HTML dưới đây shin ththông đip “My first HTML  
document”  
Ví d1:  
<HTML>  
<HEAD>  
5
 
Lp trình Web  
<TITLE>Welcome to HTML</TITLE>  
</HEAD>  
<BODY>  
<H3>My first HTML document</H3>  
</BODY>  
</HTML>  
Trình duyt thông dch nhng lnh này và hin thtrang web như hình 1.3  
Hình 1.3: Kết quví d1  
1.3.1 HTML Development  
Tài liu HTML được hin thtrên trình duyt. Vy trình duyt là gì ? Trình duyt là  
mt ng dng được cài đặt trên máy khách. Trình duyt đọc mã ngun HTML và hin  
thtrang theo các lnh trong đó.  
Trình duyt được s dng để xem các trang Web và điu hướng.Trình duyt được biết  
đến sm nht là Mosaic, được phát trin bi Trung tâm ng dng siêu máy tính quc  
gia (NCSA). Ngày nay, có nhiu trình duyt được s dng trên Internet. Netscape’s  
Navigator và Microsoft’s Internet Explorer là hai trình duyt được s dng ph biến.  
Đối vi người dùng, trình duyt d s dng bi vì nó có giao din đồ ha vi vic trỏ  
và kích chut.  
Để to mt tài liu ngun,bn phi cn mt trình son tho HTML. Ngày nay, có nhiu  
trình son tho đang được sdng: Microsoft FrontPage là mt công ctng hp  
được dùng để to, thiết kế và hiu chnh các trang Web. Chúng ta cũng có ththêm  
văn bn, hình nh , bng và nhng thành phn HTML khác vào trang. Thêm vào đó,  
mt biu mu cũng có thể được to ra bng FrontPage. Mt khi chúng ta to ra giao  
din cho trang web, FrontPage tự động to mã HTML cn thiết. Chúng ta cũng có thể  
dùng Notepad để to tài liu HTML. Để xem được tài liu trên trình duyt bn phi  
lưu nó vi đuôi là .htm hay .html.  
Các lnh HTML được gi là các th. Các thnày được dùng để điu khin ni dung và  
hình thc trình bày ca tài liu HTML. Th m (“<>”) và th đóng (“</>”), ch ra sự  
bt đầu và kết thúc ca mt lnh HTML.  
Ví d, thHTML được sdng để đánh du sbt đầu và kết thúc ca tài liu HTML  
<HTML>  
.
. .  
6
 
Lp trình Web  
</HTML>  
Chú ý rng các th không phân bit ch hoa và ch thường, vì thế bn có th s dng  
html> thay cho <HTML>  
<
ThHTML bao gm:  
<ELEMENT ATTRIBUTE = value>  
Phn t: nhn dng thẻ  
Thuc tính: Mô tthẻ  
Value: giá trị được thiết lp cho thuc tính  
Ví d, <BODY BGCOLOR = lavender>  
Trong ví dtrên, BODY là phn t, BGCOLOR(nn) là thuc tính và “lavender” là  
giá tr. Khi cú pháp HTML được thc hin, màu nn cho c trang được thiết lp là  
màu “lavender”.  
1
.3.2 Cu trúc ca mt tài liu HTML  
Mt tài liu HTML gm 3 phn cơ bn:  

Phn HTML: Mi tài liu HTML phi bt đầu bng thmHTML <HTML>  
và kết thúc bng thẻ đóng HTML </HTML>  
<HTML> ….  
</HTML>  
ThHTML báo cho trình duyt biết ni dung gia hai thnày là mt tài liu  
HTML  

Phn tiêu đề: Phn tiêu đề bt đầu bng th<HEAD> và kết thúc bi thẻ  
/HEAD>. Phn này cha tiêu đề  được hin th trên thanh điu hướng ca  
<
trang Web. Tiêu đề nm trong thTITLE, bt đầu bng th<TITLE> và kết  
thúc là th</TITLE>.  
Tiêu đề là phn khá quan trng. Các mc được dùng để đánh du mt web site.  
Trình duyt s dng tiêu đề để lưu tr các mc này. Do đó, khi người dùng tìm kiếm  
thông tin, tiêu đề ca trang Web cung cp tkhóa chính yếu cho vic tìm kiếm.  

Phn thân: phn này nm sau phn tiêu đề. Ph ̀n thân bao gm văn bn, hình  
nh và các liên kết mà bn mun hin thtrên trang web ca mình. Phn thân  
bt đầu bng th<BODY> và kết thúc bng th</BODY>  
Ví d2:  
<HTML>  
<HEAD>  
<TITLE>Welcome to the world of HTML</TITLE>  
<
/HEAD>  
BODY>  
<
<
P>This is going to be real fun</P>  
</BODY>  
7
 
Lp trình Web  
</HTML>  
Hình 1.4: Kết quca ví d2  
Đon  
Bn có chú ý đến th<P> trong ví d2 không? Th<P> để trình bày mt đon  
Khi viết mt bài báo hay mt bài lun, bn nhóm ni dung thành mt lot các đon.  
Mc đích là nhóm các ý tưởng logic li vi nhau và áp dng mt số định dng cho ni  
dung. Trong mt tài liu HTML, ni dung có th được nhóm thành các đon. Thẻ  
đon <P> được sdng để đánh du sbt đầu ca mt đon mi.  
Ví d3  
<HTML>  
<HEAD>  
<
TITLE>Welcome to HTML</TITLE>  
/HEAD>  
BODY BGCOLOR = lavender>  
<
<
<
P>This is going to be real fun  
P> Another paragraph element  
<
</BODY>  
</HTML>  
Hình 1.5: Kết quca ví d3  
Thẻ đóng </P> là không bt buc. Th<P> kế tiếp stự động bt đầu mt đon mi.  
Các thngt  
8
Lp trình Web  
Phn t <BR> được s dng để ngt dòng trong tài liu HTML. Th <BR> b sung  
mt ký txung dòng ti vtrí ca th.  
Ví d4:  
<HTML>  
<HEAD>  
<
TITLE>Welcome to HTML</TITLE>  
/HEAD>  
BODY BGCOLOR = lavender>  
<
<
<
P>This is going to be real <BR>fun  
P> Another paragraph element  
<
</BODY>  
</HTML>  
Hình 1.6: Kết quca ví d4  
Chn canh lề  
Thuc tính align được s dng để canh l cho các phn t HTML trong trang Web.  
Chúng ta có th canh l văn bn, các đối tượng, hình nh, các đon, các phân đon,....  
Sau đây, bn shc cách canh lvăn bn:  
Thuc tính align gm các giá trsau:  
Value  
Description  
Left  
Văn bn được canh ltrái  
Văn bn được canh gia  
Văn bn được canh phi  
Văn bn được canh đều hai bên  
Center  
Right  
Justify  
Canh lề được mc định da vào hướng ca văn bn. Nếu hướng văn bn là ttrái sang  
phi thì mc định là trái.  
9
Lp trình Web  
Ví d5  
<HTML>  
<HEAD>  
<
TITLE>Learning HTML</TITLE>  
/HEAD>  
BODY BGCOLOR=lavender>  
<
<
<P align = right>This is good fun</P>  
</BODY>  
</HTML>  
Hình 1.7: Kết quca ví d5  
1
.3.3 Sdng th<META>  
Phn tiêu đề cũng cha phn t META. Phn t này cung cp thông tin v trang web  
ca bn. Nó gm tên tác gi, tên phn mm dùng để viết trang đó, tên công ty, thông  
tin liên lc .... Phn tMETA sdng skết hp gia thuc tính và giá tr.  
Ví d, để chGraham Browne là tác gi, người ta sdng phn tMETA như sau:  
<META name=”Author” content=”Graham Browne”>  
Tác gica tài liu là “Graham Browne”  
Thuc tính http-equiv có thể được sdng để thay thế thuc tính name. Máy chủ  
HTTP sdng thuc tính này để to ra mt đầu đáp ng HTTP (HTTP response  
header).  
Đầu đáp ng được truyn đến trình duyt để nhn dng d liu. Nếu trình duyt hiu  
được đầu đáp ng này, nó stiến hành các hành động đặc bit đối vi đầu đáp ng đó.  
Ví d, <META http-equiv=”Expires” content=”Mon, 15 Sep 2003 14:25:27 GMT”>  
ssinh ra mt đầu đáp ng HTTP như sau:  
Expires: Mon, 15 Sep 2003 14:25:27 GMT  
Do vy, nếu tài liu đã lưu li, HTTP sbiết khi nào truy xut mt bn sao ca tài liu  
tương ng.  
1
.3.4 Sdng ký tự đặc bit trong tài liu HTML  
1
0
 
Lp trình Web  
Bn có th chèn các ký tự đặc bit vào văn bn ca tài liu HTML. Để đảm bo trình  
duyt không nhm chúng vi thHTML, bn phi gán mã định dng cho các ký tự đặc  
bit này.  
Ký tự đặc  
bit  
định  
dng  
Ví dụ  
Ln hơn (>)  
&gt;  
<HTML>  
<
<
<
<
HEAD>  
TITLE>Learning HTML</TITLE>  
/HEAD>  
BODY>  
<
<
CODE>If A &gt; B Then <BR> A = A + 1  
/CODE>  
<
P> The above statement  
used  
special  
characters  
<
<
/BODY>  
/HTML>  
Nhhơn (<)  
&lt;  
<HTML>  
<
<
<
<
<
<
HEAD>  
TITLE>Learning HTML</TITLE>  
/HEAD>  
BODY>  
CODE>If A &lt; B Then <BR> A = A + 1 </CODE>  
P> The above statement used special  
characters  
<
<
/BODY>  
/HTML>  
Trích dn(““) &quot;  
<HTML>  
<
<
<
<
&
HEAD>  
TITLE>Learning HTML</TITLE>  
/HEAD>  
BODY>  
quot; To be or not to be ? &quot; That  
is the question  
<
<
/BODY>  
/HTML>  
Ký t“&”  
&amp;  
<HTML>  
HEAD>  
<
1
1
Lp trình Web  
<
<
<
<
<
<
TITLE>Learning HTML</TITLE>  
/HEAD>  
BODY>  
P> William &amp; Graham went to the fair  
/BODY>  
/HTML>  
1
.4 SDNG CÁC SIÊU LIÊN KT  
Siêu liên kết là mt phn tbên trong tài liu mà liên kết đến mt vtrí khác trong  
cùng tài liu đó hoc đến mt tài liu hoàn toàn khác. Chng hn, khi ta kích vào siêu  
liên kết snhy đến liên kết cn đến. Các siêu liên kết là thành phn quan trng nht  
ca hthng siêu văn bn  
1
.4.1 Gii thiu siêu liên kết và URL  
Kh năng chính ca HTML là h tr siêu liên kết. Mt siêu liên kết, hay nói ngn gn  
là mt liên kết, là s kết ni đến tài liu hay file khác (đồ ha, âm thanh, video) hoc  
ngay cả đến mt phn khác trong cùng tài liu đó. Khi kích vào siêu liên kết, người  
dùng được đưa đến địa chURL mà chúng ta chrõ trong liên kết.  





Mt phn khác trong cùng tài liu  
Mt tài liu khác  
Mt phn trong tài liu khác  
Các file khác – hình nh, âm thanh, trích đon video  
Vtrí hoc máy chkhác  
Hình 1.8: Sdng liên kết  
Các liên kết có thlà liên kết trong hoc liên kết ngoài  

Liên kết trong là liên kết kết ni đến các phn trong cùng tài liu hoc cùng mt  
web site  
1
2
 
Lp trình Web  

Liên kết ngoài là liên kết kết ni đến các trang trên các web site khác hoc máy  
chkhác.  
Hình 1.9: Liên kết trong và liên kết ngoài  
Để to siêu liên kết, chúng ta cn phi xác định hai thành phn:  
1
2
. Địa ch đầy đủ hoc URL ca file được kết ni  
. Đim nóng cung cp cho liên kết. Đim nóng này có th  mt dòng văn bn, thm  
chí là mt nh.  
Khi người dùng kích vào đim nóng, trình duyt đọc địa chỉ được chra trong URL và  
nhy” đến vtrí mi  
Mi ngun tài nguyên trên Web có mt địa ch duy nht. Ví d, 207.46.130.149 là địa  
chweb site ca Micorsoft. Giờ đây, để nhcác con snày rt khó và dnhm ln. Vì  
vy, người ta s dng các URL. URL là mt chui cung cp địa ch Internet ca web  
site hay tài nguyên trên World Wide Web.  
[trong đó  
Nameofsite: tên ca site  
Typeofsite: kiu ca site  
Contrycode: mã nước]  
Ví d, 216.239.33.101 có thể được biu din bng URL là www.google.com  
URL cũng nhn biết được giao thc mà site hay tài nguyên được truy nhp. Dng URL  
thông thường nht là “http”, nó cung cp địa ch Internet ca mt trang Web. Mt vài  
dng URL khác là “gopher”, nó cung cp địa chInternet ca mt thư mc Gopher, và  
“ftp”, cung cp vtrí ca mt tài nguyên FTP trên mng.  
1
3
Lp trình Web  
URL cũng có ththam chiếu đến mt vtrí trong mt tài nguyên. Ví d, bn có thto  
liên kết đến mt ch đề trong cùng mt tài liu. Trong trường hp đó, định danh đon  
được sdng phn cui ca URL  
Định dng là, giao thc: tên ca site / tài liu chính #định danh đon  
Có hai dng URL:  

URL tuyt đối – là địa ch Internet đầy đủ ca trang hoc file, bao gm giao thc,  
vtrí mng, đường dn tùy chn và tên file. Ví d, http://www.microsoft.com là  
mt địa chURL tuyt đối.  

URL tương đối – là mt URL có mt hoc nhiu phn b thiếu. Trình duyt ly  
thông tin b thiếu t trang cha URL đó. Ví d, nếu giao thc b thiếu, trình duyt  
sdng giao thc ca trang hin thi.  
1
.4.2 Sdng siêu liên kết  
Th <A> được s dng để xác định văn bn hay nh nào s dùng làm siêu liên kết  
trong tài liu HTML. Thuc tính HREF (tham chiếu siêu văn bn) được dùng để chỉ  
địa chhay URL ca tài liu hoc file được liên kết.  
Cú pháp ca HREF là:  
<A HREF = protocol://host.domain:port/path/filename>Hypertext</A>  
Trong đó,  
Giao thc – Đây là loi giao thc. Mt s giao thc thường dùng:  





http – giao thc truyn siêu văn bn  
telnet – mmt phiên telnet  
gopher – tìm kiếm file  
ftp – giao thc truyn file  
mailto – gi thư đin tử  
Host.domain – Đây là địa chInternet ca máy chủ  
Port - Cng phc v ca máy ch đích  
HyperText – Đây là văn bn hay hình nh mà người dùng cn nhp vào để kích  
hot liên kết  
Liên kết đến nhng tài liu khác  
Giscó hai tài liu HTML trên đĩa cng cc b, Doc1.htm và Doc2.htm. Để to mt  
liên kết tDoc1.html đến Doc2.htm  
Ví d6:  
<HTML>  
<HEAD>  
<TITLE> Using links</TITLE>  
</HEAD>  
1
4
 
Lp trình Web  
<BODY>  
<
<
<
BR><BR>  
P> This page is all about creating links to documents.  
A HREF = Doc2.html>Click here to view document 2</A>  
</BODY>  
</HTML>  
Hình 1.10: Kết quca ví d6  
Khi người dùng “nhy” đến mt tài liu khác, bn nên cung cp cách để quay trli  
trang chhoc định hướng đến mt file khác.  
Ví d7:  
<HTML>  
<HEAD>  
<TITLE> Document 2</TITLE>  
</HEAD>  
<BODY>  
<BR><BR>  
<P> This is document 2. This page is displayed when you click  
the hyperlink in Document 1  
<BR><BR>  
<A HREF= Doc1.html>Back Home</A>  
</BODY>  
</HTML>  
1
5
Lp trình Web  
Hình 1.11: Kết quví d7  
Chú ý là các liên kết được gch chân. Trình duyt tự động gch chân các liên kết. Nó  
cũng thay đổi hình dáng con trchut khi người sdng di chuyn chut vào liên kết.  
̃
 ví d trên, các file nm trong cùng mt thư mc, vì vy ch cn ch ra tên file trong  
thông sHREF là đủ. Tuy nhiên, để liên kết đến các file thư mc khác, cn phi  
cung cp đường dn tuyt đối hay đường dn tương đối  
Đường dn tuyt đối chra đường dn đầy đủ tthư mc gc đến file. Ví d,  
C:\mydirectory\html examples\ Doc2.htm  
Đường dn tương đối ch ra v trí liên quan ca file vi v trí file hin ti. Ví d, nếu  
thư mc hin hành là mydirectory thì đường dn slà ,  
<A HREF= “..\Doc3.htm”>Next page</A>  
Vì vy, nếu mun liên kết các tài liu không liên quan vi nhau thì ta nên dùng đường  
dn tuyt đối. Tuy nhiên, nếu ta có mt nhóm tài liu có liên quan vi nhau, chng hn  
phn trgiúp trong HTML, thì ta nên sdng đường dn tương đối cho các tài liu  
trong nhóm và đường dn tuyt đối cho các tài liu không liên quan trc tiếp đến chủ  
đề. Khi đó người dùng có thcài đặt phn trgiúp này trong thư mc mình chn và nó  
vn hot động.  
Liên kết đến các phn trong cùng mt tài liu  
Thneo <A> (anchor) được sdng để người dùng có th“nhy” đến nhng phn  
khác nhau ca mt tài liu. Ví d, bn có thhin thni dung ca trang Web như mt  
lot các liên kết. Khi người dùng kích vào mt đề tài nào đó thì các chi tiết nm  mt  
phn khác ca tài liu được hin th.  
Kiu liên kết này gi là “named anchor” bi vì thuc tính NAME được sdng để to  
các liên kết này  
<A NAME = “marker”>Topic name</A>  
Bn không phi sdng bt kvăn bn nào để đánh du đim neo  
Để dùng, ta sdng vch du (marker) trong thông sHREF như sau  
<A HREF= “#marker”>Topic name</A>  
1
6
Lp trình Web  
Du # trước tên ca siêu liên kết để báo cho trình duyt biết rng liên kết này liên kết  
đến mt đim được đặt tên trong tài liu. Khi không có tài liu nào được ch ra trước  
ký t#, trình duyt hiu rng liên kết này nm trong cùng tài liu.  
Ví d8:  
<HTML>  
<HEAD>  
<TITLE>Using Links</TITLE>  
</HEAD>  
<BODY>  
<
<
<
<
<
<
<
<
<
A HREF = #Internet>Internet</A>  
BR><BR>  
A HREF = #HTML>Introduction to HTML</A>  
BR><BR>  
A HREF = #Consistency>Unity and Variety</A>  
BR><BR>  
A name = Internet>Internet</A>  
BR>  
P> The Internet is a network of networks. That is, computer  
networks are linked to other networks, spanning countries and today  
the globe. The TCP/IP transfer protocol provides the bindings that  
connect all these computers the world over.  
<
<
<
<
/P>  
A name = HTML>Introduction to HTML</A>  
BR>  
P> Hyper Text Markup Language is the standard language that  
the Web uses for creating and recognizing documents. Although not a  
subset of, it is loosely related to the Standard Generalized Markup  
Language (SGML). SGML is  
formatting languages.  
a
method for representing document  
<
<
<
<
/P>  
A name = Consistency>Unity and Variety</A>  
BR>  
P>  
A
basic rule is that of unity and variety. That is,  
everything should fit together as a unit, but at the same time there  
is enough variety to keep things interesting. Consistency creates and  
reinforces the unique identity of  
a
site. Colors, fonts, column  
layout and other design elements should be consistent throughout  
every section of the site.  
</BODY>  
</HTML>  
1
7
Lp trình Web  
Hình 1.12: Kết qu ví d 8  
Hình 1.13: Kết qu ví d 8 sau khi kích vào Internet  
Liên kết đến mt đim xác định mt tài liu khác  
Bây gi chúng ta đã biết cách s dng các vch du trong cùng mt tài liu, hãy thử  
nhy” đến mt vtrí trên mt tài liu khác.  
Để “nhy” đến mt đim trên tài liu khác, chúng ta cn phi chra tên ca tài liu khi  
chúng ta to vch du. Trước tiên trình duyt sẽ đọc tên tài liu và m tài liu đó. Sau  
đó nó sẽ đọc vch du và di chuyn đến đim được đánh du.  
Ví d9  
<HTML>  
<HEAD>  
<TITLE>Main document</TITLE>  
</HEAD>  
<BODY>  
<
A HREF=Chapter18.html#Internet>Internet</A>  
BR>  
<
1
8
Lp trình Web  
<BR>  
<A HREF= Chapter18.html#HTML>Introduction to HTML</A>  
<BR>  
<BR>  
<A HREF=Chapter18.html#Consistency>Unity and Variety</A>  
</BODY>  
</HTML>  
Hình 1.14: Kết qu ví d 9  
Hình 1.15: Kết qu ví d 9 sau khi kích vào Internet  
Chú ý sging nhau gia hình 1.13 vào hình 1.15  
Sdng e-mail  
Nếu mun người sdng gi được e-mail, chúng ta có thể đưa mt đặc tính vào trong  
trang Web và cho phép h gi e-mail t trình duyt. Tt c nhng gì chúng ta cn làm  
là chèn giá trmailto vào trong thliên kết.  
<A HREF=”mailto:thisperson@mymail.com”>  
1
.4.3 Điu hướng quanh Web site  
1
9
 
Lp trình Web  
Dù web site có lôi cun đến đâu, nếu nó không có mt lược đồ điu hướng đơn gin  
thì người dùng cũng smt phương hướng ngay. Mt strong shcó thskhông  
bao gi quay li. Lược đồ điu hướng trong mi site là khác nhau. Tuy nhiên có mt  
snguyên tc cơ bn mà bn cn nh:  


Xác định ni dung ca web site  
To mt lược đồ điu hướng để giúp người dùng đi đến phn cn đến mt cách  
nhanh chóng  

Cung cp các chc năng tìm kiếm thông tin  
Có nhiu cách để tchc mt web site  

Trình bày tuyến tính – Cách này theo cu trúc tuyến tính. Có mt chui liên kết  
liên tc gia các trang. Mi trang có liên kết đến trang trước và trang sau. Trang  
cui có liên kết đến trang đầu. Định dng này được dùng khi chúng ta mun trình  
bày thông tin liên tc. Ví d, các chương trong cun sách hoc các slide ca mt  
bài trình bày mà yêu cu người dùng đọc thông tin theo trình tliên tiếp nhau.  
Hình 1.16: Trình bày tuyến tính  

Trình bày theo phân cp: Đây là cách trình bày thông thường nht được s dng  
trong thiết kế Web. Trang chliên kết vi nhiu trang khác. Người dùng có thể  
chn mt liên kết và “nhy” đến trang cn đến. Mi trang đều có liên kết vtrang  
ch.  
Hình 1.17: Trình bày theo phân cp  

Bn đồ ảnh – Mt s người thy cách trình bày trc quan thì d hiu hơn. Vì vy,  
bn đồ ảnh hay bn đồ site được đưa vào các trang ch. Khi người dùng kích vào  
các đim nóng thì tài liu liên quan được hin th.  
2
0
Lp trình Web  
Khi đã quyết định mt lược đồ điu hướng, đây là lúc để thiết kế tài liu. Có mt số  
nguyên tc mà bn cn ghi nh:  

Siêu liên kết nên rõ ràng. Tnên được gch chân và có màu xanh, bi vì trên Web,  
màu xanh được quy ước là siêu liên kết. Siêu liên kết thường xut hin cui  
trang. Nếu chúng xut hin gia đon văn bn, có thlàm người đọc không tp  
trung vào đề tài.  


Các trang con – nên có mt thanh menu hoc thanh điu hướng, nếu không người  
đọc có th không thy các trang chính. Nếu người dùng kích vào mt biu tượng  
bt ktrên thanh điu hướng thì hsnhy ttrang hin thi đến trang mi  
Luôn có mt bng mc lc để người dùng nhy sang mt đề tài nào đó. Bng mc  
lc (TOC) được hin thị ở cui trang. Người dùng có thchn mt đề tài nào đó để  
nhy đến trang cn đến  

Luôn có nút “Back” và “Forward” trong trang để người dùng có thể điu hướng  
đến trang cn đến. Trình duyt có cung cp các chn la này, nhưng nó s dng  
các trang trong danh sách history mà có thkhông phi là các trang trong Web site.  
2
1
Lp trình Web  
CHƯƠNG 2: CÁC THHTML CƠ BN  
Kết thúc chương này, bn có th:  
¾
¾
Sdng các thcơ bn  
Chèn hình nh vào trong tài liu HTML  
2
.1 GII THIU  
Chương này tho lun v nhng th cơ bn ca HTML như các th tiêu đề (Header),  
các thẻ đon và các thkhi. Phn này cũng nói vdanh sách (Lists) và làm thế nào để  
sdng các nh trong tài liu HTML  
2
.2 HEADING (TIÊU Đ)  
Phn tnày được sdng để cung cp tiêu đề cho phn ni dung hin thtrên trang  
web. Tt c nhng phn t tiêu đề phi có th kết thúc. Nó bt đầu bng th <H1> và  
kết thúc bng </H1>.  
Nhng phn tiêu đề được hin th to và in đậm hơn để phân bit chúng vi các phn  
còn li ca văn bn. Chúng ta cũng có thhin thphn tiêu đề mt trong sáu kích  
thước tH1 đến H6. Tt cnhng gì chúng ta làm là định rõ kích thước H1,  
H2…Trình duyt chú trng đến cách hin thị  
Ví d1:  
<HTML>  
<HEAD>  
<TITLE>Introduction to HTML</TITLE>  
<
<
<
<
<
<
<
/HEAD>  
H1>Introduction to HTML</H1>  
H2>Introduction to HTML</H2>  
H3>Introduction to HTML</H3>  
H4>Introduction to HTML</H4>  
H5>Introduction to HTML</H5>  
H6>Introduction to HTML</H6>  
</HTML>  
2
2
 
Lp trình Web  
Hình 2.1: Kết quví d1  
.3 THKHI <SPAN>, <DIV>  
2
Có nhng trường hp chúng ta mun chia văn bn trong mt trang web thành nhng  
khi thông tin logic. Chúng ta cũng có tháp dng nhng thuc tính thông thường cho  
toàn bkhi. Phn tDIV và SPAN được sdng để nhóm ni dung li vi nhau.  
Phn tDIV dùng để chia tài liu thành các thành phn có liên quan vi nhau. Phn tử  
SPAN dùng để chmt khong các ký t.  
Phn tSPAN dùng để định nghĩa ni dung trong dòng(in-line) còn phn tDIV dùng  
để định nghĩa ni dung mc khi (block-level)  
Ví d5:  
<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>  
Division 2  
2
3
 
Lp trình Web  
<
<
<
P>This is a second division  
BR>  
H2>Are you having fun?</H2>  
<
/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>  
Chú ý: Phn tSPAN không hin thtrong Netscape  
Hình 2.5: Kết quví d5  
2
.4 DANH SÁCH  
Danh sách dùng để nhóm d liu mt cách logic. Chúng ta có th thêm các danh sách  
vào tài liu HTML để nhóm các thông tin có liên quan li vi nhau.  
Ví d,  
Roses  
Sunflowers  
Orchids  
2
4
 
Lp trình Web  
Apples  
Oranges  
Daffodils  
Mangoes  
Có thể được nhóm thành:  
Fruits  
Apples  
Mangoes  
Oranges  
Flowers  
Daffodils  
Orchids  
Roses  
Sunflowers  
Các loi danh sách mà bn có thchèn vào tài liu HTML là:  

Danh sách không thtự  
Danh sách có thtự  


Danh sách định nghĩa  
2
.6.1 Danh sách không thtự  
Đây là loi danh sách đơn gin nht mà bn có ththêm vào tài liu HTML. Danh sách  
không thtlà mt “bulleted list”. Các mc được bt đầu bng du chm tròn  
“bullet”. Danh sách không thtự được nm trong cp th<UL>…</UL>. Mi mc  
trong danh sách được đánh du bng th <LI>. LI được viết tt ca t List Item. Thẻ  
kết thúc </LI> là tùy chn (không bt buc).  
Ví d6:  
<HTML>  
<HEAD>  
<TITLE>Learning HTML</TITLE>  
<
/HEAD>  
BODY>  
<
<
UL>  
<
<
<
<
<
LI>Monday  
LI>Tuesday  
LI>Wednesday  
LI>Thursday  
LI>Friday  
2
5
 
Lp trình Web  
</UL>  
</BODY>  
</HTML>  
Hình 2.6: Kết quví d6  
Chúng ta có thto ra các danh sách lng nhau để mô tnhóm con ca thông tin.  
Ví d7:  
<HTML>  
<HEAD>  
<TITLE>Learning HTML</TITLE>  
<
/HEAD>  
BODY>  
<
<
UL>  
<
<
LI>Monday  
<UL>  
<
LI>Introduction to HTML  
LI>Creating Lists  
<
</UL>  
LI>Tuesday  
<UL>  
<
LI>Creating Tables  
LI>Inserting Images  
<
</UL>  
<
<
<
LI>Wednesday  
LI>Thursday  
LI>Friday  
</UL>  
</BODY>  
2
6
Lp trình Web  
</HTML>  
Hình 2.7: Kết quví d7  
Thuc tính TYPE có th được dùng để định dng các bullets để hin th cho các mc  
ca danh sách.  
Thuc tính  
Thẻ  
Ví dụ  
Bulleted  
<UL> và <LI>  
<HTML>  
HEAD>  
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
TITLE>Learning HTML</TITLE>  
/HEAD>  
BODY>  
UL>  
LI>Monday  
UL>  
LI>Introduction to HTML  
LI>Creating Lists  
/UL>  
LI>Tuesday  
UL>  
LI>Creating Tables  
LI>Inserting Images  
/UL>  
2
7
Lp trình Web  
<
<
<
<
<
<
LI>Wednesday  
LI>Thursday  
LI>Friday  
/UL>  
/BODY>  
/HTML>  
Customized bullets <LI  
TYPE  
= <HTML>  
SQUARE> Square  
bullets  
<
<
<
<
<
<
<
<
HEAD>  
TITLE>Learning HTML</TITLE>  
<
LI TYPE = DISC>  
/HEAD>  
Sphere bullets  
BODY>  
<LI TYPE  
=
CIRCLE>  
bullets  
Round  
UL>  
LI>Monday  
UL>  
LI TYPE = DISC>Introduction to  
HTML  
<
<
<
<
<
<
LI TYPE = DISC>Creating Lists  
/UL>  
LI>Tuesday  
UL>  
LI TYPE = SQUARE>Creating Tables  
LI TYPE = SQUARE>Inserting  
Images  
<
<
<
<
<
/UL>  
LI>Wednesday  
UL>  
LI TYPE = CIRCLE>Creating Forms  
LI TYPE = CIRCLE>Working with  
Frames  
<
<
<
<
<
<
/UL>  
LI>Thursday  
LI>Friday  
/UL>  
/BODY>  
/HTML>  
Chú ý: Thuc tính TYPE không được hin thtrong Internet Explorer  
.6.2 Danh sách có thtự  
2
2
8
 
Lp trình Web  
Danh sách có thtnm trong cp th<OL>…</OL>. Danh sách có thtcũng hin  
thcác mc danh sách. Skhác nhau là các mc danh sách hin ththeo thtự được  
to ra mt cách tự động.  
Ví d8:  
<HTML>  
<HEAD>  
<TITLE>Learning HTML</TITLE>  
<
/HEAD>  
BODY>  
<
<
OL>  
<
<
<
<
<
LI>Monday  
LI>Tuesday  
LI>Wednesday  
LI>Thursday  
LI>Friday  
</OL>  
</BODY>  
</HTML>  
Hình 2.8: Kết quví d8  
Chúng ta có th đặt các thuc tính để định nghĩa h thng s  được to ra cho các  
mc danh sách.  
Thuc tính  
Thẻ  
Upper Roman  
Lower Roman  
Uppercase  
<LI TYPE = I>  
<LI TYPE = i>  
<LI TYPE = A>  
2
9
Lp trình Web  
Lowercase  
<LI TYPE = a>  
Bt đầu vi mt skhác ln hơn 1  
<OL START = n>  
Thuc tính START xác định skhi to ban đầu ca danh sách.  
Ví d9:  
<HTML>  
<HEAD>  
<TITLE>Learning HTML</TITLE>  
</HEAD>  
<BODY>  
<OL>  
<LI>Monday  
<
<
<
<
OL>  
LI TYPE = i>Introduction to HTML  
LI TYPE = i>Creating Lists  
/OL>  
<LI>Tuesday  
<
<
<
<
OL>  
LI TYPE = A>Creating Tables  
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>  
3
0
Lp trình Web  
Hình 2.9: Kết quví d9  
Chúng ta có thlng các loi danh sách li vi nhau. Có thlng các danh sách có thứ  
tvào trong các danh sách không thtvà ngược li.  
Ví d10:  
<HTML>  
<HEAD>  
<TITLE>Learning HTML</TITLE>  
<
/HEAD>  
BODY>  
<
<
UL>  
<
<
LI>Monday  
<
<
<
<
OL>  
LI TYPE = i>Introduction to HTML  
LI TYPE = i>Creating Lists  
/OL>  
LI>Tuesday  
OL>  
<
<LI TYPE = a>Creating Tables  
<LI TYPE = a>Inserting Images  
</OL>  
<
<
LI>Wednesday  
LI>Thursday  
3
1
Lp trình Web  
<
LI>Friday  
</UL>  
</BODY>  
</HTML>  
Hình 2.10: Kết quví d10  
.5 THKẺ ĐƯỜNG NGANG: <HR>  
2
Th<HR>(horizontal rule) được dùng để kmt đường ngang trên trang. Nhng  
thuc tính sau giúp điu khin các đường nm ngang. Nó ch có th bt đầu, không có  
thkết thúc và không có ni dung.  
Thuc tính  
align  
Mô tả  
Chỉ định vtrí ca đường nm ngang. Chúng ta có thcanh lề  
center(gia)|right(phi)|left(trái). Ví dalign=center  
width  
Chỉ độ dài ca đường thng. Nó có thxác định bng các pixel hoc tính theo  
phn trăm. Mc định là 100%, nghĩa là toàn bbngang ca tài liu.  
size  
Chỉ độ dày ca đường thng và được xác định bng các pixel.  
Chỉ đường được hin thbng màu đặc thay vì có bóng.  
noshade  
Ví d12:  
<HTML>  
<HEAD>  
<TITLE>Welcome to HTML</TITLE>  
<
/HEAD>  
BODY>  
<
3
2
 
Lp trình Web  
<
H3>My first HTML document</H3>  
HR noshade size = 5 align = center width = 50%>  
HR size = 15 align = left width = 80%>  
HR>  
<
<
<
<
P>This is going to be real fun  
/BODY>  
</HTML>  
Hình 2.12: Kết quví d12  
2
.6 SDNG FONT  
Th<FONT> dùng để điu khin shin thvăn bn trên trang web. Chúng ta cũng có  
thchỉ định các thuc tính như kích thước, màu sc, kiu…  
Chúng ta có th đặt các thuc tính <FONT> cho c tài liu bng cách đặt phn t vào  
bên trong th <BODY>. Ngoài ra, thuc tính FONT có thể đặt cho tng t, tng phn  
và tng phn ttrong trang.  
Thuc tính  
COLOR  
Mô tả  
Được dùng để ch màu ca font. Chúng ta có th dùng tên màu hoc giá trị  
thp phân để xác định màu.  
SIZE  
Được dùng để chkích thước ca font. Chúng ta có thxác định các kích  
thước FONT t1 cho đến 7. Kích thước ln nht là 7 và nhnht là 1.  
Chúng ta có th dùng mt kích thước chun và ch ra nhng kích thước tiếp  
theo liên quan đến kích thước chun. Ví d, nếu kích thước chính là 3, thì  
SIZE=+4 stăng lên 7  
SIZE=-1 sgim xung 2  
FACE  
Được dùng để chỉ định kiu font (phông ch)  
3
3
 
Lp trình Web  
Các thuc tính ca FONT có thkết hp trong cùng mt th.  
Ví d13:  
<HTML>  
<HEAD>  
<TITLE>Welcome to HTML</TITLE>  
<
/HEAD>  
BODY>  
<
<
H3><FONT SIZE = 3 COLOR = HOTPINK FACE = Arial>My first HTML  
document</FONT></H3>  
<P>This is <FONT COLOR = BLUE SIZE = 6>going </FONT>to be real  
fun  
</BODY>  
</HTML>  
Hình 2.13 Kết quca ví d13  
2
.7 SDNG MÀU SC  
Chúng ta có th thêm màu vào trang và vào các phn t trong trang. COLOR là thuc  
tính có thể được sdng vi nhiu phn tnhư phn tFONT và BODY.  
Ví d14:  
<HTML>  
<HEAD>  
<
TITLE>Learning HTML</TITLE>  
/HEAD>  
BODY BGCOLOR=lavender>  
<
<
<
H2><FONT COLOR = LIMEGREEN>Welcome to HTML</FONT></H2>  
P><FONT COLOR = RED>This is good fun</FONT></P>  
<
</BODY>  
</HTML>  
3
4
 
Lp trình Web  
Hình 2.14: Kết quca ví d14  
Có 3 kiu màu chính: đỏ, xanh và xanh da tri. Mi màu chính được xem như mt bộ  
hai sca h16.  
#
RRGGBB  
S thp lc phân 00 ch 0% ca màu trong khi đó s thp lc phân FF ch 100% ca  
màu. Giá trcui cùng là mt mã sáu chschmàu.  
Mã thp lc  
Màu  
phân  
#
#
#
#
#
FF0000  
00FF00  
0000FF  
000000  
FFFFFF  
Red  
Green  
Blue  
Black  
White  
2
.8 SDNG HÌNH NH TRONG TÀI LIU HTML  
“Mt bc tranh đáng giá ngàn t”, tt nhiên điu này có tháp dng cho mt trang  
web. Nhng hình nh được chèn vào trong trang web được gi là nhng nh ni tuyến.  
nh có thlà biu tượng, bullet, nh, logo công ty và nhiu cái khác.  
Ngày nay có nhiu định dng đồ ha đang được sdng. Tuy nhiên, trên Web có khác  
đôi chút. Ba định dng đồ ha thông thường được hin th trên hu hết các trình duyt  
là:  

nh GIF (Graphics Interchange Format) (.GIF)  
GIF là định dng thông thường nht được dùng trong nhng tài liu HTML. Nhng  
file GIF được định dng không ph thuc vào định dng nn và h tr 256 màu.  
Ưu đim ca các file GIF là khá dễ để chuyn ti, ngay ckết ni sdng  
MODEM tc độ chm  
Có hai tiêu chun cho các file .gif -87a và 89a (htrtrong sut).  
3
5
 
Lp trình Web  

Định dng GIF xen k(Interlaced GIF format): Mt file nh thông thường  
hin thị ảnh mt ln mt dòng. Mc dù các nh xen kẽ được hin th mt ln  
mt dòng, nhưng thtcó thay đổi  

nh GIF trong sut (Transparent GIF images): nh GIF trong sut là nh  
trong đó nn ca nh cùng màu vi trang web. Ví d các biu tượng và bullet  
có nn trong sut vì vy chúng hp vi màu nn ca tài liu.  

nh JPEG (Joint Photographic Expert Group) (.JPEG)  
Cách nén JPEG là mt lược đồ nén mt thông tin. Điu này có nghĩa là nh sau khi  
b nén không ging như ảnh gc. Tuy nhiên trong quá trình phát li thì nh tt gn  
như ảnh gc. Khi bn lưu mt file vi định dng JPG, bn có th định t l nén. Tỉ  
lcàng cao thì nh càng ít ging nh gc.  
JPEG htrhơn 16 triu màu và thường được sdng cho các nh có màu thc.  
Chai file nh dng JPEG (đuôi mrng là .jpg) và các dng GIF đều nén nh để đảm  
bo chế độ chuyn ti qua internet được nhanh hơn. nh JPG có thể được nén nhiu  
hơn nhưng chm hơn trong quá trình hin thso vi nh .GIF. Có lẽ đó là lý do ti sao  
nh .GIF được phbiến trong tài liu HTML.  

PNG (Portable Network Graphics)  
Định dng cho mt file PNG là “lossless” (không mt thông tin). Trong nén  
“lossless”, dliu nh được nén mà không bchi tiết. Các file PNG htrợ ảnh  
màu thc và di màu xám. Các file PNG cũng có thể được nén và chuyn qua  
mng.  
Khi quyết định định dng đồ ha, chúng ta nên nhmt vài yếu t:  

Cht lượng ca nh  Cht lượng ca nh có quan trng trong quá trình hin thị  
không?  


Độ ln dliu – Kích cfile càng ln thì thi gian truyn càng cao.  
Các yêu cu hin th- nh htrtrong sut, hin thtun thay xen k.  
Chèn nh  
Th IMG dùng để chèn nhng nh vào trong tài liu HTML. Chúng ta cũng có th đặt  
th IMG ti v trí mà nh được hin th. Th IMG không có ni dung, nó hin th ni  
dung bng cách xác định thuc tính SRC. Cú pháp là:  
<IMG SRC=”URL”>  
Trong đó SRC (source) là thuc tính và giá trlà mt URL, chvtrí chính xác ca file  
nh  
Đôi khi, ch hình nh không th nói lên tt c. Chúng ta cn phi cung cp cho người  
dùng mt vài gii thiu vmc đích ca hình nh. Bn có thcanh lề ảnh cùng vi văn  
bn.  
Thuc tính ALIGN ca thIMG có thể được sdng để điu chnh canh lca nh  
vi văn bn xung quanh.  
3
6
Lp trình Web  
IMG ALIGN=position SRC=”PICTURE.GIF”>  
<
Trong đó, vtrí ca nh có thlà trên(TOP), dưới(BOTTOM), gia(MIDDLE),  
trái(LEFT) hoc phi(RIGHT).  
Ví d15:  
<HTML>  
<HEAD>  
<TITLE>Inserting an Image</TITLE>  
<
<
<
<
<
/HEAD>  
H1><FONT SIZE=3 COLOR=FORESTGREEN>  
B>Inserting an Image</B></FONT></H1>  
HR>  
BODY>  
<IMG ALIGN=BOTTOM SRC=Flowers.jpg> Aligned at the bottom</P>  
<P>  
<IMG ALIGN=TOP SRC=Flowers.jpg> Aligned at the top</P>  
<P>  
<IMG ALIGN=MIDDLE SRC=Flowers.jpg> Aligned in the middle</P>  
</BODY>  
</HTML>  
Chú ý: file Flowers.jpg nm trong cùng thư mc vi file HTML ngun.  
3
7
Lp trình Web  
Hình 2.15: Kết quví d15  
Chú ý rng mt vài trình duyt không hin thnhng nh đồ ha. Trong trường hp  
này, chúng ta cn xác định mt dòng chú thích thay thế trong tài liu HTML. Thuc  
tính ALT được sdng để chni dung nh ca bn.  
Ví d16:  
<HTML>  
<HEAD>  
<TITLE>Inserting an Image</TITLE>  
<
<
<
<
<
<
/HEAD>  
H1><FONT SIZE=3 COLOR=FORESTGREEN>  
B>Inserting an Image</B>  
/FONT></H1>  
HR>  
BODY>  
<IMG SRC=Flowers.jpg ALT=”Beautiful Flowers”>  
</BODY>  
</HTML>  
Hình 2.16: Kết quví d16 (dòng văn bn gii thích hin thkhi di chuyn chut  
vào nh)  
Nn ca trang cũng quan trng như văn bn. Người ta thường s dng màu cho trang  
web, mc đích là làm cho ni dung được ni bt. Chúng ta cũng có thsdng nh để  
làm nn. Để làm điu đó, ta cn phi dùng thuc tính BACKGROUND trong thẻ  
BODY.  
<BODY BACKGROUND=bgimage.gif>(Chra URL hoàn chnh ca nh)  
Nếu nh nhhơn phm vi hin thca tài liu thì nh được xếp knhau để lp đầy  
toàn bvùng hin th.  
3
8
Lp trình Web  
nh thường cun theo văn bn khi người dùng kéo thanh cun trong trình duyt. Nếu  
không mun như vy và thay vào đó ta mun to ra hiu ng hình m, nghĩa là văn  
bn thì cun còn nh thì đứng yên, ta thiết lp thuc tính BGPROPERTIES trong thẻ  
BODY có giá trlà FIXED  
<BODY BACKGROUND=bgimage.gif BGPROPERTIES=FIXED>  
Các nh được chèn vào tài liu HTML cũng có thsdng như siêu liên kết. Nhng  
nh như thế gi là siêu nh. Khi người dùng kích vào nh, s hin th tài liu hoc file  
được chra trong URL. Để làm điu này, ta cn lng nh vào trong thneo (anchor)  
3
9
Lp trình Web  
CHƯƠNG 3: SDNG BNG  
Kết thúc chương này, bn có th:  
¾
¾
Biết cách sdng bng (table).  
Chèn các đối tượng đa phương tin “Multimedia” vào tài liu HTML  
3
.1 GII THIU  
Chúng ta đã hc cách nhóm các d liu có liên quan vào các danh sách, nhưng còn có  
mt cách khác để điu khin vic hin th văn bn trên trang web, bng cách dùng các  
bng. Trong chương này chúng ta s hc cách to bng. Phn cui ca chương này sẽ  
nói v làm thế nào để chèn các điu khin đa phương tin “multimedia” vào bên trong  
tài liu HTML.  
3
.2 CÁCH TO BNG  
Chúng ta có th s dng bng để hin th d liu dưới dng các hàng và các ct. Bng  
giúp cho chúng ta điu khin, xác định và sp xếp v trí ca văn bn và hình nh trên  
trang web, thay vì giao tt ccác vic đó cho trình duyt.  
Hình 3.1 Mô hình ca bng  
3
.2.1 Thdùng để to bng  
Th <TABLE> được dùng để to bng trong tài liu HTML. Các thuc tính ca phn  
t<TABLE> được áp dng cho bng, nhưng không cho dliu hin thtrên bng.  
Đơn vcơ bn ca bng là mt ô và được định nghĩa bng th<TD>.  
Ví d1:  
<HTML>  
<HEAD>  
<TITLE>Using Tables</TITLE>  
<
/HEAD>  
BODY>  
<
<
TABLE>  
<
<
TD>Data Cell 1</TD>  
TD>Data Cell 2</TD>  
4
0
 
Lp trình Web  
<
TD>Data Cell 3</TD>  
/TABLE>  
/BODY>  
<
<
</HTML>  
Hình 3.2: Kết quca ví d1  
Mt hàng ca bng được định nghĩa bng th<TR>  
Ví d2:  
<HTML>  
<HEAD>  
<TITLE>Using Tables</TITLE>  
<
/HEAD>  
BODY>  
<
<
TABLE>  
<
TR>  
TR>  
<TD>Data Cell 1</TD>  
<TD>Data Cell 2</TD>  
<TD>Data Cell 3</TD>  
<
<TD>Data Cell 4</TD>  
<TD>Data Cell 5</TD>  
<TD>Data Cell 6</TD>  
</TABLE>  
</BODY>  
</HTML>  
4
1
Lp trình Web  
Hình 3.3: Kết quca ví d2  
Các ô to thành mt hàng. Các hàng to thành bng. Điu này được nói đến trong cú  
pháp ca HTML được s dng để to bng. Th TD được lng trong th TR. Th TR  
được nm trong cp thẻ đóng và mTABLE.  
Thuc tính BORDER có thể được sdng để định nghĩa các ô và cu trúc ca bng.  
thuc tính này ch độ rng ca đường vin. Nếu giá tr được đặt là 0 thì đường vin sẽ  
không hin th.  
Ví d3:  
<HTML>  
<HEAD>  
<TITLE>Using Tables</TITLE>  
<
/HEAD>  
BODY>  
<
<
TABLE BORDER = 2>  
<
<
TR>  
TR>  
<
<
<
TD>Data Cell 1</TD>  
TD>Data Cell 2</TD>  
TD>Data Cell 3</TD>  
<
<
<
TD>Data Cell 4</TD>  
TD>Data Cell 5</TD>  
TD>Data Cell 6</TD>  
</TABLE>  
</BODY>  
</HTML>  
4
2
Lp trình Web  
Hình 3.4: Kết quca ví d3  
Mi ct trong bng, phn tiêu đề có th định nghĩa. Th <TH> định nghĩa tiêu đề cho  
ct. Ví d:  
<TH> Employee Name </TH>  
Phn tCAPTION được dùng để thêm vào mt chú thích cho bng. ở đây bn sdng  
để mô tbng. Ví d,  
<CAPTION> Creating a Table </CAPTION>  
<CAPTION> nm ngay sau thm<TABLE>  
3
.2.2 Chèn hàng và ct  
Nhng th <TD> và <TR> có th được dùng để chèn theo th t các hàng và các ct  
vào trong bng. Ví dụ được mô tbên dưới.  
Ví d4:  
<HTML>  
<HEAD>  
<TITLE>Using Tables</TITLE>  
<
/HEAD>  
BODY>  
<
<
TABLE BORDER = 2>  
<
TR>  
TR>  
<TD>Data Cell 1</TD>  
<TD>Data Cell 2</TD>  
<TD>Data Cell 3</TD>  
<
TD>New column</TD>  
<
<
TD>Data Cell 4</TD>  
TD>Data Cell 5</TD>  
<
4
3
 
Lp trình Web  
<TD>Data Cell 6</TD>  
<
TR>  
<
TD>New Row</TD>  
</TABLE>  
</BODY>  
</HTML>  
Hình 3.5: Kết quca ví d4  
3
.2.3 Xoá hàng và ct  
Để xóa mt hàng, xóa th<TR> tương ng cùng vi tt ccác th<TD> bên trong nó  
tmt file mã ngun HTML. Tương t, để xóa các ct  
Hãy xem Hình 3.4. Để xóa dòng thhai, chúng ta cn xóa th<TD> cho ô dliu 4, 5  
và 6 cùng vi th<TR> mà nó kèm theo nhng th<TD> này tfile HTML ngun.  
Để xóa ct cui cùng, đó là New column, chúng ta cn xóa th<TD> lp nên ô này  
Ví d5:  
<HTML>  
<HEAD>  
<TITLE>Using Tables</TITLE>  
<
/HEAD>  
BODY>  
<
<
TABLE BORDER = 2>  
<
TR>  
TR>  
<TD>Data Cell 1</TD>  
<TD>Data Cell 2</TD>  
<TD>Data Cell 3</TD>  
<
<
TD>New Row</TD>  
4
4
 
Lp trình Web  
</TABLE>  
</BODY>  
</HTML>  
Hình 3.6: Kết quca ví d5  
.2.4 Trn ô: kết hp ct hay dòng  
3
Đôi khi chúng ta mun ni các dòng và các ct vào trong mt ô. Như vy, chúng ta to  
mt ct để kéo rng ra cho hơn mt dòng, hay to ra mt dòng để kéo rng ra cho hơn  
mt ct. Thuc tính COLSPAN và ROWSPAN được s dng để to ra nhng ô mà  
chúng có thkéo rng ra cho hơn mt dòng hay ct. Thuc tính COLSPAN được sử  
dng vi th<TH>, trong khi đó thuc tính ROWSPAN được sdng vi th<TD>.  
Ví d6:  
<HTML>  
<HEAD>  
<TITLE>Using Tables</TITLE>  
<
/HEAD>  
BODY>  
<
<
TABLE BORDER  
=
2
BGCOLOR  
=
lavender CELLSPACING  
=
2
CELLPADDING = 6>  
<
<
<
<
CAPTION>Creating a Table</CAPTION>  
TH ALIGN = CENTER COLSPAN = 3>Quarter 1</TH>  
TH ALIGN = CENTER COLSPAN = 3>Quarter 2</TH>  
TR>  
<
<
<
<
<
TD>Jan</TD>  
TD>Feb</TD>  
TD>March</TD>  
TD>April</TD>  
TD>May</TD>  
4
5
 
Lp trình Web  
<
TD>June</TD>  
<TR>  
<
<
<
TD>1000</TD>  
TD>550</TD>  
TD>240</TD>  
<TD>1500</TD>  
<
<
TD>2765</TD>  
TD>1240</TD>  
<TR>  
<
<
<
<
<
<
TD>3000</TD>  
TD>2430</TD>  
TD>2500</TD>  
TD>1250</TD>  
TD>900</TD>  
TD>3400</TD>  
</TABLE>  
</BODY>  
</HTML>  
Hình 3.7: Kết quca ví d6  
Ví d7:  
<HTML>  
<HEAD>  
<TITLE>Using Tables</TITLE>  
4
6
Lp trình Web  
</HEAD>  
<
BODY>  
<
TABLE BORDER  
=
2
BGCOLOR  
=
lavender CELLSPACING  
=
2
CELLPADDING = 6>  
<
CAPTION>Creating a Table</CAPTION>  
TR>  
<
<
<
<
<
<
TH></TH>  
TH></TH>  
TH>NUTS</TH>  
TH>BOLTS</TH>  
TH>Hammers</TH>  
<TR>  
<TD ROWSPAN = 3>Quarter 1</TD>  
<
<
<
<
TD>Jan</TD>  
TD>2500</TD>  
TD>1000</TD>  
TD>1240</TD>  
<
TR>  
TR>  
<
<
<
<
TD>Feb</TD>  
TD>3000</TD>  
TD>2500</TD>  
TD>4000</TD>  
<
<
<
<
<
TD>March</TD>  
TD>3200</TD>  
TD>1000</TD>  
TD>2400</TD>  
</TABLE>  
</BODY>  
</HTML>  
4
7
Lp trình Web  
Hình 3.8: Kết quca ví d7  
3
.2.5 Định dng cho ô  
Có th chỉ định được v trí ca văn bn bên trong mi ô ca bng. Nhng thuc tính  
canh lngang (ALIGN) và canh ldc (VALIGN) được sdng để điu khin vic  
canh l trong các ô ca bng. Thuc tính ALIGN có th có các giá tr: trái, phi, gia,  
đều hai bên. Thuc tính VALIGN có thcó các giá tr: trên, gia và dưới  
Ngoài vic xác định vtrí ni dng ca các ô trong bng, chúng ta cũng có ththay đổi  
kích thước, màu sc ca bng. Chúng ta có th xác định chiu rng ca bng. Đó là  
vùng trên màn hình mà bng smrng ra. Thuc tính WIDTH ca thTABLE sẽ  
tht scn thiết. Giá trca thuc tính WIDTH có thlà mt định dng phn trăm hay  
thm chí là các đim. Chng hn,  
<TABLE WIDTH = 50%>  
Điu này skéo rng bng đến 50% ca màn hình  
Nếu chúng ta mun thêm mt vài màu sc cho bng, chúng ta sdng thuc tính  
BGCOLOR. Giá trnày có thlà tên ca mt màu hay là giá trị ở hthp lc phân.  
Ví d8:  
<HTML>  
<HEAD>  
<TITLE>Using Tables</TITLE>  
<
/HEAD>  
BODY>  
<
<
TABLE BORDER = 2 WIDTH = 50% BGCOLOR = lavender>  
4
8
 
Lp trình Web  
<
1
TR>  
<
TD ALIGN = right VALIGN = bottom>Data Cell  
</TD>  
<
TD>Data Cell 2</TD>  
TD>Data Cell 3</TD>  
<
<
TR>  
<
<
<
TD>Data Cell 4</TD>  
TD>Data Cell 5</TD>  
TD>Data Cell 6</TD>  
</TABLE>  
</BODY>  
</HTML>  
Hình 3.9: Kết quca ví d8  
Nếu ni dung ca văn bn trong ô nhhơn không gian trong ô đó thì scó không gian  
trng là khong cách gia văn bn và đường vin ca ô. CELLSPACING là không  
gian gia các ô và CELLPADDING là không gian gia đường vin ô ca bng vi ni  
dung văn bn được đặt trong ô. Như đã mô tả ở trên, thuc tính CELLSPACING định  
nghĩa không gian gia các ô, tính theo đim (pixel). Thuc tính CELLPADDING định  
nghĩa nhng không gian bên trong ô ca bng  
Ví d9:  
<HTML>  
<HEAD>  
<TITLE>Using Tables</TITLE>  
<
/HEAD>  
BODY>  
<
<
TABLE BORDER  
=
2
BGCOLOR  
=
lavender CELLSPACING  
=
5
CELLPADDING = 10>  
<
TR>  
4
9
Lp trình Web  
<
<
<
TD>Data Cell 1</TD>  
TD>Data Cell 2</TD>  
TD>Data Cell 3</TD>  
<
TR>  
<
<
<
TD>Data Cell 4</TD>  
TD>Data Cell 5</TD>  
TD>Data Cell 6</TD>  
</TABLE>  
</BODY>  
</HTML>  
Hình 3.10: Kết quca ví d9  
3
.4 CHÈN MULTIMEDIA VÀO TÀI LIU HTML  
Mt trong nhng nhân tln nht trong sphát trin ca web đó là stích hp ca các  
đa phương tin(multimedia) bên trong nhng tài liu HTML. Khi nhng phiên bn đầu  
tiên ca HTML ra đời, nó cũng đã bao gm các đối tượng liên quan đến hình nh vào  
trong mt tài liu để cho phép nhúng hình nh ni tuyến vào ni dung tài liu. Sau đó,  
HTML được m rng để cho phép nhúng không ch là nhng nh tĩnh mà còn là âm  
thanh và video. Hin nay, tt c nhng tính năng đó được phép s dng để làm phong  
phú thêm cho các trang web.  
3
.4.1 Chèn nh động (.GIF) vào tài liu HTML  
Trong chương 3, chúng ta va mi tho lun thế nào là file GIF và chúng được đưa  
vào mt tài liu HTML bng cách nào. Nh rng th <IMG> được dùng để chèn mt  
nh vào trong trang web.  
Ví d12:  
<HTML>  
<HEAD>  
<TITLE>Inserting an animated .GIF File</TITLE>  
5
0
 
Lp trình Web  
</HEAD>  
<H1><FONT  
SIZE=3  
COLOR=FORESTGREEN><B>Inserting  
an  
Image</B></FONT></H1>  
<HR>  
<BODY>  
<IMG SRC=coffeecup.gif ALT="Steaming Coffee">  
</BODY>  
</HTML>  
Hình 3.13: Kết quca ví d12  
Chú ý: trong ví d12, coffeecup.gif là mt nh động là file .gif, khi hin thtrong  
trình duyt thì nó hin th mt lung khói phía trên cc cà phê. File này được đặt vào  
cùng thư mc vi file HTML ngun. Tuy nhiên, nó có th được thay thế bi các hình  
nh động khác  
3
.4.2 Chèn âm thanh vào tài liu HTML  
Tính hp dn ca mt trang Web tương tác đó là thường sdng tiếng “bip” khi người  
dùng kích hot đến mt trang web khác. Mt cách tùy chn, mt trang web s yêu cu  
kết hp tiếng nhc bên trong nó để làm cho trang web đó có tính hp dn hơn. MIDI là  
mt định dng chun ca các file nhc mà chúng được dùng trong tài liu HTML. Các  
file MIDI cha nhng nt nhc và các loi nhc c cho các bn nhc. Nhc c đin tử  
trong card âm thanh mô phng tiếng nhc. Nói cách khác, các file .wav và .au dùng để  
lưu âm thanh  
Để thêm vào âm thanh cho trang web, chúng ta phi s dng các file âm thanh (.wav  
hay .midi) trên hthng ca chúng ta. Chng hn như,  
<BGSOUND SRC=”path\sound filename” loop=”positive number/infinite”>  
Nếu chúng ta không xác định được đường dn thì trình duyt stìm file mà ở đó trang  
web đang được định v. Thuc tính loop xác định s ln mà âm thanh s được bt lên.  
Chú ý rng phn tBGSOUND không được htrbi Netscape.  
5
1
 
Lp trình Web  
Nhc MIDI như đã đề cp  phn trước, ch là mt tiếng nhc tng hp. Tuy nhiên,  
nếu mun thêm vào file nhc ca mình, chng hn như ging nói hay mt bài hát đặc  
bit khi trang web được chuyn đến, thì chúng ta cn phi sdng nhng file âm  
thanh đã được shóa.  
Mt file âm thanh được s hóa cha nhng thông tin để sao chép li mt bn sao âm  
thanh đúng như file gc ca nó. Tn sti nhng tâm thanh được đưa ra làm ví dụ  
chun xác định được cht lượng ca file âm thanh đó, tn sut cao hơn, cht lượng âm  
thanh tt hơn. Đim hn chế đó là nó cũng s làm gia tăng kích thước ca file. Nhng  
file âm thanh được shóa có thể được lưu trong hai định dng, đó là file .au hay .wav  
Định dng file .wav bt đầu vi hệ điu hành Windows. Nó có t l nén thp và kích  
thước file li  
rt ln. Còn định dng file .au được t chc vi nhng máy cài hệ điu hành Unix. Có  
v s tt hơn cho vic lưu tr các file âm thanh được và nó có mt t ln nén cao hơn  
so vi nhng file .wav  
Ví d3:  
<HTML>  
<HEAD>  
<TITLE>Inserting Sound</TITLE>  
<
<
<
<
/HEAD>  
H1><FONT SIZE=3 COLOR=FORESTGREEN><B>Inserting sound</B></FONT></H1>  
HR>  
BODY>  
<
BGSOUND src="WindowsLogonSound.wav" loop="infinite">  
IMG SRC=coffeecup.gif ALT="Steaming Coffee">  
<
</BODY>  
</HTML>  
5
2
Lp trình Web  
Hình 3.14: Kết quca ví d13  
Chú ý: Trong ví d 13, khi hin th trang web trong trình duyt file nhc đăng nhp  
Windows s chy. File windowLogonSound.wav được đặt trong cùng thư mc vi file  
HTML ngun. Tuy nhiên, nó có thể được thay thế bi các file nhc khác  
3
.4.3 Chèn video vào tài liu HTML  
Mt file video có thcó phn mrng là: .avi, .asf, .ram hay là .ra. Để chèn mt file  
video vào tài liu HTML, th<EMBED> có thể được sdng. Chng hn như,  
<
EMBED SRC=”path\video file name” WIDTH=”width in pixels or percentage”  
HEIGHT=”height in pixels or percentage”>  
Ví d14:  
<HTML>  
<HEAD>  
<TITLE>Inserting a Video file</TITLE>  
<
<
<
<
/HEAD>  
H1><FONT SIZE=3 COLOR=FORESTGREEN><B>Inserting Video</B></FONT></H1>  
HR>  
BODY>  
<EMBED SRC=clock.avi HEIGHT=100 WIDTH=100>  
</BODY>  
</HTML>  
Hình 3.15: Kết quca ví dụ  
Chú ý: Để xem kết qu 14, trình Media Player phi được cài đặt. File clock.avi có thể  
được thay thế bi các file video khác  
5
3
 
Lp trình Web  
CHƯƠNG 4: SDNG BIU MU VÀ KHUNG  
Kết thúc chương này, bn có th:  
¾
¾
Sdng biu mu (form) và các phn tnhp thông thường trong HTML  
Sdng khung (frame)  
4
.1 GII THIU  
Mt người hay dùng Web thường xuyên gp các loi biu mu khác nhau và nhiu khi  
phi đin thông tin vào các loi biu mu đó. Trong chương này, ta s hc cách thêm  
các phn tnhp vào mt tài liu HTML và to ra mt biu mu. Ta cũng shc thêm  
vkhung để phân chia tài liu.  
4
.2 GII THIU BIU MU  
Form HTML là mt phn ca tài liu, nó cha các phn tử đặc bit gi là các điu  
khin. Các điu khin được s dng để nhp thông tin t người dùng và cung cp mt  
stương tác. Dliu do người dùng nhp vào có thể được xác nhn hp lnhcác  
kch bn phía máy khách (client-side scripts) và được chuyn đến máy chủ để x lý  
thêm.  
4
.2.1 Sdng biu mu  
Vic sdng biu mu trên World Wide Web là khá nhiu và liên tc tăng lên. Sau  
đây là mt scách sdng thông thường:  

Thu th