Giáo Án:Html-Javascript

giáo án điện tử
  Đánh giá    Viết đánh giá
 11       2      0
Phí: Tải Miễn phí(FREE download)
Mã tài liệu
tu2v0q
Danh mục
giáo án điện tử
Ngày đăng
2016-06-18 16:43:25
Loại file
pdf
Dung lượng
Trang
154
Lần xem
2
Lần tải
11
File đã kiểm duyệt an toàn

<!DOCTYPE html<br>!--[if IE]> <![endif]--> TRƯỜNG ĐẠI HỌC ĐÀ LẠT KHOA CÔNG NGHỆ THÔNG TIN Thạc sỹ Hoàng Mạnh Hùng BÀI GIẢNG TÓM TẮT LẬP TRÌNH WEB Dành cho sinh viên ngành Cao Đẳng (Lưu hành nội bộ) Đà

Đây là đoạn mẫu , hãy download về để xem đầy đủ, hoàn toàn miễn phí 100%

!--[if IE]> TRƯỜNG ĐẠI HỌC ĐÀ LẠT  
KHOA CÔNG NGHỆ THÔNG TIN  
Thạc sỹ  
Hoàng Mạnh Hùng  
BÀI GIẢNG TÓM TẮT  
LẬP TRÌNH WEB  
Dành cho sinh viên ngành Cao Đẳng  
(Lưu hành nội bộ)  
Đà Lạt 2008  



MỤC LỤC  
MỤC LỤC.............................................................................................................................................................. 1  
CHƯƠNG 1: GIỚI THIỆU HTML – CÁC SIÊU LIÊN KẾT .......................................................................... 4  
1
1
1
.1 GIỚI THIỆU .................................................................................................................................................... 4  
.2 GIỚI THIỆU INTERNET.................................................................................................................................... 4  
.3 GIỚI THIỆU HTML ........................................................................................................................................ 5  
1
1
1
1
.3.1 HTML Development............................................................................................................................. 6  
.3.2 Cấu trúc của một tài liệu HTML .......................................................................................................... 7  
.3.3 Sử dụng thẻ ........................................................................................................................ 10  
.3.4 Sử dụng ký tự đặc biệt trong tài liệu HTML....................................................................................... 10  
1
.4 SỬ DỤNG CÁC SIÊU LIÊN KẾT....................................................................................................................... 12  
1
1
1
.4.1 Giới thiệu siêu liên kết và URL .......................................................................................................... 12  
.4.2 Sử dụng siêu liên kết .......................................................................................................................... 14  
.4.3 Điều hướng quanh Web site ............................................................................................................... 19  
CHƯƠNG 2: CÁC THẺ HTML CƠ BẢN........................................................................................................ 22  
2
2
2
2
.1 GIỚI THIỆU .................................................................................................................................................. 22  
.2 HEADING (TIÊU ĐỀ).................................................................................................................................... 22  
.3 THẺ KHỐI , ........................................................................................................................ 23  
.4 DANH SÁCH................................................................................................................................................. 24  
2
2
.6.1 Danh sách không thứ tự ..................................................................................................................... 25  
.6.2 Danh sách có thứ tự ........................................................................................................................... 28  
2
2
2
2
.5 THẺ KẺ ĐƯỜNG NGANG: .................................................................................................................... 32  
.6 SỬ DỤNG FONT............................................................................................................................................ 33  
.7 SỬ DỤNG MÀU SẮC ...................................................................................................................................... 34  
.8 SỬ DỤNG HÌNH ẢNH TRONG TÀI LIỆU HTML............................................................................................... 35  
CHƯƠNG 3: SỬ DỤNG BẢNG......................................................................................................................... 40  
3
3
.1 GIỚI THIỆU .................................................................................................................................................. 40  
.2 CÁCH TẠO BẢNG ......................................................................................................................................... 40  
3
3
3
3
3
.2.1 Thẻ dùng để tạo bảng......................................................................................................................... 40  
.2.2 Chèn hàng và cột................................................................................................................................ 43  
.2.3 Xoá hàng và cột.................................................................................................................................. 44  
.2.4 Trộn ô: kết hợp cột hay dòng ............................................................................................................. 45  
.2.5 Định dạng cho ô................................................................................................................................. 48  
3
.4 CHÈN MULTIMEDIA VÀO TÀI LIỆU HTML................................................................................................... 50  
3
3
3
.4.1 Chèn ảnh động (.GIF) vào tài liệu HTML.......................................................................................... 50  
.4.2 Chèn âm thanh vào tài liệu HTML..................................................................................................... 51  
.4.3 Chèn video vào tài liệu HTML ........................................................................................................... 53  
CHƯƠNG 4: SỬ DỤNG BIỂU MẪU VÀ KHUNG ......................................................................................... 54  
4
4
.1 GIỚI THIỆU .................................................................................................................................................. 54  
.2 GIỚI THIỆU BIỂU MẪU.................................................................................................................................. 54  
4
4
4
4
.2.1 Sử dụng biểu mẫu............................................................................................................................... 54  
.2.2 Phần tử FORM................................................................................................................................... 55  
.2.3 Các phần tử nhập của HTML............................................................................................................. 56  
.2.4 Tạo biểu mẫu...................................................................................................................................... 66  
4
.3 KHUNG (FRAME)......................................................................................................................................... 69  
 




Lập trình Web  
4
4
4
.3.1 Tại sao sử dụng khung? ..................................................................................................................... 70  
.3.2 Sử dụng khung.................................................................................................................................... 70  
.3.3 Phần tử IFRAME – Khung trên dòng (inline frame).......................................................................... 76  
CHƯƠNG 5: SỬ DỤNG STYLE ....................................................................................................................... 78  
5
5
.1 GIỚI THIỆU .................................................................................................................................................. 78  
.2 DHTML ........................................................................................................................................................ 78  
5
5
.2.1 Giới thiệu DHTML............................................................................................................................. 78  
.2.2 Các đặc điểm của DHML................................................................................................................... 79  
5
.3 STYLE SHEETS............................................................................................................................................. 80  
5
5
5
5
5
.3.1 Khái niệm, chức năng và lợi ích của Style Sheets.............................................................................. 80  
.3.2 Quy tắc Style Sheets ........................................................................................................................... 83  
.3.3 Các Selector trong Style Sheets.......................................................................................................... 85  
.3.4 Kết hợp, liên kết và chèn một Style Sheet vào tài liệu HTML ............................................................ 91  
.3.5 Thiết lập thuộc tính trong Style Sheet ................................................................................................ 93  
CHƯƠNG 6: JAVASCRIPT, NỀN TẢNG VÀ CÚ PHÁP .............................................................................. 95  
6
6
.1 GIỚI THIỆU .................................................................................................................................................. 95  
.2 GIỚI THIỆU VỀ JAVASCRIPT ......................................................................................................................... 95  
6
6
6
6
6
.2.1 Javascript là gì?................................................................................................................................. 95  
.2.2 Hiệu ứng và quy tắc Javascript.......................................................................................................... 96  
.2.3 Các công cụ Javascript và IDE, môi trường thực thi......................................................................... 97  
.2.4 Nhúng Javascript vào trang Web....................................................................................................... 97  
.2.5 Ví dụ đơn giản sử dụng hộp thông báo và phương thức write ......................................................... 103  
6
.3 CÁC BIẾN................................................................................................................................................... 104  
6
6
.3.1 Khai báo biến................................................................................................................................... 104  
.3.2 Phạm vi của biến.............................................................................................................................. 104  
6
6
.4 CÁC KIỂU DỮ LIỆU..................................................................................................................................... 105  
Ý nghĩa ...................................................................................................................................................... 108  
.5 CÁC TOÁN TỬ............................................................................................................................................ 109  
6
6
6
6
6
6
.5.1 Toán tử số học.................................................................................................................................. 110  
.5.2 Toán tử so sánh................................................................................................................................ 111  
.5.3 Toán tử logic .................................................................................................................................... 112  
.5.4 Toán tử chuỗi ................................................................................................................................... 113  
.5.4 Toán tử Evaluation........................................................................................................................... 113  
.5.5 Mức ưu tiên của các toán tử............................................................................................................. 115  
6
6
6
6
.6 MẢNG ....................................................................................................................................................... 115  
.7 CÁC CÂU LỆNH ĐIỀU KIỆN ......................................................................................................................... 120  
.8 CÁC LỆNH VÒNG LẶP................................................................................................................................. 121  
.9 HÀM (FUNCTION)...................................................................................................................................... 125  
CHƯƠNG 7: CÁC ĐỐI TƯỢNG CƠ BẢN TRONG JAVASCRIPT .......................................................... 129  
7
7
.1 GIỚI THIỆU ................................................................................................................................................ 129  
.2 CÁC ĐỐI TƯỢNG JAVASCRIPT .................................................................................................................... 129  
7
7
7
7
.2.1 Câu lệnh This ................................................................................................................................... 130  
.2.2 Đối tượng String............................................................................................................................... 132  
.2.3 Đối tượng Math................................................................................................................................ 134  
.2.4 Đối tượng Date................................................................................................................................. 137  
2




Lập trình Web  
7
7
7
.3 ĐỐI TƯỢNG EVENT – KHÁI NIỆM............................................................................................................... 141  
.4 CÁC SỰ KIỆN JAVASCRIPT......................................................................................................................... 141  
.5 TRÌNH XỬ LÝ SỰ KIỆN................................................................................................................................ 150  
TÀI LIỆU THAM KHẢO................................................................................................................................. 153  
3




Lập trình Web  
CHƯƠNG 1: GIỚI THIỆU HTML – CÁC SIÊU LIÊN KẾT  
Kết thúc chương này, bạn có thể:  
¾
¾
¾
¾
¾
¾
Mô tả về Internet  
Mô tả về HTML  
Viết một tài liệu HTML đơn giản  
Sử dụng siêu liên kết trong tài liệu HTML  
Sử dụng thẻ >  
Sử dụng các ký tự đặc biệt trong tài liệu HTML  
1
.1 GIỚI THIỆU  
“Internet”,“World Wide Web”, và “Web page” không chỉ còn là các thuật ngữ. Giờ  
đây, các thuật ngữ này đã trở thành hiện thực. Internet là mạng máy tính lớn nhất trên  
thế giới, được xem như là mạng của các mạng. World Wide Web là một tập con của  
Internet. World Wide Web gồm các Web Servers có mặt khắp mọi nơi trên thế giới.  
Các Web server chứa thông tin mà bất kỳ người dùng nào trên thế giới cũng có thể  
truy cập được. Các thông tin đó được lưu trữ dưới dạng các trang Web.  
Trong phần này, chúng ta sẽ học về Ngôn ngữ đánh dấu siêu văn bản (HTML), đây là  
một phần quan trọng trong lãnh vực thiết kế và phát triển thế giới Web.  
1
.2 GIỚI THIỆU INTERNET  
Mạng là một nhóm các máy tính kết nối với nhau. Internet là mạng của các mạng.  
Giao thức TCP/IP (Transmission Control Protocol/Internet Protocol) cung cấp việc kết  
nối tất cả các máy tính trên thế giới.  
Hình 1.1: Internet  
World Wide Web là một tập con của Internet. Nó bắt đầu như là đề án nghiên cứu cấp  
quốc gia tại phòng nghiên cứu CERN ở Thụy Sĩ. Ngày nay, nó cung cấp thông tin cho  
người dùng trên toàn thế giới.  
WWW hoạt động dựa trên 3 cơ chế để đưa các tài nguyên có giá trị đến với người  
dùng. Đó là:  
4
 




Lập trình Web  


Giao thức: Người dùng tuân theo các giao thức này để truy cập tài nguyên trên  
Web. HyperText Transfer Protocol(HTTP) là giao thức được WWW sử dụng.  
Địa chỉ: WWW tuân theo một cách thức đặt tên thống nhất để truy cập vào các  
tài nguyên trên Web. URL được sử dụng để nhận dạng các trang và các tài  
nguyên trên Web.  

HTML: Ngôn ngữ đánh dấu siêu văn bản (HTML) được sử dụng để tạo các tài  
liệu có thể truy cập trên Web. Tài liệu HTML được tạo ra bằng cách sử dụng  
các thẻ và các phần tử của HTML. File được lưu trên Web server với đuôi .htm  
hoặc .html.  
Khi bạn sử dụng trình duyệt để yêu cầu một số thông tin nào đó, Web server sẽ đáp  
ứng các yêu cầu đó. Nó gửi thông tin được yêu cầu đến trình duyệt dưới dạng các  
trang web. Trình duyệt định dạng thông tin do máy chủ gửi về và hiển thi chúng.  
Hình 1.2: Trình duyệt yêu cầu đến máy chủ  
1
.3 GIỚI THIỆU HTML  
Ngôn ngữ đánh dấu siêu văn bản chỉ rõ một trang Web được hiển thị như thế nào trong  
một trình duyệt. Sử dụng các thẻ và các phần tử HTML, bạn có thể:  


Điều khiển hình thức và nội dung của trang  
Xuất bản các tài liệu trực tuyến và truy xuất thông tin trực tuyến bằng cách sử  
dụng các liên kết được chèn vào tài liệu HTML  


Tạo các biểu mẫu trực tuyến để thu thập thông tin về người dùng, quản lý các  
giao dịch .....  
Chèn các đối tượng như audio clip, video clip, các thành phần ActiveX và các  
Java Applet vào tài liệu HTML  
Tài liệu HTML tạo thành mã nguồn của trang Web. Khi được xem trên trình soạn  
thảo, tài liệu này là một chuỗi các thẻ và các phần tử, mà chúng xác định trang web  
hiển thị như thế nào. Trình duyệt đọc các file có đuôi .htm hay .html và hiển thị trang  
web đó theo các lệnh có trong đó.  
Ví dụ, theo cú pháp HTML dưới đây sẽ hiển thị thông điệp “My first HTML  
document”  
Ví dụ 1:  
L>  
D>  
5
 




Lập trình Web  
Welcome to HTML  
HEAD>  
Y>  
My first HTML document  
Y>  
L>  
Trình duyệt thông dịch những lệnh này và hiển thị trang web như hình 1.3  
Hình 1.3: Kết quả ví dụ 1  
1.3.1 HTML Development  
Tài liệu HTML được hiển thị trên trình duyệt. Vậy trình duyệt là gì ? Trình duyệt là  
một ứng dụng được cài đặt trên máy khách. Trình duyệt đọc mã nguồn HTML và hiển  
thị trang theo các lệnh trong đó.  
Trình duyệt được sử dụng để xem các trang Web và điều hướng.Trình duyệt được biết  
đến sớm nhất là Mosaic, được phát triển bởi Trung tâm ứng dụng siêu máy tính quốc  
gia (NCSA). Ngày nay, có nhiều trình duyệt được sử dụng trên Internet. Netscape’s  
Navigator và Microsoft’s Internet Explorer là hai trình duyệt được sử dụng phổ biến.  
Đối với người dùng, trình duyệt dễ sử dụng bởi vì nó có giao diện đồ họa với việc trỏ  
và kích chuột.  
Để tạo một tài liệu nguồn,bạn phải cần một trình soạn thảo HTML. Ngày nay, có nhiều  
trình soạn thảo đang được sử dụng: Microsoft FrontPage là một công cụ tổng hợp  
được dùng để tạo, thiết kế và hiệu chỉnh các trang Web. Chúng ta cũng có thể thêm  
văn bản, hình ảnh , bảng và những thành phần HTML khác vào trang. Thêm vào đó,  
một biểu mẫu cũng có thể được tạo ra bằng FrontPage. Một khi chúng ta tạo ra giao  
diện cho trang web, FrontPage tự động tạo mã HTML cần thiết. Chúng ta cũng có thể  
dùng Notepad để tạo tài liệu HTML. Để xem được tài liệu trên trình duyệt bạn phải  
lưu nó với đuôi là .htm hay .html.  
Các lệnh HTML được gọi là các thẻ. Các thẻ này được dùng để điều khiển nội dung và  
hình thức trình bày của tài liệu HTML. Thẻ mở (“”) và thẻ đóng (“”), chỉ ra sự  
bắt đầu và kết thúc của một lệnh HTML.  
Ví dụ, thẻ HTML được sử dụng để đánh dấu sự bắt đầu và kết thúc của tài liệu HTML  
L>  
.
. .  
6
 




Lập trình Web  
L>  
Chú ý rằng các thẻ không phân biệt chữ hoa và chữ thường, vì thế bạn có thể sử dụng  
html> thay cho  

Thẻ HTML bao gồm:  
 
Phần tử: nhận dạng thẻ  
Thuộc tính: Mô tả thẻ  
Value: giá trị được thiết lập cho thuộc tính  
Ví dụ,  
Trong ví dụ trên, BODY là phần tử, BGCOLOR(nền) là thuộc tính và “lavender” là  
giá trị. Khi cú pháp HTML được thực hiện, màu nền cho cả trang được thiết lập là  
màu “lavender”.  
1
.3.2 Cấu trúc của một tài liệu HTML  
Một tài liệu HTML gồm 3 phần cơ bản:  

Phần HTML: Mọi tài liệu HTML phải bắt đầu bằng thẻ mở HTML  
và kết thúc bằng thẻ đóng HTML  
….  
L>  
Thẻ HTML báo cho trình duyệt biết nội dung giữa hai thẻ này là một tài liệu  
HTML  

Phần tiêu đề: Phần tiêu đề bắt đầu bằng thẻ và kết thúc bởi thẻ  
/HEAD>. Phần này chứa tiêu đề mà được hiển thị trên thanh điều hướng của  

trang Web. Tiêu đề nằm trong thẻ TITLE, bắt đầu bằng thẻ và kết  
thúc là thẻ .  
Tiêu đề là phần khá quan trọng. Các mốc được dùng để đánh dấu một web site.  
Trình duyệt sử dụng tiêu đề để lưu trữ các mốc này. Do đó, khi người dùng tìm kiếm  
thông tin, tiêu đề của trang Web cung cấp từ khóa chính yếu cho việc tìm kiếm.  

Phần thân: phần này nằm sau phần tiêu đề. Phầ ̀n thân bao gồm văn bản, hình  
ảnh và các liên kết mà bạn muốn hiển thị trên trang web của mình. Phần thân  
bắt đầu bằng thẻ và kết thúc bằng thẻ >  
Ví dụ 2:  
L>  
D>  
Welcome to the world of HTML  

/HEAD>  
BODY>  


P>This is going to be real fun  
Y>  
7
 




Lập trình Web  
L>  
Hình 1.4: Kết quả của ví dụ 2  
Đoạn  
Bạn có chú ý đến thẻ trong ví dụ 2 không? Thẻ để trình bày một đoạn  
Khi viết một bài báo hay một bài luận, bạn nhóm nội dung thành một loạt các đoạn.  
Mục đích là nhóm các ý tưởng logic lại với nhau và áp dụng một số định dạng cho nội  
dung. Trong một tài liệu HTML, nội dung có thể được nhóm thành các đoạn. Thẻ  
đoạn được sử dụng để đánh dấu sự bắt đầu của một đoạn mới.  
Ví dụ 3  
L>  
D>  

TITLE>Welcome to HTML  
/HEAD>  
BODY BGCOLOR = lavende
 



P>This is going to be real fun  
P> Another paragraph element  

Y>  
L>  
Hình 1.5: Kết quả của ví dụ 3  
Thẻ đóng là không bắt buộc. Thẻ kế tiếp sẽ tự động bắt đầu một đoạn mới.  
Các thẻ ngắt  
8




Lập trình Web  
Phần tử > được sử dụng để ngắt dòng trong tài liệu HTML. Thẻ  bổ sung  
một ký tự xuống dòng tại vị trí của thẻ.  
Ví dụ 4:  
L>  
D>  

TITLE>Welcome to HTML  
/HEAD>  
BODY BGCOLOR = lavende
 



P>This is going to be real fun  
P> Another paragraph element  

Y>  
L>  
Hình 1.6: Kết quả của ví dụ 4  
Chọn canh lề  
Thuộc tính align được sử dụng để canh lề cho các phần tử HTML trong trang Web.  
Chúng ta có thể canh lề văn bản, các đối tượng, hình ảnh, các đoạn, các phân đoạn,....  
Sau đây, bạn sẽ học cách canh lề văn bản:  
Thuộc tính align gồm các giá trị sau:  
Value  
Description  
Left  
Văn bản được canh lề trái  
Văn bản được canh giữa  
Văn bản được canh phải  
Văn bản được canh đều hai bên  
Center  
Right  
Justify  
Canh lề được mặc định dựa vào hướng của văn bản. Nếu hướng văn bản là từ trái sang  
phải thì mặc định là trái.  
9




Lập trình Web  
Ví dụ 5  
L>  
D>  

TITLE>Learning HTML  
/HEAD>  
BODY BGCOLOR=lavende
 


P align = right>This is good fun  
Y>  
L>  
Hình 1.7: Kết quả của ví dụ 5  
1
.3.3 Sử dụng thẻ >  
Phần tiêu đề cũng chứa phần tử META. Phần tử này cung cấp thông tin về trang web  
của bạn. Nó gồm tên tác giả, tên phần mềm dùng để viết trang đó, tên công ty, thông  
tin liên lạc .... Phần tử META sử dụng sự kết hợp giữa thuộc tính và giá trị.  
Ví dụ, để chỉ Graham Browne là tác giả, người ta sử dụng phần tử META như sau:  
 
Tác giả của tài liệu là “Graham Browne”  
Thuộc tính http-equiv có thể được sử dụng để thay thế thuộc tính name. Máy chủ  
HTTP sử dụng thuộc tính này để tạo ra một đầu đáp ứng HTTP (HTTP response  
header).  
Đầu đáp ứng được truyền đến trình duyệt để nhận dạng dữ liệu. Nếu trình duyệt hiểu  
được đầu đáp ứng này, nó sẽ tiến hành các hành động đặc biệt đối với đầu đáp ứng đó.  
Ví dụ,  
sẽ sinh ra một đầu đáp ứng HTTP như sau:  
Expires: Mon, 15 Sep 2003 14:25:27 GMT  
Do vậy, nếu tài liệu đã lưu lại, HTTP sẽ biết khi nào truy xuất một bản sao của tài liệu  
tương ứng.  
1
.3.4 Sử dụng ký tự đặc biệt trong tài liệu HTML  
1
0
 




Lập trình Web  
Bạn có thể chèn các ký tự đặc biệt vào văn bản của tài liệu HTML. Để đảm bảo trình  
duyệt không nhầm chúng với thẻ HTML, bạn phải gán mã định dạng cho các ký tự đặc  
biệt này.  
Ký tự đặc  
biệt  
Mã định  
dạng  
Ví dụ  
Lớn hơn (>)  
>  
>  




HEAD>  
TITLE>Learning HTML  
/HEAD>  
BODY>  


CODE>If A > B Then  A = A + 1  
/CODE>  

P> The above statement  
used  
special  
characters  


/BODY>  
/HTML>  
Nhỏ hơn (
<  
>  






HEAD>  
TITLE>Learning HTML  
/HEAD>  
BODY>  
CODE>If A < B Then A = A + 1  
P> The above statement used special  
characters  


/BODY>  
/HTML>  
Trích dẫn(““) "  
>  




&
HEAD>  
TITLE>Learning HTML  
/HEAD>  
BODY>  
quot; To be or not to be ? " That  
is the question  


/BODY>  
/HTML>  
Ký tự “&”  
&  
>  
HEAD>  

1
1




Lập trình Web  






TITLE>Learning HTML  
/HEAD>  
BODY>  
P> William & Graham went to the fair  
/BODY>  
/HTML>  
1
.4 SỬ DỤNG CÁC SIÊU LIÊN KẾT  
Siêu liên kết là một phần tử bên trong tài liệu mà liên kết đến một vị trí khác trong  
cùng tài liệu đó hoặc đến một tài liệu hoàn toàn khác. Chẳng hạn, khi ta kích vào siêu  
liên kết sẽ nhảy đến liên kết cần đến. Các siêu liên kết là thành phần quan trọng nhất  
của hệ thống siêu văn bản  
1
.4.1 Giới thiệu siêu liên kết và URL  
Khả năng chính của HTML là hỗ trợ siêu liên kết. Một siêu liên kết, hay nói ngắn gọn  
là một liên kết, là sự kết nối đến tài liệu hay file khác (đồ họa, âm thanh, video) hoặc  
ngay cả đến một phần khác trong cùng tài liệu đó. Khi kích vào siêu liên kết, người  
dùng được đưa đến địa chỉ URL mà chúng ta chỉ rõ trong liên kết.  





Một phần khác trong cùng tài liệu  
Một tài liệu khác  
Một phần trong tài liệu khác  
Các file khác – hình ảnh, âm thanh, trích đoạn video  
Vị trí hoặc máy chủ khác  
Hình 1.8: Sử dụng liên kết  
Các liên kết có thể là liên kết trong hoặc liên kết ngoài  

Liên kết trong là liên kết kết nối đến các phần trong cùng tài liệu hoặc cùng một  
web site  
1
2
 




Lập trình Web  

Liên kết ngoài là liên kết kết nối đến các trang trên các web site khác hoặc máy  
chủ khác.  
Hình 1.9: Liên kết trong và liên kết ngoài  
Để tạo siêu liên kết, chúng ta cần phải xác định hai thành phần:  
1
2
. Địa chỉ đầy đủ hoặc URL của file được kết nối  
. Điểm nóng cung cấp cho liên kết. Điểm nóng này có thể là một dòng văn bản, thậm  
chí là một ảnh.  
Khi người dùng kích vào điểm nóng, trình duyệt đọc địa chỉ được chỉ ra trong URL và  
nhảy” đến vị trí mới  

Mỗi nguồn tài nguyên trên Web có một địa chỉ duy nhất. Ví dụ, 207.46.130.149 là địa  
chỉ web site của Micorsoft. Giờ đây, để nhớ các con số này rất khó và dễ nhầm lẫn. Vì  
vậy, người ta sử dụng các URL. URL là một chuỗi cung cấp địa chỉ Internet của web  
site hay tài nguyên trên World Wide Web.  
Định dạng đặc trưng là www.nameofsite.typeofsite.contrycode  
[trong đó  
Nameofsite: tên của site  
Typeofsite: kiểu của site  
Contrycode: mã nước]  
Ví dụ, 216.239.33.101 có thể được biểu diễn bằng URL là www.google.com  
URL cũng nhận biết được giao thức mà site hay tài nguyên được truy nhập. Dạng URL  
thông thường nhất là “http”, nó cung cấp địa chỉ Internet của một trang Web. Một vài  
dạng URL khác là “gopher”, nó cung cấp địa chỉ Internet của một thư mục Gopher, và  
“ftp”, cung cấp vị trí của một tài nguyên FTP trên mạng.  
1
3




Lập trình Web  
URL cũng có thể tham chiếu đến một vị trí trong một tài nguyên. Ví dụ, bạn có thể tạo  
liên kết đến một chủ đề trong cùng một tài liệu. Trong trường hợp đó, định danh đoạn  
được sử dụng ở phần cuối của URL  
Định dạng là, giao thức: tên của site / tài liệu chính #định danh đoạn  
Có hai dạng URL:  

URL tuyệt đối – là địa chỉ Internet đầy đủ của trang hoặc file, bao gồm giao thức,  
vị trí mạng, đường dẫn tùy chọn và tên file. Ví dụ, http://www.microsoft.com là  
một địa chỉ URL tuyệt đối.  

URL tương đối – là một URL có một hoặc nhiều phần bị thiếu. Trình duyệt lấy  
thông tin bị thiếu từ trang chứa URL đó. Ví dụ, nếu giao thức bị thiếu, trình duyệt  
sử dụng giao thức của trang hiện thời.  
1
.4.2 Sử dụng siêu liên kết  
Thẻ  được sử dụng để xác định văn bản hay ảnh nào sẽ dùng làm siêu liên kết  
trong tài liệu HTML. Thuộc tính HREF (tham chiếu siêu văn bản) được dùng để chỉ  
địa chỉ hay URL của tài liệu hoặc file được liên kết.  
Cú pháp của HREF là:  
ort/path/filename>Hypertext  
Trong đó,  
Giao thức – Đây là loại giao thức. Một số giao thức thường dùng:  





http – giao thức truyền siêu văn bản  
telnet – mở một phiên telnet  
gopher – tìm kiếm file  
ftp – giao thức truyền file  
mailto – gửi thư điện tử  
Host.domain – Đây là địa chỉ Internet của máy chủ  
Port - Cổng phục vụ của máy chủ đích  
HyperText – Đây là văn bản hay hình ảnh mà người dùng cần nhấp vào để kích  
hoạt liên kết  
Liên kết đến những tài liệu khác  
Giả sử có hai tài liệu HTML trên đĩa cứng cục bộ, Doc1.htm và Doc2.htm. Để tạo một  
liên kết từ Doc1.html đến Doc2.htm  
Ví dụ 6:  
L>  
D>  
Using links  
D>  
1
4
 




Lập trình Web  
Y>  



BR>R>  
P> This page is all about creating links to documents.  
A HREF = Doc2.html>Click here to view document 2  
Y>  
L>  
Hình 1.10: Kết quả của ví dụ 6  
Khi người dùng “nhảy” đến một tài liệu khác, bạn nên cung cấp cách để quay trở lại  
trang chủ hoặc định hướng đến một file khác.  
Ví dụ 7:  
L>  
D>  
Document 2  
D>  
Y>  
BR>  
This is document 2. This page is displayed when you click  
the hyperlink in Document 1  
BR>  
Back Home  
Y>  
L>  
1
5




Lập trình Web  
Hình 1.11: Kết quả ví dụ 7  
Chú ý là các liên kết được gạch chân. Trình duyệt tự động gạch chân các liên kết. Nó  
cũng thay đổi hình dáng con trỏ chuột khi người sử dụng di chuyển chuột vào liên kết.  
̃
Ở ví dụ trên, các file nằm trong cùng một thư mục, vì vậy chỉ cần chỉ ra tên file trong  
thông số HREF là đủ. Tuy nhiên, để liên kết đến các file ở thư mục khác, cần phải  
cung cấp đường dẫn tuyệt đối hay đường dẫn tương đối  
Đường dẫn tuyệt đối chỉ ra đường dẫn đầy đủ từ thư mục gốc đến file. Ví dụ,  
C:\mydirectory\html examples\ Doc2.htm  
Đường dẫn tương đối chỉ ra vị trí liên quan của file với vị trí file hiện tại. Ví dụ, nếu  
thư mục hiện hành là mydirectory thì đường dẫn sẽ là ,  
Next page  
Vì vậy, nếu muốn liên kết các tài liệu không liên quan với nhau thì ta nên dùng đường  
dẫn tuyệt đối. Tuy nhiên, nếu ta có một nhóm tài liệu có liên quan với nhau, chẳng hạn  
phần trợ giúp trong HTML, thì ta nên sử dụng đường dẫn tương đối cho các tài liệu  
trong nhóm và đường dẫn tuyệt đối cho các tài liệu không liên quan trực tiếp đến chủ  
đề. Khi đó người dùng có thể cài đặt phần trợ giúp này trong thư mục mình chọn và nó  
vẫn hoạt động.  
Liên kết đến các phần trong cùng một tài liệu  
Thẻ neo (anchor) được sử dụng để người dùng có thể “nhảy” đến những phần  
khác nhau của một tài liệu. Ví dụ, bạn có thể hiển thị nội dung của trang Web như một  
loạt các liên kết. Khi người dùng kích vào một đề tài nào đó thì các chi tiết nằm ở một  
phần khác của tài liệu được hiển thị.  
Kiểu liên kết này gọi là “named anchor” bởi vì thuộc tính NAME được sử dụng để tạo  
các liên kết này  
Topic name  
Bạn không phải sử dụng bất kỳ văn bản nào để đánh dấu điểm neo  
Để dùng, ta sử dụng vạch dấu (marker) trong thông số HREF như sau  
Topic name  
1
6




Lập trình Web  
Dấu # ở trước tên của siêu liên kết để báo cho trình duyệt biết rằng liên kết này liên kết  
đến một điểm được đặt tên trong tài liệu. Khi không có tài liệu nào được chỉ ra trước  
ký tự #, trình duyệt hiểu rằng liên kết này nằm trong cùng tài liệu.  
Ví dụ 8:  
L>  
D>  
Using Links  
D>  
Y>  









A HREF = #Internet>Internet  
BR>R>  
A HREF = #HTML>Introduction to HTML  
BR>R>  
A HREF = #Consistency>Unity and Variety  
BR>R>  
A name = Internet>Internet  
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  
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  
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.  
Y>  
L>  
1
7




Lập 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 một điểm xác định ở một tài liệu khác  
Bây giờ chúng ta đã biết cách sử dụng các vạch dấu trong cùng một tài liệu, hãy thử  

nhảy” đến một vị trí trên một tài liệu khác.  
Để “nhảy” đến một điểm trên tài liệu khác, chúng ta cần phải chỉ ra tên của tài liệu khi  
chúng ta tạo vạch dấu. Trước tiên trình duyệt sẽ đọc tên tài liệu và mở tài liệu đó. Sau  
đó nó sẽ đọc vạch dấu và di chuyển đến điểm được đánh dấu.  
Ví dụ 9  
L>  
D>  
Main document  
D>  
Y>  

A HREF=Chapter18.html#Internet>Internet  
BR>  

1
8




Lập trình Web  
>  
Introduction to HTML  
>  
>  
Unity and Variety  
Y>  
L>  
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ú ý sự giống nhau giữa hình 1.13 vào hình 1.15  
Sử dụng e-mail  
Nếu muốn người sử dụng gửi được e-mail, chúng ta có thể đưa một đặc tính vào trong  
trang Web và cho phép họ gửi e-mail từ trình duyệt. Tất cả những gì chúng ta cần làm  
là chèn giá trị mailto vào trong thẻ liên kết.  
erson@mymail.com”>  
1
.4.3 Điều hướng quanh Web site  
1
9
 




Lập trình Web  
Dù web site có lôi cuốn đến đâu, nếu nó không có một lược đồ điều hướng đơn giản  
thì người dùng cũng sẽ mất phương hướng ngay. Một số trong số họ có thể sẽ không  
bao giờ quay lại. Lược đồ điều hướng trong mỗi site là khác nhau. Tuy nhiên có một  
số nguyên tắc cơ bản mà bạn cần nhớ:  


Xác định nội dung của web site  
Tạo một lược đồ điều hướng để giúp người dùng đi đến phần cần đến một cách  
nhanh chóng  

Cung cấp các chức năng tìm kiếm thông tin  
Có nhiều cách để tổ chức một web site  

Trình bày tuyến tính – Cách này theo cấu trúc tuyến tính. Có một chuỗi liên kết  
liên tục giữa các trang. Mỗi trang có liên kết đến trang trước và trang sau. Trang  
cuối có liên kết đến trang đầu. Định dạng này được dùng khi chúng ta muốn trình  
bày thông tin liên tục. Ví dụ, các chương trong cuốn sách hoặc các slide của một  
bài trình bày mà yêu cầu người dùng đọc thông tin theo trình tự liên tiếp nhau.  
Hình 1.16: Trình bày tuyến tính  

Trình bày theo phân cấp: Đây là cách trình bày thông thường nhất được sử dụng  
trong thiết kế Web. Trang chủ liên kết với nhiều trang khác. Người dùng có thể  
chọn một liên kết và “nhảy” đến trang cần đến. Mỗi trang đều có liên kết về trang  
chủ.  
Hình 1.17: Trình bày theo phân cấp  

Bản đồ ảnh – Một số người thấy cách trình bày trực quan thì dễ hiểu hơn. Vì vậy,  
bản đồ ảnh hay bản đồ site được đưa vào các trang chủ. Khi người dùng kích vào  
các điểm nóng thì tài liệu liên quan được hiển thị.  
2
0




Lập trình Web  
Khi đã quyết định một lược đồ điều hướng, đây là lúc để thiết kế tài liệu. Có một số  
nguyên tắc mà bạn cần ghi nhớ:  

Siêu liên kết nên rõ ràng. Từ nên được gạch chân và có màu xanh, bởi 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 xuất hiện ở cuối  
trang. Nếu chúng xuất hiện ở giữa đoạn văn bản, có thể làm người đọc không tập  
trung vào đề tài.  


Các trang con – nên có một thanh menu hoặc thanh điều hướng, nếu không người  
đọc có thể không thấy các trang chính. Nếu người dùng kích vào một biểu tượng  
bất kỳ trên thanh điều hướng thì họ sẽ nhảy từ trang hiện thời đến trang mới  
Luôn có một bảng mục lục để người dùng nhảy sang một đề tài nào đó. Bảng mục  
lục (TOC) được hiển thị ở cuối trang. Người dùng có thể chọn một đề tài nào đó để  
nhảy đến trang cần đến  

Luôn có nút “Back” và “Forward” trong trang để người dùng có thể điều hướng  
đến trang cần đến. Trình duyệt có cung cấp các chọn lựa này, nhưng nó sử dụng  
các trang trong danh sách history mà có thể không phải là các trang trong Web site.  
2
1




Lập trình Web  
CHƯƠNG 2: CÁC THẺ HTML CƠ BẢN  
Kết thúc chương này, bạn có thể:  
¾
¾
Sử dụng các thẻ cơ bản  
Chèn hình ảnh vào trong tài liệu HTML  
2
.1 GIỚI THIỆU  
Chương này thảo luận về những thẻ cơ bản của HTML như các thẻ tiêu đề (Header),  
các thẻ đoạn và các thẻ khối. Phần này cũng nói về danh sách (Lists) và làm thế nào để  
sử dụng các ảnh trong tài liệu HTML  
2
.2 HEADING (TIÊU ĐỀ)  
Phần tử này được sử dụng để cung cấp tiêu đề cho phần nội dung hiển thị trên trang  
web. Tất cả những phần tử tiêu đề phải có thẻ kết thúc. Nó bắt đầu bằng thẻ  và  
kết thúc bằng .  
Những phần tiêu đề được hiển thị to và in đậm hơn để phân biệt chúng với các phần  
còn lại của văn bản. Chúng ta cũng có thể hiển thị phần tiêu đề một trong sáu kích  
thước từ H1 đến H6. Tất cả những gì chúng ta làm là định rõ kích thước H1,  
H2…Trình duyệt chú trọng đến cách hiển thị  
Ví dụ 1:  
L>  
D>  
Introduction to HTML  







/HEAD>  
H1>Introduction to HTML  
H2>Introduction to HTML  
H3>Introduction to HTML  
H4>Introduction to HTML  
H5>Introduction to HTML  
H6>Introduction to HTML  
L>  
2
2
 




Lập trình Web  
Hình 2.1: Kết quả ví dụ 1  
.3 THẺ KHỐI ,  
2
Có những trường hợp chúng ta muốn chia văn bản trong một trang web thành những  
khối thông tin logic. Chúng ta cũng có thể áp dụng những thuộc tính thông thường cho  
toàn bộ khối. Phần tử DIV và SPAN được sử dụng để nhóm nội dung lại với nhau.  
Phần tử DIV dùng để chia tài liệu thành các thành phần có liên quan với nhau. Phần tử  
SPAN dùng để chỉ một khoảng các ký tự.  
Phần tử SPAN dùng để định nghĩa nội dung trong dòng(in-line) còn phần tử DIV dùng  
để định nghĩa nội dung mức khối (block-level)  
Ví dụ 5:  
L>  
D>  
Learning HTML  

/HEAD>  
BODY>  


DIV>  
Division 1  


P> The DIV element is used to group elements  
P>Typically, DIV is used for block level elements  
V>  

DIV align = right>  
Division 2  
2
3
 




Lập trình Web  



P>This is a second division  
BR>  
H2>Are you having fun?  

/DIV>  
P>The second division is right aligned.  
SPAN STYLE font-size:25; Color:blue>Common  


=
formatting  
is applied to all the elements in the division  
Y>  
L>  
Chú ý: Phần tử SPAN không hiển thị trong Netscape  
Hình 2.5: Kết quả ví dụ 5  
2
.4 DANH SÁCH  
Danh sách dùng để nhóm dữ liệu một cách logic. Chúng ta có thể thêm các danh sách  
vào tài liệu HTML để nhóm các thông tin có liên quan lại với nhau.  
Ví dụ,  
Roses  
Sunflowers  
Orchids  
2
4
 




Lập 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 loại danh sách mà bạn có thể chèn vào tài liệu HTML là:  

Danh sách không thứ tự  
Danh sách có thứ tự  


Danh sách định nghĩa  
2
.6.1 Danh sách không thứ tự  
Đây là loại danh sách đơn giản nhất mà bạn có thể thêm vào tài liệu HTML. Danh sách  
không thứ tự là một “bulleted list”. Các mục được bắt đầu bằng dấu chấm tròn  
“bullet”. Danh sách không thứ tự được nằm trong cặp thẻ …. Mỗi mục  
trong danh sách được đánh dấu bằng thẻ . LI được viết tắt của từ List Item. Thẻ  
kết thúc là tùy chọn (không bắt buộc).  
Ví dụ 6:  
L>  
D>  
Learning HTML  

/HEAD>  
BODY>  


UL>  





LI>Monday  
LI>Tuesday  
LI>Wednesday  
LI>Thursday  
LI>Friday  
2
5
 




Lập trình Web  
>  
Y>  
L>  
Hình 2.6: Kết quả ví dụ 6  
Chúng ta có thể tạo ra các danh sách lồng nhau để mô tả nhóm con của thông tin.  
Ví dụ 7:  
L>  
D>  
Learning HTML  

/HEAD>  
BODY>  


UL>  


LI>Monday  
>  

LI>Introduction to HTML  
LI>Creating Lists  

>  
LI>Tuesday  
>  

LI>Creating Tables  
LI>Inserting Images  

>  



LI>Wednesday  
LI>Thursday  
LI>Friday  
>  
Y>  
2
6




Lập trình Web  
L>  
Hình 2.7: Kết quả ví dụ 7  
Thuộc tính TYPE có thể được dùng để định dạng các bullets để hiển thị cho các mục  
của danh sách.  
Thuộc tính  
Thẻ  
Ví dụ  
Bulleted  
và >  
>  
HEAD>  















TITLE>Learning HTML  
/HEAD>  
BODY>  
UL>  
LI>Monday  
UL>  
LI>Introduction to HTML  
LI>Creating Lists  
/UL>  
LI>Tuesday  
UL>  
LI>Creating Tables  
LI>Inserting Images  
/UL>  
2
7




Lập trình Web  






LI>Wednesday  
LI>Thursday  
LI>Friday  
/UL>  
/BODY>  
/HTML>  
Customized bullets 
TYPE  
= >  
SQUARE> Square  
bullets  








HEAD>  
TITLE>Learning HTML  

LI TYPE = DISC>  
/HEAD>  
Sphere bullets  
BODY>  

=
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ú ý: Thuộc tính TYPE không được hiển thị trong Internet Explorer  
.6.2 Danh sách có thứ tự  
2
2
8
 




Lập trình Web  
Danh sách có thứ tự nằm trong cặp thẻ …. Danh sách có thứ tự cũng hiển  
thị các mục danh sách. Sự khác nhau là các mục danh sách hiển thị theo thứ tự được  
tạo ra một cách tự động.  
Ví dụ 8:  
L>  
D>  
Learning HTML  

/HEAD>  
BODY>  


OL>  





LI>Monday  
LI>Tuesday  
LI>Wednesday  
LI>Thursday  
LI>Friday  
>  
Y>  
L>  
Hình 2.8: Kết quả ví dụ 8  
Chúng ta có thể đặt các thuộc tính để định nghĩa hệ thống số mà được tạo ra cho các  
mục danh sách.  
Thuộc tính  
Thẻ  
Upper Roman  
Lower Roman  
Uppercase  
I>  
i>  
 
2
9




Lập trình Web  
Lowercase  
a>  
Bắt đầu với một số khác lớn hơn 1  
n>  
Thuộc tính START xác định số khởi tạo ban đầu của danh sách.  
Ví dụ 9:  
L>  
D>  
Learning HTML  
D>  
Y>  
>  
Monday  




OL>  
LI TYPE = i>Introduction to HTML  
LI TYPE = i>Creating Lists  
/OL>  
Tuesday  




OL>  
LI TYPE = A>Creating Tables  
LI TYPE = A>Inserting Images  
/OL>  
Wednesday  




OL START = 5>  
LI >Creating Forms  
LI >Working with Frames  
/OL>  

LI>Thursday  
LI>Friday  
/OL>  


Y>  
L>  
3
0




Lập trình Web  
Hình 2.9: Kết quả ví dụ 9  
Chúng ta có thể lồng các loại danh sách lại với nhau. Có thể lồng các danh sách có thứ  
tự vào trong các danh sách không thứ tự và ngược lại.  
Ví dụ 10:  
L>  
D>  
Learning HTML  

/HEAD>  
BODY>  


UL>  


LI>Monday  




OL>  
LI TYPE = i>Introduction to HTML  
LI TYPE = i>Creating Lists  
/OL>  
LI>Tuesday  
OL>  

Creating Tables  
Inserting Images  
>  


LI>Wednesday  
LI>Thursday  
3
1




Lập trình Web  

LI>Friday  
>  
Y>  
L>  
Hình 2.10: Kết quả ví dụ 10  
.5 THẺ KẺ ĐƯỜNG NGANG:  
2
Thẻ (horizontal rule) được dùng để kẻ một đường ngang trên trang. Những  
thuộc tính sau giúp điều khiển các đường nằm ngang. Nó chỉ có thẻ bắt đầu, không có  
thẻ kết thúc và không có nội dung.  
Thuộc tính  
align  
Mô tả  
Chỉ định vị trí của đường nằm ngang. Chúng ta có thể canh lề  
center(giữa)|right(phải)|left(trái). Ví dụ align=center  
width  
Chỉ độ dài của đường thẳng. Nó có thể xác định bằng các pixel hoặc tính theo  
phần trăm. Mặc định là 100%, nghĩa là toàn bộ bề ngang của tài liệu.  
size  
Chỉ độ dày của đường thẳng và được xác định bằng các pixel.  
Chỉ đường được hiển thị bằng màu đặc thay vì có bóng.  
noshade  
Ví dụ 12:  
L>  
D>  
Welcome to HTML  

/HEAD>  
BODY>  

3
2
 




Lập trình Web  

H3>My first HTML document  
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>  
L>  
Hình 2.12: Kết quả ví dụ 12  
2
.6 SỬ DỤNG FONT  
Thẻ dùng để điều khiển sự hiển thị văn bản trên trang web. Chúng ta cũng có  
thể chỉ định các thuộc tính như kích thước, màu sắc, kiểu…  
Chúng ta có thể đặt các thuộc tính  cho cả tài liệu bằng cách đặt phần tử vào  
bên trong thẻ . Ngoài ra, thuộc tính FONT có thể đặt cho từng từ, từng phần  
và từng phần tử trong trang.  
Thuộc tính  
COLOR  
Mô tả  
Được dùng để chỉ màu của font. Chúng ta có thể dùng tên màu hoặc giá trị  
thập phân để xác định màu.  
SIZE  
Được dùng để chỉ kích thước của font. Chúng ta có thể xác định các kích  
thước FONT từ 1 cho đến 7. Kích thước lớn nhất là 7 và nhỏ nhất là 1.  
Chúng ta có thể dùng một kích thước chuẩn và chỉ ra những kích thước tiếp  
theo liên quan đến kích thước chuẩn. Ví dụ, nếu kích thước chính là 3, thì  
SIZE=+4 sẽ tăng lên 7  
SIZE=-1 sẽ giảm xuống 2  
FACE  
Được dùng để chỉ định kiểu font (phông chữ)  
3
3
 




Lập trình Web  
Các thuộc tính của FONT có thể kết hợp trong cùng một thẻ.  
Ví dụ 13:  
L>  
D>  
Welcome to HTML  

/HEAD>  
BODY>  


H3>My first HTML  
documentONT>  
This is going to be real  
fun  
Y>  
L>  
Hình 2.13 Kết quả của ví dụ 13  
2
.7 SỬ DỤNG MÀU SẮC  
Chúng ta có thể thêm màu vào trang và vào các phần tử trong trang. COLOR là thuộc  
tính có thể được sử dụng với nhiều phần tử như phần tử FONT và BODY.  
Ví dụ 14:  
L>  
D>  

TITLE>Learning HTML  
/HEAD>  
BODY BGCOLOR=lavende
 



H2>Welcome to HTML  
P>This is good fun  

Y>  
L>  
3
4
 




Lập trình Web  
Hình 2.14: Kết quả của ví dụ 14  
Có 3 kiểu màu chính: đỏ, xanh và xanh da trời. Mỗi màu chính được xem như một bộ  
hai số của hệ 16.  
#
RRGGBB  
Số thập lục phân 00 chỉ 0% của màu trong khi đó số thập lục phân FF chỉ 100% của  
màu. Giá trị cuối cùng là một mã sáu chữ số chỉ màu.  
Mã thập lục  
Màu  
phân  
#
#
#
#
#
FF0000  
00FF00  
0000FF  
000000  
FFFFFF  
Red  
Green  
Blue  
Black  
White  
2
.8 SỬ DỤNG HÌNH ẢNH TRONG TÀI LIỆU HTML  
“Một bức tranh đáng giá ngàn từ”, tất nhiên điều này có thể áp dụng cho một trang  
web. Những hình ảnh được chèn vào trong trang web được gọi là những ảnh nội tuyến.  
Ảnh có thể là biểu tượng, bullet, ảnh, logo công ty và nhiều cái khác.  
Ngày nay có nhiều định dạng đồ họa đang được sử dụng. Tuy nhiên, trên Web có khác  
đôi chút. Ba định dạng đồ họa thông thường được hiển thị trên hầu hết các trình duyệt  
là:  

Ảnh GIF (Graphics Interchange Format) (.GIF)  
GIF là định dạng thông thường nhất được dùng trong những tài liệu HTML. Những  
file GIF được định dạng không phụ thuộc vào định dạng nền và hỗ trợ 256 màu.  
Ưu điểm của các file GIF là khá dễ để chuyển tải, ngay cả kết nối sử dụng  
MODEM tốc độ chậm  
Có hai tiêu chuẩn cho các file .gif -87a và 89a (hỗ trợ trong suốt).  
3
5
 




Lập trình Web  

Định dạng GIF xen kẽ(Interlaced GIF format): Một file ảnh thông thường  
hiển thị ảnh một lần một dòng. Mặc dù các ảnh xen kẽ được hiển thị một lần  
một dòng, nhưng thứ tự có thay đổi  

Ảnh GIF trong suốt (Transparent GIF images): Ảnh GIF trong suốt là ảnh  
trong đó nền của ảnh cùng màu với trang web. Ví dụ các biểu tượng và bullet  
có nền trong suốt vì vậy chúng hợp với màu nền của tài liệu.  

Ảnh JPEG (Joint Photographic Expert Group) (.JPEG)  
Cách nén JPEG là một lược đồ nén mất thông tin. Điều này có 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 tốt gần  
như ảnh gốc. Khi bạn lưu một file với định dạng JPG, bạn có thể định tỉ lệ nén. Tỉ  
lệ càng cao thì ảnh càng ít giống ả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.  
Cả hai file ảnh dạng JPEG (đuôi mở rộng là .jpg) và các dạng GIF đều nén ảnh để đảm  
bảo chế độ chuyển tải qua internet được nhanh hơn. Ảnh JPG có thể được nén nhiều  
hơn nhưng chậm hơn trong quá trình hiển thị so với ảnh .GIF. Có lẽ đó là lý do tại sao  
ảnh .GIF được phổ biến trong tài liệu HTML.  

PNG (Portable Network Graphics)  
Định dạng cho một file PNG là “lossless” (không mất thông tin). Trong nén  
“lossless”, dữ liệu ảnh được nén mà không bỏ chi tiết. Các file PNG hỗ trợ ảnh  
màu thực và dải màu xám. Các file PNG cũng có thể được nén và chuyển qua  
mạng.  
Khi quyết định định dạng đồ họa, chúng ta nên nhớ một vài yếu tố:  

Chất lượng của ảnh – Chất lượng của ảnh có quan trọng trong quá trình hiển thị  
không?  


Độ lớn dữ liệu – Kích cỡ file càng lớn thì thời gian truyền càng cao.  
Các yêu cầu hiển thị - Ảnh hỗ trợ trong suốt, hiển thị tuần tự hay xen kẽ.  
Chèn ảnh  
Thẻ IMG dùng để chèn những ảnh vào trong tài liệu HTML. Chúng ta cũng có thể đặt  
thẻ IMG tại vị trí mà ảnh được hiển thị. Thẻ IMG không có nội dung, nó hiển thị nội  
dung bằng cách xác định thuộc tính SRC. Cú pháp là:  
 
Trong đó SRC (source) là thuộc tính và giá trị là một URL, chỉ vị trí chính xác của file  
ảnh  
Đôi khi, chỉ hình ảnh không thể nói lên tất cả. Chúng ta cần phải cung cấp cho người  
dùng một vài giới thiệu về mục đích của hình ảnh. Bạn có thể canh lề ảnh cùng với văn  
bản.  
Thuộc tính ALIGN của thẻ IMG có thể được sử dụng để điều chỉnh canh lề của ảnh  
với văn bản xung quanh.  
3
6




Lập trình Web  
IMG ALIGN=position SRC=”PICTURE.GIF”>  

Trong đó, vị trí của ảnh có thể là trên(TOP), dưới(BOTTOM), ở giữa(MIDDLE),  
trái(LEFT) hoặc phải(RIGHT).  
Ví dụ 15:  
L>  
D>  
Inserting an Image  





/HEAD>  
H1>  
B>Inserting an Image  
HR>  
BODY>  
Aligned at the bottom  
 
Aligned at the top  
 
Aligned in the middle  
Y>  
L>  
Chú ý: file Flowers.jpg nằm trong cùng thư mục với file HTML nguồn.  
3
7




Lập trình Web  
Hình 2.15: Kết quả ví dụ 15  
Chú ý rằng một vài trình duyệt không hiển thị những ảnh đồ họa. Trong trường hợp  
này, chúng ta cần xác định một dòng chú thích thay thế trong tài liệu HTML. Thuộc  
tính ALT được sử dụng để chỉ nội dung ảnh của bạn.  
Ví dụ 16:  
L>  
D>  
Inserting an Image  






/HEAD>  
H1>  
B>Inserting an Image  
/FONT>/H1>  
HR>  
BODY>  
 
Y>  
L>  
Hình 2.16: Kết quả ví dụ 16 (dòng văn bản giải thích hiển thị khi di chuyển chuột  
vào ảnh)  
Nền của trang cũng quan trọng như văn bản. Người ta thường sử dụng màu cho trang  
web, mục đích là làm cho nội dung được nổi bật. Chúng ta cũng có thể sử dụng ảnh để  
làm nền. Để làm điều đó, ta cần phải dùng thuộc tính BACKGROUND trong thẻ  
BODY.  
(Chỉ ra URL hoàn chỉnh của ảnh)  
Nếu ảnh nhỏ hơn phạm vi hiển thị của tài liệu thì ảnh được xếp kề nhau để lấp đầy  
toàn bộ vùng hiển thị .  
3
8




Lập trình Web  
Ảnh thường cuộn theo văn bản khi người dùng kéo thanh cuộn trong trình duyệt. Nếu  
không muốn như vậy và thay vào đó ta muốn tạo ra hiệu ứng hình mờ, nghĩa là văn  
bản thì cuộn còn ảnh thì đứng yên, ta thiết lập thuộc tính BGPROPERTIES trong thẻ  
BODY có giá trị là FIXED  
ROPERTIES=FIXED>  
Các ảnh được chèn vào tài liệu HTML cũng có thể sử dụng như siêu liên kết. Những  
ảnh như thế gọi là siêu ảnh. Khi người dùng kích vào ảnh, sẽ hiển thị tài liệu hoặc file  
được chỉ ra trong URL. Để làm điều này, ta cần lồng ảnh vào trong thẻ neo (anchor)  
3
9




Lập trình Web  
CHƯƠNG 3: SỬ DỤNG BẢNG  
Kết thúc chương này, bạn có thể:  
¾
¾
Biết cách sử dụng bảng (table).  
Chèn các đối tượng đa phương tiện “Multimedia” vào tài liệu HTML  
3
.1 GIỚI THIỆU  
Chúng ta đã học cách nhóm các dữ liệu có liên quan vào các danh sách, nhưng còn có  
một cách khác để điều khiển việc hiển thị văn bản trên trang web, bằng cách dùng các  
bảng. Trong chương này chúng ta sẽ học cách tạo bảng. Phần cuối của chương này sẽ  
nói về làm thế nào để chèn các điều khiển đa phương tiện “multimedia” vào bên trong  
tài liệu HTML.  
3
.2 CÁCH TẠO BẢNG  
Chúng ta có thể sử dụng bảng để hiển thị dữ liệu dưới dạng các hàng và các cột. Bảng  
giúp cho chúng ta điều khiển, xác định và sắp xếp vị trí của văn bản và hình ảnh trên  
trang web, thay vì giao tất cả các việc đó cho trình duyệt.  
Hình 3.1 Mô hình của bảng  
3
.2.1 Thẻ dùng để tạo bảng  
Thẻ E> được dùng để tạo bảng trong tài liệu HTML. Các thuộc tính của phần  
tử được áp dụng cho bảng, nhưng không cho dữ liệu hiển thị trên bảng.  
Đơn vị cơ bản của bảng là một ô và được định nghĩa bằng thẻ .  
Ví dụ 1:  
L>  
D>  
Using Tables  

/HEAD>  
BODY>  


TABLE>  


TD>Data Cell 1  
TD>Data Cell 2  
4
0
 




Lập trình Web  

TD>Data Cell 3  
/TABLE>  
/BODY>  


L>  
Hình 3.2: Kết quả của ví dụ 1  
Một hàng của bảng được định nghĩa bằng thẻ  
Ví dụ2:  
L>  
D>  
Using Tables  

/HEAD>  
BODY>  


TABLE>  

TR>  
TR>  
Data Cell 1  
Data Cell 2  
Data Cell 3  

Data Cell 4  
Data Cell 5  
Data Cell 6  
LE>  
Y>  
L>  
4
1




Lập trình Web  
Hình 3.3: Kết quả của ví dụ 2  
Các ô tạo thành một hàng. Các hàng tạo thành bảng. Điều này được nói đến trong cú  
pháp của HTML được sử dụng để tạo bảng. Thẻ TD được lồng trong thẻ TR. Thẻ TR  
được nằm trong cặp thẻ đóng và mở TABLE.  
Thuộc tính BORDER có thể được sử dụng để định nghĩa các ô và cấu trúc của bảng.  
thuộc tính này chỉ độ rộng của đường viền. Nếu giá trị được đặt là 0 thì đường viền sẽ  
không hiển thị.  
Ví dụ 3:  
L>  
D>  
Using Tables  

/HEAD>  
BODY>  


TABLE BORDER = 2>  


TR>  
TR>  



TD>Data Cell 1  
TD>Data Cell 2  
TD>Data Cell 3  



TD>Data Cell 4  
TD>Data Cell 5  
TD>Data Cell 6  
LE>  
Y>  
L>  
4
2




Lập trình Web  
Hình 3.4: Kết quả của ví dụ 3  
Mỗi cột trong bảng, phần tiêu đề có thể định nghĩa. Thẻ  định nghĩa tiêu đề cho  
cột. Ví dụ:  
Employee Name  
Phần tử CAPTION được dùng để thêm vào một chú thích cho bảng. ở đây bạn sử dụng  
nó để mô tả bảng. Ví dụ,  
Creating a Table  
nằm ngay sau thẻ mở >  
3
.2.2 Chèn hàng và cột  
Những thẻ  và có thể được dùng để chèn theo thứ tự các hàng và các cột  
vào trong bảng. Ví dụ được mô tả bên dưới.  
Ví dụ 4:  
L>  
D>  
Using Tables  

/HEAD>  
BODY>  


TABLE BORDER = 2>  

TR>  
TR>  
Data Cell 1  
Data Cell 2  
Data Cell 3  

TD>New column  


TD>Data Cell 4  
TD>Data Cell 5  

4
3
 




Lập trình Web  
Data Cell 6  

TR>  

TD>New Row  
LE>  
Y>  
L>  
Hình 3.5: Kết quả của ví dụ 4  
3
.2.3 Xoá hàng và cột  
Để xóa một hàng, xóa thẻ tương ứng cùng với tất cả các thẻ bên trong nó  
từ một file mã nguồn HTML. Tương tự, để xóa các cột  
Hãy xem Hình 3.4. Để xóa dòng thứ hai, chúng ta cần xóa thẻ cho ô dữ liệu 4, 5  
và 6 cùng với thẻ mà nó kèm theo những thẻ này từ file HTML nguồn.  
Để xóa cột cuối cùng, đó là New column, chúng ta cần xóa thẻ lập nên ô này  
Ví dụ 5:  
L>  
D>  
Using Tables  

/HEAD>  
BODY>  


TABLE BORDER = 2>  

TR>  
TR>  
Data Cell 1  
Data Cell 2  
Data Cell 3  


TD>New Row  
4
4
 




Lập trình Web  
LE>  
Y>  
L>  
Hình 3.6: Kết quả của ví dụ 5  
.2.4 Trộn ô: kết hợp cột hay dòng  
3
Đôi khi chúng ta muốn nối các dòng và các cột vào trong một ô. Như vậy, chúng ta tạo  
một cột để kéo rộng ra cho hơn một dòng, hay tạo ra một dòng để kéo rộng ra cho hơn  
một cột. Thuộc tính COLSPAN và ROWSPAN được sử dụng để tạo ra những ô mà  
chúng có thể kéo rộng ra cho hơn một dòng hay cột. Thuộc tính COLSPAN được sử  
dụng với thẻ , trong khi đó thuộc tính ROWSPAN được sử dụng với thẻ .  
Ví dụ 6:  
L>  
D>  
Using Tables  

/HEAD>  
BODY>  


TABLE BORDER  
=
2
BGCOLOR  
=
lavender CELLSPACING  
=
2
CELLPADDING = 6>  




CAPTION>Creating a Table  
TH ALIGN = CENTER COLSPAN = 3>Quarter 1  
TH ALIGN = CENTER COLSPAN = 3>Quarter 2  
TR>  





TD>JanD>  
TD>FebD>  
TD>MarchD>  
TD>AprilD>  
TD>MayD>  
4
5
 




Lập trình Web  

TD>JuneD>  
>  



TD>1000D>  
TD>550D>  
TD>240D>  
1500  


TD>2765D>  
TD>1240D>  
>  






TD>3000D>  
TD>2430D>  
TD>2500D>  
TD>1250D>  
TD>900D>  
TD>3400D>  
LE>  
Y>  
L>  
Hình 3.7: Kết quả của ví dụ 6  
Ví dụ 7:  
L>  
D>  
Using Tables  
4
6




Lập trình Web  
D>  

BODY>  

TABLE BORDER  
=
2
BGCOLOR  
=
lavender CELLSPACING  
=
2
CELLPADDING = 6>  

CAPTION>Creating a Table  
TR>  






TH
 
TH
 
TH>NUTSH>  
TH>BOLTSH>  
TH>HammersTH>  
>  
Quarter 1  




TD>JanD>  
TD>2500D>  
TD>1000D>  
TD>1240D>  

TR>  
TR>  




TD>FebD>  
TD>3000D>  
TD>2500D>  
TD>4000D>  





TD>MarchD>  
TD>3200D>  
TD>1000D>  
TD>2400D>  
LE>  
Y>  
L>  
4
7




Lập trình Web  
Hình 3.8: Kết quả của ví dụ 7  
3
.2.5 Định dạng cho ô  
Có thể chỉ định được vị trí của văn bản bên trong mỗi ô của bảng. Những thuộc tính  
canh lề ngang (ALIGN) và canh lề dọc (VALIGN) được sử dụng để điều khiển việc  
canh lề trong các ô của bảng. Thuộc tính ALIGN có thể có các giá trị: trái, phải, giữa,  
đều hai bên. Thuộc tính VALIGN có thể có các giá trị: trên, giữa và dưới  
Ngoài việc xác định vị trí nội dụng của các ô trong bảng, chúng ta cũng có thể thay đổi  
kích thước, màu sắc của bảng. Chúng ta có thể xác định chiều rộng của bảng. Đó là  
vùng trên màn hình mà bảng sẽ mở rộng ra. Thuộc tính WIDTH của thẻ TABLE sẽ  
thật sự cần thiết. Giá trị của thuộc tính WIDTH có thể là một định dạng phần trăm hay  
thậm chí là các điểm. Chẳng hạn,  
 
Điều này sẽ kéo rộng bảng đến 50% của màn hình  
Nếu chúng ta muốn thêm một vài màu sắc cho bảng, chúng ta sử dụng thuộc tính  
BGCOLOR. Giá trị này có thể là tên của một màu hay là giá trị ở hệ thập lục phân.  
Ví dụ 8:  
L>  
D>  
Using Tables  

/HEAD>  
BODY>  


TABLE BORDER = 2 WIDTH = 50% BGCOLOR = lavende
 
4
8
 




Lập trình Web  

1
TR>  

TD ALIGN = right VALIGN = bottom>Data Cell  
 

TD>Data Cell 2  
TD>Data Cell 3  


TR>  



TD>Data Cell 4  
TD>Data Cell 5  
TD>Data Cell 6  
LE>  
Y>  
L>  
Hình 3.9: Kết quả của ví dụ 8  
Nếu nội dung của văn bản trong ô nhỏ hơn không gian trong ô đó thì sẽ có không gian  
trống là khoảng cách giữa văn bản và đường viền của ô. CELLSPACING là không  
gian giữa các ô và CELLPADDING là không gian giữa đường viền ô của bảng với nội  
dung văn bản được đặt trong ô. Như đã mô tả ở trên, thuộc tính CELLSPACING định  
nghĩa không gian giữa các ô, tính theo điểm (pixel). Thuộc tính CELLPADDING định  
nghĩa những không gian bên trong ô của bảng  
Ví dụ 9:  
L>  
D>  
Using Tables  

/HEAD>  
BODY>  


TABLE BORDER  
=
2
BGCOLOR  
=
lavender CELLSPACING  
=
5
CELLPADDING = 10>  

TR>  
4
9




Lập trình Web  



TD>Data Cell 1  
TD>Data Cell 2  
TD>Data Cell 3  

TR>  



TD>Data Cell 4  
TD>Data Cell 5  
TD>Data Cell 6  
LE>  
Y>  
L>  
Hình 3.10: Kết quả của ví dụ 9  
3
.4 CHÈN MULTIMEDIA VÀO TÀI LIỆU HTML  
Một trong những nhân tố lớn nhất trong sự phát triển của web đó là sự tích hợp của các  
đa phương tiện(multimedia) bên trong những tài liệu HTML. Khi những phiên bản đầu  
tiên của HTML ra đời, nó cũng đã bao gồm các đối tượng liên quan đến hình ảnh vào  
trong một tài liệu để cho phép nhúng hình ảnh nội tuyến vào nội dung tài liệu. Sau đó,  
HTML được mở rộng để cho phép nhúng không chỉ là những ảnh tĩnh mà còn là âm  
thanh và video. Hiện nay, tất cả những tính năng đó được phép sử dụng để làm phong  
phú thêm cho các trang web.  
3
.4.1 Chèn ảnh động (.GIF) vào tài liệu HTML  
Trong chương 3, chúng ta vừa mới thảo luận thế nào là file GIF và chúng được đưa  
vào một tài liệu HTML bằng cách nào. Nhớ rằng thẻ > được dùng để chèn một  
ảnh vào trong trang web.  
Ví dụ 12:  
L>  
D>  
Inserting an animated .GIF File  
5
0
 




Lập trình Web  
D>  
ONT  
SIZE=3  
COLOR=FORESTGREEN>Inserting  
an  
ImageONT>  
>  
Y>  
 
Y>  
L>  
Hình 3.13: Kết quả của ví dụ 12  
Chú ý: trong ví dụ 12, coffeecup.gif là một ảnh động là file .gif, khi hiển thị trong  
trình duyệt thì nó hiển thị một luồng khói phía trên cốc cà phê. File này được đặt vào  
cùng thư mục với file HTML nguồn. Tuy nhiên, nó có thể được thay thế bởi các hình  
ảnh động khác  
3
.4.2 Chèn âm thanh vào tài liệu HTML  
Tính hấp dẫn của một trang Web tương tác đó là thường sử dụng tiếng “bip” khi người  
dùng kích hoạt đến một trang web khác. Một cách tùy chọn, một trang web sẽ yêu cầu  
kết hợp tiếng nhạc bên trong nó để làm cho trang web đó có tính hấp dẫn hơn. MIDI là  
một định dạng chuẩn của các file nhạc mà chúng được dùng trong tài liệu HTML. Các  
file MIDI chứa những nốt nhạc và các loại nhạc cụ cho các bản nhạc. Nhạc cụ điện tử  
trong card âm thanh mô phỏng tiếng nhạc. 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 phải sử dụng các file âm thanh (.wav  
hay .midi) trên hệ thống của chúng ta. Chẳng hạn như,  
 
Nếu chúng ta không xác định được đường dẫn thì trình duyệt sẽ tìm file mà ở đó trang  
web đang được định vị. Thuộc tính loop xác định số lần mà âm thanh sẽ được bật lên.  
Chú ý rằng phần tử BGSOUND không được hỗ trợ bởi Netscape.  
5
1
 




Lập trình Web  
Nhạc MIDI như đã đề cập ở phần trước, chỉ là một tiếng nhạc tổng hợp. Tuy nhiên,  
nếu muốn thêm vào file nhạc của mình, chẳng hạn như giọng nói hay một bài hát đặc  
biệt khi trang web được chuyển đến, thì chúng ta cần phải sử dụng những file âm  
thanh đã được số hóa.  
Một file âm thanh được số hóa chứa những thông tin để sao chép lại một bản sao âm  
thanh đúng như file gốc của nó. Tần số tại những tâm thanh được đưa ra làm ví dụ  
chuẩn xác định được chất lượng của file âm thanh đó, tần suất cao hơn, chất lượng âm  
thanh tốt hơn. Điểm hạn chế đó là nó cũng sẽ làm gia tăng kích thước của file. Những  
file âm thanh được số hóa có thể được lưu trong hai định dạng, đó là file .au hay .wav  
Định dạng file .wav bắt đầu với hệ điều hành Windows. Nó có tỉ lệ nén thấp và kích  
thước file lại  
rất lớn. Còn định dạng file .au được tổ chức với những máy cài hệ điều hành Unix. Có  
vẽ sẽ tốt hơn cho việc lưu trữ các file âm thanh được và nó có một tỉ lện nén cao hơn  
so với những file .wav  
Ví dụ 3:  
L>  
D>  
Inserting Sound  




/HEAD>  
H1>B>Inserting sound  
HR>  
BODY>  

BGSOUND src="WindowsLogonSound.wav" loop="infinite">  
IMG SRC=coffeecup.gif ALT="Steaming Coffee">  

Y>  
L>  
5
2




Lập trình Web  
Hình 3.14: Kết quả của ví dụ 13  
Chú ý: Trong ví dụ 13, khi hiển thị trang web trong trình duyệt file nhạc đăng nhập  
Windows sẽ chạy. File windowLogonSound.wav được đặt trong cùng thư mục với file  
HTML nguồn. Tuy nhiên, nó có thể được thay thế bởi các file nhạc khác  
3
.4.3 Chèn video vào tài liệu HTML  
Một file video có thể có phần mở rộng là: .avi, .asf, .ram hay là .ra. Để chèn một file  
video vào tài liệu HTML, thẻ có thể được sử dụng. Chẳng hạn như,  

EMBED SRC=”path\video file name” WIDTH=”width in pixels or percentage”  
HEIGHT=”height in pixels or percentage”>  
Ví dụ 14:  
L>  
D>  
Inserting a Video file  




/HEAD>  
H1>B>Inserting Video  
HR>  
BODY>  
 
Y>  
L>  
Hình 3.15: Kết quả của ví dụ  
Chú ý: Để xem kết quả 14, trình Media Player phải được cài đặt. File clock.avi có thể  
được thay thế bởi các file video khác  
5
3
 




Lập trình Web  
CHƯƠNG 4: SỬ DỤNG BIỂU MẪU VÀ KHUNG  
Kết thúc chương này, bạn có thể:  
¾
¾
Sử dụng biểu mẫu (form) và các phần tử nhập thông thường trong HTML  
Sử dụng khung (frame)  
4
.1 GIỚI THIỆU  
Một người hay dùng Web thường xuyên gặp các loại biểu mẫu khác nhau và nhiều khi  
phải điền thông tin vào các loại biểu mẫu đó. Trong chương này, ta sẽ học cách thêm  
các phần tử nhập vào một tài liệu HTML và tạo ra một biểu mẫu. Ta cũng sẽ học thêm  
về khung để phân chia tài liệu.  
4
.2 GIỚI THIỆU BIỂU MẪU  
Form HTML là một phần của tài liệu, nó chứa các phần tử đặc biệt gọi là các điều  
khiển. Các điều khiển được sử dụng để nhập thông tin từ người dùng và cung cấp một  
số tương tác. Dữ liệu do người dùng nhập vào có thể được xác nhận hợp lệ nhờ các  
kịch bản phía máy khách (client-side scripts) và được chuyển đến máy chủ để xử lý  
thêm.  
4
.2.1 Sử dụng biểu mẫu  
Việc sử dụng biểu mẫu trên World Wide Web là khá nhiều và liên tục tăng lên. Sau  
đây là một số cách sử dụng thông thường:  

Thu thập tên, địa chỉ, số điện thoại, địa chỉ e-mail và các thông tin khác để người  
dùng đăng ký cho một dịch vụ hay một sự kiện nào đó  

Thu thập thông tin dùng để đăng ký mua một mặt hàng nào đó, ví dụ, khi muốn  
mua một cuốn sách trên Internet, ta phải điền tên, địa chỉ gửi thư, phương thức  
thanh toán và các thông tin liên quan khác.  


Thu thập thông tin phản hồi về một web site. Hầu hết các site cung cấp một dịch vụ  
nào đấy đều khuyến khích khách hàng gửi thông tin phản hồi. Ngoài việc xây dựng  
mối quan hệ với khách hàng, đây còn là một nguồn thông tin để trao đổi hoặc cải  
tiến dịch vụ.  
Cung cấp công cụ tìm kiếm cho web site. Các site cung cấp nhiều thông tin khác  
nhau thường cung cấp cho người dùng hộp tìm kiếm để cho phép họ tìm kiếm  
thông tin nhanh hơn.  
Một biểu mẫu điển hình trên trang web như sau:  
5
4
 




Lập trình Web  
Hình 4.1: Một dạng biểu mẫu  
4
.2.2 Phần tử FORM  
Phần tử M> được sử dụng để tạo một vùng trên trang như một biểu mẫu. Nó chỉ  
ra cách bố trí của biểu mẫu. Các thuộc tính bao gồm:  
Thuộc tính  
ACCEPT  
Mô tả  
Thuộc tính này xác định danh sách các kiểu MIME được máy chủ  
nhận ra, trong đó có chứa kịch bản (script) để xử lý biểu mẫu. Cú pháp  
là ACCEPT = “Internet media type”  
ACTION  
Thuộc tính này xác định vị trí của script sẽ xử lý biểu mẫu hoàn chỉnh  
và đã được gửi đi  
Cú pháp là: ACTION = “URL”  
METHOD  
Thuộc tính này xác định phương thức dữ liệu được gửi đến máy chủ.  
Nó cũng xác định giao thức được sử dụng khi máy khách gửi dữ liệu  
lên cho máy chủ. Nếu giá trị là GET thì trình duyệt sẽ tạo một câu hỏi  
5
5
 




Lập trình Web  
có chứa địa chỉ URL của trang , một dấu chấm hỏi và các giá trị do  
biểu mẫu tạo ra. Trình duyệt sẽ trả lại câu hỏi cho kịch bản được xác  
định trong URL để xử lý. Nếu giá trị là POST, thì dữ liệu trên biểu  
mẫu được gửi đến kịch bản xử lý như một khối dữ liệu. Người ta  
không sử dụng chuỗi câu hỏi. Cú pháp là METHOD = (GET | POST).  
Ví dụ, để đưa một biểu mẫu đến chương trình “xử lý biểu mẫu” sử dụng theo phương  
thức POST  

.

FORM action=”http://mysite.com/processform” METHOD=”post”>  
..form contents...  
/FORM>  
4
.2.3 Các phần tử nhập của HTML  
Khi tạo một biểu mẫu, ta có thể đặt các điều khiển lên biểu mẫu để nhận dữ liệu nhập  
vào từ người dùng. Các điều khiển này được sử dụng với phần tử . Tuy  
nhiên, ta cũng có thể sử dụng chúng ở bên ngoài biểu mẫu để tạo các giao diện người  
dùng.  

Phần tử INPUT  
Phần tử  xác định loại và sự xuất hiện của điều khiển trên biểu mẫu. Các  
thuộc tính của phần tử này là:  
Attributes  
TYPE  
Description  
Thuộc tính này xác định loại phần tử. Ta có thể chọn một trong các lựa  
chọn: TEXT, PASSWORD, CHECKBOX, RADIO, SUBMIT, RESET,  
FILE, HIDDEN và BUTTON. Mặc định là TEXT  
NAME  
Thuộc tính này chỉ tên của điều khiển. Ví dụ nếu có nhiều hộp văn bản (text  
box) trên một biểu mẫu thì bạn nên sử dụng tên để xác định chúng –  
TEXT1, TEXT2 hoặc bất kỳ tên nào mình chọn. Phạm vi hoạt đông của  
thuộc tính NAME nằm trong phần tử FORM  
VALUE  
SIZE  
Đây là một thuộc tính tùy chọn, nó xác định giá trị khởi tạo của điều khiển.  
Tuy nhiên, đối với kiểu (TYPE) là RADIO thì ta phải xác định cho nó một  
giá trị.  
Thuộc tính này xác định độ rộng ban đầu của điều khiển. Đối với kiểu là  
TEXT hay PASSWORD thì kích thước được xác định theo ký tự. Đối với  
các loại phần tử nhập khác, độ rộng được xác định bằng điểm (pixels)  
MAXLENGTH  
CHECKED  
SRC  
Thuộc tính này được sử dụng để xác định số ký tự lớn nhất có thể nhập vào  
phần tử TEXT hoặc PASSWORD. Mặc định là không giới hạn.  
Đây là thuộc tính logic để xác định nút có được chọn hay không. Thụôc  
tính này được sử dụng khi kiểu nhập là RADIO hay CHECKBOX  
SRC = “URL”. Thuộc tính này được dùng khi ta muốn sử dụng một ảnh  
trong kiểu INPUT. Nó xác định vị trí của ảnh  
5
6
 




Lập trình Web  
Phần này ta sẽ thảo luận về các loại phần tử nhập cùng với một số đặc tính và sự  
kiện thường dùng.  

Nút bấm  
Loại này tạo ra một điều khiển nút (button)  
Tên  
Mô tả  
NAME  
SIZE  
Thiết lập hoặc truy xuất tên của điều khiển  
Thiết lập hoặc truy xuất kích thước của điều khiển  
TYPE  
Truy xuất loại điều khiển bên trong được biểu diễn bởi
button>  
VALUE  
Thiết lập hoặc truy xuất giá trị của nút .  
Ví dụ,  
 VALUE=”click” NAME=”b1">  

Văn bản  
Loại này tạo một điều khiển nhập văn bản có một dòng. Thuộc tính SIZE xác  
định số ký tự có thể hiển thị trong phần tử. Thuộc tính MAXLENGTH xác định  
số ký tự tối đa có thể nhập vào phần tử này.  
Ví dụ,  
 
Giá trị Value ở đây để hiển thị nội dung ban đầu của văn bản và để truy xuất  
văn bản khi biểu mẫu được gửi đi  

Checkbox (Hộp kiểm)  
Loại này tạo ra một điều khiển checkbox. Người dùng có thể chọn một hoặc  
nhiều checkbox. Khi một phần tử checkbox được chọn, thì cặp tên/giá trị được  
nhận cùng với biểu mẫu. Giá trị mặc định của checkbox là bật (on) . Phần tử  
checkbox là một phần tử trên dòng và không cần thẻ đóng.  
Tên  
CHECKED  
Mô tả  
Thiết lập hoặc truy xuất trạng thái của checkbox  
Thiết lập hoặc truy xuất tên của điều khiển  
Thiết lập hoặc truy xuất kích thước của điều khiển  
NAME  
SIZE  
STATUS  
Thiết lập hoặc truy xuất trạng thái xem checkbox có được chọn hay  
không  
TYPE  
Truy xuất loại điều khiển, sử dụng .  
VALUE  
Thiết lập hoặc truy xuất giá trị của checkbox
5
7




Lập trình Web  
type=checkbox>  

Radio  
Loại này tạo ra điều khiển kiểu nút radio. Một điều khiển kiểu nút radio (radio  
button control) được sử dụng đối với các tập giá trị loại trừ lẫn nhau. Các điều  
khiển radio trong một nhóm phải có cùng tên. Vào một thời điểm, người dùng  
chỉ có thể chọn một lựa chọn. Chỉ có nút radio được chọn trong nhóm mới tạo  
tên cặp giá trị tên/value trong dữ liệu được nhận. Các nút radio nên đặt thuộc  
thuộc tính giá trị.  
Tên  
CHECKED  
Mô tả  
Thiết lập hoặc truy xuất trạng thái của nút radio  
Thiết lập hoặc truy xuất tên của điều khiển  
Thiết lập hoặc truy xuất kích thước của điều khiển  
NAME  
SIZE  
STATUS  
Thiết lập hoặc truy xuất trạng thái xem nút radio có được chọn hay  
không  
TYPE  
Truy xuất loại điều khiển, sử dụng io>.  
Thiết lập hoặc truy xuất giá trị của radio  type=radio>  
VALUE  
Ví dụ,  
 NAME=”sex” VALUE=”male”>Male  

Submit  
Loại này tạo ra một nút submit. Khi người dùng nhấp vào nút Submin, biểu  
mẫu được chuyển đến vị trí được xác định trong thuộc tính ACTION. Cặp  
tên/giá trị của nút submit được nhận cùng với biểu mẫu.  
Ví dụ,  
 VALUE=”click” NAME=”b1">  

Ảnh  
Điều khiển này tạo ra một nút submit dạng ảnh. Giá trị của thuộc tính SRC xác  
định URL của ảnh được đặt trong nút ấy. Khi người dùng nhấp vào điều khiển  
ảnh này, biểu mẫu được chuyển đi để xử lý. Tọa độ x và y (được đo bằng điểm)  
tại vị trí nhấp chuột được chuyển đến máy chủ với định dạng sau  
Name.x = valueofx  
Name.y = valueofy  
Trong đó, ‘name’ là tên của điều khiển  
Ta có thể sử dụng nhiều nút submit với các hình ảnh khác nhau thay vì một nút  
submit chỉ có một hình. Nếu cần trình bày nhiều ảnh ta có thể sử dụng bản đồ  
ảnh.  
5
8




Lập trình Web  
Ví dụ,  
 

Reset  
Điều khiển này tạo ra nút reset. Khi người dùng nhấp vào nút này, các giá trị  
của tất cả các điều khiển được tái thiết lập trở về giá trị ban đầu, được xác định  
trong các giá trị thuộc tính của chúng  
Ví dụ,  
 
Ví dụ sau thể hiện việc sử dụng nhiều kiểu nhập khác nhau.  
Ví dụ 1:  
L>  
D>  

TITLE> Sample Form  
/HEAD>  
BODY bgColor="#ffffcc" Text="#000099">  


.mysite.com/FormSite"  
Sample Stock Survey  
Describe your investment experience
 
 
METHOD="POST">  
"RESULT_RadioButton-3"  
VALUE="Radio-0"
eginner  
"RESULT_RadioButton-3"  
VALUE="Radio-1">intermediate  

INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3"  
VALUE="Radio-2">expert  



/p>  
p>Types of Investments you make  
P>  
ME="RESULT_CheckBox-4"  
VALUE="CheckBox-0">Individual Stocks  
ME="RESULT_CheckBox-4"  
VALUE="CheckBox-1">Options  
ME="RESULT_CheckBox-4"  
VALUE="CheckBox-2">Mutual Funds
 

p>What is your stock pick for this year?  
P>  


INPUT TYPE="TEXT" NAME="RESULT_TextField-6"  
SIZE="30" MAXLENGTH="30">  

/p>  
p>  

5
9




Lập trình Web  

VALUE="Submit">  

 

/FORM>  
/BODY>  
/HTML>  


Hình 4.2: Kết quả ví dụ 1  

Phần tử TextArea (vùng văn bản)  
Loại này tạo ra một điều khiển nhập văn bản trên nhiều dòng so với hộp văn bản  
nhập một dòng. Ta phải xác định kích thước của textarea. Ta cũng phải xác định số  
dòng, số cột trong textarea. Tuy nhiên, ta phải kết thúc phần tử với thẻ đóng  
EA>  
Tên  
Mô tả  
COLS  
ROWS  
SIZE  
Truy xuất độ rộng của textarea  
Thiết lập hoặc truy xuất số hàng ngang trong  
Thiết lập hoặc truy xuất kích thước của điều khiển  
Truy xuất loại điều khiển, sử dụng  
TYPE  
6
0




Lập trình Web  
VALUE  
Thiết lập hoặc truy xuất giá trị của  
Ví dụ,  
 

Phần tử BUTTON (Nút bấm)  
Điều khiển này tạo ra điều khiển button. Khi người dùng nhấp vào nút Submit, biểu  
mẫu được nhận để xử lý. Cặp tên/giá trị của nút submit được nhận cùng với biểu  
mẫu.  
Thuộc tính  
NAME  
Mô tả  
Gán tên cho nút  
VALUE  
TYPE  
Gán giá trị cho nút  
Xác định loại nút. Các giá trị có thể là:  
Submit – tạo nút nhận biểu mẫu khi được nhấp vào  
Button – Tạo nút kích hoạt một script khi được kích vào  
Reset – tạo nút thiết lập lại (reset) biểu mẫu và các giá trị của các điều  
khiển trong biểu mẫu  
Một nút (BUTTON) có loại là submit (type=submit) giống như một phần tử  
INPUT của loại nút. Sự khác nhau là ở chỗ khi phần tử BUTTON được nhấp vào  
thì cặp tên/giá trị được nhận cùng biểu mẫu. Một nút (BUTTON) có loại là submit  
cũng chứa một ảnh và giống một phần tử INPUT có loại là ảnh . Sự khác nhau là ở  
chỗ phần tử INPUT có dạng một ảnh “phẳng” trong khi phần tử BUTTON thì hiển  
thị như một nút có hiệu ứng lên / xuống khi nhấp vào.  
Ví dụ sau minh họa cho việc sử dụng phần tử TEXTAREA và BUTTON  
Ví dụ 2:  
L>  
D>  
Sample Form  
D>  
 

FORM ACTION="http://www.mysite.com/FormSite" METHOD="POST">  
B>Sample Stock Survey  
P>Any Investment Advice for others?  
TEXTAREA NAME="RESULT_TextArea-8" ROWS="7" COLS="20">  



REA>  
 
 
6
1




Lập trình Web  
Send  
BUTTON type="reset" name="reset" >  
Reset  
/P>  
/FORM>  



Y>  
L>  
Hình 4.3: Kết quả ví dụ 2  
Phần tử lựa chọn (Select)  

Phần tử SELECT được sử dụng để hiển thị một danh sách các lựa chọn cho người  
dùng. Mỗi lựa chọn được biểu diễn bởi phần tử OPTION. Một phần tử SELECT  
phải chứa ít nhất một phần tử OPTION. Thành phần được chọn lựa sẽ hiển thị với  
màu khác so với các thành phần còn lại.  
Thuộc tính  
Mô tả  
NAME  
SIZE  
Gán tên cho phần tử. Khi biểu mẫu được gửi đi, thuộc tính tên  
được gán với giá trị chọn lựa  
Nếu có nhiều sự chọn lựa, người dùng sử dụng cuộn, thuộc  
tính này xác định số dòng trong danh sách được hiển thị.  
6
2




Lập trình Web  
MULTIPLE  
Là thuộc tính logic cho phép người dùng chọn một hoặc nhiều  
chọn lựa.  
Mỗi lựa chọn trong hộp chọn được lấy giá trị thông qua mô tả văn bản củả nó, xem  
nó có được chọn hay không.  
Mảng Option được tạo ra theo danh sách lựa chọn trong phần tử SELECT. Mỗi lựa  
chọn có thuộc tính Text và Selected cho phép chúng ta kiểm tra tùy chọn đó có  
được chọn hay không và truy xuất văn bản của lựa chọn theo thứ tự. Bây giờ ta có  
thể kiểm tra mỗi phần tử trong mảng và xác nhận nó.  
Ví dụ 3:  
L>  
D>  
Sample Form  
D>  
="#ffffcc" Text="#000099">  
.mysite.com/FormSite"  
METHOD="POST">  



B>Sample Stock Survey  
P>How do you buy your stocks?  
SELECT NAME="RESULT_RadioButton-5">  





OPTION>OPTION>  
OPTION>1) On-Line  
OPTION>2) Touch Tone Trading  
OPTION>3) Broker Assisted  
OPTION>4) Other  




/SELECT>  
BR>  
P>  
INPUT TYPE="RESET" NAME="Reset" VALUE="Reset">  

/P>  

/FORM>  
Y>  
L>  
6
3




Lập trình Web  
Hình 4.4: Kết quả ví dụ 3  
Phần tử OPTGROUP được sử dụng để nhóm các lựa chọn vào một cây phân cấp.  
Ví dụ, bảng nội dung có thể có tên các chương. Các chủ đề và chủ đề con trong  
một chương có thể được nhóm vào chương đó.  
Thuộc tính  
SELECTED  
Mô tả  
Đây là thuộc tính logic sử dụng để chọn trước một tùy chọn.  
VALUE  
Xác định giá trị được nhận vào cho tùy chọn được chọn. Giá trị  
này được gán với tên của phầ̀n tử SELECT. Nội dung của phần  
tử OPTION là giá trị mặc định  
LABEL  
Xác định văn bản hiển thị cho một tùy chọn.  
Ví dụ 4:  
L>  




Head>  
Title>Using the Option Group  
/head>  
BODY>  

FORM action = ”http://www.mysite.com/FormSite”  
method = ”post”>  

P>e=”course”>  
OPTGROUP>  

Introduction to the  
Internet  
Introduction to HTML  
6
4




Lập trình Web  
Introduction to Web page  
designing  

/OPTGROUP>  
OPTGROUP>  


OPTION value=”vbintro”>Visual Basic–An Introduction  
OPTION value=”vbdev”>Visual Basic – Application  

Development  
OUP>  



/SELECT>  
/FORM>  
/BODY>  
l>  
Hình 4.5: Kết quả ví dụ 4  

Phần tử LABEL (Nhãn)  
Phần tử LABEL được sử dụng để gắn thông tin vào các phần tử điều khiển. Ví dụ,  
phần tử TEXT không có nhãn để xác định rõ nó. Ta có thể gán nhãn vào phần tử  
TEXT khi trang hiển thị. Ta phải xác định thuộc tính ID của điều khiển mà nó được  
gán vào.  
Ví dụ 5:  
L>  
D>  
Using Labels  

/HEAD>  
BODY>  

6
5




Lập trình Web  
Personal  
Information>  



HR align = cente
 
FORM action=”http://somesite.com” method=”post”>  
P>  
First name:  
”firstname”>  
Last name:  
”lastname”>  
>  

/FORM>  
/BODY>  
/HTML>  


Hình 4.6: Kết quả ví dụ 5  
4
.2.4 Tạo biểu mẫu  
Chúng ta đã thảo luận về phần tử và các điều khiển có thể thêm vào biểu  
mẫu để nhận thông tin người dùng. Trong phần này, chúng ta sẽ tạo một biểu mẫu để  
nhận thông tin về một người xin việc. Các nút RESET và SUBMIT thực hiện các công  
việc cần thiết.  
Ví dụ 6:  
L>  
D>  
Job application  
D>  
6
6
 




Lập trình Web  
Y>  
Application  
Form/FONT>  

HR>R>  
FORM action=”http://somesite.com/processform” method=”post”>  







P>  
LABEL for=”firstname”>Name:  
INPUT type=”text” id=”firstname”>  
P>Area of Interest  
BR
 
INPUT  
TYPE=RADIO  
NAME=”CONTROL1"  
VALUE=”0"  
>Web  
CHECKED>Web Designer  

NAME=”CONTROL1" VALUE=”1"  
Administrator  
INPUT TYPE=RADIO NAME=”CONTROL1" VALUE=”2" >Web  
Developer  



P>Experience  
SELECT NAME=”CONTROL2">  




OPTION>NoneION>  
OPTION>1 Year  
OPTION>3 Years  
OPTION>5 Years  





/SELECT>  
BR>  
P>Comments  
BR>  
TEXTAREA NAME=”CONTROL3" COLS=”30" ROWS=”5">Type  
your comments here.  

BR>  

P>Send  
acknowledgement  

BR>  


P>  
INPUT TYPE=RESET VALUE=RESET>  
M>  
Y>  
L>  
6
7




Lập trình Web  
Hình 4.7: Kết quả ví dụ 6  
Khi có nhiều phần tử trong một form, chúng ta cần phải điều khiển chúng. Sau đây là  
các thuộc tính để điều khiển các phần tử  

Thiết lập tiêu điểm (Focus)  
Một phần tử trở thành hoạt động khi nó nhận tiêu điểm. Ví dụ, để nhập văn bản vào  
phần tử TEXT, tiêu điểm phải nằm trên phần tử đó. Khi phần tử mất tiêu điểm, nó  
sẽ không hoạt động nữa. Cách đơn giản nhất để đặt tiêu điểm cho phần tử là ta kích  
vào nó bằng cách sử dụng chuột, joystick ... hoặc dùng bàn phím để đặt.  

Thứ tự tab  
Thuộc tính tabindex của một phần tử xác định trình tự phần tử nhận tiêu điểm  
thông qua bàn phím. Ở đây bao gồm các phần tử được lồng vào các phần tử khác.  
Giá trị có thể là bất cứ số nào giữa 0 và 32767. Tiêu điểm bắt đầu từ phần tử có giá  
trị tabindex thấp nhất. Nếu ta gán cùng một giá trị tabindex cho hơn một phần tử,  
thì các phần tử nhận tiêu điểm theo thứ tự nó xuất hiện trong tài liệu.  
6
8




Lập trình Web  
Nếu phần tử nào không hỗ trợ thuộc tính tabindex, nó sẽ là phần tử nhận tiêu điểm  
cuối cùng. Nếu ta vô hiệu hóa một phần tử, nó sẽ không được liệt kê vào thứ tự tab  

và nó sẽ không nhận được tiêu điểm.  
Ví dụ,  
Web  
Designer  
 

Phím truy cập (Access Keys)  
Thuộc tính này được sử dụng để gán phím truy cập cho phần tử. Phím truy cập là  
một ký tự và thường được sử dụng cùng với phím ALT. Khi người dùng nhấn phím  
truy cập, phần tử được xác định sẽ nhận tiêu điểm và bắt đầu hoạt động.  
Ví dụ,  



LABEL for=”firstname”>Name:  
INPUT accesskey=”N” tabindex=1 type=”text” id=”firstname”>  
TEXTAREA accesskey=“C” tabindex=4 NAME=”CONTROL3"  
COLS=”30"  
ROWS=”5">Type your comments here  

Phần tử vô hiệu hóa (Disabling Elements)  
Nếu làm việc với trình soạn thảo văn bản, ta sẽ thấy rằng nếu không mở tài liệu nào  
thì các tùy chọn lưu và định dạng sẽ bị vô hiệu hóa. Đối với trang Web, ta có thể vô  
hiệu hóa các phần tử hoặc để ở trạng thái chỉ đọc (read-only) nếu không muốn  
người dùng truy cập chúng. Ví dụ, khi hiển thị một biểu mẫu, ta có thể vô hiệu hóa  
nút “Submit” cho đến khi người dùng nhập dữ liệu vào. Thuộc tính vô hiệu hóa  
được sử dụng để điều khiển truy cập một phần tử. Khi một phần tử bị vô hiệu hóa,  
nó không được liệt kê trong thứ tự tab. Do vậy, điều khiển không nhận được tiêu  
điểm và cuối cùng là các giá trị của điều khiển bị vô hiệu hóa không được chuyển  
đi cùng với biểu mẫu. Một điều khiển bị vô hiệu hóa có thể được kích hoạt nhờ các  
script lúc thực hiện.  
Ví dụ,  
 
4
.3 KHUNG (FRAME)  
Khung chia một cửa sổ trình duyệt thành nhiều vùng riêng biệt, mà mỗi vùng có thể  
hiển thị một trang riêng biệt có thể cuốn được. Mỗi khung là một cửa sổ trong cửa sổ  
chính. Ví dụ, ta có thể sử dụng ba khung trong trang Web, một làm biểu ngữ (banner),  
một làm menu điều hướng và một để hiển thị dữ liệu. Mỗi khung có thể được tạo, thay  
đổi và cuốn độc lập nhau.  
6
9
 




Lập trình Web  
Hình 4.8: Khung trong trang Web  
.3.1 Tại sao sử dụng khung?  
Một trang có thể có một hoặc nhiều khung. Một số lý do sử dụng khung:  
4



Hiển thị một biểu tượng (logo) hoặc thông tin tĩnh trên một vị trị cố định trên trang  
Web  
Đối với bảng nội dung trong trang mà ở đó người dùng có thể kích vào và di  
chuyển quanh web site mà không cần phải liên tục quay lại trang nội dung.  
Nhiều cách hiển thị cho phép người thiết kế giữ một số thông tin tĩnh nào đó trong  
khi cuộn hay thao tác đối với những nội dung khác trên trang Web  
Tuy nhiên, mặt hạn chế của việc sử dụng khung trong trang Web là: không phải tất cả  
các trình duyệt đều hỗ trợ khung, ví dụ, IE phiên bản 2.0 hoặc trước đó và Netscape  
1
.2 hoặc trước đó. Để nội dung vẫn hợp lệ mà người sử dụng không cần quan tâm đến  
trình duyệt có hỗ trợ khung hay không, người thiết kế cần phải cung cấp một cách  
khác để truy cập vào nội dung.  
4
.3.2 Sử dụng khung  
Một tài liệu HTML chuẩn có phần HEAD và BODY. Một tài liệu HTML sử dụng  
khung thì có phần HEAD và phần FRAMESET. Phần FRAMESET xác định cách  
trình bày trong cửa sổ người dùng. Ta không thể sử dụng phần tử BODY và  
FRAMESET cùng với nhau. Trình duyệt chỉ nhận phần tử đầu tiên xuất hiện trong tài  
liệu và bỏ qua phần tử sau. Nghĩa là, nếu bạn sử dụng phần tử BODY, thì phần tử  
FRAMESET sau đó sẽ bị bỏ qua và ngược lại.  
Khung được tạo ra bằng cách sử dụng phần tử FRAMESET. Các thuộc tính như sau:  
Thuộc tính  
Mô tả  
ROWS  
COLS  
Xác định độ rộng của khung, được tính theo điểm(pixels),  
phần trăm hoặc độ rộng tương đối. Giá trị mặc định là  
1
00%, nghĩa là một dòng  
Xác định độ cao của khung, được tính theo điểm(pixels),  
phần trăm hoặc độ cao tương đối. Giá trị mặc định là  
1
00%. Nó xác định chỉ có một cột  
7
0
 




Lập trình Web  
Phần tử FRAME xác định hình thức và nội dung của một khung trong FRAMESET.  
Ví dụ sau đây tạo hai khung bằng nhau, chia đôi cửa sổ.  
Ví dụ 7:  
L>  
D>  

TITLE>Two Equal Frames  
/HEAD>  
FRAMESET COLS=”50%,*”>  



FRAME SRC=x.htm>  
FRAME SRC=y.htm>  

SET>  
L>  
Hình 4.9: Kết quả ví dụ 7  
Chú ý: File x.html và y.html được lưu cùng thư mục với file .html chính ý  
Các thuộc tính của FRAME bao gồm:  
Thuộc tính  
NAME  
Mô tả  
Thuộc tính này gán tên cho khung hiện thời  
SRC  
Thuộc tính này xác định vị trí tài liệu ban đầu được chứa trong  
khung  
NORESIZE  
Đây là thuộc tính logic. Nó quy định cửa sổ khung không được  
thay đổi kích thước  
7
1




Lập trình Web  
SCROLLING  
Thuộc tính này xác định kiểu cuộn cho cửa sổ khung. Các giá trị  
có thể là:  
Auto - Xuất hiện thanh cuộn khi cần thiết. Đây là giá trị mặc định  
Yes - Luôn luôn xuất hiện thanh cuộn trong cửa sổ của khung  
No - Không xuất hiện thanh cuộn trong cửa sổ của khung  
FRAMEBORDER  
Xác định viền của khung. Các giá trị có thể là:  
1
- Là giá trị mặc định. Có sự phân cách giữa khung hiện thời với  
các khung xung quanh  
0
- Không có sự phân cách giữa khung hiện thời với các khung lân  
cận. Tuy nhiên, nếu các khung lân cận có thiết lập thì vẫn xuất  
hiện sự phân cách này.  
MARGINWIDTH  
MARGINHEIGHT  
Xác định khoảng cách giữa nội dung trong khung với lề trái và lề  
phải của khung. Giá trị phải lớn hơn một  
Xác định khoảng cách giữa nội dung trong khung với lề trên và lề  
dưới của khung. Giá trị phải lớn hơn một  
Ta không thể đóng cửa sổ của khung. Khung được đóng khi cửa sổ tạo ra nó bị đóng  
lại. Khung không có thanh trạng thái vì vậy ta phải sử dụng thanh trạng thái của khung  
chính trong tài liệu.  
Ví dụ 8:  
L>  
D>  

TITLE>Scrolling in Frames  
/HEAD>  
FRAMESET ROWS=”50%,*”>  



FRAME SRC=”x.html” SCROLLING=no>  
FRAME SRC=”y.html” SCROLLING=yes>  

SET>  
L>  
7
2




Lập trình Web  
Hình 4.10: Kết quả ví dụ 8  
Ví dụ 9:  
L>  
D>  

TITLE>Resizing Frames  
/HEAD>  
FRAMESET cols=”20%, 80%”>  


 

FRAME src=”x.html” noresize>  
FRAME src=”y.html”>  

SET>  
owers.jpg”>  
SET>  
L>  
Hình 4.11:Kết quả ví dụ 9  
Đoạn mã sau tạo 3 cột: Cột 2 có độ rộng là 250 pixel, cột 1 chiếm 25% khoảng còn lại  
và cột 3 chiếm 75% khoảng còn lại  
Ví dụ 10:  
7
3




Lập trình Web  
L>  
D>  

TITLE>Using Frames  
/HEAD>  
FRAMESET cols=”1*, 250, 3*”>  


 
 
 
SET>  
L>  
Hình 4.12: Kết quả ví dụ 10  
Chú ý trong ví dụ 9, ta sử dụng phần tử FRAMESET lồng nhau (Nested framesets). Ta  
có thể tạo ra các frameset (tập khung) lồng nhau ở bất kỳ mức nào như ví dụ minh họa  
dưới đây:  
Ví dụ 11:  
L>  
D>  

TITLE>Nested Frames  
/HEAD>  
FRAMESET cols="33%, 33%, 34%">  



FRAME src = "flowers.jpg">  
FRAMESET rows="40%, 50%">  


FRAME src = "x.html">  
FRAME src = "y.html">  

SET>  
 
SET>  
L>  
7
4




Lập trình Web  
Hình 4.13: Kết quả ví dụ 11  

Liên kết các khung  
Khi tạo liên kết trong trang Web, ta có thể thiết lập một khung như một mục tiêu  
của liên kết (link). Trình duyệt tuân theo các bước sau:  




Nếu ta xác định một khung trong thuộc tính đích (TARGET) của phần tử, thì tài  
liệu được phần tử chỉ ra sẽ được tải vào khung đó khi phần tử được kích hoạt.  
Nếu thuộc tính TARGET không được thiết lập thì thuộc tính TARGET của  
phần tử BASE sẽ được sử dụng để xác định khung  
Nếu cả phần tử và phần tử BASE không đề cập đến TARGET, thì tài liệu được  
tải vào khung chứa phần tử đó.  
Nếu không tìm thấy khung thì trình duyệt tạo một cửa sổ và khung mới sau đó  
tải tài liệu vào khung mới này.  
Thuộc tính TARGET được sử dụng để xác định tên khung mà tài liệu được mở  
trong đó. Khi tạo khung, ta cần phải đặt thuộc tính tên. Tên này được dùng khi tạo  
liên kết. Sau khi thay đổi nội dung của một khung thì định nghĩa frameset ban đầu  
bị mất đi. Nếu có nhiều liên kết đến cùng một đích, ta có thể thiết lập một  
TARGET mặc định trong phần tử BASE . Sau đó, việc xác định thuộc tính  
TARGET trong mỗi phần tử sẽ không cần thiết nữa.  
Ví dụ 12:  
L>  

FRAMESET COLS=”40%, 60%”>  
FRAME SRC=”FLOWERS.JPG” NAME=”Flowers” SCROLLING=”yes”>  
FRAME SRC=”LINK.HTML” NAME=”Links” SCROLLING=”no”  
FRAMEBORDER=”no”>  
/FRAMESET>  



L>  
Link.html  
L>  
Y>  
7
5




Lập trình Web  
 

P>The file, X  
P>The file, Y  

Y>  
L>  
Hình 4.14: Kết quả ví dụ 12  

Phần tử NOFRAMES  
Nếu trình duyệt không hỗ trợ khung, với tư cách là người phát triển ứng dụng ta  
nên cung cấp một cách khác để hiển thị nội dung. Phần tử NOFRAMES được sử  
dụng để làm việc đó. Nó chỉ hoạt động trong trình duyệt không hỗ trợ khung.  
Ví dụ 13:  
L>  
=”40%,60%”>  

FRAME SRC=”Flowers.jpg” NAME=”Flowers” SCROLLING=yes>  
FRAMESET ROWS=”60,*”>  


FRAMEBORDER=no>  

FRAME SRC=”y.html” NAME=”y”>  
NOFRAMES>  

Frames are not being displayed. Click here
href=”main.htm”>for a non-frames version  
/NOFRAMES>  
/FRAMESET>  
/FRAMESET>  
/HTML>  




4
.3.3 Phần tử IFRAME – Khung trên dòng (inline frame)  
Phần tử IFRAME được sử dụng để tạo khung trên dòng (inline frame) hay khung nổi  
floating frame). Ta có thể tạo và chèn một khung vào một khối văn bản. Khi trình  
(
7
6
 




Lập trình Web  
duyệt không hỗ trợ khung thì nội dung nằm trong thẻ IFRAME bị trả lại. Khung trên  
dòng (inline frame) không thể thay đổi kích thước.  
Thuộc tính  
NAME  
Mô tả  
Gán tên cho khung hiện thời  
WIDTH  
Xác định độ rộng của khung trên dòng  
Xác định chiều cao của khung trên dòng  
HEIGHT  
Ví dụ 14:  
L>  



P>It has been good fun. You have been learning about frames  
BR>R>  
IFRAME  
src="x.html"  
width="100"  
height="150"  
scrolling=auto  
frameborder=1>  
[The
owser does not support frames or is cu
ently configured  
not to display frames. These are the contents]  
ME>  
>  
The above is an inline frame  
L>  
Hình 4.15: Kết quả ví dụ 14 (trình duyệt có hỗ trợ khung)  
7
7




Lập trình Web  
CHƯƠNG 5: SỬ DỤNG STYLE  
Kết thúc chương này, bạn có thể:  
¾
¾
Khái quát về DHTML  
Sử dụng style sheet  
5
.1 GIỚI THIỆU  
Trước đây, mỗi khi một trang web được hiển thị trong một trình duyệt, người ta không  
thể thay đổi bất cứ thứ gì trên đó. Cả người dùng lẫn tác giả của trang web đều không  
thể có bất kỳ điều khiển nào đối với các phần tử của HTML trên trang web. Sau này,  
với những phiên bản mới hơn của những trình duyệt đã hỗ trợ một đặc tính gọi là  
HTML động. Trong phần này, chúng ta sẽ thảo luận về HTML động và một số những  
điểm mới lạ mà nó mang đến cho những nhà thiết kế web.  
Thêm vào đó, phần này cũng thảo luận về những stylesheet (style sheet cách).  
Stylesheet là một đặc tính quan trọng có thể được dùng trong HTML động. Mặc dù  
trang Web không cần có một stylesheet, nhưng việc sử dụng một stylesheet sẽ mang  
lại những lợi ích nhất định. Chúng ta sẽ thảo luận về stylesheet như là một kĩ thuật và  
bằng cách nào để có thể sử dụng nó trong việc thiết kế và phát triển Web  
5
.2 DHTML  

HTML động” có thể được định nghĩa như là một phần mềm được sử dụng cho việc  
mô tả sự kết hợp giữa HTML, các stylesheet và ngôn ngữ script làm cho tài liệu trở  
nên sinh động.  
Mọi thứ bắt đầu ra sao? Vào những ngày đầu, HTML được phát triển như một định  
dạng tài liệu được dùng để trao đổi thông tin trên Internet. Việc truyền tải dữ liệu nó  
độc lập với nền tảng(platform). Tuy nhiên, trọng tâm đã chuyển từ các vấn đề khoa  
học và hàn lâm qua các vấn đề của người dùng hằng ngày, những người hiện nay đang  
xem Internet như là nguồn thông tin và giải trí. Các trang web trở nên hấp dẫn và  
nhiều màu sắc hơn làm thu hút người dùng. Tuy nhiên, các dáng vẽ cơ bản và nội dung  
của những trang web vẫn cố định. Người phát triển rất ít hoặc không có sự điều khiển  
nào cả đối với một trang web khi nó được hiển thị. HTML vẫn còn “tĩnh”  
5
.2.1 Giới thiệu DHTML  
Sự ra đời của lập trình script đã thêm vào phần động cho các trang web. Người dùng  
có thể tương tác với trang web. Tuy nhiên, một số hạn chế vẫn còn tồn tại. Bất kỳ sự  
xác nhận dữ liệu nào hoặc việc lập trình script đều phải được thực hiện trên máy chủ.  
Để thay đổi nội dung hoặc một kiểu của trang, thì trang đó phải được viết đè lên hoàn  
toàn. Bất cứ tương tác nào của người dùng cũng đều thông qua máy Web server.  
Với mỗi phiên bản trình duyệt mới, lại thêm vào các đặc tính tốt hơn cho HTML.  
Ngày nay Internet và Netscape Navigator hỗ trợ một mô hình đối tượng tài liệu  
“Document Object Model” mà ở đó các phần tử HTML và các thẻ được coi như một  
đối tượng. Những đối tượng có những phương thức, thuộc tính và sự kiện có thể lập  
trình để điều khiển các hoạt động của chúng. Ví dụ, cú pháp thêm vào để thay đổi màu  
của văn bản trong phần tử phân đoạn khi người dùng kích chuột lên nó.  
7
8
 




Lập trình Web  
Các script (là một chương trình nhỏ) có thể thực thi trong trình duyệt. Điều này có  
nghĩa là dữ liệu có thể được thao tác, định dạng và thay đổi một cách năng động ở máy  
khách (client) mà không cần quá nhiều sự hỗ trợ từ máy chủ. Tương tác của người  
dùng giờ đây có thể được xử lý bởi chính máy khách.  
Chú ý: Một ứng dụng Client/Server được tách ra hai phần một là giao diện người  
dùng “front-end client” và phần “back-end server”. Client là một phần của ứng dụng,  
nó trình bày dữ liệu đối với người dùng. Thông thường Client “giao diện người dùng”  
không thực thi các chức năng của cơ sơ dữ liệu, thay vào đó, client gởi các yêu cầu dữ  
liệu đến một máy chủ “server”, định dạng và hiển thị kết quả. Vai trò của máy chủ  
“server” cung cấp xử lý hoặc thông tin đến cho client. Máy chủ cung cấp dữ liệu đến  
client, nhưng đôi khi, Máy chủ “server” có thể cần thực hiện một số công việc xử lý  
đem lại một kết quả dữ liệu yêu cầu. Ví dụ nếu một client yêu cầu về dữ liệu bán hàng  
cho một vùng cụ thể, Server cần thực hiện chính xác một số xử lý dữ liệu từ tập tất cả  
các dữ liệu và định dạng nó theo yêu cầu từ phía client.  
Mỗi công ty Microsoft hay Netscape đều có cách triển trai HTML động riêng của họ.  
Microsoft tập trung vào dùng các Cascading Style Sheet (CSS). Chúng ta có thể dùng  
script để tương tác những phần tử CSS.  
Netscape, ngược lại, dựa vào các phương thức dùng các tầng. Thẻ LAYER được dùng  
để cung cấp hầu hết các thuộc tính của HTML động.  
5
.2.2 Các đặc điểm của DHML  
DHTML không dừng lại ở một số phần mở rộng của HTML. Trong phần này sẽ thảo  
luận về các đặc điểm của DHTML và cách thức dùng nó để thêm vào những tính năng  
động cho trang web.  

Kiểu động (Dynamic Style)- Trong các phiên bản của HTML trước đây, nếu  
chúng ta muốn thay đổi kiểu hay nội dung của một trang web sau khi nó được hiển  
thị trong trình duyệt thì toàn bộ trang đó phải được nạp lại ‘refresh’. Điều đó có  
nghĩa là yêu cầu phải được gởi đến máy chủ thành một trang mới để hiển thị. Đối  
với người dùng thì đây là một qui trình rõ ràng. Tuy nhiên, nếu trang đó phải được  
nạp lại ‘refresh’ thường xuyên sẽ tốn nhiều thời gian và làm cho máy chủ trở nên  
quá tải.  
Trong HTML động, Cách làm này khác một chút. Bằng cách dùng các bảng kiểu  
‘style sheets’, Chúng ta có thể xác định màu, kiểu hoặc kích cỡ của nội dung trang.  
Chúng ta có thể thay đổi kiểu của trang mà không cần gởi đến máy chủ ‘Web  
server’ cho mỗi lần thêm vào các thẻ và thuộc tính. Điều đó có nghĩa là chúng ta có  
thể thay đổi màu, font, kích cỡ hoặc nội dung văn bản khi đáp lại những tương tác  
của người dùng. Trong HTML động, kiểu liên quan đến cách thức, định dạng xuất  
hiện trên trang web hơn là nội dung. Kiểu ‘style’ bao gồm màu sắc, kiểu chữ,  
khoảng cách, thụt đầu dòng, định vị và xuất hiện của văn bản.  

Nội dung động (Dynamic Content)- Được hỗ trợ bởi Internet Explorer. Ở đây  
chúng ta có thể thay đổi chữ và hình ảnh trên trang web sau khi nó hiển thị. Chúng  
ta cũng có thể thay đổi nội dung của trang đó khi đáp lại dữ kiện nhập vào hay sự  
kiện người dùng kích chuột vào.  
7
9
 




Lập trình Web  

Định vị (Positioning)- Các phiên bản của HTML trước đây, không kiểm soát được  
vị trí của một phần tử trên trang web. Theo đó vị trí chính xác của trang đó về mặt  
tọa độ thì không thể chỉ ra được. Việc định vị dành cho trình duyệt. HTML chỉ có  
thể mô tả nội dung và vị trí tương đối của các phần tử.  
Trong HTML động, Chúng ta có thể chỉ ra vị trí chính xác (tuyệt đối hay tương  
đối), mối quan hệ giữa tọa độ x và y. Một khi trang web được hiển thị, chúng ta có  
thể di chuyển các phần tử trên trang đó làm cho nó trở nên động.  


Định vị tuyệt đối – chỉ rõ vị trí chính xác theo các điểm ‘pixels’.  
Định vi tương đối – chỉ ra vi trí tương đối của các phần tử. Trình duyệt xử lý  
việc định vị hiện thời  
Đặc điểm việc định vị cũng cho phép chúng ta xác định thứ tự sắp xếp ‘z-order’của  
các phần tử. Có nghĩa là các đối tượng này nằm chồng lên đối tượng khác.  


Liên kết dữ liệu (Data Binding) – Trong HTML động, chúng ta có thể kết nối  
một cơ sở dữ liệu vào bảng của trang web. Nó được hỗ trợ bởi Internet Explorer.  
Khi trang được nạp lên, dữ liệu từ cơ sở dữ liệu trên máy chủ được hiển thị trong  
bảng. Dữ liệu có thể được sắp xếp, lọc và hiển thị cho phù hợp với yêu cầu.  
Downloadable Fonts (Có khả năng tải Font chữ)- Được Netscape hỗ trợ.  
Downloadable fonts là một đặt điểm cho phép ta chèn các font mà tùy chọn trên  
trang web. Chúng ta có thể gói font trong trang. Điều này đảm bảo rằng văn bản  
trong trang web đó luôn luôn hiển thị theo font mà ta chọn. Đây là đặc điểm quan  
trọng bởi vì thông thường nếu các font được chỉ ra không có trong máy của người  
dùng thì trình duyệt sẽ dùng font mặc định có sẵn. Điều này sẽ làm hủy bỏ mục  
đích chỉ ra kiểu font của bạn.  


Scripting – Chúng ta có thể viết các script để thay đổi kiểu và nội dung của trang  
web. Script này được lồng vào trong trang web.  
Cấu trúc đối tượng (Object Structure) – HTML động theo một cấu trúc đối  
tượng theo đó mỗi phần tử được đối xử như một đối tượng trong cấu trúc. Mỗi đối  
tượng có thể được truy cập và lập trình độc lập.  
5
.3 STYLE SHEETS  
Stylesheet được tạo nên từ các qui tắc kiểu cách, mà nó báo cho trình duyệt biết được  
cách trình bày một tài liệu. Stylesheet là một kỹ thuật thêm vào các kiểu (font, màu,  
khoảng cách) cho những trang web.  
5
.3.1 Khái niệm, chức năng và lợi ích của Style Sheets  
Một tính năng quan trọng của HTML động là những kiểu(style) động. Nghĩa là bạn có  
thể thay đổi kiểu của những phần tử HTML trên trang sau khi chúng được hiển thị trên  
trang ấy. Sự thay đổi này có thể đáp ứng đối với sự tương tác người dùng hoặc thậm  
chí đối với sự thay đổi tình trạng như sự kiện thay đổi kích thước.  
Có hai cách để thay đổi kiểu trên trang web của chúng ta:  

Thay đổi kiểu nội tuyến (inline style)  
8
0
 




Lập trình Web  
Viết kịch bản để thay đổi kiểu  

Khi sử dụng kiểu nội tuyến, chúng ta có thể tạo ra các kiểu động mà không thêm bất  
cứ một kịch bản nào vào trang của chúng ta.  
Một kiểu nội tuyến là kiểu được gán trực tiếp cho một phần tử nào đó. Kiểu này không  
áp dụng vào tất cả các phần tử thuộc một loại nào hay một lớp nào đó. Kiểu nội tuyến  
được định nghĩa bằng thuộc tính STYLE đối với phần tử của thẻ đó. Ví dụ nếu muốn  
đặt màu cho phần tử  màu đỏ, chúng ta phải đặt thuộc tính STYLE bên trong thẻ  
H1 như sau:  
 
Nếu chúng ta muốn sử dụng kịch bản để thay đổi kiểu nội tuyến vào bất cứ lúc nào, thì  
lúc ấy bạn phải sử dụng đến đối tượng kiểu (Style Object). Đối tượng kiểu hỗ trợ mọi  
tính chất mà CSS hỗ trợ đối với các kiểu. Để dùng thuộc tính trong kịch bản:  


Bỏ dấu gạch nối ra khỏi tên của kiểu CSS  
Thay đổi chữ cái đầu tiên của từ sau dấu gạch nối thành từ viết hoa.  
Ví dụ, font-weight của CSS trở thành fontWeight trong DHTML hoặc text-align  
thành textAlign  
Ví dụ 1:  
L>  
D>  
Setting Properties  

/HEAD>  
BODY>  


P
style  
=
color:aqua;font-Style:italic;text-Align:center;>  
This paragraph has an inline style applied to it  




BR>  
P> This paragraph is displayed in the default style.  
BR>  
P>Can you see the difference  
in this line ?  
/BODY>  
/HTML>  


8
1




Lập trình Web  
Hình 5.1: Kết quả ví dụ 1  
Lợi ích của các stylesheet – Các stylesheet có thể được dùng để:  


Nạp chồng trình duyệt: - Mỗi trình duyệt đều có thể hiển thị các trang web  
theo cách riêng của nó. Trước đây các nhà phát triển không kiểm soát được các  
trang web hiển thị trên trình duyệt. Suy cho cùng bạn không biết trình duyệt nào  
mà người dùng cách nửa vòng trái đất sử dụng. Nhờ có các stylesheet bạn có  
thể nạp chồng các qui ước của trình duyệt và đặt theo cách riêng của chúng ta.  
Chẳng hạn, bạn có thể xác định kiểu mà trong đó một phần tử  cần hiển  
thị:  

H1>  
Ove
iding the
owser  

Bố cục trang (Page layout) – Những stylesheet có thể dùng để hiển thị font  
thay đổi màu mà không làm thay đổi cấu trúc của trang web. Điều này có nghĩa  
là với tư cách là một nhà thiết kế bây giờ bạn có thể tách biệt những yêu cầu về  
thiết kế hình ảnh trực quan từ cấu trúc logic của trang web và địa chỉ là hai  
chuyện hoàn toàn khác nhau.  
Khi sử dụng các biện pháp liên quan trong stylesheet của bạn, bạn có thể thể  
hiện các tài liệu sao cho đẹp mắt trên bất kỳ màn hình nào và theo bất kỳ độ  
phân giải nào.  

Sử dụng lại các stylesheet – Môt khi đã định nghĩa kiểu thông tin, chúng ta có  
thể nhúng stylesheet bên trong tài liệu HTML. Lần lượt thay thế, chúng ta có  
thể kết nối tất cả các trang trên website đến stylesheet. Điều này chắc chắn rằng  
các trang web của chúng ta đều có cùng diện mạo thông tin khi được hiển thị.  
Vì vậy, bạn có thể có được nền chung của trang ví dụ như logo của trang và  
một số thông tin chuẩn(cho các trang) trong một stylesheet. Điều này sẽ đảm  
bảo được cách nhìn và cảm nhận thông dụng về trang website. Cứ thử hình  
dung xem có vài trăm trang web và bạn phải xác định kiểu của mỗi trang một  
cách độc lập.  
8
2




Lập trình Web  
Chỉ cần làm một lần thật tốt – Chúng ta có thể tạo một stylesheet và được liên  

kết đến nhiều tài liệu. Tất cả những tài liệu sẽ có diện mạo giống nhau. Tuy  
nhiên, quan trọng nhất là khi bạn thực hiện thay đổi stylesheet thì tất cả các tài  
liệu được kết nối vào stylesheet sẽ bị thay đổi theo.  
5
.3.2 Quy tắc Style Sheets  
Stylesheet phân cấp(cascading style sheet) định nghĩa các kiểu có thể được áp dụng  
vào các trang hoặc các phần tử của trang.  

Qui tắc kiểu (Style Rule)- Stylesheet phân cấp là một tập hợp các qui tắc. Qui tắc  
định nghĩa kiểu của tài liệu. Ví dụ, chúng ta có thể tạo ra một qui tắc kiểu được xác  
định cho tất cả phần tiêu đề hiển thị màu vàng xanh. Qui tắc kiểu có thể ứng  
dụng vào các thành phần được chọn của trang web. Ví dụ, chúng ta có thể xác định  
một đoạn văn bản bất kỳ in đậm và in nghiêng trên trang. Điều này được gọi là  
khai báo kiểu có sẵn mà nhờ đó các kiểu được áp dụng vào các phần tử HTML  
đơn lẻ trên một trang web.  


Style Sheet – Là một danh mục các qui tắc kiểu và có thể nhúng vào bên trong tài  
liệu HTML. Trong trường hợp đó, nó được gọi là stylesheet nhúng. Stylesheet cũng  
có thể được tạo ra bằng một file bên ngoài và được liên kết với tài liệu HTML.  
Các qui tắc (Rules) – Bảng kiểu có thể có một hay nhiều qui tắc. Phần đầu của qui  
tắc gọi là bộ chọn (Selector). Mỗi bộ chọn có các thuộc tính và các giá trị liên quan  
đến nó.  
RuleSelector {Declarations property: value; property: value; ... }  
Phần của qui tắc được kèm theo trong phạm vi các dấu ngoặc móc được gọi là khai  
báo. Khai báo có hai phần, phần trước dấu hai chấm (:) là thuộc tính và phần nằm  
sau dấu hai chấm là giá trị của thuộc tính đó.  
Các khai báo được phân cách bởi dấu chấm phẩy (;). Ta nên đặt dấu chấm phẩy sau  
lần khai báo cuối cùng.  
Ví dụ như  
H1 {color: blue}  
Ở đây, H1 là bộ chọn, color: blue là khai báo  
Trong phạm vi khai báo:  
{Property: Value}  
Color là thuộc tính, blue là giá trị.  
Mỗi qui tắt có thể tách rời nhau trong phạm vi thẻ STYLE.  
Ví dụ 2:  
L>  
D>  

STYLE TYPE=”text/css”>  
8
3
 




Lập trình Web  
H1 {color:limegreen}  
H1 {font-family:Arial}  
H2 {color:limegreen}  
H2 {font-family:Arial}  
LE>  




/HEAD>  
H1>This is the H1 element  
H2>This is the H2 element  
H3>This is the H3 element with its default style as displayed in the  

owser  

/HTML>  
Lưu ý: text/css chỉ ra kiểu ‘style’ được dùng ở đây là stylesheet phân cấp ‘cascading  
style sheet’  
Hình 5.2: Kết quả ví dụ 2  
Thay vào đó chúng ta có thể nhóm các qui tắc. Mỗi khai báo được tách ra bởi dấu  
chấm phẩy.  
Ví dụ 3:  
L>  
D>  

STYLE TYPE=”text/css”>  
H1, H2{color:limegreen;font-family:Arial;}  
/STYLE>  




/HEAD>  
H1>This is the H1 element  
H2>This is the H2 element  
8
4




Lập trình Web  
This is the H3 element with its default style as displayed in the  

owser  

/HTML>  
Hình 5.3: Kết quả Ví dụ 3  
.3.3 Các Selector trong Style Sheets  
5
Ta có thể dùng các giả lớp trong các selector nhưng không thể dùng chúng trong  
HTML. Về cơ bản, chúng dùng những thông tin bên ngoài để tác động đến việc định  
dạng. Ví dụ, với việc sử dụng lớp giả, các liên kết đã được ghé qua có thể hiển thị khác  
đi so với các liên kết chưa được ghé qua như sau:  
A:link { color: red }  
A:visited { color: blue } /* visited links */  
A:active { color: lime } /* active links */  
/* unvisited link */  
Selector có thể định nghĩa như là “một chuỗi kí tự xác định ra các phần tử và các quy  
tắc tương ứng áp dụng cho các phần tử ấy”.  
Có hai kiểu selector cơ bản:  

Selector đơn  
Đây là những selector dễ sử dụng nhất. Selector đơn mô tả một phần tử bất chấp vị  
trí của nó ở đâu trong cấu trúc tài liệu. Bộ nhận dạng tiêu đề H1 là một điển hình.  
Sau đây là một số kiểu của selector đơn.  

Selector HTML  
Những selector này sử dụng tên của phần tử HTML và bỏ đi dấu móc . Vì vậy,  
thẻ  trong HTML trở thành P và khi đó, nó được xem như là một selector.  
Ví dụ sau đây minh họa điều đó  
Ví dụ 4:  
L>  
8
5
 




Lập trình Web  
D>  

STYLE TYPE="text/css">  
P{font-style:italic;  
font-weight:bold;  
color:limegreen}  

/STYLE>  

/HEAD>  
Body>  


P> These selectors use the names of HTML elements. The  
only difference is that you remove the
ackets.  
Y>  
L>  
Hình 5.4:Kết quả ví dụ 4  

Selector lớp  
Những selector này sử dụng thuộc tính CLASS của các phần tử HTML. Mọi  
phần tử khi hiển thị có một thuộc tính CLASS được sử dụng để gán vào một  
định danh (identifier). Ta có thể gán một tên lớp duy nhất cho mọi phần tử  
khác. Ngoài ra, ta cũng có thể gán định danh lớp cho nhiều phần tử cùng loại  
khi ta muốn hiển thị các trạng thái khác nhau so với dạng chuẩn. Ví dụ, ta có  
thể muốn xuất hiện với nhiều màu khác nhau. Trong trường hợp đó, ta sử  
dụng định danh lớp cho .  
Selector lớp có dấu chấm (.) đứng trước gọi là ký tự cờ(flag), theo sau là tên lớp  
do chúng ta chọn. Tốt hơn hết nên chọn những tên lớp theo mục đích của chúng  
chứ không nên chọn tên mô tả màu sắc hay kiểu của chúng. Ví dụ, ta có thể  
muốn đoạn A hiển thị chữ nghiêng, những đoạn khác thì hiển thị theo kiểu  
khác. Trong trường hợp đó, đoạn A có thể có bộ nhận dạng lớp là .slant  
Ví dụ 5:  
L>  
D>  

STYLE TYPE=”text/css”>  
.
.
water { color:blue }  
danger { color:red }  
8
6




Lập trình Web  

/STYLE>  
D>  
Y>  

P class=wate
test water  
P class=dange
test danger  
P> no style  




BR>  
EM class=dange
italic  
Y>  
L>  
Hình 5.5:Kết quả ví dụ 5  
Khi xác định một lớp kiểu, ta có thể xác định được phần tử HTML nào có thể  
sử dụng kiểu này. Chúng ta nên sử dụng từ khóa all, để tất các các phần tử đều  
có thể sử dụng nó.  
Ví dụ 6:  
L>  
D>  


STYLE type="text/css">  
all.hotpink {color:hotpink;}  
P.BLUE {color:blue; font-weight:bold;}  
H5.RED {color:red; font-weight:bold;}  
/STYLE>  
D>  
This is an H5 element that uses the RED  
class/H5>  
This is an H5 element that has been allowed  
to use hotpink style.  
8
7




Lập trình Web  
=lavende
 

P CLASS=BLUE>This paragraph uses the class BLUE  


P>This paragraph does not use the class BLUE  
P CLASS=hotpink>This paragraph is hotpink  
Y>  
L>  
Chú ý: Xem kết quả trong Netscape  
Hình 5.6: Kết quả ví dụ 6  

Selector ID  
Selector ID sử dụng thuộc tính ID của phần tử HTML. Selector ID được dùng  
để áp dụng một kiểu vào riêng một phần tử nào đó trên trang Web. Ví dụ, ta có  
thể sử dụng một selector ID để áp dụng một kiểu đặc biệt nào đó cho phần tử  
. Điều đó không có nghĩa là một kiểu tương tự được áp dụng cho một  
phần tử  khác trên trang đó, nếu không được xác định. Tương tự với việc  
sử dụng kiểu nội tuyến mà nhờ đó có thể áp dụng riêng cho một phần tử nào đó.  
Selector ID được bắt đầu bằng dấu thăng (#).  
Ví dụ 7:  
L>  
D>  

TITLE> ID Selectors  
STYLE TYPE="text/css">  
control {color:red}  
/STYLE>  

#

D>  
8
8




Lập trình Web  
Y>  

P id="control">Fire is of this color  
>  

P>This paragraph has no style applied  
Y>  
L>  
Hình 5.7: Kết quả ví dụ 7  
Ví dụ 8:  
L>  
D>  

TITLE> Combining ID and Class Selectors  
STYLE TYPE="text/css">  

.forest {color:green}  
.danger {color:red}  
#control {color:blue}  
LE>  
D>  
Y>  







P class=forest>green things  
P class=dange
fire hazards  
/P>  
EM class=forest>more green things  
BR>  
EM class=dange
more fire hazards  
UL>  

LI class=dange
things that burn  
things that don't burn  
>  
8
9




Lập trình Web  

P id=control> water  
/BODY>  
/HTML>  


Hình 5.8: Kết quả ví dụ 8  

Selector ngữ cảnh  
Selector ngữ cảnh liên quan đến ngữ cảnh của phần tử. Ví dụ, thỉnh thoảng ta có  
hai phần tử cùng giá trị. Phần tử chính hay phần tử cha có một phần tử con bên  
trong nó. Để thay đổi kiểu của phần tử con, ta phải sử dụng selector theo ngữ cảnh.  
Điều này dựa trên khái niệm kế thừa, phần tử con kế thừa kiểu được gán cho thẻ  
cha.  
Một ví dụ điển hình là phần tử . Khi thêm một phần tử vào thẻ ,  
thì mỗi phần tử bên trong sẽ kế thừa các kiểu của .  
Bây giờ làm sao để kiểm soát điều đó? Suy cho cùng, ta không muốn tất cả các  
phần tử trên trang Web xuất hiện cùng một kiểu. Trong trường hợp đó, chúng ta  
phải có sự thay đổi đặc biệt đối với các phần tử con, nói một cách khác đó là sự nạp  
chồng kế thừa.  
Ví dụ 9:  
L>  
D>  

TITLE>Contextual selectors  
STYLE TYPE="text/css">  
BODY {color:blue;  

background:lavender;  
9
0




Lập trình Web  
font-family:Arial;}  
UL {color:red }  
LE>  

HEAD>  
BODY>  

>  

LI> mangoes  
LI> oranges  
LI> apples  



/UL>  
OL>  


LI> mangoes  
LI> oranges  
LI> apples  


>  
Y>  
L>  
Hình 5.9:Kết quả ví dụ 9  
Selector UL trong style sheet xác định các mục trong danh sách(list item) được  
hiển thị màu đỏ. Chúng kế thừa phông chữ Arial từ khai báo BODY, màu đỏ từ  
khai báo UL. Nếu ta xác định font-family trong khai báo UL, nó sẽ nạp chồng lên  
khai báo của selector BODY. Không có selector OL trong style sheet, vì thế các  
thuộc tính của OL kế thừa từ selector BODY.  
5
.3.4 Kết hợp, liên kết và chèn một Style Sheet vào tài liệu HTML  
Có một số cách ta có thể kết hợp style sheet với HTML  
. Phần tử STYLE  
1
9
1
 




Lập trình Web  
2
3

. Thuộc tính Style  
. Phần tử Link  
Phần tử STYLE  
Phần tử STYLE được chèn vào phần tử của tài liệu, tất cả các quy tắc  
được định nghĩa giữa thẻ mở và thẻ đóng. Khi hiển thị các trang, thì chỉ tài liệu nào  
có nhúng STYLE mới được tác động. Ví dụ:  

= "text/css">  
H1  
P
{color:maroon;}  
{color:hotpink; font-family:Arial;}  
le>  
Ví dụ trên là cách sử dụng phần tử >  
Thuộc tính STYLE  

Thuộc tính STYLE được sử dụng để áp dụng style sheet cho từng phần tử. Một  
style sheet có thể nhỏ như một luật. Khi sử dụng thuộc tính Style ta có thể bỏ qua  
phần tử STYLE và đặt khai báo trực tiếp vào thuộc tính Style trong thẻ mở của  
phần tử. Ví dụ:  

H2 style="color: green;  
font-family: Arial">  
/H2>  

Rõ ràng là chúng ta chỉ nên dùng kiểu này khi thay đổi kiểu cho một phần tử đặc  
biệt nào đó. Nếu ta có dự định áp dụng cùng kiểu trên khắp tài liệu thì lúc ấy đây  
không phải là cách hay. Ví dụ trên là cách sử dụng thuộc tính STYLE.  

Phần tử Link  
Nếu ta muốn sử dụng phần tử LINK, thì stylesheet của ta phải là một tài liệu riêng.  
Sau đó chúng ta phải thêm địa chỉ Web của stylesheet vào. Ví dụ,  
K  
REL  
= stylesheet  
HREF = “stylesmine.css"  
Type = "text/css" >  
Thuộc tính “rel=stylesheet” phải được khai báo nếu không thì trình duyệt sẽ không  
tải được stylesheet .  
Ví dụ 10:  
Sheet1.css  
H2 {color:blue; font-style:italic;}  
P {color: limegreen;}  
Tệp .htm  
L>  
D>  
Linking external style sheets  
9
2




Lập trình Web  

LINK REL=STYLESHEET TYPE="text/css"  
HREF="sheet1.css">  
/HEAD>  




H2>This is an H2 element  
BR>  
BODY>  
This is a paragraph  
Y>  
L>  
Hình 5.10: Kết quả ví dụ 10  
.3.5 Thiết lập thuộc tính trong Style Sheet  
5
Chúng ta có thể thiết lập nhiều thuộc tính trong stylesheet. Bảng 11.1 cho thấy nhiều  
thuộc tính có thể được sử dụng trong stylesheet.  
Thuộc tính  
Tên CSS  
Các thuộc tính font  
Font  
font-size  
font-style  
text-align  
text-indent  
vertical-align  
border  
Các thuộc tính văn bản  
Các thuộc tính hộp  
border-width  
border-bottom  
9
3
 




Lập trình Web  
border-color  
Clip  
Các thuộc tính về vị trí  
height  
Left  
Top  
z-index  
9
4




Lập trình Web  
CHƯƠNG 6: JAVASCRIPT, NỀN TẢNG VÀ CÚ PHÁP  
Kết thúc chương này, bạn có thể:  
¾
¾
Hiểu được cơ bản về JavaScript  
Nắm vững kiến thức cơ bản cú pháp JavaScript  
6
.1 GIỚI THIỆU  
JavaScript là một ngôn ngữ kịch bản (scripting language) được dùng để tạo các script  
ở máy client (client-side script) và máy server (server-side script). Các script ở máy  
client được thực thi tại trình duyệt, các script ở máy server được thực hiện trên server.  
Chương này sẽ giới thiệu cho chúng ta về ngôn ngữ Javascript, và cách chèn một script  
vào trong tài liệu HTML.  
6
.2 GIỚI THIỆU VỀ JAVASCRIPT  
HTML lúc đầu được phát triển như là một định dạng của tài liệu có thể chuyển dữ liệu  
trên Internet Tuy nhiên, không lâu sau đó, trọng tâm của HTML nặng tính hàn lâm và  
khoa học dần chuyển hướng sang người dùng thường nhật vì ngày nay người dùng  
xem Internet như là một nguồn thông tin và giải trí. Các trang Web ngày càng mang  
tính sáng tạo và đẹp mắt hơn nhằm thu hút nhiều người dùng hơn. Nhưng thực chất  
kiểu dáng và nội dung bên trong vẫn không thay đổi. Và người dùng hầu như không  
thể điều khiển trên trang Web mỗi khi nó được hiển thị.  
Javascript được phát triển như là một giải pháp cho vấn đề nêu trên. Javascript là một  
ngôn ngữ kịch bản được Sun Microsystems và Netscape phát triển. Nó được dùng để  
tạo các trang Web động và tương tác trên Internet. Đối với những người phát triển  
HTML, Javascript rất hữu ích trong việc xây dựng các hệ thống HTML có thể tương  
tác với người dùng.  
6
.2.1 Javascript là gì?  
Sun Microsystems đã viết ra một ngôn ngữ phức tạp và mạnh mẽ mà chúng ta đã biết  
đó là ngôn ngữ Java. Mặc dù Java có tính khả dụng cao nhưng nó lại phù hợp nhất đối  
với các nhà lập trình có kinh nghiệm và cho các công việc phức tạp hơn. Netscape  
Communications nhận thấy nhu cầu cần một ngôn ngữ thiết kế web có khả năng  
tương tác vớI người sử dụng hay vớI các Java Applet, dễ sử dụng ngay cả với những  
ngườI lập trình ít kinh nghiệm.  
LiveScript là một ngôn ngữ mới chỉ ở dạng phác thảo, tuy nhiên nó hấp dẫn ngườI sử  
dụng vì hứa hẹn sẽ đáp ứng tốt những yêu cầu trên. LiveScript được thiết kế theo tinh  
thần của nhiều ngôn ngữ script đơn giản nhưng nó lại có tính khả dụng cao được thiết  
kế đặc biệt để xây dựng các trang Web (chẳng hạn như HTML và các form tương tác).  
Để giúp ‘bán chạy’ ngôn ngữ mới này, Netscape hợp tác với Sun cho ra đời ngôn ngữ  
Javascript. Trên thực tế, Microsoft là người tiên phong triển khai phiên bản của  
Javascript (còn có tên là Jscript), nhưng họ không sử dụng các đặc tả chính thức của  
Javascript.  
Mục tiêu của JavaScript là nhằm cung cấp cho các nhà phát triển Web một số khả  
năng và quyền điều khiển chức năng cho trang Web. Mã Javascript có khả năng nhúng  
9
5
 




Lập trình Web  
trong tài liệu HTML để điều khiển nội dung của trang Web và kiểm tra sự hợp lệ của  
dữ liệu mà người dùng nhập vào. Khi một trang hiển thị trong trình duyệt, các câu lệnh  
được trình duyệt thông dịch và thực thi.  
Định nghĩa  
JavaScript là một ngôn ngữ kịch bản dựa trên đối tượng nhằm phát triển các ứng dụng  
Internet chạy trên phía client và phía server.  
Các ứng dụng client được chạy trong một trình duyệt như Netscape Navigator hoặc  
Internet Explorer, và các ứng dụng server chạy trên một Web server như Microsoft’s  
Internet Information Server hoặc Netscape Enterprise Server.  
6
.2.2 Hiệu ứng và quy tắc Javascript  
JavaScript là một ngôn ngữ lập trình được nhúng được trong các trang HTML.  
JavaScript nâng cao tính động và khả năng tương tác cho web-site bằng cách sử dụng  
các hiệu ứng của nó như thực hiện các phép tính, kiểm tra form, viết các trò chơi, bổ  
sung các hiệu ứng đặc biệt, tuỳ biến các chọn lựa đồ hoạ, tạo ra các mật khẩu bảo mật  
và hơn thế nữa.  
Chúng ta có thể sử dụng JavaScript để:  
¾
¾
¾
Tương tác với người dùng. Chúng ta có thể viết mã để đáp lạI các sự kiện. Các  
sự này sẽ có thể phát sinh bởi người dùng - - nhấp chuột hay được phát sinh từ hệ  
thống - định lại kích thước của trang và v.v.  
Thay đổi nội dung động. Mã JavaScript có thể dùng để thay đổi nội dung và vị trí  
các phần tử một cách động trên một trang nhằm đáp lại sự tương tác với người  
dùng.  
Kiểm tra tính hợp lệ dữ liệu. Chúng ta có thể viết mã nhằm kiểm tra tính hợp lệ  
của dữ liệu do người dùng nhập vào trước khi nó được gửi lên Web server để xử lý.  
Giống như các ngôn ngữ khác, JavaScript cũng tuân thủ một số quy tắc ngữ pháp căn  
bản. Việc nắm vững các quy tắc ngữ pháp này có thể giúp ta đọc được script và tự viết  
các script không bị lỗi.  
Một số trong các luật này bao gồm:  
¾
¾
Dùng Caps. JavaScript phân biệt chữ hoa chữ thường  
Dùng Pairs. Trong JavaScript, luôn luôn có cặp ký hiệu mở và đóng. Lỗi sẽ xuất  
hiện khi bỏ sót hoặc đặt sai một trong hai ký hiệu này.  
¾
¾
Dùng Spaces (các ký tự trắng). Như HTML, JavaScript thường bỏ qua ký tự  
trắng. Trong JavaScript, ta có thể thêm vào các ký tự trắng hoặc các tab giúp cho ta  
dễ dàng đọc hay sửa các file script.  
Dùng Chú thích (Comments). Các chú thích giúp ta ghi chú về chức năng của  
đoạn script, thờI gian và ngườI tạo ra đoạn script.  
Mặc dù cả client-side JavaScript và server-side JavaScript đều dựa trên một ngôn ngữ  
nền tảng như nhau, nhưng mỗI loạI còn có thêm những tính năng chuyên biệt phù hợp  
với môi trường mà nó chạy. Nghĩa là, client-side JavaScript bao gồm các đối tượng  
9
6
 




Lập trình Web  
được định nghĩa sẵn chỉ có thể sử dụng trên trình duyêt, Server-side JavaScript bao  
gồm các đối tượng và các hàm được định nghĩa sẵn chỉ có thể sử dùng trong các ứng  
dụng phía server (server-side applications)  
6
.2.3 Các công cụ Javascript và IDE, môi trường thực thi.  
Các công cụ sinh mã JavaScript và IDE giúp tạo ra mã JavaScript rất hữu hiệu. . Các  
công cụ này còn giúp ta nhanh chóng phát triển website của mình.  
Một vài công cụ JavaScript và IDE được đề cập dưới đây:  
¾
Dialog Box. Công cụ này tự động tạo mã để sinh ra các hộp thoại tuỳ biến trên các  
trình duyệt khác nhau (alert, confirm, prompt, v.v.) mang lại kiểu dáng chuyên  
nghiệp cho website.  
¾
¾
Pop-up Menu builder. Chỉ cần đưa vào các lựa chọn, công cụ này sẽ tự động tạo  
ra các pop-up menu trên các trình duyệt khác nhau.  
Remotes. Tự động sinh mã để mở ra một cửa sổ popup.  
Như chúng ta đã biết, JavaScript có thể được chạy trên máy khách (client) và máy  
chủ (server). Bên phía máy khách, trình duyệt sẽ thực thi mã lệnh javascript trong  
trang web khi mở nó. Bên phía máy chủ, mã javascript sẽ được thực thi tại máy chủ  
và do máy chủ thực hiện.  
¾
¾
Client-side Java Script  
Khi máy client yêu cầu một trang HTML, server sẽ kiểm tra xem trang đó có chứa  
script hay không. Nếu nó chứa các client-side script, server sẽ chuyển toàn bộ tài  
liệu bao gồm mã lệnh JavaScript và nội dung HTML của nó cho trình duyệt. Khi  
trình duyệt nhận được tài liệu đó, nó thực thi các mã lệnh HTML và JavaScript mà  
không cần bất kì sự tương tác nào với server.  
JavaScript trên Web Server  
Chúng ta có thể nhúng các lệnh JavaScript chạy trên server (server-side script) vào  
trong tài liệu HTML. Quá trình tạo ra các ứng dụng server-side là một quá trình  
gồm hai giai đọan.  
1
. Các trang HTML có chứa các câu lệnh JavaScript của cả client-side và server-  
side đều được tạo ra cùng với các file JavaScript. Tất cả các file này sẽ được  
biên dịch thành dạng mã thực thi được là bytecode.  
2. Khi trình duyệt yêu cầu trang HTML, run-time engine sẽ thực thi mã lệnh  
server-side JavaScript rồi trả trang HTML về cho trình duyệt.  
Một số công dụng của script server-side bao gồm:  



Kết nối vào các cơ sở dữ liệu  
Chia sẻ thông tin cho những người dùng của một ứng dụng  
Truy cập vào hệ thống file trên server  
6
.2.4 Nhúng Javascript vào trang Web  
9
7
 




Lập trình Web  
Chúng ta có thẻ chèn các lệnh JavaScritp vào trong một tài liệu HTML theo những  
cách sau đây:  
1
2
3
4
. Nhúng các câu lệnh trực tiếp vào trong tài liệu bằng cách sử dụng thẻ T>  
. Liên kết file nguồn JavaScript với tài liệu HTML  
. Đặt các biểu thức JavaScript làm giá trị cho thuộc tính của thẻ HTML.  
. Dùng như trình xử lý sự kiện trong các thẻ HTML.  
Chúng ta có xem chi tiết một số ví dụ sau đây:  
¾
Dùng thẻ SCRIPT  
Mã JavaScript cụ thể được nhúng vào trong tài liệu HTML bằng thẻ SCRIPT.  
Chúng ta có thể nhúng nhiều script vào trong cùng một tài liệu, mỗi script nằm  
trong một thẻ SCRIPT. Khi trình duyệt gặp phải một thẻ . Tiếp đến nó sẽ kiểm tra  
lỗi trong các câu lệnh JavaScript. Nếu gặp phải lỗi, nó sẽ cho hiển thị lỗi đó trong  
chuỗi các hộp cảnh báo (alert boxes) lên màn hình. Nếu không có lỗi, các câu lệnh  
sẽ được biên dịch sao cho máy tính có thể hiểu được lệnh đó.  
Cú pháp như sau:  

-  
JavaScript statements;  
/-->  
/script>  
/


Thuộc tính language trong thẻ script chỉ ra ngôn ngữ mà trình duyệt sẽ dùng để  
biên dịch script. Chúng ta cũng có thể chỉ rõ phiên bản JavaScript nào sẽ được  
trình duyệt sử dụng. Ví dụ:  
 

/head>  
body>  

Enjoy the learning experience!!!  
y>  
l>  
File nguồn JavaScript: (test.js)  
document.write("Hi! How are you?")  
Kết quả:  
Hình 6.2: Dùng JavaScript – File ngoài  
Chú ý: Lưu các file test.htm và test.js trong cùng một thư mục.  
Đây là một ví dụ đơn giản mô tả tính năng liên kết các file riêng chứa mã lệnh  
JavaScript. Tuy nhiên, việc thực hiện chức năng liên kết các file sẽ rất có lợi khi ta  
muốn chia sẻ các hàm cho nhiều tài liệu HTML. Trong trường hợp này, chúng ta  
có thể tạo ra một file .js với các hàm thông thường. File này được liên kết với các  
tài liệu cần nó. Nếu ta muốn điều chỉnh hoặc thêm vào một vài hàm, ta chỉ cần thực  
hiện thay đổi trong một file mà thôi thay vì phải trong nhiều tài liệu HTML.  
Đuôi .js phải được server ánh xạ đến kiểu MINE là application/x-javascript. Server  
lúc ấy sẽ gởi nó trong phần đầu (header) của giao thức HTTP.  
Để ánh xạ đuôi .js với kiểu MIME ta thêm dòng code sau vào file chứa các kiểu  
MIME trong thư mục config của server. Sau đó ta sẽ khởi động lại server.  
1
00  




Lập trình Web  
type=application/x-javascript exts=js  
Nếu server không ánh xạ đuôi .js đến application/x-javascript MIME thì trình duyệt  
sẽ không tải đúng file JavaScript được xác định trong thuộc tính SRC.  
¾
Đặt các biểu thức JavaScript là giá trị cho các thuộc tính của thẻ HTML  
Chúng ta có thể dùng biểu thức JavaScript làm giá trị cho thuộc tính của thẻ  
HTML. Các giá trị đó được thực hiện một cách động mỗi khi trang được trình  
duyệt tải vào. Cú pháp như sau:  
&
{expression};  
Trong đó expression là biểu thức JavaScript sẽ được thực hiện.  
Chẳng hạn ta có thể định nghĩa một biến chứa độ rộng. Chúng ta có thể dùng biến  
này để xác định độ rộng của một đường kẻ ngang trên trang Web. Trong ví dụ sau  
đây, giá trị độ rộng được đặt là 10:  
Ví dụ 3:  
L>  
D>  
PT>  
var linewidth = 10;  
/SCRIPT>  

Y>  

H2>Using entities  
HR width="&{linewidth};%" align = "left">  

Y>  
L>  
Khi mã được thực thi, thì phần tử HR sẽ dùng giá trị cuả biến linewidth như minh  
họa trong Hình 6.3  
Hình 6.3: Dùng các biểu thức JavaScript  
1
01  




Lập trình Web  
Một biểu thức JavaScript chỉ có thể được sử dụng bên phía phải của phần tên/giá trị  
(name/value pair) trong thẻ HTML. Chẳng hạn khi chúng ta dùng HR  
WIDTH=”&{linewidth};%” câu lệnh sẽ được dịch là:  
 
Nếu chúng ta sử dụng &{myTitle};, chuỗi &myTitle; sẽ được hiển  
thị thay vì giá trị của biến myTitle.  
¾
Dùng JavaScript trong trình xử lý sự kiện  
Chúng ta có thể tạo một trình xử lý sự kiện cho một thẻ HTML dùng mã  
JavaScript. Một sự kiện là một hành động được hỗ trợ bởi một đối tượng. Một trình  
xử lý sự kiện là đoạn mã sẽ đuợc thực thi nhằm đáp trả một sư kiện. Cú pháp là:  
 
TAG là một thẻ HTML. Event handler là tên của trình xử lý sự kiện, và JavaScript  
code là một loạt các câu lệnh JavaScript được thực thi khi sự kiện được kích hoạt.  
Trong ví dụ sau đây, sự kiện onClick đựơc kích hoạt khi người dùng nhấp chuột  
vào phần tử BUTTON. Trình xử lý sự kiện được gọi để đáp trả sự kiện đó. Trình  
xử lý sự kiện có chứa mã JavaScript được thực thi bởi trình duyệt.  
Ví dụ 4:  
L>  

Nguồn:trên mạng

 
 
HƯỚNG DẪN DOWNLOAD


Để tải về giáo án điện tử HTML-JAVASCRIPT
Bước 1:Tại trang tài liệu chi tiết nslide bạn muốn tải, click vào nút Download màu xanh lá cây ở phía trên.
Bước 2: Tại liên kết tải về, bạn chọn liên kết để tải File về máy tính. Tại đây sẽ có lựa chọn tải File được lưu trên nslide.com
Bước 3: Một thông báo xuất hiện ở phía cuối trình duyệt, hỏi bạn muốn lưu . - Nếu click vào Save, file sẽ được lưu về máy (Quá trình tải file nhanh hay chậm phụ thuộc vào đường truyền internet, dung lượng file bạn muốn tải)
Có nhiều phần mềm hỗ trợ việc download file về máy tính với tốc độ tải file nhanh như: Internet Download Manager (IDM), Free Download Manager, ... Tùy vào sở thích của từng người mà người dùng chọn lựa phần mềm hỗ trợ download cho máy tính của mình

LINK DOWNLOAD

pdf.pngHTMLJAVASCRIPTLaptrinhWebvoiHTMLvaJavaScript.pdf[]

File đã kiểm duyệt
     Báo vi phạm bản quyền
Pass giải nén (Nếu có):
nslide.com
DOWNLOAD
(Miễn phí)

Bạn phải gởi bình luận/ đánh giá để thấy được link tải

Nếu bạn chưa đăng nhập xin hãy chọn ĐĂNG KÝ hoặc ĐĂNG NHẬP

BÌNH LUẬN


Nội dung bậy bạ, spam tài khoản sẽ bị khóa vĩnh viễn, IP sẽ bị khóa.
Đánh giá(nếu muốn)
 BÌNH LUẬN

ĐÁNH GIÁ


ĐIỂM TRUNG BÌNH

0
0 Đánh giá
Tài liệu rất tốt (0)
Tài liệu tốt (0)
Tài liệu rất hay (0)
Tài liệu hay (0)
Bình thường (0)

giáo án tương tự

  • HTML-JAVASCRIPT

    Danh mục: Giáo án điện tử

    Thể loại: Giáo án điện tử

    Phí tải: Miễn phí

    Ngày : 13/10/2017

    Xem: 11

  • HTML-JAVASCRIPT
    Tư liệu tham khảo
    HTML-JAVASCRIPT

    Danh mục: Giáo án điện tử

    Thể loại: Giáo án điện tử Tư liệu tham khảo

    Phí tải: Miễn phí

    Ngày : 18/6/2016

    Xem: 0

  • Tài liệu HTML - JAVASCRIPT
    Tin học
    Tài liệu HTML - JAVASCRIPT

    Danh mục: Giáo án điện tử

    Thể loại: Giáo án điện tử Tin học

    Phí tải: Miễn phí

    Ngày : 27/10/2012

    Xem: 0

  • Hướng dẫn nhúng code HTML/javascript vào bài viết
    Giáo án khác
    Hướng dẫn nhúng code HTML/javascript vào bài viết

    Danh mục: Giáo án điện tử

    Thể loại: Giáo án điện tử Giáo án khác

    Phí tải: Miễn phí

    Ngày : 1/12/2010

    Xem: 0

  • Tai lieu huong dan lap trinh Web bang HTML va JavaScript
    Giáo án khác
    Tai lieu huong dan lap trinh Web bang HTML va JavaScript

    Danh mục: Giáo án điện tử

    Thể loại: Giáo án điện tử Giáo án khác

    Phí tải: Miễn phí

    Ngày : 14/11/2011

    Xem: 0